/* Aspekta, the Reflow Hub face (variable weight), served from static/fonts; system sans when it is not there */
@font-face {
    font-family: "Aspekta";
    src: url("../fonts/aspekta/AspektaVF.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-display: swap;
}

/* Tokens (DESIGN.md "Palette"): the DaisyUI theme in static/src/app.css defines the brand, the
   neutrals and the semantic colours; this block reads them back under the names the custom rules
   use, and adds the derived ones (tints, the sidebar plum, the field line). */
:root {
    --color-bg: var(--color-base-200);
    --color-card: var(--color-base-100);
    --color-text: var(--color-base-content);
    --color-subtle: #737373;
    --color-faint: #a3a3a3;
    --color-line: var(--color-base-300);
    --color-line-strong: #d4d4d4;
    /* --color-primary, --color-accent, --color-success, --color-warning, --color-error and
       --color-info come from the DaisyUI theme */
    --color-accent-hover: #9c3660;
    --color-tint: color-mix(in srgb, var(--color-primary) 10%, transparent);
    --color-tint-strong: color-mix(in srgb, var(--color-primary) 30%, transparent);
    /* the RHEX admin sidebar: a darker plum of the brand, the brand itself on the active item */
    --color-sidebar: color-mix(in srgb, var(--color-primary) 72%, #000000);
    --color-danger: var(--color-error);
    --color-header: var(--color-primary);
    --radius-card: var(--radius-box);
    --radius-btn: var(--radius-field);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.05);
    --font-system: "Aspekta", ui-sans-serif, system-ui, -apple-system, sans-serif;
    /* figures that line up: the system sans, whose digits are tabular (Aspekta's are not; DESIGN.md "Type") */
    --font-figures: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* {
    font-family: var(--font-system);
}

body {
    background: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
}

/* Type (DESIGN.md "Type"): the page title and its one-line description, from page_header() or a
   detail page's own title line */
.page-title {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0;
}

.page-description {
    font-size: 0.875rem;
    color: var(--color-subtle);
    margin: 0.25rem 0 1rem;
}

/* Sidebar */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100vh;
    background: var(--color-sidebar);
    z-index: 1040;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-brand {
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.sidebar-brand a {
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: -0.02em;
}

.sidebar-nav {
    flex: 1;
    padding: 0.75rem 0;
}

.sidebar-section {
    padding: 0 0.75rem;
    margin-bottom: 0.25rem;
}

.sidebar-section-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 0.75rem 0.75rem 0.375rem;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-btn);
    transition: all 0.15s;
}

.sidebar-link i {
    font-size: 1.1rem;
    width: 1.25rem;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-link:hover {
    color: #ffffff;
    background: color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.sidebar-link.active {
    color: #ffffff;
    background: var(--color-primary);
}

/* Sidebar footer / sign-out */
.sidebar .mt-auto {
    color: rgba(255, 255, 255, 0.7);
}

.sidebar .mt-auto .btn-ghost {
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.sidebar .mt-auto .btn-ghost:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
}

/* The Jobs chip (DESIGN.md "Jobs chip and toast", static/js/jobs.js): in the sidebar foot, a ghost button whose text
   is the job running and its last message, a spinner while one runs; the panel under it lists the running and the
   recently finished jobs, each with a thin progress bar or its outcome. Toasts sit bottom right as DaisyUI's soft alerts. */
.jobs-chip .btn { text-align: left; }
.jobs-chip .btn > span.truncate { min-width: 0; flex: 1; }
.jobs-panel { margin-top: 0.375rem; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 0.5rem; padding: 0.375rem 0.5rem; max-height: 14rem; overflow-y: auto; font-size: 0.75rem; color: rgba(255, 255, 255, 0.8); }
.job-row { padding: 0.375rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.job-row:last-child { border-bottom: 0; }
.job-title { font-weight: 600; color: #fff; display: flex; gap: 0.375rem; align-items: baseline; flex-wrap: wrap; }
.job-who { font-weight: 400; color: rgba(255, 255, 255, 0.55); }
.job-link { margin-left: auto; color: rgba(255, 255, 255, 0.8); text-decoration: underline; font-weight: 400; }
.job-bar { height: 0.25rem; width: 100%; margin-top: 0.25rem; display: block; }
.job-msg, .job-done { display: block; color: rgba(255, 255, 255, 0.65); margin-top: 0.125rem; }
.job-error { display: block; color: #f3b4c6; margin-top: 0.125rem; }
.job-toasts { z-index: 60; max-width: 24rem; }
.job-pill { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8125rem; }
.job-pill > span:last-child { flex: 1; min-width: 0; display: block; }
.job-pill-title { display: block; font-weight: 600; }
.job-pill-msg { display: block; color: var(--color-subtle, inherit); }
.job-pill .job-bar { margin-top: 0.375rem; }
.job-toast { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.job-toast > span { flex: 1; min-width: 0; }

/* Content wrapper */
.content-wrapper {
    margin-left: 240px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Mobile top bar */
.mobile-topbar {
    display: none;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    background: var(--color-sidebar);
    position: sticky;
    top: 0;
    z-index: 1030;
}

.mobile-brand {
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.sidebar-toggle {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 1.5rem;
    padding: 0.25rem;
    cursor: pointer;
    line-height: 1;
}

/* Sidebar overlay for mobile */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1035;
}

/* Main content */
.main-content {
    flex: 1;
    padding: 1.5rem 1rem;
    /* a stretched item of the column flexbox: without this its min-width is the widest
       descendant's min-content and phone-width pages overflow to the right */
    min-width: 0;
}

/* Cards (DESIGN.md "Spacing"): white, the line, 8px, the flat shadow; the body padding is DaisyUI's
   --card-p token so a table card's p-0 body wins and its table sits flush to the edges */
.card {
    --card-p: 1.25rem;
    background: var(--color-card);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.card-header {
    background: none;
    border-bottom: 1px solid var(--color-line);
    font-weight: 600;
    font-size: 1rem;
    padding: 0.75rem 1.25rem;
}

/* KPI cards (DESIGN.md "KPI card"): label 11px uppercase subtle, the value 24px bold, an optional note
   13px under it; cards in a row share the row's height and nothing else */
.kpi-card {
    padding: 1rem 1.25rem;
    border-radius: var(--radius-card);
    background: var(--color-card);
    border: 1px solid var(--color-line);
    box-shadow: var(--shadow-card);
    container-type: inline-size;
    height: 100%;
}

.kpi-card .kpi-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-subtle);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.375rem;
}

.kpi-card .kpi-value {
    font-size: clamp(1.125rem, 10.5cqi, 1.5rem);   /* 24px in a four-up row at 1440, down to 18px in a narrow card */
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.02em;
    line-height: 1.1;
    overflow-wrap: break-word;
    word-break: break-word;
}

.kpi-card .kpi-change {
    font-size: 0.8125rem;
    font-weight: 500;
    margin-top: 0.375rem;
}

.kpi-change.positive {
    color: var(--color-success);
}

.kpi-change.negative {
    color: var(--color-danger);
}

.kpi-change.neutral {
    color: var(--color-subtle);
}

/* Chart containers */
.chart-card {
    padding: 1.25rem;
    border-radius: var(--radius-card);
    background: var(--color-card);
    box-shadow: var(--shadow-card);
}

.chart-card .chart-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 1rem;
}

.chart-wrapper {
    position: relative;
    width: 100%;
}

.chart-wrapper.chart-tall {
    height: 350px;
}

.chart-wrapper.chart-medium {
    height: 280px;
}

/* Buttons (DESIGN.md "Buttons"): four variants, all flat, nothing moves on hover. Primary (accent or
   primary): the plum, white text, the plum light on hover. Outline: the field line on white, the plum
   tint and plum text on hover. Ghost: text only, the tint on hover. Destructive: ghost or outline with
   the error colour as text, never a red fill. A semantic outline (btn-error, btn-warning, btn-success)
   is the colour as text with a tinted border and does not fill on hover. Sizes come from the DaisyUI
   theme: 40px, 32px (btn-sm, action rows and filter bars), 24px (btn-xs, table rows). A disabled button of
   any variant keeps DaisyUI's disabled look (the rules below skip :disabled), so it never reads as live. */
.btn {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn-accent:hover,
.btn-primary:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: #ffffff;
}

.btn.btn-outline:not(.btn-primary):not(.btn-accent):not(.btn-secondary):not(.btn-error):not(.btn-warning):not(.btn-success):not(.btn-info):not(:disabled):not(.btn-disabled) {
    background: var(--color-card);
    border-color: var(--color-line-strong);
    color: var(--color-text);
}

.btn.btn-outline:not(.btn-primary):not(.btn-accent):not(.btn-secondary):not(.btn-error):not(.btn-warning):not(.btn-success):not(.btn-info):not(:disabled):not(.btn-disabled):hover {
    background: var(--color-tint);
    border-color: var(--color-tint-strong);
    color: var(--color-primary);
}

.btn.btn-outline:is(.btn-error, .btn-warning, .btn-success, .btn-info):not(:disabled):not(.btn-disabled) {
    background: var(--color-card);
    border-color: color-mix(in srgb, var(--btn-color) 45%, transparent);
    color: var(--btn-color);
}

.btn.btn-outline:is(.btn-error, .btn-warning, .btn-success, .btn-info):not(:disabled):not(.btn-disabled):hover {
    background: color-mix(in srgb, var(--btn-color) 8%, var(--color-card));
    border-color: var(--btn-color);
    color: var(--btn-color);
    box-shadow: none;
}

.btn.btn-ghost:hover {
    background: var(--color-tint);
}

.btn.btn-ghost.text-error:hover {
    background: color-mix(in srgb, var(--color-error) 8%, transparent);
    color: var(--color-error);
}

.btn-sm {
    font-size: 0.8125rem;
}

.btn-xs {
    font-size: 0.75rem;
}

/* Links: the plum, underlined on hover, wherever a link sits */
.link,
.lot-name-link,
.bid-detail-toggle {
    color: var(--color-primary);
    text-decoration: none;
}

.link:hover,
.lot-name-link:hover,
.bid-detail-toggle:hover {
    text-decoration: underline;
}

/* Fields: the focus ring is the brand, as in RHEX */
.input:focus,
.input:focus-within,
.select:focus,
.select:focus-within,
.textarea:focus,
.textarea:focus-within {
    outline-color: var(--color-primary);
    border-color: var(--color-primary);
}

/* Status badges (DESIGN.md "Status badge"): one treatment, a soft pill, 12px semibold, the colour as
   text on its 8% tint (DaisyUI's badge-soft). Ghost is the "absent" state: subtle text on the page grey. */
.badge {
    border-radius: 9999px;
    font-weight: 600;
    white-space: nowrap;
}

.badge-sm {
    font-size: 0.75rem;
}

.badge-ghost {
    background: var(--color-bg);
    border-color: var(--color-bg);
    color: var(--color-subtle);
}

/* Modals (DESIGN.md "Modals"): the title at 16px semibold, the body 14px */
.modal-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    padding-right: 2rem;
}

.modal-box {
    font-size: 0.875rem;
}

/* A phone: a wide modal (the lot modal's bids table, the cut modal's pool) stays inside the viewport and
   scrolls sideways instead of being cut off at the left */
@media (max-width: 640px) {
    .modal-box {
        max-width: calc(100vw - 1.5rem);
        overflow-x: auto;
    }
}

/* Dropdown menus: a line around the box, small radius on the items */
.dropdown-content {
    border: 1px solid var(--color-line);
}

.menu li > * {
    border-radius: 0.25rem;
}

/* Filter bar (DESIGN.md "Filter bar"): a white card, the controls on one row under 11px uppercase
   labels, the buttons on the controls' baseline; the controls are the standard small fields, a select
   at least 10rem wide so the labels never crowd. On phones the controls stack full width. */
.filter-bar {
    background: var(--color-card);
    border-radius: var(--radius-card);
    border: 1px solid var(--color-line);
    box-shadow: var(--shadow-card);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
}

.filter-bar label {
    display: block;   /* above its control: a text input is inline, a select is not */
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-subtle);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.375rem;
}

.filter-bar .select,
.filter-bar .input {
    font-size: 0.8125rem;
}

.filter-bar .select {
    min-width: 10rem;
}

.filter-bar .checkbox {
    display: block;
    margin: 0.375rem 0;
}

/* Tables (DESIGN.md "Table card and DataTable"): 13px, the header on the page grey in the subtle colour,
   numbers right and never wrapped, the action column only as wide as its buttons so the slack goes to
   the text columns; the table is flush inside its card */
.table-compact {
    font-size: 0.8125rem;
}

.table thead th,
table.dataTable thead th,
table.dataTable thead td {
    background: var(--color-bg);
    color: var(--color-subtle);
    font-weight: 500;
    font-size: 0.8125rem;
    border-bottom: 1px solid var(--color-line);
    padding: 0.625rem 0.75rem;
    text-transform: none;
    letter-spacing: 0;
}

.table :where(th, td),
table.dataTable tbody td {
    padding: 0.625rem 0.75rem;
    vertical-align: middle;
}

.table-compact :where(th, td) {
    font-size: 0.8125rem;
}

.table :where(th, td).text-end {
    white-space: nowrap;
}

/* Figures in columns: Aspekta's digits are proportional and it has no tabular figures, so tabular-nums does
   nothing in it and right-aligned amounts do not line up. A number cell is set in the system sans with tabular
   figures; its header, and any button, badge, field or note in it, keep Aspekta. Zero specificity, so a class
   that names its own face (font-mono) still wins over it. */
:where(.table td.text-end, .table td.num, .family-table td:not(:first-child), .price-grid .price-cell,
    .market-range, .market-figure, .price-market),
:where(.table td.text-end, .table td.num, .family-table td:not(:first-child), .market-range, .market-figure,
    .price-market) :where(:not(.btn, .badge, .badge-grade, .grade-chip, input, select, textarea, .cell-note)) {
    font-family: var(--font-figures);
    font-variant-numeric: tabular-nums;
}

.table th:empty,
table.dataTable th:has(> .dt-column-title:empty) {
    width: 1%;
    white-space: nowrap;
}

.table tfoot td,
.table tfoot th {
    border-top: 1px solid var(--color-line);
}

.table tbody tr:hover,
table.dataTable tbody tr:hover {
    background-color: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:before,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:before,
table.dataTable thead th.sorting_desc:after,
table.dataTable thead .dt-column-order:before,
table.dataTable thead .dt-column-order:after {
    opacity: 0.4;
}

/* DataTables 2 (static/js/tables.js): its Tailwind integration emits utility classes this build never
   generates, so the chrome is laid out here by DataTables' own hooks. The search box alone top-left,
   the buttons top-right, "1 to 25 of 28" bottom-left and plain page buttons bottom-right, both rows
   padded inside the card; the table row between them is untouched. */
.dt-container > div:not(.dt-autosize):not(:has(> div > table)) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin: 0;
    padding: 0.75rem 1rem;
}

.dt-container > div:has(> div > table) {
    display: block;
    margin: 0;
}

.dt-container > div:not(.dt-autosize) > div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dt-container > div > div.col-start-2 {
    margin-left: auto;
}

.dt-search {
    display: flex;
    align-items: center;
}

.dt-search label {
    display: none;   /* the placeholder says it */
}

.dt-search input {
    height: 2rem;
    width: 14rem;
    max-width: 100%;
    margin: 0;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-btn);
    padding: 0 0.75rem;
    font-size: 0.8125rem;
    background: var(--color-card);
    color: var(--color-text);
}

.dt-search input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-tint);
}

.dt-search input::placeholder {
    color: var(--color-faint);
}

.dt-info {
    font-size: 0.8125rem;
    color: var(--color-subtle);
}

.dt-paging nav,
.dt-paging .pagination {
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.dt-paging .dt-paging-button,
.dt-paging a,
.dt-paging button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    margin: 0;
    padding: 0 0.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    background: transparent;
    color: var(--color-text);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
}

.dt-paging a:hover:not(.disabled):not([aria-disabled="true"]),
.dt-paging button:hover:not(.disabled):not([aria-disabled="true"]) {
    background: var(--color-tint);
    color: var(--color-primary);
}

.dt-paging a.current,
.dt-paging a[aria-current],
.dt-paging button.current,
.dt-paging button[aria-current] {
    background: var(--color-tint);
    color: var(--color-primary);
    font-weight: 600;
}

.dt-paging a.disabled,
.dt-paging a[aria-disabled="true"],
.dt-paging button.disabled,
.dt-paging button[aria-disabled="true"] {
    color: var(--color-faint);
    cursor: default;
}

.dt-paging .ellipsis {
    padding: 0 0.25rem;
    color: var(--color-faint);
}

.dt-buttons {
    gap: 0.5rem;
}

table.dataTable.table {
    margin: 0;
    font-size: inherit;
}

/* Grade badges */
.badge-grade {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge-grade-a { background: #e8f5e9; color: #2d6a4f; }
.badge-grade-b { background: #e3f0f7; color: #2a6f97; }
.badge-grade-c { background: #fdf3d7; color: #8a6914; }
.badge-grade-d { background: #fde8dd; color: #9e4a2a; }
.badge-grade-e { background: #fde2df; color: #9e2b20; }

/* Upload page */
.file-drop-zone {
    border: 2px dashed #d4d4d4;
    border-radius: var(--radius-card);
    padding: 2rem;
    text-align: center;
    transition: all 0.2s;
    cursor: pointer;
    position: relative;
}

.file-drop-zone:hover {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-primary) 3%, transparent);
}

.file-drop-zone.active {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-primary) 5%, transparent);
}

.file-drop-zone input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.file-drop-zone .drop-label {
    color: var(--color-subtle);
    font-size: 0.95rem;
}

.file-drop-zone .drop-label.has-files {
    color: var(--color-accent);
    font-weight: 500;
}

/* Footer */
.footer {
    padding: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.8rem;
}

/* The data chat (DATA_CHAT_PLAN.md DC4): the conversations beside the conversation (the layout DESIGN.md keeps); an
   answer is a card built from the shell's components: the help pages' prose, a DataTable in a bordered box, a chart
   card with its Table toggle, the pages it read as links, and its steps folded (.card-details). Nothing moves on hover. */
.chat-layout {
    display: flex;
    gap: 1.5rem;
    height: calc(100vh - 11rem);
    height: calc(100dvh - 11rem);
    min-height: 28rem;
}

.thread-sidebar {
    width: 16rem;
    flex: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--color-card);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
}
.thread-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.625rem 0.625rem 1.25rem;
    border-bottom: 1px solid var(--color-line);
}
.thread-sidebar-title { font-size: 1rem; font-weight: 600; }
.thread-list { flex: 1; overflow-y: auto; padding: 0.5rem; }
.thread-empty, .thread-loading { padding: 2rem 1rem; text-align: center; font-size: 0.875rem; color: var(--color-subtle); }
.thread-item { display: flex; align-items: center; gap: 0.125rem; margin-bottom: 2px; border-radius: var(--radius-btn); }
.thread-item:hover, .thread-item.active { background: var(--color-tint); }
.thread-item-info {
    flex: 1;
    min-width: 0;
    display: block;
    padding: 0.5rem 0.625rem;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.thread-item-title { display: block; font-size: 0.875rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread-item.active .thread-item-title { color: var(--color-primary); font-weight: 600; }
.thread-item-time { display: block; font-size: 0.75rem; color: var(--color-subtle); }
.thread-item-actions { display: flex; gap: 2px; padding-right: 0.25rem; opacity: 0; }
.thread-item:hover .thread-item-actions,
.thread-item:focus-within .thread-item-actions,
.thread-item.active .thread-item-actions { opacity: 1; }

.chat-container { flex: 1; min-width: 0; max-width: 60rem; display: flex; flex-direction: column; }
.chat-toolbar { display: flex; align-items: center; gap: 0.5rem; min-height: 2rem; }
.chat-thread-title { min-width: 0; font-size: 0.875rem; font-weight: 600; color: var(--color-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-threads-btn { display: none; }
.chat-messages { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 1rem 0; display: flex; flex-direction: column; gap: 1rem; }

.chat-welcome { padding: 1.5rem 0; }
.chat-welcome-lead { margin-bottom: 1.25rem; font-size: 1rem; font-weight: 600; }
.chat-suggestions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
.chat-suggestion-group { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; min-width: 0; }
.chat-suggestion-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-subtle); }
.suggestion-chip { height: auto; min-height: 2rem; max-width: 100%; padding-top: 0.375rem; padding-bottom: 0.375rem; white-space: normal; text-align: left; justify-content: flex-start; }

/* the question: on the plum tint, at the right */
.chat-question {
    align-self: flex-end;
    max-width: 80%;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-card);
    background: var(--color-tint);
    font-size: 0.875rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* the answer: a card, flat, with the line */
.chat-answer {
    align-self: stretch;
    min-width: 0;
    padding: 1.25rem;
    background: var(--color-card);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
}
.chat-answer > * + * { margin-top: 1rem; }
.chat-prose { font-size: 0.875rem; }
.chat-prose > :last-child { margin-bottom: 0; }
/* links as everywhere (DESIGN.md "Links"): the plum, underlined on hover only; the help pages underline theirs */
.help-body.chat-prose a { text-decoration: none; }
.help-body.chat-prose a:hover { text-decoration: underline; }
.chat-table { border: 1px solid var(--color-line); border-radius: var(--radius-card); overflow-x: auto; }
.chat-table .table { margin: 0; }
.chat-table td.chat-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.75rem; }
.chat-answer .chart-card.chat-chart { padding: 1rem 1.25rem; border: 1px solid var(--color-line); box-shadow: none; }
.chat-chart-v { height: 16rem; }
.chat-chart-h6 { height: 12rem; }
.chat-chart-h12 { height: 20rem; }
.chat-chart-h20 { height: 30rem; }
.chat-chart-h30 { height: 40rem; }
.chat-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; font-size: 0.8125rem; }
.chat-sources-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-subtle); }
.chat-worked > summary { font-size: 0.8125rem; color: var(--color-subtle); }
.chat-worked .steps-list { margin-top: 0.5rem; }
.chat-trace {
    margin-top: 0.5rem;
    padding: 0.75rem;
    border-radius: var(--radius-btn);
    background: var(--color-bg);
    font-size: 0.75rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* while it works: the steps as a check list, the current one muted, the seconds and Stop in the head */
.chat-working-head { display: flex; align-items: center; gap: 0.75rem; }
.chat-working-title { font-size: 1rem; font-weight: 600; }
.chat-working-time { flex: 1; font-size: 0.75rem; color: var(--color-subtle); font-variant-numeric: tabular-nums; }
.chat-steps { margin-top: 0.5rem; }
.chat-step-now { color: var(--color-subtle); }
.chat-stopped { font-size: 0.875rem; color: var(--color-subtle); }
.chat-error { font-size: 0.875rem; }

/* the composer: a box with the field line, the plum focus ring, the one filled button */
.chat-composer { padding-top: 0.75rem; border-top: 1px solid var(--color-line); }
.chat-input-wrap {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.375rem 0.375rem 0.375rem 0.875rem;
    background: var(--color-card);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-card);
}
.chat-input-wrap:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-tint); }
.chat-input {
    flex: 1;
    min-width: 0;
    padding: 0.3125rem 0;
    border: 0;
    outline: 0;
    resize: none;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 0.875rem;
    line-height: 1.375rem;
}
.chat-input::placeholder { color: var(--color-faint); }
.chat-input-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.375rem; min-height: 2rem; }
.chat-hint { font-size: 0.75rem; color: var(--color-subtle); }

