/* QuickR base stylesheet. Hand-written, no build step. Tokens first. */
/*
 * Themes (docs/auth.md → "Settings"): a theme is a named set of colour tokens.
 * <html data-theme="…"> is rendered by the server from the user's setting;
 * no data-theme = "system": light, or dark when the device prefers it. Dark
 * themes are screen only, so printing stays light. Adding a theme: a block
 * here plus its name in App\Services\UserSettings::THEMES.
 */
:root {
    --radius: 8px;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    /* The option colours' solid form (a dot, a chart's bar): ChartSvg::PALETTE's colours. */
    --opt-gray: #9aa0a8;
    --opt-blue: #2a78d6;
    --opt-green: #1baf7a;
    --opt-yellow: #eda100;
    --opt-orange: #eb6834;
    --opt-red: #e34948;
    --opt-purple: #4a3aa7;
    --opt-pink: #e87ba4;
}
:root, :root[data-theme="light"] {
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-2: #eef0f3;
    --border: #d8dce2;
    --text: #1b1f24;
    --muted: #5d6673;
    --accent: #0f6fde;
    --accent-soft: #e3effd;
    --accent-text: #ffffff;
    --danger: #c62828;
    --danger-soft: #fdecec;
    --warn: #9a6400;
    --warn-soft: #fff4dc;
    --ok: #1d7a3a;
    --grid-line: rgba(20, 40, 70, .09);
    --focus: 0 0 0 3px rgba(15, 111, 222, .35);
    --shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .04);
    /* A dropdown option's colour (docs/ui.md → "Status chips"): a chip's background and text. */
    --opt-gray-bg: #eceef1; --opt-gray-fg: #4a525d;
    --opt-blue-bg: #e1edfb; --opt-blue-fg: #1a5aa8;
    --opt-green-bg: #dcf3e8; --opt-green-fg: #11643f;
    --opt-yellow-bg: #fcf0c8; --opt-yellow-fg: #6e4b00;
    --opt-orange-bg: #fde5d9; --opt-orange-fg: #a3401a;
    --opt-red-bg: #fce3e3; --opt-red-fg: #ad2524;
    --opt-purple-bg: #ebe7f8; --opt-purple-fg: #4a3aa7;
    --opt-pink-bg: #fbe5ef; --opt-pink-fg: #9c3463;
    color-scheme: light;
}
@media screen {
    :root[data-theme="dark"] {
        --bg: #111418;
        --surface: #1a1e24;
        --surface-2: #232830;
        --border: #343b45;
        --text: #e6e9ee;
        --muted: #9aa3af;
        --accent: #4d9bff;
        --accent-soft: #1b2d45;
        --accent-text: #0b1420;
        --danger: #ff6b6b;
        --danger-soft: #3a1d1f;
        --warn: #f0b44c;
        --warn-soft: #3a2f17;
        --ok: #58c27d;
        --grid-line: rgba(255, 255, 255, .07);
        --focus: 0 0 0 3px rgba(77, 155, 255, .4);
        --shadow: none;
        --opt-gray-bg: #2b3038; --opt-gray-fg: #c3c9d1;
        --opt-blue-bg: #1b2d45; --opt-blue-fg: #8fbfff;
        --opt-green-bg: #16372b; --opt-green-fg: #6fd8a8;
        --opt-yellow-bg: #3a2f17; --opt-yellow-fg: #f0c460;
        --opt-orange-bg: #3d2318; --opt-orange-fg: #ff9e73;
        --opt-red-bg: #3d1d1f; --opt-red-fg: #ff8a8a;
        --opt-purple-bg: #2a2648; --opt-purple-fg: #b3a8ff;
        --opt-pink-bg: #3d1f2d; --opt-pink-fg: #f5a3c6;
        color-scheme: dark;
    }
}
/* "System": the same tokens as data-theme="dark" (tests/Feature/UserSettingsTest checks they match). */
@media screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --bg: #111418;
        --surface: #1a1e24;
        --surface-2: #232830;
        --border: #343b45;
        --text: #e6e9ee;
        --muted: #9aa3af;
        --accent: #4d9bff;
        --accent-soft: #1b2d45;
        --accent-text: #0b1420;
        --danger: #ff6b6b;
        --danger-soft: #3a1d1f;
        --warn: #f0b44c;
        --warn-soft: #3a2f17;
        --ok: #58c27d;
        --grid-line: rgba(255, 255, 255, .07);
        --focus: 0 0 0 3px rgba(77, 155, 255, .4);
        --shadow: none;
        --opt-gray-bg: #2b3038; --opt-gray-fg: #c3c9d1;
        --opt-blue-bg: #1b2d45; --opt-blue-fg: #8fbfff;
        --opt-green-bg: #16372b; --opt-green-fg: #6fd8a8;
        --opt-yellow-bg: #3a2f17; --opt-yellow-fg: #f0c460;
        --opt-orange-bg: #3d2318; --opt-orange-fg: #ff9e73;
        --opt-red-bg: #3d1d1f; --opt-red-fg: #ff8a8a;
        --opt-purple-bg: #2a2648; --opt-purple-fg: #b3a8ff;
        --opt-pink-bg: #3d1f2d; --opt-pink-fg: #f5a3c6;
        color-scheme: dark;
    }
}
/* Page width: .page is 1100px (wide pages 1400px) unless the user chose wider. Phones are narrower anyway. */
:root[data-width="wide"] { --page-max: 1400px; }
:root[data-width="full"] { --page-max: none; --page-wide-max: none; }
/* Full screen: a list is as wide as its columns need (at least a wide page), not spread over the whole screen ([122]). */
:root[data-width="full"] .table-wrap { width: fit-content; min-width: min(100%, 1400px); max-width: 100%; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 15px/1.45 var(--font); }
a { color: var(--accent); }
h1 { font-size: 1.6rem; margin: 0; }
h2 { font-size: 1rem; margin: 0 0 .5rem; }
h3 { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 1rem 0 .35rem; }
code, .mono { font-family: var(--mono); font-size: .85em; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: none; box-shadow: var(--focus); }

input, select, textarea {
    font: inherit; color: inherit; background: var(--surface);
    border: 1px solid var(--border); border-radius: 6px; padding: .45rem .6rem; width: 100%;
}
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--accent); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }

.btn {
    display: inline-flex; align-items: center; gap: .3rem; font: inherit; font-weight: 600;
    padding: .45rem .9rem; border-radius: 6px; border: 1px solid var(--border);
    background: var(--surface); color: var(--text); cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn:disabled { opacity: .6; cursor: default; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--accent); }
.btn-danger { color: var(--danger); border-color: var(--danger); background: transparent; }
.btn-small { padding: .25rem .6rem; font-size: .85rem; }
.btn-row { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .5rem; }
.icon-btn {
    border: 0; background: transparent; color: var(--muted); cursor: pointer;
    width: 1.9rem; height: 1.9rem; border-radius: 6px; font-size: .95rem; flex: none;
}
.icon-btn:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.icon-btn:disabled { opacity: .3; cursor: default; }

.chip {
    display: inline-block; font-size: .72rem; font-weight: 600; padding: .1rem .45rem;
    border-radius: 99px; background: var(--surface-2); color: var(--muted); white-space: nowrap;
}
.chip-accent { background: var(--accent-soft); color: var(--accent); }
.chip-warn { background: var(--warn-soft); color: var(--warn); }
.chip-error { background: var(--danger-soft); color: var(--danger); }
/* Status chips: a dropdown option's colour (gray blue green yellow orange red purple pink). */
.chip-gray { background: var(--opt-gray-bg); color: var(--opt-gray-fg); }
.chip-blue { background: var(--opt-blue-bg); color: var(--opt-blue-fg); }
.chip-green { background: var(--opt-green-bg); color: var(--opt-green-fg); }
.chip-yellow { background: var(--opt-yellow-bg); color: var(--opt-yellow-fg); }
.chip-orange { background: var(--opt-orange-bg); color: var(--opt-orange-fg); }
.chip-red { background: var(--opt-red-bg); color: var(--opt-red-fg); }
.chip-purple { background: var(--opt-purple-bg); color: var(--opt-purple-fg); }
.chip-pink { background: var(--opt-pink-bg); color: var(--opt-pink-fg); }
.chip-dot::before { content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .35em; border-radius: 50%; background: currentColor; vertical-align: .05em; }
.req { color: var(--danger); }
.error-text { color: var(--danger); font-size: .85rem; margin: .25rem 0 0; }
.hint { color: var(--muted); font-size: .8rem; margin: .25rem 0 0; }
.hint.warn { color: var(--warn); }
.empty { color: var(--muted); text-align: center; padding: 2rem 1rem; border: 2px dashed var(--border); border-radius: var(--radius); }
.banner { padding: .7rem 1rem; border-radius: var(--radius); margin: .75rem 0; }
.banner ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.banner-error { background: var(--danger-soft); color: var(--danger); }
.banner-warn { background: var(--warn-soft); color: var(--warn); }
.banner-info { background: var(--accent-soft); color: var(--text); }
.banner-ok { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--text); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.banner .btn { margin-left: .25rem; }
.btn.disabled { pointer-events: none; opacity: .6; }

/* ---- top bar ---- */
.topbar {
    display: flex; align-items: center; gap: 1.5rem; padding: 0 16px; height: 52px;
    background: var(--surface); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; }
.brand img { display: block; }
.brand-mark { height: 22px; }
.brand-name { height: 15px; }
/* The user menu (layouts/app.blade.php): settings and logging out. */
.user-menu { position: relative; }
.user-menu > summary {
    list-style: none; display: flex; align-items: center; gap: .45rem; cursor: pointer; padding: .2rem .5rem .2rem .2rem;
    border-radius: 99px; color: var(--text); font-weight: 600; font-size: .9rem; white-space: nowrap;
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary:hover, .user-menu[open] > summary { background: var(--surface-2); }
.avatar {
    display: inline-grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent); font-size: .75rem; font-weight: 800; letter-spacing: .02em;
}
.user-menu-panel, .more-menu-panel {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; display: flex; flex-direction: column;
    min-width: 14rem; max-width: calc(100vw - 32px); padding: .35rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}
