/* NewHQ design-system extensions — additions made while building the Laravel app (not in the original export).
   Built only from existing tokens: no new colours, spacing or fonts. Loaded after bundle.css.
   Each block names the component README that documents it. Keep this file when re-exporting bundle.css. */

/* ---------- Layout and type helpers (replace the previews' inline styles) ---------- */
.nhq-stack--tight { gap: var(--space-3); }
.nhq-row--between { justify-content: space-between; }
.nhq-row--start { align-items: flex-start; }
.nhq-grid2--start { align-items: start; }
/* Two tables side by side stack once there is no longer room for both (Disclosure README). */
@media (max-width: 1099.98px) { .nhq-grid2--tables { grid-template-columns: minmax(0, 1fr); } }
.nhq-grid2--tables > * { min-width: 0; }
/* `small` type style (tokens.json → type → small). Replaces the previews' inline style="font-size:12px". */
.nhq-small { font: 500 12px/16px var(--font-sans); }

/* ---------- AppShell (components/AppShell/README.md): content stops at content-max-width, centred ---------- */
/* The bars keep full-width backgrounds; past the cap their padding grows so the logo and first module line up with
   the content, keeping the offsets they have below it. Before the narrow-screen rules so those still win. */
.nhq-content { max-width: calc(var(--content-max-width) + 2 * var(--space-5)); margin-inline: auto; }
.nhq-top { padding-inline: max(var(--space-5), (100% - var(--content-max-width)) / 2); }
.nhq-navbar { padding-inline: max(var(--space-4), (100% - var(--content-max-width)) / 2 - var(--space-5) + var(--space-4)); }

/* ---------- Bootstrap 5.3 reboot fixes inside NewHQ components ---------- */
.nhq-fieldset legend { float: none; width: auto; }
.nhq-menu hr { opacity: 1; color: inherit; }
.nhq-menu form, .nhq-entity { margin: 0; }
a.nhq-btn, a.nhq-btn:hover { text-decoration: none; }

/* ---------- Skip link (AppShell) ---------- */
.nhq-skip { position: absolute; left: var(--space-4); top: -100px; z-index: 30; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--action); color: var(--on-action); font-weight: 600; text-decoration: none; }
.nhq-skip:focus { top: var(--space-2); }
.nhq-main:focus { outline: none; }

/* ---------- PageHeader: CSP-safe replacements for the preview's inline styles ---------- */
.nhq-pagehead--wrap { flex-wrap: wrap; }
.nhq-pagehead .nhq-tabs { flex-basis: 100%; }
.nhq-pagehead__meta { margin-top: var(--space-2); }
.nhq-crumbs__entity { color: var(--ink); }
/* A tab loading in place (app.js): its underline becomes a soft track with a crust bar running along it.
   Reduced motion: the bar fills the track and fades instead of moving. */
