/* ==========================================================================
   Tradestaff Payroll — design system
   Pastels are FILLS ONLY. Text always uses the paired dark tone.
   Every money and hours figure uses tabular numerals.
   ========================================================================== */

:root {
  --paper:    #FDFCFA;
  --surface:  #FFFFFF;
  --sunken:   #F8F5F1;
  --ink:      #2B2724;
  /* Muted and faint both clear WCAG AA (4.5:1) on surface, paper and sunken: faint is
     for small uppercase labels, so it may be lighter than muted but never illegible. */
  --muted:    #6E655E;
  --faint:    #766C65;
  --line:     #EDE7E1;
  --line-firm:#DDD4CB;

  /* Tradestaff orange at 5:1 on white — links, and white text on a primary button. */
  --accent:      #AD5723;
  --accent-deep: #8C4519;
  --accent-soft: #FFE7D2;
  --accent-sky:  #FFE7D2;

  --mint:   #CFE9DC;  --mint-ink:   #2F6B4F;
  --butter: #FBEFC0;  --butter-ink: #7D621B;
  --rose:   #F7D6D0;  --rose-ink:   #A33B2A;
  --peri:   #D8DFF5;  --peri-ink:   #3E4E8A;

  --r-sm: 6px; --r: 10px; --r-lg: 14px;
  --shadow: 0 1px 2px rgba(43,39,36,.04), 0 4px 16px rgba(43,39,36,.03);

  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

::selection { background: var(--accent-soft); color: var(--ink); }

* { box-sizing: border-box; }

/* The hidden attribute must beat any author display rule. Without this, .notice's
   display:flex keeps an empty error box on screen. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h1 { font-size: 30px; letter-spacing: -.02em; line-height: 1.2; }
h2 { font-size: 20px; line-height: 1.3; }
h3 { font-size: 16px; line-height: 1.35; }
p { text-wrap: pretty; }

a { color: var(--accent); text-decoration: none; text-underline-offset: 2px; }
a:hover { text-decoration: underline; }

/* One visible focus ring for keyboard users, everywhere. */
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm);
}

/* Money, hours, dates, IRD numbers — anything that lines up in a column. */
.num, td.num, th.num, .money {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.money { text-align: right; white-space: nowrap; }
.money.neg { color: var(--rose-ink); }

/* ------------------------------------------------------------- layout --- */
.shell { max-width: 1100px; margin: 0 auto; padding: 0 24px 72px; }

/* The app frame: a fixed sidebar beside the page on wide screens; a drawer at 1180px and below,
   where the sidebar would leave the wide payroll tables too narrow. */
:root { --side-w: 236px; }
body.with-nav { padding-left: var(--side-w); }
.sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; width: var(--side-w); z-index: 30;
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--line);
}
.side-head { display: flex; align-items: center; gap: 8px; padding: 18px 16px 10px; }
.sidebar .side-close { display: none; margin-left: auto; }
.side-entity { padding: 2px 16px 10px; }
.side-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 10px 18px; scrollbar-width: thin; }
.nav-group + .nav-group { margin-top: 10px; }
.nav-group-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--faint); font-weight: 600; padding: 8px 10px 4px;
}
.side-nav a {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px;
  color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none;
}
.side-nav a:hover { background: var(--sunken); color: var(--ink); text-decoration: none; }
.side-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.side-nav a.active { background: var(--accent-soft); color: var(--accent-deep); }
.nav-i { width: 20px; flex: none; display: grid; place-items: center; }
.nav-i svg { width: 18px; height: 18px; }
.nav-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-foot { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); }
.side-foot .session-who { flex: 1; min-width: 0; text-align: left; }
.side-foot .session-name { overflow: hidden; text-overflow: ellipsis; }

/* The top bar holds the search; on narrow screens also the menu button and the mark. */
header.topbar {
  position: sticky; top: 0; z-index: 20; padding-block: 10px;
  background: rgba(253,252,250,.94); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.topbar-in { max-width: 1100px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 12px; }
.topbar .menu-btn, .topbar .topbar-mark { display: none; }
.icon-btn { width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center; border-radius: 10px; color: var(--ink); }
button.ghost.icon-btn { color: var(--ink); }
.icon-btn svg { width: 22px; height: 22px; }
.nav-scrim { position: fixed; inset: 0; z-index: 50; background: rgba(43,39,36,.34); }
@media (max-width: 1180px) {
  body.with-nav { padding-left: 0; }
  header.topbar { padding-block: 8px; }
  .topbar-in { padding: 0 14px; flex-wrap: wrap; row-gap: 8px; }
  .topbar .menu-btn { display: inline-grid; }
  .topbar .topbar-mark { display: inline-flex; }
  .topbar .gsearch { margin-left: auto; }
  .sidebar {
    width: min(300px, 86vw); z-index: 55; transform: translateX(-104%); visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
  }
  body.nav-open .sidebar { transform: none; visibility: visible; transition: transform .2s ease; box-shadow: 10px 0 40px rgba(43,39,36,.18); }
  body.nav-open { overflow: hidden; }
  .sidebar .side-close { display: inline-grid; }
}
@media (max-width: 640px) { .topbar .gsearch { order: 3; flex: 1 1 100%; margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .sidebar, body.nav-open .sidebar { transition: none; } }

.wordmark {
  display: inline-flex; align-items: center;
  font-family: var(--serif); font-size: 19px; font-weight: 600;
  color: var(--ink); letter-spacing: -.02em; white-space: nowrap;
}
a.wordmark:hover { text-decoration: none; }
.wordmark span { color: var(--accent); }
/* The site dog, like Cowbell's bell. It gives a little head tilt on hover. */
.dog {
  display: inline-block; flex: none; width: 1.3em; height: 1.3em; margin-right: 8px;
  background: url(icon.svg) center / contain no-repeat; border-radius: 6px; transform-origin: 50% 80%;
}
.wordmark:hover .dog { animation: tilt .7s ease-in-out; }
@keyframes tilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-12deg); } 60% { transform: rotate(6deg); } }
@media (prefers-reduced-motion: reduce) { .wordmark:hover .dog { animation: none; } }

