/* Control Room — CSS-only atoms (Phase 1)
/* --------------------------------------------------------------------------
/* Class names are globally defined (no collision with existing styles) but
/* won't apply anywhere until a template opts in. The .preview wrapper
/* pairs Inter body text with Control Room defaults for the preview page.
/* --------------------------------------------------------------------------- */

@layer components {

    /* Preview wrapper — opt-in Control Room body face + ink on existing page
       canvas. No background override: the page already paints body with
       --color-canvas and we don't want a second competing surface colour.
       Overrides the global #main { text-align: center } inheritance; detail
       pages in Control Room are left-anchored (centered composition is reserved
       for terminal/section overview title blocks, not content). */
    .preview {
        color: var(--ink);
        font-family: var(--font-body);
        text-align: start;
    }

    /* kbd is styled globally in base.css — Control Room look applies everywhere. */

    /* Callsign — mono asset / zone / section ID (A-PS-03, STG-TRN, …) */
    .callsign {
        color: var(--primary);
        font-family: var(--font-data);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

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

    .callsign--large {
        font-size: 0.8125rem;
        letter-spacing: 0.14em;
    }

    /* Status chip — bullet + uppercase label, colour = state foreground */
    .status-chip {
        align-items: center;
        color: var(--status-nominal-fg);
        display: inline-flex;
        font-family: var(--font-data);
        font-size: 0.6875rem;
        font-weight: 700;
        gap: 0.375em;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .status-chip::before {
        background: currentColor;
        content: "";
        display: inline-block;
        height: 0.7em;
        width: 0.7em;
    }

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

    .status-chip--dense {
        font-size: 0.625rem;
        gap: 0.3em;
    }

    /* Section marker — § NN · LABEL eyebrow on detail pages */
    .section-marker {
        color: var(--accent);
        font-family: var(--font-data);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .section-marker--tight { letter-spacing: 0.14em; }
    .section-marker--loose { letter-spacing: 0.24em; }

    /* Zone head — label + code + count, thin rule underneath */
    .zone-head {
        align-items: baseline;
        border-block-end: 1px solid var(--rule-soft);
        display: flex;
        flex-wrap: wrap;
        gap: 0.5em;
        margin-block-end: 0.625em;
        padding-block: 0.375em 0.5em;
    }

    .zone-head__label {
        color: var(--ink);
        font-family: var(--font-data);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

    .zone-head__code {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.5625rem;
        letter-spacing: 0.12em;
    }

    .zone-head__count {
        color: var(--ink-soft);
        font-family: var(--font-data);
        font-size: 0.625rem;
        letter-spacing: 0.1em;
        margin-inline-start: auto;
        text-transform: uppercase;
    }

    /* Section head — flex 3-zone header above a datasheet / activity log.
       Left: section-marker; middle: meta (totals, counts); right: ref/ID.
       Default is 2px rule-strong (datasheet-anchor). Use --thin for lighter
       contexts like route lists where content below isn't data-dense. */
    .section-head {
        align-items: baseline;
        border-block-end: 2px solid var(--rule-strong);
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-block-end: 0.625rem;
        padding-block-end: 0.4rem;
    }

    .section-head--thin {
        border-block-end-width: 1px;
    }

    .section-head__meta {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.625rem;
        letter-spacing: 0.12em;
    }

    .section-head__meta strong {
        color: var(--status-warn-fg);
        font-weight: 700;
    }

    .section-head__right {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.625rem;
        letter-spacing: 0.12em;
        margin-inline-start: auto;
    }

    /* Datasheet — measurement point table in the Control Room "data
       compiler" style: full 1-px --rule grid (soft, not hard black),
       REF and VALUE as bordered mono mini-boxes, mono-caps STATE,
       red triangle flag in the REF gutter for warning / critical rows
       (zero layout shift). Each parameter group is its own <tbody>
       introduced by a .datasheet__group-head row. */
    .datasheet {
        border: 1px solid var(--rule);
        border-collapse: collapse;
        font-family: var(--font-data);
        font-size: 0.6875rem;
        width: 100%;
    }

    .datasheet th,
    .datasheet td {
        border: 1px solid var(--rule);
        color: var(--ink);
        letter-spacing: 0.08em;
        padding: 0.4rem 0.55rem;
        text-align: start;
        vertical-align: middle;
    }

    /* Column header — muted mono caps, 2px rule-strong bottom. Non-inverted
       so the reading rhythm matches the rest of the page. */
    .datasheet thead th {
        background: transparent;
        border-block-end: 2px solid var(--rule-strong);
        color: var(--ink-soft);
        font-family: var(--font-data);
        font-size: 0.5625rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        padding-block: 0.5rem;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .datasheet thead th[data-align="end"] { text-align: end; }

    /* REF cell (and its column header) reserve triangle-gutter width on
       ALL rows so the REF box stays column-aligned whether the row has
       state or not. The "REF" label in the header matches the offset. */
    .datasheet td[data-col="ref"],
    .datasheet thead th:first-child {
        padding-inline-start: 1.3rem;
        position: relative;
    }

    /* Status tint + red triangle flag in the REF gutter. Zero layout
       shift — the gutter was reserved above. */
    .datasheet tr[data-state="warning"]  { background: var(--surface-warn); }
    .datasheet tr[data-state="critical"] { background: var(--surface-crit); }

    .datasheet tr[data-state] td[data-col="ref"]::before {
        border-style: solid;
        border-width: 4px 0 4px 7px;
        content: "";
        inset-block-start: 50%;
        inset-inline-start: 0.45rem;
        position: absolute;
        transform: translateY(-50%);
    }
    .datasheet tr[data-state="warning"]  td[data-col="ref"]::before {
        border-color: transparent transparent transparent var(--status-warn-fg);
    }
    .datasheet tr[data-state="critical"] td[data-col="ref"]::before {
        border-color: transparent transparent transparent var(--status-crit-fg);
    }

    /* REF mini-box — bordered mono chip inside the REF cell. Text colour
       picks up the sensor-identity colour (via --sensor-color set by
       .machine-body__dot--cN) or a --point-color passed via inline style;
       falls back to --ink for points with no colour index. */
    .datasheet__ref {
        background: var(--surface);
        border: 1px solid var(--rule);
        color: var(--sensor-color, var(--point-color, var(--ink)));
        display: inline-block;
        font-family: var(--font-data);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        min-inline-size: 3em;
        padding: 0.15em 0.55em;
        text-align: center;
        text-transform: uppercase;
    }

    /* VALUE mini-box — bordered bold-mono number, right-aligned, tabular.
       Recolours to status fg when row carries warning / critical. */
    .datasheet__value {
        background: var(--surface);
        border: 1px solid var(--rule);
        color: var(--ink);
        display: inline-block;
        font-family: var(--font-data);
        font-size: 0.8125rem;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
        min-inline-size: 4em;
        padding: 0.1em 0.5em;
        text-align: end;
    }

    .datasheet tr[data-state="warning"]  .datasheet__value { color: var(--status-warn-fg); }
    .datasheet tr[data-state="critical"] .datasheet__value { color: var(--status-crit-fg); }

    /* Group head — full-width row introducing each parameter group.
       Plain surface fill, 2px rule-strong above second+ group to
       reinforce the break. */
    .datasheet__group-head th {
        background: var(--surface);
        border: 1px solid var(--rule);
        color: inherit;
        font-family: inherit;
        font-size: inherit;
        font-weight: normal;
        letter-spacing: 0;
        padding: 0.6rem 0.65rem 0.45rem;
        text-align: start;
        text-transform: none;
    }

    .datasheet tbody:not(:first-of-type) .datasheet__group-head th {
        border-block-start: 2px solid var(--rule-strong);
    }

    .datasheet__group-marker {
        color: var(--accent);
        font-family: var(--font-data);
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .datasheet__group-meta {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.625rem;
        letter-spacing: 0.1em;
        margin-inline-start: 1ch;
        text-transform: uppercase;
    }

    /* POINT — primary row identifier. Sans for name readability. */
    .datasheet td[data-col="point"] {
        font-family: var(--font-body);
        font-size: 0.8125rem;
        letter-spacing: 0;
        line-height: 1.3;
    }

    .datasheet td[data-col="value"] { text-align: end; }

    /* UNIT / TREND — muted mono, right-aligned. */
    .datasheet td[data-col="unit"],
    .datasheet td[data-col="trend"] {
        color: var(--ink-soft);
        font-variant-numeric: tabular-nums;
        text-align: end;
    }

    /* Extra air between the ↑/↓/± glyph and the numeric value so the
       arrow reads as a separate signal, not a prefix pasted to the digits. */
    .datasheet td[data-col="trend"] {
        word-spacing: 0.35em;
    }

    /* STATE — mono caps, coloured by status. Nominal = default ink (HP-HMI
       principle: colour reserved for abnormal states). */
    .datasheet td[data-col="state"] {
        font-weight: 700;
        letter-spacing: 0.16em;
        text-align: end;
        text-transform: uppercase;
    }

    .datasheet tr[data-state="warning"]  td[data-col="state"] { color: var(--status-warn-fg); }
    .datasheet tr[data-state="critical"] td[data-col="state"] { color: var(--status-crit-fg); }

    .datasheet__threshold {
        color: var(--ink-faint);
        display: block;
        font-family: var(--font-data);
        font-size: 0.625rem;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.08em;
        margin-block-start: 0.3em;
    }

    .datasheet__link {
        color: inherit;
        text-decoration: none;

        @media (any-hover: hover) {
            &:hover { text-decoration: underline; }
        }
    }

    /* Point colour swatch — fixed 8px square preceding point name.
       Falls back to --sensor-color so the .machine-body__dot--cN colour
       modifiers (defined in asset_chart.css) can set the hue without an
       extra mapping. */
    .point-swatch {
        background: var(--point-color, var(--sensor-color, var(--rule)));
        display: inline-block;
        height: 0.5rem;
        margin-inline-end: 0.55rem;
        vertical-align: middle;
        width: 0.5rem;
    }

    /* Datasheet responsive pass — stays a table at every width. Below the
       app's single layout breakpoint (100ch) we tighten cell padding and
       drop the TREND + STATE columns. Row tint + red triangle in the REF
       gutter already carry state on tinted rows; nominal rows need no
       state signal at all. */
    @media (max-width: 100ch) {
        .datasheet th,
        .datasheet td {
            padding: 0.3rem 0.45rem;
        }
        .datasheet thead th:nth-child(5),
        .datasheet td[data-col="trend"],
        .datasheet thead th:last-child,
        .datasheet td[data-col="state"] {
            display: none;
        }
        .datasheet__group-head th {
            padding: 0.5rem 0.55rem 0.4rem;
        }
        .datasheet__group-meta {
            display: block;
            margin-inline-start: 0;
            margin-block-start: 0.2em;
        }
    }

    /* Point capture surface (Phase 7)
    /* ------------------------------------------------------------------------
    /* A single .capture shape is used by BOTH "new measurement from asset"
    /* and "route execution point check". Mode is indicated by data-item-type
    /* on the wrapper (numerical | measurement | pass_fail | multi_check). */

    .capture {
        --tap-g: 1;          /* glove-scale multiplier, 1 = normal, 1.15 = gloves */
        background: var(--surface);
        border: 1px solid var(--rule);
        display: grid;
        gap: 0.85rem;
        padding: 1rem 1rem 1.1rem;
    }

    .capture[data-state="pass"] { background: var(--surface); border-color: var(--status-nominal); }
    .capture[data-state="fail"] { background: var(--surface-warn); border-color: var(--status-warning); }
    .capture[data-state="fail"]:has([data-severity="major"].is-active),
    .capture[data-state="fail"][data-severity="major"] {
        background: var(--surface-crit);
        border-color: var(--status-critical);
    }

    /* Point header — shared across all capture modes.
       Layout per routes-mobile-2.jsx PointHeader: swatch + param·id +
       MULTI-CHECK tag + LAST WARN on the right row; big label; expected meta. */
    .point-header {
        display: grid;
        gap: 0.3rem;
    }

    .point-header__meta {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5ch;
    }

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

    .point-header__tag {
        border: 1px solid var(--accent);
        color: var(--accent);
        font-family: var(--font-data);
        font-size: 0.5625rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        padding: 0.1em 0.4em;
        text-transform: uppercase;
    }

    .point-header__flag {
        color: var(--status-warn-fg);
        font-family: var(--font-data);
        font-size: 0.5625rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        margin-inline-start: auto;
        text-transform: uppercase;
    }

    .point-header__label {
        color: var(--ink);
        font-family: var(--font-body);
        font-size: 1.25rem;
        font-weight: 700;
        letter-spacing: -0.015em;
        line-height: 1.1;
        margin: 0;
    }

    .point-header__expected {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.625rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .point-header__expected strong {
        color: var(--ink-soft);
        font-weight: 700;
    }

    /* Numeric body — big Roboto Mono value + inline unit suffix + expected */
    .capture-numeric {
        align-items: center;
        background: var(--surface);
        border: 1px solid var(--rule);
        display: flex;
        gap: 0.75rem;
        padding: 1rem 1rem;
    }

    .capture-numeric__input {
        background: transparent;
        border: 0;
        color: var(--ink);
        flex: 1;
        font-family: var(--font-data);
        font-size: 2.25rem;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1;
        min-inline-size: 0;
        outline: none;
        padding: 0;

        &::placeholder { color: var(--ink-mute); }
    }

    .capture-numeric__unit {
        color: var(--ink-soft);
        flex-shrink: 0;
        font-family: var(--font-data);
        font-size: 1rem;
        letter-spacing: 0.03em;
        white-space: nowrap;
    }

    /* Warn strip — shown above numeric input when last reading breached */
    .capture-warn {
        background: var(--surface-warn);
        border-inline-start: 2px solid var(--status-warning);
        color: var(--status-warn-fg);
        font-family: var(--font-data);
        font-size: 0.625rem;
        letter-spacing: 0.1em;
        line-height: 1.4;
        padding: 0.5rem 0.7rem;
    }

    .capture-warn strong { font-weight: 700; }

    /* FAIL / PASS toggle — flat rectangle, two buttons, active fills. Per
       the brand rule "not rounded", we keep 0 radius; the mockup's pill is
       traded for a crisper control-room feel.
       Stimulus: data-action="click->execution#setState" data-value="fail|pass"
       on each button; parent carries data-role="pass-fail" or "check-pass-fail". */
    .failpass-toggle {
        background: var(--surface);
        border: 1px solid var(--rule);
        display: inline-flex;
        font-family: var(--font-data);
        overflow: hidden;
    }

    .failpass-toggle__seg + .failpass-toggle__seg {
        border-inline-start: 1px solid var(--rule);
    }

    .failpass-toggle__seg {
        background: transparent;
        block-size: calc(2.5rem * var(--tap-g, 1));
        border: 0;
        color: var(--ink-faint);
        cursor: pointer;
        font-family: inherit;
        font-size: 0.6875rem;
        font-weight: 700;
        inline-size: calc(5rem * var(--tap-g, 1));
        letter-spacing: 0.14em;
        padding: 0 0.9rem;
        text-transform: uppercase;
    }

    /* Active states driven by ancestor [data-state] / [data-check-state] */
    [data-state="fail"] > .failpass-toggle .failpass-toggle__seg--fail,
    [data-check-state="fail"] > .failpass-toggle .failpass-toggle__seg--fail {
        background: var(--status-critical);
        color: #fff;
    }

    [data-state="pass"] > .failpass-toggle .failpass-toggle__seg--pass,
    [data-check-state="pass"] > .failpass-toggle .failpass-toggle__seg--pass {
        background: var(--status-nominal);
        color: #fff;
    }

    /* Severity chip — standalone buttons (not segmented). MINOR + MAJOR.
       Stimulus: data-action="click->execution#setSeverity" data-value="minor|major". */
    .severity-chip {
        background: transparent;
        border: 1px solid var(--rule);
        color: var(--ink-soft);
        cursor: pointer;
        font-family: var(--font-data);
        font-size: 0.5625rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        padding: 0.15rem 0.55rem;
        text-transform: uppercase;
    }

    /* Active state driven by ancestor data-severity */
    [data-severity="minor"] > .severity-chip[data-value="minor"] {
        background: var(--ink-soft);
        border-color: var(--ink-soft);
        color: #fff;
    }

    [data-severity="major"] > .severity-chip[data-value="major"] {
        background: var(--status-critical);
        border-color: var(--status-critical);
        color: #fff;
    }

    /* Multi-check row — a single subcheck of a multi_check item.
       Stimulus uses data-check-index + data-check-state on this element. */
    .subcheck {
        align-items: center;
        background: var(--surface);
        border: 1px solid var(--rule);
        display: grid;
        gap: 0.5rem;
        grid-template-columns: 1fr auto;
        padding: 0.55rem 0.7rem;
    }

    .subcheck[data-check-state="pass"] {
        background: var(--surface);
        border-color: var(--status-nominal);
    }

    .subcheck[data-check-state="fail"] {
        background: var(--surface-warn);
        border-color: var(--status-warning);
    }

    .subcheck[data-check-state="fail"][data-severity="major"] {
        background: var(--surface-crit);
        border-color: var(--status-critical);
    }

    .subcheck__label {
        color: var(--ink);
        font-family: var(--font-body);
        font-size: 0.875rem;
        font-weight: 600;
        line-height: 1.25;
    }

    .subcheck__severity {
        display: flex;
        gap: 0.25rem;
        margin-block-start: 0.35rem;
    }

    /* Only show the severity chips when the row is in fail state */
    .subcheck:not([data-check-state="fail"]) .subcheck__severity {
        display: none;
    }

    /* Attachment button — compact dashed picker, full-width */
    .attachment-btn {
        align-items: center;
        background: transparent;
        border: 1px dashed var(--rule);
        color: var(--ink-soft);
        cursor: pointer;
        display: flex;
        font-family: var(--font-body);
        font-size: 0.8125rem;
        font-weight: 600;
        gap: 0.65rem;
        padding: 0.6rem 0.75rem;
        text-align: start;
        text-decoration: none;
        width: 100%;

        @media (any-hover: hover) {
            &:hover {
                border-color: var(--primary);
                color: var(--primary);
            }
        }
    }

    .attachment-btn__icon {
        flex-shrink: 0;
        font-size: 0.95rem;
        line-height: 1;
    }

    .attachment-btn__label { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    .attachment-btn[data-picked="true"] {
        background: var(--surface);
        border-color: var(--primary);
        color: var(--primary);
    }

    /* Capture note — plain textarea, no rich-text chrome */
    .capture-note {
        background: var(--surface-sunken);
        border: 1px solid var(--rule-soft);
        color: var(--ink);
        font-family: var(--font-body);
        font-size: 0.8125rem;
        min-block-size: 3rem;
        padding: 0.55rem 0.65rem;
        resize: vertical;
        width: 100%;

        &::placeholder {
            color: var(--ink-faint);
        }
    }

    /* Thumb-zone action band — bottom-fixed row of buttons on mobile capture */
    .thumb-band {
        background: var(--surface);
        border-block-start: 1px solid var(--rule);
        display: flex;
        gap: 0.5rem;
        padding: 0.6rem 0.75rem 0.75rem;
    }

    .thumb-action {
        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;
        flex: 1;
        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;

        &[disabled], &[aria-disabled="true"] {
            background: var(--ink-mute);
            color: var(--ink-faint);
            cursor: not-allowed;
        }
    }

    .thumb-action--icon {
        flex: 0 0 auto;
        inline-size: calc(3.25rem * var(--tap-g, 1));
        padding: 0;
    }

    .thumb-action--primary {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;

        &[disabled], &[aria-disabled="true"] {
            background: var(--ink-mute);
            border-color: var(--ink-mute);
            color: var(--ink-faint);
        }
    }
}