/* ===========================================================================
   hr/assets/hr.css — the approved design, as the application's own stylesheet.

   This is not a skin over anything. The token set, the type and the component
   shapes are lifted from the generated artboards (design/tools/_head.html and
   _common.css), so the app and the board are the same drawing; what the boards
   express as inline styles on a fixed frame is written here as classes that
   survive a real page.

   Light and dark are one token set and a class on <html>: data-theme="dark".
   The app resolves "system" before first paint, so there is no
   prefers-color-scheme query here — adding one would paint dark tokens over
   someone who chose Light.
   =========================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/jakarta-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC,
                 U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("fonts/jakarta-var-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── the board's tokens and base rules, verbatim ─────────────────────────── */

body { margin: 0; font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
       -webkit-font-smoothing: antialiased; }

/* One token set, two modes. Every inline style reads these, so the whole
   design switches on the class alone. */
:root {
  color-scheme: light;
  --bg: #f4f7fa;      --surface: #ffffff;  --surface-2: #eef3f8;
  --border: #e3eaf1;  --hair: #eaf0f5;     --rail: rgba(255,255,255,.9);
  --ink: #1a1919;     --ink-2: #39434e;    --muted: #5f6b78;
  --brand: #3f7aa7;   --brand-ink: #155a86;
  /* contrast-checked: white on #3f7aa7 is 4.61:1, so it can carry a label */
  --cta: #3f7aa7;     --cta-fg: #ffffff;
  --violet-t: #ece6fb; --violet-i: #55299e;
  --sky-t: #dcf0fb;    --sky-i: #0b5e80;
  --blue-t: #d9ecfa;  --blue-i: #155a86;
  --green-t: #dcf0e5; --green-i: #0b6342;
  --teal-t: #d9ecec;  --teal-i: #15605e;
  --amber-t: #fbeada; --amber-i: #a8600e;
  /* A button label is solid text on the tint, not a pill's short word, so
     it needs the full 4.5:1. --amber-i gives 4.12:1 here; this gives 5.63:1.
     Kept separate so the Pending pills keep the colour they have. */
  --amber-btn: #8a4e0b;
  --red-t: #fde6e9;   --red-i: #a3243a;
  --up: #0f7a52;      --down: #c02b42;
  --track: #e9eff4;   --panel: #1a1919;    --panel-ink: #ffffff;
  --panel-mut: #9a9a9a; --panel-hair: #353535;
  --shadow: 0 18px 44px -18px rgba(26,40,56,.32);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1217;      --surface: #161c23;  --surface-2: #1c232c;
  --border: #262e38;  --hair: #222932;     --rail: rgba(22,28,35,.92);
  --ink: #e8eef5;     --ink-2: #c2ccd7;    --muted: #8b97a4;
  --brand: #6fb3e2;   --brand-ink: #8cc6ec;
  --cta: #3f7aa7;     --cta-fg: #ffffff;
  --violet-t: #231b38; --violet-i: #b79aee;
  --sky-t: #102734;    --sky-i: #7cc8e8;
  --blue-t: #16293a;  --blue-i: #8cc6ec;
  --green-t: #15291f; --green-i: #6fd3a3;
  --teal-t: #14282a;  --teal-i: #6fcfcc;
  --amber-t: #2a2114; --amber-i: #e0a862;
  --amber-btn: #e0a862;   /* already 7.5:1 on the dark tint */
  --red-t: #2d1820;   --red-i: #f09aa8;
  --up: #4bb98c;      --down: #f0808f;
  --track: #242c36;   --panel: #10161d;    --panel-ink: #e8eef5;
  --panel-mut: #8b97a4; --panel-hair: #262e38;
  --shadow: 0 18px 44px -18px rgba(0,0,0,.7);
}

a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
.num { font-variant-numeric: tabular-nums; }
.rail .rbtn:hover { background: var(--surface-2); }
.fly a:hover { background: var(--surface); text-decoration: none; }
th { text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
     color: var(--muted); font-weight: 700; padding: 0 14px 12px; white-space: nowrap; }
