/* Main systems: the plate and readiness panel on top of a main system, its tabs and the rows of slots that are not there. */

.ms-top {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr);
    gap: 16px;
    align-items: stretch;
    margin-bottom: 18px;
}

/* The plate: name and part on the left, the stamp on the right, the specs engraved in one row under them. */
.plate.ms-plate {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "id stamp"
        "specs specs"
        "foot foot";
    margin: 0;
}

/* Long names (MainSystem-00109) break at the hyphen, not in the middle of a word. */
.ms-plate .plate__pn {
    font-size: 2.4rem;
    overflow-wrap: break-word;
}

/* The part number with the part's name after it, in the plate's lettering. */
.ms-plate__pn {
    margin-top: 6px;
    font-family: var(--ft-font-display);
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--ft-stencil);
}

.ms-plate__pn .plate__name {
    margin-left: 8px;
    font-family: var(--ft-font-body);
    font-weight: 400;
    letter-spacing: 0;
}

.ms-plate__specs {
    grid-area: specs;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    border: 1px solid var(--ft-chalk-deep);
    border-radius: var(--ft-radius-sm);
    background: rgba(255, 255, 255, 0.7);
    overflow: hidden;
}

/* Three to a row; a short last row stretches, so no empty cell is left. */
.ms-plate__specs div {
    flex: 1 1 28%;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 10px 14px;
    box-shadow: 1px 0 0 var(--ft-chalk-deep), 0 1px 0 var(--ft-chalk-deep);
}

.ms-plate__specs .ms-plate__wide {
    flex-basis: 100%;
}

.ms-plate__specs dt {
    font-family: var(--ft-font-display);
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    color: var(--ft-stencil-soft);
}

.ms-plate__specs dd {
    margin: 0;
    font-weight: 600;
    color: var(--ft-stencil);
    overflow-wrap: anywhere;
}

/* Readiness: the status accent runs down the left edge like on the board's cards. */
.ms-ready {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px 16px 22px;
    overflow: hidden;
}

.ms-ready::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--msb-accent);
}

.msb--inactive {
    --msb-accent: var(--ft-line);
}

.ms-ready__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.ms-ready__since {
    font-size: 0.8rem;
    color: var(--ft-stencil-soft);
}

.ms-ready__head .ms-ready__history {
    margin-left: auto;
    color: var(--ft-altimeter-deep);
}

.ms-ready .msb-metrics {
    margin-top: 0;
}

.ms-ready .msb-due {
    margin: 0;
}

.ms-ready__gauges {
    display: grid;
    gap: 14px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--ft-chalk-deep);
}

.ms-ready__out {
    margin: 0;
    font-size: 0.8rem;
    color: var(--ft-stencil-soft);
}

/* A tile or line that opens its tab: a real button that shows it can be pressed. */
.msb-metric--open,
.msb-due--open {
    border: 1px solid transparent;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.msb-metric--open:hover {
    border-color: color-mix(in srgb, var(--ft-altimeter) 40%, transparent);
    background: #FFFFFF;
}

.msb-metric--open.is-alert:hover {
    border-color: color-mix(in srgb, var(--ft-streamer) 45%, transparent);
}

.msb-due--open {
    width: 100%;
    text-align: left;
}

.msb-due--open:hover {
    border-color: currentColor;
}

.msb-due__go {
    margin-left: auto;
}

.msb-metric--open:focus-visible,
.msb-due--open:focus-visible {
    outline: 2px solid var(--ft-altimeter);
    outline-offset: 2px;
}

/* A slot count as a bar: blue while filling, green when complete, red when minimum equipment is missing. */
.ms-gauge {
    display: grid;
    gap: 6px;
    --gauge: var(--ft-altimeter);
}

.ms-gauge.is-full {
    --gauge: var(--ft-clear);
}

.ms-gauge.is-alert {
    --gauge: var(--ft-streamer);
}

.ms-gauge__label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: 0.84rem;
    color: var(--ft-stencil-soft);
}

