/* Rook web, "Signal" identity (docs/design/IDENTITY.md), for every app page (/account, /login, /i/*, /status, 404, /connect/*),
   layered on app.css (structure). Monochrome, Figtree text, Bricolage Grotesque headlines. iMessage blue stays Apple's.
   THEME: light tokens live on @font-face{font-family:"Bricolage Grotesque";src:url(/f/bricolage-latin-wght.a97804dc.woff2) format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url(/f/figtree-latin-wght.4ba7d3d0.woff2) format("woff2");font-weight:300 900;font-style:normal;font-display:swap}
:root, the full dark set on [data-theme=dark] AFTER them in this file, so the attribute wins. */

/* ---------------- tokens ---------------- */
:root{
  --f-text:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --f-display:"Bricolage Grotesque","Figtree",-apple-system,Arial,sans-serif;
  --f-mono:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --f-ios:var(--f-text);
  --bg:#F3F4F6;--page:#F3F4F6;--surface:#FFFFFF;--surface-2:#F7F8FA;--surface-3:#ECEEF1;
  --fill:rgba(14,17,22,.055);--fill-2:rgba(14,17,22,.1);
  --ink:#0E1116;--ink-2:#4B525D;--ink-3:#6A717C;--ink-4:#A3A9B2;--on-ink:#FFFFFF;
  --hair:#E2E5EA;--hair-2:#CDD2D9;--sep:#E8EBEF;
  --accent:#0E1116;--accent-press:#2A2F37;--accent-soft:rgba(14,17,22,.08);--accent-text:#0E1116;
  --sig:#0E1116;--sig-ink:#FFFFFF;--dot:#0E1116;
  --brand:var(--accent);--brand-soft:var(--accent-soft);--brand-ink:var(--accent-text);
  --ok:#1F9D63;--ok-text:#17774B;--warn:#B7791F;--warn-text:#8A5A12;--danger:#D92D20;--danger-text:#B42318;
  --rk-bubble:#E9E9EB;--rk-ink:#000000;--me-bubble:#007AFF;
  --stage:#F3F4F6;
  --card-ring:1px solid var(--hair);
  --card-shadow:0 1px 2px rgba(14,17,22,.04);
  --lift:0 0 0 1px var(--hair);
  --lift-2:0 12px 40px -14px rgba(14,17,22,.18),0 0 0 1px var(--hair);
  --bar:rgba(243,244,246,.86);--bar-grouped:rgba(243,244,246,.86);
  --scrim:rgba(8,10,13,.42);
  --skel:rgba(14,17,22,.06);--skel-hi:rgba(14,17,22,.11);
  --seg-bg:rgba(14,17,22,.06);--seg-pill:#FFFFFF;--seg-shadow:0 0 0 1px rgba(14,17,22,.06),0 2px 6px rgba(14,17,22,.06);
  --knob:#FFFFFF;
  --paper-img:none;
  color-scheme:light;
}
[data-theme=dark]{
  --bg:#0B0D10;--page:#0B0D10;--surface:#111419;--surface-2:#171B22;--surface-3:#1E232C;
  --fill:rgba(236,238,241,.06);--fill-2:rgba(236,238,241,.11);
  --ink:#ECEEF1;--ink-2:#A9AFB9;--ink-3:#8A919C;--ink-4:#5B626D;--on-ink:#0B0D10;
  --hair:#262C36;--hair-2:#323946;--sep:#20252E;
  --accent:#ECEEF1;--accent-press:#FFFFFF;--accent-soft:rgba(236,238,241,.1);--accent-text:#ECEEF1;
  --sig:#ECEEF1;--sig-ink:#0B0D10;--dot:#ECEEF1;
  --ok:#5FD39A;--ok-text:#5FD39A;--warn:#E0A548;--warn-text:#E9B866;--danger:#FF6B5E;--danger-text:#FF8A80;
  --rk-bubble:#26262B;--rk-ink:#F2F2F4;--me-bubble:#0A84FF;
  --stage:#0B0D10;
  --card-shadow:none;
  --lift-2:0 18px 44px -16px rgba(0,0,0,.8),0 0 0 1px var(--hair);
  --bar:rgba(11,13,16,.86);--bar-grouped:rgba(11,13,16,.86);
  --scrim:rgba(0,0,0,.6);
  --skel:rgba(236,238,241,.06);--skel-hi:rgba(236,238,241,.12);
  --seg-bg:rgba(236,238,241,.07);--seg-pill:#262C36;--seg-shadow:0 0 0 1px rgba(255,255,255,.05),0 2px 6px rgba(0,0,0,.35);
  --knob:#ECEEF1;
  --paper-img:none;
  color-scheme:dark;
}

