/* AstroLoop 20260909-dashboard-clarity-1
 * Dashboard only. Keep native actions, stored layouts, telemetry and other tabs intact.
 * Text stays readable even over the existing gray decorators' #575757 table heads.
 */
html body .al-display-root {
    --al-text: #f1f3f4 !important;
    --al-muted: #e0e4e6 !important;
    --al-dim: #e0e4e6 !important;
    --al-red: #ffaaaa !important;
    color: #f1f3f4 !important;
    font-family: Roboto, Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    container-type: inline-size;
    container-name: dashboard-clarity;
    min-width: 0 !important;
}
html body .al-display-root, html body .al-display-root * { box-sizing: border-box; }
html body .al-display-root [hidden] { display: none !important; }
html body .al-display-root > .al-display-shell { min-width: 0 !important; padding: 12px !important; }

/* Cover the legacy header surface with the same neutral canvas, not a new banner. */
html body .al-display-root .al-display-header-actions {
    background: #212121 !important;
    align-items: flex-start !important;
    gap: 3px 12px !important;
    min-height: 40px !important;
}
html body .al-display-root .al-dashboard-header-note,
html body .al-display-root .al-dashboard-time-note {
    display: block;
    flex-basis: 100%;
    margin: 0;
    color: #e0e4e6 !important;
    font-size: 12px !important;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
html body .al-display-root .al-dashboard-header-note { color: #f1f3f4 !important; font-weight: 600; }
html body .al-display-root .al-dashboard-focus-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #e0e4e6 !important;
    font-size: 12px;
    cursor: pointer;
    min-height: 30px;
}
html body .al-display-root .al-dashboard-focus-toggle input { margin: 0; width: 16px; height: 16px; }

html body .al-display-root .al-context-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1px !important;
    margin-bottom: 12px !important;
}
html body .al-display-root .al-context-cell { min-height: 76px !important; padding: 10px !important; }
html body .al-display-root .al-context-label,
html body .al-display-root .al-field-label,
html body .al-display-root .al-kpi-label,
html body .al-display-root .al-run-detail-label {
    display: block;
    margin-bottom: 5px;
    color: #e0e4e6 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
html body .al-display-root .al-context-value {
    display: block;
    font-family: Roboto, Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: 500;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
}
html body .al-display-root [data-role="context-mission"],
html body .al-display-root [data-role="context-run"] { font-size: 14px !important; }
html body .al-display-root [data-role="context-run"] { user-select: text; font-family: Consolas, monospace !important; }
html body .al-display-root .al-state { min-height: 30px; font-size: 16px !important; line-height: 1.4; }

/* Two balanced columns use actual available view width, not full browser width. */
html body .al-display-root .al-display-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: auto !important;
    grid-auto-flow: row !important;
    gap: 12px !important;
    align-items: start !important;
}
html body .al-display-root .al-display-grid > .al-display-panel {
    grid-column: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    border-radius: 2px;
}
html body .al-display-root .al-display-grid > [data-panel-id="mission"],
html body .al-display-root .al-display-grid > [data-panel-id="limits"],
html body .al-display-root .al-display-grid > [data-panel-id="events"] { grid-column: 1 / -1 !important; }
html body .al-display-root .al-display-panel:has(.al-chart-wrap) { height: auto; }
html body .al-display-root .al-display-panel:has(.al-chart-wrap) > .al-panel-body { flex: 0 0 auto; }
html body .al-display-root .al-panel-header {
    align-items: flex-start !important;
    flex-wrap: wrap;
    min-height: 64px;
    padding: 10px 12px !important;
    gap: 6px 12px;
}
html body .al-display-root .al-panel-title-wrap { flex: 1 1 170px; }
html body .al-display-root .al-panel-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow: visible !important;
}
html body .al-display-root .al-panel-subtitle {
    color: #e0e4e6 !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}
html body .al-display-root .al-panel-tools { min-width: 0; max-width: 100%; flex-wrap: wrap; }
html body .al-display-root .al-panel-value {
    font-family: Roboto, Arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
}
html body .al-display-root .al-panel-body { min-width: 0; padding: 12px; }
html body .al-display-root .al-panel-footer {
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 2px 12px;
    padding: 8px 12px !important;
    color: #e0e4e6 !important;
    font-size: 12px !important;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
html body .al-display-root .al-history-note { flex-basis: 100%; }
html body .al-display-root .al-chart-wrap { min-height: 70px !important; height: 210px !important; }
html body .al-display-root .al-chart-wrap.is-empty { height: 76px !important; }
html body .al-display-root .al-chart-legend { top: 0; left: 70px; right: 5px; gap: 4px 10px; }
html body .al-display-root .al-chart-legend-item { font-size: 12px !important; line-height: 1.4; white-space: normal; }
html body .al-display-root .al-chart-empty {
    inset: 0 !important;
    min-height: 0 !important;
    padding: 10px;
    color: #e0e4e6 !important;
    font-size: 14px !important;
    line-height: 1.5;
}
html body .al-display-root .al-chart-wrap.is-empty .al-chart-legend { display: none !important; }
html body .al-display-root .al-kpi-value { font-size: 22px !important; line-height: 1.4; overflow-wrap: anywhere; }

html body .al-display-root .al-register th,
html body .al-display-root .al-event-table th {
    color: #ffffff !important;
    font-size: 12px !important;
    line-height: 1.5;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
html body .al-display-root .al-register td,
html body .al-display-root .al-event-table td {
    color: #e0e4e6;
    font-size: 14px !important;
    line-height: 1.5;
}
html body .al-display-root .al-register :is(th, td),
html body .al-display-root .al-event-table :is(th, td) {
    padding: 9px 10px !important;
    min-height: 38px;
    overflow-wrap: anywhere;
    white-space: normal !important;
}
html body .al-display-root .al-register-status { font-size: 12px; }
html body .al-display-root .al-register th:nth-child(1) { width: 25% !important; }
html body .al-display-root .al-register th:nth-child(2) { width: 17% !important; }
html body .al-display-root .al-register th:nth-child(3) { width: 18% !important; }
html body .al-display-root .al-register th:nth-child(4) { width: 40% !important; }
html body .al-display-root .al-limit-rule { display: block; margin-bottom: 3px; font-size: 14px; line-height: 1.5; }
html body .al-display-root .al-event-scroll { height: auto !important; max-height: 330px; }
html body .al-display-root .al-command-feedback { font-size: 14px !important; line-height: 1.5 !important; }
html body .al-display-root .al-command-row { justify-content: flex-start; gap: 8px; }
html body .al-display-root .al-command-row .al-button { font-size: 14px !important; min-height: 36px; }
html body .al-display-root .al-field input { font-size: 16px !important; height: 36px; }

/* An accessible native disclosure keeps optional run metadata out of the scan path. */
html body .al-display-root .al-run-details { padding: 0; }
html body .al-display-root .al-run-details > summary {
    cursor: pointer;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    min-height: 42px;
    color: #f1f3f4;
}
html body .al-display-root .al-run-details > summary::after { content: "Show details"; margin-left: 12px; color: #e0e4e6; font-size: 12px; font-weight: 400; }
html body .al-display-root .al-run-details[open] > summary::after { content: "Hide details"; }
html body .al-display-root .al-run-details-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    padding: 0 12px 12px;
}
html body .al-display-root .al-run-detail-value { display: block; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
html body .al-display-root .al-run-detail-note { margin: 0; padding: 0 12px 12px; color: #e0e4e6 !important; font-size: 14px !important; line-height: 1.5; }
html body .al-display-root [data-role="mission-run"] { font-family: Consolas, monospace; user-select: text; }
html body .al-display-root .al-run-details .al-progress-track { margin: 4px 12px 12px; width: calc(100% - 24px); height: 6px; }
html body .al-display-root :is(button, input, summary):focus-visible { outline: 2px solid #f1f3f4; outline-offset: 3px; }

/* These shell rules exist only while a Dashboard session is mounted in the document. */
html body:has(.al-display-root) .l-shell__pane-tree .c-tree__item__label,
html body:has(.al-display-root) .l-shell__pane-tree .c-tree__item-label,
html body:has(.al-display-root) .l-shell__pane-tree .c-tree__label,
html body:has(.al-display-root) .l-shell__pane-tree .c-tree__item__name {
    white-space: normal !important;
    overflow-wrap: anywhere;
    text-overflow: clip !important;
    line-height: 1.4;
}
html body:has(.al-display-root [data-role="dashboard-focus"]:checked) .l-shell__pane-inspector { display: none !important; }

@container dashboard-clarity (max-width: 819px) {
    html body .al-display-root .al-display-grid { grid-template-columns: minmax(0, 1fr) !important; }
    html body .al-display-root .al-context-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    html body .al-display-root .al-run-details-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    html body .al-display-root .al-chart-wrap { height: 190px !important; }
    html body .al-display-root .al-chart-wrap.is-empty { height: 100px !important; }
}
@container dashboard-clarity (max-width: 399px) {
    html body .al-display-root .al-display-shell { padding: 8px !important; }
    html body .al-display-root .al-display-header-actions { padding: 40px 0 0 !important; }
    html body .al-display-root .al-panel-value { font-size: 20px !important; }
    html body .al-display-root .al-register :is(th, td),
    html body .al-display-root .al-event-table :is(th, td) { padding: 8px 6px !important; }
    html body .al-display-root .al-run-details-grid { grid-template-columns: minmax(0, 1fr); }
    html body .al-display-root .al-panel-header { padding: 8px !important; }
    html body .al-display-root .al-panel-footer { padding: 8px !important; }
}
@container dashboard-clarity (max-width: 239px) {
    html body .al-display-root .al-context-strip { grid-template-columns: minmax(0, 1fr) !important; }
    html body .al-display-root .al-chart-wrap.is-empty { height: 240px !important; }
}