/* Control Room — asset detail (Phase 4)
/* --------------------------------------------------------------------------
/* Hero block + section wrappers + activity log + datasheet hooks for the
/* asset_detail page. Cards-perma chrome retired; this stylesheet assumes
/* templates/registry/_asset_hero.html + _asset_datasheet.html +
/* _asset_topology.html + _asset_activity.html.
/* --------------------------------------------------------------------------- */

@layer components {

    /* Outer content column — edge-to-edge with fluid padding */
    .asset-detail {
        margin-inline: auto;
        max-inline-size: var(--main-width);
        padding-block: var(--block-space);
        padding-inline: var(--main-padding);
        text-align: start;
    }

    /* Hero — accent-tinted surface, top/bottom borders, 3px left stripe.
       Status-driven via data-state on the element (warning/critical/nominal). */
    .asset-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: 1.5rem;
        grid-template-columns: 1fr auto;
        margin-block-end: 1.5rem;
        padding: 1.5rem 1.25rem;
        position: relative;
    }

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

    .asset-hero__main {
        display: grid;
        gap: 0.4rem;
        min-inline-size: 0;
    }

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

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

    .asset-hero__name {
        color: var(--ink);
        font-family: var(--font-display);
        font-size: clamp(1.5rem, 3vw, 2.25rem);
        font-weight: 700;
        letter-spacing: -0.02em;
        line-height: 1.05;
        margin: 0.2rem 0 0;
    }

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

    .asset-hero__side {
        align-items: flex-end;
        display: flex;
        flex-direction: column;
        gap: 0.625rem;
        min-inline-size: 12rem;
        text-align: end;
    }

    .asset-hero__stats {
        color: var(--ink-soft);
        display: grid;
        font-family: var(--font-data);
        font-size: 0.625rem;
        gap: 0.2rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .asset-hero__stat strong {
        color: var(--ink);
        font-weight: 700;
    }

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

    .asset-hero__actions {
        display: flex;
        gap: 0.4rem;
        margin-block-start: 0.25rem;
    }

    /* Mobile: collapse side column below main */
    @media (max-width: 639px) {
        .asset-hero {
            grid-template-columns: 1fr;
        }
        .asset-hero__side {
            align-items: stretch;
            text-align: start;
        }
        .asset-hero__actions { flex-wrap: wrap; }
    }

    /* U.S. Graphics / Control Room action button.
       Flat black-bordered rectangle; no radius; borrows surface behind it.
       Both `btn btn--subtle` (uses --btn-* tokens on the base .btn rule) and
       standalone `btn--subtle` work — the concrete fallbacks below cover
       the standalone case. Modifiers:
         .btn--subtle--primary — filled accent (Arpedon red, usgraphics-style CTA)
         .btn--subtle--dashed  — dashed border (for + Add affordances)      */
    .btn--subtle {
        --btn-background: transparent;
        --btn-border-color: var(--ink);
        --btn-border-radius: 0;
        --btn-border-size: 1px;
        --btn-color: var(--ink);
        --btn-font-weight: 500;
        --btn-gap: 0.5ch;
        --btn-hover-brightness: 1;
        --btn-padding: 0.18rem 0.55rem;

        align-items: center;
        background: var(--btn-background);
        border: var(--btn-border-size) solid var(--btn-border-color);
        border-radius: var(--btn-border-radius);
        color: var(--btn-color);
        cursor: pointer;
        display: inline-flex;
        font-family: var(--font-body);
        font-size: 0.8125rem;
        font-weight: var(--btn-font-weight);
        gap: var(--btn-gap);
        letter-spacing: -0.005em;
        line-height: 1.4;
        padding: var(--btn-padding);
        text-decoration: none;
        transition: background-color 100ms ease-out, color 100ms ease-out;

        @media (any-hover: hover) {
            &:hover {
                --btn-background: var(--ink);
                --btn-color: var(--ink-inverted, #fff);
            }
        }

        /* Kbd inside stays its own bordered pill; sit level with the baseline */
        > kbd {
            align-self: center;
        }
    }

    /* Filled primary variant — usgraphics "Inquiry →" energy: solid accent
       rectangle, no border, bright text on strong bg. Used for CTAs that
       commit to an action (save measurement, submit, etc). */
    .btn--subtle--primary {
        --btn-background: var(--accent);
        --btn-border-color: var(--accent);
        --btn-color: #fff;

        @media (any-hover: hover) {
            &:hover {
                --btn-background: color-mix(in oklch, var(--accent) 85%, black);
                --btn-color: #fff;
            }
        }
    }

    .btn--subtle--dashed {
        --btn-border-color: var(--ink-faint);
        border-style: dashed;

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

    /* Page sections — each gets its own .section-head + content */
    .asset-section {
        margin-block-end: 1.75rem;
    }

    /* Datasheet link in the POINT column — inherits color but shows pointer */
    .datasheet__link {
        color: inherit;
        text-decoration: none;

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

    /* Topology — keep the SVG diagram compact, centered */
    .asset-topology .machine-body {
        margin-block: 0.75rem 0.5rem;
        max-inline-size: 28rem;
    }

    /* Photo management block on asset_edit.html */
    .asset-edit__photo-block {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-block-end: 1rem;
    }

    .asset-edit__photo {
        align-items: center;
        display: flex;
        gap: 0.75rem;
    }

    .asset-edit__photo-preview {
        background: var(--surface-sunken);
        border: 1px solid var(--rule);
        border-radius: 2px;
        display: block;
        flex-shrink: 0;
        inline-size: 6rem;
        overflow: hidden;
    }

    .asset-edit__photo-preview img {
        aspect-ratio: 1;
        display: block;
        inline-size: 100%;
        object-fit: cover;
    }

    .asset-edit__photo-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .visually-hidden {
        block-size: 1px;
        clip-path: inset(50%);
        inline-size: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
    }

    /* Activity log — CRHistory grid: time · dot · event */
    .activity-log {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .activity-row {
        align-items: baseline;
        border-block-end: 1px solid var(--rule-soft);
        color: var(--ink);
        display: grid;
        font-family: var(--font-body);
        font-size: 0.8125rem;
        gap: 0 0.75rem;
        grid-template-columns: 7rem 0.5rem 1fr;
        padding-block: 0.55rem;
    }

    .activity-row__time {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.625rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .activity-row__dot {
        background: var(--ink-mute);
        display: inline-block;
        height: 0.5rem;
        margin-block-start: 0.2rem;
        width: 0.5rem;
    }

    .activity-row[data-severity="nominal"]  .activity-row__dot { background: var(--status-nominal); }
    .activity-row[data-severity="warning"]  .activity-row__dot { background: var(--status-warning); }
    .activity-row[data-severity="critical"] .activity-row__dot { background: var(--status-critical); }
    .activity-row[data-severity="resolved"] .activity-row__dot { background: var(--status-nominal); }

    .activity-row__sub {
        color: var(--ink-faint);
    }

    .activity-row__sub a {
        color: inherit;
        text-decoration: underline;
        text-decoration-color: var(--rule);
        text-underline-offset: 0.15em;
    }

    .activity-row__comment {
        color: var(--ink-soft);
        font-size: 0.75rem;
        margin: 0.25rem 0 0;
    }
}