/* CZ Financial Reporting Paradise — the one stylesheet (docs/design/UI_DIRECTION.md §3, §5–§7).
   Hand-written, no framework, no build step. Tokens first, then reset, type, layouts, components. */

/* ---- 1. Tokens ------------------------------------------------------------------------------ */
:root {
    --ink: #0F172A;
    --ink-2: #475569;
    --ink-3: #94A3B8;
    --brand: #1D4ED8;
    --brand-2: #DBEAFE;
    --paper: #F7F5F0;
    --card: #FFFFFF;
    --line: #E5E7EB;
    --band: #F1F5F9;
    --footer: #0B1F3A;
    --ok: #15803D;
    --warn: #B45309;
    --bad: #B91C1C;
    --sidebar-w: 240px;
    --sidebar-w-collapsed: 64px;
    --topbar-h: 56px;
    --content-max: 1280px;
    --radius-card: 12px;
    --radius-btn: 10px;
    --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/InterVariable.1506de3995b1.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ---- 2. Reset and base type ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--paper);
    font-feature-settings: "cv11", "ss01";
}
h1, h2, h3, h4 { margin: 0 0 8px; font-weight: 600; line-height: 1.25; color: var(--ink); }
h1 { font-size: 20px; }
h2 { font-size: 17px; margin-top: 24px; }
h3 { font-size: 15px; margin-top: 16px; }
p { margin: 0 0 12px; color: var(--ink-2); }
a { color: var(--brand); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.92em; }
small { font-size: 13px; color: var(--ink-2); }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
dl { margin: 0; }
ul, ol { margin: 0 0 12px; padding-left: 20px; color: var(--ink-2); }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 18px; height: 18px; flex: none; vertical-align: -3px; }

/* Numbers: Czech convention, tabular figures, right-aligned (the templates add the class). */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; white-space: nowrap; }

/* ---- 3. Wordmark ----------------------------------------------------------------------------- */
.wordmark { display: inline-flex; flex-direction: column; color: var(--ink); font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.wordmark:hover, .wordmark:focus-visible { text-decoration: none; }
.wordmark__line { display: block; font-size: 15px; white-space: nowrap; letter-spacing: -0.02em; }
/* WS2: the CFO Panorama mark (the six panels of a panorama, templates/_icons.svg #icon-panorama) replaces the square. */
.wordmark__mark { width: 34px; height: 24px; color: var(--brand); flex: none; }
.wordmark--row, .sidebar__brand { flex-direction: row; gap: 8px; align-items: center; }
.wordmark--footer { color: #fff; flex-direction: row; gap: 6px; align-items: center; font-size: 14px; }
.wordmark--footer .wordmark__mark { width: 26px; height: 18px; }
.demo__brand .wordmark__mark { width: 22px; height: 15px; }

/* ---- 4. Application shell --------------------------------------------------------------------- */
/* Two explicit rows (top bar, content): without them the implicit rows share the spare height of
   min-height: 100vh and every page renders vertically centred (staging acceptance, 25 Sep 2026). */
.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; }
.sidebar {
    grid-row: 1 / span 2;
    background: var(--card);
    border-right: 1px solid var(--line);
    display: flex; flex-direction: column;
    padding: 16px 12px;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar__brand { display: block; padding: 4px 8px 20px; }
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar__link {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 8px;
    color: var(--ink); font-weight: 500; font-size: 14px; white-space: nowrap;
}
.sidebar__link:hover { background: var(--band); text-decoration: none; }
.sidebar__link[aria-current="page"] { background: var(--brand-2); color: var(--brand); font-weight: 600; }
.sidebar__link[aria-disabled="true"] { color: var(--ink-3); cursor: default; }
.sidebar__link[aria-disabled="true"]:hover { background: none; }
.sidebar__link .icon { color: var(--ink-3); }
.sidebar__link[aria-current="page"] .icon { color: var(--brand); }
.sidebar__label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.sidebar__foot { margin-top: auto; padding-top: 16px; }

.topbar {
    grid-column: 2;
    height: var(--topbar-h);
    display: flex; align-items: center; gap: 16px;
    padding: 0 24px;
    background: var(--card);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 10;
}
.topbar__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: var(--ink-2); cursor: pointer;
}
.topbar__toggle:hover { background: var(--band); }
.topbar__group { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-2); }
.topbar__group strong { color: var(--ink); font-weight: 600; }
.topbar__group select { max-width: 260px; }
.topbar__spacer { flex: 1 1 auto; }

/* The application takes the window's width on any screen (owner, 9 Oct 2026; --content-max is the landing page's
   measure only). What must stay readable is capped where it is: form fields and running text, not the page. */
.content { grid-column: 2; padding: 24px; width: 100%; }
.content .field, .content .form p { max-width: 44rem; }
.content > p, .content .card > p, .legal-doc { max-width: 150ch; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.page-head h1 { margin: 0; }
.page-head__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.upload-inline { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }   /* MI1 */
.page-nav { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 16px; font-size: 14px; }
td.actions { white-space: nowrap; }
td.actions a { margin-right: 12px; }
td.actions a:last-child { margin-right: 0; }

/* Collapsed sidebar (persisted by app.js on <html>) and the two breakpoints. */
html.sidebar-collapsed .shell { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }
html.sidebar-collapsed .sidebar { padding: 16px 8px; }
html.sidebar-collapsed .sidebar__label, html.sidebar-collapsed .sidebar__chip, html.sidebar-collapsed .sidebar__foot,
html.sidebar-collapsed .sidebar .wordmark__line { display: none; }
html.sidebar-collapsed .sidebar__link { justify-content: center; padding: 10px; }
@media (max-width: 1023.98px) {
    .shell { grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr); }
    .sidebar { padding: 16px 8px; }
    .sidebar__label, .sidebar__chip, .sidebar__foot, .sidebar .wordmark__line { display: none; }
    .sidebar__link { justify-content: center; padding: 10px; }
    .topbar__toggle { display: none; }
}
@media (max-width: 767.98px) {
    .shell { display: block; }
    .sidebar { position: static; height: auto; flex-direction: row; align-items: center; gap: 4px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
    .sidebar__brand { padding: 0 8px 0 0; }
    .sidebar__nav { flex-direction: row; }
    .topbar { position: static; height: auto; flex-wrap: wrap; padding: 8px 16px; gap: 8px 12px; }
    .content { padding: 16px; }
}

/* ---- 5. Entrance layout (landing / login / MFA / reset) ------------------------------------- */
.entrance { background: var(--paper); }
.hero { position: relative; min-height: 640px; display: flex; flex-direction: column; overflow: hidden; background: #dfe7ee; }
@media (min-width: 1024px) { .hero { min-height: 720px; } }
.hero__picture, .hero__picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; display: block; }
.hero::after {
    /* 40 % white gradient over the left half so the headline stays legible (UI_DIRECTION §6). */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0.45) 40%, rgba(255, 255, 255, 0) 60%);
}
.hero__bar, .hero__inner { position: relative; z-index: 1; }
.hero__bar { display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; }
.hero__inner {
    flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; align-items: start;
    max-width: var(--content-max); width: 100%; margin: 0 auto; padding: 40px 32px 56px;
}
.hero__copy { max-width: 640px; }
/* v1.1: heavy, upper left in the sky; four lines at 1440 px (Turn your / accounting data / into a bigger / picture.).
   max-width in em: measured in Chrome with the Inter subset, 8.0-9.1em give the four lines (12ch = 7.98em was 2 px from
   five); 8.6em sits in the middle of that window. */
