/* Birdhouse Management — house style.
   The token blocks below are the Delivery palette verbatim (apps/delivery/
   public/styles.css :root and :root[data-theme="dark"]), trimmed to the tokens
   this shell actually consumes. Add tokens here by copying them from Delivery
   rather than inventing values, so the fleet keeps one palette. */

@font-face {
  font-family: "Roc Grotesk";
  src: url("./assets/fonts/rocgrotesk-regular.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "Roc Grotesk";
  src: url("./assets/fonts/roc-grotesk-medium.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 500;
}

@font-face {
  font-family: "Roc Grotesk";
  src: url("./assets/fonts/rocgrotesk-bold.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Roc Grotesk";
  src: url("./assets/fonts/roc-grotesk-black.woff2") format("woff2");
  font-display: swap;
  font-style: normal;
  font-weight: 900;
}

:root {
  color-scheme: light;
  /* Three control heights and no fourth. */
  --control-height-row: 32px;
  --control-height-default: 40px;
  --control-height-touch: 44px;
  --control-sm: var(--control-height-row);
  --control-md: var(--control-height-default);
  --control-lg: var(--control-height-touch);
  --background: #faf8f2;
  --surface: #f3f0e8;
  --surface-strong: #fffdf7;
  --text: #1c1a17;
  --foreground: var(--text);
  --focus: #114d61;
  --focus-ring: var(--focus);
  --ink: var(--text);
  --muted: #6b665d;
  --muted-strong: #5f5a51;
  --primary: #114d61;
  --primary-foreground: #faf8f2;
  --interactive-accent: var(--primary);
  --primary-soft: #d9e8e8;
  --accent: #e8aa57;
  --danger: #dc2626;
  --line: #ded8cb;
  --success-bg: #eef8f0;
  --success-border: #b7dbc1;
  --success-text: #276749;
  --warning-bg: #fff7ed;
  --warning-border: #fed7aa;
  --warning-text: #9a3412;
  --st-neutral: #6b665d;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  /* AVATAR-STANDARD (owner, 2026-08-17), app-wide: the user avatar is always
     round, dark blue with lighter initials, and inverse in dark mode. Its own
     token pair on purpose — it must not drift with the dark --primary repaint. */
  --avatar-surface: #114d61;
  --avatar-ink: #d9e8e8;
  --elev-1: 0 1px 2px rgba(28, 26, 23, 0.07);
  --elev-2: 0 8px 20px rgba(28, 26, 23, 0.11);
  --line-soft: #ebe6db;
  --surface-translucent: rgba(250, 248, 242, 0.72);
  --status-red: #b42318;
  --status-amber: #9a5808;
  --status-green: #17694b;
  --status-red-fill: color-mix(in srgb, var(--status-red) 13%, var(--surface));
  --status-red-line: color-mix(in srgb, var(--status-red) 46%, var(--line));
  --status-amber-fill: color-mix(in srgb, var(--status-amber) 15%, var(--surface));
  --status-amber-line: color-mix(in srgb, var(--status-amber) 48%, var(--line));
  --status-green-fill: color-mix(in srgb, var(--status-green) 13%, var(--surface));
  --status-green-line: color-mix(in srgb, var(--status-green) 46%, var(--line));
  --danger-bg: #fee2e2;
  --danger-border: #fecaca;
  --danger-text: #852d25;
  --row-tint: rgba(28, 26, 23, 0.03);
  --agg-tint: rgba(17, 77, 97, 0.08);
  --hours-billable: #17694b;
  --hours-internal: #b98a2e;
  --hours-warranty: #a4633a;
  --hours-planned: #9bb5bd;
  --hours-rest: #ded8cb;
  --leave-vacation: #7a5aa8;
  --leave-tvt: #d9b24b;
  --dur-fast: 150ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --avatar-surface: #d9e8e8;
  --avatar-ink: #0b2e3b;
  --background: #0b2e3b;
  --surface: #0f3a4a;
  --surface-strong: #134757;
  --text: #f0ede6;
  --foreground: var(--text);
  --focus: #f0be72;
  --focus-ring: var(--focus);
  --ink: var(--text);
  --muted: #90b5c3;
  --muted-strong: #b7d6e2;
  /* DARK-PRIMARY-TEAL (owner, 2026-08-17): dark --primary is teal, not amber;
     amber stays the restrained interactive/status accent. */
  --primary: #66d4ec;
  --primary-foreground: #0b2e3b;
  --interactive-accent: #f0be72;
  --primary-soft: #134757;
  --accent: #5cc0dc;
  --danger: #fca5a5;
  --line: #1a5268;
  --success-bg: color-mix(in srgb, #2f8a62 24%, var(--surface));
  --success-border: color-mix(in srgb, #2f8a62 54%, var(--line));
  --success-text: #a7f3d0;
  --warning-bg: color-mix(in srgb, #e8aa57 22%, var(--surface));
  --warning-border: color-mix(in srgb, #e8aa57 58%, var(--line));
  --warning-text: #ffd994;
  --st-neutral: #90b5c3;
  --line-soft: #163e4f;
  --surface-translucent: color-mix(in srgb, var(--surface) 76%, transparent);
  --status-red: #fca5a5;
  --status-amber: #f2a66e;
  --status-green: #7fd8b8;
  --danger-bg: color-mix(in srgb, #dc2626 24%, var(--surface));
  --danger-border: color-mix(in srgb, #dc2626 52%, var(--line));
  --danger-text: #ffc4bd;
  --row-tint: rgba(240, 237, 230, 0.042);
  --agg-tint: rgba(199, 229, 237, 0.1);
  --hours-billable: #7fd8b8;
  --hours-internal: #e2c07a;
  --hours-warranty: #d59a71;
  --hours-planned: #4f8fa3;
  --hours-rest: #17475a;
  --leave-vacation: #b79cf0;
  --leave-tvt: #e2c07a;
  --elev-1: 0 1px 2px rgba(0, 0, 0, 0.28);
  --elev-2: 0 8px 20px rgba(0, 0, 0, 0.34);
}

/* A viewer who never chose a theme follows the system. An explicit choice is
   stamped on <html data-theme>, which wins in both directions. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --avatar-surface: #d9e8e8;
    --avatar-ink: #0b2e3b;
    --background: #0b2e3b;
    --surface: #0f3a4a;
    --surface-strong: #134757;
    --text: #f0ede6;
    --focus: #f0be72;
    --muted: #90b5c3;
    --muted-strong: #b7d6e2;
    --primary: #66d4ec;
    --primary-foreground: #0b2e3b;
    --interactive-accent: #f0be72;
    --primary-soft: #134757;
    --accent: #5cc0dc;
    --danger: #fca5a5;
    --line: #1a5268;
    --success-bg: color-mix(in srgb, #2f8a62 24%, var(--surface));
    --success-border: color-mix(in srgb, #2f8a62 54%, var(--line));
    --success-text: #a7f3d0;
    --warning-bg: color-mix(in srgb, #e8aa57 22%, var(--surface));
    --warning-border: color-mix(in srgb, #e8aa57 58%, var(--line));
    --warning-text: #ffd994;
    --line-soft: #163e4f;
    --surface-translucent: color-mix(in srgb, var(--surface) 76%, transparent);
    --status-red: #fca5a5;
    --status-amber: #f2a66e;
    --status-green: #7fd8b8;
    --danger-bg: color-mix(in srgb, #dc2626 24%, var(--surface));
    --danger-border: color-mix(in srgb, #dc2626 52%, var(--line));
    --danger-text: #ffc4bd;
    --row-tint: rgba(240, 237, 230, 0.042);
    --agg-tint: rgba(199, 229, 237, 0.1);
    --hours-billable: #7fd8b8;
    --hours-internal: #e2c07a;
    --hours-warranty: #d59a71;
    --hours-planned: #4f8fa3;
    --hours-rest: #17475a;
    --leave-vacation: #b79cf0;
    --leave-tvt: #e2c07a;
    --st-neutral: #90b5c3;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font-family: "Roc Grotesk", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
}

button {
  font: inherit;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.skip-link {
  left: -9999px;
  position: absolute;
  top: 0;
  z-index: 100;
}

.skip-link:focus {
  align-items: center;
  background: var(--background);
  border: 2px solid var(--focus-ring);
  border-radius: var(--radius-md);
  color: var(--text);
  display: inline-flex;
  left: 8px;
  min-height: 44px;
  padding: 12px 16px;
  top: 8px;
  width: auto;
}

.shell {
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── Topbar ─────────────────────────────────────────────────────
   D-1 D1-A-005/mk-new-topbar: shell chrome is 64px on every breakpoint. */
.topbar {
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(180px, auto) minmax(0, 1fr) auto;
  min-height: 64px;
  padding: 10px 20px;
}

.product-lockup {
  align-items: baseline;
  display: flex;
  gap: 10px;
  min-width: 0;
  position: relative;
}

.product-name {
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.app-switcher,
.user-menu {
  position: relative;
}

/* WORDMARK-PLAIN-NO-CHEVRON (owner, 2026-08-17): the wordmark is a plain word,
   but it stays a button so the switcher remains reachable; aria-haspopup keeps
   that announced without a glyph being drawn. */
.app-switcher-button {
  align-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--interactive-accent);
  cursor: pointer;
  display: flex;
  gap: 7px;
  min-height: var(--control-sm);
  padding: 0 8px;
}

.app-switcher-button:hover,
.app-switcher-button[aria-expanded="true"] {
  background: var(--background);
  border-color: var(--line);
}

.app-switcher-button [data-current-app] {
  font-size: 16px;
  font-weight: 900;
}

.app-menu,
.user-menu-panel {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-2);
  display: grid;
  gap: 6px;
  min-width: 230px;
  padding: 8px;
  position: absolute;
  top: calc(100% + 10px);
  z-index: 20;
}

:root[data-theme="dark"] .app-menu,
:root[data-theme="dark"] .user-menu-panel {
  background: color-mix(in srgb, var(--surface) 86%, var(--background));
}

.app-menu[hidden],
.user-menu-panel[hidden] {
  display: none;
}

/* Left-anchored and clamped to the viewport: right-anchoring clips the panel's
   left edge, because the switcher button sits near the left of the bar. */
.app-menu {
  inline-size: 340px;
  left: 0;
  max-inline-size: min(340px, calc(100vw - 24px));
}

.topbar > .user-menu .user-menu-panel {
  left: 0;
  right: auto;
}

/* GD-03 disclosure: switching apps is not seamless, and the panel says so. */
.app-switcher-cost {
  color: var(--muted);
  font-size: 11px;
  margin: 0;
  padding: 0 10px 6px;
}

.app-menu-group-heading {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin: 6px 0 0;
  padding: 10px 10px 2px;
  text-transform: uppercase;
}

.app-option,
.user-menu-item {
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  text-align: left;
  text-decoration: none;
}

.app-option {
  align-items: center;
  cursor: pointer;
  gap: 10px;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  inline-size: 100%;
}

.app-option[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.62;
}

.app-option[aria-current="true"] {
  background: var(--primary-soft);
}

.app-option:hover,
.user-menu-item:hover {
  background: var(--surface);
}

.app-option-label {
  display: grid;
  gap: 2px;
  min-inline-size: 0;
}

.app-option-label > strong {
  overflow-wrap: anywhere;
}

.glyph {
  align-items: center;
  background: var(--primary);
  border-radius: var(--radius-sm);
  color: var(--background);
  display: inline-flex;
  font-weight: 900;
  justify-content: center;
  min-height: var(--control-sm);
}

/* Status pill on a switcher row (round-2 mockup frame 3 `.opt`/`.st`). */
.st {
  align-items: center;
  background: color-mix(in srgb, var(--st-neutral) 13%, var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  color: var(--st-neutral);
  display: inline-flex;
  font-size: 11px;
  font-weight: 700;
  gap: 5px;
  line-height: 1;
  min-height: 22px;
  padding: 0 8px;
  white-space: nowrap;
}

.st::before {
  background: currentColor;
  border-radius: var(--radius-pill);
  content: "";
  flex: 0 0 auto;
  height: 6px;
  width: 6px;
}

.st-live {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}

.st-build {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}

.st-cur {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--primary);
}

/* Hollow dot: "Gepland" is a neutral fact, not a warning. */
.st-off {
  border-color: color-mix(in srgb, var(--st-neutral) 46%, var(--line));
}

.st-off::before {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

.user-menu-panel > span {
  display: block;
  padding: 4px 10px;
  text-align: left;
}

.user-menu-panel > span:first-of-type {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
}

.user-menu-panel > span:nth-of-type(2) {
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 8px;
  padding-bottom: 10px;
}

.user-menu-item {
  cursor: pointer;
  inline-size: 100%;
}

.user-menu-item.logout {
  color: var(--danger);
}

.nav {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  min-width: 0;
}

@media (min-width: 1100px) {
  .nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-block: 3px;
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }
}

.nav a {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-sizing: border-box;
  color: var(--muted);
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  min-height: var(--control-md);
  padding: 8px 10px;
  text-decoration: none;
  white-space: nowrap;
}

.nav a:hover {
  background: var(--background);
  color: var(--interactive-accent);
}

/* mk-new-dnav: the active destination carries a soft primary fill, not just a
   text colour against a background it cannot be told apart from. */
.nav a[aria-current="page"] {
  background: var(--primary-soft);
  color: var(--interactive-accent);
}

.topbar-tools {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  min-width: 0;
}

.header-logo {
  align-items: center;
  display: inline-flex;
  height: 34px;
  width: 34px;
}

.header-logo img {
  display: block;
  height: 34px;
  object-fit: contain;
  object-position: center;
  width: 34px;
}

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  box-sizing: border-box;
  cursor: pointer;
  display: inline-flex;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  gap: 8px;
  justify-content: center;
  line-height: 1;
  min-height: var(--control-md);
  padding: 0 14px;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    color var(--dur-fast) var(--ease);
}

.btn.sm {
  font-size: 13px;
  min-height: var(--control-sm);
  padding: 0 10px;
}

.btn.lg {
  font-size: 16px;
  min-height: var(--control-lg);
  padding: 0 18px;
}

.btn.primary {
  background: var(--interactive-accent);
  border-color: var(--interactive-accent);
  color: var(--primary-foreground);
  font-weight: 700;
}

.btn.secondary {
  background: var(--background);
  border-color: var(--line);
  color: var(--primary);
  font-weight: 700;
}

.btn.primary:hover {
  background: color-mix(in srgb, var(--interactive-accent) 86%, var(--text));
}

.btn.secondary:hover {
  background: var(--surface);
  border-color: var(--line);
}

.btn.icon {
  padding: 0;
  width: var(--control-md);
}

.btn.icon:hover,
.btn.icon[aria-expanded="true"] {
  background: var(--interactive-accent);
  border-color: var(--interactive-accent);
  color: var(--background);
}

/* AVATAR-STANDARD: round, dark blue, lighter initials; hover is depth, not a
   repaint, so the avatar never changes identity mid-interaction. */
.user-menu > .btn.icon {
  background: var(--avatar-surface);
  border-color: var(--avatar-surface);
  border-radius: var(--radius-pill);
  color: var(--avatar-ink);
  font-weight: 900;
  position: relative;
}

.user-menu > .btn.icon:hover,
.user-menu > .btn.icon[aria-expanded="true"] {
  background: color-mix(in srgb, var(--avatar-surface) 86%, var(--text));
  border-color: color-mix(in srgb, var(--avatar-surface) 86%, var(--text));
  color: var(--avatar-ink);
}

.btn[hidden] {
  display: none;
}

/* ── Workspace ──────────────────────────────────────────────── */
.workspace {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr);
  padding: 28px 32px 36px;
}

.main {
  min-width: 0;
}

.empty-state {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-1);
  display: grid;
  gap: 8px;
  padding: 40px 28px;
}

.empty-state h1 {
  font-size: 20px;
  font-weight: 900;
  margin: 0;
}

.empty-state p {
  color: var(--muted-strong);
  margin: 0;
  max-width: 62ch;
}

/* The signed-out and no-access pages: no chrome, because neither state has a
   session behind it to put in the chrome. */
.standalone {
  align-content: start;
  display: grid;
  gap: 12px;
  justify-items: start;
  margin: 0 auto;
  max-width: 560px;
  min-height: 100dvh;
  padding: 18vh 24px 24px;
}

/* An author `display` beats the UA stylesheet's [hidden] { display: none }, so
   every element this file gives a display value has to restate it or the hidden
   state stops hiding — caught with both standalone pages painted at once. */
.standalone[hidden] {
  display: none;
}

.standalone-logo {
  height: 48px;
  width: 48px;
}

.standalone h1 {
  font-size: 24px;
  font-weight: 900;
  margin: 0;
}

.standalone p {
  color: var(--muted-strong);
  margin: 0 0 8px;
}

@media (max-width: 1099.98px) {
  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    row-gap: 8px;
  }

  .nav {
    grid-column: 1 / -1;
    overflow-x: auto;
  }

  .workspace {
    padding: 20px 16px 28px;
  }

  .standalone {
    padding-top: 12vh;
  }
}

/* ══ Product surfaces ════════════════════════════════════════════
   The Management screens themselves (M-1 Overzicht, M-2 Medewerker,
   M-6 Instellingen). Values are the binding mockup's
   (2026-09-12-management-app/mockups/MOCKUPS-MANAGEMENT-2026-09-12.html,
   frames #f1, #f1m, #f2, #f6) — copied, not reinvented. Status is never
   carried by colour alone: every coloured figure, bar and pill states its
   number or its label in text beside it. */

.main {
  font-variant-numeric: tabular-nums;
}

/* ── Context bar ────────────────────────────────────────────── */
.ctx {
  align-items: center;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 48px;
  padding: 6px 24px;
}

.ctx .spacer {
  flex: 1;
}

.picker {
  position: relative;
}

.pbtn {
  align-items: center;
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  gap: 10px;
  min-height: 36px;
  padding: 0 12px;
}

.pbtn-static {
  cursor: default;
}

.pbtn small {
  color: var(--muted);
  font-weight: 400;
}

.pbtn .car {
  color: var(--muted);
  font-size: 11px;
}

.picker-menu {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-2);
  display: grid;
  gap: 2px;
  left: 0;
  max-height: 60vh;
  max-inline-size: min(320px, calc(100vw - 24px));
  min-inline-size: 260px;
  overflow-y: auto;
  padding: 8px;
  position: absolute;
  top: calc(100% + 8px);
  z-index: 30;
}

.picker-menu[hidden] {
  display: none;
}

.picker-group {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  margin: 8px 0 2px;
  padding: 0 8px;
  text-transform: uppercase;
}

.picker-option {
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
  display: grid;
  gap: 1px;
  min-height: var(--control-sm);
  padding: 6px 8px;
  text-align: left;
  width: 100%;
}

.picker-option small {
  color: var(--muted);
  font-size: 11.5px;
}

.picker-option:hover {
  background: var(--surface);
}

.picker-option[aria-current="true"] {
  background: var(--primary-soft);
  color: var(--interactive-accent);
}

.chip {
  align-items: center;
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  display: inline-flex;
  font-size: 12px;
  gap: 6px;
  min-height: 26px;
  padding: 3px 8px;
  white-space: nowrap;
}

.pill {
  align-items: center;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  display: inline-flex;
  font-size: 12px;
  gap: 6px;
  min-height: 26px;
  padding: 2px 9px;
  white-space: nowrap;
}

.pill.sm {
  font-size: 11.5px;
  min-height: 22px;
  padding: 0 8px;
}

.pill.success {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-text);
}

.pill.warning {
  background: var(--warning-bg);
  border-color: var(--warning-border);
  color: var(--warning-text);
}

.pill.danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger-text);
}

