/* ==========================================================================
   LaQuest Payroll — SHARED COMPONENTS
   Reusable, page-agnostic component styles: the enterprise table frame,
   shared page states, fullscreen table behaviour and row-density rules.
   Page-specific styling stays in its own sheet. No shell rule lives here —
   the rail, sidebar, topbar, workspace frame, curve, widths, scroll
   containers and responsive shell behaviour are owned by lq-shell.css and
   lq-fixes.css and are not touched by this file.
   ========================================================================== */

/* ── SHARED TABLE FRAME (2026-08-16) · page content only; no shell rule is touched ── */
.table-frame { padding: 0; overflow: hidden; }
.table-frame .tf-head { display: flex; align-items: center; justify-content: space-between; gap: var(--lq-space-3);
  padding: 13px 18px; border-bottom: 1px solid var(--lq-border); }
.table-frame .tf-count { font-size: var(--lq-text-small); font-weight: var(--lq-weight-semibold); color: var(--lq-ink-primary); }
.table-frame .tf-title { font-size: var(--lq-text-body); font-weight: var(--lq-weight-semibold); color: var(--lq-ink-primary); line-height: 1.3; }
.table-frame .tf-title + .tf-count { font-weight: var(--lq-weight-regular); color: var(--lq-ink-secondary); margin-top: 2px; }
.table-frame .tf-actions { display: flex; align-items: center; gap: 12px; }
.table-frame .tf-div { width: 1px; height: 18px; background: var(--lq-border); display: inline-block; }
.table-frame .tf-expand { width: 30px; height: 30px; border: none; border-radius: 9px; background: var(--lq-surface-subtle);
  color: var(--lq-ink-secondary); display: grid; place-items: center; cursor: pointer; }
.table-frame .tf-expand:hover { background: var(--lq-border); color: var(--lq-ink-primary); }
.table-frame .tf-expand svg { width: 14px; height: 14px; }
.table-frame .tf-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--lq-space-3);
  padding: 11px 18px; border-top: 1px solid var(--lq-border); font-size: var(--lq-text-caption); color: var(--lq-ink-muted); }
.table-frame .tf-skel-row { padding: 12px 18px; }
/* 44px standard row · 48px when the row carries secondary text or row actions */
.table-frame tbody tr { height: 44px; }
.table-frame tbody tr.row-2l { height: 48px; }
/* Expand-to-fullscreen: the table takes the workspace. The shell is untouched — this only
   raises the card within the existing content area. */
.table-frame.is-expanded { position: fixed; inset: 16px; z-index: 90; margin: 0; display: flex; flex-direction: column;
  box-shadow: var(--lq-shadow-lg); background: var(--lq-surface-card); }
.table-frame.is-expanded .table-scroll, .table-frame.is-expanded .egrid-wrap { flex: 1; min-height: 0; }
html.lq-table-expanded { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) { .table-frame.is-expanded { animation: tfIn 180ms cubic-bezier(.22,.61,.36,1) both; } }
@keyframes tfIn { from { opacity: 0; transform: scale(.995); } to { opacity: 1; transform: none; } }

/* ── RUN LIFECYCLE STRIP — dark green + motion (approved 2026-08-17) ──────────────
   A completed stage is FINISHED work, so it reads in the deep green, not the emerald
   status tone. The strip settles in sequence on first paint: each finished node
   scales up, its connector draws left to right, and the current stage breathes once
   a second so the eye lands on where the run actually is. Motion is decorative only —
   the state is already carried by the fill, the check, and the label. */
.pipeline .stage.done .node { background: var(--lq-success-deep); border: 1px solid var(--lq-success-deep); color: #fff;
  box-shadow: 0 1px 2px rgba(14,107,71,.28); }
.pipeline .stage.done .name { color: var(--lq-success-deep); font-weight: 600; }
.pipeline .pipe-connector.done { background: var(--lq-success-deep); height: 2px; }
.pipeline .node { animation: lqStageIn .42s cubic-bezier(.2,.8,.25,1) both; }
.pipeline .pipe-connector { transform: scaleX(0); transform-origin: left center;
  animation: lqDraw .34s cubic-bezier(.3,.7,.3,1) both; }
.pipeline > *:nth-child(1) { animation-delay: .04s } .pipeline > *:nth-child(2) { animation-delay: .13s }
.pipeline > *:nth-child(3) { animation-delay: .22s } .pipeline > *:nth-child(4) { animation-delay: .31s }
.pipeline > *:nth-child(5) { animation-delay: .40s } .pipeline > *:nth-child(6) { animation-delay: .49s }
.pipeline > *:nth-child(7) { animation-delay: .58s } .pipeline > *:nth-child(8) { animation-delay: .67s }
.pipeline > *:nth-child(9) { animation-delay: .76s } .pipeline > *:nth-child(10){ animation-delay: .85s }
.pipeline > *:nth-child(11){ animation-delay: .94s }
.pipeline .stage.done .node { animation: lqStageIn .42s cubic-bezier(.2,.8,.25,1) both, lqStageSettle .5s ease .1s both; }
.pipeline .stage.current .node { animation: lqStageIn .42s cubic-bezier(.2,.8,.25,1) both, lqStageBreathe 2.6s ease-in-out 1.1s infinite; }
@keyframes lqStageIn { from { opacity: 0; transform: scale(.72) } to { opacity: 1; transform: scale(1) } }
@keyframes lqDraw { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes lqStageSettle { 0% { box-shadow: 0 0 0 0 var(--lq-success-deep-t) } 70% { box-shadow: 0 0 0 7px transparent }
  100% { box-shadow: 0 1px 2px rgba(14,107,71,.28) } }
@keyframes lqStageBreathe { 0%,100% { box-shadow: 0 0 0 0 rgba(30,54,201,.30) } 50% { box-shadow: 0 0 0 6px rgba(30,54,201,0) } }
@media (prefers-reduced-motion: reduce) {
  .pipeline .node, .pipeline .pipe-connector, .pipeline .stage.done .node, .pipeline .stage.current .node {
    animation: none !important; transform: none !important; opacity: 1 !important; }
}

/* ── TABLE FOOTER — approved anatomy (2026-08-17) ─────────────────────────────────
   Left: what the list holds and how much of it is selected. Right: rows per page,
   then the pager. The selection chip stays present at zero so the row does not
   reflow the moment a checkbox is ticked. */
.tf-footactions { display: flex; align-items: center; gap: 14px; }
.tf-pagesize select { font: inherit; font-size: var(--lq-text-small); color: var(--lq-ink-secondary);
  background: var(--lq-surface-subtle); border: 1px solid var(--lq-border); border-radius: 8px;
  padding: 4px 8px; cursor: pointer; }
.tf-pagesize select:focus-visible { outline: 3px solid var(--lq-accent-tint); outline-offset: 1px; }
.emp-foot__sel { opacity: .55; }
.emp-foot__info .muted { color: var(--lq-ink-muted); }
/* An empty result keeps the column headers above it, so the table's shape stays readable
   and the user can see which filter to relax. */
.tf-emptyrow > td { padding: 0 !important; background: var(--lq-surface-card); }
.tf-emptyrow .empty { padding: 40px 20px; }
.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; }

