:root,
[data-bs-theme="light"] {
    --kosmos-brand: #71b74b;
    --kosmos-brand-rgb: 113, 183, 75;
    --kosmos-brand-strong: #589a36;
    --kosmos-brand-soft: #e8f4e1;
    --kosmos-canvas: #f5f6f3;
    --kosmos-surface: #ffffff;
    --kosmos-surface-raised: #ffffff;
    --kosmos-surface-muted: #edf0ea;
    --kosmos-text: #172013;
    --kosmos-text-muted: #697064;
    --kosmos-border: #dfe4da;
    --kosmos-sidebar: #111510;
    --kosmos-sidebar-muted: #aeb5aa;
    --kosmos-stage: #182017;
    --kosmos-stage-text: #f7faf5;
    /* Tint marking a generated test row in a grid. A token rather than a literal because it
       sits behind --kosmos-text, which inverts with the theme: the light value under a dark
       theme's near-white text is unreadable. */
    --kosmos-test-row: #fff7da;
    --kosmos-shadow: 0 12px 32px rgba(27, 39, 22, 0.08);
    --kosmos-shadow-hover: 0 18px 42px rgba(27, 39, 22, 0.14);

    --bs-primary: var(--kosmos-brand);
    --bs-primary-rgb: var(--kosmos-brand-rgb);
    --bs-body-color: var(--kosmos-text);
    --bs-body-bg: var(--kosmos-canvas);
    --bs-border-color: var(--kosmos-border);
    --bs-link-color: var(--kosmos-brand-strong);
    --bs-link-hover-color: #447c29;
}

[data-bs-theme="dark"] {
    --kosmos-brand: #71b74b;
    --kosmos-brand-rgb: 113, 183, 75;
    --kosmos-brand-strong: #8dcc69;
    --kosmos-brand-soft: #21331a;
    --kosmos-canvas: #121411;
    --kosmos-surface: #1b1e1a;
    --kosmos-surface-raised: #232621;
    --kosmos-surface-muted: #2a2e28;
    --kosmos-text: #f4f6f2;
    --kosmos-text-muted: #a8afa4;
    --kosmos-border: #343a31;
    --kosmos-sidebar: #090b09;
    --kosmos-sidebar-muted: #9da49a;
    --kosmos-stage: #0c0f0b;
    --kosmos-stage-text: #f7faf5;
    --kosmos-test-row: #3b3418;
    --kosmos-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
    --kosmos-shadow-hover: 0 18px 46px rgba(0, 0, 0, 0.34);

    --bs-body-color: var(--kosmos-text);
    --bs-body-bg: var(--kosmos-canvas);
    --bs-border-color: var(--kosmos-border);
    --bs-link-color: var(--kosmos-brand-strong);
    --bs-link-hover-color: #a4da87;
}

html,
body {
    min-height: 100%;
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--kosmos-canvas);
    color: var(--kosmos-text);
}

body {
    letter-spacing: -0.01em;
}

a,
.btn-link {
    color: var(--kosmos-brand-strong);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--kosmos-text);
    letter-spacing: -0.035em;
}

.btn {
    min-height: 2.75rem;
    padding: 0.6rem 1.1rem;
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0;
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, border-color 150ms ease;
}

.btn:hover:not(:disabled) {
    transform: translateY(-1px);
}

.btn-primary {
    color: #0d140a;
    background-color: var(--kosmos-brand);
    border-color: var(--kosmos-brand);
    box-shadow: 0 7px 18px rgba(var(--kosmos-brand-rgb), 0.2);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    color: #081005;
    background-color: #82c960;
    border-color: #82c960;
    box-shadow: 0 9px 22px rgba(var(--kosmos-brand-rgb), 0.28);
}

.btn-secondary {
    color: var(--kosmos-text);
    background-color: var(--kosmos-surface-muted);
    border-color: var(--kosmos-surface-muted);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
    color: var(--kosmos-text);
    background-color: var(--kosmos-border);
    border-color: var(--kosmos-border);
}

.btn-outline-secondary {
    color: var(--kosmos-text);
    border-color: var(--kosmos-border);
    background-color: transparent;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus-visible {
    color: var(--kosmos-text);
    border-color: var(--kosmos-text-muted);
    background-color: var(--kosmos-surface-muted);
}

.btn:focus-visible,
.btn-link.nav-link:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--kosmos-brand);
    box-shadow: 0 0 0 0.22rem rgba(var(--kosmos-brand-rgb), 0.22);
}