.ms-gauge__count {
    font-family: var(--ft-font-display);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ms-gauge__count strong {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ft-stencil);
}

.ms-gauge.is-alert .ms-gauge__count strong {
    color: var(--ft-streamer);
}

.ms-gauge__track {
    height: 8px;
    border-radius: var(--ft-radius-pill);
    background: var(--ft-chalk-deep);
    overflow: hidden;
}

.ms-gauge__fill {
    display: block;
    width: var(--fill);
    height: 100%;
    border-radius: inherit;
    background: var(--gauge);
    animation: ms-gauge-fill 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes ms-gauge-fill {
    from { width: 0; }
}

.ms-gauge__note {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 2px 0 0;
    padding: 8px 10px;
    border-radius: var(--ft-radius-sm);
    background: rgba(200, 16, 46, 0.07);
    font-size: 0.8rem;
    color: var(--ft-streamer);
}

.ms-gauge__note strong {
    font-weight: 600;
}

/* The anchor the readiness tiles focus: the tabs scroll into view without an outline around them. */
.ms-tabs-anchor:focus {
    outline: none;
}

.ms-tabs {
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius);
    background: #FFFFFF;
    overflow: hidden;
}

.ms-tabs .mud-tabs-tabbar {
    border-bottom: 1px solid var(--ft-line);
    background: var(--ft-chalk);
}

/* Tab names in sentence case: easier to scan than capitals, and the same words as the tiles above. */
.ms-tabs .mud-tab {
    min-height: 52px;
    text-transform: none;
    font-size: 0.92rem;
    letter-spacing: 0;
}

.ms-tabs .mud-tab.mud-tab-active {
    color: var(--ft-apron);
    font-weight: 600;
}

.ms-tabs .mud-tab-slider {
    background: var(--ft-caution);
}

.ms-tabs__panel {
    padding: 12px;
}

.ms-tab-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

/* A tab's bar above its list: the kind chips on the left, what the tab opens and the Excel button on the right; wraps on a phone. */
.ms-tab-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 12px;
}

.ms-tab-bar .wo-kinds {
    margin-bottom: 0;
}

.ms-tab-bar__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.ms-when {
    font-family: var(--ft-font-display);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.lt tr.is-muted td {
    color: var(--ft-stencil-soft);
    background: repeating-linear-gradient(135deg, transparent 0 8px, rgba(11, 30, 54, 0.025) 8px 16px);
}

@media (max-width: 1100px) {
    .ms-top {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .plate.ms-plate {
        grid-template-columns: 1fr;
        grid-template-areas: "id" "stamp" "specs" "foot";
    }

    .ms-plate .plate__pn {
        font-size: 1.9rem;
    }

    .ms-plate__specs div {
        flex-basis: 40%;
    }

    .ms-ready__head .ms-ready__history {
        margin-left: 0;
    }
}

/* The plate's own buttons take the altimeter blue of the light plate. */
.ms-plate .plate__foot .mud-button-root {
    color: var(--ft-altimeter-deep);
}

.ms-plate .plate__foot .mud-button-root:hover {
    background: rgba(47, 127, 184, 0.08);
}

/* First LRU assignment: the picker bar with the chosen main system's facts, the slots and the session column. */

.ms-bar__picker {
    flex: 0 1 380px;
    min-width: 240px;
}

.ms-bar__meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    font-size: 0.8rem;
    color: var(--ft-stencil-soft);
}

.ms-bar__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: 0;
}

.ms-bar__facts div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ms-bar__facts dt {
    font-size: 0.72rem;
    color: var(--ft-stencil-soft);
}

.ms-bar__facts dd {
    margin: 0;
    font-weight: 600;
    color: var(--ft-stencil);
    overflow-wrap: anywhere;
}

.assign-note {
    margin-bottom: 12px;
}

.assign-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    align-items: start;
}

.assign-slots {
    padding: 12px;
    min-width: 0;
}

.assign-session {
    position: sticky;
    top: calc(var(--ft-topbar-h) + 12px);
    padding: 14px 16px;
    max-height: calc(100vh - var(--ft-topbar-h) - 24px);
    overflow: auto;
}

