/* Obsidian Squad Supply Chain - restyled from the standalone "OCM"
 * prototype (ocm/css/style.css) to match the main site, 2026-09-19.
 *
 * Layout (left sidebar + content column, stat tiles, tables, cards,
 * slide-in blueprint panel, notification popup) is kept from the
 * prototype; its Material-style colour tokens (--md-*) are replaced by the
 * site's own root.css tokens so both the default (blue) and .theme-alt
 * (red) themes work with no extra overrides. The prototype's own top nav,
 * login screen and account switcher are gone - the site's nav.php/footer
 * and members login are used instead.
 *
 * Every selector is either prefixed "sc-" or scoped under
 * .supply-chain-page, so nothing here can leak onto other pages (same
 * discipline as retrofitter.css / commodities.css).
 *
 * root.css gotcha: its global "p, li, ul { font-size: 1.15rem }" beats
 * inherited sizes, so every container below that uses <p>/<li> sets them
 * explicitly.
 */

.supply-chain-page {
    --sc-card: rgba(10, 26, 45, 0.72);
    --sc-card-2: rgba(14, 40, 66, 0.72);
    --sc-muted: #9ec8e8;
    --sc-line: rgba(61, 187, 255, 0.18);
    --sc-ok: #6bffb3;
    --sc-bad: #ff8a8a;
    --sc-mono: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
}

.theme-alt .supply-chain-page,
.theme-alt.supply-chain-page {
    --sc-card: rgba(34, 10, 12, 0.78);
    --sc-card-2: rgba(52, 14, 18, 0.78);
    --sc-muted: #e8a0a4;
    --sc-line: rgba(255, 75, 75, 0.2);
}

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

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

/* Hero title - same treatment as the Mining Board / Retrofitter */
main.supply-chain-page > h1 {
    margin: 1rem 0 0.15em;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.1;
}

main.supply-chain-page > h1 + p {
    margin: 0 0 1.25rem;
    text-align: center;
    font-size: clamp(0.85rem, 1.6vw, 1.1rem);
}

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

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

.supply-chain-page code {
    font-family: var(--sc-mono);
    font-size: 0.85em;
}

/* ---------------- Shell: sidebar + content ---------------- */
/* The min-height is what makes the sticky sidebar below 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, so on a short page the column filled the row
   and the browser had nowhere to stick it to - it simply scrolled away
   under the nav, which looks identical to sticky being switched off. */
.sc-shell {
    display: flex;
    gap: 1.25rem;
    max-width: 1500px;
    margin: 0 auto;
    align-items: flex-start;
    min-height: calc(100dvh - var(--nav-height, 60px));
}

/* Sticks BELOW the nav bar, not under it. `top` on a sticky element is
   measured from the top of the viewport, and the nav is fixed at the top
   with a height of its own - so a plain `top: 1rem` parked this box behind
   the nav (24 Sep). The extra 1rem is clear space, so the borders never touch.
   No height cap and no scroll bar inside it (Matt, 1 Oct: the Mining Board's
   column was cut off at the bottom with its own scroll bar). When the column
   is taller than the window, js/supply_chain.js (stickySideColumn) moves this
   `top` as you scroll: the column travels with the page until its bottom is
   on screen and holds there, and comes back down below the nav when you
   scroll up. A column that fits keeps the `top` below. */
.sc-side-col {
    position: sticky;
    top: calc(var(--nav-height, 60px) + 1rem);
    width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* The Mining Board puts a second box (New Request) under the nav, and this
   class used to drop the whole column out of sticky to make room for it -
   which is why its nav slid up under the site nav while every other Supply
   Chain page's stopped below it (Matt, 24 Sep). It doesn't need its own
   behaviour any more: the shell's min-height gives the column somewhere to
   travel, so the Mining Board sticks exactly like the Blueprints page; its
   taller column is handled by the moving `top` described above. The class
   stays as a hook - nothing above needs to be undone for it. */
.sc-side-col.has-extra > * {
    flex-shrink: 0;
}

.sc-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0.75rem;
    background: var(--gradient-light);
    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius1);
}

.sc-sidebar-brand {
    padding: 0.25rem 0.5rem 0.9rem;
    border-bottom: 1px solid var(--border-colour);
}

.sc-brand {
    font-family: var(--font-display);
    font-size: 1.25rem;
    letter-spacing: 0.08em;
    color: var(--highlight-colour);
}