td { padding: 12px 14px; border-top: 1px solid var(--hair); font-size: 13.5px;
     vertical-align: middle; color: var(--ink); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.ch { display: flex; align-items: center; gap: 10px; padding: 16px 18px 0; }
.ch h2 { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink); }
.ch .r { margin-left: auto; font-size: 12.5px; font-weight: 600; }
.meter { display: flex; align-items: center; gap: 11px; font-size: 12.5px; margin-bottom: 10px; }
.meter .nm { width: 128px; flex: none; color: var(--ink-2); overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap; }
.meter .tr { flex: 1; height: 7px; border-radius: 9px; background: var(--track); overflow: hidden; }
.meter .tr span { display: block; height: 100%; border-radius: 9px; }
.meter .vl { width: 46px; text-align: right; font-weight: 700; color: var(--ink); }
.pill { font-size: 11px; font-weight: 700; border-radius: 20px; padding: 3px 10px; white-space: nowrap; }
tbody tr:hover td { background: var(--surface-2); }
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fld label { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.inp { height: 38px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border);
       background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; width: 100%; }
.inp:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.sortable { display: inline-flex; align-items: center; gap: 5px; color: inherit;
            text-decoration: none; font: inherit; }
.sortable:hover { color: var(--ink); text-decoration: none; }
.act { height: 30px; padding: 0 11px; border-radius: 8px; border: 1px solid var(--border);
       background: var(--surface); color: var(--ink-2); font: inherit; font-size: 12px;
       font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; }
.act:hover { border-color: var(--brand); color: var(--brand-ink); text-decoration: none; }

/* ── the board's shared components, verbatim ───────────────────────────── */
/* Shared by every generated page. The four counts that open most of the
   Attendance pages, and the controls they sit above. */
.wells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.well { padding: 16px 17px 17px; border-radius: 18px; border: 1px solid transparent; min-width: 0; }
.well .wi { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center;
            margin-bottom: 12px; }
.well .wn { display: block; font-size: 27px; font-weight: 800; line-height: 1.1;
            font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.well .wl { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 700; }
.well .ws { display: block; margin-top: 2px; font-size: 11.5px; }
/* Filter bars: one grid, one Apply, the same on every page that filters. */
.fbar { display: grid; gap: 12px; align-items: end; padding: 15px 18px; }
.fbar .go { height: 38px; }
/* A segmented choice, where only the chosen set of fields applies. */
.seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 11px;
       background: var(--surface-2); border: 1px solid var(--border); }
.seg button { height: 30px; padding: 0 14px; border: 0; border-radius: 8px; cursor: pointer;
              font: inherit; font-size: 12.5px; font-weight: 600; background: transparent;
              color: var(--muted); }
/* Status chips that double as a filter. */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { height: 36px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
        padding: 0 14px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 600;
        text-decoration: none; }
.chip:hover { text-decoration: none; }
/* A bar that appears once rows are picked. */
.bulk[hidden] { display: none; }
.bulk { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
        background: var(--blue-t); border-bottom: 1px solid var(--border); padding: 12px 18px; }
/* Wide tables scroll in their own box; the page never scrolls sideways. */
.wide { overflow-x: auto; padding: 6px 4px 0; }
.tiny { height: 32px; padding: 0 9px; border-radius: 8px; border: 1px solid var(--border);
        background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; width: 100%; }
.tiny:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
/* The logo is black and blue on transparent, so it keeps a white ground
   in both modes rather than vanishing into a dark surface. */
.brandmark { display: inline-flex; align-items: center; justify-content: center;
             background: #ffffff; border: 1px solid var(--border); border-radius: 13px;
             padding: 9px 14px; flex: none; }
.brandmark img { display: block; height: 32px; width: auto; }

/* ── buttons ──────────────────────────────────────────────────────────
   .go was scoped to .fbar, so the same class elsewhere had no rules and
   rendered as a stretched grid cell. It is a component now: it never
   stretches, never wraps, and lifts on press. Colour comes from the
   contrast-checked pair, so it is not set here. */
.go { height: 38px; padding: 0 18px; border: 0; border-radius: 10px; cursor: pointer;
      font: inherit; font-size: 13px; font-weight: 700; white-space: nowrap;
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      justify-self: start; align-self: end;
      box-shadow: 0 1px 2px rgba(16, 24, 32, .10), 0 2px 6px -2px rgba(16, 24, 32, .16);
      transition: filter .12s ease, box-shadow .12s ease, transform .08s ease; }
.go:hover { filter: brightness(1.07);
            box-shadow: 0 2px 5px rgba(16, 24, 32, .13), 0 8px 18px -6px rgba(16, 24, 32, .28); }
.go:active { transform: translateY(1px);
             box-shadow: 0 1px 2px rgba(16, 24, 32, .14); }
.go:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* The quiet one beside it. */
.act { height: 32px; padding: 0 12px; border-radius: 9px; gap: 7px; white-space: nowrap;
       justify-content: center; transition: border-color .12s ease, color .12s ease,
       background .12s ease, transform .08s ease; }