/* Search across what this account can open. */
.gsearch { position: relative; flex: 0 1 560px; min-width: 0; }
.gsearch input {
  width: 100%; padding: 8px 14px 8px 36px; border-radius: 999px;
  border: 1px solid var(--line-firm); background: var(--sunken); color: var(--ink);
  font: inherit; font-size: 14px;
}
.gsearch input::placeholder { color: var(--faint); }
.gsearch input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }   /* Esc clears instead */
.gsearch input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); background: var(--surface); }
.gsearch-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--faint); pointer-events: none; display: grid; }
.gsearch-icon svg { width: 16px; height: 16px; }
.gsearch-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40; max-height: 70vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 12px 40px rgba(43,39,36,.16);
}
.gsearch-group { padding: 8px 0; border-bottom: 1px solid var(--line); }
.gsearch-group:last-child { border-bottom: none; }
.gsearch-head {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); font-weight: 600; padding: 2px 14px 4px;
}
.gsearch-head .num { font-variant-numeric: tabular-nums; }
.gsearch-row { display: block; padding: 6px 14px; color: var(--ink); }
.gsearch-row:hover, .gsearch-row.sel { background: var(--accent-soft); text-decoration: none; }
.gsearch-row:focus-visible { outline-offset: -2px; border-radius: 0; }
.gsearch-row .meta { font-size: 12px; color: var(--muted); }
.gsearch-empty { padding: 16px 14px; color: var(--muted); font-size: 13.5px; }

