/* Applicant accounts (stage 2, 17 October 2026): the account page /account/, and the account
   pieces on /jobs and the job pages (Track your applications, Save job, the saved details note,
   the CV on file choice, the training panel on the success screens).
   Loaded after styles.css on jobs.html (so on every job page too) and on /account/. Phone first:
   the base rules are the phone layout, wider screens add to them. Colours are the site's tokens. */

/* ---- /jobs and the job pages ---------------------------------------- */
.p2-track { margin: 14px 0 0; font-size: 15px; }
.p2-track a { color: var(--royal); font-weight: 600; text-underline-offset: 4px; }
.p2-track a::after { content: " \2192"; }
.p2-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.p2-save { min-height: 48px; }
.p2-save[data-saved="1"] { border-color: var(--royal); color: var(--royal); }
.p2-save[data-saved="1"]::before { content: "\2713"; font-weight: 700; }
.p2-save-msg { font-size: 14px; color: var(--aubergine); }
.p2-save-msg:empty { display: none; }

/* Signed in on a job form: who they are, and that the saved details are filled in. */
.p2-signed {
  margin: 0 0 20px; padding: 12px 16px; border-left: 3px solid var(--royal); border-radius: 0 10px 10px 0;
  background: var(--cream); font-size: 15px; line-height: 1.55; color: var(--ink);
}
.p2-signed a { color: var(--royal); }

/* "Use your CV on file" or upload a new one. */
.p2-cvpick { margin-bottom: 14px; }
.p2-cvpick .p2-opt span { overflow-wrap: anywhere; }

/* The success screens: the account line and the training panel. Left-aligned; the form's
   heading and intro are hidden by the script once it is sent, and the training panel sits under
   a hairline instead of in a box of its own (design review, 17 Oct 2026). */
.p2-panel .form-success, .p2-apply .form-success { text-align: left; }
.p2-ok-acct { margin-top: 10px; }
.p2-ok-acct a { color: var(--royal); font-weight: 600; white-space: nowrap; }
.form-success .p2-train { margin-top: 24px; padding: 24px 0 0; border: 0; border-top: 1px solid rgba(45, 27, 78, 0.12); border-radius: 0; background: none; text-align: left; }

/* ---- Training panel (both success screens and the account page) ---- */
.p2-train {
  padding: 22px 22px 20px; border-radius: 16px; background: var(--cream-dim);
  border: 1px solid rgba(45, 27, 78, 0.12); color: var(--ink);
}
.p2-train .p2-train-h {
  margin: 0 0 6px; font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'SOFT' 30; font-optical-sizing: auto;
  font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -0.01em; color: var(--aubergine);
}
.p2-train p { margin: 0 0 14px; color: var(--slate); font-size: 15px; line-height: 1.6; }
.p2-train .p2-train-links { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.p2-panel .p2-train .btn, .p2-train .btn { width: auto; min-height: 48px; justify-content: center; }
.p2-train .p2-train-phone { margin: 0; font-size: 14px; }
.p2-train .p2-train-phone a { white-space: nowrap; }
.p2-train a:not(.btn) { color: var(--royal); }

/* ---- The account page -------------------------------------------- */
.acct-body { padding: 48px 0 72px; }
/* One width for everything signed in, so every block shares one right edge (design review). */
.acct-app { max-width: 760px; }
.acct-loading { color: var(--slate); font-size: 15px; }
.acct-loading[hidden] { display: none; }
.acct-note {
  max-width: 760px; margin: 0 0 24px; padding: 14px 18px; border-left: 3px solid var(--royal);
  border-radius: 0 12px 12px 0; background: var(--cream-dim); color: var(--aubergine); font-size: 15px; line-height: 1.6;
}
.acct-done strong { display: block; margin-bottom: 2px; }
.acct-signin { max-width: 760px; }
.acct-body .p2-panel.acct-signin .btn { width: 100%; justify-content: center; min-height: 48px; }
.p2-panel.acct-signin > .acct-foot { margin: 20px 0 0; }
.acct-signin #acct-ask > p, .acct-signin > p:not(.acct-msg):not(.acct-foot) { margin: 0 0 16px; color: var(--slate); font-size: 15px; line-height: 1.65; }
.acct-msg { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; background: #FBEDED; color: #8A2323; font-size: 15px; line-height: 1.5; }
.acct-msg.ok { background: rgba(91, 42, 140, 0.08); color: var(--aubergine); }
.acct-check h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 24px; color: var(--aubergine); margin: 0 0 8px; }
.acct-check p { color: var(--ink); font-size: 15px; line-height: 1.6; }
.acct-check strong { overflow-wrap: anywhere; }
.acct-check .acct-again-row { margin-top: 16px; }
.acct-foot { margin: 18px 0 0; font-size: 14px; color: var(--slate); line-height: 1.6; }
.acct-foot a { color: var(--royal); }

.acct-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 0 0 18px; border-bottom: 1px solid rgba(45, 27, 78, 0.14);
}
.acct-bar p { margin: 0; font-size: 15px; color: var(--slate); min-width: 0; overflow-wrap: anywhere; }
.acct-bar strong { color: var(--aubergine); }
.btn.acct-small { padding: 10px 18px; font-size: 14px; min-height: 44px; }

