@charset "utf-8";
/* =========================================================================
   account.css — shared styling for the post-login customer surface
   covers: dashboard, order history, personal/account settings, success
           pages (Stripe + PayPal), login, register, verify, claim
   Uses tokens from design-tokens.css. Class prefix: .acc-*
   ========================================================================= */

/* ---------- 0. ACCOUNT SHELL ------------------------------------------- */

.acc-shell {
  background: var(--brand-paper-50);
  /* The meganav is position:sticky (in-flow), so it already occupies its own
     height above this shell — adding var(--nav-height) here double-counted it
     and pushed the page head ~94px below the nav. A comfortable standardized
     gap below the nav is var(--sp-6) (32px). */
  padding: var(--sp-6) 0 var(--sp-9);
  min-height: calc(100vh - var(--nav-height));
}

.acc-shell--auth {
  /* For login/register/verify/claim — slightly more breathing room and a
     subtle paper-paint background to make the centred card feel framed. */
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(58, 170, 53, 0.08), transparent 65%),
    var(--brand-paper-50);
  padding: var(--sp-7) 0 var(--sp-9);
}

.acc-wrap {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

.acc-wrap--narrow { max-width: 720px; }

@media (max-width: 768px) {
  .acc-shell { padding-top: var(--sp-5); }
  .acc-shell--auth { padding-top: var(--sp-6); }
}

/* ---------- 1. PAGE HEAD (eyebrow + serif title + lede) ---------------- */

.acc-head { margin-bottom: var(--sp-6); }

.acc-head__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--color-accent-text);
  margin: 0 0 var(--sp-2);
}

.acc-head__title {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(2rem, 2vw + 1.5rem, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--brand-ink-900);
  margin: 0 0 var(--sp-3);
}

.acc-head__lede {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--brand-charcoal-700);
  margin: 0;
  max-width: 56ch;
}

.acc-head--center { text-align: center; }
.acc-head--center .acc-head__lede { margin: 0 auto; }

/* ---------- 2. CARDS ---------------------------------------------------- */

/* .acc-card base migrated to the shared .bpr-card primitive (bpr-primitives.css,
   .acc-card aliased there). Modifiers + sub-elements stay below. */
.acc-card--lg { padding: var(--sp-6); }
.acc-card--flat { box-shadow: none; }

.acc-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
}

.acc-card__head--split {
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: var(--sp-2);
}

.acc-card__title {
  /* TYP2: card titles use the display serif (Lora) for an editorial feel —
     a deliberate exception to the Inter-≤20px handoff rule, applied to card
     headings site-wide. */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--brand-ink-900);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.acc-card__title i { color: var(--brand-green-700); font-size: 1.125rem; }

.acc-card__title-link {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--brand-green-700) !important;
  text-decoration: none !important;
}
.acc-card__title-link:hover { color: var(--brand-green-500) !important; }

.acc-card__pill {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 0.15rem 0.65rem;
  background: var(--brand-paper-100);
  color: var(--brand-charcoal-700);
  border-radius: var(--radius-pill);
  letter-spacing: 0.04em;
}

/* ---------- 3. WELCOME PANEL (dashboard) ------------------------------- */

.acc-welcome {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 80% at 100% 0%, rgba(58, 170, 53, 0.16), transparent 65%),
    linear-gradient(135deg, var(--brand-green-50) 0%, var(--brand-paper-50) 100%);
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  padding: var(--sp-6) var(--sp-5);
  margin-bottom: var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

@media (min-width: 768px) {
  .acc-welcome {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--sp-7) var(--sp-6);
  }
}

.acc-welcome__copy { flex: 1 1 auto; max-width: 60ch; }

.acc-welcome__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  font-weight: 600;
  margin: 0 0 var(--sp-2);
}

.acc-welcome__title {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(1.625rem, 1.4vw + 1.2rem, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--brand-ink-900);
  margin: 0 0 var(--sp-2);
}

.acc-welcome__body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--brand-charcoal-700);
  margin: 0;
}

.acc-welcome__cta { flex-shrink: 0; }

/* ---------- 4. RECENT ORDERS LIST (dashboard) -------------------------- */

.acc-orders {
  list-style: none;
  margin: 0;
  padding: 0;
}

.acc-order-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--brand-paper-200);
  align-items: center;
  text-decoration: none !important;
  color: inherit !important;
  transition: background-color 120ms ease, padding 120ms ease;
}

.acc-order-row:first-child { padding-top: 0; }
.acc-order-row:last-child { border-bottom: 0; padding-bottom: 0; }

.acc-order-row:hover {
  background: var(--brand-paper-50);
}

.acc-order-row__primary {
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--brand-ink-900);
  letter-spacing: 0.02em;
}

.acc-order-row__meta {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--brand-charcoal-500);
  margin-top: 2px;
}

.acc-order-row__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}

.acc-order-row__price {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--brand-ink-900);
}

/* ---------- 5. STATUS PILL --------------------------------------------- */
/* Migrated to the cross-surface .bpr-pill primitive (bpr-primitives.css);
   the status->label/variant mapping lives in work/status_display.py. */

/* ---------- 6. EMPTY STATE --------------------------------------------- */

.acc-empty {
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}

/* Use when .acc-empty already lives inside an .acc-card (no double card) */
.acc-empty--flat {
  border: 0;
  box-shadow: none;
  padding: var(--sp-5) var(--sp-2);
  background: transparent;
}

.acc-empty__medallion {
  width: 88px;
  height: 88px;
  margin: 0 auto var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand-green-100);
  color: var(--brand-green-700);
  font-size: 2rem;
  box-shadow: 0 0 0 8px rgba(0, 141, 54, 0.06);
}

.acc-empty__title {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--brand-ink-900);
  margin: 0 0 var(--sp-2);
  letter-spacing: -0.01em;
}

.acc-empty__body {
  font-family: var(--font-body);
  color: var(--brand-charcoal-700);
  margin: 0 auto var(--sp-5);
  max-width: 44ch;
  line-height: 1.55;
}

/* ---------- 7. QUICKLINKS GRID (dashboard) ----------------------------- */

.acc-quicklinks {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

@media (min-width: 576px) { .acc-quicklinks { grid-template-columns: 1fr 1fr; } }

.acc-quicklink {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--brand-ink-900) !important;
  text-decoration: none !important;
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.acc-quicklink:hover {
  border-color: var(--brand-green-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.acc-quicklink__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-green-100);
  color: var(--brand-green-700);
  border-radius: 50%;
  font-size: 1rem;
}

.acc-quicklink__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  margin: 0;
}

.acc-quicklink__hint {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--brand-charcoal-500);
  margin-top: 2px;
}

/* ---------- 8. SIDE CARDS (dashboard right rail) ----------------------- */

.acc-side-card {
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  padding: var(--sp-5);
  margin-bottom: var(--sp-4);
}

.acc-side-card__icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-green-100);
  color: var(--brand-green-700);
  border-radius: 50%;
  font-size: 1.125rem;
  margin: 0 0 var(--sp-3);
}

.acc-side-card__title {
  font-family: var(--font-display); /* TYP2: card headings on Lora */
  font-weight: 600;
  font-size: 1rem;
  color: var(--brand-ink-900);
  margin: 0 0 var(--sp-1);
}

