/* createmedia platform: component styles.
   Everything shell.js builds is styled here. The vernacular is a bank statement
   printed on good paper: mono labels, hairlines, one ink rule under every head,
   tabular figures, and gold kept for the one figure and the one action that matter. */

/* ───────────── base ───────────── */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--pv-h) + 16px); }
/* overflow-wrap: anywhere, not break-word: both break a word that has no other place to break,
   but only `anywhere` is counted when a grid or flex item measures its smallest width. With
   break-word a message, a title or a brief line of one 2,000-character word kept its item as
   wide as the word and the whole screen scrolled sideways; with anywhere the item shrinks to
   its column and the word wraps inside it. It is inherited, so every piece of typed text is
   covered. Controls that must stay on one line say white-space: nowrap themselves. */
body { margin: 0; background: var(--bg); color: var(--text); font: 400 var(--t-base)/1.5 var(--f-sans); text-rendering: optimizeLegibility; overflow-wrap: anywhere; min-height: 100vh; }
h1, h2, h3, h4, p, ol, ul, dl, dd, dt, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }
table { border-collapse: collapse; width: 100%; }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
/* the chrome is always dark, on every surface: its ring is gold */
.side :focus-visible, .topbar :focus-visible, .tabbar :focus-visible { outline-color: var(--rand); }
::selection { background: var(--rand); color: var(--on-gold); }
[hidden] { display: none !important; }

.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 200; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--rand); color: var(--on-gold); font-weight: 600; text-decoration: none; border-radius: var(--radius); }
.skip:focus { top: 8px; }

.mono { font-family: var(--f-mono); font-size: .92em; letter-spacing: 0; }
.label { font: 400 var(--t-xs)/1.35 var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.num { font-variant-numeric: tabular-nums lining-nums; }
.muted { color: var(--muted); }
.small { font-size: var(--t-sm); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.strong { font-weight: 700; }
.accent { font: italic 400 1.04em/1 var(--f-serif); letter-spacing: -.01em; color: var(--rand-text); }
.fig { font: 800 var(--t-fig)/1 var(--f-sans); font-stretch: 78%; letter-spacing: -.015em; font-variant-numeric: tabular-nums lining-nums; }
.fig--md { font-size: 24px; }
.fig--sm { font-size: 18px; font-stretch: 86%; }
.stack { display: grid; gap: var(--gap); }
.stack--sm { gap: 8px; }
.stack--lg { gap: 28px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ───────────── app shell ───────────── */

.shell { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: calc(100vh - var(--pv-h)); }
.shell--bare { grid-template-columns: minmax(0, 1fr); }
.shell--bare > .side, .shell--bare ~ .tabbar, .shell--bare .topbar { display: none; }

.side { position: sticky; top: var(--pv-h); align-self: start; height: calc(100vh - var(--pv-h)); display: flex; flex-direction: column; background: var(--side-bg); color: var(--side-fg); border-right: 1px solid var(--side-line); overflow-y: auto; }
.side-brand { display: flex; align-items: center; gap: 10px; padding: 20px 20px 6px; color: inherit; text-decoration: none; }
.side-brand svg { width: 30px; height: 30px; flex: none; }
.wm { font: 800 19px/1 var(--f-sans); letter-spacing: -.035em; white-space: nowrap; }
.wm i { font: 400 11.5px/1 var(--f-mono); font-style: normal; letter-spacing: .02em; opacity: .72; margin-left: 2px; }
.side-tag { margin: 12px 20px 14px; padding-top: 12px; border-top: 1px solid var(--side-line); font: 400 11px/1.4 var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--side-muted); }
.side-tag b { display: block; font-weight: 400; color: var(--rand); }
.side-nav { display: grid; gap: 2px; padding: 0 10px; }
.side-group { margin: 14px 10px 4px; font: 400 10.5px/1.4 var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--side-muted); opacity: .8; }
.side-link { position: relative; display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 10px; border-radius: 5px; color: var(--side-fg); text-decoration: none; font-weight: 500; font-size: 14.5px; }
.side-link .icon { opacity: .78; }
.side-link:hover { background: var(--side-active); }
.side-link:focus-visible { outline-color: var(--rand); }
.side-link[aria-current="page"] { background: var(--side-active); font-weight: 700; }
.side-link[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; background: var(--rand); border-radius: 0 2px 2px 0; }
.side-link[aria-current="page"] .icon { opacity: 1; color: var(--rand); }
.side-count { margin-left: auto; min-width: 22px; padding: 1px 6px; border: 1px solid var(--side-line); border-radius: 999px; font: 400 11px/1.5 var(--f-mono); text-align: center; color: var(--side-fg); font-variant-numeric: tabular-nums; }
.side-count[data-hot="true"] { border-color: var(--rand); color: var(--rand); }
/* the signed-in account: who you are, then Sign out */
.side-foot { position: sticky; bottom: 0; z-index: 1; margin-top: auto; padding: 14px 14px 16px; background: var(--side-bg); border-top: 1px solid var(--side-line); display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
.side-acct { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 11px; padding: 0 6px; }
.side-avatar { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--side-line); background: var(--side-active); color: var(--side-fg); font: 500 12px/1 var(--f-mono); letter-spacing: .04em; }
.side-who { min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-who span { display: block; font: 400 11.5px/1.45 var(--f-mono); color: var(--side-muted); letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-who .side-role { font-size: 10.5px; letter-spacing: var(--track-label); text-transform: uppercase; opacity: .85; }
.side-out { display: flex; align-items: center; justify-content: flex-start; gap: 9px; width: 100%; min-height: 36px; padding: 0 10px; background: none; border: 1px solid var(--side-line); border-radius: 5px; color: var(--side-fg); font-size: 13.5px; font-weight: 500; text-align: left; }
.side-out .icon { width: 16px; height: 16px; opacity: .78; }
.side-out:hover { background: var(--side-active); border-color: var(--side-muted); }
.side-out:focus-visible { outline-color: var(--rand); }

/* the same account, in the phone sheets ("Your account" and "More") */
.me { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.me-avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: 500 13px/1 var(--f-mono); letter-spacing: .04em; }
.me-who { display: grid; gap: 1px; min-width: 0; }
.me-who b { font-weight: 700; font-size: 15.5px; line-height: 1.3; overflow-wrap: anywhere; }
.me-who span { font: 400 12.5px/1.45 var(--f-mono); color: var(--muted); overflow-wrap: anywhere; }
.me-who .me-role { font-size: 11px; letter-spacing: var(--track-label); text-transform: uppercase; }

.main { min-width: 0; padding: 30px clamp(16px, 3.2vw, 44px) 72px; }
.main-in { max-width: 1120px; margin: 0 auto; }
.main:focus { outline: none; }

.topbar { display: none; }
.tabbar { display: none; }
.viewas { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 20px; padding: 10px 14px; border: 1px dashed var(--warn); border-radius: var(--radius); background: var(--warn-tint); font-size: var(--t-sm); }
.viewas b { font-weight: 700; }

@media (max-width: 760px) {
  .shell { display: block; min-height: 0; }
  .side { display: none; }
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--side-bg); color: var(--side-fg); }
  .topbar .side-brand { padding: 0; }
  .topbar .side-brand svg { width: 26px; height: 26px; }
  .topbar .wm { font-size: 17px; }
  .topbar { padding: 8px 10px 8px 16px; min-height: 60px; }
  .topbar-end { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .topbar-tag { font: 400 10.5px/1.3 var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--rand); text-align: right; }
  .topbar-acct { display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0; background: none; border: 0; border-radius: 50%; color: inherit; }
  .topbar-acct .side-avatar { width: 34px; height: 34px; }
  .topbar-acct:hover .side-avatar { border-color: var(--side-muted); }
  .topbar-acct:focus-visible { outline-color: var(--rand); outline-offset: -3px; }
  .main { padding: 20px 16px calc(var(--tab-h) + 36px + env(safe-area-inset-bottom, 0px)); }
  .shell--bare .main { padding-bottom: 40px; }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--side-bg); color: var(--side-fg); border-top: 1px solid var(--side-line); }
  .tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 44px; padding: 6px 2px 4px; background: none; border: 0; color: var(--side-muted); text-decoration: none; font: 500 10.5px/1.1 var(--f-sans); letter-spacing: .01em; }
  .tab .icon { width: 21px; height: 21px; }
  .tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab[aria-current="page"], .tab[aria-expanded="true"] { color: var(--side-fg); font-weight: 700; }
  .tab[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 22%; right: 22%; height: 3px; background: var(--rand); border-radius: 0 0 2px 2px; }
  .tab[aria-current="page"] .icon { color: var(--rand); }
  .tab:focus-visible { outline-color: var(--rand); outline-offset: -3px; }
  .tab-dot { position: absolute; top: 7px; left: calc(50% + 7px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--rand); color: var(--on-gold); font: 500 10px/16px var(--f-mono); text-align: center; }
}