.nhq-tab { position: relative; }
.nhq-tab.nhq-tab--loading { border-bottom-color: var(--crust-soft); }
.nhq-tab--loading::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 40%; height: 2px; background: var(--crust); animation: nhq-tab-run .9s ease-in-out infinite alternate; }
@keyframes nhq-tab-run { to { transform: translateX(150%); } }
@keyframes nhq-tab-fade { to { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .nhq-tab--loading::after { width: 100%; animation: nhq-tab-fade .9s ease-in-out infinite alternate; } }

/* ---------- ActionBar ---------- */
.nhq-menu a.nhq-menu__item--danger, .nhq-menu button.nhq-menu__item--danger { color: var(--negative); }
/* On narrow screens, visible secondaries fold into More; the primary stays. */
.nhq-actions .nhq-menu .nhq-actions__fold, .nhq-actions .nhq-more--fold-only { display: none; }
@media (max-width: 767.98px) {
  .nhq-actions .nhq-actions__secondary { display: none; }
  .nhq-actions .nhq-menu .nhq-actions__fold { display: flex; }
  .nhq-actions .nhq-menu hr.nhq-actions__fold, .nhq-actions .nhq-more--fold-only { display: block; }
}

/* ---------- Modal: destructive confirmation button (README: "The destructive button uses negative") ---------- */
.nhq-btn--destructive, .nhq-btn--destructive:hover { background: var(--negative); border-color: var(--negative); color: var(--on-action); }
.nhq-btn--destructive:hover { opacity: .88; }
.nhq-dialog__body > p { margin: 0; }

/* ---------- SampleList ---------- */
.nhq-sitem__date { text-align: right; }

/* ---------- AppShell: user menu, mobile module menu, mobile search ---------- */
button.nhq-avatar { padding: 0; border: 0; cursor: pointer; }
button.nhq-avatar[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--crust); }
.nhq-menu__head { display: flex; flex-direction: column; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); margin-bottom: var(--space-1); }
.nhq-menu__head strong { font-weight: 600; }
.nhq-menu__head span { color: var(--ink-muted); font: 500 12px/16px var(--font-sans); }
.nhq-menu button.nhq-menu__item[aria-checked="true"] { background: var(--crust-soft); font-weight: 600; }
.nhq-top .nhq-more > .nhq-menu { min-width: 240px; }
.nhq-menubtn, .nhq-navbar__search { display: none; }
@media (max-width: 767.98px) {
  .nhq-top { gap: var(--space-2); padding: 0 var(--space-3); }
  .nhq-menubtn { display: inline-flex; }
  .nhq-top .nhq-search { display: none; }
  .nhq-entity button { padding: 0 var(--space-2); }
  .nhq-navbar { display: none; height: auto; flex-direction: column; align-items: stretch; padding: var(--space-2); max-height: calc(100vh - var(--topbar-height)); overflow-y: auto; }
  .nhq-navbar[data-open="true"] { display: flex; }
  .nhq-navbar__search { display: block; padding: var(--space-1) 0 var(--space-2); }
  .nhq-navbar__search .nhq-input { width: 100%; }
  .nhq-module { flex-direction: column; align-items: stretch; }
  .nhq-module > button, .nhq-module > a { height: 40px; border-top: 0; border-bottom: 0; border-left: 3px solid transparent; }
  .nhq-module > [aria-current="page"] { border-left-color: var(--crust); }
  .nhq-navbar .nhq-menu { position: static; box-shadow: none; border-radius: var(--radius-md); margin: 0 0 var(--space-2); }
}

/* ---------- Page body rhythm (brand book: space-5 between cards) ---------- */
.nhq-page { display: flex; flex-direction: column; gap: var(--space-5); padding-top: var(--space-5); }

/* ---------- EmptyState (components/EmptyState/README.md) ---------- */
.nhq-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-7) var(--space-5); text-align: center; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.nhq-empty > .nhq-icon, .nhq-empty > [data-nhq-icon] .nhq-icon { width: 20px; height: 20px; color: var(--ink-muted); }
.nhq-empty__title { margin: 0; font: 600 16px/22px var(--font-sans); }
.nhq-empty__text { margin: 0; max-width: 56ch; color: var(--ink-muted); }
.nhq-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); }

/* ---------- DataTable: row actions cell and pager ---------- */
.nhq-table td.nhq-table__actions { text-align: right; white-space: nowrap; }
.nhq-table td.nhq-table__empty { color: var(--ink-muted); text-align: center; }
.nhq-table caption { caption-side: top; padding: var(--space-2) var(--space-3); color: var(--ink-muted); font: 500 12px/16px var(--font-sans); }
.nhq-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); }
.nhq-pager .nhq-btn[aria-current="page"] { background: var(--action); border-color: var(--action); color: var(--on-action); }

/* ---------- Auth screens (login, forgotten password, reset, setup, error pages) ---------- */
.nhq-auth { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-5); padding: var(--space-5) var(--space-4); }
.nhq-auth__panel { width: min(400px, 100%); }
.nhq-auth__panel--wide { width: min(560px, 100%); }
.nhq-auth .nhq-card__body { display: flex; flex-direction: column; gap: var(--space-4); }
.nhq-auth .nhq-card__body p, .nhq-auth .nhq-card__body hr { margin: 0; }
.nhq-auth__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.nhq-auth a:not(.nhq-btn):not(.nhq-logo) { color: var(--ink); }

