/* ==========================================================================
   LaQuest Payroll — APP SHELL (Phase 1 of the approved redesign)
   Sidebar + topbar chrome, on lq-tokens.css. Adapted from
   design/laquest-app-demo.html. Screens keep their existing styles and render
   inside #main; they are reskinned in later phases.
   ========================================================================== */

/* Shell scope only — Inter everywhere, tabular numerals for money/IDs. */
.lq-shell, .lq-shell * { box-sizing: border-box; }
.lq-app-body { margin: 0; font-family: var(--lq-font-ui); color: var(--lq-ink-primary);
  background: var(--lq-surface-app); font-size: var(--lq-text-body); line-height: var(--lq-leading-body);
  -webkit-font-smoothing: antialiased;
  transition: background var(--lq-duration-base) var(--lq-ease-standard), color var(--lq-duration-base) var(--lq-ease-standard); }
.lq-tabular-nums, .num { font-variant-numeric: var(--lq-num); font-feature-settings: "tnum" 1; }
.lq-shell :focus { outline: none; }
.lq-shell :focus-visible { outline: var(--lq-focus-ring-width) solid var(--lq-focus-ring-color); outline-offset: var(--lq-focus-ring-offset); border-radius: var(--lq-radius-sm); }
.lq-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- layout ---------- */
.lq-shell { display: grid; grid-template-columns: 264px 1fr; height: 100vh; height: 100dvh; overflow: hidden;
  transition: grid-template-columns var(--lq-duration-base) var(--lq-ease-standard); }
/* Desktop only: the app body is NOT the scroll container — the shell owns the viewport and the
   content column scrolls internally. Scoped to ≥901px so the mobile drawer/scroll is untouched. */
@media (min-width: 901px) {
  body.lq-app-body { height: 100vh; height: 100dvh; overflow: hidden; }
}
/* Collapsed rail (desktop only — ≤900px uses the off-canvas drawer, below). Labels + section
   headers + build stamp hide; icons stay centred and visible. Tooltips come from each item's
   native title="" attribute. The pending badge collapses to a small red dot. */
@media (min-width: 901px) {
  .lq-shell.nav-collapsed { grid-template-columns: 64px 1fr; }
  .lq-shell.nav-collapsed .nav-text,
  .lq-shell.nav-collapsed .lq-nav-group-label,
  .lq-shell.nav-collapsed .lq-logo,
  .lq-shell.nav-collapsed .lq-logo-text,
  .lq-shell.nav-collapsed .lq-side-build,
  .lq-shell.nav-collapsed .lq-nav-details > summary span { display: none; }
  .lq-shell.nav-collapsed .lq-sidebar { padding-left: var(--lq-space-2); padding-right: var(--lq-space-2); }
  .lq-shell.nav-collapsed .lq-nav-item,
  .lq-shell.nav-collapsed .lq-nav-details > summary { justify-content: center; gap: 0; padding-left: 0; padding-right: 0; }
  .lq-shell.nav-collapsed .lq-nav-settings-item { padding-top: var(--lq-space-3); }
  .lq-shell.nav-collapsed .lq-sidebar-head { justify-content: center; padding-left: 0; padding-right: 0; }
  .lq-shell.nav-collapsed .lq-nav-details > summary::after { display: none; }
  .lq-shell.nav-collapsed .lq-nav-item .badge { position: absolute; top: 5px; right: 9px; margin: 0; padding: 0;
    width: 8px; height: 8px; min-width: 0; font-size: 0; line-height: 0; overflow: hidden; border-radius: 50%; }
}

/* SCROLL OWNERSHIP (build 619, per Anoop): the sidebar itself must NOT scroll.
   It used to carry `overflow: hidden auto`, which made the whole panel — INCLUDING
   .lq-sidebar-head and its logo lockup — travel up and down whenever the nav list
   was taller than the viewport. The brand lockup drifting off the top (and sliding
   under the items) is exactly the overlap risk once a larger logo lands there.
   Fix: the panel is a fixed flex column, the head is pinned (flex:0 0 auto), and
   ONLY the nav list (#nav) scrolls beneath it. min-height:0 is required or the
   flex child refuses to shrink and the overflow silently returns to the panel. */
.lq-sidebar { background: var(--lq-surface-card); border-right: 1px solid var(--lq-border);
  padding: var(--lq-space-4) var(--lq-space-3) var(--lq-space-6); overflow: hidden;
  display: flex; flex-direction: column; min-height: 0; height: 100%; }
.lq-sidebar-head { display: flex; align-items: center; gap: var(--lq-space-2); padding: 0 var(--lq-space-1) var(--lq-space-4); flex: 0 0 auto; }
.lq-sidebar > #nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; }
.lq-logo-text { font-weight: var(--lq-weight-semibold); font-size: var(--lq-text-h3); letter-spacing: var(--lq-tracking-tight); color: var(--lq-ink-primary); cursor: pointer; white-space: nowrap; }
/* Brand logo lockup — a single shared asset (assets/laquest-logo.png), theme-resolved by shell.js.
   The wordmark image is revealed only once it actually loads (.has-img); until then, or if the asset
   fails to load, the text wordmark above is the graceful fallback. Height held in the 32–36px band,
   width auto so the aspect ratio is never distorted. */
