/* ══════════════════════════════════════════════════════════════════
   app-pages.css — the signed-in settings surface.

   Used by /account and /settings (and anything else that is a form or
   a list of controls rather than a marketing page). Loaded AFTER
   design-system.css and BEFORE site-chrome.css, so the chrome file
   still gets the last word on the header and footer.

   THE RULES THIS FILE ENCODES
     • A page announces itself with its NAME, at a size a human would
       actually write it — not a 42px marketing headline followed by a
       paragraph explaining what "Settings" means. Same move as
       /pricing, whose h1 is the single word "Pricing".
     • Black type on white carries everything. Hierarchy is weight,
       size and one hairline. Lavender is reserved for the current tab
       and the brand dot. Red only ever appears on destruction.
     • Every control sits on a row with a label, a one-line
       explanation, and the control itself hard right. Scanning the
       left edge tells you everything the page can do.
     • One idea per card. A card with a heading you have to read twice
       is two cards.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --app-max:760px;
  --app-pad:clamp(20px,4vw,40px);
  --app-ez:cubic-bezier(.25,1,.35,1);

  /* Status colours. Deliberately desaturated — a saturated green pill
     next to black type is the single loudest thing on a page, which is
     never what "your subscription is fine" deserves. */
  --ok:#2F6B45;
  --ok-wash:rgba(47,107,69,.10);
  --warn:#8A5300;
  --warn-wash:rgba(138,83,0,.10);
  --bad:#A32A2A;
  --bad-wash:rgba(163,42,42,.08);
  --bad-line:rgba(163,42,42,.22);
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:15px; font-weight:450; line-height:1.55; letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
::selection{ background:var(--ink); color:#fff; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline:2px solid var(--lav); outline-offset:3px; border-radius:8px; }

/* ── app context bar ────────────────────────────────────────────────
   These pages are reached FROM the dashboard, so they used to serve
   the marketing header — which meant the only way out was the brand
   logo, and that goes to the landing page, not back to the app. A
   signed-in user could get to /settings and have no route home.

   The bar answers both questions a sub-page has to answer: where am
   I, and how do I leave. Back arrow, separator, page name — and the
   account widget on the right, so the session controls stay where
   they are everywhere else on the site. */
.appbar{
  position:sticky; top:0; z-index:70;
  display:flex; align-items:center; gap:12px;
  height:56px; padding:0 var(--app-pad);
  background:color-mix(in srgb, var(--paper) 84%, transparent);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
          backdrop-filter:blur(16px) saturate(180%);
  box-shadow:inset 0 -1px 0 var(--line);
}
.appbar-in{
  width:100%; max-width:var(--app-max); margin-inline:auto;
  display:flex; align-items:center; gap:11px;
}
.appbar-back{
  display:inline-flex; align-items:center; gap:7px; flex:none;
  height:32px; padding:0 12px 0 9px; border-radius:var(--pill);
  box-shadow:inset 0 0 0 1px var(--line-strong);
  font-size:13px; font-weight:600; letter-spacing:-.014em; color:var(--ink);
  transition:box-shadow .18s var(--app-ez), background .18s var(--app-ez);
}
.appbar-back:hover{ box-shadow:inset 0 0 0 1px var(--ink); background:var(--paper-deep); }
.appbar-back svg{
  width:14px; height:14px; flex:none;
  fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .18s var(--app-ez);
}
.appbar-back:hover svg{ transform:translateX(-2px); }
.appbar-sep{ flex:none; color:var(--ink-faint); font-size:14px; opacity:.5; }
.appbar-here{
  flex:1; min-width:0;
  font-size:14px; font-weight:600; letter-spacing:-.018em; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.appbar .nav-r{ margin-left:auto; display:flex; align-items:center; gap:8px; flex:none; }

/* auth.js injects its signed-in widget with inline styles tuned for the
   marketing header. site-chrome.css normally corrects them, but these
   pages no longer load it, so the same corrections live here. */
.appbar .nuvex-nav-auth{ gap:8px !important; }
.appbar .nuvex-nav-auth ._dash{
  height:32px !important; border-radius:999px !important;
  padding:0 14px !important; font-size:13px !important;
  background:var(--ink) !important; color:#fff !important;
}
.appbar .nuvex-nav-auth ._av{
  width:31px !important; height:31px !important;
  border:0 !important; border-radius:50% !important;
  background:var(--ink) !important; color:#fff !important;
  font-size:12px !important; font-weight:600 !important;
}
.appbar .nuvex-nav-auth ._menu{
  border:0 !important; border-radius:14px !important;
  background:var(--paper) !important;
  box-shadow:var(--shadow-3) !important;
  padding:6px !important;
}
/* The dashboard is one tap away in the bar itself, so the widget's own
   Dashboard pill would be the second copy of the same link. */
.appbar .nuvex-nav-auth ._dash{ display:none !important; }
@media (max-width:560px){
  .appbar{ padding:0 20px; }
  .appbar-back span{ display:none; }
  .appbar-back{ padding:0 10px; }
}

.app-page{
  width:100%; max-width:var(--app-max); margin-inline:auto;
  padding:clamp(32px,5vw,52px) var(--app-pad) clamp(64px,8vw,96px);
}

/* ── page head ──────────────────────────────────────────────────────
   The name of the page, and at most one line under it. If a sentence
   here doesn't change what the reader does next, it isn't shipped. */
.ph{ margin-bottom:var(--s-5); }
.ph h1{
  font-family:var(--font-body);
  font-size:clamp(26px,3.2vw,32px); font-weight:700;
  letter-spacing:-.038em; line-height:1.1; color:var(--ink);
}
.ph-sub{
  margin-top:8px; max-width:52ch;
  font-size:14.5px; font-weight:450; color:var(--ink-mute); letter-spacing:-.012em;
}
.ph-sub a{
  color:var(--ink); font-weight:600;
  text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px;
}
.ph-sub a:hover{ text-decoration-color:var(--ink); }

/* ── tabs ───────────────────────────────────────────────────────────
   /account and /settings are two halves of one place. Before this,
   nothing on either page said the other existed except a sentence in
   the sub-head — so the only way to cross was the top nav, which
   looks like site navigation, not like a section you're inside. */
.ph-tabs{
  display:flex; gap:2px; margin-top:var(--s-5);
  box-shadow:inset 0 -1px 0 var(--line);
}
.ph-tab{
  position:relative; padding:0 2px 11px; margin-right:22px;
  font-size:14.5px; font-weight:500; letter-spacing:-.015em;
  color:var(--ink-mute); white-space:nowrap;
  transition:color .18s var(--app-ez);
}
.ph-tab:hover{ color:var(--ink); }
.ph-tab.on{ color:var(--ink); font-weight:600; }
.ph-tab.on::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1.5px;
  background:var(--ink); border-radius:2px;
}

/* ── cards ──────────────────────────────────────────────────────── */
.card{
  background:var(--paper-warm);
  border-radius:var(--r-4);
  box-shadow:var(--shadow-1);
  padding:var(--s-5) 26px;
  margin-bottom:var(--s-3);
}
.card-hd{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-bottom:2px;
}
.card-hd h2{
  font-family:var(--font-body);
  font-size:15px; font-weight:600; letter-spacing:-.022em; color:var(--ink);
}
.card-note{
  margin:4px 0 var(--s-4);
  font-size:13px; font-weight:450; color:var(--ink-mute); line-height:1.55; max-width:60ch;
}
.card-note a{
  color:var(--ink); font-weight:600;
  text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px;
}
.card-note + .rows{ margin-top:0; }
.card-hd + .rows{ margin-top:var(--s-3); }

/* ── control rows ───────────────────────────────────────────────── */
.rows{ display:block; }
.row{
  display:flex; align-items:center; gap:var(--s-4);
  padding:15px 0;
  box-shadow:inset 0 -1px 0 var(--line);
}
.row:last-child{ padding-bottom:0; box-shadow:none; }
.row-txt{ flex:1; min-width:0; }
.row-txt strong{
  display:block;
  font-size:14px; font-weight:600; letter-spacing:-.016em; color:var(--ink);
}
.row-txt span{
  display:block; margin-top:2px;
  font-size:13px; font-weight:450; color:var(--ink-mute); line-height:1.5;
  overflow-wrap:anywhere;
}
.row-txt a{
  color:var(--ink); font-weight:600;
  text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px;
}
.row-txt a:hover{ text-decoration-color:var(--ink); }
/* a value shown instead of a control: monospaced digits, right-aligned */
.row-val{
  flex:none; font-size:14px; font-weight:600; color:var(--ink);
  letter-spacing:-.014em; font-variant-numeric:tabular-nums;
}

/* ── buttons ─────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  height:38px; padding:0 17px; flex:none;
  border:0; border-radius:var(--pill);
  font-family:var(--font-body); font-size:13.5px; font-weight:600; letter-spacing:-.015em;
  white-space:nowrap; cursor:pointer;
  transition:opacity .18s var(--app-ez), box-shadow .18s var(--app-ez),
             background .18s var(--app-ez), transform .18s var(--app-ez);
}
.btn:active{ transform:scale(.98); }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.btn svg{ width:14px; height:14px; flex:none; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover:not(:disabled){ opacity:.87; }
.btn-line{ box-shadow:inset 0 0 0 1px var(--line-strong); color:var(--ink); }
.btn-line:hover:not(:disabled){ box-shadow:inset 0 0 0 1px var(--ink); }
.btn-bad{ box-shadow:inset 0 0 0 1px var(--bad-line); color:var(--bad); }
.btn-bad:hover:not(:disabled){ box-shadow:inset 0 0 0 1px var(--bad); background:var(--bad-wash); }
.btn-lg{ height:42px; padding:0 21px; font-size:14px; }
.btn-wide{ width:100%; }
.actions{ display:flex; gap:var(--s-2); flex-wrap:wrap; margin-top:var(--s-5); }

/* ── pills ───────────────────────────────────────────────────────── */
.pill{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  height:22px; padding:0 9px; border-radius:var(--pill);
  font-size:11.5px; font-weight:600; letter-spacing:-.005em;
}
.pill::before{ content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.pill-ok  { color:var(--ok);   background:var(--ok-wash); }
.pill-warn{ color:var(--warn); background:var(--warn-wash); }
.pill-bad { color:var(--bad);  background:var(--bad-wash); }
.pill-neu { color:var(--ink-mute); background:var(--paper-deep); box-shadow:inset 0 0 0 1px var(--line); }
.pill-lav { color:var(--lav-deep); background:var(--lav-mist); }
.pill-lav::before,.pill-neu::before{ display:none; }

/* ── notices ─────────────────────────────────────────────────────── */
.note{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px 16px; border-radius:var(--r-3); margin-bottom:var(--s-3);
  font-size:13px; line-height:1.55;
}
.note svg{ width:16px; height:16px; flex:none; margin-top:2px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.note strong{ display:block; font-size:13.5px; font-weight:600; color:var(--ink); letter-spacing:-.014em; }
.note span{ display:block; margin-top:2px; color:var(--ink-mute); }
.note a{ color:var(--ink); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.note-info{ background:var(--paper-deep); box-shadow:inset 0 0 0 1px var(--line); color:var(--ink-mute); }
.note-warn{ background:var(--warn-wash); color:var(--warn); }
.note-bad { background:var(--bad-wash);  color:var(--bad); }
.note-ok  { background:var(--ok-wash);   color:var(--ok); }

/* ── numbers ─────────────────────────────────────────────────────────
   One big figure per card, maximum. The old account page had a 52px
   credit count, a 28px credit count on /settings, and a progress bar
   for a number that has no ceiling — three treatments of one fact. */
.figure{
  display:flex; align-items:baseline; gap:9px;
}
.figure-n{
  font-size:40px; font-weight:600; letter-spacing:-.045em; line-height:1;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.figure-u{ font-size:14px; font-weight:500; color:var(--ink-mute); letter-spacing:-.014em; }
.figure-note{ margin-top:7px; font-size:13px; font-weight:450; color:var(--ink-mute); }

.facts{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:var(--s-4) var(--s-5);
}
.fact-k{
  font-size:11px; font-weight:600; letter-spacing:.085em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:5px;
}
.fact-v{
  font-size:15px; font-weight:600; letter-spacing:-.018em; color:var(--ink);
  font-variant-numeric:tabular-nums; line-height:1.3;
}
.fact-s{ margin-top:2px; font-size:12.5px; font-weight:450; color:var(--ink-mute); }

/* ── toggle ──────────────────────────────────────────────────────── */
.toggle{
  position:relative; width:42px; height:24px; flex:none;
  background:var(--paper-deep); border-radius:var(--pill); cursor:pointer;
  box-shadow:inset 0 0 0 1px var(--line-strong);
  transition:background .2s var(--app-ez), box-shadow .2s var(--app-ez);
}
.toggle::after{
  content:''; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:#fff;
  box-shadow:0 1px 3px rgba(11,11,15,.24);
  transition:transform .2s var(--app-ez);
}
.toggle.on{ background:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.toggle.on::after{ transform:translateX(18px); }

/* ── link list (a card whose rows are destinations) ─────────────── */
.links{ display:block; }
.links a,.links .static{
  display:flex; align-items:center; gap:14px;
  padding:14px 0; box-shadow:inset 0 -1px 0 var(--line);
  transition:opacity .18s var(--app-ez);
}
.links a:last-child,.links .static:last-child{ padding-bottom:0; box-shadow:none; }
.links a:hover{ opacity:.62; }
.links .lk-t{ flex:1; min-width:0; }
.links .lk-t strong{ display:block; font-size:14px; font-weight:600; letter-spacing:-.016em; color:var(--ink); }
.links .lk-t span{ display:block; margin-top:2px; font-size:13px; font-weight:450; color:var(--ink-mute); line-height:1.5; }
.links .lk-t span b{ color:var(--ink); font-weight:600; }
.links .lk-a{ flex:none; width:15px; height:15px; color:var(--ink-faint); fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ── empty state ─────────────────────────────────────────────────── */
.empty{ padding:var(--s-2) 0; }
.empty h3{ font-size:17px; font-weight:700; letter-spacing:-.028em; color:var(--ink); }
.empty p{ margin-top:7px; max-width:46ch; font-size:13.5px; font-weight:450; color:var(--ink-mute); line-height:1.6; }

/* ── danger card ─────────────────────────────────────────────────── */
.card-bad{ box-shadow:inset 0 0 0 1px var(--bad-line); }
.card-bad .card-hd h2{ color:var(--bad); }

/* ── forms ───────────────────────────────────────────────────────── */
label.fld{ display:block; margin-bottom:var(--s-3); }
label.fld > span{
  display:block; margin-bottom:7px;
  font-size:12.5px; font-weight:600; letter-spacing:-.01em; color:var(--ink);
}
label.fld .opt{ font-weight:450; color:var(--ink-faint); }
.inp,select.inp,textarea.inp{
  width:100%; padding:11px 13px;
  font-family:var(--font-body); font-size:14px; font-weight:450; color:var(--ink);
  background:var(--paper); border:0; border-radius:var(--r-2);
  box-shadow:inset 0 0 0 1px var(--line-strong);
  transition:box-shadow .18s var(--app-ez);
}
select.inp{ height:42px; padding:0 13px; cursor:pointer; }
textarea.inp{ resize:vertical; min-height:78px; max-height:220px; line-height:1.55; }
.inp:focus{ outline:none; box-shadow:inset 0 0 0 1.5px var(--ink); }
.inp::placeholder{ color:var(--ink-faint); }

/* ── chips (multi-select) ────────────────────────────────────────── */
.chips{ display:flex; flex-wrap:wrap; gap:7px; }
.chip{
  padding:8px 13px; border-radius:var(--pill);
  box-shadow:inset 0 0 0 1px var(--line-strong);
  font-size:13px; font-weight:500; letter-spacing:-.012em; color:var(--ink-mute);
  transition:box-shadow .18s var(--app-ez), color .18s var(--app-ez), background .18s var(--app-ez);
}
.chip:hover{ color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.chip[aria-pressed="true"]{ background:var(--ink); color:#fff; box-shadow:none; }

/* ── modal ───────────────────────────────────────────────────────── */
.veil{
  position:fixed; inset:0; z-index:var(--z-modal);
  display:none; align-items:center; justify-content:center; padding:20px;
  background:rgba(11,11,15,.42);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
.veil.show{ display:flex; animation:veil-in .18s var(--app-ez); }
@keyframes veil-in{ from{ opacity:0 } to{ opacity:1 } }
.sheet{
  width:100%; max-width:470px; max-height:88vh; overflow-y:auto;
  background:var(--paper); border-radius:var(--r-4); padding:26px;
  box-shadow:var(--shadow-4);
  animation:sheet-in .26s var(--app-ez);
}
@keyframes sheet-in{ from{ opacity:0; transform:translateY(10px) scale(.985) } to{ opacity:1; transform:none } }
.sheet h3{ font-size:18px; font-weight:700; letter-spacing:-.03em; color:var(--ink); }
.sheet > p{ margin-top:8px; font-size:13.5px; font-weight:450; color:var(--ink-mute); line-height:1.6; }
.sheet > p strong{ color:var(--ink); font-weight:600; }
.sheet .actions{ justify-content:flex-end; margin-top:var(--s-5); }
.sheet-wide{ max-width:520px; }

/* ── stepper ─────────────────────────────────────────────────────── */
.steps{ display:flex; align-items:center; gap:6px; margin-bottom:var(--s-5); }
.step-n{
  width:24px; height:24px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:600;
  background:var(--paper-deep); color:var(--ink-faint);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:all .2s var(--app-ez);
}
.step-n.on  { background:var(--ink); color:#fff; box-shadow:none; }
.step-n.done{ background:var(--ink); color:#fff; box-shadow:none; opacity:.32; }
.step-bar{ flex:1; height:1.5px; background:var(--line); border-radius:2px; transition:background .2s var(--app-ez); }
.step-bar.done{ background:var(--ink); opacity:.32; }
.step{ display:none; }
.step.on{ display:block; }
.step h4{ font-size:16px; font-weight:700; letter-spacing:-.028em; color:var(--ink); }
.step > p{ margin:7px 0 var(--s-4); font-size:13.5px; font-weight:450; color:var(--ink-mute); line-height:1.6; }
.step > p strong{ color:var(--ink); font-weight:600; }

.tally{ margin-bottom:var(--s-4); }
.tally li{
  list-style:none; display:flex; gap:10px; align-items:flex-start;
  padding:9px 0; box-shadow:inset 0 -1px 0 var(--line);
  font-size:13px; font-weight:450; color:var(--ink-mute); line-height:1.5;
}
.tally li:last-child{ box-shadow:none; }
.tally li strong{ color:var(--ink); font-weight:600; }
.tally li svg{ width:15px; height:15px; flex:none; margin-top:2px; color:var(--bad); fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ── toast ───────────────────────────────────────────────────────── */
.toast{
  position:fixed; bottom:22px; left:50%; z-index:var(--z-overlay);
  display:flex; align-items:center; gap:10px;
  max-width:min(400px,calc(100vw - 32px));
  padding:12px 17px; border-radius:var(--pill);
  background:var(--ink); color:#fff;
  font-size:13.5px; font-weight:500; letter-spacing:-.012em;
  box-shadow:0 18px 40px -18px rgba(11,11,15,.5);
  opacity:0; transform:translate(-50%,12px); pointer-events:none;
  transition:opacity .24s var(--app-ez), transform .24s var(--app-ez);
}
.toast.show{ opacity:1; transform:translate(-50%,0); }
.toast svg{ width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.toast.err{ background:var(--bad); }

/* ── skeleton ────────────────────────────────────────────────────── */
.skel{
  display:inline-block; min-width:78px; border-radius:6px;
  color:transparent !important;
  background:linear-gradient(90deg,var(--paper-deep),rgba(11,11,15,.07),var(--paper-deep));
  background-size:200% 100%; animation:shim 1.4s infinite linear;
}
@keyframes shim{ 0%{ background-position:200% 0 } 100%{ background-position:-200% 0 } }

@media (max-width:600px){
  .row{ flex-direction:column; align-items:flex-start; gap:11px; }
  .row .btn{ width:100%; }
  .row-val{ align-self:flex-start; }
  .toggle{ align-self:flex-start; }
  .card{ padding:var(--s-5) 20px; }
  .sheet .actions{ flex-direction:column-reverse; }
  .sheet .actions .btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.001ms !important; animation:none !important; }
}