/* ============================================================================
   PAYROLL INTELLIGENCE — APPROVED PAGE 3B
   Loads after lq-fixes.css so this page's composition is the last word on its
   own classes. Spacing, radii and type sizes are the approved page's own:
   12px grid gap, 24px above the insight row, 16px panel radius, 20px/22px
   panel padding. Colour comes from the tokens so both themes follow, and the
   data accents stay blue — green, amber and red appear only where they carry
   status meaning.
   ========================================================================== */

/* Period + comparison chips in the page header. */
.pi-chip { display: inline-flex; align-items: center; background: var(--lq-neutral-tint);
  border: 1px solid var(--lq-border); border-radius: 999px; padding: 0 4px 0 10px; height: 26px; }
.pi-chip select { font: 600 11.5px var(--lq-font-ui); color: var(--lq-ink-secondary); background-color: transparent;
  border: 0; height: 24px; cursor: pointer; -webkit-appearance: none; appearance: none; padding: 0 16px 0 0;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 7px center, right 3px center; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat; }
.pi-chip select:focus-visible { outline: 3px solid var(--lq-accent-tint); outline-offset: 3px; border-radius: 999px; }
.pi-chip.is-off { font-size: 11.5px; font-weight: 600; color: var(--lq-ink-muted); padding: 0 10px; }

/* Insight cards — a finding and a recommendation, on a soft wash. */
.pi-ins-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px; margin: 24px 0 0; }
.pi-ins { border-radius: 16px; padding: 18px 20px; display: block;
  border: 1px solid var(--lq-info-border); background: var(--lq-surface-card); }
.pi-ins--b { border-color: #e6ebfa;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lq-accent) 5%, transparent), transparent 72%), var(--lq-surface-card); }
.pi-ins--p { border-color: #f3dde5;
  background: linear-gradient(180deg, rgba(236, 72, 153, .035), transparent 72%), var(--lq-surface-card); }
.pi-ins__k { font-size: 10.5px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase;
  color: var(--lq-accent); margin: 0; }
.pi-ins__f { font-size: 14px; font-weight: 600; line-height: 1.45; margin: 8px 0 0; color: var(--lq-ink-primary); }
.pi-ins__v { margin-top: 10px; min-height: 26px; display: flex; align-items: flex-end; }
.pi-ins__v:empty { display: none; }
.pi-ins__r { font-size: 12.5px; font-weight: 600; color: var(--lq-success-text); margin: 10px 0 0; line-height: 1.5; }
.pi-ins__r b { color: inherit; font-weight: 600; }
.pi-ins__r span { color: var(--lq-ink-secondary); font-weight: 450; }
.pi-conc { display: flex; gap: 3px; height: 26px; align-items: flex-end; width: 100%; max-width: 220px; }
.pi-conc__b { flex: 1; display: block; border-radius: 5px; background: var(--lq-accent); }

/* Grids. The hero row is the approved 1.55 / 1 split. */
.pi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.pi-grid--hero { grid-template-columns: 1.55fr 1fr; }
@media (max-width: 1100px) { .pi-grid, .pi-grid--hero { grid-template-columns: 1fr; } }

/* Panels — the hero chart, the cost rail, the gross split, the obligations timeline. */
.pi-panel { border: 1px solid var(--lq-border); border-radius: 16px; background: var(--lq-surface-card);
  padding: 20px 22px; min-width: 0; }
.pi-panel__hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.pi-panel__k { font-size: 11px; color: var(--lq-ink-muted); }
.pi-panel__v { font-size: 28px; font-weight: 700; letter-spacing: -.02em; margin-top: 2px;
  color: var(--lq-ink-primary); font-variant-numeric: var(--lq-num); }
.pi-panel__d { font-size: 12.5px; font-weight: 600; color: var(--lq-success-text); margin-top: 2px; }
.pi-panel__d.is-up { color: var(--lq-warning-text); }   /* cost rose — attention, not error */
.pi-panel__d.is-down { color: var(--lq-success-text); } /* cost fell */
.pi-panel__d.is-quiet { color: var(--lq-ink-muted); font-weight: 450; }
.pi-panel__t { font-size: 15px; font-weight: 650; margin: 0; color: var(--lq-ink-primary); }
.pi-panel__s { font-size: 11.5px; color: var(--lq-ink-muted); margin-top: 2px; }
.pi-panel__foot { border-top: 1px solid var(--lq-border); margin-top: 10px; padding-top: 12px;
  display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; }
.pi-spark { display: block; margin-top: 16px; }
.pi-nochart { margin-top: 16px; padding: 22px 0; font-size: 12.5px; color: var(--lq-ink-muted); }

/* Metric chips on the hero. */
.pi-mchips { display: inline-flex; gap: 6px; }
.pi-mchip { font: 600 10.5px var(--lq-font-ui); padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--lq-border); background: var(--lq-neutral-tint); color: var(--lq-ink-secondary); cursor: pointer; }
.pi-mchip.is-on { background: var(--lq-accent-tint); color: var(--lq-accent); border-color: #cfd8f5; }
.pi-mchip:focus-visible { outline: 3px solid var(--lq-accent-tint); outline-offset: 2px; }

/* Ranked cost rail. */
.pi-leads { margin-top: 14px; }
.pi-lead { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 0; }
.pi-lead__n { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; background: var(--lq-neutral-tint); color: var(--lq-ink-secondary); flex: 0 0 26px; }
.pi-lead__n.is-top { background: var(--lq-accent-tint); color: var(--lq-accent); }
.pi-lead__b { flex: 1; min-width: 0; }
.pi-lead__t { font-size: 13px; font-weight: 600; color: var(--lq-ink-primary); }
.pi-lead__track { display: block; height: 5px; border-radius: 3px; background: var(--lq-surface-subtle); margin-top: 5px; }
.pi-lead__fill { display: block; height: 5px; border-radius: 3px; background: var(--lq-accent); }
.pi-lead__v { font-size: 12.5px; font-weight: 650; color: var(--lq-ink-primary); font-variant-numeric: var(--lq-num); }

/* Gross split. */
.pi-split { display: flex; gap: 3px; height: 12px; margin-top: 16px; }
.pi-seg { display: block; border-radius: 999px; }
.pi-legs { margin-top: 14px; }
.pi-leg { display: flex; justify-content: space-between; padding: 6px 0; font-size: 12.5px;
  border-top: 1px dotted var(--lq-border-strong); color: var(--lq-ink-primary); }
.pi-leg:first-child { border-top: 0; }
.pi-leg__d { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 8px; }

/* Obligations timeline. */
.pi-obls { margin-top: 18px; }
.pi-obl { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 16px; position: relative; border-bottom: 0; }
.pi-obl:last-child { padding-bottom: 0; }
.pi-obl:not(:last-child)::after { content: ""; position: absolute; left: 5px; top: 16px; bottom: 0;
  width: 1.5px; background: var(--lq-border); }
.pi-obl__dot { width: 11px; height: 11px; border-radius: 50%; margin-top: 3px; flex: 0 0 11px; background: var(--lq-accent); }
.pi-obl__dot.is-b { background: #7c8fe8; }
.pi-obl__dot.is-c { background: #aab8f0; }
.pi-obl__t { font-size: 13px; font-weight: 600; color: var(--lq-ink-primary); }
.pi-obl__s { font-size: 11.5px; color: var(--lq-ink-muted); margin-top: 2px; }

/* The control statement that closes the page. */
.pi-ctrl { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  border-radius: 16px; padding: 18px 22px; margin-top: 12px; border: 1px solid var(--lq-success-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--lq-success) 5%, transparent), transparent 72%), var(--lq-surface-card); }
.pi-ctrl.is-open { border-color: var(--lq-warning-border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--lq-warning) 5%, transparent), transparent 72%), var(--lq-surface-card); }
.pi-ctrl__t { font-size: 14px; font-weight: 650; color: var(--lq-success-text); }
.pi-ctrl.is-open .pi-ctrl__t { color: var(--lq-warning-text); }
.pi-ctrl__s { font-size: 12.5px; color: var(--lq-ink-secondary); margin-top: 3px; max-width: 92ch; }
.pi-cap { font-size: 12px; color: var(--lq-ink-muted); margin-top: 8px; }

