/* Obsidian Squad Supply Chain - v7 "Mission Control" (Oct 2026 redesign).
 *
 * The Supply Chain is the org's logistics console: the section list on the
 * left is a panel of switches, the counts are amber CRT readouts, tables are
 * the site's ruled ledger tables, and request / claim cards are manifest
 * slips with a perforated header. All colour comes from the root.css tokens
 * (--paper, --sheet, --ink, --rule, --accent ...), so Daylight, Night shift
 * and High contrast all follow with no extra overrides.
 *
 * SHARED FILE: besides the Supply Chain pages, many other pages link this
 * stylesheet for its generic sc-* parts (cards, tables, stat tiles, buttons,
 * popups .sc-notify-overlay, filter pills, badges, chips). Those classes are
 * restyled here, never removed. Rules that only belong to the Supply Chain
 * shell are scoped to body[data-sc-view] (set by
 * scripts/supply_chain_layout.php).
 *
 * Every selector is either prefixed "sc-" or scoped under
 * .supply-chain-page, so nothing here leaks onto other pages.
 *
 * Layering (see root.css): blueprint panel 1100/1101, popups 1200, the aUEC
 * offer popup 1250 (it opens on top of other popups), .sc-toast 1300.
 */

:root,
body,
.supply-chain-page {
    /* Built from the site tokens, so all three themes follow. */
    --sc-card: var(--sheet);
    --sc-card-2: var(--sheet-2);
    --sc-muted: var(--ink-2);
    --sc-line: var(--rule-soft);
    --sc-ok: var(--good);
    --sc-bad: var(--bad);
    --sc-mono: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
    /* Marketplace crafter picker: green = materials in warehouse, orange =
       on their board, red = blueprint only. */
    --sc-green: var(--good);
    --sc-orange: var(--warn);
    --sc-red: var(--bad);
    /* The content width of the Supply Chain shell. */
    --sc-max: 1440px;
    /* A card's inner padding (the manifest slip notches line up with it). */
    --sc-pad-y: 1.15rem;
    --sc-pad-x: 1.3rem;
}

.theme-contrast .supply-chain-page {
    --sc-card: #000000;
    --sc-card-2: #000000;
    --sc-muted: #FFFFFF;
    --sc-line: rgba(255, 255, 255, 0.75);
}

.supply-chain-page,
.supply-chain-page * {
    box-sizing: border-box;
}

main.supply-chain-page {
    padding: 1rem 1.5rem 2.5rem;
}

/* Pages that put a plain h1 + p straight under a .supply-chain-page main
   (Task List, Meets ...) use the v7 page header from root.css as it is:
   left aligned, same width rules as every other page. Nothing here. */

.supply-chain-page p,
.supply-chain-page li {
    font-size: 0.95rem;
}

.supply-chain-page a {
    color: var(--link);
}

.supply-chain-page a:hover {
    color: var(--ink);
}

.supply-chain-page code {
    font-family: var(--sc-mono);
    font-size: 0.85em;
    padding: 0.05em 0.35em;
    background: var(--sheet-3);
    border-radius: 0;
}

/* ================= The Supply Chain shell (layout pages only) ========== */
body[data-sc-view] main.supply-chain-page {
    padding: 1.2rem var(--gutter) 3rem;
}

body[data-sc-view] main.supply-chain-page > .os-back-bar,
body[data-sc-view] main.supply-chain-page > .sc-titlebar,
body[data-sc-view] main.supply-chain-page > details.os-howto,
body[data-sc-view] main.supply-chain-page > .sc-shell {
    width: 100%;
    max-width: var(--sc-max);
    margin-left: auto;
    margin-right: auto;
}

body[data-sc-view] main.supply-chain-page > .os-back-bar {
    padding: 0;
    margin-top: 0;
}

body[data-sc-view] main.supply-chain-page > details.os-howto {
    margin-top: 0;
    margin-bottom: 1.4rem;
}

/* Title: the Supply Chain plate as a kicker, the page's name big and left,
   "Add lot" on the right, the four stripes under the whole bar. */
.sc-titlebar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.9rem 1.5rem;
    margin: 1.1rem 0 1.4rem;
    padding-bottom: 1.35rem;
}

.sc-titlebar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 10px;
    background: var(--stripes-h);
    border-radius: 0 6px 6px 0;
}

.sc-titles {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
    text-align: left;
}

main.supply-chain-page .sc-titles h1 {
    margin: 0;
    padding: 0;
    max-width: none;
    font-size: clamp(1.35rem, 3.2vw, 2.6rem);
    line-height: 1.04;
    letter-spacing: 0;
    text-transform: uppercase;
    text-align: left;
    overflow-wrap: anywhere;
}

.supply-chain-page .sc-titles p.sc-title-sub {
    order: -1;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: uppercase;
    font-weight: 500;
}

/* A small lamp before the kicker: the console is on. */
.supply-chain-page .sc-titles p.sc-title-sub::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 0;
    background: var(--accent);
    box-shadow: 0 0 0 2px var(--rule);
}

.sc-titlebar .sc-add-lot {
    flex: 0 0 auto;
    text-decoration: none;
    white-space: nowrap;
}

/* The shell: switch panel on the left, the page on the right.
   The min-height is what makes the sticky column work on a page with
   little on it: a sticky box can only travel as far as its container is
   taller than the box itself. */
.sc-shell {
    display: flex;
    gap: clamp(1rem, 2vw, 1.75rem);
    max-width: 1500px;
    margin: 0 auto;
    align-items: flex-start;
    min-height: calc(100dvh - var(--nav-height, 0px));
}

/* Sticks below the nav (on a computer --nav-height is 0: the nav is the
   left rail; on a phone it is the 62px top bar - but there the column is
   in the flow, see the 900px block). When the column is taller than the
   window, js/supply_chain.js (stickySideColumn) moves this `top` as you
   scroll so its bottom is never cut off. */
.sc-side-col {
    position: sticky;
    top: calc(var(--nav-height, 0px) + 1rem);
    width: 248px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* The Mining Board puts a second box under the switch panel; kept as a
   hook, it sticks exactly like every other page. */
.sc-side-col.has-extra > * {
    flex-shrink: 0;
}

/* ---- The switch panel ---- */
.sc-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0.85rem 0.7rem 0.75rem;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: 0 0 0 transparent;
}

.sc-side-plate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0.35rem 0.6rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--rule-soft);
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: uppercase;
    font-weight: 500;
}

.supply-chain-page p.sc-side-plate {
    font-size: 0.6rem;
}

/* Three little screws, like a panel bolted into the console. */
.sc-side-plate::after {
    content: "";
    width: 34px;
    height: 6px;
    background:
        radial-gradient(circle, var(--ink-3) 2.4px, transparent 3px) 0 50% / 12px 6px repeat-x;
}


.sc-sidenav {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

/* Each section is a toggle switch: a small rocker on the left, the name
   engraved beside it. The page you are on has its switch thrown (orange,
   knob to the right) and its row lit. */
.supply-chain-page .sc-nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 40px;
    padding: 0.45rem 0.55rem;
    border: 2px solid transparent;
    border-radius: 0;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: uppercase;
    transition: background 0.15s, border-color 0.15s;
    font-weight: 500;
}

.supply-chain-page .sc-nav-link > span:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.supply-chain-page .sc-nav-link::before {
    content: "";
    flex: 0 0 auto;
    width: 30px;
    height: 17px;
    box-sizing: border-box;
    border: 1px solid var(--rule);
    border-radius: 0;
    background:
        radial-gradient(circle at 6.5px 50%, var(--ink-3) 0 4.2px, transparent 4.8px),
        var(--sheet-3);
    transition: background 0.15s;
}

.supply-chain-page .sc-nav-link:hover {
    background: var(--sheet-2);
    border-color: var(--rule-soft);
    color: var(--ink);
}

