/* Light, calm surfaces; inventory status in solid, scannable colours. */
:root {
    --page: #F6F5F0;
    --surface: #FFFFFF;
    --border: #E6E4DC;
    --text: #14142B;
    --text-secondary: #5D5C78;
    --brand: #070033;
    --brand-soft: #ECEAF9;

    /* Status: red = order now, amber = order soon, green = stocked. */
    --red: #E5484D;
    --amber: #F5A524;
    --amber-ink: #6E4A00;
    --green: #5B57D1;
    --gray: #B4B2C2;

    --radius: 14px;

    /* Widths: everything stretches to the page, up to these (set on the App theme page). */
    --page-max: 2400px;      /* the whole content area */
    --card-max: 1600px;      /* cards */
    --list-max: 1600px;      /* lists and tables (bands) */
    --layout-max: 2400px;    /* side-by-side layouts and grids of cards */
    --notice-max: 460px;    /* notices */
    --text-max: 900px;       /* page descriptions, kept to a readable line length */

    /* Text versions of the accent, and the softer fills, so each theme can set its own. */
    --brand-ink: #2E2A7A;
    --warning-ink: #8A5A00;
    --border-strong: #CFCCC1;
    --notice-bg: #FFF1CC;
    --notice-border: #F3DC92;
    --notice-ink: #5A3D00;
    --fill-muted: #EFEDE6;
    --par-line: #14142B;
    --danger-soft: #FDE7E5;
    --danger-border: #F3B6B2;
    --danger-ink: #9F1D1D;
    --gap-ink: #B42318;
    --today: #F3F1FC;
    --hairline: #F1EFE9;
    --backdrop: rgba(7, 0, 51, .45);
    --workspace: #E8E6DE;

    /* The loading mark (Shared/Magic8Loader.razor). */
    --loader-ink: #000522;
    --loader-spark: #F5A524;

    /* The refresh: navy from the app icon, the spark for what needs someone now,
       and soft status tints with dark text. */
    --now-soft: #FDE7E5;
    --now-ink: #9F1D1D;
    --soon-soft: #FFF1CC;
    --soon-ink: #6E4A00;
    --ok-soft: #ECEAF9;
    --ok-ink: #2E2A7A;
    --danger-solid: #C42B30;
    --hero: #070033;
    --hero-border: #070033;
    --hero-muted: #C9C8E8;
    --spark: #FFD23F;
    --nav-bg: #070033;
}

/* Dark mode: on when the device asks for it (unless switched to Light), or when switched to Dark.
   Position colors from Sling and the solid status colors stay as they are. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --page: #0B0A1C;
        --surface: #15142B;
        --border: #2B2948;
        --text: #ECEBF7;
        --text-secondary: #A6A5C4;
        --brand: #1E9F63;
        --brand-soft: #2D5C46;
        --brand-ink: #1E9F63;
        --red: #F06A6E;
        --amber: #E9B34E;
        --amber-ink: #2B1C00;
        --gray: #5F5D7A;
        --warning-ink: #F5C35A;
        --border-strong: #45436A;
        --notice-bg: #432904;
        --notice-border: #6B5524;
        --notice-ink: #F5C359;
        --fill-muted: #24233F;
        --par-line: #ECEBF7;
        --danger-soft: #3B1E24;
        --danger-border: #7A3A44;
        --danger-ink: #F5B5B5;
        --gap-ink: #F5B5B5;
        --today: #1B1A3A;
        --hairline: #1F1E38;
        --backdrop: rgba(0, 0, 0, .65);
        --workspace: #1A1933;
        --loader-ink: #45436A;
        --loader-spark: #1E9F63;
        --green: #1E9F63;
        --now-soft: #451621;
        --now-ink: #FF5147;
        --soon-soft: #432904;
        --soon-ink: #FFCE52;
        --ok-soft: #22583F;
        --ok-ink: #4CE69E;
        --danger-solid: #C42B30;
        --hero: #0B0A1C;
        --hero-border: #2A2766;
        --hero-muted: #C9C8E8;
        --spark: #1E9F63;
        --nav-bg: #0D0C22;
}
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --page: #0B0A1C;
    --surface: #15142B;
    --border: #2B2948;
    --text: #ECEBF7;
    --text-secondary: #A6A5C4;
    --brand: #1E9F63;
    --brand-soft: #2D5C46;
    --brand-ink: #1E9F63;
    --red: #F06A6E;
    --amber: #E9B34E;
    --amber-ink: #2B1C00;
    --gray: #5F5D7A;
    --warning-ink: #F5C35A;
    --border-strong: #45436A;
    --notice-bg: #432904;
    --notice-border: #6B5524;
    --notice-ink: #F5C359;
    --fill-muted: #24233F;
    --par-line: #ECEBF7;
    --danger-soft: #3B1E24;
    --danger-border: #7A3A44;
    --danger-ink: #F5B5B5;
    --gap-ink: #F5B5B5;
    --today: #1B1A3A;
    --hairline: #1F1E38;
    --backdrop: rgba(0, 0, 0, .65);
    --workspace: #1A1933;
    --loader-ink: #45436A;
    --loader-spark: #1E9F63;
    --green: #1E9F63;
    --now-soft: #451621;
    --now-ink: #FF5147;
    --soon-soft: #432904;
    --soon-ink: #FFCE52;
    --ok-soft: #22583F;
    --ok-ink: #4CE69E;
    --danger-solid: #C42B30;
    --hero: #0B0A1C;
    --hero-border: #2A2766;
    --hero-muted: #C9C8E8;
    --spark: #1E9F63;
    --nav-bg: #0D0C22;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--page);
    color: var(--text);
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.45;
}

/* --- Phones and the Home Screen app ------------------------------------- */
/* Text stays its size when the phone turns; a tap doesn't flash gray or zoom on a second tap. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, select, label, summary, [role=button] { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
/* iPhone zooms into any field whose text is under 16px, and doesn't zoom back out. */
@media (pointer: coarse) {
    input, select, textarea { font-size: 16px !important; }
}