/* ---------- Style guide page ---------- */
.nhq-sg { display: grid; grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5) 0; border-bottom: 1px solid var(--line); }
.nhq-sg__doc h2 { margin: 0 0 var(--space-2); font: 600 16px/22px var(--font-sans); }
.nhq-sg__doc p, .nhq-sg__doc li { color: var(--ink-muted); font: 400 14px/20px var(--font-sans); }
.nhq-sg__doc ul { padding-left: var(--space-4); margin: 0; }
.nhq-sg__panes { display: grid; grid-template-columns: 1fr; gap: var(--space-4); min-width: 0; }
.nhq-sg__pane { padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); color: var(--ink); min-width: 0; }
.nhq-sg__pane > .nhq-eyebrow { display: block; margin-bottom: var(--space-3); }
.nhq-sg__state { margin-bottom: var(--space-4); }
.nhq-sg__state:last-child { margin-bottom: 0; }
.nhq-sg__state > .nhq-small { display: block; margin-bottom: var(--space-2); color: var(--ink-muted); }
.nhq-sg__frame { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); }
.nhq-sg__frame .nhq-top, .nhq-sg__frame .nhq-navbar { position: relative; top: 0; }
@media (max-width: 991.98px) { .nhq-sg { grid-template-columns: 1fr; } }

/* ---------- Chart (components/Chart/README.md): server-drawn SVG, colours from the chart-* tokens ---------- */
.nhq-chartwrap { overflow-x: auto; }
/* SVG text scales with the drawing, so the chart comes at two sizes and one is shown: labels stay near their
   design size (0.9–1.3×) from a phone to content-max-width, and each size fills its card. Compact below 984px
   (scrolling sideways under 640px) and in print; wide from 984px. */