@media (max-width: 991px) {
    .chat-layout { gap: 0; height: calc(100dvh - 12rem); }
    .thread-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1050;
        width: min(20rem, 85vw);
        border-width: 0 1px 0 0;
        border-radius: 0;
        box-shadow: var(--shadow-card);
        transform: translateX(-100%);
        transition: transform 0.2s;
    }
    .thread-sidebar.open { transform: translateX(0); }
    .chat-threads-btn { display: inline-flex; }
    .chat-question { max-width: 92%; }
}

@media (max-width: 640px) {
    .chat-suggestions { grid-template-columns: minmax(0, 1fr); }
    .chat-answer { padding: 1rem; }
    .chat-hint { display: none; }
    .chat-input-footer { justify-content: flex-end; }
}

/* Responsive — tablets and phones */
@media (max-width: 991px) {
    /* Sidebar hidden off-screen on mobile */
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .sidebar.open {
        transform: translateX(0);
    }

    .sidebar-overlay.active {
        display: block;
    }

    /* Show mobile top bar */
    .mobile-topbar {
        display: flex;
    }

    /* Content takes full width */
    .content-wrapper {
        margin-left: 0;
    }
}

@media (max-width: 768px) {
    /* Layout spacing */
    .main-content {
        padding: 0.75rem 0.5rem;
    }

    /* Page titles */
    .page-title {
        font-size: 1.125rem;
    }

    /* KPI cards */
    .kpi-card {
        padding: 0.875rem 1rem;
    }

    /* Cards */
    .card {
        --card-p: 1rem;
    }

    .card-header {
        padding: 0.75rem 1rem;
    }

    .card-header .flex {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* Filter bar */
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .filter-bar .select,
    .filter-bar .input {
        width: 100%;
    }

    /* Charts */
    .chart-wrapper.chart-tall {
        height: 260px;
    }

    .chart-wrapper.chart-medium {
        height: 220px;
    }

    .chart-card {
        padding: 1rem;
    }

    /* Tables */
    .table :where(th, td),
    table.dataTable thead th,
    table.dataTable tbody td {
        padding: 0.5rem 0.625rem;
    }

    .dt-search input {
        width: 100%;
    }

    /* Upload page */
    .upload-container {
        max-width: 100%;
    }

    .file-drop-zone {
        padding: 1.25rem;
    }

}

/* Small phones */
@media (max-width: 480px) {
    .main-content {
        padding: 0.5rem 0.25rem;
    }

    .card {
        --card-p: 0.75rem;
    }

    .kpi-card .kpi-value {
        font-size: 1.25rem;
    }
}

/* Lots page */
.benchmark-est { font-size: 0.82rem; color: #6c4f9e; }
/* X2: the market from Index (the Lots page, Master prices, forward-price files). A figure older than eight days
   is greyed (services/benchmarks.py: STALE_DAYS); the note under a table names the segment and its date. */
.market-cell { min-width: 9rem; }
.market-range { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.market-figure { font-variant-numeric: tabular-nums; }
.market-range.is-stale, .market-figure.is-stale, .price-market.is-stale { opacity: 0.45; }
.market-note { font-size: 0.75rem; color: color-mix(in srgb, var(--color-base-content) 60%, transparent); padding: 0.5rem 1rem; margin: 0; }
.price-market { display: block; font-size: 0.7rem; line-height: 1.1; margin-top: 2px; white-space: nowrap;
    color: color-mix(in srgb, var(--color-base-content) 60%, transparent); font-variant-numeric: tabular-nums; }
.price-market .is-off { color: var(--color-warning); font-weight: 600; }
.delta-positive { font-size: 0.75rem; color: var(--color-success); font-weight: 500; }
.delta-negative { font-size: 0.75rem; color: var(--color-danger); font-weight: 500; }
.bid-detail-wrap { padding: 0.5rem 1rem 0.75rem; }
.bid-detail-wrap table { font-size: 0.8rem; }
.bid-detail-toggle { cursor: pointer; font-size: 0.8rem; font-weight: 500; }
.modal-bids table { font-size: 0.85rem; }
.modal-bids .accepted-row { background: color-mix(in srgb, var(--color-success) 10%, transparent); }
.lot-name-link { cursor: pointer; font-weight: 600; }
.modal-tab-content { display: none; }
.modal-tab-content.active { display: block; }
/* The lots table: a row opens its lot window; a figure's note sits under it; a withdrawn lot is history */
.lots-table tbody tr[data-lot] { cursor: pointer; }
.lots-table tbody tr[data-lot]:hover > td { background: var(--color-tint); }
.lots-table td { white-space: nowrap; }
/* a figure's context, on its own line under it (the Lots table, the lot window's grid) */
.cell-note { display: block; font-size: 0.75rem; font-weight: 400; color: var(--color-subtle); white-space: nowrap; }
.lots-table tr.row-muted > td, .lots-table tr.row-muted .lot-name-link { color: var(--color-subtle); }
.lots-legacy .col-order { display: none; }
/* A card section that folds away (the Lots page's receiving table): its summary is the card header */
.card-details > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; }
.card-details > summary::-webkit-details-marker { display: none; }
.card-details > summary::before { content: '\25B8'; color: var(--color-subtle); font-size: 0.75rem; }
.card-details[open] > summary::before { content: '\25BE'; }
.card-details:not([open]) > summary { border-bottom: 0; }
.card-details-summary { font-size: 0.8125rem; font-weight: 400; color: var(--color-subtle); }
/* The lot window: its facts and actions above the tabs; the comparison grid's best price per line */
.lot-head-facts { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-size: 0.875rem; }
.lot-head-facts > span > span:first-child { color: var(--color-subtle); }
.compare-wrap { overflow: auto; max-height: 60vh; }
.compare-table td, .compare-table th { white-space: nowrap; }
.compare-table thead th { position: sticky; top: 0; z-index: 1; background: var(--color-bg); }
.compare-table tfoot td { position: sticky; bottom: 0; background: var(--color-card); font-weight: 600; border-top: 1px solid var(--color-line); }
.compare-table td.is-best { color: var(--color-success); font-weight: 600; }
.compare-table td.is-under { color: var(--color-danger); }

/* Profit indicators */
.profit-positive { color: var(--color-success); font-weight: 600; }
.profit-negative { color: var(--color-danger); font-weight: 600; }

/* Labels: the HTML fallback for the 100 x 50 mm thermal stock (templates/labels/print.html), the ZPL's layout
   (services/labels.py): a kicker row, the code, its barcode, a rule, the facts in columns; the unit label has
   the device and the grade box above the rule and its two barcodes under it */
.label-sheet {
    margin: 0;
    padding: 0;
    background: #ffffff;
}

.label-sheet .label {
    width: 100mm;
    height: 50mm;
    padding: 2.75mm 4mm 2.5mm;
    box-sizing: border-box;
    overflow: hidden;
    page-break-after: always;
    break-after: page;
    border: 1px dashed #d4d4d4;
    display: flex;
    flex-direction: column;
    align-items: stretch;      /* DaisyUI's own .label centres its children with a gap between them */
    gap: 0;
    white-space: normal;
    color: #000000;
    font-family: var(--font-system);
    line-height: 1.15;
}

.label-sheet .label:last-child {
    page-break-after: auto;
    break-after: auto;
}

.label-kicker { font-size: 6.5pt; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.label-top { display: flex; justify-content: space-between; align-items: baseline; gap: 3mm; }
.label-aside { font-size: 10pt; font-weight: 700; }
.label-code { font-size: 18pt; font-weight: 700; line-height: 1.1; margin-top: 0.75mm; }
.label-barcode { display: block; width: 66mm; height: 11mm; margin: 1.25mm auto 0; flex: none; }
.label-rule { border-top: 0.4mm solid #000000; margin: 1.5mm 0; flex: none; }
.label-foot { flex: 1; display: flex; gap: 3.5mm; min-height: 0; }
.label-col { flex: 1; display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.label-col-side { border-left: 0.4mm solid #000000; padding-left: 3.5mm; }
.label-col-narrow { flex: 0 0 20mm; }
.label-col-top { justify-content: flex-start; gap: 1.5mm; }
.label-big { font-size: 20pt; font-weight: 700; line-height: 1; }
.label-strong { font-size: 9.5pt; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.label-small { font-size: 8.5pt; }
.label-tiny { font-size: 7pt; }
.label-end { text-align: end; }
.label-pair { display: flex; align-items: baseline; gap: 2mm; min-width: 0; }
.label-pair .label-kicker { flex: 0 0 9mm; }
.label-check { display: inline-block; width: 3mm; height: 3mm; border: 0.3mm solid #000000; vertical-align: middle; margin-left: 1.5mm; }
.label-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr auto; align-content: space-between; align-items: baseline; column-gap: 3mm; }
.label-name { grid-column: span 2; font-size: 12pt; font-weight: 700; white-space: nowrap; overflow: hidden; }
.label-span { grid-column: span 2; }
.label-lines { width: 100%; border-collapse: collapse; font-size: 7.5pt; }
.label-lines td { padding: 0.2mm 0; white-space: nowrap; }
.label-lines td:nth-child(2) { padding: 0.2mm 2mm; }

/* the unit label */
.label-head { display: flex; justify-content: space-between; gap: 3mm; flex: none; }
.label-head-text { min-width: 0; padding-top: 0.25mm; }
.label-device { font-size: 12pt; font-weight: 700; margin-top: 0.75mm; }
.label-storage { font-size: 9.5pt; margin-top: 0.5mm; }
.label-grade-box {
    flex: none;
    width: 13mm;
    height: 15mm;
    border: 0.5mm solid #000000;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1mm;
}
.label-grade { font-size: 28pt; font-weight: 800; line-height: 1; margin-top: 0.5mm; }
.label-pair-id .label-kicker { flex-basis: 16mm; }
.label-barcode-unit { height: 7.5mm; margin-top: 0.5mm; margin-bottom: 0.75mm; }

@media print {
    .label-sheet .label { border: none; }
    .label-sheet .no-print { display: none; }
}

@page {
    size: 100mm 50mm;
    margin: 0;
}

/* Scan station (RAMS R3): one big input, a banner that can be read across the bench */
.scan-input {
    font-size: 1.5rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.02em;
}

.scan-banner {
    border-radius: var(--radius-card);
    padding: 1.25rem 1.5rem;
    color: #ffffff;
    background: var(--color-subtle);
    box-shadow: var(--shadow-card);
    transition: background 0.15s ease;
}

.scan-banner-idle { background: var(--color-subtle); }
.scan-banner-pass { background: var(--color-success); }
.scan-banner-fail { background: var(--color-danger); }
.scan-banner-warn { background: var(--color-warning); color: #262626; }

.scan-banner-title {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.scan-banner-text {
    font-size: 1.05rem;
    margin-top: 0.35rem;
}

.scan-device {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
}

.scan-instruction {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.15;
}

.scan-flag, .scan-grade {
    min-height: 3rem;
}

/* the latest test or erasure report under the device line (I1 of ITAD_PLAN.md) */
.scan-report { margin-top: 0.5rem; font-size: 0.875rem; display: grid; gap: 0.35rem; }
.scan-report-none { color: var(--color-subtle); }
.scan-report-gate { color: var(--color-error); font-weight: 600; }
.scan-report-differs { color: var(--color-warning); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }

.scan-carton-row:hover,
.scan-carton-current {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border-radius: 6px;
}

.scan-box-row progress {
    height: 0.5rem;
}

@media (max-width: 480px) {
    .scan-input { font-size: 1.15rem; }
    .scan-banner { padding: 1rem; }
    .scan-banner-title { font-size: 1.5rem; }
    .scan-device { font-size: 1.25rem; }
    .scan-instruction { font-size: 1.5rem; }
    .scan-status { font-size: 0.8rem; }
}

/* Pack station (RAMS Phase 2, P3): the scan station's layout on the way out */

.pack-unit-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0.35rem;
    border-radius: 6px;
}

.pack-unit-row.checked { background: color-mix(in srgb, var(--color-success) 12%, transparent); }
.pack-move-out { background: color-mix(in srgb, var(--color-warning) 15%, transparent); border-radius: 6px; }
.pack-box-row.pack-box-current { background: color-mix(in srgb, var(--color-primary) 10%, transparent); border-radius: 6px; }
.pack-box-row.pack-box-packed { color: var(--color-base-content); opacity: 0.75; }
.pack-weight { font-size: 1.25rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Packing slip (templates/shipping/packing_slip.html): an A4 page through the named @page rule; the label
   sheet keeps the unnamed 100 x 50 mm rule above */
@page a4 {
    size: A4;
    margin: 12mm;
}

.packing-slip {
    page: a4;
    margin: 0;
    padding: 12mm;
    background: #ffffff;
    color: #000000;
    font-family: var(--font-system);
    font-size: 10pt;
}

.packing-slip h1 { font-size: 18pt; font-weight: 700; margin: 0 0 1mm; }
.packing-slip h2 { font-size: 12pt; font-weight: 600; margin: 0 0 1.5mm; }
.packing-slip .slip-sub { font-size: 9.5pt; color: #525252; margin-bottom: 5mm; }
.packing-slip .slip-head { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm; margin-bottom: 6mm; }
.packing-slip .slip-block { font-size: 9.5pt; line-height: 1.35; }
.packing-slip .slip-label { font-size: 8pt; text-transform: uppercase; letter-spacing: 0.06em; color: #525252; }
.packing-slip table { width: 100%; border-collapse: collapse; font-size: 9pt; margin-bottom: 4mm; }
.packing-slip th, .packing-slip td { border-bottom: 1px solid #d4d4d4; padding: 1.2mm 1.5mm; text-align: left; vertical-align: top; }
.packing-slip th { font-weight: 600; background: #f0f0f0; }
.packing-slip td.num, .packing-slip th.num { text-align: right; }
.packing-slip .slip-box { break-inside: avoid; margin-bottom: 4mm; }
.packing-slip .slip-summary { break-before: page; }
.packing-slip .slip-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 8.5pt; }
.packing-slip .slip-foot { font-size: 8pt; color: #525252; margin-top: 6mm; }
.packing-slip .slip-bar { display: flex; gap: 0.5rem; margin-bottom: 6mm; }
/* The pro-forma (templates/shipping/pro_forma.html, WHOLESALE_PLAN.md A6) on the same A4 rule: the seller top right,
   the totals in the table's foot, the bank details boxed */
.pro-forma .pf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6mm; margin-bottom: 5mm; }
.pro-forma .pf-seller { text-align: right; font-size: 9.5pt; line-height: 1.35; }
.pro-forma tfoot td, .pro-forma tfoot th { border-bottom: 0; background: transparent; }
.pro-forma tfoot th { font-weight: 600; }
.pro-forma tr.pf-due th { border-top: 2px solid #000000; font-size: 11pt; }
.pro-forma .pf-pay { margin-top: 4mm; }
.pro-forma table.pf-bank { width: auto; min-width: 70mm; margin: 1mm 0 3mm; }
.pro-forma table.pf-bank td { border-bottom: 0; padding: 0.6mm 6mm 0.6mm 0; }
.pro-forma table.pf-bank td:first-child { color: #525252; }
.pro-forma .pf-terms { font-size: 8.5pt; color: #525252; max-width: 150mm; }
.pro-forma .pf-terms a { color: inherit; }
/* An ITAD job's quote for its client (templates/itad/quote.html, ITAD_PLAN.md I2a) on the pro-forma's A4 rule: the
   declared words under each model, the sums and the net beside the tables, the terms as a list of titled paragraphs */
.itad-quote .iq-note { font-size: 8pt; color: #525252; }
.itad-quote .iq-sums table, .itad-quote table.iq-net { width: auto; min-width: 95mm; margin-left: auto; }
.itad-quote table.iq-net td, .itad-quote table.iq-net th { border-bottom: 0; }
.itad-quote table.iq-card { font-size: 8.5pt; }
.itad-quote h2 { margin-top: 5mm; }
.itad-quote .iq-terms { font-size: 8.5pt; line-height: 1.4; display: grid; grid-template-columns: 38mm 1fr; gap: 1.2mm 4mm; }
.itad-quote .iq-terms dt { font-weight: 600; }
.itad-quote .iq-terms dd { margin: 0; color: #262626; }
/* Reflow's certificate of destruction (I2b): a photo's SHA-256 wraps inside its cell */
.itad-quote .iq-hash { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 6.5pt; word-break: break-all; max-width: 40mm; }
.itad-quote .iq-terms a { color: inherit; }
/* the ITAD job page: the declared list's checks */
.itad-job .next-item { display: flex; gap: 0.375rem; align-items: baseline; }
.itad-job .next-item .glyph { width: 0.75rem; text-align: center; font-weight: 700; flex: none; }
/* a note under a next-item is prose, not a cell: it wraps (I6: the declared list's foot ran a 390 px page to 1,206 px) */
.itad-job .next-item > :not(.glyph) { min-width: 0; }
.itad-job .next-item .cell-note { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 640px) {
    .itad-job .next-item { flex-wrap: wrap; }
    .itad-job .next-item .cell-note { flex-basis: 100%; padding-left: 1.125rem; }
}
.itad-job .next-item .glyph.money { color: var(--color-error); }
.itad-job .next-item .glyph.routine { color: var(--color-faint); }
/* the ITAD job page in tabs (2026-11-08): the Overview's lines to their tab, a fold for what is seldom opened (the bins
   when every count matches, the collection once recorded, a closed job's dispute and cost forms), the device tables'
   filter (it scrolls on a phone, never wraps), the terms as the client read them */
.itad-job .link-plain { color: inherit; text-decoration: none; }
.itad-job .link-plain:hover { color: var(--color-primary); text-decoration: underline; }
.itad-job .itad-fold > summary { cursor: pointer; font-size: 0.8125rem; color: var(--color-subtle); width: fit-content; }
.itad-job .itad-fold > summary:hover { color: var(--color-primary); }
.itad-job .itad-fold + .itad-fold { margin-top: 0.75rem; }
.itad-job .seg-filter { max-width: 100%; overflow-x: auto; }
.itad-job .seg-filter .seg-count { color: var(--color-subtle); font-weight: 400; margin-left: 0.125rem; }
.itad-job .seg-filter button.active .seg-count { color: inherit; opacity: 0.8; }
.itad-job .terms-words { display: grid; grid-template-columns: 12rem 1fr; gap: 0.5rem 1.5rem; margin: 0; font-size: 0.875rem; }
.itad-job .terms-words > div { display: contents; }
.itad-job .terms-words dt { font-weight: 600; }
.itad-job .terms-words dd { margin: 0; color: var(--color-text); }
@media (max-width: 640px) {
    .itad-job .terms-words { grid-template-columns: 1fr; gap: 0.125rem; }
    .itad-job .terms-words dd { margin-bottom: 0.5rem; }
}

@media print {
    .packing-slip { padding: 0; }
    .packing-slip .no-print { display: none; }
}

/* Help pages: Markdown rendered by app/services/help.py (app/help/*.md) */
.help-topic { transition: box-shadow 0.15s; }
.help-topic:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 35%, transparent); }
.help-body { font-size: 0.925rem; line-height: 1.6; }
.help-body h2 { font-size: 1.125rem; font-weight: 600; margin: 1.75rem 0 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--color-line); }
.help-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.help-body h3 { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 0.375rem; }
.help-body p { margin: 0 0 0.75rem; }
.help-body ul, .help-body ol { margin: 0 0 0.75rem 1.5rem; }
.help-body ul { list-style: disc; }
.help-body ol { list-style: decimal; }
.help-body li { margin-bottom: 0.25rem; }
.help-body li > ul, .help-body li > ol { margin: 0.25rem 0 0.25rem 1.25rem; }
.help-body strong { font-weight: 600; }
.help-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; padding: 0.1rem 0.3rem; border-radius: 0.25rem; background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.help-body pre { margin: 0 0 0.75rem; padding: 0.75rem; border: 1px solid var(--color-line); border-radius: 0.5rem; background: #f7f7f7; overflow-x: auto; }
.help-body pre code { padding: 0; background: none; }
.help-body table { width: 100%; margin: 0 0 1rem; border-collapse: collapse; font-size: 0.875rem; }
.help-body th, .help-body td { padding: 0.375rem 0.5rem; border: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.help-body th { font-weight: 600; background: #f7f7f7; }
.help-body blockquote { margin: 0 0 0.75rem; padding-left: 0.75rem; border-left: 3px solid var(--color-primary); color: rgb(0 0 0 / 0.65); }
.help-body a { color: var(--color-primary); text-decoration: underline; }
.help-body hr { margin: 1.25rem 0; border: 0; border-top: 1px solid var(--color-line); }
.help-toc a { display: block; padding: 0.125rem 0; font-size: 0.85rem; color: rgb(0 0 0 / 0.7); }
.help-toc a:hover { color: var(--color-primary); }
.help-toc .toc-sub { margin-left: 0.75rem; }

/* Public bid page (templates/bids/form.html, base_public.html): the same tokens and components with the
   Reflow Hub brand and no shell (DESIGN.md "Public bid page") */
.bid-container { max-width: 1100px; margin: 0 auto; }
.bid-header { margin-bottom: 1.5rem; }
.bid-header h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.bid-header .meta { font-size: 0.875rem; color: var(--color-subtle); margin-top: 0.25rem; }
.bid-header .meta a { color: var(--color-primary); text-decoration: underline; }

.summary-bar {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1rem;
    margin-bottom: 1rem;
}
.summary-item {
    background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card);
    box-shadow: var(--shadow-card); padding: 1rem 1.25rem;
}
.summary-item .summary-label { font-size: 0.6875rem; font-weight: 600; color: var(--color-subtle); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.375rem; }
.summary-item .summary-value { font-size: 1.5rem; font-weight: 700; color: var(--color-text); letter-spacing: -0.02em; line-height: 1.1; }

.make-tabs {
    display: flex; gap: 0.375rem; flex-wrap: wrap;
    margin-bottom: 1rem;
}
.make-tab {
    background: var(--color-card); border: 1px solid var(--color-line-strong);
    border-radius: 20px; padding: 0.35rem 0.85rem; font-size: 0.825rem;
    font-weight: 500; cursor: pointer; transition: all 0.2s;
    color: var(--color-text);
}
.make-tab:hover { border-color: var(--color-accent); color: var(--color-accent); }
.make-tab.active { background: var(--color-accent); color: white; border-color: var(--color-accent); }

.bid-table-wrap {
    background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-card);
    box-shadow: var(--shadow-card); overflow: hidden; max-height: 65vh; overflow-y: auto;
}
.bid-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.bid-table thead th {
    background: var(--color-bg); color: var(--color-subtle); text-align: left;
    font-weight: 500; font-size: 0.8125rem; padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--color-line);
    position: sticky; top: 0; z-index: 2;
}
.bid-table tbody td { padding: 0.5rem 0.75rem; border-bottom: 1px solid rgba(0,0,0,0.04); vertical-align: middle; }
.bid-table tbody tr:hover { background: color-mix(in srgb, var(--color-primary) 4%, transparent); }
.bid-table .price-input {
    width: 100px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-btn);
    padding: 0.3rem 0.5rem; font-size: 0.85rem; text-align: right;
}
.bid-table .price-input:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px var(--color-tint); }
.bid-table .subtotal { font-weight: 600; color: var(--color-text); min-width: 80px; text-align: right; }

.bid-actions {
    display: flex; justify-content: flex-end; gap: 0.75rem;
    margin-top: 1.25rem; padding: 0 0.25rem;
}

.csv-actions {
    display: flex; gap: 0.5rem; margin-bottom: 0.75rem;
}
.btn-csv {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: var(--color-card); border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-btn); padding: 0.4rem 0.75rem; font-size: 0.8rem;
    font-weight: 500; cursor: pointer; color: var(--color-text);
    transition: all 0.2s;
}
.btn-csv:hover { border-color: var(--color-accent); color: var(--color-accent); }

.csv-toast {
    position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
    background: #262626; color: white; padding: 0.6rem 1.25rem;
    border-radius: var(--radius-card); font-size: 0.85rem; font-weight: 500;
    z-index: 100; opacity: 0; transition: opacity 0.3s;
    pointer-events: none;
}
.csv-toast.show { opacity: 1; }

.mode-toggle { display: flex; gap: 0.5rem; margin-bottom: 1rem; }
.mode-btn {
    background: var(--color-card); border: 1px solid var(--color-line-strong); border-radius: var(--radius-btn);
    padding: 0.45rem 0.9rem; font-size: 0.85rem; font-weight: 600; cursor: pointer;
    color: var(--color-text); transition: all 0.2s;
}
.mode-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.mode-btn.active { background: var(--color-accent); color: white; border-color: var(--color-accent); }
.mode-hint { font-size: 0.8rem; color: var(--color-subtle); margin-bottom: 1rem; }
.totals-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.totals-table th { background: var(--color-bg); color: var(--color-subtle); font-weight: 500; font-size: 0.8125rem; padding: 0.625rem 0.75rem; text-align: left; border-bottom: 1px solid var(--color-line); }
.totals-table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid rgba(0,0,0,0.04); vertical-align: middle; }
.totals-table .total-input { width: 140px; border: 1px solid var(--color-line-strong); border-radius: var(--radius-btn); padding: 0.35rem 0.5rem; font-size: 0.9rem; text-align: right; }
.totals-table .total-input:focus { border-color: var(--color-accent); outline: none; box-shadow: 0 0 0 3px var(--color-tint); }

.no-rate-warning {
    background: color-mix(in srgb, var(--color-warning) 8%, var(--color-card));
    border: 1px solid color-mix(in srgb, var(--color-warning) 40%, transparent); border-radius: var(--radius-card);
    padding: 1rem 1.25rem; margin-bottom: 1rem; font-size: 0.875rem; color: var(--color-warning);
}

.bid-success {
    text-align: center; padding: 3rem 1rem;
}
.bid-success h3 { color: var(--color-success); font-weight: 700; }

/* ---- Mobile card layout ---- */
@media (max-width: 640px) {
    .bid-header { margin-bottom: 1rem; }

    .csv-actions { margin-bottom: 0.5rem; }
    .btn-csv { font-size: 0.75rem; padding: 0.35rem 0.6rem; }

    /* Summary: 2x2 cards, sticky at the top */
    .summary-bar {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
        position: sticky;
        top: 0;
        z-index: 10;
        padding: 0.5rem 0;
        background: var(--color-bg);
    }
    .summary-item { padding: 0.75rem 1rem; }
    .summary-item .summary-value { font-size: 1.1rem; }

    /* Horizontal-scroll filter tabs */
    .make-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .make-tabs::-webkit-scrollbar { display: none; }
    .make-tab { flex-shrink: 0; }

    /* Let page scroll naturally */
    .bid-table-wrap {
        max-height: none;
        overflow: visible;
    }

    /* Transform table rows → cards */
    .bid-table thead { display: none; }
    .bid-table, .bid-table tbody { display: block; }
    .bid-table tbody tr {
        display: grid;
        grid-template-columns: auto auto 1fr auto;
        grid-template-rows: auto auto;
        padding: 0.75rem 0.25rem;
        border-bottom: 1px solid rgba(0,0,0,0.06);
        row-gap: 0.35rem;
        column-gap: 0.5rem;
        align-items: center;
    }
    .bid-table tbody tr:hover { background: none; }
    .bid-table td { padding: 0; border: none; }

    /* Row 1: Make · Model/Storage — full width */
    .bid-table td:nth-child(1) {
        grid-column: 1 / -1; grid-row: 1;
        font-weight: 600; font-size: 0.9rem;
    }
    .bid-table td:nth-child(1)::after {
        content: ' \00b7  ' attr(data-model);
        font-weight: 400;
    }
    /* Model cell hidden (shown via ::after above) */
    .bid-table td:nth-child(2) { display: none; }

    /* Row 2: Grade | Qty | Price | Subtotal — all on one row */
    .bid-table td:nth-child(3) { grid-column: 1; grid-row: 2; }
    .bid-table td:nth-child(4) {
        grid-column: 2; grid-row: 2;
        font-weight: 600; font-size: 0.8rem;
        color: var(--color-subtle);
    }
    .bid-table td:nth-child(4)::before {
        content: '\00d7';
    }
    .bid-table td:nth-child(5) { grid-column: 3; grid-row: 2; }
    .bid-table .price-input {
        width: 100%; padding: 0.4rem 0.5rem;
        font-size: 0.85rem; border-radius: var(--radius-btn);
    }
    .bid-table td:nth-child(6) {
        grid-column: 4; grid-row: 2;
        align-self: center; min-width: 60px;
        font-size: 0.85rem;
    }

    /* Sticky submit button */
    .bid-actions {
        position: sticky; bottom: 0;
        background: var(--color-card, white);
        padding: 0.75rem 0.25rem;
        border-top: 1px solid rgba(0,0,0,0.08);
        box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
        z-index: 10;
    }
    .bid-actions .btn { width: 100%; padding: 0.75rem; font-size: 1rem; }
}

/* ── Charts (DESIGN.md "Charts", 2026-10-10) ──────────────────────────────────────────────────────────
   The chart palette, validated with the dataviz validator on the white card: six categorical slots that
   static/js/charts.js assigns by entity in this fixed order (the plum first: Apple, the awarded buyer, the
   chosen month), a four-step plum ramp for magnitude, a five-step plum ramp for the ordered grades A to E,
   and the de-emphasis grey. A page script never sets a colour; it names the entity's slot. */
:root {
    --chart-1: #872b4e;
    --chart-2: #2f6fa8;
    --chart-3: #c47f17;
    --chart-4: #2a8c6e;   /* also the positive sign */
    --chart-5: #5e55b8;
    --chart-6: #c0552f;   /* also the negative sign */
    --chart-grey: #c2c2c2;
    --chart-seq-1: #c98aa7; --chart-seq-2: #a85b7f; --chart-seq-3: #872b4e; --chart-seq-4: #5a1b33;
    --chart-ord-1: #4f1a2e; --chart-ord-2: #872b4e; --chart-ord-3: #a0527a; --chart-ord-4: #b97aa0; --chart-ord-5: #cf9fbd;
}

/* The chart card's title row: the title left, the Table toggle (added by charts.js) right */
.chart-card .chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.chart-card .chart-head .chart-title {
    margin-bottom: 0;
}

.chart-card .chart-note {
    font-size: 0.75rem;
    color: var(--color-subtle);
    margin-top: 0.625rem;
}

.chart-wrapper.chart-short {
    height: 200px;
}

/* The legend: chips under the plot, one per series, the swatch in the mark's shape; a click hides the series */
.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-top: 0.625rem;
}

.chart-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-subtle);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.chart-chip.is-off {
    opacity: 0.45;
    text-decoration: line-through;
}

.chart-chip .swatch {
    display: inline-block;
    background: var(--c);
    flex: none;
}

.chart-chip .swatch.line { width: 14px; height: 2px; border-radius: 1px; }
.chart-chip .swatch.rect { width: 10px; height: 10px; border-radius: 2px; }
.chart-chip .swatch.dot { width: 9px; height: 9px; border-radius: 50%; }
.chart-chip .swatch.diamond { width: 8px; height: 8px; border-radius: 1px; transform: rotate(45deg); }
.chart-chip .swatch.triangle {
    width: 0;
    height: 0;
    background: none;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 9px solid var(--c);
}

/* The table view of a chart (the Table toggle): the same data as rows, in place of the plot */
.chart-card .chart-table {
    display: none;
    max-height: 360px;
    overflow: auto;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-btn);
}

.chart-card.show-table .chart-wrapper,
.chart-card.show-table .chart-legend,
.chart-card.show-table .chart-subtitle,
.chart-card.show-table .chart-note {
    display: none;
}

.chart-card.show-table .chart-table {
    display: block;
}

/* The stat tile's trend: a sparkline in the de-emphasis grey with the current period in the plum */
.kpi-card .kpi-spark {
    margin-top: 0.5rem;
    height: 28px;
}

.kpi-card .kpi-spark svg {
    display: block;
    width: 100%;
    height: 28px;
    overflow: visible;
}

/* Segmented control: a row of small buttons sharing one field-line border, the active one filled with the
   plum (the public bid page's mode toggle, the Price history grade picker, the Profit page's mode) */
.segmented {
    display: inline-flex;
    height: 2rem;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-btn);
    background: var(--color-card);
    overflow: hidden;
}

.segmented button {
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0 0.75rem;
    border: 0;
    border-right: 1px solid var(--color-line-strong);
    background: none;
    color: var(--color-text);
    cursor: pointer;
    white-space: nowrap;
}

.segmented button:last-child {
    border-right: 0;
}

.segmented button:hover {
    background: var(--color-tint);
}

.segmented button.active {
    background: var(--color-primary);
    color: #ffffff;
}

/* a choice not open yet (the RFQ Price tab's With bids before any bid): muted, no hover */
.segmented button:disabled {
    color: var(--color-faint);
    background: none;
    cursor: not-allowed;
}

/* A table card's toolbar beside the DataTables search: filters, then the downloads as ghost buttons */
.table-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.table-toolbar .select {
    font-size: 0.8125rem;
    width: auto;        /* DaisyUI's select is full-width, which in a flex row would take the whole toolbar */
    min-width: 9rem;
    flex: 0 0 auto;
}

/* An inline bar in a table cell: the number stays the text, the bar is a tint behind it */
.cell-bar {
    position: relative;
    display: block;
    min-width: 7rem;
}

.cell-bar .bar {
    position: absolute;
    left: 0;
    top: 0.1875rem;
    bottom: 0.1875rem;
    border-radius: 2px;
    background: color-mix(in srgb, var(--chart-1) 18%, transparent);
}

.cell-bar .bar.negative {
    background: color-mix(in srgb, var(--chart-6) 22%, transparent);
}

.cell-bar .num {
    position: relative;
    padding: 0 0.375rem;
}

@media (max-width: 991px) {
    .chart-wrapper.chart-short {
        height: 160px;
    }

    .chart-wrapper.chart-taller {
        height: 300px;
    }

    .segmented button {
        padding: 0 0.625rem;
    }
}

/* The DataTables layout rows (its Tailwind renderer makes a two-column grid, which halves the room a toolbar
   has): a flex row, the start cell left, the end cell right, both as wide as their content */
div.dt-container div.dt-layout-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

div.dt-container div.dt-layout-cell {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

div.dt-container div.dt-layout-end {
    justify-content: flex-end;
    margin-left: auto;
}

/* Master prices: the grid (pricing/view.html, static/js/master-prices.js). A price is a small right-aligned
   field; an unsaved change carries the plum tint, a value that is not a price the error line; the save bar
   sticks to the bottom of the window while anything is unsaved. */
.price-grid .price-cell {
    width: 5.5rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.price-grid .price-cell.is-changed {
    background: var(--color-tint);
    border-color: var(--color-primary);
}

.price-grid .price-cell.is-invalid {
    border-color: var(--color-error);
    color: var(--color-error);
}

.price-grid .active-cell.is-changed {
    outline: 2px solid var(--color-tint-strong);
    outline-offset: 2px;
}

/* Channels (pricing/channels.html, static/js/channels.js): a value of the channel's own (an override on the rule)
   carries a bar in the info colour at its left; a SKU not offered shows the rule's value faded; RHEX's own live price
   sits under the market in the same small type, amber where it differs from the value in the grid. */
.price-grid .price-cell.is-override,
.channel-grid span.is-override {
    box-shadow: inset 3px 0 0 var(--color-info);
}

.price-grid .price-cell.is-hidden,
.channel-grid span.is-hidden {
    opacity: 0.45;
}

.price-grid .offered-cell.is-changed {
    outline: 2px solid var(--color-tint-strong);
    outline-offset: 2px;
}

.price-market.price-rhex.is-off { color: var(--color-warning); }

.rule-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}

.rule-chip-x {
    border: 0;
    background: none;
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0 0.1rem;
}

/* Save and price (?focus=): the SKU being priced, among the rows it is compared with */
.price-grid tbody tr.is-focus > td {
    background: var(--color-tint);
}

.adjust-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}

.grid-savebar {
    position: sticky;
    bottom: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-card);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-card);
    box-shadow: 0 -4px 12px rgb(0 0 0 / 0.06);
    font-size: 0.875rem;
}

/* A card header that carries controls at its right (the Price shape page's family view) */
.card-header.card-header-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* The family view: generations down, tiers and storage across; a price in an open issue in the error colour */
.family-table th,
.family-table td {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.family-table th:first-child,
.family-table td:first-child {
    text-align: left;
}

.family-table thead tr:first-child th {
    border-bottom: 0;
    text-align: center;
}

.family-table .family-group {
    border-left: 1px solid var(--color-line);
}

.family-table .family-flag {
    color: var(--color-error);
    font-weight: 600;
    cursor: help;
}

/* ── The Lots pages against the market (LOTS_REDESIGN.md, 2026-10-13) ──────────────────────────────────
   The segments take the validated categorical slots (DESIGN.md "Charts") rather than colours of their own:
   trade-in buy the plum, wholesale buy the amber, wholesale sell the steel, retail sell the green; every
   segment mark also has its own shape (diamond, band, triangle, dot) and a direct label, since amber and
   green sit close for protanopia. The grades A to E are the ordinal plum ramp, white ink on A to C. */
:root {
    --chart-seg-tradein: var(--chart-1);
    --chart-seg-wbuy: var(--chart-3);
    --chart-seg-wsell: var(--chart-2);
    --chart-seg-retail: var(--chart-4);
    --chart-cost: var(--color-base-content);
}

.lots-filters .filter-note {
    flex: 1 1 18rem;
    align-self: center;
    font-size: 0.75rem;
    color: var(--color-subtle);
    text-align: right;
    margin: 0;
}

.lots-filters .segmented { height: 2rem; }

/* A card's head with a title, a count, a sentence under it and its actions at the right */
.card-intro {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem 0.75rem;
}

.card-intro .card-title { font-size: 1rem; font-weight: 600; margin: 0; }
.card-intro .card-count { font-weight: 400; color: var(--color-subtle); margin-left: 0.25rem; }
.card-intro .card-desc { font-size: 0.8125rem; color: var(--color-subtle); margin: 0.125rem 0 0; }
.card-intro .card-actions { display: flex; gap: 0.5rem; align-items: center; }

.card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--color-line);
    font-size: 0.8125rem;
}

.card-footnote {
    font-size: 0.75rem;
    color: var(--color-subtle);
    padding: 0.75rem 1.25rem;
    margin: 0;
    border-top: 1px solid var(--color-line);
}

.chart-card .chart-subtitle {
    font-size: 0.8125rem;
    color: var(--color-subtle);
    margin: -0.5rem 0 0.75rem;
}

.chart-card.mb-6 { margin-bottom: 1.5rem; }

/* Two cards side by side, stacking below 1064 px */
.two-up {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.two-up > .chart-card { margin: 0; }

@media (max-width: 1064px) {
    .two-up { grid-template-columns: minmax(0, 1fr); }
}

/* Stat blocks under a chart: a small label and a figure on the page grey */
.stat-blocks {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

.stat-block {
    background: var(--color-bg);
    border-radius: var(--radius-btn);
    padding: 0.625rem 0.875rem;
}

.stat-block .stat-label { font-size: 0.75rem; color: var(--color-subtle); }
.stat-block { min-width: 0; }
.stat-block .stat-value { font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; white-space: normal; }  /* DaisyUI's .stat-value is nowrap */
.stat-block .stat-note { font-size: 0.75rem; color: var(--color-subtle); }

/* Stats in a row under a chart, without a background (the lot page's footers) */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.75rem 1.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-line);
}

.stat-row .stat-label { font-size: 0.75rem; color: var(--color-subtle); }
.stat-row .stat-value { font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-row .stat-note { font-size: 0.75rem; color: var(--color-subtle); }

/* Up and down: the positive and negative signs of the chart palette, always with an arrow and a sign */
.up { color: var(--chart-4); }
.down { color: var(--chart-6); }

/* Range lanes (static/js/lanes.js): one lane per lot or buyer on a shared money axis, built in HTML because
   Chart.js draws neither a range band nor a dot and whisker; one treatment on both Lots pages. */
.lanes { position: relative; font-variant-numeric: tabular-nums; }
.lanes .lane {
    display: grid;
    grid-template-columns: 10rem minmax(0, 1fr);
    align-items: center;
    min-height: 4.25rem;
    border-bottom: 1px solid var(--color-line);
}
.lanes .lane.compact { min-height: 2.75rem; }
.lanes .lane-label { font-size: 0.875rem; font-weight: 600; padding-right: 0.75rem; line-height: 1.25; }
.lanes .lane-label .cell-note { white-space: normal; }
.lanes .lane-plot { position: relative; height: 100%; min-height: inherit; }
.lanes .lane-axis { display: grid; grid-template-columns: 10rem minmax(0, 1fr); height: 1.5rem; }
.lanes .lane-axis .lane-plot { min-height: 1.5rem; }
.lanes .tick-label {
    position: absolute; top: 0.25rem; transform: translateX(-50%);
    font-size: 0.6875rem; color: var(--color-subtle); white-space: nowrap;
}
.lanes .gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-line); }
.lanes .band, .lanes .band-mid {
    position: absolute; top: 50%; height: 1.25rem; transform: translateY(-50%);
    background: color-mix(in srgb, var(--chart-seg-wbuy) 18%, transparent);
    border-radius: 4px;
}
.lanes .band-mid { background: color-mix(in srgb, var(--chart-seg-wbuy) 45%, transparent); border-radius: 0; }
.lanes .band-median {
    position: absolute; top: 50%; height: 1.75rem; width: 3px; transform: translate(-50%, -50%);
    background: color-mix(in srgb, var(--chart-seg-wbuy) 70%, black);
}
.lanes .backdrop {
    position: absolute; top: 0; bottom: 0;
    background: color-mix(in srgb, var(--chart-seg-wbuy) 8%, transparent);
}
.lanes .backdrop.mid { background: color-mix(in srgb, var(--chart-seg-wbuy) 14%, transparent); }
.lanes .vline { position: absolute; top: 0; bottom: 0; width: 2px; transform: translateX(-50%); }
.lanes .vline.cost { background: var(--chart-cost); }
.lanes .vline.median { width: 1px; background: color-mix(in srgb, var(--chart-seg-wbuy) 70%, black); }
.lanes .vline.walkaway { width: 0; border-left: 2px dotted var(--color-primary); }
.lanes .mark {
    position: absolute; top: 50%; transform: translate(-50%, -50%);
    width: 0.625rem; height: 0.625rem;
}
.lanes .mark.diamond { transform: translate(-50%, -50%) rotate(45deg); border-radius: 1px; }
.lanes .mark.dot { border-radius: 50%; }
.lanes .mark.triangle {
    width: 0; height: 0; background: none !important;
    border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid var(--c);
}
.lanes .mark.seg-tradein { background: var(--chart-seg-tradein); --c: var(--chart-seg-tradein); }
.lanes .mark.seg-wsell { background: var(--chart-seg-wsell); --c: var(--chart-seg-wsell); }
.lanes .mark.seg-retail { background: var(--chart-seg-retail); --c: var(--chart-seg-retail); }
/* the RFQ page's buyers by shape, in ink (● ▲ ■ ◆ in the order they returned bids) */
.lanes .mark.square { border-radius: 1px; }
.lanes .mark.seg-ink { background: var(--color-base-content); --c: var(--color-base-content); }
.lanes .whisker {
    position: absolute; top: 50%; height: 0; border-top: 1px solid var(--color-base-content);
}
.lanes .whisker::before, .lanes .whisker::after {
    content: ''; position: absolute; top: -0.375rem; height: 0.75rem; border-left: 1px solid var(--color-base-content);
}
.lanes .whisker::before { left: 0; }
.lanes .whisker::after { right: 0; }
.lanes .whisker.faint, .lanes .whisker.faint::before, .lanes .whisker.faint::after { border-color: var(--color-faint); }
.lanes .bid-dot {
    position: absolute; top: 50%; width: 0.75rem; height: 0.75rem; border-radius: 50%;
    transform: translate(-50%, -50%); border: 2px solid var(--color-base-content); background: var(--color-card);
}
.lanes .bid-dot.solid { background: var(--color-base-content); }
.lanes .val {
    position: absolute; font-size: 0.6875rem; color: var(--color-subtle); white-space: nowrap; transform: translateX(-50%);
}
.lanes .val.above { bottom: calc(50% + 0.875rem); font-weight: 600; color: var(--color-base-content); }
.lanes .val.below { top: calc(50% + 0.75rem); }
.lanes .val.right { transform: none; top: 50%; margin-top: -0.5rem; margin-left: 0.5rem; }
.lanes .lane-note { position: absolute; left: 0.25rem; top: 50%; transform: translateY(-50%); font-size: 0.75rem; color: var(--color-subtle); }
.lanes .lane-tops { display: grid; grid-template-columns: 10rem minmax(0, 1fr); height: 1.25rem; }
.lanes .lane-tops .lane-plot { min-height: 1.25rem; }
.lanes .lane-tops .top-label {
    position: absolute; bottom: 0.125rem; transform: translateX(-50%);
    font-size: 0.6875rem; font-weight: 600; white-space: nowrap;
}
.lanes .lane-tops .top-label.walkaway { color: var(--color-primary); }
.lanes .lane-tops.rows-2 { height: 2.375rem; }
.lanes .lane-tops.rows-3 { height: 3.5rem; }
.lanes .lane-tops .top-label.row-1 { bottom: 1.25rem; }
.lanes .lane-tops .top-label.row-2 { bottom: 2.375rem; }
.lanes .val.left { transform: none; top: 50%; margin-top: -0.5rem; margin-right: 0.625rem; }
.lanes .val.right.note { font-weight: 400; }

@media (max-width: 640px) {
    .lanes .lane, .lanes .lane-axis, .lanes .lane-tops { grid-template-columns: minmax(0, 1fr); }
    .lanes .lane-label { padding: 0.5rem 0 0; }
    .lanes .lane-axis > :first-child, .lanes .lane-tops > :first-child { display: none; }
}

/* The legend of the lanes: chips in the shapes of the marks */
.lane-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin-top: 0.75rem; font-size: 0.75rem; color: var(--color-subtle); }
.lane-legend span { display: inline-flex; align-items: center; gap: 0.375rem; }
.lane-legend i { display: inline-block; flex: none; }
.lane-legend i.cost { width: 2px; height: 0.75rem; background: var(--chart-cost); }
.lane-legend i.walkaway { width: 0; height: 0.75rem; border-left: 2px dotted var(--color-primary); }
.lane-legend i.diamond { width: 8px; height: 8px; transform: rotate(45deg); background: var(--chart-seg-tradein); }
.lane-legend i.band { width: 1.25rem; height: 0.625rem; border-radius: 2px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--chart-seg-wbuy) 18%, transparent) 25%,
        color-mix(in srgb, var(--chart-seg-wbuy) 45%, transparent) 25% 75%, color-mix(in srgb, var(--chart-seg-wbuy) 18%, transparent) 75%); }