/* Space Grotesk for headings and the numbers people act on; DM Sans for everything read. */
h1, h2, h3, .value, .next-order .big, .band-head, .m8-logo { font-family: "Space Grotesk", "DM Sans", system-ui, sans-serif; }
h1 { font-size: 30px; margin: 0; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
h1:focus { outline: none; }
h2 { font-size: 18px; margin: 6px 0 0; font-weight: 600; letter-spacing: -.01em; }
a { color: inherit; text-decoration: none; }

/* --- Shell ------------------------------------------------------------- */
.shell { display: flex; min-height: 100vh; min-height: 100dvh; }

/* The navy menu, the same in both themes. Sections are labelled; the page you're on
   gets the spark. */
.sidebar {
    width: 248px;
    flex-shrink: 0;
    background: var(--nav-bg);
    color: #D9D8F0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 14px 18px;
    position: sticky;     /* the menu stays put while a long page scrolls */
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar .brand { padding: 22px 0 14px; font-size: 22px; }
.sidebar .m8-logo { background: transparent; padding-left: 10px; }
.sidebar .nav-label { margin: 16px 0 4px; padding: 0 10px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8A89B8; }
.sidebar a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; color: #D9D8F0; }
.sidebar a::before { content: ""; flex: 0 0 12px; height: 12px; }
.sidebar a:hover { color: #FFFFFF; background: rgba(255, 255, 255, .06); }
.sidebar a.active { color: #FFFFFF; background: rgba(255, 255, 255, .1); font-weight: 600; }
.sidebar a.active::before {
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='70 5 26 26'%3E%3Cpath d='M83 5 Q84.9 16.1 96 18 Q84.9 19.9 83 31 Q81.1 19.9 70 18 Q81.1 16.1 83 5 Z' fill='%23FFD23F'/%3E%3C/svg%3E");
}
.sidebar .logout { margin-top: 6px; padding: 8px 10px; }
.sidebar .logout button.link { color: #A9A8D0; }
.sidebar .logout button.link:hover { color: #FFFFFF; }
.sidebar .menu-close { display: none; }

main {
    flex: 1;
    min-width: 0;
    max-width: var(--page-max);
    padding: 34px 40px 48px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Phone only: the top bar and the tab bar along the bottom. */
.topbar, .tabbar { display: none; }

/* --- Building blocks --------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.card.compact { padding: 10px 14px; }
button.card, a.card { display: block; width: 100%; text-align: left; color: inherit; font: inherit; cursor: pointer; }
/* A clickable card that lays its contents out as a row: label left, pill right. */
button.card.spread, a.card.spread { display: flex; flex-wrap: nowrap; }
button.card.spread > :first-child { min-width: 0; }
.card.spread .chip { flex-shrink: 0; }
.card.selected { outline: 2px solid var(--brand-ink); }

/* List + detail pages: side by side on a wide screen. On a narrow one the
   detail would land below a long list, out of sight, so it replaces the list
   and a back link returns to it. */
.back-link { display: none; text-align: left; }

.heading { font-size: 14px; color: var(--text-secondary); margin: 0; }
.value { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.small { font-size: 12px; color: var(--text-secondary); }
.muted { color: var(--text-secondary); }
.bold { font-weight: 600; }

.critical { color: var(--red); }
.warning { color: var(--warning-ink); }
.healthy { color: var(--green); }

.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.scroller { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; }
.scroller > * { flex: 0 0 auto; min-width: 120px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.split.rail { grid-template-columns: 260px 1fr; }
.cols { display: grid; gap: 14px; align-items: center; }

button, .button {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: 12px;
    padding: 9px 16px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
button:hover, .button:hover { border-color: var(--text-secondary); }
button:disabled { opacity: .5; cursor: default; }
button.primary, .button.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
button.danger { background: var(--danger-solid); border-color: var(--danger-solid); color: #fff; }
button.link { background: none; border: 0; padding: 0; color: var(--text-secondary); }
button.small-btn { padding: 4px 10px; font-size: 13px; }

input, select {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 12px;
    font: inherit;
    max-width: 100%;
}
input[type=number] { width: 90px; }
input[type=search] { width: 220px; }

.notice { background: var(--notice-bg); border: 1px solid var(--notice-border); color: var(--notice-ink); border-radius: var(--radius); padding: 12px 16px; }

/* --- Status ------------------------------------------------------------ */
.chip { display: inline-block; min-width: 64px; text-align: center; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.chip.now { background: var(--now-soft); color: var(--now-ink); }
.chip.soon { background: var(--soon-soft); color: var(--soon-ink); }
.chip.stocked { background: var(--ok-soft); color: var(--ok-ink); }
.chip.inactive { background: var(--fill-muted); color: var(--text-secondary); }

.band { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.band-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; font-weight: 600; font-size: 16px; background: var(--surface); }
.band-head.now { background: var(--now-soft); color: var(--now-ink); }
.band-head.soon { background: var(--soon-soft); color: var(--soon-ink); }
.band-head.stocked { background: var(--ok-soft); color: var(--ok-ink); }
.band-row { display: grid; grid-template-columns: minmax(0, 1.6fr) 1fr 1fr auto; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--hairline); }
.band-row:first-of-type { border-top: 0; }
.band-note { padding: 12px 16px; color: var(--text-secondary); }

/* A band whose head opens and closes it (Inventory's categories). */
button.band-toggle { width: 100%; justify-content: flex-start; gap: 10px; border: 0; border-radius: 0; padding: 12px 16px; text-align: left; color: var(--text); }
button.band-toggle:hover { background: var(--page); }
.band-toggle .count { font-family: "DM Sans", system-ui, sans-serif; font-weight: 500; font-size: 13px; color: var(--text-secondary); }
.band-toggle .band-summary { margin-left: auto; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.band-toggle .band-summary .chip { min-width: 0; font-family: "DM Sans", system-ui, sans-serif; }
.chevron { flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .16s ease; margin-right: 2px; }
.chevron.open { transform: rotate(45deg); }

/* The next order: the navy card at the top of the Order page. */
.next-order { background: var(--hero); border: 1px solid var(--hero-border); border-radius: 22px; padding: 24px 28px; color: #FFFFFF; gap: 12px; }
.next-order .big { font-size: 34px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.next-order .muted, .next-order .small { color: var(--hero-muted); }
.next-order .hero-label { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--spark); }
.next-order .hero-label::before {
    content: ""; width: 13px; height: 13px;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='70 5 26 26'%3E%3Cpath d='M83 5 Q84.9 16.1 96 18 Q84.9 19.9 83 31 Q81.1 19.9 70 18 Q81.1 16.1 83 5 Z' fill='%23FFD23F'/%3E%3C/svg%3E");
}
.next-order a { color: var(--spark); }

/* Stock bars: fill coloured by band, dark tick at PAR. */
.bar { position: relative; height: 10px; background: var(--fill-muted); border-radius: 999px; }
.bar .fill { height: 100%; border-radius: 999px; }
.bar .fill.now { background: var(--red); }
.bar .fill.soon { background: var(--amber); }
.bar .fill.stocked { background: var(--green); }
.bar .fill.inactive { background: var(--gray); }
.bar .par { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--par-line); }
.stock-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(120px, 2fr) 84px 70px auto; gap: 12px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--border); }

.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filters button { border-radius: 999px; padding: 7px 14px; }
.filters button.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* --- Login ------------------------------------------------------------- */
.login { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login > .card { width: 100%; max-width: 360px; }
.login form { width: 100%; }
.login input[readonly] { background: var(--fill-muted); color: var(--text-secondary); }
/* "Continue with Google / Microsoft": full width, the provider's mark before the words. */
.sign-in-with { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 44px; }
.sign-in-with svg { flex: none; }
.sign-in-or { margin: 4px 0 0; }
/* Pressed and on its way: dimmed, can't be pressed again, and a spinner after the words. */
.login button[aria-busy=true] { opacity: .75; cursor: progress; pointer-events: none; }
.login button[aria-busy=true]::after {
    content: ""; display: inline-block; width: 1em; height: 1em; margin-left: 8px; vertical-align: -0.15em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: login-spin .7s linear infinite;
}
@keyframes login-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .login button[aria-busy=true]::after { animation-duration: 2s; } }

/* --- Phone ------------------------------------------------------------- */
@media (max-width: 900px) {
    /* A top bar with the logo, a tab bar along the bottom, and the full menu behind More. */
    .shell { flex-direction: column; }
    /* With the page drawn edge to edge (viewport-fit=cover), nothing sits under the notch, the
       status bar or the home bar, upright or sideways. */
    .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
              padding: calc(14px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); }
    .topbar .m8-logo { font-size: 18px; }
    .topbar .location-select { width: auto; margin: 0; border-radius: 999px; }
    .sidebar { display: none; }
    .shell.menu-open .sidebar { display: flex; position: fixed; inset: 0; z-index: 50; width: auto; height: auto; overflow-y: auto; overscroll-behavior: contain;
                                padding: env(safe-area-inset-top) max(14px, env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
    .shell.menu-open .sidebar .menu-close { display: block; position: absolute; top: calc(16px + env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); background: transparent; border-color: #2A2766; color: #FFFFFF; }
    .shell.menu-open .sidebar .theme-switch { margin: 16px 10px 0; }
    .tabbar {
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
        padding: 6px max(6px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
        background: var(--surface); border-top: 1px solid var(--border);
    }
    .tabbar a, .tabbar button {
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        min-height: 52px; padding: 0; border: 0; border-radius: 12px; background: transparent;
        color: var(--text-secondary); font-size: 11px; font-weight: 600;
    }
    .tabbar a.active { color: var(--brand-ink); }
    .tabbar a, .sidebar a { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
    .tabbar svg { width: 24px; height: 24px; }
    main { padding: 16px max(16px, env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
    h1 { font-size: 26px; }
    .next-order { padding: 20px; border-radius: 20px; }
    .next-order .big { font-size: 26px; }
    .split, .split.rail { grid-template-columns: 1fr; }
    .split.rail.has-detail > :first-child { display: none; }
    .back-link { display: block; }
    .cols { grid-template-columns: 1fr !important; gap: 4px; }
    .band-row { grid-template-columns: minmax(0, 1fr) auto; }
    .band-row .hide-phone { display: none; }
    .stock-row { grid-template-columns: minmax(0, 1fr) 80px auto; }
    .stock-row .bar-cell, .stock-row .hide-phone { grid-column: 1 / -1; }
}

#blazor-error-ui { background: var(--notice-bg); color: var(--notice-ink); }
.blazor-error-boundary { background: var(--red); padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "An error has occurred."; }

/* --- Cook book ---------------------------------------------------------- */
.recipe-row { display: grid; grid-template-columns: minmax(0, 1.6fr) auto 70px auto; gap: 12px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--border); }
.recipe-row select.unit { width: auto; min-width: 0; padding: 7px 6px; }
textarea { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; font: inherit; width: 100%; resize: vertical; }
@media (max-width: 800px) {
    .recipe-row { grid-template-columns: minmax(0, 1fr) auto auto; }
}

/* --- Insights ----------------------------------------------------------- */
.insight-row { display: grid; grid-template-columns: minmax(0, 1.6fr) 80px 70px 70px minmax(120px, 1fr); gap: 12px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--border); }
@media (max-width: 900px) {
    .insight-row { grid-template-columns: minmax(0, 1fr) auto auto; }
    .insight-row > :nth-child(2), .insight-row > :nth-child(3) { display: none; }
}

/* --- Folders (Source guide) -------------------------------------------- */
details.folder { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
details.folder > summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 14px; cursor: pointer; list-style: none; }
details.folder > summary::-webkit-details-marker { display: none; }
details.folder > summary::before { content: "▸"; color: var(--text-secondary); margin-right: 2px; }
details.folder[open] > summary::before { content: "▾"; }
details.folder > summary > :first-of-type { flex: 1; }
details.folder > button.card { border: 0; border-top: 1px solid var(--border); border-radius: 0; }
details.folder > button.card:last-child { border-radius: 0 0 var(--radius) var(--radius); }

/* --- Amounts by size (Cook book) ----------------------------------------- */
.size-row { display: grid; grid-template-columns: minmax(0, 1.3fr) 90px repeat(var(--sizes, 1), minmax(120px, 1fr)); gap: 12px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--border); overflow-x: auto; }
.size-row input[type=number] { width: 70px; }

/* --- Location selector ---------------------------------------------------- */
.location-select { margin: 0 0 6px; width: 100%; font-weight: 600; }
.sidebar .location-select { background: #110B4A; border-color: #2A2766; color: #FFFFFF; }

/* --- Toast menu board -------------------------------------------------------- */
.split.board { grid-template-columns: minmax(0, 1fr) 340px; }
.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pos-tile { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; min-height: 86px; padding: 10px; border: 1px solid var(--border); border-left: 6px solid #ccc; border-radius: 8px; background: var(--surface); }
.pos-tile.selected { outline: 2px solid var(--brand-ink); }
.pos-tile .flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: auto; }
.flag { font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.flag.info { background: var(--fill-muted); color: var(--text-secondary); }
.flag.warning { background: var(--soon-soft); color: var(--soon-ink); }
.flag.alert { background: var(--now-soft); color: var(--now-ink); }
.flag.ok { background: var(--ok-soft); color: var(--ok-ink); }
.flag-detail.info { background: var(--page); border-color: var(--border); color: var(--text); }
.flag-detail.alert { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger-ink); }

/* --- Price alerts ----------------------------------------------------------- */
.alert-row { display: grid; grid-template-columns: 60px minmax(0, 1.4fr) minmax(0, 1.4fr) 70px 80px; gap: 12px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--border); }

@media (max-width: 900px) {
    .split.board { grid-template-columns: 1fr; }
    .alert-row { grid-template-columns: 54px minmax(0, 1fr) auto; }
    .alert-row > :nth-child(3) { grid-column: 2 / -1; }
}

/* --- Orders and Customer favorites ------------------------------------------ */
details.order + details.order { border-top: 1px solid var(--border); }
details.order > summary { display: grid; grid-template-columns: 64px 40px minmax(0, 1fr) 110px 72px; gap: 12px; align-items: center; padding: 9px 14px; cursor: pointer; list-style: none; }
details.order > summary::-webkit-details-marker { display: none; }
details.order[open] > summary { background: var(--brand-soft); }
.order-items { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-items .chip { min-width: 0; margin-left: 6px; }
.order-total { text-align: right; }
.order-body { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; padding: 10px 14px 14px; border-top: 1px solid var(--hairline); }
.order-line { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 8px; padding: 4px 0; }
.money-row { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.money-row.total { font-weight: 600; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 6px; }
.favorite-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 70px; gap: 12px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--border); }
.favorite-row:first-child { border-top: 0; }
.guest-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.guest-favorite { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 6px; padding: 2px 0; }

@media (max-width: 900px) {
    details.order > summary { grid-template-columns: 58px minmax(0, 1fr) auto; }
    details.order > summary .hide-phone { display: none; }
    .order-body { grid-template-columns: 1fr; }
    .favorite-row { grid-template-columns: minmax(0, 1fr) auto; }
    .favorite-row > :last-child { display: none; }
}

/* --- Ingredient search suggestions (Cook book) -------------------------------- */
.typeahead { position: relative; min-width: 0; }
.typeahead input { width: 100%; }
.typeahead-list { position: absolute; z-index: 10; top: calc(100% + 4px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); max-height: 300px; overflow-y: auto; }
.typeahead-list button { display: flex; justify-content: space-between; gap: 12px; width: 100%; border: 0; border-radius: 0; background: none; padding: 8px 12px; text-align: left; }
.typeahead-list button:hover, .typeahead-list button:focus { background: var(--brand-soft); }
.typeahead-list button + button { border-top: 1px solid var(--border); }

/* --- Purchasing ---------------------------------------------------------- */
.month-row { display: grid; grid-template-columns: 1.2fr repeat(5, 1fr); gap: 12px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--border); }
.bvu-row { display: grid; grid-template-columns: minmax(0, 1.5fr) 1.1fr 1fr 110px 90px; gap: 12px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--border); }
.link-row { display: grid; grid-template-columns: minmax(0, 1.6fr) 80px minmax(140px, 1fr) minmax(170px, 1fr) auto; gap: 12px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--border); }
.link-row select { min-width: 0; width: 100%; }
.link-row select.place-select { width: auto; margin-top: 4px; padding: 2px 6px; font-size: 12.5px; }
.scan-row { display: grid; grid-template-columns: minmax(0, 1.8fr) 70px 90px 90px minmax(140px, 1fr) 130px auto; gap: 10px; align-items: start; padding: 8px 14px; border-top: 1px solid var(--border); }
.scan-row select, .scan-row input[type=number] { min-width: 0; width: 100%; }
.mail-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.7fr) auto auto; gap: 12px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--border); }
.mail-row:first-child { border-top: 0; }
.order-sheet { display: flex; flex-direction: column; gap: 8px; }
.order-line { display: grid; grid-template-columns: minmax(160px, 2fr) 56px 84px 72px minmax(200px, 1.4fr); gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hairline); }
.order-line.heading { border-top: 0; padding-bottom: 0; }
.order-link { display: grid; grid-template-columns: minmax(0, 1fr) 80px auto auto; gap: 6px; align-items: center; }
.order-link select { min-width: 0; width: 100%; }
.mail-frame { width: 100%; height: 520px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.mail-text { margin: 0; max-height: 420px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; color: var(--text); }
@media (max-width: 900px) {
    .mail-row { grid-template-columns: minmax(0, 1fr) auto auto; }
    .order-line { grid-template-columns: minmax(0, 1fr) auto auto; }
    .order-line > :nth-child(3) { display: none; }
    .order-line > :nth-child(5) { grid-column: 1 / -1; }
    .order-line.heading { display: none; }
    .mail-row > :nth-child(2) { grid-row: 2; grid-column: 1 / -1; }
    .month-row { grid-template-columns: 1.2fr 1fr 1fr 1fr; }
    .month-row > :nth-child(2), .month-row > :nth-child(3) { display: none; }
    .bvu-row { grid-template-columns: minmax(0, 1fr) auto auto; }
    .bvu-row > :nth-child(3), .bvu-row > :nth-child(5) { display: none; }
    .link-row { grid-template-columns: 1fr; }
    .scan-row { grid-template-columns: 1fr 1fr 1fr; }
    .scan-row > :first-child, .scan-row > :nth-child(5) { grid-column: 1 / -1; }
    .scan-row.heading { display: none; }
}

/* --- Ops alerts --------------------------------------------------------- */
.ops-row { display: grid; grid-template-columns: 74px 92px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--border); }
.ops-row:first-child { border-top: 0; }
.ops-row .flag { margin-right: 6px; }
.ops-row .chip { justify-self: start; }
.ops-row.handled { opacity: .55; }
.ops-row.highlight { background: var(--brand-soft); }
@media (max-width: 900px) {
    .ops-row { grid-template-columns: auto minmax(0, 1fr); }
    .ops-row > :nth-child(3), .ops-row > :nth-child(4) { grid-column: 1 / -1; }
}

/* --- Menu screens ------------------------------------------------------- */
.grow { flex: 1; min-width: 0; }
.board-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: start; }
.board-line { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-top: 1px solid var(--border); }
.board-line input.small-input { font-size: 13px; padding: 5px 9px; }
.pick-list { display: flex; flex-wrap: wrap; gap: 6px; }
.save-bar { position: sticky; bottom: 0; background: var(--page); padding: 10px 0; }
.swatch { width: 26px; height: 26px; border-radius: 6px; border: 3px solid; flex-shrink: 0; }

/* A TV drawn small: the page renders at full TV size and is scaled down. */
.preview { position: relative; overflow: hidden; border-radius: 6px; border: 1px solid var(--border); background: #000; }
.preview iframe { position: absolute; top: 0; left: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
.preview.portrait { width: 216px; height: 384px; }
.preview.portrait iframe { width: 1080px; height: 1920px; transform: scale(.2); }
.preview.landscape { width: 320px; height: 180px; }
.preview.landscape iframe { width: 1920px; height: 1080px; transform: scale(.16667); }
.font-sample { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.frame-thumb { border: 1px solid var(--border); border-radius: 4px; object-fit: fill; }
.frame-thumb.portrait { width: 36px; height: 64px; }
.frame-thumb.landscape { width: 64px; height: 36px; }
@media (max-width: 900px) {
    .board-head { grid-template-columns: 1fr; }
}

/* --- Visual editor ------------------------------------------------------ */
.designer { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: var(--page); }
.designer-bar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.designer-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; }
.designer-tools, .designer-props { background: var(--surface); overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.designer-tools { border-right: 1px solid var(--border); }
.designer-props { border-left: 1px solid var(--border); }
.designer-props input:not([type=checkbox]):not([type=range]):not([type=color]), .designer-props select, .designer-props textarea { width: 100%; }
.designer-props .row > .prop { flex: 1; min-width: 0; }
.designer-props h2 { margin: 6px 0 0; }
.prop { display: flex; flex-direction: column; gap: 4px; }
.tool-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tool-grid > * { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; font-size: 13px; text-align: center; }
.tool-icon { display: inline-block; min-width: 18px; text-align: center; font-weight: 700; }
.tool-icon.serif { font-family: Georgia, serif; font-size: 18px; }
.layers { display: flex; flex-direction: column; gap: 2px; }
.layer { display: flex; align-items: center; gap: 8px; text-align: left; border-color: transparent; padding: 6px 8px; font-size: 13px; }
.layer.on { background: var(--brand-soft); border-color: var(--brand); }
.layer-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-lines { display: flex; flex-direction: column; gap: 8px; }
.menu-line { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
.pos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pos-grid label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-secondary); }
.filters button.small-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Properties pane: icon controls, like a design tool */
.props-head { display: flex; align-items: center; gap: 8px; }
.props-head h2 { margin: 0; font-size: 16px; }
.props-label { margin: 6px 0 -2px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.icon-bar { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.icon-bar .sep { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
.icon-btn { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 6px; border: 1px solid transparent;
    background: transparent; color: var(--text); font-size: 14px; line-height: 1; cursor: pointer; }
.icon-btn:hover:not(:disabled) { background: var(--brand-soft); }
.icon-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.icon-btn:disabled { opacity: .35; cursor: default; }
.icon-btn.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--red) 15%, transparent); color: var(--red); }
.icon-btn.wide { padding: 0 8px; font-size: 12px; letter-spacing: .02em; }
.icon-btn .ico { display: block; }
.glyph-row { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.glyph-row > * { min-width: 0; }
.glyph { width: 20px; text-align: center; color: var(--text-secondary); flex: none; }
.designer-props .glyph-field { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; padding: 0 6px; border: 1px solid var(--border);
    border-radius: 6px; background: var(--page); }
.glyph-field span { color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
.designer-props .glyph-field input { border: 0; background: transparent; padding: 6px 0; min-width: 0; width: 100%; }
.designer-props .glyph-field:focus-within { border-color: var(--brand); }
.pos-grid label span { width: 14px; color: var(--text-secondary); }

.designer-workspace { overflow: auto; display: grid; place-items: center; padding: 40px; background: var(--workspace); }
.stage-wrap { position: relative; box-shadow: 0 4px 24px rgba(0, 0, 0, .18); }
.designer .stage { position: absolute; top: 0; left: 0; transform-origin: 0 0; user-select: none; }
.designer .stage .el { cursor: move; }
.overlay { position: absolute; inset: 0; pointer-events: none; }
.sel-box { position: absolute; outline: 2px solid #2F7BF5; pointer-events: auto; cursor: move; }
.sel-box.locked { outline-style: dashed; cursor: default; }
.sel-box .handle { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #fff; border: 1.5px solid #2F7BF5; border-radius: 2px; }
.handle.nw { left: 0; top: 0; cursor: nwse-resize; }
.handle.n { left: 50%; top: 0; cursor: ns-resize; }
.handle.ne { left: 100%; top: 0; cursor: nesw-resize; }
.handle.e { left: 100%; top: 50%; cursor: ew-resize; }
.handle.se { left: 100%; top: 100%; cursor: nwse-resize; }
.handle.s { left: 50%; top: 100%; cursor: ns-resize; }
.handle.sw { left: 0; top: 100%; cursor: nesw-resize; }
.handle.w { left: 0; top: 50%; cursor: ew-resize; }
.guide { position: absolute; background: #E8458B; }
.guide.v { top: 0; bottom: 0; width: 1px; }
.guide.h { left: 0; right: 0; height: 1px; }
@media (max-width: 1000px) {
    .designer-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(360px, 1fr) auto; overflow-y: auto; }
    .designer-tools, .designer-props { border: 0; }
}

/* --- Sling reconnect ---------------------------------------------------- */
.sling-code { font-size: 34px; font-weight: 700; letter-spacing: 4px; font-variant-numeric: tabular-nums; }
ol.steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* --- Schedule ----------------------------------------------------------- */
.shift-row { display: grid; grid-template-columns: 160px minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--border); }
.shift-row:first-child { border-top: 0; }
.shift-row.highlight { background: var(--brand-soft); }
.cover-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1.4fr); gap: 10px; align-items: center; padding: 4px 0; color: var(--text); }
.cover-row .flag { margin-right: 4px; }
@media (max-width: 900px) {
    .shift-row { grid-template-columns: minmax(0, 1fr) auto; }
    .shift-row > :nth-child(2), .shift-row > :nth-child(3) { grid-column: 1; }
    .cover-row { grid-template-columns: minmax(0, 1fr) auto; }
    .cover-row > :nth-child(3) { grid-column: 1 / -1; }
}
.week-row { display: grid; grid-template-columns: auto 150px minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--border); cursor: pointer; }
.week-row:first-child { border-top: 0; }
.plan-row { display: grid; grid-template-columns: 170px minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--border); }
.plan-row:first-child { border-top: 0; }
.plan-row.gap { background: var(--danger-soft); }
.plan-row.existing { color: var(--text-secondary); }
.plan-row select { width: 100%; }
.plan-row .flag { margin-right: 6px; }
@media (max-width: 900px) {
    .week-row { grid-template-columns: auto minmax(0, 1fr); }
    .week-row > :nth-child(3), .week-row > :nth-child(4) { grid-column: 2; }
    .plan-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .plan-row > :nth-child(4) { grid-column: 1 / -1; }
}

/* --- Schedule views: Sling position colors (--chip) -------------------- */
.pos-swatch { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex-shrink: 0; }

.view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.view-toggle button { border: 0; border-radius: 0; padding: 6px 14px; }
.view-toggle button.on { background: var(--brand); color: #fff; }

.week-grid-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.week-grid { display: grid; grid-template-columns: 148px repeat(7, minmax(124px, 1fr)); min-width: calc(148px + 7 * 124px); font-size: 14px; }
.wg-corner, .wg-head { position: sticky; top: 0; background: var(--surface); }
.wg-head { display: flex; flex-direction: column; padding: 8px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.wg-head.today { background: var(--brand-soft); }
.wg-corner { border-bottom: 1px solid var(--border); }
.wg-pos { display: flex; flex-direction: column; justify-content: flex-start; gap: 2px; padding: 8px 10px; border-left: 5px solid; border-bottom: 1px solid var(--border); font-size: 13px; }
.wg-cell { display: flex; flex-direction: column; gap: 4px; padding: 5px; border-left: 1px solid var(--border); border-bottom: 1px solid var(--border); min-height: 40px; }
.wg-cell.today { background: var(--today); }
.wg-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; padding: 7px 8px; border: 0; border-radius: 4px; background: var(--chip); font-size: 12.5px; line-height: 1.25; text-align: left; cursor: pointer; filter: saturate(1.15); }
.wg-chip .wg-time { font-weight: 700; }
.wg-chip .wg-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* Shared looks for chips and bars */
.wg-chip.open, .tl-bar.open { background: var(--surface); border: 2px solid var(--chip); color: var(--text) !important; }
.wg-chip.existing, .tl-bar.existing { opacity: 0.35; }
.wg-chip.gap, .tl-bar.gap { background: var(--danger-soft); border: 2px dashed var(--red); color: var(--gap-ink) !important; }
.wg-chip.warn, .tl-bar.warn { box-shadow: inset 0 0 0 2px var(--warning-ink); }
.wg-chip.selected, .tl-bar.selected { outline: 3px solid var(--text); outline-offset: 1px; }
.wg-chip:hover, .tl-bar:hover { filter: brightness(1.06); }
/* Dragging shifts: what can move shows a grab cursor, and the day it would land on is outlined. */
.wg-chip.movable, .tl-bar.movable { cursor: grab; }
.tl-bar.movable { touch-action: pan-y; }   /* a sideways drag moves the shift; up and down scrolls until it's held */
.tl-bar.dragging { cursor: grabbing; z-index: 2; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); outline: 2px solid var(--spark); }
.wg-cell.drop-over { box-shadow: inset 0 0 0 2px var(--brand-ink); }
.shift-edit { border-top: 1px solid var(--border); padding-top: 12px; }
.shift-edit .field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); }

.timeline-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.timeline { display: grid; grid-template-columns: 1fr; min-width: 640px; }
.tl-scale { display: grid; grid-template-columns: repeat(var(--hours), 1fr); border-bottom: 1px solid var(--border); }
.tl-tick { font-size: 11px; color: var(--text-secondary); padding: 6px 0 4px 3px; border-left: 1px solid var(--border); }
.tl-group { display: flex; justify-content: flex-start; gap: 10px; align-items: center; padding: 6px 10px; border-left: 5px solid; background: var(--page); font-size: 13px; }
.tl-track { position: relative; height: 36px; border-bottom: 1px solid var(--hairline);
            background-image: repeating-linear-gradient(to right, var(--hairline) 0 1px, transparent 1px calc(100% / var(--hours))); }
.timeline.can-create .tl-track { cursor: crosshair; }
.timeline.can-create .tl-bar { cursor: pointer; }
.tl-track.tl-add { height: 28px; }
.tl-add-hint { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 11.5px; color: var(--text-secondary); opacity: 0; transition: opacity .15s; pointer-events: none; }
.tl-track.tl-add:hover .tl-add-hint { opacity: 1; }
.tl-ghost { background: color-mix(in srgb, var(--brand) 35%, transparent); outline: 2px dashed var(--brand); color: var(--text); pointer-events: none; display: flex; align-items: center; white-space: nowrap; }
.tl-bar { position: absolute; top: 4px; bottom: 4px; border: 0; border-radius: 4px; background: var(--chip); padding: 0 8px; font-size: 12.5px; font-weight: 600; text-align: left; overflow: hidden; cursor: pointer; filter: saturate(1.15); }
.tl-bar-text { white-space: nowrap; }
.tl-bar[data-drag-label] .tl-bar-text { display: none; }
.tl-bar[data-drag-label]::after { content: attr(data-drag-label); white-space: nowrap; }
.tl-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--red); z-index: 1; }

/* Picking shifts up. A long press on a phone mustn't select the name or open iOS's preview. */
.tl-bar, .wg-chip { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.timeline.can-create .tl-track { touch-action: pan-y; }   /* a sideways finger draws a shift; up and down scrolls */
.tl-bar.lifted, .tl-bar.dragging { z-index: 3; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); outline: 2px solid var(--spark); }
.tl-bar.lifted:not(.dragging) { transform: scale(1.04); transition: transform .12s ease-out; }
.tl-track.drop-over { background-color: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand-ink); }
.wg-chip.drag-source { opacity: .35; }
.wg-ghost { position: fixed; top: 0; left: 0; z-index: 70; margin: 0; pointer-events: none; opacity: .95;
            box-shadow: 0 10px 24px rgba(0, 0, 0, .35); outline: 2px solid var(--spark); rotate: -2deg; }

/* A phone: the day's clock fits the screen (every other hour labelled) rather than scrolling sideways, bars are
   taller to hold, and the week keeps its positions in view while its days scroll. */
@media (max-width: 600px) {
    .timeline { min-width: 0; }
    .tl-tick { font-size: 10px; padding-left: 2px; }
    .tl-tick:nth-child(even) { color: transparent; }
    .tl-group { flex-wrap: wrap; row-gap: 0; }
    .tl-bar { font-size: 11.5px; padding: 0 5px; }
    .week-grid { grid-template-columns: 92px repeat(7, minmax(112px, 1fr)); min-width: calc(92px + 7 * 112px); }
    .wg-pos, .wg-corner { position: sticky; left: 0; z-index: 2; background: var(--surface); }
    .wg-corner { z-index: 3; }
    .wg-pos { padding: 8px 6px; font-size: 12px; overflow-wrap: anywhere; }
}
@media (pointer: coarse) {
    .tl-track { height: 42px; }
    .tl-track.tl-add { height: 34px; }
}
.plan-row.clickable { cursor: pointer; }

/* --- Shift popup -------------------------------------------------------- */
.dialog-backdrop { position: fixed; inset: 0; z-index: 50; background: var(--backdrop); display: flex; align-items: center; justify-content: center; padding: 16px; }
.dialog { width: 100%; max-width: 520px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--surface); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .25); }
.dialog-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 16px 18px 12px; border-top: 6px solid; border-radius: 14px 14px 0 0; border-bottom: 1px solid var(--border); }
.dialog-title { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; }
.dialog-who { margin-top: 6px; font-weight: 600; }
.dialog-body { padding: 14px 18px 18px; }
.dialog .cover-row { grid-template-columns: minmax(0, 1fr) 110px minmax(0, 1.2fr); }
@media (max-width: 600px) {
    .dialog-backdrop { align-items: flex-end; padding: 0; }
    .dialog { max-width: none; border-radius: 14px 14px 0 0; max-height: 85vh; max-height: 85dvh; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); }
    .dialog .cover-row { grid-template-columns: minmax(0, 1fr) auto; }
}

