@layer modules {

    /* ── Route band — compact identity strip below the standard header.
       Used only on route_detail.html. Holds callsign + section chip + status,
       editable description, and mono metadata summary.                ────── */

    .route-band {
        border-block-end: 1px solid var(--rule-soft);
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        margin-inline: auto;
        max-inline-size: var(--main-width);
        padding: 0.85rem clamp(1rem, 4vw, 2rem);
        text-align: start;
    }

    .route-band__ids {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem 0.7rem;
    }

    .route-band__description {
        color: var(--ink-soft);
        cursor: pointer;
        font-size: var(--text-small);
        line-height: 1.45;
        max-inline-size: 60ch;
    }

    .route-hero__description--placeholder {
        color: var(--ink-mute);
        font-style: italic;
    }

    .route-band__description-input {
        appearance: none;
        background: transparent;
        border: 0;
        border-block-end: 1px dashed var(--rule);
        color: var(--ink-soft);
        font: inherit;
        font-size: var(--text-small);
        inline-size: 100%;
        max-inline-size: 60ch;
        outline: 0;
        resize: none;
    }

    .route-band__meta {
        align-items: baseline;
        color: var(--ink-faint);
        display: flex;
        flex-wrap: wrap;
        font-family: var(--font-data);
        font-size: 0.625rem;
        gap: 0 1.2ch;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    /* ── Route band header row — name + primary action on one line. */

    .route-band__header-row {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
        & .btn { margin-inline-start: auto; }
    }

    .route-band__name {
        color: var(--ink);
        cursor: pointer;
        font-family: var(--font-display);
        font-size: var(--text-large);
        font-weight: 700;
        letter-spacing: -0.02em;
        margin: 0;
        min-inline-size: 0;
    }

    .route-band__name-input {
        appearance: none;
        background: transparent;
        border: 0;
        border-block-end: 1px dashed var(--rule);
        color: var(--ink);
        font-family: var(--font-display);
        font-size: var(--text-large);
        font-weight: 700;
        letter-spacing: -0.02em;
        min-inline-size: 10ch;
        outline: 0;
    }

    /* ── Live route badge — animated dot + LIVE in execute_route breadcrumb. */

    .route-live-badge {
        align-items: center;
        color: var(--color-considering, oklch(65% 0.15 220));
        display: inline-flex;
        font-family: var(--font-data);
        font-size: 0.625rem;
        font-weight: 700;
        gap: 0.4ch;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .route-live-badge::before {
        animation: route-live-pulse 1.4s ease-in-out infinite;
        background: currentColor;
        block-size: 0.5em;
        border-radius: 50%;
        content: "";
        flex-shrink: 0;
        inline-size: 0.5em;
    }

    @keyframes route-live-pulse {
        0%, 100% { opacity: 1; }
        50%       { opacity: 0.25; }
    }

    /* ── Execute route — slim live bar.
       Keeps display:grid but collapses to menu + livebar rows.
       .exec-live-bar is a flex strip spanning the livebar area:
         [● LIVE · R-1 · route name] ─── [5/8] [+ Add] [✓ Complete]
       On native, header--bridged collapses the whole header anyway.  */

    .header--live {
        grid-template-areas:
            "menu    menu   menu"
            "livebar livebar livebar";
        grid-template-rows: auto auto;
        padding-block-end: 0.3rem;
    }

    .exec-live-title { display: none; }

    .exec-live-bar {
        align-items: center;
        display: flex;
        gap: 0.35rem;
        grid-area: livebar;
        min-inline-size: 0;
    }

    .exec-live-info {
        align-items: center;
        display: flex;
        gap: 0.4rem;
        min-inline-size: 0;
        overflow: hidden;
    }

    .exec-live-info .btn--back {
        flex-shrink: 0;
        font-size: var(--text-x-small);
    }

    .exec-live-sep {
        color: var(--rule);
        flex-shrink: 0;
        font-family: var(--font-data);
        font-size: 0.7rem;
    }

    .exec-live-callsign {
        color: var(--ink-mute);
        flex-shrink: 0;
        font-family: var(--font-data);
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .exec-live-route-name {
        color: var(--ink-soft);
        font-size: var(--text-small);
        font-weight: 600;
        overflow: hidden;
        text-decoration: none;
        text-overflow: ellipsis;
        white-space: nowrap;

        &:hover { color: var(--ink); }
    }

    .exec-live-check-id {
        color: var(--color-negative);
        flex-shrink: 0;
        font-family: var(--font-data);
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .exec-live-check-name {
        color: var(--ink);
        font-size: var(--text-small);
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .exec-live-spacer { flex: 1; }

    .exec-live-progress {
        color: var(--ink-faint);
        flex-shrink: 0;
        font-family: var(--font-data);
        font-size: 0.65rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .exec-live-progress-sep {
        color: var(--rule);
        margin-inline: 0.05em;
    }

    .exec-live-actions {
        align-items: center;
        display: flex;
        flex-shrink: 0;
        gap: 0.25rem;
    }

    .route-stage {
        background: var(--color-canvas);
        border: 1px solid var(--rule);
        margin-inline: auto;
        max-inline-size: var(--main-width);
        overflow: clip;
        padding: 0.9rem;
        position: relative;
    }

    .route-stage::before {
        background: var(--card-color, var(--primary));
        content: "";
        inset: 0 auto auto 0;
        block-size: 2px;
        inline-size: min(12rem, 100%);
        opacity: 0.65;
        position: absolute;
    }

    .route-stage__head {
        margin-block-end: 0.9rem;
    }

    /* Control Room check card — single route item, mirrors .zone-card.
    /* ------------------------------------------------------------------------
    /* Used on route_detail board columns, route_zone_detail, route_unzoned_detail.
    /* When .check-card--draggable is present, the card is part of the route
    /* board and carries drag-drop hooks the route-board controller binds
    /* to via [data-item-uuid].
    /* ----------------------------------------------------------------------- */

    .check-card {
        background: var(--surface);
        border: 1px solid var(--rule);
        box-shadow: inset 3px 0 0 var(--card-color, var(--rule));
        color: var(--ink);
        display: grid;
        gap: 0.4rem;
        padding: 0.75rem 0.9rem 0.75rem 1.05rem;
        position: relative;
        transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
    }

    .check-card[data-state="warning"] {
        background: var(--surface-warn);
        border-color: color-mix(in oklch, var(--rule) 40%, var(--status-warning));
    }

    .check-card[data-state="critical"] {
        background: var(--surface-crit);
        border-color: color-mix(in oklch, var(--rule) 40%, var(--status-critical));
    }

    @media (any-hover: hover) {
        .check-card:hover {
            border-color: var(--primary);
            box-shadow: inset 3px 0 0 var(--card-color), 0 0 0 1px var(--primary);
        }
    }

    .check-card--draggable {
        cursor: grab;

        &:active { cursor: grabbing; }
    }

    .check-card__header {
        align-items: baseline;
        display: flex;
        flex-wrap: wrap;
        gap: 0 0.6ch;
    }

    .check-card__type {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.5625rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .check-card__progress {
        align-items: baseline;
        color: var(--ink-soft);
        display: inline-flex;
        font-family: var(--font-data);
        font-size: 0.625rem;
        font-weight: 700;
        gap: 0.3ch;
        letter-spacing: 0.08em;
        margin-inline-start: 0.5ch;
    }

    .check-card__progress .icon {
        block-size: 0.85em;
        inline-size: 0.85em;
    }

    .check-card__header .status-chip {
        margin-inline-start: auto;
    }

    .check-card__title {
        color: var(--ink);
        font-family: var(--font-body);
        font-size: 0.9375rem;
        font-weight: 600;
        letter-spacing: -0.005em;
        line-height: 1.25;
        margin: 0;
    }

    .check-card__meta {
        align-items: baseline;
        color: var(--ink-soft);
        display: flex;
        flex-wrap: wrap;
        font-family: var(--font-data);
        font-size: 0.625rem;
        gap: 0 0.75ch;
        letter-spacing: 0.08em;
        margin-block-start: 0.1rem;
        text-transform: uppercase;
    }

    .check-card__result {
        color: var(--ink-soft);
        font-weight: 700;
    }

    .check-card__result--pass    { color: var(--status-nominal-fg, var(--ink)); }
    .check-card__result--minor   { color: var(--status-warn-fg); }
    .check-card__result--major   { color: var(--status-crit-fg); }
    .check-card__result--idle    { color: var(--ink-mute); }

    .check-card__updated {
        color: var(--ink-faint);
        margin-inline-start: auto;
    }


    /* Recent-activity stream on route_item_detail — compact "row per run".
       Each row carries --card-color from the response status; data-state
       drives a subtle background tint per warning/critical/running. */
    .activity-stream {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .activity-row {
        align-items: baseline;
        background: var(--surface);
        border: 1px solid var(--rule-soft);
        box-shadow: inset 3px 0 0 var(--card-color, var(--rule));
        color: inherit;
        column-gap: 0.75ch;
        display: grid;
        grid-template-columns: auto 1fr auto;
        padding: 0.55rem 0.85rem 0.55rem 1.05rem;
        text-decoration: none;
        transition: border-color 120ms ease-out;
    }

    .activity-row[data-state="warning"]  { background: var(--surface-warn); }
    .activity-row[data-state="critical"] { background: var(--surface-crit); }

    @media (any-hover: hover) {
        .activity-row:hover { border-color: var(--primary); }
    }

    .activity-row__byline {
        align-items: baseline;
        color: var(--ink-soft);
        display: inline-flex;
        flex-wrap: wrap;
        font-family: var(--font-data);
        font-size: 0.6875rem;
        gap: 0 0.75ch;
        letter-spacing: 0.04em;
    }

    .activity-row__byline strong { color: var(--ink); font-weight: 600; }
    .activity-row__byline time   { text-transform: uppercase; letter-spacing: 0.08em; }

    .activity-row__notes {
        color: var(--ink-soft);
        font-size: 0.8125rem;
        grid-column: 2 / 3;
        margin: 0.15rem 0 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .activity-row__chip { align-self: center; }

    /* Single-column stacks for zone / unzoned / executions detail pages. */
    .check-card-stack,
    .execution-card-stack {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-inline: auto;
        max-inline-size: 80ch;
    }

    /* "+ Add a check" affordance — sits alongside the cards in the stack
       on the unzoned column, full-width like an empty-zone CTA. */
    .check-card-stack__add {
        justify-content: center;
        margin-block-start: 0.25rem;
        padding-block: 0.45rem;
    }

    /* Control Room execution card — mirrors .check-card / .zone-card.
    /* ------------------------------------------------------------------------
    /* Used in the executions column on route_detail (collapsed in the kanban
    /* mobile flow) and on route_executions_list (full single-column view).
    /* ----------------------------------------------------------------------- */

    .execution-card {
        background: var(--surface);
        border: 1px solid var(--rule);
        box-shadow: inset 3px 0 0 var(--card-color, var(--rule));
        color: var(--ink);
        display: grid;
        gap: 0.35rem;
        padding: 0.75rem 0.9rem 0.75rem 1.05rem;
        position: relative;
        transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
    }

    .execution-card[data-state="warning"] {
        background: var(--surface-warn);
        border-color: color-mix(in oklch, var(--rule) 40%, var(--status-warning));
    }

    .execution-card[data-state="critical"] {
        background: var(--surface-crit);
        border-color: color-mix(in oklch, var(--rule) 40%, var(--status-critical));
    }

    .execution-card[data-state="running"] {
        background: color-mix(in oklch, var(--surface) 88%, var(--color-considering));
        border-color: color-mix(in oklch, var(--rule) 40%, var(--color-considering));
    }

    @media (any-hover: hover) {
        .execution-card:hover {
            border-color: var(--primary);
            box-shadow: inset 3px 0 0 var(--card-color), 0 0 0 1px var(--primary);
        }
    }

    .execution-card__header {
        align-items: baseline;
        display: flex;
        flex-wrap: wrap;
        gap: 0 0.6ch;
    }

    .execution-card__header .status-chip {
        margin-inline-start: auto;
    }

    .execution-card__header .status-chip[data-state="running"] {
        color: var(--color-considering);
    }

    .execution-card__title {
        color: var(--ink);
        font-family: var(--font-body);
        font-size: 0.9375rem;
        font-weight: 600;
        letter-spacing: -0.005em;
        line-height: 1.25;
        margin: 0;
    }

    .execution-card__byline {
        color: var(--ink-soft);
        font-family: var(--font-data);
        font-size: 0.6875rem;
        letter-spacing: 0.04em;
        margin: 0;
    }

    .execution-card__byline strong {
        color: var(--ink);
        font-weight: 600;
    }

    .execution-card__meta {
        align-items: baseline;
        color: var(--ink-soft);
        display: flex;
        flex-wrap: wrap;
        font-family: var(--font-data);
        font-size: 0.625rem;
        gap: 0 0.75ch;
        letter-spacing: 0.08em;
        margin-block-start: 0.15rem;
        text-transform: uppercase;
    }

    .execution-card__result strong {
        color: var(--ink);
        font-weight: 700;
        margin-inline-start: 0.3ch;
    }

    .execution-card[data-state="warning"] .execution-card__result strong  { color: var(--status-warn-fg); }
    .execution-card[data-state="critical"] .execution-card__result strong { color: var(--status-crit-fg); }

    .execution-card__updated {
        color: var(--ink-faint);
        margin-inline-start: auto;
    }

    .execution-card__updated--minor { color: var(--status-warn-fg); font-weight: 700; }
    .execution-card__updated--major { color: var(--status-crit-fg); font-weight: 700; }

    /* Single-page wrapper for route_executions_list.
       Container layout via .page-wrap group in atoms.css. */
    .execution-list {
        text-align: start;
    }

    /* Control Room route grid + route card (route_list.html).
    /* ------------------------------------------------------------------------
    /* Mirrors the section→asset zone grid (registry/_zone_card.html +
    /* zone_grid.css) so routes and assets share one visual vocabulary:
    /* mono callsign in the header, body-face title, mono uppercase meta
    /* footer, --card-color drives the inset stripe and border tint.
    /* ----------------------------------------------------------------------- */

    .route-grid {
        display: flex;
        flex-direction: column;
        gap: 0.85rem;
    }

    .route-grid__head {
        margin-block-end: 0.25rem;
    }

    .route-grid__cards {
        --route-card-min: 28ch;

        align-items: start;
        display: grid;
        gap: 0.75rem;
        grid-template-columns: repeat(auto-fit, minmax(var(--route-card-min), 1fr));
    }

    /* Keyboard nav selection — outline matches the global focus ring. */
    .route-grid__item {
        position: relative;

        &[aria-selected="true"] .route-card {
            outline: var(--focus-ring-size) solid var(--focus-ring-color);
            outline-offset: var(--focus-ring-offset);
        }
    }

    /* Card — same surface + stripe + border treatment as .zone-card so
       the section→asset and routes pages read as one design family. */
    .route-card {
        background: var(--surface);
        border: 1px solid var(--rule);
        box-shadow: inset 3px 0 0 var(--card-color, var(--rule));
        color: var(--ink);
        display: grid;
        gap: 0.5rem;
        padding: 0.85rem 1rem 0.85rem 1.15rem;
        position: relative;
        transition: border-color 120ms ease-out, box-shadow 120ms ease-out;
    }

    .route-card[data-state="warning"] {
        background: var(--surface-warn);
        border-color: color-mix(in oklch, var(--rule) 40%, var(--status-warning));
    }

    .route-card[data-state="critical"] {
        background: var(--surface-crit);
        border-color: color-mix(in oklch, var(--rule) 40%, var(--status-critical));
    }

    .route-card[data-state="running"] {
        /* Subtle blue tint — distinguishes "currently being run" from
           the alarm states without competing with them. Uses the same
           --color-considering token already in the palette. */
        background: color-mix(in oklch, var(--surface) 88%, var(--color-considering));
        border-color: color-mix(in oklch, var(--rule) 40%, var(--color-considering));
    }

    @media (any-hover: hover) {
        .route-card:hover {
            border-color: var(--primary);
            box-shadow: inset 3px 0 0 var(--card-color), 0 0 0 1px var(--primary);
        }
    }

    /* Invisible link covers the whole card; screen readers get the SR text. */
    .route-card__link {
        inset: 0;
        position: absolute;
        z-index: 1;
    }

    .route-card__header {
        align-items: baseline;
        display: flex;
        flex-wrap: wrap;
        gap: 0 0.6ch;
    }

    .route-card__section {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.5625rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    /* Status-chip running variant — additive to the global atom. */
    .route-card__header .status-chip[data-state="running"] {
        color: var(--color-considering);
    }

    .route-card__header .status-chip {
        margin-inline-start: auto;
    }

    .route-card__title {
        color: var(--ink);
        font-family: var(--font-body);
        font-size: 1rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        line-height: 1.2;
        margin: 0;
    }

    .route-card__description {
        color: var(--ink-soft);
        display: -webkit-box;
        font-family: var(--font-body);
        font-size: var(--text-small);
        line-height: 1.4;
        margin: 0;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .route-card__meta {
        align-items: baseline;
        color: var(--ink-soft);
        display: flex;
        flex-wrap: wrap;
        font-family: var(--font-data);
        font-size: 0.625rem;
        gap: 0 0.75ch;
        letter-spacing: 0.08em;
        margin-block-start: 0.15rem;
        text-transform: uppercase;
    }

    .route-card__count {
        color: var(--ink-soft);
        font-weight: 700;
    }

    .route-card[data-state="warning"] .route-card__count {
        color: var(--status-warn-fg);
    }

    .route-card[data-state="critical"] .route-card__count {
        color: var(--status-crit-fg);
    }

    .route-card__updated {
        color: var(--ink-faint);
        margin-inline-start: auto;
    }

    .route-card__updated--never {
        color: var(--ink-mute);
    }

    /* Flatten the outer .route-stage wrapper when used inside the board.
       The kanban columns and their check-cards provide all the visual
       grouping needed — the extra box just creates a box-in-box look.
       The section-head's bottom rule provides the section separator.     */

    .routes--board .route-stage {
        background: transparent;
        border: 0;
        overflow: visible;
        padding: 0;
    }

    .routes--board .route-stage::before {
        display: none;
    }

    /* Phase 5 — Control Room zone grid on the route board.
    /* ------------------------------------------------------------------------
    /* Overrides the fixed-width kanban in card_columns.css (components layer)
    /* without renaming classes, so the drag-drop controller keeps working.
    /* Scoped under `.routes--board` so only route / execute pages are
    /* affected; list pages keep their existing .routes styling below.       */

    .routes--board .card-columns {
        align-items: start;
        display: grid;
        flex-wrap: initial;
        gap: 1.25rem;
        grid-template-columns: repeat(auto-fit, minmax(22ch, 1fr));
        inline-size: auto;
        margin-inline: auto;
        max-inline-size: var(--main-width);
        overflow: visible;
        padding-block: var(--block-space);
        padding-inline: var(--main-padding);
        text-align: start;
    }

    /* Each zone — clear all collapse-state positioning from card_columns.css */
    .routes--board .cards {
        block-size: auto;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        inline-size: auto;
        max-block-size: none;
        max-inline-size: none;
        min-block-size: 0;
        min-inline-size: 0;
        overflow: visible;
        position: static;
        transform: none;
    }

    .routes--board .cards__transition-container {
        block-size: auto;
        display: contents;
    }

    .routes--board .cards__header {
        align-items: baseline;
        background: transparent;
        border-block-end: 1px solid var(--rule-soft);
        display: flex;
        flex-wrap: wrap;
        gap: 0.5em;
        inline-size: auto;
        padding-block: 0.375em 0.5em;
        padding-inline: 0;
        position: static;
        writing-mode: horizontal-tb;
    }

    .routes--board .cards__expander {
        background: transparent;
        block-size: auto;
        color: var(--ink);
        display: inline-flex;
        flex-direction: row;
        font-family: var(--font-data);
        font-size: 0.6875rem;
        font-weight: 700;
        inline-size: auto;
        letter-spacing: 0.16em;
        padding: 0;
        text-transform: uppercase;
        writing-mode: horizontal-tb;
    }

    .routes--board .cards__expander .icon--collapse { display: none; }

    .routes--board .cards__expander-count {
        color: var(--ink-soft);
        font-size: inherit;
        margin-inline-end: 0.25em;
    }

    .routes--board .cards__expander-title {
        font-size: inherit;
        margin: 0;
    }

    .routes--board .cards__list {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        inline-size: 100%;
        min-block-size: 2rem;
        padding: 0;
    }

    .routes--board .cards__new-column,
    .routes--board .cards__actions {
        inline-size: auto;
    }

    .routes--board .card-columns > .cards__new-column {
        align-items: center;
        display: flex;
        justify-content: center;
        min-block-size: 2.5rem;
    }

    /* Routes container — width constraints */
    .routes {
        --routes-item-padding-inline: 0;

        margin: 0 auto;
        max-inline-size: min(80ch, 100%);
    }

    /* Board mode: centered horizontal columns like Fizzy */
    .routes--board {
        --main-padding: clamp(1rem, 4vw, 2rem);

        margin-inline: auto;
        max-inline-size: var(--main-width);
        padding-block-start: 1.5rem;
        padding-block-end: var(--block-space);
        padding-inline: var(--main-padding);
        text-align: start;
    }

    .routes--board .card-columns {
        scroll-snap-type: inline proximity;
    }

    .routes--board .cards {
        align-self: stretch;
    }

    .routes--board .cards__list {
        gap: 0.4rem;
    }

    .routes--board .check-card,
    .routes--board .execution-card {
        gap: 0.25rem;
        padding: 0.62rem 0.75rem 0.62rem 0.9rem;
    }

    .routes--board .check-card__title,
    .routes--board .execution-card__title {
        font-size: 0.9rem;
    }

    .routes--board .cards__transition-container {
        background: color-mix(in oklch, var(--surface) 94%, var(--card-color, var(--primary)) 6%);
        border: 1px solid color-mix(in oklch, var(--rule) 88%, var(--card-color, var(--primary)));
        border-radius: 1rem;
        box-shadow: 0 1rem 2.5rem -2rem color-mix(in oklch, var(--ink) 16%, transparent);
        padding-block: 0.85rem 1rem;
    }

    /* Route detail: grouped row board, not expanding columns. */
    .routes--board .route-groups {
        display: grid;
        gap: 0.65rem;
        grid-template-columns: minmax(0, 1fr);
        max-inline-size: var(--main-width);
        overflow: visible;
        padding: 0;
    }

    .routes--board .route-group {
        inline-size: 100%;
        scroll-margin-block-start: 5rem;
    }

    .routes--board .route-group__shell {
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        display: grid;
        gap: 0.35rem;
        padding-block: 0;
    }

    .route-group__header {
        align-items: center;
        border-block-end: 1px solid var(--rule-soft);
        display: grid;
        gap: 0.6rem;
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        min-block-size: 2.15rem;
        padding-block: 0.15rem 0.35rem;
    }

    .route-group--fixed .route-group__header {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .route-group__drag {
        align-items: center;
        appearance: none;
        background: transparent;
        border: 0;
        block-size: 1.75rem;
        color: var(--ink-faint);
        cursor: grab;
        display: inline-flex;
        inline-size: 1.75rem;
        justify-content: center;
        padding: 0;
    }

    .route-group__drag:active {
        cursor: grabbing;
    }

    .route-group__drag .icon {
        --icon-size: 1rem;
    }

    .route-group__title {
        align-items: baseline;
        display: flex;
        gap: 0.7rem;
        min-inline-size: 0;
    }

    .route-group__title .section-marker {
        flex: 0 0 auto;
    }

    .route-group__title .cards__expander-title {
        color: var(--ink);
        font-family: var(--font-data);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        line-height: 1.25;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .route-group__count {
        color: var(--ink-soft);
        font-family: var(--font-data);
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .route-group__count .cards__expander-count {
        display: inline;
        margin: 0;
    }

    .route-group__header .cards__menu {
        align-items: center;
        display: flex;
        grid-area: auto;
        justify-content: flex-end;
        position: relative;
    }

    .route-group__header .cards__menu .btn--circle {
        block-size: 1.75rem;
        inline-size: 1.75rem;
        opacity: 1;
    }

    .routes--board .route-group__rows {
        display: grid;
        gap: 0.25rem;
        margin: 0;
        min-block-size: 2.65rem;
        overflow: visible;
        padding: 0;
    }

    .routes--board .route-group__rows .check-card {
        align-items: center;
        display: grid;
        gap: 0.45rem 0.75rem;
        grid-template-columns: minmax(8rem, 0.75fr) minmax(0, 1.55fr) minmax(8rem, 0.8fr);
        min-block-size: 2.55rem;
        padding: 0.5rem 0.65rem 0.5rem 0.8rem;
    }

    .routes--board .route-group__rows .check-card__header {
        min-inline-size: 0;
    }

    .routes--board .route-group__rows .check-card__title {
        font-size: 0.9rem;
        line-height: 1.2;
        min-inline-size: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .routes--board .route-group__rows .check-card__meta {
        justify-content: flex-end;
        margin: 0;
        min-inline-size: 0;
        text-align: end;
    }

    .routes--board .route-group:has([data-item-uuid]) .blank-slate {
        display: none;
    }

    .routes--board .route-group .blank-slate {
        border-color: var(--rule);
        color: var(--ink-soft);
        font-size: 0.75rem;
        margin-block-start: 0;
        padding: 0.65rem 0.8rem;
        rotate: 0deg;
    }

    .route-group-drop-placeholder {
        block-size: 3rem;
        border: 1px dashed var(--primary);
        background: color-mix(in oklch, var(--primary) 7%, transparent);
        box-sizing: border-box;
    }

    .route-group--dragging {
        opacity: 0.55;
    }

    .routes--board .route-groups > .cards__new-column {
        align-items: stretch;
        border-block-start: 1px solid var(--rule-soft);
        display: flex;
        justify-content: stretch;
        min-block-size: 0;
        padding-block-start: 0.65rem;
    }

    .routes--board .route-groups > .cards__new-column .btn {
        --btn-background: transparent;

        border: 1px dashed var(--rule);
        border-radius: 0.35rem;
        block-size: 2.5rem;
        inline-size: 100%;
        justify-content: center;
    }

    .route-stage--executions {
        margin-block-start: 2rem;
    }

    .route-executions__list {
        display: grid;
        gap: 0.35rem;
        margin-inline: 0;
        max-inline-size: none;
    }

    /* Routes — group picker list */
    .routes__asset-list {
        list-style: none;
        margin: 0;
        padding: 0;
        padding-inline-start: var(--routes-item-padding-inline);
    }

    @media (max-width: 639px) {
        .route-stage {
            padding: 0.7rem;
        }

        .routes--execute .route-stage--execute,
        .routes--execute .route-stage--capture {
            padding: 0;
        }

        .routes--board .cards__transition-container {
            border-radius: 0.8rem;
            padding-block: 0.75rem 0.9rem;
        }

        .routes--board .route-group__shell {
            border-radius: 0;
            padding-block: 0;
        }

        .route-group__header,
        .route-group--fixed .route-group__header {
            gap: 0.4rem;
            grid-template-columns: auto minmax(0, 1fr) auto;
        }

        .route-group--fixed .route-group__header {
            grid-template-columns: minmax(0, 1fr) auto;
        }

        .route-group__title {
            gap: 0.45rem;
        }

        .route-group__count {
            display: none;
        }

        .routes--board .route-group__rows .check-card {
            grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
        }

        .routes--board .route-group__rows .check-card__meta {
            grid-column: 1 / -1;
            justify-content: flex-start;
            text-align: start;
        }
    }

    /* Execution report — grid layout for response rows */
    .execution-report__row {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 0 1ch;
        padding-inline: var(--space-half);
        padding-block: 0.4em;

        &>.separator--horizontal {
            width: 100%;
        }
    }

    .execution-report__response--alert {
        background-color: color-mix(in oklch, var(--color-status-major-bg) 30%, transparent);
    }

    /* Execution report — notes and files */
    .execution-report__note {
        grid-column: 1 / -1;
        width: fit-content;
        margin: 0.4em 0 0;
        padding: 0.3em 0.75em;
        display: flex;
        align-items: center;
        gap: 0.5ch;
        background-color: var(--color-highlight);
        border-radius: 0.3em;
    }

    .execution-report__files {
        grid-column: 1 / -1;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5em;
        padding-block-start: 0.25em;
    }

    .execution-report__file-img {
        display: block;
        max-width: 8rem;
        max-height: 6rem;
        border-radius: var(--radius, 4px);
        object-fit: cover;
        cursor: zoom-in;
    }

    /* Execution report — multi-check subchecks */
    .execution-report__subchecks {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
    }

    .execution-report__subcheck {
        display: flex;
        align-items: center;
        gap: 0.5ch;
        padding-inline-start: 0.5em;
    }

    .execution-report__subcheck--fail {
        color: var(--color-status-major-ink);
        font-weight: 500;
    }

    /* Route editor — turbo-frame layout (measurement-point select row) */
    .route-edit__item-row > turbo-frame {
        display: contents;
    }

    /* Route editor — group card (create mode only).
     *
     * Each checklist group is a card: breadcrumb header on top, stack of
     * item cards beneath. In edit mode the group is a <tbody> so these
     * card styles intentionally do not apply there. */
    div > .route-edit__group {
        --group-border: var(--rule);

        display: flex;
        flex-direction: column;
        gap: var(--space-half, 0.6em);
        padding: var(--space-half, 0.6em);
        background: var(--surface);
        border: 1px solid var(--group-border);
        border-radius: 0.5em;
        box-shadow: 0 1px 2px oklch(0% 0 0 / 0.03);
    }

    .route-edit__group-head {
        display: flex;
        align-items: center;
        gap: 0.5ch;
        min-inline-size: 0;
    }

    .route-edit__group-title {
        flex: 1 1 auto;
        min-inline-size: 0;
        margin: 0;
        font-family: var(--font-body, system-ui);
        font-size: 1em;
        line-height: 1.2;
        text-transform: none;
        letter-spacing: normal;
        overflow: hidden;

        /* Last crumb (the asset/zone name) in bold — this is the current segment */
        & .breadcrumb__item--current {
            font-weight: 700;
        }

        /* Let the breadcrumb wrap on very narrow containers rather than
           clipping the asset name. */
        flex-wrap: wrap;
    }

    .route-edit__group-actions {
        display: flex;
        gap: 0.5ch;
        flex-shrink: 0;
    }

    .route-edit__group-actions > .btn--circle {
        --btn-size: 2.75rem;
    }

    /* Stack of item cards inside a group. */
    .route-edit__item-list {
        display: flex;
        flex-direction: column;
        gap: 0.4em;
    }

    /* Item card — drag handle on the left edge + row of controls + optional photo gallery. */
    .route-edit__item {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0 0.25em;
        padding: 0.5em 0.6em;
        padding-inline-start: 0;
        background: color-mix(in oklch, var(--rule-soft) 40%, var(--surface));
        border: 1px solid var(--rule);
        border-radius: 0.35em;
    }

    /* Drag handle sits in its own narrow column, spanning both rows. */
    .route-edit__item > .drag-handle {
        grid-row: 1 / -1;
        align-self: stretch;
        display: flex;
        align-items: center;
        padding: 0.25em 0.3em;
        border-inline-end: 1px solid var(--rule);
        margin-inline-end: 0.25em;
    }

    .route-edit__item-row {
        display: flex;
        align-items: center;
        gap: 0.5ch;
        min-inline-size: 0;
    }

    .route-edit__item-row > input[name="item_label"],
    .route-edit__item-row > turbo-frame > select[name="measurement_point"] {
        flex: 1 1 auto;
        min-inline-size: 0;
    }

    .route-edit__item-row > .btn--circle {
        --btn-size: 2.75rem;
    }

    .route-edit__item-row > .btn--negative,
    .route-edit__group-actions > .btn--negative {
        --btn-background: transparent;
        --btn-color: var(--status-crit-fg);
        --btn-border-color: var(--rule);

        @media (any-hover: hover) {
            &:hover {
                --btn-background: var(--status-crit-fg);
                --btn-color: var(--color-ink-inverted);
                --btn-border-color: var(--status-crit-fg);
            }
        }
    }

    /* Photo gallery under the item row. Inherits .attachments base styling
       from measurement_form.css; this just tightens the thumbnail size and
       hides the gallery when empty via the [hidden] attribute.
       Grid column 2 so it sits next to the drag handle, not under it. */
    .route-edit__photos {
        --attachment-height: var(--attachment-md);
        grid-column: 2;
        margin: 0;
    }

    /* Empty-state upload placeholder inside the photos strip. */
    .attachment--upload {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.25rem;
        block-size: var(--attachment-height, var(--attachment-md));
        aspect-ratio: 1;
        border: 2px dashed var(--rule);
        border-radius: var(--radius-s, 6px);
        cursor: pointer;

        &:hover {
            border-color: var(--accent);
            color: var(--accent);
        }
    }

    /* Upload button (camera) — count badge stacks top-right like
       attachment__download. */
    .route-edit__upload-btn {
        position: relative;
    }

    .route-edit__upload-count {
        position: absolute;
        inset-block-start: -0.35em;
        inset-inline-end: -0.35em;
        min-inline-size: 1.4em;
        padding: 0 0.3em;
        background: var(--accent);
        color: var(--surface);
        border: 2px solid var(--surface);
        border-radius: 999px;
        font-size: 0.65em;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        line-height: 1.4;
        text-align: center;
    }

    /* Delete badge on photo thumbnails — mirrors .attachment__download
       geometry but in destructive red. Clicking triggers
       route-editor#deletePhoto. */
    .attachment__delete {
        --size: 1.5em;

        align-items: center;
        appearance: none;
        background-color: var(--status-crit-fg);
        block-size: var(--size);
        border: 2px solid var(--surface);
        border-radius: 50%;
        color: var(--surface);
        cursor: pointer;
        display: flex;
        inline-size: var(--size);
        inset-block-end: -0.3em;
        inset-inline-end: -0.3em;
        justify-content: center;
        padding: 0;
        position: absolute;
        z-index: 2;

        .icon {
            font-size: 0.5em;
        }

        @media (any-hover: hover) {
            &:hover {
                background-color: oklch(var(--lch-red-dark));
            }
        }
    }

    /* Route editor — item row reflow on narrow containers.
     *
     * The row packs label + type + optional camera + move + remove.
     * The drag handle is outside the row (in its own grid column), so
     * the row only needs to worry about its own controls. On narrow
     * viewports the row wraps onto two lines:
     *
     * Narrow layout:
     *   row 1: [label — full width]
     *   row 2: [type select — grows] [camera?] [move] [remove]
     */
    [data-route-editor-target="itemList"] {
        container-type: inline-size;
        container-name: route-item-list;
    }

    @container route-item-list (max-width: 55ch) {
        .route-edit__item-row {
            flex-wrap: wrap;
        }

        /* Label input OR measurement-point select (inside display:contents
           turbo-frame) takes the full row width,
           pushing the action cluster onto row 2. */
        .route-edit__item-row > input[name="item_label"],
        .route-edit__item-row > turbo-frame > select[name="measurement_point"] {
            flex: 1 1 100%;
            min-inline-size: 0;
        }

        /* Type select grows to fill the action row. */
        .route-edit__item-row > select[name="item_type"] {
            flex: 1 1 auto;
            min-inline-size: 0;
        }
    }

    /* Route editor — drag-and-drop affordances */
    .drag-handle {
        display: inline-flex;
        cursor: grab;
        padding: 0.25em;
    }

    .drag-handle:active {
        cursor: grabbing;
    }

    .sortable-ghost {
        opacity: 0.3;
    }

    .sortable-chosen {
        box-shadow: 0 2px 8px oklch(0% 0 0 / 0.15);
    }

    [data-route-editor-target="itemList"]:empty {
        min-block-size: 2em;
        border: 1px dashed var(--color-ink-lighter);
        border-radius: 0.5em;
    }

    /* Route editor — datasheet table variant (edit mode).
     * Groups are <tbody> rows, items are <tr> within each group.
     * The drag handle sits in the first narrow column; actions in the last. */

    .route-edit__table {
        margin-block-start: 0.25rem;

        /* Override standard datasheet thead padding — no triangle gutter needed here */
        & thead th:first-child {
            padding-inline-start: 0.55rem;
        }

        /* Grip column — fixed narrow width for drag handles */
        & thead th:first-child,
        & td:first-child {
            inline-size: 2rem;
            padding-inline: 0.3rem;
            text-align: center;
        }

        /* Actions column — narrow padding, no wrap */
        & thead th:last-child,
        & td:last-child {
            padding-inline: 0.3rem;
            white-space: nowrap;
        }

        /* Group-delete th — padding only; flex lives on the inner div */
        & .route-edit__group-delete {
            padding-inline: 0.3rem;
        }

        & .route-edit__group-delete__inner,
        & .route-edit__item-actions-cell__inner {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 0.25rem;
        }

        /* Always show the Actions header — override the global last-child hide */
        @media (max-width: 100ch) {
            & thead th:last-child {
                display: table-cell;
            }
        }

        & .datasheet__group-head th:not(.route-edit__group-delete) {
            padding-block: 0.5rem;
            padding-inline: 0.55rem;
        }
    }

    .route-edit__group-delete__inner > .btn--circle,
    .route-edit__item-actions-cell__inner > .btn--circle {
        --btn-size: 1.75rem;

        &:not(.btn--negative) {
            --btn-background: transparent;
            --btn-color: var(--ink-faint);
            @media (any-hover: hover) {
                &:hover {
                    --btn-background: var(--surface-sunken);
                    --btn-color: var(--ink);
                }
            }
        }

        &.btn--negative {
            --btn-background: transparent;
            --btn-color: var(--status-crit-fg);
            @media (any-hover: hover) {
                &:hover {
                    --btn-background: var(--status-crit-fg);
                    --btn-color: var(--color-ink-inverted);
                    --btn-border-color: var(--status-crit-fg);
                }
            }
        }
    }

    .route-edit__item-actions {
        align-items: center;
        display: flex;
        gap: 0.3ch;
        justify-content: flex-end;

        & .btn--circle {
            --btn-size: 2.25rem;
        }

        & .btn--negative {
            --btn-background: transparent;
            --btn-color: var(--status-crit-fg);
            --btn-border-color: var(--rule);

            @media (any-hover: hover) {
                &:hover {
                    --btn-background: var(--status-crit-fg);
                    --btn-color: var(--color-ink-inverted);
                    --btn-border-color: var(--status-crit-fg);
                }
            }
        }
    }

    /* Empty tbody drop-target when all items have been moved out */
    .route-edit__table tbody[data-route-editor-target="itemList"]:not(:has([data-item])) {
        & > tr:not(.datasheet__group-head) {
            display: none;
        }
    }

    /* Sortable ghost / chosen inside the table */
    .route-edit__table .sortable-ghost td,
    .route-edit__table .sortable-ghost th {
        opacity: 0.35;
    }

    /* Non-conformity stamp on asset detail card (mirrors .card__closed pattern) */
    .card__nc-stamp {
        --stamp-color: color-mix(in oklch, var(--color-status-major) 65%, transparent);

        align-items: center;
        background-color: color-mix(in srgb, var(--card-bg-color) 90%, transparent);
        border-radius: 0.2em;
        border: 0.5ch solid var(--stamp-color);
        color: var(--color-ink-dark);
        display: flex;
        flex-direction: column;
        font-weight: bold;
        inset: auto 1ch 1ch auto;
        justify-content: center;
        max-inline-size: 25ch;
        min-inline-size: 16ch;
        padding: 1ch;
        position: absolute;
        rotate: -3deg;
        text-decoration: none;
        transform-origin: top right;
    }

    .card__nc-stamp-title {
        color: var(--stamp-color);
        font-size: 1.3em;
        font-weight: 900;
        text-align: center;
        text-transform: uppercase;
    }

    .card__nc-stamp-date {
        font-family: var(--font-data);
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .card__nc-stamp-by {
        border-block-end: 1px dashed currentcolor;
    }

    /* Non-conformity panel in comments section (mirrors comment-by-system look) */
    .nc-panel {
        display: flex;
        margin-inline: auto;
        max-inline-size: var(--comment-max, 70ch);

        &::before {
            content: "";
            display: flex;
            inline-size: calc(var(--comment-padding-inline, 2ch) * 0.9);
            flex-shrink: 0;
        }
    }

    .nc-panel__content {
        --stripe-color: color-mix(in srgb, var(--color-negative) 10%, var(--color-canvas));

        background-color: var(--color-ink-lightest);
        background-image: repeating-linear-gradient(45deg in srgb,
                var(--color-canvas) 0 1px,
                var(--stripe-color) 1px 10px);
        border-radius: 0.2em;
        flex-grow: 1;
        padding: var(--block-space-half, 0.75em) var(--comment-padding-inline, 2ch);
        text-align: start;
    }

    /* Non-conformity row in asset panel */
    .asset-nc-row {
        padding-block: 0.5em;

        &:not(:last-child) {
            border-block-end: 1px solid var(--color-ink-lighter);
        }
    }

    /* Resolved state in execution report */
    .execution-report__response--resolved {
        opacity: 0.5;

        & .badge {
            background-color: var(--color-positive);
        }
    }

    /* Resolution form in resolve turbo-frame */
    .resolve-form {
        display: flex;
        flex-direction: column;
        gap: var(--space-half);
        padding: var(--space-half);
        background: var(--color-highlight);
        border-radius: 0.5em;
        margin-block-start: 0.25em;
    }

    .resolve-form__buttons {
        display: flex;
        gap: 0.5ch;
        justify-content: flex-end;
    }

    /* Resolution timeline entry - green accent */
    .comment-by-system--resolution {
        --card-color: var(--color-positive);
    }

    /* Execution UI
    /* ------------------------------------------------------------------------ */

    /* Execution cards — state grammar via data-state:
       pending: grey,  anchored left (untouched)
       pass:    green, anchored left
       fail:    red,   anchored right  (+ reveals severity)
       Measurement cards defer state to the saved measurement's status. */

    .execution__card-stack {
        display: flex;
        flex-direction: column;
        gap: var(--space, 1em);
        padding-block: var(--space-half);
    }

    /* Inline execution card — sits inside a board card's footer (fizzy
       reactions-style). Trims the chrome since the parent .card already
       provides title, breadcrumb context, border, and shadow. */
    .execution__card--inline {
        --card-shadow: none;
        box-shadow: none;
        padding: var(--space-half, 0.6em);
        border-radius: 0.4em;
    }

    /* When the execute board is in mobile-wizard mode, only the active
       column + card are shown. Make the column fill the viewport width and
       the card stretch so the controls stay reachable. */
    .routes--execute .cards__list {
        gap: var(--space, 1em);
    }

    .routes--execute .cards {
        --card-color: var(--color-card-default);
    }

    .routes--execute {
        --main-padding: clamp(1rem, 4vw, 2rem);

        max-inline-size: var(--main-width, 1400px);
        padding-block: var(--block-space);
        padding-inline: var(--main-padding);
        text-align: start;
    }

    .routes--execute .route-stage--execute,
    .routes--execute .route-stage--capture {
        background: transparent;
        border: 0;
        padding: 0;
    }

    .routes--execute .exec-list {
        gap: 0.75rem;
    }

    .routes--execute .exec-list__group {
        gap: 0.25rem;
    }

    .routes--execute .exec-list__heading {
        border-block-end: 1px solid var(--rule-soft);
        min-block-size: 2.1rem;
        padding-block-end: 0.35rem;
    }

    .routes--execute .exec-row {
        gap: 0.2rem 0.75rem;
        grid-template-columns: auto minmax(7rem, 0.75fr) minmax(0, 1.35fr) auto auto;
        min-block-size: 3rem;
        padding: 0.55rem 0.65rem 0.55rem 0.8rem;
    }

    .routes--execute .exec-row__id {
        grid-column: 1 / 2;
    }

    .routes--execute .exec-row__kind,
    .routes--execute .exec-row__loc {
        grid-column: 2 / 3;
    }

    .routes--execute .exec-row__label {
        align-self: center;
        font-size: 0.95rem;
        grid-column: 3 / 4;
        grid-row: 1 / 3;
        min-inline-size: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .routes--execute .exec-row__chip {
        grid-column: 4 / 5;
    }

    .routes--execute .exec-row__chev {
        grid-column: 5 / 6;
    }

    /* Header inside the inline execution card has no title (parent card
       owns it); push toggle / kind icon to the right edge. */
    .execution__card-head--inline {
        justify-content: flex-end;
    }

    .execution__card-head--inline .execution__card-titles {
        flex: 1;
    }

    /* Card footer slot variant used on the execute board. The parent
       .card__footer already has padding; keep the meta + execution card
       stacked with a clear visual gap. */
    .card__footer--execution {
        align-items: stretch;
        position: relative;
        z-index: 2;
    }

    /* On the execute board, the regular card-wide click-through link would
       intercept taps on the toggle/value/notes inside the footer. Suppress
       it; navigation to the item detail still happens via the breadcrumb
       link in the body if needed. */
    .routes--execute .card__link {
        display: none;
    }

    .execution__card {
        --card-color: var(--color-ink-lighter);
        --card-bg-color: var(--color-canvas);
        --card-shadow: 0 1px 2px oklch(0% 0 0 / 0.04),
                       0 2px 8px oklch(0% 0 0 / 0.03);

        display: flex;
        flex-direction: column;
        gap: var(--space-half, 0.75em);
        padding: var(--space, 1em);
        background: var(--card-bg-color);
        border: 1px solid var(--card-color);
        border-radius: 0.5em;
        box-shadow: var(--card-shadow);
        transition: margin-inline 0.3s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    }

    .execution__card[data-state="pending"] {
        --card-bg-color: color-mix(in srgb, var(--color-ink-lightest) 50%, var(--color-canvas));
    }

    .execution__card[data-state="pass"] {
        --card-color: var(--color-positive);
        --card-bg-color: color-mix(in srgb, var(--card-color) 7%, var(--color-canvas));
    }

    .execution__card[data-state="fail"] {
        --card-color: var(--color-negative);
        --card-bg-color: color-mix(in srgb, var(--card-color) 7%, var(--color-canvas));
    }

    /* Fail cards recolor by severity: minor = yellow, major stays red.
       The :has() selector targets card-level severity only (not the per-check
       severity inside multi_check rows, which live under [data-check-index]). */
    .execution__card[data-state="fail"]:has(> .execution__severity [data-role="severity"][data-severity="minor"]) {
        --card-color: var(--color-status-minor-ink);
        --card-bg-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas));
    }

    /* Multi-check cards in fail state: if every failed check is minor, use
       yellow; any major check keeps the card red. */
    .execution__card[data-state="fail"]:not(:has([data-check-state="fail"] [data-severity="major"])):has([data-check-state="fail"] [data-severity="minor"]) {
        --card-color: var(--color-status-minor-ink);
        --card-bg-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas));
    }

    /* Wide screens: cards fill their column. State is conveyed by color and
       the pass/fail toggle; the old left/right slide layout is gone now that
       cards live inside zone columns on the execute board. */

    /* Card head — titles on the left, toggle or kind indicator on the right */
    .execution__card-head {
        display: flex;
        align-items: center;
        gap: 1ch;
    }

    .execution__card-titles {
        flex: 1;
        min-inline-size: 0;
        display: flex;
        flex-direction: column;
        gap: 0.1em;
    }

    .execution__card-title {
        font-weight: 600;
        margin: 0;
        font-size: 1em;
        line-height: 1.2;
    }

    .execution__card-breadcrumb {
        margin: 0;
        justify-content: center;
        margin-block-end: 0.4em;
    }

    .execution__card-subtitle {
        color: var(--color-ink-medium);
        font-size: var(--text-x-small, 0.78em);
    }

    .execution__card-kind {
        color: var(--color-ink-medium);
        flex-shrink: 0;
    }

    /* Hey-style pill toggle (Fail | Pass) */
    .execution__toggle {
        --toggle-h: 1.9em;
        --toggle-w: 6ch;

        position: relative;
        display: inline-grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        inline-size: calc(var(--toggle-w) * 2);
        block-size: var(--toggle-h);
        background: var(--color-ink-lightest);
        border: 1px solid var(--color-ink-lighter);
        border-radius: calc(var(--toggle-h) / 2);
        flex-shrink: 0;
        padding: 2px;
    }

    .execution__toggle--sm {
        --toggle-h: 1.6em;
        --toggle-w: 5ch;
    }

    .execution__toggle-seg {
        appearance: none;
        background: transparent;
        border: none;
        color: var(--color-ink-medium);
        font: inherit;
        font-size: var(--text-x-small, 0.78em);
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        cursor: pointer;
        padding: 0;
        position: relative;
        z-index: 1;
        border-radius: calc(var(--toggle-h) / 2);
        transition: color 0.15s ease;
    }

    .execution__toggle-thumb {
        position: absolute;
        inset: 2px;
        inline-size: calc(50% - 2px);
        border-radius: calc(var(--toggle-h) / 2);
        background: transparent;
        opacity: 0;
        transform: translateX(0);
        transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
        z-index: 0;
    }

    /* Thumb + segment coloring driven by ancestor state.
       Card-level state colors the card-head toggle; check-row state colors the
       inline toggle inside that row. */
    .execution__card[data-state="pass"] .execution__card-head > .execution__toggle > .execution__toggle-thumb,
    [data-check-state="pass"] > .execution__toggle > .execution__toggle-thumb {
        opacity: 1;
        background: var(--color-positive);
        transform: translateX(calc(100% + 2px));
    }

    .execution__card[data-state="fail"] .execution__card-head > .execution__toggle > .execution__toggle-thumb,
    [data-check-state="fail"] > .execution__toggle > .execution__toggle-thumb {
        opacity: 1;
        background: var(--color-negative);
        transform: translateX(0);
    }

    .execution__card[data-state="pass"] .execution__card-head > .execution__toggle .execution__toggle-seg--pass,
    [data-check-state="pass"] > .execution__toggle .execution__toggle-seg--pass {
        color: var(--color-canvas);
    }

    .execution__card[data-state="fail"] .execution__card-head > .execution__toggle .execution__toggle-seg--fail,
    [data-check-state="fail"] > .execution__toggle .execution__toggle-seg--fail {
        color: var(--color-canvas);
    }

    /* Severity pill — independent of pass/fail; thumb colored per level
       (yellow=minor, red=major). Driven by its own data-severity attr. */
    .execution__toggle--severity {
        --toggle-w: 9ch;
    }

    .execution__toggle--severity.execution__toggle--sm {
        --toggle-w: 7ch;
    }

    .execution__toggle--severity[data-severity="minor"] > .execution__toggle-thumb {
        opacity: 1;
        background: var(--color-status-minor);
        transform: translateX(0);
    }

    .execution__toggle--severity[data-severity="major"] > .execution__toggle-thumb {
        opacity: 1;
        background: var(--color-status-major);
        transform: translateX(calc(100% + 2px));
    }

    .execution__toggle--severity[data-severity="minor"] .execution__toggle-seg--minor {
        color: var(--color-canvas);
    }

    .execution__toggle--severity[data-severity="major"] .execution__toggle-seg--major {
        color: var(--color-canvas);
    }

    /* Card body — shared container for variant-specific content */
    .execution__card-body {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
    }

    .execution__card-body--frame {
        padding-block-start: 0.25em;
    }

    .execution__value-field {
        position: relative;
        display: flex;
    }

    .execution__value-input {
        inline-size: 100%;
        font-variant-numeric: tabular-nums;
        font-size: 1.1em;
    }

    .execution__value-field--has-unit .execution__value-input {
        padding-inline-end: 5ch;
    }

    .execution__value-unit {
        position: absolute;
        inset-inline-end: 0.75ch;
        inset-block: 0;
        display: inline-flex;
        align-items: center;
        color: var(--color-ink-medium);
        font-size: 0.9em;
        pointer-events: none;
        font-variant-numeric: tabular-nums;
    }

    .execution__frame-loading {
        padding-block: 0.5em;
    }

    /* Severity — hidden until the card is in fail state.
       Using a base display:none + state-based override (not the [hidden]
       attribute) because the HTML [hidden] attr beats @layer rules. */
    .execution__severity {
        display: none;
        flex-direction: column;
        gap: 0.25em;
    }

    .execution__severity--inline {
        flex-direction: row;
        align-items: center;
        gap: 0.5ch;
    }

    .execution__card[data-state="fail"] > .execution__severity {
        display: flex;
    }

    [data-check-state="fail"] > .execution__severity {
        display: flex;
    }

    /* Multi-check sub-rows */
    .execution__checks {
        display: flex;
        flex-direction: column;
        gap: 0.35em;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .execution__check-row {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 0.25em 1ch;
        padding: 0.4em 0.5em;
        border-radius: 0.35em;
        border: 1px solid var(--color-ink-lighter);
        background: var(--color-canvas);
        transition: border-color 0.2s ease, background-color 0.2s ease;
    }

    .execution__check-row[data-check-state="pass"] {
        border-color: var(--color-positive);
        background: color-mix(in srgb, var(--color-positive) 6%, var(--color-canvas));
    }

    .execution__check-row[data-check-state="fail"] {
        border-color: var(--color-negative);
        background: color-mix(in srgb, var(--color-negative) 6%, var(--color-canvas));
    }

    .execution__check-label {
        font-size: var(--text-small, 0.9em);
    }

    .execution__check-row > .execution__severity {
        grid-column: 1 / -1;
        margin-block-start: 0.1em;
    }

    /* Card footer — photo upload + rich-text note.
       Uses the same building blocks as the measurement form so every card,
       regardless of item_type, shares the same note/photo affordances. */
    .execution__card-foot {
        display: flex;
        flex-direction: column;
        gap: var(--space-half, 0.75em);
        margin-block-start: auto;
        padding-block-start: var(--space-half, 0.75em);
        border-block-start: 1px dashed var(--card-color);

        /* Execution cards render a single upload cell (Photo only); keep the
           upload row single-column instead of inheriting the measurement
           form's 2-col Photo+Thermogram grid (which leaves the lone cell at
           half width on desktop). */
        .measurement-form__upload-row {
            grid-template-columns: 1fr;
        }
    }

    .execution__note {
        margin: 0;
    }

    /* Measurement form when embedded inline inside an execution card —
       tighter gaps, no oversized page margins, subtle auto-save hint. */
    .execution__card .measurement-form,
    .measurement-form--inline {
        gap: var(--space-half, 0.75em);
    }

    .execution__card .measurement-form__upload-btn {
        min-block-size: 3em;
        font-size: var(--text-small, 0.9em);
    }

    /* Saved measurement partial — compact embedded card that mirrors the
       measurement detail view's layout (numbered .card__board, status
       badge, .card__meta readouts, notes, thermogram gallery) while
       sitting inside the route-execution wizard card. The `.card` base
       already supplies the --card-color chrome; these rules just tighten
       spacing so the embedded card doesn't feel cavernous and wire up the
       actions footer.

       The outer <turbo-frame> gets display:contents from base.css, so
       .measurement-saved__card IS the visible container. */
    .measurement-saved__card {
        --card-padding-block: var(--space-half, 0.6em);
        --card-padding-inline: 1ch;
        gap: 0.5em;
        box-shadow: none;
        border: 1px solid color-mix(in srgb, var(--card-color) 28%, transparent);
    }

    .execution__card .measurement-saved__card {
        /* Inside the execution wizard card, drop to a borderless inset so
           the accent comes purely from --card-color on the board tag. */
        border: 0;
        background: transparent;
    }

    .measurement-saved__body {
        display: flex;
        flex-direction: column;
        gap: 0.6em;
    }

    .measurement-saved__body > .card__meta {
        gap: 0.5ch 1.25ch;
    }

    .measurement-saved__attachments {
        --attachment-size: var(--attachment-sm);
        gap: 0.4em;
    }

    /* Empty grid is kept in the DOM purely as an append-target for the
       inline uploader; collapse it so it doesn't leave a visual gap
       above the "Add another thermograph" button. */
    .measurement-saved__attachments--empty:empty {
        display: none;
    }

    /* Inline thermograph upload-row on the saved measurement — uses the
       same .measurement-form__upload-btn chrome as the capture form, just
       tightened for the compact saved-card context. */
    .measurement-saved__upload-row .measurement-form__upload-btn {
        min-block-size: 2.8em;
        padding-block: 0.5em;
        padding-inline: 1em;
        font-size: var(--text-small, 0.9em);
    }

    .measurement-saved__upload-row [data-controller*="thermogram-upload"].is-uploading {
        opacity: 0.55;
        pointer-events: none;
    }

    .measurement-saved__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25ch;
        margin-block-start: 0.25em;
        padding-block-start: 0.4em;
        border-block-start: 1px dashed color-mix(in srgb, var(--card-color) 20%, var(--color-ink-lighter));
    }

    .measurement-saved__detail-link {
        margin-inline-start: auto;
    }

    /* Bare comment wrap (no avatar, compact Trix) — applied to every note
       inside a route execution, on both measurement and non-measurement
       cards, so the Trix editor + toolbar render identically everywhere. */
    .measurement-form__comments-wrap--bare {
        --comment-padding-inline: 0;

        & .comment {
            padding: 0;
            gap: 0;
        }

        & .django-prose-editor-container {
            inline-size: 100%;
        }

        & trix-editor {
            min-block-size: 3.1em;
            padding: 0.4em 0.6em;
            border-radius: 0.35em;
            border: 1px solid var(--color-ink-lighter);
            background: var(--color-canvas);
            font-size: var(--text-small, 1em);
        }

        & trix-toolbar {
            margin-block-end: 0.25em;
        }
    }

    .execution__cancel-zone {
        display: flex;
        justify-content: center;
        margin-block-start: var(--space-double, 2em);
        padding-block-end: var(--space-double, 2em);
    }

    .execution__cancel-trigger {
        max-inline-size: 32ch;
    }

    @media (max-width: 99.99ch) {
        .measurement-form__comments-wrap--bare {
            & trix-editor {
                min-block-size: 5em;
                font-size: 1.15em;
                padding: 0.75em 0.95em;
            }
        }
    }

    /* ------------------------------------------------------------------------ */
    /* Read-only execution detail                                                */
    /* ------------------------------------------------------------------------ */

    /* Indicator pill — static counterpart to `.execution__toggle`. Renders the
       captured pass/fail/value outcome in the same visual register as the
       capture flow so a completed run reads as "the same card, resolved." */
    .execution__indicator {
        display: inline-flex;
        align-items: center;
        gap: 0.4ch;
        padding-block: 0.3em;
        padding-inline: 0.9em;
        border-radius: 999em;
        font-size: var(--text-x-small, 0.78em);
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        line-height: 1;
        white-space: nowrap;
        background: var(--color-ink-lightest);
        color: var(--color-ink-medium);
        border: 1px solid transparent;
    }

    .execution__indicator--sm {
        padding-block: 0.2em;
        padding-inline: 0.7em;
        font-size: 0.7em;
    }

    .execution__indicator--pass {
        background: var(--color-positive);
        color: var(--color-canvas);
    }

    .execution__indicator--fail {
        background: var(--color-negative);
        color: var(--color-canvas);
    }

    /* Severity-specific pills — used for the standalone severity stamp and
       for per-row severity inside multi-check. Colour + explicit label so the
       two are never confused. */
    .execution__indicator--major {
        background: var(--color-status-major);
        color: var(--color-canvas);
    }

    .execution__indicator--minor {
        background: var(--color-status-minor);
        color: var(--color-canvas);
    }

    /* Severity pills carry an "SEVERITY:" shape via a leading dot, so they
       read visually distinct from a plain pass/fail badge even at a glance. */
    .execution__indicator--severity {
        padding-inline-start: 1em;
        position: relative;
    }

    .execution__indicator--severity::before {
        content: "";
        position: absolute;
        inset-inline-start: 0.45em;
        inset-block-start: 50%;
        inline-size: 0.45em;
        block-size: 0.45em;
        border-radius: 50%;
        background: currentColor;
        opacity: 0.9;
        transform: translateY(-50%);
    }

    .execution__indicator--value {
        font-family: var(--font-data, inherit);
        font-variant-numeric: tabular-nums;
        text-transform: none;
        letter-spacing: 0;
        padding-inline: 1em;
    }

    .execution__indicator--value strong {
        font-weight: 700;
        font-size: 1.05em;
    }

    .execution__indicator-unit {
        opacity: 0.85;
        font-weight: 500;
    }

    /* Readonly cards inherit the capture-flow's left/right anchoring so pass
       reads as "left, accepted" and fail as "right, flagged" — keeps the same
       spatial grammar between capture and report. */

    /* Minor-severity recolour, driven by a plain attribute on the card instead
       of the capture-flow's nested severity toggle. */
    .execution__card--readonly[data-state="fail"][data-severity="minor"] {
        --card-color: var(--color-status-minor-ink);
        --card-bg-color: color-mix(in srgb, var(--card-color) 10%, var(--color-canvas));
    }

    /* Severity stamp row — a distinct, labelled pill below the header so
       minor vs major is unmistakable (redundant coding per MIL-STD-1472H:
       colour + text). */
    .execution__severity-readout {
        display: flex;
        align-items: center;
        gap: 0.5ch;
        font-size: var(--text-x-small, 0.78em);
        color: var(--color-ink-medium);
    }

    /* Card photo strip — response attachments rendered as a horizontal row of
       thumbnails, lightbox-enabled via the parent section's controller. */
    .execution__card-photos {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4em;
    }

    .execution__card-photo {
        display: block;
        inline-size: var(--attachment-sm);
        /* Height follows the image's natural aspect ratio — no fixed
           block-size, no letterboxing. Thermography hotspot overlays and
           burned-in temperature markers stay pixel-true because the tile
           is exactly the shape of the image it holds. */
        block-size: auto;
        border-radius: 0.35em;
        overflow: hidden;
        background: var(--color-ink-lightest);
    }

    .execution__card-photo img {
        inline-size: 100%;
        block-size: auto;
        display: block;
    }

    /* Note readout — the Trix editor's on-page twin. Same padding, border
       radius, and typography as the editable version inside an execution
       card, minus the toolbar and input chrome, so a saved note reads as
       "the note the inspector typed, preserved." */
    .execution__note-readout {
        display: block;
        padding: 0.55em 0.75em;
        border-radius: 0.35em;
        border: 1px solid var(--color-ink-lighter);
        background: var(--color-canvas);
        color: var(--color-ink);
        font-size: var(--text-small, 0.9em);
        line-height: 1.45;
        text-align: start;
    }

    .execution__note-body {
        min-inline-size: 0;
    }

    .execution__note-body :where(p, ul, ol, blockquote) {
        margin-block: 0.3em;
    }

    .execution__note-body :where(p:first-child, ul:first-child, ol:first-child) {
        margin-block-start: 0;
    }

    .execution__note-body :where(p:last-child, ul:last-child, ol:last-child) {
        margin-block-end: 0;
    }

    .execution__resolve-frame {
        display: block;
    }

    /* Steps — checklist items inside multi-check cards
    /* ---------------------------------------------------------------- */
    .steps {
        display: flex;
        flex-direction: column;
        gap: 0;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .step {
        display: grid;
        grid-template-columns: 1em 1fr auto;
        gap: calc(var(--inline-space, 0.5rem) * 2 / 3);
        align-items: baseline;
        padding-block: 0.15em;
    }

    .step__checkbox {
        accent-color: var(--card-color, currentColor);
    }

    .step__content {
        border-bottom: 1px solid transparent;
        font-weight: 500;

        .step:has(:checked) & {
            opacity: 0.7;
            text-decoration: line-through;
        }
    }

    input.step__content {
        background: transparent;
        border: 0;
        border-bottom: 1px solid transparent;
        color: inherit;
        font: inherit;
        outline: none;
        padding: 0;

        &:hover { border-bottom-color: var(--rule-soft); }
        &:focus { border-bottom-color: var(--ink-soft); }
    }

    .step__delete {
        background: transparent;
        border: 0;
        color: var(--ink-faint);
        cursor: pointer;
        font-size: 1.1em;
        line-height: 1;
        padding: 0 0.4ch;

        &:hover { color: var(--status-crit-fg, var(--ink)); }
    }

    .step__content:is(a) {
        color: inherit;
    }

    .step__new {
        opacity: 0.5;

        .input {
            background: transparent;
            border: none;
            font: inherit;
            outline: none;
            padding: 0;

            &::placeholder {
                color: currentColor;
                opacity: 0.5;
            }
        }
    }

    /* Card detail (card-perma) — route item detail screen
    /* ---------------------------------------------------------------- */
    .route-card-perma {
        max-inline-size: min(80ch, 100%);
        margin-inline: auto;
    }

    .route-card-perma .card__title {
        font-size: clamp(var(--text-medium), 6vw, var(--text-x-large));
    }

    .route-card-perma__meta {
        display: flex;
        flex-wrap: wrap;
        gap: 1ch 2ch;
        font-size: var(--text-x-small);
        color: var(--color-ink-medium);
        padding-block-start: var(--block-space-half, 0.5rem);
    }

    .route-card-perma__meta dt {
        font-weight: 600;
    }

    .route-card-perma__meta dd {
        margin: 0;
    }

    /* ── Phase 7b — execution list + detail (server-rendered) ─────────
       `.exec-list`: flat list of checks, grouped by heading. Each row
       is a hyperlink to `?item=<uuid>` — no client-side wizard state.
       `.exec-nav`: prev / all / next bar on the detail page. */
    .exec-list {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .exec-list__group {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .exec-list__heading {
        align-items: baseline;
        color: var(--ink);
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 0.75rem;
        margin: 0 0 0.2rem;
    }

    .exec-list__heading-name {
        color: var(--ink);
        font-family: var(--font-data);
        font-size: 0.8125rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .exec-list__count {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.625rem;
        letter-spacing: 0.12em;
        margin-inline-start: auto;
        text-transform: uppercase;
    }

    .exec-row {
        align-items: center;
        background: var(--surface);
        border: 1px solid var(--rule);
        box-shadow: inset 3px 0 0 var(--card-color, var(--rule-soft));
        color: var(--ink);
        cursor: pointer;
        display: grid;
        gap: 0.2rem 0.85rem;
        grid-template-columns: auto 1fr auto auto;
        min-block-size: 4.25rem;
        padding: 0.75rem 0.85rem 0.75rem 1rem;
        text-decoration: none;
        transition: border-color 120ms ease-out, box-shadow 120ms ease-out;

        @media (any-hover: hover) {
            &:hover {
                border-color: var(--primary);
                box-shadow: inset 3px 0 0 var(--card-color, var(--primary)), 0 0 0 1px var(--primary);
                color: var(--primary);
            }
        }
    }

    .exec-row[data-done-status="pass"] {
        --card-color: var(--status-nominal);
    }

    .exec-row[data-done-status="fail"] {
        --card-color: var(--status-critical);
        background: var(--surface-warn);
    }

    .exec-row[data-done-status="measured"] {
        --card-color: var(--primary);
    }

    .exec-row__id {
        align-self: baseline;
        grid-column: 1 / 2;
        grid-row: 1 / 3;
        padding-block-start: 0.05rem;
    }

    .exec-row__kind {
        color: var(--ink-soft);
        font-family: var(--font-data);
        font-size: 0.625rem;
        font-weight: 700;
        grid-column: 2 / 3;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .exec-row__loc {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.625rem;
        font-weight: 500;
        grid-column: 2 / 3;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .exec-row__label {
        color: var(--ink);
        font-size: 1rem;
        font-weight: 600;
        grid-column: 2 / 3;
        grid-row: 2;
        letter-spacing: -0.01em;
        line-height: 1.2;
    }

    .exec-row__chip {
        align-self: center;
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.6875rem;
        font-weight: 700;
        grid-column: 3 / 4;
        grid-row: 1 / 3;
        letter-spacing: 0.14em;
        padding: 0.2rem 0.5rem;
    }

    .exec-row__chip--pass {
        background: var(--status-nominal);
        color: #fff;
    }

    .exec-row__chip--fail {
        background: var(--status-critical);
        color: #fff;
    }

    .exec-row__chip--measured {
        background: var(--primary);
        color: #fff;
    }

    .exec-row__chip--pending {
        color: var(--ink-faint);
    }

    .exec-row__chev {
        align-self: center;
        color: var(--ink-soft);
        grid-column: 4 / 5;
        grid-row: 1 / 3;
    }

    @media (max-width: 52ch) {
        .exec-row {
            grid-template-columns: 1fr auto auto;
        }

        .exec-row__id {
            grid-column: 1 / 2;
            grid-row: 1;
        }

        .exec-row__kind {
            grid-column: 1 / 2;
            grid-row: 2;
        }

        .exec-row__label {
            grid-column: 1 / 2;
            grid-row: 3;
        }

        .exec-row__loc {
            grid-column: 1 / 2;
            grid-row: 4;
        }

        .exec-row__chip {
            grid-column: 2 / 3;
            grid-row: 1 / 5;
        }

        .exec-row__chev {
            grid-column: 3 / 4;
            grid-row: 1 / 5;
        }

        .exec-list__count {
            margin-inline-start: 0;
        }
    }

    /* Prev / All / Next bar below a single-item detail on execute_route.
       Three flat rectangles. Uses .thumb-band metaphor but wraps anchors. */
    .exec-nav {
        background: var(--surface);
        border-block-start: 1px solid var(--rule);
        display: grid;
        gap: 0.5rem;
        grid-template-columns: 1fr 1fr 1fr;
        margin-block-start: 1rem;
        padding: 0.75rem;
    }

    .exec-nav__btn {
        align-items: center;
        background: transparent;
        block-size: calc(3.25rem * var(--tap-g, 1));
        border: 1px solid var(--rule);
        color: var(--ink);
        cursor: pointer;
        display: inline-flex;
        font-family: var(--font-body);
        font-size: 0.9375rem;
        font-weight: 700;
        gap: 0.5rem;
        justify-content: center;
        padding: 0 0.75rem;
        text-decoration: none;
    }

    .exec-nav__btn--primary {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
    }

    .exec-nav__btn--disabled {
        background: var(--ink-mute);
        border-color: var(--ink-mute);
        color: var(--ink-faint);
        cursor: not-allowed;
    }

}

/* ── Capture viewport — full-screen, no-scroll single-item execution UI ──
   Separate @layer modules block to avoid Chrome CSS-nesting parse context
   from the hover rule above treating these as nested rules.              */
@layer modules {

    body:has(.capture-viewport) {
        overflow: hidden;
    }

    body:has(.capture-viewport) #global-container {
        display: flex;
        flex-direction: column;
        height: 100dvh;
        overflow: hidden;
    }

    body:has(.capture-viewport) #main {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-block-size: 0;
        overflow: hidden;
        padding-inline: 0;
    }

    body:has(.capture-viewport) .routes--execute-capture {
        display: flex;
        flex: 1;
        flex-direction: column;
        inline-size: 100%;
        margin-inline: 0;
        max-inline-size: 100%;
        min-block-size: 0;
        overflow: hidden;
        padding: 0;
    }

    .capture-viewport {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: hidden;
    }

    .capture-strip {
        background: var(--surface-sunken);
        border-block: 1px solid var(--rule-soft);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0;
        gap: 0.5rem;
        padding: 0.35rem 1rem;
    }

    .capture-strip__route {
        color: var(--ink-soft);
        font-family: var(--font-data);
        font-size: 0.5625rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .capture-strip__asset {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.5625rem;
        letter-spacing: 0.1em;
        text-align: right;
        text-transform: uppercase;
    }

    .point-stepper {
        display: flex;
        flex-shrink: 0;
        gap: 0.2rem;
        padding: 0.5rem 1rem 0;
    }

    .point-stepper__seg {
        background: var(--rule-soft);
        block-size: 0.25rem;
        border: 0;
        cursor: pointer;
        flex: 1;
        padding: 0;
        text-decoration: none;
        transition: background 120ms ease-out;
    }

    .point-stepper__seg--active { background: var(--accent); }
    .point-stepper__seg--pass   { background: var(--status-nominal); }
    .point-stepper__seg--fail   { background: var(--status-critical); }
    .point-stepper__seg--done   { background: var(--ink-soft); }

    .point-stepper__labels {
        color: var(--ink-faint);
        display: flex;
        flex-shrink: 0;
        font-family: var(--font-data);
        font-size: 0.5625rem;
        font-weight: 700;
        justify-content: space-between;
        letter-spacing: 0.14em;
        padding: 0.25rem 1rem 0.35rem;
        text-transform: uppercase;
    }

    .capture-body {
        -webkit-overflow-scrolling: touch;
        flex: 1;
        min-block-size: 0;
        overflow-y: auto;
        padding: 0.5rem 1rem;
    }

    .capture-body .capture {
        background: transparent;
        border: 0;
        padding: 0;
    }

    .capture-body .capture,
    .capture-body form {
        display: flex;
        flex-direction: column;
        min-block-size: 100%;
    }

    .capture-nav {
        display: grid;
        flex-shrink: 0;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        padding: 0.5rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }

    .capture-nav .thumb-action {
        align-items: center;
        border: 1px solid var(--rule);
        border-radius: var(--radius);
        color: var(--ink);
        display: flex;
        gap: 0.4rem;
        inline-size: auto;
        justify-content: center;
        min-block-size: 3rem;
        padding-inline: 0.5rem;
        text-decoration: none;
        transition: background 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
    }

    .capture-nav .thumb-action[aria-disabled="true"] {
        border-color: var(--rule-soft);
        color: var(--ink-faint);
        cursor: default;
        pointer-events: none;
    }

    .capture-nav__clear {
        background: var(--surface-sunken);
        border-color: transparent;
        color: var(--ink-soft);
        font-family: var(--font-data);
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .capture-nav__clear:hover,
    .capture-nav__clear:focus-visible {
        color: var(--status-critical);
    }

    .capture-nav__next {
        background: var(--surface);
    }

    .capture-viewport:has([data-execution-card]:not([data-state="pending"])) .capture-nav__next {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       ROUTE LIST — datasheet table layout (rl-*)
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    .rl-page {
        margin-inline: auto;
        max-inline-size: var(--main-width);
        text-align: start;
    }

    /* ── Hero heading ─────────────────────────────────────────────────── */

    .rl-hero {
        border-block-end: 1px solid var(--rule-soft);
        padding: 1.625rem 2.5rem 0.875rem;
    }

    .rl-hero__eyebrow {
        color: oklch(52% 0.205 25);
        font-family: var(--font-data);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.024em;
        margin-block-end: 0.25rem;
    }

    .rl-hero__heading-row {
        align-items: flex-end;
        display: flex;
        gap: 1.25rem;
    }

    .rl-hero__title {
        color: var(--ink);
        font-family: var(--font-display);
        font-size: 2.125rem;
        font-weight: 700;
        letter-spacing: -0.05em;
        line-height: 1.05;
        margin: 0;
    }

    .rl-hero__meta {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.625rem;
        letter-spacing: 0.014em;
        margin-block-start: 0.375rem;
        text-transform: uppercase;
    }

    /* Navy "New route" primary action button */
    .rl-new-btn {
        align-items: center;
        background: var(--primary);
        border: 1px solid var(--primary);
        border-radius: 2px;
        color: #fff;
        cursor: pointer;
        display: inline-flex;
        flex-shrink: 0;
        font-family: var(--font-display);
        font-size: 0.8125rem;
        font-weight: 500;
        gap: 0.5rem;
        margin-inline-start: auto;
        padding: 0.375rem 0.75rem;
        text-decoration: none;
        white-space: nowrap;

        &:hover, &:focus-visible { background: oklch(from var(--primary) calc(l - 0.05) c h); color: #fff; }

        & kbd {
            background: #fff;
            border: 1px solid var(--rule);
            border-radius: 3px;
            color: var(--ink-soft);
            display: inline-block;
            font-family: var(--font-data);
            font-size: 0.625rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            line-height: 1.4;
            padding: 1px 5px;
            vertical-align: middle;
        }
    }

    /* ── Filter strip ─────────────────────────────────────────────────── */

    .rl-filter-strip {
        align-items: center;
        border-block-end: 1px solid var(--rule-soft);
        display: flex;
        flex-wrap: nowrap;
        gap: 0.375rem;
        margin-block-end: 0.75rem;
        overflow-x: auto;
        padding-block: 0.75rem;
    }

    .rl-pill {
        align-items: center;
        border: 1px solid var(--rule);
        border-radius: 2px;
        color: var(--ink-soft);
        cursor: pointer;
        display: inline-flex;
        flex-shrink: 0;
        font-family: var(--font-data);
        font-size: 0.6875rem;
        font-weight: 700;
        gap: 0;
        letter-spacing: 0.012em;
        padding: 0.3125rem 0.625rem;
        text-decoration: none;
        transition: background 80ms, color 80ms, border-color 80ms;

        &:hover { background: var(--surface-sunken); color: var(--ink); }
    }

    .rl-pill--active {
        background: var(--ink);
        border-color: var(--ink);
        color: var(--surface);
    }

    .rl-pill__count {
        margin-inline-start: 0.25rem;
        opacity: 0.55;
    }

    .rl-pill--active .rl-pill__count { opacity: 0.65; }

    /* Route-list datasheet: hide secondary columns on narrow screens */
    @media (max-width: 99.99ch) {
        .rl-datasheet th[data-col="checks"],
        .rl-datasheet td[data-col="checks"],
        .rl-datasheet th[data-col="date"],
        .rl-datasheet td[data-col="date"],
        .rl-datasheet th[data-col="state"],
        .rl-datasheet td[data-col="state"] {
            display: none;
        }
    }

    /* Right-aligned figure code in filter strip */
    .rl-filter-fig {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.625rem;
        letter-spacing: 0.012em;
        margin-inline-start: auto;
        padding-inline-start: 1rem;
    }

    /* ── Table wrapper + overflowing scroll ───────────────────────────── */

    .rl-table-wrapper {
        overflow-x: auto;
        padding: 0 2.5rem 2.5rem;
    }

    .rl-table {
        border-collapse: collapse;
        inline-size: 100%;
        min-inline-size: 68rem;
        table-layout: fixed;
    }

    /* ── Table header ─────────────────────────────────────────────────── */

    .rl-table__th {
        background: var(--surface-sunken, var(--surface));
        border-block-end: 1px solid var(--ink);
        color: var(--ink-soft);
        font-family: var(--font-data);
        font-size: 0.5625rem;
        font-weight: 700;
        letter-spacing: 0.016em;
        padding: 0.625rem 0.875rem;
        position: sticky;
        text-align: start;
        text-transform: uppercase;
        top: 0;
    }

    .rl-table__th--cadence,
    .rl-table__th--state { text-align: end; }

    /* ── Table rows ───────────────────────────────────────────────────── */

    .rl-table__row {
        background: none;
        border-block-end: 1px solid var(--rule-soft);
        cursor: pointer;
        position: relative;

        &:hover { background: color-mix(in oklch, var(--surface) 60%, white); }

        &[aria-selected="true"] {
            background: var(--surface-sunken);
            outline: 0;
        }
    }

    .rl-table__td {
        border-block-end: 1px solid var(--rule-soft);
        padding: 0.875rem;
        vertical-align: baseline;
    }

    /* ── ID cell — callsign colored by route state ────────────────────── */

    .rl-table__id {
        font-family: var(--font-data);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.012em;

        &[data-state="good"]     { color: oklch(50% 0.148 155); }
        &[data-state="minor"]    { color: var(--status-warning); }
        &[data-state="major"]    { color: oklch(52% 0.205 25); }
        &[data-state="running"]  { color: var(--primary); }
        &[data-state="default"]  { color: var(--ink-soft); }
    }

    /* ── Route cell — name + stretched-link + meta ────────────────────── */

    .rl-table__name {
        color: var(--ink);
        display: block;
        font-size: 0.875rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        text-decoration: none;

        &::before {
            content: "";
            inset: 0;
            position: absolute;
        }

        &:hover { color: var(--primary); }
    }

    .rl-table__name-meta {
        color: var(--ink-faint);
        display: block;
        font-family: var(--font-data);
        font-size: 0.625rem;
        letter-spacing: 0.012em;
        margin-block-start: 0.1875rem;
        text-transform: uppercase;
    }

    /* ── Section cell ─────────────────────────────────────────────────── */

    .rl-table__section-id {
        color: var(--ink-soft);
        display: block;
        font-family: var(--font-data);
        font-size: 0.6875rem;
        font-weight: 400;
        letter-spacing: 0.012em;
    }

    .rl-table__section-name {
        color: var(--ink-faint);
        display: block;
        font-family: var(--font-data);
        font-size: 0.625rem;
        letter-spacing: 0.01em;
        margin-block-start: 0.125rem;
    }

    /* ── Cadence cell — right-aligned ─────────────────────────────────── */

    .rl-table__cadence {
        color: var(--ink-soft);
        font-family: var(--font-data);
        font-size: 0.6875rem;
        letter-spacing: 0.012em;
        text-align: end;
    }

    .rl-table__cadence-sub {
        color: var(--ink-faint);
        display: block;
        font-family: var(--font-data);
        font-size: 0.625rem;
        letter-spacing: 0.01em;
        margin-block-start: 0.125rem;
    }

    /* ── Next due cell ────────────────────────────────────────────────── */

    .rl-table__due {
        font-family: var(--font-data);
        font-size: 0.75rem;
        font-weight: 700;
        letter-spacing: 0.01em;

        &[data-urgency="overdue"] { color: oklch(52% 0.205 25); }
        &[data-urgency="today"]   { color: var(--status-warning); }
        &[data-urgency="soon"]    { color: oklch(50% 0.148 155); }
    }

    .rl-table__due-sub {
        color: var(--ink-faint);
        display: block;
        font-family: var(--font-data);
        font-size: 0.625rem;
        letter-spacing: 0.01em;
        margin-block-start: 0.125rem;
    }

    /* ── Assignee / last-run cell ─────────────────────────────────────── */

    .rl-table__assignee {
        font-size: 0.8125rem;
        font-weight: 600;

        &[data-state="unassigned"] {
            color: oklch(52% 0.205 25);
            font-family: var(--font-data);
            font-size: 0.6875rem;
        }
    }

    .rl-table__assignee-sub {
        color: var(--ink-faint);
        display: block;
        font-family: var(--font-data);
        font-size: 0.625rem;
        letter-spacing: 0.01em;
        margin-block-start: 0.125rem;
        text-transform: uppercase;
    }

    /* ── State cell — dot indicator + label + sub ─────────────────────── */

    .rl-table__td--state { text-align: end; }

    .rl-table__state {
        align-items: center;
        display: inline-flex;
        font-family: var(--font-data);
        font-size: 0.625rem;
        font-weight: 700;
        gap: 0.375rem;
        justify-content: flex-end;
        letter-spacing: 0.014em;

        /* 7×7px square dot */
        &::before {
            background: currentColor;
            block-size: 7px;
            content: "";
            display: inline-block;
            flex-shrink: 0;
            inline-size: 7px;
        }

        &[data-state="good"]    { color: oklch(50% 0.148 155); }
        &[data-state="minor"]   { color: var(--status-warning); }
        &[data-state="major"]   { color: oklch(52% 0.205 25); }
        &[data-state="running"] { color: var(--color-considering); }
        &[data-state="default"] { color: var(--ink-mute); }
    }

    .rl-table__state-sub {
        color: var(--ink-faint);
        display: block;
        font-family: var(--font-data);
        font-size: 0.625rem;
        letter-spacing: 0.01em;
        margin-block-start: 0.125rem;
        text-transform: uppercase;
    }

    /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
       ROUTE DETAIL — two-column hero layout (rd-*)
       ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

    .rd-layout {
        align-items: start;
        border-block-end: 1px solid var(--rule);
        display: grid;
        gap: 2rem;
        grid-template-columns: 1fr 20rem;
        margin-inline: auto;
        max-inline-size: var(--main-width);
        padding: 1.5rem 2.5rem;
        text-align: start;

        @media (max-width: 100ch) {
            grid-template-columns: 1fr;
            padding: 1.25rem 1rem;
        }
    }

    /* ── Main column: hero ───────────────────────────────────────────── */

    .rd-hero__tags {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-block-end: 0.5rem;
    }

    /* Sequential number badge — solid navy block, no border-radius */
    .rd-seq {
        background: var(--primary);
        color: #fff;
        font-family: var(--font-data);
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.014em;
        padding: 3px 8px;
    }

    .rd-hero__title {
        color: var(--ink);
        font-family: var(--font-display);
        font-size: clamp(1.5rem, 3.5vw, 2.125rem);
        font-weight: 700;
        letter-spacing: -0.05em;
        line-height: 1.05;
        margin: 0 0 0;
        min-inline-size: 0;
    }

    .rd-hero__meta {
        align-items: center;
        color: var(--ink-faint);
        display: flex;
        flex-wrap: wrap;
        font-family: var(--font-data);
        font-size: 0.625rem;
        gap: 0 0.75ch;
        letter-spacing: 0.012em;
        margin-block-start: 0.5rem;
        text-transform: uppercase;

        & span + span::before {
            content: "·";
            margin-inline-end: 0.75ch;
        }
    }

    .rd-note {
        background: color-mix(in oklch, var(--surface) 93%, var(--primary));
        border-inline-start: 2px solid var(--primary);
        color: var(--ink-soft);
        display: block;
        font-size: 0.8125rem;
        line-height: 1.5;
        margin-block-start: 1.125rem;
        padding: 0.625rem 0.75rem 0.625rem 0.875rem;
    }

    .rd-note__label {
        color: var(--primary);
        font-family: var(--font-data);
        font-size: 0.5625rem;
        font-weight: 700;
        letter-spacing: 0.016em;
        margin-inline-end: 0.5rem;
        text-transform: uppercase;
    }

    .rd-note__text { margin: 0; }

    /* ── Right panel ─────────────────────────────────────────────────── */

    .rd-panel {
        background: var(--surface-raised);
        border: 1px solid var(--rule);
        display: flex;
        flex-direction: column;
        padding: 1.125rem;
    }

    .rd-panel__head {
        color: var(--ink-soft);
        font-family: var(--font-data);
        font-size: 0.5625rem;
        font-weight: 700;
        letter-spacing: 0.016em;
        margin-block-end: 0.75rem;
        text-transform: uppercase;
    }

    .rd-panel__assignee-name {
        font-size: 0.9375rem;
        font-weight: 600;
        margin-block-end: 0.125rem;
    }

    .rd-panel__assignee-role {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.625rem;
        letter-spacing: 0.01em;
    }

    .rd-panel__divider {
        block-size: 1px;
        background: var(--rule-soft);
        margin-block: 1rem;
    }

    .rd-panel__stats {
        display: grid;
        gap: 0.75rem;
        grid-template-columns: 1fr 1fr;
        margin-block-end: 1rem;
    }

    .rd-panel__stat {
        display: flex;
        flex-direction: column;
    }

    .rd-panel__stat-label {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.5625rem;
        font-weight: 700;
        letter-spacing: 0.014em;
        text-transform: uppercase;
    }

    .rd-panel__stat-value {
        color: var(--ink);
        font-family: var(--font-data);
        font-size: 0.8125rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        margin-block-start: 0.1875rem;

        &[data-state="due"] { color: var(--status-warning); }
    }

    .rd-panel__stat-sub {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.625rem;
        margin-block-start: 0.125rem;
    }

    /* Primary CTA — crimson, full-width, bold */
    .rd-panel__cta {
        align-items: center;
        background: oklch(52% 0.205 25);
        border: 0;
        color: #fff;
        cursor: pointer;
        display: flex;
        font-family: var(--font-display);
        font-size: 0.875rem;
        font-weight: 700;
        gap: 0.625rem;
        justify-content: center;
        letter-spacing: 0.002em;
        padding: 0.75rem 0.875rem;
        text-decoration: none;
        inline-size: 100%;

        &:hover, &:focus-visible {
            background: oklch(48% 0.21 25);
            color: #fff;
        }

        & kbd {
            background: oklch(100% 0 0 / 0.14);
            border: 1px solid oklch(100% 0 0 / 0.3);
            border-radius: 3px;
            color: #fff;
            display: inline-block;
            font-family: var(--font-data);
            font-size: 0.625rem;
            font-weight: 600;
            letter-spacing: 0.04em;
            line-height: 1.4;
            padding: 1px 5px;
            vertical-align: middle;
        }
    }

    /* Secondary action row below CTA */
    .rd-panel__secondary-actions {
        display: flex;
        gap: 0.375rem;
        margin-block-start: 0.625rem;
    }

    .rd-panel__btn {
        align-items: center;
        background: none;
        border: 1px solid var(--rule);
        border-radius: 2px;
        color: var(--ink);
        cursor: pointer;
        display: inline-flex;
        font-family: var(--font-display);
        font-size: 0.8125rem;
        font-weight: 500;
        gap: 0.5rem;
        padding: 0.25rem 0.625rem;
        text-decoration: none;

        &:hover, &:focus-visible {
            background: var(--surface);
            color: var(--ink);
        }
    }

    /* ── Route zone / unzoned detail page ───────────────────────────── */

    .rz-page {
        margin-inline: auto;
        max-inline-size: var(--main-width);
        padding-block-end: var(--block-space);
        text-align: start;
    }

    .rz-hero {
        border-block-end: 1px solid var(--rule);
        padding: 1.25rem 2.5rem;

        @media (max-width: 100ch) {
            padding: 1rem;
        }
    }

    .rz-hero__ids {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem 0.6rem;
        margin-block-end: 0.5rem;
    }

    .rz-hero__sep {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.75rem;
    }

    .rz-hero__title {
        color: var(--ink);
        font-family: var(--font-display);
        font-size: clamp(1.375rem, 3vw, 1.875rem);
        font-weight: 700;
        letter-spacing: -0.04em;
        line-height: 1.05;
        margin: 0 0 0.4rem;
    }

    .rz-hero__meta {
        align-items: center;
        color: var(--ink-faint);
        display: flex;
        flex-wrap: wrap;
        font-family: var(--font-data);
        font-size: 0.625rem;
        gap: 0 0.75ch;
        letter-spacing: 0.012em;
        text-transform: uppercase;

        & span + span::before {
            content: "·";
            margin-inline-end: 0.75ch;
        }
    }

    .rz-page .section-head {
        margin-block-start: 1.25rem;
        padding-inline: 2.5rem;

        @media (max-width: 100ch) {
            padding-inline: 1rem;
        }
    }

    .rz-page .datasheet-wrapper {
        padding-inline: 2.5rem;

        @media (max-width: 100ch) {
            padding-inline: 0;
        }
    }

    .rz-add-btn {
        align-items: center;
        background: none;
        border: 1px solid var(--rule);
        border-radius: 2px;
        color: var(--ink-soft);
        display: inline-flex;
        font-family: var(--font-display);
        font-size: 0.75rem;
        font-weight: 500;
        gap: 0.375rem;
        padding: 0.2rem 0.5rem;
        text-decoration: none;

        & .icon { font-size: 0.875rem; }
        & kbd { color: var(--ink-faint); }

        &:hover, &:focus-visible {
            background: var(--surface-raised);
            border-color: var(--primary);
            color: var(--primary);
        }
    }

    /* ── Flat stops table (route_detail checklist) ───────────────────── */

    .rd-stops-section {
        margin-inline: auto;
        max-inline-size: var(--main-width);
        padding-block-end: var(--block-space);
        text-align: start;
    }

    .rd-stops-stage {
        border-block-end: 1px solid var(--rule-soft);
        padding-block-start: 1.25rem;
    }

    .rd-stops-stage__head {
        padding-inline: 2.5rem;

        @media (max-width: 100ch) {
            padding-inline: 1rem;
        }
    }

    .rd-stops-stage .datasheet-wrapper {
        padding-inline: 2.5rem;

        @media (max-width: 100ch) {
            padding-inline: 0;
        }
    }

    /* "Add Zone" button in section-head right slot */
    .rd-stops-add-btn {
        align-items: center;
        background: none;
        border: 1px solid var(--rule);
        border-radius: 2px;
        color: var(--ink-soft);
        cursor: pointer;
        display: inline-flex;
        font-family: var(--font-display);
        font-size: 0.75rem;
        font-weight: 500;
        gap: 0.375rem;
        padding: 0.2rem 0.5rem;
        text-decoration: none;

        & .icon { font-size: 0.875rem; }
        & kbd { color: var(--ink-faint); }

        &:hover, &:focus-visible {
            background: var(--surface-raised);
            border-color: var(--primary);
            color: var(--primary);
        }
    }

    /* Column header row — matches stop-row grid */
    .rd-stop-header {
        align-items: center;
        border-block-end: 1px solid var(--rule);
        display: grid;
        grid-template-columns: 48px 160px 1fr 140px 120px;
        padding-block: 0.4rem;
        padding-inline: 2.5rem;

        @media (max-width: 100ch) {
            display: none;
        }
    }

    .rd-stop-header__no,
    .rd-stop-header__id,
    .rd-stop-header__name,
    .rd-stop-header__checks,
    .rd-stop-header__state {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.5625rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .rd-stop-header__state { text-align: end; }

    /* Stop row — each zone group is one clickable row */
    .rd-stop-row {
        align-items: center;
        border-block-end: 1px solid var(--rule-soft);
        border-inline-start: 2px solid transparent;
        color: inherit;
        display: grid;
        gap: 0;
        grid-template-columns: 48px 160px 1fr 140px 120px;
        min-block-size: 3.5rem;
        padding-block: 0.75rem;
        padding-inline: 2.5rem;
        text-decoration: none;
        transition: background 0.1s;

        &:hover {
            background: var(--surface-raised);
            border-inline-start-color: var(--primary);
        }

        &:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: -2px;
        }

        @media (max-width: 100ch) {
            grid-template-columns: 36px 1fr auto;
            grid-template-rows: auto auto;
            padding-inline: 1rem;

            & .rd-stop-row__id-col { display: none; }
            & .rd-stop-row__checks-col { grid-column: 3; grid-row: 1; }
            & .rd-stop-row__state-col { display: none; }
        }
    }

    /* Sequential number — big, muted, mono */
    .rd-stop-row__no {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 1.375rem;
        font-weight: 300;
        letter-spacing: -0.03em;
        line-height: 1;
    }

    /* Zone identifier column */
    .rd-stop-row__id-col {
        display: flex;
        flex-direction: column;
        gap: 0.1875rem;
    }

    .rd-stop-row__callsign {
        color: var(--ink-soft);
        font-family: var(--font-data);
        font-size: 0.6875rem;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    .rd-stop-row__section {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.5625rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    /* Name column */
    .rd-stop-row__name-col {
        display: flex;
        flex-direction: column;
        gap: 0.1875rem;
        min-inline-size: 0;

        @media (max-width: 100ch) {
            grid-column: 2;
            grid-row: 1 / 3;
        }
    }

    .rd-stop-row__name {
        color: var(--ink);
        font-size: 0.9375rem;
        font-weight: 500;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .rd-stop-row__kind {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.5625rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    /* Checks count column */
    .rd-stop-row__checks-col {
        display: flex;
        flex-direction: column;
        gap: 0.125rem;
    }

    .rd-stop-row__check-count {
        color: var(--ink-soft);
        font-family: var(--font-data);
        font-size: 0.9375rem;
        font-weight: 600;
        letter-spacing: -0.01em;
        line-height: 1;
    }

    .rd-stop-row__check-label {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.5625rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    /* State column */
    .rd-stop-row__state-col {
        text-align: end;
    }

    .rd-stop-row__state {
        color: var(--ink-soft);
        font-family: var(--font-data);
        font-size: 0.625rem;
        font-weight: 600;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        white-space: nowrap;

        &[data-state="running"] { color: var(--color-considering); }
        &.rd-stop-row__state--empty { color: var(--ink-faint); font-weight: 400; }
    }
}