.pill.plain {
  color: var(--muted);
}

.pill .dot {
  background: currentColor;
  border-radius: var(--radius-pill);
  display: inline-block;
  height: 7px;
  width: 7px;
}

/* ── Page frame ─────────────────────────────────────────────── */
.workspace:has(.page) {
  padding: 0;
}

.page {
  padding: 24px 24px 40px;
}

.eyebrow {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.ph {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.ph h1 {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 4px 0 0;
}

.ph .sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
  max-width: 80ch;
}

.ph .acts {
  display: flex;
  gap: 8px;
}

.btn.quiet {
  background: transparent;
  border-color: transparent;
  color: var(--primary);
  padding: 0 6px;
}

.data-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.sec {
  margin-top: 30px;
}

.sec-h {
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
}

.sec-h h2 {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.01em;
  margin: 0;
}

.sec-h span {
  color: var(--muted);
  font-size: 13px;
}

.two {
  align-items: start;
  display: grid;
  gap: 28px 40px;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

/* M-2 sits a touch tighter under the figure strip than M-1's sections do. */
.two-employee {
  margin-top: 26px;
}

/* The context-bar buttons carry their glyph and their label as separate spans,
   so the label can shrink on a phone while the glyph keeps its size. */
.pbtn-glyph {
  flex: none;
  font-size: 13px;
  line-height: 1;
}

.pbtn-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hint {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  margin: 8px 0 0;
}

.hint b {
  color: var(--text);
}

.hint.limitation {
  border-left: 2px solid var(--warning-border);
  padding-left: 10px;
}

.hint.notice {
  background: var(--warning-bg);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-md);
  color: var(--warning-text);
  padding: 8px 12px;
}

/* ── Definition drawer on a figure ──────────────────────────── */
.defbox {
  display: inline-block;
  position: relative;
}

.def {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 10px;
  font-weight: 700;
  height: 16px;
  justify-content: center;
  line-height: 1;
  list-style: none;
  vertical-align: 1px;
  width: 16px;
}

.def::-webkit-details-marker {
  display: none;
}

.defbox[open] .def {
  background: var(--primary-soft);
  border-color: var(--primary);
  color: var(--interactive-accent);
}

.defdrawer {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-2);
  column-gap: 12px;
  display: grid;
  font-size: 12px;
  grid-template-columns: auto minmax(0, 1fr);
  inline-size: 300px;
  left: 0;
  margin: 0;
  max-inline-size: calc(100vw - 32px);
  padding: 10px 12px;
  position: absolute;
  row-gap: 4px;
  text-transform: none;
  top: calc(100% + 6px);
  z-index: 25;
}