.acc-side-card__body {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--brand-charcoal-700);
  margin: 0 0 var(--sp-4);
  line-height: 1.5;
}

/* ---------- 9. ORDER HISTORY CARD ------------------------------------- */

.acc-order-card {
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--sp-4);
  overflow: hidden;
}

.acc-order-card__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  background: var(--brand-paper-50);
  border-bottom: 1px solid var(--brand-paper-200);
}

@media (max-width: 576px) {
  .acc-order-card__head {
    grid-template-columns: 1fr;
    padding: var(--sp-4);
  }
}

.acc-order-card__ref-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.acc-order-card__ref {
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 1rem;
  color: var(--brand-ink-900);
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.acc-order-card__ref--link {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  color: var(--brand-ink-900);
  transition: color 140ms ease, text-decoration-color 140ms ease;
}

.acc-order-card__ref--link:hover,
.acc-order-card__ref--link:focus {
  color: var(--brand-green-700);
  text-decoration-color: var(--brand-green-700);
}

.acc-order-card__ref-arrow {
  font-size: 0.75rem;
  opacity: 0.5;
  transition: opacity 140ms ease, transform 140ms ease;
  display: inline-block;
}

.acc-order-card__ref--link:hover .acc-order-card__ref-arrow,
.acc-order-card__ref--link:focus .acc-order-card__ref-arrow {
  opacity: 1;
  transform: translateX(3px);
}

.acc-order-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--brand-charcoal-500);
}

.acc-order-card__meta .bpr-pill { margin-left: 0; }

.acc-order-card__totals {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
  justify-self: end;
}

.acc-order-card__total-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-charcoal-500);
}

.acc-order-card__total-amount {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--brand-green-700);
  line-height: 1;
  letter-spacing: -0.01em;
}

.acc-order-card__body { padding: var(--sp-2) var(--sp-5) var(--sp-4); }

@media (max-width: 576px) {
  .acc-order-card__body { padding: var(--sp-2) var(--sp-4) var(--sp-4); }
}

/* ---------- 10. DOC ROW (used inside order cards + success) ----------- */

.acc-docs {
  list-style: none;
  margin: 0;
  padding: 0;
}

.acc-doc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--brand-paper-200);
}

.acc-doc:last-child { border-bottom: 0; }

.acc-doc__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-paper-100);
  border-radius: var(--radius-sm);
  color: var(--brand-charcoal-700);
  font-size: 1rem;
}

.acc-doc__icon--word { color: #2B579A; background: #E7F0FA; }
.acc-doc__icon--pdf  { color: #B30B00; background: #FBE9E8; }
.acc-doc__icon--text { color: #4A4A4A; background: #F0EFEC; }
.acc-doc__icon--ppt  { color: #D24726; background: #FCEAE3; }
.acc-doc__icon--xls  { color: #217346; background: #E6F3EC; }

.acc-doc__info { min-width: 0; }

.acc-doc__name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--brand-ink-900);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.acc-doc__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 2px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--brand-charcoal-500);
}

.acc-doc__ref {
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-weight: 600;
  font-size: 0.75rem;
  background: var(--brand-paper-100);
  color: var(--brand-charcoal-700);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-sm);
  letter-spacing: 0.02em;
}

.acc-doc__chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--brand-green-50);
  color: var(--brand-green-700);
  border: 1px solid var(--brand-green-100);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill);
}

.acc-doc__price {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--brand-ink-900);
  white-space: nowrap;
}

.acc-doc__download {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--brand-green-700) !important;
  text-decoration: none !important;
  background: var(--brand-green-100);
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0, 141, 54, 0.18);
}

.acc-doc__download:hover {
  background: var(--brand-green-700);
  color: #fff !important;
  border-color: var(--brand-green-700);
}

@media (max-width: 576px) {
  .acc-doc {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .acc-doc__price {
    grid-column: 2 / 3;
    text-align: right;
  }
}

/* ---------- 11. SUCCESS PAGE PANEL ------------------------------------ */

.acc-success {
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: var(--sp-7) var(--sp-6);
  text-align: center;
}

@media (max-width: 576px) {
  .acc-success { padding: var(--sp-6) var(--sp-4); }
}

.acc-success__medallion {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--brand-green-100);
  color: var(--brand-green-700);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--sp-4);
  box-shadow: 0 0 0 10px rgba(0, 141, 54, 0.06);
  font-size: 2rem;
}

.acc-success__title {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: clamp(1.875rem, 1.5vw + 1.4rem, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--brand-ink-900);
  margin: 0 0 var(--sp-2);
}

.acc-success__lede {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--brand-charcoal-700);
  margin: 0 auto var(--sp-5);
  max-width: 44ch;
}

.acc-success__refblock {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: var(--brand-paper-50);
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-5);
}

.acc-success__reflabel {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--brand-charcoal-500);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 0.25rem;
}

.acc-success__refvalue {
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--brand-ink-900);
  letter-spacing: 0.02em;
  margin: 0;
}

/* Documents block on success page — left-aligned within centered card */
.acc-success__docs {
  text-align: left;
  background: var(--brand-paper-50);
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-5);
}

.acc-success__docs-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brand-charcoal-500);
  margin: 0 0 var(--sp-3);
}

.acc-success__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-top: var(--sp-3);
  margin-top: var(--sp-3);
  border-top: 1px solid var(--brand-paper-200);
}

.acc-success__total-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-charcoal-500);
}

.acc-success__total-amount {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: 1.625rem;
  color: var(--brand-green-700);
  letter-spacing: -0.01em;
}

/* Next steps */
.acc-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  text-align: left;
  margin: var(--sp-6) 0 var(--sp-5);
}

@media (min-width: 576px) {
  .acc-steps { grid-template-columns: repeat(3, 1fr); }
}

.acc-step {
  background: var(--brand-paper-50);
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
}

.acc-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-green-700);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.8125rem;
  margin-bottom: var(--sp-2);
}

.acc-step__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--brand-ink-900);
  margin: 0 0 0.25rem;
}

.acc-step__body {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--brand-charcoal-500);
  margin: 0;
  line-height: 1.5;
}

/* Guest panel */
.acc-success__guest {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  background: var(--brand-mint-50);
  border: 1px solid var(--brand-green-300);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin: 0 0 var(--sp-5);
  text-align: left;
}

.acc-success__guest-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand-green-700);
  color: #fff;
  font-size: 0.875rem;
}

.acc-success__guest-text {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--brand-charcoal-700);
  line-height: 1.5;
  margin: 0;
}

.acc-success__guest-text strong { color: var(--brand-ink-900); }

/* Actions row */
.acc-success__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}

/* ---------- 12. AUTH CARD (login/register/verify/claim) --------------- */

.acc-auth {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.acc-auth--wide {
  max-width: 780px;
}

.acc-auth__card {
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-2);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
}

@media (min-width: 576px) {
  .acc-auth__card { padding: var(--sp-7) var(--sp-6) var(--sp-6); }
}

.acc-auth__head {
  text-align: center;
  margin-bottom: var(--sp-5);
}

.acc-auth__medallion {
  width: 72px;
  height: 72px;
  margin: 0 auto var(--sp-4);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand-green-100);
  color: var(--brand-green-700);
  font-size: 1.5rem;
  box-shadow: 0 0 0 8px rgba(0, 141, 54, 0.06);
}

