/* ============================================================================
   CIM Workforce Console — design tokens
   Brand colours sampled from the Christian Impact Mission logo:
   emerald #00693F (the Africa mark) and near-black #101010 (the laurel wreath).
   Chart palettes validated for colour-vision deficiency in both themes.
   ========================================================================== */

:root {
  /* brand */
  --brand:#00693F;
  --brand-2:#005633;
  --brand-3:#0B7D4E;
  --brand-ink:#FFFFFF;
  --brand-soft:#DFF0E7;
  --brand-softer:#EFF7F2;

  /* neutrals — biased very slightly green so they sit with the brand */
  --ground:#EDF1EE;
  --surface:#FFFFFF;
  --surface-2:#F5F8F6;
  --surface-3:#E6EDE9;
  --ink:#101815;
  --ink-2:#41544C;
  --muted:#75877F;
  --line:#DCE5E0;
  --line-2:#C4D2CB;

  /* semantic */
  --good:#00693F; --good-soft:#DFF0E7;
  --warn:#B06A10; --warn-soft:#FAEBD6;
  --crit:#B3341F; --crit-soft:#F9E1DC;
  --info:#1C6FAF; --info-soft:#DEEAF5;

  /* categorical (validated) */
  --c1:#00693F; --c2:#1C6FAF; --c3:#C0552A; --c4:#7A51A5; --c5:#A8862A;
  /* sequential, single hue */
  --s1:#005633; --s2:#0B7D4E; --s3:#3E9A6E; --s4:#77B79A; --s5:#B3D5C4;

  --shadow-sm:0 1px 2px rgba(16,24,21,.06);
  --shadow:0 1px 2px rgba(16,24,21,.05), 0 6px 18px rgba(16,24,21,.06);
  --shadow-lg:0 12px 40px rgba(16,24,21,.16);
  --r:12px; --r-sm:8px;
  color-scheme: light;
}

/* Dark is opt-in, not automatic. The system defaults to light so that what
   the organisation sees on screen matches what comes off the printer, and so
   a payslip shown on a projector is legible in a bright room. Setting
   data-theme="auto" on <html> restores following the operating system;
   data-theme="dark" forces dark. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --brand:#35B27C; --brand-2:#2A9A69; --brand-3:#4CC791;
    --brand-ink:#04120C; --brand-soft:#0E2C1F; --brand-softer:#0B2119;
    --ground:#0C1211; --surface:#141B19; --surface-2:#1B2421; --surface-3:#25302C;
    --ink:#E8F0EC; --ink-2:#AABDB4; --muted:#7A8D85;
    --line:#26312D; --line-2:#374540;
    --good:#35B27C; --good-soft:#0E2C1F;
    --warn:#D69A3E; --warn-soft:#332611;
    --crit:#E0705C; --crit-soft:#361B16;
    --info:#4A97D6; --info-soft:#13293A;
    --c1:#2E9B6A; --c2:#4A97D6; --c3:#D4703F; --c4:#9B79C4; --c5:#A8822C;
    --s1:#4CC791; --s2:#35B27C; --s3:#2A8E64; --s4:#20684A; --s5:#184C36;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.3);
    --shadow-lg:0 14px 44px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand:#35B27C; --brand-2:#2A9A69; --brand-3:#4CC791;
  --brand-ink:#04120C; --brand-soft:#0E2C1F; --brand-softer:#0B2119;
  --ground:#0C1211; --surface:#141B19; --surface-2:#1B2421; --surface-3:#25302C;
  --ink:#E8F0EC; --ink-2:#AABDB4; --muted:#7A8D85;
  --line:#26312D; --line-2:#374540;
  --good:#35B27C; --good-soft:#0E2C1F;
  --warn:#D69A3E; --warn-soft:#332611;
  --crit:#E0705C; --crit-soft:#361B16;
  --info:#4A97D6; --info-soft:#13293A;
  --c1:#2E9B6A; --c2:#4A97D6; --c3:#D4703F; --c4:#9B79C4; --c5:#A8822C;
  --s1:#4CC791; --s2:#35B27C; --s3:#2A8E64; --s4:#20684A; --s5:#184C36;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 6px 20px rgba(0,0,0,.3);
  --shadow-lg:0 14px 44px rgba(0,0,0,.55);
}

*, *::before, *::after { box-sizing: border-box; }
html, body, #root { height: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
img { max-width: 100%; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
.num { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
.serif { font-family: "IBM Plex Serif", Georgia, serif; }

/* ---------------------------------------------------------------- shell */
.shell { display: grid; grid-template-columns: 244px 1fr; min-height: 100%; }

.side {
  background: linear-gradient(170deg, var(--brand-2) 0%, var(--brand) 42%, var(--brand-2) 100%);
  color: #fff; display: flex; flex-direction: column;
  position: sticky; top: env(safe-area-inset-top, 0px);
  align-self: start; height: 100vh; max-height: 100vh; overflow-y: auto;
}
.brand { display: flex; gap: 11px; align-items: center; padding: 18px 16px 14px; }
.brand img { width: 40px; height: 40px; object-fit: contain; flex: none;
  background: #fff; border-radius: 9px; padding: 3px; }
.brand b { display: block; font-size: 13px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.brand span { display: block; font-size: 10.5px; opacity: .78; margin-top: 1px; }

.navgroup { padding: 10px 10px 2px; }
.navgroup h4 {
  font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase;
  opacity: .62; font-weight: 600; padding: 0 8px 7px;
}
.nav { display: flex; flex-direction: column; gap: 1px; }
.nav button {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 8px; background: none; cursor: pointer;
  font-size: 13px; color: rgba(255,255,255,.84); position: relative;
}
.nav button:hover:not(:disabled) { background: rgba(255,255,255,.12); color: #fff; }
.nav button.on { background: #fff; color: var(--brand-2); font-weight: 600; box-shadow: var(--shadow-sm); }
.nav button:disabled { opacity: .46; cursor: default; }
.nav .ico { width: 15px; text-align: center; flex: none; opacity: .9; }
.nav .badge {
  margin-left: auto; font-size: 9.5px; font-weight: 700; min-width: 17px; height: 17px;
  padding: 0 5px; border-radius: 9px; display: grid; place-items: center;
  background: rgba(255,255,255,.22); color: #fff;
}
.nav button.on .badge { background: var(--brand); color: #fff; }
.nav .tag {
  margin-left: auto; font-size: 9px; letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.32); border-radius: 4px; padding: 1px 4px; opacity: .8;
}
.sidefoot { margin-top: auto; padding: 14px 16px 18px; font-size: 10.5px; opacity: .7; line-height: 1.45; }

/* ---------------------------------------------------------------- topbar */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 24px; background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
}
.topbar h1 { font-size: 17px; font-weight: 600; letter-spacing: -.02em; }
.topbar .sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.grow { flex: 1 1 auto; }
.avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--brand); color: #fff; font-size: 11px; font-weight: 600;
}
.iconbtn {
  width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink-2); cursor: pointer; display: grid; place-items: center;
  font-size: 14px;
}
.iconbtn:hover { background: var(--surface-2); color: var(--ink); }