.page-head { padding: 34px 0 22px; display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.page-head .sub { color: var(--muted); font-size: 14px; margin-top: 4px; }
.page-head .spacer { flex: 1; }

/* -------------------------------------------------------------- cards --- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
}
.card + .card { margin-top: 18px; }
/* Cards laid out in a grid are spaced by the grid's gap, never by the stacking margin. */
.grid > .card + .card { margin-top: 0; }
.card-head {
  padding: 16px 20px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.card-head .spacer { flex: 1; }
.card-body { padding: 20px; }
.card-body.tight { padding: 0; }

.grid { display: grid; gap: 18px; }
.grid + .grid, .grid + .card, .card + .grid { margin-top: 18px; }
/* A div a card is rendered into later (dashboard panels) spaces like the card it will hold. */
.card-host:not(:empty) { margin-top: 18px; }
.grid.c2 { grid-template-columns: 1fr 1fr; }
/* A quiet list — one line per item, hairline between (who is away, short registers). */
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.plain-list li:last-child { border-bottom: 0; }
/* Set hours: one small number box per weekday. */
/* A tick list of people, scrolling when long (leave team approvers and members). */
.pick-list { max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.pick-list .check { padding: 4px 0; }
.work-pattern { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.work-pattern .input { width: 100%; font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 560px) { .work-pattern { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------- stats --- */
.stat { padding: 18px 20px; }
.stat .label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--faint); font-weight: 600;
}
.stat .value {
  font-size: 26px; font-family: var(--serif); font-weight: 600;
  margin-top: 6px; font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.stat .hint { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

/* ------------------------------------------------------------- tables --- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); font-weight: 600; padding: 11px 16px;
  border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--sunken);
}
thead th.money { text-align: right; }
/* An example of the expected format, shown in the column header rather than inside the boxes. */
thead th .th-hint { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--muted); font-size: 11.5px; }
button.copy-down { padding: 0 6px; min-height: 0; line-height: 1.4; margin-left: 4px; }
tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--sunken); }
tfoot td {
  padding: 13px 16px; border-top: 2px solid var(--line-firm);
  font-weight: 600; background: var(--sunken);
}
.table-wrap { overflow-x: auto; border-radius: 0 0 var(--r-lg) var(--r-lg); }
/* A wide table's sideways scrollbar, kept on screen (js/hscroll.js): the proxy after the wrap is
   sticky to the bottom of the window until the table's end comes into view; the wrap's own bar is
   hidden while the proxy stands in for it. Styled explicitly so it is visible, not an overlay
   scrollbar that only appears mid-scroll. */
.table-wrap.has-hscroll { scrollbar-width: none; border-radius: 0; }
.table-wrap.has-hscroll::-webkit-scrollbar { display: none; }
.hscroll {
  position: sticky; bottom: 0; z-index: 5;
  overflow-x: auto; overflow-y: hidden; height: 16px;
  background: var(--sunken); border-top: 1px solid var(--line-firm);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: 0 -4px 10px rgba(43, 39, 36, .06);
  scrollbar-width: auto; scrollbar-color: var(--faint) var(--sunken);
}
.hscroll > div { height: 1px; }
.hscroll::-webkit-scrollbar { height: 12px; }
.hscroll::-webkit-scrollbar-track { background: var(--sunken); }
.hscroll::-webkit-scrollbar-thumb { background: var(--faint); border-radius: 6px; border: 3px solid var(--sunken); }
.hscroll::-webkit-scrollbar-thumb:hover { background: var(--muted); }
@media print { .hscroll { display: none; } .table-wrap.has-hscroll { overflow: visible; } }

.who { display: flex; align-items: center; gap: 11px; }
.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--accent-soft); color: var(--accent-deep);
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
}
.who .name { font-weight: 500; white-space: nowrap; }
.who .meta {
  font-size: 12.5px; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px;
}

/* -------------------------------------------------------------- pills --- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.pill.mint   { background: var(--mint);   color: var(--mint-ink); }
.pill.butter { background: var(--butter); color: var(--butter-ink); }
.pill.rose   { background: var(--rose);   color: var(--rose-ink); }
.pill.peri   { background: var(--peri);   color: var(--peri-ink); }
.pill.plain  { background: var(--sunken); color: var(--muted); }
.pill.accent { background: var(--accent-soft); color: var(--accent-deep); }

/* ------------------------------------------------------------ buttons --- */
button, .btn {
  font-family: inherit; font-size: 14px; font-weight: 500;
  padding: 8px 15px; border-radius: var(--r-sm); border: 1px solid var(--line-firm);
  background: var(--surface); color: var(--ink); cursor: pointer;
  transition: background .12s, border-color .12s;
}
button:hover, .btn:hover { background: var(--sunken); text-decoration: none; }
button.primary, .btn.primary {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
button.primary:hover, .btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.small { padding: 5px 10px; font-size: 13px; }
button.ghost { border-color: transparent; background: transparent; color: var(--muted); }
button.ghost:hover { background: var(--sunken); color: var(--ink); }

/* -------------------------------------------------------- compliance --- */
.notice {
  display: flex; gap: 12px; padding: 13px 16px; border-radius: var(--r);
  font-size: 13.5px; line-height: 1.5; align-items: flex-start;
}
.notice + .notice { margin-top: 9px; }
.notice.error   { background: var(--rose);   color: var(--rose-ink); }
.notice.warning { background: var(--butter); color: var(--butter-ink); }
.notice.info    { background: var(--peri);   color: var(--peri-ink); }
.notice.ok      { background: var(--mint);   color: var(--mint-ink); }
.notice .icon { font-weight: 700; flex: none; width: 18px; text-align: center; }
.notice .body strong { display: block; margin-bottom: 2px; }
.notice .body .who-tag { opacity: .78; }

/* -------------------------------------------------- the working panel --- */
.working {
  background: var(--sunken); border-radius: var(--r);
  padding: 14px 16px; font-size: 13px; margin-top: 10px;
}
.working .rule {
  font-weight: 600; font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--faint); margin-bottom: 9px;
}
.working table { font-size: 13px; }
.working thead th { background: transparent; padding: 5px 9px; }
.working tbody td { padding: 5px 9px; border-bottom: 1px dotted var(--line-firm); }
.working tbody tr:last-child td { border-bottom: none; }
.working .note { color: var(--muted); margin-top: 9px; font-style: italic; }

.expandable > td { cursor: pointer; }
.chev {
  color: var(--accent); font-size: 10px; display: inline-block;
  width: 15px; transition: transform .12s;
}
.expandable:hover .chev { color: var(--accent-deep); }
.expandable:hover > td { background: var(--sunken); }

/* ----------------------------------------------------------- payslip --- */
.payslip { max-width: 780px; margin: 0 auto; }
.payslip-head {
  display: flex; justify-content: space-between; gap: 24px;
  padding: 24px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.kv { font-size: 13px; }
.kv dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.kv dd { margin: 1px 0 9px; font-variant-numeric: tabular-nums; }
.net-strip {
  background: var(--mint); color: var(--mint-ink);
  padding: 18px 24px; display: flex; justify-content: space-between; align-items: center;
}
.net-strip .label { font-size: 12px; text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.net-strip .amount { font-family: var(--serif); font-size: 30px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------- OWP vs AWE --- */
.versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
@media (max-width: 620px) { .versus { grid-template-columns: 1fr; } }
.versus .side { padding: 15px 17px; border-radius: var(--r); background: var(--sunken); border: 2px solid transparent; }
.versus .side.wins { background: var(--mint); border-color: var(--mint-ink); }
.versus .side .label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; opacity: .75; }
.versus .side .amt { font-family: var(--serif); font-size: 23px; font-weight: 600; font-variant-numeric: tabular-nums; margin: 3px 0; }
.versus .side .how { font-size: 12.5px; opacity: .8; line-height: 1.45; }
.versus .mid { display: grid; place-items: center; color: var(--faint); font-size: 12px; font-weight: 600; }

/* ------------------------------------------------------------- sundry --- */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 118px; }
.bars .bar { flex: 1; background: var(--accent-soft); border-radius: 3px 3px 0 0; min-height: 3px; position: relative; }
.bars .bar:last-child { background: var(--accent); }

/* Grouped charge-vs-cost bars: two thin bars per week. */
.dual-bars { display: flex; align-items: flex-end; gap: 5px; height: 130px; }
.dual-col { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; }
.dual-col .db { width: 45%; border-radius: 3px 3px 0 0; min-height: 2px; }
.dual-col .db.charge { background: var(--accent); }
.dual-col .db.cost { background: var(--accent-soft); }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: middle; margin-right: 4px; }
.legend-dot.charge { background: var(--accent); }
.legend-dot.cost { background: var(--accent-soft); }

/* List toolbar (search + filters) and pager — shared by the large-dataset screens. */
.list-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.list-toolbar .list-search { flex: 1 1 240px; min-width: 200px; }
.list-toolbar .list-search .input { width: 100%; }
.list-toolbar .list-filter { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.list-toolbar .list-filter .input { width: auto; min-width: 130px; }
.list-toolbar #listClear { margin-left: auto; }

.list-pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px 16px; padding: 12px 20px; border-top: 1px solid var(--line);
  font-size: 13px; color: var(--muted);
}
.list-pager .list-count { font-variant-numeric: tabular-nums; }
.list-pager .list-pager-btns { display: flex; align-items: center; gap: 6px; }
.list-pager .list-page { padding: 0 8px; font-variant-numeric: tabular-nums; }
.list-pager button[disabled] { opacity: .4; cursor: default; }

/* Tick boxes on lists and the bar that carries the bulk actions. */
th.sel, td.sel { width: 22px; padding-left: 16px; padding-right: 0; text-align: center; }
th.sel input, td.sel input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; vertical-align: middle; }
td.sel input:disabled { cursor: not-allowed; opacity: .35; }
.selbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
  padding: 10px 20px; background: var(--accent-soft); border-bottom: 1px solid var(--line);
  color: var(--accent-deep); font-size: 13.5px; position: sticky; top: 64px; z-index: 5;
}
.selbar .spacer { flex: 1; }
.selbar button.ghost { color: var(--accent-deep); }

