@font-face { font-family: Geist; src: url('fonts/Geist.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url('fonts/GeistMono.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

/* Workspace and admin consoles. Colour packs are the same as the landing page and docs (web/style.css). */
[data-colour="soft-electric"] { --accent:#5F96FF; --light-canvas:#F8FAFF; --light-card:#FFFFFF; --light-ink:#1E2839; --light-muted:#5F6C7E; --light-border:#E2E9F5; --on-accent:#1E2839; }
[data-colour="deep-teal"] { --accent:#007B83; --light-canvas:#F5FAF9; --light-card:#FFFFFF; --light-ink:#183031; --light-muted:#5C6D6B; --light-border:#DCEAE7; --on-accent:#FFFFFF; }
[data-colour="neutral"] { --accent:#767676; --light-canvas:#FFFFFF; --light-card:#FFFFFF; --light-ink:#171717; --light-muted:#626262; --light-border:#DADADA; --on-accent:#FFFFFF; }
[data-mode="light"] { --canvas:var(--light-canvas); --card:var(--light-card); --ink:var(--light-ink); --muted:var(--light-muted); --border:var(--light-border); --panel:color-mix(in srgb, var(--light-canvas) 50%, white); --control:var(--card); --hover:color-mix(in srgb, var(--accent) 4%, var(--card)); --accent-soft:color-mix(in srgb, var(--accent) 10%, var(--card)); --accent-ink:var(--accent); --shadow:0 1px 2px rgb(16 24 40 / .04); --lift:0 12px 32px rgb(16 24 40 / .14); color-scheme:light; }
[data-colour="soft-electric"][data-mode="light"] { --accent-ink:#2B5DAD; }
[data-mode="charcoal"] { --canvas:#252629; --panel:#2B2C2F; --card:#333438; --ink:#ECEDEF; --muted:#B8BBC1; --border:#48494C; --control:#3A3B3F; --hover:#3B3C40; --accent-soft:color-mix(in srgb, var(--accent) 18%, #333438); --accent-ink:color-mix(in srgb, var(--accent) 45%, white); --shadow:none; --lift:0 16px 40px rgb(0 0 0 / .45); color-scheme:dark; }
[data-mode="dark"] { --canvas:#000000; --panel:#050505; --card:#0B0B0B; --ink:#F4F4F4; --muted:#B6B6B6; --border:#2B2B2B; --control:#151515; --hover:#151515; --accent-soft:color-mix(in srgb, var(--accent) 16%, #0B0B0B); --accent-ink:color-mix(in srgb, var(--accent) 45%, white); --shadow:none; --lift:0 16px 40px rgb(0 0 0 / .6); color-scheme:dark; }

:root {
  --ok: #2e9b73; --bad: #d2493f; --warn: #b7791f;
  --faint: color-mix(in srgb, var(--muted) 65%, var(--card));
  --subtle: color-mix(in srgb, var(--ink) 4%, var(--card));
  --hair: color-mix(in srgb, var(--border) 60%, var(--card));
  --rail: color-mix(in srgb, var(--ink) 16%, var(--card));
  --ease: cubic-bezier(.2, .8, .2, 1);
  font-family: Geist, ui-sans-serif, system-ui, sans-serif;
  font-size: 13px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
[data-mode="charcoal"], [data-mode="dark"] { --ok: #4cc195; --bad: #ef6b61; --warn: #e0a84a; --faint: color-mix(in srgb, var(--muted) 72%, var(--card)); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--canvas); color: var(--ink); }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
code, .mono { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; padding: 8px 12px; border-radius: 8px; background: var(--card); }
.skip:focus { left: 8px; }
.dim { color: var(--muted); }
.small { font-size: 11.5px; }
.nowrap { white-space: nowrap; }
.warn-text { color: var(--warn); } .bad-text { color: var(--bad); }

/* ---------- Shell ---------- */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); height: 100dvh; }
.side { display: flex; flex-direction: column; gap: 1px; padding: 18px 12px 14px; background: var(--panel); border-right: 1px solid var(--border); overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 8px; padding: 2px 8px 16px; font-size: 18px; font-weight: 650; letter-spacing: -.03em; }
.brand-mark { width: 12px; height: 20px; background: var(--accent); -webkit-mask: url('mark.svg') center / contain no-repeat; mask: url('mark.svg') center / contain no-repeat; }
.brand .badge { margin-left: 2px; }
.workspace { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--card); box-shadow: var(--shadow); font-weight: 620; text-align: left; transition: border-color .15s; }
.workspace:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.ws-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--accent); color: var(--on-accent, #fff); font-size: 11px; font-weight: 750; }
.workspace small { margin-left: auto; color: var(--muted); font-weight: 500; }
.nav-group { margin: 16px 10px 5px; color: var(--faint); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.nav { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--muted); font-weight: 560; text-align: left; text-decoration: none !important; transition: background .15s, color .15s; }
.nav:hover { background: var(--hover); color: var(--ink); }
.nav.active { background: var(--accent-soft); color: var(--accent-ink); }
.nav svg { width: 16px; height: 16px; flex: none; }
.count { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--on-accent, #fff); font-size: 11px; font-weight: 650; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.count.quiet { background: none; color: var(--faint); }
.count.warn { background: color-mix(in srgb, var(--warn) 16%, var(--card)); color: var(--warn); }
.count.alert { background: color-mix(in srgb, var(--bad) 14%, var(--card)); color: var(--bad); }
.side-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.usage { padding: 2px 10px 12px; font-size: 11.5px; color: var(--muted); }
.usage-row { display: flex; justify-content: space-between; gap: 8px; }
.usage-row b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.meter { height: 4px; margin-top: 7px; border-radius: 2px; background: var(--subtle); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 2px; background: var(--accent); transition: width .4s var(--ease); }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.top { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 28px; border-bottom: 1px solid var(--border); background: var(--card); }
.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--muted); }
.crumbs b { overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.crumbs a { color: var(--muted); }
.crumbs .sep { color: var(--faint); }
.search { display: flex; align-items: center; gap: 8px; width: 300px; height: 34px; margin-left: auto; padding: 0 8px 0 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--canvas); color: var(--faint); text-align: left; transition: border-color .15s, color .15s; }
.search:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); color: var(--muted); }
.search span { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
kbd { padding: 1px 5px; border: 1px solid var(--border); border-radius: 5px; background: var(--card); color: var(--muted); font: 500 11px Geist, sans-serif; }
.content { flex: 1; overflow: auto; padding: 28px; outline: none; }
.page { max-width: 1360px; margin: 0 auto; }
.page.narrow { max-width: 1040px; }
.page.enter { animation: page-in .22s var(--ease); }

.head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.head h1 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.03em; line-height: 1.25; }
.head p { margin: 3px 0 0; color: var(--muted); }
.head .actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: none; }
.source-title { display: grid; gap: 8px; min-width: 0; }
.source-title h1 { display: flex; align-items: center; gap: 10px; }
.source-title h1 .dot { width: 10px; height: 10px; margin: 0; }
.source-title .copyline { max-width: 580px; }

/* ---------- Controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--control); box-shadow: var(--shadow); font-weight: 600; white-space: nowrap; color: var(--ink); text-decoration: none !important; transition: background .15s, border-color .15s, filter .15s, transform .1s; }
.btn:hover:not(:disabled) { background: var(--hover); border-color: color-mix(in srgb, var(--ink) 18%, var(--border)); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn svg { width: 14px; height: 14px; flex: none; }
.btn.primary { border-color: var(--accent); background: var(--accent); color: var(--on-accent, #fff); }
.btn.primary:hover:not(:disabled) { background: var(--accent); filter: brightness(1.07); }
.btn.small { height: 28px; padding: 0 10px; font-size: 12px; }
.btn.ghost { border-color: transparent; background: none; box-shadow: none; color: var(--muted); }
.btn.ghost:hover:not(:disabled) { background: var(--hover); color: var(--ink); border-color: transparent; }
.btn.danger { color: var(--bad); }
.btn.danger-fill { border-color: var(--bad); background: var(--bad); color: #fff; }
.seg { display: inline-flex; flex: none; padding: 2px; border: 1px solid var(--border); border-radius: 9px; background: var(--canvas); }
.seg button { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 0; border-radius: 7px; background: none; color: var(--muted); font-weight: 600; font-size: 12px; transition: background .15s, color .15s, box-shadow .15s; }
.seg button:hover:not(:disabled) { color: var(--ink); }
.seg button.on { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--border), var(--shadow); }
.seg svg { width: 14px; height: 14px; }
.field { height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--control); min-width: 0; transition: border-color .15s, box-shadow .15s; }
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.field.invalid { border-color: var(--bad); }
textarea.field { height: auto; padding: 8px 10px; resize: vertical; }
.field.small { height: 28px; padding: 0 6px; font-size: 12px; }
.search-field { width: 280px; }
.chip { height: 30px; padding: 0 10px; border: 1px dashed var(--border); border-radius: 15px; background: none; color: var(--muted); font-size: 12px; font-weight: 560; transition: border-color .15s, color .15s, background .15s; }
.chip:hover { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 25%, var(--border)); }
.chip.set { display: inline-flex; align-items: center; gap: 6px; border-style: solid; border-color: transparent; background: var(--accent-soft); color: var(--accent-ink); }
.chip svg { width: 12px; height: 12px; }
.switch { position: relative; width: 34px; height: 20px; padding: 0; border: 0; border-radius: 10px; background: var(--rail); transition: background .2s; }
.switch::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .25); transition: transform .2s var(--ease); }
.switch.on { background: var(--accent); }
.switch.on::after { transform: translateX(14px); }
.live { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border: 0; border-radius: 15px; background: none; color: var(--muted); font-size: 12px; font-weight: 600; }
button.live:hover { background: var(--hover); color: var(--ink); }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: pulse 2.4s infinite; }
.live.paused::before { background: var(--faint); animation: none; }

/* ---------- Cards, tables, badges ---------- */
.card { border: 1px solid var(--border); border-radius: 12px; background: var(--card); box-shadow: var(--shadow); }
.card-head { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 10px 16px; border-bottom: 1px solid var(--hair); }
.card-head h3 { margin: 0; font-size: 13px; font-weight: 650; }
.card-head small { color: var(--muted); }
.card-body { padding: 16px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.toolbar .grow { flex: 1; }
table.list { width: 100%; border-collapse: collapse; }
.list th { padding: 9px 14px; border-bottom: 1px solid var(--border); background: var(--card); color: var(--muted); font-size: 11.5px; font-weight: 600; text-align: left; white-space: nowrap; }
.list td { height: 46px; padding: 0 14px; border-bottom: 1px solid var(--hair); white-space: nowrap; transition: background .12s; }
.list tr:last-child td { border-bottom: 0; }
.list tbody tr:hover td { background: var(--hover); }
.list tbody tr.sel td { background: var(--accent-soft); }
.list tbody tr.sel td:first-child { box-shadow: inset 2px 0 var(--accent); }
.list.compact td { height: 38px; padding: 0 8px; }
.list .num { text-align: right; font-variant-numeric: tabular-nums; }
.list tbody tr[data-href], .list tbody tr.link { cursor: pointer; }
.title-cell { max-width: 0; width: 45%; }
.title-cell .truncate { max-width: calc(100% - 4px); }
.title-cell .type { margin-left: 8px; font-size: 11.5px; }
.truncate { display: inline-block; max-width: 320px; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.truncate.narrow { max-width: 180px; }
.name-cell { display: flex; align-items: center; }
.name-cell .dot { margin-right: 10px; }
.status { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12px; white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.status:empty { gap: 0; }
.status.ok { color: var(--ok); } .status.bad { color: var(--bad); } .status.warn { color: var(--warn); } .status.off { color: var(--faint); }
.status.quiet { color: var(--muted); font-weight: 500; }
.status.quiet::before { background: var(--ok); }
.code { display: inline-block; min-width: 36px; padding: 1px 6px; border-radius: 5px; font: 600 11.5px "Geist Mono", monospace; text-align: center; font-variant-numeric: tabular-nums; }
.code.ok { background: color-mix(in srgb, var(--ok) 13%, var(--card)); color: var(--ok); }
.code.bad { background: color-mix(in srgb, var(--bad) 13%, var(--card)); color: var(--bad); }
.code.warn { background: color-mix(in srgb, var(--warn) 15%, var(--card)); color: var(--warn); }
.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 10px; background: var(--subtle); color: var(--muted); font-size: 11px; font-weight: 650; white-space: nowrap; }
.badge.live { background: color-mix(in srgb, var(--ok) 14%, var(--card)); color: var(--ok); }
.badge.bad { background: color-mix(in srgb, var(--bad) 13%, var(--card)); color: var(--bad); }
.tag { display: inline-flex; align-items: center; height: 22px; margin: 2px 6px 2px 0; padding: 0 8px; border-radius: 6px; background: var(--subtle); color: var(--ink); font-size: 12px; }
.dot { display: inline-block; flex: none; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--c); vertical-align: 1px; }
.outs { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.out { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border: 1px solid var(--hair); border-radius: 6px; color: var(--muted); font-size: 11.5px; }
.out svg { width: 12px; height: 12px; }
.out.ok { color: var(--ok); } .out.warn { color: var(--warn); } .out.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, var(--border)); }
.out.skip { opacity: .6; }
.out.check { gap: 6px; height: 28px; padding: 0 10px; color: var(--ink); cursor: pointer; }
.empty { display: grid; justify-items: center; gap: 4px; padding: 48px 24px; color: var(--muted); text-align: center; }
.empty b { color: var(--ink); font-weight: 620; }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-height: 44px; padding: 6px 10px 6px 14px; border-bottom: 1px solid var(--border); font-size: 12px; font-variant-numeric: tabular-nums; }
.pager label { display: inline-flex; align-items: center; gap: 6px; }
.pager .seg button { padding: 0 7px; }
.spark { width: 90px; height: 22px; vertical-align: middle; }
.spark path { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.spark path.area { fill: var(--accent-soft); stroke: none; }
.spark-n { display: inline-block; min-width: 28px; margin-left: 6px; text-align: right; font-variant-numeric: tabular-nums; }
.list tr.fresh td { animation: fresh 2.6s ease-out; }

/* ---------- Metrics and charts ---------- */
.metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.metric { display: grid; align-content: start; gap: 2px; padding: 13px 15px; text-align: left; font: inherit; color: inherit; }
.metric small { color: var(--muted); font-weight: 560; }
.metric b { font-size: 21px; font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.metric em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.metric em.up { color: var(--bad); } .metric em.good { color: var(--ok); }
.metric.clickable { cursor: pointer; transition: border-color .15s, transform .15s var(--ease); }
.metric.clickable:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); transform: translateY(-1px); }
.histo-card { margin-bottom: 16px; }
.histo-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px 10px; font-size: 12px; }
.histo-head b { font-weight: 650; }
.legend { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.legend i { width: 8px; height: 8px; margin-left: 6px; border-radius: 2px; }
.legend .k-ok { background: color-mix(in srgb, var(--accent) 55%, var(--card)); } .legend .k-bad { background: var(--bad); }
.histo { display: flex; align-items: flex-end; gap: 3px; padding: 0 16px; }
.histo i { display: flex; flex: 1; flex-direction: column-reverse; min-width: 2px; height: 100%; transform-origin: bottom; }
.histo span { display: block; border-radius: 2px 2px 0 0; background: color-mix(in srgb, var(--accent) 55%, var(--card)); transition: filter .12s; }
.histo span.f { background: var(--bad); }
.histo i:hover span { filter: brightness(.88); }
.page.enter .histo i { animation: grow .5s var(--ease) both; animation-delay: calc(var(--i) * 6ms); }
.histo-axis { display: flex; justify-content: space-between; padding: 7px 16px 11px; color: var(--faint); font-size: 11px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }
.grid2 > .histo-card { margin-bottom: 0; }

/* ---------- Master-detail ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.split.open { grid-template-columns: minmax(0, 1fr) minmax(400px, 34%); }
.split > .card { min-width: 0; overflow-x: auto; }
.split.open .hide-open { display: none; }
@media (min-width: 1760px) { .split.open .hide-open { display: table-cell; } }
.drawer { position: sticky; top: 0; display: flex; flex-direction: column; max-height: calc(100dvh - 110px); overflow: hidden; }
.drawer.enter { animation: panel-in .26s var(--ease); }
.drawer.swap .drawer-title, .drawer.swap .drawer-body { animation: swap .2s ease-out; }
.drawer-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid var(--hair); }
.drawer-head .close { display: none; }
.drawer-title { flex: 1; min-width: 0; }
.drawer-title h3 { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.drawer-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 5px; font-size: 12px; }
.drawer-actions { display: flex; gap: 6px; flex: none; }
.drawer .tabs { flex: none; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px; overscroll-behavior: contain; }
.kv { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 9px 12px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { display: flex; flex-wrap: wrap; align-items: center; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.kv dd.mono { display: block; word-break: break-all; }
.tabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--hair); }
.tabs button, .tabs a { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 10px; border: 0; background: none; color: var(--muted); font-weight: 600; text-decoration: none !important; transition: color .15s; }
.tabs button::after, .tabs a::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transition: transform .2s var(--ease); }
.tabs button:hover, .tabs a:hover { color: var(--ink); }
.tabs .on { color: var(--ink); }
.tabs .on::after { transform: scaleX(1); }
.tabs.page-tabs { padding: 0; margin: 0 0 18px; border-color: var(--border); }
.tabs.inline-tabs { padding: 0; border: 0; }
.tabs.inline-tabs button { height: 32px; }
.tab-count { min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--subtle); color: var(--muted); font-size: 11px; line-height: 17px; text-align: center; font-variant-numeric: tabular-nums; }
.section-title { display: flex; justify-content: space-between; align-items: baseline; margin: 22px 0 9px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.section-title a { font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.panel-tools { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.panel-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.message { display: grid; gap: 8px; justify-items: start; margin-bottom: 18px; padding: 14px 16px; border-radius: 10px; background: var(--subtle); }
.message p { margin: 0; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.message pre.json { justify-self: stretch; padding: 0; background: none; white-space: pre-wrap; overflow-wrap: anywhere; }
.lead { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; }
.fix { margin-bottom: 18px; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); border-radius: 10px; background: color-mix(in srgb, var(--accent) 4%, var(--card)); }
.fix p { margin: 4px 0 0; color: var(--muted); }
.fix .panel-links { margin-top: 12px; }
.mini-metrics { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 18px; border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; }
.mini-metrics > * { display: grid; gap: 2px; padding: 10px 12px; border-right: 1px solid var(--hair); color: inherit; text-decoration: none !important; }
.mini-metrics > :last-child { border-right: 0; }
.mini-metrics a:hover { background: var(--hover); }
.mini-metrics small { color: var(--muted); font-size: 11.5px; }
.mini-metrics b { font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
pre.json { margin: 0; padding: 12px 14px; border-radius: 9px; background: var(--subtle); font: 12px/1.65 "Geist Mono", monospace; overflow: auto; white-space: pre; }
.j-key { color: var(--muted); } .j-str { color: var(--accent-ink); } .j-num { color: var(--warn); } .j-lit { color: var(--ok); }
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 7px 0; }
.timeline li::before { content: ""; position: absolute; left: 8px; top: 25px; bottom: -7px; width: 1px; background: var(--hair); }
.timeline li:last-child::before { display: none; }
.timeline .pip { width: 17px; height: 17px; margin-top: 1px; border: 3px solid var(--card); border-radius: 50%; background: var(--faint); box-shadow: 0 0 0 1px var(--border); }
.timeline .pip.ok { background: var(--ok); } .timeline .pip.bad { background: var(--bad); }
.timeline .pip.pending { background: var(--accent); animation: breathe 1.6s ease-in-out infinite; }
.timeline small { display: block; color: var(--muted); }

/* ---------- Notifications ---------- */
.note { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 13px 16px; border-bottom: 1px solid var(--hair); cursor: pointer; transition: background .12s; }
.note:last-child { border-bottom: 0; }
.note:hover { background: var(--hover); }
.note.sel { background: var(--accent-soft); box-shadow: inset 2px 0 var(--accent); }
.note.fresh { animation: fresh 2.6s ease-out; }
.note .u { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--accent); transition: transform .2s var(--ease), opacity .2s; }
.note.read .u { transform: scale(0); opacity: 0; }
.note-main { min-width: 0; }
.note-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.note-title b { overflow: hidden; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.note.read .note-title b { font-weight: 500; }
.note p { margin: 2px 0 4px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.note small { color: var(--muted); font-size: 11.5px; }
.note-time { font-size: 12px; white-space: nowrap; }
.lvl { flex: none; padding: 1px 6px; border-radius: 4px; font-size: 10px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.lvl.error { background: color-mix(in srgb, var(--bad) 14%, var(--card)); color: var(--bad); }
.lvl.warning { background: color-mix(in srgb, var(--warn) 16%, var(--card)); color: var(--warn); }

/* ---------- Deliveries ---------- */
.dest-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 18px; }
.dest-card { display: grid; gap: 8px; padding: 12px 14px; text-align: left; transition: border-color .15s, transform .15s var(--ease), background .15s; }
.dest-card:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); transform: translateY(-1px); }
.dest-card.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--card)); }
.dest-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dest-card-head b { overflow: hidden; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
.dest-card-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; }