.sc-brand-sub {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sc-muted);
}

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

.supply-chain-page .sc-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid transparent;
    border-radius: var(--radius1);
    color: #fff;
    text-decoration: none;
    font-size: 0.92rem;
    transition: background 0.2s, border-color 0.2s;
}

.supply-chain-page .sc-nav-link:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--border-colour);
}

.supply-chain-page .sc-nav-link.active {
    background: var(--gradient-main);
    border-color: var(--highlight-colour);
    color: var(--highlight-colour);
    box-shadow: 0 0 8px var(--glow-colour);
}

.sc-nav-badge {
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.35rem;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--highlight-colour);
    color: #000;
    font-size: 0.72rem;
    font-weight: bold;
}

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

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

.sc-user-tag {
    color: var(--sc-muted);
}

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

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

.sc-page-head h2 {
    margin: 0 0 0.3rem;
    text-align: left;
    font-size: 1.6rem;
    letter-spacing: 0.06em;
}

.supply-chain-page .sc-page-head p {
    margin: 0;
    color: var(--sc-muted);
    font-size: 0.92rem;
    line-height: 1.45;
}

.sc-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.2rem;
}

.sc-stat {
    padding: 0.9rem 1rem;
    background: var(--background-dark);
    border: 1px solid var(--border-colour);
    border-radius: var(--radius1);
    text-align: center;
}

.sc-stat-label {
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sc-muted);
}

.sc-stat-value {
    margin-top: 0.3rem;
    font-family: var(--font-display);
    font-size: 1.45rem;
    color: var(--highlight-colour);
    font-variant-numeric: tabular-nums;
}

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

/* ---------------- Cards ---------------- */
.sc-card {
    padding: 1.15rem 1.3rem;
    margin-bottom: 1.1rem;
    background: var(--gradient-light);
    border: 0.125rem solid var(--border-colour);
    border-radius: var(--radius1);
}

.sc-card.sc-inner {
    margin: 0.85rem 0 0;
    background: var(--background-dark);
}

.sc-card h3 {
    margin: 0 0 0.85rem;
    text-align: left;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
}

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

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

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

.sc-banner,
.sc-banner-card {
    border-color: var(--highlight-colour);
    box-shadow: 0 0 10px var(--glow-colour);
}

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

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

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

.sc-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
    align-items: start;
}

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

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

.sc-can {
    color: var(--sc-ok);
}

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

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

.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 select {
    width: 100%;
    height: 40px;
    padding: 0 0.8rem;
    background: var(--background-dark);
    color: #fff;
    border: 0.125rem solid var(--border-colour);
    border-radius: var(--radius1);
    font: 0.92rem var(--font-body);
    color-scheme: dark;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.supply-chain-page input:focus,
.supply-chain-page select:focus {
    outline: none;
    border-color: var(--highlight-colour);
    box-shadow: 0 0 8px var(--glow-colour);
}

.supply-chain-page select optgroup {
    color: var(--highlight-colour);
    background: #000;
}

.supply-chain-page select option {
    color: #fff;
    background: var(--background-dark);
}

.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;
}

.sc-filter-pills {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}

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

.sc-filter-pill {
    height: 34px;
    padding: 0 0.9rem;
    background: transparent;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius1);
    color: var(--sc-muted);
    font-size: 0.84rem;
    cursor: pointer;
}

.sc-filter-pill:hover {
    border-color: var(--highlight-colour);
}

.sc-filter-pill.active {
    background: var(--gradient-main);
    border-color: var(--highlight-colour);
    color: #fff;
}

.sc-lbl {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.82rem;
    font-weight: bold;
    color: var(--sc-muted);
}

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

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

.sc-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.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.45rem;
    font-size: 0.84rem;
    color: var(--sc-muted);
}

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

/* ---------------- Buttons ----------------
   Same look as the site's .form-container-item buttons. */
.sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0.45rem 1rem;
    background: var(--gradient-main);
    color: #fff;
    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius1);
    font-family: var(--font-display);
    font-size: 0.95rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.supply-chain-page a.sc-btn {
    color: #fff;
}

.sc-btn:hover:not([disabled]) {
    transform: scale(1.03);
    box-shadow: 0 0 10px var(--glow-colour);
}

.sc-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

.sc-btn.tonal {
    background: var(--gradient-accent);
}