/* ---------------- base ---------------- */
html{background:var(--bg)}
body,body.page,.page-connect{font-family:var(--f-text);font-size:16px;line-height:1.45;letter-spacing:-.006em;color:var(--ink);background:var(--bg) var(--paper-img) repeat;background-size:512px}
a{color:var(--accent-text)}
.title,.display,.h2{font-family:var(--f-display);font-weight:600}
.title{font-size:34px;line-height:1.04;letter-spacing:-.04em}
.h2{letter-spacing:-.03em}
.lede{font-size:15px;line-height:1.38;font-weight:500;color:var(--ink-2);letter-spacing:-.005em}
.fine{font-size:13px;color:var(--ink-3)}
.eyebrow{font-size:13px;font-weight:500;color:var(--ink-3);letter-spacing:0}
.eyebrow .live{background:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent-soft)}

/* brand */
.wordmark{font-family:var(--f-display);font-weight:650;font-size:19px;letter-spacing:-.035em;color:var(--ink)}
.wordmark .mark,.mark{color:var(--ink)}

/* ---------------- buttons: v7 pills ---------------- */
.btn{border-radius:14px;font-weight:500;font-size:16px;letter-spacing:-.006em;color:var(--ink)}
.btn.sm{min-height:34px;padding:0 15px;border-radius:12px;font-size:14px}
.btn.big{min-height:52px;border-radius:16px;font-size:16.5px}
.btn.primary{color:var(--on-ink);background:var(--ink);box-shadow:none}
.btn.primary:active{opacity:.85}
@media (hover:hover){.btn.primary:hover{opacity:.9}.btn.soft:hover{background:var(--fill-2)}}
.btn.soft,.btn.line{color:var(--ink);background:var(--fill);box-shadow:inset 0 0 0 1px var(--hair)}
.btn.soft:active,.btn.line:active{filter:brightness(.96)}
.btn.ultra,.btn.accent{color:var(--sig-ink);background:var(--sig);box-shadow:none}
.btn.ultra:active,.btn.accent:active{background:var(--accent-press)}
@media (hover:hover){.btn.ultra:hover{filter:brightness(1.08)}}
.btn.text,.link{color:var(--accent-text);font-weight:500}
[data-theme=dark] .btn.primary{color:var(--on-ink);background:var(--ink);box-shadow:none}
[data-theme=dark] .btn.primary:active{filter:brightness(.92)}
[data-theme=dark] .btn.soft,[data-theme=dark] .btn.line{color:var(--ink);background:var(--fill);box-shadow:inset 0 0 0 1px var(--hair)}


/* ---------------- fields ---------------- */
.field{min-height:50px;border-radius:14px;background-color:var(--surface);box-shadow:inset 0 0 0 1px var(--hair-2);font-size:16px;font-weight:500}
[data-theme=dark] .field{background-color:var(--surface-2);box-shadow:inset 0 0 0 1px var(--hair-2)}
.field:focus{box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 4px var(--accent-soft)}
.field::placeholder{color:var(--ink-4);font-weight:400}
select.field{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23908B84' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");background-size:15px;background-position:right 11px center}
/* a row's picker: a cream pill, not a bare iOS value */
select.field.bare{min-height:34px;border-radius:999px;padding:0 30px 0 13px;font-size:14.5px;font-weight:500;color:var(--ink);background-color:var(--fill);box-shadow:none;text-align:left;text-align-last:left;background-position:right 10px center;background-size:13px}
select.field.bare:disabled{opacity:.45}
.label{text-transform:none;font-size:13px;font-weight:500;color:var(--ink-3);margin:0 2px 8px}
.search .field{min-height:44px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hair-2);font-size:16px;padding-left:40px}
.search svg{left:15px}
[data-theme=dark] .search .field{background-color:var(--surface)}
.search .field:focus{box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 4px var(--accent-soft)}
.err{color:var(--danger-text);font-size:14px}