.nhq-chart { display: block; width: 100%; height: auto; }
.nhq-chart--compact { min-width: 640px; }
.nhq-chart--wide { display: none; }
@media (min-width: 984px) {
  .nhq-chart--compact { display: none; }
  .nhq-chart--wide { display: block; }
}
.nhq-chart__grid line { stroke: var(--line); stroke-width: 1; }
.nhq-chart__grid line.nhq-chart__zero { stroke: var(--line-strong); }
.nhq-chart__tick, .nhq-chart__label { fill: var(--ink-muted); font: 500 11px/1 var(--font-sans); font-variant-numeric: tabular-nums; }
.nhq-chart__label { fill: var(--ink); }
.nhq-chart__label--sub { fill: var(--ink-muted); font-size: 10px; }
.nhq-chart__bar--in-forecast { fill: var(--chart-in-forecast); }
.nhq-chart__bar--in { fill: var(--chart-in); }
.nhq-chart__bar--in-overdue { fill: var(--chart-in-overdue); }
.nhq-chart__bar--out { fill: var(--chart-out); }
.nhq-chart__bar--out-forecast { fill: var(--chart-out-forecast); }
.nhq-chart__line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.nhq-chart__line--balance { stroke: var(--ink); }
.nhq-chart__line--balance-ex { stroke: var(--ink-muted); stroke-dasharray: 4 4; }
.nhq-chart__dot { fill: var(--surface-raised); stroke-width: 2; }
.nhq-chart__dot--balance { stroke: var(--ink); }
.nhq-chart__dot--balance-ex { stroke: var(--ink-muted); }
.nhq-chart__hit { fill: transparent; }
.nhq-chart__hit:hover { fill: var(--ink); fill-opacity: .04; }
.nhq-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; color: var(--ink-muted); font: 500 12px/16px var(--font-sans); }
.nhq-legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.nhq-legend__key { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.nhq-legend__key--in-forecast { background: var(--chart-in-forecast); }
.nhq-legend__key--in { background: var(--chart-in); }
.nhq-legend__key--in-overdue { background: var(--chart-in-overdue); }
.nhq-legend__key--out { background: var(--chart-out); }
.nhq-legend__key--out-forecast { background: var(--chart-out-forecast); }
.nhq-legend__key--balance, .nhq-legend__key--balance-ex { height: 0; border-radius: 0; border-top: 2px solid var(--ink); }
.nhq-legend__key--balance-ex { border-top: 2px dashed var(--ink-muted); }
/* UsageChart (components/Chart/README.md, "Usage chart"): taken is the chart-in step line, the target dashed ink-muted. */
.nhq-chart__line--taken { stroke: var(--chart-in); }
.nhq-chart__line--target { stroke: var(--ink-muted); stroke-dasharray: 4 4; }
.nhq-chart__dot--taken { stroke: var(--chart-in); }
.nhq-chart__today { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.nhq-legend__key--taken, .nhq-legend__key--target, .nhq-legend__key--today { height: 0; border-radius: 0; border-top: 2px solid var(--chart-in); }
.nhq-legend__key--target { border-top: 2px dashed var(--ink-muted); }
.nhq-legend__key--today { border-top: 1px dashed var(--line-strong); }

/* DataTable cells that must stay on one line (dates, ages, short labels). */
.nhq-table td.nhq-nowrap, .nhq-table th.nhq-nowrap { white-space: nowrap; }

/* DataTable type (components/DataTable/README.md). bundle.css's `.nhq-table .num/.mono` outranks the header and
   totals rules, so numeric column headers came out in `data` instead of the eyebrow-style caps, and totals
   figures in `data` instead of `data-strong`. */
.nhq-table th.num, .nhq-table th.mono { font: 600 11px/14px var(--font-sans); }
.nhq-table tfoot td.num, .nhq-table tfoot td.mono { font-weight: 600; }

/* Description-list labels in `small`: Bootstrap's reboot makes <dt> 700, which is not in the type scale. */
.nhq-dl dt { font-weight: 500; }

/* ---------- Disclosure (components/Disclosure/README.md): a section that folds to its summary line ---------- */
.nhq-disclosure { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.nhq-disclosure > summary { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); cursor: pointer; list-style: none; }
.nhq-disclosure > summary::-webkit-details-marker { display: none; }
.nhq-disclosure > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-md); }
.nhq-disclosure__title { display: inline-flex; align-items: baseline; gap: var(--space-2); font: 600 14px/20px var(--font-sans); }
.nhq-disclosure__title::before { content: ""; align-self: center; width: 6px; height: 6px; border-right: 1.5px solid var(--ink-muted); border-bottom: 1.5px solid var(--ink-muted); transform: rotate(-45deg); transition: transform .15s; }
.nhq-disclosure[open] > summary .nhq-disclosure__title::before { transform: rotate(45deg); }
.nhq-disclosure__stats { display: flex; flex-wrap: wrap; gap: var(--space-4); font: 400 13px/18px var(--font-mono); }
.nhq-disclosure__stats dt { display: inline; color: var(--ink-muted); font: 500 12px/16px var(--font-sans); margin-right: var(--space-1); }
.nhq-disclosure__stats dd { display: inline; margin: 0; }
.nhq-disclosure__stats div { white-space: nowrap; }
.nhq-disclosure__body { padding: 0 var(--space-4) var(--space-4); }

