/* Mandate console, styled to the Fortuna Pace brand (adopted Sept 2026).
   Source of truth: fortuna-pace-ltd/FortunaPace-Website, docs/brand.md and src/app/site.css.
   The tokens below are copied from site.css: keep them in sync rather than editing them here. */

@font-face { font-family: Satoshi; src: url("/fonts/Satoshi-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Satoshi; src: url("/fonts/Satoshi-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Satoshi; src: url("/fonts/Satoshi-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --bg:#F5F4F0; --surface:#FFFFFF; --subtle:rgba(11,15,26,.04);
  --text:#0B0F1A; --muted:rgba(11,15,26,.64); --faint:rgba(11,15,26,.58);
  --line:rgba(11,15,26,.08); --line-strong:rgba(11,15,26,.12);
  --accent:#3A63DD; --accent-fill:#3A63DD; --accent-2:#2E52C4; --accent-3:#3159D6; --accent-4:#2B4DB5;
  --accent-tint:rgba(58,99,221,.08); --accent-ring:rgba(58,99,221,.28);
  --inverse:#0B0F1A; --on-inverse:#FFFFFF;
  --glass:rgba(255,255,255,.62); --glass-shadow:0 10px 30px rgba(11,15,26,.08),inset 0 1px 0 rgba(255,255,255,.9);
  --sans:Satoshi,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  /* Product-specific: the brand has no warning colour, so this one is restrained. */
  --risk:#B4232F; --risk-tint:rgba(180,35,47,.08); --ok:#2E7D4F;
  /* Level ramp through the brand blues. */
  --l0-bg:var(--risk-tint); --l0-fg:var(--risk);
  --l1-bg:var(--subtle);    --l1-fg:var(--muted);
  --l2-bg:var(--accent-tint); --l2-fg:var(--accent-2);
  --l3-bg:var(--accent-ring); --l3-fg:var(--text);
  --l4-bg:var(--accent-fill); --l4-fg:#fff;
  --radius:16px; --sidebar:248px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark) { :root {
  --bg:#07090F; --surface:#0D1220; --subtle:rgba(255,255,255,.04);
  --text:#F4F5F8; --muted:rgba(244,245,248,.65); --faint:rgba(244,245,248,.52);
  --line:rgba(244,245,248,.1); --line-strong:rgba(255,255,255,.12);
  --accent:#4A74F0; --accent-fill:#3A63DD; --accent-2:#6E91FF; --accent-3:#8FA9FF; --accent-4:#B9C8FF;
  --accent-tint:rgba(74,116,240,.14); --accent-ring:rgba(110,145,255,.32);
  --inverse:#F4F5F8; --on-inverse:#07090F;
  --glass:rgba(255,255,255,.06); --glass-shadow:0 10px 30px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.14);
  --risk:#FF7A85; --risk-tint:rgba(255,122,133,.12); --ok:#6FD49A;
  color-scheme:dark;
} }

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font:400 15px/1.5 var(--sans); color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; }
[hidden] { display:none !important; }
a { color:var(--accent-2); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip { position:absolute; left:16px; top:-60px; z-index:200; background:var(--inverse); color:var(--on-inverse); padding:10px 16px; border-radius:999px; font-weight:700; }
.skip:focus { top:12px; }

/* ---------- shell ---------- */
#shell { display:grid; grid-template-columns:var(--sidebar) 1fr; min-height:100vh; }
.sidebar { position:sticky; top:0; height:100vh; display:flex; flex-direction:column; gap:6px; padding:18px 14px;
  border-right:1px solid var(--line); background:var(--surface); overflow-y:auto; }
.brand-row { display:flex; align-items:center; gap:10px; padding:4px 8px 14px; }
.mark { width:30px; height:auto; }
.product { font-weight:700; letter-spacing:-.02em; font-size:17px; }
.org-label { font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding:0 8px; }
#org-switch { margin:0 4px 10px; width:calc(100% - 8px); }
#nav { display:flex; flex-direction:column; gap:2px; }
.nav-item { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; color:var(--muted); text-decoration:none;
  font:500 15px/18px var(--sans); background:none; border:0; cursor:pointer; text-align:left; width:100%; }
.nav-item:hover { background:var(--subtle); color:var(--text); }
.nav-item[aria-current="page"] { background:var(--accent-tint); color:var(--text); }
.nav-ico { width:18px; text-align:center; color:var(--accent-3); }
.nav-count { margin-left:auto; font-size:12px; color:var(--faint); }
.nav-sep { height:1px; background:var(--line); margin:10px 8px; }
.sidebar-foot { margin-top:auto; display:flex; flex-direction:column; gap:2px; padding-top:10px; border-top:1px solid var(--line); }
#who { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.content { min-width:0; display:flex; flex-direction:column; }
.topbar { position:sticky; top:0; z-index:5; display:flex; align-items:center; gap:12px; padding:12px 32px; min-height:58px;
  background:var(--glass); box-shadow:0 1px 0 var(--line); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); }