.content {
    width: min(100%, 1440px);
    margin: 0 auto;
    padding-top: 2rem;
    padding-bottom: 4rem;
}

h1:focus {
    outline: none;
}

.form-control,
.form-select {
    min-height: 2.85rem;
    color: var(--kosmos-text);
    background-color: var(--kosmos-surface-muted);
    border-color: transparent;
    border-radius: 9px;
}

.form-control::placeholder {
    color: var(--kosmos-text-muted);
}

.form-control:focus,
.form-select:focus {
    color: var(--kosmos-text);
    background-color: var(--kosmos-surface);
}

.form-check-input:checked {
    background-color: var(--kosmos-brand);
    border-color: var(--kosmos-brand);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--kosmos-brand);
}

.invalid {
    outline: 1px solid #e25555;
}

.validation-message {
    color: #e25555;
}

.blazor-error-boundary {
    padding: 1rem;
    color: white;
    background: #b32121;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

.darker-border-checkbox.form-check-input {
    border-color: var(--kosmos-text-muted);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.auction-home {
    position: relative;
    min-height: calc(100vh - 9rem);
    display: grid;
    align-content: center;
    gap: 1.75rem;
    max-width: 1050px;
    padding: clamp(3.5rem, 10vh, 7rem) 0;
}

.auction-home::before {
    content: "";
    width: 4rem;
    height: 0.3rem;
    margin-bottom: 0.5rem;
    border-radius: 999px;
    background: var(--kosmos-brand);
}

.auction-home > div:first-of-type {
    max-width: 760px;
}

.auction-home h1,
.page-header h1 {
    margin: 0;
    color: var(--kosmos-text);
    font-weight: 800;
}

.auction-home h1 {
    max-width: 720px;
    font-size: clamp(3rem, 7vw, 5.75rem);
    line-height: 0.95;
}

.page-header h1 {
    font-size: clamp(2rem, 4vw, 3.25rem);
}

.lead {
    max-width: 650px;
    margin-top: 1.25rem;
    color: var(--kosmos-text-muted);
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.65;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    color: var(--kosmos-brand-strong);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--kosmos-brand);
    box-shadow: 0 0 0 0.3rem rgba(var(--kosmos-brand-rgb), 0.15);
}

.home-actions,
.command-bar,
.inline-form,
.buy-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.command-bar {
    padding: 1rem 0;
}

.command-bar.compact {
    padding-bottom: 0;
}

.clock-settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.clock-settings-grid > label {
    display: grid;
    align-content: start;
    min-width: 0;
}

@media (min-width: 701px) {
    /* Two columns sit side by side here, so reserve two caption lines in every
       field. Without it a caption that wraps pushes its own control a line
       lower than the control beside it, and the same row of two clock cards
       stops lining up. */
    .clock-settings-grid > label {
        grid-template-rows: minmax(3rem, auto);
    }
}

.clock-setup-panel {
    align-self: start;
}

.clock-setup-panel summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    color: #1f2925;
    font-size: 1.05rem;
    font-weight: 700;
    list-style: none;
}

.clock-setup-panel summary::-webkit-details-marker {
    display: none;
}

.clock-setup-panel summary::after {
    content: "+";
    color: #65716b;
    font-size: 1.25rem;
    font-weight: 400;
}

.clock-setup-panel[open] summary::after {
    content: "-";
}

.clock-setup-panel[open] .clock-settings-grid {
    margin-top: 1rem;
}

.setup-summary {
    margin-left: auto;
    color: #65716b;
    font-size: 0.78rem;
    font-weight: 400;
}

.clock-settings-grid .hint {
    grid-column: 1 / -1;
    margin: 0;
}

.clock-control-deck {
    display: grid;
    grid-template-columns: minmax(15rem, auto) 1fr;
    gap: 0.75rem 1rem;
    align-items: center;
    min-height: 7.5rem;
    margin: 1rem 0;
    padding: 1rem 0;
    border-top: 1px solid #d9ded6;
    border-bottom: 1px solid #d9ded6;
}

.clock-primary-action {
    display: flex;
    align-items: center;
    min-height: 3rem;
}

.clock-primary-action .btn {
    min-width: 15rem;
}

.clock-manual-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-end;
}

.clock-control-deck kbd,
.award-actions kbd {
    margin-left: 0.35rem;
    padding: 0.12rem 0.35rem;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    box-shadow: none;
}

.clock-command-progress {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #56635d;
    font-size: 0.85rem;
}