.assign-session__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.assign-session__count {
    min-width: 26px;
    padding: 1px 8px;
    border-radius: var(--ft-radius-pill);
    background: var(--ft-apron);
    color: #FFFFFF;
    font-family: var(--ft-font-display);
    text-align: center;
}

.assign-session__empty,
.assign-session__hint {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: var(--ft-stencil-soft);
}

.assign-session__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Each operation reads like a log strip: green edge for an install, red for a removal. */
.assign-op {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 6px 8px 10px;
    border: 1px solid var(--ft-line);
    border-left: 4px solid var(--ft-clear);
    border-radius: var(--ft-radius-sm);
    background: var(--ft-chalk);
}

.assign-op.is-remove {
    border-left-color: var(--ft-streamer);
}

.assign-op__main {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.assign-op__main > :first-child {
    align-self: flex-start;
}

.assign-op__slot {
    font-weight: 600;
    color: var(--ft-stencil);
    overflow-wrap: anywhere;
}

.assign-op__item,
.assign-op__when {
    font-size: 0.8rem;
    color: var(--ft-stencil-soft);
}

.assign-op__when {
    font-family: var(--ft-font-display);
    letter-spacing: 0.02em;
}

.assign-op__along {
    margin-left: 6px;
    color: var(--ft-apron);
    font-weight: 600;
}

/* Dialogs */
.assign-dialog {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* A record at a glance from a list row: plate, facts, images, files. */
.detail-dialog {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.assign-dialog__slot {
    margin: 0;
    font-family: var(--ft-font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ft-apron);
}

/* The item a dialog works on (calibration, transfer, shipment): part and serial number, quantity, site and status on one wrapping line. */
.item-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    font-size: 0.85rem;
    color: var(--ft-stencil-soft);
}

.assign-dialog .dep-path {
    margin: -6px 0 0;
}

.assign-parts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.assign-part {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius-pill);
    background: var(--ft-chalk);
    max-width: 100%;
}

.assign-part .pn {
    white-space: nowrap;
}

.assign-part__name {
    min-width: 0;
    font-size: 0.78rem;
    color: var(--ft-stencil-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assign-part.is-out {
    opacity: 0.6;
    text-decoration: line-through;
}

.assign-dialog__empty {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ft-stencil-soft);
}

/* The install confirmation: one card-like row per warning (item, what it is about, level and what is left), wrapping on a phone. */
.install-warnings {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.install-warnings__lead {
    margin: 0;
    font-size: 0.88rem;
}

.install-warnings__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.install-warnings__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto;
    align-items: center;
    gap: 6px 12px;
    padding: 8px 12px;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius-sm);
    background: var(--ft-chalk);
}

.install-warnings__item,
.install-warnings__state {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.install-warnings__pn {
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.install-warnings__subject {
    font-size: 0.88rem;
    overflow-wrap: anywhere;
}

.install-warnings__left {
    font-size: 0.8rem;
    color: var(--ft-stencil-soft);
    white-space: nowrap;
}

@media (max-width: 600px) {
    .install-warnings__row {
        grid-template-columns: 1fr;
    }
}

.assign-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow: auto;
    padding: 2px;
}

/* A stock item is a selectable tag: serial in the display face, part number and location beside it. */
.assign-item {
    display: grid;
    grid-template-columns: minmax(90px, auto) 1fr auto;
    grid-template-areas: "sn pn group" "where where why";
    align-items: baseline;
    gap: 2px 12px;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius-sm);
    background: #FFFFFF;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.assign-item:hover:not(:disabled) {
    border-color: var(--ft-altimeter);
}

.assign-item:focus-visible {
    outline: 2px solid var(--ft-altimeter);
    outline-offset: 2px;
}

.assign-item.is-chosen {
    border-color: var(--ft-altimeter-deep);
    box-shadow: inset 4px 0 0 var(--ft-caution);
    background: rgba(47, 127, 184, 0.06);
}

.assign-item.is-blocked {
    cursor: not-allowed;
    opacity: 0.65;
}

.assign-item__sn {
    grid-area: sn;
    font-family: var(--ft-font-display);
    font-weight: 600;
    color: var(--ft-stencil);
}

.assign-item__pn {
    grid-area: pn;
}

.assign-item__where {
    grid-area: where;
    font-size: 0.78rem;
    color: var(--ft-stencil-soft);
}

/* The item's life badge and stock group size, right of the part number. */
.assign-item__tags {
    grid-area: group;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 4px 6px;
}

.assign-item__group {
    padding: 0 8px;
    border-radius: var(--ft-radius-pill);
    background: var(--ft-apron);
    color: #FFFFFF;
    font-size: 0.75rem;
    white-space: nowrap;
}

.assign-item__why {
    grid-area: why;
    font-size: 0.75rem;
    color: var(--ft-streamer);
}

.assign-removed {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 8px 12px;
    border: 1px solid var(--ft-line);
    border-left: 4px solid var(--ft-streamer);
    border-radius: var(--ft-radius-sm);
}

.assign-along {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 200px;
    overflow: auto;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius-sm);
}