.lane-legend i.triangle { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--chart-seg-wsell); }
.lane-legend i.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--chart-seg-retail); }
.lane-legend i.hollow { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--color-base-content); }
.lane-legend i.solid { width: 9px; height: 9px; border-radius: 50%; background: var(--color-base-content); }

/* The Table toggle hides an HTML chart (the lanes, the grade mix, the segment bars) as it hides a canvas */
.chart-card.show-table .lanes, .chart-card.show-table .lane-legend, .chart-card.show-table .stat-blocks,
.chart-card.show-table .grade-mix, .chart-card.show-table .seg-bars { display: none; }

/* The grade mix: one 100% bar a lot, units by grade on the ordinal ramp with 2 px gaps */
.grade-mix .gm-lot { margin-bottom: 1rem; }
.grade-mix .gm-head { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.8125rem; margin-bottom: 0.375rem; }
.grade-mix .gm-head b { font-weight: 600; }
.grade-mix .gm-bar { display: flex; gap: 2px; height: 1.5rem; }
.grade-mix .gm-seg {
    display: flex; align-items: center; justify-content: center; min-width: 1.25rem;
    font-size: 0.6875rem; font-weight: 600; color: #ffffff; border-radius: 2px; overflow: hidden; white-space: nowrap;
}
.grade-mix .gm-vals { display: flex; gap: 2px; margin-top: 0.25rem; }
.grade-mix .gm-vals span { min-width: 1.25rem; text-align: center; font-size: 0.6875rem; color: var(--color-subtle); font-variant-numeric: tabular-nums; }
.gm-a { background: var(--chart-ord-1); }
.gm-b { background: var(--chart-ord-2); }
.gm-c { background: var(--chart-ord-3); }
.gm-d { background: var(--chart-ord-4); color: var(--color-base-content) !important; }
.gm-e { background: var(--chart-ord-5); color: var(--color-base-content) !important; }

