/* ==========================================================================
   HR360 design system — one stylesheet, both directions, both themes.

   Cool-grey surfaces, hairline borders with a whisper of shadow, one deep-teal
   accent that never carries meaning, and six semantic status tones that always
   ship with a text label. Inter sets Latin text and digits; Arabic script falls
   through to IBM Plex Sans Arabic.

   Rules that hold everywhere in this file:
   - Logical properties only. No `left`, no `right`, no `margin-left`.
     One stylesheet serves Arabic RTL and English LTR.
   - Elevation is a token. Resting surfaces (cards, tables, tiles, controls)
     take `--shadow-xs` at most; `--shadow-1..3` are for things that float.
   - Colour is never the only signal; a status badge always carries its word.
   - Every token is re-declared for dark, so component rules never branch.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root,
[data-theme="light"] {
  /* Cool-grey neutrals — 12 steps */
  --gray-50: #f9fafb;
  --gray-100: #f3f5f7;
  --gray-150: #eceff2;
  --gray-200: #e2e6ea;
  --gray-300: #cfd5dc;
  --gray-400: #9ba3ae;
  --gray-500: #737c88;
  --gray-600: #5a636f;
  --gray-700: #414953;
  --gray-800: #2b323b;
  --gray-900: #1a1f26;
  --gray-950: #0f1318;

  /* Deep teal — the single accent */
  --teal-50: #edf8f6;
  --teal-100: #d3eeea;
  --teal-200: #a6dad3;
  --teal-300: #6cbdb4;
  --teal-400: #2e9a91;
  --teal-500: #0f766e;
  --teal-600: #0c655e;
  --teal-700: #0a524c;
  --teal-800: #083f3b;
  --teal-900: #052b28;

  /* Surfaces & ink */
  --color-bg: var(--gray-100);
  --color-surface: #ffffff;
  --color-surface-2: var(--gray-50);
  --color-surface-hover: #f5f7f9;
  --color-surface-sunken: var(--gray-150);
  --color-sidenav: #fbfcfc;
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-border-hover: var(--gray-400);
  --color-text: var(--gray-900);
  --color-text-2: var(--gray-700);
  --color-text-3: var(--gray-600);
  --color-text-on-accent: #ffffff;
  --color-overlay: rgba(15, 19, 24, 0.48);

  /* Accent roles */
  --color-primary: var(--teal-500);
  --color-primary-hover: var(--teal-600);
  --color-primary-active: var(--teal-700);
  --color-primary-subtle: var(--teal-50);
  --color-primary-subtle-border: var(--teal-200);
  --color-link: var(--teal-600);
  --color-link-hover: var(--teal-700);
  --color-focus: var(--teal-500);
  --color-focus-offset: var(--color-surface);
  --color-nav-active-bg: var(--teal-50);
  --color-nav-active-text: var(--teal-700);

  /* The sign-in panel: the accent at its deepest, and a light tile for the
     supplied logo, whose own colours are never recoloured. */
  --color-brand-panel: var(--teal-700);
  --color-brand-panel-deep: var(--teal-900);
  --color-brand-panel-text: #ffffff;
  --color-brand-panel-muted: var(--teal-100);
  --color-logo-tile: #ffffff;

  /* Status tones — never colour alone, always tone bg + tone ink + a label */
  --tone-neutral-bg: #eef1f4;
  --tone-neutral-text: #414953;
  --tone-neutral-border: #d5dbe1;
  --tone-info-bg: #eaf2fc;
  --tone-info-text: #1d4e89;
  --tone-info-border: #bfd6f2;
  --tone-success-bg: #e8f5ec;
  --tone-success-text: #1c6b3c;
  --tone-success-border: #b8e0c6;
  --tone-warning-bg: #fdf4e3;
  --tone-warning-text: #8a5a0b;
  --tone-warning-border: #f2dbab;
  --tone-danger-bg: #fdeeed;
  --tone-danger-text: #a3221a;
  --tone-danger-border: #f4c9c5;
  --tone-special-bg: #f3effc;
  --tone-special-text: #5b3ba6;
  --tone-special-border: #d9cdf3;

  /* Leave-type category palette — calendars and the leave-type editor only */
  --leave-1: #8a4f68;
  --leave-2: #4a6288;
  --leave-3: #5c6a2c;
  --leave-4: #8e5a1e;
  --leave-5: #6a5490;
  --leave-6: #2f6478;
  --leave-7: #8c4a35;
  --leave-8: #46603f;
  --leave-9: #7d4a7d;
  --leave-10: #565f6b;
  --leave-ink: #ffffff;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-1: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-2: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 12px 24px -4px rgba(16, 24, 40, 0.08);
  --shadow-3: 0 12px 24px -6px rgba(16, 24, 40, 0.12), 0 24px 48px -12px rgba(16, 24, 40, 0.18);

  color-scheme: light;
}

[data-theme="dark"] {
  --color-bg: #0f1318;
  --color-surface: #171c22;
  --color-surface-2: #1c2229;
  --color-surface-hover: #1f262e;
  --color-surface-sunken: #12161b;
  --color-sidenav: #141920;
  --color-border: #29303a;
  --color-border-strong: #39414c;
  --color-border-hover: #4d5663;
  --color-text: #eef1f4;
  --color-text-2: #b9c1cb;
  --color-text-3: #98a1ad;
  --color-text-on-accent: #04211f;
  --color-overlay: rgba(0, 0, 0, 0.62);

  --color-primary: var(--teal-400);
  --color-primary-hover: #3aa9a0;
  --color-primary-active: #55bab1;
  --color-primary-subtle: #10302d;
  --color-primary-subtle-border: #1d4d49;
  --color-link: #6fc2ba;
  --color-link-hover: #a6dad3;
  --color-focus: var(--teal-300);
  --color-focus-offset: var(--color-surface);
  --color-nav-active-bg: #10302d;
  --color-nav-active-text: #a6dad3;

  --color-brand-panel: #0b2f2c;
  --color-brand-panel-deep: #061a18;
  --color-brand-panel-text: #eef1f4;
  --color-brand-panel-muted: #a6dad3;
  --color-logo-tile: #f3f5f7;

  --tone-neutral-bg: #222932;
  --tone-neutral-text: #c4cbd4;
  --tone-neutral-border: #36404b;
  --tone-info-bg: #15263b;
  --tone-info-text: #a8cbf2;
  --tone-info-border: #274b75;
  --tone-success-bg: #13281b;
  --tone-success-text: #9ad9b0;
  --tone-success-border: #275a3a;
  --tone-warning-bg: #2c2313;
  --tone-warning-text: #efc98a;
  --tone-warning-border: #6a5222;
  --tone-danger-bg: #321816;
  --tone-danger-text: #f0aba4;
  --tone-danger-border: #6d2a24;
  --tone-special-bg: #231d37;
  --tone-special-text: #c3aef0;
  --tone-special-border: #4a3a7a;

  --leave-1: #b98aa2;
  --leave-2: #89a1c7;
  --leave-3: #a4b467;
  --leave-4: #d6a367;
  --leave-5: #a795c9;
  --leave-6: #6da8c0;
  --leave-7: #c88e78;
  --leave-8: #8aa885;
  --leave-9: #b585b5;
  --leave-10: #97a2ad;
  --leave-ink: #11151a;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 4px 8px rgba(0, 0, 0, 0.4), 0 12px 24px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 12px 24px rgba(0, 0, 0, 0.45), 0 24px 48px rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

:root {
  /* Type */
  --font-sans: "Inter", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --text-12: 12px;
  --text-13: 13px;
  --text-14: 14px;
  --text-15: 15px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-24: 24px;
  --text-30: 30px;
  --leading-body: 1.55;
  --leading-tight: 1.25;
  --tracking-tight: -0.011em;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --numeric: tabular-nums;

  /* Spacing — 4px scale */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;

  /* Radius */
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-dialog: 16px;
  --radius-full: 999px;

  /* Density — compact (HR/Finance desktop) */
  --row-compact: 44px;
  --input-compact: 36px;
  --button-compact: 36px;
  --text-table: var(--text-13);
  /* Density — comfortable (Me / My team / phone) */
  --row-comfortable: 52px;
  --input-comfortable: 44px;
  --button-comfortable: 44px;
  --touch-min: 44px;

  /* Motion */
  --motion-fast: 150ms;
  --motion-slow: 250ms;
  --ease: cubic-bezier(0.2, 0, 0.2, 1);

  /* Shell */
  --header-h: 56px;
  --sidenav-w: 256px;
  --sidenav-w-collapsed: 64px;
  --content-max: 1320px;
  --focus-ring: 0 0 0 2px var(--color-focus-offset), 0 0 0 4px var(--color-focus);
}

/* ── Base ───────────────────────────────────────────────────────────────── */

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

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

/* Arabic runs a size up: at the same pixel size Plex Arabic reads smaller
   than Inter beside it. */
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-15);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

[dir="ltr"] body,
body[dir="ltr"],
html[dir="ltr"] body { font-size: var(--text-14); }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
/* Tightened tracking is a Latin refinement; Arabic is joined script and must
   never be letter-spaced. */
[dir="ltr"] :is(h1, h2, h3) { letter-spacing: var(--tracking-tight); }
h1 { font-size: var(--text-30); }
h2 { font-size: var(--text-24); }
h3 { font-size: var(--text-20); }
h4 { font-size: var(--text-16); }
p { margin: 0; }

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

img { max-width: 100%; }
svg { flex: none; }

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

table { border-collapse: collapse; width: 100%; }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; }

hr { border: 0; border-block-start: 1px solid var(--color-border); margin: var(--space-16) 0; }

