/* =========================================================================
   ACCOUNT.CSS — shared design for the account system pages
   /account/login, /account/signup, /account/forgot, /account/reset,
   /account/home, /account/orders, /account/order/:id/*, plus the headless
   bridge/outcome pages (/email_verify etc.).
   The corporate LIGHT register (same family as /experiences/enterprise,
   /press, and the legal documents): white stage, black ink, hairline rules,
   Fragment Mono labels, the bevel shape system, one violet signal per view
   (the primary action). Flat by doctrine: no card slabs, no shadows —
   hairline-ruled rows and tonal steps only. Classes namespaced .acct-*.
   ========================================================================= */

body { background: var(--white); }
.acct { position: relative; color: var(--paper); }
/* Content sits above the light prefooter band (.pf-lite), which is absolutely
   pinned to the foot of .acct and runs up behind the last section. */
.acct > section:not(.pf-lite) { position: relative; z-index: 1; }
/* The pages drive their states via the hidden attribute; it must beat the
   display values set on buttons/links (inline-flex would otherwise win). */
.acct [hidden] { display: none !important; }

/* ------------------------------------------------------------ Page head -- */
.acct-head h1 { margin: .35em 0 0; max-width: 18ch; text-wrap: balance; }
.acct-head .container { padding-bottom: var(--s-40); }
.acct-kicker { margin: 0; font-family: var(--font-mono); font-size: .75rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.acct-sub { margin: 16px 0 0; max-width: 52ch; font-size: 1.0625rem;
  line-height: 1.6; color: color-mix(in srgb, var(--paper) 78%, var(--white)); }

/* ------------------------------------------------------------ Auth forms -- */
/* One quiet column keyed to the same left edge as the page head. No card
   chrome around the form — the white stage is the surface. */
.acct-wrap { padding: var(--s-24) 0 var(--s-120); }
.acct-form { max-width: 400px; }
.acct-field { margin: 0 0 20px; }
.acct-label { display: block; margin: 0 0 8px; font-family: var(--font-mono);
  font-size: .75rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); }
.acct-input { display: block; width: 100%; min-height: 46px; padding: 0 14px;
  font: inherit; font-size: 1rem; color: var(--paper);
  background: transparent; border: 1px solid var(--hairline);
  border-radius: 2px 2px 12px 2px; corner-shape: round round bevel round;
  transition: border-color var(--dur) var(--ease-signature); }
.acct-input:hover { border-color: var(--muted); }
.acct-input:focus { outline: none; border-color: var(--brand); }
.acct-input::placeholder { color: color-mix(in srgb, var(--muted), transparent 35%); }

/* The one violet signal on these views: the primary action. */
.acct-submit { display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 0 28px; margin-top: 8px; cursor: pointer;
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; background: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 2px 2px 14px 2px; corner-shape: round round bevel round;
  transition: opacity var(--dur) var(--ease-signature); }
.acct-submit:hover { opacity: .9; }
.acct-submit:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.acct-submit[disabled] { opacity: .45; cursor: default; }

/* Quiet secondary action (ghost, current-color hairline). */
.acct-btn { display: inline-flex; align-items: center; gap: .6em;
  min-height: 46px; padding: 0 20px; cursor: pointer;
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--paper); background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 2px 2px 14px 2px; corner-shape: round round bevel round;
  transition: border-color var(--dur) var(--ease-signature); }
.acct-btn:hover { border-color: var(--muted); }
.acct-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Under-form alternates ("Forgot your password?" etc.) */
.acct-alt { margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--hairline);
  font-size: .9375rem; line-height: 1.7; color: var(--muted); }
.acct-alt a { color: var(--paper); border-bottom: 1px solid var(--hairline);
  transition: border-color var(--dur); }
.acct-alt a:hover { border-color: var(--paper); }

/* Status notes. Error keeps ink (violet is reserved for the action);
   the mono voice + prefix carries the signal. */
.acct-error { margin: 0 0 20px; font-family: var(--font-mono); font-size: .8125rem;
  line-height: 1.6; letter-spacing: .02em; text-transform: uppercase;
  color: var(--paper); }
.acct-error::before { content: "/ "; color: var(--brand); }
.acct-ok { margin: 0 0 20px; font-size: 1.0625rem; line-height: 1.6;
  color: color-mix(in srgb, var(--paper) 78%, var(--white)); max-width: 52ch; }

/* Loading affordance on async actions */
.acct-busy { position: relative; pointer-events: none; opacity: .6; }

