/* ============================================================================
   admin-insights.css — the testing-insights dashboard (INS, WF-34…WF-36):
   the range bar, tabs, stat tiles, and the four in-house charts (INS-R12).
   Token-bound only (F-R01, INS-R13): charts bind the viz-* roles and nothing
   else, and nothing here animates.
   ========================================================================== */

.ins {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.ins-h {
    margin: 0 0 var(--space-md);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-heading);
}

.ins-section {
    min-width: 0;
}

.ins-note {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* --- Range bar (WF-34 ①): the range and the test-install choice, as links --- */
.ins-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm) var(--space-xl);
}

.ins-range {
    display: inline-flex;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-control);
    overflow: hidden;
}

.ins-range__item {
    min-width: 48px;
    padding: 6px var(--space-md);
    color: var(--text-secondary);
    font-family: var(--font-numeric);
    font-size: var(--font-size--1);
    text-align: center;
    text-decoration: none;
}

.ins-range__item + .ins-range__item {
    border-inline-start: 1px solid var(--border-hairline);
}

a.ins-range__item:hover {
    background-color: var(--surface-hover);
    color: var(--text-primary);
}

/* The current choice reads by weight and an underline, never by color alone. */
.ins-range__item--current {
    background-color: var(--surface-raised);
    color: var(--text-primary);
    font-weight: 700;
    box-shadow: inset 0 -2px 0 var(--border-emphasis);
}

.ins-bar__note {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* --- Tabs: links, because the tab rides the URL (ADN-R10). The insights product
       page's panels (WF-35 ①) and the licenses admin's two tabs (ALC-R08) are the
       same control, so they share one set of rules under two names. --- */
.ins-tabs,
.adm-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    border-bottom: 1px solid var(--border-hairline);
}

.ins-tabs__tab,
.adm-tabs__tab {
    padding: var(--space-sm) var(--space-lg);
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

a.ins-tabs__tab:hover,
a.adm-tabs__tab:hover {
    color: var(--text-primary);
    background-color: var(--surface-hover);
}

.ins-tabs__tab--current,
.adm-tabs__tab--current {
    color: var(--text-primary);
    font-weight: 600;
    border-bottom-color: var(--border-emphasis);
}

/* The licenses admin: its tabs, then the tab's own content, spaced as the insights pages are. */
.lic {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* --- Stat tiles (WF-34 ②). The row is a grid, so tiles in one row are the same
       height however long a definition runs (INS-R01). --- */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-md);
}

.stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
    padding: var(--container-pad-dense);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
}

.stat__label,
.stat__value,
.stat__counts,
.stat__def {
    margin: 0;
}

.stat__label {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

.stat__value {
    color: var(--text-primary-on-raised);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-3);
    line-height: 1.2;
}

.stat__value a {
    color: inherit;
}

.stat__counts {
    color: var(--text-primary-on-raised);
    font-size: var(--font-size--1);
}

/* INS-R01: the definition is always visible, 12px, under the value. */
.stat__def {
    margin-top: auto;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.4;
}

/* --- Charts (INS-R12…R14): inline SVG that scales with its column --- */
.chart {
    margin: 0;
    min-width: 0;
}

.chart__title {
    margin: 0 0 var(--space-sm);
    color: var(--text-primary);
    font-size: var(--font-size-0);
    font-weight: 600;
}

/* A chart keeps a width its type can be read at. In a narrower column it scrolls
   sideways in its own box (F-R17 names insights charts as scroll regions) instead
   of shrinking until the axis labels are specks. */
.chart__scroll {
    max-width: 880px;
    overflow-x: auto;
}

.chart__svg {
    display: block;
    width: 100%;
    min-width: 640px;
    height: auto;
}

.chart__empty {
    margin: 0;
    padding: var(--space-xl) var(--space-lg);
    color: var(--text-secondary);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
}

.chart__plot {
    fill: var(--viz-plot-bg);
}

.chart__grid {
    stroke: var(--viz-grid);
    stroke-width: 1;
    stroke-opacity: 0.4;
}