.acc-auth__medallion--warn {
  background: #FBE9E8;
  color: #B30B00;
  box-shadow: 0 0 0 8px rgba(179, 11, 0, 0.06);
}

.acc-auth__title {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  font-size: 1.875rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--brand-ink-900);
  margin: 0 0 var(--sp-2);
}

.acc-auth__sub {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--brand-charcoal-700);
  margin: 0 auto;
  max-width: 36ch;
}

.acc-auth__sub strong { color: var(--brand-ink-900); }

/* Wide variant (e.g. the recruitment-test upload page) carries longer
   instructional copy. Left-align the header + let the intro span the full
   card width so it doesn't read as a narrow centred column. */
.acc-auth--wide .acc-auth__head { text-align: left; }
.acc-auth--wide .acc-auth__head .acc-auth__medallion { margin-left: 0; }
.acc-auth--wide .acc-auth__sub { max-width: none; }

.acc-auth__form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.acc-field {
  display: flex;
  flex-direction: column;
}

/* FORM1: consistent vertical rhythm between stacked fields. Bare block forms
   (e.g. the /account/personal/ cards) gave their `.acc-field` children no gap,
   so labels bumped into the field above. The flex-gap containers
   (`.acc-auth__form`, `.stf-form-stack`) already space their children, so the
   margin is reset to 0 inside them to avoid doubling up. */
.acc-field + .acc-field { margin-top: var(--sp-4); }
.acc-auth__form .acc-field + .acc-field,
.stf-form-stack .acc-field + .acc-field { margin-top: 0; }

.acc-field__label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand-charcoal-500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 0.4rem;
}

.acc-field__input {
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-sm);
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--brand-ink-900);
  line-height: 1.4;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  width: 100%;
  /* Without border-box the 100% width + 1rem padding + 1px borders overflow
     the containing card to the right (onboarding "Your details" — #12a). */
  box-sizing: border-box;
}

.acc-field__input:focus {
  outline: none;
  border-color: var(--brand-green-500);
  box-shadow: 0 0 0 3px rgba(58, 170, 53, 0.18);
}

.acc-field__select {
  /* Identical visual base to .acc-field__input, plus appearance reset + token chevron. */
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-sm);
  padding: 0.85rem 2rem 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--brand-ink-900);
  line-height: 1.4;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  width: 100%;
  box-sizing: border-box;  /* match .acc-field__input — avoid right overflow (#12a) */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23596573' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}
.acc-field__select:focus {
  outline: none;
  border-color: var(--brand-green-500);
  box-shadow: 0 0 0 3px rgba(58, 170, 53, 0.18);
}

/* Wrapper for Django widget-rendered selects (e.g. CountrySelectWidget).
   Provides the chevron via pseudo-element when the widget owns its own markup. */
.acc-field__select-wrap {
  position: relative;
}
.acc-field__select-wrap select {
  width: 100%;
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-sm);
  padding: 0.85rem 2rem 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--brand-ink-900);
  line-height: 1.4;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23596573' d='M0 0l5 6 5-6z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}
.acc-field__select-wrap select:focus {
  outline: none;
  border-color: var(--brand-green-500);
  box-shadow: 0 0 0 3px rgba(58, 170, 53, 0.18);
}

.acc-field__hint {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--brand-charcoal-500);
  margin: 0.35rem 0 0;
  line-height: 1.45;
}

.acc-field__error {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: #8E2421;
  margin: 0.35rem 0 0;
  font-weight: 600;
}

/* Inline checkbox row on the account surface (remove-photo, opt-ins) — replaces
   per-label inline `display:flex` styling and gives the tick brand-forest. */
.acc-checkbox {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.875rem;
  color: var(--brand-charcoal-500);
  cursor: pointer;
}
.acc-checkbox input[type="checkbox"] { accent-color: var(--color-primary); }

/* Avatar preview beside its edit fields (account photo/bio card). The wrapper's
   bottom margin is what keeps the submit button from colliding with the last
   field — the fields inside stack as standard .acc-field blocks. */
.acc-avatar-edit {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.acc-avatar-edit__body { flex: 1; min-width: 16rem; }
/* The last .acc-field in the column owns no trailing margin — the wrapper does. */
.acc-avatar-edit__body .acc-field:last-child { margin-bottom: 0; }

.acc-auth__submit {
  width: 100%;
  justify-content: center;
  margin-top: var(--sp-2);
}

/* Hint shown alongside the label to signal "optional" or constraints
   (e.g. "PDF or DOCX, 10 MB max") without growing the label itself. */
.acc-field__optional {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--brand-charcoal-400);
}

/* Custom file input — the browser's native <input type="file"> is hidden;
   the visible UI is a labeled pill button + filename text. Keeps look and
   feel aligned with `.acc-field__input` so the apply form reads like one
   coherent set of fields rather than a Bootstrap leftover. */
.acc-file {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.6rem;
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}

.acc-file:hover,
.acc-file:focus-within {
  border-color: var(--brand-green-500);
  background: var(--brand-green-50);
}

.acc-file:focus-within {
  box-shadow: 0 0 0 3px rgba(58, 170, 53, 0.18);
}

/* On-brand secondary button (was an off-brand black pill — UAT 2026-06-03).
   Sentence case, brand-green tint; the green "Submit" CTA stays the primary. */
.acc-file__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem;
  background: var(--brand-green-50);
  color: var(--brand-green-700);
  border: 1px solid var(--brand-green-100);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.acc-file:hover .acc-file__btn,
.acc-file:focus-within .acc-file__btn {
  background: var(--brand-green-100);
  border-color: var(--brand-green-300);
}

.acc-file__name {
  font-family: var(--font-body);
  /* Empty-state placeholder ("No file chosen") stays quiet + small so the
   * "Choose file…" pill is the primary element; a CHOSEN filename is promoted
   * to ink + 600 by .acc-file--has-file below. */
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--brand-charcoal-500, #67747C);
  text-transform: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.acc-file--has-file {
  border-color: var(--brand-green-300);
  background: var(--brand-green-50);
}
.acc-file--has-file .acc-file__name {
  color: var(--brand-ink-900);
  font-weight: 600;
}

.acc-file__input {
  /* Visually hide but keep focusable + clickable via the parent label. */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.acc-auth__alert {
  padding: 0.75rem 0.95rem;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  margin-bottom: var(--sp-2);
  border: 1px solid transparent;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.acc-auth__alert--error {
  background: #FFF0EE;
  border-color: #E48F8A;
  color: #8E2421;
}

.acc-auth__alert--success {
  background: var(--brand-green-50);
  border-color: var(--brand-green-300);
  color: var(--brand-green-700);
}

.acc-auth__alert i { flex-shrink: 0; margin-top: 0.15rem; }

.acc-auth__divider {
  position: relative;
  text-align: center;
  margin: var(--sp-4) 0 var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  color: var(--brand-charcoal-500);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.acc-auth__divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--brand-paper-200);
}

.acc-auth__divider span {
  position: relative;
  background: #fff;
  padding: 0 var(--sp-3);
}

.acc-auth__google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  background: #fff !important;
  color: var(--brand-ink-900) !important;
  border: 1px solid var(--brand-paper-200) !important;
  /* Squared to match the homepage .btn-pill--google + the squared-button pass. */
  border-radius: var(--radius-btn) !important;
  padding: 0.75rem 1rem !important;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.acc-auth__google:hover {
  border-color: var(--brand-green-300) !important;
  color: var(--brand-ink-900) !important;
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
  text-decoration: none;
}

.acc-auth__google img { height: 24px; width: 24px; }

.acc-auth__foot {
  text-align: center;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--brand-charcoal-700);
  margin: var(--sp-5) 0 0;
}

.acc-auth__foot a {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--brand-green-700);
}

