/* Print Planner: the workshop job board.
   Every MakerWorld model is a job ticket hung under one of three rails (Ready to print, Buy to print, Waiting on
   stock). Steel board, aluminum rails, card-stock tickets, spool chips in Bambu's own colors, ink for actions. */

@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/Barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/Barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/Barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/Barlow-700.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/BarlowCondensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/BarlowCondensed-700.woff2') format('woff2'); }

/* ---------- Tokens ---------- */
:root {
    color-scheme: light;
    --font-ui: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-sign: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;

    /* Powder-coated steel board, aluminum rails, card-stock tickets */
    --board: #e4e8eb;
    --board-hole: rgba(18, 26, 32, 0.075);
    --pegboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11.7' r='2' fill='%23ffffff' fill-opacity='.6'/%3E%3Ccircle cx='11' cy='11' r='1.8' fill='%23121a20' fill-opacity='.085'/%3E%3C/svg%3E");
    --panel: #f3f5f6;
    --card: #ffffff;
    --card-edge: #cbd2d7;
    --rail-top: #fbfcfc;
    --rail-mid: #c6cdd2;
    --rail-low: #9aa4ab;
    --clip: #8c969d;

    --ink: #14191d;
    --ink-2: #384149;
    --ink-3: #505b64;
    --line: rgba(20, 25, 29, 0.12);
    --line-strong: rgba(20, 25, 29, 0.22);

    /* Tag stock: the three states, each a hue with a tint and a text-safe shade */
    --ready: #17703e;
    --ready-tag: #1a7a43;
    --ready-tint: #e2f2e8;
    --buy: #1d57b3;
    --buy-tag: #1f5fbf;
    --buy-tint: #e3ecf9;
    --wait: #8a5300;
    --wait-tag: #f0ae36;
    --wait-tint: #fbefd8;
    --out: #b3302a;
    --out-tint: #fbe5e3;
    --hold-tag: #5f6a73;
    /* Text on a filled tag or status mark */
    --tag-ink: #ffffff;

    --focus: #1f5fbf;
    --ink-button: #14191d;
    --ink-button-hover: #2a333a;
    --on-ink: #ffffff;

    --shadow-hang: 0 1px 0 rgba(20, 25, 29, 0.06), 0 6px 12px -7px rgba(20, 30, 40, 0.5);
    --shadow-lift: 0 2px 0 rgba(20, 25, 29, 0.06), 0 12px 15px -8px rgba(20, 30, 40, 0.45);
    --shadow-sheet: -18px 0 48px -24px rgba(20, 30, 40, 0.45);

    --radius-card: 4px;
    --radius-control: 6px;

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    --topbar-h: 60px;
    --order-w: 380px;
    --control-h: 40px;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html[data-theme="dark"] {
    color-scheme: dark;
    /* The same board after hours, under a bench lamp */
    --board: #14181b;
    --board-hole: rgba(0, 0, 0, 0.35);
    --pegboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11.7' r='2' fill='%23ffffff' fill-opacity='.05'/%3E%3Ccircle cx='11' cy='11' r='1.8' fill='%23000000' fill-opacity='.4'/%3E%3C/svg%3E");
    --panel: #1a1f23;
    --card: #20262b;
    --card-edge: #343d44;
    --rail-top: #7d878e;
    --rail-mid: #4a535a;
    --rail-low: #2c3338;
    --clip: #7d878e;

    --ink: #eef1f3;
    --ink-2: #c7ced4;
    --ink-3: #9ea8b0;
    --line: rgba(238, 241, 243, 0.12);
    --line-strong: rgba(238, 241, 243, 0.24);

    --ready: #6fd49b;
    --ready-tag: #6fd49b;
    --ready-tint: rgba(63, 174, 111, 0.16);
    --buy: #92bbff;
    --buy-tag: #92bbff;
    --buy-tint: rgba(63, 127, 224, 0.18);
    --wait: #f4c46a;
    --wait-tag: #f0ae36;
    --wait-tint: rgba(240, 174, 54, 0.16);
    --out: #ff9a90;
    --out-tint: rgba(255, 138, 128, 0.14);
    --hold-tag: #aab4bb;
    /* After hours the tags are lit, so their words go dark */
    --tag-ink: #10161a;

    --focus: #9cc2ff;
    --ink-button: #eef1f3;
    --ink-button-hover: #ffffff;
    --on-ink: #14191d;

    --shadow-hang: 0 1px 0 rgba(0, 0, 0, 0.4), 0 7px 13px -7px rgba(0, 0, 0, 0.85);
    --shadow-lift: 0 2px 0 rgba(0, 0, 0, 0.4), 0 13px 15px -8px rgba(0, 0, 0, 0.85);
    --shadow-sheet: -18px 0 48px -24px rgba(0, 0, 0, 0.8);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-padding-top: calc(var(--topbar-h) + 16px);
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--board);
    color: var(--ink);
    font: 400 16px/1.5 var(--font-ui);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--buy); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 3px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    top: 8px; left: 8px;
    z-index: 100;
    padding: 8px 14px;
    border-radius: var(--radius-control);
    background: var(--ink-button);
    color: var(--on-ink);
    font-weight: 600;
    transform: translateY(-160%);
}
.skip-link:focus { transform: none; }
.undo-btn { gap: 6px; padding: 4px 12px; font-size: 14px; }
.undo-btn:disabled { border-color: var(--line); background: transparent; color: var(--ink-3); cursor: default; }
/* Colors or Photos, for every view and the order: one filament shown both ways beside Undo, its spool on the left and
   the store's photo of its printed sample on the right; the one in use is filled, like any segmented control. Its
   space is held before the script fills it in, so filling it doesn't shift the rest of the top bar. */
.segmented.swatch-switch { min-width: 87px; min-height: var(--control-h); }
.segmented.swatch-switch button { display: grid; place-items: center; min-height: var(--control-h); padding: 0 9px; }
.swatch-switch .swatch-sample { --size: 24px; }
.order:focus-visible { outline-offset: -3px; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Controls ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--control-h);
    padding: 6px 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 140ms var(--ease-out), border-color 140ms var(--ease-out), color 140ms var(--ease-out);
}
.btn svg { flex: none; }
.btn-ink { background: var(--ink-button); color: var(--on-ink); }
.btn-ink:hover:not(:disabled) { background: var(--ink-button-hover); }
.btn-line { border-color: var(--line-strong); color: var(--ink); background: var(--card); }
.btn-line:hover:not(:disabled) { border-color: var(--ink-3); }
.btn-quiet { color: var(--ink-2); }
.btn-quiet:hover:not(:disabled) { background: var(--line); color: var(--ink); }
.btn-danger { border-color: color-mix(in srgb, var(--out) 45%, transparent); color: var(--out); background: var(--card); }
.btn-danger:hover:not(:disabled) { background: var(--out-tint); }
.btn-block { width: 100%; }
.btn-small { min-height: 32px; padding: 5px 12px; font-size: 14px; }
.btn:disabled { opacity: 0.5; }

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: var(--control-h);
    height: var(--control-h);
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--ink-2);
}
.icon-btn:hover:not(:disabled) { background: var(--line); color: var(--ink); }

/* A color's name where it opens its Bambu store page (a line on the order, a color in a model's sheet, a card on the
   Shelf), in the quiet underline of any name that opens something: ink, with a light rule that darkens on hover */
.name-link { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.name-link:hover { text-decoration-color: currentColor; }

.link-btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--buy);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.field {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--card);
    color: var(--ink);
}
.field::placeholder { color: var(--ink-3); opacity: 1; }
.field:hover { border-color: var(--ink-3); }
.field[aria-invalid="true"] { border-color: var(--out); }

.check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    cursor: pointer;
    font-weight: 500;
}
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--ink-button); }

.segmented { display: inline-flex; }
.segmented button {
    min-height: 36px;
    padding: 4px 14px;
    border: 1px solid var(--line-strong);
    background: var(--card);
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 600;
}
.segmented button + button { margin-left: -1px; }
.segmented button:first-child { border-radius: var(--radius-control) 0 0 var(--radius-control); }
.segmented button:last-child { border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.segmented button:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--panel); color: var(--ink); }
.segmented button[aria-pressed="true"] { position: relative; z-index: 1; border-color: var(--ink-button); background: var(--ink-button); color: var(--on-ink); }
.segmented button:disabled { background: var(--panel); color: var(--ink-3); text-decoration: line-through; }
.segmented-small button { min-height: 32px; padding: 4px 12px; font-size: 13px; }
/* With words (Appearance in Settings and Help), each Colors / Photos button leads with the filament it shows */
.swatch-segmented button { display: inline-flex; align-items: center; gap: 7px; }
.swatch-segmented .swatch-sample { --size: 18px; }

.stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--card);
}
.stepper button {
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--ink-2);
    font-size: 18px;
    line-height: 1;
}
.stepper button:hover:not(:disabled) { color: var(--ink); background: var(--line); }
.stepper output {
    min-width: 28px;
    text-align: center;
    font-weight: 700;
}