.clock-state-callout {
    color: #56635d;
    font-weight: 600;
}

.test-data-badge {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.05rem 0.4rem;
    border: 1px solid var(--kosmos-border);
    border-radius: 999px;
    background: var(--kosmos-surface-muted);
    color: var(--kosmos-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.cleanup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    /* Dimming both themes from black keeps the dialog the brightest thing on screen
       in light mode and the only lit thing in dark mode. */
    background: rgba(0, 0, 0, 0.55);
}

.cleanup-dialog {
    width: min(38rem, 100%);
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.5rem;
    border-radius: 14px;
    background: var(--kosmos-surface-raised);
    color: var(--kosmos-text);
    border: 1px solid var(--kosmos-border);
    box-shadow: var(--kosmos-shadow-hover);
}

.cleanup-dialog h2 {
    margin-top: 0;
    color: var(--kosmos-text);
}

.cleanup-dialog code {
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    background: var(--kosmos-surface-muted);
    color: var(--kosmos-text);
}

.cleanup-field {
    display: block;
    margin: 0.85rem 0;
    color: var(--kosmos-text);
    font-weight: 600;
}

.cleanup-field .form-control,
.cleanup-field .form-select {
    margin-top: 0.3rem;
    font-weight: 400;
}

.cleanup-counts,
.cleanup-live-lots {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
    color: var(--kosmos-text);
}

.cleanup-counts li,
.cleanup-live-lots li {
    margin-bottom: 0.15rem;
}

/* Bootstrap's stock alert colours are near-black text on a pale wash, which is
   unreadable once the dialog behind it goes dark. */
.cleanup-dialog .alert-warning {
    background: var(--kosmos-surface-muted);
    border-color: var(--kosmos-border);
    color: var(--kosmos-text);
}

.clock-award-buyer {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.clock-award-buyer label {
    color: var(--kosmos-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.clock-award-buyer .form-select {
    width: auto;
    min-width: 14rem;
}

.clock-award-buyer .hint {
    margin: 0;
}

.shortcut-strip {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
    color: #65716b;
    font-size: 0.78rem;
}

.shortcut-strip span {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.shortcut-strip kbd {
    margin: 0;
    background: #f4f6f2;
    color: #34423c;
}

.award-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 0.75rem;
    padding: 0.85rem 0;
    border-top: 1px solid #d9ded6;
    border-bottom: 1px solid #d9ded6;
}

.page-header,
.section-heading,
.clock-card-header,
.clock-topline,
.clock-row,
.clock-row-meta,
.queue-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.page-header {
    margin-bottom: 2rem;
}

.section-band {
    padding: 2rem 0;
    border-top: 1px solid var(--kosmos-border);
}

.operations-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 1px;
    margin-bottom: 1.5rem;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-border-color);
}

.operations-summary > div {
    display: grid;
    gap: 0.2rem;
    min-width: 0;
    padding: 0.85rem 1rem;
    background: var(--bs-body-bg);
}

.operations-summary strong {
    font-size: 1.35rem;
}

.operations-summary span {
    color: var(--bs-secondary-color);
    font-size: 0.85rem;
}

.dashboard-header {
    align-items: end;
}

.dashboard-section {
    padding: 1.5rem 0;
    border-top: 1px solid var(--kosmos-border);
}

.dashboard-section:first-of-type {
    border-top: 0;
}

.dashboard-callout {
    margin: 0;
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--bs-warning);
    background: var(--bs-warning-bg-subtle);
}

.clock-grid,
.management-grid,
.clock-console {
    display: grid;
    gap: 1rem;
}

.clock-grid {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-bottom: 1.5rem;
}

.management-grid,
.clock-console {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.clock-card,
.tool-panel {
    background: var(--kosmos-surface-raised);
    border: 1px solid var(--kosmos-border);
    border-radius: 14px;
    padding: 1.25rem;
    box-shadow: var(--kosmos-shadow);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.clock-card:hover,
.tool-panel:hover {
    transform: translateY(-2px);
    border-color: rgba(var(--kosmos-brand-rgb), 0.48);
    box-shadow: var(--kosmos-shadow-hover);
}

.clock-card h2,
.clock-row h3,
.tool-panel h2,
.section-heading h2 {
    margin: 0;
    color: var(--kosmos-text);
    font-size: 1.05rem;
    font-weight: 750;
}

.clock-card p,
.clock-row p,
.hint,
.empty-state {
    color: var(--kosmos-text-muted);
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background: var(--kosmos-brand-soft);
    color: var(--kosmos-brand-strong);
    font-size: 0.78rem;
    font-weight: 800;
}

.clock-stage {
    color: var(--kosmos-stage-text);
    background:
        radial-gradient(circle at 100% 0, rgba(var(--kosmos-brand-rgb), 0.2), transparent 36%),
        var(--kosmos-stage);
    border: 1px solid rgba(var(--kosmos-brand-rgb), 0.18);
    border-radius: 14px;
    padding: 1.5rem;
}

.clock-stage h1,
.clock-stage h2,
.clock-stage h3,
.clock-stage .detail-grid dd {
    color: var(--kosmos-stage-text);
}

.clock-stage .detail-grid dt {
    color: #aeb9aa;
}

/* Tool panels use the active light/dark surface inside the permanently dark
   clock stage. Reset the stage's inherited foreground so validation content
   remains readable in both themes. */
.clock-stage .tool-panel,
.clock-stage .tool-panel h2 {
    color: var(--kosmos-text);
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    margin: 0;
}

.detail-grid > div {
    padding: 0.75rem;
    border-radius: 9px;
    background: rgba(var(--kosmos-brand-rgb), 0.07);
}

.detail-grid dt {
    color: var(--kosmos-text-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.detail-grid dd {
    margin: 0.2rem 0 0;
    min-width: 0;
    color: var(--kosmos-text);
    font-weight: 650;
    overflow-wrap: anywhere;
}

.buy-row {
    margin-top: 1rem;
}

.buy-row input {
    max-width: 9rem;
}

.intent-panel {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #d9ded6;
}

.intent-panel h3 {
    margin: 0;
    font-size: 0.95rem;
    color: #1f2925;
}

.intent-panel .hint {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
}

.combined-next-preview {
    margin-top: 1rem;
}

.field-validation {
    margin: 0.5rem 0 0;
    color: var(--bs-danger-text-emphasis);
    font-size: 0.85rem;
    font-weight: 650;
}

.live-quantity-field {
    display: grid;
    gap: 0.25rem;
    color: var(--kosmos-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.bid-allocation-details {
    margin-top: 0.6rem;
    color: var(--kosmos-text-muted);
    font-size: 0.85rem;
}

.bid-allocation-details summary {
    cursor: pointer;
    font-weight: 700;
}

.bid-outcome {
    display: grid;
    gap: 0.15rem;
    margin-top: 1rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid rgba(var(--kosmos-brand-rgb), 0.3);
    border-radius: 10px;
    background: var(--kosmos-brand-soft);
}

.bid-outcome span {
    color: var(--kosmos-text-muted);
    font-size: 0.85rem;
}

.bid-outcome-notselected,
.bid-outcome-rejected,
.bid-outcome-voided {
    border-color: var(--bs-border-color);
    background: var(--bs-tertiary-bg);
}

.queue-position-label {
    display: inline-block;
    min-width: 1.4rem;
    color: var(--kosmos-text-muted);
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.report-option-list {
    display: grid;
    gap: 0.35rem;
    max-height: 12rem;
    margin: 0;
    padding: 0.65rem 0.75rem;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
}

@media print {
    body:has(.print-scope) .sidebar,
    body:has(.print-scope) .top-row,
    body:has(.print-scope) .print-hide,
    body:has(.print-scope) #blazor-error-ui {
        display: none !important;
    }

    body:has(.print-scope) .page,
    body:has(.print-scope) main,
    body:has(.print-scope) article.content {
        display: block;
        min-height: 0;
        padding: 0 !important;
        color: #000;
        background: #fff;
    }
}

.latency-status {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.65rem;
    font-size: 0.82rem;
    font-weight: 650;
}

.latency-status-dot {
    width: 0.65rem;
    height: 0.65rem;
    flex: 0 0 0.65rem;
    border-radius: 50%;
    background: currentColor;
}

.latency-status-green {
    color: #287a3d;
}

.latency-status-orange {
    color: #a55300;
}

.latency-status-red {
    color: #b42318;
}

.latency-guidance {
    margin: 0.4rem 0 0;
    color: var(--kosmos-text-muted);
    font-size: 0.85rem;
}

[data-bs-theme="dark"] .latency-status-green {
    color: #7ed492;
}

[data-bs-theme="dark"] .latency-status-orange {
    color: #ffb45f;
}

[data-bs-theme="dark"] .latency-status-red {
    color: #ff8a80;
}

.intent-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.75rem;
    padding: 0.65rem 0;
    border-top: 1px solid #edf0eb;
}

@media (max-width: 700px) {
    .clock-settings-grid,
    .clock-control-deck {
        grid-template-columns: 1fr;
        position: sticky;
        z-index: 7;
        bottom: max(0.5rem, env(safe-area-inset-bottom));
        padding: 0.75rem;
        border: 1px solid var(--kosmos-border);
        border-radius: 12px;
        background: var(--kosmos-surface-raised);
        box-shadow: var(--kosmos-shadow-hover);
    }

    .clock-primary-action .btn {
        width: 100%;
        min-width: 0;
    }

    .clock-manual-actions {
        justify-content: flex-start;
    }

    .clock-award-buyer,
    .shortcut-strip {
        grid-column: 1;
    }

    .clock-award-buyer .form-select {
        width: 100%;
    }

    .setup-summary {
        display: none;
    }
}

.stacked-form {
    display: grid;
    gap: 0.75rem;
}

.inline-form {
    margin-top: 1rem;
}

.inline-form input {
    max-width: 18rem;
}

.clock-list,
.request-list,
.queue-list {
    display: grid;
    gap: 0.75rem;
}

.clock-row,
.request-row,
.queue-row {
    padding: 0.9rem;
    border: 1px solid var(--kosmos-border);
    border-radius: 10px;
    background: var(--kosmos-surface);
}

/* Clock cards share one set of columns so the runtime class, queue count and
   Control button line up from card to card. As flex rows each card sized its
   own content and a description that wrapped to a third line pushed that
   card's whole right-hand side down. The plain columns are the fallback for
   engines without subgrid; the settings panel spans both columns on its own
   row, which is what .clock-definition-settings already assumed. */
.clock-list {
    grid-template-columns: minmax(0, 1fr) max-content;
}

.clock-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    align-items: start;
    justify-content: normal;
    row-gap: 0.75rem;
}

/* Must follow the base rule above, not join the earlier 700px block, or the
   base rule wins on source order and the columns never collapse. */
@media (max-width: 700px) {
    .clock-list {
        grid-template-columns: 1fr;
    }
}

/* Absolute price entry, shown among the manual clock actions while paused. */
.clock-set-price {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.clock-set-price .form-control {
    width: 7.5rem;
}

/* The expandable settings panel on a clock or catalog card. Shared rather than
   scoped to one page, since both card types use it. */
.clock-definition-settings {
    grid-column: 1 / -1;
    border-top: 1px solid var(--kosmos-border);
    padding-top: 0.65rem;
}

.clock-definition-settings summary {
    width: fit-content;
    cursor: pointer;
    color: var(--kosmos-brand-strong);
    font-weight: 700;
}

.clock-definition-settings .clock-settings-grid {
    margin-top: 0.75rem;
}

.clock-mode-settings {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--kosmos-border);
    border-radius: 0.65rem;
}

.clock-mode-settings > summary {
    width: fit-content;
    cursor: pointer;
    color: var(--kosmos-brand-strong);
    font-weight: 700;
}

.clock-mode-settings > .form-text {
    margin: 0.5rem 0 0;
}

.clock-mode-settings > .clock-settings-grid {
    margin-top: 0.65rem;
}

/* Without this the button is a stretched grid item as tall as the whole row,
   which is what made Save settings enormous on the catalog cards. */
.clock-definition-settings .btn {
    align-self: end;
}

.request-row {
    display: flex;
    justify-content: flex-start;
}

.queue-row {
    grid-template-columns: 2rem 1fr 1fr auto;
}

.table {
    --bs-table-color: var(--kosmos-text);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--kosmos-border);
    margin-bottom: 0;
}

.table-responsive {
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--kosmos-border);
    border-radius: 12px;
    background: var(--kosmos-surface);
    box-shadow: var(--kosmos-shadow);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.table-responsive .table {
    min-width: 650px;
}

.table > :not(caption) > * > * {
    padding: 0.9rem 1rem;
}

/* Actions for a multi-row selection, shown above the grid it applies to. */
.bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--kosmos-border);
    border-radius: 10px;
    background: var(--kosmos-surface-muted);
}

.bulk-bar__count {
    font-size: 0.85rem;
    font-weight: 800;
}

.bulk-bar .form-select {
    width: auto;
    min-width: 10rem;
}

.bulk-bar .hint {
    margin: 0;
}

.table .select-cell {
    width: 2.75rem;
    padding-right: 0;
}

/* Row actions are normalised here rather than per page so every grid button
   is the same size whatever the caller passed and however long the label is. */
.table td .btn {
    /* Centre the label explicitly: .btn keeps a 2.75rem touch target, and an
       inline-block <a class="btn"> would otherwise leave all the spare height
       below its text while a <button> centres its own content. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.75rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
    line-height: 1.4;
    white-space: nowrap;
}

.table td .btn + .btn {
    margin-left: 0.4rem;
}

/* A row offering several actions lays them out itself. The min-width above keeps a grid of
   single-action rows tidy, but four of them in one cell wrap into three ragged lines and
   treble the row height, so inside this container each button is only as wide as its label. */
.table td .row-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
}

.table td .row-actions .btn {
    min-width: 0;
}

.table td .row-actions .btn + .btn {
    margin-left: 0;
}

.table td .row-actions .hint {
    margin: 0;
    white-space: normal;
    text-align: right;
}

/* Queue position: two arrows around the number they change, so re-ordering costs the width of
   a number rather than of two sentences. */
.queue-stepper {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    margin-right: 0.15rem;
}

.table td .row-actions .queue-step {
    /* Width, not padding: .btn keeps its 2.75rem touch target, so padding alone left a 21px
       sliver next to a 69px pill. A fixed width makes it a square button of the same height
       as the actions beside it. */
    width: 2.3rem;
    padding: 0 0.3rem;
    font-size: 0.7rem;
    line-height: 1;
}

/* The sale day and the shortcut that changes it, side by side rather than stacked. */
.sale-day {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.sale-day-move {
    margin-left: 0.5rem;
    font-size: 0.78rem;
    white-space: nowrap;
    vertical-align: baseline;
}

.table thead th {
    color: var(--kosmos-text-muted);
    background: var(--kosmos-surface-muted);
    border-bottom-width: 1px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.table tbody tr {
    transition: background-color 120ms ease;
}

.table tbody tr:hover {
    background: rgba(var(--kosmos-brand-rgb), 0.07);
}

/* A row that navigates. The hover highlight above already reads as "this row is a
   thing"; this only adds the cursor, so a clickable row looks like every other row
   until you reach it. */
.table tbody tr.row-link {
    cursor: pointer;
}

.alert {
    border: 0;
    border-radius: 10px;
}

.application-error {
    max-width: 680px;
    padding: 2rem 0;
}

.application-error h1 {
    margin-bottom: 0.75rem;
}

.application-error > p:not(.eyebrow, .support-reference) {
    max-width: 60ch;
    color: var(--kosmos-text-muted);
}

.application-error .command-bar {
    margin-top: 1.5rem;
}

.support-reference {
    margin-top: 1.5rem;
    color: var(--kosmos-text-muted);
    font-size: 0.875rem;
}

.clock-field {
    align-content: start;
}

.clock-field-tooltip {
    display: block;
    margin-top: 0.35rem;
    color: var(--bs-danger-text-emphasis);
    font-size: 0.8rem;
    font-weight: 650;
    line-height: 1.3;
}

.clock-input-buzz {
    animation: clock-input-buzz 220ms ease-in-out;
}

@keyframes clock-input-buzz {
    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    50% {
        transform: translateX(4px);
    }

    75% {
        transform: translateX(-2px);
    }
}

@media (max-width: 640px) {
    .content {
        padding-top: 1.25rem;
    }

    .auction-home {
        min-height: auto;
        padding: 3rem 0 4rem;
    }

    .auction-home h1 {
        font-size: clamp(2.75rem, 15vw, 4rem);
    }

    .page-header {
        align-items: flex-start;
    }

    .detail-grid,
    .queue-row {
        grid-template-columns: 1fr;
    }

    .clock-card {
        padding: 0.9rem;
    }

    .clock-card .auction-dial-compact {
        width: min(76vw, 16rem);
        margin-inline: auto;
    }

    .live-bid-actions {
        position: sticky;
        z-index: 8;
        bottom: max(0.5rem, env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: minmax(7rem, 1fr) minmax(8rem, 1fr);
        padding: 0.65rem;
        border: 1px solid var(--kosmos-border);
        border-radius: 12px;
        background: var(--kosmos-surface-raised);
        box-shadow: var(--kosmos-shadow-hover);
    }

    .live-bid-actions input,
    .live-bid-actions .btn {
        width: 100%;
        max-width: none;
        min-height: 2.75rem;
    }
}

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

    .clock-input-buzz {
        animation: none;
    }
}