.acc-auth__resend {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--brand-paper-200);
  text-align: center;
}

.acc-auth__resend p {
  font-size: 0.8125rem;
  color: var(--brand-charcoal-500);
  margin: 0 0 var(--sp-3);
}

.acc-auth__resend-form {
  display: flex;
  gap: var(--sp-2);
  max-width: 320px;
  margin: 0 auto;
}

.acc-auth__resend-form .acc-field__input { padding: 0.55rem 0.75rem; font-size: 0.875rem; }

.acc-auth__resend-btn {
  flex-shrink: 0;
  padding: 0.55rem 1rem;
  background: transparent;
  color: var(--brand-green-700);
  border: 1px solid var(--brand-green-700);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
  white-space: nowrap;
}

.acc-auth__resend-btn:hover {
  background: var(--brand-green-700);
  color: #fff;
}

/* ---------- 13. ACCOUNT SETTINGS (personal) --------------------------- */

/* Single-column stacked layout inside the 720px .acc-wrap--narrow container.
   Three cards, no empty cells, reads cleanly as a focused settings page. */
.acc-settings-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* Crispy form overrides — neutralise default Bootstrap noise on these pages */
.acc-card form .form-control,
.acc-card form input[type="email"],
.acc-card form input[type="text"],
.acc-card form input[type="password"] {
  border-radius: var(--radius-sm) !important;
  border-color: var(--brand-paper-200) !important;
  padding: 0.75rem 0.85rem !important;
  font-family: var(--font-body) !important;
  font-size: 0.9375rem !important;
}

.acc-card form .form-control:focus {
  border-color: var(--brand-green-500) !important;
  box-shadow: 0 0 0 3px rgba(58, 170, 53, 0.18) !important;
}

.acc-card form label {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 600 !important;
  color: var(--brand-charcoal-500) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 0.4rem !important;
}

.acc-card form .btn {
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  padding: 0.65rem 1.4rem !important;
}

.acc-card form .btn.btn-primary,
.acc-card form input[type="submit"].btn-primary {
  background: var(--brand-green-700) !important;
  border-color: var(--brand-green-700) !important;
  color: #fff !important;
}

.acc-card form .btn.btn-primary:hover,
.acc-card form input[type="submit"].btn-primary:hover {
  background: var(--brand-green-500) !important;
  border-color: var(--brand-green-500) !important;
}

/* Spacing under a manually-laid-out field above a submit button.
   `.acc-field` carries no bottom margin (the `.acc-auth__form` flex-gap
   normally handles spacing), but on /account/personal the "Update name"
   button is a bare submit immediately after a single `.acc-field`, so it
   rendered flush against the input. Push the button down to restore the
   vertical rhythm. Scoped to direct-child submit buttons in account
   cards so it can't disturb crispy multi-field forms (which already
   space their own controls).
   The buttons on these forms are `.btn-pill`, not `.btn` (#6) — the original
   rule never matched, so they sat flush. Cover both. */
.acc-card form > .acc-field + .btn,
.acc-card form .acc-field + .btn,
.acc-card form > .acc-field + .btn-pill,
.acc-card form .acc-field + .btn-pill {
  margin-top: var(--sp-4);
}

/* Crispy's "help-block" / form-text under each field — tighten typography */
.acc-card form .help-block,
.acc-card form .form-text,
.acc-card form small {
  font-family: var(--font-body) !important;
  font-size: 0.8125rem !important;
  color: var(--brand-charcoal-500) !important;
}

/* Standalone .acc-review-stars-wrap clarification: crispy still wraps the
   stars radio group in a label even after we hide the col-form-label —
   keep the stars themselves laying out left-aligned. */
.acc-review-stars-wrap .form-group { margin-bottom: 0; }

/* ---------- 14. DASHBOARD 2-COL LAYOUT -------------------------------- */

.acc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

@media (min-width: 992px) {
  .acc-grid { grid-template-columns: minmax(0, 8fr) minmax(260px, 4fr); }
}

.acc-grid__main { min-width: 0; }
.acc-grid__side { min-width: 0; }

/* ---------- 15. CONTACT GRID ------------------------------------------ */

.acc-contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

@media (min-width: 768px) {
  .acc-contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}

.acc-contact-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

/* Contact-card CTA pair (form link + live-chat trigger). Row on desktop;
   on narrow screens they stack full-width so the labels never wrap inside
   the pill and both share one clean left+right edge. */
.acc-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

@media (max-width: 480px) {
  .acc-contact-actions { flex-direction: column; }
  .acc-contact-actions .btn-pill { width: 100%; }
}

.acc-contact-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}

.acc-contact-card__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-green-100);
  color: var(--brand-green-700);
  border-radius: 50%;
  font-size: 1.125rem;
}

.acc-contact-card__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--brand-charcoal-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 2px;
}

.acc-contact-card__value {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  color: var(--brand-ink-900);
  margin: 0;
  word-break: break-word;
}

/* ---------- 16. REVIEW FORM ------------------------------------------- */

.acc-review-stars-wrap label.col-form-label { display: none; }

/* ---------- 17. ORDER DETAIL — hero card ------------------------------ */

.acc-order-hero {
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-2);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-5);
}

@media (max-width: 576px) {
  .acc-order-hero { padding: var(--sp-4); }
}

.acc-order-hero__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.acc-order-hero__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--color-accent-text);
  margin: 0 0 var(--sp-1);
}

.acc-order-hero__ref {
  font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: clamp(1.375rem, 2vw + 0.75rem, 2rem);
  color: var(--brand-ink-900);
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1.15;
}

.acc-order-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--brand-paper-200);
}

.acc-order-hero__fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.acc-order-hero__fact-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-charcoal-500);
}

.acc-order-hero__fact-value {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  color: var(--brand-ink-900);
}

/* Emphasise the price via colour + weight only — keeping it the same size as
   the other two facts so all three values sit on a shared baseline (a larger
   size dropped TOTAL PAID below DATE PLACED / DOCUMENTS). */
.acc-order-hero__fact-value--price {
  color: var(--brand-green-700);
  font-weight: 700;
}

/* ---------- 18. ORDER DETAIL — timeline -------------------------------- */

.acc-timeline-wrap {
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-2);
}

.acc-timeline-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  counter-reset: step;
}

.acc-timeline-step {
  flex: 1 1 80px;
  min-width: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
}

.acc-timeline-step__node {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 0.875rem;
  font-family: var(--font-sans);
  font-weight: 700;
  flex-shrink: 0;
}

.acc-timeline-step--done .acc-timeline-step__node {
  background: var(--brand-green-700);
  color: #fff;
}

.acc-timeline-step--current .acc-timeline-step__node {
  background: var(--brand-cream-50);
  color: #B05D00;
  border: 2px solid #B05D00;
}