/* ── RUN PAYROLL — approved canvas composition (2026-08-17) ───────────────────────
   Lifecycle, the stage figure and the readiness verdict share one card, so the first
   thing an officer reads is where the run is and whether it can move. */
.run-lifecard { padding: 16px 18px; margin-bottom: var(--lq-space-4); }
.run-stagefig { display: inline-block; margin-left: 14px; font-size: var(--lq-text-small);
  color: var(--lq-ink-muted); vertical-align: middle; }
/* APPROVED PAGE 16 — the readiness line. A quiet label, then the three counts on ONE line,
   in the tone of the worst tier open. It is a line, not a card, because it reports on the
   lifecycle strip directly above it rather than standing on its own. */
.run-readiness { margin-top: 12px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.run-readiness__lbl { font-size: var(--lq-text-caption); font-weight: var(--lq-weight-semibold);
  letter-spacing: .08em; text-transform: uppercase; color: var(--lq-ink-muted); flex: none; }
.run-readiness__s { font-size: var(--lq-text-small); font-weight: var(--lq-weight-medium); color: var(--lq-ink-secondary); }
.run-readiness.is-ok    .run-readiness__s { color: var(--lq-success-text); }
.run-readiness.is-warn  .run-readiness__s { color: var(--lq-warning-text); }
.run-readiness.is-block .run-readiness__s { color: var(--lq-danger-text); font-weight: var(--lq-weight-semibold); }

/* APPROVED PAGE 16 — the blocking banner. A red left rule, the count as the headline, the
   rule beneath it, and the two actions inside the banner so the remedy sits with the problem.
   It never moves to a table footer: it is blocking, and blocking warnings stay next to the
   action they govern. */
.run-block { margin: 0 0 var(--space-5); padding: 16px 18px; border-radius: 12px;
  background: var(--lq-danger-tint); border: 1px solid var(--lq-danger-border);
  border-left: 4px solid var(--lq-danger); }
.run-block__h { font-size: var(--lq-text-h3); font-weight: var(--lq-weight-semibold); color: var(--lq-danger-text); }
.run-block__s { font-size: var(--lq-text-small); color: var(--lq-ink-secondary); margin-top: 4px; max-width: 68ch; }
.run-block__a { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: 14px; }

/* APPROVED PAGE 16 — the findings table on the run page. Detail is the wide column and the
   only one allowed to wrap, so a long explanation never squeezes the employee name. */
.anomaly-table .anomaly-td-detail { white-space: normal; color: var(--lq-ink-secondary); }
.anomaly-table tbody tr.is-block td { background: var(--lq-danger-tint); }
.anomaly-table tbody tr.is-open td { background: var(--lq-accent-tint); }
.anomaly-table tbody tr.anomaly-detail td { background: var(--lq-surface-app); padding: var(--space-4); }
.anomaly-table tbody tr.anomaly-detail .anomaly-row__body { max-width: 780px; }
details.run-advanced.card { padding: 14px 18px; }
details.run-advanced > summary::marker { color: var(--lq-ink-muted); }

/* ── ANOMALY QUEUE — severity band (approved 2026-08-17) ──────────────────────────
   Four counts, each captioned with what that severity means for posting, so nobody
   has to learn the difference between a blocker and an advisory from colour alone. */
.aq-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;
  margin-bottom: var(--lq-space-4); }
.aq-band__c { border: 1px solid var(--lq-border); border-radius: 12px; padding: 12px 14px;
  background: var(--lq-surface-card); }
.aq-band__l { font-size: var(--lq-text-caption); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--lq-ink-muted); }
.aq-band__n { font-size: 22px; font-weight: 700; letter-spacing: -.015em; margin-top: 2px;
  font-variant-numeric: tabular-nums; }
