/* ============================================================
   Vaolithic Scheduler - "Warm Amber Dashboard"
   Matching the legal-dashboard reference:
     · warm amber-to-cream glow gradient canvas
     · one translucent rounded FRAME holding the app
     · translucent white cards (the glow bleeds through)
     · ONE locked amber accent, used only behind icons /
       large numbers / dots, never behind small body text
     · semantic shift colors retained as documented data palette
   Built under design-taste-frontend discipline (§13: dashboard,
   so universal rules only): one accent, one radius family,
   Geist, Phosphor, tabular numerals, AA contrast, focus rings,
   reduced-motion + reduced-transparency fallbacks.
   ============================================================ */

:root {
  /* ---- Type inks (warm neutral, AA on light surfaces) ---- */
  --ink:   #2a2419;
  --ink-2: #645c4d;
  --ink-3: #968c79;

  /* ---- The single locked accent: amber ---- */
  --accent:      #f5971e;   /* bright: icon circles, dots, TODAY pill */
  --accent-2:    #ea8410;   /* hover / deeper fill */
  --accent-ink:  #b4630a;   /* amber TEXT on light (AA ~4.7:1): links, numbers, active nav */
  --accent-soft: #fde4c6;   /* soft tint surface (today, active states) */
  /* Matte amber: warm and dimensional without the old glossy button sheen */
  --accent-grad:
    linear-gradient(145deg, #f9ae4e 0%, #f28c1a 58%, #dc7410 100%);
  --accent-shadow: rgba(204,115,18,0.18);
  --recommend: #4f8a3d;
  --recommend-ink: #376c2c;
  --recommend-soft: #e4f4dc;
  --ops-blue: #2f6fd6;
  --ops-blue-ink: #245aa8;
  --ops-blue-soft: #f5f9ff;
  --ops-red: #d84235;
  --ops-red-dark: #b63228;
  --ops-green: #43a35c;
  --ops-green-dark: #2f7d45;
  --ops-amber: #a8640a;
  --ops-border: rgba(25,35,55,0.13);
  --ops-shadow: 0 2px 8px rgba(25,35,55,0.08);

  /* ---- Surfaces (translucent so the warm glow shows through) ---- */
  --frame:   rgba(255,255,255,0.34);
  --card:    rgba(255,255,255,0.66);
  --card-2:  rgba(255,255,255,0.50);   /* nested wells */
  --field:   rgba(255,255,255,0.62);
  --line:    rgba(120,90,40,0.10);

  /* ---- Soft warm-tinted elevation ---- */
  --e1: 0 4px 16px rgba(150,105,40,0.10), 0 1px 3px rgba(150,105,40,0.06);
  --e2: 0 16px 38px rgba(150,105,40,0.16), 0 3px 8px rgba(150,105,40,0.08);
  --e-frame: 0 30px 80px rgba(150,105,40,0.18);

  /* ---- Functional shift palette (documented product code), warm-harmonised ---- */
  --care:  #e8f1ff;  --care-ink:  #376bd1;  /* caregiver = light blue  */
  --pm:    #e8f1ff;  --pm-ink:    #376bd1;  /* PM shift = light blue chip */
  --med:   #d2efe9;  --med-ink:   #1c6f63;  /* med tech  = teal  */
  --safe:  #d9eecf;  --safe-ink:  #4a7a31;  /* open/safe = green */
  --warn:  #fce6c0;  --warn-ink:  #8a5a10;  /* caution/OT= deep amber */
  --hot:   #fad9cd;  --hot-ink:   #b0432c;  /* callout/DT= red   */
  --noc:   #e7def5;  --noc-ink:   #5a44a0;  /* NOC band  = lilac */

  /* ---- Locked radius family ---- */
  --r-frame: 30px;
  --r-card:  20px;
  --r-ctl:   14px;
  --r-chip:  11px;
  --r-pill:  999px;

  --ring: 0 0 0 4px rgba(245,151,30,0.40);

  /* Motion easing (natural deceleration, no bounce/elastic) */
  --ease:      cubic-bezier(0.25, 1, 0.5, 1);   /* ease-out-quart */
  --ease-snap: cubic-bezier(0.22, 1, 0.36, 1);  /* slightly snappier */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
*[hidden] { display: none !important; }
html, body { height: 100%; }

body {
  font-family: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  background-color: #eadfce;
  background-image: url("./assets/creamy_symmetric_abstract_background.png?v=beige-arc-1");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: scroll;
  padding: 18px;
}

/* Background image is supplied as the full canvas, so no extra glow layers. */
body::before {
  content: none;
}
body::after {
  content: none;
}

body.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 24px;
  background-color: #eadfce;
}

body.login-page::before {
  content: "";
  position: fixed;
  inset: -28px;
  z-index: -2;
  background-image: url("./assets/creamy_symmetric_abstract_background.png?v=beige-arc-1");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: blur(18px) saturate(0.9);
  transform: scale(1.04);
}

body.login-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.34), rgba(255,255,255,0.14)),
    rgba(234,223,206,0.24);
}

.login-shell {
  width: min(100%, 430px);
}

.login-card {
  display: grid;
  gap: 24px;
  width: 100%;
  padding: 34px;
  border-radius: 28px;
  background: rgba(255,255,255,0.68);
  border: 1px solid rgba(255,255,255,0.58);
  border-top-color: rgba(255,255,255,0.9);
  border-left-color: rgba(255,255,255,0.72);
  box-shadow:
    0 30px 80px rgba(150,105,40,0.20),
    0 8px 22px rgba(90,70,45,0.08),
    inset 0 1px 0 rgba(255,255,255,0.75);
  -webkit-backdrop-filter: blur(28px) saturate(155%);
  backdrop-filter: blur(28px) saturate(155%);
}

.login-logo {
  width: 74px;
  height: 74px;
  justify-self: center;
  display: grid;
  place-items: center;
  border-radius: 22px;
  background: rgba(255,255,255,0.54);
  box-shadow: 0 16px 36px rgba(150,105,40,0.16);
}

.login-logo img {
  width: 66px;
  height: 66px;
  object-fit: contain;
}

.login-heading {
  text-align: center;
  display: grid;
  gap: 6px;
}

.login-heading p {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.login-heading h1 {
  font-size: 42px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--ink);
}

.login-form {
  display: grid;
  gap: 14px;
}

.login-form label {
  display: grid;
  gap: 8px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.login-form input {
  width: 100%;
  min-height: 54px;
  padding: 0 16px;
  border-radius: 16px;
  border: 1px solid rgba(120,90,40,0.14);
  background: rgba(255,255,255,0.72);
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

.login-form input:focus {
  outline: none;
  border-color: rgba(245,151,30,0.42);
  box-shadow: var(--ring), inset 0 1px 0 rgba(255,255,255,0.72);
}

.login-submit {
  min-height: 58px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: 18px;
  color: #fff;
  background: var(--accent-grad);
  box-shadow: 0 14px 30px rgba(204,115,18,0.22);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.login-submit:hover {
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow: 0 18px 34px rgba(204,115,18,0.26);
}

.login-submit:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

.login-submit i {
  font-size: 20px;
}

.login-error {
  min-height: 24px;
  color: var(--ops-red-dark);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
  text-align: center;
}

@media (max-width: 560px) {
  body.login-page {
    padding: 16px;
  }

  .login-card {
    padding: 28px 22px;
    border-radius: 24px;
  }

  .login-heading h1 {
    font-size: 36px;
  }
}

.num, .dnum, .ot-stat strong, .count-row .n, .gh-day .gd-num, .gcell, .h1 {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}

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

/* ---------- App frame ---------- */
.shell {
  display: grid; grid-template-columns: 252px 1fr;
  min-height: calc(100vh - 36px);
  background: var(--frame);
  /* heaviest blur on the chrome (layered depth: frame > card > control) */
  -webkit-backdrop-filter: blur(22px) saturate(155%); backdrop-filter: blur(22px) saturate(155%);
  border: 1px solid rgba(255,255,255,0.4);
  border-top-color: rgba(255,255,255,0.8); border-left-color: rgba(255,255,255,0.6);
  border-radius: var(--r-frame);
  box-shadow: var(--e-frame),
    inset 0 1px 0 rgba(255,255,255,0.7),
    inset 0 -1px 0 rgba(150,105,40,0.06);
}

/* ---------- Sidebar (transparent within the frame) ---------- */
.side { padding: 26px 18px; display: flex; flex-direction: column; gap: 26px;
  position: sticky; top: 18px; align-self: start; }
.brand { display: flex; align-items: center; gap: 11px; padding: 2px 8px 0; }
.brand .mark { width: 42px; height: 42px; border-radius: 13px; flex: none; display: grid;
  place-items: center; overflow: hidden; background: transparent;
  box-shadow: 0 8px 18px var(--accent-shadow); }
.brand .mark img { width: 100%; height: 100%; display: block; object-fit: contain; }
.brand b { font-size: 17px; letter-spacing: -0.3px; color: var(--ink); display: block; }
.brand span { font-size: 11px; color: var(--ink-3); font-weight: 500; letter-spacing: 0.3px; }

.nav-group { display: flex; flex-direction: column; gap: 4px; }
.nav-group p { font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; color: var(--ink-3);
  padding: 0 14px 6px; text-transform: uppercase; }
.nav-item { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: var(--r-ctl);
  color: var(--ink-2); font-weight: 600; font-size: 14px; text-decoration: none; cursor: pointer;
  border: none; background: transparent; transition: background .16s ease, color .16s ease, box-shadow .16s ease; }
.nav-item i { font-size: 19px; color: var(--ink-3); transition: color .16s ease; }
.nav-item:hover { background: rgba(255,255,255,0.5); color: var(--ink); }
.nav-item:hover i { color: var(--ink-2); }
/* active = white pill with soft shadow (reference style), amber icon */
.nav-item.active { color: var(--ink); font-weight: 700; background: #fff; box-shadow: var(--e1); }
.nav-item.active i { color: var(--accent); }
/* count badge (e.g. OT/DT) */
.nav-item .badge { margin-left: auto; font-size: 10.5px; font-weight: 800; color: #fff;
  background: var(--accent-grad); min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
  display: grid; place-items: center; }

.me { margin-top: auto; display: none; align-items: center; gap: 11px; padding: 12px;
  border-radius: var(--r-ctl); background: #fff; box-shadow: var(--e1); }
.me.auth-visible { display: flex; }
.avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 13px; color: #fff;
  background: var(--accent-grad); }
.me > div:not(.avatar) { min-width: 0; }
.me b { font-size: 13.5px; display: block; color: var(--ink); }
.me span { font-size: 11.5px; color: var(--ink-3); font-weight: 500; }
.me-sign-out {
  margin-left: auto;
  border: 1px solid rgba(148, 121, 82, 0.24);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.76);
  color: var(--ink-2);
  padding: 7px 10px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(43, 34, 24, 0.04);
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.me-sign-out:hover {
  border-color: rgba(210, 74, 61, 0.34);
  background: #fff;
  color: #b13c31;
}
.me-sign-out:disabled {
  cursor: wait;
  opacity: .68;
}

/* ---------- Main ---------- */
.main { padding: 26px 30px 56px; min-width: 0; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 22px; flex-wrap: wrap; }
.crumbs { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: var(--ink-2); }
.crumbs i { font-size: 14px; color: var(--ink-3); }
.crumbs b { color: var(--ink); font-weight: 700; }
.builder-top-actions { justify-content: flex-end; flex-wrap: wrap; }

/* ---------- Cards ---------- */
.card { background: var(--card);
  -webkit-backdrop-filter: blur(16px) saturate(165%); backdrop-filter: blur(16px) saturate(165%);
  border: 1px solid rgba(255,255,255,0.4);
  border-top-color: rgba(255,255,255,0.85); border-left-color: rgba(255,255,255,0.6);
  border-radius: var(--r-card);
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.7);
  padding: 24px 26px; margin-bottom: 20px; }

/* ---------- Stat strip (reference top row) ---------- */
.statstrip { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.stat { background: var(--card);
  -webkit-backdrop-filter: blur(16px) saturate(165%); backdrop-filter: blur(16px) saturate(165%);
  border: 1px solid rgba(255,255,255,0.4);
  border-top-color: rgba(255,255,255,0.85); border-left-color: rgba(255,255,255,0.6);
  border-radius: var(--r-card); box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.7);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.stat.greet { flex-direction: row; align-items: center; gap: 15px; }
.stat.greet .avatar { width: 50px; height: 50px; font-size: 16px; }
.stat.greet b { font-size: 19px; font-weight: 800; color: var(--ink); display: block; letter-spacing: -0.4px; }
.stat.greet span { font-size: 12.5px; color: var(--ink-2); font-weight: 500; }
.stat-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stat-num { font-size: 33px; font-weight: 800; color: var(--ink); letter-spacing: -1px; line-height: 1; }
.spark { width: 116px; height: 38px; flex: none; }
.spark polyline { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.stat-foot { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.trend { font-weight: 800; }
.trend.up   { color: #3a9450; }
.trend.down { color: #cf4630; }

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

/* ---------- Controls ---------- */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 17px; border-radius: var(--r-pill);
  cursor: pointer; font-family: inherit; font-weight: 600; font-size: 13px; color: var(--ink-2);
  background: #fff; border: 1px solid var(--line); box-shadow: var(--e1);
  transition: transform .12s ease, box-shadow .12s ease, color .12s ease; }
.pill i { font-size: 16px; }
.pill:hover { transform: translateY(-1px); color: var(--ink); box-shadow: var(--e2); }
.pill:active { transform: translateY(0); box-shadow: var(--e1); }
.pill.ghost { background: var(--card-2); border-color: transparent; box-shadow: none; }
/* primary text button: deep amber bg, white text (AA: deep enough + bold) */
.pill.primary { color: #fff; border-color: transparent;
  background: var(--accent-grad);
  text-shadow: none;
  box-shadow: 0 8px 18px var(--accent-shadow), inset 0 0 0 1px rgba(255,255,255,0.18);
  font-weight: 700; }
.pill.primary:hover { color: #fff; }
.pill.danger { background: var(--hot); color: var(--hot-ink); border-color: transparent; }
.pill.sm { padding: 8px 14px; font-size: 12.5px; }
.pill.icon { padding: 0; width: 38px; height: 38px; justify-content: center; }
.pill[disabled] { opacity: .5; cursor: not-allowed; }
.pill[disabled]:hover { transform: none; box-shadow: var(--e1); }

.select, .input { font-family: inherit; font-weight: 600; font-size: 13px; color: var(--ink);
  padding: 10px 15px; border-radius: var(--r-ctl); background: var(--field); border: 1px solid rgba(255,255,255,0.5); }
.select { cursor: pointer; appearance: none; padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
                    linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 11px) center;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.select:focus-visible, .input:focus-visible { border-color: var(--accent); }
.input { width: 100%; }
.input::placeholder { color: #756b58; }  /* AA-safe (~4.5:1 on light) */
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap i { position: absolute; left: 14px; color: var(--ink-3); font-size: 16px; z-index: 1; }
.input-wrap .input { padding-left: 38px; }

.label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.5px; color: var(--ink-3); text-transform: uppercase; }
.h1 { font-size: 36px; letter-spacing: -1.2px; font-weight: 800; color: var(--ink); }
.muted { color: var(--ink-2); font-weight: 500; }

.seg { display: inline-flex; gap: 4px; padding: 5px; border-radius: var(--r-pill); background: var(--card-2); }
.seg button { border: none; background: transparent; cursor: pointer; font-family: inherit; font-weight: 600;
  font-size: 12.5px; color: var(--ink-2); padding: 8px 16px; border-radius: var(--r-pill); }
.seg button.on { color: var(--ink); font-weight: 700; background: #fff; box-shadow: var(--e1); }

.chip-filter { cursor: pointer; font-family: inherit; font-weight: 700; font-size: 12.5px;
  padding: 9px 16px; border-radius: var(--r-pill); border: 1px solid transparent; }
.chip-filter.care { background: var(--care); color: var(--care-ink); }
.chip-filter.med  { background: var(--med);  color: var(--med-ink); }

/* ---------- Planner header ---------- */
.weekhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.monthnav { display: flex; align-items: center; gap: 12px; margin: 6px 0 16px; }
.weeknav { display: flex; align-items: center; gap: 12px; }
.weeknav .w { font-size: 13.5px; color: var(--ink-2); font-weight: 500; }
.weeknav .w b { color: var(--ink); font-weight: 700; }
.periodnav { display: flex; align-items: center; gap: 8px; min-width: 0; }
.periodnav[hidden] { display: none; }
.periodnav [data-overtime-range] { min-width: 190px; justify-content: center; }
.dots { display: flex; gap: 6px; margin-top: 18px; align-items: center; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(180,140,80,0.30); }
.dots i.on { background: var(--accent-grad); width: 20px; border-radius: var(--r-pill); }
.dots .muted {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 700;
}

.weekly-nav-modules {
  width: 100%;
  min-height: 274px;
  margin: 0 auto 20px;
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 10px;
}
.weekly-nav-card {
  width: 100%;
  margin-bottom: 0;
  padding: 14px 18px;
  border-radius: var(--r-card);
  text-align: center;
}
.weekly-month-card { max-width: 440px; }
.weekly-week-row {
  width: 100%;
  min-height: 164px;
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 10px;
}
.weekly-week-card {
  width: min(420px, 100%);
  max-width: none;
}
.weekly-left-stack,
.weekly-right-stack {
  position: absolute;
  z-index: 2;
  display: grid;
  justify-items: start;
  gap: 10px;
}
.weekly-left-stack {
  left: 0;
  top: 16px;
  width: 268px;
}
.weekly-right-stack {
  right: 0;
  top: 16px;
  width: 268px;
}
.weekly-side-card,
.weekly-today-ot-card,
.weekly-swap-card,
.weekly-build-card,
.weekly-review-card {
  border: 1px solid rgba(255,255,255,0.58);
  border-radius: var(--r-card);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.84), rgba(250,246,238,0.70)),
    rgba(255,255,255,0.70);
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.78);
  color: var(--ink);
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
}
.weekly-side-card:hover,
.weekly-today-ot-card:hover,
.weekly-swap-card:hover,
.weekly-build-card:hover,
.weekly-review-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--e2), inset 0 1px 0 rgba(255,255,255,0.86);
}
.weekly-side-card:active,
.weekly-today-ot-card:active,
.weekly-swap-card:active,
.weekly-build-card:active,
.weekly-review-card:active {
  transform: translateY(0) scale(0.99);
  box-shadow: var(--e1);
}
.weekly-side-card {
  width: 238px;
  min-width: 0;
  min-height: 78px;
  display: grid;
  gap: 8px;
  align-content: center;
  padding: 13px 14px;
  text-align: left;
}
.weekly-card-kicker {
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.7px;
  line-height: 1;
  text-transform: uppercase;
}
.weekly-today-ot-card {
  position: relative;
  width: 268px;
  min-height: 219px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-areas:
    "icon copy"
    "status status";
  gap: 14px;
  align-items: center;
  padding: 20px 20px 18px;
  text-align: left;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.92), rgba(255,246,232,0.78)),
    #fff9ef;
  box-shadow:
    var(--e2),
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 5px 0 0 rgba(200,84,59,0.56);
}
.today-ot-count-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  min-width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--ops-red);
  color: #fff;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 0 0 2px #fff, var(--ops-shadow);
}
.today-ot-count-badge[hidden] {
  display: none;
}
.weekly-today-ot-card[data-state="clear"] {
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.86), inset 5px 0 0 rgba(79,138,61,0.56);
}
.weekly-today-ot-card[data-state="stale"],
.weekly-today-ot-card[data-state="cold"] {
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.86), inset 5px 0 0 rgba(212,128,20,0.62);
}
.today-ot-icon {
  grid-area: icon;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: var(--ops-red);
  box-shadow: none;
}
.weekly-today-ot-card[data-state="clear"] .today-ot-icon {
  background: var(--ops-green);
}
.weekly-today-ot-card[data-state="stale"] .today-ot-icon,
.weekly-today-ot-card[data-state="cold"] .today-ot-icon {
  background: var(--ops-amber);
}
.today-ot-icon i { font-size: 27px; }
.today-ot-copy {
  grid-area: copy;
  min-width: 0;
  padding-right: 26px;
}
.today-ot-copy b {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.02;
}
.today-ot-copy small {
  display: block;
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}
.today-ot-status {
  grid-area: status;
  width: max-content;
  max-width: 100%;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px var(--ops-border);
}
.today-ot-status i { font-size: 16px; }
.weekly-today-ot-card:not([data-alert-count="0"]) .today-ot-status {
  background: #fff;
  color: var(--ops-red-dark);
  box-shadow: inset 0 0 0 1px rgba(216,66,53,0.24);
}
.weekly-swap-card {
  position: relative;
  width: 268px;
  min-height: 178px;
  justify-self: start;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  grid-template-areas:
    "icon copy"
    "status status";
  gap: 14px;
  align-items: center;
  padding: 20px 20px 18px;
  text-align: left;
  border-color: rgba(78,128,193,0.48);
  background:
    linear-gradient(145deg, rgba(239,246,255,0.94), rgba(248,252,255,0.80)),
    #f5fbff;
  box-shadow:
    var(--e2),
    inset 0 1px 0 rgba(255,255,255,0.88),
    inset 5px 0 0 rgba(64,126,201,0.56);
}
.weekly-swap-card[data-state="clear"] {
  border-color: rgba(79,138,61,0.34);
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.86), inset 5px 0 0 rgba(79,138,61,0.56);
}
.weekly-swap-card[data-state="cold"] {
  border-color: rgba(212,128,20,0.38);
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.86), inset 5px 0 0 rgba(212,128,20,0.62);
}
.weekly-swap-count-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  min-width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  padding: 0 9px;
  border-radius: var(--r-pill);
  background: var(--ops-red);
  color: #fff;
  font-size: 15px;
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 0 0 2px #fff, var(--ops-shadow);
}
.weekly-swap-count-badge[hidden] {
  display: none;
}
.weekly-swap-icon {
  grid-area: icon;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: var(--ops-blue);
  box-shadow: none;
}
.weekly-swap-icon i { font-size: 27px; }
.weekly-swap-card[data-state="clear"] .weekly-swap-icon {
  background: var(--ops-green);
}
.weekly-swap-card[data-state="cold"] .weekly-swap-icon {
  background: var(--ops-amber);
}
.weekly-swap-copy {
  grid-area: copy;
  min-width: 0;
  padding-right: 26px;
}
.weekly-swap-copy b {
  display: block;
  margin-top: 6px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
  line-height: 1.02;
}
.weekly-swap-copy small {
  display: block;
  margin-top: 8px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.25;
}
.weekly-swap-status {
  grid-area: status;
  width: max-content;
  max-width: 100%;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px var(--ops-border);
}
.weekly-swap-status i { font-size: 16px; }
.weekly-swap-card:not([data-swap-count="0"]) .weekly-swap-status {
  background: #fff;
  color: var(--ops-blue-ink);
  box-shadow: inset 0 0 0 1px rgba(47,111,214,0.24);
}
.weekly-ot-card .badge-synced {
  width: max-content;
  padding: 5px 9px;
  font-size: 10.5px;
}
.weekly-ot-counts {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.weekly-ot-counts .ot-stat {
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 10.5px;
}
.weekly-ot-counts .ot-stat strong { font-size: 14px; }
.weekly-headsup-card {
  border-color: rgba(255,255,255,0.60);
  width: 268px;
  margin-left: 0;
}
.weekly-alert-chip {
  width: max-content;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  color: var(--warn-ink);
  background: var(--warn);
  font-size: 10.5px;
  font-weight: 850;
}
.weekly-alert-chip i { font-size: 13px; }
.weekly-headsup-card b {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.12;
}
.weekly-headsup-card small {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
}
.weekly-action-pills {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}
.weekly-center-actions {
  width: min(420px, 100%);
  justify-content: center;
}
.weekly-action-pills .pill {
  min-height: 32px;
  padding: 7px 10px;
  font-size: 11.5px;
  box-shadow: var(--e1);
}
.weekly-action-pills .weekly-add-open-shift {
  min-width: 208px;
  min-height: 41px;
  justify-content: center;
  padding: 10px 22px 12px;
  border-bottom: 4px solid var(--accent);
  color: var(--ink);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.96), rgba(255,249,238,0.78)),
    #fff;
  box-shadow: var(--e2), inset 0 -1px 0 rgba(224,154,45,0.20);
  font-size: 13px;
  font-weight: 850;
}
.weekly-action-pills .weekly-add-open-shift i {
  color: var(--accent-2);
  font-size: 18px;
}
.weekly-action-pills .weekly-delete-month {
  min-width: 154px;
  min-height: 41px;
  justify-content: center;
  padding: 10px 18px 12px;
  border-bottom: 4px solid rgba(141,33,24,0.62);
  background: #fff;
  color: #8d2118;
  border-color: rgba(141,33,24,0.38);
  box-shadow: var(--e1), inset 0 0 0 1px rgba(141,33,24,0.10);
  font-size: 13px;
  font-weight: 850;
}
.weekly-action-pills .weekly-delete-month:not(:disabled):hover {
  border-color: rgba(141,33,24,0.74);
  box-shadow: var(--e2), inset 0 0 0 2px rgba(141,33,24,0.18);
}
.weekly-action-pills .weekly-delete-month i { font-size: 17px; }
.weekly-build-card {
  width: 238px;
  min-height: 108.5px;
  justify-self: end;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 13px 14px;
}
.build-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: var(--accent-grad);
  box-shadow: 0 8px 18px var(--accent-shadow), inset 0 0 0 1px rgba(255,255,255,0.18);
}
.build-icon i { font-size: 19px; }
.weekly-build-card b {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.13;
}
.weekly-build-card small {
  display: block;
  margin-top: 5px;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 700;
}
.weekly-nav-card .label { display: block; margin-bottom: 8px; }
.weekly-nav-card .monthnav,
.weekly-nav-card .weeknav {
  justify-content: center;
  margin: 0;
}
.weekly-month-card .monthnav { gap: 18px; }
.weekly-month-card .h1 {
  min-width: 168px;
  text-align: center;
  font-size: 32px;
  letter-spacing: -0.8px;
}
.weekly-week-card .weeknav {
  gap: 10px;
  flex-wrap: nowrap;
}
.weekly-week-card [data-scheduler-nav="today"] {
  color: var(--ink);
  background: rgba(255,255,255,0.86);
  border-color: rgba(245,151,30,0.42);
  box-shadow: inset 0 0 0 1px rgba(245,151,30,0.18), inset 0 -4px 0 #f5971e, 0 10px 22px rgba(245,151,30,0.15);
  font-weight: 800;
}
.weekly-week-card [data-scheduler-nav="today"]:hover {
  box-shadow: inset 0 0 0 1px rgba(245,151,30,0.24), inset 0 -4px 0 #f28b0c, 0 13px 26px rgba(245,151,30,0.22);
}
.weekly-week-card .weeknav .w {
  min-width: 174px;
  text-align: center;
  font-size: 14.5px;
}
.weekly-week-card .dots {
  justify-content: center;
  margin-top: 11px;
}
.weekly-review-card {
  position: relative;
  left: 0;
  width: 268px;
  justify-self: start;
  min-height: 0;
  height: 115px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 13px 14px;
  text-align: left;
  border-color: rgba(79,138,61,0.52);
  box-shadow: var(--e1), inset 0 0 0 3px rgba(79,138,61,0.18), inset 0 1px 0 rgba(255,255,255,0.78);
  background:
    linear-gradient(145deg, rgba(233,247,225,0.94), rgba(247,253,244,0.82)),
    var(--recommend-soft);
}
.weekly-review-card:hover {
  box-shadow: var(--e2), inset 0 0 0 3px rgba(79,138,61,0.22), inset 0 1px 0 rgba(255,255,255,0.84);
}
.review-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(145deg, #83bd72 0%, #5d9a4a 58%, #3f7732 100%);
  box-shadow: 0 8px 18px rgba(79,138,61,0.20), inset 0 0 0 1px rgba(255,255,255,0.20);
}
.review-icon i { font-size: 19px; }
.review-copy { min-width: 0; }
.review-copy b {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.12;
}
.review-copy small {
  display: block;
  margin-top: 6px;
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .weekly-nav-modules {
    width: 100%;
    min-height: 0;
  }
  .weekly-left-stack,
  .weekly-right-stack {
    position: static;
    width: min(440px, 100%);
  }
  .weekly-left-stack { order: 3; }
  .weekly-right-stack { order: 4; }
  .weekly-action-pills { justify-content: center; }
  .weekly-side-card,
  .weekly-headsup-card,
  .weekly-today-ot-card,
  .weekly-swap-card,
  .weekly-build-card,
  .weekly-review-card {
    left: auto;
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

.scheduler-control-card { padding: 26px; }
.scheduler-control-grid {
  display: grid;
  grid-template-columns: minmax(230px, 0.85fr) minmax(300px, 1fr) minmax(250px, 0.85fr);
  gap: 18px;
  align-items: center;
}
.scheduler-nav-stack { min-width: 0; }
.scheduler-nav-stack .monthnav { margin-bottom: 12px; }
.scheduler-filter-stack {
  display: grid;
  gap: 13px;
  align-content: center;
  min-width: 0;
}
.scheduler-filter-row,
.scheduler-action-row { align-items: center; }
.unit-filter { gap: 10px; }
.unit-filter .select { min-width: 142px; }
.scheduler-search {
  flex: 1 1 230px;
  min-width: 220px;
  max-width: none;
}
.scheduler-action-row .pill { min-height: 36px; }
.scheduler-watch-panel {
  align-self: stretch;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 15px 16px;
  border-radius: var(--r-ctl);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.78), rgba(250,246,238,0.72)),
    var(--card-2);
  box-shadow: inset 0 0 0 1px rgba(120,90,40,0.08);
}
.scheduler-watch-panel .otwatch { width: 100%; gap: 12px; }
.scheduler-watch-panel .otwatch .grp { gap: 10px; }
.scheduler-watch-panel .ot-stat { padding: 9px 13px; }
.scheduler-watch-panel .ot-stat strong { font-size: 18px; }
.scheduler-watch-panel .pill { min-height: 36px; padding-inline: 14px; }