/* ============================================================================
   GOVERNMENT FILING — APPROVED PAGE 13
   The approved canvas's own values: a 13.5px/650 section title with 16px above,
   a 12px-radius framed table, and a two-up row of 12px-radius cards at a 12px
   gap. Colour comes from the tokens so both themes follow, and amber is used
   only where it carries the deadline warning.
   ========================================================================== */

/* Section title. Named for the approved component, not for this page — the same
   title appears above the obligations table and anywhere else a page groups. */
.lq-sect { font-size: 13.5px; font-weight: 650; margin-top: 16px; margin-bottom: 2px;
  color: var(--lq-ink-primary); }

/* The framed obligations table. */
.gf-tablewrap { border: 1px solid var(--lq-border); border-radius: 12px; margin-top: 8px;
  overflow: hidden; background: var(--lq-surface-card); }
.gf-tablewrap .table { margin: 0; }
.gf-right { text-align: right; }
.gf-amt { font-variant-numeric: var(--lq-num); font-weight: 600; color: var(--lq-ink-primary); }
/* An amount that does not exist yet, and a deadline still waiting on a datum. Both are
   deliberately quiet: they are the absence of a fact, not a warning about one. */
.gf-soon { color: var(--lq-ink-muted); }
.gf-need { color: var(--lq-warning-text); font-weight: 600; font-size: 12px; }
.gf-act { white-space: nowrap; text-align: right; }
.gf-act .btn { margin-left: 4px; }

/* The two-up row that closes the approved page. */
/* align-items:start, not the grid default of stretch. With stretch, a short card (the penalty
   window is three short lines) was pulled to the height of a tall one (the evidence list) and
   painted a large empty void beneath its content. The approved canvas draws both at their
   natural height. margin-bottom because every section below this row carries margin-bottom
   only, so without it the next card butts straight against this one. */
.gf-twoup { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start;
  margin-top: 12px; margin-bottom: var(--space-5); }
@media (max-width: 900px) { .gf-twoup { grid-template-columns: 1fr; } }