.assign-along li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 10px;
    padding: 5px 10px;
    font-size: 0.82rem;
    border-bottom: 1px solid var(--ft-line);
}

.assign-along li:last-child {
    border-bottom: 0;
}

.assign-along__slot {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assign-along__sn {
    color: var(--ft-stencil-soft);
}

/* The time keeps room for HH:mm and its clock button however narrow the cell the field sits in. */
.op-date {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(8rem, 2fr);
    gap: 10px;
}

.op-date__hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: -4px 0 0;
    font-size: 0.8rem;
    color: var(--ft-stencil-soft);
}

@media (max-width: 1100px) {
    .assign-layout {
        grid-template-columns: 1fr;
    }

    .assign-session {
        position: static;
        max-height: none;
        order: -1;
    }
}

@media (max-width: 600px) {
    .op-date {
        grid-template-columns: 1fr;
    }

    .assign-item {
        grid-template-columns: 1fr auto;
        grid-template-areas: "sn group" "pn pn" "where where" "why why";
    }
}

/* "Define a part number" under an empty part number list in the main system form. */
.ms-define-part {
    align-self: flex-start;
    margin-top: -6px;
}

/* Main system authorizations: a checklist of main systems for the chosen user. */
.msauth-count {
    font-size: 0.85rem;
    color: var(--ft-stencil-soft);
}

.msauth-count strong {
    font-family: var(--ft-font-display);
    color: var(--ft-stencil);
}

.msauth {
    padding: 12px 16px 16px;
}

.msauth__actions {
    margin-top: 12px;
}


/* Minimum equipment: an amber tag on the slot, a warning strip above the tabs when one is empty. */
/* A slot first LRU assignment may no longer change; the reason is on hover. */
.slot-lock {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    color: #9C7015;
    vertical-align: middle;
}

.slot-lock .mud-icon-root {
    font-size: 1rem;
}

.flag--minimum {
    border-color: var(--ft-caution);
    background: rgba(227, 179, 65, 0.16);
    color: #7A5A00;
}

/* Status board: one accent colour per status (ft3mweb tones on FT3M tokens), the status counts, the filter bar, the cards
   with their open-work tiles, and the same tiles as a strip on a main system's page. */
.msb--active { --msb-accent: var(--ft-clear); }
.msb--servicebulletin { --msb-accent: #7A8696; }
.msb--maintenance { --msb-accent: #7B5CB8; }
.msb--partiallyactive { --msb-accent: var(--ft-altimeter); }
.msb--waitingpart { --msb-accent: var(--ft-caution); }
.msb--grounded { --msb-accent: var(--ft-streamer); }

/* The fleet panel: the serviceable count in the plate's lettering, the share of every status as one bar, the statuses as filters. */
.msb-fleet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 28px;
    margin: 0 0 14px;
    padding: 16px 20px;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius);
    background: #FFFFFF;
}

