/* Aware: the shared design system, served at /static/aware.css (source: src/web/assets/aware.css).
   Nekyia "The Descent": one dark world by choice. The window is the only loud moment on any page.
   Fonts are linked from the page head by src/web/layout.ts (Google Fonts only).
   Type: Cinzel for the wordmark only. Cormorant Garamond for display at 24px and up, italic oxblood-lit for emphasis.
   IBM Plex Sans for body. JetBrains Mono for kickers, labels, times and code. */

:root {
  color-scheme: dark;
  --obsidian: #0C0A0A;
  --ink: #161211;
  --ink-2: #1d1716;
  --bone: #F5F2EB;
  --bone-dim: rgba(245,242,235,.68);
  --bone-faint: rgba(245,242,235,.42);
  --line: rgba(232,220,195,.2);
  --line-strong: rgba(232,220,195,.5);
  --gold: #B6934D;
  --oxblood: #CF6B6B;
  --oxblood-lit: #E8B4AE;
  --door: #7A2226;
  --deep: #5E1A1D;
  --glow: #D9A35A;
  --ok: #8FB08A;          /* semantic only: a check that went green */
  --f-display: "Cormorant Garamond", Georgia, serif;
  --f-body: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --f-mark: "Cinzel", Georgia, serif;
  --radius: 6px;
  --side: 240px;
}

* { box-sizing: border-box; }
html { background: var(--obsidian); }
body {
  margin: 0; background: var(--obsidian); color: var(--bone);
  font: 300 17px/1.6 var(--f-body);
  background-image: radial-gradient(ellipse 90% 60% at 50% 100%, var(--ground-warm, #2a1213), #150c0c 40%, transparent 75%);
  background-attachment: fixed;
  min-height: 100vh;
}
a { color: var(--oxblood-lit); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--oxblood-lit); outline-offset: 3px; }
img, svg, canvas { max-width: 100%; }
h1, h2, h3 { text-wrap: balance; }
p { margin: 0; }

/* ---------- Type ---------- */
.kicker { font: 500 11px/1.4 var(--f-mono); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.label { font: 500 11px/1.4 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0; }
.mono { font-family: var(--f-mono); }
.h-xl { font: 400 clamp(40px, 6.4vw, 70px)/1.03 var(--f-display); margin: 0; }
.h-lg { font: 400 clamp(32px, 4.6vw, 44px)/1.1 var(--f-display); margin: 0; }
.h-md { font: 400 clamp(26px, 3.4vw, 32px)/1.15 var(--f-display); margin: 0; }
.h-xl em, .h-lg em, .h-md em { font-style: italic; color: var(--oxblood-lit); }
.lede { color: var(--bone-dim); max-width: 62ch; }
.dim { color: var(--bone-dim); }
.faint { color: var(--bone-faint); }
.note { font: 400 11px/1.55 var(--f-mono); letter-spacing: .06em; color: var(--bone-faint); }
.quote { font: italic 400 19px/1.35 var(--f-display); color: var(--oxblood-lit); }
code, .code { font: 400 13px/1.5 var(--f-mono); color: var(--oxblood-lit); }
time, .num { font-variant-numeric: tabular-nums; }

/* The dotted wire that heads a section: label centred between two dotted rules */
.wire { display: flex; align-items: center; gap: 12px; font: 400 10.5px/1 var(--f-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--bone-faint); }
.wire::before, .wire::after { content: ""; flex: 1; border-top: 1px dotted var(--line); }
hr, .rule { border: 0; border-top: 1px dotted var(--line); margin: 0; }

/* ---------- Buttons and pills ---------- */
.btn {
  font: 500 11px/1 var(--f-mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--bone); background: transparent; border: 1px solid var(--line-strong);
  padding: 11px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
}
.btn:hover { border-color: var(--bone-dim); }
.btn.primary, .btn[aria-pressed="true"] { background: var(--door); border-color: var(--door); }
.btn.primary:hover { background: var(--deep); }
.btn.danger { border-color: var(--oxblood); color: var(--oxblood-lit); }
.btn.danger.solid { background: var(--oxblood); border-color: var(--oxblood); color: var(--obsidian); }
.btn.quiet { border-color: transparent; color: var(--bone-dim); padding-inline: 8px; }
.btn.quiet:hover { color: var(--bone); }
.btn.wide { width: 100%; justify-content: center; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.pill { font: 500 10px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; border: 1px solid var(--line-strong); color: var(--bone-dim); border-radius: 999px; padding: 5px 8px; white-space: nowrap; display: inline-block; }
.pill.gold { color: var(--gold); border-color: var(--gold); }       /* Locked */
.pill.red { color: var(--oxblood-lit); border-color: var(--oxblood); } /* Leaving, failing, asked */
.pill.ok { color: var(--ok); border-color: var(--ok); }               /* Verified, ok */
.pill.solid { background: var(--door); border-color: var(--door); color: var(--bone); }

/* ---------- Forms ---------- */
.field { display: grid; gap: 6px; }
.field > span { font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--bone-faint); }
.input, select, textarea {
  font: 400 16px/1.4 var(--f-body); color: var(--bone); background: rgba(22,18,17,.8);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 11px 12px; width: 100%;
}
.input:focus, select:focus, textarea:focus { border-color: var(--line-strong); outline: none; box-shadow: 0 0 0 2px rgba(232,180,174,.25); }
.input::placeholder { color: var(--bone-faint); }
.copyline { display: flex; gap: 8px; align-items: stretch; min-width: 0; }
.copyline code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; color: var(--bone); background: rgba(22,18,17,.8); border: 1px solid var(--line); padding: 11px 12px; border-radius: var(--radius); }

/* Switch: a label.sw holding text then an input[type=checkbox] */
.sw { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 16px; align-items: center; padding: 13px 2px; border-bottom: 1px dotted var(--line); cursor: pointer; }
.sw .t { font-size: 16px; }
.sw .gives { grid-column: 1; font: italic 400 16.5px/1.35 var(--f-display); color: var(--bone-faint); }
.sw:has(input:checked) .gives { color: var(--oxblood-lit); }
.sw input { grid-row: 1 / span 2; grid-column: 2; appearance: none; width: 34px; height: 18px; border-radius: 999px; border: 1px solid var(--line-strong); position: relative; cursor: pointer; background: transparent; margin: 0; }
.sw input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--bone-faint); transition: transform .25s ease, background .25s ease; }
.sw input:checked { border-color: var(--gold); }
.sw input:checked::after { transform: translateX(16px); background: var(--gold); }