.user-menu-who { display: flex; flex-direction: column; padding: .35rem .6rem .5rem; margin: 0 0 .25rem; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.user-menu-panel form { margin: 0; }
.user-menu-item, .menu-item {
    display: block; width: 100%; font: inherit; text-align: left; padding: .45rem .6rem; border: 0; border-radius: 6px;
    background: none; color: var(--text); text-decoration: none; cursor: pointer;
}
.user-menu-item:hover, .user-menu-item[aria-current], .menu-item:hover:not(:disabled) { background: var(--surface-2); }
/* The ⋯ menu (docs/ui.md; lib.js moreMenu(), <x-more-menu>): the same panel as the user menu. */
.more-menu { position: relative; display: inline-block; }
.more-menu > summary {
    list-style: none; display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; cursor: pointer;
    border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text);
    font-size: 1.1rem; font-weight: 700; line-height: 1; user-select: none;
}
.more-menu > summary::-webkit-details-marker { display: none; }
.more-menu > summary:hover, .more-menu[open] > summary { background: var(--surface-2); }
.more-menu-panel { min-width: 12rem; }
.more-menu > summary.more-menu-text { display: inline-flex; align-items: center; gap: .3rem; width: auto; height: auto; padding: .25rem .6rem; font-size: .85rem; font-weight: 600; line-height: 1.45; }
.more-menu-start > .more-menu-panel, .more-menu-flip:not(.more-menu-start) > .more-menu-panel { right: auto; left: 0; }
.more-menu-start.more-menu-flip > .more-menu-panel { left: auto; right: 0; }
.menu-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* a long report name in "Reports ▾" */
.menu-item:disabled { color: var(--muted); cursor: default; }
.menu-item-danger { color: var(--danger); }
/* A setting inside a menu (the table editor's "Layout ▾", a form's "Opens ready to fill in"): stays open while changed. */
.menu-field { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .3rem .6rem; font-size: .9rem; font-weight: 600; }
.menu-field select { width: auto; padding: .2rem .4rem; }
.menu-check { display: flex; align-items: center; gap: .45rem; padding: .45rem .6rem; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.menu-check:hover { background: var(--surface-2); }
.menu-check input { margin: 0; }
.menu-divider { border: 0; border-top: 1px solid var(--border); margin: .3rem 0; }
.menu-heading { margin: .35rem .6rem .15rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.menu-heading:first-child { margin-top: .15rem; }
.more-menu-panel form { margin: 0; }
/* Breadcrumbs (lib.js crumbs(), <x-crumbs>) instead of "←" links. */
.crumbs { font-size: .85rem; color: var(--muted); min-width: 0; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; row-gap: .1rem; }
.crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.crumbs li + li::before { content: "›"; margin: 0 .45rem; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs [aria-current] { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 24rem; }
@media (max-width: 600px) { .brand .brand-name, .user-menu .user-name { display: none; } .user-menu > summary { padding-right: .2rem; } }

/* ---- the user's settings page (settings.blade.php, settings.js) ---- */
.user-settings { max-width: 40rem; }
.prefs-status { min-height: 1.4em; margin: .25rem 0 .75rem; color: var(--ok); font-weight: 600; }
.prefs-form { display: grid; gap: 1.5rem; }
.prefs-row { display: grid; gap: .45rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.prefs-row > label, .prefs-row > legend { font-weight: 700; padding: 0; margin-bottom: .45rem; }
.prefs-row > label { margin: 0; }
.prefs-row select { max-width: 20rem; }
.prefs-row .hint { margin: 0; }
.prefs-company { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.prefs-company code { overflow-wrap: anywhere; }
.prefs-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.prefs-choice {
    display: flex; align-items: center; gap: .55rem; padding: .55rem .85rem; cursor: pointer; font-weight: 600;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.prefs-choice input { margin: 0; }
.prefs-choice:hover { border-color: var(--muted); }
.prefs-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
/* Small pictures of the themes: their own colours on purpose, whatever theme is showing. */
.prefs-swatch { width: 1.7rem; height: 1.15rem; border-radius: 4px; border: 1px solid #8a929e; flex: none; }
.prefs-swatch-light { background: #ffffff; }
.prefs-swatch-dark { background: #1a1e24; }
.prefs-swatch-system { background: linear-gradient(135deg, #ffffff 50%, #1a1e24 50%); }

/* ---- login ---- */
.login-main { display: grid; place-items: start center; padding: 3rem 16px; }
.login-card { width: 100%; max-width: 360px; display: grid; gap: .9rem; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem; }
.login-card label:not(.check) { display: grid; gap: .3rem; font-weight: 600; }
.login-card .banner { margin: 0; }
.login-logo img { display: block; width: 180px; margin: 0 auto .5rem; }
.login-card h1 { font-size: 1.2rem; text-align: center; }
.login-card p { margin: 0; }
.login-forgot { justify-self: center; font-size: .9rem; }
.login-signup { text-align: center; border-top: 1px solid var(--border); padding-top: .8rem; }
/* Sign-up (docs/plans.md): the honeypot field is off screen, not display:none (some bots skip hidden fields). */
.signup-card { max-width: 420px; }
.signup-card label .hint { font-weight: 400; }
.signup-card .check { align-items: flex-start; }
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* The terms and the privacy policy (legal/page.blade.php). */
.legal { max-width: 46rem; }
.legal h2 { font-size: 1.1rem; margin-top: 1.6rem; }

/* ---- QR labels (docs/qr.md) ---- */
.qr-panel { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.qr-panel img { width: 72px; height: 72px; display: block; background: #fff; border-radius: 4px; }
.qr-panel .qr-actions { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.qr-none { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: .5rem 0 0; }
.qr-blank h2 { margin-top: 1.5rem; }
.qr-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.qr-actions-page { max-width: 32rem; }
.qr-actions-page h1 { margin: 0; }
.qr-action-list { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.25rem; }
.qr-action { min-height: 4rem; flex: none; }
.qr-action-open { justify-content: center; padding: .8rem; }
.item-quick { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .75rem; }
/* A form for looking (a shelf's "Hyllvy"): its quick actions are the page's buttons. */
.item-quick-main .btn { min-height: 2.75rem; justify-content: center; }
.qr-find { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; }
.qr-find select, .qr-find input { width: auto; flex: 1 1 10rem; }
.qr-result { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid var(--border); margin: 0; }
.qr-result a { font-weight: 600; text-decoration: none; flex: 1 1 auto; }
.print-bar { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: 1rem; }
/* Sizes in mm so print matches the screen; labels are always dark on white. */
.qr-label { display: flex; gap: 4mm; align-items: center; width: 90mm; padding: 3mm; background: #fff; color: #1b1f24; border: 1px dashed var(--border); }
.qr-label img { width: 30mm; height: 30mm; flex: none; }
.qr-label-text { display: grid; gap: 1mm; min-width: 0; font-size: 10pt; overflow-wrap: anywhere; }
.qr-label-text strong { font-size: 12pt; }
.qr-label-text .muted { color: #5d6673; }
.qr-sheet { display: grid; grid-template-columns: repeat(4, 47.5mm); grid-auto-rows: 46mm; background: #fff; color: #1b1f24; width: 190mm; max-width: 100%; }
.qr-sticker { display: grid; justify-items: center; align-content: center; gap: 1mm; break-inside: avoid; outline: 1px dashed #d8dce2; }
.qr-sticker img { width: 38mm; height: 38mm; }
.qr-sticker code { font-size: 9pt; letter-spacing: .05em; }
.qr-sticker-used { font-family: var(--font); color: #5d6673; }
/* Blank stickers on a stock (qr/sheet.blade.php, [89]): the note about "code only" only when chosen, a preview at the stock's size. */
.qr-blank-pdf:not(:has(select[name=content] option[value=code]:checked)) .qr-code-only-help { display: none; }
.qr-stock-preview { display: flex; flex-wrap: wrap; gap: 4mm; margin: .5rem 0 1rem; }
.qr-stock-label { width: var(--lw, 50mm); height: var(--lh, 25mm); box-sizing: border-box; padding: 1.5mm; display: flex; align-items: center; gap: 2mm; overflow: hidden; background: #fff; color: #1b1f24; border: 1px dashed #b9c0c9; border-radius: 2mm; }
.qr-stock-label img { height: 100%; aspect-ratio: 1; max-width: 60%; }
.qr-stock-label code { font-size: 8pt; overflow-wrap: anywhere; }
@media (max-width: 800px) { .qr-sheet { grid-template-columns: repeat(2, 1fr); width: auto; } }
@page { size: A4; margin: 10mm; }
@media print {
    .print-page .topbar, .no-print { display: none; }
    .print-page, .print-page main { background: #fff; padding: 0; margin: 0; max-width: none; }
    .qr-label { border: 0; }
    .qr-sheet { grid-template-columns: repeat(4, 47.5mm); width: 190mm; }
    .qr-sticker { outline: 0; }
}
/* Scrolls sideways on its own when the items don't fit a phone (until the bottom bar, step 19c C7). */
.topnav { display: flex; gap: 1rem; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.topnav a { flex: none; }
.topnav a { color: var(--muted); text-decoration: none; font-weight: 600; }
.topnav a.active, .topnav a:hover { color: var(--text); }
.lang { display: flex; gap: .25rem; }
.lang a { font-size: .8rem; font-weight: 700; text-decoration: none; color: var(--muted); padding: .2rem .4rem; border-radius: 4px; }
.lang a.active { background: var(--surface-2); color: var(--text); }

/* ---- error pages (resources/views/errors) ---- */
.error-page { max-width: 36rem; padding-top: 3rem; }
.error-logo { height: 2.5rem; width: auto; margin-bottom: 1.5rem; }
.error-code { font-size: 2.5rem; font-weight: 800; margin: 0; font-variant-numeric: tabular-nums; }
.error-page h1 { margin-top: .25rem; }

/* ---- pages ---- */
/* One left edge (docs/ui.md rule 5): every page starts where a wide page does, a narrower one just ends
   sooner. With "full" width the max is none, the calc is invalid and the margin falls back to 0. */
.page { max-width: var(--page-max, 1100px); margin: 0 auto 0 max(0px, (100% - var(--page-wide-max, 1400px)) / 2); padding: 1.5rem 16px 3rem; }
.page.page-wide { max-width: var(--page-wide-max, 1400px); }
.page-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1rem; flex-wrap: wrap; }
.lead { max-width: 65ch; }
.create-row { display: flex; gap: .5rem; margin: 1.25rem 0; max-width: 640px; }
/* Index pages are lists, not card grids (docs/ui.md rule 4, D32): a row per thing, dividers between,
   its name and one line of description on the left, what to do with it on the right. */
.row-list { list-style: none; padding: 0; margin: .5rem 0 1rem; border-top: 1px solid var(--border); }
.tcard {
    display: flex; flex-direction: column; gap: .35rem; height: 100%; padding: 1rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    color: var(--text); box-shadow: var(--shadow);
}
.tcard-name { font-weight: 700; font-size: 1.05rem; color: var(--text); text-decoration: none; }
.tcard-name:hover { color: var(--accent); }
.tcard-actions { display: flex; gap: .4rem; flex-wrap: wrap; padding-top: .35rem; }
.tcard-desc { color: var(--muted); font-size: .9rem; }
.tcard-meta { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: .85rem; margin-top: auto; }
.row-list > .tcard {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; row-gap: .1rem; align-items: center;
    height: auto; padding: .65rem .25rem; background: none; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none;
}
.row-list > .tcard > * { grid-column: 1; min-width: 0; }
.row-list > .tcard > .tcard-actions { grid-column: 2; grid-row: 1 / span 5; padding-top: 0; justify-content: flex-end; align-items: center; flex-wrap: nowrap; }
.row-list .tcard-name { font-size: 1rem; }
.row-list .tcard-desc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-list .tcard-meta { margin-top: 0; }
.row-list .tcard-links { flex-direction: row; flex-wrap: wrap; column-gap: 1.25rem; }
@media (max-width: 600px) {
    .row-list > .tcard { grid-template-columns: minmax(0, 1fr); }
    .row-list > .tcard > .tcard-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; flex-wrap: wrap; padding-top: .3rem; }
}
/* "+ New table ▾": a primary button that opens a menu (templates/index.blade.php). */
.more-menu.new-menu > summary {
    width: auto; height: auto; display: inline-flex; font-size: inherit; font-weight: 600; line-height: inherit;
    background: var(--accent); border-color: var(--accent); color: var(--accent-text);
}
.more-menu.new-menu > summary:hover, .more-menu.new-menu[open] > summary { background: var(--accent); filter: brightness(1.08); }
.page-head-tools { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ---- editor ---- */
.editor-main { padding: 0 16px 2rem; }
.ed-toolbar {
    display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
    padding: .6rem 0; position: sticky; top: 0; z-index: 5; background: var(--bg);
}
.ed-toolbar .back { text-decoration: none; font-weight: 600; white-space: nowrap; }
.title-input { flex: 1 1 14rem; font-size: 1.25rem; font-weight: 700; border-color: transparent; background: transparent; min-width: 10rem; }
.title-input:hover { border-color: var(--border); }
.note-input { flex: 0 1 16rem; }
.ed-status { font-size: .85rem; color: var(--ok); min-width: 0; }
.ed-status.dirty { color: var(--warn); font-weight: 600; }
/* The table editor under its table header (step 19c F1): Design's tabs on the left, "Saved …" and Save
   on the right, one row that stays at the top while the canvas scrolls. */
.ed-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 1rem; position: sticky; top: 0; z-index: 5;
    background: var(--bg); border-bottom: 1px solid var(--border);
}
.ed-head .tabs { border-bottom: 0; flex: 0 1 auto; }
.ed-save { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem .6rem; flex: 0 1 auto; margin-left: auto; padding: .4rem 0; }
.ed-save .note-input { width: 16rem; flex: 0 1 16rem; }
.ed-save .chip[hidden], .ed-save .note-input[hidden] { display: none; }
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab {
    font: inherit; font-weight: 600; background: none; border: 0; color: var(--muted); cursor: pointer;
    padding: .55rem .9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tab.active { color: var(--text); border-bottom-color: var(--accent); }
.ed-tab { padding-top: 1rem; }

.ed-cols { display: grid; grid-template-columns: 210px minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.palette, .props {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: .9rem; position: sticky; top: 64px; max-height: calc(100vh - 80px); overflow: auto;
}
.sheet-close { display: none; float: right; }
.undo-btns { gap: .15rem; }
.undo-btns .btn { font-size: 1.05rem; padding: .2rem .5rem; }
.pal-group h3:first-child { margin-top: .5rem; }
.pal-item {
    display: flex; align-items: center; gap: .5rem; width: 100%; font: inherit; text-align: left;
    padding: .4rem .5rem; margin-bottom: 2px; border: 1px solid transparent; border-radius: 6px;
    background: transparent; color: var(--text); cursor: grab;
}
.pal-item:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
.pal-item:disabled { color: var(--muted); cursor: default; opacity: .65; }
.soon { margin-left: auto; font-size: .7rem; color: var(--muted); }
.glyph {
    display: inline-grid; place-items: center; flex: none; width: 1.8rem; height: 1.8rem; border-radius: 6px;
    background: var(--surface-2); color: var(--muted); font-size: .8rem; font-weight: 700;
}

.field-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; min-height: 8rem; }
.fcard {
    display: flex; align-items: center; gap: .6rem; padding: .55rem .6rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    cursor: pointer; box-shadow: var(--shadow);
}
.fcard:hover { border-color: var(--muted); }
.fcard.selected { border-color: var(--accent); box-shadow: var(--focus); }
.fcard.has-error { border-color: var(--danger); }
.fcard.dragging { opacity: .4; }
.handle { color: var(--muted); cursor: grab; letter-spacing: -3px; user-select: none; }
.fcard-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fcard-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcard-sub { color: var(--muted); font-size: .8rem; display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.fcard-actions { display: flex; opacity: .55; }
.fcard:hover .fcard-actions, .fcard.selected .fcard-actions, .fcard:focus-within .fcard-actions { opacity: 1; }
.drop-indicator { height: 3px; background: var(--accent); border-radius: 2px; margin: -2px 0; }
.drop-empty { list-style: none; }

.prop { margin-bottom: .85rem; border: 0; padding: 0; }
.prop > label:first-child, .prop legend { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .25rem; }
.prop-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.check { display: flex; align-items: center; gap: .4rem; font-weight: 500; cursor: pointer; }
.radio { margin-bottom: .35rem; align-items: flex-start; }
.radio input { margin-top: .25rem; }
.type-settings { border-top: 1px solid var(--border); padding-top: .85rem; margin-top: .25rem; }
.opt-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.opt-list li { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; }
.opt-list li input { flex: 1; min-width: 0; }
/* An option's colour (step 19c E1): the select wears the chip's colours. */
.opt-color { width: 6.5rem; flex: none; padding: .2rem .3rem; font-size: .8rem; }
.opt-color-gray { background: var(--opt-gray-bg); color: var(--opt-gray-fg); border-color: var(--opt-gray); }
.opt-color-blue { background: var(--opt-blue-bg); color: var(--opt-blue-fg); border-color: var(--opt-blue); }
.opt-color-green { background: var(--opt-green-bg); color: var(--opt-green-fg); border-color: var(--opt-green); }
.opt-color-yellow { background: var(--opt-yellow-bg); color: var(--opt-yellow-fg); border-color: var(--opt-yellow); }
.opt-color-orange { background: var(--opt-orange-bg); color: var(--opt-orange-fg); border-color: var(--opt-orange); }
.opt-color-red { background: var(--opt-red-bg); color: var(--opt-red-fg); border-color: var(--opt-red); }
.opt-color-purple { background: var(--opt-purple-bg); color: var(--opt-purple-fg); border-color: var(--opt-purple); }
.opt-color-pink { background: var(--opt-pink-bg); color: var(--opt-pink-fg); border-color: var(--opt-pink); }
.opt-list li .error-text { flex-basis: 100%; }

.settings, .history { max-width: 720px; }
.danger-zone { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); }

.version-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
.version { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.version.open { border-color: var(--accent); }
.version-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; width: 100%; padding: .65rem .8rem;
    font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: left;
}
.version-note { flex-basis: 100%; font-style: italic; }
.version-body { padding: 0 .8rem .7rem; }
.change-list { margin: 0; padding-left: 1.2rem; }
.change-added { color: var(--ok); }
.change-removed { color: var(--danger); }

/* ---- rendered forms (form-render.js) ----
   Fields sit on an X/Y grid: --cols columns, rows of --row px. One grid unit
   holds one compact input, so a field with its label above is 2 rows high. */
.qr-form { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; margin-top: .75rem; }
.qr-grid {
    --row: 32px; --col-gap: 12px; --row-gap: 6px;
    display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    grid-auto-rows: minmax(var(--row), auto); column-gap: var(--col-gap); row-gap: var(--row-gap);
}
.qr-grid input:not([type=checkbox]):not([type=radio]), .qr-grid select, .qr-grid textarea { padding: .2rem .45rem; min-height: var(--row); }
.ff { min-width: 0; }
.ff-label { display: block; font-weight: 600; font-size: .85rem; line-height: 1.2; margin-bottom: .2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-title input { font-weight: 600; }
.ff-help { color: var(--muted); font-size: .8rem; line-height: 1.3; margin: .15rem 0 0; }
.with-unit { display: flex; align-items: center; gap: .5rem; }
.with-unit .unit { color: var(--muted); }
.choices { display: flex; flex-direction: column; }
.choices .check { min-height: 1.5rem; }
.ff-checkbox .check { min-height: var(--row); }
/* Label to the left: label column + control column inside the field's cell. */
/* Fixed label column (shrinks in narrow cells) so labels line up down the form. */
.ff.lbl-left { display: grid; grid-template-columns: min(var(--label-w, 9rem), 40%) minmax(0, 1fr); column-gap: .6rem; align-content: start; }
.ff.lbl-left > .ff-label { margin: 0; min-height: var(--row); display: flex; align-items: center; white-space: normal; overflow: visible; }
.ff.lbl-left > :not(.ff-label) { grid-column: 2; }
.ff.lbl-left.ff-multichoice > .ff-label, .ff.lbl-left.ff-longtext > .ff-label { align-items: flex-start; padding-top: .35rem; }
/* Label above: a lone checkbox lines up with the inputs next to it. */
.ff.lbl-top.ff-checkbox { display: flex; flex-direction: column; justify-content: flex-end; }
/* Long text fills the height it was given on the grid. */
.qr-grid .ff-longtext { display: flex; flex-direction: column; }
.qr-grid .ff-longtext.lbl-left { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.qr-grid .ff-longtext textarea { flex: 1 1 auto; min-height: calc(var(--row) * 2); resize: vertical; }

/* Read mode (form-render.js `display`, D31): values, not inputs. The grid's rows take their
   content's height, so a field left out (empty) or a short related list leaves no hole. */
.qr-display .qr-grid { grid-auto-rows: auto; row-gap: 0; }
.qr-display .ff { padding-bottom: .85rem; }
.qr-display .ff-label { color: var(--muted); font-weight: 600; font-size: .78rem; margin-bottom: .1rem; }
.qr-display .ff.lbl-left > .ff-label { min-height: 0; align-items: baseline; padding-top: .1rem; }
.ffd-value { min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
.ffd { cursor: default; }
.ff-title > .ffd-value { font-weight: 700; }
.ffd-empty .ffd-value { color: var(--muted); }
.ffd-long { white-space: pre-wrap; }
.ffd-links { display: flex; flex-direction: column; gap: .1rem; }
.ffd-link a { font-weight: 600; text-decoration: none; }
.ffd-link a:hover { text-decoration: underline; }
.ffd-link a.archived { text-decoration: line-through; color: var(--muted); }
.chips { display: inline-flex; flex-wrap: wrap; gap: .25rem; vertical-align: middle; }
.chips .chip { font-size: .8rem; padding: .12rem .55rem; }
.qr-display .qr-lookup, .qr-display .qr-formula { border: 0; background: none; padding: 0; min-height: 0; display: block; }
.qr-display .qf-bar { display: none; }
.qr-display .ff-related { padding-bottom: 1.1rem; }
.ffd-rows { margin-top: .1rem; }
.qr-display .qr-section { padding-bottom: 0; }
.qr-display .qr-tabs { margin-top: .25rem; }
.ff.has-error input:not([type=checkbox]), .ff.has-error select, .ff.has-error textarea, .ff.has-error .qr-rel { border-color: var(--danger); }
.ff.has-error .check { color: var(--danger); }

/* Relation picker (relation-picker.js): chips + search with a result list. */
.qr-rel { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; min-width: 0; }
.rel-chips { display: contents; }
.rel-chip {
    display: inline-flex; align-items: center; gap: .15rem; max-width: 100%; min-height: calc(var(--row, 32px) - 4px);
    padding: 0 .1rem 0 .55rem; border-radius: 6px; background: var(--accent-soft); border: 1px solid transparent;
}
.rel-chip a { color: var(--accent); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rel-chip a:hover { text-decoration: underline; }
.rel-chip.archived a { text-decoration: line-through; color: var(--muted); }
.rel-remove {
    border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: .75rem;
    width: 1.5rem; height: 1.5rem; border-radius: 4px; flex: none;
}
.rel-remove:hover { background: var(--surface); color: var(--danger); }
.rel-input { position: relative; flex: 1 1 10rem; min-width: 8rem; }
.rel-input:has(.rel-search[hidden]) { display: none; }
.rel-results {
    /* Above the record's Save bar (z-index 30), which is stuck to the bottom of the window. */
    position: absolute; z-index: 35; left: 0; right: 0; top: calc(100% + 2px); margin: 0; padding: .25rem 0; list-style: none;
    background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
    max-height: 18rem; overflow: auto;
}
.rel-option { padding: .35rem .6rem; cursor: pointer; }
.rel-option.active, .rel-option:hover { background: var(--accent-soft); }
.rel-none { padding: .35rem .6rem; }
.qr-form { position: relative; }
.qr-form > .qr-grid + .qr-grid, .qr-form > * + .qr-section, .qr-tabpanel > * + .qr-section { margin-top: .75rem; }
/* Sections (a heading framing the cells below it) and tabs, layout.js / form-render.js. */
.qr-section { border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .75rem .75rem; margin: 0; min-width: 0; }
.qr-section > legend { font-weight: 700; padding: 0 .35rem; color: var(--text); }
.qr-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin: 1rem 0 .75rem; overflow-x: auto; }
.qr-tab {
    font: inherit; font-weight: 600; background: none; border: 0; color: var(--muted); cursor: pointer;
    padding: .5rem .9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.qr-tab:hover { color: var(--text); }
.qr-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.qr-tab.has-error::after { content: ' ●'; color: var(--danger); }

/* Subtable (form-render.js): an inline table with one input per cell. */
.qr-sub { min-width: 0; }
.sub-scroll { overflow-x: auto; }
.qr-sub table { width: 100%; border-collapse: collapse; }
.qr-sub th { text-align: left; font-size: .78rem; font-weight: 600; color: var(--muted); padding: 0 .2rem .15rem; white-space: nowrap; }
.qr-sub td { padding: 2px; vertical-align: middle; }
.qr-sub td input:not([type=checkbox]), .qr-sub td select { min-width: 5rem; }
.qr-sub .sub-number { width: 8rem; }
.qr-sub .sub-checkbox { width: 3rem; text-align: center; }
.qr-sub .sub-date { width: 10rem; }
.qr-sub .sub-act { width: 2rem; }
.qr-sub td.has-error input, .qr-sub td.has-error select { border-color: var(--danger); background: var(--danger-soft); }
.qr-sub .with-unit { gap: .25rem; }
.sub-add { margin-top: .2rem; padding-left: .2rem; }

/* ---- items (item-list.js, item-page.js) ---- */
.list-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 1rem 0; }
.list-bar input[type=search] { max-width: 22rem; }
/* CSV import wizard (import.js). */
.import-step { margin: 1.5rem 0; }
.import-step h2 { font-size: 1.1rem; }
.import-sources { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.import-drop {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem; min-height: 7.5rem; cursor: pointer;
    border: 2px dashed var(--border); border-radius: var(--radius); background: var(--surface); text-align: center; padding: 1rem;
}
.import-drop:hover, .import-drop.over, #imp-file:focus-visible + .import-drop { border-color: var(--accent); }
.import-paste { display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.import-paste textarea { width: 100%; font-family: var(--mono); font-size: .85rem; }
.import-loaded .btn-row { align-items: center; gap: .5rem 1.25rem; }
.import-map select { min-width: 14rem; max-width: 100%; }
.import-map .import-skipped td:not(:last-child) { opacity: .55; }
.import-sample { max-width: 28rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.import-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem 1rem; margin-top: 1rem; }
.import-options .prop { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; }
.import-options .hint { font-weight: 400; }
.import-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
/* Saved lists (item-list.js): tabs, tools, the "Kolumner och filter" panel. */
.list-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); overflow-x: auto; margin-top: .75rem; }
.list-tab {
    font: inherit; font-weight: 600; background: none; border: 0; color: var(--muted); cursor: pointer;
    padding: .5rem .85rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.list-tab:hover { color: var(--text); }
.list-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.list-dirty { color: var(--warn); }
.list-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-left: auto; }
.list-tools .btn.active { background: var(--surface-2); border-color: var(--accent); }
.list-custom {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.25rem; margin: 0 0 1rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow);
}
.list-custom[hidden] { display: none; }
.list-custom .col-list { max-height: 22rem; overflow-y: auto; }
.list-custom-save { display: flex; flex-direction: column; gap: .5rem; }
.filter-chip { display: inline-flex; align-items: center; gap: .2rem; padding-right: .1rem; font-size: .8rem; }
.head-actions { margin: 0; }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.data-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.data-table th { text-align: left; background: var(--surface-2); border-bottom: 1px solid var(--border); padding: 0; white-space: nowrap; }
.data-table th button.sort {
    font: inherit; font-weight: 600; font-size: .82rem; color: var(--muted); background: none; border: 0;
    padding: .5rem .65rem; cursor: pointer; width: 100%; text-align: inherit;
}
.data-table th button.sort.active, .data-table th button.sort:hover { color: var(--text); }
.data-table td { padding: .45rem .65rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table tbody tr { cursor: pointer; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tr.archived td { color: var(--muted); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .title-cell a { font-weight: 600; text-decoration: none; }
.data-table .title-cell .chip { margin-left: .4rem; }
.nowrap { white-space: nowrap; }
.pager { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: .6rem; }
.pager .muted { margin-right: auto; }

.item-head { display: grid; gap: .35rem; padding: .25rem 0 .75rem; }
.item-head .back { text-decoration: none; font-weight: 600; flex-basis: 100%; font-size: .9rem; }
.item-head h1 { font-size: 1.45rem; }
.item-title-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem 1rem; }
.item-titles { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; min-width: 0; flex: 1 1 20rem; }
.item-titles h1 { overflow-wrap: anywhere; }
.item-actions { display: flex; gap: .4rem; margin-left: auto; flex-wrap: wrap; align-items: center; }
.item-meta { margin: .6rem 0 0; }
/* A button that reads as a link ("History" in the line under a record). */
.link-btn { font: inherit; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.link-btn:hover { color: var(--text); }
/* The Save bar (item-page.js, B2): stuck to the bottom of the window while there is something to save. */
.savebar { position: sticky; bottom: var(--bottombar-h, 0px); z-index: 30; margin: 1rem -16px 0; padding: .6rem 16px calc(.6rem + env(safe-area-inset-bottom)); background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -4px 14px rgba(0, 0, 0, .08); }
.savebar[hidden] { display: none; }
.savebar-inner { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; }
.savebar-note { margin-right: auto; color: var(--warn); font-weight: 600; font-size: .9rem; }
.ip-nothing { margin: .75rem 0 0; }
.linked { margin-top: 1.75rem; }
.linked-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.linked-group { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem .9rem; }
.linked-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .5rem; margin-bottom: .4rem; }
.linked-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem; }
.linked-title { font-weight: 700; text-decoration: none; }
.linked-list { list-style: none; margin: 0 0 .3rem; padding: 0; }
.linked-list li { display: flex; justify-content: space-between; gap: .75rem; padding: .3rem 0; border-bottom: 1px solid var(--border); }
.linked-list li:last-child { border-bottom: 0; }
.linked-list a { text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linked-list .muted { white-space: nowrap; }

/* Subtable columns editor (template-editor.js). */
.col-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.col-item { border: 1px solid var(--border); border-radius: 6px; padding: .25rem; }
.col-item.open { border-color: var(--accent); }
.col-item.has-error { border-color: var(--danger); }
/* Name on its own line (the panel is narrow), then type + buttons. */
.col-row { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .15rem; }
.col-row input { flex: 1 1 100%; min-width: 0; padding: .3rem .45rem; }
.col-row select { flex: 1 1 auto; width: auto; min-width: 0; padding: .25rem .3rem; }
.col-row .icon-btn { width: 1.6rem; }
.col-settings { padding: .6rem .3rem .1rem; }
.col-item .error-text { margin: .2rem .3rem; }

/* ---- X/Y canvas (template-editor.js) ---- */
.fields-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin-bottom: .75rem; }
.fields-bar .inline { display: inline-flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 600; }
.fields-bar select { width: auto; padding: .25rem .4rem; }
.fields-bar .hint { margin: 0; flex: 1 1 20rem; }
/* "Show with: M-001" (step 19c F4): the record the canvas and Preview show, at the toolbar's right end. */
.fields-bar .sample-pick { margin-left: auto; min-width: 0; font-weight: 400; }
.fields-bar .sample-pick select { max-width: 16rem; text-overflow: ellipsis; }
.area-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; margin-bottom: .5rem; }
.area-tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--border); overflow-x: auto; max-width: 100%; }
.area-tab {
    font: inherit; font-size: .9rem; font-weight: 600; background: none; border: 0; color: var(--muted); cursor: pointer;
    padding: .35rem .7rem; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.area-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.area-tab-edit { display: inline-flex; align-items: center; gap: .3rem; }
.area-tab-edit input { width: 12rem; padding: .2rem .45rem; }
.area-bar .hint { margin: 0; }
/* The phone layout designer (template-editor.js renderPhone). */
.phone-off { max-width: 32rem; }
.phone-frame { width: min(100%, 390px); margin: 0 auto .75rem; border: 8px solid var(--border); border-radius: 22px; padding: .6rem; background: var(--surface); display: flex; flex-direction: column; gap: .6rem; }
.phone-seg-head { font-weight: 700; font-size: .9rem; border-bottom: 1px solid var(--border); margin-bottom: .3rem; }
.phone-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
.phone-card {
    display: flex; flex-direction: column; gap: .25rem; min-width: 0; padding: .35rem .4rem; cursor: pointer;
    border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); font-size: .8rem;
}
.phone-card.selected { border-color: var(--accent); box-shadow: var(--focus); }
.phone-card-label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone-card-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; }
.seg-small button { padding: .05rem .35rem; font-size: .75rem; }
.phone-card .icon-btn { width: 1.4rem; height: 1.4rem; font-size: .7rem; }
.lay-section { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); border-left: 3px solid var(--accent); }
.lay-section-head { font-weight: 700; padding: .2rem .4rem; }
.actions-settings .col-row { flex-wrap: wrap; }
.actions-settings .col-row input { flex: 1 1 12rem; width: auto; min-width: 0; }
.actions-settings .col-row select { flex: 1 1 12rem; width: auto; min-width: 0; }
.fields-bar .form-name { width: auto; flex: 0 1 14rem; padding: .25rem .5rem; }
.fields-bar #form-required { flex-basis: 100%; }
.form-context { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: 0 0 .6rem; }
.form-context-item { display: inline-flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.form-switch { font-size: .85rem; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }
.form-switch select { width: auto; padding: .2rem .4rem; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--surface); }
.seg button {
    font: inherit; font-weight: 600; font-size: .85rem; padding: .3rem .7rem; border: 0;
    background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap;
}
.seg button + button { border-left: 1px solid var(--border); }
.seg button:hover { color: var(--text); background: var(--surface-2); }
.seg button.active { background: var(--accent); color: var(--accent-text); }
.seg-full { display: flex; }
.layout-props { margin-bottom: .85rem; }
.layout-props .prop { margin: 0; min-width: 0; }
.layout-props .hint { margin-top: .3rem; }
.seg-full button { flex: 1 1 auto; padding: .3rem .4rem; }

.ed-cols.canvas-mode { grid-template-columns: 180px minmax(0, 1fr) 300px; }
.canvas-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; min-width: 0; }
.lay-canvas {
    grid-auto-rows: var(--row); position: relative; min-height: 10rem;
    background-image:
        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
    background-size: calc((100% + var(--col-gap)) / var(--cols)) calc(var(--row) + var(--row-gap));
}
.lay-card {
    position: relative; min-width: 0; overflow: hidden; cursor: move; touch-action: none; user-select: none;
    background: var(--surface); outline: 1px dashed var(--border); outline-offset: 3px; border-radius: 3px;
}
.lay-card:hover { outline-color: var(--muted); }
.lay-card.selected { outline: 2px solid var(--accent); z-index: 1; }
.lay-card:focus-visible { box-shadow: var(--focus); }
.lay-card.has-error { outline: 2px solid var(--danger); }
.lay-card.dragging { z-index: 3; opacity: .9; box-shadow: 0 4px 16px rgba(0, 0, 0, .18); }
.lay-card.overflowing::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--warn); }
.lay-body { height: 100%; overflow: hidden; pointer-events: none; }
.lay-body > .ff { height: 100%; }
.lay-canvas .ff-longtext textarea { min-height: 0; }
.lay-actions {
    position: absolute; top: 0; right: 0; display: none; background: var(--surface);
    border: 1px solid var(--border); border-radius: 0 0 0 6px; border-width: 0 0 1px 1px;
}
.lay-card:hover .lay-actions, .lay-card.selected .lay-actions { display: flex; }
.lay-actions .icon-btn { width: 1.5rem; height: 1.5rem; font-size: .75rem; }
.lay-resize {
    position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize; touch-action: none;
    background: linear-gradient(135deg, transparent 50%, var(--accent) 50%); opacity: 0;
}
.lay-card:hover .lay-resize, .lay-card.selected .lay-resize { opacity: .85; }
@media (pointer: coarse) { .lay-resize { width: 24px; height: 24px; opacity: .6; } }
.lay-ghost { border: 2px dashed var(--accent); background: var(--accent-soft); border-radius: 4px; pointer-events: none; opacity: .8; }
.lay-empty { grid-column: 1 / -1; grid-row: 1 / span 3; align-self: center; text-align: center; color: var(--muted); pointer-events: none; margin: 0; }

/* ---- narrow screens: stack the editor ---- */
@media (max-width: 1000px) {
    .ed-cols, .ed-cols.canvas-mode { grid-template-columns: minmax(0, 1fr) 300px; }
    .palette { grid-column: 1 / -1; position: static; max-height: none; }
    .pal-group { display: inline-block; vertical-align: top; margin-right: 1rem; }
}
@media (max-width: 700px) {
    .ed-cols, .ed-cols.canvas-mode { grid-template-columns: minmax(0, 1fr); }
    /* Phones: forms stack into one column in reading order (the DOM order). */
    .qr-form .qr-grid { display: flex; flex-direction: column; gap: .6rem; }
    /* A form with a phone layout: each cell's order and width (of 4) from the editor. */
    .qr-form .qr-grid.has-phone { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: .6rem .5rem; }
    .qr-form .qr-grid.has-phone > * { grid-area: auto / auto / auto / span var(--pw, 4) !important; order: var(--po, 9999); }
    .canvas-wrap { padding: 6px; }
    /* Phones: the properties panel is a sheet from the bottom, opened by selecting something. */
    .props { display: none; }
    .props.sheet-open {
        display: block; position: fixed; left: 0; right: 0; bottom: var(--bottombar-h, 0px); top: auto; z-index: 30; max-height: 62vh;
        border-radius: 14px 14px 0 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, .22);
    }
    .sheet-close { display: inline-flex; position: sticky; top: 0; z-index: 1; }
    .palette { display: flex; flex-wrap: wrap; gap: .25rem; }
    .palette > h2, .palette > p { flex-basis: 100%; }
    .pal-group { display: contents; }
    .pal-group h3 { display: none; }
    .pal-item { width: auto; }
    .pal-item:disabled { display: none; }
    .note-input, .ed-save .note-input { flex-basis: 100%; width: auto; }
    .create-row { flex-direction: column; }
    .create-row > * { flex: 0 0 auto; } /* a flex-basis set for the row would be a height in a column */
    .item-actions { margin-left: 0; width: 100%; }
    .item-actions .btn-primary { order: -1; }
    .list-bar input[type=search] { max-width: none; }
    .list-tools { margin-left: 0; }
    .list-custom { grid-template-columns: minmax(0, 1fr); }
    .import-sources, .import-options { grid-template-columns: minmax(0, 1fr); }
    .import-map .import-sample { display: none; }
    .import-map select { min-width: 0; width: 100%; }
    .linked-grid { grid-template-columns: minmax(0, 1fr); }
    /* A record's action buttons, full width under the title on a phone (B3). */
    .item-quick .btn { flex: 1 1 100%; justify-content: center; min-height: 2.75rem; }
    .topbar { gap: .75rem; }
}

/* ---- related lists (related-list.js): items of another template that link here ---- */
.ff-related { display: flex; flex-direction: column; min-width: 0; }
.rl-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: .5rem; margin-bottom: .3rem; }
.rl-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .45rem; min-width: 0; }
.rl-title { font-weight: 700; text-decoration: none; }
.rl-scroll { overflow-x: auto; min-height: 0; }
.rl-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.rl-table th { text-align: left; font-size: .78rem; font-weight: 600; color: var(--muted); padding: .2rem .45rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.rl-table td { padding: .3rem .45rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.rl-table tr:last-child td { border-bottom: 0; }
.rl-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.rl-item a { font-weight: 600; text-decoration: none; }
.rl-placeholder td { color: var(--muted); font-style: italic; background: var(--surface-2); }
.rl-all { margin-top: .25rem; }
.rl-row-actions { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
.linked-grid .ff-related { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem .9rem; }
.linked-add { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .75rem 0 0; }
.lay-related .lay-body { padding: 2px; }
.pal-rel { align-items: flex-start; }
.pal-rel-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pal-rel-via { font-size: .75rem; color: var(--muted); }
.pal-rel.placed { opacity: .7; }
.rel-cols .fixed { border-style: dashed; }
.rel-col-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: .3rem; }
.other-side { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--border); }
.tcard-links { display: flex; flex-direction: column; gap: .1rem; font-size: .85rem; }
.tcard-link a { text-decoration: none; }
.lay-related .rl-head { padding-right: 1.9rem; }

/* Subtitles (schema.subtitle_fields) next to titles. */
.rel-sub { font-weight: 400; color: var(--muted); }
.rel-option { display: flex; flex-direction: column; }
.rel-opt-sub { font-size: .8rem; color: var(--muted); }
.item-sub { color: var(--muted); font-size: 1rem; }
/* Lookup fields (form-render.js): read-only values of the linked item. */
.qr-lookup { min-height: var(--row, 32px); display: flex; align-items: center; flex-wrap: wrap; gap: .2rem .5rem; padding: 0 .45rem; border: 1px dashed var(--border); border-radius: 6px; background: var(--surface-2); }
.qr-lookup.empty-lookup { color: var(--muted); }
/* Formula fields (docs/formulas.md): the result, read-only; in the editor the formula itself. */
.qr-formula { min-height: var(--row, 32px); display: flex; align-items: center; padding: 0 .45rem; border: 1px dashed var(--border); border-radius: 6px; background: var(--surface-2); font-variant-numeric: tabular-nums; }
.qr-formula.empty-lookup { color: var(--muted); }
.qr-formula-error { color: var(--danger); background: var(--danger-soft); border-color: var(--danger); font-family: var(--mono); font-size: .9em; cursor: help; }
.qr-formula-def { font-family: var(--mono); font-size: .85em; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; line-height: var(--row, 32px); }
.formula-box { width: 100%; font-family: var(--mono); font-size: .9rem; resize: vertical; min-height: 4.5em; tab-size: 2; }
.formula-status { margin-top: .3rem; font-size: .88rem; min-height: 1.3em; }
.formula-status .error-text { margin: 0 0 .25rem; }
.formula-ok { color: var(--ok); }
.formula-mark { margin: 0; padding: .35rem .5rem; font-family: var(--mono); font-size: .85rem; white-space: pre-wrap; word-break: break-word; background: var(--surface-2); border-radius: 6px; }
.formula-err { color: var(--danger); font-family: var(--mono); font-size: .9em; cursor: help; }
.formula-mark mark { background: var(--danger-soft); color: var(--danger); outline: 1px solid var(--danger); border-radius: 2px; cursor: pointer; }
/* The menus open across the panel's width from its left edge, not off its right one ([19]). */
.formula-tools { display: flex; gap: .4rem; margin: .2rem 0 .35rem; flex-wrap: wrap; position: relative; }
/* The ƒx dialog (formula-dialog.js): Excel's Insert Function, then Function Arguments. */
.formula-fx { font-style: italic; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; }
.rule-box { display: flex; gap: .4rem; align-items: flex-start; }
.rule-box .formula-box { flex: 1; min-width: 0; }
.fx-dialog { width: min(40rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); display: grid; gap: .75rem; }
.fx-dialog:not([open]) { display: none; }
.fx-dialog::backdrop { background: rgba(0, 0, 0, .35); }
.fx-title { margin: 0; font-size: 1.05rem; }
.fx-find { display: flex; gap: .5rem; flex-wrap: wrap; }
.fx-find input { flex: 1 1 14rem; }
.fx-choose { display: grid; grid-template-columns: minmax(9rem, 13rem) 1fr; gap: .75rem; min-height: 15rem; }
.fx-list { display: flex; flex-direction: column; overflow-y: auto; max-height: 18rem; border: 1px solid var(--border); border-radius: 6px; padding: .2rem; }
.fx-fn { text-align: left; font: inherit; font-family: var(--mono); font-size: .9rem; padding: .3rem .5rem; border: 0; border-radius: 4px; background: none; color: var(--text); cursor: pointer; }
.fx-fn:hover { background: var(--surface-2); }
.fx-fn.active { background: var(--accent); color: #fff; }
.fx-about { display: grid; gap: .4rem; align-content: start; }
.fx-about p { margin: 0; }
.fx-syntax { font-weight: 700; overflow-wrap: anywhere; }
.fx-desc { margin: 0; color: var(--muted); }
.fx-args { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(6rem, 12rem); gap: .4rem .6rem; align-items: center; max-height: 50vh; overflow-y: auto; }
.fx-arg { display: contents; }
.fx-arg label { font-weight: 600; }
.fx-arg-input { font-family: var(--mono); font-size: .9rem; width: 100%; }
.fx-arg-value { font-size: .85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-hint { margin: 0; min-height: 1.4em; font-size: .88rem; color: var(--muted); }
.fx-tools { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; font-size: .9rem; }
.fx-tools select { max-width: 16rem; }
.fx-result { display: grid; gap: .3rem; padding: .5rem .6rem; background: var(--surface-2); border-radius: 6px; }
.fx-result p { margin: 0; }
.fx-preview { font-family: var(--mono); font-size: .9rem; overflow-wrap: anywhere; }
.fx-preview mark { background: var(--danger-soft); color: var(--danger); outline: 1px solid var(--danger); border-radius: 2px; }
.fx-result-value { font-weight: 600; }
.fx-back { margin-right: auto; }
.fx-dialog .ask-actions { margin-top: 0; }
.fx-dialog .ask-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
@media (max-width: 600px) {
    .fx-choose { grid-template-columns: 1fr; }
    .fx-list { max-height: 10rem; }
    .fx-args { grid-template-columns: 1fr; }
    .fx-arg-value { white-space: normal; }
}
.formula-pick { position: static; }
.formula-pick > summary { list-style: none; cursor: pointer; }
.formula-pick > summary::-webkit-details-marker { display: none; }
.formula-pick[open] > summary { background: var(--accent-soft); }
.formula-pick[open] > .formula-pick-list, .formula-pick[open] > .formula-pick-search { position: absolute; left: 0; z-index: 30; width: min(22rem, 100%); box-sizing: border-box; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.formula-pick[open] > .formula-pick-search { top: calc(100% + 2px); border-radius: 6px 6px 0 0; padding: .35rem .5rem; }
.formula-pick > .formula-pick-list { top: calc(100% + 2px); max-height: 18rem; overflow: auto; border-radius: 6px; padding: .25rem; }
.formula-pick > .formula-pick-search + .formula-pick-list { top: calc(100% + 2.3rem); border-radius: 0 0 6px 6px; }
.formula-pick-item { display: block; width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: .3rem .45rem; border-radius: 4px; font: inherit; cursor: pointer; }
.formula-pick-item:hover, .formula-pick-item:focus-visible { background: var(--accent-soft); }
.formula-pick-sub { padding-left: 1.4rem; }
.formula-pick-cat { margin: .4rem .45rem .1rem; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.formula-fn code { font-weight: 600; }
.formula-fn-desc { display: block; font-size: .85em; color: var(--muted); }
.formula-fn-example { display: block; font-size: .8em; }
.formula-tried { color: var(--text); }
.formula-diff { margin-top: .2rem; font-size: .9em; overflow-wrap: anywhere; }
.rl-filter { color: var(--muted); flex-basis: 100%; }
.rl-info { color: var(--muted); cursor: help; font-size: .85rem; }
.rl-empty-line { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: 0; }
.rl-empty-line .rl-name { flex: 0 1 auto; }
.rl-empty-line .rl-new { margin-left: 0; }
.cond-list .col-row select { flex: 1 1 auto; }
.cond-list .cond > input, .cond-list .cond > .cond-options { margin: .2rem .25rem .1rem; width: calc(100% - .5rem); }
.cond-options { display: flex; flex-direction: column; }

/* "+ New …" in the relation picker, and its dialog (quick-create.js). */
.rel-create { color: var(--accent); font-weight: 600; border-top: 1px solid var(--border); }
.qc-dialog { width: min(960px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); }
.qc-dialog::backdrop { background: rgba(0, 0, 0, .35); }
.qc-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .75rem 1rem 0; }
.qc-head h2 { font-size: 1.15rem; margin: 0; }
.qc-body { padding: 0 1rem; }
.qc-actions { display: flex; justify-content: flex-end; gap: .5rem; padding: .75rem 1rem 1rem; }

/* The app's own confirm/alert/prompt (lib.js: ask, tell, askText). */
.ask-dialog { width: min(30rem, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); }
.ask-dialog::backdrop { background: rgba(0, 0, 0, .35); }
.ask-head { display: flex; align-items: flex-start; gap: .5rem; }
.ask-message { flex: 1 1 auto; margin: .15rem 0 .75rem; white-space: pre-line; overflow-wrap: anywhere; }
.ask-input { width: 100%; box-sizing: border-box; }
textarea.ask-input { resize: vertical; font: inherit; }
.ask-preview { margin-top: .5rem; max-height: 12rem; overflow: auto; }
.ask-preview:empty { display: none; }
.ask-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.ask-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
/* The create dialog (lib.js askForm()). */
.ask-form-dialog h2.ask-message { font-size: 1.15rem; margin-bottom: 1rem; }
.ask-form { display: grid; gap: .9rem; }
.ask-form .ask-actions { margin-top: .25rem; }
.ask-field { display: grid; gap: .3rem; min-width: 0; }
.ask-field > label { font-weight: 600; }
.ask-field .hint, .ask-field .error-text { margin: 0; }
.ask-choices { display: grid; gap: .4rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.ask-choices > legend { font-weight: 600; padding: 0; margin-bottom: .4rem; }
.ask-choice { display: flex; align-items: flex-start; gap: .55rem; padding: .55rem .7rem; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.ask-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.ask-choice input { margin: .2rem 0 0; }
.ask-choice > span { display: grid; gap: .1rem; }
.ask-choice-label { font-weight: 600; }

/* A template's warnings (ItemNotices): banners in the designer's colour. */
.banner-alert { font-weight: 600; border-left-width: 6px; }
.banner-alert-red { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); }
.banner-alert-orange { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.banner-alert-blue { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
/* The editor's warning rows (template-editor.js warningsSettings). */
.warning-edit { border: 1px solid var(--border); border-radius: var(--radius); padding: .4rem .5rem; margin-bottom: .5rem; }
.warning-edit .warning-message { flex: 1 1 auto; min-width: 0; }
/* The fields a scan shows (qr/actions.blade.php). */
.qr-scan-fields { display: grid; gap: .25rem 1rem; grid-template-columns: max-content 1fr; margin: .75rem 0 1rem; }
.qr-scan-fields div { display: contents; }
.qr-scan-fields dt { color: var(--muted); }
.qr-scan-fields dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* Ticking items in the list ([88]). */
.data-table .pick-cell { width: 2rem; padding-right: 0; }
.data-table .pick-cell input { margin: 0; }

/* The code large on the screen (item-page.js showQr, [84]): white, whatever the theme, to scan. */
.qr-large { padding: 1.5rem; border: 0; border-radius: var(--radius); background: #fff; color: #1b1f24; text-align: center; cursor: zoom-out; }
.qr-large::backdrop { background: rgba(0, 0, 0, .7); }
.qr-large img { display: block; width: min(80vmin, 34rem); height: auto; margin: 0 auto .5rem; }
.qr-large code { font-size: 1.1rem; letter-spacing: .08em; }

/* A starter before it is added (packages/confirm.blade.php). */
.pkg-confirm-list { list-style: none; padding: 0; display: grid; gap: .4rem; }
.pkg-confirm-list li { padding: .45rem .6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.pkg-reuse { display: flex; margin-top: .25rem; font-size: .9rem; }

/* The header's search (layouts/app.blade.php) and its page (search.blade.php, [61]). */
.top-search { margin-left: auto; margin-right: .5rem; }
/* "?" in the header: the guide, at any time. */
.top-help { width: 1.9rem; height: 1.9rem; flex: none; border-radius: 50%; border: 1px solid var(--border); display: grid; place-items: center;
    color: var(--muted); font-weight: 700; text-decoration: none; margin-right: .5rem; }
.top-help:hover, .top-help[aria-current="page"] { color: var(--accent); border-color: var(--accent); }
/* A phone's header has no room for it: the guide is in the user menu there. */
@media (max-width: 700px) { .top-help { display: none; } }
.top-search input { width: 12rem; max-width: 30vw; padding: .3rem .6rem; }
@media (max-width: 700px) { .top-search { display: none; } }
.top-search-btn { display: none; margin-left: auto; color: var(--muted); }
@media (max-width: 700px) and (min-width: 601px) { .top-search-btn { display: inline-flex; } }
.search-group { margin: 1.25rem 0; }
.search-group h2 { font-size: 1.05rem; margin: 0 0 .35rem; }
.search-hits { list-style: none; padding: 0; margin: 0 0 .35rem; display: grid; gap: .2rem; }
/* Where the word was found when not in the title (step 19c E5): "Benämning: Kylvätske|pump". */
.search-match { display: block; color: var(--muted); overflow-wrap: anywhere; }
.search-match mark { background: var(--accent-soft); color: var(--text); border-radius: 2px; padding: 0 .1em; }

/* The company's time zone: a filter box over the list ([14]). */
.tz-pick { display: flex; flex-wrap: wrap; gap: .35rem; }
.tz-pick input { flex: 1 1 10rem; min-width: 0; }
.tz-pick select { flex: 2 1 14rem; min-width: 0; }

/* A note that goes by itself (lib.js toast). */
.qr-toast { position: fixed; left: 50%; bottom: calc(1.5rem + var(--bottombar-h, 0px)); transform: translateX(-50%); z-index: 50; max-width: calc(100vw - 32px); padding: .6rem 1rem; border-radius: var(--radius); background: var(--text); color: var(--bg); box-shadow: 0 4px 16px rgba(0, 0, 0, .25); transition: opacity .4s; }
.qr-toast-out { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .qr-toast { transition: none; } }

/* Web address (form-render.js): the input plus ↗ to open the saved address. */
.url-field .url-open { flex: none; text-decoration: none; padding: .2rem .55rem; }
.url-cell { text-decoration: none; display: inline-block; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* Photo and file fields (file-field.js). */
.qr-files { display: flex; flex-direction: column; gap: .35rem; min-width: 0; border-radius: 6px; }
.qr-files.qf-over { outline: 2px dashed var(--accent); outline-offset: 2px; background: var(--accent-soft); }
.qf-list { display: flex; flex-direction: column; gap: .25rem; }
.qf-photos .qf-list { flex-direction: row; flex-wrap: wrap; gap: .4rem; }
.qf-tile { margin: 0; width: 7.5rem; display: flex; flex-direction: column; gap: .15rem; }
.qf-thumb { display: block; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); }
.qf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qf-thumb:hover { border-color: var(--accent); }
.qf-tile figcaption { display: flex; align-items: center; gap: .1rem; font-size: .75rem; color: var(--muted); min-width: 0; }
.qf-tile .qf-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qf-list:not(.qf-photos .qf-list) .qf-tile { flex-direction: row; align-items: center; width: auto; }
.qf-list:not(.qf-photos .qf-list) .qf-thumb { width: 4rem; flex: none; }
.qf-doc { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .2rem .35rem; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.qf-doc .qf-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; font-weight: 600; }
.qf-icon { flex: none; font-size: .65rem; font-weight: 800; letter-spacing: .03em; color: var(--accent); background: var(--accent-soft); border-radius: 4px; padding: .25rem .3rem; min-width: 2.2rem; text-align: center; }
.qf-remove { width: 1.5rem; height: 1.5rem; font-size: .75rem; flex: none; }
.qf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.qf-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.qf-pick { cursor: pointer; }
/* A plain file input's own button (packages/library.blade.php; boot.js shows the name). */
.file-pick { position: relative; cursor: pointer; }
.file-pick:has(input:focus-visible) { box-shadow: var(--focus); }
.file-pick-name { align-self: center; overflow-wrap: anywhere; }
.qf-pick.disabled { opacity: .6; cursor: default; }
.qf-input:focus-visible + .qf-pick { box-shadow: var(--focus); }
.qr-files:focus-visible { outline: none; box-shadow: var(--focus); } /* takes the focus for a paste ([39]) */
.qf-empty { margin: 0; }

/* File viewer (file-viewer.js). */
.fv-dialog { width: min(1200px, calc(100vw - 16px)); height: calc(100vh - 16px); max-height: none; padding: 0; border: 0; border-radius: var(--radius); background: var(--surface); color: var(--text); display: flex; flex-direction: column; }
.fv-dialog:not([open]) { display: none; }
.fv-dialog::backdrop { background: rgba(0, 0, 0, .7); }
.fv-head { display: flex; align-items: center; gap: .4rem; padding: .5rem .75rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.fv-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
.fv-actions { margin-left: auto; display: flex; gap: .3rem; align-items: center; }
.fv-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; background: var(--surface-2); }
.fv-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.fv-pdf { width: 100%; height: 100%; border: 0; background: #fff; }
@media (pointer: coarse) { .qf-hint { display: none; } }

/* Change history (history-list.js). */
.ff-history { display: flex; flex-direction: column; min-width: 0; }
.hist-list { list-style: none; margin: 0; padding: 0; overflow: auto; min-height: 0; }
.hist-entry { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .1rem .75rem; padding: .3rem .45rem; border-bottom: 1px solid var(--border); font-size: .9rem; }
.hist-entry:last-child { border-bottom: 0; }
.hist-changes { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.hist-change { overflow-wrap: anywhere; }
.hist-field { font-weight: 600; }
.hist-kind { font-weight: 600; color: var(--muted); }
.hist-from { color: var(--muted); }
.hist-delta.up { color: var(--ok); font-weight: 600; }
.hist-delta.down { color: var(--danger); font-weight: 600; }
.hist-list .rl-placeholder { padding: .3rem .45rem; color: var(--muted); font-style: italic; background: var(--surface-2); }
@media (max-width: 700px) { .hist-entry { grid-template-columns: minmax(0, 1fr); } }

/* ---- template groups (template list) ---- */
.page > .back { display: inline-block; text-decoration: none; font-weight: 600; margin-bottom: .35rem; }
.tgroup { margin: 1.5rem 0 0; }
.tgroup-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding-bottom: .2rem; }
.tgroup-head h2 { margin: 0; font-size: 1.15rem; }
.tgroup-empty { margin: .5rem 0 0; }

/* ---- views (view-blocks.js): blocks on the grid ---- */
.vb { min-width: 0; display: flex; flex-direction: column; }
.vb-color-accent { --vb-c: var(--accent); }
.vb-color-green { --vb-c: var(--ok); }
.vb-color-orange { --vb-c: var(--warn); }
.vb-color-red { --vb-c: var(--danger); }
.vb-color-gray { --vb-c: var(--muted); }
.vb-text { justify-content: flex-end; }
.vb-text h1, .vb-text h2, .vb-text p { margin: 0; overflow: hidden; text-overflow: ellipsis; }
.vb-text h2 { font-size: 1.2rem; }
.vb-text p { white-space: pre-line; color: var(--muted); }
.vb-tile, .vb-list, .vb-counter, .vb-chart {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem .9rem; box-shadow: var(--shadow);
}
.vb-tile { gap: .2rem; }
.vb-tile-name { font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--text); }
.vb-tile-name:hover { color: var(--accent); }
.vb-tile-desc { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vb-tile-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; flex-wrap: wrap; }
.vb-btn {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; text-align: center;
    background: var(--vb-c); color: var(--accent-text); border-radius: var(--radius); padding: .6rem; text-decoration: none;
    font-weight: 700; font-size: 1.15rem; line-height: 1.2; box-shadow: var(--shadow);
}
.vb-btn:hover { filter: brightness(1.08); }
.vb-btn.disabled { opacity: .5; }
.vb-btn-sub { font-size: .8rem; font-weight: 600; opacity: .85; }
.vb-scan-glyph { font-size: 1.5em; vertical-align: -.12em; }
.vb-counter {
    flex: 1; display: flex; flex-direction: column; text-decoration: none; color: var(--text); justify-content: center; gap: .1rem;
    background: color-mix(in srgb, var(--vb-c) 9%, var(--surface)); border-color: color-mix(in srgb, var(--vb-c) 35%, var(--border));
}
.vb-count-n { font-size: 2.2rem; font-weight: 800; line-height: 1.05; color: var(--vb-c); font-variant-numeric: tabular-nums; }
.vb-count-label { font-weight: 700; }
.vb-count-filter { color: var(--muted); }
.vb-counter:hover { border-color: var(--vb-c); }
.vb-list .rl-scroll { flex: 1 1 auto; }
.vb-alert .vb-count-n { animation: vb-pulse 2s ease-in-out 3; }
@keyframes vb-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .vb-alert .vb-count-n { animation: none; } }
/* A chart (D24): the server's SVG fills what is left of the block; it adds nothing to the row's height. */
.vb-chart-plot { flex: 1 1 auto; position: relative; min-height: 6rem; margin-top: .3rem; }
.vb-chart-plot > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vb-search { position: relative; justify-content: center; }
.vb-search-input { font-size: 1.05rem; }
.vb-results {
    position: absolute; left: 0; right: 0; top: 100%; z-index: 20; list-style: none; margin: 4px 0 0; padding: .25rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
    max-height: 60vh; overflow: auto;
}
.vb-result { border-radius: 4px; }
.vb-result.muted { padding: .4rem .6rem; }
.vb-result a { display: flex; align-items: baseline; gap: .4rem; padding: .4rem .6rem; text-decoration: none; color: var(--text); }
.vb-result a .chip { margin-left: auto; }
.vb-result.active, .vb-result:hover { background: var(--accent-soft); }
.vb-result-title { font-weight: 600; }
/* A signal (docs/signals.md, D33): the run time box, coloured by the last hour, and the timeline. */
.sig-c-green { --sig-c: var(--ok); }
.sig-c-orange { --sig-c: var(--warn); }
.sig-c-red { --sig-c: var(--danger); }
.sig-c-gray { --sig-c: var(--muted); }
.sig-box {
    flex: 1; display: flex; flex-direction: column; gap: .35rem; min-height: 0; container-type: inline-size;
    background: color-mix(in srgb, var(--sig-c) 12%, var(--surface)); border: 2px solid color-mix(in srgb, var(--sig-c) 55%, var(--border));
    border-radius: var(--radius); padding: .7rem .9rem; box-shadow: var(--shadow); transition: background .4s, border-color .4s;
}
.sig-head { display: flex; align-items: baseline; gap: .5rem; }
.sig-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sig-figs { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem 1rem; margin-top: auto; }
.sig-fig { display: flex; flex-direction: column; min-width: 0; }
.sig-n { font-size: clamp(1.6rem, 14cqi, 3rem); font-weight: 800; line-height: 1.05; color: var(--sig-c); font-variant-numeric: tabular-nums; }
.sig-fig + .sig-fig .sig-n { font-size: clamp(1.3rem, 10cqi, 2.2rem); }
.sig-l { font-weight: 700; }
.sig-sub, .sig-caption { color: var(--muted); font-size: .8rem; }
.sig-status { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.sig-since { font-weight: 500; color: var(--muted); }
.sig-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--opt-gray); flex: none; }
.sig-st-run .sig-dot { background: var(--opt-green); }
.sig-st-micro .sig-dot { background: var(--opt-yellow); }
.sig-st-stop .sig-dot { background: var(--opt-red); animation: sig-blink 1.2s ease-in-out infinite; }
.sig-st-stop { color: var(--danger); }
@keyframes sig-blink { 50% { opacity: .25; } }
.vb-signal:has(.sig-track) { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem .9rem; box-shadow: var(--shadow); }
.vb-signal .rl-head { flex-wrap: wrap; }
.sig-track { position: relative; height: 2.6rem; margin-top: .5rem; border-radius: 6px; background: color-mix(in srgb, var(--opt-gray) 25%, var(--surface)); overflow: hidden; flex: none; }
.sig-seg { position: absolute; top: 0; bottom: 0; min-width: 2px; display: block; }
.sig-k-run { background: var(--opt-green); }
.sig-k-micro { background: var(--opt-yellow); }
.sig-k-stop { background: var(--opt-red); }
/* A stop nobody has given a cause yet: striped, so it stands out without a colour of its own. */
.sig-unc { background: repeating-linear-gradient(135deg, var(--opt-red) 0 5px, color-mix(in srgb, var(--opt-red) 45%, var(--surface)) 5px 10px); }
.sig-open { opacity: .8; }
a.sig-seg:hover, a.sig-seg:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; z-index: 1; }
.sig-axis { display: flex; justify-content: space-between; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.sig-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .4rem; }
.sig-leg { display: inline-flex; align-items: center; gap: .35rem; }
.sig-leg-unc { color: var(--danger); font-weight: 600; }
.sig-sw { width: .8rem; height: .8rem; border-radius: 3px; display: inline-block; position: static; }
@media (prefers-reduced-motion: reduce) { .sig-st-stop .sig-dot { animation: none; } .sig-box { transition: none; } }
/* "Give the cause" on an operator's tablet: big buttons, one tap; with `ask` the whole screen while a stop waits. */
.vb-signal:has(.sig-ask) { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem .9rem; box-shadow: var(--shadow); }
/* In its block (the default): red while a stop waits for its cause, so it is seen from across the line. */
.vb-signal:has(.sig-ask-pending:not(.sig-ask-takeover)) {
    border: 2px solid var(--danger); border-top-width: .4rem; background: color-mix(in srgb, var(--danger) 5%, var(--surface));
}
.sig-ask { display: flex; flex-direction: column; gap: .6rem; min-height: 0; }
.sig-ask-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; }
.sig-ask-q { margin: 0; font-size: 1.15rem; }
.sig-ask-when { color: var(--muted); }
.sig-ask-open { color: var(--danger); font-weight: 700; }
.sig-ask-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; }
.sig-ask-choice {
    min-height: 3.6rem; padding: .5rem .7rem; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2);
    color: var(--text); font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer; touch-action: manipulation;
}
.sig-ask-choice[data-color=gray] { background: var(--opt-gray-bg); color: var(--opt-gray-fg); border-color: var(--opt-gray); }
.sig-ask-choice[data-color=blue] { background: var(--opt-blue-bg); color: var(--opt-blue-fg); border-color: var(--opt-blue); }
.sig-ask-choice[data-color=green] { background: var(--opt-green-bg); color: var(--opt-green-fg); border-color: var(--opt-green); }
.sig-ask-choice[data-color=yellow] { background: var(--opt-yellow-bg); color: var(--opt-yellow-fg); border-color: var(--opt-yellow); }
.sig-ask-choice[data-color=orange] { background: var(--opt-orange-bg); color: var(--opt-orange-fg); border-color: var(--opt-orange); }
.sig-ask-choice[data-color=red] { background: var(--opt-red-bg); color: var(--opt-red-fg); border-color: var(--opt-red); }
.sig-ask-choice[data-color=purple] { background: var(--opt-purple-bg); color: var(--opt-purple-fg); border-color: var(--opt-purple); }
.sig-ask-choice[data-color=pink] { background: var(--opt-pink-bg); color: var(--opt-pink-fg); border-color: var(--opt-pink); }
.sig-ask-choice:hover:not(:disabled) { border-color: var(--accent); }
.sig-ask-choice:active:not(:disabled) { transform: scale(.97); }
.sig-ask-choice:disabled { opacity: .6; cursor: default; }
.sig-ask-other { display: flex; gap: .5rem; }
.sig-ask-input { flex: 1; min-height: 3rem; font-size: 1.05rem; }
.sig-ask-foot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0; }
.sig-ask-later { margin-left: auto; }
.sig-ask-ok { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--ok); }
.sig-ask-latest { margin: 0; color: var(--muted); }
.sig-ask-takeover {
    position: fixed; inset: 0; z-index: 60; overflow: auto; justify-content: center;
    padding: max(1.5rem, 4vh) max(1rem, 6vw); background: color-mix(in srgb, var(--surface) 97%, var(--danger));
    border-top: .5rem solid var(--danger);
}
.sig-ask-takeover .sig-ask-q { font-size: clamp(1.4rem, 3.5vw, 2.2rem); }
.sig-ask-takeover .sig-ask-choices { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .8rem; }
.sig-ask-takeover .sig-ask-choice { min-height: 5rem; font-size: 1.3rem; }
.sig-ask-takeover .sig-ask-foot { font-size: 1rem; }
.sig-ask-takeover .sig-ask-later { min-height: 3rem; min-width: 8rem; }
@media (prefers-reduced-motion: no-preference) { .sig-ask-takeover { animation: sig-ask-in .25s ease-out; } }
@keyframes sig-ask-in { from { opacity: 0; } }

/* A signal's page (signal-editor.js). */
.signal-addon, .plan-locked { max-width: 40rem; display: grid; gap: .6rem; justify-items: start; padding: 1.2rem 1.4rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.signal-addon h2, .plan-locked h2 { margin: 0; }
.prop > label.switch:first-child { display: inline-flex; font-size: inherit; margin-bottom: 0; }
.signal-addon p, .plan-locked p { margin: 0; }
.sig-now-grid { display: grid; grid-template-columns: minmax(16rem, 1fr) 2fr; gap: 12px; align-items: stretch; }
.sig-now-grid > .vb { min-height: 11rem; }
@media (max-width: 800px) { .sig-now-grid { grid-template-columns: 1fr; } }
.sig-section { max-width: 52rem; }
.sig-sentence { margin: 0; line-height: 2.2; }
.sig-num { width: 6rem; display: inline-block; }
.sig-kinds { display: grid; gap: .4rem; }
.sig-kind-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.sig-kind-row select { width: auto; }
.sig-inline { display: flex; flex-wrap: wrap; gap: 0 1rem; align-items: flex-end; }
.sig-shift-table { max-width: 30rem; }
.sig-shift-table input { width: 100%; }
.sig-code { background: var(--surface-2, var(--bg)); border: 1px solid var(--border); border-radius: 6px; padding: .7rem .8rem; overflow-x: auto; font-size: .82rem; white-space: pre; margin: 0; }

/* In the editor the blocks are pictures on cards. */
.lay-block .lay-body { padding: 2px; }
.lay-block .lay-body > .vb { height: 100%; }
/* A key figure fits its card (step 19c F5): the canvas is narrower than the dashboard and its rows
   don't grow, so the number scales with the card and the words keep to one line each. */
.lay-block .vb-counter { container-type: size; justify-content: safe center; padding: .4rem .6rem; overflow: hidden; }
.lay-block .vb-count-n { font-size: clamp(1rem, min(18cqi, 40cqh), 2.2rem); white-space: nowrap; }
.lay-block .vb-count-label, .lay-block .vb-count-filter { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-height: 100px) { .lay-block .vb-count-filter { display: none; } }
.pal-used { margin-left: auto; color: var(--ok); font-weight: 700; }
.pal-tpl-head { margin-top: 1rem; }
.vb-swatches { display: flex; gap: .4rem; }
.vb-swatch { width: 1.8rem; height: 1.8rem; border-radius: 50%; border: 2px solid var(--surface); background: var(--vb-c); cursor: pointer; box-shadow: 0 0 0 1px var(--border); }
.vb-swatch.active { box-shadow: 0 0 0 2px var(--text); }
.vb-prefill-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .3rem; margin-bottom: .5rem; }
.vb-prefill .ff-label { white-space: normal; }
@media (max-width: 700px) {
    /* Phones: a view stacks into one column in reading order, like a form. */
    .vb-grid:not(.lay-canvas) { display: flex; flex-direction: column; gap: .6rem; }
    .vb-grid:not(.lay-canvas) .vb-chart-plot { position: static; min-height: 0; }
    .vb-grid:not(.lay-canvas) .vb-chart-plot > svg { position: static; height: auto; display: block; }
    .vb-btn { min-height: 4rem; }
}

/* ---- scanner ---- */
/* scanner.js: a square camera box; the frame marks the decoded centre crop (80%). */
.scanner { max-width: 520px; margin: 0; display: grid; gap: .75rem; min-width: 0; }
.scanner [hidden] { display: none !important; }
.scanner h1 { margin-bottom: .25rem; }
.scan-cam {
    position: relative; aspect-ratio: 1 / 1; width: min(100%, 62vh); justify-self: center;
    background: #000; border-radius: var(--radius); overflow: hidden;
}
@supports not (aspect-ratio: 1 / 1) { .scan-cam { height: min(100vw, 520px); } }
.scan-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-cam { container-type: size; }
/* The decoded square: 80% of the box's short side, centred (the box is only square on a wide screen). */
.scan-frame {
    position: absolute; width: 80cqmin; height: 80cqmin; left: calc(50% - 40cqmin); top: calc(50% - 40cqmin); border-radius: 12px; pointer-events: none;
    border: 3px solid rgba(255, 255, 255, .85); box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .3);
}
.scan-hit .scan-frame { animation: scan-hit .5s ease-out; }
@keyframes scan-hit { from { border-color: #3ddc84; box-shadow: 0 0 0 100vmax rgba(29, 122, 58, .35); } }
@media (prefers-reduced-motion: reduce) { .scan-hit .scan-frame { animation: none; } }
.scan-status {
    position: absolute; inset: auto .6rem .6rem; width: fit-content; margin: 0 auto;
    padding: .25rem .7rem; border-radius: 99px; background: rgba(0, 0, 0, .6); color: #fff; font-size: .85rem; text-align: center;
}
.scan-status:empty { display: none; }
.scan-torch { position: absolute; top: .6rem; right: .6rem; }
.scan-problem .banner { display: grid; gap: .5rem; justify-items: start; margin: 0; }
.scan-problem .banner .btn { margin: 0; }
.scan-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
.scan-result:empty { display: none; }
/* On the camera, at the top (scanner.js); under the message when there is no camera. */
.scan-cam > .scan-result { position: absolute; top: .6rem; left: .6rem; right: .6rem; z-index: 2; }
.scan-cam > .scan-result .banner { padding: .4rem .6rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.scan-result .banner { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; }
.scan-result .banner .btn { margin: 0 0 0 auto; }
.scan-result code { font-size: 1.05rem; font-weight: 700; }
.scan-text { font-family: var(--mono); font-size: .85em; overflow-wrap: anywhere; min-width: 0; }
.scan-collected-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.scan-collected-head h2 { margin: 0; }
.scan-list { list-style: none; margin: .4rem 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.scan-list li { display: flex; align-items: center; gap: .6rem; padding: .55rem .8rem; }
.scan-list li + li { border-top: 1px solid var(--border); }
.scan-list a { font-size: 1rem; font-weight: 700; text-decoration: none; }
.scan-list .muted { margin-left: auto; }
.scan-manual { padding-top: .75rem; border-top: 1px solid var(--border); }
.scan-manual > summary { cursor: pointer; font-weight: 600; }
.scan-manual > form { display: grid; gap: .35rem; margin-top: .5rem; }
.scan-manual-row { display: flex; gap: .5rem; }
.scan-manual-row input { flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: 1.05rem; letter-spacing: .04em; }
.scan-manual .hint, .scan-manual .error-text { margin: 0; }

/* ---- report editor (report-editor.js, docs/reports.md) ---- */
.rpt-paper-info { margin: 0 0 .5rem; }
.rpt-paper { background: #fff; color: #1c2430; border-radius: 4px; box-shadow: 0 1px 6px rgba(0, 0, 0, .15); padding: .75rem; max-width: 900px; margin: 0 auto; }
.rpt-paper .muted, .rpt-paper .hint { color: #5d6672; }
.rpt-band { margin: 0 0 .9rem; }
.rpt-band-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .25rem; }
.rpt-band-head h3 { margin: 0; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #5d6672; }
.rpt-band-head .hint { margin: 0; font-size: .75rem; }
.rpt-band-head .btn { margin-left: auto; }
.rpt-band-page_header .rpt-grid, .rpt-band-page_footer .rpt-grid { background-color: #f3f5f8; }
.rpt-grid { --col-gap: 4px; --row-gap: 2px; --row: 20px; min-height: 3rem; --grid-line: rgba(20, 40, 70, .07); }
.rpt-grid .lay-card { background: #fff; outline-color: #c6ccd4; }
.rpt-grid .lay-card.selected { outline-color: var(--accent); }
.rb .lay-body { padding: 1px 3px; font-size: .8rem; line-height: 1.25; }
.rb-label { display: block; font-size: .68rem; font-weight: 600; color: #5d6672; }
.rb-field.lbl-left { display: flex; gap: .4rem; align-items: baseline; }
.rb-sample { color: #3a4350; font-style: italic; }
/* "Show with" (step 19c F4): the chosen record's values, and a placeholder's word with a faint mark. */
.rb-value { overflow-wrap: anywhere; }
.rb-var-value { background: #eef4fd; border-radius: 2px; box-shadow: 0 0 0 1px #d4e2f7; }
.rpt-canvas-bar { margin-bottom: .5rem; }
.rpt-canvas-bar .rpt-paper-info { margin: 0; }
.rb-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.rb-style-title { font-family: 'Michroma', var(--font, sans-serif); font-size: 1.1rem; }
.rb-style-heading { font-weight: 700; font-size: .95rem; }
.rb-style-small { font-size: .68rem; }
.rb-qr { display: flex; align-items: flex-start; gap: .3rem; height: 100%; }
.rb-qr-box { display: inline-flex; align-items: center; justify-content: center; aspect-ratio: 1; height: 100%; max-height: 6rem; border: 1px solid #8a93a0; font-size: .7rem; }
.rb-image { display: flex; align-items: flex-start; height: 100%; min-height: 0; }
.rb-image img { max-height: 100%; max-width: 100%; object-fit: contain; }
.rb-if { position: absolute; top: 1px; right: 2.6rem; z-index: 1; font-size: .62rem; font-weight: 600; color: #7a4b00; background: #fff3d6; border-radius: 3px; padding: 0 .3rem; pointer-events: none; }
.rb-conditional { outline-style: dashed; }
.rpt-image-thumb { display: block; max-width: 100%; max-height: 8rem; object-fit: contain; background: #fff; border: 1px solid var(--border, #c6ccd4); border-radius: 3px; margin-bottom: .3rem; }
.rb-table { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); margin-top: .15rem; }
.rb-table span { min-width: 0; font-weight: 600; font-size: .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-bottom: 1px solid #1c2430; }
.rb-table .rb-table-cell { font-weight: 400; border-bottom-color: #d5d9df; }
.rb-line { display: flex; align-items: center; height: 100%; }
.rb-line hr { width: 100%; border: 0; border-top: 1px solid #1c2430; margin: 0; }
.rb-signature { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1rem; align-items: end; height: 100%; font-size: .68rem; }
.rb-signature span { border-top: 1px solid #1c2430; padding-top: 1px; }
.rb-chart { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem; height: 100%; border: 1px dashed #b9bec6; border-radius: 3px; }
.rb-chart strong { align-self: flex-start; padding-left: .3rem; font-size: .8rem; }
.rb-chart-glyph { font-size: 1.8rem; line-height: 1; color: #2a78d6; letter-spacing: .1em; }
.rb-break { border-top: 2px dashed #8a93a0; text-align: center; font-size: .68rem; color: #5d6672; height: 100%; }
.rpt-table-card {
    display: grid; gap: .3rem; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
    background: #fff; border: 1px dashed #c6ccd4; border-radius: 3px; padding: .5rem;
}
.rpt-table-card:hover { border-color: #8a93a0; }
.rpt-table-card.selected { outline: 2px solid var(--accent); }
.rpt-table-card.has-error { outline: 2px solid var(--danger); }
.rpt-table-head { display: grid; gap: 4px; border-bottom: 1px solid #1c2430; font-weight: 600; font-size: .75rem; }
.rpt-table-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rpt-table-groups { font-size: .75rem; font-weight: 600; color: #5d6672; }
.rpt-band-name { white-space: nowrap; }
.rpt-vars .chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.rpt-vars .chip { border: 1px solid var(--border); cursor: pointer; font-family: var(--mono); font-size: .75rem; }
.rpt-vars .chip:hover { border-color: var(--accent); }
.rpt-col-opts { flex-wrap: wrap; gap: .3rem; }
.rpt-col-opts select { width: auto; flex: 1 1 6rem; }
.rpt-col-width { width: 3.5rem; }
.rpt-group-opts { flex-wrap: wrap; gap: .2rem .7rem; font-size: .85rem; }
.rpt-margins { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: .5rem; }
.rpt-margins input { width: 4.5rem; }
.rpt-page-form { max-width: 40rem; }
.rpt-preview { padding-top: .75rem; }
.rpt-preview-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .75rem; }
.rpt-preview-bar select { width: auto; max-width: 20rem; }
.rpt-pages { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
.rpt-page { width: min(100%, 640px); height: auto; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .25); }
/* The name gets the room it needs ([97]): it was squeezed by the long start choices. */
.report-create input[name=name], .label-create input[name=name] { flex: 1 1 16rem; min-width: 12rem; }
.report-create select, .label-create select { flex: 0 1 22rem; width: auto; }
@media (max-width: 700px) { .report-create select, .label-create select { flex: 0 0 auto; width: 100%; } }
/* "Rapporter ▾" (report-menu.js) */
.menu { position: relative; display: inline-block; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-panel {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; display: flex; flex-direction: column;
    min-width: 14rem; max-width: calc(100vw - 32px); padding: .35rem; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
}
.menu-action { width: 100%; text-align: left; background: none; border: 0; font: inherit; cursor: pointer; }
.menu-sep { border-top: 1px solid var(--border); margin: .25rem 0; }
.rules-props > summary { cursor: pointer; font-weight: 600; display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; list-style: none; }
.rules-props > summary::before { content: '▸'; color: var(--muted); } /* display:flex hides the browser's own ([16]) */
.rules-props[open] > summary::before { content: '▾'; }
.rules-props .formula-box { width: 100%; }
.report-runs { margin-top: 2rem; }
.report-group { margin-top: 1.5rem; }
.report-group h2 { font-size: 1.1rem; margin: 0 0 .2rem; }
.report-group h2 a { color: inherit; text-decoration: none; }
.run-list { list-style: none; padding: 0; margin: 0; }
.run-list li { display: flex; flex-wrap: wrap; gap: .2rem .75rem; padding: .45rem 0; border-bottom: 1px solid var(--border); }
.run-list .muted { font-size: .9rem; }
.report-offer, .report-run { max-width: 40rem; }
.menu-manage { border-top: 1px solid var(--border); margin-top: .25rem; padding-top: .55rem; color: var(--muted); }
.menu-empty { margin: .35rem .6rem; }

/* ---------------------------------------------------------------- labels (docs/labels.md) */
.label-missing { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.label-print { max-width: 40rem; }
.label-print input[type=number] { max-width: 8rem; }
.label-sheet { --cols: 3; --ratio: 2; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 3px; max-width: 22rem; padding: 6px; background: #fff; border: 1px solid var(--border); border-radius: 4px; }
.label-place { position: relative; aspect-ratio: var(--ratio); display: grid; place-items: center; border: 1px dashed #b8c0ca; border-radius: 2px; cursor: pointer; color: #5d6672; font-size: .7rem; }
.label-place input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.label-place:has(input:checked) { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.label-place:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.rpt-paper.rpt-label { max-width: min(900px, calc(340px * var(--label-ratio))); padding: 0; }
.rpt-label .rpt-band { margin: 0; }
.rpt-label .rpt-band-head { display: none; }
.rpt-label .rpt-grid { min-height: 0; padding: var(--label-pad); }
.rpt-grid .lay-card.outside { outline: 2px solid var(--danger); }
.rb-qr-fill { display: grid; place-items: center; height: 100%; font-size: .75rem; color: #5d6672; border: 1px dashed #b8c0ca; aspect-ratio: 1; max-height: 100%; margin: 0 auto; }
.label-stock-row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: end; }
.qr-blank-pdf { margin: 1rem 0; }

/* ---- signature, position and "Skanna in" fields (step 10, docs/items.md) ---- */
.sig-pad { display: block; width: 100%; max-width: 600px; aspect-ratio: 3 / 1; background: #fff; border: 1px dashed var(--border); border-radius: 6px; touch-action: none; cursor: crosshair; }
.sig-image { display: block; max-width: 100%; max-height: 8rem; background: #fff; border: 1px solid var(--border); border-radius: 6px; }
.sig-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .35rem; }
.gps-meta { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .3rem; }
.gps-meta:empty { display: none; }
.scan-dialog { width: min(32rem, 94vw); padding: .75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); }
.scan-dialog::backdrop { background: rgba(0, 0, 0, .55); }
.scan-dialog .scan-cam { aspect-ratio: 4 / 3; width: 100%; margin-bottom: .6rem; } /* wide: 1D barcodes are long; the frame is the 80% crop read */

/* ---- the company page (docs/auth.md → "Companies") ---- */
.company-page { max-width: 60rem; }
/* A field the person's role may not change (D21): its control in a disabled fieldset. */
.ff-ro { border: 0; margin: 0; padding: 0; min-width: 0; }
.ff-ro:disabled input, .ff-ro:disabled textarea, .ff-ro:disabled select { background: var(--surface-2); }
.company-section { margin: 0 0 2rem; display: grid; gap: .9rem; }
.company-section h2 { margin: 0; font-size: 1.1rem; }
/* The free plan on the company page (docs/plans.md): what it holds of what it may; closing the account. */
.prefs-row > .prefs-label { font-weight: 700; }
.plan-meter { display: grid; gap: .3rem; max-width: 28rem; }
.plan-meter meter { width: 100%; height: .9rem; }
.plan-note { margin: 0; }
.company-danger { border-top: 1px solid var(--border); padding-top: 1.2rem; }
.company-table th, .company-table td { padding: .45rem .6rem; vertical-align: middle; }
.company-table td .chip { margin-left: .4rem; }
.company-actions { display: flex; gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
.company-actions input { max-width: 14rem; }
.company-table select { min-width: 9rem; }
/* A row's ⋯ menu opens over the rows below instead of inside a scrolling box (the tables fit 60rem). */
.table-wrap:has(> .company-table) { overflow: visible; }
/* Phones: each person / invitation is a card of its own (no sideways scrolling). */
@media (max-width: 640px) {
    .company-table thead { display: none; }
    .company-table, .company-table tbody, .company-table tr, .company-table td { display: block; }
    .company-table tr { padding: .55rem .7rem; border-bottom: 1px solid var(--border); }
    .company-table tr:last-child { border-bottom: 0; }
    .company-table td { padding: .2rem 0; border: 0; }
    .company-table td:first-child { font-weight: 700; }
    .company-actions { justify-content: flex-start; }
    /* A row's ⋯ at the card's top right, not on a line of its own (not while a password is typed there). */
    .company-table tr { position: relative; }
    .company-table td.company-actions:has(> .more-menu:only-child) { position: absolute; top: .45rem; right: .6rem; padding: 0; }
}
.company-form { display: grid; gap: .7rem; max-width: 26rem; }
.company-field { display: grid; gap: .3rem; font-weight: 600; }
.company-linkbox { display: grid; gap: .5rem; max-width: 40rem; }
.company-linkbox p { margin: 0; }
.company-link-row { display: flex; gap: .4rem; }
.company-link { flex: 1; min-width: 0; font-family: var(--mono, monospace); font-size: .85rem; }
.user-company { display: block; font-size: .75rem; font-weight: 400; color: var(--muted); }
.user-menu-companies { display: grid; padding: .25rem 0; border-bottom: 1px solid var(--border); margin-bottom: .25rem; }
.user-menu-companies > p { margin: 0; padding: .2rem .6rem; }
.user-menu-item[disabled] { color: var(--text); font-weight: 700; cursor: default; }
.prefs-password { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.prefs-password .prefs-form { gap: .8rem; max-width: 24rem; }
.prefs-password label { display: grid; gap: .3rem; font-weight: 600; }

/* ---- roles (docs/auth.md → "Roles", D21) ---- */
.company-roles { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.company-roles li { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.company-attrs { width: 100%; min-width: 14rem; font: inherit; }
.role-page { display: grid; gap: .5rem; }
.role-field { display: grid; gap: .3rem; font-weight: 600; max-width: 32rem; }
.role-table th, .role-table td { padding: .45rem .6rem; vertical-align: middle; }
.role-table thead th { text-align: center; }
.role-table thead th:first-child { text-align: left; }
.role-cell { text-align: center; }
.role-cell-actions { display: flex; gap: .35rem; justify-content: flex-end; flex-wrap: wrap; }
.role-default-row th { font-style: italic; }
.role-detail > td { background: var(--surface-2); }
.role-details { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.5rem; padding: .5rem 0; }
.role-details h3 { margin: 0 0 .3rem; font-size: 1rem; }
.role-fields { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.role-fields li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8rem, 11rem); gap: .75rem; align-items: center; }
.role-fields li > span { overflow-wrap: anywhere; }
.role-is-my { list-style: none; margin: .4rem 0; padding: 0; display: grid; gap: .35rem; }
.role-is-my li { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }
.role-is-my li > select, .role-is-my li > input { width: auto; flex: 1 1 8rem; min-width: 0; }
.role-views { list-style: none; margin: 0 0 0 1.5rem; padding: 0; display: grid; gap: .2rem; }
@media (max-width: 700px) { .role-details { grid-template-columns: 1fr; } }
/* Phones: each template is a card (its name, the four boxes with their names, the buttons), no sideways scrolling. */
@media (max-width: 640px) {
    .role-table thead { display: none; }
    .role-table, .role-table tbody, .role-table td.role-cell-actions, .role-detail > td { display: block; }
    .role-table tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: .45rem .3rem; border-bottom: 1px solid var(--border); }
    .role-table tr:last-child { border-bottom: 0; }
    .role-table tr > th, .role-cell-actions, .role-detail > td { grid-column: 1 / -1; border: 0; }
    .role-table td { border: 0; }
    .role-cell::before { content: attr(data-label); display: block; font-size: .8rem; color: var(--muted); }
    .role-cell-actions { justify-content: flex-start; }
    .role-default-row td:last-child:empty { display: none; }
    .role-detail { padding: 0; }
}
/* Who made a change, under its date; the item's whole History (docs/audit.md). */
.hist-when { display: flex; flex-direction: column; min-width: 0; }
.hist-by { overflow-wrap: anywhere; }
.hist-event .hist-kind { color: var(--text); }
.ip-history { margin-top: 1.25rem; display: grid; gap: .5rem; justify-items: start; }
.ip-history > h2 { margin: 0; }
.ip-history-panel { width: 100%; border: 1px solid var(--border); border-radius: var(--radius, 8px); background: var(--surface); }
.ip-history-panel > .btn { margin: .5rem; }
/* The company's log (docs/audit.md). */
.audit-filters { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: end; margin: .75rem 0 1rem; }
.audit-filter { display: grid; gap: .2rem; font-size: .85rem; color: var(--muted); }
.audit-filter select, .audit-filter input { width: auto; min-width: 9rem; max-width: 16rem; }
.audit-table th, .audit-table td, .admin-table th, .admin-table td { padding: .45rem .6rem; }
.audit-table td { vertical-align: top; }
.audit-text { overflow-wrap: anywhere; }
#audit-more { margin-top: .75rem; }
@media (max-width: 640px) {
    .audit-table thead { display: none; }
    .audit-table, .audit-table tbody, .audit-table tr, .audit-table td { display: block; }
    .audit-table tr { padding: .5rem .7rem; border-bottom: 1px solid var(--border); }
    .audit-table td { padding: .1rem 0; border: 0; }
    .audit-filter, .audit-filter select, .audit-filter input { width: 100%; max-width: none; }
    .audit-filters > .audit-filter { flex: 1 1 100%; }
}
/* The global admin's pane (docs/admin.md). */
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--accent); text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.linklike:hover { text-decoration: underline; }
.admin-table td { vertical-align: top; }
.admin-msg { min-width: 14rem; overflow-wrap: anywhere; }
.admin-detail > td { background: var(--surface-2); }
.admin-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .2rem .8rem; margin: 0 0 .5rem; font-size: .9rem; }
.admin-facts dt { color: var(--muted); }
.admin-facts dd { margin: 0; overflow-wrap: anywhere; }
.admin-pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; max-height: 24rem; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem; margin: .3rem 0; }
@media (max-width: 640px) {
    .admin-table thead { display: none; }
    .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; }
    .admin-table tr { padding: .5rem .7rem; border-bottom: 1px solid var(--border); }
    .admin-table td { padding: .1rem 0; border: 0; text-align: left; }
    .admin-msg { min-width: 0; }
}
/* The admin pane's tabs and Statistics (admin.js, docs/admin.md): key figures as a row of numbers
   between two rules (no cards), the charts full width (ChartSvg scales), small tables side by side. */
.admin-tabs { margin: 0 0 1rem; }
.stat-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 1rem 1.5rem; margin: 0 0 2rem; padding: 1rem 0; border-block: 1px solid var(--border); }
.stat { display: grid; gap: .1rem; align-content: start; }
.stat-n { font-size: 1.7rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-label { font-weight: 600; }
.stat-vs strong { color: var(--text); font-weight: 600; }
.stat-charts { gap: 1.75rem; }
.stat-chart { margin: 0; display: grid; gap: .4rem; }
.stat-chart { overflow-x: auto; }
.stat-chart > svg { width: 100%; min-width: 36rem; height: auto; display: block; }
.stat-tops { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.25rem 2rem; }
.stat-top h3 { margin: 0 0 .3rem; font-size: 1rem; }
.stat-table { width: 100%; }
.stat-table th, .stat-table td { padding: .3rem .5rem; }
.stat-table th.num { text-align: right; }
.stat-table tbody tr { cursor: default; }
.stat-top { min-width: 0; }
.stat-key { overflow-wrap: anywhere; }
.stat-facts { font-size: 1rem; }
/* A public view (docs/public.md): the login page's card, wider. */
.public-card { max-width: 520px; gap: .75rem; }
.public-kicker { margin: 0; text-transform: none; }
.public-note { font-size: 1.05rem; font-weight: 600; background: var(--accent-soft, var(--surface-2)); border-radius: var(--radius); padding: .7rem .85rem; }
.public-fields { margin: 0; display: grid; gap: .55rem; }
.public-row { margin: 0; display: grid; grid-template-columns: minmax(7rem, 35%) minmax(0, 1fr); gap: .75rem; }
.public-row dt { color: var(--muted); }
.public-row dd { margin: 0; overflow-wrap: anywhere; }
.public-row dd img { max-width: 100%; max-height: 220px; border-radius: var(--radius); display: block; margin-bottom: .3rem; }
.public-heading { font-size: 1rem; margin: .5rem 0 0; }
.public-foot { margin-top: .5rem; border-top: 1px solid var(--border); padding-top: .6rem; }
.prop-sub { display: grid; gap: .25rem; margin-top: .5rem; }
@media (max-width: 480px) { .public-row { grid-template-columns: minmax(0, 1fr); gap: .1rem; } }

/* ---- charts (App\Engine\Chart\ChartSvg, D24) ----
   The SVG carries the light colours as attributes (for paper); these rules
   repaint it per theme. Categorical hues in a fixed order, validated for
   colour-blind readers on both surfaces (docs/views.md → "Charts"). */
:root, :root[data-theme="light"] {
    --ch-0: #2a78d6; --ch-1: #eb6834; --ch-2: #1baf7a; --ch-3: #eda100;
    --ch-4: #e87ba4; --ch-5: #008300; --ch-6: #4a3aa7; --ch-7: #e34948; --ch-other: #9aa0a8;
}
@media screen {
    :root[data-theme="dark"] {
        --ch-0: #3987e5; --ch-1: #d95926; --ch-2: #199e70; --ch-3: #c98500;
        --ch-4: #d55181; --ch-5: #008300; --ch-6: #9085e9; --ch-7: #e66767; --ch-other: #6b727c;
    }
}
@media screen and (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --ch-0: #3987e5; --ch-1: #d95926; --ch-2: #199e70; --ch-3: #c98500;
        --ch-4: #d55181; --ch-5: #008300; --ch-6: #9085e9; --ch-7: #e66767; --ch-other: #6b727c;
    }
}
svg.ch { font-family: var(--font); overflow: visible; }
.ch .ch-ink { fill: var(--text); }
.ch .ch-sub { fill: var(--muted); }
.ch .ch-grid { stroke: var(--grid-line); }
.ch .ch-axis { stroke: var(--border); }
.ch .ch-dot, .ch .ch-gap { stroke: var(--surface); }
.ch .ch-s0 { fill: var(--ch-0); } .ch .ch-s1 { fill: var(--ch-1); } .ch .ch-s2 { fill: var(--ch-2); } .ch .ch-s3 { fill: var(--ch-3); }
.ch .ch-s4 { fill: var(--ch-4); } .ch .ch-s5 { fill: var(--ch-5); } .ch .ch-s6 { fill: var(--ch-6); } .ch .ch-s7 { fill: var(--ch-7); }
.ch .ch-other { fill: var(--ch-other); }
.ch .ch-line { fill: none; }
.ch .ch-line.ch-s0 { stroke: var(--ch-0); } .ch .ch-line.ch-s1 { stroke: var(--ch-1); } .ch .ch-line.ch-s2 { stroke: var(--ch-2); } .ch .ch-line.ch-s3 { stroke: var(--ch-3); }
.ch .ch-line.ch-s4 { stroke: var(--ch-4); } .ch .ch-line.ch-s5 { stroke: var(--ch-5); } .ch .ch-line.ch-s6 { stroke: var(--ch-6); } .ch .ch-line.ch-s7 { stroke: var(--ch-7); }
.ch .ch-line.ch-other { stroke: var(--ch-other); }
/* A coloured dropdown's options (step 19c E1): the chips' colours, in both themes. */
.ch .ch-c-gray { fill: var(--opt-gray); } .ch .ch-line.ch-c-gray { stroke: var(--opt-gray); }
.ch .ch-c-blue { fill: var(--opt-blue); } .ch .ch-line.ch-c-blue { stroke: var(--opt-blue); }
.ch .ch-c-green { fill: var(--opt-green); } .ch .ch-line.ch-c-green { stroke: var(--opt-green); }
.ch .ch-c-yellow { fill: var(--opt-yellow); } .ch .ch-line.ch-c-yellow { stroke: var(--opt-yellow); }
.ch .ch-c-orange { fill: var(--opt-orange); } .ch .ch-line.ch-c-orange { stroke: var(--opt-orange); }
.ch .ch-c-red { fill: var(--opt-red); } .ch .ch-line.ch-c-red { stroke: var(--opt-red); }
.ch .ch-c-purple { fill: var(--opt-purple); } .ch .ch-line.ch-c-purple { stroke: var(--opt-purple); }
.ch .ch-c-pink { fill: var(--opt-pink); } .ch .ch-line.ch-c-pink { stroke: var(--opt-pink); }
/* Hover and keyboard focus: the bar under the pointer stays, its neighbours step back. */
.ch .ch-link { cursor: pointer; outline: none; }
.ch:has(.ch-link:hover, .ch-link:focus-visible) .ch-mark { opacity: .55; }
.ch .ch-link:hover .ch-mark, .ch .ch-link:focus-visible .ch-mark { opacity: 1; }
.ch .ch-link:focus-visible .ch-mark, .ch .ch-link:focus-visible .ch-dot { stroke: var(--text); stroke-width: 2px; }

/* ---- the template library (docs/packages.md) and the company's exports ---- */
.pkg-section { margin: 2rem 0; }
.pkg-section h2 { margin-bottom: .3rem; }
.pkg-starter .tcard-meta { flex-direction: column; align-items: flex-start; gap: 0; }
.pkg-export { display: grid; gap: .8rem; justify-items: start; }
.pkg-group { border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .8rem; display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; width: 100%; }
.pkg-group legend { font-weight: 700; padding: 0 .3rem; }
#pkg-errors ul { margin: .3rem 0 0; padding-left: 1.2rem; }
#pkg-errors code { overflow-wrap: anywhere; }
.company-exports { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.company-exports li { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: baseline; }

/* ---- "Kom igång": the guide page, its bar and the editors' help (roadmap step 19) ---- */
.guide-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
.guide-banner > span { flex: 1 1 18rem; }
.guide-progress { display: flex; align-items: center; gap: .8rem; margin: .5rem 0 1rem; font-weight: 600; }
.guide-progress meter { flex: 0 1 16rem; height: .8rem; }
.guide-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin: 1rem 0 2rem; }
.guide-ways .tcard { list-style: none; }
.guide-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.guide-chapter { margin: 0 0 2.2rem; scroll-margin-top: 4rem; }
.guide-chapter-head { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.guide-chapter-head h2 { margin: 0; font-size: 1.3rem; }
.guide-banner form { margin: 0; }
.guide-step-card { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .8rem; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: .9rem 1rem; scroll-margin-top: 1rem; }
.guide-step-card.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.guide-step-card.done { opacity: .85; }
.guide-step-card h3 { margin: 0 0 .2rem; font-size: 1.1rem; text-transform: none; letter-spacing: 0; color: var(--text); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.guide-num { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
    background: var(--accent-soft); color: var(--accent); }
.guide-step-card.done .guide-num { background: color-mix(in srgb, var(--ok) 18%, var(--surface)); color: var(--ok); }
.guide-how { margin: .4rem 0 .7rem; padding-left: 1.2rem; display: grid; gap: .2rem; }
.chip-ok { background: color-mix(in srgb, var(--ok) 15%, var(--surface)); color: var(--ok); }
.guide-tips { margin: 2rem 0; }
.guide-bar {
    position: fixed; right: 16px; bottom: calc(16px + var(--bottombar-h, 0px)); z-index: 60; width: min(24rem, calc(100vw - 32px)); max-height: calc(100vh - 32px - var(--bottombar-h, 0px)); overflow: auto;
    background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius); padding: .8rem 1rem;
    box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
}
.guide-bar.min { width: auto; padding: 0; border: 0; background: none; box-shadow: none; overflow: visible; }
.guide-pill { border: 0; border-radius: 999px; padding: .55rem 1rem; background: var(--accent); color: var(--accent-text); font-weight: 700; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, .25); }
.guide-bar-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.guide-bar-tools { display: flex; align-items: center; gap: .3rem; }
.guide-bar h2 { font-size: 1.05rem; margin: .3rem 0; }
.guide-bar .guide-how { font-size: .92rem; }
.guide-done { font-weight: 700; color: var(--ok); }
.guide-msg:empty { display: none; }
/* "Visa mig": the control to use pulses for a moment. */
.guide-spot { animation: guide-spot 1s ease-in-out 3; outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
@keyframes guide-spot { 50% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .guide-spot { animation: none; } }
@media print { .guide-bar { display: none; } }
.with-help { display: flex; align-items: center; gap: .35rem; }
.help { position: relative; display: inline-flex; }
.help-btn { width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--muted);
    font-size: .8rem; font-weight: 700; line-height: 1; cursor: pointer; padding: 0; }
.help-btn:hover, .help-btn[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
.help-pop { position: absolute; top: calc(100% + 6px); left: -.5rem; z-index: 40; width: min(20rem, calc(100vw - 48px)); font-size: .88rem; font-weight: 400;
    background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .75rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .15); }
.help-pop p { margin: 0 0 .3rem; white-space: normal; }
/* In the right-hand properties panels the text opens to the left, inside the window. */
#ed-props .help-pop, #ve-props .help-pop, #re-props .help-pop { left: auto; right: -.5rem; }
/* Automations (docs/automations.md): a table's rules and buttons, one edited at a time in its card. */
.auto-list, .auto-all, .auto-all-list, .auto-actions, .auto-set-list { list-style: none; padding: 0; margin: 0; }
.auto-list { display: flex; flex-direction: column; gap: .6rem; margin: 1rem 0; max-width: 60rem; }
.auto-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: .7rem .9rem; }
.auto-card.open { border-color: var(--accent); }
.auto-card.off .auto-name, .auto-card.off .auto-sum { color: var(--muted); }
.auto-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.auto-head .btn { margin-left: auto; }
.auto-name { font-weight: 700; font-size: 1.05rem; }
.auto-sum { margin: .25rem 0; }
.auto-card > .small { margin: 0; }
.auto-part { border: 0; border-top: 1px solid var(--border); padding: .7rem 0 .2rem; margin: .6rem 0 0; min-width: 0; }
.auto-part > legend { font-weight: 700; padding: 0 .5rem 0 0; }
.auto-part > select, .auto-set-add { width: auto; max-width: 100%; }
.auto-row { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem .75rem; }
.auto-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: .2rem; margin: .4rem 0; min-width: 0; max-width: 100%; }
.auto-field > span, .auto-label { font-weight: 600; font-size: .85rem; margin: 0; }
.auto-field select { width: auto; min-width: 0; max-width: 100%; justify-self: start; }
/* "Only if" is the part's heading: the filter editor's own is one too many. */
.auto-part .rel-filter > label:first-child { display: none; }
.auto-grow { flex: 1 1 16rem; }
.auto-narrow input { width: 7rem; }
.auto-sub { margin-top: .4rem; }
.auto-checks { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin: .2rem 0 .4rem; }
.auto-actions { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .6rem; }
.auto-action { border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem .7rem; background: var(--bg); }
.auto-action-head { display: flex; align-items: center; gap: .2rem; }
.auto-action-head strong { margin-right: auto; }
.auto-set-list { display: flex; flex-direction: column; gap: .35rem; margin: .3rem 0; }
.auto-set-row { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; border: 1px solid var(--border); border-radius: 6px; padding: .3rem; background: var(--surface); }
.auto-set-row > select { width: auto; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.auto-set-row .auto-value { flex: 1 1 14rem; min-width: 0; }
.auto-set-row .auto-value .ff { margin: 0; }
.auto-set-row .auto-value .ff-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.auto-set-row .auto-add-n { width: 7rem; }
.auto-set-row .hint { margin: 0; }
.auto-insert { width: auto; font-weight: 400; font-size: .8rem; padding: .1rem .3rem; }
.auto-buttons { margin-top: .8rem; }
.auto-buttons .auto-delete { margin-left: auto; }
.auto-runs { margin-top: 2rem; max-width: 60rem; }
.auto-runs h2 { font-size: 1.1rem; margin-bottom: 0; }
.auto-all { display: flex; flex-direction: column; gap: .6rem; margin: 1rem 0; max-width: 60rem; }
.auto-all-table { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: .6rem .9rem; }
.auto-all-head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.auto-all-head .btn { margin-left: auto; }
.auto-all-list { margin-top: .4rem; display: flex; flex-direction: column; gap: .2rem; }
.auto-all-list li { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.auto-all-list .auto-name { font-size: 1rem; font-weight: 600; }
/* An automation's button among the action buttons: it does something at once, so it reads as a button to press. */
.item-quick .btn-run, .rl-row-actions .btn-run { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.qr-action-form { display: contents; }
.qr-action-form .qr-action { width: 100%; cursor: pointer; font: inherit; }
.auto-target-filter .rel-filter > label:first-child { display: none; }
/* A dropdown's allowed changes (a status workflow) in the template editor's properties. */
.transitions > summary { font-weight: 600; font-size: .85rem; cursor: pointer; margin-bottom: .25rem; }
.transitions > summary .chip { margin-left: .4rem; }
.transitions .transition-from { flex: 1 1 100%; font-size: .85rem; font-weight: 600; overflow-wrap: anywhere; }
/* The company page's API tokens (docs/api.md): the example call under a new token. */
.api-example { margin: .5rem 0 0; padding: .5rem .6rem; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
#company-api code { font-size: .85rem; }

/* ---- the table header (templates/_hub.blade.php, D32): every page of a table hangs off it ---- */
.hub { display: grid; gap: .35rem; margin-bottom: 1rem; }
.hub-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .9rem; }
.hub-title h1 { overflow-wrap: anywhere; }
.hub-count { font-size: .95rem; }
.hub-new { margin-left: auto; align-self: center; }
.hub-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); overflow-x: auto; margin-top: .25rem; scrollbar-width: thin; }
.hub-tab {
    padding: .5rem .8rem; color: var(--muted); font-weight: 600; text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.hub-tab:hover { color: var(--text); }
.hub-tab[aria-current] { color: var(--text); border-bottom-color: var(--accent); }
.editor-main > .hub { padding-top: 1rem; margin-bottom: .5rem; }
/* The editor is as wide as the window, but its table header stays on the pages' edge (rule 5), so it
   doesn't jump between Records and Design: .editor-main's padding is the .page's. */
.editor-main > .hub { margin-left: max(0px, (100% + 32px - var(--page-wide-max, 1400px)) / 2); max-width: calc(var(--page-max, 1100px) - 32px); }
@media (max-width: 600px) { .hub-new { margin-left: 0; flex-basis: 100%; justify-content: center; } }
.page-head-sub { justify-content: flex-end; margin-bottom: .25rem; }

/* ---- Home (start.blade.php, step 19c C6) ---- */
.start-scan { font-size: 1.1rem; padding: .8rem 1.6rem; margin: .5rem 0 .5rem; }
.start-section { margin-top: 1.75rem; }
.start-section h2 { font-size: 1.1rem; margin: 0 0 .2rem; }
@media (max-width: 600px) {
    /* On the floor the phone is in one hand: Scan is the big thing. */
    .start-scan { display: flex; justify-content: center; width: 100%; min-height: 4rem; font-size: 1.2rem; }
}

/* ---- the phone's bottom bar (layouts/app.blade.php, step 19c C7) ---- */
.bottombar { display: none; }
.bb-icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) {
    :root { --bottombar-h: calc(60px + env(safe-area-inset-bottom)); }
    body:has(.bottombar) { padding-bottom: var(--bottombar-h); }
    .topnav { display: none; }
    .topbar > .brand { margin-right: auto; }
    .bottombar {
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; height: var(--bottombar-h);
        padding: 0 4px env(safe-area-inset-bottom); background: var(--surface); border-top: 1px solid var(--border);
    }
    .bb-item {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 60px; min-width: 0;
        color: var(--muted); text-decoration: none; font-size: .7rem; font-weight: 600; cursor: pointer; list-style: none;
    }
    .bb-item > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bb-item[aria-current], .bb-menu[open] > .bb-item { color: var(--accent); }
    /* Scan: the largest, raised in the middle. */
    .bb-scan { color: var(--accent-text); }
    .bb-scan .bb-icon {
        width: 52px; height: 52px; padding: 12px; margin-top: -22px; border-radius: 50%; background: var(--accent);
        box-shadow: 0 4px 14px rgba(0, 0, 0, .25); stroke: var(--accent-text);
    }
    .bb-scan > span { color: var(--text); }
    .bb-scan[aria-current] > span { color: var(--accent); }
    .bottombar-kiosk { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(4.5rem, 1fr); overflow-x: auto; }
    .bb-menu { position: static; display: block; }
    .bb-menu > summary.bb-item { display: flex; width: auto; height: 60px; border: 0; border-radius: 0; background: none; font-size: .7rem; font-weight: 600; line-height: normal; color: var(--muted); }
    .bb-menu[open] > summary.bb-item { color: var(--accent); background: none; }
    .bb-menu > summary::-webkit-details-marker { display: none; }
    .bb-menu > .more-menu-panel { top: auto; right: 8px; left: auto; bottom: calc(var(--bottombar-h) + 8px); position: fixed; }
}
@media print { .bottombar { display: none !important; } }
.print-page .bottombar { display: none; }

/* ---- "Advanced" folds and the settings' sections (template-editor.js, step 19c D/F) ---- */
.prop-advanced { margin: 1rem 0 .5rem; border-top: 1px solid var(--border); padding-top: .6rem; }
.prop-advanced > summary, .set-advanced > summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.prop-advanced[open] > summary { margin-bottom: .6rem; }
.set-section { margin: 0 0 1.75rem; }
/* Settings → "When scanned" with what a scan shows on a phone beside it (step 19c F2). */
.settings { max-width: 1060px; }
.settings > .set-section { max-width: 720px; }
.settings > .set-scan { max-width: none; display: grid; grid-template-columns: minmax(0, 720px) minmax(0, 300px); column-gap: 2rem; align-items: start; }
.set-scan > * { grid-column: 1; }
.set-scan > .scan-preview { grid-column: 2; grid-row: 1 / span 12; position: sticky; top: 4.5rem; }
.scan-preview h4 { margin: 0 0 .35rem; font-size: .95rem; }
.scan-preview .sample-pick { display: flex; align-items: center; gap: .4rem; font-size: .85rem; margin-bottom: .35rem; }
.scan-preview .sample-pick select { width: auto; max-width: 12rem; padding: .2rem .4rem; }
.scan-phone { margin: .5rem 0 0; font-size: .85rem; }
.scan-phone .qr-actions-page p { margin: 0; }
.scan-phone-title { font-size: 1.3rem; font-weight: 700; line-height: 1.2; margin: .15rem 0 0 !important; overflow-wrap: anywhere; }
.scan-phone .qr-action-list { margin-top: .75rem; gap: .5rem; }
.scan-phone .qr-action { min-height: 2.75rem; font-size: 1rem; }
.scan-phone .banner { margin: .5rem 0 0; }
@media (max-width: 1000px) {
    .settings > .set-scan { display: block; }
    .set-scan > .scan-preview { position: static; }
}
.set-section > h3, .set-advanced > summary > h3 { font-size: 1.05rem; margin: 0 0 .6rem; }
.set-advanced > summary > h3 { display: inline; color: var(--text); }
.set-advanced[open] > summary { margin-bottom: .6rem; }
#lay-auto.active:disabled { opacity: 1; color: var(--accent); border-color: var(--accent); cursor: default; }

/* ---- a record on a phone (item-page.js, step 19c G1): title, action buttons, values ---- */
@media (max-width: 600px) {
    /* Edit and ⋯ stay beside the title, so the action buttons come right under it. */
    .item-title-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
    .item-actions { width: auto; flex-wrap: nowrap; }
    /* Read mode: one sheet from edge to edge, each value on a line beside its name. */
    .qr-form.qr-display { margin-left: -16px; margin-right: -16px; border-left: 0; border-right: 0; border-radius: 0; padding: .1rem 16px .4rem; }
    .qr-form.qr-display .qr-grid { gap: 0; }
    /* While editing, the Save bar rests on the bottom bar even when the record is short. */
    .savebar { position: fixed; left: 0; right: 0; bottom: var(--bottombar-h, 0px); margin: 0; }
    #item-page.has-savebar { padding-bottom: 4.5rem; }
    .qr-display .ffd { padding: .55rem 0; border-bottom: 1px solid var(--border); }
    .qr-form.qr-display .qr-grid.has-phone { row-gap: 0; column-gap: .75rem; }
    .qr-display .ffd:not(.ff-longtext, .ff-subtable, .ff-photo, .ff-file, .ff-signature, .ff-phone-part) {
        display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); column-gap: .75rem; align-items: baseline;
    }
    .qr-display .ffd > .ff-label { margin: 0; font-size: .85rem; font-weight: 500; white-space: normal; overflow: visible; }
    .qr-display .ffd > .ffd-value { grid-column: 2; }
    .qr-display .ff-related, .qr-display .ff-history { padding: .75rem 0; border-bottom: 1px solid var(--border); }
    .qr-form.qr-display .qr-grid > :last-child { border-bottom: 0; }
    .qr-display .qr-section { border: 0; border-radius: 0; padding: .9rem 0 0; }
    .qr-display .qr-section > legend { padding: 0; font-size: 1rem; }
    .qr-display .rl-scroll { overflow: visible; }
    /* "Linked records" under it: rows, not boxes. */
    .linked-grid { gap: 0; }
    .linked-grid .ff-related { background: none; border: 0; border-radius: 0; border-bottom: 1px solid var(--border); padding: .75rem 0; }
}

/* ---- narrow lists as stacked rows (step 19c G2, docs/ui.md → "On a phone") ----
   A table with .stack-rows (the record list, dashboard lists, related lists, Rows) reads, under
   600px, as one row per record: its title cell first, then each cell with a data-label as a
   "Field: value" line (values.js stackClass: three of them; `stack-off` the rest). No box. */
@media (max-width: 600px) {
    table.stack-rows, .stack-rows > tbody, .stack-rows > tbody > tr > td { display: block; }
    .stack-rows > thead { display: none; }
    .stack-rows > tbody > tr { display: block; padding: .55rem 0; border-bottom: 1px solid var(--border); }
    .stack-rows > tbody > tr:last-child { border-bottom: 0; }
    .stack-rows > tbody > tr > td { padding: 0; border: 0; text-align: left; white-space: normal; font-size: .9rem; line-height: 1.45; }
    .stack-rows > tbody > tr > td.rl-item, .stack-rows > tbody > tr > td.title-cell, .stack-rows > tbody > tr > td.stack-title { font-size: 1rem; font-weight: 600; }
    .stack-rows > tbody > tr > td.num { text-align: left; }
    .stack-rows td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-weight: 400; }
    .stack-rows > tbody > tr > td:empty, .stack-rows > tbody > tr > td.stack-off { display: none; }
    .stack-rows .rl-placeholder td { padding: .4rem; }
    /* The record list: the tick box beside the row. */
    .data-table.stack-rows > tbody > tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .7rem; padding: .6rem .25rem; }
    .data-table.stack-rows > tbody > tr > td { grid-column: 2; }
    .data-table.stack-rows > tbody > tr > td.pick-cell { grid-column: 1; grid-row: 1 / span 9; width: auto; padding-top: .2rem; }
    .table-wrap:has(> .stack-rows) { overflow: visible; background: none; border: 0; border-radius: 0; border-top: 1px solid var(--border); }
}

/* A switch (a checkbox with role=switch, e.g. the scanner's "Scan several"): the box itself is hidden. */
.switch { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; cursor: pointer; user-select: none; }
.switch > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; flex: none; width: 2.6rem; height: 1.5rem; border-radius: 99px; background: var(--border); transition: background .15s; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.5rem - 6px); height: calc(1.5rem - 6px); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .15s; }
.switch > input:checked + .switch-track { background: var(--accent); }
.switch > input:checked + .switch-track::after { transform: translateX(1.1rem); }
.switch > input:focus-visible + .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .switch-track, .switch-track::after { transition: none; } }

/* ---- the scanner on a phone (step 19c G3): the camera fills the screen between the bars ---- */
@media (max-width: 600px) {
    .scan-page { padding: 0 0 1rem; }
    .scanner { max-width: none; gap: .6rem; }
    .scanner > :not(.scan-cam) { margin-left: 16px; margin-right: 16px; }
    .scanner > .crumbs { margin-top: .6rem; }
    .scanner > h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .scan-cam { width: 100%; aspect-ratio: auto; height: max(18rem, calc(100dvh - 52px - var(--bottombar-h, 0px) - 3.4rem)); border-radius: 0; }
    /* Scanning several: the list under the camera stays in sight. */
    .scanner.collecting .scan-cam { height: max(16rem, 52dvh); }
}