/* "On this page": a row of links that scrolls sideways on a phone instead of wrapping. */
.acct-jump {
  display: flex; gap: 8px; overflow-x: auto; padding: 16px 0 4px; margin: 0 0 8px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.acct-jump::-webkit-scrollbar { display: none; }
.acct-jump a {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 100px;
  border: 1px solid rgba(45, 27, 78, 0.18); color: var(--aubergine); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.acct-jump a:hover { border-color: var(--aubergine); }

/* <section> carries 110 px of padding site-wide; these are sections inside one band. */
.acct-sec { margin: 40px 0 0; padding: 0; scroll-margin-top: 96px; }
.acct-sec > h2 {
  margin: 0 0 14px; font-family: 'Fraunces', Georgia, serif; font-variation-settings: 'SOFT' 30; font-optical-sizing: auto;
  font-weight: 400; font-size: 28px; line-height: 1.15; letter-spacing: -0.01em; color: var(--aubergine);
}
.acct-intro { margin: 0 0 16px; color: var(--slate); font-size: 15px; line-height: 1.65; }
.acct-empty { margin: 0; padding: 16px 18px; border-radius: 12px; border: 1px dashed rgba(45, 27, 78, 0.24); color: var(--slate); font-size: 15px; line-height: 1.6; }
.acct-empty a { color: var(--royal); font-weight: 600; }
.acct-saved { margin: 10px 0 0; font-size: 14px; color: var(--aubergine); min-height: 1em; }
.acct-saved.err { color: #8A2323; }

/* One application card. */
.acct-cards { display: grid; gap: 14px; }
.acct-card {
  background: var(--cream-dim); border: 1px solid rgba(45, 27, 78, 0.12); border-radius: 16px; padding: 18px 18px 14px;
  min-width: 0;
}
.acct-card.ended { background: var(--cream); }
.acct-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 12px; }
.acct-card h3 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 700; color: var(--aubergine); min-width: 0; overflow-wrap: anywhere; }
.acct-card h3 a { color: inherit; text-underline-offset: 4px; }
.acct-card h3 a:hover { color: var(--royal); }
.acct-meta { margin: 6px 0 0; color: var(--slate); font-size: 14px; line-height: 1.55; }
.acct-chip {
  display: inline-flex; align-items: center; min-height: 26px; padding: 2px 12px; border-radius: 100px; flex: none;
  font-size: 13px; font-weight: 700; letter-spacing: .01em; background: rgba(91, 42, 140, 0.12); color: var(--aubergine);
}
.acct-chip.placed { background: var(--aubergine); color: var(--cream); }
.acct-chip.ended { background: rgba(45, 27, 78, 0.07); color: #5A574F; }

/* The progress line. Phone: dots only, the stage is in the chip; the words stay for screen readers. */
.acct-steps { list-style: none; display: flex; margin: 16px 0 6px; padding: 0; }
.acct-steps li { position: relative; flex: 1 1 0; min-width: 0; padding-top: 18px; text-align: center; font-size: 12.5px; line-height: 1.3; color: #5A574F; }
.acct-steps li::before {
  content: ""; position: absolute; z-index: 1; top: 2px; left: 50%; width: 12px; height: 12px; margin-left: -6px;
  border-radius: 50%; background: var(--cream); border: 2px solid rgba(45, 27, 78, 0.28); box-sizing: border-box;
}
.acct-steps li::after { content: ""; position: absolute; top: 7px; left: -50%; width: 100%; height: 2px; background: rgba(45, 27, 78, 0.14); }
.acct-steps li:first-child::after { display: none; }
.acct-steps li.done::before { background: var(--royal); border-color: var(--royal); }
.acct-steps li.done::after, .acct-steps li.current::after { background: var(--royal); }
.acct-steps li.current::before { border-color: var(--royal); box-shadow: 0 0 0 4px rgba(91, 42, 140, 0.18); }
.acct-steps li.current { color: var(--aubergine); font-weight: 700; }
.acct-sr, .acct-steps .acct-step-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.acct-stepline { margin: 0; font-size: 13px; color: var(--aubergine); }
@media (min-width: 720px) {
  .acct-steps .acct-step-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; display: block; padding: 6px 2px 0; }
  .acct-stepline { display: none; }
}

.acct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 0; }
.acct-more { margin: 12px 0 0; border-top: 1px solid rgba(45, 27, 78, 0.12); padding-top: 4px; }
.acct-more summary {
  display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--royal); font-weight: 600; font-size: 15px;
  list-style: none;
}
.acct-more summary::-webkit-details-marker { display: none; }
.acct-more summary::before { content: "+"; display: inline-block; width: 18px; font-weight: 700; }
.acct-more[open] summary::before { content: "\2212"; }
.acct-more h4 { margin: 10px 0 6px; font-size: 14px; font-weight: 700; color: var(--aubergine); }
.acct-letter { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 8px; padding: 12px 14px; border-radius: 10px; background: var(--cream); color: var(--ink); font-size: 15px; line-height: 1.6; }
.acct-answers { margin: 0; }
.acct-answers dt { font-size: 14px; color: var(--slate); margin-top: 8px; }
.acct-answers dd { margin: 2px 0 0; font-size: 15px; color: var(--ink); }

