/* Scheduling workbench. Builds on nocturne.css (buttons, fields, dialog) and
   app.css (the status colours, shared with the public grid so a cell means the
   same thing in both places). */

:root {
  --wb-name: 124px;
  --wb-cell: 23px;
  --wb-bar: 40px;

  /* Column delineation, weakest to strongest. Three weights because the
     boundaries mean different things: an ordinary day, a Wednesday changeover,
     and the start of a month. */
  --rule-day: color-mix(in srgb, var(--color-text) 9%, transparent);
  --rule-wed: color-mix(in srgb, var(--color-text) 30%, transparent);
  --rule-month: color-mix(in srgb, var(--color-accent) 60%, transparent);
}

body.wb {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* ── command bar ──────────────────────────────────────── */

.wb-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  height: var(--wb-bar);
  flex: none;
  border-bottom: 1px solid var(--color-divider);
}

.wb-brand { display: flex; align-items: baseline; gap: 8px; flex: none; }
.wb-brand .tail-sub { font-size: 9px; }

.wb-detail {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.wb-actions { margin-left: auto; display: flex; align-items: center; gap: 5px; flex: none; }
.wb-sep { width: 1px; height: 20px; background: var(--color-divider); margin: 0 3px; }

.btn.wb-btn { padding: 3px 9px; font-size: 12px; }

/* status chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.05em;
  border: 1px solid var(--color-divider);
  white-space: nowrap;
}

.chip-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip-saved { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.chip-dirty { color: var(--color-accent); border-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.chip-error { color: #f2a2a2; border-color: #b45b5b; background: color-mix(in srgb, #b45b5b 16%, transparent); }

/* ── palette strip ────────────────────────────────────── */

.wb-palette {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  flex: none;
  border-bottom: 1px solid var(--color-divider);
}

.wb-eyebrow {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
  flex: none;
}

.palette-row { display: flex; gap: 4px; flex: none; }

.palette-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--color-divider);
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
  white-space: nowrap;
}

.palette-btn:hover { border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); }
.palette-btn.is-active {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-text);
}
.palette-btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.palette-btn .sw {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 17px;
  border-radius: 2px;
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.palette-btn .pk { font-size: 9px; opacity: 0.5; }

.lock-btn { flex: none; }
.lock-btn.is-active {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-text);
}

/* Names the column under the cursor, so the highlight is never ambiguous. */
.wb-readout {
  margin-left: auto;
  flex: none;
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 2px 10px;
  border-radius: 3px;
  white-space: nowrap;
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent);
}

.wb-readout[hidden] { display: none; }
.wb-readout + .wb-hint { margin-left: 10px; }

.wb-hint {
  margin-left: auto;
  min-width: 0;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: color-mix(in srgb, var(--color-text) 32%, transparent);
}

/* ── body ─────────────────────────────────────────────── */