.lq-logo { display: inline-flex; align-items: center; gap: var(--lq-space-2); cursor: pointer; text-decoration: none; }
.lq-logo__img { height: 34px; width: auto; display: none; object-fit: contain; }
.lq-logo.has-img .lq-logo__img { display: block; }
/* Keep the "LaQuest" wordmark beside the mark for a proper lockup. */
.lq-logo.has-img .lq-logo-text { display: inline-block; }
.lq-logo__img { height: 30px; }

.lq-nav-group-label { font-size: var(--lq-text-caption); color: var(--lq-ink-muted); font-weight: var(--lq-weight-medium);
  text-transform: uppercase; letter-spacing: .06em; padding: var(--lq-space-3) var(--lq-space-2) var(--lq-space-1); }
.lq-nav-item { display: flex; align-items: center; gap: var(--lq-space-3); width: 100%; text-align: left;
  padding: var(--lq-space-2) var(--lq-space-3); border-radius: var(--lq-radius-sm); border: none; background: none;
  color: var(--lq-ink-secondary); font-size: var(--lq-text-small); font-weight: var(--lq-weight-medium); cursor: pointer;
  min-height: 34px; position: relative; font-family: inherit;
  transition: background var(--lq-duration-fast) var(--lq-ease-standard), color var(--lq-duration-fast) var(--lq-ease-standard); }
.lq-nav-item:hover { background: var(--lq-surface-subtle); color: var(--lq-ink-primary); }
.lq-nav-item .nav-icon { display: inline-flex; flex-shrink: 0; color: var(--nav-color, var(--lq-ink-muted)); }
.lq-nav-item .nav-icon svg { width: 20px; height: 20px; }
/* Duotone nav icons — a soft same-hue fill (.a) + a solid line (.b/.bf), driven by the item's
   own colour so they adapt to domain accents, hover and the active state. */
.lq-duo .a { fill: currentColor; opacity: .22; stroke: none; }
.lq-duo .b { fill: currentColor; stroke: none;    }
.lq-duo .bf { fill: currentColor; stroke: none; }
.lq-duo :not([class]) { fill: currentColor; stroke: none;    }
.lq-nav-item.is-active { background: var(--nav-tint, var(--lq-accent-tint)); color: var(--lq-ink-primary); font-weight: var(--lq-weight-semibold); }
/* Active accent strip removed 2026-08-17 — the selected state is a quiet surface, not a bar. */
.lq-nav-item .badge { margin-left: auto; background: var(--lq-danger-deep); color: #fff; font-size: 11px; font-weight: var(--lq-weight-semibold); border-radius: var(--lq-radius-pill); padding: 1px 7px; font-variant-numeric: var(--lq-num); }
.lq-nav-item.is-minor { font-size: var(--lq-text-caption); min-height: 34px; }
.lq-nav-item.is-minor .nav-icon svg { width: 16px; height: 16px; }

details.lq-nav-details { margin-top: var(--lq-space-1); }
details.lq-nav-details > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--lq-space-2);
  padding: var(--lq-space-2) var(--lq-space-3); border-radius: var(--lq-radius-sm); color: var(--lq-ink-muted);
  font-size: var(--lq-text-caption); font-weight: var(--lq-weight-medium); text-transform: uppercase; letter-spacing: .06em; min-height: 32px; }
details.lq-nav-details > summary::-webkit-details-marker { display: none; }
details.lq-nav-details > summary::after { content: "›"; margin-left: auto; transition: transform var(--lq-duration-base) var(--lq-ease-standard); font-size: 16px; }
details.lq-nav-details[open] > summary::after { transform: rotate(90deg); }
details.lq-nav-details > summary:hover { background: var(--lq-surface-subtle); }

.lq-nav-spacer { flex: 1 1 auto; min-height: var(--lq-space-4); }
.lq-nav-settings-item { border-top: 1px solid var(--lq-border); margin-top: var(--lq-space-2); padding-top: var(--lq-space-3); }
.lq-side-build { padding: var(--lq-space-3) var(--lq-space-3) 0; font-size: 11px; color: var(--lq-ink-muted); font-variant-numeric: var(--lq-num); }