.crumbs { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); min-width:0; }
.crumbs a { color:var(--muted); text-decoration:none; }
.crumbs a:hover { color:var(--text); text-decoration:underline; }
.crumbs .sep { color:var(--faint); }
.crumbs .here { color:var(--text); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar-actions { margin-left:auto; display:flex; gap:8px; }
#main { padding:28px 32px 64px; max-width:1180px; width:100%; }
#main:focus { outline:none; }

.icon-btn { background:none; border:1px solid var(--line-strong); color:var(--text); border-radius:10px; width:38px; height:38px; font-size:17px; cursor:pointer; }
.only-mobile { display:none; }
.scrim { position:fixed; inset:0; background:rgba(7,9,15,.45); z-index:39; }

@media (max-width:900px) {
  #shell { grid-template-columns:1fr; }
  .sidebar { position:fixed; z-index:40; left:0; top:0; width:min(300px,86vw); transform:translateX(-100%); transition:transform .25s ease; box-shadow:0 0 40px rgba(0,0,0,.25); }
  .sidebar.open { transform:none; }
  .only-mobile { display:inline-grid; place-items:center; }
  .brand-row .icon-btn { margin-left:auto; }
  .topbar { padding:10px 16px; }
  #main { padding:20px 16px 56px; }
}

/* ---------- public screens ---------- */
.public-head { display:flex; align-items:center; gap:1rem; padding:16px 28px; }
.public-head .product { padding-left:1rem; border-left:1px solid var(--line-strong); }
.lockup { height:22px; display:block; }
.lockup-dark { display:none; }
@media (prefers-color-scheme:dark) { .lockup-colour { display:none; } .lockup-dark { display:block; } }
main.narrow { max-width:440px; margin:0 auto; padding:56px 20px 64px; }
main.narrow h1 { margin-bottom:20px; }

/* ---------- type ---------- */
.eyebrow { font-size:12px; line-height:1.2; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-3); margin:0 0 8px; }
h1 { font-size:clamp(26px,2.6vw,34px); line-height:1.1; font-weight:500; letter-spacing:-.035em; margin:0 0 6px; text-wrap:balance; }
h2 { font-size:19px; line-height:1.25; font-weight:500; letter-spacing:-.02em; margin:0 0 12px; }
h3 { font-size:15px; font-weight:500; margin:0 0 8px; }
.lede { color:var(--muted); font-size:16px; margin:0 0 24px; max-width:60ch; }
.muted { color:var(--muted); } .faint { color:var(--faint); } .small { font-size:13px; } .risk { color:var(--risk); font-weight:500; }
.page-head { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:22px; }
.page-head > div:first-child { flex:1; min-width:240px; }
.page-head h1 { margin:0; }
.stack > * + * { margin-top:16px; }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.grow { flex:1; }

