/* App layer on top of Pico CSS (vendor/pico). Pico styles the page; this file sizes it for dense
   data and owns the chart, map, and (i) styling. Page colors come from Pico's variables. */

:root {
  /* Pico grows text up to 131% on wide screens; investigation tables need a fixed, denser size. */
  --pico-font-size: 87.5%;
  --pico-line-height: 1.45;
  --pico-spacing: 0.75rem;
  --pico-typography-spacing-vertical: 0.75rem;
  --pico-form-element-spacing-vertical: 0.4rem;
  --pico-form-element-spacing-horizontal: 0.6rem;
  --pico-block-spacing-vertical: 1rem;
  --pico-block-spacing-horizontal: 1rem;
  /* One control shape (the header search box, Tailwind rounded-lg): every button, input, select, textarea
     and joined group. Default height is Pico's (font line + padding + border); --control-height-sm is the
     compact size for row actions (Copy, Load…, Refresh…, Save). Pills are reserved for badges and chips. */
  --control-radius: 0.5rem;
  --control-height-sm: 1.75rem;
}

/* Controls take the shared radius. Pico rounds search inputs and role="search" forms into 5rem pills and
   passes that radius down to every control in the form; this resets it on the control and the group. */
input, select, textarea, button, [role="button"], [type="search"], [role="search"], [role="group"],
details.dropdown > summary {
  --pico-border-radius: var(--control-radius);
}
[type="checkbox"]:not([role="switch"]) { --pico-border-radius: 0.25rem; }
/* Pico fixes the height of text inputs but not of selects; a select with smaller text keeps the same height. */
select:not([multiple], [size]) {
  min-height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
}
/* Joined groups: only the outer corners are rounded; Pico squares the inner joints. */
[role="search"] > :first-child { border-start-start-radius: var(--control-radius); border-end-start-radius: var(--control-radius); }
[role="search"] > :last-child { border-start-end-radius: var(--control-radius); border-end-end-radius: var(--control-radius); }
/* Compact row actions share one small size. */
.btn-sm, .copy-btn, .load-confirm > summary.load-btn, .load-form button.load-start, .load-actions button {
  display: inline-flex; align-items: center; justify-content: center; width: auto;
  min-height: var(--control-height-sm); padding: 0 0.7rem; font-size: 0.8rem; line-height: 1.2;
  border-radius: var(--control-radius);
}
/* Aliases resolve where they are declared, so a light <body> on a dark-OS root declares them again. */
:root, [data-theme] {
  --surface-0: var(--pico-background-color);
  --surface-1: var(--pico-card-background-color);
  --border: var(--pico-muted-border-color);
  --text-primary: var(--pico-color);
  --text-secondary: var(--pico-muted-color);
  --text-muted: var(--pico-muted-color);
  --link: var(--pico-primary);
}

/* Brand palette ("Federal blue"). Cyan is a thin accent line only, never text or a fill on light. */
:root {
  --brand-navy: #162e51;
  --brand-blue: #005ea2;
  --brand-cyan: #00bde3;
  --brand-sky: #e7f2f8;
  --brand-sky-line: #c5dcea;
}

/* Brand theme. Roles: navy = header bar, headings and secondary buttons; blue = links, primary buttons,
   focus and the active marker; cyan = the line under the header and small decorative rules; sky = light
   panels. Warm colors are left to status (critical, warning). Pico's variables are mapped here so every
   page follows. Selectors mirror Pico's: pages that set data-theme="light" on <body> stay light in a dark
   OS theme.
   Contrast (WCAG): blue on white 6.7, on --soft 6.2, on sky 5.9; white on blue 6.7; navy on sky 12.0;
   white on navy 13.6. Dark: --pico-primary #73b3e7 on #13171f 8.0; headings #d9e8f6 14.4. */