.defdrawer dt {
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0;
}

.defdrawer dd {
  color: var(--text);
  font-weight: 400;
  letter-spacing: 0;
  margin: 0;
}

/* ── Hero: the revenue forecast ledger ──────────────────────── */
.hero {
  align-items: start;
  background: var(--surface);
  border-block: 1px solid var(--line);
  display: grid;
  gap: 20px 48px;
  grid-template-columns: 360px minmax(0, 1fr);
  margin: 0 -24px;
  padding: 20px 24px;
}

.hero .big {
  font-size: 46px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 6px 0 8px;
}

.hero .band {
  color: var(--muted-strong);
  font-size: 13.5px;
  line-height: 1.7;
}

.hero .band b {
  color: var(--text);
  font-weight: 700;
}

.ledger {
  column-gap: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
}

.ledger > span {
  align-items: baseline;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  font-size: 13.5px;
  gap: 8px;
  padding: 7px 0;
}

.ledger > span small {
  color: var(--muted);
  display: block;
  font-size: 11.5px;
}

.ledger > span.n {
  font-weight: 700;
  justify-content: flex-end;
  white-space: nowrap;
}

.ledger > span.sum {
  border-bottom: 0;
  border-top: 2px solid var(--text);
  font-size: 15px;
  font-weight: 900;
  padding-top: 9px;
}

