/* HYSEC Universe industry pages: blueprints, crafter, collection, mining, refinery and salvage.
   Builds on the tokens and parts of hysec-universe-ui.css (loaded before this file); everything
   here is scoped to the "hsi-" prefix or to these pages, so other Universe modules are unaffected. */

/* ---------- Shared bits of the industry pages ---------- */

.hss-shell :is(.hsi-catalog, .hsi-detail, .hsi-crafter, .hsi-vault, .hsi-mining, .hsi-refinery, .hsi-salvage) .hsu-chip.active,
.hss-shell .hsi-category-chips .hsu-chip.active {
    border-color: var(--hsu-accent-line);
    color: var(--hsu-accent-strong);
    background: var(--hsu-accent-soft);
}
.hss-shell :is(.hsi-catalog, .hsi-detail, .hsi-vault, .hsi-mining, .hsi-refinery, .hsi-salvage, .hsi-crafter) .hsu-chip:focus-visible,
.hss-shell :is(.hsi-preset, .hsi-recent button):focus-visible {
    outline: 2px solid var(--hsu-accent);
    outline-offset: 2px;
}
.hsi-lead { max-width: 76ch; margin: 0 0 var(--hsu-space-4); color: var(--hsu-text-muted); font-size: var(--hsu-text-sm); line-height: 1.55; }
.hsi-lead b { color: var(--hsu-text-strong); font-weight: 600; }
.hsi-note { margin: var(--hsu-space-2) 0 0; font-size: var(--hsu-text-sm); }
.hsi-more { margin-top: var(--hsu-space-2); }

/* Quality and change values share one tone language: better, worse, neutral. */
.hsi-quality {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border: 1px solid var(--hsu-line-strong);
    border-radius: 999px;
    color: var(--hsu-text-strong);
    font-size: var(--hsu-text-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.hsi-quality.positive { border-color: rgba(97, 192, 142, 0.36); color: #7fe0ac; }
.hsi-quality.negative { border-color: rgba(237, 120, 106, 0.36); color: #ff9b8f; }
.hsi-delta { font-variant-numeric: tabular-nums; font-weight: 600; }
.hsi-delta.positive { color: #7fe0ac; }
.hsi-delta.negative { color: #ff8792; }
.hsi-delta.neutral { color: var(--hsu-text-faint); }

/* ---------- Blueprint catalog ---------- */

.hsi-category-chips { margin: calc(var(--hsu-space-2) * -1) 0 var(--hsu-space-4); }
.hsi-blueprint-list { transition: opacity 160ms ease; }
.hsi-blueprint-list.is-loading { opacity: 0.55; }
.hsi-blueprint-list .hsu-row-facts { flex-wrap: nowrap; gap: var(--hsu-space-5); }
.hsi-blueprint-list .hsu-row-facts > .hsi-fact-materials { width: 220px; }
.hsi-blueprint-list .hsu-row-facts > .hsi-fact-materials dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hsu-text); }
.hsi-blueprint-list .hsu-row-facts > .hsi-fact-need { width: 82px; text-align: right; }
.hsi-blueprint-list .hsu-row-facts > .hsi-fact-owner { width: 112px; }
.hsi-blueprint-list .hsu-row-facts > .hsi-fact-owner.is-empty { visibility: hidden; }
.hsi-blueprint-list .hsu-row-facts .hsu-badge { text-transform: none; letter-spacing: 0.02em; }
.hsi-blueprint-list .hsu-row.hsi-last-opened { box-shadow: inset 2px 0 var(--hsu-accent); background: rgba(228, 167, 56, 0.04); }

/* ---------- Blueprint detail ---------- */

.hsi-ownership {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hsu-space-2) var(--hsu-space-3);
    margin-top: var(--hsu-space-3);
    font-size: var(--hsu-text-sm);
}
.hsi-ownership > .mud-icon-root.ok { color: var(--hsu-ok); }
.hsi-ownership > .mud-icon-root.accent { color: var(--hsu-accent); }
.hsi-ownership > .mud-icon-root.muted { color: var(--hsu-text-faint); }
.hsi-ownership-text { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.hsi-ownership-text strong { color: var(--hsu-text-strong); font-weight: 600; }
.hsi-ownership .hsu-owner { font-size: var(--hsu-text-xs); }
.hsi-ownership-actions { display: inline-flex; flex-wrap: wrap; gap: var(--hsu-space-2); margin-left: auto; }

/* ---------- Crafter ---------- */

.hsi-crafter-bar {
    position: sticky;
    top: calc(var(--hsu-page-pad-y) * -1);
    z-index: 6;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--hsu-space-2) var(--hsu-space-4);
    margin: 0 0 var(--hsu-space-5);
    border-bottom: 1px solid var(--hsu-line);
    background: var(--hsu-bg);
}
.hsi-crafter-bar .hsu-tabs { position: static; margin: 0; border-bottom: 0; background: transparent; }
/* The open plan: name, state and its three actions; the name gives way first, the actions never overlap. */
.hsi-plan-bar { display: flex; flex: 1 1 360px; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: var(--hsu-space-2) var(--hsu-space-3); min-width: 0; padding: 6px 0; }
.hsi-plan-bar-name { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--hsu-text-strong); font-size: var(--hsu-text-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.hsi-plan-bar-state { flex: 0 0 auto; }
.hsi-plan-bar-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; gap: var(--hsu-space-2); }

/* Fixed column boundaries: every grid track may shrink below its content, long values end in an ellipsis. */
.hsi-plan-layout {
    display: grid;
    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    gap: var(--hsu-space-6);
    align-items: start;
}
.hsi-plan-side { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--hsu-space-5); min-width: 0; }
.hsi-side-group { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--hsu-space-2); min-width: 0; }
.hsi-side-group > * { min-width: 0; max-width: 100%; }
.hsi-side-title { margin: 0; color: var(--hsu-text-strong); font-size: var(--hsu-text-md); font-weight: 650; }
.hsi-plan-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: var(--hsu-space-2); }
.hss-shell .hsi-plan-side .mud-input-control { min-width: 0; margin: 0; }
.hss-shell .hsi-plan-side .mud-input-slot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hss-shell .hsi-plan-side textarea.mud-input-slot { white-space: pre-wrap; }
.hss-shell .hsi-plan-side > .hsi-side-group > .mud-button-root { justify-self: start; }
.hsi-subtitle { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--hsu-space-3); margin: var(--hsu-space-5) 0 var(--hsu-space-2); color: var(--hsu-text-strong); font-size: var(--hsu-text-md); font-weight: 650; }
.hsi-subtitle small { color: var(--hsu-text-faint); font-size: var(--hsu-text-sm); font-weight: 400; }

