/* ==========================================================================
   Absence & Leave Management — design system

   Structure
     1. Tokens          colour, type, space, radius, elevation
     2. Reset & base
     3. App shell       rail, drawer, topbar, content
     4. Primitives      button, input, field, pill, avatar, chip
     5. Surfaces        panel, table, empty, skeleton
     6. Overlays        dialog, drawer, toast, menu, command palette
     7. Domain          calendar, balance meter, coverage
     8. Responsive
     9. Accessibility & print

   Two rules hold this together.

   Elevation carries meaning. A resting surface is a hairline border and no
   shadow; a shadow means the element floats above the page and can be
   dismissed. Enterprise density comes from rules and alignment, not from
   drop-shadowing every card.

   Hebrew sets the typography. Hebrew has no letter case, so uppercasing a
   label is a no-op that only damages the Latin half of a bilingual
   interface, and tracking out Hebrew hurts legibility badly. Hierarchy here
   is built from weight, size and colour — never from caps or letter-spacing.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* -- Ink: one ramp, used consistently by role ------------------------- */
  --ink-900: #0E1F29;   /* headings */
  --ink-700: #2C4552;   /* body */
  --ink-500: #5A6E7A;   /* secondary, captions */
  --ink-400: #7D8F9A;   /* placeholder, disabled */

  /* -- Surfaces --------------------------------------------------------- */
  --canvas:    #F1F4F6;
  --surface:   #FFFFFF;
  --surface-2: #F7F9FA;  /* table head, inset wells */
  --surface-3: #ECF1F3;  /* pressed, track */

  --border:        #DAE2E7;
  --border-strong: #BFCCD4;

  /* -- Brand: deep Mediterranean teal ----------------------------------- */
  --brand-800: #083A45;
  --brand-700: #0A4854;
  --brand-600: #0E5C6B;
  --brand-300: #8FBAC3;
  --brand-100: #CFE2E6;
  --brand-50:  #E9F2F4;

  /* -- Status. All foregrounds clear AA on their own tint. --------------- */
  --ok-700:  #14603C;  --ok-200:  #B3D6C3;  --ok-50:  #E4F1EA;
  --warn-700:#8A5300;  --warn-200:#EBD6AE;  --warn-50:#FDF4E5;
  --bad-700: #9C2B2B;  --bad-200: #E7BEBE;  --bad-50: #FAE9E9;
  --neut-700:#4E5F6B;  --neut-200:#D3DBE0;  --neut-50:#EEF1F3;

  /* Brass is reserved for the Hebrew calendar: holidays and birthdays. */
  --brass-700: #86690F; --brass-200: #E5D5A4; --brass-50: #FBF5E4;

  /* -- Type ------------------------------------------------------------- */
  --ui: "Assistant", "Segoe UI", "Noto Sans Hebrew", "Arial Hebrew",
        system-ui, -apple-system, sans-serif;
  /* Frank Ruhl Libre is the classic Hebrew text face. It earns its place on
     the wordmark and page titles only; using it for body text would make a
     dense operational screen harder to scan. */
  --display: "Frank Ruhl Libre", "Frank Ruehl CLM", "David Libre", Georgia, serif;

  --t-micro: 11.5px;
  --t-sm:    12.5px;
  --t-base:  14px;
  --t-md:    15px;
  --t-lg:    16.5px;
  --t-xl:    19px;
  --t-2xl:   23px;
  --t-3xl:   28px;

  /* -- Space: 4px base, used everywhere ---------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px;

  /* -- Radius: three steps, by role -------------------------------------- */
  --r-sm: 4px;    /* chips, pills, small controls */
  --r-md: 6px;    /* buttons, inputs */
  --r-lg: 8px;    /* panels, dialogs */

  /* -- Elevation: only for things that float ----------------------------- */
  --e-menu:   0 4px 14px rgba(14, 31, 41, .12), 0 0 0 1px rgba(14, 31, 41, .06);
  --e-dialog: 0 18px 48px rgba(14, 31, 41, .22);

  --rail: 244px;
  --topbar-h: 60px;

  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-600);
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--ui);
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--ink-700);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink-900);
  font-weight: 600;
  line-height: 1.25;
}
p { margin: 0 0 .7em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus { outline: none; }
:focus-visible { box-shadow: var(--focus); border-radius: var(--r-sm); }

::placeholder { color: var(--ink-400); opacity: 1; }

.u-hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; inset-inline-start: var(--s4); top: -60px; z-index: 300;
  background: var(--brand-600); color: #fff;
  padding: var(--s3) var(--s5); border-radius: 0 0 var(--r-md) var(--r-md);
  font-weight: 600; transition: top .15s;
}
.skip-link:focus { top: 0; text-decoration: none; }

/* ==========================================================================
   3. App shell
   ========================================================================== */

.shell { display: flex; min-height: 100vh; }

/* -- Navigation rail --------------------------------------------------- */

.rail {
  width: var(--rail); flex: 0 0 var(--rail);
  background: var(--brand-800);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}