.chart__tick,
.chart__axis,
.chart__label,
.chart__value,
.chart__edge {
    font-family: var(--font-numeric);
    font-size: 11px;
    fill: var(--text-secondary);
}

.chart__axis {
    font-size: 12px;
}

.chart__label,
.chart__value,
.chart__edge {
    fill: var(--text-primary);
}

.chart__line {
    fill: none;
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.chart__mark {
    stroke: var(--viz-plot-bg);
    stroke-width: 1;
}

/* A band's own edge is drawn in the plot color, so two bands never run together. */
.chart__band {
    stroke: var(--viz-plot-bg);
    stroke-width: 1;
}

/* The eight series colors (SC §2.1); a chart never extends this ramp. */
.chart__s1 { stroke: var(--viz-series-1); }
.chart__s2 { stroke: var(--viz-series-2); }
.chart__s3 { stroke: var(--viz-series-3); }
.chart__s4 { stroke: var(--viz-series-4); }
.chart__s5 { stroke: var(--viz-series-5); }
.chart__s6 { stroke: var(--viz-series-6); }
.chart__s7 { stroke: var(--viz-series-7); }
.chart__s8 { stroke: var(--viz-series-8); }

.chart__mark.chart__s1, .chart__band.chart__s1, .chart__bar.chart__s1 { fill: var(--viz-series-1); }
.chart__mark.chart__s2, .chart__band.chart__s2 { fill: var(--viz-series-2); }
.chart__mark.chart__s3, .chart__band.chart__s3 { fill: var(--viz-series-3); }
.chart__mark.chart__s4, .chart__band.chart__s4 { fill: var(--viz-series-4); }
.chart__mark.chart__s5, .chart__band.chart__s5 { fill: var(--viz-series-5); }
.chart__mark.chart__s6, .chart__band.chart__s6 { fill: var(--viz-series-6); }
.chart__mark.chart__s7, .chart__band.chart__s7 { fill: var(--viz-series-7); }
.chart__mark.chart__s8, .chart__band.chart__s8 { fill: var(--viz-series-8); }

.chart__mark,
.chart__band,
.chart__bar {
    stroke: var(--viz-plot-bg);
}

.chart__bar {
    stroke-width: 0;
}

/* Beyond color (INS-R13): each line also has its own dash. */
.chart__dash1 { stroke-dasharray: none; }
.chart__dash2 { stroke-dasharray: 7 4; }
.chart__dash3 { stroke-dasharray: 2 4; }
.chart__dash4 { stroke-dasharray: 9 3 2 3; }

.chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-lg);
    margin: var(--space-sm) 0 0;
    padding: 0;
    list-style: none;
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

.chart__legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.chart__key {
    width: 32px;
    height: 12px;
    flex: none;
    background-color: var(--viz-plot-bg);
    border-radius: 2px;
}

.chart--area .chart__key {
    width: 14px;
}

.chart__data {
    margin-top: var(--space-sm);
}

.chart__data-toggle {
    width: fit-content;
    color: var(--accent);
    font-size: var(--font-size--1);
    cursor: pointer;
}

.chart__tablewrap {
    max-height: 320px;
    margin-top: var(--space-sm);
    overflow: auto;
}

/* The data table sizes to its content and scrolls in its wrapper (INS-R14): a
   fixed layout would squeeze ten version columns into slivers on a phone. */
.chart__table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
}

.chart__table th,
.chart__table td {
    white-space: nowrap;
}

/* Numbers line up on their last digit (the admin table's own rule sets every cell left). */
.chart__table .adm-num {
    text-align: right;
}

/* A name and its number: two columns that fit any width, so a long name wraps
   rather than pushing its number out of sight. */
.chart__table--pairs {
    width: 100%;
}

.chart__table--pairs th,
.chart__table--pairs td {
    white-space: normal;
    overflow-wrap: anywhere;
}

.chart__rowhead {
    position: static;
    background: none;
    color: var(--text-primary);
    font-family: var(--font-numeric);
    font-size: var(--font-size--1);
    font-weight: 400;
}

/* --- Funnel (INS-R12: a list, not a drawing) --- */
.funnel__list {
    display: grid;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: funnel;
}