/* A workshop tag: a punched hole, then the word */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 9px 0 7px;
    border-radius: 3px;
    font-family: var(--font-sign);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.tag::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--card);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.35);
}
.tag-ready { background: var(--ready-tag); color: var(--tag-ink); }
.tag-buy { background: var(--buy-tag); color: var(--tag-ink); }
.tag-waiting { background: var(--wait-tag); color: #231400; }
.tag-empty, .tag-hold { background: var(--hold-tag); color: var(--tag-ink); }
.tag-done { background: var(--ink-2); color: var(--card); }

/* ---------- Spool chips: the color, drawn from Bambu's code, with a hub ---------- */
.spool {
    --size: 22px;
    /* The hub is painted in the spool's own box rather than as a box of its own, so it stays dead center wherever the
       spool lands on the pixel grid (a separate box rounds to pixels on its own, up to a pixel off at 18px). It's the
       card showing through, with a thin shadow on the color around it, so it reads the same on light and dark colors */
    --hub: radial-gradient(circle closest-side, var(--card) calc(36% - 1.2px), rgba(0, 0, 0, 0.26) calc(36% - 0.6px) calc(36% - 0.2px), transparent calc(36% + 0.4px));
    position: relative;
    flex: none;
    display: inline-block;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: var(--hub), var(--fill, #9aa4ab);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
.spool[data-translucent] {
    background:
        var(--hub),
        linear-gradient(var(--fill-alpha, rgba(154, 164, 171, 0.6)), var(--fill-alpha, rgba(154, 164, 171, 0.6))),
        repeating-conic-gradient(#d8dde1 0 25%, #f7f8f9 0 50%) 0 0 / 8px 8px;
}
.spool-lg { --size: 64px; }
.spool-md { --size: 32px; }
.spool-sm { --size: 18px; }
.spool-xs { --size: 14px; --hub: none; }
/* A store photo on a chip (the Photos style, or a color with no code) is a small square tile of the whole printed
   sample, the RFID badge trimmed off, rather than a circle cut from its middle. Until the photo arrives
   (data-photo="loading") the tile shows its color, already square, so nothing jumps when it lands. */
.spool[data-photo] { --hub: none; border-radius: max(4px, calc(var(--size) * 0.14)); }
.spool[data-photo="ready"] { background: var(--photo) center / cover no-repeat; }

/* Where filament is browsed (catalog, picker, shelf), a photo tile opens the store photo full size */
.photo-tile {
    position: relative;
    display: inline-grid;
    flex: none;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: none;
    line-height: 0;
    cursor: zoom-in;
}
.photo-tile:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.photo-tile-zoom {
    position: absolute;
    top: 3px;
    right: 3px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: rgba(14, 18, 21, 0.74);
    color: #fff;
    opacity: 0;
    transition: opacity 120ms var(--ease-out);
}
.photo-tile-zoom svg { width: 12px; height: 12px; }
.photo-tile:hover .photo-tile-zoom, .photo-tile:focus-visible .photo-tile-zoom { opacity: 1; }
@media (hover: none) { .photo-tile-zoom { opacity: 1; } }
/* After hours a black spool on a dark card needs its rim */
html[data-theme="dark"] .spool { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }

/* Status marks on a spool: owned ✓, sold out ✕, unknown ? */
.spool[data-mark]::before {
    position: absolute;
    right: -4px;
    bottom: -4px;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--card);
    font: 800 8px/1 var(--font-ui);
    color: var(--tag-ink);
}
.spool[data-mark="owned"]::before { content: '✓'; background: var(--ready-tag); }
.spool[data-mark="out"]::before { content: '✕'; background: var(--out); }
.spool[data-mark="unknown"]::before { content: '?'; background: var(--hold-tag); }

/* ---------- Top bar ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: var(--space-6);
    height: var(--topbar-h);
    padding: 0 var(--space-6);
    background: var(--panel);
    border-bottom: 1px solid var(--line);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    text-decoration: none;
}
.brand-mark { width: 30px; height: 30px; flex: none; }
.brand-mark .mark-card { fill: var(--ink-button); }
.brand-mark .mark-hole { fill: var(--panel); }
.brand-mark .mark-spool { fill: var(--wait-tag); }
.brand-mark .mark-hub { fill: var(--ink-button); }
.brand-name {
    font-family: var(--font-sign);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.tabs {
    display: flex;
    align-self: stretch;
    gap: var(--space-1);
}
.tabs a {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    color: var(--ink-2);
    font-family: var(--font-sign);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-decoration: none;
}
.tabs a:hover { color: var(--ink); }
.tabs a[aria-current="page"] { color: var(--ink); }
.tabs a[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 12px; right: 12px; bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--ink);
}
.tab-count {
    min-width: 22px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--line);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-align: center;
}

.topbar-tools {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
}

.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-3);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.status-chip:hover { background: var(--line); color: var(--ink-2); }
.status-chip::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ready-tag);
}
.status-chip[data-tone="busy"]::before { background: var(--wait-tag); animation: pulse 1.2s ease-in-out infinite; }
.status-chip[data-tone="error"]::before { background: var(--out); }
.status-chip[data-tone="stale"]::before { background: var(--wait-tag); }

@keyframes pulse { 50% { opacity: 0.35; } }

.account-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: var(--control-h);
    padding: 0 12px 0 4px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--card);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}
.account-btn.signed-out { padding: 0 14px; }
.avatar {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--ink-button);
    color: var(--on-ink);
    font-size: 12px;
    font-weight: 700;
}
.plus-badge {
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--buy-tint);
    color: var(--buy);
    font-family: var(--font-sign);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---------- Layout: the board in the middle, the order pinned to the right ---------- */
.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--order-w);
    min-height: calc(100vh - var(--topbar-h));
}

.workspace {
    min-width: 0;
    padding: var(--space-6) var(--space-8) var(--space-12);
    /* Pegboard: punched holes, each with a lit lower rim, on a steel ground */
    background-image: var(--pegboard);
    background-size: 22px 22px;
}
.workspace:focus { outline: none; }

.view-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.view-title {
    font-family: var(--font-sign);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.1;
    text-transform: uppercase;
}
.view-lede { max-width: 62ch; margin-top: 6px; color: var(--ink-2); }

/* ---------- Intake: adding a model ---------- */
.intake {
    max-width: 920px;
    margin-bottom: var(--space-8);
    padding: var(--space-5);
    border: 1px solid var(--card-edge);
    border-radius: var(--radius-card);
    background: var(--card);
    box-shadow: var(--shadow-hang);
}
.intake-label {
    display: block;
    margin-bottom: var(--space-2);
    font-family: var(--font-sign);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-2);
}
.intake-row { display: flex; gap: var(--space-2); }
.intake-row .field { flex: 1; }
.intake-row .btn { min-height: 44px; padding: 0 20px; }
.intake-help { max-width: 70ch; margin-top: var(--space-2); color: var(--ink-3); font-size: 14px; }
/* Once there are models, adding one is a single line: MakerWorld's mark, the field, the button */
.intake-compact { margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4); }
.intake-compact form { display: grid; gap: var(--space-2); }
.intake-compact .intake-steps, .intake-compact .intake-error { margin-top: 0; }
/* MakerWorld's own mark leads the field, as it did on the first site, and opens MakerWorld, where the links come from */
.makerworld-link {
    display: grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--card);
}
.makerworld-link:hover { border-color: var(--ink-3); }
.makerworld-link img { width: 28px; height: 28px; }
html[data-theme="dark"] .makerworld-link img { filter: invert(1); }
.kbd {
    padding: 1px 5px;
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--panel);
    font: 600 12px/1.4 var(--font-ui);
    color: var(--ink-2);
}
.intake-error { margin-top: var(--space-2); color: var(--out); font-weight: 600; font-size: 14px; }
.intake-error .link-btn { margin-left: 6px; }
.intake-steps { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); color: var(--ink-2); font-size: 14px; }
.intake-steps li { display: inline-flex; align-items: center; gap: 6px; }
.intake-steps li[data-done]::before { content: '✓'; color: var(--ready); font-weight: 800; }
.intake-steps li[data-active]::before { content: ''; width: 10px; height: 10px; border: 2px solid var(--ink-3); border-top-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; }
.intake-steps li[data-pending] { color: var(--ink-3); }
@keyframes spin { to { transform: rotate(360deg); } }

/* First visit: how the board works */
.first-run { max-width: 920px; margin: 0 0 var(--space-8); }
.first-run-title { margin-bottom: var(--space-3); color: var(--ink-2); font-family: var(--font-sign); font-size: 17px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.first-run-rails {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
}
.first-run-rails li {
    padding: var(--space-4) var(--space-1) 0;
    border-top: 3px solid var(--rail-mid);
}
.first-run-rails li[data-state="ready"] { border-top-color: var(--ready-tag); }
.first-run-rails li[data-state="buy"] { border-top-color: var(--buy-tag); }
.first-run-rails li[data-state="waiting"] { border-top-color: var(--wait-tag); }
.first-run h3 { font-family: var(--font-sign); font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; }
.first-run-rails p { margin-top: 4px; color: var(--ink-2); font-size: 15px; }
.first-run-note { max-width: 70ch; margin-top: var(--space-5); color: var(--ink-2); }

/* ---------- The board: every job on one rail, ready to print first ---------- */
.workspace { container: workspace / inline-size; }
.rail-key {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: var(--hold-tag);
}
.rail-key[data-rail="ready"] { background: var(--ready-tag); }
.rail-key[data-rail="buy"] { background: var(--buy-tag); }
.rail-key[data-rail="waiting"] { background: var(--wait-tag); }
.rail-count {
    margin-left: 2px;
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 700;
    color: var(--ink-3);
    letter-spacing: 0;
}
.rail-hint { max-width: 60ch; margin-top: 4px; color: var(--ink-2); font-size: 15px; line-height: 1.4; }
/* Jobs MakerWorld listed no colors for: setup to finish, above the board rather than a fourth state */
.attention { max-width: 920px; margin: 0 0 var(--space-6); padding: var(--space-3) var(--space-4) var(--space-1); border: 1px dashed var(--line-strong); border-radius: var(--radius-card); background: var(--panel); }
.attention-head { display: grid; gap: 2px; }
.attention-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-sign); font-size: 18px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.attention .rail-hint { margin-top: 0; font-size: 14px; }
.attention-list { margin-top: var(--space-2); }
.attention-item { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }

.attention-name { justify-self: start; padding: 0; border: 0; background: none; font-weight: 600; text-align: left; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.attention-name:hover { text-decoration-color: currentColor; }

/* The filter names the three states with their counts and narrows the board to one; its hint says what the view means */
.jobs { margin-bottom: var(--space-8); }
.jobs-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.board-filter button { display: inline-flex; align-items: center; gap: 7px; }
.board-filter .rail-key { width: 10px; height: 10px; }
.filter-count { margin-left: 1px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.board-filter [aria-pressed="true"] .filter-count { color: inherit; }
.jobs-hint { color: var(--ink-2); font-size: 14px; }
.jobs-empty { max-width: 60ch; padding: var(--space-5) 0 var(--space-2); color: var(--ink-2); }
.rail-bar {
    position: relative;
    height: 9px;
    margin: 0 -6px;
    border-radius: 5px;
    background: linear-gradient(180deg, var(--rail-top) 0%, var(--rail-mid) 55%, var(--rail-low) 100%);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.16);
}
.rail-bar::before, .rail-bar::after {
    content: '';
    position: absolute;
    top: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--rail-low);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.45);
}
.rail-bar::before { left: 7px; }
.rail-bar::after { right: 7px; }
/* Shelf and catalog groups sit on the same aluminum lip */
.shelf-lip { margin: 0 -6px var(--space-4); }

/* Tickets hang on short clips, as many across as fit, each only as tall as its colors: the first row from the rail,
   the rows below from pegs in the board */
.tickets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr));
    align-items: start;
    gap: 20px var(--space-4);
    padding-top: 18px;
}

/* A job ticket: the model and where it stands, one line per color, and the next step */
.ticket {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--card-edge);
    border-radius: var(--radius-card);
    background: var(--card);
    box-shadow: var(--shadow-hang);
    transition: box-shadow 160ms var(--ease-out);
}
.ticket::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    width: 6px;
    height: 20px;
    margin-left: -3px;
    background:
        radial-gradient(circle at 3px 3px, var(--clip) 0 2.5px, transparent 3px) no-repeat,
        linear-gradient(var(--clip), var(--clip)) 2px 3px / 2px 17px no-repeat;
}
.ticket::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 50%;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    border-radius: 50%;
    background: var(--board);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
.ticket:hover { box-shadow: var(--shadow-lift); }
.ticket:has(.ticket-open:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }

.ticket-no {
    color: var(--ink-3);
    font-family: var(--font-sign);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* A ticket reads top down: the model's name, centered under the punched hole; its photo, the full width of the
   ticket; then where it stands and every color it takes */
.ticket-title { padding: 18px var(--space-4) 10px; font-size: 16px; font-weight: 600; line-height: 1.3; text-align: center; }
/* Once tickets stand side by side, every title takes two lines' room, so the photos in a row line up */
@media (min-width: 600px) {
    .ticket-title { display: flex; align-items: center; min-height: calc(2.6em + 28px); }
}
/* Long MakerWorld titles stop at two lines here; the model's sheet has the whole name */
.ticket-open {
    display: -webkit-box;
    overflow: hidden;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    text-align: center;
    font-weight: 600;
    color: var(--ink);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.ticket-open:hover { text-decoration: underline; text-underline-offset: 3px; }
.ticket-open:focus-visible { outline: none; }
.ticket-open::after { content: ''; position: absolute; inset: 0; z-index: 0; }
.ticket .ticket-photo { border-width: 1px 0; border-radius: 0; }
.ticket-state { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 10px var(--space-3) 8px; }
.ticket-summary { color: var(--ink-2); font-size: 13px; font-weight: 600; }
.ticket[data-state="ready"] .ticket-summary { color: var(--ready); font-weight: 700; }
.ticket[data-state="waiting"] .ticket-summary { color: var(--wait); font-weight: 700; }
.ticket-menu { width: 32px; height: 32px; margin-left: auto; }
.ticket-foot .bell-btn + .ticket-menu { margin-left: 0; }
.ticket-menu, .ticket-foot .btn, .ticket-foot .icon-btn, .bom-more { position: relative; z-index: 1; }

/* A model's photo, wherever it's listed, in a 4:3 frame: MakerWorld's covers are 4:3 and fill it, and any other photo
   shows whole on the panel gray, never cropped (a model's other photos are often square or portrait). It opens full
   size; its corners badge shows on hover and focus, and always on touch screens. */
.model-photo, .model-photo-empty {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--panel);
}
.model-photo-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.model-photo-open:focus-visible { outline: none; }
.model-photo:has(> .model-photo-open:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.model-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.model-photo .photo-zoom-badge { right: 5px; bottom: 5px; min-height: 22px; padding: 0 6px; opacity: 0; transition: opacity 120ms var(--ease-out); }
.model-photo:hover .photo-zoom-badge, .model-photo:has(:focus-visible) .photo-zoom-badge { opacity: 1; }
@media (hover: none) { .model-photo .photo-zoom-badge { opacity: 1; } }

/* On a ticket or card, pointing at the photo (or focusing it) shows round arrows that step through the model's other
   photos in place, and dots for where you are, in the badge's dark glass. Touch screens have no hover: a sideways
   swipe steps, the dots stay shown, and the page still scrolls up and down over the photo. */
.model-photo[data-photos] { touch-action: pan-y pinch-zoom; }
.photo-step {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(14, 18, 21, 0.74);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.28);
    opacity: 0;
    transition: opacity 120ms var(--ease-out), background-color 120ms var(--ease-out), transform 120ms var(--ease-out);
}
.photo-step[data-step="-1"] { left: 8px; }
.photo-step[data-step="1"] { right: 8px; }
.photo-step:hover { background: rgba(14, 18, 21, 0.92); }
.photo-step:active { transform: scale(0.9); }
.photo-step svg { width: 18px; height: 18px; }
.photo-dots {
    position: absolute;
    right: 0;
    bottom: 8px;
    left: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    width: max-content;
    margin: 0 auto;
    padding: 5px 7px;
    border-radius: 999px;
    background: rgba(14, 18, 21, 0.6);
    opacity: 0;
    transition: opacity 120ms var(--ease-out);
    pointer-events: none;
}
.photo-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-out); }
.photo-dot[data-on] { background: #fff; }
.photo-dot[data-edge] { transform: scale(0.66); }
.model-photo:hover :is(.photo-step, .photo-dots), .model-photo:has(:focus-visible) :is(.photo-step, .photo-dots) { opacity: 1; }
@media (hover: none) {
    .photo-step { display: none; }
    .photo-dots { opacity: 1; }
}
.model-photo-empty { display: grid; place-items: center; color: var(--ink-3); font-size: 11px; line-height: 1.2; text-align: center; }
.ticket-photo-empty { display: grid; place-items: center; height: 100%; color: var(--ink-3); font-size: 11px; line-height: 1.2; text-align: center; }

/* The bill of materials: a line per color with what it takes */
.bom { margin: 0 var(--space-3); }
.bom-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 31px;
    padding: 3px 0;
    border-top: 1px solid var(--line);
}
.bom-text { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
.bom-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 14px; font-weight: 600; }
.bom-meta { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-3); font-size: 13px; }
.bom-state {
    font-family: var(--font-sign);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.bom-row .spool[data-photo] { --size: 28px; }
.bom-row[data-status="buy"] .bom-state { color: var(--buy); }
.bom-row[data-status="out"] .bom-state { color: var(--out); }
.bom-row[data-status="unknown"] .bom-state { color: var(--ink-3); }
.bom-more { margin: 0 var(--space-3); padding: 6px 0 0; color: var(--ink-2); font-size: 14px; }
/* Owned colors on a Buy or Waiting ticket fold into one line: they aren't what's in the way */
.bom-owned { display: flex; align-items: center; gap: 10px; min-height: 29px; padding: 4px 0 0; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 13px; font-weight: 600; }
.bom-owned-chips { display: inline-flex; flex: none; }
.bom-owned-chips .spool + .spool { margin-left: -5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 0 2px var(--card); }
.bom-empty { margin: 0 var(--space-3); padding: 10px 0 2px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 14px; }
.ticket-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding: 10px var(--space-3) var(--space-3);
}
/* The restock email: a bell beside the ⋯ on every ticket that has one, quiet until it's on, then lit */
.bell-btn { width: 32px; height: 32px; margin-left: auto; color: var(--ink-2); }
.bell-btn[aria-checked="true"], .bell-btn[aria-checked="true"]:hover:not(:disabled) { color: var(--wait); }