.acc-timeline-step--upcoming .acc-timeline-step__node {
  background: var(--brand-paper-100);
  color: var(--brand-charcoal-500);
  border: 1px solid var(--brand-paper-200);
}

.acc-timeline-step__label {
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: var(--font-sans);
  line-height: 1.2;
}

.acc-timeline-step--done .acc-timeline-step__label   { color: var(--brand-green-700); }
.acc-timeline-step--current .acc-timeline-step__label { color: #B05D00; }
.acc-timeline-step--upcoming .acc-timeline-step__label { color: var(--brand-charcoal-500); }

/* ---------- 19. ORDER DETAIL — section heading ------------------------ */

.acc-section-heading {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-charcoal-500);
  /* sp-4 matches the rail's flex `gap`, so the main column's first doc card
     and the rail's summary card share a top edge (see --rail below). */
  margin: 0 0 var(--sp-4);
}

/* In the rail the flex `gap` already spaces the heading from the summary card,
   so the heading carries no margin of its own — keeps both columns' card tops
   aligned. */
.acc-section-heading--rail {
  margin: 0;
}

/* ---------- 20. ORDER DETAIL — per-document card ---------------------- */

.acc-doc-card {
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  margin-bottom: var(--sp-4);
  overflow: hidden;
  transition: box-shadow 160ms ease, border-color 160ms ease;
}

.acc-doc-card:focus-within {
  border-color: var(--brand-green-300);
  box-shadow: var(--shadow-2);
}

.acc-doc-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  padding: var(--sp-4) var(--sp-5);
  background: var(--brand-paper-50);
  border-bottom: 1px solid var(--brand-paper-200);
}

@media (max-width: 576px) {
  .acc-doc-card__head { padding: var(--sp-4); }
}

.acc-doc-card__head-left {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-width: 0;
  flex: 1 1 auto;
}

.acc-doc-card__icon-wrap {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-paper-100);
  color: var(--brand-charcoal-700);
  border-radius: var(--radius-sm);
  font-size: 1rem;
}

.acc-doc-card__title-block { min-width: 0; }

.acc-doc-card__filename {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--brand-ink-900);
  margin: 0 0 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 38ch;
}

.acc-doc-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--brand-charcoal-500);
}

/* The per-document deadline chip on the order-detail card head and the
   success-page line items is now the unified .bpr-deadline-pill (amber/red
   urgency), rendered by {% deadline_pill %} — see bpr-primitives.css. The old
   single-colour .acc-deadline-pill was retired in deadline-pill-unification. */

/* Collapse affordance on the per-document order-detail card (cards open by
   default; the chevron toggles a per-card Alpine `open`). */
.acc-doc-card__head-right {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-shrink: 0;
}

.acc-doc-card__collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--brand-charcoal-500);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.acc-doc-card__collapse:hover {
  background: var(--brand-paper-50);
  color: var(--brand-ink-900);
  border-color: var(--brand-paper-200);
}
.acc-doc-card__collapse:focus-visible {
  outline: 2px solid var(--brand-green-300);
  outline-offset: 2px;
}
.acc-doc-card__chev {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 160ms ease;
  margin-top: -0.15rem;
}
.acc-doc-card.is-collapsed .acc-doc-card__chev {
  transform: rotate(-45deg);
  margin-top: 0.15rem;
}

.acc-doc-card__body {
  padding: var(--sp-4) var(--sp-5);
}

@media (max-width: 576px) {
  .acc-doc-card__body { padding: var(--sp-4); }
}

/* Revision tracking sub-card (2026-06-14, elevated) — the customer's window
   into a revision: an icon tile, a heading row with a live/delivered status
   chip, refined copy, and (when delivered) the kept original as proper
   secondary downloads. Mirrors the admin nested card; the internal -R* ref is
   never shown to the customer. */
.acc-revision {
  margin-top: var(--sp-4);
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: var(--shadow-1);
  padding: var(--sp-4) var(--sp-5);
}
@media (max-width: 576px) { .acc-revision { padding: var(--sp-4); } }
.acc-revision--active {
  border-color: #F0DEB8;
  background: #FFFCF5;
}

.acc-revision__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.acc-revision__icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--brand-green-50);
  color: var(--brand-green-700);
  font-size: 1rem;
}
.acc-revision--active .acc-revision__icon { background: #FCEFD6; color: #B05D00; }
.acc-revision__headings { flex: 1 1 auto; min-width: 0; }
.acc-revision__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--brand-ink-900);
  margin: 0;
}
.acc-revision__sub {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--brand-charcoal-500);
  margin: 0.1rem 0 0;
}

/* Live / delivered status chip on the right of the head. */
.acc-revision__status {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.22rem 0.6rem;
  border-radius: var(--radius-pill);
  color: #B05D00;
  background: #FCEFD6;
}
.acc-revision__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #D9941F;
  box-shadow: 0 0 0 0 rgba(217, 148, 31, 0.5);
  animation: acc-rev-pulse 1.8s ease-out infinite;
}
@keyframes acc-rev-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(217, 148, 31, 0.45); }
  70%  { box-shadow: 0 0 0 6px rgba(217, 148, 31, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 148, 31, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .acc-revision__pulse { animation: none; }
}

.acc-revision__body {
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--brand-charcoal-700);
  margin: 0;
}
.acc-revision__downloads {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
/* Quiet revision-history line — transparency without a stack of cards. */
.acc-revision__history {
  margin: var(--sp-3) 0 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--brand-charcoal-500);
}

/* (The old .acc-doc-card__downloads / __dl-btn button row was retired by the
   card redesign 2026-07-11 -- downloads are .acc-doc-link rows now.) */

/* Editor note callout */
.acc-doc-card__note {
  margin: var(--sp-3) 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--brand-green-50);
  border-left: 4px solid var(--brand-green-700);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.acc-doc-card__note-label {
  margin: 0 0 0.35rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--brand-green-700);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.acc-doc-card__note-text {
  margin: 0;
  white-space: pre-line;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--brand-charcoal-700);
}

/* Waiting / in-progress state */
.acc-doc-card__waiting {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.acc-doc-card__waiting-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-paper-100);
  color: var(--brand-charcoal-500);
  border-radius: 50%;
  font-size: 1rem;
}

/* Terminal danger-family variants (RD-5 refunded; Stage-1 cancelled + disputed):
   tint the icon to the danger family (matching the .bpr-pill--danger pill) so a
   terminal doc reads as stopped at a glance, not visually identical to the
   neutral "working on this" card. */
.acc-doc-card__waiting--refunded .acc-doc-card__waiting-icon,
.acc-doc-card__waiting--cancelled .acc-doc-card__waiting-icon,
.acc-doc-card__waiting--disputed .acc-doc-card__waiting-icon {
  background: #FBE9E8;
  color: #8E2421;
}

.acc-doc-card__waiting-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--brand-ink-900);
  margin: 0 0 0.25rem;
}

.acc-doc-card__waiting-body {
  margin: 0;
  font-size: 0.9rem;
  color: var(--brand-charcoal-700);
  line-height: 1.5;
}