.ledger .op {
  color: var(--muted);
  display: inline-block;
  font-weight: 400;
  width: 12px;
}

.hero .note {
  color: var(--muted);
  font-size: 12.5px;
  grid-column: 1 / -1;
  line-height: 1.5;
  max-width: 120ch;
}

/* ── Signal band ────────────────────────────────────────────── */
.signals {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: grid;
  gap: 0;
  overflow: hidden;
}

.sig {
  background: var(--surface-translucent);
  border-top: 1px solid var(--line);
}

.sig:first-child {
  border-top: 0;
}

.sig summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 14px;
  grid-template-columns: 12px auto minmax(0, 1fr) auto 18px;
  list-style: none;
  padding: 11px 16px;
}

.sig summary::-webkit-details-marker {
  display: none;
}

.sig .sd {
  border-radius: var(--radius-pill);
  height: 10px;
  width: 10px;
}

.sig.red .sd {
  background: var(--status-red);
}

.sig.amber .sd {
  background: var(--status-amber);
}

.sig.info .sd {
  background: var(--primary);
}

.sig .cnt {
  font-size: 20px;
  font-weight: 900;
  min-width: 44px;
  white-space: nowrap;
}

.sig .t b {
  display: block;
  font-weight: 700;
}

.sig .t small {
  color: var(--muted);
  font-size: 12.5px;
}