/* ---------------- segmented control: the v7 pill (as on the marketing plans) ---------------- */
.seg{padding:3px;border-radius:999px;background:var(--seg-bg);box-shadow:inset 0 0 0 1px rgba(0,0,0,.03)}
[data-theme=dark] .seg{box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.seg::before{top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / var(--n,3));border-radius:999px!important;background:var(--seg-pill);box-shadow:var(--seg-shadow);transition:transform .35s cubic-bezier(.2,.7,.2,1)}
[data-theme=dark] .seg::before{background:var(--seg-pill);box-shadow:var(--seg-shadow)}
.seg button{min-height:34px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink-3);transition:color .2s}
.seg button[aria-pressed=true]{color:var(--ink);font-weight:600}
.seg button:active{opacity:.7}
.seg.lg::before{border-radius:999px!important}
.seg.lg button{min-height:38px;font-size:15px;border-radius:999px}

/* ---------------- switch: Rook's own (signal track, white knob) ---------------- */
.switch{width:48px;height:28px;background:var(--fill-2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.switch::after{top:3px;left:3px;width:22px;height:22px;background:var(--knob);box-shadow:0 1px 2px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.08)}
.switch:active::after{width:26px}
.switch[aria-checked=true]{background:var(--accent);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.switch[aria-checked=true]::after{transform:translateX(20px)}
.switch[aria-checked=true]:active::after{transform:translateX(16px)}

/* ---------------- cards + rows (not iOS grouped lists) ---------------- */
.group{border-radius:22px;background:var(--surface);border:var(--card-ring);box-shadow:var(--card-shadow)}
.group-label{text-transform:none;font-size:13.5px;font-weight:500;color:var(--ink-3);letter-spacing:-.003em;margin:30px 4px 9px}
.group-label:first-child{margin-top:4px}
.group-foot{font-size:13px;color:var(--ink-3);margin:9px 4px 0}
.row{min-height:52px;padding:12px 18px;gap:12px}
.row + .row::before,.row + .rowwrap::before{left:18px;right:18px;height:1px;background:var(--sep)}
.row.has-logo + .row::before,.row + .row.has-logo::before{left:70px}
.row .t{font-size:16px;font-weight:500;letter-spacing:-.008em;line-height:1.3}
.row .s{font-size:13.5px;color:var(--ink-3);line-height:1.35;margin-top:2px}
.row .v{font-size:15px;color:var(--ink-2);font-weight:500}
.row.tap:active,[data-theme=dark] .row.tap:active{background:var(--fill)}
.row .chev{color:var(--ink-4)}
.row.danger .t{color:var(--danger-text)}
.badge{font-weight:500;background:var(--fill);color:var(--ink-2)}
.badge.ok{color:var(--ink);background:var(--fill)}
.badge.ok .dot{background:var(--accent)}
.badge.ok{color:var(--ink)}
.kbd{color:var(--ink)}
.banner{border-radius:18px;background:var(--surface);border:var(--card-ring);color:var(--ink-2);font-size:14.5px}
.banner.warn{box-shadow:inset 3px 0 0 var(--accent)}
.sign{color:var(--ink-4)}

/* ---------------- app shell ---------------- */
.head{padding:calc(env(safe-area-inset-top) + 28px) 0 16px}
.head .lede{font-size:15px;margin-top:6px;max-width:36ch}
/* tab bar: translucent bar, hairline, Rook glyphs; ink when active */
.tabs{background:var(--bar);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 -1px 0 var(--hair)}
body:not([data-tab=chat]) .tabs{background:var(--bar-grouped)}
.tabs a{font-size:10.5px;font-weight:500;color:var(--ink-3);letter-spacing:0;padding-top:7px;gap:3px}
.tabs a svg{width:25px;height:25px}
.tabs a[aria-current=page]{color:var(--accent)}
/* toast + sheet */
.toast{background:var(--ink);color:var(--on-ink);font-weight:500;font-size:14.5px;-webkit-backdrop-filter:none;backdrop-filter:none}
[data-theme=dark] .toast{background:var(--ink)}
.sheet{border-radius:26px 26px 0 0;background:var(--surface);box-shadow:0 -10px 40px -10px rgba(0,0,0,.25);border-top:1px solid var(--hair)}
[data-theme=dark] .sheet{background:var(--surface)}
.sheet .grab{background:var(--hair-2)}
.sheet .btn.danger-fill{background:var(--danger);color:#fff;box-shadow:inset 0 0 0 1.25px rgba(0,0,0,.12)}

/* ---------------- chat: iMessage-blue bubbles in Rook's type ---------------- */
body[data-tab=chat],.view[data-view=chat].on{background:var(--page)}
.chat-head{background:var(--bar);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--hair)}
.chat-head .who{font-size:12.5px;font-weight:600;background:var(--fill);padding:3px 7px 3px 10px}
.chat-head .st{font-size:11.5px;color:var(--ink-3)}
.chat-head .st.typing{color:var(--accent-text)}
.b{font-family:var(--f-text);font-size:16px;line-height:1.32;letter-spacing:-.006em;font-weight:500}
.b.rk{background:var(--rk-bubble);color:var(--rk-ink)}
.b.me{background:var(--me-bubble);color:#fff}
.b.rk a{color:var(--accent-text)}
.receipt,.stamp{font-family:var(--f-text);color:var(--ink-3)}
.typing{background:var(--rk-bubble)}
.typing::after{background:var(--rk-bubble)}
.typing i{background:var(--ink-3)}
.chip{background:var(--surface);box-shadow:inset 0 0 0 1px var(--hair-2);color:var(--ink);font-weight:500;font-size:14.5px}
.composer{font-family:var(--f-text);background:var(--page)}
.composer-inner{background:var(--surface);box-shadow:inset 0 0 0 1px var(--hair-2);border-radius:22px}
.composer textarea{font-size:16px}
.send{background:var(--me-bubble)}
.send:active{background:var(--me-bubble);filter:brightness(.88)}
.chat-err{background:var(--surface);border:var(--card-ring);border-radius:22px}

/* ---------------- plan ---------------- */
.plan-head{padding-bottom:12px}
.plan-pick{margin:4px 0 14px}
.plan-card{padding:20px 20px 18px;position:relative}
.plan-card + .plan-card{margin-top:12px}
.plan-card.ultra-card{border-color:var(--ink);box-shadow:none}

.plan-card .pc-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.plan-card .pc-name{font-weight:600;font-size:21px;letter-spacing:-.03em}
.plan-card.ultra-card .pc-name{color:var(--accent-text)}
.plan-card .pc-tag{font-size:13.5px;color:var(--ink-3);margin-top:1px;line-height:1.35}
.plan-card .price-wrap{margin:12px 0 2px;min-height:0;align-items:baseline;gap:6px}
.plan-card .price{font-family:var(--f-mono);font-weight:500;font-size:44px;letter-spacing:-.04em}
.plan-card .per{font-size:15px;font-weight:500;color:var(--ink-3);padding-bottom:0}
.plan-card .price-sub{font-size:13.5px;color:var(--ink-3);min-height:19px}
.plan-card .btn.big{margin-top:16px}
.sticker{background:var(--accent-soft);color:var(--accent-text);font-weight:600;font-size:12.5px;padding:4px 10px}
.compare{margin-top:22px;padding:4px 0}
.cmp{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,62px);align-items:center;column-gap:4px;padding:11px 16px;position:relative}
.cmp + .cmp::before{content:"";position:absolute;top:0;left:16px;right:16px;height:1px;background:var(--sep)}
.cmp .k{font-size:14.5px;font-weight:500;line-height:1.3;color:var(--ink)}
.cmp .c{text-align:center;font-size:12.5px;font-weight:500;line-height:1.25;color:var(--ink-2)}
.cmp .c svg{width:17px;height:17px;margin:0 auto;color:var(--ink)}
.cmp .c.u svg{color:var(--accent)}
.cmp .no{color:var(--ink-4)}
.cmp.hdr{padding-top:12px;padding-bottom:10px}
.cmp.hdr .c{font-size:12.5px;font-weight:600;color:var(--ink-3);letter-spacing:.01em}
.cmp.hdr .c.u{color:var(--accent-text)}
.cmp.hdr .c.p{color:var(--ink)}
.plan-fine{text-align:center;margin:14px 0 0}
.admin-note{margin:26px 4px 0;text-align:center;font-size:12px;color:var(--ink-4)}
.success .ic{background:var(--accent)}
.usage .big b{font-family:var(--f-display);font-weight:500}
.meter i{background:var(--accent)}

/* ---------------- apps ---------------- */
.apps-search{background:transparent}
.apps-search.stuck{background:var(--bar-grouped);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--hair)}
.logo{border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.logo .on-badge{background:var(--accent);box-shadow:0 0 0 2px var(--surface)}
.conn-btn.primary{color:var(--ink);background:var(--fill);box-shadow:inset 0 0 0 1px var(--hair-2)}

.conn-btn.done svg{color:var(--accent)}
.conn-btn.arm{background:var(--danger)}
.soon-pill{font-weight:500;color:var(--ink-3);background:var(--fill)}

/* ---------------- single-column pages: login, invite, 404, status, connect ---------------- */
.auth-foot{color:var(--ink-3)}
.login-av span{font-weight:600;background:var(--fill)}
.login-av small{color:var(--ink-3)}
.otp .cell{border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--hair-2);font-family:var(--f-text);font-weight:600}
[data-theme=dark] .otp .cell{background-color:var(--surface-2)}
.otp .cell.on{box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 4px var(--accent-soft)}
.otp.bad .cell{box-shadow:inset 0 0 0 1.5px var(--danger)}
.phone{grid-template-columns:104px 1fr}
.checks{background:var(--surface);border:var(--card-ring);box-shadow:var(--card-shadow);border-radius:22px;padding:18px}
[data-theme=dark] .checks{background:var(--surface)}
.checks li{font-size:14.5px;font-weight:500;color:var(--ink-2)}
.checks li svg{color:var(--accent)}
.connect-pair .tile{border-radius:22px;box-shadow:0 0 0 1px var(--hair),0 8px 24px -10px rgba(0,0,0,.18)}
.connect-pair .tile.rk{background:#0E1116}
[data-theme=dark] .connect-pair .tile.rk{background:#ECEEF1;color:#0B0D10}
[data-theme=dark] .connect-pair .tile.rk svg,[data-theme=dark] .connect-pair .tile.rk .mark{color:#0B0D10}
.connect-pair.linked .dots i{background:var(--accent)}
.done-ic{background:var(--accent)}
.status-row{font-size:16px;font-weight:500;min-height:52px;padding:0 18px}
.status-row + .status-row::before{left:18px;right:18px;height:1px;background:var(--sep)}
.pill-ok{color:var(--ink-2)}
.pill-ok .dot{background:var(--ok)}
.pill-bad{color:var(--accent-text)}
.board{border-radius:22px;box-shadow:0 0 0 1px var(--hair)}
/* a closed sheet is fully gone (no peeking on iOS rubber-band or tall viewports) */
.sheet{visibility:hidden;transition:transform .45s var(--ease-out),visibility 0s linear .45s}
.sheet.on{visibility:visible;transition:transform .45s var(--ease-out),visibility 0s}
.cmp{grid-template-columns:minmax(0,1fr) repeat(3,60px)}
.compare .cmp.hdr .c{text-transform:none;font-size:13px}
/* app.css's dark .field uses the background shorthand, which drops the picker chevron: put it back in both themes */
[data-theme] select.field{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23908B84' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat}
[data-theme] select.field.bare{background-color:var(--fill)}
.plan-card .pc-tag{text-wrap:balance}