/* ==========================================================================
   Themescape app, account flow, v3 (12 October 2026)
   Layouts for log in, sign up, plans, account and the viewer start. Each page loads
   tokens.css, base.css and components.css before this file.
   Tokens match the live app's :root names so the two can be merged.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
/* The tokens live in assets/css/tokens.css, shared with the viewer. Each page loads it before this file. */

/* ---------- 2. Base lives in assets/css/base.css ---------- */
/* ---------- 3 and 4. Buttons and form controls live in assets/css/components.css ---------- */

/* ---------- 5. Auth and plans layout: form left, panel right ---------- */
.split { display: grid; grid-template-columns: 744fr 696fr; min-height: 100vh; }
.split__form { display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-6) 32px; min-width: 0; }
.split__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; min-height: 44px; }
.split__top .lockup { display: inline-flex; align-items: center; min-height: 44px; }
.lockup img { height: 40px; width: auto; }   /* brand pack file includes clear space; artwork reads as 30px */
.top-link { margin: 0; font-size: 14px; line-height: 1.5; color: var(--secondary); }
.top-link .btn-link { min-height: 0; }
.top-link a, .top-link .btn-link { color: var(--espresso); }
/* Stage 7: short text links keep their look; an invisible layer 44 px tall, centred on the text, takes the tap */
.top-link a, .top-link .btn-link, .legal a, .summary__foot a, [data-goto-tab], .app-top .lockup, .team__name .btn-link, .pf-acts .btn-link { position: relative; }
.top-link a::after, .top-link .btn-link::after, .legal a::after, .summary__foot a::after, [data-goto-tab]::after, .app-top .lockup::after, .team__name .btn-link::after, .pf-acts .btn-link::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 44px; transform: translateY(-50%); }
.split__main { flex: 1; display: flex; align-items: center; justify-content: center; }
.form { width: min(var(--form-w), 100%); display: flex; flex-direction: column; }
.split__foot { width: min(var(--form-w), 100%); margin: 0 auto; font-size: 14px; color: var(--secondary); }
.split__foot > p + p { margin-top: var(--s-2); } /* the Privacy statement and Terms of use links under the pledge line (22 October 2026) */
/* Single-card account screens are centred (Charlotte, 25 October 2026): log in, reset password, sign up steps 1 and 2, confirm
   email, already logged in and the like. The heading, lead, help and legal lines and the footer are centred; form fields keep
   their labels on the left, and the Plans step (a wide, tabbed screen) keeps its own layout. */