.actions { display: flex; flex-direction: column; gap: 11px; min-width: 290px; }
.builder-setup-card {
  min-width: 320px;
  max-width: 390px;
  min-height: 92px;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-areas:
    "icon copy"
    "icon preview";
  gap: 7px 13px;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--r-ctl);
  border: 1px solid rgba(255,255,255,0.66);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.90), rgba(255,248,232,0.76)),
    rgba(255,255,255,0.76);
  box-shadow: var(--e1), inset 4px 0 0 rgba(224,154,45,0.58), inset 0 1px 0 rgba(255,255,255,0.9);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.builder-setup-card:hover { transform: translateY(-1px); box-shadow: var(--e2), inset 4px 0 0 rgba(224,154,45,0.72); }
.builder-setup-card .setup-icon {
  grid-area: icon;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #8a5a05;
  background: linear-gradient(145deg, #fff0c8, #ffd98f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72), 0 8px 18px rgba(196,128,19,0.18);
}
.builder-setup-card .setup-icon i { font-size: 23px; }
.setup-copy { grid-area: copy; min-width: 0; }
.setup-copy .setup-eyebrow {
  display: block;
  margin-bottom: 2px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: #9a6a11;
}
.setup-copy b { display: block; font-size: 15px; font-weight: 900; color: var(--ink); line-height: 1.1; }
.setup-copy small { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 800; color: var(--ink-2); }
.setup-preview {
  grid-area: preview;
  justify-self: start;
  max-width: 100%;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.82);
  color: #7f5a18;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: inset 0 0 0 1px rgba(224,154,45,0.15);
}