/* ---------- main + topbar ---------- */
.lq-main { min-width: 0; display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
.lq-topbar { flex-shrink: 0; z-index: 20; display: flex; align-items: center; gap: var(--lq-space-4);
  padding: var(--lq-space-3) var(--lq-space-6); background: var(--lq-surface-card); border-bottom: 1px solid var(--lq-border);
  backdrop-filter: saturate(180%) blur(6px); }
.lq-topbar .spacer { flex: 1; }
.lq-cmdk { display: flex; align-items: center; gap: var(--lq-space-2); border: 1px solid var(--lq-border); background: var(--lq-surface-subtle);
  color: var(--lq-ink-muted); padding: var(--lq-space-2) var(--lq-space-3); border-radius: var(--lq-radius-sm); font-size: var(--lq-text-small);
  cursor: pointer; min-height: 36px; max-width: 340px; width: 100%; font-family: inherit; }
.lq-cmdk svg { width: 16px; height: 16px; flex-shrink: 0; }
.lq-cmdk span { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lq-cmdk kbd { font-family: inherit; background: var(--lq-surface-card); border: 1px solid var(--lq-border-strong); border-radius: 4px; padding: 1px 6px; font-size: 11px; flex-shrink: 0; }

/* Multi-entity switcher (top bar) */
.lq-entity-switch { position: relative; flex-shrink: 0; }
.lq-entity-btn { display: flex; align-items: center; gap: var(--lq-space-2); border: 1px solid var(--lq-border); background: var(--lq-surface-subtle); color: var(--lq-ink-primary);
  padding: var(--lq-space-2) var(--lq-space-3); border-radius: var(--lq-radius-sm); font-size: var(--lq-text-small); font-family: inherit; cursor: pointer; min-height: 40px; max-width: 240px; }
.lq-entity-btn:hover { background: var(--lq-surface-card); border-color: var(--lq-border-strong); }
.lq-entity-ic { display: flex; flex-shrink: 0; color: var(--lq-ink-muted); }
.lq-entity-ic svg { width: 16px; height: 16px; }
.lq-entity-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--lq-weight-medium); }
.lq-entity-caret { display: flex; flex-shrink: 0; color: var(--lq-ink-muted); }
.lq-entity-caret svg { width: 14px; height: 14px; }
.lq-entity-menu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 260px; background: var(--lq-surface-card); border: 1px solid var(--lq-border);
  border-radius: var(--lq-radius-md); box-shadow: var(--lq-shadow-md); padding: var(--lq-space-2); z-index: 250; }
.lq-entity-menu[hidden] { display: none; }
.lq-entity-menu-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--lq-ink-muted); font-weight: var(--lq-weight-semibold); padding: var(--lq-space-2) var(--lq-space-3) 4px; }
.lq-entity-item { display: flex; align-items: center; gap: var(--lq-space-2); width: 100%; text-align: left; background: none; border: none; padding: var(--lq-space-2) var(--lq-space-3);
  border-radius: var(--lq-radius-sm); font-size: var(--lq-text-small); color: var(--lq-ink-primary); cursor: pointer; font-family: inherit; min-height: 40px; }
.lq-entity-item:hover { background: var(--lq-surface-subtle); }
.lq-entity-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lq-entity-item-role { font-size: var(--lq-text-caption); color: var(--lq-ink-muted); flex-shrink: 0; }
.lq-entity-check { width: 16px; height: 16px; flex-shrink: 0; color: var(--lq-accent); display: flex; align-items: center; justify-content: center; }
.lq-entity-check svg { width: 16px; height: 16px; }
.lq-entity-item.is-active { background: var(--lq-accent-tint); color: var(--lq-accent); font-weight: var(--lq-weight-semibold); }
@media (max-width: 900px) { .lq-entity-name { display: none; } .lq-entity-btn { max-width: none; } }

.lq-theme-toggle { display: flex; align-items: center; gap: 2px; border: 1px solid var(--lq-border); border-radius: var(--lq-radius-pill); padding: 4px; background: var(--lq-surface-subtle); }
.lq-theme-toggle button { border: none; background: none; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--lq-ink-muted); }
.lq-theme-toggle button[aria-pressed="true"] { background: var(--lq-surface-card); color: var(--lq-accent); box-shadow: var(--lq-shadow-sm); }
.lq-theme-toggle svg { width: 18px; height: 18px; }

.lq-bell { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--lq-border); background: var(--lq-surface-card); color: var(--lq-ink-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.lq-bell:hover { background: var(--lq-surface-subtle); color: var(--lq-ink-primary); }
.lq-bell svg { width: 19px; height: 19px; }
.lq-bell .unread-dot { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--lq-danger); border: 2px solid var(--lq-surface-card); }