::placeholder { color: var(--color-text-3); opacity: 1; }

/* Direction-bearing icons mirror in RTL; nothing else ever does. */
[dir="rtl"] .icon--mirror { transform: scaleX(-1); }

@keyframes hr-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@keyframes hr-spin { to { transform: rotate(360deg); } }
@keyframes hr-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes hr-slide-start { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }

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

/* ── Utilities ──────────────────────────────────────────────────────────── */

.num { font-variant-numeric: var(--numeric); }
/* `isolate` already gives an inline box its own bidi run; forcing
   inline-block here quietly broke every table cell it was put on — the
   cell stopped being a cell and merged into its neighbour's column. */
.ltr { direction: ltr; unicode-bidi: isolate; }
.tone-success { color: var(--tone-success-text); }
.tone-warning { color: var(--tone-warning-text); }
.tone-danger { color: var(--tone-danger-text); }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.muted { color: var(--color-text-2); }
.dim { color: var(--color-text-3); }
.small { font-size: var(--text-13); }
.tiny { font-size: var(--text-12); }
.strong { font-weight: var(--weight-medium); }
.center { text-align: center; }
.end { text-align: end; }
.mono { font-family: var(--font-mono); }
.grow { flex: 1; min-width: 0; }
.push-end { margin-inline-start: auto; }

.stack { display: flex; flex-direction: column; }
.stack-4 { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-8 { display: flex; flex-direction: column; gap: var(--space-8); }
.stack-12 { display: flex; flex-direction: column; gap: var(--space-12); }
.stack-16 { display: flex; flex-direction: column; gap: var(--space-16); }
.stack-24 { display: flex; flex-direction: column; gap: var(--space-24); }
.row { display: flex; align-items: center; gap: var(--space-8); }
.row-12 { display: flex; align-items: center; gap: var(--space-12); }
.row-16 { display: flex; align-items: center; gap: var(--space-16); }
.row-wrap { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.row-top { display: flex; align-items: flex-start; gap: var(--space-12); }

.grid { display: grid; gap: var(--space-16); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.grid-tiles { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-12); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-block-start: -100px; inset-inline-start: var(--space-16);
  z-index: 100; padding: var(--space-8) var(--space-16);
  background: var(--color-surface); border: 1px solid var(--color-primary);
  border-radius: var(--radius-control);
}
.skip-link:focus { inset-block-start: var(--space-8); }

/* The icon element: an inline SVG <use> of the sprite.

   The painting properties live here rather than on the sprite, because a
   <use> instance inherits from where it is *used*, not from where the symbol
   is defined — without this every glyph renders as a solid black blob. */
.icon {
  width: 20px;
  height: 20px;
  flex: none;
  vertical-align: -0.2em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: 16px; height: 16px; }
.icon--xs { width: 14px; height: 14px; }
.icon--lg { width: 24px; height: 24px; }

/* ── Shell ──────────────────────────────────────────────────────────────── */

.app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.app__header {
  position: sticky;
  inset-block-start: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  height: var(--header-h);
  padding-inline: var(--space-16);
  background: var(--color-surface);
  border-block-end: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}

.app__body { flex: 1; display: flex; min-height: 0; }

.app__main { flex: 1; min-width: 0; }

/* A page on its way in (hr360.js, "Pages that keep the shell"): after 150 ms
   a bar runs along the top and the region it will replace dims, so a slow
   answer never looks like a click that did nothing. The shell stays live. */
.is-navigating body::before {
  content: "";
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: var(--space-4);
  z-index: 100;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  background-size: 200% 100%;
  animation: hr-shimmer 1s linear infinite;
}
.is-navigating .app__main { opacity: 0.6; transition: opacity var(--motion-fast) var(--ease); }
/* Focus moves to the new page's heading for keyboards and screen readers; it
   is a place to continue from, not a control, so it draws no ring. */
.app__main:focus, .app__main h1[tabindex="-1"]:focus { outline: none; }

.app__inner {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: var(--space-24) var(--space-24) var(--space-64);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  white-space: nowrap;
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  font-size: var(--text-15);
}
@media (min-width: 1024px) { .brand { width: calc(var(--sidenav-w) - var(--space-16) - var(--space-12)); } }
.brand:hover { text-decoration: none; color: var(--color-text); }
/* An organisation's uploaded logo fills a rounded square; the default Health
   360 mark is line art and sits on the surface as drawn, except in the dark
   theme, where its navy needs the light tile the favicon has. */
.brand__mark {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: none;
  border-radius: var(--radius-control);
  overflow: hidden;
}
.brand__mark img { width: 100%; height: 100%; object-fit: cover; }
.brand__mark--default img { object-fit: contain; }
[data-theme="dark"] .brand__mark--default { padding: 3px; background: var(--color-logo-tile); }
.brand__mark--md { width: 40px; height: 40px; }
.brand__mark--lg { width: 64px; height: 64px; border-radius: var(--radius-card); }
.brand__mark--lg.brand__mark--default { padding: 6px; border: 1px solid var(--color-border); background: var(--color-logo-tile); }
.brand__name { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; }

.header-search {
  flex: 1;
  max-width: 440px;
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: var(--input-compact);
  padding-inline: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-2);
  color: var(--color-text-3);
  font-family: inherit;
  font-size: var(--text-13);
  cursor: text;
  text-align: start;
  transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.header-search:hover { background: var(--color-surface); border-color: var(--color-border-strong); }
.header-search kbd {
  padding: 1px 6px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: 11px;
  direction: ltr;
}

.header-actions { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-4); min-width: 0; }

/* A phone header carries four things at most. The branch scope, the theme
   toggle and the language switch move into the profile menu and the More
   sheet, and search collapses to its icon — before this the header was wider
   than the screen and took the whole page into a sideways scroll with it. */
@media (max-width: 599px) {
  .app__header { gap: var(--space-8); padding-inline: var(--space-12); }
  .brand { min-width: 0; }
  .brand__name { display: none; }
  .header-search {
    flex: none;
    width: 34px;
    height: 34px;
    justify-content: center;
    padding-inline: 0;
    border-color: transparent;
    background: transparent;
  }
  .header-search .grow, .header-search kbd { display: none; }
  /* !important because .chip and .row are declared further down the
     sheet and would otherwise win on source order alone. */
  .header-wide-only { display: none !important; }
}

.icon-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text-2);
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.icon-button:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.icon-button--bordered { border: 1px solid var(--color-border-strong); background: var(--color-surface); box-shadow: var(--shadow-xs); }

.badge-count {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 2px;
  min-width: 16px; height: 16px;
  padding-inline: 4px;
  border-radius: var(--radius-full);
  background: var(--tone-danger-text);
  color: #fff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: var(--numeric);
}

.header-profile {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: 36px;
  padding-inline: 6px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  cursor: pointer;
}
.header-profile:hover { background: var(--color-surface-sunken); }
.header-profile__names { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.header-profile__name { font-size: var(--text-13); }
.header-profile__role { font-size: 11px; color: var(--color-text-3); }
@media (max-width: 899px) { .header-profile__names { display: none; } }

/* Side navigation */
.sidenav {
  flex: none;
  width: var(--sidenav-w);
  padding: var(--space-16) var(--space-12);
  background: var(--color-sidenav);
  border-inline-end: 1px solid var(--color-border);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
  position: sticky;
  inset-block-start: var(--header-h);
  height: calc(100vh - var(--header-h));
}
.sidenav__group { display: flex; flex-direction: column; gap: 1px; margin-block-end: var(--space-16); }
.sidenav__title {
  padding: 4px var(--space-12) 6px;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  color: var(--color-text-3);
}
/* Small capitals are a Latin device; Arabic has no case and must never be
   letter-spaced, or its letters come apart. */
[dir="ltr"] .sidenav__title { text-transform: uppercase; letter-spacing: .06em; }
.sidenav__rule { height: 1px; margin: 6px 6px 10px; background: var(--color-border); display: none; }
.sidenav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: 36px;
  padding: 6px var(--space-12);
  border-radius: var(--radius-control);
  font-size: var(--text-13);
  font-weight: var(--weight-medium);
  color: var(--color-text-2);
  white-space: nowrap;
  transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.sidenav__link .icon { width: 18px; height: 18px; color: var(--color-text-3); }
.sidenav__link:hover { background: var(--color-surface-sunken); color: var(--color-text); text-decoration: none; }
.sidenav__link:hover .icon { color: var(--color-text-2); }
.sidenav__link[aria-current="page"] {
  background: var(--color-nav-active-bg);
  color: var(--color-nav-active-text);
  font-weight: var(--weight-semibold);
}
.sidenav__link[aria-current="page"] .icon { color: var(--color-primary); }
/* The current page also carries a bar on its leading edge, so it is never
   told by tint alone. */
.sidenav__link[aria-current="page"]::before {
  content: "";
  position: absolute;
  inset-block: 8px;
  inset-inline-start: -12px;
  width: 3px;
  border-start-end-radius: 3px;
  border-end-end-radius: 3px;
  background: var(--color-primary);
}
.sidenav__link--disabled { color: var(--color-text-3); cursor: not-allowed; font-weight: var(--weight-regular); }
.sidenav__link--disabled:hover { background: transparent; color: var(--color-text-3); }
.sidenav__label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sidenav__badge {
  margin-inline-start: auto;
  min-width: 20px;
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: var(--color-text-on-accent);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  line-height: 18px;
  text-align: center;
  font-variant-numeric: var(--numeric);
}
.sidenav__soon { margin-inline-start: auto; font-size: 10px; color: var(--color-text-3); }

/* Tablet: collapse the side nav to a 64px icon rail. */
@media (min-width: 600px) and (max-width: 1023px) {
  .sidenav { width: var(--sidenav-w-collapsed); padding-inline: var(--space-8); }
  .sidenav__title { display: none; }
  .sidenav__rule { display: block; }
  .sidenav__link { justify-content: center; padding-inline: 0; }
  .sidenav__link[aria-current="page"]::before { inset-inline-start: -8px; }
  .sidenav__label, .sidenav__soon { display: none; }
  .sidenav__badge {
    position: absolute;
    inset-block-start: 4px;
    inset-inline-end: 8px;
    min-width: 8px; height: 8px;
    padding: 0;
    font-size: 0;
  }
  .sidenav__link { position: relative; }
}

/* Phone: no side nav at all — a bottom tab bar instead. */
@media (max-width: 599px) {
  .sidenav { display: none; }
  .app__inner { padding: var(--space-16) var(--space-16) 88px; }
}

/* Phone bottom tab bar */
.tabbar {
  display: none;
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 30;
  border-block-start: 1px solid var(--color-border);
  background: var(--color-surface);
  padding-block-end: env(safe-area-inset-bottom);
}
@media (max-width: 599px) { .tabbar { display: flex; } }
.tabbar__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 56px;
  padding-block: 6px;
  border: 0;
  background: transparent;
  font-family: inherit;
  color: var(--color-text-3);
  cursor: pointer;
}
.tabbar__item:hover { text-decoration: none; }
.tabbar__item[aria-current="page"] { color: var(--color-nav-active-text); }
.tabbar__item[aria-current="page"] .tabbar__label { font-weight: var(--weight-semibold); }
.tabbar__item[aria-current="page"] .tabbar__icon { background: var(--color-nav-active-bg); }
.tabbar__label { font-size: 11px; font-weight: var(--weight-medium); }
.tabbar__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 28px;
  border-radius: var(--radius-full);
  transition: background var(--motion-fast) var(--ease);
}
.tabbar__icon .badge-count { inset-block-start: -4px; inset-inline-end: -8px; }