.demobar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 8px 24px; background: var(--warn-soft); color: var(--warn);
  font-size: 11.5px; border-bottom: 1px solid var(--line);
}
.demobar b { font-weight: 700; }

.page { padding: 20px 24px 60px; display: flex; flex-direction: column; gap: 18px; }
.page > *, .g2 > *, .g3 > *, .g4 > *, .stack > * { min-width: 0; }

/* ---------------------------------------------------------------- chips */
.chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500;
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line-2);
  color: var(--ink-2); background: var(--surface-2); white-space: nowrap;
}
.chip.brand { background: var(--brand-soft); color: var(--brand); border-color: transparent; font-weight: 600; }
.chip.good { background: var(--good-soft); color: var(--good); border-color: transparent; }
.chip.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.chip.crit { background: var(--crit-soft); color: var(--crit); border-color: transparent; }
.chip.info { background: var(--info-soft); color: var(--info); border-color: transparent; }

.pill {
  display: inline-block; font-size: 10.5px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; white-space: nowrap;
}
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.crit { background: var(--crit-soft); color: var(--crit); }
.pill.info { background: var(--info-soft); color: var(--info); }
.pill.neutral { background: var(--surface-3); color: var(--ink-2); }

/* ---------------------------------------------------------------- cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.card > header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px 16px 0; }
.card > header h3 { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.card > header .ref {
  margin-left: auto; font-size: 9.5px; color: var(--muted); letter-spacing: .05em;
  text-transform: uppercase; font-weight: 600;
}
.card .body { padding: 14px 16px 16px; }
.card .body.flush { padding: 10px 0 2px; }

.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.g3 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; align-items: start; }
.g4 { display: grid; grid-template-columns: 1fr 1.25fr; gap: 16px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 16px; }

/* ---------------------------------------------------------------- KPI */
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.kpis.c4 { grid-template-columns: repeat(4, 1fr); }
.kpi {
  position: relative; overflow: hidden; border-radius: var(--r); padding: 14px 15px 13px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--tone, var(--brand)); }
.kpi .k { font-size: 11px; color: var(--muted); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.kpi .v { font-size: 26px; font-weight: 600; letter-spacing: -.03em; margin-top: 6px; line-height: 1.1; color: var(--tone, var(--ink)); }
.kpi .v.word { font-size: 16px; letter-spacing: -.01em; padding-top: 5px; }
.kpi .v small { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.kpi .f { font-size: 11px; color: var(--muted); margin-top: 6px; }
.kpi .f b { color: var(--ink-2); font-weight: 600; }

/* hero band */
.hero {
  border-radius: var(--r); padding: 18px 20px; color: #fff;
  background: linear-gradient(120deg, var(--brand-2) 0%, var(--brand) 55%, var(--brand-3) 100%);
  display: flex; gap: 20px; align-items: center; flex-wrap: wrap; box-shadow: var(--shadow);
}
.hero h2 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.hero p { margin: 3px 0 0; font-size: 12px; opacity: .88; max-width: 52ch; }
.hero .stat { display: flex; gap: 22px; margin-left: auto; flex-wrap: wrap; }
.hero .stat div span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; opacity: .78; }
.hero .stat div b { font-size: 19px; font-weight: 600; letter-spacing: -.02em; }

/* ---------------------------------------------------------------- figures */
.figs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.figs.c3 { grid-template-columns: repeat(3, 1fr); }
.figs.c4 { grid-template-columns: repeat(4, 1fr); }
.figs.c5 { grid-template-columns: repeat(5, 1fr); }
.fig { background: var(--surface); padding: 10px 13px; }
.fig .k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.fig .v { font-size: 16px; font-weight: 600; letter-spacing: -.02em; margin-top: 3px; }
.fig.em { background: var(--brand-softer); }
.fig.em .v { color: var(--brand); }

/* ---------------------------------------------------------------- bars */
.bars { display: flex; flex-direction: column; gap: 11px; }
.bar .top { display: flex; align-items: baseline; gap: 4px 8px; margin-bottom: 5px; flex-wrap: wrap; }
.bar .nm { font-size: 12.5px; font-weight: 500; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .sub { font-size: 10.5px; color: var(--muted); white-space: nowrap; flex: none; }
.bar .val { margin-left: auto; font-size: 12px; font-weight: 600; white-space: nowrap; flex: none; }
.bar .pct { font-size: 10.5px; color: var(--muted); min-width: 40px; text-align: right; flex: none; }
.track { height: 10px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
/* <i> is inline by default, so without display:block the width/height are ignored
   and the bar never paints. */
.fill { display: block; height: 100%; border-radius: 4px; min-width: 3px;
  transition: width .6s cubic-bezier(.4,0,.2,1); }

.legend { display: flex; flex-wrap: wrap; gap: 9px 16px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line); }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ink-2); }
.swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* ---------------------------------------------------------------- donut */
.donut-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.donut { flex: none; }
.donut-key { display: flex; flex-direction: column; gap: 7px; flex: 1 1 180px; min-width: 0; }
.donut-key .row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.donut-key .row .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donut-key .row .v { font-weight: 600; white-space: nowrap; }