.lq-avatar-wrap { position: relative; }
.lq-avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--lq-nav-inputs), var(--lq-accent-2)); flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; font-weight: var(--lq-weight-semibold); border: none; cursor: pointer; background-size: cover; background-position: center; }
.lq-avatar-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 236px; background: var(--lq-surface-card); border: 1px solid var(--lq-border); border-radius: var(--lq-radius-md); box-shadow: var(--lq-shadow-md); padding: var(--lq-space-2); z-index: 250; }
.lq-avatar-menu[hidden] { display: none; }
.lq-avatar-menu-header { padding: var(--lq-space-2) var(--lq-space-3) var(--lq-space-3); border-bottom: 1px solid var(--lq-border); margin-bottom: var(--lq-space-2); }
.lq-avatar-menu-name { font-weight: var(--lq-weight-semibold); font-size: var(--lq-text-small); color: var(--lq-ink-primary); }
.lq-avatar-menu-email { font-size: var(--lq-text-caption); color: var(--lq-ink-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lq-avatar-menu-section-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--lq-ink-muted); font-weight: var(--lq-weight-semibold); padding: var(--lq-space-2) var(--lq-space-3) 4px; }
.lq-avatar-menu-role-item, .lq-avatar-menu-item { display: flex; align-items: center; gap: var(--lq-space-2); width: 100%; text-align: left; background: none; border: none; padding: var(--lq-space-2) var(--lq-space-3); border-radius: var(--lq-radius-sm); font-size: var(--lq-text-small); color: var(--lq-ink-primary); cursor: pointer; font-family: inherit; min-height: 36px; transition: background var(--lq-duration-fast) var(--lq-ease-standard), color var(--lq-duration-fast) var(--lq-ease-standard); }
.lq-avatar-menu-role-item:hover, .lq-avatar-menu-item:hover { background: var(--lq-surface-subtle); }
.lq-avatar-menu-role-item .check { width: 16px; height: 16px; flex-shrink: 0; color: var(--lq-accent); visibility: hidden; }
.lq-avatar-menu-role-item .check svg { width: 16px; height: 16px; }
.lq-avatar-menu-role-item[aria-checked="true"] { background: var(--lq-accent-tint); color: var(--lq-accent); font-weight: var(--lq-weight-semibold); }
.lq-avatar-menu-role-item[aria-checked="true"] .check { visibility: visible; }
.lq-avatar-menu-role-item[disabled] { opacity: .45; cursor: not-allowed; }
.lq-avatar-menu-divider { height: 1px; background: var(--lq-border); margin: var(--lq-space-2) 4px; }
.lq-avatar-menu-item.danger { color: var(--lq-danger-text); }

/* ---------- hamburger (animated staggered) ---------- */
.lq-hamburger { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: transparent; border: none; border-radius: var(--lq-radius-sm); cursor: pointer; transition: background var(--lq-duration-fast) var(--lq-ease-standard); }
.lq-hamburger:hover { background: var(--lq-surface-subtle); }
.lq-hamburger-box { position: relative; width: 20px; height: 16px; display: block; pointer-events: none; }
.lq-hamburger-line { position: absolute; left: 0; height: 2.6px; border-radius: 0; background: currentColor;
  transition: width 180ms var(--lq-ease-standard), transform 180ms var(--lq-ease-standard), opacity 150ms var(--lq-ease-standard), top 180ms var(--lq-ease-standard); }
.lq-hamburger-line-top { top: 1px; width: 20px; }   /* full width */
.lq-hamburger-line-mid { top: 7px; width: 20px; }   /* full width — the cut belongs on ONE bar, not two */
/* THE CHAMFER, ON THE ONE HAMBURGER PEOPLE ACTUALLY SEE (2026-08-18).
   This button is the DESKTOP navigation toggle, and it is drawn in CSS rather than from the icon
   set — three spans, so it can animate into an X. That means it does NOT follow icons.js, and when
   the menu glyph was changed to candidate 02 "Chamfer" this control silently kept the old design:
   a bottom bar simply cut short to 15.5px. The SVG copies in icons.js and index.html were both
   updated and both verified live, but `.lq-topbar-menu` is display:none until the mobile media
   query at line ~221, so on a desktop NEITHER of them renders. The only hamburger on screen was
   the one nobody had changed.
   The real signature is a 45° corner cut, not a shorter bar, so it needs a clip-path. The bar
   height and the chamfer are both 2.6px at this scale — the cut is exactly one bar-height
   triangle, matching `h18l-2.6 2.6` on the 24 grid. */
.lq-hamburger-line-bottom { top: 13px; width: 20px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 2.6px) 100%, 0 100%); }
.lq-hamburger.is-open .lq-hamburger-line-top { top: 7px; width: 18px; transform: rotate(45deg); }
.lq-hamburger.is-open .lq-hamburger-line-mid { top: 7px; width: 10px; opacity: 0; transform: scaleX(0); }
/* clip-path:none is REQUIRED here. The chamfer belongs to the menu shape, not to the close shape —
   left on, it clips the end off one arm of the X and the cross reads broken. */
.lq-hamburger.is-open .lq-hamburger-line-bottom { top: 7px; width: 18px; transform: rotate(-45deg);
  clip-path: none; }

/* ---------- trial / access banner (pinned below the topbar, above content) ---------- */
.lq-access-banner { flex-shrink: 0; display: flex; align-items: center; gap: var(--lq-space-2); padding: var(--lq-space-2) var(--lq-page-padding);
  font-size: var(--lq-text-small); border-bottom: 1px solid var(--lq-border); }