.aq-band__s { font-size: var(--lq-text-caption); color: var(--lq-ink-muted); margin-top: 1px; }
.aq-band__c.is-block { border-color: var(--lq-danger-border, #f2c9c9); }
.aq-band__c.is-warn  { border-color: var(--lq-warning-border, #f0d6a8); }

/* ── GOVERNMENT FILING — next obligation (approved 2026-08-17) ────────────────────
   One line above the radar naming the nearest deadline. Tone shifts only at three
   days out and again once a date has passed; the words carry the meaning either way. */
.filing-next { border: 1px solid var(--lq-border); border-radius: 12px; padding: 12px 16px;
  margin-bottom: 12px; background: var(--lq-surface-card); }
.filing-next__l { font-size: var(--lq-text-caption); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--lq-ink-muted); }
.filing-next__v { font-size: var(--lq-text-body); margin-top: 2px; }
.filing-next__w { color: var(--lq-ink-muted); }
.filing-next__s { font-size: var(--lq-text-caption); color: var(--lq-ink-muted); margin-top: 2px; }
.filing-next.is-soon { border-color: var(--lq-warning-border, #f0d6a8); }
.filing-next.is-soon .filing-next__w { color: var(--lq-warning-text); font-weight: 600; }
.filing-next.is-late { border-color: var(--lq-danger-border, #f2c9c9); }
.filing-next.is-late .filing-next__w { color: var(--lq-danger, #c0392b); font-weight: 600; }

/* ── LIFECYCLE STRIP — layout that works OUTSIDE the dashboard (bug fix 2026-08-17) ──
   ROOT CAUSE of the broken Run Payroll strip: legacy.css styles `.pipeline` as a
   5-column CSS grid (the old dashboard component). The flex layout that makes the six
   stages read as a row lived only under `.lq-dash .pipeline`, so the moment the same
   component was rendered on Run Payroll it fell back to the legacy grid — stages wrapped
   into boxes and the connectors stretched into full-width rules.
   These rules give `.pipeline` a correct layout ANYWHERE. The dashboard's own scoped
   rules are identical and still win inside `.lq-dash`, so nothing there changes. */
.pipeline { display: flex; align-items: center; flex-wrap: wrap; row-gap: 8px;
  grid-template-columns: none; }
.pipeline .stage { flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; gap: 7px;
  border: none; border-left: none; background: none; padding: 2px 4px; border-radius: 6px;
  cursor: pointer; font: inherit; }
.pipeline .stage:first-child { padding-left: 0; }
.pipeline .node { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  margin-top: 0; background: transparent; border: 1.5px dashed var(--lq-border-strong);
  color: var(--lq-ink-muted); font-size: 10px; font-weight: 600; font-family: inherit; flex: 0 0 20px; }
.pipeline .node svg { width: 11px; height: 11px; }
.pipeline .name { display: block; font-size: 12.5px; font-weight: 500; color: var(--lq-ink-muted);
  line-height: 1.3; white-space: nowrap; }
.pipeline .stage.current .node { background: var(--lq-accent); border: 1px solid var(--lq-accent);
  color: var(--lq-ink-inverse, #fff); }
.pipeline .stage.current .name { color: var(--lq-accent); font-weight: 600; }
.pipeline .pipe-connector { flex: 0 0 26px; height: 1px; background: var(--lq-border); margin: 0 8px;
  display: block; }
@media (max-width: 760px) { .pipeline .name { white-space: normal; } }
/* Same class of bug, caught by the audit: the Employees page uses .plus-icon, which was
   styled only under .lq-dash. Unscoped so the glyph sizes correctly wherever it is used. */
.plus-icon { display: inline-flex; }
.plus-icon svg { width: 15px; height: 15px; }

/* ══ UNSTYLED-MARKUP REPAIR (2026-08-17) ═════════════════════════════════════════
   Audit finding: 45 class names were rendered by page content with no matching CSS
   rule anywhere in the product. Those sections painted as bare markup, which is the
   main reason live pages did not resemble the approved designs even though their
   structure was correct. Each rule below gives an orphaned class the treatment its
   markup clearly intends — layout and rhythm only, no new colour meaning. */

/* Forms and dialogs */
.form-grid { display: grid; gap: var(--lq-space-3); }
.radio-row { display: flex; align-items: flex-start; gap: 10px; font-size: var(--lq-text-small);
  line-height: 1.55; padding: 8px 10px; border: 1px solid var(--lq-border); border-radius: 10px;
  background: var(--lq-surface-card); cursor: pointer; }
.radio-row:hover { border-color: var(--lq-border-strong); }
.radio-row input { margin-top: 3px; flex: 0 0 auto; }
.check-row { display: flex; align-items: center; gap: 10px; font-size: var(--lq-text-small);
  padding: 6px 0; }
.modal__foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: var(--lq-space-5);
  padding-top: var(--lq-space-4); border-top: 1px solid var(--lq-border); }
.field__input { width: 100%; font: inherit; font-size: var(--lq-text-small); color: var(--lq-ink-primary);
  background: var(--lq-surface-card); border: 1px solid var(--lq-border); border-radius: 10px;
  padding: 9px 12px; }
.field__input:focus-visible { outline: 3px solid var(--lq-accent-tint); outline-offset: 1px;
  border-color: var(--lq-accent); }

/* KPI bands and insight cards */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px;
  margin: var(--lq-space-4) 0; }
.insight { border: 1px solid var(--lq-border); border-radius: 14px; padding: 16px 18px;
  background: var(--lq-surface-card); }
.lq-card-body { padding: var(--lq-space-4); display: flex; flex-direction: column; gap: var(--lq-space-3); }

/* Dashboard panels rendered outside the dashboard grid */
.lq-attention { background: var(--lq-surface-card); border: 1px solid var(--lq-border);
  border-radius: 14px; padding: 16px 18px; }

/* Table shell head (Employees) */
.table-shell { border: 1px solid var(--lq-border); border-radius: 14px; overflow: hidden;
  background: var(--lq-surface-card); }

/* Run Payroll stage explorer */
.run-pipeline { margin-top: var(--lq-space-6); }

/* Knowledge Base main column */
.kb-main { display: flex; flex-direction: column; gap: var(--lq-space-4); }

/* Small typographic helpers used across pages */
.sec-label { font-size: var(--lq-text-caption); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--lq-ink-muted); margin: var(--lq-space-5) 0 var(--lq-space-2); }
.foot-note { font-size: var(--lq-text-caption); color: var(--lq-ink-muted); line-height: 1.6; }
.submuted { color: var(--lq-ink-muted); }
.agency-txt { font-size: var(--lq-text-small); color: var(--lq-ink-secondary); }
.co-sec__l { font-size: var(--lq-text-caption); color: var(--lq-ink-muted); }
.unprov-note { font-size: var(--lq-text-caption); color: var(--lq-ink-muted);
  border: 1px dashed var(--lq-border-strong); border-radius: 10px; padding: 10px 12px; }
.progress-row { display: flex; align-items: center; gap: 10px; font-size: var(--lq-text-small);
  padding: 6px 0; }
.cmp-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9px;
  background: var(--lq-accent-tint); color: inherit; flex: 0 0 28px; }
.cmp-ic svg { width: 15px; height: 15px; }
.is-uploading { opacity: .6; pointer-events: none; }

/* Statutory identifier inline edit */
.statid-edit { display: flex; align-items: center; gap: 8px; }
.statid__fix, .statid__undo { font-size: var(--lq-text-caption); color: var(--lq-accent);
  background: none; border: none; padding: 2px 4px; cursor: pointer; }

/* Payslip workspace fragments */
.payws__slip { border: 1px solid var(--lq-border); border-radius: 14px; background: var(--lq-surface-card);
  padding: var(--lq-space-5); }
.slip2__col { display: flex; flex-direction: column; gap: 4px; }

/* Copilot / assistant fragments that fall outside the view's own inline styles */
.cres--ai { border: 1px solid var(--lq-border); border-radius: 12px; padding: 12px 14px;
  background: var(--lq-surface-card); }
.thr-in { display: flex; gap: 10px; align-items: flex-start; }
.suggest { display: flex; flex-wrap: wrap; gap: 8px; }
.agent-card { border: 1px solid var(--lq-border); border-radius: 14px; padding: 16px 18px;
  background: var(--lq-surface-card); display: flex; flex-direction: column; gap: 10px; }

/* Notification centre groupings */
.nc-body { display: flex; flex-direction: column; gap: var(--lq-space-3); }
.nc-catgrp { display: flex; flex-direction: column; gap: 8px; }
.nc-digest { border: 1px solid var(--lq-border); border-radius: 12px; padding: 12px 14px;
  background: var(--lq-surface-subtle); font-size: var(--lq-text-small); }

/* Get-started and copilot home fragments */
.gs2-plan-wrap { display: flex; flex-direction: column; gap: var(--lq-space-3); }
.gs2-ant { display: grid; place-items: center; }
.cpl-home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.cpl-copy__l { font-size: var(--lq-text-caption); color: var(--lq-ink-muted); }

/* Legacy list item used by settings sections */
.lq-list-item { display: flex; align-items: center; gap: 12px; padding: 12px 0;
  border-bottom: 1px solid var(--lq-border); }
.lq-list-item:last-child { border-bottom: 0; }

/* ── RUN PAYROLL header + advanced line (approved canvas, 2026-08-17) ─────────────
   The lifecycle sits inline under the page header rather than inside a card, so the
   run's state reads as part of the page identity. The readiness panel follows it, and
   the page closes on one quiet line rather than a bordered disclosure. */
.run-lifeline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 0;
  margin: var(--lq-space-4) 0 var(--lq-space-3); }
.run-lifeline .run-stagefig { margin-left: 16px; }
.run-advline { margin-top: var(--lq-space-5); font-size: var(--lq-text-small);
  color: var(--lq-ink-secondary); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.run-advline__btn { background: none; border: none; padding: 0; font: inherit;
  color: var(--lq-accent); font-weight: 600; cursor: pointer; }
.run-advline__btn:hover { text-decoration: underline; }
.run-advline__note { color: var(--lq-ink-muted); }
.page-head.pg-compact h1 .badge { font-size: var(--lq-text-caption); font-weight: 600; }

/* ── EMPLOYEES — approved query chip row (2026-08-17) ─────────────────────────────
   Search and each filter read as one row of chips carrying their current value, so the
   applied query is legible without opening a menu. A chip that is set takes the accent
   tint; an unset chip stays quiet. */
.emp-chiprow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: var(--lq-space-3) 0 var(--lq-space-4); }
.emp-chip { display: inline-flex; align-items: center; gap: 7px; font: inherit;
  font-size: var(--lq-text-small); color: var(--lq-ink-secondary); background: var(--lq-surface-card);
  border: 1px solid var(--lq-border); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.emp-chip:hover { border-color: var(--lq-border-strong); color: var(--lq-ink-primary); }
.emp-chip.is-set { background: var(--lq-accent-tint); border-color: var(--lq-accent-tint);
  color: var(--lq-accent); font-weight: 600; }
.emp-chip__caret { font-size: 10px; opacity: .7; }
.emp-chip svg { width: 14px; height: 14px; opacity: .65; }
.emp-chip--search { padding: 6px 14px; cursor: text; min-width: 250px; }
.emp-chip--search input { border: none; outline: none; background: none; font: inherit;
  font-size: var(--lq-text-small); color: inherit; flex: 1; min-width: 0; }
.emp-chip--clear { color: var(--lq-accent); border-style: dashed; }
.emp-chiprow .menu-anchor { position: relative; }

/* ── "Download report" and other inline text actions (bug fix 2026-08-17) ─────────
   ROOT CAUSE, same family as the lifecycle strip: `.view-link` was styled only as
   `.lq-dash .exceptions-head .view-link`. On Employees it fell back to the browser's
   default button chrome — a grey bordered box instead of the approved blue text action. */
.view-link { font: inherit; font-size: var(--lq-text-small); font-weight: 600;
  color: var(--lq-accent); background: none; border: none; padding: 2px 4px;
  cursor: pointer; border-radius: 6px; }
.view-link:hover { text-decoration: underline; }
.view-link:focus-visible { outline: 3px solid var(--lq-accent-tint); outline-offset: 1px; }
/* The table's accessible caption is for screen readers; it must not paint a stray text row
   above the header. */
.emp-caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── KNOWLEDGE BASE — approved search bar (2026-08-17) ────────────────────────────
   Search leads the page: a full-width field naming real examples, above the featured
   guide and the topic chips. */
.kb-search { display: flex; align-items: center; gap: 10px; border: 1px solid var(--lq-border-strong);
  border-radius: 11px; padding: 11px 15px; background: var(--lq-surface-card);
  margin-bottom: var(--lq-space-4); }
.kb-search__ic { display: inline-grid; place-items: center; }
.kb-search svg { width: 16px; height: 16px; color: var(--lq-ink-muted); flex: 0 0 16px; }
.kb-search input { border: none; outline: none; background: none; font: inherit;
  font-size: var(--lq-text-small); color: var(--lq-ink-primary); flex: 1; min-width: 0; }
.kb-search input::placeholder { color: var(--lq-ink-muted); }
.kb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: var(--lq-space-4) 0; }
/* The queue's closing rule sits outside the frame, quiet but readable. */

/* Severity band — a slight wash per severity (approved review 2026-08-17). The tint is the
   quietest possible signal: the number and its caption still carry the meaning, so the card
   remains readable for anyone who cannot separate the hues. */
.aq-band__c.is-block { background: linear-gradient(180deg, rgba(239,107,107,.07), rgba(255,255,255,0) 72%), var(--lq-surface-card); }
.aq-band__c.is-warn  { background: linear-gradient(180deg, rgba(240,161,46,.08), rgba(255,255,255,0) 72%), var(--lq-surface-card); }
.aq-band__c.is-info  { background: linear-gradient(180deg, rgba(30,54,201,.055), rgba(255,255,255,0) 72%), var(--lq-surface-card);
  border-color: #dfe4f6; }
.aq-band__c.is-ack   { background: linear-gradient(180deg, rgba(14,107,71,.06), rgba(255,255,255,0) 72%), var(--lq-surface-card);
  border-color: #d5eadf; }
.aq-band__c.is-block .aq-band__n { color: var(--lq-danger, #c0392b); }
.aq-band__c.is-warn .aq-band__n  { color: var(--lq-warning-text); }
.aq-band__c.is-ack .aq-band__n   { color: var(--lq-success-deep); }

/* ── PAGE GUIDE MARK (approved review 2026-08-17) ─────────────────────────────────
   The "How this works" pill is gone. The guide is now a quiet circled question mark
   beside the page title: same destination, same accessible name, no text competing
   with the page's own actions. It stays muted until hovered or focused. */
.page-head h1 .pg-how,
h1 .pg-how { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0;
  margin-left: 9px; border: none; background: none; border-radius: 50%;
  color: var(--lq-ink-muted); cursor: pointer; vertical-align: middle; flex: 0 0 20px; }
.page-head h1 .pg-how svg,
h1 .pg-how svg { width: 16px; height: 16px; }
.page-head h1 .pg-how:hover, .page-head h1 .pg-how:focus-visible,
h1 .pg-how:hover, h1 .pg-how:focus-visible { color: var(--lq-accent); background: var(--lq-accent-tint); }
.page-head h1 .pg-how:focus-visible, h1 .pg-how:focus-visible { outline: 3px solid var(--lq-accent-tint); outline-offset: 1px; }

/* The guide mark rides the breadcrumb line, right-aligned — same place on every page. */
.crumb-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.crumb-row .pg-how { display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0;
  border: none; background: none; border-radius: 50%; color: var(--lq-ink-muted); cursor: pointer; flex: 0 0 22px; }
.crumb-row .pg-how svg { width: 16px; height: 16px; }
.crumb-row .pg-how:hover, .crumb-row .pg-how:focus-visible { color: var(--lq-accent); background: var(--lq-accent-tint); }
.crumb-row .pg-how:focus-visible { outline: 3px solid var(--lq-accent-tint); outline-offset: 1px; }

/* ── COMPLIANCE CENTER — approved canvas (2026-08-17) ─────────────────────────────
   Agency cards are scannable in one pass: who, what table, when it takes effect, and
   one status chip. The explanatory detail lives in the register below them. */
.cmp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.cmp-card { border: 1px solid var(--lq-border); border-radius: 14px; padding: 14px 16px;
  background: var(--lq-surface-card); display: flex; flex-direction: column; gap: 3px; }
.cmp-card__ag { font-size: var(--lq-text-caption); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--lq-ink-muted); }
.cmp-card__t { font-size: var(--lq-text-body); font-weight: var(--lq-weight-semibold); }
.cmp-card__e { font-size: var(--lq-text-small); color: var(--lq-ink-secondary); }
.cmp-card__s { margin-top: 8px; }
.cmp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--lq-border); font-size: var(--lq-text-small); }
.cmp-row:last-of-type { border-bottom: 0; }

/* ── HERO FIGURE CELLS — slight wash per cell (approved review 2026-08-17) ────────
   A blue ramp only. These are amounts, not statuses, so green/amber/red stay out of
   them: colour here is rhythm, not meaning. The tint fades to nothing by 78% so the
   figure keeps maximum contrast against the card, and the hairline dividers survive. */
.hero-figures .fig { background: linear-gradient(180deg, rgba(30,54,201,.045), rgba(255,255,255,0) 78%); }
.hero-figures .fig--1 { background: linear-gradient(180deg, rgba(30,54,201,.085), rgba(255,255,255,0) 78%); }
.hero-figures .fig--2 { background: linear-gradient(180deg, rgba(30,54,201,.070), rgba(255,255,255,0) 78%); }
.hero-figures .fig--3 { background: linear-gradient(180deg, rgba(64,86,214,.058), rgba(255,255,255,0) 78%); }
.hero-figures .fig--4 { background: linear-gradient(180deg, rgba(105,124,226,.055), rgba(255,255,255,0) 78%); }
.hero-figures .fig--5 { background: linear-gradient(180deg, rgba(143,160,232,.060), rgba(255,255,255,0) 78%); }
html[data-theme="dark"] .hero-figures .fig,
html[data-theme="dark"] .hero-figures .fig--1,
html[data-theme="dark"] .hero-figures .fig--2,
html[data-theme="dark"] .hero-figures .fig--3,
html[data-theme="dark"] .hero-figures .fig--4,
html[data-theme="dark"] .hero-figures .fig--5 {
  background: linear-gradient(180deg, rgba(120,145,255,.10), rgba(0,0,0,0) 78%); }

/* ── PAYROLL INTELLIGENCE — approved analytical template (2026-08-17) ─────────────
   The finding leads in plain language, then the KPI band, then the visuals. */
.pi-short { border: 1px solid var(--lq-border); border-radius: 14px; padding: 18px 20px;
  background: linear-gradient(180deg, rgba(30,54,201,.045), rgba(255,255,255,0) 72%), var(--lq-surface-card);
  margin: var(--lq-space-4) 0; }
.pi-short__k { font-size: var(--lq-text-caption); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--lq-accent); }
.pi-short__t { font-size: 17px; font-weight: var(--lq-weight-semibold); line-height: 1.45;
  margin: 8px 0 0; color: var(--lq-ink-primary); }
.pi-lead { display: flex; align-items: center; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--lq-border); }
.pi-lead:last-of-type { border-bottom: 0; }
.pi-lead__n { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: var(--lq-surface-subtle); color: var(--lq-ink-secondary); font-size: 12px;
  font-weight: 700; flex: 0 0 26px; }
.pi-lead__b { flex: 1; min-width: 0; }
.pi-lead__t { font-size: var(--lq-text-small); font-weight: var(--lq-weight-semibold); }
.pi-lead__track { display: block; height: 6px; border-radius: 999px; background: var(--lq-surface-subtle);
  margin-top: 6px; overflow: hidden; }
.pi-lead__fill { display: block; height: 100%; border-radius: 999px; background: #1e36c9; }
.pi-lead__v { font-size: var(--lq-text-small); font-weight: var(--lq-weight-semibold);
  font-variant-numeric: tabular-nums; flex: 0 0 auto; }

/* Insight cards, trend and obligations — approved full page (2026-08-17). */
/* Insight cards keep their own width whether there are one, two or three of them — a lone card
   stretched across the page reads as a banner, not an insight. */
.pi-ins-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 360px)); gap: 14px;
  margin: var(--lq-space-4) 0; justify-content: start; }
.pi-ins { border: 1px solid var(--lq-border); border-radius: 14px; padding: 16px 18px;
  background: var(--lq-surface-card); display: flex; flex-direction: column; gap: 10px; }
.pi-ins__k { font-size: var(--lq-text-caption); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--lq-accent); }
.pi-ins__f { font-size: var(--lq-text-body); font-weight: var(--lq-weight-semibold); line-height: 1.45; margin: 0; }
.pi-ins__v { min-height: 30px; }
.pi-ins__r { font-size: var(--lq-text-small); color: var(--lq-ink-secondary); margin: 0; line-height: 1.5; }
.pi-ins__r b { color: var(--lq-success-deep); }
.pi-conc { display: flex; gap: 4px; height: 18px; max-width: 260px; }
.pi-conc__b { display: block; border-radius: 6px; }
.pi-tog { display: inline-flex; gap: 4px; background: var(--lq-surface-subtle); border-radius: 999px; padding: 3px; }
.pi-tog__b { font: inherit; font-size: var(--lq-text-caption); font-weight: 600; border: none;
  background: none; color: var(--lq-ink-muted); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.pi-tog__b.is-on { background: var(--lq-surface-card); color: var(--lq-accent); box-shadow: 0 1px 2px rgba(16,24,64,.08); }
.pi-trend__v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-top: 2px; }
.pi-trend__d { font-size: var(--lq-text-small); color: var(--lq-success-deep); margin-top: 2px; }
.pi-trend__x { display: flex; justify-content: space-between; font-size: var(--lq-text-caption);
  color: var(--lq-ink-muted); margin-top: 6px; }
.pi-obl { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--lq-border); }
.pi-obl:last-of-type { border-bottom: 0; }
.pi-obl__dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 4px; flex: 0 0 11px; background: #1e36c9; }
.pi-obl__dot.is-b { background: #5069dd; } .pi-obl__dot.is-c { background: #c3ccf4; }
.pi-obl__t { font-size: var(--lq-text-small); font-weight: var(--lq-weight-semibold); }
.pi-obl__s { font-size: var(--lq-text-caption); color: var(--lq-ink-muted); margin-top: 2px; }

/* Knowledge Base — guides tied to the run's current state (approved 2026-08-17). */
.kb-rel { padding: 4px 16px; }
.kb-rel__row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--lq-border); font-size: var(--lq-text-small); }
.kb-rel__row:last-child { border-bottom: 0; }