/* ---------- surfaces ---------- */
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; }
.panel + .panel { margin-top:16px; }
.panel-head { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.panel-head h2, .panel-head h3 { margin:0; flex:1; }
.grid-2 { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:16px; align-items:start; }
.grid-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:12px; }
@media (max-width:1000px) { .grid-2 { grid-template-columns:1fr; } }
.stat { display:flex; flex-direction:column; }
.stat b { font-size:28px; font-weight:500; letter-spacing:-.03em; line-height:1.1; }
.stat span { color:var(--faint); font-size:13px; font-weight:500; }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
.stats .panel { padding:16px 18px; margin:0; }
.notice { background:var(--accent-tint); border:1px solid var(--accent-ring); border-radius:var(--radius); padding:14px 18px; }
.notice.warn { background:var(--risk-tint); border-color:color-mix(in srgb,var(--risk) 30%,transparent); }

/* ---------- level bar + badges ---------- */
.lvlbar { display:flex; height:30px; border-radius:10px; overflow:hidden; background:var(--subtle); }
.lvlbar button { border:0; padding:0; font:700 12px var(--sans); cursor:pointer; min-width:0; transition:filter .15s; }
.lvlbar button:hover { filter:brightness(.95); }
.lvlbar .l0{background:var(--l0-bg);color:var(--l0-fg)} .lvlbar .l1{background:var(--l1-bg);color:var(--l1-fg);box-shadow:inset 0 0 0 1px var(--line-strong)}
.lvlbar .l2{background:var(--l2-bg);color:var(--l2-fg)} .lvlbar .l3{background:var(--l3-bg);color:var(--l3-fg)} .lvlbar .l4{background:var(--l4-bg);color:var(--l4-fg)}
.legend { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:13px; color:var(--muted); }
.legend span::before { content:""; display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px; background:var(--sw); box-shadow:inset 0 0 0 1px var(--line-strong); }
.legend .l0{--sw:var(--l0-bg)} .legend .l1{--sw:var(--l1-bg)} .legend .l2{--sw:var(--l2-bg)} .legend .l3{--sw:var(--l3-bg)} .legend .l4{--sw:var(--l4-bg)}

.lvl { display:inline-flex; align-items:center; gap:6px; border-radius:100px; padding:3px 10px; font-size:12.5px; font-weight:700; white-space:nowrap; }
.lvl .name { font-weight:500; }
.l0{background:var(--l0-bg);color:var(--l0-fg)} .l1{background:var(--l1-bg);color:var(--l1-fg);box-shadow:inset 0 0 0 1px var(--line-strong)}
.l2{background:var(--l2-bg);color:var(--l2-fg)} .l3{background:var(--l3-bg);color:var(--l3-fg)} .l4{background:var(--l4-bg);color:var(--l4-fg)}
.pill { display:inline-block; border-radius:100px; padding:2px 9px; font-size:12.5px; font-weight:500; background:var(--subtle); color:var(--muted); box-shadow:inset 0 0 0 1px var(--line); white-space:nowrap; }
.pill.warn { background:var(--risk-tint); color:var(--risk); box-shadow:none; }
.pill.good { background:var(--accent-tint); color:var(--accent-2); box-shadow:none; }

/* Readiness steps */
.ladder { list-style:none; margin:0; padding:0; }
.ladder li { display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line); }
.ladder li:last-child { border:0; }
.tick { flex:none; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700; margin-top:1px; }
.tick.ok { background:var(--accent-tint); color:var(--accent-2); }
.tick.no { background:var(--risk-tint); color:var(--risk); }
.ladder .what { flex:1; min-width:0; }
.ladder .what b { font-weight:500; }
.ladder .advice { display:block; color:var(--muted); font-size:13.5px; margin-top:2px; }
.next { border-left:3px solid var(--accent); padding:12px 16px; background:var(--accent-tint); border-radius:0 12px 12px 0; margin-bottom:14px; }

