/* ROLLON SELECT. The list is drawn by the page, so it is the page's colours in both themes, which the
   native control could never be: an open <select> is OS chrome and follows the SYSTEM theme. */
/* THE WRAPPER IS THE HEIGHT OF ITS CONTROL, AND IT WAS NOT (17 Aug).
   Celina: "TOUR / ALL / CSV / PDF / SHEET / ADD CREW this has tons of padding", and "Not the one page
   - THE FULL SITE."
   MEASURED on /travel-party: this wrapper rendered 156px TALL around a 36px button. Its children were
   all correct (button 36, list display:none, native select visually hidden), so the height came from
   the wrapper itself being inline-block: an inline-block box is laid out on a TEXT BASELINE, so the
   hidden native select and the line-box leading stack inside it instead of collapsing.
   That one element pushed the whole toolbar to 204px and opened the ~70px gaps she could see above and
   below the CSV / PDF / SHEET / ADD CREW row. This control is the estate's pick-or-add, so it is on
   every surface that has a dropdown : fixing it here fixes the full site rather than that page.
   inline-flex + the rhythm height makes the wrapper exactly its button, in every theme and at any
   font size. */
/* :not(td): the finance grid marks a RANGE-selected cell td.rsel (grid-page.js), a name this wrapper shares by accident;
   since every page links this sheet (job 418) the wrapper's box must never reach a table cell */
.rsel:not(td) { position: relative; display: inline-flex; align-items: center; vertical-align: middle;
        height: var(--ctl-h); line-height: 1; padding: 0; }
/* AND IT MUST WIN AGAINST .empty, WHICH IS A COLLISION I CAUSED TODAY.
   select.js copies the original control's classes onto this wrapper, and several pages use "empty" on
   a select to mean NOTHING IS SELECTED. components.css uses .empty for the shared EMPTY STATE, which
   is padding:60px 22px. Linking that sheet estate-wide put a 120px empty-state padding inside a 36px
   dropdown: the wrapper rendered 156px tall, which pushed the travel-party toolbar to 204px and opened
   the ~70px gaps above and below the CSV / PDF / SHEET / ADD CREW row.
   MEASURED across 12 surfaces after the sweep: FOUR colliding elements, on /travel-party, /board and
   /build, every one of them this wrapper.
   Two class names, one generic word, two meanings. The compound selector is (0,2,0) so it beats the
   bare .empty (0,1,0) in either load order, which a plain .rsel rule could not do. */
.rsel.empty:not(td) { padding: 0; }
/* THE PICKER'S EMPTY DASH IS NOT THE EMPTY STATE (16 Sep 2026, measured by gate_form_is_the_artboard on the songwriter form): the
   caret box draws <span class="empty">-</span> when nothing is picked, and components.css gives bare .empty the shared empty-state
   panel (60px 22px, a column). On a page that loads both, an empty TITLE box stood 150px tall. (0,2,0) beats (0,1,0) in either order. */
.caholder .empty { padding: 0; margin: 0; display: inline; text-align: left; gap: 0; }
.rsel-native {
  position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px;
  margin: 0; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden;
}
/* ON THE RHYTHM (17 Aug). Celina: "apply the same design template and rhythm on every single
   live surface." MEASURED off-rhythm before this: this control rendered at a height that was
   neither 28, 36 nor 44, so it sat a few pixels off every control beside it. Sized by --ctl-h*
   and centred with inline-flex, which also removes the fractional height that came from padding
   plus line-height landing on a sub-pixel. */