.act:hover { background: var(--surface-2); }
.act:active { transform: translateY(1px); }
.act:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
button.act, a.act { font-size: 12.5px; }

/* ===========================================================================
   The shell.

   The artboards draw the rail and the header with inline styles on a fixed
   frame. A real page needs the same drawing as rules that hold at any width,
   plus the two things a board cannot show: a flyout that opens on hover or
   focus, and what happens on a phone.
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-size: 14px; }
.shell { display: flex; align-items: flex-start; min-height: 100vh; }

/* ── the rail: eight groups of icons, 64px wide ─────────────────────────── */
.rail { flex: 0 0 64px; align-self: stretch; position: sticky; top: 0; z-index: 20;
        height: 100vh; background: var(--rail); border-right: 1px solid var(--border);
        display: flex; flex-direction: column; align-items: center; gap: 5px;
        padding: 12px 0 14px; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.rail .home { width: 42px; height: 42px; border-radius: 13px; background: var(--cta);
              color: var(--cta-fg); display: grid; place-items: center; font-weight: 800;
              font-size: 13px; margin-bottom: 10px; text-decoration: none; flex: none; }
.rail .home:hover { text-decoration: none; filter: brightness(1.06); }
/* With the real icon the tile is the artwork, so it carries no fill of its own
   and clips the square to the same corner it always had. */
.rail .home.has-ico { background: none; padding: 0; overflow: hidden; }
.rail .home.has-ico img { width: 100%; height: 100%; display: block; border-radius: inherit; }
.rail nav { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.rail .rbtn { width: 46px; height: 46px; border: 0; border-radius: 13px; cursor: pointer;
              display: grid; place-items: center; background: transparent; color: var(--muted);
              position: relative; padding: 0; }
.rail .rbtn:hover { background: var(--surface-2); color: var(--ink-2); }
.rail .rbtn.on { background: var(--cta); color: var(--cta-fg); }
.rail .rbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.rail .rbtn .dot { position: absolute; top: 4px; right: 5px; min-width: 16px; height: 16px;
                   padding: 0 4px; border-radius: 20px; background: var(--red-i); color: #fff;
                   font-size: 9.5px; font-weight: 800; display: grid; place-items: center; }
.railfoot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rail .me { width: 38px; height: 38px; border-radius: 50%;
            background: var(--blue-t); color: var(--blue-i); display: grid; place-items: center;
            font-weight: 700; font-size: 12px; text-decoration: none; flex: none; }
/* The way out. Quiet until wanted, then red — it ends the session. */
.rail .signout { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center;
                 color: var(--muted); text-decoration: none; flex: none; }
.rail .signout:hover, .rail .signout:focus-visible { background: var(--red-t); color: var(--red-i); }

/* ── the flyout: the group's pages, in place ────────────────────────────── */
.grp { position: relative; }
.fly { position: absolute; left: calc(100% + 6px); top: -6px; width: 238px; z-index: 40;
       background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px;
       padding: 7px; box-shadow: var(--shadow); display: none; }
.grp:hover > .fly, .grp:focus-within > .fly, .grp.open > .fly { display: block; }
/* A single-destination tile is just a link — no panel on hover. */
.rail a.rbtn { text-decoration: none; display: grid; place-items: center; position: relative;
               color: var(--muted); }
.rail a.rbtn:hover { text-decoration: none; }
.fly p { margin: 0; padding: 9px 12px 8px; font-size: 10.5px; letter-spacing: .09em;
         text-transform: uppercase; color: var(--muted); font-weight: 700; }
.fly a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px;
         font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--ink-2); }
.fly a:hover { background: var(--surface); text-decoration: none; color: var(--ink); }
.fly a.on { background: var(--surface); color: var(--brand-ink); box-shadow: 0 1px 2px rgba(16,24,32,.1); }
.fly a .bullet { width: 13px; height: 13px; flex: none; }
.fly a .n { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted); }
.fly a .n.alert { background: var(--red-t); color: var(--red-i); border-radius: 20px; padding: 1px 7px; }