/* ── Page anatomy ───────────────────────────────────────────────────────── */

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 var(--space-8);
  padding: 0;
  list-style: none;
  font-size: var(--text-13);
  color: var(--color-text-3);
}
.breadcrumb li { display: flex; align-items: center; gap: 6px; }
.breadcrumb li + li::before {
  content: "";
  width: 14px; height: 14px;
  background: currentColor;
  mask: var(--chevron-mask) center / contain no-repeat;
  -webkit-mask: var(--chevron-mask) center / contain no-repeat;
}
.breadcrumb a { color: var(--color-text-3); }
.breadcrumb a:hover { color: var(--color-link); }
.breadcrumb [aria-current="page"] { color: var(--color-text-2); font-weight: var(--weight-medium); }
[dir="rtl"] .breadcrumb li + li::before { transform: scaleX(-1); }

.page-header { display: flex; flex-direction: column; gap: var(--space-12); margin-block-end: var(--space-24); }
.page-header__row {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  flex-wrap: wrap;
}
.page-header__titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
/* The title side keeps a readable width; past that the actions wrap below it
   rather than squeezing a four-part name onto four lines. */
.page-header__row > :first-child { flex: 1 1 20rem; min-width: 0; }
/* Titles state the page; they do not shout. The density of the screen below
   is the point, as in any business application people spend a day in. */
.page-header h1 { font-size: var(--text-20); font-weight: var(--weight-semibold); }
@media (min-width: 900px) { .page-header h1 { font-size: var(--text-24); } }
.page-header__subtitle { font-size: var(--text-14); color: var(--color-text-3); }
.page-header__badges { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.page-actions { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }

/* Tabs — real tab semantics, counts always shown when a count exists. */
.tabs {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  border-block-end: 1px solid var(--color-border);
  margin-block-end: var(--space-24);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px var(--space-12);
  border: 0;
  border-block-end: 2px solid transparent;
  background: transparent;
  color: var(--color-text-2);
  font-family: inherit;
  font-size: var(--text-13);
  white-space: nowrap;
  cursor: pointer;
}
.tabs__tab:hover { color: var(--color-text); text-decoration: none; }
.tabs__tab[aria-selected="true"] {
  color: var(--color-nav-active-text);
  border-block-end-color: var(--color-primary);
  font-weight: var(--weight-semibold);
}
.tabs__count {
  padding: 1px 7px;
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  color: var(--color-text-2);
  font-size: 11px;
  font-variant-numeric: var(--numeric);
}
.tabs__tab[aria-selected="true"] .tabs__count {
  background: var(--color-primary-subtle);
  color: var(--color-nav-active-text);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  height: var(--button-compact);
  padding-inline: 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: var(--color-primary);
  color: var(--color-text-on-accent);
  box-shadow: var(--shadow-xs);
  font-family: inherit;
  font-size: var(--text-14);
  font-weight: var(--weight-semibold);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease),
              box-shadow var(--motion-fast) var(--ease);
}
.btn:hover { background: var(--color-primary-hover); color: var(--color-text-on-accent); text-decoration: none; }
.btn:active { background: var(--color-primary-active); box-shadow: none; }
.btn:focus-visible { box-shadow: var(--focus-ring); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }

.btn--secondary {
  border-color: var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: var(--weight-medium);
}
.btn--secondary:hover { background: var(--color-surface-2); border-color: var(--color-border-hover); color: var(--color-text); }
.btn--secondary:active { background: var(--color-surface-sunken); }

.btn--ghost {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--color-text-2);
  font-weight: var(--weight-medium);
}
.btn--ghost:hover { background: var(--color-surface-sunken); color: var(--color-text); }
.btn--ghost:active { background: var(--color-surface-sunken); }

.btn--danger { background: var(--tone-danger-text); color: #fff; }
.btn--danger:hover { background: var(--tone-danger-text); filter: brightness(1.1); color: #fff; }
.btn--danger:active { background: var(--tone-danger-text); filter: brightness(0.95); }

.btn--dashed {
  border: 1px dashed var(--color-border-strong);
  background: transparent;
  box-shadow: none;
  color: var(--color-text-2);
  font-weight: var(--weight-medium);
}
.btn--dashed:hover { background: var(--color-surface-sunken); }
.btn--dashed:active { background: var(--color-surface-sunken); }

.btn--comfortable { height: var(--button-comfortable); padding-inline: 18px; font-size: var(--text-15); }
.btn--small { height: 30px; padding-inline: 10px; font-size: var(--text-13); gap: 6px; }
.btn--block { width: 100%; }
.btn--icon { width: var(--button-compact); padding-inline: 0; }

@media (max-width: 599px) {
  .btn { height: var(--button-comfortable); font-size: var(--text-16); }
  .btn--small { height: 32px; font-size: var(--text-13); }
}

/* ── Cards, tiles, panels ───────────────────────────────────────────────── */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
  padding: var(--space-16);
}
@media (min-width: 900px) { .card { padding: var(--space-20); } }
.card--flush { padding: 0; overflow: hidden; }
.card--sunken { background: var(--color-surface-2); box-shadow: none; }
.card--accent { border-color: var(--color-primary-subtle-border); background: var(--color-primary-subtle); box-shadow: none; }

.card__header {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  min-height: 52px;
  padding: var(--space-12) var(--space-16);
  border-block-end: 1px solid var(--color-border);
}
@media (min-width: 900px) { .card__header { padding-inline: var(--space-20); } }
.card__title { font-size: var(--text-15); font-weight: var(--weight-semibold); }
.card__body { padding: var(--space-16); }
@media (min-width: 900px) { .card__body { padding: var(--space-20); } }
.card__footer {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  border-block-start: 1px solid var(--color-border);
  background: var(--color-surface-2);
}

.section-title {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  flex-wrap: wrap;
  font-size: var(--text-15);
  font-weight: var(--weight-semibold);
  margin-block-end: var(--space-12);
}

/* Stat tile — always a link to exactly the list its number counts. A toned
   tile also carries its tone on the leading edge, beside the toned figure. */
.stat {
  --stat-accent: transparent;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  color: var(--color-text);
  text-decoration: none;
  transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.stat::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 3px;
  background: var(--stat-accent);
}
a.stat:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-1);
  text-decoration: none;
  color: var(--color-text);
}
.stat__label { display: flex; align-items: center; gap: 6px; font-size: var(--text-13); font-weight: var(--weight-medium); color: var(--color-text-2); line-height: 1.35; }
.stat__label .icon { width: 16px; height: 16px; color: var(--color-text-3); }
.stat__value {
  font-size: var(--text-24);
  font-weight: var(--weight-bold);
  font-variant-numeric: var(--numeric);
  line-height: 1.2;
}
[dir="ltr"] .stat__value { letter-spacing: var(--tracking-tight); }
.stat__meta { font-size: var(--text-12); color: var(--color-text-3); }
.stat--neutral { --stat-accent: var(--tone-neutral-border); }
.stat--info { --stat-accent: var(--tone-info-text); }
.stat--success { --stat-accent: var(--tone-success-text); }
.stat--warning { --stat-accent: var(--tone-warning-text); }
.stat--danger { --stat-accent: var(--tone-danger-text); }
.stat--special { --stat-accent: var(--tone-special-text); }
.stat--neutral .stat__value { color: var(--tone-neutral-text); }
.stat--info .stat__value { color: var(--tone-info-text); }
.stat--success .stat__value { color: var(--tone-success-text); }
.stat--warning .stat__value { color: var(--tone-warning-text); }
.stat--danger .stat__value { color: var(--tone-danger-text); }
.stat--special .stat__value { color: var(--tone-special-text); }
.stat[aria-current="true"] { --stat-accent: var(--color-primary); border-color: var(--color-primary); background: var(--color-primary-subtle); }