.rail__brand {
  height: var(--topbar-h); flex: 0 0 var(--topbar-h);
  display: flex; align-items: center; gap: var(--s3);
  padding-inline: var(--s5);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.rail__mark {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: var(--r-sm);
  background: var(--brand-600); display: grid; place-items: center;
}
.rail__mark svg { width: 15px; height: 15px; color: #fff; }
.rail__name {
  font-family: var(--display); font-size: var(--t-lg);
  color: #fff; font-weight: 500; line-height: 1.1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail__name:hover { text-decoration: none; }

.rail__nav { flex: 1; overflow-y: auto; padding: var(--s3) var(--s2); }

.rail__group { margin-bottom: var(--s4); }
.rail__grouplabel {
  /* Sentence case, not tracked-out caps: Hebrew gains nothing from caps and
     loses legibility to tracking. */
  padding: var(--s1) var(--s3) var(--s2);
  font-size: var(--t-sm); font-weight: 600; color: #7E9AA5;
}

.rail__link {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-md); margin-bottom: 1px;
  color: #C3D4DB; font-size: var(--t-md); font-weight: 500;
  position: relative;
}
.rail__link:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.rail__link.is-active { background: var(--brand-600); color: #fff; font-weight: 600; }
.rail__link svg { flex: 0 0 18px; width: 18px; height: 18px; opacity: .9; }
.rail__link.is-active svg { opacity: 1; }

.rail__count {
  margin-inline-start: auto;
  min-width: 20px; padding: 0 6px; height: 19px;
  display: grid; place-items: center;
  background: var(--warn-700); color: #fff;
  font-size: var(--t-micro); font-weight: 700;
  border-radius: 10px; font-variant-numeric: tabular-nums;
}
.rail__link.is-active .rail__count { background: rgba(255,255,255,.22); }

.rail__foot { padding: var(--s3); border-top: 1px solid rgba(255,255,255,.1); }

/* -- Main column ------------------------------------------------------- */

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar-h); flex: 0 0 var(--topbar-h);
  background: var(--surface); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--s4);
  padding-inline: var(--s6);
  position: sticky; top: 0; z-index: 40;
}
.topbar__menu { display: none; }
.topbar__title { font-size: var(--t-lg); font-weight: 600; color: var(--ink-900); white-space: nowrap; }
.topbar__spacer { flex: 1; }
.topbar__actions { display: flex; align-items: center; gap: var(--s2); }

/* Search trigger: looks like a field, behaves like a button. */
.searchbtn {
  display: flex; align-items: center; gap: var(--s2);
  width: min(300px, 34vw); height: 34px;
  padding-inline: var(--s3);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--r-md); cursor: pointer;
  color: var(--ink-400); font-size: var(--t-base); text-align: start;
}
.searchbtn:hover { border-color: var(--border-strong); background: var(--surface); }
.searchbtn svg { flex: 0 0 15px; width: 15px; height: 15px; }
.searchbtn span { flex: 1; }
.searchbtn kbd {
  font-family: var(--ui); font-size: var(--t-micro); font-weight: 600;
  color: var(--ink-400); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 1px 5px;
}

.content { flex: 1; padding: var(--s6); }
.content > * + * { margin-top: var(--s5); }