.dialog .flag { white-space: normal; display: inline-block; margin: 1px 4px 1px 0; }

/* --- Temporary Tune view panel (remove with tune.js) -------------------- */
#tune-tab { position: fixed; right: 0; top: 40%; z-index: 60; writing-mode: vertical-rl; padding: 12px 6px; border-radius: 8px 0 0 8px; border: 1px solid var(--border); border-right: 0; background: var(--brand); color: #fff; font-weight: 600; cursor: pointer; }
#tune-panel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: 310px; max-width: 90vw; overflow-y: auto; background: var(--surface); color: var(--text); border-left: 1px solid var(--border); box-shadow: -10px 0 30px rgba(0, 0, 0, .12); padding: 14px 16px 24px; font-size: 14px; line-height: 1.4; transform: translateX(105%); transition: transform .18s ease; }
#tune-panel.open { transform: none; }
#tune-panel h3 { margin: 0 0 4px; font-size: 16px; }
#tune-panel .tune-section { border-top: 1px solid var(--border); padding-top: 8px; margin-top: 10px; }
#tune-panel .tune-section > summary { font-weight: 700; cursor: pointer; }
#tune-panel .tune-row { display: grid; grid-template-columns: 1fr 64px; gap: 4px 8px; align-items: center; margin: 10px 0; font-size: 13px; }
#tune-panel .tune-row.changed > span:first-child { font-weight: 600; }
#tune-panel .tune-row input[type=range] { grid-column: 1 / -1; width: 100%; }
#tune-panel .tune-row input[type=color] { grid-column: 1 / -1; width: 100%; height: 30px; padding: 2px; }
#tune-panel .tune-val { text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
#tune-panel .tune-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* --- Cover chips (who could take a shift) ------------------------------ */
.cover-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cover-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border-radius: 8px; text-align: left; cursor: pointer; }
.cover-chip.clean { background: #35835A; border: 1px solid #35835A; color: #fff; }
.cover-chip.catch { background: #9C6B0C; border: 1px solid #9C6B0C; color: #fff; }
.cover-chip.current { background: var(--surface); border: 2px solid var(--text); color: var(--text); cursor: default; }
.cover-chip.picked { outline: 2px solid var(--text); outline-offset: 1px; }
.cover-chip-name { font-weight: 600; }
.cover-chip-hours { font-size: 12px; color: inherit; opacity: .9; }
.cover-detail { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--page); }

/* --- Light / Dark / Auto switch (in the menu) --------------------------- */
.sidebar .theme-switch { display: flex; gap: 4px; margin: auto 10px 0; padding: 18px 0 0; }
.theme-switch button { flex: 1; padding: 5px 6px; font-size: 12px; border-radius: 8px; background: transparent; border-color: #2A2766; color: #D9D8F0; }
.theme-switch button:hover { border-color: #8A89B8; }
:root[data-theme="light"] .theme-switch .light,
:root[data-theme="dark"] .theme-switch .dark,
:root:not([data-theme]) .theme-switch .auto { background: rgba(255, 255, 255, .14); border-color: transparent; color: #fff; }

/* Drink builder: barista steps, with the chat beside them. */
.step-head { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.step-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 12px; }
.cup-grid { display: grid; grid-template-columns: repeat(var(--sizes), minmax(0, 1fr)); gap: 8px; }
.cup-card { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--page); display: flex; flex-direction: column; gap: 2px; }
              padding-top: 8px; border-top: 1px solid var(--border); }
              position: sticky; top: 12px; }
.chat-log { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; }
.chat-msg { padding: 7px 10px; border-radius: 10px; font-size: 13px; max-width: 92%; }
.chat-msg.me { align-self: flex-end; background: var(--brand); color: #fff; }
.chat-msg.bot { align-self: flex-start; background: var(--fill-muted); color: var(--text); }
.chat-form { display: flex; gap: 6px; }
.chat-form input { flex: 1; min-width: 0; }
.cup-summary { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); padding-top: 10px; }
.band-details > summary { cursor: pointer; padding: 4px 0; }
.band-details[open] > summary { margin-bottom: 8px; }
/* Side by side only when there's room for both; otherwise the chat goes on top. */
@container (max-width: 780px) {
}
@container (max-width: 520px) {
    .cup-grid { grid-template-columns: 1fr 1fr; }
}

/* The loading mark (Shared/Magic8Loader.razor). The 8 dips back, swings past sideways into ∞
   and settles; as it lands, a line takes over and chases the loop for as long as it shows:
   quick through the crossing, easing around each tighter outer bend. */
.m8-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 56px 16px;
    color: var(--text-secondary);
}
.m8-loader p { margin: 0; font-size: 15px; letter-spacing: .02em; text-align: center; }
.m8-loader-mark { width: var(--m8-loader-size, 88px); height: var(--m8-loader-size, 88px); overflow: visible; }
.m8-loader-mark .m8-body,
.m8-loader-mark .m8-chase { fill: none; stroke: var(--loader-ink); stroke-width: 9; }
.m8-loader-mark .m8-spark { fill: var(--loader-spark); }