/* ---------------------------------------------------------------- tables */
.tablewrap { overflow-x: auto; max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: 12.5px; }

/* ------------------------------------------------- tables on a small screen
   A table wider than the screen scrolls sideways inside .tablewrap, which is
   fine for a wide reference grid you skim. It is not fine for a table you ACT
   on: the Users & Access sign-in list is seven columns, and on a phone the
   person's name scrolls out of view exactly when you reach the button that
   disables or deletes them. Acting on the wrong row is a short step from
   there.

   So a table marked `.stack` stops being a table below 760px and becomes one
   card per row, each cell labelled with its own column heading. The heading
   comes from `data-label` on the cell rather than from CSS counters or a
   duplicated markup block, because a label that lives next to the value is
   the one that cannot drift away from it.

   A cell with no `data-label` prints no heading — right for the actions cell,
   where the buttons say what they are.

   860px rather than a phone width, and the same breakpoint the add-a-user form
   uses: an iPad held upright is 768px, and the sign-in table is still 200px
   too wide there. One breakpoint for both also means one number to reason
   about when a screen lands between them. */
@media (max-width: 860px) {
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack thead { display: none; }

  table.stack tr {
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    margin-bottom: 10px;
    padding: 4px 2px;
    background: var(--surface);
  }
  table.stack tbody tr:last-child { margin-bottom: 0; }

  table.stack td {
    padding: 7px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
  }
  table.stack tr td:last-child { border-bottom: 0; }

  /* The label is positioned out of flow rather than being a grid or flex item,
     and this is the whole trick. Making the cell a two-column grid reads
     beautifully until a cell contains prose with inline markup in it: every
     child becomes a grid item, so `<b>Confirms</b> the month's figures` puts
     the bold word in the label column and the rest beside it, and the
     paragraph comes apart. Out-of-flow label, cell content left alone. */
  table.stack td[data-label] { position: relative; padding-left: calc(9ch + 22px); }
  table.stack td[data-label]::before {
    content: attr(data-label);
    position: absolute; left: 12px; top: 8px; width: 9ch;
    font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
    color: var(--muted); font-weight: 600; line-height: 1.35;
  }

  /* Right- and centre-alignment exist to line a value up with the ones above
     and below it. Stacked there is no column to line up with, and the value
     belongs beside its own label. `!important` because several of these are
     inline `style="text-align:center"` on the cell, set where the column
     width was. */
  table.stack td.r,
  table.stack td { text-align: left !important; }

  /* An empty cell would otherwise show as a labelled blank line. */
  table.stack td:empty { display: none; }

  /* Controls inside a stacked row have the full width to use. */
  table.stack .inlineform { flex-wrap: wrap; }
  table.stack .inlineform input,
  table.stack .inlineform select { flex: 1 1 11rem; min-width: 0; width: auto; }
  table.stack details > form { min-width: 0 !important; max-width: none !important; }

  /* A row of action buttons is laid out flex-end so it hugs the right of a
     wide table column. Stacked there is no column to hug, and holding the
     alignment pushes the last button past the card edge. */
  table.stack td > div[style*="flex-end"] { justify-content: flex-start !important; }

  /* An email address is one long unbreakable token, and it is printed inside
     the "type this to confirm" label. Nothing else on the page needs this, so
     it is scoped to the stacked cell rather than loosened globally. */
  table.stack td label b,
  table.stack td .note { overflow-wrap: anywhere; }

  /* `white-space: nowrap` keeps a row of buttons on one line while there is a
     column wide enough to hold it. Stacked there is not, and the row runs off
     the card instead of wrapping. */
  table.stack td { white-space: normal !important; }
}
th {
  text-align: left; font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; padding: 0 12px 8px; white-space: nowrap;
  border-bottom: 1px solid var(--line); background: var(--surface);
}
td { padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--brand-softer); }
tbody tr.sel { background: var(--brand-soft); }
tfoot td { font-weight: 600; border-top: 2px solid var(--line-2); border-bottom: 0; background: var(--surface-2); }
.r { text-align: right; }
.who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.who .ini {
  width: 27px; height: 27px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 10px; font-weight: 600; color: #fff;
}
.who .nm { min-width: 0; }
.who .nm b { display: block; font-weight: 500; font-size: 12.5px; }
.who .nm span { display: block; font-size: 10.5px; color: var(--muted); }

.mini { height: 6px; border-radius: 3px; background: var(--surface-3); overflow: hidden; width: 70px; display: inline-block; vertical-align: middle; }
.mini i { display: block; height: 100%; background: var(--brand); border-radius: 3px; }