/* Knowledge Base featured card — approved actions row (2026-08-17). */
.kb-hero__acts { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
/* Compound selector on purpose: lq-fixes.css also styles .kb-hero__cta (blue text, no fill) and
   loads AFTER this file, so a single-class rule here would lose and the label would render blue
   on blue — which is exactly what shipped in build 500. */
.kb-hero .kb-hero__acts .kb-hero__cta { display: inline-flex; align-items: center; gap: 0;
  background: var(--lq-accent); color: #fff; font-size: var(--lq-text-small); font-weight: 600;
  border-radius: 999px; padding: 8px 16px; }
.kb-hero .kb-hero__acts .kb-hero__mins { display: inline-flex; align-items: center; border: 1px solid var(--lq-border);
  border-radius: 999px; padding: 7px 14px; font-size: var(--lq-text-small); color: var(--lq-ink-secondary);
  background: var(--lq-surface-card); }

/* Featured-guide art tile — the Ant on a soft lavender ground (approved 2026-08-17). */
.kb-hero .kb-hero__tile { display: grid; place-items: center; width: 108px; height: 108px;
  border-radius: 26px; background: #e8e6f7; flex: 0 0 108px; }
.kb-hero .kb-hero__tile svg { width: 74px; height: 74px; }

/* ══ APPROVED PAGE 6 — table row anatomy ═══════════════════════════════════════════════
   A row whose STATUS makes its figure no longer current reads in muted ink, so the eye
   skips it when scanning a money column. The row itself stays fully legible — this is not
   a disabled state and it hides nothing. Applied only where the product has a real status
   that means it (a separated employee's monthly basic), never invented for a run state. */
.row-stale .egrid__rate--stale,
.egrid__rate--stale { color: var(--lq-ink-muted); font-weight: var(--lq-weight-medium); }

/* Two-line cell used across framed tables: the strong line, then the payroll identity
   beneath it (employee number, pay schedule). 48px per the approved density rule. */
.cell-2l { display: block; line-height: 1.25; }
.cell-2l__meta { display: block; font-size: var(--lq-text-caption); color: var(--lq-ink-muted);
  font-variant-numeric: var(--lq-num); margin-top: 1px; }

/* ══ APPROVED PAGE 14 — Reports & GL ═══════════════════════════════════════════════════
   Four report cards, then the journal, then export and cost-centre allocation side by side.
   The cards are quiet containers: a title, what it contains, one text action. They are not
   KPI tiles and carry no figure, because the figures live in the journal below them. */
.gl-assure { margin: 0 0 var(--space-5); }
.gl-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4); margin: 0 0 var(--space-6); }
.gl-card { background: var(--lq-surface-card); border: 1px solid var(--lq-border);
  border-radius: 12px; padding: var(--space-4); display: flex; flex-direction: column; gap: 4px; }
