/* GoBux web dashboard (WP11). Tokens from docs/design/components.html (Direction 3,
   "Playful utility"), layout from docs/design/web-dashboard.html: a 220px sidebar and a
   content column. Money in tabular figures, no ambient motion, light and dark as equals.
   The *-ink colours are the semantic colours darkened just enough to read as text on
   their own tint (AA, 4.5:1); the tints and the bright colours are the sheet's own. */

:root {
  color-scheme: light;
  --bg: #F7F7FC; --surface: #FFFFFF; --raised: #FFFFFF; --fg: #1B1B2A; --fg2: #62627A; --money: #1B1B2A;
  --acc: #5933F2; --acc-press: #4A28D6; --on-acc: #FFFFFF;
  --held: #5933F2; --pending: #C98A00; --met: #1FA35D; --refunded: #6478A0; --warning: #E86A1F; --danger: #D93A4A;
  --outline: #ECECF4; --rule: #E6E6EF; --overlay: rgba(27, 27, 42, .45);
  --b-held: #EDE9FF; --b-pending: #FFF4D6; --b-met: #E3F7EB; --b-refunded: #E9EEF7; --b-warning: #FFEDE0; --b-danger: #FFE5E8;
  --c-pin: #2A7FEF; --b-pin: #E6F0FF; --c-time: #C98A00; --b-time: #FFF4D6; --c-ok: #5933F2; --b-ok: #EDE9FF;
  --c-shop: #B8305F; --b-shop: #FFE7F0;
  --met-ink: #11743D; --pending-ink: #7A5400; --warning-ink: #A84410; --danger-ink: #B0283A; --held-ink: #5933F2;
  --sh-card: 0 6px 18px -8px rgba(40, 30, 90, .25);
  --focus: #5933F2;
  --ui: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
  --sys: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  --r-control: 12px; --r-card: 20px; --r-chip: 999px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #121218; --surface: #1C1C26; --raised: #262633; --fg: #F2F2F8; --fg2: #A4A4BC; --money: #F2F2F8;
    /* on-acc is dark here: white on #9280FF is 3.1:1, below AA for 14px button text (axe, 2026-10-27). */
    --acc: #9280FF; --acc-press: #A898FF; --on-acc: #14102E;
    --held: #9280FF; --pending: #FFCB4D; --met: #3FD37F; --refunded: #8FA3C8; --warning: #FF9A55; --danger: #FF6B7A;
    --outline: #2B2B38; --rule: #2B2B38; --overlay: rgba(0, 0, 0, .6);
    --b-held: #2A2448; --b-pending: #3B3015; --b-met: #173827; --b-refunded: #1F2736; --b-warning: #3A261A; --b-danger: #3D1A20;
    --c-pin: #6AA6FF; --b-pin: #1B2A44; --c-time: #FFCB4D; --b-time: #3B3015; --c-ok: #B3A6FF; --b-ok: #2A2448;
    --c-shop: #FF7FAE; --b-shop: #3E1A2A;
    --met-ink: #3FD37F; --pending-ink: #FFCB4D; --warning-ink: #FF9A55; --danger-ink: #FF8A96; --held-ink: #B3A6FF;
    --sh-card: 0 8px 20px -10px rgba(0, 0, 0, .6);
    --focus: #B3A6FF;
  }
}

