/* ============================= RESET ============================= */
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: var(--font-family);
    color: var(--text-body);
    background: var(--color-surface-card);
    font-size: var(--text-body-size);
    line-height: var(--text-body-line);
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, h4 { margin: 0; color: var(--text-heading); font-weight: var(--text-h2-weight); }
  p { margin: 0; }
  button, input, select { font-family: inherit; }
  button { color: inherit; }
  img, svg { max-width: 100%; display: block; }
  ul { margin: 0; padding: 0; }
  li { list-style: none; }
  code { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }

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

  .skip-link {
    position: absolute; left: -9999px; top: 0;
    background: var(--color-accent); color: var(--color-on-accent);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-control);
    z-index: 1000; font-weight: var(--text-label-weight);
  }
  .skip-link:focus { left: var(--space-3); top: var(--space-3); }

  :focus-visible { outline: 2px solid var(--color-accent-fg); outline-offset: 2px; border-radius: var(--radius-control); }

  /* ---- Shared micro-interactions ----
     One transition contract for every interactive surface, so hover and focus
     feel the same everywhere. All of it is disabled under prefers-reduced-motion. */
  .mg-card, .news-item, .news-feature, .list-tile, .cat-card, .gal-item img, .gal-ph, .sec-card, .adm-card {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  }
  .mg-card:hover, .news-item:hover {
    transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-accent-fg);
    background: var(--color-surface-raised);
  }
  .list-tile:hover { background: var(--color-surface-raised); }
  .news-feature:hover { box-shadow: var(--shadow-md); }
  .mg-card .go { transition: transform .18s ease; }
  .mg-card:hover .go { transform: translateX(3px); }
  .btn, .link-btn, .fchip, .chip, .seg button, .pg-btn, .pg-num, .account-menu-item, .back-link, .topbar-user {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  }
  .back-link svg { transition: transform .15s ease; }
  .back-link:hover svg { transform: translateX(-3px); }
  .gal-item:hover img { transform: scale(1.02); box-shadow: var(--shadow-md); }

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

  :root[data-theme="dark"] body { background: var(--color-canvas); }
  /* Photos are a touch bright against a dark UI. */
  :root[data-theme="dark"] .gal-item img,
  :root[data-theme="dark"] .news-feature img { filter: brightness(.85); }

  /* ============================= TYPE ============================= */
  .h-display { font-size: var(--text-display-size); line-height: var(--text-display-line); font-weight: var(--text-display-weight); letter-spacing: var(--heading-tracking); }
  .h1 { font-size: var(--text-h1-size); line-height: var(--text-h1-line); font-weight: var(--text-h1-weight); letter-spacing: var(--heading-tracking); }
  .h2 { font-size: var(--text-h2-size); line-height: var(--text-h2-line); font-weight: var(--text-h2-weight); letter-spacing: var(--heading-tracking); }
  .h3 { font-size: var(--text-h3-size); line-height: var(--text-h3-line); font-weight: var(--text-h3-weight); }
  .body-lg { font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line); font-weight: var(--text-body-lg-weight); }
  .caption { font-size: var(--text-caption-size); line-height: var(--text-caption-line); }

  /* ============================= AUTH SHELL ============================= */
  .auth-shell { min-height: 100vh; display: flex; }
  .auth-brand {
    flex: 1 1 60%; background: var(--color-surface-navy); color: #fff;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: var(--space-7); position: relative; overflow: hidden;
  }
  /* Rotating photo backdrop: three stacked, cross-fading images behind a
     fixed navy scrim — scrim rgba values are decomposed from --color-surface-navy
     (0,15,41) and a nearby navy step (0,31,87) so brand-panel text keeps AA
     contrast over any of the three photos. */
  .auth-brand-slides { position: absolute; inset: 0; z-index: 0; }
  .auth-brand-slide {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: opacity 1.2s ease;
  }
  .auth-brand-slide.on { opacity: 1; }
  .auth-brand-scrim {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(165deg, rgba(0,15,41,.8) 0%, rgba(0,31,87,.66) 55%, rgba(0,31,87,.52) 100%);
  }
  .auth-brand::after {
    content: ""; position: absolute; right: -18%; bottom: -28%; z-index: 1;
    width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
    opacity: .2; pointer-events: none;
  }
  .brand-mark { display: flex; align-items: center; position: relative; z-index: 3; }
  .brand-logo { height: 42px; width: auto; flex: none; }
  .brand-hero { position: relative; z-index: 3; max-width: 34ch; }
  .brand-hero h1 { color: #fff; margin-bottom: var(--space-2); }
  .brand-foot { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-caption-size); color: rgba(255,255,255,.62); position: relative; z-index: 3; }

  .rail-steps { display: flex; flex-direction: column; gap: var(--space-4); position: relative; z-index: 3; }
  .rail-step { display: flex; gap: var(--space-3); align-items: flex-start; opacity: .55; }
  .rail-step.on, .rail-step.done { opacity: 1; }
  .rail-step-num {
    width: 28px; height: 28px; border-radius: 50%; flex: none;
    border: 1.5px solid rgba(255,255,255,.4); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
  }
  .rail-step.on .rail-step-num { background: var(--color-accent); border-color: var(--color-accent); }
  .rail-step.done .rail-step-num { background: rgba(255,255,255,.16); border-color: transparent; }
  .rail-step b { display: block; color: #fff; font-size: var(--text-body-size); }
  .rail-step span { display: block; color: rgba(255,255,255,.62); font-size: var(--text-caption-size); }

  /* 60/40 split: the photo panel leads, the form panel takes the smaller side. */
  .auth-panel-wrap { flex: 0 0 40%; display: flex; }
  .auth-panel {
    background: var(--color-surface-card); flex: 1; display: flex; flex-direction: column; justify-content: center;
    padding: var(--space-7) var(--space-6); max-width: 440px; margin: 0 auto; width: 100%;
  }
  .auth-panel .eyebrow {
    display: inline-block; background: var(--color-info-bg); color: var(--color-info-text);
    font-size: var(--text-label-size); font-weight: var(--text-label-weight);
    padding: 4px var(--space-3); border-radius: var(--radius-pill); margin-bottom: var(--space-4); width: fit-content;
  }
  .auth-panel h2 { margin-bottom: var(--space-2); }
  .auth-panel .sub { color: var(--text-body); margin-bottom: var(--space-5); }

  .progress-rail { display: flex; gap: 6px; margin-bottom: var(--space-5); }
  .progress-rail i { flex: 1; height: 4px; border-radius: var(--radius-pill); background: var(--color-border); display: block; font-style: normal; }
  .progress-rail i.done, .progress-rail i.on { background: var(--color-accent-fg); }

  @media (max-width: 880px) {
    .auth-shell { flex-direction: column; }
    .auth-brand { padding: var(--space-5); min-height: 30vh; }
    .brand-hero { max-width: none; }
    .auth-panel-wrap { flex: 1; }
    .auth-panel { max-width: none; padding: var(--space-6) var(--space-5); }
  }

  /* ============================= FORM COMPONENTS ============================= */
  .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
  .field label { font-size: var(--text-label-size); font-weight: var(--text-label-weight); color: var(--text-heading); }
  .input-wrap { position: relative; display: flex; align-items: center; }
  .input-wrap input {
    width: 100%; padding: 11px var(--space-3); border: 1.5px solid var(--color-border);
    border-radius: var(--radius-control); font-size: var(--text-body-lg-size);
    color: var(--text-heading); background: var(--color-surface-card);
  }
  .input-wrap input::placeholder { color: var(--color-grey-light); }
  .input-wrap input:focus-visible { border-color: var(--color-accent-fg); box-shadow: var(--focus-ring); outline: none; }
  /* Auto-derived, read-only fields (e.g. Head of department) — same grey-box
     treatment the reference form uses for a value the system fills in. */
  .input-wrap input:disabled { background: var(--color-canvas); color: var(--text-body); cursor: not-allowed; }
  .input-wrap.has-trailing input { padding-right: 42px; }
  .trailing-btn {
    position: absolute; right: 6px; width: 30px; height: 30px; border: none; background: transparent;
    color: var(--text-body); border-radius: var(--radius-control); display: flex; align-items: center;
    justify-content: center; cursor: pointer;
  }
  .trailing-btn:hover { color: var(--text-heading); background: var(--color-info-bg); }
  /* Native select, styled to match the text inputs beside it. */
  .select-wrap select {
    width: 100%; padding: 11px var(--space-3); padding-right: 38px; border: 1.5px solid var(--color-border);
    border-radius: var(--radius-control); font-size: var(--text-body-lg-size); color: var(--text-heading);
    background: var(--color-surface-card); appearance: none; cursor: pointer;
  }
  .select-wrap select:focus-visible { border-color: var(--color-accent-fg); box-shadow: var(--focus-ring); outline: none; }
  .field textarea {
    width: 100%; padding: 11px var(--space-3); border: 1.5px solid var(--color-border);
    border-radius: var(--radius-control); font-size: var(--text-body-lg-size); color: var(--text-heading);
    background: var(--color-surface-card); font-family: inherit; resize: vertical;
  }
  .field textarea:focus-visible { border-color: var(--color-accent-fg); box-shadow: var(--focus-ring); outline: none; }
  .select-chevron {
    position: absolute; right: var(--space-3); top: 50%; transform: translateY(-50%);
    color: var(--text-body); pointer-events: none; display: flex;
  }
  .field.has-error input, .field.has-error select { border-color: var(--color-danger); }
  .error-text { color: var(--color-danger); font-size: var(--text-caption-size); display: flex; gap: 4px; align-items: center; }
  .warn-text { color: var(--color-warning); font-size: var(--text-caption-size); display: flex; gap: 4px; align-items: center; }
  .warn-text.strong { font-weight: 700; }
  .hint-text { color: var(--text-body); font-size: var(--text-caption-size); }

  .btn {
    appearance: none; border: 1.5px solid transparent; border-radius: var(--radius-control);
    padding: 12px var(--space-5); font-size: var(--text-body-lg-size); font-weight: var(--text-label-weight);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    cursor: pointer; width: 100%; transition: background-color .15s, border-color .15s;
  }
  .btn + .btn { margin-top: var(--space-3); }
  .btn-row { display: flex; gap: var(--space-3); margin-bottom: var(--space-3); align-items: center; }
  .btn-row .btn { margin-top: 0; flex: 1; }
  .btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
  .btn-primary:hover { background: var(--color-accent-hover); }
  .btn-primary:active { background: var(--color-accent-active); }
  .btn-primary:disabled { background: var(--color-grey-light); cursor: not-allowed; }
  .btn-secondary { background: var(--color-surface-card); border-color: var(--color-border); color: var(--text-heading); }
  .btn-secondary:hover { border-color: var(--color-grey); }
  .btn-ghost { background: transparent; color: var(--color-accent-fg); }
  .btn-ghost:hover { background: var(--color-info-bg); }
  /* Outline at rest, fills solid on hover/press — for a secondary action that
     should still feel clearly interactive (e.g. "Request to reschedule"). */
  .btn-outline-fill { background: transparent; border-color: var(--color-accent-fg); color: var(--color-accent-fg); }
  .btn-outline-fill:hover, .btn-outline-fill:active { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
  .link-btn {
    background: none; border: none; padding: 0; color: var(--color-accent-fg); font-size: inherit;
    font-family: inherit; cursor: pointer; text-decoration: underline; text-align: left;
  }

  .divider-or { display: flex; align-items: center; gap: var(--space-3); color: var(--text-body); font-size: var(--text-caption-size); margin: var(--space-4) 0; }
  .divider-or::before, .divider-or::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }

  .otp-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-6); }
  .otp-input {
    width: 100%; aspect-ratio: 1 / 1; text-align: center; font-size: var(--text-h2-size);
    font-weight: var(--text-h2-weight); border: 1.5px solid var(--color-border); border-radius: var(--radius-control);
    font-variant-numeric: tabular-nums;
  }
  .otp-input:focus-visible { border-color: var(--color-accent-fg); box-shadow: var(--focus-ring); outline: none; }

  .pw-meter { display: flex; gap: 4px; margin-bottom: var(--space-2); }
  .pw-meter i { flex: 1; height: 4px; border-radius: var(--radius-pill); background: var(--color-border); display: block; font-style: normal; }
  .pw-meter[data-score="1"] i:nth-child(1) { background: var(--color-danger); }
  .pw-meter[data-score="2"] i:nth-child(-n+2) { background: var(--color-warning); }
  .pw-meter[data-score="3"] i:nth-child(-n+3) { background: var(--color-warning); }
  .pw-meter[data-score="4"] i { background: var(--color-success); }
  .pw-checks { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0 0 var(--space-4); padding: 0; }
  .pw-checks li { display: flex; align-items: center; gap: 4px; font-size: var(--text-caption-size); color: var(--text-body); }
  .pw-checks li.met { color: var(--color-success); }

  .method-group { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-4); }
  .method-card {
    position: relative; display: flex; gap: var(--space-3); border: 1.5px solid var(--color-border);
    border-radius: var(--radius-container); padding: var(--space-4); cursor: pointer;
  }
  .method-card.sel, .method-card:has(input:checked) { border-color: var(--color-accent-fg); border-width: 2px; }
  .method-card:has(input:focus-visible) { outline: 2px solid var(--color-accent-fg); outline-offset: 2px; }
  .method-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .method-card .m-icon {
    width: 40px; height: 40px; flex: none; border-radius: var(--radius-control);
    background: var(--color-info-bg); color: var(--color-accent-fg); display: flex; align-items: center; justify-content: center;
  }
  .method-card b { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; color: var(--text-heading); font-size: var(--text-body-lg-size); }
  .method-card span.desc { display: block; color: var(--text-body); font-size: var(--text-caption-size); margin-top: 2px; }
  .pill-tiny { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--color-success); color: var(--color-on-accent); padding: 2px 6px; border-radius: var(--radius-pill); }

  .code-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-4); }
  .code-grid code { display: block; text-align: center; padding: var(--space-2); border: 1.5px solid var(--color-border); border-radius: var(--radius-control); letter-spacing: .04em; color: var(--text-heading); }

  .qr-box { display: flex; gap: var(--space-4); align-items: center; border: 1.5px solid var(--color-border); border-radius: var(--radius-container); padding: var(--space-4); margin-bottom: var(--space-4); }
  .qr-box .steps { font-size: var(--text-caption-size); color: var(--text-body); display: flex; flex-direction: column; gap: 4px; }
  .secret-line { font-family: ui-monospace, monospace; color: var(--text-heading); display: flex; align-items: center; gap: 6px; }

  .ack-row { display: flex; gap: var(--space-2); align-items: flex-start; margin-bottom: var(--space-4); font-size: var(--text-caption-size); color: var(--text-body); cursor: pointer; }
  .ack-row input { margin-top: 3px; }

  .done-wrap { text-align: center; }
  .done-icon {
    width: 64px; height: 64px; border-radius: 50%; background: var(--color-info-bg); color: var(--color-accent-fg);
    display: flex; align-items: center; justify-content: center; margin: 0 auto var(--space-4);
  }

  .helper-row { text-align: center; font-size: var(--text-caption-size); color: var(--text-body); margin-top: var(--space-4); }

  /* ============================= DASHBOARD SHELL ============================= */
  .app-shell { display: flex; min-height: 100vh; }
  .rail { width: 240px; flex: none; background: var(--color-surface-rail); color: var(--text-nav); display: flex; flex-direction: column; padding: var(--space-5) var(--space-3); gap: 1px; border-right: 1px solid var(--color-border-soft); }
  .rail .brand-mark { margin-bottom: var(--space-5); padding: 0 var(--space-2); }
  .rail .brand-logo { height: 35px; }
  .rail-label { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--color-grey); margin: var(--space-3) var(--space-2) var(--space-1); }
  .rail-link {
    position: relative;
    display: flex; align-items: center; gap: var(--space-3); padding: 7px var(--space-3);
    border-radius: var(--radius-control); color: var(--text-nav); text-decoration: none;
    font-size: var(--text-body-size); background: none; border: none; width: 100%; text-align: left; cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
  }
  /* Icons carry a touch more weight than body glyphs, as enterprise nav tends to. */
  .rail-link svg { stroke-width: 2; }
  .rail-link:hover { background: var(--color-hover-tint); color: var(--text-heading); }
  /* Active: left accent indicator + tint + stronger type — three quiet signals, not one loud one. */
  .rail-link[aria-current="page"] {
    background: var(--color-accent-tint); color: var(--color-accent-fg); font-weight: 700;
  }
  .rail-link[aria-current="page"]::before {
    content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 60%; border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    background: var(--color-accent-fg);
  }
  .rail-link[aria-current="page"] svg { stroke-width: 2.2; }
  .rail-spacer { flex: 1; }
  .avatar {
    width: 32px; height: 32px; border-radius: 50%; background: var(--color-accent); color: var(--color-on-accent);
    display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none;
  }
  .avatar-neutral { background: var(--color-accent-tint); color: var(--color-accent-fg); }

  .main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  /* Header padding matches .content so the two sit on one grid. */
  .topbar { height: 68px; flex: none; background: var(--color-surface-header); border-bottom: 1px solid var(--color-border-soft); display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-5); }
  .topbar .h3 { color: var(--text-heading); }
  .topbar-right { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex: none; }
  .search-field { width: 260px; height: 38px; flex: none; display: flex; align-items: center; gap: var(--space-2); border: 1.5px solid var(--color-border-faint); background: var(--color-canvas); border-radius: var(--radius-control); padding: 0 var(--space-3); color: var(--text-body); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; }
  .search-field:hover { border-color: var(--color-border-soft); }
  .search-field input { border: none; outline: none; flex: 1; min-width: 0; font-size: var(--text-body-size); background: transparent; color: var(--text-heading); }
  .search-field input:focus-visible { outline: none; }
  .search-field:focus-within { border-color: var(--color-accent-fg); box-shadow: var(--focus-ring); }
  .icon-btn {
    position: relative;
    width: 38px; height: 38px; border-radius: var(--radius-control); border: 1.5px solid var(--color-border-soft);
    background: transparent; color: var(--text-nav); display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
  }
  /* Brand accent used sparingly — an unread marker, not decoration. */
  .notif-dot {
    position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--color-accent-fg); box-shadow: 0 0 0 2px var(--color-surface-header);
  }
  .icon-btn:hover { background: var(--color-accent-tint); color: var(--color-accent-fg); border-color: var(--color-border-faint); }
  .topbar-user {
    display: flex; align-items: center; gap: var(--space-2); background: none; border: 1.5px solid var(--color-border-soft);
    border-radius: var(--radius-control); padding: 4px var(--space-2) 4px 4px; cursor: pointer; flex: none;
  }
  .topbar-user:hover { background: var(--color-hover-tint); }
  .tu-meta { display: flex; text-align: left; }
  .tu-meta b { font-size: var(--text-body-size); color: var(--text-heading); font-weight: var(--text-label-weight); }
  .tu-chevron { color: var(--text-body); flex: none; display: flex; }
  .topbar-user-wrap { position: relative; }
  .account-menu {
    position: absolute; top: calc(100% + 6px); right: 0; min-width: 190px;
    background: var(--color-surface-card); border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-container);
    box-shadow: var(--shadow-lg); padding: var(--space-2); display: flex; flex-direction: column; gap: 2px; z-index: 60;
  }
  .account-menu-item {
    display: flex; align-items: center; gap: var(--space-2); width: 100%; text-align: left;
    background: none; border: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control);
    font-size: var(--text-body-size); color: var(--text-heading); cursor: pointer;
  }
  .account-menu-item:hover { background: var(--color-hover-tint); }

  /* Export-format picker — same visual recipe as .account-menu (a real,
     always-available menu, unlike the dashed "prototype navigator" style)
     but its own class names since it's positioned relative to a toolbar
     button rather than the top bar. */
  .export-menu-wrap { position: relative; display: inline-flex; }
  .export-menu {
    position: absolute; top: calc(100% + 4px); right: 0; min-width: 170px;
    background: var(--color-surface-card); border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-container);
    box-shadow: var(--shadow-lg); padding: var(--space-2); display: flex; flex-direction: column; gap: 2px; z-index: 60;
  }
  .export-menu-item {
    display: flex; align-items: center; gap: var(--space-2); width: 100%; text-align: left;
    background: none; border: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control);
    font-size: var(--text-body-size); color: var(--text-heading); cursor: pointer;
  }
  .export-menu-item:hover { background: var(--color-hover-tint); }

  .content { flex: 1; padding: var(--space-5); overflow-y: auto; background: var(--color-canvas); }
  .greet { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); margin-bottom: var(--space-6); flex-wrap: wrap; }
  .greet .sub { color: var(--text-body); margin-top: 4px; }

  .block-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
  .block-head h2 { font-size: var(--text-h3-size); font-weight: var(--text-h3-weight); }
  .block-head .count { color: var(--text-body); font-size: var(--text-caption-size); flex: none; }
  .block-sub { color: var(--text-body); font-size: var(--text-caption-size); margin-top: 2px; }

  .pin-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
  .pin-row-4 { grid-template-columns: repeat(4, 1fr); }
  @media (max-width: 1240px) { .pin-row-4 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) { .pin-row-4 { grid-template-columns: 1fr; } }
  .tile {
    position: relative; overflow: hidden;
    border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-container); padding: var(--space-4);
    background: var(--color-surface-card); text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 6px;
    box-shadow: var(--shadow-card);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
  }
  /* Hover fills the whole card with the brand accent; everything inside flips
     to the on-accent colour so contrast holds in both themes. */
  .tile:hover {
    background: var(--color-accent); border-color: var(--color-accent);
    transform: translateY(-3px); box-shadow: var(--shadow-card-hover);
  }
  .tile:hover b, .tile:hover .desc, .tile:hover .tile-open { color: var(--color-on-accent); }
  .tile:active { transform: translateY(0); }
  .tile b, .tile .desc { transition: color .18s ease; }
  .tile .mono { margin-bottom: var(--space-2); transition: transform .18s ease, background-color .18s ease, color .18s ease; }
  .tile:hover .mono { transform: scale(1.06); background: var(--color-on-accent-wash); color: var(--color-on-accent); }
  /* "Open" affordance fades in on hover / keyboard focus, never shifting layout. */
  .tile-open {
    position: absolute; right: var(--space-4); top: var(--space-4);
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--text-caption-size); font-weight: var(--text-label-weight); color: var(--color-accent-fg);
    opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease;
  }
  .tile:hover .tile-open, .tile:focus .tile-open { opacity: 1; transform: translateX(0); }
  .tile:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
  /* Soft accent wash — same treatment as the active nav pill and the avatar. */
  .mono { width: 44px; height: 44px; border-radius: var(--radius-control); background: var(--color-accent-tint); color: var(--color-accent-fg); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; flex: none; }
  .mono.long { font-size: 10px; letter-spacing: -0.02em; }
  .mono.sm { width: 32px; height: 32px; }
  .tile b { color: var(--text-heading); font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line); letter-spacing: -0.01em; }
  .tile span.desc { color: var(--text-body); font-size: var(--text-caption-size); }

  .status-pill { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-caption-size); font-weight: 500; padding: 3px var(--space-2); border-radius: var(--radius-pill); width: fit-content; }
  .status-pill .dot { width: 6px; height: 6px; border-radius: 50%; }
  .status-pill.ok { background: var(--color-success-tint); color: var(--color-success); }
  .status-pill.ok .dot { background: var(--color-success); }
  .status-pill.warn { background: var(--color-warning-tint); color: var(--color-warning); }
  .status-pill.warn .dot { background: var(--color-warning); }
  .status-pill.neutral { background: var(--color-neutral-tint); color: var(--color-grey); }
  .status-pill.neutral .dot { background: var(--color-grey); }
  .status-pill.info { background: var(--color-info-bg); color: var(--color-info-text); }
  .status-pill.info .dot { background: var(--color-accent-fg); }
  .status-pill.danger { background: var(--color-danger-tint); color: var(--color-danger); }
  .status-pill.danger .dot { background: var(--color-danger); }
  .status-pill.upcoming { background: var(--color-upcoming-tint); color: var(--color-upcoming); }
  .status-pill.upcoming .dot { background: var(--color-upcoming); }
  /* Flags urgency on the emergency-visit form itself, not a resting record
     status — unlike .status-pill this one is allowed to use --color-danger. */
  .emergency-tag { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-caption-size); font-weight: var(--text-label-weight); padding: 4px var(--space-2); border-radius: var(--radius-pill); background: var(--color-danger-tint); color: var(--color-danger); width: fit-content; }

  /* ---------- Security ---------- */
  .sec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: var(--space-4); align-items: start; }
  /* New employee: a single readable column, not the dashboard's full width —
     one clear form, not a data table. */
  /* New employee: one card, fields flow left-to-right, 3 per row, top-to-
     bottom — a glance covers the whole form instead of scrolling a single
     narrow column. Collapses to 2, then 1, before the columns get cramped. */
  .form-card { max-width: 1040px; }
  .form-card-title { font-size: var(--text-h3-size); font-weight: var(--text-h3-weight); margin-bottom: var(--space-5); }
  .form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 var(--space-5); }
  .form-grid .field { margin-bottom: var(--space-5); }
  /* Sub-section heading — spans the full grid width rather than sitting in
     one column, so it reads as a divider between field groups. */
  .form-section-title {
    grid-column: 1 / -1; font-size: var(--text-body-lg-size); font-weight: var(--text-h3-weight);
    color: var(--text-heading); padding-top: var(--space-4); margin: 0 0 var(--space-2);
    border-top: 1px solid var(--color-border-soft);
  }
  .form-section-title:first-child { padding-top: 0; margin-top: 0; border-top: none; }
  .form-referee-action { grid-column: 1 / -1; margin: calc(var(--space-5) * -1) 0 var(--space-5); }
  .form-referee-action .link-btn { text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
  .form-referee-action .link-btn:hover { text-decoration: underline; }
  @media (max-width: 900px) { .form-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }
  /* Sits inside the card, under the last row of fields. */
  .form-actions {
    display: flex; justify-content: flex-end; gap: var(--space-3);
    margin-top: var(--space-2); padding-top: var(--space-5); border-top: 1px solid var(--color-border-soft);
  }
  .form-actions .btn { width: auto; }

  /* Centered step indicator — also the page-2 gate: locked stays inert until
     step 1 passes validation. */
  .emp-steps { display: flex; align-items: center; justify-content: center; gap: var(--space-3); max-width: 1040px; margin: 0 auto var(--space-5); }
  .emp-step {
    display: flex; align-items: center; gap: var(--space-2); background: none; border: none;
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); cursor: pointer;
  }
  .emp-step-num {
    width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1.5px solid var(--color-border);
    color: var(--text-body); font-size: var(--text-caption-size); font-weight: 700;
    display: flex; align-items: center; justify-content: center;
  }
  .emp-step-label { font-size: var(--text-body-size); color: var(--text-body); font-weight: var(--text-label-weight); }
  .emp-step:hover .emp-step-label { color: var(--text-heading); }
  .emp-step.on .emp-step-num { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
  .emp-step.on .emp-step-label { color: var(--text-heading); }
  .emp-step.done .emp-step-num { background: var(--color-accent-tint); border-color: var(--color-accent-fg); color: var(--color-accent-fg); }
  .emp-step.done .emp-step-label { color: var(--color-accent-fg); }
  .emp-step.locked { cursor: not-allowed; }
  .emp-step.locked .emp-step-num { color: var(--color-border); }
  .emp-step.locked .emp-step-label { color: var(--color-border); }
  .emp-step.locked:hover .emp-step-label { color: var(--color-border); }
  .emp-step-line { width: 48px; height: 1.5px; background: var(--color-border-soft); flex: none; }
  .sec-card {
    background: var(--color-surface-card); border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-container);
    padding: var(--space-5); box-shadow: var(--shadow-sm);
  }
  .sec-card h3 { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-h3-size); margin-bottom: var(--space-2); }
  .sec-ic {
    width: 36px; height: 36px; flex: none; border-radius: var(--radius-control);
    background: var(--color-accent-tint); color: var(--color-accent-fg);
    display: flex; align-items: center; justify-content: center;
  }
  .sec-card > p { color: var(--text-body); font-size: var(--text-body-size); margin-bottom: var(--space-4); }
  .sec-row {
    display: flex; align-items: center; gap: var(--space-3); justify-content: space-between;
    padding: var(--space-3) 0; border-top: 1px solid var(--color-border-soft);
  }
  .sec-row b { display: block; color: var(--text-heading); font-size: var(--text-body-size); }
  .sec-row span:not(.status-pill):not(.dot) { color: var(--text-body); font-size: var(--text-caption-size); }
  .sec-row-end { display: flex; align-items: center; gap: var(--space-4); flex: none; }
  /* align-items:center stops one button stretching to the row height while the
     other keeps its natural height — they must read as a matched pair. */
  .sec-actions { display: flex; gap: var(--space-3); align-items: center; }
  /* margin-top:0 undoes the stacked-button rule, which would otherwise offset
     the second button in a side-by-side pair. */
  .sec-actions .btn { flex: 1; margin-top: 0; }
  /* Settings tab bar — horizontal, underlined active tab. */
  .settings-tabs { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--color-border-soft); margin-bottom: var(--space-5); }
  .settings-tab {
    background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
    padding: var(--space-3) 0; margin-bottom: -1px; font-size: var(--text-body-lg-size); color: var(--text-body);
  }
  .settings-tab:hover { color: var(--text-heading); }
  .settings-tab.on { color: var(--color-accent-fg); font-weight: var(--text-label-weight); border-bottom-color: var(--color-accent-fg); }
  /* Solid danger is reserved for a high-stakes confirm like this one. */
  .btn-danger { background: var(--color-danger); color: var(--color-on-accent); }
  .btn-danger:hover { background: var(--color-danger-hover); }

  /* Theme toggle sits at the foot of the rail */
  .theme-toggle { margin-top: var(--space-2); }
  .theme-toggle .switch { margin-left: auto; pointer-events: none; }
  .switch.sm { width: 32px; height: 18px; }
  .switch.sm::after { width: 12px; height: 12px; top: 3px; left: 3px; }
  .switch.sm.on::after { transform: translateX(14px); }

  /* ---------- Manage: section cards ---------- */
  .mg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-3); }
  .mg-card {
    display: flex; align-items: flex-start; gap: var(--space-3); background: var(--color-surface-card); cursor: pointer; text-align: left;
    border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-container); padding: var(--space-4);
    box-shadow: var(--shadow-sm); width: 100%;
  }
  .mg-card:hover { border-color: var(--color-accent-fg); }
  .mg-icon {
    width: 40px; height: 40px; flex: none; border-radius: var(--radius-control);
    background: var(--color-accent-tint); color: var(--color-accent-fg);
    display: flex; align-items: center; justify-content: center;
  }
  .mg-card b { display: block; color: var(--text-heading); font-size: var(--text-body-lg-size); }
  .mg-desc { display: block; color: var(--text-body); font-size: var(--text-caption-size); margin-top: 2px; }
  .mg-card .go { margin-left: auto; color: var(--text-body); flex: none; padding-top: var(--space-2); }

  /* ---------- Manage: admin tables ---------- */
  .back-link {
    display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0;
    color: var(--color-accent-fg); font-size: var(--text-body-size); cursor: pointer; margin-bottom: var(--space-4);
  }
  .back-link:hover { text-decoration: underline; }
  /* An icon must not stretch as a flex item — without this a tall-glyph icon
     inflates its button, so paired buttons end up different heights. */
  .btn svg, .fchip svg, .seg svg, .icon-action svg { flex: none; }
  /* nowrap keeps a long label on one line, so paired buttons stay the same height */
  .btn-inline { width: auto; flex: none; white-space: nowrap; }
  /* Compact variant that lines up with the search field in a table toolbar */
  .btn-compact { height: 38px; padding: 0 var(--space-4); font-size: var(--text-body-size); }
  /* Quiet fallback action — smaller and lower-contrast than the main path,
     so the recovery options sit below the primary "verify" step. */
  .btn-quiet {
    font-size: var(--text-body-size); font-weight: var(--text-body-weight);
    padding: 9px var(--space-3); gap: 6px;
    color: var(--text-body); border-color: var(--color-border);
  }
  .btn-quiet:hover { color: var(--text-heading); border-color: var(--color-grey); }
  .adm-toolbar { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); }
  .adm-select {
    border: 1.5px solid var(--color-border); border-radius: var(--radius-control); padding: 9px var(--space-3);
    font-size: var(--text-body-size); color: var(--text-heading); background: var(--color-surface-card); min-width: 260px;
  }
  .adm-select:focus-visible { border-color: var(--color-accent-fg); box-shadow: var(--focus-ring); outline: none; }
  .adm-card {
    background: var(--color-surface-card); border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-container);
    box-shadow: var(--shadow-sm); overflow: hidden;
  }
  .adm-tablewrap { overflow-x: auto; }
  /* Explicit --text-caption-size (12px), not --text-body-size (14px): the
     table's own header cells, its .adm-code cells, and every toolbar control
     around it (filter-select, search, pagination info) already render at
     caption-size, so leaving the default cell text at body-size made a
     table's "strong"/"muted" text the one oversized element in its own row —
     this unifies every table to one deliberate 12px, audited 2026-08-11. */
  .adm-table { width: 100%; border-collapse: collapse; font-size: var(--text-caption-size); }
  .adm-table th {
    text-align: left; font-size: var(--text-label-size); font-weight: var(--text-label-weight);
    text-transform: uppercase; letter-spacing: .04em; color: var(--color-on-accent);
    background: var(--color-accent); padding: var(--space-3) var(--space-4); white-space: nowrap;
  }
  .adm-table td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border-soft); vertical-align: middle; color: var(--text-body); }
  .adm-table .num { text-align: right; font-variant-numeric: tabular-nums; }
  .adm-table tbody tr:hover { background: var(--color-hover-tint); }
  .adm-strong { color: var(--text-heading); font-weight: var(--text-label-weight); }
  .adm-muted { color: var(--text-body); }
  .adm-code { font-family: ui-monospace, Consolas, monospace; font-size: var(--text-caption-size); color: var(--text-heading); }
  .adm-who { display: inline-flex; align-items: center; gap: var(--space-2); }
  .adm-who b { color: var(--text-heading); font-weight: var(--text-label-weight); white-space: nowrap; }
  .adm-actions { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
  .link-btn.danger { color: var(--color-danger); }
  /* Toolbar sitting directly above a table: search, filters, then a right-aligned action.
     Its controls carry the same soft outline as the card below them. */
  .table-toolbar { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-4); }
  .table-toolbar .tt-end { margin-left: auto; }
  /* Clusters every dropdown filter + the export picker (+ a trailing
     primary action, where a toolbar has one) into a single flex item so
     they wrap and reflow as one group instead of drifting apart from each
     other when the row runs out of space — the search field is the only
     toolbar child left outside this group, per the reference's own
     search-field-left / filter-group-right split. Applies app-wide, not
     just DigiDocs — see design-system.md. */
  .table-toolbar .filter-group { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-left: auto; }
  .search-field.inline { background: var(--color-surface-card); border-color: var(--color-border-faint); width: 300px; height: 38px; }
  .table-toolbar .fchip,
  .table-toolbar .btn-secondary,
  .org-toolbar .fchip,
  .org-toolbar .btn-secondary,
  .org-zoom { border-color: var(--color-border-faint); }
  .table-toolbar .fchip:hover,
  .org-toolbar .fchip:hover { border-color: var(--color-border); }
  /* Compact dropdown filter for a toolbar row — small and clickable, unlike
     the larger form-style select-wrap. */
  .filter-select {
    height: 38px; padding: 0 var(--space-3); border: 1.5px solid var(--color-border-soft);
    border-radius: var(--radius-control); font-size: var(--text-body-size); color: var(--text-heading);
    background: var(--color-surface-card); cursor: pointer; max-width: 190px;
  }
  .filter-select:hover { border-color: var(--color-border); }
  .filter-select:focus-visible { border-color: var(--color-accent-fg); box-shadow: var(--focus-ring); outline: none; }
  /* Medical's toolbars: filter, search and export all carry the same soft
     card-style outline, instead of the faint-until-hover treatment other
     tables' toolbars deliberately use. */
  .med-toolbar.table-toolbar .search-field.inline,
  .med-toolbar.table-toolbar .btn-secondary { border-color: var(--color-border-soft); }
  .med-toolbar.table-toolbar .search-field.inline:hover,
  .med-toolbar.table-toolbar .btn-secondary:hover { border-color: var(--color-border); }

  /* Row action icons */
  .icon-action {
    width: 30px; height: 30px; border-radius: var(--radius-control); border: 1.5px solid transparent;
    background: transparent; color: var(--text-heading); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .icon-action:hover { background: var(--color-accent-tint); color: var(--color-accent-fg); }
  .icon-action:focus-visible { background: var(--color-accent-tint); box-shadow: var(--focus-ring); outline: none; }
  .icon-action:disabled { opacity: .35; cursor: not-allowed; }
  .icon-action.danger { color: var(--color-danger); }
  .icon-action.danger:hover { background: var(--color-danger-tint); color: var(--color-danger); }
  /* Reschedule reads as a neutral, non-destructive action — red stays
     reserved exclusively for Cancel (see .icon-action.danger above). */
  .icon-action.gray { color: var(--color-grey); }

  .adm-pagination {
    display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
    padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border-soft);
  }
  .pg-info { font-size: var(--text-caption-size); color: var(--text-body); }
  .pg-controls { margin-left: auto; display: flex; gap: var(--space-1); align-items: center; }
  .pg-btn, .pg-num {
    min-width: 32px; height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-control);
    border: 1.5px solid var(--color-border); background: var(--color-surface-card); color: var(--text-nav);
    font-size: var(--text-caption-size); font-weight: var(--text-label-weight); cursor: pointer;
  }
  .pg-num { padding: 0; }
  .pg-btn:hover:not(:disabled), .pg-num:hover:not(.on) { border-color: var(--color-accent-fg); color: var(--color-accent-fg); }
  .pg-num.on { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
  .pg-btn:disabled { opacity: .45; cursor: not-allowed; }

  .switch {
    width: 38px; height: 22px; border-radius: var(--radius-pill); border: none; cursor: pointer;
    background: var(--color-grey-light); position: relative; display: inline-block; padding: 0;
  }
  .switch::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
    border-radius: 50%; background: var(--color-switch-knob); transition: transform .15s;
  }
  .switch.on { background: var(--color-accent); }
  .switch.on::after { transform: translateX(16px); }
  .switch.is-locked { background: var(--color-neutral-tint); cursor: not-allowed; }
  .switch.is-locked::after { background: var(--color-grey-light); }

  /* ---------- Organization ---------- */
  /* align-items:center stops a button stretching to the row height, which would
     otherwise make a secondary button taller than the primary beside it. */
  .head-actions { display: flex; gap: var(--space-3); flex: none; align-items: center; }
  .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
  /* Medical dashboard charts: a wide card beside a narrower one (bar + pie,
     or bar + notifications) — same ratio the reference uses. */
  .chart-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-4); margin-bottom: var(--space-5); align-items: start; }
  /* Hospital's per-day chart should read as the same size as its notification
     card, unlike the wider-chart/narrower-legend ratio used elsewhere. */
  .chart-row.equal-cols { grid-template-columns: 1fr 1fr; }
  @media (max-width: 900px) { .chart-row { grid-template-columns: 1fr; } }
  .chart-card-body { display: flex; align-items: center; gap: var(--space-4); }
  .chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); font-size: var(--text-caption-size); color: var(--text-body); }
  .chart-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: middle; }
  .stat-card {
    display: flex; align-items: center; gap: var(--space-3); background: var(--color-surface-card);
    border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-container);
    padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-sm);
  }
  .sc-meta b { display: block; color: var(--text-heading); font-size: var(--text-body-size); }
  .sc-meta span { display: block; color: var(--text-body); font-size: var(--text-caption-size); }

  .fchip-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); }
  .fchip {
    display: inline-flex; align-items: center; gap: 6px; background: var(--color-surface-card); color: var(--text-nav);
    border: 1.5px solid var(--color-border); border-radius: var(--radius-pill);
    padding: 7px var(--space-3); font-size: var(--text-caption-size); cursor: pointer;
  }
  .fchip b { color: var(--text-heading); font-weight: var(--text-label-weight); }
  .fchip:hover { border-color: var(--color-grey); }
  .fchip.on { background: var(--color-accent-tint); border-color: var(--color-accent-fg); color: var(--color-accent-fg); font-weight: var(--text-label-weight); }

  /* Segmented control — the pair sits inside one light-blue capsule. */
  .seg { display: inline-flex; background: var(--color-accent-tint); border-radius: var(--radius-control); padding: 3px; gap: 2px; }
  .seg button {
    background: none; border: none; padding: 0 var(--space-4); height: 32px; border-radius: 6px;
    font-size: var(--text-body-size); color: var(--color-accent-fg); cursor: pointer; white-space: nowrap;
  }
  .seg button.on { background: var(--color-surface-card); color: var(--color-accent-fg); font-weight: var(--text-label-weight); box-shadow: var(--shadow-sm); }

  .info-band {
    display: flex; gap: var(--space-2); align-items: flex-start; background: var(--color-info-bg);
    color: var(--color-info-text); border-radius: var(--radius-container); padding: var(--space-3) var(--space-4);
    font-size: var(--text-caption-size); margin-bottom: var(--space-4);
  }
  .info-band svg { flex: none; margin-top: 1px; }
  /* Warning-toned variant — e.g. the New Tenant form's near-duplicate-name
     check. Same shape as the default info-band, just the warning tokens
     instead of info. */
  .info-band.warn { background: var(--color-warning-tint); color: var(--color-warning); }
  .adm-empty { text-align: center; color: var(--text-body); padding: var(--space-6) var(--space-4); }
  .pc-text b { display: block; color: var(--text-heading); font-weight: var(--text-label-weight); }
  .pc-text span { display: block; color: var(--text-body); font-size: var(--text-caption-size); }
  .adm-who .pc-text { min-width: 0; }

  /* Org chart tree */
  .org-toolbar { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-bottom: var(--space-4); }
  .org-toolbar .btn-inline { margin-left: auto; }
  .org-zoom { display: inline-flex; align-items: center; gap: var(--space-2); border: 1.5px solid var(--color-border); border-radius: var(--radius-pill); padding: 2px var(--space-2); }
  .org-zoom b { font-size: var(--text-caption-size); color: var(--text-heading); min-width: 38px; text-align: center; }
  .org-zoom .icon-btn { width: 28px; height: 28px; border-color: transparent; }
  .org-canvas {
    background: var(--color-surface-card); border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-container);
    box-shadow: var(--shadow-sm); padding: var(--space-5); overflow: auto;
  }
  .org-tree { transform-origin: top left; display: inline-block; min-width: 100%; }
  .org-li { position: relative; }
  .org-kids { margin-left: var(--space-6); padding-left: var(--space-5); border-left: 1.5px solid var(--color-border); }
  .org-kids > .org-li::before {
    content: ""; position: absolute; left: calc(var(--space-5) * -1); top: 26px;
    width: var(--space-5); height: 1.5px; background: var(--color-border);
  }
  .org-node {
    display: inline-flex; align-items: center; gap: var(--space-3); background: var(--color-surface-card);
    border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-container);
    padding: var(--space-3) var(--space-4); margin: var(--space-2) 0; box-shadow: var(--shadow-sm);
    min-width: 320px;
  }
  .org-node.apex { border-color: var(--color-accent-fg); }
  .org-node.apex .avatar { background: var(--color-accent); color: var(--color-on-accent); }
  .org-node.is-hit { border-color: var(--color-accent-fg); background: var(--color-accent-tint); }
  .org-node.is-dim { opacity: .38; }
  .on-text { min-width: 0; }
  .on-text b { display: block; color: var(--text-heading); font-size: var(--text-body-size); }
  .on-text span { display: block; color: var(--text-body); font-size: var(--text-caption-size); }
  .on-count { margin-left: auto; flex: none; font-size: var(--text-caption-size); color: var(--text-body); background: var(--color-canvas); border-radius: var(--radius-pill); padding: 3px var(--space-2); }
  .org-exp {
    flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--color-border);
    background: var(--color-surface-card); color: var(--text-nav); cursor: pointer; display: flex; align-items: center; justify-content: center;
  }
  .org-exp.open { transform: rotate(180deg); }
  .org-exp:hover { border-color: var(--color-accent-fg); color: var(--color-accent-fg); }
  .org-legend { display: flex; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-4); font-size: var(--text-caption-size); color: var(--text-body); }
  .org-legend span { display: inline-flex; align-items: center; gap: 6px; }
  .org-legend .sw { width: 12px; height: 12px; border-radius: 3px; background: var(--color-accent-tint); border: 1.5px solid var(--color-border); display: inline-block; }
  .org-legend .sw.apex { background: var(--color-accent-fg); border-color: var(--color-accent-fg); }

  /* ---------- Life at LFZ: news ---------- */
  .news-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: var(--space-3); align-items: stretch; }
  .news-feature {
    position: relative; overflow: hidden; min-height: 280px; padding: 0; cursor: pointer; text-align: left;
    border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-container); box-shadow: var(--shadow-sm);
    background: var(--color-surface-navy); display: block;
  }
  .news-feature img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s cubic-bezier(.2,.6,.2,1);
  }
  .news-feature:hover img { transform: scale(1.04); }
  /* Scrim decomposed from --color-surface-navy (0,15,41) so overlaid text keeps AA
     contrast. Deeper at the foot, so the headline sits on near-solid colour. */
  .news-feature .nf-body {
    position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 6px;
    padding: var(--space-7) var(--space-5) var(--space-5);
    background: linear-gradient(to top, rgba(0,15,41,.96) 0%, rgba(0,15,41,.86) 38%, rgba(0,15,41,.42) 72%, rgba(0,15,41,0) 100%);
  }
  .news-feature b {
    color: #fff; font-size: var(--text-h2-size); line-height: var(--text-h2-line);
    font-weight: var(--text-h2-weight); letter-spacing: var(--heading-tracking); text-wrap: balance;
  }
  .nf-desc { color: rgba(255,255,255,.86); font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line); max-width: 46ch; }
  .news-feature .nf-date { color: rgba(255,255,255,.66); font-size: var(--text-caption-size); margin-top: var(--space-1); }
  .news-feature:hover { border-color: var(--color-accent-fg); }

  .news-col { display: flex; flex-direction: column; gap: var(--space-3); }
  .news-item {
    flex: 1; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; cursor: pointer;
    background: var(--color-surface-card); border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-container);
    padding: var(--space-4); box-shadow: var(--shadow-sm);
  }
  .news-item:hover { border-color: var(--color-accent-fg); }
  .news-item b { color: var(--text-heading); font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line); }
  .ni-desc { color: var(--text-body); font-size: var(--text-caption-size); }
  .news-item .nf-date { color: var(--color-grey); font-size: var(--text-caption-size); margin-top: auto; }
  .news-pill {
    font-size: var(--text-label-size); font-weight: var(--text-label-weight); padding: 3px var(--space-2);
    border-radius: var(--radius-pill); background: rgba(255,255,255,.92); color: var(--color-surface-navy); width: fit-content;
  }
  .news-pill.subtle { background: var(--color-info-bg); color: var(--color-info-text); }

  /* ---------- Life at LFZ: gallery ---------- */
  .gal-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
  .gal-item { margin: 0; display: flex; flex-direction: column; gap: 6px; }
  .gal-item img, .gal-ph {
    width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-container);
    border: 1.5px solid var(--color-border-soft); object-fit: cover; display: block;
  }
  .gal-ph {
    background: var(--color-canvas); color: var(--color-grey-light);
    display: flex; align-items: center; justify-content: center;
  }
  .gal-item figcaption { font-size: var(--text-caption-size); color: var(--text-body); }


  .dash-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-6); align-items: start; }
  /* Widgets lift a little further off the canvas than flat cards do. */
  .side-card { border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-container); padding: var(--space-4); margin-bottom: var(--space-4); background: var(--color-surface-card); box-shadow: var(--shadow-md); }
  .side-card h3 { font-size: var(--text-body-lg-size); display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
  .ev-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--color-border-soft); }
  .ev-row:first-of-type { border-top: none; }
  .ev-date { flex: none; width: 40px; text-align: center; }
  .ev-date b { display: block; font-size: var(--text-h3-size); color: var(--text-heading); }
  .ev-date span { display: block; font-size: 10px; color: var(--text-body); text-transform: uppercase; }
  .ev-row .t b { display: block; font-size: var(--text-body-size); color: var(--text-heading); }
  .ev-row .t span { font-size: var(--text-caption-size); color: var(--text-body); }
  .ev-when { margin-left: auto; flex: none; font-size: var(--text-caption-size); color: var(--text-body); }

  @media (max-width: 1080px) {
    .dash-layout { grid-template-columns: 1fr; }
    .news-grid { grid-template-columns: 1fr; }
    .gal-strip { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 760px) {
    .app-shell { flex-direction: column; }
    .rail { width: 100%; flex-direction: row; align-items: center; flex-wrap: wrap; }
    .rail-spacer { display: none; }
    .rail-label { display: none; }
    .tu-meta { display: none; }
    .content { padding: var(--space-4); }
  }

  /* ============================= PROTOTYPE NAVIGATOR (review aid, not product UI) ============================= */
  .proto-nav { position: fixed; bottom: var(--space-4); left: var(--space-4); z-index: 500; font-size: var(--text-caption-size); }
  .proto-nav details { background: var(--color-surface-card); border: 1.5px dashed var(--color-grey); border-radius: var(--radius-container); box-shadow: var(--shadow-lg); max-width: 280px; }
  .proto-nav summary { padding: var(--space-3) var(--space-4); cursor: pointer; font-weight: 700; color: var(--text-heading); list-style: none; display: flex; align-items: center; gap: var(--space-2); }
  .proto-nav summary::-webkit-details-marker { display: none; }
  .proto-nav .list { padding: 0 var(--space-3) var(--space-3); display: flex; flex-direction: column; gap: 1px; max-height: 55vh; overflow-y: auto; }
  .proto-nav .list button { text-align: left; background: none; border: none; padding: 6px var(--space-2); border-radius: 6px; color: var(--text-nav); cursor: pointer; font-size: 12px; width: 100%; }
  .proto-nav .list button:hover, .proto-nav .list button[aria-current="true"] { background: var(--color-info-bg); color: var(--color-accent-fg); }
  .proto-nav .grp { font-size: 10px; text-transform: uppercase; color: var(--color-grey); margin: var(--space-2) var(--space-2) 2px; letter-spacing: .04em; }

  /* Medical's role-preview switcher — same "dev aid, not real UI" language
     as .proto-nav above (dashed border, compact), since it's a prototype
     control for switching which role's dashboard shows, not a product control. */
  .proto-role-switcher { position: relative; flex: none; }
  .proto-role-trigger {
    display: inline-flex; align-items: center; gap: 6px; background: var(--color-surface-card);
    border: 1.5px dashed var(--color-grey); border-radius: var(--radius-pill); padding: 5px var(--space-3);
    font-size: var(--text-caption-size); color: var(--text-body); cursor: pointer;
  }
  .proto-role-trigger:hover { border-color: var(--color-accent-fg); color: var(--color-accent-fg); }
  .proto-role-menu {
    position: absolute; top: calc(100% + 6px); right: 0; min-width: 230px; z-index: 60;
    background: var(--color-surface-card); border: 1.5px dashed var(--color-grey); border-radius: var(--radius-container);
    box-shadow: var(--shadow-lg); padding: var(--space-2); display: flex; flex-direction: column; gap: 2px;
  }
  .proto-role-item {
    background: none; border: none; text-align: left; padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-control); font-size: var(--text-caption-size); color: var(--text-heading); cursor: pointer;
  }
  .proto-role-item:hover { background: var(--color-hover-tint); }
  .proto-role-item.on { background: var(--color-accent-tint); color: var(--color-accent-fg); font-weight: var(--text-label-weight); }

  /* 2026-08-11: was a solid navy fill (--color-accent + --color-on-accent);
     now an outline style — border + text in the foreground-safe accent
     (legible in both themes, unlike a solid --color-accent border/text pair
     would be in dark mode), background the same light-blue tint the
     "Upcoming" status pill uses (--color-upcoming-tint). */
  .toast {
    position: fixed; bottom: var(--space-4); right: var(--space-4);
    background: var(--color-upcoming-tint); color: var(--color-accent-fg);
    border: 1.5px solid var(--color-accent-fg);
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); box-shadow: var(--shadow-lg);
    font-size: var(--text-body-size); z-index: 600; max-width: 320px;
  }

  /* ---------- View details modal ---------- */
  .modal-overlay {
    position: fixed; inset: 0; background: rgba(0,15,41,.5);
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-4); z-index: 700;
  }
  .modal-dialog {
    background: var(--color-surface-card); border-radius: var(--radius-container); box-shadow: var(--shadow-lg);
    width: 100%; max-width: 520px; max-height: 85vh; overflow-y: auto; padding: var(--space-5);
  }
  .modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
  .modal-head h3 { font-size: var(--text-h3-size); font-weight: var(--text-h3-weight); }
  .modal-sub { color: var(--text-body); font-size: var(--text-caption-size); margin-top: 2px; }
  .detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4) var(--space-5); }
  .detail-row b { display: block; font-size: var(--text-label-size); font-weight: var(--text-label-weight); color: var(--text-body); text-transform: uppercase; letter-spacing: .03em; margin-bottom: 3px; }
  .detail-row span { display: block; color: var(--text-heading); font-size: var(--text-body-size); }
  @media (max-width: 520px) { .detail-grid { grid-template-columns: 1fr; } }

  /* ============================= PORTAL SHELL (tabs + dock) =============================
     Journey 4 of the Gateway reference: an open portal is a tab in a slim
     chrome strip, not a full navigation swap. Multiple portals can stay open
     at once; minimising collapses one into a floating dock instead of
     closing it, so state is never lost switching between them. */
  /* height (not min-height): the shell is capped to the viewport so pbody's
     overflow-y:auto actually engages — otherwise tall content just grows the
     whole page and drags the sidebar off-screen with it. */
  .portal-shell { display: flex; flex-direction: column; height: 100vh; }
  /* Accent "action blue", not the fixed navy this used to be — every child
     below swaps its hardcoded whites for on-accent tokens so it still holds
     up once dark mode lightens the accent fill instead of darkening it. */
  .pchrome {
    height: 52px; flex: none; display: flex; align-items: center; gap: var(--space-2);
    background: var(--color-accent); color: var(--color-on-accent); padding: 0 var(--space-3) 0 var(--space-2);
  }
  /* Home used to be a separate pill button beside the tab strip; it's now
     the first tab in the strip itself (never closable, never .on — clicking
     it always leaves the portal shell) so switching between Home and any
     open portal is one flat row of tabs instead of two different controls. */
  .ptab-home { font-weight: 700; flex: none; }
  .ptab-home:hover { background: var(--color-on-accent); color: var(--color-accent); }
  .ptabs { display: flex; gap: 4px; margin-left: var(--space-3); min-width: 0; overflow-x: auto; scrollbar-width: none; align-self: flex-end; }
  .ptabs::-webkit-scrollbar { display: none; }
  .ptab {
    display: flex; align-items: center; gap: var(--space-2); background: var(--color-on-accent-wash); border: none;
    border-radius: 10px 10px 0 0; color: var(--color-on-accent); padding: 8px var(--space-3);
    font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
  }
  .ptab.on { background: var(--color-canvas); color: var(--text-heading); font-weight: 700; }
  .ptab .mono, .dockchip .mono { width: 20px; height: 22px; font-size: 9px; border-radius: 999px 999px 5px 5px; margin: 0; }
  .ptab-x { display: inline-flex; border-radius: 5px; padding: 1px; color: inherit; opacity: .6; }
  .ptab-x:hover { opacity: 1; background: var(--color-danger-tint); color: var(--color-danger); }
  .pchrome-acts { margin-left: auto; display: flex; align-items: center; gap: 2px; }
  .pchrome-acts .icon-btn { color: var(--color-on-accent); border-color: transparent; }
  .pchrome-acts .icon-btn:hover { background: var(--color-on-accent-wash); color: var(--color-on-accent); }
  .pchrome-acts .icon-btn.close:hover { background: var(--color-danger-tint); color: var(--color-danger); }
  .pchrome-acts .notif-dot { box-shadow: 0 0 0 2px var(--color-accent); }
  .pchrome-acts .topbar-user { border-color: var(--color-on-accent-wash); margin-left: var(--space-1); }
  .pchrome-acts .topbar-user:hover { background: var(--color-on-accent-wash); }
  .pchrome-acts .tu-meta b { color: var(--color-on-accent); }
  .pchrome-acts .tu-chevron { color: var(--color-on-accent); }
  .pchrome-acts .avatar { background: var(--color-on-accent-wash); color: var(--color-on-accent); }

  .pbody { flex: 1; min-height: 0; position: relative; background: var(--color-canvas); display: flex; flex-direction: column; overflow-y: auto; padding: var(--space-5); }
  /* Medical is a first-class dashboard, not a mocked embed, so it skips the
     padded pbody in favour of a full-bleed sidebar + content row. */
  .pbody.flush { padding: 0; }
  .med-shell { display: flex; flex: 1; min-height: 0; align-items: stretch; }
  .med-main { flex: 1; min-width: 0; min-height: 0; padding: var(--space-5); overflow-y: auto; }
  /* .med-shell/.med-main are shared by every native-shell portal (Medical,
     e-Service, DigiDocs, VMS) — reuse them and the existing .sec-card/
     .stat-row/.chart-row/.filter-select/.status-pill/.adm-table utility
     classes below wherever possible. Only add new rules for genuinely new
     components, each portal using its own class prefix so they can never
     collide: .es-* (e-Service), .dd-* (DigiDocs), .vm-* (VMS). */
  /* ES_CSS_ANCHOR: e-Service-only CSS rules go here (.es-* prefix) */
  .status-pill.es-critical { background: var(--color-danger-tint); color: var(--color-danger); }
  .status-pill.es-critical .dot { background: var(--color-danger); }
  /* Sidebar accordion sub-menus (Food Zone/Service Requests/Surveys/
     Configuration/System) — a nested list under its own .rail-link trigger,
     indented rather than styled as a second-level .rail-link so each reads
     as a sub-menu, not a sibling page. */
  .es-sidebar-submenu { display: flex; flex-direction: column; gap: 1px; padding-left: var(--space-5); margin-bottom: 2px; }
  .es-sidebar-subitem {
    display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
    padding: 6px var(--space-3); border-radius: var(--radius-control); color: var(--text-nav); font-size: var(--text-caption-size);
  }
  .es-sidebar-subitem:hover { background: var(--color-hover-tint); color: var(--text-heading); }
  /* Ticket detail drawer: an inline expanding panel (not a modal-overlay),
     opened by a row's View/Manage action — deliberately avoids the shared
     modal-render/click-outside/Escape wiring so this build never has to
     touch that shared code while DigiDocs/VMS build in parallel. */
  .es-detail-panel { border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-container); background: var(--color-surface-card); box-shadow: var(--shadow-md); padding: var(--space-5); margin-bottom: var(--space-5); }
  .es-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); }
  .es-detail-head h3 { font-size: var(--text-h3-size); font-weight: var(--text-h3-weight); margin-bottom: 2px; }
  .es-timeline { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
  .es-timeline-row { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-caption-size); }
  .es-timeline-row b { color: var(--text-heading); font-weight: var(--text-label-weight); }
  .es-timeline-row span { color: var(--text-body); }
  .es-timeline-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-lfz-navy); margin-top: 4px; flex: none; }
  .es-detail-actions { display: flex; gap: var(--space-3); align-items: flex-end; flex-wrap: wrap; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border-soft); }
  /* Guest create-only flow */
  .es-confirm-card { text-align: center; padding: var(--space-6) var(--space-5); }
  .es-confirm-icon { color: var(--color-success); margin-bottom: var(--space-3); }
  .es-tracking-id { font-family: ui-monospace, Consolas, monospace; font-size: var(--text-h3-size); font-weight: 700; color: var(--text-heading); margin: var(--space-2) 0; }
  .es-word-count { display: block; text-align: right; margin-top: var(--space-1); }
  .es-word-count.over { color: var(--color-danger); }
  /* DD_CSS_ANCHOR: DigiDocs-only CSS rules go here (.dd-* prefix) */
  /* Resets the global ".btn + .btn { margin-top }" rule (meant for stacked
     vertical button lists) inside this horizontal Add Export/Add Import
     pair — without this override the second button sits visibly lower
     than the first despite both being the same height. */
  .dd-add-actions .btn { margin-top: 0; }
  /* View page banner (2026-08-12, from a reference screenshot) — same solid
     accent-fill + on-accent-text pairing .adm-table th already uses, just
     applied to a page-title band instead of a table row, so this isn't a
     new use of navy outside its sanctioned roles. */
  .dd-view-card { background: var(--color-surface-card); border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-container); box-shadow: var(--shadow-sm); overflow: hidden; }
  .dd-view-banner { background: var(--color-accent); color: var(--color-on-accent); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
  .dd-view-banner h1 { color: var(--color-on-accent); margin: 0; font-size: var(--text-h3-size); }
  .dd-view-close {
    background: transparent; border: 1.5px solid var(--color-on-accent); color: var(--color-on-accent);
    border-radius: 50%; width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; cursor: pointer;
  }
  .dd-view-close:hover { background: rgba(255,255,255,.12); }
  .dd-view-body { padding: var(--space-5); }
  /* 3 columns here specifically (not a change to the shared .detail-grid,
     which every other portal's detail/summary view still uses at 2). */
  .dd-view-body .detail-grid { grid-template-columns: repeat(3, 1fr); }
  @media (max-width: 760px) { .dd-view-body .detail-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .dd-view-body .detail-grid { grid-template-columns: 1fr; } }
  .dd-type-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
  .dd-type-chip {
    border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-control); background: var(--color-surface-card);
    padding: var(--space-2) var(--space-3); font-size: var(--text-caption-size); font-weight: var(--text-label-weight);
    color: var(--text-body); cursor: pointer;
  }
  .dd-type-chip:hover { border-color: var(--color-border); }
  .dd-type-chip.on { border-color: var(--color-accent-fg); background: var(--color-accent-tint); color: var(--color-accent-fg); }
  .dd-steps { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; }
  .dd-step { display: flex; align-items: center; gap: var(--space-2); opacity: .55; font-size: var(--text-caption-size); color: var(--text-body); }
  .dd-step.on, .dd-step.done { opacity: 1; }
  .dd-step-num {
    width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; border: 1.5px solid var(--color-border); color: var(--text-body); flex: none;
  }
  .dd-step.on .dd-step-num, .dd-step.done .dd-step-num { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
  .dd-step-line { width: 24px; height: 1px; background: var(--color-border-soft); }
  .dd-section-title { font-size: var(--text-label-size); font-weight: var(--text-label-weight); text-transform: uppercase; letter-spacing: .03em; color: var(--text-body); margin: var(--space-4) 0 var(--space-2); }
  .dd-doc-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-3); border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-control); margin-bottom: var(--space-2);
  }
  .dd-doc-name { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-body-size); color: var(--text-heading); }
  .dd-doc-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 6px; border-radius: var(--radius-pill); }
  .dd-doc-badge.req { background: var(--color-danger-tint); color: var(--color-danger); }
  .dd-doc-badge.opt { background: var(--color-neutral-tint); color: var(--color-grey); }
  .dd-repeat-row { border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-control); padding: var(--space-4); margin-bottom: var(--space-3); position: relative; }
  .dd-repeat-row .form-grid { grid-template-columns: repeat(2, 1fr); }
  .dd-repeat-remove { position: absolute; top: var(--space-2); right: var(--space-2); }
  .dd-calc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: var(--space-2); margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px dashed var(--color-border-soft); }
  .dd-calc-item { font-size: var(--text-caption-size); color: var(--text-body); }
  .dd-calc-item b { display: block; color: var(--text-heading); font-size: var(--text-body-size); }
  .dd-source-item { display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-2) 0; border-top: 1px solid var(--color-border-soft); }
  .dd-source-item:first-child { border-top: none; }
  .dd-modal-wide { max-width: 780px; }
  .dd-reason-box { background: var(--color-danger-tint); border-radius: var(--radius-control); padding: var(--space-3); margin-top: var(--space-3); color: var(--color-danger); font-size: var(--text-caption-size); }
  .dd-fob-warn { background: var(--color-warning-tint); color: var(--color-warning); border-radius: var(--radius-control); padding: var(--space-3); margin-bottom: var(--space-4); font-size: var(--text-caption-size); }
  .dd-denied { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  /* VM_CSS_ANCHOR: VMS-only CSS rules go here (.vm-* prefix) */
  /* Gate Operations' search card — a .sec-card with a thin brand-navy
     accent bar across the top (echoing the reference's own
     .gate-operations-card::before gradient bar), per Temitope's reference
     screenshot. */
  .vm-search-card { position: relative; overflow: hidden; }
  .vm-search-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, var(--color-lfz-navy), transparent);
  }
  .vm-search-heading { color: var(--color-accent); margin: 0 0 var(--space-4); }
  .vm-search-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
  /* A visibly muted variant of .filter-select for the "Year (optional)"
     dropdown specifically — distinct from the white search input beside it. */
  .vm-year-select { background: var(--color-grey-light); border-color: var(--color-grey-light); color: var(--text-heading); }
  /* Sidebar-footer Configuration dropdown (SUPERADMIN/LFZAdmin only) —
     matches the reference's own collapsible footer menu; items are indented
     .rail-link-style buttons, not a new visual language. */
  .vm-config { display: flex; flex-direction: column; }
  .vm-config-menu { display: flex; flex-direction: column; padding: 2px 0 2px var(--space-3); }
  .vm-config-item {
    display: flex; align-items: center; text-align: left; background: none; border: none; cursor: pointer;
    padding: 8px var(--space-3); border-radius: var(--radius-control); color: var(--text-nav);
    font-size: var(--text-caption-size); font-family: inherit;
  }
  .vm-config-item:hover { background: var(--color-hover-tint); color: var(--text-heading); }
  /* RG_CSS_ANCHOR: Regulatory-only CSS rules go here (.rg-* prefix). Every
     Regulatory surface reuses .sec-card/.stat-row/.chart-row/.table-toolbar/
     .filter-select/.adm-table/.status-pill as-is — no bespoke layout needed
     since the reference itself is plain filter-bar + table + modal screens. */
  .rg-denied { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  /* Cumulative report download: outline at rest (it's the secondary of the
     two report actions), but fills solid accent on hover to read as the
     more consequential of the two — a deliberate exception to the plain
     border-darken .btn-secondary:hover everywhere else. */
  .rg-cumulative-btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
  /* Simulated file-upload affordance for the Upload Signature form — same
     "not really wired" convention as DigiDocs' attachment note, just a
     clickable dashed drop zone rather than a real <input type="file">. */
  .upload-dropzone {
    display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left;
    border: 1.5px dashed var(--color-border); border-radius: var(--radius-container);
    background: var(--color-canvas); color: var(--text-body); padding: var(--space-4);
    margin: var(--space-2) 0 var(--space-5); cursor: pointer;
  }
  .upload-dropzone:hover { border-color: var(--color-accent); color: var(--text-heading); }
  .upload-dropzone b { display: block; color: var(--text-heading); font-size: var(--text-body-size); }
  .upload-dropzone span span { display: block; font-size: var(--text-caption-size); margin-top: 2px; }
  /* Repeating NEPZA schedule tables (Import/Production/Immigration/
     Employment/Visa Schedule) — compact inline-editable cells inside the
     existing .adm-table shell, not a new table system. */
  .rg-repeat-table td { padding: 6px var(--space-2); }
  .rg-cell-input {
    width: 100%; min-width: 90px; border: 1.5px solid var(--color-border-soft); border-radius: 6px;
    background: var(--color-surface); color: var(--text-heading); font-size: var(--text-caption-size);
    padding: 5px 7px; font-family: inherit;
  }
  .rg-cell-input:focus-visible { outline: none; border-color: var(--color-accent); }
  .rg-cell-input:disabled { background: var(--color-canvas); color: var(--text-body); }
  .rg-form-note { font-size: var(--text-caption-size); color: var(--text-body); margin: -6px 0 var(--space-3); }
  /* ST_CSS_ANCHOR: Store-only CSS rules go here (.st-* prefix). Store reuses
     .sec-card/.stat-row/.chart-row/.table-toolbar/.filter-select/.adm-table/
     .status-pill/.detail-grid/.form-grid/.modal-overlay as-is; the only
     bespoke rule is a repeating item-row wrapper for the New Requisition/
     New GRN item lists, matching the shape of DigiDocs' own .dd-repeat-row
     without reusing that class directly. */
  .st-repeat-row { border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-control); padding: var(--space-4); margin-bottom: var(--space-3); position: relative; }
  .st-repeat-row .form-grid { grid-template-columns: repeat(2, 1fr); }
  .st-repeat-remove { position: absolute; top: var(--space-2); right: var(--space-2); }
  /* SE_CSS_ANCHOR: Security Excellence-only CSS rules go here (.se-* prefix) */
  /* Case-type multi-select for the incident report form — no existing
     shared class covers a checkbox grid, so this is a small SE-only
     addition rather than a reused one. */
  .se-case-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
  .se-case-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-body-size); color: var(--text-body); cursor: pointer; }
  .se-case-item input { margin: 0; }
  @media (max-width: 620px) { .se-case-grid { grid-template-columns: 1fr; } }
  /* RMS_CSS_ANCHOR: RMS (HR Portal)-only CSS rules go here (.rms-* prefix) */
  .rms-kra-card { margin-bottom: var(--space-4); }
  .rms-kra-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
  .rms-kra-head h3 { font-size: var(--text-h3-size); font-weight: var(--text-h3-weight); }
  .rms-target-list { margin: var(--space-2) 0 var(--space-4); padding-left: 1.2em; color: var(--text-body); font-size: var(--text-body-size); }
  .rms-target-list li { margin-bottom: 4px; }
  .rms-rating-compare { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border-soft); }
  .rms-rating-col b { display: block; font-size: var(--text-label-size); font-weight: var(--text-label-weight); text-transform: uppercase; letter-spacing: .03em; color: var(--text-body); margin-bottom: 6px; }
  .rms-rating-col p { margin-top: 6px; color: var(--text-body); font-size: var(--text-caption-size); }
  @media (max-width: 620px) { .rms-rating-compare { grid-template-columns: 1fr; } }
  .rms-value-card h4 { font-size: var(--text-body-lg-size); font-weight: var(--text-h3-weight); margin-bottom: var(--space-3); }
  .rms-kicker { display: block; font-size: var(--text-label-size); font-weight: var(--text-label-weight); letter-spacing: .08em; color: var(--color-accent-fg); text-transform: uppercase; margin-bottom: var(--space-2); }
  .rms-quicklinks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
  .rms-quicklink-card { display: block; text-align: left; background: var(--color-surface-card); border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-container); padding: var(--space-4); cursor: pointer; text-decoration: none; }
  .rms-quicklink-card:hover { border-color: var(--color-border); }
  .rms-quicklink-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-control); margin-bottom: var(--space-3); }
  .rms-tone-accent { background: var(--color-accent-tint); color: var(--color-accent-fg); }
  .rms-tone-warning { background: var(--color-warning-tint); color: var(--color-warning); }
  .rms-tone-success { background: var(--color-success-tint); color: var(--color-success); }
  .rms-quicklink-card b { display: block; font-size: var(--text-body-lg-size); font-weight: var(--text-h3-weight); color: var(--text-heading); margin-bottom: 4px; }
  .rms-quicklink-card > span { display: block; color: var(--text-body); font-size: var(--text-caption-size); }
  .rms-quicklink-open { color: var(--color-accent-fg); font-weight: var(--text-label-weight); margin-top: var(--space-3); display: flex; align-items: center; gap: 4px; }
  .rms-row-card { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border-soft); }
  .rms-row-card:first-child { border-top: none; }
  .rms-row-main { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
  .rms-row-title { display: flex; align-items: center; gap: var(--space-2); }
  .rms-period-badge { font-size: var(--text-caption-size); color: var(--text-body); background: var(--color-neutral-tint); padding: 2px var(--space-2); border-radius: var(--radius-pill); }
  .rms-row-meta, .rms-row-stats { font-size: var(--text-caption-size); color: var(--text-body); }
  .rms-row-stats { display: flex; gap: var(--space-4); }
  .rms-row-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
  .rms-profile-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; }
  .rms-profile-avatar { width: 56px; height: 56px; font-size: var(--text-h2-size); flex: none; }
  .rms-profile-head h3 { font-size: var(--text-h2-size); font-weight: var(--text-h2-weight); }
  .rms-profile-head p { color: var(--text-body); font-size: var(--text-body-size); margin-top: 2px; }
  /* "Find a colleague" typeahead — same positioned-popup shape as
     .export-menu (border/shadow/radius/z-index), just with two-line
     name+title suggestion rows instead of menu items. */
  .rms-emp-search-wrap { position: relative; flex: none; }
  .rms-emp-search-wrap .search-field.inline { width: 240px; }
  .rms-emp-suggestions {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0;
    background: var(--color-surface-card); border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-container);
    box-shadow: var(--shadow-lg); padding: var(--space-2); display: flex; flex-direction: column; gap: 2px; z-index: 60; max-height: 280px; overflow-y: auto;
  }
  .rms-emp-suggestion {
    display: flex; flex-direction: column; align-items: flex-start; width: 100%; text-align: left;
    background: none; border: none; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); cursor: pointer;
  }
  .rms-emp-suggestion:hover { background: var(--color-hover-tint); }
  .rms-emp-suggestion b { font-size: var(--text-body-size); color: var(--text-heading); font-weight: var(--text-label-weight); }
  .rms-emp-suggestion span { font-size: var(--text-caption-size); color: var(--text-body); }
  .rms-emp-suggestions-empty { padding: var(--space-2) var(--space-3); font-size: var(--text-caption-size); color: var(--text-body); }
  .rms-tracked-label { letter-spacing: .15em; text-transform: uppercase; }
  /* The One Portal Low/Medium/High scoring system, as an interactive
     selector (rmsRatingBadge is its read-only counterpart). Tones reuse the
     same danger/warning/success mapping rmsRatingBadge already uses for
     Low/Medium/High, just as a selectable fill instead of a static pill. */
  .rms-score-pills { display: flex; gap: var(--space-2); }
  .rms-score-pill { flex: 1; padding: 8px var(--space-3); border: 1.5px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-card); color: var(--text-heading); cursor: pointer; font-size: var(--text-body-size); font-weight: var(--text-label-weight); }
  .rms-score-pill:hover { background: var(--color-hover-tint); }
  /* Selected state for the interactive selector (rmsScorePillsInput) is
     always accent blue — the one interactive color, per the design system.
     The r1-r4 modifiers below are higher-specificity overrides used only by
     the read-only Scoring Logic legend, which intentionally keeps the
     source doc's own red/amber/blue/green scheme (r1=D r2=C r3=B r4=A; B
     borrows --color-accent since there's no dedicated "blue" status token
     and the doc's B column is already blue). */
  .rms-score-pill.on { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
  .rms-score-pill.on.r1 { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-on-accent); }
  .rms-score-pill.on.r2 { background: var(--color-warning); border-color: var(--color-warning); color: var(--color-on-accent); }
  .rms-score-pill.on.r3 { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
  .rms-score-pill.on.r4 { background: var(--color-success); border-color: var(--color-success); color: var(--color-on-accent); }
  .rms-progress-bar-track { height: 8px; border-radius: var(--radius-pill); background: var(--color-neutral-tint); overflow: hidden; margin: var(--space-3) 0; }
  .rms-progress-bar-fill { height: 100%; background: var(--color-accent); border-radius: var(--radius-pill); }
  /* Computed score summary card (KPI Score / Values Score), and the large
     grade badge it resolves to — reused on Appraisal/Value Assessment
     pages and the Scoring Logic screen's worked example. */
  .rms-score-summary-row { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
  .rms-score-value { display: block; font-size: var(--text-display-size); font-weight: var(--text-display-weight); color: var(--text-heading); line-height: 1; }
  .rms-score-formula { display: block; color: var(--text-body); font-size: var(--text-caption-size); margin-top: 4px; }
  .rms-score-arrow { color: var(--color-grey); flex: none; }
  .rms-grade-badge { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-container); font-size: var(--text-h1-size); font-weight: 700; color: var(--color-on-accent); flex: none; }
  .rms-grade-badge.grade-A { background: var(--color-success); }
  .rms-grade-badge.grade-B { background: var(--color-accent); }
  .rms-grade-badge.grade-C { background: var(--color-warning); }
  .rms-grade-badge.grade-D { background: var(--color-danger); }
  /* PMS's 5th grade tier (E, "Poor") — a muted tint+grey pairing, same as
     status-pill's own "neutral" tone, instead of a 5th saturated fill;
     overrides the base color: var(--color-on-accent) above since same/
     higher specificity (one class vs two) declared later in the sheet. */
  .rms-grade-badge.grade-E { background: var(--color-neutral-tint); color: var(--color-grey); }
  /* Scoring Logic screen — step cards, formula callouts, example tables,
     the 4×4 final-rating matrix, and the closing takeaway banner. */
  .rms-step-head { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
  .rms-step-head h3 { margin-bottom: 2px; }
  .rms-step-question { color: var(--text-body); font-style: italic; font-size: var(--text-body-size); }
  .rms-formula-box { background: var(--color-accent-tint); color: var(--color-accent-fg); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); font-weight: 600; margin: var(--space-3) 0; text-align: center; }
  .rms-step-result { text-align: center; font-size: var(--text-body-lg-size); font-weight: 600; color: var(--text-heading); display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; }
  .rms-example-table-wrap { overflow-x: auto; margin: var(--space-3) 0; }
  .rms-example-table { width: 100%; border-collapse: collapse; font-size: var(--text-body-size); }
  .rms-example-table th { text-align: left; padding: var(--space-2) var(--space-3); background: var(--color-canvas); color: var(--text-heading); font-weight: 600; }
  .rms-example-table td { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-border-soft); color: var(--text-body); }
  .rms-grade-chip { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-control); font-weight: 700; color: var(--color-on-accent); flex: none; }
  .rms-grade-chip.grade-A { background: var(--color-success); }
  .rms-grade-chip.grade-B { background: var(--color-accent); }
  .rms-grade-chip.grade-C { background: var(--color-warning); }
  .rms-grade-chip.grade-D { background: var(--color-danger); }
  .rms-grade-chip.grade-E { background: var(--color-neutral-tint); color: var(--color-grey); }
  .rms-matrix-wrap { overflow-x: auto; margin: var(--space-3) 0; }
  .rms-matrix { border-collapse: separate; border-spacing: 4px; width: 100%; min-width: 480px; }
  .rms-matrix th, .rms-matrix td { padding: var(--space-3); text-align: center; border-radius: var(--radius-control); font-weight: 700; font-size: var(--text-body-size); }
  .rms-matrix thead th { background: var(--color-canvas); color: var(--text-heading); font-size: var(--text-caption-size); font-weight: 600; }
  .rms-matrix tbody th { background: var(--color-canvas); color: var(--text-heading); font-size: var(--text-caption-size); font-weight: 600; white-space: nowrap; }
  .rms-matrix .grade-A { background: var(--color-success-tint); color: var(--color-success); }
  .rms-matrix .grade-B { background: var(--color-accent-tint); color: var(--color-accent-fg); }
  .rms-matrix .grade-C { background: var(--color-warning-tint); color: var(--color-warning); }
  .rms-matrix .grade-D { background: var(--color-danger-tint); color: var(--color-danger); }
  .rms-combine-op { font-size: 22px; font-weight: 700; color: var(--color-grey); }
  .rms-takeaway { text-align: center; }
  .rms-takeaway-row { display: flex; justify-content: center; align-items: center; gap: var(--space-4); font-weight: 600; color: var(--text-heading); font-size: var(--text-body-lg-size); flex-wrap: wrap; }
  .rms-takeaway-arrow { font-size: 22px; color: var(--color-accent-fg); margin: var(--space-2) 0; }
  .rms-takeaway h3 { font-size: var(--text-h1-size); color: var(--color-accent-fg); }
  /* Scoring Logic explainer page */
  .rms-scoring-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
  .rms-scoring-card { background: var(--color-surface-card); border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-container); padding: var(--space-3); text-align: center; box-shadow: var(--shadow-sm); }
  .rms-scoring-card .rms-score-pill { display: inline-block; margin-bottom: var(--space-2); padding-left: var(--space-3); padding-right: var(--space-3); font-size: var(--text-caption-size); }
  .rms-scoring-card h4 { font-size: var(--text-body-size); font-weight: var(--text-h3-weight); margin-bottom: 4px; }
  .rms-scoring-card p { color: var(--text-body); font-size: var(--text-caption-size); }
  @media (max-width: 760px) { .rms-scoring-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 480px) { .rms-scoring-grid { grid-template-columns: 1fr; } }
  /* PMS's own 5-grade legend — same .rms-scoring-card shell as RMS's
     4-column grid above, just one more column. perf-pill-X modifiers are
     letter-keyed (not RMS's r1-r4 numeric ones, which mean different
     colors at different positions in a 5-tier vs 4-tier scale) and, like
     RMS's own r1-r4, reserved for this read-only legend only — the
     interactive selector (perfScorePillsInput) never carries one, so it
     stays accent blue via .rms-score-pill.on alone. */
  .perf-scoring-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
  @media (max-width: 900px) { .perf-scoring-grid { grid-template-columns: repeat(3, 1fr); } }
  @media (max-width: 560px) { .perf-scoring-grid { grid-template-columns: repeat(2, 1fr); } }
  .rms-score-pill.on.perf-pill-A { background: var(--color-success); border-color: var(--color-success); color: var(--color-on-accent); }
  .rms-score-pill.on.perf-pill-B { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
  .rms-score-pill.on.perf-pill-C { background: var(--color-warning); border-color: var(--color-warning); color: var(--color-on-accent); }
  .rms-score-pill.on.perf-pill-D { background: var(--color-danger); border-color: var(--color-danger); color: var(--color-on-accent); }
  .rms-score-pill.on.perf-pill-E { background: var(--color-neutral-tint); border-color: var(--color-border); color: var(--color-grey); }
  .rms-flow-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; color: var(--color-grey); }
  .rms-flow-step { flex: 1; min-width: 180px; background: var(--color-canvas); border-radius: var(--radius-control); padding: var(--space-3); text-align: left; }
  .rms-flow-step b { display: block; color: var(--text-heading); margin: 4px 0 2px; }
  /* :not() exclusions keep this from beating the grade chip/badge's own
     color: var(--color-on-accent) — same specificity (two classes) with
     this rule declared later in the sheet meant the chip/badge nested
     inside a .rms-flow-step (e.g. "Putting it all together"'s worked
     example) rendered dark, illegible text on its accent-blue fill. */
  .rms-flow-step span:not(.rms-grade-chip):not(.rms-grade-badge) { color: var(--text-body); font-size: var(--text-caption-size); }
  .rms-flow-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--color-accent); color: var(--color-on-accent); font-size: var(--text-caption-size); font-weight: 700; }
  /* PMS_LANDING_CSS: HR Information (PMS) landing page — built alongside the
     RMS redesign at the user's request, mirroring the reference's
     Landing.razor page-by-page (hero, Who We Are, Our Values, Onboarding
     Resources, help callout, footer) with OnePortal's own tokens standing in
     for the reference's hardcoded palette (its red CTAs/labels become
     --color-accent per the one-interactive-color rule; its solid navy chrome
     maps to --color-surface-navy, the token already reserved for full-bleed
     marketing/gateway surfaces). */
  .pms-landing { display: flex; flex-direction: column; }
  .pms-nav { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--color-border-soft); background: var(--color-surface-header); }
  .pms-nav-links { display: flex; gap: var(--space-5); margin-right: auto; margin-left: var(--space-6); }
  .pms-nav-link { background: none; border: none; padding: 0; font-size: var(--text-body-size); color: var(--text-nav); cursor: pointer; }
  .pms-nav-link.on { color: var(--color-accent-fg); font-weight: var(--text-label-weight); }
  .pms-nav-link:hover { color: var(--color-accent-fg); }
  /* Hero background is the reference's real staff photo (HR Homepage
     picture.png, copied in from the reference's wwwroot/images) — the
     overlay is a navy-tinted scrim decomposed from --color-surface-navy's
     own rgb (0,15,41), the same approach already used for
     .auth-brand-slides/.news-feature's photo scrims, so it stays token-
     derived instead of a raw black rgba(). */
  .pms-hero { position: relative; background: var(--color-surface-navy) url('HR%20Homepage%20picture.png') center/cover no-repeat; color: var(--color-on-accent); padding: var(--space-8) var(--space-6); text-align: center; overflow: hidden; }
  .pms-hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,15,41,.35) 0%, rgba(0,15,41,.72) 100%); }
  .pms-hero-content { position: relative; max-width: 640px; margin: 0 auto; }
  /* The global "h1,h2,h3,h4{color:var(--text-heading)}" rule directly
     matches these headings (a same-element selector always beats inherited
     color, regardless of the ancestor's specificity), so it silently wins
     over .pms-hero/.pms-help-callout's inherited on-accent color unless
     restated here explicitly. */
  .pms-hero-content h1 { color: var(--color-on-accent); font-size: var(--text-display-size); line-height: var(--text-display-line); font-weight: var(--text-display-weight); letter-spacing: var(--heading-tracking); margin-bottom: var(--space-4); }
  .pms-hero-content p { font-size: var(--text-body-lg-size); color: var(--color-on-accent); margin-bottom: var(--space-5); }
  .pms-btn-on-navy { border: 1.5px solid var(--color-on-accent); color: var(--color-on-accent); background: transparent; }
  .pms-btn-on-navy:hover { background: var(--color-on-accent); color: var(--color-accent); }
  .pms-section { padding: var(--space-7) var(--space-6); max-width: 1080px; margin: 0 auto; width: 100%; }
  .pms-section-head { text-align: center; max-width: 640px; margin: 0 auto var(--space-6); }
  .pms-kicker { display: block; font-size: var(--text-label-size); font-weight: var(--text-label-weight); letter-spacing: .08em; color: var(--color-accent-fg); text-transform: uppercase; margin-bottom: var(--space-2); }
  .pms-section-head h2 { font-size: var(--text-h1-size); font-weight: var(--text-h1-weight); letter-spacing: var(--heading-tracking); margin-bottom: var(--space-2); }
  .pms-section-head p { color: var(--text-body); font-size: var(--text-body-lg-size); }
  .pms-pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
  .pms-pillar-card { background: var(--color-surface-card); border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-container); padding: var(--space-5); box-shadow: var(--shadow-sm); }
  .pms-pillar-rule { display: block; width: 32px; height: 3px; background: var(--color-accent); border-radius: var(--radius-pill); margin-bottom: var(--space-3); }
  .pms-pillar-card h4 { font-size: var(--text-label-size); font-weight: var(--text-h3-weight); letter-spacing: .06em; margin-bottom: var(--space-2); }
  .pms-pillar-card p { color: var(--text-body); font-size: var(--text-body-size); }
  .pms-values-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-5); margin-bottom: var(--space-6); flex-wrap: wrap; }
  .pms-values-head p { color: var(--text-body); max-width: 320px; }
  .pms-value-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }
  .pms-value-card { background: var(--color-surface-card); border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-container); padding: var(--space-4); }
  .pms-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-bottom: var(--space-2); }
  .pms-value-card h5 { font-size: var(--text-body-lg-size); font-weight: var(--text-h3-weight); margin-bottom: 6px; }
  .pms-value-card p { color: var(--text-body); font-size: var(--text-caption-size); }
  .pms-onboarding { background: var(--color-canvas); max-width: none; }
  .pms-onboarding > * { max-width: 1080px; margin-left: auto; margin-right: auto; }
  .pms-resource-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
  .pms-resource-card { background: var(--color-surface-card); border: 1.5px solid var(--color-border-soft); border-radius: var(--radius-container); padding: var(--space-5); }
  .pms-resource-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-control); margin-bottom: var(--space-3); }
  .pms-tone-accent { background: var(--color-accent-tint); color: var(--color-accent-fg); }
  .pms-tone-warning { background: var(--color-warning-tint); color: var(--color-warning); }
  .pms-resource-card h5 { font-size: var(--text-body-lg-size); font-weight: var(--text-h3-weight); margin-bottom: 6px; }
  .pms-resource-card p { color: var(--text-body); font-size: var(--text-body-size); margin-bottom: var(--space-3); }
  .pms-resource-link { background: none; border: none; padding: 0; color: var(--color-accent-fg); font-size: var(--text-body-size); font-weight: var(--text-label-weight); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
  .pms-resource-link:hover { text-decoration: underline; }
  .pms-help-callout { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); background: var(--color-surface-navy); color: var(--color-on-accent); border-radius: var(--radius-container); padding: var(--space-6); flex-wrap: wrap; }
  .pms-help-callout h3 { color: var(--color-on-accent); font-size: var(--text-h2-size); margin-bottom: 6px; }
  .pms-help-callout p { color: var(--color-on-accent); max-width: 480px; }
  .pms-footer { text-align: center; padding: var(--space-5); color: var(--text-body); font-size: var(--text-caption-size); border-top: 1px solid var(--color-border-soft); }
  @media (max-width: 900px) { .pms-pillar-grid { grid-template-columns: 1fr; } }
  /* EX_CSS_ANCHOR: Exit Management-only CSS rules go here (.ex-* prefix) */
  .ex-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
  .ex-card-head h3 { margin: 0; }
  .ex-checklist { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-3) 0 var(--space-4); }
  .ex-checklist-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-soft); border-radius: var(--radius-control); cursor: pointer; }
  .ex-checklist-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-accent); flex: none; }
  .ex-radio-row { display: flex; gap: var(--space-5); margin: var(--space-2) 0 var(--space-4); }
  .ex-radio-row label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-body-size); color: var(--text-heading); cursor: pointer; }
  .ex-radio-row input[type="radio"] { width: 18px; height: 18px; accent-color: var(--color-accent); }
  .ex-rating-wrap { overflow-x: auto; margin-bottom: var(--space-4); }
  .ex-rating-table { width: 100%; border-collapse: collapse; font-size: var(--text-caption-size); }
  .ex-rating-table th, .ex-rating-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-soft); text-align: center; white-space: nowrap; }
  .ex-rating-table td:first-child { text-align: left; color: var(--text-heading); white-space: normal; }
  .ex-rating-table input[type="radio"] { width: 17px; height: 17px; accent-color: var(--color-accent); }
  .ex-clearance-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border-soft); border-radius: var(--radius-control); margin-bottom: var(--space-2); }
  .ex-cl-meta b { display: block; font-size: var(--text-body-size); color: var(--text-heading); }
  .ex-cl-meta span { display: block; font-size: var(--text-caption-size); color: var(--text-body); margin-top: 2px; }
  .ex-locked-note { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-body); font-size: var(--text-caption-size); }
  .ex-reasons-grid { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
  .ex-reasons-grid label { display: flex; align-items: center; gap: var(--space-3); cursor: pointer; font-size: var(--text-body-size); color: var(--text-heading); }
  .ex-reasons-grid input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--color-accent); flex: none; }
  .ex-open-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  @media (max-width: 900px) { .ex-open-cols { grid-template-columns: 1fr; } }
  .ex-open-q { margin-bottom: var(--space-4); }
  .ex-open-q label { display: block; font-size: var(--text-label-size); font-weight: var(--text-label-weight); color: var(--text-body); margin-bottom: 6px; }
  .ex-open-q textarea { width: 100%; font-family: inherit; font-size: var(--text-body-size); color: var(--text-heading); background: var(--color-surface-card); border: 1px solid var(--color-border); border-radius: var(--radius-control); padding: var(--space-3); resize: vertical; }
  .ex-review-block { background: var(--color-canvas); border-radius: var(--radius-container); padding: var(--space-4); }
  .ex-review-block h4 { font-size: var(--text-body-lg-size); margin: var(--space-4) 0 var(--space-2); }
  .ex-review-block h4:first-child { margin-top: 0; }
  /* EE_CSS_ANCHOR: Equipment Efficiency-only CSS rules go here (.ee-* prefix) */
  .ee-bar-track { display: inline-block; width: 72px; height: var(--space-1); border-radius: var(--radius-pill); background: var(--color-neutral-tint); vertical-align: middle; overflow: hidden; }
  .ee-bar-fill { display: block; height: 100%; border-radius: var(--radius-pill); }
  .ee-bar-fill.ee-tone-util { background: var(--color-lfz-navy); }
  .ee-bar-fill.ee-tone-up { background: var(--color-success); }
  .ee-bar-fill.ee-tone-idle { background: var(--color-warning); }
  .ee-bar-fill.ee-tone-brk { background: var(--color-danger); }
  .ee-bar-label { display: inline-block; margin-left: var(--space-2); font-size: var(--text-caption-size); color: var(--text-body); vertical-align: middle; }
  .ee-task-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); margin: var(--space-3) 0 var(--space-4); }
  .ee-task-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-body-size); color: var(--text-body); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-soft); border-radius: var(--radius-control); cursor: pointer; }
  .ee-task-item.on { color: var(--text-heading); border-color: var(--color-accent); background: var(--color-accent-tint); }
  .ee-task-item input { accent-color: var(--color-accent); }
  /* TP_CSS_ANCHOR: Truck Park-only CSS rules go here (.tp-* prefix) */
  /* No new rules needed — Truck Park reuses .stat-row/.chart-row/.sec-card/
     .sec-row/.table-toolbar/.filter-group/.adm-table/.status-pill/.form-card
     as-is, same as Equipment Efficiency. */
  /* The "embedded frame" card — every portal WITHOUT a built-out interior
     gets this same dashed-border mock, with a generic skeleton placeholder. */
  .pmock { flex: 1; margin: 0 auto; max-width: 1080px; width: 100%; border: 1px dashed var(--color-border); border-radius: var(--radius-container); background: var(--color-surface-card); display: flex; flex-direction: column; overflow: hidden; }
  .pmock-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-soft); flex: none; }
  .pmock-head b { font-size: var(--text-body-lg-size); display: block; }
  .pmock-head span { font-size: var(--text-caption-size); color: var(--text-body); display: block; }
  .pmock-body { padding: var(--space-5); overflow-y: auto; flex: 1; }

  .skel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-3); }
  .skel-block, .skel-row {
    border-radius: var(--radius-control);
    background: linear-gradient(100deg, var(--color-border-soft) 40%, var(--color-canvas) 50%, var(--color-border-soft) 60%);
    background-size: 200% 100%; animation: shim 1.6s infinite linear;
  }
  .skel-block { height: 84px; }
  .skel-row { height: 12px; margin-bottom: var(--space-3); }
  .skel-row.w1 { width: 62%; } .skel-row.w2 { width: 78%; } .skel-row.w3 { width: 45%; }
  @keyframes shim { to { background-position: -200% 0; } }
  @media (prefers-reduced-motion: reduce) { .skel-block, .skel-row { animation: none; } }
  .portal-note { margin-top: var(--space-2); font-size: var(--text-caption-size); color: var(--text-body); display: flex; gap: 7px; align-items: center; }

  .portal-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-7); }
  .portal-empty h3 { font-size: var(--text-h2-size); font-weight: var(--text-h2-weight); margin: var(--space-4) 0 6px; }
  .portal-empty p { color: var(--text-body); font-size: var(--text-body-size); max-width: 34ch; margin: 0 0 var(--space-5); }

  .dock {
    position: absolute; left: 50%; bottom: var(--space-4); transform: translateX(-50%);
    display: flex; align-items: center; gap: var(--space-2); background: rgba(0,15,41,.92); backdrop-filter: blur(10px);
    border: 1px solid rgba(160,180,230,.25); border-radius: var(--radius-container); padding: var(--space-2);
    box-shadow: var(--shadow-lg); z-index: 40;
  }
  .dock-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(201,212,238,.6); padding: 0 4px 0 6px; }
  .dockchip { display: flex; align-items: center; gap: var(--space-2); background: rgba(255,255,255,.08); border: none; border-radius: 11px; color: #E4EAF8; padding: 7px 11px; font-size: 12px; font-weight: 600; cursor: pointer; }
  .dockchip:hover { background: rgba(255,255,255,.16); }
  .dockchip .ptab-x { opacity: .6; }

  @media (max-width: 760px) {
    .ptabs { display: none; }
    .dock { left: var(--space-3); right: var(--space-3); transform: none; justify-content: flex-start; overflow-x: auto; }
  }

  /* ============================= UI-REBUILD ADDITIONS =============================
     Blazor-specific extras layered on the design package's stylesheet. */
  /* Queued toasts: a fixed stack; each .toast inside is static so they flow. */
  .toast-stack { position: fixed; bottom: var(--space-5); right: var(--space-5); z-index: 4000;
    display: flex; flex-direction: column; gap: var(--space-2); align-items: flex-end; }
  .toast-stack .toast { position: static; cursor: pointer; }
  @media (max-width: 480px) { .toast-stack { left: var(--space-3); right: var(--space-3); align-items: stretch; } }

  /* Phase 6: topbar on narrow screens — the fixed-width search field pushed
     the account button past the viewport edge (46px horizontal scroll at
     375px). Search flexes down instead; title truncates. */
  @media (max-width: 640px) {
    .topbar { padding-left: var(--space-3); padding-right: var(--space-3); gap: var(--space-2); }
    .topbar .h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
    .topbar-right { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
    .search-field { width: auto; flex: 1 1 120px; min-width: 0; max-width: 220px; }
  }
  /* Phase 7e: horizontal org-chart orientation — classic top-down tree with
     children spread side-by-side. The default (vertical) layout is the
     indented list; .org-tree.horiz switches every level to row flow with
     CSS-drawn connector rails. */
  .org-tree.horiz .org-li { display: flex; flex-direction: column; align-items: center; }
  .org-tree.horiz .org-node { margin: 0; min-width: 220px; }
  .org-tree.horiz .org-kids {
    display: flex; align-items: flex-start; gap: var(--space-3);
    margin-left: 0; padding-left: 0; border-left: none;
    margin-top: 44px; position: relative;
  }
  /* stub down from the parent node to the sibling rail */
  .org-tree.horiz .org-kids::before {
    content: ""; position: absolute; top: -44px; left: 50%;
    width: 1.5px; height: 22px; background: var(--color-border);
  }
  /* per child: stub from the rail down to the node + the rail segment */
  .org-tree.horiz .org-kids > .org-li { padding-top: 0; }
  .org-tree.horiz .org-kids > .org-li::before {
    content: ""; position: absolute; top: -22px; left: 50%;
    width: 1.5px; height: 22px; background: var(--color-border);
  }
  .org-tree.horiz .org-kids > .org-li::after {
    content: ""; position: absolute; top: -22px; left: 0; right: 0;
    height: 1.5px; background: var(--color-border);
  }
  .org-tree.horiz .org-kids > .org-li:first-child::after { left: 50%; }
  .org-tree.horiz .org-kids > .org-li:last-child::after { right: 50%; }
  .org-tree.horiz .org-kids > .org-li:only-child::after { display: none; }
  /* Phase 7g: news cards are anchors now (the prototype used buttons) — kill
     the UA underline/link-blue so they read as cards, not hyperlinks. */
  .news-feature, .news-item,
  .news-feature:hover, .news-item:hover { text-decoration: none; color: inherit; }

  /* Phase 7g: avatar photo overlay — an <img> dropped inside any .avatar
     covers the initials when the user has a profile picture. */
  .avatar { position: relative; overflow: hidden; }
  .avatar .avatar-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; border-radius: inherit;
  }
  /* Phase 7h: a compact button is never full-width. The package's base .btn
     is width:100% (auth-form design); .btn-compact only shrank the height,
     so toolbar/table buttons without .btn-inline stretched and stacked. */
  .btn-compact { width: auto; flex: none; white-space: nowrap; }
  .table-toolbar .filter-group .btn,
  .adm-actions .btn { margin-top: 0; }
  /* Phase 7i: Bootstrap (still loaded for legacy screens) declares
     .modal-dialog { pointer-events: none } — it expects its own
     .modal-content inside to re-enable them. Our design-system dialogs
     reuse the class name, so every dialog was mouse-transparent: real
     clicks fell through to the overlay and closed it (synthetic .click()
     bypasses hit-testing, which is why automated checks passed). */
  .modal-overlay .modal-dialog { pointer-events: auto; }