.rsel-btn{
  appearance: none; font: inherit; cursor: pointer; text-align: left;
  display: inline-flex; align-items: center; gap: 9px; width: 100%;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  padding:0 12px; border-radius: var(--btn-r,4px);
  border: 1px solid var(--line, #2a2a2e);
  background: var(--card, #141416); color: var(--text, #e9e6df);height:var(--ctl-h);display:inline-flex;align-items:center;justify-content:center;line-height:1;box-sizing:border-box}
.rsel-btn:hover { border-color: var(--blue, #2f6fd0); }
.rsel-btn:focus-visible { outline: 2px solid var(--blue, #2f6fd0); outline-offset: 2px; }
.rsel.open .rsel-btn { border-color: var(--blue, #2f6fd0); }
.rsel-val { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rsel.empty .rsel-val { color: var(--faint, #8b8b8b); }
/* the caret is drawn, not a character: a glyph inherits the uppercase transform and the font stack, and
   this estate has already been bitten by copy that CSS could not uppercase */
.rsel-caret {
  width: 8px; height: 8px; flex: 0 0 auto; margin-left: 2px;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); opacity: .55;
}
.rsel.open .rsel-caret { transform: rotate(225deg) translate(-1px, -1px); opacity: .9; }

@media (prefers-reduced-motion: no-preference) { .rsel-caret { transition: transform .14s ease; } }

/* THE CARET IS GONE, ESTATE WIDE (19 Aug). Celina: "Remove the down arrows on buttons...estate wide."
   Removed here rather than on one page, because .rsel-caret is drawn by BOTH select.js and
   form-engine.js and hiding it on the crew pages alone would leave every other surface wearing it.
   ONE CONSEQUENCE, STATED RATHER THAN DISCOVERED LATER: the caret was the only thing distinguishing a
   picker from a text field at rest. The list still opens on click and on keyboard, and the control
   keeps its own border and hover, so nothing is unreachable - it is quieter, which is the ask. */
.rsel-caret { display: none !important; }

/* ── THE OPEN STATE IS THE ONE PICKER (job 418, 15 Sep 2026) ────────────────────────────────────────
   The drawn list with a FIND box inside it that used to live here is retired: it was the shape she
   rejected on Picker A ("type in place"). Pressing the face hands it to pickIn: the face becomes the
   caret box (the chosen value as a pill, the caret beside it) and the one list opens below. The face
   keeps the control's own height so the row it sits in does not move. */
.rsel-face { display: contents; }
.rsel-face.pickin {
  display: flex; align-items: center; width: 100%; height: 100%; min-height: var(--ctl-h); box-sizing: border-box;
  padding: 0 12px; border-radius: var(--btn-r,4px); border: 1px solid var(--blue, #2f6fd0);
  background: var(--card, #141416); color: var(--text, #e9e6df);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; line-height: 1; text-align: left; cursor: text;
}
.rsel-face.pickin .caholder { flex-wrap: nowrap; min-width: 0; }
.rsel-face.pickin .capill {
  border: var(--edge-w,1.5px) solid var(--line, #2a2a2e); border-radius: var(--btn-r,4px);
  height: calc(var(--ctl-h) - 8px); min-height: 18px; max-height: 26px; font-size: 11px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; background: var(--pill-bg, transparent); color: var(--pill-text, inherit);
}
.rsel-face.pickin input.cafind { min-width: 40px; }

/* ── THE ONE PICKER'S OWN RULES, moved here from grid.html and the card stylesheet (job 418) ────────
   THE LIST SITS ABOVE EVERY PANEL AND MENU (1500100): finance-v2's panels and menus stand at 1500000 and the
   card floats at 1000000, and a list drawn on the body at 130 opened BEHIND the FILTER panel it served, so a
   real press on an option landed on the panel (measured 15 Sep 2026). The send undo (1600001) stays above it.
   These are the rules the record card has worn since 13 Sep 2026 (her Option A: chosen pills in the
   field box, a roomier ✕, the caret at the end, the dropdown below to add), verbatim, so the picker
   reads the same on every page that links this file - which is every page. */
#linked{position:fixed;z-index:1500100;background:var(--cell);border:1px solid var(--line);border-radius:var(--btn-r,4px);box-shadow:0 10px 32px rgba(0,0,0,.2);padding:10px;width:340px;max-height:calc(50vh / var(--ui-zoom,1));overflow:auto}
#linked input{width:100%;border:1px solid var(--line);border-radius:4px;padding:5px 8px;margin-bottom:6px}
#linked .opt{font:inherit;cursor:pointer;background:none;border:none;color:inherit;display:block;width:100%;text-align:left;padding:5px 8px;border-radius:4px}
/* the row under the cursor and the highlighted row wear the picker artboard's own hover (job 422, her 15 Sep "The hover
   color is not corerct"): Picker.dc.html .hi rgba(255,255,255,.08) in dark, PickerLight.dc.html rgba(45,108,203,.10) in
   light, carried by --pick-hi in tokens.css for both themes */
#linked .opt:hover{background:var(--pick-hi,var(--hover))}
/* TWO CHOSEN NEIGHBOURS ARE TWO CHOICES, NOT ONE SLAB (her 26 Aug 2026 ruling on the value list, now the one picker's): a 2px channel between rows, out of the space between them, so two adjacent marked rows keep an edge */
#linked .opt + .opt{margin-top:2px}
#linked .sect{font-size:var(--fs-label);text-transform:uppercase;color:var(--dim);padding:4px 8px 2px;letter-spacing:.05em}
#linked .muted{color:var(--dim)}
.caholder{display:flex;flex-wrap:wrap;align-items:center;gap:7px;width:100%}
.capill{display:inline-flex;align-items:center;gap:7px;padding:0 10px}
.capx{border:0;background:transparent;color:inherit;opacity:.5;cursor:pointer;font-size:10px;line-height:1;padding:0;margin:0;font-weight:700}
.capx:hover{opacity:1}
.caholder input.cafind{flex:1 1 60px;min-width:60px;border:0;outline:0;background:transparent;color:inherit;font:inherit;padding:0;margin:0;height:22px}
#linked.pickin-list .opt.hi{background:var(--pick-hi,var(--hover))}
#linked.pickin-list .opt .lab{font-weight:600}
/* THE RECORD ROW (her ruling 17 Sep 2026, ledger 494, the toolbox picker): name 11.5px/600 with the kind at the right edge on the first line,
   the quiet line under the name at 10.5px in the dim ink, one line, ellipsis. A grid, so nothing runs into anything (her 482). */
/* THE LIST IS THE TOOLBOX'S (her 18 Sep 2026: "has picker fully been rolled out (see Picker) on toolbox first tab"). MEASURED against
   design-source/toolbox/rollon-toolbox.html .list / .sect / .opt: the frame is the ring at --edge-w with 6px inside, the section head
   9.5px 800 .12em, rows 11.5px at 5px 8px with no gap between them. gate_the_list_is_the_toolbox holds these numbers to the file. */
#linked.pickin-list{border:var(--edge-w,2px) solid var(--ring,var(--line));padding:6px;box-shadow:0 10px 32px rgba(0,0,0,.35)}
#linked.pickin-list .sect{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--faint,var(--dim));padding:6px 8px 4px}
#linked.pickin-list .opt + .opt{margin-top:0}
#linked.pickin-list .opt{font-size:11.5px;line-height:1.3}
#linked.pickin-list .opt--rec{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;align-items:baseline;padding:5px 8px}
#linked.pickin-list .opt--rec .lab,#linked.pickin-list .opt--rec .pill{grid-column:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#linked.pickin-list .opt .kind{grid-column:2;grid-row:1;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--faint,var(--dim));white-space:nowrap}
/* THE OWNER DEFENDS ITS OWN ROW (her 19 Sep 2026 screenshot: an 84px Producer row): submit.html has a page class named .sub with a 60px foot, and it reached the quiet line. Padding, margin and line height are pinned here so no page class can size the row. */
#linked.pickin-list .opt .sub{grid-column:1;grid-row:2;font-size:10.5px;line-height:1.3;padding:0;margin:0;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:none}
#linked.pickin-list .opt .lab,#linked.pickin-list .opt .kind{padding:0;margin:0;line-height:1.3}
#linked .sect{font-size:9.5px;font-weight:800;letter-spacing:.12em}
#linked.pickin-list .opt.create{color:var(--blue-tx);font-weight:600}
#linked.inline{padding-top:8px}
#linked.inline.pickin-list{padding-top:6px}   /* the toolbox's 6px on every side */
#linked .chosen{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:26px;margin-bottom:8px}
#linked .chosen .plus{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid var(--line);border-radius:var(--btn-r,4px);background:var(--field);color:var(--text);cursor:pointer;font:inherit;font-size:14px;line-height:1;padding:0}
#linked .chosen .plus:hover{background:var(--hover)}
#linked .opt.on{ background:var(--hover); }
:root[data-card="1"] #linked .pill{background:var(--pill-bg);color:var(--pill-text);border:var(--edge-w,1.5px) solid var(--line)}
:root[data-card="1"] #linked .pill b{font-weight:600;margin-left:4px;opacity:.7}
:root[data-card="1"] #linked .opt.on .pill{border-color:var(--blue)}
/* rect mode: the picker drawn at a grid cell wears the cell editor's own box (the .celledit values, verbatim) */
.pickin-float{position:fixed;z-index:1500090;background:var(--cell);border:2px solid var(--blue);border-radius:4px;box-shadow:0 6px 20px rgba(0,0,0,.2);padding:4px}

/* THE + GLYPH FACE (her 481, the toolbox line-type row): the value as a pill, a + at 25% that wakes on hover, no box of its own */
.rsel-btn.rsel-plus{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;padding:0;height:auto;min-height:0;box-shadow:none}
.rsel-btn.rsel-plus .rsel-add{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:14px;line-height:1;opacity:.25;color:var(--text)}
.rsel-btn.rsel-plus:hover .rsel-add,.rsel-btn.rsel-plus:focus-visible .rsel-add{opacity:.9}