/* =========================================================================
   Airframe 21 : flight-ops control room styling.
   Committed dark theme. Every colour is set explicitly; nothing inherits a
   browser default. Discipline colours are validated against --surface-1.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* planes */
  --bg-0: #070c13;
  --bg-1: #0a1018;
  --surface-1: #101826;
  --surface-2: #16202f;
  --surface-3: #1c2839;
  --glass: rgba(22, 32, 47, 0.72);
  --glass-hi: rgba(30, 43, 62, 0.82);

  /* ink. Every step is a TEXT token, so each one clears 4.5:1 against the
     lightest surface it ever sits on (the job card, about rgb(24,35,51)).
     Measured there: ink-1 16.2:1, ink-2 10.9:1, ink-3 8.2:1, ink-4 6.2:1. */
  --ink-1: #eef4fb;
  --ink-2: #c8d6e8;
  --ink-3: #a8bcd2;
  --ink-4: #8ea3bb;

  /* lines */
  --line: rgba(129, 168, 214, 0.13);
  --line-2: rgba(129, 168, 214, 0.24);
  --line-3: rgba(129, 168, 214, 0.4);

  /* accent: aviation amber */
  --accent: #ff9d2e;
  --accent-2: #ffbe6b;
  --accent-dim: rgba(255, 157, 46, 0.16);
  --accent-line: rgba(255, 157, 46, 0.45);

  /* status */
  --good: #0ca30c;
  --good-lift: #2fce4a;
  --warning: #fab219;
  --critical: #d03b3b;
  --critical-lift: #ef6a6a;

  /* geometry */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --t: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.8);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.55), 0 24px 60px -20px rgba(0, 0, 0, 0.9);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --hdr-h: 156px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg-0);
  color: var(--ink-1);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

