/* Payroll module styles, ported from the standalone build (2026-09-04).

   EVERY RULE IS SCOPED TO `.pyr`, which the payroll templates put on <main>. The standalone
   sheet styled `body`, `main`, `a` and `h1`-`h3` directly, and its own `.chip`, `.actions`,
   `.num` and `.muted` collide by name with the timesheet's. Dropped into app.css unscoped it
   would have restyled all 23 timesheet pages - the kind of change that looks fine on the page
   you are testing and wrong on the twenty-two you are not.

   The standalone chrome (its topbar, brand mark, footer and page wrapper) is NOT ported: the
   timesheet's base.html already supplies a nav, a wrapper and a footer, and two of each is how a
   module ends up looking like a different product bolted on.

   The palette is declared on `.pyr` rather than `:root` for the same reason. */

/* ONE PALETTE, NOT TWO (design review, 2026-09-17).

   This block used to REDECLARE the whole palette with the standalone build's own hexes, which
   shadowed the app's tokens for everything inside `.pyr`. They were near misses rather than
   clashes, and that is what made it hard to see: a warm slate nav (#39526A) sitting above cool
   blue content (#1f5b8f), 6px radii above 8px radii, four status hues next to the four the app
   already documents. Nothing looked broken on any one screen; the product just never quite read
   as one product.

   It also quietly overruled decisions app.css states outright - "radii - small. CA software should
   read precise, not soft/consumer" was 6px there and 8px here, and "warn/bad are the only
   permitted non-brand hues" was answered with a second set of them.

   So `--ink`, `--line`, `--bg`, `--accent`, `--radius`, `--ok`, `--bad` and `--warn` are no longer
   declared here AT ALL - they inherit, which is the only way two sheets cannot drift. What remains
   is aliases: names this module's ~400 rules already use, pointed at the app's own tokens. Renaming
   the rules instead would have been the same change written 400 times. */
.pyr {
  --muted: var(--ink-3);
  --card: var(--surface);
  --accent-soft: var(--accent-bg);
  --warn-soft: var(--warn-bg);
  --bad-soft: var(--bad-bg);
  --ok-soft: var(--ok-bg);
}


/* ------------------------------------------------------------------ chrome

   WHAT WAS HERE WAS DEAD CSS. The port stripped the standalone build's own topbar SELECTORS but
   left their declaration blocks behind, so this file opened with four rule bodies belonging to
   nothing - which a parser discards. The visible consequence was that `.pyr-sub`, the module's own
   row of links, had NO styling at all and rendered as bare blue hyperlinks under the firm's nav.
   Ayush, 2026-09-16: "the header should have tabs not mere hyperlinks".

   Tabs rather than the nav's pills: this row is a set of VIEWS OF THE SAME THING - one payroll,
   looked at as a month, a report, a tax projection, a master - and a tab that joins the page below
   it says that. The firm-wide nav above keeps its pills, so the two rows stay tellably different. */

.pyr .pyr-sub {
  display: flex; flex-wrap: wrap; gap: 2px;
  margin: 0 0 22px; padding: 0;
  border-bottom: 2px solid var(--line);
}
.pyr .pyr-sub a {
  padding: 9px 16px; margin-bottom: -2px;
  border: 1px solid transparent; border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  color: var(--muted); text-decoration: none; font-weight: 600; font-size: 13px;
}
.pyr .pyr-sub a:hover { background: var(--accent-soft); color: var(--accent); }
/* The active tab is the page: same fill, joined to it through the gap in the rule below. */
.pyr .pyr-sub a.on {
  background: var(--card); color: var(--ink);
  border-color: var(--line); border-bottom: 2px solid var(--card);
}
.pyr .pyr-sub a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

@media (max-width: 700px) {
  .pyr .pyr-sub { gap: 0; }
  .pyr .pyr-sub a { padding: 8px 11px; font-size: 12px; }
}

.pyr h1 { font-size: 24px; margin: 0 0 4px; }
.pyr h2 { font-size: 16px; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.pyr h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted);
     margin: 0 0 10px; }
.pyr .lede { color: var(--muted); margin: 0 0 20px; max-width: 70ch; }

/* ------------------------------------------------------------------ run head */

.pyr .runhead { display: flex; justify-content: space-between; align-items: flex-start;
           gap: 24px; flex-wrap: wrap; margin-bottom: 18px; }
.pyr .status { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .4px; }
.pyr .status.draft { color: var(--warn); }
.pyr .status.paid, .pyr .status.approved { color: var(--ok); }

.pyr .runnav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pyr .chip {
  padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--card); text-decoration: none; color: var(--muted); font-size: 13px;
}
.pyr .chip.on { border-color: var(--accent); background: var(--accent-soft);
           color: var(--accent); font-weight: 600; }
.pyr .chip.locked::after { content: " \1F512"; font-size: 10px; }

/* ------------------------------------------------------------------ totals */

.pyr .totals { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.pyr .tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 16px; min-width: 150px;
}
/* --ink-2, not --muted. app.css documents --muted (--ink-3) at 5.3:1 AGAINST WHITE, and a tile
   can be tinted (.warn / .bad), where the same grey drops under 4.5:1 at 12px - measured 4.45 on
   the recoveries tile. The label is the same colour on every tile, so it is set for the tinted
   worst case rather than for the plain one. */
.pyr .tile .label { display: block; font-size: 12px; color: var(--ink-2); text-transform: uppercase;
               letter-spacing: .5px; }
.pyr .tile .value { display: block; font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums;
               margin-top: 2px; }
.pyr .tile .sub { display: block; font-size: 12px; color: var(--ink-2); }  /* tinted too */
.pyr .tile.big { border-color: var(--accent); }
.pyr .tile.big .value { color: var(--accent); }
.pyr .tile.warn { background: var(--warn-soft); border-color: var(--warn); }
.pyr .tile.warn .value { color: var(--warn); }

/* ------------------------------------------------------------------ actions */

