/* 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 {
    /* .asset-detail — container layout via page-wrapper group in atoms.css */

    /* 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);
        --card-color: var(--status-warn-fg);
    }
    .asset-hero[data-state="critical"] {
        background: var(--surface-crit);
        --card-color: var(--status-crit-fg);
    }

    .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__nameplate {
        color: var(--ink-soft);
        font-family: var(--font-data);
        font-size: 0.75rem;
        letter-spacing: 0.02em;
        margin: 0.15rem 0 0;
    }

    .asset-hero__nameplate strong {
        color: var(--ink);
        font-weight: 600;
    }

    .asset-hero__nameplate em {
        color: var(--ink-faint);
        font-style: italic;
    }

    .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: 0.25rem 0 0;
        text-transform: uppercase;
    }

    .asset-hero__side {
        align-items: stretch;
        display: flex;
        flex-direction: column;
        gap: 0.55rem;
        min-inline-size: 14rem;
        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;
        text-transform: none;
    }

    .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 layout lives in forms.css, shared with
       .form-hero__actions and .point-hero__actions so all three rails
       use the same grid-stacked, kbd-pinned chrome. */

    /* 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;
        }
    }

    /* 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;
    }

    /* Operation timeline strip — same vocabulary as the ON/OFF status chips in
       the section head: running is not an alarm, so no hue. ON is soft ink,
       OFF is faint ink, and the bare track showing through means no data. */
    .asset-operation__strip {
        background: var(--rule-soft);
        block-size: 1rem;
        border: 1px solid var(--rule-soft);
        margin-block: 0.75rem 0;
        overflow: hidden;
        position: relative;
    }

    .asset-operation__seg {
        background: var(--ink-soft);
        block-size: 100%;
        inset-inline-start: var(--seg-left);
        inline-size: var(--seg-width);
        position: absolute;
        top: 0;
    }

    .asset-operation__seg--off {
        background: var(--ink-faint);
    }

    .asset-operation__ticks-row {
        block-size: 1.1rem;
        container-type: inline-size;
        margin-block-end: 0.5rem;
        position: relative;
    }

    .asset-operation__tick-label {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.5625rem;
        inset-inline-start: var(--tick-x);
        letter-spacing: 0.08em;
        position: absolute;
        top: 0.15rem;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    /* Bookends sit flush at the strip edges, no translate, so labels stay
       inside the strip's footprint. */
    .asset-operation__tick-label--start { inset-inline-start: 0; transform: none; }
    .asset-operation__tick-label--end   { inset-inline-end: 0; inset-inline-start: auto; transform: none; }

    /* Between two label centres sit half of each label (a whole bookend
       width, hence the template's 1.5). The template hands over both gaps in
       strip percent and 1cqi of the ticks row turns them into pixels. With
       too little room on either side the max() collapses the label to zero
       width (a step, thanks to the * 1000); the Periods table below still
       carries the exact time. */
    .asset-operation__tick-label:not(.asset-operation__tick-label--start, .asset-operation__tick-label--end) {
        --tick-w: calc(var(--tick-chars, 12) * 0.68em);
        --tick-room: calc(min(
            var(--tick-gap-before, 100) * 1cqi - var(--tick-need-before, 1) * var(--tick-w),
            var(--tick-gap-after, 100) * 1cqi - var(--tick-need-after, 1) * var(--tick-w)
        ) - 1ch);
        max-inline-size: max(0px, var(--tick-room) * 1000);
        overflow: hidden;
    }

    .asset-operation__error {
        color: var(--status-crit-fg);
        font-family: var(--font-data);
        font-size: var(--text-x-small);
        letter-spacing: 0.08em;
        margin: 0.5rem 0 0;
        text-transform: uppercase;
    }

    .asset-operation__flip-form { margin: 0; }
    .asset-operation__flip-form .btn { white-space: nowrap; }

    /* Header placement (past window, no open row): same size as the table's
       ACTION button, pushed to the end of the section head. */
    .section-head .asset-operation__flip-form {
        align-self: center;
        font-size: 0.6875rem;
        margin-inline-start: auto;
    }

    /* "now" on the open row's TO cell, "—" on closed rows' ACTION cell. */
    .asset-operation__muted { color: var(--ink-faint); }

    /* The shared datasheet pass drops td[data-col=state] below 100ch, but
       here ON/OFF is the row's whole meaning and its header stays put, so
       hiding the cell shifted every value under the wrong heading. The
       ACTION column stays too: it holds the only flip control. */
    @media (max-width: 100ch) {
        .datasheet.asset-operation__table td[data-col="state"] { display: table-cell; }
        .datasheet.asset-operation__table thead th:last-child,
        .datasheet.asset-operation__table td[data-col="trigger"] { display: table-cell; }
    }

    .asset-operation__empty td {
        color: var(--ink-faint);
        font-style: italic;
        text-align: center;
    }

    /* 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;
    }

    /* -----------------------------------------------------------------------
       Three-column body layout — left sidebar · center · right thread pane
       ----------------------------------------------------------------------- */

    .asset-detail {
        text-align: start;
    }

    /* Sunken well that holds the three panes — creates visible contrast */
    .asset-body {
        display: grid;
        gap: 0;
        grid-template-columns: 1fr;
        margin-block-end: 2rem;
    }

    @media (min-width: 120ch) {
        .asset-body {
            align-items: start;
            grid-template-columns: 1fr 320px;
        }
    }

    .asset-pane {
        min-inline-size: 0;
    }

    /* Pane section — labeled block within the left pane */
    .asset-pane__section {
        border-block-end: 1px solid var(--rule-soft);
        padding: 0;
    }

    .asset-pane__section:last-child {
        border-block-end: none;
    }

    /* Each section head: blue-underlined, uppercase label */
    .asset-pane__section-head {
        align-items: center;
        background: var(--surface);
        border-block-end: 2px solid var(--primary);
        display: flex;
        gap: 0.5rem;
        padding: 0.6rem 1rem;
    }

    .asset-pane__section-title {
        color: var(--primary);
        font-family: var(--font-data);
        font-size: 0.6rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .asset-pane__section-action {
        margin-inline-start: auto;
    }

    /* Gallery thumbnail strip */
    .asset-gallery__thumbs {
        display: flex;
        gap: 0.35rem;
        overflow-x: auto;
        padding: 0.5rem;
        scrollbar-width: thin;
    }

    .asset-gallery__thumb {
        background: var(--surface-sunken);
        border: 2px solid transparent;
        border-radius: 2px;
        flex-shrink: 0;
        inline-size: 3.5rem;
        overflow: hidden;
        transition: border-color 0.1s ease-out;

        & img {
            aspect-ratio: 1;
            display: block;
            inline-size: 100%;
            object-fit: cover;
        }

        &:hover,
        &:focus-visible {
            border-color: var(--color-link);
        }
    }

    /* Connected sensors list */
    .asset-sensors {
        display: flex;
        flex-direction: column;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .asset-sensor-row {
        align-items: flex-start;
        border-block-end: 1px solid var(--rule-soft);
        display: grid;
        gap: 0.25rem 0.6rem;
        grid-template-columns: 1.25rem 1fr;
        padding: 0.6rem 1rem;

        &:last-child {
            border-block-end: none;
        }
    }

    .asset-sensor-row__icon {
        color: var(--ink-faint);
        margin-block-start: 0.1rem;

        & .icon {
            --icon-size: 0.875em;
        }
    }

    .asset-sensor-row__body {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
        min-inline-size: 0;
    }

    .asset-sensor-row__point {
        color: var(--ink);
        font-size: 0.8125rem;
        font-weight: 500;
        overflow: hidden;
        text-decoration: none;
        text-overflow: ellipsis;
        white-space: nowrap;

        &:hover { text-decoration: underline; }
    }

    .asset-sensor-row__source {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.6rem;
        letter-spacing: 0.04em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .asset-sensor-row__chip {
        background: var(--surface-sunken);
        border: 1px solid var(--rule-soft);
        border-radius: 2px;
        color: var(--ink-soft);
        font-family: var(--font-data);
        font-size: 0.55rem;
        letter-spacing: 0.08em;
        margin-inline-start: 0.4rem;
        padding: 0.1em 0.4em;
        text-transform: uppercase;
        vertical-align: middle;
        white-space: nowrap;
    }

    .asset-sensor-row__lastseen {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.6rem;
        letter-spacing: 0.04em;
        white-space: nowrap;
    }

    /* Documentation list */
    .asset-docs__list {
        display: flex;
        flex-direction: column;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .asset-doc-row {
        align-items: center;
        border-block-end: 1px solid var(--rule-soft);
        display: grid;
        gap: 0.4rem 0.6rem;
        grid-template-columns: 1.25rem 1fr auto;
        padding: 0.6rem 1rem;

        &:last-child {
            border-block-end: none;
        }
    }

    .asset-doc-row__icon {
        color: var(--ink-faint);
    }

    .asset-doc-row__body {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
        min-inline-size: 0;
    }

    .asset-doc-row__name {
        color: var(--color-link);
        font-size: 0.8125rem;
        overflow: hidden;
        text-decoration: none;
        text-overflow: ellipsis;
        white-space: nowrap;

        &:hover { text-decoration: underline; }
    }

    .asset-doc-row__meta {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.6rem;
        letter-spacing: 0.04em;
    }

    .asset-doc-row__delete {
        --btn-padding: 0.2rem;
        color: var(--ink-faint);
        transition: color 0.1s;

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

    .asset-docs__empty {
        color: var(--ink-faint);
        font-size: 0.8125rem;
        padding: 0.75rem 1rem;
    }

    .asset-docs__upload-form {
        display: contents;
    }

    /* ── Center pane: datasheet, operation, topology/files ──────────── */

    .asset-pane--center {
        display: flex;
        flex-direction: column;
    }

    .asset-pane--center .asset-section {
        padding-inline: 1rem;
    }

    .asset-pane__empty-note {
        color: var(--ink-faint);
        font-size: 0.8125rem;
        margin: 0;
        padding: 0.75rem 1rem;
    }

    /* Topology section: the machine body diagram on its own */
    .asset-topology__body {
        align-items: flex-start;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        padding: 0.75rem 1rem 1rem;
    }

    /* Attachments section: photo + document tile groups */
    .asset-attachments__body {
        display: flex;
        padding: 0.75rem 1rem 1rem;
    }

    .asset-topology__diagram {
        flex: 0 0 auto;
    }

    /* Combined file tile grid — two labelled groups separated by a vertical rule */
    .asset-files {
        display: flex;
        align-items: flex-start;
        flex: 1 1 120px;
        gap: 0.75rem;
    }

    .asset-files__group {
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
        min-inline-size: 0;
    }

    .asset-files__label {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.5rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .asset-files__tiles {
        display: flex;
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .asset-files__divider {
        align-self: stretch;
        background: var(--rule);
        flex: 0 0 1px;
        margin-block: 0.1rem;
    }

    .asset-file {
        align-items: center;
        aspect-ratio: 1;
        background: var(--surface-sunken);
        border: 2px solid transparent;
        border-radius: 2px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        inline-size: 3.5rem;
        justify-content: center;
        overflow: hidden;
        text-decoration: none;
        transition: border-color 0.1s ease-out;

        &:hover, &:focus-visible {
            border-color: var(--color-link);
            outline: none;
        }

        & img {
            block-size: 100%;
            display: block;
            inline-size: 100%;
            object-fit: cover;
        }
    }

    .asset-file--pdf,
    .asset-file--file {
        color: var(--ink-soft);
    }

    .asset-file__icon {
        --icon-size: 1.25em;
        color: var(--ink-faint);
    }

    .asset-file__label {
        font-family: var(--font-data);
        font-size: 0.5rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .asset-file--add {
        border-style: dashed;
        border-color: var(--rule);
        color: var(--ink-faint);
        cursor: pointer;

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

    .asset-file__upload-form {
        display: contents;
    }

    /* PDF viewer inside lightbox — same sizing as .lightbox__image so it
       fills the stage as an in-flow flex item and gives the stage height. */
    .lightbox__pdf {
        block-size: 80vh;
        display: block;
        inline-size: 100%;
    }

    /* Widen the figure when a PDF is active — embeds have no natural aspect
       ratio to pull the figure wide the way images do. */
    .lightbox__figure:has(.lightbox__pdf:not([hidden])) {
        min-inline-size: min(80vw, 56rem);
    }

    /* File-stub (no-preview) panel inside lightbox */
    .lightbox__file-stub {
        align-items: center;
        color: var(--ink-soft);
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        inset: 0;
        justify-content: center;
        padding: 2rem;
        position: absolute;
        text-align: center;
    }

    .lightbox__file-stub-icon {
        --icon-size: 3rem;
        color: var(--ink-faint);
        opacity: 0.6;
    }

    .lightbox__file-stub-name {
        font-size: 0.875rem;
        margin: 0;
        word-break: break-all;
    }

    /* Inline chart row inside each datasheet <tbody> group */
    .datasheet__chart-row > td {
        border-block-start: none;
        padding: 0;
    }

    .datasheet__chart-canvas {
        block-size: 160px;
    }

    /* Stands in for the chart when a group has no reading to plot */
    /* (mono + size inherited from .datasheet; padding matches its cells) */
    .datasheet__chart-empty {
        color: var(--ink-soft);
        margin: 0;
        padding: 0.4rem 0.55rem;
    }

    /* ── Right pane: comments, then activity ─────────────────────────── */

    .asset-pane--right {
        display: flex;
        flex-direction: column;
        gap: 1.75rem;
    }

    @media (min-width: 120ch) {
        .asset-pane--right {
            border-inline-start: 1px solid var(--rule-soft);
        }
    }

    /* .comments is designed for full-width pages (centered, max 70ch).
       Override so everything sits flush inside the narrow right pane. */
    .asset-pane--right > .comments {
        overflow: hidden;
        padding-inline: 0;
        place-items: stretch;
        text-align: start;
    }

    .asset-pane--right > .comments .comment {
        inline-size: 100%;
        margin-inline: 0;
        max-inline-size: none;
        min-inline-size: 0;
    }

    /* Posted notes: the activity-row card too. The author is named in the
       byline, so the overhanging avatar goes (it also clipped at the edge). */
    .asset-pane--right > .comments .comment:not(.comment--new) {
        .comment__avatar {
            display: none;
        }

        .comment__content {
            background: var(--surface);
            border: 1px solid var(--rule-soft);
            border-radius: 0;
            box-shadow: inset 3px 0 0 var(--rule);
            font-family: var(--font-body);
            font-size: 0.8125rem;
            max-inline-size: none;
            padding: 0.55rem 0.85rem 0.55rem 1.05rem;
        }

        /* The h3 carries .txt-normal (@layer utilities), so size its name instead. */
        .comment__author strong {
            font-size: 0.8125rem;
        }

        .comment__permalink-title {
            color: var(--ink-faint);
            font-size: 0.6rem;
            letter-spacing: 0.08em;
            opacity: 1;
        }

        /* No reactions on this page, so no spacer for the reaction button. */
        .action-text-content > p:last-child::after {
            content: none;
        }

        /* .badge is a fixed-size circle; this one is a text chip. */
        .badge--reference {
            aspect-ratio: auto;
            background: none;
            block-size: auto;
            display: inline-flex;
            inline-size: auto;
            border: 1px solid var(--rule);
            border-radius: var(--radius-sm, 4px);
            color: var(--ink-soft);
            font-size: 0.75rem;
        }
    }

    /* Note composer: the same card as the activity rows below it
       (surface, hairline, left stripe, body face at row size). */
    .asset-pane--right .comment--new {
        background: var(--surface);
        border: 1px solid var(--rule-soft);
        box-shadow: inset 3px 0 0 var(--rule);
        font-family: var(--font-body);
        font-size: 0.8125rem;
        padding: 0.55rem 0.85rem 0.55rem 1.05rem;
        transition: border-color 120ms ease-out;

        &:focus-within {
            border-color: var(--primary);
        }

        /* Focused only to hold :focus-within; the border already shows it. */
        &:focus {
            outline: none;
        }

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

        trix-toolbar {
            border-block-end: 1px solid var(--rule-soft);
            margin-inline: 0;
            padding-inline: 0;
        }

        trix-editor {
            margin-inline: 0;
            min-block-size: calc(4lh + 0.5em);
            padding: 0.25em 0;
        }

        .comment-compose__references summary {
            color: var(--ink-faint);
            font-size: inherit;
        }
    }

    /* Rests as a one-line field; focus, text, an open reference list, a
       checked point or an error opens the toolbar, references and Post.
       summary:active holds it open mid-click: Safari doesn't focus a clicked
       <summary>, so focus drops to <body> on mousedown and the summary
       would vanish before the click lands. (Not the card's :active: that
       would expand the collapsed field on press, under the pointer.) */
    .asset-pane--right .comment--new:not(:focus-within):has(trix-editor:empty):not(:has(summary:active, details[open], input:checked, .form-field__error)) {
        cursor: text;

        .comment-compose__references {
            display: none;
        }

        /* !important: Trix injects an unlayered `trix-toolbar { display: block }`,
           and the Post wrapper's .flex-inline lives in @layer utilities. Hiding the
           wrapper, not just the button, leaves no flex gap behind. */
        trix-toolbar,
        form > :has(> .comment__submit) {
            display: none !important;
        }

        /* The editor takes the card's padding so a click anywhere on the field
           lands in it. The placeholder is absolutely positioned, so reserve a line. */
        padding: 0;

        trix-editor {
            min-block-size: calc(1lh + 1.1rem);
            padding: 0.55rem 0.85rem 0.55rem 1.05rem;
        }
    }

    /* Activity log */
    .activity-log {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* dot + description on first row, timestamp wraps below the description */
    .activity-row {
        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-areas:
            "dot text"
            ".   time";
        grid-template-columns: 0.5rem 1fr;
        padding-block: 0.6rem;
    }

    .activity-row__dot {
        align-self: start;
        background: var(--ink-mute);
        display: block;
        grid-area: dot;
        height: 0.5rem;
        margin-block-start: 0.25em;
        width: 0.5rem;
    }

    .activity-row__text {
        grid-area: text;
    }

    .activity-row__time {
        color: var(--ink-faint);
        font-family: var(--font-data);
        font-size: 0.6rem;
        grid-area: time;
        letter-spacing: 0.08em;
        margin-block-start: 0.2rem;
        text-transform: uppercase;
    }

    .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); }

    /* Open issues pinned above the history; a firmer rule closes them off. */
    .activity-log--pinned > .activity-row:last-child {
        border-block-end-color: var(--rule-strong);
    }

    /* Unresolved-issue row: resolve control in a right-hand column. */
    .activity-row--nc {
        grid-template-areas:
            "dot text action"
            ".   time action";
        grid-template-columns: 0.5rem 1fr auto;

        .activity-row__text > a {
            color: inherit;
            text-decoration: none;

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

    .activity-row__action {
        align-self: center;
        grid-area: action;
    }

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

    .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;
    }
}