.supply-chain-page .sc-nav-link:hover::before {
    background:
        radial-gradient(circle at 6.5px 50%, var(--ink-2) 0 4.2px, transparent 4.8px),
        var(--sheet-3);
}

.supply-chain-page .sc-nav-link.active {
    background: var(--solid);
    border-color: var(--rule);
    color: var(--on-solid);
    box-shadow: none;
}

.supply-chain-page .sc-nav-link.active::before {
    border-color: var(--on-solid);
    background:
        radial-gradient(circle at calc(100% - 6.5px) 50%, var(--on-accent) 0 4.2px, transparent 4.8px),
        var(--accent);
}

.theme-contrast .supply-chain-page .sc-nav-link.active::before {
    border-color: #000;
}

/* Waiting counts: a small amber counter. */
.sc-nav-badge {
    flex: 0 0 auto;
    min-width: 1.6rem;
    height: 1.35rem;
    padding: 0 0.4rem;
    display: inline-grid;
    place-items: center;
    border-radius: 0;
    background: var(--crt);
    box-shadow: inset 0 0 0 2px #000;
    color: var(--phosphor);
    font-family: var(--font-crt);
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    line-height: 1;
    text-shadow: none;
}

.theme-contrast .sc-nav-badge {
    box-shadow: inset 0 0 0 2px #fff;
}

.sc-nav-badge[hidden] {
    display: none;
}

/* The phone-only section button (shown in the max-width: 900px block). */
.supply-chain-page .sc-jump {
    display: none;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 48px;
    padding: 0.55rem 1rem;
    border: 1px solid var(--rule);
    border-radius: 0;
    background: var(--sheet);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 0 0 transparent;
}

.sc-jump-text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: uppercase;
    font-weight: 500;
}

.sc-jump-pre {
    color: var(--ink-2);
    font-size: 0.6rem;
    letter-spacing: 0.04em;
}

.sc-jump-chev {
    transition: transform 0.2s ease;
}

.sc-jump[aria-expanded="true"] .sc-jump-chev {
    transform: rotate(180deg);
}

.sc-jump:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 2px;
}

.sc-sidebar-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.7rem;
    padding: 0.65rem 0.35rem 0;
    border-top: 1px solid var(--rule-soft);
    font-size: 0.82rem;
}

.sc-user-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--ink-2);
    font-weight: 600;
}

.sc-user-tag .fa {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0;
    background: var(--sheet-3);
    color: var(--ink);
    font-size: 0.75rem;
}

.sc-content {
    flex: 1;
    min-width: 0;
}

/* ---------------- Page head, stats ---------------- */
.sc-page-head {
    margin-bottom: 1.2rem;
}

.sc-page-head h2 {
    margin: 0 0 0.3rem;
    text-align: left;
    font-size: 1.4rem;
}

.supply-chain-page .sc-page-head p {
    max-width: 72ch;
    margin: 0;
    color: var(--ink-2);
    font-size: 1rem;
    line-height: 1.5;
}

.sc-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
    margin-bottom: 1.4rem;
}

/* A stat tile is a readout: a plate label over a small amber CRT screen. */
.sc-stat {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
    padding: 0.7rem 0.7rem 0.75rem;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: 0 0 0 transparent;
    text-align: left;
}

.sc-stat-label {
    padding: 0 0.3rem;
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0;
    line-height: 1.35;
    text-transform: uppercase;
    font-weight: 500;
}

.sc-stat-value {
    position: relative;
    margin-top: auto;
    padding: 0.4rem 0.8rem 0.3rem;
    background: linear-gradient(var(--crt), var(--crt));
    border-radius: 0;
    box-shadow: inset 0 0 0 1px var(--rule-soft);
    color: var(--phosphor);
    font-family: var(--font-crt);
    font-size: 2.5rem;
    line-height: 1;
    text-align: right;
    text-shadow: none;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.sc-stat-value::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(transparent, transparent);
    pointer-events: none;
}

.theme-contrast .sc-stat-value {
    background: #000;
    box-shadow: inset 0 0 0 2px #fff;
    text-shadow: none;
}

.theme-contrast .sc-stat-value::after {
    display: none;
}

.sc-stats-sm .sc-stat-value {
    font-size: 1.9rem;
}

/* A quieter tile (no screen): the number in ink. */
.sc-stat.is-quiet {
    background: var(--sheet-2);
    box-shadow: 0 0 0 transparent;
}

.sc-stat.is-quiet .sc-stat-value {
    padding: 0 0.3rem;
    background: none;
    box-shadow: none;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.4rem;
    font-weight: 800;
    text-align: left;
    text-shadow: none;
}

.sc-stat.is-quiet .sc-stat-value::after {
    display: none;
}

/* ---------------- Cards ---------------- */
.sc-card {
    padding: var(--sc-pad-y) var(--sc-pad-x);
    margin-bottom: 1.2rem;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: 0 0 0 transparent;
    color: var(--ink);
}

/* A card inside a card: a recessed inset, no shadow. */
.sc-card.sc-inner {
    margin: 0.9rem 0 0;
    background: var(--sheet-2);
    border: 1px solid var(--rule-soft);
    border-radius: 0;
    box-shadow: none;
}

.sc-card h3 {
    margin: 0 0 0.85rem;
    text-align: left;
    font-size: 0.98rem;
    letter-spacing: 0.02em;
    line-height: 1.25;
}

.sc-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.sc-card-head h3 {
    margin: 0;
}

.supply-chain-page .sc-card-head p {
    margin: 0.3rem 0 0;
}

/* A highlighted card (claims waiting, incoming stock): an orange edge. */
.sc-banner,
.sc-banner-card {
    border-color: var(--rule);
    box-shadow: 0 0 0 transparent, inset 6px 0 0 var(--accent);
    padding-left: calc(var(--sc-pad-x) + 4px);
}

.sc-sync-note {
    border-color: var(--rule);
    font-size: 0.9rem;
}

.sc-empty {
    text-align: center;
    color: var(--ink-2);
    padding: 2rem 1rem;
}

.sc-card.sc-empty {
    background:
        repeating-linear-gradient(-45deg, transparent 0 14px, color-mix(in srgb, var(--rule-soft) 45%, transparent) 14px 16px),
        var(--sheet);
}

.supply-chain-page p.sc-empty {
    font-size: 0.95rem;
}

.sc-grid-2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.2rem;
    align-items: start;
}

.sc-dim {
    color: var(--ink-2);
}

.supply-chain-page .sc-small,
.supply-chain-page p.sc-small {
    font-size: 0.85rem;
}

.sc-can {
    color: var(--good);
    font-weight: 700;
}

.sc-cant {
    color: var(--bad);
    font-weight: 700;
}

/* ---------------- Manifest slips ----------------
   Request and claim cards (Requests, Mining Board jobs): a slip with a
   reference plate, a perforated line under its header and two punched
   notches at the ends of the perforation. */
.sc-card.sc-slip {
    position: relative;
}

.sc-slip > .sc-card-head {
    position: relative;
    margin: 0 0 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 2px dashed var(--ink-3);
}

.sc-slip > .sc-card-head::before,
.sc-slip > .sc-card-head::after {
    content: "";
    position: absolute;
    bottom: -11px;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    border: 1px solid var(--rule);
    border-radius: 0;
    background: var(--paper);
}

.sc-slip > .sc-card-head::before {
    left: calc(-1 * var(--sc-pad-x) - 12px);
    clip-path: inset(0 0 0 50%);
}

.sc-slip > .sc-card-head::after {
    right: calc(-1 * var(--sc-pad-x) - 12px);
    clip-path: inset(0 50% 0 0);
}

.sc-slip-ref {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--ink-3);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: uppercase;
    font-weight: 500;
}

/* ---------------- Toolbar, pills, inputs ---------------- */
.sc-toolbar {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 1rem;
}

.sc-push-right {
    margin-left: auto;
}