.gl-card.is-current { border-color: var(--lq-accent); box-shadow: 0 0 0 1px var(--lq-accent) inset; }
.gl-card__t { font-size: var(--lq-text-body); font-weight: var(--lq-weight-semibold); color: var(--lq-ink-primary); }
.gl-card__s { font-size: var(--lq-text-small); color: var(--lq-ink-muted); flex: 1; }
.gl-card .view-link { align-self: flex-start; margin-top: 6px; }

/* A compact select for header action rows — same control, sized to sit beside a btn, not
   above a field label. Added because the approved header puts the period selector inline
   with Export CSV rather than in a form field. */
.select--sm { height: 34px; padding-top: 0; padding-bottom: 0; font-size: var(--lq-text-small);
  max-width: 220px; }

/* The journal. Account codes are tabular so the column reads as a list of numbers, and the
   total row is separated by a rule rather than by a fill — it is a sum, not a status. */
.gl-journal .gl-acct { font-variant-numeric: var(--lq-num); }
.gl-journal tbody tr.gl-total td { border-top: 2px solid var(--lq-border-strong);
  font-weight: var(--lq-weight-semibold); background: var(--lq-surface-card); }

/* Export and cost-centre allocation share a row on desktop and stack on narrow screens. */
/* THE FOOT BAND IS TWO PEER CARDS, SO IT MUST READ AS A BAND (2026-08-18, seen in a rendered
   screenshot). This was `align-items: start`, so Export (three controls and a note) sat about 90px
   shorter than Cost centre allocation and the row ended on a ragged edge. Matching the heights
   alone would only move the problem — Export would gain a void under its note, which is exactly
   the fault just fixed on Government Filing's two-up row. So the cards stretch AND their bodies
   become columns whose note is pushed to the bottom: equal height, and the two notes land on the
   same baseline instead of floating at different ones. */