/* Supporting files the customer attached (read-only list). Mirrors the
   checkout file-chip idiom (.chk-support__list) in the account design
   language: a bordered rounded list where each file is a row with an icon
   tile, an ellipsis-truncating name, and an optional "project archive" tag.
   Without these rules the block fell back to a bare browser <ul> — disc
   bullets, default indent — next to the polished cards around it. */
.acc-doc-card__support {
  margin-top: var(--sp-4);
}
.acc-doc-card__support-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 var(--sp-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--brand-charcoal-700);
}
.acc-doc-card__support-label i {
  color: var(--brand-charcoal-500);
}
.acc-doc-card__support-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-md);
  background: #fff;
  overflow: hidden;
}
.acc-doc-card__support-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--brand-ink-900);
}
.acc-doc-card__support-item + .acc-doc-card__support-item {
  border-top: 1px solid var(--brand-paper-200);
}
.acc-doc-card__support-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-sm);
  background: var(--brand-paper-100);
  color: var(--brand-charcoal-500);
  font-size: 0.8rem;
}
.acc-doc-card__support-item--archive .acc-doc-card__support-icon {
  background: var(--brand-green-50);
  color: var(--brand-green-700);
}
.acc-doc-card__support-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acc-doc-card__support-tag {
  flex: none;
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-pill);
  background: var(--brand-green-50);
  border: 1px solid var(--brand-green-100);
  color: var(--brand-green-700);
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- 21. ORDER DETAIL — rating card ----------------------------- */

.acc-rating-card {
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  padding: var(--sp-5) var(--sp-6);
}

@media (max-width: 576px) {
  .acc-rating-card { padding: var(--sp-4); }
}

.acc-rating-card__heading {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1.125rem;
  color: var(--brand-ink-900);
  margin: 0 0 var(--sp-2);
}

.acc-rating-card__sub {
  font-size: 0.9375rem;
  color: var(--brand-charcoal-700);
  margin: 0 0 var(--sp-4);
}

.acc-rating-card__stars {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-bottom: var(--sp-4);
}

.acc-rating-card__star-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 2.25rem;
  padding: 0.2rem;
  line-height: 1;
  transition: transform 80ms ease;
}

.acc-rating-card__star-btn:hover { transform: scale(1.15); }
.acc-rating-card__star-btn:focus { outline: 2px solid var(--brand-green-300); outline-offset: 2px; border-radius: 2px; }

.acc-rating-card__comment-wrap { display: flex; flex-direction: column; }

.acc-rating-card__comment-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand-charcoal-500);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
}

.acc-rating-card__comment-field {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--brand-ink-900);
  resize: vertical;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.acc-rating-card__comment-field:focus {
  outline: none;
  border-color: var(--brand-green-500);
  box-shadow: 0 0 0 3px rgba(58, 170, 53, 0.18);
}

.acc-rating-card__done {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.acc-rating-card__medal {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-green-100);
  color: var(--brand-green-700);
  border-radius: 50%;
  font-size: 1.25rem;
}

.acc-rating-card__done-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 1rem;
  color: var(--brand-green-700);
  margin: 0 0 0.25rem;
}

.acc-rating-card__done-body {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--brand-charcoal-700);
  line-height: 1.5;
}

/* Trustpilot review CTA — on the delivered-order rating card. Plain deep-link
   (no live widget). Subtle standing variant under the rating form; the fuller
   `--prominent` panel appears in the post-rating done-state. */
.acc-trustpilot-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--brand-paper-200);
}

.acc-trustpilot-cta__star { flex-shrink: 0; display: inline-flex; }

.acc-trustpilot-cta__text {
  margin: 0;
  flex: 1 1 12rem;
  font-size: 0.9375rem;
  color: var(--brand-charcoal-700);
  line-height: 1.45;
}

.acc-trustpilot-cta__btn {
  flex-shrink: 0;
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill, 999px);
  background: #00B67A; /* Trustpilot green */
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease;
}

.acc-trustpilot-cta__btn:hover { background: #019966; }
.acc-trustpilot-cta__btn:focus-visible {
  outline: 2px solid #00B67A;
  outline-offset: 2px;
}

.acc-trustpilot-cta--prominent {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-md);
  background: var(--brand-paper-100);
}

/* ---------- 22. ORDER DETAIL — support footer note -------------------- */

.acc-support-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  background: var(--brand-paper-100);
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-5);
}

.acc-support-note__icon {
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--brand-charcoal-500);
  font-size: 1rem;
}