.supply-chain-page input[type=text],
.supply-chain-page input[type=number],
.supply-chain-page input[type=search],
.supply-chain-page input[type=email],
.supply-chain-page input[type=url],
.supply-chain-page input[type=date],
.supply-chain-page input[type=datetime-local],
.supply-chain-page input:not([type]),
.supply-chain-page select {
    width: 100%;
    height: var(--control-h);
    padding: 0 0.85rem;
    background-color: var(--sheet);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 0;
    font: 0.95rem var(--font-body);
    font-variant-numeric: tabular-nums;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.supply-chain-page input:focus-visible,
.supply-chain-page select:focus-visible,
.supply-chain-page textarea:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--rule);
    box-shadow: none;
}

.supply-chain-page input:focus,
.supply-chain-page select:focus {
    border-color: var(--rule);
    box-shadow: none;
}

.supply-chain-page select optgroup {
    color: var(--ink-2);
    background: var(--sheet-2);
}

.supply-chain-page select option {
    color: var(--ink);
    background: var(--sheet);
}

.supply-chain-page .sc-search {
    flex: 1;
    min-width: 200px;
    max-width: 420px;
}

.supply-chain-page .sc-search.sc-wide {
    max-width: none;
}

.supply-chain-page .sc-select-inline {
    width: auto;
    min-width: 180px;
}

/* Filter pills: a row of switches in a recessed tray. */
.sc-filter-pills {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 0.9rem;
    padding: 0.25rem;
    background: var(--sheet-3);
    border: 1px solid var(--rule);
    border-radius: 0;
}

.sc-toolbar .sc-filter-pills {
    margin-bottom: 0;
}

.sc-filter-pill {
    height: 34px;
    padding: 0 0.8rem;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    font-weight: 500;
}

.sc-filter-pill:hover {
    background: var(--sheet);
    color: var(--ink);
}

.sc-filter-pill.active {
    background: var(--solid);
    color: var(--on-solid);
}

.sc-filter-pill:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 1px;
}

.sc-lbl {
    display: block;
    margin-bottom: 0.4rem;
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: uppercase;
}

.sc-field {
    margin-bottom: 0.9rem;
}

.sc-field.sc-narrow {
    max-width: 30rem;
}

.sc-field-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.9rem;
}

.sc-field-row.sc-row-4 {
    grid-template-columns: 0.7fr 0.8fr 1.5fr auto;
}

.sc-align-end {
    display: flex;
    align-items: flex-end;
}

.sc-inline-field {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ink-2);
    font-size: 0.88rem;
}

.supply-chain-page .sc-inline-field input {
    width: 6rem;
    height: 38px;
}

/* ---------------- Buttons ----------------
   Pill switches with a 2px ink border and Michroma capitals.
     .sc-btn             dark filled (the usual action)
     .sc-btn.outlined    a plain switch on the panel
     .sc-btn.tonal       a recessed grey switch
     .sc-btn.danger      red outline
     .sc-btn.is-primary  orange: the one main action on a screen
     .sc-btn.sm          small, for table rows */
.sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: var(--control-h);
    padding: 0.45rem 1.2rem;
    background: var(--solid);
    color: var(--on-solid);
    border: 1px solid var(--rule);
    border-radius: 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
    font-weight: 500;
}

.supply-chain-page a.sc-btn,
.supply-chain-page a.sc-btn:hover {
    color: var(--on-solid);
    text-decoration: none;
}

.sc-btn:hover:not([disabled]) {
    transform: none;
    background: var(--solid-hi);
    box-shadow: var(--shadow);
}

.sc-btn:active:not([disabled]) {
    transform: translateY(2px);
    box-shadow: none;
}

.sc-btn:focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 2px;
}

.sc-btn[disabled] {
    opacity: 0.42;
    cursor: not-allowed;
    box-shadow: none;
}

.sc-btn.tonal,
.supply-chain-page a.sc-btn.tonal {
    background: var(--sheet-3);
    color: var(--ink);
}

.sc-btn.tonal:hover:not([disabled]) {
    background: var(--sheet-2);
}

.sc-btn.outlined,
.supply-chain-page a.sc-btn.outlined {
    background: var(--sheet);
    color: var(--ink);
}

.sc-btn.outlined:hover:not([disabled]) {
    background: var(--sheet-2);
}

.sc-btn.danger,
.supply-chain-page a.sc-btn.danger {
    background: var(--sheet);
    border-color: var(--bad);
    color: var(--bad);
}

.sc-btn.danger:hover:not([disabled]) {
    background: color-mix(in srgb, var(--bad) 12%, var(--sheet));
}

.sc-btn.is-primary,
.supply-chain-page .sc-btn.is-primary,
.supply-chain-page a.sc-btn.is-primary {
    background: var(--accent);
    border-color: var(--rule);
    color: var(--on-accent);
}

.sc-btn.is-primary:hover:not([disabled]),
.supply-chain-page .sc-btn.is-primary:hover:not([disabled]) {
    background: var(--accent-hi);
    color: var(--on-accent);
}

.sc-btn.sm {
    min-height: 32px;
    padding: 0.25rem 0.8rem;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    box-shadow: none;
    text-transform: uppercase;
}

.sc-form-actions {
    /* 16 Oct 2026 (Matt): buttons side by side are the SAME size - each
       column as wide as the widest button, all the same height. */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    gap: 0.55rem;
    width: fit-content;
    max-width: 100%;
    margin-top: 0.7rem;
    margin-left: auto;
}

.sc-form-actions > * {
    min-width: 0;
}

.sc-form-actions > .sc-btn {
    justify-content: center;
    text-align: center;
}

.sc-form-actions.sc-left {
    margin-left: 0;
    margin-right: auto;
}

/* A row that holds more than buttons (a link, a tick box) and may wrap. */
.sc-form-actions.sc-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: auto;
    justify-content: flex-end;
}

.sc-form-actions.sc-wrap.sc-left {
    justify-content: flex-start;
}

/* Phones: one under the other, full width. */
@media (max-width: 560px) {
    .sc-form-actions:not(.sc-wrap) {
        grid-auto-flow: row;
        width: 100%;
    }
}

.sc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
}

/* ---------------- Tables ----------------
   The ledger: Archivo with tabular figures, a 2px ink outline with rounded
   corners, hairline rows, a Michroma heading row on --sheet-3. */
.sc-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: 0;
    /* Keeps hidden screen-reader text (the "Actions" column heading) inside
       the scrolling box, so it cannot widen a phone screen. */
    position: relative;
}

table.sc-data {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 0;
    overflow: hidden;
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

table.sc-data th,
table.sc-data td {
    padding: 0.7rem 0.9rem;
    text-align: left;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 0.92rem;
    vertical-align: middle;
}

table.sc-data thead tr {
    background: var(--sheet-3);
}

table.sc-data th {
    background: var(--sheet-3);
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--rule);
}

table.sc-data tr:last-child td {
    border-bottom: none;
}

table.sc-data tbody tr:hover {
    background: var(--sheet-2);
}

table.sc-data tbody tr.sc-clickable {
    cursor: pointer;
}

table.sc-data tbody tr.is-open {
    background: var(--sheet-2);
    box-shadow: inset 5px 0 0 var(--accent);
}

table.sc-data .sc-num {
    text-align: right;
    font-family: var(--font-body);
    font-variant-numeric: tabular-nums;
}

table.sc-data .sc-group-row td,
.sc-group-row td {
    background: var(--sheet-2);
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: uppercase;
    border-top: 1px solid var(--rule-soft);
}

.sc-qty-edit {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
}

.supply-chain-page .sc-qty-edit input {
    width: 5.5rem;
    height: 34px;
    padding: 0 0.5rem;
    text-align: right;
}

.sc-qty-edit button {
    width: 30px;
    height: 30px;
    border: 1px solid var(--rule);
    border-radius: 0;
    background: var(--sheet);
    color: var(--ink);
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
}