/* Saved plans: name, blueprint and tags end in an ellipsis with the full text as tooltip. */
.hsi-plan-table { table-layout: fixed; width: 100%; }
.hsi-plan-table .hsi-plan-col-quality { width: 88px; }
.hsi-plan-table .hsi-plan-col-visibility { width: 128px; }
.hsi-plan-table .hsi-plan-col-date { width: 100px; }
.hsi-plan-table .hsi-plan-col-actions { width: 212px; }
.hsi-plan-table.with-blueprint .hsi-plan-col-name { width: 34%; }
.hsi-plan-table.with-blueprint .hsi-plan-col-blueprint { width: 22%; }
.hsi-plan-table :is(th, td) { min-width: 0; overflow: hidden; vertical-align: top; }
.hsi-plan-name,
.hsi-plan-cut { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hsi-plan-name { color: var(--hsu-text-strong); font-weight: 600; }
.hsi-plan-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 2px; }
.hsi-plan-marks:empty { display: none; }
.hsi-plan-marks small { color: var(--hsu-text-faint); font-size: var(--hsu-text-xs); }
.hsi-plan-table tbody tr.hsi-plan-current { box-shadow: inset 2px 0 var(--hsu-accent); }
.hsi-plan-tags { margin-top: 2px; color: var(--hsu-text-muted); font-size: var(--hsu-text-xs); }
.hsi-plan-table td.hsi-plan-actions { vertical-align: middle; }
.hsi-plan-actions > span { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 4px; }
.hss-shell .hsi-plan-actions .mud-button-root { min-width: 0; }
.hsi-plan-summary {
    display: grid;
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--hsu-line);
}
.hsi-plan-summary > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--hsu-space-3); padding: 9px 0; border-bottom: 1px solid var(--hsu-line); }
.hsi-plan-summary dt { color: var(--hsu-text-faint); font-size: var(--hsu-text-sm); }
.hsi-plan-summary dd { margin: 0; color: var(--hsu-text-strong); font-size: var(--hsu-text-sm); font-weight: 600; text-align: right; }
.hss-shell .hsi-preview-progress { height: 2px; }
.hsi-technical > summary {
    padding: 6px 0;
    color: var(--hsu-text-muted);
    font-size: var(--hsu-text-sm);
    font-weight: 600;
    cursor: pointer;
}
.hsi-technical > summary:hover { color: var(--hsu-accent-strong); }
.hsi-plan-main { min-width: 0; }

.hsi-needs-mode { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hsu-space-2) var(--hsu-space-4); margin: 0 0 var(--hsu-space-2); }
.hss-shell .hsi-needs-mode .mud-switch { margin: 0; }
.hss-shell .hsi-needs-mode .mud-checkbox { margin: 0; }
.hsi-needs-table tbody tr.hsi-missing { box-shadow: inset 2px 0 var(--hsu-danger); }
.hsi-needs-table td small { display: inline; margin: 0 0 0 6px; }
.hsi-source { min-width: 240px; }
.hsi-source-facts { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; color: var(--hsu-text); }
.hsi-source-facts small { margin: 0 !important; }
.hsi-source-links { display: flex; flex-wrap: wrap; gap: 6px; }

.hsi-quality-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--hsu-space-3); }
.hsi-quality-presets > span { margin-right: 6px; color: var(--hsu-text-faint); font-size: var(--hsu-text-sm); }
.hsi-preset {
    min-width: 56px;
    padding: 5px 10px;
    border: 1px solid var(--hsu-line-strong);
    border-radius: var(--hsu-radius-sm);
    color: var(--hsu-text-muted);
    background: transparent;
    font: inherit;
    font-size: var(--hsu-text-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}
.hsi-preset:hover:not(:disabled) { border-color: var(--hsu-accent-line); color: var(--hsu-text-strong); }
.hsi-preset.active { border-color: var(--hsu-accent); color: var(--hsu-accent-strong); background: var(--hsu-accent-soft); }
.hsi-preset:disabled { opacity: 0.35; cursor: not-allowed; }
.hsi-values-table tbody tr.hsi-stale :is(td, th) { opacity: 0.6; transition: opacity 160ms ease; }

.hsi-slot-list { border-top: 1px solid var(--hsu-line); }
.hsi-slot {
    display: grid;
    grid-template-columns: minmax(180px, 1.2fr) minmax(170px, 210px) minmax(0, 2fr);
    align-items: center;
    gap: var(--hsu-space-2) var(--hsu-space-4);
    padding: 10px 4px;
    border-bottom: 1px solid var(--hsu-line);
}
.hsi-slot-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--hsu-text-sm); }
.hsi-slot-name small { color: var(--hsu-text-faint); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.hsi-slot-name strong { color: var(--hsu-text-strong); font-weight: 600; }
.hss-shell .hsi-slot .mud-input-control { margin: 0; }
.hsi-slot-effects { display: flex; flex-wrap: wrap; gap: 4px var(--hsu-space-4); font-size: var(--hsu-text-sm); }
.hsi-slot-effects > span { display: inline-flex; align-items: baseline; gap: 6px; }
.hsi-slot-effects small { color: var(--hsu-text-muted); }
/* Own stock of a slot's material: one button per tier with its free amount; the chosen tier's coverage last. */
.hsi-slot-stock { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--hsu-text-sm); }
.hsi-slot-stock-label { margin-right: 4px; color: var(--hsu-text-faint); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.hsi-preset.hsi-stock-lot { min-width: 0; font-weight: 600; }
.hsi-preset.hsi-stock-lot small { margin-left: 4px; color: var(--hsu-warn); font-weight: 500; }
.hsi-preset.hsi-stock-lot.is-empty:not(.active) { opacity: 0.6; }
.hsi-slot-cover { margin-left: auto; font-size: var(--hsu-text-xs); font-variant-numeric: tabular-nums; }
.hsi-slot-cover.hsu-neg { font-weight: 700; }
.hsi-preset.hsi-preset-stock { display: inline-flex; align-items: center; gap: 4px; margin-left: var(--hsu-space-2); }

.hsi-technical { margin: 0 0 var(--hsu-space-6); }
.hsi-warnings { display: grid; gap: 6px; margin: 8px 0 12px; padding: 0; list-style: none; color: var(--hsu-text-muted); font-size: var(--hsu-text-sm); }
.hsi-warnings li { display: flex; gap: 8px; align-items: flex-start; }

.hsi-finish.limited > header h2 { color: var(--hsu-text); }
.hsi-ledger-scope { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--hsu-space-3); margin: 0 0 var(--hsu-space-3); }
.hsi-ledger-actions { display: flex; justify-content: flex-end; gap: 6px; }
.hss-shell .hsi-ledger-table .mud-input-control { min-width: 120px; }

/* ---------- Collection ---------- */