* { box-sizing: border-box; }
[x-cloak] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--ui); font-size: 15px; line-height: 1.4; }
a { color: var(--held-ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 10; background: var(--surface); color: var(--fg); padding: 8px 12px; border-radius: var(--r-control); }
.skip:focus { left: 8px; }
.money { font-variant-numeric: tabular-nums; }
svg.i { width: 18px; height: 18px; flex: none; }

/* ---- shell: sidebar + content ------------------------------------------------ */
.app { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--surface); border-right: 1px solid var(--rule); padding: 16px 12px; display: flex; flex-direction: column; gap: 4px; }
.side .collapsible { flex: 1; }
.side .biz { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; }
.logo { width: 34px; height: 34px; border-radius: 10px; background: var(--b-shop); color: var(--c-shop); display: grid; place-items: center; font-weight: 800; flex: none; }
.side .biz .t { font-weight: 800; font-size: 14px; }
.side .biz .s { font-size: 12px; color: var(--fg2); font-weight: 600; }
.side nav { display: flex; flex-direction: column; gap: 4px; }
.side nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font-weight: 700; font-size: 14px; color: var(--fg2); text-decoration: none; }
.side nav a:hover { background: var(--bg); color: var(--fg); }
.side nav a[aria-current="page"] { background: var(--b-ok); color: var(--c-ok); }
.side .sp { flex: 1; }
.side .foot { font-size: 12px; color: var(--fg2); font-weight: 600; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.switcher label { font-size: 12px; font-weight: 700; color: var(--fg2); display: block; margin-bottom: 4px; }
.switcher select { width: 100%; }
.linkbtn { font: inherit; font-weight: 700; color: var(--held-ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.side .menu-btn { display: none; }
.main { padding: 20px 24px 48px; display: flex; flex-direction: column; gap: 16px; min-width: 0; max-width: 1180px; }
.topbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.topbar h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; flex: 1; min-width: 12ch; }
.range { font-size: 13px; font-weight: 700; color: var(--fg2); background: var(--surface); border: 1px solid var(--rule); padding: 6px 10px; border-radius: 10px; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { border-right: 0; border-bottom: 1px solid var(--rule); }
  .side .collapsible { display: none; }
  .side.open .collapsible { display: flex; }
  .side .head { display: flex; align-items: center; justify-content: space-between; }
  .side .menu-btn { display: inline-flex; }
  .main { padding: 16px 16px 48px; }
}

/* ---- surfaces ------------------------------------------------------------------ */
.card { background: var(--surface); border-radius: 16px; border: 1px solid var(--rule); }
.sec { padding: 14px 16px; }
.sec h2 { margin: 0 0 10px; font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.sec h2 .aside { font-weight: 600; color: var(--fg2); font-size: 12px; margin-left: auto; }
.sec.now { outline: 2px solid var(--acc); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) { .two { grid-template-columns: 1fr; } }
.note { font-size: 13px; color: var(--fg2); font-weight: 600; line-height: 1.45; margin: 0; }
.form + .note, .stack + .note, .tablewrap + .note, .note + .stack { margin-top: 12px; }
.note + .note { margin-top: 8px; }
.empty { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 0; }
.empty .t { font-size: 16px; font-weight: 800; }

/* ---- the five steps ------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0; padding: 0; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.stepc { padding: 12px; border-radius: 14px; border: 1px solid var(--rule); background: var(--surface); }
.stepc a { color: inherit; text-decoration: none; display: block; }
.stepc .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--b-ok); color: var(--c-ok); margin-bottom: 8px; }
.stepc .n svg { width: 14px; height: 14px; }
.stepc .n.done { background: var(--met-ink); color: #FFFFFF; }
.stepc .n.now { background: var(--acc); color: var(--on-acc); }
.stepc .t { font-size: 13px; font-weight: 800; }
.stepc .s { font-size: 12px; color: var(--fg2); font-weight: 600; margin-top: 2px; overflow-wrap: anywhere; }
.stepc.now { outline: 2px solid var(--acc); }
.state { font-size: 12px; font-weight: 700; }

/* ---- forms ----------------------------------------------------------------------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.form .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .form { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field label, .field .label { font-size: 12px; font-weight: 700; color: var(--fg2); }
.field .help { font-size: 12px; color: var(--fg2); font-weight: 600; }
input[type=text], input[type=tel], input[type=number], select {
  font: inherit; font-weight: 700; font-size: 15px; color: var(--fg); background: var(--bg);
  border: 1px solid var(--fg2); border-radius: 10px; padding: 9px 12px; width: 100%; min-height: 40px;
}
input::placeholder { color: var(--fg2); opacity: 1; font-weight: 600; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; font-weight: 600; }
.check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--acc); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: inherit; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: var(--r-chip); background: var(--bg); border: 1px solid var(--rule); color: var(--fg2); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--b-shop); color: var(--c-shop); border-color: transparent; }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline { display: inline; }

.btn { font: inherit; font-size: 14px; font-weight: 700; border: 0; border-radius: var(--r-control); padding: 9px 14px; background: var(--acc); color: var(--on-acc); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: pointer; text-decoration: none; min-height: 40px; }
.btn:hover { background: var(--acc-press); }
.btn.ghost { background: var(--surface); color: var(--fg); border: 1px solid var(--rule); }
.btn.ghost:hover { background: var(--bg); }
.btn.danger { background: var(--surface); color: var(--danger-ink); border: 1px solid var(--rule); }
.btn.small { font-size: 13px; padding: 6px 10px; min-height: 32px; }
.btn[disabled] { background: var(--rule); color: var(--fg2); cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }

/* ---- alerts and pills --------------------------------------------------------------- */
.alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; font-weight: 700; font-size: 13px; }
.alert svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.alert.ok { background: var(--b-met); color: var(--met-ink); }
.alert.warn { background: var(--b-warning); color: var(--warning-ink); }
.alert.err { background: var(--b-danger); color: var(--danger-ink); }
.alert.info { background: var(--b-held); color: var(--held-ink); }
.banner { border-radius: 12px; }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.s-ok { background: var(--b-met); color: var(--met-ink); }
.s-pending { background: var(--b-pending); color: var(--pending-ink); }
.s-off { background: var(--rule); color: var(--fg2); }
.s-held { background: var(--b-held); color: var(--held-ink); }

/* ---- money --------------------------------------------------------------------------- */
.fund { background: #5933F2; color: #FFFFFF; border-radius: 16px; padding: 14px 16px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.fund .l { font-size: 12px; font-weight: 600; color: #ECE8FF; }
.fund .n { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.fund .act { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.fund .btn { background: #FFFFFF; color: #3E1FC9; }
.fund .btn[disabled] { background: rgba(255, 255, 255, .2); color: #FFFFFF; }
.fund .tag { font-size: 13px; font-weight: 700; background: rgba(255, 255, 255, .18); color: #FFFFFF; padding: 9px 14px; border-radius: var(--r-control); }

.tablewrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg2); font-weight: 700; }
td.r, th.r { text-align: right; white-space: nowrap; }
td.up { color: var(--met-ink); }
td .sub { display: block; font-size: 12px; color: var(--fg2); font-weight: 600; }

/* ---- sign-in and single-card pages --------------------------------------------------------- */
.solo { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.solo .card { width: 100%; max-width: 440px; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.solo.wide .card { max-width: 720px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; }
.brand .mark { width: 34px; height: 34px; border-radius: 10px; background: var(--acc); color: var(--on-acc); display: grid; place-items: center; font-weight: 800; }
.solo h1 { margin: 0; font-size: 22px; font-weight: 800; }
.solo p { margin: 0; }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.list li { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--rule); border-radius: 12px; flex-wrap: wrap; }
.list .t { font-weight: 800; }
.list .s { font-size: 13px; color: var(--fg2); font-weight: 600; }
.list a.go { text-decoration: none; color: inherit; display: flex; gap: 10px; align-items: center; flex: 1; }
.list select { width: auto; min-width: 9em; }
.list form.row-actions { flex-wrap: nowrap; }
details summary { cursor: pointer; font-weight: 700; color: var(--held-ink); font-size: 13px; }
details[open] summary { margin-bottom: 10px; }

/* ---- WP12: campaign builder, reports, statements (mock frames 3, 4 and 5) ------------------- */
.two.wide { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 900px) { .two.wide { grid-template-columns: 1fr; } }
.sec h2 + .chips { margin-bottom: 4px; }
.sec h2.gap { margin-top: 18px; }
a.chip { text-decoration: none; display: inline-flex; align-items: center; }
a.chip[aria-current="true"] { background: var(--b-shop); color: var(--c-shop); border-color: transparent; }
.chip[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
input[type=date] { font: inherit; font-weight: 700; font-size: 15px; color: var(--fg); background: var(--bg); border: 1px solid var(--fg2); border-radius: 10px; padding: 8px 10px; width: 100%; min-height: 40px; }
input[disabled] { border-style: dashed; color: var(--fg2); cursor: not-allowed; }
.field .static { font-weight: 700; font-size: 14px; background: var(--bg); border: 1px solid var(--rule); border-radius: 10px; padding: 9px 12px; display: flex; gap: 8px; align-items: center; }
.field .static svg { width: 16px; height: 16px; color: var(--fg2); }
.field .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.field .pair label { font-weight: 600; }
.places { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.places legend { font-size: 12px; font-weight: 700; color: var(--fg2); padding: 0; margin-bottom: 4px; }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 12px 0 0; font-size: 13px; }
.facts dt { color: var(--fg2); font-weight: 700; }
.facts dd { margin: 0; font-weight: 700; }

/* the Discover card and the Lock Screen line, as the app draws them */
.ch { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; border-radius: 16px; background: var(--raised); border: 1px solid var(--rule); box-shadow: var(--sh-card); }
.ch .hd { display: flex; align-items: center; gap: 10px; }
.ch .glyph { width: 36px; height: 36px; border-radius: 12px; background: var(--b-time); color: var(--c-time); display: grid; place-items: center; flex: none; }
.ch .glyph.pin { background: var(--b-pin); color: var(--c-pin); }
.ch .glyph.move, .ch .glyph.boost { background: var(--b-ok); color: var(--c-ok); }
.ch .glyph svg { width: 20px; height: 20px; }
.ch .biz { font-size: 12px; font-weight: 700; color: var(--fg2); }
.ch .t { font-size: 15px; font-weight: 800; }
.ch .reward { margin-left: auto; font-size: 14px; font-weight: 800; color: var(--c-shop); background: var(--b-shop); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.ch .meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--fg2); font-weight: 600; }
.phone-sm { width: 100%; max-width: 300px; border-radius: 20px; background: var(--bg); border: 1px solid var(--rule); padding: 12px; }
.la { background: #1B1B2A; color: #FFFFFF; border-radius: 16px; padding: 10px 12px; font-size: 12.5px; }
.la .r { display: flex; justify-content: space-between; gap: 12px; font-weight: 800; }
.la .s { color: #D4D4E2; font-weight: 600; margin-top: 4px; font-size: 11.5px; }
.la svg { display: block; width: 100%; height: 5px; margin-top: 8px; }
.la .track { fill: rgba(255, 255, 255, .2); }
.la .fill { fill: #FFCB4D; }
.preview-stack { display: flex; flex-direction: column; gap: 10px; }
.preview-stack .note { margin: 0; }

/* reports: tiles, the chart, the legend */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.stat { padding: 12px 14px; }
.stat .n { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.stat .l { font-size: 12px; color: var(--fg2); font-weight: 700; margin-top: 2px; }
.stat .d { font-size: 12px; font-weight: 700; color: var(--met-ink); margin-top: 2px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .ax { font-size: 11px; fill: var(--fg2); font-weight: 600; font-family: var(--ui); }
.chart .grid { stroke: var(--rule); stroke-width: 1; }
.chart .bar { fill: var(--acc); }
.chart .bar.wk { fill: var(--b-ok); stroke: var(--c-ok); stroke-width: 1; }
.chart .lab { font-size: 11.5px; font-weight: 800; fill: var(--fg); font-family: var(--ui); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--fg2); font-weight: 600; margin-top: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.legend .k-wd { background: var(--acc); }
.legend .k-we { background: var(--b-ok); border: 1px solid var(--c-ok); }
.legend .peak { margin-left: auto; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.filter .field { min-width: 220px; }
.ranges { display: flex; gap: 6px; flex-wrap: wrap; }

/* statements */
tr.total td { font-weight: 800; border-bottom: 0; border-top: 2px solid var(--fg); }
tr.group th { padding-top: 16px; }
td.undone { color: var(--fg2); text-decoration: line-through; }
.s-live, .s-paid { background: var(--b-met); color: var(--met-ink); }
.s-draft { background: var(--rule); color: var(--fg2); }
.s-err { background: var(--b-danger); color: var(--danger-ink); }
.bignum { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.gap-top { margin-top: 12px; }
th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--fg2); }
td.ref { overflow-wrap: anywhere; word-break: break-all; }

/* ---- CB1: the campaign builder (docs/design/campaign-builder.html): starters, the sentence, it's live ---------- */
.crumb { color: var(--fg2); font-weight: 700; font-size: 14px; }
.crumb b { color: var(--fg); }
.hint { font-size: 12.5px; color: var(--fg2); font-weight: 600; line-height: 1.45; margin: 0; }
.hint a { font-weight: 800; }
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fg2); margin: 0; }
.ch .who { min-width: 0; }
.ch .t { line-height: 1.2; }
.ch .glyph.time { background: var(--b-time); color: var(--c-time); }
.ch .glyph.move { background: var(--b-met); color: var(--met-ink); }
.ch .glyph.boost { background: var(--b-shop); color: var(--c-shop); }
.ch.inset { background: var(--bg); box-shadow: none; }

/* starters */
.again { display: flex; gap: 12px; align-items: center; padding: 12px 14px; }
.again .ic { width: 36px; height: 36px; border-radius: 11px; background: var(--b-met); color: var(--met-ink); display: grid; place-items: center; flex: none; }
.again .t { flex: 1; font-size: 15px; font-weight: 800; min-width: 0; }
.again .t small { display: block; font-size: 12.5px; color: var(--fg2); font-weight: 600; margin-top: 2px; }
.goal { display: flex; flex-direction: column; gap: 8px; }
.goal .gh { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.goal .gh h2 { margin: 0; font-size: 15px; font-weight: 800; }
.goal .gh span { font-size: 12.5px; color: var(--fg2); font-weight: 600; }
.starters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.st { border-radius: 18px; background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--sh-card); }
.st-link { display: flex; flex-direction: column; gap: 8px; padding: 10px; color: inherit; text-decoration: none; border-radius: 18px; height: 100%; }
.st-link:hover { background: var(--b-ok); }
.st-link:hover .ch.inset { background: var(--surface); }
.st .ft { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; font-size: 12.5px; font-weight: 700; color: var(--fg2); margin-top: auto; }
.st .ft em { font-style: normal; color: var(--c-ok); background: var(--b-ok); padding: 4px 10px; border-radius: 999px; font-weight: 800; white-space: nowrap; }
.st.off { box-shadow: none; border-style: dashed; background: transparent; }
.st-off { padding: 14px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.st-off .t { font-weight: 800; color: var(--fg2); }

/* the sentence, one question at a time */
.builder { display: contents; }
.two.build { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px; }
@media (max-width: 900px) { .two.build { grid-template-columns: 1fr; } }
.col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.sent { font-size: 26px; font-weight: 800; line-height: 1.55; letter-spacing: -0.01em; margin: 0; }
@media (max-width: 600px) { .sent { font-size: 21px; } }
.sent .q { color: var(--fg2); font-weight: 600; }
.sent .nw { white-space: nowrap; }
.sent .nw .v { white-space: normal; }
.sent .v { font: inherit; color: inherit; background: none; border: 0; padding: 0 2px; margin: 0; cursor: pointer; border-radius: 8px;
  box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--acc) 40%, transparent); text-align: left; }
.sent .v:hover { background: var(--b-ok); }
.sent .v.now { background: var(--b-ok); color: var(--c-ok); padding: 0 8px; box-shadow: none; }
.sent .v.todo { color: var(--fg2); font-weight: 700; font-size: .72em; border: 2px dashed var(--rule); padding: 0 10px; box-shadow: none; vertical-align: middle; }
.sent .v.todo.now { border-color: var(--acc); color: var(--c-ok); }
.step-lbl { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.step-lbl .dots { display: flex; gap: 5px; }
.step-lbl .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--rule); }
.step-lbl .dots i.on { background: var(--acc); width: 18px; border-radius: 4px; }
.step-lbl .dots i.done { background: color-mix(in srgb, var(--acc) 45%, transparent); }
.ask { padding: 20px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--sh-card); }
.ask h2 { margin: 0; font-size: 19px; font-weight: 800; }
.ask h2 + .hint { margin-top: -6px; }
.ask .sub { margin: 4px 0 0; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--fg2); padding: 0; }
.pickset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.goalset legend { font-size: 13px; font-weight: 800; color: var(--fg); padding: 0; margin-bottom: 6px; }
.picks { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { position: relative; display: inline-flex; }
.pick input[type=radio] { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pick .pl { display: block; font-size: 16px; font-weight: 800; padding: 10px 16px; border-radius: 14px; background: var(--bg); border: 1.5px solid var(--rule);
  color: var(--fg); min-width: 64px; text-align: center; cursor: pointer; }
.pick .pl small { display: block; font-size: 11.5px; font-weight: 700; color: var(--fg2); margin-top: 1px; }
.pick:hover .pl { border-color: color-mix(in srgb, var(--acc) 50%, var(--rule)); }
.pick input:checked + .pl { background: var(--b-ok); color: var(--c-ok); border-color: var(--acc); }
.pick input:checked + .pl small { color: var(--c-ok); }
.pick input:focus-visible + .pl { outline: 2px solid var(--focus); outline-offset: 2px; }
.pick.off .pl { opacity: .55; cursor: not-allowed; border-style: dashed; }
.picks.wide .pick { flex: 1 1 180px; }
.picks.wide .pick .pl { text-align: left; font-size: 15px; width: 100%; }
.pick.custom .cur { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 16px; font-weight: 800; color: var(--fg2); pointer-events: none; }
.pick.custom input[type=text] { font-size: 16px; font-weight: 800; width: 7.5em; min-height: 0; padding: 10px 14px 10px 26px; border-radius: 14px;
  border: 1.5px dashed var(--rule); background: var(--bg); color: var(--fg); }
.pick.custom input[type=text]:not(:placeholder-shown) { border-style: solid; border-color: var(--acc); background: var(--b-ok); color: var(--c-ok); }
.nudge { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; font-weight: 600; color: var(--fg2); line-height: 1.45; background: var(--bg);
  padding: 10px 12px; border-radius: 12px; }
.nudge b { color: var(--fg); }
.nudge svg { width: 16px; height: 16px; color: var(--c-time); margin-top: 1px; }
.cost { display: flex; gap: 12px; align-items: flex-start; font-size: 13px; font-weight: 600; color: var(--fg2); line-height: 1.45; padding: 0 4px; min-height: 1em; }
.cost b { color: var(--fg); }
.cost .n { font-size: 24px; font-weight: 800; color: var(--fg); letter-spacing: -0.02em; line-height: 1; flex: none; padding-top: 2px; }
.go-area { display: flex; flex-direction: column; gap: 10px; }
.foot-web { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.foot-web .hint { order: 9; flex: 1 1 100%; }
.foot-web .push { margin-left: auto; }
.dates { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: end; }
.dates label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--fg2); }
.dates input[type=date] { width: auto; }
.places-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.toggle { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--rule); background: var(--bg); cursor: pointer; }
.toggle input { width: 18px; height: 18px; accent-color: var(--acc); flex: none; margin: 0; }
.toggle:has(input:checked) { border-color: var(--acc); background: var(--b-ok); }
.toggle b { font-weight: 800; }
.toggle small { display: block; font-size: 12px; color: var(--fg2); font-weight: 600; }
.toggle.off { cursor: default; border-style: dashed; }
.pinbox { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.pinbox input { flex: 1 1 200px; width: auto; }
.see { padding: 16px; display: flex; flex-direction: column; gap: 10px; }

/* it's live */
.live { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 0 4px; }
.live .tick { width: 64px; height: 64px; border-radius: 50%; background: var(--b-met); color: var(--met-ink); display: grid; place-items: center; margin-bottom: 6px; }
.live .tick svg { width: 30px; height: 30px; }
.live h1 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.live p { margin: 0; font-size: 14px; color: var(--fg2); font-weight: 600; line-height: 1.45; max-width: 44ch; }
.live p b { color: var(--fg); }
.share { display: flex; gap: 16px; align-items: center; padding: 16px; flex-wrap: wrap; box-shadow: var(--sh-card); }
.share .qr { width: 132px; height: 132px; background: #FFFFFF; padding: 6px; border-radius: 12px; flex: none; border: 1px solid var(--rule); }
.share .qr svg { width: 100%; height: 100%; display: block; }
.share-body { flex: 1 1 260px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.share .lk { margin: 0; font-family: var(--sys); font-size: 13px; font-weight: 600; color: var(--fg2); }
.share .lk b { color: var(--fg); display: block; font-size: 14px; overflow-wrap: anywhere; }
.share input.linkbox { font-family: var(--sys); font-size: 13px; font-weight: 600; min-height: 32px; padding: 5px 10px; flex: 1 1 220px; width: auto; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13px; margin: 4px 0 0; }
.kv dt { color: var(--fg2); font-weight: 700; }
.kv dd { margin: 0; font-weight: 700; }
a.rowlink { color: var(--fg); font-weight: 800; text-decoration: none; }
a.rowlink:hover { color: var(--held-ink); text-decoration: underline; }
.crumb.grow { flex: 1; }
.crumb a { color: var(--fg2); }