#builder-prototype-ops {
  width: 100%;
  margin-top: 18px;
}
.builder-ops-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  width: 100%;
}
.builder-ops-card {
  min-height: 94px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  grid-template-areas:
    "icon copy status"
    "icon copy actions";
  gap: 8px 14px;
  align-items: center;
  padding: 16px 18px;
  border-radius: var(--r-ctl);
  border: 1px solid rgba(255,255,255,0.64);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.92), rgba(250,247,240,0.76)),
    rgba(255,255,255,0.76);
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.88);
  color: var(--ink);
  font: inherit;
  text-align: left;
}
button.builder-ops-card { cursor: pointer; }
.builder-ops-card:hover { transform: translateY(-1px); box-shadow: var(--e2), inset 0 1px 0 rgba(255,255,255,0.9); }
.builder-ops-card.reviewing { box-shadow: var(--e1), inset 4px 0 0 rgba(245,151,30,0.68), inset 0 1px 0 rgba(255,255,255,0.88); }
.builder-ops-card.confirmed { box-shadow: var(--e1), inset 4px 0 0 rgba(74,122,49,0.58), inset 0 1px 0 rgba(255,255,255,0.88); }
.builder-status-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}
.ops-icon {
  grid-area: icon;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  font-size: 24px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18), 0 8px 18px rgba(70,45,12,0.10);
}
.ops-icon.amber { background: var(--accent-grad); }
.ops-icon.green { background: linear-gradient(145deg, #83bd72, #4f8a3d); }
.ops-icon.need {
  color: #4d4200;
  background: linear-gradient(145deg, #fff6a1, #f0d95d);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.24), 0 8px 18px rgba(190,150,0,0.10);
}
.ops-icon.import { background: linear-gradient(145deg, #62baa2, #2e806e); }
.ops-copy { grid-area: copy; min-width: 0; }
.ops-eyebrow {
  display: block;
  margin-bottom: 3px;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  color: var(--ink-3);
}
.ops-copy b { display: block; font-size: 16px; line-height: 1.1; font-weight: 900; color: var(--ink); }
.ops-copy small { display: block; margin-top: 5px; font-size: 11.5px; line-height: 1.35; font-weight: 760; color: var(--ink-2); }
.ops-status {
  grid-area: status;
  justify-self: end;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.80);
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px rgba(120,90,40,0.10);
  font-size: 10.5px;
  font-weight: 900;
  white-space: nowrap;
}
.ops-status.need {
  background: #fff470;
  color: #4d4200;
  box-shadow: inset 0 0 0 1px rgba(190,150,0,0.18);
}
.ops-actions { grid-area: actions; justify-self: end; }
.ops-actions .pill { min-height: 32px; padding: 8px 12px; white-space: nowrap; }
.ops-inline-note {
  align-self: center;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
/* reference-style: white cards with an amber icon (not solid-orange text buttons) */
.action-card { display: flex; align-items: center; gap: 14px; text-align: left; padding: 15px 17px;
  border-radius: var(--r-ctl); cursor: pointer; font-family: inherit; width: 100%; text-decoration: none;
  border: 1px solid rgba(255,255,255,0.5); background: #fff; box-shadow: var(--e1);
  transition: transform .12s ease, box-shadow .12s ease; }
.action-card:hover { transform: translateY(-2px); box-shadow: var(--e2); }
.action-card:active { transform: translateY(0); box-shadow: var(--e1); }
.action-card.primary i { color: #fff; background: var(--accent-grad);
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  box-shadow: 0 7px 15px var(--accent-shadow), inset 0 0 0 1px rgba(255,255,255,0.18); }
.action-card.secondary i { color: var(--accent); }
.action-card i { font-size: 24px; color: var(--accent); }
.action-card b { display: block; font-size: 14.5px; font-weight: 700; color: var(--ink); }
.action-card span { font-size: 12px; color: var(--ink-2); font-weight: 500; }

/* ---------- OT / DT watch ---------- */
.otwatch { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.otwatch .grp { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ot-stat { display: flex; align-items: baseline; gap: 6px; padding: 10px 17px; border-radius: var(--r-chip);
  font-weight: 600; font-size: 12.5px; color: var(--ink-2); background: var(--card-2); }
.ot-stat strong { font-size: 20px; font-weight: 800; }
.ot-stat.dt { background: var(--hot); color: var(--hot-ink); }
.ot-stat.ot { background: var(--warn); color: var(--warn-ink); }
.ot-stat.near { opacity: .5; }
.badge-synced, .badge-readonly { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px;
  font-weight: 700; padding: 7px 12px; border-radius: var(--r-pill); }
.badge-synced { color: var(--safe-ink); background: var(--safe); }
.badge-synced i { font-size: 14px; }
.badge-readonly { color: var(--warn-ink); background: var(--warn); }

.headsup { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.constraint { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 17px;
  border-radius: var(--r-ctl); cursor: pointer; font-family: inherit; background: var(--warn); border: none; }
.constraint i { font-size: 19px; color: var(--warn-ink); }
.constraint b { font-size: 13px; color: var(--warn-ink); font-weight: 700; display: block; }
.constraint span { font-size: 11.5px; color: var(--ink-2); font-weight: 500; }
.modal-panel.headsup-panel { width: min(620px, 100%); }
.heads-up-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.heads-up-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--r-ctl);
  background:
    linear-gradient(145deg, rgba(255,246,222,0.92), rgba(255,255,255,0.76)),
    var(--warn);
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.80);
}
.heads-up-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--warn-ink);
  background: var(--warn);
}
.heads-up-icon i { font-size: 21px; }
.heads-up-item b {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
}
.heads-up-item span {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 700;
}

/* ---------- Weekly grid ---------- */
.scheduler-search-strip {
  display: flex;
  justify-content: flex-start;
  margin-top: 26px;
  margin-bottom: -10px;
}
.scheduler-search-control {
  width: min(360px, 100%);
  display: grid;
  gap: 7px;
}
.scheduler-search-input-wrap {
  min-height: 42px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.94), rgba(255,248,232,0.78)),
    #fff;
  border: 1px solid rgba(255,255,255,0.72);
  box-shadow: var(--e1), inset 0 -3px 0 rgba(224,154,45,0.18);
}
.scheduler-search-input-wrap i {
  color: var(--accent-2);
  font-size: 18px;
}
.scheduler-search-input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
}
.scheduler-search-input::placeholder { color: rgba(96,88,73,0.62); }
.weekgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin-top: 34px; }
.daycol,
.calendar-day-shell { position: relative; min-width: 0; }
.daycol { display: flex; flex-direction: column; gap: 11px; }
.dayhead { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px;
  border-radius: var(--r-ctl); background: #fff; box-shadow: var(--e1); min-width: 0; position: relative; }
.dayhead .dow { font-size: 11px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.3px; }
.dayhead .dnum { font-size: 21px; font-weight: 800; color: var(--ink); line-height: 1; }
.dayhead .dmon { font-size: 10px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.4px; }
/* today = integrated amber tab, not a floating badge */
.calendar-day-shell.today {
  isolation: isolate;
}
.calendar-day-shell.today::before,
.calendar-day-shell.today::after {
  content: none;
}
.daycol.today .dayhead,
.calendar-day-shell.today .dayhead {
  overflow: hidden;
  z-index: 1;
  padding: 22px 16px 9px;
  border: 1px solid rgba(238,137,20,0.30);
  background:
    linear-gradient(145deg, rgba(253,231,206,0.98), rgba(250,211,164,0.96)),
    #fbd9ad;
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.48);
}
.daycol.today .dayhead .dnum,
.calendar-day-shell.today .dayhead .dnum { color: var(--accent-ink); }
.daycol.today .dayhead .dow,
.daycol.today .dayhead .dmon,
.calendar-day-shell.today .dayhead .dow,
.calendar-day-shell.today .dayhead .dmon { color: var(--accent-ink); }
.today-tag {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 3;
  min-height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 18px 5px;
  border-radius: 0 0 14px 14px;
  color: #fff;
  background: var(--accent-grad);
  box-shadow: 0 7px 14px var(--accent-shadow), inset 0 0 0 1px rgba(255,255,255,0.18);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

.weekgrid-lanes {
  display: block;
  margin-top: 42px;
}
.draft-lock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent-ink);
  font-size: 12px;
  font-weight: 900;
}
.weekgrid-draft-locked {
  display: block;
  margin-top: 38px;
}
.scheduler-draft-lock {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 780px;
  margin: 0 auto;
  padding: 26px 30px;
  border: 1px solid rgba(238,137,20,0.26);
  border-radius: var(--r-card);
  background: rgba(255,255,255,0.84);
  box-shadow: var(--e1);
}
.scheduler-draft-lock .label {
  margin: 0 0 5px;
  color: var(--accent-ink);
}
.scheduler-draft-lock h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.08;
}
.scheduler-draft-lock p:not(.label) {
  max-width: 620px;
  margin: 10px 0 18px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
}
.draft-lock-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  color: #fff;
  background: var(--accent-grad);
  box-shadow: var(--e2);
}
.draft-lock-icon i {
  font-size: 27px;
}
.weekgrid-days,
.role-days-row {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.role-lane {
  margin-top: 12px;
}
.role-day-stack {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.weekgrid-lanes .count-row {
  min-height: 34px;
  border: 1px solid transparent;
  box-shadow: none;
}
.weekgrid-lanes .role-care .count-row {
  background: var(--care);
  border-color: rgba(55,107,209,0.18);
}
.weekgrid-lanes .role-care .count-row .lbl,
.weekgrid-lanes .role-care .count-row .n {
  color: var(--care-ink);
}
.weekgrid-lanes .role-med .count-row {
  background: var(--med);
  border-color: rgba(28,111,99,0.18);
}
.weekgrid-lanes .role-med .count-row .lbl,
.weekgrid-lanes .role-med .count-row .n {
  color: var(--med-ink);
}
.role-day-empty {
  min-height: 2px;
}

.daystack { display: flex; flex-direction: column; gap: 9px; }
.count-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px;
  border-radius: var(--r-chip); background: var(--card-2); }
.count-row .lbl { font-size: 10.5px; font-weight: 700; color: var(--ink-3); letter-spacing: 0.3px; }
.count-row .n { font-size: 14px; font-weight: 800; color: var(--accent-ink); }

.shift { position: relative; isolation: isolate; overflow: visible; text-align: left; cursor: pointer; font-family: inherit; padding: 11px 13px; border-radius: var(--r-ctl);
  background: #fff; box-shadow: var(--e1); border: 1px solid rgba(120,90,40,0.08); border-left: 4px solid transparent;
  display: flex; flex-direction: column; gap: 3px; min-width: 0; transition: transform .12s ease, box-shadow .12s ease; }
.shift:hover { transform: translateY(-2px); box-shadow: var(--e2); }
.shift:active { transform: translateY(0); box-shadow: var(--e1); }
.shift .time { font-size: 10.5px; font-weight: 600; color: var(--ink-3); letter-spacing: 0.1px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.shift .time-text { min-width: 0; }
.shift .who { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.2; min-width: 0; overflow-wrap: anywhere; }
.flag { font-size: 9px; font-weight: 800; letter-spacing: 0.3px; padding: 2px 5px 2px 7px;
  border-radius: var(--r-pill); margin-left: auto; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.flag.ot { background: #f8d8d0; color: #a73522; }
.flag.dt { background: #8d2118; color: #fff8f2; }
.flag.near { background: #ffe2b8; color: #a35a0d; }
.flag.callout { background: rgba(255,255,255,0.92); color: #8d2118; }
.flag-scope { min-width: 15px; height: 15px; padding: 0 4px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; justify-content: center; font-size: 8px; line-height: 1; background: rgba(255,255,255,0.76); color: currentColor; }
.shift.is-ot { background: #fffaf8; border-color: rgba(200,84,59,0.30); border-left-color: #c8543b; }
.shift.is-dt { background: #fff6f4; border-color: rgba(141,33,24,0.42); border-left-color: #8d2118; }
.shift.is-near { background: #fffaf1; border-color: rgba(212,128,20,0.34); border-left-color: #d48014; }
.shift.is-search-match {
  border-color: rgba(199,103,0,0.92);
  outline: 4px solid rgba(255,184,56,0.72);
  outline-offset: 2px;
  box-shadow: var(--e3), 0 0 0 8px rgba(255,221,128,0.34);
}
.shift.is-search-focus {
  transform: translateY(-3px);
  outline-color: rgba(255,169,18,0.94);
  box-shadow: var(--e3), 0 0 0 10px rgba(255,204,80,0.44), 0 0 26px rgba(199,103,0,0.26);
}
.shift.is-called-out {
  background:
    linear-gradient(145deg, #a72a20, #7f1d16);
  border-color: rgba(141,33,24,0.88);
  border-left-color: #4f100c;
  box-shadow: var(--e2), inset 0 0 0 1px rgba(255,255,255,0.16);
}
.shift.is-called-out .time,
.shift.is-called-out .who {
  color: #fff7f3;
}
.shift.is-called-out .time-text { opacity: 0.88; }
.shift.is-called-out:hover { box-shadow: var(--e3), inset 0 0 0 1px rgba(255,255,255,0.20); }
.shift.is-clocked-now {
  --clocked-pulse-rgb: 80, 130, 230;
  box-shadow: var(--e2), inset 0 0 0 1px rgba(var(--clocked-pulse-rgb),0.18);
  transform: translateY(-1px);
  animation: clockedCardPulse 1.75s var(--ease) infinite;
}
.shift.is-clocked-now::before {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid rgba(var(--clocked-pulse-rgb),0.54);
  border-radius: calc(var(--r-ctl) + 5px);
  z-index: 0;
  pointer-events: none;
  background: transparent;
  opacity: 0.72;
  transform: scale(1);
  animation: clockedOutwardPulse 1.75s var(--ease) infinite;
}
.shift.is-clocked-now:hover {
  transform: translateY(-3px);
}
.shift.is-clocked-now.is-ot {
  background: #fffaf8;
  border-color: rgba(200,84,59,0.30);
  border-left-color: #c8543b;
}
.shift.is-clocked-now.is-dt {
  background: #fff6f4;
  border-color: rgba(141,33,24,0.42);
  border-left-color: #8d2118;
}
.shift > * { position: relative; z-index: 1; }

@media (max-width: 760px) {
  body {
    overflow-x: hidden;
    padding: 10px;
  }

  .shell {
    width: 100%;
    min-height: calc(100vh - 20px);
    border-radius: 22px;
  }

  .side {
    padding: 22px 16px 16px;
    gap: 16px;
  }

  .main,
  .weekly-nav-modules,
  .weekly-left-stack,
  .weekly-right-stack,
  .weekly-week-row,
  .weekly-action-pills,
  .weekgrid-lanes,
  .weekgrid-days,
  .role-days-row,
  .role-day-stack {
    min-width: 0;
    max-width: 100%;
  }

  .main {
    padding: 18px 14px 36px;
  }

  .weekly-nav-modules {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    gap: 12px;
  }

  .weekly-week-row,
  .weekly-action-pills {
    grid-template-columns: minmax(0, 1fr);
  }

  .weekly-week-row {
    min-height: 0;
    display: grid;
    gap: 12px;
  }

  .weeknav {
    flex-wrap: wrap;
    justify-content: center;
  }

  .periodnav {
    width: 100%;
    justify-content: center;
  }

  .periodnav [data-overtime-range] {
    flex: 1 1 190px;
    min-width: 0;
  }

  .weeknav .w {
    flex: 1 1 170px;
    text-align: center;
  }

  .weekly-left-stack,
  .weekly-right-stack,
  .weekly-week-row,
  .weekly-action-pills,
  .weekly-month-card,
  .weekly-week-card,
  .weekly-side-card,
  .weekly-swap-card,
  .weekly-build-card,
  .weekly-review-card {
    justify-self: stretch;
    min-width: 0;
    max-width: 100%;
    width: auto;
  }

  .weekly-action-pills {
    display: grid;
  }

  .weekly-action-pills .pill {
    min-width: 0;
    max-width: 100%;
    width: 100%;
    justify-content: center;
  }

  .weekly-review-card {
    height: auto;
    min-height: 84px;
    transform: none;
  }

  .weekly-review-card:hover { transform: translateY(-1px); }
  .weekly-review-card:active { transform: translateY(0) scale(0.99); }

  .weekgrid-days,
  .role-days-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .dayhead,
  .count-row,
  .shift {
    width: 100%;
    min-width: 0;
  }

  .shift .time {
    align-items: flex-start;
  }

  .flag {
    margin-left: 0;
    max-width: 100%;
  }
}

/* ---------- Monthly builder ---------- */
.section-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  margin-bottom: 18px; flex-wrap: wrap; }
.section-title h2 { font-size: 17px; font-weight: 700; color: var(--ink); }
.section-title p { font-size: 12.5px; color: var(--ink-2); font-weight: 500; max-width: 520px; margin-top: 4px; line-height: 1.5; }
.schedule-canvas-card {
  position: relative;
  padding-top: 30px;
}
.schedule-canvas-card .section-title {
  padding-right: 178px;
}
.canvas-expand {
  position: absolute;
  top: 22px;
  right: 26px;
  min-height: 50px;
  padding: 13px 23px;
  font-size: 15px;
  font-weight: 800;
  z-index: 24;
}
.canvas-expand i {
  font-size: 20px;
}
.builder-zoom-controls {
  display: none;
}

html.clay-builder-canvas-expanded,
body.clay-builder-canvas-expanded {
  overflow: hidden;
}

.schedule-canvas-card.is-expanded {
  position: fixed;
  inset: 6px 6px 2px;
  z-index: 260;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 12px;
  border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255,253,249,0.98), rgba(255,246,234,0.96)),
    var(--card);
}
.schedule-canvas-card.is-expanded .section-title {
  display: none;
}
.schedule-canvas-card.is-expanded .canvas-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable both-edges;
  margin-top: 52px;
  padding: 8px 10px 12px;
}
.schedule-canvas-card.is-expanded .grid-table {
  width: 100%;
  min-width: max(1560px, 100%);
  table-layout: fixed;
  border-spacing: 3px 1px;
  zoom: var(--builder-canvas-zoom, 1);
}
.schedule-canvas-card.is-expanded .builder-staff-col {
  width: 196px;
}
.schedule-canvas-card.is-expanded .builder-day-col {
  width: auto;
}
.schedule-canvas-card.is-expanded .canvas-expand {
  position: absolute;
  top: 18px;
  right: 18px;
}
.schedule-canvas-card.is-expanded .builder-zoom-controls {
  position: absolute;
  top: 18px;
  right: 166px;
  z-index: 24;
  display: flex;
  align-items: center;
  gap: 7px;
}
.builder-zoom-controls .pill {
  min-height: 38px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 850;
  box-shadow: var(--e1);
}
.schedule-canvas-card.is-expanded .builder-search.is-expanded-search {
  position: absolute;
  top: 18px;
  left: 18px;
  z-index: 25;
  width: clamp(250px, 26vw, 390px);
}
.schedule-canvas-card.is-expanded .builder-search.is-expanded-search .builder-search-field {
  min-height: 44px;
  padding: 7px 10px 7px 14px;
}
.schedule-canvas-card.is-expanded .builder-search.is-expanded-search .builder-search-popover {
  left: 0;
  right: auto;
}
.schedule-canvas-card.is-expanded .gh-month {
  min-width: 0;
  padding: 3px 8px !important;
}
.schedule-canvas-card.is-expanded .gh-month b {
  font-size: 12px;
  line-height: 1;
}
.schedule-canvas-card.is-expanded .gh-month span {
  font-size: 8.6px;
  line-height: 1;
}
.schedule-canvas-card.is-expanded .gh-day {
  width: auto;
  padding: 0 !important;
}
.schedule-canvas-card.is-expanded .gh-day .gd-num {
  font-size: 10.5px;
  line-height: 1;
}
.schedule-canvas-card.is-expanded .gh-day .gd-dow {
  font-size: 6.8px;
  line-height: 1.05;
}
.schedule-canvas-card.is-expanded .grid-section-row td {
  padding-top: 1px;
  padding-bottom: 0;
}
.schedule-canvas-card.is-expanded .grid-section-band {
  min-height: 16px;
  gap: 6px;
  padding: 1px 7px;
  border-radius: 6px;
}
.schedule-canvas-card.is-expanded .grid-section-label {
  width: 186px;
  min-width: 186px;
  gap: 6px;
}
.schedule-canvas-card.is-expanded .grid-section-label b {
  font-size: 8.8px;
  line-height: 1;
}
.schedule-canvas-card.is-expanded .grid-section-label span {
  font-size: 7.4px;
  line-height: 1;
}
.schedule-canvas-card.is-expanded .grid-section-fill {
  min-width: 0;
}
.schedule-canvas-card.is-expanded .staff-cell {
  min-width: 0;
  width: 100%;
  min-height: 21px;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 7px;
}
.schedule-canvas-card.is-expanded .staff-cell .avatar {
  width: 15px;
  height: 15px;
  font-size: 6px;
}
.schedule-canvas-card.is-expanded .staff-cell b {
  max-width: 154px;
  font-size: 8.4px;
  line-height: 1;
}
.schedule-canvas-card.is-expanded .staff-cell span {
  display: none;
}
.schedule-canvas-card.is-expanded .training-row .staff-cell.training-staff-cell {
  padding-right: 56px;
}
.schedule-canvas-card.is-expanded .training-name-badge {
  right: 5px;
  padding: 2px 5px;
  font-size: 6.5px;
}
.schedule-canvas-card.is-expanded .gcell {
  width: 100%;
  height: 21px;
  min-height: 0;
  border-radius: 6px;
  font-size: 8.4px;
  line-height: 1;
}
.schedule-canvas-card.is-expanded .gcell:hover {
  transform: none;
}
.schedule-canvas-card.is-expanded .gcell .u {
  font-size: 5.6px;
  margin-top: -1px;
  letter-spacing: 0;
}
.schedule-canvas-card.is-expanded .gcell.multi-shift-cell {
  padding: 2px;
  font-size: 6.8px;
}
.schedule-canvas-card.is-expanded .gcell.multi-shift-cell .u {
  font-size: 4.8px;
}
.schedule-canvas-card.is-expanded .gcell .raw-code-single {
  font-size: 6.4px;
  transform: scaleX(0.88);
}
.schedule-canvas-card.is-expanded .gcell .raw-code-stack {
  gap: 0;
  font-size: 5.25px;
  transform: scaleX(0.82);
}
.schedule-canvas-card.is-expanded .gcell .mini-shift-stack {
  gap: 1px;
}
.schedule-canvas-card.is-expanded .gcell .mini-shift {
  border-radius: 4px;
  font-size: 4.9px;
  letter-spacing: -0.36px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.68);
}
.schedule-canvas-card.is-expanded .gcell .mini-shift-stack.many .mini-shift {
  font-size: 4.2px;
}
.schedule-canvas-card.is-expanded .gcell .mini-shift.long {
  font-size: 4.3px;
  letter-spacing: -0.5px;
}
.schedule-canvas-card.is-expanded .gcell.month-draft-cell,
.schedule-canvas-card.is-expanded .gcell.draft {
  border-width: 1px;
  animation: none;
}
.schedule-canvas-card.is-expanded .gcell.month-draft-cell::before,
.schedule-canvas-card.is-expanded .gcell.draft::before {
  inset: 1px;
  border-radius: 5px;
}
.schedule-canvas-card.is-expanded .gcell.empty .empty-plus {
  width: 14px;
  height: 14px;
  font-size: 9px;
}

.legend { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
.legend .set { display: flex; gap: 9px; align-items: center; }
.schedule-canvas-card .legend {
  display: grid;
  grid-template-columns: minmax(240px, 350px) max-content max-content;
  gap: 10px 14px;
  align-items: center;
  justify-content: end;
}
.schedule-canvas-card .legend .set {
  flex-wrap: nowrap;
}
.schedule-canvas-card .legend .code {
  white-space: nowrap;
}
.schedule-canvas-card .legend .builder-search {
  width: 100%;
}
.builder-search {
  position: relative;
  width: min(350px, 100%);
  z-index: 30;
}
.builder-search-field {
  min-height: 38px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  border-radius: var(--r-pill);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.90), rgba(255,255,255,0.64)),
    var(--card);
  border: 1px solid rgba(255,255,255,0.64);
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.75);
}
.builder-search-field > i {
  color: var(--ink-3);
  font-size: 17px;
}
.builder-search-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 750;
}
.builder-search-field input::placeholder {
  color: rgba(96,88,73,0.70);
}
.builder-search-clear {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(142,132,112,0.14);
  color: var(--ink-2);
  cursor: pointer;
}
.builder-search-clear:hover {
  background: rgba(142,132,112,0.22);
}
.builder-search-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(390px, calc(100vw - 56px));
  padding: 8px;
  border-radius: var(--r-ctl);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.96), rgba(251,247,238,0.90)),
    var(--card);
  border: 1px solid rgba(255,255,255,0.66);
  box-shadow: var(--e3), inset 0 1px 0 rgba(255,255,255,0.76);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
}
.builder-search-result {
  width: 100%;
  min-height: 50px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.builder-search-result:hover,
.builder-search-result:focus-visible {
  outline: 0;
  background: rgba(255,245,226,0.92);
  box-shadow: inset 0 0 0 1px rgba(212,128,20,0.14);
}
.builder-search-result .avatar {
  width: 34px;
  height: 34px;
  font-size: 11px;
}
.builder-search-person {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.builder-search-person b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.1;
}
.builder-search-person small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 700;
}
.builder-search-result em {
  padding: 5px 8px;
  border-radius: var(--r-pill);
  background: rgba(142,132,112,0.12);
  color: var(--ink-2);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  white-space: nowrap;
}
.builder-search-empty {
  padding: 12px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 750;
}
.code { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.code b { width: 25px; height: 25px; border-radius: 8px; display: grid; place-items: center; font-size: 11px; font-weight: 800; }
.code b.a { background: var(--warn); color: var(--warn-ink); }
.code b.p { background: var(--pm); color: var(--pm-ink); }
.code b.n { background: var(--noc); color: var(--noc-ink); }
.code b.f { background: var(--med); color: var(--med-ink); }
.code b.ro { background: var(--hot); color: var(--hot-ink); }
.code b.oc { background: var(--safe); color: var(--safe-ink); }
.code b.sc { background: var(--card-2); color: var(--ink-2); }

.canvas-wrap { border-radius: var(--r-ctl); background: var(--card-2);
  -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.45); border-top-color: rgba(255,255,255,0.7);
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.5); padding: 14px; overflow-x: auto; }
.grid-table { border-collapse: separate; border-spacing: 4px; }
.grid-table th, .grid-table td { padding: 0; }
.move-mode-row th { padding-bottom: 8px !important; text-align: left; }
.move-mode-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 8px 10px 8px 14px;
  border-radius: var(--r-ctl);
  background: #e9f0ff;
  color: var(--pm-ink);
  box-shadow: var(--e1), inset 0 0 0 1px rgba(55,107,209,0.14);
}
.move-mode-banner > i { font-size: 18px; flex: none; }
.move-mode-banner span { flex: 1; font-size: 12.5px; font-weight: 800; color: var(--pm-ink); }
.move-mode-banner .pill { min-height: 30px; padding: 7px 12px; box-shadow: none; background: #fff; }
.gh-month { text-align: left; padding: 6px 14px !important; min-width: 200px; }
.gh-month b { font-size: 15px; color: var(--ink); display: block; }
.gh-month span { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.gh-day { width: 38px; text-align: center; padding: 5px 0 !important; }
.gh-day .gd-num { font-size: 13px; font-weight: 700; color: var(--ink); }
.gh-day .gd-dow { font-size: 9px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; }
.gh-day.we .gd-num, .gh-day.we .gd-dow { color: var(--accent-ink); }

.grid-section-row td { padding-top: 9px; padding-bottom: 5px; }
.grid-section-band {
  --section-bg: rgba(255,255,255,0.45);
  --section-line: rgba(120,90,40,0.12);
  --section-ink: var(--ink-2);
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 5px 12px;
  border-radius: var(--r-chip);
  background:
    linear-gradient(90deg, var(--section-bg), rgba(255,255,255,0.26) 46%, rgba(255,255,255,0.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), inset 0 -1px 0 var(--section-line);
}
.section-med .grid-section-band {
  --section-bg: rgba(40,188,169,0.16);
  --section-line: rgba(28,111,99,0.22);
  --section-ink: var(--med-ink);
}
.section-care .grid-section-band {
  --section-bg: rgba(102,161,245,0.15);
  --section-line: rgba(55,107,209,0.22);
  --section-ink: var(--care-ink);
}
.section-noc .grid-section-band {
  --section-bg: rgba(116,94,201,0.14);
  --section-line: rgba(90,68,160,0.22);
  --section-ink: var(--noc-ink);
}
.section-training .grid-section-band {
  --section-bg: rgba(246,188,80,0.20);
  --section-line: rgba(177,112,18,0.24);
  --section-ink: #8a5a05;
}
.grid-section-label { width: 200px; min-width: 200px; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; }
.grid-section-label b { font-size: 12px; font-weight: 800; color: var(--section-ink); letter-spacing: 0.2px; }
.grid-section-label span { font-size: 11px; font-weight: 800; color: var(--section-ink); opacity: .92; }
.grid-section-fill {
  height: 1px;
  flex: 1;
  min-width: 60px;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--section-line), rgba(255,255,255,0));
}

.staff-cell { display: flex; align-items: center; gap: 10px; padding: 8px 13px; border-radius: var(--r-ctl);
  background: #fff; box-shadow: var(--e1); min-width: 200px; }
.staff-cell .avatar { width: 32px; height: 32px; font-size: 11px; }
.staff-cell b { font-size: 12.5px; color: var(--ink); display: block; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; }
.staff-cell span { font-size: 10px; color: var(--ink-3); font-weight: 600; }
.grid-table tr.search-hit .staff-cell {
  box-shadow: var(--e2), inset 0 0 0 2px rgba(255,159,28,0.52), inset 4px 0 0 rgba(255,159,28,0.42) !important;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.97), rgba(255,244,221,0.82)),
    var(--card) !important;
}
.training-row .staff-cell.training-staff-cell {
  position: relative;
  padding-right: 76px;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.94), rgba(255,248,232,0.82)) !important;
  box-shadow: var(--e1), inset 4px 0 0 rgba(224,154,45,0.64), inset 0 0 0 1px rgba(224,154,45,0.12);
}
.training-name-badge {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 7px;
  border-radius: var(--r-pill);
  background: #ffe0a6;
  color: #8a5a05;
  font-style: normal;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.3px;
}
.staff-needs-row td { padding-bottom: 3px; }
.staff-needs-row .staff-needs-cell {
  border: 1px solid rgba(226,184,0,0.36);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.94), rgba(255,249,180,0.76)),
    #fff8a8 !important;
  box-shadow: var(--e1), inset 4px 0 0 rgba(238,196,0,0.72), inset 0 1px 0 rgba(255,255,255,0.86);
}
.staff-need-icon {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #fff86a, #ffd847);
  color: #4d4200;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
  flex: none;
}
.staff-needs-row .staff-cell b { color: #403800; }
.staff-needs-row .staff-cell span { color: #6b5b00; }

.gcell { width: 38px; height: 38px; border-radius: var(--r-chip); cursor: pointer; font-family: inherit;
  font-size: 11px; font-weight: 800; color: var(--ink-3); background: rgba(255,255,255,0.55); border: none;
  display: grid; place-items: center; position: relative; transition: transform .1s ease; }
.gcell:hover { transform: scale(1.08); }
.gcell.empty {
  background: transparent;
  border: none;
  box-shadow: none;
}
.gcell.empty::before { display: none; }
.gcell.empty .empty-plus {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: rgba(100,92,77,0.82);
  background: transparent;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  transition: transform .14s var(--ease), background-color .14s var(--ease),
              box-shadow .14s var(--ease), color .14s var(--ease);
}
.gcell.empty .u { display: none; }
.gcell.empty:hover {
  transform: none;
  background: transparent;
  box-shadow: none;
}
.gcell.empty .empty-plus:hover {
  color: var(--accent-ink);
  background: #fff;
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.85);
  transform: scale(1.28);
}
.gcell.empty.move-target { cursor: copy; }
.gcell.empty.move-target .empty-plus {
  color: var(--pm-ink);
  background: #fff;
  box-shadow: var(--e1), inset 0 0 0 1.5px rgba(55,107,209,0.42);
  transform: scale(1.08);
}
.gcell.empty.move-target:hover .empty-plus {
  box-shadow: var(--e2), 0 0 0 5px rgba(55,107,209,0.14), inset 0 0 0 1.5px rgba(55,107,209,0.62);
  transform: scale(1.24);
}
.gcell.empty.move-muted { opacity: .34; cursor: default; }
.gcell.a  { --shift-rgb: 252,230,192; --pulse-rgb: 245,151,30;  --shift-ink: var(--warn-ink); background: var(--warn); color: var(--warn-ink); }
.gcell.p  { --shift-rgb: 232,241,255; --pulse-rgb: 55,107,209;  --shift-ink: var(--pm-ink); background: var(--pm); color: var(--pm-ink); }
.gcell.n  { --shift-rgb: 231,222,245; --pulse-rgb: 90,68,160;   --shift-ink: var(--noc-ink); background: var(--noc);  color: var(--noc-ink); }
.gcell.f  { --shift-rgb: 210,239,233; --pulse-rgb: 28,111,99;   --shift-ink: var(--med-ink); background: var(--med);  color: var(--med-ink); }
.gcell.ro { --shift-rgb: 250,217,205; --pulse-rgb: 176,67,44;   --shift-ink: var(--hot-ink); background: var(--hot);  color: var(--hot-ink); }
.gcell.multi-shift-cell {
  padding: 3px;
  background: rgba(255,255,255,0.48);
  box-shadow: inset 0 0 0 1.5px rgba(64, 56, 43, 0.18), 0 6px 12px rgba(64, 56, 43, 0.08);
}
.gcell .raw-code-single,
.gcell .raw-code-stack span {
  display: block;
  white-space: nowrap;
  line-height: 0.9;
  letter-spacing: -0.45px;
}
.gcell .raw-code-single {
  max-width: 100%;
  font-size: 9.2px;
  transform: scaleX(0.9);
}
.gcell .raw-code-stack {
  display: grid;
  place-items: center;
  gap: 1px;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  font-size: 7.8px;
  transform: scaleX(0.86);
}
.gcell .mini-shift-stack {
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  gap: 2px;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}
.gcell .mini-shift {
  min-width: 0;
  min-height: 0;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  white-space: nowrap;
  line-height: 1;
  font-size: 7px;
  font-weight: 950;
  letter-spacing: -0.42px;
  box-shadow: inset 0 0 0 1.2px rgba(255,255,255,0.72), 0 1px 2px rgba(64,56,43,0.10);
  text-shadow: 0 1px 0 rgba(255,255,255,0.54);
}
.gcell .mini-shift-stack.many .mini-shift {
  font-size: 5.8px;
  border-radius: 5px;
}
.gcell .mini-shift.long {
  font-size: 5.9px;
  letter-spacing: -0.58px;
}
.gcell .mini-shift.band-a { background: var(--warn); color: var(--warn-ink); border: 1px solid rgba(245,151,30,0.86); }
.gcell .mini-shift.band-p { background: var(--pm); color: var(--pm-ink); border: 1px solid rgba(55,107,209,0.86); }
.gcell .mini-shift.band-n { background: var(--noc); color: var(--noc-ink); border: 1px solid rgba(90,68,160,0.78); }
.gcell .mini-shift.band-f { background: var(--med); color: var(--med-ink); border: 1px solid rgba(28,111,99,0.72); }
.gcell .mini-shift.band-ro { background: var(--hot); color: var(--hot-ink); border: 1px solid rgba(176,67,44,0.78); }
.gcell.training-cell {
  width: 44px;
  color: #80550c;
  background:
    linear-gradient(145deg, rgba(255,246,220,0.96), rgba(255,216,145,0.74));
  border: 1px solid rgba(196,128,19,0.34);
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.72);
  font-size: 9.5px;
  letter-spacing: 0;
}
.gcell.training-cell .u {
  font-size: 7px;
  opacity: .78;
  color: #80550c;
}
.gcell.staff-need-empty {
  background: rgba(255,255,255,0.18);
  border: 1px dashed rgba(226,184,0,0.13);
  box-shadow: none;
  cursor: default;
}
.gcell.staff-need-cell {
  --pulse-rgb: 238,196,0;
  width: 42px;
  color: #4d4200;
  background:
    radial-gradient(circle at 24% 12%, rgba(255,255,255,0.86), transparent 38%),
    linear-gradient(145deg, #fff86a, #ffd847);
  border: 2px solid rgba(212,172,0,0.68);
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.72);
  text-shadow: 0 1px 0 rgba(255,255,255,0.58);
  animation: staffNeedPulse 1.95s var(--ease) infinite;
}
.gcell.staff-need-cell .u {
  color: #665600;
  opacity: .88;
  font-size: 7px;
  letter-spacing: 0;
}
.gcell.month-draft-cell {
  background: transparent;
  border: 2px solid rgba(var(--pulse-rgb),0.76);
  color: var(--shift-ink);
  box-shadow: 0 0 0 0 rgba(var(--pulse-rgb),0);
  text-shadow: 0 1px 0 rgba(255,255,255,0.75);
  animation: draftPulse 1.75s var(--ease) infinite;
}
.gcell.month-draft-cell::before {
  content: "";
  position: absolute;
  inset: 3px;
  pointer-events: none;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.64);
}
.gcell.time-off-cell {
  box-shadow: var(--e1), inset 0 0 0 1px rgba(176,67,44,0.18);
}
.gcell.time-off-cell:hover {
  box-shadow: var(--e2), inset 0 0 0 1px rgba(176,67,44,0.26);
}
.gcell.time-off-conflict {
  outline: 2px solid rgba(176,67,44,0.62);
  outline-offset: 2px;
}
.gcell.time-off-draft-conflict {
  --pulse-rgb: 176,67,44;
  overflow: visible;
  isolation: isolate;
  border: 2px solid rgba(var(--pulse-rgb),0.82);
  animation: draftPulse 1.75s var(--ease) infinite;
}
.ro-badge {
  position: absolute;
  right: -5px;
  top: -5px;
  z-index: 2;
  min-width: 20px;
  height: 15px;
  padding: 0 4px;
  border-radius: var(--r-pill);
  display: grid;
  place-items: center;
  background: var(--hot);
  color: var(--hot-ink);
  border: 1px solid rgba(255,255,255,0.78);
  box-shadow: 0 4px 10px rgba(176,67,44,0.16);
  font-size: 7px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
}
.gcell.draft {
  position: relative;
  overflow: visible;
  isolation: isolate;
  color: var(--shift-ink);
  background: transparent;
  border: 2px solid rgba(var(--pulse-rgb),0.82);
  box-shadow: 0 0 0 0 rgba(var(--pulse-rgb),0.0);
  text-shadow: 0 1px 0 rgba(255,255,255,0.75);
  animation: draftPulse 1.75s var(--ease) infinite;
}
.gcell.draft::before {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: 0;
  pointer-events: none;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.64);
  background: transparent;
}
.gcell.time-off-cell.draft {
  background: var(--hot);
  color: var(--hot-ink);
  border-color: rgba(var(--pulse-rgb),0.82);
  box-shadow: var(--e1), inset 0 0 0 1px rgba(176,67,44,0.18);
}
.gcell.time-off-cell.draft::before {
  border-color: rgba(255,255,255,0.52);
  background: rgba(255,255,255,0.12);
}
.gcell.move-source {
  outline: 2px solid rgba(55,107,209,0.58);
  outline-offset: 3px;
  cursor: pointer;
}
.grid-table.is-moving .gcell.move-source:hover {
  transform: scale(1.08);
  box-shadow: var(--e2), 0 0 0 6px rgba(55,107,209,0.14);
}
.gcell.removed-draft {
  --pulse-rgb: 138,129,112;
  --shift-ink: #706858;
  color: #706858;
  border-style: dashed;
  background:
    linear-gradient(135deg, transparent 42%, rgba(138,129,112,0.38) 43%, rgba(138,129,112,0.38) 57%, transparent 58%);
  text-shadow: none;
}
.gcell.removed-draft::before {
  border-color: rgba(138,129,112,0.28);
  background: rgba(238,235,228,0.34);
}
.gcell.moved-draft {
  box-shadow: 0 0 0 0 rgba(var(--pulse-rgb),0), inset 0 0 0 1px rgba(55,107,209,0.14);
}
.gcell .u { font-size: 7px; font-weight: 700; opacity: .65; margin-top: -2px; letter-spacing: 0.2px; }

@keyframes draftPulse {
  0%, 100% {
    border-color: rgba(var(--pulse-rgb),0.74);
    box-shadow: 0 0 0 0 rgba(var(--pulse-rgb),0);
    filter: saturate(1.01);
  }
  50% {
    border-color: rgba(var(--pulse-rgb),1);
    box-shadow: 0 0 0 4px rgba(var(--pulse-rgb),0.18);
    filter: saturate(1.08);
  }
}

@keyframes clockedCardPulse {
  0%, 100% {
    box-shadow: var(--e2), inset 0 0 0 1px rgba(var(--clocked-pulse-rgb),0.16);
    filter: saturate(1.01);
  }
  50% {
    box-shadow: 0 16px 36px rgba(var(--clocked-pulse-rgb),0.18), var(--e2), inset 0 0 0 1.5px rgba(var(--clocked-pulse-rgb),0.34);
    filter: saturate(1.08);
  }
}

@keyframes clockedOutwardPulse {
  0%, 100% {
    opacity: 0.72;
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(var(--clocked-pulse-rgb),0.22);
  }
  50% {
    opacity: 0.18;
    transform: scale(1.08);
    box-shadow: 0 0 0 8px rgba(var(--clocked-pulse-rgb),0);
  }
}

@keyframes staffNeedPulse {
  0%, 100% {
    border-color: rgba(212,172,0,0.62);
    box-shadow: var(--e1), 0 0 0 0 rgba(238,196,0,0);
  }
  50% {
    border-color: rgba(170,136,0,0.92);
    box-shadow: var(--e2), 0 0 0 5px rgba(255,232,52,0.22);
  }
}