/* ---------- Issues ---------- */
.issue { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 16px; border-bottom: 1px solid var(--hair); cursor: pointer; transition: background .12s; }
.issue:last-child { border-bottom: 0; }
.issue:hover { background: var(--hover); }
.issue.sel { background: var(--accent-soft); box-shadow: inset 2px 0 var(--accent); }
.issue .ico { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-weight: 800; font-size: 12px; }
.issue .ico.bad { background: color-mix(in srgb, var(--bad) 14%, var(--card)); color: var(--bad); }
.issue .ico.warn { background: color-mix(in srgb, var(--warn) 16%, var(--card)); color: var(--warn); }
.issue h4 { margin: 0 0 2px; font-size: 13px; font-weight: 620; }
.issue p { margin: 0; color: var(--muted); }

/* ---------- Forms and dialogs ---------- */
.form { display: grid; gap: 14px; }
.form-field { display: grid; gap: 6px; }
.form-field > span { font-weight: 600; }
.form-field small { font-size: 12px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.form-error { margin: 0; color: var(--bad); }
.check-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.check-row input { margin-top: 3px; }
.check-row small { display: block; }
input[type="checkbox"] { accent-color: var(--accent); }
.scope-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.swatches { display: flex; gap: 8px; }
.swatch { width: 26px; height: 26px; border: 2px solid var(--card); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--border); transition: transform .15s var(--ease), box-shadow .15s; }
.swatch:hover { transform: scale(1.08); }
.swatch.on { box-shadow: 0 0 0 2px var(--accent); }
.danger-zone { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--bad) 30%, var(--border)); }
.modal { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 64px); padding: 0; border-radius: 14px; color: var(--ink); box-shadow: var(--lift); overflow: auto; animation: modal-in .2s var(--ease); }
.modal.wide { width: min(640px, calc(100vw - 32px)); }
.modal::backdrop { background: rgb(10 14 24 / .38); animation: fade-in .2s ease-out; }
.modal.leaving { animation: modal-out .15s ease-in forwards; }
.modal-body { display: grid; gap: 14px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--hair); }
.palette { width: min(600px, calc(100vw - 32px)); margin-top: 12vh; }
.palette .card-head { display: none; }
.palette .modal-body { gap: 0; padding: 0; }
.palette-input { width: 100%; height: 52px; padding: 0 18px; border: 0; border-bottom: 1px solid var(--hair); background: none; font-size: 15px; outline: none; }
.palette-list { display: grid; padding: 6px; max-height: 50vh; overflow-y: auto; }
.palette-item { display: flex; align-items: center; gap: 12px; min-width: 0; height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; text-align: left; }
.palette-item.on { background: var(--accent-soft); }
.palette-kind { width: 80px; flex: none; color: var(--faint); font-size: 11.5px; font-weight: 600; }
.palette-hint { margin-left: auto; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.steps-list { display: grid; gap: 18px; }
.step-item { display: grid; gap: 8px; }
.step-item-head { display: flex; align-items: center; gap: 10px; }
.step-item-head b { margin-right: auto; }
.snippet { max-height: 180px; }
.waiting { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 10px; color: var(--muted); transition: background .3s, border-color .3s; }
.waiting.done { border-style: solid; border-color: color-mix(in srgb, var(--ok) 40%, var(--border)); background: color-mix(in srgb, var(--ok) 8%, var(--card)); color: var(--ink); animation: pop .35s var(--ease); }
.waiting.done svg { width: 16px; height: 16px; color: var(--ok); flex: none; }
.spinner { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .9s linear infinite; }
.copyline { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 3px 3px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--subtle); }
.copyline code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.toast { position: fixed; bottom: 22px; left: 50%; z-index: 100; display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: var(--card); font-weight: 560; box-shadow: var(--lift); transform: translateX(-50%); animation: toast-in .25s var(--ease); }
.toast a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.toast.leaving { animation: toast-out .2s ease-in forwards; }