.acc-support-note__text {
  margin: 0;
  font-size: 0.9375rem;
  color: var(--brand-charcoal-700);
  line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * Read-only document brief — `payments_stripe/_doc_brief_readonly.html`
 * Used on the customer order detail, the staff order detail, and the writer
 * per-doc view. The classes are part of the `.acc-*` system, so the rules
 * live here (loaded by `content/base.html`) rather than in checkout.css.
 * ------------------------------------------------------------------------- */
/* Lightened 2026-06-13: was a filled grey slab with a green rule, which
   dominated the card body — heavier than the actual actions, and especially
   wasteful for a one-line brief ("English dialect: English (UK)"). Now a quiet
   labelled block hung off a thin neutral hairline, so it reads as supporting
   detail rather than a callout. Shared by customer / writer / admin surfaces. */
/* Nested under the facts rows — an indent, not a quote block (the old
   border-left read as a blockquote; polish pass 2026-07-11). */
.acc-doc-brief {
  margin: 0.85rem 0;
  padding: 0.1rem 0 0.1rem 0.85rem;
  background: transparent;
  border-radius: 0;
}
.acc-doc-brief__heading {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-charcoal-500, #67747C);
  margin: 0 0 0.4rem;
}
.acc-doc-brief__list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.3rem 0.85rem;
  margin: 0;
}
.acc-doc-brief__row {
  display: contents;
}
.acc-doc-brief__row dt {
  font-size: 0.8rem;
  color: var(--brand-charcoal-600, #67747C);
  font-weight: 500;
}
.acc-doc-brief__row dd {
  margin: 0;
  font-size: 0.9rem;
  color: var(--brand-charcoal-800, #2E221E);
}
.acc-doc-brief__row--block dt,
.acc-doc-brief__row--block dd {
  grid-column: 1 / -1;
}
.acc-doc-brief__row--block dd {
  margin-top: 0.15rem;
  white-space: pre-wrap;
}

/* On the customer order-detail card the shared brief panel is a full-width
   PEER section (the card body leads with the status, then a facts grid, then
   the brief + supporting files below). Drop the base panel's left indent and
   give it the section top gap. The writer (.stf-workgrid, staff.css) and admin
   surfaces don't use .acc-doc-card__body, so they keep their own brief
   treatment. */
.acc-doc-card__body > .acc-doc-brief {
  margin: var(--sp-5) 0 0;
  padding: 0;
}
.acc-doc-card__body > .acc-doc-brief .acc-doc-brief__heading {
  margin-bottom: 0.55rem;
}
/* "Notes for editor" is the customer's own words — render it as a quiet
   blockquote, distinct from the forest "note from your editor" quote. The
   partial already runs |linebreaksbr, so keep white-space normal (pre-wrap
   would double every line break). */
.acc-doc-card__body .acc-doc-brief__notes {
  margin-top: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-left: 3px solid var(--brand-charcoal-500, #67747C);
  background: var(--brand-greige-50, #EAE6DD);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--brand-charcoal-700, #4a3f3a);
  font-style: italic;
  white-space: normal;
}

/* On the admin work-item card (.adm-wi-context, admin.css) the brief is the
   FIRST element in the context column, not nested under a preceding facts
   row — so drop the base panel's orphaned left indent and match the heading
   to the column's other section labels (.adm-wi-context__label) instead of
   floating as its own quote-like block. Same blockquote treatment for
   "Notes for editor" as the customer page, above. */
.adm-wi-context .acc-doc-brief {
  margin: 0;
  padding: 0;
}
.adm-wi-context .acc-doc-brief__heading {
  font-size: var(--fs-xs, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--brand-charcoal-500, #6B6B66);
  margin-bottom: 0.55rem;
}
.adm-wi-context .acc-doc-brief__notes {
  margin-top: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-left: 3px solid var(--brand-charcoal-500, #67747C);
  background: var(--brand-greige-50, #EAE6DD);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--brand-charcoal-700, #4a3f3a);
  font-style: italic;
  white-space: normal;
}

/* ── Submit button with inline spinner (UAT #8) ──────────────────────────
   The recruitment-test upload posts each card via HTMX with
   hx-disabled-elt="find button[type=submit]", so the button gains :disabled
   for the duration of the upload. We reveal a spinner + dim the button while
   it's disabled, giving the candidate immediate feedback on the (multi-MB)
   upload instead of a dead button. */
.acc-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.acc-submit-btn__spinner {
  display: none;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: acc-spin 0.6s linear infinite;
}
.acc-submit-btn:disabled {
  opacity: 0.7;
  cursor: progress;
}
.acc-submit-btn:disabled .acc-submit-btn__spinner {
  display: inline-block;
}
@keyframes acc-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Breadcrumb (CUST2) --------------------------------------- */
/* Account-surface trail back up to the dashboard from order subpages.
   The `.acc-*` analogue of the admin `.adm-crumbs`. */
/* Breadcrumbs migrated to the shared .bpr-crumbs primitive (bpr-primitives.css,
   surface='acc' skin). */

/* ---------- Callout (revision-in-progress notice, C-1) --------------- */
.acc-callout {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--brand-paper-200);
  background: var(--brand-paper-100);
}
.acc-callout > i { margin-top: 0.15rem; flex: 0 0 auto; }
.acc-callout__title { margin: 0 0 0.15rem; font-weight: 600; color: var(--brand-ink-900); }
.acc-callout__body { margin: 0; font-size: 0.9375rem; color: var(--brand-charcoal-700); line-height: 1.5; }
.acc-callout--info {
  background: #EFF4F2;
  border-color: var(--brand-green-300, #bcdccb);
}
.acc-callout--info > i { color: var(--brand-green-700); }

/* ==========================================================================
   Order history: status filter tabs
   ========================================================================== */
.acc-order-filters {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--brand-paper-200);
}

.acc-order-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--brand-paper-200);
  background: var(--brand-paper-50);
  color: var(--brand-charcoal-700);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  cursor: pointer;
}

.acc-order-filter:hover {
  background: var(--brand-paper-100);
  border-color: var(--brand-green-300);
  color: var(--brand-ink-900);
  text-decoration: none;
}

.acc-order-filter--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.acc-order-filter--active:hover {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: #fff;
}

.acc-order-filter__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3rem;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.25);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.acc-order-filter--active .acc-order-filter__count {
  background: rgba(255,255,255,0.3);
}

/* Not-active tabs: muted badge */
.acc-order-filter:not(.acc-order-filter--active) .acc-order-filter__count {
  background: var(--brand-paper-200);
  color: var(--brand-charcoal-700);
}

/* Order history: pagination control */
.acc-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--brand-paper-200);
}

.acc-pagination__status {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--brand-charcoal-700);
}

.acc-pagination__disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ==========================================================================
   Order history: order list + compact cards
   ========================================================================== */
.acc-order-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Main card layout: two rows — (ref/meta/actions) then (docs list) */
.acc-order-card {
  background: var(--brand-paper-100);
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow 0.15s;
}

.acc-order-card:hover {
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.08));
}

/* Top row: ref + meta on the left, total + actions on the right */
.acc-order-card__main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
}

.acc-order-card__ref-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.acc-order-card__ref {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand-ink-900);
  letter-spacing: 0.01em;
}

.acc-order-card__ref--link {
  color: var(--color-primary);
  text-decoration: none;
}

.acc-order-card__ref--link:hover {
  color: var(--color-secondary);
  text-decoration: underline;
}

.acc-order-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--brand-charcoal-500);
}

.acc-order-card__date { white-space: nowrap; }
.acc-order-card__doc-count { white-space: nowrap; }

/* Right side: total + action buttons */
.acc-order-card__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
  flex-shrink: 0;
}

.acc-order-card__totals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

.acc-order-card__total-label {
  font-size: 0.75rem;
  color: var(--brand-charcoal-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.acc-order-card__total-amount {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--brand-ink-900);
}

/* Action buttons row */
.acc-order-card__actions {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
}

.acc-order-card__invoice-btn {
  color: var(--color-primary);
  border-color: var(--brand-green-300);
}

.acc-order-card__invoice-btn:hover {
  background: var(--brand-green-50);
  /* Keep the label legible on the pale-green hover fill — without this the
     inherited .btn-pill--ghost:hover rule turns the text white (invisible). */
  color: var(--brand-green-700);
  border-color: var(--brand-green-300);
}

/* Docs list (compact, bottom of card) */
.acc-order-card__docs {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--brand-paper-200);
}

.acc-order-card__doc-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem var(--sp-5);
  font-size: 0.875rem;
  color: var(--brand-charcoal-700);
  border-bottom: 1px solid var(--brand-paper-200);
}

.acc-order-card__doc-row:last-child {
  border-bottom: none;
}

.acc-order-card__doc-icon {
  flex-shrink: 0;
  color: var(--brand-charcoal-500);
  width: 1rem;
  text-align: center;
}

.acc-order-card__doc-name {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--brand-ink-900);
}

.acc-order-card__doc-meta {
  color: var(--brand-charcoal-500);
  white-space: nowrap;
}

/* ==========================================================================
   Order detail: invoice button in hero card
   ========================================================================== */
.acc-order-hero__actions {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--brand-paper-200);
}

.acc-order-hero__invoice-btn {
  color: var(--color-primary);
  border-color: var(--brand-green-300);
  font-size: 0.875rem;
}

.acc-order-hero__invoice-btn:hover,
.acc-order-hero__invoice-btn:focus-visible {
  background: var(--brand-green-50);
  /* Override the inherited .btn-pill--ghost:hover (dark bg + white text), which
     left white text on the light-green hover bg — the button vanished on hover
     (UAT 2026-06-03). Keep brand-green text + border for a legible hover. */
  color: var(--brand-green-700);
  border-color: var(--brand-green-500);
}

/* ==========================================================================
   Order detail: certificate callout
   ========================================================================== */
.acc-cert-callout {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-4);
  background: #EFF8EF;
  border: 1px solid #9BBFA8;
  border-radius: var(--radius-md);
}

.acc-cert-callout__icon {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  font-size: 1rem;
}

.acc-cert-callout__body {
  flex: 1 1 0;
  min-width: 0;
}