/* The one authored moment: a job that just became printable gets stamped */
.ticket[data-stamped] .tag-ready { animation: stamp 560ms var(--ease-out) 1; }
@keyframes stamp {
    0% { transform: scale(1.9) rotate(-8deg); opacity: 0; }
    55% { transform: scale(0.94) rotate(1deg); opacity: 1; }
    100% { transform: none; }
}
/* On hold and Done: quieter drawers at the foot of the board */
.drawer-list {
    margin-bottom: var(--space-4);
    border: 1px solid var(--card-edge);
    border-radius: var(--radius-card);
    background: var(--panel);
}
.drawer-list > summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 52px;
    padding: 0 var(--space-4);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-sign);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.drawer-list > summary::-webkit-details-marker { display: none; }
.drawer-list > summary::after {
    content: '';
    width: 9px; height: 9px;
    margin-left: auto;
    border-right: 2px solid var(--ink-2);
    border-bottom: 2px solid var(--ink-2);
    transform: rotate(45deg);
    transition: transform 160ms var(--ease-out);
}
.drawer-list[open] > summary::after { transform: rotate(-135deg); }
.drawer-list-body { padding: 0 var(--space-4) var(--space-3); }
/* What's on hold or printed, as cards laid out like tickets: the name, the photo the full width of the card so it's
   plain what each one is, then its colors and the way back to the board */
.drawer-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: var(--space-3);
    margin-top: var(--space-3);
}
.drawer-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--card-edge);
    border-radius: var(--radius-card);
    background: var(--card);
}
.drawer-card .drawer-card-photo { border-width: 1px 0; border-radius: 0; }
/* The body fills the card, so Back to board sits at its foot and the buttons across a row line up, whatever's above */
.drawer-card-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px var(--space-3) var(--space-3); }
.drawer-card-body > .btn { margin-top: auto; }
.drawer-card-name { padding: 12px var(--space-3) 10px; font-weight: 600; line-height: 1.3; text-align: center; }
@media (min-width: 600px) {
    .drawer-card-name { display: flex; align-items: center; min-height: calc(2.6em + 22px); }
}
.drawer-card-name button {
    display: -webkit-box;
    overflow: hidden;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font-weight: 600;
    text-align: center;
    text-decoration: underline;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 3px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.drawer-card-name button:hover { text-decoration-color: currentColor; }
.drawer-card-colors { display: flex; align-items: center; min-height: 20px; }
.drawer-card-chips { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.drawer-card-more { margin-left: 4px; color: var(--ink-3); font-size: 12px; font-weight: 600; }
.drawer-card-none { color: var(--ink-3); font-size: 13px; }
/* An On hold card's state: the ticket's words beside the board filter's key, the ticket summary's colors */
.drawer-card-state { display: flex; align-items: center; gap: 7px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.drawer-card-state .rail-key { width: 10px; height: 10px; }
.drawer-card-state[data-rail="ready"] { color: var(--ready); font-weight: 700; }
.drawer-card-state[data-rail="waiting"] { color: var(--wait); font-weight: 700; }

/* Dragging a model: it fades where it was, the places it can go get a dashed edge, and the one under the pointer a
   solid one and a tint. An empty drawer shows up as a slot, just its name, only then. */
[data-drag-id] { -webkit-user-drag: element; }
.is-drag-source { opacity: 0.4; }
[data-drop-state] { outline: 2px dashed var(--ink-3); outline-offset: 6px; border-radius: var(--radius-card); }
[data-drop-state="over"] { outline: 3px solid var(--focus); background-color: color-mix(in srgb, var(--focus) 7%, transparent); }
.drop-slot { display: none; }
html[data-dragging] .drop-slot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px var(--space-3);
    min-height: 64px;
    margin-bottom: var(--space-4);
    padding: 10px var(--space-4);
    border-radius: var(--radius-card);
    background: var(--panel);
    color: var(--ink);
    font-family: var(--font-sign);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ---------- The order slip ---------- */
.order {
    position: sticky;
    top: var(--topbar-h);
    height: calc(100vh - var(--topbar-h));
    display: flex;
    flex-direction: column;
    background: var(--card);
    border-left: 1px solid var(--card-edge);
}
.order-head {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5) var(--space-3);
}
.order-title { font-family: var(--font-sign); font-size: 26px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.order-total { color: var(--ink-2); font-weight: 600; }
.order-close { display: none; margin-left: auto; align-self: center; }
.order-scroll { flex: 1; overflow-y: auto; padding: 0 var(--space-5) var(--space-5); overscroll-behavior: contain; }
.order-empty { padding: var(--space-4) 0; color: var(--ink-2); }
.order-empty h3 { margin-bottom: var(--space-2); font-family: var(--font-sign); font-size: 18px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink); }
.order-empty p + p { margin-top: var(--space-2); }

/* Price break: Bambu's bulk-sale ladder with where this order sits */
.price-break {
    margin-bottom: var(--space-5);
    padding: var(--space-3) var(--space-4) var(--space-4);
    border: 1px solid var(--card-edge);
    border-radius: var(--radius-card);
    background: var(--panel);
}
.price-break-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-sign); font-size: 14px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-2); }
.price-break-text { margin: 4px 0 var(--space-3); font-weight: 600; }
.ladder { display: grid; grid-template-columns: repeat(var(--steps, 4), 1fr); gap: 4px; }
.ladder li {
    padding: 6px 4px 5px;
    border-radius: 3px;
    background: var(--card);
    border: 1px solid var(--line);
    text-align: center;
    line-height: 1.15;
}
.ladder b { display: block; font-size: 16px; }
.ladder span { color: var(--ink-3); font-size: 12px; }
.ladder li[data-reached] { background: var(--ready-tint); border-color: color-mix(in srgb, var(--ready) 35%, transparent); }
.ladder li[data-reached] b { color: var(--ready); }
.ladder li[data-next] { border-style: dashed; border-color: var(--ink-3); }

.order-group { margin-bottom: var(--space-5); }
.order-group-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--ink);
    font-family: var(--font-sign);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.order-group-note { margin: 6px 0 2px; color: var(--ink-3); font-size: 13px; font-style: italic; }
.order-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "spool name qty"
        "spool meta qty"
        "spool extra extra";
    align-items: center;
    gap: 4px 12px;
    padding: 10px 0 12px;
    border-bottom: 1px solid var(--line);
    transition: background-color 400ms var(--ease-out);
}
.order-line[data-highlight] { background: var(--buy-tint); }
.order-line .spool { grid-area: spool; align-self: start; margin-top: 2px; }
.order-name { grid-area: name; font-weight: 600; line-height: 1.25; }
.order-meta { grid-area: meta; color: var(--ink-3); font-size: 13px; line-height: 1.3; }
.order-qty { grid-area: qty; }
/* The shop checklist: choose Refill or Spool, open the store page, tick Done, in that reading order */
.shop-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "spool name"
        "spool meta"
        "spool actions";
    align-items: center;
    gap: 2px 12px;
    padding: 12px 4px;
}
.shop-row > .spool { grid-area: spool; align-self: start; margin-top: 4px; }
.shop-batch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 4px; border-top: 1px solid var(--line); }
.shop-batch-label { color: var(--ink-2); font-weight: 600; }
.shop-name { grid-area: name; font-weight: 600; }
.shop-meta { grid-area: meta; color: var(--ink-3); font-size: 13px; }
.shop-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 8px; }
.shop-done { margin-left: auto; font-weight: 600; }
.shop-row[data-opened]:not([data-done]) .shop-meta { color: var(--buy); font-weight: 600; }
.shop-row[data-done] .shop-name { color: var(--ink-3); text-decoration: line-through; text-decoration-thickness: 1px; }
.shop-all-done { align-self: center; color: var(--ready); font-weight: 600; }
.order-extra { grid-area: extra; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 4px; }
.order-line-wait { grid-template-areas: "spool name name" "spool meta meta" "spool extra extra"; }
.order-line-wait .order-name { color: var(--ink-2); }
.order-line-wait .stock-mark { margin-left: 6px; }
.order-group-wait .order-group-head { border-bottom-color: var(--wait-tag); }
.order-stock { display: none; margin: 0 0 var(--space-4); color: var(--ink-3); font-size: 13px; }
.order-stock .link-btn { font-size: 13px; }
.board-stock { display: none; margin: calc(var(--space-2) * -1) 0 var(--space-5); color: var(--ink-3); font-size: 13px; }
.board-stock .link-btn { font-size: 13px; }
@media (max-width: 960px) { .board-stock { display: block; } }
.stock-mark { font-size: 13px; font-weight: 600; }
.stock-mark[data-state="in"] { color: var(--ready); }
.stock-mark[data-state="out"] { color: var(--out); }
.stock-mark[data-state="unknown"] { color: var(--ink-3); }

.order-foot {
    padding: var(--space-4) var(--space-5) var(--space-5);
    border-top: 1px solid var(--card-edge);
    background: var(--card);
}
.order-foot .btn { min-height: 48px; font-size: 16px; }
.order-foot-note { margin-top: var(--space-2); color: var(--ink-3); font-size: 13px; }

