/* ==========================================================================
   site.css — product extensions to the Kerf design system.
   Load order: kerf/tokens.css → kerf/app.css → css/site.css
   Only components app.css does not have, built from the same tokens and in the same style.
   Never restyle an app.css component here.
     1 Brand images      5 App shell (bar, menu, tab bar)   9 Library            13 Assistant extras
     2 Page scaffolding  6 Dashboard bits                   10 Projects, files   14 Auth, legal, misc
     3 Forms extras      7 Presets, pickers                 11 Workspace extras
     4 Overlays          8 Plans and pricing                12 Admin
   ========================================================================== */

/* 1 ── Brand images: the configured mark follows the theme ──────────────── */
.brand__img { height: var(--brand-logo-height); width: auto; flex: none; }
.brand__img--dark { display: none; }
[data-theme="dark"] .brand__img--light { display: none; }
[data-theme="dark"] .brand__img--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand__img--light { display: none; }
  :root:not([data-theme="light"]) .brand__img--dark { display: block; }
}
.brand--sm .brand__img { height: 22px; }
/* Photographic sections are always dark: use the dark mark there whatever the page theme. */
.footer .brand__img { height: 22px; }

/* 2 ── Page scaffolding ─────────────────────────────────────────────────── */
.page { padding-block: var(--space-5) var(--space-8); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.page-head__text { display: grid; gap: var(--space-2); min-width: 0; }
.page-head h1 { font-size: var(--text-h2); font-stretch: var(--font-width-display); }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.section-title h2 { font-size: var(--text-h3); font-weight: var(--weight-semibold); }
.back-link { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-text-muted); text-decoration: none; font-size: var(--text-body-sm); font-weight: var(--weight-medium); min-height: var(--control-h-sm); }
.back-link:hover { color: var(--color-text); }
.back-link .icon { transform: scaleX(-1); }
.panel { background: var(--color-surface); border: var(--border-w) solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
@media (min-width: 48rem) { .panel { padding: var(--space-5); } }
.panel > h2, .panel > .section-title { margin-bottom: var(--space-4); }
.layout-aside { display: grid; gap: var(--space-5); }
@media (min-width: 64rem) { .layout-aside { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; } }
.layout-aside--left { }
@media (min-width: 64rem) { .layout-aside--left { grid-template-columns: 16rem minmax(0, 1fr); } }
.dl-plain { display: grid; gap: var(--space-1); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-feature-settings: "zero" 1; }
.text-danger { color: var(--color-danger-text); }
.text-success { color: var(--color-success-text); }
.nowrap { white-space: nowrap; }
.w-full { width: 100%; }
.mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } .mt-6 { margin-top: var(--space-6); }

/* 3 ── Form extras ──────────────────────────────────────────────────────── */
.form-grid { display: grid; gap: var(--space-4); }
@media (min-width: 48rem) { .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .form-grid .span-all { grid-column: 1 / -1; } }
.fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-4); }
.fieldset > legend { padding: 0; margin-bottom: var(--space-3); }
.form-actions { display: flex; flex-wrap: wrap-reverse; gap: var(--space-3); justify-content: flex-end; padding-top: var(--space-4); border-top: var(--border-w) solid var(--color-border); }
@media (max-width: 47.99rem) { .form-actions > .btn { flex: 1 1 100%; } }
.search { position: relative; display: flex; align-items: center; }
.search > .icon { position: absolute; left: var(--space-3); color: var(--color-text-subtle); pointer-events: none; }
.search > .input { padding-left: 2.5rem; }
.input--sm { min-height: var(--control-h-sm); }
.colour-input { display: flex; gap: var(--space-2); align-items: stretch; }
.colour-input input[type="color"] { width: var(--control-h); min-height: var(--control-h); padding: 3px; border: var(--border-w) solid var(--color-border-control); border-radius: var(--radius-md); background: var(--color-surface-raised); cursor: pointer; flex: none; }
.validation-summary { margin-bottom: var(--space-4); }

