/* Control Room — measurement-point detail + measurement detail
/* --------------------------------------------------------------------------
/* Hero block + reading chips + section-scoped chrome for:
/*   - measurement_list.html (point landing page)
/*   - measurement_detail.html (single reading)
/* Shares the same visual language as .asset-hero: accent-tinted surface,
/* 3px left stripe, top/bottom border in --card-color. Status-driven via
/* data-state="warning|critical".
/* --------------------------------------------------------------------------- */

@layer components {

    /* .point-detail — container layout via page-wrapper group in atoms.css */

    /* =====================================================================
       .point-hero — landing hero for a measurement point.

       Instrument-panel composition. Status is carried by the 4px left
       stripe + accent ink only — the surface itself stays neutral so
       the data inside reads cleanly (HP-HMI: colour reserved for
       abnormality, not painted across panels). The right rail is a
       three-block stack: state block (label + big chip + last-check),
       headline numeric readout, action stack.
       ===================================================================== */
    .point-hero {
        background: var(--surface);
        border-block-end: 1px solid var(--card-color, var(--rule));
        border-block-start: 1px solid var(--card-color, var(--rule));
        box-shadow: inset 4px 0 0 var(--card-color, var(--rule));
        display: grid;
        gap: clamp(1.25rem, 3vw, 2.5rem);
        grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem);
        margin-block-end: 1.5rem;
        padding: 1.4rem 1.5rem 1.5rem;
        position: relative;
    }

    /* Critical state pulses the left stripe, mirroring the chip pulse.
       Warning is steady — colour alone is enough. */
    .point-hero[data-state="critical"] {
        animation: alarm-pulse 2s ease-in-out infinite;
        animation-direction: alternate;
    }

    .point-hero__main {
        display: grid;
        gap: 0.45rem;
        min-inline-size: 0;
    }

    .point-hero__ids {
        align-items: baseline;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 0.7rem;
    }

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

    /* Subtle vertical rule between chip groups for "spec sheet" density */
    .point-hero__chip + .point-hero__chip::before {
        color: var(--ink-mute);
        content: "·";
        margin-inline-end: 0.7ch;
    }

    .point-hero__name {
        color: var(--ink);
        font-family: var(--font-display);
        font-size: clamp(1.4rem, 2.6vw, 1.95rem);
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1.05;
        margin: 0.15rem 0 0;
    }

    .point-hero__name-at {
        color: var(--ink-soft);
        font-weight: 500;
    }

    .point-hero__meta {
        color: var(--ink-faint);
        display: flex;
        flex-wrap: wrap;
        font-family: var(--font-data);
        font-size: 0.6875rem;
        gap: 0 1.5ch;
        letter-spacing: 0.1em;
        margin-block-start: 0.2rem;
        text-transform: uppercase;
    }

    /* Topology + readings row — body diagram on the left, readings flow
       to the right of it. Stacks below the diagram on narrow widths. */
    .point-hero__bodyrow {
        align-items: end;
        display: grid;
        gap: 1rem 1.25rem;
        grid-template-columns: auto minmax(0, 1fr);
        margin-block-start: 0.6rem;
    }

    .point-hero__bodyrow:not(:has(.point-hero__topology)) {
        grid-template-columns: minmax(0, 1fr);
    }

    .point-hero__topology {
        display: flex;
        justify-content: start;
    }

    /* =====================================================================
       Right rail — state block, headline readout, action stack.
       ===================================================================== */
    .point-hero__rail {
        display: grid;
        gap: 1.1rem;
        grid-auto-rows: max-content;
    }

    .point-hero__state {
        align-items: start;
        display: grid;
        gap: 0.35rem;
    }

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

    .point-hero__last-check {
        color: var(--ink-soft);
        display: grid;
        font-family: var(--font-data);
        font-size: 0.6875rem;
        gap: 0.15rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .point-hero__last-check strong {
        color: var(--ink);
        font-size: 1rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.04em;
    }

    .point-hero__last-check-time {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.625rem;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.08em;
        margin-block-start: 0.05rem;
    }

    /* Action stack — buttons span full rail width on wide screens, keep
       legible kbd hints to the right. Primary lands at the bottom. */
    .point-hero__actions {
        display: grid;
        gap: 0.4rem;
        grid-auto-rows: max-content;
    }

    .point-hero__actions .btn {
        justify-content: flex-start;
    }

    .point-hero__actions .btn kbd {
        margin-inline-start: auto;
    }

    /* Stack below content on narrow widths */
    @media (max-width: 100ch) {
        .point-hero {
            gap: 1.1rem;
            grid-template-columns: minmax(0, 1fr);
            padding: 1.15rem 1rem 1.25rem;
        }
        .point-hero__rail {
            border-block-start: 1px dashed var(--rule);
            display: grid;
            gap: 0.85rem;
            grid-template-columns: minmax(0, 1fr);
            padding-block-start: 0.9rem;
        }
        .point-hero__state {
            grid-auto-flow: row;
            grid-template-columns: max-content max-content 1fr;
            grid-template-rows: auto auto;
            grid-template-areas:
                "label    chip  check"
                ".        chip  check";
            row-gap: 0.25rem;
            column-gap: 0.85rem;
        }
        .point-hero__state-label  { grid-area: label; align-self: end; }
        .point-hero__state .status-chip--hero { grid-area: chip; }
        .point-hero__last-check   { grid-area: check; justify-self: end; text-align: end; }
        .point-hero__actions {
            display: flex;
            flex-wrap: wrap;
            gap: 0.4rem;
        }
        .point-hero__actions .btn {
            flex: 1 1 auto;
        }
        .point-hero__actions .btn--subtle--primary {
            flex-basis: 100%;
        }
        .point-hero__bodyrow {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    /* =====================================================================
       .reading-grid / .reading — mono mini-boxes for latest reading values
       shown inside the hero (.point-hero) or .measurement-hero. Each cell
       is a bordered chip with a mono-caps label and a tabular-nums value.
       ===================================================================== */
    .reading-grid {
        display: grid;
        gap: 0.5rem;
        grid-template-columns: repeat(auto-fit, minmax(var(--reading-min-width, 10ch), 1fr));
    }

    .reading-grid--wide {
        --reading-min-width: 12ch;
    }

    .reading {
        background: var(--surface);
        border: 1px solid var(--rule);
        display: grid;
        gap: 0.15rem;
        padding: 0.45rem 0.6rem 0.55rem;
    }

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

    .reading__value {
        color: var(--ink);
        font-family: var(--font-data);
        font-size: 1rem;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
        letter-spacing: -0.01em;
    }

    .reading__unit {
        color: var(--ink-soft);
        font-family: var(--font-data);
        font-size: 0.625rem;
        font-weight: 400;
        letter-spacing: 0.04em;
        margin-inline-start: 0.25ch;
    }

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

    /* Hero variant — the primary readout for the page. Spans two grid
       cells on wide widths, big mono digits, with caption + threshold
       slot. Used for the in-alarm metric, or the headline metric on
       nominal points. */
    .reading--hero {
        --reading-min-width: 16ch;
        display: grid;
        gap: 0.25rem;
        grid-column: span 2;
        padding: 0.7rem 0.85rem 0.8rem;
        position: relative;
    }

    .reading--hero .reading__label {
        color: var(--ink-soft);
        font-size: 0.625rem;
        letter-spacing: 0.18em;
    }

    .reading--hero .reading__value {
        font-size: clamp(1.65rem, 2.4vw, 2rem);
        letter-spacing: -0.025em;
        line-height: 1.05;
    }

    .reading--hero .reading__unit {
        font-size: 0.8125rem;
        font-weight: 500;
        letter-spacing: 0.04em;
        margin-inline-start: 0.4ch;
    }

    .reading--hero .reading__caption {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.625rem;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.1em;
        margin-block-start: 0.2rem;
        text-transform: uppercase;
    }

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

    /* Inline threshold-position bar (0–100%) — shown beneath the value
       when the hero reading carries a `--threshold-position` custom
       property (set inline by the template). The fill colour follows
       state via the same `--card-color` derivation rules. */
    .reading--hero .reading__bar {
        background: var(--rule-soft);
        block-size: 3px;
        margin-block-start: 0.45rem;
        overflow: hidden;
        position: relative;
        width: 100%;
    }

    .reading--hero .reading__bar::after {
        background: var(--card-color, var(--ink-soft));
        block-size: 100%;
        content: "";
        display: block;
        inline-size: var(--threshold-position, 0%);
        max-inline-size: 100%;
        transition: inline-size 0.4s var(--ease-out-expo, ease-out);
    }

    .reading--hero[data-state="warning"]  .reading__bar::after { background: var(--status-warning); }
    .reading--hero[data-state="critical"] .reading__bar::after { background: var(--status-critical); }

    /* Threshold tick line on the bar */
    .reading--hero .reading__bar::before {
        background: var(--ink-faint);
        block-size: 100%;
        content: "";
        inline-size: 1px;
        inset-inline-start: var(--threshold-mark, 80%);
        position: absolute;
        top: 0;
        z-index: 1;
    }

    @media (max-width: 100ch) {
        .reading--hero {
            grid-column: 1 / -1;
        }
    }

    /* =====================================================================
       .measurement-hero — slimmer hero on the measurement detail page.
       No right rail; readings flow below the title.
       ===================================================================== */
    .measurement-hero {
        background: var(--surface);
        border-block-end: 1px solid var(--card-color, var(--rule));
        border-block-start: 1px solid var(--card-color, var(--rule));
        box-shadow: inset 3px 0 0 var(--card-color, var(--rule));
        display: grid;
        gap: 0.5rem;
        margin-block-end: 1.5rem;
        padding: 1.25rem 1.25rem 1.4rem;
    }

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

    .measurement-hero__ids {
        align-items: baseline;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .measurement-hero__top {
        align-items: baseline;
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .measurement-hero__time {
        color: var(--ink);
        font-family: var(--font-display);
        font-size: clamp(1.25rem, 2.4vw, 1.65rem);
        font-weight: 700;
        letter-spacing: -0.015em;
        line-height: 1.05;
        margin: 0;
    }

    .measurement-hero__time-sub {
        color: var(--ink-soft);
        font-family: var(--font-data);
        font-size: 0.6875rem;
        letter-spacing: 0.12em;
        margin-inline-start: 0.5ch;
        text-transform: uppercase;
    }

    .measurement-hero__actions {
        display: flex;
        gap: 0.4rem;
        margin-inline-start: auto;
    }

    /* =====================================================================
       .point-filterbar — flat Control Room filter row: mono caps labels
       with plain rectangular inputs. Used above the chart on point pages.
       ===================================================================== */
    .point-filterbar {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-block: 0.75rem;
    }

    .point-filterbar__label {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.5625rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    .point-filterbar__sep {
        color: var(--ink-faint);
    }

    .point-filterbar__input {
        background: var(--surface);
        border: 1px solid var(--rule);
        color: var(--ink);
        font-family: var(--font-data);
        font-size: 0.75rem;
        padding: 0.3rem 0.55rem;
    }

    .point-filterbar__clear {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.5625rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-decoration: none;
        text-transform: uppercase;

        @media (any-hover: hover) {
            &:hover { color: var(--status-crit-fg); }
        }
    }

    /* =====================================================================
       .seg-toggle — flat segmented control for chart-kind switches
       (Accel / Vel / Env). Shares the failpass-toggle visual DNA but
       keeps neutral ink on the active segment (we're not signalling
       pass/fail, just which signal is on screen).
       ===================================================================== */
    .seg-toggle {
        background: var(--surface);
        border: 1px solid var(--rule);
        display: inline-flex;
        font-family: var(--font-data);
    }

    .seg-toggle__btn {
        background: transparent;
        border: 0;
        color: var(--ink-soft);
        cursor: pointer;
        font-family: inherit;
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        padding: 0.35rem 0.85rem;
        text-transform: uppercase;
    }

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

    .seg-toggle__btn[aria-selected="true"],
    .seg-toggle__btn.is-active {
        background: var(--ink);
        color: var(--color-canvas);
    }

    /* =====================================================================
       Chart section wrappers — spacing + header slot for section-head
       controls (the seg-toggle sits in section-head__right).
       ===================================================================== */
    .point-chart {
        margin-block-end: 1.5rem;
    }

    /* Cap notice under the filter bar when the query hit RESULT_CAP. */
    .point-detail__note {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.625rem;
        letter-spacing: 0.08em;
        margin-block: 0.25rem 0.5rem;
    }

    .point-chart__stage {
        background: var(--surface);
        border: 1px solid var(--rule);
        padding: 0.75rem;
    }

    /* Tall variant — used on the measurement detail page where waveform
       and spectrum charts get more vertical room than in the inspect
       partial (compact 260–320px). The detail page is the workstation;
       give it canvas height. */
    .vibration-chart__container--tall {
        block-size: 360px;
    }

    @media (min-width: 100ch) {
        .vibration-chart__container--tall {
            block-size: 420px;
        }
    }

    /* =====================================================================
       .filter-bench — band-pass filter strip on the measurement detail
       page. Always visible, sits between the hero and the chart sections.
       Mono caps labels with hairline cell-style inputs (matches form-sheet
       language) on a panel that reads as a piece of bench equipment, not
       a collapsible disclosure.
       ===================================================================== */
    .filter-bench__row {
        align-items: end;
        background: var(--surface);
        border: 1px solid var(--rule);
        column-gap: 1.25rem;
        display: grid;
        grid-template-columns: minmax(0, max-content) 1fr 1fr auto;
        padding: 0.85rem 1rem 0.95rem;
        row-gap: 0.95rem;
    }

    @media (max-width: 80ch) {
        .filter-bench__row {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 80ch) {
        .filter-bench__field--toggle {
            grid-column: 1 / -1;
        }
    }

    .filter-bench__field {
        display: grid;
        gap: 0.25rem;
        min-inline-size: 0;
    }

    .filter-bench__field--toggle {
        gap: 0.35rem;
    }

    .filter-bench__field--toggle .seg-toggle {
        align-self: start;
    }

    .filter-bench__field .form-label { line-height: 1.2; }
    .filter-bench__field .form-help  { margin-block-start: 0.1rem; }

    .filter-bench__field .input {
        background: transparent;
        border: 0;
        border-block-end: 1px solid var(--rule);
        border-radius: 0;
        color: var(--ink);
        font-family: var(--font-data);
        font-size: 1rem;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
        inline-size: 100%;
        padding: 0.25rem 0.1rem;
    }

    .filter-bench__field .input:focus,
    .filter-bench__field .input:focus-visible {
        border-block-end-color: var(--ink);
        outline: 0;
    }

    .filter-bench__actions {
        align-items: end;
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    @media (max-width: 60ch) {
        .filter-bench__actions {
            grid-column: 1 / -1;
        }
    }

    .filter-bench__status {
        margin-block-start: 0.5rem;
    }

    /* =====================================================================
       Inspect slot — the turbo-frame that shows a single waveform/spectrum
       when the user picks a point on the multi-signal grid.
       ===================================================================== */
    .point-inspect {
        margin-block: 1rem 1.5rem;
    }

    .point-inspect--empty {
        background: var(--surface);
        border: 1px dashed var(--rule);
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.6875rem;
        letter-spacing: 0.14em;
        padding: 1rem;
        text-align: center;
        text-transform: uppercase;
    }

    /* =====================================================================
       Measurement datasheet — tabular view of all readings on the point.
       Extends the base .datasheet atom with a metric column per signal
       type. Anchors the SEQ ref chip to a clickable detail link.
       ===================================================================== */
    .datasheet--measurements td[data-col="date"] {
        color: var(--ink-soft);
        font-family: var(--font-data);
        font-size: 0.6875rem;
        letter-spacing: 0.06em;
        white-space: nowrap;
    }

    .datasheet--measurements td[data-col="date"] strong {
        color: var(--ink);
        font-weight: 700;
        margin-inline-end: 0.6ch;
    }

    .datasheet--measurements td[data-col="metric"] {
        color: var(--ink-soft);
        font-family: var(--font-data);
        font-variant-numeric: tabular-nums;
        text-align: end;
    }

    .datasheet--measurements td[data-col="thumb"] {
        padding-block: 0.2rem;
        width: 1%;
    }

    .datasheet--measurements__thumb {
        background: var(--surface-sunken);
        border: 1px solid var(--rule);
        block-size: 1.75rem;
        display: inline-block;
        inline-size: 1.75rem;
        object-fit: cover;
        vertical-align: middle;
    }

    /* Processing placeholder — icon centred in the same 1.75rem box. */
    .datasheet--measurements__thumb--processing {
        align-items: center;
        color: var(--ink-faint);
        display: inline-flex;
        justify-content: center;
    }

    .datasheet--measurements__thumb--processing .icon {
        --icon-size: 1rem;
    }

    .datasheet--measurements td[data-col="notes"] {
        color: var(--ink-faint);
        padding-inline: 0.4rem;
        text-align: center;
        width: 1%;
    }

    .datasheet--measurements tr[data-turbo-frame] { cursor: pointer; }

    /* Row is a link; span it across the row via .datasheet__row-link
       in the first cell. We keep the <tr> clickable via a transparent
       <a> positioned over the row content. */
    .datasheet--measurements__link {
        color: inherit;
        text-decoration: none;

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

    /* =====================================================================
       Page-level section wrapper so the back/breadcrumb row and content
       align to the same grid as .asset-detail.
       ===================================================================== */
    .point-detail__header {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        margin-block-end: 0.75rem;
    }

    .point-detail__breadcrumb {
        margin-inline-start: auto;
    }

    /* =====================================================================
       Attachments + notes blocks on measurement_detail.
       ===================================================================== */
    .measurement-body {
        display: grid;
        gap: 1.25rem;
    }

    .measurement-prose {
        color: var(--ink);
        font-family: var(--font-body);
        font-size: 0.875rem;
        line-height: 1.5;
        margin: 0.5rem 0 0;
        max-inline-size: 68ch;
    }

    .measurement-attachments {
        display: grid;
        gap: 0.6rem;
        grid-template-columns: repeat(auto-fit, minmax(11rem, max-content));
        margin-block-start: 0.5rem;
    }

    /* File-attachment card on the measurement detail page. Replaces the
       form-side `.attachment__icon` square by a Control Room file card:
       icon stage at the top with the artwork, mono caps filename + kind
       below. The whole card is the link; the floating download badge
       still overlaps the bottom-right corner. */
    .measurement-attachments .attachment--file {
        --att-card-w: 12rem;
        --att-art-h: 4.25rem;
        background: var(--surface);
        border: 1px solid var(--rule);
        block-size: auto;
        border-radius: 0;
        box-shadow: none;
        inline-size: var(--att-card-w);
        position: relative;
    }

    .measurement-attachments .attachment--file .attachment__icon {
        --icon-size: 1.6rem;
        align-items: stretch;
        aspect-ratio: auto;
        background: transparent;
        block-size: auto;
        border-radius: 0;
        color: var(--ink-soft);
        display: grid;
        gap: 0.4rem;
        grid-template-rows: var(--att-art-h) auto auto;
        padding: 0.65rem 0.75rem 0.7rem;
        text-decoration: none;

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

    .measurement-attachments .attachment--file .attachment__icon-art {
        align-items: center;
        background: var(--surface-sunken);
        block-size: 100%;
        border: 1px solid var(--rule-soft);
        color: var(--ink-soft);
        display: flex;
        justify-content: center;
    }

    .measurement-attachments .attachment--file .attachment__filename {
        color: var(--ink);
        display: -webkit-box;
        font-family: var(--font-data);
        font-size: 0.6875rem;
        font-variant-numeric: tabular-nums;
        font-weight: 700;
        letter-spacing: 0.04em;
        line-height: 1.25;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: break-all;
    }

    .measurement-attachments .attachment--file .attachment__kind {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.5625rem;
        font-weight: 700;
        letter-spacing: 0.18em;
        text-transform: uppercase;
    }

    /* Tighten the floating download badge to match the Control Room flat
       look (square, hairline border, mono ink) instead of the round dark
       pill from the form-side default. */
    .measurement-attachments .attachment--file .attachment__download {
        background: var(--surface);
        block-size: 1.6rem;
        border: 1px solid var(--rule);
        border-radius: 0;
        color: var(--ink-soft);
        inline-size: 1.6rem;
        inset-block-end: -0.4rem;
        inset-inline-end: -0.4rem;

        @media (any-hover: hover) {
            &:hover {
                background: var(--ink);
                border-color: var(--ink);
                color: var(--surface);
            }
        }

        .icon {
            font-size: 0.85rem;
        }
    }

    /* =====================================================================
       Blank-slate for the measurement list when filters have no results.
       Uses the Control Room austere look, not the panel chrome.
       ===================================================================== */
    .point-empty {
        background: var(--surface);
        border: 1px dashed var(--rule);
        color: var(--ink-faint);
        display: grid;
        font-family: var(--font-data);
        font-size: 0.75rem;
        gap: 0.75rem;
        letter-spacing: 0.08em;
        padding: 2rem 1rem;
        place-items: center;
        text-align: center;
        text-transform: uppercase;
    }

    .point-empty__icon {
        --icon-size: 2.25rem;
        color: var(--ink-mute);
    }
}