.pagehead { display: flex; align-items: flex-start; gap: var(--s4); flex-wrap: wrap; }
.pagehead__text { min-width: 0; }
.pagehead h1 {
  font-family: var(--display); font-weight: 500;
  font-size: var(--t-3xl); line-height: 1.15;
}
.pagehead__sub { color: var(--ink-500); font-size: var(--t-md); margin-top: 2px; }
.pagehead__actions { margin-inline-start: auto; display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ==========================================================================
   4. Primitives
   ========================================================================== */

/* -- Button ------------------------------------------------------------ */

.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--ink-700);
  --btn-bd: var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding-inline: var(--s4);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1px solid var(--btn-bd); border-radius: var(--r-md);
  font-size: var(--t-base); font-weight: 600; white-space: nowrap;
  cursor: pointer; text-decoration: none;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { background: var(--surface-3); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn svg { width: 15px; height: 15px; flex: none; }

.btn--primary { --btn-bg: var(--brand-600); --btn-fg: #fff; --btn-bd: var(--brand-600); }
.btn--primary:hover { --btn-bg: var(--brand-700); --btn-bd: var(--brand-700); }
.btn--primary:active { --btn-bg: var(--brand-800); }

.btn--ok { --btn-bg: var(--ok-700); --btn-fg: #fff; --btn-bd: var(--ok-700); }
.btn--ok:hover { --btn-bg: #114E31; --btn-bd: #114E31; }

/* Destructive: outlined until hovered, so it never shouts from a table row. */
.btn--danger { --btn-fg: var(--bad-700); --btn-bd: var(--bad-200); }
.btn--danger:hover { --btn-bg: var(--bad-50); --btn-bd: var(--bad-700); }

.btn--quiet { --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--ink-500); }
.btn--quiet:hover { --btn-bg: var(--surface-3); --btn-fg: var(--ink-900); }

.btn--sm { height: 28px; padding-inline: var(--s3); font-size: var(--t-sm); }
.btn--lg { height: 40px; padding-inline: var(--s5); font-size: var(--t-md); }
.btn--icon { width: 34px; padding: 0; }
.btn--icon.btn--sm { width: 28px; }
.btn--block { width: 100%; }

.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: spin .6s linear infinite;
  color: var(--btn-fg);
}
@keyframes spin { to { transform: rotate(360deg); } }

.btngroup { display: inline-flex; }
.btngroup .btn { border-radius: 0; margin-inline-start: -1px; }
.btngroup .btn:first-child { border-start-start-radius: var(--r-md); border-end-start-radius: var(--r-md); margin: 0; }
.btngroup .btn:last-child { border-start-end-radius: var(--r-md); border-end-end-radius: var(--r-md); }
.btngroup .btn.is-active { background: var(--brand-600); border-color: var(--brand-600); color: #fff; z-index: 1; }

/* -- Fields ------------------------------------------------------------ */

.field { margin-bottom: var(--s4); min-width: 0; }
.field:last-child { margin-bottom: 0; }

.field__label, .label {
  display: block; margin-bottom: 5px;
  font-size: var(--t-base); font-weight: 600; color: var(--ink-900);
}
.field__req { color: var(--bad-700); margin-inline-start: 2px; }
.field__hint { margin-top: 5px; font-size: var(--t-sm); color: var(--ink-500); }

.field__error {
  display: none; margin-top: 5px; gap: 5px;
  font-size: var(--t-sm); font-weight: 500; color: var(--bad-700);
}
.field.is-invalid .field__error { display: flex; }

.input, .select, .textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], input[type="search"],
input[type="tel"], select, textarea {
  width: 100%; height: 36px; padding-inline: var(--s3);
  background: var(--surface); color: var(--ink-900);
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  font-size: var(--t-base);
  transition: border-color .12s, box-shadow .12s;
}
textarea, .textarea { height: auto; min-height: 84px; padding: var(--s2) var(--s3); line-height: 1.5; resize: vertical; }
select { cursor: pointer; padding-inline-end: var(--s6); }

input:hover, select:hover, textarea:hover { border-color: var(--ink-400); }
input:focus, select:focus, textarea:focus {
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px var(--brand-50);
}
input[disabled], select[disabled], textarea[disabled] {
  background: var(--surface-2); color: var(--ink-400); cursor: not-allowed;
}
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea,
input[aria-invalid="true"] { border-color: var(--bad-700); }
.field.is-invalid input:focus { box-shadow: 0 0 0 3px var(--bad-50); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }

/* Segmented radio group, used for half-day and view switches. */
.segmented { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--r-md); overflow: hidden; background: var(--surface); }
.segmented label {
  position: relative; display: flex; align-items: center; justify-content: center;
  padding: 0 var(--s4); height: 34px; cursor: pointer;
  font-size: var(--t-base); font-weight: 600; color: var(--ink-500);
  border-inline-start: 1px solid var(--border);
}
.segmented label:first-child { border-inline-start: 0; }
.segmented input { position: absolute; opacity: 0; width: 0; }
.segmented label:hover { background: var(--surface-2); color: var(--ink-900); }
.segmented input:checked + span { color: #fff; }
.segmented label:has(input:checked) { background: var(--brand-600); color: #fff; }
.segmented input:focus-visible + span { box-shadow: var(--focus); border-radius: var(--r-sm); }

/* Checkbox / radio */
.check { display: inline-flex; align-items: center; gap: var(--s2); cursor: pointer; font-size: var(--t-base); }
.check input { width: 16px; height: 16px; accent-color: var(--brand-600); cursor: pointer; margin: 0; }

/* -- Toolbar & filters -------------------------------------------------- */

.toolbar {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  padding: var(--s3) var(--s4);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.toolbar__search { flex: 1 1 200px; max-width: 340px; }
.toolbar > .btn { flex: none; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding-inline: var(--s2) 6px;
  background: var(--brand-50); border: 1px solid var(--brand-100);
  color: var(--brand-700); border-radius: var(--r-sm);
  font-size: var(--t-sm); font-weight: 600;
}
.chip b { font-weight: 700; }
.chip__x {
  display: grid; place-items: center; width: 16px; height: 16px;
  border: 0; background: transparent; color: inherit; cursor: pointer;
  border-radius: 3px; font-size: 14px; line-height: 1;
}
.chip__x:hover { background: var(--brand-100); }

/* -- Pill (status) ------------------------------------------------------ */

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding-inline: var(--s2);
  border-radius: 11px; border: 1px solid transparent;
  font-size: var(--t-sm); font-weight: 600; white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--approved  { background: var(--ok-50);   color: var(--ok-700);   border-color: var(--ok-200); }
.pill--pending   { background: var(--warn-50); color: var(--warn-700); border-color: var(--warn-200); }
.pill--rejected  { background: var(--bad-50);  color: var(--bad-700);  border-color: var(--bad-200); }
.pill--cancelled,
.pill--withdrawn,
.pill--draft     { background: var(--neut-50); color: var(--neut-700); border-color: var(--neut-200); }
.pill--brass     { background: var(--brass-50); color: var(--brass-700); border-color: var(--brass-200); }
.pill--plain::before { display: none; }

/* -- Avatar & person ---------------------------------------------------- */

.avatar {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand-50); color: var(--brand-700);
  display: grid; place-items: center;
  font-size: var(--t-sm); font-weight: 700;
}
.avatar--lg { width: 44px; height: 44px; font-size: var(--t-lg); }
.avatar--sm { width: 24px; height: 24px; font-size: var(--t-micro); }

.person { display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.person__name { font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person__meta { font-size: var(--t-sm); color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ==========================================================================
   5. Surfaces
   ========================================================================== */

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}
.panel__head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); min-height: 48px;
  border-bottom: 1px solid var(--border);
}
.panel__head h2 { font-size: var(--t-md); font-weight: 600; }
.panel__head .panel__aside { margin-inline-start: auto; display: flex; align-items: center; gap: var(--s2); font-size: var(--t-base); }
.panel__body { padding: var(--s4); }
.panel__body--flush { padding: 0; }
.panel__foot {
  padding: var(--s3) var(--s4); border-top: 1px solid var(--border);
  background: var(--surface-2);
  border-end-start-radius: var(--r-lg); border-end-end-radius: var(--r-lg);
  display: flex; align-items: center; gap: var(--s2);
}

.grid { display: grid; gap: var(--s4); }
.grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.grid--main { grid-template-columns: minmax(0,1fr) 320px; align-items: start; }

/* -- Stat ---------------------------------------------------------------- */

.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--s4); }

.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s4);
  display: block; color: inherit;
}
a.stat:hover { border-color: var(--brand-300); text-decoration: none; }
.stat__label { font-size: var(--t-base); color: var(--ink-500); font-weight: 500; }
.stat__value {
  margin-top: 2px; font-size: var(--t-3xl); font-weight: 700;
  color: var(--ink-900); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.stat__value small { font-size: var(--t-md); font-weight: 500; color: var(--ink-400); }
.stat__note { margin-top: var(--s1); font-size: var(--t-sm); color: var(--ink-500); }
.stat__note--action { color: var(--brand-600); font-weight: 600; }

/* -- Table ---------------------------------------------------------------- */

.tablewrap { overflow-x: auto; }

.table { width: 100%; border-collapse: collapse; font-size: var(--t-base); }
.table th {
  text-align: start; vertical-align: middle;
  padding: var(--s2) var(--s4); height: 40px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-500);
  white-space: nowrap;
}
.table td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr.is-selected { background: var(--brand-50); }

