/* Optyk App (optyk.app). One sheet for the app and the sign-in page (the sign-in page cannot load anything else).
   Scales: radius 4 / 8 / 12 · space 4 8 12 16 24 32 48 · type 12 13 14 16 20 26 + display. One accent.
   Type roles. Barlow Condensed (the graphic's face): wordmark, player, labels (12 caps), figures (26).
   Barlow: everything read as text. Weight says what a thing is: 400 text and assumed readings,
   500 controls and stated readings, 600 the primary action, the chosen option, emphasis. */
:root {
  color-scheme: light dark;
  --bg: #f4f3ef; --surface: #ffffff; --sunken: #eae8e2;
  --ink: #15161a; --ink-2: #474a52; --ink-3: #5e6168;
  --line: #dcdad3; --ctl: #8a8c93;
  --chip: #e4e2db; --chip-hover: #d8d5cd;
  --slab: #17181c; --slab-ink: #ffffff; --slab-ring: transparent; --on-line: #17181c;
  --pressed: #17181c; --pressed-ink: #ffffff; --pressed-line: #17181c;      /* a toggle that is on */
  --accent: #c2410c; --accent-hover: #a83608; --accent-ink: #ffffff; --accent-wash: #fbe9df;
  --danger: #b42318; --danger-wash: #fdecea;
  --ok: #17803d;
  --shadow: 0 1px 2px rgba(20, 18, 12, .06), 0 12px 32px -8px rgba(20, 18, 12, .22);
  --r-1: 4px; --r-2: 8px; --r-3: 12px;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", "Nimbus Sans Narrow", sans-serif;
  --sans: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --tap: 36px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e0f11; --surface: #1a1b1f; --sunken: #0a0b0c;
    --ink: #f2f1ed; --ink-2: #c0c2c8; --ink-3: #9d9fa7;
    --line: #2b2d32; --ctl: #70737c;
    --chip: #2a2c32; --chip-hover: #363940;
    --slab: #2f3138; --slab-ink: #ffffff; --slab-ring: #4a4d55; --on-line: #c0c2c8;
    /* a dark slab sits too close to the dark surface to read as "on" (1.3:1): on is a light fill, as light mode's is a dark one */
    --pressed: #f2f1ed; --pressed-ink: #15161a; --pressed-line: #f2f1ed;
    --accent: #ff8a4c; --accent-hover: #ffa06e; --accent-ink: #1d0d03; --accent-wash: #34200f;
    --danger: #ff8f85; --danger-wash: #3a1a17;
    --ok: #5fd38a;
    --shadow: 0 0 0 1px #34373d, 0 16px 40px -8px rgba(0, 0, 0, .7);
  }
}
@media (pointer: coarse) { :root { --tap: 44px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100%; background: var(--bg); color: var(--ink);
  font: 400 16px/1.5 var(--sans); font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; caret-color: var(--accent);
  scrollbar-color: var(--ctl) transparent;
}
::selection { background: var(--accent); color: var(--accent-ink); }
button, input, select, textarea { font: inherit; color: inherit; }
button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.wordmark { display: block; height: 20px; width: auto; fill: currentColor; }
.wordmark .wm-mark { fill: #0AA5FF; }
.wordmark .wm-2 { fill: var(--ink-3); }

/* ---- shell ------------------------------------------------------------------------------ */
body.app { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.col { width: 100%; max-width: 832px; margin: 0 auto; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
.topbar { flex: none; padding: max(8px, env(safe-area-inset-top)) 0 8px; border-bottom: 1px solid var(--line); }
.topbar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { color: var(--ink); display: inline-flex; align-items: center; min-height: var(--tap); border-radius: var(--r-1); }
.top-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.powered { display: inline-flex; align-items: center; gap: .3em; min-height: var(--tap); padding-left: 12px; border-left: 1px solid var(--line);
  font-size: 12px; line-height: 1.2; color: var(--ink-3); text-decoration: none; white-space: nowrap; }
.powered b { font-weight: 600; color: var(--ink-2); }
.powered:hover b { color: var(--accent); }
@media (max-width: 560px) {               /* phones: the line tucks under the wordmark */
  .top-l { flex-direction: column; align-items: flex-start; gap: 0; }
  .top-l .brand { min-height: 26px; }
  .powered { min-height: 0; padding: 0 0 2px; border-left: 0; font-size: 10.5px; }
}
.quiet { position: relative; min-height: 32px; padding: 0 8px; margin-right: -8px; border: 0; border-radius: var(--r-2); background: none; color: var(--ink-3); font-size: 14px; cursor: pointer; }
.quiet:hover { color: var(--ink); background: var(--chip); }
.quiet::after { content: ""; position: absolute; inset: -6px 0; }
main { position: relative; flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scroll-padding-top: 8px; }
main:focus { outline: 0; }

/* ---- empty state -------------------------------------------------------------------------- */
.hero { padding: clamp(20px, 5vh, 48px) 0 24px; }
.hero-note { margin: 0 0 20px; }
.hero h1 {
  margin: 0; font: 700 clamp(34px, 6.2vw, 54px)/.96 var(--display); letter-spacing: .005em; text-transform: uppercase; text-wrap: balance;
}
.sample { margin: 24px 0 0; }
.sample figcaption { margin-top: 8px; font-size: 13px; color: var(--ink-3); }
.linkish { border: 0; background: none; padding: 0; color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--ctl); text-underline-offset: 3px; cursor: pointer; }
.linkish:hover { text-decoration-color: var(--accent); color: var(--accent); }
.try { margin-top: 24px; display: flex; gap: 12px; align-items: baseline; }
.try-k { flex: none; margin: 0; font: 600 12px/var(--tap) var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.examples { display: flex; flex-wrap: wrap; gap: 8px; }
.ex {
  min-height: var(--tap); padding: 6px 12px; border: 1px solid var(--ctl); border-radius: var(--r-2); background: transparent;
  font-size: 14px; text-align: left; cursor: pointer; transition: background .15s, border-color .15s;
}
.ex:hover { background: var(--surface); border-color: var(--ink); }

/* ---- thread -------------------------------------------------------------------------------- */
.thread { padding: 24px 0 16px; }
.x { margin: 0 0 40px; scroll-margin-top: 8px; }
.x:last-child { margin-bottom: 0; min-height: var(--view-h, 0); }      /* room for the newest answer to reach the top */
.ask { display: flex; gap: 8px; margin: 0 0 10px; font-size: 16px; color: var(--ink-2); overflow-wrap: anywhere; }
.ask svg { flex: none; margin-top: 4px; color: var(--ink-3); }
.ask s { color: var(--ink-3); }
.ask.is-was { font-size: 14px; color: var(--ink-3); }
.ask.is-was svg { margin-top: 3px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-3); padding: 16px; min-width: 0; transition: border-color .15s; }
.card:has(.chip.open) { border-color: var(--ink-3); }
.card > * + * { margin-top: 12px; }

/* chips: the reading of the question, one editable piece each */
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.chip { display: inline-flex; max-width: 100%; min-height: var(--tap); border-radius: var(--r-2); background: var(--chip); color: var(--ink); transition: background .15s, opacity .15s; }
.chip button { border: 0; background: none; cursor: pointer; border-radius: var(--r-2); }
.chip-main { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 0 10px 0 12px; font-size: 14px; font-weight: 500; text-align: left; }
.chip-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-main svg { flex: none; opacity: .6; }
.chip-x { display: grid; place-items: center; flex: none; width: 30px; margin-left: -6px; color: var(--ink-2); }
.chip-x:hover { color: var(--danger); }
.chip:hover, .chip.open { background: var(--chip-hover); }
.chip.is-default { background: transparent; box-shadow: inset 0 0 0 1px var(--ctl); }
.chip.is-default .chip-main { font-weight: 400; color: var(--ink-2); }
.chip.is-default:hover, .chip.is-default.open { background: var(--chip); }
.chip.is-player { background: var(--slab); color: var(--slab-ink); box-shadow: inset 0 0 0 1px var(--slab-ring); }
.chip.is-player .chip-main { font: 700 19px/1 var(--display); letter-spacing: .03em; text-transform: uppercase; padding-top: 1px; }
.chip.is-player:hover, .chip.is-player.open { background: var(--slab); opacity: .86; }
.chip.is-pending, .chip.is-player.is-pending { box-shadow: inset 0 0 0 1.5px var(--accent); }
.chip.is-static .chip-main { cursor: default; }
.chip.add { background: transparent; box-shadow: none; border: 1px dashed var(--ctl); }
.chip.add .chip-main { padding: 0 12px 0 10px; font-weight: 400; color: var(--ink-2); }
.chip.add .chip-main svg { opacity: 1; }
.chip.add:hover, .chip.add.open { background: var(--chip); }
.chip.more { background: transparent; box-shadow: inset 0 0 0 1px var(--ctl); }
.chip.more .chip-main { padding: 0 10px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
@media (pointer: coarse) { .chip { min-height: 40px; } .chip-x { width: 40px; } }

/* stat cards: a row of chips per column, then the card's own row; everything sits beside or under the graphic */
.rows { display: grid; gap: 8px; min-width: 0; }
.rows .chiprow { position: relative; }
.rows .chiprow:has(.row-x) { padding-right: 36px; }
.row-x { position: absolute; top: calc((var(--tap) - 32px) / 2); right: 0; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--r-2); background: none; color: var(--ink-3); cursor: pointer; }
.row-x:hover { background: var(--chip); color: var(--danger); }
.chiprow.tail { padding-top: 8px; border-top: 1px solid var(--line); }
.rail { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rail > .side { flex: 1; }
.edit-slot { min-width: 0; }
.edit-slot:has(.pop-status:not([hidden])) ~ .notice { display: none; }      /* the open editor already says it */
.nums { width: 100%; max-width: 520px; table-layout: fixed; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums lining-nums; }
.nums th, .nums td { padding: 5px 0 5px 8px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-top: 1px solid var(--line); }
.nums thead th { border-top: 0; padding-top: 0; font: 600 12px/1.2 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.nums thead th:first-child { width: 42%; }
.nums tbody th { padding-left: 0; text-align: left; font-weight: 400; color: var(--ink-2); }
.nums td { font-weight: 600; }
.is-busy .nums { opacity: .5; }

/* assumptions, things not applied, notes, problems */
.lines { font-size: 14px; color: var(--ink-2); display: grid; gap: 4px; }
.lines p { margin: 0; overflow-wrap: anywhere; }
.lines b { font-weight: 600; color: var(--ink); }
.lines .linkish { font-weight: 400; color: var(--ink-2); }
.what { margin: 0; font-size: 14px; color: var(--ink-2); overflow-wrap: anywhere; text-wrap: pretty; }
.lines .linkish:hover { color: var(--accent); }
.notice { border-radius: var(--r-2); padding: 12px; background: var(--sunken); font-size: 14px; overflow-wrap: anywhere; }
.notice.is-error { background: var(--danger-wash); }
.notice p { margin: 0; }
.notice .notice-k { font-weight: 600; }
.notice.is-error .notice-k { color: var(--danger); }
.notice-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.notice.is-inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 6px 6px 12px; }
.notice.is-inline .notice-acts { margin: 0; flex: none; }
.msg { font-size: 16px; margin: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.options { display: flex; flex-wrap: wrap; gap: 8px; }
.opt-player { display: grid; text-align: left; min-height: 52px; padding: 8px 14px; border: 1px solid var(--ctl); border-radius: var(--r-2); background: transparent; cursor: pointer; }
.opt-player b { font-weight: 600; }
.opt-player small { font-size: 12px; color: var(--ink-3); }
.opt-player:hover { border-color: var(--ink); background: var(--bg); }

/* media */
.body { display: grid; gap: 12px; min-width: 0; }
.side { display: flex; flex-direction: column; gap: 12px; min-width: 0; transition: opacity .15s; }
.side.is-stale { opacity: .4; }
.media { position: relative; overflow: hidden; border-radius: var(--r-1); background: #0b0b0d; aspect-ratio: 1920 / 858; }
.media.portrait { aspect-ratio: 1080 / 1350; }
.media img, .media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s var(--ease); }
.media .fade-in { opacity: 0; }
.media.is-loading img, .media.is-loading video, .media.is-stale img, .media.is-stale video { opacity: .45; }
.media.is-stale .media-zoom { display: none; }
.media.is-loading::after {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 35%; background: var(--accent);
  animation: run 1.1s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes run { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.media.skeleton { background: linear-gradient(100deg, var(--sunken) 30%, var(--chip) 50%, var(--sunken) 70%) 0 0 / 300% 100%; animation: sheen 1.6s linear infinite; }
@keyframes sheen { from { background-position: 100% 0; } to { background-position: -50% 0; } }
.media-zoom { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: var(--r-1); }
.media-zoom:focus-visible { outline-offset: -3px; }
.badge {
  position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; pointer-events: none;
  border-radius: var(--r-1); background: rgba(10, 10, 12, .78); color: #fff; font: 600 12px/1.4 var(--display); letter-spacing: .06em; text-transform: uppercase;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff8a4c; }
.badge.is-still::before { background: #9d9fa7; }
.sk { height: var(--tap); border-radius: var(--r-2); background: var(--chip); opacity: .7; }
.sk.w1 { width: 150px; } .sk.w2 { width: 120px; } .sk.w3 { width: 96px; }
.sk-stats { height: 71px; opacity: .4; } .sk-acts { height: 44px; width: min(100%, 300px); opacity: .4; }
.media-play {
  position: absolute; right: 8px; bottom: 8px; width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: var(--r-1);
  background: rgba(10, 10, 12, .78); color: #fff; cursor: pointer; transition: background .15s;
}
.media-play:hover { background: rgba(10, 10, 12, .95); }
.media-play::after { content: ""; position: absolute; inset: -4px; }
.media-play:focus-visible { outline-color: #fff; }

/* stats: labelled figures */
/* figures size to their content and never overlap; the page script shrinks --fig until they share one row, else they wrap */
.stats { display: flex; flex-wrap: wrap; gap: 12px 20px; margin: 0; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { flex: 1 0 auto; min-width: 56px; }
.stat dt { font: 600 12px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.stat dd { margin: 2px 0 0; display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.stat .fig { font: 700 var(--fig, 26px)/1 var(--display); font-variant-numeric: tabular-nums lining-nums; letter-spacing: .01em; }
.stat .pct { font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.is-busy .stats { opacity: .5; }

/* actions */
.acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.acts .spacer { flex: 1 1 0; min-width: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--ctl); border-radius: var(--r-2); background: transparent; color: var(--ink);
  font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.btn:hover { background: var(--chip); border-color: var(--ink); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.btn.ink, .btn.done { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600; }
.btn.ink:hover, .btn.done:hover { background: var(--ink-2); border-color: var(--ink-2); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.small { min-height: var(--tap); padding: 0 12px; }
.btn.icon { width: 44px; padding: 0; }
.btn[disabled], .btn[aria-disabled="true"] { color: var(--ink-3); border-color: var(--line); background: transparent; cursor: default; }
.btn .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--ink-3); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-2); background: var(--chip); }
.seg button { min-height: 38px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s, color .15s; }
.seg button[aria-checked="true"], .seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.seg.fill { display: flex; }
.seg.fill button { flex: 1; padding: 0 6px; }

/* follow-ups */
.next { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.fu { position: relative; min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--r-2); background: none; color: var(--ink-2); font-size: 14px; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; transition: background .15s, color .15s; }
.fu:hover { background: var(--chip); color: var(--ink); text-decoration-color: transparent; }
.fu::after { content: ""; position: absolute; inset: -6px 0; }
.next-k { font: 600 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-right: 4px; }

/* portrait cards on wide screens: media left, everything else beside it */
@media (min-width: 720px) {
  .card.portrait .body { grid-template-columns: minmax(0, 384px) minmax(0, 1fr); gap: 16px; }
  .card.portrait .stat dd { flex-direction: column; gap: 2px; }
  .card.portrait .acts { margin-top: auto; }
  .card.portrait .acts .spacer { display: none; }
  .card.portrait .next { order: 5; }
  .card.k-card.portrait .media { align-self: start; position: sticky; top: 8px; }      /* the card stays in view beside a long editor */
}

/* ---- editors: popover on desktop, one bottom sheet on phones ----------------------------------- */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(8, 8, 10, .5); animation: fade .15s ease-out; }
.pop {
  position: fixed; z-index: 41; width: 336px; max-width: calc(100vw - 16px); max-height: min(560px, calc(100dvh - 24px));
  display: flex; flex-direction: column; background: var(--surface); border-radius: var(--r-3); box-shadow: var(--shadow);
  animation: pop .14s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(4px); } }
@keyframes fade { from { opacity: 0; } }
.pop-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 6px 0 14px; }
.pop-head.has-back { padding-left: 6px; justify-content: flex-start; }
.pop-head.has-back .pop-title { flex: 1; }
.pop-status { flex: none; margin: 4px 10px 2px; padding: 10px 12px; border-radius: var(--r-2); background: var(--sunken); font-size: 14px; overflow-wrap: anywhere; }
.pop-status.is-error { background: var(--danger-wash); }
.pop-status p { margin: 0; }
.pop-status .notice-acts { margin-top: 8px; }
.pop-title { margin: 0; font: 600 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pop-close { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--r-2); background: none; color: var(--ink-2); cursor: pointer; }
.pop-close:hover { background: var(--chip); color: var(--ink); }
.pop-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 10px 12px; overscroll-behavior: contain; }
.pop-sec { margin: 12px 4px 6px; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.pop-sec:first-child { margin-top: 4px; }
.pop-note { margin: 8px 4px 0; font-size: 13px; color: var(--ink-3); }
.pop-loading { padding: 16px 4px; font-size: 14px; color: var(--ink-3); }
.pop-fail { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 4px; }
.pop-fail .pop-note { margin: 0; font-size: 14px; color: var(--ink-2); }
.opts { display: grid; }
.opt {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 8px; border: 0; border-radius: var(--r-2);
  background: none; font-size: 14px; text-align: left; cursor: pointer;
}
.opt:hover, .opt:focus-visible { background: var(--chip); }
.opt .opt-t { flex: 1; min-width: 0; }
.opt small { display: block; font-size: 12px; color: var(--ink-3); }
.opt .opt-r { flex: none; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.opt .tick { flex: none; width: 16px; color: var(--accent); visibility: hidden; }
.opt[aria-checked="true"] .tick, .opt[aria-pressed="true"] .tick { visibility: visible; }
.opt[aria-checked="true"], .opt[aria-pressed="true"] { font-weight: 600; }
.opt.sub { padding-left: 28px; }
.opt.is-none { color: var(--ink-3); }
.opt.is-none .opt-t { opacity: .7; }
.opts.plain .tick { display: none; }
.gap { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.seg + .seg, .seg + .opts, .seg + .pop-note { margin-top: 8px; }
.toggles { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 2px; }
.tog { min-height: 36px; padding: 0 10px; border: 1px solid var(--ctl); border-radius: var(--r-2); background: transparent; font-size: 13px; cursor: pointer; }
.tog:hover { border-color: var(--ink); }
.tog[disabled] { opacity: .45; cursor: default; border-color: var(--line); }
/* the chosen stats, in order: a sunken track of chips that drag (or arrow-key) into place */
.ord { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 2px 10px; padding: 4px; list-style: none; border-radius: 10px; background: var(--sunken); }
.ord-i { display: inline-flex; align-items: center; min-height: 36px; border-radius: 6px; background: var(--slab); color: var(--slab-ink); box-shadow: inset 0 0 0 1px var(--on-line); transition: transform .24s var(--ease); }
.ord.can-move .ord-i { cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.ord-h { display: inline-flex; align-items: center; gap: 6px; align-self: stretch; padding: 0 2px 0 8px; border: 0; border-radius: 6px; background: none; color: inherit; font: 600 13px/1 var(--sans); cursor: inherit; }
.ord-h:focus-visible { outline-offset: 1px; }
.ord-h svg { opacity: .5; margin-left: -2px; }
.ord-n { min-width: 9px; font: 700 14px/1 var(--display); font-variant-numeric: tabular-nums; opacity: .6; }
.ord-x { display: grid; place-items: center; width: 26px; height: 26px; margin: 0 5px 0 2px; border: 0; border-radius: 4px; background: none; color: inherit; opacity: .65; cursor: pointer; }
@media (hover: hover) { .ord-x:hover { opacity: 1; background: color-mix(in srgb, var(--slab-ink) 16%, transparent); } }
.ord-x[disabled] { display: none; }
.ord-i:has(.ord-x[disabled]) .ord-h { padding-right: 12px; }
.ord-i.is-hole { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ctl); }
.ord-i.is-hole > * { visibility: hidden; }
.ord-ghost { position: fixed; z-index: 1000; margin: 0; list-style: none; pointer-events: none; cursor: grabbing; scale: 1.05; box-shadow: 0 2px 4px rgba(0, 0, 0, .18), 0 14px 28px -8px rgba(0, 0, 0, .45); transition: scale .18s var(--ease); }
.ord-ghost.is-landing { scale: 1; transition: transform .22s var(--ease), scale .22s var(--ease); }
.tog.sw { display: inline-flex; align-items: center; gap: 8px; }
.tog.sw .dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--ctl); background: var(--chip); }
.pop .reset { margin: 12px 4px 2px; font-size: 13px; }
.tog[aria-pressed="true"] { background: var(--pressed); border-color: var(--pressed-line); box-shadow: inset 0 0 0 1px var(--pressed-line); color: var(--pressed-ink); font-weight: 600; }
.toggles.four { display: grid; grid-template-columns: repeat(4, 1fr); }
.toggles.four .tog { padding: 0 4px; }
.teamgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 0 2px; }
.teamgrid .tog { padding: 0; font: 600 16px/1 var(--display); letter-spacing: .04em; min-height: 40px; }
.field {
  width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--ctl); border-radius: var(--r-2); background: var(--bg); font-size: 16px;
}
.field:focus-visible { outline-offset: 0; border-color: var(--accent); }
.field::placeholder { color: var(--ink-3); }
.row { display: flex; gap: 8px; align-items: center; padding: 0 2px; }
.row > label { font-size: 13px; color: var(--ink-2); min-width: 40px; }
.row + .row { margin-top: 8px; }
.row .field { flex: 1 1 0; min-width: 0; padding: 0 8px; }
.row.apply { margin-top: 12px; gap: 16px; }
.row input[type="number"] { flex: 0 0 68px; text-align: center; }
.stepper { display: flex; align-items: center; gap: 8px; padding: 0 2px; margin-top: 10px; }
.stepper .btn { min-height: 44px; }
.stepper .field { width: 76px; text-align: center; font: 700 22px/1 var(--display); font-variant-numeric: tabular-nums; }
.stepper span { font-size: 14px; color: var(--ink-2); }
.pop-foot { flex: none; display: none; padding: 8px 12px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.pop-foot .btn { width: 100%; }
.pop-foot .btn[disabled] { background: transparent; border-color: var(--line); color: var(--ink-3); }
.pop-foot .spin { border-color: color-mix(in srgb, var(--bg) 35%, transparent); border-top-color: var(--bg); }
@media (max-width: 640px) { .pop.has-done .pop-foot { display: block; } }
.pop.has-apply .pop-foot { display: block; }
/* the look editor on wide screens: part of the card, below the actions */
.look { border-top: 1px solid var(--line); padding-top: 4px; }
.look .pop-sec:first-child { margin-top: 8px; }
.look .seg.fill { display: inline-flex; }
.look .seg.fill button { flex: none; padding: 0 16px; }
.look .reset { margin: 12px 4px 2px; font-size: 13px; }
.look-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.look-foot .btn.ink { min-width: 120px; justify-content: center; }
.look-foot .spin { border-color: color-mix(in srgb, var(--bg) 35%, transparent); border-top-color: var(--bg); }
.card.portrait .look { order: 4; }
@media (min-width: 900px) {
  /* wide chart: Apply sits at the top of the panel, next to Edit, so it is on screen without scrolling */
  .card:not(.portrait) .look { display: flex; flex-direction: column; }
  .card:not(.portrait) .look-foot { order: -1; margin: 10px 0 2px; }
  .card:not(.portrait) .look-body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto; gap: 0 24px; align-items: start; }
}
/* a stat card's editor on wide screens: in the card, under the chips, never over the graphic */
.pop.inline { position: static; z-index: auto; width: auto; max-width: 420px; max-height: 460px; box-shadow: none; border: 1px solid var(--ctl); animation: none; }
.pop-title small { margin-left: 8px; font: inherit; letter-spacing: .06em; opacity: .7; }
.scrim.clear { background: transparent; }       /* the look editor: the chart above the sheet is the preview */
@media (max-width: 640px) { .pop.has-apply { max-height: 50dvh; } }
.cond { display: flex; align-items: center; gap: 4px; padding: 0 2px; }
.cond-t { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 8px; border: 0; border-radius: var(--r-2); background: none; font-size: 14px; font-weight: 600; text-align: left; cursor: pointer; }
.cond-t small { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.cond-t:hover, .cond.is-editing .cond-t { background: var(--chip); }

@media (max-width: 640px) {
  .pop {
    left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; max-width: none; max-height: min(78dvh, 640px);
    border-radius: var(--r-3) var(--r-3) 0 0; animation: sheet .22s var(--ease); transition: transform .2s var(--ease);
  }
  .pop.is-dragging { transition: none; }
  .pop::before { content: ""; flex: none; align-self: center; width: 36px; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--ctl); opacity: .6; }
  .pop-head { touch-action: none; }
  .pop-status { margin: 4px 12px 2px; }
  .pop.tall { height: 78dvh; }
  .pop-head { padding: 2px 8px 2px 16px; }
  .pop-head.has-back { padding-left: 8px; }
  .pop-close { width: 44px; height: 44px; }
  .pop-body { padding: 6px 12px 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .opt { min-height: 48px; }
  .tog { min-height: 44px; padding: 0 12px; font-size: 14px; }
  .ord-i { min-height: 44px; }
  .ord-h { font-size: 14px; }
  .ord-x { width: 34px; height: 34px; margin-right: 4px; }
  .teamgrid .tog { min-height: 46px; }
  @keyframes sheet { from { transform: translateY(24px); opacity: 0; } }
}

/* ---- lightbox ----------------------------------------------------------------------------------- */
.lightbox { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(6, 6, 8, .94); animation: fade .15s ease-out; }
.lightbox img, .lightbox video { display: block; max-width: 100vw; max-height: 100dvh; width: auto; height: auto; }
.lightbox.rot img, .lightbox.rot video { position: absolute; top: 50%; left: 50%; width: min(100dvh, 223vw); max-width: none; max-height: none; transform: translate(-50%, -50%) rotate(90deg); }
.lightbox .pop-close { position: absolute; top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); width: 44px; height: 44px; background: rgba(30, 30, 34, .8); color: #fff; }

/* ---- composer -------------------------------------------------------------------------------------- */
.dock { flex: none; position: relative; padding: 8px 0 max(10px, env(safe-area-inset-bottom)); background: var(--bg); }
.composer {
  display: flex; align-items: flex-end; gap: 8px; padding: 6px 6px 6px 16px; background: var(--surface);
  border: 1px solid var(--ctl); border-radius: var(--r-3); transition: border-color .15s, box-shadow .15s;
}
.composer:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
textarea {
  flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: transparent; font-size: 16px; line-height: 24px;
  max-height: 144px; padding: 10px 0; white-space: pre-wrap; overflow-wrap: anywhere;
}
textarea:focus-visible, .login input:focus-visible { outline: 0; }
textarea::placeholder, .login input::placeholder { color: var(--ink-3); opacity: 1; }
.send {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--r-2);
  background: var(--ink); color: var(--bg); cursor: pointer; transition: background .15s, color .15s;
}
.send:hover { background: var(--accent); color: var(--accent-ink); }
.send:disabled { background: var(--chip); color: var(--ink-3); cursor: default; }
.fine { margin-top: 6px; text-align: center; font-size: 12px; color: var(--ink-3); }
.modes { display: flex; margin: 0 0 6px; }
.seg.mode button { position: relative; min-height: 30px; padding: 0 12px; font-size: 13px; }
.seg.mode button::after { content: ""; position: absolute; inset: -7px 0 -3px; }
/* the selected pill slides between the options (glide() in the page script): quick, with a touch of overshoot */
.seg.glides { position: relative; isolation: isolate; }
.seg.glides .glide { position: absolute; top: 3px; bottom: 3px; left: 0; z-index: -1; border-radius: 6px; background: var(--surface);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .18); pointer-events: none;
  transition: transform .26s cubic-bezier(.3, 1.35, .45, 1), width .26s cubic-bezier(.3, 1.35, .45, 1); }
.seg.glides button[aria-checked="true"] { background: transparent; box-shadow: none; }
.seg.glides button { transition: color .2s; }
@media (prefers-reduced-motion: reduce) { .seg.glides .glide { transition: none; } }
.dock .col { position: relative; }
.suggest {
  position: absolute; left: max(16px, env(safe-area-inset-left)); bottom: 100%; margin: 0 0 14px; width: min(420px, calc(100% - 32px)); padding: 6px;
  background: var(--surface); border-radius: var(--r-3); box-shadow: var(--shadow); z-index: 20;
}
.toast {
  position: absolute; left: 50%; bottom: 100%; z-index: 20; transform: translateX(-50%); margin-bottom: 14px; max-width: calc(100% - 32px);
  display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: var(--r-2); background: var(--slab); color: var(--slab-ink);
  box-shadow: var(--shadow); font-size: 14px; white-space: nowrap;
  pointer-events: none;                           /* it can sit over a card's buttons for seconds: only its own button takes a click */
}
.toast button { pointer-events: auto; }
.toast span { overflow: hidden; text-overflow: ellipsis; }
.toast .linkish { flex: none; color: inherit; font-weight: 600; text-decoration-color: currentColor; }
.toast .linkish:hover { color: inherit; opacity: .8; }
.suggest-k { padding: 4px 8px; font-size: 12px; color: var(--ink-3); display: flex; justify-content: space-between; }
kbd { font: 500 11px/1 var(--sans); padding: 2px 5px; border: 1px solid var(--ctl); border-radius: 4px; }

/* ---- phones ------------------------------------------------------------------------------------------ */
@media (max-width: 640px) {
  .topbar { padding: max(4px, env(safe-area-inset-top)) 0 4px; }
  .brand { min-height: 36px; }
  .thread { padding: 12px 0 16px; }
  .x { margin-bottom: 28px; }
  .ask { font-size: 14px; margin-bottom: 8px; }
  .ask svg { margin-top: 3px; }
  .card { padding: 12px; margin: 0 -4px; }
  .card > * + * { margin-top: 10px; }
  .try { display: block; }
  .ex { flex: 1 1 100%; }
  .ex:nth-child(n+5) { display: none; }
  /* chips: 36 high to the eye, 44 to the finger */
  .chiprow { gap: 6px; }
  .chip { min-height: 36px; }
  .chip button { position: relative; }
  .chip button::after { content: ""; position: absolute; inset: -4px 0; }
  .chip-main { padding: 0 6px 0 10px; font-size: 13px; gap: 4px; }
  .chip-x { width: 32px; margin-left: -4px; }
  .chip.is-player .chip-main { font-size: 17px; padding: 1px 8px 0 10px; }
  .chip.add .chip-main { padding: 0 10px 0 8px; }
  .chip.more .chip-main { padding: 0 10px; }
  .body, .side { gap: 10px; }
  .stats { gap: 8px 14px; padding: 8px 0; }
  .stat dd { flex-direction: column; gap: 1px; }
  .stat .fig { font-size: var(--fig, 22px); }
  .stat .pct { font-size: 12px; }
  .what { font-size: 13px; }
  .acts { gap: 6px; }
  .acts .save { flex: 1 1 calc(50% - 3px); min-width: 0; padding: 0 8px; gap: 6px; }   /* the two saves share the first row */
  .acts .edit { flex: 1 1 auto; }
  .acts .spacer { display: none; }
  .acts .seg { flex: 1 1 100%; display: flex; }
  .acts .seg button { flex: 1; }
  .fine { font-size: 11px; }
  .toast { white-space: normal; }
  /* stat cards: chips first, as on a chart, then the card, then its numbers and actions */
  .card.k-card .body { display: flex; flex-direction: column; }
  .rail { display: contents; }
  .k-card .body > .media { order: 1; }
  .k-card .rail > .side { order: 2; }
  .rows { gap: 6px; }
  .row-x { top: 2px; }
  .chiprow.tail { padding-top: 6px; }
  .nums th, .nums td { padding-left: 6px; }
}
/* short phones: the chart and its Save row share one screen */
@media (max-width: 640px) and (max-height: 700px) {
  .has-thread .fine { display: none; }
  .has-thread .dock { padding-top: 6px; }
  .stat .pct { display: none; }
  .side .what { order: 3; }
  .side .next { order: 4; }
}
@media (max-height: 520px) { .fine { display: none; } .hero { padding-top: 12px; } }

/* ---- sign-in -------------------------------------------------------------------------------------------- */
.login { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: 1fr auto; place-items: center; padding: 24px 16px max(16px, env(safe-area-inset-bottom)); }
.login form { width: 100%; max-width: 360px; }
.login h1 { margin: 0 0 16px; }
.login .wordmark { height: 34px; }
.login p { margin: 0 0 24px; color: var(--ink-2); text-wrap: pretty; }
.field-k { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; }
.login input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 16px; padding: 10px 0; }
.login .msg-err { color: var(--danger); font-size: 14px; font-weight: 600; min-height: 22px; margin-top: 10px; }
.login .msg-err.ok { color: var(--ink); }
.login .soon { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.login .have { margin: 20px 0 0; font-size: 13px; color: var(--ink-3); }
.login .have .linkish { font-size: 13px; }
.login .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.login nav.legal { display: flex; gap: 12px; padding-top: 16px; font-size: 13px; }
.login nav.legal a { padding: 6px 4px; }
.fine .legal { white-space: nowrap; }
.legal a { color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
.legal a:hover { color: var(--ink); text-decoration-color: var(--ctl); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .media.is-loading::after { width: 100%; transform: none; opacity: .7; }
}

/* ---- accounts: the header button, and the library (History / Saved / Plan) -------------------------------- */
.top-acts { display: flex; align-items: center; gap: 8px; }
.acct-btn { display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 0 4px 0 12px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 14px; cursor: pointer; transition: border-color .15s, background .15s; }
.acct-btn:hover { border-color: var(--ctl); }
.acct-btn.out { padding: 0 16px; font-weight: 600; border-color: var(--ink); }
.acct-btn.out:hover { background: var(--chip); }
.acct-plan { display: inline-flex; align-items: baseline; gap: 8px; line-height: 1; }
.acct-plan b { font: 700 15px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.acct-btn.pro .acct-plan b { color: var(--accent); }
.acct-left { color: var(--ink-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.acct-av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--slab); color: var(--slab-ink);
  font: 700 15px/1 var(--display); }
@media (max-width: 420px) { .acct-left { display: none; } }

.btn.icon.keep[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }

.lib-scrim { opacity: 0; transition: opacity .2s var(--ease); animation: none; }
.lib-scrim.open { opacity: 1; }
.lib { position: fixed; z-index: 41; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); display: flex; flex-direction: column;
  background: var(--surface); box-shadow: var(--shadow); transform: translateX(16px); opacity: 0;
  transition: transform .22s var(--ease), opacity .18s var(--ease); outline: none; }
.lib.open { transform: none; opacity: 1; }
.lib-head { display: flex; align-items: center; gap: 8px; padding: max(10px, env(safe-area-inset-top)) 10px 10px 16px; border-bottom: 1px solid var(--line); }
.lib-tabs { flex: 1; display: flex; }
.lib-tabs button { flex: 1; }
.lib-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 16px max(16px, env(safe-area-inset-bottom)); }
.lib-note { margin: 10px 0; color: var(--ink-3); font-size: 13px; }
.lib-empty { padding: 48px 8px; text-align: center; color: var(--ink-2); font-size: 14px; text-wrap: pretty; }
.lib-empty-t { margin: 0 0 6px; font: 700 20px/1.1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }
.lib-empty svg { vertical-align: -2px; }
.lib-list { list-style: none; margin: 0; padding: 0; }
.lib-day { position: sticky; top: -8px; z-index: 1; margin: 0 -16px; padding: 14px 16px 6px; background: var(--surface);
  font: 700 13px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.lib-item { display: flex; align-items: stretch; gap: 2px; border-radius: var(--r-2); }
.lib-item:hover { background: var(--chip); }
.lib-row { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 4px 6px 8px; border: 0;
  background: none; color: inherit; text-align: left; cursor: pointer; border-radius: var(--r-2); }
.lib-kind { flex: none; width: 44px; font: 700 11px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.lib-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lib-t b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-t small { font-size: 12px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-time { flex: none; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.lib-del { flex: none; display: grid; place-items: center; width: 40px; border: 0; border-radius: var(--r-2); background: none; color: var(--ink-3);
  cursor: pointer; opacity: 0; transition: opacity .15s, color .15s; }
.lib-item:hover .lib-del, .lib-del:focus-visible, .lib-save .lib-del { opacity: 1; }
.lib-del:hover { color: var(--danger); }
@media (hover: none) { .lib-del { opacity: 1; } }
.lib-foot { display: flex; justify-content: center; gap: 12px; align-items: center; margin-top: 12px; }
.lib-foot.left { justify-content: flex-start; }
.lib-foot .spacer { flex: 1; }
.quiet-foot { margin-top: 20px; font-size: 13px; }
.lib-clear { color: var(--ink-3); font-weight: 400; }
.lib-grid { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 14px; }
.lib-save { border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; }
.lib-save img { display: block; width: 100%; aspect-ratio: 1920 / 858; object-fit: cover; background: var(--sunken); }
.lib-save img.tall { aspect-ratio: 4 / 5; object-fit: contain; }
.lib-save-t { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 0; }
.lib-save-t b { font-size: 14px; }
.lib-save-t small { font-size: 12px; color: var(--ink-3); }
.lib-save-a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 6px 8px 12px; }
.lib-save-a .spacer { flex: 1; }
.lib-save-a .btn.small { min-height: 36px; padding: 0 10px; font-size: 13px; gap: 6px; }

.plan-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 12px 0 16px; }
.plan-name { margin: 0; font: 700 34px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; }
.plan-email { margin: 6px 0 0; color: var(--ink-3); font-size: 13px; word-break: break-all; }
.plan-test { flex: none; padding: 4px 8px; border-radius: var(--r-1); background: var(--accent-wash); color: var(--accent);
  font: 700 12px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.meter { margin: 0 0 14px; }
.meter-k { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ink-2); margin-bottom: 6px; }
.meter-k b { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; }
.meter-track { display: block; height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.meter-bar { display: block; height: 100%; width: var(--p, 0%); border-radius: 3px; background: var(--ink); }
.plan-pro { margin: 20px 0 8px; padding: 16px; border-radius: var(--r-3); background: var(--sunken); }
.plan-pro-t { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 8px; }
.plan-pro-t b { font: 700 24px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--accent); }
.plan-pro-t span { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-pro ul { margin: 0 0 14px; padding-left: 18px; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.plan-pro .btn { width: 100%; }
.btn.save.busy { opacity: .5; }                     /* iPhone: the file is still loading for the share sheet */
.plan-custom { margin-top: 12px; }
.plan-custom .plan-pro-t b { color: var(--ink); }
.plan-custom .plan-pro-t a { font-size: 15px; font-weight: 600; color: var(--accent); text-decoration: none; }
.plan-custom .plan-pro-t a:hover { text-decoration: underline; text-underline-offset: 3px; }
.plan-custom .btn { justify-content: center; text-decoration: none; }
.plan-mail { margin: 8px 0 0; text-align: center; font-size: 13px; color: var(--ink-3); user-select: all; overflow-wrap: anywhere; }
.plan-foot { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; }
.plan-foot .linkish { color: var(--ink-3); font-weight: 400; }

@media (max-width: 640px) {
  .lib { top: auto; left: 0; width: auto; max-height: 88dvh; height: 88dvh; border-radius: var(--r-3) var(--r-3) 0 0; transform: translateY(24px); }
  .lib.open { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .lib, .lib-scrim { transition: none; } }
.row.apply .count { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-left: auto; }
.row.apply .count.full { color: var(--ink); font-weight: 600; }