/* ---------- Layout helpers ---------- */
.stack { display: grid; gap: 6px; }
.stack-lg { display: grid; gap: 16px; }
.inline { display: flex; align-items: center; gap: 8px; }

/* ---------- Settings ---------- */
.settings { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 28px; align-items: start; }
.subnav { position: sticky; top: 0; display: grid; gap: 2px; }
.settings-pane { animation: swap .2s ease-out; }
.theme-control { display: flex; gap: 10px; }
.theme-choice { width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(135deg, var(--choice-canvas) 50%, var(--choice-accent) 50%); transition: transform .15s var(--ease), box-shadow .15s; }
.theme-choice:hover { transform: translateY(-1px); }
.theme-choice.active { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--accent); }

/* ---------- Devices ---------- */
.device-mark { display: grid; place-items: center; flex: none; width: 30px; height: 30px; margin-right: 10px; border-radius: 8px; background: var(--subtle); color: var(--muted); }
.device-icon { width: 16px; height: 16px; }
.out .device-icon { width: 12px; height: 12px; }
a.out { text-decoration: none !important; color: var(--ink); }
a.out:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.routing { margin-bottom: 16px; }
.routing-scroll { overflow-x: auto; }
.matrix { width: 100%; border-collapse: collapse; font-size: 12px; }
.matrix th, .matrix td { padding: 8px 12px; border-bottom: 1px solid var(--hair); white-space: nowrap; }
.matrix tr:last-child td { border-bottom: 0; }
.matrix th { text-align: center; font-weight: 600; vertical-align: bottom; }
.matrix th:first-child, .matrix td:first-child { text-align: left; }
.matrix th a { color: var(--ink); }
.matrix th small { display: block; color: var(--ok); font-weight: 500; }
.matrix th.off small { color: var(--faint); }
.matrix th.off a { color: var(--muted); }
.matrix .cell { text-align: center; font-weight: 600; }
.matrix .cell.on { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.matrix .cell.idle { color: var(--faint); }
.matrix .cell.none { color: var(--hair); }
.subs td { height: 44px; }
.custom-hours { display: grid; gap: 10px; margin: 10px 0 0 26px; }
.day-picks { display: flex; flex-wrap: wrap; gap: 4px; }
.day { height: 28px; padding: 0 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--control); color: var(--muted); font-size: 12px; font-weight: 600; transition: background .15s, color .15s, border-color .15s; }
.day.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.account { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; color: var(--ink); text-decoration: none !important; transition: background .15s; }
.account:hover, .account.active { background: var(--hover); }
.account.active { background: var(--accent-soft); }
.account > svg { width: 15px; height: 15px; margin-left: auto; color: var(--faint); }
.avatar { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: 11px; font-weight: 700; }
.account-text { display: grid; line-height: 1.25; }
.account-text b { font-weight: 600; }
.account-text small { color: var(--muted); font-size: 11.5px; }