.table th.num, .table td.num { text-align: center; font-variant-numeric: tabular-nums; }
.table th.end, .table td.end { text-align: end; }
.table td.nowrap, .table th.nowrap { white-space: nowrap; }
.table td.actions { text-align: end; white-space: nowrap; }
.table td.actions .btn + .btn { margin-inline-start: 4px; }
.table .col-select { width: 40px; padding-inline-end: 0; }

/* Sortable header */
.table th.sortable > button {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; font-weight: 600;
}
.table th.sortable > button:hover { color: var(--ink-900); }
.table th.sortable svg { width: 12px; height: 12px; opacity: .35; }
.table th[aria-sort] > button { color: var(--ink-900); }
.table th[aria-sort] svg { opacity: 1; color: var(--brand-600); }

/* Row emphasis for things that need attention. */
.table tr.is-overdue td { background: var(--warn-50); }
.table tr.is-overdue:hover td { background: #FBEFDA; }

/* -- Definition list ------------------------------------------------------ */

.dl { margin: 0; }
.dl__row {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: var(--s2) 0; border-bottom: 1px solid var(--border);
}
.dl__row:last-child { border-bottom: 0; }
.dl dt { color: var(--ink-500); }
.dl dd { margin: 0; font-weight: 600; color: var(--ink-900); text-align: end; font-variant-numeric: tabular-nums; }
.dl__row--total { border-top: 1px solid var(--border-strong); margin-top: var(--s1); padding-top: var(--s3); }
.dl__row--total dt { font-weight: 600; color: var(--ink-900); }
.dl__row--total dd { font-size: var(--t-lg); color: var(--brand-600); }

/* -- Empty state ----------------------------------------------------------- */

.empty { padding: var(--s9) var(--s5); text-align: center; }
.empty__icon {
  width: 44px; height: 44px; margin: 0 auto var(--s3);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--surface-3); color: var(--ink-400);
}
.empty__icon svg { width: 21px; height: 21px; }
.empty__title { font-size: var(--t-lg); font-weight: 600; color: var(--ink-900); }
.empty__body { margin: var(--s1) auto 0; max-width: 46ch; color: var(--ink-500); }
.empty__actions { margin-top: var(--s4); display: flex; gap: var(--s2); justify-content: center; }

/* -- Skeleton -------------------------------------------------------------- */

.skel {
  background: linear-gradient(90deg, var(--surface-3) 25%, #E3EAEE 37%, var(--surface-3) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.3s ease-in-out infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.skel--line { height: 11px; margin-bottom: var(--s2); }
.skel--title { height: 16px; width: 40%; }
.skel--cell { height: 11px; width: 70%; }

/* -- Inline banner ---------------------------------------------------------- */

.banner {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); font-size: var(--t-base);
}
.banner svg { flex: none; width: 17px; height: 17px; margin-top: 1px; }
.banner__body { flex: 1; min-width: 0; }
.banner__title { font-weight: 600; color: var(--ink-900); }
.banner__actions { display: flex; gap: var(--s2); margin-inline-start: auto; }
.banner--info  { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-700); }
.banner--ok    { background: var(--ok-50);   border-color: var(--ok-200);   color: var(--ok-700); }
.banner--warn  { background: var(--warn-50); border-color: var(--warn-200); color: var(--warn-700); }
.banner--error { background: var(--bad-50);  border-color: var(--bad-200);  color: var(--bad-700); }