.gl-foot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.gl-foot > div { display: flex; min-width: 0; }
.gl-foot > div > .lq-card { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.gl-foot > div > .lq-card > .lq-card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.gl-foot .gl-cc__note { margin-top: auto; padding-top: var(--space-3); }
.gl-cc { display: flex; flex-direction: column; }
.gl-cc__r { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4);
  padding: 9px 0; border-bottom: 1px solid var(--lq-border); }
.gl-cc__r:last-child { border-bottom: none; }
.gl-cc__r--total { border-top: 2px solid var(--lq-border-strong); border-bottom: none; margin-top: 2px; }
.gl-cc__k { font-size: var(--lq-text-body); color: var(--lq-ink-secondary); }
.gl-cc__r--total .gl-cc__k { color: var(--lq-ink-primary); font-weight: var(--lq-weight-semibold); }
.gl-cc__v { font-size: var(--lq-text-body); font-weight: var(--lq-weight-semibold);
  color: var(--lq-ink-primary); font-variant-numeric: var(--lq-num); white-space: nowrap; }
.gl-cc__note { font-size: var(--lq-text-caption); color: var(--lq-ink-muted); margin-top: var(--space-3); }

/* The three reports with no card (overtime cost, parallel comparison, retro check) stay
   reachable without competing with the four principal ones. */
.gl-more { margin-top: var(--space-6); }
.gl-more > summary { cursor: pointer; font-size: var(--lq-text-small); color: var(--lq-ink-secondary); }

@media (max-width: 1100px) { .gl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px)  { .gl-cards, .gl-foot { grid-template-columns: 1fr; } }
.gl-fmt { display: inline-flex; }
.gl-fmt .select--sm { max-width: 190px; }

/* The control totals on Run Payroll use the same band as the Dashboard; only the spacing
   differs, because here it sits between the lifecycle and the register. */
.run-figures { margin: var(--space-5) 0 var(--space-6); }