/* The lot across segments, a unit: a bar a segment, the cost a line across them */
.seg-bars { position: relative; font-variant-numeric: tabular-nums; padding-top: 1.25rem; }
.seg-bars .seg-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 4.5rem; align-items: center; height: 2rem; }
.seg-bars .seg-overlay { position: absolute; left: 7.5rem; right: 4.5rem; top: 0; bottom: 0; pointer-events: none; }
.seg-bars .seg-name { font-size: 0.8125rem; }
.seg-bars .seg-track { position: relative; height: 100%; }
.seg-bars .seg-bar { position: absolute; left: 0; top: 0.375rem; bottom: 0.375rem; border-radius: 0 4px 4px 0; }
.seg-bars .seg-val { position: absolute; top: 50%; transform: translateY(-50%); margin-left: 0.375rem; font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
.seg-bars .seg-bar.seg-tradein { background: var(--chart-seg-tradein); }
.seg-bars .seg-bar.seg-wbuy { background: var(--chart-seg-wbuy); }
.seg-bars .seg-bar.seg-wsell { background: var(--chart-seg-wsell); }
.seg-bars .seg-bar.seg-retail { background: var(--chart-seg-retail); }
.seg-bars .seg-cost { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--chart-cost); }
.seg-bars .seg-cost span { position: absolute; top: 0; left: 0.375rem; font-size: 0.6875rem; font-weight: 600; white-space: nowrap; }

/* How each unit got its price: one stacked bar */
.source-bar { display: flex; gap: 2px; height: 0.875rem; margin: 0.5rem 0; }
.source-bar span { border-radius: 2px; }
.source-bar .src-matched, .source-key .src-matched { background: var(--chart-1); }
.source-bar .src-inferred, .source-key .src-inferred { background: var(--chart-seq-1); }
.source-bar .src-master, .source-key .src-master { background: var(--chart-grey); }
.source-bar .src-none, .source-key .src-none { background: var(--color-line); }
.source-key { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; font-size: 0.75rem; color: var(--color-subtle); }
.source-key i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 0.375rem; vertical-align: -1px; }