/* ---------------------------------------------------------------- controls */
input[type="text"], input[type="search"], select {
  font: inherit; font-size: 12.5px; padding: 7px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); max-width: 100%;
}
input:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.toolbar { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.search { flex: 1 1 220px; min-width: 0; }

.btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); font-size: 12.5px;
  font-weight: 500; cursor: pointer; white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--surface-2); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover:not(:disabled) { background: var(--brand-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.sm { padding: 5px 10px; font-size: 11.5px; }
/* Destructive actions. Outlined rather than filled: a solid red button beside
   a solid green one reads as the pair of choices on the screen, and removing a
   staff record is never the expected choice. It fills in only on hover, once
   the pointer is already on it. */
.btn.danger { border-color: var(--crit); color: var(--crit); background: var(--surface); }
.btn.danger:hover:not(:disabled) { background: var(--crit); border-color: var(--crit); color: #fff; }
/* A <summary> styled as a button still shows the disclosure triangle.
   It also picks up the "+ " that `details > summary::before` puts in front of
   every disclosure further down this file — which is right for a line of text
   you expand and wrong on a button, where "+ Delete" reads as "add a delete".
   A class beats two type selectors, so this wins wherever it sits in the
   file. */
summary.btn { list-style: none; }
summary.btn::-webkit-details-marker { display: none; }
summary.btn::marker { content: ""; }
summary.btn::before,
details[open] > summary.btn::before { content: none; }

.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px; gap: 2px; }
.seg button { border: 0; background: none; padding: 5px 11px; border-radius: 6px; font-size: 12px; color: var(--ink-2); cursor: pointer; }
.seg button.on { background: var(--surface); color: var(--brand); font-weight: 600; box-shadow: var(--shadow-sm); }

/* ---------------------------------------------------------------- lists */
.qlist { display: flex; flex-direction: column; }
.q { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; align-items: center;
  padding: 10px 16px; border-bottom: 1px solid var(--line); }
.q:last-child { border-bottom: 0; }
.q:hover { background: var(--surface-2); }
.q .m { font-size: 11px; color: var(--muted); grid-column: 1 / -1; margin-top: -3px; }
.empty { padding: 26px 16px; text-align: center; color: var(--muted); font-size: 12px; }

.note { font-size: 11.5px; color: var(--muted); line-height: 1.55; }
.note code { font-family: "IBM Plex Mono", monospace; font-size: 11px; background: var(--surface-3); padding: 1px 5px; border-radius: 4px; color: var(--ink-2); }

/* ---------------------------------------------------------------- drawer */
.scrim { position: fixed; inset: 0; background: rgba(8,16,13,.45); z-index: 80;
  animation: fade .18s ease; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%); z-index: 90;
  background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; animation: slide .24s cubic-bezier(.32,.72,.35,1);
}
@keyframes fade { from { opacity: 0 } }
@keyframes slide { from { transform: translateX(26px); opacity: .4 } }
.drawer .dhead { padding: 18px 20px 14px; border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, var(--brand-2), var(--brand)); color: #fff; }
.drawer .dhead .row { display: flex; align-items: center; gap: 12px; }
.drawer .dhead .ini { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.2);
  display: grid; place-items: center; font-size: 15px; font-weight: 600; flex: none; }
.drawer .dhead h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.drawer .dhead .meta { font-size: 11.5px; opacity: .85; margin-top: 1px; }
.drawer .close { margin-left: auto; background: rgba(255,255,255,.16); border: 0; color: #fff;
  width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 15px; flex: none; }
.drawer .close:hover { background: rgba(255,255,255,.28); }
.dtabs { display: flex; gap: 2px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); overflow-x: auto; }
.dtabs button { border: 0; background: none; padding: 10px 12px; font-size: 12.5px; color: var(--muted);
  cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; }
.dtabs button.on { color: var(--brand); font-weight: 600; border-bottom-color: var(--brand); }
.dbody { padding: 16px 20px 28px; overflow-y: auto; flex: 1; }

.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.kv > div { background: var(--surface); padding: 9px 12px; }
.kv .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.kv .v { font-size: 12.5px; font-weight: 500; margin-top: 2px; }

.doclist { display: flex; flex-direction: column; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.doc { background: var(--surface); padding: 9px 12px; display: flex; align-items: center; gap: 10px; }
.doc .nm { flex: 1 1 auto; min-width: 0; font-size: 12.5px; }
.doc .nm span { display: block; font-size: 10.5px; color: var(--muted); }

/* ---------------------------------------------------------------- payslip */
.slip { max-width: 780px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.slip .hd { padding: 18px 22px; background: linear-gradient(120deg, var(--brand-2), var(--brand));
  color: #fff; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.slip .hd img { width: 42px; height: 42px; object-fit: contain; background: #fff; border-radius: 8px; padding: 3px; flex: none; }
.slip .hd h2 { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.slip .hd .meta { font-size: 11.5px; opacity: .88; margin-top: 2px; }
.slip .hd .rt { margin-left: auto; text-align: right; }
.slip .who2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border-bottom: 1px solid var(--line); }
.slip .who2 > div { background: var(--surface-2); padding: 9px 14px; }
.slip .who2 .k { font-size: 9px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; }
.slip .who2 .v { font-size: 12.5px; font-weight: 500; margin-top: 2px; }
.slipcols { display: grid; grid-template-columns: 1fr 1fr; }
.slipcol { padding: 16px 22px; }
.slipcol + .slipcol { border-left: 1px solid var(--line); }
.slipcol h4 { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 9px; }
.li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 12.5px; border-bottom: 1px dotted var(--line); }
.li.sum { border-bottom: 0; border-top: 1.5px solid var(--line-2); margin-top: 6px; padding-top: 8px; font-weight: 600; }
.li .src { display: block; font-size: 10px; color: var(--muted); font-weight: 400; margin-top: 1px; }
.netbar { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 15px 22px; background: var(--brand-soft); border-top: 1px solid var(--line); }
.netbar .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--brand); font-weight: 700; }
.netbar .v { font-size: 24px; font-weight: 600; letter-spacing: -.03em; color: var(--brand); }
.slipfoot { padding: 12px 22px 16px; font-size: 10.5px; color: var(--muted); border-top: 1px solid var(--line);
  display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- workflow */
.flow { display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: start; padding: 7px 0; }
.step .mkr { position: relative; display: grid; place-items: center; height: 18px; }
.step .mkr i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--line-2);
  background: var(--surface); display: block; z-index: 1; }
.step.done .mkr i { background: var(--good); border-color: var(--good); }
.step.now .mkr i { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.step .mkr::after { content: ""; position: absolute; top: 14px; bottom: -14px; width: 2px; background: var(--line); }
.step:last-child .mkr::after { display: none; }
.step.done .mkr::after { background: var(--good); opacity: .35; }
.step .lbl { font-size: 12.5px; font-weight: 500; }
.step .by { font-size: 11px; color: var(--muted); }
.step .at { font-size: 11px; color: var(--muted); white-space: nowrap; }
.step.pending .lbl { color: var(--muted); font-weight: 400; }

/* ---------------------------------------------------------------- misc */
.trend { width: 100%; height: auto; display: block; }
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 100;
  background: var(--ink); color: var(--ground); padding: 10px 16px; border-radius: 999px;
  font-size: 12.5px; box-shadow: var(--shadow-lg); animation: rise .22s ease;
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px) } }