[data-theme="light"],
:root:not([data-theme="dark"]) {
  --heading: var(--brand-navy);
  --heading-sub: #33496b;      /* h3: navy lightened; 9.1 on white, 8.0 on sky */
  --soft: #f1f7fb;             /* sky tint: table heads, chips, hover rows */
  --soft-faint: #f8fbfd;       /* page tint behind white cards (wide investigation pages) */
  --soft-strong: var(--brand-sky); /* page header panels */
  --soft-line: var(--brand-sky-line); /* tinted borders */
  --on-soft: var(--brand-navy);
  --accent-hover: #1a4480;
  --pico-primary: var(--brand-blue);
  --pico-primary-hover: var(--accent-hover);
  --pico-primary-underline: rgba(0, 94, 162, 0.45);
  --pico-primary-focus: rgba(0, 94, 162, 0.35);
  --pico-primary-background: var(--brand-blue);
  --pico-primary-hover-background: var(--accent-hover);
  --pico-primary-inverse: #fff;
  --pico-secondary: var(--brand-navy);
  --pico-secondary-hover: var(--accent-hover);
  --pico-secondary-underline: rgba(22, 46, 81, 0.45);
  --pico-secondary-focus: rgba(0, 94, 162, 0.35);
  --pico-secondary-background: var(--brand-navy);
  --pico-secondary-hover-background: #0b1f3a;
  --pico-secondary-inverse: #fff;
  --pico-h1-color: var(--heading);
  --pico-h2-color: var(--heading);
  --pico-h3-color: var(--heading-sub);
  --pico-form-element-active-border-color: var(--brand-blue);
  --pico-form-element-focus-color: var(--pico-primary-focus);
  --pico-switch-checked-background-color: var(--brand-blue);
  --pico-progress-color: var(--brand-blue);
  --pico-range-thumb-active-color: var(--brand-blue);
  --pico-text-selection-color: rgba(0, 94, 162, 0.2);
  --pico-accordion-close-summary-color: var(--pico-primary);
  --pico-accordion-active-summary-color: var(--pico-primary-hover);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --heading: #d9e8f6;
    --heading-sub: #b4cbe0;      /* 10.7 on #13171f */
    --pico-muted-color: #939cad; /* Pico's #7b8495 is 4.2 on --soft; this is 5.8, 5.1 on --soft-strong */
    --soft: #172231;
    --soft-faint: #131c28;
    --soft-strong: #1a2c44;      /* headings on it 11.3, --pico-primary on it 6.3 */
    --soft-line: #2c4361;
    --on-soft: #d9e8f6;
    --accent-hover: #a8d0f0;
    --pico-primary: #73b3e7;
    --pico-primary-underline: rgba(115, 179, 231, 0.5);
    --pico-primary-focus: rgba(115, 179, 231, 0.4);
    --pico-primary-background: #005ea2;   /* white on it 6.7 */
    --pico-primary-hover-background: #2378c3;
    --pico-secondary: #73b3e7;
    --pico-secondary-underline: rgba(115, 179, 231, 0.5);
    --pico-secondary-focus: rgba(115, 179, 231, 0.4);
    --pico-secondary-background: #2b4a73;   /* white on it 9.1 */
    --pico-secondary-hover-background: #36598a;
    --pico-form-element-active-border-color: #73b3e7;
    --pico-switch-checked-background-color: #2378c3;
    --pico-progress-color: #4f97d1;
    --pico-range-thumb-active-color: #4f97d1;
    --pico-text-selection-color: rgba(115, 179, 231, 0.3);
  }
}
[data-theme="dark"] {
  --heading: #d9e8f6;
  --heading-sub: #b4cbe0;      /* 10.7 on #13171f */
  --pico-muted-color: #939cad; /* Pico's #7b8495 is 4.2 on --soft; this is 5.8, 5.1 on --soft-strong */
  --soft: #172231;
  --soft-faint: #131c28;
  --soft-strong: #1a2c44;      /* headings on it 11.3, --pico-primary on it 6.3 */
  --soft-line: #2c4361;
  --on-soft: #d9e8f6;
  --accent-hover: #a8d0f0;
  --pico-primary: #73b3e7;
  --pico-primary-underline: rgba(115, 179, 231, 0.5);
  --pico-primary-focus: rgba(115, 179, 231, 0.4);
  --pico-primary-background: #005ea2;   /* white on it 6.7 */
  --pico-primary-hover-background: #2378c3;
  --pico-secondary: #73b3e7;
  --pico-secondary-underline: rgba(115, 179, 231, 0.5);
  --pico-secondary-focus: rgba(115, 179, 231, 0.4);
  --pico-secondary-background: #2b4a73;   /* white on it 9.1 */
  --pico-secondary-hover-background: #36598a;
  --pico-form-element-active-border-color: #73b3e7;
  --pico-switch-checked-background-color: #2378c3;
  --pico-progress-color: #4f97d1;
  --pico-range-thumb-active-color: #4f97d1;
  --pico-text-selection-color: rgba(115, 179, 231, 0.3);
}
/* A page that pins its theme on <body> (data-theme="light") must not inherit the dark OS theme's root
   text and page colors: Pico sets color and background on :root only. Zero-ish specificity so page
   classes (.investigation-body) can still tint the background. */