.note { font-size: 12.5px; color: var(--ink-2); font-weight: 500; line-height: 1.55; }
.note b { color: var(--ink); font-weight: 700; }
.note a { color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.note a:hover { text-decoration: underline; }

.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.grow { flex: 1; min-width: 160px; }

@media (max-width: 1080px) {
  .shell { grid-template-columns: 1fr; }
  .side { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .me { margin: 0 0 0 auto; }
  .scheduler-control-grid { grid-template-columns: 1fr; }
  .scheduler-watch-panel { align-self: auto; }
  .weekgrid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
/* ============================================================
   Detail modals (shift detail / pattern planner)
   Simplified, scannable, action-driven. Spring entrance.
   ============================================================ */
.modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: flex-start;
  justify-content: center; padding: 36px 20px; overflow-y: auto;
  background: rgba(70,45,12,0.30);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); }
.modal.open { display: flex; animation: modalFade .25s var(--ease); }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }

.modal-panel { position: relative; width: min(880px, 100%); border-radius: 28px;
  background: rgba(252,250,246,0.95);
  -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.7);
  box-shadow: 0 40px 90px rgba(70,45,12,0.30), inset 0 1px 0 rgba(255,255,255,0.9);
  padding: 30px 32px 32px; overflow: hidden; }
.modal-panel.day-assign-panel { width: min(620px, 100%); }
.modal-panel.onboarding-panel { width: min(980px, 100%); }
.modal-panel.import-overwrite-panel { width: min(1040px, 100%); }
.modal-panel.import-month-panel { width: min(640px, 100%); }
.modal-panel.open-shift-panel { width: min(900px, 100%); }
.modal-panel.today-ot-panel {
  width: min(1100px, 100%);
  min-height: min(800px, calc(100dvh - 32px));
  max-height: calc(100dvh - 32px);
  padding: 22px 28px 24px;
}
.modal-panel.today-ot-panel.has-replacement-drawer { width: min(1120px, 100%); }
.modal-panel.builder-publish-panel { width: min(760px, 100%); }
.modal-panel.builder-print-panel { width: min(1320px, 100%); }
.modal-panel.scheduler-delete-month-panel { width: min(720px, 100%); }
#shiftModal .modal-panel {
  width: min(1080px, 100%);
  background: #fcfaf6;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.modal-panel.builder-publish-panel::before,
.modal-panel.scheduler-delete-month-panel::before { background: linear-gradient(90deg, #8d2118, #db8218); }
.modal-panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--accent-grad); }
.modal.open .modal-panel { animation: modalRise .42s cubic-bezier(0.32, 0.72, 0, 1); }
@keyframes modalRise { from { opacity: 0; transform: translateY(26px) scale(0.985); }
  to { opacity: 1; transform: none; } }

#todayOtModal {
  padding: 16px 18px;
}

.modal-close { position: absolute; top: 22px; right: 22px; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; box-shadow: var(--e1); cursor: pointer;
  display: grid; place-items: center; color: var(--ink-2); font-size: 17px;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.modal-close:hover { transform: rotate(90deg); box-shadow: var(--e2); }
.modal-close:active { transform: rotate(90deg) scale(0.92); }

#todayOtModal .modal-close,
#swapModal .modal-close {
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  border: 2px solid rgba(176,67,44,0.60);
  background: rgba(255,255,255,0.98);
  color: #8d2118;
  box-shadow: 0 12px 28px rgba(141,33,24,0.14), inset 0 0 0 1px rgba(255,255,255,0.78);
  z-index: 8;
}
#todayOtModal .modal-close:hover,
#swapModal .modal-close:hover {
  border-color: rgba(141,33,24,0.78);
  box-shadow: 0 16px 34px rgba(141,33,24,0.20), inset 0 0 0 1px rgba(255,255,255,0.86);
}

.today-ot-panel {
  background: #fcfaf6;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.today-ot-panel::before { background: linear-gradient(90deg, #9f2f22, #d48014); }
.today-ot-chips { padding-right: 46px; }
.today-ot-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-top: 10px;
  padding-right: 52px;
}
.today-ot-head .m-title {
  margin-top: 4px;
  font-size: clamp(30px, 3.5vw, 42px);
  line-height: 0.98;
}
.today-ot-head-status {
  flex: none;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border-radius: var(--r-pill);
  color: #7f1d16;
  background: #fff1ee;
  box-shadow: inset 0 0 0 1px rgba(159,47,34,0.14);
  font-size: 14px;
  font-weight: 900;
}
.today-ot-head-status i { font-size: 19px; }
.today-ot-head-status.is-clear {
  color: var(--safe-ink);
  background: var(--safe);
}
.today-ot-head-status.is-stale,
.today-ot-head-status.is-cold,
.today-ot-head-status.is-loading {
  color: var(--warn-ink);
  background: var(--warn);
}
.today-ot-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin-top: 10px;
}
.today-ot-panel.has-replacement-drawer .today-ot-layout {
  grid-template-columns: minmax(340px, 400px) minmax(0, 1fr);
}
.today-ot-main {
  min-width: 0;
  min-height: min(650px, calc(100dvh - 205px));
  max-height: min(720px, calc(100dvh - 165px));
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: 12px;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(120,90,40,0.26) transparent;
}
.today-ot-main::-webkit-scrollbar {
  width: 8px;
}
.today-ot-main::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(120,90,40,0.22);
}
.today-ot-empty {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px 14px;
  align-items: center;
  padding: 18px;
  border-radius: var(--r-card);
  background: rgba(255,255,255,0.82);
  box-shadow: var(--e1), inset 0 0 0 1px rgba(120,90,40,0.08);
}
.today-ot-empty i {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--warn);
  color: var(--warn-ink);
  font-size: 22px;
}
.today-ot-empty b {
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.18;
}
.today-ot-empty span {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 760;
  line-height: 1.3;
}
.today-ot-empty.is-clear i { background: var(--safe); color: var(--safe-ink); }
.today-ot-section {
  display: grid;
  gap: 9px;
  padding-top: 2px;
}
.today-ot-section h3 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.today-ot-section h3 b {
  min-width: 28px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(120,90,40,0.10);
  font-size: 13px;
}
.today-ot-section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.today-ot-section-title::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c8543b;
  box-shadow: 0 0 0 4px rgba(200,84,59,0.12);
}
.today-ot-section.is-dt .today-ot-section-title::before {
  background: #7f1d16;
  box-shadow: 0 0 0 4px rgba(127,29,22,0.16);
}
.today-ot-section.is-near .today-ot-section-title::before {
  background: #d48014;
  box-shadow: 0 0 0 4px rgba(212,128,20,0.14);
}
.today-ot-section > p {
  margin: -3px 0 1px;
  color: var(--ink-3);
  font-size: 12.5px;
  font-weight: 760;
  line-height: 1.25;
}
.today-ot-alert-list {
  display: grid;
  gap: 10px;
}
.today-ot-alert-card {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--r-card);
  background: #fff;
  border: 1px solid rgba(120,90,40,0.10);
  box-shadow: var(--e1), inset 5px 0 0 #c8543b;
}
.today-ot-alert-card.is-dt {
  background: linear-gradient(145deg, rgba(255,241,238,0.96), rgba(255,250,248,0.98));
  border-color: rgba(127,29,22,0.16);
  box-shadow: var(--e1), inset 5px 0 0 #7f1d16;
}
.today-ot-alert-card.is-seventh-day {
  background: linear-gradient(145deg, rgba(255,239,236,0.98), rgba(255,250,249,0.99));
  border-color: rgba(185,28,28,0.30);
  box-shadow: var(--e2), inset 6px 0 0 #b91c1c, 0 14px 34px rgba(127,29,22,0.12);
}
.today-ot-alert-card.is-near {
  box-shadow: var(--e1), inset 5px 0 0 #d48014;
}
.today-ot-alert-card.is-selected {
  box-shadow: var(--e2), inset 5px 0 0 #2f6fd6, inset 0 0 0 2px rgba(47,111,214,0.20);
}
.today-ot-alert-card.is-seventh-day.is-selected {
  box-shadow: var(--e2), inset 6px 0 0 #b91c1c, inset 0 0 0 2px rgba(47,111,214,0.24), 0 14px 34px rgba(127,29,22,0.12);
}
.today-ot-alert-select {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.today-ot-alert-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.today-ot-alert-kicker {
  width: max-content;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  background: #fff1ee;
  color: #9f2f22;
  font-size: 11px;
  font-weight: 900;
}
.today-ot-alert-card.is-dt .today-ot-alert-kicker {
  background: #f9ded8;
  color: #7f1d16;
}
.today-ot-alert-card.is-seventh-day .today-ot-alert-kicker {
  background: #b91c1c;
  color: #fff;
  box-shadow: 0 5px 12px rgba(185,28,28,0.16);
}
.today-ot-alert-card.is-near .today-ot-alert-kicker {
  background: var(--warn);
  color: var(--warn-ink);
}
.today-ot-alert-copy b {
  color: var(--ink);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 950;
  line-height: 1.05;
}
.today-ot-seventh-warning {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin-top: 3px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #b91c1c;
  color: #fff;
  box-shadow: 0 9px 20px rgba(185,28,28,0.18);
}
.today-ot-seventh-warning i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,0.16);
  font-size: 22px;
}
.today-ot-seventh-warning strong {
  display: block;
  color: #fff;
  font-size: 14px;
  font-weight: 950;
  line-height: 1.15;
}
.today-ot-seventh-warning small {
  display: block;
  margin-top: 2px;
  color: rgba(255,255,255,0.84);
  font-size: 12px;
  font-weight: 820;
  line-height: 1.2;
}
.today-ot-actual-label {
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1.25;
}
.today-ot-punch-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 3px;
}
.today-ot-punch-item {
  min-width: 0;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
  border-radius: 14px;
  background: rgba(252,250,246,0.92);
  box-shadow: inset 0 0 0 1px rgba(120,90,40,0.10);
}
.today-ot-punch-item small {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1.05;
}
.today-ot-punch-item b {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.today-ot-punch-item.is-status {
  background: #eef8e8;
  box-shadow: inset 0 0 0 1px rgba(58,122,46,0.16);
}
.today-ot-punch-item.is-status b {
  color: #2f6b25;
}
.today-ot-basis {
  display: grid;
  gap: 7px;
  margin-top: 5px;
}
.today-ot-basis-item {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #fff7f4;
  box-shadow: inset 0 0 0 1px rgba(159,47,34,0.13);
}
.today-ot-basis-item small {
  color: #9f2f22;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  line-height: 1.05;
}
.today-ot-basis-item b {
  color: var(--ink);
  font-size: 12px;
  font-weight: 880;
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.today-ot-alert-time {
  min-width: 106px;
  text-align: right;
}
.today-ot-alert-time b {
  display: block;
  color: #9f2f22;
  font-size: clamp(30px, 3.4vw, 40px);
  font-weight: 950;
  line-height: 0.95;
}
.today-ot-alert-card.is-dt .today-ot-alert-time b { color: #7f1d16; }
.today-ot-alert-card.is-near .today-ot-alert-time b { color: #a35a0d; }
.today-ot-alert-time small {
  display: block;
  margin-top: 5px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.15;
}
.today-ot-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.today-ot-action {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--ops-border);
  background: #fff;
  color: var(--ink);
  box-shadow: none;
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, color .14s ease, transform .12s ease;
}
.today-ot-action i { font-size: 19px; }
.today-ot-action.primary {
  background: var(--ops-green);
  color: #fff;
  border-color: var(--ops-green);
}
.today-ot-action.replacement {
  background: #fff;
  color: var(--ops-amber);
  border-color: rgba(168,100,10,0.34);
}
.today-ot-action.quiet {
  color: var(--ink-2);
  background: #fff;
}
.today-ot-action:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(25,35,55,0.22);
  background: #f8fafc;
}
.today-ot-action.primary:hover:not(:disabled) {
  background: var(--ops-green-dark);
  border-color: var(--ops-green-dark);
  color: #fff;
}
.today-ot-action.replacement:hover:not(:disabled) {
  background: #fffaf1;
  border-color: rgba(168,100,10,0.50);
}
.today-ot-action:active:not(:disabled) {
  transform: translateY(0) scale(0.985);
}
.today-ot-action:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
.today-ot-action.is-handled:disabled {
  opacity: 1;
  cursor: default;
}
.today-ot-action.primary.is-handled:disabled {
  background: var(--ops-green);
  border-color: var(--ops-green);
  color: #fff;
}
.today-ot-action.quiet.is-handled:disabled {
  background: #fff7e6;
  border-color: rgba(212,128,20,0.28);
  color: #7f4e09;
}
.today-ot-action-feedback {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 12px 13px;
  border-radius: var(--r-ctl);
  background: #eef8ea;
  color: #38652b;
  box-shadow: inset 0 0 0 1px rgba(79,138,61,0.14);
}
.today-ot-action-feedback.is-release {
  background: #fff7e6;
  color: #7f4e09;
  box-shadow: inset 0 0 0 1px rgba(212,128,20,0.18);
}
.today-ot-action-feedback i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.74);
  font-size: 18px;
}
.today-ot-action-feedback b,
.today-ot-action-feedback small {
  display: block;
  line-height: 1.2;
}
.today-ot-action-feedback b {
  color: inherit;
  font-size: 16px;
  font-weight: 950;
}
.today-ot-action-feedback small {
  margin-top: 2px;
  color: inherit;
  font-size: 13px;
  font-weight: 850;
  opacity: 0.84;
}
.today-ot-replacement-panel {
  position: sticky;
  top: 0;
  min-width: 0;
  max-height: min(680px, calc(100dvh - 130px));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px;
  border-radius: var(--r-card);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.96), rgba(247,253,244,0.90)),
    #fff;
  border: 1px solid rgba(79,138,61,0.18);
  box-shadow: var(--e2), inset 0 0 0 3px rgba(79,138,61,0.10);
  animation: todayOtDrawerIn .32s cubic-bezier(0.32,0.72,0,1);
}
@keyframes todayOtDrawerIn {
  from { opacity: 0; transform: translateX(-28px); }
  to { opacity: 1; transform: none; }
}
.today-ot-drawer-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink-2);
  box-shadow: var(--e1);
  cursor: pointer;
}
.today-ot-drawer-head {
  padding-right: 42px;
  margin-bottom: 16px;
}
.today-ot-drawer-head h3 {
  margin: 6px 0 5px;
  color: var(--ink);
  font-size: 26px;
  line-height: 1.05;
}
.today-ot-drawer-head p {
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.35;
}
.today-ot-drawer-head .today-ot-role-note {
  display: inline-flex;
  width: fit-content;
  margin-top: 9px;
  padding: 7px 10px;
  border-radius: var(--r-pill);
  background: var(--warn);
  color: var(--warn-ink);
  font-size: 12px;
  font-weight: 950;
}
.today-ot-candidate-loading,
.today-ot-candidate-error {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 14px;
  border-radius: var(--r-ctl);
  background: var(--card-2);
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 850;
}
.today-ot-candidate-error {
  background: #fff1ee;
  color: #8d2118;
}
.today-ot-candidate-section {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.today-ot-candidate-section h4 {
  position: sticky;
  top: -20px;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 16px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(120,90,40,0.08);
}
.today-ot-section-label {
  min-width: 0;
}
.today-ot-candidate-section h4 b {
  min-width: 26px;
  min-height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.9);
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
}
.today-ot-candidate-section.is-best h4 {
  background: #dbeafe;
  color: #1e4f8f;
}
.today-ot-candidate-section.is-backup h4 {
  background: #fff0c7;
  color: #7f4e09;
}
.today-ot-candidate-section.is-review h4 {
  background: #ffe0da;
  color: #8d2118;
}
.today-ot-candidate-empty {
  margin: 0;
  padding: 12px;
  border-radius: var(--r-ctl);
  color: var(--ink-3);
  background: rgba(255,255,255,0.65);
  font-size: 13px;
  font-weight: 800;
}
.today-ot-candidate-row {
  display: grid;
  gap: 10px;
  padding: 13px;
  border-radius: var(--r-ctl);
  background: #fff;
  border: 1px solid rgba(120,90,40,0.08);
  box-shadow: var(--e1);
}
.today-ot-candidate-row.is-best {
  border-color: rgba(47,111,214,0.18);
  box-shadow: var(--e1), inset 4px 0 0 rgba(47,111,214,0.66);
}
.today-ot-candidate-row.is-backup {
  border-color: rgba(212,128,20,0.16);
  box-shadow: var(--e1), inset 4px 0 0 rgba(212,128,20,0.62);
}
.today-ot-candidate-row.is-review {
  border-color: rgba(159,47,34,0.16);
  box-shadow: var(--e1), inset 4px 0 0 rgba(159,47,34,0.62);
}
.today-ot-candidate-person {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
}
.today-ot-candidate-person b {
  display: block;
  color: var(--ink);
  font-size: 15px;
  font-weight: 920;
  line-height: 1.12;
}
.today-ot-candidate-person small {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 760;
}
.today-ot-candidate-contact a,
.today-ot-candidate-contact span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  background: var(--safe);
  color: var(--safe-ink);
  font-size: 14px;
  font-weight: 950;
  text-decoration: none;
}
.today-ot-candidate-contact span {
  background: var(--card-2);
  color: var(--ink-3);
}
.today-ot-candidate-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.today-ot-candidate-chips span {
  padding: 5px 8px;
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 900;
  background: var(--card-2);
  color: var(--ink-2);
}
.today-ot-candidate-chips .good {
  background: var(--safe);
  color: var(--safe-ink);
}
.today-ot-candidate-chips .warn {
  background: var(--warn);
  color: var(--warn-ink);
}
.today-ot-candidate-chips .review {
  background: #fff1ee;
  color: #8d2118;
}

@media (max-width: 760px) {
  .today-ot-head {
    align-items: stretch;
    flex-direction: column;
  }
  .today-ot-head-status {
    width: max-content;
  }
  .today-ot-panel.has-replacement-drawer .today-ot-layout {
    grid-template-columns: 1fr;
  }
  .today-ot-alert-select {
    grid-template-columns: 1fr;
  }
  .today-ot-alert-time {
    min-width: 0;
    text-align: left;
  }
  .today-ot-punch-summary {
    grid-template-columns: 1fr;
  }
  .today-ot-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .today-ot-action {
    width: 100%;
  }
  .today-ot-replacement-panel {
    position: relative;
    max-height: none;
  }
}

.open-shift-loading {
  margin-top: 22px;
  padding: 18px;
  border-radius: var(--r-card);
  background: rgba(255,255,255,0.72);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
}
.import-upload-zone {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 12px;
  min-height: 340px;
  margin-top: 28px;
  padding: 46px 32px;
  border: 2px dashed rgba(219,130,24,0.35);
  border-radius: 26px;
  background:
    radial-gradient(circle at 50% 0%, rgba(245,151,30,0.14), transparent 46%),
    rgba(255,255,255,0.70);
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.86);
  color: var(--ink);
  cursor: pointer;
  text-align: center;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease), background-color .18s var(--ease);
}
.import-upload-zone:hover,
.import-upload-zone.dragging {
  border-color: rgba(219,130,24,0.72);
  background:
    radial-gradient(circle at 50% 0%, rgba(245,151,30,0.20), transparent 48%),
    rgba(255,255,255,0.84);
  box-shadow: var(--e2), 0 0 0 5px rgba(245,151,30,0.10), inset 0 1px 0 rgba(255,255,255,0.90);
  transform: translateY(-1px);
}
.import-upload-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.import-upload-icon {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 20px;
  background: var(--accent-grad);
  box-shadow: 0 10px 22px var(--accent-shadow), inset 0 0 0 1px rgba(255,255,255,0.18);
  color: #fff;
  font-size: 32px;
}
.import-upload-zone.has-preview .import-upload-icon {
  background: linear-gradient(145deg, #6aa85c, #3f7d35);
  box-shadow: 0 10px 22px rgba(63,125,53,0.22), inset 0 0 0 1px rgba(255,255,255,0.20);
}
.import-upload-zone.is-busy .import-upload-icon i { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.import-upload-zone b {
  margin-top: 10px;
  font-size: clamp(26px, 3.2vw, 36px);
  font-weight: 950;
  letter-spacing: -0.04em;
  line-height: 1.05;
}
.import-upload-zone small {
  color: var(--ink-2);
  font-size: clamp(16px, 1.7vw, 20px);
  font-weight: 850;
}
.import-upload-button {
  min-height: 52px;
  margin-top: 12px;
  padding-inline: 26px;
  font-size: 15px;
  pointer-events: none;
}
.import-simple-actions {
  justify-content: center;
  margin-top: 18px;
}
.import-simple-actions .pill {
  min-height: 46px;
  padding-inline: 24px;
  font-weight: 900;
}
.import-upload-file {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 850;
}
.import-upload-file.selected {
  color: var(--accent-ink);
}
.open-shift-layout {
  display: grid;
  grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
  gap: 18px;
  margin-top: 22px;
}
.open-shift-search-card,
.open-shift-builder-card,
.open-shift-preview-card {
  border-radius: var(--r-card);
  border: 1px solid rgba(255,255,255,0.66);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.92), rgba(255,248,232,0.68)),
    rgba(255,255,255,0.72);
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.88);
}
.open-shift-search-card,
.open-shift-builder-card { padding: 16px; }
.open-shift-preview-card {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 13px;
  align-items: center;
  margin-top: 16px;
  padding: 15px;
}
.open-shift-input-wrap {
  position: relative;
  margin-top: 11px;
}
.open-shift-input-wrap i {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  font-size: 16px;
}
.open-shift-input {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 15px;
  background: rgba(255,255,255,0.82);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(142,120,80,0.12);
  font: inherit;
  font-size: 13px;
  font-weight: 760;
  padding: 0 14px 0 38px;
  outline: none;
}
.open-shift-input:focus {
  box-shadow: inset 0 0 0 2px rgba(219,130,24,0.34), 0 0 0 4px rgba(219,130,24,0.10);
}
.open-shift-results {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  max-height: 338px;
  overflow: auto;
  padding-right: 2px;
}
.open-shift-person {
  --selected-edge: var(--care-ink);
  --selected-bg: rgba(232,241,255,0.72);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 17px;
  background: rgba(255,255,255,0.72);
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  padding: 9px;
  text-align: left;
  box-shadow: inset 0 0 0 1px rgba(142,120,80,0.08);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease);
}
.open-shift-person:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.90);
  box-shadow: var(--e1), inset 0 0 0 1px rgba(55,107,209,0.16);
}
.open-shift-person.on {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.70), rgba(255,255,255,0.86)),
    var(--selected-bg);
  box-shadow:
    var(--e1),
    0 0 0 4px rgba(55,107,209,0.12),
    inset 0 0 0 3px var(--selected-edge),
    inset 7px 0 0 var(--selected-edge);
}
.open-shift-person.on.selected-med {
  --selected-edge: var(--med-ink);
  --selected-bg: rgba(210,239,233,0.62);
}
.open-shift-person.on.selected-both {
  --selected-edge: #2f82bd;
  --selected-bg: rgba(224,244,250,0.64);
}
.open-shift-person.on .avatar {
  box-shadow:
    0 0 0 4px rgba(255,255,255,0.92),
    0 0 0 6px var(--selected-edge);
}
.open-shift-person b,
.open-shift-preview-card b {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.open-shift-person small,
.open-shift-preview-card small {
  display: block;
  margin-top: 4px;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.25;
}
.open-shift-person .mini-hours {
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(244,229,199,0.66);
  color: var(--warn-ink);
  font-size: 10.5px;
  font-weight: 900;
  white-space: nowrap;
}
.open-shift-person.on .mini-hours {
  background: rgba(255,255,255,0.88);
  color: var(--selected-edge);
  box-shadow: inset 0 0 0 1px rgba(55,107,209,0.22);
}
.open-shift-person.on.selected-med .mini-hours {
  box-shadow: inset 0 0 0 1px rgba(28,111,99,0.24);
}
.open-shift-person-status {
  display: grid;
  justify-items: end;
  gap: 5px;
}
.selected-staff-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  background: var(--selected-edge);
  color: #fff;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  padding: 5px 7px;
  white-space: nowrap;
}
.selected-staff-chip i { font-size: 12px; }
.open-shift-form-grid {
  display: grid;
  gap: 15px;
}
.open-shift-field {
  display: grid;
  gap: 9px;
}
.open-shift-field > span {
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}
.open-shift-date-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border-radius: 15px;
  background: var(--card-2);
}
.open-shift-date {
  min-width: 0;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  font: inherit;
  padding: 7px 4px;
  transition: transform .14s var(--ease), background-color .14s var(--ease), box-shadow .14s var(--ease);
}
.open-shift-date b,
.open-shift-date span {
  display: block;
  line-height: 1;
}
.open-shift-date b {
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
}
.open-shift-date span {
  margin-top: 5px;
  color: var(--ink-3);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.open-shift-date:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.66);
}
.open-shift-date.on {
  background: var(--warn);
  color: var(--warn-ink);
  box-shadow: inset 0 0 0 1.5px var(--warn-ink), 0 6px 14px rgba(70,45,12,0.08);
}
.open-shift-date.on b,
.open-shift-date.on span { color: var(--warn-ink); }
.open-shift-unit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.open-shift-unit {
  min-height: 38px;
  border: 0;
  border-radius: 13px;
  background: rgba(255,255,255,0.72);
  color: var(--ink-2);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  padding: 8px 7px;
  box-shadow: inset 0 0 0 1px rgba(142,120,80,0.10);
}
.open-shift-unit.on {
  background: #e9f5e6;
  color: #356c2f;
  box-shadow: inset 0 0 0 1.5px rgba(53,108,47,0.34);
}
.open-shift-preview-icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--accent-grad);
  color: #fff;
  font-size: 23px;
  box-shadow: 0 8px 18px var(--accent-shadow), inset 0 0 0 1px rgba(255,255,255,0.18);
}
.open-shift-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.shift.open-shift-preview {
  box-shadow: var(--e2), inset 4px 0 0 var(--accent);
}