/* ───────────── page and section ───────────── */

.page { display: grid; gap: 26px; }
/* one column that can shrink, so a wide child (a scrolling table) never widens the page */
.page, .section, .stack, .card, .tabs, .form, .modal-body, .center-in { grid-template-columns: minmax(0, 1fr); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; padding-bottom: 16px; border-bottom: 1.5px solid var(--line-strong); }
.page-head-main { display: grid; gap: 8px; min-width: 0; max-width: 70ch; }
.back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 28px; font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); text-decoration: none; }
.back:hover { color: var(--text); text-decoration: underline; }
.back .icon { width: 14px; height: 14px; }
.kicker { display: flex; align-items: center; gap: 10px; font: 400 var(--t-xs)/1.35 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kicker::after { content: ""; width: 36px; height: 1px; background: currentColor; opacity: .6; }
.page-title { font: 800 var(--t-xl)/1.08 var(--f-sans); letter-spacing: -.028em; text-wrap: balance; }
/* headings take focus on a route change for screen readers; they are not controls, so no ring */
.page-title:focus, .page-title:focus-visible, .modal-title:focus, .modal-title:focus-visible { outline: none; }
.lede { color: var(--muted); font-size: var(--t-md); line-height: 1.45; max-width: 62ch; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

.section { display: grid; gap: 14px; min-width: 0; }
.section-head { display: flex; align-items: center; gap: 14px; min-height: 32px; }
.section-title { font: 700 var(--t-md)/1.2 var(--f-sans); letter-spacing: -.012em; }
.section-kicker { font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.section-rule { flex: 1; height: 1px; background: var(--line); min-width: 12px; }
.section-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.section-lede { color: var(--muted); font-size: var(--t-sm); max-width: 70ch; margin-top: -6px; }

.grid { display: grid; gap: var(--gap); align-items: start; min-width: 0; }
.grid > * { min-width: 0; }
/* two and three columns hold only while each column keeps a readable width (300px and 260px);
   below that the grid drops a column on its own, which is what tablets beside the sidebar need */
.grid--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(300px, calc((100% - var(--gap)) / 2))), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(260px, calc((100% - 2 * var(--gap)) / 3))), 1fr)); }
.grid--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grid--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.grid--auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
@media (max-width: 980px) { .grid--2-1, .grid--1-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); } .page { gap: 22px; } .section-head { flex-wrap: wrap; } }