.split .form:not(#v-plans) > .heading { text-align: center; }
.split .form:not(#v-plans) > .tick-dot--lg { align-self: center; } /* the large tick on done screens sits centred above the heading (Charlotte, 26 October 2026) */
.split .form:not(#v-plans) > .progress .progress__text { justify-content: center; text-align: center; }
.split .form:not(#v-plans) > .inline-help { justify-content: center; text-align: center; }
.split .form:not(#v-plans) > .legal, .split .form:not(#v-plans) > p.gap-16 { text-align: center; }
.split__foot { text-align: center; }
/* Hints under fields on those cards (the password rule) are centred and kept to one line, the text scaled down to fit
   the field rather than wrapping (data-fit, Charlotte, 25 October 2026). */
.split .form:not(#v-plans) .field .hint { text-align: center; }
.split__aside { padding: var(--s-5) var(--s-5) var(--s-5) 0; }
.split__aside > .panel { position: sticky; top: var(--s-5); height: calc(100vh - 48px); min-height: 600px; } /* was 760px; a 1280 by 720 window no longer scrolls */

/* Vertical rhythm inside a form: gaps come from the scale, set per element */
.form > * + * { margin-top: var(--s-5); }
.form > .gap-8 { margin-top: var(--s-2); }
.form > .gap-12 { margin-top: var(--s-3); }
.form > .gap-16 { margin-top: var(--s-4); }
.form > .gap-32 { margin-top: var(--s-6); }
.form > .gap-0 { margin-top: 0; }
.heading { display: grid; gap: var(--s-2); }
.social { display: grid; gap: var(--s-3); }
.back { display: inline-flex; gap: var(--s-2); align-items: center; font-weight: 500; font-size: 14px; }
.legal { font-size: 14px; color: var(--secondary); }
.legal a { color: var(--espresso); }
.disclose { display: inline-flex; align-items: center; gap: var(--s-2); }
.disclose::before { content: "+"; font-weight: 500; display: inline-block; width: 10px; }
.disclose[aria-expanded="true"]::before { content: "−"; }
.code-row { display: flex; gap: var(--s-3); align-items: flex-end; }
.code-row .field { flex: 1; }
.digits { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s-2); }
.digits input { min-height: 56px; padding: 0; text-align: center; font: 500 24px/1 var(--font-display); }
.digits input:focus { padding: 0; }
.invite { display: grid; gap: var(--s-1); padding: var(--s-4); border-radius: var(--r-card); background: var(--latte); font-size: 14px; }
.invite b { font-weight: 500; }
.summary-list { background: var(--latte); border-radius: var(--r-card); padding: var(--s-2) 16px; }
.summary-list div { display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) 0; font-size: 14px; }
.summary-list div + div { border-top: 1px solid var(--rule); }
.summary-list dt { color: var(--secondary); }
.summary-list dd { margin: 0; font-weight: 500; text-align: right; }
.seat-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--rule); }
.seat-row__text { flex: 1; min-width: 0; font-size: 14px; }
.seat-row__text b { display: block; font-weight: 500; }
.seat-row__text span { color: var(--secondary); }
.inline-help { display: flex; flex-wrap: wrap; gap: 4px; font-size: 14px; color: var(--secondary); }
.inline-help a { color: var(--espresso); font-weight: 500; }
/* A link button inside a help line ("Nothing arrived? Resend the link") sits on the same baseline as its label, like a
   plain link; an invisible layer keeps the 44 px tap target (Charlotte, 26 October 2026). */
.inline-help { align-items: baseline; }
.inline-help .btn-link { display: inline; min-height: 0; font-size: inherit; line-height: inherit; position: relative; }
.inline-help .btn-link::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 44px; transform: translateY(-50%); }

/* ---------- 6. The dark panel ---------- */
.panel {
  position: relative; display: flex; flex-direction: column; gap: var(--s-5);
  padding: var(--s-6) 40px 40px; border-radius: var(--r-panel); overflow: hidden;
  background: var(--espresso); color: var(--cream);
}
.panel__mark { position: absolute; top: var(--s-5); right: 29px; width: 48px; height: 48px; }
.panel__art { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.panel__art svg { width: 100%; height: 100%; max-height: 520px; }
.panel h2 { color: var(--cream); }

/* Tips variant */
.tip { padding: 28px; border-radius: var(--r-large); background: rgba(255, 251, 244, .08); border: 1px solid rgba(255, 251, 244, .18); display: grid; gap: var(--s-4); }
.tip__kicker { font-weight: 500; font-size: 14px; }
.tip__text { font-size: var(--t-body-l); line-height: 1.6; min-height: 3.2em; }
.tip__dots { display: flex; gap: 6px; align-items: center; }
.tip__dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: var(--r-pill); background: rgba(255, 251, 244, .35); cursor: pointer; }
.tip__dots button[aria-current="true"] { width: 20px; background: var(--cream); }
.tip__dots button::after { content: ""; position: absolute; }

/* Steps variant: the onboarding process */
.panel-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.panel-steps li { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-card); }
.panel-steps .num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 500; border: 1.5px solid rgba(255, 251, 244, .4); }
.panel-steps b { display: block; font-weight: 500; }
.panel-steps small { display: block; font-size: 14px; opacity: .85; }
.panel-steps li.is-done { background: rgba(255, 251, 244, .1); }
.panel-steps li.is-done .num { background: var(--cream); border-color: var(--cream); color: var(--espresso); }
.panel-steps li.is-done small { display: none; }
.panel-steps li.is-current { background: var(--cream); color: var(--espresso); }
.panel-steps li.is-current .num { background: var(--espresso); border-color: var(--espresso); color: var(--cream); }
.panel-steps li.is-current small { color: var(--secondary); opacity: 1; }

/* Live sample variant: reader card */
.reader { padding: var(--s-5); border-radius: var(--r-large); background: var(--cream); color: var(--espresso); display: grid; gap: var(--s-3); }
.reader__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.reader__head i { width: 14px; height: 14px; border-radius: 50%; background: var(--node-sea); }
.reader blockquote { margin: 0; padding-left: var(--s-3); border-left: 3px solid var(--silver); }