/* ---------- Print: reports print as shown, without the app frame ---------- */
@media print {
  .nhq-top, .nhq-navbar, .nhq-skip, [data-nhq-print] { display: none !important; }
  html, body, .nhq-shell, .nhq-main { background: var(--surface-raised); }
  .nhq-content { padding: 0; }
  /* Four KPIs to a row, and cards kept whole. */
  .nhq-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
  .nhq-kpi__value { font-size: 22px; line-height: 28px; }
  .nhq-card, .nhq-kpi { break-inside: avoid; }
  /* Sections run on across pages rather than each starting a new one; a heading stays with what follows. */
  .nhq-disclosure[open] > summary { break-after: avoid; }
  .nhq-table tr { break-inside: avoid; }
  .nhq-table thead { display: table-header-group; }
  /* A total prints once, after its rows: Chrome otherwise repeats <tfoot> at the foot of every page. */
  .nhq-table tfoot { display: table-row-group; }
  /* Two tables stay side by side on A4 portrait (about 700px printable, so about 325px each): tighter type and cells. */
  .nhq-grid2--tables { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .nhq-grid2--tables .nhq-table th { padding: var(--space-1) var(--space-2); font-size: 9px; }
  .nhq-grid2--tables .nhq-table td { height: auto; padding: var(--space-1) var(--space-2); font-size: 11px; line-height: 14px; }
  .nhq-grid2--tables .nhq-table caption { padding: var(--space-1) var(--space-2); }
  .nhq-grid2--tables .nhq-doctag { height: 14px; margin-left: var(--space-1); padding: 0 4px; font-size: 8px; }
  .nhq-disclosure__body { padding: 0 var(--space-3) var(--space-3); }
  .nhq-chartwrap { overflow: visible; }
  .nhq-chart--wide { display: none !important; }
  .nhq-chart--compact { display: block !important; min-width: 0; }
}

/* ---------- DocTag (components/DocTag/README.md): document-type pill after a name ---------- */
.nhq-doctag { display: inline-flex; align-items: center; height: 18px; margin-left: var(--space-2); padding: 0 6px; border: 1px solid var(--surface-sunken); border-radius: var(--radius-pill); background: var(--surface-sunken); color: var(--ink); font: 600 11px/14px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; vertical-align: 1px; }
.nhq-doctag--forecast { border: 1px dashed var(--line-strong); background: transparent; color: var(--ink-muted); }

/* ---------- Document (components/Document/README.md): a record for a customer, on an A4 sheet ---------- */
/* The PDF renderer (dompdf) reads this file too: it knows CSS 2.1 and custom properties but not flex or grid,
   so the sheet is laid out with blocks and tables. Always light: paper is. Screen-only parts are flex. */
.nhq-docpage { background: var(--surface-sunken); }
body.nhq-docpage { min-height: 100vh; }
.nhq-sg__pane .nhq-docpage { padding: var(--space-4); }
.nhq-sg__pane .nhq-doc { margin-bottom: 0; }
.nhq-docpage__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); max-width: var(--document-width); margin: 0 auto; padding: var(--space-4) 0; }
.nhq-docpage__bar .nhq-row { gap: var(--space-2); }
.nhq-doc { box-sizing: border-box; max-width: var(--document-width); margin: 0 auto var(--space-7); padding: var(--space-7) var(--space-7) var(--space-6); border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); font: 400 13px/18px var(--font-sans); }
.nhq-doc table { width: 100%; border-collapse: collapse; }
.nhq-doc__head { margin-bottom: var(--space-6); border-bottom: 2px solid var(--ink); }
.nhq-doc__head td { padding: 0 0 var(--space-4); vertical-align: bottom; }
.nhq-doc__issuer { font: 600 22px/28px var(--font-display); }
.nhq-doc__kind { color: var(--ink-muted); font: 600 11px/14px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; }
.nhq-doc__number { font: 600 18px/24px var(--font-mono); }
.nhq-doc__date { color: var(--ink-muted); font: 500 12px/16px var(--font-sans); }
.nhq-doc__head .nhq-doc__right { text-align: right; }
.nhq-doc__section { margin-top: var(--space-6); }
.nhq-doc__title { margin: 0 0 var(--space-2); padding-bottom: var(--space-1); border-bottom: 1px solid var(--line); font: 600 14px/20px var(--font-sans); font-size: 14px; /* dompdf keeps its h2 size otherwise */ }
.nhq-doc__note { margin: var(--space-2) 0 0; color: var(--ink-muted); font: 500 12px/16px var(--font-sans); }
.nhq-doc__mono { font-family: var(--font-mono); }
.nhq-doc__muted { color: var(--ink-muted); }
/* Key figures: up to four side by side. */
.nhq-doc__facts td { width: 25%; padding: var(--space-3); border: 1px solid var(--line); vertical-align: top; }
.nhq-doc__label { color: var(--ink-muted); font: 600 11px/14px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; }
.nhq-doc__value { margin-top: var(--space-1); font: 500 18px/24px var(--font-display); }
.nhq-doc__sub { color: var(--ink-muted); font: 500 12px/16px var(--font-sans); }
/* Terms: label and value pairs. */
.nhq-doc__terms th { width: 32%; padding: var(--space-1) var(--space-3) var(--space-1) 0; color: var(--ink-muted); font: 500 12px/18px var(--font-sans); text-align: left; vertical-align: top; }
.nhq-doc__terms td { padding: var(--space-1) 0; vertical-align: top; }
/* Line tables. */
.nhq-doc__table th { padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--line-strong); color: var(--ink-muted); font: 600 11px/14px var(--font-sans); letter-spacing: .08em; text-align: left; text-transform: uppercase; }
.nhq-doc__table td { padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--line); vertical-align: top; }
.nhq-doc__table th:first-child, .nhq-doc__table td:first-child { padding-left: 0; }
.nhq-doc__table th:last-child, .nhq-doc__table td:last-child { padding-right: 0; }
.nhq-doc__table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nhq-doc__table .mono { font-family: var(--font-mono); white-space: nowrap; }
.nhq-doc__table tr { page-break-inside: avoid; break-inside: avoid; }
.nhq-doc__table thead { display: table-header-group; }
.nhq-doc__empty { color: var(--ink-muted); }
/* Chart: a standalone SVG image the width of the sheet, its legend as inline keys under it. */
.nhq-doc__chart img { display: block; width: 100%; height: auto; }
.nhq-doc__legend { margin: var(--space-2) 0 0; color: var(--ink-muted); font: 500 12px/16px var(--font-sans); }
.nhq-doc__legend > span { margin-right: var(--space-4); white-space: nowrap; }
.nhq-doc__legend .nhq-legend__key { display: inline-block; width: 12px; margin-right: var(--space-2); vertical-align: middle; }
.nhq-doc__foot { margin-top: var(--space-7); padding-top: var(--space-2); border-top: 1px solid var(--line); color: var(--ink-muted); font: 500 11px/14px var(--font-sans); }
/* Narrow screens: the figures go two to a row and a wide line table scrolls sideways inside the sheet. */
@media screen and (max-width: 767.98px) {
  .nhq-docpage__bar { padding-inline: var(--space-4); }
  .nhq-doc { padding: var(--space-5) var(--space-4); }
  .nhq-doc__facts tr { display: flex; flex-wrap: wrap; }
  .nhq-doc__facts td { flex: 1 1 50%; box-sizing: border-box; }
  .nhq-doc__scroll { overflow-x: auto; }
}
@media print {
  @page { size: A4; margin: 14mm 16mm; }
  .nhq-docpage { background: var(--surface-raised); }
  body.nhq-docpage { min-height: 0; }
  .nhq-docpage__bar { display: none !important; }
  .nhq-doc { max-width: none; margin: 0; padding: 0; border: 0; }
  .nhq-doc__section { break-inside: auto; }
  .nhq-doc__title { break-after: avoid; page-break-after: avoid; }
  .nhq-doc__chart { break-inside: avoid; page-break-inside: avoid; }
}