/* ── Status badges ──────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 10px;
  border: 1px solid var(--tone-neutral-border);
  border-radius: var(--radius-full);
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-text);
  font-size: var(--text-12);
  font-weight: var(--weight-medium);
  line-height: 1.6;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 6px; height: 6px;
  flex: none;
  border-radius: var(--radius-full);
  background: currentColor;
}
.badge--plain::before { display: none; }
.badge--info { background: var(--tone-info-bg); color: var(--tone-info-text); border-color: var(--tone-info-border); }
.badge--success { background: var(--tone-success-bg); color: var(--tone-success-text); border-color: var(--tone-success-border); }
.badge--warning { background: var(--tone-warning-bg); color: var(--tone-warning-text); border-color: var(--tone-warning-border); }
.badge--danger { background: var(--tone-danger-bg); color: var(--tone-danger-text); border-color: var(--tone-danger-border); }
.badge--special { background: var(--tone-special-bg); color: var(--tone-special-text); border-color: var(--tone-special-border); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 28px;
  padding: 3px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  color: var(--color-text-2);
  font-size: var(--text-12);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.chip:hover { background: var(--color-surface-2); border-color: var(--color-border-hover); text-decoration: none; color: var(--color-text); }
.chip--on {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
  color: var(--color-nav-active-text);
}

/* ── Avatars ────────────────────────────────────────────────────────────── */

.avatar {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--color-primary-subtle);
  color: var(--color-nav-active-text);
  font-size: var(--text-12);
  font-weight: var(--weight-semibold);
  overflow: hidden;
  line-height: 1;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--xs { width: 24px; height: 24px; font-size: 11px; }
.avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.avatar--md { width: 40px; height: 40px; font-size: var(--text-14); }
.avatar--lg { width: 56px; height: 56px; font-size: var(--text-16); }
.avatar--xl { width: 88px; height: 88px; font-size: var(--text-24); }

.avatar-group { display: inline-flex; }
.avatar-group .avatar { border: 2px solid var(--color-surface); }
.avatar-group .avatar + .avatar { margin-inline-start: -10px; }

.person { display: flex; align-items: center; gap: var(--space-8); min-width: 0; }
.person__names { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.person__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--weight-medium); }
.person__meta { font-size: 11px; color: var(--color-text-3); font-variant-numeric: var(--numeric); }

.person-card {
  display: flex;
  gap: var(--space-12);
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-2);
}
.person-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* ── Forms ──────────────────────────────────────────────────────────────── */

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font-size: var(--text-13); font-weight: var(--weight-medium); }
.field__required { color: var(--tone-danger-text); }
.field__hint { font-size: var(--text-12); color: var(--color-text-3); }
.field__error {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-12);
  color: var(--tone-danger-text);
}

.input,
.select,
.textarea {
  width: 100%;
  min-width: 0;
  height: var(--input-compact);
  padding-inline: 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-14);
  transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--color-border-hover); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--color-primary); }
.textarea { height: auto; padding-block: 8px; line-height: 1.5; resize: vertical; }
.input.num, .input[type="number"] { font-variant-numeric: var(--numeric); }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--tone-danger-text);
}
.input[disabled], .select[disabled], .textarea[disabled], .input[readonly] {
  background: var(--color-surface-sunken);
  color: var(--color-text-2);
  border-color: var(--color-border);
  cursor: not-allowed;
}
.input[type="date"], .input[type="time"], .input[type="datetime-local"] {
  font-variant-numeric: var(--numeric);
}

/* Hours and minutes as two boxes: a duration typed as 8.5 is read twice. */
.duration-input { display: inline-flex; align-items: center; gap: var(--space-8); }
.duration-input__part { display: inline-flex; align-items: center; gap: var(--space-4); }
.duration-input__part .input { width: 4.5em; text-align: center; }
.duration-input__unit { font-size: var(--text-13); color: var(--color-text-2); }

.select {
  appearance: none;
  padding-inline-end: 34px;
  background-image: var(--chevron-bg);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}
[dir="rtl"] .select { background-position: left 10px center; }
/* A list to choose several from: as tall as its rows, no chevron. The fixed
   control height left one line of six showing. */
.select[multiple] {
  height: auto;
  min-height: calc(var(--space-16) * 7);
  padding-block: var(--space-4);
  padding-inline-end: var(--space-8);
  background-image: none;
}
.select[multiple] option { padding-block: 3px; }

@media (max-width: 599px) {
  .input, .select, .textarea { height: var(--input-comfortable); font-size: var(--text-16); }
  .textarea { height: auto; }
}

/* Input with a trailing unit — money, percent */
.input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  overflow: hidden;
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--motion-fast) var(--ease);
}
.input-group:hover { border-color: var(--color-border-hover); }
.input-group .input {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.input-group .input:focus-visible { box-shadow: none; }
.input-group:focus-within { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.input-group__unit {
  display: grid;
  place-items: center;
  padding-inline: 10px;
  background: var(--color-surface-sunken);
  border-inline-start: 1px solid var(--color-border);
  font-size: var(--text-13);
  color: var(--color-text-2);
}
/* A leading label inside the control — the email on the lock screen, where
   the address is context rather than a field to edit. */
.input-group__prefix {
  display: grid;
  place-items: center;
  padding-inline: 12px;
  border-inline-end: 1px solid var(--color-border);
  font-size: var(--text-13);
  color: var(--color-text-3);
  white-space: nowrap;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Checkbox / radio / toggle — drawn, so they theme correctly */
.check, .radio {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  min-height: 28px;
  cursor: pointer;
  font-size: var(--text-14);
}
.check input, .radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box, .radio__box {
  display: grid;
  place-items: center;
  width: 18px; height: 18px;
  flex: none;
  margin-block-start: 3px;
  border: 1px solid var(--color-border-strong);
  border-radius: 4px;
  background: var(--color-surface);
  color: transparent;
  transition: background var(--motion-fast) var(--ease);
}
.radio__box { border-radius: var(--radius-full); }
.check input:checked + .check__box {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-on-accent);
}
.radio input:checked + .radio__box {
  border: 5px solid var(--color-primary);
  background: var(--color-surface);
}
.check input:focus-visible + .check__box,
.radio input:focus-visible + .radio__box { box-shadow: var(--focus-ring); }
.check input[disabled] + .check__box, .radio input[disabled] + .radio__box { opacity: .5; }
.check__text { line-height: 1.5; }

.switch { display: flex; align-items: center; gap: var(--space-12); min-height: 32px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  position: relative;
  width: 40px; height: 22px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--color-border-strong);
  transition: background var(--motion-fast) var(--ease);
}
.switch__track::after {
  content: "";
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  width: 16px; height: 16px;
  border-radius: var(--radius-full);
  background: #fff;
  transition: inset-inline-start var(--motion-fast) var(--ease);
}
.switch input:checked + .switch__track { background: var(--color-primary); }
.switch input:checked + .switch__track::after { inset-inline-start: 21px; }
.switch input:focus-visible + .switch__track { box-shadow: var(--focus-ring); }

/* Segmented control */
.segmented {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
}
.segmented__item {
  padding: 5px var(--space-12);
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-2);
  font-family: inherit;
  font-size: var(--text-13);
  white-space: nowrap;
  cursor: pointer;
}
.segmented__item:hover { color: var(--color-text); text-decoration: none; }
.segmented__item[aria-pressed="true"], .segmented__item[aria-current="true"] {
  background: var(--color-surface);
  color: var(--color-text);
  font-weight: var(--weight-medium);
  box-shadow: var(--shadow-1);
}

/* Form layout */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-16); }
.form-grid--wide { grid-template-columns: 1fr; }
.field--full { grid-column: 1 / -1; }

.fieldset {
  min-width: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  padding: var(--space-16);
  margin: 0;
}
@media (min-width: 900px) { .fieldset { padding: var(--space-20); } }
/* The legend is a section heading inside the panel, not a label notched into
   its border. Floated, it stops being the fieldset's rendered legend and
   becomes an ordinary first child — the first item of a stacked fieldset. */
.fieldset legend {
  float: inline-start;
  width: 100%;
  margin-block-end: var(--space-12);
  padding: 0;
  font-size: var(--text-15);
  font-weight: var(--weight-semibold);
}
.fieldset legend + * { clear: both; }

.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  flex-wrap: wrap;
  padding-block-start: var(--space-16);
  border-block-start: 1px solid var(--color-border);
}
.form-actions--sticky {
  position: sticky;
  inset-block-end: 0;
  z-index: 10;
  margin-block-start: var(--space-16);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-2);
}
@media (max-width: 599px) {
  .form-actions--sticky {
    inset-block-end: 56px;
    border-radius: var(--radius-card) var(--radius-card) 0 0;
  }
  .form-actions--sticky .btn { flex: 1; }
}

/* Combobox / person picker */
.combobox { position: relative; }
.combobox__control {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: var(--input-compact);
  padding-inline: 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}
.combobox__control:hover { border-color: var(--color-border-hover); }
.combobox__control:focus-within { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.combobox__input { flex: 1; min-width: 0; border: 0; box-shadow: none; background: transparent; color: var(--color-text); font-family: inherit; font-size: var(--text-14); }
.combobox__input:focus-visible { box-shadow: none; }
.combobox__list {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + 4px);
  z-index: 20;
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-2);
}
.combobox__list:empty { display: none; }
.combobox__option {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: 100%;
  padding: var(--space-8) var(--space-12);
  border: 0;
  border-block-end: 1px solid var(--color-border);
  background: var(--color-surface);
  font-family: inherit;
  font-size: var(--text-14);
  color: var(--color-text);
  text-align: start;
  cursor: pointer;
}
.combobox__option:hover, .combobox__option[aria-selected="true"] { background: var(--color-surface-sunken); }
.combobox__hint { padding: var(--space-8) var(--space-12); font-size: var(--text-12); color: var(--color-text-3); }