/* Verify and Compliance: a worker's issues under their row. */
.issue-row td { background: var(--sunken); padding-top: 4px; padding-bottom: 12px; }
.issue-line { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px; }
.issue-line:last-child { border-bottom: 0; }
.issue-line .issue-body { flex: 1; min-width: 0; }
.issue-line .issue-note { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.v-pay { margin: 10px 0 2px; max-width: 560px; }
.v-pay-head { font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.v-pay-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.v-pay-table td { padding: 3px 8px 3px 0; border-bottom: 1px dashed var(--line); vertical-align: top; background: transparent; }
.v-pay-table td.money { width: 90px; }
.v-pay-table tr.v-pay-total td { border-bottom: 1px solid var(--line); }
.issue-note { display: flex; gap: 6px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.issue-note .input { flex: 1 1 260px; min-width: 220px; max-width: 420px; padding: 5px 8px; font-size: 12.5px; text-align: left; }
.stat-btn { font: inherit; color: inherit; border: 1px solid var(--line); }
.stat-btn.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cleared-note { font-size: 12.5px; color: var(--mint-ink); margin-top: 4px; }
a.drill { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--faint); }
a.drill:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* A dashboard card that can be dragged into a new place. */
.dash-slot { position: relative; margin-top: 18px; }
.dash-slot:first-of-type { margin-top: 0; }
.dash-slot > .card, .dash-slot > .card-host > .card, .dash-slot > .grid { margin-top: 0; }
.drag-handle {
  position: absolute; top: 12px; right: 12px; z-index: 2; width: 26px; height: 26px; border-radius: 6px;
  display: grid; place-items: center; cursor: grab; color: var(--faint); background: transparent; border: 0; padding: 0;
}
.drag-handle:hover, .drag-handle:focus-visible { color: var(--accent-deep); background: var(--accent-soft); }
.dash-slot.dragging { opacity: .45; }
.dash-slot.drop-before::before, .dash-slot.drop-after::after {
  content: ''; position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--accent);
}
.dash-slot.drop-before::before { top: -11px; }
.dash-slot.drop-after::after { bottom: -11px; }
.pref-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: 13px; color: var(--muted); }
.pref-chip button { padding: 0 4px; min-height: 0; line-height: 1; }