.def-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem 1rem; margin-top: 1rem; }
.def-list dt { font-size: 0.75rem; color: var(--color-subtle); }
.def-list dd { margin: 0; font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .def-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* A grade's badge on the ordinal ramp, for the value tables */
.grade-chip {
    display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.125rem;
    border-radius: 3px; font-size: 0.6875rem; font-weight: 700; color: #ffffff;
}

/* The lot page: the breadcrumb, the title line's meta, the tabs */
.breadcrumb { font-size: 0.8125rem; color: var(--color-subtle); margin-bottom: 0.5rem; }
.breadcrumb a { color: var(--color-primary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.title-line { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
.title-line .page-title { margin: 0; }
.title-line .title-meta { font-size: 0.8125rem; color: var(--color-subtle); }
.lot-tabs { margin-bottom: 1.25rem; }
.lot-tab-panel[hidden] { display: none; }
.valuation-controls { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-bottom: 1rem; }
.valuation-controls .filter-note { flex: 1 1 18rem; font-size: 0.75rem; color: var(--color-subtle); text-align: right; margin: 0; }
.market-banner { margin-bottom: 1rem; }

/* Value tables: numbers right and tabular, a figure's context in a note under it */
.value-table td.num, .value-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.value-table .dash { color: var(--color-faint); }

/* Skeletons while a figure loads (once; a refetch keeps the old values) */
.skeleton-text { display: inline-block; min-width: 4rem; height: 0.875em; border-radius: 3px; background: var(--color-line); }
.lanes .mark.seg-wbuy { background: var(--chart-seg-wbuy); --c: var(--chart-seg-wbuy); }

.lines-value-table td:first-child { white-space: normal; min-width: 12rem; }
.lots-table td:first-child { white-space: normal; }

.lines-value-table th, .lines-value-table td { padding-left: 0.5rem; padding-right: 0.5rem; }
.stat-block .stat-value .stat-line { display: block; }
.lanes .lane.tall { min-height: 5.5rem; }
.lanes .lane.tall .lane-plot { padding-top: 1.25rem; }
.lanes .val.above.high { bottom: calc(50% + 1.875rem); }

/* ── The Dashboard (DASHBOARD_REDESIGN.md, 2026-10-14) ─────────────────────────────────────────────────────────
   The Lots pages' components (the card intro, two-up rows, the filter note, the up and down signs) plus what the
   charts here need: a hollow chip (an expected value), the forecast's dashed chip, a tile's second line, controls that
   are segmented on a desk and selects on a phone, the cycle in bidding as one line, and margin by grade as bars with
   whiskers in HTML (Chart.js draws no whisker on a bar). */
.chart-chip .swatch.hollow { background: transparent; border: 2px solid var(--c); }
.chart-chip .swatch.forecast { width: 10px; height: 10px; border-radius: 2px; background: rgba(0, 0, 0, 0.035); border: 1px dashed var(--color-subtle); }

/* six tiles to a row: a label that takes two lines keeps the values level */
@media (min-width: 1280px) { .dash-page .kpi-card .kpi-label { min-height: 3em; } }
.kpi-card .kpi-sub { display: block; margin-top: 0.125rem; font-size: 0.75rem; color: var(--color-subtle); }
.kpi-card .kpi-vs { color: var(--color-subtle); }
.kpi-card .kpi-change .dash { color: var(--color-faint); }

.filter-bar .filter-note {
    flex: 1 1 18rem;
    align-self: center;
    font-size: 0.75rem;
    color: var(--color-subtle);
    text-align: right;
    margin: 0;
}

.dash-filters .seg-narrow { display: none; }
@media (max-width: 640px) {
    .dash-filters .seg-wide { display: none; }
    .dash-filters .seg-narrow { display: block; }
    .filter-bar .filter-note { text-align: left; flex: none; }   /* stacked, a flex basis would be its height */
}

.segmented.seg-sm { height: 1.75rem; }
.segmented.seg-sm button { font-size: 0.75rem; padding: 0 0.625rem; }
.chart-card .chart-head .chart-actions { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* The cycle in bidding: one line, wrapping on a phone */
.current-strip-body {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 1rem;
    padding: 0.75rem 1.25rem; font-size: 0.875rem;
}
.current-strip .current-cycle { font-weight: 600; }
.current-strip .current-facts { color: var(--color-subtle); }
.current-strip .current-margin { font-variant-numeric: tabular-nums; }
.current-strip .current-margin b { font-weight: 600; }
.current-strip .current-link { margin-left: auto; font-size: 0.8125rem; }

/* Units by cycle: on a phone the plot keeps the last cycles in view and scrolls sideways inside its card */
.chart-scroll { overflow-x: auto; overflow-y: hidden; }
.chart-card.show-table .chart-scroll { display: none; }

/* Margin a unit by grade: a bar from zero (the plum, the down colour below zero), a whisker of one std dev */
.margin-bars { position: relative; font-variant-numeric: tabular-nums; }
.margin-bars .mb-row, .margin-bars .mb-zero-row {
    display: grid; grid-template-columns: 5rem minmax(0, 1fr); align-items: center; height: 2.5rem;
}
.margin-bars .mb-zero-row { position: absolute; inset: 0; height: auto; pointer-events: none; }
.margin-bars .mb-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--color-subtle); }
.margin-bars .mb-track { position: relative; height: 100%; }
.margin-bars .mb-bar {
    position: absolute; top: 0.75rem; bottom: 0.75rem; background: var(--chart-1); border-radius: 0 3px 3px 0;
}
.margin-bars .mb-bar.negative { background: var(--chart-6); border-radius: 3px 0 0 3px; }
.margin-bars .mb-whisker { position: absolute; top: 50%; height: 0; border-top: 1.5px solid var(--color-base-content); }
.margin-bars .mb-whisker::before, .margin-bars .mb-whisker::after {
    content: ''; position: absolute; top: -0.3125rem; height: 0.625rem; border-left: 1.5px solid var(--color-base-content);
}
.margin-bars .mb-whisker::before { left: 0; }
.margin-bars .mb-whisker::after { right: 0; }
.margin-bars .mb-val {
    position: absolute; top: 50%; transform: translateY(-50%); margin-left: 0.5rem; font-size: 0.75rem; font-weight: 600;
    white-space: nowrap;
}
.margin-bars .mb-val span { font-weight: 400; color: var(--color-subtle); margin-left: 0.25rem; }
.margin-bars .mb-zero { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--color-line-strong); }
.chart-card.show-table .margin-bars { display: none; }

/* The breakdown and the review: the name column takes the slack, a figure's note under it */
.breakdown-table td:first-child, .review-table td:first-child { white-space: normal; min-width: 11rem; }
.breakdown-table .share-cell { min-width: 8rem; }
.breakdown-table tfoot td { font-weight: 600; color: var(--color-base-content); }

/* ---------------------------------------------------------------------------------------------------------------
   Price history (PRICE_HISTORY_REDESIGN.md, 2026-10-14): the device-grade list and each device-grade's page
   --------------------------------------------------------------------------------------------------------------- */
.prices-filters .prices-search { width: 18rem; }
.prices-filters .seg-narrow { display: none; }
@media (max-width: 640px) {
    .prices-filters .seg-wide { display: none; }
    .prices-filters .seg-narrow { display: block; }
    .prices-filters .prices-search { width: 100%; }
}
.badge-grade-word { text-transform: none; }
.badge-grade-working { background: #e3f0f7; color: #2a6f97; }
.badge-grade-damaged { background: #fde8dd; color: #9e4a2a; }
.kpi-card .kpi-unit { font-size: 0.875rem; font-weight: 500; color: var(--color-subtle); }
.prices-table td { white-space: nowrap; }
.prices-table td:first-child { white-space: normal; }
.prices-table tbody tr.row-link { cursor: pointer; }
.prices-table tbody tr.row-link:hover > td { background: var(--color-tint); }
.prices-table .dash, .prices-page .dash { color: var(--color-faint); }
/* paid against a different forward price: a question, not a loss (the ochre ink, never the down colour) */
.paid-differs { color: var(--color-warning); font-weight: 600; }

/* quick views: pill toggles under the card's title, one active, each with its count */
.quick-views { display: flex; flex-wrap: wrap; gap: 0.375rem; padding: 0 1.25rem 0.875rem; }
.quick-view {
    display: inline-flex; align-items: center; gap: 0.375rem; height: 1.75rem; padding: 0 0.75rem;
    border: 1px solid var(--color-line-strong); border-radius: 999px; background: var(--color-base-100);
    font-size: 0.75rem; font-weight: 500; color: var(--color-base-content); cursor: pointer;
}
.quick-view:hover { background: var(--color-tint); }
.quick-view.active { border-color: var(--color-primary); color: var(--color-primary); background: var(--color-tint); }
.quick-view .quick-count { color: var(--color-subtle); font-variant-numeric: tabular-nums; }
.quick-view.active .quick-count { color: var(--color-primary); }

/* the check: one pill a row, the first flag that applies */
.check-pill {
    display: inline-block; padding: 0.125rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600;
    white-space: nowrap;
}
.check-pill.check-down { color: var(--chart-6); background: color-mix(in srgb, var(--chart-6) 10%, transparent); }
.check-pill.check-amber { color: var(--color-warning); background: color-mix(in srgb, var(--color-warning) 10%, transparent); }
.check-pill.check-neutral { color: var(--color-base-content); background: var(--color-base-200); }

/* the sparkline in a cell: 88 x 26, the grey sale line, the latest point a plum dot, the market's middle half a wash */
.spark-cell { display: block; overflow: visible; }
.spark-cell .spark-line { fill: none; stroke: var(--chart-grey); stroke-width: 1.5; stroke-linejoin: round; }
.spark-cell .spark-point { fill: var(--chart-grey); }
.spark-cell .spark-dot { fill: var(--chart-1); }
.spark-cell .spark-band { fill: color-mix(in srgb, var(--chart-seg-wbuy) 22%, transparent); stroke: none; }

.prices-page .empty-state { padding: 2.5rem 1.25rem; text-align: center; color: var(--color-subtle); font-size: 0.875rem; }
.prices-page .found-list { list-style: none; padding: 0; margin: 0; font-size: 0.875rem; display: grid; gap: 0.25rem; }
.shared-callout .card-body { padding: 1rem 1.25rem; gap: 0.375rem; }

@media (max-width: 640px) {
    .prices-table .hide-sm { display: none; }
}

/* the device-grade page: the grade switch is links (a grade is its own address) in the segmented control's dress */
.segmented .seg-link {
    display: inline-flex; align-items: center; font-size: 0.8125rem; font-weight: 500; padding: 0 0.75rem;
    border-right: 1px solid var(--color-line-strong); color: var(--color-text); text-decoration: none; white-space: nowrap;
}
.segmented .seg-link:last-child { border-right: 0; }
.segmented .seg-link:hover { background: var(--color-tint); }
.segmented .seg-link.active { background: var(--color-primary); color: #ffffff; }
.price-actions .seg-narrow { display: none; }
@media (max-width: 640px) {
    .price-actions .seg-wide { display: none; }
    .price-actions .seg-narrow { display: block; }
}
.series-toggles { display: inline-flex; flex-wrap: wrap; gap: 0.375rem; }
.series-toggles .quick-view:disabled { opacity: 0.45; cursor: default; }
.price-page .skeleton-text { color: var(--color-faint); }
.price-page .muted-figure { color: var(--color-subtle); }
.price-page .kpi-card .kpi-vs { font-size: 0.75rem; font-weight: 500; }

/* bid as a share of the market: a lane from 90% to 110%, a hairline at 100%, a hollow dot at the mean and a whisker
   of one std dev */
.buyers-table td { white-space: nowrap; }
.buyers-table .ratio-cell { min-width: 9rem; }
.ratio-lane { position: relative; height: 0.875rem; margin: 0.25rem 0 0.125rem; background: var(--color-base-200); border-radius: 2px; }
.ratio-lane .rl-hundred { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--color-line-strong); }
.ratio-lane .rl-whisker { position: absolute; top: 50%; height: 0; border-top: 1.5px solid var(--color-base-content); }
.ratio-lane .rl-dot {
    position: absolute; top: 50%; width: 0.625rem; height: 0.625rem; margin: -0.3125rem 0 0 -0.3125rem; border-radius: 50%;
    background: var(--color-base-100); border: 2px solid var(--color-base-content);
}

/* the grade ladder: the grade shown tinted */
.ladder-table td { white-space: nowrap; }
.ladder-table tr.ladder-current > td { background: color-mix(in srgb, var(--color-primary) 4%, transparent); }

/* market evidence: four segments in a hairline grid, each with its glyph, median and counts */
.segment-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--color-line);
    border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.segment-strip:empty { display: none; }
.segment-cell { background: var(--color-base-100); padding: 0.75rem 1.25rem; min-width: 0; }
.segment-cell .segment-name { display: flex; align-items: center; gap: 0.375rem; font-size: 0.75rem; color: var(--color-subtle); }
.segment-cell .segment-value { font-size: 1.125rem; font-weight: 600; margin-top: 0.125rem; }
.segment-cell .segment-note { font-size: 0.75rem; color: var(--color-subtle); }
.seg-glyph { display: inline-block; width: 8px; height: 8px; }
.seg-glyph.seg-trade_in_buy { background: var(--chart-seg-tradein); transform: rotate(45deg); }
.seg-glyph.seg-wholesale_buy { background: var(--chart-seg-wbuy); border-radius: 1px; }
.seg-glyph.seg-wholesale_sell { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-bottom: 9px solid var(--chart-seg-wsell); }
.seg-glyph.seg-retail_sell { background: var(--chart-seg-retail); border-radius: 50%; }
.evidence-manual { padding: 0.75rem 0 0; }
.evidence-subtitle { font-size: 0.875rem; font-weight: 600; margin: 0 1.25rem 0.5rem; }
.evidence-manual .obs-note { white-space: normal; min-width: 10rem; }
.obs-pager { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1.25rem; font-size: 0.8125rem;
    color: var(--color-subtle); }
@media (max-width: 640px) {
    .segment-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* a wide table that must fit its card: tighter cell sides and headers that may take two lines */
.tight-table th, .tight-table td { padding-left: 0.5rem; padding-right: 0.5rem; }
.tight-table th:first-child, .tight-table td:first-child { padding-left: 1.25rem; }
.tight-table th:last-child, .tight-table td:last-child { padding-right: 1.25rem; }
.tight-table thead th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
.prices-table td:first-child { min-width: 9.5rem; }
.ladder-table thead th { min-width: 3.5rem; }

/* the device-grade page's tiles: as many to a row as fit at 170 px */
.kpi-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem; }
.kpi-fit > [hidden] { display: none; }
@media (max-width: 640px) { .kpi-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.price-page #evidenceCard .card-intro > div:first-child { flex: 1 1 24rem; min-width: 0; }
.ladder-table .step-flag { color: var(--color-warning); font-weight: 600; }
@media (max-width: 1279px) { .prices-table .hide-lg { display: none; } }
@media (max-width: 640px) {
    .price-page .chart-head { flex-wrap: wrap; gap: 0.5rem; }
    .price-page .chart-head .chart-actions { width: 100%; }
    .prices-table td:first-child { min-width: 7.5rem; }
}

/* ---------------------------------------------------------------------------------------------------------------
   Profit (PROFIT_REDESIGN.md, 2026-10-14): one awarded cycle. The Dashboard's tiles and two-up rows, the Lots pages'
   range lanes, Price history's check pills and ratio lane, and what this page adds: the waterfall, the estimate lane in
   a cell, the payment pills, the cost list.
   --------------------------------------------------------------------------------------------------------------- */
.profit-filters .seg-narrow { display: none; }
@media (max-width: 640px) {
    .profit-filters .seg-wide { display: none; }
    .profit-filters .seg-narrow { display: block; }
}
@media (min-width: 1280px) { .profit-page .kpi-card .kpi-label { min-height: 3em; } }
.two-up.one-up { grid-template-columns: minmax(0, 1fr); }
.profit-page .dash { color: var(--color-faint); }
.profit-lots td:first-child, .profit-buyers td:first-child { white-space: normal; min-width: 8rem; }
.profit-lots tr.row-muted td { color: var(--color-subtle); }
.profit-lots tfoot td, .profit-grades tfoot td { font-weight: 600; color: var(--color-base-content); }
.profit-lots .est-cell { min-width: 9rem; }
.profit-lots .runner-cell .cell-note { white-space: normal; min-width: 9rem; }
.profit-lots .pay-cell { min-width: 8.5rem; }
.profit-lots .pay-cell .cell-note { white-space: normal; }
.profit-lots th, .profit-lots td, .profit-devices th, .profit-devices td { padding-left: 0.5rem; padding-right: 0.5rem; }
.profit-buyers .ratio-cell { min-width: 9rem; }
.profit-devices td:first-child { white-space: normal; min-width: 11rem; }
.profit-grades .share-cell { min-width: 9rem; }
.check-pill.check-up { color: var(--chart-4); background: color-mix(in srgb, var(--chart-4) 10%, transparent); }

/* Against estimate: the estimate's 80% range as the wholesale-buy wash, its middle half darker, the award an ink dot
   with a white ring (the range lanes' treatment, small enough for a cell) */
.est-lane { position: relative; display: block; height: 0.875rem; margin: 0.25rem 0 0.125rem; }
.est-lane .el-band, .est-lane .el-mid {
    position: absolute; top: 0.1875rem; height: 0.5rem; border-radius: 2px;
    background: color-mix(in srgb, var(--chart-seg-wbuy) 18%, transparent);
}
.est-lane .el-mid { background: color-mix(in srgb, var(--chart-seg-wbuy) 45%, transparent); border-radius: 0; }
.est-lane .el-dot {
    position: absolute; top: 50%; width: 0.625rem; height: 0.625rem; margin: -0.3125rem 0 0 -0.3125rem; border-radius: 50%;
    background: var(--color-base-content); box-shadow: 0 0 0 2px var(--color-base-100);
}

/* Bid ÷ winning: Price history's ratio lane with a solid ink dot (a real bid, not an estimate) */
.ratio-lane-ink { display: block; }
.ratio-lane .rl-dot.solid { background: var(--color-base-content); }

/* Left on the table: the award an ink tick, a grey connector from the runner-up to the best bid; four shapes */
.lanes .vline.award { background: var(--color-base-content); }
.lanes .span-line { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--color-line-strong); }
.lane-legend i.award { width: 2px; height: 0.75rem; background: var(--color-base-content); }
.lane-legend i.square { width: 8px; height: 8px; background: var(--chart-seg-wbuy); }

/* After direct costs: gross profit, each cost line, the contribution */
.cost-list { margin: 0; font-size: 0.875rem; }
.cost-list > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-line); }
.cost-list dd { margin: 0; font-family: var(--font-figures); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cost-list .cost-total { font-weight: 600; border-bottom: none; }
.cost-list .cost-muted { font-size: 0.75rem; border-bottom: none; padding-top: 0; }
.cost-list .cost-muted dt, .cost-list .cost-muted dd { color: var(--color-subtle); }

/* The waterfall (static/js/waterfall.js): one axis from zero, bars with a 3 px radius, thin connectors, the value
   above each bar, two-line labels under the axis (one line, abbreviated, on a phone) */
.waterfall { position: relative; font-variant-numeric: tabular-nums; }
.waterfall .wf-plot { position: relative; height: 14rem; margin: 1.5rem 0 0 3.5rem; }
.waterfall .wf-bars { position: absolute; inset: 0; }
.waterfall .wf-grid { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--color-line); }
.waterfall .wf-grid.zero { border-top-color: var(--color-line-strong); }
.waterfall .wf-tick {
    position: absolute; right: calc(100% + 0.5rem); transform: translateY(50%);
    font-size: 0.6875rem; color: var(--color-subtle); white-space: nowrap;
}
.waterfall .wf-bar { position: absolute; border-radius: 3px; }
.waterfall .wf-bar.start { background: var(--chart-grey); }
.waterfall .wf-bar.current { background: var(--chart-1); }
.waterfall .wf-bar.up { background: var(--chart-4); }
.waterfall .wf-bar.down { background: var(--chart-6); }
.waterfall .wf-bar.recover { background: transparent; border: 1.5px dashed var(--chart-1); }
.waterfall .wf-val {
    position: absolute; transform: translate(-50%, -0.25rem);
    font-size: 0.6875rem; font-weight: 600; white-space: nowrap; color: var(--color-base-content);
}
.waterfall .wf-val.up { color: var(--chart-4); }
.waterfall .wf-val.down { color: var(--chart-6); }
.waterfall .wf-link { position: absolute; height: 0; border-top: 1px solid var(--color-faint); }
.waterfall .wf-labels { position: relative; height: 2.25rem; margin: 0.375rem 0 0 3.5rem; }
.waterfall .wf-label {
    position: absolute; top: 0; text-align: center; font-size: 0.6875rem; line-height: 1.25; color: var(--color-subtle);
}
.waterfall .wf-label.total { color: var(--color-base-content); font-weight: 600; }

/* ── The RFQ module (RFQ_DESIGN.md; DESIGN.md proposals of 2026-10-18: the deal strip, the stage bar, the stage
   tabs' second line, the callout, the leak check's glyphs, the margin segment in a lane) ── */
.rfq-list .stage-cell { min-width: 11rem; }
.stage-bar { display: inline-flex; gap: 2px; height: 8px; width: 9.5rem; vertical-align: middle; }
.stage-bar .seg { flex: 1 1 0; border-radius: 2px; background: var(--color-line-strong); }
.stage-bar .seg.done { background: var(--color-primary); }
.stage-bar .seg.open { background: var(--color-warning); }
.rfq-table .next-cell { font-size: 0.8125rem; max-width: 20rem; }
.rfq-table .next-item { display: flex; gap: 0.375rem; align-items: baseline; }
.rfq-table .next-item .glyph { width: 0.75rem; text-align: center; font-weight: 700; flex: none; }
.rfq-table .next-item .glyph.money { color: var(--color-error); }
.rfq-table .next-item .glyph.routine { color: var(--color-faint); }
.rfq-table .phone-stage { display: none; }
/* the RFQ list on a phone (RFQ_DESIGN.md "Responsive"): the RFQ with its stage bar under the name, the margin and what
   is next stay in view (the closed table: the RFQ, the margin and the winner); units, buy, sell and the day go, the CSV
   and a wider screen having them */
@media (max-width: 640px) {
    .rfq-table th:nth-child(3), .rfq-table td:nth-child(3), .rfq-table th:nth-child(4), .rfq-table td:nth-child(4),
    .rfq-table th:nth-child(5), .rfq-table td:nth-child(5), .rfq-table th:nth-child(8), .rfq-table td:nth-child(8),
    #closedTable th:nth-child(2), #closedTable td:nth-child(2) { display: none; }
    .rfq-table td:first-child { min-width: 9rem; }
    .rfq-table td:first-child .cell-note { white-space: normal; }
    /* the open table's stage bar moves under the RFQ's name, so the margin sits beside it */
    .rfq-table:not(#closedTable) th:nth-child(2), .rfq-table:not(#closedTable) td:nth-child(2) { display: none; }
    .rfq-table .phone-stage { display: block; margin-top: 0.375rem; }
    .rfq-table .phone-stage .stage-bar { width: 7rem; }
}
.rfq-table .link-plain { color: inherit; text-decoration: none; }
.rfq-table .link-plain:hover { color: var(--color-primary); text-decoration: underline; }
.text-up { color: var(--chart-4); }
.text-down { color: var(--chart-6); }
.waiting-table td { vertical-align: top; }
.progress-line { height: 6px; border-radius: 3px; background: var(--color-base-200); margin: 0.25rem 0 0.75rem; overflow: hidden; }
.progress-line > span { display: block; height: 100%; background: var(--color-primary); border-radius: 3px; }
.sidebar-badge { margin-left: auto; font-size: 0.6875rem; font-weight: 600; padding: 0 0.4rem; border-radius: 999px; background: rgba(255, 255, 255, 0.18); color: #fff; line-height: 1.25rem; min-width: 1.25rem; text-align: center; }
.sidebar-link.active .sidebar-badge { background: rgba(255, 255, 255, 0.28); }
.check-list { list-style: none; margin: 0; padding: 0; }
.check-list .check { display: flex; gap: 0.625rem; padding: 0.5rem 0; border-bottom: 1px solid var(--color-line); font-size: 0.875rem; }
.check-list .check:last-child { border-bottom: 0; }
.check-list .check .glyph { width: 1rem; flex: none; text-align: center; font-weight: 700; }
.check-list .check.ok .glyph { color: var(--chart-4); }
.check-list .check.warn .glyph { color: var(--color-warning); }
.check-list .check.info .glyph { color: var(--color-faint); }
.check-list .cell-note { white-space: normal; }
/* the deal strip: four cells at 20 px semibold and an 8 px bar with 2 px gaps; the unpaid segment is hatched */
.deal-strip { background: var(--color-base-100); border: 1px solid var(--color-line); border-radius: 0.5rem; padding: 1rem 1.25rem; margin-bottom: 1rem; }
.deal-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.deal-cell .deal-value { font-size: 1.25rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; margin: 0.125rem 0; font-variant-numeric: tabular-nums; }
.deal-cell .cell-note { white-space: normal; }
.deal-bar { display: flex; gap: 2px; height: 8px; margin-top: 0.875rem; }
.deal-bar > span { display: block; height: 100%; border-radius: 2px; }
.deal-bar .purchase { background: var(--color-line-strong); }
.deal-bar .margin { background: var(--chart-4); }
.deal-bar .unpaid { background: repeating-linear-gradient(135deg, var(--chart-6) 0 3px, transparent 3px 6px); }
.deal-caption { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--color-subtle); margin-top: 0.25rem; }
@media (max-width: 640px) { .deal-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* the stage tabs: two lines, the second carrying the glyph that says the state */
.stage-tabs { margin-bottom: 1rem; overflow-x: auto; flex-wrap: nowrap; }
.stage-tabs .tab { height: auto; padding: 0.5rem 0.875rem; flex-direction: column; align-items: flex-start; gap: 0.125rem; white-space: nowrap; }
.stage-tabs .tab-word { font-size: 0.875rem; font-weight: 500; }
.stage-tabs .tab-fact { font-size: 0.75rem; color: var(--color-subtle); }
.stage-tabs .tab-fact.done { color: var(--chart-4); }
.stage-tabs .tab-fact.issue { color: var(--color-warning); }
.stage-tabs .tab-later .tab-word { color: var(--color-subtle); }
/* a callout: one sentence on an amber tint when something is open */
.callout { background: color-mix(in srgb, var(--color-warning) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-warning) 25%, transparent); border-radius: 0.5rem; padding: 0.75rem 1rem; font-size: 0.875rem; margin-bottom: 1rem; }
.row-unmapped td { background: color-mix(in srgb, var(--color-warning) 8%, transparent); }
/* the leak check: ✕ removed in the down ink, ✓ passed in the up ink, · allowed muted */
.leak-panel { background: var(--color-base-200); border-radius: 0.5rem; padding: 0.75rem 1rem; margin-top: 1rem; font-size: 0.875rem; }
.leak-head { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-line); margin-bottom: 0.25rem; font-size: 0.8125rem; }
.leak-row { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; gap: 0.5rem; padding: 0.375rem 0; align-items: start; }
.leak-row .glyph { font-weight: 700; text-align: center; }
.leak-row .glyph.removed { color: var(--chart-6); }
.leak-row .glyph.passed { color: var(--chart-4); }
.leak-row .glyph.allowed { color: var(--color-faint); }
.leak-row .cell-note { white-space: normal; }
.rfq-page .shape { font-size: 0.75rem; color: var(--color-base-content); }
.rfq-page #bidsTable th.muted, .rfq-page #bidsTable td.muted { color: var(--color-faint); }
/* a margin segment in a lane and the words at a lane's right */
.lanes .segment-line { position: absolute; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; }
.lanes .segment-line.up { background: var(--chart-4); }
.lanes .segment-line.down { background: var(--chart-6); }
.lanes.with-right .lane, .lanes.with-right .lane-axis, .lanes.with-right .lane-tops { grid-template-columns: 10rem minmax(0, 1fr) 11rem; }
.lanes .lane-right { font-size: 0.8125rem; padding-left: 0.75rem; display: flex; flex-direction: column; justify-content: center; }
.lanes .lane-right .cell-note { white-space: normal; }
@media (max-width: 640px) {
    .lanes.with-right .lane, .lanes.with-right .lane-axis, .lanes.with-right .lane-tops { grid-template-columns: minmax(0, 1fr); }
    .lanes.with-right .lane-axis > :last-child, .lanes.with-right .lane-tops > :last-child { display: none; }
    .lanes .lane-right { padding: 0 0 0.5rem; flex-direction: row; gap: 0.5rem; align-items: center; }
}
/* the Price tab (step 3): the assumptions bar with its note at the right, the market evidence's stacked bar and
   definition rows, the sensitivity grid */
.price-assumptions-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0.75rem 1.5rem; }
.price-assumptions .filter-bar { margin: 0; }
.price-assumptions .filter-actions { display: flex; gap: 0.5rem; align-items: flex-end; }
.price-note { flex: 1 1 18rem; max-width: 30rem; margin: 0; font-size: 0.75rem; color: var(--color-subtle); }
.evidence-bar { display: flex; gap: 2px; height: 10px; margin-top: 0.25rem; }
.evidence-bar > span { display: block; height: 100%; border-radius: 2px; }
.evidence-bar .quoted, .lane-legend i.ev.quoted { background: var(--color-primary); }
.evidence-bar .estimated, .lane-legend i.ev.estimated { background: color-mix(in srgb, var(--color-primary) 40%, transparent); }
.evidence-bar .none, .lane-legend i.ev.none { background: var(--color-line-strong); }
.lane-legend i.ev { width: 0.625rem; height: 0.625rem; border-radius: 2px; }
.def-list.def-rows { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
.def-list.def-rows > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-line); }
.def-list.def-rows > div:last-child { border-bottom: 0; }
.def-list.def-rows dd { font-weight: 400; }
/* a list sent on rhw.app (SELL_LISTS_PLAN.md): the file's SHA-256 and the store's note wrap on a phone */
.rhw-card .def-list dd, .rhw-card .def-list .cell-note { white-space: normal; overflow-wrap: anywhere; }
.support-stats { margin-top: 0; }
.sensitivity tr.font-semibold td { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
@media (max-width: 640px) { .def-list.def-rows > div { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; } }

/* the Lots tab (step 4a): the split gain as a bar in its cell, the lot panels of the cut on show (a plum top rule, three
   figures, the break-even sentence on the page grey, the private reserve), the numbered bidsheet steps */
.cuts-table tr.row-shown td { background: color-mix(in srgb, var(--color-primary) 5%, transparent); }
.gain-cell { display: flex; align-items: center; gap: 0.5rem; min-width: 9rem; }
.gain-bar { flex: 1 1 auto; height: 6px; border-radius: 3px; background: var(--color-base-200); overflow: hidden; }
.gain-bar > span { display: block; height: 100%; background: var(--color-primary); border-radius: 3px; }
.gain-cell .text-end { min-width: 2.5rem; font-variant-numeric: tabular-nums; font-size: 0.8125rem; }
.lot-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 0 1.25rem 1rem; }
.lot-panel { border: 1px solid var(--color-line); border-top: 2px solid var(--color-primary); border-radius: 0.5rem; padding: 0.875rem 1rem; display: flex; flex-direction: column; gap: 0.625rem; min-width: 0; }
.lot-head { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; flex-wrap: wrap; }
.lot-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.lot-figures .stat-label { font-size: 0.75rem; color: var(--color-subtle); }
.lot-figures .stat-value { font-size: 1rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.lot-figures .stat-note { font-size: 0.75rem; color: var(--color-subtle); }
.lot-note { background: var(--color-base-200); border-radius: 0.375rem; padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
.lot-reserve { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: flex-end; }
.lot-reserve-field { display: flex; flex-direction: column; gap: 0.25rem; }
.steps-list { list-style: none; margin: 0; padding: 0; }
.steps-list li { display: flex; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--color-line); font-size: 0.875rem; }
.steps-list li:last-child { border-bottom: 0; }
.steps-list .step-no { flex: none; width: 1.25rem; height: 1.25rem; border-radius: 999px; font-size: 0.6875rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.steps-list .cell-note { white-space: normal; }
@media (max-width: 1064px) { .lot-panels { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .lot-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the Offer tab (step 4b): the indicative offer greyed before bids, the next version's sizing box, the award timeline
   (the date, a dot in the step's tone, the step and its detail, the margin after it at the right), a lost lot greyed */
.offer-greyed .card-body { gap: 0.5rem; }
.size-box { background: var(--color-base-200); border-radius: 0.5rem; padding: 0.875rem 1rem; margin: 0.75rem 1.25rem 1.25rem; }
.size-grid { display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: flex-end; }
.size-grid label { display: flex; flex-direction: column; gap: 0.25rem; }
.size-result { display: flex; flex-direction: column; gap: 0.25rem; margin-left: auto; text-align: right; }
.size-result .font-semibold { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.inline-actions { display: inline-flex; flex-wrap: wrap; gap: 0.125rem; margin-left: 0.25rem; }
.award-timeline { list-style: none; margin: 0; padding: 0; }
.award-timeline li { display: grid; grid-template-columns: 3.75rem 0.75rem minmax(0, 1fr) auto; gap: 0.625rem; align-items: start; padding: 0.625rem 0; border-bottom: 1px solid var(--color-line); font-size: 0.875rem; }
.award-timeline li:last-child { border-bottom: 0; }
.award-timeline .tl-date { font-size: 0.75rem; color: var(--color-subtle); padding-top: 0.125rem; }
.award-timeline .tl-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; margin-top: 0.375rem; background: var(--color-line-strong); }
.award-timeline .tl-dot.primary { background: var(--color-primary); }
.award-timeline .tl-dot.up { background: var(--chart-4); }
.award-timeline .tl-dot.down { background: var(--chart-6); }
.award-timeline .tl-body .cell-note { white-space: normal; }
.award-timeline .tl-margin { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.award-forms { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--color-line); }
.award-forms label { display: flex; flex-direction: column; gap: 0.25rem; }
tr.row-lost td { color: var(--color-faint); }

/* the Bids tab (step 4c): the bidsheet's choices and the drop zone for a returned file, a dashed box on the page grey;
   the read before import; the lot-total rows closing each lot in Bids by line */
.bidsheet-form { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--color-line); }
.buyer-picks { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; }
.leak-state { display: flex; align-items: center; gap: 0.25rem; justify-content: flex-end; }
.leak-state form.inline { display: inline; }
.drop-zone { margin: 0.75rem 1.25rem 1.25rem; padding: 0.875rem 1rem; border: 1.5px dashed var(--color-line-strong); border-radius: 0.5rem; background: var(--color-base-200); }
.return-card { border-left: 3px solid var(--color-warning); }
/* The Settle tab (RFQ step 5): a short payment on the down colour's rule, its three decisions as choice cards, each
   side's balance at the card's head, the ledger-like rows' notes wrapping, a checklist item's action under it */
.short-card { border-left: 3px solid var(--chart-6); }
.choice-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; padding: 0 1.25rem; }
.choice-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.5rem; row-gap: 0.125rem; align-items: center;
    border: 1px solid var(--color-line); border-radius: 0.5rem; padding: 0.75rem; cursor: pointer; font-size: 0.875rem; }
.choice-card:has(input:checked) { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.choice-card .choice-label { font-weight: 600; }
.choice-card .choice-figure, .choice-card .cell-note { grid-column: 2; }
.choice-card .choice-figure { font-variant-numeric: tabular-nums; }
.choice-card .cell-note { white-space: normal; }
@media (max-width: 760px) { .choice-cards { grid-template-columns: minmax(0, 1fr); } }
.deal-value-sm { font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; }
.settle-head > div:first-child { flex: 1 1 16rem; min-width: 0; }
.settle-balance { margin-left: auto; text-align: right; }
@media (max-width: 1064px) { .settle-table td:nth-child(2) { min-width: 12rem; } }
.cell-note.wrap { white-space: normal; }
.size-grid label.grow { flex: 1 1 12rem; }
.check-list .check .grow { flex: 1 1 auto; min-width: 0; }
.check-action { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; margin-top: 0.375rem; }
.check-action .input { max-width: 100%; }
#bidsTable tr.lot-head td { background: var(--color-base-200); font-weight: 600; }
#bidsTable tr.lot-total td { font-weight: 600; border-bottom: 1px solid var(--color-line-strong); }
#bidsTable tr.lot-total td .cell-note { font-weight: 400; }
.rfq-new .drop-zone { margin: 0; }
/* the Lines tab's fixes (2026-10-19): a done callout in the up tint, the Teach dialog's list, Find in Index's choices */
.callout.callout-done { background: color-mix(in srgb, var(--chart-4) 8%, transparent); border-color: color-mix(in srgb, var(--chart-4) 25%, transparent); }
.teach-list { max-height: 24rem; overflow-y: auto; border: 1px solid var(--color-line); border-radius: 0.375rem; }
.find-list { display: flex; flex-direction: column; gap: 0.375rem; max-height: 18rem; overflow-y: auto; }
.find-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; padding: 0.25rem 0; }
.cell-note.inline { display: inline; margin-left: 0.25rem; }
/* the RFQ Fulfil tab (step 6): the handling toggle beside its sentence (stacked on a phone) */
.handling-row { display: grid; grid-template-columns: minmax(16rem, auto) minmax(0, 1fr); gap: 0.5rem 2rem; align-items: start; }
.handling-toggle { display: flex; align-items: center; gap: 0.625rem; cursor: pointer; }
@media (max-width: 760px) { .handling-row { grid-template-columns: minmax(0, 1fr); } }
/* the shipment card: its facts two to a row, a typed address kept on its lines, the empty state in a hairline box */
.shipment-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0.25rem; }
.shipment-facts dd .cell-note { font-weight: 400; }
.shipment-facts .wrap-text { white-space: pre-line; font-weight: 400; }
.empty-note { border: 1px solid var(--color-line); border-radius: 0.5rem; padding: 1rem; margin-top: 1rem; text-align: center; font-size: 0.875rem; color: var(--color-subtle); }
.shipment-form summary { list-style-position: inside; }
.outcome-list .outcome-count { margin-left: 0.25rem; }
/* the Fulfil tab's scan and shipment cards: the sentence takes the room, the count or the status pill keeps the right */
#scanCard .card-intro > div:first-child, .shipment-card .card-intro > div:first-child { flex: 1 1 16rem; min-width: 0; }
#scanCard .card-intro .card-actions, .shipment-card .card-intro .card-actions { flex: 0 0 auto; }
/* on a phone the count table keeps the model, the units, the value and the cause (the CSV and a wider screen have the rest) */
@media (max-width: 640px) { .count-table .hide-sm { display: none; } .count-table td:last-child .badge { white-space: normal; text-align: left; } }
/* the RFQ Close tab (step 7): the closed banner with Reopen at its right; the bridge from the award to the margin
   realised, its totals semibold and the last over a stronger rule; the lesson in the body ink */
.close-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.close-banner > span { flex: 1 1 20rem; min-width: 0; }
#taughtCard .card-desc.lesson { color: var(--color-base-content); font-size: 0.875rem; max-width: 60rem; }
#taughtCard .stat-blocks { margin-top: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { #taughtCard .stat-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* two cards stacked in one column of a two-up row (the Close tab: the bridge over the Index preview, the checklist beside) */
.card-stack { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.bridge-table tr.bridge-total td { font-weight: 600; }
.bridge-table tr.bridge-end td { border-top: 1px solid var(--color-line-strong); }
.bridge-table td .cell-note { font-weight: 400; }
/* the Activity tab: the detail wraps; on a phone every column folds into What (the change, its detail, who and when) */
.activity-table .activity-detail { white-space: normal; min-width: 14rem; overflow-wrap: anywhere; }
.activity-table .show-sm { display: none; }
@media (max-width: 640px) {
    .activity-table th:not(:nth-child(2)), .activity-table td:not(:nth-child(2)) { display: none; }
    .activity-table .show-sm { display: block; font-weight: 400; }
    .activity-table .detail-sm { font-size: 0.8125rem; margin-top: 0.125rem; overflow-wrap: anywhere; }
    .activity-table td:nth-child(2) { white-space: normal; }
    .activity-table th:nth-child(2), .activity-table td:nth-child(2) { width: 100% !important; }   /* DataTables fixed the desk widths */
    .activity-table { width: 100% !important; }
    .group-miss-table .hide-sm { display: none; }
}
/* Trading partners (PARTNERS_DESIGN.md): the profile's tabs carry their count on the same line as the word
   ("Deals 14", "Payments ! 1 short"); the Details tab's fields two to a row, stacked on a phone */
.partner-tabs .tab { flex-direction: row; align-items: baseline; gap: 0.375rem; }
.partner-tabs .tab-fact.issue { color: var(--chart-6); font-weight: 600; }
.details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.875rem 1rem; padding: 0 1.25rem 1.25rem; }
.details-grid .col-span-full { grid-column: 1 / -1; }
.field-note { font-size: 0.75rem; color: var(--color-subtle); margin: 0.25rem 0 0; }
.details-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; align-self: end; }
.details-contacts { padding: 0 1.25rem 1.25rem; }
.details-contacts .table td { padding: 0.25rem 0.375rem; }
.details-actions { display: flex; justify-content: flex-end; margin: 1rem 0; }
@media (max-width: 640px) { .details-grid { grid-template-columns: minmax(0, 1fr); } .details-contacts { overflow-x: auto; } }
/* the Trading partners directory: a grey coverage strip, the twelve-month bars in a cell, the 100% share bars in plum
   ordinal shades with white gaps, the Needs you list, a folded row for partners with nothing in the period */