.m8-turn {
    transform-box: view-box;
    transform-origin: 50px 50px;
    animation: m8-turn .9s cubic-bezier(.68, -.4, .27, 1.4) .3s both;
}
.m8-body { stroke-linejoin: round; animation: m8-body .5s ease-in-out .75s both; }
.m8-chase {
    stroke-linecap: round;
    stroke-dasharray: 38 62;
    stroke-dashoffset: 19;
    opacity: 0;
    animation:
        m8-chase 1.2s cubic-bezier(.22, .5, .78, .5) .8s infinite backwards,
        m8-stretch 1.2s cubic-bezier(.37, 0, .63, 1) .8s infinite backwards,
        m8-show .5s ease-in-out .75s both;
}
.m8-spark {
    transform-box: fill-box;
    transform-origin: center;
    animation: m8-spark .45s ease-out .2s both;
}
@keyframes m8-turn { from { transform: rotate(90deg); } to { transform: rotate(180deg); } }
@keyframes m8-body { from { opacity: 1; } to { opacity: .22; } }
@keyframes m8-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes m8-chase { 0% { stroke-dashoffset: 19; } 50% { stroke-dashoffset: -31; } 100% { stroke-dashoffset: -81; } }
@keyframes m8-stretch { 0%, 50%, 100% { stroke-dasharray: 38 62; } 25%, 75% { stroke-dasharray: 24 76; } }
@keyframes m8-spark { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: translate(5px, -5px) scale(.4); } }