/* What-if pay calculator */
.whatif { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: start; }
.whatif-controls { display: flex; flex-direction: column; gap: 22px; }
.whatif-slider { display: block; }
.whatif-slider-head { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.whatif-slider-head strong { color: var(--ink); font-variant-numeric: tabular-nums; font-size: 15px; }
.whatif-slider input[type=range] { width: 100%; accent-color: var(--accent); }
.whatif-net { margin-bottom: 14px; }
.whatif-net-label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); font-weight: 600; }
.whatif-net-amount { font-family: var(--serif); font-size: 34px; color: var(--mint-ink, #2F6B4F); line-height: 1.1; font-variant-numeric: tabular-nums; }
.whatif-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.whatif-chip { display: flex; flex-direction: column; gap: 1px; padding: 7px 12px; border-radius: 9px; background: var(--sunken); min-width: 84px; }
.whatif-chip span { font-size: 11px; color: var(--muted); }
.whatif-chip strong { font-variant-numeric: tabular-nums; font-size: 14px; }
.whatif-chip.ded strong { color: var(--rose-ink, #A33B2A); }
.whatif-brackets-head { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
@media (max-width: 720px) { .whatif { grid-template-columns: 1fr; gap: 18px; } }

/* PAYE bracket ladder */
.bracket-bar { width: 100%; height: auto; display: block; overflow: visible; }
.bracket-bar .bracket-rate { font-size: 11.5px; font-weight: 600; font-family: var(--sans); }
.bracket-bar .bracket-fill { transition: width .18s ease; }
.bracket-bar .bracket-marker { stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 2; }
.bracket-bar .bracket-mark-label { font-size: 12px; font-weight: 600; fill: var(--ink); font-variant-numeric: tabular-nums; font-family: var(--sans); }
.bracket-bar .bracket-axis { font-size: 11px; fill: var(--faint); font-family: var(--sans); }

/* Waterfall */
.waterfall { width: 100%; min-width: 480px; height: auto; display: block; }
.waterfall .wf-axis { stroke: var(--line-firm); stroke-width: 1; }
.waterfall .wf-connector { stroke: var(--line-firm); stroke-width: 1; stroke-dasharray: 2 2; }
.waterfall .wf-val { font-size: 12px; font-weight: 600; fill: var(--ink); font-variant-numeric: tabular-nums; font-family: var(--sans); }
.waterfall .wf-label { font-size: 12px; fill: var(--muted); font-family: var(--sans); }
.wf-wrap { overflow-x: auto; }

/* Payslip money-flow (Sankey) */
.flow-wrap { overflow-x: auto; }
.money-flow { width: 100%; min-width: 560px; height: auto; display: block; }
.flow-band { animation: flow-in .6s ease both; transform-origin: left center; }
@keyframes flow-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .flow-band { animation: none; } }
.money-flow .flow-label { font-family: var(--sans); font-size: 13px; fill: var(--ink); }
.money-flow .flow-amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.money-flow .flow-pct { fill: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.money-flow .flow-leader { stroke: var(--line-firm); stroke-width: 1; }
.money-flow .flow-gross { font-family: var(--sans); font-size: 12px; fill: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.money-flow .flow-gross-amt { font-family: var(--serif); font-size: 16px; fill: var(--ink); font-variant-numeric: tabular-nums; }

/* NZ workforce map */
.map-wrap { display: grid; grid-template-columns: 1fr 220px; gap: 24px; align-items: start; }
.map-canvas { position: relative; }
.nz-map { width: 100%; height: auto; max-height: 520px; display: block; overflow: visible; }
.nz-land { fill: var(--sunken, #F3EEE8); stroke: var(--line); stroke-width: 1; }
.map-dot { cursor: pointer; transition: opacity .18s ease; }
.map-dot.dim { opacity: .18; }
.map-dot circle { transition: transform .18s ease; transform-box: fill-box; transform-origin: center; }
.map-dot:hover circle:last-child { transform: scale(1.18); }
.map-halo { opacity: .35; transform-box: fill-box; transform-origin: center; animation: map-pulse 2.6s ease-out infinite; }
@keyframes map-pulse { 0% { transform: scale(1); opacity: .35; } 70% { transform: scale(2.4); opacity: 0; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .map-halo { animation: none; opacity: .18; } }
.map-tip {
  position: absolute; pointer-events: none; z-index: 5; max-width: 220px;
  background: var(--ink); color: #fff; padding: 8px 11px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.4; box-shadow: 0 6px 20px rgba(0,0,0,.18);
}
.map-tip strong { font-family: var(--sans); font-weight: 600; }
.map-tip-count { margin-top: 3px; color: var(--accent-sky); font-variant-numeric: tabular-nums; }
.map-legend { border-left: 1px solid var(--line); padding-left: 20px; }
.map-legend-head { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); font-weight: 600; margin-bottom: 10px; }
.map-legend-row {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 6px 8px; margin: 0 -8px;
  border: none; background: transparent; border-radius: 8px; cursor: pointer; text-align: left;
}
.map-legend-row:hover { background: var(--sunken, #F3EEE8); }
.map-legend-row.on { background: var(--accent-sky); }
.map-swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.map-legend-name { flex: 1; font-size: 13.5px; color: var(--ink); }
.map-legend-count { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--muted); }
.map-legend-foot { margin-top: 14px; font-size: 12px; color: var(--muted); line-height: 1.5; }
@media (max-width: 760px) { .map-wrap { grid-template-columns: 1fr; } .map-legend { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 16px; } }

/* Split hours:minutes field (overtime entry). */
.hm-field { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.hm-field .input { width: 52px; text-align: center; }
.hm-field .hm-sep { color: var(--muted); font-weight: 600; }

/* Report controls */
.report-controls { display: flex; flex-wrap: wrap; gap: 14px 20px; margin-bottom: 18px; }
.report-controls label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.report-controls .input { width: auto; min-width: 130px; }

/* Single-series vertical bars with a zero baseline (negatives dip below). */
.vbars { display: flex; align-items: stretch; gap: 5px; }
.vbar-col { flex: 1; display: flex; flex-direction: column; height: 100%; }
.vbar-space { display: block; flex: none; }
.vbar { display: block; border-radius: 3px 3px 0 0; }
.vbar.up { background: var(--accent); }
.vbar.down { background: var(--rose-ink); border-radius: 0 0 3px 3px; }

/* Horizontal breakdown bars */
.hbars { display: flex; flex-direction: column; gap: 10px; }
.hbar-row { display: grid; grid-template-columns: 150px 1fr 110px; gap: 12px; align-items: center; }
.hbar-label { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { height: 12px; border-radius: 6px; background: var(--sunken); overflow: hidden; }
.hbar-fill { height: 100%; border-radius: 6px; }
.hbar-val { text-align: right; font-variant-numeric: tabular-nums; font-size: 13.5px; }

/* Donut */
.donut-wrap { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }
.donut-legend { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; }
.donut-leg-row { display: flex; align-items: center; gap: 6px; }
.donut-leg-val { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 6px; }
@media (max-width: 560px) { .hbar-row { grid-template-columns: 110px 1fr 90px; } }

/* Projected bars/tiles — dimmed and outlined so a forecast never looks like actuals. */
.dual-col.proj, .vbar-col.proj { opacity: 0.5; }
.dual-col.proj .db, .vbar-col.proj .vbar { outline: 1px dashed var(--muted); outline-offset: -1px; }
.proj-tile { border-style: dashed; }
.proj-tile .value { color: var(--muted); }

.input {
  font-family: inherit; font-size: 14px; padding: 6px 9px;
  border: 1px solid var(--line-firm); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); width: 68px;
  text-align: right; font-variant-numeric: tabular-nums;
}
.input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
select.input { width: auto; text-align: left; }

.empty { padding: 48px 24px; text-align: center; color: var(--muted); }
.spinner { padding: 48px; text-align: center; color: var(--faint); }
.hint-line { font-size: 13px; color: var(--muted); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.rule-line { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.back { font-size: 13.5px; color: var(--muted); }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  padding: 12px 20px; border-radius: var(--r); font-size: 14px; font-weight: 500;
  box-shadow: 0 6px 24px rgba(43,39,36,.16); z-index: 50;
}
.toast.ok  { background: var(--mint); color: var(--mint-ink); }
.toast.bad { background: var(--rose); color: var(--rose-ink); }

.print-only { display: none; }
.statement-head { display: none; justify-content: space-between; gap: 24px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.statement-head .st-issuer { font-family: var(--serif, Fraunces, serif); font-size: 20px; color: var(--accent); font-weight: 600; }
.statement-head .st-title { font-family: var(--serif, Fraunces, serif); font-size: 24px; }
@media print {
  .print-only { display: block; }
  .statement-head { display: flex; }
  body.with-nav { padding-left: 0; }
  .topbar, .sidebar, .no-print { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ddd; }
}

/* ============================================================ auth & forms == */

body.signed-out { background: linear-gradient(170deg, #FDFCFA 0%, #FBF4EC 100%); min-height: 100vh; }
body.signed-out .shell { max-width: 940px; padding-top: 8vh; }

.auth-wrap { max-width: 460px; margin: 0 auto; }

.auth-card { padding: 30px 32px; }
.auth-brand {
  display: flex; align-items: center;
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  color: var(--muted); letter-spacing: -.01em; margin-bottom: 20px;
}
.auth-brand span { color: var(--accent); }

.field { display: block; margin-top: 14px; }
.field > span:first-child {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--faint); font-weight: 600; margin-bottom: 5px;
}
.input.wide, button.wide { width: 100%; text-align: left; }
button.wide { text-align: center; padding: 11px; font-size: 15px; }
input.input.wide { text-align: left; font-size: 15px; padding: 9px 11px; }

.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 14px; }
.form-row .field { margin-top: 0; }

/* Two-step sign-in: the QR code to scan, the manual key, the recovery codes to keep. */
.mfa-steps { margin: 16px 0 4px; padding-left: 20px; font-size: 14px; }
.mfa-steps li + li { margin-top: 10px; }
.mfa-qr { width: 196px; margin: 12px 0 6px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r); background: #FFFFFF; }
.mfa-qr svg { display: block; width: 100%; height: auto; }
.mfa-manual summary { cursor: pointer; color: var(--accent); font-size: 13px; }
.mfa-manual .kv { margin-top: 8px; }
.mfa-manual code { font-size: 14px; letter-spacing: .04em; word-spacing: .2em; }
input.input.wide.code-input { font-family: var(--mono); font-size: 18px; letter-spacing: .12em; }
.auth-alt { margin-top: 16px; }

/* The sign-in padlock: the proof of work, shown (js/pow.js). Closed and quiet until Continue; the
   body glows accent while the browser works, the bar fills with the chance it is done, and the
   shackle swings open when the puzzle is solved. */
.pow {
  display: grid; grid-template-columns: 40px 1fr; gap: 4px 12px; align-items: start;
  margin-top: 16px; padding: 12px 14px;
  background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r);
}
.pow-lock { width: 36px; height: 36px; color: var(--faint); transition: color .35s ease; overflow: visible; }
.pow-keyhole { fill: var(--sunken); }
.pow-shackle { transform-origin: 16.5px 11px; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.pow-head { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.pow-time { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pow-note:empty { display: none; }

/* The ⓘ beside "Security check": a plain-language tooltip on hover, keyboard focus or tap. */
.pow-info-wrap { position: relative; display: inline-flex; }
.pow-info {
  width: 17px; height: 17px; min-height: 0; padding: 0; border-radius: 50%;
  display: inline-grid; place-items: center;
  border: 1px solid var(--line-firm); background: var(--surface); color: var(--muted);
  font: italic 600 11px/1 var(--serif); cursor: help;
}
.pow-info:hover, .pow-info:focus-visible { color: var(--ink); border-color: var(--muted); }
.pow-tip {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(270px, 78vw); padding: 10px 12px;
  background: var(--ink); color: var(--surface); border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 400; line-height: 1.45; text-align: left;
  box-shadow: 0 6px 18px rgba(43, 39, 36, .18);
  opacity: 0; visibility: hidden; transition: opacity .15s ease, visibility .15s;
  pointer-events: none;
}
.pow-tip::before {
  content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border: 6px solid transparent; border-bottom-color: var(--ink);
}
.pow-info:hover + .pow-tip, .pow-info:focus + .pow-tip { opacity: 1; visibility: visible; }
.pow-bar { height: 6px; margin: 7px 0 7px; border-radius: 3px; background: var(--line); overflow: hidden; }
.pow-bar span { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--accent); transition: width .12s linear; }
.pow-note { font-size: 12.5px; line-height: 1.45; color: var(--muted); }

.pow[data-state="working"] .pow-lock { color: var(--accent); animation: pow-jiggle 1.1s ease-in-out infinite; }
.pow[data-state="working"] .pow-bar span {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-deep) 50%, var(--accent) 100%);
  background-size: 200% 100%; animation: pow-shimmer 1s linear infinite;
}
.pow[data-state="done"] { border-color: var(--mint); }
.pow[data-state="done"] .pow-lock { color: var(--mint-ink); }
.pow[data-state="done"] .pow-shackle { transform: translateY(-2.5px) rotate(-28deg); }
.pow[data-state="done"] .pow-bar span { background: var(--mint-ink); }
.pow[data-state="done"] .pow-title { color: var(--mint-ink); }
.pow[data-state="error"] .pow-lock { color: var(--rose-ink); }

@keyframes pow-jiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}
@keyframes pow-shimmer { from { background-position: 200% 0; } to { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .pow-lock, .pow-bar span, .pow-shackle { animation: none !important; transition: none !important; }
}
.recovery-codes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px;
  margin: 16px 0; padding: 14px 16px 14px 36px; font-size: 14.5px;
  background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r);
}

/* ================================================================= session == */

.side-foot button { white-space: nowrap; }
.session-who { line-height: 1.25; }
.session-name { font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.session-role {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--faint); font-weight: 600;
}

.stat-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--faint); font-weight: 600;
}
.money.big {
  font-family: var(--serif); font-size: 24px; font-weight: 600;
  text-align: left; margin-top: 3px; letter-spacing: -.02em;
}

/* =========================================================== modal & forms == */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(43, 39, 36, .34);
  display: grid; place-items: center;
  padding: 4vh 20px; overflow: hidden;
  animation: fade .12s ease-out;
}
@keyframes fade { from { opacity: 0 } to { opacity: 1 } }

.modal {
  width: 100%; max-width: 720px; max-height: 92vh;
  display: flex; flex-direction: column;
  box-shadow: 0 18px 60px rgba(43, 39, 36, .22);
  animation: rise .16s ease-out;
}
@keyframes rise { from { transform: translateY(8px); opacity: .6 } to { transform: none; opacity: 1 } }

.modal .card-head { flex: none; border-radius: var(--r-lg) var(--r-lg) 0 0; }
.modal-body { padding: 20px 24px 24px; overflow-y: auto; flex: 1 1 auto; }
.modal-foot {
  flex: none;
  padding: 15px 24px; border-top: 1px solid var(--line); background: var(--sunken);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  display: flex; justify-content: flex-end; gap: 10px;
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .field { margin-top: 0; }

.form-section {
  margin: 24px 0 12px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 15px;
}

.field .field-hint, .check .field-hint {
  display: block; font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.45;
  text-transform: none; letter-spacing: 0; font-weight: 400;
}
.field .field-error, .check .field-error {
  display: block; font-size: 12.5px; margin-top: 5px; font-weight: 500; line-height: 1.45;
  color: var(--rose-ink); text-transform: none; letter-spacing: 0;
}
.field.has-error .input { border-color: var(--rose-ink); background: #FFFBFA; }
.field.has-warning .field-error, .check.has-warning .field-error { color: var(--butter-ink); }
.field.has-warning .input { border-color: var(--butter-ink); }

.check-stack { display: grid; gap: 10px; margin-top: 14px; }
.check {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer; background: var(--surface);
}
.check:hover { background: var(--sunken); }
.check input { margin-top: 2px; accent-color: var(--accent); width: 15px; height: 15px; }
.check > span { font-size: 13.5px; }
.check strong { font-weight: 500; display: block; }
.check .field-error { grid-column: 2; }
.check.has-error { border-color: var(--rose-ink); }
.check.has-warning { border-color: var(--butter-ink); }

tr.archived td { opacity: .55; }
td.nowrap, .nowrap { white-space: nowrap; }

/* ============================================== expanded records & repeaters == */

/* Multi-line inputs (address, admin notes) reuse the .input look but flow downward. */
textarea.input {
  width: 100%; text-align: left; resize: vertical; min-height: 62px;
  line-height: 1.5; font-size: 14px;
}

/* A repeatable list of rows — emergency contacts, recurring pay items. */
.repeat-list { display: grid; gap: 10px; }
.repeat-row {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--sunken);
}
.repeat-cell { flex: 1 1 130px; min-width: 0; display: flex; flex-direction: column; }
.repeat-cell > span {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); font-weight: 600; margin-bottom: 4px;
}
.repeat-cell .input.wide { width: 100%; }
.repeat-check { flex: 0 0 auto; }
.repeat-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); align-self: flex-start; margin-top: 4px; }
.repeat-del { flex: none; color: var(--rose-ink); padding: 6px 10px; }
.repeat-del:hover { background: var(--rose); color: var(--rose-ink); }

/* Admin notes — an authored, timestamped log. */
.note-log { display: grid; gap: 10px; }
.note-item {
  padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface); font-size: 13.5px; line-height: 1.5;
}
.note-meta {
  font-size: 11px; color: var(--faint); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px;
}

/* Active legal entity, shown under the wordmark in the sidebar (a chip, or a switcher for admins). */
.entity-chip, .entity-switch {
  display: block; width: 100%; max-width: 100%;
  font-size: 12.5px; font-weight: 600; color: var(--accent-deep);
  background: var(--accent-soft); border: 1px solid transparent;
  border-radius: 999px; padding: 5px 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.entity-switch { font-family: inherit; cursor: pointer; }
.entity-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ================================================================= messaging == */

.nav-badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  padding: 0 5px; margin-left: 6px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 1;
}

.thread-list { display: flex; flex-direction: column; }
.thread-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 20px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.thread-item:last-child { border-bottom: none; }
.thread-item:hover { background: var(--sunken); }
.thread-item.unread .thread-subject { font-weight: 600; }
.thread-main { flex: 1; min-width: 0; }
.thread-top { display: flex; align-items: center; gap: 8px; }
.thread-name { font-weight: 600; }
.thread-when { margin-left: auto; font-size: 12px; color: var(--faint); white-space: nowrap; }
.thread-subject { margin-top: 2px; }
.thread-snippet {
  font-size: 13px; color: var(--muted); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.thread-item .nav-badge { align-self: center; }

.msg-log { display: flex; flex-direction: column; gap: 10px; max-height: 56vh; overflow-y: auto; }
.msg-row { display: flex; }
.msg-row.mine { justify-content: flex-end; }
.msg-bubble {
  max-width: 78%; background: var(--sunken); border: 1px solid var(--line);
  border-radius: 14px; padding: 10px 14px;
}
.msg-bubble.mine { background: var(--accent-soft); border-color: transparent; }
.msg-sender {
  font-size: 11px; font-weight: 700; color: var(--accent-deep);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px;
}
.msg-body { white-space: pre-wrap; line-height: 1.5; }
.msg-when { font-size: 11px; color: var(--faint); margin-top: 5px; text-align: right; }

.cfg-h { font-family: var(--serif); font-size: 14px; font-weight: 600; margin: 0 0 8px; }

.approve-check { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

/* Timesheet status strip — one cell per lifecycle stage, counts over the scoped set. */
.status-strip { display: flex; flex-wrap: wrap; gap: 8px; }
.status-cell {
  flex: 1 1 110px; display: grid; gap: 2px; padding: 10px 12px; text-align: left;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  font: inherit; color: var(--ink); cursor: default;
}
button.status-cell { cursor: pointer; }
button.status-cell:hover, button.status-cell:focus-visible { border-color: var(--accent); outline: none; }
.status-cell.active { border-color: var(--accent); background: var(--accent-soft); }
.status-cell.zero .status-n { color: var(--faint); }
.status-n { font-family: var(--serif); font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.status-k { font-size: 12px; color: var(--muted); }
.time-input { width: 96px; text-align: left; }
input[data-pick-for].invalid, .time-input.invalid { border-color: var(--rose-ink); background: var(--rose); }
.ph-row td { background: var(--peri); }
.ph-row td:first-child { border-left: 3px solid var(--peri-ink); }

/* Capability ticks on the account form, grouped by area. */
.cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 12px; }
.cap-area { border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: var(--surface); }
.cap-area-name { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; margin: 2px 0 6px 4px; }
.cap-area .check { margin: 0; }

/* ------------------------------------------------------------ notices (t38) */
.notice-row { padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--accent-sky); border-radius: 0 8px 8px 0; }
.notice-title { font-weight: 600; margin-bottom: 2px; }
.notice-body { white-space: pre-line; font-size: 14px; }
.notice-row.expired { opacity: .6; border-left-color: var(--line); background: var(--paper); }
.inv-num { font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px; white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* ------------------------------------------------ layout beside the sidebar --- */
/* Beside the sidebar the page is ~240px narrower than the window, so layouts fold earlier. */
.side-nav a .nav-badge { margin-left: auto; }
@media (min-width: 1181px) and (max-width: 1320px) {
  .grid.c4 { grid-template-columns: 1fr 1fr; }
  .map-wrap { grid-template-columns: 1fr; }
  .map-legend { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 16px; }
}

/* ------------------------------------------------------ report builder --- */
.builder { display: grid; grid-template-columns: 250px 1fr; gap: 18px; align-items: start; }
.builder-side .card + .card { margin-top: 18px; }
.builder-main { min-width: 0; }
@media (max-width: 980px) { .builder { grid-template-columns: 1fr; } }
.fav-row { display: flex; align-items: center; gap: 6px; padding: 3px 0; }
button.linkish { background: none; border: 0; padding: 0; min-height: 0; color: var(--accent); font: inherit; text-align: left; cursor: pointer; }
button.linkish:hover { text-decoration: underline; }
button.linkish.active { color: var(--ink); font-weight: 600; }
.builder-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
details.multi { position: relative; }
details.multi > summary { list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--surface); font-size: 13.5px; }
details.multi > summary::-webkit-details-marker { display: none; }
details.multi[open] > summary { border-color: var(--accent); }
.multi-list { position: absolute; z-index: 20; margin-top: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; max-height: 280px; overflow: auto; min-width: 240px; box-shadow: 0 8px 24px rgba(43,39,36,.08); }
.check-inline { display: flex; gap: 6px; align-items: center; font-size: 13.5px; padding: 2px 0; }
.field-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 2px 14px; }
a.builder-link { display: block; text-decoration: none; color: inherit; margin-bottom: 18px; }
a.builder-link:hover { border-color: var(--accent); }
details.fields-card > summary { list-style: none; cursor: pointer; }
details.fields-card > summary::-webkit-details-marker { display: none; }
details.fields-card:not([open]) > summary { border-bottom: 0; }
details.fields-card > summary h3::before { content: '▸ '; color: var(--muted); }
details.fields-card[open] > summary h3::before { content: '▾ '; }

/* A cell with a quiet bar behind its figure — the branch-hours grid. */
.heat { position: relative; padding: 2px 4px; border-radius: 4px; background: linear-gradient(270deg, var(--accent-soft) var(--w), transparent var(--w)); }

.adjust-box { margin-top: 12px; padding: 12px; border: 1px dashed var(--line); border-radius: 10px; background: var(--surface); }

.job-row td { background: var(--sunken); padding-top: 8px; padding-bottom: 8px; }
.job-line { display: flex; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.job-line input[data-jl="location"], .job-line input[data-jl="task"] { flex: 1; min-width: 160px; text-align: left; }
button.job-toggle { padding: 0 6px; min-height: 0; margin-top: 4px; }

/* Segmented tab bars (People, Config). The buttons carry their own styling; this only groups
   them, keeps them on one rail and lets them wrap rather than overflow on a narrow window. */
.seg { display: flex; flex-wrap: wrap; gap: 4px; }
.config-tabs {
  margin: -4px 0 20px;
  padding: 4px;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.config-tabs button { border-radius: 7px; }
.config-tabs button.ghost:hover { background: var(--surface); }
.seg-count {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 8px;
  background: rgba(0, 0, 0, .07);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}
.config-tabs button.primary .seg-count { background: rgba(255, 255, 255, .25); }