/* AstroLoop 20260909-remaining-tabs-readability-1. Presentation only.
 * Eight owned page roots; no shell, navigation, Inspector or model changes.
 * Fixed-coordinate diagrams retain their coordinate systems and hit targets.
 */
html body :is(#al-act3-root, #al-res4-root, .al-ch-page, .fp-console, #al-os3-root, .al-cv, .al-dtm, .hm-page) {
    container: remaining-readability / inline-size;
    font: 14px/1.45 Roboto, Arial, sans-serif;
    color: #f1f3f4;
    min-width: 0 !important;
    max-width: 100%;
    overflow-wrap: anywhere;
}
/* Retain the Food console's existing named-container rules. */
html body .fp-console { container-name: remaining-readability food-console; }
html body #al-act3-root { --act-text-3: #d6dcdf; --act-text-4: #d6dcdf; }
html body #al-res4-root { --res-text3: #d6dcdf; --res-text4: #d6dcdf; }
html body #al-os3-root { --os-text3: #d6dcdf; --os-text4: #d6dcdf; }
html body .fp-console { --fp-muted: #d6dcdf; }
html body .hm-page { --hm-muted: #d6dcdf; --hm-dim: #d6dcdf; }
html body :is(#al-act3-root, #al-res4-root, .al-ch-page, .fp-console, #al-os3-root, .al-cv, .al-dtm, .hm-page) :not(svg, svg *) {
    box-sizing: border-box;
    font-size: 14px !important;
    line-height: 1.45;
    min-width: 0;
}
html body :is(#al-act3-root, #al-res4-root, .al-ch-page, .fp-console, #al-os3-root, .al-cv, .al-dtm, .hm-page) :is(button, select, input) {
    max-width: 100%;
}
html body :is(#al-act3-root, #al-res4-root, .al-ch-page, .fp-console, #al-os3-root, .al-cv, .al-dtm, .hm-page) :is(p, small, label, dt, th) {
    color: #d6dcdf;
}
html body :is(#al-act3-root, #al-res4-root, .al-ch-page, .fp-console, #al-os3-root, .al-cv, .al-dtm, .hm-page) :is(h2, h3),
html body #al-act3-root .al-act3-panel-heading,
html body #al-res4-root .al-res4-panel-title,
html body #al-res4-root .al-res4-panel-title > span:first-child,
html body .al-ch-page .al-ch-panel-title,
html body #al-os3-root .al-os3-panel-title,
html body #al-os3-root .al-os3-panel-title > span:first-child,
html body .al-cv .al-cv__panel-title,
html body .al-dtm .al-dtm__details-heading strong {
    font-size: 18px !important;
    line-height: 1.35;
    color: #f1f3f4;
}
/* Preserve the existing larger title scale, even in hidden inner headings. */
html body :is(#al-act3-root, #al-res4-root, .al-ch-page, .fp-console, #al-os3-root, .al-cv, .al-dtm, .hm-page) h1 { font-size: 28px !important; }
html body .al-dtm .al-dtm__zone-name { font-size: 19px !important; }
html body #al-act3-root :is(.al-act3-kpi-value, .al-act3-donut-number),
html body #al-res4-root .al-res4-card-value,
html body .al-ch-page .al-ch-kpi strong,
html body .fp-console .fp-kpi-value,
html body #al-os3-root :is(.al-os3-kpi-value, .al-os3-donut-value),
html body .al-cv .al-cv__kpi-value,
html body .al-dtm .al-dtm-card__value,
html body .hm-page :is(.hm-kpis strong, .hm-donut strong) {
    font-size: 28px !important;
    line-height: 1.2;
    white-space: normal !important;
    overflow-wrap: anywhere;
    overflow: visible;
    text-overflow: clip;
}
/* Match the common rule's mixed-ID specificity on class-root pages too. */
html body :is(#al-act3-root, #al-res4-root, .al-ch-page, .fp-console, #al-os3-root, .al-cv, .al-dtm, .hm-page)
    :is(.al-act3-kpi-value, .al-act3-donut-number, .al-res4-card-value, .al-ch-kpi strong, .fp-kpi-value, .al-os3-kpi-value, .al-os3-donut-value, .al-cv__kpi-value, .al-dtm-card__value, .hm-kpis strong, .hm-donut strong) {
    font-size: 28px !important;
}
html body :is(#al-act3-root, #al-res4-root, .al-ch-page, .fp-console, #al-os3-root, .al-cv, .al-dtm, .hm-page)
    :is(.al-act3-panel-heading, .al-res4-panel-title, .al-res4-panel-title > span:first-child, .al-ch-panel-title, .al-os3-panel-title, .al-os3-panel-title > span:first-child, .al-cv__panel-title, .al-dtm__details-heading strong) {
    font-size: 18px !important;
}
html body :is(#al-act3-root, #al-res4-root, .al-ch-page, .fp-console, #al-os3-root, .al-cv, .al-dtm, .hm-page) .al-dtm__zone-name { font-size: 19px !important; }
html body #al-act3-root :is(.al-act3-kpi-name, .al-act3-kpi-detail, .al-act3-kpi-foot, .al-act3-meta-name, .al-act3-label),
html body #al-res4-root :is(.al-res4-card-name, .al-res4-card-foot, .al-res4-meta-name, .al-res4-panel-note),
html body .fp-console :is(.fp-kpi-label, .fp-kpi-note, .fp-note, .fp-metric-source, .fp-metric-range),
html body #al-os3-root :is(.al-os3-kpi-name, .al-os3-kpi-foot, .al-os3-panel-note, .al-os3-info-label, .al-os3-stat-note),
html body .al-cv :is(.al-cv__label, .al-cv__kpi-note, .al-cv__panel-tools, .al-cv__camera-name, .al-cv__camera-foot, .al-cv__kv),
html body .al-dtm :is(.al-dtm-card__label, .al-dtm-card__note, .al-dtm__no-telemetry-note, .al-dtm__footer, .al-dtm__reading span),
html body .hm-page :is(.hm-note, .hm-context, .hm-kpis span, .hm-kpis small, .hm-footer) { color: #d6dcdf; }
html body :is(#al-act3-root, #al-res4-root, .al-ch-page, .fp-console, #al-os3-root, .al-cv, .al-dtm, .hm-page) :is(td, th) {
    padding: 10px;
    line-height: 1.45;
    vertical-align: top;
}
html body :is(#al-act3-root, #al-res4-root, .al-ch-page, .fp-console, #al-os3-root, .al-cv, .al-dtm, .hm-page) th { color: #f1f3f4; }
html body #al-act3-root .al-act3-meta-value,
html body #al-res4-root .al-res4-meta-value,
html body .al-ch-page .al-ch-mission-cell strong,
html body .fp-console .fp-context-cell strong,
html body .al-cv :is(.al-cv__camera-id, .al-cv__camera-name) {
    white-space: normal !important;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

/* Keep real controls in-place. Only their type scale and wrap behavior change. */
html body #al-act3-root .al-act3-refresh-row > #al-act3-refresh,
html body #al-res4-root .al-res4-header #al-res4-refresh,
html body #al-os3-root .al-os3-header-controls > #al-os3-refresh,
html body .al-ch-page > .al-ch-header > [data-ch-action="refresh"],
html body .fp-console > .fp-header > .fp-actions > [data-action="refresh"],
html body .al-cv > .al-cv__header > .al-cv__actions > [data-action="refresh"],
html body .al-dtm > .al-dtm__header > .al-dtm__header-actions > [data-refresh],
html body .hm-page > .hm-heading > .hm-toolbar > [data-action="refresh"] { font-size: 14px !important; }

/* Responsive grids use the content pane width, not the entire browser width. */
html body #al-act3-root .al-act3-kpis,
html body #al-res4-root .al-res4-summary-grid,
html body .al-ch-page .al-ch-kpis,
html body .fp-console .fp-kpi-grid,
html body #al-os3-root .al-os3-kpis,
html body .al-cv .al-cv__kpis,
html body .al-dtm .al-dtm__summary,
html body .hm-page .hm-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 10px; }
html body #al-act3-root .al-act3-mission-strip,
html body #al-res4-root .al-res4-mission-strip,
html body .al-ch-page .al-ch-mission,
html body .fp-console .fp-mission-strip,
html body .hm-page .hm-mission-strip { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
html body #al-act3-root :is(.al-act3-row-top, .al-act3-row-middle),
html body #al-res4-root :is(.al-res4-upper-grid, .al-res4-middle-grid, .al-res4-trend-grid),
html body .al-ch-page :is(.al-ch-grid, .al-ch-bottom),
html body .fp-console :is(.fp-grid-top, .fp-grid-middle, .fp-grid-lower, .fp-health-grid),
html body #al-os3-root :is(.al-os3-middle-grid, .al-os3-trend-layout, .al-os3-distribution-layout),
html body .al-cv :is(.al-cv__workspace, .al-cv__lower),
html body .hm-page :is(.hm-main-grid, .hm-operations-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
html body .al-dtm .al-dtm__workspace { grid-template-columns: minmax(0, 1fr) 340px !important; }
html body .al-dtm :is(.al-dtm__toolbar, .al-dtm__footer, .al-dtm__details-heading, .al-dtm__reading) { gap: 10px; }
html body .al-dtm .al-dtm__toolbar { grid-template-columns: minmax(0, 1fr); }
html body .al-dtm .al-dtm__navigation { grid-column: auto; flex-wrap: wrap; }
html body .al-dtm .al-dtm__layers { justify-content: flex-start; }
html body .al-dtm .al-dtm__footer { flex-wrap: wrap; }
html body .al-dtm .al-dtm__facility-button { padding-right: 6px; }
html body .al-dtm .al-dtm__facility-button.is-selected::after { position: static; display: block; font-size: 14px; }
html body .al-cv .al-cv__focus { grid-template-columns: minmax(0, 1fr); }
html body .al-cv :is(.al-cv__panel-head, .al-cv__camera-head) { flex-wrap: wrap; gap: 8px; }
html body .al-cv .al-cv__camera-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html body .hm-page :is(.hm-filters, .hm-search, .hm-footer),
html body .fp-console .fp-panel-header,
html body #al-res4-root .al-res4-panel-title,
html body #al-os3-root .al-os3-panel-title { flex-wrap: wrap; gap: 8px; }
/* Tables keep their real column headers and scroll within their own panel. */
html body :is(#al-act3-root, #al-res4-root, .al-ch-page, .fp-console, #al-os3-root, .al-cv, .hm-page) table {
    min-width: 640px;
    table-layout: auto;
}
html body #al-act3-root .al-act3-panel-body > div:has(> table),
html body #al-os3-root .al-os3-trend-layout > div:has(table) { overflow-x: auto; max-width: 100%; }
/* Chart labels stay at least 14 physical pixels: do not squeeze an SVG below
 * its native coordinate width. Scroll only its existing local chart container.
 * Digital Twin CAD imagery, overlay coordinates and hit targets are untouched.
 */
html body #al-act3-root .al-act3-chart-container,
html body #al-res4-root .al-res4-trend-card,
html body #al-os3-root :is(.al-os3-trend-layout, .al-os3-distribution-layout),
html body .fp-console .fp-trend-chart,
html body .hm-page .hm-chart-link { overflow-x: auto; max-width: 100%; }
html body #al-act3-root .al-act3-chart { min-width: 760px; min-height: 220px; }
html body #al-res4-root .al-res4-spark { min-width: 180px; min-height: 65px; }
html body #al-os3-root .al-os3-chart { min-width: 720px; min-height: 250px; }
html body #al-os3-root .al-os3-histogram { min-width: 650px; min-height: 210px; }
html body .fp-console .fp-trend-chart { height: auto; }
html body .fp-console .fp-trend { min-width: 460px; height: auto !important; }
html body .hm-page .hm-chart-link svg { min-width: 380px; height: auto !important; }
/* End-anchored numeric axes need a gutter for long existing values (e.g.
 * 1,070.88). This does not move a data point relative to its axes. */
html body .fp-console .fp-trend,
html body .hm-page .hm-chart-link svg { width: calc(100% - 16px) !important; margin-left: 16px; overflow: visible; }
html body #al-act3-root .al-act3-chart text,
html body #al-res4-root .al-res4-spark text,
html body #al-os3-root :is(.al-os3-chart, .al-os3-histogram) text,
html body .fp-console .fp-trend text,
html body .hm-page .hm-chart-link svg text { font-size: 14px !important; fill: #d6dcdf; }
html body #al-os3-root .al-os3-footer { flex-wrap: wrap; gap: 8px; }
/* Keep the native donut and its real button hit area the same size. At the
 * narrowest pane, the surrounding health panel provides local scrolling. */
html body :is(#al-act3-root, #al-res4-root, .al-ch-page, .fp-console, #al-os3-root, .al-cv, .al-dtm, .hm-page) .hm-health-layout button.hm-donut {
    min-width: 132px;
    max-width: none;
}
html body .hm-page .hm-donut-center { text-align: center; }

@container remaining-readability (max-width: 1000px) {
    html body #al-act3-root .al-act3-kpis,
    html body #al-res4-root .al-res4-summary-grid,
    html body .al-ch-page .al-ch-kpis,
    html body .fp-console .fp-kpi-grid,
    html body #al-os3-root .al-os3-kpis,
    html body .al-cv .al-cv__kpis,
    html body .al-dtm .al-dtm__summary,
    html body .hm-page .hm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    html body #al-act3-root :is(.al-act3-row-top, .al-act3-row-middle),
    html body #al-res4-root :is(.al-res4-upper-grid, .al-res4-middle-grid, .al-res4-trend-grid),
    html body .al-ch-page :is(.al-ch-grid, .al-ch-bottom),
    html body .fp-console :is(.fp-grid-top, .fp-grid-middle, .fp-grid-lower, .fp-health-grid),
    html body #al-os3-root :is(.al-os3-middle-grid, .al-os3-trend-layout, .al-os3-distribution-layout),
    html body .al-cv :is(.al-cv__workspace, .al-cv__lower),
    html body .al-dtm .al-dtm__workspace,
    html body .hm-page :is(.hm-main-grid, .hm-operations-grid) { grid-template-columns: minmax(0, 1fr) !important; }
    html body .al-dtm .al-dtm__map-panel { min-height: 480px; }
}
@container remaining-readability (max-width: 520px) {
    html body #al-act3-root :is(.al-act3-kpis, .al-act3-mission-strip, .al-act3-distribution),
    html body #al-res4-root :is(.al-res4-summary-grid, .al-res4-mission-strip),
    html body .al-ch-page :is(.al-ch-kpis, .al-ch-mission, .al-ch-provenance, .al-ch-bar-row),
    html body .fp-console :is(.fp-kpi-grid, .fp-mission-strip, .fp-metric, .fp-metric-row),
    html body #al-os3-root :is(.al-os3-kpis, .al-os3-health-layout, .al-os3-info-row),
    html body #al-os3-root #al-os3-distribution-stats .al-os3-info-row,
    html body .al-cv :is(.al-cv__kpis, .al-cv__camera-grid, .al-cv__kv, .al-cv__metric),
    html body .al-dtm :is(.al-dtm__summary, .al-dtm__field),
    html body .hm-page :is(.hm-kpis, .hm-mission-strip, .hm-health-layout) { grid-template-columns: minmax(0, 1fr) !important; }
    html body #al-act3-root .al-act3-legend-row { grid-template-columns: 12px minmax(0, 1fr); }
    html body #al-act3-root .al-act3-legend-row > :nth-child(n+3) { grid-column: 2; }
    html body #al-res4-root :is(.al-res4-card-main, .al-res4-depletion-row),
    html body .al-cv .al-cv__confidence-row { grid-template-columns: minmax(0, 1fr) !important; }
    html body .al-cv .al-cv__confidence-row { display: grid; }
    html body #al-os3-root .al-os3-info-value { overflow-wrap: anywhere !important; }
    html body #al-os3-root #al-os3-distribution-stats .al-os3-info-value { overflow-wrap: anywhere !important; }
    html body .hm-page .hm-health-layout { overflow-x: auto; }
    html body .al-dtm :is(.al-dtm__details-heading, .al-dtm__reading) { flex-wrap: wrap; }
    html body .al-dtm .al-dtm__details-scroll { padding: 8px; }
    html body #al-act3-root .al-act3-donut,
    html body #al-os3-root .al-os3-donut,
    html body .hm-page .hm-donut { max-width: 100%; }
    html body .hm-page .hm-health-layout .hm-donut { max-width: none; }
}
@container remaining-readability (max-width: 360px) {
    html body #al-act3-root .al-act3-refresh-row,
    html body #al-res4-root > .al-res4-header > div:last-child,
    html body .fp-console > .fp-header > .fp-actions,
    html body #al-os3-root .al-os3-header-controls,
    html body .al-cv > .al-cv__header > .al-cv__actions,
    html body .al-dtm > .al-dtm__header > .al-dtm__header-actions,
    html body .hm-page > .hm-heading > .hm-toolbar { padding: 40px 0 0 !important; }
    html body .al-ch-page > .al-ch-header { padding-right: 0 !important; }
}

/* The relocated Astra notice stays collapsed normally; failures remain visible. */
html body .al-astra-page .al-astra-refresh-error { display: none !important; color: #ffcec8; font-size: 14px !important; line-height: 1.45; margin: 0; }
html body .al-astra-page:has([data-astra="run-association"][data-level="critical"]) .al-astra-refresh-error { display: block !important; }