.coverage-note { background: var(--color-base-200); border-radius: 0.5rem; padding: 0.625rem 1rem; font-size: 0.8125rem;
    color: var(--color-subtle); margin-bottom: 1rem; }
.coverage-note .link { margin-left: 0.5rem; white-space: nowrap; }
.partners-filters .filter-note { flex: 1 1 18rem; align-self: center; font-size: 0.75rem; color: var(--color-subtle);
    text-align: right; margin: 0; }
.partners-filters .segmented { height: 2rem; }
.month-bars { width: 96px; height: 24px; display: block; }
.month-bars .bar-on { fill: var(--chart-1); }
.month-bars .bar-off { fill: var(--color-line-strong); }
.share-bars { padding: 0 1.25rem 1.25rem; }
.share-head { display: flex; justify-content: space-between; font-size: 0.8125rem; font-weight: 600; margin: 0.75rem 0 0.375rem; }
.share-head span:last-child { font-weight: 400; color: var(--color-subtle); }
.share-bar { display: flex; height: 1.75rem; border-radius: 0.25rem; overflow: hidden; gap: 2px; }
.share-seg { display: flex; align-items: center; padding: 0 0.5rem; font-size: 0.75rem; font-weight: 600; color: #ffffff;
    white-space: nowrap; overflow: hidden; min-width: 2px; }
.share-0 { background: var(--chart-ord-1); }
.share-1 { background: var(--chart-ord-2); }
.share-2 { background: var(--chart-ord-3); }
.share-3 { background: var(--chart-ord-4); color: var(--color-base-content); }
.share-4 { background: var(--chart-ord-5); color: var(--color-base-content); }
.share-other { background: var(--chart-grey); color: var(--color-base-content); }
.share-sentence { font-size: 0.8125rem; margin: 1rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--color-line); }
.needs-list { list-style: none; margin: 0; padding: 0 1.25rem 0.75rem; }
.needs-list li { display: grid; grid-template-columns: 1rem 5rem minmax(0, 1fr) auto; gap: 0.5rem; padding: 0.75rem 0;
    border-top: 1px solid var(--color-line); font-size: 0.8125rem; align-items: start; }
.needs-glyph { font-weight: 700; }
.needs-partner { font-weight: 600; }
.needs-text .cell-note { white-space: normal; margin-top: 0.125rem; }
.needs-action { white-space: nowrap; font-weight: 500; }
.partners-table td { vertical-align: top; }
.partners-table .cell-note.wrap { white-space: normal; }
.partners-table tr.row-idle td { color: var(--color-subtle); }
.partners-table tr.fold-row td { font-size: 0.75rem; color: var(--color-subtle); background: var(--color-base-200); }
.partners-table tfoot td { font-weight: 600; border-top: 1px solid var(--color-line-strong); }
.partners-table tfoot .cell-note { font-weight: 400; }
@media (max-width: 640px) { .needs-list li { grid-template-columns: 1rem minmax(0, 1fr); } .needs-list .needs-text,
    .needs-list .needs-action { grid-column: 2; } }
.partners-table .cell-note { white-space: normal; min-width: 6rem; }
.partners-table td:first-child { min-width: 8rem; }
/* the buyer's Overview: the amber callout, the deal chart (SVG drawn on the server: won filled plum with a white ring,
   lost hollow with an ink ring, open a dashed muted ring, a rebid joined by a dashed plum line), the mix bars and
   their legends, payments' Owed now, the record's list, the strength lanes */
.callout.callout-amber { background: color-mix(in srgb, var(--chart-3) 10%, transparent); border-color: color-mix(in srgb, var(--chart-3) 30%, transparent); }
.deal-chart-wrap { padding: 0 1.25rem 1.25rem; overflow-x: auto; }
.deal-chart { width: 100%; min-width: 36rem; height: auto; display: block; }
.deal-chart .grid-line { stroke: var(--color-line); stroke-width: 1; }
.deal-chart .axis-line { stroke: var(--color-line-strong); stroke-width: 1; }
.deal-chart .ref-line { stroke: var(--color-base-content); stroke-width: 1.5; }
.deal-chart .axis-text, .deal-chart .row-text { font-size: 11px; fill: var(--color-subtle); font-family: inherit; }
.deal-chart .row-text { fill: var(--color-base-content); font-variant-numeric: tabular-nums; }
.deal-chart .row-head { font-size: 11px; fill: var(--color-subtle); font-weight: 600; }
.deal-chart .ref-text { font-size: 11px; fill: var(--color-base-content); }
.deal-chart .mark-won { fill: var(--chart-1); stroke: #ffffff; stroke-width: 2; }
.deal-chart .mark-lost { fill: #ffffff; stroke: var(--color-base-content); stroke-width: 2; }
.deal-chart .mark-open { fill: none; stroke: var(--color-faint); stroke-width: 2; stroke-dasharray: 3 3; }
.deal-chart .rebid-join { stroke: var(--chart-1); stroke-width: 2; stroke-dasharray: 4 3; }
.deal-chart .mark-label { font-size: 11px; fill: var(--color-subtle); }
.deal-chart .rebid-label { fill: var(--chart-1); font-weight: 600; }
.chart-legend-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; font-size: 0.75rem; color: var(--color-subtle); margin-top: 0.5rem; }
.chart-legend-row .leg { display: inline-flex; align-items: center; gap: 0.375rem; }
.leg-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.leg-dot.won { background: var(--chart-1); }
.leg-dot.lost { border: 2px solid var(--color-base-content); background: #ffffff; }
.leg-dot.open { border: 2px dashed var(--color-faint); }
.leg-dash { width: 16px; border-top: 2px dashed var(--chart-1); display: inline-block; }
.chart-sentence { font-size: 0.8125rem; margin: 0.75rem 0 0; }
.share-legend { display: flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; font-size: 0.75rem; color: var(--color-subtle); margin-top: 0.375rem; }
.share-legend > span { display: inline-flex; align-items: center; gap: 0.375rem; }
.leg-sq { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.grade-a { background: var(--chart-ord-1); } .grade-b { background: var(--chart-ord-2); } .grade-c { background: var(--chart-ord-3); }
.grade-d { background: var(--chart-ord-4); } .grade-e { background: var(--chart-ord-5); }
.most-list { list-style: none; margin: 0; padding: 0; font-size: 0.8125rem; }
.most-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.25rem 0; border-top: 1px solid var(--color-line); }
.most-list li span:first-child { color: var(--color-primary); }
.owed-now { flex-direction: column; align-items: flex-end; gap: 0; }
.owed-now .owed-figure { font-size: 1.125rem; font-weight: 700; }
.pay-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; padding: 0.875rem 1.25rem 1.25rem; border-top: 1px solid var(--color-line); }
.pay-stats .stat-label { display: block; font-size: 0.75rem; color: var(--color-subtle); }
.pay-stats .stat-value { display: block; font-size: 0.875rem; font-weight: 600; }
.record-body { padding: 0 1.25rem 1.25rem; }
.record-pills { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.75rem; }
.record-list { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0; margin: 0; font-size: 0.8125rem; }
.record-list dt, .record-list dd { padding: 0.5rem 0; border-top: 1px solid var(--color-line); margin: 0; }
.record-list dt { color: var(--color-subtle); }
.record-list dd { font-weight: 600; }
.record-list dd .cell-note { white-space: normal; }
.record-notes { margin-top: 1rem; }
.record-notes-actions { display: flex; justify-content: flex-end; margin-top: 0.375rem; }
.strength-list { padding: 0 1.25rem 1.25rem; }
.strength-scale, .strength-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr) 4.5rem; gap: 0.75rem; align-items: center; }
.strength-scale { font-size: 0.6875rem; color: var(--color-subtle); text-transform: uppercase; letter-spacing: 0.04em; padding-bottom: 0.25rem; }
.strength-scale .scale-ticks { display: flex; justify-content: space-between; }
.strength-scale > span:last-child { text-align: right; }
.strength-row { padding: 0.5rem 0; border-top: 1px solid var(--color-line); font-size: 0.8125rem; }
.strength-lane { position: relative; height: 1.5rem; }
.strength-lane .lane-track { position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--color-line-strong); }
.strength-lane .lane-100 { position: absolute; right: 0; top: 0; bottom: 0; border-right: 1.5px solid var(--color-base-content); }
.strength-lane .lane-dot { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; transform: translate(-50%, -50%); }
.strength-lane .lane-dot.top { background: var(--chart-1); }
.strength-lane .lane-dot.mid { background: var(--chart-ord-3); }
.strength-lane .lane-dot.low { background: var(--chart-ord-5); }
.strength-lane .lane-value { position: absolute; top: 50%; transform: translate(calc(-100% - 8px), -50%); font-size: 0.75rem; font-weight: 600; white-space: nowrap; }
@media (max-width: 640px) { .pay-stats { grid-template-columns: minmax(0, 1fr); } .record-list { grid-template-columns: 7rem minmax(0, 1fr); }
    .strength-scale, .strength-row { grid-template-columns: 6.5rem minmax(0, 1fr) 3.5rem; } }
.tender-buyers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem 1rem; }
/* the Devices tab: the units list with the unit trail beside it (under it below 1064 px), the picked row tinted, the
   trail a vertical timeline of dots in the event's tone */
.devices-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: start; }
@media (max-width: 1063px) { .devices-layout { grid-template-columns: minmax(0, 1fr); } }
.units-table tr.row-picked td { background: var(--color-tint); }
.pager { display: flex; justify-content: space-between; padding: 0.75rem 1.25rem; font-size: 0.8125rem; color: var(--color-subtle); border-top: 1px solid var(--color-line); }
.pager .link { margin-left: 0.75rem; }
.trail-body { padding: 0 1.25rem 1.25rem; }
.unit-trails .trail-body { padding: 1.25rem; }
.trail-steps { list-style: none; margin: 0 0 1rem; padding: 0; }
.trail-step { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.5rem; padding: 0.375rem 0; font-size: 0.8125rem; }
.trail-step .cell-note { white-space: normal; }
.trail-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 0.25rem; background: var(--chart-grey); }
.trail-step.plum .trail-dot { background: var(--chart-1); }
.trail-step.up .trail-dot { background: var(--chart-4); }
.trail-money { display: grid; grid-template-columns: minmax(0, 1fr) auto; margin: 0 0 1rem; font-size: 0.8125rem; border-top: 1px solid var(--color-line); padding-top: 0.75rem; }
.trail-money dt { color: var(--color-subtle); padding: 0.25rem 0; }
.trail-money dd { margin: 0; padding: 0.25rem 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.trail-claim summary { list-style: none; display: inline-flex; margin-bottom: 0.5rem; }
.trail-claim summary::-webkit-details-marker { display: none; }
.units-table td:nth-child(2) { min-width: 10rem; }
.units-table td:nth-child(5) { min-width: 8rem; }
@media (min-width: 1064px) { .devices-layout { grid-template-columns: minmax(0, 1fr) 18rem; } }
/* the trade-in program's Overview: the arrivals columns in the grade ramp (by OS and make in the categorical slots), the
   12-cycle average hairline, the AB share's period low in down ink; the cash line; the inline share bar; row edits */
.arrivals-chart .avg-line { stroke: var(--color-base-content); stroke-width: 1; stroke-dasharray: 4 3; }
.arrivals-chart .low-mark { fill: var(--chart-6); font-weight: 600; }
.seg-grade-0 { fill: var(--chart-ord-1); background: var(--chart-ord-1); } .seg-grade-1 { fill: var(--chart-ord-2); background: var(--chart-ord-2); }
.seg-grade-2 { fill: var(--chart-ord-3); background: var(--chart-ord-3); } .seg-grade-3 { fill: var(--chart-ord-4); background: var(--chart-ord-4); }
.seg-grade-4 { fill: var(--chart-ord-5); background: var(--chart-ord-5); }
.seg-os-0, .seg-make-0 { fill: var(--chart-1); background: var(--chart-1); } .seg-os-1, .seg-make-1 { fill: var(--chart-2); background: var(--chart-2); }
.seg-make-2 { fill: var(--chart-3); background: var(--chart-3); } .seg-make-3 { fill: var(--chart-4); background: var(--chart-4); }
.seg-make-4 { fill: var(--chart-5); background: var(--chart-5); } .seg-make-5 { fill: var(--chart-grey); background: var(--chart-grey); }
.arrivals-chart rect { stroke: #ffffff; stroke-width: 1; }
.exceptions-list li { grid-template-columns: 1rem minmax(0, 1fr) auto; }
.cash-body { padding: 0 1.25rem 1.25rem; }
.cash-line { position: relative; height: 5.5rem; margin: 0.5rem 3.25rem 0.75rem; }
.cash-track { position: absolute; left: 0; right: 0; top: 2.25rem; border-top: 2px solid var(--color-line-strong); }
.cash-shade { position: absolute; top: 2rem; height: 0.5rem; border-radius: 0.25rem; }
.cash-shade.up { background: color-mix(in srgb, var(--chart-4) 25%, transparent); }
.cash-shade.down { background: color-mix(in srgb, var(--chart-6) 25%, transparent); }
.cash-mark { position: absolute; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 0.25rem; width: 6.5rem; text-align: center; }
.cash-day { font-size: 0.75rem; font-weight: 600; }
.cash-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color-base-content); border: 2px solid #ffffff; }
.cash-mark.award .cash-dot { background: var(--chart-1); }
.cash-mark.back .cash-dot { background: var(--chart-4); }
.cash-mark.out .cash-dot { background: var(--chart-6); }
.cash-label { font-size: 0.75rem; color: var(--color-subtle); line-height: 1.2; }
.share-inline { display: inline-block; width: 5rem; height: 0.5rem; background: var(--color-base-200); border-radius: 2px; vertical-align: middle; }
.share-fill { display: block; height: 100%; background: var(--chart-1); border-radius: 2px; }
.row-edit summary { list-style: none; }
.row-edit summary::-webkit-details-marker { display: none; }
.row-edit-form { display: grid; grid-template-columns: repeat(3, minmax(7rem, 1fr)); gap: 0.375rem; padding: 0.5rem 0; min-width: 24rem; }
.row-edit-form label { display: flex; flex-direction: column; font-size: 0.6875rem; color: var(--color-subtle); gap: 0.125rem; }
/* on a phone the partners' tables keep the name and the money that matters; the rest is on a wider screen and the CSV */
@media (max-width: 640px) {
    .partners-table th.hide-sm { display: none; }
    .buyers-table tbody td:is(:nth-child(2), :nth-child(4), :nth-child(5), :nth-child(7), :nth-child(8), :nth-child(9)),
    .suppliers-table tbody td:is(:nth-child(2), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(8)) { display: none; }
    .buyers-table tfoot, .suppliers-table tfoot { display: none; }
    .buyers-table tr.fold-row td { display: table-cell; }
}

/* ---------------------------------------------------------------------------
   The Stock page (WHOLESALE_PLAN.md A1; docs/design/stock/): the scan-or-type box, the tabs with counts, the
   Needs attention strip, the Available table (ages in amber and red, the quantity cells), the hold footer and
   dialog, the Locations layout with a container opened beside the list and its label preview, the unit page
   (the steps strip, the two-column layout, the timeline), and the one-sentence empty states.
   --------------------------------------------------------------------------- */
.scan-box { display: flex; align-items: center; gap: 0.625rem; background: var(--color-card); border: 1px solid var(--color-line-strong); border-radius: 0.5rem; padding: 0 0.875rem; height: 2.75rem; margin-bottom: 1rem; }
.scan-box:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 15%, transparent); }
.scan-box-icon { color: var(--color-subtle); display: flex; }
.scan-box-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 0.9375rem; font-family: inherit; }
.scan-box-input::placeholder { color: var(--color-faint); }
.scan-box-hint { font-size: 0.75rem; color: var(--color-faint); white-space: nowrap; }
.stock-tabs { margin-bottom: 1.25rem; overflow-x: auto; flex-wrap: nowrap; }
.stock-tabs .tab { white-space: nowrap; flex-wrap: nowrap; }
.tab-count { white-space: nowrap; }
.tab-count { color: var(--color-subtle); font-weight: 400; margin-left: 0.25rem; }
.tab-count-issue { display: inline-block; min-width: 1.25rem; padding: 0 0.375rem; border-radius: 999px; background: color-mix(in srgb, var(--color-primary) 12%, transparent); color: var(--color-primary); font-weight: 600; font-size: 0.75rem; line-height: 1.25rem; text-align: center; }
.attention-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0; background: var(--color-card); border: 1px solid var(--color-line); border-radius: 0.5rem; margin-bottom: 1.5rem; overflow: hidden; }
.attention-item { display: flex; flex-direction: column; gap: 0.125rem; padding: 0.75rem 1rem; border-right: 1px solid var(--color-line); color: inherit; text-decoration: none; }
.attention-item:last-child { border-right: 0; }
.attention-item:hover { background: var(--color-tint); }
.attention-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--color-subtle); }
.attention-count { display: inline-block; min-width: 1.5rem; padding: 0 0.375rem; border-radius: 999px; text-align: center; font-weight: 600; font-size: 0.75rem; line-height: 1.25rem; background: var(--color-base-200); color: var(--color-base-content); }
.attention-count.attention-warning { background: color-mix(in srgb, var(--color-warning) 14%, transparent); color: var(--color-warning); }
.attention-count.attention-error { background: color-mix(in srgb, var(--color-error) 12%, transparent); color: var(--color-error); }
.attention-words { font-size: 0.875rem; font-weight: 500; }
.filter-bar.filter-bar-flush { border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 0 1.25rem 0.875rem; border-bottom: 1px solid var(--color-line); }
.filter-bar .filter-check { align-self: flex-end; padding-bottom: 0.375rem; font-size: 0.875rem; }
.filter-bar .filter-check label { text-transform: none; letter-spacing: 0; font-size: 0.875rem; color: var(--color-base-content); margin: 0; display: flex; }
.filter-bar > .grow { flex: 1 1 14rem; }
.card-header .card-count, .card-header .card-count { font-weight: 400; color: var(--color-subtle); margin-left: 0.25rem; }
.th-note { font-weight: 400; color: var(--color-faint); font-size: 0.6875rem; margin-left: 0.25rem; }
.available-table .age { font-weight: 500; }
.available-table .age-amber { color: var(--color-warning); font-weight: 600; }
.available-table .age-red { color: var(--chart-6); font-weight: 600; }
.available-table .qty-col { width: 5.5rem; }
.available-table input.qty-cell { width: 3.75rem; text-align: center; font-variant-numeric: tabular-nums; }
.available-table input.qty-cell.is-set { border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }
.available-table input.qty-cell.is-short { border-color: var(--color-warning); color: var(--color-warning); }
.available-table .hold-short { color: var(--color-warning); font-weight: 600; white-space: nowrap; }
.hold-footer { position: sticky; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.75rem 1.25rem; background: color-mix(in srgb, var(--color-primary) 6%, var(--color-card)); border-top: 1px solid var(--color-line); font-size: 0.875rem; }
.hold-footer-actions { display: flex; gap: 0.5rem; }
.stock-empty { text-align: center; padding: 2.5rem 1.25rem; font-size: 0.875rem; color: var(--color-subtle); display: flex; flex-direction: column; gap: 0.5rem; align-items: center; }
.stock-empty .stock-empty-lead { color: var(--color-base-content); font-size: 0.9375rem; }
.stock-empty .link { font-weight: 600; background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 0.875rem; }
.stock-page .dt-container .overflow-x-auto { overflow: visible; }