.heat { display: grid; grid-template-columns: repeat(12, 1fr); gap: 3px; }
.heat i { aspect-ratio: 1; border-radius: 3px; display: block; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1240px) {
  .kpis { grid-template-columns: repeat(3, 1fr); }
  .figs.c5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1040px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; height: auto; max-height: none; flex-direction: column; }
  .nav { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .nav button { width: auto; padding: 6px 11px; background: rgba(255,255,255,.1); }
  .nav .tag { display: none; }
  .sidefoot { display: none; }
  .g2, .g3, .g4 { grid-template-columns: 1fr; }
  .figs.c4, .figs.c5 { grid-template-columns: repeat(3, 1fr); }
  .slipcol + .slipcol { border-left: 0; border-top: 1px solid var(--line); }
  .slipcols { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .kpis, .kpis.c4 { grid-template-columns: repeat(2, 1fr); }
  .figs.c3, .figs.c4, .figs.c5 { grid-template-columns: repeat(2, 1fr); }
  .page { padding: 14px 16px 48px; }
  .topbar, .demobar { padding-left: 16px; padding-right: 16px; }
  .slip .who2 { grid-template-columns: 1fr 1fr; }
  .bar .sub { display: none; }
  .kv { grid-template-columns: 1fr; }
  .hero .stat { margin-left: 0; gap: 16px; }
}
@media (max-width: 420px) {
  .kpis, .kpis.c4 { grid-template-columns: 1fr; }
  .figs.c3, .figs.c4, .figs.c5 { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ================================================================
   Additions for the server-rendered application
   ================================================================ */

.flash { padding: 11px 15px; border-radius: 10px; margin-bottom: 16px; font-size: 13.5px;
  border-left: 3px solid; display: flex; gap: 10px; align-items: flex-start; }
.flash.success { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }
.flash.error { background: var(--crit-soft); color: var(--crit); border-color: var(--crit); }
.flash b { font-weight: 600; }

.authwrap { min-height: 100%; display: grid; place-items: center; padding: 32px 16px;
  background: linear-gradient(140deg, var(--brand-2), var(--brand) 60%, var(--brand-3)); }
.authcard { width: 100%; max-width: 420px; background: var(--surface); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0,0,0,.28); overflow: hidden; }
.authcard .top { padding: 24px 26px 18px; text-align: center; border-bottom: 1px solid var(--line); }
.authcard .top .mark { width: 54px; height: 54px; border-radius: 13px; background: var(--brand);
  color: #fff; display: grid; place-items: center; margin: 0 auto 12px; font-size: 17px;
  font-weight: 700; font-family: "IBM Plex Serif", Georgia, serif; }
.authcard .top h1 { font-size: 17px; font-weight: 600; letter-spacing: -.015em; }
.authcard .top p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.authcard form { padding: 20px 26px 24px; display: flex; flex-direction: column; gap: 13px; }
.field label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; color: var(--ink-2); }
.field input { width: 100%; padding: 9px 12px; font-size: 14px; }
.field .hint { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.btn.block { width: 100%; justify-content: center; padding: 10px; font-size: 14px; }
.authfoot { padding: 13px 26px; background: var(--surface-2); border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--muted); text-align: center; }

.errorbox { background: var(--crit-soft); color: var(--crit); border-radius: 9px;
  padding: 11px 14px; font-size: 13px; }
.errorbox ul { margin: 6px 0 0; padding-left: 18px; }

.topnav { display: flex; gap: 3px; flex-wrap: wrap; }
.topnav a { padding: 7px 12px; border-radius: 8px; font-size: 13px; text-decoration: none;
  color: var(--ink-2); }
.topnav a:hover { background: var(--surface-2); color: var(--ink); }
.topnav a.on { background: var(--brand-soft); color: var(--brand); font-weight: 600; }

a.plain { text-decoration: none; color: inherit; }
a.plain:hover { color: var(--brand); }
tbody tr.rowlink { cursor: pointer; }

.stepform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.stepform input[type="text"] { flex: 1 1 220px; }

@media print {
  .noprint, .side, .topbar, .demobar { display: none !important; }
  body { background: #fff; }
  .slip { box-shadow: none; border: 0; max-width: 100%; }
  .page { padding: 0; }
}

/* ---------------------------------------------------------------- users §19 */
input[type="email"], input[type="password"] {
  font: inherit; font-size: 12.5px; padding: 7px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); max-width: 100%;
}
.userform {
  display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 10px; align-items: end;
}
.userform .field label { display: block; font-size: 11px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 4px; }
.userform .field input, .userform .field select { width: 100%; }
.userform .act { grid-column: -2 / -1; }
.inlineform { display: flex; gap: 6px; align-items: center; }
.inlineform input, .inlineform select { font-size: 12px; padding: 5px 8px; }
.userrow-you { font-size: 10px; font-weight: 600; color: var(--brand);
  background: var(--brand-soft); padding: 1px 6px; border-radius: 999px; margin-left: 6px; }
@media (max-width: 860px) {
  .userform { grid-template-columns: 1fr 1fr; }
  .userform .act { grid-column: 1 / -1; }
}
/* Two columns on a phone leaves each field about 160px wide, which is not
   enough for an email address or a twelve-character password you are reading
   back to somebody over the telephone. One column, and the Create button goes
   full width so it is a thumb target rather than a corner. */
@media (max-width: 560px) {
  .userform { grid-template-columns: 1fr; }
  .userform .act button { width: 100%; }
}

/* ------------------------------------------------------- open a period §3 */
input[type="month"], input[type="date"] {
  font: inherit; font-size: 12.5px; padding: 7px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink); max-width: 100%;
}
.openform { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.openform .field label { display: block; font-size: 11px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 4px; }
.openform .field input { min-width: 180px; }

/* ------------------------------------------------- statutory changes §20 §7 */
.rategrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rategrid .field label { display: block; font-size: 11px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 4px; }
.rategrid .field input { width: 100%; }
.rategrid .hint { font-size: 10.5px; color: var(--muted); margin-top: 3px; line-height: 1.35; }

.subhead { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin: 20px 0 8px; }

.bandlist { display: grid; gap: 6px; max-width: 420px; }
.bandrow { display: grid; grid-template-columns: 1fr 110px; gap: 8px; }
.bandrow input { width: 100%; }
.bandrow.bandhead { font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); }