.sc-qty-edit button:hover {
    background: var(--solid);
    color: var(--on-solid);
}

.supply-chain-page .sc-claim-input {
    width: 6.5rem;
    height: 36px;
    text-align: right;
}

/* ---------------- Badges, quality bar ----------------
   Status pills: a 2px border in the status colour, ink text. */
.sc-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0.1rem 0.6rem;
    border: 1px solid var(--rule);
    border-radius: 0;
    background: var(--sheet);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
}

.sc-badge.warehouse {
    border-color: var(--rule);
}

.sc-badge.distributed {
    border-color: var(--warn);
}

.sc-badge.owned {
    border-color: var(--good);
    background: color-mix(in srgb, var(--good) 14%, var(--sheet));
}

.sc-badge.missing {
    border-color: var(--rule-soft);
    color: var(--ink-2);
}

.sc-chip {
    margin: 0 0.25rem 0.25rem 0;
    white-space: normal;
}

.sc-q-bar {
    display: inline-block;
    width: 72px;
    height: 8px;
    margin-right: 0.45rem;
    vertical-align: middle;
    border-radius: 0;
    background: var(--sheet-3);
    box-shadow: inset 0 0 0 1px var(--rule-soft);
    overflow: hidden;
}

.sc-q-bar > span {
    display: block;
    height: 100%;
    border-radius: 0;
}

/* ---------------- Blueprint panel (a centred popup) ---------------- */
.sc-bp-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(5, 6, 8, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms;
}

.sc-bp-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

/* Same markup on the public Blueprints page and the Supply Chain one, so
   both change together. */
.sc-bp-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1101;
    width: min(780px, calc(100vw - 2rem));
    max-height: min(88vh, 900px);
    display: flex;
    flex-direction: column;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: 0 0 0 transparent, 0 30px 80px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    color: var(--ink);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, calc(-50% + 12px));
    transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms;
}

.sc-bp-panel.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%);
    transition: opacity 180ms ease, transform 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .sc-bp-panel,
    .sc-bp-panel.open {
        transition: none;
    }
}

.sc-bp-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    padding: calc(12px + 1rem) 1.3rem 1rem;
    background: var(--stripes-h) top / 100% 12px no-repeat, var(--sheet-2);
    border-bottom: 1px solid var(--rule);
}

.sc-bp-head h2 {
    margin: 0;
    text-align: left;
    font-size: clamp(1rem, 2.2vw, 1.3rem);
    line-height: 1.2;
}

.sc-bp-close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 1px solid var(--rule);
    border-radius: 0;
    background: var(--sheet);
    color: var(--ink);
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
}

.sc-bp-close:hover {
    background: var(--solid);
    color: var(--on-solid);
}

.sc-bp-body {
    flex: 1;
    overflow: auto;
    padding: 1.1rem 1.3rem 2rem;
}

.sc-bp-section h3 {
    margin: 1.3rem 0 0.6rem;
    color: var(--ink-2);
    font-size: 0.82rem;
    letter-spacing: 0;
    text-align: left;
    text-transform: uppercase;
    font-weight: 500;
}

.sc-req-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 0.92rem;
}

.sc-source-list {
    margin: 0;
    padding-left: 1.1rem;
}

.supply-chain-page .sc-source-list li {
    margin: 0.2rem 0;
    font-size: 0.9rem;
}

/* ---------------- Import dropzone ---------------- */
.sc-dropzone {
    padding: 1.6rem 1.2rem;
    text-align: center;
    background: var(--sheet-2);
    border: 2px dashed var(--ink-3);
    border-radius: 0;
    transition: border-color 0.15s, background 0.15s;
}

.sc-dropzone:hover,
.sc-dropzone.dragover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 8%, var(--sheet-2));
    box-shadow: none;
}

.sc-dropzone input[type=file] {
    display: none;
}

.sc-dz-icon {
    font-size: 2rem;
    color: var(--accent);
    margin-bottom: 0.35rem;
}

.sc-dz-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
}

.sc-dz-sub {
    color: var(--ink-2);
    font-size: 0.86rem;
    line-height: 1.45;
}

.sc-dz-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.9rem;
}

.sc-file-summary {
    margin-top: 0.85rem;
    font-size: 0.9rem;
    color: var(--ink-2);
}

.sc-file-chip-list {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.supply-chain-page .sc-file-chip-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.45rem 0.8rem;
    background: var(--sheet);
    border: 1px solid var(--rule-soft);
    border-radius: 0;
    font-size: 0.85rem;
    word-break: break-all;
}

.sc-scan-progress {
    margin-top: 0.75rem;
    font-size: 0.88rem;
    color: var(--link);
}

.sc-info-block {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    background: var(--sheet-2);
    border-radius: 0;
    color: var(--ink-2);
    font-size: 0.88rem;
    line-height: 1.5;
}

.sc-path-hint {
    margin: 0.5rem 0;
    padding: 0.6rem 0.8rem;
    font-family: var(--sc-mono);
    font-size: 0.8rem;
    background: var(--sheet-3);
    border-radius: 0;
    overflow-x: auto;
    white-space: nowrap;
}

/* ---------------- Toast + popups ---------------- */
.sc-toast {
    position: fixed;
    right: 1.2rem;
    bottom: 1.2rem;
    z-index: 1300;
    max-width: min(440px, calc(100vw - 2.4rem));
    padding: 0.8rem 1rem 0.8rem 1.3rem;
    background: linear-gradient(90deg, var(--s1) 0 3px, var(--s2) 3px 6px, transparent 6px), var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: 0 0 0 transparent;
    color: var(--ink);
    font-size: 0.95rem;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 180ms, transform 180ms;
}

.sc-toast.show {
    opacity: 1;
    transform: none;
}

/* Every Supply Chain popup (and many other pages' popups). */
.sc-notify-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(5, 6, 8, 0.6);
}

.sc-notify-overlay[hidden] {
    display: none;
}

.sc-notify-card {
    width: min(480px, 100%);
    max-height: 80vh;
    overflow: auto;
    padding: calc(12px + 1.25rem) 1.5rem 1.3rem;
    background: var(--stripes-h) top / 100% 12px no-repeat, var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: 0 0 0 transparent, 0 30px 80px rgba(0, 0, 0, 0.35);
    color: var(--ink);
    text-align: left;
}

.sc-notify-card h2 {
    margin: 0 0 0.9rem;
    text-align: left;
    font-size: 1.15rem;
    line-height: 1.25;
}

.supply-chain-page .sc-notify-card p {
    margin: 0 0 0.65rem;
    font-size: 0.98rem;
    line-height: 1.5;
}

.sc-notify-card .sc-btn {
    margin-top: 0.6rem;
}

/* The notifications popup reads as a log: one entry per line. */
#sc-notify-body > p {
    margin: 0;
    padding: 0.7rem 0 0.7rem 1.1rem;
    border-top: 1px solid var(--rule-soft);
    background: radial-gradient(circle, var(--accent) 0 3.5px, transparent 4px) 0 1.25rem / 8px 8px no-repeat;
}

#sc-notify-body > p:first-child {
    border-top: 0;
    padding-top: 0.1rem;
    background-position: 0 0.65rem;
}

#sc-notify-body > p.sc-notice-reason {
    margin: -0.2rem 0 0.6rem 1.1rem;
    padding: 0.5rem 0.75rem;
    border-top: 0;
    background: var(--sheet-2);
}

#sc-notify-overlay .sc-notify-card > .sc-btn,
#sc-alert-overlay .sc-notify-card > .sc-btn {
    margin-top: 1rem;
    min-width: 7rem;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) {
    .sc-grid-2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .sc-field-row.sc-row-4 {
        grid-template-columns: 1fr 1fr;
    }
}

/* Narrow screens: the switch panel folds into one "Section: Warehouse"
   button above the page (js/supply_chain.js sectionButton). */