/* ---------- Shelf ---------- */
.rack {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: var(--space-4);
}
/* A spool you own: its chip and name, then where it's used and its Bambu stock (or that it's on the order), and a foot
   with how many spools and the ⋯ menu at its end, like a ticket's. The foot sits at the bottom of the card, so across
   a row the tiles line up at the top and the feet at the bottom, whatever wraps in between. */
.rack-item {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: 12px;
    padding: var(--space-3);
    border: 1px solid var(--card-edge);
    border-radius: var(--radius-card);
    background: var(--card);
    box-shadow: var(--shadow-hang);
}
.rack-item > .spool, .rack-item > .photo-tile { align-self: start; }
.rack-text { min-width: 0; padding-top: 4px; }
.rack-name { margin-bottom: 3px; font-weight: 600; line-height: 1.25; }
.rack-meta { color: var(--ink-3); font-size: 13px; line-height: 1.4; }
.rack-actions { grid-column: 1 / -1; grid-row: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.rack-qty { display: inline-flex; align-items: center; gap: 8px; }
.rack-qty-label { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.rack-menu { width: 32px; height: 32px; margin-left: auto; }
.rack-group + .rack-group { margin-top: var(--space-8); }
.rack-group-title { margin-bottom: var(--space-3); font-family: var(--font-sign); font-size: 18px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }

/* ---------- Catalog ---------- */
.toolbar {
    position: sticky;
    top: var(--topbar-h);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: 0 calc(var(--space-8) * -1) var(--space-6);
    padding: var(--space-3) var(--space-8);
    background: color-mix(in srgb, var(--board) 94%, transparent);
    border-bottom: 1px solid var(--line);
}
.toolbar .field { max-width: 420px; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
/* How the list looks goes at the end of the row, after what's in it (the picker's Colors / Photos switch) */
.filter-row > .swatch-switch { margin-left: auto; }
.select-label { color: var(--ink-2); font-size: 14px; font-weight: 600; }
.labeled-control { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.select {
    min-height: var(--control-h);
    padding: 0 36px 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--card) no-repeat right 12px center / 12px 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23505b64' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    color: var(--ink);
    font-weight: 600;
    font-size: 15px;
    appearance: none;
}
html[data-theme="dark"] .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%239ea8b0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.select:hover { border-color: var(--ink-3); }
.catalog-line { margin-bottom: var(--space-8); }
.catalog-line-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: var(--space-3); }
.catalog-line-title { font-family: var(--font-sign); font-size: 20px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
.catalog-line-meta { color: var(--ink-3); font-size: 14px; }
.catalog-empty { max-width: 60ch; color: var(--ink-2); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(172px, 1fr)); gap: 8px; }
.catalog-line[data-folded] { margin-bottom: var(--space-5); }
.catalog-hide { margin-left: auto; font-size: 14px; }
/* A material line's strip: every color in it, in fan-deck order. Never cut short: the order runs around the color wheel,
   so a strip cut off at a count hid whole hues (PLA Basic's greens, blues and purples). Where it can't fit, it wraps. */
.line-dots { display: inline-flex; flex-wrap: wrap; row-gap: 4px; }
.line-dots .spool { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 0 2px var(--card); }
.line-dots .spool + .spool { margin-left: -2px; }
.line-preview {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--card-edge);
    border-radius: var(--radius-card);
    background: var(--card);
    text-align: left;
}
.line-preview:hover { border-color: var(--ink-3); }
.line-preview-label { flex: none; color: var(--ink); font-size: 14px; font-weight: 600; }
.line-preview-label::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.swatch {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 8px 10px;
    border: 1px solid var(--card-edge);
    border-radius: var(--radius-card);
    background: var(--card);
    text-align: left;
}
.swatch:hover { border-color: var(--ink-3); }
/* The card fills its cell, so every card in a row is as tall as the tallest (a neighbor's name on two lines) rather
   than sitting short at the top of it. In Photos, the swatch's tile is a button of its own laid over the card's left
   edge, in the same cell: it opens the photo, the rest of the card the swatch's menu. It's centered by the grid, not a
   transform, so it lands on whole pixels, with the same 8px inside the card's border on the left as above and below. */
.swatch-cell { display: grid; }
.swatch-cell > * { grid-area: 1 / 1; }
.swatch-cell-photo > .photo-tile { z-index: 1; align-self: center; justify-self: start; margin-left: 9px; }
.swatch-cell-photo .photo-tile .spool { --size: 48px; }
.swatch-cell-photo .swatch { min-height: 66px; padding-left: calc(9px + 48px + 12px); }
.swatch-text { flex: 1; min-width: 0; line-height: 1.2; }
/* A small + says a swatch has somewhere to go: a job, the shelf or the order */
.swatch::after {
    content: '';
    flex: none;
    width: 14px;
    height: 14px;
    background: var(--ink-3);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 2v10M2 7h10' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 2v10M2 7h10' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.swatch:hover::after, .swatch[aria-expanded="true"]::after { background: var(--ink); }
.swatch-name { display: block; font-weight: 600; font-size: 14px; line-height: 1.2; overflow-wrap: anywhere; }
.swatch-stock { display: block; margin-top: 2px; font-size: 12px; font-weight: 600; }
.swatch[data-state="in"] .swatch-stock { color: var(--ready); }
.swatch[data-state="out"] .swatch-stock { color: var(--out); }
.swatch[data-state="unknown"] .swatch-stock { color: var(--ink-3); }
.swatch-owned { color: var(--ink-3); font-weight: 500; }

/* ---------- Sheets, dialogs, menus, toasts ---------- */
.scrim {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(14, 18, 21, 0.42);
    animation: fade-in 160ms var(--ease-out);
}
@keyframes fade-in { from { opacity: 0; } }

/* Scrims, sheets and dialogs share one level, so a dialog opened from a sheet dims the sheet too */
.sheet {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    width: min(560px, 100vw);
    background: var(--card);
    box-shadow: var(--shadow-sheet);
    animation: sheet-in 260ms var(--ease-out);
}
@keyframes sheet-in { from { transform: translateX(40px); opacity: 0; } }
.sheet:focus { outline: none; }
.sheet-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-3) var(--space-5);
    border-bottom: 1px dashed var(--line-strong);
}
.sheet-heading { flex: 1; min-width: 0; }
/* The job sheet is the ticket taken off the board: the same punched hole above the same tear line */
.sheet-ticket .sheet-head { position: relative; padding-top: 30px; background: var(--card); }
.sheet-ticket .sheet-head::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: var(--board);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
/* ...held at the top edge by the rail's clip, through that hole */
.sheet-ticket .sheet-head::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 22px;
    height: 17px;
    margin-left: -11px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent 0 9px, var(--clip) 9px 13px, transparent 13px) bottom / 100% 10px no-repeat,
        linear-gradient(180deg, var(--rail-top), var(--rail-mid) 60%, var(--rail-low)) top / 100% 7px no-repeat;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
.sheet-title { font-size: 22px; font-weight: 700; line-height: 1.25; }
.sheet-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sheet-body { flex: 1; overflow-y: auto; padding: var(--space-5); overscroll-behavior: contain; }
.sheet-foot { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--line); }
.sheet-foot-split { justify-content: space-between; }
.picker-count { align-self: center; margin-left: auto; color: var(--ink-2); font-size: 14px; }
.sign-in-list { display: grid; gap: 8px; margin-top: var(--space-3); padding-left: 20px; list-style: disc; color: var(--ink-2); }
.sign-in-list b { color: var(--ink); }
.sheet-lede { margin-top: 4px; color: var(--ink-2); font-size: 14px; }
.sheet-title:focus { outline: none; }
.sheet-section + .sheet-section { margin-top: var(--space-8); }
.sheet-section-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: var(--space-3); font-family: var(--font-sign); font-size: 17px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); }

.dialog {
    position: fixed;
    top: 50%; left: 50%;
    z-index: 60;
    display: flex;
    flex-direction: column;
    width: min(640px, calc(100vw - 32px));
    max-height: min(760px, calc(100vh - 48px));
    border-radius: 8px;
    background: var(--card);
    box-shadow: var(--shadow-lift);
    transform: translate(-50%, -50%);
    animation: dialog-in 220ms var(--ease-out);
}
@keyframes dialog-in { from { opacity: 0; transform: translate(-50%, -46%); } }
.dialog:focus { outline: none; }
.dialog-small { width: min(460px, calc(100vw - 32px)); }