.sc-btn.outlined {
    background: transparent;
}

.sc-btn.danger {
    background: transparent;
    border-color: #ff6b6b;
    color: #ffb0b0;
}

.sc-btn.sm {
    min-height: 32px;
    padding: 0.25rem 0.7rem;
    font-family: var(--font-body);
    font-size: 0.78rem;
}

.sc-form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

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

.sc-form-actions.sc-wrap {
    flex-wrap: wrap;
}

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

/* ---------------- Tables ---------------- */
.sc-table-wrap {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--radius1);
}

table.sc-data {
    width: 100%;
    border-collapse: collapse;
    background: var(--background-dark);
    border: 1px solid var(--border-colour);
    border-radius: var(--radius1);
    overflow: hidden;
}

table.sc-data th,
table.sc-data td {
    padding: 0.65rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid var(--sc-line);
    font-size: 0.88rem;
    vertical-align: middle;
}

table.sc-data thead tr {
    background: var(--gradient-main);
}

table.sc-data th {
    background: transparent;
    color: var(--sc-muted);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

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

table.sc-data tbody tr:hover {
    background: rgba(255, 255, 255, 0.04);
}

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

table.sc-data tbody tr.is-open {
    background: var(--sc-card-2);
    box-shadow: inset 3px 0 0 var(--highlight-colour);
}

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

.sc-group-row td {
    background: var(--sc-card);
    color: var(--highlight-colour);
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

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

.supply-chain-page .sc-qty-edit input {
    width: 5.5rem;
    height: 32px;
    padding: 0 0.4rem;
    text-align: right;
    font-family: var(--sc-mono);
}

.sc-qty-edit button {
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-colour);
    border-radius: 50%;
    background: transparent;
    color: #fff;
    cursor: pointer;
    line-height: 1;
}

.sc-qty-edit button:hover {
    border-color: var(--highlight-colour);
    color: var(--highlight-colour);
}

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

/* ---------------- Badges, quality bar ---------------- */
.sc-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--border-colour);
    border-radius: var(--radius1);
    font-size: 0.72rem;
    font-weight: bold;
    white-space: nowrap;
}

.sc-badge.warehouse {
    color: var(--highlight-colour);
}

.sc-badge.distributed {
    color: #ffd76b;
    border-color: #a8872a;
}

.sc-badge.owned {
    color: var(--sc-ok);
    border-color: #2f8a57;
}

.sc-badge.missing {
    color: var(--sc-muted);
}

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

.sc-q-bar {
    display: inline-block;
    width: 72px;
    height: 6px;
    margin-right: 0.45rem;
    vertical-align: middle;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}

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

/* ---------------- Blueprint side panel ---------------- */
.sc-bp-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    background: rgba(2, 8, 14, 0.82);
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms;
}

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

/* Blueprint detail: a centred popup like the Ship Codex one (22 Sep 2026 -
   it used to slide in from the right edge). 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(760px, calc(100vw - 2rem));
    max-height: min(88vh, 900px);
    display: flex;
    flex-direction: column;
    background: var(--background-dark);
    border: 1px solid var(--border-colour);
    border-radius: var(--radius2);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.6), 0 0 14px var(--glow-colour);
    overflow: hidden;
    color: #fff;
    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: 1.1rem 1.3rem;
    background: var(--gradient-main);
    border-bottom: 1px solid var(--border-colour);
}

.sc-bp-head h2 {
    margin: 0;
    text-align: left;
    font-size: 1.3rem;
}

.sc-bp-close {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
}

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

.sc-bp-section h3 {
    text-align: left;
    font-size: 1rem;
    margin: 1.1rem 0 0.5rem;
}

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

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

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

/* ---------------- Import dropzone ---------------- */
.sc-dropzone {
    padding: 1.5rem 1.2rem;
    text-align: center;
    background: var(--background-dark);
    border: 2px dashed var(--border-colour);
    border-radius: var(--radius1);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.sc-dropzone:hover,
.sc-dropzone.dragover {
    border-color: var(--highlight-colour);
    box-shadow: 0 0 10px var(--glow-colour);
}

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

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

.sc-dz-label {
    font-size: 1.05rem;
    font-weight: bold;
    margin-bottom: 0.25rem;
}

.sc-dz-sub {
    color: var(--sc-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

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

.sc-file-summary {
    margin-top: 0.85rem;
    font-size: 0.88rem;
    color: var(--sc-muted);
}

.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(--background-dark);
    border: 1px solid var(--border-colour);
    border-radius: var(--radius1);
    font-size: 0.82rem;
    word-break: break-all;
}

.sc-scan-progress {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--highlight-colour);
}

.sc-info-block {
    margin-top: 1rem;
    padding: 0.85rem 1rem;
    background: var(--background-dark);
    border-radius: var(--radius1);
    color: var(--sc-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}

.sc-path-hint {
    margin: 0.5rem 0;
    padding: 0.6rem 0.8rem;
    font-family: var(--sc-mono);
    font-size: 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--radius1);
    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.75rem 1rem;
    background: var(--gradient-main);
    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius1);
    box-shadow: 0 0 12px var(--glow-colour);
    color: #fff;
    font-size: 0.9rem;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 180ms, transform 180ms;
}

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

