/* Trackside theme — "pit wall" layer on top of Pico.
   Pico handles base light/dark chrome via [data-theme]; this file adds the
   signal-orange accent, condensed/mono type, and the assignment-board components.
   Board colours adapt to the theme by reusing Pico's surface variables. */

:root {
  --ts-orange: #FF5A1F;
  --ts-orange-strong: #E64A12;
  --ts-accent2: #FF5A1F;          /* secondary accent (light: orange) */
  --ts-bar: #1B1E26;              /* pit-board header strip */
  --ts-bar-ink: #FFFFFF;
  --ts-lead-tint: #FFF1EB;        /* Lead "pole" row background */
  --ts-row-hover: rgba(0, 0, 0, .04);
  --ts-warn: #B8860B;
  --ts-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --ts-cond: "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --ts-grip: #c2c8d0;             /* quiet glyph colour for chip icons */
  /* "Line of motion" — one shared diagonal slant (12° off vertical = the FIA 78°
     from horizontal). Used by the topnav signature accent and the .ptab tabs. */
  --ts-motion-skew: -12deg;
  --ts-hit: #2563EB;              /* search-match highlight + drop target — blue, the "interaction" signal */
  --ts-hit-tint: #E8F0FE;
  /* Lead "pole" — a positive green so the LI row reads as *good*, not as the orange
     that a chief mistook for an error. Also carries the success banner. */
  --ts-pole: #1F9E5A;
  --ts-pole-tint: #E7F6EE;
  /* Track-side zone tabs — two distinct hues so DL/DR never read as the same tab. */
  --ts-side-l: #2F8F8B;           /* Driver's Left — teal */
  --ts-side-r: #7C4DBC;           /* Driver's Right — violet */

  /* Pin Pico's base font size: it otherwise scales 100%→131.25% with viewport
     width, ballooning the whole app on a desktop. Hold it at a 16px base so the
     px-tuned board components read at the size they were designed for. */
  --pico-font-size: 100%;

  /* Tie Pico's primary (buttons, links, focus rings) to the marshal orange. */
  --pico-primary: var(--ts-orange);
  --pico-primary-background: var(--ts-orange);
  --pico-primary-hover: var(--ts-orange-strong);
  --pico-primary-hover-background: var(--ts-orange-strong);
  --pico-primary-focus: rgba(255, 90, 31, .35);
  --pico-primary-inverse: #0b0c10;
}

[data-theme="dark"] {
  --ts-accent2: #00B4E1;          /* FIA Bright Blue (Pantone 298) — telemetry accent on dark */
  --ts-bar: #0A0C10;
  --ts-lead-tint: rgba(255, 90, 31, .14);
  --ts-row-hover: rgba(255, 255, 255, .05);
  --ts-warn: #F5B301;
  --ts-grip: #4a525d;
  --ts-hit: #5B9DFF;
  --ts-hit-tint: rgba(91, 157, 255, .20);
  --ts-pole: #34D17F;
  --ts-pole-tint: rgba(31, 158, 90, .18);
}

/* Condensed display face for headings app-wide (subtle brand cohesion). */
h1, h2, h3 { font-family: var(--ts-cond); letter-spacing: .01em; }

.theme-toggle {
  width: auto;
  margin: 0;
  font-family: var(--ts-cond);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  font-size: .72rem;
  padding: .4rem .8rem;
}

/* ---- control-panel shell: global top nav + event sub-nav --------------- */
/* Full-bleed pit-wall strip. The inner wrappers track Pico's container width so
   the nav lines up with page content below. */
.topnav {
  background: var(--ts-bar);
  color: var(--ts-bar-ink);
  border-bottom: 3px solid var(--ts-orange);
}
/* The inner wrappers carry Pico's `container` class so they track the SAME
   responsive width + gutters as <main class="container"> — nav lines up with page
   content. Here we only add the flex layout (don't re-set width/margin/padding). */