.propcard { border: 1px solid var(--line); border-left: 3px solid var(--warn);
  border-radius: var(--r-sm); padding: 14px 16px; background: var(--surface-2); }
.propcard + .propcard { margin-top: 14px; }
.prophead { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.prophead b { font-size: 14px; font-weight: 600; }
.prophead span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.prophead .pill { margin-left: auto; flex: none; }
.decideform { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 13px; }
.decideform > input[type="text"] { flex: 1 1 260px; min-width: 0; }

@media (max-width: 860px) {
  .rategrid { grid-template-columns: 1fr 1fr; }
  .prophead .pill { margin-left: 0; }
}
@media (max-width: 520px) {
  .rategrid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------- field per diem §3 */
.pdform { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr);
  gap: 12px; align-items: end; }
.pdform .field label { display: block; font-size: 11px; font-weight: 600; color: var(--ink-2);
  margin-bottom: 4px; }
.pdform .field input, .pdform .field select { width: 100%; }
.pdform .act { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .pdform { grid-template-columns: 1fr; }
  .pdform .field { grid-column: 1 / -1 !important; }
}

/* ------------------------------------------------------------ theme toggle */
.themetoggle { font-size: 15px; line-height: 1; }
/* Show the icon for the theme you would switch TO, which is what the button does. */
.themetoggle .t-light { display: none; }
.themetoggle .t-dark  { display: inline; }
:root[data-theme="dark"] .themetoggle .t-light { display: inline; }
:root[data-theme="dark"] .themetoggle .t-dark  { display: none; }

/* ------------------------------------------------- restricted sections §19 */
.restricted {
  background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: var(--r-sm);
  padding: 13px 15px; font-size: 12.5px; color: var(--muted); line-height: 1.55;
}
.restricted b { color: var(--ink-2); }

/* ------------------------------------------------- payroll readiness §7 */
.readylist { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-sm); overflow: hidden; }
.ready { display: flex; gap: 11px; align-items: flex-start; padding: 11px 14px;
  background: var(--surface); }
.ready .dot { font-size: 13px; line-height: 1.5; flex: none; }
.ready > div { flex: 1 1 auto; min-width: 0; }
.ready b { font-size: 13px; font-weight: 600; }
.ready .d { font-size: 12px; color: var(--ink-2); line-height: 1.55; margin-top: 2px; }
.ready .btn { flex: none; align-self: center; }

/* ------------------------------------------------- payroll register, dense */
/* CIM's own payroll layout is nineteen columns wide. It is meant to be read
   across, so the table tightens up and the employee column stays put while the
   figures scroll under it. */
table.dense { font-size: 11.5px; }
table.dense th { padding: 0 8px 7px; font-size: 9px; }
table.dense td { padding: 6px 8px; }
table.dense thead tr:first-child th[colspan] {
  border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: 9px;
}
table.dense tbody .who .ini { width: 22px; height: 22px; font-size: 9px; }
table.dense tbody .who .nm b { font-size: 11.5px; }

/* Keyable cells on the preparation sheet. */
.cell {
  width: 100%; font: inherit; font-size: 12px; padding: 5px 8px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
}
.cell.num { text-align: right; font-variant-numeric: tabular-nums; }
.cell:disabled { background: var(--surface-2); color: var(--muted); }
.cell:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* A link styled as the selected option of a pair. */
.btn.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-2); font-weight: 600; }

/* ------------------------------------------------- document folder (spec §2) */
.docgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.doc {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
}
.doc.missing { border-style: dashed; background: var(--surface-2); }
.doc .mk { font-size: 13px; line-height: 1.35; flex: none; }
.doc .bd { min-width: 0; flex: 1 1 auto; }
.doc .bd b { display: block; font-size: 12.5px; font-weight: 600; }
.doc .bd span { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; word-break: break-word; }
.doc .bd .acts { display: flex; gap: 6px; margin-top: 7px; flex-wrap: wrap; }

/* Upload row on the document folder. */
.docform .frow { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.docform label { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 180px; }
.docform label > span { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.docform input[type="file"] {
  font: inherit; font-size: 12px; padding: 6px 8px; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); background: var(--surface); color: var(--ink); max-width: 100%;
}
.docform .btn { flex: none; }
table.dense tbody td:first-child, table.dense tfoot td:first-child { min-width: 190px; }

/* ------------------------------------------------- employee form (spec §1) */
.empform .card { margin-bottom: 14px; }
.formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 13px 14px; }
.formgrid .field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.formgrid label, .field > label {
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600;
}
.formgrid input, .formgrid select { width: 100%; }
.field .hint { font-size: 11px; color: var(--muted); line-height: 1.45; }
.formactions {
  display: flex; gap: 10px; align-items: center; justify-content: flex-end;
  padding: 4px 0 8px;
}
.checkline { display: flex; gap: 9px; align-items: center; cursor: pointer; }
.checkline span { font-size: 12.5px; color: var(--ink-2); }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: '+ '; font-weight: 700; color: var(--brand); }
details[open] > summary::before { content: '− '; }

/* =========================================================== sign in (§19)
   A two-panel front door: the organisation on the left, the form on the right,
   stacking to one column on a phone. The old markup for .authwrap / .authcard
   is kept below it because the first-setup screen still uses that shape. */
/* 100vh on a phone is the height WITHOUT the address bar, so a 100vh block is
   taller than what you can actually see and the page scrolls by exactly the
   height of the browser chrome. 100svh is the visible area. The vh line stays
   first as the fallback for older browsers. */
.authbody { min-height: 100vh; min-height: 100svh; background: var(--ground); }