.msb-fleet__ready {
    display: grid;
    grid-template-columns: auto auto;
    align-items: baseline;
    column-gap: 6px;
    padding-right: 28px;
    border-right: 1px solid var(--ft-chalk-deep);
}

.msb-fleet__ready strong {
    font: 700 2.6rem/1 var(--ft-font-display);
    font-variant-numeric: tabular-nums;
    color: var(--ft-clear);
}

.msb-fleet__ready span {
    font: 600 1.2rem var(--ft-font-display);
    color: var(--ft-stencil-soft);
}

.msb-fleet__ready p {
    grid-column: 1 / -1;
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: var(--ft-stencil-soft);
}

.msb-fleet__body {
    display: grid;
    flex: 1 1 420px;
    gap: 12px;
    min-width: 0;
}

.msb-fleet__bar {
    display: flex;
    gap: 3px;
    height: 12px;
}

.msb-fleet__share {
    flex-basis: 0;
    min-width: 6px;
    border-radius: var(--ft-radius-pill);
    background: var(--msb-accent);
    cursor: pointer;
    transform-origin: left;
    animation: msb-share-in 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
    transition: opacity 0.2s ease;
}

@keyframes msb-share-in {
    from { transform: scaleX(0); }
}

/* With a status chosen, the others step back on the bar. */
.msb-fleet.has-choice .msb-fleet__share:not(.is-selected) {
    opacity: 0.25;
}

.msb-fleet__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.msb-count {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    padding: 4px 12px;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius-pill);
    background: #FFFFFF;
    font: inherit;
    font-size: 0.84rem;
    color: var(--ft-stencil);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.msb-count__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--msb-accent);
}

.msb-count strong {
    font: 600 1rem var(--ft-font-display);
    font-variant-numeric: tabular-nums;
}

.msb-count:hover:not(:disabled) {
    border-color: var(--msb-accent);
}

.msb-count.is-selected {
    border-color: var(--msb-accent);
    background: color-mix(in srgb, var(--msb-accent) 14%, #FFFFFF);
    box-shadow: inset 0 0 0 1px var(--msb-accent);
}

.msb-count:disabled {
    cursor: default;
    color: var(--ft-stencil-soft);
    background: var(--ft-chalk);
}

.msb-count:disabled .msb-count__dot {
    opacity: 0.35;
}

.msb-count:disabled strong {
    font-weight: 400;
}

.msb-count:focus-visible,
.msb-segment button:focus-visible,
.msb-toggle:focus-visible,
.msb-card:focus-visible {
    outline: 2px solid var(--ft-altimeter);
    outline-offset: 2px;
}

.msb-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding: 10px 14px;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius);
    background: #FFFFFF;
}

.msb-filters .msb-filters__search {
    flex: 1 1 240px;
    min-width: 200px;
    margin: 0;
}

/* A main system's work order history: one button per kind with its count, wrapping on a narrow screen. */
.wo-kinds {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 12px;
    padding: 3px;
    border-radius: var(--ft-radius-sm);
    background: var(--ft-chalk-deep);
}

.wo-kinds button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 0;
    border-radius: 6px;
    background: none;
    font: 600 0.82rem var(--ft-font-display);
    color: var(--ft-stencil-soft);
    cursor: pointer;
}

.wo-kinds button:hover {
    color: var(--ft-stencil);
}

.wo-kinds button.is-selected {
    background: #FFFFFF;
    color: var(--ft-sky);
    box-shadow: var(--ft-shadow-soft);
}

.wo-kinds button:focus-visible {
    outline: 2px solid var(--ft-altimeter);
    outline-offset: 2px;
}

.wo-kinds__count {
    min-width: 22px;
    padding: 1px 7px;
    border-radius: var(--ft-radius-pill);
    background: rgba(47, 127, 184, 0.12);
    color: var(--ft-altimeter-deep);
    font-size: 0.75rem;
    text-align: center;
}

.msb-segment {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--ft-radius-sm);
    background: var(--ft-chalk-deep);
}

