/* Manifolio prototype: shared components, shell and textures.
   Values are CSS px at 1440 (SPEC sections 1 to 4). Pages compose these; page-only rules stay in the page. */

/* ── base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent; }
input, textarea, select { font: inherit; color: inherit; margin: 0; }
button:disabled { cursor: default; }
::selection { background: var(--p-selection); }
:focus-visible { outline: 2px solid var(--orange-600); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
svg.lucide { flex: none; }
/* icons sized only by their width/height attributes (MF.ico, lucide) follow the density scale; any class rule still wins */
:where(svg[width="10"][height="10"]) { width: .625rem; height: .625rem; }
:where(svg[width="12"][height="12"]) { width: .75rem; height: .75rem; }
:where(svg[width="13"][height="13"]) { width: .8125rem; height: .8125rem; }
:where(svg[width="14"][height="14"]) { width: .875rem; height: .875rem; }
:where(svg[width="15"][height="15"]) { width: .9375rem; height: .9375rem; }
:where(svg[width="16"][height="16"]) { width: 1rem; height: 1rem; }
:where(svg[width="17"][height="17"]) { width: 1.0625rem; height: 1.0625rem; }
:where(svg[width="18"][height="18"]) { width: 1.125rem; height: 1.125rem; }
:where(svg[width="20"][height="20"]) { width: 1.25rem; height: 1.25rem; }
:where(svg[width="22"][height="22"]) { width: 1.375rem; height: 1.375rem; }
:where(svg[width="24"][height="24"]) { width: 1.5rem; height: 1.5rem; }
:where(svg[width="26"][height="26"]) { width: 1.625rem; height: 1.625rem; }
:where(svg[width="28"][height="28"]) { width: 1.75rem; height: 1.75rem; }
:where(svg[width="30"][height="30"]) { width: 1.875rem; height: 1.875rem; }
:where(svg[width="32"][height="32"]) { width: 2rem; height: 2rem; }
:where(svg[width="36"][height="36"]) { width: 2.25rem; height: 2.25rem; }
:where(svg[width="40"][height="40"]) { width: 2.5rem; height: 2.5rem; }
:where(svg[width="44"][height="44"]) { width: 2.75rem; height: 2.75rem; }
:where(svg[width="48"][height="48"]) { width: 3rem; height: 3rem; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); }
.grow { flex: 1 1 auto; min-width: 0; }
.row { display: flex; align-items: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* text that may overflow: never an ellipsis, fade the last 18px (shell.js adds .is-clipped) */
.fit { white-space: nowrap; overflow: hidden; min-width: 0; }
.fit.is-clipped { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.125rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 1.125rem), transparent); }
.fit-2 { display: block; overflow: hidden; max-height: calc(var(--lh, max(18px, 1.25rem)) * 2); }
.fit-2.is-clipped {
  -webkit-mask-image: linear-gradient(#000, #000), linear-gradient(90deg, #000 calc(100% - 1.125rem), transparent);
  -webkit-mask-size: 100% calc(100% - var(--lh, max(18px, 1.25rem))), 100% var(--lh, max(18px, 1.25rem));
  -webkit-mask-position: top, bottom; -webkit-mask-repeat: no-repeat;
  mask-image: linear-gradient(#000, #000), linear-gradient(90deg, #000 calc(100% - 1.125rem), transparent);
  mask-size: 100% calc(100% - var(--lh, max(18px, 1.25rem))), 100% var(--lh, max(18px, 1.25rem));
  mask-position: top, bottom; mask-repeat: no-repeat;
}

/* ── type scale (SPEC 2) ──────────────────────────────── */
.t-number { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.t-card { font-size: 1.125rem; line-height: 1.5rem; font-weight: 500; }
.t-plan { font-size: 1.125rem; line-height: 1.5rem; font-weight: 600; color: #FFF; }
.t-body { font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); font-weight: 400; }
.t-body-m { font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); font-weight: 500; }
.t-small { font-size: 12px; line-height: 16px; font-weight: 400; color: var(--text-4); }
/* scroll areas fade at the edge that still has more to show (MF.fade adds the classes) */
.fade-y.fade-b { -webkit-mask-image: linear-gradient(#000 calc(100% - var(--fade, 1.125rem)), transparent); mask-image: linear-gradient(#000 calc(100% - var(--fade, 1.125rem)), transparent); }
.fade-y.fade-t { -webkit-mask-image: linear-gradient(transparent, #000 var(--fade, 1.125rem)); mask-image: linear-gradient(transparent, #000 var(--fade, 1.125rem)); }
.fade-y.fade-t.fade-b { -webkit-mask-image: linear-gradient(transparent, #000 var(--fade, 1.125rem), #000 calc(100% - var(--fade, 1.125rem)), transparent); mask-image: linear-gradient(transparent, #000 var(--fade, 1.125rem), #000 calc(100% - var(--fade, 1.125rem)), transparent); }
.edge-fade.fade-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade, 1.75rem)), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade, 1.75rem)), transparent); }
.edge-fade.fade-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade, 1.75rem)); mask-image: linear-gradient(90deg, transparent, #000 var(--fade, 1.75rem)); }
.edge-fade.fade-l.fade-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fade, 1.75rem), #000 calc(100% - var(--fade, 1.75rem)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--fade, 1.75rem), #000 calc(100% - var(--fade, 1.75rem)), transparent); }
/* single-line inputs whose value runs past the box (MF.clipInputs) */
input.is-clipped { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.125rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 1.125rem), transparent); }
/* bordered inputs: only the text area fades, the border and padding stay whole */
input.input.is-clipped {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.125rem), transparent calc(100% - 1rem)), linear-gradient(#000, #000), linear-gradient(#000, #000);
  mask-image: linear-gradient(90deg, #000 calc(100% - 2.125rem), transparent calc(100% - 1rem)), linear-gradient(#000, #000), linear-gradient(#000, #000);
  -webkit-mask-clip: padding-box, border-box, padding-box; mask-clip: padding-box, border-box, padding-box;
  -webkit-mask-origin: padding-box, border-box, padding-box; mask-origin: padding-box, border-box, padding-box;
  -webkit-mask-composite: source-over, source-out, source-over; mask-composite: add, subtract, add;
}
/* colour helpers come after the type scale so .t-small + .orange-text stays orange */
.upper { text-transform: uppercase; }

/* ── textures (SPEC 1.10, verbatim) ───────────────────── */
.tx-fluted { position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(112deg, #661608 0%, #5A1609 30%, #45130A 62%, #2A0A06 100%); }
.tx-fluted::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.22) 0 .9px, rgba(0,0,0,0) .9px 2.3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.14) 0 1.4px, rgba(0,0,0,0) 1.4px 5.3px),
    repeating-linear-gradient(90deg, rgba(255,150,120,.06) 0 1px, rgba(255,150,120,0) 1px 3.1px);
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, rgba(0,0,0,.6) 55%, #000 80%);
          mask-image: linear-gradient(90deg, transparent 30%, rgba(0,0,0,.6) 55%, #000 80%); }
.tx-grid { position: absolute; inset: 0; overflow: hidden; background: #441406; pointer-events: none; }
.tx-grid::before { content: ""; position: absolute; inset: 0;
  background: radial-gradient(40.625rem 23.75rem at 50% 35rem, rgba(232,98,33,.24), rgba(232,98,33,.10) 55%, rgba(232,98,33,0) 100%); }
.tx-grid svg { position: absolute; left: 50%; top: 0; width: 90rem; height: 72.3125rem; transform: translateX(-50%);
  -webkit-mask-image: radial-gradient(51.25rem 35rem at 50% 35rem, #000 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.12) 100%);
          mask-image: radial-gradient(51.25rem 35rem at 50% 35rem, #000 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.12) 100%); }
.tx-hatch { background-color: #FAFAFA; background-image: repeating-linear-gradient(150deg, #E0E0E0 0 1px, transparent 1px .83125rem); }

/* ── logo lockup (logo.js fills [data-logo]) ──────────── */
.mf-lockup { display: inline-flex; align-items: center; gap: .75rem; color: var(--text-1); }
.mf-mark { display: inline-flex; flex: none; color: var(--orange); }
.mf-mark svg { width: 100%; height: 100%; overflow: visible; }
.mf-wordmark { font-weight: 600; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
.mf-lockup.on-dark .mf-wordmark { color: #FFF; }
/* on dark surfaces the lighter layers are solid tints of the orange (opacity would let the maroon turn them brown) */
.on-dark [data-mark] [opacity] { opacity: 1; }
.on-dark [data-mark] [opacity=".7"], .on-dark [data-mark] [opacity=".72"] { fill: #FB923C; }
.on-dark [data-mark] [opacity=".42"], .on-dark [data-mark] [opacity=".45"], .on-dark [data-mark] [opacity=".5"] { fill: #FDBA74; }
.mf-logo-ring { opacity: 0; transform-box: fill-box; transform-origin: center; }
.is-live .mf-logo-ring { animation: mf-ring 1.8s var(--ease-out) infinite; }

/* ── live dot ─────────────────────────────────────────── */
.live-dot { position: relative; display: inline-block; flex: none; width: .375rem; height: .375rem; border-radius: 50%; background: var(--orange); }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--orange); animation: mf-ring 1.8s var(--ease-out) infinite; }
.live-dot.is-off { background: #A3A3A3; }
.live-dot.is-off::after { display: none; }
@keyframes mf-ring { 0% { transform: scale(1); opacity: .5; } 100% { transform: scale(2.6); opacity: 0; } }

/* ── buttons (SPEC 3.1) ───────────────────────────────── */
.btn-cta, .btn-primary, .btn-plan, .btn-outline, .btn-white, .btn-text, .btn-danger {
  display: inline-flex; align-items: center; justify-content: center; flex: none; white-space: nowrap;
  border-radius: var(--r-pill); font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); font-weight: 500; user-select: none;
  transition: background-color var(--d-hover) var(--ease-out), border-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out), box-shadow var(--d-hover) var(--ease-out), transform var(--d-press) var(--ease-pop), opacity var(--d-hover) var(--ease-out);
}
.btn-cta { height: var(--h-cta); padding: 0 1.25rem; gap: .5rem; background: var(--orange); color: #FFF; }
.btn-cta svg { width: 1rem; height: 1rem; stroke-width: 2; }
.btn-primary { height: var(--h-btn); padding: 0 2.5rem; gap: .5rem; background: var(--orange); color: #FFF; }
.btn-primary.block { width: 100%; padding: 0 1.5rem; }
.btn-primary svg { width: 1rem; height: 1rem; }
.btn-primary svg.ai { width: 1.25rem; height: 1.25rem; }
.btn-plan { height: var(--h-ctrl); padding: 0 1.25rem; gap: .375rem; background: var(--orange); color: #FFF; }
.btn-plan svg { width: 1rem; height: 1rem; }
.btn-outline { height: var(--h-chip); padding: 0 1.25rem; gap: .5rem; background: transparent; border: 1px solid var(--line-strong); color: #1A1A1A; font-weight: 400; }
.btn-outline svg { width: 1rem; height: 1rem; color: var(--text-2); }
.btn-outline.sm { height: 2.25rem; padding: 0 1rem; }
.btn-outline.block { width: 100%; }
.btn-white { height: var(--h-btn); padding: 0 1.25rem; gap: .5rem; background: #FFF; color: var(--text-1); }
.btn-text { height: 2.25rem; padding: 0 .5rem; gap: .375rem; color: var(--text-3); border-radius: .625rem; }
.btn-text svg { width: 1rem; height: 1rem; }
.btn-text.orange { color: var(--orange-700); }
.btn-text.orange svg.ai { color: var(--orange); }
.btn-text.danger { color: var(--red); }
.btn-text.on-dark { color: #FFF; }
.btn-danger { height: var(--h-btn); padding: 0 1.75rem; background: var(--red); color: #FFF; }
.btn-primary.sm, .btn-danger.sm { height: 2.25rem; padding: 0 1.125rem; }

/* hover tints only where a real pointer can hover: a tap on a phone leaves no tint behind */
@media (hover: hover) {
  .btn-cta:hover, .btn-primary:hover, .btn-plan:hover { background-color: var(--orange-600); }
  .btn-danger:hover { background-color: #C81E1E; }
  .btn-outline:hover { background-color: var(--row); border-color: #BDBDBD; }
  .btn-white:hover { background-color: #F6F6F6; }
  .btn-text:hover { background-color: rgba(0,0,0,.04); color: var(--text-1); }
  .btn-text.orange:hover { color: var(--orange-800); background-color: var(--orange-50); }
  .btn-text.danger:hover { color: var(--red-700); background-color: var(--red-50); }
  .btn-text.on-dark:hover { background-color: rgba(255,255,255,.08); color: #FFF; }
}
.btn-cta:active, .btn-primary:active, .btn-plan:active, .btn-outline:active, .btn-white:active, .btn-text:active, .btn-danger:active { transform: scale(0.97); transition-duration: var(--d-press); transition-timing-function: var(--ease-out); }
.btn-cta:disabled, .btn-primary:disabled, .btn-plan:disabled, .btn-outline:disabled, .btn-white:disabled, .btn-text:disabled, .btn-danger:disabled, .is-disabled { opacity: .45; pointer-events: none; }
.is-busy { pointer-events: none; }
.is-busy svg { animation: mf-spin 1s linear infinite; }
@keyframes mf-spin { to { transform: rotate(360deg); } }

.btn-circle {
  display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: #FFF; color: var(--text-2); box-shadow: var(--sh-circle);
  transition: box-shadow var(--d-hover) var(--ease-out), background-color var(--d-hover) var(--ease-out), transform var(--d-press) var(--ease-pop);
}
.btn-circle svg { width: 1.25rem; height: 1.25rem; transition: transform var(--d-hover) var(--ease-out); }
@media (hover: hover) {
  .btn-circle:hover { box-shadow: var(--sh-circle-hover); }
  .btn-circle:hover svg.lucide-arrow-up-right { transform: translate(1px, -1px); }
}
.btn-circle:active { transform: scale(0.94); transition-timing-function: var(--ease-out); }
.btn-circle.c32 { width: 2rem; height: 2rem; }
.btn-circle.c32 svg { width: 1rem; height: 1rem; }
.btn-circle.c44 { width: 2.75rem; height: 2.75rem; }
.btn-circle.c44 svg { width: 1.5rem; height: 1.5rem; }
.btn-circle.flat { box-shadow: none; }
@media (hover: hover) { .btn-circle.flat:hover { box-shadow: var(--sh-circle); } }
.btn-circle.ghost { background: var(--row); box-shadow: none; color: var(--text-1); }
@media (hover: hover) { .btn-circle.ghost:hover { background: #EDEDED; box-shadow: none; } }
.btn-circle.on-dark { background: #FFF; color: #140100; box-shadow: none; }
.btn-circle.dark-ghost { background: rgba(255,255,255,.08); color: #FFF; box-shadow: none; }
@media (hover: hover) { .btn-circle.dark-ghost:hover { background: rgba(255,255,255,.14); } }

/* ── fields (SPEC 3.2) ────────────────────────────────── */
.field { display: flex; flex-direction: column; min-width: 0; }
.field + .field { margin-top: 1.5rem; }
.help { margin-top: .5rem; font-size: 12px; line-height: 16px; color: var(--text-4); }
.counter { margin-top: .5rem; font-size: 12px; line-height: 16px; color: var(--text-4); text-align: right; font-variant-numeric: tabular-nums; }
.counter.over { color: var(--orange-700); }

.input, .textarea, .select {
  width: 100%; min-width: 0; height: var(--h-search); padding: 0 1rem; border-radius: var(--r-field);
  background: var(--panel); border: 1px solid var(--line-field); color: var(--text-1);
  font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); font-weight: 500; caret-color: var(--orange-600); outline: none;
  transition: border-color var(--d-hover) var(--ease-out), background-color 1.2s var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--text-4); font-weight: 400; opacity: 1; }
.input:focus, .textarea:focus, .select:focus-visible, .select.is-open, .shell-field:focus-within { border-color: var(--orange-600); outline: none; }
.input.is-error, .textarea.is-error, .shell-field.is-error { border-color: var(--red); }
.textarea { display: block; height: 9.375rem; min-height: 9.375rem; max-height: 25rem; padding: 1rem; resize: none; }
.input.is-streaming, .textarea.is-streaming { background-color: var(--orange-50); transition-duration: 200ms; }
.input.mono { font-family: var(--mono); font-size: max(12px, .8125rem); font-weight: 400; }

.select { display: flex; align-items: center; gap: .75rem; text-align: left; cursor: pointer; }
.select .select-value { flex: 1; min-width: 0; }
.select .select-value.is-placeholder { color: var(--text-4); font-weight: 400; }
.select > svg { width: 1.25rem; height: 1.25rem; color: var(--text-1); transition: transform var(--d-menu) var(--ease-out); }
.select.is-open > svg { transform: rotate(180deg); }

.select-sm {
  display: inline-flex; align-items: center; gap: .625rem; flex: none; height: var(--h-ctrl); padding: 0 .875rem 0 1rem;
  background: #FFF; border: 1px solid #DEDEDE; border-radius: var(--r-select);
  font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); font-weight: 400; color: var(--text-2); white-space: nowrap;
  transition: border-color var(--d-hover) var(--ease-out), background-color var(--d-hover) var(--ease-out), transform var(--d-press) var(--ease-pop);
}
.select-sm svg { width: 1.125rem; height: 1.125rem; color: var(--text-3); transition: transform var(--d-menu) var(--ease-out); }
.select-sm:hover { border-color: var(--line-strong); }
.select-sm.is-open { border-color: var(--orange-600); }
.select-sm.is-open svg { transform: rotate(180deg); }
.select-sm:active { transform: scale(0.97); }
.select-sm .lead { width: 1rem; height: 1rem; color: var(--text-3); }

/* a field shell that holds other parts (prefix, icon, suffix, chip input) */
.shell-field {
  display: flex; align-items: center; gap: .625rem; width: 100%; min-width: 0; min-height: var(--h-search); padding: 0 1rem;
  background: var(--panel); border: 1px solid var(--line-field); border-radius: var(--r-field);
  transition: border-color var(--d-hover) var(--ease-out);
}
.shell-field > input { flex: 1; min-width: 0; height: 3.25rem; padding: 0; border: 0; background: none; outline: none; font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); font-weight: 500; color: var(--text-1); caret-color: var(--orange-600); }
.shell-field > input::placeholder { color: var(--text-4); font-weight: 400; }
.shell-field .prefix, .shell-field .suffix { flex: none; font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); color: var(--text-4); white-space: nowrap; }
.shell-field .prefix + input { margin-left: -.625rem; }
.shell-field > svg { width: 1.25rem; height: 1.25rem; color: var(--text-3); }
.shell-field .btn-circle { margin-right: -.375rem; }
.shell-field.chips-in { flex-wrap: wrap; padding: .5rem; gap: .5rem; }
.shell-field.chips-in > input { height: 2.25rem; padding: 0 .5rem; min-width: 7.5rem; }

/* search pills */
.search-pill {
  position: relative; display: flex; align-items: center; width: 22.5rem; height: var(--h-search); padding: 0 1.1875rem 0 3rem;
  background: #FFF; border-radius: var(--r-pill); color: var(--text-4); font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); text-align: left;
  transition: box-shadow var(--d-hover) var(--ease-out);
}
.search-pill > svg { position: absolute; left: 1.125rem; top: 1.0625rem; width: 1.25rem; height: 1.25rem; color: var(--text-3); }
.search-pill .ph { flex: 1; min-width: 0; }
.search-pill:hover { box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.search-sm { position: relative; display: flex; align-items: center; height: var(--h-ctrl); border-radius: var(--r-pill); background: #FFF; }
.search-sm > svg { position: absolute; left: .875rem; top: .6875rem; width: 1.125rem; height: 1.125rem; color: var(--text-3); pointer-events: none; }
.search-sm input { width: 100%; height: 100%; padding: 0 1rem 0 2.5rem; border: 0; border-radius: inherit; background: none; outline: none; font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); color: var(--text-1); caret-color: var(--orange-600); }
.search-sm input::placeholder { color: var(--text-4); }
.search-sm:focus-within { box-shadow: 0 0 0 1px var(--orange-600); }

/* keycap */
.kbd { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; flex: none; min-width: 2.75rem; height: 1.75rem; padding: 0 .5rem; border-radius: var(--r-keycap); background: var(--row); color: var(--text-2); font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); font-weight: 500; white-space: nowrap; }
.kbd svg.cmd { width: .9375rem; height: .9375rem; stroke-width: 1.6; }
.kbd.sm { min-width: 1.75rem; height: 1.5rem; padding: 0 .4375rem; font-size: 12px; border-radius: .4375rem; }

/* switch and checkbox (SPEC 3.13) */
.switch { position: relative; display: inline-block; flex: none; width: 2.75rem; height: 1.625rem; cursor: pointer; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.switch .track { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--line); transition: background-color 200ms var(--ease-out); }
.switch .track::after { content: ""; position: absolute; left: 2px; top: 2px; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: #FFF; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform 240ms var(--ease-pop); }
.switch input:checked + .track { background: var(--orange); }
.switch input:checked + .track::after { transform: translateX(1.125rem); }
.switch input:focus-visible + .track { outline: 2px solid var(--orange-600); outline-offset: 2px; }
.switch input:disabled + .track { opacity: .45; }
.switch-row { display: flex; align-items: center; gap: 1rem; min-height: 3.5rem; }
.switch-row .txt { flex: 1; min-width: 0; }
.switch-row .txt b { display: block; font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); font-weight: 500; }
.switch-row .txt span { display: block; font-size: 12px; line-height: 16px; color: var(--text-4); margin-top: 2px; }
.switch-row + .switch-row { border-top: 1px solid var(--line-soft); }

.check { position: relative; display: inline-grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; cursor: pointer; }
.check input { position: absolute; inset: -.75rem; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.check .box { width: 1.25rem; height: 1.25rem; border-radius: .375rem; border: 1.5px solid var(--line-strong); background: #FFF; display: grid; place-items: center; transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out); }
.check .box svg { width: .875rem; height: .875rem; color: #FFF; stroke-width: 2.5; transform: scale(.6); opacity: 0; transition: transform 240ms var(--ease-pop), opacity 120ms var(--ease-out); }
.check .box::after { content: ""; position: absolute; width: .625rem; height: 2px; border-radius: 1px; background: #FFF; opacity: 0; }
.check input:checked + .box, .check input:indeterminate + .box { background: var(--orange); border-color: var(--orange); }
.check input:checked + .box svg { transform: scale(1); opacity: 1; }
.check input:indeterminate + .box svg { opacity: 0; }
.check input:indeterminate + .box::after { opacity: 1; }
.check input:focus-visible + .box { outline: 2px solid var(--orange-600); outline-offset: 2px; }
.check-row { display: flex; align-items: flex-start; gap: .75rem; padding: .625rem 0; cursor: pointer; }
.check-row .check { margin-top: 0; }
.check-row b { display: block; font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); font-weight: 500; }
.check-row span { display: block; font-size: 12px; line-height: 16px; color: var(--text-4); margin-top: 2px; }

/* ── chips (SPEC 3.3) ─────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.chips.sm { gap: .5rem; }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: .5rem; flex: none; height: var(--h-chip); padding: 0 1.25rem; border-radius: var(--r-pill);
  background: #FFF; border: 1px solid var(--line-strong); color: var(--text-2); font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); font-weight: 500; white-space: nowrap;
  transition: background-color var(--d-hover) var(--ease-out), border-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out), transform var(--d-press) var(--ease-pop);
}
.chip svg { width: 1rem; height: 1rem; }
.chip .n { margin-left: -2px; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-4); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .chip:not(.is-on):hover { border-color: #BDBDBD; background-color: #FCFCFC; } }
.chip:active { transform: scale(0.97); }
.chip.is-on { background: var(--orange-50); border-color: var(--orange-600); color: var(--orange-700); }
.chip.is-on .n { color: var(--orange-700); }
.chip.is-pop { animation: mf-pop 240ms var(--ease-pop); }
.chip.md { height: var(--h-ctrl); padding: 0 1rem; }
.chip.sm { height: 2rem; padding: 0 .75rem; font-size: max(12px, .8125rem); }
.chip.sm svg { width: .875rem; height: .875rem; }
.chip.h36 { height: 2.25rem; padding: 0 .75rem; gap: .5rem; }
.chip.h36 svg { width: 1rem; height: 1rem; }
@keyframes mf-pop { 0% { transform: scale(.96); } 100% { transform: scale(1); } }

/* ── segmented toggles (SPEC 3.4) ─────────────────────── */
.seg { position: relative; display: inline-flex; flex: none; height: 2.75rem; padding: .25rem; border-radius: var(--r-pill); background: var(--text-1); isolation: isolate; }
.seg button { position: relative; z-index: 1; height: 2.25rem; padding: 0 1.25rem; border-radius: var(--r-pill); color: #FFF; font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); font-weight: 500; white-space: nowrap; transition: color 200ms var(--ease-out); }
.seg .seg-thumb { position: absolute; z-index: 0; left: 0; top: .25rem; height: 2.25rem; border-radius: var(--r-pill); background: var(--orange); transition: transform 320ms var(--ease-in-out), width 320ms var(--ease-in-out); }
.seg.light { height: 2.25rem; padding: .1875rem; background: var(--row); }
.seg.light button { height: 1.875rem; padding: 0 .875rem; font-size: max(12px, .8125rem); line-height: max(18px, 1.25rem); color: var(--text-3); }
.seg.light button.is-on { color: var(--text-1); }
.seg.light .seg-thumb { top: .1875rem; height: 1.875rem; background: #FFF; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.seg.light.xs { height: 1.75rem; padding: 2px; }
.seg.light.xs button { height: 1.5rem; padding: 0 .625rem; font-size: 12px; line-height: 16px; }
.seg.light.xs .seg-thumb { top: 2px; height: 1.5rem; }

/* ── cards (SPEC 3.5) ─────────────────────────────────── */
.card { position: relative; min-width: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); padding: 1.5rem; }
.card-head { display: flex; align-items: center; gap: .75rem; min-height: 2.5rem; margin-bottom: 1.25rem; }
.card-head .card-title { flex: 1 1 auto; min-width: 0; }
.card-head .end { display: flex; align-items: center; gap: .75rem; margin-left: auto; flex: none; }
.card-title { font-size: 1.125rem; line-height: 1.5rem; font-weight: 500; color: var(--text-1); }
.card-title-row { display: flex; align-items: baseline; gap: .625rem; min-width: 0; }
.card-link { cursor: pointer; transition: border-color var(--d-hover) var(--ease-out), transform var(--d-press) var(--ease-pop); }
.card-link:hover { border-color: #D6D6D6; }
.card-link:active { transform: scale(0.985); transition-timing-function: var(--ease-out); }
.card-dark { position: relative; min-width: 0; border: 1px solid transparent; background-origin: border-box; border-radius: var(--r-dark-card); padding: 1.5rem; color: #FFF; overflow: hidden; }
.card-dark .card-title { color: #FFF; }
.divider { height: 1px; background: var(--line-soft); margin: .5rem 0; border: 0; }

/* stat card */
.stat { display: flex; flex-direction: column; }
.stat-top { display: flex; align-items: center; gap: .75rem; height: 2rem; }
.stat-icon { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--orange-100); color: var(--orange); }
.stat-icon svg { width: 1.25rem; height: 1.25rem; }
.stat-label { font-size: 1rem; line-height: 1.5rem; font-weight: 500; }
.stat-mid { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-top: 1.25rem; height: 2.25rem; }
.stat-value { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; font-variant-numeric: normal; white-space: nowrap; }
.stat-mid .spark { flex: 0 1 5.75rem; min-width: 0; margin-bottom: 2px; }
.stat-foot { margin-top: .625rem; display: flex; }

/* ── pills and info chips (SPEC 3.6) ──────────────────── */
.pill { display: inline-flex; align-items: center; gap: .25rem; flex: none; height: var(--h-pill); padding: 0 .75rem; border-radius: var(--r-pill); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pill svg { width: .875rem; height: .875rem; }
.pill-delta { background: var(--green-100); color: var(--green-900); }
.pill-neutral { background: var(--row); color: var(--text-2); }
.pill-orange { background: var(--orange-50); color: var(--orange-700); }
.pill-status { padding: 0 .625rem 0 .5rem; gap: .375rem; }
.pill-status::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; flex: none; }
.pill-status.published { background: var(--row); color: var(--text-2); }
.pill-status.published::before { background: #0A0A0A; }
.pill-status.changed { background: var(--orange-50); color: var(--orange-700); }
.pill-status.changed::before { background: var(--orange); }
.pill-status.draft { background: #FFF; color: var(--text-3); box-shadow: inset 0 0 0 1px var(--line); }
.pill-status.draft::before { box-shadow: inset 0 0 0 1.5px #A3A3A3; }
.lang-chip { display: inline-grid; place-items: center; flex: none; height: 1.375rem; min-width: 1.875rem; padding: 0 .4375rem; border-radius: .375rem; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .02em; }
.lang-chip.live { background: #0A0A0A; color: #FFF; }
.lang-chip.complete { background: var(--row); color: var(--text-2); }
.lang-chip.missing { background: var(--orange-50); color: var(--orange-700); }
.badge { display: inline-grid; place-items: center; flex: none; height: 1.25rem; min-width: 1.25rem; padding: 0 .4375rem; border-radius: var(--r-pill); background: var(--orange-100); color: var(--orange-800); font-size: 12px; line-height: 16px; font-weight: 500; font-variant-numeric: tabular-nums; }
.scope { display: inline-flex; align-items: center; gap: .25rem; flex: none; height: 1.375rem; padding: 0 .5rem; border-radius: .375rem; background: var(--row); color: var(--text-2); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; }
.scope svg { width: .875rem; height: .875rem; }
.scope.mono { font-family: var(--mono); font-weight: 400; }
.scope.outline { background: #FFF; box-shadow: inset 0 0 0 1px var(--line-strong); }
.scope.orange { background: var(--orange-50); color: var(--orange-700); }
.method { display: inline-grid; place-items: center; flex: none; height: 1.375rem; min-width: 3.25rem; padding: 0 .4375rem; border-radius: .375rem; font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .02em; background: var(--row); color: var(--text-2); }
.method.post, .method.put { background: var(--orange-50); color: var(--orange-700); }
.method.delete { background: var(--red-50); color: var(--red-700); }
.code-dot { display: inline-flex; align-items: center; gap: .375rem; font-family: var(--mono); font-size: 12px; line-height: 16px; font-variant-numeric: tabular-nums; }
.code-dot::before { content: ""; width: .375rem; height: .375rem; border-radius: 50%; background: #0A0A0A; flex: none; }
.code-dot.c3::before { background: #A3A3A3; }
.code-dot.c4::before { background: var(--orange); }
.code-dot.c5::before { background: var(--red); }
.verdict { display: inline-flex; align-items: center; flex: none; height: 1.375rem; padding: 0 .5rem; border-radius: var(--r-pill); font-size: 12px; line-height: 16px; font-weight: 500; white-space: nowrap; }
.verdict.good { background: var(--green-100); color: var(--green-900); }
.verdict.needs { background: var(--orange-50); color: var(--orange-700); }
.verdict.poor { background: var(--red-50); color: var(--red-700); }
.eyebrow { display: inline-flex; align-items: center; flex: none; height: 2.125rem; padding: 0 .875rem; border-radius: var(--r-pill); background: #FCFCFC; border: 1px solid #E4E4E4; font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); font-weight: 400; color: var(--text-1); text-transform: uppercase; }
.demo-chip { display: inline-grid; place-items: center; height: 1.25rem; padding: 0 .4375rem; border-radius: .375rem; background: var(--orange-50); color: var(--orange-700); font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .02em; }

/* ── type glyphs (SPEC 3.8) ───────────────────────────── */
.glyph { display: inline-grid; place-items: center; flex: none; width: var(--g, 1.25rem); height: var(--g, 1.25rem); border-radius: var(--gr, .375rem); color: #FFF; }
.glyph svg { width: var(--gi, .75rem); height: var(--gi, .75rem); }
.glyph.g-orange { background: linear-gradient(180deg, #FB8A3C, #EA580C); box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }
.glyph.g-ink { background: linear-gradient(180deg, #3A3A3A, #0A0A0A); box-shadow: inset 0 1px 0 rgba(255,255,255,.22); }
.glyph.g-maroon { background: linear-gradient(180deg, #7A2410, #3B1206); box-shadow: inset 0 1px 0 rgba(255,255,255,.22); color: var(--orange-300); }
.glyph.g-cream { background: linear-gradient(180deg, #FFEDD5, #FED7AA); color: var(--orange-800); }
.glyph.g-neutral { background: var(--row); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); }
.glyph.s20 { --g: 1.25rem; --gr: .375rem; --gi: .75rem; }
.glyph.s32 { --g: 2rem; --gr: .5625rem; --gi: 1rem; }
.glyph.s36 { --g: 2.25rem; --gr: .625rem; --gi: 1.125rem; }
.glyph.s48 { --g: 3rem; --gr: .875rem; --gi: 1.5rem; }
.glyph.s60 { --g: 3.75rem; --gr: 1rem; --gi: 1.875rem; }
.glyph.s20 svg { stroke-width: 2; }
.client-logo { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: .75rem; font-size: .9375rem; line-height: max(18px, 1.25rem); font-weight: 700; letter-spacing: 0; }
.client-logo.s32 { width: 2rem; height: 2rem; border-radius: .5625rem; font-size: 12px; line-height: 16px; }
.client-logo.s28 { width: 1.75rem; height: 1.75rem; border-radius: .5rem; font-size: 11px; line-height: 16px; }
.client-logo.s20 { width: 1.25rem; height: 1.25rem; border-radius: .375rem; font-size: .5rem; line-height: 10px; }

/* ── avatars (SPEC 3.12) ──────────────────────────────── */
.avatar { position: relative; display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: 1rem; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.avatar.ring { box-shadow: inset 0 0 0 1px var(--line); }
.avatar.a24 { width: 1.5rem; height: 1.5rem; font-size: .6rem; }
.avatar.a32 { width: 2rem; height: 2rem; font-size: .8rem; }
.avatar.a36 { width: 2.25rem; height: 2.25rem; font-size: .9rem; }
.avatar.a44 { width: 2.75rem; height: 2.75rem; font-size: 1.1rem; }
.avatar .agency { position: absolute; right: -1px; bottom: -1px; width: .875rem; height: .875rem; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px #FFF; }

/* ── lists and rows (SPEC 3.7) ────────────────────────── */
.list { display: flex; flex-direction: column; gap: 1.25rem; }

/* ── tables (SPEC 3.7) ────────────────────────────────── */
/* fixed columns: set widths on th, long cells fade instead of pushing the table wider */

/* ── code block (SPEC 7.6.5) ──────────────────────────── */
.code { position: relative; min-width: 0; background: var(--code-bg); border: 1px solid rgba(255,255,255,.06); border-radius: 1rem; overflow: hidden; color: var(--p-code-text); }
.code-head { display: flex; align-items: center; gap: .25rem; height: 2.75rem; padding: 0 .5rem 0 .75rem; border-bottom: 1px solid rgba(255,255,255,.06); }
.code-tab { height: 1.75rem; padding: 0 .625rem; border-radius: .5rem; font-family: var(--mono); font-size: 12px; line-height: 16px; color: rgba(255,255,255,.55); white-space: nowrap; transition: background-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out); }
.code-tab:hover { color: rgba(255,255,255,.85); }
.code-tab.is-on { color: #FFF; background: rgba(255,255,255,.08); }
.code-head .code-lang { margin-left: auto; padding: 0 .625rem; font-size: 12px; line-height: 16px; color: rgba(255,255,255,.45); white-space: nowrap; }
.code-head .btn-circle { flex: none; }
.code-body { position: relative; display: flex; padding: 1rem 1.25rem 1.25rem; overflow-x: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
.code-body.is-clipped { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.125rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 1.125rem), transparent); }
.code-nums { flex: none; width: 1.5rem; margin-right: 1rem; text-align: right; font-family: var(--mono); font-size: 12px; line-height: 1.375rem; color: var(--p-code-nums); user-select: none; white-space: pre; }
.code pre { margin: 0; font-family: var(--mono); font-size: max(12px, .8125rem); line-height: 1.375rem; white-space: pre; tab-size: 2; }
.code.wrap pre { white-space: pre-wrap; word-break: break-word; }
.code.bare .code-body { padding: .875rem 1rem; }
.tk-c { color: var(--p-code-comment); } .tk-k { color: var(--p-code-key); } .tk-s { color: var(--p-code-str); } .tk-n { color: var(--p-code-num); }
.tk-f { color: #FFFFFF; font-weight: 500; } .tk-t { color: var(--p-code-type); } .tk-g { color: var(--p-code-key); } .tk-a { color: var(--p-code-attr); } .tk-p { color: var(--p-code-punct); }
.code-flash { background: rgba(249,115,22,.16); border-radius: .25rem; transition: background-color 1s var(--ease-out); }

/* ── menus, popovers (SPEC 3.9) ───────────────────────── */
.pop {
  position: fixed; z-index: var(--z-popover); min-width: 15rem; max-width: calc(100vw - 1.5rem); max-height: calc(100dvh - 1.5rem); overflow-y: auto; scrollbar-width: none;
  padding: .5rem; background: #FFF; border: 1px solid var(--line-soft); border-radius: 1.25rem; box-shadow: var(--sh-popover);
  opacity: 0; transform: translateY(-.25rem) scale(.98); transition: opacity 160ms var(--ease-in), transform 160ms var(--ease-in);
}
.pop.is-open { opacity: 1; transform: none; transition: opacity var(--d-menu) var(--ease-out), transform var(--d-menu) var(--ease-out); }
.pop.flip { transform: translateY(.25rem) scale(.98); }
.pop.flip.is-open { transform: none; }
.menu-item { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 2.75rem; padding: 0 .75rem; border-radius: .75rem; color: var(--text-1); font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); font-weight: 500; text-align: left; cursor: pointer; transition: background-color 120ms var(--ease-out); }
.menu-item > svg { width: 1.125rem; height: 1.125rem; color: var(--text-3); }
.menu-item .mi-text { flex: 1; min-width: 0; }
.menu-item .mi-sub { display: block; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--text-4); }
.menu-item .mi-hint { flex: none; font-size: 12px; line-height: 16px; font-weight: 400; color: var(--text-4); }
.menu-item .mi-check { width: 1rem; height: 1rem; color: var(--orange-700); flex: none; }
.menu-item:hover, .menu-item.is-active { background: var(--row); }
.menu-item.danger, .menu-item.danger > svg { color: var(--red); }
.menu-item.tall { min-height: 3.5rem; }
.menu-item.static { cursor: default; }
.menu-item.static:hover { background: none; }
.menu-label { padding: .625rem .75rem .375rem; font-size: 12px; line-height: 16px; color: var(--text-4); text-transform: uppercase; }
.menu-div { height: 1px; margin: .375rem .25rem; background: var(--line-soft); }
.menu-head { display: flex; align-items: center; gap: .75rem; padding: .75rem .75rem .875rem; }

/* ── modal (SPEC 3.10) ────────────────────────────────── */
.mf-backdrop { position: fixed; inset: 0; z-index: var(--z-backdrop); background: var(--backdrop); -webkit-backdrop-filter: var(--backdrop-blur); backdrop-filter: var(--backdrop-blur); opacity: 0; transition: opacity 200ms var(--ease-in); }
.mf-backdrop.is-open { opacity: 1; transition: opacity 240ms var(--ease-out); }
.modal-wrap { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: 1.5rem; overflow-y: auto; pointer-events: none; }
.modal-wrap.top { align-items: start; padding-top: 7.5rem; }
.modal {
  position: relative; width: 40.5rem; max-width: 100%; max-height: calc(100dvh - 3rem); display: flex; flex-direction: column;
  background: #FFF; border-radius: var(--r-modal); box-shadow: var(--sh-modal); padding: 3.75rem; pointer-events: auto;
  opacity: 0; transform: scale(.96) translateY(.5rem); transition: opacity 200ms var(--ease-in), transform 200ms var(--ease-in);
}
.modal.is-open { opacity: 1; transform: none; transition: opacity var(--d-panel) var(--ease-out), transform var(--d-panel) var(--ease-out); }
.modal-close { position: absolute; top: 1.5rem; right: 1.5rem; z-index: 2; }
.modal-head { text-align: center; flex: none; }
.modal-head.left { text-align: left; }
.modal-title { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; color: var(--text-1); }
.modal-sub { margin-top: .5rem; font-size: 1rem; line-height: 1.5rem; color: var(--text-4); }
/* 6px of breathing room inside the scroller so focus rings and lifted tiles are never clipped (net spacing unchanged) */
.modal-body { margin: 2.125rem -.375rem -.375rem; padding: .375rem; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.modal-body:first-child { margin-top: -.375rem; }
.modal-foot { margin-top: 2.5rem; display: flex; align-items: center; justify-content: center; gap: .75rem; flex: none; }
.modal-foot .btn-outline, .sheet-foot .btn-outline { height: var(--h-btn); padding: 0 1.5rem; }
.modal:focus-visible, .sheet:focus-visible { outline: none; }
.modal-foot.end { justify-content: flex-end; }
.modal.sm { width: 30rem; padding: 2.5rem; }
.modal.sm .modal-title { font-size: 1.5rem; line-height: 2rem; }
.modal.sm .modal-body { margin-top: 1.125rem; }
.modal.sm .modal-foot { margin-top: 2rem; }

/* choice tiles (create modal) */
.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; width: 10rem; height: 11.375rem; padding: 2.5rem .75rem;
  background: #FFF; border: 1px solid var(--line-field); border-radius: var(--r-tile); color: var(--text-1); font-size: 1rem; line-height: 1.5rem; font-weight: 500; text-align: center;
  transition: border-color var(--d-hover) var(--ease-out), transform var(--d-hover) var(--ease-out), opacity var(--d-panel) var(--ease-out);
}
@media (hover: hover) { .tile:not(.is-on):hover { border-color: var(--line-strong); } .tile:hover { transform: translateY(-2px); } }
.tile:active { transform: scale(0.97); }
.tile.is-on { border-color: var(--orange-600); }
.tile.is-on .glyph { animation: mf-pop 240ms var(--ease-pop); }
.tile .tile-label { white-space: nowrap; }

/* ── sheet (SPEC 3.11) ────────────────────────────────── */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-modal); max-height: 92dvh; display: flex; flex-direction: column;
  background: #FFF; border-radius: 1.75rem 1.75rem 0 0; padding: .5rem 1rem calc(1rem + env(safe-area-inset-bottom));
  transform: translateY(100%); transition: transform 280ms var(--ease-in); touch-action: none;
}
.sheet.is-open { transform: translateY(0); transition: transform var(--d-sheet) var(--ease-out); }
.sheet.is-dragging { transition: none; }
.sheet-grab { flex: none; width: 2.25rem; height: .3125rem; margin: 0 auto .5rem; border-radius: var(--r-pill); background: #D4D4D4; }
.sheet-head { flex: none; padding: .5rem .25rem 1rem; }
.sheet-head .modal-title { font-size: 1.375rem; line-height: 1.75rem; text-align: center; }
.sheet-head .modal-sub { font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); text-align: center; margin-top: .25rem; }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; touch-action: pan-y; padding: 0 0 .5rem; }
.sheet-foot { flex: none; display: flex; gap: .5rem; padding-top: .75rem; }
.sheet-foot > * { flex: 1; }
.sheet .menu-item { min-height: 3.25rem; font-size: .9375rem; }
.sheet .tiles { gap: .75rem; }
.sheet .tile { width: calc((100% - .75rem) / 2); height: 8.75rem; padding: 1.5rem .75rem; gap: .75rem; }
.sheet .tile .glyph { --g: 3rem; --gr: .875rem; --gi: 1.5rem; }

/* ── toast and dark bar (SPEC 3.13) ───────────────────── */
.toasts { position: fixed; z-index: var(--z-toast); left: var(--toast-x, 50%); bottom: 1.5rem; transform: translateX(-50%); display: flex; flex-direction: column-reverse; align-items: center; gap: .5rem; pointer-events: none; }
.toast {
  display: inline-flex; align-items: center; gap: .625rem; height: 3rem; padding: 0 1.25rem 0 .875rem; border-radius: var(--r-pill);
  background: var(--maroon-app); color: #FFF; box-shadow: var(--sh-dark-bar); font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); font-weight: 500; white-space: nowrap; pointer-events: auto;
  opacity: 0; transform: translateY(1rem); transition: opacity 200ms var(--ease-in), transform 200ms var(--ease-in);
}
.toast.is-in { opacity: 1; transform: none; transition: opacity 320ms var(--ease-out), transform 320ms var(--ease-out); }
.toast .t-ic { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--orange); flex: none; }
.toast .t-ic svg { width: .875rem; height: .875rem; color: #FFF; stroke-width: 2.5; }
.toast .t-act { margin-left: .375rem; color: var(--orange-300); font-weight: 500; }
.toast .t-act:hover { color: #FFF; }
.darkbar {
  position: fixed; z-index: var(--z-fab); left: var(--toast-x, 50%); bottom: 1.5rem; display: flex; align-items: center; gap: .5rem; height: 3.5rem; padding: .5rem .5rem .5rem 1.25rem;
  border-radius: var(--r-pill); background: var(--maroon-app); color: #FFF; box-shadow: var(--sh-dark-bar), inset 0 0 0 1px rgba(255,255,255,.06);
  opacity: 0; transform: translate(-50%, 1.5rem); transition: opacity 240ms var(--ease-in), transform 240ms var(--ease-in);
}
.darkbar.is-in { opacity: 1; transform: translate(-50%, 0); transition: opacity 360ms var(--ease-out), transform 360ms var(--ease-out); }
.darkbar .db-text { font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); font-weight: 500; white-space: nowrap; margin-right: .5rem; display: flex; align-items: center; gap: .5rem; }
.darkbar .db-btn { height: 2.5rem; padding: 0 1.125rem; border-radius: var(--r-pill); background: rgba(255,255,255,.08); color: #FFF; font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); font-weight: 500; white-space: nowrap; transition: background-color var(--d-hover) var(--ease-out), transform var(--d-press) var(--ease-pop); }
.darkbar .db-btn:hover { background: rgba(255,255,255,.14); }
.darkbar .db-btn:active { transform: scale(.97); }
.darkbar .db-btn.danger { color: #FCA5A5; }

/* ── tooltip ──────────────────────────────────────────── */
.tip { position: fixed; z-index: var(--z-tooltip); max-width: 17.5rem; padding: .375rem .625rem; border-radius: .5rem; background: #0A0A0A; color: #FFF; font-size: 12px; line-height: 16px; font-weight: 500; pointer-events: none; opacity: 0; transition: opacity 120ms var(--ease-out); }
.tip.is-in { opacity: 1; }

/* ── charts (SPEC 3.14) ───────────────────────────────── */
.bars { display: flex; justify-content: space-between; align-items: flex-end; }
.bar-col { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 5rem; cursor: default; transition: opacity 200ms var(--ease-out); }
.bars.is-dim .bar-col { opacity: .55; }
.bars.is-dim .bar-col.is-hot { opacity: 1; }
.bar-track { position: relative; width: 100%; height: 11.875rem; border-radius: .75rem .75rem 0 0; }
.bar { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; border-radius: .75rem; background: var(--grad-data); transform-origin: bottom; transform: scaleY(0); transition: transform var(--d-chart) var(--ease-out); will-change: transform; }
.bar-label { position: absolute; left: .75rem; top: .75rem; font-size: 1rem; line-height: 1.5rem; font-weight: 500; color: #FFF; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0; transition: opacity 200ms var(--ease-out), transform 600ms var(--ease-in-out); }
.bar-day { font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); color: var(--text-3); white-space: nowrap; }

.spark { flex: none; width: 5.75rem; height: 1.75rem; overflow: visible; }
.spark .spark-line { fill: none; stroke: var(--orange-600); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark .spark-area { opacity: 0; transition: opacity 600ms var(--ease-out); }
.spark.is-drawn .spark-area { opacity: 1; }

.progress { position: relative; height: .75rem; border-radius: var(--r-pill); background: var(--row); overflow: hidden; }
.progress.on-dark { background: var(--maroon-track); }
.progress > i, .meter > i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: inherit; background: var(--grad-data); transform-origin: left; transform: scaleX(0); transition: transform var(--d-chart) var(--ease-out); }
.meter { position: relative; height: .375rem; border-radius: var(--r-pill); background: var(--row); overflow: hidden; }
.meter.thin { height: .25rem; }
.meter.on-dark { background: rgba(255,255,255,.14); }

.hbar-row { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr) 5.75rem; align-items: center; column-gap: 1rem; height: 2.25rem; }
.hbar-name { font-family: var(--mono); font-size: max(12px, .8125rem); line-height: max(18px, 1.25rem); color: var(--text-1); }
.hbar-track { position: relative; height: 2rem; border-radius: .625rem; overflow: hidden; }
.hbar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: .625rem; background: var(--grad-data); transform-origin: left; transform: scaleX(0); transition: transform var(--d-chart) var(--ease-out); }
.hbar-count { position: absolute; left: .75rem; top: .375rem; font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); font-weight: 500; color: #FFF; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 200ms var(--ease-out); }
.hbar-count.out { color: var(--text-1); }
.hbar-delta { justify-self: end; }

.mbars { display: flex; align-items: flex-end; justify-content: space-between; height: 3rem; overflow: hidden; }
.mbar { flex: none; width: .375rem; border-radius: .1875rem; background: var(--orange-100); transform-origin: bottom; transition: transform 600ms var(--ease-out), background-color 400ms var(--ease-out); }
.mbar.hot { background: var(--grad-data); }

.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; }
.roll > span { display: inline-block; }
.roll .r-out { position: absolute; left: 0; top: 0; }

/* ── empty and loading states ─────────────────────────── */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 2.5rem 1.5rem; text-align: center; }
.empty.inline { flex-direction: row; min-height: 4rem; padding: 1rem; gap: .5rem; }
.loading { display: inline-flex; align-items: center; gap: .5rem; font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); font-weight: 500; color: var(--text-3); }
.loading svg { width: 1rem; height: 1rem; color: var(--orange); animation: mf-spin 1s linear infinite; }

/* ── next-phase page (SPEC 7.9) ───────────────────────── */
.soon-grid { display: grid; grid-template-columns: 7fr 5fr; gap: 1rem; align-items: start; }
.soon-main { padding: 2.5rem; }
.soon-head { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; }
.soon-lead { margin-top: .75rem; font-size: 1rem; line-height: 1.5rem; color: var(--text-3); }
.soon-what { margin-top: 1.5rem; }
.soon-points { margin-top: .75rem; }
.soon-points li { display: flex; align-items: center; gap: .75rem; min-height: 2.25rem; font-size: 1rem; line-height: 1.5rem; color: var(--text-1); }
.soon-points svg { width: 1.25rem; height: 1.25rem; color: var(--orange); flex: none; }
.soon-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.soon-actions .btn-primary { padding: 0 1.75rem; }
.sketch { height: 22.5rem; padding: 1.25rem; border-radius: 1rem; background: var(--panel); overflow: hidden; }
.sk { border-radius: .75rem; opacity: 0; transform: translateY(.375rem); transition: opacity var(--d-enter) var(--ease-out), transform var(--d-enter) var(--ease-out); }
.sk.is-in { opacity: 1; transform: none; }
.sk-row { display: flex; align-items: center; gap: .75rem; height: 2.75rem; }
.sk-circle { width: 2rem; height: 2rem; border-radius: 50%; flex: none; }
.sk-line { height: .625rem; border-radius: .375rem; }
.sk-fill { background-color: #FFF; background-image: repeating-linear-gradient(150deg, #E4E4E4 0 1px, transparent 1px .5625rem); box-shadow: inset 0 0 0 1px var(--line-soft); }

/* ── reveal on load (motion.js) ───────────────────────── */
.mf-js [data-reveal] { opacity: 0; transform: translateY(.5rem); }
.mf-js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity var(--d-enter) var(--ease-out), transform var(--d-enter) var(--ease-out); }

/* ════════════════════════════════════════════════════════
   THE APP SHELL (SPEC 4)
   ════════════════════════════════════════════════════════ */
.app { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); column-gap: 1rem; padding: 0 1rem 1rem; min-height: 100dvh; }
.main { min-width: 0; display: flex; flex-direction: column; }

/* sidebar */
.sb { --cut: var(--panel); position: sticky; top: 1rem; margin-top: 1rem; height: calc(100dvh - 2rem); z-index: var(--z-sticky); display: flex; flex-direction: column; background: var(--panel); border-radius: var(--r-panel); }
.sb-head { flex: none; display: flex; align-items: flex-start; height: 4rem; padding: 1.75rem 1.5rem 0; }
.sb-head .mf-lockup { height: 1.75rem; }
.sb-close { display: none; margin-left: auto; }
.switcher {
  flex: none; display: flex; align-items: center; gap: .625rem; width: 14rem; height: 3.25rem; margin: .75rem .75rem 0; padding: .5rem .75rem .5rem .5rem;
  background: #FFF; border-radius: .875rem; text-align: left; transition: box-shadow var(--d-hover) var(--ease-out), transform var(--d-press) var(--ease-pop);
}
.switcher:hover, .switcher.is-open { box-shadow: var(--sh-circle); }
.switcher:active { transform: scale(0.985); }
.switcher .sw-text { flex: 1; min-width: 0; }
.switcher .client-logo { width: 2.25rem; height: 2.25rem; border-radius: .625rem; font-size: max(12px, .8125rem); line-height: 16px; }
.switcher .sw-name { font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); font-weight: 500; color: var(--text-1); }
.switcher .sw-site { display: flex; align-items: center; gap: .375rem; margin-top: 1px; font-size: 12px; line-height: 16px; color: var(--text-4); min-width: 0; }
.switcher .sw-site .fit { flex: 1; }
.switcher > svg { width: 1rem; height: 1rem; color: var(--text-3); }
/* desktop density: the 12px site line keeps its size, so the switcher trims 6px of gaps to hold a long domain */
@media (min-width: 1024px) { .switcher { gap: .5rem; padding-right: .625rem; } .switcher .sw-site { gap: .3125rem; } }
.sb-nav { flex: 1 1 auto; min-height: 0; margin: .5rem 0 .75rem; padding-bottom: .75rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.sb-nav::-webkit-scrollbar { display: none; }
.sb-nav.fade-top { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1.5rem); mask-image: linear-gradient(180deg, transparent 0, #000 1.5rem); }
.sb-nav.fade-bottom { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 2rem), transparent); }
.sb-nav.fade-top.fade-bottom { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 1.5rem, #000 calc(100% - 2rem), transparent); mask-image: linear-gradient(180deg, transparent 0, #000 1.5rem, #000 calc(100% - 2rem), transparent); }
.nav-label { margin: 1.75rem 0 .875rem; padding-left: 1.5rem; font-size: 12px; line-height: 16px; color: var(--text-4); text-transform: uppercase; }
.nav-label:first-child { margin-top: 1rem; }
.nav-item {
  position: relative; display: flex; align-items: center; gap: .75rem; height: 2.75rem; padding: 0 1.25rem 0 1.5rem; color: var(--text-3);
  font-size: 1rem; line-height: 1.5rem; font-weight: 400; transition: background-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out);
}
.nav-item + .nav-item { margin-top: .25rem; }
.nav-item > svg { width: 1.25rem; height: 1.25rem; transition: color var(--d-hover) var(--ease-out); }
.nav-item .nav-text { flex: 1; min-width: 0; }
.nav-item .count { flex: none; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--text-4); font-variant-numeric: tabular-nums; }
.nav-item:hover { background: var(--row); color: var(--text-1); }
.nav-item.is-active { background: var(--row); color: var(--text-1); font-weight: 500; }
.nav-item.is-active > svg { color: var(--orange); }
.nav-item.is-active .count { color: var(--text-1); }
.nav-item.is-active::before { content: ""; position: absolute; left: 0; top: 1px; width: .375rem; height: 2.625rem; border-radius: 0 .25rem .25rem 0; background: var(--grad-nav-bar); transform-origin: center; animation: mf-navbar 240ms var(--ease-out); }
@keyframes mf-navbar { from { transform: scaleY(.4); } to { transform: scaleY(1); } }
.nav-item.is-new { animation: mf-slidein 420ms var(--ease-out); }
@keyframes mf-slidein { from { opacity: 0; transform: translateX(-.5rem); } to { opacity: 1; transform: none; } }
.sb-phone { display: none; }

/* plan card (the ref's Upgrade card, 248 x 141: head, the fullest meter, button; the other meters open on demand) */
.plan { flex: none; padding: 1.125rem 1rem 1rem; border-radius: var(--r-plan-card); color: #FFF; }
.plan-head { display: flex; align-items: center; gap: .625rem; height: 1.5rem; }
.plan-head .plan-ic { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #FFF; color: var(--orange); flex: none; }
.plan-head .plan-ic svg { width: .75rem; height: .75rem; fill: currentColor; stroke-width: 1; }
.plan-head .t-plan { flex: none; white-space: nowrap; }
.plan-head .plan-renews { flex: 0 1 auto; min-width: 0; margin-left: auto; font-size: 12px; line-height: 16px; color: var(--text-on-dark-2); white-space: nowrap; overflow: hidden; }
.plan-head .plan-renews.is-clipped { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.125rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 1.125rem), transparent); }
.plan-meters { margin-top: .6875rem; display: flex; flex-direction: column; gap: .625rem; }
.plan-meter-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: 12px; line-height: 16px; }
.plan-meter-top span { color: var(--text-on-dark-2); }
.plan-meter-top b { font-weight: 600; color: #FFF; font-variant-numeric: tabular-nums; }
.plan-meter-top + .meter { margin-top: .375rem; }
/* desktop density: the 12px meter line keeps its size, so the card trims its side padding and gaps to hold label and value */
@media (min-width: 1024px) { .plan { padding-left: 12px; padding-right: 12px; } .plan-usage .plan-meter-top { gap: .3125rem; } }
.plan .btn-plan { width: 100%; margin: .5rem 0 0; }
.plan-meters.is-compact { gap: 0; }
.plan-usage { position: relative; display: block; width: 100%; border-radius: .375rem; text-align: left; color: #FFF; }
.plan-usage::after { content: ""; position: absolute; left: -.25rem; right: -.25rem; top: -.5625rem; bottom: -.4375rem; }
.plan-usage .plan-meter-top + .meter { margin-top: .3125rem; }
.plan-usage .plan-meter-top b { margin-left: auto; }
.plan-usage .plan-meter-top > svg { width: .875rem; height: .875rem; margin-left: -2px; color: var(--text-on-dark-2); transition: transform var(--d-menu) var(--ease-out), color var(--d-hover) var(--ease-out); }
.plan-usage:hover .plan-meter-top > svg { color: #FFF; }
.plan-usage.is-high .plan-meter-top span { color: var(--orange-300); }
.plan.is-open .plan-usage .plan-meter-top > svg { transform: rotate(180deg); }
.plan-more { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--d-panel) var(--ease-out), visibility 0s linear var(--d-panel); }
.plan-more > div { min-height: 0; overflow: hidden; }
.plan-more > div > div { padding-top: .625rem; }
.plan.is-open .plan-more { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows var(--d-panel) var(--ease-out), visibility 0s; }

/* top bar */
.tb-wrap { position: sticky; top: 0; z-index: var(--z-topbar); padding: 1rem 0; background: var(--frame); }
.tb { display: flex; align-items: center; gap: 1rem; height: 5.875rem; padding: 1.25rem; background: var(--panel); border-radius: var(--r-panel); }
.tb-right { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.tb-btn { position: relative; display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: #FFF; color: var(--text-2); transition: box-shadow var(--d-hover) var(--ease-out), transform var(--d-press) var(--ease-pop); }
.tb-btn > svg { width: 1.5rem; height: 1.5rem; }
.tb-btn:hover, .tb-btn.is-open { box-shadow: var(--sh-circle); }
.tb-btn:active { transform: scale(.94); }
.tb-btn .unread { position: absolute; top: .625rem; right: .625rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px var(--panel); transition: transform 240ms var(--ease-pop), opacity 200ms var(--ease-out); }
.tb-btn .unread.is-off { transform: scale(0); opacity: 0; }
.tb-avatar { flex: none; padding: 2px; background: #FFF; border-radius: 50%; transition: transform var(--d-press) var(--ease-pop), box-shadow var(--d-hover) var(--ease-out); }
.tb-avatar:hover, .tb-avatar.is-open { box-shadow: var(--sh-circle); }
.tb-avatar:active { transform: scale(.94); }
.tb-avatar .avatar { width: 2.75rem; height: 2.75rem; font-size: 1.1rem; }
.tb-menu, .tb-client, .tb-search { display: none; }

/* content panel and page header */
.content { flex: 1 0 auto; min-width: 0; background: var(--panel); border-radius: var(--r-panel); padding: 1.25rem 1.25rem 1.5rem; min-height: calc(100dvh - 8.875rem); transition: opacity 140ms var(--ease-in), transform 140ms var(--ease-in); }
.content.is-leaving { opacity: 0; transform: translateY(-.25rem); }
.crumbs { display: flex; align-items: center; gap: .5rem; margin-bottom: .75rem; font-size: max(13px, .875rem); line-height: max(18px, 1.25rem); color: var(--text-4); white-space: nowrap; }
.crumbs a { transition: color var(--d-hover) var(--ease-out); }
.crumbs a:hover { color: var(--text-1); }
.crumbs .sep { color: var(--text-4); }
.crumbs .here { color: var(--text-1); font-weight: 500; }

/* floating phone action */
.fab { display: none; }

/* drawer backdrop (phone) */
.drawer-backdrop { position: fixed; inset: 0; z-index: calc(var(--z-drawer) - 1); background: var(--backdrop); -webkit-backdrop-filter: var(--backdrop-blur); backdrop-filter: var(--backdrop-blur); opacity: 0; pointer-events: none; transition: opacity 280ms var(--ease-in); }
.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; transition: opacity var(--d-sheet) var(--ease-out); }

/* embed mode (landing iframes) */
.mf-embed .tb-wrap, .mf-embed .sb { pointer-events: none; }

/* ════════════════════════════════════════════════════════
   PHONE (below 1024, designed at 390)
   ════════════════════════════════════════════════════════ */
@media (max-width: 1023.98px) {
  body { background: var(--panel); }
  .app { display: block; padding: 0; min-height: 100dvh; }
  .main { display: block; }

  .sb {
    position: fixed; top: 0; left: 0; bottom: 0; margin: 0; height: 100dvh; width: min(20rem, 86vw); z-index: var(--z-drawer);
    border-radius: 0 1.5rem 1.5rem 0; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); overflow: hidden;
    transform: translateX(-100%); visibility: hidden; box-shadow: none;
    transition: transform 280ms var(--ease-in), visibility 0s linear 280ms, box-shadow 280ms var(--ease-in);
  }
  .drawer-open .sb { transform: translateX(var(--drag-x, 0px)); visibility: visible; box-shadow: 0 0 60px rgba(0,0,0,.12); transition: transform var(--d-sheet) var(--ease-out), visibility 0s, box-shadow var(--d-sheet) var(--ease-out); }
  .sb.is-dragging { transition: none; }
  .sb-head { height: 4.75rem; padding: 1rem 1rem 1rem 1.5rem; align-items: center; }
  .sb-close { display: grid; }
  .switcher { width: auto; }
  .nav-item { height: 2.75rem; }
  .sb { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .sb::-webkit-scrollbar { display: none; }
  .sb-nav { flex: none; overflow: visible; margin-top: .75rem; }
  .sb-nav.fade-top, .sb-nav.fade-bottom { -webkit-mask-image: none; mask-image: none; }
  .sb-phone { display: block; flex: none; padding: .5rem 0 .75rem; }
  .sb-phone .nav-item { width: 100%; height: 3rem; text-align: left; }
  .plan { border-radius: .9375rem; margin: .25rem .75rem .25rem; }
  .plan-usage::after { top: -.625rem; bottom: -.5625rem; }
  .plan .btn-plan { margin-top: .625rem; }

  .tb-wrap { padding: env(safe-area-inset-top) 0 0; background: rgba(250,250,250,.86); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid transparent; transition: border-color 200ms var(--ease-out); }
  .is-scrolled .tb-wrap { border-bottom-color: var(--line-soft); }
  .tb { height: 3.75rem; padding: 0 1rem; gap: .5rem; background: none; border-radius: 0; }
  .tb .search-pill, .tb-docs, .tb-bell { display: none; }
  .tb-menu { display: grid; box-shadow: var(--sh-circle); }
  .tb-search { display: grid; }
  .tb-right { gap: .5rem; }
  .tb-client { display: flex; align-items: center; gap: .5rem; min-width: 0; height: 2.75rem; padding: 0 .375rem; border-radius: .75rem; transition: background-color var(--d-hover) var(--ease-out); }
  .tb-client:active { background: rgba(0,0,0,.04); }
  .tb-client .fit { max-width: 9.375rem; font-size: .9375rem; line-height: max(18px, 1.25rem); font-weight: 600; }
  .tb-client > svg { width: 1rem; height: 1rem; color: var(--text-3); }
  .tb-btn { width: 2.75rem; height: 2.75rem; }
  .tb-btn .unread { top: .5rem; right: .5rem; }
  .tb-avatar { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; background: none; }
  .tb-avatar .avatar { width: 2.25rem; height: 2.25rem; font-size: .9rem; }
  .tb-avatar:hover { box-shadow: none; }

  .content { background: none; border-radius: 0; padding: .5rem 1rem calc(7rem + env(safe-area-inset-bottom)); min-height: 0; }
  .crumbs { display: none; }

  .fab {
    position: fixed; z-index: var(--z-fab); left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom)); transform: translate(-50%, 0);
    display: inline-flex; height: 3.25rem; padding: 0 1.5rem; gap: .625rem; font-size: .9375rem; line-height: max(18px, 1.25rem); box-shadow: var(--sh-fab);
    transition: transform 320ms var(--ease-out), background-color var(--d-hover) var(--ease-out);
  }
  .fab svg { width: 1.125rem; height: 1.125rem; stroke-width: 2; }
  .fab.is-hidden, .fab.is-yield { transform: translate(-50%, calc(100% + 1.5rem)); }
  .fab:active { transform: translate(-50%, 0) scale(.97); }

  .card { padding: 1.25rem; }
  .modal { padding: 2rem 1.5rem; }
  .toasts { bottom: calc(5.25rem + env(safe-area-inset-bottom)); left: 1rem; right: 1rem; transform: none; }
  .toast { max-width: 100%; height: auto; min-height: 3rem; padding: .75rem 1.25rem .75rem .875rem; border-radius: 1.5rem; white-space: normal; text-wrap: pretty; }
  .darkbar { left: 50%; bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
  .soon-grid { grid-template-columns: 1fr; }
  .soon-main { padding: 1.5rem; }
  .sketch { height: 17.5rem; }
  .hbar-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 2rem; row-gap: .375rem; height: auto; }
  .hbar-row .hbar-track { grid-column: 1 / -1; grid-row: 2; }
  .hbar-row .hbar-delta { grid-column: 2; grid-row: 1; }

  /* 44 px touch targets */
  .chip, .chip.md, .chip.sm, .chip.h36 { height: 2.75rem; }
  .sb-head .mf-lockup { height: 2.75rem; }
  .btn-plan, .btn-outline.sm, .btn-primary.sm, .btn-danger.sm { height: 2.75rem; }
  .seg button, .code-tab, .t-act { position: relative; }
  .seg button::after, .code-tab::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2.75rem; transform: translateY(-50%); }
  .t-act::after { content: ""; position: absolute; left: 50%; top: 50%; width: 2.75rem; height: 2.75rem; transform: translate(-50%, -50%); }
  .seg.light, .seg.light.xs { height: 2.75rem; padding: .25rem; }
  .seg.light button, .seg.light.xs button { height: 2.25rem; }
  .seg.light .seg-thumb, .seg.light.xs .seg-thumb { top: .25rem; height: 2.25rem; }
  .switch input { inset: -.5625rem -.25rem; }
  .shell-field.chips-in > input { height: 2.75rem; }
  .darkbar { height: 3.75rem; }
  .darkbar .db-btn, .darkbar .btn-circle { height: 2.75rem; }
  .btn-circle, .btn-circle.c32 { width: 2.75rem; height: 2.75rem; }
  .modal-close.btn-circle { width: 2.75rem; height: 2.75rem; }
  .select-sm { height: 2.75rem; }
  .btn-text { height: 2.75rem; }
  .btn-outline { height: 2.75rem; }
  .menu-item { min-height: 3rem; }
  .search-sm { height: 2.75rem; }
  .search-sm > svg { top: .8125rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mf-js [data-reveal] { transform: none; }
  .bar, .progress > i, .meter > i, .hbar-fill { transition-duration: 1ms; }
  .live-dot::after { display: none; }
}