.gallery { position: relative; margin: 0 calc(var(--space-5) * -1) var(--space-5); background: var(--panel); aspect-ratio: 16 / 10; max-height: 320px; width: calc(100% + var(--space-5) * 2); }
.gallery img { width: 100%; height: 100%; object-fit: contain; }
.gallery-nav { position: absolute; top: 50%; left: 8px; right: 8px; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
.gallery-nav .icon-btn { pointer-events: auto; background: var(--card); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.gallery-count { position: absolute; right: 10px; bottom: 10px; padding: 2px 8px; border-radius: 999px; background: var(--card); font-size: 13px; font-weight: 600; }
/* The job sheet's photo opens full size */
.gallery-open { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery-open:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.gallery .photo-zoom-badge { top: 10px; right: 10px; bottom: auto; }

/* A photo that opens full size says so: its corners, and how many photos there are */
.photo-zoom-badge {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 26px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(14, 18, 21, 0.74);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
}
.photo-zoom-badge svg { width: 15px; height: 15px; }

/* Picking colors for a job keeps its model in view */
.picker-photo {
    position: relative;
    flex: none;
    width: 56px;
    height: 56px;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--panel);
    cursor: zoom-in;
}
.picker-photo img { width: 100%; height: 100%; object-fit: cover; }
.picker-photo .photo-zoom-badge { right: 3px; bottom: 3px; min-height: 18px; padding: 0 3px; }
.picker-photo .photo-zoom-badge svg { width: 12px; height: 12px; }

/* ---------- Adding a catalog color to a job: each job as a card with its photo ---------- */
.dialog-wide { width: min(1040px, calc(100vw - 32px)); max-height: min(900px, calc(100vh - 48px)); }
.chooser-heading { display: flex; align-items: center; gap: var(--space-3); }
.chooser-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: var(--space-4); }
.job-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--card-edge);
    border-radius: var(--radius-card);
    background: var(--card);
    box-shadow: var(--shadow-hang);
    transition: box-shadow 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.job-card:hover { border-color: var(--ink-3); box-shadow: var(--shadow-lift); }
.job-card-photo {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: var(--panel);
    cursor: zoom-in;
}
div.job-card-photo { cursor: default; }
.job-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.job-card-photo:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
/* The rest of the card adds the color: the job's name is the button, stretched over the card's lower half */
.job-card-body { position: relative; flex: 1; display: grid; align-content: start; gap: 7px; padding: 10px var(--space-3) var(--space-3); }
.job-card-body:has(.job-card-add:focus-visible) { outline: 3px solid var(--focus); outline-offset: -3px; }
.job-card-title { font-size: 15px; font-weight: 600; line-height: 1.3; }
.job-card-add {
    display: -webkit-box;
    overflow: hidden;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    font-weight: 600;
    text-align: left;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
.job-card-add:focus-visible { outline: none; }
.job-card-add::after { content: ''; position: absolute; inset: 0; }
.job-card-state { display: flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.job-card-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; min-height: 26px; }
.job-card-more { margin-left: 2px; color: var(--ink-3); font-size: 12px; font-weight: 700; }
/* The color being added sits at the end of the row in a dashed ring: where it will go */
.job-card-new { display: inline-grid; place-items: center; margin-left: 5px; padding: 2px; border: 1.5px dashed var(--ink-3); border-radius: 50%; }
.job-card-cta { display: inline-flex; align-items: center; gap: 6px; color: var(--buy); font-size: 14px; font-weight: 700; }
.job-card-body:hover .job-card-cta { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- The photo viewer: a light table for a model's photos ---------- */
.viewer {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    background: #0d1114;
    color: #eef1f3;
    animation: fade-in 160ms var(--ease-out);
}
.viewer:focus { outline: none; }
.viewer .icon-btn { color: #eef1f3; }
.viewer .icon-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); color: #fff; }
.viewer .icon-btn[aria-pressed="true"] { background: rgba(255, 255, 255, 0.18); }
.viewer-bar { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: 6px var(--space-2) 6px var(--space-5); }
.viewer-title { flex: 1; min-width: 0; overflow: hidden; font-size: 16px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.viewer-title:focus { outline: none; }
.viewer-sub { margin-left: 8px; color: #b9c2c8; font-size: 14px; font-weight: 500; }
.viewer-count { color: #b9c2c8; font-size: 14px; font-variant-numeric: tabular-nums; }
.viewer-tools { display: flex; gap: 2px; }
.viewer-body { position: relative; min-height: 0; }
.viewer-stage { position: absolute; inset: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); overflow: hidden; touch-action: pan-y pinch-zoom; }
.viewer-stage[data-zoom="true"] { overflow: auto; touch-action: auto; }
/* Full-size photos can take a moment: a spinner until the photo arrives, and words if it doesn't */
.viewer-stage[data-status="loading"]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 3px solid rgba(238, 241, 243, 0.22);
    border-top-color: #eef1f3;
    border-radius: 50%;
    animation: spin 800ms linear infinite;
}
.viewer-stage[data-status="error"]::before {
    content: "This photo didn't load. Try the next one, or open the model on MakerWorld.";
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(360px, 80%);
    transform: translate(-50%, -50%);
    color: #d5dbdf;
    text-align: center;
}
.viewer-stage[data-status="error"] .viewer-photo { visibility: hidden; }
/* Fitted, the photo fills the stage whatever its file size; zoomed, it's 2.5 times that, centered while it fits */
.viewer-photo { width: 100%; height: 100%; margin: auto; object-fit: contain; cursor: zoom-in; user-select: none; -webkit-user-drag: none; }
.viewer-stage[data-zoom="true"] .viewer-photo { max-width: none; max-height: none; cursor: zoom-out; }
.viewer-step {
    position: absolute;
    top: 50%;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    border: 0;
    border-radius: 50%;
    background: rgba(13, 17, 20, 0.7);
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.viewer-step:hover { background: rgba(13, 17, 20, 0.9); }
.viewer-step svg { width: 22px; height: 22px; }
.viewer-prev { left: var(--space-4); }
.viewer-next { right: var(--space-4); }
.viewer-thumbs { display: flex; justify-content: center; gap: var(--space-2); padding: var(--space-3); overflow-x: auto; }
.viewer-thumbs button {
    flex: none;
    width: 64px;
    height: 48px;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: 4px;
    background: #1d2327;
    opacity: 0.62;
    transition: opacity 160ms var(--ease-out);
}
.viewer-thumbs button:hover { opacity: 1; }
.viewer-thumbs button[aria-current="true"] { border-color: #eef1f3; opacity: 1; }
.viewer-thumbs img { width: 100%; height: 100%; object-fit: cover; }
/* A material line's colors as dots to jump between */
.viewer-dots { gap: 2px; }
.viewer-dots button { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: transparent; }
@media (max-width: 720px) {
    .viewer-bar { padding-left: var(--space-4); }
    .viewer-step { width: 44px; height: 44px; margin-top: -22px; }
    .viewer-prev { left: var(--space-2); }
    .viewer-next { right: var(--space-2); }
    .viewer-thumbs { justify-content: flex-start; }
    .viewer-thumbs button { width: 56px; height: 42px; }
    .chooser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
}

.material-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 2px 12px;
    align-items: center;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}
.material-row .spool { grid-row: 1 / span 2; }
.material-name { grid-column: 2; font-weight: 600; }
.material-meta { grid-column: 2; color: var(--ink-3); font-size: 14px; }
/* A color's own controls, in the order you reach for them: Owned, Swap (quiet, like Owned beside it), and a quieter
   trash can that takes it out of the model, with Undo. It turns red only under the pointer, where it's about to act. */
.material-actions { grid-row: 1 / span 2; grid-column: 3; display: flex; align-items: center; gap: 4px; }
.material-swap { gap: 6px; padding: 5px 10px; }
.material-remove { width: 32px; height: 32px; color: var(--ink-3); }
.material-remove:hover:not(:disabled) { background: var(--out-tint); color: var(--out); }
/* A phone's sheet is the screen's width: the controls take a line of their own under the name, so the name keeps it */
@media (max-width: 560px) {
    .material-actions { grid-row: 3; grid-column: 2 / -1; margin-top: 4px; }
    .material-remove { margin-left: auto; }
    .material-note { grid-row: 4; }
}
.material-note { grid-column: 2 / -1; margin-top: 6px; padding: 8px 10px; border-radius: 4px; background: var(--out-tint); color: var(--ink); font-size: 14px; }
.material-alts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.alt-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 10px 0 6px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: var(--card);
    font-size: 13px;
    font-weight: 600;
}
.alt-btn:hover { border-color: var(--ink-3); }
.alt-type { color: var(--ink-3); font-weight: 500; }

.alert-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 14px;
    align-items: center;
    padding: var(--space-4);
    border: 1px solid var(--card-edge);
    border-radius: var(--radius-card);
    background: var(--panel);
}
.alert-box > h4, .alert-box > p { grid-column: 1; }
.alert-box > .btn, .alert-box > .icon-btn { grid-column: 2; grid-row: 1 / span 2; }
.alert-box h4 { font-size: 16px; }
.alert-box p { color: var(--ink-2); font-size: 14px; }
.alert-box-spaced { margin-top: var(--space-4); }
.resolve { padding: var(--space-4); border: 1px solid color-mix(in srgb, var(--out) 30%, transparent); border-radius: var(--radius-card); background: var(--out-tint); }
.resolve .sheet-section-title { color: var(--out); }
.resolve-lede { color: var(--ink); font-size: 15px; }
.resolve-list { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.resolve-row { padding-top: var(--space-3); border-top: 1px solid color-mix(in srgb, var(--out) 22%, transparent); }
.resolve-color { display: flex; align-items: center; gap: 10px; }
.resolve-color span { color: var(--ink-2); font-size: 14px; }
.resolve-none { margin-top: 6px; color: var(--ink-2); font-size: 14px; }
.resolve .alert-control { margin-top: var(--space-4); }
.resolve + .gallery { margin-top: var(--space-6); }
@media (max-width: 560px) {
    .alert-box { grid-template-columns: minmax(0, 1fr); }
    .alert-box > .btn, .alert-box > .icon-btn { grid-column: 1; grid-row: 3; justify-self: start; margin-top: var(--space-2); }
}

/* Small helpers shared by the sheets */
.banners { display: grid; gap: var(--space-3); max-width: 920px; margin-bottom: var(--space-6); }
.button-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sheet-action { margin-top: var(--space-3); }
.sign-in-action { margin-top: var(--space-5); }
.sheet-body-flush { padding-top: 0; }
.sheet-section-title-spaced { margin-top: var(--space-8); }
.help-steps-spaced { margin-bottom: var(--space-5); }
.link-btn-small { font-size: 13px; }
.check-inline { min-height: 0; }
.picker-more { margin-top: var(--space-3); }
.intake-empty { max-width: 640px; }
.intake-empty p + p { margin-top: var(--space-3); }
.job-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 14px; font-weight: 600; }
.colors-lede { margin: -4px 0 var(--space-2); color: var(--ink-2); font-size: 14px; }
/* What a model prints in, under its colors' title: "Prints in", a menu button drawn as the select it stands in for, and
   the materials hint */
.material-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 6px; color: var(--ink-2); font-size: 14px; }
.material-select { min-height: 32px; padding: 0 30px 0 10px; background-position: right 10px center; font-size: 14px; }
/* Colors in materials that don't go together: what's wrong with the pair and the two ways out, red when the parts won't
   hold at all and amber when they can with care; each color in the other material is marked the same way */
.material-mix { margin: 0 0 var(--space-3); padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--out) 30%, transparent); border-radius: 4px; background: var(--out-tint); color: var(--ink); font-size: 14px; }
.material-mix[data-tone="wait"] { border-color: color-mix(in srgb, var(--wait-tag) 60%, transparent); background: var(--wait-tint); }
.material-mix .button-row { margin-top: 8px; }
.material-row[data-odd="out"] .material-meta { color: var(--out); font-weight: 600; }
.material-row[data-odd="wait"] .material-meta { color: var(--wait); font-weight: 600; }
.material-state { margin-left: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--ink-3); }
.material-row[data-status="owned"] .material-state { color: var(--ready); }
.material-row[data-status="buy"] .material-state { color: var(--buy); }
.material-row[data-status="out"] .material-state { color: var(--out); }
/* The restock email in a model's sheet: the words, a bell, and a switch (tickets carry just the bell) */
.alert-toggle {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 40px;
    padding: 6px 10px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-control);
    background: var(--panel);
    color: var(--ink-2);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}