.signin {
  display: grid; grid-template-columns: 1.05fr .95fr;
  min-height: 100vh; min-height: 100svh;
}

/* ------------------------------------------------------------- left panel */
.signin-brand {
  position: relative; overflow: hidden; padding: 44px 46px;
  /* Three rows: a flexible space, the content block, then the footer line.
     Centring the block keeps it anchored to the eye on a tall screen instead
     of stranding it at the top with half the panel empty. */
  display: grid; grid-template-rows: 1fr auto 1fr; align-items: center;
  background: linear-gradient(150deg, var(--brand-2) 0%, var(--brand) 55%, var(--brand-3) 100%);
  color: #fff; isolation: isolate;
}
/* A photograph behind the panel, when one has been dropped into
   public/assets. The green stays on top as a wash rather than being replaced:
   white text on an unknown photograph is unreadable the moment somebody picks a
   bright one, and the panel has to keep working whatever the picture is. The
   greens below are --brand-2, --brand and --brand-3 with alpha, which CSS
   variables holding hex cannot provide on their own.

   The photo is attached by the page as --login-photo, because a stylesheet
   cannot know the filename. With no photo the rule never applies and the flat
   gradient above stands. */
/* The green panel, over a photograph.
   Two layers rather than one: a brand wash that lets the picture through, and
   beneath it a vertical scrim that is dark where the text sits and clear
   towards the top. A single flat wash has to choose between showing the
   photograph and keeping the MISSION paragraph readable over whatever happens
   to be behind it — a bright sky, a white shirt — and it cannot do both.
   Splitting them means the picture stays visible at the top of the panel while
   the words always have something solid behind them. */
.signin-brand.has-photo {
  background-image:
    linear-gradient(150deg,
      rgba(0, 86, 51, .80) 0%,
      rgba(0, 105, 63, .68) 55%,
      rgba(11, 125, 78, .80) 100%),
    linear-gradient(to bottom,
      rgba(0, 54, 32, .10) 0%,
      rgba(0, 54, 32, .34) 42%,
      rgba(0, 54, 32, .52) 100%),
    var(--login-photo);
  background-size: cover, cover, cover;
  background-position: center, center, center;
  background-repeat: no-repeat, no-repeat, no-repeat;
}
/* The blooms of light are decoration on a flat panel; over a photograph they
   fight the image and wash out the text. */
.signin-brand.has-photo .aurora { opacity: .25; }
/* Three slow-drifting blooms of light. Large, soft and low-contrast, so the
   panel reads as alive rather than animated at you. */
.signin .aurora { position: absolute; inset: -20%; z-index: -1; filter: blur(60px); opacity: .55; }
.signin .aurora i {
  position: absolute; display: block; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,0) 68%);
  animation: drift 26s ease-in-out infinite;
}
.signin .aurora i:nth-child(1) { width: 46%; padding-bottom: 46%; top: 4%;  left: -6%; }
.signin .aurora i:nth-child(2) { width: 38%; padding-bottom: 38%; top: 46%; left: 52%;
  animation-delay: -9s;  animation-duration: 32s; opacity: .8; }
.signin .aurora i:nth-child(3) { width: 30%; padding-bottom: 30%; top: 72%; left: 12%;
  animation-delay: -17s; animation-duration: 38s; opacity: .6; }
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(7%, -5%, 0) scale(1.12); }
  66%      { transform: translate3d(-5%, 6%, 0) scale(.94); }
}
/* Motion is decoration here; anybody who has asked for less of it gets none. */
@media (prefers-reduced-motion: reduce) {
  .signin .aurora i { animation: none; }
}

.signin-brandin { position: relative; max-width: 460px; grid-row: 2; }
.signin-brand h2 {
  font-family: "IBM Plex Serif", Georgia, serif; font-size: 27px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.2; margin: 22px 0 0;
}
.signin-brand .lede { margin: 7px 0 0; font-size: 14px; opacity: .8; letter-spacing: .01em; }

.signin-points { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 15px; }
.signin-points li {
  font-size: 13px; line-height: 1.6; opacity: .92;
  border-left: 2px solid rgba(255,255,255,.28); padding-left: 13px;
}
.signin-points b { font-weight: 600; }

.signin-foot { position: relative; grid-row: 3; align-self: end;
  font-size: 11.5px; opacity: .62; letter-spacing: .02em; }

/* ------------------------------------------------------------------ mark */
.signin-mark {
  width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26);
  backdrop-filter: blur(6px);
}
.signin-mark img { width: 38px; height: 38px; object-fit: contain; display: block; }
.signin-mark span {
  font-family: "IBM Plex Serif", Georgia, serif; font-weight: 700; font-size: 18px;
  letter-spacing: .01em; color: #fff;
}
/* The small mark sits above the form, for the one-column layout where the
   panel is not on screen. Hidden on wide screens, where it would be a
   duplicate of the one opposite. */
.signin-head { display: none; }
.signin-mark.small {
  display: none; background: var(--brand); border-color: transparent;
}

/* ------------------------------------------------------------ right panel */
.signin-form { display: grid; place-items: center; padding: 40px 24px; background: var(--surface); }
.signin-formin { width: 100%; max-width: 372px; }
.signin-form h1 {
  font-size: 23px; font-weight: 600; letter-spacing: -.02em; color: var(--ink);
}
.signin-form .sub { margin: 5px 0 26px; font-size: 13px; color: var(--muted); }
.signin-fields { display: flex; flex-direction: column; gap: 15px; }
.signin-fields .field label {
  display: block; font-size: 11px; font-weight: 600; margin-bottom: 6px;
  color: var(--ink-2); letter-spacing: .05em; text-transform: uppercase;
}
.signin-fields .field input { width: 100%; padding: 11px 13px; font-size: 14px; border-radius: 9px; }
.signin-fields .btn.block { margin-top: 5px; border-radius: 9px; padding: 11px; }