/* ---------- Admin additions ---------- */
.banner { display: flex; gap: 8px; margin-bottom: 16px; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--border)); border-radius: 10px; background: color-mix(in srgb, var(--warn) 7%, var(--card)); }
.umeter { display: grid; gap: 4px; min-width: 150px; }
.umeter .meter { margin: 0; }
.action-list { display: grid; }
.card-body.action-list { padding: 4px 0; }
.drawer .action-list { border: 1px solid var(--hair); border-radius: 10px; overflow: hidden; }
.action-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--hair); background: none; text-align: left; font-weight: 600; transition: background .12s; }
.action-row:last-child { border-bottom: 0; }
.action-row:hover { background: var(--hover); }
.action-row small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; }
.action-row.danger { color: var(--bad); }
.checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: hidden; }
.check { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.check .status { margin-top: 4px; }
.check b { display: block; font-weight: 620; }
.check small { font-size: 12px; }
.funnel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 16px; }
.fstep { display: grid; gap: 6px; padding: 14px 16px; border-right: 1px solid var(--hair); }
.fstep:last-child { border-right: 0; }
.fstep small { color: var(--muted); font-weight: 560; }
.fstep b { font-size: 20px; font-weight: 650; }
.fstep em { font-style: normal; font-size: 11.5px; color: var(--muted); }
.fbar { height: 6px; border-radius: 3px; background: var(--subtle); overflow: hidden; }
.fbar i { display: block; height: 100%; background: var(--accent); transform-origin: left; }
.page.enter .fbar i { animation: grow-x .6s var(--ease) both; }
.wordcloud { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Motion ---------- */
@keyframes page-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes panel-in { from { opacity: 0; transform: translateX(14px); } }
@keyframes panel-up { from { opacity: 0; transform: translateY(24px); } }
@keyframes swap { from { opacity: .35; transform: translateY(2px); } }
@keyframes grow { from { transform: scaleY(0); } }
@keyframes grow-x { from { transform: scaleX(0); } }
@keyframes fresh { from { background: color-mix(in srgb, var(--accent) 16%, var(--card)); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
@keyframes breathe { 50% { opacity: .45; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { 0% { transform: scale(.98); } 60% { transform: scale(1.01); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }
@keyframes modal-out { to { opacity: 0; transform: translateY(4px) scale(.99); } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Narrower screens; phone keeps the inbox and simple configuration ---------- */
.mnav { display: none; }
@media (max-width: 1180px) {
  .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split.open { grid-template-columns: minmax(0, 1fr) 380px; }
}
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .side, .search, .hide-sm { display: none; }
  .top { height: 52px; padding: 0 16px; }
  .content { padding: 16px; }
  .head { flex-wrap: wrap; }
  .head .actions { margin-left: 0; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metrics > :first-child { grid-column: 1 / -1; }
  .search-field { width: 100%; }
  .split.open { grid-template-columns: 1fr; }
  .drawer { position: fixed; inset: 52px 0 60px; z-index: 20; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
  .drawer.enter { animation: panel-up .26s var(--ease); }
  .drawer-head .close { display: inline-flex; margin: -2px 0 0 -6px; }
  .drawer-actions { flex-wrap: wrap; justify-content: flex-end; }
  .list td, .list th { padding: 0 10px; }
  .card { overflow-x: auto; }
  .title-cell { width: auto; }
  .settings { grid-template-columns: 1fr; gap: 12px; }
  .subnav { position: static; display: flex; overflow-x: auto; }
  .subnav .nav { width: auto; flex: none; }
  .grid2, .checks, .funnel { grid-template-columns: 1fr; }
  .dest-strip { grid-template-columns: 1fr; }
  .pager { gap: 8px; }
  .mnav { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .mnav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--muted); font-size: 11px; font-weight: 600; text-decoration: none !important; }
  .mnav a.active { color: var(--accent-ink); }
  .mnav svg { width: 19px; height: 19px; }
  .mnav .count { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 16px; margin: 0; padding: 0 4px; font-size: 10px; line-height: 15px; }
  .mnav .count.quiet { display: none; }
  body.panel-open .content { overflow: hidden; }
}
.settings-pane .form .form-field { max-width: 520px; }

/* ---------- Loading, sign-in and the embedded builder ---------- */
body.loading .top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: loading 1s linear infinite; }
.top { position: relative; }
@keyframes loading { from { background-position: -40% 0; } to { background-position: 140% 0; } }
.signin { display: grid; place-items: center; min-height: 100dvh; padding: 24px 16px; }
.signin-card { display: grid; gap: 14px; width: min(400px, 100%); padding: 28px; }
.signin-card .brand { padding: 0 0 6px; }
.signin-card h1 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -.03em; }
.signin-card p { margin: 0; color: var(--muted); }
.signin-card .field { width: 100%; height: 38px; }
.signin-card .btn { width: 100%; height: 38px; }
.signin-back { display: block; margin-top: 16px; color: var(--muted); text-align: center; }
.flow-host .fb-page { padding: 0; }
.flow-host .fb-loading { padding: 40px; color: var(--muted); text-align: center; }
.notice { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; padding: 11px 14px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border)); border-radius: 10px; background: color-mix(in srgb, var(--accent) 5%, var(--card)); }
.notice.warn { border-color: color-mix(in srgb, var(--warn) 35%, var(--border)); background: color-mix(in srgb, var(--warn) 7%, var(--card)); }
.notice .btn { margin-left: auto; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.setting-row b { display: block; font-weight: 600; }
.setting-row small { display: block; margin-top: 2px; font-size: 12px; }
.issue .ico.ok { background: color-mix(in srgb, var(--ok) 14%, var(--card)); color: var(--ok); }
.badge.word { gap: 4px; height: 24px; font-size: 12px; }
.word-remove { width: 16px; height: 16px; margin-right: -4px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); line-height: 1; }
.word-remove:hover { background: var(--hover); color: var(--bad); }
.side-foot .notice { margin: 0 4px 10px; font-size: 12px; }

/* ---------- iOS Home Screen app ---------- */
/* black-translucent draws the page under the status bar ("forehead") and the home indicator ("chin").
   iOS always uses white status-bar text, so the forehead is painted dark, as on the docs and landing pages. */
:root { --forehead: color-mix(in srgb, var(--accent) 72%, #000); }
[data-mode="charcoal"], [data-mode="dark"] { --forehead: var(--panel); }
body::before { content: ""; position: fixed; z-index: 30; top: 0; right: 0; left: 0; height: env(safe-area-inset-top); background: var(--forehead); pointer-events: none; }
/* Keep the pinned shell's 100dvh height; safe-area padding stays inside the viewport. */
.shell { position: fixed; inset: 0 0 auto; padding-top: env(safe-area-inset-top); }
.side { padding-bottom: calc(14px + env(safe-area-inset-bottom)); padding-left: calc(12px + env(safe-area-inset-left)); }
.top { padding-right: calc(28px + env(safe-area-inset-right)); }
.content { padding-right: calc(28px + env(safe-area-inset-right)); padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
.toast { bottom: calc(22px + env(safe-area-inset-bottom)); }
.signin { padding: calc(24px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left)); }
@media (max-width: 860px) {
  .top { padding: 0 calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left)); }
  .content { padding: 16px calc(16px + env(safe-area-inset-right)) 16px calc(16px + env(safe-area-inset-left)); }
  .toast { bottom: calc(68px + env(safe-area-inset-bottom)); }
}

/* iOS Safari zooms into any focused field under 16px; touch screens get 16px fields so the page never zooms.
   !important because component rules (.palette-input, .field.small, builder fields) set smaller sizes. */
@media (pointer: coarse) {
  input, select, textarea, [contenteditable] { font-size: 16px !important; }
}

/* ---------- Phone navigation, after Apple's HIG for tab bars, navigation bars and segmented controls ---------- */
.mback, .mtitle, .mactions, .tab-seg, .back-label { display: none; }
@media (max-width: 860px) {
  body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
  .content { overscroll-behavior-y: contain; padding-top: 4px; padding-bottom: 24px; }
  a, button, select, [data-href] { touch-action: manipulation; }

  /* Navigation bar: a back button and a centred title that fades in once the large title scrolls under it. */
  .top.ios { display: grid; grid-template-columns: 1fr auto 1fr; height: 44px; border-bottom-color: transparent; background: var(--canvas); transition: border-color .2s, background .2s; }
  .top.ios .crumbs { display: none; }
  .scrolled .top.ios { border-bottom-color: var(--border); background: var(--panel); }
  .mback { display: inline-flex; grid-column: 1; align-items: center; gap: 2px; min-width: 44px; height: 44px; margin-left: -8px; overflow: hidden; color: var(--accent-ink); font-size: 16px; white-space: nowrap; text-overflow: ellipsis; text-decoration: none !important; }
  .mback[hidden] { display: none !important; }
  .mback svg { width: 22px; height: 22px; flex: none; }
  .mtitle { display: block; grid-column: 2; max-width: 60vw; overflow: hidden; font-size: 16px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; opacity: 0; transition: opacity .2s; }
  .scrolled .mtitle { opacity: 1; }
  .top.ios .search { display: none; }
  /* Bar buttons: plain accent text; a filled button with an icon shows just the icon, keeping its text for screen readers. */
  .mactions { display: flex; grid-column: 3; justify-self: end; align-items: center; gap: 4px; margin-right: -8px; }
  .mactions .btn { height: 44px; padding: 0 8px; border: 0; background: none; box-shadow: none; color: var(--accent-ink); font-size: 16px; font-weight: 400; }
  .mactions .btn:disabled { color: var(--faint); opacity: 1; }
  .mactions .btn:not(.primary) svg { display: none; }
  .mactions .btn.primary { width: 44px; gap: 0; font-size: 0; }
  .mactions .btn.primary svg { width: 22px; height: 22px; }

  /* Large title, without the desktop description; a tab with segments adds its segmented control beneath. */
  .head { margin-bottom: 14px; }
  .head h1 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
  .head > div > p { display: none; }
  .tab-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; margin-bottom: 14px; padding: 2px; border: 0; border-radius: 9px; background: var(--subtle); }
  .tab-seg a { display: flex; align-items: center; justify-content: center; height: 32px; border-radius: 7px; color: var(--ink); font-size: 13px; font-weight: 560; text-decoration: none !important; }
  .tab-seg a.on { background: var(--card); font-weight: 650; box-shadow: 0 0 0 .5px var(--border), 0 3px 8px rgb(0 0 0 / .08); }
  [data-mode="charcoal"] .tab-seg a.on, [data-mode="dark"] .tab-seg a.on { background: color-mix(in srgb, var(--ink) 22%, var(--card)); box-shadow: none; }

  /* Tab bar: icon over label, accent for the open tab, red badges for what needs attention. */
  .mnav { height: calc(50px + env(safe-area-inset-bottom)); padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); border-top: .5px solid var(--border); background: color-mix(in srgb, var(--panel) 82%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .mnav a { gap: 2px; padding-top: 4px; justify-content: flex-start; font-size: 10px; font-weight: 560; letter-spacing: .01em; }
  .mnav a:active { opacity: .6; }
  .mnav svg { width: 25px; height: 25px; stroke-width: 1.35; }
  .mnav a.active svg { stroke-width: 1.7; }
  .mnav .count { top: 2px; left: calc(50% + 7px); min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; }

  /* A detail panel is a pushed screen: it slides in from the right and its back button names the page beneath. */
  .drawer { inset: env(safe-area-inset-top) 0 auto; z-index: 25; height: calc(100dvh - env(safe-area-inset-top) - 50px - env(safe-area-inset-bottom)); background: var(--canvas); }
  .drawer.enter { animation: push .32s var(--ease); }
  .drawer-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "back actions" "title title"; gap: 6px 10px; padding: 0 16px 12px; border-bottom: 0; }
  .drawer-head .close { grid-area: back; justify-self: start; gap: 2px; height: 44px; max-width: 100%; margin: 0 0 0 -8px; padding: 0 8px 0 0; color: var(--accent-ink); font-size: 16px; font-weight: 400; }
  .drawer-head .close svg { width: 22px; height: 22px; }
  .back-label { display: inline; overflow: hidden; text-overflow: ellipsis; }
  .drawer-actions { grid-area: actions; align-self: center; }
  .drawer-title { grid-area: title; }
  .drawer-title h3 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
  .toast { bottom: calc(62px + env(safe-area-inset-bottom)); }
  .pager label { display: none; }
  .toolbar .chip { max-width: 44vw; }

  /* Touch feedback replaces hover on rows. */
  [data-href]:active, .list tr[data-href]:active td { background: var(--hover); }
}
@keyframes push { from { transform: translateX(100%); } }

/* The installed app fills the document; its grid places the tab bar at the bottom without browser-toolbar sizing. */
@media (display-mode: standalone) {
  .shell { position: static; height: 100%; }
}
@media (display-mode: standalone) and (max-width: 860px) {
  .main { position: relative; }
  .drawer { position: absolute; inset: 0; height: auto; }
}