/* ---------- Lists: the ledger row is the house's basic unit ---------- */
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger > li { display: grid; grid-template-columns: 4.6em minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 13px 0; border-bottom: 1px dotted var(--line); }
.ledger > li:first-child { border-top: 1px dotted var(--line); }
.ledger time { font: 400 12px var(--f-mono); color: var(--bone-faint); }
.ledger .who { color: var(--oxblood); }
.ledger .via { font: 400 11px var(--f-mono); color: var(--bone-faint); letter-spacing: .06em; }
.ledger .ask { color: var(--oxblood-lit); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: center; padding: 12px 0; border-bottom: 1px dotted var(--line); }
.rows > li:first-child { border-top: 1px dotted var(--line); }
.rows small { display: block; font: 400 11px/1.45 var(--f-mono); letter-spacing: .06em; color: var(--bone-faint); }

/* A table, for admin only */
.table-wrap { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.t th { text-align: left; font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--bone-faint); padding: 10px 12px 10px 0; border-bottom: 1px dotted var(--line-strong); white-space: nowrap; }
table.t td { padding: 11px 12px 11px 0; border-bottom: 1px dotted var(--line); vertical-align: baseline; }
table.t td.num, table.t th.num { text-align: right; }

/* A panel: only where something must stand apart (a form, a consent, a danger zone). Dotted, never a shadow. */
.panel { border: 1px dotted var(--line-strong); padding: 20px; border-radius: 2px; display: grid; gap: 14px; min-width: 0; }
.panel.solid { border-style: solid; border-color: var(--line); background: rgba(22,18,17,.6); }
.panel.danger { border-color: var(--oxblood); }

/* ---------- Modal: <dialog class="modal"> opened with .showModal() ---------- */
dialog.modal { border: 1px solid var(--line-strong); background: var(--ink); color: var(--bone); padding: 26px; width: min(92vw, 480px); border-radius: 4px; }
dialog.modal::backdrop { background: rgba(8,6,6,.78); backdrop-filter: blur(2px); }
dialog.modal h2 { font: 400 28px/1.15 var(--f-display); margin: 0 0 10px; }
dialog.modal h2 em { font-style: italic; color: var(--oxblood-lit); }
dialog.modal .body { display: grid; gap: 14px; color: var(--bone-dim); font-size: 16px; }
dialog.modal .actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 22px; }

/* Toast: a single line that rises at the bottom */
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); transform: translateX(-50%); background: var(--ink-2); border: 1px solid var(--line-strong); padding: 11px 16px; border-radius: 999px; font: 400 12px/1 var(--f-mono); letter-spacing: .1em; color: var(--bone); z-index: 50; }