/* ══ APPROVED TEMPLATE 3 · CONFIGURATION ════════════════════════════════════════════════
   Settings read as sentences, statutory floors sit at the point of change, and the impact
   of a save is stated before the button that performs it. */

/* Breadcrumb only at depth greater than one. */
.set-crumb { display: flex; align-items: center; gap: 8px; font-size: var(--lq-text-small);
  color: var(--lq-ink-muted); margin: 0 0 var(--space-3); flex-wrap: wrap; }
.set-crumb button { all: unset; cursor: pointer; color: var(--lq-accent); font: inherit; }
.set-crumb button:hover { text-decoration: underline; }
.set-crumb b { color: var(--lq-ink-primary); font-weight: var(--lq-weight-semibold); }

/* The policy as a sentence — the first thing read, so it gets reading size, not label size. */
.set-lede { font-size: var(--lq-text-body); line-height: 1.55; color: var(--lq-ink-primary);
  margin: 0 0 var(--space-3); max-width: 68ch; }
.set-lede b { font-weight: var(--lq-weight-semibold); }
/* The inline editable value inside a policy sentence (approved Template 3): the figure the
   sentence is about, underlined in the interaction colour so it reads as the thing you change. */
.set-val { font-weight: var(--lq-weight-semibold); border-bottom: 2px solid var(--lq-accent); }
/* A value the tenant has never chosen. "Nobody has decided" and "we decided the default" are
   different facts, and a configuration page must not present the second when it means the first. */
.set-unset { font-style: normal; color: var(--lq-ink-muted); border-bottom: 2px dotted var(--lq-border-strong); }

/* The statutory floor, beside the value it constrains. Green when met, amber when not — this
   is a state, so it is one of the few places an icon keeps its colour. */
.set-floor { display: flex; align-items: flex-start; gap: 8px; font-size: var(--lq-text-small);
  padding: 9px 12px; border-radius: 9px; margin: 0 0 var(--space-3); max-width: 72ch; }
.set-floor__ic { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.set-floor.is-met { background: var(--lq-success-tint); color: var(--lq-success-text); }
.set-floor.is-below { background: var(--lq-warning-tint); color: var(--lq-warning-text); }

/* What changes if you save. Sits directly above the actions, never in a dialog after them. */
.set-impact { margin: var(--space-5) 0 0; padding: 13px 16px; border-radius: 10px;
  background: var(--lq-surface-app); border: 1px solid var(--lq-border); }
.set-impact__h { font-size: var(--lq-text-caption); font-weight: var(--lq-weight-semibold);
  letter-spacing: .06em; text-transform: uppercase; color: var(--lq-ink-muted); margin-bottom: 4px; }
.set-impact__b { font-size: var(--lq-text-small); color: var(--lq-ink-secondary); }
.set-impact__b b { color: var(--lq-ink-primary); font-weight: var(--lq-weight-semibold); }

/* Discard first, save second — the destructive-to-safe reading order. */
.set-actions { display: flex; justify-content: flex-end; gap: var(--space-2);
  margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--lq-border); }

/* ══ APPROVED · NEEDS YOUR ATTENTION ═════════════════════════════════════════════════════
   A warning mark, a title and an item count; then one row per item carrying a severity dot,
   the finding, what it means for the run, its status badge and the action that resolves it.
   The badge is the part that was missing: the row data always carried it, the renderer just
   never drew it. */
.lq-attn { margin-top: 24px; background: var(--lq-surface-card); border: 1px solid var(--lq-border);
  border-radius: 14px; padding: 0; overflow: hidden; }
.lq-attn__head { display: flex; align-items: center; gap: 10px; padding: 15px 18px;
  border-bottom: 1px solid var(--lq-border); }
/* The head mark inherits like all chrome. Severity lives on the row dots and the badges, which
   is where a reader looks for it — colouring the header as well would say the same thing twice
   and would break the one rule the icon system has. */
.lq-attn__ic { width: 19px; height: 19px; flex: none; color: inherit; }
.lq-attn__h { font-size: var(--lq-text-h3); font-weight: var(--lq-weight-semibold); color: var(--lq-ink-primary); }
.lq-attn__n { font-size: var(--lq-text-small); font-weight: var(--lq-weight-medium);
  color: var(--lq-ink-secondary); background: var(--lq-surface-subtle);
  border-radius: var(--lq-radius-pill); padding: 3px 11px; }

.lq-attn__row { display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid var(--lq-border); }
.lq-attn__row:last-child { border-bottom: none; }
.lq-attn__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.lq-attn__dot.blocker { background: var(--lq-danger); }
.lq-attn__dot.warning { background: var(--lq-warning); }
.lq-attn__dot.info    { background: var(--lq-border-strong); }
.lq-attn__txt { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.lq-attn__t { font-size: var(--lq-text-body); font-weight: var(--lq-weight-semibold); color: var(--lq-ink-primary); }
.lq-attn__d { font-size: var(--lq-text-small); color: var(--lq-ink-muted); }

/* The status badge. Colour here is carrying a state, which is the one exception to the
   icons-and-chrome-inherit rule. */
.lq-attn__chip { flex: none; font-size: var(--lq-text-small); font-weight: var(--lq-weight-medium);
  border-radius: var(--lq-radius-pill); padding: 4px 12px; white-space: nowrap; }
.lq-attn__chip.is-block { background: var(--lq-danger-tint); color: var(--lq-danger-text); }
.lq-attn__chip.is-warn  { background: var(--lq-warning-tint); color: var(--lq-warning-text); }
.lq-attn__chip.is-info  { background: var(--lq-surface-subtle); color: var(--lq-ink-secondary); }

.lq-attn__act { flex: none; all: unset; cursor: pointer; font-size: var(--lq-text-small);
  font-weight: var(--lq-weight-medium); color: var(--lq-ink-primary); background: var(--lq-surface-card);
  border: 1px solid var(--lq-border-strong); border-radius: var(--lq-radius-pill); padding: 7px 16px; }
.lq-attn__act:hover { background: var(--lq-surface-subtle); border-color: var(--lq-accent); }
.lq-attn__act:focus-visible { outline: 2px solid var(--lq-accent); outline-offset: 2px; }

/* The empty state — the Ant on a completion scene, which is where the character belongs. */
.lq-attn__empty { padding: 26px 18px 30px; text-align: center; }
.lq-attn__empty svg { width: 168px; height: 126px; margin: 0 auto; display: block; }
.lq-attn__emptyt { margin-top: 10px; font-size: var(--lq-text-body);
  font-weight: var(--lq-weight-semibold); color: var(--lq-ink-primary); }

@media (max-width: 720px) {
  .lq-attn__row { flex-wrap: wrap; }
  .lq-attn__txt { flex: 1 1 100%; order: 1; }
  .lq-attn__dot { order: 0; }
  .lq-attn__chip, .lq-attn__act { order: 2; }
}

/* APPROVED PAGE 2 / 17 — the Classification column. Stored employee_classification, shown as
   written; it drives pay-type eligibility server-side, so it is a payroll fact, not a tag. */
.egrid__table td.c-class, .egrid__table th.c-class { white-space: nowrap; }

/* APPROVED PAGE 13 — Government Filing figure band. Four cells, the nearest deadline first and
   the only one that takes a tone, because it is the only one with a consequence for being late. */
.filing-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4);
  margin: 0 0 var(--space-6); }