/* ---------- tables ---------- */
.table-wrap { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:auto; }
table { width:100%; border-collapse:collapse; }
th,td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
th { font-size:11.5px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; color:var(--faint); background:var(--subtle); white-space:nowrap; }
th button { all:unset; cursor:pointer; }
th button:focus-visible { outline:2px solid var(--accent); }
th[aria-sort] button::after { content:" ↕"; opacity:.4; }
th[aria-sort="ascending"] button::after { content:" ↑"; opacity:1; }
th[aria-sort="descending"] button::after { content:" ↓"; opacity:1; }
tr.clickable { cursor:pointer; transition:background-color .15s; }
tr.clickable:hover { background:var(--accent-tint); }
td a.rowlink { color:var(--text); font-weight:500; text-decoration:none; }
td a.rowlink:hover { text-decoration:underline; }
.cell-sub { display:block; font-size:12.5px; color:var(--faint); }

/* Mobile: tables become cards. */
@media (max-width:700px) {
  .cards-on-mobile thead { display:none; }
  .cards-on-mobile, .cards-on-mobile tbody, .cards-on-mobile tr, .cards-on-mobile td { display:block; width:100%; }
  .cards-on-mobile tr { padding:12px 14px; border-bottom:1px solid var(--line); }
  .cards-on-mobile td { border:0; padding:3px 0; }
  .cards-on-mobile td[data-label]::before { content:attr(data-label) ": "; color:var(--faint); font-size:12.5px; }
}

/* ---------- filters ---------- */
.toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.toolbar input[type=search] { flex:1; min-width:200px; }
.chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip { border:1px solid var(--line-strong); background:var(--surface); color:var(--muted); border-radius:100px; padding:6px 12px; font:500 13px var(--sans); cursor:pointer; }
.chip[aria-pressed="true"] { background:var(--inverse); color:var(--on-inverse); border-color:var(--inverse); }

/* ---------- forms ---------- */
label, .label { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:500; color:var(--muted); }
.hint { font-size:12.5px; color:var(--faint); font-weight:400; }
input,select,textarea { font:inherit; font-size:15px; padding:9px 12px; border:1px solid var(--line-strong); border-radius:10px; color:var(--text); background:var(--bg); min-width:0; }
textarea { min-height:84px; resize:vertical; line-height:1.45; }
input:focus,select:focus,textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); }
input[aria-invalid="true"] { border-color:var(--risk); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.form-grid .full { grid-column:1 / -1; }
@media (max-width:700px) { .form-grid { grid-template-columns:1fr; } }
.check { flex-direction:row; align-items:center; gap:10px; color:var(--text); font-size:14.5px; font-weight:400; }
.check input { width:18px; height:18px; accent-color:var(--accent); }
fieldset { border:0; padding:0; margin:0; min-width:0; }
legend { padding:0; }
.choice-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:8px; }
.choice { position:relative; display:block; border:1px solid var(--line-strong); border-radius:12px; padding:12px 14px; cursor:pointer; color:var(--text); font-size:14px; }
.choice input { position:absolute; opacity:0; }
.choice b { display:block; font-weight:500; margin-bottom:2px; }
.choice span { color:var(--muted); font-size:13px; font-weight:400; }
.choice:has(input:checked) { border-color:var(--accent); background:var(--accent-tint); box-shadow:0 0 0 1px var(--accent); }
.choice:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:2px; }

/* Repeating rows (limits, sources, escalations) */
.rows { display:flex; flex-direction:column; gap:10px; }
.rowedit { display:grid; gap:8px; align-items:end; padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--subtle); }
.rowedit.limit { grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr) minmax(0,1.6fr) auto; }
.rowedit.source { grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) minmax(0,1fr) auto; }
.rowedit.esc { grid-template-columns:minmax(0,2.4fr) minmax(0,1.4fr) minmax(0,1.2fr) auto; }
.rowedit label { font-size:12px; min-width:0; }
.rowedit input, .rowedit select { width:100%; min-width:0; }
@media (max-width:900px) { .rowedit.limit, .rowedit.source, .rowedit.esc { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .rowedit .rm { justify-self:end; } }
.empty-rows { color:var(--faint); font-size:14px; padding:6px 2px; }

/* Sticky save bar */
.savebar { position:sticky; bottom:0; z-index:4; margin:20px -32px -64px; padding:12px 32px; display:flex; gap:10px; align-items:center;
  background:var(--glass); -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px); box-shadow:0 -1px 0 var(--line); }