.funnel__stage {
    display: grid;
    grid-template-columns: minmax(0, 14rem) 6rem minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-control);
    counter-increment: funnel;
}

.funnel__label::before {
    content: counter(funnel) ". ";
    color: var(--text-secondary);
}

.funnel__count {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.funnel__drop {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

@media (max-width: 767px) {
    .funnel__stage {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .funnel__drop {
        grid-column: 1 / -1;
    }
}

/* ============================================================================
   The crash drill (INS-R09…R11, WF-36): a product's
   crash groups, one group's reports, and one report. Token-bound only (F-R01),
   and nothing here animates.
   ========================================================================== */

/* --- Shared lines --- */

/* A group's or a report's title line (ADN-R11). Signatures and summaries are
   identifiers that can run long: two lines, then the clamp, the whole value in the
   element's title (F-R15). */
.crash-heading {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-family: var(--font-numeric);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-heading);
    overflow-wrap: anywhere;
}

/* TCC-R06: a session marker's attribution is stated at the top, prominently — a host
   crash is never presented as ours. The warning roles carry it, and the words do too. */
.crash-attribution {
    margin: 0;
    max-width: var(--measure-prose-max);
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--status-warning-border);
    border-left-width: 4px;
    border-radius: var(--radius-control);
    background-color: var(--status-warning-surface);
    color: var(--text-primary-on-raised);
    font-weight: 600;
}

/* TEL-R05: the investigation hold, visible on the reports it covers. */
.crash-held {
    margin: 0;
    max-width: var(--measure-prose-max);
    padding: var(--space-sm) var(--space-md);
    border-left: 2px solid var(--status-info-border);
    background-color: var(--status-info-surface);
    color: var(--text-primary-on-raised);
    font-size: var(--font-size--1);
}

/* Aged-out (TEL-R05) and the other one-line states: running text at the measure. */
.crash-aged,
.crash-line {
    margin: 0;
    max-width: var(--measure-prose);
    color: var(--text-secondary);
}

.crash-aged {
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
    background-color: var(--surface-raised);
}

/* --- Facts: label over value, in a grid that wraps to the pane --- */
.crash-facts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-md) var(--space-xl);
    margin: 0;
}

.crash-facts__item {
    min-width: 0;
}

.crash-facts dt {
    color: var(--text-secondary);
    font-size: 12px;
}

.crash-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* F-R08: versions, ids and counts take the numeric face. */
.crash-facts__num {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

/* --- Groups table (INS-R09) --- */
/* The clamped signature wraps inside its cell rather than widening the table. */
.crash-sig {
    display: block;
    font-family: var(--font-numeric);
    font-size: var(--font-size--1);
    overflow-wrap: anywhere;
}

.crash-sig__note {
    display: block;
    margin-top: var(--space-xs);
    color: var(--status-warning-text);
    font-size: 12px;
}

/* F-R15: a multi-line home clamps at two lines; every version is in the title. */
.crash-versions {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-family: var(--font-numeric);
    font-size: var(--font-size--1);
}

/* --- One group: the status control (INS-R09) --- */
.crash-status__set {
    display: grid;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    border: none;
}

.crash-status__choice {
    display: grid;
    grid-template-columns: 24px minmax(8rem, max-content) minmax(0, 1fr);
    align-items: baseline;
    gap: var(--space-sm);
    min-height: 24px;
    cursor: pointer;
}

.crash-status__choice input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.crash-status__name {
    color: var(--text-primary);
    font-weight: 600;
}

.crash-status__meaning {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

.crash-status__actions {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-md);
}

/* --- One group: its reports --- */
.crash-reports {
    min-width: 720px;
}

.crash-reports__version,
.crash-machine {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--1);
}

.crash-machine {
    margin-right: var(--space-sm);
}

/* --- One report (INS-R10) --- */
.crash-report__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.crash-report__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin: 0;
}

.crash-env {
    display: grid;
    gap: var(--space-xl);
}

.crash-env__h {
    margin: 0 0 var(--space-sm);
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    font-weight: 600;
}