.alert-toggle:hover:not(:disabled) { border-color: var(--ink-3); color: var(--ink); }
.alert-toggle:disabled { cursor: progress; opacity: 0.7; }
.alert-toggle svg { flex: none; }
.alert-toggle-text { flex: 1; min-width: 0; }

.alert-control { margin-top: var(--space-1); }
.alert-toggle[aria-checked="true"] { border-color: color-mix(in srgb, var(--wait-tag) 75%, transparent); background: var(--wait-tint); color: var(--ink); }
.alert-toggle-large { min-height: 48px; padding: 8px 14px; font-size: 16px; }
.switch {
    position: relative;
    flex: none;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: var(--line-strong);
    transition: background-color 160ms var(--ease-out);
}
.switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--card);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    transition: transform 160ms var(--ease-out);
}
[aria-checked="true"] > .switch { background: var(--ink-button); }
[aria-checked="true"] > .switch::after { transform: translateX(14px); }

.picker-search { padding: var(--space-4) var(--space-5) var(--space-3); }
.picker-search > .filter-row { margin-top: 10px; }

.picker-list li { border-top: 1px solid var(--line); }
.picker-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 12px;
    padding: 10px 4px;
}
.picker-row .spool, .picker-row .photo-tile { grid-row: 1 / span 2; }
.picker-row .spool[data-photo] { --size: 44px; }
.picker-name { grid-column: 2; font-weight: 600; }
.picker-meta { grid-column: 2; color: var(--ink-3); font-size: 13px; }
.picker-actions { grid-row: 1 / span 2; grid-column: 3; display: flex; align-items: center; gap: 8px; }
.picker-group-title { padding: 14px 4px 6px; color: var(--ink-3); font-family: var(--font-sign); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.picker-group-note { margin: -2px 4px 8px; color: var(--ink-2); font-size: 13px; }
.picker-empty { padding: var(--space-5) 4px; color: var(--ink-2); }
.picker-hint { margin-top: 6px; color: var(--ink-3); font-size: 13px; }
.picker-lines { border-top: 1px solid var(--line); }
.picker-line { border-bottom: 1px solid var(--line); }
.picker-line-head { font: inherit; }
/* The line's name and count on the left, its colors on the right in rows as wide as the list sets (15 dots, more only
   past 30 colors): the row is two lines of text tall, so two rows of colors fill it without growing it */
.picker-line-toggle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name dots" "meta dots";
    align-items: center;
    gap: 2px 12px;
    width: 100%;
    min-height: 52px;
    padding: 8px 4px;
    border: 0;
    background: none;
    text-align: left;
}
.picker-line-toggle:hover .picker-line-name { text-decoration: underline; text-underline-offset: 3px; }
.picker-line-name { grid-area: name; font-weight: 600; }
.picker-line-name::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 10px 2px 2px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(-45deg); transition: transform 140ms var(--ease-out); }
.picker-line[data-open] .picker-line-name::before { transform: rotate(45deg); }
.picker-line-meta { grid-area: meta; padding-left: 20px; color: var(--ink-3); font-size: 13px; }
/* 12px cells for 14px dots: each dot runs 2px under the next, the strips' overlap without their negative margin, so a
   second row starts under the first. Every line's grid is as wide, so the lines' colors start in one line. */
.picker-line-toggle .line-dots { grid-area: dots; display: grid; grid-template-columns: repeat(var(--dot-cols, 15), 12px); row-gap: 4px; padding-right: 2px; }
.picker-line-toggle .line-dots .spool + .spool { margin-left: 0; }
.picker-line .picker-list { padding-left: 16px; }
.picker-line .picker-list li:first-child { border-top: 0; }
@media (max-width: 560px) { .picker-line-toggle .line-dots { display: none; } }

.menu {
    position: fixed;
    z-index: 70;
    min-width: 230px;
    padding: 6px;
    border: 1px solid var(--card-edge);
    border-radius: 6px;
    background: var(--card);
    box-shadow: var(--shadow-lift);
    animation: fade-in 120ms var(--ease-out);
}
.menu button, .menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 40px;
    padding: 0 10px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--ink);
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
}
.menu button:hover, .menu a:hover, .menu button:focus-visible, .menu a:focus-visible { background: var(--line); outline: none; }
.menu hr { margin: 6px 4px; border: 0; border-top: 1px solid var(--line); }
.menu .menu-danger { color: var(--out); }
/* One choice among several: a check beside the chosen one, and room for it beside the rest so the names line up */
.menu [role="menuitemradio"]::before { content: ''; flex: none; width: 11px; height: 5px; margin: -4px 1px 0 2px; border-bottom: 2px solid transparent; border-left: 2px solid transparent; transform: rotate(-45deg); }
.menu [role="menuitemradio"][aria-checked="true"] { font-weight: 600; }
.menu [role="menuitemradio"][aria-checked="true"]::before { border-color: currentColor; }
.menu-label { padding: 6px 10px 4px; color: var(--ink-3); font-family: var(--font-sign); font-size: 13px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.menu-note { max-width: 320px; padding: 2px 10px 8px; color: var(--ink-2); font-size: 14px; }

.toasts {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 80;
    display: grid;
    gap: 8px;
    width: min(460px, calc(100vw - 48px));
    pointer-events: none;
}
.toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 16px;
    border-radius: 8px;
    background: var(--ink-button);
    color: var(--on-ink);
    box-shadow: var(--shadow-lift);
    pointer-events: auto;
    animation: toast-in 240ms var(--ease-out);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
.toast p { flex: 1; font-weight: 500; }
.toast .btn { min-height: 34px; padding: 0 12px; background: transparent; color: var(--on-ink); border-color: color-mix(in srgb, var(--on-ink) 45%, transparent); }
.toast .icon-btn { width: 34px; height: 34px; color: var(--on-ink); }
.toast .icon-btn:hover { background: color-mix(in srgb, var(--on-ink) 16%, transparent); color: var(--on-ink); }
.toast[data-tone="error"] { background: var(--out); color: var(--tag-ink); }

.help-grid { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; }
.help-term { font-weight: 700; }
.help-def { color: var(--ink-2); }
.help-steps { display: grid; gap: 12px; counter-reset: step; }
.help-steps li { position: relative; padding-left: 36px; color: var(--ink-2); }
.help-steps li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink-button); color: var(--on-ink); font-weight: 700; font-size: 13px; }
.help-steps b { color: var(--ink); }
.shortcut-table { width: 100%; border-collapse: collapse; }
.shortcut-table td { padding: 8px 0; border-top: 1px solid var(--line); }
.shortcut-table td:last-child { text-align: right; }

.hint-btn {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--card);
    color: var(--ink-2);
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-ui);
    letter-spacing: 0;
    text-transform: none;
    vertical-align: middle;
}
.hint-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.popover {
    position: fixed;
    z-index: 75;
    max-width: 340px;
    padding: 12px 14px;
    border: 1px solid var(--card-edge);
    border-radius: 6px;
    background: var(--card);
    box-shadow: var(--shadow-lift);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.45;
    animation: fade-in 120ms var(--ease-out);
}
.popover p + p { margin-top: 6px; }