@media (max-width:900px) { .savebar { margin:20px -16px -56px; padding:12px 16px; } }

/* ---------- buttons (website .fp-btn) ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:100px; padding:11px 20px; font:700 14.5px/18px var(--sans);
  border:1px solid transparent; cursor:pointer; background:var(--accent-fill); color:#fff; text-decoration:none; white-space:nowrap;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1),background-color .2s; }
.btn:hover { transform:scale(1.03); }
.btn:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.btn-ghost { background:transparent; color:var(--text); border-color:var(--line-strong); font-weight:500; }
.btn-ghost:hover { background:var(--subtle); }
.btn-danger { background:var(--risk); }
.btn-sm { padding:7px 13px; font-size:13.5px; }
.linkish { background:none; border:0; padding:0; font:500 14px var(--sans); color:var(--accent-2); cursor:pointer; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }
.rm { background:none; border:1px solid var(--line-strong); border-radius:8px; width:34px; height:34px; cursor:pointer; color:var(--muted); font-size:15px; }
.rm:hover { color:var(--risk); border-color:var(--risk); }
.err { color:var(--risk); margin:0; font-size:14px; }
.err:empty { display:none; }

/* ---------- tabs (website .fp-links) ---------- */
.tabs { display:inline-flex; gap:2px; padding:4px; border-radius:100px; background:var(--glass); box-shadow:var(--glass-shadow); margin-bottom:18px; flex-wrap:wrap; }
.tab { border:0; background:none; padding:8px 16px; border-radius:100px; font:500 14.5px/18px var(--sans); color:var(--muted); cursor:pointer; text-decoration:none; }
.tab:hover { color:var(--text); }
.tab[aria-selected="true"] { background:var(--surface); color:var(--text); box-shadow:0 1px 3px rgba(11,15,26,.1); }

/* ---------- history ---------- */
.timeline { list-style:none; margin:0; padding:0; }
.timeline li { position:relative; padding:0 0 16px 22px; border-left:2px solid var(--line); margin-left:6px; }
.timeline li::before { content:""; position:absolute; left:-6px; top:4px; width:10px; height:10px; border-radius:50%; background:var(--accent); }
.timeline li:last-child { border-left-color:transparent; }
.timeline .when { font-size:12.5px; color:var(--faint); }
.change { font-size:13.5px; margin-top:4px; }
.change .from { color:var(--faint); text-decoration:line-through; }
.change .to { color:var(--text); }