/* the Available card's Prices mode (WHOLESALE_PLAN.md A2): the buckets' listed shares against the cap over the table
   (the bar's mark is the cap, at half the bar), the notes line, the editable list price, Listed and maximum cells
   (an unsaved edit takes the plum tint as the Master prices grid does), the premium's tone */
.bucket-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); border-top: 1px solid var(--color-line); border-bottom: 1px solid var(--color-line); }
.cap-item { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.625rem 1.25rem; border-right: 1px solid var(--color-line); font-size: 0.8125rem; }
.cap-item:last-child { border-right: 0; }
.cap-head { display: flex; justify-content: space-between; gap: 0.5rem; }
.cap-head span:last-child { color: var(--color-subtle); }
.cap-bar { position: relative; display: block; height: 0.375rem; background: var(--color-line); border-radius: 999px; }
.cap-bar .fill { display: block; height: 100%; border-radius: 999px; background: var(--color-primary); max-width: 100%; }
.cap-item.cap-over .cap-bar .fill { background: var(--color-warning); }
.cap-item.cap-over .cap-words { color: var(--color-warning); font-weight: 600; }
.cap-bar .cap-mark { position: absolute; left: 50%; top: -0.1875rem; width: 2px; height: 0.75rem; background: var(--color-subtle); }
.cap-words { color: var(--color-subtle); }
.cap-item.cap-total { background: var(--color-bg); }
.prices-notes { margin: 0; padding: 0.5rem 1.25rem; font-size: 0.8125rem; color: var(--color-subtle); border-bottom: 1px solid var(--color-line); }
.prices-table .price-col { width: 7rem; }
.prices-table .max-col { width: 5.5rem; }
.prices-table input.price-cell { width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.prices-table input.max-cell { width: 3.75rem; text-align: center; font-variant-numeric: tabular-nums; }
.prices-table input.is-changed { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-card)); }
.prices-table input.checkbox.is-changed { outline: 2px solid color-mix(in srgb, var(--color-primary) 40%, transparent); outline-offset: 1px; }
.prices-table input.is-bad { border-color: var(--color-error); color: var(--color-error); }
.prices-table .use-suggested { color: var(--color-primary); }
.prices-table .premium-under { color: var(--color-error); font-weight: 600; }
.prices-table .premium-ok { color: var(--color-success); font-weight: 500; }
.prices-table td .cell-note { white-space: normal; }
#availableCard[data-mode="prices"] .card-foot { white-space: normal; }
/* the hold dialog */
.hold-head { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 0.75rem; margin-bottom: 0.75rem; }
.hold-head .hold-note { grid-column: span 1; }
.hold-rules { display: flex; gap: 1.25rem; flex-wrap: wrap; font-size: 0.875rem; margin-bottom: 0.75rem; }
.hold-lines th, .hold-lines td { white-space: nowrap; }
.hold-lines tr.hold-line-short td { background: color-mix(in srgb, var(--color-warning) 6%, transparent); }
.hold-lines tr.hold-line-out td { color: var(--color-faint); text-decoration: line-through; }
.hold-lines tfoot th { font-weight: 600; }
.hold-picks { margin-top: 1rem; border: 1px solid var(--color-line); border-radius: 0.5rem; overflow: hidden; }
.hold-picks-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.625rem 0.875rem; background: var(--color-base-200); font-size: 0.875rem; }
.hold-picks .table { margin: 0; }
.short-card { margin-top: 1rem; background: color-mix(in srgb, var(--color-warning) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-warning) 25%, transparent); border-radius: 0.5rem; padding: 0.75rem 1rem; }
.hold-choices { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 0.5rem; }
.hold-actions { align-items: center; }
/* Locations: the list and a container opened beside it, with the 100 x 50 mm label preview */
.locations-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.locations-layout.with-panel { grid-template-columns: minmax(0, 1fr) 24rem; }
.locations-layout .card { margin-bottom: 0; }
.locations-layout { margin-bottom: 1.5rem; }
#containersTable tr.site-row td { background: var(--color-base-200); font-size: 0.8125rem; }
#containersTable tr.row-picked td { background: var(--color-tint); }
.fill-bar { display: inline-block; width: 4rem; height: 0.375rem; margin-left: 0.5rem; background: var(--color-base-200); border-radius: 2px; vertical-align: middle; }
.fill-bar .fill { display: block; height: 100%; background: var(--chart-1); border-radius: 2px; }
.container-facts { padding: 0 1.25rem 1rem; display: flex; flex-direction: column; gap: 0.875rem; }
.container-defs { margin-top: 0; }
.label-preview { width: 100%; max-width: 20rem; aspect-ratio: 2 / 1; border: 1px solid var(--color-line-strong); border-radius: 0.25rem; padding: 0.5rem 0.75rem; display: flex; flex-direction: column; gap: 0.125rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.label-preview-top { display: flex; justify-content: space-between; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.04em; }
.label-preview-bucket { font-weight: 700; font-size: 0.75rem; }
.label-preview-code { font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.label-preview-barcode { width: 100%; height: 2.25rem; }
.label-preview-foot { font-size: 0.625rem; text-transform: uppercase; border-top: 1px solid var(--color-base-content); padding-top: 0.25rem; margin-top: auto; }
/* the unit page */
.unit-page .breadcrumb { margin-top: 0.5rem; }
.unit-head { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: flex-start; margin-bottom: 1rem; }
.unit-head .title-line { margin-bottom: 0.25rem; }
.unit-head .page-description { margin: 0; }
.unit-head-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.unit-steps-card { padding: 1rem 1.25rem; }
.unit-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: relative; }
.unit-steps::before { content: ''; position: absolute; left: calc(100% / var(--steps, 8) / 2); right: calc(100% / var(--steps, 8) / 2); top: 7px; border-top: 2px solid var(--color-line-strong); }
.unit-step { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; text-align: center; position: relative; min-width: 0; }
.unit-step-dot { width: 16px; height: 16px; border-radius: 50%; background: var(--color-base-content); border: 2px solid var(--color-card); box-shadow: 0 0 0 1px var(--color-base-content); }
.unit-step.later .unit-step-dot { background: var(--color-card); box-shadow: 0 0 0 1px var(--color-line-strong); }
.unit-step.current .unit-step-dot { background: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.unit-step-word { font-size: 0.8125rem; font-weight: 600; }
.unit-step.later .unit-step-word { color: var(--color-faint); font-weight: 500; }
.unit-step.current .unit-step-word { color: var(--color-primary); }
.unit-step-note { font-size: 0.75rem; color: var(--color-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.unit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.5rem; }
.unit-layout .card-intro { align-items: baseline; }
.where-line { font-size: 1.125rem; font-weight: 600; display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.where-line .link { font-size: 1.125rem; font-weight: 700; }
.where-sep { color: var(--color-faint); font-weight: 400; }
.side-defs { padding: 0 1.25rem 1rem; margin-top: 0; }
.side-defs > div { grid-template-columns: 6.5rem minmax(0, 1fr); }
.side-defs dd { font-variant-numeric: normal; }
.unit-timeline { list-style: none; margin: 0; padding: 0 1.25rem 1rem; }
.unit-event { display: grid; grid-template-columns: 6.5rem 1rem minmax(0, 1fr) auto; gap: 0.5rem; padding: 0.5rem 0; align-items: start; font-size: 0.8125rem; }
.unit-event-when { color: var(--color-subtle); white-space: nowrap; }
.unit-event-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 0.3rem; background: var(--color-base-content); }
.unit-event.muted .unit-event-dot { background: var(--color-base-content); }
.unit-event.faint .unit-event-dot { background: var(--chart-grey); }
.unit-event.plum .unit-event-dot { background: var(--chart-1); }
.unit-event.up .unit-event-dot { background: var(--chart-4); }
.unit-event.down .unit-event-dot { background: var(--chart-6); }
.unit-event-body { display: flex; flex-direction: column; min-width: 0; }
.unit-event-what { font-weight: 600; }
.unit-event-words { color: var(--color-subtle); overflow-wrap: anywhere; }
.unit-event-who { color: var(--color-subtle); white-space: nowrap; }
.unit-exceptions { list-style: none; margin: 0; padding: 0 1.25rem 1rem; display: flex; flex-direction: column; gap: 0.625rem; }
@media (max-width: 1063px) {
    .locations-layout.with-panel { grid-template-columns: minmax(0, 1fr); }
    .unit-layout { grid-template-columns: minmax(0, 1fr); }
    .hold-head { grid-template-columns: 1fr 1fr; }
    .hold-head .hold-note { grid-column: span 2; }
}
@media (max-width: 640px) {
    .scan-box-hint { display: none; }
    .filter-bar > .grow { flex-basis: auto; }
    .hold-head { grid-template-columns: 1fr; }
    .hold-head .hold-note { grid-column: span 1; }
    .unit-steps { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 0.75rem; }
    .unit-steps::before { display: none; }
    /* a phone leads with where the unit is and the bench's action: the head, then the side cards */
    .unit-layout { display: flex; flex-direction: column; }
    .unit-layout .unit-side { display: contents; }
    .unit-layout .unit-main { display: contents; }
    #whereCard { order: 1; } #onCard { order: 2; } #deviceCard { order: 3; } #sourceCard { order: 4; } #exceptionsCard { order: 5; } #takeoutCard { order: 5; } #reportsCard { order: 6; } #moneyCard { order: 7; } #timelineCard { order: 8; }
    .unit-head-actions .btn { flex: 1 1 auto; }
    .unit-event { grid-template-columns: 1rem minmax(0, 1fr); }
    .unit-event-when { grid-column: 2; order: 3; }
    .unit-event-who { grid-column: 2; order: 4; }
    .unit-event-dot { grid-row: span 3; }
    .available-table th:nth-child(4), .available-table td:nth-child(4), .available-table th:nth-child(5), .available-table td:nth-child(5),
    .available-table th:nth-child(6), .available-table td:nth-child(6) { display: none; }
    .attention-item { border-right: 0; border-bottom: 1px solid var(--color-line); }
}

/* Orders by line (WHOLESALE_PLAN.md A4): the order page's steps strip (the unit page's strip, six steps), the lines
   table's short and removed rows, the figures foot; the hold dialog's price column and its warning */
.order-steps { --steps: 6; }
#linesTable tr.line-short td { background: color-mix(in srgb, var(--color-warning) 6%, transparent); }
#linesTable tr.line-removed td { color: var(--color-faint); text-decoration: line-through; }
#linesTable tfoot.lines-foot th { font-size: 0.8125rem; }
/* The wholesale order page (decision 23, A5; the rules ported from docs/design/shipping/mock.css): the lines full
   width above the two columns, the payment callout, the side cards' narrower terms, the phone layout */
.order-page .unit-steps-card { margin-bottom: 1.5rem; }
.order-page .card-intro > div:first-child { flex: 1 1 24rem; min-width: 0; }
.order-page .card-intro .card-actions { flex: 0 0 auto; }
.order-page #linesTable td, .order-page #linesTable th { white-space: nowrap; }
.order-page #linesTable td:first-child { white-space: normal; min-width: 14rem; }
.order-page .lines-foot th { font-size: 0.8125rem; white-space: normal; }
.order-page #linesTable { width: 100%; }
.order-page .lines-admin th { color: var(--color-subtle); font-weight: 400; }
.order-page .premium-ok { color: var(--color-success); font-weight: 600; }
.order-page .premium-under { color: var(--color-warning); font-weight: 600; }
.line-phone { display: none; }
.lines-summary { display: none; }
/* The Settlement card (A8): the ledger-like rows, a muted row for an entry that moves no money here (the Xero tax
   invoice, the freight at cost), a down-coloured row for a good-faith settlement; the dialog's unit list */
.order-page .settle-table td, .order-page .settle-table th { font-size: 0.8125rem; }
.order-page .settle-table td:first-child { white-space: normal; min-width: 14rem; }
.order-page .settle-table tr.settle-muted td { color: var(--color-subtle); }
.order-page .settle-table tr.settle-down td:last-child { color: var(--chart-6); font-weight: 600; }
.order-page .settle-table tfoot th { white-space: normal; }
.settle-units { display: flex; flex-direction: column; gap: 0.125rem; max-height: 14rem; overflow-y: auto; border: 1px solid var(--color-line); border-radius: 0.375rem; padding: 0.375rem 0.5rem; }
.settle-unit { display: grid; grid-template-columns: auto 8.5rem minmax(0, 1fr) auto; gap: 0.5rem; align-items: center; font-size: 0.8125rem; cursor: pointer; }
.settle-unit .settle-unit-model { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.settle-unit .tabular { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) { .settle-unit { grid-template-columns: auto minmax(0, 1fr) auto; } .settle-unit .settle-unit-model { display: none; } }
.pay-grid { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.due-callout { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.125rem; border-radius: 0.5rem; background: color-mix(in srgb, var(--color-primary) 8%, transparent); border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent); }
.due-label { font-size: 0.75rem; color: var(--color-subtle); }
.due-amount { font-size: 1.5rem; font-weight: 700; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.due-words { font-size: 0.75rem; color: var(--color-subtle); }
.pay-grid .def-list { margin-top: 0; padding: 0; }
.order-page .side-defs > div { grid-template-columns: 6rem minmax(0, 1fr); }
.order-page .def-list.def-rows:not(.side-defs) > div { grid-template-columns: 7.5rem minmax(0, 1fr); }
.order-page .cell-note { display: block; font-size: 0.75rem; color: var(--color-subtle); }
.order-page .cell-note.wrap { white-space: normal; }
/* the units, boxes and pull list fold under the activity (nothing of them is on the mockup) */
.order-details > summary { list-style: none; cursor: pointer; }
.order-details > summary::-webkit-details-marker { display: none; }
.order-details > summary .card-title::after { content: ' ▸'; color: var(--color-faint); font-weight: 400; }
.order-details[open] > summary .card-title::after { content: ' ▾'; }
@media (max-width: 1063px) { .pay-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .order-page .unit-layout { display: flex; flex-direction: column; }
  .order-page .unit-layout .unit-side, .order-page .unit-layout .unit-main { display: contents; }
  #linesCard { order: 1; } #paymentCard { order: 2; } #fulfilCard { order: 3; } #shipmentCard { order: 3; } #bookingCard { order: 4; } #docsCard { order: 5; } #buyerCard { order: 6; } #orderCard { order: 7; } #moneyCard { order: 8; } #timelineCard { order: 9; } #pullCard { order: 10; } #unitsCard { order: 11; } #boxesCard { order: 12; }
  .order-page .unit-head-actions .btn { flex: 1 1 auto; }
  /* a phone keeps Model and Line total (the grade, found of asked and the unit price under the model); the foot's figures stay on screen as a list */
  .order-page #linesTable th:not(:first-child):not(:last-child), .order-page #linesTable td:not(:first-child):not(:last-child) { display: none; }
  .line-phone { display: block; font-size: 0.75rem; color: var(--color-subtle); }
  .order-page #linesTable tfoot { display: none; }
  .lines-summary { display: block; margin: 0; padding: 0.5rem 1rem 1rem; }
  .lines-summary > div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.375rem 0; border-bottom: 1px solid var(--color-line); font-size: 0.8125rem; }
  .lines-summary > div:last-child { border-bottom: 0; }
  .lines-summary dt { color: var(--color-subtle); }
  .lines-summary dd { margin: 0; font-variant-numeric: tabular-nums; }
  .lines-summary .is-total dt, .lines-summary .is-total dd { font-weight: 600; color: var(--color-base-content); }
  .order-page #linesTable td:first-child { min-width: 0; white-space: normal; }
  .order-page .lines-foot th { white-space: normal; }
}
/* The enquiry log (WHOLESALE_PLAN.md A7): the form on the Enquiries tab, its note cell in the table */
.enquiry-form { padding: 0 1.25rem 1.25rem; }
.enquiry-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.75rem; }
.enquiry-grid > div { grid-column: span 1; }
.enquiry-grid > div:first-child { grid-column: span 2; }
.enquiry-grid .enquiry-device { grid-column: span 3; }
.enquiry-grid .enquiry-note { grid-column: span 4; }
.enquiry-actions { display: flex; justify-content: flex-end; margin-top: 0.75rem; }
.enquiry-note-cell { white-space: normal; max-width: 20rem; }
@media (max-width: 1063px) { .enquiry-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .enquiry-grid .enquiry-device, .enquiry-grid .enquiry-note { grid-column: span 4; } }
@media (max-width: 640px) { .enquiry-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .enquiry-grid > div:first-child, .enquiry-grid .enquiry-device, .enquiry-grid .enquiry-note { grid-column: span 2; } }
.hold-lines .price-cell { width: 6.5rem; text-align: right; }
.hold-lines .price-note { display: block; font-size: 0.6875rem; line-height: 1.2; white-space: normal; max-width: 11rem; color: var(--color-subtle); }
.hold-lines .price-note.is-under, .hold-lines .price-note.is-missing { color: var(--color-warning); font-weight: 600; }
.hold-lines .price-cell.is-under { border-color: var(--color-warning); }
.hold-lines .price-cell.is-missing { border-color: var(--color-error); }
.hold-money b { color: var(--color-base-content); }
.hold-lines:not(.is-wholesale) .price-col { display: none; }

/* Record purchase (services/purchases.py): the invoice's fields in a row that wraps, the notes across it */
.purchase-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem 1rem; }
.purchase-head .purchase-notes { grid-column: 1 / -1; }
.purchase-lines td { vertical-align: top; }
/* the scan station on a purchase: the models still to come, each with a button per grade */
.scan-choices { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; }
.scan-choice-name { font-weight: 500; margin-bottom: 0.25rem; }
/* the Catalog's Add several SKUs: the SKUs checked scroll inside the dialog, a check's words and Claude's reasons wrap */
.bulk-list { max-height: 24rem; overflow-y: auto; border: 1px solid var(--color-line); border-radius: 0.375rem; }
.bulk-list td { vertical-align: top; }
.bulk-list .cell-note, .bulk-models .cell-note { white-space: normal; }
.bulk-models .bulk-reason { min-width: 12rem; }
/* An ITAD job at the dock and the bench (I2b of ITAD_PLAN.md): the job page's strip (the unit page's, five steps),
   the dock's count page (the Count button and the bins' running counts) */
.itad-steps { --steps: 5; }
.itad-job .next-item.flex-wrap { flex-wrap: wrap; align-items: center; }

/* ── The ITAD client portal (ITAD_PLAN.md I5; docs/design/portal/): base_public.html with its own top bar, never the
   staff shell. The bar: the brand, ghost links with the active one on the plum tint, the contact and client at the
   right with Sign out. The pages reuse the staff components (KPI strip, stage bar, tabs, cost list, trail steps,
   share bar); the rules below are only the portal's own. ── */
.portal-bar { display: flex; align-items: center; gap: 0.5rem 1.5rem; flex-wrap: wrap; padding: 0.75rem 1.5rem;
    background: var(--color-base-100); border-bottom: 1px solid var(--color-line); }
.portal-brand { font-weight: 700; font-size: 1.125rem; letter-spacing: -0.01em; color: var(--color-base-content); text-decoration: none; }
.portal-nav { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.portal-nav a { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; border-radius: 0.375rem;
    font-size: 0.875rem; color: var(--color-base-content); text-decoration: none; }
.portal-nav a:hover { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.portal-nav a.active { background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary); }
.portal-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 0.375rem;
    border-radius: 999px; background: var(--color-primary); color: #ffffff; font-size: 0.6875rem; font-weight: 600; }
.portal-who { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; }
.portal-who-text { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.portal-who-name { font-size: 0.875rem; font-weight: 600; }
.portal-who-client { font-size: 0.75rem; color: var(--color-subtle); }
.portal-page { padding-top: 0.5rem; }
.portal-sign-in { max-width: 28rem; margin: 2.5rem auto 0; }
.portal-sign-in .card-body { gap: 0.75rem; }
.portal-note { font-size: 0.875rem; padding: 0.75rem 1rem; border-radius: 0.5rem; background: color-mix(in srgb, var(--color-info) 8%, transparent); }
.portal-note strong { color: var(--color-info); }
.portal-links { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.5rem 0 1rem -0.5rem; }
.portal-page .kpi-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-subtle); }
.portal-page .hidden-col { display: none; }
.portal-page .text-faint { color: var(--color-faint); }
.portal-page tr.row-link { cursor: pointer; }
.portal-page tr.row-link:hover td, .portal-page tr.selected td { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.portal-jobs td { vertical-align: top; }
/* the job's progress: erased in plum, at its end in the light plum, in processing grey, not received hatched */
.portal-bar-progress .erased { background: var(--chart-1); }
.portal-bar-progress .ended { background: var(--chart-ord-4); }
.portal-bar-progress .processing { background: var(--color-line-strong); }
.portal-bar-progress .not_received { background: repeating-linear-gradient(135deg, var(--chart-6) 0 3px, transparent 3px 6px); }
.portal-tabs .tab-issue { color: var(--color-warning); font-size: 0.8125rem; }
.portal-tabs .tab-done { color: var(--chart-4); }
/* two columns from 1024 px: the main card and its side (a device's panel, the statements, what happened) */
.portal-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1.5rem; }
@media (min-width: 1024px) {
    .portal-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .portal-two.portal-wide-left { grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); }
    .portal-two.portal-devices { grid-template-columns: minmax(0, 3fr) minmax(17rem, 1fr); }
    .portal-panel { position: sticky; top: 1rem; align-self: start; }
}
.portal-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; padding-bottom: 0.75rem; }
.portal-chips .chip { display: inline-flex; gap: 0.375rem; align-items: center; padding: 0.25rem 0.75rem; border-radius: 999px;
    border: 1px solid var(--color-line-strong); background: var(--color-base-100); font-size: 0.8125rem; cursor: pointer; }