/* --------------------------------------------------------- Account home -- */
/* Signed-in header strip: who + sign out. A hairline row, not a banner. */
.acct-me { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  padding: 16px 0; border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline); }
.acct-me__who { font-family: var(--font-mono); font-size: .8125rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--paper); }
.acct-me__who span { color: var(--muted); }
.acct-me__actions { margin-left: auto; display: flex; gap: 12px; }
.acct-me__actions .acct-btn { min-height: 38px; padding: 0 16px; }

/* Section rows on the account page (orders link, tickets, verify) */
.acct-sec { padding: var(--s-40) 0; border-bottom: 1px solid var(--hairline); }
.acct-sec:last-of-type { border-bottom: 0; }
.acct-sec > h2 { margin: 0 0 8px; font-weight: 500; font-size: 1.5rem;
  line-height: 1.25; letter-spacing: -.01em; }
.acct-sec > p { margin: 0 0 20px; max-width: 56ch; font-size: 1.0625rem;
  line-height: 1.6; color: color-mix(in srgb, var(--paper) 78%, var(--white)); }

/* Verify-email prompt: mono statement + one action. */
.acct-verify { display: none; }
.acct-verify.is-on { display: block; }

/* --------------------------------------------------------------- Orders -- */
/* One order = a hairline-ruled group: mono order header row, then quiet
   line-item rows (label voice + value + optional action). Flat, no plates. */
.acct-order { margin-top: var(--s-32); }
.acct-order__head { display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 8px 20px; padding-bottom: 14px; border-bottom: 1px solid var(--paper); }
.acct-order__name { font-weight: 500; font-size: 1.25rem; letter-spacing: -.01em; }
.acct-order__meta { font-family: var(--font-mono); font-size: .75rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.acct-line { display: grid; grid-template-columns: minmax(0,1fr) auto;
  align-items: center; gap: 8px 24px; padding: 18px 0;
  border-bottom: 1px solid var(--hairline); }
.acct-line__label { font-family: var(--font-mono); font-size: .75rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.acct-line__value { margin-top: 4px; font-weight: 500; font-size: 1.125rem; }
.acct-line__value .mono { font-family: var(--font-mono); font-size: 1rem; }
.acct-line__act .acct-btn { min-height: 38px; padding: 0 16px; }
@media (max-width: 640px) {
  .acct-line { grid-template-columns: minmax(0,1fr); }
  .acct-line__act { justify-self: start; }
}

/* Empty state */
.acct-empty { padding: var(--s-40) 0; font-size: 1.0625rem; color: var(--muted); }

/* ------------------------------------------------------------- IPD grid -- */
/* The caliper readout: mono numerals, 55–72 mm. Current value is disabled
   ink; the picked value carries the violet signal. */
.acct-ipd { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px; max-width: 480px; margin-top: var(--s-24); }
@media (max-width: 640px) { .acct-ipd { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.acct-ipd button { min-height: 46px; cursor: pointer; font-family: var(--font-mono);
  font-size: .9375rem; letter-spacing: .02em; color: var(--paper);
  background: transparent; border: 1px solid var(--hairline);
  border-radius: 2px 2px 12px 2px; corner-shape: round round bevel round;
  transition: border-color var(--dur) var(--ease-signature); }
.acct-ipd button:hover { border-color: var(--muted); }
.acct-ipd button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.acct-ipd button[disabled] { color: var(--muted); border-style: dashed; cursor: default; }
.acct-ipd button.is-picked { border-color: var(--brand); color: var(--brand); }
.acct-ipd__note { margin-top: 16px; font-family: var(--font-mono); font-size: .75rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.acct-ipd__confirm { margin-top: var(--s-24); }

/* ------------------------------------------------- Bridge / outcome pages -- */
/* Headless handler + result pages: one centered statement, mono kicker,
   plain sentence, optional single action. */
.acct-outcome { min-height: 46vh; display: grid; align-content: start; }
.acct-outcome .container { padding-top: var(--s-24); }
.acct-outcome h1 { margin: .35em 0 0; }
.acct-outcome p { margin: 16px 0 0; max-width: 52ch; font-size: 1.0625rem;
  line-height: 1.6; color: color-mix(in srgb, var(--paper) 78%, var(--white)); }
.acct-outcome .acct-btn, .acct-outcome .acct-submit { margin-top: var(--s-24); }

/* Loader dash for the bridge pages (token exchange in flight) */
@keyframes acct-tick { 0% { transform: scaleX(.15); } 50% { transform: scaleX(1); } 100% { transform: scaleX(.15); } }
.acct-loader { width: 64px; height: 2px; margin-top: var(--s-32);
  background: var(--brand); transform-origin: left;
  animation: acct-tick 1.2s var(--ease-signature) infinite; }
@media (prefers-reduced-motion: reduce) { .acct-loader { animation: none; } }