body:where([data-theme]) { color: var(--pico-color); background-color: var(--pico-background-color); }
:root:has(> body[data-theme="light"]) { color-scheme: light; background-color: #fff; }
/* Checked boxes and radios use the secondary (navy) fill so they read apart from buttons. */
:is([type="checkbox"], [type="radio"]):is(:checked, :checked:active, :checked:focus) {
  --pico-background-color: var(--pico-secondary-background);
  --pico-border-color: var(--pico-secondary-background);
}

/* Data colors: validated reference palette, stepped separately for light and dark. A light <body>
   (data-theme="light") re-declares the light steps so a dark OS theme does not leak into it. */
:root, [data-theme="light"] {
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --grid: #e8e7e2;
  --good: #0ca30c;
  --warning: #fab219;
  --critical: #d03b3b;
  --critical-bg: #fbeaea;
  --warning-bg: #fdf4df;
  /* Sequential blue, light -> dark (near-zero recedes toward the surface). */
  --q0: #efeeea; --q0-ink: #6f6e69;
  --q1: #cde2fb; --q2: #9ec5f4; --q3: #6da7ec; --q4: #3987e5;
  --q5: #256abf; --q6: #184f95; --q7: #0d366b;
  --q1-ink: #0b0b0b; --q2-ink: #0b0b0b; --q3-ink: #0b0b0b; --q4-ink: #ffffff; --q5-ink: #ffffff; --q6-ink: #ffffff; --q7-ink: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --series-1: #3987e5;
    --series-2: #d95926;
    --grid: #2a2a27;
    --critical-bg: #3a1d1d;
    --warning-bg: #3a2f14;
    /* Sequential blue, dark -> light on the dark surface. */
    --q0: #262624; --q0-ink: #9a998f;
    --q1: #0d366b; --q2: #104281; --q3: #184f95; --q4: #1c5cab;
    --q5: #2a78d6; --q6: #5598e7; --q7: #9ec5f4;
    --q1-ink: #ffffff; --q2-ink: #ffffff; --q3-ink: #ffffff; --q4-ink: #ffffff; --q5-ink: #ffffff; --q6-ink: #0b0b0b; --q7-ink: #0b0b0b;
  }
}
:root[data-theme="dark"] {
  --series-1: #3987e5; --series-2: #d95926; --grid: #2a2a27;
  --critical-bg: #3a1d1d; --warning-bg: #3a2f14;
  --q0: #262624; --q0-ink: #9a998f;
  --q1: #0d366b; --q2: #104281; --q3: #184f95; --q4: #1c5cab;
  --q5: #2a78d6; --q6: #5598e7; --q7: #9ec5f4;
  --q1-ink: #ffffff; --q2-ink: #ffffff; --q3-ink: #ffffff; --q4-ink: #ffffff; --q5-ink: #ffffff; --q6-ink: #0b0b0b; --q7-ink: #0b0b0b;
}

/* Page */
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; margin-top: 1.75rem; }
h3 { font-size: 1rem; margin-top: 1.25rem; }
h4 { font-size: 0.95rem; margin: 1rem 0 0.4rem; }
h1, h2, h3 { margin-bottom: 0.5rem; }
.small { font-size: 0.8rem; }
.muted { color: var(--text-muted); }
.mono { font-family: var(--pico-font-family-monospace); font-size: 0.9em; }
pre { max-height: 420px; font-size: 0.8rem; }

.brand { color: var(--text-primary); }
.quick { margin: 0; }
.quick input { margin: 0; width: min(340px, 80vw); }
body > footer { color: var(--text-muted); font-size: 0.8rem; border-top: 1px solid var(--border); }