/* Lists: alerts and saved jobs. */
.acct-list { list-style: none; margin: 0 0 16px; padding: 0; border-top: 1px solid rgba(45, 27, 78, 0.14); }
.acct-list:empty { display: none; }
.acct-list > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 14px 0; border-bottom: 1px solid rgba(45, 27, 78, 0.14); }
.acct-list .acct-li-main { min-width: 0; flex: 1 1 240px; }
.acct-list .acct-li-title { display: block; font-weight: 700; color: var(--aubergine); font-size: 16px; overflow-wrap: anywhere; }
.acct-list a.acct-li-title { color: var(--aubergine); text-underline-offset: 4px; }
.acct-list a.acct-li-title:hover { color: var(--royal); }
.acct-list .acct-li-sub { display: block; color: var(--slate); font-size: 14px; margin-top: 2px; }
.acct-list .acct-li-empty { display: block; padding: 2px 0; color: var(--slate); font-size: 15px; }

.acct-fixed { margin: 0 0 18px; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.acct-fixed .p2-hint { display: block; }
.acct-body .p2-panel .btn { width: auto; }
.acct-body .p2-panel .p2-send .btn, .acct-body #acct-cv-form .btn, .acct-body #acct-alert-form .btn { min-height: 48px; }
.acct-cv-file { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--aubergine); overflow-wrap: anywhere; }
.acct-cv-sub { margin: 0 0 14px; font-size: 14px; color: var(--slate); }
.btn.acct-danger { border-color: rgba(160, 43, 43, 0.4); color: #8A2323; }
.btn.acct-danger:hover { border-color: #8A2323; background: #FBEDED; }
.btn.acct-link { padding: 10px 16px; min-height: 44px; font-size: 14px; }

/* 11: the upload form sits apart from the CV on file above it. */
#acct-cv-form { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(45, 27, 78, 0.12); }

/* The confirm box. */
.acct-dialog {
  margin: auto; max-height: calc(100dvh - 32px); overflow: auto;
  width: min(460px, calc(100vw - 32px)); padding: 26px 24px 22px; border: 0; border-radius: 18px;
  background: var(--cream); color: var(--ink); box-shadow: 0 24px 60px rgba(26, 15, 46, 0.3);
}
.acct-dialog::backdrop { background: rgba(26, 15, 46, 0.55); }
.acct-dialog h2 { margin: 0 0 10px; font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; font-weight: 400; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; color: var(--aubergine); }
.acct-dialog p { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--ink); }
.acct-dialog-btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.acct-dialog-btns .btn { min-height: 48px; }
.acct-dialog .btn-primary.is-danger { background: #8A2323; }
.acct-dialog .btn-primary.is-danger:hover { background: #A02B2B; }

@media (min-width: 900px) {
  .acct-body { padding: 64px 0 96px; }
  .acct-cards { grid-template-columns: minmax(0, 1fr); }
  .acct-card { padding: 22px 24px 16px; }
  .acct-sec { margin-top: 56px; }
}
@media (max-width: 560px) {
  .acct-body .p2-panel { padding: 20px 16px; }
  .p2-train { padding: 18px 16px; }
  .p2-train .p2-train-links .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .acct-jump { scroll-behavior: auto; }
}

/* Your details: a short summary, the form opens with "Change my details". */
.acct-sum { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 20px; max-width: 760px; margin: 0 0 8px; padding: 0; }
.acct-sum div { display: grid; grid-template-columns: minmax(0, 1fr); padding: 8px 0; border-bottom: 1px solid rgba(45, 27, 78, 0.1); }
.acct-sum dt { font-size: 13px; color: var(--slate); }
.acct-sum dd { margin: 2px 0 0; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.acct-body .p2-send .btn + .btn { margin-left: 8px; }
@media (min-width: 720px) {
  .acct-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}