/* The stack: one frame a line, the name first, where it sits after it. */
.crash-stack {
    display: grid;
    gap: var(--space-xs);
    margin: 0;
    padding-left: var(--space-2xl);
    font-family: var(--font-numeric);
    font-size: var(--font-size--1);
}

.crash-stack__note {
    margin-bottom: var(--space-sm);
}

.crash-frame {
    overflow-wrap: anywhere;
}

.crash-frame__name {
    color: var(--text-primary);
    font-family: inherit;
}

.crash-frame__where {
    margin-left: var(--space-md);
    color: var(--text-secondary);
}

.crash-stack__all {
    margin-top: var(--space-sm);
}

.crash-crumbs {
    display: grid;
    gap: var(--space-xs);
    margin: 0;
    padding-left: var(--space-2xl);
    font-size: var(--font-size--1);
}

.crash-crumbs__id {
    font-family: var(--font-numeric);
}

/* The log tail (INS-R10, F-R17): about two hundred lines visible, then the box scrolls
   on its own. It is in the tab order so a keyboard can scroll it, keeps its scrollbar,
   and fades at whichever edge has more text — the fades are backgrounds attached to the
   content, so they show only where it actually overflows. */
.crash-log {
    max-height: calc(200 * 1.45 * var(--font-size--1));
    max-height: 200lh;
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
    background-color: var(--surface-deep);
    background-image:
        linear-gradient(to bottom, var(--surface-deep), transparent 24px),
        linear-gradient(to top, var(--surface-deep), transparent 24px),
        linear-gradient(to bottom, var(--scrim), transparent 24px),
        linear-gradient(to top, var(--scrim), transparent 24px);
    background-position: center top, center bottom, center top, center bottom;
    background-repeat: no-repeat;
    background-size: 100% 24px, 100% 24px, 100% 12px, 100% 12px;
    background-attachment: local, local, scroll, scroll;
    font-size: var(--font-size--1);
    line-height: 1.45;
}

.crash-log:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.crash-log__text {
    margin: 0;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-numeric);
    font-size: inherit;
    line-height: inherit;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* --- The deliberate acts (WF-36 ⑥) --- */
.crash-context .crash-facts {
    margin-bottom: var(--space-sm);
}

.crash-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.crash-dump {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    margin: 0;
}

.crash-dump__size {
    color: var(--text-secondary);
    font-family: var(--font-numeric);
    font-size: var(--font-size--1);
}

.crash-reveal__who {
    margin: 0;
}

.crash-reveal__email {
    font-weight: 600;
}

/* ============================================================================
   The insights overview's product cards and the Adoption and Stability panels
   (INS-R03, INS-R05, INS-R06; WF-34, WF-35), built on the classes above (.ins,
   .ins-h, .ins-note, .stat-row, .chart). Token-bound only (F-R01), and nothing
   here animates.
   ========================================================================== */

/* --- A product panel and its channel blocks: one column, sections spaced apart --- */
.ins-panel,
.ins-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    min-width: 0;
}

/* In a flex column the heading's own margin would add to the gap; the gap alone spaces it. */
.ins-block > .ins-h {
    margin: 0;
}

.ins-block__part {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 0;
}

/* A block's own subheading sits under the block's .ins-h. */
.ins-subh {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-size-0);
    font-weight: 600;
}

/* --- Product cards (WF-34 ③): one per row, the four numbers side by side --- */
.ins-cards {
    display: grid;
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ins-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
    padding: var(--container-pad-dense);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
}

.ins-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
}

.ins-card__name {
    margin: 0;
    color: var(--text-primary-on-raised);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-heading);
}

/* F-R08: the version chip is a number-dense string. */
.ins-card .chp--version {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

.ins-card__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-md);
    margin: 0;
}

.ins-card__stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    min-width: 0;
}

.ins-card__stat dt {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

.ins-card__stat dd {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: 0;
}

.ins-card__value {
    width: fit-content;
    color: var(--text-primary-on-raised);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size-2);
    line-height: 1.2;
}

/* The second line under a number: raw counts beside a dash, or the release figure. */
.ins-card__extra {
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.4;
}