/* File upload */
.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--space-24);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-card);
  background: var(--color-surface-2);
  text-align: center;
  cursor: pointer;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--color-primary); background: var(--color-primary-subtle); }
.dropzone input[type="file"] { position: absolute; opacity: 0; width: 0; height: 0; }

.file-row {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: 10px var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
}
.file-row--done { border-color: var(--tone-success-border); background: var(--tone-success-bg); color: var(--tone-success-text); }

/* Repeatable rows */
.repeat-row {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
}
.repeat-row .input { height: var(--input-compact); font-size: var(--text-13); }

/* Password rules checklist */
.pw-rules { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.pw-rules li { display: flex; align-items: center; gap: var(--space-8); font-size: var(--text-13); color: var(--color-text-3); }
.pw-rules li.is-met { color: var(--tone-success-text); }
.pw-rules li.is-failed { color: var(--tone-danger-text); }

/* Seven days across a card — equal columns that shrink, never a row that
   pushes the card wider than the phone it is on. */
.week-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.week-strip .badge {
  justify-content: center;
  padding-inline: 4px;
  min-width: 0;
  overflow: hidden;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */

.table-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  /* `clip` rather than `hidden`: both round the corners off the table inside,
     but `hidden` makes this a scroll container, and a scroll container is what
     a `position: sticky` header sticks to. The roll call is 130 rows on a busy
     day — by row twenty nobody can remember which column is In and which is
     Out. `clip` keeps the clipping and lets the header follow the reader. */
  overflow: clip;
}
/* Positioned, so a screen-reader label (`.sr-only`, absolutely placed) inside
   a cell is clipped with the table. Without it the label escaped the scroll
   box and, in RTL at a phone's width, pushed the whole page 48px sideways. */
.table-scroll { overflow-x: auto; position: relative; }

.table { font-size: var(--text-table); }
.table thead tr { background: var(--color-surface-2); }
.table th {
  height: var(--row-compact);
  padding-inline: var(--space-12);
  border-block-end: 1px solid var(--color-border);
  text-align: start;
  font-size: var(--text-12);
  font-weight: var(--weight-semibold);
  color: var(--color-text-3);
  white-space: nowrap;
}
[dir="ltr"] .table thead th { letter-spacing: .02em; }
.table :is(th, td):first-child { padding-inline-start: var(--space-16); }
.table :is(th, td):last-child { padding-inline-end: var(--space-16); }
/* Only a column header in a table that scrolls with the page, and only the
   header row: a `th` is also how a row header is marked up, and a sticky one
   of those is a grey box floating over the name it was supposed to be.
   `.table-scroll` is excluded because sticky resolves against the nearest
   scroll container, which there is the wrapper, not the viewport — and those
   tables already freeze their first column by hand. */
.table-wrap:not(.table-scroll) > .table > thead > tr > th {
  position: sticky;
  /* Under the app header, which is sticky at 0 and is taller. */
  inset-block-start: var(--header-h);
  z-index: 2;
  /* A row's background does not paint under a sticky cell, so the cell carries
     its own — otherwise the rows scroll through the header. */
  background: var(--color-surface-2);
}
.table td {
  height: var(--row-compact);
  padding-inline: var(--space-12);
  padding-block: var(--space-8);
  vertical-align: middle;
}
.table tbody tr { border-block-start: 1px solid var(--color-border); }
.table tbody tr:first-child { border-block-start: 0; }
.table tbody tr:hover { background: var(--color-surface-hover); }
.table tbody tr.is-selected { background: var(--color-primary-subtle); }
/* A punch clearly away from the branch: the row, not only its badge, so it
   is found by scrolling. A flag for a look, never a verdict. */
.table tbody tr.is-outside { background: var(--tone-danger-bg); }
.table th.num, .table td.num { font-variant-numeric: var(--numeric); }
.table th.end, .table td.end { text-align: end; }
.table td.shrink, .table th.shrink { width: 1%; white-space: nowrap; }
.table__sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  font: inherit;
}
.table__sort:hover { color: var(--color-link); text-decoration: none; }
.table tfoot td {
  border-block-start: 2px solid var(--color-border-strong);
  background: var(--color-surface-2);
  font-weight: var(--weight-medium);
}

/* A wide table becomes a card list on a phone — and, where a register offers
   the choice, wherever the reader asks for one. `[data-view]` is set from the
   query string, so the preference survives a filter, a sort and a link. */
.phone-cards { display: none; flex-direction: column; gap: var(--space-8); }
@media (max-width: 599px) {
  .table-wrap--responsive { display: none; }
  .phone-cards { display: flex; }
}
[data-view="cards"] .table-wrap--responsive { display: none; }
[data-view="cards"] .phone-cards { display: flex; }

/* Two icon buttons that look like one control — table or cards. */
.view-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  background: var(--color-surface-2);
}
.view-toggle__option {
  display: grid;
  place-items: center;
  width: 32px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-3);
  cursor: pointer;
}
.view-toggle__option:hover { color: var(--color-text); }
.view-toggle__option[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-1);
}
@media (max-width: 599px) { .view-toggle { display: none; } }

.record-card {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: var(--touch-min);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  color: var(--color-text);
}
.record-card:hover { text-decoration: none; color: var(--color-text); border-color: var(--color-border-strong); }
.record-card__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.record-card__title { font-size: var(--text-15); font-weight: var(--weight-medium); }
.record-card__meta { font-size: var(--text-13); color: var(--color-text-2); }
.record-card__badges { display: flex; flex-wrap: wrap; gap: 6px; }

/* Filter toolbar */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-12);
  margin-block-end: var(--space-12);
}
.toolbar .field { flex: 0 1 auto; }
.toolbar .field--search { flex: 1 1 220px; }
.toolbar .field__label { font-size: var(--text-12); font-weight: var(--weight-regular); color: var(--color-text-3); }

.search-input {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  height: var(--input-compact);
  padding-inline: 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  color: var(--color-text-3);
  transition: border-color var(--motion-fast) var(--ease);
}
.search-input:hover { border-color: var(--color-border-hover); }
.search-input:focus-within { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.search-input input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding-inline: 0;
  box-shadow: none;
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-14);
}
.search-input input:focus-visible { box-shadow: none; }
@media (max-width: 599px) { .search-input { height: var(--input-comfortable); } }

.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  margin-block-end: var(--space-12);
  font-size: var(--text-13);
  color: var(--color-text-2);
}
.result-count { font-variant-numeric: var(--numeric); }

.bulk-bar {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  flex-wrap: wrap;
  padding: var(--space-8) var(--space-12);
  border: 1px solid var(--color-primary-subtle-border);
  background: var(--color-primary-subtle);
  border-radius: var(--radius-control);
  margin-block-end: var(--space-12);
  color: var(--color-nav-active-text);
  font-size: var(--text-13);
}
.bulk-bar[hidden] { display: none; }

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  margin-block-start: var(--space-16);
  font-size: var(--text-13);
}
.pagination__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--button-compact);
  padding-inline: 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-control);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
  color: var(--color-text-2);
  font-weight: var(--weight-medium);
}
.pagination__link:hover { background: var(--color-surface-sunken); text-decoration: none; }
.pagination__status { color: var(--color-text-3); font-variant-numeric: var(--numeric); }

/* ── Forms in dialogs ───────────────────────────────────────────────────
   A create or edit page lifted into the overlay: the page's own form, with a
   title bar that closes it. Short forms sit in the centre; long ones — a new
   employee — slide in as a drawer the height of the screen. The body scrolls
   and the form's sticky actions stick to the bottom of it. */
.dialog-source { display: contents; }
.dialog.form-dialog { display: flex; flex-direction: column; max-block-size: 80vh; }
.dialog.form-dialog--center { width: min(720px, calc(100vw - 32px)); }
.dialog.form-dialog--drawer {
  width: min(760px, 100vw);
  block-size: 100vh;
  max-block-size: 100vh;
  border-radius: 0;
  border-block: 0;
  border-inline-end: 0;
}
.form-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-20);
  border-block-end: 1px solid var(--color-border);
}
.form-dialog__subtitle { margin: var(--space-4) 0 0; font-size: var(--text-13); color: var(--color-text-3); }
.form-dialog__body { flex: 1; overflow-y: auto; padding: var(--space-20); overscroll-behavior: contain; }
.form-dialog__body form { max-width: none !important; }
.form-dialog.is-busy .form-dialog__body { opacity: .7; pointer-events: none; }

/* ── Infinite lists ─────────────────────────────────────────────────────
   The end of a list that loads more of itself. It says how much is showing,
   keeps a real link for keyboards and for a script that never ran, and turns
   quiet once everything is there. */
.infinite {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
  margin-block-start: var(--space-16);
  padding-block: var(--space-8);
  font-size: var(--text-13);
  color: var(--color-text-3);
  font-variant-numeric: var(--numeric);
}
.infinite--done { margin-block-end: 0; }
.infinite.is-loading .infinite__more { opacity: .6; pointer-events: none; }
.infinite.is-loading .infinite__status::after {
  content: "";
  display: inline-block;
  inline-size: 12px;
  block-size: 12px;
  margin-inline-start: var(--space-8);
  vertical-align: -2px;
  border: 2px solid var(--color-border-strong);
  border-block-start-color: var(--color-primary);
  border-radius: 50%;
  animation: infinite-spin .7s linear infinite;
}
@keyframes infinite-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .infinite.is-loading .infinite__status::after { animation: none; }
}