.topnav-inner,
.subnav-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
}
.topnav-inner { min-height: 54px; }
.topnav .brand {
  font-family: var(--ts-cond);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  font-size: 20px;
  color: var(--ts-bar-ink);
  text-decoration: none;
  white-space: nowrap;
}
/* the brand tick is the one "line of motion" signature — a slanted orange bar */
.topnav .brand .mark {
  color: var(--ts-orange);
  display: inline-block;
  transform: skewX(var(--ts-motion-skew));
  transform-origin: bottom;
}
.topnav-links { display: flex; gap: 2px; flex-wrap: wrap; }
.topnav-links a {
  font-family: var(--ts-cond);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px 6px 0 0;
  border-bottom: 2px solid transparent;
}
.topnav-links a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.topnav-links a[aria-current="page"] { color: #fff; border-bottom-color: var(--ts-orange); }
/* "Setup" disclosure — a dark pit-wall popover, not Pico's white form control.
   We keep Pico's `.dropdown` (for the absolute, toggling panel) but reskin it: the
   closed summary is indistinguishable from a top-nav link, the open panel reads as part
   of the strip, and FIA orange is the only accent. Selectors are scoped `.topnav
   .setup-menu …:not([role])` so they out-rank Pico's own `nav details.dropdown
   summary:not([role])` (0,2,3) without resorting to !important. */
.topnav .setup-menu {
  display: inline-block;
  position: relative;
  margin: 0;            /* kill Pico's negative nav margin that floats it off-baseline */
  padding: 0;
  vertical-align: middle;
}
.topnav .setup-menu > summary:not([role]) {
  height: auto;
  font-family: var(--ts-cond);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  font-size: 13px;
  color: rgba(255, 255, 255, .72);
  padding: 6px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  list-style: none;
  /* no line-height override: match the sibling nav <a> links so the flex row centers
     SETUP on the same baseline as CONTROL ROOM/BOARD (line-height:1 sat it too high). */
}
.topnav .setup-menu > summary:not([role]):hover { color: #fff; background: rgba(255, 255, 255, .07); }
.topnav .setup-menu[open] > summary:not([role]),
/* The summary marks the active *section* with aria-current="true", leaving the one
   true aria-current="page" to the active leaf link below (no duplicate "page"). */
.topnav .setup-menu > summary:not([role])[aria-current="true"] { color: #fff; }
.topnav .setup-menu > summary:not([role])[aria-current="true"] { border-bottom-color: var(--ts-orange); }
.topnav .setup-menu > summary::-webkit-details-marker { display: none; }
/* caret: replace Pico's floated, block-level chevron image with an inline
   right-pointing (>) currentColor triangle that rotates down when the menu opens.
   `display:inline-block` is load-bearing — Pico's `display:block` drops it to its own line. */
.topnav .setup-menu > summary::after {
  content: "";
  display: inline-block;
  float: none;
  width: 0; height: 0;
  margin: 0 0 0 7px;
  background: none;
  border: 4px solid transparent;
  border-left-color: currentColor;
  vertical-align: middle;
  transform: translateY(-1px);
  transition: transform .15s ease;
}
.topnav .setup-menu[open] > summary::after { transform: translateY(-1px) rotate(90deg); }
/* the menu: a dark panel elevated off the strip, FIA-orange accent on hover/current */
.topnav .setup-menu summary + ul {
  width: auto;
  min-width: 190px;
  margin-top: 6px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 8px;
  background: #21252f;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
.topnav .setup-menu summary + ul li { width: 100%; margin: 0; padding: 0; list-style: none; }
.topnav .setup-menu summary + ul li a {
  display: block;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  color: rgba(255, 255, 255, .82);
  font-family: var(--ts-cond);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  font-size: 12.5px;
  text-decoration: none;
}
.topnav .setup-menu summary + ul li a:hover,
.topnav .setup-menu summary + ul li a:focus-visible { background: rgba(255, 90, 31, .16); color: #fff; }
.topnav .setup-menu summary + ul li a[aria-current="page"]:not([aria-current="false"]) {
  color: var(--ts-orange);
  background: rgba(255, 90, 31, .10);
}
.topnav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.topnav-right .who {
  font-size: 12px;
  color: rgba(255, 255, 255, .6);
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Toggle + Sign out are a matched compact pair, legible on the dark strip.
   Sign out gets the toggle's sizing so it isn't a big Pico button beside a small one. */
.topnav .theme-toggle,
.topnav a[role="button"] {
  width: auto;
  margin: 0;
  font-family: var(--ts-cond);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  font-size: .72rem;
  padding: .4rem .8rem;
  border-color: rgba(255, 255, 255, .3);
  color: rgba(255, 255, 255, .85);
  background: transparent;
}
.topnav .theme-toggle:hover,
.topnav a[role="button"]:hover { border-color: var(--ts-orange); color: #fff; }

/* event sub-nav: pinned event name + Board/Posts tabs (the .days tab language) */
.subnav { background: var(--pico-card-background-color); border-bottom: 1px solid var(--pico-muted-border-color); }
.subnav-inner { min-height: 42px; }
.subnav .ev {
  font-family: var(--ts-cond);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  font-size: 14px;
  color: var(--pico-color);
  white-space: nowrap;
}
.subnav-tabs { display: flex; gap: 2px; }
.subnav-tabs a {
  font-family: var(--ts-cond);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  font-size: 12.5px;
  color: var(--pico-muted-color);
  text-decoration: none;
  padding: 7px 14px;
  border-radius: 6px 6px 0 0;
  border-bottom: 2px solid transparent;
}
.subnav-tabs a:hover { color: var(--pico-color); }
.subnav-tabs a[aria-current="page"] { color: var(--pico-color); border-bottom-color: var(--ts-orange); }

@media (max-width: 640px) {
  .topnav-right .who { display: none; }
}

/* ---- board page -------------------------------------------------------- */

/* The board is tuned in px to the approved mock (14.5px body / 29px h1). */
.board { font-size: 14.5px; line-height: 1.4; }
/* shared eyebrow (board + all .posts pages): mono, orange, wide-tracked */
.eyebrow {
  font-family: var(--ts-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ts-orange);
  font-weight: 600;
}
/* data-freshness badge — quiet mono; amber once past the sync cadence */
.sync-badge { display: inline-block; font-family: var(--ts-mono); font-size: 11.5px; color: var(--pico-muted-color); }
.sync-badge.stale { color: var(--ts-warn); font-weight: 700; }

.board h1 { font-size: 29px; text-transform: uppercase; letter-spacing: .02em; margin: .1em 0 .1em; }
.board > .muted { font-size: 13px; margin: 0 0 14px; }

/* Read-only board (a VIEWER, or anyone without board-edit rights on this event). The
   router already denies every mutation and the drag scripts aren't loaded (see
   board.html), so this only strips the now-dead edit affordances. The CSV link is an
   <a>, not a form, so it stays available. */
.board.readonly .toolbar .actions form,
.board.readonly .toolbar .actions details,
.board.readonly .post .add,
.board.readonly .make-lead-form,
.board.readonly .remove-form,
.board.readonly .legend { display: none !important; }

/* slim action bar under the title — the board leads, chrome stays compact */
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--pico-muted-border-color);
}
.toolbar .days { border-bottom: none; margin: 0; }
.toolbar .actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar form { margin: 0; }
.toolbar .actions a[role="button"],
.toolbar .actions button {
  width: auto;
  margin: 0;
  font-family: var(--ts-cond);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  font-size: 12.5px;
  padding: .45rem .8rem;
}

/* overflow menu (manage days, copy day, saved versions, bulk move) */
.more { position: relative; margin: 0; }   /* kill Pico's details margin-bottom (offsets flex centering) */
.more > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-family: var(--ts-cond);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  font-size: 12.5px;
  line-height: var(--pico-line-height, 1.5);
  color: var(--pico-muted-color);
  padding: .45rem .8rem;
  border: var(--pico-border-width, 1px) solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::marker { content: ""; }
.more > summary::after { display: none; }   /* drop Pico's floated chevron */
.more[open] > summary { color: var(--pico-color); border-color: var(--ts-orange); }
.more .more-panel {
  position: absolute;
  right: 0;
  z-index: 20;
  margin-top: 6px;
  width: min(360px, 86vw);
  padding: 12px;
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color);
  border-radius: 9px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .22);
}
.more .more-panel h3 {
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  margin: 10px 0 6px;
}
.more .more-panel h3:first-child { margin-top: 0; }
.more .more-panel table { font-size: 12.5px; margin: 0; }

/* inline warning strip (replaces the big empty-post card) */
.banner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 8px 12px;
  margin: 0 0 14px;
  /* default = a warning (e.g. "no marshals yet") → amber, not the orange that
     reads as an error elsewhere (feedback U3/U7: one colour per meaning). */
  border-left: 4px solid var(--ts-warn);
  background: rgba(248, 179, 0, .10);
  border-radius: 0 6px 6px 0;
}
/* success variant — e.g. after Auto-draft → positive green, matching the Lead pole */
.banner.ok { border-left-color: var(--ts-pole); background: var(--ts-pole-tint); }
/* neutral info — e.g. "no changes to save" → muted grey, never amber (a no-op
   isn't a warning; one colour per meaning, feedback U3/U7). */
.banner.info { border-left-color: var(--pico-muted-color); background: rgba(127, 127, 127, .10); }
/* split-pairing warning — same amber family as the default warning strip */
.banner.pair-warn { border-left-color: var(--ts-warn); background: rgba(248, 179, 0, .10); }
.pair-mark { margin-left: 4px; opacity: 0.85; }
.ts-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(12px);
  background: var(--ts-orange, #e8622c); color: #fff; padding: 10px 16px; border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.35); opacity: 0; transition: opacity .2s, transform .2s;
  z-index: 1000; max-width: 90vw; font-size: 0.95rem;
}
.ts-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.draft-hint { font-size: 12px; margin: -8px 0 14px; }

.legend { color: var(--pico-muted-color); font-size: 12px; margin: 18px 0 0; }

.days {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 2px solid var(--pico-muted-border-color);
  margin: 0 0 16px;
  padding: 0;
}
.days li { list-style: none; }
.days a {
  display: inline-block;
  font-family: var(--ts-cond);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  color: var(--pico-muted-color);
  padding: 8px 15px;
  border: 2px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  margin-bottom: -2px;
}
.days a[aria-current="page"] {
  color: var(--pico-color);
  background: var(--pico-card-background-color);
  border-color: var(--pico-muted-border-color);
  border-bottom: 2px solid var(--pico-card-background-color);
}
.days a[aria-current="page"]::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--ts-accent2);
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
}

.layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }

.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}

/* post = pit board */
.post {
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-card-border-color, var(--pico-muted-border-color));
  border-radius: 9px;
  overflow: hidden;
  margin: 0;
}
.post-bar {
  background: var(--ts-bar);
  color: var(--ts-bar-ink);
  display: flex;
  align-items: center;
  /* Never wrap a chip onto a second row — the name shrinks/ellipsizes instead, so the
     header stays one tidy line even on narrow rover cards (Roaming + No-LI together). */
  flex-wrap: nowrap;
  gap: 6px;
  padding: 9px 12px;
}
.post-name {
  font-family: var(--ts-cond);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
  font-size: 17px;
  margin: 0;
  white-space: nowrap;      /* keep "Rover 2" on one line */
  min-width: 0;             /* yield space to the chips … */
  overflow: hidden;
  text-overflow: ellipsis;  /* … truncating only if truly out of room */
}
.ptab {
  font-family: var(--ts-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .03em;
  padding: 3px 8px 3px 10px;
  color: #0b0c10;
  background: var(--ts-orange);
  /* leading edge slants to the shared line-of-motion angle (~12° off vertical) */
  clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%);
  white-space: nowrap;
  flex: 0 0 auto;           /* chips keep their size; the name shrinks instead */
}
.ptab.roam { background: var(--ts-accent2); }
/* DL / DR are distinct by BOTH colour (teal/violet) and shape (a direction arrow),
   so the two sides read apart even with colour-vision deficiency (U6). The arrows are
   decorative pseudo-content — the "DL"/"DR" text stays the label for screen readers. */