/* Without motion: the upright 8 and its spark, standing still. */
@media (prefers-reduced-motion: reduce) {
    .m8-turn, .m8-body, .m8-chase, .m8-spark { animation: none; }
    .m8-turn { transform: rotate(90deg); }
}

/* The wide logo (Shared/Magic8Logo.razor): the app icon's navy, white and spark in a badge,
   the same in both themes. The 8 stands a little taller than the capitals and sits on the baseline. */
.m8-logo {
    display: inline-flex;
    align-items: baseline;
    gap: .1em;
    padding: .38em .55em .42em .65em;
    border-radius: .55em;
    background: #070033;
    color: #FFFFFF;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    white-space: nowrap;
}
.m8-logo-mark { width: .7em; height: .88em; overflow: visible; }
.m8-logo-mark path { fill: none; stroke: #FFFFFF; stroke-width: 13; stroke-linejoin: round; }
.m8-logo-mark .m8-logo-spark { fill: #FFD23F; stroke: none; }

/* Ops alerts: the note on how a message fits with earlier ones, next steps, and what an availability change touches. */
.ops-context { display: block; margin-top: 4px; font-size: 13px; color: var(--text-secondary); font-style: italic; }
.ops-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.ops-action { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: 999px; background: var(--brand-soft); color: var(--ok-ink); font-size: 13px; font-weight: 600; }
.ops-action a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ops-action.done { background: var(--fill-muted); color: var(--text-secondary); text-decoration: line-through; }
.ops-action input { margin: 0; }
a.impact-row { color: inherit; }
a.impact-row:hover { background: var(--page); }

/* Operations report. */
.report-overview { font-size: 18px; line-height: 1.5; }
.theme-row { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-top: 1px solid var(--hairline); }
.theme-row:first-child { border-top: 0; }

/* Ops alerts as threads: one card per problem, the story so far, and what each person said, word for word. */
.thread { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.thread.done { opacity: .7; }
.thread.highlight { outline: 2px solid var(--brand-ink); }
.thread-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.thread-title { margin: 0; font-size: 18px; }
.thread-head .thread-title { flex: 1 1 240px; }
.thread-story { margin: 0; font-size: 16px; line-height: 1.5; }
.thread-events { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.thread-events li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; position: relative; }
.thread-events li::before { content: ""; position: absolute; left: -20px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.thread-time { font-size: 13px; color: var(--text-secondary); padding-top: 1px; }
.thread-quote { display: block; margin-top: 2px; padding: 8px 12px; border-radius: 10px; background: var(--page); font-size: 15px; quotes: "“" "”"; }
.thread-note { display: block; margin-top: 4px; font-size: 13px; color: var(--text-secondary); }
.thread .ops-actions { padding: 0; align-items: center; }
.thread-foot { gap: 8px; }
.thread-sort { gap: 8px; }
@media (max-width: 900px) {
    .thread-events li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* Schedule: labor against target sales, and pay rates. */
.tl-cost { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.wg-pos .small:last-child { font-weight: 600; }
.rates { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.rates .field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-secondary); }
.rates input { width: 100%; }

/* Thread cards open the thread page; the page shows every message in full. */
.thread-link { color: inherit; }
/* The title's link covers the whole card, so anywhere on it opens the thread; controls sit above it. */
.thread { position: relative; }
.thread .thread-link::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.thread :is(button, input, select, .ops-action a, .thread-note a, a.button) { position: relative; z-index: 1; }
.thread:hover { border-color: var(--border-strong); }
.thread-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.thread-full { white-space: pre-wrap; }
a.back { color: var(--text-secondary); font-weight: 600; }
.thread-events.around { margin: 12px 16px 16px; }

/* A thread's check against Sling: the answer first, then the facts it rests on. */
.check { border-left: 4px solid var(--amber); }
.check.check-done { border-left-color: var(--green); }
.check-facts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.check-facts li { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 10px; }
@media (max-width: 900px) { .check-facts li { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* Availability: their usual shifts, split into can't-work and can-still-work. */
.eligibility { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.elig-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; margin-top: 4px; border-radius: 8px; font-size: 14px; }
.elig-row.no { background: var(--now-soft); color: var(--now-ink); }
.elig-row.yes { background: var(--ok-soft); color: var(--ok-ink); }

/* Drop-offs on Stable ops. */
details.drop > summary { align-items: flex-start; }
details.drop ul { margin: 4px 0 0; padding-left: 20px; }

/* Photos attached to Sling messages. */
.thread-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; position: relative; z-index: 1; }
.thread-photo img { display: block; width: 120px; height: 90px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); background: var(--fill-muted); }
.thread-photo:hover img { border-color: var(--brand-ink); }

/* A regular's last visits: days between each, as a line, on to today. */
.visit-chart { margin: 0; }
.visit-chart svg { width: 100%; max-width: 680px; height: auto; display: block; }
.visit-chart .grid { stroke: var(--hairline); stroke-width: 1; }
.visit-chart .label { fill: var(--text-secondary); font-size: 11px; font-family: "DM Sans", system-ui, sans-serif; }
.visit-chart .dot { fill: var(--brand-ink); fill-opacity: 0.75; }
.visit-chart .dot.rough { fill: var(--red); fill-opacity: 0.9; stroke: var(--text); stroke-width: 1; }
.visit-chart .week-bar { fill: var(--brand-ink); fill-opacity: 0.55; }
.rough-key { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--red); vertical-align: middle; margin-right: 2px; }
.visit-row { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-left: 3px solid var(--hairline); }
.visit-row.rough { border-left-color: var(--red); }

/* Staff performance */
.hour-chart { margin: 0; }
.hour-chart svg { width: 100%; height: auto; display: block; }
.hour-chart .grid { stroke: var(--hairline); stroke-width: 1; }
.hour-chart .label { fill: var(--text-secondary); font-size: 11px; font-family: "DM Sans", system-ui, sans-serif; }
.hour-chart .hour-bar { fill: var(--brand-ink); fill-opacity: 0.75; }
.hour-chart .hour-bar.slow { fill: var(--red); fill-opacity: 0.85; }
.bucket-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) 110px; gap: 12px; align-items: center; }
.perf-row { display: grid; grid-template-columns: minmax(0, 2fr) repeat(4, minmax(64px, 0.6fr)); gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hairline); }
.perf-row.heading { border-top: 0; padding-bottom: 0; color: var(--text-secondary); font-size: 13px; }
.perf-row.shift { padding: 5px 0 5px 16px; border-top: 0; font-size: 14px; }
.perf-day > summary { cursor: pointer; list-style: none; }
.perf-day > summary::-webkit-details-marker { display: none; }
.perf-day > summary > :first-child::before { content: "▸ "; color: var(--text-secondary); }
.perf-day[open] > summary > :first-child::before { content: "▾ "; }
.slow-row { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) 70px 110px; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--hairline); }
@media (max-width: 720px) {
    .perf-row { grid-template-columns: minmax(0, 1fr) repeat(3, auto); }
    .perf-row > :nth-child(2) { display: none; }
    .slow-row { grid-template-columns: minmax(0, 1fr) auto; }
    .slow-row > :nth-child(2) { grid-column: 1 / -1; }
}