/* Tables: the .tbl component (server/styles/table.css) styles every table; these are cell-level helpers. */
.n { text-align: right; font-variant-numeric: tabular-nums; }
table.kv th { width: 260px; }
.critical-row td { background: var(--critical-bg); }
.warn-row td { background: var(--warning-bg); }

/* Cards, stats, layout */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--pico-spacing); margin: 1rem 0; }
.tiles article { margin: 0; box-shadow: none; border: 1px solid var(--soft-line); border-top: 3px solid var(--pico-primary); border-radius: 0.75rem; }
.stat .label { display: block; color: var(--text-secondary); font-size: 0.85rem; }
.stat .value { display: block; font-size: 1.6rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--heading); }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(560px, 100%), 1fr)); gap: 1.5rem; }
.grid2 > article { margin: 0; }
article > h2:first-child { margin-top: 0; }
.table-view { margin-top: 1rem; }

.alert, .ok { padding: 0.5rem 0.75rem; border-radius: var(--pico-border-radius); border: 1px solid var(--border); }
.ok { background: var(--soft); border-color: var(--soft-line); }
.alert { background: var(--warning-bg); }
.status { font-size: 0.8rem; }
.status.good { color: var(--good); }
.status.warning { color: var(--warning); }
.status.critical { color: var(--critical); }
.critical-tag { border-color: var(--critical); color: var(--critical); }
.jump a[aria-current] { font-weight: 650; text-decoration: underline; text-decoration-color: var(--brand-cyan); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.tag { display: inline-block; font-size: 0.75rem; padding: 1px 6px; margin: 0 4px 2px 0; border: 1px solid var(--soft-line); border-radius: 10px; color: var(--text-secondary); }
.weight { display: inline-block; min-width: 30px; text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; border: 1px solid var(--border); border-radius: 6px; padding: 0 6px; margin-right: 6px; }
.filters { display: flex; gap: 0.75rem; align-items: end; flex-wrap: wrap; margin: 0.75rem 0; padding: 0.75rem 1rem; background: var(--soft); border: 1px solid var(--soft-line); border-radius: 0.75rem; }
.filters label { display: block; font-size: 0.8rem; color: var(--text-secondary); margin: 0; }
.filters label > :is(input, select) { display: block; margin-top: 2px; }
/* An (i) button inside a label sits beside the label text, never stretched like a form control. */
.filters label > button.info { display: inline-flex; width: 15px; min-width: 15px; height: 15px; flex: none; }
.filters input, .filters select, .filters button { margin: 0; width: auto; }
/* Pico stretches every child of a role="search" group; the submit button keeps its own width. */
.filters > button { flex: none; padding-inline: 1.5rem; }
/* A grouped row of controls (fieldset role="group") fits the panel instead of overflowing it. */
.filters > fieldset[role="group"] { flex: 1 1 100%; min-width: 0; margin: 0; }
.filters > fieldset[role="group"] > :not(button) { min-width: 0; }
.filters > .filter-help { flex: 1 1 100%; margin: 0; font-size: 0.8rem; }
.filters > .filter-help button.info { width: 15px; min-width: 15px; height: 15px; margin: 0 0.4rem 0 0.15rem; }
@media (max-width: 700px) {
  /* Joined filter rows become a two-column grid on phones; the first field and the button take a full row. */
  .filters > fieldset[role="group"] { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; box-shadow: none; }
  .filters > fieldset[role="group"] > * { margin: 0 !important; border-radius: var(--control-radius) !important; width: 100%; }
  .filters > fieldset[role="group"] > :first-child, .filters > fieldset[role="group"] > button { grid-column: 1 / -1; }
}
.jump { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.25rem 1rem; margin: 0.5rem 0 0; font-size: 0.9rem; }

/* (i) explanations */
button.info {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; padding: 0; margin: 0 0 0 4px; vertical-align: -2px;
  border: 0; border-radius: 50%; background: transparent; box-shadow: none;
  color: var(--text-muted); cursor: help;
}
button.info svg.icon { width: 15px; height: 15px; margin: 0; vertical-align: 0; }
button.info::before { content: ""; position: absolute; width: 28px; height: 28px; } /* larger touch target */
button.info:hover, button.info:focus-visible { color: var(--link); background: transparent; box-shadow: none; }
button.info:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
#tip { position: fixed; z-index: 10; pointer-events: none; background: var(--text-primary); color: var(--pico-background-color); font-size: 0.8rem; padding: 4px 8px; border-radius: 4px; max-width: 340px; line-height: 1.4; }

/* Lucide icons (server/icons.py): decorative, beside a visible label; sized to the text and colored by it. */
svg.icon { display: inline-block; width: 1em; height: 1em; flex: none; margin: 0 0.35em 0 0; vertical-align: -0.125em; }

/* Charts */
.data-scroll td { max-width: 30rem; overflow-wrap: anywhere; }
.quantile .range { stroke: var(--series-1); stroke-width: 3; }
.quantile .box { fill: var(--series-1); opacity: .35; }
.quantile .median { stroke: var(--text-primary); stroke-width: 3; }
.viz { width: 100%; height: auto; display: block; }
.hist, .bars, .cols { max-width: 760px; }
.viz a, .viz a:hover { text-decoration: none; }
.viz text { fill: var(--text-secondary); font-size: 12px; }
.tile rect { fill: var(--q0); stroke: var(--surface-1); stroke-width: 2; }
.tile text { text-anchor: middle; pointer-events: none; }
.tile .tile-code { font-weight: 650; font-size: 13px; }
.tile .tile-value { font-size: 11px; }
.tile.q0 text { fill: var(--q0-ink); }
.tile.q1 rect { fill: var(--q1); } .tile.q2 rect { fill: var(--q2); } .tile.q3 rect { fill: var(--q3); }
.tile.q4 rect { fill: var(--q4); } .tile.q5 rect { fill: var(--q5); } .tile.q6 rect { fill: var(--q6); }
.tile.q7 rect { fill: var(--q7); }
.tile.q1 text { fill: var(--q1-ink); }
.tile.q2 text { fill: var(--q2-ink); }
.tile.q3 text { fill: var(--q3-ink); }
.tile.q4 text { fill: var(--q4-ink); }
.tile.q5 text { fill: var(--q5-ink); }
.tile.q6 text { fill: var(--q6-ink); }
.tile.q7 text { fill: var(--q7-ink); }
.tile.missing rect { stroke: var(--critical); stroke-width: 2.5; stroke-dasharray: 4 3; }
.tile:hover rect { stroke: var(--text-primary); }
.seq-legend { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-muted); margin-top: 6px; flex-wrap: wrap; }
.seq-legend i { display: inline-block; width: 18px; height: 10px; border-radius: 2px; }
.seq-legend span { margin: 0 4px; }
.seq-legend .q0 { background: var(--q0); } .seq-legend .q1 { background: var(--q1); } .seq-legend .q2 { background: var(--q2); }
.seq-legend .q3 { background: var(--q3); } .seq-legend .q4 { background: var(--q4); } .seq-legend .q5 { background: var(--q5); }
.seq-legend .q6 { background: var(--q6); } .seq-legend .q7 { background: var(--q7); }
.bars .bar, .hist .bar.s1, .cols .bar { fill: var(--series-1); }
.cols .bar.neg { fill: var(--series-2); }
.cols g:hover .hit { fill: var(--grid); }
.hist .bar.s2 { fill: var(--series-2); }
.bars .bar-label { text-anchor: end; fill: var(--text-primary); }
.bars .bar-value { fill: var(--text-secondary); font-variant-numeric: tabular-nums; }
.hit { fill: transparent; }
.bars g:hover .hit, .hist g:hover .hit { fill: var(--grid); }
.grid { stroke: var(--grid); stroke-width: 1; }
.baseline { stroke: var(--text-muted); stroke-width: 1; }
.axis { font-size: 11px; text-anchor: end; }
.axis.mid { text-anchor: middle; }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--text-secondary); margin-top: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.legend .s1 { background: var(--series-1); } .legend .s2 { background: var(--series-2); }