/* ==========================================================================
   6. Overlays
   ========================================================================== */

.scrim {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(14, 31, 41, .45);
  display: grid; place-items: center; padding: var(--s5);
  animation: fade .12s ease;
}
@keyframes fade { from { opacity: 0; } }

.dialog {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--e-dialog);
  width: min(520px, 100%); max-height: 86vh;
  display: flex; flex-direction: column;
}
.dialog__head { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); }
.dialog__head h2 { font-size: var(--t-lg); }
.dialog__head p { margin: var(--s1) 0 0; font-size: var(--t-base); color: var(--ink-500); }
.dialog__body { padding: var(--s5); overflow-y: auto; flex: 1; }
.dialog__foot {
  padding: var(--s3) var(--s5); border-top: 1px solid var(--border);
  display: flex; gap: var(--s2); justify-content: flex-end;
  background: var(--surface-2);
  border-end-start-radius: var(--r-lg); border-end-end-radius: var(--r-lg);
}
.dialog--wide { width: min(720px, 100%); }

/* -- Side drawer (mobile nav, day detail) ---------------------------------- */

.drawer {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 110;
  width: min(380px, 92vw); background: var(--surface);
  box-shadow: var(--e-dialog);
  display: flex; flex-direction: column;
  animation: slidein .16s ease;
}
@keyframes slidein { from { transform: translateX(var(--drawer-from, 100%)); } }
[dir="rtl"] .drawer { --drawer-from: -100%; }
.drawer--nav { inset-inline-start: 0; inset-inline-end: auto; width: min(280px, 84vw); background: var(--brand-800); }
[dir="rtl"] .drawer--nav { --drawer-from: 100%; }
.drawer__head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); min-height: 52px;
  border-bottom: 1px solid var(--border);
}
.drawer--nav .drawer__head { border-color: rgba(255,255,255,.1); }
.drawer__head h2 { font-size: var(--t-md); flex: 1; }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--s4); }
.drawer__foot { padding: var(--s3) var(--s4); border-top: 1px solid var(--border); display: flex; gap: var(--s2); }

/* -- Toast ------------------------------------------------------------------ */