/* Schedule: the schedule beside a heads-up pane */
.schedule-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.schedule-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.schedule-side { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 24px); overflow-y: auto;
    padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.schedule-side h2 { margin: 0; font-size: 16px; }
.concern { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-left: 3px solid var(--hairline); background: var(--page); border-radius: 0 6px 6px 0; }
.concern.now { border-left-color: var(--red); }
.concern.soon { border-left-color: var(--amber, #E5A50A); }
.concern .link { text-align: left; padding: 0; }
.limits-row { display: grid; grid-template-columns: minmax(0, 1.3fr) 130px 130px 44px minmax(0, 1.4fr) auto; gap: 8px; align-items: center; padding: 4px 0; }
.limits-row.heading { color: var(--text-secondary); font-size: 12.5px; }
@media (max-width: 1000px) {
    .schedule-layout { grid-template-columns: 1fr; }
    .schedule-side { position: static; max-height: none; }
    .limits-row { grid-template-columns: 1fr 1fr; }
    .limits-row.heading { display: none; }
}
.money-row { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(70px, 1fr)); gap: 10px; padding: 8px 14px; border-top: 1px solid var(--hairline); align-items: center; }
.money-row.heading { border-top: 0; color: var(--text-secondary); font-size: 12.5px; }
.highlight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.highlight { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 8px; background: var(--ok-soft); }
.highlight .link { padding: 0 0 0 4px; }

/* Insight pages */
.insight-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--hairline); }
.insight-row.three { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr) minmax(0, 1.2fr); }
.insight-row.heading { border-top: 0; color: var(--text-secondary); font-size: 12.5px; }
.insight-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.score-row { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(6, minmax(56px, 1fr)); gap: 8px; padding: 7px 0; border-top: 1px solid var(--hairline); align-items: center; }
.score-row.heading { border-top: 0; color: var(--text-secondary); font-size: 12.5px; }
.rush { display: grid; grid-template-columns: 40px repeat(var(--hours), minmax(0, 1fr)); gap: 3px; align-items: center; overflow-x: auto; }
.rush-hour { text-align: center; color: var(--text-secondary); }
.rush-cell { height: 28px; border-radius: 4px; display: grid; place-items: center; font-size: 11px;
    background: color-mix(in srgb, var(--brand) calc(var(--level) * 85%), var(--page)); color: var(--text); }
.rush-cell.today { outline: 1.5px solid var(--brand); }
@media (max-width: 720px) {
    .insight-row { grid-template-columns: minmax(0, 1fr) auto; }
    .insight-row > :nth-child(n+3) { grid-column: 1 / -1; }
    .score-row { grid-template-columns: minmax(0, 1fr) repeat(3, auto); }
    .score-row > :nth-child(3), .score-row > :nth-child(4), .score-row > :nth-child(5) { display: none; }
}

/* Cook book: the menu as a grid of recipes by section; the open one reads in a panel over it. */
.cookbook-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 10px; }
.cookbook-toolbar input[type=search] { flex: 1 1 220px; max-width: 360px; }
.cookbook-toolbar form { margin-left: auto; }
.cookbook-chips { margin-bottom: 6px; }
.cookbook-chips button { font-size: 13px; padding: 5px 12px; }
.cookbook-chips .count { margin-left: 4px; opacity: .7; font-weight: 500; }
.cookbook-section { margin-top: 22px; }
.cookbook-section-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.cookbook-section-head h2 { margin: 0; }
.recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
button.recipe-tile {
    display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 12px 14px; color: var(--text); font: inherit;
}
button.recipe-tile:hover { border-color: var(--text-secondary); }
button.recipe-tile.selected { outline: 2px solid var(--brand-ink); }
button.recipe-tile.archived { opacity: .6; }
.recipe-tile img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.tile-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.tile-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tile-title .chip { min-width: 0; flex-shrink: 0; }
.tile-ingredients { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-numbers { display: flex; flex-wrap: wrap; gap: 4px 12px; }

.drawer-scrim { position: fixed; inset: 0; background: rgba(8, 6, 28, .45); z-index: 40; }
.drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 41;
    width: min(760px, 100vw); overflow-y: auto; overscroll-behavior: contain;
    background: var(--page); border-left: 1px solid var(--border);
    padding: 20px 24px 40px; box-shadow: -12px 0 40px rgba(0, 0, 0, .25);
}
@media (max-width: 800px) {
    .drawer { padding: calc(14px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom)); }
    .cookbook-toolbar form { margin-left: 0; }
    .recipe-grid { grid-template-columns: 1fr; }
}

/* Station mode: the cook book on a tablet at the bar or line. Big type, big targets, no costs. */
.station { min-height: 100vh; background: var(--page); color: var(--text); padding: 0 24px 40px; font-size: 20px; }
.station-bar {
    position: sticky; top: 0; z-index: 2; background: var(--page);
    display: flex; align-items: center; gap: 16px; padding: 16px 0;
}
.station-bar h1 { margin: 0; font-size: 34px; }
.station-brand { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 700; font-size: 26px; }
.station-bar input[type=search] { flex: 1; max-width: 520px; font-size: 20px; padding: 12px 16px; border-radius: 12px; }
.station-exit { margin-left: auto; color: var(--text-secondary); font-size: 16px; }
button.station-back { font-size: 20px; padding: 12px 20px; border-radius: 12px; }
.station-tabs, .station-sizes { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 12px; scrollbar-width: none; }
.station-tabs button, .station-sizes button {
    flex-shrink: 0; font-size: 18px; padding: 12px 20px; border-radius: 999px; white-space: nowrap;
}
.station-tabs button.on, .station-sizes button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.station-sizes button { font-size: 22px; padding: 14px 28px; }
.station-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
button.station-tile {
    display: flex; flex-direction: column; align-items: flex-start; gap: 10px; text-align: left;
    min-height: 96px; padding: 16px; border-radius: 16px; font-size: 22px; font-weight: 600;
    background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.station-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.station-recipe { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: start; margin-top: 8px; }
.station-recipe > img { width: 320px; max-width: 32vw; aspect-ratio: 1; object-fit: cover; border-radius: 16px; }
.station-recipe h2 { margin: 18px 0 6px; font-size: 24px; }
.station-recipe h3 { margin: 10px 0 2px; font-size: 21px; color: var(--text-secondary); }
.station-lines { list-style: none; margin: 0; padding: 0; }
.station-lines li { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 26px; }
.station-lines .amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.station-method { white-space: pre-line; font-size: 22px; line-height: 1.5; margin: 0; }
.station-note { color: var(--text-secondary); font-size: 20px; }
@media (max-width: 800px) {
    .station { padding: 0 14px 32px; font-size: 18px; }
    .station-recipe { grid-template-columns: 1fr; }
    .station-recipe > img { width: 100%; max-width: none; order: -1; }
    .station-lines li { grid-template-columns: 6.5em minmax(0, 1fr); font-size: 22px; }
}

/* Colour picker: a swatch button that opens theme colours, business colours and a custom one in place. */
.color-pick { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
button.color-current {
    display: flex; align-items: center; gap: 8px; width: 100%; justify-content: flex-start;
    padding: 6px 10px; border-radius: 8px; text-align: left;
}
.color-current .color-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swatch-dot { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--border-strong); }
.swatch-dot.none, .swatch-btn.none {
    background: linear-gradient(135deg, transparent 45%, var(--red) 45%, var(--red) 55%, transparent 55%), var(--surface);
}
.color-menu {
    display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 10px;
    border: 1px solid var(--border); background: var(--page);
}
.color-menu .props-label { margin: 2px 0 0; }
.color-menu input[type=color] { width: 44px; height: 34px; padding: 2px; flex-shrink: 0; }
.color-menu .hex-input { font-variant-numeric: tabular-nums; text-transform: uppercase; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
button.swatch-btn {
    width: 28px; height: 28px; min-width: 0; padding: 0; border-radius: 50%;
    border: 1px solid var(--border-strong); box-shadow: inset 0 0 0 2px var(--surface);
}
button.swatch-btn.on { outline: 2px solid var(--brand-ink); outline-offset: 2px; }
.swatches.mini { gap: 4px; margin-top: 4px; max-width: 150px; }
.swatches.mini button.swatch-btn { width: 20px; height: 20px; }

/* Theme choice in the editor: each theme as its three colours and name. */
.theme-strip { display: flex; flex-direction: column; gap: 4px; }
button.theme-chip { display: flex; align-items: center; gap: 10px; justify-content: flex-start; width: 100%; padding: 6px 10px; border-radius: 8px; text-align: left; }
button.theme-chip.on { outline: 2px solid var(--brand-ink); }
.theme-dots { display: inline-flex; flex-shrink: 0; }
.theme-dots span { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--border-strong); margin-left: -5px; }
.theme-dots span:first-child { margin-left: 0; }

/* Business colours on Menu screens. */
.palette-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.palette-row input[type=color] { width: 48px; height: 36px; padding: 2px; }
.palette-row input:not([type=color]) { flex: 1 1 200px; max-width: 280px; }
.palette-row .hex { font-variant-numeric: tabular-nums; min-width: 64px; }

/* Cook book: making a new ingredient from the search when it isn't there. */
.typeahead-new { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--border); }
.typeahead-list .typeahead-new button {
    display: inline-flex; width: auto; justify-content: center; align-self: flex-start;
    background: var(--brand); border: 1px solid var(--brand); color: #fff; border-radius: 8px; padding: 6px 14px;
}

/* App theme page: the variables beside a sample of the app in them. */
.app-theme { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 18px; align-items: start; }
.app-theme-sample { position: sticky; top: 16px; }
.theme-token { display: grid; grid-template-columns: minmax(0, 1fr) auto 150px 50px; gap: 10px; align-items: center; padding: 8px 16px; border-top: 1px solid var(--hairline); }
.theme-token input[type=color] { width: 40px; height: 32px; padding: 2px; }
.theme-token .swatch-dot { width: 32px; height: 32px; border-radius: 6px; }
.theme-token .token-value { width: 100%; font-variant-numeric: tabular-nums; }
.theme-token .token-value.invalid { border-color: var(--red); }
.theme-token .hidden { visibility: hidden; }
@media (max-width: 1000px) {
    .app-theme { grid-template-columns: 1fr; }
    .app-theme-sample { position: static; }
    .theme-token { grid-template-columns: minmax(0, 1fr) auto 120px 44px; padding: 8px 12px; }
}