.ptab.side-dl { background: var(--ts-side-l); color: #0b0c10; }  /* dark on teal → ~4.9:1 */
.ptab.side-dr { background: var(--ts-side-r); color: #fff; }     /* white on violet → ~5.8:1 */
.ptab.side-dl::before { content: "\25c0\00a0"; }
.ptab.side-dr::after { content: "\00a0\25b6"; }
/* lead-less warning flag — amber on both themes, dark ink for contrast. Packs inline
   next to the Roaming/side chip (no forced right-push) and runs a touch tighter, so it
   fits on the header line instead of wrapping onto a second row on narrow rover cards. */
.ptab.no-li { background: var(--ts-warn); color: #1B1E26; }

/* crew list (startlist rows) */
.crew { list-style: none; margin: 0; padding: 0; min-height: 42px; }
.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  cursor: grab;
  border-bottom: 1px solid var(--pico-muted-border-color);
  background: var(--pico-card-background-color);
}
.chip:last-child { border-bottom: none; }
.chip:hover { background: var(--ts-row-hover); }
.chip .pos {
  font-family: var(--ts-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--pico-muted-color);
  width: 18px;
  flex: 0 0 auto;
  text-align: right;
}
.chip .nm { flex: 1; font-weight: 500; min-width: 0; }
/* Lead "pole" row — positive green, so it reads as a deliberate highlight rather
   than the orange a chief mistook for an error (feedback U7). */
.chip.lead { background: var(--ts-pole-tint); box-shadow: inset 4px 0 0 var(--ts-pole); }
.chip.lead .pos { color: var(--ts-pole); }
/* seated but application no longer approved — amber ring, same warning family */
.chip.lost-approval { box-shadow: 0 0 0 2px var(--ts-warn) inset; }

.role {
  font-family: var(--ts-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--ts-pole);   /* matches the green Lead pole */
  color: #0b0c10;               /* dark ink → ~6:1 on the green (WCAG AA) */
}
.badge {
  font-family: var(--ts-mono);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--pico-muted-border-color);
  color: var(--pico-muted-color);
}
.warn { color: var(--ts-warn); }

/* inline per-chip controls: unstyle Pico's button defaults */
.chip form { display: inline; margin: 0; }
.chip button.icon {
  width: auto;
  margin: 0;
  padding: 0 3px;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--ts-grip);
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
}
/* Always visible — the "make Lead" affordance shouldn't hide behind a hover (U5). */
.chip button.makelead { font-size: 13px; }
.chip button.icon:hover { color: var(--ts-orange); }

/* uniform chip: show only the controls that make sense for its container */
.paddock-list .crew-only { display: none; }
.crew .pool-only { display: none; }
.chip .role { display: none; }
.crew .chip.lead .role { display: inline-block; }
.crew .chip.lead button.makelead { display: none; }

/* add-from-paddock control at the foot of each post */
.add {
  display: flex;
  gap: 6px;
  padding: 7px;
  border-top: 1px dashed var(--pico-muted-border-color);
  margin: 0;
}
.add select {
  flex: 1;
  margin: 0;
  font-size: 12.5px;
  padding: 5px 8px;
  height: auto;
  --pico-form-element-spacing-vertical: 5px;
}
.add button {
  width: auto;
  margin: 0;
  font-family: var(--ts-cond);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  font-size: 12.5px;
  padding: 5px 13px;
}