#toasts {
  position: fixed; inset-block-end: var(--s5); inset-inline-start: var(--s5);
  z-index: 200; display: flex; flex-direction: column; gap: var(--s2);
  width: min(360px, calc(100vw - var(--s8)));
}
.toast {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--ink-900); color: #fff;
  border-radius: var(--r-md); box-shadow: var(--e-dialog);
  font-size: var(--t-base); animation: toastin .16s ease;
}
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } }
.toast.is-leaving { opacity: 0; transition: opacity .2s; }
.toast svg { flex: none; width: 17px; height: 17px; margin-top: 1px; }
.toast__body { flex: 1; }
.toast__action {
  background: none; border: 0; color: #8FD3E0; font-weight: 700;
  cursor: pointer; padding: 0; font-size: var(--t-base); white-space: nowrap;
}
.toast--ok svg    { color: #6BD39C; }
.toast--error svg { color: #F4A2A2; }
.toast--warn svg  { color: #F0C579; }

/* -- Menu -------------------------------------------------------------------- */

.menu {
  position: absolute; z-index: 120; min-width: 200px;
  /* Never taller than the window; the script sets the exact value. */
  max-height: calc(100vh - 16px); overflow-y: auto;
  background: var(--surface); border-radius: var(--r-md);
  box-shadow: var(--e-menu); padding: var(--s1);
}
.menu__item {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  padding: var(--s2) var(--s3); border: 0; background: none;
  border-radius: var(--r-sm); cursor: pointer;
  font-size: var(--t-base); color: var(--ink-700); text-align: start;
}
.menu__item:hover { background: var(--surface-2); color: var(--ink-900); text-decoration: none; }
.menu__item svg { width: 15px; height: 15px; opacity: .7; }
.menu__item--danger { color: var(--bad-700); }
.menu__sep { height: 1px; background: var(--border); margin: var(--s1) 0; }
.menu__label { padding: var(--s2) var(--s3) var(--s1); font-size: var(--t-sm); color: var(--ink-500); }

/* -- Command palette ---------------------------------------------------------- */

.cmdk-scrim { align-items: flex-start; padding-top: 12vh; }
.cmdk {
  width: min(560px, 100%); background: var(--surface);
  border-radius: var(--r-lg); box-shadow: var(--e-dialog);
  overflow: hidden; display: flex; flex-direction: column; max-height: 62vh;
}
.cmdk__search { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s4); border-bottom: 1px solid var(--border); }
.cmdk__search svg { width: 17px; height: 17px; color: var(--ink-400); flex: none; }
.cmdk__search input {
  flex: 1; height: 52px; border: 0; padding: 0; font-size: var(--t-lg); background: none;
}
.cmdk__search input:focus { box-shadow: none; }
.cmdk__list { overflow-y: auto; padding: var(--s2); }
.cmdk__group { padding: var(--s2) var(--s3) var(--s1); font-size: var(--t-sm); font-weight: 600; color: var(--ink-500); }
.cmdk__item {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  padding: var(--s2) var(--s3); border: 0; background: none;
  border-radius: var(--r-sm); cursor: pointer; text-align: start;
  font-size: var(--t-base); color: var(--ink-700);
}
.cmdk__item[aria-selected="true"] { background: var(--brand-50); color: var(--brand-700); }
.cmdk__item svg { width: 16px; height: 16px; flex: none; opacity: .7; }
.cmdk__item .avatar { width: 24px; height: 24px; font-size: var(--t-micro); }
.cmdk__meta { margin-inline-start: auto; font-size: var(--t-sm); color: var(--ink-400); }
.cmdk__foot {
  padding: var(--s2) var(--s4); border-top: 1px solid var(--border);
  background: var(--surface-2); font-size: var(--t-sm); color: var(--ink-500);
  display: flex; gap: var(--s4);
}
.cmdk__foot kbd {
  font-family: var(--ui); font-weight: 600; background: var(--surface);
  border: 1px solid var(--border); border-radius: 3px; padding: 0 4px;
}

/* Sticky bulk-action bar that replaces the toolbar when rows are selected. */
.bulkbar {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s4); min-height: 48px;
  background: var(--brand-700); color: #fff;
  border-start-start-radius: var(--r-lg); border-start-end-radius: var(--r-lg);
}
.bulkbar__count { font-weight: 600; }
.bulkbar__actions { margin-inline-start: auto; display: flex; gap: var(--s2); }
.bulkbar .btn { --btn-bg: rgba(255,255,255,.14); --btn-fg: #fff; --btn-bd: rgba(255,255,255,.3); }
.bulkbar .btn:hover { --btn-bg: rgba(255,255,255,.24); }
.bulkbar .btn--ok { --btn-bg: #fff; --btn-fg: var(--brand-700); --btn-bd: #fff; }

/* ==========================================================================
   7. Domain components
   ========================================================================== */

/* -- Balance meter ------------------------------------------------------------ */

.balance + .balance { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--border); }
.balance__top { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: 6px; }
.balance__name { font-weight: 600; color: var(--ink-900); }
.balance__num { margin-inline-start: auto; font-weight: 700; font-size: var(--t-lg); color: var(--ink-900); font-variant-numeric: tabular-nums; }
.balance__num small { font-size: var(--t-sm); font-weight: 500; color: var(--ink-400); }

.meter { display: flex; height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.meter__used { background: var(--brand-600); }
/* Pending is hatched, never solid: those days have not been deducted from the
   official balance and the bar must not imply that they have. */
.meter__pending {
  background-image: repeating-linear-gradient(135deg,
    var(--warn-700) 0 3px, transparent 3px 7px);
  background-color: var(--warn-200);
}
.meter__legend { display: flex; gap: var(--s4); margin-top: 6px; font-size: var(--t-sm); color: var(--ink-500); }
.meter__legend span { display: inline-flex; align-items: center; gap: 5px; }
.swatch { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.swatch--used { background: var(--brand-600); }
.swatch--pending { background-color: var(--warn-200); background-image: repeating-linear-gradient(135deg, var(--warn-700) 0 3px, transparent 3px 7px); }
.swatch--left { background: var(--surface-3); border: 1px solid var(--border-strong); }

/* -- Bar chart ------------------------------------------------------------------ */

.bars { display: flex; flex-direction: column; gap: var(--s2); }
.bar { display: grid; grid-template-columns: 84px 1fr 44px; gap: var(--s3); align-items: center; font-size: var(--t-base); }
.bar__track { height: 16px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.bar__fill { height: 100%; background: var(--brand-600); border-radius: 3px; min-width: 2px; }
.bar__num { text-align: end; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-900); }

/* -- Coverage traffic light -------------------------------------------------------- */

.cover { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-base); white-space: nowrap; }
.cover__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cover--good     .cover__dot { background: var(--ok-700); }
.cover--limited  .cover__dot { background: var(--warn-700); }
.cover--critical .cover__dot { background: var(--bad-700); }

/* ==========================================================================
   Calendar — the one place the design raises its voice
   ========================================================================== */

.cal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }

.cal__bar {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.cal__heading { min-width: 0; }
.cal__month { font-family: var(--display); font-size: var(--t-xl); font-weight: 500; color: var(--ink-900); line-height: 1.2; }
/* The Hebrew month sits with the Gregorian one, not as an afterthought:
   both reckonings are in daily use in an Israeli office. */
.cal__hebrew { font-size: var(--t-sm); color: var(--brass-700); font-weight: 600; }
.cal__bar .btngroup { margin-inline-start: auto; }

.cal__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.cal__weekday { padding: var(--s2); text-align: center; font-size: var(--t-sm); font-weight: 600; color: var(--ink-500); }
.cal__weekday--rest { color: var(--brass-700); }

.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }

.cal__day {
  min-height: 112px; padding: 5px 6px 20px;
  border-inline-start: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  position: relative; cursor: pointer; background: var(--surface);
  text-align: start;
}
.cal__day:nth-child(7n+1) { border-inline-start: 0; }
.cal__grid > .cal__day:nth-last-child(-n+7) { border-bottom: 0; }
.cal__day:hover { background: var(--brand-50); }
.cal__day:focus-visible { box-shadow: inset 0 0 0 2px var(--brand-600); border-radius: 0; }
.cal__day--muted { background: var(--surface-2); }
.cal__day--muted .cal__num { color: var(--ink-400); }
.cal__day--rest { background: var(--surface-2); }
.cal__day--holiday { background: var(--brass-50); }
.cal__day--holiday:hover { background: #F7EFD9; }

.cal__num {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px;
  font-size: var(--t-base); font-weight: 600; color: var(--ink-900);
  font-variant-numeric: tabular-nums; border-radius: 50%;
}
.cal__day--today .cal__num { background: var(--brand-600); color: #fff; }
.cal__heb { font-size: var(--t-micro); color: var(--brass-700); margin-inline-start: 3px; }
.cal__holiday { font-size: var(--t-micro); font-weight: 700; color: var(--brass-700); line-height: 1.3; margin-top: 1px; }

.cal__chips { margin-top: var(--s1); display: flex; flex-direction: column; gap: 2px; }
.cal__chip {
  display: flex; align-items: center; gap: 4px;
  padding: 1px 5px; border-radius: 3px;
  font-size: var(--t-micro); font-weight: 600; line-height: 1.6;
  background: var(--brand-50); color: var(--brand-700);
  border-inline-start: 3px solid var(--brand-600);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal__chip--pending {
  background: var(--warn-50); color: var(--warn-700);
  border-inline-start-color: var(--warn-700);
  border-inline-start-style: dashed;
}
.cal__chip--birthday { background: var(--brass-50); color: var(--brass-700); border-inline-start-color: var(--brass-200); }
.cal__more { font-size: var(--t-micro); font-weight: 600; color: var(--ink-500); padding-inline-start: 5px; }

/* Coverage bar pinned to the bottom edge of each working day. */
.cal__cover {
  position: absolute; inset-inline: 6px; inset-block-end: 6px;
  height: 3px; border-radius: 2px; background: var(--surface-3); overflow: hidden;
}
.cal__cover i { display: block; height: 100%; border-radius: 2px; }
.cal__cover--good i     { background: var(--ok-700); }
.cal__cover--limited i  { background: var(--warn-700); }
.cal__cover--critical i { background: var(--bad-700); }

.cal__legend {
  display: flex; gap: var(--s5); flex-wrap: wrap;
  padding: var(--s3) var(--s4); border-top: 1px solid var(--border);
  background: var(--surface-2); font-size: var(--t-sm); color: var(--ink-500);
}
.cal__legend span { display: inline-flex; align-items: center; gap: 6px; }

/* Agenda list */
.agenda__day { display: flex; gap: var(--s4); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); }
.agenda__day:last-child { border-bottom: 0; }
.agenda__date { flex: 0 0 96px; font-weight: 600; color: var(--ink-900); font-variant-numeric: tabular-nums; }
.agenda__date small { display: block; font-weight: 500; color: var(--ink-500); font-size: var(--t-sm); }
.agenda__items { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.agenda__row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }

/* Findings (conflict engine output) */
.finding {
  display: flex; gap: var(--s3); align-items: flex-start;
  padding: var(--s3); border-radius: var(--r-md);
  border: 1px solid; font-size: var(--t-base); margin-bottom: var(--s2);
}
.finding:last-child { margin-bottom: 0; }
.finding svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.finding--info     { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand-700); }
.finding--warning,
.finding--approval { background: var(--warn-50); border-color: var(--warn-200); color: var(--warn-700); }
.finding--block    { background: var(--bad-50);  border-color: var(--bad-200);  color: var(--bad-700); }

/* ==========================================================================
   Login
   ========================================================================== */

.login {
  min-height: 100vh; display: grid; place-items: center; padding: var(--s5);
  background: linear-gradient(160deg, var(--brand-800) 0%, #0C2D38 55%, #0A2029 100%);
}
.login__card {
  width: min(400px, 100%); background: var(--surface);
  border-radius: var(--r-lg); padding: var(--s7);
  box-shadow: var(--e-dialog);
}
.login__mark { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--brand-600); display: grid; place-items: center; margin-bottom: var(--s4); }
.login__mark svg { width: 20px; height: 20px; color: #fff; }
.login__card h1 { font-family: var(--display); font-size: var(--t-2xl); font-weight: 500; }
.login__sub { color: var(--ink-500); margin-bottom: var(--s6); }
.login__foot { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--border); font-size: var(--t-sm); color: var(--ink-500); }

/* ==========================================================================
   Utilities
   ========================================================================== */

.muted { color: var(--ink-500); }
.small { font-size: var(--t-sm); }
.strong { font-weight: 600; color: var(--ink-900); }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.row--end { justify-content: flex-end; }
.row--between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: var(--s3); }
.stack--tight { gap: var(--s2); }
.list-reset { list-style: none; margin: 0; padding: 0; }
.mt { margin-top: var(--s4); }
.mb { margin-bottom: var(--s4); }
.flex1 { flex: 1; }

/* Mobile-only card rendering of a table row. */
.cardlist { display: none; }

/* ==========================================================================
   8. Responsive
   ========================================================================== */

@media (max-width: 1180px) {
  .grid--main { grid-template-columns: minmax(0,1fr); }
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 900px) {
  /* The rail becomes a drawer. An icon-only strip is not navigation: with ten
     destinations people cannot tell them apart without labels. */
  .rail { display: none; }
  .topbar__menu { display: inline-flex; }
  .topbar { padding-inline: var(--s4); gap: var(--s3); }
  .searchbtn { width: 34px; padding: 0; justify-content: center; }
  .searchbtn span, .searchbtn kbd { display: none; }
  /* The primary action keeps its icon but drops the word, so it stays
     reachable with one thumb without crowding the bar. */
  .new-label { display: none; }
  .topbar__actions .btn { width: 34px; padding: 0; }

  .content { padding: var(--s4); }
  .grid--2, .grid--3, .grid--4, .stats { grid-template-columns: minmax(0,1fr); }
  .field-row { grid-template-columns: 1fr; }
  .pagehead h1 { font-size: var(--t-2xl); }
  .pagehead__actions { width: 100%; margin-inline-start: 0; }
  .pagehead__actions .btn { flex: 1; }

  .cal__day { min-height: 74px; padding: 3px 3px 14px; }
  .cal__chip { font-size: 10px; padding: 0 3px; }
  .cal__holiday { font-size: 10px; }
  .toolbar__search { max-width: none; }
  #toasts { inset-inline: var(--s4); width: auto; }
}

@media (max-width: 640px) {
  /* Wide tables become stacked cards. Horizontal scrolling on a phone hides
     the columns that matter and people never find them. */
  .table--responsive { display: none; }
  .cardlist { display: flex; flex-direction: column; }
  .cardlist__item { padding: var(--s4); border-bottom: 1px solid var(--border); }
  .cardlist__item:last-child { border-bottom: 0; }
  .cardlist__top { display: flex; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s2); }
  .cardlist__top .pill { margin-inline-start: auto; }
  .cardlist__meta { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); font-size: var(--t-sm); color: var(--ink-500); }
  .cardlist__actions { margin-top: var(--s3); display: flex; gap: var(--s2); }
  .cardlist__actions .btn { flex: 1; }

  .cal__day { min-height: 58px; }
  .cal__chips, .cal__holiday, .cal__heb { display: none; }
  .cal__day--has-events::after {
    content: ""; display: block; width: 5px; height: 5px; border-radius: 50%;
    background: var(--brand-600); margin-top: 3px;
  }
  .dialog, .drawer { width: 100%; max-height: 92vh; }
  .scrim { padding: 0; place-items: end stretch; }
  .dialog { border-end-start-radius: 0; border-end-end-radius: 0; }
}