/* ── Description list ───────────────────────────────────────────────────── */

.dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-8) var(--space-16);
  font-size: var(--text-13);
}
.dl dt { color: var(--color-text-3); }
.dl dd { margin: 0; font-variant-numeric: var(--numeric); }
.dl--stacked { grid-template-columns: 1fr; gap: var(--space-4); }
.dl--stacked dt { font-size: var(--text-12); }
.dl--stacked dd + dt { margin-block-start: var(--space-8); }
/* Label–value pairs, two to a row, each pair a flex row of its own. Not grid:
   WeasyPrint places grid items left to right whatever the direction, so the
   Arabic payslip PDF printed each label after its value and 22 working days
   read as "absent 22". Flex follows the direction in both renderers. */
.dl--pairs { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-16); }
.dl--pairs > div { display: flex; gap: var(--space-8); flex: 1 1 40%; min-width: 0; }

/* ── Timeline ───────────────────────────────────────────────────────────── */

.timeline { display: flex; flex-direction: column; }
.timeline__item {
  display: flex;
  gap: var(--space-12);
  padding-block: var(--space-12);
  border-block-end: 1px solid var(--color-border);
}
.timeline__item:last-child { border-block-end: 0; }
.timeline__dot {
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  flex: none;
  border-radius: var(--radius-full);
  border: 1px solid var(--tone-neutral-border);
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-text);
}
.timeline__dot--info { border-color: var(--tone-info-border); background: var(--tone-info-bg); color: var(--tone-info-text); }
.timeline__dot--success { border-color: var(--tone-success-border); background: var(--tone-success-bg); color: var(--tone-success-text); }
.timeline__dot--warning { border-color: var(--tone-warning-border); background: var(--tone-warning-bg); color: var(--tone-warning-text); }
.timeline__dot--danger { border-color: var(--tone-danger-border); background: var(--tone-danger-bg); color: var(--tone-danger-text); }
.timeline__dot--special { border-color: var(--tone-special-border); background: var(--tone-special-bg); color: var(--tone-special-text); }
.timeline__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.timeline__title { font-size: var(--text-14); }
.timeline__meta { font-size: var(--text-12); color: var(--color-text-3); font-variant-numeric: var(--numeric); }
.timeline__note { font-size: var(--text-13); color: var(--color-text-2); }

/* ── Stepper ────────────────────────────────────────────────────────────── */

.stepper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
  margin: 0; padding: 0;
  list-style: none;
}
.stepper__step { display: flex; align-items: center; gap: var(--space-8); }
.stepper__step + .stepper__step::before {
  content: "";
  width: 16px; height: 16px;
  background: var(--color-text-3);
  mask: var(--chevron-mask) center / contain no-repeat;
  -webkit-mask: var(--chevron-mask) center / contain no-repeat;
}
[dir="rtl"] .stepper__step + .stepper__step::before { transform: scaleX(-1); }
.stepper__marker {
  display: grid;
  place-items: center;
  width: 24px; height: 24px;
  flex: none;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-3);
  font-size: var(--text-12);
  font-weight: var(--weight-medium);
}
.stepper__label { font-size: var(--text-13); color: var(--color-text-3); }
.stepper__step--done .stepper__marker {
  border-color: var(--tone-success-border);
  background: var(--tone-success-bg);
  color: var(--tone-success-text);
}
.stepper__step--done .stepper__label { color: var(--color-text-2); }
.stepper__step--current .stepper__marker {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text-on-accent);
}
.stepper__step--current .stepper__label { color: var(--color-text); font-weight: var(--weight-semibold); }

/* Form wizard rail */
.wizard-steps { display: flex; flex-wrap: wrap; gap: var(--space-8); margin: 0 0 var(--space-16); padding: 0; list-style: none; }
.wizard-steps__step {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: 6px var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-control);
  font-size: var(--text-13);
  color: var(--color-text-3);
  background: var(--color-surface);
}
.wizard-steps__step--done { color: var(--tone-success-text); border-color: var(--tone-success-border); background: var(--tone-success-bg); }
.wizard-steps__step--current { color: var(--color-text); border-color: var(--color-primary); background: var(--color-primary-subtle); font-weight: var(--weight-medium); }

/* ── Progress ───────────────────────────────────────────────────────────── */

.progress {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--color-surface-sunken);
  overflow: hidden;
}
.progress__bar { display: block; height: 100%; background: var(--color-primary); transition: width var(--motion-slow) var(--ease); }
.progress--thin { height: 4px; }
.progress__bar--warning { background: var(--tone-warning-text); }
.progress__bar--danger { background: var(--tone-danger-text); }

/* ── Banners, toasts, dialogs, drawers ─────────────────────────────────── */

.banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--tone-info-border);
  border-radius: var(--radius-card);
  background: var(--tone-info-bg);
  color: var(--tone-info-text);
}
.banner--success { border-color: var(--tone-success-border); background: var(--tone-success-bg); color: var(--tone-success-text); }
.banner--warning { border-color: var(--tone-warning-border); background: var(--tone-warning-bg); color: var(--tone-warning-text); }
.banner--danger { border-color: var(--tone-danger-border); background: var(--tone-danger-bg); color: var(--tone-danger-text); }
.banner--neutral { border-color: var(--tone-neutral-border); background: var(--tone-neutral-bg); color: var(--tone-neutral-text); }
.banner__body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.banner__title { font-size: var(--text-14); font-weight: var(--weight-semibold); }
.banner__text { font-size: var(--text-13); }
.banner a { color: inherit; text-decoration: underline; }
.banner__close { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; }

.messages { display: flex; flex-direction: column; gap: var(--space-8); margin-block-end: var(--space-16); }

#toasts {
  position: fixed;
  inset-block-end: var(--space-16);
  inset-inline: 0;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  pointer-events: none;
}
@media (max-width: 599px) { #toasts { inset-block-end: 72px; } }
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-12);
  min-width: min(420px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-3);
  animation: hr-rise var(--motion-slow) var(--ease);
  font-size: var(--text-14);
}
.toast__icon { color: var(--tone-success-text); }
.toast--danger { border-color: var(--tone-danger-border); background: var(--tone-danger-bg); color: var(--tone-danger-text); }
.toast--danger .toast__icon { color: var(--tone-danger-text); }
.toast--warning { border-color: var(--tone-warning-border); background: var(--tone-warning-bg); color: var(--tone-warning-text); }
.toast--warning .toast__icon { color: var(--tone-warning-text); }
.toast--info { border-color: var(--tone-info-border); background: var(--tone-info-bg); color: var(--tone-info-text); }
.toast--info .toast__icon { color: var(--tone-info-text); }
.toast__text { flex: 1; }

/* Overlay host: scrim + a positioned panel. */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
}
.overlay.is-open { display: block; }
.overlay__scrim { position: absolute; inset: 0; background: var(--color-overlay); }
.overlay__panel { position: absolute; max-width: calc(100vw - 32px); }
.overlay__panel--center {
  inset-block-start: 10vh;
  inset-inline: 0;
  display: flex;
  justify-content: center;
}
.overlay__panel--top {
  inset-block-start: 80px;
  inset-inline: 0;
  display: flex;
  justify-content: center;
}
.overlay__panel--anchored { inset-block-start: 64px; inset-inline-end: var(--space-16); }
.overlay__panel--drawer { inset-block: 0; inset-inline-end: 0; max-width: 100vw; }
.overlay__panel--sheet { inset-block-end: 0; inset-inline: 0; display: flex; justify-content: center; max-width: none; }

.dialog {
  width: min(520px, calc(100vw - 32px));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-dialog);
  background: var(--color-surface);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  animation: hr-rise var(--motion-slow) var(--ease);
}
.dialog--danger { border-color: var(--tone-danger-border); }
.dialog--wide { width: min(720px, calc(100vw - 32px)); }
.dialog__body { padding: var(--space-20); display: flex; flex-direction: column; gap: var(--space-12); }
.dialog__title { display: flex; align-items: center; gap: var(--space-8); font-size: var(--text-18); font-weight: var(--weight-semibold); }
.dialog__text { font-size: var(--text-14); color: var(--color-text-2); }
.dialog__list {
  margin: 0;
  padding-inline-start: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--text-13);
  color: var(--color-text-2);
  font-variant-numeric: var(--numeric);
}
.dialog__footer {
  display: flex;
  gap: var(--space-8);
  justify-content: flex-end;
  padding: var(--space-12) var(--space-20);
  border-block-start: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
.dialog__tier {
  margin-inline-start: auto;
  padding: 1px 7px;
  border-radius: var(--radius-control);
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-text);
  font-size: 11px;
  font-weight: var(--weight-regular);
}

.drawer {
  width: min(460px, 100vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  box-shadow: var(--shadow-3);
  animation: hr-slide-start var(--motion-slow) var(--ease);
}
.drawer__header {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  border-block-end: 1px solid var(--color-border);
}
.drawer__title { flex: 1; font-size: var(--text-16); font-weight: var(--weight-semibold); }
.drawer__body { flex: 1; overflow: auto; padding: var(--space-16); display: flex; flex-direction: column; gap: var(--space-12); }
.drawer__footer {
  display: flex;
  gap: var(--space-8);
  padding: var(--space-12) var(--space-16);
  border-block-start: 1px solid var(--color-border);
  background: var(--color-surface-2);
}

.sheet {
  width: min(480px, 100vw);
  max-height: 85vh;
  overflow: auto;
  padding: var(--space-16);
  border-start-start-radius: var(--radius-dialog);
  border-start-end-radius: var(--radius-dialog);
  background: var(--color-surface);
  box-shadow: var(--shadow-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  animation: hr-rise var(--motion-slow) var(--ease);
}
.sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--color-border-strong); align-self: center; }

