:root {
  color-scheme: dark;
  --page: #0b0b0b;
  --surface: #1c1c1c;
  --surface-raised: #252525;
  --surface-hover: #303030;
  --input: #151515;
  --ink: #f2f2f2;
  --muted: #ababab;
  --line: #2b2b2b;
  --line-strong: #414141;
  --menu: #242424;
  --menu-hover: #353535;
  --control-radius: 10px;
  --input-line: #535353;
  --accent: #d4d4d4;
  --green: var(--accent); /* Shared accent alias used by the existing modules. */
  --accent-ink: #141414;
  --accent-hover: #f0f0f0;
  --soft: #282828;
  --blue: #8e8e8e;
  --dark: #141414;
  --danger: #ff9eaa;
  --danger-soft: #3b252d;
  --warning: #f0c47a;
  --warning-soft: #382f22;
  --radius: 14px;
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  font-synthesis: none;
}

/* Foundation */
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font: 400 1rem/1.5 "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
:root { scrollbar-color: var(--input-line) var(--page); }
::selection { background: var(--soft); color: var(--green); }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 2.25rem; line-height: 1.2; font-weight: 500; letter-spacing: -.04em; }
h2 { font-size: 1.05rem; font-weight: 550; letter-spacing: -.02em; }
h3 { font-size: .95rem; font-weight: 550; }
a { color: inherit; text-decoration: none; }
svg { display: block; width: 100%; }
button, input, select, textarea { font: inherit; }
button, select, summary { cursor: pointer; }
button { border: 1px solid var(--line-strong); background: transparent; color: var(--ink); border-radius: 999px; padding: 10px 17px; font-size: .8125rem; font-weight: 500; min-height: 40px; line-height: 1.4; }
button:hover { background: var(--surface); border-color: var(--input-line); }
button:active:not(:disabled) { background: var(--surface-hover); }
button:disabled { opacity: .5; cursor: default; }
button:disabled:hover { background: transparent; border-color: var(--line-strong); }
button.primary { background: var(--green); border-color: var(--green); color: var(--accent-ink); font-weight: 600; }
button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button.primary:disabled:hover { background: var(--green); border-color: var(--green); }
:where(button, a, input, select, textarea, summary):focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
label { display: grid; gap: 8px; font-size: .75rem; font-weight: 450; color: var(--muted); }
select, input, textarea { min-width: 0; width: 100%; padding: 11px 0; border: 0; border-bottom: 1px solid var(--line-strong); border-radius: 0; background: transparent; color: var(--ink); font-size: .875rem; }
input:hover, textarea:hover { border-color: var(--input-line); }
input:focus, textarea:focus { border-bottom-color: var(--accent); }
input::placeholder, textarea::placeholder { color: #858585; opacity: 1; }
/* Refined selects remain native controls; unsupported browsers retain a standard picker. */
select {
  appearance: none;
  border: 0;
  border-radius: var(--control-radius);
  padding: 10px 34px 10px 12px;
  min-height: 40px;
  font-size: .875rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a8a8a8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
select:hover:not(:disabled), select:open { background-color: var(--surface); }
select:disabled { opacity: .45; cursor: default; }
select option { background: var(--menu); color: var(--ink); }
@supports (appearance: base-select) {
  select, select::picker(select) { appearance: base-select; }
  select { display: inline-flex; align-items: center; gap: 14px; padding-right: 12px; background-image: none; }
  select::picker-icon {
    content: '';
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    margin-inline-start: auto;
    background: var(--muted);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  select:open::picker-icon { rotate: 180deg; }
  select::picker(select) {
    width: max-content;
    min-width: max(200px, anchor-size(width));
    max-width: min(420px, calc(100vw - 24px));
    max-height: min(360px, 55dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-block: 6px;
    padding: 6px;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    background: var(--menu);
    color: var(--ink);
    box-shadow: 0 12px 48px #00000060, 0 2px 8px #00000030;
    scrollbar-width: thin;
    scrollbar-color: var(--input-line) transparent;
  }
  select option {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 40px;
    padding: 10px 12px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    font: 400 .875rem/1.45 "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
  }
  select option:hover, select option:focus-visible { background: var(--menu-hover); outline: 0; }
  select option:checked { color: var(--ink); font-weight: 500; }
  select option:disabled { opacity: .4; cursor: default; }
  select option::checkmark { order: 1; margin-inline-start: auto; font-size: .85rem; font-weight: 400; color: var(--ink); }
  select optgroup { padding: 6px 4px; color: var(--muted); font-size: .75rem; font-weight: 500; }
}
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.error, .negative { color: var(--danger) !important; }
.error { padding-top: 10px; }
.error:empty { display: none; }
body[data-auth="locked"] > .shell, body[data-auth="locked"] > dialog, body[data-auth="locked"] > .toast { display: none !important; }
body[data-auth="ready"] > #auth-gate { display: none; }

/* A quiet navigation rail, with one active marker instead of boxed links. */
.shell { display: grid; grid-template-columns: 224px minmax(0,1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; align-self: start; height: 100dvh; display: flex; flex-direction: column; gap: 48px; padding: 32px 20px 24px; background: var(--dark); border-right: 1px solid var(--line); color: var(--muted); }
.brand { display: flex; gap: 10px; align-items: center; font-size: 1.4rem; font-weight: 650; color: var(--ink); letter-spacing: -.04em; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 9px; background: var(--green); color: var(--accent-ink); font-size: 1.1rem; font-weight: 800; }
.brand-edition { font-size: .57rem; letter-spacing: .1em; color: var(--muted); font-weight: 400; margin-left: 2px; }
.nav { display: grid; gap: 8px; }
.nav-heading { margin-bottom: 8px; font-size: .61rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); }
.nav a { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 11px 0; font-size: .79rem; font-weight: 450; position: relative; }
.nav a:hover { color: var(--ink); background: #ffffff05; border-radius: 8px; }
.nav a.active { color: var(--green); }
.nav a.active::before { content: ''; position: absolute; width: 2px; height: 20px; left: -20px; background: var(--green); }
.nav-icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.side-note { margin-top: auto; }
#sign-out { border: 0; padding: 4px 0; min-height: 30px; color: var(--muted); font-size: .73rem; }
#sign-out:hover { background: none; color: var(--ink); }
.main { width: 100%; min-width: 0; max-width: 1600px; margin: 0 auto; padding: 40px 42px 28px; --trend-height: 230px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 26px; margin-bottom: 32px; }
.eyebrow { margin-bottom: 12px; font-size: .65rem; font-weight: 450; letter-spacing: .11em; color: var(--muted); text-transform: uppercase; }
.eyebrow > span { margin: 0 6px; color: var(--input-line); }
.subtitle { margin-top: 12px; font-size: .85rem; color: var(--muted); line-height: 1.7; }
.actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.actions button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.button-icon { width: 15px; height: 15px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.actions #settings-open, .actions #export-json { border-color: transparent; color: var(--muted); }
.actions #settings-open:hover, .actions #export-json:hover { color: var(--ink); }
.badge { display: inline-flex; align-items: center; font-size: .65rem; color: var(--green); font-weight: 500; }
.badge::before { content: ''; width: 5px; height: 5px; margin-right: 7px; background: currentColor; border-radius: 50%; }
.sample-label { margin-top: 10px; }
.report-status { font-size: .8rem; color: var(--muted); margin: -12px 0 20px; line-height: 1.6; }
.report-status:empty { display: none; }

/* The report reads as one canvas. Hierarchy comes from type and space. */
.filters { display: grid; grid-template-columns: 1.2fr repeat(4,minmax(0,1fr)); gap: 24px; padding: 0 0 24px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.filters label { font-size: .72rem; gap: 5px; min-width: 0; }
.filters select { justify-self: start; width: auto; max-width: 100%; margin-left: -12px; font-size: .875rem; }
.custom-dates { display: flex; gap: 24px; margin: -10px 0 28px; }
.impact-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px; padding: 0 0 28px; }
.impact-metric { min-width: 0; }
.metric-label { margin-bottom: 13px; color: var(--muted); font-size: .73rem; font-weight: 450; }
.metric { font-size: 2.5rem; line-height: 1.1; font-weight: 450; letter-spacing: -.055em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.featured .metric { color: var(--green); }
.metric-note { margin-top: 12px; font-size: .72rem; color: var(--muted); line-height: 1.6; }
.submetrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 28px; padding: 23px 0; border-block: 1px solid var(--line); }
.submetric { min-width: 0; }
.submetric span { display: block; margin-bottom: 6px; font-size: .7rem; color: var(--muted); }
.submetric strong { font-size: 1rem; font-weight: 500; font-variant-numeric: tabular-nums; }
#accounting-coverage { font-size: .7rem; margin-top: 12px; }
.middle { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(280px,1fr); gap: 36px; margin: 36px 0 0; }
.panel { min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.panel-sub { margin-top: 7px; font-size: .75rem; color: var(--muted); line-height: 1.6; }
.middle > .panel + .panel { border-left: 1px solid var(--line); padding-left: 32px; }
.trend-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 20px 0 12px; }
.trend-views { display: flex; gap: 16px; }
.trend-views button { min-height: 30px; padding: 4px 0 7px; border: 0; border-bottom: 1px solid transparent; border-radius: 0; background: none; color: var(--muted); font-size: .72rem; }
.trend-views button:hover { color: var(--ink); background: none; }
.trend-views button[aria-pressed="true"] { border-color: var(--green); color: var(--green); }
.legend { display: flex; gap: 7px; align-items: center; color: var(--muted); font-size: .65rem; }
.swatch { width: 16px; height: 2px; background: var(--green); }
.chart-wrap { min-height: var(--trend-height); position: relative; }
#trend svg { height: var(--trend-height); }
#trend svg:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.axis-text { font: 12px "Segoe UI",sans-serif; fill: var(--muted); }
.trend-tooltip { position: absolute; z-index: 2; pointer-events: none; width: 260px; max-width: calc(100% - 16px); padding: 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--input-line); border-radius: 8px; box-shadow: 0 12px 40px #00000050; font-size: .75rem; }
.trend-tooltip strong { display: block; margin-bottom: 10px; font-weight: 550; }
.trend-tooltip dl { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 7px 12px; margin: 0; }
.trend-tooltip dt { color: var(--muted); }
.trend-tooltip dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.comparison-row { margin: 26px 0; }
.comparison-label { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 12px; font-size: .8rem; }
.comparison-label strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.track { position: relative; height: 5px; background: var(--surface-hover); overflow: hidden; }
.track span { position: absolute; top: 0; left: 0; height: 100%; min-width: 2px; background: var(--green); }
.track .runtime { background: var(--blue); }
.key { display: flex; align-items: center; gap: 7px; margin-top: 10px; font-size: .68rem; color: var(--muted); }
.mini-square { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.mini-square.blue { background: var(--blue); }
.comparison-bottom { border-top: 1px solid var(--line); padding-top: 18px; font-size: .73rem; line-height: 1.8; color: var(--muted); }
.empty { padding: 45px 15px; text-align: center; color: var(--muted); font-size: .85rem; }
.footer { display: flex; justify-content: flex-end; gap: 12px; margin-top: 30px; color: var(--muted); font-size: .65rem; line-height: 1.6; }

/* Run history is a list with a shared header and subtle row rules. */
.history { padding: 0; }
.history .panel-head { padding: 0 0 20px; margin: 0; }
.history-heading { display: flex; align-items: baseline; gap: 9px; }
#run-count { color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.history-period { color: var(--muted); font-size: .7rem; white-space: nowrap; }
.history-runs { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.history-run { min-width: 0; padding: 22px 0; border-bottom: 1px solid var(--line); }
.history-run-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.history-run-identity { display: flex; gap: 12px; min-width: 0; }
.history-run-identity > .button-icon { width: 18px; height: 18px; color: var(--muted); margin-top: 3px; }
.history-run-heading { min-width: 0; }
.history-run h3 { font-size: .875rem; font-weight: 500; line-height: 1.6; overflow-wrap: anywhere; }
.history-run-brand { color: var(--muted); font-weight: 400; }
.history-run-brand::before { content: ' · '; }
.history-run-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; margin-top: 5px; color: var(--muted); font-size: .69rem; }
.history-run-meta > span, .history-run-meta time { min-width: 0; overflow-wrap: anywhere; }
.history-run-meta > :not(:last-child)::after { content: '·'; margin-left: 10px; color: #777; }
.history-run-source { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-run-meta time { white-space: nowrap; }
.history-run-reference { color: #858585; font: .63rem/1.5 ui-monospace, Consolas, monospace; }
.history-run-meta .history-run-reference::after { content: none; }
.history-run-state { display: inline-flex; align-items: center; gap: 6px; padding-top: 4px; font-size: .65rem; color: var(--muted); white-space: nowrap; }
.history-run-state::before { content: ''; width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.history-run-state[data-state=completed] { color: var(--green); }
.history-run-state[data-state=failed], .history-run-state[data-state=interrupted] { color: var(--danger); }
.history-run-state[data-state=partial] { color: var(--warning); }
.history-run-body { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; padding-left: 30px; margin-top: 13px; }
.history-run-metrics { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; margin: 0; }
.history-run-metrics > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.history-run-metrics dt { color: var(--muted); font-size: .65rem; }
.history-run-metrics dd { order: -1; margin: 0; font-size: .83rem; font-variant-numeric: tabular-nums; }
.history-run-actions { margin-left: auto; }
.history-run .run-link { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; color: var(--muted); font-size: .71rem; font-weight: 400; }
.history-run .run-link:hover { color: var(--ink); }
.history-run .run-link .button-icon { width: 13px; height: 13px; }
.history-run-more { min-width: 0; }
.history-run-more[open] { flex-basis: 100%; }
.history-run-more > summary { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; color: var(--muted); font-size: .71rem; list-style: none; cursor: pointer; }
.history-run-more > summary::-webkit-details-marker { display: none; }
.history-run-more > summary::after { content: ''; width: 4px; height: 4px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; rotate: 45deg; margin-top: -3px; }
.history-run-more[open] > summary::after { rotate: 225deg; margin-top: 2px; }
.history-run-more > summary:hover { color: var(--ink); }
.history-run-more .record-fields { max-width: 900px; padding-left: 14px; border-left: 1px solid var(--line-strong); }
.history-run-more .record-fields dt { font-size: .68rem; }
.history-run-more .record-fields dd { font-size: .75rem; }
.history-accounting-note, .history-footnote { color: var(--muted); font-size: .68rem; line-height: 1.8; }
.history-run-note { margin: 8px 0 0 30px; color: var(--warning); font-size: .68rem; }
.history-footnote { margin-top: 18px; }
.history-empty { padding: 64px 20px; text-align: center; }
.history-empty h3 { font-size: 1rem; font-weight: 450; }
.history-empty p { color: var(--muted); font-size: .77rem; margin-top: 10px; }
body[data-page=history] .filters { grid-template-columns: 1.2fr 1.2fr 1fr auto; align-items: end; gap: 18px 28px; margin-bottom: 26px; }
.history-filter-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; margin-bottom: 4px; padding: 6px 0; background: none; border: 0; border-radius: 0; color: var(--muted); font-size: .72rem; white-space: nowrap; }
.history-filter-toggle::after { content: ''; width: 5px; height: 5px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; rotate: 45deg; margin-top: -3px; }
.history-filter-toggle[aria-expanded=true]::after { rotate: 225deg; margin-top: 2px; }
.history-filter-toggle:hover { background: none; color: var(--ink); }
.history-extra-filters { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 640px; padding-top: 8px; }
.table-scroll { overflow: auto; border-top: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: .8rem; }
th { text-align: left; padding: 14px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .72rem; font-weight: 450; white-space: nowrap; }
td { padding: 17px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
tbody tr:hover { background: #ffffff05; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.run-link { border: 0; padding: 0; min-height: 0; color: var(--green); font-size: .8rem; font-weight: 500; background: none; border-radius: 0; }
.run-link:hover { text-decoration: underline; background: none; }
.table-meta { display: block; color: var(--muted); font-size: .68rem; margin-top: 4px; }
.status { display: inline-flex; gap: 6px; align-items: center; font-size: .68rem; color: var(--green); }
.status::before { content: ''; width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.status.failed { color: var(--danger); }
.status.missing { color: var(--warning); }
.table-footer { display: flex; justify-content: space-between; gap: 15px; padding: 18px 0 0; font-size: .7rem; color: var(--muted); }
.report-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Dialogs are the only elevated surfaces in the report. */
dialog { border: 1px solid var(--line-strong); border-radius: 18px; padding: 0; background: var(--surface); color: var(--ink); max-width: 650px; width: calc(100% - 32px); max-height: 88vh; box-shadow: 0 24px 90px #00000070; }
dialog::backdrop { background: #000000bb; backdrop-filter: blur(5px); }
dialog > form { display: flex; flex-direction: column; max-height: calc(88vh - 2px); }
.dialog-head, .dialog-actions { flex-shrink: 0; }
.dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px; border-bottom: 1px solid var(--line); }
.dialog-head h2 { font-size: 1.2rem; }
.close-button { width: 34px; height: 34px; min-height: 34px; padding: 0; border: 0; border-radius: 50%; font-size: 1.3rem; font-weight: 400; }
.dialog-body { min-height: 0; padding: 24px; overflow: auto; }
.dialog-body p { font-size: .85rem; color: var(--muted); line-height: 1.7; }
.dialog-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 24px; border-top: 1px solid var(--line); }
.input-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 18px 0; }
.setting-section { padding: 18px 0; border-top: 1px solid var(--line); margin-top: 14px; }
.setting-section h3 { margin-bottom: 7px; }
.setting-section .input-grid { margin-bottom: 0; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 20px 0; }
.detail-grid > div { min-width: 0; }
.detail-grid dt { color: var(--muted); font-size: .75rem; margin-bottom: 6px; }
.detail-grid dd { margin: 0; font-size: .9rem; font-weight: 500; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.detail-note { border-left: 2px solid var(--input-line); padding: 4px 0 4px 14px; font-size: .8rem; line-height: 1.7; }
.detail-section { margin-top: 24px; }
#detail { display: none; max-width: 1100px; }
#detail[open] { display: flex; flex-direction: column; }
#detail .dialog-body { overflow: auto; }
#records iframe { width: 100%; min-height: 140px; border: 1px solid var(--line); border-radius: 6px; background: var(--input); }
.record-note, #detail-status { color: var(--muted); font-size: .8rem; line-height: 1.7; }
.record-filters { display: flex; gap: 18px; align-items: end; margin: 16px 0; }
.record-filters label { flex: 1; font-size: .75rem; }
.record-filters input, .record-filters select { width: 100%; margin-top: 6px; padding: 9px 0; }
.detail-table { font-size: .75rem; margin: 12px 0; }
.detail-table th, .detail-table td { white-space: normal; overflow-wrap: anywhere; }
.detail-table details { max-width: 360px; }
.detail-table pre { white-space: pre-wrap; }
#more { margin-top: 12px; }
.manual-timings label { align-content: start; }
.manual-timings small { font-size: .75rem; font-weight: 400; line-height: 1.5; }
.dialog-body .setting-help { margin-top: 14px; font-size: .8rem; }
.toast { position: fixed; bottom: 24px; right: 24px; z-index: 5; border: 1px solid var(--input-line); border-radius: 8px; padding: 12px 18px; background: var(--surface); color: var(--ink); box-shadow: 0 12px 40px #00000050; font-size: .8rem; }

/* Account screens use the same open canvas and a single focused form. */
.login-page, .auth-gate { min-height: 100vh; display: grid; place-items: center; padding: 36px 24px; background: radial-gradient(ellipse at 50% 0%, #41414130, transparent 55%), var(--page); }
.login-card { width: 100%; max-width: 360px; }
.login-card .brand { margin-bottom: 48px; }
.login-card .eyebrow { color: var(--green); }
.login-card h1 { font-size: 2.3rem; }
.login-card .subtitle { font-size: .85rem; line-height: 1.8; }
.login-form { display: grid; gap: 24px; margin-top: 36px; }
.login-form .primary { padding: 12px; margin-top: 8px; }
.auth-status { min-height: 1.4em; margin: 20px 0; font-size: .8rem; line-height: 1.7; }
.login-note { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 24px; color: var(--muted); font-size: .73rem; line-height: 1.8; }
.login-card a { color: var(--green); font-size: .8rem; }
.login-card a:hover { text-decoration: underline; }

/* Run details: summary, item accordions, and a separate technical view. */
.detail-tabs{display:flex;gap:6px;padding:12px 24px;border-bottom:1px solid var(--line);flex-shrink:0}
.detail-tabs button{border:0;background:transparent;color:var(--muted);padding:8px 12px;font-weight:500}
.detail-tabs button[aria-selected="true"]{background:transparent;color:var(--green);border-bottom:1px solid var(--green);border-radius:0;font-weight:550}
.run-overview h3{font-size:1.1rem;margin:4px 0 18px}
.record-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 20px;margin:16px 0}
.record-fields>div{min-width:0}.record-fields dt,.record-metrics dt{color:var(--muted);font-size:.75rem;line-height:1.5;margin-bottom:4px}
.record-fields dd{margin:0;font-size:.875rem;line-height:1.6;overflow-wrap:anywhere;white-space:pre-wrap}
.record-fields .field-wide{grid-column:1/-1}.record-list{margin:0;padding-left:20px}.record-list>li+li{margin-top:8px}
.record-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin:18px 0 0;padding:14px 16px;background:transparent;border-top:1px solid var(--line);border-radius:0}
.record-metrics dd{margin:0;font-weight:650;font-size:1.05rem;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.record-text{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--input);border:1px solid var(--line);padding:12px 14px;border-radius:8px;font-size:.875rem;line-height:1.7;font-weight:400}
.raw-json{font:12px/1.6 Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--input);padding:12px;border-radius:8px;margin:12px 0 0;max-height:360px;overflow:auto}
.run-usage>.usage-detail{border-top:1px solid var(--line);padding:18px 0 0;margin-top:18px}
.usage-heading{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}.usage-heading strong{font-size:.9rem;overflow-wrap:anywhere}
.usage-cost-note{margin-top:12px;font-size:.8rem!important}.record-warning{font-size:.8rem!important;color:var(--warning)!important;margin-top:10px}
#records,#record-audit{display:grid;gap:14px}.record-card{border-bottom:1px solid var(--line);padding:18px 0;min-width:0}
.item-record-group{border:1px solid var(--line);border-radius:10px;min-width:0;overflow:hidden}
.item-record-summary{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;list-style:none}
.item-record-summary::-webkit-details-marker{display:none}.item-record-summary::before{content:'›';font-size:1.4rem;color:var(--muted);line-height:1;flex-shrink:0;transition:transform .15s}
.item-record-group[open]>.item-record-summary::before{transform:rotate(90deg)}
.item-record-summary:hover{background:var(--input)}.item-record-summary:focus-visible{outline:3px solid var(--green);outline-offset:-3px;border-radius:9px}
.item-record-heading{display:grid;gap:8px;min-width:0;flex:1}.item-record-title{font-size:.9rem;overflow-wrap:anywhere}
.item-record-meta{display:flex;gap:6px;flex-wrap:wrap}.item-record-count{margin-left:auto;flex-shrink:0;font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}
.item-record-body{display:grid;gap:12px;border-top:1px solid var(--line);background:var(--input);padding:16px}.item-record-body>.record-card{background:var(--surface)}
.processing-panel{border:1px solid var(--line);border-radius:8px;background:var(--surface);min-width:0}
.processing-panel>summary{padding:12px 14px;cursor:pointer;font-size:.85rem;font-weight:600;overflow-wrap:anywhere}
.processing-panel>summary:focus-visible{outline:3px solid var(--green);outline-offset:-3px;border-radius:7px}
.processing-body{padding:12px;display:grid;gap:12px;border-top:1px solid var(--line);min-width:0}
.processing-body .record-card{background:var(--surface)}.processing-body .processing-body{padding:10px}
.item-load-more{justify-self:start}
.run-detail-actions{display:flex;align-items:center;gap:12px}.run-detail-actions>#export-run-xlsx{font-size:.8rem}
.item-record-body>.record-fields{margin:0;background:var(--surface);padding:16px;border:1px solid var(--line);border-radius:8px}
@media(max-width:430px){.run-detail-actions{gap:8px}.run-detail-actions>#export-run-xlsx{padding:8px;font-size:.75rem}}
.category-heading{font-size:.85rem;margin:2px 0 0}.category-list{margin:0;padding-left:20px;font-size:.875rem;line-height:1.6}
.category-list li+li{margin-top:6px}.category-attempts{list-style:none;padding:0;margin:0;font-size:.8rem}
.category-attempts li+li{margin-top:12px}.category-attempts p{margin:4px 0 0}
.activity-section{display:grid;gap:14px}.activity-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.activity-heading h4{font-size:.9rem;margin:0}.activity-status{font-size:.75rem;color:var(--muted);font-weight:600}.activity-status.complete{color:var(--green)}
.activity-status.warning{color:var(--danger)}.activity-result{min-width:0}.activity-result>.record-fields{margin:0}
.activity-result>.record-content>.record-fields{margin:0}.activity-result+.processing-panel{margin-top:0}
.previous-attempt+.previous-attempt{border-top:1px solid var(--line);padding-top:12px}.previous-attempt h5{font-size:.8rem;margin:0 0 12px}
#shared-records:not(:empty){margin-top:22px}.shared-record-group>.item-record-summary>strong{font-size:.875rem}
.record-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.record-head h4,#record-audit h4{margin:0;font-size:.9rem;font-weight:650}
.record-sequence{color:var(--muted);font-size:.75rem;font-variant-numeric:tabular-nums}.record-meta{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 14px}
.record-tag{display:inline-block;background:var(--surface-raised);color:var(--muted);font-size:.7rem;border-radius:5px;padding:3px 7px;overflow-wrap:anywhere}.record-tag.warning{background:var(--warning-soft);color:var(--warning)}
.record-content h5{font-size:.8rem;font-weight:600;margin:16px 0 8px;color:var(--muted)}.record-card>.record-fields{margin-bottom:0}.record-card .record-content{min-width:0}.record-card .usage-heading{margin-top:4px}
.record-filters label{min-width:140px}.record-filters button{flex-shrink:0}.run-overview>.record-fields:first-of-type{grid-template-columns:repeat(4,minmax(0,1fr))}
#detail-technical section{padding-bottom:18px;border-bottom:1px solid var(--line)}#detail-technical h4{font-size:.85rem;margin:18px 0 8px}#detail-technical .detail-note{margin-top:18px}
.formatted-description{border-left:3px solid var(--soft);padding:4px 0 4px 16px;white-space:normal;font-size:.875rem;line-height:1.7;overflow-wrap:anywhere}
#detail .formatted-description p{margin:0 0 10px;color:var(--ink);font-size:.875rem}.formatted-description p:last-child{margin-bottom:0}
.formatted-description ul,.formatted-description ol{padding-left:22px;margin:10px 0}.formatted-description li+li{margin-top:5px}
.formatted-description h1,.formatted-description h2,.formatted-description h3,.formatted-description h4{font-size:.95rem;margin:14px 0 8px}
.formatted-description table{display:block;max-width:100%;overflow:auto}.formatted-description td,.formatted-description th{white-space:normal;padding:8px}
@media(max-width:720px){.record-fields{grid-template-columns:1fr 1fr}.record-metrics{grid-template-columns:1fr 1fr}.dialog-body{padding:18px}.record-card{padding:14px}.record-filters label{flex-basis:100%}.run-overview>.record-fields:first-of-type{grid-template-columns:1fr 1fr}}
@media(max-width:430px){.record-fields{grid-template-columns:1fr}.record-metrics{padding:12px;gap:12px}.record-metrics dd{font-size:.95rem}.dialog-head{padding:18px}.record-head h4{font-size:.85rem}.run-overview>.record-fields:first-of-type{grid-template-columns:1fr}.detail-tabs{padding:10px 16px;gap:3px}.detail-tabs button{padding:8px;font-size:.8rem}.item-record-summary{padding:14px 12px;gap:9px;flex-wrap:wrap}.item-record-count{flex-basis:100%;margin-left:22px}.item-record-body{padding:10px}}

/* Assumptions and metric definitions share one scrollable menu. */

.footer{justify-content:flex-end}
#settings{max-width:800px}
.settings-state{margin-top:8px;font-size:.8rem!important}
.reset-help{margin-top:18px;padding:12px;border-radius:8px;background:var(--input);font-size:.8rem!important}
#reload-assumptions{margin-top:12px}
#settings .dialog-head{gap:16px}
.dialog-subtitle{margin-top:5px;font-size:.8rem;color:var(--muted);line-height:1.5}
.close-button{flex-shrink:0}
.assumption-callout{margin:18px 0;padding:4px 0 4px 16px;border-left:2px solid var(--green);font-size:.875rem;line-height:1.6}
.assumption-callout strong{color:var(--green);font-weight:600}
#settings .assumption-callout p{margin-top:4px;color:var(--muted);font-size:.8rem}
.settings-guide{border-block:1px solid var(--line);margin:14px 0;overflow:hidden}
.settings-guide summary{padding:8px 14px;font-size:.875rem;font-weight:600;cursor:pointer;background:transparent;line-height:1.5}
.settings-guide summary:hover{background:var(--surface-hover)}
.settings-guide summary:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
.metric-guide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;margin:0;padding:0 14px}
.metric-guide>div{min-width:0;padding:6px 0;border-top:1px solid var(--line)}
.metric-guide dt{font-size:.8rem;font-weight:600;line-height:1.4}
.metric-guide dd{margin:3px 0 0;font-size:.8rem;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}
.metric-formula{display:block;margin-bottom:2px;color:var(--ink);font-variant-numeric:tabular-nums}
#settings .calculation-note{margin:0;padding:7px 14px;border-top:1px solid var(--line);background:var(--surface-raised);font-size:.75rem;line-height:1.45}
#settings .setting-section{margin-top:20px;padding:20px 0 0}
#settings .setting-section>p{font-size:.8rem}
#settings .input-grid{gap:18px;margin:16px 0 0}
#settings label{align-content:start;color:var(--ink);font-weight:600;line-height:1.5}
#settings .field-help,.field-help{font-size:.75rem;font-weight:400;color:var(--muted);line-height:1.6}
#settings .setting-note{margin-top:12px;padding:11px 13px;background:var(--input);border-radius:8px;font-size:.8rem}
.baseline-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.baseline-card{display:flex;flex-direction:column;align-items:flex-start;padding:16px 0;border-top:1px solid var(--line)}
.baseline-card h4{margin:0;font-size:.85rem;font-weight:600;line-height:1.5}
.cli-label{margin-top:5px;font-size:.7rem;color:var(--muted);background:var(--surface-raised);padding:3px 7px;border-radius:4px}
#settings .baseline-card p{margin:10px 0 14px;font-size:.8rem}
.baseline-card label{width:100%;margin-top:auto}
@media(max-width:600px){
 .metric-guide{grid-template-columns:1fr}
 #settings .dialog-head{padding:18px}
 #settings .dialog-body{padding:18px}
 #settings .input-grid,.baseline-grid{grid-template-columns:1fr}
 #settings .dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 18px}
 #settings .dialog-actions button{font-size:.8rem;padding:.62rem .5rem}
}

/* Run history has its own page and a bounded number of visible rows. */
.history-pagination{display:flex;align-items:center;justify-content:flex-end;gap:18px;flex-wrap:wrap;padding:16px 0 0;font-size:.72rem;color:var(--muted)}
#history-range{margin-right:auto;font-variant-numeric:tabular-nums}
.history-pagination label{display:flex;align-items:center;gap:7px;font-size:.7rem;white-space:nowrap}
.history-pagination select{width:auto;min-width:90px;padding:7px 10px;font-size:.72rem}
.history-pagination select::picker(select){min-width:90px}
.history-pagination input{width:48px;padding:7px 6px;text-align:center;font-variant-numeric:tabular-nums}
.page-controls{display:flex;align-items:center;gap:8px}
.page-controls button{padding:7px 8px;font-size:.72rem;min-height:34px;border-color:transparent;color:var(--muted)}
.page-controls button:hover:not(:disabled){color:var(--ink)}
.history-jump{position:relative}
.history-jump>summary{display:flex;align-items:center;justify-content:center;gap:10px;min-height:34px;padding:5px 8px;list-style:none;cursor:pointer;font-variant-numeric:tabular-nums}
.history-jump>summary::-webkit-details-marker{display:none}
.history-jump>summary:hover{color:var(--ink)}
#history-current-page{color:var(--ink)}
.history-page-divider{color:#777}
.history-jump-content{position:absolute;z-index:5;right:0;bottom:calc(100% + 8px);display:flex;align-items:flex-end;gap:14px;width:180px;max-width:calc(100vw - 40px);padding:14px;background:var(--menu);border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 10px 30px #0006}
.history-jump-content label{display:grid;gap:6px;flex:1}
.history-jump-content input{width:100%}
@media(max-width:780px){
 body[data-page=history] .filters{grid-template-columns:1fr 1fr;gap:16px 20px}
 .history-filter-toggle{grid-column:1/-1;justify-self:start;min-height:28px;margin:0}
 .history-run-actions{margin-left:0}
 .history-run-body{gap:6px 18px}
 .history-run-metrics{flex-basis:100%}
 .history-run-more .record-fields{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
 .history-pagination{gap:10px 16px}#history-range{flex-basis:100%}.page-controls{flex-wrap:wrap}.page-size{margin-right:auto}
 .history-run{padding:20px 0}.history-run-head{gap:12px}.history-run h3{font-size:.8125rem}.history-run-brand{display:block}
 .history-run-brand::before{content:none}
 .history-run-identity{gap:9px}.history-run-identity>.button-icon{width:16px;height:16px}
 .history-run-meta{font-size:.66rem;gap:3px 7px}.history-run-meta>:not(:last-child)::after{margin-left:7px}
 .history-run-body{padding-left:25px}.history-run-metrics{gap:6px 18px}.history-run-metrics dd{font-size:.78rem}.history-run-metrics dt{font-size:.63rem}
 .history-run-state{font-size:.6rem;gap:4px}.history-run-note{margin-left:25px}
 .history-period{font-size:.65rem}.history-extra-filters{max-width:100%;gap:20px}
}
@media(max-width:360px){
 .history-run-head{flex-wrap:wrap;gap:5px}.history-run-state{margin-left:25px}
 .history-run-more .record-fields{grid-template-columns:1fr}.history-run-source{max-width:100%}
 .history-pagination .page-size{margin-right:0}.history-pagination .page-controls{margin-left:auto}
}



/* Responsive layouts keep navigation and content available without nested cards. */
@media (min-width: 1450px) {
  .main { padding: 48px 52px 32px; }
  .metric { font-size: 2.8rem; }
}
@media (min-width: 1151px) and (max-height: 800px) {
  body[data-page="overview"] .main { padding: 24px 30px 16px; --trend-height: 160px; }
  body[data-page="overview"] h1 { font-size: 1.9rem; }
  body[data-page="overview"] .top { margin-bottom: 22px; }
  body[data-page="overview"] .eyebrow { margin-bottom: 7px; }
  body[data-page="overview"] .subtitle { margin-top: 8px; }
  body[data-page="overview"] .filters { padding-bottom: 16px; margin-bottom: 22px; }
  body[data-page="overview"] .impact-metrics { padding-bottom: 22px; gap: 22px; }
  body[data-page="overview"] .metric { font-size: 2.1rem; }
  body[data-page="overview"] .metric-label { margin-bottom: 10px; }
  body[data-page="overview"] .metric-note { margin-top: 8px; font-size: .68rem; }
  body[data-page="overview"] .submetrics { padding: 16px 0; }
  body[data-page="overview"] .middle { margin-top: 26px; gap: 28px; }
  body[data-page="overview"] .middle > .panel + .panel { padding-left: 26px; }
  body[data-page="overview"] .trend-controls { margin-top: 14px; }
  body[data-page="overview"] .comparison-row { margin: 18px 0; }
  body[data-page="overview"] .comparison-bottom { padding-top: 14px; }
  body[data-page="overview"] .footer { margin-top: 18px; }
}
@media (max-width: 1150px) {
  .shell { grid-template-columns: 200px minmax(0,1fr); }
  .sidebar { padding: 28px 18px; }
  .nav a { font-size: .73rem; gap: 9px; }
  .nav a.active::before { left: -18px; }
  .brand { font-size: 1.25rem; }
  .brand-edition { font-size: .5rem; }
  .main { padding: 32px 28px; }
  .top { align-items: flex-start; flex-wrap: wrap; }
  .impact-metrics { grid-template-columns: 1fr 1fr; gap: 30px 28px; }
  .metric { font-size: 2.3rem; }
  .middle { grid-template-columns: 1fr; gap: 32px; }
  .middle > .panel + .panel { border-left: 0; padding: 28px 0 0; border-top: 1px solid var(--line); }
  .filters { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px 24px; }
  .submetrics { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 780px) {
  .shell { display: block; }
  .sidebar { position: static; height: auto; display: grid; grid-template-columns: 1fr; gap: 8px; padding: 16px 24px 8px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar .nav { grid-column: 1; grid-row: 1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); gap: 16px; }
  .sidebar .nav a { justify-content: center; text-align: center; gap: 8px; padding: 0 0 15px; font-size: .68rem; }
  .sidebar .nav a.active::before { width: 100%; height: 2px; left: 0; bottom: -1px; }
  .nav-heading { display: none; }
  .side-note { display: none; grid-column: 1; grid-row: 2; justify-self: end; margin: 0; padding: 0; border: 0; }
  body:has(#sign-out:not([hidden])) .side-note { display: block; }
  #sign-out { margin: 0; font-size: .7rem; }
  .main { padding: 32px 24px; }
  h1 { font-size: 2rem; }
  .top { gap: 22px; margin-bottom: 30px; }
  .actions { width: 100%; gap: 8px; }
  .actions button { font-size: .73rem; padding: 8px 10px; }
  .filters { grid-template-columns: 1fr 1fr; }
  .filters > label:first-child { grid-column: 1 / -1; }
  .impact-metrics { gap: 32px 20px; }
  .metric { font-size: 2.1rem; }
  .metric-label { font-size: .68rem; }
  .metric-note { font-size: .68rem; }
  .submetrics { gap: 24px 20px; }
  .submetric span { font-size: .68rem; }
  .submetric strong { font-size: .95rem; }
  .custom-dates, .record-filters { flex-wrap: wrap; }
  .table-footer { flex-direction: column; }
  .detail-tabs { overflow-x: auto; }
  .detail-tabs button { flex-shrink: 0; }
  .dialog-body { padding: 20px; }
}
@media (max-width: 600px) {
  .sidebar .nav { gap: 8px; }
  .sidebar .nav a { flex-direction: column; gap: 7px; font-size: .63rem; }
}
@media (max-width: 430px) {
  .sidebar { padding-inline: 20px; }
  .sidebar .nav { gap: 12px; }
  .sidebar .nav a { flex-direction: column; gap: 7px; font-size: .63rem; }
  .main { padding: 28px 20px; }
  .metric { font-size: 1.9rem; }
  .input-grid, .detail-grid { grid-template-columns: 1fr; }
  .panel-head { flex-wrap: wrap; align-items: flex-start; }
  .trend-controls { gap: 14px; }
  .trend-views { gap: 18px; }
  .legend { font-size: .61rem; }
  .filters { gap: 18px 14px; }
  .filters select { gap: 6px; margin-left: -6px; padding: 8px 6px; font-size: .8125rem; }
  .filters select::picker-icon { width: 13px; height: 13px; }
  .history-pagination { padding-inline: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  button, a, input, select, textarea { transition: color .15s ease, background-color .15s ease, border-color .15s ease; }
  select::picker-icon, .settings-chevron { transition: rotate .18s ease; }
}

@media (pointer: coarse) {
  select, button { min-height: 44px; }
  @supports (appearance: base-select) { select option { min-height: 44px; } }
}
@media (forced-colors: active) {
  select { appearance: auto; background-image: none; }
  select::picker(select) { appearance: auto; }
  select::picker-icon { mask: none; background: none; }
}