.pwwrap { position: relative; }
.pwwrap input { padding-right: 62px !important; }
.pwtoggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer; padding: 6px 8px; border-radius: 6px;
  font: inherit; font-size: 11.5px; font-weight: 600; color: var(--brand);
}
.pwtoggle:hover { background: var(--brand-softer); }

.signin-note {
  margin: 24px 0 0; font-size: 11.5px; line-height: 1.65; color: var(--muted);
  padding-top: 16px; border-top: 1px solid var(--line);
}

/* -------------------------------------------------------------- one column
   On a phone the whole point is that the two fields are on screen without
   scrolling, so the mark goes inline with the organisation's name instead of
   sitting above it, and the padding comes down. */
@media (max-width: 860px) {
  .signin { grid-template-columns: 1fr; }
  .signin-brand { display: none; }

  /* Older browsers fall back to 100vh above, which on a phone is taller than
     the visible area — the exact thing that made this page scroll. With only
     one column there is nothing to stretch to fill anyway, so the forced
     height comes off entirely and the page can never be taller than its
     content. */
  @supports not (height: 100svh) {
    .authbody, .signin { min-height: 0; }
  }
  .signin-form { align-items: center; padding: 28px 20px; }
  .signin-formin { max-width: 400px; }

  .signin-mark.small {
    display: grid; width: 40px; height: 40px; border-radius: 11px; margin: 0;
  }
  .signin-mark.small img { width: 26px; height: 26px; }
  .signin-mark.small span { font-size: 14px; }

  /* mark and wordmark on one line */
  .signin-head { display: flex; align-items: center; gap: 11px; margin-bottom: 20px; }
  .signin-head .who { min-width: 0; }
  .signin-head .who b {
    display: block; font-size: 13.5px; font-weight: 600; color: var(--ink);
    letter-spacing: -.01em; line-height: 1.25;
  }
  .signin-head .who span { display: block; font-size: 11.5px; color: var(--muted); }

  .signin-form h1 { font-size: 20px; }
  .signin-form .sub { display: none; }        /* the header row already says it */
  .signin-form h1 { margin-bottom: 18px; }
  .signin-note { margin-top: 18px; padding-top: 13px; font-size: 11px; }
}

/* A short landscape phone: drop everything that is not the form. */
@media (max-height: 520px) and (max-width: 860px) {
  .signin-form { align-items: start; padding-top: 18px; }
  .signin-head { margin-bottom: 12px; }
  .signin-form h1 { margin-bottom: 12px; }
  .signin-note { display: none; }
}

/* --------------------------------------------- servicing a facility (§4) */
.servegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 14px; }
.serve { border: 1px solid var(--line); border-radius: 10px; padding: 15px 16px; background: var(--surface); }
.serve.danger { border-color: var(--crit); background: var(--crit-soft); }
.serve h4 { font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.serve .note { margin: 0 0 12px; font-size: 11.5px; line-height: 1.55; }
.serve .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.serve .field label { font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; }
.serve input, .serve select { width: 100%; }
.serve .hint { font-size: 10.5px; color: var(--muted); }

/* ------------------------------------------------------------ reports §16 */
.reportgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
.reportgrid .card.report { margin: 0; }
.runform .field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 11px; }
.runform label { font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; }
.runform select { width: 100%; }
.runacts { display: flex; gap: 8px; flex-wrap: wrap; }
.printonly { display: none; }
@media print {
  .printonly { display: block; }
  .noprint { display: none !important; }
}

/* ---------------------------------------------------------------------------
   "Waiting for you" — the approval queue on the dashboard (§7 §15).
   A grid rather than a list, because the count is the thing being read and a
   number set in a row of its own is scanned faster than one buried in a
   sentence.
--------------------------------------------------------------------------- */
.waitgrid { display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); }
.waititem {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface-2); border: 1px solid var(--line);
  border-left: 3px solid var(--tone, var(--brand));
  border-radius: var(--r-sm); padding: 12px 14px;
}
.waititem:hover { background: var(--surface-3); border-color: var(--line-2);
  border-left-color: var(--tone, var(--brand)); }
.waititem:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.waititem .n { display: block; font-size: 22px; font-weight: 600;
  letter-spacing: -.02em; color: var(--tone, var(--brand)); line-height: 1.1; }
.waititem .l { display: block; font-size: 13px; font-weight: 600; margin-top: 3px; }
.waititem .f { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px;
  line-height: 1.45; }

/* ---------------------------------------------------------------------------
   The Enter guard on an approve/decline form.

   Pressing Enter in a text field submits the form's FIRST submit button. On
   every decision form in this system that button was "Approve", so typing a
   reason for declining a salary rise and pressing Enter approved it instead.
   This button sits first in tree order and carries no decision, so Enter now
   reaches the server with nothing chosen and is turned away.

   It must not be display:none — a hidden button's status as the default
   submitter is not something to rely on across browsers. It is a real button,
   rendered, with no size.
--------------------------------------------------------------------------- */
.enterguard {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  background: transparent; color: transparent;
}

/* A standing-allowance cell on the preparation sheet is tinted, because it does
   not behave like the cells beside it: what you type there applies from the
   start of the month onwards, not to this round alone. */
.cell.allowcell { background: var(--info-soft); }
.cell.allowcell:focus { background: var(--surface); }

/* ---------------------------------------------------------------------------
   The leave calendar (§8). One row per person, one narrow column per day —
   the question a manager asks is "can I spare both of them that week", which
   is a shape question, so it gets a grid rather than a list.
--------------------------------------------------------------------------- */
table.cal th.caldow { width: 22px; min-width: 22px; padding: 4px 0; text-align: center;
  font-size: 9.5px; letter-spacing: 0; line-height: 1.25; }
table.cal th.caldow span { display: block; color: var(--muted); font-weight: 400; }
table.cal th.caldow.off { background: var(--surface-2); }
table.cal th.caldow.today { color: var(--brand); font-weight: 700; }
table.cal td.calcell { width: 22px; min-width: 22px; padding: 0; height: 26px;
  border-left: 1px solid var(--line); }
table.cal td.calcell.off { background: var(--surface-2); }