/* ==========================================================================
   9. Accessibility & print
   ========================================================================== */

/* Touch devices get larger hit areas. Keying on the pointer rather than the
   viewport is what matters: a tablet at desktop width is still a finger, and
   a small window on a laptop is still a mouse. 44px is the Apple and Android
   minimum and the difference between tapping a button and tapping near it. */
@media (pointer: coarse) {
  .btn { height: 44px; padding-inline: var(--s5); }
  .btn--sm { height: 38px; padding-inline: var(--s4); }
  .btn--icon { width: 44px; }
  .btn--icon.btn--sm { width: 38px; }

  input[type="text"], input[type="email"], input[type="password"],
  input[type="date"], input[type="number"], input[type="search"],
  input[type="tel"], select { height: 44px; }

  .check input { width: 20px; height: 20px; }
  .table .col-select { width: 48px; }
  .table td { padding-block: var(--s4); }

  .rail__link, .menu__item, .cmdk__item { min-height: 44px; }
  .segmented label { height: 44px; }
  .chip { height: 32px; }
  .chip__x { width: 24px; height: 24px; }

  /* A calendar day is a tap target in its own right. */
  .cal__day { min-height: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (prefers-contrast: more) {
  :root { --border: #9AAAB4; --border-strong: #6F8391; --ink-500: #3E525E; }
}

@media print {
  .rail, .topbar, .toolbar, .pagehead__actions, .btn, #toasts, .cal__legend { display: none !important; }
  body { background: #fff; }
  .panel { border-color: #BBB; break-inside: avoid; }
  .content { padding: 0; }
  .table th { background: #EEE !important; }
  a { color: inherit; text-decoration: none; }
}

/* ==========================================================================
   Pagination

   Silent truncation is the enterprise sin this fixes. A list that quietly
   stops at 300 rows teaches people the system is wrong about their data,
   and they stop trusting the numbers on every other screen too. Always say
   how many there are, and always offer the rest.
   ========================================================================== */

.pager {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--border); background: var(--surface-2);
  border-end-start-radius: var(--r-lg); border-end-end-radius: var(--r-lg);
  font-size: var(--t-base); color: var(--ink-500);
}
.pager__count { font-variant-numeric: tabular-nums; }
.pager__count b { color: var(--ink-900); }
.pager__controls { margin-inline-start: auto; display: flex; gap: var(--s2); align-items: center; }
.pager__page { font-variant-numeric: tabular-nums; padding-inline: var(--s2); }

/* Keyboard shortcut help */
.keys { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s4); align-items: center; }
.keys dt { display: flex; gap: 4px; }
.keys dd { margin: 0; color: var(--ink-500); }
kbd.key {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px;
  padding-inline: 6px; font-family: var(--ui); font-size: var(--t-sm);
  font-weight: 600; color: var(--ink-900);
  background: var(--surface); border: 1px solid var(--border-strong);
  border-bottom-width: 2px; border-radius: var(--r-sm);
}

/* Import preview */
.import-preview { max-height: 260px; overflow: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.import-preview table { font-size: var(--t-sm); }
.import-row--bad td { background: var(--bad-50); }
.import-note { font-size: var(--t-sm); color: var(--bad-700); }