.plus-card {
    padding: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--buy) 35%, transparent);
    border-radius: var(--radius-card);
    background: var(--buy-tint);
}
.plus-card h3 { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.plus-card ul { display: grid; gap: 6px; margin: var(--space-3) 0; }
.plus-card li { position: relative; padding-left: 20px; color: var(--ink-2); }
.plus-card li b { color: var(--ink); }
.plus-card li::before { content: '✓'; position: absolute; left: 0; color: var(--ready); font-weight: 800; }
.plus-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-3); }
.plus-checkout-note { margin-top: var(--space-3); color: var(--ink-2); font-size: 14px; }
.help-note { margin: -4px 0 var(--space-3); color: var(--ink-2); font-size: 14px; }
.fine-print { margin-top: var(--space-3); color: var(--ink-3); font-size: 13px; }
/* Appearance: Theme and Filament switches with their labels in one column, so the two controls line up */
.appearance { display: grid; gap: var(--space-3); }
.appearance .labeled-control { display: flex; }
.appearance .select-label { min-width: 72px; }
.appearance .fine-print { margin-top: 0; max-width: 60ch; }
.notice { margin-top: var(--space-3); padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--buy) 40%, transparent); border-radius: var(--radius-card); background: var(--card); font-weight: 600; font-size: 14px; }

.settings-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.settings-row h4 { font-size: 16px; }
.settings-row p { color: var(--ink-3); font-size: 14px; }

.site-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: var(--space-12);
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
    color: var(--ink-3);
    font-size: 14px;
}
.site-foot a { color: var(--ink-2); }
.key-legend { flex-basis: 100%; color: var(--ink-3); }
.key-legend .kbd { margin: 0 1px; }
@media (pointer: coarse) { .key-legend { display: none; } }

/* ---------- Narrow screens: the order slides in; phones get bottom tabs ---------- */
.bottom-tabs { display: none; }
.order-toggle { display: none; }
@media (pointer: coarse) { .kbd-hint { display: none; } }

/* The stock chip leaves the top bar before the tabs get crowded; the order panel says it instead */
@media (max-width: 1100px) {
    .status-chip { display: none; }
    .order-stock { display: block; }
    .undo-btn { width: var(--control-h); padding: 0; }
    .undo-text { display: none; }
}
@media (max-width: 960px) {
    .topbar { gap: var(--space-4); }
    #themeToggle { display: none; }
}
/* Tablet widths with the tabs showing, and the narrowest phones with Undo and the Colors / Photos switch beside Help:
   the mark stands for the name */
@media (min-width: 721px) and (max-width: 860px) {
    .brand-name { display: none; }
}
@media (max-width: 720px) {
    .topbar-tools { gap: 6px; }
}
@media (max-width: 400px) {
    .brand-name { display: none; }
}

@media (max-width: 1180px) {
    :root { --order-w: 340px; }
    .workspace { padding: var(--space-5) var(--space-6) var(--space-12); }
    .toolbar { margin: 0 calc(var(--space-6) * -1) var(--space-6); padding: var(--space-3) var(--space-6); }
}

@media (max-width: 960px) {
    .layout { grid-template-columns: minmax(0, 1fr); }
    .order {
        position: fixed;
        top: var(--topbar-h);
        right: 0;
        bottom: 0;
        z-index: 50;
        width: min(420px, 100vw);
        height: auto;
        box-shadow: var(--shadow-sheet);
        transform: translateX(105%);
        transition: transform 260ms var(--ease-out), visibility 0s linear 260ms;
        visibility: hidden;
    }
    .order[data-open] { transform: none; visibility: visible; transition: transform 260ms var(--ease-out); }
    .order-close { display: inline-grid; }
    .order-toggle { display: inline-flex; }
}

@media (max-width: 720px) {
    :root { --topbar-h: 56px; }
    body { padding-bottom: 68px; }
    .topbar { gap: var(--space-3); padding: 0 var(--space-3); }
    .brand-name { font-size: 19px; }
    .tabs, .status-chip, .order-toggle { display: none; }
    .account-btn .account-name { display: none; }
    .account-btn { padding: 0 4px; }
    .account-btn.signed-out { padding: 0 12px; }
    .workspace { padding: var(--space-4) var(--space-4) var(--space-10); background-size: 18px 18px; }
    .toolbar { margin: 0 calc(var(--space-4) * -1) var(--space-5); padding: var(--space-3) var(--space-4); }
    .intake { padding: var(--space-4); margin-bottom: var(--space-6); }
    .intake-compact { padding: var(--space-3); margin-bottom: var(--space-4); }
    .intake-row .btn { padding: 0 16px; }
    .first-run-rails { grid-template-columns: 1fr; gap: var(--space-3); }

    .view-title { font-size: 26px; }
    .order { top: 0; bottom: 68px; width: 100vw; z-index: 56; }
    .sheet { width: 100vw; }
    .dialog { top: auto; bottom: 0; left: 0; width: 100vw; max-height: 92vh; border-radius: 12px 12px 0 0; transform: none; animation: sheet-up 240ms var(--ease-out); }
    .toasts { left: 12px; bottom: 84px; width: calc(100vw - 24px); }
    .help-grid { grid-template-columns: 1fr; gap: 2px; }
    .help-grid .help-def { margin-bottom: 8px; }

    .bottom-tabs {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 57;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        height: 68px;
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid var(--card-edge);
        background: var(--panel);
    }
    .bottom-tabs a, .bottom-tabs button {
        position: relative;
        display: grid;
        place-items: center;
        align-content: center;
        gap: 2px;
        border: 0;
        background: transparent;
        color: var(--ink-3);
        font-family: var(--font-sign);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        text-decoration: none;
    }
    .bottom-tabs [aria-current="page"], .bottom-tabs [aria-expanded="true"] { color: var(--ink); }
    /* While the order is open it's the active tab, not the view under it */
    .bottom-tabs:has([aria-expanded="true"]) [aria-current="page"] { color: var(--ink-3); }
    .bottom-tabs:has([aria-expanded="true"]) [aria-current="page"]::before { display: none; }
    .bottom-tabs [aria-current="page"]::before, .bottom-tabs [aria-expanded="true"]::before {
        content: '';
        position: absolute;
        top: 0; left: 28%; right: 28%;
        height: 3px;
        border-radius: 0 0 3px 3px;
        background: var(--ink);
    }
    .bottom-tabs .tab-count { position: absolute; top: 8px; left: calc(50% + 8px); }
}
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }
/* The narrowest phones: the intake's button says just "Add" (still "Add model" to a screen reader) and its row packs
   tighter, so the link field keeps room for its whole hint beside MakerWorld's logo */
@media (max-width: 440px) {
    .intake-add-noun { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 400px) {
    .intake { padding-inline: var(--space-3); }
    .intake-row { gap: 6px; }
    .intake-row .btn, .intake-row .field { padding: 0 12px; }
}

@media (pointer: coarse) {
    :root { --control-h: 44px; }
    .ticket-menu { width: 44px; height: 44px; margin-block: -6px; }
    .rack-menu { width: 44px; height: 44px; }
    .material-swap { min-height: 44px; }
    .material-select { min-height: 44px; }
    .material-remove { width: 44px; height: 44px; }
    .bell-btn { width: 44px; height: 44px; margin-block: -6px; }
    .stepper button { width: 40px; height: 40px; }
    .segmented button { min-height: 38px; padding: 0 12px; }
    .select { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .topbar, .bottom-tabs, .intake, .board-filter, .ticket-menu, .bell-btn, .toasts { display: none !important; }
    .layout { display: block; }
    .order { position: static; height: auto; border: 0; }
    body, .workspace { background: #fff; }
}

/* ---------- Legal pages (terms, privacy) in the same world ---------- */
.legal-page { max-width: 780px; margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-12); }
.legal-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-6); }
.legal-nav-link { font-weight: 600; }
.legal-updated { margin-top: 6px; color: var(--ink-3); font-size: 14px; }
.legal .legal-lede { margin-top: var(--space-4); color: var(--ink); font-size: 17px; }
.legal .legal-facts { display: block; margin-top: var(--space-3); }
.legal-facts > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 4px 18px; padding: 12px 0; border-top: 1px solid var(--line); }
@media (max-width: 720px) { .legal-facts > div { grid-template-columns: 1fr; } }
.legal { padding: var(--space-8); border: 1px solid var(--card-edge); border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-hang); }
.legal h1 { font-family: var(--font-sign); font-size: 34px; letter-spacing: 0.02em; text-transform: uppercase; }
.legal h2 { margin-top: 36px; font-size: 21px; font-weight: 700; scroll-margin-top: 24px; }
.legal h2 + * { margin-top: 10px; }
.legal p, .legal li { color: var(--ink-2); line-height: 1.6; }
.legal p + p, .legal ul { margin-top: 12px; }
.legal ul { list-style: disc; padding-left: 22px; }
.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; }
.legal dt { font-weight: 700; }
.legal dd { margin: 0; color: var(--ink-2); }
@media (max-width: 720px) { .legal { padding: var(--space-5); } .legal dl { grid-template-columns: 1fr; } }