/* ───────────── tiles ───────────── */

/* Tiles wrap in even rows at every width. Each tile's basis flips between three column counts
   (--ta wide, --tb middle, --tc narrow) at the widths where a tile would drop under --tmin, and the
   column counts are picked from how many tiles there are, so a row never ends with one tile beside
   a gap: 4 go 4 then 2x2, 5 go 5 then 3+2, 6 go 3x2, and an odd one out fills its row. */
.tiles {
  --tg: 12px; --tmin: 200px; --ta: 4; --tb: 2; --tc: 2;
  --t1: calc(var(--ta) * (var(--tmin) + var(--tg)) - var(--tg));
  --t2: calc(var(--tb) * (var(--tmin) + var(--tg)) - var(--tg));
  --wa: calc((100% - (var(--ta) - 1) * var(--tg)) / var(--ta) - .5px);
  --wb: calc((100% - (var(--tb) - 1) * var(--tg)) / var(--tb) - .5px);
  --wc: calc((100% - (var(--tc) - 1) * var(--tg)) / var(--tc) - .5px);
  display: flex; flex-wrap: wrap; gap: var(--tg); min-width: 0;
}
.tiles > * { flex: 1 1 clamp(clamp(var(--wa), (var(--t1) - 100%) * 999, var(--wb)), (var(--t2) - 100%) * 999, var(--wc)); min-width: 0; }
.tiles:has(> :nth-child(1):last-child) { --ta: 1; --tb: 1; --tc: 1; }
.tiles:has(> :nth-child(2):last-child) { --ta: 2; }
.tiles:has(> :nth-child(3):last-child) { --ta: 3; }
.tiles:has(> :nth-child(5):last-child) { --ta: 5; --tb: 3; }
.tiles:has(> :nth-child(6):last-child) { --ta: 3; }
.tiles:has(> :nth-child(9):last-child) { --ta: 3; }
.tiles:has(> :nth-child(10):last-child) { --ta: 5; --tb: 3; }
/* three tiles led by the gold figure: when three no longer fit, the gold one takes the row */
.tiles:has(> :nth-child(3):last-child) > .tile--gold:first-child { flex-basis: clamp(var(--wa), (var(--t1) - 100%) * 999, 100%); }
/* a page that asks for a column count gets it wherever the tiles fit */
.tiles.tiles[data-cols="2"] { --ta: 2; }
.tiles.tiles[data-cols="3"] { --ta: 3; }
.tiles.tiles[data-cols="4"] { --ta: 4; }
.tiles.tiles[data-cols="5"] { --ta: 5; }
.tile { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: var(--pad); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: inherit; text-decoration: none; }
a.tile:hover { border-color: var(--text); }
.tile-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tile-label { font: 400 var(--t-xs)/1.35 var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.tile-tag { font: 400 11px/1.3 var(--f-mono); color: var(--muted); white-space: nowrap; }
.tile-value { font: 800 var(--t-fig)/1 var(--f-sans); font-stretch: 78%; letter-spacing: -.015em; font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
.tile-sub { color: var(--muted); font-size: var(--t-sm); line-height: 1.4; }
.tile-foot { margin-top: auto; padding-top: 4px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tile--gold { background: var(--guilloche) 0 0 / 220px 60px, var(--rand); border-color: var(--rand-deep); color: var(--on-gold); }
.tile--gold .tile-label, .tile--gold .tile-sub, .tile--gold .tile-tag { color: #3B2C00; }
.tile--gold .btn--primary, .tile--gold .btn--gold { background: var(--on-gold); color: #F3EEE3; border-color: var(--on-gold); }
.tile--gold .btn--primary:hover, .tile--gold .btn--gold:hover { background: #24332A; }
.tile--gold :focus-visible { outline-color: var(--on-gold); }
.tile--quiet { background: transparent; border-style: dashed; }
.tile--ok .tile-value { color: var(--ok); }
.tile--warn .tile-value { color: var(--warn); }
.tile--clay .tile-value { color: var(--clay); }
.tile--sm .tile-value { font-size: 26px; }
@media (max-width: 760px) {
  .tiles { --tg: 10px; --tmin: 190px; }
  /* the gold figure, a wide tile and an only tile take the full row */
  .tiles > .tile--gold, .tiles > .tile--wide, .tiles > .tile:only-child { flex-basis: 100%; }
  /* with the first tile on its own row, the rest wrap as a set of one fewer */
  .tiles:has(> :is(.tile--gold, .tile--wide):first-child):has(> :nth-child(3):last-child) { --ta: 2; }
  .tiles:has(> :is(.tile--gold, .tile--wide):first-child):has(> :nth-child(4):last-child) { --ta: 3; }
  .tiles:has(> :is(.tile--gold, .tile--wide):first-child):has(> :nth-child(5):last-child) { --ta: 4; --tb: 2; }
  .tiles:has(> :is(.tile--gold, .tile--wide):first-child):has(> :nth-child(6):last-child) { --ta: 5; --tb: 3; }
  .tiles:has(> :is(.tile--gold, .tile--wide):first-child):has(> :nth-child(7):last-child) { --ta: 3; --tb: 2; }
  .tile { padding: 14px; }
  .tile-value { font-size: 28px; }
  .tile--gold .tile-value { font-size: 40px; }
}
@media (max-width: 360px) { .tiles > * { flex-basis: 100%; } }

/* ───────────── cards ───────────── */

.card { display: grid; gap: 14px; align-content: start; min-width: 0; padding: var(--pad); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: inherit; }
a.card { text-decoration: none; }
a.card:hover { border-color: var(--text); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card-head-main { display: grid; gap: 4px; min-width: 0; }
.card-title { font: 700 var(--t-md)/1.25 var(--f-sans); letter-spacing: -.012em; }
.card-kicker { font: 400 var(--t-xs)/1.35 var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.card--flush { padding: 0; }
.card--quiet { background: transparent; }
.card--warn { border-color: var(--warn); }
.card--clay { border-color: var(--clay); }

/* ───────────── tables ───────────── */

/* position: relative keeps visually hidden labels inside the scroll box, so they cannot widen the page */
.tbl-wrap { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl caption { caption-side: top; text-align: left; padding: 12px 14px 10px; font: 400 var(--t-xs)/1.35 var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.tbl th { padding: 9px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); font: 400 11.5px/1.35 var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); text-align: left; white-space: nowrap; }
.tbl td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: middle; font-size: 14.5px; }
.tbl tbody tr:first-child td { border-top: 0; }
.tbl .is-num { text-align: right; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.tbl th.right, .tbl td.right { text-align: right; }
.tbl td.is-actions { white-space: nowrap; }
.tbl td.is-actions > .btn + .btn, .tbl td.is-actions > .btn + .linkish, .tbl td.is-actions > .linkish + .btn { margin-left: 8px; }
.tbl .is-mono { font-family: var(--f-mono); font-size: 13px; }
.tbl .is-muted { color: var(--muted); }
.tbl .is-nowrap { white-space: nowrap; }
.tbl .is-primary { font-weight: 600; }
.tbl .is-primary a { color: inherit; text-decoration: none; }
.tbl .is-primary a:hover { text-decoration: underline; }
.tbl tr.is-click { cursor: pointer; }
.tbl tr.is-click:hover td { background: var(--surface-2); }
.tbl tr.is-click:focus-visible { outline-offset: -3px; }
.tbl tfoot td { border-top: 1.5px solid var(--line-strong); font-weight: 700; background: var(--surface); }
.tbl--dense td { padding: 7px 12px; font-size: 13.5px; }
.tbl--dense th { padding: 7px 12px; }
.cell-sub { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; line-height: 1.35; }
.tbl--scroll { min-width: 640px; }
/* rows past the open page (see tablePager in shell.js) and the control that opens the next page */
.tbl tr[data-over="all"] { display: none; }
.tbl-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--surface); }
.tbl-more-n { font: 400 var(--t-xs)/1.35 var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.tbl-more--phone { display: none; }
.tbl-wrap--scroll .tbl-pager { position: sticky; left: 0; }

@media (max-width: 760px) {
  .tbl-wrap--stack { background: transparent; border: 0; border-radius: 0; overflow: visible; }
  .tbl--stack, .tbl--stack tbody, .tbl--stack tfoot { display: block; }
  .tbl--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .tbl--stack caption { display: block; padding: 0 0 8px; }
  .tbl--stack tr { display: grid; gap: 6px; padding: 12px 14px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
  .tbl--stack td { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 0; border: 0; text-align: right; font-size: 14.5px; min-height: 22px; }
  .tbl--stack td::before { content: attr(data-label); flex: none; font: 400 11px/1.5 var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); text-align: left; }
  .tbl--stack td.is-primary { display: block; text-align: left; font-size: 15.5px; padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1px solid var(--line); }
  .tbl--stack td.is-primary::before, .tbl--stack td[data-label=""]::before { content: none; }
  .tbl--stack td.is-actions { justify-content: flex-start; flex-wrap: wrap; gap: 8px; padding-top: 6px; white-space: normal; }
  .tbl--stack td.is-actions > .btn + .btn, .tbl--stack td.is-actions > .btn + .linkish, .tbl--stack td.is-actions > .linkish + .btn { margin-left: 0; }
  .tbl--stack tr[data-over] { display: none; }
  .tbl-wrap--stack .tbl-more { padding: 4px 0 0; border-top: 0; background: transparent; }
  .tbl-wrap--stack .tbl-more--phone:not([hidden]) { display: flex; }
  .tbl-wrap--stack .tbl-more--all { display: none; }
  .tbl-wrap--stack .tbl-more .btn { min-height: var(--hit); padding: 0 16px; font-size: 14.5px; }
  .tbl--stack td.is-empty { display: none; }
  .tbl--stack tr.is-click:hover td { background: transparent; }
  .tbl--stack tfoot tr { border-top: 1.5px solid var(--line-strong); }
  .tbl--stack tfoot td { border-top: 0; }
}

/* ───────────── chips ───────────── */

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 8px; border: 1px solid currentColor; border-radius: var(--radius-chip); font: 400 11px/1.55 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--muted); background: var(--neutral-tint); vertical-align: middle; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip--ok { color: var(--ok); background: var(--ok-tint); }
.chip--warn { color: var(--warn); background: var(--warn-tint); }
.chip--warn::before { border-radius: 1px; }
.chip--clay { color: var(--clay); background: var(--clay-tint); }
.chip--clay::before { border-radius: 0; transform: rotate(45deg); width: 5px; height: 5px; }
.chip--info { color: var(--link); background: var(--info-tint); }
.chip--gold { color: var(--on-gold); background: var(--rand); border-color: var(--rand-deep); }
.chip--plain::before { content: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ───────────── buttons ───────────── */

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--hit); padding: 0 16px; border: 1.5px solid transparent; border-radius: var(--radius); background: transparent; color: var(--text); font: 600 14.5px/1.1 var(--f-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color .16s, border-color .16s, color .16s; -webkit-tap-highlight-color: transparent; }
.btn .icon { width: 16px; height: 16px; }
.btn--primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn--primary:hover { background: var(--btn-bg-hover); }
.btn--gold { background: var(--rand); color: var(--on-gold); }
.btn--gold:hover { background: var(--rand-deep); }
.btn--gold:focus-visible { outline-color: var(--text); }
.btn--secondary { border-color: var(--text); background: transparent; }
.btn--secondary:hover { background: var(--text); color: var(--bg); }
.btn--ghost { padding: 0 10px; color: var(--link); }
.btn--ghost:hover { background: var(--neutral-tint); }
.btn--danger { border-color: var(--clay); color: var(--clay); }
.btn--danger:hover { background: var(--clay); color: var(--bg); }
.btn--sm { min-height: 32px; padding: 0 11px; font-size: 13px; border-width: 1px; }
.btn--block { display: flex; width: 100%; }
.btn { max-width: 100%; }
.card-foot .btn, .tile-foot .btn, .notice-action .btn, .empty-action .btn { white-space: normal; text-align: center; padding-top: 6px; padding-bottom: 6px; line-height: 1.2; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .48; cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; opacity: .7; }
.linkish { padding: 0; border: 0; background: none; color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font: inherit; cursor: pointer; }
.linkish:hover { text-decoration-thickness: 2px; }
.ext { display: inline-flex; align-items: center; gap: 5px; }
.ext .icon { width: 13px; height: 13px; }
@media (max-width: 760px) { .btn--sm { min-height: 40px; padding: 0 12px; } }

/* ───────────── fields and forms ───────────── */

.form { display: grid; gap: 18px; min-width: 0; }
.form-error { padding: 11px 14px; border: 1px solid var(--clay); border-left-width: 3px; border-radius: var(--radius); background: var(--clay-tint); color: var(--clay); font-size: 14.5px; font-weight: 500; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 4px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field-label { font: 600 var(--t-sm)/1.3 var(--f-sans); }
.field-label .opt { font-weight: 400; color: var(--muted); }
.field-control { position: relative; display: flex; align-items: stretch; min-width: 0; }
.input { width: 100%; min-width: 0; min-height: var(--hit); padding: 8px 12px; background: var(--field-bg); border: 1px solid var(--field-line); border-radius: var(--radius); color: var(--text); font: 400 15px/1.4 var(--f-sans); transition: border-color .14s; }
.input::placeholder { color: var(--muted); opacity: .7; }
.input:hover { border-color: var(--muted); }
.input:focus-visible { border-color: var(--text); outline-width: 2px; outline-offset: 1px; }
textarea.input { min-height: 96px; resize: vertical; line-height: 1.5; }
select.input { appearance: none; -webkit-appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%234A554D' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; }
html[data-surface="admin"] select.input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23A8BCAE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.input[disabled] { opacity: .6; cursor: not-allowed; }
.input.is-num, .input[inputmode="numeric"], .input[inputmode="decimal"] { font-variant-numeric: tabular-nums; }
.affix { display: grid; place-items: center; padding: 0 11px; background: var(--surface-2); border: 1px solid var(--field-line); font: 400 14px/1 var(--f-mono); color: var(--muted); white-space: nowrap; }
.affix--pre { border-right: 0; border-radius: var(--radius) 0 0 var(--radius); }
.affix--post { border-left: 0; border-radius: 0 var(--radius) var(--radius) 0; }
.affix--pre + .input { border-radius: 0 var(--radius) var(--radius) 0; }
.field-control:has(.affix--post) .input { border-radius: var(--radius) 0 0 var(--radius); }
.field-control:has(.affix--pre):has(.affix--post) .input { border-radius: 0; }
.field-hint { color: var(--muted); font-size: 13px; line-height: 1.4; }
.field-error { color: var(--clay); font-size: 13px; font-weight: 500; line-height: 1.4; }
.field[data-invalid="true"] .input { border-color: var(--clay); }
.field[data-ok="true"] .field-hint { color: var(--ok); }

.check { display: grid; grid-template-columns: 22px 1fr; column-gap: 11px; row-gap: 2px; align-items: start; min-height: var(--hit); padding: 9px 0; cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 1px 0 0; flex: none; border: 1.5px solid var(--field-line); border-radius: 4px; background: var(--field-bg) center / 14px 14px no-repeat; cursor: pointer; transition: border-color .14s, background-color .14s; }
.check input[type="radio"] { border-radius: 50%; }
.check:hover input:not(:disabled) { border-color: var(--text); }
.check input:checked { border-color: var(--check); background-color: var(--check); background-image: var(--check-mark); }
.check input[type="radio"]:checked { background-image: none; box-shadow: inset 0 0 0 3.5px var(--field-bg); }
.check input:disabled { opacity: .5; cursor: not-allowed; }
.check-label { font-size: 15px; line-height: 1.4; }
.check .field-hint, .check .field-error { grid-column: 2; }
.check--boxed { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.check--boxed:has(input:checked) { border-color: var(--text); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
.radios { display: grid; gap: 8px; }
.radios--row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
@media (max-width: 760px) { .radios--row { grid-auto-flow: row; } .input { font-size: 16px; } }

.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); width: fit-content; max-width: 100%; justify-self: start; }
.seg button { min-height: 32px; padding: 0 13px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font: 600 13.5px/1 var(--f-sans); white-space: nowrap; }
.seg button:hover { color: var(--text); }
.seg button[aria-pressed="true"] { background: var(--text); color: var(--bg); }
.seg .seg-n { margin-left: 6px; font: 400 11px/1 var(--f-mono); opacity: .8; }
@media (max-width: 760px) { .seg button { min-height: 40px; flex: 1 1 auto; } }

.code-input { display: grid; gap: 10px; padding: 14px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface); }
.code-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.code-row .field { flex: 0 1 220px; }
.code-input .input { font: 500 20px/1.2 var(--f-mono); letter-spacing: .3em; max-width: 220px; }
.code-help { color: var(--muted); font-size: 13px; line-height: 1.45; }

/* ───────────── notices, empty states, checklists ───────────── */

.notice { display: grid; gap: 4px; padding: 12px 14px 12px 15px; border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: var(--radius); background: var(--surface); font-size: 14.5px; min-width: 0; }
.notice-title { font-weight: 700; }
.notice-body { color: var(--text); }
.notice-action { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 8px; }
.notice--info { border-left-color: var(--link); }
.notice--ok { border-left-color: var(--ok); background: var(--ok-tint); }
.notice--warn { border-left-color: var(--warn); background: var(--warn-tint); }
.notice--error { border-left-color: var(--clay); background: var(--clay-tint); }
.notice--gold { border-left-color: var(--rand); }
.fineprint { color: var(--muted); font-size: 12.5px; line-height: 1.5; max-width: 78ch; }
.fineprint--rule { padding-left: 12px; border-left: 3px solid var(--rand); }

.empty { display: grid; gap: 6px; justify-items: start; padding: 22px 20px; border: 1px dashed var(--line); border-radius: var(--radius); background: transparent; }
.empty-kicker { font: 400 11px/1.4 var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.empty-title { font: 700 var(--t-base)/1.3 var(--f-sans); }
.empty-body { color: var(--muted); font-size: 14px; max-width: 56ch; }
.empty-action { margin-top: 8px; }

.checklist { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 2px 10px; padding: 10px 14px; border-top: 1px solid var(--line); font-size: 14.5px; }
.checklist li:first-child { border-top: 0; }
.checklist .mark { grid-row: span 2; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; }
.checklist .mark .icon { width: 13px; height: 13px; stroke-width: 2.2; }
.checklist li[data-ok="true"] .mark { background: var(--ok-tint); color: var(--ok); }
.checklist li[data-ok="false"] .mark { background: var(--clay-tint); color: var(--clay); }
.checklist li[data-ok="pending"] .mark { background: var(--neutral-tint); color: var(--muted); }
.checklist li[data-ok="false"] .check-text { font-weight: 600; }
.checklist .check-detail { grid-column: 2; color: var(--muted); font-size: 13px; }
.checklist li[data-ok="false"] .check-detail { color: var(--clay); }
.checklist .check-state { font: 400 11px/1.6 var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); margin-left: 8px; }

.list { display: grid; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.list-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--line); min-width: 0; color: inherit; text-decoration: none; }
.list-item:first-child { border-top: 0; }
a.list-item:hover { background: var(--surface-2); }
.list-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.list-title { font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.list-body { color: var(--muted); font-size: 13px; line-height: 1.4; }
.list-meta { font: 400 12px/1.4 var(--f-mono); color: var(--muted); white-space: nowrap; }
.list-count { min-width: 30px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font: 500 13px/1.5 var(--f-mono); text-align: center; font-variant-numeric: tabular-nums; }
.list-count[data-hot="true"] { border-color: var(--warn); color: var(--warn); background: var(--warn-tint); }
.list-item .icon.chev { color: var(--muted); width: 16px; height: 16px; }
.list-marker { width: 8px; height: 8px; flex: none; background: var(--muted); }
.list-item[data-tone="warn"] .list-marker { background: var(--warn); }
.list-item[data-tone="clay"] .list-marker { background: var(--clay); transform: rotate(45deg); }
.list-item[data-tone="ok"] .list-marker { background: var(--ok); border-radius: 50%; }
.list-item[data-tone="gold"] .list-marker { background: var(--rand); box-shadow: 0 0 0 1px var(--rand-deep); }
@media (max-width: 760px) {
  .list-item { flex-wrap: wrap; }
  .list-item > .btn { margin-left: 20px; }
  /* a long meta (a chip and a date) drops under the title instead of crushing it into a sliver */
  .list-main { flex: 1 1 150px; }
  .list-meta { white-space: normal; }
}

/* ───────────── statement pieces: key-value rows, progress, slip ───────────── */

.kv { display: grid; gap: 0; min-width: 0; }
.kv-row { display: flex; align-items: baseline; gap: 8px; min-height: 32px; padding: 5px 0; min-width: 0; }
.kv-k { color: var(--muted); font-size: 14px; flex: none; max-width: 60%; }
.kv-ld { flex: 1; min-width: 12px; border-bottom: 1px dotted var(--muted); opacity: .55; transform: translateY(-4px); }
.kv-v { text-align: right; font-size: 14.5px; font-weight: 500; font-variant-numeric: tabular-nums lining-nums; min-width: 0; overflow-wrap: anywhere; }
.kv-v.mono { font-size: 13.5px; font-weight: 400; }
.kv--plain .kv-ld { border: 0; }
.kv--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
@media (max-width: 760px) { .kv--cols { grid-template-columns: minmax(0, 1fr); } }

.progress { display: grid; gap: 6px; min-width: 0; }
.progress-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; }
.progress-label { color: var(--muted); }
.progress-value { font: 400 12.5px/1.4 var(--f-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.progress-track { position: relative; height: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.progress-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--chart); border-radius: 999px; min-width: 2px; }
.progress--gold .progress-fill { background: var(--rand-deep); }
.progress--warn .progress-fill { background: var(--warn); }
.progress--clay .progress-fill { background: var(--clay); }

.slip { position: relative; display: grid; gap: 0; max-width: 460px; width: 100%; padding: 22px 22px 18px; background: var(--guilloche-soft) 0 0 / 220px 60px, var(--surface); border: 1px solid var(--line); border-top: 2px dashed var(--line); border-bottom: 2px dashed var(--line); border-radius: 2px; }
.slip-head { display: grid; gap: 4px; padding-bottom: 12px; border-bottom: 2px solid var(--line-strong); }
.slip-title { font: 700 20px/1.1 var(--f-sans); letter-spacing: -.015em; }
.slip-sub { font: 400 11.5px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.slip .kv { padding: 8px 0 12px; }
.slip-total { display: grid; gap: 6px; padding-top: 12px; border-top: 2px solid var(--line-strong); }
.slip-total .fig { justify-self: end; font-size: 44px; }
.slip-note { margin-top: 12px; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.slip-bar { margin: 14px -22px -18px; padding: 9px 22px; background: var(--rand); color: var(--on-gold); font-weight: 700; font-size: 13.5px; }
.slip-mark { position: absolute; right: 18px; top: 16px; font: 400 10.5px/1.3 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--clay); border: 1px solid var(--clay); padding: 2px 6px; border-radius: 2px; transform: rotate(-4deg); opacity: .85; }

/* ───────────── bar chart ───────────── */

.bars { display: grid; gap: 6px; min-width: 0; }
.bars svg { width: 100%; height: auto; overflow: visible; }
.bars .bar { fill: var(--chart); }
.bars .bar:hover { fill: var(--rand-deep); }
.bars .grid-line { stroke: var(--chart-grid); stroke-width: 1; }
.bars .axis-line { stroke: var(--text); stroke-width: 1.2; }
.bars text { fill: var(--muted); font: 400 11px var(--f-mono); }
.bars-caption { color: var(--muted); font: 400 var(--t-xs)/1.4 var(--f-mono); letter-spacing: .04em; }

/* ───────────── stepper, tabs ───────────── */

.stepper { display: flex; flex-wrap: wrap; gap: 6px 4px; counter-reset: step; }
.stepper li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.stepper li::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; font: 400 11px/1 var(--f-mono); background: var(--surface); }
.stepper li:not(:last-child)::after { content: ""; width: 18px; height: 1px; background: var(--line); margin: 0 4px; }
.stepper li[data-state="done"] { color: var(--text); }
.stepper li[data-state="done"]::before { background: var(--ok-tint); border-color: var(--ok); color: var(--ok); }
.stepper li[aria-current="step"] { color: var(--text); font-weight: 700; }
.stepper li[aria-current="step"]::before { background: var(--text); border-color: var(--text); color: var(--bg); }
@media (max-width: 760px) { .stepper li:not([aria-current="step"]) .step-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .stepper li:not(:last-child)::after { width: 10px; margin: 0 1px; } }

.tabs { display: grid; gap: 16px; min-width: 0; }
.tablist { position: relative; display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tablist::-webkit-scrollbar { display: none; }
.tab-btn { position: relative; min-height: var(--hit); padding: 0 14px; border: 0; background: none; color: var(--muted); font: 600 14.5px/1 var(--f-sans); white-space: nowrap; }
.tab-btn:hover { color: var(--text); }
.tab-btn[aria-selected="true"] { color: var(--text); }
.tab-btn[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2.5px; background: var(--text); }
.tab-btn:focus-visible { outline-offset: -3px; }
.tab-n { margin-left: 6px; font: 400 11px/1 var(--f-mono); color: var(--muted); }

/* ───────────── messages ───────────── */

.msgs { display: grid; gap: 10px; }
.msg { display: grid; gap: 4px; max-width: min(560px, 88%); padding: 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); justify-self: start; }
.msg--mine { justify-self: end; background: var(--surface-2); }
.msg-meta { font: 400 11.5px/1.4 var(--f-mono); color: var(--muted); }
.msg-text { white-space: pre-line; font-size: 14.5px; }

/* ───────────── dialogs: modal, drawer, sheet ───────────── */

dialog { color: var(--text); }
dialog::backdrop { background: var(--backdrop); }
.modal { width: min(520px, calc(100vw - 24px)); max-height: min(86vh, 760px); padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-modal); overflow: hidden; }
.modal[open] { display: flex; flex-direction: column; }
.modal--wide { width: min(760px, calc(100vw - 24px)); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1.5px solid var(--line-strong); }
.modal-title { font: 800 21px/1.15 var(--f-sans); letter-spacing: -.02em; }
.modal-kicker { font: 400 11px/1.4 var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.modal-x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: -6px -8px 0 0; border: 0; border-radius: 50%; background: none; color: var(--muted); }
.modal-x:hover { background: var(--neutral-tint); color: var(--text); }
.modal-body { display: grid; gap: 14px; padding: 18px 20px; overflow-y: auto; align-content: start; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--line); }
.modal-body .form .form-actions { justify-content: flex-end; }
.drawer { margin: 0 0 0 auto; width: min(440px, 100vw); height: 100vh; max-height: 100vh; padding: 0; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: var(--bg); box-shadow: var(--shadow-modal); }
.drawer[open] { display: flex; flex-direction: column; }
.drawer .modal-head { background: var(--surface); }
.drawer .modal-body { flex: 1; }
@media (max-width: 760px) {
  .modal { margin: auto 0 0; width: 100vw; max-width: 100vw; max-height: 92vh; border-radius: 12px 12px 0 0; border-width: 1px 0 0; }
  .modal-actions { justify-content: stretch; }
  .modal-actions .btn { flex: 1 1 auto; }
  .drawer { width: 100vw; border-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .modal[open] { animation: rise .22s var(--ease); }
  .drawer[open] { animation: slide .26s var(--ease); }
  .toast { animation: rise .22s var(--ease); }
}
@keyframes rise { from { transform: translateY(10px); opacity: 0; } }
@keyframes slide { from { transform: translateX(24px); opacity: 0; } }

/* ───────────── loading and failure ───────────── */

/* the quiet skeleton: grey lines where the screen will be. No spinner. */
.skel { display: grid; gap: 14px; padding: 6px 0 24px; max-width: 760px; }
.skel-line { display: block; height: 14px; border-radius: 4px; background: var(--surface-2); }
.skel-line--head { height: 30px; margin-bottom: 10px; }
.center .skel { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .skel-line { animation: skel 1.6s ease-in-out infinite; }
  .skel-line:nth-child(odd) { animation-delay: .2s; }
}
@keyframes skel { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* "Could not reach createmedia." with Retry */
.failed { display: grid; gap: 8px; justify-items: start; padding: 22px 20px; border: 1px solid var(--line); border-left: 3px solid var(--muted); border-radius: var(--radius); background: var(--surface); max-width: 560px; }
.failed-title { font: 700 var(--t-base)/1.3 var(--f-sans); }
.failed-body { color: var(--muted); font-size: 14.5px; }
.failed .row { margin-top: 6px; }

/* local development only: the dev mailbox helper under a one-time code field */
.dev-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border: 1px dashed var(--field-line, var(--line)); border-radius: var(--radius); background: var(--surface); font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.dev-code p { flex: 1 1 220px; }
.dev-code[data-state="ready"] p { color: var(--text); }
.dev-tag { display: inline-block; margin-right: 4px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 3px; font: 400 10.5px/1.5 var(--f-mono); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); background: var(--surface); }

/* ───────────── toasts ───────────── */

.toasts[popover] { inset: auto 18px 18px auto; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; color: inherit; }
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 300; display: grid; gap: 8px; justify-items: end; pointer-events: none; max-width: min(420px, calc(100vw - 24px)); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 11px 14px; background: #0E1A14; color: #F3EEE3; border-left: 3px solid var(--rand); border-radius: var(--radius); font-size: 14px; line-height: 1.4; box-shadow: 0 8px 24px rgba(14, 26, 20, .25); }
html[data-surface="admin"] .toast { background: #F3EEE3; color: #0E1A14; }
.toast--error { border-left-color: #E7907A; }
html[data-surface="admin"] .toast--error { border-left-color: #9C3A24; }
.toast--ok { border-left-color: #7FD3A2; }
html[data-surface="admin"] .toast--ok { border-left-color: #1F6B43; }
.toast .linkish { color: inherit; font-weight: 700; white-space: nowrap; }
@media (max-width: 760px) { .toasts, .toasts[popover] { left: 12px; right: 12px; bottom: calc(var(--tab-h) + 12px + env(safe-area-inset-bottom, 0px)); max-width: none; justify-items: stretch; } }

/* ───────────── bare pages: gates, join flows, signed-out ───────────── */

.center { display: grid; place-items: center; min-height: calc(100vh - var(--pv-h) - 120px); padding: 24px 0; }
.center-in { display: grid; gap: 18px; width: min(560px, 100%); }
/* on a page without the app shell (sign in, join) nothing else gives the centred column its gutter */
#auth-root > .center { min-height: 100vh; padding: 24px 16px; }
.center-in--wide { width: min(760px, 100%); }
.brandline { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.brandline svg { width: 30px; height: 30px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
@media print {
  .side, .tabbar, .topbar, .toasts { display: none !important; }
  .shell { display: block; }
}