.hsi-inline-chips { display: inline-flex; margin: 0; }
.hsi-inline-chips .hsu-chip .mud-icon-root { font-size: 1rem; }
.hsi-vault .hsu-owner.is-me { border-color: rgba(97, 192, 142, 0.4); color: #9be7bd; }
.hsi-vault .hsu-table.is-loading tbody { opacity: 0.55; transition: opacity 160ms ease; }
.hsi-mission-source { color: var(--hsu-info); font-size: var(--hsu-text-sm); }
.hsi-missions-basis { font-size: var(--hsu-text-sm); }
.hsi-missions :is(.hsi-missions-requirement, .hsi-missions-names) { display: block; margin-top: 2px; }
.hsi-missions .hsu-badge { margin-top: 4px; }
.hsi-missions-rewards { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; }
.hsi-missions-rewards li { display: inline-flex; align-items: baseline; gap: 6px; }
.hsi-vault-editor { display: grid; gap: var(--hsu-space-2); }
.hsi-vault-editor .hsu-bar-actions { align-items: center; }
/* "Herstellbar": one material per line in a cell. */
.hsi-craftable :is(.hsi-craftable-slot, td small) { display: block; }
.hsi-craftable .hsi-craftable-slot + .hsi-craftable-slot { margin-top: 2px; }
.hsi-keys { margin-left: auto; font-size: var(--hsu-text-xs); }

/* ---------- Mining: ore scan ---------- */

.hss-shell .hsi-scan-field input { font-size: 1.125rem; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.hsi-scan-answer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: var(--hsu-space-2) var(--hsu-space-5);
    margin: 0 0 var(--hsu-space-5);
    padding: var(--hsu-space-4) 0 var(--hsu-space-4) var(--hsu-space-4);
    border-left: 3px solid var(--hsu-accent);
    background: linear-gradient(90deg, rgba(228, 167, 56, 0.07), transparent 70%);
    animation: hsi-arrive 180ms ease-out;
}
.hsi-scan-answer > .hsu-overline { grid-column: 1 / -1; }
.hsi-scan-answer h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; color: var(--hsu-text-strong); font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 700; }
.hsi-scan-answer h2 small { font-size: var(--hsu-text-md); font-weight: 600; }
.hsi-scan-answer dl { grid-column: 1; display: flex; flex-wrap: wrap; gap: var(--hsu-space-2) var(--hsu-space-6); margin: var(--hsu-space-2) 0 0; }
.hsi-scan-answer dl > div { display: flex; flex-direction: column; gap: 2px; }
.hsi-scan-answer dt { color: var(--hsu-text-faint); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.hsi-scan-answer dd { margin: 0; color: var(--hsu-text-strong); font-size: var(--hsu-text-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.hsi-scan-answer dd small { display: block; color: var(--hsu-text-faint); font-size: var(--hsu-text-xs); font-weight: 400; }
.hsi-scan-actions { grid-column: 2; grid-row: 2 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; padding-right: var(--hsu-space-2); }
.hsi-scan-answer h2 .hsi-source-badge { align-self: center; }
/* A deposit's kind beside its name, like the ship ores' rarity; the possible names of a shared reading below it. */
.hsi-ore-table th .hsi-source-badge { margin-left: var(--hsu-space-2); vertical-align: middle; }
.hsi-ore-table th .hsi-scan-members { display: block; max-width: 46ch; white-space: normal; }
/* Narrowing a scan to a place: the field beside the filters, the place's name in the answer. */
/* MudAutocomplete puts Class on its inner control; the outer .mud-autocomplete is the flex item. */
.hss-shell .hsu-filter-fields > .mud-autocomplete:has(.hsi-scan-place) { flex: 1 1 240px; min-width: 220px; max-width: 320px; }
.hsi-scan-place-option { display: flex; flex-direction: column; line-height: 1.25; }
.hsi-scan-place-option small { color: var(--hsu-text-faint); font-size: var(--hsu-text-xs); }
.hsi-scan-place-note { margin: calc(-1 * var(--hsu-space-2)) 0 var(--hsu-space-3); color: var(--hsu-text-faint); font-size: var(--hsu-text-xs); }

/* ---------- Mining: where to find an ore ---------- */

.hsi-where-list .hsi-where-name { margin-left: -8px; font-size: var(--hsu-text-md); }
.hsi-where-list td .hsi-source-badge + .hsi-source-badge { margin-left: 6px; }
.hsi-where-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hsu-space-2) var(--hsu-space-3); margin: 0 0 var(--hsu-space-1); }
.hsi-where-head h2 { margin: 0; color: var(--hsu-text-strong); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.7rem); font-weight: 700; }
.hsi-where-head > .mud-button-outlined { margin-left: auto; }
.hsi-where-note { margin: 0 0 var(--hsu-space-4); color: var(--hsu-text-faint); font-size: var(--hsu-text-xs); }
.hsi-where-section { margin: 0 0 var(--hsu-space-5); }
.hsi-where-section h3 { display: flex; align-items: baseline; gap: var(--hsu-space-2); margin: 0 0 var(--hsu-space-2); color: var(--hsu-text-strong); font-size: var(--hsu-text-lg); font-weight: 650; }
.hsi-where-section h3 small { color: var(--hsu-text-faint); font-size: var(--hsu-text-xs); font-weight: 500; }
.hsi-where-table th small, .hsi-where-table td small { display: block; color: var(--hsu-text-faint); font-size: var(--hsu-text-xs); font-weight: 400; }
.hsi-where-table .hsi-where-hint { max-width: 34ch; color: var(--hsu-text-muted); font-size: var(--hsu-text-sm); white-space: normal; }
.hsi-where-hosts { display: flex; flex-wrap: wrap; gap: var(--hsu-space-1) var(--hsu-space-4); margin: 0; padding: 0; list-style: none; }
.hsi-where-hosts li { display: flex; align-items: baseline; gap: 2px; }
.hsi-where-hosts li > span { color: var(--hsu-text-muted); font-size: var(--hsu-text-sm); font-variant-numeric: tabular-nums; }

