/* ============================================================================
   lq-fixes.css  —  corrective UX / responsiveness / alignment layer
   ----------------------------------------------------------------------------
   Loads LAST. Additive, targeted overrides for concrete issues found in the
   page-by-page audit. Kept isolated so the fixes are easy to see and revert;
   the deeper token/component unification is staged separately.
   ========================================================================== */

/* ---- Money / numeric columns line up with tabular figures ----------------
   Any table cell marked .num/.money/.amount right-aligns with even digit
   widths, so peso columns line up regardless of which screen rendered them. */
.page table td.num, .page table th.num,
.page .gtable td.num, .page table td.money,
.page table td.amount, .page .money, .page .num {
  font-variant-numeric: tabular-nums;
}
.page table td.num, .page table th.num,
.page .gtable td.num, .page table td.money, .page table td.amount {
  text-align: right;
}

/* ---- Grids that must collapse on phones (were fixed multi-column) --------- */
@media (max-width: 640px) {
  .ptc-grid { grid-template-columns: 1fr !important; }   /* pay-type flags: was 3-up */
  .cf-grid  { grid-template-columns: 1fr !important; }   /* post reconciliation: was 2-up */
}

/* ---- Wide data tables scroll INSIDE their card on small screens ----------
   Prevents a 620–960px min-width table from stretching the whole page. Scoped
   with :has() so ONLY cards that actually contain a table gain the scroll,
   leaving every other card untouched. */