.wb-body { flex: 1; display: flex; min-height: 0; }
.wb-timeline { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.wb-scroller { flex: 1; overflow: auto; position: relative; }

.wb-board {
  position: relative;
  width: max-content;
  min-width: 100%;
  padding-bottom: 20px;
}

.wb-row {
  display: grid;
  grid-template-columns: var(--wb-name) repeat(var(--wb-days), var(--wb-cell));
  align-items: stretch;

  /* A hairline down every day boundary, running through all rows. It is
     painted on the row rather than the cell so an opaque ON cell cannot hide
     it: cells are 1px narrower than their column, and the rule sits in that
     gap. */
  background-image: repeating-linear-gradient(to right,
    transparent 0 calc(var(--wb-cell) - 1px),
    var(--rule-day) calc(var(--wb-cell) - 1px) var(--wb-cell));
  background-position: var(--wb-name) 0;
  background-size: calc(100% - var(--wb-name)) 100%;
  background-repeat: no-repeat;
}

.wb-name {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--color-bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2px 8px 2px 0;
  border-right: 1px solid var(--color-divider);
}

.wb-name b { font-family: var(--font-heading); font-weight: 500; font-size: 12.5px; }
.wb-name span { font-size: 8.5px; letter-spacing: 0.1em; opacity: 0.5; }

/* rulers */
/* The month ruler labels spans, so per-day hairlines there would only add
   noise. */
.wb-months {
  position: sticky;
  top: 0;
  z-index: 4;
  background-image: none;
  background-color: var(--color-bg);
}
.wb-month {
  grid-row: 1;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 0 4px 5px;
  color: color-mix(in srgb, var(--color-text) 42%, transparent);
  border-left: 1px solid var(--color-divider);
  white-space: nowrap;
  overflow: hidden;
}

.wb-days { position: sticky; top: 24px; z-index: 4; background-color: var(--color-bg); }
.wb-days .wb-name b { font-size: 9px; letter-spacing: 0.06em; opacity: 0.55; font-family: var(--font-body); }

.wb-day {
  text-align: center;
  padding: 2px 0 3px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.wb-day i { display: block; font-style: normal; font-size: 7.5px; opacity: 0.42; }
.wb-day b { display: block; font-family: var(--font-heading); font-weight: 500; font-size: 10px; }
.wb-day.is-today { color: var(--color-accent); }
.wb-day.is-outside b, .wb-day.is-outside i { opacity: 0.28; }

/* Wednesday — where blocks change over — and the first of the month.
   Drawn as an inset shadow on the element itself so it sits on top of even a
   solid ON cell. */
.is-wed { box-shadow: inset 1px 0 0 var(--rule-wed); }
.is-month-start { box-shadow: inset 2px 0 0 var(--rule-month); }
.wb-cell.is-wed.is-today { box-shadow: inset 1px 0 0 var(--rule-wed), 0 0 0 1.5px var(--color-accent); }
.wb-cell.is-month-start.is-today { box-shadow: inset 2px 0 0 var(--rule-month), 0 0 0 1.5px var(--color-accent); }

/* The hovered column, tinted across every row at once. One moving overlay
   rather than a class on 1352 cells. */
.wb-hovercol {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--wb-cell);
  z-index: 2;
  pointer-events: none;
  background: color-mix(in srgb, var(--color-accent) 13%, transparent);
  box-shadow: inset 1px 0 0 var(--color-accent), inset -1px 0 0 var(--color-accent);
}

.wb-hovercol[hidden] { display: none; }

.wb-day.is-hovered {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 18%, transparent);
  border-radius: 2px 2px 0 0;
}

.wb-day.is-hovered b { font-weight: 700; }

/* cells */
.wb-pilot { margin-top: 2px; }

.wb-cell {
  height: 24px;
  margin: 1px 1px 1px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 2px;
  cursor: crosshair;
  user-select: none;
  position: relative;
}

.wb-cell:hover { filter: brightness(1.25); }
.wb-cell.is-today { box-shadow: 0 0 0 1.5px var(--color-accent); }
.wb-cell.is-outside { opacity: 0.5; }
.wb-cell.is-selected { outline: 2px solid var(--color-accent); outline-offset: -1px; z-index: 2; }

/* A locked day carries a corner tick: the generator may not touch it. */
.wb-cell.is-locked::after {
  content: '';
  position: absolute;
  top: 1px;
  right: 1px;
  width: 0;
  height: 0;
  border-top: 5px solid var(--color-accent);
  border-left: 5px solid transparent;
}

@keyframes wb-flash {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50% { box-shadow: 0 0 0 2px var(--color-accent); }
}
.wb-cell.is-flash { animation: wb-flash 0.4s ease-in-out 3; }

/* aircraft */
.wb-aircraft { margin-top: 6px; }
.wb-acslot {
  grid-row: 1;
  height: 20px;
  margin: 1px 1px 1px 0;
  border-radius: 2px;
  background: color-mix(in srgb, var(--color-text) 3%, transparent);
}