@keyframes hsi-arrive { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Mining: refinery and orders ---------- */

.hsi-facts-inline { color: var(--hsu-text-muted); }
.hsi-facts-inline strong { color: var(--hsu-text-strong); }
.hss-shell .hsi-refinery-table th small { display: block; }

.hsi-order-bar {
    position: sticky;
    top: calc(var(--hsu-page-pad-y) * -1 + 45px);
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hsu-space-2) var(--hsu-space-5);
    margin: 0 0 var(--hsu-space-4);
    padding: 8px 0;
    border-bottom: 1px solid var(--hsu-line);
    background: var(--hsu-bg);
}
.hsi-order-totals { display: flex; flex-wrap: wrap; gap: var(--hsu-space-1) var(--hsu-space-5); margin: 0 0 0 auto; }
.hsi-order-totals > div { display: flex; flex-direction: column; align-items: flex-end; }
.hsi-order-totals dt { color: var(--hsu-text-faint); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.hsi-order-totals dd { margin: 0; color: var(--hsu-text-strong); font-size: var(--hsu-text-md); font-weight: 650; font-variant-numeric: tabular-nums; }
.hsi-order-totals dd.accent { color: var(--hsu-accent); }
.hsi-orders-table .hsu-badge { text-transform: none; letter-spacing: 0.02em; }

/* Order form in steps (SearchSuiteWorkOrders): title, the steps, one step's content, its actions on the right. */
/* scroll-margin: a step's head comes into view below the sticky order bar. */
.hsi-editor-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--hsu-space-1) var(--hsu-space-3); margin: 0 0 var(--hsu-space-2); scroll-margin-top: 116px; }
.hsi-editor-head h2 { margin: 0; color: var(--hsu-text-strong); font-size: var(--hsu-text-lg); font-weight: 650; }
.hsi-editor-head small { color: var(--hsu-text-muted); font-size: var(--hsu-text-sm); }
.hsi-steps { margin: 0 0 var(--hsu-space-4); }
.hsi-steps ol { display: flex; flex-wrap: wrap; gap: var(--hsu-space-1) var(--hsu-space-2); margin: 0; padding: 0; list-style: none; counter-reset: none; }
.hsi-steps li { display: flex; align-items: center; gap: var(--hsu-space-2); }
.hsi-steps li + li::before { content: ""; width: 28px; height: 1px; background: var(--hsu-line-strong); }
.hsi-steps button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 4px 10px 4px 4px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    color: var(--hsu-text-muted);
    font: inherit;
    font-size: var(--hsu-text-sm);
    font-weight: 600;
    cursor: pointer;
}
.hsi-steps button:hover:not(:disabled) { color: var(--hsu-text-strong); background: var(--hsu-surface-hover); }
.hsi-steps button:disabled { color: var(--hsu-text-faint); cursor: default; }
.hsi-steps button:focus-visible { outline: 2px solid var(--hsu-accent-strong); outline-offset: 2px; }
.hsi-step-number {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--hsu-line-strong);
    border-radius: 50%;
    font-size: var(--hsu-text-xs);
    font-variant-numeric: tabular-nums;
}
.hsi-steps .is-current button { color: var(--hsu-accent-strong); }
.hsi-steps .is-current .hsi-step-number { border-color: var(--hsu-accent-line); background: var(--hsu-accent-soft); color: var(--hsu-accent-strong); }
.hsi-steps .is-done .hsi-step-number { border-color: transparent; background: var(--hsu-accent-soft); color: var(--hsu-accent); }
.hsi-step-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--hsu-space-2);
    margin: var(--hsu-space-4) 0 var(--hsu-space-5);
    padding-top: var(--hsu-space-3);
    border-top: 1px solid var(--hsu-line);
}
.hsi-step-note { margin-right: auto; color: var(--hsu-text-muted); font-size: var(--hsu-text-sm); }
.hsi-extras { margin: 0 0 var(--hsu-space-4); }
.hsi-extras > summary { display: flex; align-items: baseline; gap: var(--hsu-space-2); padding: 6px 0; color: var(--hsu-text-strong); font-weight: 600; cursor: pointer; }
.hsi-extras > summary small { color: var(--hsu-text-muted); font-size: var(--hsu-text-sm); font-weight: 400; }
.hsi-extras > summary:focus-visible { outline: 2px solid var(--hsu-accent-strong); outline-offset: 2px; }
.hsi-extras > .hsu-section { margin-top: var(--hsu-space-2); }

.hsi-my-result {
    display: grid;
    gap: 4px;
    margin: 0 0 var(--hsu-space-5);
    padding: var(--hsu-space-3) var(--hsu-space-4);
    border-left: 3px solid var(--hsu-accent);
    background: linear-gradient(90deg, rgba(228, 167, 56, 0.08), transparent 75%);
}
.hsi-my-result strong { color: var(--hsu-text-strong); font-size: var(--hsu-text-lg); font-weight: 650; font-variant-numeric: tabular-nums; }
.hsi-my-result > span:last-child { color: var(--hsu-text-muted); font-size: var(--hsu-text-sm); }
.hsi-settlement-fields { margin-top: var(--hsu-space-3); }

/* Order view (RefineryOrderDetail): facts in one open block, the step the status needs right below. */
.hsi-order-head > header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hsu-space-2) var(--hsu-space-3); }
.hsi-order-head > header h2 { margin: 0; }
.hsi-order-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: var(--hsu-space-3) var(--hsu-space-5); margin: var(--hsu-space-3) 0 0; }
.hsi-order-facts > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hsi-order-facts dt { color: var(--hsu-text-faint); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.hsi-order-facts dd { margin: 0; color: var(--hsu-text-strong); font-size: var(--hsu-text-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.hsi-order-facts dd small { display: block; color: var(--hsu-text-muted); font-size: var(--hsu-text-xs); font-weight: 400; }
.hsi-phase { padding-left: var(--hsu-space-4); border-left: 3px solid var(--hsu-accent); }
.hsi-phase-lead { margin: 0 0 var(--hsu-space-2); color: var(--hsu-text-strong); font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); font-weight: 700; }
.hsi-settle { display: grid; gap: var(--hsu-space-3); margin-top: var(--hsu-space-3); }
.hsi-settle > p { margin: 0; }
.hsi-settle-fields { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--hsu-space-3); }
.hss-shell .hsi-settle-fields .mud-input-control { flex: 0 1 320px; min-width: 220px; }
.hsi-settle .hsi-step-actions { margin: var(--hsu-space-1) 0 0; }
/* Storing with a place per material: the materials that go elsewhere are marked. */
.hss-shell .hsi-store-table .mud-input-control { min-width: 200px; }
.hsi-store-table tbody th small { display: block; margin-top: 2px; color: var(--hsu-accent); font-size: var(--hsu-text-xs); font-weight: 400; }
.hsi-store-table tbody tr.is-own > :is(td, th):first-child { box-shadow: inset 3px 0 0 var(--hsu-accent-line); }
/* Selling: plan the route in the Freight Planner, then record the revenue. */
.hsi-sell-plan, .hsi-sell-record { display: grid; gap: 4px; }
.hsi-sell-plan { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--hsu-space-2) var(--hsu-space-4); padding: var(--hsu-space-3) 0; border-bottom: 1px solid var(--hsu-line); }
.hsi-sell-plan > div { display: grid; flex: 1 1 40ch; gap: 4px; }
.hsi-sell-plan strong, .hsi-sell-record > strong { color: var(--hsu-text-strong); font-weight: 650; }
.hsi-sell-plan span, .hsi-sell-record > span { color: var(--hsu-text-muted); font-size: var(--hsu-text-sm); }
.hsi-sell-suggestion { margin: var(--hsu-space-1) 0 0; padding-left: var(--hsu-space-2); border-left: 3px solid var(--hsu-accent-line); color: var(--hsu-text); font-size: var(--hsu-text-sm); }.hsi-plain-list { display: grid; gap: 4px; max-width: 520px; margin: 0; padding: 0; list-style: none; }
.hsi-plain-list li { display: flex; justify-content: space-between; gap: var(--hsu-space-3); font-size: var(--hsu-text-sm); }
.hsi-note { margin: 0; white-space: pre-line; }
.hsi-allocations thead th small { display: block; margin-top: 2px; color: var(--hsu-text-faint); font-size: var(--hsu-text-xs); font-weight: 400; letter-spacing: 0; text-transform: none; }
.hsi-allocations tfoot :is(th, td) { padding: 10px 12px; border-top: 1px solid var(--hsu-line-strong); font-size: var(--hsu-text-sm); }
.hss-shell .hsi-allocations .mud-input-control { min-width: 90px; }