/* ---------- Public page frame (signed out) ---------- */
.public { padding-inline: 16px; padding-block: 0 40px; }
.public .wrap { max-width: 1120px; margin: 0 auto; display: grid; gap: 72px; }
.public .col { max-width: 760px; width: 100%; margin: 0 auto; display: grid; gap: 22px; }
header.top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 26px; flex-wrap: wrap; }
.mark { font: 500 19px/1 var(--f-mark); letter-spacing: .34em; color: var(--bone); text-decoration: none; }
nav.links { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; font: 400 12px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; }
nav.links a { color: var(--bone-dim); text-decoration: none; }
nav.links a:hover, nav.links a[aria-current="page"] { color: var(--bone); }
nav.links a.signin { color: var(--bone); border: 1px solid var(--line-strong); padding: 9px 14px; border-radius: 999px; }
footer.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px dotted var(--line); padding-top: 18px; color: var(--bone-faint); font: 400 11px/1.8 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; }
footer.foot a { color: var(--bone-dim); text-decoration: none; }
footer.foot nav { display: flex; gap: 18px; flex-wrap: wrap; }

/* ---------- The door (sign in, consent, first run): one narrow column, centred ---------- */
.door { padding-inline: 16px; padding-block: 40px; min-height: 100vh; display: grid; place-items: start center; }
.door .card { width: min(100%, 440px); display: grid; gap: 22px; padding-top: 6vh; }
.door .mark { justify-self: center; }

/* ---------- The app shell (signed in): top bar, sidebar, main ---------- */
.app { display: grid; grid-template-columns: 1fr; min-height: 100vh; align-content: start; }
[hidden] { display: none !important; }
@media (min-width: 900px) { .app { grid-template-columns: var(--side) minmax(0, 1fr); } }
.app-top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px dotted var(--line); position: sticky; top: env(safe-area-inset-top, 0px); background: rgba(12,10,10,.92); backdrop-filter: blur(6px); z-index: 10; }
.app-top .status { display: flex; align-items: center; gap: 10px; font: 400 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-faint); }
.app-top .status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 8px var(--glow); }
.app-top .status.paused .dot { background: var(--bone-faint); box-shadow: none; }
.side { display: none; padding: 24px 14px; border-right: 1px dotted var(--line); }
@media (min-width: 900px) { .side { display: block; position: sticky; top: 62px; height: calc(100vh - 62px); overflow-y: auto; } }
.side nav { display: grid; gap: 2px; }
.side .group { font: 500 10px/1 var(--f-mono); letter-spacing: .26em; text-transform: uppercase; color: var(--bone-faint); margin: 20px 10px 8px; }
.side a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 4px; color: var(--bone-dim); text-decoration: none; font-size: 15px; }
.side a:hover { color: var(--bone); background: rgba(245,242,235,.03); }
.side a[aria-current="page"] { color: var(--bone); background: rgba(122,34,38,.28); box-shadow: inset 2px 0 0 var(--oxblood); }
.side a.sub { padding-left: 24px; font-size: 14px; }
.side .count { font: 500 10px/1 var(--f-mono); color: var(--oxblood-lit); }
.main { padding: 28px 20px 96px; min-width: 0; }
@media (min-width: 900px) { .main { padding: 36px 48px 64px; } }
.main .inner { max-width: 880px; display: grid; gap: 36px; }
.page-head { display: grid; gap: 8px; }
.section { display: grid; gap: 14px; }
/* Phone: the sidebar becomes a bottom bar */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-around; padding: 10px 8px calc(env(safe-area-inset-bottom, 0px) + 10px); background: rgba(12,10,10,.96); border-top: 1px dotted var(--line); z-index: 10; }
.tabbar a { font: 400 10px/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-faint); text-decoration: none; text-align: center; padding: 4px 6px; }
.tabbar a[aria-current="page"] { color: var(--bone); }
@media (min-width: 900px) { .tabbar { display: none; } }