/* Order summary variant: the single primary action on the plan step */
.summary { gap: 0; }
.summary__kicker { font-size: 14px; font-weight: 500; opacity: .7; }
.summary__title { margin-top: var(--s-1); }
.summary__lines { margin-top: var(--s-5); margin-bottom: var(--s-3); padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule-on-dark); display: grid; gap: var(--s-2); font-size: 14px; }
.summary__lines div { display: flex; justify-content: space-between; gap: var(--s-4); }
.summary__lines dd { margin: 0; font-weight: 500; }
.summary__price { margin-top: var(--s-5); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.summary__price span:not(.display) { opacity: .85; }
.summary__billed { margin-top: var(--s-1); font-size: 14px; opacity: .85; }
.summary__save { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; font-size: 14px; }
.summary__save span { opacity: .85; }
.summary__section { margin-top: var(--s-6); }
.summary__section > p { font-size: 14px; font-weight: 500; opacity: .7; margin-bottom: var(--s-3); }
.summary__included { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); font-size: 14px; }
.summary__included li { display: flex; gap: var(--s-3); align-items: center; }
.summary__bands { display: grid; gap: 4px; margin-top: var(--s-5); }
.band { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: 8px 12px; border-radius: 10px; border: 1px solid var(--rule-on-dark); font-size: 14px; }
.band small { display: block; font-size: 14px; opacity: .8; }
.band b { font-weight: 500; }
.band.is-current { background: var(--cream); color: var(--espresso); border-color: var(--cream); }
.band.is-current small { color: var(--secondary); opacity: 1; }
.summary__spacer { flex: 1; min-height: var(--s-5); }
.summary__foot { margin-top: var(--s-3); font-size: 14px; opacity: .75; }
.summary__foot a { color: var(--cream); }

/* Numbered process: "What happens next" */
.process { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.process li { position: relative; padding: 4px 0 var(--s-5) 44px; counter-increment: step; font-size: 14px; }
.process li:last-child { padding-bottom: 0; }
.process li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--cream); color: var(--espresso); display: grid; place-items: center; font-weight: 500; font-size: 14px; }
.process li::after { content: ""; position: absolute; left: 13px; top: 28px; bottom: 0; width: 2px; background: var(--cream); opacity: .9; }
.process li:last-child::after { display: none; }
.process b { display: block; font-weight: 500; }
.process span { opacity: .85; }

/* Mobile summary bar (plans) */
.summary-bar { display: none; }