@media (max-width: 900px) {
    main.supply-chain-page {
        padding: 0.75rem;
    }

    body[data-sc-view] main.supply-chain-page {
        padding: 0.75rem 1rem 2.5rem;
    }

    .sc-shell {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
    }

    /* Full width and in the flow here (not sticky) on a narrow screen. */
    .sc-side-col {
        position: static;
        width: 100%;
    }

    .sc-sidebar-footer,
    .sc-side-plate {
        display: none;
    }

    .supply-chain-page .sc-jump {
        display: flex;
    }

    .sc-sidenav {
        display: none;
        padding-top: 0.35rem;
    }

    .sc-sidebar.is-open .sc-sidenav {
        display: flex;
        margin-top: 0.7rem;
        padding: 0.5rem;
        border: 1px solid var(--rule);
        border-radius: 0;
        background: var(--sheet);
        box-shadow: 0 0 0 transparent;
    }

    /* The button stands on its own; the box only shows round the open list. */
    .sc-sidebar {
        padding: 0;
        gap: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }

    .supply-chain-page .sc-nav-link {
        min-height: 46px;
        font-size: 0.66rem;
        box-sizing: border-box;
    }

    .sc-stats {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0.7rem;
    }

    .sc-stat-value {
        font-size: 2.1rem;
    }
}

@media (max-width: 560px) {
    :root,
    body,
    .supply-chain-page {
        --sc-pad-y: 0.95rem;
        --sc-pad-x: 0.95rem;
    }

    .sc-field-row,
    .sc-field-row.sc-row-4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .sc-card {
        padding: var(--sc-pad-y) var(--sc-pad-x);
    }

    .sc-notify-card {
        padding: calc(12px + 1rem) 1.1rem 1.1rem;
    }
}

/* ---------------- Search boxes ("combo", 2026-09-20) ----------------
   Site-styled replacement for the browser's own <datalist> popup. */
.sc-combo {
    position: relative;
}

.supply-chain-page .sc-combo-input {
    padding-right: 2.4rem;
}

.sc-combo-icon {
    position: absolute;
    right: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-2);
    pointer-events: none;
}

.sc-combo-list {
    position: absolute;
    z-index: 60;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: 0 0 0 transparent, 0 16px 30px rgba(0, 0, 0, 0.18);
}

.sc-combo-list[hidden] {
    display: none;
}

.supply-chain-page .sc-combo-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding: 0.5rem 0.65rem;
    margin: 0;
    border-radius: 0;
    font-size: 0.92rem;
    color: var(--ink);
    cursor: pointer;
}

.sc-combo-list li small {
    color: var(--ink-2);
    font-size: 0.82rem;
    white-space: nowrap;
}

.sc-combo-list li:hover,
.sc-combo-list li.active {
    background: var(--sheet-3);
    box-shadow: inset 4px 0 0 var(--accent);
}

.supply-chain-page .sc-combo-list li.sc-combo-none {
    color: var(--ink-2);
    cursor: default;
    background: none;
    box-shadow: none;
}


/* ---------------- Centred popup (move stock / craft location) -------- */
.supply-chain-page .sc-modal-card {
    position: relative;
    width: min(420px, 100%);
    overflow: visible;           /* let search-box suggestions spill out */
    max-height: none;
}

.sc-modal-card h2 {
    padding-right: 2.6rem;
}

.sc-modal-x {
    position: absolute;
    top: calc(12px + 0.7rem);
    right: 0.8rem;
    width: 36px;
    height: 36px;
    border: 1px solid var(--rule);
    border-radius: 0;
    background: var(--sheet);
    color: var(--ink);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.sc-modal-x:hover {
    background: var(--solid);
    color: var(--on-solid);
}

.supply-chain-page p.sc-modal-item {
    margin: 0 0 0.25rem;
    font-size: 1.02rem;
}

.supply-chain-page .sc-modal-card p.sc-dim {
    margin: 0 0 0.9rem;
    font-size: 0.9rem;
}

.sc-modal-all {
    width: 100%;
}

.sc-modal-or {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 1rem 0 0.75rem;
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0;
    font-weight: 500;
}

.sc-modal-or::before,
.sc-modal-or::after {
    content: "";
    flex: 1;
    border-top: 1px dashed var(--rule-soft);
}

.sc-modal-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.supply-chain-page .sc-modal-row input {
    flex: 1;
    width: auto;
    text-align: right;
}

.sc-modal-card .sc-form-actions {
    margin-top: 1.1rem;
}

/* ---------------- Marketplace crafter picker (2026-09-20) ------------ */
.sc-dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px var(--rule);
}

.sc-dot-green { background: var(--sc-green); }
.sc-dot-orange { background: var(--sc-orange); }
.sc-dot-red { background: var(--sc-red); }

.sc-status-green { color: var(--sc-green); font-weight: 700; }
.sc-status-orange { color: color-mix(in srgb, var(--sc-orange) 70%, var(--ink)); font-weight: 700; }
.sc-status-red { color: var(--sc-red); font-weight: 700; }

.sc-badge.sc-badge-green { border-color: var(--sc-green); background: color-mix(in srgb, var(--sc-green) 14%, var(--sheet)); }
.sc-badge.sc-badge-orange { border-color: var(--sc-orange); background: color-mix(in srgb, var(--sc-orange) 14%, var(--sheet)); }
.sc-badge.sc-badge-red { border-color: var(--sc-red); background: color-mix(in srgb, var(--sc-red) 12%, var(--sheet)); }

.theme-contrast .sc-badge.sc-badge-green,
.theme-contrast .sc-badge.sc-badge-orange,
.theme-contrast .sc-badge.sc-badge-red,
.theme-contrast .sc-badge.owned {
    background: #000;
}

.theme-contrast .sc-status-orange {
    color: #FFE000;
}

.sc-pick {
    position: relative;
}

.sc-pick-btn,
.sc-pick-list li {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    text-align: left;
}

.sc-pick-btn {
    min-height: 46px;
    padding: 0.4rem 0.9rem;
    background: var(--sheet);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 0;
    font: 0.95rem var(--font-body);
    cursor: pointer;
    box-shadow: 0 0 0 transparent;
    transition: background 0.15s;
}

.sc-pick-btn:hover,
.sc-pick-btn[aria-expanded="true"] {
    background: var(--sheet-2);
    border-color: var(--rule);
    box-shadow: 0 0 0 transparent;
}

.sc-pick-name {
    font-weight: 700;
}

.sc-pick-status {
    font-size: 0.85rem;
}

.sc-pick-caret {
    margin-left: auto;
    color: var(--ink);
}

.sc-pick-list {
    position: absolute;
    z-index: 60;
    left: 0;
    right: 0;
    top: calc(100% + 8px);
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 0;
    box-shadow: 0 0 0 transparent, 0 16px 30px rgba(0, 0, 0, 0.18);
}

.sc-pick-list[hidden] {
    display: none;
}

.supply-chain-page .sc-pick-list li {
    padding: 0.55rem 0.65rem;
    margin: 0;
    border-radius: 0;
    font-size: 0.94rem;
    cursor: pointer;
}

.sc-pick-list li:hover,
.sc-pick-list li.active {
    background: var(--sheet-3);
    box-shadow: inset 4px 0 0 var(--accent);
}

.sc-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.6rem;
    color: var(--ink-2);
}