body {
  /* blueprint: fine grid, heavier grid, then a soft cockpit-light vignette */
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px),
    linear-gradient(rgba(129, 168, 214, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(129, 168, 214, 0.05) 1px, transparent 1px),
    radial-gradient(1200px 620px at 78% -8%, rgba(255, 157, 46, 0.09), transparent 62%),
    radial-gradient(1100px 700px at 6% 4%, rgba(57, 135, 229, 0.11), transparent 64%),
    linear-gradient(180deg, #0b111b 0%, var(--bg-0) 60%, #060a10 100%);
  background-size: 132px 132px, 132px 132px, 22px 22px, 22px 22px, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
}

.watermark {
  position: fixed;
  right: -6%;
  bottom: 2%;
  width: min(1180px, 96vw);
  opacity: 0.11;
  pointer-events: none;
  z-index: 0;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}
button { cursor: pointer; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.app {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* ============================================================ header ==== */

.hdr {
  flex: 0 0 auto;
  padding: 14px clamp(12px, 2.2vw, 26px) 10px;
  background: linear-gradient(180deg, rgba(10, 16, 24, 0.94) 0%, rgba(10, 16, 24, 0.78) 70%, rgba(10, 16, 24, 0) 100%);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}

.hdr-top {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(255, 157, 46, 0.22), rgba(255, 157, 46, 0.06));
  border: 1px solid var(--accent-line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px -10px var(--accent);
  flex: 0 0 auto;
}
.brand-mark svg { width: 24px; height: 24px; fill: var(--accent); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.brand-text strong {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: 0.005em;
  color: var(--ink-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-text em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.hdr-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }

.seg {
  display: flex;
  padding: 3px;
  gap: 3px;
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: 999px;
}
.seg-btn {
  border: 0;
  background: transparent;
  color: var(--ink-3);
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: color var(--t), background var(--t);
}
.seg-btn:hover { color: var(--ink-1); }
.seg-btn.is-on {
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  color: var(--ink-1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface-1);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: all var(--t);
}
.icon-btn svg {
  width: 15px; height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon-btn:hover:not(:disabled) { color: var(--ink-1); border-color: var(--line-3); background: var(--surface-2); transform: translateY(-1px); }
/* 0.62 keeps the disabled Undo button visibly inactive while its label still
   clears 4.5:1. (WCAG exempts inactive controls; this passes anyway.) */
.icon-btn:disabled { opacity: 0.62; cursor: not-allowed; }
.icon-btn[aria-pressed="false"] { color: var(--ink-4); }
.icon-btn.is-primary { color: var(--accent-2); border-color: var(--accent-line); background: var(--accent-dim); }
.icon-btn.is-primary:hover { background: rgba(255, 157, 46, 0.24); color: var(--accent-2); }

/* KPI row */
.kpis {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.kpi {
  position: relative;
  flex: 1 1 150px;
  min-width: 138px;
  padding: 11px 14px 12px;
  border-radius: var(--r-md);
  background: var(--glass);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
}
.kpi::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: var(--kpi-bar, var(--line-3));
}
.kpi-label {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 700;
}
.kpi-value {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 3px;
  font-size: 27px;
  font-weight: 640;
  letter-spacing: -0.02em;
  color: var(--kpi-ink, var(--ink-1));
  line-height: 1.05;
}
.kpi-value small { font-size: 12.5px; font-weight: 600; color: var(--ink-3); letter-spacing: 0; }
.kpi-sub { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.kpi-sub b { color: var(--ink-2); font-weight: 600; }
.kpi.is-good { --kpi-bar: var(--good-lift); --kpi-ink: var(--good-lift); }
.kpi.is-bad { --kpi-bar: var(--critical-lift); --kpi-ink: var(--critical-lift); }
.kpi.is-accent { --kpi-bar: var(--accent); }

.meter {
  position: relative;
  height: 5px;
  margin-top: 8px;
  border-radius: 99px;
  background: rgba(129, 168, 214, 0.14);
  overflow: hidden;
}
.meter i {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width var(--t-slow);
}
.meter u {
  position: absolute;
  top: -3px; bottom: -3px;
  width: 2px;
  background: var(--ink-2);
  border-radius: 2px;
}

.alerts { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.alert {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  line-height: 1.4;
  border: 1px solid;
}
.alert[data-kind="error"] { background: rgba(208, 59, 59, 0.13); border-color: rgba(208, 59, 59, 0.44); color: #ffc9c9; }
.alert[data-kind="warn"] { background: rgba(250, 178, 25, 0.11); border-color: rgba(250, 178, 25, 0.4); color: #ffe0a3; }
.alert svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.alert b { font-weight: 650; }

/* ============================================================= stage ==== */

.stage { flex: 1 1 auto; min-height: 0; position: relative; }
.view { position: absolute; inset: 0; display: none; }
.view.is-on { display: block; }

/* ============================================================= board ==== */

.board-scroll {
  position: relative;
  height: 100%;
  overflow: auto;
  padding: 18px clamp(12px, 2.2vw, 26px) 34px;
  scrollbar-color: var(--line-3) transparent;
}
.arrows {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}
.arrows .link { fill: none; stroke-width: 1.5; transition: stroke var(--t), opacity var(--t); }
.arrows .link-hit { fill: none; stroke: transparent; stroke-width: 13; pointer-events: stroke; cursor: pointer; }
.arrows g.lnk .link { stroke: rgba(129, 168, 214, 0.28); }
.arrows g.lnk:hover .link { stroke: var(--critical-lift); stroke-width: 2.2; }
.arrows g.lnk.is-rel .link { stroke: rgba(166, 186, 210, 0.85); stroke-width: 1.8; }
.arrows g.lnk.is-crit .link { stroke: var(--accent); stroke-width: 2.2; filter: drop-shadow(0 0 5px rgba(255, 157, 46, 0.5)); }
.arrows .head { fill: rgba(129, 168, 214, 0.4); transition: fill var(--t); }
.arrows g.lnk.is-rel .head { fill: rgba(166, 186, 210, 0.9); }
.arrows g.lnk.is-crit .head { fill: var(--accent); }
.arrows g.lnk:hover .head { fill: var(--critical-lift); }
.arrows .live { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 4; fill: none; }

.board {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  min-height: 100%;
  z-index: 1;
}

.col {
  flex: 0 0 322px;
  width: 322px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: var(--r-lg);
  padding: 14px 13px 16px;
  background: linear-gradient(180deg, rgba(16, 24, 38, 0.82), rgba(12, 18, 29, 0.62));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
}
.col-hd { display: flex; align-items: center; gap: 9px; padding: 2px 3px 11px; border-bottom: 1px solid var(--line); }
.col-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--c); box-shadow: 0 0 10px -1px var(--c); flex: 0 0 auto; }
.col-name {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.col-meta { margin-left: auto; display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.chip-crew {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 650; letter-spacing: 0.03em;
  color: var(--ink-2);
  background: rgba(129, 168, 214, 0.1);
  border: 1px solid var(--line);
  padding: 3px 9px; border-radius: 99px;
  font-variant-numeric: tabular-nums;
  cursor: help;
}
.chip-crew svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.col-days {
  font-size: 13px; font-weight: 700; color: var(--c);
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: baseline; gap: 3px;
  cursor: help;
}
/* the little word after a number ("crew", "days"): never leave a bare figure */
.chip-crew .unit, .col-days .unit {
  font-size: 10.5px; color: var(--ink-3); font-weight: 600;
  letter-spacing: 0.05em; text-transform: lowercase;
}

.jobs { display: flex; flex-direction: column; gap: 14px; min-height: 26px; }

.job {
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(28, 40, 57, 0.72), rgba(20, 29, 43, 0.6));
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}
.job:hover { border-color: var(--line-3); }
.job-hd {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 12px 11px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.job-grip { color: var(--ink-4); cursor: grab; display: grid; place-items: center; flex: 0 0 auto; }
.job-grip svg { width: 14px; height: 14px; fill: currentColor; }
.job-grip:active { cursor: grabbing; }
.job-title { flex: 1 1 auto; min-width: 0; font-size: 15.5px; font-weight: 680; color: var(--ink-1); letter-spacing: 0.005em; line-height: 1.3; }
.job-title em { display: block; font-style: normal; font-size: 12px; color: var(--ink-3); font-weight: 500; letter-spacing: 0; margin-top: 3px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.job-days {
  font-size: 12px; font-weight: 700; color: var(--ink-2);
  font-variant-numeric: tabular-nums; flex: 0 0 auto;
  background: rgba(129, 168, 214, 0.1);
  border-radius: 99px; padding: 3px 9px;
  border: 1px solid var(--line);
}
.job.is-crit { border-color: var(--accent-line); }
.subs { display: flex; flex-direction: column; gap: 9px; padding: 10px; min-height: 22px; }

/* the subtask box */
.sub {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px 12px 13px;
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(16, 24, 38, 0.94), rgba(13, 20, 31, 0.9));
  border: 1px solid var(--line);
  cursor: pointer;
  transition: border-color var(--t), background var(--t), transform var(--t), box-shadow var(--t);
}
.sub::before {
  content: "";
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 2.5px;
  border-radius: 2px;
  background: var(--c);
  opacity: 0.55;
  transition: opacity var(--t);
}
.sub:hover { border-color: var(--line-3); background: linear-gradient(180deg, rgba(24, 35, 52, 0.95), rgba(18, 27, 41, 0.92)); transform: translateY(-1px); }
.sub:hover::before { opacity: 1; }
.sub.is-sel {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-line), 0 10px 26px -14px var(--accent);
}
.sub.is-crit {
  border-color: var(--accent-line);
  background: linear-gradient(180deg, rgba(46, 34, 20, 0.85), rgba(28, 22, 16, 0.8));
}
.sub.is-crit::before { background: var(--accent); opacity: 1; box-shadow: 0 0 8px var(--accent); }
/* Done steps recede, but the text stays readable: at 0.55 the composited
   title still measures 5.6:1 against the card. */
.sub.is-done { opacity: 0.55; }
.sub.is-done .sub-name { text-decoration: line-through; text-decoration-color: var(--ink-4); }

.sub-check {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin-top: 1px;
  border-radius: 6px;
  border: 1.5px solid var(--line-3);
  background: transparent;
  display: grid; place-items: center;
  transition: all var(--t);
  padding: 0;
}
.sub-check svg { width: 12px; height: 12px; fill: none; stroke: var(--bg-0); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity var(--t); }
.sub-check:hover { border-color: var(--good-lift); }
.sub-check[aria-checked="true"] { background: var(--good-lift); border-color: var(--good-lift); }
.sub-check[aria-checked="true"] svg { opacity: 1; }

.sub-body { flex: 1 1 auto; min-width: 0; }
.sub-name { font-size: 14px; line-height: 1.45; color: var(--ink-1); font-weight: 500; word-break: break-word; }
.sub-tags { display: flex; align-items: center; gap: 6px; margin-top: 8px; flex-wrap: wrap; }

.tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 5px;
  white-space: nowrap;
}
.tag-zone { color: var(--z); background: color-mix(in srgb, var(--z) 14%, transparent); border: 1px solid color-mix(in srgb, var(--z) 34%, transparent); }
.tag-days { color: var(--ink-2); background: rgba(129, 168, 214, 0.1); border: 1px solid var(--line); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.tag-when { color: var(--ink-3); background: transparent; border: 1px dashed var(--line-2); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.tag-wait { color: var(--warning); background: rgba(250, 178, 25, 0.1); border: 1px solid rgba(250, 178, 25, 0.3); font-variant-numeric: tabular-nums; }
.tag-dep { color: var(--ink-3); background: rgba(129, 168, 214, 0.07); border: 1px solid var(--line); }
.tag-flex { color: var(--accent-2); background: var(--accent-dim); border: 1px solid var(--accent-line); }

.sub-link {
  position: absolute;
  right: -8px; top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 1px solid var(--line-3);
  background: var(--surface-3);
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity var(--t), transform var(--t), background var(--t), border-color var(--t);
  cursor: crosshair;
  touch-action: none;
  z-index: 4;
  padding: 0;
}
.sub-link svg { width: 9px; height: 9px; fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; }
.sub:hover .sub-link, .sub.is-sel .sub-link { opacity: 1; }
.sub-link:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-50%) scale(1.18); }
.sub-link:hover svg { stroke: var(--bg-0); }
body.is-linking .sub-link { opacity: 1; }
body.is-linking .sub { cursor: crosshair; }
body.is-linking .sub.is-target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }
body.is-linking .job-hd.is-target { background: var(--accent-dim); }

.add-row {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  padding: 6px;
  border-radius: 7px;
  border: 1px dashed var(--line-2);
  background: transparent;
  color: var(--ink-4);
  font-size: 11px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase;
  transition: all var(--t);
}
.add-row:hover { color: var(--accent-2); border-color: var(--accent-line); background: rgba(255, 157, 46, 0.07); }
.add-col {
  flex: 0 0 190px;
  align-self: stretch;
  min-height: 120px;
  border-radius: var(--r-lg);
  border: 1px dashed var(--line-2);
  background: transparent;
  color: var(--ink-4);
  font-size: 11.5px; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase;
  transition: all var(--t);
}
.add-col:hover { color: var(--accent-2); border-color: var(--accent-line); background: rgba(255, 157, 46, 0.05); }

/* drag states from SortableJS */
.sortable-ghost { opacity: 0.28 !important; }
.sortable-ghost.sub { border-style: dashed; border-color: var(--accent) !important; background: var(--accent-dim) !important; }
.sortable-ghost.job { border-style: dashed; border-color: var(--accent) !important; }
.sortable-drag {
  opacity: 1 !important;
  transform: rotate(-1.2deg) scale(1.02);
  box-shadow: 0 22px 48px -16px rgba(0, 0, 0, 0.95), 0 0 0 1px var(--accent-line) !important;
  cursor: grabbing !important;
}
.subs.drop-hot, .jobs.drop-hot { background: rgba(255, 157, 46, 0.05); border-radius: 8px; }
@keyframes dropIn {
  0% { transform: scale(1.035); box-shadow: 0 0 0 2px var(--accent-line); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; }
}
.just-dropped { animation: dropIn 260ms cubic-bezier(0.4, 0, 0.2, 1); }

/* ========================================================== timeline ==== */

.gantt-wrap {
  height: 100%;
  overflow: auto;
  /* No top padding: a sticky element pins to the scrollport's PADDING edge,
     so 16px here left a band above the ruler where rows scrolling past stayed
     visible. The gap now sits on .gantt as a margin, which scrolls away with
     the content, and the ruler pins flush to the top. */
  padding: 0 clamp(12px, 2.2vw, 26px) 40px;
  scrollbar-color: var(--line-3) transparent;
  /* The day ruler sticks to the top of this scrollport, so anything scrolled
     into view would otherwise arrive underneath it and be unreadable. Keep a
     ruler's worth of clear space at the top, and a little at the foot so the
     last row never finishes flush against the status bar. */
  scroll-padding-top: 48px;
  scroll-padding-bottom: 12px;
}
.gantt {
  margin-top: 16px;
  --lab: 232px;
  --day: 46px;
  min-width: calc(var(--lab) + var(--days) * var(--day));
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(16, 24, 38, 0.8), rgba(11, 17, 27, 0.62));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  /* clip, not hidden: `hidden` would make this the scrollport and the sticky
     ruler and label column would stop sticking. */
  overflow: clip;
}

.g-legend {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
}
.g-legend .lg { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); letter-spacing: 0.03em; }
.g-legend .sw { width: 11px; height: 11px; border-radius: 3px; background: var(--c); flex: 0 0 auto; }
.g-legend .sw.crit { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.g-legend .sw.wait { width: 18px; height: 0; border-top: 2px dashed var(--warning); border-radius: 0; }
.g-legend .sw.tgt { width: 0; height: 13px; border-left: 2px dashed var(--accent); border-radius: 0; }
.g-legend .spacer { flex: 1 1 auto; }

/* The ruler is sticky, so every row and the legend pass underneath it on the
   way up. It was translucent, which let that traffic ghost through and made
   the day numbers hard to read. It is opaque now: what is under it is hidden
   properly rather than half shown. */
.g-ruler {
  position: sticky; top: 0; z-index: 5;
  display: flex;
  background: #0e1521;
  border-bottom: 1px solid var(--line-2);
}
.g-ruler .g-lab { flex: 0 0 var(--lab); padding: 7px 14px; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); font-weight: 700; position: sticky; left: 0; z-index: 2; background: #0e1521; }
/* the ruler strip and every bar track are the SAME fixed pixel width, so a bar
   placed at a percentage of its track lands exactly under its day number. */
.g-ruler .g-days { position: relative; flex: 0 0 auto; width: calc(var(--days) * var(--day)); display: flex; }
.g-day {
  flex: 0 0 var(--day);
  text-align: center;
  padding: 7px 0;
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-4);
  border-left: 1px solid var(--line);
  font-weight: 600;
}
.g-day.is-fifth { color: var(--ink-2); }
.g-day.is-target { color: var(--accent); font-weight: 750; }
.g-day.is-over { color: var(--critical-lift); }

.g-group {
  padding: 9px 14px 8px;
  background: rgba(129, 168, 214, 0.045);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.g-group-in {
  display: flex; align-items: center; gap: 9px;
  position: sticky; left: 14px;
  width: calc(var(--lab) + 240px);
  max-width: 100%;
}
.g-group .sw { width: 8px; height: 8px; border-radius: 2px; background: var(--c); box-shadow: 0 0 9px -1px var(--c); }
.g-group b { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-1); }
.g-group span { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.g-group .crewpill {
  margin-left: auto; font-size: 10px; color: var(--ink-3);
  border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px;
  font-variant-numeric: tabular-nums;
}

.g-row { display: flex; align-items: stretch; min-height: 30px; border-bottom: 1px solid rgba(129, 168, 214, 0.055); }
.g-row:hover { background: rgba(129, 168, 214, 0.04); }
.g-row .g-lab {
  flex: 0 0 var(--lab);
  padding: 6px 12px 6px 22px;
  font-size: 11.5px;
  color: var(--ink-2);
  display: flex; align-items: center; gap: 6px;
  border-right: 1px solid var(--line);
  position: sticky; left: 0;
  background: linear-gradient(90deg, rgba(12, 18, 29, 0.97) 88%, rgba(12, 18, 29, 0.86));
  z-index: 4;
  cursor: pointer;
}
.g-row .g-lab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-row.is-crit .g-lab { color: var(--accent-2); }
.g-row.is-done .g-lab { color: var(--ink-4); text-decoration: line-through; text-decoration-color: var(--ink-4); }

.g-track { position: relative; flex: 0 0 auto; width: calc(var(--days) * var(--day)); }
.g-track::before {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px var(--day));
  pointer-events: none;
}
.g-target {
  position: absolute; top: 0; bottom: 0;
  width: 0;
  border-left: 2px dashed var(--accent);
  opacity: 0.75;
  pointer-events: none;
  z-index: 3;
}
.g-target-head {
  position: absolute; top: 0; bottom: 0;
  border-left: 2px dashed var(--accent);
  z-index: 6;
  pointer-events: none;
}
.g-target-head b {
  position: absolute; top: 4px; right: 5px;
  font-size: 9.5px; font-weight: 750; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bg-0); background: var(--accent);
  padding: 1px 6px; border-radius: 3px; white-space: nowrap;
}

.bar {
  position: absolute;
  top: 6px; bottom: 6px;
  min-width: 5px;
  border-radius: 4px;
  background: var(--c);
  box-shadow: 0 0 0 2px var(--surface-1);
  display: flex; align-items: center;
  padding: 0 6px;
  cursor: pointer;
  transition: filter var(--t), transform var(--t);
  z-index: 2;
}
.bar:hover { filter: brightness(1.18); transform: translateY(-1px); }
.bar b {
  font-size: 10px; font-weight: 700; color: var(--bg-0);
  white-space: nowrap; overflow: hidden;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.bar.is-crit {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  box-shadow: 0 0 0 2px var(--surface-1), 0 0 14px -2px var(--accent);
}
.bar.is-flex::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 4px;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.24) 0 3px, transparent 3px 7px);
  pointer-events: none;
}
.bar.is-done { background: var(--ink-4); box-shadow: 0 0 0 2px var(--surface-1); }
.bar.is-done b { color: var(--bg-1); }
.whisker {
  position: absolute;
  top: 50%;
  height: 0;
  border-top: 2px dashed var(--warning);
  opacity: 0.75;
  z-index: 1;
  pointer-events: none;
}
.whisker::before, .whisker::after {
  content: "";
  position: absolute; top: -4px;
  width: 0; height: 9px;
  border-left: 2px solid var(--warning);
}
.whisker::before { left: 0; }
.whisker::after { right: 0; }

.g-empty { padding: 40px; text-align: center; color: var(--ink-3); font-size: 13px; }

/* tooltip */
.tip {
  position: fixed;
  z-index: 90;
  max-width: 288px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: rgba(12, 18, 29, 0.97);
  border: 1px solid var(--line-3);
  box-shadow: var(--shadow-2);
  font-size: 12px;
  color: var(--ink-2);
  pointer-events: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.tip b { display: block; color: var(--ink-1); font-size: 12.5px; font-weight: 640; margin-bottom: 5px; }
.tip dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 0; }
.tip dt { color: var(--ink-4); font-size: 11px; }
.tip dd { margin: 0; color: var(--ink-1); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.tip .note { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); color: var(--warning); font-size: 11.5px; }
.tip .note.crit { color: var(--accent-2); }

/* ========================================================= statusbar ==== */

.statusbar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 9px;
  padding: 7px clamp(12px, 2.2vw, 26px);
  border-top: 1px solid var(--line);
  background: rgba(8, 13, 20, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 11px;
  color: var(--ink-4);
  letter-spacing: 0.03em;
}
.statusbar .sep { flex: 1 1 auto; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-4); flex: 0 0 auto; transition: background var(--t); }
.dot[data-state="local"] { background: var(--ink-3); }
.dot[data-state="syncing"] { background: var(--warning); animation: pulse 1.1s ease-in-out infinite; }
.dot[data-state="synced"] { background: var(--good-lift); }
.dot[data-state="offline"], .dot[data-state="error"] { background: var(--critical-lift); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }

/* ============================================================= panel ==== */

.scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(4, 7, 12, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: fadeIn var(--t) both;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.panel {
  position: fixed;
  z-index: 50;
  top: 0; right: 0; bottom: 0;
  width: min(400px, 100vw);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(18, 27, 41, 0.98), rgba(12, 18, 29, 0.98));
  border-left: 1px solid var(--line-2);
  box-shadow: var(--shadow-2);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: slideIn var(--t-slow) both;
}
@keyframes slideIn { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }

.p-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
}
.p-hd .kind {
  font-size: 9.5px; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bg-0); background: var(--c, var(--accent));
  padding: 3px 8px; border-radius: 4px;
}
.p-hd .sub2 { font-size: 11px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-close {
  margin-left: auto; flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--surface-1);
  color: var(--ink-3); display: grid; place-items: center;
  transition: all var(--t);
}
.p-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.p-close:hover { color: var(--ink-1); border-color: var(--line-3); }