.onboarding-layout {
  display: grid;
  grid-template-columns: minmax(210px, 280px) minmax(0, 1fr);
  gap: 18px;
  margin-top: 22px;
}
.onboarding-list { display: flex; flex-direction: column; gap: 10px; }
.onboarding-person {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 66px;
  padding: 10px;
  border-radius: var(--r-ctl);
  border: 1px solid rgba(255,255,255,0.62);
  background: rgba(255,255,255,0.70);
  box-shadow: var(--e1);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.onboarding-person.selected {
  background: #fff8e8;
  box-shadow: var(--e2), inset 0 0 0 2px rgba(224,154,45,0.24);
}
.onboarding-person b { display: block; font-size: 13px; color: var(--ink); font-weight: 900; line-height: 1.15; }
.onboarding-person small { display: block; margin-top: 3px; font-size: 10.5px; color: var(--ink-2); font-weight: 800; }
.onboarding-person-card {
  min-height: 100%;
  padding: 22px;
  border-radius: var(--r-card);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.92), rgba(255,248,232,0.72)),
    rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.66);
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.9);
}
.onboarding-person-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.onboarding-person-head .avatar { width: 54px; height: 54px; font-size: 15px; }
.onboarding-person-head h3 { margin: 3px 0 4px; font-size: 25px; line-height: 1.05; color: var(--ink); letter-spacing: 0; }
.onboarding-person-head p { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.onboarding-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.onboarding-facts span {
  min-height: 64px;
  padding: 12px;
  border-radius: var(--r-ctl);
  background: rgba(255,255,255,0.78);
  box-shadow: inset 0 0 0 1px rgba(142,120,80,0.08);
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
}
.onboarding-facts b {
  display: block;
  margin-bottom: 7px;
  font-size: 10px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.onboarding-safety-note {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px;
  border-radius: var(--r-ctl);
  background: #fff1cf;
  color: #80550c;
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.35;
}
.onboarding-safety-note i { flex: none; margin-top: 1px; font-size: 18px; }
.onboarding-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.overwrite-impact { margin-top: 18px; }
.overwrite-impact .tile-grid { margin-bottom: 12px; }
.overwrite-impact-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.overwrite-impact-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 11px 12px;
  border-radius: var(--r-ctl);
  background: #fff;
  box-shadow: var(--e1);
}
.overwrite-impact-row > i {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #20735f;
  background: #e6f5ef;
  font-size: 18px;
}
.overwrite-impact-row b { display: block; color: var(--ink); font-size: 13px; font-weight: 900; }
.overwrite-impact-row span { display: block; margin-top: 3px; color: var(--ink-2); font-size: 11.5px; font-weight: 740; line-height: 1.35; }
.import-safety-note { margin-top: 16px; }
.builder-print-panel {
  max-height: calc(100dvh - 58px);
  display: flex;
  flex-direction: column;
}
.builder-print-panel .m-title { padding-right: 52px; }
.builder-print-screen-note { max-width: 720px; }
.builder-print-pages {
  flex: 1 1 auto;
  display: grid;
  gap: 18px;
  min-height: 360px;
  margin-top: 20px;
  overflow: auto;
  padding-right: 4px;
}
.builder-print-sheet {
  overflow: visible;
  padding: 24px;
  border-radius: var(--r-card);
  background: #fffdf8;
  color: #241f18;
  box-shadow: var(--e1), inset 0 0 0 1px rgba(120,90,40,0.10);
}
.builder-print-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.builder-print-sheet-head span {
  color: #8c806d;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.builder-print-sheet-head h2 {
  margin-top: 3px;
  color: #241f18;
  font-size: 32px;
  font-weight: 950;
  letter-spacing: -0.04em;
}
.builder-print-sheet-head p {
  margin-top: 5px;
  color: #615849;
  font-size: 13px;
  font-weight: 750;
}
.builder-print-sheet-stats {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 2px 10px;
  align-items: baseline;
  padding: 12px 14px;
  border-radius: 16px;
  background: #f7efe1;
}
.builder-print-sheet-stats b {
  color: #241f18;
  font-size: 23px;
  font-weight: 950;
  text-align: right;
}
.builder-print-sheet-stats span {
  color: #756a59;
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}
.builder-print-legend {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.builder-print-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #615849;
  font-size: 13px;
  font-weight: 850;
}
.builder-print-legend b {
  min-width: 30px;
  min-height: 27px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  padding: 3px 6px;
  font-weight: 950;
}
.builder-print-table-wrap { overflow: auto; }
.builder-print-table {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(36,31,24,0.42);
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}
.builder-print-staff-col { width: 190px; }
.builder-print-table th,
.builder-print-table td {
  min-height: 0;
  padding: 0;
  vertical-align: middle;
  border: 1px solid rgba(36,31,24,0.30);
}
.builder-print-table thead th,
.builder-print-date-row th {
  height: 30px;
  border-radius: 0;
  background: #ead7e5;
  color: #241f18;
  font-size: 10px;
  line-height: 1;
  text-align: center;
}
.builder-print-table thead th.weekend,
.builder-print-date-row th.weekend { color: #9b550b; background: #fff1d7; }
.builder-print-table thead th.outside-month,
.builder-print-date-row th.outside-month { color: #a99d8b; background: #f4efe6; opacity: .68; }
.builder-print-table thead th b,
.builder-print-table thead th span,
.builder-print-date-row th b,
.builder-print-date-row th span { display: block; }
.builder-print-table thead th b,
.builder-print-date-row th b { font-size: 15px; }
.builder-print-table thead th span,
.builder-print-date-row th span { margin-top: 2px; color: #6e6658; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.builder-print-staff-head,
.builder-print-staff {
  text-align: left !important;
}
.builder-print-staff-head {
  padding-left: 8px !important;
  font-size: 11px !important;
  font-weight: 950;
}
.builder-print-staff {
  padding: 4px 7px !important;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
.builder-print-staff b {
  display: block;
  overflow: hidden;
  color: #111;
  font-size: 11px;
  font-weight: 950;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.builder-print-staff small {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #5f574b;
  font-size: 8.5px;
  font-weight: 800;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.builder-print-section th {
  padding: 5px 9px !important;
  border-radius: 0;
  background: #e7def5;
  color: #5a44a0;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.2px;
  text-align: left;
}
.builder-print-section.section-med th {
  background: #d2efe9;
  color: var(--med-ink);
}
.builder-print-section.section-care th {
  background: #e8f1ff;
  color: var(--care-ink);
}
.builder-print-section.section-noc th {
  background: #e7def5;
  color: var(--noc-ink);
}
.builder-print-table td {
  height: 24px;
  background: #fff;
  color: #111;
  text-align: center;
  overflow: hidden;
  vertical-align: middle;
}
.builder-print-staff-row.is-odd .builder-print-staff,
.builder-print-staff-row.is-odd td:not(.has-time-off) { background: #d9d9d9; }
.builder-print-table td.outside-month { background: #f2f0ec; }
.builder-print-table td.has-time-off { background: #ff1919 !important; color: #111; }
.builder-print-table td.has-multiple-shifts {
  padding: 1px;
}
.builder-print-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  color: #111 !important;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}
.builder-print-table td.has-multiple-shifts .builder-print-slot {
  display: flex;
  width: 100%;
  margin-left: 0;
  font-size: 9px;
}
.builder-print-slot + .builder-print-slot { margin-left: 2px; margin-top: 0; }
.builder-print-table td.has-multiple-shifts .builder-print-slot + .builder-print-slot {
  margin-left: 0;
  margin-top: 1px;
}
.builder-print-legend .band-a { background: #fff1d3; color: #87510c; }
.builder-print-legend .band-p { background: #eaf1ff; color: #376bd1; }
.builder-print-legend .band-n { background: #eee9ff; color: #5a44a0; }
.builder-print-legend .band-f { background: #e8f6f2; color: #1c6f63; }
.builder-print-legend .band-ro { background: #ffe7e0; color: #9a3927; }
.builder-print-actions {
  flex: none;
  margin-top: 18px;
}
.builder-publish-panel .m-title,
.scheduler-delete-month-panel .m-title { padding-right: 52px; }
.builder-publish-summary .tile-grid,
.scheduler-delete-month-summary .tile-grid { grid-template-columns: 1.1fr 0.8fr 1.2fr; }
.builder-publish-week-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.builder-publish-week,
.builder-publish-empty {
  min-height: 86px;
  padding: 13px 12px;
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(255,255,255,0.94), rgba(255,246,234,0.74));
  border: 1px solid rgba(219,130,24,0.28);
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.82);
}
.builder-publish-week { display: grid; align-content: center; gap: 4px; }
.builder-publish-week span {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}
.builder-publish-week b { color: var(--ink); font-size: 18px; font-weight: 950; letter-spacing: -0.35px; }
.builder-publish-week small { color: var(--ink-3); font-size: 10.5px; font-weight: 780; }
.builder-publish-empty {
  grid-column: 1 / -1;
  min-height: 60px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
}
.builder-publish-warning,
.builder-publish-error,
.builder-publish-progress,
.scheduler-delete-month-warning,
.scheduler-delete-month-error,
.scheduler-delete-month-progress {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  margin-top: 13px;
  padding: 12px 13px;
  border-radius: var(--r-ctl);
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.70);
}
.builder-publish-warning,
.scheduler-delete-month-warning { background: #ffe4b7; color: #8a570f; }
.builder-publish-error,
.scheduler-delete-month-error { background: #f8d9d3; color: #8d2118; }
.builder-publish-progress,
.scheduler-delete-month-progress { background: #e9f0ff; color: #304ea8; }
.builder-publish-warning > i,
.builder-publish-error > i,
.builder-publish-progress > i,
.scheduler-delete-month-warning > i,
.scheduler-delete-month-error > i,
.scheduler-delete-month-progress > i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(255,255,255,0.62);
  font-size: 19px;
}
.builder-publish-warning b,
.builder-publish-error b,
.builder-publish-progress b,
.scheduler-delete-month-warning b,
.scheduler-delete-month-error b,
.scheduler-delete-month-progress b { display: block; font-size: 13px; font-weight: 950; }
.builder-publish-warning span,
.builder-publish-error span,
.builder-publish-progress span,
.scheduler-delete-month-warning span,
.scheduler-delete-month-error span,
.scheduler-delete-month-progress span { display: block; font-size: 12px; font-weight: 780; line-height: 1.35; }
.builder-publish-actions .pill,
.scheduler-delete-month-actions .pill { min-height: 42px; }
.builder-publish-actions .pill.primary:disabled,
.scheduler-delete-month-actions .pill.danger:disabled { opacity: 0.64; cursor: not-allowed; box-shadow: var(--e1); }
.modal-panel.staff-needs-panel { width: min(1040px, 100%); }
.staff-needs-layout {
  display: grid;
  grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
  gap: 18px;
  margin-top: 22px;
}
.staff-needs-editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  border-radius: var(--r-card);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.92), rgba(255,249,205,0.52)),
    rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.66);
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.88);
}
.staff-need-seg {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  padding: 5px;
  border-radius: 13px;
  background: var(--card-2);
  box-shadow: inset 0 0 0 1px rgba(120,90,40,0.08);
}
.staff-need-seg button {
  min-width: 0;
  min-height: 48px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  display: grid;
  place-items: center;
  gap: 4px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 900;
  line-height: 1.1;
  padding: 7px 5px;
}
.staff-need-seg button i { font-size: 17px; }
.staff-need-seg button.on {
  background: #fff470;
  color: #4d4200;
  box-shadow: var(--e1), inset 0 0 0 1px rgba(190,150,0,0.18);
}
.staff-need-seg button:hover,
.staff-need-seg button:focus-visible {
  background: rgba(255,255,255,0.76);
  color: #4d4200;
  outline: none;
}
.staff-need-unit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.staff-need-count-row {
  display: grid;
  grid-template-columns: minmax(110px, 150px) minmax(0, 1fr);
  gap: 12px;
  align-items: end;
}
.staff-need-count {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(120,90,40,0.18);
  background: #fff;
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.72);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  font-weight: 900;
  padding: 8px 11px;
}
.staff-need-count:focus { outline: 2px solid rgba(245,151,30,0.44); outline-offset: 2px; }
.staff-need-preview-pill {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 13px;
  border-radius: var(--r-pill);
  background: #fff470;
  color: #4d4200;
  box-shadow: var(--e1), inset 0 0 0 1px rgba(190,150,0,0.18);
}
.staff-need-preview-pill b { font-size: 13px; font-weight: 950; }
.staff-need-preview-pill span { font-size: 11px; font-weight: 900; color: #665600; }
.staff-need-calendar-card {
  min-width: 0;
  padding: 18px;
  border-radius: var(--r-card);
  background: rgba(255,255,255,0.68);
  border: 1px solid rgba(255,255,255,0.62);
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.82);
}
.staff-need-calendar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.staff-need-calendar-head b { display: block; margin-top: 4px; color: var(--ink); font-size: 16px; font-weight: 900; }
.staff-need-calendar .timeoff-calendar-head { background: #fff470; color: #4d4200; }
.staff-need-calendar .timeoff-calendar-head span,
.staff-need-calendar .timeoff-calendar-head small { color: #4d4200; }
.staff-need-day {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  display: grid;
  place-items: center;
  gap: 2px;
  font: inherit;
  font-weight: 900;
  padding: 5px;
}
.staff-need-day span { font-size: 12px; line-height: 1; }
.staff-need-day b {
  min-height: 14px;
  color: inherit;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
}
.staff-need-day.has-need {
  background: rgba(255,244,112,0.36);
  color: #665600;
  box-shadow: inset 0 0 0 1px rgba(212,172,0,0.18);
}
.staff-need-day.selected {
  background: #fff470;
  color: #4d4200;
  box-shadow: var(--e1), inset 0 0 0 1px rgba(170,136,0,0.24);
}
.staff-need-day.outside { opacity: .36; cursor: not-allowed; }
.staff-need-day:hover:not(:disabled),
.staff-need-day:focus-visible {
  background: rgba(255,255,255,0.74);
  color: #4d4200;
  outline: none;
}
.staff-needs-current { margin-top: 20px; }
.staff-needs-current-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.staff-need-current-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--r-ctl);
  background: #fff;
  box-shadow: var(--e1);
}
.staff-need-current-code {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #fff470;
  color: #4d4200;
  font-size: 13px;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(190,150,0,0.18);
}
.staff-need-current-code small { display: block; margin-top: -7px; font-size: 7px; color: #665600; }
.staff-need-current-row b { display: block; color: var(--ink); font-size: 12.5px; font-weight: 900; }
.staff-need-current-row span { display: block; margin-top: 3px; color: var(--ink-2); font-size: 11px; font-weight: 760; }

.m-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.mchip { font-size: 10.5px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase;
  padding: 5px 11px; border-radius: var(--r-pill); }
.mchip.care { background: var(--care); color: var(--care-ink); }
.mchip.med  { background: var(--med);  color: var(--med-ink); }
.mchip.green{ background: var(--safe); color: var(--safe-ink); }
.mchip.blue { background: var(--care); color: var(--care-ink); }
.mchip.staff-need-chip { background: #fff470; color: #4d4200; }
.mchip.draft { background: rgba(255,255,255,0.58); color: var(--ink-2);
  box-shadow: inset 0 0 0 1px rgba(120,90,40,0.10); }
.mchip.neutral { background: var(--card-2); color: var(--ink-2); }
.m-title { font-size: 27px; font-weight: 800; letter-spacing: -0.8px; color: var(--ink); }
.m-sub { font-size: 13px; color: var(--ink-2); font-weight: 500; margin-top: 4px; }
.day-modal-chips {
  align-items: center;
  gap: 10px;
  padding-right: 50px;
}
.day-modal-chips .date-focus-chip {
  border: 1px solid rgba(255,255,255,0.68);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.76), rgba(255,255,255,0.34)),
    rgba(255,255,255,0.48);
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.78);
  color: var(--ink);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0;
  padding: 9px 18px;
  text-transform: none;
}
.day-modal-sub {
  display: flex;
  align-items: center;
  margin-top: 12px;
  min-height: 43px;
}
.day-person-glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  border: 1px solid rgba(255,255,255,0.62);
  border-radius: var(--r-pill);
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,0.82), rgba(255,255,255,0) 34%),
    linear-gradient(135deg, rgba(255,255,255,0.52), rgba(255,255,255,0.18)),
    rgba(255,255,255,0.28);
  -webkit-backdrop-filter: blur(18px) saturate(178%) contrast(1.03);
  backdrop-filter: blur(18px) saturate(178%) contrast(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    inset 0 -1px 0 rgba(120,90,40,0.08),
    0 12px 30px rgba(70,45,12,0.12);
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.1;
  padding: 9px 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.day-person-glass::after {
  content: "";
  position: absolute;
  inset: 1px;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: inherit;
  pointer-events: none;
}

.m-assignee { display: flex; align-items: center; gap: 13px; margin: 18px 0; padding: 14px 16px;
  border-radius: var(--r-ctl); background: var(--card-2); box-shadow: var(--well); }
.m-assignee .avatar { width: 44px; height: 44px; font-size: 14px; }
.m-assignee .sc-name { font-size: 15px; }
.status-chip { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  font-weight: 700; color: var(--safe-ink); background: var(--safe); padding: 7px 13px; border-radius: var(--r-pill); }
.status-chip i { font-size: 15px; }
.m-action-row {
  display: flex;
  justify-content: flex-end;
  margin: -4px 0 18px;
}
.m-action-row .pill.strong {
  min-height: 40px;
  padding-inline: 18px;
  font-weight: 900;
}
.m-action-row .pill.callout-revert {
  color: #8d2118;
  background: #fff;
  border-color: rgba(141,33,24,0.58);
  box-shadow: var(--e1), inset 0 0 0 2px rgba(141,33,24,0.22);
}
.m-action-row .pill.callout-revert:hover {
  color: #6f1712;
  border-color: rgba(141,33,24,0.78);
  box-shadow: var(--e2), inset 0 0 0 2px rgba(141,33,24,0.34);
}
.m-action-row .pill.callout-revert i { color: #8d2118; }
.callout-banner {
  margin: -4px 0 16px;
  background: #fff0ec;
  color: #8d2118;
  box-shadow: inset 4px 0 0 #8d2118, var(--well);
}

.m-section { margin-top: 20px; }
.m-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.m-section-head .muted { font-size: 12px; }
.weekly-summary { --week-accent: rgba(120,90,40,0.16); --week-accent-soft: rgba(120,90,40,0.06);
  position: relative; padding: 2px 0 0; }
.weekly-summary::after { content: ""; position: absolute; inset: 35px -12px -10px; border-radius: 24px; pointer-events: none;
  box-shadow: inset 5px 0 0 var(--week-accent), inset -1px 0 0 var(--week-accent-soft); }
.weekly-summary.is-ot { --week-accent: #c8543b; --week-accent-soft: rgba(200,84,59,0.12); }
.weekly-summary.is-dt { --week-accent: #7b1f17; --week-accent-soft: rgba(123,31,23,0.14); }
.weekly-summary .m-section-head,
.weekly-summary .tile-grid { position: relative; z-index: 1; }
.week-label-pill { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--care); color: var(--care-ink); font-size: 13px; font-weight: 950; letter-spacing: 0.5px;
  box-shadow: inset 0 0 0 1px rgba(55,107,209,0.16), var(--well); }

.tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tile-grid.four { grid-template-columns: repeat(4, 1fr); }
.tile { padding: 13px 15px; border-radius: var(--r-ctl); background: #fff; box-shadow: var(--e1),
  inset 0 0 0 1px rgba(255,255,255,0.5); }
.tile .label { display: block; margin-bottom: 5px; }
.tile b { font-size: 18px; font-weight: 800; color: var(--ink); }

.bar { position: relative; height: 30px; border-radius: var(--r-pill); background: rgba(74,122,49,0.14);
  overflow: hidden; display: flex; align-items: center; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-pill);
  background: linear-gradient(90deg, #6cbf5e, #3a7a2e); }
.bar .bar-cap { position: relative; z-index: 1; font-size: 11.5px; font-weight: 800; color: #2c5520; padding-left: 14px; }
.bar.warn { background: rgba(212,128,20,0.16); } .bar.warn i { background: linear-gradient(90deg, #f0a82e, #c47a0e); }

.weekov { display: flex; flex-direction: column; gap: 8px; }
.wk-row { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: var(--r-ctl);
  background: #fff; box-shadow: var(--e1); }
.wk-row.on { background: var(--care); box-shadow: var(--e1), inset 0 0 0 1.5px var(--care-ink); }
.wk-day { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center;
  font-size: 15px; font-weight: 800; color: #fff; }
.wk-day.care { background: linear-gradient(150deg, #78b4ff, #4f82e6); }
.wk-day.med  { background: linear-gradient(150deg, #28bca9, #1b8274); }
.wk-main { flex: 1; font-size: 13px; color: var(--ink-2); font-weight: 600; }
.wk-main b { color: var(--ink); font-weight: 800; }
.wk-time { font-size: 12px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.ot-progress { margin-top: 14px; padding: 14px; border-radius: var(--r-ctl);
  background: rgba(255,255,255,0.72); box-shadow: var(--well); }
.ot-progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 12.5px; font-weight: 800; color: var(--ink); }
.ot-progress-head b { font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.ot-progress-track { height: 12px; border-radius: var(--r-pill); background: rgba(120,90,40,0.12);
  overflow: hidden; margin-top: 10px; }
.ot-progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6aa85c, #3f7d35); }
.ot-progress p { margin-top: 8px; font-size: 11.5px; font-weight: 650; color: var(--ink-3); line-height: 1.45; }
.ot-progress.is-near .ot-progress-track i { background: linear-gradient(90deg, #f0b85f, #c98120); }
.ot-progress.is-ot .ot-progress-track i { background: linear-gradient(90deg, #e57b67, #c8543b); }
.ot-progress.is-dt .ot-progress-track i { background: linear-gradient(90deg, #b64637, #812118); }
.ot-progress.is-ot,
.ot-progress.is-dt { box-shadow: var(--well), inset 4px 0 0 rgba(200,84,59,0.8); }
.ot-progress.is-dt { box-shadow: var(--well), inset 4px 0 0 #8d2118; }
.punch-stack { margin-top: 6px; border-radius: var(--r-ctl); background: rgba(255,255,255,0.70);
  box-shadow: var(--well); overflow: hidden; }
.punch-stack summary { list-style: none; display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 13px 15px; color: var(--ink); font-size: 12.5px; font-weight: 850; }
.punch-stack summary::-webkit-details-marker { display: none; }
.punch-stack summary b { margin-left: auto; color: var(--ink-3); font-size: 11px; font-weight: 800; }
.punch-stack summary i { color: var(--ink-3); transition: transform .18s var(--ease); }
.punch-stack[open] summary i { transform: rotate(180deg); }
.punch-stack-list { display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; }
.punch-stack[open] .punch-stack-list {
  max-height: min(360px, 42vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 10px;
}
#shiftModal .punch-stack[open] .punch-stack-list {
  max-height: min(300px, 34vh);
}
.punch-stack-list:focus-visible,
.watch-scroll:focus-visible {
  outline: 2px solid rgba(219,130,24,0.45);
  outline-offset: 3px;
}
.punch-stack-list::-webkit-scrollbar,
.watch-scroll::-webkit-scrollbar {
  width: 9px;
}
.punch-stack-list::-webkit-scrollbar-track,
.watch-scroll::-webkit-scrollbar-track {
  background: rgba(120,90,40,0.08);
  border-radius: var(--r-pill);
}
.punch-stack-list::-webkit-scrollbar-thumb,
.watch-scroll::-webkit-scrollbar-thumb {
  background: rgba(120,90,40,0.30);
  border: 2px solid rgba(255,255,255,0.70);
  border-radius: var(--r-pill);
}
.punch-stack-list::-webkit-scrollbar-thumb:hover,
.watch-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(120,90,40,0.42);
}
.punch-row { display: grid; grid-template-columns: 58px minmax(0,1fr) auto; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 15px; background: #fff; box-shadow: var(--e1); }
.punch-date { width: 46px; height: 38px; border-radius: 12px; display: grid; place-items: center;
  background: var(--card-2); color: var(--ink-2); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.punch-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.punch-main b { color: var(--ink); font-size: 12.5px; font-weight: 850; }
.punch-time { font-size: 11.5px; font-weight: 800; color: var(--ink-2); white-space: nowrap; }
.punch-detail-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.92fr); gap: 14px; align-items: start; }
.punch-detail-panel { min-width: 0; border-radius: var(--r-ctl); background: rgba(255,255,255,0.74);
  box-shadow: var(--well); padding: 14px; }
.punch-detail-panel.selected { background: #fff; box-shadow: var(--e1), inset 0 0 0 1px rgba(74,122,49,0.14); }
.punch-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.punch-detail-head .label { display: block; margin-bottom: 4px; }
.punch-detail-head p { margin: 0; color: var(--ink-3); font-size: 11.5px; font-weight: 650; line-height: 1.35; }
.punch-detail-head b { flex: none; color: var(--ink-2); font-size: 11.5px; font-weight: 850; white-space: nowrap; }
.punch-week-list { display: flex; flex-direction: column; gap: 9px; max-height: min(360px, 42vh);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding-right: 8px; }
#shiftModal .punch-week-list { max-height: min(330px, 36vh); }
.punch-week-list:focus-visible {
  outline: 2px solid rgba(219,130,24,0.45);
  outline-offset: 3px;
}
.punch-week-list::-webkit-scrollbar { width: 9px; }
.punch-week-list::-webkit-scrollbar-track { background: rgba(120,90,40,0.08); border-radius: var(--r-pill); }
.punch-week-list::-webkit-scrollbar-thumb {
  background: rgba(120,90,40,0.30);
  border: 2px solid rgba(255,255,255,0.70);
  border-radius: var(--r-pill);
}
.punch-tabbed-detail { display: grid; gap: 13px; }
.punch-day-tabs { display: flex; flex-wrap: wrap; gap: 15px 9px; align-items: center; padding-top: 8px; }
.punch-day-tab { border: 1px solid rgba(120,90,40,0.12); border-radius: var(--r-pill); background: rgba(255,255,255,0.78);
  box-shadow: var(--well); color: var(--ink-3); cursor: pointer; min-width: 104px; padding: 9px 14px;
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; font: inherit;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); }
.punch-day-tab:hover { transform: translateY(-1px); box-shadow: var(--e1); background: #fff; }
.punch-day-tab.active { background: rgba(232,247,222,0.96); color: #315d25; border-color: rgba(74,122,49,0.28);
  box-shadow: var(--e1), inset 0 0 0 1.5px rgba(74,122,49,0.18); }
.punch-day-tab span { font-size: 11px; font-weight: 900; text-transform: uppercase; }
.punch-day-tab b { color: var(--ink); font-size: 12px; font-weight: 900; white-space: nowrap; }
.punch-day-tab.active b { color: #315d25; }
.punch-day-premium {
  position: absolute;
  left: 50%;
  top: -11px;
  min-width: 34px;
  min-height: 20px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  box-shadow: var(--e1), inset 0 0 0 1px rgba(255,255,255,0.68);
}
.punch-day-premium.is-ot { background: #fff0ec; color: #a04432; }
.punch-day-premium.is-dt { background: #fde0d9; color: #7b1f17; }
.punch-focus-card { position: relative; border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(251,249,244,0.96));
  box-shadow: var(--e1), inset 0 0 0 1px rgba(120,90,40,0.10); padding: 18px; overflow: hidden; }
.punch-focus-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: linear-gradient(180deg, #71a85c, #3a7a2e); opacity: 0.9; }
.punch-focus-card.is-current { background: linear-gradient(180deg, #fbfff7, #f2faeb);
  box-shadow: var(--e1), inset 0 0 0 1.5px rgba(74,122,49,0.24); }
.punch-focus-card.is-empty::before { background: rgba(120,90,40,0.24); }
.punch-focus-card.has-premium .punch-focus-title { padding-top: 38px; }
.punch-focus-title { text-align: center; padding: 2px 12px 14px; }
.punch-focus-title h3 { margin: 0; color: var(--ink); font-size: clamp(24px, 2.8vw, 34px); line-height: 1.05; font-weight: 900; letter-spacing: 0; }
.punch-focus-title span { display: block; margin-top: 5px; color: var(--ink-2); font-size: 16px; font-weight: 850; }
.punch-focus-premium {
  position: absolute;
  top: 16px;
  left: 20px;
  z-index: 1;
  max-width: min(300px, 42%);
  min-height: 31px;
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  font-size: 12.5px;
  font-weight: 950;
  line-height: 1.1;
  color: #7b1f17;
  background: #fde4df;
  box-shadow: var(--e1), inset 0 0 0 1px rgba(132,31,23,0.14);
}
.punch-focus-premium.is-ot { color: #a04432; background: #fff0ec; }
.punch-focus-premium.is-dt { color: #7b1f17; background: #fde0d9; }
.punch-focus-worked { position: absolute; top: 16px; right: 18px; color: #3a6e2a; font-size: 12px; font-weight: 900;
  padding: 6px 11px; border-radius: var(--r-pill); background: rgba(225,243,215,0.92); box-shadow: inset 0 0 0 1px rgba(74,122,49,0.14); }
.punch-focus-lines { display: grid; gap: 11px; margin: 0; }
.punch-focus-line { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 15px;
  padding: 14px 16px; border-radius: 17px; background: rgba(255,255,255,0.82);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.72), var(--well); }
.punch-focus-line dt { color: var(--ink-3); font-size: 12px; font-weight: 950; text-transform: uppercase; }
.punch-focus-line dd { margin: 0; min-width: 0; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.punch-focus-line dd b { color: var(--ink); font-size: 23px; font-weight: 950; line-height: 1.08; overflow-wrap: anywhere; }
.punch-focus-line dd span { color: var(--ink-3); font-size: 12px; font-weight: 700; text-align: right; }
.ot-focus-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ot-focus-chip { display: inline-flex; align-items: center; min-height: 28px; padding: 6px 12px; border-radius: var(--r-pill);
  background: rgba(255,255,255,0.78); color: var(--ink-2); font-size: 12px; font-weight: 900; box-shadow: var(--well); }
.ot-focus-chip.is-ot { background: #fff0ec; color: #a43f2d; box-shadow: inset 0 0 0 1px rgba(200,84,59,0.18), var(--well); }
.ot-focus-chip.is-dt { background: #fde4df; color: #7b1f17; box-shadow: inset 0 0 0 1px rgba(132,31,23,0.22), var(--well); }
.conf { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 4px 10px; border-radius: var(--r-pill); background: var(--card-2); color: var(--ink-3); }
.slot-stack {
  position: relative;
  width: 100%;
  display: block;
  padding: 0 0 16px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
  isolation: isolate;
}
.slot-stack::before,
.slot-stack::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  height: 58px;
  border-radius: var(--r-ctl);
  background: rgba(255,255,255,0.72);
  box-shadow: var(--e1);
}
.slot-stack::before { top: 16px; z-index: 0; transform: translateY(14px) scaleX(.982); }
.slot-stack::after { top: 28px; z-index: 0; transform: translateY(16px) scaleX(.958); opacity: .72; }
.slot-stack .wk-row { position: relative; z-index: 1; padding-right: 72px; }
.slot-stack .ph-caret-down {
  position: absolute;
  right: 18px;
  top: 28px;
  z-index: 2;
  font-size: 18px;
  color: var(--accent-ink);
}
.slot-more {
  position: absolute;
  right: 50px;
  bottom: 0;
  z-index: 3;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--accent-ink);
  box-shadow: var(--e1);
  font-size: 10.5px;
  font-weight: 850;
}
.slot-stack:hover .wk-row { box-shadow: var(--e2); }
.slot-stack:active .wk-row { transform: scale(.995); }
.usual-slots-expanded { animation: slotsDrop .26s var(--ease); }
.slot-collapse {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  gap: 6px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--card-2);
  color: var(--ink-2);
  padding: 7px 11px;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(120,90,40,0.08);
}
@keyframes slotsDrop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.m-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }

#planModal .modal-panel { width: min(720px, 100%); }

.m-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m-action { display: flex; align-items: center; gap: 13px; text-align: left; padding: 15px 16px;
  border-radius: var(--r-ctl); border: 1px solid var(--line); background: #fff; box-shadow: var(--e1);
  cursor: pointer; font-family: inherit;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .16s var(--ease); }
.m-action:hover, .m-action:focus-visible {
  border-color: rgba(245,151,30,0.78);
  transform: translateY(-2px);
  box-shadow: var(--e2);
}
.m-action:active { transform: translateY(0); box-shadow: var(--well); }
.m-action.action-amber {
  --done-bg: var(--accent-soft);
  --done-ink: var(--accent-ink);
  --done-border: rgba(245,151,30,0.82);
  --done-ring: rgba(245,151,30,0.18);
}
.m-action.action-blue {
  --done-bg: #e9f0ff;
  --done-ink: #3a55c9;
  --done-border: rgba(58,85,201,0.72);
  --done-ring: rgba(58,85,201,0.16);
}
.m-action.action-green {
  --done-bg: #e8f4e0;
  --done-ink: #3a6e2a;
  --done-border: rgba(74,122,49,0.70);
  --done-ring: rgba(74,122,49,0.16);
}
.m-action.action-purple {
  --done-bg: var(--noc);
  --done-ink: var(--noc-ink);
  --done-border: rgba(90,68,160,0.70);
  --done-ring: rgba(90,68,160,0.16);
}
.m-action.action-teal {
  --done-bg: var(--med);
  --done-ink: var(--med-ink);
  --done-border: rgba(28,111,99,0.66);
  --done-ring: rgba(28,111,99,0.16);
}
.m-action.action-red {
  --done-bg: var(--hot);
  --done-ink: var(--hot-ink);
  --done-border: rgba(176,67,44,0.70);
  --done-ring: rgba(176,67,44,0.16);
}
.m-action.action-neutral {
  --done-bg: #eeebe4;
  --done-ink: #706858;
  --done-border: rgba(138,129,112,0.66);
  --done-ring: rgba(138,129,112,0.16);
}
.m-action .ma-ic { width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center;
  color: #fff; font-size: 20px; box-shadow: 0 8px 16px rgba(70,45,12,0.10), inset 0 0 0 1px rgba(255,255,255,0.18); }
.ma-ic.amber { background: var(--accent-grad); }
.ma-ic.blue  { background: linear-gradient(145deg, #76a0f3, #4d6cd3); }
.ma-ic.green { background: linear-gradient(145deg, #83bd72, #4f8a3d); }
.ma-ic.purple { background: linear-gradient(145deg, #aa93dd, #6a54aa); }
.ma-ic.teal { background: linear-gradient(145deg, #5bbfac, #2c8171); }
.ma-ic.red { background: linear-gradient(145deg, #dd7a65, #b64b35); }
.ma-ic.neutral, .ma-ic { background: linear-gradient(145deg, #bdb7aa, #948b7b); }
.ma-ic.done.amber { background: var(--accent-grad); }
.ma-ic.done.blue { background: linear-gradient(145deg, #76a0f3, #4d6cd3); }
.ma-ic.done.green { background: linear-gradient(145deg, #83bd72, #4f8a3d); }
.ma-ic.done.purple { background: linear-gradient(145deg, #aa93dd, #6a54aa); }
.ma-ic.done.teal { background: linear-gradient(145deg, #5bbfac, #2c8171); }
.ma-ic.done.red { background: linear-gradient(145deg, #dd7a65, #b64b35); }
.ma-ic.done.neutral { background: linear-gradient(145deg, #bdb7aa, #948b7b); }
.m-action b { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.m-action span { font-size: 11.5px; color: var(--ink-2); font-weight: 500; line-height: 1.4; }
.m-action.ghost-action { background: var(--card-2); box-shadow: none; }
.m-action.done {
  border-color: var(--done-border);
  background: var(--done-bg);
  box-shadow: var(--e2), inset 0 0 0 1px var(--done-ring);
  animation: confirmPop .28s var(--ease);
}
.m-action.done b,
.m-action.done span { color: var(--done-ink); }
.plan-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.plan-actions .m-action {
  min-height: 82px;
  padding: 18px;
}
.plan-actions .m-action.primary-action {
  grid-column: 1 / -1;
  min-height: 94px;
  padding: 20px;
}
.plan-actions .m-action.primary-action .ma-ic {
  width: 50px;
  height: 50px;
  font-size: 22px;
}
.plan-actions .m-action.primary-action b { font-size: 15px; }
.plan-actions .m-action.primary-action span { font-size: 12.5px; }
.plan-actions .m-action.clear-action {
  border-color: rgba(138,129,112,0.24);
  background: linear-gradient(180deg, #f1eee8, #e6e1d8);
  box-shadow: var(--e1), inset 0 0 0 1px rgba(255,255,255,0.46);
}
.plan-actions .m-action.clear-action:hover,
.plan-actions .m-action.clear-action:focus-visible {
  border-color: rgba(138,129,112,0.52);
  box-shadow: var(--e2), inset 0 0 0 1px rgba(255,255,255,0.58);
}
.plan-actions .m-action.clear-action b { color: #5f584c; }
.plan-actions .m-action.clear-action span { color: #706858; }
.weekday-apply {
  min-height: 30px;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--done-border);
  border-radius: var(--r-pill);
  background: var(--done-bg);
  color: var(--done-ink);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  padding: 7px 10px;
  box-shadow: inset 0 0 0 1px var(--done-ring);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease);
}
.weekday-apply i { font-size: 14px; }
.weekday-apply span { color: var(--done-ink); font-size: 11px; font-weight: 850; line-height: 1; }
.weekday-apply:hover:not(:disabled) { box-shadow: var(--e1), inset 0 0 0 1px var(--done-ring); transform: translateY(-1px); }
.weekday-apply:active:not(:disabled) { transform: translateY(0) scale(.98); }
.weekday-apply:disabled { opacity: .48; cursor: not-allowed; }
.weekday-apply.ghost {
  border-color: rgba(120,90,40,0.10);
  background: #fff;
  color: var(--ink-2);
  box-shadow: var(--e1);
}
.weekday-apply.ghost span { color: var(--ink-2); }
.repeat-weekday-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border-radius: 13px;
  background: var(--card-2);
  box-shadow: inset 0 0 0 1px rgba(120,90,40,0.08);
}
.repeat-day-wrap {
  position: relative;
  min-width: 0;
}
.repeat-day {
  width: 100%;
  min-width: 0;
  min-height: 62px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  font: inherit;
  padding: 7px 4px;
  transition: transform .14s var(--ease), background-color .14s var(--ease), color .14s var(--ease), box-shadow .14s var(--ease);
}
.repeat-day .repeat-day-name {
  color: inherit;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}
.repeat-day b {
  min-width: 28px;
  min-height: 24px;
  border-radius: 8px;
  border: 1.5px solid rgba(120,90,40,0.26);
  background: #fff;
  display: grid;
  place-items: center;
  gap: 1px;
  color: var(--ink-3);
  padding: 3px 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.76);
}
.repeat-day b i { font-size: 12px; }
.repeat-day b strong {
  color: inherit;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
}
.repeat-day b small {
  color: inherit;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
}
.repeat-day:hover,
.repeat-day:focus-visible {
  background: rgba(255,255,255,0.68);
  color: var(--accent-ink);
  transform: translateY(-1px);
  outline: none;
}
.repeat-day:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.repeat-day.painted { box-shadow: inset 0 0 0 1.5px rgba(120,90,40,0.12); }
.repeat-day.painted.tone-a { background: var(--warn); color: var(--warn-ink); }
.repeat-day.painted.tone-p { background: var(--pm); color: var(--pm-ink); }
.repeat-day.painted.tone-n { background: var(--noc); color: var(--noc-ink); }
.repeat-day.painted.tone-f { background: var(--med); color: var(--med-ink); }
.repeat-day.painted b {
  border-color: currentColor;
  background: rgba(255,255,255,0.58);
  color: inherit;
}
.repeat-day-clear {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(120,90,40,0.14);
  border-radius: 50%;
  background: rgba(255,255,255,0.84);
  color: var(--ink-3);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 10px;
  box-shadow: var(--e1);
  transition: transform .14s var(--ease), color .14s var(--ease), box-shadow .14s var(--ease);
}
.repeat-day-clear:hover,
.repeat-day-clear:focus-visible {
  color: var(--hot-ink);
  transform: translateY(-1px);
  outline: none;
  box-shadow: var(--e2);
}
.weekday-shift-seg {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 5px;
  border-radius: 13px;
  background: var(--card-2);
  box-shadow: inset 0 0 0 1px rgba(120,90,40,0.08);
}
.weekday-shift-btn {
  --seg-bg: var(--warn);
  --seg-ink: var(--warn-ink);
  min-width: 0;
  min-height: 31px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 850;
  padding: 6px 5px;
  transition: transform .14s var(--ease), background-color .14s var(--ease), color .14s var(--ease), box-shadow .14s var(--ease);
}
.weekday-shift-btn i { font-size: 13px; flex: none; }
.weekday-shift-btn span { font-size: 10.5px; font-weight: 850; color: inherit; line-height: 1; }
.weekday-shift-btn.tone-a { --seg-bg: var(--warn); --seg-ink: var(--warn-ink); }
.weekday-shift-btn.tone-p { --seg-bg: var(--pm); --seg-ink: var(--pm-ink); }
.weekday-shift-btn.tone-n { --seg-bg: var(--noc); --seg-ink: var(--noc-ink); }
.weekday-shift-btn.tone-f { --seg-bg: var(--med); --seg-ink: var(--med-ink); }
.weekday-shift-btn:hover {
  color: var(--seg-ink);
  background: rgba(255,255,255,0.66);
  transform: translateY(-1px);
}
.weekday-shift-btn.on {
  background: var(--seg-bg);
  color: var(--seg-ink);
  box-shadow: inset 0 0 0 1.5px var(--seg-ink), 0 6px 14px rgba(70,45,12,0.08);
}
.m-action.done .weekday-shift-btn:not(.on) { color: var(--ink-3); }
.m-action.done .weekday-shift-btn span { color: inherit; }
.weekday-shift-btn:active { transform: translateY(0) scale(.98); }
.repeat-unit-paint-grid {
  --unit-paint-bg: var(--warn);
  --unit-paint-ink: var(--warn-ink);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  padding: 6px;
  border-radius: 13px;
  background: var(--card-2);
  box-shadow: inset 0 0 0 1px rgba(120,90,40,0.08);
}
.repeat-unit-paint-grid.band-a { --unit-paint-bg: var(--warn); --unit-paint-ink: var(--warn-ink); }
.repeat-unit-paint-grid.band-p { --unit-paint-bg: var(--pm); --unit-paint-ink: var(--pm-ink); }
.repeat-unit-paint-grid.band-n { --unit-paint-bg: var(--noc); --unit-paint-ink: var(--noc-ink); }
.repeat-unit-paint-grid.band-f { --unit-paint-bg: var(--med); --unit-paint-ink: var(--med-ink); }
.repeat-unit-paint {
  min-width: 0;
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  font: inherit;
  padding: 7px 5px;
  transition: transform .14s var(--ease), background-color .14s var(--ease), color .14s var(--ease), box-shadow .14s var(--ease);
}
.repeat-unit-paint b {
  color: inherit;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
}
.repeat-unit-paint span {
  max-width: 100%;
  overflow: hidden;
  color: inherit;
  font-size: 9.5px;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.repeat-unit-paint:hover,
.repeat-unit-paint:focus-visible {
  background: rgba(255,255,255,0.68);
  color: var(--unit-paint-ink);
  transform: translateY(-1px);
  outline: none;
}
.repeat-unit-paint.on {
  background: var(--unit-paint-bg);
  color: var(--unit-paint-ink);
  box-shadow: inset 0 0 0 1.5px var(--unit-paint-ink), 0 6px 14px rgba(70,45,12,0.08);
}
.repeat-unit-paint:active { transform: translateY(0) scale(.98); }
.repeat-days-panel { width: min(720px, 100%); }
.repeat-builder {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}
.repeat-editor,
.repeat-days-painter {
  display: grid;
  gap: 14px;
  border-radius: var(--r-ctl);
  background: linear-gradient(180deg, rgba(255,255,255,0.84), rgba(255,250,242,0.72));
  box-shadow: inset 0 0 0 1px rgba(120,90,40,0.10), var(--e1);
  padding: 14px;
}
.repeat-editor-head,
.repeat-painter-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.repeat-editor-head > div,
.repeat-painter-head > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.repeat-editor-head b,
.repeat-painter-head b {
  color: var(--ink);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.25;
}
.repeat-painter-head > span {
  flex: none;
  max-width: 190px;
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.35;
  text-align: right;
}
.repeat-field {
  display: grid;
  gap: 8px;
}
.paint-grid { padding: 7px; }
.repeat-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
}

.day-assignment-stack {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding: 12px;
  border-radius: var(--r-ctl);
  background: rgba(255,255,255,0.70);
  box-shadow: inset 0 0 0 1px rgba(120,90,40,0.10);
}
.day-assignment-stack-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.day-assignment-stack-head b {
  font-size: 13px;
  font-weight: 850;
  color: var(--ink);
}
.day-assignment-stack-head span {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.day-assignment-stack-list { display: grid; gap: 8px; }
.day-assignment-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-ctl);
  background: #fff;
  box-shadow: var(--e1);
}
.day-assignment-row .gcell {
  width: 58px;
  min-width: 58px;
  height: 48px;
  min-height: 48px;
  cursor: default;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.day-assignment-row .gcell.long {
  font-size: 10px;
  letter-spacing: -0.05em;
}
.day-assignment-row-main {
  min-width: 0;
}
.day-assignment-row-main b {
  display: block;
  font-size: 13.5px;
  font-weight: 850;
  color: var(--ink);
}
.day-assignment-row-main span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.builder-shift-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.builder-shift-row-actions.unavailable {
  min-width: 128px;
  justify-content: center;
  padding: 8px 10px;
  border-radius: var(--r-pill);
  background: #f4f1ea;
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 850;
}
.builder-shift-row-actions.unavailable span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.builder-shift-action {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(120,90,40,0.10);
  background: #fff;
  color: var(--ink-2);
  box-shadow: var(--e1);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease), background-color .16s var(--ease);
}
.builder-shift-action i {
  font-size: 14px;
}
.builder-shift-action:hover:not(:disabled), .builder-shift-action:focus-visible:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--e2);
}
.builder-shift-action.amber:hover:not(:disabled), .builder-shift-action.amber.editing {
  border-color: rgba(245,151,30,0.62);
  background: #fff9ee;
  color: var(--warn-ink);
}
.builder-shift-action.blue:hover:not(:disabled) {
  border-color: rgba(55,107,209,0.54);
  background: #f5f8ff;
  color: var(--pm-ink);
}
.builder-shift-action.danger:hover:not(:disabled) {
  border-color: rgba(176,67,44,0.42);
  background: #fff2ed;
  color: var(--hot-ink);
}
.builder-shift-action:disabled {
  opacity: .58;
  cursor: not-allowed;
  transform: none;
  box-shadow: var(--e1);
}
.day-assignment-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--r-ctl);
  background: rgba(255,230,188,0.58);
  color: var(--warn-ink);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
  box-shadow: inset 0 0 0 1px rgba(160,92,12,0.12);
}
.day-assignment-note i {
  flex: none;
  margin-top: 1px;
  font-size: 17px;
}
.day-assignment-error {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: var(--r-ctl);
  background: rgba(250,217,205,0.68);
  color: var(--hot-ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  box-shadow: inset 0 0 0 1px rgba(176,67,44,0.18);
}
.day-assignment-error i {
  flex: none;
  margin-top: 1px;
  font-size: 17px;
}
.day-editor { display: grid; gap: 18px; margin-top: 22px; }
.day-field { display: grid; gap: 9px; }
.shift-pick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.shift-pick {
  --pick-bg: var(--card-2);
  --pick-ink: var(--ink-2);
  min-height: 76px;
  border-radius: var(--r-ctl);
  border: 1px solid rgba(120,90,40,0.10);
  background: #fff;
  color: var(--pick-ink);
  cursor: pointer;
  font-family: inherit;
  display: grid;
  place-items: center;
  gap: 5px;
  box-shadow: var(--e1);
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease), border-color .16s var(--ease);
}
.shift-pick i { width: 31px; height: 31px; border-radius: 10px; display: grid; place-items: center;
  background: var(--pick-bg); font-size: 18px; }
.shift-pick span { font-size: 12px; font-weight: 800; }
.shift-pick.a { --pick-bg: var(--warn); --pick-ink: var(--warn-ink); }
.shift-pick.p { --pick-bg: var(--pm); --pick-ink: var(--pm-ink); }
.shift-pick.n { --pick-bg: var(--noc); --pick-ink: var(--noc-ink); }
.shift-pick.f { --pick-bg: var(--med); --pick-ink: var(--med-ink); }
.shift-pick:hover:not(:disabled), .shift-pick:focus-visible:not(:disabled) {
  border-color: rgba(245,151,30,0.78);
  transform: translateY(-1px);
  box-shadow: var(--e2);
}
.shift-pick.on { background: var(--pick-bg); box-shadow: var(--e1), inset 0 0 0 2px var(--pick-ink); }
.shift-pick:disabled { opacity: .62; cursor: not-allowed; transform: none; box-shadow: var(--e1); }
.unit-pick-grid {
  --unit-pick-bg: var(--care);
  --unit-pick-ink: var(--care-ink);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.unit-pick-grid.band-a { --unit-pick-bg: var(--warn); --unit-pick-ink: var(--warn-ink); }
.unit-pick-grid.band-p { --unit-pick-bg: var(--pm); --unit-pick-ink: var(--pm-ink); }
.unit-pick-grid.band-n { --unit-pick-bg: var(--noc); --unit-pick-ink: var(--noc-ink); }
.unit-pick-grid.band-f { --unit-pick-bg: var(--med); --unit-pick-ink: var(--med-ink); }
.unit-pick {
  min-height: 58px;
  border-radius: var(--r-ctl);
  border: 1px solid rgba(120,90,40,0.10);
  background: #fff;
  color: var(--ink-2);
  box-shadow: var(--e1);
  cursor: pointer;
  font-family: inherit;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 2px;
  padding: 10px 12px;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.unit-pick b { font-size: 13px; font-weight: 850; color: var(--ink); letter-spacing: 0; }
.unit-pick span { font-size: 10.5px; font-weight: 700; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.unit-pick:hover:not(:disabled), .unit-pick:focus-visible:not(:disabled) {
  border-color: rgba(245,151,30,0.78);
  transform: translateY(-1px);
  box-shadow: var(--e2);
}
.unit-pick.on { background: var(--unit-pick-bg); color: var(--unit-pick-ink); box-shadow: var(--e1), inset 0 0 0 2px var(--unit-pick-ink); }
.unit-pick.on b, .unit-pick.on span { color: var(--unit-pick-ink); }
.unit-pick.empty-unit.on { background: var(--card-2); box-shadow: var(--e1), inset 0 0 0 2px rgba(120,90,40,0.22); }
.unit-pick.empty-unit.on b, .unit-pick.empty-unit.on span { color: var(--ink-2); }
.unit-pick:disabled { opacity: .62; cursor: not-allowed; transform: none; box-shadow: var(--e1); }
.day-preview-row { display: flex; align-items: center; gap: 13px; padding: 14px 15px;
  border-radius: var(--r-ctl); background: var(--card-2); box-shadow: inset 0 0 0 1px rgba(120,90,40,0.08); }
.day-preview-row .gcell { flex: none; cursor: default; }
.day-preview-row b { display: block; font-size: 13.5px; font-weight: 800; color: var(--ink); }
.day-preview-row span { font-size: 12px; color: var(--ink-2); font-weight: 600; }
.timeoff-inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  min-height: 42px;
}
.timeoff-inline.active {
  padding: 12px 14px;
  border-radius: var(--r-ctl);
  background: rgba(250,217,205,0.58);
  box-shadow: inset 0 0 0 1px rgba(176,67,44,0.16);
}
.timeoff-inline-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.timeoff-inline-main > i {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--hot);
  color: var(--hot-ink);
  font-size: 17px;
}
.timeoff-inline-main b {
  display: block;
  font-size: 12.5px;
  font-weight: 850;
  color: var(--hot-ink);
}
.timeoff-inline-main span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-action-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.live-action {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 68px;
  padding: 12px;
  border-radius: var(--r-ctl);
  border: 1px solid rgba(120,90,40,0.10);
  background: #fff;
  box-shadow: var(--e1);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease), background-color .16s var(--ease);
}
.live-action:hover, .live-action:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--e2);
}
.live-action i {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 11px;
  display: grid;
  place-items: center;
  font-size: 18px;
}
.live-action b {
  display: block;
  font-size: 12.5px;
  line-height: 1.2;
  font-weight: 850;
  color: var(--ink);
}
.live-action small {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--ink-3);
}
.live-action.blue:hover, .live-action.blue:focus-visible { border-color: rgba(55,107,209,0.54); background: #f5f8ff; }
.live-action.blue i { background: var(--pm); color: var(--pm-ink); }
.live-action.amber:hover, .live-action.amber:focus-visible { border-color: rgba(245,151,30,0.62); background: #fff9ee; }
.live-action.amber i { background: var(--warn); color: var(--warn-ink); }
.live-action.neutral:hover, .live-action.neutral:focus-visible { border-color: rgba(138,129,112,0.52); background: #f8f6f1; }
.live-action.neutral i { background: #eeebe4; color: #706858; }
.day-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 22px; }
.day-confirm {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,0.46);
  background: var(--accent-grad);
  color: #fff;
  box-shadow: 0 9px 20px var(--accent-shadow), inset 0 0 0 1px rgba(255,255,255,0.18);
  font-size: 13px;
  font-weight: 850;
  text-shadow: none;
  animation: confirmPop .28s var(--ease);
}
.day-confirm.neutral {
  background: linear-gradient(145deg, #bdb7aa, #948b7b);
  box-shadow: 0 9px 20px rgba(105,94,76,0.14), inset 0 0 0 1px rgba(255,255,255,0.18);
  text-shadow: none;
}
.day-confirm i { font-size: 18px; }

.time-off-panel { width: min(680px, 100%); }
.timeoff-form {
  display: grid;
  gap: 16px;
  margin-top: 22px;
}
.timeoff-picker {
  display: grid;
  gap: 14px;
  padding: 14px;
  border-radius: var(--r-ctl);
  background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,250,242,0.72));
  box-shadow: inset 0 0 0 1px rgba(120,90,40,0.10), var(--e1);
}
.timeoff-picker-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.timeoff-selected-summary {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.timeoff-selected-summary b {
  font-size: 18px;
  line-height: 1.1;
  color: var(--ink);
  font-weight: 850;
}
.timeoff-selected-summary small {
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}
.timeoff-quick-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.timeoff-quick {
  min-height: 34px;
  border: 1px solid rgba(120,90,40,0.10);
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: var(--e1);
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 11px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 850;
  white-space: nowrap;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.timeoff-quick i { font-size: 15px; }
.timeoff-quick:hover:not(:disabled),
.timeoff-quick:focus-visible:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(245,151,30,0.42);
  color: var(--ink);
  box-shadow: var(--e2);
}
.timeoff-quick:focus-visible,
.timeoff-day:focus-visible {
  outline: none;
  box-shadow: var(--ring), var(--e1);
}
.timeoff-quick.ghost {
  background: var(--card-2);
  box-shadow: inset 0 0 0 1px rgba(120,90,40,0.08);
}
.timeoff-quick:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.timeoff-calendar {
  display: grid;
  gap: 8px;
}
.timeoff-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}
.timeoff-calendar-head span {
  font-size: 13px;
  font-weight: 850;
  color: var(--ink);
}
.timeoff-calendar-head small {
  font-size: 11px;
  font-weight: 850;
  color: var(--hot-ink);
  background: var(--hot);
  border-radius: var(--r-pill);
  padding: 4px 8px;
}
.timeoff-weekdays,
.timeoff-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.timeoff-weekdays span {
  min-width: 0;
  text-align: center;
  font-size: 10px;
  font-weight: 850;
  color: var(--ink-3);
  text-transform: uppercase;
}
.timeoff-month-grid {
  display: grid;
  gap: 6px;
}
.timeoff-day {
  position: relative;
  min-width: 0;
  min-height: 54px;
  border: 1px solid rgba(120,90,40,0.10);
  border-radius: var(--r-ctl);
  background: rgba(255,255,255,0.82);
  box-shadow: var(--e1);
  color: var(--ink-2);
  cursor: pointer;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  justify-items: center;
  gap: 2px;
  padding: 8px 6px 7px;
  font: inherit;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.timeoff-day:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(176,67,44,0.38);
  box-shadow: var(--e2);
}
.timeoff-day-num {
  font-size: 16px;
  line-height: 1;
  font-weight: 850;
}
.timeoff-day-code {
  min-height: 12px;
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  color: var(--ink-3);
}
.timeoff-day-dot {
  position: absolute;
  right: 7px;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.9);
}
.timeoff-day.affected-shift .timeoff-day-dot { background: var(--hot-ink); }
.timeoff-day.selected {
  color: var(--hot-ink);
  border-color: rgba(176,67,44,0.34);
  background: var(--hot);
  box-shadow: var(--e1), inset 0 0 0 2px rgba(255,255,255,0.56);
}
.timeoff-day.selected .timeoff-day-code { color: var(--hot-ink); }
.timeoff-day.outside {
  opacity: .34;
  cursor: default;
  background: rgba(255,255,255,0.44);
  box-shadow: none;
}
.timeoff-field {
  display: grid;
  gap: 8px;
}
.timeoff-field textarea {
  width: 100%;
  border: 1px solid rgba(120,90,40,0.12);
  border-radius: var(--r-ctl);
  background: #fff;
  color: var(--ink);
  box-shadow: var(--e1);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 12px 13px;
}
.timeoff-field textarea {
  min-height: 82px;
  resize: vertical;
  line-height: 1.45;
  font-weight: 600;
}
.timeoff-field textarea:focus {
  outline: none;
  border-color: rgba(176,67,44,0.42);
  box-shadow: var(--ring), var(--e1);
}
.timeoff-scope-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.timeoff-scope {
  min-height: 58px;
  border-radius: var(--r-ctl);
  border: 1px solid rgba(120,90,40,0.10);
  background: #fff;
  color: var(--ink-2);
  box-shadow: var(--e1);
  cursor: pointer;
  font: inherit;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  padding: 9px 8px;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.timeoff-scope i { font-size: 18px; }
.timeoff-scope span { font-size: 11.5px; font-weight: 850; line-height: 1; }
.timeoff-scope:hover,
.timeoff-scope:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(176,67,44,0.44);
  box-shadow: var(--e2);
}
.timeoff-scope.on {
  background: var(--hot);
  color: var(--hot-ink);
  box-shadow: var(--e1), inset 0 0 0 2px var(--hot-ink);
}
.timeoff-impact {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}
.impact-list {
  border-radius: var(--r-ctl);
  background: var(--card-2);
  box-shadow: inset 0 0 0 1px rgba(120,90,40,0.08);
  overflow: hidden;
}
.impact-row {
  min-height: 38px;
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 13px;
  border-top: 1px solid rgba(120,90,40,0.08);
}
.impact-row:first-child { border-top: 0; }
.impact-row span {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink-2);
}
.impact-row b {
  font-size: 12px;
  font-weight: 850;
  color: var(--ink);
}
.impact-row small {
  font-size: 10.5px;
  font-weight: 750;
  color: var(--ink-3);
}
.impact-row.more,
.impact-list.empty .impact-row {
  grid-template-columns: 1fr;
}
.timeoff-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 22px;
}
.timeoff-action-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

@keyframes confirmPop {
  from { opacity: 0; transform: translateY(4px) scale(.985); }
  to { opacity: 1; transform: none; }
}

.fact-chips { display: flex; gap: 9px; flex-wrap: wrap; }
.fact { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  padding: 9px 14px; border-radius: var(--r-pill); background: #fff; box-shadow: var(--e1); }
.fact i { font-size: 16px; color: var(--accent); }

/* weekly OT/DT swap modal */
.modal-panel.wide { width: min(1120px, 100%); }
#swapModal {
  padding: 10px 16px;
}
#swapModal .modal-panel.wide {
  max-height: calc(100dvh - 20px);
  padding: 22px 28px 24px;
  display: flex;
  flex-direction: column;
}
.swap-head { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: flex-start; padding-right: 52px; }
.swap-kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.swap-kpis .tile { min-width: 124px; }
.swap-kpis .tile b { font-size: 24px; }
.swap-kpis .tile.green b { color: #3a6e2a; }
.swap-mini-kpi {
  min-width: 96px;
  display: grid;
  gap: 4px;
  padding: 11px 14px;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ops-border);
}
.swap-mini-kpi span {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.swap-mini-kpi b {
  color: var(--ink);
  font-size: 25px;
  font-weight: 950;
  line-height: 1;
}
.swap-mini-kpi.is-save b { color: #2f6b25; }
.mchip.amber { background: var(--warn); color: var(--warn-ink); }
.mchip.red   { background: var(--hot);  color: var(--hot-ink); }
.banner { display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius: var(--r-ctl);
  background: var(--warn); color: var(--warn-ink); font-size: 12px; font-weight: 800; margin-top: 10px; }
.banner i { font-size: 17px; flex: none; }
.swap-preview-note {
  width: fit-content;
  margin-top: 8px;
  padding: 7px 11px;
  border-radius: 8px;
  background: #fff;
  color: var(--ops-amber);
  box-shadow: inset 0 0 0 1px rgba(168,100,10,0.24);
  font-size: 12px;
  font-weight: 900;
}
.swap-apply-message {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  padding: 10px 12px;
  border-radius: var(--r-ctl);
  font-size: 12px;
  font-weight: 850;
}
.swap-apply-message i {
  flex: none;
  font-size: 18px;
}
.swap-apply-message span {
  display: grid;
  gap: 2px;
}
.swap-apply-message b {
  color: inherit;
  font-size: 13px;
  font-weight: 950;
  line-height: 1;
}
.swap-apply-message small {
  color: inherit;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
}
.swap-apply-message.is-success {
  background: rgba(220,238,207,0.78);
  color: #2c5520;
  box-shadow: inset 0 0 0 1px rgba(74,122,49,0.18);
}
.swap-apply-message.is-error {
  background: rgba(255,218,207,0.74);
  color: #8d2118;
  box-shadow: inset 0 0 0 1px rgba(176,67,44,0.18);
}

.swap-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  margin: 10px -10px 0 0;
  padding: 0 10px 2px 0;
}
.swap-scroll .swap-card:first-child { margin-top: 0; }
.swap-scroll:focus-visible {
  outline: 2px solid rgba(219,130,24,0.45);
  outline-offset: 3px;
}
.swap-scroll::-webkit-scrollbar { width: 9px; }
.swap-scroll::-webkit-scrollbar-track {
  background: rgba(120,90,40,0.08);
  border-radius: var(--r-pill);
}
.swap-scroll::-webkit-scrollbar-thumb {
  background: rgba(120,90,40,0.30);
  border: 2px solid rgba(255,255,255,0.70);
  border-radius: var(--r-pill);
}
.swap-scroll::-webkit-scrollbar-thumb:hover { background: rgba(120,90,40,0.42); }

.swap-card {
  padding: 12px;
  margin-top: 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px;
  gap: 12px;
  align-items: stretch;
}
.swap-card-simple {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--ops-border);
  box-shadow: var(--ops-shadow);
}
.swap-shift-banner {
  min-height: 58px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #fffaf2;
  color: var(--ops-amber);
  box-shadow: inset 0 0 0 1px rgba(168,100,10,0.22);
}
.swap-shift-banner span {
  padding: 7px 10px;
  border-radius: 6px;
  background: #fff;
  color: var(--ops-amber);
  box-shadow: inset 0 0 0 1px rgba(168,100,10,0.18);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.7px;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.swap-shift-banner b {
  width: fit-content;
  max-width: 100%;
  padding: 4px 8px 5px;
  border-radius: 6px;
  background: #fff;
  color: #2b261e;
  font-size: 26px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.swap-shift-banner small {
  color: #9a5c12;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.05;
  text-align: right;
  white-space: nowrap;
}
.swap-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) 200px;
  gap: 8px;
  align-items: stretch;
}
.swap-box {
  min-height: 88px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--ops-border);
}
.swap-box.is-from {
  border-left: 4px solid var(--ops-red);
  background: #fff;
}
.swap-box.is-to {
  border-left: 4px solid var(--ops-green);
  background: #fff;
}
.swap-box .swap-date {
  width: fit-content;
  max-width: 100%;
  padding: 5px 9px;
  border-radius: 6px;
  background: #fffaf1;
  color: var(--ops-amber);
  font-size: 11px;
  font-weight: 950;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.swap-box.is-to .swap-date {
  background: #f2fbf4;
  color: var(--ops-green-dark);
}
.swap-box small {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 0.6px;
  line-height: 1;
  text-transform: uppercase;
}
.swap-box b {
  color: var(--ink);
  font-size: 22px;
  font-weight: 950;
  line-height: 1.04;
}
.swap-box em {
  color: var(--ink-2);
  font-size: 15px;
  font-style: normal;
  font-weight: 900;
}
.swap-give {
  min-height: 88px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.swap-give i {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #f8fafc;
  color: var(--ink);
  font-size: 19px;
  box-shadow: inset 0 0 0 1px var(--ops-border);
}
.swap-save-box {
  min-height: 88px;
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 13px 16px;
  border-radius: 8px;
  background: #f2fbf4;
  color: var(--ops-green-dark);
  box-shadow: inset 0 0 0 1px rgba(67,163,92,0.24);
}
.swap-save-box span {
  color: var(--ops-green-dark);
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0.5px;
  line-height: 1;
  text-transform: uppercase;
}
.swap-save-box b {
  color: var(--ops-green-dark);
  font-size: 38px;
  font-weight: 950;
  letter-spacing: -1px;
  line-height: 1;
}
.swap-save-box small {
  color: var(--ops-green-dark);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.18;
}
.swap-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.swap-card-footer span,
.swap-make-button {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  border-radius: 8px;
  background: #fff;
  color: var(--ops-green-dark);
  box-shadow: inset 0 0 0 1px rgba(67,163,92,0.22);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.swap-make-button {
  margin-left: auto;
  border: 1px solid var(--ops-green);
  background: var(--ops-green);
  color: #fff;
  box-shadow: none;
  cursor: pointer;
  font-family: inherit;
  transition: background .14s ease, border-color .14s ease, transform .12s ease;
}
.swap-make-button:hover {
  background: var(--ops-green-dark);
  border-color: var(--ops-green-dark);
}
.swap-make-button:active {
  transform: translateY(0) scale(0.985);
}
.swap-make-button:disabled {
  opacity: .58;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.swap-card-footer i { font-size: 14px; }
.swap-main {
  min-width: 0;
  display: grid;
  gap: 10px;
}
.swap-problem {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  border-radius: var(--r-ctl);
  background:
    linear-gradient(145deg, rgba(255,255,255,0.92), rgba(255,244,240,0.92)),
    #fff5f2;
  box-shadow: inset 4px 0 0 rgba(177,54,39,0.72), inset 0 0 0 1px rgba(177,54,39,0.12);
}
.swap-problem-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #dc6a52, #9f2f22);
  box-shadow: 0 12px 22px rgba(167,53,34,0.20), inset 0 0 0 1px rgba(255,255,255,0.22);
}
.swap-problem-icon i { font-size: 21px; }
.swap-card h3 {
  color: var(--ink);
  font-size: 20px;
  font-weight: 950;
  line-height: 1.05;
  margin: 5px 0 0;
}
.swap-problem p {
  max-width: 620px;
  margin: 5px 0 0;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.28;
}
.swap-action-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}
.swap-person-card {
  min-height: 70px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 10px 12px;
  border-radius: var(--r-ctl);
  background: #fff;
  box-shadow: var(--e1), inset 0 0 0 1px rgba(120,90,40,0.08);
}
.swap-person-card.is-from {
  border-left: 6px solid #b0432c;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.98), rgba(255,247,245,0.88)),
    #fff;
}
.swap-person-card.is-to {
  border-left: 6px solid #4f8a3d;
  background:
    linear-gradient(145deg, rgba(255,255,255,0.98), rgba(243,251,239,0.88)),
    #fff;
}
.swap-person-card span {
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 950;
  letter-spacing: 0.6px;
  line-height: 1;
  text-transform: uppercase;
}
.swap-person-card b {
  color: var(--ink);
  font-size: 16px;
  font-weight: 950;
  line-height: 1.08;
}
.swap-person-card small {
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 900;
}
.swap-arrow {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f4efe6;
  color: var(--ink-2);
  box-shadow: inset 0 0 0 1px rgba(120,90,40,0.10);
}
.swap-arrow i { font-size: 16px; }
.swap-simple-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.swap-simple-checks div {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 29px;
  padding: 6px 9px;
  border-radius: var(--r-pill);
  background: rgba(220,238,207,0.70);
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 850;
  line-height: 1.1;
}
.swap-simple-checks i {
  color: #4a7a31;
  font-size: 13px;
  flex: none;
}
.swap-tags { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.checks { display: flex; flex-direction: column; gap: 9px; }
.checks li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--ink-2);
  font-weight: 500; list-style: none; }
.checks li i { color: #4a7a31; font-size: 16px; flex: none; }
.swap-rail { display: flex; flex-direction: column; gap: 8px; }
.net-tile { padding: 12px 14px 13px; border-radius: var(--r-ctl); background: var(--safe);
  box-shadow: inset 0 0 0 1px rgba(74,122,49,0.22); }
.net-tile .label { color: #3a6e2a; display: block; margin-bottom: 6px; }
.net-tile b { display: block; font-size: 32px; font-weight: 950; color: #2c5520; letter-spacing: -1px; line-height: 1; }
.net-tile small { display: block; margin-top: 6px; color: #3a6e2a; font-size: 12px; font-weight: 900; line-height: 1.16; }
.swap-review-tile {
  display: grid;
  gap: 6px;
  padding: 11px 14px;
  border-radius: var(--r-ctl);
  background: #fff;
  box-shadow: var(--e1), inset 0 0 0 1px rgba(120,90,40,0.08);
}
.swap-review-tile span {
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.6px;
  line-height: 1;
  text-transform: uppercase;
}
.swap-review-tile b {
  color: var(--ink);
  font-size: 15px;
  font-weight: 950;
  line-height: 1.15;
}
.swap-change { padding: 12px 14px 16px; border-radius: var(--r-ctl); background: var(--card-2); }
.sc-top { display: flex; align-items: center; gap: 8px; }
.sc-dot { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; flex: none; }
.sc-dot.down { background: linear-gradient(150deg, #5aa85a, #3a7a2e); }
.sc-dot.up   { background: linear-gradient(150deg, #5e8bf2, #3a55c9); }
.sc-who { font-size: 11px; font-weight: 800; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.3px; }
.sc-verb { font-size: 11px; font-weight: 600; color: var(--ink-3); }
.sc-fig { display: flex; align-items: center; gap: 8px; margin: 9px 0 10px; }
.sc-from { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.sc-fig > .ph-arrow-right { font-size: 12px; color: var(--ink-3); }
.sc-to { font-size: 19px; font-weight: 800; color: var(--ink); letter-spacing: -0.5px; }
.sc-to.ok { color: #3a6e2a; } .sc-to.over { color: #b4630a; }
.sc-delta { margin-left: auto; font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: var(--r-pill); }
.sc-delta.down { background: var(--safe); color: #3a6e2a; }
.sc-delta.up   { background: var(--care); color: var(--care-ink); }

/* hours bar measured against the 40h full-time line */
.hbar { position: relative; height: 9px; border-radius: var(--r-pill); background: rgba(90,70,40,0.10);
  overflow: visible; margin-top: 14px; }
.hbar-ghost, .hbar-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: var(--r-pill);
  transform-origin: left center; }
.hbar-ghost { background: rgba(212,128,20,0.30); }            /* old overtime tail */
.hbar-fill.ok   { background: linear-gradient(90deg, #6cbf5e, #3a7a2e); }
.hbar-fill.over { background: linear-gradient(90deg, #f0a82e, #c47a0e); }
.hbar-mark { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink-2); border-radius: 2px; }
.hbar-tag { position: absolute; top: -19px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  font-size: 9px; font-weight: 800; color: var(--ink-3); letter-spacing: 0.3px; }
.modal.open .hbar-ghost { animation: growbar .55s cubic-bezier(0.32,0.72,0,1) both; }
.modal.open .hbar-fill  { animation: growbar .7s cubic-bezier(0.32,0.72,0,1) .08s both; }
@keyframes growbar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pill.go { background: linear-gradient(135deg, #5aa85a, #3a7a2e); color: #fff; border-color: transparent;
  justify-content: center; width: 100%; box-shadow: 0 8px 18px rgba(58,122,46,0.32); font-weight: 700; }
.pill.go:hover { color: #fff; }

@media print {
  @page { size: letter landscape; margin: 0.10in; }
  html.builder-printing-schedule,
  html.builder-printing-schedule body {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }
  html.builder-printing-schedule body > *:not(#builderPrintModal) {
    display: none !important;
  }
  html.builder-printing-schedule #builderPrintModal {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: auto !important;
    height: 8.12in !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html.builder-printing-schedule #builderPrintModal .builder-print-panel {
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    display: block !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  html.builder-printing-schedule #builderPrintModal .builder-print-panel::before,
  html.builder-printing-schedule #builderPrintModal .modal-close,
  html.builder-printing-schedule #builderPrintModal .m-chips,
  html.builder-printing-schedule #builderPrintModal .m-title,
  html.builder-printing-schedule #builderPrintModal .builder-print-screen-note,
  html.builder-printing-schedule #builderPrintModal .builder-print-actions {
    display: none !important;
  }
  html.builder-printing-schedule #builderPrintModal .builder-print-pages {
    display: block !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  html.builder-printing-schedule #builderPrintModal .builder-print-sheet {
    box-sizing: border-box !important;
    width: 10.62in !important;
    height: 8.12in !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    padding: 0.035in !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    break-after: avoid;
    page-break-after: avoid;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  html.builder-printing-schedule .builder-print-sheet-head {
    align-items: flex-start !important;
    gap: 0.08in !important;
    margin-bottom: 0.035in !important;
  }
  html.builder-printing-schedule .builder-print-sheet-head h2 {
    margin-top: 0 !important;
    font-size: 12pt !important;
    letter-spacing: -0.03em !important;
  }
  html.builder-printing-schedule .builder-print-sheet-head span {
    font-size: 5.2pt !important;
  }
  html.builder-printing-schedule .builder-print-sheet-head p {
    margin-top: 1pt !important;
    font-size: 5.4pt !important;
  }
  html.builder-printing-schedule .builder-print-sheet-stats {
    padding: 1.4pt 3pt !important;
    border-radius: 0 !important;
    gap: 0 3pt !important;
  }
  html.builder-printing-schedule .builder-print-sheet-stats b {
    font-size: 8.8pt !important;
  }
  html.builder-printing-schedule .builder-print-sheet-stats span {
    font-size: 4.2pt !important;
  }
  html.builder-printing-schedule .builder-print-legend {
    display: none !important;
  }
  html.builder-printing-schedule .builder-print-table-wrap {
    overflow: hidden !important;
  }
  html.builder-printing-schedule .builder-print-table {
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    border: 0.55pt solid #222 !important;
    page-break-inside: avoid;
  }
  html.builder-printing-schedule .builder-print-staff-col {
    width: 1.06in !important;
  }
  html.builder-printing-schedule .builder-print-table thead { display: table-row-group; }
  html.builder-printing-schedule .builder-print-table tr { break-inside: avoid; page-break-inside: avoid; }
  html.builder-printing-schedule .builder-print-table th,
  html.builder-printing-schedule .builder-print-table td {
    border: 0.38pt solid #333 !important;
    font-size: 6pt !important;
    line-height: 1 !important;
  }
  html.builder-printing-schedule .builder-print-table thead th,
  html.builder-printing-schedule .builder-print-date-row th {
    height: 10.8pt !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 4.4pt !important;
  }
  html.builder-printing-schedule .builder-print-table thead th b,
  html.builder-printing-schedule .builder-print-date-row th b {
    font-size: 6.7pt !important;
  }
  html.builder-printing-schedule .builder-print-table thead th span,
  html.builder-printing-schedule .builder-print-date-row th span {
    margin-top: 0 !important;
    font-size: 3.8pt !important;
  }
  html.builder-printing-schedule .builder-print-staff-head {
    padding-left: 1.8pt !important;
    font-size: 5.8pt !important;
  }
  html.builder-printing-schedule .builder-print-staff {
    padding: 0.8pt 1.5pt !important;
    border-radius: 0 !important;
  }
  html.builder-printing-schedule .builder-print-staff b {
    font-size: 5.8pt !important;
    white-space: nowrap !important;
  }
  html.builder-printing-schedule .builder-print-staff small {
    display: none !important;
  }
  html.builder-printing-schedule .builder-print-section th {
    height: 9.5pt !important;
    padding: 0.8pt 2pt !important;
    border-radius: 0 !important;
    font-size: 5.7pt !important;
  }
  html.builder-printing-schedule .builder-print-table td {
    height: 12pt !important;
    border-radius: 0 !important;
    vertical-align: middle !important;
  }
  html.builder-printing-schedule .builder-print-slot {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 6pt !important;
    line-height: 1 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  html.builder-printing-schedule .builder-print-table td.has-multiple-shifts {
    padding: 0.5pt !important;
  }
  html.builder-printing-schedule .builder-print-table td.has-multiple-shifts .builder-print-slot {
    font-size: 5.1pt !important;
  }
  html.builder-printing-schedule .builder-print-table td.has-multiple-shifts .builder-print-slot + .builder-print-slot {
    margin-top: 0.4pt !important;
  }
}

@media (max-width: 720px) {
  .tile-grid, .tile-grid.four, .m-actions { grid-template-columns: 1fr 1fr; }
  .punch-detail-grid { grid-template-columns: 1fr; }
  .punch-detail-panel.selected { order: -1; }
  .punch-week-list,
  #shiftModal .punch-week-list { max-height: min(320px, 42vh); }
  .punch-day-tab { flex: 1 1 132px; min-width: 0; }
  .punch-focus-card { padding: 16px 14px; }
  .punch-focus-title { padding-top: 6px; }
  .punch-focus-card.has-premium .punch-focus-title { padding-top: 8px; }
  .punch-focus-premium { position: static; width: max-content; max-width: 100%; margin: 0 auto 8px; }
  .punch-focus-worked { position: static; width: max-content; max-width: 100%; margin: 0 auto 12px; }
  .punch-focus-line { grid-template-columns: 1fr; gap: 5px; }
  .punch-focus-line dd { align-items: flex-start; flex-direction: column; gap: 3px; }
  .punch-focus-line dd span { text-align: left; }
  .live-action-grid { grid-template-columns: 1fr; }
  .day-assignment-row { grid-template-columns: 58px minmax(0, 1fr); }
  .builder-shift-row-actions { grid-column: 1 / -1; justify-content: stretch; }
  .builder-shift-action { flex: 1; justify-content: center; }
  .builder-shift-row-actions.unavailable { min-width: 0; }
  .builder-ops-grid { grid-template-columns: 1fr; }
  .builder-ops-card { grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "icon copy" "status actions"; }
  .ops-status { justify-self: start; }
  .ops-actions { justify-self: stretch; }
  .ops-actions .pill { width: 100%; justify-content: center; }
  .builder-setup-card { min-width: 0; max-width: none; width: 100%; }
  #builder-onboarding-setup { width: 100%; }
  .schedule-canvas-card .section-title { padding-right: 0; }
  .canvas-expand { position: static; width: 100%; justify-content: center; margin-bottom: 16px; }
  .schedule-canvas-card.is-expanded .section-title { padding-right: 0; }
  .schedule-canvas-card.is-expanded .canvas-expand { position: static; width: 100%; justify-content: center; margin-bottom: 12px; }
  .schedule-canvas-card.is-expanded .builder-zoom-controls {
    position: static;
    width: 100%;
    justify-content: center;
    margin-bottom: 14px;
  }
  .section-title .legend { display: flex; width: 100%; justify-content: flex-start; gap: 12px; }
  .builder-search { width: 100%; }
  .builder-search-popover { left: 0; right: auto; width: 100%; }
  .onboarding-layout { grid-template-columns: 1fr; }
  .onboarding-list { display: grid; grid-template-columns: 1fr 1fr; }
  .onboarding-facts { grid-template-columns: 1fr 1fr; }
  .staff-needs-layout { grid-template-columns: 1fr; }
  .open-shift-layout { grid-template-columns: 1fr; }
  .staff-need-count-row { grid-template-columns: 1fr; }
  .staff-need-current-row { grid-template-columns: 46px minmax(0, 1fr); }
  .staff-need-current-row .pill { grid-column: 2; justify-content: center; }
  .timeoff-picker-head { align-items: stretch; flex-direction: column; }
  .builder-publish-week-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .builder-publish-summary .tile-grid,
  .scheduler-delete-month-summary .tile-grid { grid-template-columns: 1fr 1fr; }
  .timeoff-quick-row { justify-content: flex-start; }
  .timeoff-scope-grid { grid-template-columns: 1fr 1fr; }
  .timeoff-actions, .timeoff-inline, .repeat-actions { align-items: stretch; flex-direction: column; }
  .timeoff-action-group { justify-content: stretch; }
  .timeoff-action-group .pill, .timeoff-actions > .pill, .timeoff-inline > .pill, .repeat-actions > .pill { justify-content: center; }
  .impact-row { grid-template-columns: 76px 1fr; }
  .impact-row small { grid-column: 2; }
  .modal-panel { padding: 24px 20px; }
  .swap-card { grid-template-columns: 1fr; }
  .swap-shift-banner {
    grid-template-columns: 1fr;
    gap: 7px;
  }
  .swap-shift-banner small {
    text-align: left;
  }
  .swap-flow {
    grid-template-columns: 1fr;
  }
  .swap-give {
    min-height: 46px;
  }
  .swap-give i {
    transform: rotate(90deg);
  }
  .swap-make-button {
    margin-left: 0;
  }
  .swap-action-line {
    grid-template-columns: 1fr;
  }
  .swap-simple-checks {
    grid-template-columns: 1fr;
  }
  .swap-arrow {
    justify-self: center;
    transform: rotate(90deg);
  }
}

@media (max-width: 560px) {
  .m-actions { grid-template-columns: 1fr; }
  .builder-ops-card { grid-template-columns: 1fr; grid-template-areas: "icon" "copy" "status" "actions"; }
  .builder-ops-card .ops-icon { width: 46px; height: 46px; }
  .overwrite-impact .tile-grid { grid-template-columns: 1fr; }
  .builder-publish-week-list { grid-template-columns: 1fr; }
  .onboarding-list { grid-template-columns: 1fr; }
  .onboarding-facts { grid-template-columns: 1fr; }
  .staff-need-seg { grid-template-columns: 1fr; }
  .staff-need-unit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .open-shift-date-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .open-shift-unit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .staff-need-calendar-head { align-items: stretch; flex-direction: column; }
  .onboarding-person-head { align-items: flex-start; }
  .onboarding-actions { align-items: stretch; flex-direction: column; }
  .onboarding-actions .pill { justify-content: center; }
  .day-modal-chips { padding-right: 44px; }
  .day-modal-chips .date-focus-chip { font-size: 14px; padding: 7px 13px; }
  .day-person-glass { min-height: 38px; font-size: 14px; padding: 8px 14px; }
  .repeat-editor-head, .repeat-painter-head { align-items: stretch; flex-direction: column; }
  .repeat-painter-head > span { max-width: none; text-align: left; }
  .repeat-editor-head .weekday-apply { justify-content: center; width: 100%; }
  .weekday-apply { justify-content: center; width: 100%; }
  .repeat-unit-paint-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 5px; }
  .repeat-unit-paint { min-height: 44px; border-radius: 9px; }
  .repeat-weekday-grid { gap: 4px; padding: 5px; }
  .repeat-day { min-height: 58px; border-radius: 9px; }
  .repeat-day .repeat-day-name { font-size: 9px; }
  .repeat-day b { min-width: 25px; min-height: 22px; padding: 3px 4px; }
  .repeat-day-clear { top: 3px; right: 3px; width: 18px; height: 18px; font-size: 9px; }
  .timeoff-picker { padding: 12px; }
  .timeoff-quick-row { display: grid; grid-template-columns: 1fr 1fr; }
  .timeoff-quick.ghost { grid-column: 1 / -1; }
  .timeoff-weekdays, .timeoff-week { gap: 4px; }
  .timeoff-day { min-height: 46px; border-radius: var(--r-chip); padding: 7px 4px 6px; }
  .timeoff-day-num { font-size: 14px; }
  .timeoff-day-code { font-size: 9px; }
  .timeoff-day-dot { right: 5px; top: 5px; width: 6px; height: 6px; }
  .timeoff-scope-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Module components (Staffing / OT-DT Watch / Activity log)
   All share the warm-glass surface for consistency.
   ============================================================ */

/* page heading block */
.pagehead { margin-bottom: 22px; }
.pagehead .label { display: block; margin-bottom: 8px; }
.pagehead .h1 { margin-bottom: 8px; }
.pagehead .sub { font-size: 13.5px; color: var(--ink-2); font-weight: 500; max-width: 560px; line-height: 1.55; }

/* shared glass surface */
.glass { background: var(--card);
  -webkit-backdrop-filter: blur(16px) saturate(165%); backdrop-filter: blur(16px) saturate(165%);
  border: 1px solid rgba(255,255,255,0.4); border-top-color: rgba(255,255,255,0.85);
  border-left-color: rgba(255,255,255,0.6); border-radius: var(--r-card);
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.7); }

/* KPI strip */
.kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 20px; }
.kpi { padding: 18px 20px; display: flex; flex-direction: column; gap: 7px;
  border-left: 4px solid var(--ink-3);
  /* hairline inner ring = "machined" concentric edge without extra DOM */
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.7), inset 0 0 0 1px rgba(255,255,255,0.4); }
.kpi .k-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kpi .k-num { font-size: 30px; font-weight: 800; letter-spacing: -1px; color: var(--ink); line-height: 1; }
.kpi .k-sub { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.k-tag { font-size: 9px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-soft); padding: 3px 8px; border-radius: var(--r-pill); }
.kpi.green  { border-left-color: #4a7a31; } .kpi.green  .k-num { color: #3a6e2a; }
.kpi.red    { border-left-color: #b0432c; } .kpi.red    .k-num { color: #a23a26; }
.kpi.amber  { border-left-color: #d18014; } .kpi.amber  .k-num { color: #b4630a; }
.kpi.blue   { border-left-color: #3a47a8; } .kpi.blue   .k-num { color: #3a47a8; }
.kpi.purple { border-left-color: #5a44a0; } .kpi.purple .k-num { color: #5a44a0; }
.kpi.lg { grid-column: span 2; } .kpi.lg .k-num { font-size: 40px; }

@media (max-width: 1080px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } .kpi.lg { grid-column: span 2; } }

/* filter bar */
.filterbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.filterbar .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.fchip { cursor: pointer; font-family: inherit; font-weight: 700; font-size: 12.5px; color: var(--ink-2);
  padding: 8px 14px; border-radius: var(--r-pill); background: var(--card-2); border: 1px solid rgba(255,255,255,0.4);
  display: inline-flex; align-items: center; gap: 7px; }
.fchip.on { color: var(--accent-ink); background: #fff; box-shadow: var(--e1); }
.fchip .n { font-size: 11px; font-weight: 800; color: var(--ink-3); }
.fchip.on .n { color: var(--accent-ink); }

/* avatars by role (brand amber stays for the user only) */
.avatar.care { background: linear-gradient(150deg, #78b4ff, #4f82e6); }
.avatar.med  { background: linear-gradient(150deg, #28bca9, #1b8274); }
.avatar.both { background: linear-gradient(150deg, #78b4ff, #28bca9); }

/* staff card grid */
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.staff-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.42); text-align: left; font: inherit; color: inherit;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.staff-card:hover { transform: translateY(-2px); box-shadow: var(--e2), inset 0 1px 0 rgba(255,255,255,0.7); }
.sc-head { display: flex; align-items: center; gap: 13px; }
.sc-head .avatar { width: 46px; height: 46px; font-size: 14px; }
.sc-name { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.sc-meta { font-size: 11.5px; color: var(--ink-3); font-weight: 600; }
.sc-tag { display: inline-block; margin-top: 4px; font-size: 10px; font-weight: 800; color: var(--med-ink);
  background: var(--med); padding: 3px 9px; border-radius: var(--r-pill); }
.sc-load { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px;
  border-radius: var(--r-chip); background: var(--card-2); box-shadow: var(--well); }
.sc-load b { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.sc-load span { font-size: 11.5px; color: var(--ink-3); font-weight: 700; }
.modal-panel.staff-detail-panel { width: min(820px, 100%); }
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.contact-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 3px 12px; align-items: center;
  padding: 14px 16px; border-radius: var(--r-ctl); background: #fff; box-shadow: var(--e1);
  color: inherit; text-decoration: none; }
.contact-card i { grid-row: span 2; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  background: var(--card-2); color: var(--accent-ink); font-size: 18px; }
.contact-card span { font-size: 10.5px; font-weight: 850; color: var(--ink-3); text-transform: uppercase; letter-spacing: .4px; }
.contact-card b { min-width: 0; overflow-wrap: anywhere; font-size: 13px; color: var(--ink); }
@media (max-width: 760px) { .contact-grid { grid-template-columns: 1fr; } }

/* two-column (watch + detail) */
.twocol { display: grid; grid-template-columns: 1.5fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1080px) { .twocol { grid-template-columns: 1fr; } }

.watch-scroll {
  max-height: min(620px, calc(100dvh - 300px));
  min-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 2px 8px 2px 0;
  margin-right: -8px;
}
.twocol .card:nth-child(2) {
  position: sticky;
  top: 22px;
}
@media (max-width: 1080px) {
  .watch-scroll {
    max-height: 460px;
  }
  .twocol .card:nth-child(2) {
    position: static;
  }
}

.watch-row { position: relative; padding: 15px 18px; margin-bottom: 10px; display: grid;
  grid-template-columns: 1fr auto; gap: 4px 16px; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
  border-left: 4px solid var(--hot-ink); }
.watch-row:hover { transform: translateX(2px); box-shadow: var(--e2), inset 0 1px 0 rgba(255,255,255,0.7); }
.watch-row.risk-overtime { border-left-color: #c8543b; }
.watch-row.risk-overtime .wr-risk { color: #a73522; }
.watch-row.risk-overtime .wr-bar i { background: linear-gradient(90deg, #e57b67, #c8543b); }
.watch-row.risk-doubletime {
  border-left-color: #6f1712;
  background:
    linear-gradient(145deg, rgba(255,241,238,0.98), rgba(255,248,246,0.94)),
    #fff1ee;
}
.watch-row.risk-doubletime .wr-name { color: #6f1712; }
.watch-row.risk-doubletime .wr-risk { color: #7f1d16; font-weight: 850; }
.watch-row.risk-doubletime .wr-bar i { background: linear-gradient(90deg, #b64637, #6f1712); }
.watch-row.risk-approaching { border-left-color: #d48014; }
.watch-row.risk-approaching .wr-risk { color: #a35a0d; }
.watch-row.risk-approaching .wr-bar i { background: linear-gradient(90deg, #f0b85f, #c98120); }
.watch-row.risk-under { border-left-color: var(--safe-ink); }
.watch-row.on {
  border-left-color: #2f6fd6 !important;
  background:
    linear-gradient(145deg, rgba(237,246,255,0.98), rgba(248,252,255,0.95)),
    #edf6ff !important;
  box-shadow:
    var(--e2),
    inset 0 0 0 2px rgba(47,111,214,0.42),
    0 0 0 1px rgba(47,111,214,0.26) !important;
  transform: translateX(2px);
}
.watch-row.on .wr-name { color: #173a74 !important; }
.watch-row.on .wr-risk { color: #255ca7 !important; font-weight: 850; }
.watch-row.on .wr-bar i { background: linear-gradient(90deg, #6fa7ee, #2f6fd6) !important; }
.wr-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wr-rank {
  flex: none;
  min-width: 30px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(142,132,112,0.12);
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 900;
}
.wr-selected {
  display: none;
  margin-left: auto;
  padding: 4px 9px;
  border-radius: var(--r-pill);
  background: #2f6fd6;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.watch-row.on .wr-selected { display: inline-flex; }
.wr-name { min-width: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.wr-risk { font-size: 11px; font-weight: 600; color: var(--hot-ink); }
.wr-vals { text-align: right; font-size: 12px; font-weight: 800; color: var(--ink); }
.wr-vals span { color: var(--ink-3); font-weight: 600; }
.wr-bar { grid-column: 1 / -1; height: 6px; border-radius: var(--r-pill); background: rgba(176,67,44,0.14);
  overflow: hidden; margin-top: 4px; }
.wr-bar i { display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, #c8543b, #9c3322); }

.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.detail-cell { padding: 14px 16px; border-radius: var(--r-ctl); background: var(--card-2); box-shadow: var(--well); }
.detail-cell .label { display: block; margin-bottom: 4px; }
.detail-cell b { font-size: 20px; font-weight: 800; color: var(--ink); }
.detail-cell.hot { background: #fff8f6; box-shadow: var(--well), inset 0 0 0 1px rgba(200,84,59,0.32); }
.detail-cell.critical { background: #fff2ef; box-shadow: var(--well), inset 0 0 0 1px rgba(141,33,24,0.42); }
.detail-cell.total { background: #fff; box-shadow: var(--e1), inset 0 0 0 1px rgba(120,90,40,0.10); }
.detail-cell.hot b,
.detail-cell.critical b { color: #8d2118; }

/* timeline */
.timeline { position: relative; padding-left: 8px; }
.tl-item { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding-bottom: 22px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: -4px; width: 2px;
  background: rgba(120,90,40,0.14); }
.tl-item:last-child::before { display: none; }
.tl-node { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-size: 16px; color: #fff; box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.35); z-index: 1; }
.tl-node.blue   { background: linear-gradient(150deg, #5e8bf2, #3a55c9); }
.tl-node.purple { background: linear-gradient(150deg, #8a6fe0, #5a44a0); }
.tl-node.amber  { background: var(--accent-grad); }
.tl-node.red    { background: linear-gradient(150deg, #e0735c, #b0432c); }
.tl-node.green  { background: linear-gradient(150deg, #5aa85a, #3a6e2a); }
.tl-body { padding-top: 1px; }
.tl-title { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.tl-title b { color: var(--accent-ink); }
.tl-meta { font-size: 11.5px; color: var(--ink-3); font-weight: 600; margin-top: 2px; }
.tl-time { font-size: 11px; color: var(--ink-3); font-weight: 700; white-space: nowrap; }
.tl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

/* button-in-button: a trailing arrow nested in its own circle (high-end CTA) */
.pill .ph-arrow-right { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center;
  background: rgba(120,90,40,0.10); font-size: 13px; margin-right: -6px; }
.pill.primary .ph-arrow-right { background: rgba(255,255,255,0.22); }

/* ============================================================
   Button motion: smooth, purposeful, fast. Press is snappy (~90ms),
   hover is smooth (~200ms), sheen is a deliberate flourish (~600ms).
   transform + opacity only (GPU). No will-change (dense grid).
   ============================================================ */
.pill, .action-card, .nav-item, .seg button, .chip-filter, .shift, .gcell, .constraint, .ot-stat {
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              background-color .2s var(--ease), color .18s var(--ease);
}
/* press: quick physical push, then ease back on release */
.pill:active, .action-card:active, .nav-item:active, .seg button:active,
.chip-filter:active, .shift:active, .gcell:active, .constraint:active {
  transition-duration: .09s;
}
.pill:active             { transform: translateY(1px) scale(0.97); }
.action-card:active      { transform: scale(0.985); }
.nav-item:active         { transform: scale(0.98); }
.seg button:active       { transform: scale(0.95); }
.chip-filter:hover       { transform: translateY(-1px); }
.chip-filter:active      { transform: translateY(0) scale(0.96); }
.constraint:hover        { transform: translateY(-1px); }
.constraint:active       { transform: translateY(0) scale(0.99); }
.gcell:active            { transform: scale(0.92); }

/* directional affordance: icons hint at what the control does */
.pill i { transition: transform .2s var(--ease); }
.pill:hover i.ph-arrow-right        { transform: translateX(3px); }
.pill.icon:hover i.ph-caret-left    { transform: translateX(-2px); }
.pill.icon:hover i.ph-caret-right   { transform: translateX(2px); }
.nav-item i { transition: transform .2s var(--ease), color .16s ease; }
.nav-item:hover i { transform: scale(1.1); }

/* primary action: icon tile lifts + brightens on hover */
.action-card.primary i { transition: transform .2s var(--ease), filter .2s var(--ease); }
.action-card.primary:hover i { transform: scale(1.06); filter: brightness(1.06); }

.pill.primary { position: relative; overflow: hidden; }
.pill.primary::before {
  content: none;
}
.pill.primary:hover::before { transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .pill.primary::before { display: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .shell, .card, .stat, .canvas-wrap, .day-person-glass { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .card, .stat, .canvas-wrap, .day-person-glass { background: #fff; }
  .shell { background: rgba(255,255,255,0.9); }
  body::before, body::after { display: none; }
}