.msb-segment button,
.msb-toggle {
    padding: 6px 12px;
    border-radius: 6px;
    font: 600 0.82rem var(--ft-font-display);
    color: var(--ft-stencil-soft);
    cursor: pointer;
}

.msb-segment button {
    border: 0;
    background: transparent;
}

.msb-segment button.is-selected {
    background: #FFFFFF;
    box-shadow: var(--ft-shadow-soft);
    color: var(--ft-sky);
}

.msb-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--ft-line);
    background: #FFFFFF;
}

.msb-toggle.is-selected {
    border-color: var(--ft-altimeter);
    background: rgba(47, 127, 184, 0.08);
    color: var(--ft-altimeter-deep);
}

.msb-filters__count {
    margin-left: auto;
    font-size: 0.82rem;
    font-variant-numeric: tabular-nums;
    color: var(--ft-stencil-soft);
}

.msb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 18px;
}

.msb-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius);
    background: #FFFFFF;
}

.msb-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--msb-accent);
}

.msb-card {
    padding: 14px 16px 14px 20px;
    box-shadow: var(--ft-shadow-soft);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.msb-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--msb-accent) 45%, var(--ft-line));
    box-shadow: var(--ft-shadow-raised);
}

.msb-card__head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.msb-card__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--ft-radius-sm);
    background: linear-gradient(135deg, var(--ft-sky), var(--ft-apron));
    color: #FFFFFF;
}

.msb-card__title {
    flex: 1;
    min-width: 0;
}

.msb-card__title h3 {
    margin: 0;
    overflow: hidden;
    font: 600 1rem var(--ft-font-display);
    color: var(--ft-stencil);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msb-card__title p {
    margin: 2px 0 0;
    overflow: hidden;
    font-size: 0.78rem;
    color: var(--ft-stencil-soft);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msb-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.msb-metrics--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.msb-metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 4px;
    border-radius: var(--ft-radius-sm);
    background: var(--ft-chalk);
    color: #9AA5B1;
    text-align: center;
}

.msb-metric strong {
    font: 700 1.05rem var(--ft-font-display);
    font-variant-numeric: tabular-nums;
    color: #9AA5B1;
}

.msb-metric span {
    font-size: 0.7rem;
    line-height: 1.2;
    color: var(--ft-stencil-soft);
}

.msb-metric.is-on {
    color: var(--ft-altimeter-deep);
}

.msb-metric.is-on strong {
    color: var(--ft-stencil);
}

.msb-metric.is-alert {
    background: rgba(200, 16, 46, 0.07);
    color: var(--ft-streamer);
}

.msb-metric.is-alert strong {
    color: var(--ft-streamer);
}

.msb-missing {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    font-size: 0.8rem;
    color: #7A5A00;
}

@media (prefers-reduced-motion: reduce) {
    .msb-card {
        transition: none;
    }

    .msb-card:hover {
        transform: none;
    }

    .ms-gauge__fill {
        animation: none;
    }

    .msb-fleet__share {
        animation: none;
    }

    .msb-metric--open,
    .msb-due--open {
        transition: none;
    }
}

@media (max-width: 600px) {
    .msb-filters__count {
        margin-left: 0;
    }

    .msb-fleet__ready {
        padding-right: 0;
        border-right: 0;
    }
}

/* "Fill empty lists" sits at the far end of the user bar; full width on phones. */
.msauth-fill {
    margin-left: auto;
}

@media (max-width: 600px) {
    .msauth-fill {
        flex: 1 1 100%;
        margin-left: 0;
    }
}

/* The side column of the assignment page: the session panel and, in a work order, the waiting parts; sticky together. */
.assign-side {
    position: sticky;
    top: calc(var(--ft-topbar-h) + 12px);
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: calc(100vh - var(--ft-topbar-h) - 24px);
    overflow: auto;
}

.assign-side .assign-session {
    position: static;
    max-height: none;
    overflow: visible;
}

@media (max-width: 1100px) {
    .assign-side {
        position: static;
        max-height: none;
        order: -1;
    }
}

/* Maintenance followed on a main system's items, when it is not healthy (legacy health panel "B"). */
.msb-due {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    padding: 4px 10px;
    border-radius: var(--ft-radius-sm);
    font-size: 0.8rem;
    font-weight: 600;
}

.msb-due--dueunknown {
    background: var(--ft-chalk-deep);
    color: var(--ft-stencil-soft);
}

.msb-due--approaching {
    background: rgba(227, 179, 65, 0.16);
    color: #8A6410;
}

.msb-due--intolerance {
    background: rgba(224, 123, 36, 0.14);
    color: #9A4E0F;
}

.msb-due--overdue {
    background: rgba(200, 16, 46, 0.1);
    color: var(--ft-streamer);
}

/* Equipment reports: the chosen slots in the editor and the report's slot and counter cells. */
.er-slots {
    max-height: 420px;
    overflow-y: auto;
    margin-bottom: 12px;
}

.er-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
}