.p-body { flex: 1 1 auto; overflow: auto; padding: 14px 16px 22px; scrollbar-color: var(--line-3) transparent; }

.field { margin-bottom: 14px; }
.field > label, .flabel {
  display: block;
  font-size: 9.5px; font-weight: 750; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 6px;
}
.inp, .sel, .txt {
  width: 100%;
  padding: 9px 11px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: rgba(8, 13, 20, 0.72);
  color: var(--ink-1);
  font-size: 13.5px;
  transition: border-color var(--t), background var(--t), box-shadow var(--t);
}
.inp::placeholder, .txt::placeholder { color: var(--ink-4); }
.inp:focus, .sel:focus, .txt:focus {
  outline: none;
  border-color: var(--accent-line);
  background: rgba(10, 16, 25, 0.9);
  box-shadow: 0 0 0 3px rgba(255, 157, 46, 0.12);
}
.txt { resize: vertical; min-height: 66px; line-height: 1.5; font-size: 13px; }
.sel { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23a8bcd2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; background-size: 11px; padding-right: 32px; }
.sel option { background: var(--surface-2); color: var(--ink-1); }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.stepper { display: flex; align-items: stretch; gap: 0; }
.stepper button {
  width: 36px;
  border: 1px solid var(--line-2);
  background: var(--surface-1);
  color: var(--ink-2);
  font-size: 17px; font-weight: 500;
  display: grid; place-items: center;
  transition: all var(--t);
}
.stepper button:first-child { border-radius: 8px 0 0 8px; border-right: 0; }
.stepper button:last-child { border-radius: 0 8px 8px 0; border-left: 0; }
.stepper button:hover { background: var(--surface-3); color: var(--accent-2); }
.stepper .inp { border-radius: 0; text-align: center; font-variant-numeric: tabular-nums; font-weight: 640; }