/* ---------- 7. App shell (account) ---------- */
.app-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: 16px 32px; background: var(--espresso); color: var(--cream); }
.app-top .lockup img { height: 36px; }
.app-top__right { display: flex; align-items: center; gap: var(--s-4); }
.avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--latte); color: var(--espresso); font-weight: 500; font-size: 14px; }
.avatar--cream { background: var(--cream); }
.avatar--dark { background: var(--espresso); color: var(--cream); }
.app { display: grid; grid-template-columns: 280px 1fr; min-height: calc(100vh - 72px); }
.side { display: flex; flex-direction: column; gap: var(--s-1); padding: 32px var(--s-5); border-right: 1px solid var(--espresso); }
.side .label { padding: 0 var(--s-1); margin-bottom: var(--s-1); }
.side hr { border: 0; border-top: 1px solid var(--espresso); margin: var(--s-4) 0; width: 100%; }
.nav-item { display: flex; align-items: center; gap: var(--s-3); min-height: var(--target); padding: 8px 12px; border-radius: 10px; color: var(--espresso); text-decoration: none; }
.nav-item:hover { background: rgba(233, 222, 208, .6); color: var(--espresso); }
.nav-item[aria-current="page"] { background: var(--latte); font-weight: 500; }
.nav-item svg { flex: none; width: 20px; height: 20px; }
.nav-item > span:not(.badge) { flex: 1; }
.side__spacer { flex: 1; }
.main { padding: var(--s-7) var(--s-8) 64px; min-width: 0; }
.main__col { max-width: 880px; display: grid; gap: var(--s-6); }
.card { padding: var(--s-6); border-radius: var(--r-large); border: 1px solid var(--rule); background: var(--cream); display: grid; gap: 16px; align-content: start; min-width: 0; }
.card--latte { background: var(--latte); border-color: var(--latte); }
.card__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); }
.card__head .label { margin-bottom: var(--s-1); }
.count { text-align: right; }
.count b { display: block; font-family: var(--font-display); font-weight: 500; font-size: var(--t-h2); line-height: 1.1; }
.count span { font-size: 14px; color: var(--secondary); }
.meter { height: 10px; border-radius: var(--r-pill); background: var(--latte); overflow: hidden; }
.card--latte .meter { background: var(--cream); }
.meter i { display: block; height: 100%; background: var(--espresso); border-radius: var(--r-pill); }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.checklist li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--r-card); }
.checklist .num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 500; border: 1.5px solid rgba(59, 38, 32, .35); }
.checklist li.is-done { color: var(--secondary); }
.checklist li.is-done .num { background: var(--espresso); border-color: var(--espresso); }
.checklist li.is-current { background: var(--cream); border: 1px solid rgba(59, 38, 32, .25); }
.checklist li.is-current .num { background: var(--espresso); border-color: var(--espresso); color: var(--cream); }
.checklist .text { flex: 1; min-width: 0; }
.checklist .text b { display: block; font-weight: 500; color: var(--espresso); }
.checklist .text small { font-size: 14px; color: var(--secondary); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.fact { padding: var(--s-4); border-radius: var(--r-card); background: var(--latte); }
.fact dt { margin-bottom: var(--s-1); }
.fact { min-width: 0; }
.fact dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: var(--control-h); padding: 8px 8px; border: 1px solid var(--line); border-radius: var(--r-field); background: var(--cream); flex: 1; min-width: 0; }
.chips:focus-within { border: 2px solid var(--espresso); padding:7px 7px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 8px; border-radius: var(--r-pill); background: var(--latte); font-size: 14px; font-weight: 500; }
.chip button { width: 24px; height: 24px; border: 0; border-radius: 50%; background: none; color: var(--secondary); cursor: pointer; }
.chips input { flex: 1; min-width: 120px; min-height: 32px; border: 0; padding: 0 4px; background: none; font-size: 14px; }
.chips input:focus { border: 0; padding: 0 4px; }
.invite-row { display: flex; gap: var(--s-3); align-items: flex-start; }
.invite-row select { width: 190px; flex: none; }
.members { list-style: none; margin: 0; padding: 0; }
.member { display: flex; align-items: center; gap: var(--s-4); padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }
.member__who { flex: 1; min-width: 0; }
.member__who b { display: block; font-size: 16px; font-weight: 500; }
.member__who span { color: var(--secondary); }
.menu-btn { width: var(--target); height: var(--target); padding: 0; border-radius: 50%; border: 1px solid var(--line); background: none; cursor: pointer; font-weight: 500; letter-spacing: 1px; color: var(--espresso); }
.menu { position: absolute; right: 0; top: 42px; z-index: 5; min-width: 180px; padding: 4px; border-radius: var(--r-card); background: var(--cream); border: 1px solid var(--rule); box-shadow: 0 8px 24px rgba(59, 38, 32, .12); }
.menu button { display: block; width: 100%; min-height: var(--target); padding: 0 12px; border: 0; border-radius: 8px; background: none; text-align: left; font: 400 14px/1 var(--font-body); color: var(--espresso); cursor: pointer; }
.menu button:hover { background: var(--latte); }
.menu .danger { color: var(--error); }
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.state-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); }
.skeleton { height: 14px; border-radius: var(--r-pill); background: var(--latte); }