.portal-chips .chip span { color: var(--color-subtle); }
.portal-chips .chip.active { border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
    background: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary); }
/* definition rows: a 9 rem label, the value wrapping beside it (right-aligned in a device's panel) */
.portal-dl { margin: 0; }
.portal-dl > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 0.75rem; padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-line); font-size: 0.875rem; }
.portal-dl > div:last-child { border-bottom: 0; }
.portal-dl dt { color: var(--color-subtle); font-size: 0.8125rem; }
.portal-dl dd { margin: 0; overflow-wrap: anywhere; }
/* a hash in a note breaks where it must (I6: the job page's Sent through the portal card at 390 px) */
.portal-dl dd .cell-note { white-space: normal; overflow-wrap: anywhere; }
.portal-dl.right dd { text-align: right; }
.portal-panel .portal-dl > div { grid-template-columns: 6rem minmax(0, 1fr); gap: 0.5rem; }
.portal-page table.dataTable tfoot th.text-end { text-align: right; }
.portal-device-table td .cell-note { white-space: normal; max-width: 16rem; }
.portal-page .cost-list dt .cell-note { white-space: normal; }
.portal-statements { list-style: none; margin: 0; }
.portal-statements a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.625rem 0.75rem;
    border-radius: 0.375rem; color: var(--color-base-content); text-decoration: none; font-size: 0.875rem; }
.portal-statements a:hover, .portal-statements a.active { background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.portal-amount { font-family: var(--font-figures); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.portal-files { list-style: none; margin: 0; padding-bottom: 0.5rem; }
.portal-files li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-line); font-size: 0.875rem; }
.portal-files .cell-note { white-space: normal; }
/* what happened to the devices: the categories on the ordinal plum shades */
.portal-cat-0 { background: var(--chart-ord-1); } .portal-cat-1 { background: var(--chart-ord-2); }
.portal-cat-2 { background: var(--chart-ord-3); } .portal-cat-3 { background: var(--chart-ord-4); color: var(--color-base-content); }
.portal-cat-4, .portal-cat-5, .portal-cat-6 { background: var(--chart-ord-5); color: var(--color-base-content); }
.portal-cats { list-style: none; margin: 0.75rem 0 0; padding: 0; }
.portal-cats li { display: grid; grid-template-columns: 0.75rem minmax(0, 1fr) auto; gap: 0.625rem; align-items: center;
    padding: 0.5rem 0.75rem; margin-top: 0.375rem; border-radius: 0.375rem; background: var(--color-base-200); font-size: 0.875rem; }
.portal-swatch { width: 0.75rem; height: 0.75rem; border-radius: 0.1875rem; }
.portal-cat-n { font-weight: 600; font-family: var(--font-figures); font-variant-numeric: tabular-nums; }
/* I5b, the actions: a lock row's Released and its election side by side; a dispute's block under the callout, its
   details opening the form with three photo slots (dashed, as the drop zone; a chosen file's slot on the plum tint);
   a note under a line not received; Send a new list's collection fields three to a row, the notes the full width */
.portal-row-actions { display: inline-flex; flex-wrap: nowrap; justify-content: flex-end; align-items: center; gap: 0.375rem; }
.portal-elect { display: inline-flex; gap: 0.25rem; align-items: center; }
.portal-elect select { min-width: 10.5rem; }
.portal-locks td { vertical-align: middle; }
.portal-dispute { padding: 0.25rem 1.25rem 1.25rem; }
.portal-dispute-next { border-top: 1px solid var(--color-line); padding-top: 1rem; }
.portal-details > summary { list-style: none; cursor: pointer; margin-top: 0.75rem; }
.portal-details > summary::-webkit-details-marker { display: none; }
.portal-details[open] > summary { margin-bottom: 0.75rem; }
.portal-dispute-form { display: grid; gap: 0.75rem; max-width: 46rem; }
.portal-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
.portal-photo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; min-height: 6.5rem;
    padding: 0.75rem; border: 1.5px dashed var(--color-line-strong); border-radius: 0.5rem; background: var(--color-base-200);
    color: var(--color-subtle); text-align: center; cursor: pointer; overflow-wrap: anywhere; }
.portal-photo:focus-within { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.portal-photo.has-file { border-style: solid; border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
    background: color-mix(in srgb, var(--color-primary) 6%, transparent); color: var(--color-primary); }
.portal-photo-word { font-weight: 600; font-size: 0.875rem; }
.portal-not-received td { vertical-align: top; }
.portal-not-received td.portal-actions-cell { width: 24rem; }
.portal-note-line { font-size: 0.8125rem; text-align: left; max-width: 24rem; margin-left: auto; padding-bottom: 0.375rem; white-space: normal; }
.portal-note-form > summary { margin-top: 0; }
.portal-form-inline { display: grid; gap: 0.5rem; justify-items: end; min-width: 16rem; max-width: 24rem; margin-left: auto; }
.portal-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem 1.25rem; }
.portal-form .portal-form-wide { grid-column: 1 / -1; }
.portal-drop.active { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 4%, transparent); }
.portal-drop { margin: 1rem 1.25rem; }
/* on a phone a row that carries actions (a lock's, a line's note) stacks, each cell under its label, so no button
   hides behind a sideways scroll */
@media (max-width: 640px) {
    .portal-stack thead { display: none; }
    .portal-stack, .portal-stack tbody, .portal-stack tr, .portal-stack td { display: block; width: 100%; }
    .portal-stack tr { padding: 0.75rem 1.25rem; border-bottom: 1px solid var(--color-line); }
    .portal-stack td { padding: 0.125rem 0; border: 0; text-align: left; }
    .portal-stack td[data-label]::before { content: attr(data-label); display: inline-block; width: 7.5rem;
        color: var(--color-subtle); font-size: 0.8125rem; font-family: var(--font-system); }
    .portal-stack td.portal-actions-cell { padding-top: 0.5rem; width: 100%; }
    .portal-stack .portal-row-actions { flex-wrap: wrap; justify-content: flex-start; }
    .portal-stack .portal-note-line, .portal-stack .portal-form-inline { margin-left: 0; max-width: none; justify-items: start; }
}
@media (max-width: 760px) {
    .portal-form { grid-template-columns: minmax(0, 1fr); }
    .portal-photos { grid-template-columns: minmax(0, 1fr); }
    .portal-photo { min-height: 3.5rem; }
}
@media (max-width: 640px) {
    .portal-dl > div { grid-template-columns: minmax(0, 1fr); gap: 0.125rem; }
    .portal-dl.right dd { text-align: left; }
    .portal-bar { padding: 0.75rem 1rem; }
    .portal-who { margin-left: 0; width: 100%; justify-content: space-between; }
    .portal-who-text { align-items: flex-start; }
}

/* ── The deals board (DEALS_TRACKER_PLAN.md; DESIGN.md "Deal card", "Stage bar", "Flow dots", "Quick view") ── */
.stage-bar.stage-bar-block, .deal-card .stage-bar, .deal-phone-card .stage-bar { display: flex; width: 100%; }
.deal-board { display: grid; grid-template-columns: repeat(5, minmax(13.5rem, 1fr)); gap: 0.75rem; overflow-x: auto;
    padding-bottom: 0.25rem; margin-bottom: 1.5rem; align-items: start; }
.deal-col { display: flex; flex-direction: column; gap: 0.625rem; min-width: 0; }
.deal-col-head { display: grid; grid-template-columns: 1fr auto; column-gap: 0.5rem; padding: 0 0.125rem 0.5rem;
    border-bottom: 2px solid var(--color-line-strong); }
.deal-col-word { font-size: 0.875rem; font-weight: 600; }
.deal-col-count { font-size: 0.8125rem; font-weight: 400; color: var(--color-subtle); }
.deal-col-total { font-size: 0.8125rem; font-weight: 600; font-family: var(--font-figures); font-variant-numeric: tabular-nums; }
.deal-col-note { grid-column: 1 / -1; font-size: 0.75rem; color: var(--color-subtle); }
.deal-col-empty { font-size: 0.8125rem; color: var(--color-faint); padding: 0.5rem 0.125rem; }
.deal-card { background: var(--color-base-100); border: 1px solid var(--color-line); border-radius: 0.5rem;
    padding: 0.75rem 0.875rem; display: flex; flex-direction: column; gap: 0.25rem; cursor: pointer; }
.deal-card:hover { border-color: var(--color-line-strong); background: color-mix(in srgb, var(--color-primary) 3%, var(--color-base-100)); }
.deal-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.deal-code { font-size: 0.75rem; color: var(--color-subtle); }
.deal-name { font-size: 0.875rem; font-weight: 600; line-height: 1.3; color: var(--color-base-content); }
.deal-sub { font-size: 0.75rem; color: var(--color-subtle); }
.deal-card .stage-bar { margin-top: 0.375rem; }
.deal-stage { font-size: 0.75rem; color: var(--color-subtle); }
.deal-stuck { color: var(--color-warning); font-weight: 600; }
.deal-figures { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-top: 0.375rem;
    font-size: 0.8125rem; }
.deal-value { font-weight: 600; font-family: var(--font-figures); font-variant-numeric: tabular-nums; white-space: nowrap; }
.deal-note { font-size: 0.75rem; color: var(--color-subtle); text-align: right; }
.deal-next { display: flex; gap: 0.375rem; align-items: baseline; font-size: 0.8125rem; line-height: 1.35;
    border-top: 1px solid var(--color-line); padding-top: 0.5rem; margin-top: 0.375rem; }
.deal-next .glyph { width: 0.625rem; flex: none; font-weight: 700; text-align: center; }
.deal-next .glyph.money { color: var(--color-warning); }
.deal-next .glyph.routine { color: var(--color-faint); }
.deal-next a { min-width: 0; overflow-wrap: anywhere; }
.deals-filters .deals-needs { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; align-self: end;
    height: 2rem; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--color-base-content); }
.deals-filters .deals-views { margin-left: auto; }
.deals-filters .deals-rates { flex-basis: 100%; text-align: right; font-size: 0.75rem; color: var(--color-subtle); margin: 0; }
.deals-phone, .deals-phone-filter, .deals-phone-more, .kpi-card .deals-phone-kpi-sub { display: none; }
.deals-phone-inline { display: none; }
.deals-page .link-plain { color: inherit; text-decoration: none; }
.deals-page .link-plain:hover { color: var(--color-primary); text-decoration: underline; }

/* the Flow: a dot a stage on one line, done plum with its day, the open stage an ochre ring with its days */
.flow-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 0.75rem; color: var(--color-subtle);
    margin: -0.5rem 0 0.75rem; }
.flow-legend > span { display: inline-flex; align-items: center; gap: 0.375rem; }
.flow-card .card-header, .deals-also .card-header { display: block; }
.flow-card .card-header p, .deals-also .card-header p { margin: 0.125rem 0 0; font-size: 0.8125rem; color: var(--color-subtle);
    font-weight: 400; }
.flow-table th.flow-head { text-align: center; }
.flow-table td.flow-deal { min-width: 13rem; }
.flow-table td.flow-next { min-width: 15rem; }
.flow-table td.flow-next .deal-next { border-top: 0; padding-top: 0.25rem; margin-top: 0; }
.flow-cell { position: relative; text-align: center; min-width: 5.25rem; vertical-align: top; padding-top: 0.875rem !important; }
.flow-cell::before { content: ''; position: absolute; left: 0; right: 0; top: 1.25rem; height: 2px; background: var(--color-line-strong); }
.flow-cell.done::before { background: var(--color-primary); }
.flow-cell.current::before { background: linear-gradient(to right, var(--color-primary) 50%, var(--color-line-strong) 50%); }
.flow-cell.last::before { right: 50%; }
.flow-cell.first::before { left: 50%; }
.flow-next-inline { display: none; }
@media (max-width: 1279px) {
    .flow-table td.flow-next, .flow-table th.flow-next-head { display: none; }
    .flow-next-inline { display: block; margin-top: 0.375rem; white-space: normal; }
    .flow-next-inline .deal-next { border-top: 0; padding-top: 0.25rem; margin-top: 0; }
    .flow-table td.flow-deal { min-width: 10.5rem; max-width: 14rem; }
    .flow-cell { min-width: 3.75rem; padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
    .flow-day { font-size: 0.6875rem; }
}
.flow-cell.first.current::before { background: var(--color-line-strong); }
.flow-cell.last.current::before { background: var(--color-primary); }
.flow-dot { position: relative; z-index: 1; display: inline-block; width: 0.875rem; height: 0.875rem; border-radius: 9999px;
    background: var(--color-base-100); border: 2px solid var(--color-line-strong); vertical-align: middle; }
.flow-dot.done { background: var(--color-primary); border-color: var(--color-primary); }
.flow-dot.current { border-color: var(--color-warning); border-width: 3px; }
.flow-day { display: block; margin-top: 0.25rem; font-size: 0.75rem; color: var(--color-subtle); white-space: nowrap; }
.flow-cell.current .flow-day { color: var(--color-warning); font-weight: 600; }

/* the phone (T5): grouped by who each deal waits on, no sideways scroll */
.deal-phone-card { background: var(--color-base-100); border: 1px solid var(--color-line); border-radius: 0.5rem;
    padding: 0.875rem 1rem; margin-bottom: 0.625rem; display: flex; flex-direction: column; gap: 0.25rem; }
.deal-phone-top { display: flex; justify-content: space-between; gap: 0.75rem; align-items: baseline; }
.deal-phone-stage { display: flex; align-items: center; gap: 0.625rem; font-size: 0.75rem; color: var(--color-subtle);
    margin-top: 0.25rem; }
.deal-phone-stage .stage-bar { flex: 0 0 9.5rem; width: 9.5rem; }
.deal-phone-card .deal-next { border-top: 0; padding-top: 0.125rem; margin-top: 0; }
.deals-phone-head { font-size: 1rem; font-weight: 600; margin: 1.25rem 0 0.625rem; }
.deals-phone-rows { background: var(--color-base-100); border: 1px solid var(--color-line); border-radius: 0.5rem; }
.deals-phone-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-line); }
.deals-phone-row:last-child { border-bottom: 0; }
.deals-phone-row .cell-note { white-space: normal; }
.deals-phone-calm { font-size: 0.8125rem; color: var(--color-subtle); margin: 1rem 0; }
@media (max-width: 640px) {
    .deals-desk, .deals-desk-board, .deals-desk-filter, .deals-desk-kpi, .kpi-card .deals-desk-kpi-sub { display: none !important; }
    .deals-phone, .deals-phone-filter, .kpi-card .deals-phone-kpi-sub { display: block; }
    .deals-phone-more { display: inline-block; }
    .deals-desk-inline { display: none; }
    .deals-phone-inline { display: inline; }
    .deals-phone-more .dropdown-content { right: 0; left: auto; width: 13rem; z-index: 20; }
    .deals-page .deals-new { flex: 1 1 auto; }
    .deals-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .deals-filters .deals-search { grid-column: 1 / -1; }
    .deals-filters .deals-search input { width: 100%; }
    .deals-filters .select { width: 100%; min-width: 0; }
    .deals-page #dealsClosed { display: none; }
}
.deal-next-inline .glyph { font-weight: 700; }
.deal-next-inline .glyph.money { color: var(--color-warning); }
.deal-next-inline .glyph.routine { color: var(--color-faint); }

/* the quick view (T4): a side panel from 1024 px over a dimmed page, the whole screen on a phone */
.deal-quick-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / 0.25); z-index: 1036; }
.deal-quick { position: fixed; top: 0; right: 0; bottom: 0; width: min(36rem, 100vw); background: var(--color-base-100);
    border-left: 1px solid var(--color-line); box-shadow: -8px 0 24px rgb(0 0 0 / 0.08); z-index: 1037; overflow-y: auto;
    padding: 1.25rem 1.5rem 2rem; outline: none; }
.deal-quick[hidden], .deal-quick-backdrop[hidden] { display: none; }
body.deal-quick-open { overflow: hidden; }
.deal-quick-close { position: absolute; top: 0.875rem; right: 0.875rem; }
.deal-quick-crumb { font-size: 0.8125rem; color: var(--color-subtle); padding-right: 2.5rem; }
.deal-quick-title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin-top: 0.375rem; }
.deal-quick-title h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.deal-quick-facts { font-size: 0.875rem; color: var(--color-subtle); margin: 0.25rem 0 0; }
.deal-quick-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--color-line); }
.deal-quick-callout { margin-top: 1rem; padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 0.875rem;
    background: color-mix(in srgb, var(--color-warning) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-warning) 25%, transparent); }
.deal-quick-next { border-top: 0; margin-top: 1rem; padding-top: 0; }
.deal-quick-next.deal-quick-more { margin-top: 0.5rem; }
/* what else needs you on a card (T7): under its Next line, in the line's indent */
.deal-more { font-size: 0.75rem; color: var(--color-subtle); padding-left: 1rem; }
/* Also needs you (T7): a deal a row, its `!` lines beside it; stacked on a phone */
.deals-also-list { list-style: none; margin: 0; padding: 0 1.25rem; }
.deals-also-list li { display: grid; grid-template-columns: minmax(12rem, 20rem) minmax(0, 1fr); gap: 0.25rem 1.5rem;
    padding: 0.75rem 0; border-top: 1px solid var(--color-line); }
.deals-also-list li:first-child { border-top: 0; }
.deals-also-items .deal-next { border-top: 0; padding-top: 0; margin-top: 0; }
.deals-also-items .deal-next + .deal-next { margin-top: 0.375rem; }
@media (max-width: 640px) {
    .deals-also-list { padding: 0 1rem; }
    .deals-also-list li { grid-template-columns: minmax(0, 1fr); }
}
.deal-quick .deal-quick-money { margin: 1rem 0 0; }
.deal-quick .deal-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; }
.deal-quick-section { margin-top: 1.5rem; }
.deal-quick-section h3 { font-size: 1rem; font-weight: 600; margin: 0 0 0.625rem; }
.deal-quick-lead { font-size: 0.8125rem; color: var(--color-subtle); margin: -0.375rem 0 0.75rem; }
.deal-where { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; list-style: none; padding: 0; margin: 0; }
.deal-where li { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.deal-where-seg { height: 8px; border-radius: 2px; background: var(--color-line-strong); margin-bottom: 0.375rem; }
.deal-where li.done .deal-where-seg { background: var(--color-primary); }
.deal-where li.open .deal-where-seg { background: var(--color-warning); }
.deal-where-word { font-size: 0.75rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deal-where-day { font-size: 0.75rem; color: var(--color-subtle); white-space: nowrap; }
.deal-where li.open .deal-where-day { color: var(--color-warning); font-weight: 600; }
.deal-sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.deal-side { border: 1px solid var(--color-line); border-radius: 0.5rem; overflow: hidden; }
.deal-side-head { display: flex; flex-direction: column; padding: 0.625rem 0.875rem; background: var(--color-base-200); font-size: 0.875rem; }
.deal-side ul { list-style: none; margin: 0; padding: 0 0.875rem; }
.deal-side li { display: flex; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--color-line); font-size: 0.8125rem; }
.deal-side li:last-child { border-bottom: 0; }
.deal-side li .cell-note { white-space: normal; }
.deal-side-glyph { width: 0.875rem; flex: none; font-weight: 700; color: var(--color-faint); text-align: center; }
.deal-side li.done .deal-side-glyph { color: var(--color-success); }
.deal-side li.open .deal-side-glyph { color: var(--color-warning); }
.deal-cash dl { margin: 0; padding: 0.25rem 1.25rem 0.5rem; }
.deal-cash dl > div { display: grid; grid-template-columns: 9rem 1fr; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--color-line); font-size: 0.8125rem; }
.deal-cash dl > div:last-child { border-bottom: 0; }
.deal-cash dt { color: var(--color-subtle); }
.deal-cash dd { margin: 0; }
.deal-activity { list-style: none; margin: 0 0 0.5rem; padding: 0; }
.deal-activity li { position: relative; padding: 0 0 0.75rem 1.25rem; font-size: 0.8125rem; }
.deal-activity li::before { content: ''; position: absolute; left: 0.125rem; top: 0.375rem; width: 0.5rem; height: 0.5rem;
    border-radius: 9999px; background: var(--color-line-strong); }
.deal-activity .cell-note { white-space: normal; }
@media (max-width: 1023px) {
    .deal-quick { width: 100vw; border-left: 0; padding: 1rem 1rem 2rem; }
    .deal-sides { grid-template-columns: minmax(0, 1fr); }
}
.deal-quick .deal-cell .kpi-label { font-size: 0.6875rem; font-weight: 600; color: var(--color-subtle); text-transform: uppercase;
    letter-spacing: 0.04em; margin-bottom: 0.25rem; }
/* Forward price files' Months carried over: the filter bar's controls, without its own card inside the card */
.carry-form.filter-bar { border: 0; box-shadow: none; padding: 0; margin: 0.75rem 0 0; background: none; }