.wb-acseg {
  grid-row: 1;
  height: 20px;
  margin: 1px 1px 1px 0;
  display: flex;
  align-items: center;
  padding-left: 5px;
  border-radius: 2px;
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wb-acseg.trip {
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  box-shadow: inset 0 0 0 1px var(--color-accent-500);
  color: var(--color-accent-200);
}

.wb-acseg.mnt {
  background: repeating-linear-gradient(90deg,
    color-mix(in srgb, var(--color-text) 10%, transparent) 0 4px, transparent 4px 8px);
  box-shadow: inset 0 0 0 1px var(--color-neutral-700);
  color: var(--color-neutral-300);
}

.wb-todayline {
  position: absolute;
  top: 24px;
  bottom: 0;
  width: 1px;
  background: color-mix(in srgb, var(--color-accent) 55%, transparent);
  box-shadow: 0 0 8px 1px color-mix(in srgb, var(--color-accent) 35%, transparent);
  pointer-events: none;
  z-index: 1;
}

.wb-empty { padding: 40px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }

/* ── rail ─────────────────────────────────────────────── */

/* Ordered ahead of the timeline rather than moved in the markup, so the reading
   order for a screen reader still runs schedule-then-controls. */
.wb-rail {
  order: -1;
  width: 320px;
  flex: none;
  border-right: 1px solid var(--color-divider);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* Each panel is a separate feature, so the rule between two of them is heavier
   than any rule used inside one — otherwise a panel's last row and the next
   panel's header read as the same list. The band carries the weight; the
   hairline on top of it keeps the edge crisp. */
.panel { border-bottom: 0; }

.panel + .panel {
  border-top: 1px solid color-mix(in srgb, var(--color-text) 30%, transparent);
  box-shadow: inset 0 5px 0 0 color-mix(in srgb, var(--color-text) 10%, transparent);
}

/* The header is a bar, not a caption: tinted, brighter than the body text
   around it, and holding the section's own controls. */
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  margin-top: 5px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
  border-bottom: 1px solid var(--color-divider);
}

/* The first panel has no band above it, so it needs no room for one. */
.panel:first-child .panel-head { margin-top: 0; }

.badge {
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--color-divider);
  text-transform: none;
}

.badge-ok { color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.badge-warn { color: var(--st-train-text); border-color: var(--st-train-line); }
.badge-error { color: #f2a2a2; border-color: #b45b5b; }

.fix-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 8px 11px;
  border-bottom: 1px solid var(--color-divider);
  background: color-mix(in srgb, #b45b5b 8%, transparent);
}

.fix-bar[hidden] { display: none; }

.input.fix-mode {
  min-height: 26px;
  font-size: 11px;
  padding: 2px 6px;
  flex: 1;
  min-width: 0;
}

.sw-clear {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-text) 22%, transparent);
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  background: transparent;
}

.panel-body { display: flex; flex-direction: column; }
.findings { max-height: 46vh; overflow-y: auto; }

.finding {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  text-align: left;
  font: inherit;
  padding: 7px 11px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 6%, transparent);
  cursor: pointer;
  color: inherit;
}

.finding:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.finding:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.finding .sev {
  flex: none;
  font-size: 8px;
  letter-spacing: 0.08em;
  padding: 2px 5px;
  border-radius: 2px;
  margin-top: 1px;
}