.fk-cell { background: var(--lq-surface-card); border: 1px solid var(--lq-border); border-radius: 12px;
  padding: 14px 16px; }
.fk-cell.is-soon { border-color: var(--lq-warning-border); background: var(--lq-warning-tint); }
.fk-cell.is-late { border-color: var(--lq-danger-border); background: var(--lq-danger-tint); }
.fk-l { font-size: var(--lq-text-caption); font-weight: var(--lq-weight-semibold); letter-spacing: .06em;
  text-transform: uppercase; color: var(--lq-ink-muted); }
.fk-v { font-size: var(--lq-text-h2); font-weight: var(--lq-weight-semibold); color: var(--lq-ink-primary);
  margin-top: 3px; font-variant-numeric: var(--lq-num); }
.fk-s { font-size: var(--lq-text-small); color: var(--lq-ink-muted); margin-top: 2px; }
.fk-cell.is-soon .fk-s { color: var(--lq-warning-text); font-weight: var(--lq-weight-medium); }
.fk-cell.is-late .fk-s { color: var(--lq-danger-text); font-weight: var(--lq-weight-semibold); }
@media (max-width: 1000px) { .filing-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .filing-kpi { grid-template-columns: 1fr; } }

/* APPROVED · Payroll Assurance banner, dashboard foot. The warm wash is the approved
   lavender-to-sand bridge — the one place warm tone is permitted — and the Ant sits at the
   right on its compliance scene. */
.lq-asr-band { margin-top: var(--space-6); display: grid; grid-template-columns: 1fr auto;
  gap: var(--space-5); align-items: center; padding: 24px 26px; border-radius: 16px;
  border: 1px solid var(--lq-border);
  background: linear-gradient(105deg, rgba(201,196,242,.22) 0%, rgba(251,217,194,.20) 100%), var(--lq-surface-card); }
.lq-asr-band__body { min-width: 0; }
.lq-asr-band__kicker { display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--lq-text-caption); font-weight: var(--lq-weight-semibold); letter-spacing: .08em;
  text-transform: uppercase; color: var(--lq-accent); }
.lq-asr-band__ic { width: 15px; height: 15px; }
.lq-asr-band__t { font-size: var(--lq-text-h1); letter-spacing: -.02em; margin: 8px 0 6px;
  color: var(--lq-ink-primary); }
.lq-asr-band__d { font-size: var(--lq-text-body); color: var(--lq-ink-secondary); margin: 0;
  max-width: 66ch; line-height: 1.55; }
.lq-asr-band__acts { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: 16px; }
.lq-asr-band__art { flex: none; }
.lq-asr-band__art svg { width: 168px; height: 126px; display: block; }
@media (max-width: 860px) {
  .lq-asr-band { grid-template-columns: 1fr; }
  .lq-asr-band__art { order: -1; }
  .lq-asr-band__art svg { width: 132px; height: 99px; margin-inline: auto; }
}

/* ── THEME CONTROL (2026-08-17) ─────────────────────────────────────────────────────────
   One circular icon button, sized and coloured exactly like the other header icons so it
   reads as part of the set rather than a control with its own identity. It shows the theme
   you would switch TO; the label names that destination. No colour of its own — like every
   other icon in the product, it inherits. */
/* Matched to .lq-bell exactly — same 36px circle, border, surface and ink — so it reads as one
   of the header icons rather than a control with its own identity. */
.lq-theme-btn { position: relative; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--lq-border); background: var(--lq-surface-card);
  color: var(--lq-ink-secondary); display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; padding: 0; }
.lq-theme-btn svg { width: 19px; height: 19px; fill: currentColor; }
.lq-theme-btn:hover { background: var(--lq-surface-subtle); color: var(--lq-ink-primary); }
.lq-theme-btn:focus-visible { outline: 2px solid var(--lq-accent); outline-offset: 2px; }

/* ══ SELECTED NAVIGATION — quiet state (approved 2026-08-17) ═══════════════════════════════
   The bright vertical accent bar is gone from every nav surface. A blue strip beside a blue
   tint beside a blue icon said the same thing three times, and it fought the page content for
   attention every time you looked at the sidebar.

   What marks the selection now: a soft neutral surface, darker ink, semibold weight. The row's
   rounded shape, spacing and structure are unchanged. Loaded after lq-shell and lq-fixes, so
   these settle the ties. */
.lq-nav-item.is-active,
html[data-shell] .lq-nav-item.is-active {
  background: var(--lq-surface-subtle);
  color: var(--lq-ink-primary);
  font-weight: var(--lq-weight-semibold);
  border-left: 0;
  box-shadow: none;
}
/* Belt and braces: kill any strip a future sheet re-adds on either pseudo-element. */
.lq-nav-item.is-active::before,
.lq-nav-item.is-active::after { content: none !important; }

/* Icon and label take the same darker ink — no colour of their own, consistent with the icon
   system, which is why nothing here names a hue. */
.lq-nav-item.is-active .nav-icon,
.lq-nav-item.is-active .nav-text { color: var(--lq-ink-primary); }

/* Far-left rail: the same treatment, so both navigation surfaces read alike. */
html[data-shell] .lq-rail-item.is-on .lq-rail-chip,
.lq-rail-item.is-on .lq-rail-chip { background: var(--lq-surface-subtle); box-shadow: none; }
html[data-shell] .lq-rail-item.is-on,
.lq-rail-item.is-on { color: var(--lq-ink-primary); font-weight: var(--lq-weight-semibold); }
.lq-rail-item.is-on::before, .lq-rail-item.is-on::after { content: none !important; }

/* A person's name, resolved from the workspace directory (see lqWho). Falls back to the email
   address, which must not break across lines mid-token the way a long address otherwise would. */
.lq-who { white-space: nowrap; }

/* Get started — Tier 2 (compliance & finance setup, 2026-08-28). The second plan panel sits
   under the first with its own progress; the note explains it does not gate the first run. */
.gs2-tier2{margin-top:18px}
.gs2-tier2 .gs2-plan-label{color:var(--ink,#1B2340)}
.gs2-tier2-note{margin:2px 2px 10px;font-size:12.5px;color:var(--mut,#6b7280)}