.deps { display: flex; flex-direction: column; gap: 6px; }
.dep {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  border-radius: 7px;
  background: rgba(8, 13, 20, 0.6);
  border: 1px solid var(--line);
  font-size: 12px;
}
.dep .k {
  font-size: 8.5px; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 5px; border-radius: 3px;
  background: rgba(129, 168, 214, 0.13); color: var(--ink-3);
  flex: 0 0 auto;
}
.dep .k.job { background: var(--accent-dim); color: var(--accent-2); }
.dep .n { flex: 1 1 auto; min-width: 0; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dep .x {
  flex: 0 0 auto; width: 20px; height: 20px; border-radius: 5px;
  border: 0; background: transparent; color: var(--ink-4);
  display: grid; place-items: center; transition: all var(--t);
}
.dep .x svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.dep .x:hover { background: rgba(208, 59, 59, 0.18); color: var(--critical-lift); }
.dep-empty { font-size: 12px; color: var(--ink-4); padding: 3px 0 5px; }

.sched-card {
  margin-top: 4px; margin-bottom: 14px;
  padding: 11px 12px;
  border-radius: var(--r-md);
  background: rgba(8, 13, 20, 0.55);
  border: 1px solid var(--line);
}
.sched-card.is-crit { border-color: var(--accent-line); background: rgba(255, 157, 46, 0.07); }
.sched-card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 0; }
.sched-card dt { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); font-weight: 650; }
.sched-card dd { margin: 0; font-size: 12.5px; color: var(--ink-1); font-variant-numeric: tabular-nums; }
.sched-card .why { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--warning); line-height: 1.42; }
.sched-card .why.crit { color: var(--accent-2); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 15px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--ink-1);
  font-size: 12.5px; font-weight: 640; letter-spacing: 0.02em;
  transition: all var(--t);
}
.btn:hover { background: var(--surface-3); border-color: var(--line-3); }
.btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn.accent { background: var(--accent); border-color: var(--accent); color: #201200; }
.btn.accent:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn.danger { color: var(--critical-lift); border-color: rgba(208, 59, 59, 0.35); background: rgba(208, 59, 59, 0.09); }
.btn.danger:hover { background: rgba(208, 59, 59, 0.18); border-color: rgba(208, 59, 59, 0.6); }
.btn.wide { width: 100%; }

.p-foot { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); flex: 0 0 auto; background: rgba(8, 13, 20, 0.5); }
.p-foot .btn { flex: 1 1 auto; }

.hint { font-size: 11.5px; color: var(--ink-4); line-height: 1.45; margin: -6px 0 14px; }

/* ============================================================= modal ==== */

.modal {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 18px;
  background: rgba(4, 7, 12, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeIn var(--t) both;
}
.modal-card {
  width: min(660px, 100%);
  max-height: min(88vh, 820px);
  display: flex; flex-direction: column;
  border-radius: var(--r-xl);
  background: linear-gradient(180deg, rgba(20, 30, 45, 0.99), rgba(12, 18, 29, 0.99));
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-2);
  animation: popIn var(--t-slow) both;
  overflow: hidden;
}
@keyframes popIn { from { transform: translateY(14px) scale(0.985); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-hd { display: flex; align-items: center; gap: 10px; padding: 16px 18px 14px; border-bottom: 1px solid var(--line); }
.modal-hd h2 { margin: 0; font-size: 15px; font-weight: 650; letter-spacing: 0.01em; color: var(--ink-1); }
.modal-body { flex: 1 1 auto; overflow: auto; padding: 16px 18px 20px; scrollbar-color: var(--line-3) transparent; }
.modal-foot { display: flex; gap: 8px; padding: 13px 18px; border-top: 1px solid var(--line); background: rgba(8, 13, 20, 0.5); }
.modal-foot .grow { flex: 1 1 auto; }

.sec { margin-bottom: 22px; }
.sec > h3 {
  margin: 0 0 4px;
  font-size: 10px; font-weight: 750; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--accent);
}
.sec > p { margin: 0 0 11px; font-size: 12px; color: var(--ink-4); line-height: 1.45; }

.grid-rows { display: flex; flex-direction: column; gap: 7px; }
.rrow {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  border-radius: 9px;
  background: rgba(8, 13, 20, 0.55);
  border: 1px solid var(--line);
}
.rrow .sw { width: 9px; height: 9px; border-radius: 3px; background: var(--c); flex: 0 0 auto; box-shadow: 0 0 9px -1px var(--c); }
.rrow .nm { flex: 1 1 auto; min-width: 0; }
.rrow .nm .inp { padding: 5px 8px; font-size: 12.5px; background: transparent; border-color: transparent; }
.rrow .nm .inp:hover { border-color: var(--line); }
.rrow .nm .inp:focus { border-color: var(--accent-line); background: rgba(8, 13, 20, 0.9); }
.rrow .cap { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.rrow .cap span { font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); font-weight: 700; }
.rrow .cap .stepper { width: 108px; }
.rrow .cap .stepper button { width: 28px; font-size: 15px; }
.rrow .cap .stepper .inp { padding: 5px 2px; font-size: 12.5px; }
.rrow .x {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 6px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-4);
  display: grid; place-items: center; transition: all var(--t);
}
.rrow .x svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.rrow .x:hover { background: rgba(208, 59, 59, 0.16); color: var(--critical-lift); border-color: rgba(208, 59, 59, 0.4); }
.rrow .load { font-size: 10.5px; color: var(--ink-4); font-variant-numeric: tabular-nums; flex: 0 0 auto; min-width: 74px; text-align: right; }