/* 4 ── Overlays: menus and popovers ─────────────────────────────────────── */
.menu-wrap { position: relative; }
.menu { position: absolute; z-index: var(--z-nav); right: 0; top: calc(100% + var(--space-2)); min-width: 15rem; padding: var(--space-2); display: grid; gap: 2px; background: var(--color-surface-raised); border: var(--border-w) solid var(--color-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.menu[hidden] { display: none; }
.menu__head { padding: var(--space-2) var(--space-3) var(--space-3); border-bottom: var(--border-w) solid var(--color-border); margin-bottom: var(--space-1); }
.menu__item { display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--control-h); padding-inline: var(--space-3); background: none; border: 0; border-radius: var(--radius-md); color: var(--color-text); font-size: var(--text-body-sm); font-weight: var(--weight-medium); text-align: left; text-decoration: none; cursor: pointer; }
.menu__item:hover, .menu__item:focus-visible { background: var(--color-bg-subtle); }
.menu__item .icon { color: var(--color-text-subtle); }
.menu__sep { height: 1px; background: var(--color-border); margin-block: var(--space-1); }
.highlight { animation: highlight 2.4s var(--ease-out) 1; }
@keyframes highlight { 0%, 40% { box-shadow: 0 0 0 2px var(--color-accent-text), var(--shadow-md); } 100% { box-shadow: none; } }

/* 5 ── App shell ────────────────────────────────────────────────────────── */
.app-bar__search { display: none; flex: 1; max-width: 26rem; margin-inline: var(--space-4) auto; }
@media (min-width: 64rem) { .app-bar__search { display: flex; } }
.app-bar .nav__inner { max-width: none; }
.avatar-btn { padding: 0; border: 0; background: none; border-radius: var(--radius-md); cursor: pointer; }
.avatar-btn:hover .avatar { opacity: 0.88; }
.app-nav { display: none; }
@media (min-width: 64rem) { .app-nav { display: flex; } }
/* Bottom tab bar on phones and tablets: the five places a shop owner goes most. */
.tabbar { position: fixed; z-index: var(--z-sticky); left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); padding-bottom: env(safe-area-inset-bottom); background: color-mix(in srgb, var(--color-surface) 94%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: var(--border-w) solid var(--color-border); }
.tabbar__item { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 3.5rem; color: var(--color-text-muted); text-decoration: none; font-size: var(--text-overline); font-family: var(--font-mono); font-weight: var(--weight-medium); letter-spacing: 0.04em; text-transform: uppercase; }
.tabbar__item .icon { width: 1.375rem; height: 1.375rem; }
.tabbar__item[aria-current="page"] { color: var(--color-text); box-shadow: inset 0 2px 0 var(--color-primary); }
.has-tabbar { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }
.has-tabbar .assistant-fab { bottom: calc(3.5rem + var(--space-4) + env(safe-area-inset-bottom)); }
.has-tabbar .toast-region { bottom: calc(3.5rem + var(--space-3) + env(safe-area-inset-bottom)); }
@media (min-width: 64rem) { .tabbar { display: none; } .has-tabbar { padding-bottom: 0; } .has-tabbar .assistant-fab { bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); } }
.subnav { margin-bottom: var(--space-5); }
.subnav .tab { text-decoration: none; }

