/* ==========================================================================
   DreamSheets — production scheduling
   Flat, square, dense. Deliberately reads as production paperwork, not a
   consumer app. Zero border-radius anywhere. Colour is reserved for DATA
   (teams, locations, flags, conflicts); chrome is greyscale + the brand blue.

   Brand palette is sampled from the supplied logo artwork, not approximated:
     #4c5cf2  brand blue   (the icon fill)
     #3b50ef  brand deep   (the "cast" wordmark; the darker interactive state)
     #060924  brand navy   (the "crew" wordmark; the chrome base)
   Every foreground/background pairing below is checked against WCAG AA.
   ========================================================================== */

:root {
  /* chrome */
  --page:        #f2f3f5;
  --panel:       #ffffff;
  --line:        #d8dbe0;
  --line-strong: #b9bec7;
  /* Chrome is now the brand navy rather than neutral charcoal, so the nav,
     week bands and login share one family with the logo. Kept very dark and
     barely saturated: it must still read as paperwork, not as a blue app. */
  --charcoal:    #12162b;
  --charcoal-2:  #1b2039;
  --charcoal-3:  #262c48;
  --ink:         #1a1d22;
  --ink-2:       #4a5058;
  --ink-3:       #6b727c;      /* 4.86:1 on white — was #767d87 at 4.16 (AA fail) */

  /* brand */
  --brand:       #4c5cf2;      /* 5.10:1 on white */
  --brand-deep:  #3b50ef;      /* 5.87:1 on white — hover/active */
  --brand-navy:  #060924;
  --brand-tint:  #eef1fe;      /* selection/positive wash; 5.21:1 with brand-deep */

  /* Interaction and identity use the brand blue. Red is now reserved
     strictly for destruction and conflict, so a red thing on screen always
     means something is wrong — it is no longer also the house colour. */
  --accent:      var(--brand);
  --accent-dark: var(--brand-deep);
  --danger:      #b3282d;      /* 6.45:1 on white */
  --danger-dark: #8e1f23;
  --wordmark:    #ffffff;

  /* data states */
  --conflict:      #c0242b;
  --conflict-bg:   #fdeaea;
  --select:        #3b50ef;
  --select-bg:     #eef1fe;
  --flag-ot:       #b45309;
  --flag-upgrade:  #1d4ed8;
  --flag-holiday:  #a8306e;
  --flag-shoot:    #15803d;
  --note-bg:       #fbf8ec;
  --note-rule:     #7a7a2e;
  /* Engagement: the crew list's one piece of colour. Two hues far enough
     apart to read at a 3px rule, both dark enough to carry white text on the
     C/D mark (checked in scripts/contrast.py). */
  --eng-contract:  #1f6f5c;
  --eng-daily:     #9a5a12;
  /* "Today" on the dark day-header. A light tint of the brand blue rather
     than the old yellow: 7.18:1 on the nav navy, and it keeps the one
     non-data highlight inside the brand family. */
  --today:         #8f9dff;

  /* metrics — one spacing system, all multiples of 2 */
  --rail-w:     58px;
  /* Floor for a day column. Below this a crew name starts truncating, so this
     is the point at which the grid stops shrinking and starts scrolling. */
  --day-min:    150px;
  /* The width below which the whole week scrolls rather than squeezes. Derived
     from the parts so the two can never drift apart. */
  --week-min:   calc(var(--rail-w) + 7 * var(--day-min));
  --strip-h:    22px;
  --sidebar-w:  240px;
  --nav-h:      38px;
  /* timeline views (labour / location flow) */
  --tl-rail:    190px;
  --tl-day:     30px;
  --tl-row:     20px;

  --fs-base:    13px;
  --fs-sm:      11px;
  --fs-xs:      9.5px;
  --fs-caption: 8.5px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--page);
  color: var(--ink);
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Arial, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

/* Every corner is hard. No exceptions. */
*, *::before, *::after { border-radius: 0 !important; }

a { color: var(--select); text-decoration: none; }
a:hover { text-decoration: underline; }

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

:focus-visible {
  outline: 2px solid var(--select);
  outline-offset: 1px;
}

/* ---- scrollbars -------------------------------------------------------
   Default OS scrollbars read as foreign chrome next to the dense greyscale
   paperwork UI. One square, thin treatment everywhere a pane scrolls
   (crew pool, calendar main, timelines, flyouts, admin tables).
   Firefox: scrollbar-*; Chromium/Safari: ::-webkit-scrollbar.             */
* {
  scrollbar-width: thin;
  scrollbar-color: #9aa2ae #e6e8ec;
}
*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
*::-webkit-scrollbar-track {
  background: #e6e8ec;
  border: 0 solid transparent;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
*::-webkit-scrollbar-thumb {
  background: #9aa2ae;
  border: 2px solid #e6e8ec;   /* inset so the thumb stays square and quiet */
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: #7d8694;
  border: 2px solid #e6e8ec;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:active {
  background: #5f6876;
  border: 2px solid #e6e8ec;
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
  background: #e6e8ec;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
/* Dark chrome (nav-adjacent / charcoal panels): quieter light thumb. */
.nav,
.week-title,
.tl-head {
  scrollbar-color: #4a5168 #1b2039;
}
.nav::-webkit-scrollbar-track,
.week-title::-webkit-scrollbar-track,
.tl-head::-webkit-scrollbar-track {
  background: #1b2039;
  border-color: #12162b;
}
.nav::-webkit-scrollbar-thumb,
.week-title::-webkit-scrollbar-thumb,
.tl-head::-webkit-scrollbar-thumb {
  background: #4a5168;
  border-color: #1b2039;
}
.nav::-webkit-scrollbar-thumb:hover,
.week-title::-webkit-scrollbar-thumb:hover,
.tl-head::-webkit-scrollbar-thumb:hover {
  background: #6a7390;
  border-color: #1b2039;
}

.caption {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-3);
  font-weight: 600;
}

.muted { color: var(--ink-3); }
.err   { color: var(--danger); }
.mono  { font-variant-numeric: tabular-nums; }

/* ============================== top nav ============================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--nav-h);
  display: flex;
  align-items: stretch;
  background: var(--charcoal);
  color: #e8eaee;
  border-bottom: 1px solid #000;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  white-space: nowrap;
  /* It is a link to the calendar, but it is chrome, not navigation: no
     underline, no accent colour, and it must never look "visited". */
  text-decoration: none;
  color: inherit;
}
.nav-brand:hover { text-decoration: none; background: var(--charcoal-2); }
.nav-brand:hover .wordmark { opacity: .92; }

/* Hairline between the logo and the production name — separates identity
   from content without adding another box. */
.nav-rule {
  width: 1px;
  align-self: stretch;
  margin: 8px 0;
  background: #39405e;
}

.wordmark {
  /* The real logo, not type. Sized by height so the lockup's own proportions
     drive the width; `width:auto` keeps it from squashing if the nav tightens. */
  display: block;
  height: 21px;
  width: auto;
}

.nav-title {
  font-size: var(--fs-sm);
  letter-spacing: .05em;
  color: #cfd3da;
}

.nav-version {
  font-size: var(--fs-xs);
  color: #8b929c;
  letter-spacing: .06em;
}

.nav-links { display: flex; align-items: stretch; }