/* ---------- The window (canvas sky). Use with sky.js ---------- */
.window { position: relative; width: min(100%, 420px); aspect-ratio: 4 / 5.4; }
.window canvas, .window svg.frame, .window .curtain { position: absolute; inset: 0; width: 100%; height: 100%; }
.window canvas { clip-path: url(#archClip); }
.window .curtain { pointer-events: none; }
.window .curtain line { stroke: var(--line-strong); stroke-width: 1; vector-effect: non-scaling-stroke; transition: transform 1.6s cubic-bezier(.6,.05,.3,1), opacity 1.2s ease; }
.window.small { width: min(100%, 220px); }
.reading { font: 400 10.5px/1.7 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-faint); text-align: center; text-wrap: balance; }

/* The brief, as the agent reads it */
.brief { display: grid; gap: 7px; font-size: 18.5px; }
.brief .gap { color: var(--bone-dim); }
.brief .watch { color: var(--oxblood-lit); }

/* ---------- Shared pieces that several pages need ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tag { font: 400 11px/1.4 var(--f-mono); letter-spacing: .06em; color: var(--bone-faint); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.head-row { display: flex; justify-content: space-between; align-items: end; gap: 14px; flex-wrap: wrap; }
.group { display: grid; gap: 8px; }
.empty { color: var(--bone-faint); padding: 14px 0; border-top: 1px dotted var(--line); border-bottom: 1px dotted var(--line); }
.example { font: 400 10px/1.4 var(--f-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--bone-faint); border: 1px dotted var(--line); padding: 4px 8px; border-radius: 4px; justify-self: start; }
.field .hint { font: 400 11px/1.5 var(--f-mono); letter-spacing: .04em; text-transform: none; color: var(--bone-faint); }
.snippet { font: 400 13px/1.6 var(--f-mono); color: var(--bone); background: rgba(22,18,17,.8); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.snippet .k { color: var(--oxblood-lit); }
.mono-cell { font: 400 13px/1.5 var(--f-mono); }
table.t td.act { white-space: nowrap; text-align: right; }
table.t td.act .btn { padding: 8px 11px; }
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 16px 24px; padding: 16px 0; border-top: 1px dotted var(--line); border-bottom: 1px dotted var(--line); }
.fig .n { display: block; font: 400 38px/1.05 var(--f-display); color: var(--bone); font-variant-numeric: tabular-nums; }
.fig .l { display: block; margin-top: 4px; font: 500 10.5px/1.4 var(--f-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--bone-faint); }

/* Ledger and row helpers (the desk, agents, places, watches) */
.ledger .what, .rows .what { min-width: 0; overflow-wrap: anywhere; }
.ledger li.undone .what { text-decoration: line-through; text-decoration-color: var(--bone-faint); color: var(--bone-faint); }
.ledger li.undone .who { color: inherit; }
.ledger .act { justify-self: end; }
.rows .title { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.rows .detail { color: var(--bone-dim); font-size: 15px; margin-top: 4px; }
.rows li.struck .title > span:first-child { text-decoration: line-through; color: var(--bone-faint); }
.rows .btn-row { justify-content: flex-end; }
.rows.stack > li { grid-template-columns: minmax(0, 1fr); }
.rows.stack .btn-row { justify-content: flex-start; margin-top: 6px; }
@media (max-width: 560px) {
  .ledger > li { grid-template-columns: 3.4em minmax(0, 1fr); }
  .ledger .act { grid-column: 2; justify-self: start; margin: -8px 0 0 -8px; }
}

/* Radio and checkbox choices (one per line, dotted) */
.choices { border: 0; margin: 0; padding: 0; display: grid; min-width: 0; }
.choice { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 2px 10px; padding: 12px 0; border-bottom: 1px dotted var(--line); cursor: pointer; color: var(--bone); }
.choice:first-of-type { border-top: 1px dotted var(--line); }
.choice input { grid-row: 1 / span 2; accent-color: var(--oxblood); margin: 3px 0 0; }
.choice small { grid-column: 2; font: 400 11px/1.45 var(--f-mono); letter-spacing: .06em; color: var(--bone-faint); }

/* Connect panel: the app tabs and their steps (front page, Connect) */
.apps { display: flex; flex-wrap: wrap; gap: 8px; }
.howto { border: 1px dotted var(--line-strong); padding: 16px 18px; display: grid; gap: 12px; min-width: 0; }
.howto ol { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; color: var(--bone-dim); font-size: 15.5px; }
.howto ol strong { color: var(--bone); font-weight: 400; }

/* Public frame: reading pages (privacy, terms, docs) */
.plain { list-style: none; margin: 0; padding: 0; border-top: 1px dotted var(--line); }
.plain li { padding: 7px 0; border-bottom: 1px dotted var(--line); font-size: 15.5px; color: var(--bone-dim); }
.legal { display: grid; gap: 44px; padding-top: 24px; }
.legal section { display: grid; gap: 14px; }
.legal p, .legal li { color: var(--bone-dim); }
.legal ul.plain { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; border-top: 0; }
.legal ul.plain li { padding: 0 0 0 1.1em; position: relative; border-bottom: 0; }
.legal ul.plain li::before { content: ""; position: absolute; left: 0; top: .72em; width: 5px; border-top: 1px solid var(--gold); }

/* The door: heads, provider buttons, fine print */
.door { padding-bottom: 72px; }
.door .window { justify-self: center; }
.head { display: grid; gap: 14px; text-align: center; justify-items: center; }
.head .h-lg { max-width: 18ch; }
.head .h-md { max-width: 22ch; }
.head .lede { max-width: 38ch; }
.actions { display: grid; gap: 6px; justify-items: center; }
.providers { display: grid; gap: 10px; }
.providers .btn { padding: 15px 16px; font-size: 12px; gap: 12px; }
.providers svg { width: 18px; height: 18px; flex: none; }
.fine { text-align: center; display: grid; gap: 6px; }
.fine a { color: var(--bone-dim); }


/* ---------- Wide app pages (the window) ---------- */
.main .inner.wide { max-width: 1040px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}