.sc-notify-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.65);
}

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

.sc-notify-card {
    width: min(460px, 100%);
    max-height: 80vh;
    overflow: auto;
    padding: 1.4rem 1.4rem 1.2rem;
    background: var(--gradient-main);
    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius2);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 14px var(--glow-colour);
    color: #fff;
}

.sc-notify-card h2 {
    margin: 0 0 0.75rem;
    text-align: left;
    font-size: 1.35rem;
}

.supply-chain-page .sc-notify-card p {
    margin: 0 0 0.6rem;
    font-size: 0.95rem;
    line-height: 1.45;
}

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

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

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

/* On narrow screens the sidebar becomes a horizontal, scrollable strip of
   page links above the content (the prototype simply hid it, which would
   leave no way to move between the now-separate pages). */
@media (max-width: 900px) {
    main.supply-chain-page {
        padding: 0.75rem;
    }

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

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

    .sc-sidebar {
        padding: 0.6rem;
        gap: 0.5rem;
    }

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

    .sc-sidenav {
        flex-direction: row;
        overflow-x: auto;
        gap: 0.35rem;
    }

    .supply-chain-page .sc-nav-link {
        flex: 0 0 auto;
        white-space: nowrap;
    }

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

@media (max-width: 560px) {
    .sc-field-row,
    .sc-field-row.sc-row-4 {
        grid-template-columns: 1fr;
    }

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

/* ---------------- Search boxes ("combo", 2026-09-20) ----------------
   Site-styled replacement for the browser's own <datalist> popup, which
   can't be themed. Used for Material, Location, Crafted-log Product and
   Marketplace Product. */
.sc-combo {
    position: relative;
}

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

.sc-combo-icon {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--highlight-colour);
    pointer-events: none;
    opacity: 0.8;
}

.sc-combo-list {
    position: absolute;
    z-index: 60;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    background: var(--gradient-main);
    background-color: var(--background-dark);
    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 10px var(--glow-colour);
}

.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.45rem 0.6rem;
    margin: 0;
    border-radius: calc(var(--radius1) - 2px);
    font-size: 0.9rem;
    color: #fff;
    cursor: pointer;
}

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

.sc-combo-list li:hover,
.sc-combo-list li.active {
    background: var(--main-colour1);
    box-shadow: inset 3px 0 0 var(--highlight-colour);
}

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