/* Form rows align on the input box: hints sit below their field and never move the neighbours. */
.hss-shell :is(.hsi-orders, .hsi-crafter, .hsi-vault, .hsi-salvage) .hsu-edit-table tbody :is(td, th) { vertical-align: top; }
.hss-shell :is(.hsi-orders, .hsi-crafter) .hsu-edit-table tbody :is(td, th):not(:has(.mud-input-control)) { padding-top: 16px; }
.hss-shell :is(.hsi-orders, .hsi-crafter, .hsi-vault, .hsi-salvage) :is(.hsu-form-grid, .hsu-entry, .hsu-expense) { align-items: start; }
.hss-shell .hsi-datetime input { color-scheme: dark; }
.hsi-market { min-width: 180px; }
.hsi-market strong { display: block; }
.hsi-price-source { margin-top: 2px; font-size: var(--hsu-text-xs); text-align: right; }
.hsi-price-source > summary { color: var(--hsu-text-faint); cursor: pointer; list-style-position: inside; }
.hsi-price-source > summary:hover { color: var(--hsu-accent-strong); }
.hsi-price-source > span { display: block; color: var(--hsu-text-muted); white-space: normal; }

/* ---------- Salvage ---------- */

.hsi-best-buyer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--hsu-space-3);
    padding: 10px 12px;
    border-bottom: 1px solid var(--hsu-line);
    box-shadow: inset 2px 0 var(--hsu-accent);
    background: rgba(228, 167, 56, 0.05);
}
.hsi-best-buyer > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hsi-best-buyer strong { color: var(--hsu-text-strong); font-size: var(--hsu-text-sm); font-weight: 600; }
.hsi-best-buyer small { color: var(--hsu-text-faint); font-size: var(--hsu-text-xs); }
.hsi-best-buyer .hsi-price { color: var(--hsu-accent-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hsi-salvage-sale-only { max-width: 640px; }
.hsi-more-buyers > summary { padding: 8px 12px; color: var(--hsu-text-muted); font-size: var(--hsu-text-sm); font-weight: 600; cursor: pointer; }
.hsi-more-buyers > summary:hover { color: var(--hsu-accent-strong); }

/* ---------- Narrow windows ---------- */

@container hss-suite (max-width: 1100px) {
    .hsi-blueprint-list .hsu-row-facts > .hsi-fact-materials { width: 160px; }
    .hsi-plan-layout { grid-template-columns: minmax(0, 1fr); gap: var(--hsu-space-4); }
    .hsi-plan-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--hsu-space-3) var(--hsu-space-5); }
    .hsi-plan-bar { flex-wrap: wrap; justify-content: flex-start; }
    .hsi-slot { grid-template-columns: minmax(0, 1fr) minmax(150px, 200px); }
    .hsi-slot-effects { grid-column: 1 / -1; }
}

/* The plan table stacks before its columns get too narrow: with the blueprint column at a wider window. */
@container hss-suite (max-width: 1180px) {
    .hss-shell .hsi-plan-table.with-blueprint { table-layout: auto; }
    .hss-shell .hsi-plan-table.with-blueprint thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .hss-shell .hsi-plan-table.with-blueprint,
    .hss-shell .hsi-plan-table.with-blueprint tbody { display: block; width: 100%; }
    .hss-shell .hsi-plan-table.with-blueprint tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 10px 4px; border-bottom: 1px solid var(--hsu-line); }
    .hss-shell .hsi-plan-table.with-blueprint tbody tr > :is(th, td) { padding: 0; border: 0; text-align: left; }
    .hss-shell .hsi-plan-table.with-blueprint tbody tr > :is(:first-child, .hsi-plan-actions) { flex: 1 0 100%; }
    .hss-shell .hsi-plan-table.with-blueprint .hsi-plan-actions > span { justify-content: flex-start; }
    .hss-shell .hsi-plan-table.with-blueprint td > .hsi-plan-cut { display: inline; }
    .hss-shell .hsi-plan-table.with-blueprint td[data-label]::before { content: attr(data-label) " "; color: var(--hsu-text-faint); font-size: var(--hsu-text-xs); font-weight: 400; }
}

@container hss-suite (max-width: 900px) {
    .hss-shell .hsi-plan-table { table-layout: auto; }
    .hss-shell .hsi-plan-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .hss-shell .hsi-plan-table,
    .hss-shell .hsi-plan-table tbody { display: block; width: 100%; }
    .hss-shell .hsi-plan-table tbody tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 10px 4px; border-bottom: 1px solid var(--hsu-line); }
    .hss-shell .hsi-plan-table tbody tr > :is(th, td) { padding: 0; border: 0; text-align: left; }
    .hss-shell .hsi-plan-table tbody tr > :is(:first-child, .hsi-plan-actions) { flex: 1 0 100%; }
    .hss-shell .hsi-plan-table .hsi-plan-actions > span { justify-content: flex-start; }
    .hss-shell .hsi-plan-table td > .hsi-plan-cut { display: inline; }
    .hss-shell .hsi-plan-table td[data-label]::before { content: attr(data-label) " "; color: var(--hsu-text-faint); font-size: var(--hsu-text-xs); font-weight: 400; }
}

