:root {
      --bg: #f2f6f8;
      --panel: #ffffff;
      --panel-soft: #f8fbfc;
      --field: #ffffff;
      --aside: #e9f0f3;
      --ink: #17212b;
      --muted: #5f6f7b;
      --line: #cedce2;
      --line-strong: #9eafb9;
      --accent: #0f766e;
      --accent-2: #9a5b34;
      --accent-3: #385f9b;
      --danger: #b24040;
      --warning: #9b6b18;
      --success: #287447;
      --focus-ring: #075fbe;
      --overlay-scrim: rgba(2, 8, 18, .72);
      --shadow: 0 8px 28px rgba(24, 38, 45, .08);
      --radius: 8px;
      --section-gap: 12px;
      --child-gap: 8px;
      --section-padding: 10px;
      --calendar-row-width: 92px;
      --calendar-day-width: clamp(110px, calc((100vw - 150px) / 7), 180px);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    body.dark {
      --bg: #121615;
      --panel: #1b2221;
      --panel-soft: #222a28;
      --field: #111816;
      --aside: #171d1c;
      --ink: #eef4f1;
      --muted: #a6b3ae;
      --line: #33403c;
      --line-strong: #52625d;
      --accent: #4fb6aa;
      --accent-2: #d28a5b;
      --accent-3: #7fa7e4;
      --danger: #ff8b8b;
      --warning: #e8bd6c;
      --success: #73d79a;
      --focus-ring: #8bd7ff;
      --overlay-scrim: rgba(0, 0, 0, .78);
      --shadow: 0 8px 28px rgba(0, 0, 0, .28);
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--ink);
      background: var(--bg);
    }

    .environment-banner {
      display: none;
    }

    body.environment-staging {
      padding-top: 30px;
    }

    body.environment-staging .environment-banner {
      position: fixed;
      z-index: 200;
      inset: 0 0 auto;
      display: block;
      height: 30px;
      padding: 6px 12px;
      color: #fff;
      background: #8a3d00;
      font-size: .78rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-align: center;
    }

    .skip-link {
      position: fixed;
      z-index: 100;
      top: 10px;
      left: 10px;
      padding: 8px 12px;
      border-radius: 6px;
      color: #fff;
      background: var(--accent);
      transform: translateY(-160%);
      transition: transform .15s ease;
    }

    .skip-link:focus-visible {
      transform: translateY(0);
    }

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

    main:focus {
      outline: 0;
    }

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

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

    button {
      border: 1px solid var(--line-strong);
      background: color-mix(in srgb, var(--panel) 88%, var(--panel-soft));
      color: var(--ink);
      min-height: 36px;
      border-radius: 8px;
      padding: 0 12px;
      cursor: pointer;
      box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 7%, transparent);
      transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
    }

    button:hover {
      border-color: color-mix(in srgb, var(--accent) 70%, var(--line-strong));
      background: color-mix(in srgb, var(--accent) 7%, var(--panel));
      box-shadow: 0 3px 8px color-mix(in srgb, var(--ink) 10%, transparent);
      transform: translateY(-1px);
    }

    button:active {
      box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 7%, transparent);
      transform: translateY(0);
    }

    button:disabled {
      opacity: .55;
      cursor: not-allowed;
      box-shadow: none;
      transform: none;
    }

    /* Button system: semantic variants are shared site-wide. The older class
       names remain aliases while views migrate naturally during rendering. */
    button.btn-primary,
    button.primary {
      background: var(--accent);
      border-color: var(--accent);
      color: #fff;
      box-shadow: 0 3px 9px color-mix(in srgb, var(--accent) 30%, transparent);
    }

    button.btn-primary:hover,
    button.primary:hover {
      background: color-mix(in srgb, var(--accent) 88%, var(--ink));
      border-color: color-mix(in srgb, var(--accent) 88%, var(--ink));
      box-shadow: 0 5px 12px color-mix(in srgb, var(--accent) 34%, transparent);
    }

    .subsection-add-button {
      display: block;
      width: min(100%, 320px);
      margin-inline: auto;
    }

    button.btn-quiet,
    button.subtle {
      background: transparent;
      border-color: transparent;
      box-shadow: none;
    }

    button.btn-quiet:hover,
    button.subtle:hover {
      border-color: transparent;
      background: color-mix(in srgb, var(--accent) 9%, transparent);
      box-shadow: none;
    }

    button.btn-danger,
    button.danger {
      border-color: color-mix(in srgb, var(--danger) 58%, var(--line-strong));
      color: var(--danger);
      background: color-mix(in srgb, var(--danger) 6%, var(--panel));
    }

    button.btn-danger:hover,
    button.danger:hover {
      border-color: var(--danger);
      background: color-mix(in srgb, var(--danger) 12%, var(--panel));
    }

    button.btn-danger-confirm {
      border-color: var(--danger);
      background: var(--danger);
      color: #fff;
      box-shadow: 0 3px 9px color-mix(in srgb, var(--danger) 28%, transparent);
    }

    button.btn-danger-confirm:hover {
      border-color: color-mix(in srgb, var(--danger) 88%, var(--ink));
      background: color-mix(in srgb, var(--danger) 88%, var(--ink));
      box-shadow: 0 5px 12px color-mix(in srgb, var(--danger) 32%, transparent);
    }

    button.btn-icon,
    button.icon {
      width: 36px;
      padding: 0;
      display: inline-grid;
      place-items: center;
      font-weight: 700;
    }

    button.icon.caret-toggle {
      border-color: transparent;
      background: transparent;
      box-shadow: none;
    }

    button.icon.caret-toggle:hover {
      border-color: transparent;
      background: color-mix(in srgb, var(--accent) 9%, transparent);
      box-shadow: none;
    }

    /* Utility actions share the quiet header treatment while retaining the
       standard visible focus ring for keyboard users. */
    #themeToggle,
    #accountMenuToggle {
      border-color: transparent;
      background: transparent;
      box-shadow: none;
    }

    #themeToggle:hover,
    #accountMenuToggle:hover {
      border-color: transparent;
      background: color-mix(in srgb, var(--accent) 9%, transparent);
      box-shadow: none;
    }

    #accountMenuToggle {
      border-radius: 7px;
      color: var(--ink);
      font-size: 18px;
      line-height: 1;
    }

    #accountMenuToggle[aria-expanded="true"] {
      background: color-mix(in srgb, var(--accent) 12%, transparent);
      color: var(--accent);
    }

    /* Contextual help is deliberately quiet: the question mark remains visible
       without competing with the disclosure control that follows it. */
    button.icon[id$="Help"],
    button.icon[aria-label$=" help" i] {
      border-color: transparent;
      background: transparent;
      box-shadow: none;
      line-height: 1;
    }

    button.icon[id$="Help"]:hover,
    button.icon[aria-label$=" help" i]:hover {
      border-color: transparent;
      background: transparent;
      box-shadow: none;
    }

    .icon-edit-flipped {
      transform: scaleX(-1);
    }

    input,
    select,
    textarea {
      border: 1px solid var(--line-strong);
      background: var(--field);
      color: var(--ink);
      border-radius: 6px;
      min-height: 36px;
      padding: 7px 9px;
      width: 100%;
    }

    .coverage-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
    }

    .coverage-toggle input[type="checkbox"] {
      width: auto;
      min-height: 0;
      padding: 0;
      accent-color: var(--accent);
    }

    .team-marker {
      width: 24px;
      height: 24px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 24px;
      border-radius: 4px;
      color: #fff;
      font-size: 12px;
      font-weight: 800;
    }

    .schedule-team-marker {
      width: 24px;
      height: 24px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 24px;
      border-radius: 4px;
      color: #fff;
      font-size: 12px;
      font-weight: 800;
    }

    .schedule-team-marker.empty {
      background: transparent;
      border: 1px solid transparent;
    }

    /* Viewer assignments use compact team badges aligned with the employee text. */
    body:not(.admin-mode) .mobile-assignment .schedule-team-marker,
    body:not(.admin-mode) .assignment-text .schedule-team-marker {
      width: 16px;
      height: 16px;
      flex-basis: 16px;
      border-radius: 3px;
      font-size: 9px;
    }

    .unavailability-calendar-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      margin-bottom: 10px;
    }

    .unavailability-month-label {
      min-width: 150px;
      text-align: center;
      font-weight: 800;
    }

    .unavailability-team-key {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 10px;
    }

    .unavailability-team-key-item {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      min-height: 24px;
      padding: 3px 6px;
      border: 1px solid var(--line);
      border-radius: 4px;
      background: var(--panel-soft);
      color: var(--ink);
      font-size: 11px;
      font-weight: 700;
    }

    button.unavailability-team-key-item {
      cursor: pointer;
    }

    .unavailability-team-key-item[aria-pressed="true"] {
      border-color: var(--accent);
      background: color-mix(in srgb, var(--accent) 14%, var(--panel-soft));
      box-shadow: inset 0 0 0 1px var(--accent);
    }

    .unavailability-count {
      display: inline-grid;
      place-items: center;
      min-width: 20px;
      min-height: 20px;
      margin-right: 7px;
      padding: 0 5px;
      border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
      border-radius: 4px;
      background: color-mix(in srgb, var(--accent) 12%, var(--panel));
      color: var(--accent);
      font-size: .72rem;
      line-height: 1;
      vertical-align: middle;
    }

    .unavailability-team-key-item .team-marker {
      width: 16px;
      height: 16px;
      flex-basis: 16px;
      border-radius: 3px;
      font-size: 9px;
    }

    .unavailability-month-grid {
      border: 1px solid var(--line);
      border-radius: 7px;
      overflow: hidden;
    }

    .unavailability-weekdays,
    .unavailability-week-days,
    .unavailability-range-layer {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .unavailability-weekday {
      padding: 6px 4px;
      background: var(--panel-soft);
      border-bottom: 1px solid var(--line);
      color: var(--muted);
      text-align: center;
      font-size: 11px;
      font-weight: 800;
    }

    .unavailability-day {
      min-height: 104px;
      padding: 5px;
      border-right: 1px solid var(--line);
      background: var(--panel);
    }

    .unavailability-week {
      position: relative;
      border-bottom: 1px solid var(--line);
    }

    .unavailability-week:last-child {
      border-bottom: 0;
    }

    .unavailability-week-days {
      min-height: calc(104px + var(--range-height));
    }

    .unavailability-week-days .unavailability-day:nth-child(7n) {
      border-right: 0;
    }

    .unavailability-day.empty {
      background: var(--panel-soft);
    }

    .unavailability-day-number {
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
    }

    .unavailability-day.today {
      background: color-mix(in srgb, var(--accent) 7%, var(--panel));
      box-shadow: inset 0 0 0 2px var(--accent);
    }

    .unavailability-day.today .unavailability-day-number {
      color: var(--accent);
    }

.info-button {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
}
.info-button:hover,
.info-button:focus-visible {
  color: var(--accent);
  border-color: transparent;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  box-shadow: none;
}
    .panel-header > .controls:has(> .caret-toggle),
    .add-subsection-header .subsection-header-actions { grid-template-columns: 36px !important; width: 36px; min-width: 36px; flex: 0 0 36px; }
    .panel-header > .controls > .caret-toggle,
    .add-subsection-header .subsection-header-actions > .caret-toggle { grid-column: 1 !important; }

    .unavailability-range-layer {
      position: absolute;
      right: 0;
      bottom: 5px;
      left: 0;
      grid-template-rows: repeat(var(--range-lanes), 18px);
      gap: 2px 0;
      pointer-events: none;
    }

    .unavailability-range-bar {
      min-width: 0;
      margin-inline: 1px;
    }

    .unavailability-range-fill {
      min-width: 0;
      height: 100%;
      margin-right: var(--range-end);
      margin-left: var(--range-start);
      padding: 1px 5px;
      overflow: hidden;
      border: 1px solid color-mix(in srgb, var(--range-color) 72%, #000);
      border-radius: 999px;
      background: color-mix(in srgb, var(--range-color) 78%, #000);
      color: #fff;
      font-size: 10px;
      font-weight: 800;
      line-height: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
      pointer-events: auto;
    }

    .unavailability-entry {
      display: flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
      padding: 3px 4px;
      border-radius: 4px;
      background: var(--panel-soft);
      font-size: 11px;
      line-height: 1.2;
    }

    .unavailability-entry .team-marker {
      width: 16px;
      height: 16px;
      flex-basis: 16px;
      border-radius: 3px;
      font-size: 9px;
    }

    .unavailability-entry-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 700;
    }

    @media (max-width: 620px) {
      .unavailability-calendar-controls {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr) 36px;
      }

      .unavailability-calendar-controls [data-unavailability-month-today] {
        grid-column: 1 / -1;
        justify-self: center;
      }

      .unavailability-day {
        min-height: 74px;
        padding: 3px;
      }

      .unavailability-week-days {
        min-height: calc(74px + var(--range-height));
      }

      .unavailability-range-layer {
        bottom: 3px;
        grid-template-rows: repeat(var(--range-lanes), 16px);
      }

      .unavailability-range-bar {
        margin-inline: 0;
      }

      .unavailability-range-fill {
        padding-inline: 3px;
        font-size: 8px;
        line-height: 12px;
      }

      .unavailability-weekday {
        padding: 5px 2px;
        font-size: 9px;
      }

      .unavailability-entry {
        padding: 2px;
        font-size: 9px;
      }

      .unavailability-entry .team-marker {
        width: 13px;
        height: 13px;
        flex-basis: 13px;
        font-size: 8px;
      }
    }

    .employee-team-group {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
      gap: 8px;
      align-items: stretch;
    }

    .employee-team-group > h3 {
      grid-column: 1 / -1;
      margin: 4px 0 0;
      font-size: 14px;
      display: flex;
      align-items: center;
      gap: 7px;
    }

    textarea {
      min-height: 72px;
      resize: vertical;
    }

    label {
      display: grid;
      gap: 5px;
      font-size: 12px;
      font-weight: 700;
      color: var(--ink);
    }

    .shell {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr);
    }

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

    .shell.sidebar-collapsed aside {
      min-width: 0;
      padding: 0;
      border: 0;
      overflow: hidden;
    }

    .shell.sidebar-collapsed main { grid-column: 2; }

    .setup-group { display: grid; gap: 0; }
    #setupBody,
    #siteAdministrationBody { display: grid; gap: 0; }
    .setup-people { display: grid; gap: var(--child-gap); }
    #setupBody .panel-header,
    #siteAdministrationBody .panel-header { display: none !important; }
    .audit-history-list { display: grid; gap: 8px; }
    .audit-entry { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
    .audit-entry-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
    .audit-entry-top strong { min-width: 0; }
    .audit-entry time { color: var(--muted); font-size: .84rem; white-space: nowrap; }
    .audit-entry-meta { display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: .88rem; }
    .backup-entry-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
    .backup-entry-actions button { min-height: 30px; padding-inline: 8px; font-size: .76rem; }
    .archive-schedule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; }
    .archive-day { border: 1px solid var(--line); border-radius: .5rem; padding: .75rem; background: var(--panel-soft); }
    .archive-day h3 { margin: 0 0 .5rem; font-size: .95rem; }
    .archive-day ul { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
    .archive-day li { display: grid; gap: .12rem; padding-top: .5rem; border-top: 1px solid var(--line); }
    .archive-day li:first-child { border-top: 0; padding-top: 0; }
    .archive-day li span, .archive-day li small { color: var(--muted); }
    .audit-change-list { border-top: 1px solid var(--line); padding-top: 8px; }
    .audit-change-list summary { cursor: pointer; color: var(--accent); font-size: .88rem; }
    .audit-change-list[disabled] summary { color: var(--muted); cursor: default; list-style: none; }
    .audit-change-list[disabled] summary::-webkit-details-marker { display: none; }
    .audit-change-list ul { display: grid; gap: 5px; margin: 9px 0 0; padding: 0; list-style: none; }
    .audit-change-list li { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; color: var(--text); font-size: .88rem; }
    .audit-change-type { min-width: 74px; color: var(--muted); font-size: .75rem; text-transform: capitalize; }
    .audit-history-empty { padding: 12px 0; color: var(--muted); }
    .operational-dashboard { border: 1px solid var(--line); border-radius: 8px; background: transparent; overflow: hidden; }
    .operational-dashboard .add-subsection-header { margin: 0; border: 0; border-radius: 0; }
    .operational-dashboard .add-subsection-header p { margin: 3px 0 0; font-size: .82rem; }
    .operational-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; }
    .operational-metric { display: grid; gap: 2px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: transparent; }
    .operational-metric--ok { border-left: 4px solid var(--success); }
    .operational-metric--attention { border-left: 4px solid var(--warning); }
    .operational-metric--critical { border-left: 4px solid var(--danger); }
    .operational-metric strong { font-size: 1.05rem; }
    .operational-metric span { color: var(--muted); font-size: .78rem; }
    .operational-grid { display: grid; grid-template-columns: minmax(360px, 1.4fr) minmax(260px, 1fr); gap: 12px; margin-top: 12px; }
    .operational-panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-left: 4px solid var(--success); border-radius: 6px; background: transparent; }
    .operational-panel--attention { border-left-color: var(--warning); }
    .operational-panel--critical { border-left-color: var(--danger); }
    .operational-panel-header { display: grid; gap: 3px; padding: 10px 11px; border-bottom: 1px solid color-mix(in srgb, var(--section-accent, var(--accent)) 24%, var(--line)); background: color-mix(in srgb, var(--section-tint, var(--panel-soft)) 60%, transparent); }
    .operational-panel-header > h4 { margin: 0; font-size: .92rem; }
    .operational-panel-header > .operational-role-note { margin: 0; }
    .operational-panel-body { display: grid; gap: 8px; padding: 10px; background: transparent; }
    .operational-panel-body > .operational-role-note { margin: -2px 0 1px; }
    .operational-analytics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
    .operational-groups { display: grid; gap: 10px; margin-top: 12px; }
    .operational-group { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: transparent; }
    .operational-group > summary { display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 10px; padding: 11px 12px; cursor: pointer; list-style: none; background: color-mix(in srgb, var(--section-tint, var(--panel-soft)) 68%, transparent); }
    .operational-group > summary::-webkit-details-marker { display: none; }
    .operational-group > summary:hover { background: color-mix(in srgb, var(--section-tint, var(--panel-soft)) 32%, transparent); }
    .operational-group > summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -3px; }
    .operational-group-heading { display: grid; min-width: 0; gap: 2px; }
    .operational-group-heading strong { font-size: .94rem; }
    .operational-group-heading small { overflow-wrap: anywhere; color: var(--muted); font-size: .73rem; font-weight: 500; }
    .operational-group-count { padding: 3px 7px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--panel); font-size: .68rem; font-weight: 700; white-space: nowrap; }
    .operational-group-caret { display: inline-grid; width: 18px; height: 18px; place-items: center; color: var(--muted); font-size: 18px; font-weight: 600; line-height: 1; }
    .operational-group-caret::before { content: "−"; }
    .operational-group:not([open]) .operational-group-caret::before { content: "+"; }
    .operational-group-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 10px; border-top: 1px solid var(--line); background: transparent; }
    .operational-group-content .operational-panel { margin: 0; }
    .operational-panel-wide { grid-column: 1 / -1; }
    .operational-readiness-heading { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
    .operational-readiness-heading strong { font-size: 2rem; line-height: 1; }
    .operational-readiness-heading strong.ready { color: var(--good); }
    .operational-readiness-heading strong.needs-attention { color: var(--warning); }
    .operational-readiness-heading strong.critical { color: var(--danger); }
    .operational-readiness-heading span { color: var(--muted); font-weight: 700; }
    .operational-readiness-criterion { display: grid; gap: 3px; }
    .operational-readiness-criterion small { margin: 0 0 5px 7px; padding: 5px 7px; border-left: 3px solid var(--section-accent, var(--accent)); color: var(--section-accent, var(--accent)); background: color-mix(in srgb, var(--section-tint, var(--panel-soft)) 55%, transparent); font-size: .72rem; line-height: 1.35; }
    .operational-readiness-criterion small strong { color: inherit; }
    .operational-risk-list, .operational-pattern-list { display: grid; gap: 5px; }
    .operational-risk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px; border-left: 3px solid var(--warning); background: color-mix(in srgb, var(--warning) 9%, transparent); font-size: .77rem; }
    .operational-risk-row.critical { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent); }
    .operational-risk-row > div { display: grid; gap: 1px; }
    .operational-risk-row span { color: var(--muted); }
    .operational-eligibility-card { overflow: hidden; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); }
    .operational-eligibility-card > .operational-risk-row { border-left-color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
    .operational-eligibility-card.high > .operational-risk-row { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 12%, transparent); }
    .operational-eligibility-card.critical > .operational-risk-row { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
    .operational-child-disclosure { border-top: 1px solid var(--line); }
    .operational-child-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 9px; cursor: pointer; color: var(--muted); font-size: .73rem; font-weight: 700; }
    .operational-child-disclosure > summary span { min-width: 22px; padding: 1px 5px; border: 1px solid var(--line); border-radius: 999px; text-align: center; }
    .operational-child-disclosure > .operational-risk-list { padding: 7px; background: var(--panel-soft); }
    .operational-child-disclosure .operational-risk-row.backup-critical { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
    .operational-child-disclosure .operational-risk-row.backup-warning { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); }
    .operational-child-disclosure .operational-risk-row.backup-stable { border-left-color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
    .operational-pattern-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .operational-pattern-columns > div > strong { display: block; margin-bottom: 5px; font-size: .78rem; }
    .operational-pattern { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .75rem; }
    .operational-pattern strong { color: var(--ink); text-align: right; }
    .operational-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
    .operational-kpi-grid > div { display: grid; gap: 2px; padding: 7px; border: 1px solid var(--line); border-radius: 4px; text-align: center; }
    .operational-kpi-grid span { color: var(--muted); font-size: .68rem; }
    .operational-exception-summary { display: flex; flex-wrap: wrap; gap: 5px 10px; margin: -2px 0 10px; color: var(--muted); font-size: .78rem; }
    .operational-exception-summary strong { color: var(--danger); }
    .operational-trend-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: -2px 0 9px; font-size: .72rem; }
    .operational-trend-outlook { display: grid; gap: 1px; min-width: 0; padding-left: 7px; border-left: 3px solid var(--good); }
    .operational-trend-outlook strong { font-size: .78rem; }
    .operational-trend-outlook span { color: var(--muted); overflow-wrap: anywhere; }
    .operational-trend-outlook.declining { border-left-color: var(--danger); }
    .operational-trend-outlook.improving { border-left-color: var(--good); }
    .operational-trend-outlook.stable { border-left-color: var(--accent); }
    .operational-trend-stats { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 4px 8px; color: var(--muted); text-align: right; }
    .operational-trend-stats b { color: var(--ink); }
    .operational-trend-scroll { overflow-x: auto; }
    .operational-trend { display: flex; gap: 2px; min-width: 300px; overflow: visible; }
    .operational-day { display: grid; grid-template-rows: 10px auto; gap: 3px; flex: 1 1 0; min-width: 20px; }
    .operational-day-bar { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--muted) 16%, transparent); }
    .operational-day-bar::after { position: absolute; inset: 0 auto 0 0; width: var(--coverage); background: var(--good); content: ""; }
    .operational-day.needs-attention .operational-day-bar::after { background: var(--warning); }
    .operational-day.critical .operational-day-bar::after { background: var(--danger); }
    .operational-day small { color: var(--muted); font-size: .58rem; line-height: 1; text-align: center; white-space: nowrap; }
    .operational-shortfalls { display: grid; gap: 7px; }
    .operational-shortfall { display: grid; gap: 7px; padding: 10px; border-left: 3px solid var(--warning); background: color-mix(in srgb, var(--warning) 7%, transparent); }
    .operational-shortfall.critical { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }
    .operational-shortfall-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
    .operational-shortfall-heading strong { font-size: .88rem; }
    .operational-shortfall-heading span { color: var(--muted); font-size: .74rem; white-space: nowrap; }
    .operational-shortfall-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .operational-shortfall-metrics span { padding: 5px 6px; color: var(--text); font-size: .76rem; background: color-mix(in srgb, var(--surface) 78%, transparent); }
    .operational-shortfall-pattern, .operational-shortfall-period { color: var(--muted); font-size: .76rem; }
    .operational-shortfall-pattern b { color: var(--text); }
    .operational-resilience-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px; }
    .operational-resilience { display: grid; align-content: start; gap: 7px; min-width: 0; padding: 11px; border: 1px solid var(--line); border-left: 4px solid var(--good); border-radius: 8px; background: color-mix(in srgb, var(--good) 7%, transparent); }
    .operational-resilience.watch { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 7%, transparent); }
    .operational-resilience.critical { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }
    .operational-resilience-heading { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding-bottom: 7px; border-bottom: 1px solid var(--line); }
    .operational-resilience-heading strong { font-size: .88rem; }
    .operational-resilience-heading span { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
    .operational-resilience.watch .operational-resilience-heading span { color: var(--warning); }
    .operational-resilience.critical .operational-resilience-heading span { color: var(--danger); }
    .operational-resilience > span { color: var(--muted); font-size: .76rem; }
    .operational-resilience > span b { color: var(--text); }
    .operational-resilience-metrics { display: grid; grid-template-columns: 1fr; gap: 6px; }
    .operational-resilience-metrics span { padding: 5px 6px; color: var(--text); font-size: .76rem; background: color-mix(in srgb, var(--surface) 78%, transparent); }
    .operational-resilience-certifications { display: grid; gap: 4px; color: var(--muted); font-size: .76rem; }
    .operational-resilience-certifications b { color: var(--text); }
    .operational-resilience-certifications span { padding: 4px 6px; border-left: 2px solid var(--warning); background: color-mix(in srgb, var(--warning) 8%, transparent); }
    .operational-unavailability { display: grid; grid-template-columns: repeat(var(--operational-days), minmax(20px, 1fr)); gap: 5px; align-items: end; min-width: 280px; height: 88px; }
    .operational-unavailability-day { display: grid; gap: 4px; align-items: end; height: 100%; text-align: center; }
    .operational-unavailability-bar { min-height: 2px; background: var(--danger); border-radius: 2px 2px 0 0; }
    .operational-unavailability-day span { color: var(--muted); font-size: .68rem; }
    .operational-role-note { margin: -2px 0 9px; color: var(--muted); font-size: .78rem; line-height: 1.35; }
    .operational-role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
    .operational-role { display: grid; gap: 7px; min-width: 0; padding: 9px; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: 6px; background: transparent; }
    .operational-role > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
    .operational-role > div:first-child strong { min-width: 0; overflow-wrap: anywhere; }
    .operational-role > div:first-child span { color: var(--muted); font-size: .72rem; text-align: right; }
    .operational-role-values { display: flex; flex-wrap: wrap; gap: 5px; color: var(--muted); font-size: .75rem; }
    .operational-role-values span { padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
    .operational-role-values b { color: var(--ink); }
    .operational-role.needs-attention { border-left: 4px solid var(--warning); }
    .operational-role.needs-attention .operational-role-gap { border-color: color-mix(in srgb, var(--warning) 60%, var(--line)); background: color-mix(in srgb, var(--warning) 16%, var(--panel)); }
    .operational-role.needs-attention .operational-role-gap b { color: var(--warning); }
    .operational-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 8px; }
    .operational-team { display: grid; align-content: start; gap: 8px; min-width: 0; padding: 10px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: 6px; background: transparent; }
    .operational-team.needs-attention { border-left: 4px solid var(--warning); }
    .operational-team-title { display: flex; align-items: center; gap: 7px; min-width: 0; }
    .operational-team-title > div { display: grid; min-width: 0; gap: 1px; }
    .operational-team-title strong { overflow-wrap: anywhere; }
    .operational-team-title span:not(.team-marker) { color: var(--muted); font-size: .72rem; }
    .operational-team-values { display: flex; flex-wrap: wrap; gap: 5px; color: var(--muted); font-size: .75rem; }
    .operational-team-values span { padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
    .operational-team-values b { color: var(--ink); }
    .operational-risk { display: grid; gap: 2px; padding: 7px; border-left: 3px solid var(--warning); background: color-mix(in srgb, var(--warning) 12%, var(--panel)); font-size: .75rem; }
    .operational-risk strong { color: var(--warning); }
    .operational-risk span { color: var(--muted); line-height: 1.35; }
    .conflict-dialog { max-width: 680px; }
    .conflict-summary { display: grid; gap: 10px; }
    .conflict-summary > p { margin: 0; }
    .conflict-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .conflict-side { padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
    .conflict-side h3 { margin: 0 0 7px; font-size: .9rem; }
    .conflict-side ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: .84rem; }
    .conflict-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
    .conflict-actions button { flex: 1 1 180px; }
    .backup-preview-intro { margin: 0 0 12px; }
    .backup-preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .backup-preview-grid > div { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-soft); }
    .backup-preview-grid > div > span { grid-column: 1 / -1; color: var(--muted); font-size: .76rem; font-weight: 700; }
    .backup-preview-grid strong { font-size: .88rem; }
    .backup-preview-grid small { color: var(--muted); font-size: .7rem; font-weight: 600; }
    .backup-preview-details { display: grid; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
    .backup-preview-details ul { display: grid; gap: 4px; margin: 0; padding-left: 20px; color: var(--muted); font-size: .82rem; }
    .print-date { display: none; }

    .admin-view-tabs {
      display: flex;
      gap: 0;
      overflow-x: auto;
      border-bottom: 1px solid var(--line);
      background: var(--panel-soft);
      scrollbar-width: thin;
    }

    .admin-view-tabs button {
      flex: 1 0 auto;
      min-width: 104px;
      min-height: 40px;
      border: 0;
      border-right: 1px solid var(--line);
      border-radius: 0;
      background: transparent;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .admin-view-tabs button:last-child { border-right: 0; }

    .admin-view-tabs button[aria-selected="true"] {
      background: var(--panel);
      color: var(--section-accent);
      box-shadow: inset 0 -3px 0 var(--section-accent);
    }

    .workspace-tabs {
      width: 100%;
      max-width: none;
      border: 0;
      border-radius: 0;
    }

    /* The workspace tabs are part of the page header, not a separate section. */
    .schedule-toolbar:has(+ .workspace-tabs) {
      margin-bottom: calc(-1 * var(--section-gap));
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    .schedule-toolbar + .workspace-tabs {
      margin-top: 0;
      border-bottom-left-radius: var(--radius);
      border-bottom-right-radius: var(--radius);
      overflow: hidden;
    }

    .workspace-tabs button {
      min-width: 120px;
    }

    .workspace-view {
      display: grid;
      gap: var(--section-gap);
      min-width: 0;
    }

    .workspace-view.hidden { display: none; }

    .mobile-task-nav,
    .mobile-task-menu,
    .mobile-context-action,
    .mobile-home-screen { display: none; }

    .mobile-detail-dialog { display: none; }

    .management-insight { --section-accent: #0f766e; --section-tint: #d9f5ed; }
    body.dark .management-insight { --section-accent: #6ccdbd; --section-tint: rgba(15, 118, 110, .22); }

    .admin-view-hidden { display: none !important; }

    /* Shared visual contract for nested sections. */
    .child-section-card {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--panel-soft);
    }

    .setup-add-form,
    .add-subsection {
      display: grid;
      gap: 0;
      margin: var(--child-gap) 0;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--panel-soft);
    }

    .setup-add-form + .setup-add-form {
      margin-top: var(--child-gap);
    }

    #peopleBody > .add-subsection {
      margin-bottom: 0;
    }

    .add-subsection-body {
      display: grid;
      gap: var(--child-gap);
      min-width: 0;
      padding: var(--section-padding);
    }

    .setup-add-form label:not(.coverage-toggle),
    #addEmployeeBody > label {
      gap: 8px;
    }

    /* Section variants replace long lists of section-ID selectors. */
    .ui-section {
      border-top: 1px solid color-mix(in srgb, var(--section-accent) 34%, var(--line));
      background: color-mix(in srgb, var(--panel) 84%, transparent);
      box-shadow: var(--shadow);
      -webkit-backdrop-filter: blur(12px) saturate(1.04);
      backdrop-filter: blur(12px) saturate(1.04);
    }

    .ui-section > .panel-header {
      background: color-mix(in srgb, var(--section-tint) 68%, transparent);
      box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--section-accent) 20%, var(--line));
    }

    .ui-section > .panel-body { background: transparent; }

    /* Top-level sections stay neutral; state is communicated inside their child cards. */
    .ui-section.section-health--ok,
    .ui-section.section-health--attention,
    .ui-section.section-health--critical { border-left: 0; }

    /* Child sections inherit their parent workspace color through a slim status edge. */
    .ui-form-section,
    .account-management-card,
    .child-section-card,
    .operational-group { border-left: 4px solid var(--section-accent, var(--accent)); }

    .ui-section--administration,
    .ui-section--workplace-administration { --section-accent: #c2410c; --section-tint: #ffedd5; --accent: #c2410c; }
    .ui-section--site-administration { --section-accent: #4f46e5; --section-tint: #e0e7ff; --accent: #4f46e5; }
    .ui-section--reporting { --section-accent: #a21caf; --section-tint: #fae8ff; --accent: #a21caf; }
    .ui-section--dashboard { --section-accent: #1d4ed8; --section-tint: #dbeafe; --accent: #1d4ed8; }
    .ui-section--personnel { --section-accent: #047857; --section-tint: #d1fae5; --accent: #047857; }
    .ui-section--health,
    .ui-section--open-shifts { --section-accent: #0f766e; --section-tint: #ccfbf1; --accent: #0f766e; }
    .ui-section--my-shifts { --section-accent: #2563eb; --section-tint: #dbeafe; --accent: #2563eb; }
    .ui-section--notifications { --section-accent: #9a3412; --section-tint: #ffedd5; --accent: #9a3412; }
    .ui-section--unavailability { --section-accent: #be123c; --section-tint: #ffe0e7; --accent: #be123c; }
    .ui-section--opportunities { --section-accent: #7c3aed; --section-tint: #ede9fe; --accent: #7c3aed; }
    .ui-section--schedule { --section-accent: #0369a1; --section-tint: #e0f2fe; --accent: #0369a1; }
    .ui-section--coverage { --section-accent: #b45309; --section-tint: #fff0c7; --accent: #b45309; }
    #setupSection,
    #siteAdministrationSection { overflow: hidden; }

    /* Administration child cards inherit the color of their top-level group. */
    #siteAdministrationBody .ui-section--administration {
      --section-accent: #4f46e5;
      --section-tint: #e0e7ff;
      --accent: #4f46e5;
    }

    .management-date-range-controls {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      justify-content: center;
      gap: 10px;
    }

    .management-date-range-controls .schedule-view-controls { justify-content: center; align-self: flex-end; }
    .management-date-form { display: grid; grid-template-columns: minmax(145px, 1fr) minmax(145px, 1fr) auto; align-items: end; align-self: flex-end; gap: 10px; flex: 1 1 560px; max-width: 680px; }
    .management-date-form label { display: grid; gap: 5px; color: var(--muted); font-size: .78rem; font-weight: 700; }
    .management-date-form .muted { grid-column: 1 / -1; margin: -2px 0 0; }
    .management-date-form .muted:empty { display: none; }
    /* Keep the reporting-period control below the sticky application shell on
       desktop.  It is a page control, so it must never cover account menus or
       header actions when the Management workspace is scrolled. */
    .management-period-context { position: sticky; z-index: 5; top: var(--app-header-offset, 76px); display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; margin: 0 0 10px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 7%, transparent); backdrop-filter: blur(16px); }
    .management-period-context > span { color: var(--muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
    .management-period-context button { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 5px 10px; }
    .management-period-dialog { width: min(540px, calc(100vw - 28px)); max-width: none; padding: 16px; border: 1px solid var(--line-strong); border-radius: 18px; background: color-mix(in srgb, var(--panel) 97%, transparent); color: var(--ink); box-shadow: 0 22px 60px color-mix(in srgb, #000 32%, transparent); backdrop-filter: blur(20px); }
    .management-period-dialog::backdrop { background: var(--overlay-scrim); backdrop-filter: blur(5px); }
    .management-period-dialog-header, .management-period-shift { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .management-period-dialog-header h2 { margin: 1px 0 0; font-size: 1.2rem; }
    .management-period-dialog-header span { color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
    .management-period-presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 14px 0 8px; }
    .management-period-presets button { min-width: 0; padding-inline: 6px; font-size: .75rem; }
    .management-period-presets button.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
    .management-period-shift { margin-bottom: 12px; }
    .management-period-dialog .management-date-range-controls { display: grid; gap: 10px; padding: 12px 0; }
    .management-period-dialog .management-date-form { grid-template-columns: 1fr 1fr; width: 100%; max-width: none; }
    .management-period-dialog .management-date-form button { grid-column: 1 / -1; }
    .management-period-impact { margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: .72rem; }

    @media (max-width: 640px) {
      .management-date-form { grid-template-columns: 1fr; width: 100%; max-width: none; }
      .management-date-form button { width: 100%; }
    }

    #setupSection > .toolbar,
    #siteAdministrationSection > .toolbar {
      margin: 0;
      padding: var(--section-padding);
      border: 0;
      border-bottom: 1px solid var(--line);
      border-radius: 0;
      box-shadow: none;
      background: color-mix(in srgb, var(--section-tint) 68%, transparent);
    }

    .section-deployer {
      cursor: pointer;
    }

    .section-deployer .caret-toggle {
      pointer-events: none;
    }

    .section-deployer .caret-toggle:disabled {
      opacity: 1;
      cursor: inherit;
    }

    .section-deployer:hover {
      background: color-mix(in srgb, var(--section-tint) 50%, transparent);
    }

    .section-deployer:focus-visible {
      outline: 2px solid var(--section-accent);
      outline-offset: -2px;
    }

    .admin-actions {
      margin: 0;
      border: 0;
      border-bottom: 1px solid var(--line);
      border-radius: 0;
      background: color-mix(in srgb, var(--section-tint) 72%, var(--section-accent));
      padding: 10px var(--section-padding);
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      gap: 12px;
    }

    .admin-actions-copy {
      display: grid;
      justify-self: start;
      gap: 2px;
    }

    body.dark #adminActions {
      background: rgba(3, 105, 161, .38);
    }

    .auto-fill-actions {
      display: flex;
      align-items: stretch;
      justify-self: center;
      gap: 6px;
    }

    .auto-fill-actions #autoFill { flex: 1 1 auto; }

    .admin-actions-secondary {
      justify-self: end;
    }

    .backup-menu {
      position: relative;
    }

    .backup-menu-panel {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      z-index: 9;
      display: grid;
      gap: 5px;
      min-width: 170px;
      padding: 6px;
      border: 1px solid var(--line-strong);
      border-radius: 7px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }

    .backup-menu-panel button {
      width: 100%;
      text-align: left;
    }

    body.dark #setupSection { --section-accent: #fdba74; --section-tint: rgba(194, 65, 12, .24); --accent: #fdba74; }
    body.dark #siteAdministrationSection,
    body.dark #siteAdministrationBody .ui-section--administration { --section-accent: #a5b4fc; --section-tint: rgba(79, 70, 229, .24); --accent: #a5b4fc; }
    body.dark #employeesSection,
    body.dark #shiftSetupSection,
    body.dark #teamsSection,
    body.dark #roleManagementSection,
    body.dark #accountManagementSection,
    body.dark #backupManagementSection,
    body.dark #archiveManagementSection,
    body.dark #auditHistorySection { --section-accent: #fdba74; --section-tint: rgba(194, 65, 12, .24); --accent: #fdba74; }
    body.dark #operationalDashboardSection { --section-accent: #93c5fd; --section-tint: rgba(29, 78, 216, .24); --accent: #93c5fd; }
    body.dark #weeklyPersonnelStatusSection { --section-accent: #6ee7b7; --section-tint: rgba(4, 120, 87, .24); --accent: #6ee7b7; }
    body.dark #systemHealthSection { --section-accent: #6ccdbd; --section-tint: rgba(15, 118, 110, .24); --accent: #6ccdbd; }
    body.dark #myShiftsSection { --section-accent: #7fb3e6; --section-tint: rgba(37, 99, 235, .24); --accent: #7fb3e6; }
    body.dark #notificationsSection { --section-accent: #fdba74; --section-tint: rgba(154, 52, 18, .24); --accent: #fdba74; }

    .notification-list { display: grid; gap: 8px; }
    .notification-card { display: flex; align-items: start; justify-content: space-between; gap: 12px; padding: 11px; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-radius: 6px; background: color-mix(in srgb, var(--section-tint) 38%, var(--panel)); }
    .notification-card > div { min-width: 0; display: grid; gap: 4px; }
    .notification-card strong { overflow-wrap: anywhere; }
    .notification-card p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.4; }
    .notification-card time { color: var(--muted); font-size: .75rem; }
    body.dark #myUnavailabilitySection,
    body.dark #unavailabilityManagementSection { --section-accent: #f19aab; --section-tint: rgba(190, 24, 93, .22); --accent: #f19aab; }
    body.dark #shiftSwapRequestsSection { --section-accent: #c4b5fd; --section-tint: rgba(124, 58, 237, .24); --accent: #c4b5fd; }
    body.dark #openShiftPostingsSection { --section-accent: #5eead4; --section-tint: rgba(15, 118, 110, .24); --accent: #5eead4; }
    body.dark #scheduleSection,
    body.dark #adminActions { --section-accent: #7dd3fc; --section-tint: rgba(3, 105, 161, .24); --accent: #7dd3fc; }
    body.dark #coverageSection { --section-accent: #f0c36b; --section-tint: rgba(180, 83, 9, .24); --accent: #f0c36b; }

    .auth-gate {
      position: fixed;
      inset: 0;
      z-index: 20;
      display: grid;
      place-items: center;
      padding: 20px;
      background: var(--bg);
    }

    .auth-gate.hidden { display: none; }
    body:not(.authenticated) #appShell,
    body:not(.authenticated) #loadDataFile { display: none; }
    body.authenticated .site-footer { display: none; }
    .auth-dialog { width: min(420px, 100%); padding: 24px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow); display: grid; gap: 14px; }
    .auth-dialog h2 { font-size: 24px; }

    aside {
      border-right: 1px solid var(--line);
      background: var(--aside);
      padding: 18px;
      display: grid;
      grid-template-rows: auto auto minmax(0, 1fr);
      gap: var(--section-gap);
      min-height: 100vh;
    }

    main {
      min-width: 0;
      padding: 18px;
      display: grid;
      gap: var(--section-gap);
      align-content: start;
    }

    body.admin-mode .schedule-toolbar { order: 0; }
    body.admin-mode #scheduleSection { order: 1; }
    body.admin-mode #unavailabilityManagementSection { order: 3; }
    body.admin-mode #setupSection { order: 4; }
    body.admin-mode #siteAdministrationSection { order: 5; }

    .brand {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--child-gap);
    }

    h1,
    h2,
    h3,
    p {
      margin: 0;
    }

    h1 {
      font-size: 22px;
      line-height: 1.15;
      letter-spacing: 0;
    }

    h2 {
      font-size: 17px;
      line-height: 1.2;
    }

    h3 {
      font-size: 14px;
      line-height: 1.2;
    }

    .muted {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    .toolbar,
    .controls,
    .row,
    .employee-actions,
    .stats {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .toolbar {
      justify-content: space-between;
      background: var(--panel);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
      padding: var(--section-padding);
    }

    .card-summary {
      display: grid;
      gap: 6px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.35;
    }

    .card-summary > p {
      margin: 0;
    }

    .open-shift-post-status {
      display: flex;
      width: fit-content;
      justify-content: center;
      justify-self: center;
      margin: 5px auto 0;
    }

    .ui-status-label {
      color: var(--status-fg, var(--muted));
      border-color: var(--status-border, var(--line));
      background: var(--status-bg, var(--panel-soft));
    }

    .ui-status--success { --status-fg: var(--success); --status-border: color-mix(in srgb, var(--success) 58%, var(--line)); --status-bg: color-mix(in srgb, var(--success) 14%, var(--panel)); }
    .ui-status--warning { --status-fg: var(--warning); --status-border: color-mix(in srgb, var(--warning) 58%, var(--line)); --status-bg: color-mix(in srgb, var(--warning) 14%, var(--panel)); }
    .ui-status--danger { --status-fg: var(--danger); --status-border: color-mix(in srgb, var(--danger) 58%, var(--line)); --status-bg: color-mix(in srgb, var(--danger) 14%, var(--panel)); }
    .ui-status--info { --status-fg: #2563eb; --status-border: color-mix(in srgb, #2563eb 52%, var(--line)); --status-bg: color-mix(in srgb, #2563eb 11%, var(--panel)); }
    body.dark .ui-status--info { --status-fg: #93c5fd; }

    .card-summary-row {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 5px;
    }

    .shift-flag-row {
      padding-top: 7px;
    }

    .card-details {
      display: grid;
      gap: 8px;
      margin-top: 8px;
      padding-top: 10px;
      border-top: 1px solid var(--line);
    }

    .card-summary .entry-note {
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .schedule-toolbar {
      display: grid;
      grid-template-columns: minmax(290px, 1fr) auto minmax(290px, 1fr);
      align-items: center;
      gap: var(--child-gap);
    }

    .schedule-toolbar .schedule-actions {
      grid-column: 3;
      grid-row: 1;
      align-self: start;
    }

    .header-context {
      align-self: center;
      color: var(--muted);
      font-size: 14px;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .header-context strong { color: var(--ink); }
    .header-context span:last-child { color: var(--accent); }

    body:not(.admin-mode) .schedule-toolbar .header-context,
    body:not(.admin-mode) .schedule-toolbar .schedule-actions {
      align-self: center;
    }

    /* Keep the employee application shell compact while preserving its
       responsive workspace label below. */
    body:not(.admin-mode) .schedule-toolbar {
      min-height: 48px;
      padding-block: 6px;
      padding-inline: var(--section-padding);
    }

    .add-subsection-header,
    .account-subsection-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
      background: var(--panel-soft);
    }

    /* Nested cards deliberately inherit the accent family of their nearest parent panel. */
    .panel .add-subsection,
    .panel .setup-add-form,
    .panel .child-section-card,
    .panel .account-management-card,
    .panel .operational-dashboard {
      border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
      background: color-mix(in srgb, var(--section-tint, var(--panel-soft)) 36%, var(--panel));
    }

    .panel .operational-panel {
      border-top-color: color-mix(in srgb, var(--accent) 30%, var(--line));
      border-right-color: color-mix(in srgb, var(--accent) 30%, var(--line));
      border-bottom-color: color-mix(in srgb, var(--accent) 30%, var(--line));
      background: transparent;
    }

    .panel .operational-panel > .operational-panel-header {
      background: color-mix(in srgb, var(--section-tint, var(--panel-soft)) 68%, transparent);
    }

    .panel .add-subsection-header,
    .panel .account-subsection-header {
      border-bottom-color: color-mix(in srgb, var(--accent) 24%, var(--line));
      background: color-mix(in srgb, var(--section-tint, var(--panel-soft)) 74%, var(--panel));
    }

    /* Expanded child subsections need a visible boundary within their parent panel. */
    .panel .add-subsection:has(> .section-deployer[aria-expanded="true"]),
    .panel .setup-add-form:has(> .section-deployer[aria-expanded="true"]) {
      border-left: 4px solid var(--accent);
      background: color-mix(in srgb, var(--section-tint, var(--panel-soft)) 62%, var(--panel));
      box-shadow: 0 3px 10px color-mix(in srgb, var(--accent) 12%, transparent);
    }

    .panel .add-subsection:has(> .section-deployer[aria-expanded="true"]) > .add-subsection-header,
    .panel .setup-add-form:has(> .section-deployer[aria-expanded="true"]) > .add-subsection-header {
      padding-block: 12px;
      border-bottom: 2px solid color-mix(in srgb, var(--accent) 42%, var(--line));
      background: color-mix(in srgb, var(--section-tint, var(--panel-soft)) 88%, var(--panel));
    }

    .panel .add-subsection:has(> .section-deployer[aria-expanded="true"]) > .add-subsection-body,
    .panel .setup-add-form:has(> .section-deployer[aria-expanded="true"]) > .add-subsection-body {
      padding: calc(var(--section-padding) + 2px);
    }

    .panel .operational-metric {
      border-color: color-mix(in srgb, var(--accent) 26%, var(--line));
      background: transparent;
    }

    .account-management-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: var(--child-gap);
      align-items: stretch;
    }

    .account-management-card {
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-content: start;
      gap: 0;
      padding: 0;
      border: 1px solid var(--line-strong);
      border-radius: 7px;
      background: var(--panel-soft);
      height: 100%;
      box-sizing: border-box;
      overflow: hidden;
    }

    .account-management-card.danger-card {
      border-color: color-mix(in srgb, var(--danger) 55%, var(--line-strong));
    }

    .account-subsection-body {
      display: grid;
      flex: 1 1 auto;
      gap: 10px;
      min-width: 0;
      padding: 12px;
    }

    #backupManagementBody .subsection-add-button,
    #accountManagementBody .subsection-add-button {
      margin-top: auto;
    }

    .add-subsection-header h3,
    .account-subsection-header h3 {
      margin: 0;
    }

    .subsection-header-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
    }

    /* Shared UI primitives keep independently-rendered views visually and
       behaviorally consistent without requiring each section to duplicate its
       own layout rules.  The legacy classes remain as compatibility aliases. */
    .ui-disclosure-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .ui-header-copy {
      min-width: 0;
    }

    .ui-header-actions {
      display: grid;
      grid-template-columns: 36px;
      grid-template-rows: 36px;
      width: 36px;
      min-width: 36px;
      flex: 0 0 36px;
      align-items: center;
      gap: 8px;
      margin-left: auto;
      justify-content: start;
    }

    .ui-header-actions > .icon {
      flex: 0 0 36px;
      align-self: center;
    }

    .ui-header-actions > .caret-toggle { grid-row: 1; grid-column: 1; }

    .ui-form-section {
      min-width: 0;
    }

    .ui-card {
      min-width: 0;
      border-radius: 7px;
    }

    .ui-card-title {
      min-width: 0;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--line);
    }

    .ui-status-label {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 22px;
      line-height: 1;
      white-space: nowrap;
    }

    /* One timing-label resource for shifts, open-shift postings, and unavailability. */
    .tag.timing-status {
      min-width: 0;
      min-height: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: var(--status-fg, var(--muted));
      font-size: inherit;
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
    }
    /* Match the note body on an unavailability card in every workspace. */
    .unavailability-countdown { font-size: 13px; }

    .ui-date-range-control {
      min-width: 0;
    }

    .ui-date-range-control .segmented,
    .ui-date-range-control .schedule-view-controls,
    .ui-date-range-control .week-nav {
      align-items: center;
    }

    /* Compact layout primitives replace repeated flex/grid declarations in
       dynamically rendered cards and controls. */
    .ui-stack { display: grid; gap: var(--child-gap); }
    .ui-cluster { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
    .ui-header-actions.ui-cluster { display: grid; flex-wrap: nowrap; }
    .ui-split { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .ui-auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--child-gap); }
    .ui-scroll-x { overflow-x: auto; overscroll-behavior-inline: contain; }
    .ui-form-grid { min-width: 0; }

    .field-help-dialog {
      width: min(560px, calc(100vw - 32px));
      max-height: min(720px, calc(100vh - 32px));
      padding: 0;
      overflow: auto;
      color: var(--ink);
      background: color-mix(in srgb, var(--panel) 88%, transparent);
      border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
      border-radius: var(--radius);
      box-shadow: 0 18px 46px color-mix(in srgb, var(--ink) 24%, transparent);
      backdrop-filter: blur(18px) saturate(1.08);
      -webkit-backdrop-filter: blur(18px) saturate(1.08);
    }

    .field-help-dialog::backdrop {
      background: var(--overlay-scrim);
      backdrop-filter: blur(2px);
      cursor: pointer;
    }

    .field-help-dialog-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--child-gap);
      padding: 12px 14px;
      border-bottom: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
      background: color-mix(in srgb, var(--panel-soft) 74%, transparent);
    }

    .field-help-dialog-header h2 { margin: 0; font-size: 18px; }
    .field-help-dialog-header .icon { border-color: transparent; background: transparent; }
    .field-help-dialog-header .icon:hover { background: color-mix(in srgb, var(--panel-soft) 64%, transparent); }
    .field-help-dialog-body { display: grid; gap: 16px; padding: 18px 16px 16px; }
    .field-help-dialog-body p { margin: 0; color: var(--muted); }
    .field-help-dialog-body dl { display: grid; gap: 8px; margin: 0; }
    .field-help-dialog-body dl > div { display: grid; gap: 5px; }
    .field-help-dialog-body dt { padding-bottom: 5px; border-bottom: 1px solid var(--line); font-weight: 800; }
    .field-help-dialog-body dd { margin: 0; color: var(--muted); line-height: 1.4; }
    .successor-shift-dialog { width: min(760px, calc(100vw - 32px)); }
    .successor-shift-dialog-header > div,
    .successor-shift-dialog-body,
    .successor-shift-dialog-body > div { min-width: 0; }
    .successor-shift-eyebrow {
      display: block;
      margin-bottom: 2px;
      color: var(--muted);
      font-size: .7rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .successor-shift-intro { display: grid; gap: 6px; }
    .successor-shift-intro strong { font-size: 1rem; }
    .successor-shift-summary {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
      margin: 0;
    }
    .successor-shift-summary > div {
      display: grid;
      gap: 2px;
      padding: 9px;
      border: 1px solid var(--line);
      border-radius: 6px;
      background: var(--panel-soft);
    }
    .successor-shift-summary dt {
      color: var(--muted);
      font-size: .7rem;
      font-weight: 800;
      text-transform: uppercase;
    }
    .successor-shift-summary dd { margin: 0; font-size: 1.1rem; font-weight: 800; }
    .successor-team-policies { display: grid; gap: 10px; margin-top: 14px; }
    .successor-team-policy {
      display: grid;
      grid-template-columns: minmax(10rem, .7fr) minmax(0, 1fr) minmax(0, 1fr);
      gap: 10px;
      align-items: start;
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 6px;
    }
    .successor-team-policy > strong { padding-top: 7px; }
    .successor-team-policy select { width: 100%; }
    .transition-assignment {
      display: grid;
      gap: 6px;
      margin-top: 7px;
      padding: 8px;
      border-left: 3px solid var(--warning);
      background: color-mix(in srgb, var(--warning) 10%, var(--panel));
      font-size: .75rem;
    }
    .transition-assignment strong { color: var(--warning); }
    .transition-assignment button { justify-self: start; }
    .shift-version-range { color: var(--muted); font-size: .76rem; }
    .shift-version-range ul { display: grid; gap: 4px; margin: 5px 0 0; padding-left: 18px; }
    .shift-version-range li span { display: block; }
    @media (max-width: 760px) {
      .successor-shift-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .successor-team-policy { grid-template-columns: 1fr; }
      .successor-team-policy > strong { padding-top: 0; }
    }
    .system-health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; text-align: left; }
    .system-health-card { position: relative; display: grid; align-content: start; justify-items: start; gap: 2px; min-height: 58px; padding: 9px; border: 1px solid var(--line); border-radius: 6px; background: transparent; text-align: left; }
    .system-health-card > span { order: 1; min-height: 0; padding: 0; border: 0; background: transparent; font-size: 1.05rem; font-weight: 800; line-height: 1.1; text-align: left; }
    .system-health-card > strong { order: 2; color: var(--muted); font-size: .78rem; font-weight: 600; line-height: 1.2; }
    .system-health-detail { order: 3; display: block; width: 100%; margin-top: 6px; padding-top: 7px; border-top: 1px solid var(--line); color: var(--muted); font-size: .73rem; line-height: 1.35; text-align: left; }
    .system-health-card p { margin: 0; color: var(--muted); font-size: .73rem; line-height: 1.3; text-align: left; }
    .system-health-card.status-healthy, .system-health-card.status-live, .system-health-card.status-clear, .system-health-card.status-current { border-left-color: var(--success); }
    .system-health-card.status-needs-attention, .system-health-card.status-fallback, .system-health-card.status-attention { border-left-color: var(--warning); }
    .system-health-card.status-unavailable { border-left-color: var(--danger); }
    .system-health-card.status-checking, .system-health-card.status-pending, .system-health-card.status-updating { border-left-color: var(--accent); }
    .system-health-storage { min-width: min(100%, 260px); }
    .system-health-children { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; margin-top: 10px; }
    .system-health-children > details { overflow: hidden; }
    .system-health-children > details > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; cursor: pointer; font-weight: 800; list-style: none; }
    .system-health-children > details > summary::-webkit-details-marker { display: none; }
    .system-health-children > details > summary span { color: var(--muted); font-size: .73rem; font-weight: 600; }
    .system-health-children > details > div { padding: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; line-height: 1.35; }
    .system-health-usage { grid-column: 1 / -1; }
    .database-usage-overview { display: grid; gap: 12px; }
    .database-usage-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .database-usage-metrics > div { display: grid; gap: 2px; min-width: 0; padding-right: 8px; border-right: 1px solid var(--line); }
    .database-usage-metrics > div:last-child { padding-right: 0; border-right: 0; }
    .database-usage-metrics strong { color: var(--ink); font-size: 1.05rem; }
    .database-usage-metrics span { color: var(--muted); font-size: .73rem; font-weight: 700; text-transform: uppercase; }
    .database-capacity { display: grid; gap: 6px; }
    .database-capacity-label { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .78rem; }
    .database-capacity-label strong { color: var(--ink); }
    .database-capacity-track { height: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
    .database-capacity-track > span { display: block; width: var(--database-usage); min-width: 2px; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--success), var(--accent)); }
    .release-history-list { display: grid; gap: 10px; }
    .release-history-item { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-soft); }
    .release-history-item > div:first-child { display: grid; gap: 3px; }
    .release-history-item h3, .release-history-item h4 { margin: 0; }
    .release-history-item h3 { font-size: .9rem; }
    .release-history-item h4 { padding-bottom: 5px; border-bottom: 1px solid var(--line); font-size: .8rem; }
    .release-history-item p, .release-history-item ul { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.4; }
    .release-history-item .btn-quiet { justify-self: start; }
    .release-history-detail { display: grid; gap: 9px; padding-top: 9px; border-top: 1px solid var(--line); }
    .storage-trend { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; color: var(--muted); font-size: .82rem; }
    .storage-trend strong { color: var(--text); }
    .storage-trend span + span { padding-left: 12px; border-left: 1px solid var(--line); }

    .site-footer {
      display: grid;
      justify-items: center;
      padding: 12px 16px 18px;
      color: color-mix(in srgb, var(--bg) 58%, var(--muted));
      text-align: center;
    }

    .site-footer small { font-size: 9px; line-height: 1.25; }
    .site-footer a { color: inherit; text-decoration: none; }
    .site-footer a:hover,
    .site-footer a:focus-visible { text-decoration: underline; }

    .schedule-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    /* Glass-lite application header: calm, legible, and deliberately light on
       decoration so the workspace remains the visual focus. */
    .schedule-toolbar {
      position: sticky;
      top: 10px;
      z-index: 30;
      padding: 12px;
      border-color: color-mix(in srgb, var(--line-strong) 72%, transparent);
      background: color-mix(in srgb, var(--panel) 86%, transparent);
      box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 8%, transparent);
      backdrop-filter: blur(14px) saturate(1.08);
      -webkit-backdrop-filter: blur(14px) saturate(1.08);
    }

    .schedule-toolbar .schedule-actions {
      gap: 6px;
    }

    .schedule-toolbar .account-menu {
      margin-left: 2px;
      padding-left: 7px;
      border-left: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
    }

    .schedule-toolbar .schedule-actions > .icon,
    .schedule-toolbar .schedule-actions > .account-menu > .icon {
      transition: background-color .16s ease, color .16s ease, transform .16s ease;
    }

    .schedule-toolbar .schedule-actions > .icon:hover,
    .schedule-toolbar .schedule-actions > .account-menu > .icon:hover {
      transform: translateY(-1px);
    }

    .account-menu {
      position: relative;
      z-index: 80;
    }

    .account-menu-panel {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      z-index: 90;
      width: min(300px, calc(100vw - 32px));
      display: grid;
      gap: 8px;
      padding: 10px;
      border: 1px solid var(--line-strong);
      border-radius: 7px;
      background: var(--panel);
      box-shadow: var(--shadow);
    }

    .account-menu-panel form {
      display: grid;
      gap: 8px;
      padding-top: 8px;
      border-top: 1px solid var(--line);
    }

    .account-menu-panel button:not(.icon) {
      width: 100%;
    }

    .account-menu-message {
      min-height: 18px;
      margin: 0;
      color: var(--muted);
      font-size: 12px;
    }

    .password-security-warning {
      padding: 8px;
      border-left: 3px solid var(--warning, #b7791f);
      background: color-mix(in srgb, var(--warning, #b7791f) 12%, transparent);
      color: var(--text);
      line-height: 1.4;
    }

    .schedule-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .schedule-header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .schedule-controls-subsection {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 12px;
      margin: var(--section-padding);
      padding: var(--section-padding);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel-soft);
    }

    body.admin-mode #scheduleSection .schedule-controls-subsection {
      margin: 0;
      border-top: 0;
      border-radius: 0 0 var(--radius) var(--radius);
    }

    body.admin-mode #scheduleBody {
      gap: 0;
    }

    body.admin-mode #scheduleBody > .panel-body {
      padding-top: 6px;
    }

    @media (min-width: 761px) {
      body:not(.admin-mode) #scheduleSection .schedule-controls-subsection {
        padding: 8px 10px;
        gap: 8px;
      }

      body:not(.admin-mode) #scheduleSection > #scheduleBody > .panel-body {
        padding: 8px;
      }

      body:not(.admin-mode) #scheduleSection .shift-head {
        min-height: 98px;
        padding: 8px 6px;
      }

      body:not(.admin-mode) #scheduleSection .cell {
        min-height: 98px;
        padding: 6px;
        gap: 3px;
      }
    }

    .schedule-view-controls {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .theme-toggle {
      font-size: 19px;
      line-height: 1;
    }

    .caret-toggle {
      display: inline-grid;
      place-items: center;
      font-size: 0;
      line-height: 1;
    }

    .caret-toggle::after {
      content: "+";
      font-size: 22px;
      font-weight: 600;
      line-height: 1;
      transition: opacity .16s ease;
    }

    .caret-toggle[aria-expanded="true"]::after {
      content: "−";
    }

    @media (min-width: 761px) {
      .panel-header > .controls,
      .toolbar > .controls,
      .schedule-header-actions,
      .subsection-header-actions {
        display: flex;
        align-items: center;
      }

      /* Keep the transparent help glyph and its caret as a clearly paired,
         evenly spaced header-control group. */
      .panel-header > .ui-header-actions,
      .toolbar > .ui-header-actions,
      .schedule-header-actions.ui-header-actions,
      .subsection-header-actions.ui-header-actions {
        gap: 8px;
      }

      .panel-header > .controls .caret-toggle,
      .toolbar > .controls .caret-toggle,
      .schedule-header-actions .caret-toggle,
      .subsection-header-actions .caret-toggle {
        align-self: center;
      }
    }

    body:not(.dark) .theme-toggle { filter: grayscale(1) brightness(.42); }

    .controls {
      flex: 1;
      justify-content: flex-end;
    }

    .segmented {
      display: inline-flex;
      align-items: center;
      gap: 2px;
      border: 1px solid var(--line-strong);
      background: var(--panel-soft);
      border-radius: 6px;
      padding: 2px;
    }

    .segmented button {
      border: 0;
      min-height: 30px;
      background: transparent;
      padding: 0 10px;
    }

    .segmented button.active {
      background: var(--accent);
      color: #fff;
    }

    .button-group,
    .segmented {
      isolation: isolate;
    }

    .button-group > button,
    .segmented > button {
      position: relative;
    }

    .button-group > button:focus-visible,
    .segmented > button:focus-visible {
      z-index: 1;
    }

    .week-nav {
      display: grid;
      grid-template-columns: 36px minmax(180px, 1fr) 36px;
      align-items: center;
      gap: 8px;
      min-width: 290px;
    }

    /* Hide an unavailable previous-week control without collapsing its grid
       column, so the date range remains anchored while moving between weeks. */
    .week-nav .is-unavailable {
      visibility: hidden;
      pointer-events: none;
    }

    .week-label {
      text-align: center;
      font-weight: 800;
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .panel-header {
      border-bottom: 1px solid var(--line);
      padding: var(--section-padding);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }

    .panel-body {
      padding: var(--section-padding);
    }

    body.admin-mode #scheduleBody > #detailsBody {
      padding: 0 var(--section-padding);
    }

    .form-grid {
      display: grid;
      grid-template-columns: 1fr 92px;
      gap: 8px;
    }

    .form-grid.wide {
      grid-template-columns: 1fr 1fr;
    }

    .team-shift-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .rotation-heading {
      margin: 2px 0 0;
      font-size: 13px;
    }

    .rotation-shift-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 8px;
    }

    .rotation-shift {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 36px;
      gap: 6px;
      align-items: end;
    }

    @media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
      html,
      body { max-width: 100%; overflow-x: clip; }
      .shell { box-sizing: border-box; width: 100%; max-width: 100vw; overflow-x: clip; }
      .shell > main { min-width: 0; max-width: 100%; overflow-x: clip; }
      main { padding: 0 10px calc(72px + env(safe-area-inset-bottom)); }
      .workspace-view { padding-bottom: 24px; }
      .workspace-tabs { display: none; }
      .workspace-panel { min-height: calc(100dvh - 154px); }
      .mobile-screen-inactive { display: none !important; }
      .mobile-back-button { min-width: 40px; min-height: 40px; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 30px; line-height: 1; box-shadow: none; }
      .mobile-task-nav {
        position: fixed;
        z-index: 30;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        padding: 5px max(6px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
        border: 0;
        border-top: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
        border-radius: 0;
        background: color-mix(in srgb, var(--panel) 95%, transparent);
        box-shadow: 0 -8px 22px color-mix(in srgb, var(--ink) 8%, transparent);
        backdrop-filter: blur(20px) saturate(1.08);
        box-sizing: border-box;
        width: 100%;
        height: calc(67px + env(safe-area-inset-bottom));
      }
      .mobile-task-nav button { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 0; min-height: 52px; padding: 4px 2px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font-size: 10px; font-weight: 750; box-shadow: none; }
      .mobile-task-nav button svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
      .mobile-task-nav button[aria-pressed="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
      .mobile-task-nav button[aria-pressed="true"]::before { position: absolute; top: 1px; width: 18px; height: 2px; border-radius: 2px; background: currentColor; content: ""; }
      .mobile-home-screen { display: grid; gap: 14px; padding: 4px 0 12px; }
      .mobile-home-screen.mobile-screen-inactive { display: none; }
      .mobile-home-greeting { display: grid; gap: 2px; padding: 5px 2px 2px; }
      .mobile-home-greeting > span { color: var(--accent); font-size: .7rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
      .mobile-home-greeting h2 { margin: 0; font-size: 1.25rem; }
      .mobile-home-greeting p { margin: 2px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.35; }
      .mobile-home-priority-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
      .mobile-home-priority-card { display: grid; align-content: start; justify-items: start; gap: 3px; min-width: 0; min-height: 82px; padding: 10px; border: 1px solid var(--line); border-left: 4px solid var(--accent-3); border-radius: 10px; background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: none; text-align: left; }
      .mobile-home-priority-card.status-healthy { border-left-color: var(--success); }
      .mobile-home-priority-card.status-warning { border-left-color: var(--warning); }
      .mobile-home-priority-card.status-critical { border-left-color: var(--danger); }
      .mobile-home-priority-card > span { color: var(--muted); font-size: .62rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; }
      .mobile-home-priority-card > strong { overflow: hidden; width: 100%; color: var(--ink); font-size: 1rem; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
      .mobile-home-priority-card > small { color: var(--muted); font-size: .68rem; line-height: 1.25; }
      .mobile-home-clear { display: grid; justify-items: center; gap: 3px; padding: 18px; border: 1px solid var(--line); border-left: 4px solid var(--success); border-radius: 10px; color: var(--muted); text-align: center; }
      .mobile-home-clear strong { color: var(--success); }
      .mobile-home-quick { display: grid; gap: 7px; }
      .mobile-home-quick > strong { font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; }
      .mobile-home-quick nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
      .mobile-home-quick button { min-width: 0; min-height: 42px; padding: 6px; border-color: var(--line); background: transparent; color: var(--accent); font-size: .7rem; box-shadow: none; }
      .mobile-home-continue { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; min-height: 48px; padding: 8px 11px; border-color: var(--line); background: transparent; box-shadow: none; text-align: left; }
      .mobile-home-continue span { color: var(--muted); font-size: .68rem; }
      .mobile-home-continue strong { color: var(--accent); font-size: .76rem; }
      .mobile-home-continue b { color: var(--accent); font-size: 1.2rem; }
      .mobile-context-action { position: fixed; z-index: 35; right: max(14px, env(safe-area-inset-right)); bottom: calc(77px + env(safe-area-inset-bottom)); display: inline-grid; grid-template-columns: 20px auto; align-items: center; justify-items: center; gap: 7px; min-height: 44px; padding: 0 15px 0 11px; border: 1px solid color-mix(in srgb, var(--accent) 55%, white 10%); border-radius: 22px; background: var(--accent); color: white; font-size: .8rem; font-weight: 800; line-height: 1; box-shadow: 0 10px 26px color-mix(in srgb, var(--accent) 32%, transparent); }
      .mobile-context-action.hidden { display: none; }
      .mobile-context-action-icon { display: grid; place-items: center; width: 20px; height: 20px; font-size: 1.05rem; font-weight: 500; line-height: 1; }
      .mobile-context-action-label { display: block; line-height: 1; }
      .mobile-nav-badge { position: absolute; top: 2px; right: calc(50% - 22px); display: grid; place-items: center; min-width: 17px; height: 17px; padding: 0 4px; border: 2px solid var(--panel); border-radius: 10px; background: var(--danger); color: white; font-size: 9px; line-height: 1; }
      .mobile-filter-clear { min-width: 42px; min-height: 42px; padding: 0; border: 0; background: transparent; color: var(--accent); box-shadow: none; }
      .mobile-filter-body { align-content: start; }
      .mobile-filter-body input { min-height: 48px; font-size: 16px; }
      .mobile-filter-hidden { display: none !important; }
      .mobile-error-recovery { position: fixed; z-index: 70; right: 10px; bottom: calc(77px + env(safe-area-inset-bottom)); left: 10px; display: grid; gap: 9px; padding: 12px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--panel) 97%, transparent); box-shadow: 0 14px 36px color-mix(in srgb, var(--ink) 24%, transparent); }
      .mobile-error-recovery > div { display: flex; gap: 7px; justify-content: flex-end; }
      .mobile-error-recovery button { min-height: 40px; }
      .mobile-slot-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; width: 100%; min-height: 46px; padding: 6px 10px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); box-shadow: none; text-align: left; }
      .mobile-slot-row:last-child { border-bottom: 0; }
      .mobile-slot-row > span { display: grid; min-width: 0; gap: 1px; }
      .mobile-slot-row > span strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
      .mobile-slot-row > span small { color: var(--warning); font-size: 10px; }
      .mobile-slot-row > i { color: var(--warning); font-style: normal; }
      .mobile-slot-row b { color: var(--accent); font-size: 1.25rem; }
      .mobile-assignment-form { display: grid; gap: 16px; min-height: 100%; }
      .mobile-assignment-form select { min-height: 48px; font-size: 16px; }
      .mobile-dedicated-form { display: grid; gap: 14px; padding-bottom: calc(81px + env(safe-area-inset-bottom)); }
      .mobile-dedicated-form > .form-grid,
      .mobile-dedicated-form .form-grid.wide,
      .mobile-dedicated-form .unavailability-form { grid-template-columns: 1fr; }
      .mobile-dedicated-form > .subsection-add-button,
      .mobile-dedicated-form .subsection-add-button { position: sticky; bottom: 0; min-height: 48px; margin-top: 8px; box-shadow: 0 -10px 24px color-mix(in srgb, var(--panel) 78%, transparent); }
      .mobile-detail-dialog button,
      .mobile-task-menu button,
      .mobile-home-screen button { min-height: 44px; }
      .mobile-detail-body .employee,
      .mobile-detail-body .shift-card,
      .mobile-task-menu-sections button { content-visibility: auto; contain-intrinsic-size: auto 72px; }
      .mobile-task-menu { position: fixed; z-index: 45; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding-top: min(18vh, 140px); background: var(--overlay-scrim); backdrop-filter: blur(6px); }
      .mobile-task-menu:not(.hidden) { display: flex; }
      .mobile-task-menu-sheet { display: flex; flex-direction: column; gap: 10px; box-sizing: border-box; width: 100%; height: auto; max-height: calc(100dvh - min(18vh, 140px)); margin-top: auto; padding: 10px max(20px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 20px 20px 0 0; background: color-mix(in srgb, var(--panel) 97%, transparent); box-shadow: 0 -18px 48px color-mix(in srgb, var(--ink) 20%, transparent); overflow-x: hidden; overflow-y: auto; }
      .mobile-task-menu-sheet::before { justify-self: center; align-self: center; width: 38px; height: 4px; border-radius: 4px; background: var(--line-strong); content: ""; }
      .mobile-task-menu-workspace-select > span { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
      .mobile-task-menu-sections { display: grid; gap: 6px; }
      .mobile-task-menu-sections button { min-width: 0; min-height: 44px; text-align: left; }
      .mobile-task-menu-sections button { position: relative; display: flex; align-items: center; justify-content: center; padding-right: 42px; padding-left: 42px; border-color: transparent; background: transparent; text-align: center; }
      .mobile-task-menu-sections svg { position: absolute; left: 14px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
      .mobile-menu-badge { position: absolute; right: 14px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--danger); color: white; font-size: 10px; }
      .mobile-task-menu-sections button[aria-current="page"] { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: color-mix(in srgb, var(--accent) 12%, transparent); }
      .mobile-task-menu-workspace-select { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 7px; box-sizing: border-box; min-width: 0; width: 100%; margin: 0; padding: 10px 12px 14px; border-bottom: 1px solid var(--line); }
      .mobile-task-menu-workspace-select > span { text-align: center; }
      .mobile-task-menu-workspace-select select { box-sizing: border-box; min-width: 0; max-width: 100%; width: 100%; min-height: 42px; padding-block: 7px; font-size: 14px; font-weight: 800; }
      .mobile-task-menu-account,
      .mobile-task-menu-report { position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; min-height: 44px; padding-right: 42px; padding-left: 42px; border-color: transparent; background: transparent; text-align: center; }
      .mobile-task-menu-account svg,
      .mobile-task-menu-report svg { position: absolute; left: 14px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
      .mobile-task-menu-report { border-top: 1px solid var(--line); }
      .mobile-task-menu-account[aria-expanded="true"] { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
      .mobile-task-menu-account-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
      .mobile-task-menu-account-actions button { min-width: 0; min-height: 40px; padding: 7px 9px; font-size: 12px; }
      .mobile-task-menu-account-actions button:last-child:nth-child(odd) { grid-column: 1 / -1; }
      body:has(dialog[open]) .mobile-task-nav,
      body:has(dialog[open]) .mobile-context-action,
      body.mobile-keyboard-open .mobile-task-nav,
      body.mobile-keyboard-open .mobile-context-action { visibility: hidden; pointer-events: none; }
      .connection-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
      .connection-status-card { display: grid; gap: 3px; min-width: 0; padding: 10px 11px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 10px; background: transparent; }
      .connection-status-card.status-healthy { border-left-color: var(--success); }
      .connection-status-card.status-warning { border-left-color: var(--warning); }
      .connection-status-card.status-critical { border-left-color: var(--danger); }
      .connection-status-card > span { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
      .connection-status-card strong { font-size: 14px; }
      .connection-status-card small { color: var(--muted); font-size: 11px; line-height: 1.3; }
      .connection-status-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 12px; }
      .connection-status-actions [data-connection-health] { grid-column: 1 / -1; width: 100%; }

      .mobile-schedule-view-controls { position: sticky; z-index: 8; top: var(--mobile-shell-header-height, 0); display: block; margin-bottom: 8px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: 0 5px 16px color-mix(in srgb, var(--ink) 5%, transparent); backdrop-filter: blur(18px) saturate(1.08); }
      .mobile-date-strip { grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(7, 1fr); gap: 3px !important; }
      .mobile-date-strip button { display: grid; justify-items: center; gap: 1px; min-width: 0; min-height: 45px; padding: 4px 1px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); box-shadow: none; }
      .mobile-date-strip button span { font-size: 10px; font-weight: 800; }
      .mobile-date-strip button strong { font-size: 14px; }
      .mobile-date-strip button i { width: 18px; height: 3px; border-radius: 3px; background: var(--success); }
      .mobile-date-strip button[data-coverage-tone="warning"] i { background: var(--warning); }
      .mobile-date-strip button[data-coverage-tone="danger"] i { background: var(--danger); }
      .mobile-date-strip button[data-today="true"] { outline: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: -2px; }
      .mobile-date-strip button[aria-pressed="true"] { background: var(--accent); color: white; }
      .mobile-calendar-one-day { grid-template-columns: minmax(0, 1fr); }
      .mobile-calendar-one-day .mobile-day-header { cursor: default; }
      .mobile-shift-card-compact { gap: 7px; padding: 10px; cursor: pointer; }
      .mobile-shift-card-compact .mobile-shift-header { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; }
      .mobile-shift-previous-day { align-self: start; justify-self: center; text-align: center; white-space: nowrap; }
      .mobile-shift-card-compact .mobile-shift-time { display: grid; justify-items: end; gap: 1px; }
      .mobile-shift-card-compact .mobile-shift-time small { color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; }
      .mobile-shift-card-compact .mobile-shift-assignments { gap: 4px; }
      .mobile-shift-card-compact .mobile-assignment { min-height: 30px; padding: 4px 8px; }
      .mobile-shift-more { padding: 2px 8px; color: var(--accent); font-size: 11px; font-weight: 800; }
      .mobile-shift-detail { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 0; min-height: 100%; }
      .mobile-shift-detail-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-left: 4px solid var(--shift-color, var(--accent)); border-bottom: 1px solid var(--line); background: transparent; }
      .mobile-shift-detail-summary strong { min-width: 0; font-size: 12px; }
      .mobile-shift-detail-summary span { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
      .mobile-shift-assignment-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; padding: 8px 10px; }
      .mobile-shift-assignment-heading > strong { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
      .mobile-shift-assignment-heading > span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
      .mobile-shift-assignment-heading > button { min-height: 36px; padding: 0 8px; border: 0; background: transparent; color: var(--accent); box-shadow: none; }
      .mobile-shift-assignment-list { align-self: start; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--panel) 94%, transparent); }
      .mobile-shift-done { justify-content: stretch; }
      .mobile-shift-done > button { flex: 1; }
      .mobile-seat-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 9px; padding: 10px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 72%, transparent); }
      .mobile-seat-editor label { gap: 4px; font-size: 11px; }
      .mobile-seat-editor select { min-height: 44px; font-size: 16px; }
      .mobile-seat-editor-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }
      .mobile-seat-editor-status strong { color: var(--ink); font-size: 11px; }
      .mobile-seat-editor-actions { display: flex; flex-wrap: wrap; gap: 7px; }
      .mobile-seat-editor-actions button { flex: 1 1 140px; min-height: 40px; }
      .mobile-autofill-preview { display: grid; align-content: start; gap: 16px; min-height: 100%; }
      .mobile-autofill-preview-metric { display: grid; justify-items: center; gap: 4px; padding: 24px; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-radius: 16px; background: color-mix(in srgb, var(--accent) 8%, transparent); text-align: center; }
      .mobile-autofill-preview-metric strong { color: var(--accent); font-size: 2.4rem; line-height: 1; }
      .mobile-autofill-preview-metric span { color: var(--muted); font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }

      .mobile-detail-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; color: var(--ink); background: var(--panel); }
      .mobile-detail-dialog::backdrop { background: var(--overlay-scrim); }
      .mobile-detail-header { position: sticky; top: 0; z-index: 1; display: grid; grid-template-columns: 42px minmax(0, 1fr) 42px; align-items: center; min-height: 58px; padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 95%, transparent); backdrop-filter: blur(18px); }
      .mobile-detail-header h2 { overflow: hidden; margin: 0; font-size: 18px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
      .mobile-detail-body { min-height: 0; padding: 12px max(12px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); overflow-y: auto; }
      .mobile-detail-body > * { width: 100%; margin: 0; box-shadow: none; }
      .mobile-detail-body .mobile-shift-time { color: var(--ink); }
      .mobile-detail-body .operational-panel { min-height: calc(100dvh - 96px); }
      .mobile-sticky-actions { position: sticky !important; z-index: 2; bottom: calc(-12px + env(safe-area-inset-bottom)); display: flex; gap: 8px; margin: 14px -12px -12px !important; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 96%, transparent); box-shadow: 0 -8px 20px color-mix(in srgb, var(--ink) 8%, transparent); backdrop-filter: blur(16px); }
      .mobile-sticky-actions > button { min-height: 44px; }
      .setup-add-form,
      .add-subsection { margin: 12px 0; }

      .team-shift-grid { grid-template-columns: 1fr; }
    }

    .employee-list {
      min-height: 0;
      overflow: visible;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
      gap: 8px;
      align-content: start;
      align-items: stretch;
      padding: 0;
    }

    .employee-list-load-more {
      grid-column: 1 / -1;
      display: flex;
      justify-content: center;
      padding: 4px 0;
    }

    .employee-list > .employee:not(:has(.card-details)) {
      content-visibility: auto;
      contain-intrinsic-size: 180px;
    }

    .employee {
      border: 1px solid var(--line);
      background: var(--panel);
      border-radius: 7px;
      padding: 9px;
      display: grid;
      gap: 7px;
      align-content: start;
      height: 100%;
      box-sizing: border-box;
    }

    #employeesSection .panel-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 36px;
      align-items: start;
    }

    #employeesSection .panel-header > div:first-child {
      min-width: 0;
    }

    #employeesSection .panel-header .controls {
      display: flex;
      flex: 0 0 36px;
      width: 36px;
      min-width: 36px;
      justify-content: end;
    }

    /* The Employee Management header has two header actions.  Its compact
       single-column rule is for narrow screens only; on desktop it must use
       the same horizontal, center-aligned action row as every other header. */
    @media (min-width: 761px) {
      #employeesSection .panel-header {
        display: flex;
        align-items: center;
      }

      #employeesSection .panel-header .controls {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        flex-wrap: nowrap;
        align-items: center;
      }
    }

    .employee.active {
      border-color: var(--accent);
      box-shadow: inset 3px 0 0 var(--accent);
    }

    .employee-top {
      display: flex;
      align-items: start;
      justify-content: space-between;
      gap: 10px;
    }

    .employee-top > div:first-child {
      display: grid;
      flex: 1 1 auto;
      min-width: 0;
      gap: 7px;
    }

    .employee-top .employee-name {
      padding-bottom: 6px;
      border-bottom: 1px solid var(--line);
    }

    .employee-name {
      font-weight: 800;
      min-width: 0;
      overflow-wrap: anywhere;
    }

    .opportunity-title { display: flex; align-items: center; gap: 6px; }
    .opportunity-title .shift-countdown { margin-left: auto; flex: none; }

    .mini-grid {
      display: grid;
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      gap: 7px;
    }

    .mini-grid > label,
    .employee {
      min-width: 0;
    }

    .day-checks {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      gap: 4px;
    }

    .day-checks label {
      display: grid;
      place-items: center;
      min-height: 28px;
      border: 1px solid var(--line);
      border-radius: 5px;
      background: var(--panel-soft);
      color: var(--muted);
      font-size: 11px;
      cursor: pointer;
    }

    .day-checks input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }

    .day-checks label:has(input:checked) {
      background: rgba(37, 111, 109, .1);
      border-color: rgba(37, 111, 109, .45);
      color: var(--accent);
    }

    .shift-manager {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 10px;
      align-content: start;
      align-items: stretch;
    }

    .shift-card {
      border: 1px solid var(--line);
      background: var(--panel);
      border-radius: 7px;
      padding: 10px;
      display: grid;
      gap: 8px;
      align-content: start;
      height: 100%;
      box-sizing: border-box;
    }

    .shift-card[draggable="true"] { cursor: grab; }
    .shift-card.dragging { opacity: .45; }
    .shift-card.drag-over { outline: 2px solid var(--accent); outline-offset: 2px; }
    .editing-locked { opacity: .62; }

    .color-palette {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }

    .color-swatch {
      width: 24px;
      min-height: 24px;
      padding: 0;
      border-radius: 4px;
      background: var(--swatch-color);
      border: 1px solid rgba(0, 0, 0, .2);
    }

    .color-swatch.selected {
      outline: 2px solid var(--ink);
      outline-offset: 2px;
    }

    .tag.shift-color-label {
      color: var(--shift-color);
      border-color: var(--shift-color);
    }
    .shift-head.shift-colored { background: var(--shift-tint); }

    .shift-card-title,
    .shift-title,
    .mobile-shift-title {
      display: flex;
      align-items: stretch;
      gap: 7px;
    }

    .shift-title-accent {
      flex: 0 0 4px;
      min-height: 1.25em;
      background: var(--shift-color);
      border-radius: 1px;
    }

    .my-shift-color {
      width: 10px;
      height: 10px;
      flex: 0 0 auto;
      background: var(--shift-color);
      border-radius: 2px;
      display: inline-block;
      margin-right: 7px;
    }

    .shift-card.add {
      background: var(--panel-soft);
      border-style: dashed;
    }

    .shift-fields {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 80px;
      gap: 8px;
    }

    .tag-row {
      display: flex;
      gap: 5px;
      flex-wrap: wrap;
    }

    .unavailability-card .employee-top > div:first-child {
      min-width: 0;
    }

    .tag {
      font-size: 11px;
      font-weight: 800;
      color: var(--ink);
      border: 1px solid var(--line);
      border-radius: 999px;
      padding: 2px 7px;
      background: var(--panel-soft);
      line-height: 1.5;
    }

    .tag.role {
      border-color: rgba(37, 111, 109, .35);
      color: var(--accent);
    }

    .tag.must-fill-tag {
      color: #b91c1c;
      border-color: rgba(185, 28, 28, .45);
      background: rgba(185, 28, 28, .10);
    }

    body.dark .tag.must-fill-tag {
      color: #fca5a5;
      border-color: rgba(252, 165, 165, .5);
      background: rgba(185, 28, 28, .22);
    }

    .calendar-wrap {
      overflow: auto;
      overscroll-behavior-x: contain;
      -webkit-overflow-scrolling: touch;
      min-width: 0;
      max-width: 100%;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: var(--panel);
    }

    #scheduleBody,
    #scheduleBody > .panel-body {
      min-width: 0;
      max-width: 100%;
    }

    .calendar {
      display: grid;
      grid-template-columns: var(--calendar-row-width) repeat(7, minmax(var(--calendar-day-width), 1fr));
    }

    .calendar.mobile-calendar-host {
      display: block;
    }

    .mobile-calendar {
      display: grid;
      gap: var(--child-gap);
      padding: 10px;
    }

    .mobile-day {
      border: 1px solid var(--line);
      border-radius: 8px;
      overflow: hidden;
      background: var(--panel);
    }

    .mobile-day.today {
      border-color: var(--accent);
      box-shadow: inset 0 0 0 1px var(--accent);
    }

    .mobile-day.today .mobile-day-header {
      box-shadow: inset 0 3px 0 var(--accent);
      background: color-mix(in srgb, var(--accent) 7%, var(--panel-soft));
    }

    .mobile-day-header {
      padding: 10px 12px;
      border-bottom: 1px solid var(--line);
      background: var(--panel-soft);
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
    }

    .mobile-day-meta {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    .mobile-day-title {
      font-size: 14px;
      font-weight: 900;
    }

    .mobile-day-date {
      font-size: 12px;
      font-weight: 700;
      color: var(--muted);
    }

    .mobile-day-shifts {
      display: grid;
    }

    .mobile-shift-card {
      border-top: 1px solid var(--line);
      background: var(--shift-tint, var(--panel));
      padding: 10px 12px;
      display: grid;
      gap: 8px;
    }

    .mobile-shift-card:first-child {
      border-top: 0;
    }

    .mobile-shift-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 10px;
    }

    .mobile-shift-title {
      font-size: 13px;
      font-weight: 900;
      line-height: 1.25;
    }

    .mobile-shift-time {
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      text-align: right;
      white-space: nowrap;
    }

    .mobile-shift-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      justify-content: center;
    }

    .mobile-shift-assignments {
      display: grid;
      gap: 3px;
    }

    .mobile-assignment {
      border: 1px solid var(--line);
      border-radius: 6px;
      background: rgba(255, 255, 255, .55);
      min-height: 34px;
      padding: 7px 9px;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 700;
      overflow-wrap: anywhere;
    }

    body.dark .mobile-assignment {
      background: rgba(17, 24, 22, .42);
    }

    .mobile-assignment.unassigned {
      color: var(--muted);
      font-weight: 500;
    }

    .corner,
    .day-head,
    .shift-head,
    .cell {
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .corner,
    .day-head {
      position: sticky;
      top: 0;
      z-index: 2;
      background: var(--panel-soft);
    }

    .corner {
      left: 0;
      z-index: 3;
      min-height: 58px;
      display: grid;
      place-items: center;
      font-size: 12px;
      font-weight: 800;
      color: var(--muted);
    }

    .day-head {
      min-height: 58px;
      padding: 9px;
      display: grid;
      gap: 2px;
      align-content: center;
      text-align: center;
    }

    .day-head.today {
      background: color-mix(in srgb, var(--accent) 7%, var(--panel-soft));
      box-shadow: inset 0 3px 0 var(--accent), inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent);
    }

    .day-name {
      font-size: 13px;
      font-weight: 900;
    }

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

    .schedule-status {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 20px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .schedule-toolbar .schedule-status {
      display: inline-flex;
      grid-column: auto;
      grid-row: auto;
      flex: 0 0 10px;
      min-height: 36px;
      gap: 0;
    }

    .schedule-toolbar .schedule-status:not(.healthy) {
      flex-basis: auto;
      gap: 8px;
    }

    .schedule-status.error { color: var(--danger); }
    .schedule-status.saving { color: var(--warning); }
    .live-status-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent); }
    .schedule-status.healthy { color: var(--success); }
    .schedule-status.healthy .live-status-dot { background: var(--success); }
    .schedule-status.saving .live-status-dot { background: var(--warning); }
    .schedule-status.error .live-status-dot { background: var(--danger); }
    .schedule-status.healthy #scheduleStatusMessage { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

    .schedule-status button {
      min-height: 28px;
      padding-inline: 8px;
      font-size: 11px;
    }

    .shift-head {
      position: sticky;
      left: 0;
      z-index: 1;
      background: var(--panel-soft);
      min-height: 112px;
      padding: 10px 8px;
      display: grid;
      align-content: start;
      gap: 5px;
    }

    .shift-title {
      font-weight: 900;
      font-size: 13px;
    }

    .shift-time {
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .shift-head .tag {
      align-self: center;
      font-size: 9px;
      font-weight: 500;
      line-height: 1.25;
      padding: 1px 5px;
      border-radius: 0;
    }

    .cell {
      min-height: 112px;
      padding: 8px;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 3px;
      background: var(--panel);
    }

    .cell.today {
      background: color-mix(in srgb, var(--accent) 4%, var(--panel));
      box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent);
    }

    .cell.off {
      background: var(--panel-soft);
      color: var(--muted);
      justify-content: center;
      text-align: center;
      font-size: 12px;
      font-weight: 800;
    }

    .cell.off.today {
      background: color-mix(in srgb, var(--accent) 4%, var(--panel-soft));
    }

    .slot {
      display: grid;
      gap: 3px;
      padding: 2px 3px;
      border: 1px solid transparent;
      border-radius: 4px;
    }

    .slot select {
      min-height: 32px;
      padding: 5px 7px;
      font-size: 13px;
    }

    .slot.has-warning {
      background: #fff4cf;
      border-color: #d6ad4a;
    }

    body.dark .slot.has-warning {
      background: rgba(214, 173, 74, .18);
      border-color: rgba(232, 189, 108, .55);
    }

    .assignment-text {
      min-height: 32px;
      display: flex;
      align-items: center;
      gap: 6px;
      overflow-wrap: anywhere;
      font-size: 13px;
      font-weight: 700;
    }

    .assignment-text.unassigned {
      color: var(--muted);
      font-weight: 500;
    }

    .mobile-assignment > span:last-child,
    .assignment-text > span:last-child {
      min-width: 0;
    }

    .slot-assignment-row {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .slot-assignment-row select {
      min-width: 0;
      flex: 1;
    }

    .remove-slot {
      width: 32px;
      min-width: 32px;
      min-height: 32px;
      border-radius: 4px;
      padding: 0;
      color: var(--danger);
    }

    .add-slot {
      min-height: 30px;
      font-size: 12px;
      border-style: dashed;
      color: var(--accent);
    }

    .cell > .add-slot {
      margin-top: auto;
      width: 100%;
    }

    .notice-list {
      display: grid;
      gap: 8px;
    }

    .warning-group {
      border: 1px solid var(--line);
      background: var(--panel);
      border-radius: 6px;
    }

    .warning-group summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      cursor: pointer;
      padding: 9px 10px;
      font-size: 13px;
      font-weight: 800;
    }

    .warning-group .notice-list {
      padding: 0 10px 10px;
    }

    .notice {
      border-left: 4px solid var(--warning);
      background: #fff8e9;
      padding: 9px 10px;
      border-radius: 6px;
      font-size: 13px;
      line-height: 1.35;
    }

    .coverage-warning-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
    }

    .coverage-warning-copy {
      display: grid;
      gap: 3px;
      min-width: 0;
    }

    .coverage-warning-copy small {
      color: var(--muted);
      font-size: 11px;
    }

    .coverage-warning-row button {
      min-height: 34px;
      padding: 6px 10px;
      white-space: nowrap;
    }

    .coverage-warning-row.acknowledged {
      border-left-color: var(--success);
    }

    .notice.ok {
      border-left-color: var(--success);
      background: #edf8f1;
    }

    body.dark .notice {
      background: rgba(232, 189, 108, .12);
    }

    body.dark .notice.ok {
      background: rgba(115, 215, 154, .12);
    }

    @media (max-width: 760px) {
      .coverage-warning-row {
        grid-template-columns: minmax(0, 1fr);
      }

      .coverage-warning-row button {
        justify-self: start;
        min-height: 40px;
      }
    }

    .stats {
      align-items: stretch;
    }

    .stat {
      min-width: 120px;
      flex: 1;
      position: relative;
      background: transparent;
      border: 1px solid var(--line);
      border-radius: 7px;
      padding: 10px;
    }

    .stat strong {
      display: block;
      font-size: 20px;
      line-height: 1.1;
    }

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

    .stat button {
      position: absolute;
      top: 50%;
      right: 8px;
      margin: 0;
      transform: translateY(-50%);
    }

    .stat.needs-attention {
      border-left: 4px solid var(--warning);
    }

    .stat.all-clear {
      border-left: 4px solid var(--success);
    }

    .availability-chart {
      margin: 0;
      padding: 0;
      min-width: 0;
      max-width: 100%;
      border: 0;
      background: transparent;
    }

    .availability-chart-filter {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px 8px;
      margin-top: 8px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .availability-role-options {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 5px;
    }

    .availability-role-option {
      display: flex;
      align-items: center;
      gap: 4px;
      min-height: 26px;
      padding: 2px 7px;
      border: 1px solid var(--line);
      border-radius: 5px;
      background: var(--panel);
      color: var(--ink);
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }

    .availability-role-option:has(input:checked) {
      border-color: var(--accent);
      background: rgba(37, 111, 109, .12);
      color: var(--accent);
    }

    .availability-role-option input {
      margin: 0;
      width: 14px;
      min-width: 14px;
      height: 14px;
      min-height: 14px;
      accent-color: var(--accent);
    }

    .availability-calendar-scroll {
      margin-top: 10px;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      overscroll-behavior-inline: contain;
      -webkit-overflow-scrolling: touch;
    }

    .availability-week-calendar {
      width: max(100%, 700px);
      min-width: 700px;
      box-sizing: border-box;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 7px;
    }

    #weeklyPersonnelStatusSection,
    #weeklyPersonnelStatusBody,
    #availabilityChart {
      min-width: 0;
      max-width: 100%;
    }

    #weeklyPersonnelStatusSection,
    #weeklyPersonnelStatusBody {
      overflow: hidden;
    }

    #weeklyPersonnelStatusSection .panel-header > div:first-child {
      min-width: 0;
    }

    .availability-week-selector { flex: 0 0 auto; align-self: center; }
    .availability-week-selector button { min-height: 26px; padding-inline: 7px; font-size: 11px; }
    .personnel-mobile-day-strip { display: none; }

    .availability-week-header-row,
    .availability-week-days,
    .availability-range-layer {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .availability-weekday {
      display: grid;
      gap: 2px;
      padding: 6px;
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: var(--panel-soft);
      color: var(--muted);
      font-size: 11px;
      font-weight: 800;
      text-align: center;
    }

    .availability-weekday.today {
      background: color-mix(in srgb, var(--accent) 7%, var(--panel-soft));
      box-shadow: inset 0 3px 0 var(--accent), inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent);
      color: var(--ink);
    }

    .availability-weekday.today .availability-week-date {
      color: var(--accent);
    }

    .availability-week-date {
      font-size: 10px;
      font-weight: 700;
    }

    .availability-weekday:last-child {
      border-right: 0;
    }

    .availability-week-surface {
      position: relative;
    }

    .availability-week-days {
      min-height: calc(72px + var(--availability-lane-height));
    }

    .availability-week-day {
      padding: 6px;
      border-right: 1px solid var(--line);
      background: var(--panel);
    }

    .availability-week-day:last-child {
      border-right: 0;
    }

    .availability-week-day.today {
      background: color-mix(in srgb, var(--accent) 7%, var(--panel));
      box-shadow: inset 0 0 0 2px var(--accent);
    }

    .availability-range-layer {
      position: absolute;
      right: 0;
      bottom: 5px;
      left: 0;
      grid-template-rows: repeat(var(--availability-lanes), 18px);
      gap: 2px 0;
      pointer-events: none;
    }

    .availability-range-bar {
      min-width: 0;
      margin-inline: 1px;
    }

    .availability-range-fill {
      min-width: 0;
      height: 100%;
      margin-right: var(--range-end);
      margin-left: var(--range-start);
      padding: 1px 6px;
      overflow: hidden;
      border: 1px solid var(--team-color);
      border-radius: 999px;
      font-size: 10px;
      font-weight: 800;
      line-height: 14px;
      text-overflow: ellipsis;
      white-space: nowrap;
      pointer-events: auto;
    }

    .availability-range-bar.scheduled {
      color: #fff;
    }

    .availability-range-bar.scheduled .availability-range-fill {
      background: color-mix(in srgb, var(--team-color) 78%, #000);
    }

    .availability-range-bar.available {
      color: var(--ink);
    }

    .availability-range-bar.available .availability-range-fill {
      background: color-mix(in srgb, var(--team-color) 18%, var(--panel));
    }

    .availability-range-bar.unavailable {
      color: #fff;
    }

    .availability-range-bar.unavailable .availability-range-fill {
      border-color: #fecaca;
      background: repeating-linear-gradient(135deg, #b91c1c 0 6px, #ef4444 6px 12px);
      box-shadow: inset 0 0 0 1px #7f1d1d;
    }

    .availability-week-day-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 4px;
      margin-bottom: 6px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
    }

    .availability-week-day-header strong {
      color: var(--accent);
      font-size: 10px;
      text-align: right;
    }

    .availability-calendar-group {
      display: grid;
      gap: 3px;
      margin-top: 7px;
    }

    .availability-calendar-group > span {
      color: var(--accent);
      font-size: 10px;
      font-weight: 800;
    }

    .availability-calendar-group.scheduled > span {
      color: var(--muted);
    }

    .availability-calendar-people {
      display: grid;
      gap: 3px;
    }

    .availability-calendar-person {
      display: flex;
      align-items: center;
      gap: 4px;
      min-width: 0;
      font-size: 10px;
      font-weight: 700;
      line-height: 1.2;
    }

    .availability-calendar-person > span:last-child {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .availability-calendar-person .schedule-team-marker {
      width: 14px;
      height: 14px;
      flex-basis: 14px;
      border-radius: 3px;
      font-size: 8px;
    }

    .availability-calendar-person.scheduled {
      color: var(--muted);
    }

    .availability-chart-scroll {
      overflow-x: auto;
      padding-top: 10px;
    }

    .availability-chart-grid {
      display: grid;
      grid-template-columns: 32px minmax(440px, 1fr);
      gap: 6px;
      min-width: 478px;
    }

    .availability-y-axis {
      height: 145px;
      display: flex;
      flex-direction: column;
      align-items: end;
      justify-content: space-between;
      color: var(--muted);
      font-size: 11px;
      font-weight: 700;
    }

    .availability-bars {
      height: 145px;
      display: grid;
      grid-template-columns: repeat(var(--availability-days), minmax(0, 1fr));
      align-items: end;
      gap: 6px;
      padding: 0 4px;
      border-left: 1px solid var(--line-strong);
      border-bottom: 1px solid var(--line-strong);
    }

    .availability-bar-column {
      position: relative;
      height: 100%;
      min-width: 0;
    }

    .availability-bar {
      position: absolute;
      right: 12%;
      bottom: 0;
      left: 12%;
      height: var(--bar-height);
      min-height: 0;
      border: 1px solid #0f766e;
      border-radius: 3px 3px 0 0;
      background: #3c9a8d;
    }

    .availability-value {
      position: absolute;
      bottom: calc(var(--bar-height) + 4px);
      left: 0;
      width: 100%;
      color: var(--ink);
      font-size: 11px;
      font-weight: 800;
      text-align: center;
    }

    .availability-x-spacer { min-height: 1px; }

    .availability-x-axis {
      display: grid;
      grid-template-columns: repeat(var(--availability-days), minmax(0, 1fr));
      gap: 6px;
      padding: 5px 4px 0;
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
      text-align: center;
    }

    .availability-x-axis span { min-width: 0; }

    .availability-bar-column {
      cursor: pointer;
    }

    .availability-bar-column.selected .availability-bar {
      background: var(--accent-2);
      border-color: var(--accent-2);
    }

    .availability-detail {
      display: grid;
      gap: 6px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--line);
    }

    .availability-detail h4 {
      margin: 0;
      font-size: 13px;
    }

    .availability-employee-list {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
    }

    .availability-employee-list .tag {
      font-size: 11px;
    }

    .availability-employee {
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }

    .availability-employee .schedule-team-marker {
      width: 14px;
      height: 14px;
      flex-basis: 14px;
      border-radius: 3px;
      font-size: 8px;
    }

    .my-shifts-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
      align-items: stretch;
    }

    .my-shifts-actions {
      display: flex;
      justify-content: center;
      gap: 6px;
      margin-bottom: 0;
    }

    .live-calendar-link {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 36px;
      gap: 6px;
      align-items: center;
      margin-top: 8px;
    }

    .live-calendar-link input {
      min-width: 0;
      font-size: 12px;
    }

    .my-shift-day {
      display: flex;
      flex-direction: column;
      gap: 5px;
      border: 1px solid var(--line);
      border-radius: 7px;
      background: var(--panel-soft);
      padding: 9px;
    }

    .my-shift-day-date {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: var(--muted);
      font-size: 11px;
      font-weight: 900;
      text-transform: uppercase;
      border-bottom: 1px solid var(--line);
      padding-bottom: 5px;
    }

    .my-shift-entry {
      display: flex;
      flex-direction: column;
      min-height: 30px;
      padding-top: 2px;
      font-size: 13px;
    }

    .my-shift-entry:last-child {
      flex: 1 1 auto;
    }

    .my-shift-entry + .my-shift-entry {
      border-top: 1px solid var(--line);
      padding-top: 7px;
    }

    .my-shift-entry-main {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      min-width: 0;
    }

    .my-shift-label {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: 800;
      flex: 1 1 120px;
    }

    .my-shift-meta {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex: 1 1 auto;
      flex-wrap: wrap;
      gap: 5px;
      min-width: min(100%, 150px);
      max-width: 100%;
      margin-left: auto;
    }

    .my-shift-time {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      min-width: 0;
      max-width: 100%;
      overflow-wrap: anywhere;
      text-align: right;
    }

    .my-shift-time small {
      color: var(--muted);
      font-size: 10px;
      font-weight: 700;
    }

    .assignment-time-adjusted {
      font-size: 10px;
      max-width: 100%;
      white-space: normal;
      text-align: center;
    }

    .my-shift-adjust-time {
      flex: 0 0 auto;
    }

    .shift-chain {
      margin-top: auto;
      border-top: 1px solid var(--line);
      background: transparent;
      overflow: hidden;
    }

    body.dark .shift-chain {
      background: transparent;
    }

    .shift-chain summary {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: 7px;
      min-height: 28px;
      padding: 5px 0 0;
      cursor: pointer;
      list-style: none;
    }

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

    .shift-chain-title {
      color: var(--muted);
      font-size: 9px;
      font-weight: 900;
      letter-spacing: .06em;
      text-transform: uppercase;
      white-space: nowrap;
    }

    .shift-chain-chips {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: nowrap;
      gap: 4px;
      min-width: 0;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
    }

    .shift-chain-chips::-webkit-scrollbar {
      display: none;
    }

    .shift-chain-chip {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      flex: 0 0 auto;
      min-height: 20px;
      max-width: 100%;
      padding: 2px 6px 2px 5px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(255, 255, 255, .42);
      color: var(--text);
      font-size: 10px;
      font-weight: 850;
      line-height: 1;
    }

    body.dark .shift-chain-chip {
      background: rgba(15, 23, 42, .38);
    }

    .shift-chain-chip--takeover { border-color: rgba(37, 99, 235, .35); }
    .shift-chain-chip--handover { border-color: rgba(14, 165, 233, .4); }
    .shift-chain-chip--with { border-color: rgba(34, 197, 94, .38); }
    .shift-chain-chip--handoff { border-color: rgba(245, 158, 11, .42); }

    .shift-chain-details {
      display: grid;
      gap: 6px;
      margin: 0;
      padding: 7px 0 1px;
      border-top: 1px solid var(--line);
      background: transparent;
    }

    .shift-chain-detail-group {
      display: grid;
      gap: 3px;
    }

    .shift-chain-detail-group dt {
      display: flex;
      align-items: center;
      gap: 5px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 900;
      letter-spacing: .05em;
      text-transform: uppercase;
    }

    .shift-chain-detail-group dd {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 8px;
      margin: 0;
      color: var(--text);
      font-size: 11px;
      font-weight: 750;
    }

    .shift-chain-detail-group dd span {
      color: var(--muted);
      font-size: 10px;
      text-align: right;
    }

    .shift-chain-empty {
      margin-top: 5px;
      color: var(--muted);
      font-size: 10px;
      font-weight: 800;
    }

    .shift-swap-chooser {
      display: grid;
      gap: 8px;
      min-width: 0;
    }

    .shift-swap-chooser p {
      margin: 0;
    }

    .shift-swap-choice-list {
      display: grid;
      gap: 6px;
    }

    .shift-swap-choice {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--panel);
    }

    .shift-swap-choice div {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .shift-swap-choice strong {
      font-size: 13px;
    }

    .shift-swap-choice span {
      color: var(--muted);
      font-size: 11px;
      font-weight: 750;
    }

    .shift-swap-choice button {
      flex: 0 0 auto;
      min-height: 28px;
      padding: 4px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 900;
    }

    .time-away {
      display: grid;
      gap: 8px;
      margin: var(--child-gap) 0 0;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
      background: var(--panel-soft);
    }

    .time-away h3 {
      margin: 0;
      font-size: 14px;
    }

    .time-away.add-subsection { gap: 0; }

    .time-away > [data-unavailability-disclosure-body] {
      display: grid;
      gap: 8px;
      padding: var(--section-padding);
    }

    .unavailability-schedule-embedded > [data-unavailability-month-content] {
      padding: var(--section-padding);
    }

    #myUnavailabilityBody > .time-away:first-child {
      margin-top: 0;
    }

    #myUnavailabilityBody > .time-away.add-subsection:first-child {
      gap: 0;
      width: 100%;
      box-sizing: border-box;
      margin: 0 0 var(--child-gap);
      padding: 0;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
    }

    #myUnavailabilityBody > .unavailability-schedule-embedded:first-child,
    #unavailabilityManagementBody > .unavailability-schedule-embedded:first-child {
      margin-top: 0;
    }

    #myUnavailabilityBody > .time-away.add-subsection,
    #unavailabilityManagementBody > .setup-add-form {
      width: 100%;
      box-sizing: border-box;
      margin: var(--child-gap) 0;
      border-radius: var(--radius);
    }

    #unavailabilityManagementBody {
      padding-top: 6px;
    }

    #unavailabilityManagementBody > .setup-add-form:first-child {
      margin-top: 0;
    }

    @media (max-width: 760px) {
      #myUnavailabilityBody > .time-away.add-subsection:first-child {
        width: 100%;
        margin: 0 0 var(--child-gap);
      }
    }

    .time-away-form {
      display: grid;
      grid-template-columns: minmax(110px, .55fr) minmax(0, 1fr) minmax(0, 1fr) auto;
      align-items: end;
      gap: 8px;
    }

    .availability-week-selector { order: 2; margin-inline: auto; }
    .availability-week-selector button.active { color: var(--section-accent, var(--accent)); background: color-mix(in srgb, var(--section-accent, var(--accent)) 24%, var(--panel)); border-color: color-mix(in srgb, var(--section-accent, var(--accent)) 68%, var(--line)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--section-accent, var(--accent)) 26%, transparent); font-weight: 800; }
    .availability-role-dropdown { position: relative; order: 1; }
    .availability-role-dropdown summary { display: inline-flex; align-items: center; min-height: 28px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 6px; cursor: pointer; background: color-mix(in srgb, var(--panel) 88%, var(--panel-soft)); font-size: .78rem; font-weight: 800; list-style: none; }
    .availability-role-dropdown summary:hover, .availability-role-dropdown[open] summary { border-color: color-mix(in srgb, var(--section-accent, var(--accent)) 55%, var(--line)); background: color-mix(in srgb, var(--section-tint, var(--panel-soft)) 54%, var(--panel)); }
    .availability-role-dropdown summary::-webkit-details-marker { display: none; }
    .availability-role-dropdown[open] .availability-role-options { position: absolute; z-index: 4; top: calc(100% + 5px); left: 0; width: max-content; min-width: 180px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); box-shadow: var(--shadow); }

    .unavailability-records {
      display: grid;
      gap: 8px;
    }

    .time-away-form label {
      display: grid;
      gap: 8px;
      font-size: 12px;
      font-weight: 800;
    }

    .time-away-date-time {
      display: grid;
      grid-template-columns: minmax(132px, 1fr) minmax(108px, .8fr);
      gap: 5px;
    }

    .military-time-input {
      min-width: 0;
      text-align: center;
      font-variant-numeric: tabular-nums;
    }

    .time-away-form button {
      white-space: nowrap;
    }

    .time-away-entry {
      display: flex;
      align-items: center;
      gap: 8px;
      border-top: 1px solid var(--line);
      padding-top: 6px;
      font-size: 13px;
    }

    .time-away-entry span {
      color: var(--muted);
      font-size: 12px;
    }

    .time-away-entry .icon {
      margin-left: auto;
    }

    .unavailability-form {
      display: grid;
      grid-template-columns: minmax(250px, 1fr) minmax(250px, 1fr) auto;
      align-items: end;
      gap: 8px;
    }

    .unavailability-form label {
      display: grid;
      gap: 8px;
      font-size: 12px;
      font-weight: 800;
    }

    .unavailability-form .unavailability-note {
      grid-column: span 2;
    }

    .unavailability-form textarea {
      min-height: 38px;
      resize: vertical;
    }

    .unavailability-form > .subsection-add-button {
      grid-column: 1 / -1;
      justify-self: center;
    }

    .unavailability-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 8px;
      align-content: start;
      align-items: stretch;
    }

    .unavailability-card {
      grid-template-rows: auto minmax(0, 1fr) auto;
      align-content: stretch;
      height: 100%;
    }

    .unavailability-card .unavailability-person-name {
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .unavailability-card .entry-note {
      min-height: 40px;
      margin: 0;
      color: var(--muted);
      font-size: 13px;
      overflow-wrap: anywhere;
    }

    .unavailability-card-status {
      display: flex;
      align-items: end;
      justify-content: center;
      min-height: 25px;
      padding-top: 2px;
    }


    .unavailability-card.is-editing {
      border-color: var(--accent);
      box-shadow: inset 3px 0 0 var(--accent);
    }

    body.dark input[type="date"]::-webkit-calendar-picker-indicator {
      filter: invert(1) brightness(1.5);
    }

    .drawer {
      display: grid;
      gap: var(--child-gap);
    }

    .hidden {
      display: none !important;
    }

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

      .shell.sidebar-collapsed {
        grid-template-columns: 1fr;
      }

      .shell.sidebar-collapsed main {
        grid-column: auto;
      }

      aside {
        min-height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .employee-list { max-height: none; }

      .toolbar {
        align-items: stretch;
      }

      .controls,
      .toolbar {
        display: grid;
      }

      .week-nav {
        min-width: 0;
      }

      .schedule-toolbar {
        grid-template-columns: 1fr auto;
      }

      /* Keep Weekly Schedule header actions inside the viewport at tablet
         widths, before the single-column mobile layout begins. */
      #scheduleSection,
      #scheduleSection .schedule-header > div:first-child {
        min-width: 0;
      }

      #scheduleSection .schedule-header-actions {
        flex: 0 0 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
      }

      .schedule-toolbar .schedule-actions { grid-column: 2; grid-row: 1; align-self: center; }

      .schedule-controls-subsection { grid-template-columns: minmax(0, 1fr) auto; }

      #myShiftsSection > .panel-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 36px;
        align-items: center;
      }

      #myShiftsSection > .panel-header > .controls {
        display: flex;
        flex: 0 0 36px;
        width: 36px;
        min-width: 36px;
        justify-content: end;
      }

      #myShiftsSection > .panel-header > .controls button {
        width: 36px;
      }
    }

    @media (max-width: 760px) {
      #siteHelp {
        width: 36px !important;
        min-width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0;
      }

      button.icon.caret-toggle {
        width: 36px !important;
        min-width: 36px;
        height: 36px;
        min-height: 36px;
        justify-self: end;
        font-size: 0;
      }

      .availability-chart {
        margin-top: 8px;
        padding: 8px;
      }

      .availability-chart-scroll {
        overflow: visible;
        padding-top: 8px;
      }

      .availability-chart-grid {
        grid-template-columns: 28px minmax(0, 1fr);
        min-width: 0;
        gap: 5px;
      }

      .availability-y-axis,
      .availability-bars {
        height: 145px;
      }

      .availability-y-axis {
        font-size: 9px;
      }

      .availability-bars,
      .availability-x-axis {
        gap: 3px;
        padding-inline: 2px;
      }

      .availability-value {
        font-size: 10px;
      }

      .availability-x-axis {
        font-size: 9px;
        line-height: 1.2;
      }

      main {
        padding: var(--section-padding);
        gap: var(--section-gap);
      }

      .toolbar,
      .panel-header {
        align-items: stretch;
      }

      .schedule-toolbar {
        grid-template-columns: 1fr;
      }

      .schedule-actions {
        justify-content: stretch;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .schedule-actions button { width: 100%; }

      body:not(.admin-mode) .schedule-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
      }

      body:not(.admin-mode) .schedule-toolbar .header-context {
        grid-column: 1;
        grid-row: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      body:not(.admin-mode) .schedule-toolbar .schedule-actions {
        grid-column: 2;
        grid-row: 1 / span 2;
        display: flex;
        width: auto;
        justify-self: end;
        align-items: center;
        gap: 6px;
      }

      body:not(.admin-mode) .schedule-toolbar .schedule-actions > button,
      body:not(.admin-mode) .schedule-toolbar .schedule-actions > .account-menu > button {
        width: 36px;
      }

      /* Keep identity details left and header controls right on mobile. */
      .schedule-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
      }

      .schedule-toolbar .header-context {
        grid-column: 1;
        grid-row: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: center;
        gap: 1px;
        line-height: 1.15;
      }

      .schedule-toolbar .header-context > [aria-hidden] { display: none; }

      .schedule-toolbar .header-context strong,
      .schedule-toolbar .header-context #headerWorkspace { display: block; }

      .schedule-toolbar .header-context #headerWorkspace {
        font-size: .76rem;
        font-weight: 700;
      }

      .schedule-toolbar .schedule-status {
        grid-column: auto;
        grid-row: auto;
        justify-self: auto;
        flex-wrap: nowrap;
        text-align: left;
      }

      .time-away-form {
        grid-template-columns: 1fr;
      }

      .unavailability-form {
        grid-template-columns: 1fr;
      }

      .unavailability-form .unavailability-note {
        grid-column: auto;
      }

      .schedule-controls-subsection {
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .schedule-date-nav,
      .schedule-view-controls,
      .schedule-view-controls > button,
      .schedule-view-controls > .segmented,
      .schedule-view-controls > .segmented button {
        width: 100%;
      }

      .schedule-view-controls {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .schedule-view-controls > .segmented {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .admin-actions {
        align-items: stretch;
        grid-template-columns: 1fr;
      }

      .admin-actions-copy,
      .admin-actions .auto-fill-actions,
      .admin-actions-secondary {
        justify-self: stretch;
      }

      .admin-actions-secondary {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
        justify-content: stretch;
      }

      .admin-actions .auto-fill-actions {
        width: 100%;
      }

      .schedule-toolbar .schedule-actions { grid-column: auto; }

      /* Use one compact mobile control layout in both Viewer and Admin modes. */
      .schedule-toolbar .schedule-actions {
        grid-column: 2;
        grid-row: 1 / span 2;
        display: flex;
        width: auto;
        justify-self: end;
        align-items: center;
        gap: 6px;
      }

      .schedule-toolbar .schedule-actions > button,
      .schedule-toolbar .schedule-actions > .account-menu > button {
        width: 36px;
      }

      .week-nav {
        grid-template-columns: 36px minmax(0, 1fr) 36px;
      }

      .panel-body {
        padding: 8px;
      }

      .calendar-wrap {
        border-radius: 6px;
      }

      .calendar {
        --calendar-row-width: 78px;
        --calendar-day-width: 96px;
      }

      .corner,
      .day-head {
        min-height: 52px;
        padding: 6px 4px;
      }

      .day-name { font-size: 12px; }
      .day-date { font-size: 11px; }

      .shift-head {
        min-height: 96px;
        padding: 7px 5px;
      }

      .shift-title { font-size: 12px; }
      .shift-time { font-size: 10px; }

      .cell {
        min-height: 96px;
        padding: 6px;
        gap: 3px;
      }

      .slot select {
        font-size: 12px;
        min-height: 34px;
      }

      .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .stat { min-width: 0; }
      .operational-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .operational-grid { grid-template-columns: 1fr; }

      body:not(.admin-mode) .calendar {
        --calendar-row-width: 94px;
        --calendar-day-width: 128px;
      }

      body:not(.admin-mode) .calendar-wrap {
        scroll-snap-type: x mandatory;
        scroll-padding-left: 94px;
      }

      body:not(.admin-mode) .day-head,
      body:not(.admin-mode) .cell {
        scroll-snap-align: start;
      }

      body:not(.admin-mode) .assignment-text {
        min-height: 42px;
        padding: 3px 1px;
        font-size: 12px;
        line-height: 1.3;
      }

      body:not(.admin-mode) .my-shifts-list,
      body:not(.admin-mode) .unavailability-list {
        grid-template-columns: 1fr;
      }

      body:not(.admin-mode) .calendar-wrap {
        overflow: visible;
      }

      .calendar.mobile-calendar-host {
        min-width: 0;
      }
    }

    @media (max-width: 620px) {
      .operational-analytics-grid { grid-template-columns: 1fr; }
      .operational-group > summary { grid-template-columns: minmax(0, 1fr) 16px; }
      .operational-group-count { display: none; }
      .operational-group-content { grid-template-columns: 1fr; padding: 8px; }
      .operational-panel-wide { grid-column: auto; }
      .operational-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .operational-pattern-columns { grid-template-columns: 1fr; }
      .workspace-tabs button {
        flex: 1 1 0;
        min-width: 0;
        padding: 9px 8px;
      }
    }

    @media (max-width: 480px) {
      main { padding: 8px; }

      h1 { font-size: 20px; }
      h2 { font-size: 16px; }

      .toolbar,
      .panel-header {
        padding: 10px;
      }

      .toolbar > .controls,
      .panel-header > .controls {
        grid-template-columns: 1fr;
      }

      .schedule-actions { grid-template-columns: 1fr; }

      body:not(.admin-mode) main {
        padding-right: max(8px, env(safe-area-inset-right));
        padding-left: max(8px, env(safe-area-inset-left));
      }

      .schedule-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
      }

      .schedule-toolbar .header-context {
        grid-column: 1;
        grid-row: 1;
      }

      .schedule-toolbar .schedule-actions {
        grid-column: 2;
        grid-row: 1;
      }

      .schedule-toolbar .schedule-status {
        grid-column: auto;
        grid-row: auto;
      }

      body:not(.admin-mode) .schedule-header {
        gap: 8px;
      }

      .week-nav {
        min-width: 0;
      }

      body:not(.admin-mode) .calendar {
        --calendar-row-width: 88px;
        --calendar-day-width: 124px;
      }

      .mobile-calendar {
        gap: 10px;
        padding: 8px;
      }

      .mobile-day-header,
      .mobile-shift-card {
        padding-inline: 10px;
      }

      .mobile-day-title,
      .mobile-shift-title {
        font-size: 12px;
      }

      .mobile-assignment {
        min-height: 32px;
        padding: 6px 8px;
        font-size: 12px;
      }

      body:not(.admin-mode) .shift-head {
        min-height: 104px;
      }

      .calendar {
        --calendar-row-width: 72px;
        --calendar-day-width: 92px;
      }

      .day-checks { gap: 3px; }
      .day-checks label { min-height: 26px; font-size: 10px; }
      .form-grid,
      .form-grid.wide,
      .mini-grid { grid-template-columns: 1fr; }
      .stats { grid-template-columns: 1fr; }
      .operational-summary { grid-template-columns: 1fr; }
      .backup-preview-grid { grid-template-columns: 1fr; }
    }

    /* Glass-lite surface system: retain the operational hierarchy while using
       translucent layers, fine borders, and quieter elevation site-wide. */
    body {
      background:
        radial-gradient(900px 540px at 100% -10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 68%),
        radial-gradient(720px 420px at 0% 100%, color-mix(in srgb, var(--accent-3) 6%, transparent), transparent 70%),
        var(--bg);
    }

    aside {
      background: color-mix(in srgb, var(--aside) 88%, transparent);
      backdrop-filter: blur(16px) saturate(1.04);
      -webkit-backdrop-filter: blur(16px) saturate(1.04);
    }

    .panel,
    .toolbar:not(.schedule-toolbar),
    .account-menu-panel,
    dialog {
      border-color: color-mix(in srgb, var(--line-strong) 66%, transparent);
      background: color-mix(in srgb, var(--panel) 88%, transparent);
      box-shadow: 0 6px 20px color-mix(in srgb, var(--ink) 7%, transparent);
      backdrop-filter: blur(12px) saturate(1.03);
      -webkit-backdrop-filter: blur(12px) saturate(1.03);
    }

    .panel-header,
    .add-subsection-header,
    .account-subsection-header {
      background: color-mix(in srgb, var(--panel-soft) 66%, transparent);
    }

    .shift-card,
    .employee-card,
    .time-away,
    .notification-card,
    .operational-metric,
    .child-section-card,
    .account-management-card {
      border-color: color-mix(in srgb, var(--line-strong) 56%, transparent);
      background: color-mix(in srgb, var(--panel) 84%, transparent);
      box-shadow: 0 3px 12px color-mix(in srgb, var(--ink) 5%, transparent);
    }

    .operational-panel,
    .child-section-card,
    .account-management-card {
      border-top-color: color-mix(in srgb, var(--line-strong) 56%, transparent);
      border-right-color: color-mix(in srgb, var(--line-strong) 56%, transparent);
      border-bottom-color: color-mix(in srgb, var(--line-strong) 56%, transparent);
    }

    .operational-panel { background: transparent; box-shadow: 0 3px 12px color-mix(in srgb, var(--ink) 5%, transparent); }
    .operational-panel.operational-panel--ok { border-left-color: var(--success); }
    .operational-panel.operational-panel--attention { border-left-color: var(--warning); }
    .operational-panel.operational-panel--critical { border-left-color: var(--danger); }

    input,
    select,
    textarea {
      border-color: color-mix(in srgb, var(--line-strong) 68%, transparent);
      background: color-mix(in srgb, var(--field) 84%, transparent);
      box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 36%, transparent);
    }

    input:focus,
    select:focus,
    textarea:focus {
      border-color: color-mix(in srgb, var(--accent) 68%, var(--line-strong));
      background: color-mix(in srgb, var(--field) 94%, transparent);
    }

    .admin-view-tabs {
      border-color: color-mix(in srgb, var(--line-strong) 58%, transparent);
      background: color-mix(in srgb, var(--panel-soft) 74%, transparent);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }

    /* Backups and archives use the same layered cards as the rest of
       Administration, including their previews and history entries. */
    #backupManagementBody .account-management-card,
    #archiveManagementBody .account-management-card,
    #backupManagementBody .audit-entry,
    #archiveManagementBody .audit-entry,
    .archive-day,
    .backup-preview-grid > div,
    .backup-menu-panel {
      border-color: color-mix(in srgb, var(--line-strong) 60%, transparent);
      background: color-mix(in srgb, var(--panel) 84%, transparent);
      box-shadow: 0 4px 15px color-mix(in srgb, var(--ink) 6%, transparent);
      backdrop-filter: blur(10px) saturate(1.03);
      -webkit-backdrop-filter: blur(10px) saturate(1.03);
    }

    #backupManagementBody .account-subsection-header,
    #archiveManagementBody .account-subsection-header,
    .archive-day h3 {
      padding-bottom: 8px;
      border-bottom: 1px solid color-mix(in srgb, var(--line-strong) 54%, transparent);
    }

    .archive-day li {
      border-top-color: color-mix(in srgb, var(--line-strong) 46%, transparent);
    }

    #accountManagementBody .account-management-card {
      background: color-mix(in srgb, var(--panel) 88%, transparent);
    }

    .account-management-card > .account-subsection-header {
      width: 100%;
      margin: 0;
      padding: 12px;
      border: 0;
      border-bottom: 1px solid color-mix(in srgb, var(--section-accent, var(--accent)) 34%, var(--line));
      border-radius: 0;
      background: color-mix(in srgb, var(--section-tint, var(--panel-soft)) 76%, transparent);
    }

    /* Keep transient save messages from squeezing the mobile shell header. */
    @media (max-width: 768px) {
      /* The shared-save message can become much longer than an icon action.
         Give it a dedicated row below the workspace identity on phones, so a
         temporary save or retry state cannot squeeze Scheduler or Management
         out of the application header. */
      .schedule-toolbar:has(.schedule-status:not(.healthy):not(.hidden)) {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 6px;
      }

      .schedule-toolbar:has(.schedule-status:not(.healthy):not(.hidden)) .header-context {
        grid-column: 1;
        grid-row: 1;
      }

      .schedule-toolbar:has(.schedule-status:not(.healthy):not(.hidden)) .schedule-actions {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
        justify-self: stretch;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: wrap;
      }

      .schedule-toolbar .schedule-status:not(.healthy):not(.hidden) {
        order: 1;
        flex: 1 0 100%;
        min-height: 28px;
        padding-top: 6px;
        border-top: 1px solid color-mix(in srgb, currentColor 24%, var(--line));
        justify-content: flex-start;
        flex-wrap: wrap;
        text-align: left;
      }

      .schedule-toolbar .schedule-status:not(.healthy):not(.hidden) button {
        flex: 0 0 auto;
      }
    }

    /* Compact mobile application shell: keep the identity on the left and
       the live, appearance, help, and account actions on one stable row.
       This is intentionally explicit so PWA safe-area sizing cannot revive
       earlier wrapping rules. */
    @media (max-width: 480px), (max-height: 520px) and (pointer: coarse) {
      body:not(.admin-mode) .schedule-toolbar,
      body.admin-mode .schedule-toolbar {
        grid-template-columns: minmax(0, 1fr) auto;
        min-height: calc(54px + env(safe-area-inset-top));
        padding: max(6px, env(safe-area-inset-top)) 10px 6px;
        gap: 6px;
        border-bottom: 1px solid color-mix(in srgb, var(--line-strong) 65%, transparent);
        background: color-mix(in srgb, var(--panel) 94%, transparent);
        box-shadow: 0 5px 18px color-mix(in srgb, var(--ink) 7%, transparent);
        backdrop-filter: blur(20px) saturate(1.08);
      }

      .schedule-toolbar .header-context {
        grid-column: 1;
        grid-row: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-content: center;
        gap: 1px;
        min-width: 0;
        line-height: 1.15;
      }

      .schedule-toolbar .header-context strong {
        font-size: 14px;
      }

      .schedule-toolbar .header-context #headerWorkspace {
        font-size: 12px;
        line-height: 1.15;
      }

      body:not(.admin-mode) .schedule-toolbar .schedule-actions,
      body.admin-mode .schedule-toolbar .schedule-actions {
        grid-column: 2;
        grid-row: 1;
        display: flex;
        flex-wrap: nowrap;
        width: auto;
        min-width: 0;
        justify-self: end;
        align-items: center;
        gap: 3px;
      }

      .schedule-toolbar .schedule-status,
      .schedule-toolbar .schedule-status.healthy,
      .schedule-toolbar .schedule-status:not(.healthy) {
        order: 0;
        flex: 0 0 34px;
        width: 34px;
        height: 34px;
        min-height: 34px;
        padding: 0;
        border: 0;
        border-radius: 8px;
        outline: 0;
        background: transparent;
        box-shadow: none;
        appearance: none;
        justify-content: center;
        overflow: hidden;
        cursor: pointer;
      }

      .schedule-toolbar .schedule-status:focus,
      .schedule-toolbar .schedule-status:focus-visible { outline: 0; box-shadow: none; }

      .schedule-toolbar .schedule-actions > .icon,
      .schedule-toolbar .schedule-actions > .account-menu > .icon {
        flex: 0 0 34px;
        width: 34px;
        min-height: 34px;
      }

      .schedule-toolbar .account-menu { display: none !important; }
      .schedule-toolbar .schedule-status #scheduleStatusMessage,
      .schedule-toolbar .schedule-status button { display: none !important; }
      .schedule-toolbar:has(.schedule-status:not(.healthy):not(.hidden)) { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto; gap: 6px; }
      .schedule-toolbar:has(.schedule-status:not(.healthy):not(.hidden)) .header-context { grid-column: 1; grid-row: 1; }
      .schedule-toolbar:has(.schedule-status:not(.healthy):not(.hidden)) .schedule-actions { grid-column: 2; grid-row: 1; width: auto; justify-self: end; flex-wrap: nowrap; }
    }

    /* Disclosure headers now use the single contextual-help button in the
       application shell. Keep their remaining show/hide control as one
       fixed-width endpoint, rather than retaining an empty help-button slot.
       This applies to Employee headers first, and to every normalized
       top-level or child disclosure header. */
    .ui-disclosure-header > .ui-header-actions:has(> .caret-toggle) {
      position: relative;
      grid-template-columns: 36px !important;
      grid-template-rows: 36px !important;
      width: 36px !important;
      min-width: 36px !important;
      height: 36px !important;
      min-height: 36px !important;
      flex: 0 0 36px !important;
      margin-left: auto !important;
      justify-self: end;
      align-self: center !important;
      justify-items: end;
    }

    .ui-disclosure-header > .ui-header-actions:has(> .caret-toggle) > .caret-toggle {
      position: absolute !important;
      inset: 0 0 auto auto;
      grid-column: 1 !important;
      grid-row: 1;
      justify-self: end;
      align-self: center;
    }

    .print-schedule-dialog {
      width: min(780px, calc(100vw - 32px));
    }
    .print-schedule-dialog .field-help-dialog-header > div {
      display: grid;
      gap: 2px;
    }
    .print-schedule-eyebrow {
      color: var(--accent);
      font-size: 11px;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .print-schedule-dialog-body {
      gap: 14px;
    }
    .print-schedule-period {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--panel-soft);
    }
    .print-schedule-period span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 750;
    }
    .print-schedule-option-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .print-schedule-option-group {
      min-width: 0;
      margin: 0;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 10px;
    }
    .print-schedule-option-group legend {
      padding: 0 5px;
      font-weight: 850;
    }
    .print-schedule-option-actions {
      display: flex;
      gap: 6px;
      margin-bottom: 9px;
    }
    .print-schedule-option-actions button {
      min-height: 30px;
      padding: 4px 9px;
      font-size: 12px;
    }
    .print-schedule-option-list {
      display: grid;
      align-content: start;
      gap: 6px;
      max-height: 280px;
      overflow: auto;
    }
    .print-schedule-option {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: start;
      gap: 8px;
      padding: 8px;
      border: 1px solid transparent;
      border-radius: 8px;
      background: color-mix(in srgb, var(--panel-soft) 78%, transparent);
      cursor: pointer;
    }
    .print-schedule-option:has(input:checked) {
      border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
      background: color-mix(in srgb, var(--accent) 9%, var(--panel));
    }
    .print-schedule-option input {
      margin-top: 3px;
    }
    .print-schedule-option > span {
      display: grid;
      gap: 2px;
      min-width: 0;
    }
    .print-schedule-option strong,
    .print-schedule-option small {
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .print-schedule-option small {
      color: var(--muted);
      line-height: 1.3;
    }
    .print-schedule-dialog-actions {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 16px;
      border-top: 1px solid var(--line);
      background: var(--panel-soft);
    }
    .print-schedule-dialog-actions > p {
      min-height: 1.3em;
      margin: 0;
      color: var(--danger);
      font-size: 12px;
      font-weight: 750;
    }
    .print-schedule-dialog-actions > div {
      display: flex;
      flex: 0 0 auto;
      gap: 8px;
    }
    .print-schedule-report {
      display: none;
    }

    @media (max-width: 620px) {
      .print-schedule-option-grid {
        grid-template-columns: 1fr;
      }
      .print-schedule-option-list {
        max-height: 190px;
      }
      .print-schedule-dialog-actions {
        align-items: stretch;
        flex-direction: column;
      }
      .print-schedule-dialog-actions > div,
      .print-schedule-dialog-actions button {
        flex: 1;
      }
    }

    @media print {
      @page {
        size: landscape;
        margin: 0.3in;
      }

      body {
        color: #111;
        background: #fff;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      body > :not(#printScheduleReport) {
        display: none !important;
      }

      .print-schedule-report {
        display: block !important;
        width: 100%;
      }

      .print-schedule-week {
        width: 100%;
        break-inside: avoid-page;
        page-break-inside: avoid;
      }
      .print-schedule-week + .print-schedule-week {
        margin-top: 0.16in;
      }
      .print-schedule-report-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(2.4in, 3.5in);
        align-items: end;
        gap: 0.18in;
        margin-bottom: 0.12in;
      }
      .print-schedule-report-header > div {
        display: grid;
        gap: 2px;
      }
      .print-schedule-report-header > div > span {
        color: #256f6d;
        font-size: 7pt;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .print-schedule-report-header h1 {
        margin: 0;
        font-size: 14pt;
        line-height: 1.1;
      }
      .print-schedule-report-header dl {
        display: grid;
        gap: 3px;
        margin: 0;
        font-size: 6.5pt;
      }
      .print-schedule-report-header dl > div {
        display: grid;
        grid-template-columns: 0.58in minmax(0, 1fr);
        gap: 5px;
      }
      .print-schedule-report-header dt {
        font-weight: 800;
      }
      .print-schedule-report-header dd {
        margin: 0;
      }
      .print-schedule-report table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
        font-size: 7pt;
      }
      .print-schedule-report caption {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
      }
      .print-schedule-report thead {
        display: table-header-group;
      }
      .print-schedule-report tr {
        break-inside: avoid;
        page-break-inside: avoid;
      }
      .print-schedule-report th,
      .print-schedule-report td {
        padding: 5px;
        vertical-align: top;
        border: 1px solid #8d99a1;
      }
      .print-schedule-report thead th {
        background: #e8f2f4;
        text-align: center;
      }
      .print-schedule-report thead th:first-child {
        width: 1.18in;
        text-align: left;
      }
      .print-schedule-report thead th span,
      .print-schedule-report thead th small {
        display: block;
      }
      .print-schedule-report thead th small {
        margin-top: 1px;
        color: #4f5f68;
        font-size: 6pt;
      }
      .print-schedule-shift {
        border-left: 4px solid var(--shift-color, #256f6d) !important;
        background: color-mix(in srgb, var(--shift-color, #256f6d) 11%, white);
        text-align: left;
      }
      .print-schedule-shift strong,
      .print-schedule-shift span,
      .print-schedule-shift small {
        display: block;
      }
      .print-schedule-shift span {
        margin-top: 2px;
        font-size: 6.5pt;
      }
      .print-schedule-shift small {
        margin-top: 2px;
        color: #53636c;
        font-size: 5.5pt;
        line-height: 1.2;
      }
      .print-schedule-assignment {
        display: grid;
        gap: 1px;
        padding: 2px 0;
        line-height: 1.18;
      }
      .print-schedule-assignment + .print-schedule-assignment {
        border-top: 1px dotted #bac2c7;
      }
      .print-schedule-assignment span {
        font-weight: 750;
      }
      .print-schedule-assignment small {
        color: #4f5f68;
        font-size: 5.5pt;
      }
      .print-schedule-empty {
        display: block;
        color: #78858c;
        text-align: center;
      }
    }


/* Mobile-only presentation. Shared tokens and components stay in workplace-scheduler.css. */
@media (max-width: 760px), (max-height: 520px) and (pointer: coarse) {
  main { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Mobile navigation owns top-level visibility and contextual actions own Add forms. */
  .workspace-view > .ui-section > .panel-header .caret-toggle,
  .workspace-view > .ui-section > .toolbar .caret-toggle,
  [data-mobile-context-form-source] { display: none !important; }

  #scheduleSection #adminActions,
  #scheduleSection .schedule-controls-subsection { display: none !important; }

  .mobile-schedule-period-nav { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px auto; align-items: center; gap: 4px; margin-bottom: 6px; }
  .mobile-schedule-period-nav > button { min-width: 36px; min-height: 36px; padding: 4px; border: 0; background: transparent; box-shadow: none; }
  .mobile-schedule-period-nav > .is-unavailable { visibility: hidden; }
  .mobile-schedule-period-label { overflow: hidden; color: var(--ink); font-size: 12px; font-weight: 850; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-schedule-more { color: var(--accent); font-size: 20px; }
  .mobile-schedule-action-list { display: grid; align-content: start; gap: 10px; }
  .mobile-schedule-action-list > button { min-height: 48px; width: 100%; }
  .mobile-jump-controls {
    display: flex;
    gap: 6px;
    margin: 0 0 8px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    overflow-x: auto;
  }
  .mobile-jump-controls button {
    flex: 1 0 auto;
    min-height: 40px;
    padding: 6px 12px;
    border-radius: 999px;
    background: transparent;
    color: var(--accent);
    font-size: 12px;
    font-weight: 850;
    box-shadow: none;
  }
  .mobile-skeleton-stack {
    display: grid;
    gap: 8px;
    padding: 8px 0;
  }
  .mobile-skeleton-stack span {
    display: block;
    height: 58px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--panel-soft) 72%, transparent), color-mix(in srgb, var(--accent) 9%, transparent), color-mix(in srgb, var(--panel-soft) 72%, transparent));
    background-size: 220% 100%;
    animation: mobile-skeleton-pulse 1.15s ease-in-out infinite;
  }
  @keyframes mobile-skeleton-pulse {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
  }
  .mobile-schedule-action-list > .mobile-schedule-override {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-items: stretch;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    color: var(--ink);
    text-align: left;
    box-shadow: none;
    overflow: hidden;
  }
  .mobile-schedule-override-copy { min-width: 0; overflow: hidden; font-size: 13px; font-weight: 850; line-height: 1.25; text-overflow: ellipsis; white-space: normal; }
  .mobile-schedule-override-state { display: inline-grid; place-items: center; min-width: 42px; min-height: 24px; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 18%, transparent); color: var(--muted); font-size: 11px; font-weight: 900; text-transform: uppercase; }
  .mobile-schedule-override[aria-pressed="true"] .mobile-schedule-override-state { background: color-mix(in srgb, var(--success) 22%, transparent); color: var(--success); }
  .management-period-context { position: fixed; z-index: 31; right: 0; bottom: calc(67px + env(safe-area-inset-bottom)); left: 0; top: auto; justify-content: center; min-height: 44px; margin: 0; padding: 5px max(8px, env(safe-area-inset-right)) 5px max(8px, env(safe-area-inset-left)); border-width: 1px 0 0; border-radius: 0; box-shadow: none; }
  .management-period-context > span { display: none; }
  .management-period-context button { width: min(100%, 430px); min-height: 34px; justify-content: center; }
  body.mobile-management-period-active main { padding-bottom: calc(116px + env(safe-area-inset-bottom)); }
  .management-period-dialog[open] { align-self: end; width: 100vw; height: min(78dvh, 680px); max-height: none; margin: auto auto 0; padding: 16px max(14px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); border-radius: 22px 22px 0 0; overflow-y: auto; }
  .management-period-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mobile-operational-dashboard { display: grid; gap: 10px; }
  .mobile-dashboard-attention { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin: 0; }
  .mobile-dashboard-attention::before { grid-column: 1 / -1; color: var(--ink); font-size: .86rem; font-weight: 850; content: "Today's attention"; }
  .mobile-dashboard-attention .operational-metric { min-height: 66px; padding: 9px; cursor: pointer; }
  .mobile-dashboard-attention .operational-metric strong { font-size: 1.08rem; }
  .mobile-dashboard-attention .operational-metric span { font-size: 10px; line-height: 1.2; }
  .mobile-operational-dashboard .operational-groups { gap: 8px; margin: 0; }
  .mobile-operational-dashboard .operational-group { border-left-color: var(--success); border-radius: 10px; }
  .mobile-operational-dashboard .operational-group.mobile-group-has-warning { border-left-color: var(--warning); }
  .mobile-operational-dashboard .operational-group.mobile-group-critical { border-left-color: var(--danger); }
  .mobile-operational-dashboard .operational-group > summary { grid-template-columns: minmax(0, 1fr) auto 16px; min-height: 54px; padding: 9px 10px; }
  .mobile-operational-dashboard .operational-group-count { display: inline-flex; }
  .mobile-operational-dashboard .operational-group-content { display: grid; gap: 7px; padding: 7px; }
  .mobile-operational-dashboard .operational-panel { box-shadow: none; }
  .mobile-operational-dashboard .operational-panel-header { position: relative; gap: 2px; padding: 9px 34px 9px 10px; cursor: pointer; }
  .mobile-operational-dashboard .operational-panel-header::after { position: absolute; top: 50%; right: 11px; translate: 0 -50%; color: var(--muted); font-size: 18px; content: "+"; }
  .mobile-operational-dashboard .mobile-analytic-expanded > .operational-panel-header::after { content: "−"; }
  .mobile-operational-dashboard .operational-panel-header .operational-role-note { display: none; }
  .mobile-analytic-summary { color: var(--muted); font-size: 10px; font-weight: 750; }
  .mobile-operational-dashboard .mobile-analytic-collapsed > .operational-panel-body { display: none; }
  .mobile-operational-dashboard .mobile-dashboard-list-extra { display: none !important; }
  .mobile-dashboard-show-all { width: 100%; min-height: 38px; margin-top: 4px; }
  .mobile-operational-dashboard .mobile-group-deferred > .operational-group-content { display: none; }
  #availabilityChart .personnel-mobile-day-strip {
    display: flex;
    gap: 3px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
  }

  .personnel-mobile-day-strip button {
    display: grid;
    justify-items: center;
    gap: 1px;
    flex: 0 0 48px;
    min-width: 48px;
    min-height: 45px;
    padding: 4px 1px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
    scroll-snap-align: center;
  }

  .personnel-mobile-day-strip button span { font-size: 10px; font-weight: 800; }
  .personnel-mobile-day-strip button strong { font-size: 14px; }
  .personnel-mobile-day-strip button[data-today="true"] { outline: 1px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: -2px; }
  .personnel-mobile-day-strip button[aria-pressed="true"] { background: var(--accent); color: white; }
  .availability-week-calendar.personnel-day-focused {
    width: 100%;
    min-width: 0;
  }

  .personnel-day-focused .availability-week-header-row,
  .personnel-day-focused .availability-week-days,
  .personnel-day-focused .availability-range-layer {
    grid-template-columns: repeat(var(--personnel-focus-days, 2), minmax(0, 1fr));
  }
  .availability-range-bar[data-personnel-status-detail] .availability-range-fill { cursor: pointer; }
  .personnel-status-popover[open] {
    display: grid;
    gap: 0;
    width: min(calc(100vw - 28px), 420px);
    max-height: min(72dvh, 560px);
    margin: auto;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--line-strong) 72%, transparent);
    border-radius: 18px;
    color: var(--ink);
    background: color-mix(in srgb, var(--panel) 96%, transparent);
    box-shadow: 0 22px 64px color-mix(in srgb, #000 34%, transparent);
    overflow: hidden;
    backdrop-filter: blur(18px) saturate(1.08);
  }
  .personnel-status-popover::backdrop { background: var(--overlay-scrim); }
  .personnel-status-popover-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--section-accent, var(--accent)) 14%, transparent);
  }
  .personnel-status-popover-header span {
    display: block;
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .03em;
    text-transform: uppercase;
  }
  .personnel-status-popover-header h2 {
    margin: 1px 0 0;
    overflow: hidden;
    font-size: 17px;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .personnel-status-popover-header button.icon {
    min-width: 36px;
    min-height: 36px;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  .personnel-status-popover-body {
    display: grid;
    gap: 10px;
    padding: 12px 14px 14px;
    overflow-y: auto;
  }
  .personnel-status-pill {
    justify-self: start;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--accent);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .personnel-status-pill.scheduled { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); }
  .personnel-status-pill.unavailable { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); }
  .personnel-status-popover-body dl {
    display: grid;
    gap: 8px;
    margin: 0;
  }
  .personnel-status-popover-body dl > div {
    display: grid;
    gap: 2px;
    padding-bottom: 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  }
  .personnel-status-popover-body dl > div:last-child { padding-bottom: 0; border-bottom: 0; }
  .personnel-status-popover-body dt {
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: .03em;
    text-transform: uppercase;
  }
  .personnel-status-popover-body dd {
    min-width: 0;
    margin: 0;
    color: var(--ink);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  .mobile-filter-options { display: grid; gap: 10px; }
  .mobile-filter-options:empty { display: none; }
  .mobile-filter-options fieldset { min-width: 0; margin: 0; padding: 8px; border: 1px solid var(--line); border-radius: 10px; }
  .mobile-filter-options legend { padding: 0 5px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
  .mobile-filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
  .mobile-filter-chips label { margin: 0; }
  .mobile-filter-chips input { position: absolute; opacity: 0; pointer-events: none; }
  .mobile-filter-chips span { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); font-size: 12px; font-weight: 750; }
  .mobile-filter-chips input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
  .mobile-filter-sheet[open] {
    align-self: end;
    grid-template-rows: 18px auto minmax(0, 1fr);
    width: min(100vw, 680px);
    height: min(85dvh, 760px);
    margin: auto auto 0;
    border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -18px 48px color-mix(in srgb, #000 28%, transparent);
    animation: mobile-filter-sheet-in 180ms ease-out;
  }
  .mobile-filter-sheet .mobile-sheet-handle { width: 42px; height: 4px; margin: 8px auto 6px; border-radius: 999px; background: var(--line-strong); }
  .mobile-filter-sheet .mobile-detail-header { min-height: 52px; padding-top: 4px; }
  .mobile-filter-sheet .mobile-detail-header h2 { font-size: 16px; }
  .mobile-filter-sheet .mobile-back-button { border: 0; background: transparent; box-shadow: none; font-size: 18px; }
  .mobile-filter-sheet .mobile-filter-body { display: grid; grid-template-rows: auto auto auto; align-content: start; gap: 12px; padding-bottom: 0; }
  .mobile-filter-actions { position: sticky; z-index: 2; bottom: -1px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 7px; margin: 0 -12px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 96%, transparent); box-shadow: 0 -8px 20px color-mix(in srgb, var(--ink) 8%, transparent); backdrop-filter: blur(16px); }
  .mobile-confirm-dialog[open] {
    align-self: end;
    display: grid;
    grid-template-rows: 18px auto;
    width: min(100vw, 560px);
    margin: auto auto 0;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    color: var(--ink);
    background: color-mix(in srgb, var(--panel) 97%, transparent);
    box-shadow: 0 -18px 48px color-mix(in srgb, #000 30%, transparent);
    backdrop-filter: blur(18px) saturate(1.08);
    animation: mobile-filter-sheet-in 180ms ease-out;
  }
  .mobile-confirm-dialog::backdrop { background: var(--overlay-scrim); }
  .mobile-confirm-dialog .mobile-sheet-handle { width: 42px; height: 4px; margin: 8px auto 6px; border-radius: 999px; background: var(--line-strong); }
  .mobile-confirm-body { display: grid; gap: 8px; padding: 8px max(14px, env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); }
  .mobile-confirm-body h2 { margin: 0; font-size: 18px; text-align: center; }
  .mobile-confirm-body p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; text-align: center; }
  .mobile-confirm-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px; padding-top: 8px; }
  .mobile-confirm-actions button { min-height: 48px; }
  .mobile-applied-filter-summary { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
  .mobile-applied-filter-summary button { min-height: 30px; padding: 4px 8px; border-radius: 999px; font-size: 11px; }
  .mobile-filter-empty { display: grid; justify-items: center; gap: 6px; margin-bottom: 10px; padding: 18px 12px; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--muted); text-align: center; }
  .mobile-filter-empty strong { color: var(--ink); }

  .mobile-timeoff-edit-form,
  .mobile-timeoff-edit-form .card-details,
  .mobile-timeoff-edit-form .form-grid,
  .mobile-timeoff-edit-form label {
    min-width: 0;
    max-width: 100%;
  }

  .mobile-timeoff-edit-form .card-details {
    gap: 12px;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .mobile-timeoff-edit-form .form-grid.wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .mobile-timeoff-edit-form input,
  .mobile-timeoff-edit-form textarea,
  .mobile-timeoff-edit-form .military-time-input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .mobile-unavailability-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    margin-bottom: 8px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
  }

  .mobile-unavailability-tabs button {
    display: grid;
    justify-items: center;
    gap: 1px;
    min-width: 0;
    min-height: 42px;
    padding: 5px 3px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
  }

  .workspace-view:not(.mobile-screen-inactive) button:not(.caret-toggle),
  .mobile-detail-dialog button,
  .mobile-task-menu button,
  .mobile-confirm-dialog button {
    min-height: 44px;
  }
  .workspace-view:not(.mobile-screen-inactive) button.icon:not(.caret-toggle),
  .mobile-detail-dialog button.icon,
  .mobile-task-menu button.icon {
    min-width: 40px;
  }

  .mobile-unavailability-tabs button[aria-selected="true"] {
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    color: var(--accent);
  }

  .mobile-unavailability-tabs span { font-size: 10px; font-weight: 850; letter-spacing: .02em; text-transform: uppercase; }
  .mobile-unavailability-tabs strong { color: inherit; font-size: 16px; line-height: 1; }
  .mobile-unavailability-records { display: grid; gap: 8px; margin: 0; }
  .mobile-unavailability-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
  .mobile-unavailability-filter-button { min-height: 34px; padding: 5px 10px; border-radius: 999px; font-size: 11px; }
  .mobile-unavailability-list { display: grid; grid-template-columns: 1fr; gap: 7px; }
  .mobile-unavailability-card {
    display: grid;
    gap: 6px;
    min-height: 0;
    padding: 9px 10px;
    border-left: 3px solid var(--accent);
    border-radius: 12px;
    box-shadow: none;
    cursor: pointer;
  }

  .mobile-unavailability-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
  }

  .mobile-unavailability-person {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    min-width: 0;
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
  }

  .mobile-unavailability-person > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-unavailability-date {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .mobile-unavailability-card .entry-note {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.25;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .mobile-unavailability-card.is-expanded .entry-note {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
  }

  .mobile-unavailability-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
  }

  .mobile-unavailability-card.is-editing .mobile-unavailability-actions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .mobile-unavailability-actions button {
    min-width: 0;
    min-height: 38px;
  }

  .mobile-unavailability-inline-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    margin-top: 2px;
  }

  .mobile-unavailability-inline-form label { min-width: 0; }

  .mobile-unavailability-note-field { grid-column: 1 / -1; }

  .mobile-unavailability-inline-form input,
  .mobile-unavailability-inline-form textarea,
  .mobile-unavailability-inline-form .military-time-input {
    max-width: 100%;
  }

  .mobile-unavailability-card .timing-status { min-height: 18px; padding: 2px 7px; font-size: 9px; line-height: 1.1; }
  .mobile-unavailability-empty { margin: 0; }
  .unavailability-schedule-embedded { margin-top: 8px; }

  #siteAdministrationBody { gap: 8px; }
  #siteAdministrationBody .admin-view-tabs {
    display: flex;
    gap: 5px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  #siteAdministrationBody .admin-view-tabs button {
    flex: 0 0 auto;
    min-height: 38px;
    min-width: 82px;
    padding: 6px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .02em;
    text-transform: uppercase;
  }

  #siteAdministrationBody .admin-view-tabs button[aria-selected="true"] {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
  }

  #siteAdministrationBody .ui-section--administration {
    min-height: 1px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #siteAdministrationBody .panel-body {
    padding: 0;
  }

  #siteAdministrationBody .account-management-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #siteAdministrationBody .account-management-card,
  #siteAdministrationBody .audit-entry {
    gap: 7px;
    padding: 10px;
    border-radius: 12px;
    border-left: 3px solid var(--accent);
    box-shadow: none;
  }

  #siteAdministrationBody .account-subsection-header {
    min-height: 0;
    padding: 0 0 7px;
    border-bottom: 1px solid var(--line);
    background: transparent;
  }

  #siteAdministrationBody .account-subsection-header h3,
  #siteAdministrationBody .audit-entry-top strong {
    font-size: 13px;
    line-height: 1.2;
  }

  #siteAdministrationBody .account-subsection-body {
    display: grid;
    gap: 8px;
    padding: 0;
  }

  #siteAdministrationBody .audit-entry-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 3px;
  }

  #siteAdministrationBody .audit-entry time {
    font-size: 10px;
    white-space: normal;
  }

  #siteAdministrationBody .audit-entry > p,
  #siteAdministrationBody .audit-entry-meta,
  #siteAdministrationBody .audit-change-list,
  #siteAdministrationBody .audit-change-list li {
    font-size: 12px;
    line-height: 1.3;
  }

  #siteAdministrationBody .audit-entry-meta {
    gap: 5px;
  }

  #siteAdministrationBody .backup-entry-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-left: 0;
  }

  #siteAdministrationBody .backup-entry-actions button,
  #siteAdministrationBody .dialog-actions button,
  #siteAdministrationBody .subsection-add-button {
    width: 100%;
    min-height: 38px;
  }

  #setupBody { gap: 8px; }
  #setupBody .admin-view-tabs {
    display: flex;
    gap: 5px;
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }

  #setupBody .admin-view-tabs button {
    flex: 0 0 auto;
    min-height: 38px;
    min-width: 88px;
    padding: 6px 10px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .02em;
    text-transform: uppercase;
  }

  #setupBody .admin-view-tabs button[aria-selected="true"] {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
  }

  #setupBody .ui-section--administration {
    min-height: 1px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  #setupBody .panel-body,
  #setupBody .setup-people,
  #setupBody .shift-manager {
    display: grid;
    gap: 8px;
    padding: 0;
  }

  #setupBody .employee,
  #setupBody .shift-card {
    gap: 7px;
    padding: 10px;
    border-radius: 12px;
    border-left: 3px solid var(--accent);
    box-shadow: none;
  }

  #setupBody .employee-top {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
  }

  #setupBody .employee-name,
  #setupBody .shift-card-title {
    overflow: hidden;
    font-size: 13px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #setupBody .card-summary,
  #setupBody .tag-row,
  #setupBody .employee-meta {
    font-size: 12px;
    line-height: 1.3;
  }

  #setupBody .employee-actions button {
    min-width: 34px;
    min-height: 34px;
  }

  #shiftSwapRequestsBody .shift-swap-request,
  #openShiftPostingsBody .shift-swap-request {
    display: grid;
    gap: 7px;
    padding: 10px;
    border-left: 3px solid var(--accent);
    border-radius: 12px;
    box-shadow: none;
  }

  #shiftSwapRequestsBody .shift-swap-request .employee-top,
  #openShiftPostingsBody .shift-swap-request .employee-top {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 8px;
  }

  #shiftSwapRequestsBody .opportunity-title,
  #openShiftPostingsBody .opportunity-title {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
  }

  #shiftSwapRequestsBody .opportunity-title > span,
  #openShiftPostingsBody .opportunity-title > span {
    overflow: hidden;
    font-size: 13px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #shiftSwapRequestsBody .tag-row,
  #openShiftPostingsBody .tag-row {
    gap: 4px;
  }

  #shiftSwapRequestsBody .tag,
  #openShiftPostingsBody .tag {
    min-height: 18px;
    padding: 2px 7px;
    font-size: 9px;
    line-height: 1.1;
  }

  #shiftSwapRequestsBody .employee-actions button,
  #openShiftPostingsBody .employee-actions button {
    min-height: 34px;
  }

  #shiftSwapRequestsBody .shift-swap-add-section > .add-subsection-header {
    display: none;
  }

  #notificationsBody .notification-list {
    display: grid;
    gap: 8px;
  }

  #notificationsBody .notification-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
    border-left: 3px solid var(--accent);
    border-radius: 12px;
    box-shadow: none;
  }

  #notificationsBody .notification-card strong {
    display: block;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #notificationsBody .notification-card p {
    margin: 3px 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.3;
  }

  #notificationsBody .notification-card time {
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
    text-transform: uppercase;
  }

  #notificationsBody .notification-card button {
    width: 100%;
    min-height: 36px;
  }

  #coverageSection #stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  #coverageSection .stat {
    min-width: 0;
    min-height: 62px;
    padding: 8px;
    border-left: 3px solid var(--accent);
    border-radius: 12px;
    box-shadow: none;
  }

  #coverageSection .stat strong {
    font-size: 15px;
    line-height: 1.1;
  }

  #coverageSection .stat span {
    font-size: 10px;
    line-height: 1.2;
  }

  #coverageSection .warning-group {
    border-left: 3px solid var(--warning);
    border-radius: 12px;
    box-shadow: none;
  }

  #coverageSection .warning-group summary {
    min-height: 42px;
    padding: 8px 10px;
  }

  #coverageSection .warning-group summary span:first-child {
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #coverageSection .stat.all-clear {
    border-left-color: var(--success);
  }

  #coverageSection .stat.needs-attention {
    border-left-color: var(--warning);
  }

  #coverageSection .notice-list {
    display: grid;
    gap: 6px;
  }

  #coverageSection .notice-list .notice {
    margin: 0;
    padding: 8px;
    font-size: 12px;
    line-height: 1.3;
  }

  #systemHealthBody .system-health-grid,
  #systemHealthBody .system-health-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  #systemHealthBody .system-health-card {
    min-height: 64px;
    padding: 9px;
    border-radius: 12px;
    box-shadow: none;
  }

  #systemHealthBody .system-health-card strong {
    font-size: 13px;
    line-height: 1.15;
  }

  #systemHealthBody .system-health-card span,
  #systemHealthBody .system-health-card p,
  #systemHealthBody .system-health-card small {
    font-size: 11px;
    line-height: 1.25;
  }

  @media (max-width: 389px) {
    #systemHealthBody .system-health-grid,
    #systemHealthBody .system-health-card-grid { grid-template-columns: 1fr; }
  }

  @keyframes mobile-filter-sheet-in { from { transform: translateY(24px); opacity: .7; } to { transform: translateY(0); opacity: 1; } }

  @media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
    .mobile-task-menu { padding-top: 0; }
    .mobile-task-menu-sheet { height: auto; max-height: 100dvh; padding-top: max(6px, env(safe-area-inset-top)); border: 0; border-radius: 0; overscroll-behavior: contain; }
    .mobile-task-menu-sheet::before { display: none; }
    .mobile-task-menu-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 0 0 auto; }
    .mobile-task-menu-sections button { min-height: 40px; }
    .mobile-task-menu-workspace-select { flex: 0 0 auto; padding-bottom: 7px; }
    .mobile-filter-sheet[open] { width: min(92vw, 680px); height: 94dvh; border-radius: 18px 18px 0 0; }
    .mobile-filter-sheet .mobile-filter-body { grid-template-columns: minmax(180px, .8fr) minmax(0, 1.4fr); grid-template-rows: auto auto; }
    .mobile-filter-sheet .mobile-filter-options { grid-column: 2; grid-row: 1 / span 2; }
    .mobile-filter-sheet .mobile-filter-actions { grid-column: 1 / -1; }
  }

  @media (max-width: 389px) {
    .mobile-home-priority-grid { grid-template-columns: 1fr; }
  }

  @media (min-width: 390px) and (max-width: 760px) and (orientation: portrait) {
    #operationalDashboardSection .operational-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  @media (prefers-reduced-motion: reduce) { .mobile-filter-sheet[open] { animation: none; } }
}


/* Feedback and history components */
.notification-region {
  position: fixed;
  inset: 1rem 1rem auto auto;
  z-index: 10000;
  display: grid;
  gap: .5rem;
  width: min(26rem, calc(100vw - 2rem));
}

.notification-toast {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem 1rem;
  color: #fff;
  background: #1e3a5f;
  border-left: .35rem solid #60a5fa;
  box-shadow: 0 .5rem 1.5rem rgb(15 23 42 / 28%);
}

.notification-error { background: #7f1d1d; border-left-color: #fecaca; }
.notification-warning { background: #78350f; border-left-color: #fde68a; }
.notification-success { background: #14532d; border-left-color: #bbf7d0; }
.notification-close { min-width: 2rem; padding: 0; color: inherit; background: transparent; border: 0; font-size: 1.3rem; }

.audit-undo-list {
  display: grid;
  gap: .45rem;
  max-height: 22rem;
  margin: 1rem 0;
  overflow: auto;
}

.audit-undo-list label {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .65rem;
  border: 1px solid var(--border);
}