.sc-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ---------------- Requests: claim-from popup (2026-09-20) ------------ */
.supply-chain-page .sc-modal-card.sc-modal-wide {
    width: min(580px, 100%);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.sc-claim-line {
    padding: 0.85rem 0;
    border-top: 1px dashed var(--rule-soft);
}

.sc-claim-line:first-of-type {
    border-top: 0;
    padding-top: 0.2rem;
}

.supply-chain-page .sc-claim-line p.sc-dim {
    margin: 0 0 0.6rem;
}

.supply-chain-page .sc-claim-line select {
    margin: 0.25rem 0 0.5rem;
}

.supply-chain-page .sc-claim-line p.sc-small,
.supply-chain-page .sc-claim-line p.sc-cant {
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
}

/* ---------------- Requests: reject reason / hold for ore (2026-09-20) --- */
.supply-chain-page textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    background-color: var(--sheet);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 0;
    font: 0.95rem var(--font-body);
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.supply-chain-page textarea:focus {
    border-color: var(--rule);
    box-shadow: none;
}

/* A warning strip: amber edge, a pale amber wash. */
.sc-hold-banner {
    margin: 0 0 1rem;
    padding: 0.65rem 0.85rem 0.65rem 1rem;
    border: 2px solid var(--warn);
    border-left-width: 6px;
    border-radius: 0;
    background: color-mix(in srgb, var(--warn) 12%, var(--sheet));
    color: var(--ink);
    font-size: 0.92rem;
}

.sc-hold-banner .fa {
    color: color-mix(in srgb, var(--warn) 70%, var(--ink));
}

.sc-hold-banner a {
    color: var(--link);
}

.theme-contrast .sc-hold-banner {
    background: #000;
}

.theme-contrast .sc-hold-banner .fa {
    color: #FFE000;
}

.sc-ore-orders {
    margin: 1rem 0 0.4rem;
}

.supply-chain-page .sc-ore-orders h4 {
    margin: 0 0 0.45rem;
    color: var(--ink-2);
    font-size: 0.82rem;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 500;
}

.sc-ore-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.45rem 0;
    border-top: 1px solid var(--rule-soft);
    font-size: 0.92rem;
}

.sc-ore-row:first-of-type {
    border-top: 0;
}

.supply-chain-page ul.sc-hold-list {
    margin: 0 0 0.4rem;
    padding-left: 1.2rem;
}

.supply-chain-page ul.sc-hold-list li {
    margin: 0.25rem 0;
    font-size: 0.92rem;
}

.supply-chain-page .sc-notify-card p.sc-notice-reason {
    margin-top: -0.3rem;
    padding: 0.5rem 0.75rem;
    border-left: 1px solid var(--accent);
    border-radius: 0 8px 8px 0;
    background: var(--sheet-2);
    font-size: 0.92rem;
}


/* ---------------- 2026-09-21: import popup, location move ---------------- */
.supply-chain-page .sc-notify-card.sc-import-card {
    position: relative;
    width: min(1100px, 100%);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.sc-import-card h2 {
    padding-right: 2.6rem;
}

.supply-chain-page .sc-import-card > .sc-form-actions {
    margin-top: 0.8rem;
}

.sc-import-card .sc-card {
    box-shadow: none;
    border-color: var(--rule-soft);
    border-radius: 0;
}

/* A value you can click to change (location, quality): a dotted underline
   and a pencil that darkens on hover. */
.sc-loc-link {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-bottom: 2px dotted var(--ink-3);
}

.sc-loc-link .fa {
    margin-left: 0.25rem;
    font-size: 0.8em;
    opacity: 0.5;
}

.sc-loc-link:hover,
.sc-loc-link:focus-visible {
    color: var(--link);
    border-bottom-color: var(--link);
}

.sc-loc-link:hover .fa {
    opacity: 1;
}

.sc-modal-card .sc-modal-all + .sc-modal-or {
    margin-top: 1rem;
}

.sc-modal-card .sc-field + .sc-modal-all {
    margin-top: 0.4rem;
}

/* Two equal buttons side by side (e.g. Send / Cancel) */
.sc-form-actions.sc-even .sc-btn {
    min-width: 110px;
}


/* ---------------- 2026-09-21: sidebar Dashboard button, public Blueprints ---------------- */

/* Filter pills that share a row with a search box or button sit in a tray
   as tall as them, so the row lines up. */
.sc-toolbar .sc-filter-pill {
    /* 23 Oct 2026: the tray's border is 1px a side (was taken as 2px, so the
       tray came out 2px shorter than the search box and buttons beside it) */
    height: calc(var(--control-h) - 0.5rem - 2px);
}

.bp-public-page .bp-public-content {
    display: block;
    max-width: 1500px;
    margin: 0 auto;
}

/* Change-location popup: wide enough for long location names on one line. */
.supply-chain-page .sc-modal-card.sc-modal-reloc {
    width: min(620px, 100%);
}

/* ---------------- 2026-09-22: Upload log files popup on phones ---------- */
.supply-chain-page .sc-import-card .sc-grid-2 > *,
.supply-chain-page .sc-import-card .sc-card {
    min-width: 0;
}

.sc-import-card .sc-dz-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.sc-import-card .sc-path-hint,
.sc-import-card code,
.sc-import-card .sc-file-chip-list span {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

@media (max-width: 600px) {
    #sc-import-overlay {
        padding: 0.75rem;
        align-items: flex-start;
    }

    .supply-chain-page .sc-notify-card.sc-import-card {
        max-height: calc(100dvh - 1.5rem);
        padding: calc(12px + 1rem) 1rem 1rem;
    }

    .sc-import-card .sc-card {
        padding: 0.9rem;
    }

    .sc-import-card .sc-dropzone {
        padding: 1.1rem 0.8rem;
    }

    .sc-import-card .sc-dz-actions .sc-btn {
        flex: 1 1 100%;
    }
}


/* ---------------- 2026-09-23: the shared aUEC offer popup ----------------
   One popup for every Supply Chain transaction (js/os-offer.js). It reuses
   the notify/modal card; the amount box is an amber CRT readout and the
   slider a fader. Zero is never shown anywhere, so there is deliberately
   no "no payment" styling.

   The offer popup is the one popup that opens ON TOP of another popup
   (Claim missing materials, Hold: Request Ore, the Blueprints panel), so it
   has a layer of its own - see the layering scale in root.css. */
.os-offer-overlay {
    z-index: 1250;
}

.os-offer-card {
    width: min(440px, 100%);
}

.os-offer-field {
    margin-bottom: 0.55rem;
}

.supply-chain-page input.os-offer-amount,
.supply-chain-page input.os-offer-amount:focus {
    height: 64px;
    padding: 0 1rem;
    background: linear-gradient(var(--crt), var(--crt));
    color: var(--phosphor);
    caret-color: var(--phosphor);
    border: 1px solid var(--rule);
    box-shadow: inset 0 0 0 2px #000, inset 0 0 26px rgba(0, 0, 0, 0.85);
    font-family: var(--font-crt);
    font-size: 2.6rem;
    letter-spacing: 0.04em;
    text-align: right;
    text-shadow: none;
}

.supply-chain-page input.os-offer-amount::placeholder {
    color: var(--phosphor-dim);
}

.supply-chain-page input.os-offer-amount::selection {
    background: var(--phosphor);
    color: var(--crt);
}

.theme-contrast .supply-chain-page input.os-offer-amount {
    background: #000;
    border-color: #fff;
    text-shadow: none;
}

.os-offer-hint {
    margin: 0 0 0.55rem !important;
    font-size: 0.86rem !important;
}

.os-offer-slider-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.4rem;
    padding: 0.5rem 0.75rem;
    background: var(--sheet-2);
    border: 1px solid var(--rule-soft);
    border-radius: 0;
}