@container hss-suite (max-width: 640px) {
    /* Filters stay compact: chips scroll sideways, secondary choices share one line. */
    .hsi-category-chips { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(var(--hsu-page-pad-x) * -1); padding-bottom: 4px; scrollbar-width: none; }
    .hsi-category-chips .hsu-chip { flex: 0 0 auto; }
    .hsi-blueprint-list .hsu-row-facts > .hsi-fact-owner.is-empty { display: none; }
    .hss-shell :is(.hsi-catalog, .hsi-vault) .hsu-filter-fields > .mud-select { flex: 1 1 calc(50% - 6px); min-width: 0; max-width: none; }
    .hsi-catalog .hsu-page-actions { display: none; }
    .hsi-blueprint-list .hsu-row-facts { flex-wrap: wrap; gap: var(--hsu-space-2) var(--hsu-space-4); }
    .hsi-blueprint-list .hsu-row-facts > :is(.hsi-fact-materials, .hsi-fact-need, .hsi-fact-owner) { width: auto; text-align: left; }
    .hsi-ownership-actions { margin-left: 0; }
    .hsi-plan-bar-actions { width: 100%; }
    .hsi-plan-side { grid-template-columns: minmax(0, 1fr); }
    .hsi-slot { grid-template-columns: minmax(0, 1fr); }
    .hsi-source { min-width: 0; }
    .hsi-scan-answer { grid-template-columns: minmax(0, 1fr); }
    .hsi-scan-actions { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
    .hsi-order-totals { width: 100%; margin-left: 0; justify-content: space-between; }
    .hsi-order-totals > div { align-items: flex-start; }
    .hsi-keys { display: none; }

    /* Tables of these pages become stacked rows instead of scrolling sideways. */
    .hss-shell :is(.hsi-needs-table, .hsi-values-table, .hsi-ledger-table, .hsi-stack) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .hss-shell :is(.hsi-needs-table, .hsi-values-table, .hsi-ledger-table, .hsi-stack),
    .hss-shell :is(.hsi-needs-table, .hsi-values-table, .hsi-ledger-table, .hsi-stack) tbody { display: block; width: 100%; }
    .hss-shell :is(.hsi-needs-table, .hsi-values-table, .hsi-ledger-table, .hsi-stack) tbody tr {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 14px;
        padding: 10px 4px;
        border-bottom: 1px solid var(--hsu-line);
    }
    .hss-shell :is(.hsi-needs-table, .hsi-values-table, .hsi-ledger-table, .hsi-stack) tbody tr > :is(th, td) { padding: 0; border: 0; text-align: left; }
    .hss-shell :is(.hsi-needs-table, .hsi-values-table, .hsi-ledger-table, .hsi-stack) tbody tr > :first-child { flex: 1 0 100%; }
    .hss-shell :is(.hsi-needs-table, .hsi-ledger-table, .hsi-stack) tbody tr > td.hsi-source,
    .hss-shell .hsi-ledger-table tbody tr > td { flex: 1 1 100%; }
    .hss-shell .hsi-ledger-actions { justify-content: flex-start; }
    .hss-shell :is(.hsi-needs-table, .hsi-values-table, .hsi-stack) td[data-label]::before {
        content: attr(data-label) " ";
        color: var(--hsu-text-faint);
        font-size: var(--hsu-text-xs);
        font-weight: 400;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hsi-scan-answer { animation: none; }
    .hsi-vault .hsu-table.is-loading tbody,
    .hsi-blueprint-list,
    .hsi-preset,
    .hsi-values-table tbody tr.hsi-stale :is(td, th) { transition: none; }
}

/* Refinery screenshot import: hint, progress and the "recognized" review. The whole window is
   the drop target, so there is no drop box. */
.hsi-scan-hint {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--hsu-space-2) var(--hsu-space-4);
    color: var(--hsu-text-muted);
    font-size: var(--hsu-text-sm);
}
.hsi-scan-hint > span { flex: 1 1 32ch; }
.hsi-scan :is(.hsi-scan-hint, .hsi-scan-collapsed) kbd { padding: 0 4px; border: 1px solid var(--hsu-line-strong); border-radius: 3px; font: inherit; font-size: var(--hsu-text-xs); }
/* Folded: one compact line. */
.hsu-section.hsi-scan.is-collapsed { margin-bottom: var(--hsu-space-3); }
.hsi-scan-collapsed {
    display: flex;
    align-items: center;
    gap: var(--hsu-space-2);
    min-height: 36px;
    padding: 2px var(--hsu-space-2);
    border-bottom: 1px solid var(--hsu-line);
    color: var(--hsu-text-muted);
    font-size: var(--hsu-text-sm);
    white-space: nowrap;
}
.hsi-scan-collapsed strong { color: var(--hsu-text-strong); font-weight: 600; }
.hsi-scan-collapsed .hsi-scan-status { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hss-shell .hsi-scan-collapsed .mud-button-root { min-height: 28px; padding-block: 2px; }

/* Screenshots Oberland sent, above the order list. */
.hsi-inbox {
    margin: 0 0 var(--hsu-space-4);
    padding: var(--hsu-space-3) var(--hsu-space-4);
    border-left: 3px solid var(--hsu-accent);
    background: linear-gradient(90deg, rgba(228, 167, 56, 0.08), transparent 75%);
}
.hsi-inbox h2 { margin: 0 0 var(--hsu-space-2); font-size: var(--hsu-text-sm); font-weight: 600; color: var(--hsu-text-strong); }
.hsi-inbox-note { margin: 0 0 var(--hsu-space-2); color: var(--hsu-text-muted); font-size: var(--hsu-text-xs); }
.hsi-inbox ul { display: grid; gap: var(--hsu-space-2); margin: 0; padding: 0; list-style: none; }
.hsi-inbox li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hsu-space-2) var(--hsu-space-3); color: var(--hsu-text-muted); font-size: var(--hsu-text-sm); }
.hsi-inbox li > span { flex: 1 1 18ch; }