.finding-error .sev { background: color-mix(in srgb, #b45b5b 30%, transparent); color: #ffd9d9; }
.finding-warning .sev { background: color-mix(in srgb, var(--st-train-line) 25%, transparent); color: var(--st-train-text); }
.finding .txt { font-size: 11.5px; line-height: 1.4; text-wrap: pretty; }

.findings-empty {
  padding: 11px;
  font-size: 11.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  text-wrap: pretty;
}

.sel-info { padding: 10px 11px; gap: 4px; font-size: 11.5px; line-height: 1.5; }
.sel-line b { font-weight: 600; }
.sel-line.muted { color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.sel-lock { color: var(--color-accent); }

/* ── history dialog ───────────────────────────────────── */

.dialog-backdrop[hidden] { display: none; }
.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog { width: min(620px, 92vw); max-height: 80vh; display: flex; flex-direction: column; }
.dialog-body { overflow-y: auto; }
.history-list { display: flex; flex-direction: column; }

.history-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

/* ── generator panel ──────────────────────────────────── */

#genForm, #genResult, #genWorking { padding: 10px 11px; gap: 9px; }
#genForm[hidden], #genResult[hidden], #genWorking[hidden] { display: none; }

.gen-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gen-row .field label { font-size: 10px; letter-spacing: 0.08em; }
.gen-row .input { min-height: 30px; font-size: 12px; }

.gen-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.gen-note {
  font-size: 10.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  text-wrap: pretty;
}

.gen-continuity {
  font-size: 10.5px;
  line-height: 1.5;
  padding: 7px 9px;
  border-radius: 3px;
  text-wrap: pretty;
}

.gen-continuity[hidden] { display: none; }

.gen-continuity.is-ok {
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
}

.gen-continuity.is-warn {
  color: #f0d9a8;
  background: color-mix(in srgb, var(--st-train-line) 12%, transparent);
  border-left: 2px solid var(--st-train-line);
}

.linkish {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-accent);
  text-decoration: underline;
  cursor: pointer;
}

.linkish:hover { color: var(--color-accent-300); }

.gen-blocks-wrap summary {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  padding: 4px 0;
}

.gen-blocks { max-height: 30vh; overflow-y: auto; }

.gb-row {
  display: grid;
  grid-template-columns: 26px 40px 1fr 30px 34px;
  gap: 4px;
  align-items: center;
  font-size: 10px;
  padding: 2px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 5%, transparent);
}

.gb-role { color: color-mix(in srgb, var(--color-text) 38%, transparent); letter-spacing: 0.06em; }
.gb-span { color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.gb-days { text-align: right; font-variant-numeric: tabular-nums; }
.gb-flag { text-align: right; color: var(--color-accent-300); font-size: 9px; }
.gb-off .gb-flag { color: color-mix(in srgb, var(--st-train-line) 90%, transparent); }

.gen-working { font-size: 12px; }

.gen-bar {
  height: 2px;
  background: color-mix(in srgb, var(--color-text) 10%, transparent);
  overflow: hidden;
  margin-top: 8px;
}

.gen-bar span {
  display: block;
  width: 30%;
  height: 100%;
  background: var(--color-accent);
  animation: wb-sweep 1.1s linear infinite;
}

@keyframes wb-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

.gen-summary { font-size: 11.5px; line-height: 1.5; }
.gen-summary .muted { color: color-mix(in srgb, var(--color-text) 45%, transparent); font-size: 10.5px; }

.gen-eyebrow {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
  margin-top: 4px;
}

.gen-scores { display: flex; flex-direction: column; gap: 5px; }

.gen-score {
  display: grid;
  grid-template-columns: 22px 1fr 46px 34px;
  gap: 6px;
  align-items: center;
  font-size: 10.5px;
}

.gs-key { color: color-mix(in srgb, var(--color-text) 40%, transparent); letter-spacing: 0.06em; }
.gs-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gs-bar {
  height: 4px;
  background: color-mix(in srgb, var(--color-text) 10%, transparent);
  border-radius: 2px;
  overflow: hidden;
}

.gs-bar span { display: block; height: 100%; background: var(--color-accent); }
.gs-val { text-align: right; font-variant-numeric: tabular-nums; }
.gs-detail { grid-column: 2 / -1; font-size: 9.5px; color: color-mix(in srgb, var(--color-text) 42%, transparent); }

.gen-total {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--color-text) 10%, transparent);
  font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}

.gen-weights summary {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  padding: 2px 0;
}

.weight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin: 6px 0; }

.weight-field { display: flex; flex-direction: column; gap: 2px; }
.weight-field span { font-size: 8.5px; letter-spacing: 0.04em; text-transform: capitalize; opacity: 0.6; }
.weight-field .input { min-height: 24px; font-size: 11px; padding: 2px 5px; }

/* proposed rows in the grid */
.wb-proposed { margin-bottom: 4px; }
.wb-proposed .wb-name b { font-size: 10px; font-weight: 400; opacity: 0.6; font-family: var(--font-body); }

.wb-propcell {
  height: 15px;
  font-size: 7px;
  cursor: default;
  opacity: 0.9;
}

.wb-propcell[data-status='none'] { background: transparent; box-shadow: none; }
.wb-propcell.is-change { cursor: pointer; box-shadow: inset 0 0 0 1px var(--color-accent); }
.wb-propcell.is-change:hover { filter: brightness(1.4); box-shadow: inset 0 0 0 1.5px var(--color-accent); }

/* ── trip import ──────────────────────────────────────── */

.imp-lede {
  font-size: 11.5px;
  line-height: 1.55;
  margin: 0 0 10px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
  text-wrap: pretty;
}

.imp-text {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.4;
  resize: vertical;
}

.imp-summary { font-size: 12px; line-height: 1.55; margin-bottom: 10px; }
.imp-summary .muted { font-size: 10.5px; color: color-mix(in srgb, var(--color-text) 48%, transparent); }