/* ---------- skeletons, toasts, dialog ---------- */
.skel { border-radius:10px; background:linear-gradient(90deg,var(--subtle),var(--line),var(--subtle)); background-size:200% 100%; animation:sk 1.2s infinite linear; }
@keyframes sk { from { background-position:200% 0; } to { background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce) { .skel { animation:none; } .btn, .sidebar { transition:none; } }
.toasts { position:fixed; right:20px; bottom:20px; z-index:100; display:flex; flex-direction:column; gap:8px; max-width:min(420px,calc(100vw - 40px)); }
.toast { background:var(--inverse); color:var(--on-inverse); padding:12px 16px; border-radius:12px; font-size:14px; box-shadow:0 10px 30px rgba(0,0,0,.25); animation:in .2s ease; }
.toast.bad { background:var(--risk); color:#fff; }
@keyframes in { from { transform:translateY(8px); opacity:0; } }
.dialog { border:0; border-radius:20px; padding:0; width:min(480px,calc(100vw - 32px)); background:var(--surface); color:var(--text); box-shadow:0 30px 80px rgba(0,0,0,.35); }
.dialog::backdrop { background:rgba(7,9,15,.5); }
.dialog .dbody { padding:24px; }
.dialog .dfoot { display:flex; justify-content:flex-end; gap:8px; padding:14px 24px 20px; }
.dialog.wide { width:min(860px,calc(100vw - 32px)); }

/* ---------- empty state / onboarding ---------- */
.hero { padding:28px; border-radius:24px; background:radial-gradient(1200px 300px at 0% 0%,var(--accent-tint),transparent),var(--surface); border:1px solid var(--line); }
.hero h1 { font-size:clamp(28px,3vw,40px); }
.steps { counter-reset:s; list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px; }
.steps li { counter-increment:s; display:flex; gap:14px; align-items:center; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--surface); }
.steps li::before { content:counter(s); flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:13px; background:var(--accent-tint); color:var(--accent-2); }
.steps li.done::before { content:"✓"; background:var(--accent-fill); color:#fff; }
.steps li .grow b { font-weight:500; display:block; }
.tpl { display:flex; flex-direction:column; gap:6px; text-align:left; border:1px solid var(--line-strong); border-radius:14px; padding:14px 16px; background:var(--surface); cursor:pointer; color:var(--text); font:inherit; }
.tpl:hover { border-color:var(--accent); background:var(--accent-tint); }
.tpl b { font-weight:500; }
.tpl .cat { font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-3); font-weight:500; }
.tpl span { color:var(--muted); font-size:13.5px; }
.copy-row { display:flex; gap:8px; align-items:center; }
.copy { flex:1; min-width:0; font-family:var(--mono); font-size:12.5px; }
dl.kv { display:grid; grid-template-columns:150px 1fr; gap:8px 14px; margin:0; font-size:14.5px; }
dl.kv dt { color:var(--muted); }
dl.kv dd { margin:0; min-width:0; overflow-wrap:anywhere; }
@media (max-width:600px) { dl.kv { grid-template-columns:1fr; gap:2px; } dl.kv dd { margin-bottom:8px; } }

/* Deep-linked editor sections clear the sticky top bar. */
section[id^="sec-"] { scroll-margin-top:84px; }

/* Template limits awaiting confirmation. */
.confirm-limits { margin-top:14px; padding:12px 14px; border:1px solid var(--line-strong); border-radius:12px; background:var(--subtle); align-items:flex-start; gap:10px; font-size:14px; line-height:1.45; }
.confirm-limits input { margin-top:3px; flex:none; }

/* ---------- v0.6: sign-up, two-step, find agents, billing, settings ---------- */
.providers { --gap:8px; }
.btn-provider { width:100%; justify-content:center; }
.prov-ico { width:16px; height:16px; display:inline-grid; place-items:center; font:700 12px var(--sans); }
/* Microsoft's four squares, drawn so no third-party asset is loaded. */
.prov-ico.ms { background:linear-gradient(90deg,#F25022 0 46%,transparent 46% 54%,#7FBA00 54%) top/100% 46% no-repeat,
  linear-gradient(90deg,#00A4EF 0 46%,transparent 46% 54%,#FFB900 54%) bottom/100% 46% no-repeat; }
.prov-ico.gg { border-radius:50%; box-shadow:inset 0 0 0 1.5px var(--line-strong); color:var(--accent-2); }
.or { display:flex; align-items:center; gap:10px; color:var(--faint); font-size:12.5px; margin:4px 0 !important; }
.or::before, .or::after { content:""; flex:1; height:1px; background:var(--line); }
.code-input { font:500 22px/1 var(--mono); letter-spacing:.18em; max-width:220px; }
.qr { margin:10px 0; } .qr img { border-radius:10px; background:#fff; padding:6px; display:block; }
code.secret { display:inline-block; font:500 14px var(--mono); padding:6px 10px; background:var(--subtle); border-radius:8px; word-break:break-all; }
pre.codes { font:500 15px/1.7 var(--mono); padding:12px 16px; margin:0; background:var(--subtle); border-radius:12px; columns:2; }
.setup-steps { margin:0; padding-left:20px; } .setup-steps li + li { margin-top:10px; }
.nav-plan { display:flex; flex-direction:column; margin:14px 4px 0; padding:10px 12px; border-radius:12px; background:var(--accent-tint);
  text-decoration:none; color:var(--text); font-size:13px; }
.nav-plan b { font-weight:500; } .nav-plan span { color:var(--accent-2); font-size:12.5px; }
.meter { height:10px; border-radius:100px; background:var(--subtle); overflow:hidden; box-shadow:inset 0 0 0 1px var(--line); }
.meter span { display:block; height:100%; background:var(--accent-fill); }
.disc-list { list-style:none; margin:0; padding:4px 20px; }
.disc { display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.disc:last-child { border:0; }
.disc b { font-weight:500; }
.disc .advice { display:block; color:var(--muted); font-size:13px; margin-top:2px; }
.facts { margin:6px 0 0; padding-left:18px; font-size:13px; color:var(--muted); }
.mono-sm { font:500 13px var(--mono); overflow-wrap:anywhere; }
.toast-link { color:inherit; font-weight:700; }
.due { font-size:12.5px; } .due.over { color:var(--risk); font-weight:500; }
.attention li .what b { font-weight:500; }
.rowedit.action { grid-template-columns:minmax(0,2fr) minmax(0,1.3fr) auto; }
.rowedit.outcome { grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr) auto; }
@media (max-width:760px) { .rowedit.action, .rowedit.outcome { grid-template-columns:1fr; } pre.codes { columns:1; } }

/* Checkbox choice cards (setup guide) show their state like radio cards do. */
.choice:has(input[type=checkbox]) { padding-left:42px; }
.choice:has(input[type=checkbox])::before { content:""; position:absolute; left:14px; top:14px; width:18px; height:18px; border-radius:6px;
  box-shadow:inset 0 0 0 1.5px var(--line-strong); background:var(--surface); }
.choice:has(input[type=checkbox]:checked)::before { content:"✓"; background:var(--accent-fill); color:#fff; box-shadow:none;
  display:grid; place-items:center; font:700 12px/1 var(--sans); }

/* Legal pages (/terms, /privacy). */
#main.legal { max-width:720px; margin:0 auto; padding:24px 28px 64px; line-height:1.6; }
.legal h1 { margin:.2rem 0 .3rem; }
.legal h2 { font-size:1.1rem; margin:2rem 0 .5rem; }
.legal ul { padding-left:1.2rem; }
.legal li { margin:.3rem 0; }
.legal a { color:var(--accent); }
.legal-links { margin-top:2.5rem; padding-top:1rem; border-top:1px solid var(--line); }
.public-foot { text-align:center; padding:24px; font-size:.875rem; color:var(--muted); }
.public-foot a { color:inherit; }

/* AI assistant. */
.ai-spark { color:var(--accent); }
.btn-ai .ai-spark { margin-right:2px; }
.ai-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.ai-row[hidden], .ai-hint[hidden], .briefing[hidden] { display:none; }
.ai-panel { border-color:var(--accent-ring); background:var(--accent-tint); }
.ai-verdict { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; margin-top:4px; }
.pill-ai { background:var(--accent-tint); color:var(--accent-2); }
.pill-risk { background:var(--risk-tint); color:var(--risk); }
.briefing { border-color:var(--accent-ring); }
.briefing-head { font-size:1.05rem; font-weight:500; margin:6px 0 0; }
.briefing-next { margin:10px 0 0; padding-left:1.2rem; }
.briefing-next li { margin:3px 0; }
.insurer-qs { padding-left:1.2rem; margin:0; }
.insurer-qs li { margin:0 0 14px; display:flex; flex-direction:column; gap:4px; }
.insurer-qs textarea { width:100%; margin-top:4px; }
.spinner { display:inline-block; width:12px; height:12px; border:2px solid var(--line-strong); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; vertical-align:-1px; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { .spinner { animation-duration:2.4s; } }