/* The whole refinery view takes a dropped screenshot; the hint covers its visible part while dragging. */
.hsi-drop-overlay {
    position: fixed;
    z-index: 10000;
    display: none;
    place-content: center;
    justify-items: center;
    gap: var(--hsu-space-2);
    border: 2px dashed var(--hsu-accent, #e4a738);
    border-radius: 6px;
    background: rgba(10, 11, 12, 0.82);
    color: var(--hsu-text-strong, #f3efe6);
    font-size: 1.25rem;
    font-weight: 650;
    text-align: center;
    pointer-events: none;
}
.hsi-drop-overlay small { color: var(--hsu-text-muted, #b9b2a5); font-size: 0.875rem; font-weight: 400; }
.hsi-drop-overlay.is-visible { display: grid; }
.hsi-countdown { font-variant-numeric: tabular-nums; }
.hsi-scan-progress { display: grid; gap: var(--hsu-space-2); color: var(--hsu-text-muted); font-size: var(--hsu-text-sm); }
.hsi-scan-error { margin: var(--hsu-space-2) 0 0; color: var(--hsu-danger); font-size: var(--hsu-text-sm); }
.hsi-scan .hsi-scan-result { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hsu-space-3); }
/* Hours, minutes and seconds side by side; the field spans two form columns. */
.hss-shell .hsi-orders .hsu-duration { grid-column: span 2; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hsi-scan-summary { margin: 0; color: var(--hsu-text); font-size: var(--hsu-text-sm); }
/* The review: the framed screenshot beside the editable values, stacked in a narrow window or on a phone. The
   screenshot stays in view while the values scroll; 100 % fills its column, larger zooms scroll inside it. */
.hsu-section.hsi-scan { container: hsi-scan / inline-size; }
.hsi-scan-review { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--hsu-space-4); align-items: start; }
.hsi-scan-review.has-no-image { grid-template-columns: minmax(0, 1fr); }
.hsi-scan-view { position: sticky; top: var(--hsu-space-2); display: grid; gap: var(--hsu-space-1); margin: 0; min-width: 0; }
.hsi-scan-view-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--hsu-space-1); color: var(--hsu-text-muted); font-size: var(--hsu-text-sm); }
.hsi-scan-view-zoom { min-width: 5ch; text-align: center; font-variant-numeric: tabular-nums; }
.hsi-scan-view-port { max-height: min(72vh, 760px); overflow: auto; border: 1px solid var(--hsu-line); background: #000; overscroll-behavior: contain; }
.hsi-scan-view-port:focus-visible { outline: 2px solid var(--hsu-accent-strong); outline-offset: 2px; }
.hsi-scan-view-canvas { position: relative; overflow: hidden; }
.hsi-scan-view-canvas > img { position: absolute; display: block; max-width: none; height: auto; user-select: none; }
.hsi-scan-edit { display: grid; gap: var(--hsu-space-2); min-width: 0; }
.hss-shell .hsi-scan-table td:first-child .mud-input-control { min-width: 0; }
.hss-shell .hsi-scan-table tbody :is(th, td) { padding: 6px; }
.hss-shell .hsi-scan-table .hsi-scan-value { min-width: 220px; }
.hss-shell .hsi-scan-materials td:nth-child(2) .mud-input-control { min-width: 150px; }
.hss-shell .hsi-scan-materials td.num .mud-input-control { min-width: 72px; }
.hsi-scan-table tbody th .hsi-certainty { display: block; margin-top: 2px; font-size: var(--hsu-text-xs); font-weight: 400; }
.hsi-scan-duration { display: grid; grid-template-columns: repeat(3, minmax(72px, 1fr)); gap: 6px; }
.hsi-scan-candidates { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 6px; color: var(--hsu-text-muted); }
.hsi-scan-candidate { min-height: 28px; padding: 2px 10px; border: 1px solid var(--hsu-line-strong); border-radius: 4px; background: transparent; color: var(--hsu-text); font: inherit; font-size: var(--hsu-text-xs); cursor: pointer; }
.hsi-scan-candidate[aria-pressed="true"] { border-color: var(--hsu-accent-line); background: var(--hsu-accent-soft); color: var(--hsu-accent-strong); }
.hsi-scan-candidate:focus-visible { outline: 2px solid var(--hsu-accent-strong); outline-offset: 1px; }
.hsi-scan-materials tbody tr.is-off > :is(td, th):not(:first-child) { opacity: .62; }
.hsi-scan-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hsu-space-2) var(--hsu-space-4); }

@container hsi-scan (max-width: 959px) {
    .hsi-scan-review { grid-template-columns: minmax(0, 1fr); }
    .hsi-scan-view { position: static; }
    .hsi-scan-view-port { max-height: 48vh; }
}
/* Phone width: each value becomes a block of label and field instead of a wide table row. */
@container hsi-scan (max-width: 620px) {
    .hss-shell .hsi-scan-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .hss-shell .hsi-scan-table, .hss-shell .hsi-scan-table tbody { display: block; width: 100%; }
    .hss-shell .hsi-scan-table tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 8px; padding: 10px 0; border-bottom: 1px solid var(--hsu-line); }
    .hss-shell .hsi-scan-table tbody tr > :is(td, th) { display: block; min-width: 0; padding: 0; border: 0; text-align: left; }
    .hss-shell .hsi-scan-table tbody tr > :not(:first-child) { grid-column: 2; }
    .hss-shell .hsi-scan-table tbody tr > :is(td, th):first-child { grid-row: 1 / span 2; box-shadow: none; }
    .hss-shell .hsi-scan-table td[data-label]::before { content: attr(data-label); display: block; color: var(--hsu-text-faint); font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
    .hss-shell .hsi-scan-table .hsi-scan-value { min-width: 0; }
    .hss-shell .hsi-scan-table .mud-input-control { min-width: 0; }
}
.hsi-scan-table td small { display: block; margin-top: 2px; }
.hsi-scan-table tbody tr.is-unsure > :is(td, th):first-child { box-shadow: inset 3px 0 0 var(--hsu-warn); }
.hsi-scan-table tbody tr.is-unsure .hsi-certainty { color: var(--hsu-warn); font-weight: 600; }
.hsi-scan-table tbody tr.is-sure .hsi-certainty { color: var(--hsu-ok); }
.hsi-scan-table tbody tr.is-missing { color: var(--hsu-text-faint); }
.hsi-scan-review-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--hsu-space-2); }

/* Choosing the area of a screenshot to read: the image with a frame; outside the frame is dimmed.
   The dialog lives in the dialog layer, outside the Universe shell. */
.hsi-crop-hint { margin: 0 0 var(--hsu-space-3, 12px); color: var(--hsu-text-muted); font-size: var(--hsu-text-sm, .875rem); max-width: 90ch; }
.hsi-crop-stage {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid var(--hsu-line-strong, rgba(219, 207, 185, .2));
    background: #000;
    cursor: crosshair;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.hsi-crop-stage:focus-visible, .hsi-crop-box:focus-visible { outline: 2px solid var(--hsu-accent-strong); outline-offset: 2px; }
.hsi-crop-stage > img { display: block; width: 100%; height: 100%; pointer-events: none; }
.hsi-crop-box {
    position: absolute;
    box-sizing: border-box;
    border: 2px solid var(--hsu-accent);
    box-shadow: 0 0 0 100vmax rgba(5, 6, 8, .62);
    cursor: move;
}
.hsi-crop-box[hidden] { display: none; }
.hsi-crop-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid var(--hsu-bg);
    background: var(--hsu-accent);
}
.hsi-crop-handle.is-nw { left: 0; top: 0; cursor: nwse-resize; }
.hsi-crop-handle.is-n { left: 50%; top: 0; cursor: ns-resize; }
.hsi-crop-handle.is-ne { left: 100%; top: 0; cursor: nesw-resize; }
.hsi-crop-handle.is-e { left: 100%; top: 50%; cursor: ew-resize; }
.hsi-crop-handle.is-se { left: 100%; top: 100%; cursor: nwse-resize; }
.hsi-crop-handle.is-s { left: 50%; top: 100%; cursor: ns-resize; }
.hsi-crop-handle.is-sw { left: 0; top: 100%; cursor: nesw-resize; }
.hsi-crop-handle.is-w { left: 0; top: 50%; cursor: ew-resize; }
/* Fingers need larger grips. */
@media (pointer: coarse) {
    .hsi-crop-handle { width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; }
}
.hsi-crop-meta { display: flex; flex-wrap: wrap; gap: 4px var(--hsu-space-4, 16px); margin: var(--hsu-space-2, 8px) 0 0; color: var(--hsu-text-faint); font-size: var(--hsu-text-xs, .75rem); }
.hsi-crop-meta strong { color: var(--hsu-text-strong); font-weight: 600; font-variant-numeric: tabular-nums; }
.hsi-crop-spacer { flex: 1 1 auto; }