/* ============================================================ toasts ==== */

.toasts { position: fixed; left: 50%; bottom: 46px; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast {
  padding: 10px 16px;
  border-radius: 99px;
  background: rgba(16, 24, 38, 0.97);
  border: 1px solid var(--line-3);
  box-shadow: var(--shadow-2);
  font-size: 12.5px; color: var(--ink-1);
  animation: toastIn 220ms cubic-bezier(0.4, 0, 0.2, 1) both;
  max-width: min(460px, 92vw);
  text-align: center;
}
.toast.err { border-color: rgba(208, 59, 59, 0.55); color: #ffcfcf; }
.toast.ok { border-color: rgba(47, 206, 74, 0.45); }
@keyframes toastIn { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ======================================================== responsive ==== */

@media (max-width: 1000px) {
  .kpi { flex: 1 1 128px; min-width: 122px; }
  .kpi-value { font-size: 23px; }
}

@media (max-width: 760px) {
  html, body { font-size: 14px; }
  .hdr { padding: 10px 12px 8px; }
  .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
  .brand-mark svg { width: 20px; height: 20px; }
  .brand-text strong { font-size: 15px; }
  .hdr-actions { width: 100%; margin-left: 0; gap: 6px; }
  .seg-btn { padding: 5px 12px; font-size: 12px; }
  .icon-btn { padding: 6px 10px; font-size: 12px; }
  .icon-btn span { display: none; }
  .icon-btn.is-primary span { display: inline; }
  .kpis { gap: 7px; }
  .kpi { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 9px 11px 10px; }
  .kpi-value { font-size: 21px; }
  /* On a phone the four numbers are the payoff; the sentence under them is
     support. Cap it at three lines so the board is not pushed off-screen.
     The full wording stays in the card's tooltip and in Help. */
  .kpi-sub {
    font-size: 11.5px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .watermark { opacity: 0.07; bottom: 8%; }

  /* narrower column, so the trade name keeps its full word next to the chips */
  .col-name { font-size: 12px; letter-spacing: 0.06em; }
  .chip-crew { padding: 3px 7px; font-size: 11px; }

  .board-scroll { padding: 12px 12px 28px; scroll-snap-type: x proximity; }
  .col { flex: 0 0 79vw; width: 79vw; max-width: 320px; scroll-snap-align: start; }
  .add-col { flex: 0 0 150px; }

  /* edit panel becomes a bottom sheet */
  .panel {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%;
    max-height: 88vh;
    border-left: 0;
    border-top: 1px solid var(--line-2);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    animation: sheetIn var(--t-slow) both;
    padding-bottom: env(safe-area-inset-bottom);
  }
  @keyframes sheetIn { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
  .panel::before {
    content: "";
    position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px; border-radius: 99px; background: var(--line-3);
  }
  .p-hd { padding-top: 18px; }

  .gantt { --lab: 148px; --day: 34px; }
  .g-row .g-lab { padding-left: 12px; font-size: 11px; }
  .modal { padding: 0; place-items: end stretch; }
  .modal-card { max-height: 92vh; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  .toasts { bottom: 60px; }
}

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

/* forced-colors: keep identity off colour alone */
@media (forced-colors: active) {
  .sub, .job, .col, .kpi, .bar { border: 1px solid CanvasText; }
  .bar.is-crit { background: Highlight; }
}

/* =================================== clarity layer: added, not redesigned ==
   Everything below explains the board in plain words: the toolbar above the
   board, the quiet marker that replaces a chip in Simple view, the deliberate
   two-click removal controls, the guide and the first-visit note.
   ========================================================================= */

/* ------------------------------------------------------- board toolbar -- */

.view-board.is-on { display: flex; flex-direction: column; }
.view-board .board-scroll { flex: 1 1 auto; min-height: 0; height: auto; }

.board-bar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px clamp(12px, 2.2vw, 26px) 0;
}
.bar-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ink-3);
}
.board-bar .seg-btn { padding: 6px 14px; font-size: 12.5px; }
.bar-sep { flex: 1 1 auto; }
.mini-link {
  border: 1px solid var(--line-2);
  background: var(--surface-1);
  color: var(--ink-2);
  font-size: 12.5px; font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  transition: all var(--t);
}
.mini-link:hover { color: var(--ink-1); border-color: var(--line-3); background: var(--surface-2); }

/* Undo and Redo read as available the moment there is something to take back. */
.icon-btn.is-live { color: var(--ink-1); border-color: var(--line-3); }
.icon-btn.is-help { color: var(--ink-1); }

/* ------------------------------------------- Simple view: quiet marker -- */

.tag-held {
  color: var(--ink-3);
  background: rgba(129, 168, 214, 0.09);
  border: 1px solid var(--line);
  padding: 3px 6px;
  cursor: help;
}
.tag-held svg {
  width: 11px; height: 11px;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
/* chips that carry an explanation announce it with the cursor */
.tag-days, .tag-zone, .tag-when, .tag-wait, .tag-flex, .tag-dep { cursor: help; }

/* -------------------------------- deliberate removal of a link (arrows) -- */

/* The remove control is INERT until its link is armed. Hover may show it, so
   the user can see removal is possible, but hover must never make it
   clickable: crosses from neighbouring arrows overlap, and a hover-live cross
   meant a click aimed at one arrow could delete a different one. Only
   `.is-open` (set by a first, deliberate click on the arrow) turns pointer
   events back on. js/app.js enforces the same rule, so neither layer alone
   can be the safety. */
.arrows .unlink { opacity: 0; pointer-events: none; transition: opacity var(--t); }
.arrows g.lnk:hover .unlink { opacity: 1; pointer-events: none; }
.arrows g.lnk.is-open .unlink { opacity: 1; pointer-events: all; cursor: pointer; }
.arrows .unlink-bg { fill: var(--surface-3); stroke: var(--line-3); stroke-width: 1; }
.arrows .unlink-x { stroke: var(--ink-1); stroke-width: 2; stroke-linecap: round; fill: none; }
.arrows .unlink:hover .unlink-bg { fill: var(--critical); stroke: var(--critical-lift); }
.arrows .unlink:hover .unlink-x { stroke: #fff; }
.arrows g.lnk.is-open .link { stroke: var(--critical-lift); stroke-width: 2.2; }

/* --------------------------------- deliberate removal of anything else -- */

.btn.is-armed, .x.is-armed, .rrow .x.is-armed, .dep .x.is-armed {
  background: var(--critical);
  border-color: var(--critical-lift);
  color: #fff;
}
.btn.danger.is-armed { background: var(--critical); color: #fff; }
.x.is-armed svg, .dep .x.is-armed svg, .rrow .x.is-armed svg { stroke: #fff; }

/* --------------------------------------------------- toast with an undo -- */

.toast { display: inline-flex; align-items: center; gap: 12px; }
.toast.has-action { pointer-events: auto; padding-right: 6px; }
.toast-undo {
  flex: 0 0 auto;
  border: 1px solid var(--accent-line);
  background: var(--accent-dim);
  color: var(--accent-2);
  font-size: 12.5px; font-weight: 700;
  padding: 5px 14px;
  border-radius: 99px;
  transition: all var(--t);
}
.toast-undo:hover { background: var(--accent); color: #201200; border-color: var(--accent); }

/* ------------------------------------------------------------- the guide */

.help-card { width: min(720px, 100%); }
.help-body { font-size: 14.5px; line-height: 1.62; color: var(--ink-2); }
.help-sec { margin-bottom: 26px; }
.help-sec:last-child { margin-bottom: 6px; }
.help-sec > h3 {
  margin: 0 0 8px;
  font-size: 11px; font-weight: 750; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--accent);
}
.help-sec > p { margin: 0 0 10px; }
.help-sec > p:last-child { margin-bottom: 0; }
.help-sec b { color: var(--ink-1); font-weight: 650; }
.help-note {
  padding: 9px 12px;
  border-radius: var(--r-sm);
  background: rgba(129, 168, 214, 0.07);
  border: 1px solid var(--line);
  font-size: 13.5px;
}

.legend { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.lg-row { display: flex; align-items: flex-start; gap: 13px; }
.lg-chip { flex: 0 0 108px; display: flex; justify-content: flex-start; padding-top: 2px; }
.lg-row p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.lg-swatch { display: inline-flex; align-items: center; }
.lg-crit {
  display: inline-block;
  width: 34px; height: 20px;
  border-radius: 5px;
  border: 1px solid var(--accent-line);
  background: linear-gradient(180deg, rgba(46, 34, 20, 0.85), rgba(28, 22, 16, 0.8));
  box-shadow: inset 2.5px 0 0 var(--accent);
}

/* --------------------------------------------------- first-visit welcome */

/* A note, not a gate: it sits over one corner and the board stays live behind
   it. No backdrop-filter here, so nothing can blur the page. */
.welcome {
  position: fixed;
  z-index: 70;
  right: 20px;
  bottom: 42px;
  width: min(430px, calc(100vw - 24px));
  display: flex;
  animation: fadeIn var(--t-slow) both;
}
.welcome-card {
  position: relative;
  width: 100%;
  padding: 20px 22px 18px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(22, 33, 50, 0.99), rgba(13, 20, 32, 0.99));
  border: 1px solid var(--accent-line);
  box-shadow: var(--shadow-2);
}
.welcome-card h2 {
  margin: 0 0 8px;
  font-size: 16.5px; font-weight: 680; color: var(--ink-1);
  padding-right: 34px;
}
.welcome-card p { margin: 0 0 15px; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.welcome-row { display: flex; gap: 9px; flex-wrap: wrap; }
.welcome-x {
  position: absolute; top: 13px; right: 13px;
  width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--line-2); background: var(--surface-1);
  color: var(--ink-2); display: grid; place-items: center;
  transition: all var(--t);
}
.welcome-x svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.welcome-x:hover { color: var(--ink-1); border-color: var(--line-3); }

@media (max-width: 760px) {
  .board-bar { padding: 8px 12px 0; gap: 8px; }
  .bar-label { display: none; }
  .board-bar .seg-btn { padding: 5px 11px; font-size: 12px; }
  .mini-link { padding: 5px 11px; font-size: 12px; }
  /* these two say what they do, so they keep their words on a phone */
  #btnLinks span, #btnHelp span { display: inline; }
  .welcome { bottom: 40px; right: 12px; left: 12px; width: auto; }
  .welcome-card { padding: 17px 18px 16px; }
  .welcome-card h2 { font-size: 15.5px; }
  .welcome-card p { font-size: 13.5px; }
  .welcome-row .btn { flex: 1 1 auto; }
  .help-body { font-size: 14px; }
  .lg-row { flex-direction: column; gap: 6px; }
  .lg-chip { flex: 0 0 auto; }
}

/* ================================== lead intake questionnaire, added ====
   A full-screen form for a trade lead on a phone. Deliberately OPAQUE and
   deliberately free of backdrop-filter: a filter on a closed overlay silently
   blurs and swallows the whole page, which has bitten this project before.
   ======================================================================== */

/* the header entry point, reachable from every screen */
/* Filled, so it reads as the one thing to hand a lead, and so it is never
   confused with Setup's tinted accent next to it. */
.icon-btn.is-intake {
  color: #201200;
  border-color: var(--accent);
  background: var(--accent);
}
.icon-btn.is-intake:hover { background: var(--accent-2); border-color: var(--accent-2); color: #201200; }
.icon-btn .lbl-short { display: none; }

/* the opaque cover that stops the board flashing behind a #intake link */
html[data-intake-boot] body::after {
  content: "Opening the form";
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  background: var(--bg-0);
  color: var(--ink-3);
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
}

.intake {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: stretch; justify-content: center;
  background: var(--bg-0);
  overflow: hidden;
}
.ik-shell {
  display: flex; flex-direction: column;
  width: min(680px, 100%);
  height: 100%;
  background: linear-gradient(180deg, #0d1420 0%, var(--bg-0) 60%);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.ik-top {
  flex: 0 0 auto;
  padding: 12px 16px 8px;
  border-bottom: 1px solid var(--line);
  background: #0b111b;
}
.ik-top-row { display: flex; align-items: center; gap: 12px; }
.ik-top-row2 { display: flex; justify-content: flex-end; margin-top: 4px; }

.ik-icon {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 12px;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface-1);
  color: var(--ink-2);
  font-size: 13px; font-weight: 640;
  transition: all var(--t);
}
.ik-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ik-icon:hover { color: var(--ink-1); border-color: var(--line-3); }

.ik-prog { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.ik-prog-t { font-size: 11.5px; font-weight: 750; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-2); }
.ik-prog-bar { display: flex; gap: 4px; width: 100%; max-width: 200px; }
.ik-prog-bar i { flex: 1 1 0; height: 4px; border-radius: 99px; background: var(--surface-3); }
.ik-prog-bar i.on { background: var(--accent); }

.ik-body {
  flex: 1 1 auto; min-height: 0;
  overflow: auto;
  padding: 18px 16px 26px;
  scrollbar-color: var(--line-3) transparent;
  -webkit-overflow-scrolling: touch;
}

.ik-foot {
  flex: 0 0 auto;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: #0b111b;
}

.ik-h { margin: 0 0 6px; font-size: 21px; font-weight: 680; letter-spacing: 0.005em; color: var(--ink-1); }
.ik-lede { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.ik-help { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.ik-help.ik-centre { text-align: center; }
.ik-note {
  margin: 0 0 14px; padding: 11px 13px;
  border-radius: var(--r-md);
  border: 1px solid var(--accent-line);
  background: rgba(255, 157, 46, 0.09);
  font-size: 13.5px; line-height: 1.5; color: var(--ink-1);
}
.ik-resume {
  margin: 0 0 14px; padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-2);
  background: var(--surface-1);
  font-size: 13.5px; color: var(--ink-2);
}

.ik-q { margin-bottom: 24px; }
.ik-label {
  display: block;
  font-size: 15px; font-weight: 650; line-height: 1.4;
  color: var(--ink-1);
  margin-bottom: 9px;
}
.ik-label.sm { font-size: 13.5px; font-weight: 620; color: var(--ink-2); margin-bottom: 7px; }

.ik-input, .ik-textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 13px;
  border-radius: 10px;
  border: 1px solid var(--line-2);
  background: rgba(8, 13, 20, 0.8);
  color: var(--ink-1);
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
  font-family: var(--font);
  transition: border-color var(--t), box-shadow var(--t);
}
.ik-textarea { min-height: 190px; line-height: 1.6; resize: vertical; }
.ik-input::placeholder, .ik-textarea::placeholder { color: var(--ink-4); }
.ik-input:focus, .ik-textarea:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px rgba(255, 157, 46, 0.16);
}
.ik-input.ik-sub { margin-top: 8px; font-size: 15px; min-height: 44px; }
.ik-mt { margin-top: 10px; }

/* big tappable trade buttons */
.ik-choices { display: flex; flex-direction: column; gap: 8px; }
.ik-choice {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 13px 15px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--surface-1);
  color: var(--ink-1);
  font-size: 16px; font-weight: 620;
  text-align: left;
  transition: all var(--t);
}
.ik-choice .sw { width: 12px; height: 12px; border-radius: 3px; flex: 0 0 auto; }
.ik-choice:hover { border-color: var(--line-3); background: var(--surface-2); }
.ik-choice.on {
  border-color: var(--accent);
  background: rgba(255, 157, 46, 0.15);
  color: var(--ink-1);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}

/* plus and minus, sized for gloves */
.ik-stepper { display: inline-flex; align-items: stretch; }
.ik-step-btn {
  width: 56px; min-height: 52px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--ink-1);
  font-size: 24px; font-weight: 400;
  display: grid; place-items: center;
  transition: all var(--t);
}
.ik-step-btn:first-child { border-radius: 11px 0 0 11px; border-right: 0; }
.ik-step-btn:last-child { border-radius: 0 11px 11px 0; border-left: 0; }
.ik-step-btn:hover { background: var(--surface-3); color: var(--accent-2); }
.ik-step-val {
  min-width: 74px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2);
  background: rgba(8, 13, 20, 0.8);
  color: var(--ink-1);
  font-size: 19px; font-weight: 680;
  font-variant-numeric: tabular-nums;
}

.ik-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.ik-card {
  padding: 13px;
  border-radius: 13px;
  border: 1px solid var(--line-2);
  background: var(--surface-1);
}
.ik-stepcard { background: rgba(16, 24, 38, 0.72); }
.ik-row { display: flex; align-items: center; gap: 9px; }
.ik-grow { flex: 1 1 auto; min-width: 0; }
.ik-num {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 12px; font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.ik-x {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 9px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-3);
  display: grid; place-items: center;
  transition: all var(--t);
}
.ik-x svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.ik-x:hover { background: rgba(208, 59, 59, 0.18); color: var(--critical-lift); border-color: rgba(208, 59, 59, 0.5); }

.ik-field { margin-top: 15px; }

.ik-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ik-chipbtn {
  min-height: 42px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 14px; font-weight: 600;
  transition: all var(--t);
}
.ik-chipbtn:hover { color: var(--ink-1); border-color: var(--line-3); }
.ik-chipbtn.on {
  border-color: var(--accent);
  background: rgba(255, 157, 46, 0.17);
  color: var(--ink-1);
}
.ik-chipbtn.quiet { color: var(--ink-3); }

.ik-disclose {
  width: 100%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  min-height: 48px;
  padding: 10px 13px;
  border-radius: 10px;
  border: 1px dashed var(--line-2);
  background: rgba(8, 13, 20, 0.45);
  color: var(--ink-2);
  font-size: 13.5px; font-weight: 600;
  text-align: left;
  transition: all var(--t);
}
.ik-disclose:hover { border-color: var(--line-3); color: var(--ink-1); }
.ik-disclose b { font-size: 13px; font-weight: 700; color: var(--accent-2); }
.ik-disclose.open { border-style: solid; border-color: var(--accent-line); }
.ik-deps { margin-top: 10px; padding-left: 2px; }
.ik-deps .ik-help { margin: 0 0 13px; }
.ik-depgroup { margin-bottom: 11px; }
.ik-depgroup-t {
  display: block; margin-bottom: 6px;
  font-size: 10.5px; font-weight: 750; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-4);
}
.ik-depgroup .ik-chipbtn { margin: 0 6px 6px 0; }

.ik-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px;
  padding: 14px 20px;
  border-radius: 12px;
  border: 1px solid var(--line-2);
  background: var(--surface-2);
  color: var(--ink-1);
  font-size: 16px; font-weight: 650;
  transition: all var(--t);
}
.ik-btn:hover { background: var(--surface-3); border-color: var(--line-3); }
.ik-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ik-btn.ik-primary { background: var(--accent); border-color: var(--accent); color: #201200; }
.ik-btn.ik-primary:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); }
.ik-btn.ok { border-color: var(--good-lift); color: var(--good-lift); }
.ik-wide { width: 100%; }
.ik-add { border-style: dashed; color: var(--accent-2); }
.ik-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.ik-actions.ik-stack { flex-direction: column; gap: 10px; }

.ik-link {
  border: 0; background: transparent;
  color: var(--accent-2);
  font-size: 13.5px; font-weight: 640;
  padding: 8px 2px;
  min-height: 36px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ik-link:hover { color: var(--accent); }
.ik-sub-link { display: block; text-align: left; }
.ik-bulk-link { margin-bottom: 12px; }

.ik-jobhead { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.ik-chip {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-2);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.ik-running { margin: 14px 0 0; font-size: 13.5px; color: var(--ink-3); text-align: center; }

/* review */
.ik-sum { border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.ik-sum-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-1);
  font-size: 14px;
}
.ik-sum-row:last-child { border-bottom: 0; }
.ik-sum-row span { color: var(--ink-3); }
.ik-sum-row b { color: var(--ink-1); font-weight: 680; }

.ik-rev { margin-bottom: 16px; }
.ik-rev-h {
  margin: 0 0 4px;
  font-size: 15.5px; font-weight: 680; color: var(--accent-2);
}
.ik-rev-d { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-3); }
.ik-rev-list { margin: 0; padding-left: 20px; }
.ik-rev-list li { margin-bottom: 9px; font-size: 14px; color: var(--ink-1); line-height: 1.45; }
.ik-rev-n { display: block; font-weight: 620; }
.ik-rev-m {
  display: inline-block; margin: 3px 6px 0 0;
  padding: 2px 8px; border-radius: 5px;
  background: rgba(129, 168, 214, 0.12);
  color: var(--ink-2);
  font-size: 12.5px;
}
.ik-rev-w { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.ik-total {
  margin: 18px 0 4px;
  padding: 13px;
  border-radius: 12px;
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  text-align: center;
  font-size: 15.5px; font-weight: 650; color: var(--ink-1);
}

@media (max-width: 760px) {
  /* the entry point keeps a word on a phone, unlike the icon-only controls */
  .icon-btn.is-intake span { display: none; }
  .icon-btn.is-intake .lbl-short { display: inline; }
  .ik-shell { border: 0; }
  .ik-h { font-size: 19px; }
  .ik-icon span { display: none; }
  .ik-icon { padding: 8px 11px; }
}

/* ==================================================== the Today panel ====
   The daily driver. It is a plain scrolling column of derived answers: no
   controls except the tick box, which is the same control as on the board.
   Every colour here is an existing token, so it inherits the contrast work
   already done against --surface-1. */

.view-today.is-on { display: block; overflow: auto; -webkit-overflow-scrolling: touch; }
.today-scroll {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 18px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- the answer, first thing on screen ---- */
.td-head {
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--kpi-bar, var(--accent));
  border-radius: var(--r-lg);
  padding: 14px 18px 15px;
  box-shadow: var(--shadow-1);
}
.td-head.is-good { --kpi-bar: var(--good-lift); --td-ink: var(--good-lift); }
.td-head.is-bad { --kpi-bar: var(--critical-lift); --td-ink: var(--critical-lift); }
.td-finish {
  font-size: 34px;
  font-weight: 750;
  letter-spacing: -0.5px;
  line-height: 1.1;
  color: var(--td-ink, var(--ink-1));
  font-variant-numeric: tabular-nums;
}
.td-finish small {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0;
  margin-left: 8px;
}
.td-head p { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.td-head p b { color: var(--ink-1); font-weight: 700; }
.td-forecast { color: var(--ink-3) !important; font-size: 13px !important; }
.td-forecast.is-bad { color: var(--critical-lift) !important; }

/* ---- sections ---- */
.td-sec {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 18px 17px;
}
.td-sec h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.td-sec h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.td-lede { margin: 7px 0 12px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.td-note { margin: 6px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.5; }
.td-empty { padding: 40px 18px; text-align: center; color: var(--ink-2); }
.td-empty h2 { color: var(--ink-1); font-size: 19px; margin: 0 0 8px; }

/* ---- one card per trade ---- */
.td-trades {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  align-items: start; /* a trade with one step should not be as tall as one with four */
  gap: 11px;
}
.td-trade {
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-md);
  padding: 11px 12px 12px;
}
.td-trade.is-idle { border-color: rgba(250, 178, 25, 0.42); background: rgba(250, 178, 25, 0.07); }
.td-trade.is-clear { opacity: 0.72; }
.td-trade-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.td-swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--c); flex: none; }
.td-trade-name { font-weight: 650; font-size: 14.5px; color: var(--ink-1); }
.td-pill {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  color: var(--ink-3);
  white-space: nowrap;
}
.td-pill[data-state="working"] { color: var(--good-lift); border-color: rgba(47, 206, 74, 0.45); }
.td-pill[data-state="idle"] { color: var(--warning); border-color: rgba(250, 178, 25, 0.5); }
.td-next { margin: 9px 0 0; font-size: 12.5px; color: var(--ink-3); line-height: 1.5; }
.td-next b { color: var(--ink-2); font-weight: 650; }

/* ---- a line of work, with the one-tap tick box ---- */
.td-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.td-step {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 8px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  border: 1px solid var(--line);
}
.td-step.is-watch { border-color: rgba(250, 178, 25, 0.34); }
.td-step .sub-check { flex: none; margin-top: 1px; }
.td-bullet {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px dashed var(--line-3);
  margin-top: 1px;
}
.td-step-name { flex: 1 1 auto; font-size: 13.5px; color: var(--ink-1); line-height: 1.4; min-width: 0; }
.td-step-tags { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; flex: none; max-width: 100%; }

/* ---- finishes today / starts tomorrow ---- */
.td-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.td-split > div { min-width: 0; }

/* ---- how to finish sooner ---- */
.td-callout {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 10px 0 0;
  padding: 11px 13px;
  border-radius: var(--r-md);
  background: var(--accent-dim);
  border: 1px solid var(--accent-line);
  color: var(--ink-1);
  font-size: 13.5px;
  line-height: 1.55;
}
.td-callout svg { width: 17px; height: 17px; flex: none; margin-top: 1px; fill: var(--accent-2); stroke: none; }
.td-moves { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: mv; display: flex; flex-direction: column; gap: 8px; }
.td-moves li {
  counter-increment: mv;
  display: grid;
  grid-template-columns: 26px 1fr auto;
  grid-template-areas: "n what gain" ". sub sub";
  gap: 2px 8px;
  align-items: baseline;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
}
.td-moves li::before {
  content: counter(mv);
  grid-area: n;
  font-size: 12px;
  font-weight: 700;
  color: var(--bg-0);
  background: var(--accent);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-self: center;
}
.td-move-what { grid-area: what; font-size: 14px; color: var(--ink-1); line-height: 1.45; }
.td-move-gain {
  grid-area: gain;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--good-lift);
  white-space: nowrap;
}
.td-move-sub { grid-area: sub; font-size: 12px; color: var(--ink-3); }