.lq-access-banner[hidden] { display: none; }
.lq-access-banner__ic { display: flex; flex-shrink: 0; }
.lq-access-banner__ic svg { width: 17px; height: 17px; }
.lq-access-banner__msg { min-width: 0; }
.lq-access-banner--info { background: var(--lq-accent-tint, #eef2ff); color: var(--lq-ink-primary); }
.lq-access-banner--warn { background: #fff7ed; color: #9a3412; border-bottom-color: #fed7aa; }
.lq-access-banner--danger { background: #fef2f2; color: #991b1b; border-bottom-color: #fecaca; }
[data-theme="dark"] .lq-access-banner--warn { background: #3a2a12; color: #fdba74; border-bottom-color: #7c4a12; }
[data-theme="dark"] .lq-access-banner--danger { background: #3a1717; color: #fca5a5; border-bottom-color: #7f1d1d; }

/* ---------- content container (screens render inside; their own styles apply) ---------- */
.lq-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; width: 100%;
  padding: var(--lq-space-8) max(var(--lq-page-padding), calc((100% - var(--lq-grid-max-width)) / 2)) var(--lq-space-16); }

/* Mobile-only affordances hidden on desktop; shown inside the ≤900px block below. */
.lq-topbar-menu { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0;
  border: 1px solid var(--lq-border); background: var(--lq-surface-card); border-radius: var(--lq-radius-sm); cursor: pointer; color: var(--lq-ink-primary); }
.lq-nav-scrim { display: none; position: fixed; inset: 0; z-index: 255; background: rgba(15, 23, 42, .42);
  opacity: 0; visibility: hidden; transition: opacity var(--lq-duration-base) var(--lq-ease-standard), visibility var(--lq-duration-base); }

/* Tablet / mobile: the sidebar becomes an off-canvas drawer opened by the topbar menu button
   (the in-drawer hamburger closes it). Content is a single column; touch targets ≥ 44px. */
@media (max-width: 900px) {
  .lq-shell, .lq-shell.nav-collapsed { grid-template-columns: 1fr; }
  .lq-sidebar { position: fixed; top: 0; left: 0; height: 100%; z-index: 260; width: min(86vw, 300px);
    transform: translateX(-100%); transition: transform var(--lq-duration-base) var(--lq-ease-standard); box-shadow: var(--lq-shadow-lg); }
  .lq-shell.nav-open .lq-sidebar { transform: translateX(0); }
  /* Keep full labels in the drawer even if a collapsed pref lingers from desktop. */
  .lq-shell.nav-collapsed .nav-text,
  .lq-shell.nav-collapsed .lq-nav-group-label,
  .lq-shell.nav-collapsed .lq-logo,
  .lq-shell.nav-collapsed .lq-logo-text,
  .lq-shell.nav-collapsed .lq-side-build,
  .lq-shell.nav-collapsed .lq-nav-details > summary span { display: revert; }
  .lq-shell.nav-collapsed .lq-nav-item,
  .lq-shell.nav-collapsed .lq-nav-details > summary { justify-content: flex-start; gap: var(--lq-space-3); padding-left: var(--lq-space-3); padding-right: var(--lq-space-3); }
  .lq-shell.nav-collapsed .lq-nav-item .badge { position: static; width: auto; height: auto; min-width: 0; padding: 1px 7px; font-size: 11px; line-height: normal; border-radius: var(--lq-radius-pill); margin-left: auto; }

  .lq-nav-scrim { display: block; }
  .lq-shell.nav-open .lq-nav-scrim { opacity: 1; visibility: visible; }

  .lq-topbar-menu { display: flex; }
  .lq-topbar { padding: var(--lq-space-2) var(--lq-space-4); gap: var(--lq-space-2); }
  .lq-content { padding: var(--lq-space-5) var(--lq-space-4) var(--lq-space-12); }

  /* touch targets */
  .lq-nav-item { min-height: 44px; }
  .lq-topbar-menu, .lq-bell, .lq-avatar { width: 44px; height: 44px; }
  .lq-avatar { border-radius: 50%; }
  .lq-dash .lqd-btn { min-height: 44px; }
}

/* Phone: collapse the search pill to an icon so the topbar controls fit ~375px. */
@media (max-width: 560px) {
  .lq-cmdk { max-width: 44px; width: 44px; justify-content: center; padding: var(--lq-space-2); }
  .lq-cmdk span, .lq-cmdk kbd { display: none; }
}

/* ==========================================================================
   DASHBOARD (Phase 2) — scoped under .lq-dash so it can't affect other screens.
   ========================================================================== */
@keyframes lq-fade-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.lq-dash .page-head { margin-bottom: var(--lq-space-8); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--lq-space-4); flex-wrap: wrap; }
.lq-dash .page-head h1 { font-size: var(--lq-text-h1); font-weight: var(--lq-weight-semibold); letter-spacing: var(--lq-tracking-tight); color: var(--lq-ink-primary); }
.lq-dash .page-head p { color: var(--lq-ink-secondary); margin-top: var(--lq-space-2); max-width: 70ch; }
.lq-dash .action-row { display: flex; gap: var(--lq-space-3); flex-wrap: wrap; margin-bottom: var(--lq-space-6); }

/* action buttons (self-contained so they don't collide with the app's global .btn) */
.lqd-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--lq-space-2); font-family: var(--lq-font-ui); font-size: var(--lq-text-small); font-weight: var(--lq-weight-semibold); padding: 0 var(--lq-space-5); height: 42px; border-radius: var(--lq-radius-pill); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: filter var(--lq-duration-fast) var(--lq-ease-standard), box-shadow var(--lq-duration-base) var(--lq-ease-standard), transform var(--lq-duration-fast) var(--lq-ease-standard); }
.lqd-btn:active { transform: translateY(1px); }
.lqd-btn--sm { height: 34px; padding: 0 var(--lq-space-4); font-size: var(--lq-text-caption); }
.lqd-btn--primary { color: #fff; background: var(--lq-accent); box-shadow: 0 1px 2px rgba(11,31,58,.15), inset 0 1px 0 rgba(255,255,255,.25); }
.lqd-btn--primary:hover { filter: brightness(1.06); box-shadow: 0 6px 16px -6px rgba(30,54,201,.5); }
.lqd-btn--secondary { color: var(--lq-ink-primary); background: var(--lq-surface-card); border-color: var(--lq-border-strong); }
.lqd-btn--secondary:hover { border-color: var(--lq-accent); color: var(--lq-accent); background: var(--lq-accent-tint); }
.lqd-btn[disabled] { cursor: not-allowed; opacity: .55; filter: none; box-shadow: none; }
.lqd-btn .plus-icon svg { width: 16px; height: 16px; display: block; }

/* current-run card + readiness ring */
.lq-dash .current-run-card { background: var(--lq-surface-card); border-radius: var(--lq-radius-lg); box-shadow: var(--lq-shadow-sm); padding: var(--lq-space-6); margin-bottom: var(--lq-space-8); }
.lq-dash .current-run-top { display: flex; align-items: center; gap: var(--lq-space-6); flex-wrap: wrap; }
.lq-dash .current-run-label { font-size: var(--lq-text-caption); color: var(--lq-ink-muted); font-weight: var(--lq-weight-semibold); text-transform: uppercase; letter-spacing: .06em; }
.lq-dash .current-run-meta { color: var(--lq-ink-secondary); font-size: var(--lq-text-small); margin-top: 4px; }
.lq-dash .current-run-actions { display: flex; gap: var(--lq-space-3); margin-top: var(--lq-space-4); flex-wrap: wrap; }
.lq-dash .readiness-ring { width: 112px; height: 112px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: var(--lq-space-2) 0; flex-shrink: 0;
  background: radial-gradient(closest-side, var(--lq-surface-card) 74%, transparent 75% 100%), conic-gradient(var(--ring-color, var(--lq-accent)) calc(var(--pct,0)*1%), var(--lq-surface-subtle) 0);
  transition: background var(--lq-duration-slow) var(--lq-ease-standard); }
.lq-dash .readiness-ring .val { font-size: var(--lq-text-h1); font-weight: var(--lq-weight-bold); font-variant-numeric: var(--lq-num); }
.lq-dash .readiness-ring .lbl { font-size: 10px; color: var(--lq-ink-muted); text-transform: uppercase; letter-spacing: .05em; text-align: center; }
.lqd-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: var(--lq-weight-semibold); padding: 3px 10px; border-radius: var(--lq-radius-pill); color: var(--st-c, var(--lq-status-draft)); background: var(--st-t, var(--lq-status-draft-tint)); }
.lqd-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Full-width like the demo — values right-aligned under the "+" (no width cap). */
.lq-dash .networth-list { list-style: none; margin: var(--lq-space-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.lq-dash .networth-list li { display: flex; justify-content: space-between; gap: var(--lq-space-3); padding: var(--lq-space-2) 0; border-top: 1px solid var(--lq-border); font-size: var(--lq-text-small); }
.lq-dash .networth-list li:first-child { border-top: none; }
.lq-dash .networth-list li .v { font-weight: var(--lq-weight-semibold); font-variant-numeric: var(--lq-num); }

/* segmented pipeline */
.lq-dash .pipeline { display: flex; align-items: stretch; margin-top: var(--lq-space-6); padding-top: var(--lq-space-4); border-top: 1px solid var(--lq-border); }
.lq-dash .pipeline .stage { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; text-align: left; background: none; border: none; border-left: 1px solid var(--lq-border); padding: var(--lq-space-2) var(--lq-space-4); cursor: pointer; font-family: inherit; color: inherit; min-width: 0; }
.lq-dash .pipeline .stage:first-child { border-left: none; padding-left: 2px; }
.lq-dash .pipeline .stage:hover { background: var(--lq-surface-subtle); border-radius: var(--lq-radius-sm); }
.lq-dash .pipeline .stage-row { display: flex; align-items: flex-start; gap: 8px; width: 100%; }
.lq-dash .pipeline .node { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; background: transparent; border: 2px solid var(--lq-border-strong); color: transparent; transition: background var(--lq-duration-base) var(--lq-ease-standard), border-color var(--lq-duration-base) var(--lq-ease-standard); }
.lq-dash .pipeline .node svg { width: 11px; height: 11px; display: block; }
.lq-dash .pipeline .stage.done .node { background: var(--lq-success-deep); border-color: var(--lq-success-text); color: #fff; }
.lq-dash .pipeline .stage.current .node { background: var(--lq-accent); border-color: var(--lq-accent); }
.lq-dash .pipeline .stage-text { min-width: 0; }
.lq-dash .pipeline .name { display: block; font-size: 13px; font-weight: var(--lq-weight-bold); color: var(--lq-ink-primary); line-height: 1.3; }
.lq-dash .pipeline .stage:not(.done):not(.current) .name { color: var(--lq-ink-secondary); font-weight: var(--lq-weight-semibold); }
.lq-dash .pipeline .sub { display: block; font-size: 11px; color: var(--lq-ink-muted); line-height: 1.3; margin-top: 2px; }
.lq-dash .pipeline .stage.current .sub { color: var(--lq-accent); font-weight: var(--lq-weight-medium); }
.lq-dash .pipeline .stage-underline { display: block; height: 3px; width: 100%; max-width: 64px; border-radius: 3px; margin: 8px 0 0 28px; background: transparent; transition: background var(--lq-duration-base) var(--lq-ease-standard); }
.lq-dash .pipeline .stage.current .stage-underline { background: var(--lq-accent); }
@media (max-width: 760px) { .lq-dash .pipeline { overflow-x: auto; padding-bottom: 4px; } .lq-dash .pipeline .stage { min-width: 150px; } }

/* widgets */
.lq-dash .widget-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--lq-space-5); margin-top: var(--lq-space-8); }
.lq-dash .widget-card { background: var(--lq-surface-card); border-radius: var(--lq-radius-lg); box-shadow: var(--lq-shadow-sm); padding: var(--lq-space-6); display: flex; flex-direction: column; gap: var(--lq-space-3); opacity: 0; transform: translateY(14px); animation: lq-fade-rise var(--lq-duration-slow) var(--lq-ease-standard) forwards; animation-delay: calc(var(--i,0)*70ms + 60ms); transition: transform var(--lq-duration-base) var(--lq-ease-standard), box-shadow var(--lq-duration-base) var(--lq-ease-standard); }
.lq-dash .widget-card:hover { transform: translateY(-3px); box-shadow: var(--lq-shadow-lg); }
.lq-dash .widget-card.widget-wide { grid-column: span 2; }
.lq-dash .widget-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--lq-space-2); }
.lq-dash .widget-card-head h4 { font-size: var(--lq-text-h3); font-weight: var(--lq-weight-semibold); margin: 0; }
.lq-dash .widget-card-head .meta { font-size: var(--lq-text-caption); color: var(--lq-ink-muted); margin-top: 2px; }
.lq-dash .widget-empty { font-size: var(--lq-text-small); color: var(--lq-ink-muted); padding: var(--lq-space-3) 0; }
.lq-dash .donut-wrap { display: flex; align-items: center; gap: var(--lq-space-4); }
.lq-dash .donut { position: relative; width: 104px; height: 104px; border-radius: 50%; flex-shrink: 0; background: conic-gradient(var(--seg-stops)); }
.lq-dash .donut-hole { position: absolute; inset: 17px; border-radius: 50%; background: var(--lq-surface-card); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.lq-dash .donut-hole .donut-total { font-size: 13px; font-weight: var(--lq-weight-bold); font-variant-numeric: var(--lq-num); line-height: 1.15; }
.lq-dash .donut-hole .donut-total-label { font-size: 9px; color: var(--lq-ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.lq-dash .donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; flex: 1; min-width: 0; }
.lq-dash .donut-legend li { display: flex; align-items: center; gap: 8px; font-size: var(--lq-text-caption); }
.lq-dash .donut-legend .swatch { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--c); }
.lq-dash .donut-legend .lbl { flex: 1; color: var(--lq-ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lq-dash .donut-legend .val { font-weight: var(--lq-weight-semibold); font-variant-numeric: var(--lq-num); color: var(--lq-ink-primary); flex-shrink: 0; }
.lq-dash .check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lq-dash .check-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--lq-border); }
.lq-dash .check-list li:first-child { border-top: none; padding-top: 0; }
.lq-dash .check-list .agency { font-weight: var(--lq-weight-semibold); font-size: var(--lq-text-caption); color: var(--lq-ink-primary); }
.lq-dash .check-list .due { color: var(--lq-ink-muted); font-size: 11px; margin-top: 1px; }
.lq-dash .status-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: var(--lq-weight-semibold); padding: 3px 9px; border-radius: var(--lq-radius-pill); white-space: nowrap; flex-shrink: 0; }
.lq-dash .status-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.lq-dash .status-chip.on-track { color: var(--lq-success-text); background: var(--lq-success-tint); }
.lq-dash .status-chip.due-soon { color: var(--lq-warning-text, #8A6116); background: var(--lq-warning-tint); }
.lq-dash .status-chip.filed { color: var(--lq-status-posted); background: var(--lq-status-posted-tint); }
.lq-dash .status-chip.pending { color: var(--lq-ink-secondary); background: var(--lq-surface-subtle); }
.lq-dash .widget-stat-row { display: flex; justify-content: space-between; gap: var(--lq-space-2); font-size: var(--lq-text-small); padding: 6px 0; border-top: 1px solid var(--lq-border); }
.lq-dash .widget-stat-row:first-of-type { border-top: none; }
.lq-dash .widget-stat-row .v { font-weight: var(--lq-weight-semibold); font-variant-numeric: var(--lq-num); }
.lq-dash .bank-bar-wrap { display: flex; height: 14px; border-radius: var(--lq-radius-pill); overflow: hidden; background: var(--lq-surface-subtle); width: 100%; }
.lq-dash .bank-bar-seg { height: 100%; }
.lq-dash .bank-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 11px; color: var(--lq-ink-secondary); margin-top: 2px; }
.lq-dash .bank-legend .swatch { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 5px; vertical-align: middle; }
.lq-dash .widget-ring-row { display: flex; align-items: center; gap: var(--lq-space-4); }
.lq-dash .widget-ring { width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: radial-gradient(closest-side, var(--lq-surface-card) 72%, transparent 74% 100%), conic-gradient(var(--ring-col, var(--lq-accent)) calc(var(--pct,0)*1%), var(--lq-surface-subtle) 0); transition: background var(--lq-duration-slow) var(--lq-ease-standard), transform .3s var(--lq-ease-standard), filter .3s var(--lq-ease-standard); }
/* Hover life on the two dashboard rings: a gentle lift + glow, no rotation (keeps center text upright). */
.lq-dash .widget-ring:hover { transform: scale(1.06) translateY(-2px); filter: drop-shadow(0 8px 20px rgba(42,58,214,.20)); }
.lq-dash .donut { transition: transform .3s var(--lq-ease-standard), filter .3s var(--lq-ease-standard); }
.lq-dash .donut:hover { transform: scale(1.05) translateY(-2px); filter: drop-shadow(0 8px 22px rgba(42,58,214,.20)); }
@media (prefers-reduced-motion: reduce) {
  .lq-dash .widget-ring, .lq-dash .donut { transition: background var(--lq-duration-slow) var(--lq-ease-standard); }
  .lq-dash .widget-ring:hover, .lq-dash .donut:hover { transform: none; filter: none; }
}
.lq-dash .widget-ring .val { font-size: 16px; font-weight: var(--lq-weight-bold); font-variant-numeric: var(--lq-num); }
.lq-dash .widget-ring .lbl { font-size: 8px; color: var(--lq-ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.lq-dash .progress-rows { flex: 1; display: flex; flex-direction: column; gap: var(--lq-space-3); min-width: 0; }
.lq-dash .progress-row-head { display: flex; justify-content: space-between; font-size: var(--lq-text-caption); margin-bottom: 4px; }
.lq-dash .progress-row-head .v { font-weight: var(--lq-weight-semibold); font-variant-numeric: var(--lq-num); color: var(--lq-ink-primary); }
.lq-dash .progress-bar-track { height: 7px; border-radius: 4px; background: var(--lq-surface-subtle); overflow: hidden; }
.lq-dash .progress-bar-fill { height: 100%; border-radius: 4px; background: var(--lq-accent); transition: width var(--lq-duration-slow) var(--lq-ease-standard); }
.lq-dash .progress-bar-fill.is-secondary { background: var(--lq-success); }
.lq-dash .mini-bars { display: flex; align-items: flex-end; gap: 12px; height: 76px; }
.lq-dash .mini-bars .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.lq-dash .mini-bars .bar { width: 100%; max-width: 30px; border-radius: 5px 5px 2px 2px; background: var(--lq-nav-payroll-tint); transition: height var(--lq-duration-slow) var(--lq-ease-standard); }
.lq-dash .mini-bars .bar.is-current { background: linear-gradient(180deg, var(--lq-accent), var(--lq-accent-2)); }
.lq-dash .mini-bars .bar-label { font-size: 9px; color: var(--lq-ink-muted); text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 1024px) { .lq-dash .widget-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px) { .lq-dash .widget-grid { grid-template-columns: 1fr; } .lq-dash .widget-card.widget-wide { grid-column: span 1; } }

/* Payroll Readiness Score — blocking list under the dashboard ring (display only). */
.readiness-ring--ok{filter:none}
.rdy-blk-list{margin-top:var(--lq-space-3);display:flex;flex-direction:column;gap:var(--lq-space-2)}
.rdy-blk{display:flex;align-items:center;gap:var(--lq-space-3);padding:10px 12px;border:1px solid var(--lq-border);border-radius:var(--lq-radius-md,10px);background:var(--lq-surface-subtle,#fff)}
.rdy-blk__ic{flex:0 0 auto;color:inherit;display:inline-flex}
.rdy-blk__ic svg{width:18px;height:18px;}
.rdy-blk__t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.rdy-blk__t b{font-size:var(--lq-text-small);color:var(--lq-ink-primary)}
.rdy-blk__t span{font-size:var(--lq-text-xs,12px);color:var(--lq-ink-secondary)}