.ins-card__empty {
    margin: 0;
    max-width: var(--measure-prose);
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

.ins-card__open {
    align-self: flex-start;
}

/* --- Per-version stability table (WF-35 ②) --- */
.ins-vtable {
    min-width: 640px;
}

/* Numbers line up on their last digit; the admin table's own rule sets every cell left. */
.ins-vtable .adm-num {
    text-align: right;
}

/* The version is the row's header, so it must not take the sticky header treatment. */
.ins-vtable .ins-vtable__version {
    position: static;
    background: none;
    color: var(--text-primary);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--1);
    font-weight: 400;
}

.ins-vtable__counts {
    display: block;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 12px;
    white-space: nowrap;
}

/* --- Top crash groups (WF-35 ④): a ranked list, signature first --- */
.ins-groups {
    display: grid;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ins-group {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: baseline;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-control);
}

/* F-R15: one line, ellipsis at the edge of the column; the whole signature is in title. */
.ins-group__sig {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--font-numeric);
    font-size: var(--font-size--1);
}

.ins-group__kind,
.ins-group__counts {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    white-space: nowrap;
}

.ins-group__counts {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
    .ins-group {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-xs);
    }
}

/* The installs list behind "Active installs" (/admin/insights/{slug}/installs,
   M8: INS-R02, ADN-R08..R11). Token-bound only (F-R01).

   The table is the shared admin record table (chrome.css) and the row controls are the
   shared .adm-move / .adm-rowactions pair (admin-editors.css). This file adds only what
   an install row needs that the other tables do not: its column widths, the machine
   cell's two lines, and the words that say a marked install is not in the numbers. The
   column classes carry this page's own prefix, so no other table's can collide with them.

   As in the sibling admin sheets, the bare pixel values here are column-width
   contract (SC §2.6), not stray literals. */

/* --- Columns ---------------------------------------------------------------
   Fixed, so a row that changes in place (marked, unmarked, purged) never moves a
   column under the cursor (ADN-R08). The machine cell takes what the eight others
   leave; below the table's floor the wrap scrolls (F-R17) rather than letting the
   machine id collapse. The one admin table that keeps a fixed layout on purpose: the
   shared table sizes columns to their content (chrome.css), which would let a row
   that changes in place move a column. */
.adm-table.adm-table--installs {
    min-width: 1000px;
    table-layout: fixed;
}

/* Sized so the whole row, its controls included, fits a 1280 px window with the rail
   open (about 1,024 px of pane): a control that needs a sideways scroll to reach is a
   control nobody finds. */
.ins-inst__col--platform { width: 84px; }
.ins-inst__col--channel { width: 64px; }
.ins-inst__col--version { width: 100px; }
.ins-inst__col--sessions { width: 92px; }
.ins-inst__col--reports { width: 88px; }
.ins-inst__col--lastsent { width: 140px; }
.ins-inst__col--testing { width: 108px; }
.ins-inst__col--installactions { width: 204px; }

/* Numbers line up on their last digit (F-R08), in the same smaller numeric size as the
   moment beside them, so a pre-release version fits its column. The shared table sets
   every cell left with a selector the numeric class alone cannot outweigh, so this one
   is more specific. */
.adm-table--installs .adm-table__num {
    text-align: right;
    font-size: var(--font-size--1);
}

/* The moment may wrap: the no-script text says UTC out loud and is longer than the
   column, while the viewer-local text script puts in its place is short. */
.adm-table--installs .adm-table__when {
    white-space: normal;
}

/* The count above the table sits clear of it. */
.ins-inst__count {
    margin-bottom: var(--space-md);
}

/* --- Machine cell ----------------------------------------------------------
   The id in the numeric face (F-R08); under it, only on the signed-in
   administrator's own machine, the name, which is a person's own text and so
   wraps rather than widening the column (F-R15). */
.ins-inst__id {
    font-family: var(--font-numeric);
    font-size: var(--font-size--1);
}

.ins-inst__yours {
    display: block;
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    overflow-wrap: anywhere;
}

/* --- Testing cell ----------------------------------------------------------
   The chip says the install is ours; under it the plain words say the numbers
   leave it out. Words, not color, carry the fact. */