/* ---- what needs watching ---- */
.td-watch { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.td-watch li {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 11px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  font-size: 12.5px;
  color: var(--ink-1);
}
.td-watch li span { color: var(--ink-3); font-size: 11.5px; }
.td-watch li.is-more { background: transparent; border-style: dashed; }

/* the quiet marker, on the board and here */
.tag.tag-watch {
  color: var(--warning);
  border-color: rgba(250, 178, 25, 0.42);
  background: rgba(250, 178, 25, 0.1);
  padding: 2px 5px;
}
.tag.tag-watch svg { width: 12px; height: 12px; display: block; fill: none; stroke: currentColor; stroke-width: 1.7; }

@media (max-width: 760px) {
  .today-scroll { padding: 10px 11px 34px; gap: 12px; }
  .td-head { padding: 12px 14px 13px; border-radius: var(--r-md); }
  .td-finish { font-size: 29px; }
  .td-sec { padding: 12px 14px 15px; border-radius: var(--r-md); }
  .td-trades { grid-template-columns: 1fr; }
  .td-split { grid-template-columns: 1fr; gap: 16px; }
  .td-moves li { grid-template-columns: 22px 1fr; grid-template-areas: "n what" ". gain" ". sub"; }
  .td-move-gain { justify-self: start; }
  /* A tick box on a phone has to be a comfortable target, since tapping it is
     the whole daily routine. */
  .td-step { padding: 9px 9px; }
  .td-step .sub-check { width: 26px; height: 26px; }
  .td-step .sub-check svg { width: 15px; height: 15px; }
}

/* ============================================== print and blank form ==== */

/* Never toggled with the hidden attribute: display:none on screen always,
   and only @media print can bring it back. */
#printSheet { display: none; }

@media print {
  body > *:not(#printSheet) { display: none !important; }
  html, body { background: #fff !important; height: auto; }
  #printSheet.is-printing { display: block; }

  .pr-sheet {
    color: #000;
    font-family: var(--font);
    font-size: 11pt;
    line-height: 1.4;
    padding: 0;
  }
  .pr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; border-bottom: 2px solid #000; padding-bottom: 6pt; margin-bottom: 10pt; }
  .pr-plan { font-size: 9pt; letter-spacing: 0.12em; text-transform: uppercase; color: #444; }
  .pr-title { margin: 2pt 0 0; font-size: 17pt; font-weight: 700; }
  .pr-trade { font-size: 13pt; font-weight: 700; }
  .pr-intro { font-size: 9.5pt; color: #333; margin: 0 0 8pt; }
  .pr-areas { font-size: 9.5pt; margin: 0 0 10pt; }

  .pr-meta { width: 100%; border-collapse: collapse; margin-bottom: 10pt; }
  .pr-meta th { text-align: left; font-size: 8.5pt; letter-spacing: 0.06em; text-transform: uppercase; color: #444; font-weight: 700; padding: 3pt 6pt 3pt 0; vertical-align: bottom; width: 1%; white-space: nowrap; }
  .pr-meta td { border-bottom: 1px solid #000; padding: 3pt 10pt 3pt 0; font-size: 11pt; }
  .pr-meta td.fill { min-width: 120pt; }

  .pr-job { margin-bottom: 12pt; page-break-inside: avoid; }
  .pr-job h2 { font-size: 12.5pt; margin: 0 0 3pt; font-weight: 700; }
  .pr-desc { font-size: 9.5pt; color: #333; margin: 0 0 5pt; }

  /* fixed layout so every job's table lines up with the one above it */
  .pr-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
  .pr-table th { text-align: left; font-size: 8.5pt; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1.5px solid #000; padding: 3pt 4pt; }
  .pr-table td { border-bottom: 1px solid #999; padding: 6pt 4pt; font-size: 10.5pt; vertical-align: top; overflow-wrap: break-word; }
  .pr-table .n { width: 16pt; color: #666; }
  .pr-table .d { width: 38pt; text-align: center; }
  .pr-table th:nth-child(4) { width: 23%; }
  .pr-table th:nth-child(5) { width: 27%; }

  .pr-total { margin-top: 10pt; font-size: 11.5pt; font-weight: 700; border-top: 2px solid #000; padding-top: 6pt; }
  .pr-fill .pr-rule { display: inline-block; border-bottom: 1px solid #000; min-width: 220pt; }
  .pr-fill .pr-rule.short { min-width: 70pt; }

  @page { margin: 14mm; }
}

/* ============================================= hidden-state hard stop ==== */
/* .panel{display:flex} and .modal{display:grid} are author rules, so they
   beat the UA stylesheet's [hidden]{display:none}. Without this, a closed
   panel/modal stays painted: the modal covers the viewport with its
   backdrop blur and 70% wash, and its pointer-events swallow every click
   on the board. Keep this last and keep the !important. */
[hidden] { display: none !important; }