.menu {
  width: 264px;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-2);
}
.menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-13);
  text-align: start;
  cursor: pointer;
}
.menu__item:hover { background: var(--color-surface-sunken); text-decoration: none; color: var(--color-text); }
.menu__item--danger { color: var(--tone-danger-text); }
.menu__item[aria-disabled="true"] { color: var(--color-text-3); cursor: not-allowed; }
.menu__item[aria-disabled="true"]:hover { background: transparent; }
.menu__note { padding: 0 10px 6px; font-size: 11px; color: var(--color-text-3); }
.menu__divider { height: 1px; margin: var(--space-4); background: var(--color-border); }

.popover-panel {
  width: 360px;
  max-width: calc(100vw - 32px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  animation: hr-rise var(--motion-slow) var(--ease);
}

/* Command palette */
.palette {
  width: 560px;
  max-width: calc(100vw - 32px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-dialog);
  background: var(--color-surface);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.palette__search {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16);
  border-block-end: 1px solid var(--color-border);
}
.palette__search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--text-16);
}
.palette__search input:focus-visible { box-shadow: none; }
.palette__results { max-height: 340px; overflow: auto; }
.palette__group { padding: var(--space-8) var(--space-16) var(--space-12); }
.palette__group-name {
  display: block;
  font-size: 11px;
  color: var(--color-text-3);
  font-weight: var(--weight-semibold);
  margin-block-end: 6px;
}
[dir="ltr"] .palette__group-name { text-transform: uppercase; letter-spacing: .06em; }
.palette__result {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-8);
  border-radius: var(--radius-control);
  color: var(--color-text);
}
.palette__result:hover, .palette__result.is-active { background: var(--color-surface-sunken); text-decoration: none; color: var(--color-text); }

/* Notification list */
.notif {
  display: flex;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border-block-end: 1px solid var(--color-border);
  color: var(--color-text);
  background: var(--color-surface);
}
.notif:hover { text-decoration: none; color: var(--color-text); background: var(--color-surface-2); }
.notif--unread { background: var(--color-primary-subtle); }
.push-offer {
  display: flex;
  gap: var(--space-12);
  padding: var(--space-12) var(--space-16);
  border-block-end: 1px solid var(--color-border);
  background: var(--tone-info-bg);
  color: var(--tone-info-text);
}
.push-offer__icon { flex: none; padding-block-start: 2px; }
.notif--unread .notif__title { font-weight: var(--weight-semibold); }
.notif__icon {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  flex: none;
  border-radius: var(--radius-full);
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-text);
}
.notif__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.notif__title { font-size: var(--text-13); }
.notif__text { font-size: var(--text-12); color: var(--color-text-2); }
.notif__when { font-size: 11px; color: var(--color-text-3); }

/* ── Page-level states ──────────────────────────────────────────────────── */

.state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 280px;
  padding: var(--space-32) var(--space-16);
  text-align: center;
}
.state--inline {
  min-height: 0;
  padding: var(--space-24) var(--space-16);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-card);
  background: var(--color-surface-2);
}
.state__icon {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-block-end: var(--space-4);
  border-radius: var(--radius-full);
  background: var(--tone-neutral-bg);
  box-shadow: 0 0 0 6px var(--color-surface-2);
  color: var(--tone-neutral-text);
}
.state__icon--danger { background: var(--tone-danger-bg); color: var(--tone-danger-text); }
.state__icon--warning { background: var(--tone-warning-bg); color: var(--tone-warning-text); }
.state__icon--info { background: var(--tone-info-bg); color: var(--tone-info-text); }
.state__title { font-size: var(--text-18); font-weight: var(--weight-semibold); }
.state__body { max-width: 44ch; font-size: var(--text-14); color: var(--color-text-2); text-wrap: pretty; }

/* Skeletons */
.skeleton {
  display: block;
  height: 14px;
  border-radius: var(--radius-control);
  background: linear-gradient(90deg, var(--color-surface-sunken) 25%, var(--color-border) 37%, var(--color-surface-sunken) 63%);
  background-size: 400% 100%;
  animation: hr-shimmer 1.4s linear infinite;
}
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: block; }
.htmx-request.htmx-indicator { display: block; }

/* ── Calendars ──────────────────────────────────────────────────────────── */

.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal__weekday { text-align: center; font-size: 11px; color: var(--color-text-3); padding-block: 4px; }
.cal__day {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 56px;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 11px;
}
a.cal__day:hover { text-decoration: none; border-color: var(--color-border-strong); }
.cal__num { font-variant-numeric: var(--numeric); color: var(--color-text-2); }
.cal__day--out { opacity: .4; }
.cal__day--rest { background: var(--color-surface-sunken); }
.cal__day--holiday { background: var(--tone-warning-bg); border-color: var(--tone-warning-border); }
.cal__day--today { border-color: var(--color-primary); box-shadow: inset 0 0 0 1px var(--color-primary); }
.cal__bar { height: 5px; border-radius: 3px; background: transparent; }
.cal__tag {
  display: block;
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 10px;
  color: var(--leave-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A company event on the calendar: the accent, not a leave hue, so it never
   reads as somebody's absence. */
.cal__tag--event {
  background: var(--color-primary-subtle);
  color: var(--color-nav-active-text);
  text-decoration: none;
}
.cal__tag--event:hover { text-decoration: underline; }
.cal__tag--draft { background: var(--color-surface-sunken); color: var(--color-text-2); }
.cal__tag--cancelled { text-decoration: line-through; color: var(--color-text-3); }

/* Compact month picker (date-range preview) */
.cal--picker .cal__day {
  min-height: 36px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-control);
  font-size: var(--text-13);
  font-variant-numeric: var(--numeric);
}
.cal--picker .cal__day--selected { background: var(--color-primary); color: var(--color-text-on-accent); }
.cal--picker .cal__day--between { background: var(--color-primary-subtle); color: var(--color-nav-active-text); }
.cal--picker .cal__day--rest { color: var(--color-text-3); text-decoration: line-through; }

.legend { display: flex; flex-wrap: wrap; gap: var(--space-8); font-size: var(--text-12); color: var(--color-text-2); }
.legend__item { display: inline-flex; align-items: center; gap: 6px; }
.legend__swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--color-border); }

/* Choosing a few people out of a long list: a type-ahead, a count of what is
   chosen, and a box that visibly scrolls rather than hiding a hundred rows
   behind an invisible overflow. */
.picker {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  overflow: clip;
}
.picker__search {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8) var(--space-12);
  border-block-end: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-3);
}
.picker__search .input { border: 0; background: transparent; flex: 1; padding-inline: 0; }
.picker__search .input:focus-visible { box-shadow: none; }
.picker__count { white-space: nowrap; }
.picker__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  padding: var(--space-12);
  max-block-size: 260px;
  overflow-y: auto;
  /* An always-visible track: macOS overlay scrollbars only appear mid-gesture,
     which is how a hundred and five of these went unnoticed. */
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-strong) transparent;
}
.picker__option[hidden] { display: none; }
.picker__option[data-suggested] { border-color: var(--color-primary-subtle-border); }
.picker__hint {
  font-size: var(--text-11);
  color: var(--color-text-3);
  padding-inline-start: var(--space-4);
}

.chip--code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-11);
  color: var(--color-text-3);
  background: var(--color-surface-sunken);
  border-color: var(--color-border);
}

/* What one audit entry changed, as "field: was → now". The raw JSON dict was
   being printed to HR, which is a stack trace with better punctuation. */
.change-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: 2px; }
.change-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-8);
  font-size: var(--text-12);
}
.change-list__field { color: var(--color-text-3); min-inline-size: 9em; }
.change-list__was { color: var(--color-text-3); text-decoration: line-through; }
.change-list__now { color: var(--color-text); font-weight: var(--weight-medium); }

/* A calendar day you can ask about. Same box, plus a hint that it is a link. */
a.cal__day--askable { color: inherit; cursor: pointer; }
a.cal__day--askable:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-subtle);
  text-decoration: none;
}

/* The remove control on a hand-added payslip line. Only ever rendered beside
   a line somebody typed, because a calculated one comes straight back. */
.money-line__remove { display: inline-flex; margin-inline-start: var(--space-8); }
.money-line__remove .btn { color: var(--color-text-3); }
.money-line__remove .btn:hover { color: var(--tone-danger-text); }

/* A punch log that wraps rather than being clipped — three facts per line,
   and the third is allowed to fall onto its own row on a narrow phone. */
.punch-list { list-style: none; margin: 0; padding: 0; }
.punch-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-12);
  padding: var(--space-12) var(--space-16);
  border-block-start: 1px solid var(--color-border);
  font-size: var(--text-13);
}
.punch-list__item:first-child { border-block-start: 0; }
.punch-list__what { min-inline-size: 2.5em; color: var(--color-text-2); }
.punch-list__when { color: var(--color-text); white-space: nowrap; }
.punch-list__where { display: flex; align-items: center; gap: var(--space-8); margin-inline-start: auto; }
/* What a remote session was spent on: its own row, however long. */
.punch-list__summary {
  inline-size: 100%;
  margin: 0;
  color: var(--color-text);
  overflow-wrap: anywhere;
}
@media (max-width: 599px) {
  .punch-list__where { margin-inline-start: 0; inline-size: 100%; }
}

/* ── Kanban ─────────────────────────────────────────────────────────────── */