.nav-links a {
  display: flex;
  align-items: center;
  padding: 0 13px;
  color: #c8cdd5;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .07em;
  text-decoration: none;
  border-left: 1px solid #000;
}
.nav-links a:hover { background: var(--charcoal-2); color: #fff; text-decoration: none; }
.nav-links a.on { background: var(--charcoal-3); color: #fff; box-shadow: inset 0 -3px 0 var(--accent); }

.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  border-left: 1px solid #000;
}

.nav-right input[type=date] {
  background: var(--charcoal-2);
  color: #e8eaee;
  border: 1px solid #4a5058;
  padding: 2px 4px;
  font-size: var(--fs-sm);
}

.nav-user { font-size: var(--fs-xs); color: #8b929c; letter-spacing: .05em; }

/* ---- Responsive nav: collapse tabs into a dropdown on narrow screens ----
   The breakpoint is generous (1100px) because the nav has the logo + title
   on the left, 11 tabs in the middle, and presence/live/sign-out on the
   right. Even on a 1280px laptop the tabs get cramped. Below the breakpoint
   the tabs disappear and a ☰ button appears; clicking it drops them down
   as a vertical panel anchored under the nav bar. */

.nav-menu-btn {
  display: none;
  align-items: center;
  padding: 0 12px;
  background: none;
  border: 0;
  border-left: 1px solid #000;
  color: #c8cdd5;
  font-size: 18px;
  cursor: pointer;
}
.nav-menu-btn:hover { background: var(--charcoal-2); color: #fff; }

@media (max-width: 1100px) {
  .nav-menu-btn { display: flex; }

  /* Hide the inline tab bar; it reappears as a dropdown panel. */
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--charcoal);
    border-bottom: 1px solid #000;
    z-index: 60;
    box-shadow: 0 8px 16px rgba(0,0,0,.3);
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto;
  }
  .nav-links.nav-open { display: flex; }

  /* Stack tabs vertically, full width. */
  .nav-links a {
    padding: 10px 16px;
    border-left: 0;
    border-bottom: 1px solid #000;
  }
  .nav-links a.on {
    box-shadow: inset 3px 0 0 var(--accent);
  }

  /* Collapse production title to save space. */
  .nav-version { display: none; }

  /* Trim the right side on narrow screens. */
  .nav-user { display: none; }
}

@media (max-width: 700px) {
  .nav-title { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .presence-strip { display: none; }
}

/* ============================== buttons ============================== */

.btn {
  background: #fff;
  border: 1px solid var(--line-strong);
  padding: 3px 9px;
  font-size: var(--fs-sm);
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover  { background: #eef0f3; border-color: var(--ink-3); }
.btn:active { background: #e2e5e9; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent-dark);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover { background: var(--accent-dark); }

.btn-dark {
  background: var(--charcoal-2);
  border-color: #000;
  color: #e8eaee;
}
.btn-dark:hover { background: var(--charcoal-3); }

.btn-danger { color: var(--danger); border-color: #d9a5a7; }
.btn-danger:hover { background: #fdeaea; border-color: var(--danger); }

.btn-x {
  background: none;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  padding: 0 4px;
  font-size: 13px;
  line-height: 1;
}
.btn-x:hover { color: var(--danger); }

/* ============================ app shell ============================= */

.shell {
  display: flex;
  align-items: stretch;
  height: calc(100vh - var(--nav-h));
  overflow: hidden;
}

/* ============================== sidebar =============================
   Crew + location pool on the main calendar. One type ladder end-to-end:

     tabs / section heads  →  fs-xs  (section chrome)
     cards / search text   →  fs-sm  (content)
     badges / counts       →  fs-xs  (meta)

   Location colour is a left rule + head swatch — never a full-fill head —
   so it matches the crew engagement rule language and does not shout over
   the grid.                                                               */

.sidebar {
  position: relative;
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  min-width: 160px;
  max-width: 480px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Collapsed pool: calendar takes the full width. The toggle lives in the
   filter bar so there is always a way back without a floating edge handle. */
.shell.pool-hidden .sidebar {
  display: none;
}
.shell.pool-hidden .main {
  /* No second source of width — the sidebar is simply gone. */
  min-width: 0;
}

#pool-toggle[aria-pressed="false"] {
  background: var(--brand-tint);
  border-color: var(--brand-deep);
  color: var(--brand-deep);
}

.sidebar-resize {
  position: absolute;
  top: 0; right: -3px; bottom: 0;
  width: 6px;
  cursor: col-resize;
  z-index: 20;
}
.sidebar-resize:hover { background: rgba(31, 111, 235, .28); }

.sb-tabs {
  display: flex;
  border-bottom: 1px solid var(--line-strong);
  flex: 0 0 auto;
  background: #eef0f2;
}

.sb-tab {
  flex: 1;
  padding: 6px 4px;
  background: transparent;
  border: none;
  border-right: 1px solid var(--line);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  line-height: 1.2;
}
.sb-tab:last-child { border-right: none; }
.sb-tab:hover { color: var(--ink); background: #e4e7eb; }
.sb-tab.on {
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--accent);
}

.sb-search {
  flex: 0 0 auto;
  padding: 5px 6px;
  border-bottom: 1px solid var(--line);
  background: #f7f8f9;
}
.sb-search input {
  width: 100%;
  border: 1px solid var(--line-strong);
  padding: 4px 6px;
  font-size: var(--fs-sm);
  background: #fff;
  color: var(--ink);
}
.sb-search input::placeholder { color: var(--ink-3); }

.sb-body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }
.sb-pane { display: none; }
.sb-pane.on { display: block; }

/* One section-head style for Contract / Stage / Placeholders alike. */
.sb-group-head {
  padding: 5px 8px;
  min-height: 24px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 2;
  background: #eef0f2;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
}
.sb-head-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-count {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: var(--fs-caption);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  letter-spacing: .04em;
}

/* Engagement is the crew list's organising fact, so it gets the one piece of
   colour in the sidebar: a left rule, not a fill. A fill would compete with
   the team-coloured cards on the grid, which is where colour has to mean
   something. Contract and daily are distinguished by hue AND by the C/D mark,
   so the distinction survives a colour-blind reader. */
.sb-group-head.eng-contract { box-shadow: inset 3px 0 0 var(--eng-contract); }
.sb-group-head.eng-daily    { box-shadow: inset 3px 0 0 var(--eng-daily); }
.sb-group-head.eng-none     { box-shadow: inset 3px 0 0 var(--line-strong); }

.sb-crew {
  border-left: 3px solid var(--line-strong);
}
.sb-crew.eng-contract { border-left-color: var(--eng-contract); }
.sb-crew.eng-daily    { border-left-color: var(--eng-daily); }
.sb-crew.eng-none     { border-left-color: var(--line-strong); }

.eng-mark {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-caption);
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
.eng-mark.eng-contract { background: var(--eng-contract); }
.eng-mark.eng-daily    { background: var(--eng-daily); }

/* Placeholders: planning seeds under the crew tab. Collapsed by default —
   one header row with a chevron; expand when you need to drag a role slot.
   Cards stay dashed so they never look like people. */
.sb-group-head.eng-placeholder {
  box-shadow: inset 3px 0 0 var(--ink-3);
  width: 100%;
  cursor: pointer;
  border: none;
  border-bottom: 1px solid var(--line);
  text-align: left;
  /* Keep the shared head type — do not `font: inherit` (that wiped it). */
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: #eef0f2;
  font-family: inherit;
  padding: 5px 8px;
}
.sb-group-head.eng-placeholder:hover { background: #e4e7eb; color: var(--ink); }
.sb-group-head.eng-placeholder:focus-visible {
  outline: 2px solid var(--brand-deep);
  outline-offset: -2px;
}
.sb-ph-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sb-chevron {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent var(--ink-2);
  transition: transform 100ms ease;
}
.sb-placeholders:not(.is-collapsed) .sb-chevron {
  transform: rotate(90deg);
}
.sb-ph-title { flex: 1 1 auto; }
.sb-placeholders.is-collapsed .sb-list { display: none; }

.sb-placeholder {
  border: 1px dashed var(--line-strong);
  background: #f7f8f9;
  border-left: 3px solid var(--ink-3);
}
.sb-placeholder:hover { border-color: var(--ink-2); background: #eef0f3; }
.bcard.placeholder .ph-tick {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 2px;
  opacity: .9;
}

@media (prefers-reduced-motion: reduce) {
  .sb-chevron { transition: none; }
}

/* Location heads: greyscale like crew, colour only as a swatch — same
   vocabulary as engagement rules, not a second painted system. */
.sb-loc-head .sb-loc-swatch {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(0, 0, 0, .28);
}
.sb-loc {
  border-left: 3px solid var(--line-strong);
  background: #fff;
}
.sb-loc-child {
  margin-left: 10px;
}

/* Search + sort tools sit under the Contract (or All crew) header. */
.sb-tools {
  border-bottom: 1px solid var(--line);
  background: #f7f8f9;
}
.sb-tools .sb-search {
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 5px 6px;
}
.sb-tools .sb-sort {
  border-bottom: none;
  background: transparent;
  position: static;
  top: auto;
  z-index: auto;
}
.sb-empty-inline {
  padding: 8px 6px;
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

/* Sort control: same chip scale as the filter bar. */
.sb-sort {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 6px;
  border-bottom: 1px solid var(--line);
  background: #f7f8f9;
}
.sb-sort-label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--ink-3);
  margin-right: 2px;
}
.sb-sort-btn {
  flex: 1 1 0;
  padding: 3px 6px;
  border: 1px solid var(--line-strong);
  background: #fff;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  line-height: 1.2;
}
.sb-sort-btn:hover { border-color: var(--ink-3); color: var(--ink); }
.sb-sort-btn.on {
  background: var(--brand-tint);
  border-color: var(--brand-deep);
  color: var(--brand-deep);
}
.sb-sort-btn:focus-visible { outline: 2px solid var(--brand-deep); outline-offset: 1px; }

.sb-empty {
  padding: 12px 8px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}
.sb-empty a { color: var(--brand-deep); }

.sb-list {
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* crew + location cards in the sidebar — one card shape for both panes */
.card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: grab;
  user-select: none;
  min-height: 22px;
  line-height: 1.25;
  color: var(--ink);
}
.card:hover { border-color: var(--ink-3); background: #fafbfc; }
.card.dragging { opacity: .35; }

.card-name {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.role-badge {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .05em;
  padding: 1px 4px;
  background: #eceef1;
  border: 1px solid var(--line);
  color: var(--ink-2);
  min-width: 28px;
  text-align: center;
  text-transform: uppercase;
  line-height: 1.2;
}

.scene-tag {
  flex: 0 0 auto;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

/* Remove target — a bin that sits in the bottom-right corner of the viewport.
   Invisible until a booking or placed-location drag starts. The whole bin is
   the drop target. Restrained by default; danger red when the cursor is over
   it. Fixed to the viewport so it survives scroll. */
.delete-zone {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--brand-navy);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .04em;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22);
  pointer-events: none; /* hit-test is geometric; the ghost sits under the cursor */
}
body.dragging-booking .delete-zone.armed {
  display: flex;
  /* Slide + grow in from the bottom-right, not a slam. */
  animation: delete-zone-in 160ms cubic-bezier(.2, .8, .25, 1);
}
@keyframes delete-zone-in {
  from { opacity: 0; transform: translateY(12px) scale(.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.delete-zone-icon {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  opacity: .9;
}
.delete-zone-label { flex: 0 1 auto; white-space: nowrap; }

/* Hot: the cursor is over the bin — commit to the delete. */
.delete-zone.hot {
  background: var(--danger);
  color: #fff;
  transform: scale(1.06);
  box-shadow: 0 8px 28px rgba(179, 40, 45, .4);
}
.delete-zone.hot .delete-zone-icon { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  body.dragging-booking .delete-zone.armed { animation: none; }
  .delete-zone.hot { transform: none; }
}

/* ============================ main area ============================= */

.main {
  flex: 1 1 auto;
  overflow: auto;
  position: relative;
}

/* ---- filter bar: sticky in both axes ---- */
.filterbar {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  padding: 5px 10px;
  background: #e9ebee;
  border-bottom: 1px solid var(--line-strong);
  /* Keep the bar itself pinned when the grid scrolls horizontally. */
  width: 100%;
  min-width: var(--week-min);
}

/* Pool toggle owns the left edge — it sits against the sidebar it controls.
   Unit/team flagging is a separate job and lives on the right. */
.fb-left {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fb-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
}

.fb-group { display: flex; align-items: center; gap: 4px; }
.fb-label { font-size: var(--fs-caption); font-weight: 700; text-transform: uppercase;
            letter-spacing: .1em; color: var(--ink-2); margin-right: 2px; }

.chip {
  border: 1px solid var(--line-strong);
  background: #fff;
  padding: 2px 7px;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { border-color: var(--ink-2); }
.chip.hidden-state { text-decoration: line-through; color: var(--ink-3); background: #e4e6e9; }
.fb-hint { font-size: var(--fs-xs); color: var(--ink-3); }

/* ---- hover flyouts (calendar filters + Labour/Flow key) ---- */
.fb-fly {
  position: relative;
  flex: 0 0 auto;
}
.fb-fly-btn {
  white-space: nowrap;
}
.fb-fly-panel {
  display: none;
  position: absolute;
  /* Sit flush under the button; padding-top is the travel bridge. */
  top: 100%;
  right: 0;
  z-index: 80;
  min-width: 280px;
  max-width: min(440px, 94vw);
  max-height: min(70vh, 520px);
  overflow: auto;
  padding: 14px 10px 10px;
  margin: 0;
  background: #fff;
  border: 1px solid var(--line-strong);
  box-shadow: 0 8px 28px rgba(18, 22, 43, .16);
}
/* Invisible hit strip above the panel so the pointer can cross the gap. */
.fb-fly-panel::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 14px;
}
/* Open only while .is-open (JS). No :focus-within — that pinned menus open. */
.fb-fly.is-open > .fb-fly-panel {
  display: block;
}
.fb-fly-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 6px;
  padding: 0 0 5px;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.fb-fly-head + .fb-fly-head,
.key-section + .key-section .fb-fly-head,
.key-section .fb-fly-head {
  margin-top: 10px;
}
.fb-fly-note,
.fb-fly-empty {
  margin: 0 0 8px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}
.fb-vis-row {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 5px 2px;
  border-top: 1px solid var(--line);
}
.fb-vis-row:first-of-type { border-top: none; }
.fb-vis-swatch {
  width: 10px;
  height: 14px;
  border: 1px solid rgba(0,0,0,.22);
  flex: 0 0 auto;
}
.fb-vis-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Segmented control — same language as filter chips, not OS range sliders. */
.fb-seg {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--line-strong);
  background: #e9ebee;
  flex: 0 0 auto;
}
.fb-seg-btn {
  appearance: none;
  border: 0;
  border-right: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-2);
  padding: 2px 7px;
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
}
.fb-seg-btn:last-child { border-right: 0; }
.fb-seg-btn:hover { background: #f4f5f7; color: var(--ink); }
.fb-seg-btn.on {
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--ink-2);
}
.fb-seg-btn:focus-visible {
  outline: 2px solid var(--select, #3b6ea5);
  outline-offset: -2px;
  z-index: 1;
}

/* ---- drag mode selector (Move / Leave slot) ---- */
.drag-mode {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}
.drag-mode-label {
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-2);
}
.fb-vis-row.is-hide .fb-vis-name {
  color: var(--ink-3);
  text-decoration: line-through;
}
.fb-vis-row.is-collapse .fb-vis-name { color: #5c4f28; }
.fb-tips-list {
  margin: 4px 0 0;
  padding: 0 0 0 1.1em;
  font-size: var(--fs-xs);
  color: var(--ink-2);
  line-height: 1.45;
}
.fb-tips-list li { margin: 0 0 5px; }
.fb-tips-list strong { color: var(--ink); }
.fb-fly-tips { min-width: 280px; }

/* ---- Key dropdown (Labour / Flow): dense table, not a messy stack ---- */
.tl-bar-aside .fb-fly { z-index: 40; }
.tl-bar-aside .key-panel {
  min-width: 300px;
  max-width: min(420px, 94vw);
  padding-top: 14px;
}
.key-section {
  margin: 0 0 2px;
}
.key-section + .key-section {
  margin-top: 4px;
  padding-top: 2px;
  border-top: 1px solid var(--line);
}
.key-section .fb-fly-head {
  margin-top: 8px;
  margin-bottom: 4px;
  border-bottom: none;
  padding-bottom: 0;
  color: var(--ink-3);
}
.key-section:first-child .fb-fly-head { margin-top: 0; }
.key-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
}
.key-table td {
  padding: 3px 4px;
  vertical-align: middle;
  border-bottom: 1px solid #eef0f2;
}
.key-table tr:last-child td { border-bottom: 0; }
.key-table .key-codes {
  width: 1%;
  white-space: nowrap;
  padding-right: 8px;
}
.key-table .key-codes .key-swatch {
  display: inline-flex;
  margin-right: 3px;
  min-width: 1.7em;
  padding: 1px 4px;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  border: 1px solid rgba(0,0,0,.28);
  justify-content: center;
}
.key-table .key-codes .key-swatch:last-child { margin-right: 0; }
.key-table .key-full {
  font-weight: 600;
  color: var(--ink-2);
  line-height: 1.25;
}
.key-table .key-full .key-hint {
  display: block;
  font-weight: 500;
  color: var(--ink-3);
  font-size: var(--fs-caption);
  text-transform: none;
  letter-spacing: 0;
}

/* ---- week block ----
   `width: max-content` would let the grid's 1fr tracks resolve to their
   content width, which defeats the point of fluid columns. Fill the available
   space instead, and only overflow (scroll) once the columns would go below
   their readable floor. */
.week { margin: 0 0 34px; width: 100%; min-width: var(--week-min); }

.week-title {
  position: relative;
  z-index: 28;
  background: var(--charcoal);
  color: #fff;
  border-bottom: 3px solid var(--accent);
  width: 100%;
  min-width: var(--week-min);
}
/* The band spans the whole grid width, so it cannot itself slide. Sticking the
   inner content keeps the week label on screen during horizontal scroll. */
.week-title-inner {
  position: sticky;
  left: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 10px;
  width: max-content;
  cursor: context-menu;
}
.week-title h2 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em;
                 white-space: nowrap; }
.week-title .wk { font-size: var(--fs-xs); color: #a7adb6; letter-spacing: .12em;
                  font-weight: 700; white-space: nowrap; }

/* The grid: rail + seven EQUAL day columns.
   `1fr` with a `--day-min` floor means the week fills the available width
   exactly — no horizontal scroll at normal window sizes, which is what stops
   the sticky rail sliding across the columns when you drag towards Fri/Sat/Sun.
   Below the floor the whole grid scrolls as one, and the rail sticks as
   designed. Saturday and Sunday are full width: a weekend rig day carries the
   same crew as any other day and was unreadable squeezed into 124px.

   `row-gap` is the gutter BETWEEN teams/units. Each team is still one grid
   row, so Mon–Sun stay visually continuous; only the vertical stack opens up.
   The gap colour is a shade darker than the cells so the gutter reads as
   space rather than as a missing border. */
.grid {
  display: grid;
  grid-template-columns:
    var(--rail-w)
    repeat(7, minmax(var(--day-min), 1fr));
  row-gap: 5px;
  background: #cfd3d9;
  border: 1px solid var(--line);
  border-top: none;
}

.gcell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-width: 0;
  background: var(--panel);
}
.gcell:last-child { border-right: none; }
.gcell.weekend { background: #f4f5f7; }

/* rail */
.rail {
  position: sticky;
  left: 0;
  z-index: 20;
  background: #eef0f2;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  padding: 2px;
  gap: 2px;
  overflow: hidden;
}

.rail-plate {
  background: #dfe2e6;
  border: 1px solid var(--line-strong);
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px;
  text-align: center;
  line-height: 1.2;
}

/* Sparse weeks: + Team rail + drop strip (only when user can edit). */
.team-add-rail {
  justify-content: center;
  align-items: stretch;
  min-height: 28px;
  background: #e8eaee;
}
.team-add-btn {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 26px;
  margin: 0;
  padding: 2px 4px;
  border: 1px dashed var(--line-strong);
  background: #f4f5f7;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1.2;
}
.team-add-btn:hover {
  background: var(--brand-tint);
  border-color: var(--brand);
  color: var(--brand-deep);
}
.team-add-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  background: #f7f8fa;
  border-bottom-style: dashed;
}
.team-add-zone.weekend { background: #f2f3f5; }
.team-add-hint {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: .55;
}
.team-add-zone.drop-ok {
  background: var(--select-bg) !important;
}
.team-add-zone.drop-ok .team-add-hint {
  color: var(--brand-deep);
  opacity: 1;
}

/* Anchored team chooser (click + Team or drop onto the strip). */
.team-picker {
  position: fixed;
  z-index: 450;
  width: min(260px, calc(100vw - 16px));
  max-height: min(360px, calc(100vh - 16px));
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #000;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .35);
}
.team-picker.hidden { display: none; }
.team-picker-head {
  flex: 0 0 auto;
  padding: 7px 10px;
  background: var(--charcoal);
  color: #fff;
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--brand);
}
.team-picker-list {
  flex: 1 1 auto;
  overflow: auto;
  padding: 4px 0;
}
.team-picker-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 6px 10px;
  border: 0;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.team-picker-item:hover:not(:disabled) {
  background: var(--brand-tint);
}
.team-picker-item:disabled,
.team-picker-item.is-on:disabled {
  opacity: .55;
  cursor: default;
  color: var(--ink-3);
}
.team-picker-swatch {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, .25);
}
.team-picker-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-picker-badge {
  flex: 0 0 auto;
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.team-picker-cancel {
  flex: 0 0 auto;
  width: 100%;
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-top: 1px solid var(--line);
  background: #f4f5f7;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.team-picker-cancel:hover {
  background: #e9ebef;
  color: var(--ink);
}

.rail-cap { font-size: var(--fs-caption); color: var(--ink-3); text-align: right;
            text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

/* Rotated team name, like a rotated Excel header. */
.rail[data-team-rail][data-week-monday] {
  cursor: context-menu;
}
.rail-rot {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
}
.rail-rot span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 3px 1px;
  border: 1px solid rgba(0, 0, 0, .22);
  white-space: nowrap;
}

/* day header */
.dayhead {
  position: sticky;
  top: 30px;
  z-index: 25;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  background: var(--charcoal);
  color: #fff;
  padding: 4px 7px;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}
.dayhead .dw { font-size: var(--fs-sm); font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
.dayhead .dd { font-size: var(--fs-xs); color: #a7adb6; white-space: nowrap; }
/* Weekend day headers keep the lighter .gcell.weekend background with dark text. */
.dayhead.weekend { background: #f4f5f7; color: var(--ink); }
.dayhead.weekend .dd { color: var(--ink-2); }
.dayhead.today { box-shadow: inset 0 -3px 0 var(--today); }
.dayhead.today .dw { color: var(--today); }
.corner {
  position: sticky;
  left: 0;
  top: 30px;
  z-index: 35;
  background: var(--charcoal);
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}

/* ---- unit rows ---- */
.unit-cell { cursor: pointer; padding: 0; }
.unit-cell:hover { background: #f7f8fa; }
.unit-cell.weekend:hover { background: #eef0f3; }

/* "No crew" filter state: hide crew cards but keep the cell, band, and
   location lines visible. The booking still exists — just hidden from view. */
.unit-cell.unit-no-crew .unit-crew { display: none; }

.unit-band {
  height: 15px;
  background: #e4e6ea;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 5px;
  font-size: var(--fs-caption);
  color: var(--ink-3);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 600;
}

.unit-line {
  height: var(--strip-h);
  border-bottom: 1px dotted var(--line);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 3px;
  overflow: hidden;
}
.unit-line:last-child { border-bottom: none; }
.unit-line .dash { color: #c3c8cf; font-size: var(--fs-sm); }

/* Crew list inside a unit cell — below the location lines. */
.unit-crew {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 3px 3px;
}
.unit-crew .bcard {
  font-size: var(--fs-xs);
  padding: 1px 3px;
}

.unit-line.drop-ok {
  outline: 2px solid var(--brand-deep);
  outline-offset: -2px;
  background: rgba(37, 99, 235, .08);
}

/* location tag — colour comes from the location itself */
.loc-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  padding: 1px 4px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .03em;
  border: 1px solid rgba(0, 0, 0, .3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
}
.loc-tag[data-location] {
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.loc-tag.dragging { opacity: .35; }
.loc-tag .sc { font-weight: 400; opacity: .85; font-variant-numeric: tabular-nums; }

/* ---- team rows ---- */
.team-cell { padding: 0; display: flex; flex-direction: column; min-height: 46px; }

.strip {
  height: var(--strip-h);
  flex: 0 0 var(--strip-h);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 3px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.strip-jobs {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink);
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.strip-chevron {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 10px;
  line-height: 1;
  opacity: .45;
  color: var(--ink-2);
  padding: 0 2px;
}
.strip-jobs-row:hover .strip-chevron { opacity: .85; }
.strip .ghost {
  font-size: var(--fs-xs);
  color: rgba(0, 0, 0, .3);
  font-style: italic;
  opacity: 0;
  letter-spacing: .04em;
}
.strip:hover .ghost { opacity: 1; }

/* Compact job picker anchored under the jobs strip. */
.jobs-menu {
  position: fixed;
  z-index: 420;
  max-height: min(320px, calc(100vh - 16px));
  overflow: auto;
  background: #fff;
  border: 1px solid var(--line-2, #c5cad3);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
  padding: 4px 0;
}
.jobs-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 6px 12px;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
}
.jobs-menu-item:hover,
.jobs-menu-item:focus-visible {
  background: #eef2f7;
  outline: none;
}
.jobs-menu-item.on {
  background: #e8eef8;
  color: var(--brand-deep, #1d4ed8);
}
.jobs-menu-empty {
  padding: 10px 12px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

.crew-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px;
  min-height: 24px;
}

/* crew card on the calendar */
.bcard {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 1px 3px;
  border: 1px solid rgba(0, 0, 0, .18);
  font-size: var(--fs-sm);
  line-height: 1.25;
  cursor: grab;
  user-select: none;
  min-height: 19px;
  position: relative;
}
.bcard:hover { border-color: rgba(0, 0, 0, .45); }
.bcard.dragging { opacity: .3; }
.bcard.selected { outline: 2px solid var(--select); background: var(--select-bg) !important; }

.bcard.conflict {
  border-color: var(--conflict);
  background: var(--conflict-bg) !important;
  box-shadow: inset 3px 0 0 var(--conflict);
  padding-left: 6px;
}

/* Empty role slot — dashed edge, italic role name. Drop a person on it to fill. */
.bcard.placeholder {
  border-style: dashed;
  border-color: rgba(0, 0, 0, .35);
  opacity: .92;
}
.bcard.placeholder.drop-fill {
  outline: 2px solid var(--brand-deep);
  outline-offset: -1px;
  background: var(--brand-tint) !important;
}
.bcard .ph-label {
  font-style: italic;
  font-weight: 500;
  color: var(--ink-2);
}

.bcard .bname {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.flags { display: flex; gap: 2px; flex: 0 0 auto; }
.flag {
  font-size: var(--fs-caption);
  font-weight: 700;
  padding: 0 2px;
  border: 1px solid;
  line-height: 1.3;
  min-width: 11px;
  text-align: center;
}
.flag-ot      { color: var(--flag-ot);      border-color: var(--flag-ot);      background: #fef3e2; }
.flag-upgrade { color: var(--flag-upgrade); border-color: var(--flag-upgrade); background: #e8effc; }
.flag-holiday { color: var(--flag-holiday); border-color: var(--flag-holiday); background: #fceaf3; }
.flag-shoot   { color: var(--flag-shoot);   border-color: var(--flag-shoot);   background: #e7f6ec; }
/* Consecutive-days marker. Derived, not a configurable day flag — its own
   strong hue so a long run jumps out of the OT/S/H cluster. The 7th day (and
   beyond) escalates to a hotter red-violet so it reads as more urgent than the
   6th. */
.flag-consec-6 { color: #7a3ca3; border-color: #7a3ca3; background: #f1e8f8; }
.flag-consec-7 { color: #fff; border-color: #6d1f5c; background: #9c2a72; }
.flag-conflict { color: #fff; background: var(--conflict); border-color: var(--conflict-dark, #8e1f23); }

/* Day-flag picker in the booking dialog. One row per configured flag, with
   the cost effect stated on the row — the person ticking Camera O/T should be
   able to see it doubles the day without leaving the dialog. */
.flag-picks { display: flex; flex-direction: column; gap: 1px; margin: 4px 0 2px; }
.flag-pick {
  display: grid;
  /* Fixed hours + cost tracks so the columns line up ROW TO ROW. Each row is
     its own grid, so auto-sized tracks drift when note text differs
     ("hrs @ 1.5×" vs "hrs @ 2×") and the input boxes stop aligning. Fixed
     widths pin the input, the multiplier note and the cost to the same x on
     every row. */
  grid-template-columns: auto auto 1fr 120px 72px;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: #f6f7f8;
  border: 1px solid var(--line, #d7dade);
  font-size: var(--fs-sm);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}
.flag-pick:hover { background: #eef0f2; }
.flag-pick.on { background: #fff; border-color: var(--ink-2, #6b7280); }
.flag-pick-code {
  font-weight: 700;
  font-size: var(--fs-caption);
  padding: 0 3px;
  border: 1px solid;
  min-width: 22px;
  text-align: center;
}
.flag-pick-name {
  color: var(--ink-1);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.flag-pick-effect {
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-caption);
  color: var(--ink-2);
  white-space: nowrap;
  grid-column: 4 / span 2;
  text-align: right;
}

/* Hours entry sits on the flag row itself: the person ticking Camera O/T is
   the person who knows the hours, and making them go elsewhere to enter it is
   how days end up flagged but costing nothing. The input is pinned to the
   left of its fixed track and the note follows a fixed-width input, so the
   boxes and the "@ N×" notes line up down the column. */
.flag-pick-hours { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.flag-pick-hours input {
  height: 24px;
  padding: 0 5px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--line-strong, #b9bec7);
  background: #fff;
}
/* Win over the generic `.field input[type=number]` width:100% (same
   specificity, later in the file) — the hours box is a compact inline field
   on the flag row, not a full-width form input. */
.field .flag-pick-hours input[type="number"] { width: 62px; }
.flag-pick-hours input:disabled { background: #f0f1f3; color: var(--ink-3); }
.flag-pick-hours i {
  font-style: normal;
  font-size: var(--fs-caption);
  color: var(--ink-3);
}
.flag-pick-cost {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--ink);
  min-width: 68px;
  text-align: right;
}
.flag-total {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  text-align: right;
}

/* drop target feedback */
.drop-ok { outline: 2px dashed var(--select); outline-offset: -2px; background: var(--select-bg) !important; }

/* ---- extras + notes rows ---- */
.extras-cell { padding: 2px; background: #f1f2f4; }
.extras-cell.weekend { background: #eaebee; }

.notes-cell {
  padding: 3px;
  border: 1px dashed var(--line-strong);
  border-top: none;
  background: #fcfcfd;
  min-height: 30px;
}
.note {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  background: var(--note-bg);
  border: 1px solid #e6e0c4;
  border-left: 3px solid var(--note-rule);
  padding: 2px 4px;
  font-size: var(--fs-xs);
  color: #4a4726;
  margin-bottom: 2px;
}
.note span { flex: 1 1 auto; }
.note-add {
  width: 100%;
  border: 1px dashed var(--line-strong);
  background: transparent;
  font-size: var(--fs-xs);
  padding: 2px 4px;
  color: var(--ink-2);
}
.note-add::placeholder { color: #b0b6be; font-style: italic; }
.note-add:focus { background: #fff; border-style: solid; }

/* ---- marquee selection ---- */
.marquee {
  position: fixed;
  z-index: 55;
  border: 1px solid var(--select);
  background: rgba(31, 111, 235, .12);
  pointer-events: none;
}

/* ---- drag ghost (follows cursor, shows the whole selection) ---- */
.drag-ghost {
  position: fixed;
  z-index: 70;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 1px;
  opacity: .92;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .28);
}
.drag-ghost .bcard, .drag-ghost .card { cursor: grabbing; width: 190px; }
.drag-ghost .more {
  background: var(--charcoal);
  color: #fff;
  font-size: var(--fs-xs);
  padding: 1px 4px;
  letter-spacing: .06em;
}

body.dragging-booking, body.dragging-booking * { cursor: grabbing !important; }

/* ---- infinite scroll sentinels ---- */
.sentinel {
  padding: 14px;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ink-3);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* ============================== menus ============================== */

.ctx {
  position: fixed;
  z-index: 80;
  min-width: 176px;
  background: #fff;
  border: 1px solid var(--ink-2);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .2);
  padding: 2px;
}
.ctx-head {
  padding: 3px 7px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-2);
  background: #f2f3f5;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
}
.ctx button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 4px 7px;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.ctx button:hover { background: var(--select-bg); }
.ctx button.danger { color: var(--danger); }
.ctx button.danger:hover { background: #fdeaea; }
.ctx button:disabled { color: #b6bbc2; cursor: not-allowed; }
.ctx-sep { height: 1px; background: var(--line); margin: 2px 0; }

/* ============================== modals ============================== */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 22, 26, .55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 16px 16px;
  overflow: auto;
}

.modal {
  background: #fff;
  border: 1px solid var(--charcoal);
  box-shadow: 3px 4px 0 rgba(0, 0, 0, .3);
  width: 100%;
  max-width: 430px;
}
.modal.wide { max-width: 660px; }

.modal-head {
  background: var(--charcoal);
  color: #fff;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.modal-head h3 {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.modal-head .x { background: none; border: none; color: #c8cdd5; font-size: 15px; cursor: pointer; line-height: 1; }
.modal-head .x:hover { color: #fff; }

.modal-body { padding: 12px; }
.modal-foot {
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 6px;
  align-items: center;
  background: #f7f8f9;
}
.modal-foot .spacer { flex: 1 1 auto; }

.field { margin-bottom: 9px; }
/* The field's own caption. Scoped to a DIRECT child so it never leaks into
   nested labels (the day-type checks, the flag-pick rows), which own their
   layout and case — a descendant `.field label` selector was overriding their
   display and text-transform. */
.field > label {
  display: block;
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-2);
  font-weight: 700;
  margin-bottom: 2px;
}
.field input[type=text], .field input[type=email], .field input[type=tel],
.field input[type=password], .field input[type=date], .field input[type=number],
.field select, .field textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  padding: 4px 6px;
  font-size: var(--fs-base);
  background: #fff;
}
.field-row { display: flex; gap: 8px; }
.field-row > * { flex: 1 1 0; min-width: 0; }

.checks { display: flex; flex-direction: column; gap: 1px; margin: 4px 0 2px; }
.checks label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  background: #f6f7f8;
  border: 1px solid var(--line);
  font-size: var(--fs-sm);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
  cursor: pointer;
}
.checks label:hover { background: #eef0f2; }
.checks label:has(input:checked) { background: #fff; border-color: var(--ink-2); }

/* Custom checkbox — the native tick reads as browser chrome; this is a flat
   square that fills brand-blue with a drawn check when on, matching the app's
   greyscale-paperwork look. Shared by the day-type row and the flag picker. */
.checks input[type="checkbox"],
.flag-pick > input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 0;
  border: 1px solid var(--line-strong);
  background: #fff;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
}
.checks input[type="checkbox"]:checked,
.flag-pick > input[type="checkbox"]:checked {
  background: var(--brand);
  border-color: var(--brand-deep);
}
.checks input[type="checkbox"]:checked::after,
.flag-pick > input[type="checkbox"]:checked::after {
  content: "";
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}
.checks input[type="checkbox"]:focus-visible,
.flag-pick > input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--select);
  outline-offset: 1px;
}

/* Kill the native number spinner — the up/down arrows are OS chrome and the
   hours field is nudged with the keyboard or typed, not clicked. */
.field input[type="number"],
.flag-pick-hours input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}
.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button,
.flag-pick-hours input[type="number"]::-webkit-outer-spin-button,
.flag-pick-hours input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Soft consecutive-days warning at the top of the booking dialog. Same badge
   colours as the calendar chip; a quiet tinted band, not an alarm. */
.bk-warn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  margin-bottom: 11px;
  border: 1px solid;
  font-size: var(--fs-sm);
  line-height: 1.35;
}
.bk-warn-6 { background: #f6eefb; border-color: #d9c2e8; color: #5c2e7d; }
.bk-warn-7 { background: #fbecf4; border-color: #e6b9d3; color: #7c1f5a; }
.bk-warn-badge {
  flex: 0 0 auto;
  font-weight: 700;
  font-size: var(--fs-caption);
  letter-spacing: .04em;
  padding: 2px 5px;
  border: 1px solid currentColor;
  line-height: 1;
}
.bk-warn-6 .bk-warn-badge { background: #f1e8f8; }
.bk-warn-7 .bk-warn-badge { color: #fff; background: #9c2a72; border-color: #6d1f5c; }
.bk-warn-text { color: inherit; }
.bk-warn-text strong { font-weight: 700; }

.tag-row { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 7px; min-height: 22px; }

.row-add {
  display: flex;
  gap: 6px;
  align-items: center;
}
.row-add select {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--line-strong);
  padding: 4px 6px;
  font-size: var(--fs-sm);
  background: #fff;
}
.row-add .btn { flex: 0 0 auto; }

.sb-empty-soft {
  margin: 4px 8px 8px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  font-style: italic;
}

.autocomplete { position: relative; }
.ac-list {
  position: absolute;
  z-index: 5;
  left: 0; right: 0;
  background: #fff;
  border: 1px solid var(--ink-2);
  max-height: 190px;
  overflow-y: auto;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .18);
}
.ac-list button {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 3px 6px;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.ac-list button:hover, .ac-list button.on { background: var(--select-bg); }
.ac-swatch { width: 10px; height: 10px; border: 1px solid rgba(0,0,0,.3); flex: 0 0 auto; }

/* 4x6 grid of location inputs for the unit dialog */
.unit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.unit-grid .col-head {
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  margin-bottom: 4px;
}

/* ============================ admin pages =========================== */

.page { max-width: 1250px; margin: 0 auto; padding: 14px 14px 60px; }
.page-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.page-head .spacer { flex: 1 1 auto; }
.page-note { font-size: var(--fs-sm); color: var(--ink-2); margin: -4px 0 10px; }

.panel { background: var(--panel); border: 1px solid var(--line); margin-bottom: 16px; }
.panel-head {
  background: #eef0f2;
  border-bottom: 1px solid var(--line);
  padding: 5px 9px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-2);
}

table.grid-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.grid-table th {
  background: var(--charcoal);
  color: #fff;
  text-align: left;
  padding: 5px 7px;
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 600;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
}
table.grid-table td { padding: 3px 7px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.grid-table tr:hover td { background: #f7f8fa; }
table.grid-table tr.parent-row td { background: #eceef1; font-weight: 700; }
table.grid-table tr.parent-row:hover td { background: #e4e7eb; }
table.grid-table tr.ghost-row td { background: #fbfcfc; }
table.grid-table tr.inactive td { opacity: .5; }
table.grid-table tfoot td { background: #eef0f2; font-weight: 700; border-top: 2px solid var(--ink-2); }
table.grid-table input[type=text], table.grid-table input[type=number],
table.grid-table input[type=email], table.grid-table input[type=date], table.grid-table select {
  border: 1px solid var(--line);
  padding: 2px 4px;
  font-size: var(--fs-sm);
  width: 100%;
  background: #fff;
}
table.grid-table input[type=color] { border: 1px solid var(--line-strong); padding: 0; width: 30px; height: 20px; background: none; cursor: pointer; }
table.grid-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.grid-table .w-sort input { width: 46px; }
table.grid-table .w-grip {
  width: 28px;
  padding-left: 4px;
  padding-right: 2px;
  text-align: center;
  user-select: none;
}
table.grid-table .w-drag {
  width: 28px;
  padding-left: 4px;
  padding-right: 2px;
  text-align: center;
  user-select: none;
}
table.grid-table .drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  cursor: grab;
  font-size: 14px;
  line-height: 1;
  letter-spacing: -1px;
  padding: 0;
}
table.grid-table .drag-handle:hover { color: var(--ink); background: #e8ebf0; }
table.grid-table .drag-handle:active { cursor: grabbing; }
table.grid-table tr.dragging-row { opacity: .35; }
table.grid-table tr.reorder-placeholder td {
  background: #e8eef8;
  border: 1px dashed var(--brand-deep, #1d4ed8);
  padding: 0;
}
.reorder-ghost {
  position: fixed;
  z-index: 500;
  pointer-events: none;
  opacity: .92;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .18);
  table-layout: fixed;
  border-collapse: collapse;
}
.reorder-ghost.reorder-ghost-group {
  table-layout: auto;
}
.reorder-ghost.reorder-ghost-group tr.ghost-row { display: none; }
.reorder-ghost td {
  padding: 3px 7px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  font-size: var(--fs-sm);
}
body.admin-reordering { cursor: grabbing; user-select: none; }
body.admin-reordering * { cursor: grabbing !important; }
table.grid-table .actions { white-space: nowrap; text-align: right; }

/* Locations admin: group spacing + nested drag.
   Gap row separates parent groups so the last set of one location does not
   merge into the next. Parent rows get a slightly darker plate so the start
   of each group is obvious. Drag operates on parent rows only — sets are
   moved with their parent. */
table.loc-table { border-collapse: collapse; }
table.loc-table tr.loc-gap td {
  padding: 0;
  height: 10px;
  background: var(--page);
  border: 0;
  border-bottom: 0;
}
table.loc-table tr.loc-gap:hover td { background: var(--page); }
table.loc-table tr.parent-row td {
  border-top: 2px solid var(--line-strong);
}
table.loc-table tr.ghost-row.loc-add-set-row td {
  border-bottom: 1px solid var(--line);
}
/* Drag handle only on parent rows */
table.loc-table tr:not(.parent-row) .w-grip { visibility: hidden; }
table.loc-table tr.ghost-row .w-grip { visibility: hidden; }

.section-save-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
  background: #f3f5f7;
}
.section-save-bar .btn[disabled],
.section-save-bar .btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.section-save-status {
  font-size: var(--fs-xs);
  color: var(--ink-2);
}
.panel[data-section-save].is-dirty .section-save-bar {
  background: #eef3ea;
  border-top-color: #c5d4b8;
}
table.grid-table tr.row-dirty td {
  background: #f7faf4;
}
table.grid-table tr.row-dirty:hover td {
  background: #f0f5ea;
}


/* ---- production home ---- */
.home-page {
  max-width: 1040px;
  padding-top: 22px;
  padding-bottom: 72px;
}
.home-hero {
  margin-bottom: 18px;
  padding: 4px 2px 0;
}
.home-lead {
  margin: 0;
  max-width: 62ch;
  line-height: 1.45;
}
.home-error,
.home-notice {
  margin: 0 0 14px;
  padding: 10px 12px;
}
.form-ok {
  background: #eef7f0;
  border: 1px solid #b7d4be;
  color: #1f5a2c;
  font-size: var(--fs-sm);
}
/* Error counterpart to .form-ok. Both are used as standalone notice blocks
   (home + verify), so they carry their own padding here. */
.form-ok,
.form-error { padding: 9px 11px; }
.form-error {
  background: #fbecec;
  border: 1px solid #e2b6b8;
  color: var(--danger-dark);
  font-size: var(--fs-sm);
}

/* Flat text button — used for low-emphasis actions like "resend code". No box,
   just an underlined accent link that is still a real <button>. */
.btn-link {
  background: none;
  border: none;
  padding: 2px 0;
  font-size: var(--fs-sm);
  color: var(--accent-dark);
  text-decoration: underline;
  cursor: pointer;
}
.btn-link:hover { color: var(--charcoal); }

/* -------- email verification page -------- */
.verify-page { max-width: 520px; }
.verify-card { margin-top: 32px; }
.verify-head {
  background: var(--charcoal);
  color: #fff;
  padding: 8px 18px;
}
.verify-head h1 {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.verify-lead {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.verify-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
}
.verify-resend { margin-top: 14px; }
.verify-prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 16px;
  background: #fff7e8;
  border: 1px solid #e6d09a;
  font-size: 13px;
  color: var(--ink);
}
.verify-prompt-text { flex: 1 1 auto; min-width: 0; }
.verify-code-input {
  font-family: Menlo, Consolas, monospace;
  font-size: 22px !important;
  letter-spacing: .38em;
  text-align: center;
  padding: 8px 10px !important;
  max-width: 220px;
}
.home-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.95fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 820px) {
  .home-grid { grid-template-columns: 1fr; }
}
.home-lists {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.panel-pad {
  padding: 16px 18px 18px;
}
.home-section-title {
  margin: 0 0 4px;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-2);
}
.home-section-hint {
  margin: 0 0 12px !important;
}
.prod-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prod-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 14px;
  border: 1px solid var(--line);
  background: #fff;
}
.prod-card-archived {
  background: #f7f8fa;
}
.prod-card-main { min-width: 0; flex: 1 1 auto; }
.prod-title {
  display: block;
  font-size: 14px;
  letter-spacing: .01em;
  line-height: 1.3;
}
.prod-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 5px;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.35;
}
.prod-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.prod-pill-live {
  background: #e5f2ea;
  color: #1f5a2c;
  border: 1px solid #b7d4be;
}
.prod-pill-arch {
  background: #eef0f3;
  color: #4a5560;
  border: 1px solid #cfd5dc;
}
.prod-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 52%;
}
.prod-delete-link {
  text-decoration: none;
}
.home-empty {
  margin: 0;
  padding: 18px 4px 8px;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}
.home-create-form .field { margin-bottom: 12px; }
.home-create-form .field-hint,
.home-delete-form .field-hint {
  margin: 5px 0 0;
  font-size: var(--fs-xs);
  color: var(--ink-3);
  line-height: 1.4;
}
.home-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* Archived production banner under nav */
.archive-banner {
  background: #3a4048;
  color: #f0f2f4;
  font-size: var(--fs-sm);
  line-height: 1.45;
  padding: 9px 18px;
  border-bottom: 1px solid #2a2f36;
}
.archive-banner strong { color: #fff; }
.archive-banner a {
  color: #c8d8ef;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.archive-banner a:hover { color: #fff; }

/* Stale-tab guard when another tab opened a different production */
body.prod-stale {
  overflow: hidden;
}
body.prod-stale .shell,
body.prod-stale .main,
body.prod-stale .tl-page,
body.prod-stale .admin-page,
body.prod-stale .home-page {
  pointer-events: none;
  filter: grayscale(0.15);
  opacity: 0.72;
}
.prod-mismatch {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(18, 22, 43, 0.48);
}
.prod-mismatch.hidden { display: none; }
.prod-mismatch-card {
  width: min(440px, 100%);
  background: #fff;
  border: 1px solid #c9ced6;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
  padding: 18px 18px 14px;
}
.prod-mismatch-card h2 {
  margin: 0 0 8px;
  font-size: var(--fs-md, 15px);
  font-weight: 700;
  color: #1a1f2e;
}
.prod-mismatch-body {
  margin: 0 0 14px;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: #333948;
}
.prod-mismatch-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

/* ===== shared confirm/alert dialog (replaces native browser dialogs) =====
   One centred, in-house dialog for every confirm() / alert() in the app, so
   destructive prompts and notices read like DreamSheets and not the browser.
   Shares the flat charcoal-header + offset-shadow language of .modal. */
.cc-dialog {
  position: fixed;
  inset: 0;
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(20, 22, 26, .55);
}
.cc-dialog[hidden] { display: none; }
.cc-dialog-card {
  width: min(420px, 100%);
  background: #fff;
  border: 1px solid var(--charcoal);
  box-shadow: 3px 4px 0 rgba(0, 0, 0, .3);
  animation: cc-dialog-in .12s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .cc-dialog-card { animation: none; }
}
@keyframes cc-dialog-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cc-dialog-head {
  background: var(--charcoal);
  color: #fff;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cc-dialog-head h3 {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.cc-dialog.is-danger .cc-dialog-head { background: var(--danger-dark); }
.cc-dialog-body {
  padding: 12px;
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--ink, #1a1f2e);
  white-space: pre-line;
}
.cc-dialog-foot {
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
  background: #f7f8f9;
}

/* ---- create: import checklist ---- */
.import-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.import-title {
  margin: 0 0 6px;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-2);
}
.import-lead { margin: 0 0 12px; }
.import-toolbar {
  display: flex;
  gap: 8px;
  margin: 0 0 10px;
}
.import-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  background: #fafbfc;
}
.import-item + .import-item {
  border-top: 1px solid var(--line);
}
.import-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  margin: 0;
}
.import-check:hover { background: #f3f5f7; }
.import-check input {
  margin-top: 3px;
  flex: 0 0 auto;
}
.import-check-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.import-check-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
}
.import-check-hint {
  font-size: var(--fs-xs);
  color: var(--ink-3);
  line-height: 1.35;
}
.import-count {
  flex: 0 0 auto;
  min-width: 2.2em;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  padding-top: 1px;
}
.import-check input:disabled + .import-check-body,
.import-check input:disabled ~ .import-count {
  opacity: .45;
}

.home-delete-page { max-width: 720px; }
.home-delete-panel .panel-pad { padding: 18px 20px 20px; }
.delete-warn {
  border: 1px solid #e2b4b6;
  background: #fdf4f4;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.delete-warn-title {
  margin: 0 0 8px;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--danger);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.delete-warn-list {
  margin: 0;
  padding-left: 18px;
  color: #5a2a2c;
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.delete-warn-list li { margin: 0 0 6px; }
.delete-warn-list li:last-child { margin-bottom: 0; }
.delete-summary {
  border: 1px solid var(--line);
  background: #fafbfc;
  padding: 12px 14px;
  margin-bottom: 16px;
  display: grid;
  gap: 8px;
}
.delete-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-sm);
}
.delete-name-sample {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background: #f0f1f3;
  padding: 1px 5px;
  border: 1px solid var(--line);
}
.delete-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 10px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.4;
  cursor: pointer;
}
.delete-check input { margin-top: 2px; }
.delete-actions { margin-top: 18px; }
.delete-match { color: #1f5a2c; }
.delete-mismatch { color: var(--danger); }
button.btn-danger:disabled,
button.btn-danger:disabled:hover {
  opacity: .45;
  cursor: not-allowed;
  background: transparent;
  border-color: #d9a5a7;
  color: var(--danger);
}
.nav-prod {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 8px;
}
.nav-prod a { color: inherit; text-decoration: none; opacity: .85; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; }
.nav-prod a:hover { opacity: 1; text-decoration: underline; }
.indent-marker { color: var(--ink-3); margin-right: 4px; }

.tag {
  display: inline-block;
  padding: 1px 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .05em;
  border: 1px solid rgba(0, 0, 0, .25);
  text-transform: uppercase;
}

.status-pill {
  font-size: var(--fs-caption);
  border: 1px solid var(--line-strong);
  background: #f2f3f5;
  padding: 1px 4px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-2);
  white-space: nowrap;
}

/* ------------------------- engagement (crew admin) ------------------ */

.eng-pill {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 1px 5px;
  color: #fff;
  white-space: nowrap;
}
.eng-pill.eng-contract { background: var(--eng-contract); }
.eng-pill.eng-daily    { background: var(--eng-daily); }

.btn.btn-slim { padding: 0 5px; font-size: var(--fs-caption); margin-left: 4px; }

/* The per-person engagement editor. It is a panel below the sheet rather than
   a modal because it is a table of dated rows that the coordinator amends
   against the contact sheet above it. */
.eng-panel { margin-top: 12px; }
.eng-panel .panel-head { display: flex; align-items: center; gap: 8px; }
.eng-panel table.grid-table input[type="date"] { font-variant-numeric: tabular-nums; }

.field-note {
  margin: 8px 0 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
}

/* ============================== login ===============================
   Centred squared card over a soft planning field: perspective grid +
   abstract node/link mesh. Motion is decorative; reduced-motion freezes. */

body.login-page {
  background: var(--charcoal);
  overflow-x: hidden;
}

.login-wrap {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background:
    radial-gradient(1200px 520px at 18% 42%, rgba(76, 92, 242, .16), transparent 62%),
    radial-gradient(900px 480px at 82% 58%, rgba(6, 9, 36, .55), transparent 70%),
    var(--charcoal);
  overflow: hidden;
}

/* Backdrop layers sit under the form; pointer-events none so they never steal focus. */
.login-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.login-field-grid {
  position: absolute;
  inset: -8%;
  opacity: .55;
  background-image:
    linear-gradient(to right, rgba(143, 157, 255, .07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(143, 157, 255, .07) 1px, transparent 1px);
  background-size: 40px 28px;
  transform: perspective(900px) rotateX(52deg) scale(1.35);
  transform-origin: 50% 0%;
  mask-image: radial-gradient(ellipse 70% 55% at 50% 42%, #000 20%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 42%, #000 20%, transparent 72%);
  animation: login-grid-drift 28s linear infinite;
}
.login-scan {
  position: absolute;
  left: -10%;
  right: -10%;
  top: 0;
  height: 28%;
  opacity: .9;
  background: linear-gradient(
    to bottom,
    transparent,
    rgba(76, 92, 242, .07),
    transparent
  );
  animation: login-scan 9s ease-in-out infinite;
}

/* Abstract connection mesh — planning / relationships, not a chart. */
.login-net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .9;
  /* Soft vignette so the mesh thins behind the centred card. */
  mask-image: radial-gradient(ellipse 58% 52% at 50% 48%, transparent 18%, #000 52%, #000 100%);
  -webkit-mask-image: radial-gradient(ellipse 58% 52% at 50% 48%, transparent 18%, #000 52%, #000 100%);
}

.login-net-links .login-link {
  stroke: rgba(143, 157, 255, .22);
  stroke-width: 1;
  stroke-dasharray: 6 10;
  animation: login-link-drift 18s linear infinite;
}
.login-link-a { animation-duration: 22s; stroke: rgba(143, 157, 255, .18); }
.login-link-b { animation-duration: 26s; animation-direction: reverse; stroke: rgba(76, 92, 242, .28); }
.login-link-c { animation-duration: 20s; stroke: rgba(143, 157, 255, .16); }
.login-link-d { animation-duration: 24s; animation-direction: reverse; stroke: rgba(76, 92, 242, .2); }
.login-link-e { animation-duration: 19s; stroke: rgba(143, 157, 255, .2); }
.login-link-f { animation-duration: 23s; animation-direction: reverse; }
.login-link-g { animation-duration: 21s; stroke: rgba(76, 92, 242, .24); }
.login-link-h { animation-duration: 27s; animation-direction: reverse; stroke: rgba(143, 157, 255, .18); }
.login-link-i { animation-duration: 25s; stroke: rgba(76, 92, 242, .18); }
.login-link-j { animation-duration: 29s; animation-direction: reverse; stroke: rgba(143, 157, 255, .14); }

/* Short bright dashes that travel the paths — signal hopping between nodes. */
.login-pulse-path {
  stroke: rgba(143, 157, 255, .85);
  stroke-width: 1.5;
  stroke-dasharray: 14 420;
  animation: login-signal 7.5s linear infinite;
}
.login-pulse-a { animation-duration: 8.5s; animation-delay: 0s; }
.login-pulse-b { animation-duration: 10s; animation-delay: -2.4s; stroke: rgba(76, 92, 242, .9); }
.login-pulse-c { animation-duration: 9s; animation-delay: -4.1s; stroke: rgba(199, 208, 255, .75); }
.login-pulse-d { animation-duration: 11s; animation-delay: -1.2s; stroke: rgba(76, 92, 242, .8); }

.login-node {
  fill: #8f9dff;
  opacity: .55;
  transform-box: fill-box;
  transform-origin: center;
  animation: login-node-breathe 4.8s ease-in-out infinite;
}
.login-node.n2, .login-node.n6, .login-node.n10, .login-node.n13, .login-node.n19 {
  fill: #4c5cf2;
  opacity: .75;
}
.login-node.n4, .login-node.n11 {
  fill: #c7d0ff;
  opacity: .9;
  animation-duration: 3.6s;
}
.login-node.n1  { animation-delay: 0s; }
.login-node.n2  { animation-delay: -.4s; }
.login-node.n3  { animation-delay: -.8s; }
.login-node.n4  { animation-delay: -1.1s; }
.login-node.n5  { animation-delay: -1.5s; }
.login-node.n6  { animation-delay: -1.9s; }
.login-node.n7  { animation-delay: -2.2s; }
.login-node.n8  { animation-delay: -.3s; }
.login-node.n9  { animation-delay: -.7s; }
.login-node.n10 { animation-delay: -1.3s; }
.login-node.n11 { animation-delay: -1.7s; }
.login-node.n12 { animation-delay: -2.1s; }
.login-node.n13 { animation-delay: -2.5s; }
.login-node.n14 { animation-delay: -.5s; }
.login-node.n15 { animation-delay: -1.0s; }
.login-node.n16 { animation-delay: -1.4s; }
.login-node.n17 { animation-delay: -1.8s; }
.login-node.n18 { animation-delay: -2.3s; }
.login-node.n19 { animation-delay: -2.7s; }
.login-node.n20 { animation-delay: -.6s; }
.login-node.n21 { animation-delay: -1.2s; }
.login-node.n22 { animation-delay: -2.0s; }

.login {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 360px;
  min-width: 0;
  background: #fff;
  border: 1px solid #000;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .45);
}
.login-head {
  background: var(--charcoal);
  padding: 16px 18px 14px;
  border-bottom: 3px solid var(--brand);
}
.login-logo {
  display: block;
  height: 28px;
  width: auto;
  max-width: 100%;
}
.login-head p {
  margin: 8px 0 0;
  font-size: var(--fs-xs);
  color: #9aa2b5;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.2;
}
.login-body {
  display: flex;
  flex-direction: column;
  padding: 18px;
}
.login-body .field { margin-bottom: 12px; }
.login-body .field:last-of-type { margin-bottom: 14px; }
.login-body .field label {
  margin-bottom: 4px;
}
.login-body .field input[type=email],
.login-body .field input[type=password] {
  display: block;
  width: 100%;
  height: 34px;
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  background: #fff;
  line-height: 1.2;
}
.login-body .field input:focus {
  border-color: var(--brand);
  outline: 2px solid var(--brand-tint);
  outline-offset: 0;
}
.login-err {
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid #e2b4b6;
  background: var(--conflict-bg);
  color: var(--danger);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
}
.login-submit {
  display: block;
  width: 100%;
  height: 34px;
  margin: 0;
  padding: 0 10px;
  font-size: var(--fs-sm);
  letter-spacing: .02em;
}
.login-link {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: var(--fs-sm);
  color: var(--brand);
  text-decoration: none;
}
.login-link:hover { text-decoration: underline; }
.login-notice {
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px solid var(--brand);
  background: var(--brand-tint);
  font-size: var(--fs-sm);
  line-height: 1.4;
}
.login-notice p { margin: 0; }
.login-notice-sub {
  margin-top: 4px;
  color: var(--ink-2);
  font-size: var(--fs-xs);
}
.login-body .field-hint {
  margin: 3px 0 0;
  font-size: var(--fs-xs);
  color: var(--ink-3);
}

@keyframes login-grid-drift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 40px 28px, 40px 28px; }
}
@keyframes login-scan {
  0%, 100% { transform: translateY(-30%); opacity: .35; }
  50%      { transform: translateY(220%); opacity: .7; }
}
@keyframes login-link-drift {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -160; }
}
@keyframes login-signal {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -434; }
}
@keyframes login-node-breathe {
  0%, 100% { opacity: .4; transform: scale(1); }
  50%      { opacity: .95; transform: scale(1.35); }
}

@media (max-width: 420px) {
  .login { max-width: 100%; }
  .login-body { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-field-grid,
  .login-scan,
  .login-net-links .login-link,
  .login-pulse-path,
  .login-node {
    animation: none !important;
  }
  .login-node { opacity: .7; transform: none; }
  .login-net-links .login-link { stroke-dasharray: none; }
  .login-pulse-path { opacity: 0; }
}

/* ============================= toast =============================== */

.toast-wrap { position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 100;
              display: flex; flex-direction: column; gap: 4px; align-items: center; }
.toast {
  background: var(--charcoal);
  color: #fff;
  border: 1px solid #000;
  padding: 5px 12px;
  font-size: var(--fs-sm);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .3);
  max-width: 70vw;
}
.toast.err { background: var(--danger); border-color: var(--danger-dark); }

/* ======================= live collaboration ======================== */

/* Connection state. Deliberately quiet when healthy: a steady green dot is
   background reassurance, and the label only turns loud when what is on
   screen may be out of date. */
/* Undo/redo live in the filter bar, left of the unit chips — not the nav. */
.fb-left .fb-sep {
  width: 1px;
  align-self: stretch;
  margin: 2px 10px 2px 14px;
  background: var(--line-strong, #c5CAD1);
  flex: 0 0 1px;
}
.fb-left .history-btns {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.fb-left .history-btns .btn {
  min-width: 3.4rem;
  padding: 2px 9px;
  font-size: var(--fs-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* Week jump — filter-bar control, not main-nav chrome. */
.fb-jump {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}
.fb-jump input[type="date"] {
  border: 1px solid var(--line-strong);
  background: #fff;
  padding: 2px 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink);
  height: 22px;
  font-variant-numeric: tabular-nums;
}
.live-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #8b929c;
  padding: 2px 6px;
  border: 1px solid #4a5058;
  white-space: nowrap;
  flex: 0 0 auto;
}
.live-dot i {
  width: 6px;
  height: 6px;
  background: var(--ink-3);
  display: block;
}
.live-dot[data-state="live"]       { color: #9fb8a4; }
.live-dot[data-state="live"] i     { background: #3f9950; }
.live-dot[data-state="connecting"] { color: #c6a86a; }
.live-dot[data-state="connecting"] i { background: #d19b2a; animation: live-pulse 1.1s steps(2) infinite; }
.live-dot[data-state="off"]        { color: #e0a3a5; border-color: var(--danger); }
.live-dot[data-state="off"] i      { background: var(--danger); }

/* ---- presence avatars (who's online) ---- */
.presence-strip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 4px;
}
.presence-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .02em;
  border: 2px solid var(--nav-bg, #12162b);
  flex: 0 0 auto;
  cursor: default;
  user-select: none;
}
.presence-avatar.presence-me {
  outline: 1px solid rgba(255,255,255,.35);
  outline-offset: 1px;
}
.presence-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 5px;
  font-size: 9px;
  font-weight: 700;
  color: var(--ink-3);
  background: rgba(255,255,255,.1);
  border-radius: 10px;
  flex: 0 0 auto;
}

@keyframes live-pulse { 50% { opacity: .25; } }

/* A cell someone else just changed. Brief, square, edge-marked — enough to
   catch the eye at the periphery, not enough to pull focus off the cell the
   user is actually working in. Colour is a chrome signal here, not data, so
   it stays neutral-blue rather than borrowing a team or conflict colour. */
.cell-changed {
  animation: cell-changed 1.6s ease-out;
}
@keyframes cell-changed {
  0%   { box-shadow: inset 0 0 0 2px var(--select); background-color: var(--select-bg); }
  70%  { box-shadow: inset 0 0 0 2px var(--select); background-color: var(--select-bg); }
  100% { box-shadow: inset 0 0 0 0 transparent; background-color: transparent; }
}

/* Lost-the-race banner inside the booking dialog. */
.conflict-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "head btn" "sub btn";
  gap: 2px 10px;
  align-items: center;
  background: var(--conflict-bg);
  border: 1px solid var(--conflict);
  border-left-width: 3px;
  padding: 7px 9px;
  margin-bottom: 10px;
}
.conflict-bar strong { grid-area: head; font-size: var(--fs-sm); color: var(--conflict); }
.conflict-bar span   { grid-area: sub;  font-size: var(--fs-xs); color: var(--ink-2); }
.conflict-bar button { grid-area: btn; }

.btn-small { padding: 2px 7px; font-size: var(--fs-xs); }

/* ====================== timeline views (labour / flow) ==============

   Both side-scrolling views share this. One CSS grid: a sticky label rail,
   then one narrow column per day. The rail is sticky on X and the header row
   sticky on Y, so at week 9 of a shoot you still know whose row you are on
   and what date you are looking at — which is the entire point of a view
   that is deliberately wider than the screen.

   Day columns are fixed-width here, unlike the calendar: these views are
   meant to overflow and be scrolled. Fitting 84 days to the viewport would
   make every cell unreadable.

   Type and chrome match the calendar filter bar: same caption labels, chip
   scale, and greyscale paperwork hierarchy. Hard-coded 6–8px sizes are gone.
   =================================================================== */

.tl-page {
  height: calc(100vh - var(--nav-h));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Same strip as the calendar filterbar — one control language across views. */
.tl-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 5px 10px;
  background: #e9ebee;
  border-bottom: 1px solid var(--line-strong);
  flex: 0 0 auto;
}
.tl-bar-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.tl-bar-aside {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}
.tl-bar .fb-hint {
  font-size: var(--fs-xs);
  color: var(--ink-2);
  white-space: nowrap;
}
.tl-bar select {
  border: 1px solid var(--line-strong);
  background: #fff;
  padding: 2px 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink);
  height: 22px;
  max-width: 160px;
}
.tl-bar .btn {
  text-decoration: none;
  color: inherit;
  line-height: 1.2;
}

.tl-legend {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.tl-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink-2);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tl-live i { width: 6px; height: 6px; display: block; background: var(--ink-3); }
.tl-live[data-state="live"] i { background: #2f7d3d; }
.tl-live[data-state="connecting"] i {
  background: #9a6b0f;
  animation: live-pulse 1.1s steps(2) infinite;
}
.tl-live[data-state="off"] { color: var(--danger-dark); border-color: var(--danger); }
.tl-live[data-state="off"] i { background: var(--danger); }

/* Proper key: coloured cell abbreviation + full name beside it. */
.tl-legend.tl-key {
  gap: 6px 10px;
  max-width: min(900px, 70vw);
  justify-content: flex-end;
  flex: 1 1 auto;
  padding: 3px 6px;
  background: #fff;
  border: 1px solid var(--line-strong, #c5cad1);
}
.tl-key-title {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-right: 2px;
}
.key-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 220px;
  line-height: 1.15;
}
.key-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.85em;
  padding: 2px 5px;
  border: 1px solid rgba(0, 0, 0, .28);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.key-name {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.key-hint {
  font-weight: 500;
  color: var(--ink-3);
  text-transform: none;
  letter-spacing: 0;
}

/* Legacy single-token chips (kept for any remaining .lg use). */
.tl-legend .lg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid rgba(0, 0, 0, .22);
  line-height: 1.2;
  white-space: nowrap;
}

.tl-scroll { flex: 1 1 auto; overflow: auto; background: var(--panel); }

.tl-grid {
  display: grid;
  /* --cols is set per request from the day count. */
  grid-template-columns: var(--tl-rail) repeat(var(--cols), var(--tl-day));
  width: max-content;
  min-width: 100%;
}

/* ---- header row — same charcoal family as calendar dayheads ---- */
.tl-head {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--charcoal);
  color: #fff;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
}
.tl-corner {
  position: sticky;
  left: 0;
  z-index: 30;                 /* above both the rail and the day headers */
  display: flex;
  align-items: center;
  padding: 4px 8px;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  border-right: 1px solid #000;
}
.tl-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3px 0 4px;
  line-height: 1.1;
  min-width: 0;
  min-height: 34px;
  gap: 1px;
}
.tl-day .dw {
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: .08em;
  color: #a7adb6;
  text-transform: uppercase;
}
.tl-day .dn {
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.tl-day .dm {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--today);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.tl-day.weekend { background: #1b2039; }
.tl-day.today   { box-shadow: inset 0 -3px 0 var(--today); }
.tl-day.today .dn { color: var(--today); }

.unit-flow-preview {
  /* Standalone preview chip on the Units admin page — same mark language as Flow. */
  display: inline-flex;
  min-width: 32px;
  height: 22px;
  padding: 0 6px;
  margin-right: 3px;
  vertical-align: middle;
  flex: 0 0 auto;
}
.unit-admin-table .w-code { width: 88px; }
.unit-admin-panel { overflow-x: auto; }
.unit-admin-table .code-input { width: 68px; text-transform: uppercase; font-weight: 800; }
.unit-admin-table .schedule-summary span { display: block; color: var(--ink-2); font-size: var(--fs-caption); }
.unit-admin-table .check-cell { text-align: center; }
.unit-admin-table .inactive-row { opacity: .58; }

/* ---- location/set group bands — panel-head style, not brand shout ---- */
.tl-group {
  grid-column: 1 / -1;
  min-height: 20px;
  background: #e4e7eb;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  overflow: visible;
  z-index: 14;
}
.tl-group-label {
  position: sticky;
  left: 0;
  display: flex;
  align-items: center;
  width: var(--tl-rail);
  min-height: 20px;
  padding: 0 8px;
  background: #e4e7eb;
  border-right: 1px solid var(--line-strong);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.scene-ref {
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* ---- label rail ---- */
.tl-rail {
  position: sticky;
  left: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #eef0f2;
  border-right: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
  padding: 0 8px;
  min-height: var(--tl-row);
  overflow: hidden;
}
.tl-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  color: var(--ink);
}
.tl-sub {
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: .06em;
  text-transform: uppercase;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.tl-swatch {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border: 1px solid rgba(0, 0, 0, .28);
}

/* ---- cells ---- */
.tl-cell {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-height: var(--tl-row);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .03em;
  overflow: hidden;
  min-width: 0;
}
.tl-cell.weekend { background: #f4f5f7; }
.tl-cell.today   { box-shadow: inset 1px 0 0 var(--brand), inset -1px 0 0 var(--brand); }
/* Outside someone's contract dates: hatched, so an empty day inside the
   contract (which needs filling) never looks the same as a day the person
   simply is not on the production. */
.tl-cell.off {
  background: repeating-linear-gradient(
    45deg, #f7f8f9, #f7f8f9 3px, #eceef1 3px, #eceef1 6px);
}
.tl-cell.holiday { font-style: italic; }
.tl-cell.conflict {
  box-shadow: inset 0 0 0 2px var(--conflict);
  position: relative;
}

.tl-foot {
  position: sticky;
  bottom: 0;
  z-index: 16;
  background: #e4e7ea;
  border-top: 2px solid var(--line-strong);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.tl-foot-detail.heat-0 { background: #f7f8f9; }
.tl-rail.tl-foot {
  z-index: 18;
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--ink-2);
}

/* Expandable role-breakdown toggle in the footer rail. */
.tl-foot-rail {
  display: flex;
  align-items: center;
  gap: 4px;
}
.tl-foot-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  flex: 0 0 auto;
}
.tl-foot-toggle:hover { color: var(--brand); }
.tl-foot-toggle {
  transition: transform .12s ease, color .12s ease;
}
/* Caret state is driven by the persistent body class, not a class on the button
   itself, so it stays correct after the grid is swapped by window navigation or
   a live refresh (both of which re-render the button). */
body.breakdown-open .tl-foot-toggle { color: var(--brand); transform: rotate(180deg); }

/* Per-role breakdown: collapsed by default, revealed while `body.breakdown-open`
   is set. Keying the state on <body> (which no swap ever replaces) means a fresh
   grid from Earlier/Later or an SSE refresh inherits the correct open/closed
   state with zero JS re-application. Specificity 0,2,0 beats the base
   `.tl-cell`/`.tl-rail` display, and the open rule (0,3,1) beats this. */
.tl-grid .tl-foot-detail { display: none; }
body.breakdown-open .tl-grid .tl-foot-detail { display: flex; }
.tl-rail.tl-foot-detail {
  background: #f4f5f7;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-rail.tl-foot-detail-head {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--ink-3);
}
.tl-cell.tl-foot-detail {
  background: #f7f8f9;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.tl-cell.tl-foot-detail.weekend {
  background: #f2f3f5;
}
/* Heatmap fill for occupied breakdown cells, coloured relative to the role's
   own daily min/max across the whole job (bands 1..5). Specificity 0,3,0 and
   placed AFTER the base `.tl-cell.tl-foot-detail` and its `.weekend` variant
   so the heat colour wins on weekends too. heat-0 (empty/zero) is left to the
   neutral base above so a blank day never reads as "cool" data. */
.tl-cell.tl-foot-detail.heat-1 { background: #d8e8d4; }
.tl-cell.tl-foot-detail.heat-2 { background: #ece8c8; }
.tl-cell.tl-foot-detail.heat-3 { background: #f0d8c0; }
.tl-cell.tl-foot-detail.heat-4 { background: #ecb8b0; }
.tl-cell.tl-foot-detail.heat-5 { background: #e09898; }
.tl-cell.tl-foot-detail-head {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--ink-3);
  text-align: center;
}

/* ---- location flow cells ----
   Activity, Teams and Combined all use the same mark language: a full-height
   stack of solid short labels (S1, PL1, RIG, T1…). Each day keeps its own
   cell and label. Locations are separated by a thin dark rule so rows read
   as distinct without a heavy grey gutter. */
.flow-grid {
  row-gap: 0;
  background: var(--panel);
}
/* Thin dark hairline under every location row (rail + day cells). The
   header and group bands keep their own edges. */
.flow-grid > .tl-rail,
.flow-grid > .tl-cell {
  border-bottom: 1px solid #5c636e;
}
.flow-grid > .tl-head {
  border-bottom: 1px solid #000;
}
.flow-grid > .tl-group {
  border-bottom: 1px solid #5c636e;
}

.tl-cell.flow,
.tl-cell.flow-team-cell {
  position: relative;
  justify-content: stretch;
  align-items: stretch;
  border-right-color: rgba(0, 0, 0, .10);
  overflow: hidden;
  padding: 0;
}

.flow-grid.mode-activity { --tl-row: 28px; }
.flow-grid.mode-teams { --tl-row: 28px; }
.flow-grid.mode-combined { --tl-row: 40px; }

.flow-team-cell,
.flow-activity-cell {
  padding: 0;
  overflow: hidden;
}

.flow-grid > .tl-rail {
  min-height: var(--tl-row);
}

/* Shared stack for Teams T1/T2 and Activity S1/PL1/RIG. */
.flow-mark-stack {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.flow-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  padding: 0 2px;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  border-right: 1px solid rgba(0, 0, 0, .14);
}
.flow-mark:last-child { border-right: none; }

/* Unit identity — solid unit colour, same weight as a team block.
   Fill is softened slightly in the template (tint) so S/PL sit nearer the
   phase-mark weight instead of shouting over RIG/build days. */
.flow-mark.unit-mark {
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .26);
}
/* Pre-light: lighter bottom rule only — softness lives in the fill tint. */
.flow-mark.unit-mark.kind-prelight {
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16);
  font-weight: 800;
}
.flow-mark.empty-mark {
  color: var(--ink-3);
  background: rgba(255, 255, 255, .55);
  font-weight: 700;
}

/* Combined: activity band on top, team band underneath — same mark class.
   Team band is omitted entirely when nobody is tagged (no lonely "—"). */
.combined-view {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
}
.combined-view .activity-stack {
  flex: 1 1 auto;
  min-height: 22px;
}
.combined-view.has-teams .activity-stack {
  min-height: 22px;
}
.combined-view .team-stack {
  flex: 0 0 14px;
  border-top: 1px solid rgba(0, 0, 0, .22);
}
.combined-view .team-stack .flow-mark {
  font-size: var(--fs-caption);
  letter-spacing: .02em;
}

.team-legend .team-lg {
  min-width: 26px;
  justify-content: center;
  font-weight: 700;
}

/* Phase palette. Build-up (RIG/BLD/…) carries more chroma; shoot/pre-light
   phase chips sit quieter so unit S/PL and phase marks share one weight. */
.ph-rig       { background: #9fc1ef; color: #1c3d69; }
.ph-rigswing  { background: #9bc1ed; color: #1c3f69; }
.ph-swing     { background: #b5d1ee; color: #1c4269; }
.ph-build     { background: #ecd7ac; color: #69501c; }
.ph-prelight  { background: #f2ebd9; color: #69531c; }
.ph-shoot     { background: #eedec9; color: #69471c; }
.ph-standby   { background: #e6eaef; color: #293f5c; }
.ph-maint     { background: #c3eac3; color: #1c691c; }
.ph-travel    { background: #d5c9ed; color: #351c69; }
.ph-derig     { background: #f0b2b2; color: #691c1c; }
.ph-other     { background: #f0f1f3; color: var(--ink-2); }

/* Legend chips reuse the same palette so the key is literally the thing. */
.tl-legend .lg.ph-rig,      .tl-legend .lg.ph-rigswing,
.tl-legend .lg.ph-swing,    .tl-legend .lg.ph-build,
.tl-legend .lg.ph-prelight, .tl-legend .lg.ph-shoot,
.tl-legend .lg.ph-standby,  .tl-legend .lg.ph-maint,
.tl-legend .lg.ph-travel,   .tl-legend .lg.ph-derig,
.tl-legend .lg.ph-other { border-color: rgba(0, 0, 0, .2); }

/* ---- Flow hover card -----------------------------------------------
   Dense cells only show short marks; the tip carries the full readout:
   where, which units (S1/PL2…), which teams and what they are doing. */
.flow-tip-host {
  cursor: help;
  position: relative;
}
/* Active source cell — makes it obvious which day/location the tip is for. */
.flow-tip-host.flow-tip-active {
  z-index: 6;
  outline: 2px solid var(--brand-deep);
  outline-offset: -2px;
  box-shadow:
    inset 0 0 0 1px #fff,
    0 0 0 1px var(--brand-deep);
  filter: brightness(1.06) saturate(1.05);
}
.flow-tip-host.flow-tip-active .flow-mark {
  font-weight: 800;
}
.flow-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 400;
  min-width: 220px;
  max-width: min(340px, calc(100vw - 20px));
  max-height: min(420px, calc(100vh - 20px));
  overflow: auto;
  padding: 0;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .18);
  font-size: var(--fs-sm);
  line-height: 1.3;
  pointer-events: auto;
  /* Positioned via translate so left/top stay 0 — avoids layout thrash. */
  will-change: transform;
}
.flow-tip[hidden] { display: none !important; }
.flow-tip-head {
  padding: 8px 10px 7px;
  background: var(--charcoal);
  color: #fff;
  border-bottom: 1px solid #000;
}
.flow-tip-where {
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .02em;
}
.flow-tip-where .flow-tip-muted { color: #a7adb6; font-weight: 600; }
.flow-tip-meta {
  margin-top: 3px;
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #a7adb6;
}
.flow-tip-section {
  padding: 7px 10px 8px;
  border-top: 1px solid var(--line);
}
.flow-tip-section:first-of-type { border-top: none; }
.flow-tip-section h4 {
  margin: 0 0 5px;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.flow-tip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.flow-tip-list li {
  display: grid;
  grid-template-columns: 10px auto 1fr auto;
  gap: 5px 6px;
  align-items: baseline;
  min-width: 0;
}
.flow-tip-swatch {
  width: 8px;
  height: 8px;
  margin-top: 3px;
  border: 1px solid rgba(0, 0, 0, .28);
  flex: 0 0 auto;
}
.flow-tip-code {
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.flow-tip-main {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.flow-tip-doing {
  grid-column: 2 / -1;
  font-size: var(--fs-xs);
  color: var(--ink-2);
  font-weight: 600;
}
.flow-tip-list li .flow-tip-muted {
  grid-column: 4;
  grid-row: 1;
  font-size: var(--fs-caption);
  color: var(--ink-3);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.flow-tip-marks {
  margin: 0;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.flow-tip-empty {
  margin: 0;
  color: var(--ink-3);
  font-size: var(--fs-xs);
}
.flow-tip-muted { color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .flow-tip { transition: none; }
}

.chip.on { background: var(--brand); color: #fff; border-color: var(--brand-deep); }

@media (prefers-reduced-motion: reduce) {
  .tl-scroll { scroll-behavior: auto; }
}

/* ============================ help centre =========================== */

.nav-help {
  color: #c8cdd5;
  border: 1px solid #4a5058;
  padding: 2px 7px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .07em;
  text-decoration: none;
  text-transform: uppercase;
}
.nav-help:hover, .nav-help.on { color: #fff; border-color: #7d8490; background: var(--charcoal-3); text-decoration: none; }
.nav-help.on { box-shadow: inset 0 -2px 0 var(--accent); }

.help-page { min-height: calc(100vh - var(--nav-h)); background: var(--page); }

.help-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 40px;
  padding: 34px max(24px, calc((100vw - 1320px) / 2));
  color: #fff;
  background: var(--charcoal);
  border-bottom: 4px solid var(--accent);
}
.help-kicker, .help-eyebrow {
  margin: 0 0 7px;
  color: #9ea5af;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.help-hero h1 { margin: 0; max-width: 760px; font-size: 27px; line-height: 1.12; letter-spacing: -.015em; font-weight: 600; }
.help-intro { max-width: 760px; margin: 12px 0 0; color: #c9ced6; font-size: 14px; line-height: 1.55; }
.help-status { align-self: end; margin: 0; border: 1px solid #414758; background: #191d31; }
.help-status div { display: grid; grid-template-columns: 82px 1fr; border-bottom: 1px solid #363b4c; }
.help-status div:last-child { border-bottom: none; }
.help-status dt, .help-status dd { margin: 0; padding: 7px 9px; font-size: var(--fs-xs); }
.help-status dt { color: #9198a4; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; border-right: 1px solid #363b4c; }
.help-status dd { color: #eef0f3; }

.help-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 980px);
  justify-content: center;
  gap: 28px;
  padding: 24px;
  align-items: start;
}
.help-toc { position: sticky; top: calc(var(--nav-h) + 18px); }
.help-toc-inner { background: var(--panel); border: 1px solid var(--line); }
.help-toc-title { margin: 0; padding: 8px 11px; background: #e9ebee; border-bottom: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.help-toc ol { list-style: none; padding: 5px 0; margin: 0; counter-reset: help-toc; }
.help-toc li { counter-increment: help-toc; }
.help-toc a { display: grid; grid-template-columns: 24px 1fr; gap: 3px; padding: 5px 10px; color: var(--ink-2); font-size: var(--fs-sm); text-decoration: none; border-left: 3px solid transparent; }
.help-toc a::before { content: counter(help-toc, decimal-leading-zero); color: var(--ink-2); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }
.help-toc a:hover { color: var(--ink); background: #f2f4f6; border-left-color: var(--accent); }
.help-toc-note { padding: 10px; border-top: 1px solid var(--line); color: var(--ink-2); background: #f7f8f9; font-size: var(--fs-xs); line-height: 1.5; }
.help-toc-note strong { display: block; color: var(--ink); margin-bottom: 2px; }

.help-content { min-width: 0; }
.help-section { scroll-margin-top: calc(var(--nav-h) + 14px); display: grid; grid-template-columns: 45px minmax(0, 1fr); background: var(--panel); border: 1px solid var(--line); margin: 0 0 16px; }
.help-section-number { padding: 16px 8px; background: #e9ebee; border-right: 1px solid var(--line); color: var(--ink-2); font-size: var(--fs-xs); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }
.help-section-body { min-width: 0; padding: 18px 22px 22px; }
.help-section-body > :first-child { margin-top: 0; }
.help-section h2 { margin: 0 0 8px; color: var(--ink); font-size: 20px; line-height: 1.2; font-weight: 600; }
.help-section h3 { margin: 20px 0 6px; color: var(--ink); font-size: 12px; line-height: 1.3; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.help-section p, .help-section li { color: var(--ink-2); font-size: 13px; line-height: 1.58; }
.help-section p { margin: 0 0 10px; }
.help-section ul, .help-section ol { margin: 6px 0 12px; padding-left: 22px; }
.help-section li { margin: 3px 0; }
.help-section a { color: var(--accent-dark); }
.help-eyebrow { color: var(--accent-dark); }

.help-reading-path { list-style: none; padding: 0 !important; margin: 16px 0 !important; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.help-reading-path li { display: grid; grid-template-columns: 30px 1fr; gap: 8px; margin: 0; padding: 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fafbfc; }
.help-reading-path li > span { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: #fff; background: var(--charcoal); font-size: var(--fs-xs); font-weight: 700; }
.help-reading-path strong { font-size: var(--fs-sm); }
.help-reading-path p { margin: 2px 0 0; font-size: var(--fs-xs); line-height: 1.4; }

.help-callout { margin: 16px 0 4px; padding: 11px 13px; border-left: 4px solid var(--accent); background: #edf4ff; }
.help-callout strong { display: block; margin-bottom: 3px; font-size: var(--fs-sm); }
.help-callout p, .help-callout ol { margin-bottom: 0; }
.help-callout.neutral { border-left-color: var(--ink-3); background: #f1f2f4; }
.help-callout.warning { border-left-color: #ad781b; background: #fff7e7; }

.help-map { display: grid; grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); align-items: stretch; margin: 15px 0; }
.help-map-source, .help-map-views { display: flex; flex-direction: column; padding: 14px; border: 1px solid var(--line-strong); background: #f8f9fa; }
.help-map-source { border-top: 3px solid var(--accent); }
.help-map-views { border-top: 3px solid var(--ink-3); }
.help-map span { color: var(--ink-3); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.help-map strong { margin: 3px 0; font-size: 14px; }
.help-map small { color: var(--ink-2); line-height: 1.4; }
.help-map-arrow { display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 20px; }

.help-definition-grid, .help-question-grid, .help-planned-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin: 14px 0; }
.help-definition-grid.help-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.help-definition-grid article, .help-question-grid article, .help-planned-grid article { padding: 11px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fafbfc; }
.help-definition-grid h3, .help-question-grid h3, .help-planned-grid h3 { margin: 0 0 4px; }
.help-definition-grid p, .help-question-grid p, .help-planned-grid p { margin: 0; font-size: var(--fs-sm); }
.help-question-grid article > span, .help-planned-grid article > span { display: block; margin-bottom: 4px; color: var(--accent-dark); font-size: var(--fs-caption); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.help-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--line); }
.help-table { width: 100%; min-width: 620px; border-collapse: collapse; background: #fff; }
.help-table caption { padding: 7px 9px; color: var(--ink-2); background: #f6f7f8; border-bottom: 1px solid var(--line); font-size: var(--fs-xs); font-weight: 600; text-align: left; }
.help-table th, .help-table td { padding: 7px 9px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; font-size: var(--fs-sm); line-height: 1.4; }
.help-table th { background: #e9ebee; color: var(--ink-2); font-size: var(--fs-caption); letter-spacing: .08em; text-transform: uppercase; }
.help-table tr:last-child td { border-bottom: none; }
.help-table th:last-child, .help-table td:last-child { border-right: none; }
.help-table td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }

.help-shortcuts { border-top: 1px solid var(--line); margin: 10px 0; }
.help-shortcuts > div { display: grid; grid-template-columns: 170px 1fr; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); }
.help-page kbd { display: inline-block; min-width: 22px; padding: 1px 5px; color: var(--ink); background: #f4f5f6; border: 1px solid var(--line-strong); border-bottom-width: 2px; font: 600 var(--fs-xs)/1.4 inherit; text-align: center; }
.help-shortcuts span { color: var(--ink-2); font-size: var(--fs-sm); }

.help-admin-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin: 14px 0; }
.help-admin-list article { display: grid; grid-template-columns: 95px 1fr; gap: 10px; padding: 10px 11px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.help-admin-list article > a { font-size: var(--fs-sm); font-weight: 700; }
.help-admin-list p { margin: 0; font-size: var(--fs-xs); line-height: 1.45; }

.help-troubleshooting { border-top: 1px solid var(--line); }
.help-troubleshooting details { border: 1px solid var(--line); border-top: none; background: #fafbfc; }
.help-troubleshooting summary { padding: 8px 10px; color: var(--ink); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.help-troubleshooting details[open] summary { border-bottom: 1px solid var(--line); background: #f0f2f4; }
.help-troubleshooting p { margin: 0; padding: 9px 12px; }

.help-footer { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line-strong); }
.help-footer strong { font-size: var(--fs-sm); }
.help-footer .btn { display: inline-block; margin-top: 4px; color: var(--ink); text-decoration: none; }

@media (max-width: 1100px) {
  .help-body .nav { height: auto; min-height: var(--nav-h); flex-wrap: wrap; }
  .help-body .nav-links { order: 3; width: 100%; height: var(--nav-h); overflow-x: auto; border-top: 1px solid #000; }
  .help-body .nav-links a { flex: 0 0 auto; }
  .help-body .nav-right { margin-left: auto; min-height: var(--nav-h); }
  .help-body .help-toc { top: 94px; }
  .help-hero { grid-template-columns: 1fr; gap: 20px; }
  .help-status { max-width: 500px; }
  .help-layout { grid-template-columns: 210px minmax(0, 1fr); gap: 16px; padding: 16px; }
}

@media (max-width: 820px) {
  .help-body .nav-brand { flex: 1 1 auto; }
  .help-body .nav-rule, .help-body .nav-title, .help-body .nav-version,
  .help-body .nav-user { display: none; }
  .help-hero { padding: 24px 16px; }
  .help-hero h1 { font-size: 22px; }
  .help-layout { display: block; padding: 10px; }
  .help-toc { position: static; margin-bottom: 10px; }
  .help-toc ol { columns: 2; }
  .help-section { grid-template-columns: 34px minmax(0, 1fr); }
  .help-section-body { padding: 15px 14px 18px; }
  .help-reading-path, .help-definition-grid, .help-definition-grid.help-three,
  .help-question-grid, .help-planned-grid, .help-admin-list { grid-template-columns: 1fr; }
  .help-map { grid-template-columns: 1fr; gap: 0; }
  .help-map-arrow { height: 30px; transform: rotate(90deg); }
  .help-shortcuts > div { grid-template-columns: 130px 1fr; }
  .help-admin-list article { grid-template-columns: 80px 1fr; }
}

@media (max-width: 520px) {
  .help-status div { grid-template-columns: 72px 1fr; }
  .help-toc ol { columns: 1; }
  .help-section-number { padding-left: 4px; padding-right: 4px; }
  .help-shortcuts > div { grid-template-columns: 1fr; gap: 3px; }
}

/* ============================ utilities ============================ */

.hidden { display: none !important; }
.collapsed-team .crew-list { display: none; }
.empty-state { padding: 30px; text-align: center; color: var(--ink-3); font-size: var(--fs-sm); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  /* The flash is the only signal that a cell changed under the user, so it
     must survive reduced-motion — as a static hold rather than a fade. */
  .cell-changed { box-shadow: inset 0 0 0 2px var(--select); background-color: var(--select-bg); }
}

/* ==========================================================================
   FINANCIAL VIEW
   Dense costing paperwork. Colour carries data only: role/team/flag hues in
   the charts, amber for the overtime portion of a bar, brand blue for the
   cumulative line. Everything else is greyscale rule work.
   ========================================================================== */

.fin-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.fin-actions { display: flex; gap: 6px; }

/* ---- filter bar ---- */
.fin-filters {
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 12px 14px 10px;
  margin-bottom: 14px;
}
.fin-filters.is-dirty {
  border-color: var(--charcoal);
  /* Dirty is signalled on Apply + per-row rails — not a full-panel brand bar. */
}
.fin-applied {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 0 10px;
  margin: 0 0 10px;
  border-bottom: 1px solid var(--line);
}
.fin-applied-label {
  flex: 0 0 auto;
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  font-weight: 700;
}
.fin-summary-applied { margin-left: 0; gap: 10px; }
.fin-summary-applied .fin-sumitem {
  background: #f0f2f4;
  border: 1px solid var(--line);
  padding: 2px 7px;
  color: var(--ink);
}
.fin-filter-grid {
  display: grid;
  grid-template-columns: minmax(280px, 2.2fr) repeat(3, minmax(150px, 1fr));
  gap: 14px;
  align-items: end;
}
.fin-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fin-field > label {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  font-weight: 700;
}
.fin-field select,
.fin-field input[type="date"] {
  height: 28px;
  border: 1px solid var(--line-strong);
  background: #fff;
  font-size: var(--fs-sm);
  padding: 0 6px;
  font-variant-numeric: tabular-nums;
}
.fin-check {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  font-size: var(--fs-sm);
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  cursor: pointer;
}
.fin-check input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--brand);
}
.fin-field > .fin-check + .fin-check {
  margin-top: 2px;
}
.fin-dates { display: flex; align-items: center; gap: 6px; }
.fin-dates input { flex: 1 1 0; min-width: 0; }
.fin-dash { font-size: var(--fs-caption); color: var(--ink-3); }

/* Dual-handle range. Both inputs are stacked transparently over one track;
   pointer-events are re-enabled on the thumbs only, so each handle stays
   grabbable even where the two inputs overlap. */
.fin-slider { position: relative; height: 22px; margin: 2px 2px 4px; }
.fin-slider-track {
  position: absolute; top: 9px; left: 0; right: 0; height: 4px;
  background: #dfe2e6; border: 1px solid var(--line);
}
.fin-slider-fill { position: absolute; top: 0; bottom: 0; background: var(--brand); }
.fin-slider input[type="range"] {
  position: absolute; top: 0; left: 0; width: 100%; height: 22px;
  margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.fin-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 18px; background: var(--charcoal);
  border: 1px solid #000; cursor: ew-resize; pointer-events: auto;
}
.fin-slider input[type="range"]::-moz-range-thumb {
  width: 12px; height: 18px; background: var(--charcoal);
  border: 1px solid #000; border-radius: 0; cursor: ew-resize; pointer-events: auto;
}
.fin-slider input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--select); }
.fin-slider input[type="range"]::-moz-range-track { background: none; }

/* ---- chip filters ----
   Shared 4-col grid on every row: label | All | chips | count.
   All control always occupies its cell (never hides) so chips do not jump.
   Clicking All clears that row back to the whole set. */
.fin-chiprows {
  margin-top: 10px;
  border-top: 1px solid var(--line);
  padding-top: 2px;
}
.fin-chiprow {
  display: grid;
  /* Label col wide enough for "Day flags"; left pad reserved for the rail. */
  grid-template-columns: 78px 52px minmax(0, 1fr) 48px;
  column-gap: 10px;
  row-gap: 6px;
  align-items: start;
  padding: 8px 0 8px 10px;
  border-bottom: 1px solid var(--line);
  /* Per-row active rail only — transparent when all-on so columns never shift. */
  border-left: 3px solid transparent;
}
.fin-chiprow:last-child { border-bottom: 0; }
.fin-chiprow.is-filtered {
  border-left-color: var(--brand);
}

.fin-chiplabel {
  grid-column: 1;
  padding-top: 6px;
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Always-visible reset control. Pressed = row is in all/any mode. */
.fin-allbtn {
  grid-column: 2;
  box-sizing: border-box;
  width: 52px;
  height: 24px;
  margin: 0;
  padding: 0 4px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink-2);
  font: inherit;
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1;
}
.fin-allbtn:hover {
  background: #eef0f3;
  border-color: var(--ink-3);
  color: var(--ink);
}
.fin-allbtn:focus-visible {
  outline: 2px solid var(--select);
  outline-offset: 1px;
}
.fin-chiprow.is-all .fin-allbtn {
  background: var(--charcoal);
  border-color: #000;
  color: #fff;
  cursor: default;
  opacity: 1;
}
.fin-chiprow.is-all .fin-allbtn:disabled {
  opacity: 1;
  color: #fff;
}
.fin-chiprow.is-filtered .fin-allbtn {
  background: #fff;
  border-color: var(--brand);
  color: var(--brand-deep);
}
.fin-chiprow.is-filtered .fin-allbtn:hover {
  background: var(--brand-tint);
  border-color: var(--brand-deep);
  color: var(--brand-deep);
}

.fin-chips {
  grid-column: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  align-content: flex-start;
  min-width: 0;
  min-height: 24px;
}

.fin-chipcount {
  grid-column: 4;
  padding-top: 6px;
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1.2;
}
.fin-chiprow.is-all .fin-chipcount { color: var(--ink-2); }
.fin-chiprow.is-filtered .fin-chipcount { color: var(--brand-deep); }

.fin-chip {
  position: relative;
  cursor: pointer;
  user-select: none;
}
.fin-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.fin-chip span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 8px 0 6px;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid var(--line-strong);
  background: #f4f5f6;
  color: var(--ink-2);
  border-left: 4px solid var(--chip, #8a9099);
  white-space: nowrap;
  line-height: 1;
}
/* Mark slot — same size on every chip so rows stay even. */
.fin-chip span::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border: 1px solid var(--line-strong);
  background: #fff;
}

/* ---- ALL: every chip reads as included ---- */
.fin-chiprow.is-all .fin-chip span {
  background: color-mix(in srgb, var(--chip, #8a9099) 16%, #fff);
  color: var(--ink);
  border-color: color-mix(in srgb, var(--chip, #8a9099) 40%, var(--line-strong));
  border-left-color: var(--chip, #8a9099);
}
.fin-chiprow.is-all .fin-chip span::before {
  border-color: color-mix(in srgb, var(--chip, #8a9099) 55%, #000);
  background: var(--chip, #8a9099);
  box-shadow: inset 0 0 0 1px #fff;
}
.fin-chiprow.is-all .fin-chip:hover span {
  background: color-mix(in srgb, var(--chip, #8a9099) 26%, #fff);
}

/* ---- FILTERED: OFF ghosted; ON solid ---- */
.fin-chiprow.is-filtered .fin-chip:not(:has(input:checked)) span {
  background: #f3f4f6;
  color: #9aa0a8;
  border-color: #d9dce1;
  border-left-color: #c9ced6;
}
.fin-chiprow.is-filtered .fin-chip:not(:has(input:checked)) span::before {
  background: transparent;
  border-color: #c9ced6;
}
.fin-chiprow.is-filtered .fin-chip:not(:has(input:checked)):hover span {
  color: var(--ink-2);
  background: #e9ebef;
  border-color: var(--line-strong);
}

.fin-chiprow.is-filtered .fin-chip input:checked + span,
.fin-chip input:checked + span {
  background: var(--charcoal);
  color: #fff;
  border-color: #000;
  border-left-color: var(--chip, var(--brand));
}
.fin-chiprow.is-filtered .fin-chip input:checked + span::before,
.fin-chip input:checked + span::before {
  background: var(--chip, var(--brand));
  border-color: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
}

/* Draft: keep ON solid; brand edge only — no outline-offset jump. */
.fin-filters.is-dirty .fin-chiprow.is-filtered .fin-chip input:checked + span {
  background: var(--charcoal);
  color: #fff;
  border-color: var(--brand);
  border-left-color: var(--chip, var(--brand));
  box-shadow: inset 0 0 0 1px var(--brand);
}

.fin-chip input:focus-visible + span {
  outline: 2px solid var(--select);
  outline-offset: 1px;
}
.fin-allbtn:focus-visible {
  outline: 2px solid var(--select);
  outline-offset: 1px;
}

@media (max-width: 720px) {
  .fin-chiprow {
    grid-template-columns: 70px 48px minmax(0, 1fr) 44px;
    column-gap: 8px;
    padding-left: 10px;
  }
  .fin-allbtn { width: 48px; }
}

.fin-filter-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-top: 10px; margin-top: 9px; border-top: 1px solid var(--line);
}
.fin-filters.is-dirty #fin-apply {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.fin-filters:not(.is-dirty) #fin-apply {
  opacity: 0.55;
  cursor: default;
}
.fin-dirty-note {
  font-size: var(--fs-caption);
  color: var(--ink);
  font-weight: 600;
}
.fin-summary { display: flex; flex-wrap: wrap; gap: 12px; margin-left: 6px; }
.fin-sumitem { font-size: var(--fs-caption); color: var(--ink); font-variant-numeric: tabular-nums; }
.fin-sumitem i {
  font-style: normal; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-3); margin-right: 5px;
}

/* ---- KPI strip ---- */
.fin-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-bottom: 14px;
}
.fin-kpi {
  background: var(--panel);
  padding: 10px 12px 11px;
  border-left: 3px solid var(--brand);
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.fin-kpi-flag { border-left-color: var(--flag-ot); }
.fin-kpi-label {
  font-size: var(--fs-caption); text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--ink-3); font-weight: 700;
}
.fin-kpi-value {
  font-size: 21px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fin-kpi-sub { font-size: var(--fs-caption); color: var(--ink-2); }

/* ---- weekly chart ---- */
.fin-chart { position: relative; padding: 10px 52px 26px 4px; }
.fin-chart svg { display: block; width: 100%; height: 300px; }
.fin-grid { stroke: #e6e8ea; stroke-width: 1; vector-effect: non-scaling-stroke; }
.fin-axis { stroke: var(--ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fin-bar-base { fill: var(--charcoal); }
.fin-bar-flag { fill: var(--flag-ot); }
.fin-bar:hover .fin-bar-base { fill: var(--charcoal-3); }
.fin-bar.peak .fin-bar-base { fill: #2c3557; }
.fin-burn { fill: none; stroke: var(--brand); stroke-width: 2; vector-effect: non-scaling-stroke; }
.fin-burn-area { fill: var(--brand); opacity: 0.07; }
.fin-burn-dot { fill: var(--brand); }

/* Axis type lives outside the stretched SVG so it never distorts. */
.fin-yaxis { position: absolute; top: 10px; bottom: 26px; width: 46px; }
.fin-yaxis-left { left: -44px; }
.fin-yaxis span {
  position: absolute; right: 0; transform: translateY(-50%);
  font-size: var(--fs-caption); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.fin-xaxis { position: relative; height: 18px; margin-top: 2px; }
.fin-xaxis span {
  position: absolute; transform: translateX(-50%);
  font-size: var(--fs-caption); color: var(--ink-3);
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.fin-legend {
  display: flex; gap: 18px; flex-wrap: wrap;
  padding: 8px 12px 10px; border-top: 1px solid var(--line);
  font-size: var(--fs-caption); color: var(--ink-2);
}
.fin-legend .sw { display: inline-block; width: 10px; height: 8px; margin-right: 6px; }
.sw-base { background: var(--charcoal); }
.sw-flag { background: var(--flag-ot); }
.sw-burn { background: var(--brand); }

/* ---- share charts ---- */
.fin-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.fin-cols .panel { margin: 0; }
.fin-share-body { padding: 8px 12px 12px; display: flex; flex-direction: column; gap: 5px; }
.fin-share-row {
  display: grid;
  grid-template-columns: 84px 1fr 34px 88px;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
}
.fin-share-label {
  font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fin-share-track { background: #eef0f2; height: 13px; border: 1px solid var(--line); }
.fin-share-bar { display: block; height: 100%; min-width: 1px; }
.fin-share-pct { text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: var(--fs-caption); }
.fin-share-value { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ---- tables ---- */
.fin-table td.num, .fin-table th.num { font-variant-numeric: tabular-nums; }
.fin-delta .up { color: var(--danger); }
.fin-delta .down { color: var(--eng-contract); }
.fin-foot {
  margin: 0; padding: 8px 12px 10px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-caption); color: var(--ink-3);
}
.panel-note { font-weight: 400; color: var(--ink-3); text-transform: none; letter-spacing: 0; margin-left: 10px; }
.fin-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 16px; }

@media (max-width: 1200px) {
  .fin-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fin-filter-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .fin-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-filter-grid { grid-template-columns: 1fr; }
  .fin-head { flex-direction: column; align-items: stretch; }
  .fin-actions { flex-wrap: wrap; }
  .fin-chiprow { flex-direction: column; align-items: stretch; gap: 6px; }
  .fin-yaxis-left { left: 0; background: linear-gradient(90deg, var(--panel) 70%, transparent); }
}

/* Reset is a secondary action and must not compete with Apply. */
.btn-quiet {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink-2);
}
.btn-quiet:hover { background: #eceef0; color: var(--ink); }

/* Right-hand cumulative axis on the weekly chart. */
.fin-yaxis-right { right: -46px; left: auto; }
.fin-yaxis-right span { right: auto; left: 0; color: var(--brand); }
@media (max-width: 760px) {
  .fin-yaxis-right { right: 0; background: linear-gradient(270deg, var(--panel) 70%, transparent); }
  .fin-yaxis-right span { left: auto; right: 0; }
}

/* ================================ admin portal ================================ */
.admin-page { max-width: 1250px; }
.admin-topbar { margin-bottom: 14px; }
.admin-badge {
  display: inline-block; padding: 2px 8px; font-size: var(--fs-xs); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; background: var(--charcoal); color: #fff;
}
.admin-h2 {
  margin: 0 0 10px; font-size: var(--fs-sm); font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2);
}

/* entry banner on home */
.admin-entry {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 16px;
  background: var(--charcoal); color: #fff; font-size: 13px;
}
.admin-entry-text { flex: 1 1 auto; min-width: 0; }
.admin-entry strong { letter-spacing: .04em; }

/* stat tiles */
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 820px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
.stat-tile {
  background: var(--panel); border: 1px solid var(--line); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.stat-num { font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--ink); }
.stat-label { font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2); }
.stat-sub { font-size: var(--fs-xs); color: var(--ink-3); }

/* sparkline bar charts */
.admin-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
@media (max-width: 820px) { .admin-charts { grid-template-columns: 1fr; } }
.chart-panel .panel-pad { padding: 12px 14px 14px; }
.chart-empty { font-size: var(--fs-sm); color: var(--ink-3); margin: 8px 0 4px; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 92px; margin-top: 6px; }
.bar-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; }
.bar { width: 100%; background: var(--brand); min-height: 2px; transition: none; }
.bar-alt { background: #2fa46b; }
.bar-val { font-size: 9px; color: var(--ink-3); margin-top: 2px; height: 11px; }

/* tables */
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.admin-table th {
  text-align: left; padding: 7px 10px; background: #f4f5f7; border-bottom: 1px solid var(--line-strong);
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); white-space: nowrap;
}
.admin-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table tr:hover td { background: #fafbfc; }
.admin-table .row-blocked td { background: #fdf4f4; }
.admin-table .row-blocked:hover td { background: #fbeeee; }
.cell-email { color: var(--ink-2); }

.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.dot-ok { background: #2fa46b; }
.dot-block { background: var(--danger); }

.tag-admin { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.tag-ok { background: #eaf6ef; color: #1f6b3d; border-color: #b7d9c3; }
.tag-warn { background: #fbf0e6; color: #8a5a1e; border-color: #e6cba3; }

/* production chips */
.prod-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.prod-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 6px;
  background: #eef0fb; border: 1px solid #c9cff5; font-size: var(--fs-xs); max-width: 220px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prod-chip-arch { background: #f1f1f3; border-color: var(--line-strong); color: var(--ink-3); }
.chip-role { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }

/* activity feed */
.admin-feed td { font-size: var(--fs-sm); }
.feed-when { white-space: nowrap; color: var(--ink-3); width: 1%; }
.feed-kind { white-space: nowrap; width: 1%; }
.feed-actor { white-space: nowrap; color: var(--ink-2); }
.feed-email { white-space: nowrap; color: var(--ink-3); font-size: var(--fs-xs); }
.feed-ip { white-space: nowrap; color: var(--ink-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.feed-ua { white-space: nowrap; color: var(--ink-3); font-size: var(--fs-xs); }
.feed-sum { color: var(--ink-2); }
.kind {
  display: inline-block; padding: 1px 6px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .04em; border: 1px solid var(--line-strong); background: #f2f3f5; color: var(--ink-2);
}
.kind-login { background: #eef0fb; border-color: #c9cff5; color: #37418f; }
.kind-login_failed { background: #fdf0f0; border-color: #e6b9bb; color: var(--danger-dark); }
.kind-production_created { background: #eaf6ef; border-color: #b7d9c3; color: #1f6b3d; }
.kind-user_blocked, .kind-user_unblocked { background: #fbf0e6; border-color: #e6cba3; color: #8a5a1e; }
.kind-admin_login { background: var(--charcoal); border-color: var(--charcoal); color: #fff; }

/* user detail */
.admin-detail-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; margin-bottom: 16px; align-items: start; }
@media (max-width: 820px) { .admin-detail-grid { grid-template-columns: 1fr; } }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; font-size: var(--fs-sm); }
.kv dt { color: var(--ink-3); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: .05em; padding-top: 2px; }
.kv dd { margin: 0; }
.admin-actions { border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.admin-actions form { display: inline; }
.admin-prod-list { list-style: none; margin: 0; padding: 0; }
.admin-prod-list li { padding: 5px 0; border-bottom: 1px solid var(--line); display: flex; gap: 8px; align-items: center; }
.admin-prod-list li:last-child { border-bottom: none; }
.verify-head-admin { background: var(--danger-dark); }

/* admin sub-nav */
.admin-nav { display: flex; gap: 4px; margin: 4px 0 8px; flex-wrap: wrap; }
.admin-nav a {
  padding: 4px 12px; font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
  color: var(--ink-2); border: 1px solid var(--line); background: #fff;
}
.admin-nav a:hover { background: #eef0f3; }
.admin-nav a.on { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }

/* download forms */
.dl-form { max-width: 460px; }
.dl-inline { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.dl-inline .field { margin-bottom: 0; }
.dl-decrypt { margin-top: 10px; }
.dl-decrypt code {
  display: inline-block; background: #f4f5f7; border: 1px solid var(--line);
  padding: 3px 6px; font-size: 11px; word-break: break-all; margin-top: 3px;
}
.dl-row { display: flex; gap: 6px; align-items: center; }
.pp-inline { width: 150px; padding: 3px 7px !important; }
.admin-members th, .admin-members td { padding: 6px 8px; }

/* invite block on production detail */
.invite-block { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.invite-form { max-width: 360px; }
.invite-form .field select { width: 100%; }

/* per-member role change */
.role-form { display: flex; gap: 6px; align-items: center; }
.role-form select { padding: 2px 6px; font-size: var(--fs-sm); max-width: 190px; }

/* simplified home for non-admins: no create column, single-column list */
.home-grid-simple { grid-template-columns: 1fr !important; }
.home-grid-simple .home-lists { max-width: 720px; }

/* admin create-production form */
.admin-create-row { display: flex; gap: 14px; flex-wrap: wrap; }
.admin-create-row .field { flex: 1 1 200px; margin-bottom: 8px; }
.admin-create-row select, .admin-create-row input { width: 100%; }
.import-tick-row { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 0; }
.import-tick { font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
/* danger zone */
.danger-zone { border: 1px solid #e2b6b8; background: #fdf6f6; padding: 8px 12px; }
.danger-zone summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--danger-dark); }
.danger-zone[open] summary { margin-bottom: 4px; }

/* day-flag Value column: currency/multiplier prefix on the input */
.val-wrap { display: inline-flex; align-items: center; gap: 3px; justify-content: flex-end; }
.val-prefix { color: var(--ink-2, #6a7078); font-size: var(--fs-sm); min-width: 8px; text-align: right; }
.val-wrap.val-none .val-prefix { min-width: 0; }

/* ========================================================================
   DELIVERY SCHEDULE — traditional monthly calendar grid.
   Flat, square, dense. Same design language as the rest of the app:
   greyscale chrome, colour reserved for data (location tags, unit marks).
   ======================================================================== */

.del-toolbar { justify-content: space-between; }
.del-month-label {
  font-size: 15px;
  font-weight: 700;
  min-width: 160px;
  text-align: center;
  letter-spacing: .01em;
}

.del-grid-wrap {
  padding: 0 12px 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Day-of-week header strip — dark like the week-title bands on the main calendar */
.del-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--charcoal);
  color: #fff;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
  flex: 0 0 auto;
}
.del-dow > div {
  padding: 5px 6px;
  border-right: 1px solid var(--charcoal-2);
}
.del-dow > div:last-child { border-right: 0; }

#del-grid {
  border: 1px solid var(--line-strong);
  border-top: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: auto;
}

.del-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  flex: 1;
  min-height: 0;
}

/* One day cell */
.del-day {
  min-height: 92px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 3px 4px 2px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--panel);
}
.del-day:last-child { border-right: 0; }
.del-week:last-child .del-day { border-bottom: 0; }

/* Weekend columns (Sat = 6th, Sun = 7th) — slightly darker */
.del-day:nth-child(6),
.del-day:nth-child(7) {
  background: #eceef1;
}

/* Out-of-month days (spillover from prev/next month) */
.del-day.out {
  background: #f7f8fa;
  color: var(--ink-3);
}
.del-day.out .del-day-num { color: var(--ink-3); }

/* Today */
.del-day.today { box-shadow: inset 0 0 0 2px var(--brand); }
.del-day.today .del-day-num {
  background: var(--brand);
  color: #fff;
}

/* Drag-and-drop highlight */
.del-day.drag-over {
  background: var(--brand-tint) !important;
  box-shadow: inset 0 0 0 2px var(--brand);
}

.del-day-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-height: 16px;
}
.del-day-num {
  font-size: var(--fs-sm);
  font-weight: 700;
  min-width: 18px;
  text-align: center;
  padding: 0 3px;
  line-height: 16px;
}

/* Unit shoot/prelight bars — two-tone: unit colour for code, location colour for name */
.del-day-marks {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding-bottom: 3px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--line);
}
.del-mark {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  line-height: 14px;
}
.del-mark-code {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .03em;
  padding: 1px 5px;
  white-space: nowrap;
}
.del-mark-loc {
  font-size: var(--fs-xs);
  font-weight: 500;
  padding: 1px 5px;
  white-space: nowrap;
  opacity: .92;
}

/* Delivery cards inside a day */
.del-cards {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.del-card {
  border-left: 3px solid var(--line-strong);
  background: var(--page);
  padding: 3px 5px 3px 6px;
  cursor: grab;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 5px;
  transition: background .1s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
.del-card:hover { background: var(--brand-tint); }
.del-card.dragging { opacity: .4; cursor: grabbing; }
.del-card-time {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.del-card-title {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.25;
  word-break: break-word;
}
.del-card-loc {
  font-size: var(--fs-xs);
  padding: 0px 4px;
  font-weight: 600;
  line-height: 14px;
  white-space: nowrap;
}
.del-card-note {
  font-size: var(--fs-xs);
  color: var(--ink-2);
  line-height: 1.2;
  word-break: break-word;
  flex-basis: 100%;
}

/* Add button — visible at all times in in-month day cells */
.del-add {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  font: inherit;
  padding: 1px 4px;
  line-height: 14px;
  opacity: .5;
  transition: opacity .1s;
}
.del-day:hover .del-add { opacity: .8; }
.del-add:hover { opacity: 1; color: var(--brand); }
.del-add-plus { font-size: 13px; font-weight: 700; line-height: 1; }
.del-add-text { font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

/* Delivery page: make .main fill the viewport height so the month grid
   stretches to fill without internal scroll on the main element. */
.del-toolbar + .del-grid-wrap { flex: 1; }

/* On the delivery page, .main needs to be a flex column so the grid can
   stretch to fill the available height. The toolbar stays fixed at top. */
.delivery-body .main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- delivery modal form ---- */
.del-form { display: flex; flex-direction: column; gap: 10px; }
.del-form label {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  color: var(--ink-3);
  display: block;
  margin-bottom: 3px;
}
.del-form input[type=text],
.del-form textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  padding: 5px 7px;
  font-size: var(--fs-base);
  background: var(--panel);
}
.del-form input[type=text]:focus,
.del-form textarea:focus {
  border-color: var(--brand);
  outline: 0;
}
.del-form textarea { resize: vertical; min-height: 60px; }

/* Location autocomplete dropdown (reuses loc-suggest patterns) */
/* Location custom dropdown — coloured chips grouped by parent,
   same visual language as the calendar's location tags */
.del-loc-dd { position: relative; }
.del-loc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  border: 1px solid var(--line-strong);
  padding: 4px 8px;
  background: var(--panel);
  cursor: pointer;
  font: inherit;
  text-align: left;
  min-height: 30px;
}
.del-loc-trigger:focus { border-color: var(--brand); outline: 0; }
.del-loc-trigger-label { flex: 1; min-width: 0; overflow: hidden; }
.del-loc-caret { color: var(--ink-3); font-size: 11px; flex: 0 0 auto; }
.del-loc-none { color: var(--ink-3); font-size: var(--fs-sm); }

/* The coloured chip — same style as .loc-tag on the calendar */
.del-loc-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .03em;
  border: 1px solid rgba(0, 0, 0, .25);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The dropdown panel */
.del-loc-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  max-height: 260px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
}
.del-loc-opt {
  padding: 5px 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.del-loc-opt:hover { background: var(--brand-tint); }
.del-loc-none-opt:hover { background: #f2f3f5; }
.del-loc-group {
  padding: 5px 8px 3px;
  font-size: var(--fs-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
  border-top: 1px solid var(--line);
}
.del-loc-group:first-child { border-top: 0; }

/* Custom confirm dialog body */
.del-confirm-body p {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin: 0;
  line-height: 1.5;
}

/* Delete button in the modal foot */
.del-modal-delete {
  margin-right: auto;
}

/* Responsive: on narrow screens, let days shrink then scroll */
@media (max-width: 700px) {
  .del-day { min-height: 70px; }
  .del-card-title { font-size: var(--fs-xs); }
  .del-grid-wrap { padding: 0 4px 16px; }
  .del-month-label { min-width: 120px; font-size: 13px; }
}

/* ============================================================ DASHBOARD
   Uses the same .panel / .panel-head / .grid-table language as the admin
   pages. No bespoke card system — it IS the app, not a separate thing. */

.dash-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.dash-panel-wide { grid-column: span 2; }
@media (max-width: 800px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-panel-wide { grid-column: span 1; }
}

/* Small inline links inside panel heads. */
.dash-head-link {
  float: right;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.dash-head-link a { color: var(--accent); text-decoration: none; }
.dash-head-link a:hover { text-decoration: underline; }

.dash-panel-body { padding: 8px 9px; font-size: var(--fs-sm); }

/* ---- week trend bars ---- */
.dash-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 90px;
  padding: 8px 9px;
}
.dash-bar {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  height: 100%;
  justify-content: flex-end;
}
.dash-bar-num {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dash-bar-track {
  width: 100%;
  max-width: 32px;
  flex: 1;
  display: flex;
  align-items: flex-end;
  background: var(--page);
}
.dash-bar-fill {
  width: 100%;
  background: var(--ink-3);
  min-height: 2px;
}
.dash-bar.today .dash-bar-fill { background: var(--accent); }
.dash-bar.today .dash-bar-num { color: var(--accent); }
.dash-bar.weekend .dash-bar-fill { opacity: .5; }
.dash-bar.weekend .dash-bar-num { color: var(--ink-3); }
.dash-bar-label {
  font-size: var(--fs-caption);
  color: var(--ink-3);
}

/* ---- online ---- */
.dash-online-body { padding: 8px 9px; }
.dash-presence {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.dash-presence-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink-2);
}

/* ---- mini tables (deliveries, starters) ---- */
.dash-mini-table td {
  padding: 4px 7px;
}
.dash-cell-date {
  white-space: nowrap;
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* ---- unit chips ---- */
.dash-unit-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 15px;
  padding: 0 3px;
  color: #fff;
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
}
.dash-swatch {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  vertical-align: middle;
}
.dash-loc-tag {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  border-left: 3px solid var(--line-strong);
  padding-left: 4px;
  margin-right: 6px;
  white-space: nowrap;
}
.dash-loc-tag.prelight { color: var(--ink-3); }
.dash-loc-cell {
  font-size: var(--fs-sm);
  color: var(--ink-2);
  vertical-align: top;
}
.dash-loc-group-row td {
  background: #eceef1;
  font-weight: 700;
  color: var(--ink);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding-top: 6px;
  padding-bottom: 6px;
}
.dash-loc-sub {
  padding-left: 20px !important;
  color: var(--ink-2);
}
.dash-loc-sub-bullet {
  color: var(--ink-3);
  margin-right: 4px;
}
.dash-loc-date-line {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  margin-bottom: 2px;
}
.dash-unit-line {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-3);
  line-height: 1.5;
}

/* ---- conflicts ---- */
.dash-conflict-row td {
  border-left: 3px solid transparent;
}
.dash-conflict-row:hover td {
  background: var(--conflict-bg);
  border-left-color: var(--danger);
}
.dash-conflict-link {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.dash-conflict-link:hover {
  color: var(--danger-dark);
  text-decoration: underline;
}
.dash-conflict-count {
  font-weight: 800;
}