.ins-inst__testing {
    white-space: nowrap;
}

/* Under the chip, on a line of its own: the column stays narrow, and the two never
   compete for one line. */
.ins-inst__not-counted {
    display: block;
    margin-top: var(--space-xs);
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* --- Actions ---------------------------------------------------------------
   Named acts are wider than the shared control was sized for, so the cell wraps
   them instead of pushing the table wider. */
.adm-table--installs .adm-rowactions {
    flex-wrap: wrap;
    row-gap: var(--space-xs);
}

.ins-inst__action {
    padding: 0 var(--space-sm);
    white-space: nowrap;
}

/* ============================================================================
   The insights Downloads and Engagement panels and the download rows page
   (INS-R07, INS-R08, WF-35 ⑤). Token-bound only (F-R01). Built on the .ins,
   .ins-h, .ins-note, .stat and chart rules above and on the shared admin table.
   ========================================================================== */

/* --- Shared bits ----------------------------------------------------------- */

/* A heading inside a panel section, one step below .ins-h. */
.ins-subh {
    margin: var(--space-lg) 0 var(--space-sm);
    color: var(--text-primary);
    font-size: var(--font-size--1);
    font-weight: 600;
}

/* F-R16: a version reads in the numeric face; build metadata lives in its title. */
.ins-version {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

/* --- Downloads panel ------------------------------------------------------- */

.ins-dl-scope {
    margin-top: var(--space-sm);
}

/* Five columns and three: both read well narrower than the record table's 720px
   floor, and still scroll in their own container below this (INS-R14). */
.ins-dl-table {
    min-width: 480px;
}

.ins-dl-table th.adm-num {
    text-align: right;
}

.ins-dl-email {
    overflow-wrap: anywhere;
}

.ins-dl-email--gone {
    color: var(--text-secondary);
    font-style: italic;
}

/* --- Engagement panel ------------------------------------------------------ */

.ins-funnel-note {
    margin-top: var(--space-sm);
}

/* The two quiet lists side by side, each labeled by its own condition; one
   column on a narrow screen. Never merged into one list. */
.ins-quiet {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg) var(--space-xl);
}

.ins-quiet__group {
    min-width: 0;
    padding: var(--container-pad-dense);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
}

.ins-quiet__group .ins-subh {
    margin-top: 0;
}

.ins-quiet__count {
    margin: 0 0 var(--space-sm);
    color: var(--text-secondary);
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-size: var(--font-size--1);
}

.ins-quiet__list {
    display: grid;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--font-size--1);
    overflow-wrap: anywhere;
}

.ins-quiet__more {
    margin: var(--space-sm) 0 0;
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* Inside a quiet card the empty state needs no three-row floor: the card is the frame. */
.ins-quiet__group .adm-empty {
    min-height: 0;
    justify-content: flex-start;
    text-align: left;
    font-size: var(--font-size--1);
}

.ins-feedback-total {
    margin: 0 0 var(--space-md);
}

/* By status and by kind: two short name-and-count tables, side by side. */
.ins-counts {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-lg) var(--space-xl);
    margin-bottom: var(--space-sm);
}

.ins-counts__table {
    width: auto;
    min-width: 220px;
    table-layout: auto;
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
}

.ins-counts__table th[scope="row"] {
    position: static;
    background: none;
    color: var(--text-primary);
    font-size: var(--font-size--1);
    font-weight: 400;
}

.ins-counts__table .adm-num {
    text-align: right;
}

.ins-counts__caption {
    padding-bottom: var(--space-xs);
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    text-align: left;
}

.ins-reports {
    display: grid;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ins-reports__item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs) var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-control);
}

.ins-reports__title {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ins-reports__meta {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* --- Download rows page ---------------------------------------------------- */

.ins-filterline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs) var(--space-md);
    margin: 0;
}

.ins-filterline__text {
    overflow-wrap: anywhere;
}

.ins-rows-table__file,
.ins-rows-table__account {
    overflow-wrap: anywhere;
}

.ins-rows-table__file {
    font-family: var(--font-numeric);
    font-size: var(--font-size--1);
}