/* 6 ── Dashboard ────────────────────────────────────────────────────────── */
.checklist { display: grid; gap: var(--space-2); }
.checklist__item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); min-height: var(--control-h-lg); padding: var(--space-2) var(--space-3); border: var(--border-w) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-raised); color: var(--color-text); text-decoration: none; }
a.checklist__item:hover { border-color: var(--color-border-control); }
.checklist__mark { width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border: var(--border-w-strong) solid var(--color-border-control); border-radius: 50%; color: var(--color-on-primary); }
.checklist__item[data-done="true"] .checklist__mark { background: var(--color-success-text); border-color: var(--color-success-text); color: var(--color-surface); }
.checklist__item[data-done="true"] .checklist__label { color: var(--color-text-muted); text-decoration: line-through; text-decoration-color: var(--color-border-strong); }
.meter { display: grid; gap: var(--space-2); }
.meter__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); font-size: var(--text-body-sm); }
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (min-width: 64rem) { .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { padding: var(--space-4); background: var(--color-surface); border: var(--border-w) solid var(--color-border); border-radius: var(--radius-lg); display: grid; gap: var(--space-1); }
.stat .stat__value { font-size: var(--text-h2); }
.quick-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
@media (min-width: 48rem) { .quick-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.quick-actions .btn { white-space: normal; text-align: center; min-height: var(--control-h-lg); }
.list { display: grid; }
.list__row { display: flex; align-items: center; gap: var(--space-3); min-height: var(--control-h-lg); padding-block: var(--space-2); border-bottom: var(--border-w) solid var(--color-border); color: var(--color-text); text-decoration: none; }
.list__row:last-child { border-bottom: 0; }
a.list__row:hover .list__title { text-decoration: underline; text-underline-offset: 0.18em; }
.list__title { font-weight: var(--weight-semibold); }

/* 7 ── Presets, pickers ─────────────────────────────────────────────────── */
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(10rem, 1fr); gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2); scrollbar-width: thin; }
@media (min-width: 64rem) { .strip--wrap { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); overflow: visible; } }
.strip > * { scroll-snap-align: start; }
.preset-card { position: relative; display: grid; gap: 0; padding: 0; background: var(--color-surface); border: var(--border-w) solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; color: var(--color-text); text-decoration: none; text-align: left; cursor: pointer; transition: border-color var(--dur-fast), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.preset-card:hover { border-color: var(--color-border-control); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.preset-card[aria-pressed="true"] { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.preset-card__media { aspect-ratio: 16 / 10; background-color: var(--color-viewport-bg); background-image: linear-gradient(var(--color-viewport-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-viewport-grid) 1px, transparent 1px); background-size: 16px 16px; }
.preset-card__media img { width: 100%; height: 100%; object-fit: contain; }
.preset-card__body { padding: var(--space-2) var(--space-3) var(--space-3); display: grid; gap: 2px; }
.preset-card__name { font-size: var(--text-label); font-weight: var(--weight-semibold); }
.preset-card--sm { grid-auto-columns: 7.5rem; }
.preset-card--sm .preset-card__body { padding: var(--space-1) var(--space-2) var(--space-2); }
.strip--sm { grid-auto-columns: 7.5rem; }
.pick-list { display: grid; gap: var(--space-2); max-height: 50dvh; overflow-y: auto; padding: 2px; }
.pick { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--control-h-lg); padding: var(--space-2) var(--space-3); background: var(--color-surface-raised); border: var(--border-w) solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); text-align: left; cursor: pointer; }
.pick:hover { border-color: var(--color-border-control); }
.pick[aria-pressed="true"] { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }

/* 8 ── Plans and pricing ────────────────────────────────────────────────── */
.plan-grid { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 48rem) { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .plan-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .plan-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan-card__save { color: var(--color-success-text); font-family: var(--font-mono); font-size: var(--text-caption); }
.faq { display: grid; gap: var(--space-2); max-width: 48rem; }
.faq details { background: var(--color-surface); border: var(--border-w) solid var(--color-border); border-radius: var(--radius-md); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--control-h-lg); padding: var(--space-3) var(--space-4); cursor: pointer; font-weight: var(--weight-semibold); font-stretch: var(--font-width-heading); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--color-text-subtle); font-size: var(--text-body-lg); }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 var(--space-4) var(--space-4); color: var(--color-text-muted); font-size: var(--text-body-sm); }
.footer__grid { display: grid; gap: var(--space-5); }
@media (min-width: 48rem) { .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer__links { display: grid; gap: var(--space-1); }
.footer__links a { color: var(--color-text-muted); text-decoration: none; min-height: 2rem; display: inline-flex; align-items: center; }
.footer__links a:hover { color: var(--color-text); text-decoration: underline; }
.footer__base { margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--border-w) solid var(--color-border); }

