/* ============================================================================
   Klar - stations (Components/Klar/Station, Workspaces/Stations)
   ============================================================================

   The station picker's cards, "Use this browser as station ...?", the
   numbered favourites, the instructions panel and the lists of parts, shared
   with the runner (Workspaces/Run). The scan loop's blocks (station bar, scan
   field, result band, shift list, hint bar) were removed in 2026-10.
   Only theme tokens (--mud-palette-*, --klar-*): every theme, light and dark.
   Linked after assetmanager.frontend.styles.css in both hosts.
   ========================================================================= */

.klar-station-btn.mud-button-root {
    min-height: 3.5rem;
}

.klar-station-iconbtn.mud-icon-button {
    width: 3.5rem;
    height: 3.5rem;
}

.klar-station-choice-key {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 6px;
    background-color: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    font: 700 .875rem/1 var(--klar-font-mono);
}

.klar-band-parts-line {
    font-weight: 600;
}

.klar-band-parts-line::after {
    content: ":";
}

.klar-oneoff-parts a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.klar-station-label {
    font-size: 1rem;
    font-weight: 650;
    color: var(--mud-palette-text-primary);
}

.klar-station-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 3.5rem;
    padding: .75rem 1rem;
    border: 1.5px solid var(--mud-palette-lines-inputs);
    border-radius: var(--klar-radius-control);
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: 500 1.125rem/1.35 var(--klar-font-ui);
}

.klar-station-input:focus {
    outline: none;
    border-color: var(--klar-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--klar-accent) 25%, transparent);
}

.klar-station-input[aria-invalid="true"] {
    border-color: var(--mud-palette-error);
}

.klar-station-input--area {
    min-height: 6rem;
    resize: vertical;
    field-sizing: content;
}

.klar-station-help {
    font-size: .875rem;
    color: var(--mud-palette-text-secondary);
}

.klar-station-help:empty {
    display: none;
}

.klar-station-help.is-error {
    color: color-mix(in srgb, var(--mud-palette-error) 85%, var(--mud-palette-text-primary));
    font-weight: 600;
}

/* the list of parts ("Install / remove parts"): monospace serials, the count and what is wrong with the list */
.klar-station-parts {
    font-family: var(--klar-font-mono);
    min-height: 8rem;
}

.klar-station-parts-summary {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    font-size: .9375rem;
}

.klar-station-parts-summary:empty {
    display: none;
}

.klar-station-parts-count {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.klar-station-parts-duplicates {
    color: color-mix(in srgb, var(--mud-palette-warning) 70%, var(--mud-palette-text-primary));
}

.klar-station-parts-unknown {
    color: color-mix(in srgb, var(--mud-palette-error) 85%, var(--mud-palette-text-primary));
    font-weight: 600;
}

.klar-station-parts-checking {
    color: var(--mud-palette-text-secondary);
}

.klar-kbd {
    display: inline-block;
    min-width: 1.375rem;
    margin-inline-start: .5rem;
    padding: .1875rem .375rem;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-bottom-width: 2px;
    border-radius: 6px;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-secondary);
    font: 600 .6875rem/1 var(--klar-font-ui);
    text-align: center;
    white-space: nowrap;
}

.mud-button-filled .klar-kbd {
    border-color: color-mix(in srgb, currentColor 50%, transparent);
    background: transparent;
    color: inherit;
}

.klar-shift-scroll {
    overflow-x: auto;
}

.klar-shift-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9375rem;
}

.klar-shift-table th {
    padding: .5rem .75rem;
    background-color: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-size: .75rem;
    font-weight: 650;
    text-align: left;
    white-space: nowrap;
}

.klar-shift-table td {
    height: 3.5rem;
    padding: .375rem .75rem;
    border-top: 1px solid var(--klar-hairline);
    vertical-align: middle;
}

.klar-shift-table td:first-child {
    white-space: nowrap;
}

.klar-shift-table .mud-button-label {
    white-space: nowrap;
}

.klar-shift-table td a {
    color: var(--klar-primary-ink);
}

.klar-shift-result {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem;
}

.klar-shift-result > .mud-icon-root { flex: none; }

/* --- instructions ----------------------------------------------------------------- */

.klar-instructions:not(.klar-instructions--collapsed) {
    position: sticky;
    top: 5rem;
}

.klar-instructions-b {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    font-size: 1rem;
}

.klar-instructions-b p {
    margin: 0;
}

.klar-instructions-head {
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.klar-instructions-head .klar-muted {
    font-size: .8125rem;
}

.klar-instructions-title {
    font-weight: 650;
}

.klar-instructions-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding-top: .75rem;
    border-top: 1px solid var(--klar-hairline);
    font-size: .875rem;
}

.klar-instructions-facts:empty {
    display: none;
}

@media (max-width: 1099.98px) {
    .klar-instructions:not(.klar-instructions--collapsed) {
        position: static;
    }
}

/* --- station picker (SN-1) -------------------------------------------------------- */

.klar-station-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1rem;
}

.klar-stationcard {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    padding: 1rem;
}

.klar-stationcard-head {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
}

.klar-stationcard-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--klar-radius-control);
    background-color: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
    color: var(--klar-primary-ink);
}

.klar-stationcard-title {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
}

.klar-stationcard-title .klar-muted,
.klar-stationcard-used {
    font-size: .8125rem;
}

.klar-stationcard-ops {
    margin: 0;
    font-size: .875rem;
}

.klar-stationcard-used {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

.klar-stationcard-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: auto;
}

.klar-usestation-options {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.klar-usestation-help {
    padding-inline-start: 2.75rem;
    font-size: .8125rem;
}