/* ---------- Scorecard (components/Scorecard/README.md): one person's month against target, with a half-circle gauge ---------- */
.nhq-scorecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: var(--space-4); }
.nhq-scorecard { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-5); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.nhq-scorecard__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.nhq-scorecard__person { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.nhq-scorecard__photo { flex: none; width: 64px; height: 64px; border: 1px solid var(--line); border-radius: var(--radius-pill); object-fit: cover; }
.nhq-scorecard__photo--initials { display: inline-flex; align-items: center; justify-content: center; background: var(--surface-sunken); color: var(--ink-muted); font: 600 11px/14px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; }
.nhq-scorecard__name { margin: 0; font: 500 30px/34px var(--font-display); color: var(--ink); }
.nhq-scorecard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-1) 0 0; color: var(--ink-muted); }
.nhq-scorecard__note { color: var(--warning); }
.nhq-scorecard__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0; }
.nhq-scorecard__metrics dt { margin-bottom: var(--space-1); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nhq-scorecard__metrics dd { margin: 0; font: 500 30px/34px var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); }
.nhq-scorecard__drill { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-variant-numeric: inherit; text-decoration: underline dotted var(--line-strong); text-decoration-thickness: 2px; text-underline-offset: 6px; cursor: pointer; border-radius: var(--radius-sm); }
/* The whole figure, label included, is the button's hit area (its ::after covers the figure). */
.nhq-scorecard__metric--drill { position: relative; }
.nhq-scorecard__drill::after { content: ""; position: absolute; inset: calc(-1 * var(--space-2)); }
.nhq-scorecard__metric--drill:hover .nhq-scorecard__drill { text-decoration-style: solid; text-decoration-color: var(--ink-muted); }
.nhq-scorecard__metric--drill:hover { background: var(--surface-sunken); box-shadow: 0 0 0 var(--space-2) var(--surface-sunken); border-radius: var(--radius-sm); }
.nhq-scorecard__of { font: 500 14px/20px var(--font-sans); color: var(--ink-muted); }
.nhq-gauge { display: block; flex: none; width: 176px; height: auto; }
.nhq-gauge__track, .nhq-gauge__arc { fill: none; stroke-width: 16; }
.nhq-gauge__track { stroke: var(--line); }
.nhq-gauge__tick-ring { stroke: var(--surface-raised); stroke-width: 7; stroke-linecap: round; }
.nhq-gauge__tick { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.nhq-gauge__value { fill: var(--ink); font: 500 36px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.nhq-gauge--negative .nhq-gauge__arc { stroke: var(--negative); }
.nhq-gauge--negative .nhq-gauge__value { fill: var(--negative); }
.nhq-gauge--warning .nhq-gauge__arc { stroke: var(--warning); }
.nhq-gauge--warning .nhq-gauge__value { fill: var(--warning); }
.nhq-gauge--positive .nhq-gauge__arc { stroke: var(--positive); }
.nhq-gauge--positive .nhq-gauge__value { fill: var(--positive); }
.nhq-gauge--ahead .nhq-gauge__arc { stroke: var(--crust); }
@media print { .nhq-scorecard { break-inside: avoid; } }

/* ---------- Home (components/Welcome/README.md): welcome and places side by side, then KPIs, then charts ---------- */
.nhq-home__top, .nhq-home__bottom { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 984px) {
  .nhq-home__top { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; }
  .nhq-home__bottom { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .nhq-kpis--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Welcome (components/Welcome/README.md): greeting, headline figures and what needs attention ---------- */
.nhq-welcome { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-md); background: linear-gradient(135deg, var(--crust-soft), var(--surface-raised) 70%); box-shadow: inset 0 3px 0 var(--crust); }
@media (min-width: 720px) { .nhq-welcome { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.nhq-welcome__title { margin: 0; font: 600 16px/22px var(--font-sans); }
.nhq-welcome__lead { margin: var(--space-1) 0 0; color: var(--ink-muted); }
.nhq-welcome__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.nhq-welcome__stat { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.nhq-welcome__value { font: 500 30px/34px var(--font-display); font-variation-settings: "opsz" 72; letter-spacing: -.01em; }
.nhq-welcome__list { display: flex; flex-direction: column; min-width: 0; background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
.nhq-welcome__head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.nhq-welcome__items { margin: 0; padding: 0; list-style: none; max-height: 288px; overflow-y: auto; }
.nhq-welcome__item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--line); }
.nhq-welcome__item:last-child { border-bottom: 0; }
.nhq-welcome__icon { flex: none; display: inline-flex; padding-top: 2px; }
.nhq-welcome__item--negative .nhq-welcome__icon { color: var(--negative); }
.nhq-welcome__item--warning .nhq-welcome__icon { color: var(--warning); }
.nhq-welcome__what { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nhq-welcome__clear { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-4); color: var(--positive); }

/* ---------- Places (components/Places/README.md): each site's local time and weather ---------- */
.nhq-places { margin: 0; padding: 0; list-style: none; }
.nhq-place { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
.nhq-place:first-child { padding-top: 0; }
.nhq-place:last-child { padding-bottom: 0; border-bottom: 0; }
.nhq-place__icon { display: inline-flex; color: var(--ink-muted); }
.nhq-place__name { display: flex; flex-direction: column; font-weight: 600; }
.nhq-place__name .nhq-small { font-weight: 500; }
.nhq-place__temp { font: 600 16px/22px var(--font-sans); font-variant-numeric: tabular-nums; }
.nhq-place__time { min-width: 5ch; text-align: right; font: 400 13px/18px var(--font-mono); color: var(--ink-muted); }

/* ---------- Progress (components/Progress/README.md): a thin bar towards a target, with a tick where it should be ---------- */
.nhq-progress { display: block; width: 100%; height: 6px; border-radius: var(--radius-pill); overflow: hidden; }
.nhq-progress__track { fill: var(--surface-sunken); }
.nhq-progress__bar { fill: var(--ink); }
.nhq-progress--positive .nhq-progress__bar { fill: var(--positive); }
.nhq-progress--warning .nhq-progress__bar { fill: var(--warning); }
.nhq-progress--negative .nhq-progress__bar { fill: var(--negative); }
.nhq-progress__mark { stroke: var(--ink); stroke-width: 2px; vector-effect: non-scaling-stroke; }

/* ---------- Sparkline (components/Sparkline/README.md): a small trend under a KPI figure, no axes ---------- */
.nhq-spark { display: block; width: 100%; height: 32px; }
.nhq-spark__area { fill: var(--chart-in); fill-opacity: .12; }
.nhq-spark__line { fill: none; stroke: var(--chart-in); stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* KpiCard (components/KpiCard/README.md): a progress bar or sparkline under the figures, and a link to its report at the foot. */
.nhq-kpi__extra { display: flex; flex-direction: column; gap: var(--space-1); }
.nhq-kpi__link { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: auto; padding-top: var(--space-2); border-top: 1px solid var(--line); font: 600 12px/16px var(--font-sans); color: var(--ink); text-decoration: none; }
.nhq-kpi__link:hover { text-decoration: underline; }

/* YearChart (components/Chart/README.md, "Year chart"): last year a dashed ink-muted line, the target an ink rule. */
.nhq-chart__line--previous { stroke: var(--ink-muted); stroke-dasharray: 4 4; }
.nhq-chart__dot--previous { stroke: var(--ink-muted); }
.nhq-chart__goal { stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.nhq-legend__key--previous, .nhq-legend__key--goal { height: 0; border-radius: 0; border-top: 2px dashed var(--ink-muted); }
.nhq-legend__key--goal { border-top: 2px solid var(--ink); }

/* DataTable (components/DataTable/README.md, "Figures entered in the table"): an amount typed into a row, right-aligned. */
.nhq-table__input { width: 16ch; max-width: 100%; text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.nhq-table__error { display: block; white-space: normal; text-align: right; }
.nhq-card__foot { margin-top: var(--space-4); }

/* ---------- Funnel (components/Funnel/README.md): a value funnel, stage bars widest to narrowest, the outcome below a rule ---------- */
.nhq-funnel { display: grid; grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr) max-content max-content; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; padding: 0; list-style: none; }
.nhq-funnel__row { display: contents; }
.nhq-funnel__label { min-width: 0; color: var(--ink); }
.nhq-funnel__bar { display: block; width: 100%; height: 20px; border-radius: var(--radius-sm); overflow: hidden; }
.nhq-funnel__track { fill: var(--surface-sunken); }
.nhq-funnel__fill { fill: var(--funnel-1); }
.nhq-funnel__row--2 .nhq-funnel__fill { fill: var(--funnel-2); }
.nhq-funnel__row--3 .nhq-funnel__fill { fill: var(--funnel-3); }
.nhq-funnel__row--4 .nhq-funnel__fill { fill: var(--funnel-4); }
.nhq-funnel__row--5 .nhq-funnel__fill { fill: var(--funnel-5); }
.nhq-funnel__value { text-align: right; font: 400 13px/18px var(--font-mono); }
.nhq-funnel__note { color: var(--ink-muted); font-size: 12px; line-height: 16px; white-space: nowrap; }
.nhq-funnel__rule { grid-column: 1 / -1; margin: var(--space-1) 0; border-top: 1px solid var(--line); }
.nhq-funnel__row--end .nhq-funnel__fill { fill: var(--funnel-won); }
@media (max-width: 639px) {
  .nhq-funnel { grid-template-columns: minmax(5rem, max-content) minmax(0, 1fr) max-content; }
  .nhq-funnel__note { grid-column: 3; margin-top: calc(-1 * var(--space-2)); text-align: right; }
}