/* Share of a distributed order and the private material stock. */
.hsi-share-table tbody + tbody { border-top: 1px solid var(--hsu-line-strong); }
.hsi-share-line th strong { color: var(--hsu-text-strong); }
.hsi-share-line th small { display: block; color: var(--hsu-text-muted); font-size: var(--hsu-text-xs); }
.hsi-share-actions { display: flex; flex-wrap: wrap; gap: var(--hsu-space-2); }
.hss-shell .hsi-share-table .mud-input-control { min-width: 110px; }
/* Grouping of the private stock: a summary row per material or tier, its entries indented below while open. */
.hsi-stock-grouping { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hsu-space-2); margin: 0 0 var(--hsu-space-2); color: var(--hsu-text-muted); font-size: var(--hsu-text-sm); }
.hsi-stock-table td small.hsi-stock-reserved { display: block; color: var(--hsu-warn); font-size: var(--hsu-text-xs); font-weight: 400; }
.hsi-stock-group > * { background: var(--hsu-surface-raised, rgba(255, 255, 255, .03)); }
.hsi-stock-group.is-open > * { border-bottom-color: var(--hsu-line); }
.hsi-stock-group-toggle { display: inline-flex; align-items: center; gap: var(--hsu-space-1); margin: 0; padding: 0; border: 0; background: none; color: var(--hsu-text-strong); font: inherit; text-align: left; cursor: pointer; }
.hsi-stock-group-toggle:hover strong { color: var(--hsu-accent); }
.hsi-stock-group-toggle:focus-visible { outline: 2px solid var(--hsu-accent); outline-offset: 2px; }
:is(.hsi-stock-table, .hsi-sell-table) tbody .hsi-stock-member > th { padding-left: calc(var(--hsu-space-5) + var(--hsu-space-1)); }
:is(.hsi-stock-table, .hsi-sell-table) tbody .hsi-stock-member > th strong { font-weight: 500; }
.hsi-stock-detail-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--hsu-space-5); padding: var(--hsu-space-3) 0; }
.hsi-stock-detail-grid h3 { margin: 0 0 var(--hsu-space-2); color: var(--hsu-text-muted); font-size: var(--hsu-text-sm); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.hsi-stock-move { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: var(--hsu-space-2); align-items: start; margin-top: var(--hsu-space-3); }
.hsi-stock-origins { display: grid; gap: var(--hsu-space-2); margin: 0; padding: 0; list-style: none; }
.hsi-stock-origins li { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--hsu-space-3); font-size: var(--hsu-text-sm); }
.hsi-stock-origins li small { grid-column: 1 / -1; color: var(--hsu-text-faint); font-size: var(--hsu-text-xs); }
/* In- or outflow of one entry: amount and place side by side, note and actions below. */
.hsi-stock-book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--hsu-space-2); margin-bottom: var(--hsu-space-4); }
.hsi-stock-book > :nth-child(n + 3) { grid-column: 1 / -1; }
/* Link buttons that start a line of text sit flush with it. */
:is(.hsi-stock-origins, .hsi-ledger-history) .hsu-link-button { padding: 0; }

/* Capturing several lines at once: amount and its unit (SCU/cSCU toggle) share a cell. */
.hsi-capture-amount { display: flex; align-items: center; gap: var(--hsu-space-1); }

/* Marking stock for the Freight Planner: one row per material, quality and place, grouped like the private list. */
.hsi-sell-table th small, .hsi-sell-table td small { display: block; color: var(--hsu-text-faint); font-size: var(--hsu-text-xs); font-weight: 400; }
.hsi-sell-check { width: 16px; height: 16px; accent-color: var(--hsu-accent); cursor: pointer; }
.hsi-sell-check:disabled { cursor: not-allowed; opacity: .4; }
.hss-shell .hsi-sell-table td:last-child .mud-input-control { width: 120px; min-width: 96px; margin-left: auto; }
.hsi-sell-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hsu-space-3); margin-top: var(--hsu-space-3); }
.hsi-sell-foot > span { margin-right: auto; color: var(--hsu-text-muted); font-size: var(--hsu-text-sm); }
/* Moving: the target once for every marked line, the places last booked to as chips beside it. */
.hsi-move-target { display: flex; flex-wrap: wrap; align-items: center; gap: var(--hsu-space-2); }
.hss-shell .hsi-move-target > .mud-autocomplete { flex: 0 1 260px; min-width: 200px; margin: 0; }
.hss-shell .hsi-capture-table .hsi-capture-material { min-width: 190px; }
.hss-shell .hsi-capture-table td:nth-child(3) { width: 150px; }
.hsi-capture-foot { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--hsu-space-3); margin: var(--hsu-space-2) 0 var(--hsu-space-3); }
.hss-shell .hsi-capture-note { flex: 1 1 260px; max-width: 520px; }

@container hss-suite (max-width: 820px) {
    .hss-shell .hsu-filter-fields > .mud-autocomplete:has(.hsi-scan-place) { flex-basis: 100%; max-width: none; }
    .hsi-stock-detail-grid, .hsi-stock-move { grid-template-columns: minmax(0, 1fr); }
    /* Capture rows become blocks: material above; amount, quality and place below; the outcome last. */
    .hss-shell .hsi-capture-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .hss-shell .hsi-capture-table, .hss-shell .hsi-capture-table tbody { display: block; width: 100%; }
    .hss-shell .hsi-capture-table tbody tr { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .7fr) minmax(0, 1.2fr) auto; gap: var(--hsu-space-2); padding: var(--hsu-space-3) 0; border-bottom: 1px solid var(--hsu-line); }
    .hss-shell .hsi-capture-table tbody tr > td { padding: 0; border: 0; min-width: 0; }
    .hss-shell .hsi-capture-table .hsi-capture-material { grid-column: 1 / 4; }
    .hss-shell .hsi-capture-table td:last-child { grid-column: 4; grid-row: 1; }
    .hss-shell .hsi-capture-table .hsi-capture-result { grid-column: 1 / -1; grid-row: 3; }
}