/* ---------- 8. Viewer start (empty state inside the live viewer) ---------- */
.viewer { display: grid; grid-template-rows: auto 1fr; height: 100vh; }
.viewer__head { display: flex; justify-content: space-between; align-items: center; padding: 20px 32px 20px 28px; background: var(--espresso); color: var(--cream); }
.viewer__head h1 { font-size: var(--t-h3); }
.viewer__head p { font-size: 14px; }
.viewer__body { display: grid; grid-template-columns: 240px 1fr 340px; min-height: 0; }
.vside { display: flex; flex-direction: column; gap: 10px; padding: var(--s-5) var(--s-4) 20px; border-right: 1px solid var(--rule); overflow: auto; }
.vside .field__label { font-size: 14px; font-weight: 500; }
.vside .needs-data, .vright .needs-data { opacity: .4; }
.vside select { min-height: 40px; border-radius: var(--r-pill); font-weight: 500; font-size: 14px; }
.vside select:disabled, .vside .btn[disabled], .vright .btn[disabled] { background-color: transparent; color: var(--espresso); border-color: var(--line); cursor: not-allowed; }
.vside .btn { justify-content: flex-start; border-width: 1px; border-color: var(--line); }
.vright { padding: 20px; border-left: 1px solid var(--rule); display: grid; align-content: start; gap: 20px; }
.vstage { display: flex; align-items: center; justify-content: center; padding: var(--s-7); overflow: auto; }
.empty { width: min(760px, 100%); display: grid; gap: var(--s-5); text-align: center; }
.empty .options { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); text-align: left; }
.option { display: flex; flex-direction: column; gap: var(--s-3); padding: 22px; border-radius: var(--r-large); border: 1px solid var(--rule); background: var(--cream); }
.option--lead { background: var(--latte); border-color: var(--latte); }
.option--drop { border: 1.5px dashed var(--line); }
.option--drop.is-dragover { background: var(--latte); border-color: var(--espresso); }
.option .badge { align-self: flex-start; }
.option p { font-size: 14px; color: var(--secondary); flex: 1; }
.progress-strip { display: flex; align-items: center; gap: var(--s-4); padding: 14px 20px; border-radius: var(--r-pill); border: 1px solid var(--rule); font-size: 14px; text-align: left; }
.progress-strip .meter { width: 160px; height: 6px; flex: none; }
.progress-strip .grow { flex: 1; color: var(--secondary); }
.help-links { display: flex; flex-wrap: wrap; gap: var(--s-5); justify-content: center; font-size: 14px; font-weight: 500; }
.secondary-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px var(--s-4); font-size: 14px; color: var(--secondary); }

/* ---------- 9. Responsive ---------- */
@media (max-width: 1180px) {
  .empty .options { grid-template-columns: 1fr; }
}
@media (max-width: 1023px) {
  .split { grid-template-columns: 1fr; }
  .split__aside { display: none; }
  .split__form { padding: var(--s-4) 16px var(--s-6); }
  .split__main { align-items: flex-start; padding-top: var(--s-4); }
  h1 { font-size: var(--t-h2); }
  .display { font-size: 44px; }
  .choices--2 { grid-template-columns: 1fr; }
  .choices--3 { grid-template-columns: 1fr; }
  .choices--3 .choice { flex-direction: row; align-items: center; }
  .choices--3 .choice__price { margin-left: auto; }
  .split--plans .split__form { padding-bottom: 180px; }
  .summary-bar { display: grid; gap: var(--s-3); position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    padding: var(--s-4) 16px 24px; background: var(--espresso); color: var(--cream); border-radius: 20px 20px 0 0; }
  .summary-bar__row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
  .summary-bar__row b { display: block; font-weight: 500; }
  .summary-bar__row span { font-size: 14px; opacity: .8; }
  /* "Details" opens the full summary as a bottom sheet */
  .split__aside.is-sheet { display: block; position: fixed; inset: auto 0 0 0; z-index: 20; padding: 0; max-height: 88vh; overflow: auto; }
  .split__aside.is-sheet > .panel { position: relative; top: 0; height: auto; min-height: 0; border-radius: 20px 20px 0 0; }
  .app { grid-template-columns: 1fr; }
  .side { flex-direction: row; overflow-x: auto; padding: var(--s-3) 16px; border-right: 0; border-bottom: 1px solid var(--espresso); }
  .side .label, .side hr, .side__spacer { display: none; }
  .nav-item { white-space: nowrap; }
  .main { padding: var(--s-5) 16px var(--s-7); }
  .facts, .two-up, .state-grid { grid-template-columns: 1fr; }
  .invite-row { flex-wrap: wrap; }
  .invite-row select { width: 100%; }
  .app-top { padding: 12px 16px; }
  .app-top .lockup img { height: 30px; }
  .card { padding: var(--s-5); }
  .card__head { flex-wrap: wrap; align-items: flex-start; }
  .count { text-align: left; }
  .count b { display: inline; margin-right: 4px; }
  .app-top .btn { white-space: nowrap; }
  .app-top .btn .arrow { display: none; }
  .checklist li { flex-wrap: wrap; }
  .checklist .text { flex-basis: calc(100% - 42px); }
  .checklist li .btn { margin-left: 40px; }
  .viewer__body { grid-template-columns: 1fr; }
  .vside, .vright { display: none; }
}
@media (max-width: 480px) {
  .code-row { flex-wrap: wrap; }
  .member { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* Fit to one line (data-fit): headings and the pledge line beside the visual pane shrink to fit one line; below the floor they wrap */
[data-fit] { white-space: nowrap; min-width: 0; max-width: 100%; }
[data-fit].wrapped { white-space: normal; }