.imp-problem {
  font-size: 11px;
  padding: 6px 9px;
  margin-bottom: 6px;
  border-radius: 3px;
  border-left: 2px solid var(--st-train-line);
  background: color-mix(in srgb, var(--st-train-line) 12%, transparent);
  color: #f0d9a8;
}

.imp-problem.imp-error { border-left-color: #b45b5b; background: color-mix(in srgb, #b45b5b 14%, transparent); color: #f2c4c4; }

.imp-diff { display: flex; flex-direction: column; gap: 12px; max-height: 44vh; overflow-y: auto; }

.imp-head {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: 2px;
}

.imp-head span { opacity: 0.6; }
.imp-section-remove .imp-head { color: #f2a2a2; border-bottom-color: #6d3a3a; }

.imp-row {
  display: grid;
  grid-template-columns: 16px 62px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 5px 0;
  font-size: 11.5px;
  cursor: pointer;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 5%, transparent);
}

.imp-row:hover { background: color-mix(in srgb, var(--color-accent) 7%, transparent); }
.imp-ref { font-weight: 600; font-variant-numeric: tabular-nums; }
.imp-span { color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.imp-route {
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-accent-300);
  margin-left: 6px;
}

.imp-was, .imp-meta { font-size: 10px; color: color-mix(in srgb, var(--color-text) 45%, transparent); text-align: right; }
.imp-section-remove .imp-meta { color: #d99; }

.imp-warn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 5px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  background: var(--st-train-line);
  color: #2a2100;
  cursor: help;
}

/* ── crew requests ────────────────────────────────────── */

.req-pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  height: 15px;
  margin-left: 5px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  background: var(--color-accent);
  color: #161826;
}

.req-pip[hidden] { display: none; }

.req-list { display: flex; flex-direction: column; max-height: 52vh; overflow-y: auto; }

.req-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.req-row.is-pending { align-items: center; }
.req-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.req-main b { font-size: 12.5px; font-weight: 500; }
.req-main .muted { font-size: 10.5px; color: color-mix(in srgb, var(--color-text) 48%, transparent); }

.req-impact {
  margin-top: 4px;
  font-size: 10.5px;
  padding: 4px 7px;
  border-radius: 3px;
  border-left: 2px solid var(--st-train-line);
  background: color-mix(in srgb, var(--st-train-line) 12%, transparent);
  color: #f0d9a8;
}

.req-impact.req-clean {
  border-left-color: color-mix(in srgb, var(--color-text) 25%, transparent);
  background: color-mix(in srgb, var(--color-text) 5%, transparent);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.req-status {
  flex: none;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-divider);
  align-self: center;
}