@media (max-width: 640px) {
  .quick input { min-width: 0; }
  .quick, .quick input { width: 100%; }
}

/* Tabbed record pages (provider). Without JavaScript the tab bar stays hidden and every panel shows. */
.tabs { display: flex; flex-wrap: wrap; gap: 0; margin: 1rem 0 0.5rem; border-bottom: 1px solid var(--soft-line); }
.tabs [role="tab"] {
  width: auto; margin: 0 0 -1px; padding: 0.5rem 0.9rem; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; box-shadow: none; color: var(--text-secondary); font-size: 0.9rem; font-weight: 500;
}
.tabs [role="tab"]:hover { color: var(--link); background: var(--soft); }
.tabs [role="tab"][aria-selected="true"] { color: var(--heading); font-weight: 650; border-bottom: 3px solid var(--pico-primary); }
.tabs [role="tab"]:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
.tabs .count { margin-left: 0.3rem; font-size: 0.8em; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tabs .critical-count { color: var(--critical); font-weight: 650; }
.tab-panel > h2:first-child { margin-top: 0.75rem; }
.subtabs { margin: 0.75rem 0 0.25rem; }
.subtabs [role="tab"] { padding: 0.35rem 0.75rem; font-size: 0.85rem; }
.subtab-panel > h2:first-child { margin-top: 0.75rem; }
/* Linked views of one page (e.g. /medicare): a tab-like bar of ordinary links, the current one marked aria-current. */
.view-tabs { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0; margin: 1rem 0 0.5rem; border-bottom: 1px solid var(--soft-line); }
.view-tabs a { margin: 0 0 -1px; padding: 0.5rem 0.9rem; border-bottom: 2px solid transparent; color: var(--text-secondary); font-size: 0.9rem; font-weight: 500; text-decoration: none; }
.view-tabs a:hover { color: var(--link); background: var(--soft); }
.view-tabs a[aria-current="page"] { color: var(--heading); font-weight: 650; border-bottom: 3px solid var(--pico-primary); }
.outline a { margin-right: 0.15rem; }

.flags { padding: 0; }
.flags li { list-style: none; margin: 0.3rem 0; }
.flags li.flags-none:not(:only-child) { display: none; }
.nowrap { white-space: nowrap; }
.warning-row td { background: var(--warning-bg); }

/* Data page: one status tag per dataset, and full receipt digests that wrap instead of widening the table. */
.tag.data-loaded { border-color: var(--good); color: var(--good); }
.tag.data-unreadable, .tag.data-paid_restricted { border-color: var(--critical); color: var(--critical); }
.tag.data-manual, .tag.data-possible_match { border-color: var(--warning); }
.receipt { margin: 0.35rem 0 0.6rem; }
.receipt .digest, .receipt code { word-break: break-all; }

/* Site navigation: grouped links inline on wide screens, behind "Menu" on narrow ones. */
.site-nav, .site-nav .nav-links > ul { display: flex; align-items: center; flex-wrap: wrap; gap: 0 0.25rem; margin: 0; padding: 0; }
.site-nav li { list-style: none; }
.site-nav .nav-links > ul > li > a, .site-nav .nav-group summary { font-size: 0.9rem; }
.site-nav summary[aria-current="page"] { font-weight: 600; }
.site-header .nav-group > summary::after { filter: invert(1); opacity: 0.8; } /* Pico chevron on the dark bar */
/* The grouped menu opens as a white panel below its summary (a narrow screen lays it out inline, below). */
.site-nav .nav-group { position: relative; margin: 0; }
.site-nav .nav-group summary { white-space: nowrap; }
.site-nav .nav-group > div { position: absolute; z-index: 100; right: 0; top: 2rem; width: 250px; max-height: 65vh; overflow: auto;
  padding: 1rem; background: #fff; border: 1px solid var(--brand-sky); border-radius: 12px; box-shadow: 0 12px 40px rgb(51 8 51 / 20%); }
.site-nav .nav-group > div a { display: block; padding: 0.4rem; }
.site-header .nav-group > div a { color: var(--brand-blue) !important; }
.site-header .nav-group > div .nav-section { margin: 0.5rem 0.5rem 0.15rem; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-secondary); }
.site-header .nav-group > div .nav-section:first-child { margin-top: 0.15rem; }
/* The account menu: the avatar is its summary (no chevron); the panel names who is signed in, lists the account pages
   with icons as full-width rows, and ends with Sign out. */
.site-header .account-menu > summary { list-style: none; border-radius: 999px; }
.site-header .account-menu > summary::after { display: none; }
.site-header .account-menu > summary::-webkit-details-marker { display: none; }
.site-header .account-menu[open] > summary > span:first-child { box-shadow: 0 0 0 3px rgb(255 255 255 / 35%); }
.site-nav .account-menu > div { width: 264px; padding: 0.4rem; border-radius: 14px; top: 2.6rem; }
.site-header .account-menu .account-who { display: flex; align-items: center; gap: 0.7rem; margin: 0 0 0.35rem; padding: 0.6rem 0.6rem 0.75rem;
  border-bottom: 1px solid var(--brand-sky); line-height: 1.3; }
.site-header .account-menu .account-who strong { display: block; color: var(--brand-navy); font-size: 0.92rem; }
.site-header .account-menu .account-who small { display: block; color: var(--text-secondary); font-size: 0.78rem; overflow-wrap: anywhere; }
.site-header .account-menu .account-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem;
  border-radius: 50%; background: var(--brand-cyan, #00bde3); color: var(--brand-navy); font-weight: 700; font-size: 0.95rem; }
.site-header .account-menu .account-item, .site-header .account-menu .account-signout button {
  display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.6rem; border-radius: var(--control-radius); font-size: 0.9rem; line-height: 1.25;
  margin: 0; color: var(--brand-navy) !important; text-decoration: none; }
.site-header .account-menu .account-item .icon, .site-header .account-menu .account-signout .icon { width: 1rem; height: 1rem; margin: 0; color: var(--brand-blue); flex: none; }
.site-header .account-menu .account-item:hover, .site-header .account-menu .account-item:focus-visible,
.site-header .account-menu .account-signout button:hover, .site-header .account-menu .account-signout button:focus-visible { background: #eef5fc; text-decoration: none; }
.site-header .account-menu .account-item[aria-current="page"] { font-weight: 600; background: #eef5fc; }
.site-header .account-menu .nav-section { margin: 0.6rem 0.6rem 0.2rem; }
.site-header .account-menu .account-signout { margin: 0.35rem 0 0; padding: 0.35rem 0 0; border-top: 1px solid var(--brand-sky); }
.site-header .account-menu .account-signout button { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: flex; align-items: center;
  gap: 0.65rem; padding: 0.5rem 0.6rem; border-radius: var(--control-radius); font-size: 0.9rem; color: var(--brand-navy); }
.site-nav .nav-toggle { display: none; }
@media (max-width: 1100px) {
  .site-header .brand { flex-shrink: 1 !important; min-width: 0; overflow-wrap: anywhere; }
  .site-header > nav { column-gap: 1rem; }
  .site-nav { flex-basis: 100% !important; min-width: 0; }
  .site-nav.js .nav-toggle { display: list-item; }
  .site-nav.js .nav-links { display: none; width: 100%; order: 3; }
  .site-nav.js.open .nav-links { display: block; }
  .site-nav.js .nav-links > ul { flex-direction: column; align-items: stretch !important; }
  .site-nav .nav-links > ul > li { width: 100%; }
  .site-nav .nav-links { border-top: 1px solid rgb(255 255 255 / 20%); padding-top: 0.5rem !important; }
  .site-nav .nav-links a, .site-nav .nav-links summary { min-height: 44px; padding: 0.65rem 0.75rem !important; }
  .site-nav .nav-toggle { margin-right: auto; }
  .site-nav .nav-toggle button, .site-nav .site-account > a, .site-nav .account-menu > summary { min-height: 44px; }
  .site-nav .account-menu > summary { min-width: 44px; justify-content: center; }
  .site-nav .nav-group > div { position: static; box-shadow: none; width: auto; border: 0; padding: 0 0 0 1rem; background: transparent; }
  .site-header .nav-group > div a { color: var(--brand-sky) !important; }
  .site-header .nav-group > div .nav-section { color: var(--brand-sky); opacity: 0.7; }
  .site-nav .site-search { width: 100%; order: 4; }
  .site-nav .site-search input { width: 100% !important; min-width: 0; height: 44px !important; }
  /* The account menu stays a white panel under the avatar: it sits in the bar, not in the collapsed menu. */
  .site-nav .account-menu > div { position: absolute; width: min(264px, calc(100vw - 2rem)); padding: 0.4rem; background: #fff; border: 1px solid var(--brand-sky); box-shadow: 0 12px 40px rgb(51 8 51 / 20%); }
  .site-header .account-menu > div a { color: var(--brand-navy) !important; }
  .site-header .account-menu > div .nav-section { color: var(--text-secondary); opacity: 1; }
}

@media (max-width: 575px) {
  .site-header .brand { font-size: 1rem !important; line-height: 1.3; }
  .site-header > nav { row-gap: 0.75rem; }
}

/* Load commands on /data: the command wraps, the Copy button stays beside it. */
.copy-cmd { display: inline; }
.copy-cmd code { overflow-wrap: anywhere; }
.copy-btn { margin: 0 0 0 0.35rem; vertical-align: baseline; }

/* Load / Refresh on /data: a second step names the target file; the job panel shows status and the log tail. */
.load-confirm { margin: 0.35rem 0 0.5rem; }
.load-confirm > summary.load-btn { border: 1px solid var(--soft-line); cursor: pointer; list-style: none; }
.load-confirm > summary.load-btn::-webkit-details-marker { display: none; }
.load-confirm > summary.load-btn::after { display: none; }
.load-confirm[open] > summary.load-btn { margin-bottom: 0.4rem; }
.load-form { border-left: 3px solid var(--soft-line); padding: 0.25rem 0 0.25rem 0.75rem; margin: 0; }
.load-form code, .load-live code { overflow-wrap: anywhere; white-space: normal; }
.load-form .load-core { border-left: 3px solid var(--warning); padding-left: 0.5rem; }
.load-form label { display: block; margin: 0.25rem 0 0.5rem; }
.load-form button.load-start { margin: 0; }
.load-jobs { border: 1px solid var(--soft-line); border-radius: 8px; padding: 0.75rem 1rem; margin: 0 0 1.25rem; }
.load-jobs h2 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.load-table { min-width: 34rem; }
.load-table td:first-child { min-width: 10rem; }
.load-live { margin: 0.5rem 0 0.75rem; }
/* /data rows: one line (where/when, then Copy command and Load/Refresh on the right); the where/when text is the
   summary of the row's details, which hold the full command, source receipts, build record and notes. */
.ds-line { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.25rem 0.75rem; }
.ds-line > .row-details { flex: 1 1 14rem; min-width: 0; margin: 0; }
.data-rows .row-details > summary:not([role]) { display: block; margin: 0; line-height: 1.55; color: var(--text-primary); overflow-wrap: anywhere; }
.data-rows .row-details > summary:not([role]):hover { color: var(--link); }
.data-rows .row-details > summary::after { display: none; }
.data-rows .row-details > summary::before { content: ""; display: inline-block; width: 0.85rem; height: 0.85rem; margin-right: 0.3rem; vertical-align: -0.12em; background-image: var(--pico-icon-chevron); background-size: 0.85rem auto; background-repeat: no-repeat; background-position: center; transform: rotate(-90deg); opacity: 0.7; }
.data-rows .row-details[open] > summary::before { transform: rotate(0); }
.data-rows .row-details[open] > summary:not([role]) { margin-bottom: 0.4rem; }
.row-details-body { border-left: 3px solid var(--soft-line); padding: 0.1rem 0 0.1rem 0.75rem; }
.row-details-body > p, .row-details-body > ol { margin: 0 0 0.35rem; }
.row-details-body .receipt { margin: 0.25rem 0 0.5rem; }
.ds-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; gap: 0.35rem; margin-left: auto; }
.ds-actions .copy-btn { margin: 0; white-space: nowrap; }
.ds-actions .load-confirm { margin: 0; }
.ds-actions .load-confirm > summary.load-btn { padding: 0.1rem 0.6rem; font-size: 0.75rem; line-height: 1.4; white-space: nowrap; }
.ds-actions .load-confirm[open] { text-align: right; }
.ds-actions .load-confirm[open] > .load-form { width: min(34rem, 82vw); margin-left: auto; text-align: left; }
.load-log { max-height: 18rem; overflow: auto; font-size: 0.75rem; line-height: 1.35; padding: 0.5rem 0.75rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.load-actions button { margin: 0; }
.tag.load-succeeded { border-color: var(--good); color: var(--good); }
.tag.load-failed, .tag.load-interrupted { border-color: var(--critical); color: var(--critical); }
.tag.load-running, .tag.load-queued, .tag.load-cancelled { border-color: var(--warning); }