/* Kitchen map: rooms drawn as boxes on a grid, with the open box's contents beside it. */
.map-tabs { margin: 10px 0; }
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.map-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.map-grid {
    position: relative; width: 100%; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden;
    background-color: var(--surface); touch-action: none; user-select: none; cursor: crosshair;
    background-image: linear-gradient(to right, var(--hairline) 1px, transparent 1px), linear-gradient(to bottom, var(--hairline) 1px, transparent 1px);
    background-size: calc(100% / var(--cols)) calc(100% / var(--rows));
}
.map-spot, .map-ghost { position: absolute; box-sizing: border-box; border-radius: 6px; }
.map-spot {
    display: flex; flex-direction: column; gap: 2px; padding: 4px 6px; overflow: hidden; cursor: grab;
    border: 2px solid var(--brand-ink); background: var(--brand-soft); color: var(--text);
}
.map-spot.kind-station { border-color: var(--soon-ink); background: var(--soon-soft); }
.map-spot.kind-fixture { border-color: var(--border-strong); background: var(--fill-muted); border-style: dashed; }
.map-spot.on { box-shadow: 0 0 0 3px var(--text); z-index: 2; }
.map-spot .spot-name { font-weight: 700; font-size: 13px; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; }
.map-spot .spot-meta { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-spot .spot-handle { position: absolute; right: 0; bottom: 0; width: 14px; height: 14px; cursor: nwse-resize;
    background: linear-gradient(135deg, transparent 50%, var(--text-secondary) 50%); }
.map-ghost { border: 2px dashed var(--brand-ink); background: color-mix(in srgb, var(--brand-soft) 60%, transparent); pointer-events: none; }
.kind-btn.kind-storage.on { background: var(--brand-ink); border-color: var(--brand-ink); }
.kind-btn.kind-station.on { background: var(--soon-ink); border-color: var(--soon-ink); color: var(--surface); }
.kind-btn.kind-fixture.on { background: var(--text-secondary); border-color: var(--text-secondary); color: var(--surface); }
.map-panel { position: sticky; top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; gap: 8px; }
.map-panel input:not([type=number]) { width: 100%; }
.map-panel .spot-title { font-size: 18px; font-weight: 700; }
.spot-row { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--hairline); }
.spot-row input[type=number] { width: 72px; }
.spot-row .unit { min-width: 36px; }
.unplaced { display: flex; flex-wrap: wrap; gap: 4px; max-height: 260px; overflow-y: auto; }
button.chip-btn { border-radius: 999px; padding: 3px 10px; font-size: 12px; }
.restock-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px 110px 50px; gap: 10px; padding: 8px 16px; border-top: 1px solid var(--hairline); align-items: center; }
.restock-row .tick { width: 18px; height: 18px; border: 1.5px solid var(--border-strong); border-radius: 4px; }
.print-only { display: none; }
@media print {
    .sidebar, .tabbar, .no-print, .map-tabs, .filters, h1, .heading { display: none !important; }
    .print-only { display: block; }
    .restock-sheet .band { break-inside: avoid; }
}
@media (max-width: 1000px) {
    .map-layout { grid-template-columns: 1fr; }
    .map-panel { position: static; }
}
.station-switch { display: inline-flex; gap: 4px; }
.station-switch button { font-size: 16px; padding: 10px 16px; border-radius: 999px; }
.station-switch button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.station-place { display: block; font-size: 16px; font-weight: 500; color: var(--text-secondary); margin-top: 2px; }
.cookbook-chips + * .place, .recipe-row .place { white-space: nowrap; }

/* Each kind of block stretches to the page, up to its own width from the theme. */
.card { max-width: var(--card-max); }
.band { max-width: var(--list-max); }
.notice { max-width: var(--notice-max); }
.split, .guest-grid, .recipe-grid, .app-theme, .map-layout, .cookbook-section { max-width: var(--layout-max); }
p.heading { max-width: var(--text-max); }

/* Order page lists: one set of columns for every row, so they line up down the page. */
.order-row {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr) 150px;
    gap: 16px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--hairline);
}
.order-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-row > :last-child { text-align: right; font-variant-numeric: tabular-nums; }
.order-row.order-cols {
    padding-top: 7px; padding-bottom: 7px; border-top: 0; background: var(--fill-muted);
    font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary);
}
.band-head .band-sub { margin-left: 8px; font-weight: 500; font-size: 13px; opacity: .8; }
@media (max-width: 900px) {
    .order-row { grid-template-columns: minmax(0, 1fr) auto; }
    .order-row .hide-phone { display: none; }
    .band-head .band-sub { display: block; margin-left: 0; }
}

/* Kitchen map equipment: the palette to place from, and each piece's settings table. */
.equipment-palette { display: flex; flex-wrap: wrap; gap: 6px; }
button.equip-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; font-size: 13px; }
button.equip-btn .equip-icon { font-size: 16px; line-height: 1; }
button.equip-btn.on { outline: 2px solid var(--brand-ink); background: var(--brand-soft); }
button.equip-btn.kind-station { border-color: color-mix(in srgb, var(--soon-ink) 45%, var(--border)); }
button.equip-btn.kind-fixture { border-style: dashed; }
.settings-table { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(var(--fields), minmax(0, 1fr)) 30px; gap: 4px 6px; align-items: center; }
.settings-table input { width: 100%; min-width: 0; padding-left: 6px; padding-right: 6px; }
.spot-row .section-pick { width: 110px; flex-shrink: 0; font-size: 12px; padding: 4px 6px; }
.spot-row input:not([type=number]) { flex: 1; min-width: 0; }
.station-equipment li .amount { font-weight: 600; }

/* Kitchen map: the edit and zoom bar, and the room in a view that scrolls and pans when zoomed. */
.map-edit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.map-edit-bar .zoom-label { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.map-viewport { overflow: auto; max-height: 72vh; border-radius: 10px; }
.map-viewport .map-grid { max-width: none; }
.map-viewport.panning, .map-viewport.panning .map-grid, .map-viewport.panning .map-spot { cursor: grab; }
/* Walls solid, windows glazed: they're structure, not storage. */
.map-spot.equip-wall { background: var(--text); border: 0; border-radius: 1px; padding: 0; }
.map-spot.equip-wall .spot-name, .map-spot.equip-wall .spot-meta { display: none; }
.map-spot.equip-window { background: color-mix(in srgb, #7FB8E6 45%, var(--surface)); border: 2px solid var(--text); border-radius: 1px; padding: 0 4px; }
.map-spot.equip-window .spot-meta { display: none; }

/* Kitchen map as a workspace: palette | canvas | panel, all to the bottom of the window. The canvas
   sizes itself (map-editor.js) so the whole room fits at 100%. */
.map-layout { grid-template-columns: 168px minmax(0, 1fr) 320px; gap: 14px; max-width: none; }
.map-palette, .map-layout .map-panel { position: sticky; top: 12px; max-height: calc(100dvh - 24px); overflow-y: auto; }
.map-palette { display: flex; flex-direction: column; gap: 8px; }
.map-palette .equipment-palette { flex-direction: column; flex-wrap: nowrap; gap: 4px; }
.map-palette button.equip-btn { width: 100%; justify-content: flex-start; padding: 5px 8px; }
.map-canvas { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.map-canvas .map-viewport { display: flex; max-height: none; min-height: 320px; border: 1px solid var(--border); background: var(--fill-muted); }
.map-canvas .map-grid { margin: auto; flex-shrink: 0; width: 100%; }
@media (max-width: 1000px) {
    .map-layout { grid-template-columns: 1fr; }
    .map-palette, .map-layout .map-panel { position: static; max-height: none; }
    .map-palette .equipment-palette { flex-direction: row; flex-wrap: wrap; }
    .map-palette button.equip-btn { width: auto; }
}

/* --- Kitchen map, polished: a floor on a workspace, equipment by kind, and what sits on what. --- */
:root {
    --map-storage: #3E8BD6;   /* where things are kept */
    --map-station: #D9962B;   /* where things are made */
    --map-fixture: #8C8AA3;   /* landmarks */
}
.map-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 10px; max-width: none; }
.map-head h1 { margin: 0 6px 0 0; }
.map-head .map-tabs { margin: 0; }

/* The workspace and the floor: fine 6-inch lines under 1-foot ones, the room's edge drawn like a wall. */
.map-canvas .map-viewport { background: var(--workspace); border-color: var(--border); }
.map-canvas .map-grid {
    --map-minor: color-mix(in srgb, var(--text) 5%, transparent);
    --map-major: color-mix(in srgb, var(--text) 12%, transparent);
    background-color: var(--surface);
    background-image:
        linear-gradient(to right, var(--map-major) 1px, transparent 1px),
        linear-gradient(to bottom, var(--map-major) 1px, transparent 1px),
        linear-gradient(to right, var(--map-minor) 1px, transparent 1px),
        linear-gradient(to bottom, var(--map-minor) 1px, transparent 1px);
    background-size:
        calc(200% / var(--cols)) calc(200% / var(--rows)), calc(200% / var(--cols)) calc(200% / var(--rows)),
        calc(100% / var(--cols)) calc(100% / var(--rows)), calc(100% / var(--cols)) calc(100% / var(--rows));
    border: 0; border-radius: 2px; overflow: visible;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--text) 55%, transparent), 0 12px 30px rgba(0, 0, 0, .18);
}
.map-viewport.armed .map-grid, .map-viewport.armed .map-spot { cursor: copy; }

/* Equipment: tinted by kind, readable in both modes. */
.map-grid .map-spot { --k: var(--map-storage); border: 1.5px solid var(--k); background: color-mix(in srgb, var(--k) 18%, var(--surface));
    color: var(--text); border-radius: 5px; padding: 3px 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.map-grid .map-spot.kind-station { --k: var(--map-station); }
.map-grid .map-spot.kind-fixture { --k: var(--map-fixture); border-style: dashed; }
.map-grid .map-spot .spot-name { font-size: 12px; font-weight: 650; white-space: nowrap; }
.map-grid .map-spot .spot-meta { font-size: 10.5px; }
.map-grid .map-spot .spot-handle { opacity: 0; transition: opacity .12s; background: linear-gradient(135deg, transparent 50%, var(--k) 50%); }
.map-grid .map-spot:hover .spot-handle, .map-grid .map-spot.on .spot-handle { opacity: 1; }
@media (pointer: coarse) {
    /* A corner a finger can catch, on the box that's selected. */
    .map-grid .map-spot .spot-handle { width: 28px; height: 28px; }
}
.map-grid .map-spot.on { outline: 2px solid var(--text); outline-offset: 2px; z-index: 6; }

/* On top of something: raised. Underneath: a hatched outline over it, so it's still there to see and pick. */
.map-grid .map-spot.level-on { background: color-mix(in srgb, var(--k) 32%, var(--surface)); z-index: 3;
    box-shadow: 0 0 0 2px var(--surface), 0 6px 14px rgba(0, 0, 0, .35); }
.map-grid .map-spot.level-under { z-index: 4; border-style: dashed; box-shadow: none;
    background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--k) 22%, transparent) 0 5px, transparent 5px 10px); }