/* Penalty window — the elapsed share of the filing window, drawn as a bar. */
.gf-pen { border: 1px solid var(--lq-border); border-radius: 12px; padding: 14px 16px;
  background: var(--lq-surface-card); }
.gf-pen.is-soon { border-color: var(--lq-warning-border); background: var(--lq-warning-tint); }
.gf-pen.is-late { border-color: var(--lq-danger-border); background: var(--lq-danger-tint); }
.gf-pen__t { font-size: 13px; font-weight: 650; color: var(--lq-ink-primary); }
.gf-pen.is-soon .gf-pen__t { color: var(--lq-warning-text); }
.gf-pen.is-late .gf-pen__t { color: var(--lq-danger-text); }
.gf-pen__s { font-size: 12px; color: var(--lq-ink-secondary); margin-top: 6px; line-height: 1.5; }
.gf-pen__track { margin-top: 10px; height: 7px; border-radius: 4px; overflow: hidden;
  background: var(--lq-surface-subtle); }
.gf-pen__fill { display: block; height: 7px; border-radius: 4px; background: var(--lq-accent); }
.gf-pen.is-soon .gf-pen__fill { background: var(--lq-warning); }
.gf-pen.is-late .gf-pen__fill { background: var(--lq-danger); }
.gf-pen__c { font-size: 11px; color: var(--lq-ink-muted); margin-top: 5px; }

/* Evidence on file — the payment reference per agency, and the action that records it. */
.gf-ev { border: 1px solid var(--lq-border); border-radius: 12px; padding: 14px 16px;
  background: var(--lq-surface-card); }
.gf-ev__t { font-size: 13px; font-weight: 650; color: var(--lq-ink-primary); }
.gf-ev__s { font-size: 11.5px; color: var(--lq-ink-muted); margin-top: 4px; line-height: 1.5; }
.gf-ev__list { margin-top: 9px; font-size: 12px; }
.gf-ev__row { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--lq-border); }
.gf-ev__row:last-child { border-bottom: 0; }
/* ATTACHED RECEIPTS (2026-08-19). The right-hand side of an evidence row now carries the
   reference chip AND the receipt control, so it becomes its own flex group that wraps rather
   than squeezing the agency name. */
.gf-ev__right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.gf-ev__file { display: inline-flex; align-items: center; gap: 2px; }
.gf-ev__link { display: inline-flex; align-items: center; gap: 5px; max-width: 168px; background: none; border: 0;
  padding: 2px 4px; margin: 0; font: inherit; font-size: 11px; font-weight: var(--weight-medium, 500);
  color: var(--lq-accent, var(--blue-d)); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-ev__link:hover { text-decoration: underline; }
.gf-ev__link svg { width: 13px; height: 13px; flex-shrink: 0; }
.gf-ev__x { background: none; border: 0; padding: 2px; margin: 0; line-height: 0; cursor: pointer;
  color: var(--lq-ink-muted); border-radius: var(--radius-sm, 4px); }
.gf-ev__x:hover { color: var(--red, #b42318); background: var(--red-t, rgba(180,35,24,.08)); }
.gf-ev__x svg { width: 12px; height: 12px; }
.gf-ev__attach { display: inline-flex; align-items: center; gap: 5px; background: none; padding: 2px 8px; margin: 0;
  border: 1px dashed var(--lq-border); border-radius: var(--radius-pill, 999px); font: inherit; font-size: 11px;
  color: var(--lq-ink-muted); cursor: pointer; white-space: nowrap; }
.gf-ev__attach:hover { color: var(--lq-accent, var(--blue-d)); border-color: var(--lq-accent, var(--blue-d)); border-style: solid; }
.gf-ev__attach svg { width: 12px; height: 12px; }
.gf-ev__l { min-width: 0; color: var(--lq-ink-primary); font-weight: 600; }
.gf-ev__r { display: block; font-weight: 450; font-size: 11px; color: var(--lq-ink-muted);
  margin-top: 2px; overflow-wrap: anywhere; }
.gf-ev__a { margin-top: 10px; }

/* ============================================================================
   SETTINGS → STATUTORY TABLES — APPROVED PAGE 15
   The register that leads the panel, and the callout that closes it. Values are
   the approved canvas's own: an 11px-radius blue-wash note at 12px, and the
   register framed like every other data table in the product.
   ========================================================================== */
.stv { margin-bottom: var(--space-4); }
.stv .table-wrap { border: 1px solid var(--lq-border); border-radius: 10px; overflow: hidden;
  background: var(--lq-surface-card); }
.stv-note { border: 1px solid #cfd8f5; border-radius: 11px; padding: 11px 14px; margin-top: 12px;
  font-size: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--lq-accent) 6%, transparent), transparent 80%), var(--lq-surface-card); }
.stv-note__t { color: var(--lq-accent); font-weight: 650; }
.stv-note__b { color: var(--lq-ink-secondary); margin-top: 5px; line-height: 1.7; }
[data-theme="dark"] .stv-note { border-color: var(--lq-border);
  background: color-mix(in srgb, var(--lq-accent) 12%, var(--lq-surface-card)); }