:root {
      /* Style A: Glacier (cool slate + teal). Surfaces, text, accents and shapes are tokens; the rest of the file only refers to these. */
      --bg: #0b1215;              /* page and empty sheet */
      --surface: #131c20;         /* sticky header / footer cells (opaque) */
      --surface-2: #172328;
      --surface-3: #223239;
      --surface-4: #2b3d45;
      --card-bg: #141e22;         /* opaque panels */
      --header-bg: #131c20;
      --input-bg: rgba(255, 255, 255, .07);
      --hover-bg: #1f2d33;
      --row-a: #162227;           /* frozen name column, odd / even rows */
      --row-b: #121c20;
      --row-even: #0e171a;
      --row-hover: #1f2d33;
      --break-bg: #0e171a;
      --glass: rgba(20, 31, 36, .985);   /* floating surfaces: menus, popovers (nearly opaque so colours behind never fight the text) */
      --glass-fill: rgba(255, 255, 255, .07);
      --card-border: rgba(255, 255, 255, .11);   /* hairline */
      --edge: rgba(255, 255, 255, .17);
      --widget-bg: linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .045));

      --text: #eef6f8;
      --text-2: rgba(238, 246, 248, .82);
      --text-muted: rgba(225, 238, 242, .62);
      --accent: #22b3be;
      --accent-fill: #0e7c86;     /* filled buttons (white text passes contrast) */
      --accent-press: #0a6670;
      --accent-text: #5fd4dc;     /* teal text on dark */
      --green: #30d158;
      --green-fill: #248a3d;
      --orange: #ff9f0a;
      --orange-text: #ffb340;
      --red: #ff453a;
      --red-fill: #d92d20;

      --btn-default: rgba(255, 255, 255, .10);
      --btn-default-hover: rgba(255, 255, 255, .17);
      --grid-quarter: rgba(143, 170, 178, 0.4);
      --grid-half: rgba(62,86,94, 0.85);
      --grid-hour: #5b7179;
      --slot-empty: var(--bg);
      --slot-empty-hover: #121b1f;
      --shadow-color: rgba(0,0,0,0.5);

      --r-sm: 10px;               /* inputs, buttons */
      --r-md: 14px;               /* popovers, cards */
      --r-lg: 20px;               /* dialogs, menus, sheets */
      --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;

      /* Dynamic Grid Sizing - Zoom dynamically alters --col-q-w */
      --col-q-w: 23px;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--font); }
    body { background-color: var(--bg); color: var(--text); padding: 12px; -webkit-font-smoothing: antialiased; transition: background-color var(--m-state) var(--e-std), color var(--m-state) var(--e-std); }

    /* Header */
    header {

        border-radius: 10px;
    }

    .meta-group { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
    .meta-item { display: flex; flex-direction: column; gap: 2px; }
    .meta-item[hidden] { display: none !important; }
    .meta-item label { font-size: 0.65rem; text-transform: uppercase; color: var(--text-muted); font-weight: 700; letter-spacing: 0.4px; }
    .meta-item input { background: var(--input-bg); border: 1px solid var(--card-border); border-radius: 5px; color: var(--text); padding: 4px 8px; font-size: 0.8rem; height: 28px; width: 100%; transition: background-color var(--m-state) var(--e-std), color var(--m-state) var(--e-std); }

    .btn-group { display: flex; gap: 6px; flex-wrap: wrap; }
    button {
      background: var(--btn-default); color: var(--text); border: 1px solid var(--card-border); padding: 4px 10px;
      border-radius: 6px; font-weight: 600; font-size: 0.75rem; height: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; transition: background-color var(--m-state) var(--e-std), border-color var(--m-state) var(--e-std), color var(--m-state) var(--e-std), box-shadow var(--m-state) var(--e-std), opacity var(--m-state) var(--e-std), transform var(--m-micro) var(--e-std);   /* not 'all': a button that changes size (the header re-fitting) must not animate its width while the bar measures it */
    }
    button:hover { background: var(--btn-default-hover); }
    button.primary { background: var(--accent-fill); border-color: var(--accent); color: #fff; }
    button.primary:hover { background: var(--accent-press); }
    button.scan-btn { background: var(--green-fill); border-color: var(--green); color: #fff; }
    button.danger { background: var(--red-fill); border-color: var(--red); color: #fff; }
    button.pdf-btn { background: var(--accent-fill); border-color: var(--accent); color: #fff; }
    button.alert-active { background: var(--orange); border-color: var(--orange); color: #fff; }

    /* FULLSCREEN VIEW MODE OVERRIDES */
    

    

    

    
    

    /* Manager View Toggle */
    body.locked-mode .manager-only { display: none !important; }

    /* Zone Toolbar */
    .zone-legend {

       transition: background-color var(--m-state) var(--e-std), border-color var(--m-state) var(--e-std);
    }
    .zone-badge {

      cursor: pointer;  user-select: none;
    }

    .tool-toggle-btn {
      padding: 4px 10px; border-radius: 16px; font-size: 0.75rem; font-weight: 800;
      background: var(--input-bg); border: 1px solid var(--card-border); color: var(--text-muted); cursor: pointer; white-space: nowrap;
    }
    .tool-toggle-btn.active-dual { background: #7c3aed; border-color: #a78bfa; color: #ffffff; box-shadow: 0 0 10px rgba(124, 58, 237, 0.5); }
    .tool-toggle-btn.active-range { background: var(--accent-fill); border-color: var(--accent); color: #ffffff; box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent); }

    /* Sync status pill (offline / saving / not saved) */
    #sync-status { position: fixed; left: 10px; bottom: 10px; z-index: 99999; padding: 6px 12px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; background: var(--bg); color: #e2e8f0; border: 1px solid var(--edge); box-shadow: 0 2px 8px rgba(0,0,0,.4); display: none; pointer-events: none; }
    #sync-status.show { display: block; }
    #sync-status.warn { background: #78350f; border-color: var(--orange); color: #fef3c7; }
    #sync-status.error { background: #7f1d1d; border-color: var(--red); color: #fee2e2; }

    /* Pinned Table Container */
    .table-container {
      background: var(--card-bg);  border: 1px solid var(--card-border);
        margin-bottom: 12px; position: relative;
      overscroll-behavior: contain;
    }
    body.locked-mode .table-container { max-height: 85vh; }
    .table-container.is-panning { cursor: grab; user-select: none; }

    /* Strict Widths to Stop Overlapping / Squishing */
    table {
      table-layout: fixed; width: max-content; min-width: max-content; border-collapse: separate; border-spacing: 0; text-align: center; font-size: 0.82rem;
    }
    table.is-focused { width: auto; min-width: unset; }

    th, td { padding: 0; overflow: hidden; white-space: nowrap; }

    /* Left Sidebar Explicit Constraints */
    .col-name { width: 100px !important; min-width: 100px; max-width: 100px; border-right: none; }
    .col-shift { width: 85px !important; min-width: 85px; max-width: 85px; border-right: none; }

    /* Right Sidebar Explicit Constraints */

    .col-del { width: 32px !important; min-width: 32px; max-width: 32px; }

    /* Grid Scalable Columns */
    .col-quarter { width: var(--col-q-w) !important; min-width: var(--col-q-w); max-width: var(--col-q-w); }

    /* Top Sticky Headers */
    thead tr:first-child th {
      position: sticky; top: 0; z-index: 30; background: var(--header-bg) !important; color: var(--text-muted);
      font-weight: 700; font-size: 0.74rem; text-transform: uppercase; height: 28px;
    }
    thead tr:nth-child(2) th {
      position: sticky; top: 28px; z-index: 30; background: var(--header-bg) !important; color: var(--text-muted);
      font-size: 0.65rem; height: 22px; border-bottom: 1px solid var(--grid-half);
    }

    /* Left Pinned Sidebar Coordinate Offsets */
    .col-sticky-left { position: sticky; z-index: 25; background: var(--card-bg) !important; }
    th.col-sticky-left { position: sticky; z-index: 45; background: var(--header-bg) !important; }

    .col-sticky-left.col-name { left: 0px; }
    .col-sticky-left.col-shift { left: 100px; }

    td.staff-name { text-align: left; font-weight: 700; padding-left: 8px !important; cursor: pointer; color: var(--accent); text-overflow: ellipsis; }
    .col-shift input { width: 100%; font-size: 0.72rem !important; padding: 2px 0; margin: 0; text-align: center; background: transparent; border: none; color: inherit; outline: none; }

    /* Right Pinned Break Columns Coordinate Offsets */

    /* Dynamically snaps right edge cleanly */

    tbody tr:hover td { background-color: color-mix(in srgb, var(--accent) 8%, transparent); }
    tbody tr:hover td.staff-name { background-color: var(--hover-bg) !important; color: var(--accent) !important; }
    tbody tr:hover td.col-sticky-left { background-color: var(--hover-bg) !important; }

    tbody tr:hover .zone-ribbon { filter: brightness(1.12); }

    /* Sticky Footer */
    tfoot tr th, tfoot tr td {
      position: sticky; bottom: 0; background: var(--header-bg) !important; z-index: 30;
      font-weight: 700; border-top: 2px solid var(--accent); font-size: 0.72rem; height: 28px; border-bottom: 1px solid var(--grid-half);
    }
    tfoot tr td.col-sticky-left { position: sticky; bottom: 0; z-index: 45; background: var(--header-bg) !important; border-right: none; }

    /* Visual Hierarchy for 15-Minute Grid Lines */
    .q-quarter { border-right: 1px dotted var(--grid-quarter); }
    .q-half { border-right: 1px solid var(--grid-half); }
    .q-hour { border-right: 2px solid var(--grid-hour); }

    td.slot-empty { height: 36px; cursor: pointer; background: var(--slot-empty); border-bottom: 1px solid var(--grid-half); }
    td.slot-empty:hover { background: var(--slot-empty-hover); }
    td.slot-zone { height: 36px; padding: 2px 0 !important; cursor: pointer; background: var(--slot-empty); border-bottom: 1px solid var(--grid-half); }

    /* Continuous Zone Ribbons */
    .zone-ribbon {
      width: 100%; height: 32px; display: flex; align-items: center; justify-content: center;
      position: relative; box-shadow: 0 1px 3px rgba(0,0,0,0.3); overflow: hidden;
    }
    table.rounded-cells .zone-ribbon { border-radius: 6px; }
    table.square-cells .zone-ribbon { border-radius: 0px; }

    .range-preview-highlight { outline: 2px dashed var(--accent); outline-offset: -2px; filter: brightness(1.25); }

    /* Past Hour Dimming on Empty Grid cells */
    .past-hour-col { opacity: 0.38; filter: saturate(55%) brightness(0.66); }
    .past-hour-header { color: var(--text-muted) !important; }

    /* Break Buttons */

    .btn-del-row { background: none; border: none; color: var(--red); font-size: 1rem; cursor: pointer; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; margin: 0 auto; border-radius: 4px; }
    .btn-del-row:hover { background: color-mix(in srgb, var(--red) 15%, transparent); }

    @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

    #lunch-toast { display: none; position: fixed; top: 16px; right: 16px; background: #ea580c; color: #fff; padding: 12px 18px; border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,0.5); z-index: 9999; font-size: 0.9rem; font-weight: 700; align-items: center; gap: 10px; }

    /* KPI Section */
    .kpi-container { margin-bottom: 20px; }
    .kpi-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 10px; padding: 12px 14px; width: 100%; transition: background-color var(--m-state) var(--e-std), border-color var(--m-state) var(--e-std); }
    .kpi-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
    .kpi-header h3 { font-size: 0.85rem; color: var(--text-muted); text-transform: uppercase; }

    .kpi-summary-ribbon { display: flex; gap: 10px; font-size: 0.8rem; background: var(--input-bg); padding: 4px 10px; border-radius: 6px; border: 1px solid var(--card-border); flex-wrap: wrap; align-items: center; }
    .kpi-summary-ribbon span { color: var(--text-muted); }
    .kpi-summary-ribbon strong { color: var(--text); }

    .goal-progress-bar-wrapper { width: 100%; height: 8px; background: var(--input-bg); border-radius: 4px; border: 1px solid var(--card-border); margin: 8px 0 10px; overflow: hidden; position: relative; }
    .goal-progress-bar-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent) 0%, var(--green) 100%); transition: width var(--m-move) var(--e-std), background var(--m-move) var(--e-std); }

    .kpi-table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
    .kpi-table { width: 100%; font-size: 0.78rem; min-width: 980px; border-collapse: separate; border-spacing: 0; }
    .kpi-table th, .kpi-table td { padding: 6px 4px; border-right: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); text-align: center; }
    .kpi-table th { background: var(--header-bg); color: var(--text-muted); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; }

    input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
    input[type=number] { -moz-appearance: textfield; }

    .kpi-table input { width: 100%; background: transparent; border: none; color: var(--text); text-align: center; font-weight: 600; font-size: 0.8rem; border-radius: 4px; padding: 2px 0; transition: background-color var(--m-state) var(--e-std); }
    .kpi-table input:focus { outline: 1px solid var(--accent); background: var(--input-bg); }

    .kpi-table th.kpi-total-col, .kpi-table td.kpi-total-col { position: sticky; right: 0; background: var(--header-bg); z-index: 5; border-left: 2px solid var(--accent); box-shadow: -3px 0 6px var(--shadow-color); font-weight: 800; min-width: 95px; }
    .kpi-table tbody td.kpi-total-col { background: var(--card-bg); }

    dialog { background: var(--card-bg); color: var(--text); border: 1px solid var(--card-border); border-radius: 10px; padding: 20px; max-width: 520px; width: 92%; margin: auto; box-shadow: 0 20px 25px -5px var(--shadow-color); }
    dialog::backdrop { background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(4px); }
    .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; border-bottom: 1px solid var(--card-border); padding-bottom: 8px; }
    .modal-close { background: none; border: none; color: var(--text-muted); font-size: 1.4rem; cursor: pointer; padding: 0; }
    .form-group { margin-bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
    .form-group label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
    .form-group input, .form-group textarea { background: var(--input-bg); border: 1px solid var(--card-border); color: var(--text); padding: 8px; border-radius: 6px; font-size: 0.9rem; }

    @media print {
      body { background: #ffffff !important; color: #000000 !important; padding: 0 !important; }
      header,
.zone-legend,
.btn-group,
#lunch-toast { display: none !important; }
      .table-container { max-height: unset !important; overflow: visible; border: 1px solid #000 !important; margin: 0; }
      table { min-width: 100%; width: 100% !important; font-size: 8pt; }
      th, td { border: 1px solid var(--text-muted) !important; color: #000000 !important; }
      thead th { background: #e2e8f0 !important; color: #000000 !important; }
      td.col-sticky-left { background: #ffffff !important; color: #000000 !important; position: static; box-shadow: none !important; }
      .zone-ribbon { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    }

/* ==========================================================================
   STAGE 1B — REFERENCE HEADER ONLY
   Functional app header markup and application JS remain unchanged.
   ========================================================================== */

.stage1b-topbar {
  display: grid;
  grid-template-columns: 265px minmax(320px, 1.25fr) 175px repeat(4, 120px) 112px;
  gap: 9px;
  align-items: stretch;
  min-height: 76px;
  margin-bottom: 9px;
}

.stage1b-brand {
  display: flex;
  align-items: center;
  min-width: 0;
}

.stage1b-symbol {
  width: 78px;
  height: 54px;
  display: grid;
  place-items: center;
  border-right: 1px solid rgba(83, 120, 151, .55);
  color: var(--text);
  font-size: 2rem;
  line-height: 1;
}

.stage1b-brand-copy {
  padding-left: 16px;
  min-width: 0;
  white-space: nowrap;
}

.stage1b-brand-copy strong {
  display: block;
  font-size: 1.34rem;
  line-height: 1;
  letter-spacing: .025em;
  font-weight: 800;
}

.stage1b-brand-copy span {
  display: block;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: .78rem;
}

.stage1b-title {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.stage1b-title > strong {
  display: block;
  font-size: 1.18rem;
  line-height: 1.15;
  font-weight: 760;
  white-space: nowrap;
}

.stage1b-date-button {
  width: max-content;
  height: 28px;
  min-height: 28px;
  margin-top: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 500;
}

.stage1b-date-button:hover {
  background: transparent;
  color: var(--text);
}

.stage1b-performance,
.stage1b-kpi {
  min-height: 76px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--widget-bg);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 2.5%, transparent);
  color: var(--text);
}

.stage1b-performance {
  display: grid;
  grid-template-columns: 30px 1fr 16px;
  align-items: center;
  gap: 6px;
  height: auto;
  padding: 0 12px;
  text-align: left;
  border-color: var(--accent);
}

.stage1b-perf-icon {
  font-size: 1.12rem;
}

.stage1b-perf-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.stage1b-perf-copy b {
  font-size: .70rem;
  font-weight: 700;
}

.stage1b-perf-copy em {
  color: #20df98;
  font-size: .72rem;
  font-style: normal;
  font-weight: 800;
}

.stage1b-kpi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 12px;
}

.stage1b-kpi > span {
  color: var(--text-2);
  font-size: .66rem;
}

.stage1b-kpi strong {
  margin-top: 3px;
  font-size: 1.2rem;
  line-height: 1.05;
  font-weight: 800;
}

.stage1b-kpi small {
  margin-top: 5px;
  font-size: .68rem;
  font-weight: 800;
}

.stage1b-up { color: #23db97; }
.stage1b-down { color: var(--red); }

.stage1b-staff {
  align-items: center;
  text-align: center;
}

/* Restyle the ORIGINAL working header into the reference's second row. */
header {
  position: relative;
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 9px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

header .meta-group {
  flex: 0 0 455px;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-width: 0;
}

header .meta-item {
  min-width: 0;
  height: 58px;
  justify-content: center;
  padding: 7px 13px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--widget-bg);
}

/* Date and Goal still exist and remain functional, but their visual controls
   are represented elsewhere in the reference header. */
header .meta-item:nth-child(1),
header .meta-item:nth-child(4) {
  position: absolute;
  width: 1px !important;
  height: 1px;
  min-height: 1px;
  overflow: hidden;
  opacity: .001;
  padding: 0 !important;
  border: 0 !important;
  pointer-events: none;
}

header .meta-item:nth-child(2),
header .meta-item:nth-child(3) {
  display: flex !important;
  flex-direction: column;
  gap: 3px;
}

header .meta-item label {
  font-size: .64rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted) !important;
}

header .meta-item:nth-child(2) label {
  font-size: 0;
}
header .meta-item:nth-child(2) label::after {
  content: "AM Lead";
  font-size: .64rem;
}

header .meta-item:nth-child(3) label {
  font-size: 0;
}
header .meta-item:nth-child(3) label::after {
  content: "PM Lead";
  font-size: .64rem;
}

header .meta-item input {
  height: 27px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--text) !important;
  outline: none;
  font-size: .82rem;
  font-weight: 700;
}

header .btn-group {
  flex: 1 1 auto;
  display: flex !important;

  justify-content: flex-end;
  gap: 6px;
}

header .btn-group button {
  height: 58px;
  min-width: 66px;
  padding: 0 9px !important;
  border-radius: 9px !important;
  border: 1px solid var(--edge) !important;
  background: var(--widget-bg) !important;
  color: var(--text) !important;
  font-size: .70rem !important;
  font-weight: 700;
  white-space: nowrap;
}

header #alert-toggle-btn { min-width: 96px; }
header #lock-btn { min-width: 72px; }
header #scan-roster-btn {
  min-width: 74px;
  background: linear-gradient(180deg, #12ae72 0%, #0a8d5c 100%) !important;
  border-color: #1cc982 !important;
}

/* The reference uses an overflow menu instead of showing Clear/Zones as large buttons.
   For now we simply de-emphasise them rather than touching their behaviour. */
header .btn-group button[onclick="clearRosterBoard()"],
header .btn-group button[onclick*="settings-modal"] {
  min-width: 54px;
  font-size: 0;
}
header .btn-group button[onclick="clearRosterBoard()"]::after {
  content: "•••";
  font-size: 1rem;
}
header .btn-group button[onclick*="settings-modal"] {
  display: none !important;
}

/* Existing KPI section becomes a popover only when Performance is clicked.
   The KPI DOM and all its inputs/handlers remain unchanged. */

@media (max-width: 1450px) {
  .stage1b-topbar {
    grid-template-columns: 225px minmax(275px,1fr) 155px repeat(4,105px) 96px;
    gap: 7px;
  }

  .stage1b-brand-copy strong { font-size: 1.12rem; }
  .stage1b-title > strong { font-size: 1.02rem; }

  header .meta-group {
    flex-basis: 390px;
  }

  header .btn-group button {
    min-width: 58px;
    padding: 0 7px !important;
    font-size: .65rem !important;
  }
}

/* STAGE 1C — two corrections only: logo + Scan visibility */
.stage1b-symbol {
  overflow: hidden;
}

.stage1b-symbol img {
  width: 68px;
  height: 50px;
  object-fit: contain;
  display: block;
}

/* The approved reference keeps Scan visible while the board is locked.
   This overrides only the generic .manager-only hiding rule for Scan. */
body.locked-mode header #scan-roster-btn {
  display: flex !important;
}

/* ==========================================================================
   STAGE 2 — ZONE TOOLBAR ONLY
   Uses the existing ZONES renderer and click handlers unchanged.
   ========================================================================== */

/* The approved reference always shows the zone legend, even when the board is locked.
   The existing click handler already prevents painting while locked. */
body.locked-mode .zone-legend.manager-only {
  display: flex !important;
}

.zone-legend {
  display: flex !important;

  gap: 8px;
  min-height: 48px;
  padding: 0 !important;
  margin-bottom: 9px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;

  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.zone-legend::-webkit-scrollbar {
  display: none;
}

/* Reference row contains only the floor zones.
   Clear / Shift / Lunch remain in the DOM and in the existing application logic,
   and are available alongside the floor zones. */
#zone-badges-container > span {
  display: none !important;
}

#zone-badges-container {

  align-items: stretch;

  flex: 1 0 auto;
  min-width: 0;
}

/* Toolbar entries identify their own zone; field order never controls visibility. */
/* Every configured zone remains available, regardless of Firestore field order. */
#zone-badges-container > .zone-badge[data-zone] {
  display: flex !important;
}

/* The old Time/Range/Shape/Dual group is retained in the DOM.
   It will be relocated to the overflow menu in a later controls stage. */
.zone-legend > div:last-child:not(#zone-badges-container) {
  display: none !important;
}

.zone-badge {
  position: relative;
  flex: 1 1 0;
  min-width: 112px;
  height: 47px;
  padding: 0 14px 0 48px !important;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: inherit;
  font-size: .80rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .005em;
  text-transform: none;
  white-space: nowrap;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--text) 11%, transparent),
    0 4px 12px rgba(0,0,0,.12) !important;
  transform: none;
  transition: filter var(--m-state) var(--e-std), border-color var(--m-state) var(--e-std), box-shadow var(--m-state) var(--e-std) !important;
}

/* Circular icon tile from the approved reference. */
.zone-badge::before {
  position: absolute;
  left: 12px;
  top: 50%;
  width: 27px;
  height: 27px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 20%, transparent);
  color: currentColor;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.zone-badge:hover {
  filter: brightness(1.08) !important;
}

.zone-badge.selected {
  border-color: var(--text) !important;
  transform: none;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent),
    0 4px 14px rgba(0,0,0,.20) !important;
}

/* In locked/viewing mode the zones remain bright, but do not suggest editing. */

@media (max-width: 1180px) {
  .zone-badge {
    flex: 0 0 108px;
    min-width: 108px;
    padding-left: 44px !important;
    font-size: .75rem;
  }

  .zone-badge::before {
    left: 10px;
    width: 25px;
    height: 25px;
    font-size: 12px;
  }
}

/* ==========================================================================
   STAGE 2B — PLAIN CIRCLE ZONE ICONS
   All zone buttons use the same simple circle treatment.
   ========================================================================== */

#zone-badges-container > .zone-badge::before {
  content: "";

  border-radius: 50% !important;
  background: color-mix(in srgb, var(--text) 22%, transparent) !important;
  display: block !important;
}

/* ==========================================================================
   STAGE 3 — TOP-BAR / ZONE INTERACTION REFINEMENT
   Existing app controls remain in place; less-used manager controls are
   surfaced through one lightweight overflow menu.
   ========================================================================== */

/* Keep the primary action row predictable. */
header .btn-group {
  flex-wrap: nowrap;
  align-items: stretch;
}

header #alert-toggle-btn { order: 3; }
header #lock-btn { order: 4; }
header .btn-group button[onclick="addNewRow()"] { order: 5; }
header .btn-group .pdf-btn { order: 6; }
header #scan-roster-btn { order: 7; }

/* Clear + Zones move into the overflow menu. Keep the original buttons
   in the DOM for their existing functionality, but do not display them. */
header .btn-group button[onclick="clearRosterBoard()"],
header .btn-group button[onclick*="settings-modal"] {
  display: none !important;
}

/* Reference-style primary actions remain visible while locked.
   Their existing functions still enforce the lock where appropriate. */
body.locked-mode header .btn-group button[onclick="addNewRow()"],
body.locked-mode header #scan-roster-btn {
  display: flex !important;
}

/* Overflow menu */

/* Zone row must always remain one line. */
.zone-legend,
#zone-badges-container {
  flex-wrap: nowrap;
}

/* Locked = readable but clearly non-editing.
   Keep the actual colours at full strength. */
body.locked-mode .zone-badge {
  cursor: default;
  filter: none;
  opacity: 1;
}

body.locked-mode .zone-badge:hover {
  filter: none !important;
  border-color: transparent !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--text) 11%, transparent),
    0 4px 12px rgba(0,0,0,.12) !important;
}

body.locked-mode .zone-badge.selected {
  border-color: transparent !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--text) 11%, transparent),
    0 4px 12px rgba(0,0,0,.12) !important;
}

/* Unlocked = obvious active paint zone without extra labels. */
body:not(.locked-mode) .zone-badge {
  cursor: pointer;
}

body:not(.locked-mode) .zone-badge:hover {
  filter: brightness(1.08) !important;
}

body:not(.locked-mode) .zone-badge.selected {
  border-color: #ffffff !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 42%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--text) 22%, transparent),
    0 5px 16px rgba(0,0,0,.20) !important;
}

/* ==========================================================================
   STAGE 4 — ROSTER READABILITY / IPAD GRID
   Presentation only. Existing roster DOM, rendering and interactions unchanged.
   ========================================================================== */

.table-container {
  max-height: calc(100vh - 245px) !important;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  border-radius: 10px !important;
}

/* Give the frozen information columns enough room to scan quickly. */

/* 15-minute cells are deliberately wider instead of squeezing the whole day in. */
#roster-table .col-quarter {
  width: 32px !important;
  min-width: 32px;
  max-width: 32px;
}

/* Larger touch/read targets for iPad Mini and Pro. */
#roster-table tbody td {
  height: 44px;
  min-height: 44px;
}

#roster-table td.staff-name {
  padding-left: 10px !important;
  padding-right: 8px !important;
  font-size: .82rem;
  font-weight: 650;
}

/* Make quarter-hour structure obvious without visually overpowering zones. */
#roster-table .q-quarter {
  border-right: 1px dotted rgba(122, 157, 187, .25);
}
#roster-table .q-half {
  border-right: 1px solid rgba(122, 157, 187, .40);
}
#roster-table .q-hour {
  border-right: 2px solid rgba(137, 174, 205, .58);
}

/* Header gets a little more vertical breathing room. */
#roster-table thead tr:first-child th {
  height: 38px;
  font-size: .72rem;
}
#roster-table thead tr:nth-child(2) th {
  height: 25px !important;
  font-size: .60rem;
  color: #a8bdd0 !important;
}

/* Preserve configured zone colours; just make the ribbons fill the row cleanly. */
#roster-table .zone-ribbon {

  min-height: 38px;

  opacity: 1;
  filter: none;
  font-size: .72rem;
  font-weight: 800;
}

/* Break controls on the right need enough width for reliable tapping. */

/* Coverage remains visible at the bottom of the scrolling roster. */
#roster-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 46;
  min-height: 34px;
  height: 34px;
}

/* Avoid visually muting completed zoning. NOW will remain the time cue. */
:root {
  --past-overlay: rgba(11,19,27, .22);
}

/* View mode is zoning-first and uses almost the whole screen. */

/* ==========================================================================
   STAGE 6 — COMPACT PERSON INFO
   Staff | Shift | Breaks (B1 / Lunch / B2) | timeline
   ========================================================================== */

/* Old Stage 5 break/lunch columns are no longer part of the rendered table. */

/* New explicit frozen offsets. */

/* Remove stale Stage 5 visual divider rules from classes no longer used here. */

/* End of staff information. */
#roster-table .col-sticky-left.col-del {

  box-shadow: 7px 0 12px rgba(9,17,27,.28) !important;
}

/* When manager-only Delete is hidden, Breaks becomes the final frozen column. */
body.locked-mode #roster-table .col-del {
  display: none !important;
}

body.locked-mode #roster-table .col-sticky-left.col-breaks {

  box-shadow: 7px 0 12px rgba(9,17,27,.28) !important;
}

/* One quiet header rather than three loud columns. */
.breaks-head {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.breaks-head > span {
  font-size: .70rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.breaks-head small {
  display: grid;
  grid-template-columns: 32px 52px 32px;
  justify-content: center;
  gap: 3px;
  color: #7890a8;
  font-size: .50rem;
  line-height: 1;
}

.breaks-head small b {
  font-weight: 650;
}

/* Compact break group. The three controls remain individually clickable. */
.breaks-cell {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 32px 52px 32px;

  justify-content: center;
  gap: 3px;
}

/* Lunch gets slightly more room because it contains an actual clock time. */

/* Completed breaks are intentionally quieter than the old large DONE cards. */

/* Preserve the application's other break states without introducing new logic. */

/* Staff block is now significantly narrower, giving the timeline more room. */
#roster-table td.col-breaks,
#roster-table th.col-breaks {
  padding-left: 5px !important;
  padding-right: 5px !important;
}

/* Keep Stage 5's tighter, softly-rounded zoning. */

/* On smaller iPads keep the controls usable; don't collapse the three break targets. */
@media (max-width: 1180px) {
  #roster-table .col-name {
    width: 116px !important;
    min-width: 116px;
    max-width: 116px;
  }

  #roster-table .col-shift {
    width: 88px !important;
    min-width: 88px;
    max-width: 88px;
  }

  #roster-table .col-sticky-left.col-shift  { left: 116px !important; }
  #roster-table .col-sticky-left.col-breaks { left: 204px !important; }

  .breaks-cell,
  .breaks-head small {

    gap: 3px;
  }
}

/* ==========================================================================
   STAGE 6B — LUNCH EDITING + RESPONSIVE ZONE TOOLBAR + HEADER CLIP FIX
   ========================================================================== */

/* BREAKS column: give the editable lunch field enough room without restoring
   the old duplicated Lunch Time column. */

.breaks-cell,
.breaks-head small {
  grid-template-columns: 32px 80px 32px;
  gap: 3px;
}

/* Lunch has two distinct actions:
   small left button = break timer/status
   time field = edit scheduled lunch time */

/* Make the header one solid sticky unit so the B1/Lunch/B2 labels cannot
   slide underneath / be clipped by the first body row. */
#roster-table thead {
  position: sticky;
  top: 0 !important;
  z-index: 120;
}

#roster-table thead tr:first-child th,
#roster-table thead tr:nth-child(2) th {
  position: sticky;
  background: var(--row-b) !important;
}

#roster-table thead tr:first-child th {
  top: 0 !important;
  z-index: 124 !important;
}

#roster-table thead tr:nth-child(2) th {
  top: 38px !important;
  z-index: 123 !important;
}

#roster-table thead .col-sticky-left {
  z-index: 130;
}

/* Ensure the compact Breaks labels sit safely inside the header rather than
   relying on the old split-header vertical geometry. */
#roster-table thead th.col-breaks {
  overflow: visible;
}

.breaks-head {
  min-height: 38px;
  padding-top: 2px;
  padding-bottom: 2px;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   ZONE TOOLBAR
   Lunch is available alongside Shift, Clear, and the floor zones.
   The existing zone renderer + click handlers are unchanged.
   -------------------------------------------------------------------------- */

/* Lunch styling is attached to its zone ID. */
#zone-badges-container > .zone-badge[data-zone="LUNCH"] {
  display: flex !important;
}

/* Lunch uses the same simple-circle visual language as every other zone. */
#zone-badges-container > .zone-badge[data-zone="LUNCH"]::before {
  content: "";
}

/* Adaptive grid:
   - normally all available zones share one row
   - as more zones are added, buttons shrink to a sensible minimum
   - once they no longer fit, they wrap into two equal-height rows */
.zone-legend {
  overflow-x: visible;
  overflow-y: visible;
  align-items: stretch;
}

#zone-badges-container {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  grid-auto-rows: 42px;
  gap: 6px;
  width: 100% !important;
  overflow: visible;
}

#zone-badges-container > .zone-badge {
  width: 100% !important;
  min-width: 0;
  height: 42px;
  padding: 0 9px 0 39px !important;
  margin: 0;
}

#zone-badges-container > .zone-badge::before {
  left: 9px !important;
  width: 23px !important;
  height: 23px;
}

/* Keep the toolbar from growing indefinitely if many custom zones are added.
   Two rows remain fully visible; beyond that, the row can scroll horizontally. */
#zone-badges-container {
  max-height: 90px !important;
}

@media (max-width: 1180px) {
  #roster-table .col-breaks {
    width: 150px !important;
    min-width: 150px;
    max-width: 150px;
  }

  #roster-table .col-sticky-left.col-del {
    left: 354px !important;
  }

  .breaks-cell,
  .breaks-head small {
    grid-template-columns: 31px 78px 31px;
  }

  #zone-badges-container {
    grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
  }

  #zone-badges-container > .zone-badge {
    font-size: .70rem;
  }
}

/* STAGE 6C — three calm break slots + action popover */

.breaks-cell,.breaks-head small { grid-template-columns:46px 56px 46px; gap:2px; }

#roster-table .break-slot {
    height:30px; padding:0 2px;
   border-radius:5px;
    font-size:.62rem;
  font-weight:750; line-height:1; white-space:nowrap;
}
#roster-table .break-slot:hover,#roster-table .break-slot:focus-visible {
  background:rgba(41,57,72,.72); border-color:#556678; outline:none;
}

#roster-table .break-slot.done span { font-size:.95rem; font-weight:900; }
#roster-table .break-slot.active,#roster-table .break-slot.running {
  color:#ecfdf5; background:color-mix(in srgb, var(--green) 18%, transparent); border-color:color-mix(in srgb, var(--green) 45%, transparent);
}

@media (max-width:1180px) {
  #roster-table .col-breaks { width:154px!important; min-width:154px; max-width:154px; }

  .breaks-cell,.breaks-head small { grid-template-columns:44px 56px 44px; }
}

/* ==========================================================================
   STAGE 6D — SURFACE-LEVEL BREAKS
   No popover. B1 / Lunch / B2 stay directly actionable in the roster.
   Scheduled times are edited from the existing Staff Profile.
   ========================================================================== */

#roster-table .break-slot {
  border: 1px solid var(--edge) !important;
  background: var(--break-bg) !important;
  color: var(--text-2) !important;
}

/* Keep live timer text from ever stretching or colliding inside a break cell. */
#roster-table .break-slot span {
  display:block;

}

/* The roster should remain visually quiet: one compact control per break. */
.breaks-cell {
  align-items:center;
}

/* ==========================================================================
   STAGE 6E — BREAK TIMER STATUS COLOURS
   Green = completed | Amber = active | Red = overdue
   ========================================================================== */

#roster-table .break-slot.active,
#roster-table .break-slot.running {
  border-color: color-mix(in srgb, var(--orange) 72%, transparent) !important;
  background: color-mix(in srgb, var(--orange) 20%, transparent) !important;
  color: var(--orange-text) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--orange) 8%, transparent) !important;
}

/* Completed remains green. */
#roster-table .break-slot.done {
  border-color: color-mix(in srgb, var(--green) 48%, transparent) !important;
  background: rgba(5,150,105,.16) !important;
  color: #34d399 !important;
}

/* ==========================================================================
   STAGE 6F v2 — TRUE FROZEN-COLUMN STACKING FIX
   ========================================================================== */

/* The table itself must not create a clipping/painting order that lets the
   scrolling timeline paint over sticky left columns. */
#main-table-container,
.table-container {
  isolation: isolate;
}

#roster-table {
  position: relative;
}

/* Timeline layers: deliberately low. */
#roster-table tbody td:not(.col-sticky-left) {
  position: relative;
  z-index: 1;
}

#roster-table thead th:not(.col-sticky-left) {
  z-index: 20;
}

#roster-table tfoot td:not(.col-sticky-left) {
  z-index: 20;
}

/* Frozen body cells: own opaque stacking contexts above ALL timeline content. */
#roster-table tbody td.col-sticky-left {
  position: sticky;
  z-index: 100;

  background-color: var(--row-a) !important;
  background-image: none !important;
  opacity: 1;
  isolation: isolate;
  transform: translateZ(0);
}

/* Frozen header must be the absolute top table layer. */
#roster-table thead th.col-sticky-left {
  position: sticky;
  z-index: 300;

  background-color: var(--row-b) !important;
  background-image: none !important;
  opacity: 1;
  isolation: isolate;
  transform: translateZ(0);
}

/* Frozen footer likewise stays over coverage/time cells. */
#roster-table tfoot td.col-sticky-left {
  position: sticky;
  z-index: 250;
  background: var(--row-b) !important;
  background-color: var(--row-b) !important;
  background-image: none !important;
  opacity: 1;
  isolation: isolate;
  transform: translateZ(0);
}

/* Contents of frozen cells cannot fall into a lower stacking context. */
#roster-table .col-sticky-left > * {
  position: relative;
  z-index: 2;
}

/* Explicit offsets for the current Stage 6E layout. */

/* Solid masking edge. This physically covers anything reaching the boundary. */
#roster-table .col-sticky-left.col-del::after {
  content: "";
  position: absolute;
  top: 0;
  right: -10px;
  bottom: 0;
  width: 10px;
  background: linear-gradient(90deg, var(--row-a) 0%, color-mix(in srgb, var(--row-a) 82%, transparent) 45%, transparent 100%);
  pointer-events: none;
  z-index: 5;
}

#roster-table thead .col-sticky-left.col-del::after,
#roster-table tfoot .col-sticky-left.col-del::after {
  background: linear-gradient(90deg, var(--row-b) 0%, color-mix(in srgb, var(--row-b) 82%, transparent) 45%, transparent 100%);
}

/* Blue boundary remains above the scrolling grid. */
#roster-table .col-sticky-left.col-del {
  border-right: 2px solid var(--accent);
}

/* Locked mode: Del disappears, so Breaks becomes the final mask/boundary. */
body.locked-mode #roster-table .col-sticky-left.col-breaks {
  border-right: 2px solid var(--accent);
}

body.locked-mode #roster-table .col-sticky-left.col-breaks::after {
  content: "";
  position: absolute;
  top: 0;
  right: -10px;
  bottom: 0;
  width: 10px;
  background: linear-gradient(90deg, var(--row-a) 0%, color-mix(in srgb, var(--row-a) 82%, transparent) 45%, transparent 100%);
  pointer-events: none;
  z-index: 5;
}

body.locked-mode #roster-table thead .col-sticky-left.col-breaks::after,
body.locked-mode #roster-table tfoot .col-sticky-left.col-breaks::after {
  background: linear-gradient(90deg, var(--row-b) 0%, color-mix(in srgb, var(--row-b) 82%, transparent) 45%, transparent 100%);
}

@media (max-width:1180px) {
  #roster-table .col-sticky-left.col-name   { left:0 !important; }
  #roster-table .col-sticky-left.col-shift  { left:116px !important; }
  #roster-table .col-sticky-left.col-breaks { left:204px !important; }
  #roster-table .col-sticky-left.col-del    { left:358px !important; }
}

/* STAGE 6G — make the frozen edge visually solid; JS performs the hard clip. */
#roster-table thead th.col-sticky-left {
  overflow: hidden;
  background: var(--row-b) !important;
}

#roster-table tbody td.col-sticky-left {
  overflow: hidden;
  background: var(--row-a) !important;
}


/* Safari: prevent text descendants from escaping their clipped header cell. */
#roster-table .hour-header,
#roster-table thead .q-quarter,
#roster-table thead .q-half,
#roster-table thead .q-hour {
  overflow: hidden;
}

/* ==========================================================================
   STAGE 7 RESET — ONE CHANGE ONLY
   Locked mode hides editing-only tools. No layout restructuring.
   ========================================================================== */

/* Actual editing-only controls from the working build. */
body.locked-mode #alert-toggle-btn,
body.locked-mode header .btn-group button[onclick="addNewRow()"],
body.locked-mode header .btn-group .pdf-btn,
body.locked-mode #scan-roster-btn {
  display: none !important;
}

/* Keep View and Lock/Unlock exactly where they already work. */
body.locked-mode #lock-btn {
  display: flex !important;
}

/* No forced heights, no moved DOM, no grid changes. */

/* ==========================================================================
   STAGE 7 — STEP 2 ONLY
   Move View / Unlock VISUALLY to the KPI row while locked.
   AM/PM leads and every other layout element stay exactly where they are.
   ========================================================================== */

#stage7-top-actions {
  display: none;
}

/* In locked mode, hide only the ORIGINAL copies of these three buttons. */
body.locked-mode header #lock-btn {
  display: none !important;
}

/* Show the new top-row copies only while locked. */

/* Make room for the action group without touching the second row. */
body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar {
  grid-template-columns:
    225px
    minmax(250px, 1fr)
    160px
    repeat(4, 100px)
    88px
    220px;

}

/* Laptop / iPad landscape: shrink widths before allowing any overlap. */
@media (max-width: 1400px) {
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar {
    grid-template-columns:
      190px
      minmax(220px, 1fr)
      145px
      repeat(4, 84px)
      76px
      190px;

  }

}

/* ==========================================================================
   STAGE 7 — STEP 3
   Exact locked layout from the approved mockup.
   ONLY adds read-only AM/PM lead cards to the already-working Step 2 top row.
   No existing functional controls are moved.
   ========================================================================== */

#stage7-leads {
  display: none;
}

/* Locked mode has ONE row only. The original editor header remains untouched
   in the DOM and simply disappears until Unlock is pressed. */
body.locked-mode > header {
  display: none !important;
}

body.locked-mode .zone-legend {
  display: none !important;
}

/* Exact visual order:
   Brand | Title/Date | AM+PM | Performance | Sales | SPLH | UPT | AOV | Staff | Actions */
body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar {

  grid-template-columns:
    220px
    minmax(250px, 1fr)
    190px
    170px
    repeat(4, 92px)
    82px
    210px;

}

/* All top-row cards share the same height. */
body:is(.locked-mode, :not(.locked-mode)) .stage1b-brand,
body:is(.locked-mode, :not(.locked-mode)) .stage1b-title,
body:is(.locked-mode, :not(.locked-mode)) .stage1b-performance,
body:is(.locked-mode, :not(.locked-mode)) .stage1b-kpi,
body:is(.locked-mode, :not(.locked-mode)) .stage7-lead-card,
body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions button {
  min-height: 76px;
  height: 76px;
  box-sizing: border-box;
}

/* Brand/title proportions from the approved image. */

/* Lead cards are compact read-only information, matching the mockup. */
.stage7-lead-card {
  min-width: 0;
  padding: 9px 8px;
  border: 1px solid var(--edge);
  border-radius: 10px;
  background: var(--widget-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stage7-lead-card span {
  color: var(--text-muted);
  font-size: .54rem;
  line-height: 1;
  white-space: nowrap;
}

.stage7-lead-card strong {
  margin-top: 7px;
  overflow: hidden;
  color: var(--text);
  font-size: .70rem;
  line-height: 1;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tight KPI styling without changing their data or behaviour. */

/* Step 2 actions already work. Only match their approved dimensions. */

/* Roster begins directly under the single locked header. Do not force a
   viewport height or crop the footer. */
body.locked-mode #main-table-container,
body.locked-mode .table-container {

  margin-top: 0;
}

/* Laptop/iPad landscape: keep the SAME order and shrink proportionally. */
@media (max-width: 1400px) {
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar {
    grid-template-columns:
      185px
      minmax(205px, 1fr)
      170px
      150px
      repeat(4, 78px)
      70px
      180px;

    min-height: 70px;
    height: 70px;
  }

  body:is(.locked-mode, :not(.locked-mode)) .stage1b-brand,
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-title,
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-performance,
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-kpi,
  body:is(.locked-mode, :not(.locked-mode)) .stage7-lead-card,
  body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions button {
    min-height: 70px;
    height: 70px;
  }

  .stage7-lead-card strong { font-size: .62rem; }

}

/* ==========================================================================
   STAGE 7 — STEP 4 ONLY
   Keep the bottom of the roster inside the visible screen while locked.
   No header / roster / Firebase / break layout changes.
   ========================================================================== */

body.locked-mode #main-table-container,
body.locked-mode .table-container {
  height: auto;
  max-height: var(--locked-roster-max-height, calc(100vh - 90px)) !important;
  overflow-y: auto;
  overflow-x: auto;
  margin-bottom: 0;
}

/* ==========================================================================
   STAGE 7 — STEP 5B
   Locked header styled to the APPROVED REFERENCE.
   Structure and behaviour are unchanged.
   ========================================================================== */

body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  display: grid !important;

  grid-template-columns:
    205px
    minmax(220px, 1fr)
    210px
    150px
    repeat(4, 76px)
    74px
    205px;

  margin: 0 0 6px 0;
}

/* Explicit placement prevents any old CSS from reordering the row. */
body:is(.locked-mode, :not(.locked-mode)) .stage1b-brand { grid-area: brand; }
body:is(.locked-mode, :not(.locked-mode)) .stage1b-title { grid-area: title; }
body:is(.locked-mode, :not(.locked-mode)) #stage7-leads { grid-area: leads; }
body:is(.locked-mode, :not(.locked-mode)) .stage1b-performance { grid-area: perf; }
body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar > .stage1b-kpi:nth-child(5) { grid-area: sales; }
body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar > .stage1b-kpi:nth-child(6) { grid-area: splh; }
body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar > .stage1b-kpi:nth-child(7) { grid-area: upt; }
body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar > .stage1b-kpi:nth-child(8) { grid-area: aov; }
body:is(.locked-mode, :not(.locked-mode)) .stage1b-staff { grid-area: staff; }
body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions { grid-area: actions; }

/* Reference: branding and title are NOT giant bordered cards. */
body:is(.locked-mode, :not(.locked-mode)) .stage1b-brand,
body:is(.locked-mode, :not(.locked-mode)) .stage1b-title {
  display: flex !important;
  min-width: 0;

  padding: 0 5px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden;
}

body:is(.locked-mode, :not(.locked-mode)) .stage1b-brand {
  align-items: center;
}

body:is(.locked-mode, :not(.locked-mode)) .stage1b-title {
  flex-direction: column;
  justify-content: center;
}

/* Arc'teryx block */
body:is(.locked-mode, :not(.locked-mode)) .stage1b-symbol {
  width: 60px !important;
  height: 48px;
  flex: 0 0 60px;
  border-right: 1px solid rgba(83,120,151,.55);
}

body:is(.locked-mode, :not(.locked-mode)) .stage1b-symbol img {
  width: 55px !important;
  height: 42px;
}

body:is(.locked-mode, :not(.locked-mode)) .stage1b-brand-copy {
  min-width: 0;
  padding-left: 11px !important;
}

body:is(.locked-mode, :not(.locked-mode)) .stage1b-brand-copy strong {
  font-size: 1.04rem;
  line-height: 1;
  white-space: nowrap;
}

body:is(.locked-mode, :not(.locked-mode)) .stage1b-brand-copy span {
  margin-top: 5px;
  font-size: .66rem;
  white-space: nowrap;
}

/* Title / date */
body:is(.locked-mode, :not(.locked-mode)) .stage1b-title > strong {
  font-size: .96rem;
  line-height: 1.12;
  white-space: nowrap;
}

body:is(.locked-mode, :not(.locked-mode)) .stage1b-date-button {
  height: 22px;
  min-height: 22px;
  margin-top: 5px !important;
  gap: 6px;
  font-size: .65rem;
}

/* Compact AM / PM cards, like the reference fields. */
body:is(.locked-mode, :not(.locked-mode)) #stage7-leads {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  min-width: 0;
  height: 52px;
  align-self: center;
  padding-right: 8px !important;
  border-right: 1px solid rgba(113,134,154,.45);
}

body:is(.locked-mode, :not(.locked-mode)) .stage7-lead-card {
  min-width: 0;
  height: 52px;
  min-height: 52px;
  padding: 7px 8px !important;
  border: 1px solid var(--edge) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg,#1c2b3c 0%,var(--card-bg) 100%) !important;
  box-shadow: none !important;
}

body:is(.locked-mode, :not(.locked-mode)) .stage7-lead-card span {
  font-size: .50rem;
  color: #a8bdd2 !important;
}

body:is(.locked-mode, :not(.locked-mode)) .stage7-lead-card strong {
  margin-top: 6px;
  font-size: .65rem;
  line-height: 1;
}

/* Performance and KPI cards all share one consistent 62px height. */
body:is(.locked-mode, :not(.locked-mode)) .stage1b-performance,
body:is(.locked-mode, :not(.locked-mode)) .stage1b-kpi {
  min-width: 0;

  align-self: center;
  border: 1px solid var(--edge) !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg,#1c2b3c 0%,var(--card-bg) 100%) !important;
  box-shadow: none !important;
}

body:is(.locked-mode, :not(.locked-mode)) .stage1b-performance {
  padding: 0 9px !important;
  border-color: var(--accent) !important;
  grid-template-columns: 24px 1fr 12px;
  gap: 5px;
}

body:is(.locked-mode, :not(.locked-mode)) .stage1b-perf-icon {
  font-size: .95rem;
}

body:is(.locked-mode, :not(.locked-mode)) .stage1b-perf-copy b {
  font-size: .64rem;
}

body:is(.locked-mode, :not(.locked-mode)) .stage1b-perf-copy em {
  font-size: .62rem;
}

body:is(.locked-mode, :not(.locked-mode)) .stage1b-kpi {
  padding: 0 8px !important;
}

body:is(.locked-mode, :not(.locked-mode)) .stage1b-kpi > span {
  font-size: .51rem;
  color: var(--text-muted) !important;
}

body:is(.locked-mode, :not(.locked-mode)) .stage1b-kpi strong {
  margin-top: 3px;
  font-size: .92rem;
  line-height: 1;
}

body:is(.locked-mode, :not(.locked-mode)) .stage1b-kpi small {
  margin-top: 4px;
  font-size: .51rem;
}

body:is(.locked-mode, :not(.locked-mode)) .stage1b-staff {
  align-items: center;
  text-align: center;
}

/* Reference actions: smaller than KPI cards and vertically centred. */
body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions {

  align-self: center;

  border-left: 1px solid rgba(113,134,154,.45);
}

body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions button {
  height: 48px;
  min-height: 48px;
  min-width: 0;
  padding: 0 6px !important;
  border: 1px solid var(--edge) !important;
  border-radius: 8px !important;
  background: linear-gradient(180deg,#233143 0%,#1b2636 100%) !important;
  box-shadow: none !important;
  color: var(--text) !important;
  font-size: .59rem;
  font-weight: 750;
  white-space: nowrap;
}

body:is(.locked-mode, :not(.locked-mode)) #stage7-unlock {
  border-color: color-mix(in srgb, var(--orange) 75%, transparent) !important;
}

/* MacBook / iPad landscape */
@media (max-width: 1400px) {
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar {
    grid-template-columns:
      175px
      minmax(190px, 1fr)
      180px
      138px
      repeat(4, 68px)
      64px
      178px;
    gap: 4px;
    padding: 0 4px !important;
  }

  body:is(.locked-mode, :not(.locked-mode)) .stage1b-symbol {
    width: 50px !important;
    flex-basis: 50px;
  }

  body:is(.locked-mode, :not(.locked-mode)) .stage1b-symbol img {
    width: 46px !important;
    height: 38px;
  }

  body:is(.locked-mode, :not(.locked-mode)) .stage1b-brand-copy { padding-left: 8px !important; }
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-brand-copy strong { font-size: .88rem; }
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-brand-copy span { font-size: .57rem; }
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-title > strong { font-size: .79rem; }
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-date-button { font-size: .57rem; }
  body:is(.locked-mode, :not(.locked-mode)) .stage7-lead-card strong { font-size: .58rem; }
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-kpi strong { font-size: .82rem; }
  body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions button {
    padding: 0 4px !important;
    font-size: .52rem;
  }
}

/* iPad Mini landscape: keep one row, shrink uniformly rather than overlap. */
@media (max-width: 1200px) {
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar {
    grid-template-columns:
      155px
      minmax(160px, 1fr)
      150px
      125px
      repeat(4, 58px)
      58px
      150px;

  }

  body:is(.locked-mode, :not(.locked-mode)) .stage1b-symbol {
    width: 44px !important;
    flex-basis: 44px;
  }

  body:is(.locked-mode, :not(.locked-mode)) .stage1b-symbol img {
    width: 40px !important;
    height: 34px;
  }

  body:is(.locked-mode, :not(.locked-mode)) .stage1b-brand-copy strong { font-size: .78rem; }
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-brand-copy span { font-size: .50rem; }
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-title > strong { font-size: .71rem; }
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-date-button { font-size: .50rem; }
  body:is(.locked-mode, :not(.locked-mode)) .stage7-lead-card span { font-size: .44rem; }
  body:is(.locked-mode, :not(.locked-mode)) .stage7-lead-card strong { font-size: .52rem; }
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-perf-copy b,
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-perf-copy em { font-size: .52rem; }
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-kpi > span,
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-kpi small { font-size: .44rem; }
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-kpi strong { font-size: .72rem; }
  body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions button { font-size: .47rem; }
}

/* ==========================================================================
   STAGE 7 — STEP 6 ONLY
   Edit mode: remove the ••• overflow and keep every manager control in one row.
   Locked mode is unchanged.
   ========================================================================== */

/* No overflow button/menu in edit mode. */

/* Restore the real Clear + Zones buttons that Stage 3 hid. */
body:not(.locked-mode) header .btn-group button[onclick="clearRosterBoard()"],
body:not(.locked-mode) header .btn-group button[onclick*="settings-modal"] {
  display: flex !important;
  font-size: .61rem;
  min-width: auto;
}

body:not(.locked-mode) header .btn-group button[onclick="clearRosterBoard()"]::after {
  content: none;
}

/* Keep every edit action on ONE line. */
body:not(.locked-mode) header {
  flex-wrap: nowrap;

  gap: 8px;
}

body:not(.locked-mode) header .btn-group {

  align-items: stretch;

  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

body:not(.locked-mode) header .btn-group::-webkit-scrollbar {
  display: none;
}

/* Compact all manager buttons consistently so the row fits on laptop/iPad. */
body:not(.locked-mode) header .btn-group button {

  border-radius: 8px !important;

}

/* Natural order: operational controls, then editing tools. */

body:not(.locked-mode) header #stage12-now-edit { order: 2; }

body:not(.locked-mode) header #alert-toggle-btn { order: 5; }
body:not(.locked-mode) header #lock-btn { order: 6; }
body:not(.locked-mode) header .btn-group button[onclick="clearRosterBoard()"] { order: 7; }
body:not(.locked-mode) header #zone-undo-btn { order: 8; }
body:not(.locked-mode) header #zone-redo-btn { order: 9; }
body:not(.locked-mode) header .btn-group button[onclick*="settings-modal"] { order: 10; }
body:not(.locked-mode) header .btn-group button[onclick="addNewRow()"] { order: 11; }
body:not(.locked-mode) header .pdf-btn { order: 12; }
body:not(.locked-mode) header #scan-roster-btn { order: 13; }
body:not(.locked-mode) header #edit-time-btn { order: 14; }
body:not(.locked-mode) header #edit-range-btn { order: 15; }
body:not(.locked-mode) header #edit-shape-btn { order: 16; }
body:not(.locked-mode) header #edit-dual-btn { order: 17; }
body:not(.locked-mode) header #sort-start-btn { order: 14; }
body:not(.locked-mode) header #generate-lunches-btn { order: 14; }

/* The original toolbar copies remain hidden; their functions still exist. */
body:not(.locked-mode) .zone-legend > div:last-child:not(#zone-badges-container) {
  display: none !important;
}

/* Slightly tighter at common laptop widths. */
@media (max-width: 1500px) {
  body:not(.locked-mode) header .btn-group {
    gap: 4px;
  }

  body:not(.locked-mode) header .btn-group button {
    height: 48px;
    min-height: 48px;
    padding: 0 6px !important;
    font-size: .56rem;
  }
}

/* ==========================================================================
   STAGE 7 — STEP 7C
   SIMPLE CURRENT-TIME HEADER
   No overlays, no vertical lines, no pseudo-elements crossing table sections.
   ========================================================================== */

#roster-table .hour-header.now-hour-simple {
  background: linear-gradient(180deg, #425c6f 0%, #304556 100%) !important;
  box-shadow: none !important;
}

#roster-table .hour-header.now-hour-simple .now-hour-main {
  display: block;
  font-size: .74rem;
  line-height: 1;
  font-weight: 900;
  color: var(--text);
}

#roster-table .hour-header.now-hour-simple .now-hour-time {
  display: block;
  margin-top: 3px;
  font-size: .51rem;
  line-height: 1;
  font-weight: 900;
  color: #67d3ff;
  text-shadow: 0 0 8px color-mix(in srgb, var(--accent) 20%, transparent);
  letter-spacing: .03em;
  white-space: nowrap;
}

/* Stage 7 Step 7G — stop zoning text bleeding through the current-time header. */
#roster-table .hour-header.now-hour-simple {
  opacity: 1;
  background-clip: padding-box !important;
  z-index: 70 !important;
  overflow: hidden;
}

/* ==========================================================================
   STAGE 8 — ZONE RIBBON POLISH ONLY
   Reduce the dark gaps between zoning blocks without turning them into
   completely square solid rectangles.
   ========================================================================== */

#roster-table td.slot-zone {
  padding: 1px 0 !important;
}

#roster-table .zone-ribbon {
  height: 34px;

}

/* Adjacent zoning reads almost continuously, but the 3px corners and
   hairline inset still separate individual assignments. */
#roster-table td.slot-zone + td.slot-zone {
  padding-left: 0 !important;
}

/* Keep the first/last edges visually soft rather than fully square. */
#roster-table td.slot-zone:first-child .zone-ribbon,
#roster-table td.slot-zone:last-child .zone-ribbon {
  border-radius: 3px !important;
}

/* ==========================================================================
   STAGE 9 — RESPONSIVE ZONE TOOLBAR
   Keep zones on one compact row for as long as possible.
   Only switch to two equal rows when they genuinely no longer fit.
   ========================================================================== */

body:not(.locked-mode) .zone-legend {
  min-height: 0;
  margin-bottom: 7px;
  overflow: visible;
}

body:not(.locked-mode) #zone-badges-container {
  display: grid !important;
  grid-template-columns: repeat(var(--zone-count, 1), minmax(0, 1fr));
  grid-auto-rows: 40px;
  gap: 5px;
  width: 100% !important;
  max-height: none !important;
  overflow: visible;
}

body:not(.locked-mode) #zone-badges-container > .zone-badge {
  width: 100% !important;
  min-width: 0;

  padding: 0 7px 0 34px !important;
  margin: 0;
  border-radius: 7px !important;
  font-size: clamp(.58rem, .72vw, .72rem);
  overflow: hidden;
  text-overflow: ellipsis;
}

body:not(.locked-mode) #zone-badges-container > .zone-badge::before {
  left: 7px !important;
  width: 21px !important;
  height: 21px;
}

/* Two-row mode: equal-width buttons, same height as the normal row. */
body:not(.locked-mode) #zone-badges-container.zone-toolbar-two-rows {
  grid-template-columns: repeat(var(--zone-columns, 5), minmax(0, 1fr));
  grid-auto-rows: 40px;
}

/* Selected zone should be clear without growing and shifting the toolbar. */
body:not(.locked-mode) #zone-badges-container > .zone-badge.selected {
  transform: none;
  border-color: color-mix(in srgb, var(--text) 92%, transparent) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--text) 30%, transparent),
    0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent) !important;
}

/* Keep Lunch / custom zone labels readable even when the row gets dense. */
body:not(.locked-mode) #zone-badges-container > .zone-badge span,
body:not(.locked-mode) #zone-badges-container > .zone-badge {
  white-space: nowrap;
}

/* Locked mode behaviour remains whatever the existing working build already uses. */

/* ==========================================================================
   STAGE 9B — RESTORE CLEAR ZONE
   The existing ERASE zone logic already removes individual zoning cells.
   This only makes that existing tool visible again in edit mode.
   ========================================================================== */

/* Clear uses its zone ID rather than its position in the palette. */
body:not(.locked-mode) #zone-badges-container > .zone-badge[data-zone="ERASE"] {
  display: flex !important;
}

/* Keep the same plain-circle visual language as the other zone buttons. */
body:not(.locked-mode) #zone-badges-container > .zone-badge[data-zone="ERASE"]::before {
  content: "";
  background: color-mix(in srgb, var(--text) 16%, transparent) !important;
}

/* Make Clear visually neutral so it doesn't compete with actual zoning colours. */
body:not(.locked-mode) #zone-badges-container > .zone-badge[data-zone="ERASE"] {
  background: var(--surface-3) !important;
  color: var(--text-2) !important;
  border-color: rgba(148,163,184,.35) !important;
}

body:not(.locked-mode) #zone-badges-container > .zone-badge[data-zone="ERASE"].selected {
  border-color: var(--text) !important;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--text) 24%, transparent),
    0 0 0 2px rgba(148,163,184,.24) !important;
}

/* ==========================================================================
   STAGE 10 — ZONE UNDO / REDO
   Only zoning edits are tracked. No Firebase schema or roster structure changes.
   ========================================================================== */
body:not(.locked-mode) header .zone-history-btn:disabled {
  opacity: .34 !important;
  cursor: default !important;
  filter: saturate(.55);
}

body:not(.locked-mode) header .zone-history-btn:not(:disabled) {
  background: var(--surface-3) !important;
}

body:not(.locked-mode) header .zone-history-btn:not(:disabled):hover {
  background: var(--surface-4) !important;
}

/* ==========================================================================
   STAGE 11 — DISTINGUISH CLEAR ZONE FROM RESET DAY
   "Clear" in the zone toolbar erases individual zoning.
   "Reset Day" is the destructive whole-roster action.
   ========================================================================== */

body:not(.locked-mode) header .danger-day-reset {
  background: rgba(127,29,29,.28) !important;
  border-color: rgba(248,113,113,.38) !important;
  color: #fecaca !important;
}

body:not(.locked-mode) header .danger-day-reset:hover {
  background: rgba(153,27,27,.46) !important;
  border-color: rgba(248,113,113,.62) !important;
  color: #fff1f2 !important;
}

/* ==========================================================================
   STAGE 12 — JUMP TO NOW
   Navigation only. No roster data, zoning or Firebase changes.
   ========================================================================== */

/* Locked header gains one compact operational action. */

/* Keep "Now" useful but visually quieter than Unlock. */
.stage12-now-btn {
  white-space: nowrap;
}

.stage12-now-btn:disabled {
  opacity: .30 !important;
  cursor: default !important;
  filter: saturate(.45);
}

body:not(.locked-mode) header #stage12-now-edit:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent) !important;
  color: var(--accent-text) !important;
}

/* Tiny confirmation pulse confined to the active header cell. */
#roster-table .now-hour-simple.stage12-now-pulse {
  animation: stage12NowPulse calc(var(--m-flash) * .7) var(--e-std) 1;
}

@keyframes stage12NowPulse {
  0%   { filter: brightness(1); }
  45%  { filter: brightness(1.38); }
  100% { filter: brightness(1); }
}

/* ==========================================================================
   STAGE 14 — ROW READABILITY
   Subtle alternating row bands make it easier to track one person across the
   wide timeline, especially on iPad where hover is not available.
   No zoning colours or roster logic are changed.
   ========================================================================== */

/* Dark theme: extremely subtle alternating bands. */
body #roster-table tbody tr:nth-child(odd) td.slot-empty,
body #roster-table tbody tr:nth-child(odd) td.slot-zone {
  background-color: var(--bg) !important;
}

body #roster-table tbody tr:nth-child(even) td.slot-empty,
body #roster-table tbody tr:nth-child(even) td.slot-zone {
  background-color: var(--row-even) !important;
}

body #roster-table tbody tr:nth-child(odd) td.col-sticky-left {
  background: var(--row-a) !important;
  background-color: var(--row-a) !important;
}

body #roster-table tbody tr:nth-child(even) td.col-sticky-left {
  background: var(--row-b) !important;
  background-color: var(--row-b) !important;
}

/* A slightly clearer horizontal guide between staff rows. */
#roster-table tbody tr > td {
  border-bottom-color: rgba(100,116,139,.34) !important;
}

/* Preserve zone colours exactly; only the empty background beneath them bands. */
#roster-table .zone-ribbon {
  background-clip: padding-box !important;
}

/* Hover remains useful on Mac, but is restrained enough not to overpower zones. */
#roster-table tbody tr:hover td.slot-empty {
  background-color: color-mix(in srgb, var(--accent) 10%, transparent) !important;
}

#roster-table tbody tr:hover td.col-sticky-left {
  background: var(--row-hover) !important;
  background-color: var(--row-hover) !important;
}

/* ==========================================================================
   STAGE 15 — CURRENT ZONE INDICATOR
   Small frozen-column cue showing each person's zone at the current time.
   Keeps working even when the timeline is horizontally scrolled elsewhere.
   ========================================================================== */

#roster-table td.staff-name.stage15-active-now::before {
  content: none;
  display: inline-block;
  width: 8px;
  height: 8px;
  min-width: 8px;
  margin-right: 6px;
  border-radius: 999px;
  vertical-align: 1px;
  background: var(--stage15-now-dot-bg, var(--accent));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--text) 42%, transparent),
    0 0 6px rgba(0,0,0,.28);
}

#roster-table td.staff-name.stage15-on-lunch::before {
  background: #eab308 !important;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--text) 36%, transparent),
    0 0 5px rgba(234,179,8,.26);
}

/* Keep names compact; indicator must not increase row height. */
#roster-table td.staff-name.stage15-active-now {
  white-space: nowrap;
}

/* ==========================================================================
   STAGE 16 — LIVE STAFF STATUS
   Compact live headcount under the existing Staff KPI.
   ========================================================================== */

#stage16-staff-live {
  color: var(--text-muted) !important;
  font-weight: 750;
  white-space: nowrap;
}

body:is(.locked-mode, :not(.locked-mode)) #stage16-staff-live {
  margin-top: 3px;
  font-size: .46rem;
  line-height: 1;
}

#stage16-staff-live.has-live-staff {
  color: #8fe6c0 !important;
}

#stage16-staff-live.has-lunch {
  color: var(--text-2) !important;
}

/* ==========================================================================
   STAGE 17 — REMOVE BOTTOM KPI TRACKER FROM NORMAL LAYOUT
   Keep its DOM/data-entry logic intact because the top Performance button
   still uses it as a popover and the top KPI cards read from its values.
   ========================================================================== */

/* No longer occupies space beneath the zoning roster. */
.kpi-container:not(.stage1b-popover) {
  display: none !important;
  margin: 0;
}

/* Performance button can still open the existing tracker when needed. */

/* ==========================================================================
   STAGE 18B — PERFORMANCE DRAWER
   Replaces the small floating KPI popover with one deliberate, wide panel
   beneath the top operational header. KPI cards themselves remain display-only.
   ========================================================================== */

.kpi-container.stage1b-popover {
  display: block !important;
  position: fixed;
  z-index: 520;
  left: 12px !important;
  right: 12px;
  width: auto !important;
  max-width: none;
  max-height: var(--stage18b-max-h, 420px) !important;
  overflow: auto;
  margin: 0;
  padding: 10px !important;
  border: 1px solid var(--edge) !important;
  border-radius: 10px !important;
  background: var(--card-bg) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.48) !important;
}

.kpi-container.stage1b-popover .kpi-card {
  border: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Keep the tracker header visible while scrolling through the drawer. */
.kpi-container.stage1b-popover .kpi-header {
  position: sticky;
  top: -10px !important;
  z-index: 8;
  margin: 0 0 8px;
  padding: 10px 4px 9px !important;
  background: var(--card-bg) !important;
  border-bottom: 1px solid rgba(74,113,145,.34) !important;
}

/* Give the wide hourly table room; scroll only if a smaller iPad needs it. */
.kpi-container.stage1b-popover .kpi-table-wrapper {
  overflow-x: auto;
  overflow-y: visible;
  border-radius: 7px !important;
}

.kpi-container.stage1b-popover .kpi-table {
  min-width: 930px;
}

/* Close control is intentionally small and separate from KPI editing. */
#stage18b-performance-close {
  flex: 0 0 auto;
  width: 28px !important;
  min-width: 28px;
  height: 28px;
  padding: 0 !important;
  border-radius: 6px !important;
  background: #263442 !important;
  border: 1px solid #516577 !important;
  color: var(--text-2) !important;
  font-size: 1rem;
  line-height: 1;
}

/* Active Performance state. */
#stage1b-performance-btn.stage18b-open {
  background: linear-gradient(180deg, #293f53 0%, #1e3345 100%) !important;
  border-color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 16%, transparent) !important;
}

/* The top KPI cards remain information only, not mystery buttons. */
.stage1b-kpi {
  cursor: default;
}

/* On compact iPads, use almost the full viewport height available below header. */
@media (max-width: 900px) {
  .kpi-container.stage1b-popover {
    left: 8px !important;
    right: 8px;
    padding: 8px !important;
    border-radius: 8px !important;
  }

  .kpi-container.stage1b-popover .kpi-header {
    top: -8px !important;
  }
}

/* ==========================================================================
   STAGE 19 — QUICK DATE NAVIGATION
   Previous / Today / Next controls beside the existing date picker.
   ========================================================================== */

.stage19-date-nav {
  display: flex !important;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin-top: 5px;
}

.stage19-date-nav .stage1b-date-button {
  margin-top: 0;
  min-width: 0;
  max-width: 100%;
}

.stage19-date-step,
.stage19-today {
  flex: 0 0 auto;
  height: 24px;
  min-height: 24px;
  padding: 0 !important;
  border: 1px solid rgba(109,130,149,.62) !important;
  border-radius: 6px !important;
  background: rgba(33,47,60,.76) !important;
  color: var(--text-2) !important;
}

.stage19-date-step {
  width: 24px !important;
  min-width: 24px;
  font-size: 1rem;
  font-weight: 800;
}

.stage19-today {
  padding: 0 7px !important;
  font-size: .60rem;
  font-weight: 800;
}

.stage19-date-step:hover,
.stage19-today:hover {
  background: #2e4253 !important;
  border-color: color-mix(in srgb, var(--accent) 52%, transparent) !important;
  color: var(--text) !important;
}

/* Highlight Today only when the selected roster date is not today. */
.stage19-today.stage19-away-from-today {
  border-color: color-mix(in srgb, var(--accent) 50%, transparent) !important;
  color: var(--accent-text) !important;
}

/* Locked header is only 64px high, so keep the controls very compact. */
body:is(.locked-mode, :not(.locked-mode)) .stage19-date-nav {
  margin-top: 4px;
  gap: 3px;
}

body:is(.locked-mode, :not(.locked-mode)) .stage19-date-step,
body:is(.locked-mode, :not(.locked-mode)) .stage19-today {
  height: 21px;
  min-height: 21px;
}

body:is(.locked-mode, :not(.locked-mode)) .stage19-date-step {
  width: 21px !important;
  min-width: 21px;
  font-size: .88rem;
}

body:is(.locked-mode, :not(.locked-mode)) .stage19-today {
  padding: 0 5px !important;
  font-size: .52rem;
}

/* If horizontal space becomes extremely tight, preserve the useful arrows
   and date picker while shortening Today to T. */
@media (max-width: 900px) {
  body:is(.locked-mode, :not(.locked-mode)) .stage19-today {
    width: 22px !important;
    min-width: 22px;
    overflow: hidden;
    font-size: 0;
  }

  body:is(.locked-mode, :not(.locked-mode)) .stage19-today::after {
    content: "T";
    font-size: .54rem;
    font-weight: 850;
  }
}

/* ==========================================================================
   STAGE 20 — ZONING ZOOM CONTROLS
   Explicit − / percentage / + controls for the existing grid zoom system.
   ========================================================================== */

/* One compact cell in the locked operational header. */

/* Edit mode toolbar: same height as surrounding controls, but much denser. */

/* Full-screen view controls. */

/* Slightly tighter on iPad Mini sized layouts. */
@media (max-width: 900px) {

  body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions {
    gap: 4px;
  }
}

/* ==========================================================================
   STAGE 20B — LOCKED HEADER ACTIONS FIX
   The zoom controls made View / Now / Light / Unlock too cramped.
   Give the actions area enough real width and lay it out with flex instead
   of squeezing five controls into the old 205px grid cell.
   ========================================================================== */

/* Desktop / MacBook */
body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar {
  grid-template-columns:
    205px
    minmax(180px, 1fr)
    210px
    150px
    repeat(4, 76px)
    74px
    320px;
}

body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions {

  align-items: stretch;

}

body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions > button {

  padding: 0 6px !important;
}

/* Keep each zoom segment contained inside the shared zoom capsule. */

/* MacBook / iPad landscape */
@media (max-width: 1400px) {
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar {
    grid-template-columns:
      165px
      minmax(155px, 1fr)
      170px
      130px
      repeat(4, 64px)
      60px
      270px;
  }

  body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions {
    gap: 4px;
    padding-left: 5px !important;
  }

  body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions > button {
    min-width: 36px;
    padding: 0 4px !important;
    font-size: .50rem;
  }

}

/* iPad Mini landscape */
@media (max-width: 1200px) {
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar {
    grid-template-columns:
      145px
      minmax(130px, 1fr)
      140px
      112px
      repeat(4, 54px)
      54px
      238px;
    gap: 3px;
  }

  body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions {
    gap: 3px;
    padding-left: 4px !important;
  }

  body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions > button {
    min-width: 31px;
    padding: 0 3px !important;
    font-size: .45rem;
  }

}

/* ==========================================================================
   STAGE 21 — SHORT SHIFT BREAK POLICY
   Shifts under 6h: one 10-minute break only.
   ========================================================================== */

#roster-table .breaks-cell.short-shift-breaks {
  grid-template-columns: 1fr;
  gap: 0;
}

#roster-table .breaks-cell.short-shift-breaks .short-shift-only {
  width: 100% !important;
  min-width: 0;
  max-width: none;
  grid-column: 1 / -1;
  border-color: rgba(148,163,184,.28) !important;
}

#roster-table .breaks-cell.short-shift-breaks .short-shift-only:not(.done):not(.active):not(.running) {
  background: rgba(75,85,99,.34) !important;
  color: var(--text-2) !important;
}

/* ==========================================================================
   STAGE 22 — RESPONSIVE LAYOUT OVERHAUL
   Goal: stop shrinking everything into unreadable fixed-width layouts.
   The roster keeps real horizontal scrolling; the surrounding UI reflows
   cleanly depending on the available width/aspect ratio.
   ========================================================================== */

/* ---------- 1. Stable responsive frozen-column geometry ---------- */
#roster-table {
  --s22-name-w: clamp(108px, 8.2vw, 124px);
  --s22-shift-w: clamp(82px, 6.2vw, 92px);
  --s22-breaks-w: clamp(136px, 10.4vw, 158px);
  --s22-del-w: 44px;
}

#roster-table .col-name {
  width: var(--s22-name-w) !important;
  min-width: var(--s22-name-w);
  max-width: var(--s22-name-w);
}

#roster-table .col-shift {
  width: var(--s22-shift-w) !important;
  min-width: var(--s22-shift-w);
  max-width: var(--s22-shift-w);
}

#roster-table .col-breaks {
  width: var(--s22-breaks-w) !important;
  min-width: var(--s22-breaks-w);
  max-width: var(--s22-breaks-w);
}

#roster-table .col-del {
  width: var(--s22-del-w) !important;
  min-width: var(--s22-del-w);
  max-width: var(--s22-del-w);
}

/* One source of truth for every sticky left offset. */
#roster-table .col-sticky-left.col-name {
  left: 0 !important;
}

#roster-table .col-sticky-left.col-shift {
  left: var(--s22-name-w) !important;
}

#roster-table .col-sticky-left.col-breaks {
  left: calc(var(--s22-name-w) + var(--s22-shift-w)) !important;
}

#roster-table .col-sticky-left.col-del {
  left: calc(
    var(--s22-name-w) +
    var(--s22-shift-w) +
    var(--s22-breaks-w)
  ) !important;
}

/* The roster is a scroll surface, never a page-width scaling target. */
#main-table-container,
.table-container {
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

/* ---------- 2. Locked header: wide = one row ---------- */
body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar {
  height: auto;
  min-height: 72px;
  grid-template-areas:
    "brand title leads perf sales splh upt aov staff actions";
  grid-template-columns:
    minmax(165px, 1.10fr)
    minmax(185px, 1.32fr)
    minmax(170px, 1.18fr)
    minmax(130px, .88fr)
    repeat(4, minmax(68px, .52fr))
    minmax(66px, .48fr)
    minmax(250px, 1.65fr);
  gap: 5px;
  align-items: center;
  padding: 4px 6px !important;
}

/* The old fixed card heights were a major cause of aspect-ratio crunching. */
body:is(.locked-mode, :not(.locked-mode)) .stage1b-brand,
body:is(.locked-mode, :not(.locked-mode)) .stage1b-title {
  height: 62px;
}

body:is(.locked-mode, :not(.locked-mode)) #stage7-leads,
body:is(.locked-mode, :not(.locked-mode)) .stage7-lead-card {
  height: 54px;
  min-height: 54px;
}

body:is(.locked-mode, :not(.locked-mode)) .stage1b-performance,
body:is(.locked-mode, :not(.locked-mode)) .stage1b-kpi {
  height: 60px;
  min-height: 60px;
}

body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions {
  display: flex !important;
  grid-template-columns: none;
  width: 100% !important;
  min-width: 0;
  height: 48px;
  gap: 4px;
  padding-left: 5px !important;
  overflow: visible;
}

body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions > button {
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  padding-inline: 5px !important;
}

/* ---------- 3. Medium landscape / normal iPad: two clean rows ---------- */
@media (max-width: 1449px) {
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar {
    grid-template-areas:
      "brand brand title title title leads leads leads perf perf perf perf"
      "sales splh upt aov staff actions actions actions actions actions actions actions";
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto;
    row-gap: 5px;
    column-gap: 5px;
    min-height: 122px;
    padding: 5px !important;
  }

  body:is(.locked-mode, :not(.locked-mode)) .stage1b-brand,
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-title {
    height: 54px;
  }

  body:is(.locked-mode, :not(.locked-mode)) #stage7-leads,
  body:is(.locked-mode, :not(.locked-mode)) .stage7-lead-card {
    height: 52px;
    min-height: 52px;
  }

  body:is(.locked-mode, :not(.locked-mode)) .stage1b-performance,
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-kpi {
    height: 52px;
    min-height: 52px;
  }

  body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions {
    height: 52px;
    border-left: 0;
    padding-left: 0 !important;
  }

  body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions > button {
    height: 52px;
    min-height: 52px;
    font-size: .56rem;
  }

  body:is(.locked-mode, :not(.locked-mode)) .stage1b-title > strong {
    white-space: normal;
  }
}

/* ---------- 4. Compact / portrait: three rows, readable not microscopic ---------- */
@media (max-width: 949px), (max-aspect-ratio: 1/1) {
  body {
    padding: 7px !important;
  }

  body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar {
    grid-template-areas:
      "brand brand brand brand title title title title title title title title"
      "leads leads leads leads perf perf perf perf staff staff staff staff"
      "sales sales splh splh upt upt aov aov actions actions actions actions";
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    min-height: 174px;
    gap: 4px;
    padding: 4px !important;
  }

  body:is(.locked-mode, :not(.locked-mode)) .stage1b-brand,
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-title {
    height: 50px;
  }

  body:is(.locked-mode, :not(.locked-mode)) #stage7-leads,
  body:is(.locked-mode, :not(.locked-mode)) .stage7-lead-card,
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-performance,
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-kpi {
    height: 50px;
    min-height: 50px;
  }

  /* Manual width-zoom controls are hidden at compact sizes because they were
     the biggest source of header crowding. Pinch-to-zoom remains untouched. */

  body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions {
    gap: 3px;
  }

  body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions > button {
    height: 50px;
    min-height: 50px;
    padding-inline: 3px !important;
    font-size: .52rem;
  }

  body:is(.locked-mode, :not(.locked-mode)) .stage1b-symbol {
    width: 43px !important;
    flex-basis: 43px;
    height: 40px;
  }

  body:is(.locked-mode, :not(.locked-mode)) .stage1b-symbol img {
    width: 39px !important;
    height: 32px;
  }

  body:is(.locked-mode, :not(.locked-mode)) .stage1b-brand-copy {
    padding-left: 7px !important;
  }

  body:is(.locked-mode, :not(.locked-mode)) .stage1b-brand-copy strong {
    font-size: .80rem;
  }

  body:is(.locked-mode, :not(.locked-mode)) .stage1b-brand-copy span,
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-title > strong {
    font-size: .54rem;
  }

  body:is(.locked-mode, :not(.locked-mode)) .stage1b-title > strong {
    line-height: 1.15;
  }

  body:is(.locked-mode, :not(.locked-mode)) .stage19-date-nav {
    width: 100% !important;
    margin-top: 3px;
  }

  body:is(.locked-mode, :not(.locked-mode)) .stage19-date-nav .stage1b-date-button {
    flex: 1 1 auto;
  }

  #roster-table {
    --s22-name-w: 108px;
    --s22-shift-w: 82px;
    --s22-breaks-w: 132px;
    --s22-del-w: 40px;
  }
}

/* Very narrow portrait: actions get their own fourth row rather than squeeze. */
@media (max-width: 700px) {
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar {
    grid-template-areas:
      "brand brand brand brand title title title title title title title title"
      "leads leads leads leads perf perf perf perf staff staff staff staff"
      "sales sales sales splh splh splh upt upt upt aov aov aov"
      "actions actions actions actions actions actions actions actions actions actions actions actions";
    min-height: 226px;
  }

  body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions > button {
    font-size: .58rem;
  }

  #roster-table {
    --s22-name-w: 102px;
    --s22-shift-w: 78px;
    --s22-breaks-w: 126px;
    --s22-del-w: 38px;
  }
}

/* ---------- 5. Low-height landscape devices: save vertical space ---------- */
@media (max-height: 720px) and (orientation: landscape) {
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar {
    row-gap: 3px;
    padding-block: 3px !important;
  }

  body:is(.locked-mode, :not(.locked-mode)) .stage1b-brand,
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-title,
  body:is(.locked-mode, :not(.locked-mode)) #stage7-leads,
  body:is(.locked-mode, :not(.locked-mode)) .stage7-lead-card,
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-performance,
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-kpi,
  body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions,
  body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions > button {
    height: 46px;
    min-height: 46px;
  }

  body:is(.locked-mode, :not(.locked-mode)) .stage7-lead-card {
    padding-block: 5px !important;
  }

  body:is(.locked-mode, :not(.locked-mode)) .stage1b-kpi strong {
    font-size: .78rem;
  }
}

/* ---------- 6. Edit mode: one line when roomy, two bands when not ---------- */
@media (max-width: 1349px) {
  body:not(.locked-mode) header {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 7px !important;
  }

  body:not(.locked-mode) header .meta-group {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  body:not(.locked-mode) header .meta-item {
    min-width: 0;
  }

  body:not(.locked-mode) header .meta-item input {
    width: 100% !important;
  }

  body:not(.locked-mode) header .btn-group {

    justify-content: flex-start;
    overflow-x: auto;

  }

}

@media (max-width: 800px) {
  body:not(.locked-mode) header .meta-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Same reason as locked mode: do not spend scarce toolbar width on the
     legacy zoom capsule. Pinch support still exists in the roster itself. */

}

/* ---------- 7. Zone selector wraps by real available width ---------- */
body:not(.locked-mode) #zone-badges-container,
body:not(.locked-mode) #zone-badges-container.zone-toolbar-two-rows {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
  grid-auto-rows: 38px;
  gap: 5px;
  width: 100% !important;
}

body:not(.locked-mode) #zone-badges-container > .zone-badge {
  height: 38px;
}

/* ---------- 8. Full-screen view stays genuinely full-screen ---------- */

/* Hide the bulky legacy zoom capsule on small full-screen layouts. */

/* ---------- 9. Keep text from forcing cards wider than their grid area ---------- */
body:is(.locked-mode, :not(.locked-mode)) .stage1b-brand-copy,
body:is(.locked-mode, :not(.locked-mode)) .stage1b-title,
body:is(.locked-mode, :not(.locked-mode)) .stage7-lead-card,
body:is(.locked-mode, :not(.locked-mode)) .stage1b-performance,
body:is(.locked-mode, :not(.locked-mode)) .stage1b-kpi {
  min-width: 0;
}

body:is(.locked-mode, :not(.locked-mode)) .stage7-lead-card strong,
body:is(.locked-mode, :not(.locked-mode)) .stage1b-kpi strong,
body:is(.locked-mode, :not(.locked-mode)) .stage1b-kpi small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ==========================================================================
   STAGE 24 — iPAD MINI USABILITY + BREAK FIT
   ========================================================================== */

/* Break internals must fit the actual Breaks column instead of using fixed
   pixel tracks wider than the column itself. */
#roster-table .breaks-cell,
#roster-table .breaks-head small {
  width: 100% !important;
  min-width: 0;
  grid-template-columns:
    minmax(0, .82fr)
    minmax(0, 1.18fr)
    minmax(0, .82fr);
  gap: 2px;
}

#roster-table .break-slot {
  width: 100% !important;
  min-width: 0;
  max-width: 100%;
  padding-left: 1px !important;
  padding-right: 1px !important;
  overflow: hidden;
  text-overflow: ellipsis;
}

#roster-table .break-slot span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#roster-table .breaks-cell.short-shift-breaks {
  grid-template-columns: minmax(0, 1fr);
}

/* Compact timeline navigator: large screens keep the cleaner desktop UI. */

/* iPad Mini landscape / similar compact widths. */
@media (max-width: 1180px) {
  #roster-table {
    --s22-name-w: 100px;
    --s22-shift-w: 82px;
    --s22-breaks-w: 120px;
    --s22-del-w: 38px;
  }

  #roster-table .break-slot {
    font-size: .52rem;
    border-radius: 5px !important;
  }

  #roster-table .break-slot.done span {
    font-size: .78rem;
  }

  #roster-table .breaks-head small {
    font-size: .46rem;
  }

  #main-table-container {
    touch-action: pan-x pan-y;
    scroll-behavior: smooth;
  }
}

/* iPad Mini portrait / narrow split-screen. */
@media (max-width: 760px) {
  #roster-table {
    --s22-name-w: 94px;
    --s22-shift-w: 76px;
    --s22-breaks-w: 114px;
    --s22-del-w: 36px;
  }

  #roster-table .break-slot {
    font-size: .48rem;
  }

}

/* ==========================================================================
   STAGE 26 — ZOOM REMOVED
   Fixed roster scale only. No zoom UI and no pinch/trackpad zoom interception.
   ========================================================================== */

/* ==========================================================================
   STAGE 27 — EDIT MODE SPACE + VIEW MODE FIX
   No zoning colours, elapsed gradient, roster data, break logic or KPI logic
   are changed in this stage.
   ========================================================================== */

/* --------------------------------------------------------------------------
   EDIT MODE
   Stop forcing every action into one clipped horizontal strip.
   On narrower screens the controls use the available width in two clean rows.
   -------------------------------------------------------------------------- */
@media (max-width: 1349px) {
  body:not(.locked-mode) header .btn-group {
    display: grid !important;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-auto-rows: 40px;
    gap: 4px;
    width: 100% !important;
    overflow: visible;
    padding-bottom: 0 !important;
  }

  body:not(.locked-mode) header .btn-group button {
    width: 100% !important;
    min-width: 0;
    height: 40px;
    min-height: 40px;
    padding: 0 4px !important;
    justify-content: center;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: .54rem;
  }
}

/* iPad Mini / compact portrait gets 4 columns rather than tiny/cut buttons. */
@media (max-width: 820px) {
  body:not(.locked-mode) header .btn-group {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 38px;
  }

}

/* Keep the zone palette directly below the edit controls and let it use all
   available width. No zone appearance/gradient overrides are added here. */
body:not(.locked-mode) .zone-legend {
  min-width: 0;
  width: 100% !important;
}

/* --------------------------------------------------------------------------
   VIEW MODE
   Make it a clean roster-only canvas again. Controls live at the bottom-right
   instead of covering the time header.
   -------------------------------------------------------------------------- */

/* Leave a little breathing room above the horizontal scrollbar/control pill. */

/* ==========================================================================
   STAGE 28B — REFINED ZONES
   Appearance only. Built from Stage 27, NOT the rejected Stage 28.
   Keeps the existing elapsed-grey treatment and all zoning behaviour.
   ========================================================================== */

/*
  The screenshot felt too flat and segmented. Keep the original zone height
  and colour treatment, but soften the typography and borders.
*/
#roster-table .zone-ribbon {
  border-radius: 4px !important;
  border: 1px solid rgba(16,26,36, .38) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent),
    0 1px 2px rgba(0,0,0,.20) !important;
}

#roster-table .zone-ribbon,
#roster-table .zone-ribbon span,
#roster-table .zone-ribbon strong {
  font-weight: 600;
  letter-spacing: .005em !important;
  text-shadow: none;
}

/*
  Hide quarter-hour seams only while they pass through a painted zone.
  This does not cover the zone with a new pseudo-element, so the elapsed
  grey gradient remains exactly the existing implementation.
*/
#roster-table td.slot-zone {
  border-right-color: transparent;
}

/* Restore a clear boundary at the end of a painted run. */
#roster-table td.slot-zone + td:not(.slot-zone) {
  border-left-color: var(--grid, var(--edge));
}

/* Avoid the hover state making zones look like raised buttons. */
#roster-table tbody tr:hover .zone-ribbon {
  transform: none !important;
  filter: none !important;
}

/* Keep dual zones visually simple and aligned. */
#roster-table .zone-ribbon > div {
  box-shadow: none !important;
}

/* ==========================================================================
   STAGE 29B — SAFE EDIT MODE WRAP
   Built from approved Stage 28B. No header restructuring.
   Only lets the existing edit controls wrap instead of clipping.
   ========================================================================== */

body:not(.locked-mode) header {
  height: auto;
  min-height: 0;
  overflow: visible;
  align-items: center;
}

/* Preserve the original lead/meta layout. */
body:not(.locked-mode) header .meta-group {
  flex: 0 1 auto;
  min-width: 0;
}

/* Preserve every existing button and its order; simply allow a second line. */
body:not(.locked-mode) header .btn-group {
  display: flex !important;
  flex: 1 1 620px;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
  width: auto !important;
  overflow: visible;
  padding: 0 !important;
}

body:not(.locked-mode) header .btn-group button {
  flex: 0 0 auto;
  width: auto !important;
  min-width: 72px !important;
  height: 34px;
  min-height: 34px;
  padding: 0 8px !important;
  margin: 0;
  white-space: nowrap;
  font-size: .54rem !important;
}

/* Give the most compact utility controls less width. */
body:not(.locked-mode) header #zone-undo-btn,
body:not(.locked-mode) header #zone-redo-btn {
  min-width: 62px;
}

/* At iPad widths, put the existing action group below the lead/meta group.
   This uses the empty horizontal space without moving individual controls. */
@media (max-width: 1180px) {
  body:not(.locked-mode) header {
    flex-wrap: wrap;
    gap: 5px;
  }

  body:not(.locked-mode) header .meta-group {
    flex: 1 1 100%;
    width: 100% !important;
  }

  body:not(.locked-mode) header .btn-group {
    flex: 1 1 100%;
    width: 100% !important;
    justify-content: flex-start;
  }

  body:not(.locked-mode) header .btn-group button {
    flex: 1 1 92px;
    min-width: 82px !important;
  }
}

/* iPad Mini: slightly smaller controls, still no clipping. */
@media (max-width: 820px) {
  body:not(.locked-mode) header .btn-group button {
    flex-basis: 84px;
    min-width: 76px !important;
    height: 32px;
    min-height: 32px;
    padding-inline: 5px !important;
    font-size: .51rem !important;
  }
}

/* Staff references and zone coverage status. The frozen grid widths are retained. */
.staff-current-zone { display:block; font-size:.58rem; line-height:1.3; color:var(--text-muted); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.staff-current-zone[hidden] { display:none !important; }
.roster-feature-hint { font-size:.8rem; line-height:1.5; color:var(--text-muted); margin:6px 0 10px; }
#coverage-status { display:flex; flex:0 0 auto; align-items:center; gap:8px; flex-wrap:wrap; padding:6px 12px; background:var(--card-bg); color:var(--text-muted); border:1px solid var(--card-border); border-radius:6px; font-size:.78rem; }
#coverage-summary { flex:1 1 220px; }
#coverage-status.has-coverage-gaps { border-color:var(--orange); }
#coverage-status.has-coverage-gaps #coverage-summary { color:var(--orange); }
#coverage-status button { height:26px; font-size:.72rem; }
.coverage-gap-line { padding:9px 0; border-bottom:1px solid var(--card-border); font-size:.85rem; }
.coverage-rule-row, .coverage-rule-head { display:grid; grid-template-columns:minmax(100px,1fr) 124px 124px 60px; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--card-border); font-size:.8rem; }
.coverage-rule-row label { display:flex; align-items:center; gap:4px; }
.coverage-rule-row input:not([type="checkbox"]) { width:100%; min-width:0; background:var(--input-bg); color:var(--text); border:1px solid var(--card-border); padding:5px; border-radius:4px; }
@media (max-width:480px) { .coverage-rule-row, .coverage-rule-head { grid-template-columns:minmax(60px,1fr) 78px 78px 42px; gap:4px; } }
@media print { #coverage-status { display:none !important; } }

/* Compact zone palette: one row, natural label widths, swipe for overflow. */
body:is(.locked-mode, :not(.locked-mode)) .zone-legend {
  min-height:0;
  height:auto;
  padding:0 !important;
  margin-bottom:3px;
}
body:is(.locked-mode, :not(.locked-mode)) #zone-badges-container,
body:is(.locked-mode, :not(.locked-mode)) #zone-badges-container.zone-toolbar-two-rows {
  display:flex !important;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:flex-start;
  gap:4px !important;
  width:100% !important;
  min-width:0;
  max-width:100%;
  height:auto;
  overflow-x:auto;
  overflow-y:hidden;
  padding:3px 2px 5px !important;
  box-sizing:border-box;
  scrollbar-width:thin;
  scrollbar-color:var(--card-border) transparent;
  -webkit-overflow-scrolling:touch;
}
body:is(.locked-mode, :not(.locked-mode)) #zone-badges-container > .zone-badge {
  flex:0 0 auto;
  width:auto !important;
  min-width:58px;
  max-width:none;
  height:34px;
  padding:0 8px 0 24px !important;
  margin:0;
  border-radius:6px !important;
  font-size:.68rem;
  font-weight:700;
  white-space:nowrap;
  overflow:visible;
  text-overflow:clip;
}
body:is(.locked-mode, :not(.locked-mode)) #zone-badges-container > .zone-badge::before {
  left:6px !important;
  width:13px !important;
  height:13px;
  font-size:.6rem;
}
@media (max-width:1100px) {
  body:is(.locked-mode, :not(.locked-mode)) #zone-badges-container > .zone-badge {
    height:32px;
    min-width:52px;
    padding-right:7px !important;
    font-size:.64rem;
  }
}

/* =========================================================================
   LIGHTER TYPE + ROUNDER BREAK SLOTS
   ========================================================================= */
body #roster-table td.staff-name, body #roster-table td.staff-name * { font-weight: 500; }
body #roster-table td.staff-name small { font-weight: 400; }
body #roster-table td.col-shift input { font-weight: 300; }
body #roster-table thead th, body #roster-table thead th * { font-weight: 500 !important; }
body #roster-table tfoot td { font-weight: 500; }
body #roster-table .zone-ribbon, body #roster-table .zone-ribbon * { font-weight: 500 !important; }
body:is(.locked-mode, :not(.locked-mode)) #zone-badges-container > .zone-badge { font-weight: 600; }
body #stage1b-sales, body #stage1b-splh, body #stage1b-upt, body #stage1b-aov, body #stage1b-staff-count { font-weight: 600; }
body .stage1b-title strong { font-weight: 600; }
body .stage1b-brand strong { font-weight: 700; }
body #stage7-top-actions button, body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions button { font-weight: 600; }
body #roster-table .break-slot, body #roster-table .break-slot span { font-weight: 600 !important; }
body #roster-table .break-slot { border-radius: 12px !important; }

/* =========================================================================
   ONE HEADER FOR EVERY MODE
   The locked-mode top bar now also applies when unlocked; the old edit header
   is retired and its buttons live in the Tools menu.
   ========================================================================= */
html body:is(.locked-mode, :not(.locked-mode)) header { display: none !important; }

#tools-btn { white-space: nowrap; }
#tools-menu {
  position: fixed; z-index: 9998; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px;
  padding: 10px 12px 12px; box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}
#tools-menu[hidden] { display: none; }
#tools-menu .tools-section + .tools-section { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--card-border); }
#tools-menu .tools-title { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted, var(--text-muted)); margin-bottom: 8px; }
#tools-menu .tools-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#tools-menu button {
  display: flex !important; align-items: center; justify-content: center; text-align: center; gap: 6px;
  min-height: 44px; padding: 6px 8px !important; width: 100%; margin: 0; order: 0;
  font-size: .78rem; font-weight: 500; white-space: normal; border-radius: 8px !important;
}
#tools-menu button:disabled { opacity: .4; }
#tools-menu #tools-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#tools-menu .meta-item { display: flex !important; flex-direction: column; gap: 3px; width: auto !important; min-width: 0; }
#tools-menu .meta-item:last-child { grid-column: 1 / -1; }
#tools-menu .meta-item input { width: 100% !important; height: 40px; font-size: .9rem; padding: 0 10px !important; }
#tools-menu .meta-item label { font-size: .66rem; }

/* The roster fills the space below the header in every mode (height is measured by app.js). */
body:is(.locked-mode, :not(.locked-mode)) #main-table-container {
  height: auto; max-height: var(--locked-roster-max-height, calc(100vh - 90px)) !important; overflow: auto; margin-bottom: 0;
}

/* =========================================================================
   ZONE SETTINGS DIALOG
   ========================================================================= */
#settings-modal.zone-modal { width: min(94vw, 640px); max-width: 640px; padding: 22px 22px 16px; border-radius: 12px; }
.zone-modal .zm-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.zone-modal .zm-head h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; margin: 0; }
.zone-modal .zm-head p { margin: 3px 0 0; font-size: .8rem; color: var(--text-muted); }
.zone-modal .zm-close {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--card-border); background: transparent;
  color: var(--text-muted); font-size: 1.4rem; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0;
}
.zone-modal .zm-close:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }

.zone-modal .zm-label, .zone-modal .zm-list-head { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.zone-modal .zm-new { padding: 14px; border: 1px solid var(--card-border); border-radius: 10px; background: color-mix(in srgb, var(--card-bg) 70%, var(--bg)); margin-bottom: 18px; }
.zone-modal .zm-new .zm-label { margin-bottom: 10px; }
.zone-modal .zm-new-grid { display: grid; grid-template-columns: 104px 1fr 1fr 44px 44px; gap: 8px; align-items: center; }
.zone-modal .zm-new-grid .zm-add { grid-column: 1 / -1; min-height: 44px; border-radius: 8px; }

.zone-modal .zm-list-head { display: flex; align-items: center; justify-content: space-between; padding: 0 52px 8px 0; }
.zone-modal .zm-cols { display: grid; grid-template-columns: 44px 44px; text-align: center; gap: 8px; margin-left: auto; }
#zone-editors { max-height: min(42vh, 360px); overflow-y: auto; margin: 0 -6px; padding: 0 6px; -webkit-overflow-scrolling: touch; }
.zone-modal .zm-row { display: grid; grid-template-columns: 104px 1fr 64px 44px 44px 44px; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent); }
.zone-modal .zm-row:first-child { border-top: 0; }

.zone-modal .zm-chip {
  display: block; min-height: 38px; line-height: 38px; padding: 0 10px; border-radius: 5px; text-align: center;
  font-size: .74rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: #06b6d4; color: #fff;
}
.zone-modal .zm-input {
  width: 100%; min-width: 0; height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--card-border);
  background: var(--input-bg, var(--card-bg)); color: var(--text); font-size: .9rem; font-weight: 400;
}
.zone-modal .zm-input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 0; border-color: var(--accent); }
.zone-modal .zm-input[readonly] { opacity: .65; cursor: default; }
.zone-modal .zm-input.zm-short { text-align: center; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.zone-modal .zm-code { text-transform: uppercase; }

.zone-modal .zm-color { display: grid; place-items: center; width: 44px; height: 44px; cursor: pointer; }
.zone-modal .zm-color input[type="color"] {
  -webkit-appearance: none; appearance: none; width: 32px; height: 32px; padding: 0; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--text) 25%, transparent); background: none; cursor: pointer;
}
.zone-modal .zm-color input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.zone-modal .zm-color input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.zone-modal .zm-color input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }

.zone-modal .zm-del { width: 44px; height: 44px; border-radius: 8px; border: 0; background: transparent; color: var(--text-muted); font-size: 1rem; cursor: pointer; display: grid; place-items: center; padding: 0; }
.zone-modal .zm-del:hover, .zone-modal .zm-del:active { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.zone-modal .zm-del-spacer { width: 44px; }

.zone-modal .zm-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--card-border); }
.zone-modal .zm-foot button { min-height: 44px; padding: 0 20px; border-radius: 8px; font-weight: 500; }

@media (max-width: 560px) {
  #settings-modal.zone-modal { padding: 16px 14px 12px; }
  .zone-modal .zm-new-grid { grid-template-columns: 1fr 1fr 44px 44px; }
  .zone-modal .zm-new-grid .zm-chip { grid-column: 1 / -1; }
  .zone-modal .zm-row { grid-template-columns: 76px 1fr 54px 44px 44px 44px; gap: 4px; }
  .zone-modal .zm-list-head { padding-right: 52px; }
}
.zone-modal .zm-code::placeholder { text-transform: none; }

/* =========================================================================
   PHONE MODE  (html.phone-mode is set by the script in <head>)
   Breaks / Floor / Team for supervisors replaces the roster grid (read-only until a manager signs in; see block 21).
   ========================================================================= */
#phone-view, #pv-switch { display: none; }
html.phone-mode body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar,
html.phone-mode body:is(.locked-mode, :not(.locked-mode)) .zone-legend.manager-only,
html.phone-mode body:is(.locked-mode, :not(.locked-mode)) .zone-legend,
html.phone-mode body:is(.locked-mode, :not(.locked-mode)) #coverage-status,
html.phone-mode body:is(.locked-mode, :not(.locked-mode)) #main-table-container,
html.phone-mode body:is(.locked-mode, :not(.locked-mode)) #tools-menu,
html.phone-mode body:is(.locked-mode, :not(.locked-mode)) #sync-status { display: none !important; }
html.phone-mode body { padding: 0 !important; }
html.phone-mode #phone-view { display: block; max-width: 560px; margin: 0 auto; padding: 0 14px calc(92px + env(safe-area-inset-bottom)); }
html.phone-eligible #pv-switch {
  display: block; position: fixed; left: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 9990;
  min-height: 40px; padding: 0 14px; border-radius: 20px; font-size: .8rem; font-weight: 500;
  background: var(--card-bg); color: var(--text); border: 1px solid var(--card-border);
}

#phone-view { font-size: 16px; color: var(--text); -webkit-text-size-adjust: 100%; }
#phone-view button { font-family: inherit; }
#phone-view .pv-chip { display: inline-block; padding: 6px 10px; border-radius: 5px; font-size: .8rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; line-height: 1.1; }
#phone-view .pv-chip.sm { padding: 4px 8px; font-size: .7rem; }
#phone-view .pv-plus { margin: 0 4px; color: var(--text-muted); font-size: .8rem; }

#phone-view .pv-gname { font-size: .85rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
#phone-view .pv-empty { margin-top: 24px; padding: 28px 12px; text-align: center; color: var(--text-muted); }

#phone-view .pv-foot { margin-top: 18px; text-align: center; }
#phone-view .pv-foot button { padding: 0 16px; font-size: .85rem; color: var(--text-muted); background: transparent; }
/* Coverage footer: past-hour cells were dimmed with opacity/filter, which made the whole sticky cell
   see-through so rows scrolling underneath showed through. Keep the cell opaque; dim the number instead. */
#roster-table tfoot td.past-hour-col {
  opacity: 1;
  filter: none;
  color: color-mix(in srgb, currentColor 45%, transparent) !important;
}

/* =========================================================================
   IN-APP MESSAGES (toasts + confirm/prompt dialog)
   ========================================================================= */
#ui-toasts {
  position: fixed; z-index: 100000; inset: auto; top: calc(12px + env(safe-area-inset-top)); left: 50%; right: auto; bottom: auto; transform: translateX(-50%);
  width: min(94vw, 460px); margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: visible;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
#ui-toasts:empty { display: none; }
.ui-toast {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 6px 12px 14px;
  background: var(--card-bg); color: var(--text); border: 1px solid var(--card-border); border-left: 4px solid var(--accent);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, .35); font-size: .9rem; line-height: 1.35;
}
.ui-toast.success { border-left-color: var(--green); }
.ui-toast.warn { border-left-color: var(--orange); }
.ui-toast.error { border-left-color: var(--red); }
.ui-toast.out { opacity: 0; }   /* timing: CALM A8 */
.ui-toast-text { flex: 1; white-space: pre-line; padding-top: 2px; overflow-wrap: anywhere; }
.ui-toast-x { flex: none; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: .95rem; cursor: pointer; }
.ui-toast-x:hover { color: var(--text); }

dialog.ui-dialog { width: min(92vw, 420px); padding: 20px; border-radius: 12px; }
.ui-dialog h3 { margin: 0 0 8px; font-size: 1.1rem; font-weight: 600; }
.ui-dialog p { margin: 0 0 14px; white-space: pre-line; color: var(--text-muted); font-size: .92rem; line-height: 1.45; }
.ui-dialog input { margin-bottom: 14px; }
.ui-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ui-dialog-actions button { min-height: 44px; padding: 0 18px; border-radius: 8px; font-weight: 500; }
.ui-dialog-actions button.ui-danger { background: var(--red-fill); border-color: var(--red-fill); color: #fff; }

/* Row status: coloured zone chip + "until / next" line (data set by staffStatusAttrs() in app.js) */
#roster-table tbody td.staff-name small.staff-current-zone {
  font-size: 0 !important; display: flex !important; align-items: center; gap: 6px; margin-top: 3px; white-space: nowrap; overflow: hidden; line-height: 1;
}
#roster-table tbody td.staff-name small.staff-current-zone[data-chip]:not([data-chip=""])::before {
  content: attr(data-chip); flex: 0 0 auto; font-size: .62rem; font-weight: 600; letter-spacing: .02em; line-height: 1;
  padding: 3px 6px; border-radius: 4px; background: var(--chip-bg, var(--surface-4)); color: var(--chip-fg, #fff);
  max-width: 100px; overflow: hidden; text-overflow: ellipsis;
}
#roster-table tbody td.staff-name small.staff-current-zone::after {
  content: attr(data-sub); font-size: .68rem; font-weight: 400; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis;
}
/* room for the chip beside the name */
#roster-table { --s22-name-w: 164px !important; --s22-shift-w: 0px !important; }
@media (max-width: 900px) { #roster-table { --s22-name-w: 156px !important; --s22-shift-w: 0px !important; } }

/* Name cell = small grid: name + chip stacked on the left, shift time centred in the space to the right */
#roster-table td.staff-name .staff-cell { display: grid; grid-template-columns: 70px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 4px; }
#roster-table td.staff-name .staff-name-text { grid-column: 1; grid-row: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#roster-table td.staff-name .staff-cell > small.staff-current-zone { grid-column: 1; grid-row: 2; }
#roster-table td.staff-name .staff-cell > small.staff-current-zone[hidden] { display: none !important; }
/* With no zone chip under it (future days, compact Fit) the name sits in the middle of the row, level with the shift time */
#roster-table td.staff-name .staff-cell:has(> small.staff-current-zone[hidden]) > .staff-name-text,
html.fit-compact #roster-table td.staff-name .staff-cell > .staff-name-text { grid-row: 1 / span 2; align-self: center; }
#roster-table td.staff-name input.shift-inline {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: center; width: 100%; max-width: 7em;
  padding: 2px 0; margin: 0; background: transparent; border: none; outline: none;
  color: var(--text-muted); font: inherit; font-size: .68rem; font-weight: 300; text-align: center; cursor: text;
}

/* Finished their shift today: grey the whole name cell (colour only, never opacity: these cells are sticky) */
#roster-table td.staff-name.is-finished { color: var(--text-muted) !important; }
#roster-table td.staff-name.is-finished .staff-name-text { color: var(--text-muted) !important; opacity: 1; }
#roster-table td.staff-name.is-finished input.shift-inline { color: var(--text-muted); }

/* paint palette: one button until you open it */
#zone-palette-toggle {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--card-border);
  background: var(--card-bg); color: var(--text); font-size: .8rem; font-weight: 500; cursor: pointer; flex: 0 0 auto;
}
#zone-palette-toggle .zp-label { color: var(--text-muted); }
#zone-palette-toggle .zp-chip { padding: 4px 9px; border-radius: 5px; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
#zone-palette-toggle .zp-caret { color: var(--text-muted); font-size: .7rem; }
html body .zone-legend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
html body .zone-legend.palette-collapsed #zone-badges-container { display: none !important; }
html body .zone-legend.palette-collapsed { padding-bottom: 6px !important; }
/* Paint: the button lives in the header actions; opening it shows the zones as a bar under the header (scrolls sideways) */
html body .zone-legend { position: fixed; left: 14px; right: 14px; top: 96px; z-index: 850; margin: 0; width: auto !important; max-width: none !important; min-height: 0;
  padding: 8px 10px !important; background: var(--card-bg) !important; border: 1px solid var(--edge) !important; border-radius: 12px !important; box-shadow: 0 10px 30px rgba(0,0,0,.45); overflow: visible !important; }
html body .zone-legend.palette-collapsed, body.locked-mode .zone-legend { display: none !important; }
html body .zone-legend #zone-badges-container { position: static; display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; width: 100%; padding: 2px; background: none; border: 0; box-shadow: none; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
html body .zone-legend #zone-badges-container::-webkit-scrollbar { display: none; }
html body .zone-legend #zone-badges-container > span { display: none; }
html body .zone-legend #zone-badges-container > .zone-badge { flex: 0 0 auto; }
html body .zone-legend > div:not(#zone-badges-container) { display: none !important; }
html body .zone-legend > #zone-palette-toggle { display: none; }

/* Compact / portrait header: fill the brand row with the leads instead of leaving it half empty */
@media (max-width: 949px), (max-aspect-ratio: 1/1) {
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar {
    grid-template-areas:
      "brand brand brand title title title leads leads leads leads leads leads"
      "perf perf perf perf perf perf staff staff staff staff staff staff"
      "sales sales splh splh upt upt aov aov actions actions actions actions";
  }
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-title { align-items: center; text-align: center; }
  body:is(.locked-mode, :not(.locked-mode)) #stage7-leads { height: 50px; }
}

/* Coverage banner: a small tappable pill instead of a full-width bar */
#coverage-status { align-self: flex-start; width: fit-content; max-width: 100%; padding: 0 12px !important; min-height: 32px; height: 32px; border-radius: 999px !important; flex-wrap: nowrap; cursor: pointer; font-size: .74rem !important; white-space: nowrap; }
#coverage-status::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--text-muted); border-top: 2px solid var(--text-muted); transform: rotate(45deg); }
#palette-row #coverage-status { flex: 0 1 auto; }
#coverage-status.has-coverage-gaps::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--orange); flex: 0 0 auto; }
#coverage-status button { display: none !important; }

/* Tools menu: three columns so it covers less of the roster; PDF is a normal button */
#tools-menu .tools-grid { grid-template-columns: repeat(3, 1fr); }
#tools-menu #tools-fields { grid-template-columns: 1fr 1fr 1fr; }
#tools-menu .meta-item:last-child { grid-column: auto; }
#tools-menu .tools-section + .tools-section { margin-top: 8px; padding-top: 8px; }
#tools-menu button { font-size: .76rem; }
#tools-menu .pdf-btn { background: var(--btn-default) !important; border-color: var(--card-border) !important; color: var(--text) !important; }

/* Compact KPI strip: smaller boxes, no "↑ live / ↓ avg" sub-lines (Staff keeps its "n active") */
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-kpi:not(.stage1b-staff) small { display: none !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-kpi,
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar #stage7-leads,
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage7-lead-card,
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-performance,
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar #stage7-top-actions > button { height: 40px !important; min-height: 40px !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-kpi { gap: 0 !important; justify-content: center; }

/* Header tidy: every box the same height and on one line; quieter Performance; compact Staff */
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar { align-items: center !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-brand,
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-title { height: 44px !important; min-height: 0 !important; align-self: center; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar #stage7-top-actions { height: 40px !important; min-height: 0 !important; align-self: center !important; margin: 0 !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar #stage7-top-actions > button { align-self: center; margin: 0 !important; }
/* Performance: plain label, no emoji, no glowing border */
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-performance { border-color: var(--card-border) !important; box-shadow: none !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-perf-icon { display: none !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-perf-copy b { font-weight: 600; font-size: .78rem; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar #stage1b-performance-live { color: var(--text-muted) !important; font-style: normal; font-size: .62rem; }
/* Staff: label on top, "17  10 active" on one line, left-aligned like the other boxes */
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-staff { display: grid !important; grid-template-columns: auto 1fr; align-content: center; align-items: baseline; column-gap: 6px; text-align: left !important; justify-items: start; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-staff > span { grid-column: 1 / -1; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-staff small { display: block !important; white-space: nowrap; font-size: .58rem; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-performance { grid-template-columns: 1fr auto !important; padding: 0 12px !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-perf-copy { min-width: 0; white-space: nowrap; line-height: 1.15; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-staff { display: flex !important; flex-wrap: wrap; align-items: baseline !important; align-content: center; column-gap: 6px; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-staff > span { flex: 0 0 100%; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-staff > strong { width: auto !important; flex: 0 0 auto; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-performance .stage1b-perf-copy b { font-size: .78rem !important; font-weight: 600 !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-performance #stage1b-performance-live { font-size: .62rem !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-staff { flex-direction: row !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-staff > strong, html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-staff > small { margin-top: 2px !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-staff { justify-content: flex-start !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-staff > small { margin-left: 6px !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-staff > span { text-align: left !important; }

/* Coverage pill floats at the bottom right of the roster, above everything else, so the header needs no row for it */
body > #coverage-status {
  position: fixed !important; right: 22px; bottom: calc(var(--foot-h, 34px) + 20px); z-index: 900; width: fit-content; height: 32px; margin: 0 !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45); background: var(--card-bg) !important;
}
body.locked-mode #palette-row { display: none !important; }
#palette-row { margin-bottom: 6px; }

/* Performance + Staff: use the whole box (type scales up with the box, count and "active" pushed to opposite ends) */
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-performance { padding: 0 14px !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-performance .stage1b-perf-copy b { font-size: clamp(.78rem, 1.1vw, .95rem) !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-performance #stage1b-performance-live { font-size: clamp(.62rem, .8vw, .72rem) !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-staff { justify-content: space-between !important; padding: 0 14px !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-staff > strong { font-size: clamp(.9rem, 1.4vw, 1.15rem) !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-staff > small { margin-left: auto !important; }

/* Portrait / compact: KPI row of four, then Performance | Staff | actions share the third row evenly */
@media (max-width: 949px), (max-aspect-ratio: 1/1) {
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar {
    grid-template-areas:
      "brand brand brand title title title leads leads leads leads leads leads"
      "sales sales sales splh splh splh upt upt upt aov aov aov"
      "perf perf perf perf staff staff staff staff actions actions actions actions";
  }
}

/* Staff box: everything centred. Wide box = one line "♣ Staff  17  10 active"; narrow box = label over "17  10 active" */
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-staff {
  container-type: inline-size; display: flex !important; flex-direction: row !important; flex-wrap: wrap; justify-content: center !important;
  align-items: center !important; align-content: center !important; column-gap: 8px !important; row-gap: 0 !important; text-align: center !important; padding: 0 8px !important;
}
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-staff > span { flex: 0 0 100% !important; text-align: center !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-staff > strong,
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-staff > small { margin: 0 !important; line-height: 1.1; align-self: center; }
@container (min-width: 190px) {
  html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-staff > span { flex: 0 0 auto !important; }
}

/* Coverage gaps: a small panel that pops out of the coverage pill (bottom right), not a full-screen modal */
dialog#coverage-warning-modal {
  position: fixed; inset: auto 22px calc(var(--foot-h, 34px) + 60px) auto; margin: 0; width: min(380px, calc(100vw - 44px)); max-width: none; max-height: 60vh; overflow: auto;
  border-radius: 14px !important; padding: 12px 16px 14px !important; transform-origin: bottom right;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .5);
}
dialog#coverage-warning-modal::backdrop { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
dialog#coverage-warning-modal .roster-feature-hint { display: none; }
dialog#coverage-warning-modal .modal-header h2 { font-size: .95rem; }
dialog#coverage-warning-modal #coverage-warning-list { max-height: 36vh !important; }

/* Performance label: smaller, lighter type */
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-performance .stage1b-perf-copy b { font-size: .72rem !important; font-weight: 600 !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-performance #stage1b-performance-live { font-size: .58rem !important; font-weight: 400 !important; }

/* Staff names are white (finished staff stay grey) */
#roster-table td.staff-name:not(.is-finished) .staff-name-text,
#roster-table tbody tr:hover td.staff-name:not(.is-finished) .staff-name-text { color: var(--text) !important; }

/* AI progress card (Gemini scan / notes-to-schedule) */
#ai-progress { position: fixed; inset: 14px auto auto 50%; transform: translateX(-50%); margin: 0; z-index: 10000; display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 14px; border: 1px solid var(--card-border); border-radius: 999px; background: var(--card-bg); color: var(--text); font-size: .82rem; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
#ai-progress[hidden] { display: none; }
#ai-progress .aip-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--card-border); border-top-color: var(--accent); animation: arc-spin .8s linear infinite; flex: 0 0 auto; }
#ai-progress .aip-cancel { height: 32px; min-height: 0; padding: 0 14px; border-radius: 999px; font-size: .78rem; }
@keyframes arc-spin { to { transform: rotate(360deg); } }   /* every spinner (AI progress, sign-in gate) */
/* Scan review list: keep long lists scrollable and line breaks intact */
#ui-dialog-message { white-space: pre-line; max-height: 50vh; overflow: auto; }

/* Printable backup sheet (built by printBackupSheet in app.js) */
#print-sheet { display: none; }
@page { size: A4 landscape; margin: 8mm; }
@media print {
  html, body { background: #fff !important; color: #000 !important; padding: 0 !important; margin: 0 !important; height: auto !important; overflow: visible !important; }
  body > *:not(#print-sheet) { display: none !important; }
  #print-sheet { display: block !important; color: #000; font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
#print-sheet .ps-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 4mm; }
#print-sheet h1 { font-size: 14pt; margin: 0 0 1mm; font-weight: 700; }
#print-sheet p { margin: 0; font-size: 9pt; }
#print-sheet .ps-stamp { font-size: 8pt; text-align: right; color: #222; }
#print-sheet .ps-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
#print-sheet th, #print-sheet td { border: .25mm solid #6b7280; padding: 0; height: 7.6mm; overflow: hidden; white-space: nowrap; text-align: center; font-size: 7pt; line-height: 1.1; }
#print-sheet thead th { background: #e5e7eb; font-weight: 700; height: 6mm; }
#print-sheet .nm { width: 30mm; text-align: left; padding: 0 1.5mm; font-weight: 700; font-size: 9pt; }
#print-sheet .sh { width: 27mm; padding: 0 1.5mm; font-size: 8pt; }
#print-sheet .sh small { font-size: 6.5pt; color: #333; }
#print-sheet td.zone { font-weight: 700; font-size: 7pt; text-transform: uppercase; }
#print-sheet td.lunch { font-weight: 700; font-size: 6.5pt; }
#print-sheet td.hs { border-left: .35mm solid #111; }
#print-sheet td.empty { background: #fff; }
#print-sheet tfoot td { background: #f3f4f6; font-weight: 700; }
#print-sheet .ps-legend { display: flex; flex-wrap: wrap; gap: 1.5mm; margin-top: 4mm; }
#print-sheet .lg { font-size: 7pt; font-weight: 700; padding: .8mm 2.5mm; border: .25mm solid #444; border-radius: 1mm; text-transform: uppercase; }
#print-sheet, #print-sheet th, #print-sheet td, #print-sheet h1, #print-sheet p, #print-sheet b, #print-sheet small { color: #000; }
#print-sheet td.lunch { font-size: 5.6pt; letter-spacing: -.1pt; }
/* beat the app's dark table styles inside the print sheet */
#print-sheet th, #print-sheet td { position: static !important; box-shadow: none !important; }
#print-sheet thead th { background: #e5e7eb !important; color: #000 !important; }
#print-sheet tfoot td { background: #f3f4f6 !important; color: #000 !important; }
#print-sheet tbody td.nm, #print-sheet tbody td.sh, #print-sheet tbody td.empty { background: #fff !important; color: #000 !important; }
#print-sheet tbody td.shift { background: #e5e7eb !important; color: #000 !important; }
#print-sheet .ps-table.dense th, #print-sheet .ps-table.dense td { height: 6mm; }
#print-sheet .ps-table.dense .nm { font-size: 8pt; }
#print-sheet tr { page-break-inside: avoid; }

/* Quarter-hour grid through every block: quarter = light, half hour = medium, hour = dark */
#print-sheet tbody td.gq { border-left: .15mm solid rgba(0,0,0,.28); }
#print-sheet tbody td.gf { border-left: .25mm solid rgba(0,0,0,.5); }
#print-sheet tbody td.gh { border-left: .4mm solid #111; }
#print-sheet tbody td.zone, #print-sheet tbody td.lunch, #print-sheet tbody td.empty, #print-sheet tbody td.shift { position: relative !important; overflow: visible; }
#print-sheet tbody td .lbl { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 2; overflow: hidden; white-space: nowrap; pointer-events: none; }

/* Zone blocks stay solid; the quarter-hour grid shows only in the empty time around them */
#print-sheet tbody td.jl { border-left-width: 0 !important; }
#print-sheet tbody td.jr { border-right-width: 0 !important; }

#print-sheet tfoot tr.kpi td { background: #fff !important; font-weight: 600; font-size: 8pt; height: 6.4mm; }
#print-sheet tfoot tr.kpi td.nm { font-size: 8pt; }
#print-sheet tfoot tr.kpi td.sh { font-size: 7pt; font-weight: 400; }
#print-sheet tfoot tr.cov td { border-top: .5mm solid #111; }

/* Keep it to one page as the roster grows: 16 or fewer = roomy, 17-24 = compact, 25+ = tight */
#print-sheet .ps-table.dense th, #print-sheet .ps-table.dense td { height: 6.4mm; }
#print-sheet .ps-table.dense tfoot tr.kpi td { height: 5.6mm; }
#print-sheet .ps-table.dense2 th, #print-sheet .ps-table.dense2 td { height: 5.4mm; font-size: 6.5pt; }
#print-sheet .ps-table.dense2 .nm { font-size: 7.5pt; }
#print-sheet .ps-table.dense2 tfoot tr.kpi td { height: 5mm; }
#print-sheet .ps-table.dense .sh { font-size: 7pt; line-height: 1; }
#print-sheet .ps-table.dense2 .sh small { display: none; }

/* Hourly figures: their own table, a gap below the roster, same columns so numbers sit under their hours */
#print-sheet .ps-kpis { margin-top: 6mm; }
#print-sheet .ps-kpis tbody tr.kpi td { background: #fff !important; height: 7mm; }
#print-sheet .ps-kpis thead th { height: 6mm; }
#print-sheet .ps-kpis.dense tbody tr.kpi td { height: 5.8mm; }
#print-sheet .ps-kpis.dense2 tbody tr.kpi td { height: 5mm; }

/* Help link in the Tools menu looks like the other menu buttons */
#tools-menu a.tools-link { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--card-border); background: var(--btn-default); color: var(--text); font-size: .76rem; font-weight: 500; text-decoration: none; }

/* ---- Staff Profile dialog: touch-friendly fields, pill toggles, sticky actions ---- */
#staff-modal { width: min(94vw, 540px); }
#staff-modal .form-group > label { display: block; margin-bottom: 6px; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
#staff-modal .form-group > label .opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
#staff-modal input[type="text"], #staff-modal textarea { width: 100%; min-height: 44px; padding: 10px 12px; font-size: .95rem; border-radius: 8px; }
#staff-modal textarea { min-height: 84px; }
#staff-modal .roster-feature-hint { margin: 0 0 8px; font-size: .78rem; }
#staff-modal .staff-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 8px; margin: 12px -4px -4px; padding: 10px 4px 4px; background: var(--card-bg); border-top: 1px solid var(--card-border); }
#staff-modal .staff-actions button { min-height: 44px; padding: 0 20px; border-radius: 8px; }
#staff-modal .staff-actions { margin-top: 6px; }

/* Usual-zone chooser in the Staff Profile: one tappable pill per zone */
#staff-modal .zone-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
#staff-modal .zone-pill { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid transparent; font-size: .82rem; font-weight: 600; cursor: pointer;
  background: var(--zp-bg, var(--btn-default)); color: var(--zp-fg, var(--text)); opacity: .55; }
#staff-modal .zone-pill[data-zone=""] { border-color: var(--card-border); }
#staff-modal .zone-pill[aria-checked="true"] { opacity: 1; border-color: var(--text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 18%, transparent); }


/* ---- One look for every header box: same height, padding, radius, border and fill ---- */
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar :is(.stage7-lead-card, .stage1b-kpi, .stage1b-performance, #stage7-top-actions > button) {
  box-sizing: border-box; height: 40px !important; min-height: 40px !important; padding: 0 12px !important; border-radius: 9px !important;
  border: 1px solid var(--edge) !important; background: var(--widget-bg) !important; box-shadow: none !important;
}
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar #stage7-top-actions > button { font-size: .72rem !important; font-weight: 600 !important; color: var(--text) !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar #stage7-top-actions > #zone-palette-toggle { display: inline-flex !important; align-items: center; justify-content: center; gap: 7px; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar #zone-palette-toggle .zp-label { color: var(--text-muted); font-weight: 500; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar #zone-palette-toggle .zp-chip { padding: 3px 8px; font-size: .66rem; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage7-lead-card { justify-content: center; }

/* Paint button must never spill out of its box: drop the word "Paint" when narrow, let the chip shrink, give it a bit more room */
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar #stage7-top-actions > #zone-palette-toggle { container-type: inline-size; flex: 1.5 1 0 !important; min-width: 0; overflow: hidden; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar #zone-palette-toggle .zp-chip { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 0 1 auto; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar #zone-palette-toggle .zp-caret { flex: 0 0 auto; }
@container (max-width: 125px) { .zp-label { display: none; } }
/* Portrait / compact: give the action buttons half of the third row */
@media (max-width: 949px), (max-aspect-ratio: 1/1) {
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar {
    grid-template-areas:
      "brand brand brand title title title leads leads leads leads leads leads"
      "sales sales sales splh splh splh upt upt upt aov aov aov"
      "perf perf perf staff staff staff actions actions actions actions actions actions";
  }
}

/* Wide one-row header: enough room that the brand and the title are never clipped */
@media (min-width: 1450px) and (min-aspect-ratio: 1/1) {
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar {
    grid-template-columns: minmax(195px, 1.1fr) minmax(240px, 1.32fr) minmax(170px, 1.18fr) minmax(130px, .88fr) repeat(4, minmax(68px, .52fr)) minmax(66px, .48fr) minmax(250px, 1.65fr);
  }
}

/* Table header row blends into the sheet: left columns use the same tone as the name column, the hour columns the same as the grid,
   with small muted labels like the ones on the header boxes. */
html body #roster-table thead th { background: var(--bg) !important; border-bottom-color: var(--edge) !important; }
html body #roster-table thead th.col-sticky-left { background: var(--row-a) !important; }
html body #roster-table thead th.col-name, html body #roster-table thead th.col-breaks, html body #roster-table thead th.col-del {
  font-size: .66rem !important; font-weight: 600 !important; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted) !important;
}
html body #roster-table thead tr:first-child th.q-hour { font-size: .78rem !important; font-weight: 600 !important; color: #cbd5e1 !important; }
html body #roster-table thead th.col-breaks small, html body #roster-table thead th.col-breaks .breaks-head small b { font-size: .56rem; letter-spacing: .06em; color: var(--text-muted); font-weight: 500; }
/* Footer matches the header: name columns like the name column, hour columns like the grid (always opaque) */
html body #roster-table tfoot td { background: var(--bg) !important; border-top-color: var(--edge) !important; }
html body #roster-table tfoot td.col-sticky-left { background: var(--row-a) !important; }


/* ---- Date control: one uniform box  ‹  Fri, 9 Oct 2026  ›  ; "Today" appears only when you are on another day ---- */
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-title > strong { display: none !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar .stage1b-title { container-type: inline-size; justify-content: center; align-items: stretch; padding: 0 !important; height: 40px !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage19-date-nav { display: flex !important; align-items: center; gap: 6px; flex-wrap: nowrap; width: 100%; height: 40px; margin: 0; padding: 0; }
html body:is(.locked-mode, :not(.locked-mode)) .stage19-date-nav .date-box { display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0; height: 40px; box-sizing: border-box;
  border: 1px solid var(--edge); border-radius: 9px; background: var(--widget-bg); overflow: hidden; }
html body:is(.locked-mode, :not(.locked-mode)) .stage19-date-nav .date-box.is-away { border-color: var(--orange); }
html body:is(.locked-mode, :not(.locked-mode)) .stage19-date-nav .stage19-date-step { flex: 0 0 38px; width: 38px; min-width: 38px; height: 100%; padding: 0; border: 0 !important; border-radius: 0 !important; background: none !important; color: var(--text) !important; font-size: 1.15rem; font-weight: 600; cursor: pointer; }
html body:is(.locked-mode, :not(.locked-mode)) .stage19-date-nav .stage1b-date-button { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 8px; border: 0 !important; border-left: 1px solid var(--edge) !important; border-right: 1px solid var(--edge) !important; border-radius: 0 !important; background: none !important; color: var(--text) !important; font-size: .82rem !important; font-weight: 600; white-space: nowrap; text-align: center; cursor: pointer; }
html body:is(.locked-mode, :not(.locked-mode)) .stage19-date-nav .stage1b-date-button > span:not(#stage1b-date-label) { display: none; }
html body:is(.locked-mode, :not(.locked-mode)) .stage19-date-nav .date-box.is-away .stage1b-date-button { color: var(--orange-text) !important; border-left-color: var(--orange) !important; border-right-color: var(--orange) !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage19-date-nav .stage19-today { flex: 0 0 auto; width: auto !important; min-width: 0; height: 40px; padding: 0 12px !important; border: 1px solid var(--orange) !important; border-radius: 9px !important; background: color-mix(in srgb, var(--orange) 14%, transparent) !important; color: var(--orange-text) !important; font-size: .74rem !important; font-weight: 600; white-space: nowrap; overflow: visible; }
html body:is(.locked-mode, :not(.locked-mode)) .stage19-date-nav .stage19-today::after { content: none !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage19-date-nav .stage19-today[hidden] { display: none !important; }
/* Narrow title column: the jump-to-today button shrinks to the arrow */
@container (max-width: 235px) {
  html body:is(.locked-mode, :not(.locked-mode)) .stage19-date-nav .stage19-today { font-size: 0 !important; padding: 0 !important; width: 40px !important; min-width: 40px; }
  html body:is(.locked-mode, :not(.locked-mode)) .stage19-date-nav .stage19-today .ic { width: 18px; height: 18px; }
}
/* Portrait/compact header row 1: give the date box a bit more room than the brand */
@media (max-width: 949px), (max-aspect-ratio: 1/1) {
  body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar {
    grid-template-areas:
      "brand brand brand title title title title leads leads leads leads leads"
      "sales sales sales splh splh splh upt upt upt aov aov aov"
      "perf perf perf staff staff staff actions actions actions actions actions actions";
  }
}

/* Date box: everything exactly centred (the old date button carried a 5px top margin) */
html body:is(.locked-mode, :not(.locked-mode)) .stage19-date-nav .date-box > button { margin: 0 !important; display: flex !important; align-items: center; justify-content: center; line-height: 1; align-self: stretch; }
html body:is(.locked-mode, :not(.locked-mode)) .stage19-date-nav .stage1b-date-button { height: 100% !important; padding: 0 8px !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage19-date-nav .stage1b-date-button > span { line-height: 1; }
html body:is(.locked-mode, :not(.locked-mode)) .stage19-date-nav .stage19-date-step { padding: 0 0 1px !important; }

/* Current-time line */
#main-table-container { position: relative; }
#now-line { position: absolute; width: 2px; z-index: 16; background: #fff; box-shadow: 0 0 0 1px rgba(8,14,21, .55), 0 0 8px color-mix(in srgb, var(--text) 45%, transparent); pointer-events: none; border-radius: 1px; }
#past-shade { position: absolute; z-index: 15; background: rgba(8,14,21, .34); pointer-events: none; }
#past-shade[hidden] { display: none; }
#now-line[hidden] { display: none; }
@media print { #now-line, #past-shade { display: none !important; } }

/* Small white marker sitting on top of the current-time line, at the bottom edge of the frozen header */
#now-marker { position: absolute; z-index: 125; width: 13px; height: 8px; background: #fff; clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 1px 1px rgba(8,14,21, .6)); pointer-events: none; }
#now-marker[hidden] { display: none; }
@media print { #now-marker { display: none !important; } }

/* The :00 / :30 sub-header row was misaligned and unnecessary: keep the row (it sets the column geometry) but make it a thin, label-free strip */
html body #roster-table thead tr:nth-child(2) th { height: 6px !important; min-height: 0 !important; padding: 0 !important; font-size: 0 !important; line-height: 0 !important; border-left: 0 !important; border-right: 0 !important; overflow: hidden; }
html body #roster-table thead tr:nth-child(2) th::before, html body #roster-table thead tr:nth-child(2) th::after { content: none !important; }

/* Zone bar: one row, exactly as wide as the zoning sheet (left/width are set from the sheet in app.js); the zones scroll sideways inside it */
html body .zone-legend { box-sizing: border-box; overflow: hidden !important; right: auto; }
html body .zone-legend #zone-badges-container { flex: 1 1 0; min-width: 0; width: auto; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }

/* ---- Zone for a whole grey SHIFT block ---- */
#shift-zone-picker { position: fixed; z-index: 950; width: min(340px, calc(100vw - 16px)); padding: 10px; border: 1px solid var(--edge); border-radius: 14px; background: var(--card-bg); box-shadow: 0 14px 40px rgba(0,0,0,.5); }
#shift-zone-picker .szp-title { margin: 0 2px 8px; font-size: .78rem; font-weight: 600; color: var(--text-muted); }
#shift-zone-picker .szp-grid { display: flex; flex-wrap: wrap; gap: 6px; }
#shift-zone-picker .szp-grid button { min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; font-size: .8rem; font-weight: 700; cursor: pointer; }
html body .zone-legend #zone-badges-container > .zone-badge { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }


/* ---- Fit the whole roster on screen (block 29) ---- */
html.fit-sheet #roster-table .col-quarter { width: var(--fit-qw) !important; min-width: var(--fit-qw); max-width: var(--fit-qw); }
html.fit-sheet #roster-table tbody td { height: var(--fit-rh); min-height: var(--fit-rh); }
html.fit-sheet #roster-table .zone-ribbon { min-height: calc(var(--fit-rh) - 6px); height: calc(var(--fit-rh) - 6px); }
html.fit-sheet #roster-table .zone-ribbon span, html.fit-sheet #roster-table .zone-ribbon div > span { font-size: var(--fit-fs) !important; letter-spacing: 0 !important; white-space: nowrap; overflow: hidden; }
html.fit-sheet #roster-table tbody td.col-breaks .break-slot { height: calc(var(--fit-rh) - 12px); min-height: 20px; }
html.fit-compact #roster-table td.staff-name small.staff-current-zone { display: none !important; }
html.fit-compact #roster-table td.staff-name { font-size: .78rem; }
html.fit-compact #roster-table td.staff-name input.shift-inline { font-size: .62rem; }
html.fit-sheet #main-table-container { scrollbar-width: none; }
html.fit-sheet #main-table-container::-webkit-scrollbar { display: none; }

#fit-controls { position: fixed; right: 22px; bottom: calc(var(--foot-h, 34px) + 60px); z-index: 890; display: flex; align-items: stretch; height: 32px; border: 1px solid var(--edge); border-radius: 999px; background: var(--card-bg); box-shadow: 0 6px 20px rgba(0,0,0,.45); overflow: hidden; }
#fit-controls button { min-height: 0; min-width: 30px; padding: 0 12px; font-size: .76rem !important; border: 0; border-radius: 0; background: transparent; color: var(--text); font-size: .76rem; font-weight: 600; cursor: pointer; }
#fit-controls button.on { background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent-text); }
@media print { #fit-controls { display: none !important; } }
html.phone-mode #fit-controls { display: none !important; }
/* Block labels must not stretch the columns (a LUNCH block is only two narrow cells wide): ribbons take the cell's width, never their text's */
html.fit-sheet #roster-table td.slot-zone .zone-ribbon { width: 0 !important; min-width: 100% !important; overflow: hidden; }
html.fit-sheet #roster-table td.slot-zone { overflow: hidden; }
/* Hour headers (and the "NOW 3:11" text) must not widen their four columns either */
html.fit-sheet #roster-table thead th.hour-header { width: calc(var(--fit-qw) * 4) !important; min-width: 0 !important; max-width: calc(var(--fit-qw) * 4); overflow: hidden; padding-left: 0 !important; padding-right: 0 !important; white-space: nowrap; }
html.fit-sheet #roster-table thead th.hour-header .now-hour-time { font-size: .44rem; letter-spacing: 0; }
html.fit-sheet #roster-table tfoot td[id^="cov-"] { padding: 0; font-size: .7rem; overflow: hidden; }

#fit-controls button { min-width: 54px; }


/* ---- zone editing lock ---- */
#zone-edit-chip { position: fixed; right: 22px; bottom: calc(var(--foot-h, 34px) + 100px); z-index: 890; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 6px 0 14px; border: 1px solid var(--orange); border-radius: 999px;
  background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange-text); font-size: .76rem; font-weight: 600; box-shadow: 0 6px 20px rgba(0,0,0,.45); cursor: pointer; backdrop-filter: none; }
#zone-edit-chip b { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 999px; background: var(--orange); color: #1a1205; font-weight: 700; }
#zone-edit-chip[hidden] { display: none; }
body.zone-editing #main-table-container { box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 55%, transparent); }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar #zone-palette-toggle.zones-locked { color: var(--text); }
@media print { #zone-edit-chip { display: none !important; } }
html.phone-mode #zone-edit-chip { display: none !important; }


/* ---- Zone coverage rows in the sticky footer ---- */
#roster-table tfoot tr.zone-cov-row td { position: sticky; z-index: 46; height: 24px; min-height: 24px; padding: 0; font-size: .7rem; line-height: 1; background: var(--bg) !important; border: 0; box-shadow: inset 0 -3px 0 var(--bg); }
#roster-table tfoot tr.zone-cov-row td.col-sticky-left { background: var(--surface-2) !important; z-index: 250; }
#roster-table tfoot tr.zone-cov-row td.zcr-name { padding-left: 10px; text-align: left; }
#roster-table tfoot tr.zone-cov-row td.zcr-name span { display: inline-block; max-width: 100%; padding: 3px 9px; border-radius: 5px; font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* left column: the count now (or at the highlighted time) */
#roster-table tfoot tr.zone-cov-row td.zcr-mid { color: var(--text-muted); font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
#roster-table tfoot tr.zone-cov-row[data-zone] td.zcr-mid b { color: #fff; font-size: .86rem; font-weight: 800; letter-spacing: 0; margin-right: 5px; }
#roster-table tfoot tr.zone-cov-row[data-zone] td.zcr-mid.low b { color: var(--orange-text); }
#roster-table tfoot tr.zone-cov-row[data-zone] td.zcr-mid small { font-size: .56rem; }
/* cells: one text colour everywhere; the zone colour is a dark tint behind it */
#roster-table tfoot tr.zone-cov-row td.zcr-cell { text-align: center; font-weight: 700; font-size: .84rem; cursor: pointer; color: #fff; overflow: hidden; box-shadow: inset -1px -3px 0 var(--bg); }
#roster-table tfoot tr.zone-cov-row td.zcr-cell.q-hour { box-shadow: inset -3px -3px 0 var(--bg); }
#roster-table tfoot tr.zone-cov-row td.zcr-cell.zero { color: transparent; }
#roster-table tfoot tr.zone-cov-row td.zcr-cell.short { background: #b45309 !important; color: #fff; }
/* header row of the block: tap anywhere on it to hide or show the zone rows; when open it carries the hour axis */
#roster-table tfoot tr.zcr-head { cursor: pointer; }
#roster-table tfoot tr.zcr-head td { height: 26px; min-height: 26px; box-shadow: inset 0 3px 0 var(--bg); border-top: 1px solid #334155; }
#roster-table tfoot tr.zcr-head td.zcr-head-fill { background: var(--surface-2) !important; }
#roster-table tfoot tr.zcr-head td.zcr-ax { background: var(--surface-2) !important; color: var(--text-muted); font-size: .62rem; font-weight: 700; text-align: left; padding-left: 5px; overflow: hidden; white-space: nowrap; box-shadow: inset 0 3px 0 var(--bg), inset -1px 0 0 var(--bg); }
#roster-table tfoot tr.zcr-head td.zcr-ax.q-hour { box-shadow: inset 0 3px 0 var(--bg), inset -3px 0 0 var(--bg); }
#roster-table tfoot tr.zone-cov-row td.zcr-name span.zcr-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 0; background: none !important; color: var(--text) !important; font-size: .7rem; font-weight: 700; letter-spacing: .06em; }
.zcr-toggle i { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor; transition: transform var(--m-state) var(--e-std); transform: rotate(-90deg); }
tr.zcr-head.open .zcr-toggle i { transform: none; }
/* hover / tap crosshair: the zone row and the time column light up together */
#roster-table tfoot tr.zone-cov-row.zcr-rowhl td.zcr-cell,
#roster-table tfoot tr.zone-cov-row td.zcr-cell.zcr-colhl { background-image: linear-gradient(color-mix(in srgb, var(--text) 16%, transparent), color-mix(in srgb, var(--text) 16%, transparent)) !important; }
#roster-table tfoot tr.zone-cov-row.zcr-rowhl td.zcr-cell.zcr-colhl { background-image: linear-gradient(color-mix(in srgb, var(--text) 34%, transparent), color-mix(in srgb, var(--text) 34%, transparent)) !important; box-shadow: inset 0 0 0 2px #fff; }
#roster-table tfoot tr.zone-cov-row.zcr-rowhl td.col-sticky-left { background: var(--surface-4) !important; }
#roster-table tfoot tr.zone-cov-row.zcr-rowhl td.zcr-name span { box-shadow: 0 0 0 2px #fff; }
#roster-table tfoot tr.zcr-head td.zcr-ax.zcr-colhl { background: var(--accent-fill) !important; color: #fff; }
#roster-table tfoot td[id^="cov-"].zcr-colhl { background: var(--surface-4) !important; color: #fff; }
#zcr-pop { position: fixed; z-index: 950; max-width: min(320px, calc(100vw - 16px)); padding: 10px 12px; border: 1px solid var(--edge); border-radius: 12px; background: var(--card-bg); box-shadow: 0 14px 40px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: 4px; }
#zcr-pop b { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
#zcr-pop span { font-size: .88rem; line-height: 1.35; }
@media print { #roster-table tfoot tr.zone-cov-row { display: none !important; } }


/* ---- Zone history dialog (Tools > Zone history) ---- */
dialog#zone-history-modal { width: min(96vw, 1040px); max-width: none; max-height: 90vh; padding: 0; border-radius: 14px; overflow: hidden; }
dialog#zone-history-modal[open] { display: flex; flex-direction: column; }
#zone-history-modal .zh-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px 12px; border-bottom: 1px solid var(--card-border); }
#zone-history-modal .zh-head > div:first-child { flex: 1; min-width: 0; }
#zone-history-modal h2 { margin: 0; font-size: 1.05rem; }
#zone-history-modal .zh-sub { margin-top: 2px; font-size: .74rem; color: var(--text-muted); }
#zone-history-modal .zh-win { display: flex; align-items: center; gap: 8px; font-size: .74rem; color: var(--text-muted); }
#zone-history-modal .zh-win select { min-height: 34px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--card-border); background: var(--bg); color: var(--text); font-size: .8rem; }
#zone-history-modal .zh-x { min-height: 34px; min-width: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); font-size: 1rem; cursor: pointer; }
#zone-history-modal .zh-body { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
#zone-history-modal .zh-msg { margin: 0; padding: 40px 18px; text-align: center; color: var(--text-muted); font-size: .9rem; }
#zone-history-modal .zh-scroll { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; padding: 0 0 8px; }
#zone-history-modal .zh-table { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: .78rem; }
#zone-history-modal .zh-table th, #zone-history-modal .zh-table td { padding: 0; text-align: center; background: var(--card-bg); }
#zone-history-modal .zh-table thead th { position: sticky; top: 0; z-index: 3; padding: 10px 0 6px; vertical-align: bottom; border-bottom: 1px solid var(--card-border); }
#zone-history-modal .zh-name { position: sticky; left: 0; z-index: 2; min-width: 116px; padding: 0 12px !important; text-align: left !important; font-weight: 600; white-space: nowrap; }
#zone-history-modal thead th.zh-name { z-index: 4; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
#zone-history-modal .zh-days { min-width: 44px; color: var(--text-muted); font-size: .72rem; }
#zone-history-modal thead th.zh-days, #zone-history-modal thead th.zh-usual { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; }
#zone-history-modal .zh-zone { width: 42px; min-width: 42px; }
#zone-history-modal .zh-zone .zh-chip { writing-mode: vertical-rl; transform: rotate(180deg); padding: 8px 4px; max-height: 96px; overflow: hidden; text-overflow: ellipsis; }
#zone-history-modal .zh-chip { display: inline-block; border-radius: 5px; font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 3px 8px; white-space: nowrap; }
#zone-history-modal tbody tr:not(.zh-group) td { height: 32px; border-bottom: 1px solid rgba(100,116,139,.14); }
#zone-history-modal .zh-cell { color: #fff; font-weight: 700; font-size: .8rem; box-shadow: inset -1px 0 0 var(--card-bg); }
#zone-history-modal .zh-cell.zh-top { box-shadow: inset 0 0 0 2px #fff; }
#zone-history-modal .zh-usual { min-width: 150px; padding: 0 10px !important; text-align: left !important; white-space: nowrap; }
#zone-history-modal .zh-usual .zh-chip { margin-right: 6px; }
#zone-history-modal .zh-ok { color: var(--green); font-weight: 800; }
#zone-history-modal .zh-set { min-height: 26px; padding: 0 10px; border: 1px solid var(--accent); border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-text); font-size: .72rem; font-weight: 700; cursor: pointer; }
#zone-history-modal tr.zh-group td { padding: 14px 12px 6px !important; text-align: left; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 700; background: var(--card-bg); position: sticky; left: 0; }
#zone-history-modal .zh-foot { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--card-border); }
#zone-history-modal .zh-note { flex: 1; font-size: .72rem; color: var(--text-muted); line-height: 1.35; }
#zone-history-modal .zh-bulk { min-height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: var(--accent-fill); color: #fff; font-weight: 700; font-size: .84rem; cursor: pointer; }
#zone-history-modal .zh-close { min-height: 40px; padding: 0 16px; border: 1px solid var(--card-border); border-radius: 10px; background: transparent; color: var(--text); font-size: .84rem; cursor: pointer; }
@media print { dialog#zone-history-modal { display: none !important; } }


/* ---- Suggest zones dialog (Tools > Planning > Suggest zones) ---- */
@media print { dialog#zone-suggest-modal { display: none !important; } }


/* ---- Quick edit sheet (block 34): every control is at least 44pt (Apple's minimum touch target) ---- */
:not(.locked-mode)) #main-table-container { padding-bottom: 0 !important; max-height: var(--qe-avail, 60vh) !important; overflow-y: auto !important; }


/* ---- Zone blocks sit exactly 3px from the line above and below: whole pixels, so no screen rounds one side differently ---- */
#roster-table { --row-h: 44px; }
html.fit-sheet #roster-table { --row-h: var(--fit-rh); }
#roster-table tbody td.slot-zone { padding: 0 !important; vertical-align: top !important; }
#roster-table tbody td.slot-zone .zone-ribbon { margin: 3px 0 0 !important; height: calc(var(--row-h) - 7px) !important; min-height: 0 !important; }
html.fit-sheet #roster-table tbody td.slot-zone .zone-ribbon { height: calc(var(--fit-rh) - 7px) !important; min-height: 0 !important; }


/* ---- Lunch: a deep shade of its zone, recessed between the rounded zone blocks either side, with a frosted badge and two pale bars ---- */
#roster-table td.slot-zone.lunch-cell { background-image: none; }
#roster-table .zone-ribbon.lunch-ribbon { background: var(--lunch-bg, #1a2138) !important; border-radius: 0 !important; box-shadow: inset 0 3px 7px rgba(0,0,0,.45) !important; display: flex; align-items: center; justify-content: center; color: #fff; overflow: visible; }
#roster-table .zone-ribbon.lunch-ribbon.lunch-round-l { border-top-left-radius: 8px !important; border-bottom-left-radius: 8px !important; }
#roster-table .zone-ribbon.lunch-ribbon.lunch-round-r { border-top-right-radius: 8px !important; border-bottom-right-radius: 8px !important; }
#roster-table .zone-ribbon.lunch-ribbon::before, #roster-table .zone-ribbon.lunch-ribbon::after { content: ""; position: absolute; top: 25%; bottom: 25%; width: 2px; border-radius: 1px; background: color-mix(in srgb, var(--text) 85%, transparent); box-shadow: 0 0 2px rgba(0,0,0,.35); z-index: 5; }
#roster-table .zone-ribbon.lunch-ribbon::before { left: 0; } #roster-table .zone-ribbon.lunch-ribbon::after { right: 0; }
#roster-table .lunch-badge { position: relative; z-index: 4; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--text) 26%, transparent); -webkit-backdrop-filter: blur(6px) saturate(1.4); backdrop-filter: blur(6px) saturate(1.4); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text) 65%, transparent), 0 1px 4px rgba(0,0,0,.28); }
#roster-table .lunch-badge svg { width: 14px; height: 14px; display: block; }
html.fit-compact #roster-table .lunch-badge { width: 18px; height: 18px; } html.fit-compact #roster-table .lunch-badge svg { width: 11px; height: 11px; }
/* the neighbours' rounded corners show the lunch colour behind them (inside the same 3px-from-top/bottom band as the blocks) */
#roster-table td.slot-zone.beside-lunch-r { background-image: linear-gradient(var(--lunch-bg), var(--lunch-bg)) !important; background-repeat: no-repeat !important; background-position: right 3px !important; background-size: 10px calc(var(--row-h) - 7px) !important; }
#roster-table td.slot-zone.beside-lunch-l { background-image: linear-gradient(var(--lunch-bg), var(--lunch-bg)) !important; background-repeat: no-repeat !important; background-position: left 3px !important; background-size: 10px calc(var(--row-h) - 7px) !important; }
html.fit-sheet #roster-table td.slot-zone.beside-lunch-r, html.fit-sheet #roster-table td.slot-zone.beside-lunch-l { background-size: 10px calc(var(--fit-rh) - 7px) !important; }
/* no seams: the cell borders and the ribbon's own 1px border showed as thin vertical lines at each end of the lunch */
#roster-table td.slot-zone.lunch-cell, #roster-table td.slot-zone.beside-lunch-r { border-right-width: 0 !important; }
#roster-table .zone-ribbon.lunch-ribbon { border: 0 !important; }
#roster-table td.slot-zone.beside-lunch-r, #roster-table td.slot-zone.beside-lunch-l { background-origin: border-box !important; }

/* ==========================================================================
   STAGE 1 - APPLE STYLE A (graphite glass): shared type, surfaces, corners, labels
   Tokens live in :root. Layout and sizes are not touched here: header and KPI widgets are stage 2, the sheet is
   stage 3, zone counts / floating controls / Quick edit / dialogs / phone / print are finished in stage 4.
   ========================================================================== */
html { -webkit-text-size-adjust: 100%; }
body {
  background-color: var(--bg);
  background-image: radial-gradient(1300px 760px at 16% -10%, #121c20, var(--bg) 62%);
  background-attachment: fixed;
  letter-spacing: -0.003em;
}
::selection { background: color-mix(in srgb, var(--accent) 45%, transparent); }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Labels: sentence case, no letter-spaced capitals (zone names keep the store's own spelling) */
.meta-item label, .kpi-header h3, .kpi-table th, .form-group label, #staff-modal .form-group > label,
#tools-menu .tools-title, .zone-modal .zm-label, .zone-modal .zm-list-head, #zcr-pop b,
html body #roster-table thead th.col-name, html body #roster-table thead th.col-breaks, html body #roster-table thead th.col-del,
#zone-history-modal thead th.zh-name, #zone-history-modal thead th.zh-days, #zone-history-modal thead th.zh-usual, #zone-history-modal tr.zh-group td { text-transform: none !important; letter-spacing: 0 !important; }
#tools-menu .tools-title, .meta-item label, .form-group label, #staff-modal .form-group > label, .zone-modal .zm-label, .zone-modal .zm-list-head { font-size: .78rem; font-weight: 600; }
#tools-menu .tools-title { margin-bottom: 8px; }

/* Buttons and fields */
button { border-color: var(--card-border); border-radius: var(--r-sm); font-weight: 600; transition: background-color var(--m-state) var(--e-std), border-color var(--m-state) var(--e-std), color var(--m-state) var(--e-std), opacity var(--m-state) var(--e-std); }
button.primary, button.scan-btn, button.danger, button.pdf-btn, #zone-history-modal .zh-bulk, #zone-suggest-modal .zs-apply { border-color: transparent; color: #fff; }
button.primary, button.pdf-btn { background: var(--accent-fill); }
button.primary:hover, button.pdf-btn:hover { background: var(--accent-press); }
button.scan-btn { background: var(--green-fill); }
button.danger, .ui-dialog-actions button.ui-danger { background: var(--red-fill); }
button.alert-active { background: var(--orange); border-color: transparent; color: #1a1100; }
dialog input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), dialog select, dialog textarea,
#tools-menu input:not([type=checkbox]):not([type=radio]), .form-group input, .form-group textarea {
  background: var(--input-bg); border: 1px solid var(--card-border); border-radius: var(--r-sm); color: var(--text);
}
dialog input:focus, dialog select:focus, dialog textarea:focus, #tools-menu input:focus, .form-group input:focus, .form-group textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 0; border-color: var(--accent);
}

/* Glass surfaces: dialogs, menus, popovers, toasts */
dialog, #lunch-generator-modal, #coverage-warning-modal, #coverage-settings-modal, #staff-modal, #settings-modal, #ui-dialog, #zone-history-modal, #zone-suggest-modal {
  background: color-mix(in srgb, var(--card-bg) 98%, transparent) !important; border: 1px solid var(--card-border) !important; border-radius: var(--r-lg) !important;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .55), inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);   /* no backdrop blur: the surface is 98% opaque, so the blur could not be seen, only paid for */
}
dialog#coverage-warning-modal { border-radius: var(--r-md) !important; }
dialog::backdrop { background: rgba(4, 6, 10, .52); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
dialog#coverage-warning-modal::backdrop { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.modal-header { border-bottom-color: var(--card-border); }

#tools-menu, #shift-zone-picker, #zcr-pop, .kpi-container.stage1b-popover, .ui-toast {
  background: var(--glass) !important; border: 1px solid var(--card-border) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
  box-shadow: 0 22px 56px rgba(0, 0, 0, .5), inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent) !important;
}
#tools-menu { border-radius: var(--r-lg) !important; }
#tools-menu button { border-radius: 12px !important; }
#shift-zone-picker, #zcr-pop, .kpi-container.stage1b-popover { border-radius: var(--r-md) !important; }
#shift-zone-picker .szp-grid button { border-radius: 12px; }
.ui-toast { border-radius: var(--r-md) !important; border-left-width: 1px !important; box-shadow: 0 18px 44px rgba(0, 0, 0, .45) !important; }
.ui-toast::before { content: ""; align-self: stretch; width: 4px; border-radius: 2px; background: var(--accent); flex: none; margin: 2px 0; }
.ui-toast.success::before { background: var(--green); }
.ui-toast.warn::before { background: var(--orange); }
.ui-toast.error::before { background: var(--red); }
#fit-controls, #zone-edit-chip, #sync-status { -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); }
#fit-controls { background: var(--glass) !important; border-color: var(--card-border) !important; }
#sync-status { background: var(--glass); border-color: var(--card-border); color: var(--text); }
#zone-edit-chip { background: var(--glass) !important; border-color: var(--orange) !important; color: var(--orange-text) !important; }
/* Zone counts header: sentence case */
#roster-table tfoot tr.zone-cov-row td.zcr-name span.zcr-toggle { text-transform: none; letter-spacing: 0; font-size: .8rem; font-weight: 600; }
#roster-table tfoot tr.zone-cov-row td.zcr-mid { text-transform: none; letter-spacing: 0; font-size: .7rem; }

html.phone-mode body { background-image: none; }

/* Print is untouched: it has its own sheet and forces white */
@media print { body { background-image: none !important; } }

/* ==========================================================================
   STAGE 2 - APPLE STYLE A: header + KPI widgets
   Same grid and same content as before (the layers above still place everything); only the look changes: soft glass widgets,
   44pt+ heights, bigger type, a segmented date pill and a roomier Staff box. Row heights are --h1 (top row) and --h2 (KPI/buttons row).
   ========================================================================== */
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) { --h1: 44px; --h2: 54px; --wfill: rgba(255, 255, 255, .068); --wfill-hi: rgba(255, 255, 255, .12); }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) { gap: 8px !important; padding: 6px 4px !important; min-height: 0 !important; }

/* widgets: glass fill + hairline + soft top light (no gradient, no coloured outline) */
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage19-date-nav .date-box, html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage7-lead-card, html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-performance, html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-kpi, html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) #stage7-top-actions > button {
  background: var(--wfill) !important; background-image: none !important; border: 1px solid var(--card-border) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 5.5%, transparent) !important; transition: background-color var(--m-state) var(--e-std);
}
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage19-date-nav .date-box, html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage7-lead-card, html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-performance { border-radius: 14px !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-kpi, html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) #stage7-top-actions > button { border-radius: 16px !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-performance:hover, html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) #stage7-top-actions > button:hover { background: var(--wfill-hi) !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-performance:active, html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) #stage7-top-actions > button:active { background: color-mix(in srgb, var(--text) 17%, transparent) !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) #stage7-leads { gap: 8px !important; padding: 0 !important; }

/* date pill: segmented, 40 x 36 steps with soft round ends */
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage19-date-nav .date-box { height: var(--h1) !important; padding: 3px !important; gap: 2px; align-items: center; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage19-date-nav .stage19-date-step { width: 42px !important; height: 100% !important; border: 0 !important; border-radius: 11px !important; background: transparent !important; color: var(--text); font-size: 1.3rem; padding: 0 0 2px !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage19-date-nav .stage19-date-step:hover { background: var(--wfill-hi) !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage19-date-nav .stage1b-date-button { height: 100% !important; border: 0 !important; border-radius: 11px !important; background: transparent !important; color: var(--text); font-size: clamp(.95rem, 1.3vw, 1.12rem) !important; font-weight: 600 !important; letter-spacing: -.01em; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage19-date-nav .stage1b-date-button:hover { background: var(--wfill-hi) !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage19-date-nav .date-box.is-away { border-color: color-mix(in srgb, var(--orange) 55%, transparent) !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage19-date-nav .date-box.is-away .stage1b-date-button { color: var(--orange-text) !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage19-date-nav .stage19-today { height: var(--h1) !important; border-radius: 14px !important; border: 1px solid color-mix(in srgb, var(--orange) 55%, transparent) !important; background: color-mix(in srgb, var(--orange) 16%, transparent) !important; color: var(--orange-text) !important; font-size: .9rem !important; font-weight: 600 !important; padding: 0 14px !important; }

/* top row: lead chips, Performance */
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) #stage7-leads, html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage7-lead-card, html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-performance { height: var(--h1) !important; min-height: var(--h1) !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage7-lead-card { padding: 0 16px !important; justify-content: center; gap: 1px; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage7-lead-card span { font-size: clamp(.66rem, .85vw, .74rem) !important; font-weight: 500 !important; color: var(--text-muted) !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.15; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage7-lead-card strong { font-size: clamp(.84rem, 1.1vw, .98rem) !important; font-weight: 600 !important; line-height: 1.2; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-performance { padding: 0 16px !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-performance .stage1b-perf-copy b { font-size: clamp(.86rem, 1.15vw, 1rem) !important; font-weight: 600 !important; letter-spacing: -.005em; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-performance #stage1b-performance-live { font-size: clamp(.66rem, .85vw, .75rem) !important; color: var(--text-muted) !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-performance > span:last-child { color: var(--text-muted); font-size: 1rem; }

/* brand */
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-brand-copy strong { font-size: clamp(.92rem, 1.25vw, 1.08rem) !important; font-weight: 700 !important; letter-spacing: .02em; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-brand-copy span { font-size: clamp(.66rem, .85vw, .76rem) !important; color: var(--text-muted) !important; }

/* KPI boxes: small label, big number */
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-kpi { height: var(--h2) !important; min-height: var(--h2) !important; padding: 0 14px !important; justify-content: center; align-items: flex-start; gap: 0 !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-kpi > span { font-size: clamp(.66rem, .85vw, .76rem) !important; font-weight: 500 !important; color: var(--text-muted) !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.15; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-kpi strong { font-size: clamp(1.05rem, 1.65vw, 1.4rem) !important; font-weight: 700 !important; letter-spacing: -.012em; line-height: 1.1; font-variant-numeric: tabular-nums; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-staff { padding: 0 14px !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-staff > span { font-size: clamp(.66rem, .85vw, .76rem) !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-staff > strong { font-size: clamp(1.05rem, 1.65vw, 1.4rem) !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-staff > small { font-size: clamp(.62rem, .8vw, .72rem) !important; font-weight: 600 !important; color: var(--green) !important; }

/* buttons row: Edit zones / Lock / Tools */
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) #stage7-top-actions { height: var(--h2) !important; gap: 8px !important; padding-left: 0 !important; align-self: center !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) #stage7-top-actions > button { height: var(--h2) !important; min-height: var(--h2) !important; font-size: clamp(.84rem, 1.15vw, 1rem) !important; font-weight: 600 !important; color: var(--text) !important; }

/* title / date nav fill the row height so the pill is never clipped; the old divider lines go */
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-brand, html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-title, html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage19-date-nav { height: var(--h1) !important; min-height: var(--h1) !important; overflow: visible !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-symbol, html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) #stage7-leads, html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-performance, html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-brand { border-right-color: transparent; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) #stage7-leads { border: 0 !important; box-shadow: none !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) #stage7-leads::before, html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) #stage7-leads::after, html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-brand::after, html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-symbol::after { display: none !important; }

/* Staff: label on top, count and "n active" on one line, left aligned like the other boxes */
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-staff { display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: baseline; column-gap: 8px !important; justify-items: start; text-align: left !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-staff > span { grid-column: 1 / -1; text-align: left !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-staff > strong { grid-column: 1; width: auto !important; margin: 0 !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-staff > small { grid-column: 2; margin: 0 !important; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: clamp(.6rem, .76vw, .7rem) !important; }

/* wide screens (1880+): one row, both rows the same height */
@media (min-width: 1880px) and (min-aspect-ratio: 1/1) {
  html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) { --h1: 50px; --h2: 50px; grid-template-areas: "brand title leads perf sales splh upt aov staff actions" !important; grid-template-rows: auto !important;
    grid-template-columns: minmax(200px, 1fr) minmax(190px, 1.2fr) minmax(230px, 1.3fr) minmax(180px, 1.1fr) repeat(4, minmax(96px, .8fr)) minmax(150px, 1.1fr) minmax(400px, 2.6fr) !important; }
}
/* portrait / compact keep the layout chosen by the layers above */
@media (max-width: 949px), (max-aspect-ratio: 1/1) {
  html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) { --h1: 50px; --h2: 50px; }
  html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-kpi strong, html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) .stage1b-staff > strong { font-size: clamp(.9rem, 2.2vw, 1.15rem) !important; }
}
/* two rows (iPad landscape up to a 1879px laptop or monitor): wider KPI and Staff boxes so the bigger numbers fit */
@media (min-width: 950px) and (max-width: 1879px) and (min-aspect-ratio: 1/1) {
  html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) { grid-template-areas: "brand brand title title title leads leads leads perf perf perf perf" "sales splh upt aov staff actions actions actions actions actions actions actions" !important;
    grid-template-rows: auto auto !important;
    grid-template-columns: repeat(4, minmax(0, 1.15fr)) minmax(0, 1.9fr) repeat(7, minmax(0, .85fr)) !important; }
}
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) #stage7-top-actions { border: 0 !important; box-shadow: none !important; background: transparent !important; }
html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) #stage7-top-actions::before, html body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_) #stage7-top-actions::after { display: none !important; }

/* ==========================================================================
   STAGE 3 - APPLE STYLE A: the sheet (header, zone blocks, now-line)
   Names, break buttons and the grid lines were tried (rings, bigger names, softer grid) and put back to the earlier look:
   the break pills are bigger tap targets and the quarter-hour grid is needed for zoning.
   ========================================================================== */
#roster-table { --zr: clamp(5px, calc((var(--row-h, 44px) - 7px) * .3), 10px); }
html.fit-sheet #roster-table { --zr: clamp(5px, calc((var(--fit-rh) - 7px) * .3), 10px); }

/* the sheet itself */
#main-table-container, .table-container { border-radius: 22px !important; border: 1px solid var(--card-border) !important; background: var(--bg) !important; }

/* header strip: one calm tone, muted labels, only a hairline under it */
html body #roster-table thead th, html body #roster-table thead th.col-sticky-left { background: var(--bg) !important; border-bottom: 1px solid color-mix(in srgb, var(--text) 6%, transparent) !important; }
html body #roster-table thead tr:first-child th.q-hour { font-size: clamp(.74rem, .95vw, .88rem) !important; font-weight: 600 !important; color: var(--text-2) !important; border-right: 1px solid color-mix(in srgb, var(--text) 7.5%, transparent) !important; }
html body #roster-table thead th.col-name, html body #roster-table thead th.col-breaks, html body #roster-table thead th.col-del { font-size: .72rem !important; font-weight: 600 !important; color: var(--text-muted) !important; letter-spacing: 0 !important; text-transform: none !important; }
.breaks-head > span { font-size: .72rem !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--text-muted); }
#roster-table .breaks-head small { letter-spacing: 0 !important; text-transform: none !important; }

/* the current hour: a white bubble */
#roster-table .hour-header.now-hour-simple { background: var(--bg) !important; position: sticky; overflow: hidden; box-shadow: none !important; animation: none !important; }
#roster-table .hour-header.now-hour-simple::before { content: ""; position: absolute; inset: 4px 5px; border-radius: 12px; background: #f5f5f7; box-shadow: 0 2px 10px rgba(0, 0, 0, .35), 0 0 18px color-mix(in srgb, var(--text) 16%, transparent); z-index: 0; }
#roster-table .hour-header.now-hour-simple > span { position: relative; z-index: 1; }
#roster-table .hour-header.now-hour-simple .now-hour-main { color: #14161c !important; font-weight: 800; }
#roster-table .hour-header.now-hour-simple .now-hour-time { color: #596070 !important; text-shadow: none !important; letter-spacing: 0 !important; font-weight: 700; text-transform: none !important; }

/* frozen columns end in a hairline and a soft shadow instead of a bright blue line */
#roster-table .col-sticky-left.col-del, body.locked-mode #roster-table .col-sticky-left.col-breaks { border-right: 1px solid var(--card-border) !important; box-shadow: 10px 0 18px -10px rgba(0, 0, 0, .55) !important; }

/* zone blocks: soft, top-lit, gently raised */
#roster-table .zone-ribbon { border-radius: var(--zr) !important; border: 0 !important; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 16%, transparent), 0 2px 5px rgba(0, 0, 0, .3) !important; }
#roster-table td.slot-zone:first-child .zone-ribbon, #roster-table td.slot-zone:last-child .zone-ribbon { border-radius: var(--zr) !important; }
#roster-table .zone-ribbon:not(.lunch-ribbon)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(color-mix(in srgb, var(--text) 17%, transparent), color-mix(in srgb, var(--text) 0%, transparent) 58%); pointer-events: none; z-index: 1; }
#roster-table .zone-ribbon, #roster-table .zone-ribbon span, #roster-table .zone-ribbon strong { text-shadow: 0 1px 1px rgba(0, 0, 0, .22); }
html.fit-sheet #roster-table .zone-ribbon span, html.fit-sheet #roster-table .zone-ribbon div > span { font-size: min(calc(var(--fit-fs) * 1.14), .78rem) !important; }
#roster-table .zone-ribbon.lunch-ribbon.lunch-round-l { border-top-left-radius: var(--zr) !important; border-bottom-left-radius: var(--zr) !important; }
#roster-table .zone-ribbon.lunch-ribbon.lunch-round-r { border-top-right-radius: var(--zr) !important; border-bottom-right-radius: var(--zr) !important; }

/* the now-line glows */
#now-line { box-shadow: 0 0 0 1px rgba(8, 14, 21, .4), 0 0 10px color-mix(in srgb, var(--text) 70%, transparent), 0 0 24px color-mix(in srgb, var(--text) 28%, transparent); }

/* ==========================================================================
   STAGE 4 - APPLE STYLE A: zone counts, floating controls, Quick edit, dialogs, phone view
   Colour, corner and type changes only: nothing that you tap gets smaller or moves (the floating controls get a little bigger).
   ========================================================================== */

/* signed out: the collapsed zone key must not leave a 2px sliver next to Sales */
html body.locked-mode .zone-legend.manager-only { display: none !important; }

/* zone counts: soft rounded chips drawn by ::before (colour = --zc, set by app.js) on an opaque cell, so nothing scrolling underneath shows at the corners */
#roster-table tfoot tr.zone-cov-row td.zcr-cell { background: var(--bg) !important; background-image: none !important; border: 0 !important; box-shadow: none !important; }
#roster-table tfoot tr.zone-cov-row td.zcr-cell::before { content: ""; position: absolute; inset: 1px 1px 2px 1px; border-radius: 8px; background: var(--zc, transparent); z-index: -1; pointer-events: none; }
#roster-table tfoot tr.zone-cov-row td.zcr-cell.q-hour::before { right: 2px; }
#roster-table tfoot tr.zone-cov-row td.zcr-cell.short { --zc: #b45309; background: var(--bg) !important; }
#roster-table tfoot tr.zone-cov-row.zcr-rowhl td.zcr-cell::before, #roster-table tfoot tr.zone-cov-row td.zcr-cell.zcr-colhl::before { background-image: linear-gradient(color-mix(in srgb, var(--text) 16%, transparent), color-mix(in srgb, var(--text) 16%, transparent)); }
#roster-table tfoot tr.zone-cov-row.zcr-rowhl td.zcr-cell.zcr-colhl::before { background-image: linear-gradient(color-mix(in srgb, var(--text) 34%, transparent), color-mix(in srgb, var(--text) 34%, transparent)); box-shadow: inset 0 0 0 2px #fff; }
#roster-table tfoot tr.zone-cov-row td.zcr-name span:not(.zcr-toggle) { border-radius: 999px; padding: 3px 10px; }

/* floating controls: a glass capsule with a white pill on the chosen view (like iOS segmented controls), a little bigger to tap */
#fit-controls { height: 40px !important; padding: 3px !important; align-items: stretch; overflow: hidden; background: var(--glass) !important; border: 1px solid var(--card-border) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .45) !important; }
#fit-controls button { height: 100%; min-width: 66px !important; border-radius: 999px !important; font-size: .86rem !important; font-weight: 600 !important; color: var(--text-muted) !important; background: transparent !important; }
#fit-controls button.on { background: color-mix(in srgb, var(--text) 94%, transparent) !important; color: #14161c !important; }
#coverage-status { height: 36px !important; min-height: 36px !important; font-size: .8rem !important; background: var(--glass) !important; border-color: var(--card-border); box-shadow: 0 8px 24px rgba(0, 0, 0, .45) !important; }
body > #coverage-status { bottom: calc(var(--foot-h, 34px) + 16px) !important; }
#coverage-status.has-coverage-gaps { border-color: color-mix(in srgb, var(--orange) 60%, transparent); }
#zone-edit-chip { bottom: calc(var(--foot-h, 34px) + 108px) !important; height: 36px !important; background: var(--glass) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .45) !important; font-size: .82rem !important; }
#zone-edit-chip b { height: 28px !important; padding: 0 14px !important; }

/* Quick edit sheet: grab handle, hairline buttons */

/* dialogs: calmer titles and a round close button */
dialog .modal-header h2 { font-size: 1.3rem; font-weight: 650; letter-spacing: -.012em; }
dialog .modal-close { width: 36px; height: 36px; border-radius: 50%; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text-muted); font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: background-color var(--m-state) var(--e-std); }
dialog .modal-close:hover { background: color-mix(in srgb, var(--text) 18%, transparent); color: var(--text); }

/* paint bar chips: softer corners, same size */
html body #zone-badges-container > .zone-badge { border-radius: 12px !important; }

/* phone view: bigger corners, glass tab bar */
#phone-view .pv-chip { border-radius: 9px; }

/* ---- Stage 4 follow-ups (user feedback) ---- */
/* Normal / Fit: a white thumb slides between the two */
#fit-controls { display: grid !important; grid-template-columns: 1fr 1fr; position: fixed; }
#fit-controls .fc-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: color-mix(in srgb, var(--text) 95%, transparent); box-shadow: 0 1px 5px rgba(0, 0, 0, .4); transform: translateX(0); z-index: 0; pointer-events: none; }
#fit-controls.is-fit .fc-thumb { transform: translateX(100%); }
#fit-controls button { position: relative; z-index: 1; min-width: 72px !important; }
#fit-controls button.on { background: transparent !important; color: #14161c !important; }

/* the floating "coverage gaps" pill is gone (Tools > Planning > Coverage gaps, and the amber numbers in Zone counts, show the same); the controls drop to fill its place */
body > #coverage-status { display: none !important; }
#fit-controls { bottom: calc(var(--foot-h, 34px) + 16px) !important; }
#zone-edit-chip { bottom: calc(var(--foot-h, 34px) + 64px) !important; }
dialog#coverage-warning-modal { inset: auto 22px calc(var(--foot-h, 34px) + 68px) auto; }

/* paint chips look like the zone blocks: same corner, soft top light, same font weight */
html body:is(.locked-mode, :not(.locked-mode)) #zone-badges-container > .zone-badge {
  border: 0 !important; border-radius: 10px !important; font-weight: 500 !important; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; text-shadow: 0 1px 1px rgba(0, 0, 0, .22);
  background-image: linear-gradient(color-mix(in srgb, var(--text) 17%, transparent), color-mix(in srgb, var(--text) 0%, transparent) 58%) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 16%, transparent), 0 2px 5px rgba(0, 0, 0, .3) !important;
}
html body:is(.locked-mode, :not(.locked-mode)) #zone-badges-container > .zone-badge.selected { box-shadow: 0 0 0 2px color-mix(in srgb, var(--text) 95%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 16%, transparent), 0 4px 12px rgba(0, 0, 0, .4) !important; }

/* ==========================================================================
   PHONE MODE FOR SUPERVISORS (block 21): slim header, Breaks / Floor / Team tabs, person sheet
   Style A tokens; every control >= 44px.
   ========================================================================== */
html.phone-mode body { background-image: radial-gradient(500px 300px at 20% -5%, #121c20, var(--bg) 70%); background-attachment: fixed; }
#phone-view .pv-top { position: sticky; top: 0; z-index: 20; margin: 0 -14px; padding: calc(env(safe-area-inset-top) + 12px) 14px 8px; background: color-mix(in srgb, var(--bg) 96%, transparent); }
#phone-view .pv-r1 { display: flex; gap: 8px; align-items: center; }
#phone-view .pv-datepill { flex: 1; min-width: 0; display: flex; align-items: center; height: 46px; padding: 0; overflow: hidden; border-radius: 14px; background: var(--wfill, color-mix(in srgb, var(--text) 7%, transparent)); border: 1px solid var(--card-border); }
#phone-view .pv-datepill button { height: 100%; border: 0; border-radius: 11px; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
#phone-view .pv-datepill button:active { background: color-mix(in srgb, var(--text) 12%, transparent); }
#phone-view .pv-datepill button:not(.pv-datebtn) { width: 44px; font-size: 1.35rem; padding: 0 0 2px; }
#phone-view .pv-datebtn { flex: 1; min-width: 0; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; }
#phone-view .pv-timechip { height: 44px; min-width: 96px; padding: 0 12px; border-radius: 14px; background: var(--wfill, color-mix(in srgb, var(--text) 7%, transparent)); border: 1px solid var(--card-border); color: var(--text); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; font: inherit; cursor: pointer; }
#phone-view .pv-timechip b { font-size: .95rem; font-weight: 650; letter-spacing: -.01em; font-variant-numeric: tabular-nums; line-height: 1.1; }
#phone-view .pv-timechip small { display: flex; align-items: center; gap: 5px; font-size: .68rem; color: var(--text-muted); line-height: 1.1; }
#phone-view .pv-timechip i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); }
#phone-view .pv-timechip.away { border-color: color-mix(in srgb, var(--orange) 60%, transparent); background: color-mix(in srgb, var(--orange) 12%, transparent); }
#phone-view .pv-lockbtn { flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--wfill, color-mix(in srgb, var(--text) 7%, transparent)); border: 1px solid var(--card-border); font-size: 1.05rem; cursor: pointer; color: var(--text); }
#phone-view .pv-lockbtn.on { border-color: color-mix(in srgb, var(--green) 55%, transparent); background: color-mix(in srgb, var(--green) 14%, transparent); }
#phone-view .pv-r2 { margin-top: 6px; padding: 0 4px; min-height: 16px; font-size: .75rem; color: var(--text-muted); }
#phone-view .pv-r2 b { color: var(--text); font-weight: 600; }
#phone-view .pv-warn { display: inline-flex; align-items: center; margin: 4px 0 0; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--orange) 40%, transparent); background: color-mix(in srgb, var(--orange) 10%, transparent); color: var(--orange-text); font-size: .82rem; font-weight: 600; max-width: 100%; overflow: hidden; }
#phone-view .pv-warn button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
#phone-view .pv-warn-go { padding: 0 6px 0 14px; } #phone-view .pv-warn-x { padding: 0 14px 0 8px; opacity: .8; } #phone-view .pv-warn .ic { width: 16px; height: 16px; }
#tools-menu .tm-badge:not(.red):not(.amber) { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text-muted); }
#phone-view .pv-chip { padding: 4px 9px; border-radius: 8px; font-size: .74rem; letter-spacing: .03em; }
#phone-view .pv-chip.sm { padding: 3px 8px; font-size: .66rem; border-radius: 7px; }
#phone-view .pv-chip-lunch { background: var(--card-border); color: var(--text-muted); }

/* tabs */
#phone-view .pv-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: 4px; padding: 6px 10px calc(env(safe-area-inset-bottom) + 8px); background: var(--surface); border-top: 1px solid var(--card-border); }
#phone-view .pv-tab { flex: 1; height: 54px; border: 0; border-radius: 14px; background: transparent; color: var(--text-muted); font: inherit; font-size: .7rem; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; position: relative; cursor: pointer; }
#phone-view .pv-tab svg { width: 25px; height: 25px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#phone-view .pv-tab.active { color: var(--accent); }
#phone-view .pv-bd { position: absolute; top: 2px; left: calc(50% + 6px); min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--red); color: #fff; font-style: normal; font-size: .68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
#phone-view .pv-foot button { min-height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: transparent; color: var(--text-muted); font: inherit; font-size: .85rem; }

/* summary tiles and lists */
#phone-view .pv-sum { display: flex; gap: 8px; margin: 8px 0 2px; }
#phone-view .pv-tile { flex: 1; height: 64px; padding: 0 14px; border-radius: 16px; background: var(--wfill, color-mix(in srgb, var(--text) 7%, transparent)); border: 1px solid var(--card-border); color: var(--text); font: inherit; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; cursor: pointer; }
#phone-view .pv-tile b { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
#phone-view .pv-tile span { font-size: .75rem; color: var(--text-muted); margin-top: 3px; }
#phone-view .pv-tile.o b { color: var(--orange); } #phone-view .pv-tile.r b { color: var(--red); } #phone-view .pv-tile.b b { color: var(--accent); }
#phone-view .pv-sec { margin: 20px 4px 8px; font-size: .8rem; font-weight: 650; color: var(--text-muted); display: flex; align-items: center; gap: 8px; scroll-margin-top: 150px; }
#phone-view .pv-sec em, #phone-view .pv-fold summary em { font-style: normal; font-size: .75rem; color: var(--text); background: color-mix(in srgb, var(--text) 12%, transparent); border-radius: 999px; padding: 1px 8px; font-weight: 600; }
#phone-view .pv-sec.red { color: var(--red); } #phone-view .pv-sec.red em { background: color-mix(in srgb, var(--red) 22%, transparent); color: #ff8a82; }
#phone-view .pv-list { border-radius: 18px; background: var(--wfill, color-mix(in srgb, var(--text) 7%, transparent)); border: 1px solid var(--card-border); overflow: hidden; }
#phone-view .pv-row { display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 8px 10px 8px 14px; border-top: 1px solid var(--card-border); cursor: pointer; }
#phone-view .pv-row:first-child { border-top: 0; }
#phone-view .pv-row:active { background: color-mix(in srgb, var(--text) 5%, transparent); }
#phone-view .pv-zbar { width: 4px; align-self: stretch; margin: 4px 0; border-radius: 2px; flex: none; background: var(--red); }
#phone-view .pv-rmain { flex: 1; min-width: 0; }
#phone-view .pv-nm { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
#phone-view .pv-nm b { font-size: 1.06rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#phone-view .pv-sub { display: flex; flex-wrap: wrap; gap: 2px 6px; margin-top: 2px; font-size: .82rem; color: var(--text-muted); }
#phone-view .pv-late { color: #ff8a82; } #phone-view .pv-warn2 { width: 100%; color: var(--orange-text); font-weight: 600; }
#phone-view .pv-when { flex: none; width: 46px; text-align: center; font-variant-numeric: tabular-nums; }
#phone-view .pv-when b { display: block; font-size: 1rem; font-weight: 650; } #phone-view .pv-when small { font-size: .66rem; color: var(--text-muted); white-space: nowrap; }
#phone-view .pv-btn { flex: none; height: 44px; min-width: 80px; padding: 0 16px; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; }
#phone-view .pv-btn.p { background: var(--accent-fill); color: #fff; } #phone-view .pv-btn.g { background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green); }
#phone-view .pv-btn.s { min-width: 62px; padding: 0 12px; font-size: .88rem; color: var(--text-muted); }
#phone-view .pv-btn:active { filter: brightness(1.2); } #phone-view .pv-btn:disabled { opacity: .35; pointer-events: none; }
#phone-view .pv-ring { flex: none; width: 54px; height: 54px; border-radius: 50%; background: conic-gradient(var(--orange) calc(var(--p, 0) * 1%), color-mix(in srgb, var(--text) 12%, transparent) 0); display: grid; place-items: center; position: relative; }
#phone-view .pv-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--card-bg); }
#phone-view .pv-ring b { position: relative; font-size: .78rem; font-weight: 650; font-variant-numeric: tabular-nums; }
#phone-view .pv-none { padding: 22px 14px; text-align: center; color: var(--text-muted); font-size: .9rem; }
#phone-view .pv-fold { margin-top: 20px; }
#phone-view .pv-fold[open] > .pv-list { animation: ovFoldIn var(--m-state) var(--e-std) backwards; }   /* Calm fold-out (keyframes in CALM A8) */
#phone-view .pv-fold summary { list-style: none; margin: 0 4px 8px; height: 40px; display: flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 650; color: var(--text-muted); cursor: pointer; }
#phone-view .pv-fold summary::-webkit-details-marker { display: none; }
#phone-view .pv-fold summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--m-state) var(--e-std); } #phone-view .pv-fold[open] summary::after { transform: rotate(135deg); }
#phone-view .pv-info { margin: 8px 0 0; padding: 10px 12px 10px 14px; border-radius: 16px; background: color-mix(in srgb, var(--orange) 12%, transparent); border: 1px solid color-mix(in srgb, var(--orange) 40%, transparent); display: flex; align-items: center; gap: 10px; font-size: .88rem; }
#phone-view .pv-info span { flex: 1; } #phone-view .pv-info button { flex: none; height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--text) 14%, transparent); color: var(--text); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }

/* sheet */
#pv-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; }
#pv-scrim.on { opacity: 1; pointer-events: auto; }
#pv-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 88vh; overflow-y: auto; padding: 8px 16px calc(env(safe-area-inset-bottom) + 18px); border-radius: 26px 26px 0 0; border-top: 1px solid var(--card-border); background: rgba(27,31,40,.99); box-shadow: 0 -20px 60px rgba(0,0,0,.5); transform: translateY(105%); visibility: hidden; max-width: 560px; margin: 0 auto; }
#pv-sheet.on { transform: none; visibility: visible; }
#pv-sheet .pv-grab { width: 40px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--text) 22%, transparent); margin: 2px auto 12px; }
#pv-sheet .pv-shead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
#pv-sheet .pv-shead h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; border: 0; padding: 0; margin: 0; }
#pv-sheet .pv-shead small { display: block; margin-top: 3px; font-size: .82rem; color: var(--text-muted); }
#pv-sheet .pv-x { margin-left: auto; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text-muted); font-size: 1.1rem; cursor: pointer; }
#pv-sheet .pv-lab { margin: 14px 2px 8px; font-size: .78rem; font-weight: 650; color: var(--text-muted); }
#pv-sheet .pv-bt { margin-bottom: 10px; padding: 12px 12px 12px 14px; border-radius: 18px; background: var(--wfill, color-mix(in srgb, var(--text) 7%, transparent)); border: 1px solid var(--card-border); }
#pv-sheet .pv-bt.over { border-color: color-mix(in srgb, var(--red) 50%, transparent); }
#pv-sheet .pv-bt.active { border-color: color-mix(in srgb, var(--orange) 60%, transparent); background: color-mix(in srgb, var(--orange) 8%, transparent); }
#pv-sheet .pv-bt.done { opacity: .8; }
#pv-sheet .pv-bt1 { display: flex; align-items: baseline; gap: 8px; } #pv-sheet .pv-bt1 b { font-size: 1.05rem; font-weight: 650; } #pv-sheet .pv-bt1 span { font-size: .8rem; color: var(--text-muted); }
#pv-sheet .pv-status { margin-left: auto; font-style: normal; font-size: .78rem; font-weight: 650; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text-muted); font-variant-numeric: tabular-nums; }
#pv-sheet .pv-status.r { background: color-mix(in srgb, var(--red) 22%, transparent); color: #ff8a82; } #pv-sheet .pv-status.o { background: color-mix(in srgb, var(--orange) 24%, transparent); color: var(--orange-text); } #pv-sheet .pv-status.g { background: color-mix(in srgb, var(--green) 20%, transparent); color: var(--green); }
#pv-sheet .pv-bt2 { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
#pv-sheet .pv-step { display: flex; align-items: center; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--text) 7%, transparent); flex: none; }
#pv-sheet .pv-step button { width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--text); font-size: 1.4rem; cursor: pointer; } #pv-sheet .pv-step button:active { background: color-mix(in srgb, var(--text) 12%, transparent); } #pv-sheet .pv-step button:disabled { opacity: .3; }
#pv-sheet .pv-step span { min-width: 74px; text-align: center; font-size: .9rem; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }
#pv-sheet .pv-bacts { margin-left: auto; display: flex; gap: 6px; }
#pv-sheet .pv-bw { margin-top: 8px; font-size: .82rem; color: var(--orange-text); font-weight: 600; }
#pv-sheet .pv-tbtn { display: flex; gap: 10px; margin: 8px 0; } #pv-sheet .pv-tbtn .pv-btn { flex: 1; height: 52px; }
#pv-sheet .pv-info { margin-bottom: 4px; }
#pv-toast { position: fixed; left: 14px; right: 14px; bottom: calc(env(safe-area-inset-bottom) + 84px); z-index: 50; max-width: 532px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 16px; background: #2c313c; border: 1px solid var(--card-border); box-shadow: 0 14px 40px rgba(0,0,0,.5); font-size: .92rem; transform: translateY(40px); opacity: 0; visibility: hidden; pointer-events: none; }
#pv-toast.on { transform: none; opacity: 1; visibility: visible; pointer-events: auto; }
#pv-toast span { flex: 1; line-height: 1.3; } #pv-toast button { flex: none; height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: color-mix(in srgb, var(--text) 12%, transparent); color: var(--text); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
html:not(.phone-mode) #pv-scrim, html:not(.phone-mode) #pv-sheet, html:not(.phone-mode) #pv-toast { display: none; }
/* the sign-in dialog on a phone: bigger fields (16px stops iOS zooming in) and full-width buttons */

/* Floor tab: short-zone alerts, zone cards, Cover sheet */
#phone-view .pv-gap { margin: 8px 0 0; padding: 12px 12px 12px 14px; border-radius: 16px; background: color-mix(in srgb, var(--red) 12%, transparent); border: 1px solid color-mix(in srgb, var(--red) 45%, transparent); display: flex; align-items: center; gap: 12px; }
#phone-view .pv-gt { flex: 1; min-width: 0; font-size: .88rem; line-height: 1.4; }
#phone-view .pv-gt b { display: block; font-size: .98rem; font-weight: 650; color: #ff8a82; }
#phone-view .pv-btn.r { background: var(--red-fill); color: #fff; }
#phone-view .pv-zcard { margin-top: 12px; border-radius: 18px; background: var(--wfill, color-mix(in srgb, var(--text) 7%, transparent)); border: 1px solid var(--card-border); overflow: hidden; }
#phone-view .pv-zcard.short { border-color: color-mix(in srgb, var(--red) 50%, transparent); }
#phone-view .pv-zh { display: flex; align-items: center; gap: 10px; padding: 12px 14px; }
#phone-view .pv-zh .pv-chip { padding: 5px 11px; font-size: .78rem; border-radius: 9px; }
#phone-view .pv-shortby { font-size: .78rem; font-weight: 650; color: #ff8a82; }
#phone-view .pv-zn { margin-left: auto; font-size: .82rem; color: var(--text-muted); } #phone-view .pv-zn b { color: var(--text); font-size: .98rem; margin-right: 2px; }
#phone-view .pv-zrow { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 14px; border-top: 1px solid var(--card-border); cursor: pointer; }
#phone-view .pv-zrow:active { background: color-mix(in srgb, var(--text) 5%, transparent); }
#phone-view .pv-zrow b { flex: 1; min-width: 0; font-size: 1.04rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#phone-view .pv-zrow span { font-size: .82rem; color: var(--text-muted); white-space: nowrap; }
#phone-view .pv-zrow.away b { color: var(--text-muted); font-weight: 500; } #phone-view .pv-zrow.away span { color: var(--orange-text); }
#pv-sheet .pv-cand { display: flex; align-items: center; gap: 10px; min-height: 60px; padding: 6px 2px; border-top: 1px solid var(--card-border); }
#pv-sheet .pv-cand:first-of-type { border-top: 0; }
#pv-sheet .pv-cand > div { flex: 1; min-width: 0; }
#pv-sheet .pv-cand b { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; font-weight: 600; }
#pv-sheet .pv-cand span { display: block; margin-top: 2px; font-size: .82rem; color: var(--text-muted); }
#pv-sheet .pv-hint { margin: 10px 2px 0; font-size: .8rem; color: var(--text-muted); }
#pv-sheet .pv-none { padding: 18px 4px; }
#phone-view .pv-gnote { margin-left: 8px; font-size: .75rem; color: var(--text-muted); font-weight: 400; }

/* Team tab: search, one row per person with their day as a colour strip and three break dots */
#phone-view .pv-search { position: sticky; top: var(--pv-top-h, 100px); z-index: 15; margin: 8px 0 10px; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--card-border); }
#phone-view .pv-search svg { flex: none; width: 18px; height: 18px; stroke: var(--text-muted); fill: none; stroke-width: 2; stroke-linecap: round; }
#phone-view .pv-search input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 16px; -webkit-appearance: none; }
#phone-view .pv-prow { padding: 12px 14px 12px; border-top: 1px solid var(--card-border); cursor: pointer; }
#phone-view .pv-prow:first-child { border-top: 0; } #phone-view .pv-prow:active { background: color-mix(in srgb, var(--text) 5%, transparent); }
#phone-view .pv-pl1 { display: flex; align-items: center; gap: 8px; min-height: 28px; }
#phone-view .pv-pl1 > b { flex: 1; min-width: 0; font-size: 1.06rem; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#phone-view .pv-chip-away { background: var(--orange); color: #1a1100; }
#phone-view .pv-dots { display: flex; gap: 6px; flex: none; }
#phone-view .pv-dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--text) 34%, transparent); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: .56rem; font-weight: 800; line-height: 1; }
#phone-view .pv-dot.done { border-color: var(--green); background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
#phone-view .pv-dot.active { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 26%, transparent); }
#phone-view .pv-dot.over { border-color: var(--red); }
#phone-view .pv-strip { position: relative; height: 10px; margin-top: 9px; border-radius: 5px; background: color-mix(in srgb, var(--text) 7%, transparent); overflow: hidden; }
#phone-view .pv-strip i { position: absolute; top: 0; bottom: 0; }
#phone-view .pv-strip s { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(11,18,21,.5); z-index: 1; }
#phone-view .pv-strip u { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 6px #fff; z-index: 2; }
#phone-view .pv-axis { display: flex; justify-content: space-between; margin-top: 3px; font-size: .66rem; color: rgba(235,235,245,.38); }
/* zone buttons in the person sheet */
#pv-sheet .pv-zchips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
#pv-sheet .pv-zchips::-webkit-scrollbar { display: none; }
#pv-sheet .pv-zb { flex: none; height: 46px; min-width: 74px; padding: 0 14px; border: 2.5px solid transparent; border-radius: 13px; font: inherit; font-size: .84rem; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; cursor: pointer; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 16%, transparent); }
#pv-sheet .pv-zb.cur { border-color: #fff; } #pv-sheet .pv-zb:active { filter: brightness(1.15); }

/* narrow phones (iPhone SE and smaller): the date stays on one line, the break buttons wrap under the time stepper */
#phone-view .pv-datebtn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pv-sheet .pv-bt2 { flex-wrap: wrap; row-gap: 8px; }
@media (max-width: 359px) {
  #phone-view .pv-r1 { gap: 6px; }
  #phone-view .pv-datepill button:not(.pv-datebtn) { width: 34px; }
  #phone-view .pv-datebtn { font-size: .9rem; } #phone-view .pv-wd { display: none; }
  #phone-view .pv-timechip { min-width: 80px; padding: 0 9px; }
  #phone-view .pv-timechip b { font-size: .88rem; }
  #phone-view .pv-sum { gap: 6px; } #phone-view .pv-tile { padding: 0 10px; }
}

/* ==========================================================================
   MORNING SETUP (block 35): the checklist dialog, the empty-day card, and the top of the Tools menu
   ========================================================================== */
#tools-menu .tools-setup { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 52px; margin: 0 0 12px; padding: 0 16px !important; border: 0; border-radius: 14px !important; background: var(--accent-fill) !important; color: #fff !important; font-size: .95rem !important; font-weight: 650; cursor: pointer; }
#tools-menu .tools-setup:active { background: var(--accent-press) !important; }
#tools-menu .tools-setup small { font-size: .78rem; font-weight: 600; opacity: .85; font-variant-numeric: tabular-nums; }
#tools-menu .tools-section:first-of-type { margin-top: 0; }

dialog#setup-modal { width: min(94vw, 580px); max-width: 580px; padding: 20px 20px 16px; max-height: 92vh; overflow-y: auto; }
#setup-modal .su-sub { margin: -2px 0 10px; font-size: .9rem; color: var(--text-muted); }
#setup-modal .su-track { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; margin-bottom: 14px; }
#setup-modal .su-track i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--accent); transition: width var(--m-move) var(--e-std); }
#setup-modal .su-track i.full { background: var(--green); }
#setup-modal .su-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
#setup-modal .su-step { display: flex; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--wfill, color-mix(in srgb, var(--text) 7%, transparent)); border: 1px solid var(--card-border); }
#setup-modal .su-step.next { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
#setup-modal .su-step.done { opacity: .78; }
#setup-modal .su-step.locked { opacity: .5; }
#setup-modal .su-ic { flex: none; width: 28px; height: 28px; margin-top: 1px; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--text) 34%, transparent); display: flex; align-items: center; justify-content: center; font-style: normal; font-size: .82rem; font-weight: 700; color: var(--text-muted); }
#setup-modal .su-ic.ok { border-color: var(--green); background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
#setup-modal .su-ic.warn { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 18%, transparent); color: var(--orange-text); }
#setup-modal .su-ic.opt { border-style: dashed; }
#setup-modal .su-body { flex: 1; min-width: 0; }
#setup-modal .su-body > b { display: block; font-size: 1rem; font-weight: 650; letter-spacing: -.01em; }
#setup-modal .su-body > b em { font-style: normal; font-size: .72rem; font-weight: 600; color: var(--text-muted); margin-left: 6px; }
#setup-modal .su-body > span { display: block; margin-top: 2px; font-size: .86rem; color: var(--text-muted); line-height: 1.35; }
#setup-modal .su-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#setup-modal .su-acts:empty { display: none; }
#setup-modal .su-acts button { min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: .88rem; font-weight: 600; }
#setup-modal .su-leads { display: flex; gap: 10px; margin-top: 10px; }
#setup-modal .su-leads label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: .75rem; font-weight: 600; color: var(--text-muted); }
#setup-modal .su-leads input { height: 44px; padding: 0 12px; font-size: 16px; }
#setup-modal .su-done { margin-top: 12px; padding: 12px 14px; border-radius: 14px; text-align: center; font-weight: 650; color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
#setup-modal .su-foot { display: flex; justify-content: flex-end; margin-top: 14px; }
#setup-modal .su-foot button { min-height: 44px; padding: 0 22px; border-radius: 12px; }

#setup-empty { position: fixed; left: 50%; top: 40%; transform: translateX(-50%); z-index: 420; width: min(90vw, 420px); padding: 22px 22px 20px; border-radius: 22px; background: rgba(26,30,39,.97); border: 1px solid var(--card-border); box-shadow: 0 24px 60px rgba(0,0,0,.55); text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; }
#setup-empty[hidden] { display: none; }
#setup-empty b { font-size: 1.15rem; font-weight: 700; letter-spacing: -.015em; }
#setup-empty > span { font-size: .9rem; color: var(--text-muted); line-height: 1.4; margin-bottom: 10px; }
#setup-empty button { min-height: 50px; padding: 0 22px; border-radius: 14px; font-size: 1rem; font-weight: 650; }
@media print { #setup-empty, #setup-modal { display: none !important; } }

/* ==========================================================================
   COVERAGE PANEL (block 36): gaps, suggested fixes, Apply
   ========================================================================== */
dialog#coverage-warning-modal { position: fixed; inset: 0; margin: auto; width: min(94vw, 620px); max-width: 620px; max-height: 88vh; overflow-y: auto; padding: 20px 20px 16px !important; border-radius: 22px !important; transform-origin: center; box-shadow: 0 28px 70px rgba(0, 0, 0, .55); }
dialog#coverage-warning-modal[open] { animation: none; }
dialog#coverage-warning-modal::backdrop { background: rgba(4, 6, 10, .52); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
dialog#coverage-warning-modal .modal-header h2 { font-size: 1.3rem; }
#coverage-warning-modal > :not(.modal-header):not(#cov-panel) { display: none !important; }
#cov-panel { display: flex; flex-direction: column; gap: 10px; }
#cov-panel .cf-sum { margin: 0 0 2px; font-size: .95rem; font-weight: 600; }
#cov-panel .cf-sum.ok { color: var(--green); } #cov-panel .cf-sum.bad { color: var(--orange-text); }
#cov-panel .cf-card { padding: 14px 14px 12px; border-radius: 18px; background: var(--wfill, color-mix(in srgb, var(--text) 7%, transparent)); border: 1px solid var(--card-border); }
#cov-panel .cf-head { display: flex; align-items: center; gap: 10px; }
#cov-panel .cf-chip { display: inline-block; padding: 5px 11px; border-radius: 9px; font-size: .78rem; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; }
#cov-panel .cf-need { margin-left: auto; font-size: .82rem; color: var(--text-muted); }
#cov-panel .cf-gaps { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#cov-panel .cf-gaps li { display: flex; align-items: baseline; gap: 10px; font-size: .95rem; font-variant-numeric: tabular-nums; }
#cov-panel .cf-gaps li em { font-style: normal; font-size: .8rem; color: #ff8a82; }
#cov-panel .cf-fixes { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--card-border); }
#cov-panel .cf-fh { margin-bottom: 4px; font-size: .75rem; font-weight: 650; color: var(--text-muted); }
#cov-panel .cf-move, #cov-panel .cf-card.cf-unz { display: flex; align-items: center; gap: 12px; }
#cov-panel .cf-move { min-height: 56px; padding: 4px 0; border-top: 1px solid var(--card-border); }
#cov-panel .cf-move:first-of-type { border-top: 0; }
#cov-panel .cf-move > div, #cov-panel .cf-uh { flex: 1; min-width: 0; }
#cov-panel .cf-move b, #cov-panel .cf-uh b { display: block; font-size: 1rem; font-weight: 600; }
#cov-panel .cf-move span, #cov-panel .cf-uh span { display: block; margin-top: 2px; font-size: .82rem; color: var(--text-muted); line-height: 1.35; }
#cov-panel button { min-height: 44px; padding: 0 16px; border-radius: 12px; font-size: .9rem; font-weight: 600; }
#cov-panel .cf-move button { min-width: 78px; }
#cov-panel .cf-card.cf-unz { flex-wrap: wrap; }
#cov-panel .cf-unz .cf-note { flex: 1 0 100%; }
#cov-panel .cf-note { margin: 0; font-size: .82rem; color: var(--text-muted); line-height: 1.4; }
#cov-panel .cf-stuck { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--orange) 10%, transparent); border: 1px solid color-mix(in srgb, var(--orange) 35%, transparent); }
#cov-panel .cf-stuck b { display: block; font-size: .9rem; color: var(--orange-text); }
#cov-panel .cf-stuck span { display: block; margin-top: 2px; font-size: .84rem; line-height: 1.4; }
#cov-panel .cf-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
#cov-panel .cf-hint { margin: 0; text-align: right; font-size: .78rem; color: var(--text-muted); }
#cov-panel .cf-empty { padding: 18px 8px; text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }
#cov-panel .cf-empty b { font-size: 1.05rem; } #cov-panel .cf-empty span { font-size: .88rem; color: var(--text-muted); }
@media (max-width: 520px) { #cov-panel .cf-foot { justify-content: stretch; } #cov-panel .cf-foot button { flex: 1; } }
#cov-panel .cf-past { padding: 10px 14px; border-radius: 14px; border: 1px dashed var(--card-border); font-size: .84rem; color: var(--text-muted); line-height: 1.45; }
#cov-panel .cf-past b { display: block; color: var(--text); font-size: .85rem; margin-bottom: 2px; } #cov-panel .cf-past span { display: block; } #cov-panel .cf-past em { font-style: normal; opacity: .85; }
#cov-panel .cf-foot { position: sticky; bottom: -16px; z-index: 2; margin: 4px -20px -16px; padding: 12px 20px 16px; background: linear-gradient(color-mix(in srgb, var(--card-bg) 0%, transparent), color-mix(in srgb, var(--card-bg) 98%, transparent) 28%); }

/* =============================================================================
   CALM LITE — the Tools window, Calm motion and the extra tools (everything else stays as it was)
   ============================================================================= */
/* tidy tokens: 7 text sizes, 4 corner radii, 3 elevation shadows (edges, rings and inner shadows stay as they are) */
:root { --fs-xs: .72rem; --fs-sm: .8rem; --fs-md: .88rem; --fs-base: .95rem; --fs-lg: 1.05rem; --fs-xl: 1.25rem; --fs-2xl: 1.5rem;
  --rad-sm: 8px; --rad-md: 12px; --rad-lg: 16px; --rad-xl: 20px;
  --sh-1: 0 1px 3px rgba(0,0,0,.4); --sh-2: 0 6px 18px rgba(0,0,0,.5); --sh-3: 0 24px 60px rgba(0,0,0,.5); }

/* =============================================================================
   CALM A1 — foundation: Calm motion tokens, line icons, steady digits
   Calm = about 100-300 ms, springs only for sheets and thumbs, a full no-motion path.
   app.js (block 37) swaps --e-sheet / --e-pop for real springs where linear() is supported.
   ============================================================================= */
:root {
  --m-micro: 120ms; --m-state: 200ms; --m-move: 240ms; --m-sheet: 240ms; --m-panel: 300ms; --m-flash: 700ms;   /* motion review 20 Oct 2026: menus, cards and dialogs open in 240 ms, the person panel in 300, closing in 200 */
  --e-std: cubic-bezier(.2, .8, .2, 1);
  --e-sheet: cubic-bezier(.2, .8, .2, 1); --e-pop: cubic-bezier(.2, .8, .2, 1);
}
html.motion-off { --m-micro: 0ms; --m-state: 0ms; --m-move: 0ms; --m-sheet: 0ms; --m-panel: 0ms; --m-flash: 0ms; }
html.motion-off *, html.motion-off *::before, html.motion-off *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }   /* the Tools switch now stops every transition too, not only the ones that use the motion tokens */
.ic { width: 1.15em; height: 1.15em; vertical-align: -.2em; flex: none; }
button .ic + span, button .ic + .tm-label { margin-left: .45em; }

/* =============================================================================
   CALM A6 — Tools menu: a searchable list with line icons and real switches (same actions as before)
   ============================================================================= */
html body #tools-menu { padding: 12px !important; background: var(--glass); box-shadow: var(--sh-3); transform-origin: top right; animation: ovPopIn var(--m-sheet) var(--e-pop) both; }
html body #tools-menu .tm-search { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; margin: 0 0 10px; border-radius: var(--rad-md); background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text-muted); }
html body #tools-menu .tm-search input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--text); font-size: var(--fs-base); height: 38px; padding: 0 !important; outline: none; }
html body #tools-menu .tm-search .ic { width: 17px; height: 17px; }
html body #tools-menu .tools-section + .tools-section { margin-top: 14px; padding-top: 0; border-top: 0; }
html body #tools-menu .tools-title { margin: 0 4px 6px; font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-2); }
html body #tools-menu .tm-list { display: block; border-radius: var(--rad-lg); overflow: hidden; background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid var(--card-border); }
html body #tools-menu .tm-list > button, html body #tools-menu .tm-list > a {
  display: flex !important; align-items: center; justify-content: flex-start !important; text-align: left; gap: 12px;
  width: 100%; min-height: 48px; padding: 0 14px !important; margin: 0; border: 0 !important; border-top: 1px solid var(--card-border) !important; border-radius: 0 !important;
  background: transparent !important; color: var(--text) !important; font-size: var(--fs-base) !important; font-weight: 500; letter-spacing: 0; box-shadow: none !important;
  transition: background-color var(--m-micro) var(--e-std); text-decoration: none;
}
html body #tools-menu .tm-list > :first-child:not([hidden]), html body #tools-menu .tm-list > [hidden] + :not([hidden]) { border-top: 0 !important; }
html body #tools-menu .tm-list > button:hover, html body #tools-menu .tm-list > a:hover { background: color-mix(in srgb, var(--text) 6%, transparent) !important; }
html body #tools-menu .tm-list > button:active, html body #tools-menu .tm-list > a:active { background: color-mix(in srgb, var(--text) 11%, transparent) !important; }
html body #tools-menu .tm-list > button:disabled { opacity: .38; }
html body #tools-menu .tm-list > button .ic, html body #tools-menu .tm-list > a .ic { width: 21px; height: 21px; color: var(--accent-text); }
html body #tools-menu .tm-list > button .tm-label, html body #tools-menu .tm-list > a .tm-label { margin: 0; flex: 1; text-align: left; }
html body #tools-menu .tm-list > .scan-btn, html body #tools-menu .tm-list > .primary { background: transparent !important; }
html body #tools-menu .tm-list .danger-day-reset .ic { color: var(--red-text, #ff6961); }
html body #tools-menu .tm-badge { font-style: normal; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; font-size: var(--fs-sm); font-weight: 700; background: color-mix(in srgb, var(--text) 12%, transparent); }
html body #tools-menu .tm-badge.red { background: var(--red); color: #fff; }
html body #tools-menu .tm-badge.amber { background: var(--orange); color: #1a1000; }
html body #tools-menu .tm-sw { margin-left: auto; position: relative; flex: none; width: 46px; height: 28px; border-radius: 999px; background: color-mix(in srgb, var(--text) 20%, transparent); transition: background-color var(--m-state) var(--e-std); }
html body #tools-menu .tm-sw::after { content: ""; position: absolute; left: 2px; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: var(--sh-1); transition: transform var(--m-move) var(--e-pop); }
html body #tools-menu .tm-switch.on .tm-sw { background: var(--green, #30d158); }
html body #tools-menu .tm-switch.on .tm-sw::after { transform: translateX(18px); }
html body #tools-menu .tm-switch .tm-label { flex: 1; }
html body #tools-menu .tools-setup { margin-bottom: 14px; }
html body #tools-menu .tools-setup .tools-setup-title { display: inline-flex; align-items: center; gap: 10px; }
html body #tools-menu .tools-setup .ic { width: 21px; height: 21px; }
html body #tools-menu #tools-fields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
html body #tools-menu .tm-hidden-toggle[hidden] { display: none !important; }
html.motion-off #tools-menu { animation: none; }

/* =============================================================================
   CALM A8 — Calm motion applied. Dialogs and sheets ease in with a smooth spring and leave faster than they arrive;
   everything switches off with Reduce Motion (the --m-* tokens drop to 0 and the animations below are removed).
   ============================================================================= */
@keyframes ovDlgIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ovFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ovFoldIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }   /* fold-outs (Tools sections, phone lists) */
@keyframes ovPopIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }   /* popovers and menus: grow from their origin (transform-origin) */
html body dialog[open], html body dialog#coverage-warning-modal[open] { animation: ovDlgIn var(--m-sheet) var(--e-sheet) backwards; }   /* backwards, not both: once open the dialog's own style holds, so closing can fade from it */
html body dialog[open]::backdrop { animation: ovFadeIn var(--m-state) var(--e-std) both; }
html body #pv-sheet { transition: transform var(--m-state) var(--e-std), visibility 0s var(--m-state); }   /* closing: a full slide down, faster than opening */
html body #pv-sheet.on { transition: transform var(--m-panel) var(--e-sheet), visibility 0s; }
html body #pv-scrim { transition: opacity var(--m-state) var(--e-std); }
html body #pv-toast { transition: transform var(--m-micro) var(--e-std), opacity var(--m-micro) var(--e-std), visibility 0s var(--m-micro); }
html body #pv-toast.on { transition: transform var(--m-move) var(--e-pop), opacity var(--m-move) var(--e-pop), visibility 0s; }
html body .ui-toast { animation: ovDlgIn var(--m-move) var(--e-pop) backwards; }   /* backwards, not both: a held animation would block the .out fade */
html body .ui-toast.out { transition: opacity var(--m-micro) var(--e-std); }
html body #fit-controls.anim .fc-thumb { transition: transform var(--m-move) var(--e-pop); }
html body #fit-controls button { transition: color var(--m-state) var(--e-std); }
html body #setup-modal .su-track i { transition: width var(--m-move) var(--e-std); }
html body button:active:not(:disabled) { transform: scale(.97); }
html body button { transition: background-color var(--m-state) var(--e-std), border-color var(--m-state) var(--e-std), color var(--m-state) var(--e-std), opacity var(--m-state) var(--e-std), transform var(--m-micro) var(--e-std); }
html.motion-off dialog[open], html.motion-off .ui-toast { animation: none !important; }
html.motion-off button:active:not(:disabled) { transform: none; }

/* =============================================================================
   CALM D — Day summary, Generate breaks, Copy day, Break check, Preview options
   ============================================================================= */
/* tool dialogs (Day summary, Pilot report, Team access, …). Never name these classes ad-…: ad blockers (EasyList) hide .ad-body, .ad-item, .ad-note */
dialog.tl-dlg { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 40px); }
dialog.tl-dlg.wide { width: min(680px, calc(100vw - 24px)); }
.tl-body { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; max-height: calc(100dvh - 150px); padding: 2px 2px 4px; }
.tl-note { margin: 0; font-size: var(--fs-md); color: var(--text-muted); line-height: 1.45; } .tl-note.warn { color: var(--orange-text); }
.tl-sum { margin: 0; font-size: var(--fs-base); font-weight: 600; } .tl-sum.ok { color: var(--green); } .tl-sum.warn { color: var(--orange-text); } .tl-sum .bad { color: #ff9a93; }
.tl-list { display: flex; flex-direction: column; border: 1px solid var(--card-border); border-radius: var(--rad-lg); overflow-y: auto; max-height: 42vh; background: var(--wfill, color-mix(in srgb, var(--text) 5%, transparent)); }
.tl-list.short { max-height: 26vh; }
.tl-list:empty { display: none; }
.tl-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--card-border); min-height: 48px; }
.tl-item:first-child { border-top: 0; }
.tl-item > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tl-item b { font-weight: 600; font-size: var(--fs-base); } .tl-item span { font-size: var(--fs-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.tl-item span.missing { color: var(--orange-text); } .tl-item span.award { color: #9ec5ff; }
.tl-item button { min-height: 44px; padding: 0 16px; border-radius: var(--rad-md); font-size: var(--fs-md); font-weight: 600; flex: none; }
.tl-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.tl-foot button { min-height: 44px; padding: 0 18px; border-radius: var(--rad-md); font-weight: 600; }
.tl-copybox { width: 100%; min-height: 150px; border-radius: var(--rad-md); border: 1px solid var(--card-border); background: var(--input-bg); color: var(--text); padding: 10px; font: .85rem/1.45 ui-monospace, monospace; }
.tl-switch { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--card-border); border-radius: var(--rad-lg); cursor: pointer; background: var(--wfill, color-mix(in srgb, var(--text) 5%, transparent)); }
.tl-switch input { position: absolute; opacity: 0; pointer-events: none; }
.tl-switch .tl-sw { flex: none; position: relative; width: 46px; height: 28px; border-radius: 999px; background: color-mix(in srgb, var(--text) 18%, transparent); margin-top: 1px; transition: background var(--m-state, 200ms) var(--e-std, ease); }
.tl-switch .tl-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: var(--sh-1); transition: transform var(--m-move, 240ms) var(--e-pop, ease); }
.tl-switch input:checked + .tl-sw { background: var(--green-fill, #30a14e); } .tl-switch input:checked + .tl-sw::after { transform: translateX(18px); }
.tl-switch input:focus-visible + .tl-sw { outline: 2px solid var(--accent); outline-offset: 2px; }
.tl-switch > span:last-child { display: flex; flex-direction: column; gap: 2px; } .tl-switch b { font-size: var(--fs-base); font-weight: 600; } .tl-switch small { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.4; }
/* summary */
.sm-date { margin: 0; font-size: var(--fs-lg); font-weight: 600; color: var(--text-2); }
.sm-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sm-t { padding: 12px; border-radius: var(--rad-lg); border: 1px solid var(--card-border); background: var(--wfill, color-mix(in srgb, var(--text) 5%, transparent)); display: flex; flex-direction: column; gap: 2px; }
.sm-t b { font-size: var(--fs-2xl); font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.15; } .sm-t b small { font-size: var(--fs-sm); font-weight: 500; color: var(--text-muted); }
.sm-t span { font-size: var(--fs-sm); color: var(--text-muted); } .sm-t.bad { border-color: rgba(255,105,97,.5); } .sm-t.bad b { color: #ff9a93; } .sm-t.warn b { color: var(--orange-text); }
@media (max-width: 520px) { .sm-tiles { grid-template-columns: repeat(2, 1fr); } }
.sm-sec { display: flex; flex-direction: column; gap: 6px; } .sm-sec h3 { margin: 0 0 2px; font-size: var(--fs-sm); font-weight: 650; color: var(--text-muted); }
.sm-row { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-base); } .sm-row b { font-variant-numeric: tabular-nums; } .sm-row small { color: var(--text-muted); font-weight: 400; }
.sm-z { display: grid; grid-template-columns: 92px 1fr 56px; align-items: center; gap: 10px; font-size: var(--fs-md); } .sm-z.dim { color: var(--text-muted); }
.sm-zn { font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sm-zv { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
.sm-bar { display: block; height: 14px; border-radius: var(--rad-sm); background: color-mix(in srgb, var(--text) 7%, transparent); overflow: hidden; } .sm-bar b { display: block; height: 100%; border-radius: var(--rad-sm); background: color-mix(in srgb, var(--text) 20%, transparent); }
.sm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .sm-list li { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-md); } .sm-list li span { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sm-none { margin: 0; color: var(--text-muted); font-size: var(--fs-md); }
.sm-bs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .sm-b { padding: 10px 12px; border-radius: var(--rad-md); border: 1px solid var(--card-border); display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); color: var(--text-muted); } .sm-b b { font-size: var(--fs-xl); color: var(--text); font-variant-numeric: tabular-nums; } .sm-b small { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 400; }
.sm-note { margin: 0; font-size: var(--fs-md); color: var(--text-2); line-height: 1.45; } .sm-note.warn { color: var(--orange-text); }
/* pilot report (block 56); the chart's own rules are in app.js (CHART_CSS), shared with the printed page */
.pr-dlg { --t: var(--a-text, var(--text)); --m: var(--a-muted, var(--text-muted)); --l: var(--a-line, var(--card-border)); --acc: var(--a-accent-line, #22b3be); --paper: var(--a-text-2, var(--text-2)); }
.pr-top { display: flex; justify-content: flex-start; }
.pr-segs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--a-seg-track, color-mix(in srgb, var(--text) 8%, transparent)); }
.pr-seg { min-height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--a-text-2, var(--text-2)); font: inherit; font-size: var(--a-fs-small, 13px); font-weight: 600; cursor: pointer; }
.pr-seg.on { background: var(--a-seg-thumb, #fff); color: var(--a-seg-thumb-ink, #111); box-shadow: var(--a-sh-1, none); }
html.device-tablet .pr-seg { min-height: 44px; padding: 0 18px; }
.pr-paper-f { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--a-text-2, var(--text-2)); font-size: var(--a-fs-body, 14px); }
.pr-paper-f label { display: inline-flex; align-items: center; gap: 8px; }
dialog.tl-dlg.pr-dlg { width: min(760px, calc(100vw - 24px)); max-width: min(760px, calc(100vw - 24px)); }
html body dialog.pr-dlg .pr-in:not(#_) { width: 76px !important; text-align: right; } html body dialog.pr-dlg .pr-in.sm:not(#_) { width: 58px !important; }
.pr-dlg .sm-t.ok b { color: var(--a-good, var(--green)); }
.pr-chart { position: relative; }
.pr-tip { position: absolute; top: 0; z-index: 2; display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: var(--a-r1, 10px); border: 1px solid var(--a-line-2, var(--card-border)); background: var(--a-glass-strong, var(--card-bg)); box-shadow: var(--a-sh-2, none); font-size: var(--a-fs-cap, 12px); color: var(--a-text-2, var(--text-2)); pointer-events: none; white-space: nowrap; }
.pr-tip[hidden] { display: none; } .pr-tip b { color: var(--a-text, var(--text)); font-weight: 600; }
.pr-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--a-fs-cap, 12px); color: var(--a-muted, var(--text-muted)); }
.pr-note { margin: 0; font-size: var(--a-fs-small, 13px); color: var(--a-muted, var(--text-muted)); line-height: 1.45; } .pr-note b { color: var(--a-text, var(--text)); font-weight: 600; }
.pr-tw { overflow-x: auto; border: 1px solid var(--a-line, var(--card-border)); border-radius: var(--a-r2, 12px); }
.pr-table { width: 100%; border-collapse: collapse; font-size: var(--a-fs-small, 13px); font-variant-numeric: tabular-nums; }
.pr-table th, .pr-table td { padding: 6px 10px; text-align: left; border-top: 1px solid var(--a-line, var(--card-border)); white-space: nowrap; }
.pr-table thead th { border-top: 0; color: var(--a-muted, var(--text-muted)); font-weight: 600; font-size: var(--a-fs-cap, 12px); }
.pr-table tbody th { font-weight: 500; color: var(--a-text-2, var(--text-2)); } .pr-table td small { color: var(--a-muted, var(--text-muted)); }
html body dialog.pr-dlg .pr-table .pr-in:not(#_) { min-height: 30px !important; width: 64px !important; padding: 0 8px !important; }
/* sign-in screen (block 57): a full-screen dialog, look A tokens; the dialog look A rules (@a dialog) are undone here so it can fill the screen */
html body dialog#welcome.wl:not(#_):not(#_):not(#_) { position: fixed !important; inset: 0 !important; width: 100vw !important; max-width: none !important; height: 100dvh !important; max-height: none !important; margin: 0 !important; padding: 24px 16px !important; border: 0 !important; border-radius: 0 !important; box-sizing: border-box !important; display: grid !important; place-items: center !important; overflow-y: auto !important; background: radial-gradient(1200px 600px at 50% -10%, color-mix(in srgb, var(--a-accent-fill, #0e7c86) 22%, transparent), transparent 70%), var(--a-bg, #0b1215) !important; box-shadow: none !important; color: var(--a-text, #f5f7fb) !important }
html body dialog#welcome.wl:not([open]):not(#_):not(#_):not(#_) { display: none !important }
dialog#welcome.wl::backdrop { background: var(--a-bg, #0b1215); }
.wl-card { position: relative; width: min(420px, 100%); box-sizing: border-box; padding: 28px 26px 22px; border-radius: var(--a-r4, 24px); border: 1px solid var(--a-line-2, rgba(255,255,255,.16)); background: var(--a-glass-strong, rgba(20,31,36,.95)); box-shadow: var(--a-sh-3, 0 24px 64px rgba(0,0,0,.55)); display: flex; flex-direction: column; gap: 14px; }
.wl-x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--a-line-2, rgba(255,255,255,.16)); background: transparent; color: var(--a-muted, #949eb1); cursor: pointer; } .wl-x[hidden] { display: none; } .wl-x svg { width: 18px; height: 18px; }
.wl-brand { display: flex; align-items: center; gap: 10px; color: var(--a-muted, #949eb1); font-size: var(--a-fs-small, 13px); font-weight: 600; } .wl-mark img { display: block; height: 22px; width: auto; }
html[data-theme="light"] .wl-mark img { filter: invert(1); }
.wl-body { display: flex; flex-direction: column; gap: 12px; } .wl-body h2 { margin: 0; font-size: 24px; font-weight: 650; letter-spacing: -.01em; color: var(--a-text, #f5f7fb); }
.wl-sub { margin: 0; color: var(--a-text-2, #bcc4d2); font-size: var(--a-fs-body, 14px); line-height: 1.5; } .wl-sub b { color: var(--a-text, #f5f7fb); font-weight: 600; word-break: break-all; }
.wl-body form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.wl-f { display: flex; flex-direction: column; gap: 6px; font-size: var(--a-fs-small, 13px); font-weight: 500; color: var(--a-text-2, #bcc4d2); }
html body dialog#welcome .wl-f input:not(#_):not(#_):not(#_) { width: 100% !important; min-height: 46px !important; font-size: 16px !important }
.wl-err { margin: 0; min-height: 1.2em; color: var(--a-bad-text, #ff8a82); font-size: var(--a-fs-small, 13px); } .wl-err:empty { min-height: 0; }
html body dialog#welcome .wl-go:not(#_):not(#_):not(#_) { min-height: 48px !important; width: 100% !important; border: 0 !important; border-radius: 999px !important; background: var(--a-accent-fill, #0e7c86) !important; color: var(--a-accent-ink, #fff) !important; font: inherit !important; font-size: 16px !important; font-weight: 650 !important; cursor: pointer !important }
html body dialog#welcome .wl-go:disabled:not(#_):not(#_):not(#_) { opacity: .6 !important; cursor: progress !important }
.wl-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; }
.wl-link { min-height: 40px; padding: 0 2px; border: 0; background: none; color: var(--a-accent-text, #5fd4dc); font: inherit; font-size: var(--a-fs-small, 13px); font-weight: 600; cursor: pointer; } .wl-link:hover { text-decoration: underline; }
.wl-pick { display: flex; flex-direction: column; gap: 8px; } .wl-pick button { display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: 0 16px; border-radius: var(--a-r2, 14px); border: 1px solid var(--a-line-2, rgba(255,255,255,.16)); background: var(--a-surface-2, #1f2430); color: var(--a-text, #f5f7fb); font: inherit; cursor: pointer; } .wl-pick span { color: var(--a-muted, #949eb1); font-size: var(--a-fs-small, 13px); }
.wl :is(input, button):focus-visible { outline: 2px solid var(--a-accent-line, #22b3be); outline-offset: 2px; }
/* Draft strip (block 59): a floating pill at the bottom while a manager edits a draft */
#draft-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 400; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 8px 8px 8px 16px; border-radius: 999px; border: 1px solid var(--a-warn, #ff9f0a); background: var(--a-glass-strong, rgba(20,31,36,.95)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--a-sh-2, 0 10px 30px rgba(0,0,0,.45)); color: var(--a-text-2, #bcc4d2); font-size: var(--a-fs-small, 13px); }
#draft-bar[hidden] { display: none; }
#draft-bar .dr-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--a-warn, #ff9f0a); }
#draft-bar b { color: var(--a-text, #f5f7fb); font-weight: 650; }
#draft-bar button { flex: none; min-height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--a-line-2, rgba(255,255,255,.16)); background: transparent; color: var(--a-text, #f5f7fb); font: inherit; font-weight: 600; cursor: pointer; }
#draft-bar button.primary { border-color: transparent; background: var(--a-accent-fill, #0e7c86); color: var(--a-accent-ink, #fff); }
html.device-tablet #draft-bar button { min-height: 44px; padding: 0 20px; }
#draft-bar.other { border-color: var(--a-line-2, rgba(255,255,255,.16)); } #draft-bar.other .dr-dot { background: var(--a-muted, #949eb1); }
@media (max-width: 760px) { #draft-bar .dr-t span, #draft-bar .dr-t { font-size: 12px; } }
html.draft-mode.shell-a body #ui-toasts:not(#_):not(#_):not(#_) { bottom: 84px !important; }
/* Plan my day (block 60): the strip at the top of each step's window */
dialog .pmd-step { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; margin: 0 0 12px; padding: 8px 8px 8px 14px; border-radius: var(--a-r2, 12px); background: var(--a-info-bg, rgba(34,179,190,.14)); color: var(--a-info-text, #a9d0ff); font-size: var(--a-fs-small, 13px); }
dialog .pmd-step b { color: var(--a-text, #f5f7fb); font-weight: 650; }
dialog .pmd-step .pmd-hint { grid-column: 1; color: var(--a-muted, #949eb1); font-size: 12px; } dialog .pmd-step button { grid-column: 2; grid-row: 1 / 3; }
html body dialog .pmd-step button:not(#_):not(#_):not(#_) { min-height: 32px !important; height: auto !important; padding: 0 14px !important; border-radius: 999px !important; border: 1px solid var(--a-line-2, rgba(255,255,255,.16)) !important; background: transparent !important; color: var(--a-text, #f5f7fb) !important; font-size: 13px !important; font-weight: 600 !important; width: auto !important; }
/* Change history (block 58) */
.ch-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ch-list > li { padding: 10px 14px; border: 1px solid var(--a-line, var(--card-border)); border-radius: var(--a-r2, 12px); background: var(--a-surface-2, transparent); }
.ch-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-size: var(--a-fs-small, 13px); color: var(--a-muted, var(--text-muted)); }
.ch-head b { color: var(--a-text, var(--text)); font-size: var(--a-fs-body, 14px); font-weight: 650; font-variant-numeric: tabular-nums; }
.ch-list ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; font-size: var(--a-fs-small, 13px); color: var(--a-text-2, var(--text-2)); line-height: 1.45; }
/* front door: while html.gate is on (sign-in only store, sign-in not checked yet) the app is covered and a quiet spinner shows */
html.gate, html.gate body { background: var(--a-bg, #0b1215) !important; }
html.gate body > *:not(dialog):not(script):not(style) { visibility: hidden !important; }
html.gate body::before { content: ''; position: fixed; inset: 0; margin: auto; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--a-line-2, rgba(255,255,255,.16)); border-top-color: var(--a-accent-line, #22b3be); animation: arc-spin .9s linear infinite; z-index: 1; }
html.gate:has(dialog#welcome[open]) body::before { display: none; }
/* sign-in screen polish */
.wl-names { display: flex; flex-direction: column; line-height: 1.25; } .wl-names b { color: var(--a-text, #f5f7fb); font-size: 15px; font-weight: 650; } .wl-names .wl-store { font-weight: 500; }
.wl-pw { position: relative; display: block; }
html body dialog#welcome .wl-pw input:not(#_):not(#_):not(#_) { padding-right: 48px !important; }
.wl-eye { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: var(--a-muted, #949eb1); cursor: pointer; }
.wl-eye:hover { color: var(--a-text, #f5f7fb); background: var(--a-hover-veil, rgba(255,255,255,.06)); } .wl-eye svg { width: 18px; height: 18px; }
.wl-hint, .wl-caps { font-size: 12px; font-weight: 400; color: var(--a-muted, #949eb1); } .wl-caps { color: var(--a-warn-text, #ffb340); } .wl-caps[hidden] { display: none; }
.wl-check { display: flex; align-items: center; gap: 10px; min-height: 36px; font-size: var(--a-fs-small, 13px); color: var(--a-text-2, #bcc4d2); cursor: pointer; }
html body dialog#welcome .wl-check input:not(#_):not(#_):not(#_) { width: 18px !important; height: 18px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; accent-color: var(--a-accent-fill, #0e7c86); }
.wl-help { margin: 2px 0 0; padding-top: 12px; border-top: 1px solid var(--a-line, rgba(255,255,255,.09)); font-size: 12px; color: var(--a-muted, #949eb1); line-height: 1.45; }
html body dialog#welcome.wl:not(#_):not(#_):not(#_) { transition: opacity var(--m-state, 200ms) var(--e-std, ease), transform var(--m-state, 200ms) var(--e-std, ease) !important; }
html body dialog#welcome.wl.wl-out:not(#_):not(#_):not(#_) { opacity: 0 !important; transform: translateY(4px) !important; }   /* the same exit as every dialog */
.ta-st { font-style: normal; color: var(--a-warn-text, #ffb340); } .ta-st.ok { color: var(--a-good, #30d158); }
/* Team access (block 57) */
.ta-add { display: grid; grid-template-columns: 1.5fr 1fr 150px auto; gap: 8px; margin: 0; } @media (max-width: 640px) { .ta-add { grid-template-columns: 1fr; } }
html body dialog.ta-dlg .ta-add :is(input, select):not(#_):not(#_):not(#_) { width: 100% !important; min-width: 0 !important }
html body dialog.ta-dlg .ta-add button:not(#_):not(#_):not(#_) { min-height: var(--a-h-md, 36px) !important; padding: 0 18px !important; border-radius: 999px !important; border: 0 !important; background: var(--a-accent-fill, #0e7c86) !important; color: var(--a-accent-ink, #fff) !important; font-weight: 600 !important }
.ta-acts { display: flex !important; flex-direction: row !important; align-items: center; gap: 6px !important; }
html body dialog.ta-dlg .ta-acts select:not(#_):not(#_):not(#_) { min-height: 34px !important; padding: 0 10px !important; width: auto !important }
html body dialog.ta-dlg .ta-acts button:not(#_):not(#_):not(#_) { min-height: 34px !important; width: 34px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; border: 1px solid var(--a-line-2, rgba(255,255,255,.16)) !important; background: transparent !important; color: var(--a-text-2, #bcc4d2) !important }
.ta-acts svg { width: 16px; height: 16px; }
html.device-tablet body dialog.ta-dlg .ta-acts :is(button, select):not(#_):not(#_):not(#_) { min-height: 44px !important } html.device-tablet body dialog.ta-dlg .ta-acts button:not(#_):not(#_):not(#_) { width: 44px !important }
.tl-item b small { font-weight: 400; color: var(--a-muted, var(--text-muted)); }

/* =============================================================================
   CALM LITE (2) — steady digits everywhere, a quiet remove cross, and roomier break buttons
   ============================================================================= */
body, button, input, select, textarea { font-variant-numeric: tabular-nums; }

/* the remove cross: same button, same place and size, but not 16 red marks down the sheet; it turns red when you reach for it */
html body .btn-del-row { color: var(--text-muted) !important; opacity: .55; transition: opacity var(--m-state) var(--e-std), color var(--m-state) var(--e-std), background-color var(--m-state) var(--e-std); }
html body .btn-del-row .ic { width: 1em; height: 1em; }
html body #roster-table tbody tr:hover .btn-del-row, html body .btn-del-row:focus-visible, html body .btn-del-row:active { opacity: 1; color: var(--red-text, #ff6961) !important; }

/* B1 / Lunch / B2: a little more room so the times do not touch the edges of their buttons (the buttons get wider; their height and place do not change) */
html body #roster-table .break-slot { padding-left: 3px !important; padding-right: 3px !important; }
@media (max-width: 1180px) { html body #roster-table { --s22-breaks-w: 134px; } }
@media (max-width: 760px) { html body #roster-table { --s22-breaks-w: 124px; } }

/* =============================================================================
   CALM A3 — readable zone blocks ("Deep + edge"): a deeper fill, white text (contrast 4.6:1 or better) and a 3px edge
   in the zone's own colour. Tools > Readable zone colours switches back to the original fills.
   ============================================================================= */
html body #roster-table .zone-ribbon.zr-deep { box-shadow: inset 3px 0 0 var(--edge, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 12%, transparent), 0 2px 5px rgba(0, 0, 0, .3) !important; }
html body #roster-table .zone-ribbon.zr-deep:not(.lunch-ribbon)::after { background: linear-gradient(color-mix(in srgb, var(--text) 10%, transparent), color-mix(in srgb, var(--text) 0%, transparent) 58%); }
html body #roster-table .zone-ribbon.zr-deep, html body #roster-table .zone-ribbon.zr-deep span { text-shadow: none; }

/* icons beside the labels of the header buttons (Paint / Edit zones) and in the small status lines */
html body #stage7-top-actions > #zone-palette-toggle > .ic { width: 17px; height: 17px; flex: none; }
html body #stage7-top-actions > #zone-palette-toggle .zp-caret .ic { width: 14px; height: 14px; }
#zone-edit-chip .ic { width: 15px; height: 15px; margin-right: 4px; vertical-align: -3px; }
.zs-good .ic, .pv-status .ic { width: 14px; height: 14px; vertical-align: -2px; }

/* =============================================================================
   CALM LITE (3) — zone names at the left of the block; a lunch inside one zone is drawn inside that bar
   ============================================================================= */
#roster-table .zone-ribbon:not(.lunch-ribbon) { justify-content: flex-start !important; padding-left: 9px; text-align: left; }
#roster-table .zone-ribbon:not(.lunch-ribbon) > div { align-items: flex-start !important; }
#roster-table .zone-ribbon:not(.lunch-ribbon) span { text-align: left; }
#roster-table .zone-ribbon .lunch-inset { position: absolute; top: 17%; bottom: 17%; z-index: 5; min-width: 14px; border-radius: 999px; background: var(--lunch-bg, #1a2138); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; pointer-events: none; }
#roster-table .zone-ribbon .lunch-inset .lunch-badge { width: 18px; height: 18px; }
#roster-table .zone-ribbon .lunch-inset .lunch-badge svg { width: 11px; height: 11px; }
html.fit-compact #roster-table .zone-ribbon .lunch-inset .lunch-badge { width: 16px; height: 16px; }
#roster-table .zone-ribbon.zr-dup > span, #roster-table .zone-ribbon.zr-dup > div { visibility: hidden; }

/* the B1 / Lunch / B2 captions are gone from the column heading: "Breaks" sits centred in it */
html body #roster-table .breaks-head { min-height: 0; justify-content: center; }

/* shorter sheet header: the hour row is 28px (was 38px) so every staff row gets a little more height */
html body #roster-table thead tr:first-child th { height: 28px !important; min-height: 0; padding-top: 0; padding-bottom: 0; }
html body #roster-table thead tr:nth-child(2) th { top: 28px !important; }
html body #roster-table .hour-header.now-hour-simple::before { inset: 2px 4px; }
html body #roster-table .hour-header.now-hour-simple { line-height: 1; }

/* the zone tag under a name looks like the zone block on the sheet: same readable fill, same edge, same capitals */
html body #roster-table tbody td.staff-name small.staff-current-zone[data-chip]:not([data-chip=""])::before { box-shadow: inset 3px 0 0 var(--chip-edge, transparent); padding-left: 8px; font-weight: 500; text-transform: uppercase; letter-spacing: .03em; font-size: .56rem; border-radius: 6px; }

/* a shift of 3 hours or less gets no break: the Breaks cell just says so, quietly */
#roster-table .breaks-cell.no-breaks { grid-template-columns: minmax(0, 1fr); }
#roster-table .breaks-cell .no-break { text-align: center; font-size: .62rem; color: var(--text-muted); opacity: .75; letter-spacing: 0; }

/* =============================================================================
   CALM LITE (4) — a quieter grid: the hour is the clear line, the half hour a hint, the quarter hours almost nothing.
   The quarter lines come back in full while zone editing is on and under the row you are pointing at, where they are needed.
   ============================================================================= */
html body #roster-table tbody td.q-quarter { border-right-color: rgba(122, 157, 187, .08); transition: border-color var(--m-state) var(--e-std); }
html body #roster-table tbody td.q-half { border-right-color: rgba(122, 157, 187, .16); }
html body #roster-table tbody td.q-hour { border-right-color: rgba(137, 174, 205, .32); }
html body.zone-editing #roster-table tbody td.q-quarter, html body #roster-table tbody tr:hover td.q-quarter { border-right-color: rgba(122, 157, 187, .25); }
html body.zone-editing #roster-table tbody td.q-half, html body #roster-table tbody tr:hover td.q-half { border-right-color: rgba(122, 157, 187, .40); }

/* Fit view: the page itself never scrolls, so it should not rubber-band when you pull it down on an iPad */
html.fit-sheet, html.fit-sheet body { overscroll-behavior-y: none; }

/* =============================================================================
   iPAD LAYOUT (html.device-tablet) — the same roster, with bigger things to tap and fewer ways to make a mistake.
   Chosen automatically on a touch screen between 641 and 1500px wide; Tools > Layout forces iPad or Desktop.
   ============================================================================= */
.staff-remove, .su-hint, .tools-manual .tm-warn { display: none; }
html.device-tablet .tools-manual .tm-warn, html.device-tablet .su-hint { display: block; }
html.device-tablet .staff-remove { display: inline-flex; margin-right: auto; }

/* fewer things to hit by accident */
html.device-tablet body:not(.locked-mode) #zone-palette-toggle,
html.device-tablet #zone-edit-chip.never,
html.device-tablet #roster-table .col-del, html.device-tablet #roster-table col.col-del,
html.device-tablet #roster-table tfoot { display: none !important; }
html.device-tablet #roster-table .shift-inline { pointer-events: none; }                  /* shift times are changed in the staff profile or with the generators */
html.device-tablet #roster-table thead th.hour-header { pointer-events: none; }            /* no accidental "isolate this hour" */

/* bigger to tap */
html.device-tablet body #roster-table { --s22-breaks-w: 176px !important; --s22-name-w: 172px !important; }
html.device-tablet.fit-sheet #roster-table tbody td.col-breaks .break-slot { height: calc(var(--fit-rh) - 8px); min-height: 44px; font-size: .78rem; }
html.device-tablet #roster-table .break-slot { font-size: .78rem; }
html.device-tablet #roster-table .zone-ribbon span, html.device-tablet #roster-table .zone-ribbon div span { font-size: .78rem !important; }
html.device-tablet .stage19-date-nav .stage19-date-step { min-width: 52px; min-height: 48px; }
html.device-tablet #stage7-top-actions > button, html.device-tablet .ov-perf, html.device-tablet #stage1b-performance-btn { min-height: 48px; }
html.device-tablet dialog button, html.device-tablet #tools-menu .tm-list > button, html.device-tablet #tools-menu .tm-list > a { min-height: 54px; }
html.device-tablet #tools-menu .tm-search { height: 48px; }
html.device-tablet #setup-modal [data-su="import"], html.device-tablet #setup-modal [data-su="scan"], html.device-tablet #setup-modal [data-su="add"], html.device-tablet #setup-modal [data-su="paint"], html.device-tablet #setup-modal [data-su="sort"] { display: none; }
.tools-manual summary { cursor: pointer; list-style: none; min-height: 48px; display: flex; align-items: center; padding: 0 4px; }
.tools-manual summary::-webkit-details-marker { display: none; }
.tools-manual .tm-warn { margin: 0 4px 8px; font-size: .8rem; color: var(--text-muted); line-height: 1.4; }
.su-hint { flex: 1 0 100%; font-size: .82rem; color: var(--text-muted); line-height: 1.4; }
html.device-tablet #tools-menu .tools-manual .tm-list { opacity: .96; }
html.device-tablet body:not(.locked-mode) .stage1b-topbar:not(#_):not(#__) #stage7-top-actions > #zone-palette-toggle { display: none !important; }
/* the header's two rows are taller on the iPad so the date arrows and buttons are 48pt or more */
html.device-tablet body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_):not(#__) { --h1: 52px; --h2: 56px; }
html.device-tablet body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_):not(#__) .stage19-date-nav .stage19-date-step { flex: 0 0 56px !important; width: 56px !important; min-width: 56px !important; }

/* =============================================================================
   Lunch in a narrow window: everything about a lunch (its badge, its two pale bars and the rounded ends of the zone blocks beside it)
   shrinks with the width of a quarter hour instead of keeping its full size and crushing a 2-quarter lunch.
   ============================================================================= */
html.fit-sheet #roster-table { --lc: clamp(3px, calc(var(--fit-qw) * .55), 10px); }
html.fit-sheet #roster-table .lunch-badge { width: clamp(11px, calc(var(--fit-qw) * 2 - 9px), 22px); height: clamp(11px, calc(var(--fit-qw) * 2 - 9px), 22px); }
html.fit-sheet #roster-table .lunch-badge svg { width: 62%; height: 62%; }
html.fit-sheet #roster-table .zone-ribbon.lunch-ribbon::before, html.fit-sheet #roster-table .zone-ribbon.lunch-ribbon::after { width: clamp(1px, calc(var(--fit-qw) * .12), 2px); }
html.fit-sheet #roster-table td.slot-zone.beside-lunch-r, html.fit-sheet #roster-table td.slot-zone.beside-lunch-l { background-size: var(--lc) calc(var(--fit-rh) - 7px) !important; }
html.fit-sheet #roster-table td.beside-lunch-r > .zone-ribbon { border-top-right-radius: min(var(--zr), var(--lc)) !important; border-bottom-right-radius: min(var(--zr), var(--lc)) !important; }
html.fit-sheet #roster-table td.beside-lunch-l > .zone-ribbon { border-top-left-radius: min(var(--zr), var(--lc)) !important; border-bottom-left-radius: min(var(--zr), var(--lc)) !important; }
html.fit-sheet #roster-table .zone-ribbon.lunch-ribbon.lunch-round-l { border-top-left-radius: min(var(--zr), var(--lc)) !important; border-bottom-left-radius: min(var(--zr), var(--lc)) !important; }
html.fit-sheet #roster-table .zone-ribbon.lunch-ribbon.lunch-round-r { border-top-right-radius: min(var(--zr), var(--lc)) !important; border-bottom-right-radius: min(var(--zr), var(--lc)) !important; }
/* the hour labels shrink with the column too, so "10A" and "11A" do not run into each other */
html.fit-sheet body #roster-table thead tr:first-child th.q-hour { font-size: clamp(9px, calc(var(--fit-qw) * .9), 14px) !important; letter-spacing: 0 !important; }

/* Normal / Fit is back on the iPad: bigger, and above the bottom bar */
html.device-tablet #fit-controls { height: 52px !important; bottom: 92px !important; right: 16px !important; }
html.device-tablet #fit-controls button { min-width: 104px !important; min-height: 44px; font-size: .95rem !important; }
/* Normal view on the iPad keeps the same big rows and break buttons */
html.device-tablet:not(.fit-sheet) #roster-table tbody td.slot-zone, html.device-tablet:not(.fit-sheet) #roster-table tbody td.slot-empty { height: 52px; }
html.device-tablet:not(.fit-sheet) #roster-table tbody td.col-breaks .break-slot { height: 44px; }

/* iPad header buttons: Coverage (shown only when a gap is urgent) and Undo, 48pt tall, beside Lock and Tools */
#stage7-top-actions > .tb-cov, #stage7-top-actions > .tb-undo { display: none; }
html.device-tablet #stage7-top-actions > .tb-undo { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; }
html.device-tablet #stage7-top-actions > .tb-cov:not([hidden]) { display: inline-flex !important; align-items: center; gap: 8px; }
html.device-tablet #stage7-top-actions > .tb-undo[hidden] { display: none !important; }
html.device-tablet #stage7-top-actions > .tb-cov, html.device-tablet #stage7-top-actions > .tb-undo { min-height: 48px; padding: 0 16px; border-radius: 14px; font-weight: 650; }
html.device-tablet #stage7-top-actions > .tb-cov { background: rgba(255, 69, 58, .16); border: 1px solid rgba(255, 105, 97, .6); color: #ff9a93; }
html.device-tablet #stage7-top-actions > .tb-undo:disabled { opacity: .4; }
html.device-tablet #stage7-top-actions > .tb-cov .ic, html.device-tablet #stage7-top-actions > .tb-undo .ic { width: 20px; height: 20px; }
/* the Normal / Fit switch sits at the bottom right again now that there is no bar */
html.device-tablet #fit-controls { bottom: 18px !important; }

/* iPad: the empty-day prompt belongs to the desktop; building a day is under Tools > Planning & editing */
html.device-tablet #setup-empty { display: none !important; }
html.device-tablet #tools-menu .tools-manual .tools-setup { display: flex; margin: 0 0 10px; }

/* Quick edit on the iPad: a slim sheet. The timeline strip is folded away until you ask for "Adjust time", and tapping a zone
   changes it from now to the end of that block and closes the sheet (one tap). On the desktop it is unchanged. */

/* iPad: the zone choices appear beside the block you tapped */
#zone-pop { position: fixed; z-index: 950; width: min(460px, calc(100vw - 20px)); padding: 12px; border-radius: 22px; background: var(--glass, color-mix(in srgb, var(--card-bg) 98%, transparent)); border: 1px solid var(--card-border); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); animation: ovPopIn var(--m-sheet, 240ms) var(--e-pop, ease) both; }
#zone-pop[hidden] { display: none; }
#zone-pop, #lunch-pop { transform-origin: var(--ax, 50%) 0; } #zone-pop[data-dir="up"], #lunch-pop[data-dir="up"] { transform-origin: var(--ax, 50%) 100%; }   /* popovers grow from their arrow (ovPopIn) */
html:not(.device-tablet) #zone-pop { display: none !important; }
#zone-pop .zp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 2px 4px 10px; }
#zone-pop .zp-head b { font-size: 1.1rem; margin-right: 8px; } #zone-pop .zp-head span { color: var(--text-muted); font-size: .9rem; }
#zone-pop .zp-x { width: 44px; height: 44px; border-radius: 22px; background: color-mix(in srgb, var(--text) 10%, transparent); display: grid; place-items: center; flex: none; }
#zone-pop .zp-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
#zone-pop .zp-z { min-height: 56px; border: 2px solid transparent; border-radius: 14px; font-weight: 600; font-size: .86rem; letter-spacing: .02em; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; }
#zone-pop .zp-z.cur { border-color: #fff; }
#zone-pop .zp-more { margin-top: 8px; width: 100%; min-height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--text) 7%, transparent); border: 1px solid var(--card-border); color: var(--text-2); font-weight: 600; }
html.motion-off #zone-pop { animation: none; }
#zone-pop .zp-dur { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 4px; border-radius: 16px; background: color-mix(in srgb, var(--text) 6%, transparent); }
#zone-pop .zp-dur em { font-style: normal; font-size: .8rem; color: var(--text-muted); padding: 0 8px 0 10px; }
#zone-pop .zp-d { flex: 1; min-height: 46px; padding: 0 6px; border-radius: 12px; font-weight: 600; font-size: .86rem; color: var(--text-2); white-space: nowrap; }
#zone-pop .zp-d.on { background: #fff; color: #14161c; }


/* ==== PAINT IN THE HEADER (desktop) ====
   While zone editing is on, the KPIs, leads and Performance give way to the zone bar (same header height, nothing resized: things only move).
   html.zone-paint is set by block 23 only on the desktop layout. Two rows (950-1879px): the buttons move up beside the date and the bar takes row 2.
   One row (1880px+): everything stays in its place and the bar sits where leads, Performance and the numbers were. */
html.zone-paint.device-desktop body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_):not(#_) > .stage1b-kpi,
html.zone-paint.device-desktop body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_):not(#_) > #stage7-leads,
html.zone-paint.device-desktop body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_):not(#_) > .stage1b-performance { display: none !important; }
@media (max-width: 1879px) or (max-aspect-ratio: 1/1) {
  html.zone-paint.device-desktop body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_):not(#_) {
    --h2: 44px;                                         /* Paint / Lock / Tools match the date box (the height eases there: @property --h2 below) */
    grid-template-rows: 44px 54px !important;
    grid-template-areas: "brand brand title title title actions actions actions actions actions actions actions" ". . . . . . . . . . . ." !important;
  }
  html.zone-paint.device-desktop body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_):not(#_) > .stage1b-brand,
  html.zone-paint.device-desktop body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_):not(#_) > .stage1b-title { align-self: start !important; }
  html.zone-paint.device-desktop .stage1b-topbar:not(#_):not(#_) #stage7-top-actions { justify-content: flex-end; }
}
/* narrow or portrait windows have their own columns, so the two-row paint layout needs its own too */
@media (max-width: 949px), (max-aspect-ratio: 1/1) {
  html.zone-paint.device-desktop body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_):not(#_) { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; }
}
/* while the header is moving, glass blur is switched off (blurring a moving layer is what makes it stutter) */
html.zp-moving .stage1b-topbar *, html.zp-moving .zone-legend, html.zp-moving .zone-legend * { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.zone-paint.device-desktop body .zone-legend:not(.palette-collapsed) {
  display: flex !important; align-items: center; gap: 10px; padding: 0 8px 0 10px !important; border-radius: 16px !important;
  background: color-mix(in srgb, var(--text) 5.5%, transparent) !important; border: 1px solid var(--card-border) !important; box-shadow: none !important; z-index: 880; margin: 0 !important; box-sizing: border-box !important; }
html.zone-paint.device-desktop body .zone-legend:not(.palette-collapsed) #zone-badges-container { padding: 0 !important; align-items: center; }
html.zone-paint.device-desktop body .zone-legend #zone-badges-container { gap: 4px; }
html.zone-paint.device-desktop body .zone-legend #zone-badges-container > .zone-badge { min-height: 32px; display: inline-flex; align-items: center; }
html.zone-paint.device-desktop .zone-legend .zp-hint { flex: 0 0 auto; font-size: .74rem; color: var(--text-muted); white-space: nowrap; }
html.zone-paint.device-desktop .zone-legend .zp-done { flex: 0 0 auto; min-height: 36px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--accent-fill); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
@media (max-width: 1600px), (min-width: 1880px) { html.zone-paint.device-desktop .zone-legend .zp-hint { display: none; } }
html:not(.zone-paint) .zone-legend .zp-hint, html:not(.zone-paint) .zone-legend .zp-done { display: none; }
html.zone-paint.device-desktop #zone-edit-chip { display: none !important; }
/* Range mode is always on for the desktop, so there is no switch for it */
html.device-desktop #tm-range { display: none !important; }

/* the zone bar waits, hidden, while the day's numbers fade out (block 23) */
html.zp-prep .zone-legend { visibility: hidden !important; }

/* the header buttons' height can ease between 54px and 44px when the zone bar comes and goes (a registered length is the only kind of custom property that transitions) */
@property --h2 { syntax: '<length>'; inherits: true; initial-value: 54px; }
html body .stage1b-topbar:not(#_) { transition: --h2 var(--m-move) var(--e-std); }


/* =============================================================================
   SUGGEST ZONES (redesign, Oct 2026): plain blocks in a grid (no table, no sticky table cells), the same readable colours as the sheet
   ============================================================================= */
dialog#zone-suggest-modal { width: min(96vw, 1180px); max-width: none; height: min(92vh, 900px); max-height: none; padding: 0; overflow: hidden; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
dialog#zone-suggest-modal[open] { display: flex; flex-direction: column; }
dialog#zone-suggest-modal::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(4, 6, 10, .7); }   /* a blurred full-page backdrop is repainted every time anything behind it moves: that was most of the lag */
#zone-suggest-modal [hidden] { display: none !important; }
#zone-suggest-modal .zs-head { display: flex; align-items: flex-start; gap: 14px; padding: 18px 22px 10px; }
#zone-suggest-modal .zs-title { flex: 1; min-width: 0; }
#zone-suggest-modal h2 { margin: 0; font-size: 1.3rem; font-weight: 650; }
#zone-suggest-modal .zs-sub { margin-top: 2px; font-size: .84rem; color: var(--text-muted); }
#zone-suggest-modal .zs-x { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--surface-2, color-mix(in srgb, var(--text) 8%, transparent)); color: var(--text-2); cursor: pointer; display: grid; place-items: center; }
#zone-suggest-modal .zs-summary { padding: 14px 22px 8px; display: flex; flex-direction: column; gap: 6px; }
#zone-suggest-modal .zs-summary:empty { display: none; }
#zone-suggest-modal .zs-stats { display: flex; flex-wrap: wrap; gap: 8px; }
#zone-suggest-modal .zs-stat { display: flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 14px; background: color-mix(in srgb, var(--text) 6%, transparent); border: 1px solid var(--card-border); }
#zone-suggest-modal .zs-stat b { font-size: 1.25rem; font-weight: 650; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; }
#zone-suggest-modal .zs-stat span { font-size: .8rem; color: var(--text-2); }
#zone-suggest-modal .zs-stat.zs-good { background: rgba(52, 199, 89, .12); border-color: rgba(52, 199, 89, .3); } #zone-suggest-modal .zs-stat.zs-good b { color: var(--green-text, #6ee7a0); }
#zone-suggest-modal .zs-stat.zs-bad, #zone-suggest-modal .zs-stat.zs-warn { background: rgba(255, 159, 10, .12); border-color: rgba(255, 159, 10, .32); } #zone-suggest-modal .zs-stat.zs-bad b, #zone-suggest-modal .zs-stat.zs-warn b { color: var(--orange-text, #ffb340); }
#zone-suggest-modal .zs-line { font-size: .84rem; line-height: 1.4; color: var(--text-2); }
#zone-suggest-modal .zs-line.zs-bad, #zone-suggest-modal .zs-line.zs-warn { color: var(--orange-text, #ffb340); }
#zone-suggest-modal .zs-body { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; container-type: inline-size; padding-bottom: 10px; border-top: 1px solid var(--card-border); }   /* the summary, key and grid all scroll together; the axis stays at the top */
#zone-suggest-modal .zs-msg { margin: 0; padding: 48px 28px; text-align: center; color: var(--text-muted); font-size: .95rem; line-height: 1.5; }
#zone-suggest-modal .zs-key { display: flex; gap: 16px; padding: 10px 22px 4px; font-size: .74rem; color: var(--text-muted); }
#zone-suggest-modal .zs-key span::before { content: ''; display: inline-block; width: 22px; height: 12px; margin-right: 7px; vertical-align: -2px; border-radius: 5px; }
#zone-suggest-modal .zs-k-new::before { background: #3b82f6; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 80%, transparent); }
#zone-suggest-modal .zs-k-set::before { background: #3b82f6; opacity: .4; }
#zone-suggest-modal .zs-k-grey::before { border: 1.5px dashed rgba(148,163,184,.7); }
#zone-suggest-modal .zs-grid { --cw: clamp(9px, calc((100cqw - 190px) / var(--span, 40)), 28px); --rh: 40px; width: max-content; min-width: 100%; }
html.device-tablet #zone-suggest-modal .zs-grid { --rh: 50px; }
#zone-suggest-modal .zs-row, #zone-suggest-modal .zs-axis { display: flex; height: var(--rh); }
#zone-suggest-modal .zs-name { flex: 0 0 176px; position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 22px; background: var(--card-bg); font-size: .9rem; font-weight: 600; min-width: 0; }
#zone-suggest-modal .zs-pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#zone-suggest-modal .zs-tag { flex: none; padding: 1px 7px; border-radius: 999px; background: rgba(148,163,184,.22); color: var(--text-muted); font-size: .64rem; font-weight: 600; }
#zone-suggest-modal .zs-skip { flex: none; margin-left: auto; min-height: 30px; padding: 0 10px; border: 1px solid var(--card-border); border-radius: 999px; background: transparent; color: var(--text-muted); font: inherit; font-size: .72rem; cursor: pointer; }
#zone-suggest-modal .zs-skip[aria-pressed="true"] { color: var(--accent-text, #5fd4dc); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
html.device-tablet #zone-suggest-modal .zs-skip { min-height: 44px; padding: 0 14px; }
#zone-suggest-modal .zs-track { position: relative; flex: 0 0 calc(var(--span) * var(--cw)); background-image: repeating-linear-gradient(90deg, rgba(148,163,184,.16) 0 1px, transparent 1px calc(var(--cw) * 4)); contain: layout paint; }
#zone-suggest-modal .zs-axis { position: sticky; top: 0; z-index: 4; background: var(--card-bg); border-bottom: 1px solid var(--card-border); height: 34px; }
#zone-suggest-modal .zs-axis .zs-track { background-image: none; }
#zone-suggest-modal .zs-axis .zs-name { z-index: 5; }
#zone-suggest-modal .zs-axis span { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * var(--cw)); display: flex; align-items: center; padding-left: 6px; font-size: .72rem; font-weight: 600; color: var(--text-muted); border-left: 1px solid rgba(148,163,184,.16); }
#zone-suggest-modal .zs-b { position: absolute; top: 5px; bottom: 5px; left: calc(var(--a) * var(--cw) + 1px); width: calc(var(--n) * var(--cw) - 2px); display: flex; align-items: center; justify-content: flex-start; gap: 4px; padding: 0 9px; border-radius: 10px; overflow: hidden; white-space: nowrap; background: var(--fill, #475569); color: var(--ink, #fff); font-size: .66rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; box-sizing: border-box; }
#zone-suggest-modal .zs-new { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--text) 78%, transparent), 0 2px 6px rgba(0,0,0,.35); cursor: default; }
#zone-suggest-modal .zs-new.zs-pick { box-shadow: inset 0 0 0 2.5px #fff, 0 3px 10px rgba(0,0,0,.5); }
#zone-suggest-modal .zs-new.zs-w { box-shadow: inset 0 0 0 2px var(--orange-text, #ffb340), 0 2px 6px rgba(0,0,0,.35); }
#zone-suggest-modal .zs-new i { margin-left: auto; font-style: normal; font-weight: 700; color: var(--orange-text, #ffb340); }
#zone-suggest-modal .zs-set { opacity: .42; }
#zone-suggest-modal .zs-grey { background: transparent; border: 1.5px dashed rgba(148,163,184,.55); }
#zone-suggest-modal .zs-meal { background: #0b1020; justify-content: center; padding: 0; color: rgba(255,255,255,.7); }
#zone-suggest-modal .zs-meal .ic { width: 13px; height: 13px; }
#zone-suggest-modal .zs-excluded .zs-track { opacity: .45; }
#zone-suggest-modal .zs-cap { display: flex; align-items: baseline; gap: 10px; padding: 18px 22px 6px; position: sticky; left: 0; font-size: .86rem; font-weight: 600; }
#zone-suggest-modal .zs-cap em { font-style: normal; font-weight: 400; font-size: .74rem; color: var(--text-muted); }
#zone-suggest-modal .zs-cnt { height: 28px; }
#zone-suggest-modal .zs-cnt .zs-track { background-image: none; }
#zone-suggest-modal .zs-chip { padding: 2px 10px; border-radius: 8px; font-size: .68rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
#zone-suggest-modal .zs-c { position: absolute; top: 2px; bottom: 2px; left: calc(var(--a) * var(--cw) + 1px); width: calc(var(--n) * var(--cw) - 2px); display: grid; place-items: center; border-radius: 6px; font-style: normal; font-size: .74rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; box-sizing: border-box; }
#zone-suggest-modal .zs-n { background: var(--tint, rgba(100,116,139,.45)); }
#zone-suggest-modal .zs-short { background: #b45309; }
#zone-suggest-modal .zs-detail { min-height: 40px; padding: 8px 22px; border-top: 1px solid var(--card-border); font-size: .84rem; color: var(--text-2); line-height: 1.35; }
#zone-suggest-modal .zs-detail:empty { display: none; }
#zone-suggest-modal .zs-foot { display: flex; align-items: center; gap: 10px; padding: 12px 22px 16px; border-top: 1px solid var(--card-border); }
#zone-suggest-modal .zs-note { flex: 1; font-size: .78rem; color: var(--text-muted); line-height: 1.35; }
#zone-suggest-modal .zs-apply { min-height: 46px; padding: 0 22px; border: 0; border-radius: 14px; background: var(--accent-fill); color: #fff; font-weight: 650; font-size: .92rem; cursor: pointer; }
#zone-suggest-modal .zs-apply:disabled { opacity: .45; cursor: default; }
#zone-suggest-modal .zs-again, #zone-suggest-modal .zs-cancel { min-height: 46px; padding: 0 18px; border: 1px solid var(--card-border); border-radius: 14px; background: transparent; color: var(--text); font-size: .92rem; cursor: pointer; }
#zone-suggest-modal .zs-grid { animation: zsIn var(--m-move, 240ms) var(--e-std, ease) both; }
@keyframes zsIn { from { opacity: .55; } to { opacity: 1; } }


/* Tap targets on the iPad layout: every control inside a dialog is at least 44pt (Zone history, Coverage rules, Generate lunches and the zone editor had 28-36px ones) */
html.device-tablet dialog :is(button, select, input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range])) { min-height: 44px !important; }
html.device-tablet dialog :is(button, input[type=color]) { min-width: 44px !important; }
/* Dialogs sit over a plain dim layer: the blur behind them was repainted whenever the roster behind moved (every second) */
dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(4, 6, 10, .64); }

/* More zones than fit at full size (a real store has 20+): the chips stay on ONE row and shrink in steps (smaller text and padding, then no dot);
   only if they still do not fit do they scroll, with a soft fade at the edges. The bar has the same 11px inside margin on the left and right. */
html.zone-paint.device-desktop body .zone-legend:not(.palette-collapsed) { padding: 0 11px !important; gap: 12px; }
html.zone-paint.device-desktop body .zone-legend #zone-badges-container { flex-wrap: nowrap !important; align-items: center; gap: 4px; padding: 0 !important; scrollbar-width: none; }
html.zone-paint.device-desktop body .zone-legend #zone-badges-container::-webkit-scrollbar { display: none; }
html.zone-paint.device-desktop body .zone-legend #zone-badges-container > .zone-badge { flex: 0 0 auto; }
html.zone-paint.device-desktop body .zone-legend #zone-badges-container.zs-c1 { gap: 3px; }
html.zone-paint.device-desktop body .zone-legend #zone-badges-container.zs-c1 > .zone-badge { padding: 0 8px !important; font-size: .7rem !important; min-width: 0 !important; }
html.zone-paint.device-desktop body .zone-legend #zone-badges-container.zs-c1 > .zone-badge::before { width: 10px !important; height: 10px !important; margin-right: 5px; }
html.zone-paint.device-desktop body .zone-legend #zone-badges-container.zs-c2 { gap: 3px; }
html.zone-paint.device-desktop body .zone-legend #zone-badges-container.zs-c2 > .zone-badge { padding: 0 8px !important; font-size: .68rem !important; min-width: 0 !important; }
html.zone-paint.device-desktop body .zone-legend #zone-badges-container.zs-c2 > .zone-badge::before { display: none !important; }
html.zone-paint.device-desktop body .zone-legend #zone-badges-container.zs-scroll { overflow-x: auto !important; scroll-behavior: smooth; }
.zone-legend .zp-nav { display: none; flex: none; width: 30px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); cursor: pointer; place-items: center; }
html.zone-paint.device-desktop .zone-legend .zp-nav:not([hidden]) { display: grid; }
.zone-legend .zp-nav:disabled { opacity: .3; cursor: default; }

/* Paint bar chips: the selected chip's white ring and the soft drop shadows reached outside the chip and were cut off flat by the bar's scroller (so the ring looked clipped and pushed past the border). In the header bar the ring is drawn inside the chip and there is no outer shadow. */
html.zone-paint.device-desktop body .zone-legend #zone-badges-container > .zone-badge { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 16%, transparent) !important; }
html.zone-paint.device-desktop body .zone-legend #zone-badges-container > .zone-badge.selected { box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--text) 96%, transparent), inset 0 1px 0 color-mix(in srgb, var(--text) 16%, transparent) !important; }

/* The iPad layout has no paint bar (zones change with the tap-a-block popover) */
html.device-tablet .zone-legend, html.device-tablet #zone-edit-chip { display: none !important; }
html.device-tablet #tm-range, html.device-tablet #tm-dual { display: none !important; }   /* painting switches: no painting on the iPad layout */

/* Zones dialog: one button to switch every zone to the new colour set (fills the boxes; Save changes keeps it) */
#settings-modal .zm-palette-row { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--text) 5%, transparent); border: 1px solid var(--card-border); font-size: .8rem; color: var(--text-2); }
#settings-modal .zm-palette-row span { flex: 1; min-width: 0; line-height: 1.35; }
#settings-modal .zm-palette { flex: none; min-height: 40px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--accent-fill); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }

/* Lunch popover (tap a lunch on the roster): its time and two big nudges */
#lunch-pop { position: fixed; z-index: 950; width: min(320px, calc(100vw - 20px)); padding: 14px 14px 12px; border-radius: 22px; background: var(--glass, color-mix(in srgb, var(--card-bg) 98%, transparent)); border: 1px solid var(--card-border); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); animation: ovPopIn var(--m-sheet, 240ms) var(--e-pop, ease) both; }
#lunch-pop[hidden] { display: none !important; }
#lunch-pop .lp-head { display: flex; align-items: center; gap: 8px; }
#lunch-pop .lp-who { flex: 1; min-width: 0; font-weight: 650; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#lunch-pop .lp-tag { padding: 2px 9px; border-radius: 999px; background: rgba(148,163,184,.22); color: var(--text-2); font-size: .72rem; font-weight: 600; }
#lunch-pop .lp-x { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text-2); display: grid; place-items: center; cursor: pointer; }
#lunch-pop .lp-time { margin-top: 10px; font-size: 1.7rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
#lunch-pop .lp-time i { font-style: normal; color: var(--text-muted); margin: 0 2px; }
#lunch-pop .lp-sub { font-size: .8rem; color: var(--text-muted); }
#lunch-pop .lp-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
#lunch-pop .lp-btns button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 10px; border: 1px solid var(--card-border); border-radius: 16px; background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--text); font: inherit; font-weight: 650; font-size: 1rem; cursor: pointer; }
#lunch-pop .lp-btns button span { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
#lunch-pop .lp-btns button small { font-size: .68rem; font-weight: 500; color: var(--text-muted); }
#lunch-pop .lp-btns button:active:not(:disabled) { background: color-mix(in srgb, var(--text) 16%, transparent); }
#lunch-pop .lp-btns button:disabled { opacity: .35; cursor: default; }
#lunch-pop .lp-note { margin-top: 10px; font-size: .76rem; color: var(--text-muted); line-height: 1.35; }
html.device-tablet #lunch-pop .lp-btns button { min-height: 64px; }
html.device-tablet #lunch-pop .lp-x { width: 44px; height: 44px; }
html.motion-off #lunch-pop { animation: none; }
@media print { #lunch-pop { display: none !important; } }


/* =============================================================================
   UI KIT (Oct 2026): the one set of tokens and components every new screen uses. Live reference: /kit.html. Rules: CLAUDE.md > "UI kit".
   Part 1 = tokens, Part 2 = components (.k-*), Part 3 = adapters that give the older screens' own class names the same look, so the whole app matches
   while the old markup is replaced one screen at a time. New code uses the .k-* classes and never invents a size, radius, colour or font size.
   ============================================================================= */
:root {
  /* shape */
  --k-r1: 8px;  --k-r2: 12px;  --k-r3: 16px;  --k-r4: 20px;  --k-pill: 999px;     /* tags, small chips | controls (buttons, fields) | cards, popovers | dialogs, sheets | pills */
  /* type (rem, root 16px): 11 / 12 / 13 / 14 / 16 / 20.8 / 28 */
  --k-fs-1: .6875rem; --k-fs-2: .75rem; --k-fs-3: .8125rem; --k-fs-4: .875rem; --k-fs-5: 1rem; --k-fs-6: 1.3rem; --k-fs-7: 1.75rem;
  --k-fw-1: 400; --k-fw-2: 500; --k-fw-3: 600; --k-fw-4: 650;
  /* space: a 4px grid */
  --k-s1: 4px; --k-s2: 8px; --k-s3: 12px; --k-s4: 16px; --k-s5: 20px; --k-s6: 24px; --k-s8: 32px;
  /* control heights (the iPad layout is bigger: nothing you tap is under 44pt there) */
  --k-h-sm: 36px; --k-h-md: 44px; --k-h-lg: 52px;
  /* surfaces on the graphite sheet */
  --k-fill-1: rgba(255, 255, 255, .06); --k-fill-2: rgba(255, 255, 255, .10); --k-fill-3: rgba(255, 255, 255, .16);
  --k-line: var(--card-border);
  --k-good-bg: rgba(52, 199, 89, .12);  --k-good-line: rgba(52, 199, 89, .32);  --k-good-ink: var(--green-text, #6ee7a0);
  --k-warn-bg: rgba(255, 159, 10, .12); --k-warn-line: rgba(255, 159, 10, .34); --k-warn-ink: var(--orange-text, #ffb340);
  --k-bad-bg:  rgba(255, 69, 58, .12);  --k-bad-line:  rgba(255, 69, 58, .34);  --k-bad-ink:  var(--red-text, #ff8a80);
  --k-info-bg: rgba(34, 179, 190, .12); --k-info-line: rgba(34, 179, 190, .34); --k-info-ink: var(--accent-text, #5fd4dc);
  /* elevation */
  --k-sh-1: 0 1px 2px rgba(0, 0, 0, .30);  --k-sh-2: 0 14px 40px rgba(0, 0, 0, .45);  --k-sh-3: 0 28px 70px rgba(0, 0, 0, .55);
  --k-ring: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
}
html.device-tablet { --k-h-sm: 44px; --k-h-md: 52px; --k-h-lg: 60px; }

/* ---- Button: .k-btn (+ --primary | --danger | --ghost, --sm, --icon) ---- */
.k-btn, html body dialog :is(button.primary, button.danger, .zs-apply, .zs-again, .zs-cancel, .zh-bulk, .zh-close, .zm-add, .zm-palette, .zm-foot > button, .zs-foot > button, .zh-foot > button, .su-foot > button, .staff-actions > button, .ui-dialog-actions > button):not(#_) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--k-s2); box-sizing: border-box;
  min-height: var(--k-h-md); padding: 0 var(--k-s5); border: 1px solid var(--k-line); border-radius: var(--k-r2) !important;
  background: var(--k-fill-2); color: var(--text); font: inherit; font-size: var(--k-fs-4) !important; font-weight: var(--k-fw-3) !important; line-height: 1.1; letter-spacing: 0 !important; text-transform: none !important;
  cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--m-state, 200ms) var(--e-std, ease), border-color var(--m-state, 200ms) var(--e-std, ease), transform var(--m-micro, 120ms) var(--e-std, ease), opacity var(--m-state, 200ms) var(--e-std, ease);
}
.k-btn:active:not(:disabled) { transform: scale(.98); background: var(--k-fill-3); }
@media (hover: hover) { .k-btn:hover:not(:disabled) { background: var(--k-fill-3); } }
.k-btn:focus-visible { outline: none; box-shadow: var(--k-ring); }
.k-btn:disabled, .k-btn[aria-disabled="true"] { opacity: .4; cursor: default; }
.k-btn--primary, html body dialog :is(button.primary, .zs-apply, .zh-bulk, .zm-add, .zm-palette):not(#_) { background: var(--accent-fill); border-color: transparent; color: #fff; }
@media (hover: hover) { .k-btn--primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent-fill) 88%, #fff); } }
.k-btn--danger, html body dialog button.danger:not(#_) { background: var(--red-fill, #d70015); border-color: transparent; color: #fff; }
.k-btn--ghost { background: transparent; border-color: transparent; color: var(--text-2); }
@media (hover: hover) { .k-btn--ghost:hover:not(:disabled) { background: var(--k-fill-2); } }
.k-btn--sm { min-height: var(--k-h-sm); padding: 0 var(--k-s4); font-size: var(--k-fs-3); border-radius: var(--k-r1); }
.k-btn--icon { width: var(--k-h-md); padding: 0; }
.k-btn--sm.k-btn--icon { width: var(--k-h-sm); }
.k-btn .ic, .k-btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* ---- Close button: .k-close (round, in every dialog head) ---- */
.k-close, html body dialog :is(.modal-close, .zm-close, .zh-x, .zs-x):not(#_) {
  flex: none; display: grid !important; place-items: center; width: 40px; height: 40px; min-height: 0 !important; min-width: 0 !important; padding: 0 !important; margin: 0;
  border: 0 !important; border-radius: 50% !important; background: var(--k-fill-2) !important; color: var(--text-2) !important; font-size: var(--k-fs-5) !important; line-height: 1; cursor: pointer;
}
html.device-tablet .k-close, html.device-tablet dialog :is(.modal-close, .zm-close, .zh-x, .zs-x) { width: 44px !important; height: 44px !important; }
.k-close .ic, dialog :is(.modal-close, .zm-close, .zh-x, .zs-x) .ic { width: 18px; height: 18px; }

/* ---- Field: .k-field (input, select, textarea) with .k-label and .k-hint ---- */
.k-field, html body dialog :is(input[type="text"], input[type="number"], input[type="time"], input[type="search"], input[type="email"], input[type="password"], input:not([type]), select, textarea):not(#_) {
  box-sizing: border-box; width: 100%; min-height: var(--k-h-md); padding: 0 var(--k-s3); border: 1px solid var(--k-line); border-radius: var(--k-r2) !important;
  background: var(--k-fill-1); color: var(--text); font: inherit; font-size: var(--k-fs-4) !important; outline: none;
  transition: border-color var(--m-state, 200ms) var(--e-std, ease), box-shadow var(--m-state, 200ms) var(--e-std, ease);
}
textarea.k-field { padding: var(--k-s3); min-height: 96px; }
.k-field:focus, html body dialog :is(input, select, textarea):focus:not(#_) { border-color: var(--accent); box-shadow: var(--k-ring); }
.k-field--sm, html body dialog :is(.coverage-rule-row, .zh-win) :is(input, select):not(#_) { min-height: var(--k-h-sm); padding: 0 var(--k-s2); border-radius: var(--k-r1) !important; font-size: var(--k-fs-3) !important; }
.k-label { display: block; margin: 0 0 var(--k-s1); color: var(--text-2); font-size: var(--k-fs-3); font-weight: var(--k-fw-3); }
.k-hint { margin: var(--k-s1) 0 0; color: var(--text-muted); font-size: var(--k-fs-3); line-height: 1.4; }
@media (max-width: 640px) { .k-field, html body dialog :is(input, select, textarea):not(#_) { font-size: var(--k-fs-5) !important; } }   /* 16px stops iPhone Safari zooming into a field */

/* ---- Dialog: .k-dialog > .k-head (.k-title, .k-sub, .k-close) + .k-body + .k-foot ---- */
.k-dialog, html body dialog:not(#_) { border: 1px solid var(--k-line) !important; border-radius: var(--k-r4) !important; background: color-mix(in srgb, var(--card-bg) 98%, transparent) !important; color: var(--text); box-shadow: var(--k-sh-3) !important; }
.k-dialog { display: flex; flex-direction: column; max-width: 100%; overflow: hidden; }
.k-dialog--sm { width: min(420px, 94vw); } .k-dialog--md { width: min(560px, 94vw); } .k-dialog--lg { width: min(720px, 94vw); } .k-dialog--xl { width: min(1100px, 96vw); }
.k-head { display: flex; align-items: flex-start; gap: var(--k-s3); padding: var(--k-s5) var(--k-s6) var(--k-s2); }
.k-head > :first-child { flex: 1; min-width: 0; }
.k-title, html body dialog :is(.modal-header h2, .zm-head h2, .zh-head h2, .zs-head h2, #ui-dialog-title):not(#_) { margin: 0; color: var(--text); font-size: var(--k-fs-6) !important; font-weight: var(--k-fw-4) !important; letter-spacing: -.01em; line-height: 1.2; text-transform: none; }
.k-sub, html body dialog :is(.modal-header p, .zm-head p, .zh-head p, .zs-sub):not(#_) { margin: var(--k-s1) 0 0; color: var(--text-muted); font-size: var(--k-fs-3); line-height: 1.35; }
.k-body { padding: var(--k-s2) var(--k-s6); min-height: 0; overflow: auto; }
.k-foot, html body dialog :is(.zm-foot, .zs-foot, .zh-foot, .su-foot, .staff-actions, .ui-dialog-actions):not(#_) { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--k-s2); }
.k-foot { padding: var(--k-s3) var(--k-s6) var(--k-s5); border-top: 1px solid var(--k-line); }
.k-foot .k-note, .k-foot .k-grow { margin-right: auto; }

/* ---- Chips and tags: .k-chip (a zone, in its own colours), .k-tag (neutral label), .k-badge (a count) ---- */
.k-chip { display: inline-flex; align-items: center; gap: var(--k-s2); min-height: 24px; padding: 0 10px; border-radius: var(--k-r1); font-size: var(--k-fs-2); font-weight: var(--k-fw-2); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 16%, transparent); }
.k-tag { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: var(--k-pill); background: var(--k-fill-2); color: var(--text-2); font-size: var(--k-fs-2); font-weight: var(--k-fw-3); white-space: nowrap; }
.k-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--k-pill); background: var(--k-fill-3); color: var(--text); font-size: var(--k-fs-2); font-weight: var(--k-fw-3); font-variant-numeric: tabular-nums; }
.k-badge--warn { background: var(--orange-fill, #ff9f0a); color: #1c1200; } .k-badge--bad { background: var(--red-fill, #d70015); color: #fff; }

/* ---- Stat: .k-stat (a number with its label) and notes: .k-note ---- */
.k-stat { display: inline-flex; align-items: baseline; gap: var(--k-s2); padding: var(--k-s2) var(--k-s4); border-radius: var(--k-r3); background: var(--k-fill-1); border: 1px solid var(--k-line); }
.k-stat b { font-size: 1.25rem; font-weight: var(--k-fw-4); font-variant-numeric: tabular-nums; } .k-stat span { color: var(--text-2); font-size: var(--k-fs-3); }
.k-stat--good, .k-note--good { background: var(--k-good-bg); border-color: var(--k-good-line); } .k-stat--good b { color: var(--k-good-ink); }
.k-stat--warn, .k-note--warn { background: var(--k-warn-bg); border-color: var(--k-warn-line); } .k-stat--warn b { color: var(--k-warn-ink); }
.k-stat--bad, .k-note--bad { background: var(--k-bad-bg); border-color: var(--k-bad-line); } .k-stat--bad b { color: var(--k-bad-ink); }
.k-note { display: flex; gap: var(--k-s3); align-items: flex-start; padding: var(--k-s3) var(--k-s4); border-radius: var(--k-r3); border: 1px solid var(--k-line); background: var(--k-fill-1); color: var(--text-2); font-size: var(--k-fs-3); line-height: 1.4; }
.k-note--info { background: var(--k-info-bg); border-color: var(--k-info-line); }
.k-note--good { color: var(--k-good-ink); } .k-note--warn { color: var(--k-warn-ink); } .k-note--bad { color: var(--k-bad-ink); }
.k-empty { padding: var(--k-s8) var(--k-s6); text-align: center; color: var(--text-muted); font-size: var(--k-fs-4); line-height: 1.5; }

/* ---- Segmented control: .k-seg > button[aria-pressed] ---- */
.k-seg { display: inline-flex; width: fit-content; padding: 3px; gap: 2px; border-radius: var(--k-r2); background: var(--k-fill-1); border: 1px solid var(--k-line); }
.k-seg > button { min-height: calc(var(--k-h-md) - 8px); padding: 0 var(--k-s4); border: 0; border-radius: calc(var(--k-r2) - 3px); background: transparent; color: var(--text-2); font: inherit; font-size: var(--k-fs-4); font-weight: var(--k-fw-3); cursor: pointer; transition: background-color var(--m-state, 200ms) var(--e-std, ease), color var(--m-state, 200ms) var(--e-std, ease); }
.k-seg > button[aria-pressed="true"], .k-seg > button.on { background: #fff; color: #0b1215; box-shadow: var(--k-sh-1); }

/* ---- Switch: .k-switch (a label around a checkbox) ---- */
.k-switch { display: inline-flex; align-items: center; gap: var(--k-s3); cursor: pointer; font-size: var(--k-fs-4); }
.k-switch input { position: absolute; opacity: 0; pointer-events: none; }
.k-switch i { position: relative; flex: none; width: 46px; height: 28px; border-radius: var(--k-pill); background: var(--k-fill-3); transition: background-color var(--m-state, 200ms) var(--e-std, ease); }
.k-switch i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: var(--k-sh-1); transition: transform var(--m-move, 240ms) var(--e-pop, ease); }
.k-switch input:checked + i { background: var(--green, #30d158); } .k-switch input:checked + i::after { transform: translateX(18px); }
.k-switch input:focus-visible + i { box-shadow: var(--k-ring); }

/* ---- Card and list: .k-card, .k-list > .k-row ---- */
.k-card { padding: var(--k-s4); border-radius: var(--k-r3); background: var(--k-fill-1); border: 1px solid var(--k-line); }
.k-list { border-radius: var(--k-r3); border: 1px solid var(--k-line); background: var(--k-fill-1); overflow: hidden; }
.k-row { display: flex; align-items: center; gap: var(--k-s3); min-height: var(--k-h-lg); padding: 0 var(--k-s4); border: 0; border-bottom: 1px solid var(--k-line); background: transparent; color: var(--text); font: inherit; font-size: var(--k-fs-4); text-align: left; width: 100%; cursor: pointer; }
.k-row:last-child { border-bottom: 0; }
@media (hover: hover) { .k-row:hover { background: var(--k-fill-1); } }
.k-row .k-grow { flex: 1; min-width: 0; }
.k-section { margin: var(--k-s5) 0 var(--k-s2); color: var(--text-muted); font-size: var(--k-fs-3); font-weight: var(--k-fw-3); }

/* ---- Popover (.k-pop) and bottom sheet (.k-sheet): a floating panel next to what was tapped ---- */
.k-pop { padding: var(--k-s3) var(--k-s4); border-radius: var(--k-r3); background: var(--glass, color-mix(in srgb, var(--card-bg) 98%, transparent)); border: 1px solid var(--k-line); box-shadow: var(--k-sh-2); }
.k-sheet { padding: var(--k-s4) var(--k-s5) var(--k-s6); border-radius: var(--k-r4) var(--k-r4) 0 0; background: var(--glass, color-mix(in srgb, var(--card-bg) 98%, transparent)); border: 1px solid var(--k-line); border-bottom: 0; box-shadow: var(--k-sh-3); }

/* ---- Part 3: adapters for the older screens (their own class names get the kit's look; remove an adapter when its screen moves to .k-* markup) ---- */
html body dialog :is(.modal-header, .zm-head, .zh-head, .zs-head):not(#_) { border-bottom: 0 !important; }
html body dialog .modal-header:not(#_) { align-items: flex-start; padding-bottom: var(--k-s3); }
html body dialog .staff-actions:not(#_), html body dialog .su-foot:not(#_) { padding-top: var(--k-s3); border-top: 1px solid var(--k-line); }
/* buttons with no class inside a dialog are the secondary button */
html body dialog button:is(:not([class]), [class=""]):not(#_) { display: inline-flex; align-items: center; justify-content: center; gap: var(--k-s2); box-sizing: border-box; min-height: var(--k-h-md); padding: 0 var(--k-s5); border: 1px solid var(--k-line); border-radius: var(--k-r2) !important; background: var(--k-fill-2); color: var(--text); font: inherit; font-size: var(--k-fs-4) !important; font-weight: var(--k-fw-3) !important; cursor: pointer; }
/* small controls inside rows: delete cross, tinted 'Set LEAD' pill */
html body dialog :is(.zm-del, .zh-set):not(#_) { min-height: 0 !important; height: var(--k-h-sm) !important; min-width: var(--k-h-sm); }
html body dialog .zm-del:not(#_) { padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--text-muted) !important; border-radius: var(--k-r1) !important; font-size: var(--k-fs-5) !important; }
html body dialog .zh-set:not(#_) { padding: 0 var(--k-s3) !important; font-size: var(--k-fs-2) !important; font-weight: var(--k-fw-3) !important; border-radius: var(--k-pill) !important; }
/* every padded dialog has the same inside margin; the flush ones (history, suggest) put their own on the head, body and foot */
html body dialog:not(.zs-flush):not(#zone-suggest-modal):not(#zone-history-modal):not(#_) { padding: var(--k-s5) var(--k-s6) var(--k-s5) !important; }
html body dialog .tl-body h3:not(#_) { margin: var(--k-s4) 0 var(--k-s2); color: var(--text-muted); font-size: var(--k-fs-3) !important; font-weight: var(--k-fw-3) !important; letter-spacing: 0 !important; text-transform: none !important; }
html body dialog :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="hidden"]):not([type="range"]):not(#_) { background: var(--k-fill-1) !important; }
@media print { .k-dialog, .k-pop, .k-sheet { display: none !important; } }
html body dialog :is(.form-group > label, .zm-label):not(#_) { display: block; margin: 0 0 var(--k-s1); color: var(--text-2) !important; font-size: var(--k-fs-3) !important; font-weight: var(--k-fw-3) !important; letter-spacing: 0 !important; text-transform: none !important; }
html body dialog :is(.roster-feature-hint, .su-sub):not(#_) { margin: var(--k-s1) 0 var(--k-s3); color: var(--text-muted) !important; font-size: var(--k-fs-3) !important; line-height: 1.4; }

/* a long dialog scrolls, but its buttons stay in view: the foot sticks to the bottom edge */
html body dialog :is(.zm-foot, .staff-actions, .su-foot):not(#_) { position: sticky; bottom: calc(-1 * var(--k-s5)); z-index: 3; margin: var(--k-s4) calc(-1 * var(--k-s6)) calc(-1 * var(--k-s5)); padding: var(--k-s3) var(--k-s6) var(--k-s5); background: color-mix(in srgb, var(--card-bg) 98%, transparent); }




/* =============================================================================
   THEME A: the Now card (the header bar, tray and islands are in the 'THEME A CARBON COPY' section at the end of this file)
   ============================================================================= */
@media print { html.shell-a .isl-bar { display: none !important; } }
html.shell-a.zone-paint .isl-tray > * { visibility: hidden; }
html.phone-mode.shell-a .stage1b-topbar:not(#_):not(#_):not(#_), html.phone-mode.shell-a .isl-bar, html.phone-mode.shell-a .isl-tray, html.phone-mode.shell-a .covcard { display: none !important; }

/* BREAK PILLS AT 1181-1365px: the Breaks column was 136px, so the third pill was 35px wide and the 9.92px time ("14:30") lost its last digit (also on the deployed site); 142px gives every pill room (146 leaves about 3px to spare for other browsers' text widths) */
@media (min-width: 1181px) { html body #roster-table { --s22-breaks-w: clamp(146px, 10.4vw, 158px); } }

/* motion (copied from the cloud prototype): --pp-p is the panel's 0 to 1 opening, animated from block 50 on the panel and the roster at once; --e-spring is A's curve for morphs and panels (a smooth ease-out, no overshoot since 20 Oct 2026) */
html[data-look="a"] { --e-spring: var(--e-std); }
/* (the overshooting spring was replaced by the plain ease-out on 20 Oct 2026: large panels should not wobble) */
html.motion-off { --e-spring: var(--e-std); }
.pp-fly { position: fixed; z-index: 970; transform-origin: 0 0; white-space: nowrap; color: var(--a-text, #f5f7fb); pointer-events: none; will-change: transform; font-family: var(--font); }

/* THEME A CARBON COPY START (generated by tools/theme-a/build.py from tools/theme-a/carbon.css, roster.css, menu.css and dialogs.css; edit those files, not this section) */
html.shell-a { --a-bg: #0b1215; --a-surface: #121b1f; --a-surface-2: #19252a; --a-surface-3: #223239; --a-surface-hover: #2b3d45; --a-surface-press: #1a272c;
  --a-line: rgba(255,255,255,.09); --a-line-2: rgba(255,255,255,.16);
  --a-muted: #8fa4ab; --a-text: #eef6f8; --a-text-2: #b5c8ce;
  --a-accent-fill: #0e7c86; --a-accent-hover: #10838e; --a-accent-press: #0a6670; --a-accent-ink: #ffffff; --a-accent-text: #5fd4dc; --a-accent-line: #22b3be;
  --a-bad: #ff453a; --a-bad-bg: rgba(255,69,58,.14); --a-bad-bg2: rgba(255,69,58,.24); --a-bad-line: rgba(255,69,58,.45); --a-bad-text: #ff8a82;
  --a-good: #30d158; --a-good-bg: rgba(48,209,88,.13); --a-good-line: rgba(48,209,88,.45);
  --a-warn: #ff9f0a; --a-warn-bg: rgba(255,159,10,.14); --a-warn-text: #ffb340;
  --a-info-bg: rgba(34,179,190,.14); --a-info-text: #a6e9ee;
  --a-glass: rgba(16,25,29,.86); --a-glass-strong: rgba(20,31,36,.95);
  --a-seg-track: rgba(255,255,255,.08); --a-seg-thumb: #eef6f8; --a-seg-thumb-ink: #0b1215;
  --a-focus: rgba(34,179,190,.55); --a-hover-veil: rgba(255,255,255,.06); --a-now-line: #22c3cf;
  --a-bar-glass: rgba(18,30,35,.56); --a-bar-fog: linear-gradient(180deg, rgba(225,245,248,.075), rgba(225,245,248,.02) 70%); --a-bar-rim: rgba(255,255,255,.12); --a-bar-shine: rgba(255,255,255,.10); --a-bar-under: rgba(0,0,0,.18);
  --a-sh-1: 0 1px 2px rgba(0,0,0,.4); --a-sh-2: 0 10px 30px rgba(0,0,0,.45); --a-sh-3: 0 24px 64px rgba(0,0,0,.55);
  --a-r1: 10px; --a-r2: 14px; --a-r3: 18px; --a-r4: 24px; --a-insp-w: 400px;
  --a-h-sm: 32px; --a-h-md: 36px; --a-h-lg: 44px; --a-pad-x: 14px;
  --a-fs-body: 14px; --a-fs-small: 13px; --a-fs-cap: 12px; --a-fs-micro: 11px; --a-fs-zone: 10px; --a-fs-btn: 13px; --a-fs-lg: 17px; }
html.shell-a.device-tablet { --a-h-sm: 44px; --a-h-md: 52px; --a-h-lg: 60px; --a-pad-x: 18px;
  --a-fs-body: 16px; --a-fs-small: 14px; --a-fs-cap: 13px; --a-fs-micro: 12px; --a-fs-zone: 12.5px; --a-fs-btn: 16px; }
html.shell-a.device-tablet .isl-bar, html.shell-a.device-tablet .isl-tray, html.shell-a.device-tablet #main-table-container { --a-h-sm: 32px; --a-h-md: 36px; --a-h-lg: 44px; --a-pad-x: 14px;
  --a-fs-body: 14px; --a-fs-small: 13px; --a-fs-cap: 12px; --a-fs-micro: 11px; --a-fs-zone: 10px; --a-fs-btn: 13px; }
html.shell-a body:is(.locked-mode, :not(.locked-mode)):not(#_):not(#_) { padding: 0 !important; margin: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #main-table-container:not(#_):not(#_) { margin: 0 14px 14px !important; width: auto !important; max-width: none !important; border-radius: var(--a-r4) !important; box-sizing: border-box !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .stage1b-topbar:not(#_):not(#_) { display: block !important; padding: 0 !important; margin: 0 !important; height: auto !important; min-height: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray:not(#_):not(#_) { letter-spacing: normal !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar:not(#_):not(#_) { position: relative !important; z-index: 30 !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 10px !important; box-sizing: border-box !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 12px 14px 8px !important; padding: 8px 10px 8px 16px !important; border-radius: var(--a-r4) !important; background: var(--a-bar-fog), var(--a-bar-glass) !important; -webkit-backdrop-filter: blur(24px) saturate(1.7) !important; backdrop-filter: blur(24px) saturate(1.7) !important; border: 1px solid var(--a-bar-rim) !important; box-shadow: inset 0 1px 0 var(--a-bar-shine), inset 0 -1px 0 var(--a-bar-under), var(--a-sh-2) !important; color: var(--a-text) !important; font-family: var(--font) !important; font-size: var(--a-fs-body) !important; line-height: 1.45 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar > *:not(#_):not(#_) { flex: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar > .isl-sp:not(#_):not(#_) { flex: 1 1 0 !important; min-width: 8px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar > .stage1b-brand:not(#_):not(#_) { display: inline-flex !important; align-items: center !important; gap: 10px !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 6px 0 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; color: var(--a-text) !important; white-space: nowrap !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar > .stage1b-brand > .stage1b-symbol:not(#_):not(#_) { display: block !important; flex: none !important; width: auto !important; height: 34px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar > .stage1b-brand > .stage1b-symbol img:not(#_):not(#_) { display: block !important; width: auto !important; height: 34px !important; max-width: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar > .stage1b-brand > .stage1b-brand-copy:not(#_):not(#_) { display: flex !important; flex-direction: column !important; justify-content: center !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar > .stage1b-brand .stage1b-brand-copy strong:not(#_):not(#_) { font-size: var(--a-fs-body) !important; font-weight: 650 !important; line-height: 1.2 !important; letter-spacing: 0 !important; color: var(--a-text) !important; text-transform: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar > .stage1b-brand .stage1b-brand-copy span:not(#_):not(#_) { font-size: var(--a-fs-micro) !important; font-weight: 400 !important; line-height: 1.25 !important; letter-spacing: 0 !important; color: var(--a-muted) !important; text-transform: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar.isl-nobrand > .stage1b-brand > .stage1b-brand-copy:not(#_):not(#_) { display: none !important }
html.shell-a.pp-push body:is(.locked-mode, :not(.locked-mode)) .isl-bar > .stage1b-brand > .stage1b-brand-copy:not(#_):not(#_) { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar > .stage1b-title:not(#_):not(#_) { display: flex !important; container-type: normal !important; align-items: center !important; gap: 8px !important; width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .stage1b-title > strong:not(#_):not(#_) { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .stage19-date-nav:not(#_):not(#_) { display: inline-flex !important; align-items: center !important; gap: 8px !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .stage19-date-nav .date-box:not(#_):not(#_) { display: inline-flex !important; align-items: center !important; gap: 2px !important; box-sizing: border-box !important; width: auto !important; min-width: 0 !important; height: var(--a-h-md) !important; min-height: 0 !important; margin: 0 !important; padding: 3px !important; background: var(--a-seg-track) !important; border: 0 !important; border-radius: 999px !important; box-shadow: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .stage19-date-step:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .stage1b-date-button:not(#_):not(#_) { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: auto !important; min-width: 0 !important; height: calc(var(--a-h-md) - 6px) !important; min-height: 0 !important; margin: 0 !important; padding: 0 var(--a-pad-x) !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; color: var(--a-text-2) !important; font-family: inherit !important; font-size: var(--a-fs-btn) !important; font-weight: 600 !important; line-height: 1 !important; cursor: pointer !important; transition: background var(--m-state, 200ms) var(--e-std), color var(--m-state, 200ms) var(--e-std) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .stage19-date-step svg:not(#_):not(#_) { width: 15px !important; height: 15px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .stage19-date-step:hover:not(#_):not(#_) { background: var(--a-hover-veil) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .stage1b-date-button:not(#_):not(#_) { background: var(--a-seg-thumb) !important; color: var(--a-seg-thumb-ink) !important; box-shadow: 0 1px 3px rgba(0,0,0,.3) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .stage1b-date-button span:not(#_):not(#_) { color: inherit !important; font: inherit !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .stage19-today:not(#_):not(#_) { display: inline-flex !important; align-items: center !important; gap: 6px !important; height: var(--a-h-sm) !important; min-height: 0 !important; padding: 0 calc(var(--a-pad-x) * .75) !important; border-radius: 999px !important; border: 1px solid var(--a-line-2) !important; background: var(--a-surface-3) !important; color: var(--a-text) !important; font-size: var(--a-fs-btn) !important; font-weight: 600 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .stage19-today[hidden]:not(#_):not(#_) { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .islands:not(#_):not(#_) { display: inline-flex !important; align-items: center !important; gap: 6px !important; margin: 0 !important; padding: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .island:not(#_):not(#_) { display: inline-flex !important; align-items: center !important; gap: 8px !important; box-sizing: border-box !important; height: var(--a-h-md) !important; min-height: 0 !important; min-width: 0 !important; margin: 0 !important; padding: 0 16px 0 14px !important; border-radius: 999px !important; border: 1px solid var(--a-line-2) !important; background: var(--a-surface-3) !important; color: var(--a-text) !important; font-family: inherit !important; font-weight: 600 !important; font-size: var(--a-fs-btn) !important; line-height: 1.45 !important; cursor: pointer !important; overflow: hidden !important; white-space: nowrap !important; box-shadow: none !important; transition: background var(--m-state, 200ms) var(--e-std), color var(--m-state, 200ms) var(--e-std), border-color var(--m-state, 200ms) var(--e-std), transform var(--m-micro, 120ms) var(--e-std) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .island:active:not(#_):not(#_) { transform: scale(.97) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .isl-dot:not(#_):not(#_) { flex: none !important; width: 9px !important; height: 9px !important; border-radius: 50% !important; background: currentColor !important; box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 22%, transparent) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .island.st-warn:not(#_):not(#_) { background: var(--a-warn-bg) !important; color: var(--a-warn-text) !important; border-color: color-mix(in srgb, var(--a-warn) 40%, transparent) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .island.st-ok:not(#_):not(#_) { background: var(--a-good-bg) !important; color: var(--a-good) !important; border-color: color-mix(in srgb, var(--a-good) 40%, transparent) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .island.st-past:not(#_):not(#_) { background: var(--a-surface-3) !important; color: var(--a-text-2) !important; border-color: var(--a-line-2) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .island.st-plan:not(#_):not(#_) { background: var(--a-info-bg) !important; color: var(--a-info-text) !important; border-color: color-mix(in srgb, var(--a-accent-line) 40%, transparent) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .isl-t:not(#_):not(#_) { max-width: none !important; overflow: visible !important; text-overflow: clip !important; font: inherit !important; color: inherit !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .isl-n:not(#_):not(#_) { font-size: var(--a-fs-cap) !important; opacity: .8 !important; font-weight: 600 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .island-b:not(#_):not(#_) { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; box-sizing: border-box !important; height: var(--a-h-md) !important; min-height: 0 !important; min-width: var(--a-h-md) !important; margin: 0 !important; padding: 0 12px !important; border-radius: 999px !important; border: 1px solid var(--a-bad-line) !important; background: var(--a-bad-bg) !important; color: var(--a-bad-text) !important; font-family: inherit !important; font-weight: 700 !important; font-size: var(--a-fs-btn) !important; line-height: 1 !important; cursor: pointer !important; box-shadow: none !important; transition: transform var(--m-micro, 120ms) var(--e-std) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .island-b[hidden]:not(#_):not(#_) { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .island-b .ic:not(#_):not(#_) { width: 16px !important; height: 16px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .island-b:active:not(#_):not(#_) { transform: scale(.94) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar #fit-controls:not(#_):not(#_) { position: relative !important; inset: auto !important; display: inline-flex !important; align-items: center !important; gap: 2px !important; box-sizing: border-box !important; width: auto !important; min-width: 0 !important; height: var(--a-h-md) !important; margin: 0 !important; padding: 3px !important; border-radius: 999px !important; background: var(--a-seg-track) !important; border: 0 !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; grid-template-columns: none !important; overflow: visible !important; z-index: auto !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar #fit-controls button:not(#_):not(#_) { position: relative !important; z-index: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: auto !important; min-width: 0 !important; height: calc(var(--a-h-md) - 6px) !important; min-height: 0 !important; margin: 0 !important; padding: 0 var(--a-pad-x) !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; box-shadow: none !important; color: var(--a-text-2) !important; font-family: inherit !important; font-size: var(--a-fs-btn) !important; font-weight: 600 !important; line-height: 1 !important; transition: color var(--m-state, 200ms) var(--e-std) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar #fit-controls button[aria-pressed="true"]:not(#_):not(#_) { color: var(--a-seg-thumb-ink) !important; background: transparent !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar #fit-controls #mode-fit:not(#_):not(#_) { order: 1 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar #fit-controls #mode-normal:not(#_):not(#_) { order: 2 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar #fit-controls .fc-thumb:not(#_):not(#_) { position: absolute !important; z-index: 0 !important; top: 3px !important; bottom: 3px !important; left: 0 !important; right: auto !important; height: auto !important; border-radius: 999px !important; background: var(--a-seg-thumb) !important; box-shadow: 0 1px 3px rgba(0,0,0,.3) !important; border: 0 !important; pointer-events: none !important; transition: transform var(--m-move, 240ms) var(--e-pop), width var(--m-move, 240ms) var(--e-pop) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions:not(#_):not(#_) { display: flex !important; align-items: center !important; gap: 10px !important; width: auto !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions > button:not(#_):not(#_) { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; flex: none !important; box-sizing: border-box !important; width: auto !important; min-width: 0 !important; height: var(--a-h-md) !important; min-height: 0 !important; margin: 0 !important; padding: 0 var(--a-pad-x) !important; border-radius: 999px !important; border: 1px solid var(--a-line-2) !important; background: var(--a-surface-3) !important; color: var(--a-text) !important; font-family: inherit !important; font-size: var(--a-fs-btn) !important; font-weight: 600 !important; line-height: 1 !important; white-space: nowrap !important; cursor: pointer !important; text-decoration: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important; transition: background var(--m-micro, 120ms) var(--e-std), transform var(--m-micro, 120ms) var(--e-std), box-shadow var(--m-micro, 120ms) var(--e-std) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions > button:hover:not(:disabled):not(#_):not(#_) { background: var(--a-surface-hover) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions > button:active:not(:disabled):not(#_):not(#_) { background: var(--a-surface-press) !important; transform: scale(.97) !important; box-shadow: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions > button:focus-visible:not(#_):not(#_) { outline: 0 !important; box-shadow: 0 0 0 3px var(--a-focus) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions > button:disabled:not(#_):not(#_) { opacity: .42 !important; transform: none !important; cursor: not-allowed !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions > button svg:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions > button .ic:not(#_):not(#_) { width: 15px !important; height: 15px !important; flex: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions > button > span:not(#_):not(#_) { font: inherit !important; color: inherit !important; line-height: 1 !important; margin: 0 !important; padding: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions > button > svg:not(#_):not(#_) { margin: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions > .tb-cov:not(#_):not(#_) { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions > .tb-undo:not(#_):not(#_) { order: -1 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #stage7-top-actions > .tb-undo[hidden]:not(#_):not(#_) { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-palette-toggle:not(#_):not(#_) { container-type: normal !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-palette-toggle .zp-chip:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-palette-toggle .zp-caret:not(#_):not(#_) { display: none !important }
html.shell-a.zone-paint body:is(.locked-mode, :not(.locked-mode)) #zone-palette-toggle .zp-chip:not(#_):not(#_) { display: inline-flex !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tb-undo:not(#_):not(#_)::after { content: attr(data-kbd) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; min-width: 18px !important; height: 18px !important; margin: 0 0 0 2px !important; padding: 0 4px !important; font-size: var(--a-fs-micro) !important; font-weight: 600 !important; line-height: 1 !important; color: var(--a-muted) !important; background: var(--a-surface-3) !important; border: 1px solid var(--a-line) !important; border-radius: 6px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tb-undo:not([data-kbd]):not(#_):not(#_)::after { display: none !important }
html.shell-a.device-tablet body:is(.locked-mode, :not(.locked-mode)) #tb-undo:not(#_):not(#_)::after { display: none !important }
html.shell-a.pp-push body:is(.locked-mode, :not(.locked-mode)) #tb-undo:not(#_):not(#_)::after { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar.isl-icons #tb-undo:not(#_):not(#_)::after { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar.isl-icons #stage7-top-actions > button:not(#_):not(#_) { width: var(--a-h-md) !important; padding: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar.isl-icons #stage7-top-actions > button > span:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar.isl-icons #stage7-top-actions > button .zp-chip:not(#_):not(#_) { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar.isl-two:not(#_):not(#_) { flex-wrap: wrap !important; row-gap: 8px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar.isl-two > .stage1b-brand:not(#_):not(#_) { order: 1 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar.isl-two > .stage1b-title:not(#_):not(#_) { order: 2 !important; flex: 1 1 200px !important; min-width: 200px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar.isl-two > .stage1b-title .stage19-date-nav:not(#_):not(#_) { width: 100% !important; justify-content: flex-start !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar.isl-two > #stage7-top-actions:not(#_):not(#_) { order: 3 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar.isl-two > .isl-sp:not(#_):not(#_) { order: 4 !important; flex: 0 0 100% !important; height: 0 !important; min-width: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar.isl-two > #fit-controls:not(#_):not(#_) { order: 5 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar.isl-two > .islands:not(#_):not(#_) { order: 6 !important }
@media (max-width: 560px) {
  html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar.isl-two > #fit-controls:not(#_):not(#_) { order: 3 !important }
  html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar.isl-two > #stage7-top-actions:not(#_):not(#_) { order: 4 !important; margin-left: auto !important }
  html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar.isl-two > .isl-sp:not(#_):not(#_) { order: 5 !important }
  html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar.isl-two > .islands:not(#_):not(#_) { order: 6 !important }
}
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray:not(#_):not(#_) { font-size: var(--a-fs-body) !important; line-height: 1.2 !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px !important; box-sizing: border-box !important; width: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 22px 10px !important; background: none !important; border: 0 !important; box-shadow: none !important; font-family: var(--font) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray:not(#_):not(#_) { transition: max-height var(--m-move) var(--e-std), opacity var(--m-state) var(--e-std), padding var(--m-move) var(--e-std) !important }
html.shell-a.tray-moving body:is(.locked-mode, :not(.locked-mode)) .isl-tray:not(#_):not(#_) { overflow: hidden !important; max-height: var(--tray-h, 400px) !important }
html.shell-a.tray-min body:is(.locked-mode, :not(.locked-mode)) .isl-tray:not(#_):not(#_) { overflow: hidden !important }
html.shell-a.tray-min body:is(.locked-mode, :not(.locked-mode)) .isl-tray:not(#_):not(#_) { max-height: 0 !important; min-height: 0 !important; opacity: 0 !important; padding-bottom: 0 !important; pointer-events: none !important }
html.shell-a.zone-paint body:is(.locked-mode, :not(.locked-mode)) .isl-tray:not(#_):not(#_) { min-height: 54px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray > #stage7-leads:not(#_):not(#_) { display: contents !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray .stage7-lead-card:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray .stage1b-kpi:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray > .stage1b-performance:not(#_):not(#_) { display: flex !important; flex-direction: row !important; align-items: baseline !important; gap: 6px !important; box-sizing: border-box !important; width: auto !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 5px 12px !important; border-radius: 999px !important; background: transparent !important; border: 1px solid var(--a-line) !important; box-shadow: none !important; color: var(--a-text) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray .stage7-lead-card[hidden]:not(#_):not(#_) { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray .stage1b-kpi > span:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray .stage7-lead-card > span:not(#_):not(#_) { display: inline !important; margin: 0 !important; padding: 0 !important; font-size: var(--a-fs-cap) !important; font-weight: 400 !important; color: var(--a-muted) !important; line-height: 1.45 !important; letter-spacing: 0 !important; text-transform: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray .stage1b-kpi > strong:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray .stage7-lead-card > strong:not(#_):not(#_) { margin: 0 !important; padding: 0 !important; width: auto !important; font-size: var(--a-fs-body) !important; font-weight: 650 !important; color: var(--a-text) !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray .stage1b-kpi > small:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray .stage7-lead-card > small:not(#_):not(#_) { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray .stage1b-staff:not(#_):not(#_) { container-type: normal !important; flex-wrap: nowrap !important; min-width: 0 !important; overflow: visible !important; grid-template-columns: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray .stage1b-staff > *:not(#_):not(#_) { grid-column: auto !important; width: auto !important; margin: 0 !important; flex: 0 0 auto !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray .stage1b-staff > span > svg:not(#_):not(#_) { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray .stage1b-staff > span:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray .stage1b-staff > strong:not(#_):not(#_) { display: inline !important; overflow: visible !important; white-space: nowrap !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray > .stage1b-performance:not(#_):not(#_) { align-items: center !important; cursor: pointer !important; font-family: inherit !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray > .stage1b-performance .stage1b-perf-icon:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray > .stage1b-performance .stage1b-perf-copy em:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray > .stage1b-performance .stage1b-perf-copy small:not(#_):not(#_) { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray > .stage1b-performance .stage1b-perf-copy:not(#_):not(#_) { display: inline !important; margin: 0 !important; padding: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray > .stage1b-performance .stage1b-perf-copy b:not(#_):not(#_) { font-size: var(--a-fs-body) !important; font-weight: 650 !important; color: var(--a-text) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray > .stage1b-performance .stage1b-perf-chev svg:not(#_):not(#_) { width: 14px !important; height: 14px !important; color: var(--a-muted) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray .stage1b-kpi#isl-brk strong:not(#_):not(#_) { color: var(--a-text) !important }
@property --pp-p { syntax: '<number>'; inherits: false; initial-value: 1; }
.person-panel { letter-spacing: normal; position: fixed; z-index: 940; top: 12px; right: 14px; bottom: 14px; width: calc(var(--a-insp-w, 400px) * var(--pp-p, 1)); box-sizing: border-box; overflow: hidden; background: var(--a-surface); border: 1px solid var(--a-line-2); border-radius: var(--a-r4); box-shadow: var(--a-sh-2);    color: var(--a-text); font-family: var(--font); font-size: var(--a-fs-body); line-height: 1.45; touch-action: pan-y }
.person-panel[hidden] { display: none !important }
.person-panel.pp-floating { top: var(--pp-top, 100px); right: 12px; bottom: 12px; width: var(--a-insp-w, 400px); border: 1px solid var(--a-line-2); border-radius: var(--a-r4); background: linear-gradient(var(--a-glass-strong), var(--a-glass-strong)), var(--a-bg); box-shadow: var(--a-sh-3) }
html.shell-a.pp-push body:is(.locked-mode, :not(.locked-mode)) #main-table-container:not(#_):not(#_) { overflow-x: auto !important; overflow-y: hidden !important }
html.shell-a.pp-push body:is(.locked-mode, :not(.locked-mode)):not(#_):not(#_) { padding-right: calc(var(--a-insp-w, 400px) * var(--pp-p, 1) + 14px) !important }
.person-panel .pp { position: absolute; top: 0; bottom: 0; right: 0; width: var(--a-insp-w, 400px); box-sizing: border-box; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 12px; padding: 18px }
.person-panel.pp-floating .pp { inset: 0; width: auto }
html body .person-panel .pp-h:not(#_):not(#_) { display: flex !important; gap: 12px !important; align-items: center !important }
html body .person-panel .pp-h .grow:not(#_):not(#_) { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important }
html body .person-panel .pp-name:not(#_):not(#_) { font-family: inherit !important; font-size: var(--a-fs-lg) !important; font-weight: 700 !important; line-height: 1.45 !important; color: var(--a-text) !important; background: transparent !important; border: 0 !important; border-radius: 6px !important; padding: calc((var(--a-h-sm) - 1.45em) / 2) 4px !important; margin: calc((var(--a-h-sm) - 1.45em) / -2) -4px !important; width: calc(100% + 8px) !important; box-sizing: border-box !important; height: auto !important; min-height: 0 !important; box-shadow: none !important; outline: 0 !important; text-overflow: ellipsis !important }
html body .person-panel .pp-name:hover:not(:focus):not(#_):not(#_) { background: var(--a-hover-veil) !important }
html body .person-panel .pp-name:focus:not(#_):not(#_) { background: var(--a-surface-2) !important; box-shadow: 0 0 0 2px var(--a-focus) !important }
html body .person-panel .pp-h small:not(#_):not(#_) { color: var(--a-muted) !important; font-size: var(--a-fs-small) !important; line-height: 1.45 !important }
html body .person-panel .av:not(#_):not(#_) { width: 44px !important; height: 44px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; background: var(--z, #64748b) !important; color: var(--zt, #fff) !important; font-weight: 700 !important; font-size: 15px !important; flex: 0 0 auto !important; letter-spacing: .02em !important }
html body .person-panel .pp-now:not(#_):not(#_) { display: flex !important; align-items: center !important; gap: 8px !important; font-size: var(--a-fs-small) !important; color: var(--a-text-2) !important; padding: 10px 12px !important; border-radius: var(--a-r2) !important; background: var(--a-surface-2) !important }
html body .person-panel .pp-now .grow:not(#_):not(#_) { flex: 1 !important; min-width: 0 !important }
html body .person-panel .pp-now .dot:not(#_):not(#_) { width: 9px !important; height: 9px !important; border-radius: 50% !important; background: var(--z, #64748b) !important; flex: none !important }
html body .person-panel .pp-now b:not(#_):not(#_) { color: var(--a-text) !important; font-weight: 600 !important }
html body .person-panel .pp-sec:not(#_):not(#_), html body .covcard .pp-sec:not(#_):not(#_) { font-size: var(--a-fs-cap) !important; font-weight: 600 !important; color: var(--a-muted) !important; margin-top: 4px !important }
html body .person-panel .pp-sec .mu:not(#_):not(#_), html body .covcard .pp-sec .mu:not(#_):not(#_) { font-weight: 600 !important; color: var(--a-muted) !important }
html body .person-panel .pp-breaks:not(#_):not(#_) { display: flex !important; flex-direction: column !important }
html body .person-panel .pp-br:not(#_):not(#_) { display: grid !important; grid-template-columns: 62px minmax(0, 1fr) 100px 72px !important; align-items: center !important; column-gap: 8px !important; min-height: 52px !important; padding: 4px 0 !important; border: 0 !important }
html body .person-panel .pp-bl:not(#_):not(#_) { width: auto !important; color: var(--a-text-2) !important; font-size: var(--a-fs-small) !important }
html body .person-panel .pp-bt:not(#_):not(#_) { min-width: 0 !important; font-variant-numeric: tabular-nums !important; line-height: 1.3 !important }
html body .person-panel .pp-br .stepper:not(#_):not(#_), html body .person-panel .pp-br [data-pp="set"]:not(#_):not(#_) { grid-column: 3 !important; justify-self: end !important }
html body .person-panel .pp-br [data-pp="act"]:not(#_):not(#_) { grid-column: 4 !important; justify-self: end !important; min-width: 72px !important }
html body .person-panel .pp-br .pp-warn:not(#_):not(#_) { grid-column: 1 / -1 !important }
html body .person-panel .pp-late .pp-bt:not(#_):not(#_) { color: var(--a-bad-text) !important }
html body .person-panel .pp-on .pp-bt:not(#_):not(#_) { color: var(--a-accent-text) !important }
html body .person-panel .pp-done .pp-bt:not(#_):not(#_) { color: var(--a-good) !important }
html body .person-panel .pp-warn:not(#_):not(#_) { flex: 0 0 100% !important; color: var(--a-warn-text) !important; font-size: var(--a-fs-small) !important; padding: 0 0 8px !important }
html body .person-panel .stepper:not(#_):not(#_) { display: inline-flex !important; gap: 4px !important }
html body .person-panel .pp-zones:not(#_):not(#_) { display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 6px !important }
html body .person-panel .zbtn:not(#_):not(#_) { height: var(--a-h-md) !important; border: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 1px 6px !important; border-radius: var(--a-r2) !important; background: var(--z) !important; color: var(--zt) !important; font-family: inherit !important; font-size: var(--a-fs-cap) !important; font-weight: 600 !important; letter-spacing: .04em !important; text-transform: uppercase !important; box-shadow: inset 3px 0 0 var(--ze, transparent) !important; cursor: pointer !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important }
html body .person-panel .zbtn.cur:not(#_):not(#_) { box-shadow: inset 3px 0 0 var(--ze, transparent), 0 0 0 2px var(--a-surface), 0 0 0 4px var(--a-text) !important }
html body .person-panel .zbtn.grey:not(#_):not(#_) { background: var(--a-surface-3) !important; color: var(--a-text-2) !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important }
html body .person-panel .zbtn.grey.cur:not(#_):not(#_) { box-shadow: 0 0 0 2px var(--a-surface), 0 0 0 4px var(--a-text) !important }
html body .person-panel .pp-strip:not(#_):not(#_) { position: relative !important; height: 20px !important; border-radius: 6px !important; overflow: hidden !important; background: var(--a-surface-3) !important }
html body .person-panel .pp-strip i:not(#_):not(#_) { position: absolute !important; top: 0 !important; bottom: 0 !important; background: var(--z) !important }
html body .person-panel .pp-strip i.grey:not(#_):not(#_) { opacity: .6 !important }
html body .person-panel .pp-strip .pl:not(#_):not(#_) { background: repeating-linear-gradient(135deg, var(--a-surface) 0 3px, var(--a-surface-3) 3px 6px) !important }
html body .person-panel .pp-strip .pn-now:not(#_):not(#_) { position: absolute !important; top: 0 !important; bottom: 0 !important; width: 2px !important; background: var(--a-now-line) !important }
html body .person-panel .pp-zones:not(#_):not(#_) { display: flex !important; flex-wrap: wrap !important; gap: 6px !important }
html body .person-panel .zbtn:not(#_):not(#_) { flex: 1 1 auto !important; min-width: 64px !important; padding: 0 12px !important; overflow: visible !important; text-overflow: clip !important }
html body .person-panel .pp-strip:not(#_):not(#_) { height: 22px !important }
html body .person-panel .pp-legend:not(#_):not(#_) { list-style: none !important; display: flex !important; flex-direction: column !important; gap: 4px !important; margin: 10px 0 0 !important; padding: 0 !important }
html body .person-panel .pp-legend li:not(#_):not(#_) { display: flex !important; align-items: center !important; gap: 10px !important; min-height: 26px !important; font-size: var(--a-fs-small) !important }
html body .person-panel .pp-legend .sw:not(#_):not(#_) { flex: none !important; width: 12px !important; height: 12px !important; border-radius: 4px !important; background: var(--z, var(--a-surface-3)) !important; box-shadow: inset 3px 0 0 var(--ze, transparent) !important }
html body .person-panel .pp-legend .sw.pl:not(#_):not(#_) { background: repeating-linear-gradient(135deg, var(--a-surface) 0 2px, var(--a-surface-3) 2px 4px) !important }
html body .person-panel .pp-legend .nm:not(#_):not(#_) { flex: 1 1 auto !important; min-width: 0 !important; color: var(--a-text) !important; font-size: var(--a-fs-cap) !important; font-weight: 600 !important; letter-spacing: .04em !important; text-transform: uppercase !important }
html body .person-panel .pp-legend .nm.plain:not(#_):not(#_) { font-size: var(--a-fs-small) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--a-text-2) !important; font-weight: 500 !important }
html body .person-panel .pp-legend .tm:not(#_):not(#_) { flex: none !important; color: var(--a-muted) !important; font-size: var(--a-fs-small) !important; font-variant-numeric: tabular-nums !important; white-space: nowrap !important }
html body .person-panel .pp-foot:not(#_):not(#_) { display: flex !important; align-items: center !important; gap: 8px !important; margin-top: 4px !important }
html body .person-panel .pp-foot .sp:not(#_):not(#_) { flex: 1 !important }
html body .person-panel .pp-saved:not(#_):not(#_) { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-size: var(--a-fs-cap) !important; color: var(--a-muted) !important; opacity: 0 !important }
html body .person-panel .pp-saved .ic:not(#_):not(#_) { width: 14px !important; height: 14px !important; color: var(--a-good) !important }
html body .person-panel .pp-saved.ping:not(#_):not(#_) { animation: pp-saved 1.6s var(--e-std) !important }
@keyframes pp-saved { 0% { opacity: 0; transform: translateY(3px) } 15% { opacity: 1; transform: none } 75% { opacity: 1 } 100% { opacity: 0 } }
html.motion-off .person-panel .pp-saved.ping { animation: none; opacity: 1 }
html body .person-panel .btn:not(#_):not(#_), html body .covcard .btn:not(#_):not(#_) { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; white-space: nowrap !important; height: var(--a-h-md) !important; padding: 0 var(--a-pad-x) !important; text-decoration: none !important; user-select: none !important; -webkit-user-select: none !important; border-radius: 999px !important; border: 1px solid var(--a-line-2) !important; background: var(--a-surface-3) !important; color: var(--a-text) !important; font-family: inherit !important; font-size: var(--a-fs-btn) !important; font-weight: 600 !important; line-height: 1.45 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important; cursor: pointer !important; transition: background var(--m-micro, 120ms) var(--e-std), transform var(--m-micro, 120ms) var(--e-std), box-shadow var(--m-micro, 120ms) var(--e-std) !important }
html body .person-panel .btn-sm:not(#_):not(#_), html body .covcard .btn-sm:not(#_):not(#_) { height: var(--a-h-sm) !important; padding: 0 calc(var(--a-pad-x) * .75) !important }
html body .person-panel .btn-icon:not(#_):not(#_), html body .covcard .btn-icon:not(#_):not(#_) { width: var(--a-h-md) !important; padding: 0 !important }
html body .person-panel .btn-sm.btn-icon:not(#_):not(#_), html body .covcard .btn-sm.btn-icon:not(#_):not(#_) { width: var(--a-h-sm) !important }
html body .person-panel .btn:hover:not(:disabled):not(#_):not(#_), html body .covcard .btn:hover:not(:disabled):not(#_):not(#_) { background: var(--a-surface-hover) !important }
html body .person-panel .btn:active:not(:disabled):not(#_):not(#_), html body .covcard .btn:active:not(:disabled):not(#_):not(#_) { background: var(--a-surface-press) !important; transform: scale(.97) !important; box-shadow: none !important }
html body .person-panel .btn:focus-visible:not(#_):not(#_), html body .covcard .btn:focus-visible:not(#_):not(#_) { outline: 0 !important; box-shadow: 0 0 0 3px var(--a-focus) !important }
html body .person-panel .btn:disabled:not(#_):not(#_), html body .covcard .btn:disabled:not(#_):not(#_) { opacity: .42 !important; transform: none !important; cursor: not-allowed !important }
html body .person-panel .btn-primary:not(#_):not(#_), html body .covcard .btn-primary:not(#_):not(#_) { background: var(--a-accent-fill) !important; border-color: transparent !important; color: var(--a-accent-ink) !important }
html body .person-panel .btn-primary:hover:not(:disabled):not(#_):not(#_), html body .covcard .btn-primary:hover:not(:disabled):not(#_):not(#_) { background: var(--a-accent-hover) !important }
html body .person-panel .btn-primary:active:not(:disabled):not(#_):not(#_), html body .covcard .btn-primary:active:not(:disabled):not(#_):not(#_) { background: var(--a-accent-press) !important }
html body .person-panel .btn-danger:not(#_):not(#_), html body .covcard .btn-danger:not(#_):not(#_) { background: var(--a-bad-bg) !important; border-color: var(--a-bad-line) !important; color: var(--a-bad-text) !important }
html body .person-panel .btn-danger:hover:not(:disabled):not(#_):not(#_), html body .covcard .btn-danger:hover:not(:disabled):not(#_):not(#_) { background: var(--a-bad-bg2) !important }
html body .person-panel .btn-ghost:not(#_):not(#_), html body .covcard .btn-ghost:not(#_):not(#_) { background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: var(--a-accent-text) !important }
html body .person-panel .btn-ghost:hover:not(:disabled):not(#_):not(#_), html body .covcard .btn-ghost:hover:not(:disabled):not(#_):not(#_) { background: var(--a-hover-veil) !important }
html body .person-panel .btn-danger.btn-ghost:not(#_):not(#_), html body .covcard .btn-danger.btn-ghost:not(#_):not(#_) { color: var(--a-bad-text) !important; background: transparent !important; border-color: transparent !important }
html body .person-panel .btn-danger.btn-ghost:hover:not(:disabled):not(#_):not(#_), html body .covcard .btn-danger.btn-ghost:hover:not(:disabled):not(#_):not(#_) { background: var(--a-bad-bg) !important }
html body .person-panel .btn-close:not(#_):not(#_), html body .covcard .btn-close:not(#_):not(#_) { background: var(--a-surface-3) !important; color: var(--a-text-2) !important }
html body .person-panel .btn .ic:not(#_):not(#_), html body .person-panel .btn svg:not(#_):not(#_), html body .covcard .btn .ic:not(#_):not(#_), html body .covcard .btn svg:not(#_):not(#_) { width: 1.15em !important; height: 1.15em !important; flex: none !important }
html body .person-panel .mu:not(#_):not(#_), html body .covcard .mu:not(#_):not(#_) { color: var(--a-muted) !important }
@media print {
  .person-panel { display: none !important }
}
.covcard { position: fixed; z-index: 960; box-sizing: border-box; width: 440px; max-width: calc(100vw - 20px); max-height: 640px; overflow: auto; background: linear-gradient(var(--a-glass-strong), var(--a-glass-strong)), var(--a-bg); border: 1px solid var(--a-line-2); border-radius: var(--a-r4); box-shadow: var(--a-sh-3); color: var(--a-text); font-family: var(--font); font-size: var(--a-fs-body); line-height: 1.45; letter-spacing: normal }
.covcard[hidden] { display: none !important }
.covcard .cov-in { padding: 16px; display: flex; flex-direction: column; gap: 10px }
.covcard .cov-h { display: flex; align-items: center; gap: 10px }
.covcard .cov-h b { flex: 1; font-size: var(--a-fs-lg); font-weight: 700 }
.covcard .grow { flex: 1; min-width: 0 }
.covcard .cov-r { display: flex; align-items: center; gap: 10px; font-size: var(--a-fs-body); border-radius: 8px }
.covcard .cov-r[data-act="gaps"] { cursor: pointer }
.covcard .cov-r[data-act="gaps"]:hover { background: var(--a-hover-veil) }
.covcard .cov-r .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--a-warn); flex: none }
.covcard .cov-f { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--a-line) }
.covcard .now-sec { display: flex; flex-direction: column; gap: 2px }
.covcard .now-sec + .now-sec { border-top: 1px solid var(--a-line); padding-top: 10px }
.covcard .okc { display: inline-flex; color: var(--a-good) }
.covcard .okc .ic { width: 16px; height: 16px }
.covcard .bk-r { display: flex; align-items: center; gap: 10px; min-height: var(--a-h-md); border-bottom: 1px solid var(--a-line); font-size: var(--a-fs-small) }
.covcard .bk-r:last-child { border-bottom: 0 }
.covcard .bk-r .grow { color: var(--a-text-2) }
.covcard .bk-n { border: 0; background: transparent; color: var(--a-text); font: inherit; font-weight: 650; padding: 0; min-height: var(--a-h-sm); cursor: pointer; min-width: 64px; text-align: left }
.covcard .bk-t { font-variant-numeric: tabular-nums; font-weight: 650 }
.covcard .bk-late .grow { color: var(--a-bad-text) }
.covcard .bk-on .bk-t { color: var(--a-accent-text) }
.covcard .bk-none { min-height: 36px; font-size: var(--a-fs-cap) }
.morph-src { opacity: 0 !important; transition: opacity 60ms var(--e-std) }
@media print {
  .covcard { display: none !important }
}
.nr { display: inline-flex; align-items: baseline; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums }
.nr .dg { display: inline-block; height: 1.2em; overflow: hidden; vertical-align: top }
.nr .strip { display: flex; flex-direction: column }
.nr .strip i { font-style: normal; display: block; height: 1.2em; line-height: 1.2em }
.nr .ch { display: inline-block }
html.shell-a[data-theme="light"] { --a-bg: #eef4f5; --a-surface: #ffffff; --a-surface-2: #f4f8f9; --a-surface-3: #e2ebed; --a-surface-hover: #d5e1e4; --a-surface-press: #c8d6da;
  --a-line: rgba(12,34,40,.15); --a-line-2: rgba(12,34,40,.26);
  --a-muted: #4a5c62; --a-text: #0f1a1d; --a-text-2: #34464c;
  --a-accent-fill: #0b6f78; --a-accent-hover: #095f67; --a-accent-press: #074e55; --a-accent-ink: #ffffff; --a-accent-text: #0a626a; --a-accent-line: #0b6f78;
  --a-bad: #d1242f; --a-bad-bg: rgba(209,36,47,.08); --a-bad-bg2: rgba(209,36,47,.14); --a-bad-line: rgba(209,36,47,.4); --a-bad-text: #b31d27;
  --a-good: #187432; --a-good-bg: rgba(26,127,55,.10); --a-good-line: rgba(26,127,55,.4);
  --a-warn: #b25e00; --a-warn-bg: rgba(255,159,10,.16); --a-warn-text: #8a4b00;
  --a-info-bg: rgba(11,111,120,.08); --a-info-text: #08525a;
  --a-glass: rgba(255,255,255,.86); --a-glass-strong: rgba(255,255,255,.96);
  --a-seg-track: rgba(12,34,40,.07); --a-seg-thumb: #ffffff; --a-seg-thumb-ink: #0f1a1d;
  --a-focus: rgba(11,111,120,.4); --a-hover-veil: rgba(12,34,40,.05); --a-now-line: #0b6f78;
  --a-bar-glass: rgba(240,247,248,.58); --a-bar-fog: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.34) 75%); --a-bar-rim: rgba(255,255,255,.75); --a-bar-shine: rgba(255,255,255,.9); --a-bar-under: rgba(12,34,40,.05);
  --a-sh-1: 0 1px 3px rgba(12,34,40,.14); --a-sh-2: 0 8px 24px rgba(12,34,40,.16); --a-sh-3: 0 24px 64px rgba(12,34,40,.24);
  --a-grid-hour: rgba(12,34,40,.12); --a-grid-half: rgba(12,34,40,.09); --a-edge-shadow: rgba(12,34,40,.08); --a-lunch-base: #18292e; --a-past-veil: rgba(238,244,245,.22);
  --a-now-bubble: #0f1a1d; --a-now-bubble-ink: #ffffff; --a-warn-fill: #ffb020; --a-warn-ink: #1a1205;
  --a-field: #ffffff; --a-scrim: rgba(6,8,12,.32); --a-bad-fill: #d1242f; --a-good-fill: #30a14e; --a-inset-2: rgba(12,34,40,.02); }
html[data-look="a"][data-theme="light"] { --bg: #eef4f5; --surface: #ffffff; --surface-2: #f4f8f9; --surface-3: #e2ebed; --surface-4: #d5e1e4;
  --card-bg: #ffffff; --header-bg: #ffffff; --input-bg: rgba(12,34,40,.05); --hover-bg: #e2ebed;
  --row-a: #ffffff; --row-b: #f4f8f9; --row-even: #f1f6f7; --row-hover: #e2ebed; --break-bg: #e8f0f2;
  --glass: rgba(255,255,255,.97); --glass-fill: rgba(12,34,40,.05); --card-border: rgba(12,34,40,.10); --edge: rgba(12,34,40,.18);
  --widget-bg: linear-gradient(180deg, rgba(12,34,40,.04), rgba(12,34,40,.02));
  --text: #0f1a1d; --text-2: #34464c; --text-muted: #52656b;
  --accent: #0b6f78; --accent-fill: #0b6f78; --accent-press: #074e55; --accent-text: #0a626a;
  --green: #187432; --green-fill: #30a14e; --green-text: #187432; --orange: #b25e00; --orange-text: #8a4b00; --red: #d1242f; --red-fill: #d1242f; --red-text: #b31d27;
  --btn-default: rgba(12,34,40,.06); --btn-default-hover: rgba(12,34,40,.11);
  --grid-quarter: rgba(12,34,40,.13); --grid-half: rgba(12,34,40,.22); --grid-hour: rgba(12,34,40,.32);
  --slot-empty: #eef4f5; --slot-empty-hover: #e2ebed; --shadow-color: rgba(12,34,40,.15);
  --sh-1: 0 1px 2px rgba(12,34,40,.08); --sh-2: 0 10px 30px rgba(12,34,40,.14); --sh-3: 0 24px 64px rgba(12,34,40,.22);
  --k-fill-1: rgba(12,34,40,.04); --k-fill-2: rgba(12,34,40,.07); --k-fill-3: rgba(12,34,40,.11);
  --k-good-bg: rgba(26,127,55,.10); --k-good-line: rgba(26,127,55,.4); --k-warn-bg: rgba(255,159,10,.16); --k-warn-line: rgba(178,94,0,.4);
  --k-bad-bg: rgba(209,36,47,.08); --k-bad-line: rgba(209,36,47,.4); --k-info-bg: rgba(11,111,120,.08); --k-info-line: rgba(11,111,120,.34);
  --k-sh-1: 0 1px 2px rgba(12,34,40,.08); --k-sh-2: 0 14px 40px rgba(12,34,40,.16); --k-sh-3: 0 28px 70px rgba(12,34,40,.24);
  color-scheme: light; }
html.shell-a[data-theme="light"] body:not(#_):not(#_):not(#_) { background: var(--a-bg) !important; color: var(--a-text) !important }
html.shell-a[data-theme="light"] .stage1b-symbol img { filter: invert(1) }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .island[hidden]:not(#_):not(#_) { display: none !important }
html body .person-panel .pp-dd-h:not(#_):not(#_) { width: 100% !important; justify-content: space-between !important; padding: 0 14px !important; flex: none !important }
html body .person-panel .pp-dd-h svg:not(#_):not(#_) { width: 16px !important; height: 16px !important; flex: none !important; transition: transform var(--m-state) var(--e-std) !important }
html body .person-panel .pp-dd.open .pp-dd-h svg:not(#_):not(#_) { transform: rotate(180deg) !important }
html body .person-panel .pp-dd-b:not(#_):not(#_) { margin-top: 8px !important }
html body .person-panel .pp-dd-b[hidden]:not(#_):not(#_) { display: none !important }
html.shell-a.perf-pill body:is(.locked-mode, :not(.locked-mode)) .isl-tray:not(#_):not(#_) { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .island.isl-lead:not(#_):not(#_) { flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 7px !important; width: auto !important; padding: 0 14px !important; cursor: default !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .isl-lead > span:not(#_):not(#_) { margin: 0 !important; padding: 0 !important; color: var(--a-muted) !important; font-size: var(--a-fs-cap) !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .isl-lead > strong:not(#_):not(#_) { margin: 0 !important; padding: 0 !important; max-width: 180px !important; overflow: hidden !important; color: var(--a-text) !important; font-size: var(--a-fs-body) !important; font-weight: 650 !important; letter-spacing: 0 !important; text-transform: none !important; white-space: nowrap !important; text-overflow: ellipsis !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-bar .island.isl-perf:not(#_):not(#_) { gap: 9px !important; padding: 0 14px 0 12px !important; cursor: pointer !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-perf .ps-chart:not(#_):not(#_) { display: inline-flex !important; align-items: flex-end !important; height: 18px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-perf .ps-chart svg:not(#_):not(#_) { display: block !important; overflow: visible !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-perf .ps-chart rect.on:not(#_):not(#_) { fill: var(--a-accent-line) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-perf .ps-chart rect.now:not(#_):not(#_) { fill: var(--a-good) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-perf .ps-chart rect.off:not(#_):not(#_) { fill: var(--a-line-2) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-perf .ps-v:not(#_):not(#_) { font-weight: 650 !important; font-variant-numeric: tabular-nums !important; color: var(--a-text) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-perf .ps-g:not(#_):not(#_) { font-style: normal !important; font-size: var(--a-fs-cap) !important; font-weight: 600 !important; color: var(--a-muted) !important; font-variant-numeric: tabular-nums !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-perf .ps-g[hidden]:not(#_):not(#_) { display: none !important }
html.shell-a.zone-paint body:is(.locked-mode, :not(.locked-mode)) #main-table-container:not(#_):not(#_) { margin-top: var(--zp-push, 0px) !important }
html.shell-a { --a-rh: 36px; --a-rh-head: 34px; --a-zb-inset: 4px; --a-bp-h: 26px; --a-bp-w: 40px; --a-bp-wl: 56px; --a-zc-h: 24px; --a-zr: 9px;
  --a-namew: 112px; --a-brkw: 152px; --a-bpc1: 44px; --a-bpc2: 50px; --a-bpc3: 44px; --a-fs-name: 13px; --a-fs-bp: 11px;
  --a-grid-hour: rgba(255,255,255,.10); --a-grid-half: rgba(255,255,255,.07); --a-edge-shadow: rgba(0,0,0,.25); --a-lunch-base: #081519; --a-past-veil: rgba(11,18,21,.30);
  --a-now-bubble: #eef6f8; --a-now-bubble-ink: #0b1215; --a-warn-fill: #ffb020; --a-warn-ink: #1a1205; }
html.shell-a.device-tablet body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks .breaks-cell:not(#_):not(#_) { padding: 1px 0 !important }
html.shell-a.device-tablet body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks .break-slot:not(#_):not(#_) { height: 44px !important; font-size: 12px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table:not(#_):not(#_) { --s22-name-w: var(--a-namew) !important; --s22-shift-w: 0px !important; --s22-breaks-w: var(--a-brkw) !important; --s22-del-w: 0px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table .col-del:not(#_):not(#_) { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table .col-shift:not(#_):not(#_) { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table thead tr:first-child th.col-name:not(#_):not(#_) { box-sizing: border-box !important; height: var(--a-rh-head) !important; padding: 0 12px !important; background: var(--a-bg) !important; border: 0 !important; box-shadow: none !important; color: var(--a-muted) !important; font-size: 0 !important; font-weight: 400 !important; text-align: left !important; vertical-align: middle !important; letter-spacing: 0 !important; text-transform: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table thead tr:first-child th.col-name:not(#_):not(#_)::after { content: 'Staff' !important; font-size: var(--a-fs-cap) !important; font-weight: 400 !important; line-height: 1.45 !important; color: var(--a-muted) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table thead tr:first-child th.col-breaks:not(#_):not(#_) { box-sizing: border-box !important; height: var(--a-rh-head) !important; padding: 0 !important; background: var(--a-surface) !important; border: 0 !important; box-shadow: 6px 0 12px var(--a-edge-shadow) !important; color: var(--a-muted) !important; font-size: var(--a-fs-cap) !important; font-weight: 400 !important; text-align: center !important; letter-spacing: 0 !important; text-transform: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table thead tr:first-child th.col-breaks .breaks-head:not(#_):not(#_) { display: block !important; padding: 0 !important; margin: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table thead tr:first-child th.col-breaks .breaks-head span:not(#_):not(#_) { font-size: var(--a-fs-cap) !important; font-weight: 400 !important; color: var(--a-muted) !important; letter-spacing: 0 !important; text-transform: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table thead tr:first-child th.col-breaks .breaks-head small:not(#_):not(#_) { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table thead th.hour-header:not(#_):not(#_) { overflow: visible !important; box-sizing: border-box !important; height: var(--a-rh-head) !important; padding: 0 !important; background: var(--a-bg) !important; border: 0 !important; box-shadow: none !important; color: var(--a-muted) !important; font-size: 0 !important; font-weight: 400 !important; letter-spacing: 0 !important; text-transform: none !important; text-align: left !important; line-height: 1 !important; opacity: 1 !important; position: sticky !important; z-index: 110 !important }
#hour-axis { display: none }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #hour-axis:not(#_):not(#_) { display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; z-index: 112 !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; pointer-events: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #hour-axis .ha-l:not(#_):not(#_) { position: absolute !important; top: calc(var(--a-rh-head) / 2 - 3px) !important; left: var(--x, 0px) !important; transform: translateY(-50%) !important; white-space: nowrap !important; font-size: var(--a-fs-body) !important; font-weight: 650 !important; line-height: 1.45 !important; letter-spacing: 0 !important; color: var(--a-text) !important; transition: opacity var(--m-micro, 120ms) var(--e-std) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #hour-axis .ha-l.ha-off:not(#_):not(#_) { opacity: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #hour-axis .ha-now:not(#_):not(#_) { position: absolute !important; top: calc(var(--a-rh-head) / 2 - 3px) !important; left: var(--x, 0px) !important; transform: translate(-50%, -50%) !important; margin: 0 !important; padding: 0 !important; background: none !important; box-shadow: none !important; border-radius: 0 !important; color: var(--a-accent-text) !important; font-size: var(--a-fs-small) !important; font-weight: 700 !important; line-height: 1.45 !important; letter-spacing: 0 !important; white-space: nowrap !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #hour-axis .ha-now:not(#_):not(#_)::after { content: '' !important; position: absolute !important; left: 50% !important; top: 100% !important; margin: 2px 0 0 -5px !important; border: 5px solid transparent !important; border-top-color: var(--a-accent-line) !important; border-bottom: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #hour-axis .ha-now.ha-off:not(#_):not(#_) { opacity: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #hour-axis .ha-now[hidden]:not(#_):not(#_) { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table thead th.hour-header.now-hour-simple:not(#_):not(#_) { background: var(--a-bg) !important; box-shadow: none !important; animation: none !important; overflow: visible !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table thead th.hour-header.now-hour-simple:not(#_):not(#_)::before { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table thead th.hour-header.now-hour-simple .now-hour-main:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table thead th.hour-header.now-hour-simple .now-hour-time:not(#_):not(#_) { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-name:not(#_):not(#_) { box-sizing: border-box !important; padding: 0 12px !important; background: var(--a-surface) !important; border: 0 !important; border-right: 1px solid var(--a-line) !important; box-shadow: none !important; color: var(--a-text) !important; vertical-align: middle !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody tr.pp-sel td.col-name:not(#_):not(#_) { box-shadow: inset 3px 0 0 var(--a-accent-line) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-name .staff-cell:not(#_):not(#_) { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; min-width: 0 !important; overflow: hidden !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-name .staff-cell > *:not(#_):not(#_) { align-self: stretch !important; justify-self: stretch !important; grid-row: auto !important; grid-column: auto !important; text-align: left !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-name .staff-name-text:not(#_):not(#_) { display: block !important; margin: 0 !important; padding: 0 !important; font-size: var(--a-fs-name) !important; font-weight: 600 !important; line-height: 1.45 !important; letter-spacing: 0 !important; color: var(--a-text) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-name .staff-current-zone:not(#_):not(#_) { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-name .shift-inline:not(#_):not(#_) { display: block !important; box-sizing: border-box !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; outline: 0 !important; color: var(--a-muted) !important; font-family: inherit !important; font-size: var(--a-fs-micro) !important; font-weight: 400 !important; line-height: 1.45 !important; letter-spacing: 0 !important; text-align: left !important; text-overflow: ellipsis !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks:not(#_):not(#_) { box-sizing: border-box !important; padding: 0 !important; background: var(--a-surface) !important; border: 0 !important; border-right: 1px solid var(--a-line) !important; box-shadow: 6px 0 12px var(--a-edge-shadow) !important; vertical-align: middle !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks .breaks-cell:not(#_):not(#_) { display: grid !important; grid-template-columns: var(--a-bpc1) var(--a-bpc2) var(--a-bpc3) !important; gap: 4px !important; justify-content: center !important; align-items: center !important; width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks .break-slot:not(#_):not(#_) { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 3px !important; box-sizing: border-box !important; height: var(--a-bp-h) !important; min-height: 0 !important; min-width: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 4px !important; border-radius: 999px !important; border: 1px solid var(--a-line-2) !important; background: var(--a-surface-3) !important; box-shadow: none !important; color: var(--a-text) !important; font-family: inherit !important; font-size: var(--a-fs-bp) !important; font-weight: 600 !important; line-height: 1.45 !important; letter-spacing: 0 !important; white-space: nowrap !important; transition: background var(--m-micro, 120ms) var(--e-std), box-shadow var(--m-micro, 120ms) var(--e-std) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks .break-slot.short-shift-only:not(#_):not(#_) { grid-column: 1 / -1 !important; width: auto !important; min-width: var(--a-bp-wl) !important; justify-self: center !important; padding: 0 10px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks .break-slot span:not(#_):not(#_) { font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; color: inherit !important; letter-spacing: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks .break-slot:hover:not(#_):not(#_) { background: var(--a-surface-hover) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks .break-slot.done:not(#_):not(#_) { background: transparent !important; color: var(--a-good) !important; border-color: var(--a-good-line) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks .break-slot.done span:not(#_):not(#_) { font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks .break-slot.active:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks .break-slot.running:not(#_):not(#_) { background: var(--a-warn-bg) !important; color: var(--a-warn-text) !important; border-color: color-mix(in srgb, var(--a-warn) 40%, transparent) !important; box-shadow: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks .break-slot:has(.bs-sub):not(#_):not(#_) { flex-direction: column !important; gap: 0 !important; line-height: 1 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks .break-slot .bs-main:not(#_):not(#_) { line-height: 1 !important; overflow: visible !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks .break-slot.done .bs-main:not(#_):not(#_) { font-size: 10px !important; line-height: 1 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks .break-slot .bs-sub:not(#_):not(#_) { display: block !important; font-size: 8.5px !important; font-weight: 600 !important; line-height: 1 !important; margin-top: 1px !important; opacity: .85 !important; letter-spacing: 0 !important; white-space: nowrap !important }
html.shell-a.device-tablet body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks .break-slot .bs-sub:not(#_):not(#_) { font-size: 10px !important; margin-top: 2px !important }
html.shell-a.device-tablet body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks .break-slot.done .bs-main:not(#_):not(#_) { font-size: 12px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks .break-slot .bs-ap:not(#_):not(#_) { font-style: normal !important; font-size: .8em !important; font-weight: inherit !important; margin-left: .5px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks .break-slot.wide:not(#_):not(#_) { padding: 0 2px !important; letter-spacing: -.2px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks .break-slot.wide span:not(#_):not(#_) { letter-spacing: -.2px !important }
html.shell-a.device-tablet body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks .break-slot.wide:not(#_):not(#_) { font-size: 11px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks .no-break:not(#_):not(#_) { font-size: var(--a-fs-micro) !important; color: var(--a-muted) !important; opacity: .75 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.slot-zone .zone-ribbon:not(.lunch-ribbon):not(#_):not(#_) { box-sizing: border-box !important; margin: var(--a-zb-inset) 1px 0 !important; height: calc(var(--fit-rh, var(--row-h, 44px)) - 2 * var(--a-zb-inset) - 1px) !important; min-height: 0 !important; padding: 0 var(--zr-pr, 8px) 0 var(--zr-pl, 8px) !important; border: 0 !important; border-radius: var(--a-zr) !important; box-shadow: inset 3px 0 0 var(--edge, transparent), 0 1px 2px rgba(0,0,0,.3) !important; text-shadow: none !important; font-size: var(--a-fs-zone) !important; font-weight: 500 !important; letter-spacing: .04em !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; text-align: left !important; overflow: hidden !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table thead tr:nth-child(2):not(#_):not(#_) { height: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table thead tr:nth-child(2) th:not(#_):not(#_) { height: 0 !important; padding: 0 !important; border: 0 !important; font-size: 0 !important; line-height: 0 !important; background: var(--a-bg) !important; overflow: hidden !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table .zone-ribbon:not(.lunch-ribbon) span:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table .zone-ribbon:not(.lunch-ribbon) div > span:not(#_):not(#_) { font-size: var(--a-fs-zone) !important; font-weight: 500 !important; letter-spacing: .04em !important; line-height: 1.45 !important; text-transform: uppercase !important; text-shadow: none !important; text-overflow: ellipsis !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.slot-zone .zone-ribbon.lunch-ribbon:not(#_):not(#_) { box-sizing: border-box !important; margin: var(--a-zb-inset) 0 0 !important; height: calc(var(--fit-rh, var(--row-h, 44px)) - 2 * var(--a-zb-inset) - 1px) !important; min-height: 0 !important; border-radius: 0 !important; box-shadow: inset 0 3px 7px rgba(0,0,0,.45) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table .zone-ribbon.lunch-ribbon:not(#_):not(#_)::before, html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table .zone-ribbon.lunch-ribbon:not(#_):not(#_)::after { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table .zone-ribbon.lunch-ribbon .lunch-badge:not(#_):not(#_) { width: 14px !important; height: 14px !important; background: none !important; border: 0 !important; box-shadow: none !important; opacity: .9 !important; color: #fff !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table .zone-ribbon.lunch-ribbon .lunch-badge svg:not(#_):not(#_) { width: 14px !important; height: 14px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.beside-lunch-r > .zone-ribbon:not(#_):not(#_) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; margin-right: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.beside-lunch-l > .zone-ribbon:not(#_):not(#_) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; margin-left: 0 !important; box-shadow: 0 1px 2px rgba(0,0,0,.3) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #now-line:not(#_):not(#_) { width: 2px !important; background: var(--a-now-line) !important; border-radius: 0 !important; box-shadow: 0 0 10px var(--a-now-line) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #past-shade:not(#_):not(#_) { background: var(--a-past-veil) !important; box-shadow: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks .break-slot:not(#_):not(#_) { max-width: none !important; overflow: hidden !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks .break-slot span:not(#_):not(#_) { max-width: none !important; overflow: hidden !important; text-overflow: clip !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.col-name:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.col-breaks:not(#_):not(#_) { background: var(--a-surface) !important; border: 0 !important; border-top: 1px solid var(--a-line) !important; box-shadow: none !important; color: var(--a-text-2) !important; font-size: var(--a-fs-cap) !important; font-weight: 400 !important; text-align: left !important; letter-spacing: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.col-name:not(#_):not(#_) { padding: 0 12px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.col-breaks:not(#_):not(#_) { padding: 0 12px 0 0 !important; text-align: right !important; color: var(--a-muted) !important; font-size: var(--a-fs-micro) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.col-breaks[style]:not(#_):not(#_) { color: var(--a-muted) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot tr.zcr-head td.col-name:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot tr.zcr-head td.col-breaks:not(#_):not(#_) { padding-top: 0 !important; padding-bottom: 0 !important; font-size: var(--a-fs-cap) !important; color: var(--a-text-2) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot tr.zcr-head .zcr-toggle:not(#_):not(#_) { color: var(--a-text-2) !important; font-size: var(--a-fs-cap) !important; font-weight: 400 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot tr.zcr-head td.zcr-mid:not(#_):not(#_) { color: var(--a-muted) !important; font-size: var(--a-fs-micro) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot tr.zone-cov-row:not(.zcr-head) td.zcr-name span:not(#_):not(#_) { display: inline-block !important; max-width: calc(100% - 20px) !important; padding: 0 !important; background: transparent !important; color: var(--a-text) !important; font-size: var(--a-fs-cap) !important; font-weight: 700 !important; letter-spacing: 0 !important; line-height: 1.45 !important; vertical-align: middle !important; box-shadow: none !important; text-transform: none !important; border-radius: 0 !important; text-shadow: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot tr.zone-cov-row:not(.zcr-head) td.zcr-name:not(#_):not(#_)::before { content: '' !important; display: inline-block !important; width: 10px !important; height: 10px !important; margin-right: 8px !important; border-radius: 3px !important; background: var(--zdot, var(--a-surface-3)) !important; box-shadow: inset 2px 0 0 var(--zedge, transparent) !important; vertical-align: middle !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot tr.zone-cov-row:not(.zcr-head) td.zcr-mid:not(#_):not(#_) { color: var(--a-muted) !important; font-size: var(--a-fs-cap) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot tr.zone-cov-row:not(.zcr-head) td.zcr-mid b:not(#_):not(#_) { color: var(--a-muted) !important; font-weight: 400 !important; font-size: var(--a-fs-cap) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot tr.zone-cov-row:not(.zcr-head) td.zcr-mid small:not(#_):not(#_) { color: var(--a-muted) !important; font-size: var(--a-fs-cap) !important; margin-left: .3em !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot tr.zone-cov-row:not(.zcr-head) td.zcr-mid.low b:not(#_):not(#_) { color: var(--a-warn-text) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot tr.zone-cov-row td.zcr-cell:not(#_):not(#_) { font-size: var(--a-fs-cap) !important; font-weight: 600 !important; color: #fff !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot tr.zone-cov-row td.zcr-cell:not(#_):not(#_)::before { inset: 3px 1px !important; border-radius: 7px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot tr.zone-cov-row td.zcr-cell.short:not(#_):not(#_) { --zc: var(--a-warn-fill) !important; color: var(--a-warn-ink) !important }
html.shell-a[data-theme="light"] body #roster-table tfoot tr.zone-cov-row td.zcr-cell.has:not(.short):not(#_):not(#_) { --zc: color-mix(in srgb, var(--zf, #64748b) 24%, #ffffff) !important; color: color-mix(in srgb, var(--zf, #64748b) 80%, #000000) !important; font-weight: 650 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td[id^="cov-"]:not(#_):not(#_) { color: var(--a-text-2) !important; font-size: var(--a-fs-cap) !important; font-weight: 600 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table thead tr:first-child th.col-breaks:not(#_):not(#_) { vertical-align: middle !important; line-height: 1 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table thead tr:first-child th.col-breaks .breaks-head:not(#_):not(#_) { display: flex !important; align-items: center !important; justify-content: center !important; height: 100% !important; min-height: var(--a-rh-head) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-name:not(#_):not(#_) { box-shadow: inset 0 1px 0 var(--a-line) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody tr.pp-sel td.col-name:not(#_):not(#_) { box-shadow: inset 3px 0 0 var(--a-accent-line), inset 0 1px 0 var(--a-line) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks:not(#_):not(#_) { box-shadow: 6px 0 12px var(--a-edge-shadow), inset 0 1px 0 var(--a-line) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table .lunch-badge:not(#_):not(#_) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-pop:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #sync-status:not(#_):not(#_) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.q-quarter:not(#_):not(#_) { border-right: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--a-text) 7%, transparent) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.q-half:not(#_):not(#_) { border-right: 1px solid color-mix(in srgb, var(--a-text) 11%, transparent) !important; border-bottom: 1px solid color-mix(in srgb, var(--a-text) 7%, transparent) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.q-hour:not(#_):not(#_) { border-right: 1px solid color-mix(in srgb, var(--a-text) 22%, transparent) !important; border-bottom: 1px solid color-mix(in srgb, var(--a-text) 7%, transparent) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-name:not(#_):not(#_) { border-right: 0 !important; box-shadow: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks:not(#_):not(#_) { border-right: 0 !important; box-shadow: 6px 0 12px var(--a-edge-shadow) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody tr:nth-child(even) td.col-name:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody tr:nth-child(even) td.col-breaks:not(#_):not(#_) { background: color-mix(in srgb, var(--a-surface) 96%, var(--a-text)) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.q-half:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.q-hour:not(#_):not(#_) { border: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--a-text-2) !important; font-size: var(--a-fs-cap) !important; font-weight: 500 !important; font-variant-numeric: tabular-nums !important; text-align: center !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.q-hour:not(#_):not(#_) { border-right: 1px solid color-mix(in srgb, var(--a-text) 10%, transparent) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.q-half.past-hour-col:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.q-hour.past-hour-col:not(#_):not(#_) { color: var(--a-muted) !important }
html.shell-a.zone-paint body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.q-quarter:not(#_):not(#_) { border-right: 1px dotted color-mix(in srgb, var(--a-text) 8%, transparent) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table thead tr:first-child th.col-name:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table thead tr:first-child th.col-breaks:not(#_):not(#_) { background: var(--a-surface) !important; vertical-align: middle !important; line-height: 1.45 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table thead tr:first-child th.col-name:not(#_):not(#_)::after { content: 'Staff' !important; display: block !important; font-size: var(--a-fs-small) !important; font-weight: 600 !important; line-height: 1.45 !important; color: var(--a-text-2) !important; text-align: left !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table thead tr:first-child th.col-breaks .breaks-head:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table thead tr:first-child th.col-breaks .breaks-head span:not(#_):not(#_) { font-size: var(--a-fs-small) !important; font-weight: 600 !important; line-height: 1.45 !important; color: var(--a-text-2) !important; text-align: center !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-name:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody tr:nth-child(even) td.col-name:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody tr:nth-child(even) td.col-breaks:not(#_):not(#_) { background: var(--a-bg) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table thead tr:first-child th.col-name:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table thead tr:first-child th.col-breaks:not(#_):not(#_) { background: var(--a-bg) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.col-name:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.col-breaks:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.zcr-name:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.zcr-mid:not(#_):not(#_) { background: var(--a-bg) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.slot-zone .zone-ribbon.lunch-ribbon:not(#_):not(#_) { margin: var(--a-zb-inset) 1px 0 !important; border-radius: var(--a-zr) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important; overflow: hidden !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table .zone-ribbon.lunch-ribbon:not(#_):not(#_)::before { display: block !important; content: '' !important; position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; box-shadow: none !important; border: 0 !important; opacity: 1 !important; transform: none !important; border-radius: inherit !important; background: repeating-linear-gradient(135deg, transparent 0 5px, rgba(255,255,255,.04) 5px 10px) !important; pointer-events: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table .zone-ribbon.lunch-ribbon .lunch-badge:not(#_):not(#_) { position: relative !important; opacity: .85 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.slot-zone .zone-ribbon:not(.lunch-ribbon):not(#_):not(#_) { box-shadow: inset 3px 0 0 var(--edge, transparent), 0 2px 2px -2px rgba(0,0,0,.55) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.beside-lunch-l > .zone-ribbon:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.beside-lunch-r > .zone-ribbon:not(#_):not(#_) { box-shadow: inset 3px 0 0 var(--edge, transparent), 0 2px 2px -2px rgba(0,0,0,.55) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.beside-lunch-l:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.beside-lunch-r:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.lunch-cell:not(#_):not(#_) { background-image: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.slot-zone:not(#_):not(#_) { border-right: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot tr.zcr-head td.zcr-ax:not(#_):not(#_) { background: transparent !important; color: var(--a-text) !important; font-family: inherit !important; font-size: var(--a-fs-body) !important; font-weight: 650 !important; letter-spacing: 0 !important; text-align: left !important; padding: 0 0 0 8px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.col-name:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.col-breaks:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.q-half:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.q-hour:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot tr.zcr-head td.zcr-name:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot tr.zcr-head td.zcr-mid:not(#_):not(#_) { font-family: var(--font) !important; font-size: var(--a-fs-small) !important; font-weight: 600 !important; letter-spacing: 0 !important; font-variant-numeric: tabular-nums !important; line-height: 1.45 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.col-name:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot tr.zcr-head td.zcr-name:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot tr.zcr-head .zcr-toggle:not(#_):not(#_) { color: var(--a-text-2) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.col-breaks:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot tr.zcr-head td.zcr-mid:not(#_):not(#_) { color: var(--a-muted) !important; font-weight: 500 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.zcr-head-fill:not(#_):not(#_) { background: transparent !important; border: 0 !important; box-shadow: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot tr.zcr-head td:not(#_):not(#_) { border-top: 1px solid color-mix(in srgb, var(--a-text) 5%, transparent) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot tr.zcr-head .zcr-toggle:not(#_):not(#_) { font-size: var(--a-fs-small) !important; font-weight: 600 !important; font-family: var(--font) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #hour-axis .ha-l.ha-past:not(#_):not(#_) { color: var(--a-muted) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #hour-axis .ha-t:not(#_):not(#_) { position: absolute !important; top: calc(var(--a-rh-head) - 6px) !important; left: var(--x, 0px) !important; width: 1px !important; height: 6px !important; background: color-mix(in srgb, var(--a-text) 55%, transparent) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #hour-axis .ha-t.q:not(#_):not(#_) { top: calc(var(--a-rh-head) - 3px) !important; height: 3px !important; background: color-mix(in srgb, var(--a-text) 32%, transparent) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td[id^="cov-"]:not(#_):not(#_) { height: 46px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: transparent !important; font-size: 0 !important; overflow: visible !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td[id^="cov-"][data-v]:not(#_):not(#_) { z-index: 21 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td[id^="cov-"][data-v]:not(#_):not(#_)::before { content: attr(data-v) !important; position: absolute !important; z-index: 1 !important; left: 3px !important; width: calc(200% - 6px) !important; top: 6px !important; height: 24px !important; box-sizing: border-box !important; display: grid !important; place-items: center !important; border-radius: 8px !important; background: var(--a-surface-2) !important; color: var(--a-text-2) !important; font-size: var(--a-fs-small) !important; font-weight: 650 !important; font-variant-numeric: tabular-nums !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td[id^="cov-"][data-v]:not(#_):not(#_)::after { content: attr(data-h) !important; position: absolute !important; left: 3px !important; width: calc(200% - 6px) !important; top: 31px !important; text-align: center !important; color: var(--a-muted) !important; font-size: var(--a-fs-micro) !important; font-weight: 500 !important; line-height: 1.2 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td[id^="cov-"][data-lv="lo"]:not(#_):not(#_)::before { background: var(--a-warn-bg) !important; color: var(--a-warn-text) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td[id^="cov-"][data-lv="hi"]:not(#_):not(#_)::before { background: var(--a-info-bg) !important; color: var(--a-info-text) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td[id^="cov-"].past-hour-col:not(#_):not(#_)::before { opacity: .55 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.col-name .ft-pill:not(#_):not(#_) { display: inline-flex !important; align-items: center !important; gap: 6px !important; height: 28px !important; padding: 0 12px !important; border-radius: 999px !important; background: var(--a-surface-2) !important; border: 1px solid var(--a-line) !important; color: var(--a-text-2) !important; font-size: var(--a-fs-small) !important; font-weight: 600 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.col-name .ft-pill b:not(#_):not(#_) { color: var(--a-text) !important; font-weight: 650 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.col-name .ft-pill:not(#_):not(#_) { gap: 4px !important; padding: 0 8px !important; font-size: var(--a-fs-cap) !important; white-space: nowrap !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot tr.zcr-head .zcr-toggle:not(#_):not(#_) { font-size: var(--a-fs-cap) !important; gap: 6px !important; white-space: nowrap !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.col-name:not(#_):not(#_) { padding: 0 8px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.col-name .ft-pill:not(#_):not(#_) { max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.col-breaks .cov-pill:not(#_):not(#_) { display: inline-flex !important; align-items: center !important; gap: 8px !important; height: 28px !important; padding: 0 10px 0 12px !important; border-radius: 999px !important; border: 1px solid var(--a-line) !important; background: var(--a-surface-2) !important; color: var(--a-text-2) !important; font-family: var(--font) !important; font-size: var(--a-fs-cap) !important; font-weight: 600 !important; cursor: pointer !important; transition: background-color var(--m-state) var(--e-std), color var(--m-state) var(--e-std), border-color var(--m-state) var(--e-std) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.col-breaks .cov-pill:hover:not(#_):not(#_) { background: var(--a-surface-3) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.col-breaks .cov-pill svg:not(#_):not(#_) { width: 16px !important; height: 16px !important; fill: currentColor !important; transition: transform var(--m-state) var(--e-std) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.col-breaks .cov-pill.open:not(#_):not(#_) { background: var(--a-info-bg) !important; border-color: color-mix(in srgb, var(--a-accent-line) 40%, transparent) !important; color: var(--a-info-text) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.col-breaks .cov-pill.open svg:not(#_):not(#_) { transform: rotate(90deg) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.q-half:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.q-hour:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td[id^="cov-"]:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.zcr-cell:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td.zcr-ax:not(#_):not(#_) { background: var(--a-bg) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover:not(#_):not(#_) { box-sizing: border-box !important; border: 1px solid var(--a-line-2) !important; border-radius: var(--a-r4) !important; background: linear-gradient(var(--a-glass-strong), var(--a-glass-strong)), var(--a-bg) !important; box-shadow: var(--a-sh-3) !important; backdrop-filter: none !important; overflow: hidden !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover .kpi-card:not(#_):not(#_) { padding: 16px 20px 14px !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover .kpi-header:not(#_):not(#_) { display: flex !important; align-items: flex-start !important; flex-wrap: nowrap !important; gap: 10px 14px !important; margin: 0 0 12px !important; padding: 0 0 0 !important; border: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover .kpi-header h3:not(#_):not(#_) { margin: 0 !important; color: var(--a-text) !important; font-size: var(--a-fs-lg) !important; font-weight: 650 !important; letter-spacing: 0 !important; text-transform: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover .kpi-header > div:first-child:not(#_):not(#_) { display: flex !important; align-items: center !important; gap: 12px !important; flex: 0 0 auto !important; min-height: var(--a-h-md) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover .kpi-summary-ribbon:not(#_):not(#_) { flex: 1 1 auto !important; min-width: 0 !important; justify-content: flex-end !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #stage18b-performance-close:not(#_):not(#_) { flex: none !important; margin-left: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover .kpi-header button:not(#stage18b-performance-close):not(#_):not(#_) { height: 28px !important; padding: 0 12px !important; border-radius: 999px !important; border: 1px solid var(--a-line) !important; background: var(--a-surface-2) !important; color: var(--a-text-2) !important; font-size: var(--a-fs-cap) !important; font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover .kpi-summary-ribbon:not(#_):not(#_) { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover .kpi-summary-ribbon > span:not(#_):not(#_) { display: inline-flex !important; align-items: baseline !important; gap: 5px !important; height: 28px !important; padding: 0 12px !important; border-radius: 999px !important; border: 1px solid var(--a-line) !important; background: var(--a-surface-2) !important; color: var(--a-muted) !important; font-size: var(--a-fs-cap) !important; font-weight: 400 !important; align-items: center !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover .kpi-summary-ribbon > span strong:not(#_):not(#_) { color: var(--a-text) !important; font-size: var(--a-fs-small) !important; font-weight: 650 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #stage18b-performance-close:not(#_):not(#_) { width: var(--a-h-md) !important; height: var(--a-h-md) !important; min-height: 0 !important; padding: 0 !important; border-radius: 999px !important; border: 1px solid var(--a-line-2) !important; background: var(--a-surface-3) !important; color: var(--a-text-2) !important; box-shadow: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover .goal-progress-bar-wrapper:not(#_):not(#_) { height: 6px !important; margin: 0 0 14px !important; border: 0 !important; border-radius: 999px !important; background: var(--a-surface-3) !important; overflow: hidden !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover .goal-progress-bar-fill:not(#_):not(#_) { border-radius: 999px !important; background: linear-gradient(90deg, var(--a-accent-line), var(--a-good)) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover .kpi-table:not(#_):not(#_) { border-collapse: separate !important; border-spacing: 0 !important; font-size: var(--a-fs-small) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover .kpi-table th:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover .kpi-table td:not(#_):not(#_) { border: 0 !important; background: transparent !important; padding: 0 4px !important; height: 40px !important; text-align: center !important; color: var(--a-text-2) !important; font-size: var(--a-fs-small) !important; font-weight: 500 !important; text-transform: none !important; letter-spacing: 0 !important; font-variant-numeric: tabular-nums !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover .kpi-table th:not(#_):not(#_) { height: 34px !important; color: var(--a-text-2) !important; font-size: var(--a-fs-small) !important; font-weight: 650 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover .kpi-table tbody td:not(#_):not(#_) { border-top: 1px solid color-mix(in srgb, var(--a-text) 5%, transparent) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover .kpi-table th:first-child:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover .kpi-table td:first-child:not(#_):not(#_) { text-align: left !important; padding-left: 6px !important; color: var(--a-text) !important; font-weight: 600 !important; background: transparent !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover .kpi-table input:not(#_):not(#_) { box-sizing: border-box !important; width: calc(100% - 4px) !important; height: 30px !important; margin: 0 2px !important; padding: 0 4px !important; border: 0 !important; border-radius: 9px !important; color: var(--a-text) !important; font-size: var(--a-fs-small) !important; font-weight: 650 !important; text-align: center !important; box-shadow: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover .kpi-table input:focus:not(#_):not(#_) { outline: none !important; box-shadow: 0 0 0 2px var(--a-focus) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover .kpi-table th.kpi-total-col:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover .kpi-table td.kpi-total-col:not(#_):not(#_) { background: var(--a-surface-2) !important; border-left: 0 !important; color: var(--a-text) !important; font-weight: 650 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover .kpi-table th.kpi-total-col:not(#_):not(#_) { border-radius: 12px 12px 0 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.stage1b-popover .kpi-table tr:last-child td.kpi-total-col:not(#_):not(#_) { border-radius: 0 0 12px 12px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.perf-new .kpi-summary-ribbon:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.perf-new .goal-progress-bar-wrapper:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.perf-new .kpi-table-wrapper:not(#_):not(#_) { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.perf-new:not(#_):not(#_) { overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: thin !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.perf-new .kpi-card:not(#_):not(#_) { padding: 14px 18px 12px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.perf-new .kpi-header:not(#_):not(#_) { margin: 0 0 10px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .kpi-container.perf-new .kpi-header h3:not(#_):not(#_) { font-size: var(--a-fs-body) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-stats:not(#_):not(#_) { display: grid !important; grid-template-columns: minmax(0, 1fr) repeat(3, auto) !important; align-items: end !important; gap: 0 !important; padding: 0 2px 12px !important; border-bottom: 1px solid var(--a-line) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-stat:not(#_):not(#_) { display: flex !important; flex-direction: column !important; gap: 2px !important; min-width: 0 !important; padding: 0 0 0 22px !important; margin: 0 0 0 22px !important; border: 0 !important; border-left: 1px solid var(--a-line) !important; border-radius: 0 !important; background: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-stat.pv-main:not(#_):not(#_) { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; align-items: baseline !important; column-gap: 10px !important; padding: 0 !important; margin: 0 !important; border: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-l:not(#_):not(#_) { color: var(--a-muted) !important; font-size: var(--a-fs-micro) !important; font-weight: 600 !important; letter-spacing: .04em !important; text-transform: uppercase !important; cursor: default !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-main .pv-l:not(#_):not(#_) { grid-column: 1 / -1 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-stat > b:not(#_):not(#_) { color: var(--a-text) !important; font-size: 17px !important; font-weight: 650 !important; line-height: 1.15 !important; letter-spacing: -.01em !important; font-variant-numeric: tabular-nums !important; white-space: nowrap !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-main > b:not(#_):not(#_) { color: var(--a-accent-text) !important; font-size: 26px !important; letter-spacing: -.02em !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-stat > small:not(#_):not(#_) { overflow: hidden !important; color: var(--a-muted) !important; font-size: var(--a-fs-cap) !important; font-weight: 400 !important; line-height: 1.3 !important; white-space: nowrap !important; text-overflow: ellipsis !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-goal:not(#_):not(#_) { grid-column: 1 / -1 !important; height: 3px !important; max-width: 360px !important; margin: 6px 0 0 !important; border-radius: 999px !important; background: var(--a-surface-3) !important; overflow: hidden !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-goal > i:not(#_):not(#_) { display: block !important; width: var(--w, 0%) !important; height: 100% !important; border-radius: 999px !important; background: var(--a-accent-line) !important; transform-origin: left center !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-goal.hit > i:not(#_):not(#_) { background: var(--a-good) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-hours-h:not(#_):not(#_) { display: flex !important; margin: 8px 2px 2px !important; color: var(--a-muted) !important; font-size: var(--a-fs-cap) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-hours-h small:not(#_):not(#_) { font-size: inherit !important; font-weight: 400 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-hours:not(#_):not(#_) { --pv-c: 34px !important; --pv-t: 22px !important; --pv-i: 28px !important; --pv-p: 20px !important; display: flex !important; gap: 2px !important; overflow-x: auto !important; padding: 0 0 6px !important; scroll-snap-type: x proximity !important; scrollbar-width: thin !important; scrollbar-color: var(--a-line-2) transparent !important; overscroll-behavior-x: contain !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-rl:not(#_):not(#_) { position: sticky !important; left: 0 !important; z-index: 2 !important; flex: 0 0 46px !important; display: flex !important; flex-direction: column !important; gap: 3px !important; padding: 0 6px 0 2px !important; background: linear-gradient(var(--a-glass-strong), var(--a-glass-strong)), var(--a-bg) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-rl > *:not(#_):not(#_) { display: flex !important; align-items: center !important; color: var(--a-muted) !important; font-size: var(--a-fs-micro) !important; font-style: normal !important; font-weight: 600 !important; letter-spacing: .04em !important; text-transform: uppercase !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-rc:not(#_):not(#_) { height: var(--pv-c) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-rh:not(#_):not(#_) { height: var(--pv-t) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-rl > span:not(#_):not(#_) { height: var(--pv-i) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-rl > .pv-rs:not(#_):not(#_) { color: var(--a-text-2) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-rl > .pv-rp:not(#_):not(#_) { height: var(--pv-p) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-h:not(#_):not(#_) { flex: 1 0 60px !important; display: flex !important; flex-direction: column !important; gap: 3px !important; box-sizing: border-box !important; padding: 0 3px !important; scroll-snap-align: start !important; border: 0 !important; border-radius: 10px !important; background: transparent !important; transition: background-color var(--m-state) var(--e-std) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-h.now:not(#_):not(#_) { background: color-mix(in srgb, var(--a-accent-line) 10%, transparent) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-bar:not(#_):not(#_) { display: flex !important; align-items: flex-end !important; height: var(--pv-c) !important; margin: 0 !important; padding: 4px 6px 0 !important; box-sizing: border-box !important; border-bottom: 1px solid var(--a-line) !important; border-radius: 0 !important; background: none !important; overflow: visible !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-bar > i:not(#_):not(#_) { display: block !important; width: 100% !important; height: var(--h, 0%) !important; border-radius: 4px 4px 0 0 !important; background: color-mix(in srgb, var(--a-accent-line) 55%, transparent) !important; transform-origin: center bottom !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-h.now .pv-bar > i:not(#_):not(#_) { background: var(--a-accent-line) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-top:not(#_):not(#_) { display: flex !important; align-items: center !important; justify-content: center !important; height: var(--pv-t) !important; min-height: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-top > b:not(#_):not(#_) { padding: 1px 7px !important; border-radius: 999px !important; color: var(--a-text-2) !important; font-size: var(--a-fs-cap) !important; font-weight: 650 !important; font-variant-numeric: tabular-nums !important; white-space: nowrap !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-h.past .pv-top > b:not(#_):not(#_) { color: var(--a-muted) !important; font-weight: 500 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-h.now .pv-top > b:not(#_):not(#_) { background: var(--a-accent-fill) !important; color: var(--a-accent-ink) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-f:not(#_):not(#_) { display: block !important; min-width: 0 !important; margin: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-f input:not(#_):not(#_) { box-sizing: border-box !important; width: 100% !important; height: var(--pv-i) !important; margin: 0 !important; padding: 0 6px !important; border: 1px solid transparent !important; border-radius: 8px !important; background: color-mix(in srgb, var(--a-text) 5%, transparent) !important; color: var(--a-text) !important; font: 600 var(--a-fs-small)/1 var(--font) !important; text-align: center !important; font-variant-numeric: tabular-nums !important; box-shadow: none !important; caret-color: var(--a-accent-line) !important; -moz-appearance: textfield !important; appearance: textfield !important; transition: border-color var(--m-micro) var(--e-std), box-shadow var(--m-micro) var(--e-std), background-color var(--m-micro) var(--e-std) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-f.pv-sales input:not(#_):not(#_) { font-weight: 700 !important; background: color-mix(in srgb, var(--a-text) 8%, transparent) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-f input:hover:not([readonly]):not(#_):not(#_) { border-color: var(--a-line-2) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-f input:not(#_):not(#_)::-webkit-inner-spin-button, html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-f input:not(#_):not(#_)::-webkit-outer-spin-button { -webkit-appearance: none !important; margin: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-f input:not(#_):not(#_)::placeholder { color: var(--a-muted) !important; font-weight: 400 !important; opacity: .6 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-f input:focus:not(#_):not(#_) { outline: none !important; border-color: var(--a-accent-line) !important; background: var(--a-bg) !important; box-shadow: 0 0 0 3px var(--a-focus) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-f input[readonly]:not(#_):not(#_) { background: transparent !important; border-color: transparent !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-s:not(#_):not(#_) { display: flex !important; align-items: center !important; justify-content: center !important; height: var(--pv-p) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-s > b:not(#_):not(#_) { color: var(--a-muted) !important; font-size: var(--a-fs-micro) !important; font-weight: 600 !important; line-height: 1 !important; font-variant-numeric: tabular-nums !important; white-space: nowrap !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-h.has .pv-s > b:not(#_):not(#_) { color: var(--a-good) !important }
@media (max-width: 820px) {
  html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-stats:not(#_):not(#_) { grid-template-columns: repeat(3, auto) 1fr !important; row-gap: 12px !important }
  html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-stat.pv-main:not(#_):not(#_) { grid-column: 1 / -1 !important }
  html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-stat:nth-child(2):not(#_):not(#_) { padding-left: 0 !important; margin-left: 0 !important; border-left: 0 !important }
}
.zd { box-sizing: border-box; margin: 0 14px 14px; border: var(--zd-bw, 1px) solid var(--a-line-2); border-radius: var(--a-r4); background: var(--a-bg); max-height: 42vh; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; box-shadow: var(--a-sh-1) }
.zd[hidden] { display: none }
html.shell-a.cov-dock-open body:is(.locked-mode, :not(.locked-mode)) #main-table-container:not(#_):not(#_) { margin-bottom: 10px !important }
html.device-tablet .zd, html.phone-mode .zd { display: none }
.zd-in { padding: 8px 0 }
.zd-row { display: grid; grid-template-columns: var(--zd-l, 258px) minmax(0, 1fr); align-items: stretch; height: 26px }
.zd-lead { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 12px 0 16px }
.zd-name { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--a-text); font-size: var(--a-fs-cap); font-weight: 700 }
.zd-name::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--zf, var(--a-surface-3)); box-shadow: inset 2px 0 0 var(--zedge, transparent) }
.zd-mid { flex: none; color: var(--a-muted); font-size: var(--a-fs-cap); white-space: nowrap; font-variant-numeric: tabular-nums }
.zd-mid b { color: var(--a-muted); font-weight: 400 }
.zd-mid small { margin-left: .3em; font-size: inherit }
.zd-mid.low b { color: var(--a-warn-text) }
.zd-track { position: relative; min-width: 0; overflow: hidden }
.zd-line { display: grid; grid-template-columns: var(--zd-cols, none); width: max-content; height: 100%; isolation: isolate; will-change: transform }
.zd-c { position: relative; display: grid; place-items: center; min-width: 0; margin: 0; padding: 0; border: 0; background: transparent; color: #ffffff; font: 600 var(--a-fs-cap)/1 var(--font); font-variant-numeric: tabular-nums; cursor: pointer; -webkit-tap-highlight-color: transparent }
.zd-c::before { content: ''; position: absolute; z-index: -1; inset: 3px 1px; border-radius: 7px; background-color: transparent }
.zd-c.has::before { background-color: color-mix(in srgb, var(--zf, #64748b) 70%, #0f1218) }
.zd-c.short { color: var(--a-warn-ink) }
.zd-c.short::before { background-color: var(--a-warn-fill) }
html.shell-a[data-theme="light"] .zd-c.has:not(.short) { color: color-mix(in srgb, var(--zf, #64748b) 80%, #000000); font-weight: 650 }
html.shell-a[data-theme="light"] .zd-c.has:not(.short)::before { background-color: color-mix(in srgb, var(--zf, #64748b) 24%, #ffffff) }
.zd-row.zcr-rowhl .zd-c::before, .zd-c.zcr-colhl::before { background-image: linear-gradient(color-mix(in srgb, var(--a-text) 16%, transparent), color-mix(in srgb, var(--a-text) 16%, transparent)) }
.zd-row.zcr-rowhl .zd-c.zcr-colhl::before { background-image: linear-gradient(color-mix(in srgb, var(--a-text) 34%, transparent), color-mix(in srgb, var(--a-text) 34%, transparent)) }
.zd-row.zcr-rowhl .zd-name { color: var(--a-accent-text) }
@media print {
  .zd { display: none !important }
}
html.shell-a[data-theme="light"] body #roster-table tbody td.q-quarter:not(#_):not(#_) { border-bottom-color: rgba(16,24,40,.07) !important }
html.shell-a[data-theme="light"] body #roster-table tbody td.q-half:not(#_):not(#_) { border-right-color: rgba(16,24,40,.07) !important; border-bottom-color: rgba(16,24,40,.07) !important }
html.shell-a[data-theme="light"] body #roster-table tbody td.q-hour:not(#_):not(#_) { border-right-color: rgba(16,24,40,.14) !important; border-bottom-color: rgba(16,24,40,.07) !important }
html.shell-a[data-theme="light"] body #roster-table tbody td.slot-zone .zone-ribbon:not(.lunch-ribbon):not(#_):not(#_) { box-shadow: inset 3px 0 0 var(--edge, transparent), inset 0 0 0 1px rgba(16,24,40,.14), 0 1px 2px rgba(16,24,40,.22) !important }
html.shell-a[data-theme="light"] body #roster-table tbody td.beside-lunch-l > .zone-ribbon:not(#_):not(#_), html.shell-a[data-theme="light"] body #roster-table tbody td.beside-lunch-r > .zone-ribbon:not(#_):not(#_) { box-shadow: inset 3px 0 0 var(--edge, transparent), inset 0 0 0 1px rgba(16,24,40,.14), 0 1px 2px rgba(16,24,40,.22) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .isl-tray:not(#_):not(#_) { position: relative !important; z-index: 31 !important }
html.shell-a[data-theme="light"] body .isl-bar:not(#_):not(#_):not(#_) { box-shadow: inset 0 1px 0 var(--a-bar-shine), 0 0 0 .5px rgba(12,34,40,.14), 0 1px 2px rgba(12,34,40,.10), 0 8px 22px rgba(12,34,40,.09) !important }
html.shell-a.glass body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.slot-zone .zone-ribbon[style*="--zg"]:not(.lunch-ribbon):not(#_):not(#_) { background: linear-gradient(180deg, color-mix(in srgb, var(--zd, var(--zg)) 94%, var(--zg)), color-mix(in srgb, var(--zd, var(--zg)) 92%, transparent)) !important; border: 1px solid color-mix(in srgb, var(--zg) 90%, #ffffff) !important; color: #ffffff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 3px 8px color-mix(in srgb, var(--zg) 22%, transparent) !important; text-shadow: 0 1px 2px rgba(0,0,0,.35) !important }
html.shell-a.glass body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.slot-zone .zone-ribbon.lunch-ribbon:not(#_):not(#_) { background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), inset 0 1px 0 rgba(255,255,255,.10) !important }
html.shell-a.glass body:is(.locked-mode, :not(.locked-mode)) #now-line:not(#_):not(#_) { box-shadow: 0 0 14px var(--a-accent-line), 0 0 3px #5ac8fa !important }
html.shell-a.glass[data-theme="light"] body #roster-table tbody td.slot-zone .zone-ribbon[style*="--zg"]:not(.lunch-ribbon):not(#_):not(#_) { background: linear-gradient(180deg, color-mix(in srgb, var(--zg) 55%, transparent), color-mix(in srgb, var(--zg) 38%, transparent)) !important; border-color: var(--zg) !important; color: color-mix(in srgb, var(--zg) 35%, #0b0d12) !important; text-shadow: none !important; box-shadow: inset 0 1px 0 #ffffff, 0 2px 6px color-mix(in srgb, var(--zg) 18%, transparent) !important }
html.shell-a.glass[data-theme="light"] body #roster-table tbody td.slot-zone .zone-ribbon.lunch-ribbon:not(#_):not(#_) { background: rgba(16,24,40,.05) !important; box-shadow: inset 0 0 0 1px rgba(16,24,40,.14) !important }
html.shell-a.glass[data-theme="light"] body #roster-table .zone-ribbon.lunch-ribbon .lunch-badge svg:not(#_):not(#_) { stroke: #3c4350 !important }
html.shell-a.glass body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.slot-zone .zone-ribbon[style*="--zg1"]:not(.lunch-ribbon):not(#_):not(#_) { background: linear-gradient(to bottom, color-mix(in srgb, var(--zd1, var(--zg1)) 94%, var(--zg1)), color-mix(in srgb, var(--zd1, var(--zg1)) 94%, transparent) 50%, color-mix(in srgb, var(--zd2, var(--zg2)) 94%, transparent) 50%, color-mix(in srgb, var(--zd2, var(--zg2)) 92%, transparent)) !important; border: 1px solid color-mix(in srgb, var(--zg1) 90%, #ffffff) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), 0 3px 8px color-mix(in srgb, var(--zg1) 20%, transparent) !important; text-shadow: 0 1px 2px rgba(0,0,0,.35) !important }
html.shell-a.glass body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.slot-zone .zone-ribbon[style*="--zg1"] > div > span:not(#_):not(#_) { color: #ffffff !important }
html.shell-a.glass[data-theme="light"] body #roster-table tbody td.slot-zone .zone-ribbon[style*="--zg1"]:not(.lunch-ribbon):not(#_):not(#_) { background: linear-gradient(to bottom, color-mix(in srgb, var(--zg1) 55%, transparent), color-mix(in srgb, var(--zg1) 45%, transparent) 50%, color-mix(in srgb, var(--zg2) 50%, transparent) 50%, color-mix(in srgb, var(--zg2) 38%, transparent)) !important; border-color: var(--zg1) !important; text-shadow: none !important; box-shadow: inset 0 1px 0 #ffffff, 0 2px 6px color-mix(in srgb, var(--zg1) 16%, transparent) !important }
html.shell-a.glass[data-theme="light"] body #roster-table tbody td.slot-zone .zone-ribbon[style*="--zg1"] > div > span:first-child:not(#_):not(#_) { color: color-mix(in srgb, var(--zg1) 35%, #0b0d12) !important }
html.shell-a.glass[data-theme="light"] body #roster-table tbody td.slot-zone .zone-ribbon[style*="--zg1"] > div > span:last-child:not(#_):not(#_) { color: color-mix(in srgb, var(--zg2) 35%, #0b0d12) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table thead tr:first-child th.col-breaks:not(#_):not(#_) { box-shadow: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.col-breaks:not(#_):not(#_)::after, html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table thead tr:first-child th.col-breaks:not(#_):not(#_)::after { content: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu:not(#_):not(#_) { animation: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table .break-slot:not(#_):not(#_) { transition: background-color var(--m-micro) var(--e-std), color var(--m-micro) var(--e-std), transform var(--m-micro) var(--e-std) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table .break-slot:active:not(#_):not(#_) { transform: scale(.97) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .zone-legend #zone-badges-container > .zone-badge:not(#_):not(#_) { transition: transform var(--m-micro) var(--e-std), box-shadow var(--m-micro) var(--e-std) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .zone-legend #zone-badges-container > .zone-badge:active:not(#_):not(#_) { transform: scale(.97) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-pop button:not(#_):not(#_) { transition: transform var(--m-micro) var(--e-std), background-color var(--m-micro) var(--e-std) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-pop button:active:not(#_):not(#_) { transform: scale(.97) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #lunch-pop button:active:not(#_):not(#_) { transform: scale(.97) !important }
html.motion-off body :is(.break-slot, .zone-badge, #zone-pop button, #lunch-pop button):active { transform: none !important }
.arc-changed { outline: 2px solid var(--a-accent-line, #22b3be) !important; outline-offset: -2px }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td[id^="cov-"]:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) .zd-c:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) .zd-mid:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #isl-brk strong:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) .stage1b-kpi strong:not(#_):not(#_) { font-variant-numeric: tabular-nums !important }
@supports (transition-behavior: allow-discrete) {
  html.shell-a body dialog { transition: opacity var(--m-state) var(--e-std), transform var(--m-state) var(--e-std), display var(--m-state) allow-discrete, overlay var(--m-state) allow-discrete }
  html.shell-a body dialog:not([open]) { opacity: 0; transform: translateY(4px); pointer-events: none }
}
html.shell-a.fit-sheet body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.slot-zone > .zone-ribbon:not(#_):not(#_) { min-width: calc(100% - 2px) !important }
html.shell-a.fit-sheet body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.slot-zone.beside-lunch-l > .zone-ribbon:not(#_):not(#_), html.shell-a.fit-sheet body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.slot-zone.beside-lunch-r > .zone-ribbon:not(#_):not(#_) { min-width: calc(100% - 1px) !important }
html.shell-a { --sub-rule: rgba(255,255,255,.9); --dz-inset: 4px; --dz-w: 96px; --dz-ring: rgba(255,255,255,.5); --dz-shadow: 0 2px 6px rgba(0,0,0,.35) }
html.shell-a.fit-sheet { --dz-inset: 3px; --dz-w: 80px }
html.shell-a.device-tablet { --dz-inset: 5px; --dz-w: 108px }
html.shell-a[data-theme="light"] { --sub-rule: #111827; --dz-ring: rgba(255,255,255,.95); --dz-shadow: 0 1px 4px rgba(17,24,39,.22) }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table tbody td.slot-zone.has-sub > .zone-ribbon:not(.lunch-ribbon):not(#_):not(#_) { position: relative !important; overflow: hidden !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table .zone-ribbon .dz-bub:not(#_):not(#_) { position: absolute !important; right: 5px !important; top: var(--dz-inset) !important; bottom: var(--dz-inset) !important; width: var(--dz-w) !important; max-width: calc(100% - 10px) !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; pointer-events: none !important; z-index: 2 !important; border-radius: 999px !important; background: var(--sf) !important; color: var(--st) !important; box-shadow: 0 0 0 1.5px var(--dz-ring), var(--dz-shadow) !important; font-style: normal !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table .zone-ribbon .dz-bub b:not(#_):not(#_) { padding: 0 8px !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .06em !important; text-transform: uppercase !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important }
html.shell-a.device-tablet body:is(.locked-mode, :not(.locked-mode)) #roster-table .zone-ribbon .dz-bub b:not(#_):not(#_) { font-size: 13px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #roster-table .zone-ribbon .dz-bub.dz-tight b:not(#_):not(#_) { visibility: hidden !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-hours.more-r:not(#_):not(#_) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent) !important; mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-hours.more-l:not(#_):not(#_) { -webkit-mask-image: linear-gradient(to right, #000 48px, rgba(0,0,0,.1) 49px, #000 84px) !important; mask-image: linear-gradient(to right, #000 48px, rgba(0,0,0,.1) 49px, #000 84px) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .perf-view .pv-hours.more-l.more-r:not(#_):not(#_) { -webkit-mask-image: linear-gradient(to right, #000 48px, rgba(0,0,0,.1) 49px, #000 84px, #000 calc(100% - 32px), transparent) !important; mask-image: linear-gradient(to right, #000 48px, rgba(0,0,0,.1) 49px, #000 84px, #000 calc(100% - 32px), transparent) !important }
html.shell-a.fit-narrow body:is(.locked-mode, :not(.locked-mode)) #roster-table tfoot td[id^="cov-"][data-v]:not(#_):not(#_)::after { content: attr(data-hs) !important }
html.shell-a { --a-row-menu: 40px; --a-good-fill: #2fb34f; --a-inset-2: rgba(255,255,255,.04); }
html.shell-a.device-tablet { --a-row-menu: 56px; }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu:not(#_):not(#_) { box-sizing: border-box !important; width: 380px !important; max-width: calc(100vw - 24px) !important; padding: 12px !important; background: linear-gradient(var(--a-glass-strong), var(--a-glass-strong)), var(--a-bg) !important; border: 1px solid var(--a-line-2) !important; border-radius: var(--a-r4) !important; box-shadow: var(--a-sh-2) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; color: var(--a-text) !important; font-family: var(--font) !important; font-size: var(--a-fs-body) !important; line-height: 1.45 !important; letter-spacing: normal !important; overflow: auto !important; overscroll-behavior: contain !important }
html.shell-a.device-tablet body:is(.locked-mode, :not(.locked-mode)) #tools-menu:not(#_):not(#_) { width: 440px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu[hidden]:not(#_):not(#_) { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-search:not(#_):not(#_) { display: flex !important; align-items: center !important; gap: 8px !important; box-sizing: border-box !important; height: var(--a-h-md) !important; margin: 0 !important; padding: 0 12px !important; border: 0 !important; border-radius: 999px !important; background: var(--a-seg-track) !important; color: var(--a-muted) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-search svg:not(#_):not(#_) { width: 16px !important; height: 16px !important; flex: none !important; color: var(--a-muted) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-search input:not(#_):not(#_) { flex: 1 !important; min-width: 0 !important; height: 100% !important; margin: 0 !important; padding: 1px 2px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; outline: 0 !important; color: var(--a-text) !important; font-family: inherit !important; font-size: var(--a-fs-body) !important; -webkit-appearance: none !important; appearance: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-search input:not(#_):not(#_)::placeholder { color: var(--a-muted) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-search:not(#_):not(#_)::after { content: '/' !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; min-width: 18px !important; height: 18px !important; padding: 0 4px !important; border-radius: 6px !important; background: var(--a-surface-3) !important; border: 1px solid var(--a-line) !important; color: var(--a-muted) !important; font-size: var(--a-fs-micro) !important; line-height: 1 !important }
html.shell-a.device-tablet body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-search:not(#_):not(#_)::after { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tools-section:not(#_):not(#_) { margin: 0 !important; padding: 0 !important; border: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tools-section + .tools-section:not(#_):not(#_) { margin: 0 !important; padding: 0 !important; border: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tools-title:not(#_):not(#_) { margin: 16px 6px 6px !important; padding: 0 !important; font-size: var(--a-fs-small) !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--a-text-2) !important; line-height: 1.45 !important; cursor: default !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu summary.tools-title:not(#_):not(#_) { cursor: pointer !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-layout-wrap:not(#_):not(#_) { margin-top: 14px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-list:not(#_):not(#_) { display: block !important; margin: 0 !important; padding: 0 !important; border-radius: var(--a-r3) !important; background: var(--a-inset-2) !important; border: 1px solid var(--a-line) !important; overflow: hidden !important; box-shadow: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-list > button:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-list > label:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-list > a:not(#_):not(#_) { display: flex !important; align-items: center !important; gap: 12px !important; box-sizing: border-box !important; width: 100% !important; min-height: var(--a-row-menu) !important; margin: 0 !important; padding: 0 14px !important; border: 0 !important; border-top: 1px solid var(--a-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: var(--a-text) !important; font-family: inherit !important; font-size: var(--a-fs-body) !important; font-weight: 400 !important; line-height: 1.45 !important; text-align: left !important; text-decoration: none !important; letter-spacing: 0 !important; cursor: pointer !important; justify-content: flex-start !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-list > :first-child:not(#_):not(#_) { border-top: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-list > button:hover:not(:disabled):not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-list > label:hover:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-list > a:hover:not(#_):not(#_) { background: var(--a-hover-veil) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-list > button:disabled:not(#_):not(#_) { opacity: .42 !important; cursor: not-allowed !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-list > button:focus-visible:not(#_):not(#_) { outline: 0 !important; box-shadow: inset 0 0 0 2px var(--a-focus) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-list > button svg:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-list > a svg:not(#_):not(#_) { width: 16px !important; height: 16px !important; flex: none !important; color: var(--a-accent-text) !important; margin: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-list > button .tm-label:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-list > a .tm-label:not(#_):not(#_) { flex: 1 !important; min-width: 0 !important; margin: 0 !important; font: inherit !important; color: inherit !important; text-align: left !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-badge:not(#_):not(#_) { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; min-width: 22px !important; height: 22px !important; margin: 0 !important; padding: 0 8px !important; border-radius: 999px !important; background: var(--a-surface-3) !important; color: var(--a-text-2) !important; font-size: var(--a-fs-cap) !important; font-style: normal !important; font-weight: 600 !important; line-height: 1 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-badge.amber:not(#_):not(#_) { background: var(--a-warn-bg) !important; color: var(--a-warn-text) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-badge.red:not(#_):not(#_) { background: #d92d20 !important; color: #fff !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-badge:not(.red):not(.amber):not(#_):not(#_) { background: var(--a-surface-3) !important; color: var(--a-text-2) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-warn:not(#_):not(#_) { margin: 0 6px 8px !important; padding: 0 !important; color: var(--a-muted) !important; font-size: var(--a-fs-small) !important; line-height: 1.4 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-switch .tm-sw:not(#_):not(#_) { position: relative !important; flex: none !important; box-sizing: border-box !important; width: 51px !important; height: 31px !important; margin: 0 0 0 auto !important; border: 1px solid var(--a-line-2) !important; border-radius: 999px !important; background: var(--a-surface-3) !important; transition: background var(--m-state, 200ms) var(--e-std) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-switch .tm-sw:not(#_):not(#_)::before { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-switch .tm-sw:not(#_):not(#_)::after { content: '' !important; position: absolute !important; top: 2px !important; left: 2px !important; width: 25px !important; height: 25px !important; border-radius: 50% !important; background: #fff !important; box-shadow: 0 2px 5px rgba(0,0,0,.35) !important; transition: transform var(--m-move, 240ms) var(--e-pop) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-switch.on .tm-sw:not(#_):not(#_) { background: var(--a-good-fill) !important; border-color: transparent !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-switch.on .tm-sw:not(#_):not(#_)::after { transform: translateX(20px) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tools-setup:not(#_):not(#_) { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; box-sizing: border-box !important; width: 100% !important; min-height: var(--a-h-lg) !important; margin: 14px 0 0 !important; padding: 0 16px !important; border: 0 !important; border-radius: var(--a-r2) !important; background: var(--a-accent-fill) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.14) !important; color: var(--a-accent-ink) !important; font-family: inherit !important; font-size: var(--a-fs-body) !important; font-weight: 600 !important; cursor: pointer !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tools-setup:hover:not(#_):not(#_) { background: var(--a-accent-hover) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tools-setup .tools-setup-title:not(#_):not(#_) { display: inline-flex !important; align-items: center !important; gap: 10px !important; font-size: var(--a-fs-body) !important; font-weight: 600 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tools-setup svg:not(#_):not(#_) { width: 16px !important; height: 16px !important; color: #fff !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tools-setup small:not(#_):not(#_) { color: rgba(255,255,255,.8) !important; font-size: var(--a-fs-cap) !important; font-weight: 500 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-search:not(#_):not(#_) { margin: 0 0 14px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tools-setup .tools-setup-title:not(#_):not(#_) { gap: 12px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tools-setup .tools-setup-title > :not(svg):not(#_):not(#_) { margin-left: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tools-title:not(#_):not(#_) { margin: 18px 6px 7px !important; font-size: var(--a-fs-cap) !important; font-weight: 650 !important; letter-spacing: .05em !important; text-transform: uppercase !important; color: var(--a-muted) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-list > button .tm-label.tm-two:not(#_):not(#_) { display: flex !important; flex-direction: column !important; gap: 2px !important; padding: 11px 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-hint:not(#_):not(#_) { display: block !important; font-size: var(--a-fs-cap) !important; font-weight: 400 !important; line-height: 1.3 !important; color: var(--a-muted) !important; white-space: normal !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-plan .tm-label:not(#_):not(#_) { font-weight: 650 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-plan svg:not(#_):not(#_) { color: var(--a-accent-text) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu details.tm-fold > summary.tools-title:not(#_):not(#_) { display: flex !important; align-items: center !important; gap: 8px !important; min-height: 36px !important; margin: 10px 0 4px !important; padding: 0 8px !important; border-radius: var(--a-r1) !important; list-style: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu details.tm-fold > summary.tools-title:not(#_):not(#_)::-webkit-details-marker { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu details.tm-fold > summary.tools-title:not(#_):not(#_)::after { content: '' !important; width: 7px !important; height: 7px !important; margin-left: auto !important; border-right: 1.6px solid currentColor !important; border-bottom: 1.6px solid currentColor !important; transform: rotate(-45deg) !important; transition: transform var(--m-state, 200ms) var(--e-std) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu details.tm-fold[open] > summary.tools-title:not(#_):not(#_)::after { transform: rotate(45deg) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu details.tm-fold > summary.tools-title:hover:not(#_):not(#_) { background: var(--a-hover-veil) !important; color: var(--a-text-2) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-foldsec[hidden]:not(#_):not(#_) { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu details.tm-fold[open] > .tm-list:not(#_):not(#_) { animation: ovFoldIn var(--m-state) var(--e-std) backwards !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-list > [hidden]:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tools-section[hidden]:not(#_):not(#_) { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #tools-menu .tm-list > button.tm-tall:not(#_):not(#_) { height: auto !important; min-height: var(--a-row-menu) !important }
html.shell-a { --a-dlg-pad: 22px; --a-fs-title: 21px; --a-fs-field: 14px; --a-field: rgba(255,255,255,.05); --a-scrim: rgba(6,8,12,.5); --a-bad-fill: #d92d20; }
html.shell-a.device-tablet { --a-dlg-pad: 26px; --a-fs-field: 17px; }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) dialog:not(#_):not(#_) { background: linear-gradient(var(--a-glass-strong), var(--a-glass-strong)), var(--a-bg) !important; border: 1px solid var(--a-line-2) !important; border-radius: var(--a-r4) !important; box-shadow: var(--a-sh-3) !important; color: var(--a-text) !important; font-family: var(--font) !important; letter-spacing: normal !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) dialog:not(#_):not(#_)::backdrop { background: var(--a-scrim) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) dialog :is(.modal-header h2, .zm-head h2, .zh-head h2, .zs-head h2, #ui-dialog-title):not(#_):not(#_) { margin: 0 !important; color: var(--a-text) !important; font-size: var(--a-fs-title) !important; font-weight: 650 !important; letter-spacing: -.01em !important; line-height: 1.3 !important; text-transform: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) dialog :is(.modal-header p, .zm-head p, .zh-head p, .zs-sub, .su-sub, .roster-feature-hint):not(#_):not(#_) { color: var(--a-muted) !important; font-size: var(--a-fs-small) !important; line-height: 1.4 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) dialog :is(.form-group > label, .zm-label):not(#_):not(#_) { color: var(--a-text-2) !important; font-size: var(--a-fs-small) !important; font-weight: 500 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) dialog :is(.zm-foot, .zs-foot, .zh-foot, .su-foot, .staff-actions, .ui-dialog-actions):not(#_):not(#_) { gap: 10px !important; padding-top: 14px !important; border-top: 1px solid var(--a-line) !important; justify-content: flex-end !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) dialog :is(input[type="text"], input[type="number"], input[type="time"], input[type="search"], input[type="email"], input[type="password"], input:not([type]), select, textarea):not(#_):not(#_) { box-sizing: border-box !important; min-height: var(--a-h-md) !important; padding: 0 14px !important; border: 1px solid var(--a-line-2) !important; border-radius: var(--a-r2) !important; background: var(--a-field) !important; color: var(--a-text) !important; font-family: inherit !important; font-size: var(--a-fs-field) !important; outline: 0 !important; box-shadow: none !important; transition: box-shadow var(--m-micro, 120ms) var(--e-std), border-color var(--m-micro, 120ms) var(--e-std) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) dialog :is(input, select, textarea):focus:not(#_):not(#_) { border-color: var(--a-accent-line) !important; box-shadow: 0 0 0 3px var(--a-focus) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) dialog :is(select) option:not(#_):not(#_) { background: var(--a-surface) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) dialog :is(button.primary, button.danger, .zs-apply, .zs-again, .zs-cancel, .zh-bulk, .zh-close, .zm-add, .zm-palette, .zm-foot > button, .zs-foot > button, .zh-foot > button, .su-foot > button, .staff-actions > button, .ui-dialog-actions > button, .cf-foot > button, button:is(:not([class]), [class=""])):not(#_):not(#_) { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; box-sizing: border-box !important; height: var(--a-h-md) !important; min-height: 0 !important; padding: 0 var(--a-pad-x) !important; border: 1px solid var(--a-line-2) !important; border-radius: 999px !important; background: var(--a-surface-3) !important; color: var(--a-text) !important; font-family: inherit !important; font-size: var(--a-fs-btn) !important; font-weight: 600 !important; line-height: 1.45 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important; text-transform: none !important; letter-spacing: 0 !important; cursor: pointer !important; transition: background var(--m-micro, 120ms) var(--e-std), transform var(--m-micro, 120ms) var(--e-std) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) dialog :is(button.primary, .zs-apply, .zh-bulk, .zm-add, .zm-palette, #ui-dialog-ok.primary):not(.ui-danger):not(#_):not(#_) { background: var(--a-accent-fill) !important; border-color: transparent !important; color: var(--a-accent-ink) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) dialog :is(button.danger, .ui-danger):not(#_):not(#_) { background: var(--a-bad-fill) !important; border-color: transparent !important; color: #fff !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) dialog :is(.zm-foot, .zs-foot, .zh-foot, .su-foot, .staff-actions, .ui-dialog-actions, .cf-foot) button:hover:not(:disabled):not(#_):not(#_) { filter: brightness(1.1) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) dialog :is(.zm-foot, .zs-foot, .zh-foot, .su-foot, .staff-actions, .ui-dialog-actions, .cf-foot) button:active:not(:disabled):not(#_):not(#_) { transform: scale(.97) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) dialog :is(.zm-foot, .zs-foot, .zh-foot, .su-foot, .staff-actions, .ui-dialog-actions, .cf-foot) button:disabled:not(#_):not(#_) { opacity: .42 !important; cursor: not-allowed !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) dialog :is(.modal-close, .zm-close, .zh-x, .zs-x):not(#_):not(#_) { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: var(--a-h-sm) !important; height: var(--a-h-sm) !important; min-height: 0 !important; padding: 0 !important; border: 1px solid var(--a-line-2) !important; border-radius: 999px !important; background: var(--a-surface-3) !important; color: var(--a-text-2) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) dialog :is(.modal-close, .zm-close, .zh-x, .zs-x) svg:not(#_):not(#_) { width: 1.15em !important; height: 1.15em !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) dialog#ui-dialog:not(#_):not(#_) { padding: var(--a-dlg-pad) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) dialog#ui-dialog #ui-dialog-title:not(#_):not(#_) { font-size: var(--a-fs-title) !important; margin: 0 0 4px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) dialog#ui-dialog #ui-dialog-message:not(#_):not(#_) { color: var(--a-muted) !important; font-size: var(--a-fs-body) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #ui-toasts:not(#_):not(#_) { top: auto !important; left: auto !important; right: 22px !important; bottom: 22px !important; transform: none !important; width: min(94vw, 400px) !important; flex-direction: column-reverse !important; gap: 8px !important }
html.shell-a.pp-push body:is(.locked-mode, :not(.locked-mode)) #ui-toasts:not(#_):not(#_) { right: calc(var(--a-insp-w) + 24px) !important }
html.shell-a.device-tablet body:is(.locked-mode, :not(.locked-mode)) #ui-toasts:not(#_):not(#_) { left: 50% !important; right: auto !important; bottom: 24px !important; transform: translateX(-50%) !important; width: min(94vw, 440px) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .ui-toast:not(#_):not(#_) { align-items: center !important; gap: 12px !important; max-width: 440px !important; padding: 8px 8px 8px 16px !important; border: 1px solid var(--a-line-2) !important; border-left: 1px solid var(--a-line-2) !important; border-radius: 999px !important; background: var(--a-glass) !important; -webkit-backdrop-filter: blur(20px) !important; backdrop-filter: blur(20px) !important; box-shadow: var(--a-sh-2) !important; color: var(--a-text) !important; font-family: var(--font) !important; font-size: var(--a-fs-small) !important; font-weight: 500 !important; line-height: 1.45 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .ui-toast:not(#_):not(#_)::before { content: '' !important; align-self: center !important; width: 14px !important; height: 14px !important; margin: 0 !important; border-radius: 0 !important; background: var(--a-muted) !important; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.6v.2'/%3E%3C/svg%3E") center / contain no-repeat !important; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.6v.2'/%3E%3C/svg%3E") center / contain no-repeat !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .ui-toast.success:not(#_):not(#_)::before { background: var(--a-good) !important; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6l4.4 4.4L19 7.4'/%3E%3C/svg%3E") !important; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.6l4.4 4.4L19 7.4'/%3E%3C/svg%3E") !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .ui-toast.warn:not(#_):not(#_)::before { background: var(--a-warn-text) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .ui-toast.error:not(#_):not(#_)::before { background: var(--a-bad-text) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .ui-toast .ui-toast-text:not(#_):not(#_) { flex: 1 !important; min-width: 0 !important; padding: 0 !important; font: inherit !important; color: inherit !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .ui-toast .ui-toast-x:not(#_):not(#_) { width: var(--a-h-sm) !important; height: var(--a-h-sm) !important; border-radius: 999px !important; color: var(--a-muted) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .ui-toast .ui-toast-x:hover:not(#_):not(#_) { background: var(--a-hover-veil) !important; color: var(--a-text) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-pop:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #lunch-pop:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) #sub-card:not(#_):not(#_) { box-sizing: border-box !important; padding: 14px !important; background: linear-gradient(var(--a-glass-strong), var(--a-glass-strong)), var(--a-bg) !important; border: 1px solid var(--a-line-2) !important; border-radius: var(--a-r3) !important; box-shadow: var(--a-sh-2) !important; color: var(--a-text) !important; font-family: var(--font) !important; letter-spacing: normal !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-pop:not(#_):not(#_)::before, html.shell-a body:is(.locked-mode, :not(.locked-mode)) #lunch-pop:not(#_):not(#_)::before, html.shell-a body:is(.locked-mode, :not(.locked-mode)) #sub-card:not(#_):not(#_)::before { content: "" !important; position: absolute !important; top: -6px !important; left: var(--ax, 50%) !important; width: 12px !important; height: 12px !important; background: inherit !important; border-left: 1px solid var(--a-line-2) !important; border-top: 1px solid var(--a-line-2) !important; transform: translateX(-50%) rotate(45deg) !important; backdrop-filter: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-pop[data-dir="up"]:not(#_):not(#_)::before, html.shell-a body:is(.locked-mode, :not(.locked-mode)) #lunch-pop[data-dir="up"]:not(#_):not(#_)::before, html.shell-a body:is(.locked-mode, :not(.locked-mode)) #sub-card[data-dir="up"]:not(#_):not(#_)::before { top: auto !important; bottom: -6px !important; transform: translateX(-50%) rotate(225deg) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-pop:not(#_):not(#_) { width: min(440px, calc(100vw - 20px)) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-pop .zp-head:not(#_):not(#_) { padding: 0 !important; margin: 0 0 12px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-pop .zp-head b:not(#_):not(#_) { font-size: var(--a-fs-lg) !important; font-weight: 700 !important; margin-right: 8px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-pop .zp-head span:not(#_):not(#_) { color: var(--a-muted) !important; font-size: var(--a-fs-small) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-pop .zp-x:not(#_):not(#_) { width: var(--a-h-sm) !important; height: var(--a-h-sm) !important; border: 1px solid var(--a-line-2) !important; border-radius: 999px !important; background: var(--a-surface-3) !important; color: var(--a-text-2) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-pop .zp-grid:not(#_):not(#_) { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-pop .zp-z:not(#_):not(#_) { min-height: var(--a-h-lg) !important; border: 0 !important; border-radius: var(--a-r2) !important; box-shadow: inset 3px 0 0 var(--ze, transparent) !important; font-family: inherit !important; font-size: var(--a-fs-zone) !important; font-weight: 600 !important; letter-spacing: .04em !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-pop .zp-z.cur:not(#_):not(#_) { box-shadow: inset 3px 0 0 var(--ze, transparent), 0 0 0 2px var(--a-surface), 0 0 0 4px var(--a-text) !important; border: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-pop .zp-more:not(#_):not(#_) { border-radius: 999px !important; border: 1px solid var(--a-line-2) !important; background: var(--a-surface-3) !important; color: var(--a-text) !important; font-size: var(--a-fs-btn) !important; font-weight: 600 !important; min-height: var(--a-h-md) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #lunch-pop:not(#_):not(#_) { width: min(360px, calc(100vw - 20px)) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #lunch-pop .lp-who:not(#_):not(#_) { font-size: var(--a-fs-lg) !important; font-weight: 700 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #lunch-pop .lp-tag:not(#_):not(#_) { background: var(--a-surface-3) !important; color: var(--a-text-2) !important; font-size: var(--a-fs-cap) !important; font-weight: 600 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #lunch-pop .lp-x:not(#_):not(#_) { width: var(--a-h-sm) !important; height: var(--a-h-sm) !important; border: 1px solid var(--a-line-2) !important; border-radius: 999px !important; background: var(--a-surface-3) !important; color: var(--a-text-2) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #lunch-pop .lp-time:not(#_):not(#_) { font-size: var(--a-fs-title) !important; font-weight: 650 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #lunch-pop .lp-sub:not(#_):not(#_) { color: var(--a-muted) !important; font-size: var(--a-fs-cap) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #lunch-pop .lp-btns button:not(#_):not(#_) { border-radius: 999px !important; border: 1px solid var(--a-line-2) !important; background: var(--a-surface-3) !important; color: var(--a-text) !important; font-size: var(--a-fs-btn) !important; font-weight: 600 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important; min-height: var(--a-h-lg) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #lunch-pop .lp-btns button small:not(#_):not(#_) { color: var(--a-muted) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .zone-legend #zone-badges-container > .zone-badge:not(#_):not(#_) { height: var(--a-h-sm) !important; padding: 0 var(--a-pad-x) !important; border: 0 !important; border-radius: 999px !important; font-size: var(--a-fs-small) !important; font-weight: 500 !important; letter-spacing: .03em !important; box-shadow: inset 3px 0 0 var(--ze, transparent) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .zone-legend #zone-badges-container > .zone-badge.selected:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) .zone-legend #zone-badges-container > .zone-badge.active:not(#_):not(#_) { box-shadow: inset 0 0 0 2.5px var(--a-text), inset 0 0 0 4px color-mix(in srgb, var(--a-bg) 35%, transparent) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .zone-legend:not(#_):not(#_) { border-radius: var(--a-r4) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .zone-legend .zp-nav:not(#_):not(#_), html.shell-a body:is(.locked-mode, :not(.locked-mode)) .zone-legend .zp-done:not(#_):not(#_) { border-radius: 999px !important }
html.pre-a:not(.phone-mode) .stage1b-topbar { visibility: hidden }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .ui-toast .ui-toast-act:not(#_):not(#_) { height: var(--a-h-sm) !important; padding: 0 12px !important; border-radius: 999px !important; border: 0 !important; background: var(--a-hover-veil) !important; color: var(--a-accent, var(--a-text)) !important; font-weight: 700 !important; font-size: 13px !important; flex: 0 0 auto !important; cursor: pointer !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) .ui-toast .ui-toast-act:hover:not(#_):not(#_) { background: var(--a-accent-fill) !important; color: var(--a-accent-ink) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #ui-dialog-alt[hidden]:not(#_):not(#_) { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) dialog :is(.zs-foot, .zh-foot, .su-foot, .cf-foot, .zm-foot) > button[hidden]:not(#_):not(#_) { display: none !important }
#sub-card { position: fixed; z-index: 950; width: min(380px, calc(100vw - 20px)); max-height: calc(100vh - 20px); overflow: auto }
#sub-card[hidden] { display: none !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) :is(#sub-card, #zone-pop) .sc-head:not(#_):not(#_) { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 0 10px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) :is(#sub-card, #zone-pop) .sc-who:not(#_):not(#_) { flex: 1 !important; min-width: 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) :is(#sub-card, #zone-pop) .sc-who b:not(#_):not(#_) { display: block !important; font-size: var(--a-fs-lg) !important; font-weight: 700 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) :is(#sub-card, #zone-pop) .sc-who span:not(#_):not(#_) { color: var(--a-muted) !important; font-size: var(--a-fs-small) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) :is(#sub-card, #zone-pop) .sc-ic:not(#_):not(#_) { width: var(--a-h-sm) !important; height: var(--a-h-sm) !important; flex: 0 0 auto !important; border: 1px solid var(--a-line-2) !important; border-radius: 999px !important; background: var(--a-surface-3) !important; color: var(--a-text-2) !important; display: grid !important; place-items: center !important; padding: 0 !important; cursor: pointer !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) :is(#sub-card, #zone-pop) .sc-chip:not(#_):not(#_) { display: inline-flex !important; align-items: center !important; height: 24px !important; padding: 0 10px !important; border-radius: 999px !important; font-weight: 800 !important; font-size: 12px !important; letter-spacing: .03em !important; box-shadow: 0 0 0 1.5px var(--dz-ring) !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) :is(#sub-card, #zone-pop) .sc-nud:not(#_):not(#_) { display: flex !important; align-items: center !important; gap: 8px !important; margin: 6px 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) :is(#sub-card, #zone-pop) .sc-nud em:not(#_):not(#_) { font-style: normal !important; width: 52px !important; color: var(--a-muted) !important; font-size: var(--a-fs-small) !important; font-weight: 600 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) :is(#sub-card, #zone-pop) .sc-nud b:not(#_):not(#_) { flex: 1 !important; font-weight: 700 !important; font-variant-numeric: tabular-nums !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) :is(#sub-card, #zone-pop) :is(.sc-nud, .sc-lens) button:not(#_):not(#_) { min-height: 44px !important; padding: 0 12px !important; border-radius: 999px !important; border: 1px solid var(--a-line-2) !important; background: var(--a-surface-3) !important; color: var(--a-text) !important; font-size: var(--a-fs-btn) !important; font-weight: 600 !important; cursor: pointer !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) :is(#sub-card, #zone-pop) :is(.sc-nud, .sc-lens) button:disabled:not(#_):not(#_) { opacity: .35 !important; cursor: not-allowed !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) :is(#sub-card, #zone-pop) .sc-lens:not(#_):not(#_) { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; margin: 6px 0 !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) :is(#sub-card, #zone-pop) .sc-lens button.on:not(#_):not(#_) { background: var(--a-accent-fill) !important; color: var(--a-accent-ink) !important; border-color: transparent !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) :is(#sub-card, #zone-pop) .sc-why:not(#_):not(#_) { color: var(--a-muted) !important; font-size: var(--a-fs-cap) !important; min-height: 14px !important; margin: 2px 0 4px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) :is(#sub-card, #zone-pop) .sc-end:not(#_):not(#_) { width: 100% !important; min-height: 44px !important; border-radius: 999px !important; border: 1.5px solid var(--a-accent-fill) !important; background: transparent !important; color: var(--a-text) !important; font-weight: 700 !important; margin: 4px 0 !important; cursor: pointer !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) :is(#sub-card, #zone-pop) .sc-lbl:not(#_):not(#_) { font-size: var(--a-fs-cap) !important; font-weight: 700 !important; color: var(--a-muted) !important; letter-spacing: .06em !important; text-transform: uppercase !important; margin: 10px 0 6px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) :is(#sub-card, #zone-pop) .sc-grid:not(#_):not(#_) { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 8px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) :is(#sub-card, #zone-pop) .sc-tile:not(#_):not(#_) { position: relative !important; overflow: hidden !important; min-height: var(--a-h-lg) !important; border: 0 !important; border-radius: var(--a-r2) !important; box-shadow: inset 3px 0 0 var(--ze, transparent) !important; font-family: inherit !important; font-size: var(--a-fs-zone) !important; font-weight: 600 !important; letter-spacing: .04em !important; text-transform: uppercase !important; cursor: pointer !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) :is(#sub-card, #zone-pop) .sc-rm:not(#_):not(#_) { margin-top: 16px !important; padding-top: 8px !important; border-top: 1px solid var(--a-line) !important; text-align: center !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) :is(#sub-card, #zone-pop) .sc-rm button:not(#_):not(#_) { border: 0 !important; background: transparent !important; color: var(--a-danger, #ef4444) !important; font-weight: 700 !important; min-height: 44px !important; padding: 0 14px !important; cursor: pointer !important }
html.shell-a.device-tablet body:is(.locked-mode, :not(.locked-mode)) :is(#sub-card, #zone-pop) :is(.sc-nud button, .sc-lens button, .sc-end, .sc-rm button, .sc-ic):not(#_):not(#_) { min-height: 52px !important }
html.shell-a.device-tablet body:is(.locked-mode, :not(.locked-mode)) :is(#sub-card, #zone-pop) .sc-ic:not(#_):not(#_) { width: 52px !important; height: 52px !important }
html.shell-a.device-tablet body:is(.locked-mode, :not(.locked-mode)) :is(#sub-card, #zone-pop) .sc-tile:not(#_):not(#_) { min-height: 52px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-pop .zp-subs:not(#_):not(#_) { margin-top: 12px !important; display: flex !important; flex-direction: column !important; gap: 8px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-pop .zp-subrow:not(#_):not(#_) { display: flex !important; align-items: center !important; gap: 16px !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-pop .zp-subopen:not(#_):not(#_) { flex: 1 !important; min-height: 52px !important; display: flex !important; align-items: center !important; gap: 8px !important; padding: 0 10px !important; border-radius: var(--a-r2) !important; border: 1px solid var(--a-line-2) !important; background: var(--a-surface-3) !important; color: var(--a-text) !important; font-weight: 650 !important; text-align: left !important; cursor: pointer !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-pop .zp-subopen small:not(#_):not(#_) { color: var(--a-muted) !important; margin-left: auto !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-pop .zp-subend:not(#_):not(#_) { min-height: 52px !important; padding: 0 16px !important; border-radius: 999px !important; border: 1.5px solid var(--a-accent-fill) !important; background: transparent !important; color: var(--a-text) !important; font-weight: 700 !important; cursor: pointer !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-pop .zp-submore:not(#_):not(#_) { align-self: flex-start !important; min-height: 44px !important; border: 0 !important; background: transparent !important; color: var(--a-text) !important; text-decoration: underline !important; font-weight: 650 !important; cursor: pointer !important }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) #zone-pop .zp-subadd:not(#_):not(#_) { min-height: 52px !important; border-radius: var(--a-r2) !important; border: 1px dashed var(--a-line-2) !important; background: transparent !important; color: var(--a-text) !important; font-weight: 700 !important; cursor: pointer !important }
#zone-pop { max-height: calc(100vh - 20px); overflow: auto }
html.shell-a body:is(.locked-mode, :not(.locked-mode)) dialog .tl-body > .tl-foot:not(#_):not(#_) { position: sticky !important; bottom: 0 !important; z-index: 2 !important; margin-top: 0 !important; padding: 10px 0 2px !important; background: linear-gradient(var(--a-glass-strong), var(--a-glass-strong)), var(--a-bg) !important }
/* THEME A CARBON COPY END */

/* ---- Morning routine / End of day tasks (block 51): a focus list; kit tokens only, so it follows Daylight ---- */
#eod-modal .eod-body { display: flex; flex-direction: column; gap: var(--k-s2); padding-bottom: var(--k-s4); }
#eod-modal .eod-hero { display: flex; align-items: center; gap: var(--k-s4); padding: var(--k-s4); margin-bottom: var(--k-s2); border-radius: var(--k-r3); background: linear-gradient(135deg, var(--k-info-bg), var(--k-fill-1)); border: 1px solid var(--k-line); flex-wrap: wrap; }
#eod-modal .eod-ring { position: relative; width: 64px; height: 64px; flex: none; border-radius: 50%; background: conic-gradient(var(--green-fill) 0 var(--c, 0%), color-mix(in srgb, var(--accent) 55%, transparent) var(--c, 0%) var(--d, 0%), var(--k-fill-3) var(--d, 0%) 100%); transition: --c var(--m-move) var(--e-std); display: grid; place-items: center; }
#eod-modal .eod-ring::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--card-bg); }
#eod-modal .eod-ring b { position: relative; font-size: var(--k-fs-5); font-weight: var(--k-fw-4); font-variant-numeric: tabular-nums; }
#eod-modal .eod-ring small { font-size: var(--k-fs-2); color: var(--text-muted); font-weight: var(--k-fw-2); }
#eod-modal .eod-hero-t { flex: 1 1 140px; display: flex; flex-direction: column; gap: 2px; }
#eod-modal .eod-hero-t b { font-size: var(--k-fs-5); font-weight: var(--k-fw-4); }
#eod-modal .eod-hero-t span { color: var(--text-muted); font-size: var(--k-fs-3); }
#eod-modal .eod-seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--k-pill); background: var(--k-fill-2); }
html body #eod-modal .eod-seg > button:not(#_) { min-height: var(--k-h-sm); padding: 0 var(--k-s4); border: 0 !important; border-radius: var(--k-pill) !important; background: transparent !important; color: var(--text-2) !important; box-shadow: none !important; font-size: var(--k-fs-3) !important; font-weight: var(--k-fw-3) !important; transition: background-color var(--m-state) var(--e-std), color var(--m-state) var(--e-std); }
html body #eod-modal .eod-seg > button[aria-selected="true"]:not(#_) { background: var(--text) !important; color: var(--card-bg) !important; box-shadow: var(--k-sh-1) !important; }
#eod-modal .eod-sec { margin: var(--k-s4) var(--k-s1) var(--k-s1); color: var(--text-muted); font-size: var(--k-fs-3); font-weight: var(--k-fw-3); letter-spacing: .04em; text-transform: uppercase; }
#eod-modal .eod-list { display: flex; flex-direction: column; gap: var(--k-s2); }
#eod-modal .eod-item { border-radius: var(--k-r3); background: var(--k-fill-1); border: 1px solid var(--k-line); overflow: hidden; transition: background-color var(--m-state) var(--e-std), opacity var(--m-state) var(--e-std), border-color var(--m-state) var(--e-std), box-shadow var(--m-state) var(--e-std); }
#eod-modal .eod-item.open { background: var(--k-fill-2); border-color: color-mix(in srgb, var(--accent) 45%, var(--k-line)); box-shadow: var(--k-sh-1); }
#eod-modal .eod-item.is-run { border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--k-info-bg); }
#eod-modal .eod-item.is-checked { opacity: .45; }
#eod-modal .eod-item.is-checked .eod-task { text-decoration: line-through; text-decoration-color: var(--text-muted); }
#eod-modal .eod-item.pop .eod-dot { animation: eodPop var(--m-move) var(--e-spring, var(--e-std)); }
@keyframes eodPop { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
#eod-modal .eod-main { display: flex; align-items: center; gap: var(--k-s3); min-height: var(--k-h-lg); padding: var(--k-s2) var(--k-s3) var(--k-s2) var(--k-s3); cursor: pointer; -webkit-tap-highlight-color: transparent; }
#eod-modal .eod-main:focus-visible { outline: none; box-shadow: var(--k-ring); border-radius: var(--k-r3); }
#eod-modal .eod-dot { flex: none; width: 28px; height: 28px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--k-fill-3); display: grid; place-items: center; color: #fff; transition: background-color var(--m-state) var(--e-std), border-color var(--m-state) var(--e-std); }
#eod-modal .eod-dot .ic { width: 16px; height: 16px; }
#eod-modal .is-run .eod-dot { border: 0; background: conic-gradient(var(--accent) calc(var(--p, 0) * 1%), var(--k-fill-3) 0); position: relative; }
#eod-modal .is-run .eod-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--card-bg); }
#eod-modal .is-done .eod-dot { background: var(--green-fill); border-color: var(--green-fill); }
#eod-modal .is-checked .eod-dot { background: var(--text-muted); border-color: var(--text-muted); }
#eod-modal .eod-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#eod-modal .eod-task { font-size: var(--k-fs-4); font-weight: var(--k-fw-3); line-height: 1.25; }
#eod-modal .eod-meta small { color: var(--text-muted); font-size: var(--k-fs-2); }
#eod-modal .eod-act { display: inline-flex; align-items: center; gap: var(--k-s2); flex: none; }
#eod-modal .eod-plan { color: var(--text-muted); font-size: var(--k-fs-3); font-variant-numeric: tabular-nums; }
#eod-modal .eod-clock { font-size: var(--k-fs-5); font-weight: var(--k-fw-4); font-variant-numeric: tabular-nums; color: var(--accent-text); }
#eod-modal .eod-clock.over { color: var(--k-warn-ink); }
#eod-modal .eod-tag { padding: 3px 10px; border-radius: var(--k-pill); font-size: var(--k-fs-2); font-weight: var(--k-fw-3); background: var(--k-fill-2); color: var(--text-2); font-variant-numeric: tabular-nums; }
#eod-modal .eod-tag.ok { background: var(--k-good-bg); color: var(--k-good-ink); }
#eod-modal .eod-tag.warn { background: var(--k-warn-bg); color: var(--k-warn-ink); }
html body #eod-modal .eod-go:not(#_) { min-height: var(--k-h-sm); padding: 0 var(--k-s4); border-radius: var(--k-pill) !important; border: 1px solid var(--k-line) !important; background: var(--k-fill-2) !important; color: var(--text) !important; font-size: var(--k-fs-3) !important; font-weight: var(--k-fw-3) !important; }
html body #eod-modal .eod-go.primary:not(#_) { background: var(--accent-fill) !important; border-color: transparent !important; color: #fff !important; }
#eod-modal .eod-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--m-move) var(--e-std); }
#eod-modal .eod-item.open .eod-more { grid-template-rows: 1fr; }
#eod-modal .eod-more-in { min-height: 0; overflow: hidden; padding: 0 var(--k-s4); display: flex; flex-direction: column; gap: var(--k-s2); }
#eod-modal .eod-item.open .eod-more-in { padding-bottom: var(--k-s4); padding-top: var(--k-s1); }
#eod-modal .eod-lbl { color: var(--text-muted); font-size: var(--k-fs-2); font-weight: var(--k-fw-3); letter-spacing: .04em; text-transform: uppercase; margin-top: var(--k-s1); }
#eod-modal .eod-chips { display: flex; flex-wrap: wrap; gap: var(--k-s2); }
html body #eod-modal .eod-chip:not(#_) { display: inline-flex; align-items: center; gap: var(--k-s2); min-height: var(--k-h-sm); padding: 0 var(--k-s3) 0 var(--k-s1); border-radius: var(--k-pill) !important; border: 1px solid var(--k-line) !important; background: var(--k-fill-1) !important; color: var(--text) !important; font-size: var(--k-fs-3) !important; font-weight: var(--k-fw-2) !important; }
#eod-modal .eod-chip i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--k-fill-3); font-style: normal; font-size: var(--k-fs-1); font-weight: var(--k-fw-4); }
html body #eod-modal .eod-chip.on:not(#_) { background: var(--accent-fill) !important; border-color: transparent !important; color: #fff !important; }
#eod-modal .eod-chip.on i { background: rgba(255,255,255,.25); }
#eod-modal .eod-chip:disabled { opacity: .45; }
#eod-modal .eod-step { display: flex; flex-wrap: wrap; align-items: center; gap: var(--k-s2); }
#eod-modal .eod-step b { min-width: 64px; text-align: center; font-size: var(--k-fs-5); font-weight: var(--k-fw-4); font-variant-numeric: tabular-nums; }
html body #eod-modal .eod-sq:not(#_) { display: grid; place-items: center; width: var(--k-h-sm); height: var(--k-h-sm); padding: 0; border-radius: 50% !important; border: 1px solid var(--k-line) !important; background: var(--k-fill-2) !important; color: var(--text) !important; }
#eod-modal .eod-help { background: none; border: 0; padding: 0; }
/* a closed <dialog> must stay hidden: .k-dialog sets display:flex, which otherwise shows a closed dialog in the page flow (below the roster) */
dialog.k-dialog:not([open]) { display: none !important; }