.map-grid .map-spot.level-under .spot-name, .map-grid .map-spot.level-under .spot-meta { align-self: flex-end; }

/* Walls solid, windows glazed. */
.map-grid .map-spot.equip-wall { background: var(--text); border: 0; border-radius: 1px; padding: 0; box-shadow: none; }
.map-grid .map-spot.equip-window { background: color-mix(in srgb, #7FB8E6 45%, var(--surface)); border: 2px solid var(--text); box-shadow: none; }

/* The toolbar over the canvas. */
.map-edit-bar .tool-group { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.map-edit-bar .tool-group .icon-btn { font-size: 16px; min-width: 32px; height: 32px; }
.map-edit-bar .tool-group .icon-btn.wide { font-size: 13px; font-weight: 600; padding: 0 10px; }
.map-edit-bar .zoom-label { min-width: 46px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-secondary); }

/* The palette: grouped, each piece marked with its kind's colour. */
.map-palette { gap: 2px; }
.map-palette .palette-group { margin: 10px 0 2px 6px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); }
.map-palette .palette-group:first-child { margin-top: 0; }
.map-palette button.equip-btn { --k: var(--map-storage); border: 1px solid transparent; background: none; box-shadow: inset 3px 0 0 var(--k); border-radius: 8px; color: var(--text); }
.map-palette button.equip-btn.kind-station { --k: var(--map-station); }
.map-palette button.equip-btn.kind-fixture { --k: var(--map-fixture); }
.map-palette button.equip-btn:hover { background: var(--fill-muted); }
.map-palette button.equip-btn.on { background: var(--brand-soft); border-color: var(--brand-ink); outline: none; }
/* A phone: the equipment is one strip that scrolls sideways above the room, so the room is on screen. */
@media (max-width: 1000px) {
    .map-palette { flex-direction: row; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; scrollbar-width: none; }
    .map-palette::-webkit-scrollbar { display: none; }
    .map-palette .palette-group, .map-palette .palette-group:first-child { flex: none; margin: 0 0 0 6px; }
    .map-palette button.equip-btn { flex: none; width: auto; white-space: nowrap; border-color: var(--border); }
    .map-palette .palette-hint { display: none; }
}
.map-palette .palette-hint { margin: 10px 4px 0; }

/* Where a piece sits, in the panel. */
.sits-on { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--fill-muted); }
.sits-on .filters button { font-size: 12px; padding: 4px 10px; }
/* Zones: a labelled patch of floor, under everything. */
.map-grid .map-spot.equip-zone { background: color-mix(in srgb, var(--text) 4%, transparent); border: 1.5px dashed color-mix(in srgb, var(--text) 30%, transparent);
    box-shadow: none; border-radius: 3px; z-index: 0; }
.map-grid .map-spot.equip-zone .spot-name { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
.map-grid .map-spot.equip-zone .spot-meta { display: none; }
/* The canvas holds the room itself: no page scrolling from inside it, the room placed by pan and zoom. */
.map-canvas .map-viewport { display: block; position: relative; overflow: hidden; overscroll-behavior: contain; touch-action: none; }
.map-canvas .map-viewport .map-grid { position: absolute; margin: 0; }
/* The panel a third wider, so names in it read in full. */
.map-layout { grid-template-columns: 168px minmax(0, 1fr) 430px; }
.map-panel .spot-row > .grow { min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1000px) { .map-layout { grid-template-columns: 1fr; } }

/* Build steps: the editor's rows, and the timeline of the ideal build. */
/* The steps as sentences: a grip to drag, the number, what's done; tapped open for the details, as chips. */
.seq-list { position: relative; }
.seq-step { border-top: 1px solid var(--hairline); background: var(--surface, var(--page)); position: relative; }
.seq-step.open { background: color-mix(in srgb, var(--brand-ink) 5%, var(--surface, var(--page))); }
.seq-step.dragging { z-index: 5; box-shadow: 0 8px 24px rgb(0 0 0 / .18); opacity: .95; }
.seq-line { display: flex; align-items: center; gap: 8px; padding: 6px 16px 6px 8px; min-height: 48px; }
.seq-grip { border: 0; background: none; color: var(--text-secondary); cursor: grab; touch-action: none; font-size: 18px; line-height: 1; padding: 8px 4px; border-radius: 6px; }
.seq-grip:hover, .seq-grip:focus-visible { background: var(--fill-muted); color: var(--text); }
.seq-step.dragging .seq-grip { cursor: grabbing; }
.seq-n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--fill-muted); color: var(--text-secondary); font-size: 12px; font-weight: 700;
    display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.seq-main { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; color: inherit; text-align: left; padding: 4px 0; cursor: pointer; font: inherit; }
.seq-icon { flex: none; font-size: 20px; width: 26px; text-align: center; }
.seq-text { min-width: 0; display: flex; flex-direction: column; }
.seq-say { font-weight: 600; overflow-wrap: anywhere; }
.seq-sub { color: var(--text-secondary); }
.seq-serve { flex: none; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--fill-muted); white-space: nowrap; }
.seq-time { flex: none; min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.seq-drop { position: absolute; left: 8px; right: 8px; height: 4px; border-radius: 2px; background: var(--brand-ink); display: none; pointer-events: none; z-index: 6; }
.seq-drop.shown { display: block; }
.seq-details { display: flex; flex-direction: column; gap: 10px; padding: 4px 16px 14px 76px; }
.seq-field { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 10px; align-items: start; }
.seq-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); padding-top: 7px; }
.seq-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.seq-chip { border: 1px solid var(--hairline); background: var(--page); color: var(--text); border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; }
.seq-chip:hover { border-color: var(--text-secondary); }
.seq-chip.on { background: var(--brand-ink); border-color: var(--brand-ink); color: var(--page); font-weight: 600; }
.seq-chip.collect { border-color: var(--amber); }
.seq-find { min-width: 180px; border-radius: 999px; padding: 5px 12px; font-size: 13px; }
.seq-find.on { border-color: var(--brand-ink); font-weight: 600; }
.seq-note { width: 100%; }
.seq-sec { width: 90px; }
.seq-more summary { cursor: pointer; color: var(--text-secondary); padding: 2px 0; }
.seq-more[open] { display: flex; flex-direction: column; gap: 10px; }
.seq-more select { max-width: 360px; }
.seq-foot { gap: 8px; padding-top: 4px; }
.seq-undo { gap: 10px; padding: 8px 16px; border-top: 1px solid var(--hairline); }
.seq-add { border-top: 1px solid var(--hairline); padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--fill-muted); }
.seq-add-head { display: flex; align-items: center; gap: 10px; }
@media (max-width: 800px) {
    .seq-details { padding-left: 16px; }
    .seq-field { grid-template-columns: 1fr; gap: 4px; }
    .seq-label { padding-top: 0; }
    .seq-serve { display: none; }
}
.build-stats { display: flex; flex-wrap: wrap; gap: 28px; }
.build-timeline { display: flex; flex-direction: column; gap: 4px; }
.build-line { display: grid; grid-template-columns: 44px minmax(0, 1.2fr) minmax(0, 2fr) 44px; gap: 10px; align-items: center; }
.build-line .build-at, .build-line .build-took { font-variant-numeric: tabular-nums; }
.build-line .build-took { text-align: right; }
.build-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.build-bar { position: relative; height: 14px; border-radius: 4px; background: var(--fill-muted); overflow: hidden; }
.build-bar .seg { position: absolute; top: 0; bottom: 0; }
.seg.walk, .build-key i.walk { background: color-mix(in srgb, var(--text-secondary) 55%, transparent); }
.seg.work, .build-key i.work { background: var(--brand-ink); }
.seg.wait, .build-key i.wait { background: var(--amber); }
.seg.runs, .build-key i.runs { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--amber) 45%, transparent) 0 4px, transparent 4px 8px); }
.build-key { display: flex; flex-wrap: wrap; gap: 14px; }
.build-key i { display: inline-block; width: 12px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
@media (max-width: 800px) {
    .build-line { grid-template-columns: 40px minmax(0, 1fr) 40px; }
    .build-line .build-bar { grid-column: 1 / -1; order: 5; }
}
/* A build's walk drawn over the map. */
.map-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 8; overflow: visible; }
.map-path polyline { fill: none; stroke: #E5484D; stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 8 5; vector-effect: non-scaling-stroke; }
.map-path-stop { position: absolute; z-index: 9; transform: translate(-50%, -50%); pointer-events: none; min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 999px; background: #E5484D; color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); }
.build-path-note { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 6px 10px; border-radius: 8px; background: var(--fill-muted); }
.map-edit-bar .build-pick { width: auto; max-width: 220px; }

/* Order replay: real orders beside their ghosts. */
.replay-controls { gap: 10px; flex-wrap: wrap; }
.replay-hours { display: flex; align-items: flex-end; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.replay-hour { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 44px; }
.replay-hour .bar-v { display: flex; align-items: flex-end; width: 22px; height: 90px; background: var(--fill-muted); border-radius: 4px; overflow: hidden; }
.replay-hour .bar-v i { display: block; width: 100%; background: var(--amber); }
.replay-axis { position: relative; height: 16px; margin-left: calc(38% + 10px); margin-right: 70px; }
.replay-axis span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
.replay-rows { display: flex; flex-direction: column; gap: 3px; max-height: 70vh; overflow-y: auto; }
.replay-row { display: grid; grid-template-columns: 38% minmax(0, 1fr) 60px; gap: 10px; align-items: center; }
.replay-label { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.replay-track { position: relative; height: 14px; background: var(--fill-muted); border-radius: 3px;
    background-image: linear-gradient(to right, var(--hairline) 1px, transparent 1px); }
.replay-track i { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.replay-real, .build-key i.replay-real { background: color-mix(in srgb, var(--brand-ink) 35%, transparent); }
.replay-track .replay-ghost, .build-key i.replay-ghost { background: none; border: 2px dashed var(--ok-ink); box-sizing: border-box; }
.replay-sat, .build-key i.replay-sat { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--amber) 70%, transparent) 0 4px, transparent 4px 8px); }
.replay-gap { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 800px) {
    .replay-row { grid-template-columns: minmax(0, 1fr) 54px; }
    .replay-row .replay-track { grid-column: 1 / -1; order: 3; }
    .replay-axis { margin-left: 0; margin-right: 0; }
}
.replay-track { background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--tick, 10%) - 1px), var(--hairline) calc(var(--tick, 10%) - 1px), var(--hairline) var(--tick, 10%)); }