/* ── main, and the page head the boards open with ───────────────────────── */
main.main { flex: 999 1 620px; min-width: 0; padding: 24px 28px 38px; position: relative; }
.phead { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.phead .crumb { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.phead h1 { margin: 3px 0 0; font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: var(--ink); }
.phead .sub { margin: 5px 0 0; font-size: 13px; color: var(--muted); }
.phead .right { margin-left: auto; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
/* The logo, wherever a page prints it. brand_logo_tag() emits both copies and
   the theme picks one: the black ink reads on a light surface, the lifted ink
   on a dark one, so neither needs a plate behind it. Without the height here
   the image renders at its natural 483px and pushes the page sideways. */
.brandlogo { display: inline-flex; align-items: center; flex: none; }
.brandlogo img { display: block; height: var(--bl-h, 26px); width: auto; max-width: 100%; }
.brandlogo .bl-dk { display: none; }
html[data-theme="dark"] .brandlogo .bl-lt { display: none; }
html[data-theme="dark"] .brandlogo .bl-dk { display: block; }
.brandlogo.is-raw { background: #fff; border-radius: 10px; padding: 6px 10px; }

/* the three-way theme control, as the boards draw it */
.theme { display: inline-flex; gap: 3px; padding: 3px; border-radius: 11px;
         background: var(--surface-2); border: 1px solid var(--border); }
.theme button { width: 34px; height: 30px; border: 0; border-radius: 8px; cursor: pointer;
                display: grid; place-items: center; background: transparent; color: var(--muted); }
.theme button[aria-pressed="true"] { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .theme button[aria-pressed="true"] { background: var(--border); color: var(--ink); }

/* ── things every page needs that the frame hid ─────────────────────────── */
.flash { border-radius: 12px; padding: 12px 15px; font-size: 13px; font-weight: 600;
         margin-bottom: 14px; }
.flash.ok { background: var(--green-t); color: var(--green-i); }
.flash.err { background: var(--red-t); color: var(--red-i); }
.empty { padding: 32px 20px; text-align: center; color: var(--muted); font-size: 13px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; z-index: 100; background: var(--surface); padding: 8px 12px;
              border-radius: 10px; }
table { width: 100%; border-collapse: collapse; }
.tscroll { overflow-x: auto; max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ── the phone ──────────────────────────────────────────────────────────── */
.railtoggle { display: none; }
@media (max-width: 860px) {
  main.main { padding: 16px 16px 34px; }
  .phead h1 { font-size: 20px; }
}
@media (max-width: 680px) {
  .shell { display: block; }
  .rail { position: fixed; left: 0; top: 0; height: 100dvh; width: min(84vw, 290px);
          flex-basis: auto; align-items: stretch; padding: 14px 10px;
          transform: translateX(-100%); transition: transform .22s ease;
          box-shadow: 2px 0 24px rgba(0,0,0,.3); overflow-y: auto; }
  .rail.open { transform: translateX(0); }
  .rail .home { margin: 0 0 12px 6px; }
  .rail nav { align-items: stretch; width: 100%; }
  .rail .rbtn { width: 100%; height: auto; justify-content: flex-start; padding: 10px 12px;
                display: flex; align-items: center; gap: 12px; font: inherit; font-size: 13.5px;
                font-weight: 600; }
  .rail .rbtn .label { display: inline; }
  /* On a phone the flyout is not a flyout: the group opens underneath. */
  .fly { position: static; width: auto; display: none; box-shadow: none; border: 0;
         background: transparent; padding: 2px 0 6px 34px; }
  .grp:hover > .fly, .grp:focus-within > .fly { display: none; }
  .grp.open > .fly { display: block; }
  .railfoot { margin-top: 14px; flex-direction: row; gap: 10px; }
  .railtoggle { display: inline-flex; align-items: center; justify-content: center;
                width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 12px;
                background: var(--surface); color: var(--ink); cursor: pointer; flex: none; }
  .scrim { position: fixed; inset: 0; background: rgba(10,16,22,.5); z-index: 15;
           opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s ease; }
  .scrim.on { opacity: 1; visibility: visible; }
  .wells { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fbar { grid-template-columns: 1fr !important; }
}
@media (min-width: 681px) { .rail .rbtn .label { position: absolute; width: 1px; height: 1px;
                            overflow: hidden; clip: rect(0 0 0 0); } }

/* ── the rail, widened ─────────────────────────────────────────────────────
   The rail is icons by default and that is the drawing the board approved —
   this only gives the names back to whoever would rather read them. Widening
   says what each group IS; it does not change how a group opens, so the
   flyout is untouched and the gesture is the one already learnt.

   The choice lives in localStorage and is resolved onto <html> before the
   first paint (see the head of _shell.php), because the rail is the first
   thing drawn and opening at one width to jump to the other is worse than
   either width on its own. Nothing stored means collapsed.

   Phone is a drawer with its own labels, so none of this applies below 681. */
@media (min-width: 681px) {
  :root[data-rail="wide"] .rail { flex-basis: 214px; align-items: stretch; padding: 12px 10px 14px; }
  :root[data-rail="wide"] .rail .home { margin-left: 2px; }
  /* The control widens into a row exactly as the items below it do, in the
     place it already occupies — it is a menu row, not a floating handle. */
  :root[data-rail="wide"] .railwide { width: 100%; height: 42px; display: flex;
                                      align-items: center; justify-content: flex-start;
                                      gap: 11px; padding: 0 11px; }
  :root[data-rail="wide"] .railwide .label { position: static; width: auto; height: auto;
                                             overflow: visible; clip: auto; white-space: nowrap;
                                             font-size: 13.5px; font-weight: 600; }
  :root[data-rail="wide"] .railsep { width: 100%; }
  /* An open group adds ten rows, and on a 768px screen that pushed Settings
     and the whole foot — sign-out included — off the bottom with no way to
     scroll to them. Narrow, the rail must not scroll or the hovered flyout is
     clipped instead of overlapping the page; wide, nothing leaves the rail, so
     the list can scroll while the foot stays pinned where it belongs. */
  :root[data-rail="wide"] .rail nav { align-items: stretch; flex: 1 1 auto; min-height: 0;
                                      overflow-y: auto; overscroll-behavior: contain;
                                      scrollbar-width: thin;
                                      scrollbar-color: var(--border) transparent; }
  :root[data-rail="wide"] .rail .rbtn { width: 100%; height: 42px; display: flex;
                                        align-items: center; justify-content: flex-start;
                                        gap: 11px; padding: 0 11px; }
  :root[data-rail="wide"] .rail .rbtn .label { position: static; width: auto; height: auto;
                                               overflow: visible; clip: auto; white-space: nowrap;
                                               font-size: 13.5px; font-weight: 600; }
  /* The count stops riding the icon's corner and sits at the end of the row,
     where there is now a row for it to sit at the end of. */
  :root[data-rail="wide"] .rail .rbtn .dot { position: static; margin-left: auto; }
  /* Two circles centred in a 214px rail read as a stray pair; on this width
     they line up with the left edge everything else is set to. */
  :root[data-rail="wide"] .railfoot { flex-direction: row; align-items: center; gap: 8px;
                                      width: 100%; padding-left: 4px; }

  /* ── a group's pages, inline ───────────────────────────────────────────
     Narrow, the rail has no room and the pages float beside it. Wide, the
     rail IS the room: the group opens underneath itself and the page behind
     it stays readable. Hover is dropped with it — a panel that appears
     because the pointer crossed a row is right over a 64px strip and wrong
     over a menu you are reading. */
  :root[data-rail="wide"] .fly { position: static; width: auto; border: 0; background: none;
                                 box-shadow: none; padding: 1px 0 5px; }
  :root[data-rail="wide"] .grp:hover > .fly,
  :root[data-rail="wide"] .grp:focus-within > .fly { display: none; }
  :root[data-rail="wide"] .grp.open > .fly { display: block; }
  /* The group's name is the row directly above now, so the panel's own
     heading would say it twice. */
  :root[data-rail="wide"] .fly p { display: none; }
  /* Pages line up under their group's label rather than its icon. */
  :root[data-rail="wide"] .fly a { padding: 8px 11px 8px 34px; font-size: 13px; font-weight: 500; }
  :root[data-rail="wide"] .fly a .bullet { width: 11px; height: 11px; }
  /* The caret every collapsible list carries, on groups only — a single
     destination has nothing to unfold. */
  :root[data-rail="wide"] .rail button.rbtn::after {
      content: ''; width: 6px; height: 6px; flex: none; margin-left: auto; opacity: .5;
      border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor;
      transform: translateY(-2px) rotate(45deg); transition: transform .18s ease; }
  :root[data-rail="wide"] .grp.open > button.rbtn::after { transform: translateY(1px) rotate(225deg); }
}
/* The control: the same square as a menu tile, in the same column, so it reads
   as the first row of the menu rather than a thing attached to the mark. Its
   name is always in the markup and is read out either way; at this width it is
   taken off the screen the way the tiles' names are. */
.railwide { width: 46px; height: 46px; border: 0; border-radius: 13px; cursor: pointer;
            display: grid; place-items: center; background: transparent; color: var(--muted);
            padding: 0; flex: none; }
.railwide:hover { background: var(--surface-2); color: var(--ink-2); }
.railwide:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (min-width: 681px) { .railwide .label { position: absolute; width: 1px; height: 1px;
                            overflow: hidden; clip: rect(0 0 0 0); } }
/* The rule under it: what changes the menu, above; what is in the menu, below. */
.railsep { width: 26px; height: 1px; background: var(--border); flex: none; margin: 3px 0 4px; }
/* On a phone the rail is a drawer that already shows every name — there is
   nothing left for this to widen, and nothing for the rule to separate. */
@media (max-width: 680px) { .railwide, .railsep { display: none; } }

@media (max-width: 480px) { .wells { grid-template-columns: 1fr; } }

@media print {
  .rail, .theme, .railtoggle, .scrim, .noprint { display: none !important; }
  .shell { display: block; } main.main { padding: 0; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ddd; break-inside: avoid; }
}

/* ── pieces hr/_ui.php draws ────────────────────────────────────────────── */
.pgr { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 14px 18px 4px; }
.pgr .of { font-size: 12.5px; color: var(--muted); margin-right: 6px; }
.pgr a, .pgr .on { min-width: 32px; height: 32px; padding: 0 9px; border-radius: 9px;
                   display: inline-flex; align-items: center; justify-content: center;
                   font-size: 12.5px; font-weight: 600; text-decoration: none;
                   border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); }
.pgr a:hover { border-color: var(--brand); color: var(--brand-ink); text-decoration: none; }
.pgr .on { background: var(--cta); color: var(--cta-fg); border-color: transparent; }
.pgr .gap { color: var(--muted); padding: 0 2px; }
.av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none;
      background: var(--blue-t); color: var(--blue-i); font-weight: 700; font-size: 11px; }
.cellwho { display: flex; align-items: center; gap: 9px; min-width: 0; text-decoration: none; color: inherit; }
.cellwho:hover { text-decoration: none; }
.cellwho .nm { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis;
               white-space: nowrap; }
.cellwho:hover .nm { color: var(--brand-ink); }
.bulk .act { background: var(--surface); }
.ch .ci { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: none; }
.right { text-align: right; }
.mut { font-size: 12.5px; color: var(--muted); font-weight: 400; }

/* ── the directory's table. The budget is percentages, not pixels: with
   table-layout fixed a pixel budget that overruns leaves the one auto
   column whatever is left, which was eight pixels, and the name vanished.
   These total 100. ────────────────────────────────────────────────────── */
.dt th, .dt td { padding: 11px 8px; }
.dt th:first-child, .dt td:first-child { padding-left: 16px; }
.dt th:last-child, .dt td:last-child { padding-right: 16px; }
.dt .c-chk    { width: 3.5%; }
.dt .c-emp    { width: 6%; }
.dt .c-name   { width: 17%; }
.dt .c-mail   { width: 14%; }
.dt .c-phone  { width: 9.5%; }
.dt .c-dept   { width: 7.5%; }
.dt .c-team   { width: 10%; }
.dt .c-salary { width: 8%; text-align: right; }
.dt .c-joined { width: 7.5%; }
.dt .c-status { width: 6.5%; }
.dt .c-act    { width: 10.5%; text-align: right; white-space: nowrap; }
.dt td.c-mail, .dt td.c-team, .dt td.c-dept {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The name has to give way to the WFH badge, not push it off the row. */
.dt .nm { flex: 0 1 auto; min-width: 0; font-weight: 600;
          overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 3. the header stays put while the rows run under it */
.dt thead th { position: sticky; top: 0; z-index: 3; background: var(--surface);
               box-shadow: inset 0 -1px 0 var(--border); }

/* The three tints the shared well block did not carry. A page with seven
   counts needs seven colours, or two of them say the same thing. */
.well .wi.e { background: var(--surface); color: var(--green-i); }
.well .wi.f { background: var(--surface); color: var(--teal-i); }
.well .wi.g { background: var(--surface); color: var(--sky-i); }
.well:has(.wi.e) { background: var(--green-t); border-color: transparent; }
.well:has(.wi.f) { background: var(--teal-t);  border-color: transparent; }
.well:has(.wi.g) { background: var(--sky-t);   border-color: transparent; }
.well:has(.wi.e) .v, .well:has(.wi.e) .l { color: var(--green-i); }
.well:has(.wi.f) .v, .well:has(.wi.f) .l { color: var(--teal-i); }
.well:has(.wi.g) .v, .well:has(.wi.g) .l { color: var(--sky-i); }

/* Seven cards on a twelve-column grid: four across, then three. Left to the
   auto-fit default they break six and one, and the odd one looks forgotten. */
.wells.seven { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.wells.seven > .well { grid-column: span 3; }
.wells.seven > .well:nth-child(n+5) { grid-column: span 4; }
@media (max-width: 1100px) {
  .wells.seven { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wells.seven > .well, .wells.seven > .well:nth-child(n+5) { grid-column: auto; }
}
@media (max-width: 480px) {
  .wells.seven { grid-template-columns: 1fr; }
}

/* ── the card, as the pages use it ──────────────────────────────────────── */
/* In a column of flex items a card's min-content can push it wider than the
   column — which is how the org tree, inside its own scroller, still dragged
   the page sideways. min-width: 0 lets the scroller do its job. */
.card { min-width: 0; }
/* A table in a scroller keeps its natural column widths and scrolls; without
   this it is squeezed to the box instead, and every figure in a twenty-column
   grid is clipped. (The old name for this box carried the rule; the rename
   lost it.) */
.wide > table { min-width: max-content; }
/* Cells that are edited need to be readable, not merely present — but a tick
   box is not a field: sized like one it becomes a 15x36 slot you cannot read
   as a checkbox at all. */
.ux-page table input:not([type=checkbox]):not([type=radio]),
.ux-page table select {
  height: 36px; font-size: 13px; padding: 0 11px; border-radius: 9px; }
.ux-page table input[type=checkbox], .ux-page table input[type=radio] {
  width: 17px; height: 17px; padding: 0; accent-color: var(--cta); cursor: pointer; }
.cb { padding: 14px 18px 18px; min-width: 0; }
.cb.flush { padding: 10px 0 12px; }
.ch .mut { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.ch .lnk { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--brand-ink);
           text-decoration: none; }
.ch .lnk:hover { text-decoration: underline; }
/* On the board every .go carries the contrast-checked pair inline, because an
   artboard has no cascade to inherit from. In the app it is the default, so a
   primary button is primary without the page having to say so. */
.go { background: var(--cta); color: var(--cta-fg); }
.go:hover { color: var(--cta-fg); text-decoration: none; }
.go.sm { height: 32px; padding: 0 13px; font-size: 12.5px; }
/* Three weights of action, so a row of buttons says what each one does before
   it is read: .go carries the brand and is the one you came to press, .warn is
   a decision that goes against the request, .danger destroys a record. Anything
   else stays a plain .act. Both tinted variants take their colour from the
   same tokens the status pills use, so a rejection and a Rejected pill match. */
.act.danger { background: var(--red-t); color: var(--red-i); border-color: transparent; }
.act.danger:hover { background: var(--red-t); filter: brightness(.97); color: var(--red-i); }
.act.warn { background: var(--amber-t); color: var(--amber-btn); border-color: transparent; }
.act.warn:hover { background: var(--amber-t); filter: brightness(.97); color: var(--amber-btn); }
.act[disabled], .go[disabled] { opacity: .5; cursor: not-allowed; }

/* A form laid out as a grid of fields. The board's .fbar is the same shape
   with its own padding; these sit inside a card that is already padded, so
   they keep their own name and take the columns only. */
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
         gap: 12px; align-items: stretch; }
.fgrid > * { min-width: 0; }
.fgrid > .fld > .go, .fgrid > .fld > .act, .fgrid > .fld > a.go, .fgrid > .fld > a.act,
.fgrid > .fld > button { align-self: flex-start; }
.fld.wide { grid-column: span 2; }
.fld.full, .formacts.full { grid-column: 1 / -1; }
.formacts { display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap; }
@media (max-width: 700px) { .fld.wide { grid-column: auto; } }

/* ── the reconciliation card's foot ─────────────────────────────────────── */
.recdot { display: inline-block; width: 8px; height: 8px; border-radius: 3px;
          margin-right: 9px; vertical-align: 1px; }
.payable { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
           border-radius: 16px; padding: 18px 20px; border: 1px solid transparent; }
.payable.owed   { background: var(--red-t); }
.payable.credit { background: var(--green-t); }
.payable .payico { width: 38px; height: 38px; border-radius: 12px; flex: none;
                   display: grid; place-items: center; background: var(--surface); }
.payable.owed   .payico { color: var(--red-i); }
.payable.credit .payico { color: var(--green-i); }
.payable .paylbl { font-size: 14px; font-weight: 800; letter-spacing: -.2px; }
.payable .paysub { font-size: 12px; margin-top: 2px; opacity: .8; }
.payable .payamt { font-size: 28px; font-weight: 800; letter-spacing: -.8px; line-height: 1.05; }
.payable.owed   .paylbl, .payable.owed   .payamt, .payable.owed   .paysub { color: var(--red-i); }
.payable.credit .paylbl, .payable.credit .payamt, .payable.credit .paysub { color: var(--green-i); }

/* ── the US office box ──────────────────────────────────────────────────── */
.usfigs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.usfig { border-radius: 14px; padding: 14px 15px; background: var(--surface-2);
         border: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; }
.usfig .usl { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.usfig .usv { font-size: 21px; font-weight: 800; letter-spacing: -.5px; color: var(--ink); }
.usfig .uss { font-size: 11.5px; color: var(--muted); }
/* One colour each: the two parts, then the total that answers the question. */
.usfig.violet { background: var(--violet-t); border-color: transparent; }
.usfig.violet .usl, .usfig.violet .usv, .usfig.violet .uss { color: var(--violet-i); }
.usfig.amber  { background: var(--amber-t); border-color: transparent; }
.usfig.amber  .usl, .usfig.amber  .usv, .usfig.amber  .uss { color: var(--amber-i); }
.usfig.total  { background: var(--sky-t); border-color: transparent; }
.usfig.total  .usl, .usfig.total  .usv, .usfig.total  .uss { color: var(--sky-i); }
.usfig .uss { opacity: .85; }
@media (max-width: 700px) { .usfigs { grid-template-columns: 1fr; } }

table.usplit td, table.usitems td { font-size: 13px; }
table.usplit tfoot td { background: var(--surface-2); font-weight: 700; }

/* The itemised list is a long tail, so it opens rather than always showing. */
.usdet { margin-top: 14px; }
.usdet > summary { cursor: pointer; display: inline-flex; align-items: center; gap: 9px;
                   font-size: 12.5px; font-weight: 600; color: var(--brand-ink);
                   padding: 8px 13px; border-radius: 10px; background: var(--surface-2);
                   list-style: none; }
.usdet > summary::-webkit-details-marker { display: none; }
.usdet > summary::before { content: "▸"; font-size: 11px; opacity: .7; }
.usdet[open] > summary::before { content: "▾"; }
.usdet > summary:hover { background: var(--border); }
.usdet > summary .n { font-size: 11px; font-weight: 700; background: var(--surface);
                      border-radius: 20px; padding: 1px 8px; color: var(--muted); }
.usdet > .wide { margin-top: 10px; }

/* ── a printed document: voucher, payslip ───────────────────────────────── */
/* The sheet is white in both themes, because it is paper. */
.paper { color: #1b2230; }
/* Logo left, what the sheet is in the middle, where the company is on the
   right. The three columns are equal so the middle one sits on the centre of
   the page rather than wherever the other two leave it. */
.paper .phead-band { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
                     gap: 18px; padding-bottom: 16px; border-bottom: 3px solid var(--cta); }
.paper .pb-left { justify-self: start; }
.paper .pb-mid { text-align: center; }
.paper .pb-right { justify-self: end; text-align: right; }
.paper .phead-band .brandlogo img { height: 42px; }
.paper .pconame { font-size: 15px; font-weight: 800; letter-spacing: -.2px; color: #1b2230; }
.paper .pco { font-size: 11.5px; color: #5b6578; line-height: 1.55; margin: 0; }
.paper .pkind { display: block; font-size: 12px; font-weight: 800; letter-spacing: .16em;
                text-transform: uppercase; color: var(--cta); }
.paper .pmonth { display: block; font-size: 15px; font-weight: 800; color: #1b2230; margin-top: 3px; }
.paper .pgen { display: block; font-size: 11px; color: #5b6578; margin-top: 2px; }
@media (max-width: 620px) {
  .paper .phead-band { grid-template-columns: 1fr; text-align: center; }
  .paper .pb-left, .paper .pb-right { justify-self: center; text-align: center; }
}
.paper .ptop { margin-top: 18px; padding: 14px 16px; border-radius: 12px; background: #f4f7fa; }
.paper th { border-bottom: 2px solid var(--cta); color: var(--cta); }
.paper tr.net td { background: #eef3f8; font-size: 15px; }
.paper tr.net td:first-child { border-radius: 8px 0 0 8px; padding-left: 10px; }
.paper tr.net td:last-child { border-radius: 0 8px 8px 0; padding-right: 10px; }
.paper .words { padding: 10px 12px; border-radius: 10px; background: #f4f7fa; }
.paper .ack { padding: 12px 14px; border-radius: 10px; background: #fbfcfd;
              border: 1px dashed #c9d2de; }

/* What leaves the printer is the sheet, and only the sheet. */
@media print {
  .phead, .flash, .secttitle, .noprint { display: none !important; }
  .paperwrap { display: block; }
  .paper { border: 0; border-radius: 0; box-shadow: none; padding: 0; max-width: none; width: 100%; }
  .paper .ptop, .paper .words, .paper tr.net td { background: #f4f7fa !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .paper .phead-band, .paper th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { margin: 14mm; }
}