/* 9 ── Library ──────────────────────────────────────────────────────────── */
.cat-tree { display: grid; gap: 2px; }
.cat-tree a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); min-height: var(--control-h-sm); padding-inline: var(--space-3); border-radius: var(--radius-md); color: var(--color-text-muted); text-decoration: none; font-size: var(--text-body-sm); }
.cat-tree a:hover { background: var(--color-bg-subtle); color: var(--color-text); }
.cat-tree a[aria-current="page"] { background: var(--color-bg-subtle); color: var(--color-text); font-weight: var(--weight-semibold); box-shadow: inset 2px 0 0 var(--color-primary); }
.cat-tree .cat-tree__child { padding-left: var(--space-5); }
.cat-tree .data { font-size: var(--text-caption); color: var(--color-text-subtle); }
.filters-aside { display: none; }
@media (min-width: 64rem) { .filters-aside { display: grid; gap: var(--space-5); position: sticky; top: calc(var(--nav-h) + var(--space-4)); max-height: calc(100dvh - var(--nav-h) - var(--space-6)); overflow-y: auto; } .filters-toggle { display: none !important; } }
.drawer--left { inset: 0 auto 0 0; border-left: 0; border-right: var(--border-w) solid var(--color-border); transform: translateX(-100%); }
.gallery { display: grid; gap: var(--space-2); }
.gallery__main { aspect-ratio: 4 / 3; background: var(--color-surface-sunken); border: var(--border-w) solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.gallery__main img { width: 100%; height: 100%; object-fit: contain; }
.gallery__thumbs { display: flex; gap: var(--space-2); overflow-x: auto; }
.gallery__thumbs button { flex: none; width: 4.5rem; aspect-ratio: 4 / 3; padding: 0; border: var(--border-w) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-sunken); cursor: pointer; }
.gallery__thumbs button[aria-pressed="true"] { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.gallery__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.prose { display: grid; gap: var(--space-3); font-size: var(--text-body); color: var(--color-text-muted); max-width: 44rem; }
.prose h2, .prose h3 { color: var(--color-text); margin-top: var(--space-3); }
.prose ul, .prose ol { padding-left: 1.25rem; display: grid; gap: var(--space-1); }
.load-more { display: grid; justify-items: center; padding-top: var(--space-5); }

/* 10 ── Projects and files ─────────────────────────────────────────────── */
.pipeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(6.5rem, 1fr); gap: 2px; overflow-x: auto; padding: 3px; background: var(--color-surface-sunken); border: var(--border-w) solid var(--color-border); border-radius: var(--radius-md); }
.pipeline__step { display: grid; place-items: center; min-height: calc(var(--control-h) - 6px); padding-inline: var(--space-2); border: 0; border-radius: var(--radius-sm); background: none; color: var(--color-text-muted); font-size: var(--text-label); font-weight: var(--weight-semibold); white-space: nowrap; cursor: pointer; }
.pipeline__step:hover { color: var(--color-text); }
.pipeline__step[data-state="done"] { color: var(--color-text); }
.pipeline__step[data-state="done"]::before { content: ""; display: inline-block; width: 0.7rem; height: 0.7rem; margin-right: var(--space-1); background: var(--color-success-text); clip-path: polygon(14% 52%, 0 66%, 38% 100%, 100% 22%, 86% 10%, 37% 70%); }
.pipeline__step[aria-current="step"] { background: var(--color-surface-raised); color: var(--color-text); box-shadow: var(--shadow-sm), inset 0 -2px 0 var(--color-primary); }
.dropzone { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-6) var(--space-4); border: var(--border-w-strong) dashed var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); text-align: center; color: var(--color-text-muted); font-size: var(--text-body-sm); transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.dropzone[data-over="true"] { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-on-primary-soft); }
.file-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: var(--border-w) solid var(--color-border); }
.file-row:last-child { border-bottom: 0; }
.file-row__icon { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; background: var(--color-surface-sunken); border: var(--border-w) solid var(--color-border); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: var(--text-overline); font-weight: var(--weight-semibold); text-transform: uppercase; color: var(--color-text-muted); }
.file-row__actions { display: flex; gap: var(--space-1); }
.upload-item { display: grid; gap: var(--space-2); padding: var(--space-3); border: var(--border-w) solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-raised); font-size: var(--text-body-sm); }
.timeline { display: grid; gap: 0; }
.timeline li { position: relative; display: grid; gap: 2px; padding: 0 0 var(--space-4) var(--space-5); font-size: var(--text-body-sm); }
.timeline li::before { content: ""; position: absolute; left: 4px; top: 0.45em; width: 7px; height: 7px; border-radius: 1px; background: var(--color-border-control); }
.timeline li::after { content: ""; position: absolute; left: 7px; top: 1.2em; bottom: 0; width: 1px; background: var(--color-border); }
.timeline li:last-child::after { display: none; }