/* Six stages, and the last two are Offer and Hired — the ones a recruiter
   most wants to see. At a fixed 280px they needed 1740px of board, so on a
   1440px screen the board scrolled and those two were simply not there, with
   nothing on screen to say so. Letting the columns share the width instead
   fits all six; below that they still scroll, and a half-shown column is its
   own instruction to keep going. */
.board { display: flex; gap: var(--space-8); overflow-x: auto; padding-block-end: var(--space-8); }
.board__column {
  flex: 1 1 260px;
  min-inline-size: 180px;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-2);
  min-height: 200px;
}
.board__column.is-target { border-color: var(--color-primary); background: var(--color-primary-subtle); }
.board__column.is-blocked { opacity: .45; }
.board__head { display: flex; align-items: center; gap: var(--space-8); padding-inline: var(--space-4); font-size: var(--text-13); font-weight: var(--weight-medium); }
.board__count { margin-inline-start: auto; font-variant-numeric: var(--numeric); color: var(--color-text-3); }
.board__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  box-shadow: var(--shadow-1);
  color: var(--color-text);
  cursor: grab;
}
.board__card:hover { text-decoration: none; color: var(--color-text); border-color: var(--color-border-strong); }
.board__card.is-dragging { opacity: .4; }

/* ── Org chart ──────────────────────────────────────────────────────────── */

.org-tree { list-style: none; margin: 0; padding: 0; }
.org-tree ul { list-style: none; margin: 0; padding-inline-start: var(--space-24); border-inline-start: 1px solid var(--color-border); }
.org-node {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-8);
  margin-block: 2px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-text);
}
.org-node:hover { text-decoration: none; color: var(--color-text); border-color: var(--color-border-strong); }
.org-node__count {
  margin-inline-start: auto;
  padding: 1px 8px;
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  color: var(--color-text-2);
  font-size: 11px;
  font-variant-numeric: var(--numeric);
}

/* ── Auth pages ─────────────────────────────────────────────────────────── */

/* The form side is quiet: a card on the page colour, a faint wash of the
   accent from the top. The brand panel beside it, from 1024px, carries the
   logo and the one sentence that says what this is. No text shadows, no
   imagery; depth comes from one soft shadow under the card. */
.auth {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--color-bg);
}
@media (min-width: 1024px) { .auth { grid-template-columns: minmax(0, 1fr) minmax(420px, 44%); } }

.auth__form-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-24);
  padding: var(--space-16) var(--space-16) var(--space-24);
  background: radial-gradient(120% 60% at 50% 0%, var(--color-primary-subtle), transparent 70%);
}
@media (min-width: 600px) { .auth__form-side { padding: var(--space-24) var(--space-32) var(--space-32); } }

.auth__toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  width: 100%;
}

.auth__card {
  width: 100%;
  max-width: 440px;
  margin-block-end: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
  padding: var(--space-24) var(--space-20);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-dialog);
  background: var(--color-surface);
  box-shadow: var(--shadow-2);
}
@media (min-width: 600px) { .auth__card { margin-block: auto; padding: var(--space-32); } }
.auth__card > .messages { margin-block-end: 0; }

.auth__identity { display: flex; align-items: center; gap: var(--space-12); min-width: 0; }
.auth__names { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.auth__org {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-16);
  font-weight: var(--weight-semibold);
}
.auth__product { font-size: var(--text-12); font-weight: var(--weight-medium); color: var(--color-text-3); }

.auth__heading { display: flex; flex-direction: column; gap: 6px; }
.auth__title { font-size: var(--text-24); font-weight: var(--weight-bold); }
.auth__lead { font-size: var(--text-14); color: var(--color-text-2); }
.auth__form { display: flex; flex-direction: column; gap: var(--space-16); }
.auth__form .btn--comfortable { margin-block-start: var(--space-4); }
.auth__link { align-self: center; font-weight: var(--weight-medium); }
.auth__footer { font-size: var(--text-12); color: var(--color-text-3); }

.auth__brand {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-32);
  padding: var(--space-48) clamp(var(--space-32), 5vw, var(--space-64));
  background: linear-gradient(160deg, var(--color-brand-panel), var(--color-brand-panel-deep));
  color: var(--color-brand-panel-text);
}
@media (min-width: 1024px) { .auth__brand { display: flex; } }
.auth__logo {
  display: grid;
  place-items: center;
  width: 112px;
  height: 128px;
  padding: var(--space-16);
  border-radius: 20px;
  background: var(--color-logo-tile);
  box-shadow: var(--shadow-3);
}
.auth__logo img { width: 100%; height: 100%; object-fit: contain; }
.auth__pitch { display: flex; flex-direction: column; gap: var(--space-12); max-width: 30rem; }
.auth__headline {
  font-size: var(--text-30);
  font-weight: var(--weight-bold);
  line-height: 1.2;
  color: var(--color-brand-panel-text);
  text-wrap: balance;
}
.auth__sub { font-size: var(--text-16); color: var(--color-brand-panel-muted); text-wrap: pretty; }
.auth__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  margin: 0;
  padding: var(--space-20) 0 0;
  border-block-start: 1px solid color-mix(in srgb, var(--color-brand-panel-muted) 25%, transparent);
  list-style: none;
  max-width: 30rem;
  font-size: var(--text-14);
  color: var(--color-brand-panel-muted);
}
.auth__points li { display: flex; align-items: center; gap: var(--space-12); }
.auth__points .icon {
  box-sizing: content-box;
  padding: 7px;
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--color-brand-panel-text) 10%, transparent);
  color: var(--color-brand-panel-text);
}

.password-reveal {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--space-16);
  border: 1px solid var(--color-primary-subtle-border);
  border-radius: var(--radius-card);
  background: var(--color-primary-subtle);
  color: var(--color-nav-active-text);
}
.password-reveal__value {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--text-20);
  letter-spacing: .04em;
  direction: ltr;
  unicode-bidi: isolate;
  word-break: break-all;
}

/* ── Payslip / print ────────────────────────────────────────────────────── */

.money-line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-16);
  padding-block: 6px;
  border-block-end: 1px solid var(--color-border);
  font-size: var(--text-13);
  font-variant-numeric: var(--numeric);
}
.money-line__label { display: flex; align-items: center; gap: var(--space-8); }
.money-line--total {
  padding: 10px var(--space-12);
  margin-block-start: 6px;
  border: 1px solid var(--color-primary-subtle-border);
  border-radius: var(--radius-control);
  background: var(--color-primary-subtle);
  color: var(--color-nav-active-text);
  font-size: var(--text-16);
  font-weight: var(--weight-semibold);
}
.money-line__flag {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--tone-neutral-bg);
  color: var(--tone-neutral-text);
  font-size: 11px;
  font-weight: var(--weight-regular);
}

.watermark {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 1;
  font-size: 120px;
  font-weight: var(--weight-semibold);
  color: var(--tone-danger-text);
  opacity: .08;
  transform: rotate(-30deg);
}

.sheet-a4 {
  width: 210mm;
  min-height: 297mm;
  margin: var(--space-24) auto;
  padding: 16mm 14mm;
  background: #fff;
  color: #111;
  border: 1px solid var(--color-border);
}

@media print {
  [data-print="hide"], .app__header, .sidenav, .tabbar, .page-actions,
  .toolbar, .pagination, .infinite, #toasts, .overlay, .skip-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .app__inner { padding: 0; max-width: none; }
  .card, .table-wrap { border-color: #ccc; break-inside: avoid; }
  .sheet-a4 { width: auto; min-height: 0; margin: 0; padding: 0; border: 0; }
  a { color: inherit; text-decoration: none; }
  @page { size: A4; margin: 14mm; }
}

/* ── Chevron mask, shared by breadcrumbs / steppers / selects ───────────── */

:root {
  --chevron-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  --chevron-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a636f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
[data-theme="dark"] {
  --chevron-bg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a1ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* ── Small corrections the components above depend on ───────────────────── */

/* `hidden` must win over a component's own display rule, or a hidden error
   summary and a hidden bulk bar both stay on screen. */
[hidden] { display: none !important; }

/* The theme toggle shows the theme you would switch *to*. */
.theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-light { display: none; }
[data-theme="dark"] .theme-icon-dark { display: inline-block; }

/* Location status on the check-in screen: a reading is evidence, so an
   imprecise one never wears the same green as a good fix. */
.location-status { display: flex; align-items: center; gap: var(--space-8); font-size: var(--text-13); }
.location-status[data-state="locating"] { color: var(--color-text-3); }
.location-status[data-state="located"] { color: var(--tone-success-text); }
.location-status[data-state="imprecise"] { color: var(--tone-warning-text); }
.location-status[data-state="denied"],
.location-status[data-state="timeout"],
.location-status[data-state="unavailable"] { color: var(--color-text-2); }
.location-status[data-state="off"] { color: var(--color-text-3); }
/* The button is holding the tap while it looks: say so, and say it will send. */
.location-status[data-state="sending"] { color: var(--color-text); font-weight: var(--weight-medium); }

/* ── Stepped form ───────────────────────────────────────────────────────── */
/*
 * One <form>, several panels. The whole record posts in a single request, so
 * a validation error on step 5 cannot lose what was typed on step 1 — which is
 * the failure mode a true server-side wizard has to work hard to avoid.
 *
 * With no JavaScript every panel is visible and the form is the long one it
 * always was; the stepper only ever hides things.
 */
.steps__panel[hidden] { display: none !important; }
.steps__nav { display: flex; align-items: center; gap: var(--space-8); flex-wrap: wrap; }
.steps__count { font-size: var(--text-13); color: var(--color-text-3); font-variant-numeric: var(--numeric); }