/* Amount + button for partial moves (Warehouse / Distribution) */
.sc-move {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.sc-move .sc-btn {
    white-space: nowrap;
}

.supply-chain-page input.sc-move-qty {
    width: 5rem;
    height: 32px;
    padding: 0 0.45rem;
    text-align: right;
    font-family: var(--sc-mono);
}

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

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

.sc-modal-x {
    position: absolute;
    top: 0.6rem;
    right: 0.7rem;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
}

.sc-modal-x:hover {
    color: var(--highlight-colour);
}

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

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

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

.sc-modal-or {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.9rem 0 0.7rem;
    color: var(--sc-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

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

.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;
    font-family: var(--sc-mono);
}

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

/* ---------------- Marketplace crafter picker (2026-09-20) ------------
   green = materials in warehouse, orange = materials on their board,
   red = blueprint only. Same colours in both site themes. */
.supply-chain-page {
    --sc-green: #4ee08a;
    --sc-orange: #ffa53d;
    --sc-red: #ff5b5b;
}

.sc-dot {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.sc-dot-green { background: var(--sc-green); box-shadow: 0 0 6px var(--sc-green); }
.sc-dot-orange { background: var(--sc-orange); box-shadow: 0 0 6px var(--sc-orange); }
.sc-dot-red { background: var(--sc-red); box-shadow: 0 0 6px var(--sc-red); }

.sc-status-green { color: var(--sc-green); }
.sc-status-orange { color: var(--sc-orange); }
.sc-status-red { color: var(--sc-red); }

.sc-badge.sc-badge-green { color: var(--sc-green); border-color: var(--sc-green); }
.sc-badge.sc-badge-orange { color: var(--sc-orange); border-color: var(--sc-orange); }
.sc-badge.sc-badge-red { color: var(--sc-red); border-color: var(--sc-red); }

.sc-pick {
    position: relative;
}

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

.sc-pick-btn {
    min-height: 42px;
    padding: 0.4rem 0.8rem;
    background: var(--background-dark);
    color: #fff;
    border: 0.125rem solid var(--border-colour);
    border-radius: var(--radius1);
    font: 0.95rem var(--font-body);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.sc-pick-btn:hover,
.sc-pick-btn[aria-expanded="true"] {
    border-color: var(--highlight-colour);
    box-shadow: 0 0 8px var(--glow-colour);
}

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

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

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

.sc-pick-list {
    position: absolute;
    z-index: 60;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
    padding: 0.3rem;
    list-style: none;
    background: var(--gradient-main);
    background-color: var(--background-dark);
    border: 0.125rem solid var(--highlight-colour);
    border-radius: var(--radius1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 10px var(--glow-colour);
}

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

.supply-chain-page .sc-pick-list li {
    padding: 0.5rem 0.6rem;
    margin: 0;
    border-radius: calc(var(--radius1) - 2px);
    font-size: 0.92rem;
    cursor: pointer;
}

.sc-pick-list li:hover,
.sc-pick-list li.active {
    background: var(--main-colour1);
    box-shadow: inset 3px 0 0 var(--highlight-colour);
}

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

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

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

.sc-claim-line {
    padding: 0.8rem 0;
    border-top: 1px solid var(--border-colour);
}

.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.8rem;
}

/* ---------------- Requests: reject reason / hold for ore (2026-09-20) --- */
.supply-chain-page textarea {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: var(--background-dark);
    color: #fff;
    border: 0.125rem solid var(--border-colour);
    border-radius: var(--radius1);
    font: 0.92rem var(--font-body);
    color-scheme: dark;
    resize: vertical;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.supply-chain-page textarea:focus {
    outline: none;
    border-color: var(--highlight-colour);
    box-shadow: 0 0 8px var(--glow-colour);
}

.sc-hold-banner {
    margin: 0 0 0.9rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--sc-orange, #ffa53d);
    border-radius: var(--radius1);
    color: var(--sc-orange, #ffa53d);
    font-size: 0.9rem;
}

.sc-hold-banner a {
    color: inherit;
}

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

.supply-chain-page .sc-ore-orders h4 {
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
    color: var(--highlight-colour);
}

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

.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.9rem;
}

.supply-chain-page .sc-notify-card p.sc-notice-reason {
    margin-top: -0.3rem;
    padding: 0.5rem 0.7rem;
    border-left: 3px solid var(--highlight-colour);
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.9rem;
}


/* ---------------- 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: 2rem;
}

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

.sc-loc-link {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-bottom: 1px dashed var(--border-colour);
}

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

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

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

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

.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 ---------------- */
/* A standard button since 22 Sep 2026 (was a small outlined one with an
   icon) so it matches every other button on the page. */
.supply-chain-page .sc-sidebar-footer .sc-dash-btn {
    text-decoration: none;
}

/* Filter pills that share a row with a search box or button take the same
   height as them (40px) so the row lines up. Pill rows on their own keep the
   compact 34px. */
.sc-toolbar .sc-filter-pill {
    height: var(--control-h);
}

.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
   (no scroll container, so the location suggestions can spill out). */
.supply-chain-page .sc-modal-card.sc-modal-reloc {
    width: min(620px, 100%);
}

/* ---------------- 2026-09-22: Upload log files popup on phones ----------------
   Grid items default to min-width:auto, so the long log paths and the two
   dropzone buttons pushed the cards wider than the popup. */
.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: 1.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 so it looks the same as every other popup; only the
   amount row and the slider are new. Zero is never shown anywhere, so
   there is deliberately no "no payment" styling to go with it. */

/* The offer popup is the one popup that opens ON TOP of another popup -
   from inside "Claim missing materials", from Hold: Request Ore, and from
   the Blueprints panel. It used to share .sc-notify-overlay's 1200 with
   them, and an equal z-index is settled by document order: both overlays
   are built once on first use and then kept, so whichever the member
   happened to open FIRST in that page load sat on top for the rest of it.
   That is why it appeared behind the very menu that opened it. It now has
   a layer of its own - see the layering scale in root.css. */
.os-offer-overlay {
    z-index: 1250;
}

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

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

.supply-chain-page input.os-offer-amount {
    height: 46px;
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: 0.02em;
}

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

.os-offer-slider-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.4rem;
}

.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(--highlight-colour);
    color-scheme: dark;
    cursor: pointer;
}

.os-offer-step {
    flex: 0 0 4.2rem;
    text-align: right;
    font-family: var(--font-display);
    font-size: 0.88rem;
    color: var(--sc-muted);
}

/* "No payment" sits away from the confirm button so it is never the one
   pressed by accident. */
.sc-form-actions.os-offer-actions {
    justify-content: space-between;
    margin-top: 0.9rem;
}

@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 at all when nothing was offered, or when somebody chose to pay
   nothing - see js/supply_chain.js offerLine()/crafterOfferLine(). */
/* Block, not flex: a flex container turns each run of text into its own
   item, so the gap lands between the amount and the full stop after it. */
.supply-chain-page p.sc-offer-line {
    margin: 0 0 0.7rem;
    padding: 0.5rem 0.75rem;
    background: var(--background-dark);
    border-left: 0.2rem solid var(--highlight-colour);
    border-radius: var(--radius1);
    font-size: 0.9rem;
}

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

/* The Blueprints panel now carries the same materials table the Requests
   page uses, in a much narrower column. It has to SCROLL sideways rather
   than spill out of the card, which needs the width pinned: a flex/grid
   child will happily grow past its parent otherwise. */
.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.86rem;
}

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

/* ---------------- 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;
}

.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(--sc-line);
}

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

.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: 7px solid var(--highlight-colour);
    transition: transform 0.15s ease;
}

.sc-dist-group.is-expanded .sc-dist-caret {
    transform: rotate(90deg);
}

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

.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.75rem 0.4rem calc(0.75rem + 7px + 0.6rem);
    background: rgba(0, 0, 0, 0.22);
}

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.5rem 0;
    border-top: 1px dashed var(--sc-line);
}

.sc-dist-lot.is-picked {
    box-shadow: inset 3px 0 0 var(--highlight-colour);
    padding-left: 0.5rem;
}

.sc-dist-lot .sc-num {
    text-align: right;
    font-family: var(--sc-mono);
    font-variant-numeric: tabular-nums;
}

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

.sc-dist-lotcard {
    margin-top: 0.7rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--sc-line);
    border-radius: var(--radius1);
    background: rgba(0, 0, 0, 0.2);
}

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

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

.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: 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): can the blueprint be
   obtained in the current patch (default, or a contract unlocks it)? */
.sc-ingame {
    text-align: center;
    font-size: 1.05rem;
}

.sc-ingame-yes {
    color: #5ee0a8;
    font-weight: bold;
}

.sc-ingame-no {
    color: #ff6b6b;
    font-weight: bold;
}

/* Warehouse grouped by item (28 Sep) - the Distribution board's look, with
   each lot's editing controls laid out on one line inside its item. */
.sc-wh-filters {
    grid-template-columns: minmax(12rem, 2fr) minmax(10rem, 1fr) auto auto;
}

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

.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.5rem 0;
    border-top: 1px dashed var(--sc-line);
}

.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: 1fr;
    }

    /* A phone: the item line keeps Material / Best / Total (each lot still
       shows its own location and state), and a lot's amount editor gets a
       row of its own so the + button is never cut off. */
    .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(--highlight-colour);
    text-align: center;
}

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

.sc-pick-list li.sc-pick-open {
    border-bottom: 1px dashed var(--sc-line);
}

.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-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 card 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.6rem 0.75rem;
        border-bottom: 1px solid var(--sc-line);
    }

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

    .sc-open-table td[data-label]::before {
        content: attr(data-label) ": ";
        color: var(--highlight-colour);
        font-size: 0.8rem;
    }

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