/* 11 ── Workspace extras ───────────────────────────────────────────────── */
.ws-title { min-width: 0; }
.ws-title .title { line-height: 1.2; }
.workspace__heightmap { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: var(--space-8) var(--space-4) var(--space-7); background: var(--color-viewport-bg); }
.workspace__heightmap img { max-width: 100%; max-height: 100%; object-fit: contain; image-rendering: auto; border: var(--border-w) solid var(--color-border); border-radius: var(--radius-sm); background: repeating-conic-gradient(var(--color-bg-subtle) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.workspace__status { position: absolute; z-index: 2; left: 50%; top: var(--space-3); transform: translateX(-50%); }
@media (min-width: 64rem) { .workspace__status { top: var(--space-4); } }
.workspace__dim { position: absolute; z-index: 1; transform: translate(-50%, 0); font-family: var(--font-mono); font-size: var(--text-overline); font-weight: var(--weight-medium); color: var(--color-text-muted); pointer-events: none; white-space: nowrap; background: color-mix(in srgb, var(--color-viewport-bg) 80%, transparent); padding: 0 var(--space-1); }
.workspace__empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: var(--space-6); color: var(--color-text-muted); font-size: var(--text-body-sm); }
.workspace__loading { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.workspace__loading .ribs { width: 8rem; --ribs-h: 32px; animation: pulse 1.2s var(--ease-in-out) infinite; }
.ws-toolbar-group { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.panel__tabs { flex: none; padding-inline: var(--space-4); }
@media (min-width: 64rem) { .panel__tabs { padding-inline: var(--space-5); } }
.mode-switch { min-width: 11rem; }
.layer-card { display: grid; gap: var(--space-3); padding: var(--space-3); background: var(--color-surface-raised); border: var(--border-w) solid var(--color-border); border-radius: var(--radius-md); }
.layer-card[data-off="true"] { opacity: 0.6; }
.layer-card__head { display: flex; align-items: center; gap: var(--space-2); }
.layer-card__head .title { flex: 1; min-width: 0; font-size: var(--text-body-sm); }
.pattern-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: var(--space-2); }
.pattern-opt { display: grid; gap: 2px; padding: 0; border: var(--border-w) solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); color: var(--color-text); cursor: pointer; text-align: left; }
.pattern-opt img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--color-surface-sunken); }
.pattern-opt span { padding: 2px var(--space-2) var(--space-1); font-size: var(--text-caption); font-weight: var(--weight-medium); line-height: 1.25; }
.pattern-opt[aria-pressed="true"] { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.param-number { display: grid; grid-template-columns: 1fr 8.5rem; align-items: center; gap: var(--space-3); }
.param-number .affix { min-height: var(--control-h-sm); }
.param-number .input { min-height: 0; font-size: var(--text-body-sm); }
@media (pointer: coarse) { .param-number .input { font-size: var(--text-body); } }
.issue-list { display: grid; gap: var(--space-2); }
.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.result-grid dt { font-size: var(--text-caption); color: var(--color-text-subtle); }
.result-grid dd { margin: 0; font-family: var(--font-mono); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.sheet-card { display: grid; gap: var(--space-2); }
.sheet-card img { width: 100%; height: auto; background: #fff; border: var(--border-w) solid var(--color-border); border-radius: var(--radius-sm); }
.seed-row { display: flex; gap: var(--space-2); align-items: flex-end; }
.seed-row .field { flex: 1; }
.code-input { font-family: var(--font-mono); font-size: var(--text-body-sm); }

/* 12 ── Admin ───────────────────────────────────────────────────────────── */
.admin-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.table input.input, .table select.select { min-height: var(--control-h-sm); font-size: var(--text-body-sm); }
.table-scroll { overflow-x: auto; }

/* 13 ── Assistant extras ───────────────────────────────────────────────── */
.assistant--docked { display: flex; }
.assistant__view { flex: 1; overflow-y: auto; padding: var(--space-3); display: grid; align-content: start; gap: var(--space-1); }
.assistant__meta { flex: none; display: flex; justify-content: space-between; gap: var(--space-2); padding: 0 var(--space-4) var(--space-2); }
.msg__confirm { display: grid; gap: var(--space-3); padding: var(--space-3); background: var(--color-surface-raised); border: var(--border-w) solid var(--color-border-strong); border-left: 3px solid var(--color-accent-text); border-radius: var(--radius-md); }
.msg__confirm .cluster { --cluster-gap: var(--space-2); }
.msg__tool[data-status="started"] .icon { animation: pulse 1.2s var(--ease-in-out) infinite; }
.msg__tool[data-status="error"] .icon, .msg__tool[data-status="limit"] .icon { color: var(--color-danger-text); }
.msg__body { display: grid; gap: var(--space-2); overflow-wrap: anywhere; }
.msg__body pre { margin: 0; padding: var(--space-3); background: var(--color-surface-sunken); border: var(--border-w) solid var(--color-border); border-radius: var(--radius-md); overflow-x: auto; font-size: var(--text-caption); }
.msg__body pre code { padding: 0; border: 0; background: none; }
.msg__body ul, .msg__body ol { padding-left: 1.25rem; margin: 0; display: grid; gap: 2px; }
.msg__img { max-width: 12rem; border-radius: var(--radius-md); border: var(--border-w) solid var(--color-border); }
.assistant__attach { flex: none; display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-4) var(--space-2); }
.assistant__attach img { width: 2.5rem; height: 2.5rem; object-fit: cover; border-radius: var(--radius-sm); border: var(--border-w) solid var(--color-border); }
.assistant-fab[aria-expanded="true"] { display: none; }
.conv-item { display: grid; gap: 2px; width: 100%; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-md); background: none; color: var(--color-text); text-align: left; cursor: pointer; }
.conv-item:hover { background: var(--color-bg-subtle); }
.assistant--page { min-height: calc(100dvh - var(--nav-h) - var(--space-8)); }
@media (min-width: 48rem) { .assistant--page { height: calc(100dvh - var(--nav-h) - var(--space-8)); } }

/* 14 ── Auth, legal, misc ──────────────────────────────────────────────── */
.auth { min-height: calc(100dvh - var(--nav-h)); display: grid; align-content: start; justify-items: center; padding: var(--space-6) var(--gutter) var(--space-8); }
@media (min-width: 48rem) { .auth { align-content: center; } }
.auth__card { width: min(26rem, 100%); display: grid; gap: var(--space-5); padding: var(--space-5); background: var(--color-surface); border: var(--border-w) solid var(--color-border); border-radius: var(--radius-lg); }
@media (min-width: 48rem) { .auth__card { padding: var(--space-6); } }
.auth__divider { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-subtle); }
.auth__divider::before, .auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.social-btn .provider-mark { width: 1.25rem; height: 1.25rem; display: grid; place-items: center; border-radius: var(--radius-xs); background: var(--color-surface-inverse); color: var(--color-text-inverse); font-family: var(--font-mono); font-size: var(--text-overline); font-weight: var(--weight-bold); }
.secret { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3); background: var(--color-surface-sunken); border: var(--border-w) solid var(--color-border-strong); border-radius: var(--radius-md); font-family: var(--font-mono); font-size: var(--text-label); overflow-wrap: anywhere; }
.secret code { flex: 1; padding: 0; border: 0; background: none; }
.code-block { margin: 0; padding: var(--space-3) var(--space-4); background: var(--color-surface-sunken); border: var(--border-w) solid var(--color-border); border-radius: var(--radius-md); overflow-x: auto; font-family: var(--font-mono); font-size: var(--text-caption); line-height: 1.6; white-space: pre; }
.client-header { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-lg); border: var(--border-w) solid var(--color-border); background: var(--color-surface-raised); border-top: 4px solid var(--client-colour, var(--color-border-control)); }
.client-header__logo { width: 3.5rem; height: 3.5rem; flex: none; display: grid; place-items: center; border-radius: var(--radius-md); background: var(--color-surface-sunken); overflow: hidden; }
.client-header__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.error-page { display: grid; justify-items: start; gap: var(--space-4); padding-block: var(--space-8); max-width: 36rem; }
.error-page .stat__value { color: var(--color-text-subtle); }
.demo-pill { display: inline-flex; }
.machine-card .card__foot form { margin: 0; }
.machine-card[data-default="true"] { border-color: var(--color-border-control); }
.split-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.legal { max-width: 46rem; }
.legal h2 { margin-top: var(--space-6); margin-bottom: var(--space-2); font-size: var(--text-h3); }
.legal p, .legal li { color: var(--color-text-muted); }
.legal ul { padding-left: 1.25rem; display: grid; gap: var(--space-1); }
.toggle-row { display: flex; align-items: center; gap: var(--space-3); }
.pick:has(input:checked) { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.pick:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.chip:has(input:checked) { background: var(--color-surface-inverse); color: var(--color-text-inverse); border-color: transparent; }
.chip:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* Library filters: a left drawer on phones and tablets, a sticky column on desktop. */
@media (min-width: 64rem) {
  .drawer.filters-panel { position: sticky; top: calc(var(--nav-h) + var(--space-4)); inset: auto; z-index: auto; width: auto; max-height: calc(100dvh - var(--nav-h) - var(--space-6)); transform: none; visibility: visible; background: none; border: 0; box-shadow: none; padding-bottom: 0; }
  .drawer.filters-panel .drawer__head { display: none; }
  .drawer.filters-panel .drawer__body { padding: 0 var(--space-2) var(--space-4) 0; }
  .filters-panel + .scrim, .scrim[data-drawer-scrim="filters"] { display: none; }
}
.ws-body .assistant-fab { display: none; }
/* A closed docked assistant is out of the accessibility tree and never painted (it also sits off-screen). */
.assistant--docked[data-open="false"] { visibility: hidden; transition: transform var(--dur-slow) var(--ease-sheet), visibility 0s var(--dur-slow); }
.pattern-opt .pattern-opt__ph { display: grid; place-items: center; aspect-ratio: 1; background: var(--color-surface-sunken); color: var(--color-text-subtle); }
/* The workspace keeps its sheet and panel layers inside itself, so nav menus open above them. */
.workspace { isolation: isolate; }
.msg__body table { width: 100%; border-collapse: collapse; font-size: var(--text-caption); }
.msg__body th, .msg__body td { text-align: left; padding: var(--space-1) var(--space-2); border-bottom: var(--border-w) solid var(--color-border); vertical-align: top; }
.msg__body th { font-family: var(--font-mono); font-size: var(--text-overline); text-transform: uppercase; letter-spacing: var(--tracking-overline); color: var(--color-text-subtle); font-weight: var(--weight-medium); }
.msg__table { overflow-x: auto; }
.filters-panel .drawer__body { gap: var(--space-5); padding: var(--space-4); }
.filters-panel .fieldset { gap: var(--space-3); }
.filters-panel .fieldset > legend { margin-bottom: var(--space-2); }
/* The app shell has an Ask button in its top bar, so the floating one is not needed there. */
.has-tabbar .assistant-fab { display: none; }
/* ── Photoreal scene in the workspace ── */
.workspace__viewport[data-scene="photo"] { background: #070707; background-image: none; }
.workspace__viewport[data-scene="photo"]::before, .workspace__viewport[data-scene="photo"]::after { --ticks-color: rgb(255 255 255 / 0.45); }
.workspace__viewport[data-scene="photo"] .workspace__hud { text-shadow: 0 1px 8px rgb(0 0 0 / 0.8); }
.ws-tools { display: grid; gap: var(--space-2); justify-items: start; }
.ws-tools .toolbar { align-items: center; }
.ws-tools .swatches { display: inline-flex; gap: var(--space-1); padding-inline: var(--space-1) var(--space-2); }
.swatches { display: flex; gap: var(--space-2); }
.swatch { width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 2px solid var(--color-border-strong); padding: 0; cursor: pointer; background: var(--sw); box-shadow: inset 0 -6px 10px rgb(0 0 0 / 0.25); }
.swatch--sm { width: 1.5rem; height: 1.5rem; position: relative; }
@media (pointer: coarse) { .swatch--sm::after { content: ""; position: absolute; inset: -8px -3px; } }
.swatch[aria-pressed="true"] { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 30%, transparent), inset 0 -6px 10px rgb(0 0 0 / 0.25); }
.swatch:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* Width dimension drawn over the 3D scene: a line with end ticks and a mono label. */
.scene-dim { position: absolute; z-index: 1; left: 0; top: 0; height: 0; border-top: 1.5px solid var(--color-primary); transform-origin: 0 0; pointer-events: none; }
.scene-dim::before, .scene-dim::after { content: ""; position: absolute; top: -6px; width: 1.5px; height: 11px; background: var(--color-primary); }
.scene-dim::before { left: 0; } .scene-dim::after { right: 0; }
.scene-dim span { position: absolute; left: 50%; top: 6px; transform: translateX(-50%); font-family: var(--font-mono); font-size: var(--text-overline); font-weight: var(--weight-medium); color: var(--color-text); white-space: nowrap; padding: 1px var(--space-2); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-surface) 78%, transparent); }
.workspace__heightmap:not([hidden]) ~ .scene-dim { display: none; }