/* Ported HR screens: dashboard · day · month · people.
 *
 * Kept out of styles.css because these four arrived together as one migration
 * and will be revised together; styles.css is already long enough that finding
 * anything in it is a search rather than a scroll.
 *
 * They share the .aops-* status swatches defined in styles.css rather than
 * inventing a second palette, so a green cell means the same thing on the month
 * matrix and on the dashboard. Brand green #3C7538. No blue anywhere: nothing
 * here sits in hue 180–260.
 */

/* ── dashboard ─────────────────────────────────────────────────────────── */
.hrd-tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:0 0 16px}
/* A tile is a BUTTON, not a hover target. The preview's own note records why:
 * v1 could only be reached by hovering, and hover does not exist on the
 * factory's phones — which is where this is actually read. */
.hrd-tile{position:relative;text-align:left;background:var(--surface,#fff);border:1px solid var(--line,#d9ded9);
  border-radius:14px;padding:14px;font:inherit;cursor:pointer;min-height:88px;display:block;width:100%}
.hrd-tile:focus-visible{outline:3px solid #3C7538;outline-offset:2px}
.hrd-tlabel{display:block;font-size:13.5px;color:var(--muted,#5b6560);margin:0 0 4px}
.hrd-tval{display:block;font-size:28px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.hrd-tsub{display:block;font-size:13.5px;color:var(--muted,#5b6560);margin-top:3px}
.hrd-tile.ok .hrd-tval{color:#2E6B2A}
.hrd-tile.warn .hrd-tval{color:#8A6A05}
.hrd-tile.bad .hrd-tval{color:#C0392B}
.hrd-tip{display:none;position:absolute;left:12px;right:12px;top:100%;z-index:5;margin-top:6px;
  background:#20241f;color:#f3f5f2;border-radius:10px;padding:10px 12px;font-size:15px;text-align:left;
  box-shadow:0 8px 24px rgba(0,0,0,.28)}
.hrd-tile[aria-expanded="true"] .hrd-tip,.hrd-tile:hover .hrd-tip{display:block}
/* The rows inside the DARK panel. Two files define .hrd-tip: this one makes it
   a dark floating card, the module makes it an inline block and colours its
   rows from the LIGHT theme (--muted on the label, --ink on the number). The
   child rules win on specificity, so the numbers rendered #1B1B19 on #20241f —
   1.1:1, which is invisible. It went unnoticed while a second, readable
   tooltip was drawn on top of it; removing that duplicate (owner, 1 Sep) left
   this one carrying the information alone. Measured after: 10.2:1 and 15.7:1. */
.hrd-tip .hrd-tr{color:#C9D2C6}
.hrd-tip .hrd-tr b{color:#FFFFFF}
.hrd-tip .hrd-sum{border-top-color:rgba(255,255,255,.18)}
.hrd-tip .r{display:flex;justify-content:space-between;gap:12px;padding:2px 0}
.hrd-chart{display:flex;align-items:flex-end;gap:6px;height:150px;padding:6px 0}
.hrd-col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.hrd-bar{width:100%;border-radius:3px 3px 0 0}
.hrd-clab{font-size:12.5px;color:var(--muted,#5b6560);text-align:center;margin-top:5px;white-space:nowrap}
.hrd-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13.5px;margin-top:8px}
.hrd-lg{display:inline-flex;align-items:center;gap:6px;color:var(--muted,#5b6560)}
.hrd-lg i{width:12px;height:12px;border-radius:3px;display:inline-block}
.hrd-lead{font-size:26px;font-weight:700;line-height:1.15}
.hrd-note,.hrd-hint{font-size:15px;color:var(--muted,#5b6560);margin:2px 0 10px}
.hrd-people{display:flex;flex-direction:column;gap:6px;max-height:250px;overflow:auto}
.hrd-person{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;min-height:44px}
.hrd-person:hover{background:rgba(60,117,56,.06)}
.hrd-pname{flex:1;min-width:0;font-size:15px}
.hrd-pmeta{font-size:13px;color:var(--muted,#5b6560)}
.hrd-pill{font-size:12.5px;border-radius:999px;padding:3px 9px;background:#F1EEE6;color:#6b6355;white-space:nowrap}
.hrd-open{border:1px solid var(--line,#d9ded9);background:var(--surface,#fff);border-radius:8px;
  padding:6px 12px;font:inherit;font-size:15px;cursor:pointer;min-height:38px}
.hrd-open:focus-visible{outline:3px solid #3C7538;outline-offset:2px}
/* Visually hidden, still announced — the chart's numbers must reach a screen
 * reader, since a stack of coloured bars says nothing on its own. */
.hrd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── day ───────────────────────────────────────────────────────────────── */
.hday-strip{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.hday-f{border:1px solid var(--line,#d9ded9);background:var(--surface,#fff);border-radius:11px;
  padding:8px 13px;font:inherit;cursor:pointer;min-height:44px;display:flex;flex-direction:column;
  align-items:flex-start;line-height:1.2}
.hday-f[aria-pressed="true"]{border-color:#3C7538;box-shadow:inset 0 0 0 1px #3C7538}
.hday-f:focus-visible{outline:3px solid #3C7538;outline-offset:2px}
.hday-f b{font-size:17px;font-variant-numeric:tabular-nums}
.hday-f span{font-size:13px;color:var(--muted,#5b6560);display:inline-flex;align-items:center;gap:5px}
.hday-f i{width:10px;height:10px;border-radius:3px;display:inline-block}
.hday-searchlab{display:block;margin:0 0 12px}
.hday-search{width:100%;max-width:340px;border:1px solid var(--line,#d9ded9);border-radius:10px;
  padding:11px 13px;font:inherit;font-size:15.5px;min-height:44px}
.hday-search:focus-visible{outline:3px solid #3C7538;outline-offset:1px}
.hday-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.hday-who{display:flex;flex-direction:column;gap:1px;min-width:0}
.hday-dash{color:var(--muted,#5b6560)}
.hday-tag{display:inline-block;font-size:12.5px;border-radius:999px;padding:3px 9px;white-space:nowrap}
.hday-flagtext{display:block;font-size:12.5px;color:var(--muted,#5b6560);margin-top:2px}
.hday-warn{display:block;font-size:12.5px;color:#8A6A05;margin-top:2px}
.hday-pen{font-variant-numeric:tabular-nums;white-space:nowrap}
.hday-acts{display:flex;gap:6px;flex-wrap:wrap}
.hday-act,.hday-act-edit{border:1px solid var(--line,#d9ded9);background:var(--surface,#fff);
  border-radius:8px;padding:6px 12px;font:inherit;font-size:15px;cursor:pointer;min-height:38px}
.hday-act-edit{border-color:#3C7538;color:#2E6B2A}
.hday-act:focus-visible,.hday-act-edit:focus-visible{outline:3px solid #3C7538;outline-offset:2px}
/* Phone: the nine-column table becomes stacked cards. A 9-col table at 375px is
 * five swipes wide and unreadable; data-l carries the header into the cell. */
.hday-cards{display:flex;flex-direction:column;gap:10px}
.hday-card{border:1px solid var(--line,#d9ded9);border-radius:13px;padding:12px;background:var(--surface,#fff)}
.hday-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
.hday-kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:15px;margin:0}
.hday-kv dt{color:var(--muted,#5b6560)}
.hday-kv dd{margin:0;font-variant-numeric:tabular-nums}
.hday-row td[data-l]::before{content:attr(data-l) " ";color:var(--muted,#5b6560);font-size:12.5px}
@media (min-width:821px){.hday-row td[data-l]::before{content:none}}

/* ── month ─────────────────────────────────────────────────────────────── */
.hm-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.hm-matrix{border-collapse:separate;border-spacing:2px;font-size:13.5px;width:max-content;table-layout:fixed}
.hm-tot{text-align:center;font-variant-numeric:tabular-nums;padding:0 5px;font-weight:600}
.hm-cards{display:flex;flex-direction:column;gap:10px}
.hm-card{border:1px solid var(--line,#d9ded9);border-radius:13px;padding:12px;background:var(--surface,#fff);
  width:100%;text-align:left;font:inherit;cursor:pointer}
.hm-card:focus-visible{outline:3px solid #3C7538;outline-offset:2px}
.hm-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.hm-card-name{font-weight:600;font-size:15.5px}
.hm-card-sub{font-size:13px;color:var(--muted,#5b6560)}
.hm-strip{display:flex;gap:2px;flex-wrap:wrap;margin:0 0 8px}
.hm-strip i{width:9px;height:16px;border-radius:2px;display:inline-block}
.hm-sums{display:flex;gap:12px;flex-wrap:wrap;font-size:13.5px;font-variant-numeric:tabular-nums}
.hm-detail{border:1px solid #3C7538;border-radius:13px;padding:14px;margin:0 0 14px;background:var(--surface,#fff)}
.hm-punch{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:15px;margin:8px 0}
.hm-punch dt{color:var(--muted,#5b6560)}
.hm-punch dd{margin:0;font-variant-numeric:tabular-nums}
/* An unknown duration must LOOK unknown. Rendering it like a measured zero is
 * exactly the defect these screens exist to stop repeating. */
.hm-unknown{color:var(--muted,#5b6560);font-style:italic}
.hm-why{font-size:15px;color:var(--muted,#5b6560);margin:6px 0 0}
.hm-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* ── people ────────────────────────────────────────────────────────────── */
.hpl-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.hpl-search{flex:1;min-width:220px;border:1px solid var(--line,#d9ded9);border-radius:10px;
  padding:11px 13px;font:inherit;font-size:15.5px;min-height:44px}
.hpl-search:focus-visible{outline:3px solid #3C7538;outline-offset:1px}
.hpl-sets{display:flex;gap:6px;flex-wrap:wrap}
.hpl-sets button{border:1px solid var(--line,#d9ded9);background:transparent;border-radius:999px;
  padding:7px 15px;font:inherit;font-size:15px;font-weight:600;color:var(--muted,#5b6560);
  cursor:pointer;min-height:40px}
.hpl-sets button[aria-pressed="true"]{background:#3C7538;border-color:#3C7538;color:#fff}
.hpl-sets button:focus-visible{outline:3px solid #3C7538;outline-offset:2px}
.hpl-scroll{overflow-x:auto;min-width:0;max-width:100%}
.hpl-table{width:100%;border-collapse:collapse;font-size:15px}
.hpl-table th,.hpl-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line,#eef1ee)}
.hpl-table th{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted,#5b6560)}
.hpl-who{display:flex;align-items:center;gap:10px;min-width:0}
.hpl-av{width:32px;height:32px;border-radius:50%;background:#E8EFE7;color:#2E6B2A;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:700}
.hpl-who-c{min-width:0}
.hpl-n{font-variant-numeric:tabular-nums;text-align:right}
.hpl-none{color:var(--muted,#5b6560)}
/* Pay withheld reads differently from pay unset. "—" would say this person has
 * no salary configured; italic muted says you are not the one who may see it. */
.hpl-denied{color:var(--muted,#5b6560);font-style:italic}
.hpl-act{border:1px solid var(--line,#d9ded9);background:var(--surface,#fff);border-radius:8px;
  padding:6px 12px;font:inherit;font-size:15px;cursor:pointer;min-height:38px}
.hpl-act:focus-visible{outline:3px solid #3C7538;outline-offset:2px}

/* A payslip note sits under the line it explains — the loan balance and the
 * capped-instalment sentence. Muted, but never so faint it stops being read:
 * this note is the thing that lets a worker catch a wrong deduction. */
.pay-note{font-weight:400;color:var(--muted,#5b6560);padding-top:2px;padding-bottom:8px;text-align:left}


/* ── /attendance (redesign, 9 Aug 2026) ─────────────────────────── */
/* ── /attendance · My attendance (employee) ────────────────────────────────
 * The register keeps its table markup; under 821px the same rows restack into
 * day-cards (the .hday-cards move) with data-l carrying each column's name
 * into the cell. Namespace: .hatt- only — shared classes stay untouched.
 * Text alignment is inherited from the owner rule (tables centre-aligned,
 * styles.css 2 Aug 2026) — nothing here fights it. */
.hatt-reg .table td{vertical-align:top}
.hatt-when strong{display:block;font-size:15px}
.hatt-when small,.hatt-t small,.hatt-st small{display:block;margin-top:3px;color:var(--muted,#5b6560);font-size:13.5px;line-height:1.35;font-variant-numeric:normal;white-space:normal}
.hatt-t{font-variant-numeric:tabular-nums;white-space:nowrap}
.hatt-st small.hatt-flag{color:var(--amber,#8b590b)}
.hatt-st small.hatt-note{font-style:italic;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:420px;margin-left:auto;margin-right:auto}
@media (max-width:820px){
  .hatt-reg .table-wrap{overflow:visible}
  .hatt-reg table.table{min-width:0;display:block;border:0}
  .hatt-reg table.table thead{display:none}
  .hatt-reg table.table tbody{display:flex;flex-direction:column;gap:10px}
  .hatt-reg table.table tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;border:1px solid var(--line,#d9ded9);border-radius:13px;padding:12px;background:var(--card,#fff)}
  .hatt-reg table.table tbody tr td{display:block;border:0;padding:0;white-space:normal;min-width:0;font-size:15px}
  .hatt-reg table.table tbody tr td:last-child{position:static;box-shadow:none;background:transparent}
  .hatt-reg td[data-l]::before{content:attr(data-l);display:block;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#5b6560);margin-bottom:3px}
  .hatt-when,.hatt-st,.hatt-act{grid-column:1/-1}
  .hatt-when strong{font-size:15px}
  .hatt-reg .row-actions{gap:8px}
  .hatt-reg .row-actions .btn{flex:1 1 auto;min-height:44px}
  .hatt-reg .row-actions .btn span{display:inline}
}


/* ── /requests (redesign, 9 Aug 2026) ─────────────────────────── */
/* ── requests (employee) ───────────────────────────────────────────────── */
/* Rows ride on the shared .list/.list-row, so dark mode and the shell's
 * phone behaviour come free; .hreq-* adds only what the shared list lacks.
 * The decision note renders in ink, not muted — it is the sentence that
 * answers "why was this rejected" without opening the modal. The needs-info
 * flag pairs its amber with words: severity is never colour alone. */
.hreq-list .hreq-row{align-items:flex-start}
.hreq-list .hreq-kind{display:flex;align-items:baseline;gap:4px 8px;flex-wrap:wrap}
.hreq-list .hreq-ask{font-weight:600;font-size:13px;color:var(--muted,#5b6560);font-variant-numeric:tabular-nums}
.hreq-list .hreq-when{font-variant-numeric:tabular-nums}
.hreq-list .hreq-reason{word-break:break-word;line-height:1.45}
.hreq-list .hreq-flag{color:#8b590b;font-weight:600}
.hreq-list .hreq-note{color:var(--ink,#20241f)}
.hreq-list .hreq-side{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* The shared .btn.small is a 36px control — right under a mouse, short for a
 * thumb, and this page is read on the factory floor. Its one action keeps
 * the 44px floor. */
.hreq-list .hreq-side .btn{min-height:44px}
/* Phone: the actions drop to their own full-width line under the copy —
 * badge left, View right — the same stacked-card rhythm as .hday-cards.
 * flex-wrap is set here too: the shared .list-row only wraps below 780px,
 * and these rows switch at the screens' own 820px line. */
@media (max-width:820px){
  .hreq-list .list-row{flex-wrap:wrap}
  .hreq-list .hreq-side{width:100%;justify-content:space-between}
}
@media (prefers-color-scheme:dark){html:not([data-theme=light]) .hreq-list .hreq-flag{color:var(--amber,#e3ad55)}}
html[data-theme=dark] .hreq-list .hreq-flag{color:var(--amber,#e3ad55)}



/* ── /pay (redesign, 9 Aug 2026) ─────────────────────────── */
/* ── pay & benefits (employee) ─────────────────────────────────────────────
 * Six columns of money do not fit a factory phone: under 821px each payslip
 * becomes one card — period and status on the head line, the three figures
 * side by side with their column names printed from data-l (one source for a
 * column's name, the .hday-row trick), actions as full-width 44px buttons. */
.hpay-scroll{overflow-x:auto;min-width:0;max-width:100%}
.hpay-table{width:100%;border-collapse:collapse;font-size:15px}
.hpay-table th,.hpay-table td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line,#eef1ee);vertical-align:top}
.hpay-table th{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted,#5b6560)}
.hpay-table th.hpay-num,.hpay-table td.hpay-td-money,.hpay-num,.hpay-td-money{text-align:right}
.hpay-n{font-variant-numeric:tabular-nums;white-space:nowrap}
.hpay-td-net .hpay-n{font-weight:700}
.hpay-td-period small{display:block;margin-top:2px;color:var(--muted,#5b6560);font-size:12.5px}
/* A figure the payslip does not carry reads as unknown, never as a measured
 * zero — italic muted dash, reason in the title. */
.hpay-none{color:var(--muted,#5b6560);font-style:italic}
@media (max-width:820px){
  .hpay-table{display:block}
  .hpay-table thead{display:none}
  .hpay-table tbody{display:flex;flex-direction:column;gap:10px}
  .hpay-table tbody tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 12px;align-items:start;border:1px solid var(--line,#d9ded9);border-radius:13px;padding:12px;background:var(--surface,#fff)}
  .hpay-table td{display:block;border:0;padding:0;text-align:left}
  .hpay-td-period{grid-area:1/1/2/3}
  .hpay-td-status{grid-area:1/3/2/4;justify-self:end}
  .hpay-td-money{grid-row:2}
  .hpay-td-money::before{content:attr(data-l);display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#5b6560);margin-bottom:2px}
  .hpay-td-net .hpay-n{font-size:16px}
  .hpay-td-act{grid-row:3;grid-column:1/-1}
  .hpay-td-act .row-actions{display:flex;gap:8px}
  .hpay-td-act .btn{flex:1;justify-content:center;min-height:44px}
}


/* ── /profile (redesign, 9 Aug 2026) ─────────────────────────── */
/* ── my profile ────────────────────────────────────────────────────────── */
/* Read-only facts render as label→value rows (.hprof-kv), not as a grid of
 * disabled inputs: an input that cannot be typed in reads as a broken form,
 * and "Not provided" inside a box reads as a value somebody entered. Missing
 * stays muted + italic — the same missing-is-not-a-value rule as .hm-unknown
 * and .hpl-none — never a confident blank. Setup rows, badges and buttons
 * reuse .list / .badge / .btn; no new colours, nothing in hue 180–260. */
.hprof-group{margin:0 0 18px}
.hprof-group:last-child{margin-bottom:0}
.hprof-sub{margin:0 0 6px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#5b6560)}
.hprof-kv{display:grid;grid-template-columns:minmax(130px,32%) 1fr;margin:0}
.hprof-kv dt{padding:10px 0;color:var(--muted,#5b6560);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;border-top:1px solid var(--line,#eef1ee)}
.hprof-kv dd{padding:10px 0;margin:0;font-size:15px;border-top:1px solid var(--line,#eef1ee);word-break:break-word;font-variant-numeric:tabular-nums}
.hprof-kv dt:first-child,.hprof-kv dt:first-child+dd{border-top:0}
.hprof-none{color:var(--muted,#5b6560);font-style:italic}
.hprof-mono{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.hprof-note{margin:10px 0 0;color:var(--muted,#5b6560);font-size:13.5px;line-height:1.5}
/* Phone: labels stack above their values — the same collapse the person
 * drawer's kv grid uses, so the two screens never disagree in shape. */
@media (max-width:600px){
  .hprof-kv{grid-template-columns:1fr}
  .hprof-kv dt{padding-bottom:0;border-top:1px solid var(--line,#eef1ee)}
  .hprof-kv dd{padding-top:2px;border-top:0}
  .hprof-kv dt:first-child+dd{border-top:0}
}


/* ── /team (redesign, 9 Aug 2026) ─────────────────────────── */
/* ── team (heads' request queue) ───────────────────────────────────────── */
/* Same shape as the Approvals screen: waiting cards first, oldest on top,
 * decided history below. Buttons stay the shared .btn — only raised to the
 * 44px touch floor, scoped to this page. An unknown filing date renders in
 * words + italics, never as "waiting 0 days". Amber #8b590b / clay #8b3a0b;
 * nothing in hue 180–260, and no severity carried by colour alone. */
.hteam-list{display:flex;flex-direction:column;gap:10px}
.hteam-card,.hteam-done{border:1px solid var(--line,#d9ded9);border-radius:13px;background:var(--surface,#fff);padding:12px 14px}
.hteam-top{display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:space-between;align-items:flex-start}
.hteam-who{min-width:0}
.hteam-who strong{display:block;font-size:15.5px}
.hteam-who small{display:block;margin-top:2px;font-size:13px;color:var(--muted,#5b6560)}
.hteam-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hteam-age{font-size:12.5px;font-weight:650;color:#8b590b;white-space:nowrap}
.hteam-age.unknown{color:#8b3a0b;font-style:italic}
.hteam-span{margin:8px 0 0;font-size:15px;color:var(--muted,#5b6560);font-variant-numeric:tabular-nums}
.hteam-flag{display:block;margin-top:6px;font-size:13px;color:#8b590b}
.hteam-reason{margin:7px 0 0;font-size:15px;line-height:1.5;word-break:break-word}
.hteam-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.hteam-acts .btn.small,.hteam-done-side .btn.small{min-height:44px;padding:0 16px}
.hteam-done{display:flex;flex-wrap:wrap;gap:8px 12px;justify-content:space-between;align-items:flex-start;background:var(--paper-2,#f7f6f1)}
.hteam-done-copy{min-width:0;flex:1 1 220px}
.hteam-done-copy strong{font-size:15px}
.hteam-done-copy small{display:block;margin-top:2px;font-size:13px;color:var(--muted,#5b6560);line-height:1.4}
.hteam-done-copy .hteam-by{margin-top:6px}
.hteam-note{margin:6px 0 0;font-size:15px;line-height:1.5;word-break:break-word}
.hteam-done-side{display:flex;align-items:center;gap:8px;flex-wrap:wrap}


/* ── /goals (redesign, 9 Aug 2026) ─────────────────────────── */
/* ── goals ─────────────────────────────────────────────────────────────── */
/* The Team/Everyone queues keep real <tr data-open="goalpage"> rows — the
 * click delegate matches exactly that selector — so the phone layout is CSS
 * only: below 821px the thead hides and each data-l cell becomes its own
 * labelled line, the same stacking move as .hday-cards and the people grid.
 * Green #3C7538 family only; nothing here sits in hue 180–260. */
.hgoal-tabn{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;margin-left:6px;padding:0 5px;border-radius:999px;background:var(--green-soft,#EAF1E8);color:var(--green,#3C7538);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;vertical-align:1px}
.tab.active .hgoal-tabn{background:#3C7538;color:#fff}
.hgoal-prog{display:flex;align-items:center;gap:10px;min-width:150px;max-width:280px}
.hgoal-prog .progress{flex:1;min-width:90px}
.hgoal-prog .metric-value{min-width:34px;text-align:right}
.hgoal-sub{display:block;margin-top:4px;color:var(--muted,#5b6560);font-size:12.5px;font-variant-numeric:tabular-nums}
.hgoal-none{color:var(--muted,#5b6560);font-style:italic}
.hgoal-act{text-align:right;white-space:nowrap}
.hgoal-table th:last-child{text-align:right}
@media (max-width:820px){
  .hgoal-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .hgoal-table tr{display:block;padding:9px 0;border-bottom:1px solid var(--line,#d9ded9)}
  .hgoal-table tbody tr:last-child{border-bottom:0}
  .hgoal-table td{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 14px;border:0;padding:5px 2px;text-align:left}
  .hgoal-table td:empty{display:none}
  .hgoal-table td::before{content:attr(data-l);color:var(--muted,#5b6560);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
  .hgoal-table td:first-child::before{content:none}
  .hgoal-prog{flex:1 1 auto;max-width:none;justify-content:flex-end}
  .hgoal-sub{margin:0}
  .hgoal-act{justify-content:flex-end}
}


/* ── /forms (redesign, 9 Aug 2026) ─────────────────────────── */
/* ── forms (HR) ────────────────────────────────────────────────────────── */
/* Same dual-surface rule as the day sheet: desktop keeps the table (HR scans
 * a question down a column), under 821px the same data reads as stacked
 * cards. Both are in the DOM; CSS shows exactly one, so rotating a phone
 * never waits on a re-render. Tiles echo .hrd-tiles' auto-fit so three stats
 * sit 3-up on desktop and 2-up on a phone without a breakpoint of their own. */
.hform-tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:0 0 14px}
.hform-cards{display:none}
.hform-num{font-variant-numeric:tabular-nums;white-space:nowrap}
.hform-dash{color:var(--muted,#5b6560)}
.hform-desc{display:block;margin-top:3px;color:var(--muted,#5b6560);font-size:12.5px;line-height:1.4;max-width:420px}
.hform-card,.hform-rcard{border:1px solid var(--line,#d9ded9);border-radius:13px;background:var(--card,#fff)}
.hform-cardmain{display:block;width:100%;text-align:left;border:0;background:transparent;font:inherit;padding:13px 14px 10px;cursor:pointer}
.hform-cardmain:focus-visible{outline:3px solid #3C7538;outline-offset:-3px}
.hform-cardtitle{display:block;font-size:15.5px;font-weight:600;line-height:1.3}
.hform-carddesc{display:block;margin-top:3px;color:var(--muted,#5b6560);font-size:13.5px;line-height:1.45}
.hform-cardmeta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px}
.hform-cardnums{font-size:13px;color:var(--muted,#5b6560);font-variant-numeric:tabular-nums}
.hform-cardacts{display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px 13px;border-top:1px dashed var(--line,#d9ded9)}
.hform-rcard{padding:13px 14px}
.hform-rhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px}
.hform-rhead strong{font-size:15px}
.hform-rhead small{color:var(--muted,#5b6560);font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.hform-qa{margin:0;display:grid;gap:8px}
.hform-q dt{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#5b6560);margin-bottom:2px}
.hform-q dd{margin:0;font-size:15px;line-height:1.45;word-break:break-word}
@media (max-width:820px){
  .hform-desk{display:none}
  .hform-cards{display:flex;flex-direction:column;gap:10px}
}


/* ── /documents (redesign, 9 Aug 2026) ─────────────────────────── */
/* ── documents ─────────────────────────────────────────────────────────── */
.hdoc-bar{display:flex;justify-content:flex-end;margin:0 0 12px}
.hdoc-scroll{overflow-x:auto;max-width:100%}
.hdoc-table{width:100%;border-collapse:collapse;font-size:15px}
.hdoc-table th{text-align:left;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#73736B);font-weight:700;padding:0 12px 8px;white-space:nowrap}
.hdoc-table td{padding:10px 12px;border-top:1px solid var(--line,#E6E6E0);vertical-align:middle}
.hdoc-table tbody tr:hover{background:var(--green-soft,#EAF1E8)}
.hdoc-file{display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;color:inherit;text-decoration:none}
.hdoc-file:hover strong,.hdoc-link:hover{text-decoration:underline;text-underline-offset:2px}
.hdoc-file:focus-visible,.hdoc-link:focus-visible{outline:3px solid #3C7538;outline-offset:2px;border-radius:6px}
.hdoc-fi{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--green-soft,#EAF1E8);color:var(--green,#3C7538);display:grid;place-items:center}
.hdoc-fi svg{width:16px;height:16px}
.hdoc-fc{min-width:0}
.hdoc-fc strong{display:block;font-size:15px;line-height:1.25;overflow-wrap:anywhere}
.hdoc-fc small{display:block;color:var(--muted,#73736B);font-size:12.5px;margin-top:2px;font-variant-numeric:tabular-nums}
.hdoc-exp{white-space:nowrap;font-variant-numeric:tabular-nums}
.hdoc-act{text-align:right;white-space:nowrap}
.hdoc-act .row-actions{justify-content:flex-end}
.hdoc-none{color:var(--muted,#73736B)}
.hdoc-link{color:inherit}
.hdoc-due-row{flex-wrap:wrap}
.hdoc-due-row .list-copy{flex:1 1 220px}
.hdoc-due-row .badge{flex:0 0 auto}
.hdoc-more{margin:10px 2px 0;font-size:13px;color:var(--muted,#73736B)}
.hdoc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:820px){
  .hdoc-table,.hdoc-table tbody{display:block}
  .hdoc-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .hdoc-table tr{display:block;border:1px solid var(--line,#E6E6E0);border-radius:13px;background:var(--card,#fff);padding:10px 12px;margin:0 0 10px}
  .hdoc-table td{display:flex;justify-content:space-between;align-items:center;gap:14px;border:0;padding:5px 0}
  .hdoc-table td[data-l]::before{content:attr(data-l);color:var(--muted,#73736B);font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
  .hdoc-table .hdoc-doc{justify-content:flex-start}
  .hdoc-table .hdoc-act{justify-content:flex-end}
  .hdoc-exp{white-space:normal}
}
@media (max-width:430px){.hdoc-bar .btn{flex:1;justify-content:center}}


/* ── /roster (redesign, 9 Aug 2026) ─────────────────────────── */
/* ── roster ────────────────────────────────────────────────────────────── */
.hros-head{flex-wrap:wrap;gap:10px 14px;padding-top:12px;padding-bottom:12px}
.hros-nav{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.hros-nav .btn{min-height:44px}
.hros-weeklab{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.hros-weeklab strong{font-size:15.5px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;white-space:nowrap}
.hros-weeklab small{color:var(--muted,#5b6560);font-size:12.5px;font-variant-numeric:tabular-nums}
.hros-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 8px}
.hros-key{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted,#5b6560);min-height:24px;white-space:nowrap}
.hros-key i{width:12px;height:12px;border-radius:3px;display:inline-block;border:1px solid var(--line,#d9ded9);flex:0 0 auto}
.hros-key b{color:var(--ink,#1d2420);font-variant-numeric:tabular-nums}
.hros-key em{font-style:normal;font-variant-numeric:tabular-nums}
.hros-key-blank i{background:transparent;border-style:dashed}
.hros-hint{margin:0 0 10px;font-size:13.5px;color:var(--muted,#5b6560);line-height:1.5}
.hros-scrollhint{display:none;margin:0 0 8px;font-size:13px;color:var(--muted,#5b6560)}
.hros-board .ros-wrap{scrollbar-width:thin}
.hros-board th.hros-sun,.hros-board td.hros-sun{background:var(--paper-2,#f1efe8)}
.hros-board td.hros-tdy{background:var(--green-soft,#e9f1e6)}
.hros-board .ros-cell.hros-blank{border-style:dashed}
.hros-board .ros-cell.hros-blank strong{color:var(--muted,#5b6560);font-weight:600}
.hros-board .ros-cell:focus-visible{outline:3px solid #3C7538;outline-offset:2px}
.hros-eid{display:block;font-weight:400;color:var(--muted,#5b6560);font-size:12.5px;margin-top:1px}
@media (max-width:820px){
  .grid.hros-tiles{grid-template-columns:1fr 1fr;gap:10px}
  .hros-scrollhint{display:block}
  .hros-weeklab{align-items:flex-start;text-align:left}
}


/* ── /recruitment (redesign, 9 Aug 2026) ─────────────────────────── */
/* ── recruitment ─────────────────────────────────────────────────────────
 * Lanes/tickets keep the shared .kanban/.lane/.ticket skeleton; .hrec-* adds
 * ticket density (avatar row, note clamp, age chip) and the phone layout,
 * where four side-scrolling lanes become stacked full-width sections. */
.hrec-count{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--card,#fff);border:1px solid var(--line,#E6E6E0);border-radius:999px;padding:3px 10px;min-width:30px;text-align:center;color:var(--muted,#73736B)}
.hrec-top{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.hrec-top .avatar{width:30px;height:30px;font-size:12.5px}
.hrec-who{min-width:0}
.hrec-who strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hrec-who p{margin:2px 0 0}
.hrec-note{font-size:12.5px;color:var(--muted,#73736B);margin:0 0 9px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hrec-meta{display:inline-flex;align-items:center;gap:7px;min-width:0}
.hrec-age{font-size:12.5px;color:var(--muted,#73736B);font-variant-numeric:tabular-nums;white-space:nowrap}
.hrec-ticket .btn.small{min-height:38px}
/* Onboarded but still on the board: the state is carried by the badge TEXT —
 * the dashed border and fade are reinforcement, never the only signal. */
.hrec-done{opacity:.72;border-style:dashed}
.hrec-empty{border:1px dashed var(--line,#E6E6E0);border-radius:11px;padding:16px 12px}
/* Phone: SIDE-SCROLLING lanes, owner's explicit preference (11 Aug: "stages
 * in mobile view need to be side wise scrollable only"). Flex row so any
 * number of stages scrolls; scroll-snap lands each lane cleanly; the earlier
 * stack-them experiment is retired. */
@media (max-width:820px){
  .kanban.hrec-board{display:flex;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;padding-bottom:8px}
  .hrec-board .lane{flex:0 0 264px;min-height:0;scroll-snap-align:start}
  .hrec-ticket .btn.small{min-height:44px}
}


/* ── /reports-settings (redesign, 9 Aug 2026) ─────────────────────────── */
/* ── reports & settings (/reports-settings): reports + assets tabs ───────
 * Settings, WhatsApp log and Audit are untouched — they already carry their
 * own styling (.set-*, .wa-*, .toolbar/.table). Brand green #3C7538 via the
 * shared vars; nothing here sits in hue 180–260. */
.hrs-reports{align-items:start}
.hrs-types{display:flex;flex-direction:column;gap:8px;padding:11px 13px;border:1px solid var(--line,#d9ded9);border-radius:11px;background:var(--paper-2,#f1efe8)}
.hrs-type b{display:block;font-size:13px;color:var(--ink,#1d2420)}
.hrs-type span{display:block;font-size:13px;color:var(--muted,#5b6560);line-height:1.45;margin-top:1px}
.hrs-note{color:var(--muted,#5b6560);font-size:13px;line-height:1.5}
.hrs-bar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.grid.hrs-strip{margin:0 0 16px}
.hrs-num{font-variant-numeric:tabular-nums;white-space:nowrap}
/* Unassigned reads differently from a custodian's name — same convention as
 * .hpl-denied / .hm-unknown: muted italic, never a bare dash. */
.hrs-dim{color:var(--muted,#5b6560);font-style:italic}
@media (max-width:820px){
  .hrs-bar .btn{flex:1;min-height:44px}
  /* Summary tiles pair up like .grid.cols-4 does at 430px; an odd last tile
   * takes the full row instead of leaving a hole (house technique from
   * .page-head .actions). */
  .grid.hrs-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .grid.hrs-strip>.stat:nth-child(odd):last-child{grid-column:1/-1}
  /* The six-column custody table becomes one card per asset — the SAME tr/td
   * nodes restyled, so the frozen Issue/Reassign/Return buttons and any
   * row-level scripting ride along untouched. Labels come from data-l; the
   * asset name is the card head and Action explains itself. text-align:left
   * needs !important only because the shared table rule carries it too. */
  .hrs-assets .table-wrap{overflow:visible}
  .hrs-assets .table{min-width:0;display:block}
  .hrs-assets .table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .hrs-assets .table tbody{display:block}
  .hrs-assets .table tbody tr{display:block;border:1px solid var(--line,#d9ded9);border-radius:13px;background:var(--card,#fff);padding:11px 13px;margin:0 0 10px}
  .hrs-assets .table tbody tr:last-child{margin-bottom:0}
  .hrs-assets .table tbody td{display:block;border:0;padding:3px 0;white-space:normal;text-align:left!important;min-width:0}
  .hrs-assets .table tbody tr td:last-child{position:static;box-shadow:none;background:transparent}
  .hrs-assets .table td[data-l]::before{content:attr(data-l);display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#5b6560);margin:0 0 1px}
  .hrs-assets .table td[data-l="Asset"]::before,.hrs-assets .table td[data-l="Action"]::before{content:none}
  .hrs-assets .row-actions{padding-top:5px}
  .hrs-assets .row-actions .btn{flex:1;min-height:44px}
  /* styles.css hides .row-actions button labels at 430px, which leaves these
   * text-only buttons BLANK (they carry no icons). Cards have room — keep the
   * words, scoped to this screen only. */
  .hrs-assets .row-actions .btn span{display:inline}
}


/* ── /home (redesign, 9 Aug 2026) ─────────────────────────── */
/* ── home (employee self-service) ──────────────────────────────────────── */
/* Times and durations share digit widths so the hero line and the recent list
 * columns align — same tabular-nums rule the day/month screens follow. */
.hhome-times{font-variant-numeric:tabular-nums}
/* A missing punch-out must LOOK unknown — the month matrix's .hm-unknown rule
 * applied to the same fact: muted italic, never a confident time. */
.hhome-miss{color:var(--muted,#5b6560);font-style:italic}
/* Quick actions as thumb targets: two columns of left-aligned 48px buttons —
 * a launcher, not four pills centred in a card. */
.hhome-qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
/* The duo row: Recent attendance (5 rows) beside Quick actions (4 buttons).
 * Default grid stretch forced both cards to the taller one's height, leaving a
 * void INSIDE the shorter card — which reads as missing content, where air
 * BETWEEN cards just reads as layout (the owner's 9 Aug screenshot note).
 * Cards take their natural height, and on desktop the row is asymmetric —
 * the list is the content, the launcher is the sidekick — which also narrows
 * the height gap to almost nothing. Under 821px the shared .grid rule stacks
 * the row to one column and none of this applies. */
.hhome-duo{align-items:start}
@media (min-width:821px){
  /* .grid.cols-2 is (0,2,0); a lone .hhome-duo is (0,1,0) and silently loses
   * the template-columns fight — the first cut of this rule did exactly that
   * and shipped a 50/50 split while claiming 1.45/1. Match the specificity. */
  .grid.hhome-duo{grid-template-columns:1.45fr 1fr}
  .hhome-duo .hhome-qa{grid-template-columns:1fr}
  .hhome-duo .hhome-qa .btn{min-height:52px}
}
.hhome-qa .btn{min-height:48px;justify-content:flex-start;text-align:left}
@media(max-width:360px){.hhome-qa{grid-template-columns:1fr}}

/* status pills centre against the row even in top-aligned registers */
.hatt-reg td:has(> .badge:only-child),.hpay-table td:has(> .badge:only-child),.hpl-table td:has(> .badge:only-child){vertical-align:middle}
/* the request row: side block centres against the row on desktop; the
   ≤560px stack keeps its own full-width second-line layout untouched */
@media (min-width:821px){.hreq-list .list-row{align-items:center}}

/* ── Home band: the line manager's waiting queue (24 Aug) ─────────────────── */
.hteam-homeband{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 16px;padding:13px 16px;border:1px solid var(--amber,#B5781A);border-radius:14px;background:var(--amber-soft,#F6ECD9);color:var(--ink,#1B1B19);font:inherit;text-align:left;cursor:pointer}
.hteam-homeband>svg{flex:0 0 auto;color:var(--amber,#B5781A)}
.hteam-homeband span{display:flex;flex-direction:column;gap:2px;min-width:0}
.hteam-homeband strong{font-size:15px}
.hteam-homeband small{font-size:13.5px;color:var(--muted,#5b6560)}
.hteam-hrnote{display:block;margin-top:4px;color:var(--muted,#6d766c);font-style:italic}
.hreq-decide-ctx{display:flex;flex-direction:column;gap:3px;margin:0 0 12px;padding:11px 13px;border:1px solid var(--line,#E6E6E0);border-radius:12px;background:var(--paper-2,#F1F1ED)}
.hreq-decide-ctx strong{font-size:15.5px}
.hreq-decide-ctx small{font-size:13.5px;color:var(--muted,#5b6560)}
.hreq-decide-ctx p{margin:5px 0 0;font-size:15px;line-height:1.5;word-break:break-word}


/* ── TOUCH LAYER ──────────────────────────────────────────────────────────
 * Last linked stylesheet, so this is where a touch-target rule can actually
 * settle. .hpl-set declares 44px in hrms-people.js and still measured 40px on
 * a phone — something later was winning, and rather than hunt it, the override
 * goes where nothing outranks it. Coarse pointers only; a mouse keeps the
 * denser desktop rhythm. */
@media (pointer:coarse),(max-width:820px){
  /* Each selector here mirrors the specificity of the base rule it overrides —
   * .hpl-sets button is (0,1,1), so a bare .hpl-set would silently lose. */
  .hpl-sets button,.aops-tabs-b,.hpl-set,.aops-chip,.aops-today{min-height:44px}
  .hpd-manage button,.hpd-tab{min-height:44px}
  .row-actions .btn{min-height:44px}
}

/* Settings → Import attendance → the sample-file row. On a phone the two
   download buttons squeezed the copy to one word per line (flex min-size);
   wrap, and let the buttons take the next line. */
.attn-sample-row{flex-wrap:wrap}
.attn-sample-row .list-copy{min-width:0;flex:1 1 240px}
@media (max-width:640px){.attn-sample-row .row-actions{width:100%;margin-top:8px}.attn-sample-row .row-actions .btn{flex:1 1 auto;justify-content:center}}