.os-offer-slider-row input[type=range] {
    flex: 1 1 auto;
    min-width: 0;
    height: 24px;
    padding: 0;
    background: transparent;
    border: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.os-offer-step {
    flex: 0 0 4.4rem;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: var(--ink);
    text-transform: uppercase;
}

/* "No payment" sits away from the confirm button so it is never the one
   pressed by accident. */
.sc-form-actions.os-offer-actions {
    width: 100%;   /* the two buttons share the full width, equal halves */
    margin-top: 1rem;
}

@media (max-width: 480px) {
    .sc-form-actions.os-offer-actions {
        flex-wrap: wrap;
    }

    .sc-form-actions.os-offer-actions .sc-btn {
        flex: 1 1 100%;
    }
}

/* One line saying where the aUEC amount on a request has got to. Never
   rendered when nothing was offered. Block, not flex: a flex container
   turns each run of text into its own item. */
.supply-chain-page p.sc-offer-line {
    margin: 0 0 0.85rem;
    padding: 0.55rem 0.85rem;
    background: var(--sheet-2);
    border: 1px solid var(--rule-soft);
    border-left: 1px solid var(--accent);
    border-radius: 0;
    font-size: 0.94rem;
}

.supply-chain-page p.sc-offer-line i {
    margin-right: 0.5rem;
    color: var(--link);
}

/* The Blueprints panel carries the Requests materials table in a narrower
   column: it SCROLLS sideways rather than spill out of the card. */
.sc-bp-panel .sc-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sc-bp-panel .sc-data {
    min-width: 30rem;
    font-size: 0.88rem;
}

.sc-bp-panel .sc-data th,
.sc-bp-panel .sc-data td {
    white-space: nowrap;
    padding-left: 0.55rem;
    padding-right: 0.55rem;
}

/* ---------------- Distribution board, grouped by item (28 Sep) ----------
   One collapsible line per item (closed by default); open it for every lot,
   best quality first. The claim form on the right is for one lot. */
.sc-dist-filters {
    grid-template-columns: minmax(12rem, 2fr) minmax(7rem, 0.8fr) minmax(10rem, 1.1fr) auto;
    align-items: end;
}

.sc-dist-view {
    display: flex;
    gap: 0.4rem;
}

/* The grouped / all-lots switch sits in the same tray as the filter pills. */
.sc-dist-view .sc-filter-pill {
    height: calc(var(--control-h) - 4px);
    padding: 0 0.85rem;
    background: var(--sheet-3);
    border: 1px solid var(--rule);
}

.sc-dist-view .sc-filter-pill.active {
    background: var(--solid);
}

.sc-dist-grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}

table.sc-dist-table tbody.sc-dist-group + tbody.sc-dist-group tr.sc-dist-head td {
    border-top: 1px solid var(--rule-soft);
}

table.sc-dist-table tr.sc-dist-head td {
    border-bottom: none;
}

table.sc-dist-table tbody.sc-dist-group.is-expanded tr.sc-dist-head td {
    background: var(--sheet-2);
}

.sc-dist-caret {
    display: inline-block;
    width: 0;
    height: 0;
    margin-right: 0.6rem;
    vertical-align: middle;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 1px solid var(--ink);
    transition: transform 0.15s ease;
}

.sc-dist-group.is-expanded .sc-dist-caret {
    transform: rotate(90deg);
    border-left-color: var(--accent);
}

.sc-dist-name {
    font-weight: 700;
}

.sc-dist-head td:first-child .sc-small {
    margin-left: calc(7px + 0.6rem);
}

table.sc-dist-table tr.sc-dist-lots td {
    padding: 0 0.85rem 0.45rem calc(0.85rem + 7px + 0.6rem);
    background: var(--sheet-2);
    box-shadow: inset 5px 0 0 var(--accent);
}

table.sc-dist-table tr.sc-dist-lots:hover {
    background: transparent;
}

.sc-dist-lot {
    display: grid;
    grid-template-columns: minmax(8rem, 1.2fr) minmax(5rem, 0.8fr) minmax(6rem, 1.3fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-top: 1px dashed var(--ink-3);
}

.sc-dist-lot.is-picked {
    box-shadow: inset 4px 0 0 var(--ink);
    padding-left: 0.6rem;
}

.sc-dist-lot .sc-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.sc-dist-lot-act {
    text-align: right;
}

/* The lot you picked to claim: a small manifest slip. */
.sc-dist-lotcard {
    margin-top: 0.8rem;
    padding: 0.8rem 0.95rem;
    border: 2px dashed var(--ink-3);
    border-radius: 0;
    background: var(--sheet-2);
}

.sc-dist-lotcard-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1rem;
}

.sc-dist-lotcard-act {
    margin-top: 0.55rem;
}

.sc-dist-qty {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.sc-dist-qty input {
    max-width: 10rem;
}

@media (max-width: 1100px) {
    .sc-dist-filters {
        grid-template-columns: 1fr 1fr;
    }

    /* minmax(0, ...) so a wide table scrolls inside its own box instead of
       pushing the whole page sideways on a phone. */
    .sc-dist-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .sc-dist-filters {
        grid-template-columns: minmax(0, 1fr);
    }

    .sc-dist-lot {
        grid-template-columns: 1fr auto;
    }

    .sc-dist-lot > span:nth-child(3) {
        grid-column: 1 / -1;
        order: 5;
    }
}

/* "In game" column on both Blueprints pages (28 Sep). */
.sc-ingame {
    text-align: center;
    font-size: 1.05rem;
}

.sc-ingame-yes {
    color: var(--good);
    font-weight: bold;
}

.sc-ingame-no {
    color: var(--bad);
    font-weight: bold;
}

/* Warehouse grouped by item (28 Sep). */
.sc-wh-filters {
    grid-template-columns: minmax(12rem, 2fr) minmax(10rem, 1fr) auto;
}

.sc-wh-lot {
    display: grid;
    grid-template-columns: minmax(7rem, 0.9fr) minmax(9rem, 1fr) minmax(7rem, 1fr) auto minmax(12rem, auto);
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0;
    border-top: 1px dashed var(--ink-3);
}

.sc-wh-qty .sc-qty-edit {
    justify-content: flex-start;
}

.sc-wh-act .sc-actions {
    justify-content: flex-end;
}

@media (max-width: 1100px) {
    .sc-wh-filters {
        grid-template-columns: 1fr 1fr;
    }

    .sc-wh-lot {
        grid-template-columns: 1fr 1fr;
    }

    .sc-wh-act {
        grid-column: 1 / -1;
    }

    .sc-wh-act .sc-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 640px) {
    .sc-wh-filters {
        grid-template-columns: minmax(0, 1fr);
    }

    /* A phone: the item line keeps Material / Best / Total, and a lot's
       amount editor gets a row of its own. */
    .sc-wh-table thead th:nth-child(n+4),
    .sc-wh-table .sc-dist-head td:nth-child(n+4) {
        display: none;
    }

    .sc-wh-lot .sc-wh-qty {
        grid-column: 1 / -1;
        order: 1;
    }

    .sc-wh-lot > span:first-child {
        order: 0;
    }

    .sc-wh-lot > span:nth-child(3),
    .sc-wh-lot > span:nth-child(4) {
        order: 2;
    }

    .sc-wh-lot .sc-wh-act {
        order: 3;
    }
}

/* Open Craft Requests (28 Sep) - the board, and "Open Request" at the top
   of the Marketplace crafter list. */
.sc-pick-open-icon {
    width: 10px;
    color: var(--link);
    text-align: center;
}

.sc-pick-name {
    white-space: nowrap;
}

.sc-pick-list li.sc-pick-open {
    border-bottom: 1px dashed var(--rule-soft);
    border-radius: 0 0 0;
}

.sc-open-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

.sc-open-filters .sc-filter-pills {
    margin-bottom: 0;
}

.sc-open-filters .sc-field {
    flex: 0 1 18rem;
    margin: 0;
}

.sc-open-act {
    text-align: right;
    white-space: nowrap;
}

.sc-open-locked {
    opacity: 0.75;
}

@media (max-width: 640px) {
    .sc-open-filters .sc-field {
        flex-basis: 100%;
    }

    /* One slip per request on a phone, so Claim is never off to the side. */
    .sc-open-table thead {
        display: none;
    }

    .sc-open-table,
    .sc-open-table tbody,
    .sc-open-table tr,
    .sc-open-table td {
        display: block;
        width: 100%;
    }

    .sc-open-table tr {
        padding: 0.7rem 0.85rem;
        border-bottom: 2px dashed var(--ink-3);
    }

    .sc-open-table tr:last-child {
        border-bottom: 0;
    }

    .sc-open-table td {
        padding: 0.15rem 0;
        border: 0;
    }

    .sc-open-table td[data-label]::before {
        content: attr(data-label) ": ";
        color: var(--ink-2);
        font-family: var(--font-mono);
        font-size: 0.75rem;
        letter-spacing: 0;
        text-transform: uppercase;
    font-weight: 500;
}

    .sc-open-act {
        text-align: left;
        white-space: normal;
        padding-top: 0.5rem !important;
    }
}

/* Warehouse (7 Oct): the quality is a button that opens Change quality. */
.sc-loc-link.sc-q-link {
    white-space: nowrap;
}

/* "Have Requester Gather Materials" (7 Oct): the note on the requester's
   own row (Marketplace > Your requests). */
.sc-gather-note {
    margin-top: 0.4rem;
    padding: 0.4rem 0.6rem;
    border: 2px solid var(--warn);
    border-radius: 0;
    background: color-mix(in srgb, var(--warn) 12%, var(--sheet));
    color: var(--ink);
    font-size: 0.85rem;
    line-height: 1.35;
}

.sc-gather-note a {
    color: var(--link);
}

.theme-contrast .sc-gather-note {
    background: #000;
}

/* Look and layout (12 Oct 2026): the next-step buttons inside an empty list. */
.sc-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    margin-top: 1rem;
}