.sig .own {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.sig .own b {
  color: var(--text);
  display: block;
  font-weight: 700;
}

.sig .chev {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
}

.sig[open] .chev {
  transform: rotate(90deg);
}

.sig .body {
  padding: 0 16px 14px 82px;
}

/* ── Figure strip ───────────────────────────────────────────── */
.figs {
  border-bottom: 1px solid var(--line);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 22px;
}

.fig {
  border-left: 1px solid var(--line-soft);
  padding: 14px 16px;
}

.fig:first-child {
  border-left: 0;
  padding-left: 0;
}

.fig .v {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-top: 4px;
}

.fig .v.bad {
  color: var(--status-red);
}

.fig .v.warn {
  color: var(--status-amber);
}

.fig .v.ok {
  color: var(--status-green);
}

.fig .s {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
  margin-top: 4px;
}

.fig .s b {
  color: var(--text);
  font-weight: 600;
}

/* ── Tables (pattern X-2: hairlines, zebra) ─────────────────── */
table.t {
  border-collapse: collapse;
  font-size: 13.5px;
  width: 100%;
}

table.t th {
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  padding: 8px 10px;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

table.t td {
  border-bottom: 1px solid var(--line-soft);
  padding: 9px 10px;
  vertical-align: middle;
}

table.t tbody tr:nth-child(even) td {
  background: var(--row-tint);
}

table.t td.n,
table.t th.n {
  text-align: right;
  white-space: nowrap;
}

table.t td.n small {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 400;
}

table.t td.bad {
  color: var(--status-red);
  font-weight: 700;
}

table.t td.muted {
  color: var(--muted);
}

table.t tr.tot td {
  background: var(--agg-tint);
  border-top: 2px solid var(--text);
  font-weight: 900;
}

table.t tr.grp td {
  background: var(--surface);
  color: var(--primary);
  font-size: 12.5px;
  font-weight: 700;
}

table.t td.sub {
  color: var(--muted-strong);
  padding-left: 24px;
}

table.t .who {
  font-weight: 700;
}

table.t .who a {
  color: inherit;
  text-decoration: none;
}

table.t .who a:hover {
  text-decoration: underline;
}

table.t .who small {
  color: var(--muted);
  display: block;
  font-size: 11.5px;
  font-weight: 400;
}

table.t td small {
  color: var(--muted);
  display: block;
  font-size: 11.5px;
}

tr.click {
  cursor: pointer;
}

tr.click:hover td {
  background: var(--primary-soft) !important;
}

.flag {
  color: var(--status-amber);
}

.bar {
  background: color-mix(in srgb, var(--line) 70%, var(--background));
  border-radius: var(--radius-pill);
  height: 10px;
  min-width: 120px;
  overflow: visible;
  position: relative;
}

.bar > i {
  background: var(--primary);
  border-radius: var(--radius-pill);
  display: block;
  height: 100%;
}

.bar > i.ok {
  background: var(--status-green);
}

.bar > i.bad {
  background: var(--status-red);
}

/* The norm sits at 40% of the bar, so 2,5 × norm fills it exactly. */
.bar .norm {
  background: var(--text);
  bottom: -4px;
  left: 40%;
  position: absolute;
  top: -4px;
  width: 2px;
}

/* ── Charts ─────────────────────────────────────────────────── */
svg.chart {
  display: block;
  height: auto;
  overflow: visible;
  width: 100%;
}

svg.chart text {
  fill: var(--muted);
  font-family: inherit;
  font-size: 11px;
}

svg.chart text.normlabel {
  fill: var(--status-amber);
}

svg.chart line.grid {
  stroke: var(--line-soft);
}

svg.chart line.norm {
  stroke: var(--status-amber);
  stroke-dasharray: 4 4;
}

svg.chart path.trend {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2;
}

svg.chart circle.pt {
  fill: var(--primary);
}

/* ── Settings ───────────────────────────────────────────────── */
.set {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 14px 40px;
  grid-template-columns: 280px minmax(0, 1fr);
  padding: 18px 0;
}

.set h3 {
  font-size: 15px;
  font-weight: 900;
  margin: 0;
}

.set .hint {
  margin-top: 4px;
}

.fields {
  display: grid;
  gap: 12px 20px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.field label {
  color: var(--muted-strong);
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 4px;
}

.field .in,
.field .sel {
  align-items: center;
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: inline-flex;
  font-weight: 700;
  gap: 6px;
  min-height: 36px;
  min-width: 120px;
  padding: 0 10px;
}

.field .in:focus-within,
.field .sel:focus-within {
  border-color: var(--focus-ring);
}

.field .in input,
.field .sel select {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
  min-width: 0;
  outline: none;
  padding: 0;
  width: 100%;
}

.field .in input:disabled,
.field .sel select:disabled {
  color: var(--muted-strong);
  cursor: not-allowed;
}

/* A control a reader cannot use must not look like one they can. */
.btn:disabled,
.btn[disabled] {
  cursor: not-allowed;
  filter: grayscale(0.6);
  opacity: 0.55;
}

.field .in small {
  color: var(--muted);
  font-weight: 400;
}

.field .in.pair {
  gap: 8px;
}

.field .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.savebar {
  align-items: center;
  background: var(--surface);
  border-top: 1px solid var(--line);
  bottom: 0;
  display: flex;
  gap: 10px;
  margin: 24px -24px -40px;
  padding: 12px 24px;
  position: sticky;
}

.savebar .hint {
  margin: 0 0 0 auto;
}

/* ── Loading skeleton ───────────────────────────────────────── */
.skeleton {
  display: grid;
  gap: 12px;
  padding: 28px 24px;
}

.skeleton-label {
  color: var(--muted);
  margin: 0;
}

.skeleton-bar {
  background: color-mix(in srgb, var(--line) 70%, var(--background));
  border-radius: var(--radius-sm);
  height: 14px;
  width: 40%;
}

.skeleton-bar.wide {
  height: 42px;
  width: 70%;
}

.skeleton-bar.narrow {
  width: 22%;
}

/* ── Mobile (mockup frame #f1m) ─────────────────────────────── */
.tabbar {
  background: var(--surface);
  border-top: 1px solid var(--line);
  bottom: 0;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  padding: 6px 4px 10px;
  position: sticky;
}

.tabbar a {
  color: var(--muted);
  display: grid;
  font-size: 10.5px;
  font-weight: 700;
  gap: 3px;
  justify-items: center;
  padding: 4px 0;
  text-align: center;
  text-decoration: none;
}

.tabbar a[aria-current="page"] {
  color: var(--interactive-accent);
}

.tabbar a i {
  border: 1.5px solid currentColor;
  border-radius: var(--radius-sm);
  display: block;
  height: 22px;
  width: 22px;
}

.mobile-only {
  display: none;
}

@media (max-width: 1099.98px) {
  .two {
    grid-template-columns: minmax(0, 1fr);
  }

  .figs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .ctx {
    padding: 6px 14px;
  }

  .page {
    padding: 16px 14px 24px;
  }

  .hero {
    grid-template-columns: minmax(0, 1fr);
    margin: 0 -14px;
    padding: 16px 14px;
  }

  .hero .big {
    font-size: 38px;
  }

  /* The ledger's note drops under its label instead of squeezing a third
     column out of a 390px screen. */
  .ledger > span {
    flex-wrap: wrap;
  }

  .ledger > span small {
    flex-basis: 100%;
  }

  .figs {
    grid-template-columns: 1fr 1fr;
  }

  .fig {
    border-top: 1px solid var(--line-soft);
    padding: 12px 8px 12px 10px;
  }

  .fig:nth-child(-n + 2) {
    border-top: 0;
  }

  .fig:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }

  .fig .v {
    font-size: 22px;
  }

  .sig summary {
    grid-template-columns: 10px auto minmax(0, 1fr) 14px;
  }

  .sig .own {
    display: none;
  }

  .sig .body {
    padding-left: 16px;
  }

  .set {
    grid-template-columns: minmax(0, 1fr);
  }

  .savebar {
    margin: 24px -14px -24px;
    padding: 12px 14px;
  }

  .tabbar {
    display: grid;
  }

  .mobile-only {
    display: block;
  }

  /* A table on a phone becomes a label/value block per row, so nothing has to
     scroll sideways to be read. */
  table.t.stacked thead {
    display: none;
  }

  table.t.stacked tr {
    border-bottom: 1px solid var(--line);
    display: grid;
    gap: 2px;
    grid-template-columns: minmax(0, 1fr);
    padding: 8px 0;
  }

  table.t.stacked td {
    background: none !important;
    border: 0;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 2px 0;
  }

  table.t.stacked td::before {
    color: var(--muted);
    content: attr(data-label);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  table.t.stacked td.who,
  table.t.stacked tr.grp td,
  table.t.stacked tr.tot td:first-child {
    font-weight: 700;
    grid-column: 1 / -1;
  }

  /* The bar keeps its own line and takes the width the label leaves. */
  table.t.stacked td .bar {
    flex: 1;
    min-width: 0;
  }

  /* The top bar's nav duplicates the tab bar on a phone; the tab bar wins. */
  .topbar .nav {
    display: none;
  }

  table.t.stacked td.who::before,
  table.t.stacked tr.grp td::before {
    content: none;
  }
}

/* ── Inzet & Projecten (trein 2) ── */

/* Two tokens the first train did not need: the running week's column tint and
   the leave colours the hatch borrows. Copied from Delivery, like the rest. */
:root {
  --col-now: rgba(17, 77, 97, 0.055);
}

:root[data-theme="dark"] {
  --col-now: rgba(199, 229, 237, 0.07);
}

/* ── Intern & verlof, Instellingen (trein 2) ── */

/* The two leave colours the shell did not need yet, copied from Delivery's
   palette exactly like the ones above them. */
:root {
  --leave-holiday: #ded8cb;
  --leave-other: #114d61;
  --leave-sick: #b42318;
}

:root[data-theme="dark"] {
  --leave-holiday: #1a5268;
  --leave-other: #66d4ec;
  --leave-sick: #fca5a5;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --col-now: rgba(199, 229, 237, 0.07);
    --leave-holiday: #1a5268;
    --leave-other: #66d4ec;
    --leave-sick: #fca5a5;
  }
}

/* Two segmented controls plus an export button do not fit on one line of a
   phone; the first train's single button never had to wrap. */
.ph .acts {
  flex-wrap: wrap;
}

/* Segmented control (mockup frames #f3 and #f5). */
.seg {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: inline-flex;
  gap: 2px;
  padding: 2px;
}

.seg button {
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  min-height: 28px;
  padding: 0 10px;
}

.seg button[aria-pressed="true"] {
  background: var(--primary-soft);
  color: var(--primary);
}

/* ── M-3 Inzet: the matrix ──────────────────────────────────── */
.mwrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

table.mx {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  min-width: 100%;
}

table.mx th,
table.mx td {
  border-bottom: 1px solid var(--line-soft);
  padding: 0;
  text-align: center;
  white-space: nowrap;
}

table.mx thead th {
  background: var(--background);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 8px 4px;
  position: sticky;
  top: 0;
  z-index: 2;
}

table.mx thead th span {
  display: block;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
}

table.mx th.nm {
  background: var(--background);
  border-right: 1px solid var(--line);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  left: 0;
  min-width: 150px;
  padding: 6px 12px;
  position: sticky;
  text-align: left;
  z-index: 3;
}

table.mx thead th.nm {
  z-index: 4;
}

table.mx th.nm a {
  color: inherit;
  text-decoration: none;
}

table.mx th.nm a:hover {
  text-decoration: underline;
}

table.mx th.now,
table.mx td.now {
  background: var(--col-now);
}

td.mc {
  height: 44px;
  min-width: 58px;
  overflow: hidden;
  position: relative;
}

/* The cell's button fills it, so the whole cell is the target while the table
   keeps its cell semantics. */
.mcell {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  display: block;
  font: inherit;
  height: 100%;
  padding: 2px 4px;
  position: relative;
  width: 100%;
  z-index: 1;
}

.mcell:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
}

td.mc .d {
  display: block;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
  position: relative;
  z-index: 1;
}

td.mc .g {
  display: block;
  font-size: 10px;
  line-height: 1.2;
  opacity: 0.8;
  position: relative;
  z-index: 1;
}

/* A name that acts as a button but reads as a name. */
.linkbtn {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0;
  text-align: left;
}

.linkbtn:hover {
  text-decoration: underline;
}

select:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

td.mc .g.muted {
  color: var(--muted);
  opacity: 1;
}

/* Absence weeks are hatched as well as tinted: never colour alone. */
td.mc.afw::before {
  background: repeating-linear-gradient(
    135deg,
    transparent 0 4px,
    color-mix(in srgb, var(--text) 26%, transparent) 4px 5px
  );
  content: "";
  inset: 0;
  opacity: 0.55;
  position: absolute;
  z-index: 0;
}

td.mc.out {
  opacity: 0.3;
}

td.mc.uit {
  opacity: 0.45;
}

td.mc.sel {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

td.mtot,
th.mtot {
  background: var(--background);
  border-left: 2px solid var(--line);
  font-weight: 900;
  min-width: 76px;
  padding: 0 10px;
  text-align: right;
}

td.mtot .g {
  color: var(--muted);
  display: block;
  font-size: 10.5px;
  font-weight: 400;
}

td.mstr,
th.mstr {
  background: var(--background);
  border-left: 1px solid var(--line-soft);
  min-width: 126px;
  padding: 0 10px;
}

tr.mteam th.nm,
tr.mteam td {
  background: var(--agg-tint);
  border-top: 2px solid var(--text);
  font-weight: 900;
}

.mleg {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 6px 14px;
  margin: 10px 0 0;
}

.mleg .rampwrap {
  align-items: center;
  display: inline-flex;
  gap: 8px;
}

.mleg .ramp {
  display: flex;
  gap: 2px;
}

.mleg .ramp i {
  border: 1px solid var(--line);
  border-radius: 2px;
  display: block;
  height: 11px;
  width: 16px;
}

.mhatch {
  background: repeating-linear-gradient(
    135deg,
    var(--background) 0 4px,
    color-mix(in srgb, var(--text) 26%, transparent) 4px 5px
  );
  border: 1px solid var(--line);
  border-radius: 3px;
  height: 15px;
  width: 26px;
}

/* The compact per-week table a phone gets instead of the matrix. */
.mx-mobile {
  display: none;
}

.field-inline {
  align-items: center;
  display: flex;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
}

.field-inline .sel {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: inline-flex;
  min-height: var(--control-height-row);
  padding: 0 6px;
}

.field-inline select {
  background: transparent;
  border: 0;
  font-weight: 600;
  min-height: var(--control-height-row);
}

/* ── The detail block under the matrix and under the week bars ─ */
.detail {
  background: var(--surface-translucent);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  margin-top: 16px;
  padding: 14px 18px;
}

.detail h3 {
  font-size: 15px;
  font-weight: 900;
  margin: 0;
}

.detail h3 a {
  color: inherit;
  text-decoration: none;
}

.detail h3 a:hover {
  text-decoration: underline;
}

.detail .hint {
  margin-top: 2px;
}

.detail table.t {
  margin-top: 10px;
}

.detail-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}

/* ── M-5: the week bars and the rankings ────────────────────── */
svg.chart .planned {
  fill: var(--hours-planned);
}

svg.chart .written {
  fill: var(--primary);
}

svg.chart rect.sel {
  stroke: var(--text);
  stroke-width: 2;
}

svg.chart text.v {
  fill: var(--text);
  font-weight: 700;
}

svg.chart text.wk {
  fill: var(--text);
  font-weight: 700;
}

svg.chart .weekbar {
  cursor: pointer;
}

svg.chart .weekbar.open .planned,
svg.chart .weekbar.open .written {
  opacity: 0.45;
}

svg.chart .weekbar:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ── Donut and rankings (M-4 variant A) ─────────────────────── */
.donut {
  align-items: center;
  display: grid;
  gap: 20px;
  grid-template-columns: 180px minmax(0, 1fr);
}

.donut-ring {
  max-width: 180px;
}

.donut .c {
  fill: var(--text);
  font-size: 22px;
  font-weight: 900;
}

.donut .cs {
  fill: var(--muted);
  font-size: 11px;
}

.ranks {
  min-width: 0;
}

/* A rank row is a button where it selects an activity and a plain row where it
   does not; both keep the same five-column grid so the two columns line up. */
.rank {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  border-radius: 6px;
  color: inherit;
  display: grid;
  font-size: 13.5px;
  gap: 10px;
  grid-template-columns: 24px minmax(0, 1fr) 60px 52px minmax(80px, 150px);
  padding: 7px 0;
  text-align: left;
  width: 100%;
}

button.rank {
  cursor: pointer;
}

button.rank:hover {
  background: var(--primary-soft);
}

.rank .i {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.rank-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank .n {
  font-weight: 700;
  text-align: right;
}

.rank .p {
  color: var(--muted);
  text-align: right;
}

.rank.on {
  background: var(--primary-soft);
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
  width: calc(100% + 16px);
}

.more {
  background: transparent;
  border: 0;
  color: var(--primary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 0;
}

.more:hover {
  text-decoration: underline;
}

/* The chosen activity is marked in the stacked-bar variant too, so the two
   charts never disagree about what the right-hand column is showing. */
table.t tr.click.on td {
  background: var(--primary-soft);
}

.legend {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  gap: 6px 16px;
  margin-top: 8px;
}

.legend span {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.legend i {
  border-radius: 2px;
  display: inline-block;
  height: 9px;
  width: 14px;
}

/* ── Absence strip per month ────────────────────────────────── */
.strook {
  align-items: flex-end;
  display: flex;
  gap: 8px;
  margin-top: 8px;
  overflow-x: auto;
}

.vm {
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  flex: 1 0 68px;
  padding: 4px 2px;
  text-align: center;
}

.vm:hover .vmbar {
  outline: 1px solid var(--line);
  outline-offset: 1px;
}

.vmbar {
  align-items: flex-end;
  background: color-mix(in srgb, var(--line) 60%, var(--background));
  border-radius: 4px;
  display: flex;
  height: 70px;
  overflow: hidden;
}

.vmbar i {
  background: var(--leave-vacation);
  border-radius: 4px 4px 0 0;
  display: block;
  width: 100%;
}

.vm.on .vmbar {
  outline: 2px solid var(--primary);
  outline-offset: 1px;
}

.vmu {
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-top: 4px;
}

.vml {
  color: var(--muted);
  display: block;
  font-size: 11px;
}

/* ── Gantt: who is away when ────────────────────────────────── */
.gwrap {
  overflow-x: auto;
}

table.gantt {
  border-collapse: collapse;
  font-size: 11.5px;
  min-width: 640px;
  table-layout: fixed;
  width: 100%;
}

table.gantt th,
table.gantt td {
  border: 0;
  padding: 0;
}

th.gnaam,
td.gnaam {
  font-size: 12.5px;
  font-weight: 500;
  padding: 3px 8px 3px 0;
  text-align: left;
  white-space: nowrap;
  width: 150px;
}

th.gtot,
td.gtot {
  color: var(--muted);
  padding: 3px 10px 3px 0;
  text-align: right;
  width: 44px;
}

th.gdag {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  padding-bottom: 4px;
  text-align: center;
}

th.gdag.we,
td.gcel.we {
  background: var(--row-tint);
}

td.gcel {
  background: color-mix(in srgb, var(--line) 45%, var(--background));
  border-right: 1px solid var(--background);
  height: 22px;
  vertical-align: bottom;
}

td.gcel > i {
  border-radius: 2px;
  display: block;
  width: 100%;
}

td.gsom {
  background: none;
  color: var(--muted);
  font-size: 10px;
  padding-top: 6px;
  text-align: center;
}

td.gnaam.gsom {
  font-size: 11px;
  text-align: left;
}

/* ── The month picker in a section head ─────────────────────── */
.pbtn.sm {
  font-size: 12.5px;
  min-height: 30px;
  padding: 0 10px;
}

.sec-h .picker {
  position: relative;
}

/* ── Settings: activity, role and leave tables ──────────────── */
table.t .in,
table.t .sel,
.leave-import .in,
.leave-import .sel {
  align-items: center;
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  display: inline-flex;
  font-weight: 700;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
}

table.t .in:focus-within,
table.t .sel:focus-within {
  border-color: var(--focus-ring);
}

table.t .in input,
table.t .sel select,
table.t .sel input {
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  font-weight: 700;
  min-width: 0;
  outline: none;
  padding: 0;
  width: 100%;
}

table.t .in input:disabled,
table.t .sel select:disabled,
table.t .sel input:disabled {
  color: var(--muted-strong);
  cursor: not-allowed;
}

table.t .in small {
  color: var(--muted);
  font-weight: 400;
}

table.t td small.muted {
  color: var(--muted);
}

/* The cost-price cell keeps the euro sign on the left and the figure right. */
table.t td.n .in {
  min-width: 110px;
}

.rolehist > summary {
  color: var(--primary);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  list-style: none;
  padding: 8px 0;
}

@media (max-width: 1099.98px) {
  .detail-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 767.98px) {
  /* A 390px screen cannot read fourteen week columns: it gets one week at a
     time instead, chosen with a picker, like Delivery's mobile resource plan. */
  .mwrap {
    display: none;
  }

  .mx-mobile {
    display: block;
  }

  .mleg {
    font-size: 11.5px;
  }

  .detail {
    margin-left: -14px;
    margin-right: -14px;
    border-radius: 0;
  }

  svg.chart.weeks {
    min-width: 640px;
  }

  .chart-scroll {
    overflow-x: auto;
  }
}

.rolehist > summary::-webkit-details-marker {
  display: none;
}

.rolehist ul {
  margin: 6px 0 0;
  padding-left: 16px;
  text-align: left;
}

.subhead {
  font-size: 14px;
  font-weight: 900;
  margin: 20px 0 2px;
}

.field-label {
  color: var(--muted-strong);
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin: 10px 0 4px;
}

.leave-import textarea {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  color: inherit;
  font-family: ui-monospace, "SFMono-Regular", "Menlo", monospace;
  font-size: 12.5px;
  padding: 8px 10px;
  resize: vertical;
  width: 100%;
}

.leave-import textarea:focus-visible {
  border-color: var(--focus-ring);
}

.leave-import textarea:disabled {
  color: var(--muted-strong);
  cursor: not-allowed;
}

.leave-import-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* A file input styled as a button; the input itself stays reachable by
   keyboard because the label wraps it rather than hiding it from the tree. */
.file-button {
  cursor: pointer;
  position: relative;
}

.file-button input[type="file"] {
  height: 100%;
  inset: 0;
  opacity: 0;
  position: absolute;
  width: 100%;
}

/* ── Mobile (390) ───────────────────────────────────────────── */
@media (max-width: 767.98px) {
  /* The donut goes above its ranking rather than beside it. */
  .donut {
    gap: 12px;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .rank {
    grid-template-columns: 20px minmax(0, 1fr) 56px 44px;
  }

  .rank .bar {
    display: none;
  }

  .vm {
    flex: 0 0 64px;
  }

  .savebar {
    flex-wrap: wrap;
    margin: 24px -14px -24px;
    padding: 12px 14px;
  }

  .savebar .hint {
    flex-basis: 100%;
    margin: 0;
  }
}

/* ── Trein 3: marge ── */

/* The lens chip is a control, not a label: it carries the × of a filter chip
   and turns the cost and margin columns off again. */
button.chip {
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
}

button.chip.x::after {
  color: var(--muted);
  content: "×";
}

/* The margin half of the hero, under the revenue figure. */
.mg-rule {
  border-top: 1px solid var(--line);
  margin: 16px 0 12px;
}

.mg-two {
  display: grid;
  gap: 10px 18px;
  grid-template-columns: 1fr 1fr;
  margin-top: 8px;
}

.mg-two small {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mg-two b {
  display: block;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-top: 4px;
}

.mg-two span {
  color: var(--muted-strong);
  display: block;
  font-size: 12.5px;
  margin-top: 2px;
}

.hero .mg-choice {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
  margin-top: 10px;
  max-width: 60ch;
}

/* The two cost bases side by side, spanning the width the hero's own two
   columns leave: the revenue ledger of M-1 keeps its place above them. */
.mg-vars {
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 16px 34px;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  padding-top: 16px;
}

.mg-var h4 {
  font-size: 13.5px;
  font-weight: 900;
  margin: 0 0 3px;
}

.mg-var p {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
  margin: 0 0 9px;
}

.mg-var .hint {
  margin-top: 8px;
}

/* Seven figures instead of six once the lens is on. */
.figs.mg-figs7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* "onbekend" is a state, not a value: muted, with the way out next to it. */
.mg-unknown {
  color: var(--muted);
  font-weight: 400;
}

.mg-unknown a {
  color: var(--interactive-accent);
  font-weight: 700;
  white-space: nowrap;
}

table.t td .mg-unknown a {
  text-decoration: underline;
}

@media (max-width: 1099.98px) {
  .figs.mg-figs7 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mg-vars {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767.98px) {
  /* On a phone the two results stack like every other pair of key figures. */
  .mg-two {
    grid-template-columns: minmax(0, 1fr);
  }

  .mg-two b {
    font-size: 24px;
  }

  .figs.mg-figs7 {
    grid-template-columns: 1fr 1fr;
  }

  /* The ledgers of both variants read as label/value rows, same as the hero's. */
  .mg-vars {
    gap: 18px;
    padding-top: 14px;
  }
}

/* ── Trein 3: verlofvoorraad ────────────────────────────────── */

/* Two column groups over one table: the group head carries no rule of its own,
   the left border of each group does the separating (mockup frame #f11). */
.lv-stock th.lv-name {
  vertical-align: bottom;
  width: 16%;
}

.lv-stock th.lv-grp {
  border-bottom: 0;
  color: var(--text);
  font-size: 11.5px;
  padding-bottom: 2px;
  text-align: center;
}

.lv-stock th.lv-sep,
.lv-stock td.lv-sep {
  border-left: 1px solid var(--line);
}

.lv-signals {
  margin-bottom: 14px;
}

/* "Geen saldo" is a state, not a number: it reads muted, and carries the way
   out of it as a link rather than a dash. */
.lv-unknown {
  color: var(--muted);
  font-weight: 400;
}

.lv-unknown a {
  color: var(--primary);
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}

.lv-stock small.lv-note {
  color: var(--muted);
  display: block;
  font-weight: 400;
}

/* A negative stock never leans on the colour alone: the line says what it is. */
.lv-stock small.lv-negative {
  color: var(--status-amber);
  display: block;
  font-size: 11px;
  font-weight: 700;
}

.lv-dm {
  background: var(--surface-translucent);
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-size: 13px;
  padding: 14px 16px;
}

.lv-dm b {
  color: var(--text);
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
}

@media (max-width: 767.98px) {
  /* Per-person blocks like every other table here: the column group lives in
     the cell label, and the sub-lines take a line of their own. */
  .lv-stock td.n {
    flex-wrap: wrap;
  }

  .lv-stock small.lv-note,
  .lv-stock small.lv-negative {
    flex-basis: 100%;
    text-align: right;
  }

  /* "Geen saldo geïmporteerd · importeren" is too long to sit beside its
     label, so it drops to its own line — on the value side, like a value. */
  .lv-stock td.n .lv-unknown {
    margin-left: auto;
    text-align: right;
  }
}