.er-items li {
    display: grid;
    grid-template-columns: minmax(90px, auto) minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 4px 4px 4px 12px;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius-sm);
}

.er-items__ms {
    font-weight: 600;
    color: var(--ft-stencil);
}

.er-items__slot {
    overflow-wrap: anywhere;
}

.er-slot,
.er-counter {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
}

.er-counter {
    align-items: flex-end;
}

.er-slot small,
.er-counter small {
    color: var(--ft-stencil-soft);
    font-size: 0.75rem;
}

/* The item as recorded with an LRU operation (LruSnapshotDialog): the plate, location and dates, then the counters against the limits then. */
.lru-snap {
    display: grid;
    gap: 16px;
}

.lru-snap__plate {
    margin: 0;
}

.lru-snap .facts-columns {
    margin-bottom: 0;
}

.lru-snap__hint {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
}

.lru-snap__empty {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    font-size: 0.9rem;
    color: var(--ft-stencil-soft);
}

.lru-snap__none {
    margin: 12px 0 0;
    font-size: 0.85rem;
    color: var(--ft-stencil-soft);
}

.lru-snap__counters {
    display: grid;
    gap: 6px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

/* Counter, value, limit and health on one row; on a phone the limit and health wrap under the counter and value. */
.lru-snap__counters li {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(90px, auto) minmax(0, 1.4fr) auto;
    align-items: center;
    gap: 4px 16px;
    padding: 8px 12px;
    border: 1px solid var(--ft-line);
    border-radius: var(--ft-radius-sm);
    background: var(--ft-chalk);
}

.lru-snap__metric {
    font-weight: 600;
    color: var(--ft-stencil);
}

.lru-snap__value {
    font-family: var(--ft-font-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ft-stencil);
    text-align: right;
    white-space: nowrap;
}

.lru-snap__value small,
.lru-snap__limit {
    font-family: var(--ft-font-body);
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--ft-stencil-soft);
}

/* The item page's history: the action sits at the right of each entry. */
.cal-history.lru-history li {
    grid-template-columns: 96px minmax(0, 1fr) auto;
}

.lru-history__actions {
    grid-column: 3;
    grid-row: 1 / span 3;
    align-self: center;
}

@media (max-width: 600px) {
    .lru-snap__counters li {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .cal-history.lru-history li {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .lru-history__actions {
        grid-column: 2;
        grid-row: 1 / span 3;
    }
}

/* M3: board project filter */
.msb-filters .msb-filters__projects {
    flex: 0 1 240px;
    min-width: 180px;
    margin: 0;
}

/* The options list opens in a popover, outside the filter row. */
.msb-project__passive {
    margin-left: 6px;
}

@media (max-width: 600px) {
    .msb-filters .msb-filters__projects {
        flex: 1 1 100%;

/* M1: slot chain and counters */
/* The item installed in a slot of a main system's chain: cut short so the slot name keeps its room on a phone. */
.cfgtree__badges .ms-chain-item {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 600px) {
    .cfgtree__badges .ms-chain-item {
        max-width: 132px;
    }
}