.acc-cert-callout__title {
  margin: 0 0 0.2rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--brand-ink-900);
}

.acc-cert-callout__sub {
  margin: 0;
  font-size: 0.875rem;
  color: var(--brand-charcoal-700);
  line-height: 1.4;
}

.acc-cert-callout__btn {
  flex-shrink: 0;
}

/* Responsive: stack on small screens */
@media (max-width: 600px) {
  .acc-cert-callout {
    flex-direction: column;
    align-items: flex-start;
  }
  .acc-cert-callout__btn {
    width: 100%;
    justify-content: center;
  }
  .acc-order-card__main {
    flex-direction: column;
    gap: var(--sp-3);
  }
  .acc-order-card__right {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
}

/* ===========================================================================
   ORDER DETAIL — two-column layout (Phase 1, 2026-06-13)
   Stripe-invoice pattern: a slim full-width header (reference + status), then
   documents as the wide main column beside a sticky summary rail (next-delivery
   emphasis + facts + invoice + vertical progress timeline). Fills the desktop
   width that the old 720px single column left empty, and keeps the deadline in
   view while the customer scrolls their documents.
   =========================================================================== */

.acc-wrap--order { max-width: 1040px; }

.acc-order-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.acc-order-head__ref-block { min-width: 0; }

.acc-guest-banner { margin-bottom: var(--sp-5); }

.acc-order-layout {
  display: grid;
  gap: var(--sp-5);
}
.acc-order-layout__main { min-width: 0; }
.acc-order-layout__rail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

@media (min-width: 992px) {
  .acc-order-layout {
    grid-template-columns: minmax(0, 1fr) 21rem;
    grid-template-areas: "main rail";
    align-items: start;
  }
  .acc-order-layout__main { grid-area: main; }
  .acc-order-layout__rail {
    grid-area: rail;
    position: sticky;
    top: var(--sp-5);
  }
}

/* ---- Summary card (rail) ---- */
.acc-summary-card {
  background: #fff;
  border: 1px solid var(--brand-paper-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.acc-summary-card__next {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: var(--sp-3) var(--sp-4);
  /* Neutral surface (deadline-pill-unification): the delivery datetime now
     renders as the amber/red .bpr-deadline-pill, so the pill is the SOLE colour
     signal — a green "on-track" box would fight a red urgency pill. */
  background: var(--brand-paper-100, #F6F4EF);
  border: 1px solid var(--brand-paper-200, #E5E3DC);
  border-radius: var(--radius-sm);
}
.acc-summary-card__next-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand-green-700);
}
/* __next-value / __next-rel retired in deadline-pill-unification — the rail
   delivery datetime now renders as the unified .bpr-deadline-pill. */

.acc-summary-card__facts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin: 0;
}
.acc-summary-card__facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
}
.acc-summary-card__facts dt {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-charcoal-500);
}
.acc-summary-card__facts dd {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--brand-ink-900);
  text-align: right;
}
.acc-summary-card__price { color: var(--brand-green-700); font-weight: 700; }
/* Invoice download — compact green-ghost pill (btn-pill btn-pill--ghost
   btn-pill--sm). Mirrors .acc-order-hero__invoice-btn so the three invoice
   buttons across the account surface read as one control; the hover override
   keeps the label legible (the inherited .btn-pill--ghost:hover fills dark +
   flips text white, which would clash with the green wash). */
.acc-summary-card__invoice {
  align-self: flex-start;
  color: var(--color-primary);
  border-color: var(--brand-green-300);
}
.acc-summary-card__invoice:hover,
.acc-summary-card__invoice:focus-visible {
  background: var(--brand-green-50);
  color: var(--brand-green-700);
  border-color: var(--brand-green-300);
}

/* ---- Vertical timeline (rail variant) ---- */
.acc-timeline-wrap--rail { margin-bottom: 0; }

.acc-timeline-steps--vertical {
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0;
}
.acc-timeline-steps--vertical .acc-timeline-step {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
  gap: var(--sp-3);
  min-width: 0;
  position: relative;
  padding-bottom: var(--sp-4);
}
.acc-timeline-steps--vertical .acc-timeline-step:last-child { padding-bottom: 0; }
/* Connector line runs down the centre of the 2rem node into the next step. */
.acc-timeline-steps--vertical .acc-timeline-step::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 2rem;
  bottom: 0;
  width: 2px;
  background: var(--brand-paper-200);
}
.acc-timeline-steps--vertical .acc-timeline-step:last-child::before { display: none; }
.acc-timeline-steps--vertical .acc-timeline-step--done::before { background: var(--brand-green-700); }

/* (The certificate download joined the "Completed documents" .acc-doc-links
   group as a third .acc-doc-link — C-04, cluster 11. The old compact
   .acc-doc-card__foot-link footer was retired with it.) */

/* == Doc-card body sections (card redesign 2026-07-11) =====================
   Two-column information architecture inside .acc-doc-card__body: left =
   "Order and brief" (facts dl + the shared brief panel + supporting files),
   right = "Completed documents" (link-style downloads with .bpr-tip (i)
   tooltips — clean, tracked, and the proof-of-service certificate) over
   "Service and delivery". Stacks below 900px. */
.acc-doc-sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-5) var(--sp-6);
  align-items: start;
}

@media (max-width: 900px) {
  .acc-doc-sections {
    grid-template-columns: minmax(0, 1fr);
  }
}

.acc-doc-sections__col {
  min-width: 0;
}

/* Section title — the same eyebrow grammar as .acc-doc-brief__heading, kept
   in step by hand (the brief panel is a shared partial with its own class). */
.acc-doc-sections__title {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-charcoal-500, #67747C);
  margin: 0 0 0.55rem;
}

.acc-doc-sections__title--svc {
  margin-top: var(--sp-5);
}

/* Facts rows — mirrors the brief panel's dl rhythm. */
.acc-doc-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.35rem 0.85rem;
  margin: 0 0 var(--sp-4);
}
.acc-doc-facts__row { display: contents; }
.acc-doc-facts__row dt {
  font-size: 0.8rem;
  color: var(--brand-charcoal-600, #67747C);
  font-weight: 500;
}
.acc-doc-facts__row dd {
  margin: 0;
  font-size: 0.9rem;
  color: var(--brand-charcoal-800, #2E221E);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

/* Link-style download — forest text link, no pill chrome. */
.acc-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand-green-700);
  text-decoration: none;
}
.acc-doc-link:hover,
.acc-doc-link:focus {
  color: var(--brand-green-500);
  text-decoration: underline;
}
.acc-doc-link i {
  font-size: 0.8125rem;
}

.acc-doc-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0 0 var(--sp-4);
  padding: 0;
}
.acc-doc-links__item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

/* Service and delivery rows — label + optional (i) + delivered tick. */
.acc-doc-svc {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}
.acc-doc-svc__row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.acc-doc-svc__label {
  font-size: 0.9rem;
  color: var(--brand-charcoal-800, #2E221E);
}
.acc-doc-svc__check {
  margin-left: auto;
  color: var(--color-success, #3FA561);
  font-size: 0.85rem;
}

/* File-field label + optional (i) tooltip row — the tip sits OUTSIDE the
   <label for=...> so focusing/clicking it never opens the file dialog
   (see _file_field.html `label_tip`). */
.acc-file__label-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}