.pyr .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; align-items: center; }
.pyr .inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; }

.pyr button, .pyr .btn {
  font: inherit; padding: 7px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  text-decoration: none; display: inline-block;
}
.pyr button:hover, .pyr .btn:hover { border-color: var(--accent); color: var(--accent); }
.pyr button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.pyr button.primary:hover { filter: brightness(1.08); color: #fff; }
.pyr button.ghost { color: var(--muted); }

.pyr input, .pyr select {
  font: inherit; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 5px; background: #fff; color: var(--ink); width: 100%;
}
.pyr input:focus, .pyr select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.pyr .inline input, .pyr .inline select { width: auto; }

/* A TICKBOX IS NOT A TEXT FIELD, and the width:100% above is for the ones you type in. A checkbox
   that inherits it stretches to fill its flex row, and because the browser keeps a tick square it
   grows in BOTH directions - the giant boxes on the bulk-rules bar and the report's category
   filter. There was already an override for this, but it was written against one CONTAINER
   (`.switches label.check`), so every checkbox added anywhere else was born broken and looked like
   a new bug each time. Scoped to the element instead: nothing has to remember it.
   `flex:none` stops a flex parent stretching it; `align-self:center` keeps it on the text's line
   when the label wraps to two, which is exactly when it used to blow up. */
.pyr input[type=checkbox], .pyr input[type=radio] {
  width: 15px; height: 15px; min-width: 0; flex: none; align-self: center;
  margin: 0; padding: 0; accent-color: var(--accent);
}

/* ------------------------------------------------------------------ grid */

.pyr .block { margin-bottom: 30px; }
/* Same reason: this badge sits ON --line, not on white. 4.05:1 with --muted at 12px. */
.pyr .count { background: var(--line); color: var(--ink-2); border-radius: 999px;
         padding: 1px 8px; font-size: 12px; font-weight: 600; }
.pyr .subtotal { margin-left: auto; color: var(--muted); font-weight: 600;
            font-variant-numeric: tabular-nums; }

.pyr table.grid {
  width: 100%; border-collapse: collapse; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.pyr table.grid th, .pyr table.grid td {
  padding: 8px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 14px;
}
.pyr table.grid thead th {
  background: var(--surface-2); font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); font-weight: 600;
}
.pyr table.grid .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pyr table.grid .pay { font-weight: 650; }
.pyr table.grid .tail { width: 46px; text-align: right; }
.pyr table.grid tbody tr:hover { background: #F6F3EC; }
.pyr table.grid tr.held { background: var(--warn-soft); }
.pyr table.grid tr.held:hover { background: #fbeed6; }
.pyr table.grid tr.inactive { color: var(--muted); }
.pyr table.grid tr.focus { box-shadow: inset 3px 0 0 var(--accent); }
.pyr td.num.bad { color: var(--bad); font-weight: 650; }

.pyr .disclose {
  border: 0; background: none; padding: 0; font: inherit; color: var(--ink);
  cursor: pointer; text-align: left;
}
.pyr .disclose::before { content: "\25B8"; display: inline-block; width: 14px; color: var(--muted); }
.pyr .disclose[aria-expanded="true"]::before { transform: rotate(90deg); }
.pyr .disclose:hover { color: var(--accent); }
.pyr .slip { font-size: 12px; color: var(--muted); text-decoration: none; }
.pyr .slip:hover { color: var(--accent); text-decoration: underline; }

.pyr .tag {
  font-size: 11px; padding: 1px 6px; border-radius: 4px; margin-left: 6px;
  background: var(--line); color: var(--muted); vertical-align: middle; white-space: nowrap;
}
.pyr .tag.hold { background: var(--warn); color: #fff; }
.pyr .tag.off { background: var(--bad-soft); color: var(--bad); }
.pyr .tag.ret { background: var(--accent-soft); color: var(--accent); }
.pyr .tag.pro { background: #eef4ec; color: var(--ok); }

/* The regime a person's TDS is actually being deducted on, marked in place rather than given a
   column. Both regimes are carried all year (the employee chooses at year end), so the figure that
   is NOT being used has to stay as readable as the one that is - a strike or a fade would answer
   the wrong question. */
.pyr td.num.on { font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }


/* The "Check" cell's detail panel. The tag is focusable, so it needs to LOOK clickable and it
   needs a focus ring of its own - the app's global ring is written for fields and buttons.
   The panel itself is fixed-positioned by payroll.js (see the note there: `.scroller` clips it
   otherwise), which is why nothing here positions it. */
.pyr .checkflag { cursor: help; }
.pyr .checkflag:focus-visible { outline: var(--bw-2) solid var(--accent); outline-offset: 2px; }

.pyr .checktip {
  position: fixed; z-index: 60; max-width: 420px;
  background: var(--surface); color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-2);
  font-size: var(--fs-100); line-height: 1.5;
}
.pyr .checktip ul { margin: 0; padding-left: var(--sp-4); }
.pyr .checktip li + li { margin-top: var(--sp-2); }


/* ------------------------------------------------------------------ detail */

.pyr tr.detail > td { background: var(--surface-2); padding: 0; }
.pyr .panes { display: grid; grid-template-columns: minmax(320px, 1fr) minmax(340px, 1.2fr);
         gap: 24px; padding: 18px 20px 22px; }
@media (max-width: 900px) { .pyr .panes { grid-template-columns: 1fr; } }

.pyr .waterfall ol { list-style: none; margin: 0 0 14px; padding: 0; }
.pyr .waterfall li {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  padding: 5px 10px; border-left: 3px solid var(--line); margin-bottom: 2px;
  background: #fff; align-items: baseline;
}
.pyr .waterfall li.credit { border-left-color: var(--ok); }
.pyr .waterfall li.debit { border-left-color: var(--warn); }
.pyr .waterfall li.total { border-left-color: var(--accent); font-weight: 650;
                      background: var(--accent-soft); margin-top: 6px; }
.pyr .w-days { font-variant-numeric: tabular-nums; }
.pyr .w-note { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }

.pyr table.balances { border-collapse: collapse; width: 100%; font-size: 13px; }
.pyr table.balances th { font-size: 11px; text-transform: uppercase; color: var(--muted);
                    text-align: right; padding: 3px 8px; }
.pyr table.balances th:first-child { text-align: left; }
.pyr table.balances td { padding: 3px 8px; border-top: 1px solid var(--line);
                    text-align: right; font-variant-numeric: tabular-nums; }
.pyr table.balances td:first-child { text-align: left; color: var(--muted); }
.pyr table.balances tr.hold-row td { color: var(--warn); font-weight: 600; }

.pyr .note { font-size: 12px; color: var(--muted); margin: 8px 0 0; padding-left: 10px;
        border-left: 2px solid var(--line); }

/* ------------------------------------------------------------------ forms */

.pyr fieldset { border: 0; margin: 0; padding: 0; }
.pyr fieldset[disabled] { opacity: .55; }
.pyr .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
          gap: 10px; margin-bottom: 12px; }
.pyr .fields label, .pyr .switches label.narrow {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 12px; color: var(--muted);
}
.pyr .fields label.wide { grid-column: 1 / -1; }
.pyr .switches { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 12px; }
.pyr .switches label.check { display: flex; flex-direction: row; align-items: center; gap: 6px;
                        font-size: 13px; color: var(--ink); }
.pyr .switches label.narrow { flex-direction: row; align-items: center; gap: 6px; }
.pyr .switches label.narrow input { width: 80px; }
.pyr .hold-reason { max-width: 320px; }

/* ------------------------------------------------------------------ master */

.pyr .newemp { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
          padding: 14px 18px; margin-bottom: 24px; }
.pyr .newemp summary { cursor: pointer; font-weight: 600; }
.pyr .newemp .fields { margin-top: 14px; align-items: end; }

.pyr .empcard { background: var(--card); border: 1px solid var(--line);
           border-radius: var(--radius); padding: 14px 18px; margin-bottom: 10px; }
.pyr .empname { margin-bottom: 10px; }
.pyr .empcard .switches { margin-bottom: 0; }
.pyr .empcard .switches button { margin-left: auto; }
.pyr .retopen { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
           margin: -6px 0 10px; padding: 8px 18px; font-size: 13px;
           border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius); }
.pyr .retopen.unknown { background: var(--warn-soft); }
.pyr .retopen label { display: flex; gap: 6px; align-items: center; margin-left: auto; }

.pyr .tile.bad { background: var(--bad-soft); border-color: var(--bad); }
.pyr .tile.bad .value { color: var(--bad); }

/* ------------------------------------------------------------------ bulk entry grid */

.pyr table.grid.entry td, .pyr table.grid.entry th { padding: 4px 8px; }
.pyr table.grid.entry .name { min-width: 220px; }
.pyr table.grid.entry .name a { text-decoration: none; color: var(--ink); }
.pyr table.grid.entry .name a:hover { color: var(--accent); text-decoration: underline; }
.pyr table.grid.entry td.inputcol { padding: 2px 4px; }
.pyr table.grid.entry th.inputcol { min-width: 92px; }
.pyr table.grid.entry input {
  width: 100%; text-align: right; font-variant-numeric: tabular-nums;
  border-color: transparent; background: #F6F3EC; padding: 5px 7px;
}
.pyr table.grid.entry input:hover { border-color: var(--line); }
.pyr table.grid.entry input:focus {
  background: #fff; border-color: var(--accent); outline: none;
  box-shadow: 0 0 0 2px var(--accent) inset;      /* the spreadsheet cell cursor */
}
.pyr table.grid.entry input.invalid { background: var(--bad-soft); border-color: var(--bad);
                                 color: var(--bad); font-weight: 600; }
.pyr table.grid.entry input.changed { background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
.pyr table.grid.entry tr.inactive input { background: transparent; color: var(--muted); }
.pyr table.grid.entry .spacer { border-bottom-color: transparent; }
.pyr table.grid.entry .soft { color: var(--muted); }

.pyr .savebar {
  position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 16px; margin-top: 8px; box-shadow: 0 -2px 12px rgba(0,0,0,.05);
}
.pyr .savebar .running { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.pyr .dirty { background: var(--accent-soft); color: var(--accent); font-weight: 600;
         padding: 4px 10px; border-radius: 999px; font-size: 13px; }

.pyr .flash { padding: 10px 14px; border-radius: var(--radius); border: 1px solid var(--line);
         background: var(--card); margin: 0 0 16px; }
.pyr .flash.ok { background: #eef6f1; border-color: var(--ok); color: var(--ok); }
.pyr .flash.warn { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }

.pyr kbd { background: var(--line); border-radius: 3px; padding: 1px 5px; font-size: 12px;
      font-family: inherit; }
.pyr .btn.primary-link { background: var(--accent); border-color: var(--accent); color: #fff; }
.pyr .btn.primary-link:hover { filter: brightness(1.08); color: #fff; border-color: var(--accent); }

.pyr .previewstatus { color: var(--muted); font-size: 13px; min-height: 1em; }
.pyr .dirty.bad { background: var(--bad-soft); color: var(--bad); }
.pyr .savebar button[disabled] { opacity: .5; cursor: not-allowed; }
.pyr .savebar .running strong { color: var(--accent); font-variant-numeric: tabular-nums; }

/* A recalculated figure flashes once, so a change three rows away is not missed. */
.pyr td.flash-change { animation: pyr-flash 0.7s ease-out; }
@keyframes pyr-flash {
from { background: var(--accent-soft); }
to { background: transparent; }
}

/* ------------------------------------------------------------------ filter bar */

.pyr .filterbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 12px; margin-bottom: 16px;
  position: sticky; top: 57px; z-index: 15;
}
.pyr .filterbar .tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.pyr .filterbar .tab {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border: 1px solid transparent; border-radius: 999px;
  background: none; color: var(--muted); font: inherit; font-size: 14px; cursor: pointer;
}
.pyr .filterbar .tab:hover { background: var(--bg); }
.pyr .filterbar .tab.on {
  background: var(--accent-soft); border-color: var(--accent);
  color: var(--accent); font-weight: 600;
}
.pyr .filterbar .tab .count {
  background: var(--bg); border-radius: 999px; padding: 0 7px;
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.pyr .filterbar .tab.on .count { background: #fff; color: var(--accent); }

.pyr .filterbar .search { position: relative; margin-left: auto; }
.pyr .filterbar .search input {
  width: 240px; padding: 7px 34px 7px 12px; font: inherit; font-size: 14px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg);
}
.pyr .filterbar .search input:focus {
  outline: none; border-color: var(--accent); background: var(--card);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.pyr .filterbar .search kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font-size: 11px; border: 1px solid var(--line);
  border-radius: 4px; padding: 0 5px; background: var(--card); pointer-events: none;
}
.filterbar .search input:focus + kbd,
.pyr .filterbar .search input:not(:placeholder-shown) + kbd { display: none; }

.pyr .filtercount { font-size: 13px; color: var(--muted); }
.pyr .filtercount.empty { color: var(--warn); font-weight: 600; }

.pyr tr.filtered, .pyr .empcard.filtered, .pyr .retopen.filtered,
.pyr section.block.filtered { display: none; }

/* An edited or unreadable cell keeps its row on screen whatever the filter says - a red cell
   blocks Save, and a hidden red cell blocks it invisibly. */
.pyr tr.pinned > td:first-child { box-shadow: inset 3px 0 0 var(--warn); }

/* ------------------------------------------------------------------ bulk rules */

.pyr .bulkrules {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--accent-soft); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 9px 14px; margin-bottom: 12px;
}
.pyr .bulklabel { font-size: 13px; font-weight: 600; color: var(--accent); }
.pyr .check.bulk { font-size: 14px; color: var(--ink); }
.pyr .check.bulk.touched { font-weight: 600; }
.pyr .check.bulk .ofn { color: var(--muted); font-size: 12px; margin-left: 4px; }
.pyr .bulkrules button { margin-left: auto; }
.pyr .bulkrules button:disabled { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------------------------------ firm rules */

.pyr .policyhead {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 14px;
}
.pyr .policyhead label { display: flex; flex-direction: column; gap: 4px;
                    font-size: 12px; color: var(--muted); }
.pyr .policyhead label.wide { flex: 1; min-width: 220px; }
.pyr .policyhead input { font: inherit; padding: 6px 10px;
                    border: 1px solid var(--line); border-radius: 6px; }
.pyr .policyhead button { margin-left: auto; }

.pyr table.policy td.name { max-width: 340px; }
.pyr table.policy .hint { display: block; color: var(--muted); font-size: 12px; }
.pyr table.policy input { width: 120px; text-align: right; }
.pyr .policyhist { font-size: 12px; color: var(--muted); }
.pyr .policyhist .histrow { display: block; }
.pyr .policyhist em { color: var(--ink); font-style: normal; }

/* Round 2 ---------------------------------------------------------------------------------- */

.pyr .fromwhen { background: var(--warn-soft); border-radius: 6px; padding: 4px 8px; }
.pyr .salhist { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.pyr .salhist span { margin-right: 12px; }

/* A reason cell is prose, not a figure - left aligned and wide enough to read back. */
.pyr td.why, .pyr th.why { text-align: left; }
.pyr td.why input { width: 100%; min-width: 150px; text-align: left; }
.pyr input.needsreason { border-color: var(--warn); background: var(--warn-soft); }

/* Reports ---------------------------------------------------------------------------------- */
.pyr .reportbar {
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end;
  padding: 14px 16px; margin: 0 0 20px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
}
.pyr .reportbar label { display: flex; flex-direction: column; gap: 4px; font-size: 12px;
  color: var(--muted); }
.pyr .reportbar label.wide { flex: 1 1 220px; }
.pyr .reportbar select, .pyr .reportbar input[type="search"] {
  font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px;
  background: #fff; color: var(--ink);
}
.pyr .reportbar fieldset.types {
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px 8px;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.pyr .reportbar fieldset.types legend { font-size: 11px; color: var(--muted); padding: 0 4px; }
.pyr .reportbar label.chk { flex-direction: row; align-items: center; gap: 4px; color: var(--ink); }
.pyr .reportbar .hint { font-size: 11px; color: var(--muted); }
.pyr .reportbar button, .pyr .reportbar .btn { align-self: flex-end; }

/* A wide pivot scrolls inside itself rather than pushing the page sideways. */
.pyr .scroller { overflow-x: auto; margin: 0 0 26px; }
.pyr table.grid.report { min-width: 100%; }
.pyr table.grid.report tfoot th { background: var(--card); font-weight: 650;
  border-top: 2px solid var(--line); position: sticky; bottom: 0; }
.pyr table.grid.report .soft { color: var(--muted); }

/* A button inside a heading must not inherit the heading's size (article page, master export). */
.pyr h1 .btn { font-size: 13px; font-family: inherit; vertical-align: middle; margin-left: 10px; padding: 4px 10px; }
.pyr h1 .soft { font-weight: 400; }


/* =============================================================================================
   THE PAYROLL SCREENS, RE-CUT (2026-10-01)

   Structure, not paint. The module's destinations moved to the rail, so the tab row is gone;
   a month has a head (which month, where the year stands, one primary action), a strip saying
   where it stands, one headline figure with its arithmetic under it, and a list of what to look
   at before closing. One person's pay is a screen of its own instead of a row that unfolds.

   Everything below consumes the app's tokens and sits after the rules above, so where a class
   is shared (.count, .grid, .savebar) the later declaration is the one in force.
   ============================================================================================= */

.pyr .eyebrow { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--green-2); }
.pyr .eyebrow a { color: inherit; text-decoration: none; }
.pyr .eyebrow a:hover { text-decoration: underline; }
.pyr .eyebrow.dim { color: var(--ink-3); }
.pyr .muted { color: var(--ink-2); font-size: var(--fs-200); }

/* buttons: square and flat like the rest of the workbench; rust acts, indigo reads */
.pyr button, .pyr .btn { border-radius: var(--radius); border-color: var(--line-2); font-weight: 600;
  min-height: 36px; padding: 7px 14px; }
.pyr button.primary { background: var(--green); border-color: var(--green); color: #fff; }
.pyr button.primary:hover { background: var(--green-2); border-color: var(--green-2); filter: none; }
.pyr button.outline, .pyr .btn.outline { border-color: var(--accent); color: var(--accent); }
.pyr .btn.sq { min-width: 36px; text-align: center; padding: 7px 0; }
.pyr input, .pyr select { border-radius: var(--radius); border-color: var(--line-2); }

/* ---- pills: one vocabulary for status, everywhere ---- */
.pyr .pill { display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: 700;
  letter-spacing: 0; text-transform: none; white-space: nowrap; vertical-align: middle;
  background: var(--line); color: var(--ink-2); }
.pyr .pill.ok { background: var(--ok-bg); color: var(--ok); }
.pyr .pill.warn { background: var(--warn-bg); color: var(--warn); }
.pyr .pill.bad { background: var(--bad-bg); color: var(--bad); }
.pyr .pill.info, .pyr .pill.open { background: var(--accent-bg); color: var(--accent-2); }
.pyr .pill.closed { background: var(--ok-bg); color: var(--ok); }
.pyr .pill.off { background: var(--line); color: var(--ink-2); }

/* ---- the head of a screen ---- */
.pyr .mhead { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap;
  margin: calc(-1 * var(--sp-6)) calc(-1 * var(--sp-7)) 0; padding: var(--sp-4) var(--sp-7);
  background: var(--surface); border-bottom: 1px solid var(--line); }
.pyr .mhead h1 { margin: 0; font-size: 1.5rem; display: flex; align-items: center; gap: var(--sp-3); }
.pyr .mhead-when { margin: 2px 0 0; font-size: 12px; color: var(--ink-2); }
.pyr .mhead-act { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.pyr .mhead-act .vr { width: 1px; height: 24px; background: var(--line-2); margin: 0 var(--sp-1); }

.pyr .fy { display: flex; gap: 2px; }
.pyr .fy-m { width: 38px; padding: 6px 0 4px; text-align: center; font-size: 11px; font-weight: 700;
  text-decoration: none; background: var(--surface); border-bottom: 3px solid var(--line);
  color: var(--ink-3); }
.pyr .fy-m.closed { color: var(--ok); border-bottom-color: var(--ok); }
.pyr .fy-m.open { color: var(--accent); border-bottom-color: var(--accent); }
.pyr .fy-m.on { background: var(--accent); border-bottom-color: var(--accent); color: #fff; }
.pyr .fy-m.closed.on { background: var(--ok); border-bottom-color: var(--ok); }
.pyr a.fy-m:hover { background: var(--accent-bg); color: var(--accent-2); }
.pyr a.fy-m.on:hover { background: var(--accent-2); color: #fff; }

/* the Outputs menu: a <details>, so it opens with no script */
.pyr .menu { position: relative; }
.pyr .menu > summary { list-style: none; cursor: pointer; }
.pyr .menu > summary::-webkit-details-marker { display: none; }
.pyr .menu > summary::after { content: " \25BE"; }
.pyr .menu-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 200px;
  background: var(--surface); border: 1px solid var(--line-2); box-shadow: var(--shadow-2);
  display: flex; flex-direction: column; }
.pyr .menu-list a { padding: 10px 14px; text-decoration: none; color: var(--ink); font-weight: 600; }
.pyr .menu-list a:hover { background: var(--accent-bg); color: var(--accent-2); }

/* ---- where the month stands ---- */
.pyr .steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0 calc(-1 * var(--sp-7)) var(--sp-6); padding: 0 var(--sp-7);
  background: var(--surface); border-bottom: 1px solid var(--line); }
.pyr .steps li { display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 0; border-top: 3px solid var(--line); margin-top: -1px;
  font-weight: 700; color: var(--ink-2); }
.pyr .steps li a { color: inherit; text-decoration: none; }
.pyr .steps li a:hover { text-decoration: underline; }
.pyr .steps small { display: block; font-size: 12px; font-weight: 400; color: var(--ink-2); }
.pyr .steps .dot { flex: none; width: 22px; height: 22px; border-radius: 50%; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--line); color: var(--ink-2); }
.pyr .steps li.now { border-top-color: var(--accent); color: var(--ink); }
.pyr .steps li.now .dot { background: var(--accent); color: #fff; }
.pyr .steps li.done { border-top-color: var(--ok); color: var(--ink); }
.pyr .steps li.done .dot { background: var(--ok); color: #fff; }

/* ---- one headline, its arithmetic, and the checks ---- */
.pyr .overview { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--sp-6); margin-bottom: var(--sp-6); }
.pyr .twocol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5); margin: var(--sp-5) 0; }
.pyr .sum, .pyr .checks, .pyr .regimes { background: var(--surface); border: 1px solid var(--line);
  padding: var(--sp-6); }
.pyr .sum h2, .pyr .checks h2, .pyr .regimes h2 { margin: 0 0 var(--sp-2); flex-wrap: wrap; }
.pyr h2 small { font-size: var(--fs-200); font-weight: 400; color: var(--ink-2); }
.pyr .headline { margin: 2px 0 var(--sp-4); font-size: 2.75rem; font-weight: 800; letter-spacing: -.03em;
  line-height: 1.1; font-variant-numeric: tabular-nums; }
.pyr .headline.sm { font-size: 2.125rem; }
.pyr .headline small { font-size: var(--fs-300); font-weight: 400; letter-spacing: 0; color: var(--ink-2);
  margin-left: var(--sp-2); }
.pyr .headline s { color: var(--ink-3); }

.pyr .ledger { margin: 0; border-top: 1px solid var(--line-2); }
.pyr .ledger > div { display: flex; align-items: baseline; gap: var(--sp-3); padding: 8px 0;
  border-bottom: 1px solid var(--line); }
.pyr .ledger dt { flex: 1 1 auto; display: flex; align-items: baseline; gap: var(--sp-2); }
.pyr .ledger dt i { flex: none; width: 14px; font-style: normal; font-weight: 700; color: var(--ink-3); }
.pyr .ledger dt small { color: var(--ink-2); font-size: 12px; margin-left: var(--sp-2); }
.pyr .ledger dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pyr .ledger .warn dt, .pyr .ledger .warn dd { color: var(--warn); }
.pyr .ledger .bad dt, .pyr .ledger .bad dd { color: var(--bad); }
.pyr .ledger .credit dd { color: var(--ok); }
.pyr .ledger .total { border-bottom: 0; padding-top: 10px; font-weight: 800; }
.pyr .ledger .total dd { font-weight: 800; }
.pyr .ledger .total dt i { color: var(--ink); }

.pyr .checks { display: flex; flex-direction: column; }
.pyr .checks > .muted { margin: 0 0 var(--sp-3); }
.pyr .check-row { display: flex; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--line);
  text-decoration: none; color: var(--ink); }
.pyr .check-row:hover { background: var(--surface-2); }
.pyr .check-row .kind { flex: none; width: 88px; padding-top: 2px; font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.pyr .check-row .kind.bad { color: var(--bad); }
.pyr .check-row .kind.warn { color: var(--warn); }
.pyr .check-row .kind.info { color: var(--accent-2); }
.pyr .check-row .body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.pyr .check-row .body span { font-size: var(--fs-200); color: var(--ink-2); }
.pyr .check-row .go { flex: none; font-size: var(--fs-200); font-weight: 700; color: var(--accent); white-space: nowrap; }
.pyr .check-none { margin: 0; padding: var(--sp-4) 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.pyr .checks-foot { margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--line-2);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }

/* ---- people ---- */
.pyr .people-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.pyr .people-head h2 { margin: 0; }
.pyr .people-head .btn { margin-left: auto; }
.pyr .filterbar { position: static; border-radius: var(--radius); padding: var(--sp-2) var(--sp-3); }
.pyr .filterbar .tab { border-radius: var(--radius-sm); border-color: var(--line-2); color: var(--ink); font-weight: 600;
  font-size: var(--fs-200); min-height: 32px; }
.pyr .filterbar .tab.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.pyr .filterbar .tab.on .count { background: transparent; color: #fff; }
.pyr .filterbar .tab .count { background: transparent; padding: 0; font-weight: 400; color: var(--ink-2); }
.pyr .filterbar .search input { border-radius: var(--radius-sm); background: var(--surface); }
.pyr .filterbar .search kbd { border-radius: 4px; }

.pyr .block { margin-bottom: var(--sp-5); }
.pyr h3.grade { display: flex; align-items: center; gap: var(--sp-2); margin: 0; padding: 10px var(--sp-4);
  background: var(--surface-2); border: 1px solid var(--line); border-bottom: 0;
  font-size: 11px; letter-spacing: .08em; }
.pyr h3.grade .count { background: transparent; padding: 0; font-weight: 400; }
.pyr h3.grade .subtotal { text-transform: none; letter-spacing: 0; font-size: var(--fs-200); color: var(--ink); }
.pyr table.grid { border-radius: 0; }
.pyr table.grid thead th { background: var(--surface); font-size: 11px; letter-spacing: .06em; }
.pyr table.grid tr.held { background: var(--bad-bg); }
.pyr table.grid tr.held:hover { background: var(--bad-bg); }
.pyr table.grid.people .name a { font-weight: 700; text-decoration: none; }
.pyr table.grid.people .name a:hover { text-decoration: underline; }
.pyr table.grid.people .st { white-space: nowrap; }
.pyr table.grid .soft { color: var(--ink-2); }
.pyr table.grid.people .tail { width: 96px; white-space: nowrap; }
.pyr .slip { font-size: 12px; font-weight: 600; color: var(--accent); margin-left: 6px; }

.pyr .openmonth { display: flex; align-items: center; gap: var(--sp-2); justify-content: flex-end;
  margin-top: var(--sp-5); }
.pyr .openmonth select, .pyr .openmonth input { width: auto; }

/* ---- one person ---- */
.pyr-pane .pane-back { font-size: var(--fs-200); font-weight: 700; text-decoration: none; }
.pyr-pane .pane-list { overflow-y: auto; }
.pyr-pane .pane-row .c { display: flex; align-items: center; gap: var(--sp-2); }
.pyr-pane .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.pyr-pane .dot.ok { background: var(--ok); }
.pyr-pane .dot.warn { background: #B7791F; }
.pyr-pane .dot.bad { background: var(--bad); }
.pyr-pane .dot.info { background: var(--accent); }
.pyr-pane .pane-row .m { display: flex; justify-content: space-between; gap: var(--sp-2); padding-left: 16px; }
.pyr-pane .pane-row.on { background: var(--accent-bg); box-shadow: inset 3px 0 0 var(--accent); }
.pyr-pane .pane-row.on .m { color: var(--accent-2); }

.pyr .callout { display: flex; flex-direction: column; gap: 2px; margin: var(--sp-5) 0 0;
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line-2); background: var(--surface);
  font-size: var(--fs-200); }
.pyr .callout b { font-size: var(--fs-300); }
.pyr .callout ul { margin: var(--sp-1) 0 0; padding-left: var(--sp-5); }
.pyr .callout.warn { background: var(--warn-bg); border-color: var(--warn); color: var(--warn); }
.pyr .callout.bad { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.pyr .callout.info { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-2); }
.pyr .callout + .twocol { margin-top: var(--sp-4); }

.pyr table.balances { margin-top: var(--sp-5); }
.pyr table.balances thead th { border-bottom: 1px solid var(--line-2); padding: 6px 0; letter-spacing: .06em; }
.pyr table.balances tbody th { text-align: left; font-weight: 400; padding: 7px 0;
  border-top: 1px solid var(--line); font-size: 13px; text-transform: none; color: var(--ink); }
.pyr table.balances td { padding: 7px 0; }
.pyr table.balances td:first-child { text-align: right; color: var(--ink); }
.pyr table.balances td:last-child { font-weight: 700; }

.pyr .notes { margin: 0 0 var(--sp-5); padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-7);
  background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-200); color: var(--ink-2); }

.pyr .inputs-card { background: var(--surface); border: 1px solid var(--line); }
.pyr .inputs-card fieldset { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pyr .inputs-card .figs { padding: var(--sp-5) var(--sp-6); border-right: 1px solid var(--line); }
.pyr .inputs-card .decide { padding: var(--sp-5) var(--sp-6); background: var(--surface-2);
  display: flex; flex-direction: column; gap: var(--sp-3); }
.pyr .inputs-card h2 { margin: 0; }
.pyr .inputs-card .muted { margin: 2px 0 var(--sp-4); }
.pyr .inputs-card .fields { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3) var(--sp-4); margin: 0; }
.pyr .fields label { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.pyr .fields input { min-height: 40px; text-align: right; font-variant-numeric: tabular-nums; }
.pyr .fields label.wide input { text-align: left; }
.pyr .decide .switches { flex-direction: column; align-items: stretch; gap: var(--sp-2); margin: 0; }
.pyr .decide .switches label.check { min-height: 44px; padding: 0 var(--sp-3); gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--line); }
.pyr .decide .hold-reason { max-width: none; min-height: 40px; }
.pyr .decide .switches label.narrow { justify-content: space-between; font-size: 13px; color: var(--ink); }
.pyr .decide .switches label.narrow input { width: 120px; min-height: 40px; text-align: right; }
.pyr .decide-foot { margin-top: auto; padding-top: var(--sp-3); display: flex; align-items: center;
  gap: var(--sp-3); flex-wrap: wrap; }
.pyr .decide-foot .muted { margin: 0; }

/* ---- the entry grid ---- */
.pyr .gridhelp { margin: var(--sp-5) 0 var(--sp-4); padding: 10px var(--sp-4); background: var(--accent-bg);
  border: 1px solid #CFD6CF; color: var(--accent-2); font-size: var(--fs-200); }
.pyr .gridhelp summary { cursor: pointer; list-style: none; }
.pyr .gridhelp summary::-webkit-details-marker { display: none; }
.pyr .gridhelp .more { margin-left: var(--sp-3); padding: 3px 10px; background: var(--surface);
  border: 1px solid #AEB8B0; font-weight: 700; white-space: nowrap; }
.pyr .gridhelp[open] .more { display: none; }
.pyr .gridhelp p { margin: var(--sp-3) 0 0; max-width: 90ch; }
.pyr .gridhelp kbd { background: var(--surface); border: 1px solid #AEB8B0; border-radius: 0; }

.pyr table.grid.entry thead tr.bands th { padding-bottom: 2px; border-bottom: 0; }
.pyr table.grid.entry th.band { text-align: left; }
.pyr table.grid.entry th.band.key { color: var(--accent-2); }
.pyr table.grid.entry th.band.out, .pyr table.grid.entry .out-first { border-left: 2px solid var(--line-2); }
.pyr table.grid.entry th[rowspan] { vertical-align: bottom; }
.pyr table.grid.entry input { min-height: 38px; background: var(--surface); border-color: var(--line); border-radius: 0; }
.pyr table.grid.entry .name a { font-weight: 700; }
.pyr .sub { display: block; font-size: 12px; color: var(--ink-2); }
.pyr .sub.bad { color: var(--bad); }
.pyr .sub.warn { color: var(--warn); }
.pyr .sub.info { color: var(--accent-2); }
.pyr .block .scroller { margin: 0; }

.pyr .savebar { gap: var(--sp-4); margin: var(--sp-5) calc(-1 * var(--sp-7)) calc(-1 * var(--sp-6));
  padding: var(--sp-3) var(--sp-7); background: var(--ink); color: #fff; border: 0; border-radius: 0;
  box-shadow: none; z-index: 20; }
.pyr .savebar .dirty { background: var(--accent); color: #fff; border-radius: 0; }
.pyr .savebar .dirty.bad { background: var(--bad); color: #fff; }
.pyr .savebar .previewstatus { color: #C9CBC3; }
.pyr .savebar .running { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; color: #fff; }
.pyr .savebar .running small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #C9CBC3; }
.pyr .savebar .running strong { color: #fff; font-size: 1.25rem; }
.pyr .savebar .btn { background: transparent; color: #fff; border-color: #6B7580; }
.pyr .savebar .btn:hover { border-color: #fff; color: #fff; }

/* ---- income tax, one person ---- */
.pyr .taxgrid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--sp-6);
  align-items: start; margin-top: var(--sp-6); }
.pyr .taxmain, .pyr .taxside { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.pyr .yearbar { display: block; width: 100%; height: 26px; margin: var(--sp-3) 0 var(--sp-1);
  appearance: none; -webkit-appearance: none; border: 1px dashed var(--ink-3); background: var(--line); }
.pyr .yearbar::-webkit-progress-bar { background: var(--line); }
.pyr .yearbar::-webkit-progress-value { background: var(--ink); }
.pyr .yearbar::-moz-progress-bar { background: var(--ink); }
.pyr .yearkey { display: flex; justify-content: space-between; margin: 0 0 var(--sp-3); font-size: 12px; font-weight: 700; }
.pyr .yearkey .proj { color: var(--ink-2); }
.pyr .regimes { padding: 0; }
.pyr .regimes h2 { padding: var(--sp-4) var(--sp-5); margin: 0; border-bottom: 1px solid var(--line); }
.pyr table.regime { border: 0; }
.pyr table.regime th small { display: block; font-size: 11px; font-weight: 700; text-transform: none; letter-spacing: 0; min-height: 1em; }
.pyr table.regime thead th.num { width: 200px; font-size: var(--fs-300); text-transform: none; letter-spacing: 0; color: var(--ink); }
.pyr table.regime .chosen { background: var(--accent-bg); }
.pyr table.regime thead th.chosen { color: var(--accent-2); box-shadow: inset 0 -2px 0 var(--accent); }
.pyr table.regime tbody td:first-child { color: var(--ink-2); }
.pyr table.regime tr.strong th, .pyr table.regime tr.strong td { font-weight: 800; color: var(--ink); }
.pyr table.regime tfoot th, .pyr table.regime tfoot td { font-weight: 700; }
.pyr table.regime tbody th, .pyr table.regime tfoot th { text-transform: none; letter-spacing: 0;
  font-size: 14px; color: var(--ink); background: var(--surface); }
.pyr table.grid.entry td.why input { text-align: left; }
.pyr table.regime tfoot td:not(.chosen) { background: var(--surface); }
.pyr table.regime tfoot tr:first-child th, .pyr table.regime tfoot tr:first-child td {
  border-top: 2px solid var(--line-2); font-size: var(--fs-400); font-weight: 800; }

.pyr .deduct { background: var(--ink); color: #fff; padding: var(--sp-6); }
.pyr .deduct .eyebrow { color: #C9CBC3; }
.pyr .deduct .headline { margin: 2px 0; }
.pyr .deduct .sub { color: #C9CBC3; margin: 0 0 var(--sp-4); }
.pyr .deduct dl { margin: 0 0 var(--sp-4); border-top: 1px solid #34414E; font-size: var(--fs-200); }
.pyr .deduct dl div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #2A3642; }
.pyr .deduct dt { color: #C9CBC3; }
.pyr .deduct dd { margin: 0; font-variant-numeric: tabular-nums; }
.pyr .deduct dl .total { border-bottom: 0; font-weight: 800; }
.pyr .deduct dl .total dt { color: #fff; }
.pyr .deduct button.primary { width: 100%; min-height: 44px; }
.pyr .deduct .fine { color: #C9CBC3; }
.pyr .fine { margin: var(--sp-2) 0 0; font-size: 12px; color: var(--ink-2); }
.pyr .declare { background: var(--surface); border: 1px solid var(--line); padding: var(--sp-5);
  display: flex; flex-direction: column; gap: var(--sp-3); }
.pyr .declare h2 { margin: 0; }
.pyr .declare label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.pyr .declare input, .pyr .declare select { min-height: 40px; }
.pyr .declare button { align-self: flex-start; }
.pyr .sum.alt { padding: var(--sp-5); }

@media (max-width: 1100px) {
  .pyr .overview, .pyr .twocol, .pyr .taxgrid, .pyr .inputs-card fieldset { grid-template-columns: minmax(0, 1fr); }
  .pyr .inputs-card .figs { border-right: 0; border-bottom: 1px solid var(--line); }
  .pyr .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pyr .inputs-card .fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .pyr .mhead, .pyr .steps, .pyr .savebar { margin-left: calc(-1 * var(--sp-4)); margin-right: calc(-1 * var(--sp-4));
    padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .pyr .fy { order: 3; width: 100%; overflow-x: auto; }
}


/* ------------------------------------------------------- site aesthetic (2026-10-03)

   The module now wears ayushmutha.in's look with the rest of the app: paper sheets with rounded
   corners on the sage desk, and the small uppercase labels in the site's mono. Kept at the END of
   the sheet and scoped to `.pyr`, so every rule above stays as it was and this block is the whole
   of the change. */
.pyr .overview > *, .pyr .card, .pyr .filterbar, .pyr .deduct { border-radius: var(--radius-lg); }
.pyr .eyebrow { font-family: var(--font-mono); font-weight: 500; letter-spacing: .08em; }

/* Phone. The month's table keeps the person, the one status and what is paid; seven columns do not
   fit 390px and the page was scrolling sideways. The three working columns (gross, taken off,
   added) are on the person's page, which the name opens. */
@media (max-width: 700px) {
  .pyr table.grid.people th:nth-child(n+3):nth-child(-n+5),
  .pyr table.grid.people td:nth-child(n+3):nth-child(-n+5) { display: none; }
  .pyr table.grid.people th, .pyr table.grid.people td { padding: 8px 10px; }
  .pyr table.grid.people .st { white-space: normal; }
  .pyr table.grid.people .tail { width: auto; white-space: normal; }
  .pyr table.grid.people .st .pill { white-space: normal; }
  .pyr table.grid.people .slip { display: block; margin-left: 0; }
  /* A fieldset will not shrink below its content unless told to, so the entry grid's own
     scroller never got the chance to scroll and the whole page did instead. */
  .pyr fieldset { min-width: 0; }
  .pyr table.grid.policy:not(.regime) { display: block; overflow-x: auto; }
  /* The two regimes are the point of this table, so both columns stay on screen. */
  .pyr table.grid.regime th, .pyr table.grid.regime td { padding: 8px; font-size: 13px; }
  .pyr table.regime thead th.num { width: auto; font-size: 13px; }
  .pyr table.regime th:first-child, .pyr table.regime thead th.num small { white-space: normal; }
  .pyr table.regime tbody th, .pyr table.regime tfoot th { font-size: 13px; }
  .pyr table.regime tfoot tr:first-child th, .pyr table.regime tfoot tr:first-child td { font-size: 14px; }
  .pyr table.grid.regime th:first-child, .pyr table.grid.regime td:first-child { padding-left: var(--sp-4); }
  .pyr table.grid.regime th:last-child, .pyr table.grid.regime td:last-child { padding-right: var(--sp-4); }
  .pyr .savebar { flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
}