.sc-empty .sc-empty-actions .sc-btn {
    text-decoration: none;
}

/* The game-list update: one small line, not a big box. */
.sc-sync-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--ink-2);
    font-size: 0.88rem;
}

.sc-sync-note .fa {
    color: var(--accent);
}

.sc-sync-detail {
    opacity: 0.85;
}

/* Requests progress line (12 Oct 2026): Asked, Accepted, Crafted, Handed
   over - a row of indicator lamps. Done lamps filled ink, the current one
   lit orange, later ones hollow. */
.sc-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0;
    margin: 0.2rem 0 1rem;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.sc-steps li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: uppercase;
    font-weight: 500;
}

.sc-steps li + li::before {
    content: "";
    display: inline-block;
    width: 1.8rem;
    height: 2px;
    margin: 0 0.5rem;
    background: var(--rule-soft);
}

.sc-steps li.is-done + li::before,
.sc-steps li.is-done + li.is-now::before {
    background: var(--ink);
}

.sc-step-dot {
    width: 0.85rem;
    height: 0.85rem;
    border: 1px solid var(--rule);
    border-radius: 0;
    flex: 0 0 auto;
    background: var(--sheet);
}

.sc-steps li.is-done {
    color: var(--ink);
}

.sc-steps li.is-done .sc-step-dot {
    background: var(--ink);
    border-color: var(--rule);
}

.sc-steps li.is-now {
    color: var(--ink);
    font-weight: normal;
}

.sc-steps li.is-now .sc-step-dot {
    width: 1rem;
    height: 1rem;
    border-color: var(--rule);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
    background: var(--accent);
}

/* In the "Your requests" table: just the lamps, with the current step's
   name. */
.sc-steps.is-compact {
    flex-wrap: nowrap;
    margin: 0 0 0.25rem;
}

.sc-steps.is-compact li + li::before {
    width: 0.6rem;
    margin: 0 0.2rem;
}

.sc-steps.is-compact li:not(.is-now) .sc-step-name {
    display: none;
}

.sc-steps.is-compact li.is-now .sc-step-name {
    white-space: nowrap;
}

.sc-steps.is-stopped {
    display: block;
    color: var(--bad);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.88rem;
}

@media (max-width: 640px) {
    /* A phone: four even columns, each lamp above its name. */
    .sc-steps:not(.is-compact):not(.is-stopped) {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0.3rem;
    }

    .sc-steps:not(.is-compact) li {
        flex-direction: column;
        gap: 0.3rem;
        text-align: center;
        font-size: 0.55rem;
        letter-spacing: 0.06em;
        line-height: 1.3;
    }

    .sc-steps:not(.is-compact) li + li::before {
        display: none;
    }
}

/* Warehouse bulk (12 Oct 2026): tick boxes and the bar above the list. */
.sc-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    padding: 0.8rem 1rem;
    background: var(--sheet-2);
}

.sc-bulk-all {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
}

.supply-chain-page p.sc-bulk-note {
    flex: 1 1 100%;
    margin: 0;
    color: var(--ink-2);
    font-size: 0.88rem;
    line-height: 1.45;
}

.sc-bulk-note .fa {
    color: var(--link);
}

.sc-bulk-count {
    color: var(--ink-2);
    font-size: 0.92rem;
}

.sc-bulk-count strong {
    color: var(--ink);
}

.sc-bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-left: auto;
}

.sc-wh-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    cursor: pointer;
}

.sc-wh-tick input,
.sc-bulk-all input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.sc-tick-cell {
    width: 2.5rem;
}

.sc-wh-q {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.sc-tick-note {
    color: var(--link);
    font-weight: 700;
}

@media (max-width: 640px) {
    .sc-bulk-actions {
        margin-left: 0;
        width: 100%;
    }

    .sc-bulk-actions .sc-btn {
        flex: 1 1 auto;
    }
}

/* Long lists on the Distribution page scroll inside their card (17 Oct
   2026, Matt). The column headings stay in view. */
.sc-table-wrap.sc-scroll-list {
    max-height: 28rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sc-table-wrap.sc-scroll-list thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

.sc-mylisted-tools .sc-search {
    flex: 1 1 14rem;
}

@media (max-width: 700px) {
    .sc-table-wrap.sc-scroll-list {
        max-height: 70vh;
    }
}

/* Blueprints (17 Oct 2026, Matt): what the blueprint makes, under its name -
   "Size 3 · Military · Grade A · Shield". */
.sc-bp-spec {
    display: block;
    margin-top: 0.15rem;
    color: var(--ink-2);
    font-size: 0.82rem;
    letter-spacing: 0.02em;
}

.theme-contrast .sc-bp-spec { color: #ffffff; }

/* Phones: the title bar stacks, Add lot under the title. */
@media (max-width: 700px) {
    .sc-titlebar {
        flex-direction: column;
        align-items: stretch;
        margin-top: 0.6rem;
    }

    .sc-titlebar .sc-add-lot {
        align-self: flex-start;
    }
}

/* One orange main action per screen: when the page itself has one (New
   request, Post open request ...), "Add lot" in the title bar turns into
   the dark switch. */
body[data-sc-view]:has(.sc-content .sc-btn.is-primary) .sc-titlebar .sc-btn.sc-add-lot {
    background: var(--solid);
    color: var(--on-solid);
}

/* Phones: the blueprint panel fits between the top bar and the bottom bar
   (nav.css), so neither covers its title or its last buttons. */
@media (max-width: 700px) {
    html.has-mobile-bar .sc-bp-panel {
        top: calc(var(--nav-height, 62px) + 8px);
        max-height: calc(100dvh - var(--nav-height, 62px) - var(--mobile-bar-h, 64px) - env(safe-area-inset-bottom, 0px) - 16px);
        transform: translate(-50%, 12px);
    }

    html.has-mobile-bar .sc-bp-panel.open {
        transform: translate(-50%, 0);
    }
}

/* Phones: a tray of filter pills becomes an even grid of switches, so a
   wrapped row never leaves one pill stranded on its own. */
@media (max-width: 560px) {
    .sc-filter-pills {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
        width: 100%;
    }

    .sc-filter-pill {
        padding: 0 0.5rem;
    }
}

/* 26 Oct 2026 (accessibility scan): no theme glow under the text of the highlighted section
   button; on its solid background the glow lowered the contrast in some ship maker themes. */
.sc-nav-link.active,
.sc-nav-link.active * {
    text-shadow: none;
}