.req-approved { color: #a8dcc0; border-color: #4d7a63; }
.req-denied { color: #f2a2a2; border-color: #b45b5b; }
.req-pending { color: var(--color-accent); border-color: var(--color-accent); }

/* crew request form */
.req-form { max-width: 620px; }
.req-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.req-form .field label { font-size: 10.5px; letter-spacing: 0.06em; }

/* trips dialog */
.trip-form { padding-bottom: 12px; border-bottom: 1px solid var(--color-divider); margin-bottom: 10px; }

.trip-form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

@media (max-width: 620px) {
  .trip-form-row { grid-template-columns: 1fr 1fr; }
}

.trip-form .field label { font-size: 10px; letter-spacing: 0.08em; }
.trip-form .input { min-height: 30px; font-size: 12px; }

.trip-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.trip-hint { font-size: 10.5px; }

.trip-error {
  margin-top: 8px;
  padding: 7px 9px;
  border-left: 2px solid #b45b5b;
  background: color-mix(in srgb, #b45b5b 14%, transparent);
  font-size: 11.5px;
  color: #f2c4c4;
}

.trip-error[hidden] { display: none; }

.trip-list { display: flex; flex-direction: column; max-height: 40vh; overflow-y: auto; }

.trip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.trip-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.trip-main b { font-size: 12.5px; font-weight: 500; }
.trip-main .muted { font-size: 10.5px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }

.history-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.history-main b { font-size: 12.5px; font-weight: 500; }
.history-main .muted { font-size: 10.5px; color: color-mix(in srgb, var(--color-text) 45%, transparent); }

/* ── login ────────────────────────────────────────────── */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.login-error {
  margin-bottom: 12px;
  padding: 8px 10px;
  border-left: 2px solid #b45b5b;
  background: color-mix(in srgb, #b45b5b 14%, transparent);
  font-size: 12px;
  color: #f2c4c4;
}

.login-foot {
  margin-top: 16px;
  font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.login-foot a { color: var(--color-accent-300); }

/* ── narrow screens ───────────────────────────────────── */

@media (max-width: 900px) {
  .wb-rail { display: none; }
  .wb-hint { display: none; }
}

/* ── crew accounts ─────────────────────────────────────────
   No public sign-up exists, so this panel is the only route to an account. */

.accounts { display: flex; flex-direction: column; gap: 10px; }

.acct {
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.acct:last-child { border-bottom: 0; }

.acct-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.acct-who { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.acct-who b { font-family: var(--font-heading); font-weight: 500; font-size: 13px; }
.acct-role { font-size: 9px; letter-spacing: 0.1em; color: color-mix(in srgb, var(--color-text) 45%, transparent); }

.acct-state {
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.acct-state.is-on { color: var(--color-accent); }
.acct-state.is-wait { color: var(--st-train-text); }

.acct-email {
  font-size: 11px;
  margin: 2px 0 6px;
  word-break: break-all;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.acct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.acct-note { font-size: 10px; line-height: 1.4; color: color-mix(in srgb, var(--color-text) 45%, transparent); }

/* Shown once, at the moment the invite is issued — only the token's hash is
   stored, so there is nothing to show again afterwards. */
.acct-link {
  margin-top: 8px;
  padding: 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, transparent);
}
.acct-link-note { font-size: 10px; line-height: 1.45; color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.acct-link-row { display: flex; gap: 4px; margin: 6px 0 4px; }
.acct-link-input { flex: 1 1 auto; min-width: 0; font-size: 10px; padding: 3px 6px; }

/* The offer to move the committed range forward — shown only when the saved
   schedule already runs past it. */
.hz-offer {
  margin-top: 8px;
  padding: 8px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--st-train-line) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-train-line) 40%, transparent);
}
.hz-offer-text {
  font-size: 10px;
  line-height: 1.45;
  margin-bottom: 6px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

/* ── crew member editing ────────────────────────────────── */

.btn.btn-danger {
  background: color-mix(in srgb, var(--color-danger, #c0455a) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-danger, #c0455a) 60%, transparent);
  color: color-mix(in srgb, var(--color-danger, #c0455a) 92%, white 40%);
}
.btn.btn-danger:hover { background: color-mix(in srgb, var(--color-danger, #c0455a) 30%, transparent); }
.btn.btn-danger:disabled { opacity: 0.4; pointer-events: none; }

.crew-check {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 10px 0 4px;
  font-size: 11px;
  line-height: 1.4;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.crew-check input { margin-top: 1px; flex: none; }

/* Kept visually apart from the ordinary fields: these two buttons are the only
   ones in the workbench that destroy something. */
.crew-danger {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--color-divider);
}
.crew-danger-title {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}

/* Says when the roster has drifted away from what the generator can solve. */
.crew-warn {
  margin-bottom: 8px;
  padding: 7px 8px;
  border-radius: 4px;
  font-size: 10px;
  line-height: 1.45;
  background: color-mix(in srgb, var(--st-train-line) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-train-line) 40%, transparent);
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

.acct.is-off { opacity: 0.55; }
.acct-edit { margin-left: auto; }

/* ── sending the schedule ───────────────────────────────── */

.notify { display: flex; flex-direction: column; gap: 8px; }

.notify-eyebrow {
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
}

.notify-list { display: flex; flex-direction: column; gap: 3px; }

.notify-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 7%, transparent);
}
.notify-row:last-child { border-bottom: 0; }
.notify-who { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.notify-who b { font-size: 11.5px; font-weight: 500; }
.notify-email {
  font-size: 10px;
  word-break: break-all;
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
}

.notify-add { display: flex; gap: 4px; }
.notify-add .input { flex: 1 1 auto; min-width: 0; font-size: 11px; padding: 3px 6px; }

/* Month picker in the send dialog. */
.send-months { display: flex; flex-wrap: wrap; gap: 4px; }
.send-month {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  border: 1px solid var(--color-divider);
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}
.send-month:has(input:checked) {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
  color: var(--color-text);
}

.send-result {
  margin-top: 10px;
  padding: 7px 8px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.45;
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 35%, transparent);
}