.hero__headline { font-size: clamp(40px, 5.2vw, 68px); line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; max-width: 8.6em; margin: 0 0 20px; }
.hero__headline .accent { color: var(--brand); }
.hero__sub { font-size: 18px; font-weight: 400; color: var(--ink-2); max-width: 34ch; }
.card--entrance {
    background: var(--card); border-radius: 16px; padding: 28px; width: 100%; max-width: 420px; justify-self: end; margin-top: 8px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
}
.card--entrance h1, .card--entrance h2 { font-size: 20px; margin: 0 0 16px; }
.card__foot { margin: 16px 0 0; font-size: 14px; }
.card--entrance .btn-row { margin-top: 12px; }
/* width: 100% — as flex items of the column body, auto margins would otherwise size these to their content's min width. */
.features { padding: 40px 32px; max-width: var(--content-max); width: 100%; margin: 0 auto; }
.features__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feature { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px; }
.feature__title { font-size: 16px; margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.feature p { margin: 0; font-size: 14px; }
.feature__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; margin-bottom: 12px; color: var(--brand); background: #DBEAFE; }
.feature__icon .icon { width: 20px; height: 20px; }
.feature:nth-child(4n+2) .feature__icon { background: #DCFCE7; }
.feature:nth-child(4n+3) .feature__icon { background: #FDE7DC; }
.feature:nth-child(4n+4) .feature__icon { background: #EDE9FE; }

/* Report example (UI_DIRECTION v1.1 §6): a browser frame; tabs and the currency toggle are radios switched by :has(), no script. */
.demo { max-width: var(--content-max); width: 100%; margin: 0 auto; padding: 0 32px 40px; }
/* position: relative keeps the absolutely positioned sr-only legends and radios inside the scrolling frame on phones. */
.demo__frame { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); overflow-x: auto; box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08); }
.demo__chrome { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--band); font-size: 12px; color: var(--ink-3); }
.demo__dots { display: inline-flex; gap: 5px; }
.demo__dots i { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.demo__url { flex: 1 1 auto; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 3px 10px; }
.demo__body { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-width: 900px; }
.demo__side { border-right: 1px solid var(--line); padding: 16px 12px; font-size: 13px; }
.demo__brand { display: flex; align-items: center; gap: 8px; font-weight: 700; padding: 0 8px; margin-bottom: 16px; }
.demo__nav { list-style: none; margin: 0 0 16px; padding: 0; color: var(--ink); }
.demo__nav li { padding: 7px 10px; border-radius: 8px; }
.demo__nav li.is-active { background: var(--brand-2); color: var(--brand); font-weight: 600; }
.demo__badge { display: block; background: var(--brand-2); color: var(--brand); border-radius: 8px; padding: 8px 10px; font-size: 12px; font-weight: 600; }
.demo__main { padding: 12px 20px 20px; }
.demo__tabs { display: flex; gap: 4px; margin: 0 0 14px; padding: 0; border: 0; border-bottom: 1px solid var(--line); }
.demo__tabs label { position: relative; }
.demo__tabs input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.demo__tabs span { display: inline-block; padding: 8px 12px; margin-bottom: -1px; font-size: 14px; font-weight: 600; color: var(--ink-2); border-bottom: 2px solid transparent; cursor: pointer; }
.demo__tabs input:checked + span { color: var(--brand); border-bottom-color: var(--brand); }
.demo__tabs input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: -2px; }
.demo__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.demo__head h3 { margin: 0; font-size: 18px; }
.demo__controls { display: flex; align-items: center; gap: 8px; }
.demo__pill { display: inline-block; padding: 4px 12px; border-radius: 8px; background: var(--band); font-size: 13px; font-weight: 600; }
.demo__table { margin: 0; }
.demo__table th:first-child, .demo__table td:first-child { padding-left: 12px; }
.demo__note { font-size: 12px; color: var(--ink-3); margin: 12px 0 0; }
/* Fallback without :has(): the P&L in CZK (the first radio of each group is checked in the markup). */
.demo__panel, .demo [data-cur="eur"] { display: none; }
.demo__panel--pl { display: block; }
.demo:has(#demo-bs:checked) .demo__panel--pl, .demo:has(#demo-cf:checked) .demo__panel--pl { display: none; }
.demo:has(#demo-bs:checked) .demo__panel--bs, .demo:has(#demo-cf:checked) .demo__panel--cf { display: block; }
.demo:has(#demo-eur:checked) [data-cur="czk"] { display: none; }
.demo:has(#demo-eur:checked) [data-cur="eur"] { display: inline; }

.how { max-width: var(--content-max); width: 100%; margin: 0 auto; padding: 0 32px 40px; }
.how h2 { font-size: 24px; margin: 0 0 16px; }
.how__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.how__card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px; }
.how__card h3 { margin: 0 0 6px; font-size: 17px; }
.how__step { color: var(--brand); margin-right: 6px; }
.how__card p { margin: 0; font-size: 14px; }
.trust { border-top: 1px solid var(--line); padding: 20px 32px; }
.trust__list { list-style: none; margin: 0 auto; padding: 0; max-width: var(--content-max); display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 14px; color: var(--ink-2); }
.trust__list li { display: inline-flex; align-items: center; gap: 8px; }
.trust__list .icon { color: var(--brand); }
.footer { background: var(--footer); color: #fff; padding: 20px 32px; margin-top: auto; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 8px 16px; }
.footer__copyright { font-size: 13px; color: var(--ink-3); margin-left: auto; }
.entrance { display: flex; flex-direction: column; min-height: 100vh; }
.hero .lang { background: rgba(255, 255, 255, 0.85); border-radius: var(--radius-btn); }
@media (max-width: 1023.98px) {
    .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 16px 24px 40px; }
    .card--entrance { justify-self: stretch; max-width: none; margin-top: 0; }
    .features__grid, .how__grid { grid-template-columns: 1fr; }
    .features, .demo, .how, .trust, .footer, .hero__bar { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 767.98px) {
    .hero { min-height: 0; }
    .hero__bar { padding: 12px 16px; }
    .hero__inner { padding: 8px 16px 32px; }
    .card--entrance { padding: 20px; }
    .features, .demo, .how, .trust, .footer { padding-left: 16px; padding-right: 16px; }
    .footer { flex-direction: column; align-items: flex-start; }
    .footer__copyright { align-self: flex-end; margin-left: 0; }
}

/* ---- 6. Cards and stat tiles ----------------------------------------------------------------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px; margin-bottom: 16px; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card__title { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 16px 20px; }
.stat__label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.stat__value { display: block; font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat__note { display: block; font-size: 13px; color: var(--ink-2); margin-top: 6px; }

/* ---- 7. Tables ------------------------------------------------------------------------------- */
table { border-collapse: collapse; width: 100%; font-size: 13px; margin-bottom: 16px; background: var(--card); }
th, td { padding: 0 10px; height: 36px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
thead th { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
/* GW1: figures size the columns — a numeric heading takes no width of its own (1px yields to the figures) and wraps. */
thead th.num { white-space: normal; width: 1px; text-wrap: balance; }
tbody th { font-weight: 600; }
tfoot th, tfoot td { font-weight: 700; border-top: 2px solid var(--ink); border-bottom: 0; }
tbody tr:hover { background: #fbfaf7; }
.table__section td, .table__section th { background: var(--band); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em; color: var(--ink-2); }
.table__total td, .table__total th { font-weight: 700; border-top: 2px solid var(--ink); }
.table__group, td.table__group, th.table__group { font-weight: 700; color: var(--brand); }
.card > table { margin-bottom: 0; }
.card table thead th { border-top: 0; }
.table-wrap { overflow-x: auto; }
table.trend td, table.trend th { text-align: right; }
table.trend td:first-child, table.trend th:first-child, table.trend td:nth-child(2), table.trend th:nth-child(2) { text-align: left; }

/* Coverage colours (the dashboard's colour() thresholds; class names asserted by tests). */
.cov-green { color: var(--ok); }
.cov-amber { color: var(--warn); }
.cov-red { color: var(--bad); }
.cov-none { color: var(--ink-3); }

/* ---- 8. Buttons, chips, badge, segmented control --------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 36px; padding: 6px 14px; border-radius: var(--radius-btn);
    font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
    border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover, .btn:focus-visible { text-decoration: none; }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: #1E40AF; }
.btn--secondary { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn--secondary:hover { background: var(--band); }
.btn--danger { background: var(--card); color: var(--bad); border-color: #FECACA; }
.btn--danger:hover { background: #FEF2F2; }
/* REPORT_UX2 U9: the Filters toggle -- outlined, filled while the panel is open; its count of non-default settings. */
.btn--filter { background: var(--card); color: var(--brand); border-color: var(--brand); }
.btn--filter[aria-expanded="true"] { background: var(--brand); color: #fff; }
.btn__count { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: #fff; font-size: 11px; line-height: 18px; }
.btn--filter[aria-expanded="true"] .btn__count { background: #fff; color: var(--brand); }
@media (max-width: 767.98px) { .btn--filter .btn__label { display: none; } }
.back { display: inline-block; margin: 0 0 8px; font-size: 13px; font-weight: 600; }
.btn--small { min-height: 28px; padding: 2px 10px; font-size: 13px; }
.btn--block { width: 100%; }
.btn[disabled], .btn:disabled, a[data-support-disabled] { opacity: 0.55; cursor: default; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.btn-row form { margin: 0; }
.btn-row--vertical { flex-direction: column; align-items: stretch; }
.btn-row p { margin: 0; }

.chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em; line-height: 18px; white-space: nowrap;
    background: var(--band); color: var(--ink-2);
}
.chip--coming { background: transparent; color: var(--ink-3); border: 1px solid var(--line); }
.chip--ok { background: #DCFCE7; color: var(--ok); }
.chip--warn { background: #FEF3C7; color: var(--warn); }
.chip--bad { background: #FEE2E2; color: var(--bad); }
.chip--brand { background: var(--brand-2); color: var(--brand); }

.badge {
    display: block; padding: 12px 14px; border-radius: var(--radius-card);
    background: var(--brand-2); color: var(--ink); font-size: 13px; line-height: 1.35;
}
.badge:hover, .badge:focus-visible { text-decoration: none; background: #CFE0FC; }
.badge__label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); }
.badge__value { display: block; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.badge__note { display: block; color: var(--ink-2); }
.badge--none .badge__value { font-size: 14px; font-weight: 600; color: var(--ink-2); }

.segmented { display: inline-flex; flex-wrap: wrap; margin: 0; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--card); }
.segmented__item { position: relative; }
.segmented__item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.segmented__item span {
    display: inline-block; padding: 4px 12px; border-radius: 8px;
    font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer; user-select: none;
}
.segmented__item input:checked + span { background: var(--brand-2); color: var(--brand); }
.segmented__item input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }
.lang { display: inline-flex; align-items: center; gap: 8px; margin: 0; }

/* ---- 9. Forms -------------------------------------------------------------------------------- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"],
input[type="url"], input[type="file"], select, textarea {
    font: inherit; font-size: 14px; color: var(--ink);
    padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card);
    min-height: 36px;
}
select { padding-right: 28px; }
input[type="file"] { padding: 6px; }
textarea { min-height: 96px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
label { font-size: 14px; color: var(--ink-2); }
.field { margin: 0 0 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea { width: 100%; }
.field--checkbox { display: flex; align-items: center; gap: 8px; }
.field--checkbox label { margin: 0; font-weight: 500; }
.field--error input, .field--error select { border-color: var(--bad); }
.row--error td { background: #FEE2E2; }
.field__control { position: relative; }
.field__control input { padding-right: 40px; }
.field__toggle {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 32px; height: 28px; border: 0; border-radius: 6px; background: none; color: var(--ink-3); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.field__toggle:hover, .field__toggle[aria-pressed="true"] { color: var(--brand); background: var(--band); }
.field__help { font-size: 13px; color: var(--ink-2); margin: 4px 0 0; }
.form p { margin-bottom: 12px; }
.form p label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.form p input:not([type="checkbox"]):not([type="radio"]), .form p select, .form p textarea { width: 100%; }
.form .helptext { display: block; font-size: 13px; color: var(--ink-2); margin-top: 4px; }
.errorlist { list-style: none; margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: #FEE2E2; color: var(--bad); font-size: 13px; }
.errorlist li { margin: 0; }
.inline-form { display: inline; }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 16px; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink); }
.field-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.field-row label { display: inline-flex; align-items: center; gap: 6px; }

.drop-zone {
    border: 2px dashed var(--ink-3); border-radius: var(--radius-card);
    padding: 32px 20px; text-align: center; color: var(--ink-2); background: var(--band); margin: 0 0 16px;
}
.drop-zone.is-dragover { border-color: var(--brand); background: var(--brand-2); color: var(--brand); }
#file-list { list-style: none; padding: 0; margin: 0 0 12px; font-size: 13px; }

/* ---- 10. Messages, breadcrumb, details, key-value lists, misc ------------------------------ */
.messages { list-style: none; margin: 0 0 16px; padding: 0; }
.messages li, .alert { padding: 10px 14px; border-radius: 8px; background: var(--brand-2); color: var(--ink); font-size: 14px; margin-bottom: 8px; }
.messages li.success { background: #DCFCE7; color: var(--ok); }
.messages li.warning { background: #FEF3C7; color: var(--warn); }
.messages li.error { background: #FEE2E2; color: var(--bad); }
.banner { padding: 8px 14px; border-radius: 8px; font-size: 14px; margin: 0 0 12px; }
.banner--sample { background: var(--brand-2); color: var(--ink); }
/* REPORT_UX2 O11b: the support banner is one slim 32px line on every page. */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); margin: 0 0 12px; list-style: none; padding: 0; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before { content: "›"; color: var(--ink-3); }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; font-size: 14px; margin-bottom: 12px; }
.kv dt { color: var(--ink-3); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; align-self: center; }
.kv dd { margin: 0; color: var(--ink); }
details.menu { position: relative; }
details.menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); padding: 6px 10px; border-radius: 8px; }
details.menu > summary::-webkit-details-marker { display: none; }
details.menu > summary:hover, details.menu[open] > summary { background: var(--band); }
details.menu .menu__panel {
    position: absolute; right: 0; top: calc(100% + 4px); min-width: 200px; z-index: 20;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 8px;
    display: flex; flex-direction: column; gap: 2px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}
details.menu .menu__panel a, details.menu .menu__panel button { display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; color: var(--ink); font: inherit; font-size: 14px; background: none; border: 0; cursor: pointer; }
details.menu .menu__panel a:hover, details.menu .menu__panel button:hover { background: var(--band); text-decoration: none; }
details.menu .menu__email { padding: 6px 10px 8px; font-size: 12px; color: var(--ink-3); border-bottom: 1px solid var(--line); margin-bottom: 4px; word-break: break-all; }
details.inline { display: inline-block; margin-right: 8px; }
details.inline > summary { cursor: pointer; color: var(--brand); font-size: 13px; font-weight: 600; }
details.inline > form { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* Mapping queue (MQ1): the Actions column stays at the right edge of the card however wide the table is, its forms stack,
   and the selects are capped by the cell - the longest Global account name no longer pushes the save button out of
   sight. "Accept default" leaves the row while a "Map to…" form is open on it. */
.queue-actions { position: sticky; right: 0; background: var(--card); box-shadow: -1px 0 0 var(--line); }
td.queue-actions { min-width: 13rem; padding-top: 6px; padding-bottom: 6px; }
td.queue-actions:has(details[open]) { min-width: 26rem; }
tbody tr:hover td.queue-actions { background: #fbfaf7; }
td.queue-actions .btn-row { flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; }
td.queue-actions details.inline { display: block; margin: 0; width: 100%; }
td.queue-actions details.inline > form { flex-direction: column; align-items: stretch; }
td.queue-actions details.inline label { display: flex; align-items: center; gap: 6px; }
td.queue-actions select { flex: 1 1 auto; width: 100%; min-width: 0; }
td.queue-actions .btn-row:has(details[open]) > form { display: none; }
/* Working tables (MQ1, app.js section 10): headings sort on a click and carry a grip that drags the column's width. */
/* GW1: a text heading wraps at words before it widens its column. */
table[data-grid] thead th { cursor: pointer; user-select: none; white-space: normal; }
/* The card of a working table is its own scroll area, never taller than the window: the sideways scrollbar is on screen
   whenever there is something to scroll to (it used to sit under the last row), and the headings stay while rows scroll. */
.table-wrap:has(table[data-grid]) { max-height: calc(100vh - var(--topbar-h) - 24px); overflow: auto; padding-top: 0; padding-right: 0; }
/* GW1: the card's 20px above whatever precedes the table (heading, toolbar) — as a margin, so the headings stick flush. */
.card.table-wrap:has(table[data-grid]) > :first-child:not(table) { margin-top: 20px; }
table[data-grid] thead th { position: sticky; top: 0; z-index: 2; background: var(--card); box-shadow: inset 0 -1px 0 var(--line); }
table[data-grid] thead th.queue-actions { z-index: 3; box-shadow: -1px 0 0 var(--line), inset 0 -1px 0 var(--line); }
td.queue-actions { z-index: 1; }
table[data-grid] thead th.queue-actions { cursor: default; }
table[data-grid] thead th:hover, table[data-grid] thead th:focus-visible { color: var(--ink); }
table[data-grid] thead th[aria-sort="ascending"]::before { content: "\25B2\00A0"; color: var(--brand); }
table[data-grid] thead th[aria-sort="descending"]::before { content: "\25BC\00A0"; color: var(--brand); }
.col-grip { position: absolute; top: 0; right: 0; width: 9px; height: 100%; cursor: col-resize; touch-action: none; border-right: 2px solid transparent; }
.col-grip:hover, .col-grip:active { border-right-color: var(--brand); }
table.grid--sized { table-layout: fixed; }
table.grid--sized th, table.grid--sized td:not(.queue-actions) { overflow: hidden; text-overflow: ellipsis; }
/* GR1: the toolbar above a working table (Download Excel, Copy, Columns, the row count), its filter row and frozen columns. */
.grid-tools { position: sticky; z-index: 5; left: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0 8px; }
.grid-tools__note { font-size: 12px; color: var(--ink-3); }
.grid-columns { position: relative; }
.grid-columns > summary { list-style: none; }
.grid-columns > summary::-webkit-details-marker { display: none; }
.grid-columns__menu {
    position: absolute; left: 0; top: calc(100% + 4px); z-index: 20; min-width: 220px; max-height: 320px; overflow-y: auto; padding: 8px 12px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}
.grid-columns__menu label { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 13px; white-space: nowrap; }
table[data-grid] thead tr.grid-filter th { top: var(--grid-row, 36px); cursor: default; padding-top: 4px; padding-bottom: 6px; }
table[data-grid] .grid-filter input { width: 100%; min-width: 4rem; min-height: 0; height: 26px; padding: 2px 6px; font: inherit; font-size: 12px; text-transform: none; letter-spacing: 0; }
table[data-grid] .grid-frozen { position: sticky; z-index: 1; background: var(--card); }
table[data-grid] thead th.grid-frozen { z-index: 3; }
.muted { color: var(--ink-3); }
.qr { display: block; width: 240px; height: 240px; border: 1px solid var(--line); border-radius: 8px; margin: 0 0 12px; }

/* ---- 11. Reports (Slice 3): tabs, controls, the grid, the provenance footer ------------------ */
.tabs { display: inline-flex; gap: 4px; margin: 0 0 16px; padding: 0; border: 0; border-bottom: 1px solid var(--line); }
.tabs__item { position: relative; }
.tabs__item input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tabs__item > span { display: inline-block; padding: 8px 14px; font-weight: 600; color: var(--ink-2); border-bottom: 2px solid transparent; cursor: pointer; }
.tabs__item input:checked + span { color: var(--brand); border-bottom-color: var(--brand); }
.tabs__item input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 1px; }
.tabs__item--disabled > span { color: var(--ink-3); cursor: default; }
.report-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 16px; }
.report-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ink); }
.report-controls .field--checkbox { flex-direction: row; align-items: center; gap: 6px; }
.report-issues { list-style: none; margin: 0 0 12px; padding: 0; font-size: 13px; }
.report-issues li { padding: 4px 0; }
.report-issues .chip { margin-right: 6px; }
table.report td.num a { display: block; color: inherit; text-decoration: none; }
.nm { color: var(--ink-3); cursor: help; }
table.report td.num a:hover, table.report td.num a:focus-visible { text-decoration: underline; color: var(--brand); }
table.report .rl-depth-1 th { padding-left: 24px; font-weight: 400; }
table.report .rl-depth-2 th { padding-left: 40px; font-weight: 400; color: var(--ink-2); }
table.report .row--ratio th, table.report .row--ratio td { font-style: italic; color: var(--ink-2); }
table.report .row--computed th { font-weight: 400; }
/* Analysis AN1 (Ratios tab, R4 / R5): upright rows, bold results (DuPont), polarity on the Δ cell, the row explainer. */
table.report--ratios .row--ratio th, table.report--ratios .row--ratio td { font-style: normal; color: var(--ink); }
table.report--ratios .role--result th, table.report--ratios .role--result td { font-weight: 700; }
table.report td.delta--good { color: var(--ok); }
table.report td.delta--bad { color: var(--bad); }
table.report .line-explain { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
table.report .line-explain:hover, table.report .line-explain[aria-expanded="true"] { color: var(--brand); }
table.report .row--explain td { padding: 6px 12px 10px 24px; background: var(--band); white-space: normal; }
.explain { position: sticky; left: 24px; display: inline-block; max-width: min(110ch, 85vw); font-size: 12px; color: var(--ink-2); }
.explain p, .explain ul { margin: 0 0 4px; }
.explain ul { padding-left: 16px; }
.avg-fallback { color: var(--ink-3); cursor: help; margin-left: 2px; }
table.report th.sticky, table.report td.sticky { position: sticky; left: 0; background: var(--card); z-index: 1; }
/* REPORT_HEADERS_BRIEF R1: the company over its periods, a light rule under it; R3: line labels on one line up to a cap. */
table.report thead th.report-entity {
    text-align: center; border-bottom-color: transparent;
    background: linear-gradient(var(--line), var(--line)) no-repeat center bottom 4px / calc(100% - 16px) 1px, var(--card);
}
/* GW1 (U2 had 14ch on every value column): floors on the period headings — an amount or ratio column min-width: 14ch
   (balanced lines: "JAN 2026" / "– SEP 2026"), a share, Δ % or index column one period piece ("JAN 2026 –", lines filled
   in turn), so a heading wraps at its joints, not inside a period; figures widen a column, its heading never does. A long
   company name wraps to two lines inside the fixed 36px header row and widens nothing (min-content). */
table.report thead th.num { min-width: 14ch; vertical-align: bottom; }
table.report thead th.num--rate { min-width: calc(6.75em + 14px); padding-left: 4px; text-wrap: wrap; }
.report-entity__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: normal; line-height: 1.25; width: min-content; min-width: 100%; }
table.report .line-label { display: block; min-width: 12rem; max-width: 20rem; }
@media (min-width: 1024px) { table.report .line-label { min-width: 18rem; max-width: 28rem; } }
/* GR1 B15: on a laptop the line names give the figures room (1366 px: the names and six columns with the panel closed). */
@media (min-width: 1024px) and (max-width: 1439.98px) { table.report .line-label { min-width: 13rem; max-width: 20rem; } }
.report-foot { font-size: 12px; color: var(--ink-2); }
.report-foot > summary { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.report-foot dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 6px 0 0; }
.report-foot dt { font-weight: 600; }
.report-foot dd { margin: 0; }
#report-notes[open]{max-height:40vh;overflow-y:auto}#report-notes>summary~*{margin:6px 0 0}/* HX2 */

/* ---- 12. Report workspace (REPORT_WORKSPACE_BRIEF W6): report left, filter panel right, frozen headers ------- */
.content--wide { max-width: none; }
.report-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
/* REPORT_UX2 O10: head, notices, grid and the folded provenance share the viewport; the grid takes what is left. */
.report-main { min-width: 0; transition: opacity .15s; display: flex; flex-direction: column; max-height: calc(100vh - var(--topbar-h) - 81px); }
.report-main > *, #report-result > * { flex: none; }
.report-main > #report-result { display: flex; flex-direction: column; flex: 0 1 auto; min-height: 0; }
.report-main.is-loading { opacity: .6; }
.report-head { margin-bottom: 12px; }
.report-head__bar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 16px; }
.report-head .tabs { margin: 0; }
.report-head__lead { display: flex; flex-wrap: wrap; align-items: end; gap: 4px 20px; }
.report-head__title { margin: 0 0 8px; }
.report-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.report-summary { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; }
.report-summary .chip { background: var(--band); color: var(--ink-2); }
.report-notices { margin: 0 0 12px; font-size: 13px; }
.report-notices > summary { cursor: pointer; font-weight: 600; color: var(--ink-2); padding: 4px 0; }
#report-delta-hint { margin: 0 0 6px; }
.report-panel {
    position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h)); overflow-y: auto;
    background: var(--card); border-left: 1px solid var(--line);
}
.report-form { display: flex; flex-direction: column; min-height: 100%; }
/* VR1 F13: the board pack's own menu beside Excel (no filters' Apply / Reset); F2: its generating state. */
details.pack-menu { position: relative; }
details.pack-menu > summary { list-style: none; }
details.pack-menu > summary::-webkit-details-marker { display: none; }
.pack-menu__panel {
    position: absolute; right: 0; top: calc(100% + 6px); width: min(340px, 90vw); z-index: 30;
    background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--brand); border-radius: var(--radius-card);
    padding: 12px 16px; box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}
.pack-form label:not(.field--checkbox) { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; font-size: 13px; font-weight: 600; color: var(--ink); }
.pack-form__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pack-summary{display:grid;grid-template-columns:max-content 1fr;gap:2px 10px;margin:8px 0;font-size:13px}.pack-summary dt{font-weight:600}.pack-summary dd{margin:0}
.pack-form__status { margin: 10px 0 0; font-size: 13px; color: var(--brand); font-weight: 600; }
.pack-form button[disabled] { opacity: .6; cursor: progress; }
.report-panel__body { flex: 1 1 auto; padding: 4px 16px 12px; }
.report-panel__foot { position: sticky; bottom: 0; display: flex; gap: 8px; padding: 12px 16px; background: var(--card); border-top: 1px solid var(--line); }
.panel-section { border: 0; border-bottom: 1px solid var(--line); margin: 0; padding: 12px 0; min-width: 0; }
.panel-section:last-child { border-bottom: 0; }
.panel-section > legend { float: left; width: 100%; padding: 0; margin-bottom: 8px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.panel-section > * + * { margin-top: 8px; }
.panel-section > legend ~ * { clear: both; }
.panel-section label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.panel-section select { width: 100%; }
.panel-section .field--checkbox, .company-list label { flex-direction: row; align-items: center; gap: 6px; font-weight: 500; }
.panel-section__pair { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }  /* From holds 1-12; To gets the rest for "Latest (<month>)" */
.panel-section__pair > * { margin-top: 0; }
.panel-section__hint, .panel-section__links { margin: 0; font-size: 12px; color: var(--ink-3); }
.company-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.company-list__item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 3px 0; }
.company-list__years { color: var(--ink-3); font-size: 12px; }
.company-list__only { margin-left: auto; font-size: 12px; }
.report-backdrop { display: none; }
/* The grid scrolls in its own box: header row, line names and the corner cell stay frozen; every frozen cell opaque. */
#report-result > .report-scroll { flex: 0 1 auto; min-height: 240px; overflow: auto; padding: 0; }   /* no padding: nothing shows beside the frozen cells */
.report-scroll thead th { position: sticky; top: 0; z-index: 2; background: var(--card); }
.report-scroll thead th.sticky { left: 0; z-index: 3; }
.report-scroll thead tr.report-periods th { top: 36px; }             /* under the entity row (cells are 36px high) */
.report-scroll .table__total th.sticky, .report-scroll .table__section th.sticky { z-index: 1; }
.report-scroll .table__section th.sticky { background: var(--band); }
@media (min-width: 1024px) {
    html.report-panel-collapsed .report-workspace { grid-template-columns: minmax(0, 1fr); }
    html.report-panel-collapsed .report-panel { display: none; }
}
@media (max-width: 1023.98px) {
    .report-workspace { grid-template-columns: minmax(0, 1fr); }
    .report-panel {
        position: fixed; top: 0; right: 0; bottom: 0; height: auto; width: min(360px, 90vw); z-index: 30;
        transform: translateX(100%); transition: transform .2s; box-shadow: -8px 0 24px rgba(15, 23, 42, .12);
    }
    html.report-panel-open .report-panel { transform: none; }
    html.report-panel-open .report-backdrop { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(15, 23, 42, .35); }
}
@media (max-width: 767.98px) { .report-main { max-height: none; } #report-result > .report-scroll { flex: none; } }
@media print {
    .sidebar, .topbar, .breadcrumb, .report-panel, .report-backdrop, .report-head .tabs, .report-head__actions, .report-notices, .messages { display: none !important; }
    .shell, .report-workspace { display: block; }
    .content { padding: 0; max-width: none; }
    .report-main { max-height: none; display: block; }
    #report-result > .report-scroll { overflow: visible; }
    .report-summary { margin: 0 0 8px; }
    .report-summary .chip { background: none; padding: 0 8px 0 0; font-size: 12px; }
    .report-scroll thead th { position: static; }
    .report-foot::details-content { content-visibility: visible; height: auto; }      /* the provenance prints open */
}

/* ---- OB1: legal pages, onboarding wizard, legal banners ------------------------------------------------------- */
/* OB1-3 S2: the card that holds the undo / delete-a-fiscal-year links. */
.card--danger { border-top: 2px solid var(--bad); }
.legal-page { background: var(--paper); min-height: 100vh; display: flex; flex-direction: column; }
.legal-page__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 24px; background: var(--footer); color: #fff; }
.legal-page__bar a { color: #fff; }
.legal-page__lang a { margin-left: 12px; }
.legal-page__lang a[aria-current] { font-weight: 600; text-decoration: none; }
.legal-page__main { width: 100%; max-width: 860px; margin: 0 auto; padding: 24px 16px 48px; }
.legal-doc { line-height: 1.55; overflow-wrap: anywhere; }
.legal-doc h1 { font-size: 24px; } .legal-doc h2 { font-size: 18px; margin-top: 24px; } .legal-doc h3 { font-size: 16px; }
.legal-doc table { width: 100%; border-collapse: collapse; font-size: 13px; }
.legal-doc th, .legal-doc td { border: 1px solid var(--line); padding: 6px 8px; vertical-align: top; text-align: left; }
.legal-doc--scroll { max-height: 420px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 0 16px; }
.legal-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; font-size: 13px; }
.legal-meta dd { margin: 0; overflow-wrap: anywhere; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
.footer__legal a { color: #fff; }
.wizard-steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 16px; }
.wizard-steps__step a { display: block; padding: 6px 12px; border-radius: var(--radius-btn); background: var(--band); color: var(--ink-2); text-decoration: none; }
.wizard-steps__step--current a { background: var(--brand); color: #fff; }
.company-row { border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin: 0 0 12px; }
.sites-company { min-width: 0; border: 0; padding: 0; margin: 0 0 12px; } .sites-company table { width: 100%; table-layout: fixed; } .sites-company select { max-width: 100%; }
.company-row__ico { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.banner--legal { background: #FEF3C7; color: var(--warn); }
.banner--danger { background: #FEE2E2; color: var(--bad); }

/* COA1 server-rendered links use the report tab treatment. */
nav.tabs { display: flex; flex-wrap: wrap; }
nav.tabs > a { padding: 8px 14px; color: var(--ink-2); border-bottom: 2px solid transparent; }
nav.tabs > a[aria-current="page"] { color: var(--brand); border-bottom-color: var(--brand); }
/* SET1: settings stay in the application shell. */
.settings-cards,.ov-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.settings-cards > .card,.ov-tiles>.card { margin: 0; }
/* CX-009: the owner overview */.ov-tiles{margin:0 0 16px}.ov-figure{font-size:28px;font-weight:700;margin:0 0 6px;font-variant-numeric:tabular-nums}.ov-line,.ov-note{margin:2px 0;font-size:13px;color:var(--ink-2)}.ov-good{color:var(--ok)}.ov-bad{color:var(--bad)}.ov-budget{color:var(--warn)}.ov-sub{font-size:13px;margin:8px 0 2px}.ov-rows{display:grid;grid-template-columns:1fr max-content;gap:2px 12px;margin:0;font-size:14px}.ov-rows dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}.ov-total{font-weight:600}.ov-chart{width:100%;height:auto;display:block}.ov-findings{margin:0;padding-left:20px}.ov-findings li{margin:0 0 10px}

/* OS1 / OS1.1: the group navigator — chart or list in its own canvas beside the selection panel (GROUP_NAVIGATOR_OS1_1_BRIEF
   §2.2–§2.3); under 900 px the list, the panel below. Pillar colours: the legal scope a company falls under, --p-1 … --p-6. */
:root{--p-0:#94A3B8;--p-1:#0F172A;--p-2:#1D4ED8;--p-3:#0F766E;--p-4:#B45309;--p-5:#7C3AED;--p-6:#BE185D}
.navigator__tools{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;margin:0 0 12px}
.navigator__tools label{display:flex;flex-direction:column;gap:4px;font-size:13px}
.navigator__tools .btn,.navigator__tools a{align-self:flex-end}
.seg{display:inline-flex;align-self:flex-end;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.seg__item{padding:6px 12px;font-size:13px;color:var(--ink-2)}
.seg__item:hover{text-decoration:none;background:var(--band)}
.seg__item[aria-pressed=true]{background:var(--brand-2);color:var(--ink);font-weight:600}
.navigator__zoom{display:inline-flex;gap:4px;align-self:flex-end}
.scope-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 12px}
.scope-chips .chip{border:1px solid var(--line);background:var(--card);padding:3px 10px;font-size:12px;font-weight:500}
.scope-chips .chip:hover{border-color:var(--brand);color:var(--ink);text-decoration:none}
.scope-chips .chip[aria-pressed=true]{background:var(--brand);border-color:var(--brand);color:#fff}
.chip--dashed{border-style:dashed!important}
.navigator__work{display:flex;gap:16px;align-items:flex-start;margin-bottom:12px}
.navigator__canvas{flex:1;min-width:0;overflow:auto;max-height:calc(100vh - 250px);min-height:320px;padding:16px;margin:0}
.org-inner{display:inline-block;min-width:100%;transform-origin:0 0}
.org,.org__stack,.org__branch{list-style:none;margin:0;padding:0}
.org{display:flex;gap:24px;align-items:flex-start}
.org--holders{margin-bottom:16px}
.org__children{display:flex;gap:16px;align-items:flex-start;margin:8px 0 0 22px}
.org__stack,.org__branch{display:flex;flex-direction:column;gap:8px;padding-left:14px;border-left:1px solid var(--ink-3)}
.org__item--collapsed>.org__children{display:none}
.org__cell{position:relative;width:220px}
.org__node{display:flex;flex-direction:column;gap:2px;padding:8px 26px 8px 22px;background:var(--card);border:1px solid var(--line);border-radius:10px;color:var(--ink);position:relative;--pc:var(--p-0);transition:border-color .12s,background .12s,opacity .12s}
a.org__node:hover{border-color:var(--brand);text-decoration:none}
.org__node--p1{--pc:var(--p-1)}.org__node--p2{--pc:var(--p-2)}.org__node--p3{--pc:var(--p-3)}.org__node--p4{--pc:var(--p-4)}.org__node--p5{--pc:var(--p-5)}.org__node--p6{--pc:var(--p-6)}
.org__dot{position:absolute;left:9px;top:13px;width:7px;height:7px;border-radius:50%;background:var(--pc)}
.org__node--holder{background:var(--band);padding-left:10px}
.org__node--manual{border-style:dashed;border-color:var(--ink-3)}
.org__node--inscope{background:var(--brand-2);border-color:var(--brand)}
.org__node--sel{border:2px solid var(--brand);padding:7px 25px 7px 21px}
.org__node--root{box-shadow:0 0 0 3px var(--brand-2)}
.org__node--dimmed{opacity:.28}
.org__node--hit{outline:2px solid var(--warn);outline-offset:2px}
.org__name{font-size:13px;font-weight:600;line-height:1.25}
.org__meta{font-size:11px;color:var(--ink-2)}
.org__pick{position:absolute;right:8px;top:8px}
.org__toggle{position:absolute;right:6px;top:6px;width:16px;height:16px;line-height:14px;padding:0;font-size:10px;border:1px solid var(--line);border-radius:4px;background:var(--card);color:var(--ink-3);cursor:pointer}
.has-script .org__pick,.has-script [data-noscript]{display:none}
.org--list,.org--list .org__children{flex-direction:column;gap:4px}
.org--list .org__children{margin:4px 0 0 16px}
.org--list .org__stack,.org--list .org__branch{gap:4px}
.org--list .org__cell{width:auto}
.org--list .org__node{flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 8px;padding:5px 26px 5px 22px;border-color:transparent;background:transparent}
.org--list .org__node--inscope{background:var(--brand-2)}
.org--list .org__node--sel{border-color:var(--brand)}
.org--list .org__dot{top:11px}
.org--list .org__name+.org__meta{margin-left:auto;white-space:nowrap}
.navigator__panel{width:340px;flex:none;position:sticky;top:calc(var(--topbar-h) + 8px);max-height:calc(100vh - var(--topbar-h) - 16px);overflow:auto;padding:16px;margin:0;display:flex;flex-direction:column;gap:12px}
.navigator__eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:600;margin:0}
.navigator__title{margin:2px 0 0;font-size:17px;line-height:1.25}
.navigator__role{font-size:13px;color:var(--ink-2);margin:4px 0 0}
.navigator__badge{margin:0}
.navigator__facts{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:12px}
.navigator__facts dt{color:var(--ink-3)}.navigator__facts dd{margin:0;min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.navigator__opts{display:flex;flex-direction:column;gap:6px;margin:0}
.navigator__opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:13px;cursor:pointer}
.navigator__opt input{margin-top:3px}
.navigator__opt small{display:block;color:var(--ink-3);font-size:11px}
.navigator__opt:has(input:checked){border-color:var(--brand);background:var(--brand-2)}
.navigator__cols{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.navigator__cols-head{display:flex;justify-content:space-between;padding:7px 10px;background:var(--band);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-weight:600}
.navigator__cols ol{list-style:none;margin:0;padding:4px 0;max-height:240px;overflow:auto}
.navigator__cols li{display:flex;align-items:center;gap:8px;padding:4px 10px;font-size:12px;font-variant-numeric:tabular-nums}
.navigator__n{color:var(--ink-3);width:18px;text-align:right;flex:none}
.navigator__calc{font-weight:700;color:var(--brand)}
.navigator__elim{color:var(--ink-2);font-style:italic}
.navigator__nodata{color:var(--warn);font-size:11px;white-space:nowrap}
.navigator__rm{margin-left:auto;color:var(--ink-3);font-size:14px;line-height:1;padding:0 4px}
.navigator__rm:hover{color:var(--bad);text-decoration:none}
.navigator__note{font-size:12px;color:var(--ink-2);background:var(--band);border-radius:10px;padding:8px 10px;margin:0}
.navigator__actions{margin:0}
.navigator__hint{font-size:11px;color:var(--ink-3);margin:0}
.navigator__legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:11px;color:var(--ink-2);margin:0 0 20px}
.navigator__legend span{display:inline-flex;align-items:center;gap:6px}
.navigator__legend .org__dot{position:static;display:inline-block}
.navigator__legend-box{display:inline-block;width:18px;height:11px;border:1px solid var(--ink-3);border-radius:3px}
.navigator__legend-box--dashed{border-style:dashed}
.form-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 16px;align-items:end;padding:16px;margin:12px 0}
.form-grid h3{grid-column:1/-1;margin:0}
.form-grid label{display:flex;flex-direction:column;gap:4px;font-size:13px}
.btn--link{background:none;border:0;padding:0;color:var(--brand);cursor:pointer;font:inherit}
@media (max-width:900px){.navigator__work{flex-direction:column}.navigator__panel{width:auto;position:static;max-height:none}.navigator__canvas{max-height:none}.seg,.navigator__zoom{display:none!important}.org,.org__children{flex-direction:column;gap:4px}.org__children{margin:4px 0 0 16px}.org__cell{width:auto}.org__node{flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px 8px;padding:5px 26px 5px 22px}.org__name+.org__meta{margin-left:auto}}
/* DS2: the operator's demo sign-up page (templates/accounts/demo/decision.html) */
.demo-signup{margin:0 0 16px}.demo-signup dt{font-size:13px;font-weight:600;color:var(--ink);margin-top:8px}.demo-signup dd{margin:0;color:var(--ink-2)}

/* EL2 (ELIMINATIONS_EL2_BRIEF): the journal form's live panel and the intercompany balances screen */
.journal-panel { margin: 4px 0 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--band); }
.journal-panel .kv { margin: 0; }
.journal-panel [data-remaining] { font-variant-numeric: tabular-nums; font-weight: 700; }
.journal-panel .is-balanced { color: var(--ok); }
.journal-panel .is-unbalanced { color: var(--bad); }
.journal-lines td[data-net] { font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.journal-lines input[type="text"] { min-width: 7em; }
.company-net { white-space: nowrap; }
.pair-actions { white-space: nowrap; }
.pair-actions a { margin-right: 8px; }
.inline-form { display: inline; margin: 0; }
/* UX3 §3: the build in the top bar, right of the user menu; under 768 px the short sha only. */
.app-version { display: inline-flex; align-items: center; gap: 6px; font: 12px/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace; color: var(--ink-3); white-space: nowrap; }
.app-version .chip { font-family: inherit; }
.app-version__short { display: none; }
@media (max-width: 767.98px) { .app-version__label { display: none; } .app-version__short { display: inline; } }
/* UX3 §1.2 b: the group chart's selection bar — sticky under the top bar, whatever the width. */
.structure-bar { position: sticky; top: calc(var(--topbar-h) + 4px); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 1px 3px rgb(0 0 0 / 6%); }
.structure-bar__what { flex: 1 1 16rem; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.structure-bar__what--none { font-weight: 400; color: var(--ink-3); }
@media (max-width: 767.98px) { .structure-bar { top: 0; } }
/* BU1: the Budgets page — the template and upload forms side by side where there is room. */
.budget-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 16px; }
/* R8 (SELF_SERVE_ONBOARDING_R8_BRIEF) — begin */
.jobs__list{list-style:none;margin:0;padding:0}
.jobs__row{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.jobs__file{font-weight:600}.jobs__row progress{flex:1 1 160px;max-width:320px}.jobs__row--failed .jobs__state{color:var(--bad)}
.banner--beta{background:var(--brand-2);color:var(--ink)}
.signup-ares{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:8px 0;padding:8px 12px;background:var(--band);border-radius:8px}
.signup-ares dd{margin:0;font-weight:600}.signup-entry .field__help{margin:4px 0 0}
.beta-seat-form{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.beta-seat-form input[type=text]{width:9rem}.beta-note{white-space:pre-wrap;font-size:12px}
.data-card__steps{display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 0;padding-left:20px}.data-card__step--next a{font-weight:700}
.data-card__step--done a,.data-card__step--skipped a{color:var(--ink-2)}.wizard-steps__step--done a::after{content:""}
.checklist{list-style:none;margin:0 0 12px;padding:0}.checklist__item{padding:4px 0 4px 22px;position:relative}
.checklist__item::before{position:absolute;left:0;font-weight:700}.checklist__item--ok::before{content:"✓";color:var(--ok)}
.checklist__item--todo::before{content:"•";color:var(--warn)}.checklist__item--note::before{content:"i";color:var(--brand)}
.issue-help{color:var(--ink-2);font-size:13px}.data-drop{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.data-drop__zone{flex:1 1 260px;display:flex;flex-direction:column;gap:6px;min-height:0;padding:12px}
#copy-text{width:100%;font:13px/1.4 var(--font)}.data-checks td ul{margin:4px 0 0;padding-left:18px;font-size:12px}
.guide__steps li{margin:6px 0}.guide__steps img{display:block;max-width:100%;margin:6px 0;border:1px solid var(--line);border-radius:6px}
.guide__columns{columns:3 10rem;font-size:13px}
@media print{body:has(.guide) .sidebar,body:has(.guide) .topbar,body:has(.guide) .wizard-steps,body:has(.guide) #data-years,body:has(.guide) .page-head,.guide-noprint,body:has(.guide) .messages{display:none!important}
body:has(.guide) .shell{display:block}body:has(.guide) .content{padding:0}.guide{font-size:12pt}}
.assistant-section__head{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.assistant__texts{margin:0;padding-left:16px;font-size:13px}.assistant td form{display:inline}.coverage-live{font-weight:600}
.inline-form{display:inline;margin-left:8px}
.help-menu summary{font-weight:700;min-width:28px;justify-content:center;border:1px solid var(--line);border-radius:50%;width:30px;height:30px;padding:0}
/* HL1: the "?" panel and the "Help on this page" drawer; the article typography is shared with the help pages */
.help-menu .help-menu__panel{right:0;left:auto;min-width:260px}.help-menu .help-menu__page{display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--line);border-radius:8px 8px 0 0}
.help-menu__search{padding:6px 10px}.help-menu__search input{width:100%;box-sizing:border-box}
.help-link{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;font-weight:700;color:var(--ink);background:var(--card);text-decoration:none;margin-left:8px}.help-link:hover{background:var(--band);text-decoration:none}
.hero__bar .help-link{margin-left:12px;background:rgb(255 255 255 / 85%)}.hero__bar>:nth-child(2){margin-left:auto}
.help-drawer{position:fixed;inset:0 0 0 auto;margin:0;height:100vh;max-height:100vh;width:min(560px,100vw);box-sizing:border-box;border:0;border-left:1px solid var(--line);padding:0;display:none;flex-direction:column;background:var(--card);box-shadow:-8px 0 30px rgb(0 0 0 / 18%)}
.help-drawer[open]{display:flex}.help-drawer::backdrop{background:rgb(15 23 42 / 35%)}
.help-drawer__head{display:flex;justify-content:space-between;gap:12px;padding:16px 20px 8px;border-bottom:1px solid var(--line)}.help-drawer__head p,.help-drawer__head h2{margin:0}.help-drawer__head h2{font-size:20px}
.help-drawer__close{border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:var(--ink-2)}
.help-drawer__summary{margin:12px 20px 0;color:var(--ink-2)}.help-drawer__body{overflow:auto;padding:4px 20px 16px;flex:1}
.help-drawer__foot{display:flex;gap:8px;padding:12px 20px;border-top:1px solid var(--line)}
.help-body{line-height:1.55}.help-body h2{font-size:18px;margin:22px 0 8px}.help-body h3{font-size:15px;margin:18px 0 6px}
.help-body img{max-width:100%;height:auto;border:1px solid var(--line);border-radius:8px}.help-body figure{margin:12px 0}.help-body figcaption{font-size:12px;color:var(--ink-3);margin-top:4px}
.help-body code{background:var(--band);padding:1px 4px;border-radius:4px;font-size:.92em}.help-body table{border-collapse:collapse;margin:8px 0;font-size:14px}.help-body th,.help-body td{border:1px solid var(--line);padding:6px 8px;text-align:left;vertical-align:top}.help-body th{background:var(--band)}
.help-table{overflow-x:auto}.help-callout{border-left:3px solid var(--brand);background:var(--band);padding:4px 12px;border-radius:0 8px 8px 0;margin:12px 0}
.help-i{border:0;background:none;color:var(--brand);font-size:13px;line-height:1;padding:0 4px;cursor:help}
.help-tip{position:fixed;z-index:28;box-sizing:border-box;max-width:min(280px,calc(100vw - 16px));padding:8px 10px;background:var(--ink);color:#fff;border-radius:8px;font-size:12px;line-height:1.4;white-space:normal;overflow-wrap:break-word;box-shadow:0 4px 12px rgb(0 0 0 / 20%)}
.sidebar__link+.help-i{align-self:flex-end;margin:-32px 6px 0 0;position:relative;z-index:2}
html.sidebar-collapsed .sidebar .help-i{display:none}
.help-dialog{position:fixed;right:16px;bottom:16px;left:auto;top:auto;margin:0;max-width:380px;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 30px rgb(0 0 0 / 20%);padding:16px;z-index:40}
.help-dialog h2{font-size:16px;margin:0 0 6px}.help-tour__steps{list-style:none;margin:0;padding:0}
.help-target{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
.help-new{padding-left:18px}.help-new li{margin:6px 0}.help-new form{display:inline;margin-left:6px}
.help-topics{list-style:none;padding:0}.help-topics li{padding:6px 0;border-top:1px solid var(--line)}
/* R8 — end */
/* BO1 (BACK_OFFICE_BO1_BRIEF) — begin */
.confirm-dialog{max-width:440px;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 30px rgb(0 0 0 / 20%);padding:20px}
.confirm-dialog::backdrop{background:rgb(15 23 42 / 40%)}.confirm-dialog h2{font-size:16px;margin:0 0 8px}
.member-actions{white-space:nowrap}.member-actions .btn,.member-actions form{margin:0 4px 0 0}
/* BO1 (BO-13): each sidebar row as tall as its highlight, 6 px apart, the ⓘ in its own row's band, centred */
.sidebar__nav{gap:6px}.sidebar__link{box-sizing:border-box;height:36px;padding:0 30px 0 10px;line-height:20px}
.sidebar__link+.help-i{display:inline-flex;align-items:center;height:36px;margin:-42px 6px 0 0}
html.sidebar-collapsed .sidebar__link{padding:0 10px}
@media (max-width:1023.98px){.sidebar__link{padding:0 10px}.sidebar .help-i{display:none}}
@media (max-width:767.98px){.sidebar__nav{gap:4px}}
/* BO1 (BO-14): a busy download button */
.pack-menu>summary[aria-busy]{cursor:progress;opacity:.75}
/* BO1 — end */
/* UX v2 PR A: units (CX-010), basis notes (CX-007) */
table.report .line-unit{display:block;font-size:11px;font-weight:400;color:var(--ink-2)}
.report-basis{margin:0 0 12px;font-size:13px;color:var(--ink-2)}.report-basis p{margin:0 0 4px}
.ai-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}.ai-answer{font:inherit}.ai-ok{border-bottom:1px dotted #15803d}
.br{display:grid;grid-template-columns:13rem minmax(0,1fr) minmax(18rem,26rem);gap:16px;align-items:start}.br--nopanel{grid-template-columns:13rem minmax(0,1fr)}.br--present{display:block}.br-pages,.br-questions{list-style:none;margin:0 0 8px;padding:0}.br-pages a[aria-current]{font-weight:700}.br-questions button{text-align:left}.br-pick{display:none}@media(max-width:900px){.br{display:block}.br-pick{display:block}#br-nav ul,#br-nav p{display:none}}