@media (max-width: 720px) {
  .lq-card:has(table), .card:has(table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- Get Started (Deel-style) — dark-mode aware -------------------------
   The card/text/border use theme tokens and adapt on their own; these override
   only the pieces that carry hardcoded-light hex (icon gradients + tag pills). */
[data-theme="dark"] .gs2-tag { background: rgba(255,255,255,.08); color: #aab3c2; }
[data-theme="dark"] .gs2-tag--now { background: rgba(30,54,201,.34); color: #c7d2ff; }
[data-theme="dark"] .gs2-tag--done { background: rgba(18,128,92,.22); color: #6ee7b7; }
[data-theme="dark"] .gs2-ic { background: rgba(30,54,201,.20); color: inherit; }
[data-theme="dark"] .gs2-card--done .gs2-ic { background: rgba(18,128,92,.20); color: inherit; }
[data-theme="dark"] .gs2-ring__bg { stroke: rgba(255,255,255,.10); }
[data-theme="dark"] .gs2-st--soon { border-color: rgba(255,255,255,.22); color: #9aa4b2; }
/* Dark: the banner heading/message used hardcoded light-theme ink (near-black on a dark
   banner = invisible). Lift them to adaptive ink, and mute the bright powder illustration
   blob to a faint cobalt glow so it no longer glares against the dark surface. */
[data-theme="dark"] .gs2-h { color: var(--lq-ink-primary); }
[data-theme="dark"] .gs2-p { color: var(--lq-ink-secondary); }
[data-theme="dark"] .gs2-blob { fill: rgba(124,144,255,.12); }
[data-theme="dark"] .gs2-banner__art { background: rgba(124,144,255,.05); border-radius: 16px; }
/* Empty-state illustrations: the backdrop blob (the only <ellipse> in the art) is a bright
   powder fill; mute it to a faint cobalt glow on dark so it reads as intentional, not a glare. */
[data-theme="dark"] .lq-brand-art ellipse { fill: rgba(124,144,255,.12); }
/* The "paper" fills of the document / ID card / shield / bell / compass illustrations are near-white
   (#FBFCFF / #EEF2FC), which glare in dark mode. Re-fill only those tagged elements to a dark card
   surface so the cobalt outlines + colored accents still read, and the objects sit calmly on dark.
   A CSS `fill` overrides the inline presentation attribute, so no markup duplication is needed. */
[data-theme="dark"] .lq-brand-art .lq-art-paper { fill: #1b2233; }

/* ---- Run Payroll: differentiate the two step trackers --------------------
   "Run progress" (stepper with dots + connecting tracks) stays the single
   progress indicator. The "Payroll lifecycle" pills become a segmented PREVIEW
   selector (pick a stage to preview) so they no longer read as a competing
   second stepper — the numbered circles are dropped and the row reads as tabs. */
.run-pills { gap: 3px; background: var(--lq-surface-2, #eef1f7); padding: 4px; border-radius: 12px; display: inline-flex; flex-wrap: wrap; margin-bottom: var(--lq-space-4, 14px); }
.run-pills .step-btn { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 7px 13px !important; border-radius: 8px; color: var(--lq-ink-2, #5b6472); font-weight: 600; font-size: .86rem; }
.run-pills .step-btn .num { display: none !important; }
.run-pills .step-btn.is-done { color: var(--lq-success, #12805c) !important; background: transparent !important; }
.run-pills .step-btn.is-current { color: var(--lq-accent, #1E36C9) !important; background: transparent !important; }
.run-pills .step-btn[aria-selected="true"] { background: var(--lq-surface, #fff) !important; color: var(--lq-ink, #16181f) !important; box-shadow: 0 1px 3px rgba(22,24,31,.10) !important; }
.run-pills .step-btn:hover { background: rgba(255,255,255,.55) !important; }
[data-theme="dark"] .run-pills { background: rgba(255,255,255,.06); }
[data-theme="dark"] .run-pills .step-btn[aria-selected="true"] { background: rgba(255,255,255,.12) !important; color: #e8ecf3 !important; }

/* ============================================================================
   Overall Deel-inspired harmonization — one shared design vocabulary
   Loads last, additive. Unifies the pieces the audit found defined multiple
   times (card radius/elevation, control radii, page-title weight) so every
   screen reads as one system. The payslip "paper" keeps its own look.
   ========================================================================== */
.page .card:not(.slip), .page .lq-card {
  border-radius: 16px;
  box-shadow: var(--lq-shadow-sm, 0 1px 2px rgba(22,24,31,.05), 0 10px 24px -16px rgba(22,24,31,.14));
}
.btn, .lq-btn, button.btn { border-radius: 10px; }
.input, .select, .inp, .finput, textarea.input { border-radius: 10px; }
/* Consistent page-title weight + optical tracking across every screen. */
.page-head h1, .phead h1, .lq-dash .page-head h1, .s2head h2 { font-weight: 700; letter-spacing: -.012em; }
/* Consistent muted-label casing/spacing for the small section labels. */
.gs2-plan-label, .card__eyebrow, .eyebrow { letter-spacing: .06em; }

/* ============================================================================
   Companies console — clean card list (replaces the wide 8-col table).
   ========================================================================== */
.co-list { display: flex; flex-direction: column; gap: 12px; }
.co-card { background: var(--lq-surface-card, #fff); border: 1px solid var(--lq-border, #e7e9ee); border-radius: 16px;
  box-shadow: var(--lq-shadow-sm, 0 1px 2px rgba(22,24,31,.05), 0 10px 24px -16px rgba(22,24,31,.14));
  padding: 15px 18px; display: grid; grid-template-columns: minmax(220px, 1.05fr) minmax(0, 2fr) auto; align-items: center; gap: 18px;
  transition: box-shadow .18s ease, border-color .18s ease; }
.co-card:hover { box-shadow: var(--lq-shadow-md, 0 6px 16px -8px rgba(22,24,31,.2)); }
.co-card__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.co-avatar { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-weight: 800; font-size: 14px; letter-spacing: -.02em; }
.co-name { font-weight: 700; font-size: 14.5px; color: var(--lq-ink-primary, #16181f); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-sub { font-size: 12px; color: var(--lq-ink-muted, #697084); }
.co-card__plan { flex: none; margin-left: auto; }
.co-card__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px 18px; min-width: 0; }
.co-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.co-meta__l { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lq-ink-subtle, #9aa0a6); }
.co-meta__v { font-size: 13px; color: var(--lq-ink-primary, #16181f); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.35; }
.co-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.co-card__acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-content: center; max-width: 290px; }
@media (max-width: 1100px) {
  .co-card { grid-template-columns: 1fr; gap: 14px; }
  .co-card__acts { justify-content: flex-start; max-width: none; }
}

/* Companies KPI tiles — compact cards with a coloured icon chip, one metric each. */
.co-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: 12px; margin-bottom: 18px; }
.co-kpi { display: flex; align-items: center; gap: 13px; background: var(--lq-surface-card); border: 1px solid var(--lq-border); border-radius: 14px; padding: 14px 16px; box-shadow: var(--lq-shadow-sm); }
.co-kpi__ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.co-kpi__ic svg { display: block; }
.co-kpi--accent .co-kpi__ic { background: var(--lq-accent-tint); color: inherit; }
.co-kpi--green .co-kpi__ic { background: var(--lq-success-tint); color: inherit; }
.co-kpi--gold .co-kpi__ic { background: var(--lq-warning-tint); color: inherit; }
[data-theme="dark"] .co-kpi--gold .co-kpi__ic { color: inherit; }
.co-kpi--red .co-kpi__ic { background: var(--lq-danger-tint); color: inherit; }
.co-kpi__b { min-width: 0; }
.co-kpi__label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--lq-ink-muted); }
.co-kpi__val { font-size: 25px; font-weight: 800; color: var(--lq-ink-primary); line-height: 1.08; font-variant-numeric: tabular-nums; margin-top: 1px; }
.co-kpi__sub { font-size: 11px; color: var(--lq-ink-muted); margin-top: 1px; }

/* ============================================================================
   Explainability step-trace (Assurance) — numbered computation timeline on a payslip.
   ========================================================================== */
.trace-panel { margin-top: 14px; border: 1px solid var(--lq-border, #e7e9ee); border-radius: 16px; background: var(--lq-surface-card, #fff); box-shadow: var(--lq-shadow-sm); padding: 16px 18px; }
.trace-panel__hd { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.trace-panel__hd b { font-size: 15px; }
.trace-panel__hd .muted { font-size: 12px; }
.trace-steps { display: flex; flex-direction: column; }
.trace-step { display: flex; gap: 14px; padding: 12px 0; position: relative; }
.trace-step:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 32px; bottom: -2px; width: 2px; background: var(--lq-border, #e7e9ee); }
.trace-node { flex: none; z-index: 1; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--color-primary-tint, rgba(30,54,201,.09)); color: var(--color-primary, #1E36C9); }
.trace-body { flex: 1; min-width: 0; }
.trace-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.trace-title { font-size: 14px; font-weight: 700; color: var(--lq-ink-primary, #16181f); }
.trace-result { margin-left: auto; font-size: 14.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--lq-ink-primary, #16181f); }
.trace-rule { font-size: 11px; font-weight: 600; color: var(--color-primary, #1E36C9); background: var(--color-primary-tint, rgba(30,54,201,.08)); border: 1px solid rgba(30,54,201,.16); border-radius: 999px; padding: 1px 8px; cursor: help; }
.trace-formula { font-size: 12.5px; color: var(--lq-ink-muted, #697084); margin-top: 3px; line-height: 1.5; }
.trace-comps { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; }
.trace-comp { display: inline-flex; gap: 6px; font-size: 12px; color: var(--lq-ink-secondary, #5b6472); }
.trace-comp b { font-variant-numeric: tabular-nums; color: var(--lq-ink-primary, #16181f); }
.trace-inputs { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 5px; font-size: 11.5px; color: var(--lq-ink-subtle, #9aa0a6); }
.trace-inputs b { color: var(--lq-ink-secondary, #5b6472); font-variant-numeric: tabular-nums; }
.trace-verdict { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.trace-verdict svg { width: 16px; height: 16px; flex: none; }
.trace-verdict.ok { background: rgba(18,128,92,.08); color: #0f6b4a; }
.trace-verdict.bad { background: rgba(194,32,32,.08); color: #c22020; }
@media print { .trace-panel { display: none; } }

/* HARD GUARD (QA D-009): state-flag classes on <body> (notif/prof/cmd/sheet) are OPEN-FLAGS only and must
   never restyle the body itself. A class-name collision with a component class once faded the whole page to
   70% and forced display:flex when the bell opened. This guarantees the body stays visible and in normal flow. */
body.notif, body.prof, body.cmd, body.sheet { opacity: 1 !important; }
body.notif { display: block; }

/* SETTINGS SEARCH — filter the sections live. */
.s2search { position: relative; display: flex; align-items: center; margin: 0 0 var(--lq-space-3); }
.s2search svg { position: absolute; left: 11px; width: 15px; height: 15px; color: var(--lq-ink-muted); pointer-events: none; }
.s2search input { width: 100%; padding: 8px 30px 8px 33px; border: 1px solid var(--lq-border); border-radius: 10px; font-size: 13px; background: var(--lq-surface-card); color: var(--lq-ink-primary); }
.s2search input::placeholder { color: var(--lq-ink-muted); }
.s2search input:focus { outline: 2px solid var(--lq-accent); outline-offset: 1px; border-color: var(--lq-accent); }
.s2search__clr { position: absolute; right: 5px; width: 22px; height: 22px; border: none; background: transparent; color: var(--lq-ink-muted); font-size: 18px; line-height: 1; cursor: pointer; border-radius: 6px; }
.s2search__clr:hover { background: var(--lq-surface-subtle); color: var(--lq-ink-primary); }
.subitem__grp { display: block; font-size: 11px; font-weight: 500; color: var(--lq-ink-muted); margin-top: 1px; }

/* KNOWLEDGE BASE — help center: featured hero, topic cards, and a two-column reader. */
.kb-hero { display: flex; align-items: center; gap: 26px; width: 100%; text-align: left; padding: 24px 28px; border-radius: 18px; background: linear-gradient(105deg, #EEF0FF 0%, #F3ECFC 100%); border: 1px solid #E3E3F5; cursor: pointer; margin-bottom: 18px; font: inherit; transition: box-shadow .18s ease; }
.kb-hero:hover { box-shadow: var(--lq-shadow-md); }
.kb-hero__body { flex: 1 1 auto; min-width: 0; }
.kb-hero__kicker { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lq-accent); }
.kb-hero__t { font-size: 22px; font-weight: 700; color: var(--lq-ink-primary); margin: 8px 0 6px; }
.kb-hero__d { font-size: 14px; line-height: 1.55; color: var(--lq-ink-secondary); margin: 0 0 12px; max-width: 560px; }
.kb-hero__cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--lq-accent); }
.kb-hero__cta svg { width: 15px; height: 15px; transform: rotate(180deg); }
.kb-hero__art { flex: none; width: 150px; }
.kb-hero__art .empty__art { width: 140px; height: 108px; margin: 0; }
.kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; margin-top: 16px; }
.kb-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 9px; padding: 18px; background: var(--lq-surface-card); border: 1px solid var(--lq-border); border-radius: 14px; cursor: pointer; font: inherit; transition: box-shadow .18s ease, border-color .18s ease; }
.kb-card:hover { box-shadow: var(--lq-shadow-md); border-color: var(--lq-border-strong); }
.kb-card__ic { width: 38px; height: 38px; border-radius: 10px; background: var(--lq-accent-tint); color: inherit; display: inline-flex; align-items: center; justify-content: center; }
.kb-card__ic svg { width: 19px; height: 19px; }
.kb-card__t { font-size: 14.5px; font-weight: var(--lq-weight-semibold, 600); color: var(--lq-ink-primary); }
.kb-card__d { font-size: 12.5px; line-height: 1.5; color: var(--lq-ink-secondary); }
.kb-card__meta { font-size: 11px; color: var(--lq-ink-muted); margin-top: 2px; }
.kb-card__read { color: var(--lq-accent); font-weight: 600; }
.kb-art__meta .kb-art__read, .kb-art__read { color: var(--lq-accent); font-weight: 600; }
.kb-reader { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 30px; align-items: start; }
.kb-back { margin-bottom: 14px; }
.kb-art { max-width: 720px; }
.kb-art__tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--lq-accent); background: var(--lq-accent-tint); border-radius: 999px; padding: 3px 10px; margin-bottom: 12px; }
.kb-art__t { font-size: 26px; font-weight: 700; letter-spacing: -.01em; color: var(--lq-ink-primary); margin: 0 0 8px; }
.kb-art__meta { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--lq-ink-muted); margin-bottom: 20px; }
.kb-art__meta svg { width: 14px; height: 14px; }
.kb-art__body { font-size: 14.5px; line-height: 1.7; color: var(--lq-ink-secondary); }
.kb-art__body h4 { font-size: 15px; font-weight: var(--lq-weight-semibold, 600); color: var(--lq-ink-primary); margin: 22px 0 8px; }
.kb-art__body p { margin: 0 0 12px; }
.kb-art__body ul { margin: 0 0 12px; padding-left: 20px; }
.kb-art__body li { margin: 0 0 6px; }
.kb-art__body b { color: var(--lq-ink-primary); font-weight: 600; }
.kb-art__foot { display: flex; align-items: flex-start; gap: 9px; margin-top: 26px; padding: 14px 16px; border-radius: 12px; background: var(--lq-accent-tint); font-size: 13px; color: var(--lq-ink-secondary); }
.kb-art__foot svg { width: 16px; height: 16px; color: inherit; flex: none; margin-top: 1px; }
.kb-art__foot a { color: var(--lq-accent); font-weight: 600; cursor: pointer; }
.kb-related { position: sticky; top: 12px; }
.kb-related__h { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lq-ink-muted); margin-bottom: 10px; }
.kb-related__i { display: flex; flex-direction: column; gap: 3px; text-align: left; width: 100%; padding: 12px 14px; background: var(--lq-surface-card); border: 1px solid var(--lq-border); border-radius: 12px; cursor: pointer; font: inherit; margin-bottom: 10px; }
.kb-related__i:hover { border-color: var(--lq-accent); background: var(--lq-accent-tint); }
.kb-related__i b { font-size: 13px; color: var(--lq-ink-primary); }
.kb-related__i span { font-size: 11.5px; color: var(--lq-ink-muted); line-height: 1.4; }
@media (max-width: 820px) { .kb-reader { grid-template-columns: 1fr; } .kb-related { position: static; } .kb-hero__art { display: none; } }

/* FEATURE SHOWCASE (Assurance) — hero + value props. The hero uses a soft take on our signature
   lavender→sand period gradient, so it feels premium and on-brand rather than like a generic promo. */
.asr { margin-bottom: 22px; }
/* APPROVED PAGES 7 AND 10: this banner is near-white with a hairline border. The colour on it
   is the Ant's saffron trail and the shield — nothing else. It was carrying a full-strength
   lavender-to-peach gradient across its whole width, which is decorative tone, and the frozen
   Design Standard is explicit that colour carries interaction, state or data and never mood.
   The one place a warm bridge IS permitted is the Dashboard's .lq-asr-band, and this was a
   second, louder copy of it. Radius and padding are page 10's own (14px / 18px 20px). */
.asr-hero { display: flex; align-items: center; gap: 28px; padding: 18px 20px; border-radius: 14px; background: #fcfdff; border: 1px solid var(--lq-border); overflow: hidden; margin-bottom: 16px; }
.asr-hero__body { flex: 1 1 auto; min-width: 0; }
.asr-hero__kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lq-accent); margin-bottom: 10px; }
.asr-hero__kicker svg { width: 14px; height: 14px; }
.asr-hero__t { font-size: 25px; font-weight: 700; letter-spacing: -.01em; color: var(--lq-ink-primary); margin: 0 0 8px; }
.asr-hero__d { font-size: 14px; line-height: 1.6; color: var(--lq-ink-secondary); margin: 0 0 18px; max-width: 640px; }
.asr-hero__acts { display: flex; gap: 10px; flex-wrap: wrap; }
.asr-hero__art { flex: none; width: 190px; display: flex; justify-content: center; }
.asr-hero__art .empty__art { width: 184px; height: 142px; margin: 0; }
.asr-vps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.asr-vp { background: var(--lq-surface-card); border: 1px solid var(--lq-border); border-radius: 14px; padding: 18px; }
.asr-vp__ic { width: 38px; height: 38px; border-radius: 10px; background: var(--lq-accent-tint); color: inherit; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 11px; }
.asr-vp__ic svg { width: 19px; height: 19px; }
.asr-vp__t { font-size: 15px; font-weight: var(--lq-weight-semibold, 600); color: var(--lq-ink-primary); margin-bottom: 5px; }
.asr-vp__d { font-size: 12.5px; line-height: 1.5; color: var(--lq-ink-secondary); margin: 0; }
@media (max-width: 820px) { .asr-vps { grid-template-columns: 1fr; } .asr-hero__art { display: none; } }

/* COMPANIES CONSOLE — subscription table + toolbar + filter chips + row actions. */
.co-tablecard { padding: 16px; }
.co-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.co-search { position: relative; flex: 1 1 220px; max-width: 300px; margin: 0; }
.co-search__ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--lq-ink-muted); pointer-events: none; display: inline-flex; }
.co-search input { width: 100%; padding: 8px 12px 8px 33px; border: 1px solid var(--lq-border); border-radius: 10px; font-size: 13px; background: var(--lq-surface-card); color: var(--lq-ink-primary); }
.co-search input::placeholder { color: var(--lq-ink-muted); }
.co-search input:focus { outline: 2px solid var(--lq-accent); outline-offset: 1px; border-color: var(--lq-accent); }
.co-fchips { display: flex; gap: 6px; flex-wrap: wrap; }
.co-fchip { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--lq-ink-secondary); background: var(--lq-surface-subtle); border: 1px solid transparent; border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.co-fchip:hover { color: var(--lq-ink-primary); }
.co-fchip.on { background: var(--lq-accent-tint); color: var(--lq-accent); border-color: var(--lq-accent); }
.co-fchip__n { font-size: 11px; font-weight: 600; opacity: .7; font-variant-numeric: tabular-nums; }
.co-toolbar__acts { display: flex; gap: 8px; margin-left: auto; }
.co-table { width: 100%; border-collapse: collapse; }
.co-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--lq-ink-muted); font-weight: 600; text-align: left; padding: 0 14px 10px; white-space: nowrap; }
.co-table td { padding: 12px 14px; border-top: 1px solid var(--lq-border); vertical-align: middle; }
.co-table tbody tr:hover { background: var(--lq-surface-subtle); }
.co-cell-co { display: flex; align-items: center; gap: 11px; min-width: 0; }
.co-avatar--sm { width: 34px; height: 34px; border-radius: 9px; font-size: 12.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
/* Neutral company glyph (replaces the old DC/LP initials) — quiet, tokenized, dark-safe. */
.co-avatar--co { background: var(--lq-accent-tint); color: var(--lq-accent); }
.co-avatar--co svg { display: block; }
/* Section headers that organize the console into clear zones. */
.co-sec { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 4px 0 12px; }
.co-tablecard .co-sec { margin-top: 0; }
.co-sec__t { font-size: 15px; font-weight: 700; color: var(--lq-ink-primary); margin: 0; letter-spacing: -.01em; }
.co-sec__s { font-size: 12.5px; color: var(--lq-ink-muted); margin: 3px 0 0; }
.co-sec__count { font-size: 12px; font-weight: 600; color: var(--lq-ink-secondary); background: var(--lq-surface-subtle); border: 1px solid var(--lq-border); border-radius: 999px; padding: 4px 11px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.co-table .co-name { font-size: 13.5px; font-weight: 600; color: var(--lq-ink-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.co-table .co-sub { font-size: 11.5px; color: var(--lq-ink-muted); font-variant-numeric: tabular-nums; }
.co-cell-act { text-align: right; }
.co-act { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.co-kebab { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--lq-border); background: var(--lq-surface-card); color: var(--lq-ink-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.co-kebab:hover { background: var(--lq-surface-subtle); color: var(--lq-ink-primary); }
@media (max-width: 720px) { .co-toolbar__acts { margin-left: 0; } .co-search { max-width: none; } }

/* "SUGGESTED FOR YOU" — a warm, dismissible helper banner with the Spark. Warmth (our sand accent)
   makes it inviting and distinct from the cobalt operational UI, without shouting. */
.lq-tip { position: relative; display: flex; align-items: center; gap: 22px; margin-top: var(--lq-space-6); padding: 20px 26px; border-radius: 16px; background: linear-gradient(100deg, #FBF2E6 0%, #FEF9F2 62%); border: 1px solid #F1DCB4; }
.lq-tip__body { flex: 1 1 auto; min-width: 0; }
.lq-tip__kicker { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8A6116; margin-bottom: 6px; }
.lq-tip__t { font-size: 16px; font-weight: var(--lq-weight-semibold, 600); color: var(--lq-ink-primary); margin-bottom: 5px; }
.lq-tip__d { font-size: 13px; line-height: 1.5; color: var(--lq-ink-secondary); margin: 0 0 14px; max-width: 540px; }
.lq-tip__art { flex: none; width: 132px; }
.lq-tip__art .empty__art { width: 132px; height: 100px; margin: 0; }
.lq-tip__x { position: absolute; top: 12px; right: 14px; width: 26px; height: 26px; border: none; background: transparent; color: var(--lq-ink-muted); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 7px; }
.lq-tip__x:hover { background: rgba(22,24,31,.06); color: var(--lq-ink-primary); }
@media (max-width: 640px) { .lq-tip { gap: 0; } .lq-tip__art { display: none; } }

/* ONBOARDING GUIDANCE — time-to-complete + what-to-prepare on the current setup step. */
.gs2-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--lq-border); }
.gs2-meta__i { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; color: var(--lq-ink-secondary); }
.gs2-meta__i svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--lq-ink-muted); }
.gs2-meta__i b { color: var(--lq-ink-primary); font-weight: 600; margin-right: 5px; }

/* SETTINGS QUICK-ACCESS CARDS — the "Main settings" landing (icon + title + one-line purpose). */
.s2home-head { padding: 2px 2px 18px; }
.s2home-head h2 { font-size: 18px; font-weight: var(--lq-weight-semibold, 600); margin: 0 0 4px; color: var(--lq-ink-primary); }
.s2home-head p { font-size: 13px; color: var(--lq-ink-secondary); margin: 0; max-width: 580px; line-height: 1.5; }
.s2qgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 14px; }
.s2qcard { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 9px; padding: 16px; background: var(--lq-surface-card); border: 1px solid var(--lq-border); border-radius: 14px; cursor: pointer; font: inherit; transition: box-shadow .18s ease, border-color .18s ease; }
.s2qcard:hover { box-shadow: var(--lq-shadow-md); border-color: var(--lq-border-strong); }
.s2qcard:focus-visible { outline: 2px solid var(--lq-accent); outline-offset: 2px; }
.s2qcard__ic { width: 38px; height: 38px; border-radius: 10px; background: var(--lq-accent-tint); color: inherit; display: inline-flex; align-items: center; justify-content: center; }
.s2qcard__ic svg { width: 19px; height: 19px; }
.s2qcard__t { font-size: 14px; font-weight: var(--lq-weight-semibold, 600); color: var(--lq-ink-primary); }
.s2qcard__d { font-size: 12.5px; line-height: 1.45; color: var(--lq-ink-secondary); }

/* SKELETON LOADERS — calm shimmer placeholders (never a spinner) while data loads. */
.lq-skel { position: relative; overflow: hidden; background: var(--lq-surface-subtle, #E6ECF8); border-radius: 8px; }
.lq-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); }
@media (prefers-reduced-motion: no-preference) { .lq-skel::after { animation: lq-shimmer 1.25s ease-in-out infinite; } }
@keyframes lq-shimmer { 100% { transform: translateX(100%); } }
.lq-skel-line { height: 12px; margin: 8px 0; }
.lq-skel-row { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--lq-border); }

/* EMPTY-STATE ILLUSTRATION (Design: original soft-geometric art). Replaces the small boxed icon with
   a calm, purposeful illustration so every empty state answers what-this-is / why-empty / what-next. */
.empty { padding: 52px 24px; text-align: center; }
.empty__art { width: 150px; height: 116px; margin: 0 auto 18px; display: block; }
.empty__art svg { width: 100%; height: 100%; display: block; }
.empty h3, .empty h4 { font-size: 15.5px; font-weight: var(--lq-weight-semibold, 600); color: var(--lq-ink-primary, #16181F); margin-bottom: 5px; }
.empty p, .empty p.muted { font-size: 13px; line-height: 1.55; color: var(--lq-ink-secondary, #5C6270); max-width: 380px; margin: 0 auto; }
.empty .btn { margin-top: 18px; }

/* FAB CLEARANCE (UX QA): the fixed Copilot FAB (52px, bottom 22px) sits in the bottom-right corner and
   was trapping right-aligned bottom-row controls (e.g. the Companies card "Convert to paid" / "Remove"
   actions) when a list was scrolled to the end, making them unclickable. Give the scroll content a
   bottom gutter that always lets the last row clear the FAB's footprint. */
.lq-content { padding-bottom: 104px; }
@media (max-width: 480px) { .lq-content { padding-bottom: 88px; } }

/* ============================================================================
   BUILD 295 — Knowledge Hub sections · Notifications center · AI Copilot drawer
   ========================================================================== */

/* ---- KNOWLEDGE BASE: hub sections ---------------------------------------- */
.kb-sec { margin-top: 30px; }
.kb-sec__h { margin-bottom: 14px; }
.kb-sec__t { font-size: 17px; font-weight: 700; color: var(--lq-ink-primary, #16181F); margin: 0; letter-spacing: -.01em; }
.kb-sec__s { font-size: 13.5px; color: var(--lq-ink-secondary, #5C6270); margin: 4px 0 0; }

/* auto-fit (not auto-fill) collapses empty trailing tracks, so the 4 cards stretch to fill the
   full row instead of leaving dead space on the far right. */
.kb-rec { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.kb-rec__c { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; cursor: pointer;
  background: var(--lq-surface-card, #fff); border: 1px solid var(--lq-border, #DEE5F3); border-radius: 16px; padding: 18px; font-family: inherit; min-height: 150px; }
.kb-rec__c:hover { border-color: var(--lq-accent, #1E36C9); box-shadow: var(--lq-shadow-md); }
.kb-rec__ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: var(--lq-accent-tint, #E9ECFB); color: inherit; }
.kb-rec__ic svg { width: 20px; height: 20px; }
.kb-rec__t { font-size: 15px; font-weight: 650; color: var(--lq-ink-primary, #16181F); }
.kb-rec__d { font-size: 13px; line-height: 1.5; color: var(--lq-ink-secondary, #5C6270); }
.kb-rec__m { margin-top: auto; font-size: 12px; font-weight: 600; color: var(--lq-accent, #1E36C9); display: inline-flex; align-items: center; gap: 5px; }
.kb-rec__m svg { width: 13px; height: 13px; transform: scaleX(-1); }

.kb-ql { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.kb-ql__c { display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  background: var(--lq-surface-card, #fff); border: 1px solid var(--lq-border, #DEE5F3); border-radius: 14px; padding: 14px; font-family: inherit; }
.kb-ql__c:hover { border-color: var(--lq-accent, #1E36C9); box-shadow: var(--lq-shadow-md); }
.kb-ql__ic { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: var(--lq-accent-tint, #E9ECFB); color: inherit; }
.kb-ql__ic svg { width: 20px; height: 20px; }
.kb-ql__x { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kb-ql__x b { font-size: 14px; font-weight: 650; color: var(--lq-ink-primary, #16181F); }
.kb-ql__x span { font-size: 12.5px; color: var(--lq-ink-secondary, #5C6270); }

/* Knowledge Base two-column hub: learning content left, a clean "What's new" rail right. */
.kb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.kb-main-col { min-width: 0; }
.kb-aside { position: sticky; top: 12px; }
@media (max-width: 1080px) { .kb-layout { grid-template-columns: 1fr; } .kb-aside { position: static; } }
.kb-news { background: var(--lq-surface-card); border: 1px solid var(--lq-border); border-radius: 16px; padding: 16px; }
.kb-news__h { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--lq-ink-primary); margin-bottom: 12px; }
.kb-news__h svg { width: 20px; height: 20px; flex: 0 0 auto; }
.kb-news__tabs { display: flex; gap: 16px; border-bottom: 1px solid var(--lq-border); margin-bottom: 8px; }
.kb-news__tab { background: none; border: none; font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--lq-ink-secondary); padding: 6px 0; cursor: pointer; position: relative; }
.kb-news__tab.on { color: var(--lq-accent); }
.kb-news__tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--lq-accent); border-radius: 2px; }
.kb-news__list { display: flex; flex-direction: column; }
.kb-news__i { display: flex; flex-direction: column; gap: 2px; text-align: left; background: none; border: none; border-left: 2px solid var(--lq-accent-tint); padding: 11px 0 11px 12px; cursor: pointer; font-family: inherit; }
.kb-news__i:hover { border-left-color: var(--lq-accent); }
.kb-news__k { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lq-accent); }
.kb-news__t { font-size: 13.5px; font-weight: 650; color: var(--lq-ink-primary); }
.kb-news__d { font-size: 12px; line-height: 1.45; color: var(--lq-ink-secondary); }
.kb-news__all { width: 100%; margin-top: 12px; justify-content: center; }

/* Compliance insights — compact, text-forward: a small 44px mark beside the copy so the graphic
   supports the reading rather than dominating it. */
.kb-ins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1180px) { .kb-ins { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kb-ins { grid-template-columns: 1fr; } }
/* ONE SURFACE FOR ALL FOUR (2026-08-18). Each card used to carry its own wash and left rail in a
   topic hue — brand blue, a second blue, amber, green. Two of those are status colours and
   approved page 4 reserves them for status, so the amber card read as a warning about the 13th
   month and the green one as a success about Form 2316. The topic is named by the tag; it does
   not also need a hue. Surface, border and radius now match the guide cards on the same page. */
.kb-ins__c { display: flex; gap: 13px; align-items: stretch; text-align: left; cursor: pointer; padding: 15px 15px 15px 16px; font-family: inherit;
  background: var(--lq-surface-card); border: 1px solid var(--lq-border); border-radius: 16px;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; }
.kb-ins__c:hover { border-color: var(--lq-accent); transform: translateY(-2px); box-shadow: var(--lq-shadow-md); }
/* The icon tile is the SAME component the guide cards use (.kb-card__ic), so the two rows on this
   page share one treatment instead of one row carrying bespoke artwork. */
.kb-ins__ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: var(--lq-accent-tint);
  color: inherit; display: inline-flex; align-items: center; justify-content: center; }
.kb-ins__ic svg { width: 19px; height: 19px; }
.kb-ins__b { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.kb-ins__tag { align-self: flex-start; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--lq-accent); background: var(--lq-accent-tint); border-radius: 999px; padding: 2px 8px; }
.kb-ins__t { font-size: 14px; font-weight: 650; line-height: 1.3; color: var(--lq-ink-primary); }
.kb-ins__d { font-size: 12.5px; line-height: 1.5; color: var(--lq-ink-secondary); }
.kb-ins__more { margin-top: auto; padding-top: 6px; font-size: 12px; font-weight: 600; color: var(--lq-accent); display: inline-flex; align-items: center; gap: 5px; }
.kb-ins__more svg { width: 13px; height: 13px; transform: scaleX(-1); }
/* Disabled buttons read clearly disabled (was a washed-out purple hard to tell from active). */
.btn:disabled, .btn[disabled], .btn.is-disabled { opacity: .5; filter: grayscale(.35); cursor: not-allowed; box-shadow: none !important; }
.btn:disabled:hover, .btn[disabled]:hover { transform: none !important; }

/* Content fade-in was slow enough to look like a load failure on data-dense panels — tighten it. */
.page .card, .page .lq-card, .page .section { animation-duration: 200ms !important; }
.page .card:nth-child(n+4), .page .lq-card:nth-child(n+4) { animation-delay: 90ms !important; }

/* Inline note boxes (.sdl-note): remove the stray legacy border-top/uneven padding so the icon and
   text sit balanced inside the filled box (seen on the payslip "draft preview" note and others). */
.sdl-note { align-items: flex-start; gap: 10px; padding: 12px 14px; border-top: none !important; margin-top: var(--lq-space-3, 10px); line-height: 1.5; }
.sdl-note svg { margin-top: 1px; width: 16px; height: 16px; flex: 0 0 auto; }
/* A note that is a WARNING, not an aside (2026-08-19). Used where a setting is RECORDED but not
   acted on — today, the carryover cap and expiry. It must read as a caveat about the control
   directly above it rather than as help text.
   IT LIVES HERE, NOT IN legacy.css, AND THAT IS THE WHOLE POINT. The rule above sets
   `border-top: none !important` on every .sdl-note. Written in legacy.css this modifier would
   have lost its TOP border only, drawing a box with three sides — a defect that looks like a
   rendering glitch and would have shipped, because the markup and the class name are both
   correct. Same cascade trap as the knowledge-base cards. */
.sdl-note--warn { padding: 12px 14px; border: 1px solid var(--amber, var(--orange)) !important;
  border-radius: var(--radius-md, 8px); background: var(--amber-t, var(--orange-t));
  color: var(--amber-d, var(--orange)); }
.sdl-note--warn b { color: inherit; }

/* Settings "Quick access" card: give the frame even top/bottom padding so the heading and the last
   row of tiles don't hug the card edges. */
.s2card.s2home { padding: 22px 24px 24px; }
.s2home .s2home-head { padding: 0 0 16px; }

/* Get started — full width (the 920px cap left big side gaps and cramped the plan). */
.gs2-page { max-width: none !important; }
/* Top brand banner: Maya scene (left) · title + message (middle) · progress ring (right). */
.gs2-banner { display: flex; align-items: center; gap: 22px; background: var(--lq-surface-card); border: 1px solid var(--lq-border); border-radius: 18px; padding: 16px 24px; margin-bottom: 22px; }
.gs2-banner__art { flex: 0 0 auto; width: 220px; background: linear-gradient(135deg, #EDF1FF, #E7F2EC); border-radius: 14px; overflow: hidden; }
.gs2-banner__art svg { width: 100%; height: auto; display: block; }
.gs2-banner__body { flex: 1 1 auto; min-width: 0; }
.gs2-banner__body .gs2-h { margin: 0; }
.gs2-banner__body .gs2-p { margin: 6px 0 0; }
.gs2-banner__help { margin-top: 12px; }
.gs2-banner__ring { flex: 0 0 auto; }
.gs2-ringbig { position: relative; width: 92px; height: 92px; }
.gs2-ringbig svg { transform: rotate(-90deg); }
.gs2-ringbig .gs2-ring__bg { fill: none; stroke: var(--lq-border); stroke-width: 8; }
.gs2-ringbig .gs2-ring__fg { fill: none; stroke: var(--lq-accent); stroke-width: 8; stroke-linecap: round;
  transition: stroke-dashoffset .9s var(--lq-ease-standard, ease); }
.gs2-ringbig__pct { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 750; color: var(--lq-ink-primary); }
@media (max-width: 720px) { .gs2-banner { flex-wrap: wrap; } .gs2-banner__art { width: 100%; } .gs2-banner__ring { order: -1; } }

/* Plan head: label + overall progress bar + completed toggle. */
.gs2-plan-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
.gs2-plan-head .gs2-plan-label { margin: 0; }
.gs2-progress { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 180px; }
.gs2-progress__t { font-size: 12px; font-weight: 600; color: var(--lq-ink-secondary); white-space: nowrap; }
.gs2-bar { flex: 1 1 auto; height: 7px; border-radius: 999px; background: var(--lq-surface-subtle); overflow: hidden; max-width: 320px; }
.gs2-bar__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--lq-accent-2), var(--lq-accent)); transition: width .8s var(--lq-ease-standard, ease); }
.gs2-donetoggle { margin-left: auto; background: none; border: none; font-family: inherit; font-size: 12px; font-weight: 600; color: var(--lq-accent); cursor: pointer; }
.gs2-hide-done .gs2-row--done { display: none; }

/* Clearer step states: strong highlight on the next step, muted completed steps. */
.gs2-row--now { background: linear-gradient(90deg, var(--lq-accent-tint), transparent 60%); box-shadow: inset 3px 0 0 var(--lq-accent); }
.gs2-row--done .gs2-t { color: var(--lq-ink-secondary); }
.gs2-row--done .gs2-d { opacity: .85; }

/* Illustration motion: the Maya travels the thread, bobs, and flutters; the star twinkles; the blob drifts. */
@media (prefers-reduced-motion: no-preference) {
  .gs2-ant-bob { animation: gs2-bob 2.6s ease-in-out infinite; }
  .gs2-star { transform-box: fill-box; transform-origin: center; animation: gs2-twinkle 2.2s ease-in-out infinite; }
  .gs2-blob { transform-box: fill-box; transform-origin: center; animation: gs2-blobdrift 9s ease-in-out infinite; }
}
/* Empty-state Maya: a gentle bob + wing flutter, matching the Get started bird. */
@media (prefers-reduced-motion: no-preference) {
  .empty__art .lq-emp-ant { animation: gs2-bob 2.8s ease-in-out infinite; }
}
@keyframes gs2-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@keyframes gs2-twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.68); opacity: .6; } }
@keyframes gs2-blobdrift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(3px, -2px) scale(1.03); } }

/* Golden Thread draws in gently on the KB hero illustration (reduced-motion safe). */
@media (prefers-reduced-motion: no-preference) {
  .kb-thread { stroke-dasharray: 120; stroke-dashoffset: 120; animation: kb-thread-draw 1.4s var(--lq-ease-standard, ease) .25s forwards; }
}
@keyframes kb-thread-draw { to { stroke-dashoffset: 0; } }

/* ---- NOTIFICATIONS CENTER ------------------------------------------------ */
.nc-wrap { margin-top: 6px; }
.nc-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--lq-border, #DEE5F3); margin-bottom: 16px; }
.nc-tab { position: relative; background: none; border: none; font-family: inherit; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--lq-ink-secondary, #5C6270); padding: 10px 14px; }
.nc-tab:hover { color: var(--lq-ink-primary, #16181F); }
.nc-tab.on { color: var(--lq-accent, #1E36C9); }
.nc-tab.on::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2.5px; border-radius: 3px; background: var(--lq-accent, #1E36C9); }
.nc-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.nc-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.nc-sel { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--lq-border, #DEE5F3); background: var(--lq-surface-card, #fff);
  border-radius: 10px; padding: 6px 10px; }
.nc-sel__l { font-size: 12px; font-weight: 600; color: var(--lq-ink-muted, #656B75); }
.nc-sel select { border: none; background: none; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--lq-ink-primary, #16181F); cursor: pointer; outline: none; }
.nc-markall { white-space: nowrap; }
.nc-list { display: flex; flex-direction: column; gap: 8px; }
.nc-row { display: flex; align-items: flex-start; gap: 12px; text-align: left; cursor: pointer; font-family: inherit;
  background: var(--lq-surface-card, #fff); border: 1px solid var(--lq-border, #DEE5F3); border-radius: 12px; padding: 14px 16px; }
.nc-row:hover { border-color: var(--lq-accent, #1E36C9); box-shadow: var(--lq-shadow-sm); }
.nc-row__dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; }
.nc-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.nc-row__t { font-size: 14px; font-weight: 650; color: var(--lq-ink-primary, #16181F); }
.nc-row__m { font-size: 13px; line-height: 1.5; color: var(--lq-ink-secondary, #5C6270); }
.nc-row__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.nc-row__cat { font-size: 11px; font-weight: 600; color: var(--lq-ink-muted, #656B75); background: var(--lq-surface-app, #EEF2FC); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.nc-row__w { font-size: 11.5px; color: var(--lq-ink-muted, #656B75); white-space: nowrap; }
.nc-cats { display: flex; flex-direction: column; gap: 22px; }
.nc-catgrp__h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; color: var(--lq-ink-primary, #16181F); margin-bottom: 10px; }
.nc-catgrp__dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.nc-catgrp__n { margin-left: auto; font-size: 12px; font-weight: 600; color: var(--lq-ink-muted, #656B75); background: var(--lq-surface-app, #EEF2FC); border-radius: 999px; padding: 1px 9px; }
.nc-digest__lead { font-size: 14px; color: var(--lq-ink-secondary, #5C6270); margin: 0 0 14px; }
.nc-dcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 22px; }
.nc-dcard { display: flex; flex-direction: column; gap: 4px; background: var(--lq-surface-card, #fff); border: 1px solid var(--lq-border, #DEE5F3); border-radius: 14px; padding: 16px; }
.nc-dcard__dot { width: 8px; height: 8px; border-radius: 50%; }
.nc-dcard__n { font-size: 26px; font-weight: 750; color: var(--lq-ink-primary, #16181F); line-height: 1; }
.nc-dcard__l { font-size: 12.5px; color: var(--lq-ink-secondary, #5C6270); }
.nc-digest__recent { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--lq-ink-muted, #656B75); margin-bottom: 10px; }
.nc-empty { padding-top: 10px; }

/* ---- TOPBAR AI BUTTON (subtle circle + the agreed two-tone sparkle mark) --- */
.lq-ai-btn { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--lq-border, #DEE5F3);
  background: var(--lq-surface-card, #fff); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.lq-ai-btn svg { width: 22px; height: 22px; }
.lq-ai-btn:hover { background: var(--lq-accent-tint, #E9ECFB); border-color: var(--lq-accent, #1E36C9); }
.lq-ai-btn.is-on { background: var(--lq-accent-tint, #E9ECFB); border-color: var(--lq-accent, #1E36C9); box-shadow: 0 0 0 3px var(--lq-accent-tint, #E9ECFB); }

/* The floating bottom-right Copilot button was removed by request. */
.cpl-fab { display: none !important; }

/* ---- Drawer trust chip ("Grounded · read-only") -------------------------- */
/* Trust chip lives in its own slim bar under the header, so the header stays one row (~57px)
   aligned with the app top bar. */
.ai-dock__trustbar { padding: 7px 16px; border-bottom: 1px solid var(--lq-border); }
.ai-trust { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; letter-spacing: .01em;
  color: var(--lq-success-text); background: rgba(20, 144, 99, .12); border-radius: 999px; padding: 2px 8px; }
.ai-trust__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lq-success); }

/* ---- AI COPILOT DRAWER — a real third grid column ------------------------ */
:root { --lq-ai-w: 400px; }
/* All three variants share one track structure (px · 1fr · px) so grid-template-columns
   is interpolable and the open/close animates AND settles to its target. Mixing 1fr with
   minmax(0,1fr) makes the change non-interpolable, which silently holds the start value. */
@media (min-width: 901px) {
  .lq-shell { grid-template-columns: 264px 1fr 0px; }
  .lq-shell.nav-collapsed:not(.ai-open) { grid-template-columns: 64px 1fr 0px; }
  /* AI dock open: the sidebar still obeys the hamburger. Expanded by default;
     collapses to the rail only when nav-collapsed is also set (its default on open).
     Previously this hard-set the first column to 72px, so toggling the hamburger
     changed the button state but never the sidebar width (state desync). */
  .lq-shell.ai-open { grid-template-columns: 264px 1fr var(--lq-ai-w, 400px);
    transition: grid-template-columns .225s cubic-bezier(.4, 0, .6, 1); }
  .lq-shell.ai-open.nav-collapsed { grid-template-columns: 72px 1fr var(--lq-ai-w, 400px); }
}
.ai-dock { min-width: 0; overflow: hidden; height: 100%; }
.ai-dock:not([hidden]) { display: flex; justify-content: flex-end; }
/* Flush to the top and right so the drawer header lines up with the app top bar (same 57px height,
   same top baseline), forming one continuous header row. Theme-aware background for dark mode. */
.ai-dock__panel { width: 100%; flex: 0 0 auto; height: 100%; margin: 0;
  background: var(--lq-surface-card); border-left: 1px solid var(--lq-border); border-radius: 0;
  box-shadow: -6px 0 24px -6px rgba(27, 27, 27, .12);
  display: flex; flex-direction: column; overflow: hidden;
  transition: all .225s cubic-bezier(.4, 0, .6, 1); }
.ai-dock__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; min-height: 57px; border-bottom: 1px solid var(--lq-border, #DEE5F3); }
.ai-dock__title { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; color: var(--lq-ink-primary, #16181F); }
.ai-dock__mark, .ai-dock__mark svg { width: 24px; height: 24px; display: flex; }
.ai-dock__tools { display: flex; align-items: center; gap: 2px; }
.ai-ic { width: 30px; height: 30px; border-radius: 8px; border: none; background: none; color: var(--lq-ink-muted, #656B75); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ai-ic svg { width: 17px; height: 17px; }
.ai-ic:hover { background: var(--lq-surface-app, #EEF2FC); color: var(--lq-ink-primary, #16181F); }
.ai-dock__body { flex: 1; overflow-y: auto; padding: 20px 16px; }
.ai-hello { text-align: center; padding: 12px 8px 20px; }
.ai-hello__spark, .ai-hello__spark svg { width: 48px; height: 48px; margin: 0 auto; }
.ai-hello__spark { margin-bottom: 12px; }
.ai-hello__t { font-size: 17px; font-weight: 700; color: var(--lq-ink-primary, #16181F); margin: 0 0 6px; }
.ai-hello__d { font-size: 13px; line-height: 1.55; color: var(--lq-ink-secondary, #5C6270); margin: 0; }
.ai-sg-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--lq-ink-muted, #656B75); margin: 6px 4px 10px; }
.ai-sgs { display: flex; flex-direction: column; gap: 8px; }
.ai-sg { text-align: left; font-family: inherit; font-size: 13.5px; line-height: 1.4; color: var(--lq-ink-primary, #16181F); cursor: pointer;
  background: var(--lq-surface-app, #EEF2FC); border: 1px solid transparent; border-radius: 12px; padding: 12px 14px; }
.ai-sg:hover { background: var(--lq-accent-tint, #E9ECFB); border-color: var(--lq-accent, #1E36C9); }
.ai-dock__foot { border-top: 1px solid var(--lq-border, #DEE5F3); padding: 12px; }
.ai-compose { display: flex; align-items: flex-end; gap: 8px; border: 1px solid var(--lq-border, #DEE5F3); border-radius: 16px; padding: 10px 10px 10px 16px; background: var(--lq-surface-card, #fff); }
.ai-compose:focus-within { border-color: var(--lq-accent, #1E36C9); box-shadow: 0 0 0 3px var(--lq-accent-tint, #E9ECFB); }
.ai-compose input { flex: 1; border: none; outline: none; background: none; font-family: inherit; font-size: 14px; color: var(--lq-ink-primary, #16181F); min-width: 0; min-height: 68px; }
.ai-send { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 10px; border: none; cursor: pointer; background: var(--lq-accent, #1E36C9); color: #fff; display: flex; align-items: center; justify-content: center; }
.ai-send svg { width: 17px; height: 17px; }
.ai-send:hover { filter: brightness(1.06); }
.ai-dock__hint { font-size: 11px; color: var(--lq-ink-muted, #656B75); margin: 8px 4px 2px; text-align: center; }

/* Mobile: the drawer overlays full-width rather than shrinking an off-canvas layout. */
@media (max-width: 900px) {
  .ai-dock { position: fixed; inset: 0 0 0 auto; width: min(430px, 100%); z-index: 400; justify-content: flex-end; }
  .lq-shell:not(.ai-open) .ai-dock { display: none; }
  .ai-dock__panel { width: 100%; height: 100%; margin: 0; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lq-shell.ai-open, .ai-dock__panel { transition: none !important; }
}

/* ============================================================================
   BUILD 299 — layout polish batch
   ========================================================================== */

/* #1 Settings: real, sticky left column (~264px) with content aligned to the same top.
   Scoped to >1180px to match the existing single-column collapse below that width. */
@media (min-width: 1181px) {
  .sset { grid-template-columns: 264px 1fr; gap: 24px; align-items: start; }
  .sset .subnav { position: sticky; top: 12px; align-self: start; }
}

/* #4 Settings gear: give it the same crisp weight/color as the colored nav icons above it
   (its "system" domain token renders grey, which read as disabled). */
/* !important beats the inline --nav-color:var(--lq-nav-system) the nav item sets, which was grey. */
.lq-nav-settings-item { --nav-color: var(--lq-ink-primary, #16181F) !important; --nav-tint: var(--lq-accent-tint, #E9ECFB) !important; }
.lq-nav-settings-item .nav-icon svg { opacity: 1; }
.lq-nav-settings-item.is-active { --nav-color: var(--lq-accent, #1E36C9) !important; }
.lq-nav-settings-item:hover { color: var(--lq-ink-primary, #16181F); background: var(--lq-accent-tint, #E9ECFB); }
.lq-nav-settings-item.is-active { --nav-color: var(--lq-accent, #1E36C9); }

/* #5 Run-payroll stepper: all six steps share the width and labels wrap instead of clipping,
   so "Approve" and "Post" are never truncated; still horizontally scrollable as a fallback. */
.stepper { width: 100%; }
.stepper .step { flex: 1 1 0; min-width: 0; }
.stepper .step__label { white-space: normal; overflow-wrap: anywhere; text-align: center; }

/* #7 Search fields: keep the magnifier clear of the placeholder (was rendering as "QSearch…"). */
.co-search__ic svg, .s2search svg, .co-search__ic { width: 15px; height: 15px; display: block; }
.co-search input, .s2search input { padding-left: 36px; }

/* #8 Skeleton loaders: the existing .skeleton (used by skelLine across Approvals, Government Filing,
   Anomaly queue, Reports & GL and every hydrating view) mapped to near-white tokens, so it read as a
   flat grey box with no visible shimmer, and its @keyframes was defined twice with conflicting values.
   Give it a clearer base + mid-tone and a dedicated shimmer so those pages read as loading, not broken.
   One override fixes every page at once. */
.skeleton {
  background: linear-gradient(90deg, var(--lq-surface-subtle, #E6ECF8) 25%, #D6DFF3 50%, var(--lq-surface-subtle, #E6ECF8) 75%) !important;
  background-size: 220% 100% !important;
  border-radius: 8px;
  animation: lq-skel-shimmer 1.25s ease-in-out infinite !important;
}
@keyframes lq-skel-shimmer { 0% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none !important; } }

/* #9 Government Filing: keep the agency + form code on one line ("BIR 1601-C" no longer wraps). */
.fil-form { white-space: nowrap; }
/* #9 Anomaly queue: let the title use full width and wrap instead of clipping to "· 2026-0…",
   so every row shows its full label/date consistently. */
.anomaly-row__title { white-space: normal; overflow: visible; text-overflow: clip; min-width: 0; }

/* #3 Get started footer utility cluster (grouped with Settings under one divider). */
.lq-nav-gs-item { border-top: 1px solid var(--lq-border); margin-top: var(--lq-space-2); padding-top: var(--lq-space-3); }
.lq-nav-gs-item + .lq-nav-settings-item { border-top: none; margin-top: 0; padding-top: var(--lq-space-1); }
/* The setup percentage LEADS the label (2026-08-17). margin-left:auto pushed it to the far
   right where it read as a stray badge; sitting beside the rocket it reads as progress.
   Tabular figures so 9% and 40% occupy the same width and the label never shifts. */
.lq-gs-pct { flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: -.01em;
  color: var(--lq-accent); background: var(--lq-accent-tint); border: 1px solid var(--lq-accent-tint);
  border-radius: 999px; padding: 2px 8px; min-width: 38px; text-align: center;
  font-variant-numeric: tabular-nums; margin-right: 2px; }
.lq-nav-gs-item.is-active .lq-gs-pct { background: var(--lq-accent); color: #fff; border-color: var(--lq-accent); }
.lq-shell.nav-collapsed .lq-gs-pct { display: none; }

/* ---- Header brand logo: image is the brand; hide text + size for legibility ----
   Once the wordmark image loads (.has-img), the "LaQuest" text fallback is redundant,
   so it is hidden. The mark is enlarged from 34px to 44px so "bPAY" reads clearly.
   In the collapsed rail the whole lockup is already hidden, so this only affects the
   expanded sidebar and the login screen. */
.lq-logo.has-img .lq-logo-text { display: none !important; }
.lq-logo__img { height: 44px !important; }
.lq-sidebar-head { min-height: 60px; }

/* ---- QA batch (display + layout) ---------------------------------------- */
/* A2: anomaly-queue detail must wrap so the trailing period code isn't clipped. */
.lq-row.aq-row .txt { min-width: 0; }
.lq-row.aq-row .secondary { white-space: normal; overflow: visible; text-overflow: clip; }
/* A3: widen the small search box so the Employees placeholder isn't cut off. */
.search-box-sm { width: 300px; }
/* A4: companies overview cards — 4-up on desktop instead of an orphaned 4th card. */
.co-stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* ===================================================================================
   GMAIL-STYLE SHELL CANVAS (build 368) — OUTER BACKGROUND LAYOUT ONLY.
   The app sits on the soft app-tone backdrop; sidebar + topbar blend onto it (no card
   borders), and the content area floats as a rounded canvas. NOTHING inside the pages
   changes — same nav, same items, same icons, same screens, same components. Desktop
   only (≥901px); the mobile drawer keeps its existing look. Dark theme inherits via
   the existing tokens (--lq-surface-app / --lq-surface-card / --lq-border).
   =================================================================================== */
/* OPT-IN at runtime: html[data-shell="canvas"] only (Appearance → Workspace shell; stored in
   localStorage lq_shell). DEFAULT OFF — a deploy changes nothing until a user flips the switch
   in their own browser. Flip back any time; no redeploy involved. */
@media (min-width: 901px) {
  html[data-shell="canvas"] .lq-shell { background: var(--lq-surface-app); }
  html[data-shell="canvas"] .lq-sidebar { background: transparent; border-right: none; }
  html[data-shell="canvas"] .lq-topbar { background: transparent; border-bottom: none; backdrop-filter: none; padding-top: 10px; padding-bottom: 8px; }
  html[data-shell="canvas"] .lq-content {
    background: var(--lq-surface-card);
    border: 1px solid var(--lq-border);
    border-radius: 20px;
    width: auto;
    margin: 6px 16px 16px 4px; /* inset on ALL sides — the canvas floats clear of the header too */
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 20px 44px -34px rgba(16, 24, 40, .14);
  }
}

/* ===================================================================================
   CONTOUR SCROLLBAR (2026-08-19) — the workspace scrollbar follows the rounded edge.
   VISUAL ONLY. Nothing structural changes: no new element, no change to the shell grid,
   the rail, the sidebar, the header, the 20px workspace radius, the margins, the padding
   or the scrolling container. `.lq-content` is BOTH the rounded canvas and the scroller,
   so the scrollbar already sits inside the radius — this restyles it where it stands.

   WHY THE NATIVE SCROLLBAR IS KEPT, AND NOT REPLACED WITH AN OVERLAY.
   The obvious way to draw a scrollbar that starts below one curve and stops above another
   is to hide the real one and position a div. That would have cost every behaviour the
   brief asks to preserve: mouse-wheel and trackpad momentum, the keyboard (Page Up/Down,
   Home/End, arrow keys, space), touch fling and rubber-banding, and the accessibility tree,
   which reports a scrollable region to assistive technology and would then be reporting one
   the user cannot see the state of. So the native scrollbar stays and is dressed instead.

   HOW THE ENDS ARE INSET WITHOUT MOVING ANYTHING.
   `::-webkit-scrollbar-button` at :start and :end reserves space at the two ends of the
   scrollbar and, crucially, constrains the THUMB'S TRAVEL. Given a height and no background
   they become invisible spacers, so the track begins below the top-right curve and finishes
   above the bottom-right one, and the thumb can never travel into either corner. 18px clears
   the 20px radius with a hair to spare. The transparent-border + background-clip:padding-box
   pattern (already used in this file) narrows the painted track and thumb to a 4px pill
   inside the 10px gutter, so it reads as a contour rather than a bar.

   WIDTH IS DELIBERATELY UNCHANGED AT 10px. The gutter width is what reserves horizontal
   space in the scrollport; changing it would reflow every page by the difference. This is
   the one number in the block that must not be "improved".

   FIREFOX. Gecko implements none of the ::-webkit-scrollbar pseudo-elements. It gets
   `scrollbar-width: thin` and the same muted blue-grey via `scrollbar-color` — correct
   colour and weight, but square ends and no inset. That is a browser capability boundary,
   not a shell limitation, and it degrades to something plainly deliberate.
   =================================================================================== */
@media (min-width: 901px) {
  html[data-shell="canvas"] .lq-content {
    /* A muted blue-grey, deliberately NOT the brand blue: the scrollbar is furniture and
       must not read as an interactive accent competing with the page. */
    --lq-scroll-track: rgba(198, 206, 224, .28);   /* thin, subtle, neutral */
    --lq-scroll-thumb: rgba(148, 160, 184, .55);   /* resting */
    --lq-scroll-thumb-active: rgba(122, 135, 163, .95); /* scrolling or hovering */
    scrollbar-width: thin;
    scrollbar-color: var(--lq-scroll-thumb) transparent;   /* Firefox */
  }
  html[data-shell="canvas"] .lq-content:hover,
  html[data-shell="canvas"] .lq-content.is-scrolling { scrollbar-color: var(--lq-scroll-thumb-active) transparent; }

  html[data-shell="canvas"] .lq-content::-webkit-scrollbar { width: 10px; background: transparent; }

  /* The invisible end-caps that hold the track clear of both curves AND stop the thumb
     travelling into them. Without these the thumb reaches the very top and bottom of the
     scrollport and is clipped by the 20px radius at each extreme. */
  html[data-shell="canvas"] .lq-content::-webkit-scrollbar-button:vertical:start,
  html[data-shell="canvas"] .lq-content::-webkit-scrollbar-button:vertical:end {
    display: block; height: 18px; background: transparent; border: 0;
  }
  /* The double-button variants exist on some platforms; zero them so no arrow ever appears. */
  html[data-shell="canvas"] .lq-content::-webkit-scrollbar-button:vertical:start:increment,
  html[data-shell="canvas"] .lq-content::-webkit-scrollbar-button:vertical:end:decrement {
    display: none;
  }

  html[data-shell="canvas"] .lq-content::-webkit-scrollbar-track {
    background: var(--lq-scroll-track);
    border-left: 3px solid transparent; border-right: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;              /* softly curved endpoints */
  }
  html[data-shell="canvas"] .lq-content::-webkit-scrollbar-thumb {
    background: var(--lq-scroll-thumb);
    border-left: 3px solid transparent; border-right: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
    transition: background-color 220ms var(--lq-ease-standard, ease);
  }
  html[data-shell="canvas"] .lq-content:hover::-webkit-scrollbar-thumb,
  html[data-shell="canvas"] .lq-content.is-scrolling::-webkit-scrollbar-thumb {
    background: var(--lq-scroll-thumb-active);
  }
  html[data-shell="canvas"] .lq-content::-webkit-scrollbar-corner { background: transparent; }
}
/* The gentle fade is a nicety, never a requirement — reduced motion drops it and the
   thumb simply changes state instantly. (components.css already neutralises transitions
   globally under this query; this is belt and braces for the scrollbar specifically.) */
@media (prefers-reduced-motion: reduce) {
  html[data-shell="canvas"] .lq-content::-webkit-scrollbar-thumb { transition: none; }
}

/* Canvas shell sidebar head (per Anoop, Aug 14): hamburger stays a HAMBURGER (no X morph),
   and the logo is hidden for now. Current nav icons untouched. Canvas mode only. */
@media (min-width: 901px) {
  html[data-shell="canvas"] .lq-hamburger.is-open .lq-hamburger-line-top { top: 1px; width: 20px; transform: none; }
  html[data-shell="canvas"] .lq-hamburger.is-open .lq-hamburger-line-mid { top: 7px; width: 14px; opacity: 1; transform: none; }
  html[data-shell="canvas"] .lq-hamburger.is-open .lq-hamburger-line-bottom { top: 13px; width: 17px; transform: none; }
  html[data-shell="canvas"] .lq-logo { display: none; }
}

/* ===================================================================================
   CANVAS SHELL v2 (per Anoop, Aug 14) — the TWO-LAYER Gmail-style left navigation:
   a slim fixed icon rail, then the wider sidebar floating as its own rounded panel,
   the persistent header, and the workspace canvas. Pages inside remain untouched.
   Canvas mode + desktop only; Classic keeps the single sidebar exactly as today.
   =================================================================================== */
.lq-rail { display: none; } /* hidden everywhere except the Canvas shell on desktop */
@media (min-width: 901px) {
  /* Three columns: rail · floating nav panel · workspace column. */
  html[data-shell="canvas"] .lq-shell { grid-template-columns: 72px 264px 1fr; }
  /* Hamburger now hides the WIDE panel entirely (Gmail behavior) — the rail persists. */
  html[data-shell="canvas"] .lq-shell.nav-collapsed { grid-template-columns: 72px 0 1fr; }
  html[data-shell="canvas"] .lq-shell.nav-collapsed .lq-sidebar { display: none; }

  /* The slim rail: quiet chips on the backdrop, existing icons, tiny labels. */
  html[data-shell="canvas"] .lq-rail { display: flex; flex-direction: column; align-items: center;
    gap: 4px; padding: 10px 0; overflow: hidden auto; }
  html[data-shell="canvas"] .lq-rail-item { width: 60px; border: none; background: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 6px;
    border-radius: 12px; color: var(--lq-ink-secondary); font: 600 10px var(--lq-font-ui); }
  html[data-shell="canvas"] .lq-rail-item:hover { background: var(--lq-surface-subtle); }
  html[data-shell="canvas"] .lq-rail-chip { width: 38px; height: 26px; border-radius: 999px;
    display: grid; place-items: center; }
  html[data-shell="canvas"] .lq-rail-chip svg { width: 19px; height: 19px; }
  html[data-shell="canvas"] .lq-rail-item.is-on { color: var(--lq-accent); }
  html[data-shell="canvas"] .lq-rail-item.is-on .lq-rail-chip { background: var(--lq-surface-subtle); }

  /* The wider sidebar becomes its own soft rounded floating panel beside the rail. */
  html[data-shell="canvas"] .lq-sidebar { background: var(--lq-surface-card);
    border: 1px solid var(--lq-border); border-radius: 20px; margin: 6px 0 16px 0;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .03), 0 20px 44px -34px rgba(16, 24, 40, .12); }

  /* A touch more breathing room between the nav panel and the workspace canvas. */
  html[data-shell="canvas"] .lq-content { margin-left: 12px; }
}

/* CANVAS SHELL v3 (per Anoop, Aug 14 — match the reference left side exactly):
   the wider nav panel sits DIRECTLY on the soft backdrop (no white container), and the
   hamburger lives at the very top of the far-left rail. Canvas mode + desktop only. */
@media (min-width: 901px) {
  /* Remove the white panel treatment from the wide sidebar — blend onto the backdrop. */
  html[data-shell="canvas"] .lq-sidebar { background: transparent; border: none; box-shadow: none;
    border-radius: 0; margin: 0; }
  /* The sidebar head (old burger + hidden logo) is no longer needed — nav starts immediately. */
  html[data-shell="canvas"] .lq-sidebar-head { display: none; }
  /* The rail-top hamburger: plain three lines, far left. */
  html[data-shell="canvas"] .lq-rail-burger { width: 40px; height: 40px; border: none; background: none;
    border-radius: 10px; cursor: pointer; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 4px; margin: 2px 0 30px; } /* generous gap below the burger, per the reference */
  html[data-shell="canvas"] .lq-rail-burger:hover { background: var(--lq-surface-subtle); }
  html[data-shell="canvas"] .lq-rail-burger span { display: block; width: 18px; height: 2px;
    border-radius: 2px; background: var(--lq-ink-primary); }
}

/* CANVAS SHELL v4 — finishing polish (per Anoop's 7-point list, Aug 14). Canvas + desktop only. */
@media (min-width: 901px) {
  /* 3. A little more air between the rail and the expanded panel. */
  html[data-shell="canvas"] .lq-shell { grid-template-columns: 78px 264px 1fr; }
  html[data-shell="canvas"] .lq-shell.nav-collapsed { grid-template-columns: 78px 0 1fr; }
  /* 1. The module heading (e.g. PAYROLL) starts lower — aligned with the first rail item. */
  html[data-shell="canvas"] .lq-sidebar { padding-top: 38px; }
  /* 2. Rail labels: a touch larger and darker, rail stays slim and quiet. */
  html[data-shell="canvas"] .lq-rail-item { font: 600 11px var(--lq-font-ui); color: var(--lq-ink-primary); }
  html[data-shell="canvas"] .lq-rail-item:not(.is-on) { opacity: .82; }
  html[data-shell="canvas"] .lq-rail-item:hover { opacity: 1; }
  html[data-shell="canvas"] .lq-rail-item.is-on { color: var(--lq-accent); opacity: 1; }
  /* 5. Softer workspace container: lighter border, subtler shadow. */
  html[data-shell="canvas"] .lq-content { border-color: color-mix(in srgb, var(--lq-border) 55%, transparent);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .02), 0 16px 36px -32px rgba(16, 24, 40, .10); }
}
/* 6. Knowledge Base category chips only: slightly lighter (height + type), one row preserved. */
#kbHost .co-fchip { padding: 4px 11px; font-size: 12px; }

/* CANVAS SHELL v5 (per Anoop): the right-side panel is FIXED — the rail is a quick switcher only,
   with Settings pinned separately at the rail's bottom. */
@media (min-width: 901px) {
  html[data-shell="canvas"] .lq-rail { min-height: 0; }
  html[data-shell="canvas"] .lq-rail-spacer { flex: 1 1 auto; }
}

/* CANVAS SHELL v6 (per Anoop): the workspace canvas is OFF-WHITE so the white cards inside
   separate properly (they were white-on-white). Theme-aware via a mix of card + backdrop. */
@media (min-width: 901px) {
  html[data-shell="canvas"] .lq-content { background: var(--lq-surface-app); }
  @supports (background: color-mix(in srgb, red 50%, blue)) {
    html[data-shell="canvas"] .lq-content { background: color-mix(in srgb, var(--lq-surface-card) 55%, var(--lq-surface-app)); }
  }
}

/* CANVAS SHELL v7 (per Anoop): breathing room in the top-left. The sidebar head becomes a
   RESERVED LOGO ZONE — empty for now, sized and waiting for the LaQuest Payroll logo — and a
   consistent vertical rhythm separates burger → logo zone → PAYROLL heading → first item. */
@media (min-width: 901px) {
  /* Panel starts a touch below the burger's top line. */
  html[data-shell="canvas"] .lq-sidebar { padding-top: 18px; }
  /* Reserved logo/header zone: 48px tall, empty for now (contents stay hidden). To place the
     logo later: un-hide .lq-logo inside this zone — the space is already waiting for it. */
  html[data-shell="canvas"] .lq-sidebar-head { display: block; height: 48px; margin: 0 0 28px; padding: 0 var(--lq-space-1); }
  html[data-shell="canvas"] .lq-sidebar-head .lq-hamburger,
  html[data-shell="canvas"] .lq-sidebar-head .lq-logo { display: none; }
  /* Heading → first item: a calm, consistent gap; later group labels keep a matching rhythm. */
  html[data-shell="canvas"] #nav .lq-nav-group-label { margin-bottom: 10px; }
  html[data-shell="canvas"] #nav .lq-nav-group-label:not(:first-child) { margin-top: 22px; }
}

/* CANVAS SHELL v8 (per Anoop's mockup, Aug 14): the aligned, airy left side.
   Burger top-left → one large shared empty zone → the rail's FIRST item and the panel's
   PAYROLL heading begin at the SAME height → generous vertical rhythm down both columns. */
@media (min-width: 901px) {
  /* Burger: slightly larger, then the big top zone (also the future logo's breathing room). */
  html[data-shell="canvas"] .lq-rail-burger { margin: 4px 0 92px; }
  html[data-shell="canvas"] .lq-rail-burger span { width: 20px; }
  /* Rail: spacious pitch between items; label a touch larger. */
  html[data-shell="canvas"] .lq-rail { gap: 30px; padding-top: 12px; }
  html[data-shell="canvas"] .lq-rail-item { font-size: 11.5px; gap: 6px; }
  /* Active chip: a rounded tile around the icon (like the mockup), inactive icons stay plain. */
  html[data-shell="canvas"] .lq-rail-chip { width: 46px; height: 32px; border-radius: 12px; }
  html[data-shell="canvas"] .lq-rail-chip svg { width: 20px; height: 20px; }
  /* Panel: the reserved zone grows so PAYROLL aligns with the first rail item. */
  html[data-shell="canvas"] .lq-sidebar-head { height: 100px; margin: 0 0 24px; }
  /* Roomier gaps before each later group heading (ASSISTANT / COMPLIANCE / ADMIN). */
  html[data-shell="canvas"] #nav .lq-nav-group-label:not(:first-child) { margin-top: 30px; }
}

/* CANVAS SHELL v9 (per Anoop): rail = Payroll · Time · Compliance · Reports · Knowledge,
   distributed EVENLY down the rail's height, Settings fixed at the bottom. */
@media (min-width: 901px) {
  html[data-shell="canvas"] .lq-rail { gap: 0; }
  html[data-shell="canvas"] .lq-rail-mods { flex: 1 1 auto; min-height: 0; width: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; }
  html[data-shell="canvas"] .lq-rail-burger { margin: 4px 0 24px; } /* the even spread owns the rhythm below */
}

/* CANVAS SHELL v10 (per Anoop): UNDO the oversized top spacing. Compact arrangement:
   burger → SMALL logo reserve → PAYROLL (~22px) → Dashboard (~12px). Rail items stack
   evenly FROM THE TOP (no full-height spread); Settings stays pinned at the bottom. */
@media (min-width: 901px) {
  /* Rail: compact stack from the top, moderate even gaps, Settings pushed to the bottom. */
  html[data-shell="canvas"] .lq-rail-burger { margin: 4px 0 18px; }
  html[data-shell="canvas"] .lq-rail-mods { flex: 0 0 auto; justify-content: flex-start; gap: 20px; }
  html[data-shell="canvas"] .lq-rail > .lq-rail-item:last-child { margin-top: auto; margin-bottom: 4px; }
  /* Panel: small reserved logo space only; the compact rhythm you specified. */
  html[data-shell="canvas"] .lq-sidebar { padding-top: 14px; }
  html[data-shell="canvas"] .lq-sidebar-head { height: 40px; margin: 0 0 22px; }
  html[data-shell="canvas"] #nav .lq-nav-group-label { margin-bottom: 12px; }
  html[data-shell="canvas"] #nav .lq-nav-group-label:not(:first-child) { margin-top: 24px; }
}

/* CANVAS SHELL v11 (per Anoop): the balanced, connected left shell.
   Both columns begin at ~94px from the top; compact 52px logo reserve; no hard divider —
   the rail carries only a whisper of tone so the two panels read as ONE left shell. */
@media (min-width: 901px) {
  /* Consistent start height: rail first item ≈ panel PAYROLL heading ≈ 94px from top. */
  html[data-shell="canvas"] .lq-rail-burger { margin: 4px 0 38px; }
  html[data-shell="canvas"] .lq-sidebar { padding-top: 14px; }
  html[data-shell="canvas"] .lq-sidebar-head { height: 52px; margin: 0 0 28px; }
  /* One connected shell: no borders or shadows between rail and panel; the rail gets only a
     faint tonal shade for separation. */
  html[data-shell="canvas"] .lq-rail, html[data-shell="canvas"] .lq-sidebar { border: none; box-shadow: none; }
  html[data-shell="canvas"] .lq-rail { background: transparent; }
  @supports (background: color-mix(in srgb, red 50%, blue)) {
    html[data-shell="canvas"] .lq-rail { background: color-mix(in srgb, var(--lq-ink-primary) 3%, transparent); }
  }
  /* Settings: anchored bottom-left, identical alignment and footprint to the other rail items. */
  html[data-shell="canvas"] .lq-rail > .lq-rail-item:last-child { margin-top: auto; margin-bottom: 8px; }
}

/* CANVAS SHELL v12 (per Anoop): quiet, compact, plate-free left shell.
   One consistent background across both panels; compact rail group; active state carried by
   COLOR ONLY (no tiles/plates); refined hover-only scrollbar on the nav panel's outer edge. */
@media (min-width: 901px) {
  /* One calm background — no colored plate on the rail. */
  html[data-shell="canvas"] .lq-rail { background: transparent; }
  /* Compact module group in the upper area; Settings stays anchored at the bottom. */
  html[data-shell="canvas"] .lq-rail-mods { gap: 10px; }
  /* No background blocks anywhere on the rail — active/hover read through color alone. */
  html[data-shell="canvas"] .lq-rail-item:hover,
  html[data-shell="canvas"] .lq-rail-item.is-on .lq-rail-chip,
  html[data-shell="canvas"] .lq-rail-chip { background: transparent; }
  html[data-shell="canvas"] .lq-rail-item:not(.is-on) { opacity: .58; }
  html[data-shell="canvas"] .lq-rail-item:not(.is-on):hover { opacity: .85; }
  html[data-shell="canvas"] .lq-rail-item.is-on { opacity: 1; color: var(--lq-accent); }
  /* SUPERSEDED by the Navigation Spine (v15, below): the nav has NO visible scrollbar at all —
     the spine dots are the position cue, per Anoop. This block previously gave the panel a thin
     hover-reveal bar; build 619 briefly extended that to #nav and the grey line reappeared beside
     the dots. Left as a no-op record so the hover-bar idea is not reintroduced. */
}

/* CANVAS SHELL v13 (per Anoop): tighter rail rhythm — icon sits close to its label,
   and the module items form one compact group. Icon size unchanged (20px). */
@media (min-width: 901px) {
  html[data-shell="canvas"] .lq-rail-mods { gap: 2px; }
  html[data-shell="canvas"] .lq-rail-item { gap: 2px; padding: 5px 0; }
  html[data-shell="canvas"] .lq-rail-chip { height: 24px; }
}

/* CANVAS SHELL v14 (per Anoop): two minor refinements.
   1) Rail label reads "Knowledge Base" (matches the module name) — labels may wrap to two
      centered lines within the narrow rail. 2) The logo reserve at the top of the nav panel
      becomes a small, deliberate slot aligned with where PAYROLL begins — no large gap; the
      LaQuest Payroll logo drops into it naturally when the asset is ready. */
@media (min-width: 901px) {
  html[data-shell="canvas"] .lq-rail-item { white-space: normal; line-height: 1.15; text-align: center; }
  html[data-shell="canvas"] .lq-sidebar-head { height: 44px; margin: 0 0 12px; }
}

/* ============================================================================
   BRAND ACCENT GRADIENT v1 (per Anoop): restrained cobalt → soft-lilac → muted-rose.
   Cobalt stays the ONLY functional color (actions, nav, links, focus, workflow,
   statuses). The gradient appears sparingly as a premium accent: summary cards,
   payroll-period cards, empty-state illustrations, a soft AI Copilot glow, and
   positive completion moments. NO pink on buttons, nav, statuses, errors, or
   warnings; no gradients across the shell. Refined and warm, not playful.
   ========================================================================== */
:root {
  --lq-lilac: #7B6FD4;  /* soft lilac — secondary accent, decorative only */
  --lq-rose:  #B76E8F;  /* muted rose — decorative only, never semantic */
  --lq-grad-brand: linear-gradient(120deg, #1e36c9 0%, #7B6FD4 55%, #B76E8F 100%);
  --lq-grad-wash:  linear-gradient(120deg, rgba(42,58,214,.08) 0%, rgba(123,111,212,.08) 55%, rgba(183,110,143,.09) 100%);
}
/* Premium summary card: a fine gradient edge along the top — quiet signature, not a wash. */
.networth-card { position: relative; overflow: hidden; }
.networth-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--lq-grad-brand); opacity: .85; pointer-events: none; }
/* Payroll-period cards: an even finer edge, subtler still. */
.period-card { position: relative; overflow: hidden; }
.period-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--lq-grad-brand); opacity: .5; pointer-events: none; }
/* Knowledge hero: extend its existing cool tint through lilac into a whisper of rose. */
.kb-hero { background: linear-gradient(105deg, #EEF0FF 0%, #F3ECFC 55%, #FBF0F4 100%); }
/* Empty states: warm the illustration chip with the gradient wash (icon stays quiet). */
.empty .ic { background: var(--lq-grad-wash); border-color: transparent; color: inherit; }
/* AI Copilot: a soft ambient glow around the drawer — cobalt-through-lilac, barely-there rose. */
.cpl-panel { box-shadow: 0 0 0 1px rgba(123,111,212,.16), 0 18px 48px rgba(42,58,214,.14),
  0 6px 24px rgba(183,110,143,.10); }
/* Positive completion moments (Get started "done" steps): a gentle warm wash on the icon chip. */
.gs2-card--done .gs2-ic { background: var(--lq-grad-wash); }
/* Dark theme: keep the same accents but let the washes recede further. */
[data-theme="dark"] .networth-card::before { opacity: .6; }
[data-theme="dark"] .period-card::before { opacity: .35; }
[data-theme="dark"] .kb-hero { background: linear-gradient(105deg, rgba(42,58,214,.16), rgba(123,111,212,.14) 55%, rgba(183,110,143,.12) 100%); }

/* CANVAS SHELL v15 (per Anoop): Navigation Spine. The panel's native scrollbar is hidden
   (scrolling itself — wheel, trackpad, keyboard, touch — is untouched); in its place a
   minimal vertical guide sits on the panel's outer edge with one marker per nav group.
   Active/visible group = short cobalt line; inactive = subtle neutral dots; click = jump. */
@media (min-width: 901px) {
  /* Build 619 moved the scroll from .lq-sidebar to its #nav child (so the logo head stays
     pinned). The spine IS the scroll indicator, so the native bar stays hidden on WHICHEVER
     element scrolls — otherwise the grey bar returns next to the dots. */
  html[data-shell="canvas"] .lq-sidebar,
  html[data-shell="canvas"] .lq-sidebar > #nav { scrollbar-width: none; }
  html[data-shell="canvas"] .lq-sidebar::-webkit-scrollbar,
  html[data-shell="canvas"] .lq-sidebar > #nav::-webkit-scrollbar { display: none; width: 0; }
  html[data-shell="canvas"] .lq-spine { position: fixed; left: 329px; top: 50%;
    transform: translateY(-50%); display: flex; flex-direction: column; align-items: center;
    gap: 12px; z-index: 30; }
  html[data-shell="canvas"] body.rail .lq-spine, .lq-spine { display: none; } /* hidden by default + when panel collapsed */
  html[data-shell="canvas"] body:not(.rail) .lq-spine { display: flex; }
  html[data-shell="canvas"] .lq-spine__dot { width: 16px; height: 16px; padding: 0; border: none;
    background: transparent; cursor: pointer; display: grid; place-items: center; border-radius: 8px; }
  html[data-shell="canvas"] .lq-spine__dot::before { content: ''; width: 4px; height: 4px;
    border-radius: 999px; background: var(--lq-border-strong); transition: height .16s ease, background .16s ease; }
  html[data-shell="canvas"] .lq-spine__dot:hover::before { background: var(--lq-ink-secondary); }
  html[data-shell="canvas"] .lq-spine__dot.is-on::before { height: 16px; background: var(--lq-accent); }
  html[data-shell="canvas"] .lq-spine__dot:focus-visible { outline: 2px solid var(--lq-accent); outline-offset: 1px; }
}

/* ASSURANCE HERO SPACING (per Anoop): the kicker, headline, description, and actions were
   reading as stuck together — open the vertical rhythm inside the hero. Appended last so it
   wins over any earlier/heading resets. */
.asr-hero { padding: 30px 32px; }
.asr-hero__kicker { margin: 0 0 14px; }
.asr-hero__t { margin: 0 0 12px; line-height: 1.28; }
.asr-hero__d { margin: 0 0 22px; }
.asr-hero__acts { gap: 12px; }

/* CANVAS SHELL v16 (per Anoop): Navigation Spine anchored to the BOTTOM of the panel's
   outer edge instead of vertically centered. */
@media (min-width: 901px) {
  html[data-shell="canvas"] .lq-spine { top: auto; bottom: 28px; transform: none; }
}

/* BRAND ACCENT GRADIENT v2 (per Anoop): soft rose-lilac in the navigation icons.
   The duotone icons keep their cobalt/domain-colored STROKE (the functional layer);
   only the soft under-fill (.a) warms to the lilac-rose blend — a quiet touch of the
   brand accent in the nav and rail, with no change to active-state semantics. */
.lq-nav-item .nav-icon .lq-duo .a,
.lq-rail-chip .lq-duo .a {
  fill: color-mix(in srgb, var(--lq-lilac) 55%, var(--lq-rose) 45%);
  opacity: .30;
}
[data-theme="dark"] .lq-nav-item .nav-icon .lq-duo .a,
[data-theme="dark"] .lq-rail-chip .lq-duo .a { opacity: .38; }

/* COMPLIANCE CENTER SPACING (per Anoop): clear gap between the Change-tracking card and
   the Payroll Assurance hero below it. */
.asr-hero { margin-top: 18px; }

/* CANVAS SHELL v17 (per Anoop): Navigation Spine back to vertical CENTER of the panel edge,
   and the markers pick up the soft rose-lilac accent — inactive dots in a muted lilac-rose,
   the active marker in a cobalt-to-lilac blend. Functional behavior unchanged. */
@media (min-width: 901px) {
  html[data-shell="canvas"] .lq-spine { top: 50%; bottom: auto; transform: translateY(-50%); }
  html[data-shell="canvas"] .lq-spine__dot::before {
    background: color-mix(in srgb, color-mix(in srgb, var(--lq-lilac) 55%, var(--lq-rose) 45%) 55%, transparent); }
  html[data-shell="canvas"] .lq-spine__dot:hover::before {
    background: color-mix(in srgb, var(--lq-lilac) 55%, var(--lq-rose) 45%); }
  html[data-shell="canvas"] .lq-spine__dot.is-on::before {
    background: linear-gradient(180deg, var(--lq-accent) 0%, var(--lq-lilac) 100%); }
}

/* THEME TOGGLE (per Anoop): natural sun and moon colors. The active sun glows a warm
   golden amber; the moon takes a cool silver-slate — instead of both rendering cobalt/grey. */
/* (radius + hover shadow now live with the base .kb-ins__c rule above, not layered here) */

/* ============================================================================
   COLOR SYSTEM v2 (per Anoop): calm, premium, enterprise-ready.
   Base: very light cool-grey canvas (blue tint removed), deep charcoal ink, ONE
   confident cobalt for interaction. Pale blue only for active rows / low-emphasis
   surfaces. The blue→lilac→rose gradient stays ONLY on period cards, milestones,
   success moments, and illustrations. Purple/lilac tinting is removed from the
   app shell (nav icons + spine return to functional cobalt/neutral). Roles:
   blue = interaction · green = completion · amber = attention · red = errors ·
   rose/lilac = rare brand accents. (Scoped :root:not([data-theme="dark"]) so the
   dark theme's own tokens are untouched.)
   ========================================================================== */
:root:not([data-theme="dark"]) {
  --lq-surface-app:    #F6F7F9; /* light cool-grey canvas — was pale blue */
  --lq-surface-subtle: #EFF1F6; /* low-emphasis fills — barely-cool neutral */
  --lq-border:         #E4E7EE; /* neutral hairlines */
  --lq-border-strong:  #C9CFDA;
  --lq-ink-primary:    #191C24; /* deep charcoal */
  --lq-ink-secondary:  #4D5464;
  /* --lq-accent stays #2A3AD6 (cobalt) and --lq-accent-tint stays the pale-blue
     active-row surface — those two carry ALL interaction color. */
}
/* Shell de-tinting: nav + rail icons return to their functional duotone (currentColor
   soft fill under cobalt/domain stroke) — no lilac in the shell. */
.lq-nav-item .nav-icon .lq-duo .a,
.lq-rail-chip .lq-duo .a { fill: currentColor; opacity: .22; }
[data-theme="dark"] .lq-nav-item .nav-icon .lq-duo .a,
[data-theme="dark"] .lq-rail-chip .lq-duo .a { fill: currentColor; opacity: .26; }
/* Spine markers: neutral dots, solid cobalt active line — interaction is blue, full stop. */
@media (min-width: 901px) {
  html[data-shell="canvas"] .lq-spine__dot::before { background: var(--lq-border-strong); }
  html[data-shell="canvas"] .lq-spine__dot:hover::before { background: var(--lq-ink-secondary); }
  html[data-shell="canvas"] .lq-spine__dot.is-on::before { background: var(--lq-accent); }
}
/* Gradient discipline: the brand gradient remains on .period-card, .networth-card (premium
   summary/milestone), .gs2-card--done (success moments), and .empty .ic / heroes
   (illustrations) — everything else stays in role colors. Copilot keeps a faint glow as a
   deliberate rare accent. */

/* WORKSPACE EDGE PROGRESS MARKER (per Anoop): the workspace's native scrollbar is hidden
   VISUALLY only (wheel/trackpad/keyboard/touch untouched); a 3px rounded gradient marker
   floats just inside the right edge with a small dot at its leading edge. Faded when idle,
   clear while scrolling, slightly wider on hover/drag. No track. Desktop only. */
@media (min-width: 901px) {
  .lq-content { scrollbar-width: none; }
  .lq-content::-webkit-scrollbar { display: none; }
  .lq-main { position: relative; }
  .lq-scrollmark { position: absolute; right: 6px; width: 3px; border-radius: 999px; z-index: 40;
    background: linear-gradient(180deg, var(--lq-accent) 0%, var(--lq-lilac) 55%, var(--lq-rose) 100%);
    /* Per Anoop (2026-08-15): lighter presence — idle .12 (was .18), scrolling .55 (was .8). */
    opacity: .12; transition: opacity .35s ease, width .15s ease; cursor: grab; touch-action: none; }
  .lq-scrollmark::before { content: ''; position: absolute; top: -2px; left: 50%;
    transform: translateX(-50%); width: 7px; height: 7px; border-radius: 999px;
    background: var(--lq-accent); }
  .lq-scrollmark.is-scrolling { opacity: .55; }
  .lq-scrollmark:hover, .lq-scrollmark.is-drag { opacity: .85; width: 6px; }
  .lq-scrollmark.is-drag { cursor: grabbing; }
}

/* SINGLE SCROLL INDICATOR (per Anoop): the old Canvas hover-scrollbar rules outranked the
   plain hide rule (html[data-shell="canvas"] scoping wins on specificity), so the grey bar
   sat BESIDE the gradient marker. Kill the native workspace scrollbar at equal-or-higher
   specificity in BOTH shells — the floating marker is the only right-edge indicator.
   Scrolling itself (wheel, trackpad, keyboard, touch) is untouched. */
@media (min-width: 901px) {
  .lq-content, html[data-shell="canvas"] .lq-content {
    scrollbar-width: none; scrollbar-color: transparent transparent; }
  .lq-content:hover, html[data-shell="canvas"] .lq-content:hover {
    scrollbar-color: transparent transparent; }
  .lq-content::-webkit-scrollbar, html[data-shell="canvas"] .lq-content::-webkit-scrollbar {
    display: none; width: 0; height: 0; }
  .lq-content::-webkit-scrollbar-thumb, html[data-shell="canvas"] .lq-content::-webkit-scrollbar-thumb {
    background: transparent; }
}

/* CANVAS SHELL v19 — BUGFIX (per Anoop): AI Copilot dock in Canvas behaves like the
   original (Classic) Payroll. Cause: Classic's shell grid has FOUR tracks (sidebar,
   main, dock) and the Canvas overrides only declared three (rail, sidebar, main), so
   the dock aside had no column and auto-wrapped onto a second row — the "weird
   reaction". Declare the full four-track grid for every Canvas state and pin the dock
   to column 4: opening Copilot now collapses the panel and docks the drawer on the
   right, exactly as in Classic. */
@media (min-width: 901px) {
  html[data-shell="canvas"] .lq-shell { grid-template-columns: 78px 264px 1fr 0px; }
  html[data-shell="canvas"] .lq-shell.nav-collapsed:not(.ai-open) { grid-template-columns: 78px 0px 1fr 0px; }
  html[data-shell="canvas"] .lq-shell.ai-open { grid-template-columns: 78px 264px 1fr var(--lq-ai-w, 400px);
    transition: grid-template-columns .225s cubic-bezier(.4, 0, .6, 1); }
  html[data-shell="canvas"] .lq-shell.ai-open.nav-collapsed { grid-template-columns: 78px 0px 1fr var(--lq-ai-w, 400px); }
  html[data-shell="canvas"] .lq-shell > .ai-dock { grid-column: 4; grid-row: 1; }

  /* ===================================================================================
     BLANK-SCREEN FIX (2026-08-19). Clicking the hamburger blanked the workspace.
     
     The canvas shell is a four-column grid — rail | nav panel | workspace | AI dock — and
     every child except the AI dock was AUTO-PLACED. Auto-placement counts only the children
     that are actually in flow, and collapsing the nav sets `.lq-sidebar { display: none }`,
     which removes it from the grid entirely. So the columns re-dealt:
     
        expanded:  rail -> 1 (78px)   sidebar -> 2 (264px)   .lq-main -> 3 (1fr)     ✅
        collapsed: rail -> 1 (78px)   [sidebar gone]         .lq-main -> 2 (0px)     ✅ blank
     
     The workspace was never hidden. It was placed in a zero-width column and dutifully
     rendered nothing, which is why the topbar, the search and the whole page vanished
     together while the rail stayed — the rail was the only child still in the column it
     was designed for. The AI dock escaped because line 1229 above pins it explicitly.
     
     THE FIX IS TO STOP RELYING ON AUTO-PLACEMENT. Every child gets its column by name, so
     hiding any one of them cannot re-deal the others. This is the correct shape for a grid
     whose children can be conditionally hidden, and it costs nothing when they are not. */
  html[data-shell="canvas"] .lq-shell > .lq-rail    { grid-column: 1; grid-row: 1; }
  html[data-shell="canvas"] .lq-shell > .lq-sidebar { grid-column: 2; grid-row: 1; }
  html[data-shell="canvas"] .lq-shell > .lq-main    { grid-column: 3; grid-row: 1; min-width: 0; }
}

/* SCROLL MARKER REFINEMENT (per Anoop): no leading-edge dot, and the marker is compact
   (JS clamps its length to 36–120px) rather than a near-full-height line. */
@media (min-width: 901px) {
  .lq-scrollmark::before { display: none; }
}

/* ANOMALY QUEUE — BULK TRIAGE (per Anoop): row checkboxes + select-all bar. */
.aq-bulk { display: flex; align-items: center; gap: 12px; margin: 2px 0 10px; flex-wrap: wrap; }
.aq-bulk__all { display: inline-flex; align-items: center; gap: 8px; font-size: 13px;
  color: var(--lq-ink-secondary); cursor: pointer; user-select: none; }
.aq-bulk__all input, input.aq-ck { accent-color: var(--lq-accent); width: 15px; height: 15px;
  cursor: pointer; flex: none; margin: 0; }
.aq-row input.aq-ck { margin-right: 10px; }
.aq-ck--spacer { display: inline-block; width: 15px; margin-right: 10px; flex: none; }

/* BRAND ACCENT REFINEMENT (per Anoop): remove the gradient top-edge lines from the summary
   and payroll-period cards. The gradient stays only in illustrations, success moments, and
   the Copilot glow. */
.networth-card::before, .period-card::before { display: none; }

/* PAYROLL INTELLIGENCE (per Anoop): calm white executive report. Indigo only for actions,
   green/amber/red for states, categorical colors confined to the chart bars. */
.pi-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; margin: 0 0 16px;
  background: var(--lq-surface-card); border: 1px solid var(--lq-border); border-radius: 14px; padding: 12px 16px; }
.pi-co { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600;
  color: var(--lq-ink-primary); padding: 6px 10px 6px 8px; border-radius: 10px; background: var(--lq-surface-subtle); }
.pi-co svg { width: 15px; height: 15px; }
.pi-f { display: flex; flex-direction: column; gap: 4px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--lq-ink-secondary); }
.pi-f select { font: 500 13px var(--lq-font-ui); color: var(--lq-ink-primary); padding: 7px 10px;
  border: 1px solid var(--lq-border); border-radius: 9px; background: var(--lq-surface-card); min-width: 130px; }
.pi-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.pi-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 var(--space-4, 16px) var(--space-4, 16px); }
@media (max-width: 1100px) { .pi-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pi-kpi { background: var(--lq-surface-card); border: 1px solid var(--lq-border); border-radius: 14px; padding: 14px 16px; }
.pi-kpi__l { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--lq-ink-secondary); }
.pi-kpi__v { font-size: 21px; font-weight: 700; color: var(--lq-ink-primary); margin: 5px 0 2px; font-variant-numeric: tabular-nums; }
.pi-kpi__s { font-size: 12px; color: var(--lq-ink-secondary); }
.pi-vs { margin: 8px 2px 0; }
.pi-delta { font-size: 12.5px; font-weight: 600; color: var(--lq-ink-secondary); }
.pi-delta.up { color: var(--lq-warning-text); }   /* cost rose — attention, not error */
.pi-delta.down { color: var(--lq-success-text); } /* cost fell — completion green */
.pi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
@media (max-width: 1100px) { .pi-grid { grid-template-columns: 1fr; } }
.pi-card { padding-bottom: var(--space-3, 12px); }
.pi-bar { display: flex; align-items: center; gap: 10px; padding: 5px var(--space-4, 16px); }
.pi-bar__l { flex: 0 0 130px; font-size: 12.5px; color: var(--lq-ink-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-bar__track { flex: 1 1 auto; height: 10px; border-radius: 999px; background: var(--lq-surface-subtle); overflow: hidden; }
.pi-bar__fill { display: block; height: 100%; border-radius: 999px; }
.pi-bar__v { flex: 0 0 auto; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--lq-ink-primary); }
.pi-bar__v em { font-style: normal; color: var(--lq-ink-secondary); margin-left: 6px; }
.pi-total td { border-top: 2px solid var(--lq-border-strong); }
.pi-ready { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px var(--space-4, 16px) 4px; font-size: 12.5px; }
.lq-linkbtn { border: none; background: none; padding: 0; cursor: pointer; }
.pi-exc { display: flex; align-items: flex-end; gap: 14px; padding: 10px var(--space-4, 16px) 6px; min-height: 110px; }
.pi-exc__col { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pi-exc__bar { width: 26px; border-radius: 6px 6px 2px 2px; }
.pi-exc__x { font-size: 10.5px; color: var(--lq-ink-secondary); }
.pi-exc__n { font-size: 11px; font-weight: 600; color: var(--lq-ink-primary); }
.pi-glance { margin-top: 18px; background: var(--lq-surface-card); border: 1px solid var(--lq-border); border-radius: 16px; padding: 18px 20px; }
.pi-glance__t { font-size: 15px; font-weight: 700; color: var(--lq-ink-primary); margin-bottom: 12px; }
.pi-glance__g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .pi-glance__g { grid-template-columns: 1fr; } }
.pi-val { border: 1px solid var(--lq-border); border-radius: 12px; padding: 12px 14px; background: color-mix(in srgb, var(--lq-surface-card) 60%, var(--lq-surface-app)); }
.pi-val__t { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; color: var(--lq-ink-primary); margin-bottom: 5px; }
.pi-val__t svg { width: 15px; height: 15px; color: inherit; }
.pi-val__d { font-size: 12.5px; line-height: 1.55; color: var(--lq-ink-secondary); }

/* COLORED BREADCRUMB (per Anoop, Payceworks-inspired): Home › Module › Page on every screen.
   Home + module = calm indigo links with small outline icons; chevrons = light grey; the
   CURRENT page = deep charcoal. Refined and quiet — never louder than the page title.
   Legacy .crumb styles are superseded by .lq-crumb (crumbTo now renders the new pattern). */
.lq-crumb { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; font-size: 12.5px;
  font-weight: 550; line-height: 1; flex-wrap: wrap; }
.lq-crumb__link { display: inline-flex; align-items: center; gap: 5px; color: var(--lq-accent);
  cursor: pointer; text-decoration: none; border-radius: 6px; padding: 2px 3px; }
.lq-crumb__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.lq-crumb__link svg { width: 13px; height: 13px; opacity: .9; }
.lq-crumb__chev { width: 12px; height: 12px; color: var(--lq-border-strong); flex: none; }
.lq-crumb__here { color: var(--lq-ink-primary); font-weight: 600; padding: 2px 0; }
[data-theme="dark"] .lq-crumb__chev { color: var(--lq-ink-muted, #6b7280); }

/* COMPACT PAGE HEADERS (per Anoop, app-wide): titles are workspace labels, not hero
   headings. One consistent hierarchy on every page — crumb, medium title, one short
   sentence, actions right. Applies to ALL header variants (.page-head, .phead, .s2head,
   dashboards) so no page keeps an oversized title. */
.page-head h1, .phead h1, .lq-dash .page-head h1 { font-size: 19px; line-height: 1.3; }
.s2head h2 { font-size: 18px; }
.page-head p, .phead p { font-size: 13px; line-height: 1.5; max-width: 76ch; margin-top: 3px; }
.page-head { margin-bottom: 18px; align-items: center; }
.phead { margin-bottom: 16px; }
.lq-dash .page-head { margin-bottom: 20px; }
/* "About this page" — the optional panel that now holds the long guidance. */
.pg-help-btn { display: inline-flex; align-items: center; justify-content: center; width: 18px;
  height: 18px; padding: 0; border: none; background: none; color: var(--lq-ink-secondary);
  cursor: pointer; vertical-align: -4px; border-radius: 50%; }
.pg-help-btn:hover, .pg-help-btn[aria-expanded="true"] { color: var(--lq-accent); }
.pg-help-btn svg { width: 15px; height: 15px; }
.pg-help { font-size: 13px; line-height: 1.6; color: var(--lq-ink-secondary);
  background: var(--lq-surface-subtle); border: 1px solid var(--lq-border); border-radius: 12px;
  padding: 12px 16px; margin: -8px 0 18px; max-width: 860px; }

/* GLOBAL HEADER RULE v2 (per Anoop): compact, operational headers everywhere.
   Crumb 14px one line · title 20px semibold (≤22 desktop cap) · no permanent
   descriptions (the shared component enforces it) · optional "How this works"
   sits with the actions · working content starts higher. */
.lq-crumb { font-size: 14px; margin: 0 0 10px; }
.lq-crumb__link svg { width: 14px; height: 14px; }
.lq-crumb__chev { width: 13px; height: 13px; }
.page-head h1, .phead h1, .lq-dash .page-head h1 { font-size: 20px; font-weight: 600; line-height: 1.25; }
.page-head p, .phead p { margin-top: 2px; }
.pg-tagline { font-size: 13px; color: var(--lq-ink-secondary); }
.page-head.pg-compact { margin-bottom: 14px; }
.phead { margin-bottom: 12px; }
.lq-dash .page-head { margin-bottom: 16px; }
.pg-how { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--lq-font-ui);
  color: var(--lq-ink-secondary); background: none; border: 1px solid var(--lq-border);
  border-radius: 999px; padding: 5px 12px; cursor: pointer; white-space: nowrap; }
.pg-how:hover, .pg-how[aria-expanded="true"] { color: var(--lq-accent); border-color: var(--lq-accent); }
.pg-how svg { width: 13px; height: 13px; }
/* The old inline help "?" from v1 is superseded (selector kept harmless if cached HTML lingers). */
.pg-help { margin-top: -4px; }

/* ============================================================================
   GLOBAL UX REFINEMENT (per Anoop): the WORKSPACE is the canvas.
   1) Remove the oversized rounded white parent container around each page —
      cards exist only for meaningful grouped content, no card-in-card-in-card.
   2) Decision strip: the compact status layer under each major page header.
   ========================================================================== */
@media (min-width: 901px) {
  html[data-shell="canvas"] .lq-content { background: var(--lq-surface-app); border: none;
    box-shadow: none; border-radius: 0; margin: 0; }
}
.lq-content { background: var(--lq-surface-app); }
/* Decision strip — one hairline surface, dividers between items, tones on values only. */
.dstrip { display: flex; align-items: stretch; flex-wrap: wrap; background: var(--lq-surface-card);
  border: 1px solid var(--lq-border); border-radius: 14px; margin: 0 0 16px; overflow: hidden; }
.dstrip__i { flex: 1 1 auto; min-width: 130px; padding: 10px 18px; display: flex;
  flex-direction: column; gap: 1px; }
.dstrip__i + .dstrip__i { border-left: 1px solid var(--lq-border); }
.dstrip__v { font-size: 15px; font-weight: 700; color: var(--lq-ink-primary);
  font-variant-numeric: tabular-nums; line-height: 1.3; }
.dstrip__k { font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em;
  color: var(--lq-ink-secondary); }
.dstrip__i--ok .dstrip__v { color: var(--lq-success, #1E7A5C); }
.dstrip__i--warn .dstrip__v { color: var(--lq-warning, #B98A2E); }
.dstrip__i--info .dstrip__v { color: var(--lq-accent); }
.dstrip__i.is-click { cursor: pointer; }
.dstrip__i.is-click:hover { background: var(--lq-surface-subtle); }
@media (max-width: 720px) { .dstrip__i { min-width: 46%; } .dstrip__i + .dstrip__i { border-left: none; border-top: 1px solid var(--lq-border); } }

/* CANVAS SHELL v21 (per Anoop): RESTORE the Gmail-style curved workspace canvas as part of
   the permanent shell. One unified light surface with large rounded corners, starting below
   the top header and right of the navigation; subtle border + soft shadow only. This is the
   SHELL's curve — pages inside stay flat (v20's card-noise reduction stands): cards appear
   only for meaningful modules, never as a second page-level wrapper. */
@media (min-width: 901px) {
  html[data-shell="canvas"] .lq-content {
    background: color-mix(in srgb, var(--lq-surface-card) 72%, var(--lq-surface-app));
    border: 1px solid color-mix(in srgb, var(--lq-border) 55%, transparent);
    border-radius: 28px;
    margin: 6px 16px 16px 12px;
    box-shadow: 0 12px 36px -20px rgba(26, 29, 38, .14);
  }
  /* The scroll marker hugs the curved edge, not the viewport. */
  html[data-shell="canvas"] .lq-scrollmark { right: 22px; }
}
[data-theme="dark"] html[data-shell="canvas"] .lq-content,
html[data-shell="canvas"][data-theme="dark"] .lq-content {
  background: color-mix(in srgb, var(--lq-surface-card) 60%, var(--lq-surface-app));
  box-shadow: none;
}

/* ============================================================================
   SURFACE SYSTEM v3 (per Anoop): three visible layers, quiet separation.
     L1 app background / chrome ........ #F1F4F8  (soft cool grey)
     L2 curved workspace canvas ........ #F8FAFD  (very light blue-grey)
     L3 cards / tables / modules ....... #FFFFFF  with 1px #E0E6EF border
   Elevated modules carry ONLY the whisper shadow 0 8px 24px rgba(27,39,64,.04).
   Tinted surfaces remain reserved for semantic states (selected/complete/review/
   risk/rare insight) — no decorative color plates. Light theme only; dark theme
   keeps its own tokens.
   ========================================================================== */
:root:not([data-theme="dark"]) {
  --lq-surface-app:    #F1F4F8; /* L1 — chrome, nav backdrop */
  --lq-surface-card:   #FFFFFF; /* L3 — modules */
  --lq-surface-subtle: #EFF3F9; /* selected rows / low-emphasis fills */
  --lq-border:         #E0E6EF; /* refined visible hairline */
  --lq-border-strong:  #C7D0DE;
}
@media (min-width: 901px) {
  html[data-shell="canvas"]:not([data-theme="dark"]) .lq-content {
    background: #F8FAFD;               /* L2 — the curve reads against L1 */
    border-color: #E0E6EF;
  }
}
/* L3 elevation: cards and operational modules separate from the canvas with the
   defined border + one soft shadow. (Banners, chips and notes stay flat.) */
.card, .lq-card, .dstrip, .chart, .pi-kpi, .mock,
.co-kpi, .networth-card, .period-card {
  background: var(--lq-surface-card);
  border-color: var(--lq-border);
  box-shadow: 0 8px 24px rgba(27, 39, 64, .04);
}
[data-theme="dark"] .card, [data-theme="dark"] .lq-card, [data-theme="dark"] .dstrip,
[data-theme="dark"] .chart, [data-theme="dark"] .pi-kpi,
[data-theme="dark"] .co-kpi, [data-theme="dark"] .networth-card, [data-theme="dark"] .period-card {
  background: var(--lq-surface-card); border-color: var(--lq-border); box-shadow: none;
}

/* ============================================================================
   COLOR BALANCE v3 (per Anoop): blue leads, pink and aqua soften.
     Primary blue  #5576E8  — actions, active nav, active stages, links, focus
     Neutral icons #8791A5  — ALL inactive nav + secondary icons
     Dusty pink    #D98FA4 (+#FCEEF2) — payroll-period, pay-date, insight moments
     Aqua          #49B7C1 (+#E8F7F8) — Intelligence, Copilot, info elements
   Green stays validated · amber stays review · red stays risk. Light theme only.
   ========================================================================== */
:root:not([data-theme="dark"]) {
  --lq-accent:        #5576E8;
  --lq-accent-hover:  #4462D6;
  --lq-accent-active: #3752C0;
  --lq-accent-tint:   #EBF0FD;
  --lq-info:          #49B7C1;
  --lq-info-tint:     #E8F7F8;
  --lq-rose:          #D98FA4;
  --lq-rose-soft:     #FCEEF2;
  --lq-lilac:         #8CA0EE; /* gradient midpoint follows the softer blue */
}
/* Inactive navigation + rail icons: neutral grey — blue is reserved for the ACTIVE item. */
.lq-nav-item:not(.is-active) .nav-icon { color: inherit; }
.lq-nav-item:not(.is-active):hover .nav-icon { color: var(--lq-ink-primary); }
@media (min-width: 901px) {
  html[data-shell="canvas"] .lq-rail-item:not(.is-on) { color: inherit; opacity: 1; }
  html[data-shell="canvas"] .lq-rail-item:not(.is-on):hover { color: var(--lq-ink-primary); opacity: 1; }
}
/* Payroll-period moments: dusty pink on a pale pink surface (decision-strip 'period' tone). */
/* DEAD PINK RE-DECLARATIONS REMOVED (2026-08-18). .dstrip__i--period had its background set
   three times in this file (#FCEEF2, then #FCECF1, then var(--lq-accent-tint)); only the last
   ever applied. The two hardcoded hues also predated approved page 4, so anyone reading the
   sheet top-down would have concluded the period chip was pink. */
/* AI Copilot + insight surfaces: the ambient glow turns aqua (information family). */
.cpl-panel { box-shadow: 0 0 0 1px rgba(73, 183, 193, .16), 0 18px 48px rgba(73, 183, 193, .13),
  0 6px 24px rgba(73, 183, 193, .08); }

/* ============================================================================
   COLOR SYSTEM v4 — RESET (per Anoop). One brand pair, 80% neutral interface.
     Azure    #2F7DE1 (+#EAF3FF) — actions, active nav, links, active stage, focus
     Rose     #D96F91 (+#FCECF1) — payroll-period, pay-date insight, rare highlights
     Aqua     #42B9C4 — Payroll Intelligence + AI Copilot ONLY
     Success  #1B9A72 · Warning #D9952B · Risk #D74F61
     Ink      #202938 / #657286 · App #F5F7FB · Cards #FFFFFF
   All purple/lilac removed. No multi-color gradients — only a thin blue→rose
   detail on the payroll-period card. Supersedes every earlier palette block.
   ========================================================================== */
:root:not([data-theme="dark"]) {
  --lq-accent:        #2F7DE1;
  --lq-accent-hover:  #2668C2;
  --lq-accent-active: #1F57A6;
  --lq-accent-tint:   #EAF3FF;
  --lq-rose:          #D96F91;
  --lq-rose-soft:     #FCECF1;
  --lq-info:          #42B9C4;
  --lq-info-tint:     #E8F7F8;
  --lq-success:       #1B9A72;
  --lq-success-tint:  #E4F4EE;
  --lq-warning:       #D9952B;
  --lq-warning-tint:  #FAF0DC;
  --lq-danger:        #D74F61;
  --lq-danger-tint:   #FBE9EC;
  --lq-ink-primary:   #202938;
  --lq-ink-secondary: #657286;
  --lq-surface-app:   #F5F7FB;
  --lq-surface-card:  #FFFFFF;
  --lq-surface-subtle:#EEF2F8;
  /* Lilac is RETIRED: any residual var reference resolves to the azure bridge, so the old
     three-stop gradients collapse into clean blue→rose. */
  --lq-lilac:         #6E8FE4;
  --lq-grad-brand:    linear-gradient(120deg, #2F7DE1 0%, #D96F91 100%);
  --lq-grad-wash:     linear-gradient(120deg, rgba(47,125,225,.07) 0%, rgba(217,111,145,.08) 100%);
  /* Per-domain nav accents unify on azure (active item only — inactive stays grey). */
  --lq-nav-payroll: #2F7DE1;  --lq-nav-payroll-tint: #EAF3FF;
  --lq-nav-inputs: #2F7DE1;   --lq-nav-inputs-tint: #EAF3FF;
  --lq-nav-compliance: #2F7DE1; --lq-nav-compliance-tint: #EAF3FF;
  --lq-nav-configuration: #2F7DE1; --lq-nav-configuration-tint: #EAF3FF;
  --lq-nav-system: #2F7DE1;   --lq-nav-system-tint: #EAF3FF;
  /* Run/status colors align to the reset (meanings unchanged). */
  --lq-status-computed: #2F7DE1; --lq-status-computed-tint: #EAF3FF;
  --lq-status-approved: #1B9A72; --lq-status-approved-tint: #E4F4EE;
  --lq-status-blocked:  #D9952B; --lq-status-blocked-tint:  #FAF0DC;
  --lq-status-rejected: #D74F61; --lq-status-rejected-tint: #FBE9EC;
}
@media (min-width: 901px) {
  html[data-shell="canvas"]:not([data-theme="dark"]) .lq-content { background: #F9FBFE; border-color: #E0E6EF; }
}
/* Heroes lose their lavender: pale blue → pale rose, flat and quiet. */
.kb-hero { background: linear-gradient(105deg, #EAF3FF 0%, #F8F3F6 60%, #FCECF1 100%); border-color: #E7E9F2; }
/* GRADIENTS REMOVED (2026-08-18, found by screenshotting the rendered page).
   .asr-hero had its background set THREE times in this one file: the flat surface at the top of
   the sheet (the approved treatment), then a blue-to-pink gradient, then a lavender-to-sand one.
   The last declaration wins, so removing the gradient at the top changed nothing and the hero
   kept painting a gradient no approved canvas contains. This is the same failure mode as an
   unlinked stylesheet — a fix applied where it cannot win. Both light gradients are gone; the
   dark variant follows the same flat treatment so the two themes agree. */
/* Scroll marker: clean two-stop blue → rose (no lilac midpoint). */
@media (min-width: 901px) {
  .lq-scrollmark { background: linear-gradient(180deg, #2F7DE1 0%, #D96F91 100%); }
}
/* The sanctioned blue→rose detail: a thin accent line on the payroll-period card only. */
.period-card::before { display: block; height: 2px; background: linear-gradient(90deg, #2F7DE1 0%, #D96F91 100%); opacity: .55; }
.networth-card::before { display: none; }
/* Decision-strip period tone follows the reset rose. */
/* Aqua stays confined: Copilot glow (set previously) + info semantics via tokens. */

/* ============================================================================
   COLOR SYSTEM v5 — MODULE COLOR LANGUAGE (per Anoop).
   Neutral base stays (cool-grey app, white cards, charcoal ink). Color now maps
   to MODULES, applied selectively — active nav, icon tiles, chips, chart data,
   and one controlled azure→rose→aqua gradient on period/insight cards:
     Payroll #2F80ED · Time #22B8A8 · Compliance #29A36A · Insights #E56F91
     Knowledge #E4AD3B · Copilot #47BFD0 · Risk #E05263
   ========================================================================== */
:root {
  --lq-accent:        #2F80ED;   /* azure — primary actions, links, focus */
  --lq-accent-hover:  #2569C6;
  --lq-accent-active: #1D55A5;
  --lq-accent-tint:   #EAF3FF;
  --lq-danger:        #E05263;   /* coral risk */
  --lq-danger-tint:   #FCEBED;
  --lq-success:       #29A36A;   /* emerald complete */
  --lq-success-tint:  #E6F5EC;
  --lq-info:          #47BFD0;   /* aqua information */
  --lq-info-tint:     #E9F8FA;
  --lq-rose:          #E56F91;
  --lq-rose-soft:     #FCECF1;
  /* Module nav accents (one per major area; inactive icons stay neutral grey). */
  --lq-nav-payroll: #2F80ED;      --lq-nav-payroll-tint: #EAF3FF;
  --lq-nav-inputs: #22B8A8;       --lq-nav-inputs-tint: #E5F7F5;
  --lq-nav-compliance: #29A36A;   --lq-nav-compliance-tint: #E6F5EC;
  --lq-nav-insights: #E56F91;     --lq-nav-insights-tint: #FCECF1;
  --lq-nav-knowledge: #E4AD3B;    --lq-nav-knowledge-tint: #FBF3DF;
  --lq-nav-assistant: #47BFD0;    --lq-nav-assistant-tint: #E9F8FA;
  --lq-nav-configuration: #2F80ED; --lq-nav-configuration-tint: #EAF3FF;
  --lq-nav-system: #657286;       --lq-nav-system-tint: #EEF2F8;
  --lq-status-computed: #2F80ED;  --lq-status-computed-tint: #EAF3FF;
  --lq-status-approved: #29A36A;  --lq-status-approved-tint: #E6F5EC;
  --lq-status-blocked:  #D9952B;  --lq-status-blocked-tint:  #FAF0DC;
  --lq-status-rejected: #E05263;  --lq-status-rejected-tint: #FCEBED;
}
/* Rail: each module's ACTIVE chip carries its own color; inactive stays grey. */
@media (min-width: 901px) {
  html[data-shell="canvas"] .lq-rail-item--workspace.is-on    { color: inherit; }
  html[data-shell="canvas"] .lq-rail-item--timekeeping.is-on  { color: inherit; }
  html[data-shell="canvas"] .lq-rail-item--compliance.is-on   { color: inherit; }
  html[data-shell="canvas"] .lq-rail-item--gl_export.is-on    { color: inherit; }
  html[data-shell="canvas"] .lq-rail-item--settings.is-on     { color: inherit; }
}
/* The controlled tri-color gradient: payroll-period / pay-day / insight cards ONLY. */
.period-card::before { display: block; height: 2.5px;
  background: linear-gradient(90deg, #2F80ED 0%, #E56F91 55%, #47BFD0 100%); opacity: .8; }
:root:not([data-theme="dark"]) {
  --lq-grad-brand: linear-gradient(120deg, #2F80ED 0%, #E56F91 55%, #47BFD0 100%);
  --lq-grad-wash:  linear-gradient(120deg, rgba(47,128,237,.07) 0%, rgba(229,111,145,.07) 55%, rgba(71,191,208,.08) 100%);
}
@media (min-width: 901px) {
  .lq-scrollmark { background: linear-gradient(180deg, #2F80ED 0%, #E56F91 60%, #47BFD0 100%); }
}
/* Copilot glow aligns to its aqua. */
.cpl-panel { box-shadow: 0 0 0 1px rgba(71,191,208,.18), 0 18px 48px rgba(71,191,208,.14), 0 6px 24px rgba(71,191,208,.09); }
/* Compliance-insight tag chips re-tune to the module palette. */

/* ============================================================================
   COLOR SYSTEM v6 — STRUCTURED MODULE COLOR (per Anoop). Corrected hexes and a
   DISCIPLINED active treatment: when a module is active, its color appears ONLY
   on the icon, a thin left accent bar, and a very pale selected background.
   Labels stay dark ink. Everything inactive stays neutral grey.
     Payroll #2F80ED · Time #22B8C7 · Compliance #24A86B · Insights #E8638B
     Knowledge #E9A93B · Copilot #61B7F2 · Errors #E05263
   ========================================================================== */
:root {
  --lq-nav-inputs: #22B8C7;      --lq-nav-inputs-tint: #E6F7F9;
  --lq-nav-compliance: #24A86B;  --lq-nav-compliance-tint: #E6F5EE;
  --lq-nav-insights: #E8638B;    --lq-nav-insights-tint: #FDEDF2;
  --lq-nav-knowledge: #E9A93B;   --lq-nav-knowledge-tint: #FBF3DF;
  --lq-nav-assistant: #61B7F2;   --lq-nav-assistant-tint: #EBF6FE;
  --lq-success: #24A86B;         --lq-success-tint: #E6F5EE;
  --lq-status-approved: #24A86B; --lq-status-approved-tint: #E6F5EE;
}
/* ACTIVE nav item: colored icon + thin left bar + pale tint. Label = dark ink. */
.lq-nav-item.is-active { color: var(--lq-ink-primary); background: var(--lq-surface-subtle);
  border-left: 0; }
.lq-nav-item.is-active .nav-icon { color: inherit; }
.lq-nav-item.is-active .nav-text { color: var(--lq-ink-primary); }
/* Rail: active chip icon takes the module color; the label stays ink. */
@media (min-width: 901px) {
  html[data-shell="canvas"] .lq-rail-item.is-on { color: var(--lq-ink-primary); }
  /* 2026-08-17: these gave each rail module its own hue, so an icon read blue/teal/green/pink
     while the label beneath it sat in ink — the icon never matched its own label. The chip now
     inherits the rail item's colour, which is already ink when active and grey when not. */
  html[data-shell="canvas"] .lq-rail-item.is-on .lq-rail-chip { color: inherit; }
}
/* Copilot: sky blue identity (glow + info accents on its surfaces). */
.cpl-panel { box-shadow: 0 0 0 1px rgba(97,183,242,.20), 0 18px 48px rgba(97,183,242,.15), 0 6px 24px rgba(97,183,242,.09); }
/* Gradient + marker follow the corrected trio. */
.period-card::before { background: var(--lq-grad-brand); }
:root:not([data-theme="dark"]) {
  --lq-grad-brand: linear-gradient(120deg, #1e36c9 0%, #41529f 55%, #7C8CF2 100%);
  --lq-grad-wash:  linear-gradient(120deg, rgba(30,54,201,.07) 0%, rgba(65,82,159,.07) 55%, rgba(124,140,242,.08) 100%);
}
@media (min-width: 901px) {
  .lq-scrollmark { background: linear-gradient(180deg, #2F80ED 0%, #E8638B 60%, #61B7F2 100%); }
}

/* ============================================================================
   DUOTONE ICON LANGUAGE v7 (per Anoop): restore two-color icon warmth.
   Every important icon = strong primary stroke + softer secondary fill.
   Inactive = SAME duotone, dimmed (opacity + desaturation) — never flat grey.
   Active = full duotone. Labels stay neutral ink.
   ========================================================================== */
:root {
  --lq-nav-payroll-fill: #C9D8FA;      /* azure + pale periwinkle */
  --lq-nav-inputs-fill: #BFEDF2;       /* teal + pale aqua */
  --lq-nav-compliance-fill: #C4EBD8;   /* emerald + pale mint */
  --lq-nav-insights-fill: #F9D2DE;     /* coral pink + pale rose */
  --lq-nav-knowledge-fill: #F7E3B6;    /* gold + pale gold */
  --lq-nav-assistant-fill: #A9E2F2;    /* azure + aqua */
  --lq-nav-configuration-fill: #C9D8FA;
  --lq-nav-system-fill: #D6DCE6;
}
/* Navigation panel: duotone from the item's module vars, both states. */
.lq-nav-item .nav-icon { color: inherit; }
.lq-nav-item .nav-icon .lq-duo .b { stroke: inherit; }
.lq-nav-item .nav-icon .lq-duo .bf { fill: inherit; }
.lq-nav-item .nav-icon .lq-duo .a { fill: inherit; opacity: .9; }
.lq-nav-item:not(.is-active) .nav-icon { color: inherit; opacity: .62; filter: saturate(.75); }
.lq-nav-item:not(.is-active):hover .nav-icon { opacity: .95; filter: none; }
.lq-nav-item:not(.is-active) .nav-text { color: var(--lq-ink-secondary); }
/* Two-hue exceptions inside the Payroll family. */
.lq-nav-item--run, .lq-nav-item--payslips { --nav-fill: #F2C9D7; }        /* azure + dusty rose */
.lq-nav-item--anomaly_queue { --nav-color: #E05263; --nav-fill: #F8CDD3; } /* coral + pale red */
/* Rail chips: full duotone per module, dimmed (not grey) when inactive. */
@media (min-width: 901px) {
  html[data-shell="canvas"] .lq-rail-item { opacity: 1; }
  html[data-shell="canvas"] .lq-rail-item .lq-rail-chip .lq-duo .a { opacity: .9; }
  html[data-shell="canvas"] .lq-rail-item--workspace .lq-rail-chip   { color: inherit; } 
  html[data-shell="canvas"] .lq-rail-item--workspace .lq-rail-chip .lq-duo .a   { fill: currentColor; }
  html[data-shell="canvas"] .lq-rail-item--timekeeping .lq-rail-chip { color: inherit; }
  html[data-shell="canvas"] .lq-rail-item--timekeeping .lq-rail-chip .lq-duo .a { fill: currentColor; }
  html[data-shell="canvas"] .lq-rail-item--compliance .lq-rail-chip  { color: inherit; }
  html[data-shell="canvas"] .lq-rail-item--compliance .lq-rail-chip .lq-duo .a  { fill: currentColor; }
  html[data-shell="canvas"] .lq-rail-item--gl_export .lq-rail-chip   { color: inherit; }
  html[data-shell="canvas"] .lq-rail-item--gl_export .lq-rail-chip .lq-duo .a   { fill: currentColor; }
  html[data-shell="canvas"] .lq-rail-item--settings .lq-rail-chip    { color: inherit; }
  html[data-shell="canvas"] .lq-rail-item--settings .lq-rail-chip .lq-duo .a    { fill: currentColor; }
  html[data-shell="canvas"] .lq-rail-item:not(.is-on) { color: var(--lq-ink-secondary); }
  html[data-shell="canvas"] .lq-rail-item:not(.is-on) .lq-rail-chip { opacity: .55; filter: saturate(.8); }
  html[data-shell="canvas"] .lq-rail-item:not(.is-on):hover .lq-rail-chip { opacity: .9; filter: none; }
  html[data-shell="canvas"] .lq-rail-item .lq-rail-lbl { color: var(--lq-ink-secondary); }
  html[data-shell="canvas"] .lq-rail-item.is-on .lq-rail-lbl { color: var(--lq-ink-primary); font-weight: 700; }
}
/* Empty states: duotone azure on its pale wash (never grey). */
.empty .ic { color: inherit; background: var(--lq-grad-wash); }

/* ============================================================================
   ICON SYSTEM v8 — SINGLE BLUE DUOTONE (per Anoop, definitive).
   ALL product icons: stroke #2F80ED + secondary fill #BFDFFF. Selected surface
   #EAF3FF with the blue left bar. Labels neutral slate; active label ink.
   Module colors are REMOVED from icons; semantic green/amber/red remain only
   where they carry meaning. Supersedes the v7 multicolor icon rules.
   ========================================================================== */
:root {
  --lq-nav-payroll: #2F80ED;      --lq-nav-payroll-tint: #EAF3FF;      --lq-nav-payroll-fill: #BFDFFF;
  --lq-nav-inputs: #2F80ED;       --lq-nav-inputs-tint: #EAF3FF;       --lq-nav-inputs-fill: #BFDFFF;
  --lq-nav-compliance: #2F80ED;   --lq-nav-compliance-tint: #EAF3FF;   --lq-nav-compliance-fill: #BFDFFF;
  --lq-nav-insights: #2F80ED;     --lq-nav-insights-tint: #EAF3FF;     --lq-nav-insights-fill: #BFDFFF;
  --lq-nav-knowledge: #2F80ED;    --lq-nav-knowledge-tint: #EAF3FF;    --lq-nav-knowledge-fill: #BFDFFF;
  --lq-nav-assistant: #2F80ED;    --lq-nav-assistant-tint: #EAF3FF;    --lq-nav-assistant-fill: #BFDFFF;
  --lq-nav-configuration: #2F80ED;--lq-nav-configuration-tint: #EAF3FF;--lq-nav-configuration-fill: #BFDFFF;
  --lq-nav-system: #2F80ED;       --lq-nav-system-tint: #EAF3FF;       --lq-nav-system-fill: #BFDFFF;
}
/* v7's two-hue exceptions collapse back to the blue pair. */
.lq-nav-item--run, .lq-nav-item--payslips { --nav-fill: #BFDFFF; }
.lq-nav-item--anomaly_queue { --nav-color: #2F80ED; --nav-fill: #BFDFFF; }
/* Rail: every chip is the same blue duotone (equal-specificity overrides, later wins). */
@media (min-width: 901px) {
  html[data-shell="canvas"] .lq-rail-item .lq-rail-chip { color: inherit; }
  html[data-shell="canvas"] .lq-rail-item .lq-rail-chip .lq-duo .a { fill: currentColor; opacity: 1; }
  html[data-shell="canvas"] .lq-rail-item .lq-rail-chip .lq-duo .b { stroke: #2F80ED; }
}
/* Copilot glow returns to the product blue. */
.cpl-panel { box-shadow: 0 0 0 1px rgba(47,128,237,.16), 0 18px 48px rgba(47,128,237,.13), 0 6px 24px rgba(47,128,237,.08); }
/* Empty-state icon chip: blue duotone on the pale selected blue. */
.empty .ic { color: inherit; background: #EAF3FF; border-color: transparent; }

/* ============================================================================
   COLOR RESTORE — ORIGINAL COBALT (per Anoop, definitive base).
   Reverts every palette-experiment layer above (v2–v8: neutrals, azure, rose,
   aqua, module colors, blue/light-blue icons) back to the ORIGINAL LaQuest
   system running in Production: cobalt #2A3AD6 on the pale-blue canvas, cobalt
   duotone icons, original status colors. Loads last, so it wins over all of
   them. Something new gets added ON this base later — deliberately.
   ========================================================================== */
:root:not([data-theme="dark"]) {
  /* APPROVED PAGE 4 (2026-08-17). This block previously re-stated the pre-approval cobalt and,
     because it loads LAST with a higher-specificity selector than :root, it silently overrode
     lq-tokens.css — so a token edit there had no effect on the light theme, which is the theme
     the product runs in. The values below are now the approved swatch. It is still the cobalt
     system Anoop asked for; #1e36c9 is that cobalt at the approved depth. */
  --lq-accent:        #1e36c9;
  --lq-accent-hover:  #1a2fb0;
  --lq-accent-active: #16279a;
  --lq-accent-tint:   #e9ecfb;
  --lq-accent-light:  #41529f;   --lq-accent-light-tint: #c9d5f7;
  --lq-info:          #1e36c9;   --lq-info-tint:    #edeffb;
  --lq-success:       #10b981;   --lq-success-tint: #ecf9f5;   --lq-success-text: #0b7d5c;
  --lq-warning:       #f0a12e;   --lq-warning-tint: #fef7ee;   --lq-warning-text: #9d6210;
  --lq-danger:        #ef6b6b;   --lq-danger-tint:  #fef3f3;   --lq-danger-text:  #c04747;
  --lq-neutral:       #5c6270;   --lq-neutral-tint: #f4f6fb;
  --lq-pink-wash:     #fdf4f7;
  --lq-saffron:       #FF671F;
  --lq-ink-primary:   #12131A;
  --lq-ink-secondary: #454C5E;
  --lq-surface-app:   #F2F5FC;
  --lq-surface-card:  #FFFFFF;
  --lq-surface-subtle:#EAEFFA;
  --lq-border:        #E1E6F1;
  --lq-border-strong: #C6CEE0;
  /* Accent-era tokens repointed into the cobalt family so no stale rule shows pink/aqua. */
  --lq-rose:  #41529f;  --lq-rose-soft: #e9ecfb;
  --lq-lilac: #7C8CF2;
  --lq-grad-brand: linear-gradient(120deg, #1e36c9 0%, #7C8CF2 100%);
  --lq-grad-wash:  linear-gradient(120deg, rgba(30,54,201,.06) 0%, rgba(124,140,242,.08) 100%);
  /* Nav domains: original single cobalt across the board. */
  --lq-nav-payroll: #1e36c9;      --lq-nav-payroll-tint: #e9ecfb;      --lq-nav-payroll-fill: currentColor;
  --lq-nav-inputs: #1e36c9;       --lq-nav-inputs-tint: #e9ecfb;       --lq-nav-inputs-fill: currentColor;
  --lq-nav-compliance: #1e36c9;   --lq-nav-compliance-tint: #e9ecfb;   --lq-nav-compliance-fill: currentColor;
  --lq-nav-insights: #1e36c9;     --lq-nav-insights-tint: #e9ecfb;     --lq-nav-insights-fill: currentColor;
  --lq-nav-knowledge: #1e36c9;    --lq-nav-knowledge-tint: #e9ecfb;    --lq-nav-knowledge-fill: currentColor;
  --lq-nav-assistant: #1e36c9;    --lq-nav-assistant-tint: #e9ecfb;    --lq-nav-assistant-fill: currentColor;
  --lq-nav-configuration: #1e36c9;--lq-nav-configuration-tint: #e9ecfb;--lq-nav-configuration-fill: currentColor;
  --lq-nav-system: #1e36c9;       --lq-nav-system-tint: #e9ecfb;       --lq-nav-system-fill: currentColor;
  --lq-status-computed: #1e36c9;  --lq-status-computed-tint: #e9ecfb;
  --lq-status-approved: #10b981;  --lq-status-approved-tint: #ecf9f5;
  --lq-status-blocked:  #f0a12e;  --lq-status-blocked-tint:  #fef7ee;
  --lq-status-rejected: #ef6b6b;  --lq-status-rejected-tint: #fef3f3;
}
/* Icons: the ORIGINAL cobalt duotone — soft currentColor fill under the cobalt stroke. */
.lq-nav-item .nav-icon { color: inherit; opacity: 1; filter: none; }
.lq-nav-item .nav-icon .lq-duo .a { fill: currentColor; opacity: .22; }
.lq-nav-item .nav-icon .lq-duo .b { stroke: none; }
.lq-nav-item .nav-icon .lq-duo .bf { fill: currentColor; }
.lq-nav-item:not(.is-active) .nav-icon { opacity: .85; }
.lq-nav-item:not(.is-active) .nav-text { color: var(--lq-ink-secondary); }
.lq-nav-item.is-active .nav-text { color: var(--lq-ink-primary); }
.lq-nav-item--run, .lq-nav-item--payslips, .lq-nav-item--anomaly_queue { --nav-color: var(--lq-accent); --nav-fill: currentColor; }
@media (min-width: 901px) {
  html[data-shell="canvas"] .lq-rail-item .lq-rail-chip { color: var(--lq-accent); }
  html[data-shell="canvas"] .lq-rail-item .lq-rail-chip .lq-duo .a { fill: currentColor; opacity: .22; }
  html[data-shell="canvas"] .lq-rail-item .lq-rail-chip .lq-duo .b { stroke: none; }
  html[data-shell="canvas"] .lq-rail-item:not(.is-on) .lq-rail-chip { opacity: .55; filter: none; }
  html[data-shell="canvas"] .lq-rail-item:not(.is-on):hover .lq-rail-chip { opacity: .9; }
  html[data-shell="canvas"] .lq-rail-item.is-on .lq-rail-chip { opacity: 1; }
  /* Canvas surface: the approved off-white curve derived from the original tokens. */
  html[data-shell="canvas"]:not([data-theme="dark"]) .lq-content {
    background: color-mix(in srgb, var(--lq-surface-card) 72%, var(--lq-surface-app));
    border-color: color-mix(in srgb, var(--lq-border) 55%, transparent);
  }
  /* Scroll marker + spine: cobalt family only. */
  .lq-scrollmark { background: linear-gradient(180deg, var(--lq-accent) 0%, #7C8CF2 100%); }
  html[data-shell="canvas"] .lq-spine__dot.is-on::before { background: var(--lq-accent); }
}
/* Decision-strip period cell: cobalt tint (no rose). */
.dstrip__i--period { background: var(--lq-accent-tint); }
.dstrip__i--period .dstrip__v { color: var(--lq-accent); }
/* Heroes: the original tints. */
.kb-hero { background: linear-gradient(105deg, #EEF0FF 0%, #F3ECFC 100%); border-color: #E3E3F5; }

/* Period card: no accent line (original, clean). */
.period-card::before, .networth-card::before { display: none; }
/* Copilot: no colored glow (original). */
.cpl-panel { box-shadow: var(--lq-shadow-lg, 0 18px 44px -20px rgba(18, 19, 26, .25)); }
/* Insight tag chips: the approved cobalt-family set. */
/* Empty states: cobalt on its soft wash. */
.empty .ic { color: inherit; background: var(--lq-grad-wash); }

/* DARK-THEME RESTORE (companion to COLOR RESTORE above). Several experiment layers
   declared tokens on a plain :root, which out-cascaded the dark theme's own values in
   lq-tokens.css (later file wins at equal specificity) — the visible symptom was a
   near-white active nav pill with light text in dark mode. Re-assert the ORIGINAL dark
   values here, after all experiment layers, so dark mode reads exactly as Production. */
[data-theme="dark"] {
  --lq-accent:        #4C6BF5;
  --lq-accent-hover:  #6683FF;
  --lq-accent-active: #3A55D8;
  --lq-accent-tint:   rgba(76, 107, 245, 0.16);
  --lq-info:          #4C6BF5;   --lq-info-tint:    rgba(76, 107, 245, 0.16);
  --lq-success:       #3FCE93;   --lq-success-tint: rgba(63, 206, 147, 0.15);
  --lq-warning:       #E8B655;   --lq-warning-tint: rgba(232, 182, 85, 0.15);
  --lq-danger:        #F26D75;   --lq-danger-tint:  rgba(242, 109, 117, 0.15);
  --lq-status-computed: #6683FF; --lq-status-computed-tint: rgba(76, 107, 245, 0.16);
  --lq-status-approved: #3FCE93; --lq-status-approved-tint: rgba(63, 206, 147, 0.14);
  --lq-status-blocked:  #E8B655; --lq-status-blocked-tint:  rgba(232, 182, 85, 0.14);
  --lq-status-rejected: #F26D75; --lq-status-rejected-tint: rgba(242, 109, 117, 0.14);
  --lq-nav-payroll: #7C90FF;      --lq-nav-payroll-tint: rgba(76, 107, 245, 0.16);      --lq-nav-payroll-fill: currentColor;
  --lq-nav-inputs: #7C90FF;       --lq-nav-inputs-tint: rgba(76, 107, 245, 0.16);       --lq-nav-inputs-fill: currentColor;
  --lq-nav-compliance: #7C90FF;   --lq-nav-compliance-tint: rgba(76, 107, 245, 0.16);   --lq-nav-compliance-fill: currentColor;
  --lq-nav-insights: #7C90FF;     --lq-nav-insights-tint: rgba(76, 107, 245, 0.16);     --lq-nav-insights-fill: currentColor;
  --lq-nav-knowledge: #7C90FF;    --lq-nav-knowledge-tint: rgba(76, 107, 245, 0.16);    --lq-nav-knowledge-fill: currentColor;
  --lq-nav-assistant: #7C90FF;    --lq-nav-assistant-tint: rgba(76, 107, 245, 0.16);    --lq-nav-assistant-fill: currentColor;
  --lq-nav-configuration: #7C90FF;--lq-nav-configuration-tint: rgba(76, 107, 245, 0.16);--lq-nav-configuration-fill: currentColor;
  --lq-nav-system: #7C90FF;       --lq-nav-system-tint: rgba(76, 107, 245, 0.16);       --lq-nav-system-fill: currentColor;
  --lq-rose: #7C90FF; --lq-rose-soft: rgba(76, 107, 245, 0.16); --lq-lilac: #7C90FF;
  --lq-grad-brand: linear-gradient(120deg, #4C6BF5 0%, #7C90FF 100%);
  --lq-grad-wash:  linear-gradient(120deg, rgba(76,107,245,.14) 0%, rgba(124,144,255,.12) 100%);
}
/* Dark rail/nav duotone follows the dark accent; labels use the dark ink tokens. */
[data-theme="dark"] .lq-nav-item.is-active .nav-text { color: var(--lq-ink-primary); }
[data-theme="dark"] .dstrip__i--period { background: var(--lq-accent-tint); }
[data-theme="dark"] .dstrip__i--period .dstrip__v { color: var(--lq-accent-hover); }
[data-theme="dark"] .kb-hero { background: linear-gradient(105deg, rgba(76,107,245,.16), rgba(124,144,255,.12) 100%); border-color: transparent; }
[data-theme="dark"] .asr-hero { background: var(--lq-surface-card); border-color: var(--lq-border); }
[data-theme="dark"] .empty .ic { color: inherit; background: var(--lq-accent-tint); }
@media (min-width: 901px) {
  html[data-theme="dark"][data-shell="canvas"] .lq-content,
  [data-theme="dark"] html[data-shell="canvas"] .lq-content { background: var(--lq-surface-card); border-color: transparent; }
  html[data-shell="canvas"][data-theme="dark"] .lq-rail-item .lq-rail-chip { color: var(--lq-nav-payroll); }
}

/* NAVIGATION SPINE REMOVED (per Anoop). The nav panel returns to a quiet hover-only
   thin scrollbar so scroll position stays perceivable without decoration. */
.lq-spine { display: none !important; }
@media (min-width: 901px) {
  html[data-shell="canvas"] .lq-sidebar { scrollbar-width: thin; scrollbar-color: transparent transparent; }
  html[data-shell="canvas"] .lq-sidebar:hover { scrollbar-color: var(--lq-border-strong) transparent; }
  html[data-shell="canvas"] .lq-sidebar::-webkit-scrollbar { display: block; width: 6px; }
  html[data-shell="canvas"] .lq-sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
  html[data-shell="canvas"] .lq-sidebar:hover::-webkit-scrollbar-thumb { background: var(--lq-border-strong); }
}

/* DARK-MODE FIX (per Anoop): the "Suggested for you" tip card kept its light cream
   background in dark mode while the title used the dark theme's near-white ink —
   unreadable. Dark variant: a warm translucent amber on the dark surface, with the
   theme's own inks doing the reading. */
[data-theme="dark"] .lq-tip {
  background: linear-gradient(100deg, rgba(232, 182, 85, .12) 0%, rgba(232, 182, 85, .04) 62%);
  border-color: rgba(232, 182, 85, .28);
}
[data-theme="dark"] .lq-tip__kicker { color: #E8B655; }
[data-theme="dark"] .lq-tip__t { color: var(--lq-ink-primary); }
[data-theme="dark"] .lq-tip__d { color: var(--lq-ink-secondary); }

/* ============================================================================
   SPEED LAYER (per Anoop): clicks must feel instant.
   The motion layer replayed entrance animations (250ms fade + up to 165ms
   staggered card delays + row staggers) on EVERY page render — each click paid
   ~300–500ms of choreography before content settled. Content now mounts
   instantly; only micro-feedback (hover/press ≤90ms) remains.
   ========================================================================== */
.page, .page .hero, .page .card, .page .lq-card,
.page .lq-list > li, .page tbody tr, .page .dlist .row {
  animation-duration: 0ms !important;
  animation-delay: 0ms !important;
}
.btn, .lq-nav-item, .lq-rail-item, .tab, .subitem, .lq-row, .quicklink,
.s2qcard, .crow, .lq-entity-item, .menu-item {
  transition-duration: 90ms !important;
}

/* NAVIGATION SPINE — DOTS RESTORED (per Anoop). The earlier removal took the dots with it;
   the intent was only to drop the elongated blue line. Dots return on the panel edge; the
   ACTIVE section is a slightly larger cobalt DOT (never a line). The panel's scrollbar is
   hidden again — the dots are the position cue. */
@media (min-width: 901px) {
  html[data-shell="canvas"] .lq-spine { display: flex !important; }
  html[data-shell="canvas"] .lq-shell.nav-collapsed ~ .lq-spine { display: none !important; }
  html[data-shell="canvas"] .lq-spine__dot.is-on::before {
    height: 6px; width: 6px; background: var(--lq-accent); }
  html[data-shell="canvas"] .lq-sidebar,
  html[data-shell="canvas"] .lq-sidebar > #nav { scrollbar-width: none; }
  html[data-shell="canvas"] .lq-sidebar::-webkit-scrollbar,
  html[data-shell="canvas"] .lq-sidebar > #nav::-webkit-scrollbar { display: none; width: 0; }
}

/* ============================================================================
   VISUAL DEFECT FIXES + DEFINITION-CLEANUP RHYTHM (per Anoop's v2 report).
   ========================================================================== */
/* Dashboard donut legend: agency names no longer crush to "P." — the name cell keeps
   readable width and ellipsizes gracefully if truly out of room. */
.dlist .nm { flex: 1 1 auto; min-width: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Employees register: frozen columns follow the SAME zebra as the rest of the row —
   no vertical seam at the first scrolling column. Hover/selected states re-asserted
   after, so they still win. */
.egrid-wrap[data-freeze="name"] .egrid__table tbody tr:nth-child(even) td.c-sel,
.egrid-wrap[data-freeze="name"] .egrid__table tbody tr:nth-child(even) td.c-id,
.egrid-wrap[data-freeze="name"] .egrid__table tbody tr:nth-child(even) td.c-name { background: var(--lq-surface-app); }
.egrid-wrap[data-freeze="name"] .egrid__table tbody tr:hover td.c-sel,
.egrid-wrap[data-freeze="name"] .egrid__table tbody tr:hover td.c-id,
.egrid-wrap[data-freeze="name"] .egrid__table tbody tr:hover td.c-name { background: var(--color-surface-hover, var(--lq-accent-tint)); }
.egrid-wrap[data-freeze="name"] .egrid__table tbody tr.is-sel td.c-sel,
.egrid-wrap[data-freeze="name"] .egrid__table tbody tr.is-sel td.c-id,
.egrid-wrap[data-freeze="name"] .egrid__table tbody tr.is-sel td.c-name { background: var(--blue-t2, var(--lq-accent-tint)); }
/* Intelligence: the 3-up KPI tiles (incl. Leave inputs) keep readable width — no
   one-word-per-line wrapping. */
.pi-kpis--3 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.pi-kpi__s { overflow-wrap: normal; }
/* Dashboard: Net-pay card spans the full row now that the duplicate period tile is gone. */
.period-networth-row--single { grid-template-columns: 1fr !important; display: grid; }
/* Anomaly Thresholds: read-only chip replaces the roadmap sentence. */
.s2-readonly-chip { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--lq-ink-secondary); background: var(--lq-surface-subtle);
  border-radius: 999px; padding: 3px 10px; margin-left: 8px; }

/* ==========================================================================
   2026-08-15 (build 437) — COPILOT CHAT FIT + ONE-ROW COMPOSER · CARD RHYTHM ·
   ADVISORY-BANNER CONTRAST (per Anoop: Copilot page shouldn't scroll; boxes
   stuck together on Reports & GL; light-orange Penalty radar box).
   ========================================================================== */
/* 1) Chat composer: ONE row — the textarea grows, the send button sits beside it
      (applies to both the full page and the drawer, which share .cpl-box). */
.cpl-box { display: flex; align-items: flex-end; gap: 10px; }
.cpl-box__ta { flex: 1 1 auto; width: auto; min-width: 0; }
.cpl-box__row { margin-top: 0; flex: 0 0 auto; }
/* 2) A decision strip that FOLLOWS content keeps the vertical rhythm — the strip
      only zeroes its top margin when it leads the page (Reports & GL defect). */
#glDraftNote .dstrip { margin-top: var(--space-4, 16px); }
.card + .dstrip, .lq-card + .dstrip { margin-top: var(--space-4, 16px); }
/* 3) Advisory banners: tinted surface + semantic ICON and LEAD, body text in INK.
      All-amber / all-red paragraphs read poorly on their own tint (Penalty radar). */
.banner--warn { color: var(--lq-ink-primary, #202938); }
.banner--warn b { color: #8A6116; }
.banner--danger { color: var(--lq-ink-primary, #202938); }
.banner--danger b { color: var(--lq-danger-text); }
[data-theme="dark"] .banner--warn, [data-theme="dark"] .banner--danger { color: var(--lq-ink-primary); }
[data-theme="dark"] .banner--warn b { color: #E3B563; }
[data-theme="dark"] .banner--danger b { color: #F29AA3; }

/* ==========================================================================
   2026-08-15 (build 438) — VERTICAL RHYTHM SYSTEM (per Anoop's spacing spec).
   One consistent scale across every page: title→subtitle 6–8px · page header→
   content 24–32px · section heading→its controls/tabs/table/cards 20–24px ·
   related items 8–12px · separate cards/sections 24–32px. Grouped, not cramped.
   ========================================================================== */
/* 1) Page title → subtitle/context: 6–8px. */
.page-head p, .phead p, .pg-tagline { margin-top: 6px; }
/* 2) Page header/context → first action or content area: 24–32px.
      (Overrides the earlier 14–18px compact values — the header needs air below.) */
.page-head, .page-head.pg-compact, .lq-dash .page-head { margin-bottom: 26px; }
/* 3) Section heading → its controls, tabs, table, or card: 20–24px.
      .sect-title is the shared class for inline section headings (Payroll lifecycle etc.);
      a standalone .card__title gets the same rhythm, zeroed when a .card__head already
      provides the spacing so nothing double-gaps. */
.sect-title { margin-bottom: 20px; }
.card__title { margin-bottom: var(--space-5, 20px); }
.card__head { margin-bottom: var(--space-5, 20px); }
.card__head .card__title, .card__head div > .card__title { margin-bottom: 0; }
/* The run-stage tab bar sits under its heading with the same grouped rhythm. */
.run-pills { margin-bottom: 14px; }
/* 4) Related items inside one component: 8–12px (existing gap utilities already
      run 8–12px; the chips row under a card heading joins that scale). */
.card__title + .chips-row, .lq-card-head + .chips-row { margin-top: 10px; }
/* 5) Separate cards/sections: 24–32px. Direct page children only — stacks and
      grids keep their own gap, so nothing double-spaces inside gap containers.
      Block-margin collapsing folds this into the header's 26px, never adds. */
.page > * + .card, .page > * + .lq-card { margin-top: 24px; }
.page > .card + div:not([class]), .page > .lq-card + div:not([class]) { margin-top: 24px; }

/* ==========================================================================
   2026-08-15 (build 441) — TIMEKEEPING PERIOD GRID + TOTALS (per Anoop:
   "make it the best Time Keeping", Zoho Time Tracker as the reference bar).
   Rows = employees, columns = the cutoff's days, cells = that day's state;
   click any cell to add/fix the day. Totals footer mirrors Zoho's bottom bar.
   ========================================================================== */
.tk-vt { display: inline-flex; gap: 3px; background: var(--lq-surface-2, #eef1f7); padding: 4px; border-radius: 10px; }
.tk-vt__b { border: 0; background: transparent; font: inherit; font-size: .85rem; font-weight: 600;
  color: var(--lq-ink-secondary); padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.tk-vt__b.is-on { background: var(--lq-surface-card, #fff); color: var(--lq-ink-primary); box-shadow: 0 1px 3px rgba(22,24,31,.10); }
[data-theme="dark"] .tk-vt { background: rgba(255,255,255,.06); }

.tkg-wrap { border: 1px solid var(--lq-border); border-radius: 12px; }
.tkg { border-collapse: collapse; width: 100%; font-size: 12px; }
.tkg th, .tkg td { border-bottom: 1px solid var(--lq-border); border-right: 1px solid var(--lq-border); text-align: center; }
.tkg thead th { padding: 6px 2px; background: var(--lq-surface-subtle); position: sticky; top: 0; z-index: 1; }
.tkg-dom { display: block; font-weight: 700; font-size: 12px; color: var(--lq-ink-primary); }
.tkg-dw { display: block; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; color: var(--lq-ink-muted); }
.tkg-name { text-align: left !important; padding: 7px 10px !important; white-space: nowrap; position: sticky; left: 0;
  background: var(--lq-surface-card); z-index: 2; min-width: 130px; font-size: 12.5px; }
.tkg thead .tkg-name { z-index: 3; background: var(--lq-surface-subtle); }
.tkg-sum { padding: 6px 8px !important; font-variant-numeric: tabular-nums; }
.tkg-c { min-width: 34px; height: 34px; padding: 0 2px; cursor: pointer; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--lq-ink-secondary); }
.tkg-c:hover { outline: 2px solid var(--lq-accent); outline-offset: -2px; }
.tkg-we { background: var(--lq-surface-subtle); }
.tkg-ok   { background: #E2F3EA; color: #16744E !important; }
.tkg-pend { background: #E4EDFC; color: #2450A8 !important; }
.tkg-open { background: #FBF1DF; color: #8A6116 !important; }
.tkg-rej  { background: #FCEAEB; color: #A8323C !important; }
.tkg-ign  { background: var(--lq-surface-2, #eef1f7); color: var(--lq-ink-muted) !important; font-weight: 700; }
.tkg-abs  { background: #F3E8EA; color: #A8323C !important; font-weight: 700; }
[data-theme="dark"] .tkg-ok   { background: rgba(36,168,107,.18); color: #7BD8AC !important; }
[data-theme="dark"] .tkg-pend { background: rgba(79,131,238,.18); color: #9FBDF5 !important; }
[data-theme="dark"] .tkg-open { background: rgba(217,149,43,.16); color: #E3B563 !important; }
[data-theme="dark"] .tkg-rej  { background: rgba(224,82,99,.16); color: #F29AA3 !important; }
[data-theme="dark"] .tkg-abs  { background: rgba(224,82,99,.12); color: #F29AA3 !important; }

.tkg-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 11.5px; color: var(--lq-ink-secondary); }
.tkg-legend span { display: inline-flex; align-items: center; gap: 6px; }
.tkg-sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.tkt { display: flex; justify-content: flex-end; gap: 0; margin-top: 14px; border: 1px solid var(--lq-border);
  border-radius: 12px; background: var(--lq-surface-card); overflow: hidden; }
.tkt__i { padding: 10px 18px; display: flex; flex-direction: column; gap: 1px; }
.tkt__i + .tkt__i { border-left: 1px solid var(--lq-border); }
.tkt__v { font-size: 15px; font-weight: 700; color: var(--lq-ink-primary); font-variant-numeric: tabular-nums; }
.tkt__v--ok { color: var(--lq-success, #1E7A5C); } .tkt__v--info { color: var(--lq-accent); } .tkt__v--warn { color: var(--lq-warning, #B98A2E); }
.tkt__k { font-size: 10.5px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; color: var(--lq-ink-secondary); }

/* 2026-08-15 (build 442) — LIVE CLOCK TICKER (tk-best): the running elapsed timer
   on the employee's Time clock card while clocked in. */
.tk-live { display: inline-flex; align-items: center; gap: 7px; }
.tk-live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lq-success, #1E7A5C);
  animation: tk-pulse 1.6s ease-in-out infinite; }
#tkTicker { font-variant-numeric: tabular-nums; font-size: 16px; color: var(--lq-success, #1E7A5C); }
@keyframes tk-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .tk-live__dot { animation: none; } }

/* ============================================================================
   ICONS INHERIT — approved by Anoop, 2026-08-17. Loads last, so it settles the
   question for the whole product.

   THE RULE: an icon takes the colour of the text beside it. Nothing else.

   WHY: every icon in the product was painted brand blue, and when everything is
   blue, blue stops meaning anything. Colour is now reserved for state — and only
   for state — so a red icon on a payroll screen is worth stopping for.

   THE ONE EXCEPTION, listed explicitly below: icons whose job IS to state a
   state keep their colour. A reviewer scanning an anomaly queue for what blocks
   a post reads that colour before any label, and taking it away costs real time.

   This supersedes the duotone icon spec on approved page 4. The duotone geometry
   stays; both of its layers now resolve to the surrounding text colour, the back
   layer at reduced opacity so the two tones still read as two tones.
   ========================================================================== */

/* --- Shell: navigation + rail. Both duotone layers inherit. The attribute
       selectors carry enough specificity to settle the per-module colour rules
       set earlier in this file. --- */
html[data-shell] .lq-nav-item .nav-icon .lq-duo .a,
html[data-shell] .lq-rail-item[class] .lq-rail-chip .lq-duo .a,
html .lq-nav-item .nav-icon .lq-duo .a,
html .lq-rail-chip .lq-duo .a            { fill: currentColor; opacity: .24; }
html[data-shell] .lq-nav-item .nav-icon .lq-duo .b,
html[data-shell] .lq-rail-item[class] .lq-rail-chip .lq-duo .b,
html .lq-nav-item .nav-icon .lq-duo .b,
html .lq-rail-chip .lq-duo .b            { fill: currentColor; stroke: none; }
html[data-shell] .lq-nav-item .nav-icon .lq-duo .bf,
html[data-shell] .lq-rail-item[class] .lq-rail-chip .lq-duo .bf,
html .lq-nav-item .nav-icon .lq-duo .bf,
html .lq-rail-chip .lq-duo .bf           { fill: currentColor; }
[data-theme="dark"] .lq-nav-item .nav-icon .lq-duo .a,
[data-theme="dark"] .lq-rail-chip .lq-duo .a { fill: currentColor; opacity: .30; }

/* --- Page content: every icon chip and inline glyph inherits. --- */
#main .icn, #main .cpl-card__ic, #main .kb-card__ic, #main .kb-rec__ic, #main .kb-ql__ic,
#main .asr-vp__ic, #main .s2qcard__ic, #main .cmp-ic, #main .quicklink__ic, #main .gs2-ic,
#main .support-res__ic, #main .sess__icon, #main .empty .ic, #main .empty__icon,
#main .stat__glyph, #main .card__head svg, #main .banner__icon,
#main .sort-ic, #main .search-box-lg__glyph, #main .search-box-sm__glyph { color: inherit; }

/* --- THE EXCEPTION. These state a state, so they keep their colour. Restated
       here at the end so the allowlist is one readable list rather than a
       property of whichever sheet happened to define each component. --- */
#main .banner--warn .banner__icon      { color: var(--lq-warning-text); }
#main .banner--danger .banner__icon    { color: var(--lq-danger-text); }
#main .banner--success .banner__icon   { color: var(--lq-success-text); }
#main .pstat--green .pstat__dot        { background: var(--lq-success); }
#main .pstat--amber .pstat__dot        { background: var(--lq-warning); }
#main .pstat--red   .pstat__dot        { background: var(--lq-danger); }
#main .rdy-chk.is-ok  .rdy-chk__ic     { color: var(--lq-success-text); }
#main .rdy-chk.is-bad .rdy-chk__ic     { color: var(--lq-danger-text); }
#main .aq-band__c.is-block .aq-band__n { color: var(--lq-danger-text); }
#main .aq-band__c.is-warn  .aq-band__n { color: var(--lq-warning-text); }
/* The completed lifecycle stage stays deep green — it is the clearest signal on
   the Run Payroll page that a stage is finished. */
.lq-dash .pipeline .stage.done .node   { background: var(--lq-success-deep); border-color: var(--lq-success-deep); color: #fff; }


/* ── IBM CARBON ICON FAMILY (2026-08-17) ────────────────────────────────────────────────
   The icon set was redrawn from strokes to SOLID geometry, so the family-level styling has
   to flip with it: a solid glyph with `fill: none` is invisible, and a stroke on top of one
   fattens and blurs it. This is the whole-product default; sizes stay wherever they were set.
   Both duotone layers are filled, .a carrying the lighter mass. */
svg.i, .lq-duo, .nav-icon svg, .lq-rail-chip svg {
  fill: currentColor; stroke: none;
}
svg.i *, .lq-duo * { stroke: none; }
.lq-duo .a { fill: currentColor; opacity: .24; }
.lq-duo .b, .lq-duo .bf { fill: currentColor; opacity: 1; }
[data-theme="dark"] .lq-duo .a { opacity: .30; }


/* ── ICON COLOUR, SETTLED (2026-08-17) ──────────────────────────────────────────────────
   An icon is the colour of the text beside it. The rail chip and the nav icon are separate
   ELEMENTS from their labels, so each was free to carry its own colour — and did, which is
   why the rail rendered coloured glyphs under ink labels. Both now inherit, at a specificity
   that settles the per-module rules above. */
html[data-shell] .lq-rail-item .lq-rail-chip,
html[data-shell] .lq-rail-item.is-on .lq-rail-chip,
html .lq-rail-chip                       { color: inherit; }
html[data-shell] .lq-nav-item .nav-icon,
html[data-shell] .lq-nav-item.is-active .nav-icon,
html .lq-nav-item .nav-icon              { color: inherit; }
/* Inactive nav icons were desaturated with a filter, which does nothing to a monochrome glyph
   and only muddied it. Opacity alone now carries the inactive state. */
html .lq-nav-item:not(.is-active) .nav-icon { filter: none; opacity: .68; }

/* NB: this block lives in lq-fixes.css, NOT lq-components.css, because lq-fixes
   loads AFTER it and already owns .kb-art__meta and .kb-art__body. Authored in
   lq-components first, the new rules silently lost the cascade; the single-class
   override guard in screens.test.js caught it before it shipped. */

/* ===========================================================================
   KNOWLEDGE BASE — ARTICLE PAGE (approved 2026-08-18).
   The reader arrives mid-task with a figure they cannot explain. These blocks
   are ordered for that person: answer, authority, prose, arithmetic, action.
   Every block except the body is optional and renders nothing when a guide
   does not declare it — 13 of the 26 guides are one-minute page notes and must
   not be padded out to look like statutory references.
   =========================================================================== */

/* breadcrumb — replaces the floating centred "All guides" button, which gave
   no sense of place and sat in the middle of the page for no reason. */
.kb-crumb { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--lq-ink-muted); margin-bottom: 18px; }
.kb-crumb button { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px;
  font-weight: 600; color: var(--lq-accent); cursor: pointer; }
.kb-crumb button:hover { text-decoration: underline; }
.kb-crumb i { font-style: normal; opacity: .45; }

.kb-art__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  margin: 12px 0 0; font-size: 12.5px; color: var(--lq-ink-muted); }
.kb-art__meta b { color: var(--lq-ink-secondary); font-weight: 620; }
.kb-art__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--lq-border-strong); }

/* 01 — THE SHORT ANSWER. First screenful, always. */
.kb-answer { margin: 22px 0 0; border: 1px solid var(--lq-border);
  border-left: 3px solid var(--lq-accent); border-radius: 0 12px 12px 0;
  background: var(--lq-accent-tint); padding: 18px 22px; }
.kb-answer h4 { margin: 0 0 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--lq-accent); }
.kb-answer p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--lq-ink-primary);
  font-weight: 520; max-width: 62ch; }

/* 02 — AUTHORITY. Same source and same decision function as the Compliance
   Center, so this can never claim a table is verified when the register says
   pending. That honesty is the point of the block. */
.kb-auth { margin: 20px 0 0; border: 1px solid var(--lq-border); border-radius: 12px; overflow: hidden; }
.kb-auth__h { padding: 10px 16px; background: var(--lq-surface-subtle);
  border-bottom: 1px solid var(--lq-border); font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; color: var(--lq-ink-muted); display: flex; align-items: center;
  justify-content: space-between; gap: 10px; }
.kb-auth__h em { font-style: normal; font-weight: 600; letter-spacing: 0; font-size: 11.5px; }
.kb-auth__r { display: flex; align-items: center; gap: 12px; padding: 11px 16px;
  border-bottom: 1px solid var(--lq-border-subtle, var(--lq-border)); font-size: 13.5px; flex-wrap: wrap; }
.kb-auth__r b { min-width: 84px; font-weight: 640; color: var(--lq-ink-primary); }
.kb-auth__r code { font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--lq-ink-muted); background: var(--lq-surface-subtle);
  border: 1px solid var(--lq-border); border-radius: 4px; padding: 3px 6px; }
.kb-auth__src { font-size: 12.5px; color: var(--lq-ink-muted); }
.kb-auth__sp { flex: 1; }
.kb-auth__pill { font-size: 11px; font-weight: 680; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.kb-auth__pill.is-ok { background: #e8f8f2; color: #0b7d5c; }
.kb-auth__pill.is-pending { background: #fdf4e7; color: #9d6210; }
.kb-auth__pill.is-none { background: var(--lq-surface-subtle); color: var(--lq-ink-muted); }
.kb-auth__f { padding: 10px 16px; background: var(--lq-surface-subtle); }

/* body — measure pulled to 68ch, which is where long-form actually reads.
   H2s carry ids so the rail can jump to them. */
.kb-art__body { max-width: 68ch; }
.kb-art__body h2, .kb-art__body h3 { font-size: 19px; line-height: 1.32; letter-spacing: -.015em;
  font-weight: 660; color: var(--lq-ink-primary); margin: 32px 0 10px; scroll-margin-top: 20px; }
/* h4 is the subhead the 26 authored bodies actually use; it is what the rail jumps to. */
.kb-art__body h4 { scroll-margin-top: 20px; }

/* 03 — ARITHMETIC. Every row shows the operation that produced it; a figure
   with no visible operation is just another number to take on faith. */
.kb-ex { margin: 22px 0 0; border: 1px solid var(--lq-border); border-radius: 12px; overflow: hidden; }
.kb-ex__h { padding: 12px 18px; border-bottom: 1px solid var(--lq-border);
  background: var(--lq-surface-subtle); display: flex; align-items: center; gap: 9px; }
.kb-ex__h svg { width: 15px; height: 15px; color: var(--lq-ink-muted); }
.kb-ex__h b { font-size: 13.5px; font-weight: 660; }
.kb-ex__h span { font-size: 11.5px; color: var(--lq-ink-muted); }
.kb-ex__b { padding: 4px 18px 14px; }
.kb-calc { display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px dashed var(--lq-border); font-size: 14px; }
.kb-calc:last-child { border-bottom: 0; }
.kb-calc span { color: var(--lq-ink-muted); }
.kb-calc em { font-style: normal; font-size: 12px; opacity: .75; margin-left: 7px; }
.kb-calc b { font-variant-numeric: tabular-nums; font-weight: 640; font-size: 15px; color: var(--lq-ink-primary); }
.kb-calc--tot { border-top: 2px solid var(--lq-ink-primary); border-bottom: 0; margin-top: 4px; padding-top: 11px; }
.kb-calc--tot b { color: var(--lq-accent); font-size: 16px; }
.kb-ex__note { font-size: 13px; color: var(--lq-ink-muted); margin: 11px 0 0; max-width: 68ch; }

/* 04 — one click to the screen the guide describes. */
.kb-doit { margin: 22px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.kb-doit__c { display: block; text-align: left; width: 100%; border: 1px solid var(--lq-border);
  border-radius: 10px; padding: 13px 15px; background: var(--lq-surface-card); cursor: pointer;
  font: inherit; transition: border-color .15s, transform .15s; }
.kb-doit__c:hover { border-color: var(--lq-accent); transform: translateY(-1px); }
.kb-doit__c b { display: block; font-size: 13.5px; font-weight: 640; color: var(--lq-ink-primary); margin-bottom: 3px; }
.kb-doit__c span { display: block; font-size: 12.5px; color: var(--lq-ink-muted); line-height: 1.5; }
.kb-doit__c u { display: block; margin-top: 7px; font-size: 12px; color: var(--lq-accent);
  font-weight: 640; text-decoration: none; }

/* 05 — seeded questions instead of a generic banner. */
.kb-ask { margin: 26px 0 0; border: 1px solid var(--lq-border); border-radius: 12px;
  padding: 16px 18px; background: var(--lq-surface-subtle); }
.kb-ask b { display: block; font-size: 13.5px; font-weight: 650; margin-bottom: 2px; color: var(--lq-ink-primary); }
.kb-ask p { margin: 0 0 12px; font-size: 12.8px; color: var(--lq-ink-muted); }
.kb-ask__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kb-ask__chips button { border: 1px solid var(--lq-border); background: var(--lq-surface-card);
  border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 12.5px; font-weight: 560;
  color: var(--lq-ink-secondary); cursor: pointer; transition: .15s; text-align: left; }
.kb-ask__chips button:hover { border-color: var(--lq-accent); color: var(--lq-accent);
  background: var(--lq-accent-tint); }

/* 06 — close the guide: was it clear, and what to read next. */
.kb-art__end { margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--lq-border); }
.kb-helpful { display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  font-size: 13.5px; color: var(--lq-ink-muted); }
.kb-helpful b { color: var(--lq-ink-primary); font-weight: 620; }
.kb-next { display: flex; align-items: center; gap: 15px; width: 100%; text-align: left;
  margin-top: 20px; border: 1px solid var(--lq-border); border-radius: 12px; padding: 16px 18px;
  background: var(--lq-surface-card); cursor: pointer; font: inherit; transition: border-color .15s; }
.kb-next:hover { border-color: var(--lq-accent); }
.kb-next__k { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  color: var(--lq-ink-muted); margin-bottom: 3px; }
.kb-next b { display: block; font-size: 15px; font-weight: 650; color: var(--lq-ink-primary); }
.kb-next__d { display: block; font-size: 12.8px; color: var(--lq-ink-muted); }
.kb-next__ar { margin-left: auto; color: var(--lq-accent); flex: none; display: flex; }
.kb-next__ar svg { width: 18px; height: 18px; }

/* rail — the outline first, related second. Scanning beats browsing here. */
.kb-rail { position: sticky; top: 12px; }
.kb-rail__h { font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--lq-ink-muted); margin: 0 0 11px; }
.kb-toc { list-style: none; margin: 0 0 26px; padding: 0; border-left: 2px solid var(--lq-border); }
.kb-toc a { display: block; padding: 6px 0 6px 14px; margin-left: -2px;
  border-left: 2px solid transparent; font-size: 13px; color: var(--lq-ink-muted);
  text-decoration: none; line-height: 1.45; cursor: pointer; transition: .15s; }
.kb-toc a:hover { color: var(--lq-ink-primary); border-left-color: var(--lq-border-strong); }

@media (max-width: 900px) {
  .kb-doit { grid-template-columns: 1fr; }
  .kb-rail { position: static; }
}

/* RELATED PAYROLL INPUT REGISTERS, under the Run Payroll header (2026-08-18).
   Quiet by design: these are a way IN to three screens that previously had none, not a
   competing call to action. Text links in a row, not buttons — the primary action on this
   page is computing the run, and nothing here should out-shout it. */
.run-reg { display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin: calc(var(--lq-space-3) * -1) 0 var(--lq-space-5); }
.run-reg__h { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--lq-ink-muted); margin-right: 8px; }
.run-reg__i { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  border: 1px solid transparent; border-radius: 8px; background: none; cursor: pointer;
  font: inherit; text-align: left; padding: 6px 10px; transition: background .15s, border-color .15s; }
.run-reg__i:hover { background: var(--lq-surface-subtle); border-color: var(--lq-border); }
.run-reg__i:focus-visible { outline: 3px solid var(--lq-accent-tint); outline-offset: 1px; }
.run-reg__i b { font-size: 13px; font-weight: 620; color: var(--lq-accent); }
.run-reg__i span { font-size: 11.5px; color: var(--lq-ink-muted); }
@media (max-width: 700px) { .run-reg__i span { display: none; } }

/* The company report footer on the Audit-Ready Export (2026-08-19). Sits quietly under the
   package and, unlike the cards above it, must survive printing — it is the line the company
   wants on the document an auditor keeps. */
.ax-foot { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--lq-border);
  font-size: var(--text-xs, 12px); color: var(--lq-ink-muted); white-space: pre-wrap; }
@media print { .ax-foot { color: #444; break-inside: avoid; } }

/* A GL account code that came from the LaQuest defaults rather than the client's chart
   (2026-08-19). Deliberately plain and small: it is a provenance note beside a number, not a
   status chip, and it must read as a caveat on the code it follows. */
.gl-defacct { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--amber, var(--orange)); background: var(--amber-t, var(--orange-t));
  color: var(--amber-d, var(--orange)); font-size: 10px; font-weight: var(--weight-medium, 500);
  letter-spacing: .01em; vertical-align: middle; }

/* ============================================================================
   A CENTRING FLEX HOST DEFORMED EVERY CHILD THAT WAS NOT A PAYSLIP.
   Reported 2026-08-19 as "still a screen issue on Payslips": a pale vertical pill,
   roughly 42px wide, where the page body should be.

   `#payslipHost` is `display:flex; justify-content:center` in legacy.css, which is right
   for what it was written for — the payslip is a fixed-width sheet of paper and belongs in
   the middle of the page. The trouble is that the host receives four other kinds of child:
   the loading skeleton, the "no computed detail" banner, the error card, and the empty
   state. Each is an ordinary full-width block, and a full-width block placed in a
   shrink-to-fit flex row collapses to its own minimum content width. The skeleton measured
   42px wide with lines of ZERO width, because `width:88%` of a shrink-to-fit parent is
   circular and resolves to nothing.

   Nothing was broken or hanging. The data loaded in under a second. The page was simply
   drawing its loading state as a 42px sliver, which reads as a crash — and it was reported
   as one twice, which is the real cost. A loading state that looks like an error spends the
   reader's trust on nothing.

   The payslip itself (.slip) is deliberately left alone: it keeps its own width and stays
   centred. Everything else stretches to a readable measure.
   ========================================================================== */
#payslipHost > *:not(.slip) { flex: 1 1 auto; width: 100%; max-width: 860px; min-width: 0; }

/* ==========================================================================
   GUIDE MARK (restored 2026-08-22 — Anoop's placement decision: beside the page title).
   A small circled ? after each page's h1, rendered only when the page has a guide
   (PAGE_KB). Clicking opens the page's guide in the Knowledge Base (lqHowThisWorks).
   ========================================================================== */
.guide-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 8px; vertical-align: 3px;
  border: 1px solid var(--line, #d5d9e0); border-radius: 50%;
  background: transparent; color: var(--muted, #6b7280);
  font-size: 11px; font-weight: 600; line-height: 1; cursor: pointer; padding: 0;
}
.guide-mark:hover { color: var(--accent, #3b5bdb); border-color: var(--accent, #3b5bdb); }