/* paddock (pool) */
.paddock {
  position: sticky;
  top: 14px;
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-card-border-color, var(--pico-muted-border-color));
  border-radius: 9px;
  overflow: hidden;
}
.paddock > h2 {
  font-family: var(--ts-cond);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 15px;
  margin: 0;
  padding: 9px 12px;
  background: var(--ts-bar);
  color: var(--ts-bar-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.paddock .count { font-family: var(--ts-mono); font-size: 12px; color: var(--ts-accent2); }
.paddock-list { list-style: none; margin: 0; padding: 0; max-height: 72vh; overflow: auto; }
.paddock-empty { padding: 12px; }

/* pool search — revealed only when JS is active (.js added by board.js) */
.paddock-search { display: none; }
.js .paddock-search {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--pico-muted-border-color);
}
.paddock-search .pool-search {
  margin: 0;
  font-size: 13px;
  padding: 6px 9px;
  height: auto;
  --pico-form-element-spacing-vertical: 6px;
}
.paddock-search .filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-toggle {
  width: auto;
  margin: 0;
  font-family: var(--ts-cond);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  font-size: 11px;
  padding: .3rem .55rem;
  color: var(--pico-muted-color);
  background: transparent;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  cursor: pointer;
}
.filter-toggle[aria-pressed="true"] {
  color: var(--pico-color);
  border-color: var(--ts-orange);
  background: var(--ts-lead-tint);
}
.chip.is-hidden { display: none; }
/* Cross-board search: the match stays bright; everything else dims so it pops. */
.crew .chip, .post { transition: opacity .12s ease; }
/* Scoped to .crew so the class goes inert if a highlighted chip is dragged back
   into the pool (matches .crew .chip.dim), instead of leaving a stale outline. */
.crew .chip.search-hit {
  outline: 2px solid var(--ts-hit);
  outline-offset: -2px;
  background: var(--ts-hit-tint);
  box-shadow: inset 4px 0 0 var(--ts-hit);
  opacity: 1;
}
.crew .chip.dim { opacity: .25; }
.post.dim { opacity: .4; }
.paddock-hint {
  margin: 0;
  padding: 8px 12px;
  font-size: 12px;
  color: var(--pico-muted-color);
  border-top: 1px solid var(--pico-muted-border-color);
}

/* drag states (SortableJS default class names) */
.sortable-ghost { opacity: .35; }
.sortable-drag { box-shadow: 0 7px 20px rgba(255, 90, 31, .32); }
/* Drop target — blue (the interaction signal), not the orange lead-tint that read
   as an error. Dashed + container-scoped, so it never reads as the green Lead row
   or the solid-blue search outline (feedback U3). */
.drop-active {
  outline: 2px dashed var(--ts-hit);
  outline-offset: -3px;
  background: var(--ts-hit-tint);
}

@media (prefers-reduced-motion: reduce) {
  .sortable-drag { box-shadow: none; }
  .topnav .setup-menu > summary::after { transition: none; }
}

/* ---- manage posts: seamless timing-sheet ------------------------------ */
/* Rows read as plain text; a cell reveals its input only on hover/focus, so the
   list scans like a timing sheet instead of a wall of boxes. The add row stays
   visibly boxed as the one data-entry line. Capped width keeps the name column sane. */
.posts { font-size: 14.5px; line-height: 1.45; max-width: 840px; }
.posts h1 { font-size: 29px; text-transform: uppercase; letter-spacing: .02em; margin: .1em 0 .1em; }
.posts .sub { font-size: 13px; color: var(--pico-muted-color); margin: 0 0 18px; }
.posts .sub a { text-decoration: none; }

/* import panel — compact */
.posts .import { padding: 14px 16px; margin: 0 0 18px; }
.posts .import header { margin-bottom: 8px; }
.posts .import .file { display: block; font-size: 13px; color: var(--pico-muted-color); }
.posts .import button {
  width: auto;
  margin: 10px 0 0;
  font-family: var(--ts-cond);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  font-size: 12.5px;
  padding: .45rem .9rem;
}

/* the sheet — fixed layout, with EVERY column sized so the widths sum to the
   table width. If any column is left auto it becomes the slack sink and swallows
   the leftover space (the old POST→TYPE gap + stranded add-row inputs). */
.posts .sheet { width: 780px; max-width: 100%; border-collapse: collapse; margin: 0; table-layout: fixed; }
.posts .col-name { width: 216px; }
.posts .col-type { width: 128px; }
.posts .col-side { width: 96px; }
.posts .col-tgt  { width: 64px; }
.posts .col-crew { width: 64px; }
.posts .col-act  { width: 148px; }   /* 216+128+96+64+64+64+148 = 780 */

.posts .sheet thead th {
  font-family: var(--ts-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
  font-weight: 600;
  text-align: left;
  padding: 7px 10px;
  border-bottom: 2px solid var(--pico-muted-border-color);
}
.posts .c-crew { text-align: center; }
.posts .sheet tbody td {
  padding: 3px 6px;
  border-bottom: 1px solid var(--pico-muted-border-color);
  vertical-align: middle;
}
.posts .sheet tbody tr:hover { background: var(--ts-row-hover); }

/* Seamless controls: transparent at rest (read as text), revealed on row hover or
   focus. background-color only (not the shorthand) so Pico's select chevron stays. */
.posts .sheet input,
.posts .sheet select {
  margin: 0;
  width: 100%;
  height: 2.35rem;
  font-size: 15px;
  color: var(--pico-color);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  box-shadow: none;
}
.posts .sheet input { padding: 0 .45rem; }
/* Pico gives selects symmetric vertical padding; against our fixed height that
   pushes the value text low. Zero the vertical padding so it sits centered
   (keep the horizontal padding for the chevron). */
.posts .sheet select,
.posts .add-post select { padding-top: 0; padding-bottom: 0; }
.posts .sheet tbody tr:hover input,
.posts .sheet tbody tr:hover select,
.posts .sheet input:focus,
.posts .sheet select:focus {
  border-color: var(--pico-muted-border-color);
  background-color: var(--pico-background-color);
}
.posts .sheet th.c-tgt { text-align: center; }
.posts .sheet td.tgt input { font-family: var(--ts-mono); text-align: center; padding: 0; }
.posts .sheet td.crew {
  font-family: var(--ts-mono);
  text-align: center;
  font-size: 15px;
  color: var(--pico-color);
}
.posts .sheet td.crew.muted { color: var(--pico-muted-color); }
/* seated crew above the chief-set max — amber flag, same warning family as the board */
.posts .sheet td.crew.over { color: var(--ts-warn); font-weight: 700; }

/* actions cell — orange Save, quiet Delete */
.posts .sheet td.actions { white-space: nowrap; text-align: right; }
.posts .sheet td.actions form { display: none; }   /* empty form holders carry no UI */
.posts .sheet button.save,
.posts .sheet button.del {
  display: inline-block;
  width: auto;
  margin: 0;
  font-family: var(--ts-cond);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  font-size: 12.5px;
  padding: .35rem .8rem;
}
.posts .sheet button.del {
  margin-left: 6px;
  color: var(--pico-muted-color);
  background: transparent;
  border: 1px solid var(--pico-muted-border-color);
}
.posts .sheet button.del:hover {
  color: #fff;
  background: var(--ts-orange-strong);
  border-color: var(--ts-orange-strong);
}

.posts .sheet td.empty { text-align: center; color: var(--pico-muted-color); padding: 18px; }

/* add-post bar — full-width data-entry strip below the sheet (not a table row),
   so the fields are roomy and read clearly. Name field flexes to fill. */
.posts .add-post {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 780px;
  max-width: 100%;
  margin: 16px 0 0;
  padding: 14px;
  border-top: 2px solid var(--ts-orange);
  background: var(--ts-lead-tint);
  border-radius: 0 0 8px 8px;
}
.posts .add-post input,
.posts .add-post select {
  margin: 0;
  height: 2.55rem;
  font-size: 15px;
}
.posts .add-post .f-tgt  { width: 78px; text-align: center; font-family: var(--ts-mono); padding-left: .3rem; padding-right: .3rem; }
.posts .add-post .f-name { flex: 1; min-width: 0; }
.posts .add-post .f-type { width: 140px; }
.posts .add-post .f-side { width: 104px; }
.posts .add-post button {
  margin: 0;
  width: auto;
  white-space: nowrap;
  font-family: var(--ts-cond);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  font-size: 13.5px;
  padding: .5rem 1.1rem;
}

/* venues reuse the .posts timing-sheet; only the column widths differ (no
   pri/crew columns). Widths sum to the 780px sheet so nothing absorbs slack. */
.posts .col-vname    { width: 300px; }
.posts .col-vcity    { width: 180px; }
.posts .col-vcountry { width: 152px; }   /* 300+180+152+148 = 780 */
.posts .add-post .f-vcity    { width: 180px; }
.posts .add-post .f-vcountry { width: 152px; }

/* events sheet: name / venue (read-only) / season / actions */
.posts .col-ename   { width: 282px; }
.posts .col-evenue  { width: 200px; }
.posts .col-eseason { width: 94px; }
.posts .col-eact    { width: 204px; }   /* 282+200+94+204 = 780 */
.posts .sheet td.ro { color: var(--pico-muted-color); padding-left: .9rem; }
/* read-only value shown in place of an input (rows the user can't edit) */
.posts .sheet .roval { padding-left: .45rem; }
.posts .sheet .ro { color: var(--pico-muted-color); }
/* navigation links sit alongside Save in the actions cell, always visible */
.posts .sheet .rowlink {
  font-family: var(--ts-cond);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  font-size: 12.5px;
  text-decoration: none;
  margin-left: 12px;
}
.posts .add-post .f-evenue  { width: 200px; }
.posts .add-post .f-eseason { width: 112px; }

/* dashboard launchpad + disciplines reuse the sheet (name + actions / code) */
.posts .col-dname { width: 576px; }
.posts .col-dact  { width: 204px; }   /* 576+204 = 780 */
.posts .col-dcode { width: 204px; }
.posts .sheet td.evname { padding-left: .45rem; font-weight: 500; }

/* versions sheet: base / compare radios + version / saved / by / actions */
.posts .col-vbase  { width: 64px; }
.posts .col-vcmp   { width: 64px; }
.posts .col-vver   { width: 80px; }
.posts .col-vsaved { width: 200px; }
.posts .col-vby    { width: 184px; }
.posts .col-vvact  { width: 188px; }   /* 64+64+80+200+184+188 = 780 */

.col-pmembers { width: 420px; }
.col-pnote    { width: 240px; }
.col-pact     { width: 120px; }

.pairings .chip-static {
  display: inline-block; margin: 0 4px 4px 0; padding: 2px 8px;
  border-radius: 10px; font-size: 0.85rem;
  /* Light mode: a light pill with dark ink. The chip set only a (dark) background
     before and let the text inherit the page colour, so in light mode it rendered
     near-black ink on a near-black pill. Pin both so the names read in either theme. */
  background: #eceff3; color: #1b1e26;
}
[data-theme="dark"] .pairings .chip-static {
  background: var(--ts-rail, #1d2733); color: #e8edf3;
}
/* The shared `.posts .sheet td.actions form { display:none }` rule (line ~675) hides the
   posts page's empty form holders, but the pairings page's Delete button lives *inside*
   its form — so re-show it. `contents` drops the form box so the .rowlink button lays out
   like the adjacent Edit link. Compound .posts.pairings outranks the shared rule. */
.posts.pairings .sheet td.actions form { display: contents; }
.pairing-pick { list-style: none; padding: 0; max-height: 320px; overflow: auto;
  border: 1px solid var(--ts-line, #2a3744); border-radius: 6px; }
.pairing-pick li { padding: 4px 10px; }
.pairing-form input[type="text"], .pairing-form input[type="search"] { display: block; width: 100%; }
/* edit mode: make the prefilled builder visibly active (the Edit link jumps here via #builder) */
.pairing-form.editing { border-left: 3px solid var(--ts-accent2, #f60); padding-left: 14px; scroll-margin-top: 16px; }
#builder { scroll-margin-top: 16px; }
.posts .sheet td.ver { font-family: var(--ts-mono); font-weight: 700; padding-left: .9rem; }
.posts .sheet td.cmp { text-align: center; }
/* The seamless sheet-input style (transparent, full-width, tall) erases a radio, so
   restore a native control and tint it with the brand accent — these must read clearly. */
.posts .sheet td.cmp input[type="radio"] {
  appearance: auto;
  width: 18px;
  height: 18px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  accent-color: var(--ts-orange);
  cursor: pointer;
}

/* scroll the sheet rather than crush it on narrow screens */
@media (max-width: 840px) {
  .posts .sheet { display: block; overflow-x: auto; white-space: nowrap; min-width: 780px; }
}

/* version compare: name-level diff buckets (lead changes flagged first) */
.version-compare .cmp-note {
  border-left: 4px solid var(--ts-orange);
  background: var(--ts-lead-tint);
  padding: 12px 16px;
  border-radius: 6px;
}
.cmp-bucket { margin: 18px 0; }
.cmp-bucket h3 {
  font-family: var(--ts-cond);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 15px;
  margin: 0 0 6px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--pico-muted-border-color);
}
.cmp-bucket ul { margin: 0; padding-left: 1.1rem; }
.cmp-bucket code { font-family: var(--ts-mono); }
.cmp-lead h3 { color: var(--ts-orange); border-bottom-color: var(--ts-orange); }
.cmp-added h3::before   { content: "＋ "; }
.cmp-dropped h3::before { content: "－ "; }
.cmp-moved h3::before   { content: "⇄ "; }

/* version view: frozen read-only roster */
.version-view .day-head,
.version-compare .day-head {
  font-family: var(--ts-cond);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 22px 0 10px;
}
.version-view .chip .nm { font-weight: 500; }
.version-view .empty-crew { opacity: .65; }

/* --- Access roster ---------------------------------------------------------
   One list of people, each at a visible lifecycle stage (Invited -> Active ->
   given roles). Status pills reuse the board's colour grammar: green = active
   (like a placed Lead), amber = pending/attention, violet = the app's accent. */
.access .sub { max-width: 60ch; }
.access .roster td { vertical-align: top; }
.access .person .who { font-weight: 600; }
.access .person small { display: block; }

.access .pill {
  display: inline-block;
  font-family: var(--ts-cond);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 999px;
  vertical-align: middle;
}
.access .pill.active   { color: var(--ts-pole); background: var(--ts-pole-tint); }
.access .pill.invited  { color: var(--ts-warn); background: rgba(184, 134, 11, .14); }
.access .pill.built-in { color: var(--ts-side-r); background: rgba(124, 77, 188, .14); }

.access .access-cell { white-space: nowrap; }
.access .revoke-access { display: inline; margin-left: 10px; }
.access .revoke-access .linkish {
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ts-grip);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}
.access .revoke-access .linkish:hover { color: var(--ts-orange-strong); }

.access .roles-cell .role-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 6px 6px 0;
  padding: 3px 5px 3px 11px;
  border: 1px solid var(--ts-grip);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.access .roles-cell .role-chip .del {
  width: auto;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--ts-grip);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.access .roles-cell .role-chip .del:hover { color: var(--ts-orange-strong); }

.access .assign-role { margin-top: 22px; }
.access .assign-role > summary { cursor: pointer; font-weight: 700; }
.access .assign-role .hint { font-size: 13px; margin: 8px 0 12px; max-width: 60ch; }

/* ── Assignment Console ──────────────────────────────────────────────────────
   A back-of-house timing-screen: dense monospace-ish table on the left (the
   unplaced pool), a compact post rail on the right. Deliberately plainer than the
   pit board — this surface is for throughput, not display. */
.console .sub { color: var(--pico-muted-color); margin: -4px 0 18px; max-width: 70ch; }
.console-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 22px; align-items: start; }
@media (max-width: 820px) { .console-layout { grid-template-columns: 1fr; } }

.pool-panel { min-width: 0; }
.pool-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pool-head h2 { margin: 0; font-size: 18px; }
.pool-head .count {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 10px;
  background: var(--ts-orange); color: #fff; font-size: 13px; font-weight: 700;
}
.pool-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pool-tools .pool-search { margin: 0; min-width: 180px; }
/* Solid secondary fill (not transparent) so the chips are unmistakable in both
   themes; pressed flips to the orange primary. */
.console .filter-toggle {
  padding: 5px 10px; font-size: 12px; font-weight: 700; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--pico-muted-border-color);
  background: var(--pico-secondary-background); color: var(--pico-secondary-inverse);
}
.console .filter-toggle[aria-pressed="true"] { background: var(--ts-orange); border-color: var(--ts-orange); color: #fff; }

.table-scroll { overflow-x: auto; max-height: 66vh; overflow-y: auto; margin-top: 12px; border: 1px solid var(--pico-muted-border-color); border-radius: 8px; }
.pool-table { margin: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.pool-table thead th { position: sticky; top: 0; z-index: 1; background: var(--pico-background-color); border-bottom: 2px solid var(--ts-orange); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.pool-table th, .pool-table td { padding: 5px 10px; white-space: nowrap; }
.pool-table td.c-name { white-space: normal; }
.pool-table tbody tr:hover { background: var(--ts-pole-tint); }
.pool-table .c-check { width: 1%; text-align: center; }
.pool-table .badge.prior-li { color: var(--ts-pole); font-weight: 700; }
.pool-table .warn { color: var(--ts-warn); font-weight: 700; }
.pool-table .c-flags { text-align: center; white-space: nowrap; }
.pool-table .lead-badge { color: var(--ts-orange); font-weight: 700; }
.pool-table .empty { text-align: center; color: var(--pico-muted-color); padding: 18px; }

.batch-bar {
  position: sticky; bottom: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin: 12px 0 6px; padding: 10px 12px; border-radius: 8px;
  background: var(--pico-card-background-color); border: 1px solid var(--pico-muted-border-color);
}
.batch-bar .sel-count { font-size: 13px; color: var(--pico-muted-color); }
.batch-bar .sel-count b { color: var(--pico-color); }
.batch-bar .lead-opt { font-size: 13px; display: inline-flex; align-items: center; gap: 5px; margin: 0; }
.batch-bar select { margin: 0; min-width: 150px; }
.batch-bar button { margin: 0; }
.pool-stats { font-size: 12.5px; margin: 4px 2px 0; }
.pool-stats b { color: var(--pico-color); }

.post-rail h2 { font-size: 18px; margin: 0 0 8px; }
.rail-post { border: 1px solid var(--pico-muted-border-color); border-radius: 8px; margin-bottom: 8px; }
.rail-post > summary { display: flex; align-items: center; gap: 8px; padding: 8px 10px; cursor: pointer; list-style: none; }
.rail-post > summary::-webkit-details-marker { display: none; }
.rail-post .pick-post { background: none; border: 0; padding: 0; font-weight: 700; color: var(--ts-orange); cursor: pointer; }
.rail-post .fill { margin-left: auto; padding: 1px 8px; border-radius: 10px; background: var(--ts-pole-tint); color: var(--ts-pole); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rail-post .no-li { background: var(--ts-warn); color: #fff; border-radius: 4px; padding: 0 5px; font-size: 11px; }
.rail-crew { list-style: none; margin: 0; padding: 4px 10px 8px; }
.rail-crew li { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 13px; }
.rail-crew li.lead .nm { font-weight: 700; }
.rail-crew .pos { width: 12px; color: var(--pico-muted-color); }
.rail-crew form { margin: 0 0 0 auto; display: inline; }
.rail-crew .icon { background: none; border: 0; cursor: pointer; padding: 0 4px; color: var(--pico-muted-color); font-size: 13px; }
.rail-crew .icon:hover { color: var(--ts-orange); }
.rail-crew li.empty { color: var(--pico-muted-color); }

/* Defensive: a viewer's template already omits the controls, but keep the surface
   inert even if a stray control renders. */
.console.readonly .pool-tools,
.console.readonly .batch-bar,
.console.readonly .rail-crew form { display: none !important; }