/*
  The look is a rack panel, not a dashboard: a dark powder-coated ground, hairline seams,
  hard corners, and anodised orange for anything that carries meaning. Colour is scarce on
  purpose — this app already has three colour systems of its own (circuit resistor code,
  tape colours, voltage), so the chrome stays out of their way.
*/
:root {
  --ground: #0b0c0e;
  --panel: #131519;
  --panel-hi: #191c21;
  --seam: #2a2e35;
  --seam-bright: #3a4049;
  --ink: #d7dae0;
  --ink-dim: #7d838d;
  --ink-faint: #565c66;

  --amber: #ff8a1f;
  --amber-hi: #ffc46b;
  --amber-lo: #c25c07;
  --metal: linear-gradient(180deg, var(--amber-hi) 0%, var(--amber) 46%, var(--amber-lo) 100%);
  --plate: linear-gradient(180deg, #23272e 0%, #171a1f 55%, #101317 100%);

  --row: 26px;
  --chrome: ui-sans-serif, "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --data: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, #16191e 0%, transparent 70%),
    var(--ground);
  color: var(--ink);
  font: 13px/1.45 var(--chrome);
  -webkit-font-smoothing: antialiased;
}

/* ---- faceplate ------------------------------------------------------- */

.faceplate {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: stretch; gap: 0;
  background: var(--plate);
  border-bottom: 1px solid #000;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 0 var(--seam), 0 10px 28px rgba(0,0,0,.6);
}

/* A hairline of brushed texture, so the plate reads as metal rather than as a flat bar. */
.faceplate::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
}

.mark {
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px 0 20px; border-right: 1px solid var(--seam);
}
.mark b {
  font: 700 15px/1 var(--chrome); letter-spacing: .18em; text-transform: uppercase;
  background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.mark span { color: var(--ink-faint); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; }

.shows { display: flex; align-items: stretch; }
.show-tab {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: 9px 20px; min-width: 150px;
  border-right: 1px solid var(--seam);
  background: none; color: var(--ink-dim); text-align: left; cursor: pointer;
  font: inherit; position: relative;
}
.show-tab b { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.show-tab i { font-style: normal; font-size: 10px; letter-spacing: .1em; color: var(--ink-faint); }
.show-tab[aria-selected="true"] { background: linear-gradient(180deg, #1d2127, #14171b); }
.show-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--metal);
}
.show-tab:hover { color: var(--ink); }

.plate-right { margin-left: auto; display: flex; align-items: center; gap: 16px; padding: 0 20px; }

/* The amber tell-tale a powered panel has. */
.lamp { display: flex; align-items: center; gap: 8px; color: var(--ink-faint); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; }
.lamp::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber); box-shadow: 0 0 7px 1px rgba(255,138,31,.7), inset 0 0 2px rgba(255,255,255,.6);
}

/* The two screws that stop the plate looking like a web header. */
.screw {
  width: 11px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #5b626d, #24282e 62%, #14171b 100%);
  box-shadow: inset 0 0 0 1px #090b0e, 0 1px 0 rgba(255,255,255,.06);
  position: relative;
}
.screw::after {
  content: ""; position: absolute; inset: 4px 1.5px; border-top: 1.5px solid #0a0c0f; transform: rotate(28deg);
}

/* ---- layout ---------------------------------------------------------- */

.frame { display: grid; grid-template-columns: 188px 1fr; min-height: calc(100vh - 49px); }

.rail {
  position: relative;
  border-right: 1px solid var(--seam);
  background: linear-gradient(180deg, #101317, #0c0e11);
  padding: 14px 0 14px 16px;
}

/*
  A punched rack ear down the left edge. This is the one piece of literal hardware in the
  interface, and it earns its place: it is the shape every one of these objects bolts into.
*/
.rail::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 16px;
  background:
    /* the hole, with a hair of light on its lower lip so it reads as punched */
    radial-gradient(circle at 8px 50%, #04060a 0 3.2px, rgba(255,255,255,.10) 3.2px 4px, transparent 4px)
      0 0 / 16px 44px repeat-y,
    linear-gradient(90deg, #1f242b 0%, #171b21 60%, #101317 100%);
  border-right: 1px solid #090b0e;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.035);
}

.rail h3 {
  margin: 16px 16px 7px; font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600;
}
.rail button {
  display: flex; width: 100%; align-items: baseline; gap: 8px;
  padding: 5px 16px 5px 14px; border: 0; border-left: 2px solid transparent;
  background: none; color: var(--ink-dim); font: inherit; text-align: left; cursor: pointer;
  letter-spacing: .04em;
}
.rail button:hover { color: var(--ink); background: #14171c; }
.rail button[aria-current="true"] { color: var(--amber-hi); border-left-color: var(--amber); background: #16191f; }
.rail button em { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--ink-faint); font-family: var(--data); }
.rail button[aria-current="true"] em { color: var(--amber); }

main { padding: 22px 26px 70px; overflow-x: auto; }
main > * { max-width: 1180px; }
main > table, main > .cards, main > .sheets, main > .review { max-width: 1180px; }

h2 {
  margin: 0 0 3px; font-size: 17px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  display: flex; align-items: center; gap: 12px;
}
/* A short anodised rule, so a heading reads as stamped rather than typed. */
h2::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, var(--amber-lo), transparent 62%); opacity: .55; }
.sub { color: var(--ink-faint); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 18px; }

/* ---- data ------------------------------------------------------------ */

table { border-collapse: collapse; width: 100%; font-family: var(--data); font-size: 11.5px; }
thead th {
  position: sticky; top: 49px;
  text-align: left; padding: 7px 10px; white-space: nowrap;
  background: #14171c; border-bottom: 1px solid var(--seam-bright);
  font: 600 9.5px/1 var(--chrome); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint);
}
tbody td { padding: 0 10px; height: var(--row); border-bottom: 1px solid #1b1e23; white-space: nowrap; color: var(--ink); }
tbody tr:nth-child(even) { background: #101317; }
tbody tr:hover { background: #191d23; box-shadow: inset 2px 0 0 var(--amber); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.dim { color: var(--ink-faint); }

/* A circuit's own colour, shown as the chip the labels print. */
.chip { display: inline-block; width: 9px; height: 9px; margin-right: 7px; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.5); }

.count { font-family: var(--data); color: var(--amber); }

/* ---- panels ---------------------------------------------------------- */

.cards { display: flex; flex-wrap: wrap; gap: 1px; background: var(--seam); border: 1px solid var(--seam); }
.card { background: var(--panel); padding: 13px 16px; flex: 1 1 150px; min-width: 150px; }
.card b {
  display: block; font-family: var(--data); font-size: 22px; font-weight: 500;
  background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.card span { font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-faint); }

.review { border: 1px solid var(--seam); }
.review-kind {
  padding: 8px 14px; background: #14171c; border-bottom: 1px solid var(--seam);
  font: 600 10px/1 var(--chrome); letter-spacing: .2em; text-transform: uppercase; color: var(--amber);
  display: flex; gap: 10px; align-items: center;
}
.review-kind em { font-style: normal; color: var(--ink-faint); font-family: var(--data); letter-spacing: 0; }
.review-item { padding: 7px 14px; border-bottom: 1px solid #1b1e23; background: var(--panel); font-size: 12px; }
.review-item small { display: block; margin-top: 3px; color: var(--ink-faint); font-family: var(--data); font-size: 10.5px; }

select {
  background: #0e1114; color: var(--ink); border: 1px solid var(--seam-bright);
  font: 11.5px var(--data); padding: 3px 6px; min-width: 210px;
}
select:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber-lo); }
select.unset { color: var(--amber); border-color: var(--amber-lo); }

.sheets { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1px; background: var(--seam); border: 1px solid var(--seam); }
.sheet { background: var(--panel); padding: 12px 14px; display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.sheet:hover { background: var(--panel-hi); }
.sheet b { font-size: 12px; letter-spacing: .06em; }
.sheet span { margin-left: auto; font-family: var(--data); font-size: 10px; color: var(--ink-faint); }
.sheet i { width: 3px; align-self: stretch; background: var(--metal); font-style: normal; }

.empty { color: var(--ink-faint); padding: 30px 0; font-size: 12px; letter-spacing: .06em; }

/* The house name, alongside the mark. */
.mark span i { font-style: normal; color: var(--ink-dim); }
.mark span i::after { content: " · "; color: var(--seam-bright); }

/* ---- the grid -------------------------------------------------------- */
/*
  A sheet, not a report. It gets the full width of the frame — column count is decided by
  the data, not by a reading measure — and scrolls inside `main`, which is what keeps the
  row-number gutter stuck to the left edge while the header stays stuck to the faceplate.
*/
main > .sheetframe { max-width: none; }
/* And so does a page built around one — the labor and management pages, a settings table:
   the sheet is the page, and a reading measure only left blank space beside it (the owner,
   2026-09-25: "the spreadsheet should take up the size of the window rather than blank
   space on the side"). */
main > :has(.sheetframe) { max-width: none; }

.sheetframe { border: 1px solid var(--seam); background: var(--panel); }

/* The cell bar: the address you are on, and the whole of the value the cell can only clip. */
.cellbar { display: flex; align-items: stretch; border-bottom: 1px solid var(--seam); background: #14171c; }
.cellbar .addr {
  min-width: 190px; padding: 0 12px; display: flex; align-items: center;
  border-right: 1px solid var(--seam); background: var(--plate);
  font: 600 9.5px/1 var(--chrome); letter-spacing: .18em; text-transform: uppercase; color: var(--amber);
}
.cellbar .barvalue {
  flex: 1; min-width: 0; height: 30px; padding: 0 12px;
  border: 0; outline: none; background: transparent; color: var(--ink);
  font-family: var(--data); font-size: 11.5px;
}
.cellbar .barvalue:focus { background: #000; box-shadow: inset 0 0 0 1px var(--amber-lo); }
.cellbar .barvalue:read-only { color: var(--ink-faint); }

/* The grid scrolls in its own frame, so the headings and the cell bar stay put. */
.gridwrap { overflow: auto; max-height: calc(100vh - 270px); }
/*
 * A page's sheet runs to the window's foot and the corner's Lumen, Chat and Feature request
 * float over it (the owner, 2026-09-29). A sheet that reaches under them and already scrolls
 * that way is padded by the corner they take (`--corner-w`, `--corner-h`, and the classes, set
 * by `fitSheets`), so the last column and the last rows can be scrolled out from under them.
 */
/* No scroll padding on the right: the pills are a band at the foot, not a strip down the sheet, and a right-hand scroll
   padding scrolled the sheet sideways under any cell clicked or typed into within the corner's width of the right edge,
   however high up it sat (the owner, 2026-10-12, typing in Heavy equipment's Location: "It changes my view"). The foot's
   scroll padding below already lifts a cell clear of the pills. */
#main .gridwrap.padright { padding-right: var(--corner-w, 0px); }
/* The scroll padding at the foot: a cell the arrows or Enter reach is scrolled clear of the pills, never under them (the review, 2026-09-30). */
#main .gridwrap.padfoot { padding-bottom: var(--corner-h, 0px); scroll-padding-bottom: var(--corner-h, 0px); }
/*
 * The table is exactly as wide as its columns, never stretched to the pane. Stretched, the
 * browser hands the slack to every column, so dragging one column's edge changed the width
 * of the key column at the far left as well; a spreadsheet's columns are the width they
 * are, and the pane beyond them is just pane.
 */
.gridwrap > table.grid, .gridwrap > .gridhead > table.grid { width: max-content; }
/*
 * Each cell paints its own borders (`separate`, no spacing: a cell has only its right and bottom
 * rule, so nothing doubles). Collapsed, the table painted them where the cells first lay, and a
 * frozen cell stuck in place left its border's band open, the rows scrolling beneath showing
 * through it between the frozen rows and columns (2026-10-04).
 */
.gridwrap > table.grid, .gridwrap > .gridhead > table.grid { border-collapse: separate; border-spacing: 0; }
/*
 * The headings stick as a strip, not cell by cell and not as a <thead>. Sticky cells alone
 * left Chromium painting the body's cells over the header's background while scrolling; a
 * sticky <thead> held for one row, but with the filter boxes as a second row the text of the
 * rows scrolling under it came through the grey again. The headings are a table of their own
 * in a block that sticks (`gridhead` in `web/grid.js`), and a block paints as one.
 */
.gridwrap > .gridhead { position: sticky; top: 0; z-index: 10; width: max-content; }
.gridwrap thead th { top: 0; }

.grid { outline: none; }
.grid thead th:first-child { left: 0; z-index: 3; }
.grid thead th { z-index: 2; }

/* Row numbers: the way you keep your place in a few thousand rows. Above a cell's own value
   and chip (z-index 2, so they sit over a fill bar): at 1 the first column's words painted
   through the numbers as the sheet scrolled sideways (the owner, 2026-09-26). */
.grid th.rownum {
  position: sticky; left: 0; z-index: 3;
  width: 46px; padding: 0 8px 0 0;
  text-align: right; font: 400 10px/1 var(--data); color: var(--ink-faint);
  background: #14171c; border-right: 1px solid var(--seam);
  border-bottom: 1px solid #1b1e23;
  user-select: none;
}
.grid tbody tr:nth-child(even) th.rownum { background: #121519; }
.grid th.rownum.at { color: var(--ground); background: var(--metal); font-weight: 700; }

.grid tbody td { border-right: 1px solid #1a1d22; cursor: cell; }
.grid td.ro { color: var(--ink-faint); cursor: default; }

/*
 * Frozen columns (`freeze` on grid()): sticky at the left past the row numbers, painted opaque so
 * the rest scrolls under them — over every cell's words and chip (`.cellvalue`, z-index 2), which
 * at the same 2 painted through them (2026-10-04). The stack, low to high: a cell's words, chip
 * and fill handle 2; the row numbers and the frozen columns 3; the frozen rows 5, where they meet
 * the frozen columns 6, their row numbers 7; the heading strip 10; a drag's drop line 12.
 */
.grid tbody td.frozen { position: sticky; z-index: 3; background: var(--sheet); }
.grid tbody tr:nth-child(even) td.frozen { background: var(--sheet-alt); }
.grid thead th.frozen { position: sticky; z-index: 3; }
.grid tr.filterrow th.frozen, .grid tr.filterrow td.frozen { position: sticky; z-index: 3; }
/*
 * Frozen rows (Freeze on the toolbar, `freezeRows` in web/grid.js): each cell sticky under the
 * heading strip and the frozen rows above it, over the rows scrolling under them and their chips
 * and fill handle; where a frozen row meets a frozen column, over both; its row number over all.
 */
.grid tbody tr.frozenrow > td { position: sticky; z-index: 5; }
.grid tbody tr.frozenrow > td.frozen { z-index: 6; }
.grid tbody tr.frozenrow > th.rownum { z-index: 7; }
/* The freeze's line, as Excel and Google Sheets draw it: a darker rule after the last frozen column
   and under the last frozen row — never over the selected cell's outline or a warning's (`:where`). */
:where(.grid td.freezeright, .grid th.freezeright) { box-shadow: inset -2px 0 0 var(--freeze-line, #8c97a5); }
:where(.grid tbody tr.freezelast > td, .grid tbody tr.freezelast > th.rownum) { box-shadow: inset 0 -2px 0 var(--freeze-line, #8c97a5); }
:where(.grid tbody tr.freezelast > td.freezeright) { box-shadow: inset -2px -2px 0 var(--freeze-line, #8c97a5); }
/* The focused cell wears the amber, drawn inside so it never shifts the row. */
.grid td.sel { background: #1a1e24; }
.grid th.rownum.sel { color: var(--amber); }
.grid td.at:where(:not(.inblock)) { box-shadow: inset 0 0 0 2px var(--amber); background: #1c2027; color: #fff; }
/* The fill handle at the selection's bottom-right, and the cells a drag of it will fill (the owner, 2026-09-26). */
/* Half the square it was (the owner, 2026-09-26): 4px of amber in an 8px box, so it still takes the pointer. */
.grid td .fillhandle { position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; padding: 2px; box-sizing: border-box; border: 0; background: var(--amber); background-clip: content-box; cursor: crosshair; z-index: 2; }
.grid td.fillpreview { box-shadow: inset 0 0 0 1px var(--amber-lo); background: rgba(255,138,31,.14) !important; }
.grid td.movepreview { box-shadow: inset 0 0 0 2px var(--amber); background: rgba(255,138,31,.10) !important; }
.grid.moveedge td.sel, .grid.movingcells td { cursor: move; }
.grid:focus td.at:where(:not(.inblock)) { box-shadow: inset 0 0 0 2px var(--amber), 0 0 8px rgba(255,138,31,.28); }

/* Columns resize by dragging their edge; the grip is a child so a drag is never a sort.
   The heading is already `sticky`, which is a positioned ancestor — overriding it to
   `relative` here would silently stop the header sticking. */
.grid thead th .grip {
  position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
  cursor: col-resize; z-index: 4;
}
.grid thead th .grip:hover { background: var(--amber-lo); }
.grid.resizing { cursor: col-resize; user-select: none; }
/* Moving a column: the heading is picked up, and a line says where it lands. */
.grid.moving { cursor: grabbing; user-select: none; }
.grid th.picked { opacity: .45; }
.sheetframe { position: relative; }
.dropline {
  position: absolute; width: 2px; background: var(--amber); z-index: 12; pointer-events: none;
}
/* A row on the move: the line lies across the sheet where it lands, the picked rows fade. */
.dropline.rowdrop { width: auto; height: 2px; }
.grid tbody tr.picked td, .grid tbody tr.picked th.rownum { opacity: .45; }
/* The handle a row is dragged by (`onReorder`): the left edge of its gutter, shown on hover. */
.rowhandle {
  position: absolute; left: 0; top: 0; bottom: 5px; width: 11px; cursor: grab; z-index: 3;
  background: repeating-linear-gradient(to bottom, transparent 0 3px, var(--ink-faint) 3px 4px) 4px 4px / 3px calc(100% - 8px) no-repeat;
  opacity: 0;
}
.grid th.rownum:hover .rowhandle { opacity: .9; }
.rowhandle.off { cursor: not-allowed; }
.grid.moving .rowhandle { cursor: grabbing; }

/* A value that is wrong in a way worth seeing — a duplicate name, say. */
.grid td.warn { color: #ff8f9b; box-shadow: inset 2px 0 0 #d0384a; }

/* A measure drawn behind its number: how full a case is, at a glance. */
.cellbar-track {
  position: absolute; left: 0; right: 0; top: 3px; bottom: 3px;
  background: #0e1114; z-index: 0;
}
.cellbar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--amber-lo); opacity: .5; }
.cellbar-fill.over { background: #d0384a; opacity: .55; }
.grid td { position: relative; }
/*
 * A cell clips what does not fit.
 *
 * Long values used to paint straight over the neighbouring column — a fixture mode ran
 * through the purpose beside it — so two cells read as one word. Excel spills only into an
 * empty neighbour and these sheets are rarely empty, so clipping is the honest behaviour;
 * the whole value is always in the cell bar.
 */
.grid tbody td { overflow: hidden; white-space: nowrap; }
.cellvalue { position: relative; z-index: 2; }
.grid td > .chip { position: relative; z-index: 2; }

/* The right-click menu. */
/* Compact: the whole menu has to fit under the pointer on a laptop screen. */
.cellmenu {
  position: fixed; z-index: 60; min-width: 158px; max-width: calc(100vw - 8px); max-height: calc(100vh - 8px); overflow-y: auto;
  padding: 2px 0;
  background: var(--panel); border: 1px solid var(--seam-bright);
  box-shadow: 0 16px 36px rgba(0,0,0,.62);
}
.cellmenu button {
  display: flex; width: 100%; align-items: center; gap: 12px; padding: 2.5px 9px;
  border: 0; background: transparent; color: var(--ink); cursor: pointer;
  font-size: 10.5px; line-height: 1.35; text-align: left; white-space: nowrap;
}
.cellmenu button:hover { background: var(--panel-hi); color: var(--amber-hi); }
/* A hint beside an entry is cut at 300px with an ellipsis, read whole on the entry's hover (`showMenu` in web/grid.js): a
   long one in the shortcut's place drew the menu the width of the window. The entry's own words never shrink. */
.cellmenu button em {
  margin-left: auto; font-style: normal; color: var(--ink-faint); font-family: var(--data); font-size: 8.5px;
  flex: 0 1 auto; min-width: 0; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cellmenu button.menugroup { font-weight: 600; }
.cellmenu .menugroupitems button { padding-left: 22px; }
.cellmenu hr { margin: 2px 0; border: 0; border-top: 1px solid var(--seam); }

/* A cell edited through a picker rather than typed. */
select.cell-edit {
  width: 100%; height: calc(var(--row) - 2px); margin: 0; padding: 0 4px; border: 0;
  background: #000; color: #fff; font-family: var(--data); font-size: 11.5px;
}

/* Write-through states. A commit is visible for as long as it takes and no longer. */
/* The saving shade waits a quarter second (the owner, 2026-10-15: "the yellow taking too long to be green"): a write answered
   inside it goes straight to the green, and only one still out past it reads as saving. */
.grid td.saving { background: #2a2113; transition: background 0s linear .25s; }
.grid td.saved { background: #1d2a19; transition: background .6s ease-out; }
.grid td.failed { background: #33161a; box-shadow: inset 0 0 0 2px #d0384a; }

/* The editor sits exactly where the cell was, so nothing jumps on Enter. */
.cell-edit {
  width: 100%; height: calc(var(--row) - 2px);
  margin: 0; padding: 0; border: 0; outline: none;
  background: #000; color: #fff;
  font: inherit; font-family: var(--data); font-size: 11.5px;
}

.keyhint {
  margin: -8px 0 12px;
}
/* Under a section heading it is a caption, not a hint riding up under the page title. */
h3 + .keyhint, .info .keyhint, .loads .keyhint {
  margin: 3px 0 12px; color: var(--ink-faint);
  font-family: var(--data); font-size: 10px; letter-spacing: .04em;
}
/* Inside a card — the Per diem line, a hotel — the hint is a line under the row, never the
   caption riding up over the field it explains (the owner, 2026-09-25: the text overlapped
   the row above and read pink, as if something were wrong). */
.card .keyhint, .card .keyhint.short { margin: 6px 0 0; color: var(--ink-faint); }
.card .drow { align-items: center; }

/* Click a heading to sort. The view reorders; the row numbers do not, because a write is
   addressed by the row's place in the show file and not by where the sort put it. */
.grid thead th[data-c] { cursor: pointer; user-select: none; }
.grid thead th[data-c]:hover { color: var(--ink-dim); }
.grid thead th.sorted { color: var(--amber); }
.grid thead th.sorted::after { content: " ▲"; font-size: 7px; vertical-align: 1px; }
.grid thead th.sorted[data-dir="desc"]::after { content: " ▼"; }
/* Past one level the arrow carries the level's number, as Excel's does (the owner, 2026-09-26). */
.grid thead th.sorted[data-level]::after { content: " ▲" attr(data-level); }
.grid thead th.sorted[data-level][data-dir="desc"]::after { content: " ▼" attr(data-level); }
/*
 * A heading that wraps (`wrapHeads` on grid(), the CAD app's sheets): narrowed, its words go onto a second line and more,
 * the heading strip growing to hold them, a word longer than its column broken where the column ends — never under the
 * drag handle at the left or the caret at the right, which keep their room (the owner, 2026-10-08: "wrap text on the
 * headers if I change the width of a cell").
 */
.sheetframe.wraphead .grid thead th[data-c] {
  white-space: normal; overflow-wrap: anywhere; line-height: 1.25;
  padding-left: 12px; padding-right: 16px; vertical-align: middle;
}
/* The handle and the caret sit tight to the heading's edges there, so the words have the cell's width (the owner, 2026-10-28:
   "the text could go more full width in the cell"); the caret stays clear of the resize grip at the edge. */
.sheetframe.wraphead .grid thead th .handle { left: 1px; }
.sheetframe.wraphead .grid thead th .caret { right: 4px; }

/*
 * A band of headings over a sheet's headings (`band` on a column, `buildBands` in web/grid.js): the name over the columns it
 * holds, centred, in the sheet's own case, ruled under and at its sides; the first column of a band (`bandstart`) carries the
 * band's rule down the sheet (CAD › Overview, the owner, 2026-10-28).
 */
.grid thead tr.bandrow th {
  height: 22px; padding: 2px 6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: 700; text-transform: none; letter-spacing: .02em; font-size: 11.5px; cursor: default;
}
.grid thead tr.bandrow th.band:not(.bandnone) { border-left: 2px solid var(--sheet-rule); border-bottom: 2px solid var(--sheet-rule); color: #1f2630; }
.grid thead tr.bandrow th.bandnone { border-right-color: transparent; }
.grid th.bandstart, .grid tbody td.bandstart, .grid tfoot td.bandstart { border-left: 2px solid var(--sheet-rule); }

/* Sort by several columns…: Sort by, Then by, Then by — a column and a direction a level. */
.askbox.sortdialog { width: min(520px, calc(100vw - 40px)); max-width: min(520px, calc(100vw - 40px)); }
.askbox.sortdialog .sortlevels { flex: 1 0 100%; display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; }
.askbox.sortdialog .sortlevel { display: flex; align-items: center; gap: 8px; }
.askbox.sortdialog .sortlevel b { width: 62px; font-size: 11px; color: var(--ink); white-space: nowrap; }
.askbox.sortdialog select {
  padding: 4px 7px; border: 1px solid var(--seam); background: #0e1114; color: var(--ink);
  font-family: var(--data); font-size: 11px;
}
.askbox.sortdialog .sortlevel select:first-of-type { flex: 1; min-width: 0; }
.askbox.sortdialog select:focus { outline: none; border-color: var(--amber); }
.askbox.sortdialog .cmd.small { padding: 4px 8px; }

/* ---- rack builds ------------------------------------------------------ */
/*
  A rack drawn the way it is built: units down the page, one row each. The addressing beside
  a device is read across from the network data, never stored here, so the two cannot drift.
*/
.racks { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.rack { border: 1px solid var(--seam); background: var(--panel); min-width: 340px; }
.rack h3 {
  margin: 0; padding: 9px 12px; background: var(--plate); border-bottom: 1px solid var(--seam);
  font: 700 12px/1 var(--chrome); letter-spacing: .16em; text-transform: uppercase; color: var(--amber);
  display: flex; align-items: baseline; gap: 10px;
}
.rack h3 span { margin-left: auto; color: var(--ink-faint); font-weight: 400; letter-spacing: .1em; }
.rackbody { padding: 4px 0; }
.ru {
  display: flex; align-items: center; gap: 9px; height: 20px; padding: 0 10px;
  font-family: var(--data); font-size: 10.5px; color: var(--ink-faint);
  border-bottom: 1px dashed #1a1d22;
}
.ru i { font-style: normal; width: 18px; text-align: right; color: #3d434c; }
.ru.filled { background: #15181d; color: var(--ink); border-bottom: 1px solid var(--seam); }
.ru b { font-weight: 600; }
.ru span { color: var(--amber); }
.ru em { font-style: normal; color: var(--ink-dim); }
.ru u { text-decoration: none; margin-left: auto; color: var(--ink-faint); font-size: 9.5px; }

/* ---- instructions ------------------------------------------------------ */
.instructions { border: 1px solid var(--seam); }
.instructions details { border-bottom: 1px solid var(--seam); background: var(--panel); }
.instructions summary {
  padding: 11px 14px; cursor: pointer; display: flex; align-items: center; gap: 12px;
  font: 600 12px/1 var(--chrome); letter-spacing: .1em; text-transform: uppercase;
}
.instructions summary em { font-style: normal; color: var(--ink-faint); font-family: var(--data); font-size: 10px; letter-spacing: 0; }
.instructions summary .print {
  margin-left: auto; padding: 3px 12px; border: 1px solid var(--amber-lo); background: transparent;
  color: var(--amber); font: 600 9.5px/1.6 var(--chrome); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
}
.instructions summary .print:hover { background: var(--amber-lo); color: var(--ground); }
.instructions pre {
  margin: 0; padding: 4px 16px 18px; white-space: pre-wrap;
  font-family: var(--data); font-size: 11px; line-height: 1.5; color: var(--ink-dim);
}

/* ---- show info --------------------------------------------------------- */
/* Section headings inside a view, as opposed to the page's own h2. */
.info h3, .loads h3 {
  margin: 0 0 4px; font: 700 12px/1 var(--chrome); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink);
}
/* A caption below a table needs air; without it the two run together. */
table + .keyhint { margin-top: 10px; }
/* Anything short of what the show needs. The one place red is allowed. */
td.short { color: #ff6b7a; font-weight: 600; }

/* ---- looms ------------------------------------------------------------- */
/*
  Sparse IDs, so the summary is what you scroll and the bundle is what you open. The note
  belongs to the loom ID: the workbook kept these positionally and renumbering reassigned
  every one of them.
*/
.looms { border: 1px solid var(--seam); }
.loom { border-bottom: 1px solid var(--seam); background: var(--panel); }
.loom summary {
  padding: 8px 14px; cursor: pointer; display: flex; align-items: center; gap: 14px;
  font-family: var(--data); font-size: 11.5px; color: var(--ink-dim);
}
.loom summary b { color: var(--amber); font-size: 13px; min-width: 44px; }
.loom summary span { white-space: nowrap; }
.loom summary u {
  text-decoration: none; color: var(--ground); background: var(--metal); padding: 1px 7px;
  font: 700 9px/1.7 var(--chrome); letter-spacing: .16em; text-transform: uppercase;
}
.loom.singles summary b { color: var(--ink-dim); }
.loom summary .loomnote {
  margin-left: auto; min-width: 220px; padding: 3px 8px;
  border: 1px solid var(--seam); background: #0e1114; color: var(--ink);
  font-family: var(--data); font-size: 11px;
}
.loom summary .loomnote:focus { outline: none; border-color: var(--amber); }
/* The sticks of truss the loom goes on (2026-10-27): the button leads the right-hand group, amber once a stick is picked. */
.loom summary .loomsticks { margin-left: auto; white-space: nowrap; }
.loom summary .loomsticks + .loomnote { margin-left: 0; }
.loom summary .loomsticks.on { color: var(--amber); border-color: var(--amber); }
/* A part dragged to another loom (2026-11-01): the row grabs, the loom it is over is outlined. */
.loom tr.partdrag { cursor: grab; }
.loom tr.partdrag.dragging { opacity: .45; }
.loom.dropto { outline: 2px dashed var(--amber-hi); outline-offset: -2px; background: rgba(255, 138, 31, .08); }
/* Loom tags (2026-11-01): a chip filled in the tag's own color — the Looms sheet, and the toggles in Notes for loom…. */
.loomtagchip { display: inline-block; padding: 2px 9px; border: 1px solid var(--tag, #9aa0a6); border-radius: 999px; background: transparent; color: var(--ink); font: 700 11px/1.5 var(--data); white-space: nowrap; }
.loomtagchip.on { background: var(--tag, #9aa0a6); color: var(--tag-ink, #111); }
.loomtagchip.lost { border-style: dashed; }
button.loomtagchip { cursor: pointer; padding: 5px 12px; font-size: 13px; }
button.loomtagchip:hover { filter: brightness(1.15); }
button.loomtagchip:focus-visible { outline: 2px solid var(--amber-hi); outline-offset: 1px; }
.loom summary .loomtagchips { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.loom summary .loomgoeson { color: var(--ink-dim); font-size: 12px; white-space: nowrap; }
.askbox.asknotes { width: min(560px, calc(100vw - 40px)); max-width: min(560px, calc(100vw - 40px)); align-content: flex-start; }
.askbox.asknotes > p, .askbox.asknotes > h4, .askbox.asknotes > textarea { flex: 1 0 100%; margin: 0; }
.askbox.asknotes .notesh { color: var(--amber); font: 700 11px/1.4 var(--chrome); letter-spacing: .12em; text-transform: uppercase; }
.askbox.asknotes .notestags { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 8px; }
.askbox.asknotes .notesnote { min-height: 64px; resize: vertical; }
.askbox.asknotes .stickhint { color: var(--ink-dim); font-size: 12.5px; }
/* The stick picker (2026-10-28): the row's position's sticks to click, Show all positions to widen it. */
.askbox.asksticks { width: min(640px, calc(100vw - 40px)); max-width: min(640px, calc(100vw - 40px)); align-content: flex-start; }
.askbox.asksticks > p { flex: 1 0 100%; margin: 0; }
.askbox.asksticks .stickbar { flex: 1 0 100%; display: flex; gap: 8px; align-items: center; }
.askbox.asksticks .stickbar .stickfind { flex: 1 1 auto; min-width: 0; }
.askbox.asksticks .stickbar .stickwiden { flex: 0 0 auto; white-space: nowrap; }
.askbox.asksticks .sticklist { flex: 1 0 100%; max-height: 46vh; overflow: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; }
.askbox.asksticks .stickhead { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.askbox.asksticks .stickhead b { color: var(--ink); }
.askbox.asksticks .stickhead span { color: var(--ink-dim); font-size: 12px; }
.askbox.asksticks .stickhead .stickall { margin-left: auto; }
.askbox.asksticks .stickhead .sticknorun { color: var(--ink-faint); font-style: italic; }
.askbox.asksticks .stickrow { display: flex; flex-wrap: wrap; gap: 6px; }
.askbox.asksticks .stickpick { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 66px; padding: 5px 9px; border: 1px solid var(--seam-bright); border-radius: 8px; background: var(--panel-hi); color: var(--ink); font: 12px var(--data); cursor: pointer; text-align: left; }
.askbox.asksticks .stickpick span { color: var(--ink-dim); font-size: 10.5px; }
.askbox.asksticks .stickpick .stickendword { font-style: normal; font-weight: 700; color: var(--amber-hi); font-size: 10px; letter-spacing: .04em; }
.askbox.asksticks .stickpick.stickend { border-color: var(--amber-lo); }
.askbox.asksticks .stickpick:hover { border-color: var(--amber-hi); }
.askbox.asksticks .stickpick:focus-visible { outline: 2px solid var(--amber-hi); outline-offset: 1px; }
.askbox.asksticks .stickpick.on { background: rgba(255, 138, 31, .22); border-color: var(--amber); color: var(--amber-hi); }
.askbox.asksticks .stickpick.on span { color: var(--amber-hi); }
.askbox.asksticks .stickpicked { color: var(--ink-dim); }
.askbox.asksticks .stickhint, .askbox.asksticks .stickstatus { color: var(--ink-dim); font-size: 12.5px; }
.askbox.asksticks .sticknone { margin: 0; color: var(--amber-hi); }
.askbox.asksticks .stickall { padding: 2px 9px; border: 1px solid var(--seam-bright); border-radius: 6px; background: none; color: var(--ink-dim); font: 11px var(--data); cursor: pointer; }
.askbox.asksticks .stickall:hover { border-color: var(--amber-lo); color: var(--amber); }
.loom summary .loomnote.saving { border-color: var(--amber-hi); background: #2a2113; }
.loom > table { border-top: 1px solid var(--seam); }

/* ---- the cable master -------------------------------------------------- */
.cable { display: flex; flex-direction: column; gap: 0; }
.modes {
  display: flex; align-items: center; gap: 1px; flex-wrap: wrap;
  background: var(--seam); border: 1px solid var(--seam); border-bottom: 0; padding: 1px;
}
.modes button[data-mode] {
  padding: 7px 16px; border: 0; background: var(--panel); color: var(--ink-dim);
  font: 600 10px/1 var(--chrome); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
}
.modes button[data-mode]:hover { color: var(--ink); background: var(--panel-hi); }
.modes button[data-mode][aria-current="true"] { color: var(--ground); background: var(--metal); }
.modes .toggle {
  display: flex; align-items: center; gap: 7px; padding: 0 14px; background: var(--panel);
  align-self: stretch; color: var(--ink-faint); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; cursor: pointer;
}
.modes .toggle input { accent-color: var(--amber); }

.cablebody { border: 1px solid var(--seam); }

/* The tree. A run is a line; opening it shows its parts or its circuits. */
.runs { background: var(--panel); }
.run {
  display: flex; align-items: center; gap: 14px; padding: 6px 12px; cursor: pointer;
  border-bottom: 1px solid #1b1e23; font-family: var(--data); font-size: 11.5px; color: var(--ink-dim);
}
.run:hover { background: var(--panel-hi); }
.run i { font-style: normal; width: 10px; color: var(--amber); }
.run b { color: var(--ink); min-width: 62px; }
.run em { margin-left: auto; font-style: normal; color: var(--amber); font-size: 10.5px; }
.grid.sub { border-bottom: 1px solid var(--seam); background: #0e1114; }
.grid.sub thead th { position: static; background: #12151a; }
.grid.sub tbody td { border-bottom: 1px solid #16191e; }
/* Same leftover as the <select> fix below, one layer out: the table element's own base
   background and rule were never carried over to the light theme, so an empty sub-table (no
   rows yet) or the sliver at its very edge still showed the app's original dark chrome. */
.grid.sub { background: var(--sheet); border-bottom: 1px solid var(--sheet-rule); }
/* A 2FER forks the circuit: the legs after it belong to different sides of the Y. */
td.twofer { color: var(--amber); font-weight: 600; }

/* The Lumenarchy tab, as a panel. */
.commands { margin-left: auto; position: relative; align-self: stretch; }
.commandsbtn {
  height: 100%; padding: 7px 18px; border: 0; background: var(--plate); color: var(--amber);
  font: 600 10px/1 var(--chrome); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
}
.commandsbtn:hover { color: var(--amber-hi); }
.commandpanel {
  position: absolute; right: 0; top: 100%; z-index: 20; width: 620px; padding: 14px 16px 18px;
  background: var(--panel); border: 1px solid var(--seam-bright); box-shadow: 0 18px 40px rgba(0,0,0,.6);
}
.commandpanel h4 {
  margin: 14px 0 6px; font: 600 9.5px/1 var(--chrome); letter-spacing: .2em;
  text-transform: uppercase; color: var(--ink-faint);
}
.commandpanel h4:first-child { margin-top: 0; }
.command { display: flex; align-items: center; gap: 8px; padding: 4px 0; flex-wrap: wrap; }
.command label { min-width: 168px; font-size: 11.5px; color: var(--ink); }
.command select { width: 106px; }
.command input, .command select {
  width: 92px; padding: 4px 7px; border: 1px solid var(--seam); background: #0e1114;
  color: var(--ink); font-family: var(--data); font-size: 11px;
}
.command input:focus, .command select:focus { outline: none; border-color: var(--amber); }
.command .go {
  padding: 4px 14px; border: 1px solid var(--amber-lo); background: transparent; color: var(--amber);
  font: 600 9.5px/1.6 var(--chrome); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
}
.command .go:hover { background: var(--amber-lo); color: var(--ground); }
.command .result { flex: 1 0 100%; font-family: var(--data); font-size: 10.5px; color: var(--ink-faint); }
.command .result.did { color: var(--amber-hi); }
.command .result.failed { color: #ff6b7a; }
.command .result small { display: block; color: var(--ink-faint); margin-top: 2px; }

/* ---- loads -------------------------------------------------------------- */
/*
  Three bars against the even third. A balance is a shape, not three numbers, and the rule
  is where the phase would sit if the rack were perfectly even.
*/
.racksload { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1px; background: var(--seam); border: 1px solid var(--seam); }
/* Vertical: one rack (or service) per row, its bars on the left, what goes with it on the right. */
.racksload.vertical { grid-template-columns: 1fr; }
.racksload.vertical .rackload { display: grid; grid-template-columns: minmax(360px, 3fr) minmax(260px, 2fr); gap: 6px 18px; align-items: start; padding: 8px 12px 10px; }
.rackmoves h4 { margin: 0 0 4px; font: 700 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.rackmoves ul { margin: 0 0 6px; padding: 0; list-style: none; font: 11px/1.6 var(--data); color: var(--ink); columns: 2; column-gap: 16px; }
.rackmoves li b { font-weight: 600; }
.rackmoves li span { color: var(--ink-faint); }
.rackmoves .drow { display: flex; align-items: center; gap: 8px; }
.rackload.service.bad h3 em { color: #ff6b7a; }
/* On-site verification: a metered voltage and a technician's own reading, beside the calculated amps. */
.dashverify { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--seam); }
.dashverify em { font-style: normal; font-family: var(--data); font-size: 10.5px; color: var(--ink-faint); }
.dashverify em.bad { color: #ff6b7a; font-weight: 600; }
.dashrack { margin-bottom: 2px; }
.dashracks { max-height: 60vh; overflow-y: auto; }
.dashrack > summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; font: 600 10.5px/1.6 var(--data); color: var(--ink); }
.dashrack > summary span { color: var(--ink-faint); font-weight: 400; font-size: 9.5px; }
.dashrack h5 { margin: 0 0 1px; display: flex; gap: 8px; align-items: baseline; font: 600 10.5px/1.4 var(--data); color: var(--ink); }
.dashrack h5 span { color: var(--ink-faint); font-weight: 400; font-size: 9.5px; }
.phase.small { margin: 1px 0; }
.phase.small .track { height: 7px; }
.phase.small b { font-size: 9.5px; min-width: 52px; }
.rackload { background: var(--panel); padding: 12px 14px 14px; }
.rackload h3 {
  margin: 0 0 9px; display: flex; align-items: baseline; gap: 10px;
  font: 700 11.5px/1 var(--chrome); letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.rackload h3 span { color: var(--ink-faint); font-weight: 400; letter-spacing: .08em; font-size: 10px; }
.rackload h3 em { margin-left: auto; font-style: normal; color: var(--amber); font-family: var(--data); font-size: 11px; }
.rackload h3 em.bad { color: #ff6b7a; }
.phase { display: flex; align-items: center; gap: 9px; margin: 3px 0; }
.phase i { font-style: normal; width: 22px; color: var(--ink-faint); font: 600 9.5px/1 var(--chrome); letter-spacing: .14em; }
.phase .track { position: relative; flex: 1; min-width: 0; height: 12px; background: #0e1114; border: 1px solid #1b1e23; }
/* A bar never runs past its track, over the amps beside it (2026-09-27). */
.phase .bar { height: 100%; max-width: 100%; background: var(--metal); }
.phase .bar.over { background: linear-gradient(180deg, #ff9aa4, #d0384a); }
/* The even third, drawn as the rule the bars are read against. */
.phase .track u { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--ink-dim); text-decoration: none; }
.phase b { min-width: 68px; text-align: right; font-family: var(--data); font-size: 10.5px; font-weight: 400; color: var(--ink-dim); }

.applybar { display: flex; align-items: center; gap: 14px; margin-top: 16px; }
.applybar .apply {
  padding: 8px 20px; border: 1px solid var(--amber-lo); background: transparent; color: var(--amber);
  font: 600 10px/1.6 var(--chrome); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
}
.applybar .apply:hover { background: var(--amber-lo); color: var(--ground); }
.applybar .apply:disabled { opacity: .5; cursor: default; }
.applybar .result { font-family: var(--data); font-size: 11px; color: var(--amber-hi); }

/* The generated cases: a proposal beside the list, so both read the same way. */
.caseplan { padding: 14px 16px 18px; }
.caseplan h3 {
  margin: 0 0 4px; font: 700 12px/1 var(--chrome); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink);
}
.keyhint.short { color: #ff9aa4; }
/* What an itinerary lacks, said in its preview before it goes (no confirmation number): amber, a warning, not a refusal. */
.keyhint.short.itinwarn { color: var(--amber-hi); font-weight: 600; }
/* An itinerary's tick to attach the receipt: the words in the case they are written in, the file's name whole. */
.askbox.askdistribute label.itintick { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 6px 0; text-transform: none; letter-spacing: 0; }
.askbox.askdistribute label.itintick > span { text-transform: none; letter-spacing: 0; font: 12px var(--data); color: var(--ink); }
/*
  The Combine tool and the share rules on the generated cases (the owner, 2026-09-29). On,
  the cursor over a case is a wand with a plus (`--wand`, set by `casePlanView`); the first
  case clicked is outlined; a box combined into another is struck and dimmed, its number kept.
*/
.caseplan .caseplanhead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin-bottom: 4px; }
.caseplan .caseplanhead h3 { margin: 0; }
.caseplan .keyhint {
  margin: 3px 0 12px; color: var(--ink-faint);
  font-family: var(--data); font-size: 10px; letter-spacing: .04em;
}
.caseplan .caseplanhead .keyhint { margin: 0; }
.caseplan .keyhint.combinesaid { color: var(--amber-hi); font-size: 11px; margin: -6px 0 10px; }
.caseplan .combinetool {
  padding: 6px 12px; border: 0; background: var(--plate); color: var(--amber);
  font: 600 9.5px/1 var(--chrome); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.caseplan .combinetool:hover:not(:disabled) { color: var(--ground); background: var(--metal); }
.caseplan .combinetool:disabled { opacity: .5; cursor: default; }
.caseplan .combinetool.on { background: var(--amber); color: var(--ground); }
.caseplan .linkish, .askcaseshares .linkish {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--amber-hi);
  font: 11.5px var(--data); text-decoration: underline; text-underline-offset: 2px;
}
.caseplan.combining table.combinable tbody tr:not(.struck), .caseplan.combining table.combinable tbody tr:not(.struck) td { cursor: var(--wand, copy); }
/* The Join tool on the Pre-rig truss block (the owner, 2026-10-07): the same wand over every piece until the other is clicked; a joined piece is marked at its left edge. */
.caseplan.joining table.joinable tbody tr, .caseplan.joining table.joinable tbody tr td { cursor: var(--wand, copy); }
.caseplan table.joinable tbody tr.joinedrow td:first-child { box-shadow: inset 3px 0 0 var(--amber); }
/* The roster's Merge tool armed (the owner, 2026-10-07): the wand over every row until the other half is clicked. */
.sheetframe.merging td, .sheetframe.merging th.rownum { cursor: var(--wand, copy); }
.caseplan table tbody tr.combinefrom td { box-shadow: inset 0 2px 0 var(--amber), inset 0 -2px 0 var(--amber); }
.caseplan table tbody tr.struck td { text-decoration: line-through; color: var(--sheet-dim); }
.caseplan table tbody tr.struck td.combinenote { text-decoration: none; }
.caseplan table tbody td.combinenote { white-space: nowrap; font-size: 11px; color: var(--sheet-dim); }
.caseplan table tbody td.combinenote .linkish { color: #8a4b00; font-size: 11px; }
.caseplan .combinesaid:empty { display: none; }
.askbox.askcaseshares { max-width: 680px; }
.askbox.askcaseshares .shareRules { display: flex; flex-direction: column; gap: 10px; max-height: 55vh; overflow: auto; width: 100%; }
.askbox.askcaseshares .sharerule { border: 1px solid var(--seam-bright); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.askbox.askcaseshares .sharerule .askgrid { align-items: flex-end; }

/* ---- the show record --------------------------------------------------- */
/*
  Editable in place. This is the show's own record and whoever is looking at it owns the
  show, so there is no read-only mode to switch out of.

  The owner, 2026-09-19: "the text that appears after like show name, show date, there's a
  big tab space there" and "the borders are being overwritten by text in some places." Both
  came from the same cause — a fixed 148px label gutter, wide enough for the longest label
  on the page, left after "VENUE" as dead space; and a hint sentence printed as its own
  wrapping line after the input, which on a long hint grew that one field taller than its
  row neighbours, so the shared 1px grid-line border no longer read as a straight rule. The
  label now sizes to its own text (capped, so one runaway label cannot swallow the row), and
  the hint moved to a tooltip — the label's `title` before, now a small "i" glyph after the
  input that carries the same text on hover — so every field is one line, always.
*/
.record {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px; background: var(--seam); border: 1px solid var(--seam);
}
.field { display: flex; align-items: center; gap: 7px; padding: 5px 10px; background: var(--panel); }
.field > span {
  flex: 0 1 auto; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
}
.field input, .field select {
  flex: 1; min-width: 0; padding: 4px 8px; border: 1px solid transparent; background: transparent;
  color: var(--ink); font-family: var(--data); font-size: 11.5px;
}
.field input:hover, .field select:hover { border-color: var(--seam); background: #0e1114; }
.field input:focus, .field select:focus { outline: none; border-color: var(--amber); background: #000; }
.field input.saving, .field select.saving { border-color: var(--amber-hi); background: #2a2113; }
.field input.saved, .field select.saved { border-color: #3fbf5f; }
.field .fieldinfo {
  flex: none; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--seam);
  color: var(--ink-faint); font: italic 9px/12px var(--chrome); text-align: center; cursor: help; user-select: none;
}
.field .fieldinfo:hover { color: var(--ink); border-color: var(--seam-bright); }
/*
 * The same small "i" glyph, for a standing hint or warning anywhere outside the Show Record
 * grid — self-contained (inline-flex, not dependent on a `.field` flex parent for its size)
 * so it works beside a heading, a panel caption or a plain paragraph alike. What used to sit
 * on the page as permanent red text is the title attribute now, read on hover.
 */
.hinticon {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--seam);
  color: var(--ink-faint); font: italic 9px/1 var(--chrome); text-align: center; cursor: help; user-select: none;
}
.hinticon:hover { color: var(--ink); border-color: var(--seam-bright); }
/* Collaborators not yet in Contacts: named plainly, one Add per name, never a blocking error. */
.collabwarn { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin-top: -2px; }
.collabwarn b { color: var(--amber-hi); font-weight: 600; }
.collabwarn .scopetoggle { padding: 1px 8px; font-size: 9.5px; }

/* One column, top to bottom: a list of documents is read down, not scanned across. */
.sheets.one { grid-template-columns: 1fr; }
/* A document list is compact: a row the height of its buttons, no more (the owner, 2026-10-03: "the spacing on the rows doesn't need to be as tall"). */
.sheets.one .sheet { padding: 4px 12px; gap: 10px; }
.sheets.one .sheet .rowprint { padding: 2px 9px; margin-left: 8px; }
.sheets.one .sheet .rowsetup, .sheets.one .sheet .rowrender { margin-left: 6px; }
/* The label lists' Archived section: sheets put away, folded until opened (the owner, 2026-10-07). */
.archived { margin-top: 22px; }
.archived > .archivehead { display: block; width: 100%; padding: 7px 2px; background: none; border: 0; border-top: 1px solid var(--seam); color: var(--ink-dim); font: 700 11px/1.4 var(--chrome); letter-spacing: .08em; text-transform: uppercase; text-align: left; cursor: pointer; }
.archived > .archivehead:hover, .archived > .archivehead:focus-visible { color: var(--ink); outline: none; }
.archived > .sheets[hidden] { display: none; }

/* Paperwork › Stock (web/stock.js): the label stock to order (the owner, 2026-10-07). */
.stock .stockrules { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 4px 0 10px; }
.stock .stockfield { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.stock .stockspare { width: 84px; }
.stock .stocktotals { margin-top: 20px; }
.stock .stocktable td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stock .stocktable a { color: var(--amber); }
@media (max-width: 900px) { .stock .stockrules { flex-direction: column; align-items: stretch; } }
.instructions details { border-bottom: 1px solid var(--seam); }
.instructions summary { padding: 5px 6px; cursor: pointer; display: flex; align-items: center; gap: 10px; }
.instructions summary em { margin-left: auto; font-style: normal; font-family: var(--data); font-size: 10px; color: var(--ink-faint); }
.instructions pre { margin: 0 6px 10px; padding: 10px 12px; background: var(--panel); white-space: pre-wrap; font: 12px/1.45 var(--data); }

/* ---- cable: the commands --------------------------------------------- */

/* The Lumenarchy commands, as buttons rather than a dropdown: these are used every day. */
.commands {
  display: flex; align-items: stretch; justify-content: flex-end; gap: 1px; position: relative;
  padding: 1px; background: var(--seam); border: 1px solid var(--seam); border-top: 0; border-bottom: 0;
  flex-wrap: wrap;
}
.commands .cmd {
  padding: 7px 12px; border: 0; background: var(--plate); color: var(--amber);
  font: 600 9.5px/1 var(--chrome); letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
}
.commands .cmd:hover { color: var(--ground); background: var(--metal); }
.commands .cmd.running { opacity: .5; }
.commandform {
  position: absolute; right: 0; top: 100%; z-index: 30; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; background: var(--panel); border: 1px solid var(--seam-bright);
  box-shadow: 0 16px 36px rgba(0,0,0,.6);
}
.commandform b { font-size: 11px; color: var(--ink); white-space: nowrap; }
.commandform input, .commandform select {
  width: 96px; padding: 4px 7px; border: 1px solid var(--seam); background: #0e1114;
  color: var(--ink); font-family: var(--data); font-size: 11px;
}
.commandform input:focus, .commandform select:focus { outline: none; border-color: var(--amber); }
.commandform .go {
  padding: 4px 14px; border: 1px solid var(--amber-lo); background: transparent; color: var(--amber);
  font: 600 9.5px/1.6 var(--chrome); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
}
/* Columns…: which of the drawing's fields the EXCHANGE sheet shows — a tick list under the
   toolbar, searchable, since the export lists sixty-odd of them (owner, 2026-09-24). */
.commandform.columnpick { flex-direction: column; align-items: stretch; gap: 6px; width: 300px; max-height: min(72vh, 560px); }
.columnpick .row { display: flex; align-items: center; gap: 6px; }
.columnpick .row em { font-style: normal; font-size: 10.5px; color: var(--ink-dim); margin-left: auto; }
.columnpick input.find { width: 100%; }
.columnpick .columnlist { overflow-y: auto; display: flex; flex-direction: column; gap: 1px; padding: 3px 0; border-top: 1px solid var(--seam); border-bottom: 1px solid var(--seam); }
.columnpick label { display: flex; align-items: center; gap: 8px; padding: 2px 4px; font: 11.5px var(--data); color: var(--ink); cursor: pointer; white-space: nowrap; }
.columnpick label:hover { background: var(--panel-hi); }
.columnpick label span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.columnpick label i { font-style: normal; font: 600 9px/1 var(--chrome); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.columnpick label input { margin: 0; accent-color: var(--amber); }
.columnpick .columnlist .empty { margin: 6px 4px; font-size: 11px; color: var(--ink-faint); }
@media (max-width: 900px) { .commandform.columnpick { width: min(300px, calc(100vw - 32px)); } }
/* A command's result sits in the bottom-right corner, fixed, like the print notice: a box
   that came and went beside the toolbar's buttons moved them under the pointer. */
.cmdresult {
  position: fixed; right: calc(22px + var(--assist-w, 0px) + var(--chat-w, 0px)); bottom: 22px; z-index: 92; max-width: 560px; padding: 10px 14px;
  background: var(--panel); border: 1px solid var(--seam-bright);
  box-shadow: 0 18px 40px rgba(0,0,0,.6);
  font-family: var(--data); font-size: 11px; color: var(--ink-dim);
}
.cmdresult.did { color: var(--amber-hi); }
.cmdresult.failed { color: #ff6b7a; }
.cmdresult small { display: block; color: var(--ink-faint); margin-top: 2px; }
/* Each warning on its own line: run together, a list of blocking circuits reads as one
   nonsense word. */
.cmdresult em { display: block; font-style: normal; color: var(--ink-faint); margin-top: 2px; }
.cmdresult button { margin-top: 6px; }
/* The × that puts the box away, top right; the words keep clear of it. */
.cmdresult { padding-right: 30px; }
.cmdresult .cmdclose {
  position: absolute; top: 3px; right: 3px; margin: 0; width: 22px; height: 22px; padding: 0;
  display: grid; place-items: center; border: 1px solid var(--seam-bright); border-radius: 4px; background: transparent;
  font: 16px/1 var(--chrome); color: var(--ink); cursor: pointer;
}
.cmdresult .cmdclose:hover, .cmdresult .cmdclose:focus-visible { background: var(--amber); border-color: var(--amber); color: var(--ground); outline: none; }

/* A heading inside a view, wherever it appears. */
main h3 {
  margin: 0 0 4px; font: 700 12px/1 var(--chrome); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink);
}

/* ---- the menu bar ------------------------------------------------------- */
/*
  Traditional, because this is an application people build shows in and every command should
  be findable in one obvious place, not only on the sheet that owns it.
*/
.menubar {
  display: flex; align-items: stretch; height: 26px;
  background: #101317; border-bottom: 1px solid var(--seam);
}
.menuwrap { position: relative; }
.menubar .menu {
  height: 100%; padding: 0 13px; border: 0; background: transparent; color: var(--ink-dim);
  font-size: 11.5px; cursor: pointer;
}
.menubar .menu:hover, .menubar .menu[aria-expanded="true"] { background: var(--panel-hi); color: var(--ink); }
.menupanel {
  position: absolute; left: 0; top: 100%; z-index: 80; min-width: 240px; padding: 5px 0;
  background: var(--panel); border: 1px solid var(--seam-bright);
  box-shadow: 0 16px 36px rgba(0,0,0,.62);
}
.menupanel button {
  display: flex; width: 100%; align-items: center; gap: 20px; padding: 6px 14px;
  border: 0; background: transparent; color: var(--ink); cursor: pointer;
  font-size: 12px; text-align: left; white-space: nowrap;
}
.menupanel button:hover { background: var(--panel-hi); color: var(--amber-hi); }
.menupanel button em { margin-left: auto; font-style: normal; color: var(--ink-faint); font-family: var(--data); font-size: 10px; }
.menupanel hr { margin: 4px 0; border: 0; border-top: 1px solid var(--seam); }
.aboutcard { padding: 4px 14px 8px; }
.aboutcard b { font-size: 14px; color: var(--ink); }
.aboutcard .aboutby { color: var(--ink-dim); }
.aboutcard p { margin: 6px 0 0; font-size: 11.5px; color: var(--ink-dim); }
.aboutcard .aboutbuild { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-family: var(--data); color: var(--ink-faint); }
.aboutcard .aboutbuild > span { white-space: nowrap; }
.aboutcard .aboutspeed { margin-top: 8px; border-top: 1px solid var(--line, #333); padding-top: 6px; }
.aboutcard .aboutspeed p { margin: 4px 0 0; color: var(--ink-faint); max-width: 420px; }
/* About › Size: a list's heaviest fields indented under it (`drawSize` in web/menubar.js). */
.aboutcard .aboutsize p.aboutsizefield { margin-left: 16px; font-size: .92em; }
.aboutcard .aboutcopy { padding: 3px 9px; border: 1px solid var(--seam-bright); background: transparent; color: var(--amber); font: 600 9.5px/1 var(--chrome); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.aboutcard .aboutcopy:hover { color: var(--ground); background: var(--metal); }

/* The frame sits under the faceplate and the menu bar now. */
.frame { min-height: calc(100vh - 75px); }
.gridwrap { max-height: calc(100vh - 296px); }
.grid thead th { top: 0; }

/* ---- the back end ------------------------------------------------------- */
.admin .modes { flex-wrap: wrap; }
.admin .cablebody > .keyhint { margin: 12px 14px 10px; }
.admin > .keyhint { margin-bottom: 14px; }

/* ---- the rack builder --------------------------------------------------- */
/* A height nobody has stated is an assumption, and it says so rather than reading as fact. */
.shelfunits { display: inline-flex; align-items: center; gap: 4px; }
input.shelfru {
  width: 44px; padding: 2px 4px; background: transparent; border: 1px solid transparent;
  color: var(--ink-dim); font-family: var(--data); font-size: 11px; text-align: right;
}
input.shelfru:hover, input.shelfru:focus {
  border-color: var(--seam); background: #0e1114; color: var(--ink); outline: none;
}
input.shelfru.assumed { color: var(--amber); border-color: var(--amber-lo); }
input.shelfru::-webkit-inner-spin-button { opacity: 0; margin-left: 6px; transform: scale(.8); }
input.shelfru:hover::-webkit-inner-spin-button, input.shelfru:focus::-webkit-inner-spin-button { opacity: 1; }
/* What the builder says when a drop could not land where it was aimed. */
.racksaid {
  margin: 0 0 8px; padding: 7px 12px; background: var(--panel-hi);
  border-left: 2px solid var(--amber); color: var(--ink-dim);
  font-family: var(--data); font-size: 11px;
}
/*
  A rack drawn as a rack. A device is dragged into the unit it should sit at and takes as
  many units as it is tall, which is the thing a table could never show.
*/
.rackpicker { display: flex; gap: 1px; background: var(--seam); padding: 1px; margin-bottom: 12px; }
.rackpicker button {
  padding: 8px 16px; border: 0; background: var(--panel); color: var(--ink-dim); cursor: pointer;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.rackpicker button b { font: 700 12px/1 var(--chrome); letter-spacing: .12em; }
.rackpicker button span { font-family: var(--data); font-size: 9.5px; color: var(--ink-faint); }
.rackpicker button[aria-current="true"] { background: var(--plate); color: var(--amber); }
.rackpicker button[aria-current="true"] span { color: var(--amber-lo); }

.builder { padding: 12px 14px 16px; }
/* The library a little wider, so more of a device's name shows (the owner, 2026-09-25). */
.buildgrid {
  display: grid; grid-template-columns: 236px 290px 290px minmax(300px, 1fr);
  gap: 14px; align-items: start;
}
.rackdata { overflow-x: auto; }
/* A device fills the units it covers, so the rack reads as blocks rather than lines. */
.builder .ru.filled { min-height: 20px; }
.rackface, .shelf, .rackdata { border: 1px solid var(--seam); background: var(--panel); }
.rackface h4, .shelf h4, .rackdata h4 {
  margin: 0; padding: 8px 12px; background: var(--plate); border-bottom: 1px solid var(--seam);
  font: 700 10px/1 var(--chrome); letter-spacing: .18em; text-transform: uppercase; color: var(--amber);
}
.builder .ru {
  display: flex; align-items: center; gap: 9px; height: 20px; padding: 0 10px;
  font-family: var(--data); font-size: 10.5px; color: var(--ink-faint);
  border-bottom: 1px dashed #1a1d22;
}
.builder .ru.filled {
  background: #15181d; color: var(--ink); border-bottom: 1px solid var(--seam);
  cursor: grab; box-shadow: inset 3px 0 0 var(--amber);
}
.builder .ru.covered { background: #121519; border-bottom: 1px dashed #202429; }
.builder .ru.target { background: #2a2113; box-shadow: inset 0 0 0 1px var(--amber); }
.shelf { padding-bottom: 6px; }
/* The library's folding headings: tight, a caret, deeper ones indented. */
.shelf .libhead {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 8px; border: 0;
  border-bottom: 1px solid #1b1e23; background: var(--plate); color: var(--amber);
  font: 700 9.5px/1.4 var(--chrome); letter-spacing: .14em; text-transform: uppercase; text-align: left; cursor: pointer;
}
.shelf .libhead::before { content: '\25b8'; font-size: 9px; color: var(--ink-faint); }
.shelf .libhead[aria-expanded="true"]::before { content: '\25be'; }
.shelf .libhead:hover { color: var(--amber-hi); }
.shelf .libhead.depth1 { padding-left: 18px; background: var(--panel); }
.shelfitem .heart { flex: none; border: 0; background: transparent; padding: 0 2px; color: var(--ink-faint); font-size: 11px; cursor: pointer; line-height: 1; }
.shelfitem .heart.on, .shelfitem .heart:hover { color: var(--amber-hi); }
.shelf .libbody .keyhint.short { margin: 4px 12px; }
.shelf .libhead.depth2 { padding-left: 28px; background: var(--panel); }
.shelf .libbody.depth1 .shelfitem { padding-left: 22px; }
.shelf .libbody.depth2 .shelfitem { padding-left: 32px; }
.shelf.takesback { outline: 2px dashed var(--amber); outline-offset: -4px; }
.cellmenu button:disabled { color: var(--ink-faint); cursor: default; }
.shelfitem {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: grab;
  border-bottom: 1px solid #1b1e23; font-family: var(--data); font-size: 10.5px; color: var(--ink);
}
.shelfitem:hover { background: var(--panel-hi); }
.shelfitem span { margin-left: auto; color: var(--ink-faint); }
.rackdata table { border: 0; }

/* ---- loading a new bill of materials ------------------------------------ */
.importbar {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  padding: 8px 12px; background: var(--panel); border: 1px solid var(--seam);
}
.importbar span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.importbar .bompath {
  flex: 1; min-width: 0; padding: 5px 9px; border: 1px solid var(--seam); background: #0e1114;
  color: var(--ink); font-family: var(--data); font-size: 11px;
}
.importbar .bompath:focus { outline: none; border-color: var(--amber); }
.bomdiff { margin-bottom: 14px; }
/* An addition, a cut and a change each read at a glance. */
tr.diff.added td { color: #6fd48a; }
tr.diff.removed td { color: #ff8f9b; }
tr.diff.changed td { color: var(--amber-hi); }

/* Spares edit either way: set the percentage or set the count. */
.info input.sp {
  width: 74px; padding: 3px 6px; border: 1px solid transparent; background: transparent;
  color: var(--ink); font-family: var(--data); font-size: 11.5px; text-align: right;
}

/*
 * The spinner, out of the way of the number.
 *
 * A browser's stepper sits hard against the digits and is drawn at the browser's own size,
 * which over a right-aligned number reads as part of it — six with two arrows on it is not
 * a number anybody can check at a glance. This shrinks it, holds it away from the text, and
 * only shows it on the field being worked in.
 */
input[type=number].sp, input[type=number].sticks { padding-right: 4px; }
input[type=number].sp::-webkit-inner-spin-button,
input[type=number].sticks::-webkit-inner-spin-button {
  opacity: 0; margin-left: 8px; height: 18px; transform: scale(.85);
  transition: opacity .1s;
}
input[type=number].sp:hover::-webkit-inner-spin-button,
input[type=number].sp:focus::-webkit-inner-spin-button,
input[type=number].sticks:hover::-webkit-inner-spin-button,
input[type=number].sticks:focus::-webkit-inner-spin-button { opacity: 1; }
/* Firefox draws its own, and only honours being asked for it or not. */
input[type=number].sp, input[type=number].sticks { -moz-appearance: textfield; }
input[type=number].sp:hover, input[type=number].sp:focus,
input[type=number].sticks:hover, input[type=number].sticks:focus { -moz-appearance: number-input; }
.info input.sp:hover { border-color: var(--seam); background: #0e1114; }
.info input.sp:focus { outline: none; border-color: var(--amber); background: #000; }
.publishpath {
  flex: 1; min-width: 0; padding: 5px 9px; background: #0e1114; border: 1px solid var(--seam);
  color: var(--ink-dim); font-family: var(--data); font-size: 11px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.importbar .result { font-family: var(--data); font-size: 10.5px; color: var(--ink-faint); }
.importbar .result.did { color: var(--amber-hi); }
.importbar .result.failed { color: #ff6b7a; }
.scalarfield { display: flex; align-items: center; gap: 12px; padding: 10px 14px 16px; }
.scalarfield span { min-width: 130px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.scalarfield input.scalar {
  flex: 1; padding: 7px 10px; border: 1px solid var(--seam); background: #0e1114;
  color: var(--ink); font-family: var(--data); font-size: 12px;
}
.scalarfield input.scalar:focus { outline: none; border-color: var(--amber); background: #000; }
.scalarfield input.scalar.saving { border-color: var(--amber-hi); background: #2a2113; }
.scalarfield input.scalar.saved { border-color: #3fbf5f; }

/* ---- sending paperwork out ---------------------------------------------- */
.sendpanel { border: 1px solid var(--seam); background: var(--panel); padding: 12px 14px 14px; margin-bottom: 14px; }
.sendpanel > .keyhint { margin: 0 0 10px; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1px; background: var(--seam); border: 1px solid var(--seam); margin-bottom: 12px; }
.person { display: flex; align-items: center; gap: 9px; padding: 7px 11px; background: var(--panel); cursor: pointer; font-size: 11.5px; }
.person:hover { background: var(--panel-hi); }
.person input { accent-color: var(--amber); }
.person b { color: var(--ink); }
.person span { margin-left: auto; color: var(--ink-faint); font-family: var(--data); font-size: 10px; }
.sendpreview {
  margin: 0 0 12px; padding: 12px 14px; max-height: 260px; overflow: auto;
  background: #0e1114; border: 1px solid var(--seam); color: var(--ink-dim);
  font-family: var(--data); font-size: 11px; line-height: 1.55; white-space: pre-wrap;
}

/* ---- the case-is-full prompt -------------------------------------------- */
/*
  Raised at the moment a part is assigned rather than found later on a report, and it stays
  until it is answered — a packing decision should not vanish while you are looking at the
  sheet to make it.
*/
.casefull {
  position: fixed; right: calc(22px + var(--assist-w, 0px) + var(--chat-w, 0px)); bottom: 22px; z-index: 90; max-width: 560px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 14px 16px; background: var(--panel); border: 1px solid var(--amber-lo);
  box-shadow: 0 20px 44px rgba(0,0,0,.66);
}
.casefull b {
  flex: 1 0 100%; font: 700 11px/1 var(--chrome); letter-spacing: .16em;
  text-transform: uppercase; color: var(--amber);
}
.casefull > span { flex: 1 0 100%; font-family: var(--data); font-size: 11.5px; color: var(--ink); }
.casefull .cmd {
  padding: 6px 14px; border: 1px solid var(--amber-lo); background: transparent; color: var(--amber);
  font: 600 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.casefull .cmd:hover { background: var(--amber-lo); color: var(--ground); }
.casefull .cmd.dismiss { border-color: var(--seam); color: var(--ink-faint); }
.casefull .cmd.dismiss:hover { background: var(--seam); color: var(--ink); }
.menupanel button:disabled { color: var(--ink-faint); cursor: default; }
.menupanel button:disabled:hover { background: transparent; color: var(--ink-faint); }

/* ---- the sheet is a spreadsheet ---------------------------------------- */
/*
  The chrome stays dark — it is a rack panel and it should look like one. The sheet does not.
  People know what a spreadsheet looks like: a light ground, black text, thin grey rules. Dark
  on dark was the one place the theme cost legibility, and legibility is the whole job here.

  So: black text on white, and white text only where a cell is deliberately dark — a tape
  colour so dark that black would disappear on it.
*/
:root {
  --sheet: #ffffff;
  --sheet-alt: #f4f6f8;
  --sheet-line: #d3d8de;
  --sheet-rule: #b8bfc8;
  --sheet-ink: #14171b;
  --sheet-dim: #5d6672;
  --sheet-head: #e6e9ed;
  --sheet-sel: #cddcef;
  --sheet-at: #a9c6e8;
}

.sheetframe { border-color: var(--seam-bright); }
.gridwrap { background: var(--sheet); }

.grid tbody td {
  background: var(--sheet);
  color: var(--sheet-ink);
  border-right: 1px solid var(--sheet-line);
  border-bottom: 1px solid var(--sheet-line);
}
.grid tbody tr:nth-child(even) td { background: var(--sheet-alt); }
/* A sheet's rows are never the page's dark stripe (`tbody tr:nth-child(even)` above): a cell
   with any see-through colour painted it two shades down the column, dark on every second row
   (the Circuits view 2026-09-25, the Days sheet 2026-10-03). */
.grid tbody tr:nth-child(n), .grid tbody tr:nth-child(n):hover { background: transparent; }
/* A hover lightens a plain cell; a tinted one keeps its colour, odd row or even. */
.grid tbody tr:hover td:not([class*="tint-"]) { background: #eaf0f7; }
.grid tbody tr:hover { box-shadow: none; }
.grid td.dim { color: var(--sheet-dim); }
.grid td.ro { color: var(--sheet-dim); background: #eef0f3; }
.grid tbody tr:nth-child(even) td.ro { background: #e9ecef; }
/*
 * Port tints: the same colour on every row, stripe or no stripe.
 *
 * Pale on purpose. What is being read is the universe number; the tint only says which of
 * these are the spares, and a strong green down twenty columns is a wall.
 */
.grid tbody td.tint-active, .grid tbody tr:nth-child(even) td.tint-active { background: #e9f6ec; }
.grid tbody td.tint-spare, .grid tbody tr:nth-child(even) td.tint-spare { background: #fbeafb; }
/* Cable against the order's Spare column, the one typed by hand: a subtle pink, the same on every row (the owner, 2026-10-06). */
.grid tbody td.tint-sparecol, .grid tbody tr:nth-child(even) td.tint-sparecol { background: #fdeef2; }
.grid tbody td.tint-heldcad, .grid tbody tr:nth-child(even) td.tint-heldcad { color: #c2410c; font-weight: 600; }
/* A cable part with a length and neither a loom id nor a case id: both id cells a subtle red (the owner, 2026-10-04). */
.grid tbody td.tint-needsids, .grid tbody tr:nth-child(even) td.tint-needsids { background: #fde3e3; }
/* Each part's group of columns on the cable sheet starts with a thicker line (the owner, 2026-10-04:
   "thick border on the left side of each P1, P2, P3, P4"): the heading, its filter box and every cell. */
.grid th.partstart, .grid tbody td.partstart { border-left: 2px solid var(--sheet-rule); }
/* A twofer, and the leg it makes: solid amber with dark ink, which reads at a glance where a
   tinted brown did not. */
.grid tbody td.tint-twofer, .grid tbody tr:nth-child(even) td.tint-twofer { background: #f7a531; color: #101317; }
.grid tbody td.tint-leg, .grid tbody tr:nth-child(even) td.tint-leg { background: #ffd58a; color: #101317; }
/*
 * The cable sheet's Circuits view: an unused circuit wears the spare pink above; a leg below a
 * twofer a faint amber, fainter still where the leg carries nothing. Opaque, and the same on
 * every row — the translucent tints these replaced let the page's dark even-row background
 * through, and every second circuit read as dark purple with black ink on it (the owner,
 * 2026-09-25: "the highlighting for circuits in cable is too hard to read, I can't see
 * anything").
 */
.grid tbody td.tint-legline, .grid tbody tr:nth-child(even) td.tint-legline { background: #fff0d9; }
.grid tbody td.tint-legline-faint, .grid tbody tr:nth-child(even) td.tint-legline-faint { background: #fff8ee; }
/* A stick's row under an open position on the Positions sheet (the owner, 2026-09-25): a shade under the position's own. */
.grid tbody td.tint-stick, .grid tbody tr:nth-child(even) td.tint-stick { background: #eef2f7; color: #3b4652; }

.grid thead th {
  background: var(--sheet-head);
  color: #2c333c;
  border-bottom: 1px solid var(--sheet-rule);
  border-right: 1px solid var(--sheet-rule);
}
.grid thead th.sorted { color: #a35200; }
.grid thead th[data-c]:hover { color: #000; background: #dde2e8; }
.grid th.rownum {
  background: var(--sheet-head);
  color: #5d6672;
  border-right: 1px solid var(--sheet-rule);
  border-bottom: 1px solid var(--sheet-line);
}
.grid tbody tr:nth-child(even) th.rownum { background: #dfe3e8; }

/*
  A dragged selection used to smear the browser's own text highlight across the cells. The
  grid does its own selecting, so the native one is turned off — it was never adding
  anything, and over a block of forty cells it was unreadable.
*/
.grid { user-select: none; }
.grid .cell-edit { user-select: text; }

.grid td.sel { background: var(--sheet-sel) !important; }
.grid tbody tr:nth-child(even) td.sel { background: #c6d6e9 !important; }
/* A filled cell keeps its fill's ink — white on a dark tape — which vanished on the selection's light blue. */
.grid td.sel.filled:not(.at) { color: #1e2733 !important; }
/* The active cell's own outline is a lone cell's (`:where`, so a saving or failed cell still wins as before); inside a block
   the block's outline stands for it (below). */
.grid td.at:where(:not(.inblock)) { background: var(--sheet-at) !important; color: #000; box-shadow: inset 0 0 0 2px #0b63c5; }
.grid:focus td.at:where(:not(.inblock)) { box-shadow: inset 0 0 0 2px #0b63c5, 0 0 0 1px rgba(11,99,197,.35); }
.grid th.rownum.at { color: #fff; background: #0b63c5; }
.grid th.rownum.sel { color: #0b63c5; background: #cddcef; }
/*
 * A block of cells wears one 2px outline round its edge, as Excel draws it (the owner, 2026-10-30: "the thicker blue border
 * should extend around the whole selection"): each cell on the edge draws the sides it sits on (`mark` in web/grid.js), inside
 * the cell like the active cell's own, over its fill and a format border (`td.bordered::after`, z-index 1), under its words and
 * the fill handle. The active cell inside a block is the sheet's white with no box of its own, so the block reads as one.
 * A cell clips at its padding box, which left its own grid line cutting the line at every cell it crossed; an edge cell clips a
 * pixel further and the line covers its right and bottom grid line, so it runs unbroken from cell to cell.
 */
.grid tbody td.selt, .grid tbody td.selb, .grid tbody td.sell, .grid tbody td.selr { overflow: clip; overflow-clip-margin: 1px; }
.grid td.selt::before, .grid td.selb::before, .grid td.sell::before, .grid td.selr::before {
  content: ''; position: absolute; inset: 0 -1px -1px 0; pointer-events: none; z-index: 2;
  border: 0 solid #0b63c5;
}
.grid td.selt::before { border-top-width: 2px; }
.grid td.selb::before { border-bottom-width: 2px; }
.grid td.sell::before { border-left-width: 2px; }
.grid td.selr::before { border-right-width: 2px; }
.grid tbody tr:nth-child(n) td.at.inblock:not(.saving, .saved, .failed) { background: var(--sheet) !important; color: #000; }

.grid td.saving { background: #fff3cd !important; transition: background 0s linear .25s; }
.grid td.saved { background: #d6f0d8 !important; }
.grid td.failed { background: #fbd6da !important; box-shadow: inset 0 0 0 2px #c0392b; }
.grid td.warn { color: #a01824; background: #fbe3e5 !important; box-shadow: inset 2px 0 0 #c0392b; }

.cell-edit { background: #fff; color: #10131a; box-shadow: inset 0 0 0 2px #0b63c5; }
select.cell-edit { background: #fff; color: #10131a; }

.cellbar { background: var(--sheet-head); border-bottom: 1px solid var(--sheet-rule); }
.cellbar .addr { background: var(--plate); }
.cellbar .barvalue { color: var(--sheet-ink); }
.cellbar .barvalue:focus { background: #fff; box-shadow: inset 0 0 0 2px #0b63c5; }
.cellbar .barvalue:read-only { color: var(--sheet-dim); }

/* Sub-tables inside a tree are the same sheet. */
.grid.sub tbody td { background: var(--sheet); color: var(--sheet-ink); border-color: var(--sheet-line); }
/* A hand-built summary table's own colour beats the sheet's, same specificity fight `td.warn` already wins elsewhere. */
.grid.sub td.short { color: #c0392b; font-weight: 600; }
.grid.sub tbody tr:nth-child(even) td { background: var(--sheet-alt); }
.grid.sub thead th { background: var(--sheet-head); color: #2c333c; border-color: var(--sheet-rule); }
.grid.sub td.dim { color: var(--sheet-dim); }
.grid.sub input { color: var(--sheet-ink); }
.grid.sub input:hover { border-color: var(--sheet-rule); background: #fff; }
.grid.sub input:focus { background: #fff; box-shadow: inset 0 0 0 2px #0b63c5; }
/* A native <select> inside a light sub-table had no override at all and fell through to the
   app's own dark chrome (`select` above) — a black box on white (owner, 2026-09-20, with a
   screenshot of it on the Positions sheet). Same light treatment as `.grid.sub input`. */
.grid.sub select {
  background: transparent; border: 1px solid transparent; color: var(--sheet-ink);
  min-width: 0; padding: 2px 6px; font-family: var(--data); font-size: 11px;
}
.grid.sub select:hover { border-color: var(--sheet-rule); background: #fff; }
.grid.sub select:focus { outline: none; background: #fff; box-shadow: inset 0 0 0 2px #0b63c5; }
/* A pop-up's own field inside a light sub-table — Shifts in bulk's Position and How many TBD,
   the venue lines — took the sheet's dark ink from `.grid.sub input` over the pop-up's black
   field: dark words on black (the owner, 2026-10-06: "can't see any of that text"). The field
   is the sheet's here, white with the sheet's ink. */
.grid.sub input.askfield { background: #fff; border: 1px solid var(--sheet-line); color: var(--sheet-ink); color-scheme: light; }
.grid.sub input.askfield::placeholder { color: var(--sheet-dim); }
.grid.sub input.askfield:disabled { background: #eef0f3; color: var(--sheet-dim); }

/* A cell filled with its own colour keeps its rules but loses the banding underneath it. */
.grid td.filled { font-weight: 600; }
/* A tape code's three stripes (`fillStyle` in web/grid.js): the text crosses light and dark
   bands, so it wears a halo of the other ink (`--halo`, set with the ink). */
.grid td.striped, .cellpicker button.striped { text-shadow: 0 0 2px var(--halo), 0 0 1px var(--halo), 0 0 3px var(--halo); }
/* On a painted cell the chip takes the cell's ink, a code off the list (`GREEN/RED/GREEN`)
   included: the stray amber read as mud over a tape's fill. */
.grid tbody td.filled .cellchip.stray { color: inherit; }
.grid tbody tr:nth-child(even) td.filled,
.grid tbody tr:hover td.filled { background: inherit; }

/* Positioned, so a fill bar can sit behind the number. */
.grid td { position: relative; }

/* Bars and chips against a light cell. */
.cellbar-track { background: #e3e7ec; }
.cellbar-fill { opacity: .75; background: #f0a02a; }
.cellbar-fill.over { background: #e05a67; }
.chip { box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }

/* The plain tables that are not grids keep the dark treatment: they are chrome, not sheets. */

/* The cell picker: a list under the cell, not wherever the platform puts a native popup. */
.cellpicker {
  position: fixed; z-index: 70; max-height: 240px; overflow-y: auto;
  background: #fff; border: 1px solid var(--sheet-rule);
  box-shadow: 0 14px 30px rgba(0,0,0,.4);
}
.cellpicker button {
  display: block; width: 100%; padding: 5px 10px; border: 0; background: transparent;
  color: var(--sheet-ink); font-family: var(--data); font-size: 11.5px;
  text-align: left; white-space: nowrap; cursor: pointer;
}
.cellpicker button:hover, .cellpicker button.on { background: var(--sheet-sel); }
.cellpicker button.optadd { color: var(--sheet-dim); font-style: italic; border-top: 1px solid var(--sheet-line, #dadce0); }
.cellpicker .optmore { padding: 5px 10px; color: var(--sheet-dim); font-family: var(--data); font-size: 11px; font-style: italic; white-space: nowrap; }
/* CAD › Budget › Needs a match: the Match cell is a guess until taken, read in italics. */
.grid tbody td.tint-suggested, .grid tbody tr:nth-child(even) td.tint-suggested { font-style: italic; color: var(--sheet-dim); }
/* A date cell's calendar (`openCalendar` in web/grid.js), drawn as Google Sheets draws its own
   (the owner, 2026-10-06, with a picture of it): a white card, the month and its arrows, six
   weeks, the cell's day a blue disc, the rest of the month's neighbours grey, Today in blue. */
.cellpicker.cellcalendar {
  width: 264px; max-height: none; overflow: visible; padding: 10px 12px 8px; box-sizing: border-box;
  border: 0; border-radius: 8px; background: #fff; color: #3c4043;
  box-shadow: 0 1px 3px rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15);
  font: 13px/1 Roboto, 'Segoe UI', Arial, sans-serif;
}
.cellcalendar .calhead { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 8px 10px; }
.cellcalendar .calmonth { font-size: 15px; font-weight: 500; color: #3c4043; }
.cellcalendar .calnav { display: flex; gap: 2px; }
.cellpicker.cellcalendar button { display: inline-block; width: auto; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: center; white-space: nowrap; cursor: pointer; }
.cellpicker.cellcalendar button:hover { background: #f1f3f4; }
.cellpicker.cellcalendar .calstep { width: 30px; height: 30px; border-radius: 50%; color: #5f6368; font-size: 20px; line-height: 28px; }
.cellcalendar .calgrid { display: grid; grid-template-columns: repeat(7, 34px); justify-content: space-between; row-gap: 2px; }
.cellcalendar .calwd { height: 28px; line-height: 28px; text-align: center; font-size: 12px; color: #3c4043; }
.cellpicker.cellcalendar .calday { position: relative; width: 32px; height: 32px; margin: 0 auto; border-radius: 50%; font-size: 13px; line-height: 32px; color: #3c4043; }
.cellpicker.cellcalendar .calday.out { color: #bdc1c6; }
.cellpicker.cellcalendar .calday.today { color: #1a73e8; font-weight: 700; }
.cellpicker.cellcalendar .calday.on, .cellpicker.cellcalendar .calday.on:hover { background: #1a73e8; color: #fff; }
/* A date the column's list offers — the show's days on Shifts — carries a dot. */
.cellcalendar .calday.marked::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; opacity: .6; }
.cellpicker.cellcalendar .caltoday { margin: 6px 0 2px 8px; padding: 6px 4px; border-radius: 4px; color: #1a73e8; font-size: 14px; font-weight: 500; }
/* A time cell's list (`openTimePicker` in web/time-picker.js): the day a quarter hour at a time, the cell's time
   highlighted, the one the schedule suggests in grey italics while the cell is blank. */
.cellpicker.celltime { width: 110px; max-height: 260px; }
.cellpicker.celltime button.suggested { color: var(--sheet-dim); font-style: italic; }
/* A list whose entries say more than the cell (`describe`): a fixed width, the value in bold,
   its details wrapping under it — the CID list's case fields (the owner, 2026-09-30). */
.cellpicker.detailed { width: 300px; max-height: 360px; }
.cellpicker.detailed button {
  display: flex; flex-wrap: wrap; gap: 1px 10px; align-items: baseline;
  white-space: normal; padding: 6px 10px; border-bottom: 1px solid var(--sheet-rule);
}
/* The details sit beside a short value (a box number) and drop under a long one (an order
   line's description), always at a readable width: a two-column grid gave the details what
   a long value left over, a sliver that wrapped a letter to a line and made every entry a
   tall block of blank space (the owner, 2026-10-04, of the Order sheet's Code list). */
.cellpicker .optvalue { font-weight: 700; flex: 0 1 auto; min-width: 0; }
.cellpicker .optdetail { display: flex; flex-wrap: wrap; gap: 1px 10px; flex: 1 1 150px; min-width: 0; font-size: 10.5px; line-height: 1.35; overflow-wrap: anywhere; }
.cellpicker .optfield em {
  font-style: normal; font-family: var(--chrome); font-size: 8.5px; letter-spacing: .08em;
  text-transform: uppercase; opacity: .6; margin-right: 4px;
}
/* The multi-select: a tick down the left; a click off the list takes the ticks. */
.cellpicker.checks button { font-family: var(--data); white-space: pre; }
/* Its cell is the find box: the head says what is ticked (a tick the find leaves out is out of view) and how many are shown;
   the entry Enter or Space would tick is outlined. */
.cellpicker.checks { min-width: 220px; max-width: 420px; }
.cellpicker.checks .checkssaid {
  position: sticky; top: 0; z-index: 1; display: flex; gap: 8px; padding: 5px 10px;
  background: var(--sheet-head, #f1f3f4); border-bottom: 1px solid var(--sheet-rule); color: var(--sheet-dim);
  font-family: var(--data); font-size: 11px; white-space: nowrap;
}
.cellpicker.checks .checkstext { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cellpicker.checks .checkscount { flex: none; }
.cellpicker.checks button.here { outline: 2px solid var(--amber-hi); outline-offset: -2px; }

/* Only the arrow opens a row; the row itself is where the fields are. */
.trussrow { cursor: default; }
.trussrow i.arrow { cursor: pointer; }
.trussrow i.arrow:hover { color: var(--amber-hi); }

/* A question asked where the app is about to do more than the cell implies. */
.askbox {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 95;
  max-width: 560px; display: flex; flex-wrap: wrap; gap: 10px;
  /* Centred, and never taller than the screen: a pop-up holding a sheet scrolls inside itself, so
     its buttons stay reachable (the owner, 2026-09-25: the Rooms window ran off the screen and
     could not be closed). A pop-up never sets its own `top`: with the centring translate, a top of
     12% put a tall one's title above the screen (Page setup, Add a case, the wizard, 2026-09-26). */
  max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box;
  padding: 18px 20px; background: var(--panel); border: 2px solid rgba(255,196,107,.55); border-radius: 16px;
  box-shadow: 0 24px 56px rgba(0,0,0,.7);
}
/* A pop-up that holds a sheet: as wide as the screen allows, the sheet scrolling in its own box. */
.askbox.askwide { max-width: min(1240px, calc(100vw - 40px)); width: min(1240px, calc(100vw - 40px)); align-content: flex-start; }
.askbox.askwide .sheetframe { flex: 1 0 100%; min-width: 0; }
.askbox.askwide .gridwrap { max-height: 52vh; overflow: auto; }
.askbox.askwide .commands { flex: 1 0 100%; }
.askbox p { flex: 1 0 100%; margin: 0 0 4px; font-size: 13px; line-height: 1.5; color: var(--ink); }
.askbox .cmd {
  padding: 7px 16px; border: 1px solid var(--amber-lo); background: transparent; color: var(--amber);
  font: 600 10px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.askbox .cmd:hover { background: var(--amber-lo); color: var(--ground); }
.askbox .cmd.dismiss { border-color: var(--seam); color: var(--ink-faint); }
.askbox .cmd.dismiss:hover { background: var(--seam); color: var(--ink); }
/* The colour-code offer: three bands and a type, laid out as the colour sheet has them. */
.askbox .askrow { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 6px; }
/* Stored changes (`askStoredRenames`): a rename a line, the list scrolling where there are many. */
.askbox.askstored > p, .askbox.askstored .askstoredlist { flex: 1 0 100%; }
.askbox.askstored .askstoredlist { margin: 0 0 8px; padding-left: 18px; max-height: 40vh; overflow: auto; line-height: 1.45; }
.askbox .askrow label { display: flex; flex-direction: column; gap: 4px; }
.askbox .askrow span {
  font: 700 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.askbox .askpick {
  padding: 5px 8px; background: #0e1114; border: 1px solid var(--seam);
  color: var(--ink); font-family: var(--data); font-size: 11.5px;
  min-width: 130px; width: 130px;
}
.askbox .askpick option { background: #0e1114; color: var(--ink); }
/* The order's out-of-date bar: what changed, and the two ways to send it on. */
.orderbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 6px; padding: 6px 10px;
  border: 1px solid var(--amber-lo); background: var(--panel); font: 11px/1.4 var(--data); color: var(--ink);
}
.orderbar b { color: var(--amber); }
.orderbar .dim { color: var(--ink-faint); }
/* The order's header as a form: labels right-aligned against their values, the vendor's own as
   text, what is typed here as fields; a value changed since the file reads amber. */
.orderinfo { margin: 6px 0 10px; }
/* Folded under one line by default: the heading as the page's other h3s, the count beside it. */
.orderinfo > summary { cursor: pointer; margin: 10px 0 4px; color: var(--ink); }
.orderinfo > summary b { font: 700 12px/1 var(--chrome); letter-spacing: .16em; text-transform: uppercase; }
.orderinfo > summary em { margin-left: 10px; font: 400 11px/1 var(--data); font-style: normal; color: var(--ink-faint); }
.orderinfo > summary em.edited { color: var(--amber); }
.orderinfo[open] > summary { margin-bottom: 6px; }
/* One line while folded — the fields, the file, the sheet (the owner, 2026-10-07): the file and sheet cut with an ellipsis, never wrapped. */
.orderinfo > summary { display: flex; align-items: baseline; min-width: 0; list-style: none; white-space: nowrap; }
.orderinfo > summary::-webkit-details-marker { display: none; }
.orderinfo > summary::before { content: '\25b8'; flex: none; width: 16px; font-size: 11px; color: var(--ink-faint); }
.orderinfo[open] > summary::before { content: '\25be'; }
.orderinfo > summary b, .orderinfo > summary em { flex: none; }
.orderinfo > summary .orderfiles { flex: 0 1 auto; min-width: 0; margin-left: 14px; overflow: hidden; text-overflow: ellipsis; font: 400 11px/1 var(--data); color: var(--ink-faint); }
.orderinfobody { margin: 0 0 6px; }
.ordertitle { margin: 10px 0 4px; }
.ordertitlerow { display: flex; align-items: center; gap: 16px; }
.ordertitlerow .ordertitle { margin: 10px 0 4px 0; }
.orderinfogrid { display: grid; grid-template-columns: max-content minmax(180px, 320px); gap: 3px 10px; align-items: center; }
.orderinfolabel { text-align: right; font: 600 12px/1.4 var(--chrome); color: var(--ink-dim); }
.orderinfovalue { font: 13px/1.4 var(--data); color: var(--ink); }
.orderinfovalue.fixed { padding: 3px 6px; color: var(--ink-dim); }
input.orderinfovalue {
  box-sizing: border-box; height: 26px; padding: 3px 6px; border: 1px solid var(--seam); border-radius: 2px;
  background: var(--panel); color: var(--ink); font: 13px/1.4 var(--data);
}
input.orderinfovalue:focus { outline: none; border-color: var(--amber-hi); }
.orderinfovalue.edited { color: var(--amber); }
input.orderinfovalue.edited { border-color: var(--amber); }
.ordertoggle { display: inline-flex; align-items: center; gap: 6px; font: 12px/1.4 var(--chrome); color: var(--ink); }
/* Email the list: the changes as a table, the way the mail reads. */
.askbox.askordermail { width: min(720px, 96vw); }
.askbox.askordermail .ordermail { border-collapse: collapse; width: 100%; margin: 6px 0 8px; font: 12px/1.4 var(--data); }
.askbox.askordermail .ordermail th, .askbox.askordermail .ordermail td { padding: 3px 8px; border: 1px solid var(--seam); text-align: left; }
/* Never the page's sticky heading (`thead th`, 49px down): in the pop-up it sat over the first row. */
.askbox.askordermail .ordermail th { position: static; background: var(--panel-hi); font: 600 11px/1.4 var(--chrome); }
.askbox.askordermail .ordermail td.num { text-align: right; font-variant-numeric: tabular-nums; }
.askbox.askordermail .ordermail td.under { color: #d33; }
.askbox.askordermail .ordermail td.over { color: #2a8a3a; }
.askbox.askordermail .asktext { width: 100%; box-sizing: border-box; }
@media (max-width: 900px) {
  .orderinfogrid { grid-template-columns: 1fr; }
  .orderinfolabel { text-align: left; }
}
.cellpicker button.painted.on { outline: 2px solid var(--amber-hi); outline-offset: -2px; }
.askbox .askband { display: flex; align-items: center; gap: 6px; }
.askbox .askswatch {
  width: 12px; height: 12px; flex: none; border: 1px solid var(--seam);
}

/* A print goes without a dialog, so it has to say what it did. */
.printsaid {
  position: fixed; right: calc(22px + var(--assist-w, 0px) + var(--chat-w, 0px)); bottom: 60px; z-index: 92; max-width: 460px;
  padding: 11px 16px; background: var(--panel); border: 1px solid var(--seam-bright);
  box-shadow: 0 18px 40px rgba(0,0,0,.6);
  font-family: var(--data); font-size: 11.5px; color: var(--ink);
}
.printsaid.ok { border-color: var(--amber-lo); color: var(--amber-hi); }
.printsaid.failed { border-color: #c0392b; color: #ff8f9b; }
/* A note with buttons — a Print the Lumen Exchange Agent could not print — over the preview it is often pressed from (96). */
.printsaid.withbuttons { z-index: 97; }
.printsaid.withbuttons .cmd { margin-top: 8px; }

.sheet .rowprint {
  margin-left: 14px; padding: 4px 12px; border: 1px solid var(--amber-lo); background: transparent;
  color: var(--amber); font: 600 9px/1.6 var(--chrome); letter-spacing: .16em;
  text-transform: uppercase; cursor: pointer;
}
.sheet .rowprint:hover { background: var(--amber-lo); color: var(--ground); }
.sheet .rowsetup { margin-left: 10px; border-color: var(--seam); color: var(--ink-faint); }
.sheet .rowsetup:hover { background: var(--seam); color: var(--ink); }

/* Page setup: a printer's worth of choices in one box, laid out as a printer dialog is. */
.askbox.asksetup { max-width: 720px; }
/* Page setup opened from the print preview's bar draws over the preview panel (96) and its shade (95): behind them
   it could not be seen or reached (the owner, 2026-10-07). Escape backs out of it and leaves the preview up. */
.askbox.pagesetup { z-index: 97; }
/* Save PDF…'s question — overwrite or a new version — asked over the print preview it is opened from (`askSaveVersion`). */
.askbox.asksaveversion { z-index: 97; max-width: 560px; }
.askbox.asksaveversion .askrow.stack { flex-direction: column; align-items: stretch; gap: 6px; }
.askbox.asksaveversion .askrow.stack .cmd { text-align: left; }
.askbox.asksetup .askgrid label.wide .askpick { width: 330px; }
.askbox.asksetup .askfield.options { width: 330px; font-family: var(--data); font-size: 11px; resize: vertical; }
.askbox .setupnote { flex: 1 0 100%; font: 11px/1.5 var(--data); color: var(--ink-faint); font-style: normal; }


/* ---- the chrome, condensed ---------------------------------------------- */
/*
  Three stacked bars became two thin ones. Every row above the sheet is a row of the sheet
  you cannot see, and this app exists to show as much of the sheet as will fit.
*/
.titlebar {
  display: flex; flex-direction: column; align-items: stretch;
  background: var(--plate); border-bottom: 1px solid var(--seam); position: relative;
}
/* The top row: the mark, the menus, the apps, the New build pill, the modes and the lamp
   (the owner, 2026-09-29: the apps back up beside the menus). */
.titlebar .platetop { display: flex; align-items: stretch; height: 28px; }
.titlebar::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10) 22%, transparent 78%);
}
.titlebar .mark {
  display: flex; align-items: center; gap: 8px; padding: 0 14px 0 16px;
  border-right: 1px solid var(--seam);
}
.titlebar .mark b {
  font: 700 13px/1 var(--chrome); letter-spacing: .16em; text-transform: uppercase;
  background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.titlebar .mark span {
  font-style: normal; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-faint);
}
.titlebar .menubar { border: 0; background: transparent; height: 100%; }
.titlebar .plate-right { margin-left: auto; display: flex; align-items: center; gap: 14px; padding: 0 16px; }
/*
 * The one row is about 1190px, and the New build pill 165 more (the review, 2026-09-30: from
 * 901px to about 1190px the page scrolled sideways under every sheet). Above a phone the row wraps
 * rather than run off the window — only the pill on a narrow laptop ever takes it there — and
 * below 1200px the apps take a line of their own under the menus, as on a phone.
 */
@media (min-width: 901px) {
  .titlebar .platetop { height: auto; min-height: 28px; flex-wrap: wrap; }
  .titlebar .menubar { height: 28px; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  .titlebar .appswitch { order: 1; flex: 1 0 100%; margin: 0; border-width: 1px 0 0; }
  .titlebar .appswitch button { flex: 1 1 0; }
}

/* Show tabs: a show is a document, and the tools are the same for every one of them. */
.shows {
  display: flex; align-items: stretch; height: 30px; gap: 1px;
  background: var(--ground); border-bottom: 1px solid var(--seam); padding-left: 8px;
}
/*
 * One line, so a tab is a tab: the name, the venue faint beside it, the close mark. The
 * earlier rule above stacks them in a column; that stack is taller than the 30px strip and,
 * centred, spilled up over the title bar (the owner's screenshot, 2026-09-16), so the row
 * direction is set here where the strip's height is.
 */
.show-tab {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start;
  gap: 9px; padding: 0 14px; height: 100%; min-width: 0; overflow: hidden;
  border: 0; border-right: 1px solid var(--seam); background: #14171c;
  color: var(--ink-dim); cursor: pointer; white-space: nowrap;
}
.show-tab b { font: 700 11px/1 var(--chrome); letter-spacing: .1em; text-transform: uppercase; }
.show-tab i { font-style: normal; font-size: 9.5px; color: var(--ink-faint); max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.show-tab u { text-decoration: none; margin-left: 4px; color: var(--ink-faint); font-size: 13px; }
.show-tab u:hover { color: #ff8f9b; }
.show-tab:hover { color: var(--ink); background: var(--panel-hi); }
.show-tab[aria-selected="true"] {
  background: var(--panel); color: var(--ink); box-shadow: inset 0 2px 0 var(--amber);
}
.show-add {
  padding: 0 12px; height: 100%; border: 0; background: transparent; color: var(--ink-faint);
  font-size: 15px; cursor: pointer;
}
.show-add:hover { color: var(--amber); }
.show-share {
  margin-left: auto; padding: 0 12px; height: 100%; border: 0; border-left: 1px solid var(--seam);
  background: transparent; color: var(--ink-faint); font-size: 12px; cursor: pointer;
}
.show-share:hover { color: var(--amber); }
/*
 * The quick strip on the tab strip, pushed to the right with Share after it at the edge (the
 * owner, 2026-09-29: "Move these to the left of Share"); Share then needs no push of its own.
 * On a phone the strip is the fixed bar along the bottom instead (below).
 */
/* Neither gives way to a crowd of tabs: the tabs take the squeeze, the strip's buttons never
   painted over Share and off the window (the review, 2026-09-30). */
.shows .quicknav { margin: 0 8px 0 auto; padding-left: 8px; flex-shrink: 0; }
.shows .show-share { flex-shrink: 0; }
@media (min-width: 901px) {
  .shows .quicknav:not([hidden]) ~ .show-share { margin-left: 0; }
}
.askbox.share { min-width: 560px; max-width: 720px; }
.askbox.share .sharebody { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 10px; }
.askbox.share .sharebody > * { flex: 1 0 100%; }
.askbox.share .floortable { max-height: 280px; overflow: auto; margin: 6px 0; }
.askbox.share tr.pending td { color: var(--ink-dim); font-style: italic; }
.askbox.share select.askfield { width: auto; }
.showpicker {
  position: fixed; z-index: 88; min-width: 240px; padding: 5px 0;
  background: var(--panel); border: 1px solid var(--seam-bright); box-shadow: 0 16px 36px rgba(0,0,0,.6);
}
.showpicker button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  width: 100%; padding: 7px 14px; border: 0; background: transparent; cursor: pointer; text-align: left;
}
.showpicker button:hover { background: var(--panel-hi); }
.showpicker b { font-size: 12px; color: var(--ink); }
.showpicker span { font-family: var(--data); font-size: 10px; color: var(--ink-faint); }
.showpicker p { margin: 8px 14px; }

/* The contextual toolbar: where you are, and this section's own tools. */
.toolbar {
  display: flex; align-items: stretch; gap: 1px; min-height: 30px;
  background: var(--seam); border-bottom: 1px solid var(--seam); flex-wrap: wrap;
}
.toolbar .where {
  display: flex; align-items: baseline; gap: 10px; padding: 0 16px; background: var(--panel);
}
.toolbar .where b {
  font: 700 12px/30px var(--chrome); letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
}
.toolbar .where span { font-size: 10px; letter-spacing: .06em; color: var(--ink-faint); }
.toolbar .modes, .toolbar .commands { border: 0; padding: 0; background: var(--seam); }
/*
 * A page's own commands on the title row, beside its name, in white; its sheet's tools on one
 * row of their own under it, from the left; the ? stays up on the title row (the owner,
 * 2026-09-26, of EXCHANGE: two rows, never three).
 */
.toolbar .commands.titlecmds { margin-left: 0; justify-content: flex-start; }
.toolbar .commands.titlecmds .cmd, .toolbar .commands.titlecmds .livetoggle b { color: var(--ink); }
.toolbar .commands.titlecmds .cmd:hover { color: var(--ground); }
.toolbar .commands.toolrow { order: 2; flex: 1 0 100%; margin-left: 0; justify-content: flex-start; }
.toolbar .commands.toolrow .cmdsep.first { margin-left: 0; border-left: 0; }
/* A page's count line lifted with its commands (the Patch page's universes and fixtures) is a caption on the row, never the page's raised hint. */
.toolbar .commands .keyhint { align-self: center; margin: 0 10px; color: var(--ink-faint); font: 10px var(--data); letter-spacing: .04em; }
.toolbar .commandform { top: 30px; }
/*
 * Cable Tools: the cable sheet's commands under one drop-down, on the toolbar's second line
 * directly below Add cable… (the owner, 2026-09-29); its list and a command's form hang under it.
 */
.cabletoolsmenu {
  position: absolute; top: 100%; z-index: 31; display: flex; flex-direction: column; min-width: 230px;
  padding: 3px 0; background: var(--panel); border: 1px solid var(--seam-bright); box-shadow: 0 16px 36px rgba(0,0,0,.6);
}
.cabletoolsmenu[hidden] { display: none; }
/* A page's instructions under a ? on its tools row (`pageHelp` in web/app.js): the words open under the button, never over the sheet's top. */
.pagehelp { display: flex; align-items: stretch; }
.toolbar .commands .pagehelpbtn { min-width: 30px; padding: 0 10px; font-weight: 700; }
.pagehelpmenu { box-sizing: border-box; width: min(560px, calc(100vw - 32px)); padding: 12px 16px; }
.pagehelpmenu p { margin: 0; color: var(--ink); font: 13px/1.55 system-ui, sans-serif; letter-spacing: normal; text-transform: none; white-space: normal; }
.cabletoolsitem {
  padding: 8px 14px; border: 0; background: transparent; color: var(--amber); text-align: left;
  font: 600 9.5px/1 var(--chrome); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
}
.cabletoolsitem:hover, .cabletoolsitem:focus { outline: none; color: var(--ground); background: var(--metal); }
/*
 * Add cable…, Columns and Cable Tools as one group on the views' row (the owner, 2026-10-04: "so
 * that it's all in one row"): the drop-downs sit in the row's flow, never pushed to its far end
 * as a bar of commands is, and close up to Add cable… with the row's own 1px seam between them.
 */
.modes > .commands.cabletools { margin-left: 0; padding: 0; border: 0; background: transparent; flex-wrap: nowrap; align-self: center; }
.modes > .commands.cabletools[hidden] { display: none; }
.modes .addcable + .importcable { margin-left: 1px; }
.modes .addcable + .cabletools .cabletoolsbtn, .modes .cabletools + .cabletools .cabletoolsbtn { margin-left: 0; }
/* Columns: the flat sheets' column groups and Hide unused parts, a tick each, the columns it brings beside it. */
.columnslist { min-width: 250px; }
.columnslist .columnsitem { display: flex; align-items: center; gap: 9px; color: var(--ink-dim); }
.columnslist .columnsitem[hidden] { display: none; }
.columnslist .columnsitem input { margin: 0; accent-color: var(--amber); }
.columnslist .columnsitem span { flex: 1; }
.columnslist .columnsitem i { font: 400 10px/1 var(--data); font-style: normal; letter-spacing: 0; text-transform: none; color: var(--ink-faint); }
.columnslist .columnsitem:hover, .columnslist .columnsitem:focus-within { color: var(--ground); background: var(--metal); }
.columnslist .columnsitem:hover i, .columnslist .columnsitem:focus-within i { color: var(--ground); }
.columnslist .columnsitem input:focus { outline: none; }
/*
 * Freeze on every sheet's toolbar (`freezeControl` in web/app.js): Excel's freeze panes and
 * Google's rows and columns, a tick on what is frozen now, the sheet's name and its panes on top.
 */
.toolbar .commands.freezectl { margin-left: 0; padding: 0; border: 0; background: transparent; flex-wrap: nowrap; }
.toolbar .commands.freezectl[hidden] { display: none; }
/* Columns… beside Freeze on every sheet (the owner, 2026-10-13); hidden where the page has a Columns of its own. */
.toolbar .commands.sheetcolumnsctl { margin-left: 0; padding: 0; border: 0; background: transparent; flex-wrap: nowrap; }
.toolbar .commands.sheetcolumnsctl[hidden] { display: none; }
.modes > .commands.sheetcolumnsctl { margin-left: 0; padding: 0; border: 0; background: transparent; align-self: center; }
.modes > .commands.sheetcolumnsctl[hidden] { display: none; }
/* Views beside Columns… and Freeze on every sheet (wave 1, 2026-10-14): Default, the person's own views, the show's, the actions. */
.toolbar .commands.sheetviewsctl, .modes > .commands.sheetviewsctl { margin-left: 0; padding: 0; border: 0; background: transparent; flex-wrap: nowrap; align-self: center; }
.toolbar .commands.sheetviewsctl[hidden], .modes > .commands.sheetviewsctl[hidden] { display: none; }
/* Row height beside Columns… and Freeze on every sheet (wave 2, 2026-10-14): Short, Medium, Tall, Extra tall. */
.toolbar .commands.rowheightctl, .modes > .commands.rowheightctl { margin-left: 0; padding: 0; border: 0; background: transparent; flex-wrap: nowrap; align-self: center; }
.toolbar .commands.rowheightctl[hidden], .modes > .commands.rowheightctl[hidden] { display: none; }
.rowheightlist { min-width: 220px; }
/* Layout beside Views on every sheet (wave 4, 2026-10-14): Grid, then the layouts that fit the sheet (web/sheet-layouts.js). */
.toolbar .commands.sheetlayoutctl, .modes > .commands.sheetlayoutctl { margin-left: 0; padding: 0; border: 0; background: transparent; flex-wrap: nowrap; align-self: center; }
.toolbar .commands.sheetlayoutctl[hidden], .modes > .commands.sheetlayoutctl[hidden] { display: none; }
.layoutlist { min-width: 220px; }
/* A sheet laid out as something other than the grid: its box keeps the window's height, the table and headings put aside. */
.sheetframe[data-layout] > .gridwrap { height: 100vh; overflow: auto; }
.sheetframe[data-layout] > .gridwrap > :not(.layouthost) { display: none !important; }
.layouthost { min-height: 100%; box-sizing: border-box; outline: none; color: var(--ink, #222); }
/* Export beside them (wave 2, 2026-10-14): the sheet exactly as it shows, as XLSX, CSV or PDF. */
.toolbar .commands.sheetexportctl, .modes > .commands.sheetexportctl { margin-left: 0; padding: 0; border: 0; background: transparent; flex-wrap: nowrap; align-self: center; }
.toolbar .commands.sheetexportctl[hidden], .modes > .commands.sheetexportctl[hidden] { display: none; }
.exportlist { min-width: 240px; }
/* Summary, Group, Templates and Edit rows… close up beside the rest (the owner, 2026-10-16: "no spaces"), never spread across the row by `.commands`' own margin. */
.toolbar .commands.sheetsummaryctl, .modes > .commands.sheetsummaryctl,
.toolbar .commands.sheetgroupctl, .modes > .commands.sheetgroupctl,
.toolbar .commands.sheettemplatesctl, .modes > .commands.sheettemplatesctl,
.toolbar .commands.sheetbulkctl, .modes > .commands.sheetbulkctl { margin-left: 0; padding: 0; border: 0; background: transparent; flex-wrap: nowrap; align-self: center; }
.toolbar .commands.sheetsummaryctl[hidden], .toolbar .commands.sheetgroupctl[hidden],
.toolbar .commands.sheettemplatesctl[hidden], .toolbar .commands.sheetbulkctl[hidden] { display: none; }
.viewslist { min-width: 280px; max-height: min(70vh, 560px); overflow-y: auto; }
.viewslist .viewitem .viewname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.viewslist .viewitem .viewchanged { margin-left: auto; padding-left: 10px; font: italic 10.5px var(--data); color: var(--ink-faint); }
.viewslist .viewitem[disabled] { opacity: .45; cursor: default; }
.askbox.askview .viewscopes { display: grid; gap: 4px; margin: 8px 0 2px; }
.askbox.askview .viewscope { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.askbox.askview .viewscope input[disabled] + span { opacity: .5; }
.askbox.askview .viewsaid { min-height: 1em; margin: 4px 0 0; font-size: 11px; color: var(--red, #c0392b); }
/* Record templates (`web/record-templates-ui.js`): the pick and the manage lists scroll inside the pop-up. */
.askbox.asktemplate .templatelist { display: grid; gap: 4px; max-height: min(50vh, 360px); overflow: auto; margin: 6px 0; }
.askbox.asktemplate .templatelist .freezehead { margin-top: 4px; }
.askbox.asktemplate .templaterow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.askbox.asktemplate .templaterow .templatename { flex: 1 1 140px; min-width: 0; overflow-wrap: anywhere; }
.askbox.asktemplate .templatehowmany { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.askbox.asktemplate .templatecount { width: 6em; }
.askbox.asktemplate .keyhint { font-size: 11px; margin: 6px 0 0; }
.freezelist { min-width: 260px; }
.freezelist .freezetitle { display: flex; align-items: baseline; gap: 8px; padding: 6px 14px 7px; border-bottom: 1px solid var(--seam); }
.freezelist .freezetitle b { font: 600 10px/1.2 var(--chrome); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.freezelist .freezetitle span { font: 10.5px/1.2 var(--data); color: var(--ink-faint); white-space: nowrap; }
.freezelist .freezehead { padding: 8px 14px 3px; font: 600 9px/1 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); border-top: 1px solid var(--seam); }
.freezelist .freezeitem { display: flex; align-items: center; gap: 6px; }
.freezelist .freezeitem b { width: 12px; flex: none; font-weight: 700; }
.freezelist .freezeitem.on { color: var(--amber-hi); }
.freezelist .freezenote { margin: 8px 14px; font: 11px var(--data); color: var(--ink-faint); }
.toolbar .commandform.anchored { top: 100%; right: auto; }
@media (max-width: 900px) { .toolbar .commandform.anchored { flex-wrap: wrap; max-width: calc(100vw - 8px); } }
.toolbar .railtoggle, .toolbar .keys, .toolbar .focustoggle {
  width: 30px; border: 0; background: var(--panel); color: var(--ink-faint); cursor: pointer; font-size: 11px;
}
.toolbar .keys { margin-left: auto; font-weight: 700; }
/* Focus on the sheet, and its scale while in it. */
.toolbar .focustoggle { font-size: 13px; }
.toolbar .focustoggle.on { color: var(--amber); }
.toolbar .zoomctl { display: inline-flex; align-items: center; gap: 2px; margin-right: 6px; font-family: var(--data); font-size: 10.5px; color: var(--ink-faint); }
.toolbar .zoomctl button { width: 22px; height: 22px; border: 0; background: var(--panel); color: var(--ink-faint); cursor: pointer; font-size: 13px; line-height: 1; }
.toolbar .zoomctl button:hover, .toolbar .focustoggle:hover { color: var(--amber); background: var(--panel-hi); }
.toolbar .zoomctl b { min-width: 34px; text-align: center; font-weight: 400; cursor: pointer; }
.toolbar .zoomctl b:hover { color: var(--amber); }

/* The door's list on Check-in: everyone who came through the show's one QR code. */
.doorpanel .doorrow { display: grid; gap: 3px; padding: 8px 0; border-top: 1px solid var(--seam); }
.doorpanel .doorrow b { font-size: 13px; }
.doorpanel .doorrow.waiting b { color: var(--amber); }
.doorpanel .doorrow span { font-family: var(--data); font-size: 11px; color: var(--ink-dim); }
.doorpanel .doorrow em { font-style: normal; font-size: 11px; color: var(--ink-faint); }
.doorpanel .askrow { margin-top: 6px; }
.checkinbuttons .swap { margin-left: 10px; }

/* ---- focus on the sheet -------------------------------------------------------- */
/*
 * The owner, 2026-09-24: "the spreadsheet should be the primary focus of the page. When I
 * open a spreadsheet, the sidebar could collapse… I want the scale of the spreadsheet to
 * get larger in the window." `body.sheetfocus` rides beside the rail's pin and leaves it
 * alone: leaving focus puts the rail back as it was. The zoom rides on the table itself,
 * not the scrolling pane, so the header still sticks and the pane's height stays a real
 * height on the screen; a laptop hides the rail, a phone keeps its drawer and only zooms.
 */
/* Every sheet zooms on its own (owner, 2026-11-01), the page never. */
.gridwrap > table.grid, .gridwrap > .gridhead > table.grid { zoom: var(--sheetzoom, 1); }
body:not(:has(.sheetframe)) .toolbar .zoomctl { display: none; }
body.sheetfocus .gridwrap { max-height: calc(100vh - 150px); }
@media (min-width: 901px) {
  body.sheetfocus .frame { grid-template-columns: 1fr; }
  body.sheetfocus .rail { display: none; }
  body.sheetfocus main { padding: 10px 14px 40px; }
  body.sheetfocus main > * { max-width: none; }
}
/* What the sheets are doing in the background: behind, rendering, current. */
/* The render status: a fixed box bottom-right, the corner every command's result uses, and
   never in the toolbar's flow (the owner, 2026-09-16). The corner's boxes are stacked by
   `stackCorner` in web/app.js — a question, a command's result, a print notice, this pill —
   each lifted above the one below, never over one another (the owner, 2026-10-04). */
.renderpill {
  position: fixed; right: calc(22px + var(--assist-w, 0px) + var(--chat-w, 0px)); bottom: 60px; z-index: 91; max-width: 460px;
  padding: 9px 14px; background: var(--panel); border: 1px solid var(--seam-bright);
  box-shadow: 0 18px 40px rgba(0,0,0,.6);
  font-family: var(--data); font-size: 11px; color: var(--ink-faint); white-space: nowrap;
}
.renderpill[hidden] { display: none; }
/* Edits on their way to the server (`web/outbox.js`): said only once a save takes longer than a blink, amber while tried again. */
.outboxpill {
  position: fixed; right: calc(22px + var(--assist-w, 0px) + var(--chat-w, 0px)); bottom: 60px; z-index: 91; max-width: 460px;
  padding: 9px 14px; background: var(--panel); border: 1px solid var(--seam-bright);
  box-shadow: 0 18px 40px rgba(0,0,0,.6);
  font-family: var(--data); font-size: 11px; color: var(--ink-faint);
}
.outboxpill[hidden] { display: none; }
.outboxpill.retrying { color: var(--amber-hi); border-color: var(--amber); }
.renderpill.behind { color: var(--amber); border-color: var(--amber-lo); }
.renderpill.busy { color: var(--amber-hi); border-color: var(--amber-lo); }
.renderpill.current { color: var(--ink-faint); }
.renderpill.failed { color: #ff6b7a; border-color: #ff6b7a; }
.toolbar .railtoggle:hover, .toolbar .keys:hover { color: var(--amber); background: var(--panel-hi); }
/* The keyboard shortcut list (`web/shortcuts.js`): a find box over the groups, the keys as small caps-free chips. */
.askbox.shortcutsbox { width: min(640px, calc(100vw - 32px)); max-width: 640px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; flex-wrap: nowrap; gap: 8px; overflow: hidden; }
.shortcutsbox h2 { margin: 0; font-size: 16px; }
.shortcutsbox .shortcutsfind { width: 100%; font-size: 14px; padding: 6px 8px; box-sizing: border-box; }
.shortcutsbox .shortcutslist { overflow: auto; min-height: 0; flex: 1 1 auto; }
.shortcutsgroup h3 { margin: 10px 0 4px; font-size: 12px; color: var(--amber); text-transform: none; }
.shortcutsgroup dl { display: grid; grid-template-columns: 250px 1fr; gap: 3px 14px; margin: 0; }
.shortcutsgroup dt { white-space: nowrap; color: var(--ink-dim); }
.shortcutsgroup dd { margin: 0; }
.shortcutsgroup kbd { font-family: var(--data); font-size: 11px; padding: 0 5px; border: 1px solid var(--seam-bright); border-radius: 4px; background: var(--panel-hi); }
.shortcutsgroup .or { font-size: 11px; color: var(--ink-faint); }

/* The rail collapses to nothing, and remembers which it was. */
.frame { grid-template-columns: 188px 1fr; min-height: calc(100vh - 89px); }
/* One column, not a zero-width one: `display:none` takes the rail out of the grid, so a
   two-column template would auto-place the main pane into the empty first column and
   collapse the whole window to nothing. */
body.railshut .frame { grid-template-columns: 1fr; }
body.railshut .rail { display: none; }
main { padding: 14px 18px 60px; }
main > h2, main > .sub { display: none; }
.gridwrap { max-height: calc(100vh - 190px); }


/* ---- every sheet-shaped table reads the same ---------------------------- */
/*
  The interactive grids went light first; the read-only tables that sit beside them — the
  case plan, the review, the balance, the equipment counts — are the same kind of thing and
  were still dark. One look for anything laid out in rows and columns.
*/
/*
  A tinted cell (`td.tint-*`, the grid's class tints: a spare universe's pink, an active one's
  green, a leg's amber) is left to its own rule here. These two selectors outrank every tint
  rule above by their length alone, so until 2026-09-25 no class tint showed on any sheet in
  the window — the ports on Devices and Snakes read as plain stripes, and the Circuits view had
  only a translucent colour left to it, which is what let the dark row through.
*/
main table.grid:not(.sub) tbody td:not([class*="tint-"]),
.caseplan table tbody td,
.info table tbody td,
.loads table tbody td,
.rackdata table tbody td {
  background: var(--sheet); color: var(--sheet-ink);
  border-right: 1px solid var(--sheet-line); border-bottom: 1px solid var(--sheet-line);
}
main table.grid:not(.sub) tbody tr:nth-child(even) td:not([class*="tint-"]),
.caseplan table tbody tr:nth-child(even) td,
.info table tbody tr:nth-child(even) td,
.loads table tbody tr:nth-child(even) td,
.rackdata table tbody tr:nth-child(even) td { background: var(--sheet-alt); }
main table.grid:not(.sub) thead th,
.caseplan table thead th,
.info table thead th,
.loads table thead th,
.rackdata table thead th {
  background: var(--sheet-head); color: #2c333c;
  border-bottom: 1px solid var(--sheet-rule); border-right: 1px solid var(--sheet-rule);
}
.caseplan table td.dim, .info table td.dim, .loads table td.dim, .rackdata table td.dim { color: var(--sheet-dim); }
.info table td.short { color: #b3121f; }
.info input.sp { color: var(--sheet-ink); }
.info input.sp:hover { border-color: var(--sheet-rule); background: #fff; }
.info input.sp:focus { background: #fff; box-shadow: inset 0 0 0 2px #0b63c5; }
.rackdata table input { color: var(--sheet-ink); }
tr.diff.added td { color: #1a7a33; }
tr.diff.removed td { color: #b3121f; }
tr.diff.changed td { color: #a35200; }

/* The show record is a form, not a sheet, but it is worked in the same way. */
.record { background: var(--sheet-line); }
.field { background: var(--sheet); }
.field > span { color: #4a525d; }
.field input, .field select { color: var(--sheet-ink); }
.field input:hover, .field select:hover { border-color: var(--sheet-rule); background: #fff; }
.field input:focus, .field select:focus { background: #fff; box-shadow: inset 0 0 0 2px #0b63c5; border-color: #0b63c5; }
.field em { color: #6b7480; }
.field .fieldinfo { border-color: var(--sheet-rule); color: #6b7480; }

/* ---- conditional shading on the balance --------------------------------- */
/* Short is red, over is green, exactly right is neither: the colour is how you find the one
   number that matters in a column of eighty. */
/* The Parameters page's balance: short red, over green, level dim (a hand-built table). */
.info td.balance.under { background: #fbe3e5; color: #a01824; font-weight: 600; }
.info td.balance.over { background: #ddf1de; color: #1a6b2b; }
.info td.balance.level { color: var(--sheet-dim); }
.info table.grid + h3 { margin-top: 16px; }

/* ---- the against-the-order sheets --------------------------------------- */
/* Inventory › Fixtures, Cable, Electronics and Power racks are sheets (`againstOrderView` in
   web/app.js): the heading and the line above the sheet with Fix all at its end. */
.againstorder h3 { margin: 0 0 4px; font: 700 12px/1 var(--chrome); letter-spacing: .16em; text-transform: uppercase; color: var(--ink); }
.ordertools { display: flex; align-items: center; gap: 12px; margin: 3px 0 8px; }
.ordertools .keyhint { margin: 0; flex: 1 1 auto; }
.ordertools .fixall { padding: 2px 10px; font-size: 11px; }
/* Balance: short red, over green, level dim. Order: amber once it differs from the file. A
   pinned code: an amber edge. Fix: a link in its cell. A class tint paints its own background,
   since the light-table rule leaves tinted cells to their own (`td:not([class*="tint-"])`). */
.grid tbody td.tint-under, .grid tbody tr:nth-child(even) td.tint-under { background: #fbe3e5; color: #a01824; font-weight: 600; }
.grid tbody td.tint-over, .grid tbody tr:nth-child(even) td.tint-over { background: #ddf1de; color: #1a6b2b; }
.grid tbody td.tint-level { background: var(--sheet); color: var(--sheet-dim); }
/* The circuit generator's Same? column: agrees green, differs red (the owner, 2026-10-03). */
.grid tbody td.tint-gensame, .grid tbody tr:nth-child(even) td.tint-gensame { background: #ddf1de; color: #1a6b2b; font-weight: 600; }
.grid tbody td.tint-gendiffers, .grid tbody tr:nth-child(even) td.tint-gendiffers { background: #fbe3e5; color: #a01824; font-weight: 600; }
.grid tbody tr:nth-child(even) td.tint-level { background: var(--sheet-alt); color: var(--sheet-dim); }
.grid tbody td.tint-edited, .grid tbody tr:nth-child(even) td.tint-edited { background: #fff1d6; color: #7a4a00; font-weight: 700; }
.grid tbody td.tint-pinned { background: var(--sheet); box-shadow: inset 3px 0 0 var(--amber); }
.grid tbody tr:nth-child(even) td.tint-pinned { background: var(--sheet-alt); box-shadow: inset 3px 0 0 var(--amber); }
/* A position whose drawing has a stick that is not its maker's standard length — a special build (CAD › Planning; the owner,
   2026-10-27: "a little tooltip key thing"): a small amber corner, as a spreadsheet marks a note; the hover says which sticks. */
/* The corner is laid with the row's own colour in one rule a stripe: `.grid tbody tr:nth-child(even) td`'s `background` shorthand
   took the picture off every even row (the owner, 2026-10-29: "the flag is only flagging every other row"). */
.grid tbody tr:nth-child(n) td.tint-specialbuild { background: linear-gradient(225deg, var(--amber) 0 7px, transparent 7px) var(--sheet); }
.grid tbody tr:nth-child(even) td.tint-specialbuild { background: linear-gradient(225deg, var(--amber) 0 7px, transparent 7px) var(--sheet-alt); }
/* A code of the vendor's catalogue the bill has no line of yet (the owner, 2026-10-23): a dotted amber edge, Fix adds the line. */
.grid tbody td.tint-catalogue { background: var(--sheet); box-shadow: inset 3px 0 0 var(--amber); border-left: 1px dotted var(--amber); }
.grid tbody tr:nth-child(even) td.tint-catalogue { background: var(--sheet-alt); box-shadow: inset 3px 0 0 var(--amber); border-left: 1px dotted var(--amber); }
/* A shift billed to a budget other than the main show (Target billing): an amber edge and bold, so it is called out at a glance. */
.grid tbody tr:nth-child(n) td.tint-targetown { background: var(--sheet); font-weight: 600; box-shadow: inset 3px 0 0 var(--amber); }
.grid tbody tr:nth-child(even) td.tint-targetown { background: var(--sheet-alt); }
.grid tbody td.tint-fix { background: var(--sheet); color: #0b63c5; font-weight: 700; text-align: center; cursor: pointer; text-decoration: underline; }
.grid tbody tr:nth-child(even) td.tint-fix { background: var(--sheet-alt); color: #0b63c5; font-weight: 700; text-align: center; cursor: pointer; text-decoration: underline; }

/* ---- previewing a rendered sheet ---------------------------------------- */
/* Clicking a sheet shows it; only the button prints it. Checking a sheet means looking at it
   before it goes to paper. */
.previewer {
  position: fixed; inset: 60px 40px 40px; z-index: 96; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--seam-bright); box-shadow: 0 30px 80px rgba(0,0,0,.7);
}
.previewbar {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--plate); border-bottom: 1px solid var(--seam);
}
.previewbar b {
  flex: 1; font: 700 12px/1 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.previewbar .cmd {
  padding: 6px 16px; border: 1px solid var(--amber-lo); background: transparent; color: var(--amber);
  font: 600 9.5px/1.6 var(--chrome); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
}
.previewbar .cmd:hover { background: var(--amber-lo); color: var(--ground); }
.previewbar .cmd.dismiss { border-color: var(--seam); color: var(--ink-faint); }
.previewer iframe { flex: 1; width: 100%; border: 0; background: #333; }
/*
 * Pages are pictures on a grey table, as many across as the panel is wide.
 *
 * A strip you scroll rather than one page with arrows: a label sheet is checked by running
 * an eye down it, and a wheel does that in one gesture where a Next button does it three
 * hundred times. `--page-width` is set by the + and - buttons and decides how many fit.
 */
.previewbody {
  flex: 1; min-height: 0; overflow: auto; padding: 18px; background: #2a2d31;
  display: grid; gap: 16px; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(var(--page-width, 300px), 1fr));
}
.previewbody figure {
  /* The page's own shape, held before its picture arrives, so the sheet lays out once. */
  position: relative; margin: 0; aspect-ratio: var(--page-aspect, 3 / 2);
  background: #21242a; border: 1px solid #34383e;
}
.previewbody figcaption {
  position: absolute; left: 0; top: 0; padding: 2px 7px; z-index: 2;
  background: rgba(0,0,0,.55); color: #c8ccd2;
  font-family: var(--data); font-size: 10.5px;
}
.previewpage {
  display: block; width: 100%; height: 100%; object-fit: contain;
  background: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.45);
}
.previewwhere {
  font-family: var(--data); font-size: 11px; color: var(--ink-faint); min-width: 92px; text-align: center;
}
.previewbar .cmd[disabled] { opacity: .35; cursor: default; }
.previewbar a.cmd { text-decoration: none; }

/* The sections of a sheet, on the preview's bar: where each truss and each type begins. */
.previewjump {
  min-width: 0; width: 160px; padding: 4px 8px; background: #0e1114; border: 1px solid var(--seam);
  color: var(--ink); font-family: var(--data); font-size: 11px;
}

/* A sheet that was rendered before the show was last saved. */
.sheet .stalemark {
  font-style: normal; font-family: var(--data); font-size: 10.5px; color: var(--amber);
}
.sheet.stale { border-left: 2px solid var(--amber); }

/* ---- the review, worked through one at a time --------------------------- */
.reviewhead { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.reviewcount { font-family: var(--data); font-size: 11px; color: var(--ink-faint); }
.wizard { max-width: 760px; }
.wizardbar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.wizardwhere { font-family: var(--data); font-size: 11px; color: var(--ink-faint); }
.wizardcard {
  padding: 18px 20px; background: var(--panel); border: 1px solid var(--seam-bright);
  border-left: 3px solid var(--amber);
}
.wizardcard h4 {
  margin: 0 0 8px; font: 700 10px/1 var(--chrome); letter-spacing: .16em;
  text-transform: uppercase; color: var(--amber);
}
.wizardsays { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.wizardfix {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 14px 0;
  padding: 12px; background: var(--plate); border: 1px solid var(--seam);
}
.wizardfix > span {
  font: 700 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}
.wizardfix .scalar {
  width: 110px; padding: 5px 8px; background: #0e1114; border: 1px solid var(--seam);
  color: var(--ink); font-family: var(--data); font-size: 11.5px;
}
.wizardfix em { font-style: normal; color: #ff8f9b; font-family: var(--data); font-size: 11px; }
/* A position with no tape colour: put it in the colour code, or rename it (existing or new). */
/* A list of aligned rows — a box number, its title, line 2, size — reads in a monospace face, so every column starts at the same place (the owner, 2026-10-03). */
.wizardfix .askpick.pickrows, .wizardfix .askpick.pickrows option { font-family: ui-monospace, Menlo, Consolas, 'Liberation Mono', monospace; font-size: 12px; }
.wizardfix .askpick {
  padding: 5px 8px; background: #0e1114; border: 1px solid var(--seam);
  color: var(--ink); font-family: var(--data); font-size: 11.5px;
}
.wizardfix .renamepick { min-width: 180px; }
.wizardfix .scalar.renamenew { width: 200px; }
.wizardfix .renamenew[hidden] { display: none; }
.wizardfix .cmd:disabled { opacity: .45; cursor: default; background: transparent; color: var(--amber); }
/* A request to add to the order: the code finds as it is typed, the quantity is small, Approve and Decline follow (the owner, 2026-10-07). */
.wizardfix .scalar.ordercode { width: 340px; max-width: 100%; }
.wizardfix .scalar.orderqty { width: 70px; }
.reviewhold { margin-left: auto; }
.orderrequests .orderrequestspill { margin-left: 0; padding: 4px 12px; border: 1px solid var(--amber-lo); border-radius: 12px; }
.askbox.askorderrequest .orderfound { min-height: 1.6em; color: var(--amber); }
.wizardacts { display: flex; gap: 8px; margin-top: 14px; }
.wizardacts .cmd, .wizardbar .cmd, .wizardfix .cmd {
  padding: 6px 14px; border: 1px solid var(--amber-lo); background: transparent; color: var(--amber);
  font: 600 9.5px/1.6 var(--chrome); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.wizardacts .cmd.dismiss, .wizardbar .cmd.dismiss { border-color: var(--seam); color: var(--ink-faint); }
.wizardacts .cmd:hover, .wizardbar .cmd:hover, .wizardfix .cmd:hover { background: var(--amber-lo); color: var(--ground); }
.wizarddone { font-size: 15px; color: var(--amber-hi); margin: 20px 0 6px; }
/* The standing note under the card, clear of its edge. */
.wizard > .keyhint { margin-top: 14px; max-width: 620px; }
.review-item { position: relative; }
.review-item.done { opacity: .5; }
.review-kind.aside { color: var(--ink-faint); }
.reviewrowacts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; }
/* Where it is and its __UID, on the buttons' own line. */
.reviewrowacts small { display: inline; margin: 0 0 0 6px; color: var(--ink-faint); font-family: var(--data); font-size: 10.5px; }
/* A heading's Ignore all, at its right. */
.review-kind .reviewall {
  margin-left: auto; padding: 3px 10px; border: 1px solid var(--seam); background: transparent; color: var(--ink-faint);
  font: 600 9px/1.6 var(--chrome); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.review-kind .reviewall:hover { border-color: var(--amber-lo); color: var(--amber); }
/* Add all on Position has no tape color: the heading's one answer, drawn as the findings' own Put … buttons are. */
.review-kind .reviewall.reviewaddall { border-color: var(--amber-lo); color: var(--amber); }
.review-kind .reviewall.reviewaddall:hover { color: var(--ground); background: var(--metal); }
.reviewrowacts .cmd {
  padding: 3px 10px; border: 1px solid var(--seam); background: transparent; color: var(--ink-faint);
  font: 600 9px/1.6 var(--chrome); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.reviewrowacts .cmd:hover { border-color: var(--amber-lo); color: var(--amber); }
/* A finding's answer on the list's line: the wizard's controls at the row's scale, the answer in amber, Ignore faint. */
.reviewrowacts .wizardfix { margin: 0; padding: 0; background: transparent; border: 0; gap: 6px; }
.reviewrowacts .wizardfix .cmd { padding: 3px 10px; font-size: 9px; border-color: var(--amber-lo); color: var(--amber); }
.reviewrowacts .wizardfix .cmd:hover:not(:disabled) { background: var(--amber-lo); color: var(--ground); }
.reviewrowacts .wizardfix .scalar, .reviewrowacts .wizardfix .askpick { padding: 3px 6px; font-size: 11px; }

/* ---- find and replace, on every sheet ----------------------------------- */
/* A window of its own, over every sheet, dragged by its title (owner, 2026-10-22). Above a sheet's headings (10) and its
   frozen panes; under a cell's list and menu, which hang on the body too. */
.findbar {
  position: fixed; z-index: 55; width: 380px; max-width: calc(100vw - 16px); display: flex; flex-direction: column; gap: 8px;
  padding: 0 12px 12px; background: var(--panel); border: 1px solid var(--seam-bright); border-radius: 6px;
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
}
.findbar .findhead {
  display: flex; align-items: center; justify-content: space-between; margin: 0 -12px; padding: 6px 8px 6px 12px;
  border-bottom: 1px solid var(--seam); cursor: move; user-select: none; touch-action: none;
}
.findbar .findtitle { font-family: var(--chrome); font-size: 11px; letter-spacing: .08em; color: var(--amber); }
.findbar .findtabs { display: flex; gap: 4px; }
.findbar .findtab {
  padding: 4px 12px; background: transparent; border: 1px solid var(--seam); color: var(--ink-dim);
  font-family: var(--chrome); font-size: 10px; letter-spacing: .08em; cursor: pointer;
}
.findbar .findtab.on { border-color: var(--amber); color: var(--amber); background: var(--panel-hi); }
.findbar .findrow { display: flex; align-items: center; gap: 8px; }
.findbar .findlabel { width: 88px; flex: none; font-family: var(--chrome); font-size: 10px; letter-spacing: .06em; color: var(--ink-dim); }
.findbar .findinput {
  flex: 1; min-width: 0; padding: 5px 7px; background: #0e1114; border: 1px solid var(--seam);
  color: var(--ink); font-family: var(--data); font-size: 12px;
}
.findbar .findinput:focus { outline: none; border-color: var(--amber); }
.findbar .findopts, .findbar .findacts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.findbar .findacts { justify-content: flex-end; }
/* Replace, its box and its buttons, only on the Replace tab — never a Replace button without a box to type in. */
.findbar:not(.replacing) .findreplacerow, .findbar:not(.replacing) .findreplacebtn { display: none; }
.findcount {
  margin-left: auto; text-align: right; font-family: var(--data); font-size: 10.5px; color: var(--ink-faint);
}
.findbar .findgo, .findbar .findopt {
  display: inline-flex; align-items: center; padding: 4px 8px; background: transparent;
  border: 1px solid var(--seam); color: var(--ink-dim);
  font-family: var(--chrome); font-size: 10px; letter-spacing: .08em; cursor: pointer;
}
.findbar .findclose { border: 0; font-size: 14px; padding: 2px 6px; }
.findbar .findgo:hover, .findbar .findopt:hover, .findbar .findtab:hover { border-color: var(--amber-lo); color: var(--amber); }
.findbar .findopt[aria-pressed="true"] { border-color: var(--amber); color: var(--amber); background: var(--panel-hi); }
/* A match, and the one the cursor is on. */
.grid tbody td.found { box-shadow: inset 0 0 0 2px #f2c14e; }
.grid tbody td.here { box-shadow: inset 0 0 0 2px #e08a2c; background: #fff4d6 !important; }
/* Where a jump from the review list or the workbook search landed. */
.grid tbody td.landed { animation: landed 1.6s ease-out; }
@keyframes landed {
  0% { background: #ffe9a8 !important; }
  100% { background: transparent; }
}

/* The whole-show find: results grouped by the sheet they are on. */
.findall {
  position: fixed; right: 24px; top: 74px; bottom: 24px; width: 420px; z-index: 94;
  display: flex; flex-direction: column; gap: 8px; padding: 14px;
  background: var(--panel); border: 1px solid var(--seam-bright);
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.findallbar { display: flex; align-items: center; gap: 8px; }
.findallbar b {
  flex: 1; font: 700 11px/1 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.findallrow { display: flex; gap: 8px; }
.findallrow .scalar {
  flex: 1; padding: 5px 8px; background: #0e1114; border: 1px solid var(--seam);
  color: var(--ink); font-family: var(--data); font-size: 11.5px;
}
.findallrow .scalar:focus { outline: none; border-color: var(--amber); }
.findall .cmd {
  padding: 5px 12px; border: 1px solid var(--amber-lo); background: transparent; color: var(--amber);
  font: 600 9.5px/1.6 var(--chrome); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.findall .cmd.dismiss { border-color: var(--seam); color: var(--ink-faint); }
.findall .findopt {
  padding: 4px 8px; background: transparent; border: 1px solid var(--seam); color: var(--ink-dim);
  font-family: var(--chrome); font-size: 10px; cursor: pointer;
}
.findall .findopt[aria-pressed="true"] { border-color: var(--amber); color: var(--amber); }
.findresults { flex: 1; min-height: 0; overflow: auto; }
.findgroup h5 {
  display: flex; gap: 8px; margin: 10px 0 4px;
  font: 700 9.5px/1 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--amber);
}
.findgroup h5 em { font-style: normal; color: var(--ink-faint); }
.findhit {
  display: grid; grid-template-columns: 130px 96px 1fr; gap: 8px; width: 100%; text-align: left;
  padding: 4px 6px; background: transparent; border: 0; border-bottom: 1px solid #14171c;
  color: var(--ink-dim); font-family: var(--data); font-size: 11px; cursor: pointer;
}
.findhit:hover { background: var(--panel-hi); color: var(--ink); }
.findhit b { color: var(--ink); font-weight: 400; }
.findhit span { color: var(--ink-faint); }
.findhit code { color: var(--amber); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- the rail: categories, subcategories, and reordering ---------------- */
.railgroup { border-bottom: 1px solid #14171c; }
.railgroup.dragging { opacity: .45; }
.rail button.sub { padding-left: 34px; font-size: 12px; color: var(--ink-faint); }
.rail button.sub:hover { color: var(--ink); }
.rail button.sub[aria-current="true"] { color: var(--amber-hi); }
.rail button { position: relative; }

/* The grab handle: the row is a button and clicking it must keep meaning "open this", so
   dragging needs a target of its own. */
.grabber {
  position: absolute; left: 4px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 16px; cursor: grab; opacity: 0;
  background-image: radial-gradient(circle, var(--ink-faint) 1px, transparent 1px);
  background-size: 4px 4px; background-position: 1px 2px;
}
.rail button:hover .grabber { opacity: .75; }
.grabber:active { cursor: grabbing; }

/* ---- Settings: a list, not a wall of tiles ------------------------------ */
.adminsplit { display: grid; grid-template-columns: 230px 1fr; gap: 1px; background: var(--seam); border: 1px solid var(--seam); }
.adminlist { display: flex; flex-direction: column; background: var(--panel); }
.adminlist button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px 14px; border: 0; border-bottom: 1px solid #1b1e23; background: transparent;
  color: var(--ink-dim); cursor: pointer; text-align: left;
}
.adminlist button b { font-size: 12px; color: var(--ink); }
.adminlist button span {
  font-size: 9.5px; color: var(--ink-faint); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.adminlist button:hover { background: var(--panel-hi); }
.adminlist button[aria-current="true"] { background: var(--plate); box-shadow: inset 3px 0 0 var(--amber); }
.adminlist button[aria-current="true"] b { color: var(--amber); }
.adminbody { background: var(--panel); min-width: 0; overflow-x: auto; }
.adminbody > .keyhint { margin: 12px 14px 10px; }

/* A yes-or-no cell is coloured rather than spelled out: a column of the word "false" is
   noise, and the point is to see at a glance which boxes have one. */
.grid td.toggle { text-align: center; color: #8b95a1; }
.grid td.toggle .cellcheck { width: 14px; height: 14px; margin: 0; vertical-align: middle; cursor: pointer; accent-color: #0b4f7a; }
.grid td.toggle.locked .cellcheck { cursor: default; }
.asktime .askgrid { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.asktime .askgrid label { min-width: 0; }
.asktime .askpick { min-width: 84px; }
.asktime .askfield { width: 110px; }
.grid td.toggle.on { background: #d6ecfb !important; color: #0b4f7a; font-weight: 600; }
.grid tbody tr:nth-child(even) td.toggle.on { background: #cbe6f8 !important; }


/* ---- rail tints ---------------------------------------------------------- */
/* A colour on the section, so the eye finds the two sheets it lives in without reading. */
.rail button.tint-exchange { border-left-color: #e06060; }
.rail button.behind { font-weight: 700; color: var(--amber); }
/* The triangle beside an out-of-date entry; hovering it opens the pop-up that says why. */
.rail button .railwarn { color: var(--amber); font-size: 12px; line-height: 1; cursor: help; margin-right: -2px; }
.rail button .railwarn:hover { color: var(--amber-hi); }
/* Labor › Inbox while a reply to the show's mail is unread: bold, with a small "!" before the word. */
.rail button.unread { font-weight: 700; }
.rail button .inboxbang { color: var(--amber); font-weight: 800; margin-right: -2px; }
.railtip {
  position: fixed; z-index: 88; max-width: 320px; padding: 8px 12px;
  background: var(--panel); border: 1px solid var(--amber); box-shadow: 0 12px 28px rgba(0,0,0,.6);
  font-family: var(--data); font-size: 11px; line-height: 1.5; color: var(--ink-dim);
  pointer-events: none;
}
.railtip > div + div { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--seam); }
.railtip b { display: block; color: var(--amber); font-weight: 700; margin-bottom: 2px; }
/* The tint is the left rule only, never the text: coloured text read as a second selected
   entry, and only one entry in the rail is ever the current one. */
.rail button.tint-cable { border-left-color: #e08a2c; }
.loom summary .mini {
  padding: 2px 8px; border: 1px solid var(--seam); background: transparent; color: var(--ink-dim);
  font: 600 9px/1.6 var(--chrome); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.loom summary .mini:hover { border-color: var(--amber-lo); color: var(--amber); }

/* ---- the show record, one column per company ---------------------------- */
.recordcols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1px; background: var(--seam); border: 1px solid var(--seam);
}
.recordcol { background: var(--sheet, var(--panel)); }
.recordcol h4 {
  margin: 0; padding: 8px 12px; font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint); border-bottom: 1px solid var(--seam);
}
.record.one { grid-template-columns: 1fr; border: 0; }
.recordcol .field > span { min-width: 116px; }


/* ---- settings: what a table is scoped to -------------------------------- */
.scopeline { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 11.5px; }
.scopeline b {
  padding: 2px 8px; border-radius: 2px; font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 700;
}
.scopeline b.global { background: #e8ebef; color: #4a525d; }
.scopeline b.pervendor { background: #fde9cf; color: #8a5300; }
.scopeline b.mine { background: #dcefdc; color: #1f5d2a; }
.askbox.askcontents { width: min(680px, 92vw); }
.askbox.askcontents .contentsderived { max-height: 180px; overflow: auto; margin: 4px 0 8px; padding: 6px 10px; list-style: none; background: #0e1114; border: 1px solid var(--seam); font: 11.5px var(--data); }
.askbox.askcontents .contentsderived li { padding: 2px 0; }
.askbox.askcontents .contentsderived li.done b { text-decoration: line-through; color: var(--ink-faint); }
.askbox.askcontents .contentsderived small { color: var(--ink-faint); }
/* The typed contents as a table of Qty and Item (the owner, 2026-09-29). */
.askbox.askcontents .contentstable { width: 100%; border-collapse: collapse; margin: 4px 0 8px; }
.askbox.askcontents .contentstable th { text-align: left; font: 600 10.5px/1.4 var(--chrome); color: var(--ink-dim); letter-spacing: .06em; text-transform: uppercase; padding: 0 4px 2px; }
.askbox.askcontents .contentstable td { padding: 2px 4px 2px 0; }
.askbox.askcontents .contentstable td:first-child { width: 58px; }
.askbox.askcontents .contentstable td:last-child { width: 30px; }
.askbox.askcontents .contentstable .cqty { width: 54px; text-align: right; }
.askbox.askcontents .contentstable .citem { width: 100%; box-sizing: border-box; }
.askbox.askcontents .contentstable .crow { padding: 2px 6px; }
.askbox.askcontents textarea.contentslines { width: 100%; min-height: 120px; font: 12px var(--data); resize: vertical; }
.askbox.askcontents .askrow .askfield { flex: 1; min-width: 160px; }
.crawlbar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 0 0 10px; }
.crawlbar select.scalar { max-width: 220px; }
.crawlbar .keyhint { flex-basis: 100%; }
.scopeline b.thisshow { background: #dde8f7; color: #22456f; }
.showusers .drow select.scalar { max-width: 320px; }
.scopeline span { color: #6b7480; }
.scopetoggle {
  margin-left: auto; padding: 3px 10px; border: 1px solid var(--seam-bright);
  background: transparent; color: var(--ink-dim); font: inherit; font-size: 11px; cursor: pointer;
}
.scopetoggle:hover { background: var(--panel-hi); border-color: var(--amber-lo); color: var(--amber-hi); }


/* ---- the publish panel and its folder chooser --------------------------- */
.publishpanel .scalarfield { margin-bottom: 4px; }
.publishpanel .panelhead {
  margin: 18px 0 4px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint);
}
/*
 * The folder/file browser both the file-store picker (`chooseDriveFolder`) and the local-disk
 * fallback (`pick.js`) share: the app's own stand-in for the operating system's own dialog, so
 * it carries the app's own dark chrome, never a plain white box (owner, 2026-09-22, more than
 * once). Above every other pop-up including a wizard's own `.askbox` (z-index 95), since a
 * wizard's Files step is exactly where this opens from and a nested picker has to win.
 */
.folderpick {
  position: fixed; inset: 12% 28%; z-index: 97; display: flex; flex-direction: column;
  background: var(--panel); color: var(--ink); border: 1px solid var(--seam-bright);
  box-shadow: 0 18px 60px rgba(0, 0, 0, .45);
}
.folderbar {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--seam-bright);
}
.folderbar b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: var(--data); font-size: 11.5px; }
.folderlist { flex: 1; overflow: auto; padding: 4px 0; }
.folderlist button {
  display: block; width: 100%; text-align: left; padding: 5px 14px; border: 0;
  background: transparent; color: inherit; font: inherit; font-size: 12px; cursor: pointer;
}
.folderlist button:hover { background: var(--panel-hi); color: var(--amber-hi); }
/* Its own action buttons — New folder…, Use this folder, Cancel, Make — the same convention
 * every other `.cmd` in the app is scoped under (`.askbox .cmd`, `.wizardbar .cmd`, …); this
 * one had none, so they fell back to the browser's own unstyled button chrome. */
.folderpick .cmd {
  padding: 7px 16px; border: 1px solid var(--amber-lo); background: transparent; color: var(--amber);
  font: 600 10px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.folderpick .cmd:hover { background: var(--amber-lo); color: var(--ground); }
.folderpick .cmd.dismiss { border-color: var(--seam); color: var(--ink-faint); }
.folderpick .cmd.dismiss:hover { background: var(--seam); color: var(--ink); }
/* The strip while an administrator is viewing as someone else: unmistakable, never in the way. */
.previewbanner {
  position: sticky; top: 0; z-index: 96; display: flex; align-items: center; gap: 14px;
  padding: 5px 14px; background: var(--amber); color: #1a1205; font: 11.5px var(--data);
}
.previewbanner b { font-weight: 700; }
.previewbanner .cmd { margin-left: auto; padding: 3px 10px; border: 1px solid #1a1205; background: transparent; color: #1a1205; font: 600 10px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.previewbanner .cmd:hover { background: #1a1205; color: var(--amber-hi); }
/* Duplicate __UID: the one review finding urgent enough to interrupt on its own, since
 * nothing downstream can trust either device until the drawing is fixed (owner, 2026-09-22). */
.askbox.askduplicate { max-width: 640px; }
.askbox.askduplicate .askduptitle { flex: 1 0 100%; display: flex; align-items: center; gap: 10px; }
.askdupicon { font-size: 20px; color: #ff6b7a; }
.askbox.askduplicate .askduptitle b { font-size: 14px; color: var(--ink); }
.askbox.askduplicate .askduplist {
  flex: 1 0 100%; display: flex; flex-direction: column; gap: 8px; max-height: 300px; overflow-y: auto;
  padding: 10px 12px; border: 1px solid var(--seam); background: var(--panel-lo, rgba(0,0,0,.18));
}
.askdupitem { margin: 0; font: 12px/1.5 var(--data); color: var(--ink-dim); }
/* A person's grants — the access policy matrix itself is on the shared grid now. */
.askbox.askgrants { max-width: 720px; }
.askbox.askgrants .askhint { flex: 1 0 100%; margin: -4px 0 6px; }
.askbox.askgrants .askpick { width: 190px; min-width: 190px; }
.askbox.askgrants .asktrouble { flex: 1 0 100%; font: 11px var(--data); color: #ff6b7a; min-height: 14px; }
/* The Drive picker: the same box, a link to paste under the bar, a kind beside a shared folder. */
.drivepick .newfolder { display: flex; align-items: center; gap: 6px; margin: 6px 12px 0; }
.drivepick .newfolder[hidden] { display: none; }
.drivepick .newfolder input { flex: 1; margin: 0; padding: 5px 8px; background: #0e1114; border: 1px solid var(--seam); color: var(--ink); font-family: var(--data); font-size: 11.5px; }
.drivepick .newfolder .cmd { padding: 4px 10px; }
.drivepick .drivelink {
  margin: 6px 12px; padding: 5px 8px; background: #0e1114; border: 1px solid var(--seam);
  color: var(--ink); font-family: var(--data); font-size: 11.5px;
}
.drivepick .folderlist button { display: flex; justify-content: space-between; gap: 10px; }
.drivepick .folderlist button em { font-style: normal; font-size: 10px; color: var(--ink-faint); }
.driveblock .drivehead { display: flex; align-items: center; gap: 10px; padding: 8px 14px 4px; font: 11.5px var(--data); color: var(--ink); }
.driveblock .drivedot { width: 8px; height: 8px; border-radius: 50%; background: var(--seam-bright); flex: none; }
.driveblock .drivedot.on { background: #3fbf6a; box-shadow: 0 0 6px rgba(63,191,106,.7); }
.driveblock .drivehead .cmd { padding: 4px 10px; }
.driveblock .drivesaid { font: 10.5px var(--data); color: var(--amber-hi); font-style: normal; }
.driveblock .drivesaid.failed { color: #ff6b7a; }
.driveblock .drivehead.off { color: var(--ink-dim); flex-wrap: wrap; }
.driveblock .storepick { font: 11.5px var(--data); }
.driveblock .drivefolder { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--ink); }
.driveblock .scalarfield { padding: 6px 14px; }
.driveblock.compact .scalarfield span { min-width: 110px; }
/* Why the dialog opened, since it is now opened from more than one place. */
.folderwhy {
  padding: 8px 12px 0; font-size: 12px; color: var(--ink-dim);
}
/* A file is a choice, not a step further in, so it reads differently from a folder. */
.folderlist button.folder::before { content: '\1F4C1\A0\A0'; }
.folderlist button.file {
  display: flex; align-items: baseline; gap: 10px; font-family: var(--data);
}
.folderlist button.file span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folderlist button.file em { font-style: normal; font-size: 11px; color: var(--ink-faint); }


/* ---- select-all corner, row grips, and hiding --------------------------- */
.grid th.corner { cursor: pointer; }
.grid th.corner:hover { background: #dde3ea; }
.rowgrip {
  /* Wholly inside its own row. Hanging over the edge put it under the next row's sticky
     row-number cell, which paints later and swallowed every mousedown. */
  position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  cursor: row-resize; z-index: 3;
}
.grid th.rownum:hover .rowgrip { background: rgba(11, 99, 197, .35); }
/* Hidden is out of the way, not gone: the cell keeps its index and its value. */
/*
 * A row is as tall as it was dragged to, and no taller. The cell height below is the
 * default for a row nobody has touched; on a row given its own height the cells give way,
 * or the row could be made taller but never shorter than the default.
 */
.grid tbody tr[style*="height"] td, .grid tbody tr[style*="height"] th.rownum { height: auto; line-height: 1.1; }
.grid .colhidden { display: none; }
.grid tr.rowhidden { display: none; }
/* A row being deleted leaves the sheet at once; the sheet as the server left it follows (`deleteSelectedRows`). */
.grid tr.rowgoing { display: none; }
/* A row a file is dragged over, where the sheet takes files (a flight's receipt). */
.grid tr.filedrop td { box-shadow: inset 0 2px 0 var(--amber), inset 0 -2px 0 var(--amber); }
/* The foot row of a growable sheet: where the next record is typed, not a record itself. */
/* The blank lines at the foot: faint text, the same zebra as the records — never a translucent
   cell, which let the dark page show through on every even row as a grey band (the owner,
   2026-09-25: "remove this weird highlight on extra rows"). */
.grid tr.newrow td { font-style: italic; color: var(--sheet-dim); }
.grid tbody tr.newrow td, .grid tbody tr.newrow td.ro { background: var(--sheet); }
.grid tbody tr.newrow:nth-child(even) td, .grid tbody tr.newrow:nth-child(even) td.ro { background: var(--sheet-alt); }
/* A blank line's tint is the default it shows, not a record's colour: the zebra and the faint ink,
   like its other cells. Left to the tint, the Days sheet's blank lines read Show pink on every
   second line and white on the rest (2026-10-03). */
.grid tbody tr.newrow:nth-child(n) td[class*="tint-"] { background: var(--sheet); color: var(--sheet-dim); }
.grid tbody tr.newrow:nth-child(even) td[class*="tint-"] { background: var(--sheet-alt); }
.grid tr.newrow th.rownum { font-weight: 700; }


/* A labelled gap in a row of command buttons, so the groups read apart. */
.commands .cmdsep {
  align-self: center; margin: 0 2px 0 8px; padding-left: 8px;
  border-left: 1px solid var(--seam); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint);
}


/* ---- the push dialog (CAD › Against the order › Push shortages) --------------------------------
   The house pop-up, not a white sheet: it drew the dark theme's light ink over a white box (the owner,
   2026-10-23: "gray text over a white box … super hard to read"), filling 8% to 92% of the screen. */
.dialog {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 95;
  width: min(640px, calc(100vw - 40px)); max-height: calc(100vh - 32px); display: flex; flex-direction: column;
  background: var(--panel); color: var(--ink); border: 2px solid rgba(255,196,107,.55); border-radius: 16px;
  box-shadow: 0 24px 56px rgba(0,0,0,.7); box-sizing: border-box;
}
.dialogbar {
  display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  border-bottom: 1px solid var(--seam);
}
.dialogbar b { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-hi); }
.dialogbar .dismiss { margin-left: auto; }
.dialog .cmd {
  padding: 5px 12px; border-radius: 8px; border: 1px solid var(--amber-lo); background: transparent; color: var(--amber-hi);
  font: inherit; font-size: 12.5px; cursor: pointer;
}
.dialog .cmd:hover { background: var(--amber-lo); color: var(--ground); }
.dialog .cmd.dismiss { border-color: var(--seam); color: var(--ink-faint); }
.dialog .cmd.dismiss:hover { background: var(--seam); color: var(--ink); }
.dialog .cmd.running { opacity: .6; pointer-events: none; }
.dialogbody { flex: 1; overflow: auto; padding: 14px 18px; font-size: 13px; line-height: 1.5; }
.dialogbody p { margin: 0 0 8px; color: var(--ink); }
.dialogbody ul { margin: 0 0 14px; padding-left: 22px; font-family: var(--data); }
.dialogbody .keyhint { color: var(--ink-faint); margin: 0 0 8px; }
.dialogbody label.tick { display: flex; align-items: center; gap: 8px; margin: 4px 0 2px; color: var(--ink); cursor: pointer; }
.dialogbody label.tick input { accent-color: var(--amber-hi); }
.dialogbody .askfield { background: var(--ground); color: var(--ink); border: 1px solid var(--seam); border-radius: 6px; padding: 5px 8px; font: inherit; }
.dialog table.pushplan { border-collapse: collapse; width: 100%; margin: 0 0 14px; font-size: 12.5px; }
.dialog table.pushplan th { text-align: left; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber-hi); padding: 4px 8px 4px 0; border-bottom: 1px solid var(--seam); }
.dialog table.pushplan td { padding: 4px 8px 4px 0; border-bottom: 1px solid rgba(255,255,255,.06); vertical-align: middle; }
.dialog table.pushplan td.code { font-family: var(--data); }
.dialog table.pushplan td.num { text-align: right; font-family: var(--data); white-space: nowrap; }
.dialog table.pushplan td.short { color: #ff8a8a; }
.dialog table.pushplan select.askfield { min-width: 0; width: 100%; max-width: 220px; }
/* The push plan's table is wider than the house pop-up's 640px: the Add to order picks ran off the right and the
   rows under the heading were out of sight (owner, 2026-10-31: "this is drawing rows i cant see"). The pop-up widens
   to hold it, the description wraps, and what is still too wide scrolls inside the table's own box. */
.dialog:has(table.pushplan) { width: min(1000px, calc(100vw - 40px)); }
.dialog .pushplanwrap { overflow-x: auto; max-width: 100%; margin: 0 0 14px; }
.dialog .pushplanwrap table.pushplan { margin: 0; }
.dialog table.pushplan td:nth-child(2) { white-space: normal; min-width: 160px; }
.dialog table.pushplan select.needspick { border-color: var(--amber-hi); box-shadow: 0 0 0 1px var(--amber-hi) inset; }
.dialog .cmd:disabled { opacity: .45; cursor: not-allowed; }
.ticklist { margin-bottom: 16px; }
.ticklist h4 {
  margin: 0 0 6px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--amber-hi);
}
.tickrow {
  display: grid; grid-template-columns: 18px minmax(180px, auto) 1fr; align-items: baseline;
  gap: 8px; padding: 4px 0; cursor: pointer;
}
.tickrow:hover { background: #eef3f9; }
.tickrow b { font-weight: 600; font-size: 12px; }
.tickrow span { color: #6b7480; font-size: 11.5px; }

.askbox .asktext {
  width: 100%; margin: 8px 0 10px; padding: 6px 8px;
  border: 1px solid var(--sheet-rule, var(--seam)); background: #fff; color: var(--sheet-ink, #10131a);
  font-family: var(--data); font-size: 12px;
}
.askbox .askrow { display: flex; gap: 8px; justify-content: flex-end; }


/* ---- the column caret: sort and filter, where a spreadsheet puts them ---- */
.grid thead th .handle {
  position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  padding: 0 2px; font-size: 9px; line-height: 1; opacity: .22; cursor: grab; z-index: 2; user-select: none;
}
.grid thead th:hover .handle { opacity: .7; }
.grid thead th .handle:hover { opacity: 1; color: #0b63c5; }
.grid thead th .caret {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  padding: 0 2px; font-size: 9px; line-height: 1; opacity: .35; cursor: pointer; z-index: 2;
}
.grid thead th:hover .caret { opacity: .8; }
.grid thead th .caret:hover { opacity: 1; color: #0b63c5; }
/* A filtered column says so, because a sheet showing a third of its rows must not look
   like a sheet with a third of the rows in it. */
.grid thead th.filtered { color: #0b63c5; }
.grid thead th.filtered .caret { opacity: 1; color: #0b63c5; }

.filterpanel { width: 240px; padding: 4px 0; }
.filterpanel .filtersearch {
  width: calc(100% - 20px); margin: 4px 10px 6px; padding: 4px 6px;
  border: 1px solid var(--sheet-rule, #c8cdd4); background: #fff; color: #10131a;
  font: inherit; font-size: 11.5px;
}
.filterpanel .filterall {
  width: 100%; text-align: left; padding: 4px 12px; border: 0; background: transparent;
  color: inherit; font: inherit; font-size: 11.5px; cursor: pointer;
}
.filterpanel .filterall:hover { background: #e8eef7; color: #0b63c5; }
.filtervalues { max-height: 220px; overflow: auto; padding: 0 6px; }
.filtervalues label {
  display: flex; align-items: center; gap: 7px; padding: 2px 6px;
  font-size: 11.5px; cursor: pointer;
}
.filtervalues label:hover { background: #e8eef7; }
.filtervalues label span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sheet-ink);
}
.filterbar {
  display: flex; gap: 6px; justify-content: flex-end; padding: 8px 10px 4px;
  border-top: 1px solid var(--seam);
}


/* ---- menus belong to the sheet, so they read like the sheet -------------- */
/* A dark popup over a light spreadsheet reads as a different application. */
.cellmenu {
  /* Colour on the container, so the parts that are not buttons — the value list, the
     search field — read as dark text on the sheet rather than inheriting the dark chrome. */
  background: var(--sheet); border-color: var(--sheet-rule); color: var(--sheet-ink);
  box-shadow: 0 14px 34px rgba(20, 26, 34, .28);
}
.cellmenu button { color: var(--sheet-ink); }
.cellmenu button:hover { background: #e8eef7; color: #0b63c5; }
.cellmenu button em { color: #7b838e; }
.cellmenu hr { border-top-color: var(--sheet-line); }
.cellmenu .go {
  padding: 4px 12px; border: 1px solid #0b63c5; background: #0b63c5; color: #fff;
  font: inherit; font-size: 11.5px; cursor: pointer;
}
.cellmenu .go:hover { background: #0a56ab; }
.cellmenu .dismiss {
  padding: 4px 12px; border: 1px solid var(--sheet-rule); background: transparent;
  color: var(--sheet-ink); font: inherit; font-size: 11.5px; cursor: pointer;
}
.cellmenu .dismiss:hover { border-color: #0b63c5; color: #0b63c5; }
.filterbar { border-top-color: var(--sheet-line); }

/* A value the row does not hold itself — inherited from its type, and greyed to say so. */
.grid td .cellvalue.inherited { color: #8b939e; font-style: italic; }


/* The start-up failure notice. A blank window says nothing at a load-in. */
.fatal { max-width: 620px; padding: 28px 4px; }
.fatal h2 { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.fatal p { margin: 0 0 10px; font-size: 13px; }

/* ---- the case fill test ---------------------------------------------------- */
.fillpanel h4 { margin: 18px 0 4px; font: 700 11px/1 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.fillpanel h4:first-child { margin-top: 0; }
.fillrows { display: flex; flex-direction: column; gap: 2px; margin: 6px 0; }
.fillrow {
  display: grid; grid-template-columns: 150px 1fr 70px auto; align-items: center; gap: 10px;
  padding: 3px 8px; background: var(--panel);
}
.fillrow b { font-family: var(--data); font-size: 11.5px; color: var(--ink); }
.fillrow span { font-family: var(--data); font-size: 10.5px; color: var(--ink-faint); }
.fillrow i { font-style: normal; font-size: 10.5px; color: var(--ink-faint); }
.fillrow input.count { width: 64px; text-align: right; }

/* ---- the small stepper ------------------------------------------------------ */
/* The browser's spinner is switched off wherever the stepper is drawn beside the field. */
input.nospin { appearance: textfield; -moz-appearance: textfield; }
input.nospin::-webkit-inner-spin-button, input.nospin::-webkit-outer-spin-button { display: none; margin: 0; }
.stepper { display: inline-flex; flex-direction: column; margin-left: 2px; vertical-align: middle; }
.stepper button {
  width: 11px; height: 8px; padding: 0; border: 0; background: transparent; cursor: pointer;
  font-size: 7px; line-height: 8px; color: var(--ink-faint);
}
.stepper button:hover { color: var(--amber); }
.stepper button:active { color: var(--amber-hi); }

/* ---- the power dashboard, in columns ---------------------------------------- */
.dashwrap { overflow-x: auto; }
table.dash { min-width: 900px; }
table.dash td.num { position: relative; text-align: right; }
/* How full a leg is: a thin bar along the cell's foot, so the number stays on clear ground.
   It was a wash behind the digits, which read as bleed-through and cost legibility. */
table.dash td[style*="--fill"]::after {
  content: ""; position: absolute; left: 6px; bottom: 2px; height: 3px;
  width: calc((100% - 12px) * var(--fill) / 100%); max-width: calc(100% - 12px);
  background: var(--amber-lo); opacity: .8; border-radius: 1px;
}
table.dash td.over { color: #ff6b7a; }
table.dash td.over::after { background: #d0384a; }
table.dash tr.service td { border-top: 1px solid var(--seam-bright); }
table.dash tr.service.bad b { color: #ff6b7a; }
table.dash td.indent { padding-left: 22px; }
table.dash tr.rack td { color: var(--ink-dim); }

/* An empty unit in the rack's addressing table is an empty line, not a missing one. */
.rackdata tr.blank td { height: 20px; color: var(--ink-faint); }

/* ---- settings: the list stays put while the table scrolls ------------------- */
/* Twenty-odd tables down the side put the one you want below the fold and the table you
   are reading above it. The list keeps its own scroll and sticks to the top. */
.adminsplit { align-items: start; }
.adminlist { position: sticky; top: 0; max-height: calc(100vh - 96px); overflow-y: auto; }
.adminlist button { padding: 5px 12px; }
.adminlist button span { display: none; }
.adminlist button[aria-current="true"] span { display: block; }
/* Parents and children: a heading per group that folds, its tables indented under it.
   Only the group being read stays open, so the whole list fits without scrolling. */
.adminlist .admingroup {
  display: block; width: 100%; padding: 5px 10px 4px; border: 0; border-bottom: 1px solid #1b1e23;
  background: var(--panel-hi); color: var(--ink); font: 700 10.5px/1.2 var(--chrome); letter-spacing: .08em;
  text-transform: uppercase; text-align: left; cursor: pointer;
}
.adminlist .admingroup::before { content: "\25B8"; display: inline-block; width: 12px; color: var(--ink-faint); font-size: 9px; }
.adminlist .admingroupbox.open .admingroup::before { content: "\25BE"; }
.adminlist .admingroupbox.holds .admingroup { color: var(--amber); }
.adminlist .admingrouprows { display: none; flex-direction: column; }
.adminlist .admingroupbox.open .admingrouprows { display: flex; }
.adminlist .admingrouprows button { padding: 3px 10px 3px 22px; }
.adminlist .admingrouprows button b { font-size: 11.5px; }

/* ---- reprint ---------------------------------------------------------------- */
.reprint .kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.reprint .kinds .findopt { flex: 1; text-align: center; }
.reprintitem {
  display: grid; grid-template-columns: 92px 1fr auto auto; gap: 8px; align-items: center; width: 100%;
  text-align: left; padding: 6px 6px; background: transparent; border: 0; border-bottom: 1px solid #14171c;
  color: var(--ink-dim); font-family: var(--data); font-size: 11px; cursor: pointer;
}
.reprintitem:hover { background: var(--panel-hi); color: var(--ink); }
.reprintitem b { color: var(--ink); font-weight: 600; }
.reprintitem.parent b::after { content: ' \25B8'; color: var(--ink-faint); }
.reprintitem span { color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reprintitem em { font-style: normal; color: var(--ink-faint); white-space: nowrap; font-size: 10px; }
.reprintitem .rowprint { padding: 2px 8px; }
.reprintkids { margin: 0 0 6px 10px; border-left: 2px solid var(--seam); }
.reprintitem.child { grid-template-columns: 92px 1fr auto auto; }
.reprintitem.child.all b { color: var(--amber); }
.reprintmark { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; font-size: 11px; color: var(--ink-faint); }
.reprint .findgroup h5 { align-items: center; }
.reprint .findgroup h5 .cmd, .reprint .findgroup h5 .rowprint { margin-left: auto; padding: 2px 8px; }
.reprint .findgroup h5 .rowprint { margin-left: 0; }

/* Trucking */
.trucking tr.ontruck td { color: var(--ink); }
.trucking td.act { white-space: nowrap; }
.trucking td.act select {
  min-width: 110px; margin-right: 6px; padding: 2px 4px; font: 11px var(--data);
  background: var(--sheet); color: var(--sheet-ink); border: 1px solid var(--sheet-rule);
}
.trucking td.act button.cmd {
  padding: 3px 8px; border: 1px solid var(--sheet-rule); background: var(--sheet); color: var(--sheet-ink);
  font: 600 9.5px/1.4 var(--chrome); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
}
.trucking td.act button.cmd:hover { border-color: var(--amber); color: var(--amber-lo); }
.trucking table.grid th:last-child, .trucking table.grid td.act { width: 210px; }
.trucking .commands .scalar { padding: 4px 8px; background: #0e1114; border: 1px solid var(--seam); color: var(--ink); font: 11.5px var(--data); }

/* The patch pill stays in the toolbar: it is a button, and the amber tell-tale that the
   drawing is behind belongs beside the section's tools. */
.toolbar .patchpill {
  display: flex; align-items: center; margin-left: auto; padding: 0 12px; background: var(--panel);
  border: 0; cursor: pointer; font-family: var(--data); font-size: 10.5px; color: var(--ink-faint); white-space: nowrap;
}
.toolbar .patchpill + .keys { margin-left: 0; }
.toolbar .patchpill.behind { color: var(--amber); }
.toolbar .patchpill.current { color: var(--ink-faint); }
.toolbar .patchpill.failed { color: #ff6b7a; }
.toolbar .patchpill.behind:hover { color: var(--amber-hi); background: var(--panel-hi); }
.toolbar .patchpill[hidden] { display: none; }

/* When the app last wrote the CADSYNC file — beside the patch pill, so both
   read together: whether a push is owed, and when the last one actually landed. Its own
   margin-left: auto, not just a rule keyed off a visible patch pill, so it still lands at
   the toolbar's right edge on its own when the patch pill is hidden — the common case, since
   the patch pill only shows while something is actually owed or Live has something to say. */
.toolbar .writtenpill {
  display: flex; align-items: center; margin-left: auto; padding: 0 12px; font-family: var(--data); font-size: 10.5px;
  color: var(--ink-faint); white-space: nowrap;
}
.toolbar .patchpill:not([hidden]) + .writtenpill { margin-left: 0; }
.toolbar .writtenpill[hidden] { display: none; }

/* ---- compact ------------------------------------------------------------ */
/*
  The owner's direction, 2026-09-04: the app is for efficiency, and it had become "more
  pretty than efficient" — the rail especially. Everything that is chrome rather than data
  is tightened here, in one place, so the earlier rules above still say what each thing is
  and this block says how much room it gets. Readability was asked for in the same breath,
  so type shrinks less than the space around it.
*/
:root { --row: 23px; }

/* The rail: narrower, tighter rows, groups a hair apart rather than a band apart. */
.frame { grid-template-columns: 156px 1fr; }
.rail { padding: 3px 0 8px 8px; }
.rail::before {
  width: 8px;
  background:
    radial-gradient(circle at 4px 50%, #04060a 0 1.6px, rgba(255,255,255,.10) 1.6px 2.2px, transparent 2.2px)
      0 0 / 8px 28px repeat-y,
    linear-gradient(90deg, #1f242b 0%, #171b21 60%, #101317 100%);
}
.rail h3 { margin: 7px 10px 1px; font-size: 9px; letter-spacing: .14em; }
.rail button {
  padding: 2px 8px 2px 9px; gap: 6px; line-height: 1.3; font-size: 12.5px; letter-spacing: .02em;
}
.rail button.sub { padding-left: 20px; font-size: 12px; }
/* `.sub` is also the page subtitle, which is uppercase, spaced out and 18 px off the next
   thing — none of which a rail row wants. That collision is what had the rail so tall. */
.rail button.sub { margin-bottom: 0; letter-spacing: .02em; text-transform: none; }
.rail button em { font-size: 10px; }
.railgroup { border-bottom: 0; padding-bottom: 2px; }
.grabber { left: 0; width: 8px; }

/* The faceplate and the show tabs. */
.mark { padding: 0 12px; gap: 8px; }
.mark b { font-size: 13px; }
.mark span { font-size: 9px; }
.show-tab { padding: 0 12px; min-width: 0; gap: 8px; }
.show-tab b { font-size: 12px; }
.show-tab i { font-size: 9.5px; }
.plate-right { gap: 10px; padding: 0 12px; }
.screw { width: 9px; height: 9px; }

/* The menu bar and the toolbar. */
.menubar { height: 22px; }
.menubar .menu { padding: 0 10px; font-size: 11px; }
.toolbar { min-height: 26px; }
.toolbar .where { padding: 0 10px; gap: 8px; }
.toolbar .where b { font: 700 11.5px/26px var(--chrome); letter-spacing: .12em; }
.toolbar .commandform { top: 26px; }
.toolbar .railtoggle, .toolbar .keys { width: 26px; }

/* The mode strips, commands and the cell bar. */
.modes button[data-mode] { padding: 5px 12px; }
.modes .toggle { padding: 0 10px; }
.commands .cmd { padding: 5px 10px; }
.cellbar .addr { min-width: 150px; padding: 0 10px; }
.cellbar .barvalue { height: 24px; padding: 0 10px; }

/* The pane, and how much of the window the sheet gets: see the measurement below. */
main { padding: 8px 10px 40px; }
.gridwrap { max-height: calc(100vh - var(--above-sheet, 150px)); }

/* A heading folds its group: the caret says which way it is. */
.rail h3 { cursor: pointer; user-select: none; }
.rail h3::before { content: "\25BE"; display: inline-block; width: 9px; margin-left: -9px; font-size: 8px; }
.railgroup.folded h3::before { content: "\25B8"; }
.railgroup.folded button { display: none; }
/* The Add button above a sheet that grows. */
main > div > .commands:first-child { margin-bottom: 4px; }
/* A group inside a group: its heading and its rows step in once more. */
.rail h3.sub { margin: 4px 10px 1px 20px; }
.rail button.sub2 { padding-left: 30px; }
.railsub.folded button { display: none; }
.railgroup.folded .railsub { display: none; }
/* A heading's grab handle moves its whole group. */
.rail h3 { position: relative; }
.rail h3 .grabber { top: 50%; }
.rail h3:hover .grabber { opacity: .75; }
.railsub.dragging, .rail button.dragging { opacity: .45; }
/* Inventory stands out on the rail (the owner, 2026-10-30: "inventory in the sidebar needs to be more prominent"):
   its heading in the amber, a size up and bold, an amber rule down the group's left edge, its pages a shade brighter. */
.rail .railgroup[data-key="inventory"] { box-shadow: inset 2px 0 0 var(--amber); background: rgba(255, 138, 31, .05); margin: 2px 0; padding-top: 1px; }
.rail .railgroup[data-key="inventory"] > h3 { color: var(--amber); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; }
.rail .railgroup[data-key="inventory"] > h3:hover { color: var(--amber-hi); }
.rail .railgroup[data-key="inventory"] > button.sub:not([aria-current="true"]) { color: var(--ink-dim); }

/* ---- the rack builder: blocks over units, halves, the editor ------------------ */
.rackbody { position: relative; padding: 0; }
.builder .ru { height: 20px; }
.builder .seat {
  position: absolute; left: 0; width: 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: 8px; padding: 0 8px 0 30px;
  background: #15181d; color: var(--ink); border-bottom: 1px solid var(--seam);
  box-shadow: inset 3px 0 0 var(--amber); cursor: grab;
  font-family: var(--data); font-size: 10.5px; overflow: hidden; white-space: nowrap;
}
.builder .seat b { font-weight: 600; }
.builder .seat span { color: var(--amber); }
.builder .seat u { text-decoration: none; margin-left: auto; color: var(--ink-faint); font-size: 9.5px; }
.builder .seat.half { width: 50%; padding-left: 30px; box-shadow: inset 3px 0 0 var(--amber), inset -1px 0 0 var(--seam); }
.builder .seat.half.right { left: 50%; padding-left: 8px; box-shadow: inset 3px 0 0 var(--amber); }
.builder .seat:hover { background: #1a1e24; }
.shelf h4 + h4 { border-top: 1px solid var(--seam); }
.shelf .keyhint.short { margin: 8px 12px; }
/* The table's rows are the rack's units: the same height, and the same start. */
.rackdata { margin-top: 0; }
.rackdata table thead th { height: 27px; padding: 0 8px; box-sizing: border-box; }
.rackdata table tbody td { height: 20px; padding: 0 8px; line-height: 20px; box-sizing: content-box; }
.rackdata table tbody td input { height: 18px; padding: 0 4px; font: inherit; width: 100%; box-sizing: border-box; }
.rackdata td.ports i { font-style: normal; display: inline-block; min-width: 18px; margin-right: 3px; padding: 0 3px; border-radius: 2px; text-align: center; }
.rackdata td.ports i.live, input.portval.live { background: #c8f7c5; color: #1b4d1a; }
.rackdata td.ports i.spare, input.portval.spare { background: #ffc0e0; color: #6b1d45; }
.sidecaret { border: 0; background: none; color: var(--ink-faint); cursor: pointer; padding: 0 4px 0 0; font-size: 10px; }
.sidecaret:hover { color: var(--amber); }
.rackeditor {
  position: absolute; left: 50%; top: 80px; transform: translateX(-50%); z-index: 40; width: 380px;
  padding: 12px 14px 14px; background: var(--panel); border: 1px solid var(--seam-bright);
  box-shadow: 0 16px 36px rgba(0,0,0,.6);
}
.builder { position: relative; }
.rackeditorhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.rackeditorhead b { font-family: var(--data); font-size: 13px; color: var(--amber-hi); }
.rackeditorhead span { color: var(--ink-faint); font-size: 10.5px; }
.dfield { display: flex; align-items: center; gap: 6px; }
.dfield > span:first-child { color: var(--ink-faint); font-size: 10.5px; white-space: nowrap; }
.rackeditor .dfield { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.rackeditor .dfield span { width: 70px; color: var(--ink-faint); font-size: 10.5px; }
.rackeditor .dfield input { flex: 1; }
.rackeditor h5 { margin: 10px 0 4px; font: 700 9.5px/1 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.portsheet { max-height: 260px; overflow-y: auto; border: 1px solid var(--seam); }
.portsheet table { width: 100%; border: 0; }
.portsheet td, .portsheet th { height: 20px; padding: 0 6px; line-height: 20px; }
.portsheet td.num { width: 34px; text-align: right; }
.portsheet input.portval { width: 100%; height: 18px; padding: 0 4px; border: 0; background: #fff; color: #000; font: inherit; box-sizing: border-box; }
.rackeditor .drow { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.rackeditor .drow em { flex: 1; }
/* The footprint of a drag in the air: every unit it would cover, green if it fits, red if not. */
.builder .ru.fits { background: rgba(80, 200, 120, .28); box-shadow: inset 0 0 0 1px #3fbf6f; }
.builder .ru.nofit { background: rgba(220, 60, 80, .28); box-shadow: inset 0 0 0 1px #d0384a; }
.builder .ru.fits.left, .builder .ru.nofit.left { background: linear-gradient(to right, rgba(80, 200, 120, .28) 50%, transparent 50%); }
.builder .ru.nofit.left { background: linear-gradient(to right, rgba(220, 60, 80, .28) 50%, transparent 50%); }
.builder .ru.fits.right { background: linear-gradient(to right, transparent 50%, rgba(80, 200, 120, .28) 50%); }
.builder .ru.nofit.right { background: linear-gradient(to right, transparent 50%, rgba(220, 60, 80, .28) 50%); }
.builder .seat { pointer-events: auto; }
.builder .rackbody.dragging .seat { pointer-events: none; }
/* A seated block carries its unit number where the empty unit would show it. */
.builder .seat { padding-left: 10px; }
.builder .seat i { font-style: normal; width: 18px; text-align: right; color: #3d434c; flex: none; }
.builder .seat.half.right { padding-left: 10px; }
/* Units and blocks share one grid: a unit is exactly 21 px including its rule, so a block
   at (ru - 1) * 21 starts on its unit's top edge and ends on its last unit's rule. */
.builder .ru { box-sizing: border-box; height: 21px; padding-top: 0; padding-bottom: 0; }
.builder .rackbody { padding: 0; margin: 0; }
/* The shelf: tight rows, and it scrolls on its own so the rack stays put beside it. */
.builder .shelf { position: sticky; top: 6px; max-height: calc(100vh - 110px); overflow-y: auto; align-self: start; }
.builder .shelfitem { padding: 2px 8px; gap: 6px; font-size: 10px; line-height: 1.3; }
/* Normal weight: bold ate the width a long name needed (the owner, 2026-09-25). */
.builder .shelfitem b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shelf .libfilter {
  display: block; width: calc(100% - 16px); margin: 6px 8px 4px; padding: 4px 7px; box-sizing: border-box;
  background: #0e1114; border: 1px solid var(--seam); color: var(--ink); font-family: var(--data); font-size: 11px;
}
.shelf .libfilter:focus { outline: none; border-color: var(--amber-lo); box-shadow: inset 0 0 0 1px var(--amber-lo); }
.shelf.filtering .libhead[hidden], .shelf.filtering .libbody[hidden], .shelf.filtering .shelfitem[hidden] { display: none; }
.builder .shelfitem span { flex: none; font-size: 9.5px; }
.builder .shelf h4 { position: sticky; top: 0; z-index: 1; padding: 5px 8px; }
.rackeditor .dfield .sidecaret { flex: none; }
.rackeditor .dfield[hidden], .rackeditor .sidecaret[hidden] { display: none; }

/* ---- the four modes ----------------------------------------------------------- */
.modeswitch { display: flex; gap: 1px; background: var(--seam); border: 1px solid var(--seam); margin-right: 8px; }
.modeswitch[hidden] { display: none; }
/* The app switch on the top row, after the menus: CAD, Electrics, Labor, Management. The same
   metal as the modes and the same height on the 28px row, the lettering a little heavier. */
.appswitch { display: flex; align-self: center; gap: 1px; margin: 0 10px 0 6px; background: var(--seam); border: 1px solid var(--seam); }
.appswitch button {
  padding: 3px 10px; border: 0; background: var(--panel); color: var(--ink-dim);
  font: 700 10px/1 var(--chrome); letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
}
.appswitch button:hover { color: var(--ink); background: var(--panel-hi); }
.appswitch button[aria-current="true"] { color: var(--ground); background: var(--metal); }
.apphome { padding: 18px 22px; max-width: 760px; }
/* The Labor app: a toolbar line, dense lists, the tiers and day types as tints. */
.labor { padding: 10px 14px; }
.labor h3 { margin: 0 0 8px; }
.laborbar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.laborbar .keyhint { margin: 0; flex: 1; }
.laborbar .cmd, .clockrow .cmd { padding: 4px 10px; border: 1px solid var(--amber-lo); background: transparent; color: var(--amber); font: 600 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.laborbar .cmd:disabled, .clockrow .cmd:disabled { opacity: .45; cursor: default; }
/* The Stays toolbar's Property pick — which hotel the files cover — drawn as the buttons beside it are. */
.laborbar select.exportproperty { padding: 4px 8px; border: 1px solid var(--amber-lo); background: transparent; color: var(--amber); font: 600 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.laborbar select.exportproperty option { background: #0e1114; color: var(--ink); }
.laborbar .exportlabel { font: 600 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; }
/* The production schedules' publish options (the owner, 2026-10-28): Days ▾, a tick a day, and a page break after each day. */
.laborbar.publishopts { padding: 6px 10px; border: 1px solid var(--seam); background: var(--panel); }
.laborbar.publishopts .exportlabel { color: var(--ink-dim); }
.laborbar .publishdays { position: relative; display: inline-flex; }
.publishdayslist { min-width: 300px; max-height: 60vh; overflow-y: auto; }
.publishdayslist hr { margin: 2px 0; border: 0; border-top: 1px solid var(--seam); }
.publishdayslist .columnsitem span { text-transform: none; letter-spacing: .02em; }
.laborbar.publishopts .askcheck { margin: 0; color: var(--ink-dim); }
.laborpick, .laborsearch { padding: 4px 7px; background: #0e1114; border: 1px solid var(--seam); color: var(--ink); font-family: var(--data); font-size: 11.5px; }
.laborsearch { width: 220px; }
.laborlist { width: auto; min-width: 520px; }
.laborlist td.num { text-align: right; font-family: var(--data); }
.laborlist td.over, .cards b.over { color: #ff8f9b; }
.laborlist td.under, .cards b.under { color: #6fd08a; }
.laborlist tr.depthead td { font: 700 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); padding-top: 8px; }
.deptdot { display: inline-block; width: 9px; height: 9px; margin-right: 7px; vertical-align: -1px; border-radius: 2px; }
.callmeal { padding: 2px 4px; background: #0e1114; border: 1px solid var(--seam); color: var(--ink); font-family: var(--data); font-size: 11px; }
.clockrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.clocksaid { min-height: 16px; font: 11.5px var(--data); color: var(--ink-dim); }
.clocksaid.ok { color: var(--amber-hi); }
.clocksaid.failed { color: #ff6b7a; }
/* A small one-shot ask — a time, a name, a note — never needed the wizard's width: it was
   sized for the busiest labor forms and every plain one inherited that, mostly as empty
   space (the owner, 2026-09-18: "make this pop up and others like it more compact by
   half"). Half the width, tighter padding and a tighter grid; a field that does not fit
   a row wraps to the next rather than stretching the box. */
.askbox.asklabor, .askbox.askcompact { max-width: 360px; padding: 12px 14px; }
.askbox.asklabor .askgrid { gap: 6px 10px; }
.askbox.asklabor .askrow, .askbox.askcompact .askrow { margin-top: 2px; }
.askbox.askcompact .asktext { width: 100%; }
.askbox .askchecks { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.askcheck { display: flex; align-items: center; gap: 6px; margin: 4px 0; font-size: 12px; color: var(--ink-faint); }
.askbox .askfield.wide { width: 420px; }
.badgegrid { display: flex; flex-wrap: wrap; gap: 8px; }
/* Reviews of proposed rows (imports), and the assistant's thread and proposal card. */
.askbox.askreview { max-width: 900px; width: calc(100vw - 60px); }
.askbox.askreview .floortable { flex: 1 0 100%; max-height: 50vh; }
.laborreview th { white-space: nowrap; }
.directoryresults { margin: 6px 0 12px; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.assistant { padding: 10px 14px; max-width: 900px; }
.assistantthread { max-height: 420px; overflow: auto; margin: 8px 0; padding: 4px 0; border-top: 1px solid var(--seam); border-bottom: 1px solid var(--seam); }
/* A text chat: Lumen's bubbles to the left, yours to the right, on the full page and in the
   widget alike (the owner, 2026-09-18: "the user's chat aligned to one side and the bot's to
   the other, to make it easier to read"). */
.assistantsay { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 4px 0; font: 12px/1.5 var(--data); color: var(--ink); }
.assistantsay b { font: 700 8.5px/1.6 var(--chrome); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint); }
.assistantsay span, .assistantsay .thinking { max-width: 88%; padding: 8px 12px; border-radius: 14px; border-bottom-left-radius: 4px; background: rgba(255,255,255,.06); color: var(--ink); line-height: 1.45; }
.assistantsay.you { align-items: flex-end; }
.assistantsay.you span { border-radius: 14px; border-bottom-right-radius: 4px; background: linear-gradient(135deg, rgba(255,196,107,.28), rgba(255,138,31,.22)); color: #ffe6c2; }
.assistantsay.greeting span { border: 1px solid rgba(255,196,107,.35); }
/* A live "still thinking" — a spinning wheel in the bubble where the answer will land
   (the owner, 2026-09-18: "a spinning wheel for when it's thinking"). */
.thinking { display: inline-flex; gap: 8px; align-items: center; }
.thinking .wheel { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid rgba(255,196,107,.22); border-top-color: var(--amber-hi); animation: thinkspin .8s linear infinite; }
.thinking em { font-style: normal; color: var(--ink-faint); font-size: 11px; }
@keyframes thinkspin { to { transform: rotate(360deg); } }
.assistantcard { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 6px 0 10px; padding: 8px 10px; border: 1px solid var(--amber-lo); background: var(--panel); font: 12px/1.5 var(--data); color: var(--ink); }
.assistantcard .askrow { margin: 0; flex: 0 0 auto; }
.assistantcard .cmd { padding: 4px 10px; border: 1px solid var(--amber-lo); background: transparent; color: var(--amber); font: 600 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.assistantcard .cmd.dismiss { border-color: var(--seam); color: var(--ink-faint); }
/* A choice with a line under it saying what it does; stacked, each on its own line, never cropped (the owner, 2026-09-26). */
.assistantcard .cmd b { font: inherit; }
.assistantcard .cmd small { display: block; margin-top: 2px; font: 11px/1.4 var(--data); letter-spacing: 0; text-transform: none; color: var(--ink-faint); }
.assistantcard .askrow.stack { flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: 6px; }
.assistantcard .askrow.stack .cmd { text-align: left; padding: 7px 12px; }
.assistwidgetpanel .assistantcard .askrow.stack .cmd { border-radius: 12px; }
.assistantcard .cmd:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.assistantinput { flex: 1; min-width: 240px; }
/* The Mic listening (the owner, 2026-10-08): the button breathes amber, the box shows the words as they come, the hint names the keys. */
.clockrow .cmd.listening { border-color: var(--amber); color: var(--amber-hi, #ffb15a); animation: miclisten 1.4s ease-in-out infinite; }
@keyframes miclisten { 50% { box-shadow: 0 0 0 4px rgba(255, 177, 90, .18); } }
.assistantinput.listening { border-color: var(--amber-lo); caret-color: var(--amber); }
.assistant .michint { margin: -2px 0 8px; color: var(--ink-faint); }
.assistant .michint[hidden] { display: none; }
.badgecard { width: 180px; padding: 10px; border: 1px solid var(--seam); background: var(--panel); text-align: center; display: flex; flex-direction: column; gap: 3px; align-items: center; }
.badgecard b { font-size: 12.5px; }
.badgecard span { font-size: 10.5px; color: var(--ink-dim); }
.badgecard .badgeqr { width: 110px; height: 110px; background: #fff; }
.badgecard code { font-size: 10px; letter-spacing: 1px; color: var(--ink-dim); }
.badgecard small { font-size: 8px; color: var(--ink-faint); word-break: break-all; }
.grid tbody td.tint-tier-ST, .grid tbody tr:nth-child(even) td.tint-tier-ST { background: #d7ede4; color: #1c6d5e; }
.grid tbody td.tint-tier-OT, .grid tbody tr:nth-child(even) td.tint-tier-OT { background: #f5e6c4; color: #8a6412; }
.grid tbody td.tint-tier-DT, .grid tbody tr:nth-child(even) td.tint-tier-DT { background: #f6d5cb; color: #b5522f; }
/*
 * A day type's colour on the Days sheet: opaque, and the same on every row. They were the
 * palette's colour at a fifth, painted over whatever was under the cell — white on an odd row,
 * the page's dark stripe on an even one — so a column of Full Prep read light, dark, light, dark,
 * the type's own ink lost on the dark rows (the owner, 2026-10-03: "the alternating row color
 * compounding the color code for the days is making it impossible to read"). Now the colour
 * a quarter strength over white and the ink the same hue darkened to read on it, and on the
 * selection's blue, at 4.5:1 or better; a hover leaves them be.
 */
/* A subtle tint a date on the Shifts sheet, eight hues turn and turn about, nothing saturated (the owner, 2026-10-07). */
.grid tbody td.tint-date-0, .grid tbody tr:nth-child(even) td.tint-date-0 { background: #eef3f6; color: #24313a; }
.grid tbody td.tint-date-1, .grid tbody tr:nth-child(even) td.tint-date-1 { background: #f6efe6; color: #3a2e22; }
.grid tbody td.tint-date-2, .grid tbody tr:nth-child(even) td.tint-date-2 { background: #eef5ee; color: #243a26; }
.grid tbody td.tint-date-3, .grid tbody tr:nth-child(even) td.tint-date-3 { background: #f4eef6; color: #35243a; }
.grid tbody td.tint-date-4, .grid tbody tr:nth-child(even) td.tint-date-4 { background: #f6f3e6; color: #3a3522; }
.grid tbody td.tint-date-5, .grid tbody tr:nth-child(even) td.tint-date-5 { background: #e9f3f3; color: #223a3a; }
.grid tbody td.tint-date-6, .grid tbody tr:nth-child(even) td.tint-date-6 { background: #f6ecec; color: #3a2424; }
.grid tbody td.tint-date-7, .grid tbody tr:nth-child(even) td.tint-date-7 { background: #efefef; color: #2c2c2c; }
.grid tbody td.tint-day-0, .grid tbody tr:nth-child(even) td.tint-day-0, .grid tbody td.tint-dayown-0, .grid tbody tr:nth-child(even) td.tint-dayown-0, .grid tbody tr.grouphead span.daytypechip.tint-day-0 { background: #d8e3e8; color: #3c5b68; font-weight: 600; }
.grid tbody td.tint-day-1, .grid tbody tr:nth-child(even) td.tint-day-1, .grid tbody td.tint-dayown-1, .grid tbody tr:nth-child(even) td.tint-dayown-1, .grid tbody tr.grouphead span.daytypechip.tint-day-1 { background: #d0d9db; color: #375560; font-weight: 600; }
.grid tbody td.tint-day-2, .grid tbody tr:nth-child(even) td.tint-day-2, .grid tbody td.tint-dayown-2, .grid tbody tr:nth-child(even) td.tint-dayown-2, .grid tbody tr.grouphead span.daytypechip.tint-day-2 { background: #d0dbd5; color: #335a42; font-weight: 600; }
.grid tbody td.tint-day-3, .grid tbody tr:nth-child(even) td.tint-day-3, .grid tbody td.tint-dayown-3, .grid tbody tr:nth-child(even) td.tint-dayown-3, .grid tbody tr.grouphead span.daytypechip.tint-day-3 { background: #dbdad6; color: #565245; font-weight: 600; }
.grid tbody td.tint-day-4, .grid tbody tr:nth-child(even) td.tint-day-4, .grid tbody td.tint-dayown-4, .grid tbody tr:nth-child(even) td.tint-dayown-4, .grid tbody tr.grouphead span.daytypechip.tint-day-4 { background: #e3dac6; color: #6c4e0e; font-weight: 600; }
.grid tbody td.tint-day-5, .grid tbody tr:nth-child(even) td.tint-day-5, .grid tbody td.tint-dayown-5, .grid tbody tr:nth-child(even) td.tint-dayown-5, .grid tbody tr.grouphead span.daytypechip.tint-day-5 { background: #e9cfcc; color: #8c3024; font-weight: 600; }
.grid tbody td.tint-day-6, .grid tbody tr:nth-child(even) td.tint-day-6, .grid tbody td.tint-dayown-6, .grid tbody tr:nth-child(even) td.tint-dayown-6, .grid tbody tr.grouphead span.daytypechip.tint-day-6 { background: #dbd4e3; color: #60437c; font-weight: 600; }
.grid tbody td.tint-day-7, .grid tbody tr:nth-child(even) td.tint-day-7, .grid tbody td.tint-dayown-7, .grid tbody tr:nth-child(even) td.tint-dayown-7, .grid tbody tr.grouphead span.daytypechip.tint-day-7 { background: #ddedfa; color: #3b5e7a; font-weight: 600; }
.grid tbody td.tint-day-8, .grid tbody tr:nth-child(even) td.tint-day-8, .grid tbody td.tint-dayown-8, .grid tbody tr:nth-child(even) td.tint-dayown-8, .grid tbody tr.grouphead span.daytypechip.tint-day-8 { background: #fce4e1; color: #834d46; font-weight: 600; }
.grid tbody td.tint-day-9, .grid tbody tr:nth-child(even) td.tint-day-9, .grid tbody td.tint-dayown-9, .grid tbody tr:nth-child(even) td.tint-dayown-9, .grid tbody tr.grouphead span.daytypechip.tint-day-9 { background: #e3f4e7; color: #43644b; font-weight: 600; }
.grid tbody td.tint-day-10, .grid tbody tr:nth-child(even) td.tint-day-10, .grid tbody td.tint-dayown-10, .grid tbody tr:nth-child(even) td.tint-dayown-10, .grid tbody tr.grouphead span.daytypechip.tint-day-10 { background: #fcf0ce; color: #745d18; font-weight: 600; }
.grid tbody td.tint-day-11, .grid tbody tr:nth-child(even) td.tint-day-11, .grid tbody td.tint-dayown-11, .grid tbody tr:nth-child(even) td.tint-dayown-11, .grid tbody tr.grouphead span.daytypechip.tint-day-11 { background: #ede4ff; color: #664f8f; font-weight: 600; }
.grid tbody td.tint-day-12, .grid tbody tr:nth-child(even) td.tint-day-12, .grid tbody td.tint-dayown-12, .grid tbody tr:nth-child(even) td.tint-dayown-12, .grid tbody tr.grouphead span.daytypechip.tint-day-12 { background: #daf4f3; color: #316563; font-weight: 600; }
.grid tbody td.tint-day-13, .grid tbody tr:nth-child(even) td.tint-day-13, .grid tbody td.tint-dayown-13, .grid tbody tr:nth-child(even) td.tint-dayown-13, .grid tbody tr.grouphead span.daytypechip.tint-day-13 { background: #fce4ec; color: #7f4a5c; font-weight: 600; }
.grid tbody td.tint-day-14, .grid tbody tr:nth-child(even) td.tint-day-14, .grid tbody td.tint-dayown-14, .grid tbody tr:nth-child(even) td.tint-dayown-14, .grid tbody tr.grouphead span.daytypechip.tint-day-14 { background: #ffeed4; color: #7a5825; font-weight: 600; }
.grid tbody td.tint-day-15, .grid tbody tr:nth-child(even) td.tint-day-15, .grid tbody td.tint-dayown-15, .grid tbody tr:nth-child(even) td.tint-dayown-15, .grid tbody tr.grouphead span.daytypechip.tint-day-15 { background: #e8f9f9; color: #466665; font-weight: 600; }
.grid tbody td.tint-day-16, .grid tbody tr:nth-child(even) td.tint-day-16, .grid tbody td.tint-dayown-16, .grid tbody tr:nth-child(even) td.tint-dayown-16, .grid tbody tr.grouphead span.daytypechip.tint-day-16 { background: #dfe2f3; color: #4b537e; font-weight: 600; }
.grid tbody td.tint-day-17, .grid tbody tr:nth-child(even) td.tint-day-17, .grid tbody td.tint-dayown-17, .grid tbody tr:nth-child(even) td.tint-dayown-17, .grid tbody tr.grouphead span.daytypechip.tint-day-17 { background: #f9dddd; color: #854343; font-weight: 600; }
.grid tbody td.tint-day-18, .grid tbody tr:nth-child(even) td.tint-day-18, .grid tbody td.tint-dayown-18, .grid tbody tr:nth-child(even) td.tint-dayown-18, .grid tbody tr.grouphead span.daytypechip.tint-day-18 { background: #ecf5e1; color: #50623b; font-weight: 600; }
.grid tbody td.tint-day-19, .grid tbody tr:nth-child(even) td.tint-day-19, .grid tbody td.tint-dayown-19, .grid tbody tr:nth-child(even) td.tint-dayown-19, .grid tbody tr.grouphead span.daytypechip.tint-day-19 { background: #eedbf2; color: #774380; font-weight: 600; }
/* A shift's own day type, other than its day's on the Days sheet (Labor › Shifts' Day type): the
   type's colour, in italics, the day's own type said on hover. */
.grid tbody td[class*="tint-dayown-"] { font-style: italic; }

/*
 * The production schedule's colours (the owner, 2026-10-16): a kind its own opaque pale fill and dark ink on the Kind cell, the
 * same on odd and even rows (`KIND_TINTS` in web/schedule-colours.js, held to these rules by check:production-schedule); and
 * the day type in a day's heading a small chip in the Days sheet's colour for it (the `tint-day-N` rules above name it too).
 * For the screen alone: the schedule's paperwork carries no fills.
 */
.grid tbody td.tint-kind-production, .grid tbody tr:nth-child(even) td.tint-kind-production { background: #e8ebef; color: #2f3843; }
.grid tbody td.tint-kind-crew-call, .grid tbody tr:nth-child(even) td.tint-kind-crew-call { background: #fde9d3; color: #6e3a08; }
.grid tbody td.tint-kind-meal, .grid tbody tr:nth-child(even) td.tint-kind-meal { background: #f3f6d6; color: #4a5208; }
.grid tbody td.tint-kind-break, .grid tbody tr:nth-child(even) td.tint-kind-break { background: #eef2e2; color: #44502a; }
.grid tbody td.tint-kind-milestone, .grid tbody tr:nth-child(even) td.tint-kind-milestone { background: #fbe1ef; color: #7a1c4f; }
.grid tbody td.tint-kind-delivery, .grid tbody tr:nth-child(even) td.tint-kind-delivery { background: #e3eefa; color: #1d4776; }
.grid tbody td.tint-kind-dock, .grid tbody tr:nth-child(even) td.tint-kind-dock { background: #dde6f3; color: #24406a; }
.grid tbody td.tint-kind-rehearsal, .grid tbody tr:nth-child(even) td.tint-kind-rehearsal { background: #ece3fa; color: #4b2a86; }
.grid tbody td.tint-kind-session, .grid tbody tr:nth-child(even) td.tint-kind-session { background: #e3e3fa; color: #2f2e86; }
.grid tbody td.tint-kind-show, .grid tbody tr:nth-child(even) td.tint-kind-show { background: #fde2e1; color: #7f1c17; }
.grid tbody td.tint-kind-doors, .grid tbody tr:nth-child(even) td.tint-kind-doors { background: #fbe7da; color: #7a3418; }
.grid tbody td.tint-kind-security, .grid tbody tr:nth-child(even) td.tint-kind-security { background: #e4e8ee; color: #2c3a4e; }
.grid tbody td.tint-kind-cleaning, .grid tbody tr:nth-child(even) td.tint-kind-cleaning { background: #e2f4f1; color: #1c5a52; }
.grid tbody td.tint-kind-ac, .grid tbody tr:nth-child(even) td.tint-kind-ac { background: #dff1fb; color: #19506e; }
.grid tbody td.tint-kind-hazer, .grid tbody tr:nth-child(even) td.tint-kind-hazer { background: #efe9f4; color: #4c3a62; }
.grid tbody td.tint-kind-house-lights, .grid tbody tr:nth-child(even) td.tint-kind-house-lights { background: #fbf3c4; color: #5a4b04; }
.grid tbody td.tint-kind-wristbands, .grid tbody tr:nth-child(even) td.tint-kind-wristbands { background: #f5e6f7; color: #5e2a6a; }
.grid tbody td.tint-kind-travel, .grid tbody tr:nth-child(even) td.tint-kind-travel { background: #d9efd6; color: #1f5a26; }
.grid tbody td.tint-kind-transport, .grid tbody tr:nth-child(even) td.tint-kind-transport { background: #e2f2dc; color: #2d5520; }
.grid tbody td.tint-kind-venue-set, .grid tbody tr:nth-child(even) td.tint-kind-venue-set { background: #f6ecd9; color: #5f4214; }
.grid tbody td.tint-kind-venue-strike, .grid tbody tr:nth-child(even) td.tint-kind-venue-strike { background: #efe0cc; color: #5a3a10; }
.grid tbody td.tint-kind-access, .grid tbody tr:nth-child(even) td.tint-kind-access { background: #d5f1ee; color: #155a54; }
.grid tbody td.tint-kind-fire-watch, .grid tbody tr:nth-child(even) td.tint-kind-fire-watch { background: #fcdcd6; color: #85200f; }
.grid tbody td.tint-kind-haze-watch, .grid tbody tr:nth-child(even) td.tint-kind-haze-watch { background: #e9e4f0; color: #43345c; }
.grid tbody td.tint-kind-airwall, .grid tbody tr:nth-child(even) td.tint-kind-airwall { background: #e6edf0; color: #2f4650; }
.grid tbody td.tint-kind-fire-marshal, .grid tbody tr:nth-child(even) td.tint-kind-fire-marshal { background: #f9d9d2; color: #7a1f12; }
.grid tbody td.tint-kind-rental, .grid tbody tr:nth-child(even) td.tint-kind-rental { background: #fbeccc; color: #6a4a06; }
.grid tbody td.tint-kind-green-room, .grid tbody tr:nth-child(even) td.tint-kind-green-room { background: #e0f2dd; color: #285c22; }
.grid tbody td.tint-kind-venue-equipment, .grid tbody tr:nth-child(even) td.tint-kind-venue-equipment { background: #f1e8dc; color: #57401d; }
.grid tbody td.tint-kind-other, .grid tbody tr:nth-child(even) td.tint-kind-other { background: #efefef; color: #2c2c2c; }
.grid tbody tr.grouphead span.daytypechip {
  display: inline-block; padding: 0 7px; border-radius: 9px; line-height: 16px; vertical-align: middle;
  font: 600 10.5px/16px var(--chrome); letter-spacing: .02em; background: var(--panel-hi, #2a2d33); color: var(--amber-hi, #ffb15a);
}

.cadsync { padding: 18px 22px; max-width: 900px; }
.cadsync .cadbatches { width: auto; margin-top: 6px; }
.cadsync .cadbatches td.num { text-align: right; }
.cadbatch { display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: -1px; border-radius: 2px; }
/*
 * New data from Vectorworks (`web/cad-intake.js`; the owner, 2026-10-07: "mark it as like new data or something … for each user. And then as soon as a user
 * clicks into it, it goes away"): an amber dot and the words on the ribbon's CAD button, on the CAD rail's Sync and Live data and — while it is folded — on the
 * Vectorworks heading; and a banner at the top of those two pages. The dot is the page's dark on the CAD button while CAD is the app in front, which is amber.
 */
.newdata { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; color: var(--amber); font: 700 9.5px/1 var(--chrome); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.newdot { display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 6px 1px rgba(255,138,31,.7); }
.appswitch button .newdata { margin-left: 6px; font-size: 8.5px; letter-spacing: .08em; }
.appswitch button[aria-current="true"] .newdata { color: var(--ground); }
.appswitch button[aria-current="true"] .newdot { background: var(--ground); box-shadow: none; }
.rail button .newdata { margin-left: auto; }
.rail button[aria-current="true"] .newdata { color: var(--amber); }
.rail h3 .newdata { margin-left: 8px; letter-spacing: .1em; }
.rail [data-key="vectorworks"]:not(.folded) > h3 .newdata { display: none; }
.cadnewbanner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; padding: 9px 14px; background: var(--panel); border: 1px solid var(--amber-lo); border-left: 3px solid var(--amber); }
.cadnewbanner .newdata { margin-left: 0; }
.cadnewbanner .cadnewwords { flex: 1 1 280px; min-width: 0; color: var(--ink); font-size: 13px; }
.cadnewbanner .cmd { margin-left: auto; padding: 5px 12px; font-size: 11px; }
.cadsync .subtable { margin-top: 6px; }
.cadposts td.num { text-align: right; }
.cadposts th, .cadposts td { white-space: nowrap; }
.cadposts tr[data-kind="dump"] td { color: var(--ink-dim); }
.cadsync .cadmissing { margin-top: 10px; }
.cadsync .cadmissing .cadmissingwords { color: var(--ink); font-size: 13px; letter-spacing: normal; text-transform: none; }
@media (max-width: 900px) { .cadnewbanner .cmd { margin-left: 0; } .appswitch button .newdata { margin-left: 4px; } }
/* The revision log: a batch is one colour down its first column; a variance reads up or down. */
.grid tbody td.tint-up, .grid tbody tr:nth-child(even) td.tint-up { background: #d9ead3; color: #101317; }
.grid tbody td.tint-down, .grid tbody tr:nth-child(even) td.tint-down { background: #f4cccc; color: #101317; }
.grid tbody td.tint-batch0, .grid tbody tr:nth-child(even) td.tint-batch0 { background: #72B4EB; color: #101317; }
.grid tbody td.tint-batch1, .grid tbody tr:nth-child(even) td.tint-batch1 { background: #F28E82; color: #101317; }
.grid tbody td.tint-batch2, .grid tbody tr:nth-child(even) td.tint-batch2 { background: #8CD19D; color: #101317; }
.grid tbody td.tint-batch3, .grid tbody tr:nth-child(even) td.tint-batch3 { background: #F1C232; color: #101317; }
.grid tbody td.tint-batch4, .grid tbody tr:nth-child(even) td.tint-batch4 { background: #B68DFF; color: #101317; }
.grid tbody td.tint-batch5, .grid tbody tr:nth-child(even) td.tint-batch5 { background: #66D2CE; color: #101317; }
.grid tbody td.tint-batch6, .grid tbody tr:nth-child(even) td.tint-batch6 { background: #F48FB1; color: #101317; }
.grid tbody td.tint-batch7, .grid tbody tr:nth-child(even) td.tint-batch7 { background: #FFB74D; color: #101317; }
.grid tbody td.tint-batch8, .grid tbody tr:nth-child(even) td.tint-batch8 { background: #A0E7E5; color: #101317; }
.grid tbody td.tint-batch9, .grid tbody tr:nth-child(even) td.tint-batch9 { background: #7986CB; color: #101317; }
.grid tbody td.tint-batch10, .grid tbody tr:nth-child(even) td.tint-batch10 { background: #E57373; color: #101317; }
.grid tbody td.tint-batch11, .grid tbody tr:nth-child(even) td.tint-batch11 { background: #AED581; color: #101317; }
.grid tbody td.tint-batch12, .grid tbody tr:nth-child(even) td.tint-batch12 { background: #BA68C8; color: #101317; }
.grid tbody td.tint-batch13, .grid tbody tr:nth-child(even) td.tint-batch13 { background: #4DD0E1; color: #101317; }
.grid tbody td.tint-batch14, .grid tbody tr:nth-child(even) td.tint-batch14 { background: #E0C097; color: #101317; }
.grid tbody td.tint-batch15, .grid tbody tr:nth-child(even) td.tint-batch15 { background: #EF9A9A; color: #101317; }
.grid tbody td.tint-batch16, .grid tbody tr:nth-child(even) td.tint-batch16 { background: #D4E157; color: #101317; }
.grid tbody td.tint-batch17, .grid tbody tr:nth-child(even) td.tint-batch17 { background: #CE93D8; color: #101317; }
.grid tbody td.tint-batch18, .grid tbody tr:nth-child(even) td.tint-batch18 { background: #9FA8DA; color: #101317; }
.grid tbody td.tint-batch19, .grid tbody tr:nth-child(even) td.tint-batch19 { background: #FFE082; color: #101317; }

.apphome h3 { margin: 0 0 8px; }
.modeswitch button {
  padding: 3px 10px; border: 0; background: var(--panel); color: var(--ink-dim);
  font: 600 9.5px/1 var(--chrome); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.modeswitch button:hover { color: var(--ink); background: var(--panel-hi); }
.modeswitch button[aria-current="true"] { color: var(--ground); background: var(--metal); }
.railgroup.lead button[data-id="review"] em, .railgroup.lead button[data-id="prep"] em { color: var(--amber-hi); font-weight: 700; }
.toolbar .reviewpill {
  border: 0; padding: 0 12px; background: var(--panel); color: var(--ink-faint); cursor: pointer;
  font: 700 10.5px/26px var(--data); letter-spacing: .04em;
}
.toolbar .reviewpill.open { color: #fff; background: #b3273a; }
.toolbar .reviewpill.open:hover { background: #d0384a; }
.prep h3, .floor h3 { margin: 14px 0 2px; font: 700 10.5px/1 var(--chrome); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.prep .prepdoors { justify-content: flex-start; margin: 8px 0 4px; flex-wrap: wrap; }
.floor { display: grid; grid-template-columns: repeat(auto-fit, minmax(560px, 1fr)); gap: 10px 16px; align-items: start; }
.floorpanel h3 { margin-top: 4px; }
.floortable { overflow: auto; max-height: calc(100vh - 220px); border: 1px solid var(--seam); }
/* A small table on its own — not a sheet, not a review list — never grows past its column
   and is never clipped: it gets its own horizontal scrollbar instead (the owner, 2026-09-18:
   "I need to be able to scroll left and right… things being cut off in mobile"). */
.subtable { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.floortable table { width: 100%; border: 0; }
.floortable td.num { text-align: right; }
.rigging .riggingcmds { justify-content: flex-start; margin: 6px 0; }

/* ---- accounts: the foot of the window, the sign-in, the panels --------------------- */
.footer {
  position: fixed; left: 0; bottom: 0; z-index: 5; display: flex; gap: 14px; align-items: baseline;
  flex-wrap: wrap; max-width: calc(100vw - 148px); box-sizing: border-box;
  padding: 2px 10px; background: rgba(11, 12, 14, .85); border-top: 1px solid var(--seam); border-right: 1px solid var(--seam);
  font: 10px/1.6 var(--data); color: var(--ink-faint); letter-spacing: .02em;
}
.footer .whoami { color: #3d434c; }
.footer[hidden] { display: none; }
/* The selection's figures (`selectionChip` in web/grid.js): Excel's status bar and Google Sheets' chip, in the window's foot band
   at the right, under Lumen and Chat (which float 18px up) and clear of the footer's who-and-when on the left. */
.selstats {
  position: fixed; right: 0; bottom: 0; z-index: 6; display: inline-flex; align-items: center; gap: 6px;
  height: 18px; max-width: min(340px, 45vw); padding: 0 10px 0 12px; box-sizing: border-box;
  background: var(--panel); border: 0; border-top: 1px solid var(--seam-bright); border-left: 1px solid var(--seam-bright);
  font: 10.5px/1 var(--data); color: var(--ink-dim); cursor: pointer; white-space: nowrap;
}
.selstats[hidden] { display: none; }
.selstats:hover, .selstats:focus-visible { background: var(--panel-hi); color: var(--ink); outline: none; }
.selstats .selstatslabel { font: 600 10px/1 var(--chrome); letter-spacing: .08em; text-transform: uppercase; }
.selstats .selstatsvalue { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--amber-hi); font-size: 11.5px; font-weight: 700; }
.selstats .selstatscaret { color: var(--ink-faint); font-size: 9px; }
/* A sheet in a pop-up: the chip over the pop-up's shade. */
.selstats.inpopup { z-index: 97; }
/* The chip's list opens above it, over Lumen and Chat. */
.cellmenu.selstatsmenu { z-index: 96; }
.cellmenu.selstatsmenu button { gap: 22px; font-size: 11px; }
.cellmenu.selstatsmenu button em { font-size: 11px; font-weight: 700; color: var(--sheet-ink); }
.toolbar .rolepill { padding: 0 10px; background: var(--panel); color: var(--amber); font: 700 10px/26px var(--chrome); letter-spacing: .12em; text-transform: uppercase; }
.signin { display: grid; place-items: center; min-height: 60vh; }
.signinbox { width: 380px; padding: 22px 24px 18px; background: var(--panel); border: 1px solid var(--seam-bright); box-shadow: 0 16px 36px rgba(0,0,0,.6); }
.signinbox > b { font: 700 18px/1 var(--chrome); letter-spacing: .18em; text-transform: uppercase; background: var(--metal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.signinbox h2 { margin: 6px 0 4px; font: 600 15px/1.2 var(--chrome); color: var(--ink); }
.signinbox #google-signin { margin: 12px 0; min-height: 40px; }
.signinbox .drow { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
/* The three boxes an account is made with, and the links under the sign-in (the privacy work, round 2). */
.signinbox .agreeboxes { margin-top: 10px; display: grid; gap: 6px; }
.signinbox .agreebox { display: flex; gap: 8px; align-items: flex-start; font: 13px/1.35 var(--chrome); color: var(--ink); }
.signinbox .agreebox input { margin-top: 2px; flex: none; }
.signinbox .agreebox a, .legallinks a { color: var(--amber, #f0a02a); }
.legallinks { margin-top: 14px; font: 12px/1.4 var(--chrome); color: var(--ink-dim, #9aa0a6); text-align: center; }
.signinbox .drow input { flex: 1; min-width: 0; }
/* The sign-in's answer: a plain row of its own, never over the fields, read at a glance. */
/* "Feature request or submit bug": bottom-right of every page, under the status boxes. */
/* To the left of the Assistant, which has the corner (the owner, 2026-09-18); --assist-w is
   the Assistant's width plus a gap, set on the body by `syncCornerButtons`, nothing when it is hidden. */
.ticketbutton {
  position: fixed; right: calc(22px + var(--assist-w, 0px) + var(--chat-w, 0px)); bottom: 18px; z-index: 90; padding: 10px 14px; border-radius: 999px;
  font: 700 10.5px/1 var(--chrome); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); background: rgba(19,21,25,.74); border: 1px solid var(--seam-bright); cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
.ticketbutton:hover { color: var(--amber-hi); border-color: var(--amber-lo); background: var(--panel); }
.askbox.askticket { max-width: 640px; width: min(640px, calc(100vw - 32px)); }
.askbox.askticket .askgrid { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
.askbox.askticket .askgrid label.wide { flex: 1 0 100%; }
.askbox.askticket .askgrid label { display: flex; flex-direction: column; gap: 4px; }
.askbox.askticket .tickettext { width: 100%; min-height: 96px; font: 12.5px/1.45 var(--data); padding: 8px 10px; background: #0e1114; color: var(--ink); border: 1px solid var(--seam-bright); }
.askbox.askticket .asktext { width: 100%; }
.askbox.askticket h4 { margin: 8px 0 0; width: 100%; font: 700 10.5px/1 var(--chrome); letter-spacing: .12em; text-transform: uppercase; color: var(--amber-hi); }
.mytickets { width: 100%; max-height: 240px; overflow: auto; }
.myticket { padding: 6px 0; border-bottom: 1px solid var(--seam); font-size: 12px; }
.myticket summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; }
.myticket summary b { color: var(--amber); }
.myticket summary em { margin-left: auto; font-style: normal; color: var(--ink-faint); font-size: 11px; white-space: nowrap; }
.myticket.closed summary span { color: var(--ink-faint); }
.ticketbody { white-space: pre-wrap; margin: 6px 0; color: var(--ink-dim); }
.ticketentry { margin: 6px 0 0 10px; padding-left: 8px; border-left: 2px solid var(--seam-bright); white-space: pre-wrap; }
.ticketentry b { display: block; font-size: 10.5px; color: var(--ink-faint); }
.ticketentry.reply { border-color: var(--amber-lo); }
.ticketentry.note { border-color: #4a6a8a; }
.tickets .tickettabs { display: flex; gap: 6px; margin: 0 0 10px; }
.tickets .tickettabs button[aria-pressed="true"] { color: var(--amber-hi); border-color: var(--amber-lo); }
.ticketdetail { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--seam-bright); background: var(--panel); }
.ticketdetail h4 { margin: 0 0 4px; font-size: 14px; }
.ticketdetail h4 b { color: var(--amber); margin-right: 6px; }
.ticketdetail textarea.askfield { width: 100%; min-height: 80px; margin: 10px 0 8px; font: 12.5px/1.45 var(--data); padding: 8px 10px; background: #0e1114; color: var(--ink); border: 1px solid var(--seam-bright); }
.ticketthread { margin: 8px 0; font-size: 12.5px; }
/* The global settings page: the shell with nothing of a show in it. */
body.globalsettings .shows, body.globalsettings .toolbar, body.globalsettings .rail, body.globalsettings #menubar { display: none; }
body.globalsettings .frame { grid-template-columns: 1fr; }
body.globalsettings #main { padding: 18px 22px; }
.globalhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin: 0 0 12px; }
.globalhead h2 { margin: 0 0 4px; font: 700 15px/1.2 var(--chrome); letter-spacing: .12em; text-transform: uppercase; color: var(--amber-hi); }
.globalhead a.cmd { text-decoration: none; color: var(--amber); }
.globalhead a.cmd:hover { color: var(--amber-hi); }
.globaldenied { font-size: 14px; color: #ffd0d5; background: rgba(255, 107, 122, .14); border: 2px solid #ff6b7a; border-radius: 4px; padding: 12px 14px; }
.adminlistwrap { display: flex; flex-direction: column; gap: 10px; }
.adminglobal { display: block; margin: 4px 8px; padding: 8px 10px; font: 700 11px/1 var(--chrome); letter-spacing: .1em; text-transform: uppercase; color: var(--amber); text-decoration: none; border: 1px solid var(--seam-bright); }
.adminglobal:hover { color: var(--amber-hi); background: var(--panel-hi); }
.userspanel .requestshead { color: var(--amber-hi); }
.accountspanel table.accounts td.answer { display: flex; flex-wrap: wrap; gap: 4px; max-width: 320px; }
.accountspanel tr.suspended td { opacity: .55; }
.accountspanel .drow .scalar { min-width: 260px; }
.userspanel table.requests td { vertical-align: middle; }
.userspanel table.requests td.answer { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; max-width: 260px; }
.userspanel table.requests td.answer select { max-width: 130px; }
/* A refusal reads at once: bold, boxed, red (the owner, 2026-09-16). */
.signinbox .otherways { margin: 18px 0 6px; font: 700 9.5px/1 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.signinbox a.cmd.provider { text-decoration: none; }
.providerblock { margin: 8px 0 14px; padding: 8px 10px; border: 1px solid var(--seam); }
.signinbox .forgot { align-self: center; font-size: 12px; color: var(--amber); }
.signinbox .createbox { margin-top: 8px; padding: 10px; border: 1px solid var(--seam); }
.signinbox .signsaid { display: block; clear: both; margin: 2em 0 0; padding: 12px 14px; font-size: 14px; font-weight: 700; line-height: 1.45; color: #ffd0d5; background: rgba(255, 107, 122, .14); border: 2px solid #ff6b7a; border-radius: 4px; }
.signinbox .signsaid:empty { display: none; }
.acctpanel h4, .userspanel h4 { margin: 4px 0 6px; font: 700 10.5px/1 var(--chrome); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.acctfield { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.acctfield > span { width: 90px; color: var(--ink-faint); font-size: 10.5px; }
.acctfield input { width: 320px; }
.acctfield em { font-style: normal; }
.acctpanel .drow, .userspanel .drow { display: flex; gap: 6px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.userspanel td select { font: inherit; }

/* ---- organizations: companies as tenants --------------------------------- */
.orgcards { display: flex; flex-direction: column; gap: 10px; }
.orgcard { border: 1px solid var(--seam); border-radius: 6px; padding: 10px 12px; }
.orgdetail { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--seam); }
.orgnote { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--seam); border-radius: 6px; background: var(--panel-2, transparent); }
.orgnote:empty { display: none; border: none; padding: 0; margin: 0; }

/* ---- a sheet row's own Render, beside its Print ------------------------- */
/*
 * Advance is for building the show, and nothing on a page is there to print yet: the print
 * buttons stay off every page while Electrics is in Advance (the owner, 2026-09-25). Render and
 * Setup on a document's row stay — rendering by hand is exactly what Advance does — and so
 * does the preview, which is for looking; `body.mode-advance` is set by `render` in
 * `web/app.js`, on the Electrics app alone, since the modes are its own.
 */
body.mode-advance .printcmd, body.mode-advance .sheet .rowprint:not(.rowrender):not(.rowsetup) { display: none !important; }
/* The Barges page's print buttons are `.bargeprint`, never `.printcmd`: a barge is built in Advance and its sheet printed then (the owner, 2026-11-01: "print a barge sheet directly from the barge page"). */
.sheet .rowrender { margin-left: 10px; border-color: var(--seam); color: var(--ink-faint); }
.sheet .rowrender:hover { background: var(--seam); color: var(--ink); }
.sheet .rowrender:disabled { opacity: .45; cursor: default; }
.sheet .rowrender:disabled:hover { background: transparent; color: var(--ink-faint); }
/* A report's scopes — the Case List's Full, Created only, Generated only, Truss — a drop-down beside Render and Print (the owner, 2026-10-07). */
.sheet .rowscope {
  margin-left: 10px; padding: 2px 6px; max-width: 132px;
  background: var(--panel); border: 1px solid var(--seam); color: var(--ink);
  font-family: var(--data); font-size: 10.5px;
}
.sheet .rowscope option { background: var(--panel); color: var(--ink); }
/* A fixture sheet's Print in: the order the whole sheet prints in, beside Render (the owner, 2026-10-29). */
.sheet .roworder {
  margin-left: 10px; padding: 2px 6px; max-width: 132px;
  background: var(--panel); border: 1px solid var(--seam); color: var(--ink);
  font-family: var(--data); font-size: 10.5px;
}
.sheet .roworder option { background: var(--panel); color: var(--ink); }
.previeworderlabel { font-size: 11px; color: var(--ink-faint); white-space: nowrap; }

/* ---- the Add a case pop-up: the row of the sheet, as a form -------------- */
.askbox.askcase { max-width: 760px; }
/* Lights the drawing no longer has, after a Refresh: a sheet of them, each ticked to delete. */
.askbox.askdropped .askdroppedlist { flex: 1 0 100%; max-height: 50vh; overflow: auto; margin: 0; }
.askbox.askdropped .askdroppedlist td.dim { color: var(--ink-faint); font-size: 10.5px; }
.askbox.askdropped .askdroppedlist input[type="checkbox"] { margin: 0; vertical-align: middle; }
.askbox.askdropped .cmd:disabled { opacity: .45; cursor: default; }
/* Positions the drawing no longer has, after a post from Vectorworks (`web/positions-gone.js`, 2026-10-28): the bar on the Positions
   pages and CAD's Sync and Live data, and the pop-up's sheet a position. */
.importbar.positionsgone { margin: 0 0 10px; padding: 6px 10px; border: 1px solid var(--amber); border-radius: 6px; background: var(--panel); }
.importbar.positionsgone .railwarn { color: var(--amber); font-size: 14px; letter-spacing: normal; }
.importbar.positionsgone .positionsgonewords { color: var(--ink); font-size: 13px; letter-spacing: normal; text-transform: none; }
.askbox.askgone { max-width: min(1280px, 96vw); }
.askbox.askgone .askgonelist { flex: 1 0 100%; margin: 0; }
.askbox.askgone .askgonelist .gridwrap { max-height: 46vh; }
.askbox.askgone .cmd:disabled { opacity: .45; cursor: default; }
/* Match P.n / LIDn / CIDn across the runs to a position: the mini sheet in the pop-up (the owner, 2026-09-26). */
.askbox.askmatch { width: min(760px, calc(100vw - 40px)); max-width: min(760px, calc(100vw - 40px)); align-content: flex-start; }
.askbox.askmatch .askmatchlist { flex: 1 0 100%; max-height: 50vh; overflow: auto; margin: 0; }
.askbox.askmatch .askmatchlist input[type="checkbox"] { margin: 0; vertical-align: middle; }
.askbox.askmatch .askmatchlist input.matchvalue { width: 76px; padding: 2px 5px; border: 1px solid var(--seam); background: #0e1114; color: var(--ink); font: 11.5px var(--data); text-align: right; }
.askbox.askmatch .askmatchlist input.matchvalue:focus { outline: none; border-color: var(--amber); }
.askbox.askmatch .askmatchlist tr.off td { color: var(--ink-faint); }
.askbox.askmatch .askmatchlist td.dim { color: var(--ink-faint); font-size: 10.5px; white-space: nowrap; }
.askbox.askmatch .askmatchlist td.pair { text-align: center; }
.askbox.askmatch .askmatchlist .pairbox { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: 11.5px var(--data); color: var(--ink); white-space: nowrap; }
.askbox.askmatch .askmatchlist .pairbox input { margin: 0; }
.askbox.askparts { width: min(900px, calc(100vw - 40px)); max-width: min(900px, calc(100vw - 40px)); align-content: flex-start; }
.askbox.askparts .askpartslist { flex: 1 0 100%; max-height: 55vh; overflow: auto; margin: 0; }
.askbox.askparts .askpartslist th, .askbox.askparts .askpartslist td { white-space: nowrap; }
.askbox.askparts .askpartslist input[type="checkbox"] { margin: 0; vertical-align: middle; }
.askbox.askparts .partcol, .askbox.askparts .partpick { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.askbox.askparts .partpick span { font: 700 14px var(--data); color: #111; }
.askbox.askparts .partpick small { font: 600 12px var(--data); color: #333; }
.askbox.askparts .partpick:has(input:not(:checked)) span { color: #555; text-decoration: line-through; }
.askbox.askparts td.dim { color: #555; }
.askbox.askparts button.runpick { border: 0; background: none; padding: 0; color: #111; font: 700 13px var(--data); cursor: pointer; }
.askbox.askparts button.runpick:hover { color: var(--amber-hi); }
.askbox.askmatch .askmatchlist th span { font: inherit; }
.askbox.askmatch .cmd:disabled { opacity: .45; cursor: default; }
/* Import patch: what to read, then the plan as a sheet, the moves ticked. */
.askbox.askpatch h3 { flex: 1 0 100%; margin: 0; font: 700 12px/1.4 var(--chrome); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); }
.askbox.askpatch > p { flex: 1 0 100%; margin: 0; }
.askbox.askpatch .patchdrop {
  flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 18px;
  border: 1.5px dashed var(--seam-bright); border-radius: 10px; background: rgba(255,255,255,.02);
}
.askbox.askpatch .patchdrop.over { border-color: var(--amber); background: rgba(255,196,107,.06); }
.askbox.askpatch .patchdrop b { color: var(--ink); }
.askbox.askpatch .patchdrop span { color: var(--ink-faint); font-size: 12px; flex: 1 1 240px; }
.askbox.askpatch .patchpaste { flex: 1 0 100%; box-sizing: border-box; min-height: 90px; font-family: var(--data); font-size: 11.5px; }
.askbox.askpatch .patchreading { display: flex; align-items: center; gap: 10px; }
.askbox.askpatch .patchreading .wheel { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid rgba(255,196,107,.22); border-top-color: var(--amber-hi); animation: thinkspin .8s linear infinite; }
.askbox.askpatch .patchfailed { flex: 1 0 100%; margin: 0; color: #ff8f9b; }
/* Match by __UID or by channel, where the upload carries a __UID (the owner, 2026-09-26). */
.askbox.askpatch .patchmatch { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12px; }
.askbox.askpatch .patchmatch > span { font: 700 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.askbox.askpatch .patchmatch label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.askbox.askpatch .patchmatch input { accent-color: var(--amber); margin: 0; }
.askbox.askpatch .patchmatch .keyhint { flex: 1 1 260px; margin: 0; }
.askbox.askpatch .patchpick { min-width: 220px; font-size: 11px; padding: 2px 4px; }
.askbox.askpatch .patchsame { flex: 1 0 100%; color: var(--ink-dim); font-size: 12px; }
.askbox.askpatch .patchimportlist { flex: 1 0 100%; max-height: 55vh; overflow: auto; margin: 0; }
.askbox.askpatch .patchimportlist input[type="checkbox"] { margin: 0; vertical-align: middle; }
.askbox.askpatch .patchimportlist td.patchto { font-weight: 700; }
.askbox.askpatch .patchimportlist td.patchnotes { font-size: 11px; color: var(--ink-dim); }
.askbox.askpatch .patchimportlist td.dim { color: var(--ink-faint); font-size: 10.5px; }
.askbox.askpatch .patchimportlist tr.patch-same td { color: var(--ink-faint); }
.askbox.askpatch .patchimportlist tr.patch-no-light td.patchstatus,
.askbox.askpatch .patchimportlist tr.patch-unclear td.patchstatus,
.askbox.askpatch .patchimportlist tr.patch-bad td.patchstatus { color: #c0392b; font-weight: 700; }
.askbox.askpatch .patchmissing { flex: 1 0 100%; font-size: 12px; color: var(--ink-dim); }
.askbox.askpatch .cmd:disabled { opacity: .45; cursor: default; }
/* The New show wizard: four steps in one box, the crumbs across the top. */
.askbox.askwizard { max-width: 820px; width: calc(100vw - 40px); }
.askbox.askwizard .askcrumbs { flex: 1 0 100%; display: flex; gap: 14px; margin-bottom: 2px; }
.askbox.askwizard .askcrumbs span {
  font: 700 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.askbox.askwizard .askcrumbs span.on { color: var(--amber); border-bottom-color: var(--amber); }
.askbox.askwizard .askcrumbs span.done { color: var(--ink-dim); }
.askbox.askwizard .askhint { flex: 1 0 100%; margin: -4px 0 6px; }
.askbox.askwizard .askbody { flex: 1 0 100%; display: flex; flex-direction: column; gap: 10px; }
.askbox.askwizard .askgroup { display: flex; flex-direction: column; gap: 4px; }
/* The folders the app will make, drawn as the tree it becomes, with what each holds. */
.askbox.askwizard .asktree {
  display: flex; flex-direction: column; gap: 1px; max-height: 260px; overflow: auto;
  padding: 8px 10px; border: 1px solid var(--seam); background: var(--panel-lo, rgba(0,0,0,.18));
  font-family: var(--data); font-size: 11.5px;
}
.askbox.askwizard .asktree .treeline { display: flex; gap: 10px; align-items: baseline; padding-left: calc(var(--depth, 0) * 16px); white-space: nowrap; }
.askbox.askwizard .asktree .treeline.root b { color: var(--amber-hi); }
.askbox.askwizard .asktree .treeline span::before { content: '\2514 '; color: var(--ink-faint); }
.askbox.askwizard .asktree .treeline em { color: var(--ink-faint); font-style: normal; overflow: hidden; text-overflow: ellipsis; }
.askbox.askwizard .askfiles .scopetoggle { align-self: flex-start; }
.askbox.askwizard .askgroup > span { font: 700 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.askbox.askwizard .askfield.wide { width: 220px; }
.askbox.askwizard .askpath { width: 520px; max-width: calc(100vw - 180px); }
.askbox.askwizard .askband .cmd { padding: 5px 10px; }
.askbox.askwizard .asktrouble { flex: 1 0 100%; font: 11px var(--data); color: var(--amber-hi); min-height: 14px; }
.askbox.askposition { max-width: 640px; }
/* Add a machine (Management › Heavy Equipment): the wizard's own department checklist and
   the two suggested-date fields, each with a "Suggested" pill until it is touched. */
.askbox.askmachine { max-width: 640px; }
.askbox .deptrow { align-items: center; }
.askbox .deptrow .asktick { flex-direction: row; align-items: center; gap: 6px; }
.askbox .askdatepill { display: inline-flex; align-items: center; gap: 6px; }
.suggested {
  padding: 1px 7px; border: 1px solid var(--amber-lo); border-radius: 999px; color: var(--amber);
  font: 700 9px/1.6 var(--chrome); letter-spacing: .1em; text-transform: uppercase;
}
.askbox .askgrid .askgroup { display: flex; flex-direction: column; gap: 4px; }
.askbox .askgrid .askgroup > span { font: 700 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.askbox .askshares { display: flex; flex-wrap: wrap; gap: 2px 12px; max-width: 560px; }
.askbox .askshares .asktick span { font: 11.5px var(--data); letter-spacing: 0; text-transform: none; color: var(--ink); }
/* Shares fixture cases with, as a drop-down that finds as it is typed — the picks as chips — never a box a position (owner,
   2026-10-28: "make this a drop down, not an excessive amount of checkboxes"). A caret says it opens; its list scrolls in itself. */
.sharespick { width: min(480px, 100%); }
.askbox .askgrid .askgroup:has(.sharespick) { flex: 1 1 100%; }
.sharespick .pickrow { max-width: none; }
.sharespick .pickrow::after { content: '\25BE'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; }
.sharespick .pickrow .pickinput { max-width: none; padding-right: 26px; }
.sharespick .people.pick { background: none; border: 0; margin: 0; }
.sharespick .pickchips { margin: 2px 0 6px; }
.sharespick .pickchips .keyhint { margin: 0; color: var(--ink-faint); font-size: 12px; line-height: 24px; }
.sharespick .picklist { max-height: 240px; }
.sharespick .pickchips .pickchip b { font-family: var(--data); }
/* The list hangs past the pop-up's foot the way a drop-down does, rather than inside the pop-up's own scroll (a phone's pop-up
   scrolls in itself, so there the list opens in place under the box: `web/phone.css`). */
html:not(.phone) .askbox:has(.sharespick .picklist:not([hidden])) { overflow: visible; }
.askbox .askgrid { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.askbox .askgrid label { display: flex; flex-direction: column; gap: 4px; }
.askbox .askgrid label > span {
  font: 700 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.askbox .askfield {
  padding: 5px 8px; background: #0e1114; border: 1px solid var(--seam);
  color: var(--ink); font-family: var(--data); font-size: 11.5px; width: 130px;
}
/* The snake pop-up's strip of ports: a mini sheet, one cell per port, active green, spare pink. */
.askbox.asksnake { max-width: 640px; }
.askbox .askports { display: flex; flex-wrap: wrap; gap: 3px; }
.askbox .askportcell { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.askbox .askportcell > span { font: 700 9px/1.4 var(--chrome); color: var(--ink-faint); }
.askbox .askport {
  width: 38px; padding: 4px 3px; text-align: center; background: #0e1114; border: 1px solid var(--seam);
  color: var(--ink); font-family: var(--data); font-size: 11.5px;
}
.askbox .askport::placeholder { color: var(--ink-faint); font-style: italic; }
.askbox .askfill { padding: 4px 10px; }
.askbox .askconfirm {
  flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 8px 10px; border: 1px solid var(--amber); font: 11.5px var(--data); color: var(--ink);
}
.askbox .askport[data-hue="active"] { background: #1c3a26; border-color: #2f7a46; }
.askbox .askport[data-hue="spare"] { background: #3a1c3a; border-color: #7a2f7a; }
.askbox .askfield.narrow { width: 58px; }
.askbox .askfield.short { width: 96px; }
.askbox .askfield.wide { width: 220px; }
.askbox .askgrid .asktick { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 6px; }
.askbox .askgrid .asktick > span { text-transform: none; letter-spacing: 0; font: 11.5px var(--data); color: var(--ink); }
.askbox .askcode { align-self: center; font-style: normal; font-family: var(--data); font-size: 10.5px; color: var(--amber); padding-bottom: 6px; }

/* ---- the preview is modal: the shade takes the click that closes it ------ */
.previewshade { position: fixed; inset: 0; z-index: 95; background: rgba(0, 0, 0, .35); }
/* Refresh dims the window under "Refreshing" and Lumen's own ring until the drawing is read (the owner, 2026-09-26). */
.veil { position: fixed; inset: 0; z-index: 98; display: flex; align-items: center; justify-content: center; background: rgba(6, 8, 11, .62); backdrop-filter: blur(1.5px); cursor: progress; }
.veil .veilbox { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 360px; padding: 26px 34px; border-radius: 16px; border: 1px solid rgba(255,196,107,.3); background: var(--panel); box-shadow: 0 18px 60px rgba(0,0,0,.5); outline: none; }
/* The same band of light that chases round Lumen's button, on a ring, turned whole so every browser spins it. */
.veil .veilring { width: 56px; height: 56px; border-radius: 50%; padding: 4px; box-sizing: border-box; background: conic-gradient(transparent 0 58%, rgba(255,196,107,.18) 66%, var(--amber) 90%, rgba(255,255,255,.6) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: thinkspin 1.4s linear infinite; }
.veil .veilsays { margin: 0; font: 700 11px/1.4 var(--chrome); letter-spacing: .18em; text-transform: uppercase; color: var(--amber); }
.veil .veilnote { margin: 0; font: 11px/1.5 var(--data); color: var(--ink-faint); text-align: center; }
.veil .veilnote[hidden] { display: none; }
.veil .veilnote a { color: var(--amber); cursor: pointer; text-decoration: underline; }
/* A short save holds the window without dimming it: the veil shows itself only if it outlasts a blink. */
.veil.veilquiet { background: transparent; backdrop-filter: none; }
.veil.veilquiet .veilbox { visibility: hidden; }
.modes .modeactions { display: inline-flex; gap: 4px; margin-left: 6px; }

/* ---- barges: the carts the racks ride on ------------------------------------ */
.bargeview { padding: 12px 14px 16px; }
.bargepicker .bargeactions { margin-left: auto; display: flex; gap: 1px; align-self: stretch; }
.bargepicker .bargeactions .cmd { height: 100%; }
.barge { border: 1px solid var(--seam); background: var(--panel); padding: 10px 14px 14px; }
.bargehead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 8px; }
.bargehead h3 { margin: 0; font: 700 15px/1.2 var(--chrome); letter-spacing: .16em; color: var(--amber); }
.bargehead .bargetype { font: 600 11px/1.4 var(--data); color: var(--ink); }
.bargehead .dim { font: 11px/1.4 var(--data); color: var(--ink-faint); }
.bargecode { display: inline-flex; align-items: center; gap: 0; margin-left: auto; font: 10.5px var(--data); color: var(--ink-faint); }
.bargecode i {
  display: inline-flex; align-items: center; justify-content: center; width: 92px; height: 22px;
  border: 1px solid #0006; margin-left: -1px; font: 600 10.5px var(--data); font-style: normal;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; background: #0e1114;
}
.bargecode em { margin-left: 8px; }
/* The Order column on the inventory sheets: typed here, amber until the sync writes it out. */
/* Draggable edges on the plain tables, the same grip the grid draws. */
.grid.resizing th { user-select: none; }
.rackpicker .apply { margin-right: 6px; }
.rackpicker { align-items: center; }
.rackchoosewrap { position: relative; }
.rackpicker .rackchoose { min-width: 260px; text-align: left; }
.rackpicker .rackheightwrap { display: flex; align-items: center; gap: 6px; margin-left: 8px; font: 11px/1 var(--chrome); color: var(--ink-faint); letter-spacing: .08em; text-transform: uppercase; }
.rackpicker .rackheight { min-height: 28px; }
/* The rack on paper, after the height: PDF, Print and Every rack, wrapping onto a line of their own on a narrow window. */
.rackpicker { flex-wrap: wrap; }
.rackpicker .rackpaper { margin-left: 8px; }
.rackpicker .rackpaper ~ .rackpaper { margin-left: 0; }
.shelfitem b.shortnamed, .builder .seat b.shortnamed { font-style: italic; }
.racklist { position: absolute; top: 100%; left: 0; z-index: 40; min-width: 100%; max-height: 60vh; overflow-y: auto; background: var(--panel); border: 1px solid var(--amber); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.racklist .rackrow { padding: 6px 10px; font: 12px/1.4 var(--data); color: var(--ink); cursor: grab; white-space: nowrap; border-top: 2px solid transparent; }
.racklist .rackrow:hover { background: var(--plate); }
.racklist .rackrow[aria-current="true"] { color: var(--amber); }
.racklist .rackrow.dropat { border-top-color: var(--amber); }
/*
  Rack builds' Not racked (the owner, 2026-10-30): the chooser's last entry, apart from the racks; the list in place of the
  faces, beside the library; the library's own heading of them, name first.
*/
.racklist .rackrow.notracked { cursor: pointer; font-style: italic; color: var(--ink-dim); border-top: 1px solid var(--seam); }
.racklist .rackrow.notracked[aria-current="true"] { color: var(--amber); }
.buildgrid.loose { grid-template-columns: 236px minmax(420px, 1fr); }
.loosedata .loosecommands { padding: 8px 12px; margin: 0; }
.loosedata .empty { padding: 10px 12px; margin: 0; }
.loosedata.takesloose { outline: 2px dashed var(--amber); outline-offset: -4px; }
.loosedata select.looseseat { min-height: 24px; font-size: 11px; }
.shelfitem.looseitem b { flex: none; }
.shelfitem.looseitem span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bargestrip { margin: 4px 0 10px; border: 1px solid var(--seam); background: var(--plate); }
.bargestrip h4, .bargepower h4 {
  margin: 0; padding: 4px 10px; font: 700 9.5px/1.6 var(--chrome); letter-spacing: .16em; text-transform: uppercase; color: var(--amber);
  border-bottom: 1px solid var(--seam);
}
.bargechips { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px; }
.bargechip {
  display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 8px; border: 1px solid var(--seam); background: var(--panel);
  font: 11px/1.3 var(--data); color: var(--ink); cursor: grab;
}
.bargechip b { font-weight: 600; }
.bargechip span { color: var(--ink-faint); font-size: 9.5px; }
.bargechip.kind-build { border-color: #2b5f8a; }
.bargechip.kind-case, .bargechip.kind-empty { border-style: dashed; }
.bargechip.elsewhere { opacity: .45; }
.bargepicks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; }
.bargepickwrap { position: relative; }
.bargepick { display: inline-flex; gap: 8px; align-items: baseline; padding: 4px 10px; border: 1px solid var(--seam); background: var(--panel, #1b1f24); color: inherit; cursor: pointer; font: inherit; }
.bargepick b { font-weight: 600; }
.bargepick span { color: var(--ink-faint); font-size: 10px; }
.bargepick.kind-build { border-color: #2b5f8a; }
.bargepick.kind-case { border-style: dashed; }
.bargepickpanel { position: absolute; top: 100%; left: 0; z-index: 40; width: 300px; margin-top: 2px; padding: 6px; border: 1px solid var(--seam); background: var(--plate); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.bargepickpanel.dragging { opacity: .15; pointer-events: none; }
.bargepickpanel .askfield { width: 100%; box-sizing: border-box; margin-bottom: 4px; }
.bargepicklist { max-height: 300px; overflow-y: auto; }
.bargepickrow { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: baseline; padding: 4px 6px; border-bottom: 1px solid var(--seam); cursor: grab; }
.bargepickrow:hover { background: rgba(255,170,40,.12); }
.bargepickrow span { color: var(--ink-faint); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bargepickrow em { color: var(--ink-faint); font-size: 9.5px; font-style: italic; }
.bargepickrow.elsewhere { opacity: .5; }
.bargecart { border: 2px solid #6b7280; background: #0e1114; padding: 8px; }
.bargetier { display: grid; gap: 6px; margin-bottom: 6px; }
.bargetier.w4 { grid-template-columns: repeat(4, 1fr); }
/* To scale: the steel cart is eight feet across, so a slot is two feet — a rack's width —
   and a four-foot skid draws at half the cart's width with the same two-foot slots. */
.bargetier.w2 { grid-template-columns: repeat(2, 1fr); width: 50%; }
/* The racks ride below; the lower tier is twice the upper's height, as the cart is. */
.bargetier.upper .bargeslot { height: 110px; }
.bargetier.lower { align-items: end; height: 340px; grid-template-rows: 100%; }
.bargetier.lower .bargeslot { height: 100%; }
.bargeside .cmd.on { border-color: var(--amber); color: var(--amber); }
.distro2d.front .case { fill: #b9bec5; stroke: #6b7280; stroke-width: .6; }
.distro2d.front .panel { fill: #111316; stroke: #000; stroke-width: .4; }
.distro2d.front .strip { fill: #1c1f24; stroke: #3d434c; stroke-width: .3; }
.distro2d.front .readout { fill: #120404; stroke: #3d434c; stroke-width: .3; }
.distro2d.front .led { fill: #ff3b30; font-family: var(--chrome); }
.distro2d.front .frontlbl { fill: #111316; font-weight: 700; font-family: var(--chrome); }
.distro2d.front .num { fill: #d8dbe0; font-family: var(--chrome); }
.distro2d.front .knob { fill: #d8dbe0; }
.distro2d.front .breaker { fill: #050607; stroke: #5b6068; stroke-width: .25; }
.distro2d.front .toggle { fill: #e8eaed; }
.distro2d.front .rail { fill: #8a9099; }
.distro2d.front .lamp { fill: #d62a20; stroke: #000; stroke-width: .3; }
.distro2d.front .main { fill: #1c1f24; stroke: #b0b6bf; stroke-width: .4; }
.distro2d.front .plate { fill: #d8dbe0; }
.bargeslot { box-sizing: border-box; overflow: hidden; }
.bargeslot .rackface2d { flex: 1; min-height: 0; overflow: hidden; }
.bargeslot {
  position: relative; min-height: 96px; padding: 6px 8px; border: 1px dashed #3d434c; background: var(--panel);
  display: flex; flex-direction: column; gap: 3px; font: 11px/1.3 var(--data); color: var(--ink);
}
.bargeslot.over { border-color: var(--amber-hi); background: #2a2113; }
.bargeslot.kind-open { justify-content: center; align-items: center; color: #3d434c; font-size: 10px; }
.bargeslot.kind-rack, .bargeslot.kind-build { border-style: solid; border-color: #6b7280; cursor: grab; }
.bargeslot.kind-case, .bargeslot.kind-empty { border-style: solid; border-color: #4a4f57; cursor: grab; }
.bargeslot b { font: 700 12px/1.2 var(--chrome); letter-spacing: .08em; }
.bargeslot .bargecaption { color: var(--amber); font-size: 10px; }
.bargeslot .caseband { display: block; height: 8px; margin-top: auto; }
.rackface2d { margin-top: 4px; border: 1px solid #3d434c; background: #15181d; padding: 4px; }
.rackface2d.distro { display: flex; justify-content: center; padding: 3px; }
/* The distro's back as one drawing: the box scales the viewBox, so every outlet stays round. */
.distro2d { display: block; width: 100%; height: 100%; max-height: 100%; }
.distro2d .panelbg { fill: #0e1114; stroke: #5b6068; stroke-width: 1; }
.distro2d .lbl { fill: var(--ink-faint); font-family: var(--chrome); letter-spacing: .04em; }
.distro2d .soca .shell { fill: #2b2f36; stroke: #b0b6bf; stroke-width: .5; }
.distro2d .soca .face { fill: #1a1d22; stroke: #6b7280; stroke-width: .35; }
.distro2d .pin { fill: #c9a24a; }
.distro2d .bracket { fill: #3d434c; stroke: #8a9099; stroke-width: .3; }
.distro2d .twist .shell { fill: #d8dbe0; stroke: #8a9099; stroke-width: .5; }
.distro2d .white { fill: #eef0f3; stroke: #9aa0a8; stroke-width: .4; }
.distro2d .duplex .faceplate { fill: #f6f7f9; stroke: #b0b6bf; stroke-width: .3; }
.distro2d .slot { fill: #23272e; stroke: #23272e; }
.distro2d .c5 .blue { fill: #2f6fd8; stroke: #9cc0ff; stroke-width: .5; }
.distro2d .c5 .bluehole { fill: #1d4ea3; stroke: #0b2b66; stroke-width: .4; }
.distro2d .cam .camshell { stroke: #0008; stroke-width: .5; }
.distro2d .cam .barrel { fill: #0a0c0f; }
.distro2d .cam .bore { fill: #3d434c; }
.rackface2d.data .seat2d { font: 9.5px/1.5 var(--data); color: var(--ink); border-bottom: 1px solid #23272e; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rackface2d.data .seat2d.dim { color: var(--ink-faint); }
.bargeorient { display: flex; justify-content: space-between; padding: 4px 8px; font: 700 10px/1.4 var(--chrome); letter-spacing: .18em; color: var(--ink-faint); }
.bargepower { margin-top: 8px; border: 1px solid var(--seam); background: var(--plate); }
/* The power diagram on the cart's own columns: inset as the cart's slots are (its 2px border and
   8px padding against the panel's 1px), each rack's box under its slot, the lines and their
   words placed by the column's centre (web/barge.js power()). */
.bargewires { --gap: 6px; position: relative; display: block; margin: 0 9px; background: #0e1114; overflow: hidden; }
.bargewires .wirerack {
  position: absolute; transform: translateX(-50%); height: 34px; box-sizing: border-box; display: grid; place-items: center;
  border: 1px solid #3d434c; border-radius: 3px; background: #15181d; color: #e8eaed; font: 600 12px/1 var(--chrome); letter-spacing: .04em; white-space: nowrap;
}
/* A line is its border, never its background: a browser prints no background unless told to,
   and the barge sheet printed with none of its lines (the review before the second PR). */
.bargewires .wire { position: absolute; border: 0 solid #f7a531; }
.bargewires .wire.v { width: 0; border-left-width: 2px; margin-left: -1px; }
.bargewires .wire.h { height: 0; border-top-width: 2px; margin-top: -1px; }
.bargewires .wirehead { position: absolute; width: 0; height: 0; }
.bargewires .wirehead.up { margin-left: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid #f7a531; }
.bargewires .wirehead.right { margin-top: -6px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 9px solid #f7a531; }
.bargewires .wirehead.left { margin-top: -6px; margin-left: -9px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 9px solid #f7a531; }
.bargewires .wiretag { position: absolute; transform: translateY(-100%); padding-bottom: 3px; color: #f7a531; font: 11px/1.25 var(--data); overflow-wrap: anywhere; }
.bargewirectl { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 6px 8px; border-top: 1px solid var(--seam); }
.bargewirectl .wirerow { display: inline-flex; gap: 4px; align-items: center; }
.bargewirectl .askpick, .bargewirectl .askfield {
  padding: 3px 6px; background: #0e1114; border: 1px solid var(--seam); color: var(--ink); font-family: var(--data); font-size: 11px;
}
.bargewirelist { padding: 4px 8px 6px; }
.wireline { display: flex; align-items: center; gap: 8px; font: 11px/1.6 var(--data); color: var(--ink); }
.wireline .cmd { padding: 0 6px; line-height: 1.2; }
.bargenotes { margin-top: 8px; }
.bargenote { width: 100%; box-sizing: border-box; padding: 5px 8px; background: #0e1114; border: 1px solid var(--seam); color: var(--ink); font: 11px/1.4 var(--data); resize: vertical; }
.printonly { display: none; }
@media print {
  /* The barge sheet: one Letter page, landscape — the cart to scale across the top, the
     power diagram under it, tightened so both fit. */
  body.print-barge { --page: 10.2in; }
  @page { size: letter landscape; margin: 0.4in; }
  /* Only the barge sheet prints: everything is hidden, the sheet shown again and laid at
     the top of the page — which holds whatever the app wraps #main in. */
  body.print-barge *:not(:has(.bargeview)):not(.bargeview):not(.bargeview *) { display: none !important; }
  body.print-barge .bargepicker, body.print-barge .bargestrip, body.print-barge .noprint, body.print-barge .bargenote, body.print-barge .bargeopen { display: none !important; }
  body.print-barge, body.print-barge *:has(.bargeview) { display: block; position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; background: #fff; }
  body.print-barge .bargeview { width: var(--page); }
  body.print-barge .barge { border: 0; padding: 0; }
  body.print-barge .bargehead { margin-bottom: 4px; }
  body.print-barge .bargehead h3 { font-size: 14px; }
  body.print-barge .bargecart { padding: 4px; border-width: 2px; }
  body.print-barge .bargetier { gap: 4px; margin-bottom: 4px; }
  body.print-barge .bargetier.upper .bargeslot { height: 0.95in; }
  body.print-barge .bargetier.lower { height: 2.6in; }
  body.print-barge .bargeslot { padding: 3px 5px; font-size: 9px; }
  body.print-barge .bargeslot b { font-size: 10px; }
  body.print-barge .bargeorient { padding: 2px 6px; font-size: 8px; }
  body.print-barge .bargepower { margin-top: 4px; }
  body.print-barge .bargepower h4 { padding: 2px 6px; font-size: 8px; }
  /* Drawn at the sheet's own size on screen; a little smaller on the one Letter page. Zoom
     scales the margin and the gap too, so each is the printed cart's (4px padding and 2px
     border less the panel's 1px; the tiers' 4px gap) over the zoom. */
  /* At most 2.2in tall, as the diagram was before it was drawn on the cart's columns: the
     print button sets --print-zoom from the drawing's height, .8 at the most. */
  body.print-barge .bargewires { zoom: var(--print-zoom, .8); margin: 0 calc(5px / var(--print-zoom, .8)); --gap: calc(4px / var(--print-zoom, .8)); }
  body.print-barge .bargewirelist { padding: 2px 6px; }
  body.print-barge .wireline { font-size: 9px; line-height: 1.4; }
  body.print-barge .bargenotes { margin-top: 4px; }
  body.print-barge .printonly { display: block; font: 9px/1.3 var(--data); }
  body.print-barge .printonly { display: block; font: 11px/1.4 var(--data); }
  body.print-barge, body.print-barge .barge, body.print-barge .bargeslot, body.print-barge .bargepower, body.print-barge .bargecart { background: #fff !important; color: #000 !important; }
  body.print-barge .bargeslot, body.print-barge .bargecart, body.print-barge .rackface2d { border-color: #000 !important; }
  body.print-barge .bargeslot b, body.print-barge .bargehead h3, body.print-barge .bargeslot .bargecaption { color: #000 !important; }
  body.print-barge .distro2d .panelbg { fill: #fff; stroke: #000; }
  body.print-barge .distro2d .lbl { fill: #000; }
  body.print-barge .distro2d .shell { fill: #fff; stroke: #000; }
  body.print-barge .distro2d .face { fill: #fff; stroke: #000; }
  body.print-barge .distro2d .bracket { fill: #fff; stroke: #000; }
  body.print-barge .distro2d .barrel { fill: #000; }
  body.print-barge .distro2d .bore { fill: #fff; }
  body.print-barge .bargewires { background: #fff; }
  body.print-barge .bargewires .wirerack { background: #fff; color: #000; border-color: #000; }
  body.print-barge .bargewires .wiretag, body.print-barge .wireline { color: #000; }
  body.print-barge .bargewires .wire { border-color: #000; }
  body.print-barge .bargewires .wirehead.up { border-bottom-color: #000; }
  body.print-barge .bargewires .wirehead.right { border-left-color: #000; }
  body.print-barge .bargewires .wirehead.left { border-right-color: #000; }
}

/* ---- truck pack ------------------------------------------------------------------- */
/* The trailer is the page; the tally and the sheet flank it, as columns not cards. */
main > .truckpack { max-width: none; }
.truckpack .commands, .truckpack .truckcommands { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; }
.truckstrip { display: flex; flex-wrap: wrap; gap: 1px; background: var(--seam); padding: 1px; }
.trucktab { display: flex; flex-direction: column; gap: 1px; padding: 4px 10px; background: var(--panel); color: var(--ink-dim); border: 0; text-align: left; cursor: pointer; font: inherit; min-width: 96px; }
.trucktab b { font: 700 12px/1 var(--chrome); letter-spacing: .12em; color: var(--ink); }
.trucktab i { font: 10px/1.2 var(--data); font-style: normal; color: var(--amber); }
.trucktab.on { background: var(--panel-hi); box-shadow: inset 0 -2px 0 var(--amber); }
.trucktab.bad b::after { content: ' !'; color: #ff5a3c; }
.truckhead { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; padding: 6px 8px; border: 1px solid var(--seam); background: var(--panel); margin-bottom: 8px; }
.truckfield { display: flex; flex-direction: column; gap: 1px; }
.truckfield span { font: 9px/1 var(--chrome); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.truckfield .scalar { padding: 2px 5px; font-size: 11px; }
.truckcmds { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px; align-self: center; }
.truckbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 10px; align-items: start; }
.truckstaging { margin: 6px 0 10px; }
.trucktally, .trucksheet { min-width: 0; overflow-x: auto; }
.truckpack h4 { margin: 0 0 4px; font: 700 10px/1.4 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.truckpack h4.bad { color: #ff5a3c; }
.trucktally .tallygrid, .trucksheet .stackgrid { width: 100%; font-size: 11px; }
.trucktally .tallygrid td, .trucksheet .stackgrid td { padding: 1px 5px; }
.trucktally .tallygrid th, .trucksheet .stackgrid th { padding: 3px 5px; font-size: 9px; }
.trucktally .tallygrid select { width: 66px; }
.trucktally .tallygrid .cmd { padding: 1px 6px; font-size: 11px; }
.trucktally .scalar { padding: 1px 3px; font-size: 11px; }
/* Mixed stacks by rule, the sizes with no rule yet, and the rows that are not boxes (the owner, 2026-10-07). */
.trucktally .tallygrid select.withsize { width: 92px; }
.trucktally .noruleline { color: #ffb86b; }
.trucktally .linklike, .truckstaging .linklike { background: none; border: 0; padding: 0; color: var(--amber); text-decoration: underline; cursor: pointer; font: inherit; }
/* So many to stage, and several stacks at once (the owner, 2026-10-08): the How many box, Select all, a ghost carrying a group, the sheet's line. */
.trucktally .tallygrid input.howmany { width: 44px; text-align: right; }
.trucktally .howmanywrap { white-space: nowrap; }
.trucktally .howmanywrap i { font-style: normal; font-size: 10px; color: var(--ink-faint); }
.truckstaging h4 .selectall, .truckstaging h4 i.dim { font: 10px/1 var(--data); letter-spacing: 0; text-transform: none; font-style: normal; }
.truckstaging h4 i.dim { color: var(--ink-faint); }
.stackghost.many { border-style: dashed; box-shadow: 4px 4px 0 -1px rgba(255, 138, 31, .45), 8px 8px 0 -2px rgba(255, 138, 31, .25); }
.trucksheet .selectedmany { color: var(--ink); }
.trucktally details.notboxes { margin: 6px 0; }
.trucktally details.notboxes > summary { cursor: pointer; margin: 0; }
.trucktally details.waitingpieces { margin: 6px 0; }
.trucktally details.waitingpieces > summary { cursor: pointer; margin: 0; }
.trucktally .notboxgrid { width: 100%; font-size: 11px; margin-top: 4px; }
.trucktally .notboxgrid td { padding: 1px 5px; }
.trucktally .notboxgrid th { padding: 3px 5px; font-size: 9px; }
.trucksheet .stackmix { margin: 2px 0 6px; }
.trucksheet .stackmix.bad { color: #ff8a70; }
.stagestrip { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; min-height: 40px; padding: 6px; border: 1px dashed #3d434c; background: #0e1114; }
.stackchip { position: relative; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; border: 2px solid #6b7280; background: #23272e; color: var(--ink); cursor: grab; user-select: none; min-width: 24px; min-height: 24px; }
.stackchip b { font: 700 9px/1.1 var(--chrome); letter-spacing: .04em; text-align: center; }
.stackchip i { font: 8px/1.1 var(--data); font-style: normal; color: var(--ink-faint); }
.stackchip.on { outline: 2px solid var(--amber); outline-offset: 1px; }
.truckfloorwrap { overflow-x: auto; border: 1px solid var(--seam); background: var(--panel); padding: 6px; }
.truckfloor { display: block; width: 100%; min-width: 560px; max-height: 260px; height: auto; user-select: none; }
.truckfloor .wall { fill: #3d434c; }
.truckfloor .floor { fill: #101317; stroke: #8a9099; stroke-width: 1; }
.truckfloor .wheel { fill: #23272e; stroke: #5b6068; stroke-width: .8; }
.truckfloor .cab { fill: #1a1d22; stroke: #5b6068; stroke-width: .8; }
.truckfloor .kingpin { fill: #5b6068; }
.truckfloor .doors { stroke: #8a9099; stroke-width: 1; fill: none; }
.truckfloor .tick { stroke: #565c66; stroke-width: .8; }
.truckfloor .lbl { fill: var(--ink-faint); font: 7px var(--chrome); letter-spacing: .1em; }
.truckfloor .lbl.dim { font-size: 6px; }
.truckfloor .lbl.lf { fill: var(--amber); font-weight: 700; }
.truckfloor .lfline { stroke: var(--amber); stroke-width: .8; stroke-dasharray: 3 2; }
.truckfloor .stack { cursor: grab; }
.truckfloor .stack .case { fill: #23272e; stroke: #8a9099; stroke-width: 2; }
.truckfloor .stack.on .case { fill: #2a2113; stroke-width: 3; filter: drop-shadow(0 0 3px var(--amber)); }
.truckfloor .stack.bad .case { fill: #2a1313; }
.truckfloor .stack.droptarget .case { fill: #1f3a1f; }
.truckfloor .stack.dropbad .case { fill: #3a1f1f; stroke: #ff5a3c; }
.truckfloor .stacklbl { fill: var(--ink); font: 700 7.5px var(--chrome); letter-spacing: .04em; pointer-events: none; }
.truckfloor .stacksub { fill: var(--ink-dim); font: 6px var(--data); pointer-events: none; }
.truckfloor .stackhigh { fill: var(--amber); font: 700 6px var(--data); pointer-events: none; }
.truckfloor.droptarget .floor { stroke: var(--amber-hi); }
/* The staging colours over the floor (a chip each, the page narrowed to one), and the sheet that gives them. */
.packcolours { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0 0 6px; font: 11px var(--chrome); }
.packcolours .dim { margin-right: 4px; letter-spacing: .08em; text-transform: uppercase; font-size: 10px; }
.packcolour { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 1px solid var(--seam); border-radius: 10px; background: var(--panel); color: var(--ink); font: 11px var(--chrome); cursor: pointer; }
.packcolour:hover { border-color: var(--amber); }
.packcolour.on { border-color: var(--amber); background: #2a2113; color: var(--amber); }
.packcolour .swatch { width: 10px; height: 10px; border-radius: 2px; border: 1px solid rgba(0, 0, 0, .4); }
.packcolour .swatch.none { background: repeating-linear-gradient(45deg, transparent 0 2px, var(--ink-faint) 2px 3px); }
.truckfloor .stack.faded { opacity: .25; }
/* A stack marked loaded, or every case of it scanned on (the owner, 2026-10-29): a green edge and a tick in its corner. */
.truckfloor .stack.loaded .case { stroke: #3fae5d; stroke-dasharray: none; }
.truckfloor .loadedmark { fill: #3fae5d; font: 800 9px var(--chrome); pointer-events: none; }
.trucksheet .loadedline { margin: 4px 0; color: #8fd6a0; }
.packcoloursheet { margin-top: 8px; }
.packcoloursheet > summary { cursor: pointer; }
.packcoloursevery { display: block; margin: 4px 0; font: 11px var(--chrome); }
/* Where a drag off the floor lands: the staging strip (back to staging) or the tally (back to the list). */
.stagestrip.droptarget, .trucktally.droptarget { outline: 2px dashed var(--amber); outline-offset: 2px; }
/* The selection on the floor as a spreadsheet draws its block: a dashed frame, and the move handle at its corner. */
.truckfloor .selframe { fill: rgba(255, 138, 31, .06); stroke: var(--amber); stroke-width: 1; stroke-dasharray: 3 2; pointer-events: none; }
.truckfloor .movehandle { cursor: move; }
.truckfloor .movehandle rect { fill: var(--amber); stroke: #101317; stroke-width: .8; }
.truckfloor .movehandle:hover rect { fill: var(--amber-hi); }
.truckfloor .movehandle .arms { stroke: #101317; stroke-width: 1.1; fill: none; }
.truckfloor .movehandle .heads { fill: #101317; }
/* A block in hand: drawn where it will land, the pointer passing through it to what is under it. */
.truckfloor .moving { pointer-events: none; }
.truckfloor .stack.moving .case { fill-opacity: .85; }
/* The box drawn on the empty floor to select what it touches. */
.truckfloor .floor { cursor: crosshair; }
.truckfloor .marquee { fill: rgba(255, 138, 31, .12); stroke: var(--amber); stroke-width: .8; stroke-dasharray: 2 1.5; pointer-events: none; }
.truckpack.boxing, .truckpack.boxing * { cursor: crosshair !important; user-select: none; }
.truckpack.dragging { user-select: none; }
.stackghost { position: fixed; z-index: 60; pointer-events: none; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border: 2px solid var(--amber); background: rgba(255,138,31,.25); color: var(--ink); min-width: 20px; min-height: 20px; }
.stackghost b { font: 700 9px/1 var(--chrome); letter-spacing: .04em; }
.truckpack.dragging { cursor: grabbing; }
.trucktotals { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0 0 6px; font: 11px/1.4 var(--data); }
.trucktotals dt { color: var(--ink-faint); font: 10px/1.6 var(--chrome); letter-spacing: .1em; text-transform: uppercase; }
.trucktotals dd { margin: 0; color: var(--ink); }
.truckproblems { margin: 0 0 6px; padding: 0 0 0 14px; font: 11px/1.4 var(--data); color: #ff8a70; }
.truckproblems li { cursor: pointer; }
.truckproblems li:hover { color: var(--amber-hi); }
.truckprinthead { display: none; }
@media print {
  body.print-truckpack { --page: 10.2in; }
  body.print-truckpack *:not(:has(.truckpack)):not(.truckpack):not(.truckpack *) { display: none !important; }
  body.print-truckpack .noprint, body.print-truckpack .trucktally { display: none !important; }
  body.print-truckpack, body.print-truckpack *:has(.truckpack) { display: block; position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; background: #fff; }
  body.print-truckpack .truckpack { width: var(--page); }
  body.print-truckpack .truckprinthead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; font: 11px/1.3 var(--data); color: #000; }
  body.print-truckpack .truckprinthead b { font: 700 16px/1.2 var(--chrome); letter-spacing: .08em; }
  body.print-truckpack .truckbody { grid-template-columns: 1fr; gap: 8px; }
  body.print-truckpack .truckfloorwrap { overflow: visible; border-color: #000; background: #fff; padding: 0; }
  body.print-truckpack .truckfloor { min-width: 0; }
  body.print-truckpack .truckfloor .floor { fill: #fff; stroke: #000; }
  body.print-truckpack .truckfloor .wall { fill: #000; }
  body.print-truckpack .truckfloor .cab, body.print-truckpack .truckfloor .wheel { fill: #fff; stroke: #000; }
  body.print-truckpack .truckfloor .stack .case { fill: #fff; stroke-width: 2.5; }
  body.print-truckpack .truckfloor .stacklbl, body.print-truckpack .truckfloor .lbl, body.print-truckpack .truckfloor .stacksub, body.print-truckpack .truckfloor .stackhigh { fill: #000; }
  body.print-truckpack .truckfloor .lfline { stroke: #000; }
  body.print-truckpack .truckfloor .selframe, body.print-truckpack .truckfloor .movehandle, body.print-truckpack .truckfloor .marquee { display: none; }
  body.print-truckpack .truckfloor .stack.faded { opacity: 1; }
  body.print-truckpack .trucksheet, body.print-truckpack .trucksheet * { color: #000 !important; background: #fff !important; border-color: #000 !important; }
  body.print-truckpack .trucksheet .grid { font-size: 9px; }
}

/* ---- the patch window ---------------------------------------------------------------- */
main > .patch { max-width: none; }
.patch .commands { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.patchpicked { font: 11px/1.4 var(--data); color: var(--amber-hi); }
.patchuniverse { margin-bottom: 10px; }
.patchuniverse h3 { margin: 0 0 3px; }
.patchuniverse h3 em { font: 10px var(--data); font-style: normal; color: var(--ink-faint); letter-spacing: 0; text-transform: none; }
.patchgrid { display: grid; grid-template-columns: repeat(32, 17px); gap: 1px; width: max-content; padding: 2px; background: #0e1114; border: 1px solid var(--seam); }
.patchgrid i {
  height: 17px; box-sizing: border-box; background: #191c21; border: 1px solid #23272e; cursor: pointer;
  font: 700 7.5px/15px var(--data); font-style: normal; color: #0b0c0e; text-align: center; overflow: hidden; white-space: nowrap;
}
.patchgrid i:nth-child(32n+1) { position: relative; }
.patchgrid i:hover { border-color: var(--amber-hi); }
.patchgrid i.on { background: hsl(var(--hue) 55% 62%); border-color: hsl(var(--hue) 55% 40%); }
.patchgrid i.on.first { border-left: 2px solid #0b0c0e; }
.patchgrid i.on.last { border-right: 2px solid #0b0c0e; }
.patchgrid i.on.bad { background: #d0384a; border-color: #7a1620; color: #fff; }
.patchgrid i.on.picked { outline: 2px solid var(--amber); outline-offset: -1px; }
.patchunpatched summary { cursor: pointer; font: 11px var(--data); color: var(--amber); margin: 6px 0; }
.patchunpatched div { display: flex; flex-wrap: wrap; gap: 4px; }
.patchchip { font: 10.5px var(--data); padding: 2px 6px; background: var(--panel); border: 1px solid var(--seam-bright); color: var(--ink); cursor: pointer; }
.patchchip:hover { border-color: var(--amber); }

/* ---- phones and tablets ------------------------------------------------------------------ */
/*
  The app is built for a laptop beside a drawing, but it is read on a phone in a truck and
  on a tablet at the dock, and the web app has to hold up there. Nothing is redesigned: the
  rail becomes a drawer, the title bar wraps, and every wide thing — a sheet, the trailer,
  the barge — scrolls inside its own box rather than pushing the page sideways.
*/
@media (max-width: 900px) {
  html, body { max-width: 100vw; overflow-x: hidden; }
  .titlebar .platetop { height: auto; flex-wrap: wrap; }
  .titlebar .mark { padding: 0 10px; }
  .titlebar .mark span, .titlebar .screw, .titlebar .lamp { display: none; }
  .titlebar .menubar { height: 28px; }
  .titlebar .plate-right { margin-left: auto; padding: 0 6px; gap: 6px; }
  .modeswitch button { padding: 0 6px; font-size: 9.5px; }
  /* The top row wraps on a phone, and the apps take a line of their own under the menus. */
  .titlebar .appswitch { order: 1; flex: 1 0 100%; margin: 0; border-width: 1px 0 0; }
  .titlebar .appswitch button { flex: 1 1 0; padding: 6px 4px; }
  .shows { overflow-x: auto; }
  .show-tab { min-width: 0; padding: 5px 10px; }
  .toolbar .where span { display: none; }
  .renderpill, .outboxpill { right: 10px; bottom: 10px; max-width: calc(100vw - 20px); white-space: normal; }
  /* The rail is a drawer: the toolbar's ▶ opens it, a tap on a section or the shade closes it. */
  .frame { grid-template-columns: 1fr; }
  body.railshut .frame { grid-template-columns: 1fr; }
  .rail, body.railshut .rail {
    display: block; position: fixed; left: 0; top: 0; bottom: 0; z-index: 92; width: 232px;
    overflow-y: auto; padding-bottom: 40px; box-shadow: 0 0 40px rgba(0,0,0,.7);
    transform: translateX(-100%); transition: transform .18s ease-out;
  }
  body.railopen .rail { transform: none; }
  .railshade { display: none; position: fixed; inset: 0; z-index: 91; background: rgba(0,0,0,.45); }
  body.railopen .railshade { display: block; }
  main { padding: 8px 8px 60px; max-width: 100vw; overflow-x: hidden; }
  main > * { max-width: 100%; }
  .sheetframe, .gridwrap, .rackdata, .cablebody, .looms, .caseplan, .trucking,
  .info, .bomdiff, .trussview, .home, .dashwrap, .portsheet, .adminbody,
  .restorepanel, .rackmoves { max-width: 100%; overflow-x: auto; }
  .gridwrap { max-height: calc(100vh - 150px); }
  .cards .card { flex: 1 1 42%; min-width: 0; padding: 8px 10px; }
  .previewer { inset: 0; }
  /* A pop-up on a phone is pinned between the top and the bottom bar and scrolls inside itself:
     a wizard taller than the screen was cut off with no way down (the owner, 2026-09-18). */
  .askbox, .askbox.askwizard { left: 8px; right: 8px; top: 8px; bottom: 62px; width: auto; transform: none; max-width: none; max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; align-content: flex-start; padding: 14px 12px; }
  .askbox .askrow, .askbox .askwizard .askrow { position: sticky; bottom: -14px; margin: 0 -12px -14px; padding: 8px 12px 10px; background: var(--panel); border-top: 1px solid var(--seam); flex: 1 0 100%; }
  /* The find and reprint windows fill the phone's width, above the bottom bar. */
  .findall { left: 8px; right: 8px; width: auto; top: 8px; bottom: 62px; padding: 10px; }
  .cellmenu, .railtip, .showpicker, .cellpicker { max-width: calc(100vw - 16px); }
  /* The folder chooser and the migrate dialog fill the phone the way a pop-up does, rather
     than the desktop's percentage inset, which leaves almost nothing on a narrow screen. */
  .folderpick, .dialog {
    left: 8px; right: 8px; top: 8px; bottom: 62px; width: auto; max-width: none; max-height: none; transform: none;
    overflow-y: auto; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  /* Every field-pair row stacks one control per row, label above it — a spreadsheet filled
     top to bottom, not a form crammed side by side (the owner, 2026-09-18: "things should
     always be organized in a similar structure to a spreadsheet, so multiple rows instead
     of trying to do a tabular format"). A row of plain buttons (no input, no select) is
     left as it was — that is a toolbar, not a field grid. */
  .drow:has(input, select, textarea) { flex-direction: column; align-items: stretch; }
  .drow:has(input, select, textarea) > * { width: 100%; max-width: none; box-sizing: border-box; }
  .drow:has(input, select, textarea) > input[type="checkbox"],
  .drow:has(input, select, textarea) > input[type="radio"] { width: auto; }
  .dfield { flex-direction: column; align-items: stretch; gap: 3px; }
  .dfield > * { width: 100%; max-width: none; box-sizing: border-box; }
  /* A loose table's own scroll box never grows past the screen either. */
  .subtable { max-width: 100%; }
  .footer { right: 0; border-right: 0; font-size: 9px; gap: 8px; }
  .signinbox { width: min(380px, calc(100vw - 24px)); }
  /* The truck pack stacks its three columns; the trailer keeps its width and scrolls. */
  .truckbody { grid-template-columns: 1fr; }
  .truckhead .truckcmds { margin-left: 0; }
  .truckfloor { min-width: 640px; }
  /* The barge: the cart keeps its eight feet and scrolls; the strip wraps. */
  .bargeview .bargecart { min-width: 560px; }
  .bargeview { overflow-x: auto; }
  .rackpicker, .bargepicker, .truckstrip { flex-wrap: wrap; }
  .toolbar .commands { margin-left: 0; }
  .patchuniverse { overflow-x: auto; }
  .patchgrid { grid-template-columns: repeat(32, 14px); }
  .patchgrid i { height: 14px; font-size: 6.5px; line-height: 12px; }
}
/* A finger is wider than a pointer: room to tap, and inputs big enough that the phone does not zoom. */
@media (max-width: 900px) and (pointer: coarse) {
  .rail button { padding-top: 8px; padding-bottom: 8px; }
  .cmd, .modes button, .trucktab, .rackpicker button { min-height: 34px; }
  input.scalar, select.scalar, .truckfield .scalar, .askbox input, .askbox select { font-size: 16px; }
  /* Compact, not tall: a phone shows more of the sheet at a smaller row and type (the owner, 2026-09-18). */
  tbody td { height: 24px; padding: 0 6px; font-size: 11px; }
  thead th { padding: 4px 6px; font-size: 9px; }
  .grid .rownum, .grid td.rownum, .grid th.rownum { padding: 0 4px; }
  .grid tbody td { scroll-margin-top: 30px; }
  .cellbar { font-size: 11px; }
}

/* ---- Home: the shows to open, what the address itself lands on ---- */
/*
 * Read across a room, not a data grid: the owner found the first Home hard to read. So the
 * type is the chrome face at a size a table row never gets, the ink is the full ink and the
 * secondary line the dim ink rather than the faint one, every row is its own plate with a
 * seam between, and the way in is a button on the row.
 */
.home { padding: 16px 22px 40px; max-width: 1080px; }
.home .homehead { display: flex; align-items: baseline; gap: 16px; margin: 0 0 12px; }
.home h2 { margin: 0; font: 700 18px/1.2 var(--chrome); letter-spacing: .1em; text-transform: uppercase; color: var(--amber-hi); }
.home .homewho { margin: 0; font-size: 12px; color: var(--ink-dim); }
.home .importbar.homebar { margin-bottom: 14px; padding: 10px 14px; }
.home .importbar.homebar .cmd { padding: 8px 14px; font-size: 11px; }
/* Your settings from Home (renderHomeSettings in web/app.js): the Settings window at its own width, no show open. */
.home.homesettings { max-width: none; }
.home.homesettings .importbar.homebar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.home.homesettings .homenote { font-size: 12px; color: var(--ink-dim); text-transform: none; letter-spacing: normal; font-family: var(--body, inherit); }
.home .homeasks .keyhint { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.homelist { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--seam-bright); }
.homelist thead th {
  position: static; padding: 8px 14px; background: var(--panel-hi); color: var(--ink-dim);
  font: 700 10.5px/1.2 var(--chrome); letter-spacing: .14em; text-transform: uppercase; text-align: left;
  border-bottom: 1px solid var(--seam-bright);
}
.homelist thead th:nth-child(3), .homelist thead th:nth-child(4) { text-align: right; }
.homelist tbody tr { cursor: pointer; }
.homelist tbody td {
  height: auto; padding: 12px 14px; vertical-align: middle; white-space: normal;
  border-bottom: 1px solid var(--seam); border-right: 0; color: var(--ink);
  font: 14px/1.35 var(--chrome);
}
.homelist tbody tr:last-child td { border-bottom: 0; }
.homelist tbody tr:hover td { background: var(--panel-hi); }
.homelist tbody tr.isopen td { background: #16191f; }
.homelist td.homename b { display: block; font: 700 17px/1.2 var(--chrome); color: #fff; letter-spacing: .01em; }
.homelist td.homename .homewhere { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-dim); }
.homelist td.homename .homeflag {
  display: inline-block; margin: 2px 0 0 8px; padding: 1px 7px; vertical-align: 2px;
  font: 700 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase;
  color: var(--amber-hi); border: 1px solid var(--amber-lo); border-radius: 2px;
}
.homelist td.homerole { text-transform: capitalize; color: var(--ink); }
.homelist td.num { text-align: right; font: 15px var(--data); color: var(--ink); }
.homelist td.homewhen span { display: block; }
.homelist td.homewhen .homewhentime { font-size: 12px; color: var(--ink-dim); }
.homelist td.homego { width: 1%; text-align: right; }
.homelist .cmd.homeopen {
  padding: 8px 18px; border: 1px solid var(--amber); background: transparent; color: var(--amber-hi);
  font: 700 11px/1 var(--chrome); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
}
.homelist .cmd.homeopen:hover, .homelist tbody tr:hover .cmd.homeopen { color: var(--ground); background: var(--metal); }
.homelist .cmd.homeopen.isopen { border-color: var(--seam-bright); color: var(--ink-dim); }
.homelist .cmd.homeopen.isopen:hover { color: var(--ink); background: var(--panel-hi); }
@media (max-width: 720px) {
  .homelist thead { display: none; }
  .homelist tbody td.homerole, .homelist tbody td.homewhen { display: none; }
}
.mark { cursor: pointer; }

/* The Live toggle on the EXCHANGE toolbar: lit while the server keeps the exchange file current. */
.commands .cmd.live[aria-pressed="true"] { color: var(--ground); background: var(--metal); }
.commands .cmd.live.failed[aria-pressed="true"] { background: #7a2d35; color: #ffd7dc; }
/* Live as a switch, with what carries it beside it (the owner, 2026-09-25: "an enabled/disabled
   checkbox"): the box, the word, the line — lit amber while on, red when the pass failed. */
.commands .livetoggle {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; background: var(--plate);
  font: 600 9.5px/1 var(--chrome); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim);
  cursor: pointer; white-space: nowrap; max-width: 560px;
}
.commands .livetoggle input { width: 15px; height: 15px; margin: 0; accent-color: var(--amber); cursor: pointer; }
.commands .livetoggle b { color: var(--amber); font-weight: 700; }
.commands .livetoggle .livesaid { font: 400 10.5px/1.2 var(--data); letter-spacing: 0; text-transform: none; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; }
.commands .livetoggle.on { background: #2a2210; box-shadow: inset 0 0 0 1px var(--amber-lo); }
.commands .livetoggle.on .livesaid { color: var(--ink); }
.commands .livetoggle.failed { box-shadow: inset 0 0 0 1px #c0392b; }
.commands .livetoggle.running { opacity: .55; }

/* The exchange method (the owner, 2026-10-29): None, Manual, Live or Lumen push, one at a time; the toolbar shows what it uses. */
.commands.titlecmds > [hidden] { display: none !important; }
.commands .exchangemethodbox {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 4px 3px 10px; background: var(--plate);
  font: 600 9.5px/1 var(--chrome); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap;
}
.commands .exchangemethodbox b { color: var(--amber); font-weight: 700; }
.commands .exchangemethodbox select { width: 112px; min-width: 0; font: 600 11px/1.2 var(--chrome); letter-spacing: .02em; text-transform: none; padding: 2px 4px; }
.commands .exchangemethodbox.running { opacity: .55; }
.commands .lumensaid {
  display: inline-flex; align-items: center; padding: 4px 10px; background: var(--plate); max-width: 520px;
  font: 400 10.5px/1.2 var(--data); color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.commands .lumensaid.waiting { color: var(--ink); box-shadow: inset 0 0 0 1px var(--amber-lo); }

/* Compare… and Export…: the app against the drawing as last read, type changes in red. */
.commandform.exchangecompare {
  flex-direction: column; align-items: stretch; gap: 8px; width: min(820px, calc(100vw - 32px)); max-height: min(78vh, 640px); overflow: auto;
  /* Inside the toolbar, whose lettering is the buttons': the panel reads as text. */
  text-transform: none; letter-spacing: normal; font: 400 11px/1.4 var(--data); color: var(--ink);
}
.exchangecompare .comparetable table { table-layout: auto; }
.exchangecompare .comparetable td { white-space: normal; height: auto; padding: 4px 8px; text-transform: none; letter-spacing: 0; font: 11px/1.35 var(--data); vertical-align: top; }
.exchangecompare .comparetable td:first-child, .exchangecompare .comparetable th:first-child { width: 28px; text-align: center; }
.exchangecompare .comparetable td:nth-child(2) { min-width: 220px; }
.exchangecompare .comparetable thead th { position: static; }
.exchangecompare .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.exchangecompare .keyhint { margin: 0; color: var(--ink-dim); font: 11px/1.4 var(--data); letter-spacing: 0; }
.exchangecompare .comparedrawing { padding: 6px 8px; border: 1px solid var(--seam); font: 11px/1.4 var(--data); color: var(--ink-dim); }
.exchangecompare .comparedrawing.moved { border-color: #c9932e; background: #2a2210; color: #ffd98a; }
.exchangecompare .comparedrawing button { margin-left: 8px; }
.exchangecompare .comparedrawing ul, .exchangecompare .compareduplicates ul, .exchangecompare .comparenotes ul { margin: 4px 0 0 16px; padding: 0; }
.exchangecompare .compareduplicates { padding: 6px 8px; border: 1px solid #c0392b; background: #3a1418; color: #ffd7dc; font: 11px/1.4 var(--data); }
.exchangecompare .comparetable { overflow: auto; max-height: 340px; border: 1px solid var(--seam); }
.exchangecompare .comparetable table { width: 100%; }
.exchangecompare .comparetable td.was { color: var(--sheet-dim); text-decoration: line-through; }
.exchangecompare .comparetable td.now { font-weight: 600; }
.exchangecompare .comparetable tr.typechange td { background: #fbe3e5 !important; color: #a01824; }
.exchangecompare .comparetable tr.identity td { background: #fff4dc !important; }
.exchangecompare .comparenotes { font: 11px/1.4 var(--data); color: var(--ink-dim); }
.exchangecompare .go.primary { background: var(--amber); color: var(--ground); border-color: var(--amber); }
.exchangecompare .go.primary:disabled { opacity: .45; cursor: not-allowed; }
.exchangecompare .go.dismiss { border-color: var(--seam-bright); color: var(--ink-dim); }

/* ---- the import wizard: an upload's changes, each confirmed, flagged or denied ---- */
.askbox.importwiz { max-width: 1240px; }
.askbox.importwiz .askheading { flex: 1 0 100%; margin: 0; font: 600 14px/1.3 var(--chrome); color: var(--ink); }
/* In the wizard's flex column a scrolling box shrinks to nothing; it keeps its content height. */
.askbox.importwiz .floortable { max-height: 52vh; overflow: auto; flex: 0 0 auto; }
.askbox.importwiz .cards .card.isnew b { color: var(--amber-hi); }
.askbox.importwiz .cards .card.isupdate b { color: #72b4eb; }
.askbox.importwiz .cards .card.isflag b { color: #f1c232; }
.askbox.importwiz .importall { display: flex; gap: 6px; align-items: center; }
.askbox.importwiz .importall .keyhint { margin: 0 4px 0 0; }
/* Potential cuts on the Review (the owner, 2026-10-11): the show's rows the sheet left out, folded under one line, each
   Keep or Cut; and what Apply will do, at the Review's foot where Apply is. */
.askbox.importwiz .cards .card.iscut b { color: #ff8a94; }
.askbox.importwiz .potentialcuts { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; border: 1px solid var(--seam); border-left: 3px solid #8a3a44; background: rgba(92, 43, 49, .14); }
.askbox.importwiz .cuthead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.askbox.importwiz .cuthead > b { font: 600 12.5px/1.3 var(--chrome); color: #ffd7dc; }
.askbox.importwiz .cuthead > .keyhint { margin: 0; flex: 1 1 220px; }
.askbox.importwiz .cuthead .cutmarked { flex: 0 0 auto; color: #ff8a94; }
.askbox.importwiz .cuthead .cuttoggle { margin-left: auto; }
.askbox.importwiz .cutlist { display: flex; flex-direction: column; gap: 6px; }
.askbox.importwiz .cutlist[hidden] { display: none; }
.laborreview td.chg.cut { color: #b3261e; }
.grid.sub.cutreview tbody tr.marked td { background: #fbe3e5; }
.askbox.importwiz .cutlist .floortable { max-height: 36vh; }
/* The potential cuts as the sheet they come off (the owner, 2026-10-15): the grid's own frame, a Decision column first. */
.askbox.importwiz .cutsheet .gridwrap { max-height: 44vh; }
.grid tbody tr:nth-child(n) td.tint-cutpick { background: #5c2b31; color: #ffd7dc; font-weight: 600; }
.grid tbody tr:nth-child(n) td.tint-flagpick { background: #f1c232; color: #1a1400; font-weight: 600; }
.askbox.importwiz .traveltick, .askbox.importwiz .timetick { display: inline-flex; align-items: center; gap: 4px; margin: 0; cursor: pointer; white-space: nowrap; }
.askbox.importwiz .cuthead .traveltick { flex: 0 0 auto; }
.askbox.importwiz .cuthowlist { display: flex; flex-direction: column; gap: 6px; }
.askbox.importwiz .cuthowlist[hidden] { display: none; }
.askbox.importwiz .cuthowwho { font-weight: 600; margin-right: 6px; }
.tri button.on.tricut { background: #5c2b31; color: #ffd7dc; border-color: #5c2b31; }
.askbox.importwiz .applyfoot { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px solid var(--seam); }
.askbox.importwiz .applyfoot .keyhint { margin: 0; }
.laborreview td.chg { font: 700 9.5px/1.6 var(--chrome); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.laborreview td.chg.new { color: var(--amber-hi); }
.laborreview td.chg.update { color: #72b4eb; }
.laborreview td.chg.same { color: var(--ink-faint); }
.laborreview td.detail { color: var(--ink-dim); font-size: 11.5px; line-height: 1.4; }
.laborreview td.dim { color: var(--ink-faint); white-space: nowrap; }
.tri { display: inline-flex; gap: 0; }
.tri button { padding: 3px 9px; font: 600 10.5px var(--chrome); letter-spacing: .06em; background: var(--panel); color: var(--ink-dim); border: 1px solid var(--seam); cursor: pointer; }
.tri button + button { border-left: 0; }
.tri button.on.triconfirm { background: var(--amber-lo); color: var(--ground); border-color: var(--amber-lo); }
.tri button.on.triflag { background: #f1c232; color: #1a1400; border-color: #f1c232; }
.tri button.on.trideny { background: #5c2b31; color: #ffd7dc; border-color: #5c2b31; }
.tri button.on.trikeep { background: #2f5d7a; color: #dff0ff; border-color: #2f5d7a; }
.laborreview td.chg.duplicate { color: #f1c232; }
.laborreview tr.undecided td { background: rgba(241, 194, 50, .07); }
.undecidedhint { color: #f1c232; }
.dupnames { margin: 6px 0 14px; padding: 10px 12px; border: 1px solid #6b5a1a; border-radius: 6px; background: rgba(241, 194, 50, .05); }
.dupnames h3 { margin: 0 0 4px; font-size: 13px; }
.tri button:hover:not(.on) { color: var(--ink); }
/* The review table stays inside the pop-up: the column may not grow past it, and What moves wraps. */
.askbox.importwiz .askbody, .askbox.importwiz .floortable { min-width: 0; max-width: 100%; }
.askbox.importwiz .laborreview td { white-space: normal; }
.askbox.importwiz .laborreview td.chg, .askbox.importwiz .laborreview td:last-child { white-space: nowrap; }
/* A group's field grid sizes to its fields: a percentage basis inside the wizard's column
   spilled each group over the heading below it. */
.askbox.askwizard .askgroup > .askgrid { flex: 0 0 auto; }
.askbox.askwizard .askbody > .askgroup + .askgroup { margin-top: 6px; }

/* The New show wizard's person groups: a heading with From the directory beside it, and the search under it. */
.askbox.askwizard .askgrouphead { display: flex; align-items: center; gap: 10px; }
.askbox.askwizard .askgrouphead > span { font: 700 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.askbox.askwizard .askgrouphead .cmd { padding: 1px 8px; font-size: 9.5px; }
.askbox.askwizard .askdirsearch { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 4px; }
.askbox.askwizard .askdirresults { display: flex; flex-direction: column; gap: 2px; }
.askbox.askwizard .askdirresults button { display: flex; gap: 10px; align-items: baseline; text-align: left; padding: 4px 8px; background: var(--panel); border: 1px solid var(--seam); color: var(--ink); cursor: pointer; font: 11.5px var(--data); }
.askbox.askwizard .askdirresults button:hover { border-color: var(--amber-lo); }
.askbox.askwizard .askdirresults button span { color: var(--ink-dim); font-size: 10.5px; }
.askbox.askwizard .askdirresults em { font-style: normal; color: var(--ink-faint); font-size: 11px; }
.askbox.askwizard .askdirsearch[hidden] { display: none; }
.askbox.askwizard .askband[hidden] { display: none; }
/* Every child of the wizard's column sizes to its content: a 100% basis in a column of no set height pushed what followed out of the body. */
.askbox.askwizard .askbody > * { flex: 0 0 auto; }
/* Labor › Tasks: the board, three columns and a detail beside them. */
.taskboard .taskbody { display: grid; grid-template-columns: 1fr 360px; gap: 14px; align-items: start; }
.taskboard .taskbody:has(> :only-child) { grid-template-columns: 1fr; }
.taskboard .taskcolumns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.taskboard .taskcolumn h4 { margin: 0 0 6px; font: 700 10px/1 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.taskboard .taskcard { margin: 0 0 6px; padding: 8px 10px; background: #0e1114; border: 1px solid var(--seam); cursor: pointer; }
.taskboard .taskcard:hover, .taskboard .taskcard.open { border-color: var(--amber); }
.taskboard .taskcard.late { border-left: 3px solid #ff6b7a; }
.taskboard .taskcard b { display: block; font: 600 12.5px var(--data); }
.taskboard .taskcard .meta { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 3px; font: 10.5px var(--chrome); color: var(--ink-faint); }
.taskboard .taskcard .meta .me { color: var(--amber); font-weight: 700; }
.taskboard .taskcard .meta .warn, .taskboard .taskdetail .warn { color: #e06a4a; font-weight: 700; }
.taskboard .taskcard .meta .taskapp { color: var(--amber); text-transform: uppercase; letter-spacing: .04em; }
.taskboard .taskdetail { padding: 10px 12px; background: #0e1114; border: 1px solid var(--seam); }
.taskboard .taskdetail h3 { margin: 0 0 6px; }
.taskboard .taskdetail h5 { margin: 12px 0 4px; font: 700 9.5px/1 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.taskboard .taskdetail .status { display: flex; gap: 6px; margin: 6px 0; }
.taskboard .taskdetail .photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 6px; }
.taskboard .taskdetail .photos a { display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--seam); }
.taskboard .taskdetail .photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.taskboard .taskdetail .comment { padding: 6px 0; border-top: 1px solid var(--seam); font: 12px var(--data); }
.taskboard .taskdetail .comment .by { font: 10.5px var(--chrome); color: var(--ink-faint); }
.taskboard .taskdetail textarea.askfield { width: 100%; margin-top: 6px; }
.taskboard .pings { margin: 0 0 10px; padding: 8px 10px; border-left: 3px solid var(--amber); background: rgba(240,160,42,.08); }
.taskboard .pings b { display: block; margin-bottom: 4px; font: 700 10px/1 var(--chrome); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.taskboard .pings .ping { font: 12px var(--data); padding: 2px 0; }
.taskboard .pings .pingscroll { max-height: 260px; overflow: auto; margin: 4px 0 6px; }
.taskboard .pings .pingtable { border-collapse: collapse; width: 100%; font: 12px var(--data); }
.taskboard .pings .pingtable th { position: sticky; top: 0; background: var(--panel); text-align: left; font: 700 10px/1.6 var(--chrome); color: var(--amber); padding: 2px 8px 2px 0; }
.taskboard .pings .pingtable td { padding: 2px 8px 2px 0; border-top: 1px solid rgba(240,160,42,.15); vertical-align: middle; }
.taskboard .pings .pingtable td.when { white-space: nowrap; width: 1%; }
.taskboard .pings .pingtable .cmd { padding: 1px 8px; font-size: 11px; }
.taskboard .pings b.completedhead { margin-top: 10px; color: var(--ink-dim); }
/* Check-in: the tablet at the door. Large touch targets throughout — this is read at arm's
   length in a loading dock, not typed into at a desk. */
.checkinprogress { margin: 0 0 10px; font: 600 12px var(--data); color: var(--ink-dim); }
.checkinprogress.complete { color: var(--amber); }
.checkinroster { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.checkinrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: #0e1114; border: 1px solid var(--seam); }
.checkinrow.marked.present { border-left: 3px solid #3fae5a; }
.checkinrow.marked.absent { border-left: 3px solid #ff6b7a; }
.checkinrow.marked.lost { border-left: 3px solid #e0a83d; }
.checkinwho { display: flex; flex-direction: column; gap: 2px; }
.checkinwho b { font: 600 13.5px var(--data); }
.checkinbuttons { display: flex; gap: 6px; }
.checkinmark { padding: 8px 14px; min-height: 38px; }
.checkinmark.active.present { background: #1d2a19; border-color: #3fae5a; color: #7fe39a; }
.checkinmark.active.absent { background: #33161a; border-color: #ff6b7a; color: #ff9aa4; }
.checkinmark.active.lost { background: #332813; border-color: #e0a83d; color: #ffcf7e; }
.checkinstats { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--seam); }
.checkinstats h4 { margin: 0 0 6px; font: 700 11px/1 var(--chrome); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.subtable td.num { text-align: right; }
.subtable td.warn { color: #ff8f9b; }
/* Chat: the show's Google Chat space in the app. */
.chatpanel { display: flex; flex-direction: column; height: calc(100vh - 140px); padding: 10px 14px; gap: 8px; }
.chatpanel .chathead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.chatpanel .chathead b { font: 700 13px var(--chrome); }
.chatpanel .chatmanage { display: flex; gap: 6px; }
.chatpanel .chatlist { flex: 1; min-height: 120px; overflow: auto; padding: 8px 10px; background: #0e1114; border: 1px solid var(--seam); }
.chatpanel .chatline { padding: 6px 0; border-bottom: 1px solid var(--seam); font: 12.5px var(--data); }
.chatpanel .chatline.mine .by { color: var(--amber); }
.chatpanel .chatline .by { font: 10.5px var(--chrome); color: var(--ink-faint); }
.chatpanel .chatline .text { white-space: pre-wrap; }
.chatpanel .chatsend { display: flex; gap: 8px; align-items: flex-end; }
.chatpanel .chattext { flex: 1; padding: 8px; font: 12.5px var(--data); background: #0e1114; color: var(--ink); border: 1px solid var(--seam); resize: vertical; }


/* Trucking › Dispatch */
.dispatch .dockpin { margin: 6px 0 4px; padding: 10px 14px; background: var(--panel, #171b20); border: 1px solid var(--seam, #2a2f36); }
.dispatch .dockpin h3 { margin: 0 0 6px; }
.dispatch .drow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0; }
.dispatch .scalar.wide { flex: 1; min-width: 320px; }
.dispatch .scalar.short { width: 92px; }
.dispatch .pinsuggest .suggestion { display: flex; align-items: center; gap: 10px; padding: 4px 0; font: 11.5px var(--data); }
.dispatch .pinsuggest .suggestion em { color: var(--ink-dim); font-style: normal; }
.dispatch .dispatchgrid td { vertical-align: middle; }
.dispatch .dispatchgrid input.scalar, .dispatch .dispatchgrid select.scalar { width: 100%; min-width: 0; }
.dispatch .dispatchgrid td:nth-child(4) { min-width: 200px; }
.dispatch .dispatchgrid td:nth-child(5) { min-width: 130px; }
.dispatch .dispatchgrid td:nth-child(6) { min-width: 120px; }
.dispatch .composed a.cmd { color: var(--ink); text-decoration: none; }
.dispatch .dstatus { font: 11.5px var(--data); }
.dispatch .dstatus.moving { color: #3fbf6a; }
.dispatch .dstatus.done { color: #5bc0eb; }
.dispatch .dstatus.help, .dispatch tr.help td { color: #ff6b7a; font-weight: 700; }
.dispatch .composed { margin: 8px 0; padding: 10px 14px; background: var(--panel, #171b20); border: 1px solid var(--amber-hi, #f0a02a); }
.dispatch .composed h4 { margin: 0 0 6px; }
.dispatch .composedtext { width: 100%; font: 12px var(--data); background: #0b0e11; color: var(--ink); border: 1px solid var(--seam, #2a2f36); padding: 8px; }
.dispatch .drivedot { width: 8px; height: 8px; border-radius: 50%; background: var(--seam-bright); flex: none; }
/* Dispatch's two tabs, and what a send shows before it goes (2026-10-03). */
.dispatch .dispatchtabs { display: flex; gap: 2px; margin: 0 0 8px; }
.dispatch .dockask { margin-top: 4px; font: 11.5px var(--data); color: var(--amber, #f0a02a); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dispatch .composedone { margin: 6px 0; }
.dispatch .sendwarnings.now { margin: 6px 0; }
.sendwarnings .sendwarn, .dispatch .sendwarn { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0; padding: 8px 10px; border: 1px solid #b3261e; background: rgba(179, 38, 30, .12); color: var(--ink); font-size: 13px; }
.sendwarnings .sendwarn.noTrucks, .dispatch .sendwarn.noTrucks { border-color: var(--amber, #f0a02a); background: rgba(240, 160, 42, .1); }
.sendwarnings label.sendwarn { cursor: pointer; }
.sendwarnings label.sendwarn span { flex: 1; }
.sendwarnings label.sendwarn b { white-space: nowrap; font-size: 12px; }
.sendwarnings label.sendwarn input { margin-top: 2px; width: 18px; height: 18px; flex: none; }
.askbox.sendcheck { width: min(640px, calc(100vw - 32px)); }
.askbox.sendcheck .composedtext { width: 100%; font: 12px var(--data); background: #0b0e11; color: var(--ink); border: 1px solid var(--seam, #2a2f36); padding: 8px; }
.askbox.sendcheck .sendlist { max-height: 40vh; overflow: auto; padding-left: 18px; }
.askbox.sendcheck .sendtext { white-space: pre-wrap; font: 12px var(--data); color: var(--ink-dim); margin: 2px 0 8px; }
/* Read drivers: every individual, their trips to tick, then how to group them (2026-10-03). */
.askbox.driversimport { width: min(980px, calc(100vw - 32px)); }
.askbox.driversimport .composedtext { width: 100%; font: 12px var(--data); background: #0b0e11; color: var(--ink); border: 1px solid var(--seam, #2a2f36); padding: 8px; }
.askbox.driversimport .driverreads { max-height: 48vh; overflow: auto; margin: 6px 0; }
.askbox.driversimport .driverread { padding: 6px 0; border-bottom: 1px solid var(--seam, #2a2f36); }
.askbox.driversimport .driverread .drow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.askbox.driversimport .newdriver { color: var(--amber, #f0a02a); font-weight: 700; font-size: 12px; }
.askbox.driversimport .tripmatches { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 0 26px; font: 11.5px var(--data); }
.askbox.driversimport .tripmatch { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.askbox.driversimport .groupings { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; padding: 8px 10px; border: 1px solid var(--amber, #f0a02a); }
.askbox.driversimport .groupings .drow { display: flex; gap: 8px; align-items: center; }
.askbox.driversimport .groupchoice { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.askbox.sendcheck .sendenglish { white-space: pre-wrap; font: 12px var(--data); color: var(--ink-dim); }
.dispatch .drivedot.on { background: #3fbf6a; box-shadow: 0 0 6px rgba(63,191,106,.7); }

/* The captcha on the forms a stranger can reach: the sum in words, its answer, another sum. */
.captchafield { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; }
.captchafield .captchaq { font: 12px var(--chrome); color: var(--ink); }
.captchafield .captchaanswer { width: 90px; }
.askticket .captchafield { margin-top: 2px; }

/* ---- quick navigation: the core places one tap away ---- */
.quicknav { display: flex; align-self: center; gap: 2px; margin: 0 8px; min-width: 0; flex-wrap: nowrap; }
/* Three buttons on the tab strip have room for their glyphs at every laptop width. */
.quicknav[hidden] { display: none; }
.quicknav button {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px;
  border: 1px solid var(--seam); background: transparent; color: var(--ink-dim); cursor: pointer;
  font: 600 9.5px/1 var(--chrome); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
}
.quicknav button i { font-style: normal; font-size: 11px; color: var(--ink-faint); }
.quicknav button:hover { color: var(--ink); background: var(--panel-hi); }
.quicknav button[aria-current="true"] { color: var(--amber-hi); border-color: var(--amber-lo); }
.quicknav button[aria-current="true"] i { color: var(--amber); }
.quicknav button em { font-style: normal; font: 700 9px/1 var(--data); color: #ff6b7a; }
.quicknav button em[hidden] { display: none; }
.quicknav button.phone { display: none; }
@media (max-width: 900px) {
  /* A bar along the bottom of the phone, thumb-height, Menu opening the rail's drawer. */
  .titlebar .quicknav {
    /* Above the rail's drawer and its shade, so the bar answers with the menu open. */
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; margin: 0; gap: 0;
    height: 54px; padding: 0 0 env(safe-area-inset-bottom); justify-content: space-around;
    background: var(--plate); border-top: 1px solid var(--seam-bright); box-shadow: 0 -10px 30px rgba(0,0,0,.45);
  }
  .quicknav button { flex: 1 1 0; flex-direction: column; justify-content: center; gap: 3px; height: 100%; padding: 0 2px; border: 0; border-top: 2px solid transparent; font-size: 8.5px; letter-spacing: .06em; }
  .titlebar .quicknav button i { display: block; font-size: 17px; }
  .quicknav button[aria-current="true"] { border-top-color: var(--amber); background: transparent; }
  .quicknav button.phone { display: inline-flex; }
  .quicknav button em { position: absolute; margin: -22px 0 0 26px; }
  /* The corners move up over the bar. */
  body { padding-bottom: 54px; }
  .renderpill { bottom: 96px; }
  .ticketbutton { bottom: 62px; right: calc(10px + var(--assist-w, 0px) + var(--chat-w, 0px)); }
  .footer { bottom: 54px; }
  .rail, body.railshut .rail { bottom: 54px; }
  main { padding-bottom: 80px; }
}

/* Labor › Positions, the approved budget, the hours and payroll panels, restore points */
.positionsheld .holder { display: inline-flex; align-items: center; gap: 4px; margin: 0 8px 2px 0; padding: 1px 6px; border: 1px solid var(--seam); font: 11px var(--data); }
.positionsheld .holder .scopetoggle { padding: 0 4px; }
.positionsheld tr.unfilled td.over { color: #ff6b7a; }
.approvedbudget, .hourspanel, .payrollpanel { margin-top: 12px; }
/* Labor › Budget's three sections (the owner, 2026-10-07: Billable, Payable, Profit): each headed and marked, the client-facing one in the amber. */
.budgetsees { margin: 8px 0 0; }
.budgethead { margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--seam); }
.budgethead h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 4px; }
.budgethead .keyhint { margin: 0 0 10px; }
.budgettag { font: 600 9.5px/1 var(--chrome); letter-spacing: .2em; text-transform: uppercase; padding: 4px 8px; border: 1px solid var(--seam-bright); color: var(--ink-dim); }
.budgettag.client { color: var(--amber-hi); border-color: var(--amber-lo); }
.budgetarithmetic { margin-top: 12px; }
.budgetarithmetic .drow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.approvedbudget .drow, .hourspanel .drow, .payrollpanel .drow, .restorepanel .drow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.approvedbudget .deptbudget td.num { padding: 2px 8px; }
.approvedbudget .deptbudget .scalar.short { width: 90px; }
.scalar.short { width: 110px; }

/* The Assistant's document: attached from the phone or by a link, then the instructions. */
.assistantattach { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.assistantattach .attachment { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid var(--amber-lo); font: 11px var(--data); color: var(--ink); }
.assistantattach .attachment .scopetoggle { padding: 0 4px; }

/* ---- late mobile overrides: these must win over unconditional rules that appear even
   later in the file (equal specificity, later source wins) --------------------------- */
@media (max-width: 900px) {
  /* A department's $ field, kept a deliberately narrow 90px box on a laptop, fills its
     own table cell once the sheet is scrolling sideways to fit a phone. */
  .approvedbudget .deptbudget .scalar.short, .scalar.short, .dispatch .scalar.short { width: 100%; }
  .accountspanel .drow .scalar { min-width: 0; }
  /* The feature-request button's full label wraps into a compact block instead of a long
     strip, so it no longer needs to borrow the width the "last edited" footer is reading
     into (the owner's screenshot, 2026-09-18: the button sat over that text). */
  .ticketbutton { max-width: 92px; white-space: normal; text-align: center; line-height: 1.25; padding: 6px 8px; }
}

/* ---- the Assistant as a floating widget, bottom-right of every page --------------------
   Built once, never torn down by navigation (unlike everything the section render owns),
   sitting above the render-status and print-notice pills so neither stack ever collides
   with the other (the owner, 2026-09-18). */
.assistwidget { position: fixed; right: 22px; bottom: 18px; z-index: 93; }
/* A pill in the app's amber, dark type on it for contrast, lifted off the page (the owner,
   2026-09-18: "more modern, a bit of contrast in colour, and should float"). */
/* Lumen's button: a dark glass pill with an amber ring, a chat bubble in a lit circle and the
   name — the way a support chat sits in a corner, not an orange rectangle (the owner,
   2026-09-18). */
.assistfab {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px 7px 7px; border: 2px solid rgba(255,196,107,.55); border-radius: 999px;
  /* Glass over the sheet, not a dark slab (the owner, 2026-09-29: the corner's buttons float
     over the spreadsheets, "it doesn't need a dark background"); opaque again on hover and
     while its panel is open. */
  background: linear-gradient(180deg, rgba(34,38,46,.74), rgba(20,22,28,.78)); color: #ffd9a3;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 800 12px/1 var(--chrome); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.25), 0 0 16px rgba(255,138,31,.18), 0 1px 0 rgba(255,255,255,.08) inset;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.assistfabicon {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: #1a1206;
  background: linear-gradient(135deg, #ffd27a 0%, var(--amber) 55%, #ff6a00 100%);
  box-shadow: 0 0 0 3px rgba(255,138,31,.18), 0 4px 10px rgba(0,0,0,.4);
}
.assistfab::after { content: ''; position: absolute; inset: -2px; border-radius: 999px; border: 2px solid rgba(255,196,107,.45); animation: fabring 2.6s ease-out infinite; pointer-events: none; }
.assistfab { position: relative; }
@keyframes fabring { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(1.22); opacity: 0; } }
.assistfab:hover, .assistfab[aria-expanded="true"] { background: linear-gradient(180deg, rgba(34,38,46,.96), rgba(20,22,28,.98)); }
.assistfab:hover { transform: translateY(-2px); border-color: rgba(255,196,107,.9); box-shadow: 0 20px 40px rgba(0,0,0,.65), 0 0 30px rgba(255,138,31,.4), 0 1px 0 rgba(255,255,255,.08) inset; }
.assistfab[aria-expanded="true"] { border-color: var(--amber); }
.assistfab[aria-expanded="true"]::after { animation: none; opacity: 0; }
/* The panel: a thicker amber border and rounder corners (the owner, 2026-09-18). */
.assistwidgetpanel {
  position: absolute; right: 0; bottom: calc(100% + 14px); width: 410px;
  max-height: min(74vh, 620px); display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, #1b1f26 0%, var(--panel) 100%); border: 3px solid rgba(255,196,107,.55); border-radius: 24px;
  box-shadow: 0 34px 80px rgba(0,0,0,.78), 0 0 28px rgba(255,138,31,.18), 0 1px 0 rgba(255,255,255,.06) inset;
}
.assistwidgetpanel[hidden] { display: none; }
.assistwidgethead {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03); font: 800 11px/1 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
}
.assistwidgethead::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 10px rgba(255,138,31,.8); }
.assistwidgetapp { flex: 1; color: var(--amber-hi); font-size: 9.5px; letter-spacing: .18em; }
.assistwidgetclose {
  width: 26px; height: 26px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.06); border: 0; color: var(--ink-dim);
  font: 700 14px/26px var(--chrome); cursor: pointer;
}
.assistwidgetclose:hover { color: var(--ink); background: rgba(255,255,255,.12); }
/* The reused .labor/.assistant tree, scaled to a floating panel rather than a full page. */
.assistwidgetpanel .labor { padding: 10px 14px 12px; overflow-y: auto; flex: 1; }
.assistwidgetpanel .assistant { padding: 0; max-width: none; }
.assistwidgetpanel .assistantthread { max-height: 260px; border: 0; padding: 6px 0; }
/* The bubbles are the base `.assistantsay` rules above; the panel only rounds its controls. */
.assistwidgetpanel .assistantinput { border-radius: 999px; padding: 8px 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.assistwidgetpanel .clockrow .cmd, .assistwidgetpanel .assistantattach .cmd, .assistwidgetpanel .assistantcard .cmd { border-radius: 999px; }
.assistwidgetpanel .assistantcard { border-radius: 12px; border-color: rgba(255,196,107,.3); background: rgba(255,138,31,.07); }
@media (max-width: 900px) {
  .assistwidget { right: 10px; bottom: 62px; }
  .assistwidgetpanel { width: calc(100vw - 20px); max-width: 410px; }
}

/* ---- Chat as its own floating widget, beside Lumen (the owner, 2026-09-18: out of the
   ribbon and the rail, "another floating thing next to Lumen, except it should just be
   chat"), reachable wherever a show is open. One slot further from the corner than the
   Assistant, using --assist-w the way the ticket button already does; --chat-w in turn
   pushes everything to Chat's own left. The header and close button reuse the Assistant
   widget's — the same floating-panel chrome, not two implementations of it. Plainer than
   Lumen's fab on purpose (no glow ring): this is a conversation with people, not the AI. */
.chatwidget { position: fixed; right: calc(22px + var(--assist-w, 0px)); bottom: 18px; z-index: 93; }
.chatfab {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 18px 7px 7px; border: 2px solid rgba(255,196,107,.35); border-radius: 999px;
  background: linear-gradient(180deg, rgba(34,38,46,.74), rgba(20,22,28,.78)); color: var(--ink);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 800 12px/1 var(--chrome); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.08) inset;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.chatfabicon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: var(--amber); background: var(--panel-hi); }
.chatfab:hover, .chatfab[aria-expanded="true"] { background: linear-gradient(180deg, rgba(34,38,46,.96), rgba(20,22,28,.98)); }
.chatfab:hover { transform: translateY(-2px); border-color: rgba(255,196,107,.7); box-shadow: 0 20px 40px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.08) inset; }
.chatfab[aria-expanded="true"] { border-color: var(--amber); }
.chatwidgetpanel {
  position: absolute; right: 0; bottom: calc(100% + 14px); width: 410px;
  max-height: min(74vh, 620px); display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, #1b1f26 0%, var(--panel) 100%); border: 3px solid rgba(255,196,107,.55); border-radius: 24px;
  box-shadow: 0 34px 80px rgba(0,0,0,.78), 0 0 28px rgba(255,138,31,.18), 0 1px 0 rgba(255,255,255,.06) inset;
}
.chatwidgetpanel[hidden] { display: none; }
/* The reused .chatpanel tree, scaled to a floating panel rather than a full page. */
.chatwidgetpanel .chatpanel { height: auto; flex: 1; min-height: 0; }
@media (max-width: 900px) {
  .chatwidget { right: calc(10px + var(--assist-w, 0px)); bottom: 62px; }
  /* The panel is nearly the full viewport wide here, so it must not also inherit the
     button's own --assist-w offset (there to keep the two fabs from overlapping) on top of
     that — the two together pushed the panel's left edge off-screen, truncating everything
     in it. Shifting back by the same amount lands its right edge at 10px from the viewport,
     exactly where Lumen's own panel sits. */
  .chatwidgetpanel { right: calc(-1 * var(--assist-w, 0px)); width: calc(100vw - 20px); max-width: 410px; }
}

/* ---- what an import says is wrong with a row; the book's panel under Settings › Contacts ---- */
.importwiz em.issue, .contactsbook em.issue { display: block; margin-top: 2px; font: 11px/1.4 var(--data); font-style: normal; color: #ff8a94; }
.contactsbook { margin-top: 16px; }
.contactsbook h4 { margin: 14px 0 6px; font: 700 10.5px/1 var(--chrome); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.contactsbook .result { display: inline-block; margin-top: 8px; font: 11px var(--data); color: var(--amber-hi); }
.contactsbook .result.failed { color: #ff6b7a; }
.assistantcard.confirmcard { border-color: var(--amber); }
/* What the Electrics side looked up on the way to an answer — "spare circuits (L5)" — under the answer, dim. */
.assistantsay .assistantlooked { display: block; max-width: 88%; margin-top: 2px; padding: 0 12px; background: none; font: 10px/1.4 var(--data); color: var(--ink-faint); }
/* The paperwork an answer hands over — the trucking schedule, a bill of lading, a contents list: a link each, Print beside a PDF. */
.assistantsay .assistantlinks { display: flex; flex-direction: column; gap: 4px; max-width: 88%; margin-top: 2px; }
.assistantsay .assistantlink { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.assistantsay .assistantlink .cmd {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border: 1px solid var(--amber-lo); border-radius: 999px;
  background: rgba(255,138,31,.07); color: var(--amber-hi); font: 600 11.5px/1.35 var(--data); text-decoration: none; text-align: left; cursor: pointer;
}
.assistantsay .assistantlink .cmd:hover { border-color: var(--amber); background: rgba(255,138,31,.15); }
.assistantsay .assistantlink .cmd:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.assistantsay .assistantlink button.cmd { padding: 4px 10px; border-color: var(--seam); background: transparent; color: var(--ink-dim); font: 600 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; }
.assistantsay .assistantlink .linkkind { font: 700 8.5px/1 var(--chrome); font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
/* Lumen's answer as paragraphs, lists and worksheets (`answerNode` in web/labor.js; the owner, 2026-10-28): a table is a small
   sheet whose rows scroll under a held heading, with Copy and Excel under it — never a page of pipes. */
.assistantsay .assistantrich { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.assistantsay .assistantrich p { margin: 0; }
.assistantsay .assistantrich ul { margin: 0; padding-left: 18px; }
.assistantsay .assistantrich li { margin: 1px 0; }
.assistantsay .assistantrich strong { font-weight: 700; color: var(--ink); }
.assistantsay .assistanttable { display: flex; flex-direction: column; gap: 5px; max-width: 100%; margin: 2px 0; padding: 6px; border: 1px solid var(--seam-bright); border-radius: 8px; background: var(--panel); }
.assistantsay .assistanttablehead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.assistantsay .assistanttablehead strong { font: 700 11px/1.3 var(--data); color: var(--amber-hi); }
.assistantsay .assistanttablehead small { font: 10px/1.3 var(--data); color: var(--ink-faint); white-space: nowrap; }
.assistantsay .assistanttablescroll { max-height: 240px; overflow: auto; overscroll-behavior: contain; }
.assistantsay .assistanttable table { width: 100%; border-collapse: separate; border-spacing: 0; font: 11px/1.35 var(--data); }
.assistantsay .assistanttable th { position: sticky; top: 0; z-index: 1; padding: 3px 7px; border-bottom: 1px solid var(--seam-bright); background: var(--panel-hi); color: var(--amber); text-align: left; font: 700 9.5px/1.3 var(--chrome); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.assistantsay .assistanttable td { padding: 2px 7px; border-bottom: 1px solid var(--seam); color: var(--ink); white-space: nowrap; }
.assistantsay .assistanttable .num { text-align: right; font-variant-numeric: tabular-nums; }
.assistantsay .assistanttable tr.total td { font-weight: 700; color: var(--amber-hi); }
.assistantsay .assistanttablecmds { display: flex; gap: 6px; }
.assistantsay .assistanttablecmds .cmd { padding: 3px 11px; border: 1px solid var(--amber-lo); border-radius: 999px; background: rgba(255,138,31,.07); color: var(--amber-hi); font: 600 9.5px/1.6 var(--chrome); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.assistantsay .assistanttablecmds .cmd:hover { border-color: var(--amber); background: rgba(255,138,31,.15); }
.assistantsay .assistanttablecmds .cmd:disabled { opacity: .6; cursor: progress; }

/* ---- Settings › Connections: who sets a service up, and how ---- */
.driveblock .drivehead.off .setup { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.driveblock .drivehead.off .cmd { padding: 3px 9px; }
.driveblock .drivehead.off a.cmd { text-decoration: none; }
.driveblock .whodoes { margin: 0 0 6px; padding: 8px 12px; border-left: 3px solid var(--amber); background: rgba(255,138,31,.07); font: 12px/1.55 var(--data); color: var(--ink); }
.askbox.asksetup { max-width: 660px; width: min(660px, calc(100vw - 32px)); }
.askbox.asksetup .who { flex: 1 0 100%; padding: 8px 12px; border-left: 3px solid var(--amber); background: rgba(255,138,31,.07); font: 12px/1.55 var(--data); color: var(--ink); }
.askbox.asksetup ol { flex: 1 0 100%; margin: 6px 0 8px 18px; padding: 0; font: 12px/1.55 var(--data); color: var(--ink); }
.askbox.asksetup li { margin: 0 0 8px; }
.askbox.asksetup code { display: block; margin: 4px 0 0; padding: 6px 8px; background: var(--ground); border: 1px solid var(--seam); font: 11px/1.5 var(--data); color: var(--amber-hi); white-space: pre-wrap; word-break: break-all; }
.askbox.asksetup a.cmd { text-decoration: none; }

/* ---- Management: Heavy Equipment's charging/storage page (its own page, not a pop-up) ---- */
.heavystorage { padding: 4px 2px 16px; max-width: 640px; }
.heavystorage textarea.askfield {
  display: block; width: 100%; box-sizing: border-box; padding: 8px 10px; margin: 4px 0 10px;
  background: #0e1114; border: 1px solid var(--seam); color: var(--ink); font: 12.5px/1.5 var(--data); resize: vertical;
}
.heavystorage h4 { margin: 0 0 4px; font: 700 10.5px/1 var(--chrome); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }

/* ---- Management: Meals' detail panel and settings block (plain pages, not pop-ups) ----
   The wizard's askfield/deptrow/asktick rules are all `.askbox`-scoped (see askmachine
   above); departmentChecklist and the "Suggested" pill are reused here outside any askbox,
   so the same look needs its own scoped copy rather than inheriting nothing. */
.mealdetail { margin-top: 16px; }
.mealdetailrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 10px 14px; margin-bottom: 8px;
  background: var(--panel); border: 1px solid var(--seam);
}
.mealdetailrow .mealname { min-width: 56px; }
.mealdetailrow .deptrow { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.mealdetailrow .deptrow .asktick { flex-direction: row; align-items: center; gap: 6px; }
.mealdetailrow .mealwindow, .mealdetailrow .mealoverage { display: flex; align-items: center; gap: 6px; }
.mealdetailrow .keyhint { margin: 0; }
.mealdetailrow .keyhint.dietary { color: var(--amber-hi); }
.mealdetailrow .askfield, .mealsettings .askfield {
  padding: 5px 8px; background: #0e1114; border: 1px solid var(--seam);
  color: var(--ink); font-family: var(--data); font-size: 11.5px; width: 130px;
}
.mealdetailrow .askfield.narrow { width: 58px; }
.mealdetailrow .askfield.short { width: 112px; }
/* Who a meal is for: the departments, rooms and people called out, and the list it comes to (the owner, 2026-10-16). */
.mealdetailrow .mealaudience { display: flex; align-items: center; gap: 8px; }
.askbox.askmealfor .asktick { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.askbox.askmealfor .mealfornarrow[hidden] { display: none; }
.askbox.askmealfor .mealforblock { margin: 10px 0 0; }
.askbox.askmealfor .mealforblock h5 { margin: 0 0 4px; font: 700 10.5px/1.4 var(--chrome); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.askbox.askmealfor .mealforticks { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.askbox.askmealfor { width: min(860px, calc(100vw - 32px)); max-width: none; display: block; }
.askbox.askmealfor .mealforlist { max-height: 42vh; overflow: auto; margin: 4px 0 8px; }
.askbox.askmealfor .mealforlist table { width: 100%; }
.askbox.askmealfor .mealforlist tr:not(.mealin) td { opacity: .55; }
.askbox.askmealfor .mealforcount { margin-left: 8px; color: var(--amber); text-transform: none; letter-spacing: 0; }
.askbox.askmealfor .mealforquick { margin-top: 10px; gap: 8px; }
.mealdetailrow .mealpeople { display: flex; align-items: flex-start; gap: 8px; }
.mealdetailrow .mealpeople .askfield.pickinput { width: 260px; }
.mealdetailrow .meallist { flex: 1 0 100%; }
.mealdetailrow .meallist summary { cursor: pointer; color: var(--ink-dim); font-size: 12px; }
.mealdetailrow .meallisttable td.dietary { font-weight: 700; }
.mealdetailrow .cmd.mealtickets, .mealdetail .cmd.mealtickets {
  padding: 4px 10px; font: 700 10px/1.4 var(--chrome); letter-spacing: .08em; text-transform: uppercase;
  color: var(--amber); background: var(--plate, #1a1e22); border: 1px solid var(--seam); cursor: pointer;
}
.mealdetailrow .cmd.mealtickets:hover { color: var(--ground); background: var(--metal); }
.mealsettings .drow { display: flex; align-items: center; gap: 8px; margin: 8px 0 16px; }

/* ---- the Library: the show's documents, and the viewer that reads them (the owner, 2026-09-24) ---- */
.library .libhint { max-width: 900px; margin: 4px 0 10px; }
.library .libwrap { max-width: 100%; overflow-x: auto; }
table.librarylist { border-collapse: collapse; width: 100%; font-size: 12px; }
table.librarylist th { text-align: left; padding: 6px 10px; font: 700 9.5px/1.6 var(--chrome); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); border-bottom: 1px solid var(--seam); }
/* The app's table rules assume a data grid: one-line rows and a header stuck 49px down a scrolling page. This is a list. */
table.librarylist thead th { position: static; }
table.librarylist td { padding: 8px 10px; border-bottom: 1px solid var(--seam); vertical-align: top; height: auto; white-space: normal; line-height: 1.4; }
/* The command buttons, styled as the toolbar's are (`.commands .cmd`), here and in the viewer. */
table.librarylist .cmd, .libviewer .cmd {
  display: inline-block; padding: 7px 12px; border: 0; background: var(--plate); color: var(--amber);
  font: 600 9.5px/1 var(--chrome); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; white-space: nowrap; box-sizing: border-box;
}
table.librarylist .cmd:hover, .libviewer .cmd:hover { color: var(--ground); background: var(--metal); }
table.librarylist .cmd.dismiss, .libviewer .cmd.dismiss { background: transparent; border: 1px solid var(--seam); color: var(--ink-faint); padding: 6px 11px; }
table.librarylist .cmd.dismiss:hover, .libviewer .cmd.dismiss:hover { color: var(--ink); border-color: var(--seam-bright); background: transparent; }
.libviewer .libtabs .cmd[aria-pressed="true"] { background: var(--plate); color: var(--amber); border: 0; padding: 7px 12px; }
table.librarylist td.num { text-align: right; white-space: nowrap; font-family: var(--data); }
table.librarylist td.libactions { white-space: nowrap; text-align: right; }
table.librarylist td.libactions .cmd { margin-left: 4px; }
table.librarylist .libname { font: inherit; font-weight: 600; color: var(--amber-hi); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
table.librarylist .libname:hover, table.librarylist .libname:focus-visible { text-decoration: underline; outline: none; }
table.librarylist td .keyhint { display: block; margin: 3px 0 0; line-height: 1.3; }
.libviewer {
  position: fixed; inset: 18px 24px; z-index: 95; display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--seam); box-shadow: 0 0 60px rgba(0,0,0,.75);
}
.libviewer .libbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--seam); background: var(--ground); flex: 0 0 auto; }
.libviewer .libtitle { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.libviewer .libtitle b { font: 600 13px var(--chrome); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.libviewer .libtitle .keyhint { margin: 0; }
.libviewer .libcmds { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; flex: 0 0 auto; }
.libviewer .libbody { flex: 1 1 auto; overflow: auto; padding: 10px 12px; -webkit-overflow-scrolling: touch; }
.libviewer .libpdf, .libviewer .libframe { width: 100%; height: 100%; min-height: 60vh; border: 0; background: #fff; }
.libviewer .libpdf { display: flex; flex-direction: column; gap: 8px; background: none; }
.libviewer .libpdf .keyhint { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.libviewer .libimagewrap { text-align: center; }
.libviewer .libimage { max-width: 100%; height: auto; }
.libviewer .libtabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.libviewer .libcut { margin: 0 0 6px; }
.libviewer .libsheetwrap { overflow: auto; max-width: 100%; border: 1px solid var(--seam); }
table.libsheet { border-collapse: collapse; font-family: var(--data); font-size: 11.5px; }
table.libsheet th, table.libsheet td { padding: 2px 7px; border-right: 1px solid var(--seam); border-bottom: 1px solid var(--seam); white-space: nowrap; max-width: 360px; overflow: hidden; text-overflow: ellipsis; text-align: left; color: var(--ink); }
table.libsheet thead th { position: sticky; top: 0; background: var(--ground); color: var(--ink-dim); font: 700 9.5px/1.8 var(--chrome); letter-spacing: .08em; text-align: center; z-index: 1; }
table.libsheet tbody th { position: sticky; left: 0; background: var(--ground); color: var(--ink-faint); font-weight: 400; text-align: right; }
table.libsheet th.corner { left: 0; z-index: 2; }
.libviewer .libtext { margin: 0; white-space: pre-wrap; word-break: break-word; font: 12.5px/1.5 var(--data); color: var(--ink); }
.libviewer .libslide { margin: 0 0 14px; padding: 0 0 10px; border-bottom: 1px solid var(--seam); }
.libviewer .libslide h4 { margin: 0 0 4px; font: 700 10px/1.6 var(--chrome); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
@media (max-width: 900px) {
  .libviewer { inset: 0; border: 0; }
  .libviewer .libbar { flex-direction: column; align-items: stretch; }
  .libviewer .libcmds { justify-content: flex-start; }
  table.librarylist td.libactions { text-align: left; white-space: normal; }
  table.librarylist td.libactions .cmd { margin: 0 4px 4px 0; }
}

/* ---- a fill-as-you-type picker: who gets the catering forms (the owner, 2026-09-24) ---- */
.people.pick { display: block; }
.pickchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 8px; align-items: center; }
.pickchip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 4px 3px 9px; border: 1px solid var(--seam-bright); background: var(--panel); font-size: 11.5px; }
.pickchip b { color: var(--ink); font-weight: 600; }
.pickchip > span { color: var(--ink-faint); font-family: var(--data); font-size: 10.5px; }
.pickrow { position: relative; max-width: 480px; margin: 4px 0 6px; }
/* The meals form's own field width is for a time or a count; the picker's box takes the row. */
.pickrow .pickinput, .mealsettings .askfield.pickinput { width: 100%; max-width: 480px; box-sizing: border-box; }
.people.pick .keyhint.short { display: block; margin: 8px 0 0; }
.picklist { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--seam-bright); box-shadow: 0 12px 30px rgba(0,0,0,.6); max-height: 260px; overflow-y: auto; }
.picklist[hidden] { display: none; }
.pickoption { display: flex; justify-content: space-between; gap: 10px; padding: 7px 10px; background: none; border: 0; border-bottom: 1px solid var(--seam); color: var(--ink); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.pickoption b { font-weight: 600; }
.pickoption span { color: var(--ink-faint); font-family: var(--data); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pickoption.on, .pickoption:hover { background: #191d23; box-shadow: inset 2px 0 0 var(--amber); }

/* Lumen's panel: Minimise beside Close (the owner, 2026-09-24). */
.assistwidgetmin { font-size: 17px; }
/* Lumen at work while the panel is away: a band of light chasing round the button ("like the spinning wheel but smoother"). */
@property --chase { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.assistfab.working:not([aria-expanded="true"])::after {
  inset: -3px; border: 0; padding: 2px; opacity: 1;
  background: conic-gradient(from var(--chase), transparent 0 58%, rgba(255,196,107,.18) 66%, var(--amber) 90%, rgba(255,255,255,.6) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: fabchase 1.4s linear infinite;
}
@keyframes fabchase { to { --chase: 360deg; } }
/* An email forwarded to Lumen waits for this person (the owner, 2026-10-07: "flash or pulse brightly"): the button glows and pulses, the count on its shoulder. */
.assistfab.hasmail:not([aria-expanded="true"]) { border-color: #ffe0a8; animation: fabmail 1.3s ease-in-out infinite; }
@keyframes fabmail {
  0%, 100% { box-shadow: 0 6px 16px rgba(0,0,0,.25), 0 0 14px rgba(255,138,31,.35); }
  50% { box-shadow: 0 6px 16px rgba(0,0,0,.25), 0 0 34px 8px rgba(255,170,60,.85); transform: scale(1.05); }
}
.assistfabcount {
  position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: #ff4d2e; color: #fff; font: 800 11px/20px var(--chrome); letter-spacing: 0; text-align: center;
  box-shadow: 0 0 0 2px rgba(20,22,28,.9);
}
.assistfabcount[hidden] { display: none; }
.lumenmailcard .lumenmailask { width: 100%; box-sizing: border-box; margin: 8px 0 4px; resize: vertical; font: inherit; }
@media (prefers-reduced-motion: reduce) { .assistfab.hasmail:not([aria-expanded="true"]) { animation: none; box-shadow: 0 0 30px 6px rgba(255,170,60,.8); } }
/* A failed Apply in the import wizard says so where it cannot be missed. */
.askbox.askwizard .asktrouble.loud { display: block; color: #ffb3b3; background: rgba(255,90,90,.12); border: 1px solid rgba(255,90,90,.45); padding: 8px 10px; border-radius: 6px; font-style: normal; font-weight: 600; margin: 8px 0; }
/* Merge on a possible duplicate: which spelling stands. */
.spellpick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.spellpick[hidden] { display: none; }
.spellpick .spellopt { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--ink); cursor: pointer; font: inherit; }
.spellpick .spellopt small { font-size: 10px; color: var(--ink-dim); }
.spellpick .spellopt.on { border-color: var(--amber); background: rgba(255,138,31,.14); }

/* Settings: find a setting by typing (the owner, 2026-09-24). */
.adminsearch { width: 100%; box-sizing: border-box; padding: 8px 10px; background: var(--panel); border: 0; border-bottom: 1px solid var(--seam); color: var(--ink); font: inherit; font-size: 12px; outline: none; }
.adminsearch:focus { box-shadow: inset 3px 0 0 var(--amber); }
.adminsearch::placeholder { color: var(--ink-faint); }
.admingroupbox[hidden] { display: none; }
.publishpanel .people.pick { display: block; }

/* The column filter after Excel's menu (the owner, 2026-09-24). */
.filterpanel { width: 260px; }
.filterpanel > button:disabled { opacity: .45; cursor: default; }
.filterpanel .filtersearchwrap { position: relative; margin: 4px 10px 6px; }
.filterpanel .filtersearchwrap .filtersearch { width: 100%; margin: 0; padding-right: 22px; box-sizing: border-box; }
.filterpanel .filtersearchclear { position: absolute; right: 3px; left: auto; top: 50%; transform: translateY(-50%); display: block; width: auto; border: 0; background: transparent; color: #667; font-size: 13px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.filterpanel .filtersearchwrap:not(.searching) .filtersearchclear { display: none; }
.filterpanel .filtersearchclear:hover { color: #0b63c5; }
.filtervalues label.special span { font-weight: 600; }
.filtervalues label.addto span { font-weight: 400; }
.filtervalues .filterempty { margin: 6px 8px; font-size: 11px; color: #777; }
/* Filter by colour (the owner, 2026-10-13): a swatch, its name and how many cells wear it. */
.filterpanel .filtercolours { padding: 2px 0; max-height: 180px; overflow-y: auto; }
.filterpanel .filtercolourshead { padding: 3px 12px 4px; font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.filterpanel .filtercolours button.filtercolour { display: flex; align-items: center; gap: 8px; width: 100%; }
.filterpanel .filtercolours button.filtercolour.on { color: var(--amber-hi); font-weight: 600; }
.filterpanel .filtercolours button.filtercolour.on .filtercolourname::after { content: ' \2713'; }
.filterpanel .colourswatch { flex: none; width: 16px; height: 12px; border-radius: 3px; border: 1px solid rgba(127,127,127,.55); box-sizing: border-box; font: 700 10px/10px var(--data, sans-serif); text-align: center; }
.filterpanel .colourswatch.nofill { background: repeating-linear-gradient(135deg, transparent 0 3px, rgba(127,127,127,.5) 3px 4px); }
.filterpanel .filtercolourname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.filterpanel .filtercolourcount { color: var(--ink-faint); font-family: var(--data); font-size: 10px; }

/* The review step: each position local labor or production staff (the owner, 2026-09-24). */
.grouppick { margin: 6px 0 10px; }
.grouppick .groupitems { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; }
.grouppick .groupitem { display: inline-flex; align-items: center; gap: 6px; }
.grouppick .groupitem b { font-weight: 600; margin-right: 2px; }
.grouppick .groupopt { padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--ink); cursor: pointer; font: inherit; font-size: 11px; }
.grouppick .groupopt.on { border-color: var(--amber); background: rgba(255,138,31,.16); color: var(--amber-hi); }

/* Every row hidden by a filter: said on the sheet, with the way out. */
.grid tbody tr.gridempty td { padding: 14px 12px; background: #fff; color: var(--sheet-ink); font-size: 12px; white-space: normal; }
.grid tbody tr.gridempty td .cmd { margin-left: 10px; }
/* ---- pop-ups that list things to tick in: Import from Positions, Add a loom ------------ */
.askbox .askimport { max-height: 46vh; overflow: auto; display: flex; flex-direction: column; gap: 2px; }
.askbox .askimportrow { display: flex; align-items: center; gap: 8px; }
.askbox .askimportrow b { min-width: 70px; }
.askbox .askimportrow .dim { flex: 1; }
.askbox .askimportrow .askfield.narrow { width: 56px; }
/* Import from another show… as a small case list (the owner, 2026-10-08): the sheet under the From and
   Numbering row, Select all / Select none and the count above it. */
.askbox.askcaseimport .askimportfrom { align-items: flex-end; }
.askbox.askcaseimport .askimportbar { align-items: center; gap: 8px; margin-bottom: 4px; }
.askbox.askcaseimport .askimportcount { font: 11.5px var(--data); font-style: normal; letter-spacing: 0; text-transform: none; color: var(--ink-faint); margin-left: 6px; }
.askbox.askcaseimport .askimportsheet { flex: 1 0 100%; min-width: 0; }
.askbox.askcaseimport .askimportsheet .gridwrap { max-height: 48vh; }
.askbox.askcaseimport .askimportsheet > em { display: block; padding: 8px 0; }
/* Package print (web/package-print.js): the labels linked to a loom, a case or a position, a sheet to tick, the two jobs' roads under it. */
.askbox.askpackage .askpackagebar { align-items: center; gap: 8px; margin-bottom: 4px; }
.askbox.askpackage .askpackagecount { font: 11.5px var(--data); font-style: normal; letter-spacing: 0; text-transform: none; color: var(--ink-faint); margin-left: 6px; }
.askbox.askpackage .askpackagesheet { flex: 1 0 100%; min-width: 0; }
.askbox.askpackage .askpackagesheet .gridwrap { max-height: 46vh; }
.askbox.askpackage .askpackageroads { align-items: flex-end; gap: 12px; }
/*
 * Add cable… in the orange of the commands, and Cable Tools directly under it the same, so the
 * two read as a pair (the owner, 2026-09-29: "Add cable… drawn in the screenshot's style") —
 * the `.commands .cmd` rule, not the view buttons' grey or the browser's own button.
 */
.modes .addcable, .modes .importcable, .toolbar .cabletools .cabletoolsbtn {
  margin-left: 8px; padding: 7px 12px; border: 0; background: var(--plate); color: var(--amber);
  font: 600 9.5px/1 var(--chrome); letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
}
.modes .addcable:hover, .modes .importcable:hover, .toolbar .cabletools .cabletoolsbtn:hover,
.toolbar .cabletools .cabletoolsbtn[aria-expanded="true"] { color: var(--ground); background: var(--metal); }
/* The power page's worksheet line: where the file is, and the two ways to it. */
.powersheet { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; }
.powersheet .where { color: var(--dim, #9aa); font-size: 12px; }
.powersheet .cmd.mini { padding: 2px 8px; }
.powersheet.networkspecbox { flex-direction: column; align-items: flex-start; }
.networkspecs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.networkspecs a { color: var(--amber, #f5a623); }
.dashlines { margin-top: 6px; }
.dashlines h5 { margin: 0 0 2px; }
.dashlines h5 span { font-weight: 400; margin-left: 6px; }

/* ---- the notification hub (Labor › Notifications; the owner, 2026-09-25) ---------------- */
.notifyhub .notifycompose { margin: 10px 0 4px; padding: 12px 14px; background: #0e1114; border: 1px solid var(--seam); }
.notifyhub .notifycompose h4 { margin: 0 0 8px; font: 700 10px/1 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.notifyhub .notifycompose textarea { width: 100%; margin: 8px 0; }
.notifyhub .notifypick { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 14px; max-height: 260px; overflow: auto; margin: 6px 0; padding: 8px 10px; border: 1px solid var(--seam); }
.notifyhub .notifypick label.dfield { display: flex; align-items: center; gap: 8px; margin: 0; }
.notifyhub .notifypick label.dfield input { width: 16px; height: 16px; }
.notifyhub .laborbar input.scalar { max-width: 220px; }
/* The hub page draws nothing over anything (the owner, 2026-10-09: the Turn on button sat under the
   quiet hours line — the global `.keyhint` rides up 8px — the ceiling read pink, and the venue's time
   zone sat at the far edge from its label). Every line of the Sending panel is its own block with its
   own margin, its buttons a wrapping row under them, and the label and its box one piece. */
.notifyhub .laborbar .notifytz { display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; font: 600 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.notifyhub .laborbar .notifytz input.scalar { width: 220px; text-transform: none; letter-spacing: normal; }
.notifyhub .notifyauto { margin: 10px 0 4px; padding: 12px 14px; background: #0e1114; border: 1px solid var(--seam); }
.notifyhub .notifyauto h4 { margin: 0 0 8px; font: 700 10px/1 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.notifyhub .notifyauto .notifyline { margin: 0 0 6px; font-family: var(--data); font-size: 11px; line-height: 1.5; color: var(--ink-dim); }
.notifyhub .notifyauto .notifyline:first-of-type { color: var(--ink); }
.notifyhub .notifyauto .notifyline.warn { color: var(--amber-hi); }
.notifyhub .notifyauto .notifyrules { margin-left: auto; font: 11px var(--data); color: var(--ink-dim); }
.notifyhub .drow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; }
.notifyhub .notifycompose .drow { margin: 6px 0; }
.notifyhub .drow .keyhint { margin: 0; }
/* Its buttons drawn as the toolbar's are, not the browser's own white ones. */
.notifyhub .drow .cmd { padding: 4px 10px; border: 1px solid var(--amber-lo); background: transparent; color: var(--amber); font: 600 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.notifyhub .drow .cmd:hover { background: var(--amber-lo); color: #0b0e11; }
.notifyhub .drow .cmd:disabled { opacity: .45; cursor: default; }
.notifyhub .drow .cmd.dismiss { border-color: var(--seam); color: var(--ink-faint); }
.notifyhub .drow .cmd.dismiss:hover { background: var(--seam); color: var(--ink); }
.notifyhub .notifycompose .result { font: 11px var(--data); color: var(--ink-faint); }
.notifyhub .notifycompose .result.did { color: var(--amber-hi); }
.notifyhub .notifycompose .result.failed { color: #ff6b7a; }
.notifyhub .keyhint.short:not(.failed) { color: var(--ink-faint); }
.notifyhub > h3 + .keyhint { margin: 3px 0 10px; }
.notifyprefs { margin-top: 6px; }
.notifyprefs label.acctfield { display: flex; align-items: center; gap: 8px; }
.notifyprefs label.acctfield input[type=checkbox] { width: 16px; height: 16px; }
/* ---- a filter box per column, between the headings and row 1 (the owner, 2026-09-25) ----
   The row sticks with the headings (it is in the same sticky thead); a box holding text wears
   amber so a narrowed column reads across the room; the corner's ✕ clears them all. */
.grid thead tr.filterrow th {
  padding: 2px 3px; height: 24px;
  font: 400 11px/1 var(--data); letter-spacing: 0; text-transform: none;
  background: var(--sheet-head); border-bottom: 1px solid var(--sheet-rule);
  cursor: default;
}
.grid .colfilter {
  display: block; width: 100%; box-sizing: border-box; height: 20px; margin: 0; padding: 0 5px;
  border: 1px solid var(--sheet-rule); border-radius: 3px; outline: none;
  background: #fff; color: var(--sheet-ink); font: 11px var(--data);
}
.grid .colfilter::placeholder { color: #a3abb5; font-style: italic; }
.grid .colfilter:focus { border-color: #0b63c5; box-shadow: inset 0 0 0 1px #0b63c5; }
.grid .colfilter.on { border-color: #c9932e; background: #fff8e8; }
.grid .colfilter.on:focus { border-color: #0b63c5; }
/* A column held to some of its values by the caret's filter says which, in the box under its
   heading, until something is typed there — the mark that survives a reload (2026-09-26). */
.grid .colfilter.kept { border-color: #c9932e; background: #fff8e8; }
.grid .colfilter.kept::placeholder { color: #a35200; font-style: normal; }
.grid thead tr.filterrow th.filtercorner { text-align: center; padding: 2px; }
.grid .filterclear {
  width: 20px; height: 20px; padding: 0; border: 1px solid #c9932e; border-radius: 3px;
  background: #fff8e8; color: #a35200; font: 12px/1 var(--chrome); cursor: pointer;
}
.grid .filterclear:hover { background: #ffe9bf; }
.grid .filterclear[hidden] { display: none; }
.cellbar .filtercount {
  display: flex; align-items: center; gap: 8px; padding: 0 10px; white-space: nowrap;
  border-right: 1px solid var(--sheet-rule); background: #fff8e8; color: #a35200;
  font: 600 9.5px/1 var(--chrome); letter-spacing: .12em; text-transform: uppercase;
}
.cellbar .filtercount[hidden] { display: none; }
/* A filter a page brought the sheet in with (Inventory's Go to), and its way back. */
.cellbar .filtercount .fonly { display: inline-flex; align-items: center; gap: 6px; }
.cellbar .filtercount .fback { font-weight: 600; }
/* The filters named as they read: a value keeps its case, and a long list ends in an ellipsis. */
.cellbar .filtercount .fvals { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; text-transform: none; letter-spacing: 0; font-weight: 500; color: #7a4a00; }
.cellbar .filtercountclear {
  height: 18px; padding: 0 7px; border: 1px solid #c9932e; border-radius: 3px; background: #fff; color: #a35200;
  font: 600 9.5px/1 var(--chrome); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.cellbar .filtercountclear:hover { background: #ffe9bf; }

/* The place search under Add a hotel's Name: suggestions as name over address, the source at the foot. */
.placebox { position: relative; flex: 1; min-width: 0; }
.placebox > input { width: 100%; box-sizing: border-box; }
.placelist {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 96; max-height: 280px; overflow-y: auto;
  background: #fff; border: 1px solid var(--sheet-rule); box-shadow: 0 14px 30px rgba(0,0,0,.45);
}
.placelist button {
  display: block; width: 100%; padding: 6px 10px; border: 0; border-bottom: 1px solid var(--sheet-line);
  background: transparent; color: var(--sheet-ink); text-align: left; cursor: pointer; font: 12px/1.3 var(--chrome);
}
.placelist button b { display: block; font-weight: 700; }
.placelist button small { display: block; color: #5d6672; font-size: 11px; white-space: normal; }
.placelist button:hover, .placelist button.on { background: var(--sheet-sel); }
.placelist .placesource { padding: 4px 10px; font: 10px/1.4 var(--chrome); color: #5d6672; background: var(--sheet-head); }

/* ---- a sheet's formatting: the Format bar and the rules pop-up (web/formatting.js) ---- */
.formatbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 3px 8px 3px 10px; border-bottom: 1px solid var(--seam); background: #14171c; }
.formatbar .fbtitle { font: 600 9.5px/1 var(--chrome); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); margin-right: 4px; }
.formatbar .fbhint { color: var(--ink-faint); font-size: 10.5px; margin-left: 6px; }
button.fb {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; min-width: 26px; justify-content: center;
  border: 1px solid var(--seam); background: #0e1114; color: var(--ink); font: 600 11px/1.6 var(--chrome); cursor: pointer;
}
button.fb:hover { border-color: var(--seam-bright); color: #fff; }
button.fb:disabled { opacity: .4; cursor: default; }
button.fb.bold { font-weight: 800; }
button.fb.italic { font-style: italic; }
button.fb.on { background: var(--amber); color: #101317; border-color: var(--amber); }
.swatch { display: inline-block; width: 13px; height: 13px; border: 1px solid rgba(255,255,255,.4); box-sizing: border-box; }
.swatch.none { background: repeating-linear-gradient(45deg, #3a3f47 0 3px, #1a1d22 3px 6px); }
.palette { position: fixed; z-index: 97; padding: 8px; width: 216px; background: var(--panel); border: 1px solid var(--seam-bright); box-shadow: 0 14px 30px rgba(0,0,0,.5); }
.palette .swatches { display: grid; grid-template-columns: repeat(8, 22px); gap: 4px; }
.palette .swatches button { width: 22px; height: 22px; padding: 0; border: 1px solid rgba(255,255,255,.25); cursor: pointer; }
.palette .swatches button.on { outline: 2px solid var(--amber-hi); outline-offset: 1px; }
.palette .prow { display: flex; gap: 6px; margin-top: 8px; }
.palette .prow button, .palette .prow label {
  flex: 1; padding: 3px 6px; border: 1px solid var(--seam); background: #0e1114; color: var(--ink); text-align: center;
  font: 600 9.5px/1.6 var(--chrome); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; position: relative;
}
.palette input[type=color] { position: absolute; width: 0; height: 0; opacity: 0; left: 0; top: 0; }
.askbox.askrules { max-width: min(1180px, calc(100vw - 40px)); width: min(1180px, calc(100vw - 40px)); align-content: flex-start; }
.askbox.askrules > * { flex: 1 0 100%; }
.askrules .rulelist { display: flex; flex-direction: column; }
.askrules .rulerow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 0; border-bottom: 1px solid var(--seam); }
.askrules .rulerow .rulenum { font-family: var(--data); color: var(--ink-faint); width: 18px; text-align: right; }
.askrules .rulerow .rulewords { color: var(--ink-faint); font-size: 10.5px; }
.askrules .rulerow select, .askrules .rulerow input { padding: 3px 6px; background: #0e1114; border: 1px solid var(--seam); color: var(--ink); font-family: var(--data); font-size: 11px; }
.askrules .rulerow input.rulevalue { width: 130px; }
.askrules .rulerow .preview { padding: 2px 10px; min-width: 24px; text-align: center; border: 1px solid var(--seam); background: #fff; color: #101317; font-family: var(--data); font-size: 11.5px; }
.askrules .rulerow .rulemove { margin-left: auto; display: inline-flex; gap: 4px; }
.grid tbody td.styled .cellvalue.inherited { color: inherit; }
/* Underline and strikethrough, the new flags on the bar; the gaps group B I U S, the colours and borders, Clear and Rules. */
button.fb.underline { text-decoration: underline; }
button.fb.strike { text-decoration: line-through; }
.formatbar .fbgap { width: 6px; }
/* A cell's own border, drawn over its edge and never into the table's layout, so a line never moves a column (web/grid.js paintCell). */
.grid td.bordered::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  border-top: var(--fb-top, 0 none); border-right: var(--fb-right, 0 none);
  border-bottom: var(--fb-bottom, 0 none); border-left: var(--fb-left, 0 none);
}
/* The Borders pop-over: ten squares, each drawn with the lines its command lays, a colour and a style. */
.palette.borders { width: 236px; }
.palette .bordermodes { display: grid; grid-template-columns: repeat(5, 36px); gap: 6px; justify-content: space-between; }
.palette .bordermodes button { width: 36px; height: 30px; padding: 0; display: grid; place-items: center; border: 1px solid var(--seam); background: #0e1114; cursor: pointer; }
.palette .bordermodes button:hover { border-color: var(--amber); }
.bmicon { display: inline-block; width: 16px; height: 16px; box-sizing: border-box; position: relative; border: 1px dotted #6b7380;
  background: linear-gradient(#6b7380, #6b7380) center / 100% 1px no-repeat, linear-gradient(#6b7380, #6b7380) center / 1px 100% no-repeat; }
.bm-all .bmicon, .bm-all-icon { border: 2px solid #e8ecf1; background: linear-gradient(#e8ecf1, #e8ecf1) center / 100% 2px no-repeat, linear-gradient(#e8ecf1, #e8ecf1) center / 2px 100% no-repeat; }
.bm-inside .bmicon { background: linear-gradient(#e8ecf1, #e8ecf1) center / 100% 2px no-repeat, linear-gradient(#e8ecf1, #e8ecf1) center / 2px 100% no-repeat; }
.bm-horizontal .bmicon { background: linear-gradient(#e8ecf1, #e8ecf1) center / 100% 2px no-repeat, linear-gradient(#6b7380, #6b7380) center / 1px 100% no-repeat; }
.bm-vertical .bmicon { background: linear-gradient(#6b7380, #6b7380) center / 100% 1px no-repeat, linear-gradient(#e8ecf1, #e8ecf1) center / 2px 100% no-repeat; }
.bm-outside .bmicon { border: 2px solid #e8ecf1; }
.bm-left .bmicon { border-left: 2px solid #e8ecf1; }
.bm-top .bmicon { border-top: 2px solid #e8ecf1; }
.bm-right .bmicon { border-right: 2px solid #e8ecf1; }
.bm-bottom .bmicon { border-bottom: 2px solid #e8ecf1; }
.bm-none .bmicon { background: none; }
.palette.borders .prow { align-items: center; }
.palette.borders .prow button { flex: 0 0 auto; display: inline-flex; gap: 6px; align-items: center; }
.palette .borderstyle { flex: 1 1 0; min-width: 0; width: 0; padding: 3px 4px; background: #0e1114; border: 1px solid var(--seam); color: var(--ink); font: 600 11px/1.4 var(--chrome); }
.palette .bordersamplebox { width: 34px; height: 14px; display: inline-flex; align-items: center; background: #fff; padding: 0 3px; }
.palette .bordersample { display: block; width: 100%; height: 0; }
.palette.swatchpop { z-index: 98; }

/* ---- Wristbands' totals and the Credentials page ---- */
table.grid.pivot td.num, table.grid.credtable td.num, table.grid.pivot th.num, table.grid.credtable th.num { text-align: right; font-family: var(--data); }
table.grid.pivot tr.total td, table.grid.credtable tr.total td { font-weight: 700; border-top: 2px solid var(--sheet-rule); }
table.grid.credtable tr.idle td.group, table.grid.credtable tr.idle td.num { color: var(--sheet-dim); }
table.grid.credtable td.group { font-weight: 600; white-space: nowrap; }
.credcell { display: inline-flex; align-items: center; gap: 6px; }
.credchip { display: inline-block; width: 13px; height: 13px; border: 1px solid rgba(0,0,0,.35); box-sizing: border-box; }
.credchip.none { background: repeating-linear-gradient(45deg, #d5d8dc 0 3px, #f2f2f2 3px 6px); }
.credpick, .credtext { padding: 2px 4px; background: #fff; border: 1px solid var(--sheet-line); color: var(--sheet-ink); font-family: var(--data); font-size: 11px; }
.credtext { width: 120px; }
.askbox .askto { flex: 1 0 100%; }
.askbox .askto > b { display: block; margin-bottom: 4px; }

/* Rename or renumber a rack: the chart of the devices' current and recommended names. */
.askbox.askrenumber { max-width: min(900px, calc(100vw - 40px)); width: min(900px, calc(100vw - 40px)); align-content: flex-start; }
.askbox.askrenumber > * { flex: 1 0 100%; }
.askbox.askrenumber .subtable { max-height: 48vh; overflow: auto; }
table.grid.renumber td .askfield { width: 120px; }
table.grid.renumber td .cmd { padding: 2px 8px; }

/*
 * A newer build on the server than the one this page runs (`showNewBuild` in web/app.js; the
 * owner, 2026-09-25): an amber button in the ribbon before the modes, in the ribbon's flow so
 * it never covers a menu, with a small × to put it off.
 */
.newbuild { display: inline-flex; align-items: stretch; border: 1px solid var(--amber); border-radius: 3px; overflow: hidden; }
.newbuild button {
  border: 0; background: transparent; color: var(--amber); cursor: pointer;
  font-family: var(--data); font-size: 10.5px; letter-spacing: .04em; white-space: nowrap;
}
.newbuild .nbreload { padding: 3px 10px; }
.newbuild .nblater { padding: 3px 7px; border-left: 1px solid var(--amber); color: var(--ink-faint); }
.newbuild button:hover { background: var(--amber); color: var(--ground); }
.newbuild .nbnotes { padding: 3px 8px; border-left: 1px solid var(--amber); }
.newbuild .nbnotes[hidden] { display: none; }
/* What's new ▾: the build's release notes under the pill (`src/release-notes.json`). */
.nbnotespanel {
  position: fixed; z-index: 120; width: min(360px, calc(100vw - 32px)); max-height: 60vh; overflow: auto;
  background: var(--panel); color: var(--ink); border: 1px solid var(--amber); border-radius: 6px;
  padding: 10px 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); font-size: 12.5px;
}
.nbnotespanel > b { color: var(--amber); display: block; margin-bottom: 6px; }
.nbnotespanel ul { margin: 0; padding-left: 16px; }
.nbnotespanel li { margin: 0 0 6px; }
.nbnotespanel .nbnotetitle { font-weight: 600; }
.nbnotespanel .nbnotedate { color: var(--ink-faint); }
.nbnotespanel li p { margin: 2px 0 0; color: var(--ink-dim, var(--ink)); }
.nbnotespanel .nbnoteshint { margin: 6px 0 0; color: var(--ink-faint); font-size: 11.5px; }
/*
 * The open support tickets in the ribbon (`paintTicketCount` in web/app.js; the owner, 2026-10-07):
 * a small amber count at the head of the right-hand block — before the New build pill and the
 * modes — for a Super-Admin or the Lumen owner, while any ticket is open. A phone keeps the number.
 */
.ticketcount {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 9px;
  border: 1px solid var(--amber); border-radius: 10px; text-decoration: none; cursor: pointer;
  color: var(--amber); font-family: var(--data); font-size: 10.5px; letter-spacing: .04em; white-space: nowrap;
}
.ticketcount b { min-width: 16px; padding: 0 5px; border-radius: 8px; background: var(--amber); color: var(--ground); font-weight: 700; text-align: center; }
.ticketcount:hover { background: var(--panel-hi); }
@media (max-width: 900px) { .ticketcount .tcword { display: none; } .ticketcount { padding: 2px; } }

/* Home's card of the support tickets, for the same two people (`ticketCard` in web/app.js). */
.hometickets { margin: 0 0 14px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--seam-bright); }
.hometickets[hidden] { display: none; }
.hometickets .tickethead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hometickets .tickethead b { font: 700 13px/1.2 var(--chrome); letter-spacing: .1em; text-transform: uppercase; color: var(--amber-hi); }
.hometickets .ticketcounts { color: var(--ink); font-size: 13px; }
.hometickets .tickethead .cmd { margin-left: auto; padding: 6px 12px; font-size: 11px; }
.hometickets .ticketrows { margin-top: 8px; display: flex; flex-direction: column; }
.hometickets .ticketrow {
  display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 5px 4px; border: 0; border-top: 1px solid var(--seam);
  background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.hometickets .ticketrow:hover:not(:disabled) { background: var(--panel-hi); }
.hometickets .ticketrow:disabled { cursor: default; }
.hometickets .ticketid { font: 11px var(--data); color: var(--ink-dim); flex: 0 0 auto; }
.hometickets .ticketkind { flex: 0 0 auto; padding: 0 6px; border: 1px solid var(--seam-bright); border-radius: 8px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); }
.hometickets .ticketkind.bug { border-color: #b4443c; color: #e58f88; }
.hometickets .tickettitle { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hometickets .ticketwho { flex: 0 0 auto; font-size: 12px; color: var(--ink-dim); }
.hometickets .ticketnew { flex: 0 0 auto; padding: 0 6px; border-radius: 8px; background: var(--amber); color: var(--ground); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 900px) { .hometickets .ticketrow { flex-wrap: wrap; } .hometickets .tickettitle { flex: 1 0 100%; white-space: normal; } }
/* The CAD Budget's notes on its areas are captions, as the ones under its other headings are (`h3 + .keyhint`). */
:is(.cadbudget, .cadoverview) .areaswait .keyhint, .cadbudget .areasfed .keyhint { margin: 3px 0 12px; color: var(--ink-faint); font-family: var(--data); font-size: 10px; letter-spacing: .04em; }
:is(.cadbudget, .cadoverview) .areaswait .empty { padding: 10px 0 0; }
/* Against the order's heading carries the choice of what it tracks — the bill of materials or the worksheet — as a pair of buttons (the owner, 2026-10-07). */
:is(.cadbudget, .cadoverview) .againsthead { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
:is(.cadbudget, .cadoverview) .againsthead h3 { margin: 0; }
/* The note under that heading is a caption like every other under a heading (`h3 + .keyhint`): the heading's row stands in for the h3. */
:is(.cadbudget, .cadoverview) .againsthead + .keyhint { margin: 3px 0 12px; color: var(--ink-faint); font-family: var(--data); font-size: 10px; letter-spacing: .04em; }
/* A note under the Push or Email row — no bill of materials loaded — rode up under the row's band (a keyhint's negative top margin) and was half hidden by it. */
:is(.cadbudget, .cadoverview) .commands + .keyhint { margin-top: 10px; }
.cadbudget .tracktoggle { display: inline-flex; }
.cadbudget .tracktoggle .scopetoggle { margin-left: 0; }
.cadbudget .tracktoggle .scopetoggle + .scopetoggle { border-left-width: 0; }
.cadbudget .tracktoggle .scopetoggle[aria-pressed="true"] { color: var(--amber-hi); border-color: var(--amber-lo); background: var(--panel-hi); }
:is(.cadbudget, .cadoverview) .tracktoggle .scopetoggle:disabled { cursor: default; }
/* About's line for a page running older scripts than the server. */
.aboutcard .aboutstale { display: flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--amber); }
.aboutcard .aboutstale .cmd { padding: 2px 10px; }

/* ---- drop-down cells as chips, as Google Sheets draws them ---- */
/*
 * A chip carries no colour of its own (the owner, 2026-09-25: "I don't think the chips should
 * color, the cell color is sufficient"): the pill is an outline over whatever the cell already
 * is — the stripe, a tint, a tape colour's fill, the sheet's own formatting — so a column of
 * chips reads the same down every row. The shade the pill used to take on even rows outranked
 * the dashed style of a shown default, so the racks' Phasing column flipped between a filled
 * and a dashed chip row by row while Type and Service beside it did not.
 */
/*
 * The value comes first (the owner, 2026-09-26: "cable lengths not drawing well in cable… I like
 * the cell width, but the text needs to draw better"). A cable part's 54px column had drawn a
 * 96 as a 9 cut in half: the cell kept 10px a side, the pill 8px more, and 18px stood clear of
 * the caret beside it. A chip is its own inset, so the cell under one keeps 4px a side, and
 * the caret rides inside the pill, as Google Sheets draws it. A word too long for its cell ends
 * in an ellipsis with its caret kept, the cell bar carrying it whole. A number is never cut —
 * 15… could be 15 or 150 — so in a number column the pill is a wrapping row one line tall,
 * and a caret with no room beside the value drops to a second line nobody sees instead.
 */
.grid tbody td.chips { white-space: nowrap; padding-left: 4px; padding-right: 4px; }
.grid tbody td .cellchip {
  display: inline-flex; align-items: center; align-content: flex-start;
  max-width: 100%; height: 17px; padding: 0 4px 0 6px; box-sizing: border-box;
  border-radius: 999px; background: transparent; border: 1px solid rgba(30,39,51,.28); color: inherit;
  font-family: var(--data); font-size: 10.5px; line-height: 15px;
  overflow: hidden; vertical-align: middle;
}
.grid tbody td.num .cellchip { flex-wrap: wrap; }
.grid tbody td .cellchip + .cellchip { margin-left: 3px; }
.grid tbody td .cellchip .cellvalue { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* A value not among the options still reads as a chip, but an amber one, so a stale word stands out. */
.grid tbody td .cellchip.stray { border-color: #c9932e; color: #6b4a12; }
/* A shown default the cell does not hold: dashed and greyed, on every row alike. */
/* The roster's Name once the person has confirmed (owner, 2026-10-13: "a light green fill in the name chip"). */
.grid tbody td .cellchip.confirmed { background: #dcf3df; border-color: #7dbb88; color: #1f4f28; }
/* A coloured choice (Colour the choices…, web/choice-colours.js): the chip filled with its value's colour and wearing that colour's
   own ink, so it reads whatever the cell's stripe, fill or format is round it. A third colour system, for the screen alone. */
.grid tbody td .cellchip.choicechip, .grid tbody td.filled .cellchip.choicechip { background: var(--choice-fill, transparent); border-color: var(--choice-border, rgba(30,39,51,.28)); color: var(--choice-ink, inherit); }
.grid tbody td .cellchip.choicechip .chipcaret { color: var(--choice-ink, inherit); opacity: 0.7; }
.grid tr.grouphead b.groupvalue.choicechip { display: inline-block; padding: 0 7px; border: 1px solid var(--choice-border, rgba(255,255,255,.3)); border-radius: 9px; background: var(--choice-fill, transparent); color: var(--choice-ink, inherit); line-height: 16px; }
/* A chip's style past its fill (2026-10-24): bold words, a shape — rounded corners, a rectangle, a wide pill — and an emoji before the words. */
.choicechip.choicebold { font-weight: 700; }
.choicechip[data-shape="rounded"] { border-radius: 4px; }
.choicechip[data-shape="square"] { border-radius: 0; }
.choicechip[data-shape="wide"] { border-radius: 999px; padding-left: 12px; padding-right: 10px; min-width: 72px; justify-content: center; }
.grid tbody td .cellchip[data-shape="wide"] .cellvalue { flex: 1 1 auto; text-align: center; }
.choicechip .chipemoji { flex: none; margin-right: 3px; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-weight: 400; line-height: 1; }
.cellpicker .choiceswatch.withemoji, .cellchecklist .choiceswatch.withemoji { width: auto; min-width: 14px; font-size: 11px; line-height: 14px; text-align: center; background: transparent; border-color: transparent; }
.choiceswatch { display: inline-block; width: 11px; height: 11px; border: 1px solid; border-radius: 3px; margin-right: 6px; vertical-align: -1px; flex: none; }
.cellpicker.checks button .choiceswatch { margin-left: 6px; margin-right: 0; }
.askbox.askchoices { width: min(680px, calc(100vw - 32px)); }
.askchoices .choicelist { max-height: min(52vh, 420px); overflow: auto; margin: 8px 0; border: 1px solid var(--line, #3a3f46); border-radius: 6px; }
.askchoices .choicerow { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-bottom: 1px solid rgba(127, 127, 127, 0.2); }
.askchoices .choicerow:last-child { border-bottom: 0; }
.askchoices .choiceword { flex: 1 1 150px; min-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.askchoices .choicepreview { display: inline-flex; align-items: center; max-width: 100%; padding: 0 8px; border: 1px solid #a9b2bd; border-radius: 999px; background: #fff; color: #14171b; line-height: 18px; overflow: hidden; vertical-align: middle; }
.askchoices .choicepreview .cellvalue { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.askchoices .choicepreview.choicechip { background: var(--choice-fill, #fff); border-color: var(--choice-border, #a9b2bd); color: var(--choice-ink, #14171b); }
.askchoices .choicepreview[data-shape="wide"] { min-width: 90px; }
/* A value nobody colored that wears the column's own color meanwhile (the cable sheet's Type): the word under it says so. */
.askchoices .choicedefault { display: block; margin-top: 2px; font-size: 10px; line-height: 13px; white-space: normal; color: var(--ink-faint, #8b95a1); }
.askchoices .choicestyle { flex: none; padding: 0 7px; font-size: 10px; line-height: 18px; }
.askchoices .choicestyle.on { outline: 2px solid var(--amber, #ff8a1f); outline-offset: 1px; }
.askchoices .choicegroup { border-bottom: 1px solid rgba(127, 127, 127, 0.2); }
.askchoices .choicegroup .choicerow { border-bottom: 0; }
.askchoices .choiceeditor { padding: 4px 8px 8px 20px; display: flex; flex-direction: column; gap: 5px; background: rgba(127, 127, 127, 0.08); }
.askchoices .choiceeditrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12px; }
.askchoices .choiceeditlabel { width: 42px; flex: none; color: var(--ink-faint, #8b95a1); }
.askchoices .choiceeditrow button { padding: 1px 7px; font-size: 11px; line-height: 16px; border: 1px solid #8b95a1; border-radius: 4px; background: transparent; color: inherit; cursor: pointer; }
.askchoices .choiceeditrow button.on { outline: 2px solid var(--amber, #ff8a1f); outline-offset: 1px; }
.askchoices .choiceeditrow input[type="color"] { width: 30px; height: 22px; padding: 0; border: 1px solid #8b95a1; border-radius: 4px; background: transparent; cursor: pointer; }
.askchoices .choiceeditrow .choiceemoji { width: 110px; font-size: 13px; padding: 1px 6px; }
.askchoices .choiceemojis { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.askchoices .choiceemojis button { padding: 0 3px; font-size: 14px; line-height: 18px; border-color: transparent; }
.askchoices .choicebold { margin-left: 6px; }
.askchoices .choicepalette { display: flex; flex-wrap: wrap; gap: 3px; flex: none; }
.askchoices .choicepalette button { width: 20px; height: 20px; padding: 0; border: 1px solid; border-radius: 4px; cursor: pointer; }
.askchoices .choicepalette button.none { background: transparent; border-style: dashed; border-color: #8b95a1; color: #8b95a1; font-size: 11px; line-height: 18px; }
.askchoices .choicepalette button.on { outline: 2px solid var(--amber, #ff8a1f); outline-offset: 1px; }
.askchoices .choiceorg { display: block; margin: 6px 0; }
html.phone .askchoices .choicerow { flex-wrap: wrap; }
html.phone .askchoices .choicepalette button { width: 28px; height: 28px; }
.grid tbody td .cellchip.inherited { border-style: dashed; color: #6f7a87; }
/* Over a tape colour's fill the outline takes the ink the fill chose, black or white. */
/* Over stripes the chip spans the cell and its words sit one to a band, centred on it, the
   slashes left to the bands themselves (`bandWords` in web/grid.js). */
.grid tbody td .cellchip.banded { position: absolute; left: 2px; right: 2px; top: 50%; transform: translateY(-50%); width: auto; padding: 0; }
.grid tbody td .cellchip.banded .chipcaret { position: absolute; right: 3px; top: 0; }
.grid tbody td .cellchip.banded .bandwords { display: flex; flex: 1 1 auto; min-width: 0; overflow: visible; }
.grid tbody td .cellchip.banded .bandword { flex: 1 1 0; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grid tbody td.filled .cellchip { border-color: currentColor; border-color: color-mix(in srgb, currentColor 45%, transparent); }
/* The caret is the one place a click opens the list (the owner, 2026-11-01: "it should just be the drop down arrow on the
   right hand side"), so it takes the pointer and a little room round itself to be hit: the pill's own right padding is its. */
.grid tbody td .chipcaret { color: #8b95a1; font-size: 9px; vertical-align: middle; margin-left: 2px; cursor: pointer; }
.grid tbody td .cellchip .chipcaret { flex: none; margin-left: 2px; line-height: 15px; padding: 0 4px 0 3px; margin-right: -4px; }
.grid tbody td .chipcaret.multi { margin-left: 3px; padding: 0 3px; }
.grid tbody td.ro .chipcaret { cursor: default; }
.grid tbody td .chipcaret.empty { opacity: 0; }
.grid tbody td.chips:hover .chipcaret.empty { opacity: 1; }
.grid tbody td.ro.chips:hover .chipcaret.empty { opacity: 0; }

/* ---- Labor › Inbox ---- */
.inboxlist { display: flex; flex-direction: column; border: 1px solid var(--seam); background: var(--panel); }
.inboxrow { display: grid; grid-template-columns: 180px minmax(160px, 1fr) minmax(200px, 2fr) 120px; gap: 12px; align-items: baseline; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--seam); background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: 11.5px/1.4 var(--chrome); }
.inboxrow:hover { background: var(--panel-hi); }
.inboxitem { display: flex; align-items: center; border-bottom: 1px solid var(--seam); }
.inboxitem .inboxrow { flex: 1; min-width: 0; border-bottom: 0; }
.inboxitem .inboxmark { flex: none; margin: 0 10px; }
.inboxitem .inboxmark:disabled { visibility: hidden; }
.inboxrow[class*="state-"] { grid-template-columns: 170px 180px minmax(160px, 1fr) minmax(200px, 2fr) 120px; }
.inboxstate { font-size: 10.5px; letter-spacing: .02em; color: var(--dim, #9aa); }
.inboxstate.replied { color: var(--amber, #f39c12); font-weight: 700; }
.inboxstate.answered { color: #7fb77e; }
.inboxrow.unread .inboxfrom, .inboxrow.unread .inboxsubject { font-weight: 700; color: #fff; }
.inboxrow .inboxsnippet, .inboxrow .inboxwhen { color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inboxrow .inboxfrom, .inboxrow .inboxsubject { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inboxthread { display: flex; flex-direction: column; gap: 10px; margin: 8px 0; }
.inboxmsg { border: 1px solid var(--seam); background: var(--panel); padding: 10px 12px; }
.inboxhead { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.inboxtext { margin: 0; white-space: pre-wrap; font: 12px/1.5 var(--chrome); color: var(--ink); }
.inboxreply textarea { width: 100%; box-sizing: border-box; }
@media (max-width: 900px) { .inboxrow { grid-template-columns: 1fr; gap: 2px; } }

/* ---- Team › Roster (the owner, 2026-09-28): Distribute, Shifts in bulk, the Sent log, the pay policies page ---- */
/* Distribute: the draft as each person gets it — Preview as — and Send as. */
.askbox.askdistribute { max-width: 880px; width: min(880px, calc(100vw - 40px)); }
/* The second click before an email goes (`confirmSend` in web/app.js): over the pop-up that asked for the send. */
.askbox.asksendcheck { z-index: 96; max-width: 520px; border-color: rgba(255,140,90,.8); }
.askbox.asksendcheck > p { flex: 1 0 100%; margin: 0; }
.askbox.asksendcheck .sendcheckline { color: var(--ink); line-height: 1.45; }
.askbox.askdistribute > label, .askbox.askbulk > label { flex: 1 0 100%; display: flex; flex-direction: column; gap: 4px; }
.askbox.askdistribute > label > span {
  font: 700 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}
.askbox.askdistribute .askfield.wide { width: 100%; box-sizing: border-box; }
.askbox.askdistribute .mailbody { font-family: var(--data); line-height: 1.5; min-height: 260px; resize: vertical; }
.askbox.askdistribute > p.keyhint, .askbox.askbulk > p.keyhint { flex: 1 0 100%; margin: 0; }
.askbox .sendas { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
/* The Distribute window's line on the wording and the logo, with the shortcut to the organization's templates (the owner, 2026-10-08). */
.askbox .brandline { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.askbox .brandline img.brandlogo { max-height: 28px; max-width: 140px; width: auto; height: auto; background: #fff; padding: 2px 6px; border-radius: 3px; }
.askbox .brandline a.editwording { color: var(--amber-hi); text-decoration: underline; white-space: nowrap; }
/* Distribute's preview as a mail client's compose window (the owner, 2026-10-16: "it should feel like gmail or outlook,
   preferably gmail"): the recipients an inbox list at the left, the one shown a white compose card in Gmail's own look. */
.askbox.askdistribute.gmpreview { max-width: 1120px; width: min(1120px, calc(100vw - 40px)); }
.gmnotes { flex: 1 0 100%; display: flex; flex-direction: column; gap: 3px; }
.gmnotes:empty { display: none; }
.gmnotes > p.keyhint { margin: 0; font-size: 12px; line-height: 1.4; flex: 0 0 auto; }
.gmshell { flex: 1 0 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-height: 0; }
.gmshell.haslist { grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); }
.gmlist { display: flex; flex-direction: column; background: #fff; border-radius: 8px; overflow: auto; max-height: 62vh; color: #202124; font: 14px/1.35 Arial, Helvetica, sans-serif; }
.gmlisthead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 10px 12px 8px; border-bottom: 1px solid #e0e0e0; position: sticky; top: 0; background: #fff; }
.gmlisthead b { font-size: 14px; color: #202124; }
.gmlisthead span { font-size: 12px; color: #5f6368; }
button.gmrow { all: unset; box-sizing: border-box; display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #f1f3f4; cursor: pointer; color: #202124; font: 13px/1.35 Arial, Helvetica, sans-serif; }
button.gmrow:hover { box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60,64,67,.3); position: relative; z-index: 1; }
button.gmrow[aria-current="true"] { background: #c2e7ff; }
button.gmrow:focus-visible { outline: 2px solid #0b57d0; outline-offset: -2px; }
button.gmrow.problem .gmrowsnip b { color: #b3261e; }
.gmrowtext { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.gmrowname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gmrowname small { color: #5f6368; font-size: 12px; }
.gmrowsnip { color: #5f6368; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.gmrowsnip b { color: #202124; font-weight: 400; }
.gmbadge { flex: none; font-size: 11px; color: #5f6368; background: #f1f3f4; border-radius: 10px; padding: 1px 7px; }
.gmbadge.warn { color: #b3261e; background: #fce8e6; }
.gmavatar { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #0b57d0; color: #fff; display: inline-grid; place-items: center; font: 600 14px Arial, Helvetica, sans-serif; }
.gmavatar.small { width: 20px; height: 20px; font-size: 11px; margin-right: 6px; }
.gmcompose { display: flex; flex-direction: column; min-width: 0; background: #fff; color: #202124; border-radius: 8px; overflow: hidden;
  box-shadow: 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12), 0 5px 5px -3px rgba(0,0,0,.2); font: 14px/1.5 Arial, Helvetica, sans-serif; max-height: 70vh; }
.gmhead { display: flex; align-items: center; gap: 4px; background: #f2f6fc; padding: 6px 8px 6px 14px; font-size: 14px; }
.gmtitle { font-weight: 500; flex: 1; color: #041e49; }
.gmcount { color: #444746; font-size: 12px; margin-right: 4px; }
button.gmicon { all: unset; cursor: pointer; width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; color: #444746; font: 18px/1 Arial, Helvetica, sans-serif; }
button.gmicon:hover:not(:disabled) { background: rgba(68,71,70,.1); }
button.gmicon:disabled { opacity: .35; cursor: default; }
button.gmicon:focus-visible, button.gmtext:focus-visible, button.gmsend:focus-visible, button.gmschedule:focus-visible { outline: 2px solid #0b57d0; outline-offset: 2px; }
button.gmtrash { font-size: 16px; }
.gmfield { display: flex; align-items: center; gap: 8px; margin: 0 16px; min-height: 40px; border-bottom: 1px solid #e0e0e0; }
.gmlabel { color: #5f6368; }
.gmchip { display: inline-flex; align-items: center; background: #fff; border: 1px solid #dadce0; border-radius: 16px; padding: 2px 10px 2px 3px; font-size: 13.5px; color: #202124; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gmaddr { color: #5f6368; margin-left: 2px; }
.gmproblem.failed { color: #b3261e; font-size: 13px; }
.gmcompose .askfield.wide.gmsubject { all: unset; flex: 1; min-width: 0; font: 14px/1.5 Arial, Helvetica, sans-serif; color: #202124; padding: 8px 0; }
.gmcompose .askfield.wide.gmsubject::placeholder { color: #5f6368; }
.gmbody { flex: 1; overflow: auto; padding: 8px 16px 12px; min-height: 0; }
.gmcompose .askfield.wide.mailbody { all: unset; display: block; box-sizing: border-box; width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; resize: none; overflow: hidden;
  font: 14px/1.5 Arial, Helvetica, sans-serif; color: #222; min-height: 200px; }
.gmcompose .askfield:disabled { color: #80868b; }
.gmattach { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 12px; background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 4px; font-size: 13px; color: #1f1f1f; max-width: 100%; }
.gmsig { margin-top: 14px; }
.gmsig img { max-height: 56px; max-width: 200px; width: auto; height: auto; }
.gmfoot { display: flex; align-items: center; gap: 8px; padding: 10px 16px 12px; border-top: 1px solid #f1f3f4; }
button.gmsend { all: unset; cursor: pointer; background: #0b57d0; color: #fff; border-radius: 18px; padding: 0 22px; height: 36px; line-height: 36px; font: 500 14px/36px Arial, Helvetica, sans-serif; letter-spacing: .01em; }
button.gmsend:hover:not(:disabled) { background: #0842a0; box-shadow: 0 1px 3px 1px rgba(0,0,0,.15); }
button.gmsend:disabled { background: #e0e0e0; color: #80868b; cursor: default; }
button.gmschedule, button.gmtext { all: unset; cursor: pointer; height: 34px; line-height: 34px; padding: 0 14px; border-radius: 17px; color: #0b57d0; font: 500 14px/34px Arial, Helvetica, sans-serif; }
button.gmschedule { border: 1px solid #747775; }
button.gmschedule:hover:not(:disabled), button.gmtext:hover { background: rgba(11,87,208,.08); }
button.gmschedule:disabled { color: #80868b; border-color: #e0e0e0; cursor: default; }
.gmspacer { flex: 1; }
/* The Everyone entry, the recipient drop-down and the pictures pasted into an email (the owner, 2026-10-19). */
button.gmrow.gmall { background: #f8fafd; }
button.gmrow.gmall .gmavatar { background: #f3a53a; color: #10131a; }
select.gmwho { flex: 1; min-width: 0; max-width: 100%; font: 14px Arial, Helvetica, sans-serif; color: #202124; background: #fff; border: 1px solid #dadce0; border-radius: 16px; padding: 4px 10px; }
.gmfield .gmaddr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.gmshared { display: flex; flex-wrap: wrap; gap: 8px 12px; background: var(--panel); color: var(--ink); border-radius: 8px; padding: 10px 12px; margin: 4px 0 10px; }
.gmshared > label, .gmshared > .askgroup, .gmshared > p, .gmshared > .sendas, .gmshared > .askgrid { flex: 1 0 100%; display: flex; flex-direction: column; gap: 4px; margin: 0; }
.gmshared > .sendas { flex-direction: row; }
.gmshared > label > span, .gmshared > .askgroup > span { font: 700 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.gmhint { margin: 6px 0 2px; color: #5f6368; font: 12px Arial, Helvetica, sans-serif; }
.gmpics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.gmpics:empty { display: none; }
figure.gmpic { position: relative; margin: 0; width: 132px; border: 1px solid #dadce0; border-radius: 6px; overflow: hidden; background: #f8f9fa; }
figure.gmpic img { display: block; width: 100%; height: 86px; object-fit: cover; }
figure.gmpic figcaption { font: 11.5px Arial, Helvetica, sans-serif; color: #444746; padding: 3px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
figure.gmpic button.gmicon { position: absolute; top: 2px; right: 2px; width: 22px; height: 22px; background: rgba(255,255,255,.9); font-size: 15px; }
label.gmover { display: inline-flex; align-items: center; gap: 4px; color: #444746; font: 12.5px Arial, Helvetica, sans-serif; }
@media (max-width: 900px) {
  .gmshell.haslist { grid-template-columns: minmax(0, 1fr); }
  .gmlist { max-height: 168px; }
  .gmcompose { max-height: none; }
  .gmfoot { flex-wrap: wrap; }
}
/* Settings › Organizations › Message templates. */
.msgtemplates h5 { margin: 10px 0 4px; font: 700 10px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.msgtemplates .orglogo img { max-height: 60px; max-width: 280px; width: auto; height: auto; background: #fff; padding: 4px 8px; border-radius: 4px; }
.msgtemplates .tplfield { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 6px 0; }
.msgtemplates .tplfield > span { font: 700 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.msgtemplates textarea.scalar, .msgtemplates input.scalar { width: 100%; box-sizing: border-box; font-family: var(--data); font-size: 12px; line-height: 1.5; }
.msgtemplates textarea.tplbody { min-height: 240px; resize: vertical; }
.msgtemplates textarea.tplsig { min-height: 48px; resize: vertical; }
.msgtemplates .tokenchips { display: flex; flex-wrap: wrap; gap: 4px; }
.msgtemplates .tokenchip { font: 11px/1.4 var(--data); padding: 2px 7px; border: 1px solid var(--seam-bright); border-radius: 10px; background: var(--panel-hi); color: var(--ink); cursor: pointer; }
.msgtemplates .tokenchip:hover { border-color: var(--amber); color: var(--amber-hi); }
.msgtemplates .tokenchip.block { border-style: dashed; }
.msgtemplates .tokenchip.flag { color: var(--ink-dim); }
.msgtemplates .tplpreviewsubject { font: 700 12px/1.5 var(--data); color: var(--ink); margin: 4px 0; }
.msgtemplates .tplpreview { white-space: pre-wrap; font: 12px/1.45 var(--data); color: var(--ink); background: var(--panel-hi); border: 1px solid var(--seam); border-radius: 4px; padding: 10px 12px; margin: 0; max-height: 420px; overflow: auto; }
.msgtemplates .tplwarnings:empty { display: none; }
.askbox .sendas > b { font: 700 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.askbox .sendas .asktick { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; cursor: pointer; }
.askbox .sendas .asktick span { font: 11.5px var(--data); color: var(--ink); }
.keyhint.failed { color: #ff8a80; }
/* The drop-down under Distribute: the kinds, each with what it carries. */
.cellmenu.distmenu { min-width: 300px; }
.cellmenu.distmenu button { padding: 5px 10px; font-size: 11.5px; }
.cellmenu.distmenu button em { font-size: 9.5px; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
/* Shifts in bulk: the days as a list to tick, the lines as a small table. */
.askbox.askbulk { max-width: 980px; width: min(980px, calc(100vw - 40px)); }
.askbox .bulkhead { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.askbox .bulkhead .cmd { padding: 3px 8px; }
/* The days are one straight column that scrolls, a day a line (the owner, 2026-10-06: "I don't
   like the tabular setup of these checkboxes, show me a straight column that scrolls instead"). */
.askbox .bulkdays {
  flex: 1 0 100%; display: flex; flex-direction: column; max-height: 30vh; overflow-y: auto;
  padding: 2px 0; border: 1px solid var(--seam); box-sizing: border-box;
}
.askbox .bulkdays .asktick { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 3px 10px; font: 11.5px var(--data); color: var(--ink); cursor: pointer; }
.askbox .bulkdays .asktick:hover { background: var(--panel-hi); }
.askbox .bulkdays .asktick .daytype { color: var(--ink-faint); }
.askbox.askbulk .subtable { flex: 1 0 100%; }
.askbox .bulklines input.askfield { width: 100%; box-sizing: border-box; }
.askbox .bulklines td:nth-child(1) { min-width: 220px; }
.askbox .bulklines td:nth-child(2) { min-width: 260px; }
.askbox .bulklines td:nth-child(3) { width: 90px; }
.askbox .bulklines select { width: 100%; }
/* Shifts in bulk's roster (the owner, 2026-10-07: "a scrollable sheet where I can click in the positions"): the filter, a department
   to tick whole and Tick all / None above a small sheet that scrolls in its own box, its headings held at the top, a row a click. */
.askbox.askbulkshifts .bulkrosterbar { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.askbox.askbulkshifts .bulkrosterbar .askfield { width: 240px; }
.askbox.askbulkshifts .bulkrosterbar .askpick { width: auto; min-width: 170px; max-width: 300px; }
.askbox.askbulkshifts .bulkrosterbar .cmd { padding: 3px 8px; }
.askbox.askbulkshifts .bulkroster { max-height: 30vh; overflow: auto; }
.askbox.askbulkshifts .bulkroster thead th { position: sticky; top: 0; z-index: 1; }
.askbox.askbulkshifts .bulkroster tbody tr { cursor: pointer; user-select: none; }
.askbox.askbulkshifts .bulkroster tbody tr:hover td { background: #e8f0fb; }
.askbox.askbulkshifts .bulkroster td.picktick { width: 26px; text-align: center; }
/* A `.sub` is set in capitals: the body of its two small sheets reads in the case names and positions are typed in, and the words
   after a heading ("2 ticked") sit beside it, not raised above it. */
.askbox.askbulkshifts .bulkrostertable tbody td, .askbox.askbulkreview .bulkexisting tbody td { text-transform: none; letter-spacing: normal; }
.askbox.askbulkshifts .bulkhead .keyhint { margin: 0; }
/* Distribute from the call sheet (the owner, 2026-10-28): a filter a facet — its name, Include only or Leave out, the values as
   chips — one under another, then the people the filters keep as a small sheet that scrolls in its own box. */
.askbox.askcalldist .calldistfilters { flex: 1 0 100%; display: flex; flex-direction: column; gap: 6px; }
.askbox.askcalldist .calldistfilter { display: grid; grid-template-columns: 170px 120px minmax(0, 1fr); align-items: start; gap: 8px; }
.askbox.askcalldist .calldistlabel { font: 11.5px var(--data); color: var(--ink); padding-top: 6px; }
.askbox.askcalldist .calldistmode { width: auto; min-width: 0; }
.askbox.askcalldist .askgrid .askpick { width: auto; min-width: 220px; }
/* A filter's chips and its box on one line, as Trucking's Publish… draws its pickers. */
.askbox.askcalldist .calldistfilter .people.pick { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; padding: 0; background: none; border: 0; }
.askbox.askcalldist .calldistfilter .pickchips { margin: 0; }
.askbox.askcalldist .calldistfilter .pickchips .keyhint { margin: 0; line-height: 26px; }
.askbox.askcalldist .calldistfilter .pickrow { flex: 1 1 200px; margin: 0; max-width: 340px; }
.askbox.askcalldist .calldistfilter .pickinput { padding: 4px 8px; }
.askbox.askcalldist .bulkrosterbar { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.askbox.askcalldist .bulkrosterbar .keyhint { margin: 0; }
.askbox.askcalldist .bulkrosterbar .cmd { padding: 3px 8px; }
.askbox.askcalldist .calldistpeople { flex: 1 0 100%; max-height: 34vh; overflow: auto; }
/* Add travel's list: taller, since it is the whole pop-up; a row the app left unticked reads greyed until ticked. */
.askbox.asktravel .bulkroster { max-height: 50vh; }
.askbox.asktravel .bulktravel tbody td { text-transform: none; letter-spacing: normal; }
.askbox.asktravel .bulktravel tbody tr.untickedrow td { color: #7a7a7a; }
/* The roster makes the pop-up tall, so its buttons — and what they said — stay in view as it scrolls. A phone's pop-up already holds its
   buttons at the foot (`.askbox .askrow` below 900px), so this is the desktop's. */
@media (min-width: 901px) {
  .askbox.askbulkshifts > .askrow:last-child { position: sticky; bottom: -18px; z-index: 2; margin: 0 0 -18px; padding: 8px 0 18px; background: var(--panel); align-items: center; }
}
.askbox.askbulkshifts > .askrow:last-child { align-items: center; }
/* Its review of shifts that are already there: a warning over a short list, stood in front of the pop-up it came from. */
.askbox.askbulkreview { width: min(720px, calc(100vw - 40px)); max-width: min(720px, calc(100vw - 40px)); }
.askbox.askbulkreview > p.keyhint { flex: 1 0 100%; margin: 0; }
.askbox.askbulkreview .subtable { flex: 1 0 100%; max-height: 40vh; overflow: auto; }
/* The roster's log of what Distribute sent. */
.sentlog { margin-top: 14px; }
.sentlog summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
/* Finance › Pay policies: the page the crew read, and its link. */
.paypolicypage { margin: 0 0 10px; padding: 10px 12px; }
.paypolicypage summary { cursor: pointer; }
.paypolicypage textarea { width: 100%; box-sizing: border-box; font-family: var(--data); line-height: 1.5; margin: 6px 0; }
.paypolicypage .drow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.paypolicypage a { word-break: break-all; }
/* The RFQ's departments: one drop-down that filters as it is typed in. */
.rfqdepts { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; max-width: 560px; }
.askbox.askdistribute .askgrid select.askpick { min-width: 340px; max-width: 100%; }

/* ---- Settings › History › Time: each person's active time on the show (`timePanel` in web/admin.js) ---- */
.historytabs > .modes { margin: 6px 0 8px; border-bottom: 1px solid var(--seam); align-self: flex-start; }
.timepanel .keyhint a { color: var(--amber); margin-left: 4px; }
.timepanel .gridwrap + .gridwrap, .timepanel .sheetframe + .sheetframe { margin-top: 14px; }

/*
 * A group heading between a sheet's rows (`groupBy` on `grid()`): the production schedule's days
 * (the owner, 2026-10-03: "those days should be listed as headers"). The day's type paints it in
 * the Days sheet's own colour (`tint-day-N`); a date the Days sheet has not got reads grey. A rule
 * above it so each day starts clean; never selected, never typed into.
 */
.grid tbody tr.grouphead th.rownum { background: var(--sheet-head); border-top: 2px solid var(--sheet-rule); }
.grid tbody tr.grouphead td {
  height: 26px; padding: 0 10px; border-top: 2px solid var(--sheet-rule);
  font: 11px/1 var(--data); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default;
}
/* Every group heading alike, on brand (the owner, 2026-10-07: "the headers to all be uniform … a dark background with orange text"). */
/* One look whatever the row's stripe or the sheet's light-table rule says, so `!important` is the honest way to say it. */
main table.grid:not(.sub) tbody tr.grouphead td,
.grid tbody tr.grouphead td { background: var(--panel, #131519) !important; color: var(--amber, #ff8a1f) !important; border-top-color: var(--amber-lo, #c25c07); }
.grid tbody tr.grouphead th.rownum { background: var(--panel, #131519) !important; border-top-color: var(--amber-lo, #c25c07); }
/* The date and weekday read as the Days sheet spells them — "2026-10-27 · Tue", never TUE — so the heading's text matches the day's row (the owner, 2026-10-08). */
.grid tbody tr.grouphead td b { font: 700 11px/1 var(--chrome); letter-spacing: .06em; color: var(--amber-hi, #ffb15a); }
.grid tbody tr.grouphead .groupwords { vertical-align: middle; }
/* The + that adds a shift or a line to the day: small, in the heading row's own gutter, which is sticky at the left
   like every row number, so it is in view however far the sheet is scrolled sideways (the owner, 2026-10-07). */
.grid tbody tr.grouphead th.rownum { padding: 0; text-align: center; }
.grid tbody tr.grouphead .groupadd {
  width: 18px; height: 18px; margin: 0; padding: 0; border: 1px solid var(--amber, #ff8a1f); border-radius: 50%;
  background: transparent; color: var(--amber, #ff8a1f); font: 700 13px/1 var(--data); cursor: pointer; opacity: .75; vertical-align: middle;
}
.grid tbody tr.grouphead .groupadd:hover, .grid tbody tr.grouphead .groupadd:focus-visible { opacity: 1; background: var(--amber, #ff8a1f); color: var(--panel, #131519); }
/*
 * Group by any column (`web/group-by.js`): the person's own headings, each a level deeper indented, the fold caret in the
 * sticky gutter, the column and the value over the row (its words run on over the empty cells beside them and stay at the
 * left as the sheet scrolls sideways), the count, and a subtotal under each column of numbers. A click folds or unfolds.
 */
.grid tbody tr.grouphead.usergroup { cursor: pointer; }
.grid tbody tr.grouphead.usergroup td { padding: 0 6px; border-top-width: 1px; }
.grid tbody tr.grouphead.usergroup.level-0 td, .grid tbody tr.grouphead.usergroup.level-0 th.rownum { border-top-width: 2px; }
.grid tbody tr.grouphead.usergroup td.grouplabel { overflow: visible; z-index: 2; }
.grid tbody tr.grouphead.usergroup td.grouplabel:not(.frozen) { position: sticky; left: 46px; }
html.phone .grid tbody tr.grouphead.usergroup td.grouplabel:not(.frozen) { left: 38px; }
.grid tbody tr.grouphead.usergroup .groupwords { display: inline-flex; align-items: baseline; gap: 8px; }
.grid tbody tr.grouphead.usergroup .groupcol { font: 600 9.5px/1 var(--chrome); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.grid tbody tr.grouphead.usergroup .groupvalue.empty { font-style: italic; opacity: .75; }
.grid tbody tr.grouphead.usergroup .groupcount { font: 10px/1 var(--data); opacity: .75; }
.grid tbody tr.grouphead.usergroup td.groupsum { text-align: right; font: 700 11px/1 var(--data); }
.grid tbody tr.grouphead .groupfold {
  width: 20px; height: 20px; margin: 0; padding: 0; border: 0; background: transparent;
  color: var(--amber, #ff8a1f); font: 700 12px/1 var(--data); cursor: pointer;
}
.grid tbody tr.grouphead .groupfold:hover, .grid tbody tr.grouphead .groupfold:focus-visible { color: var(--amber-hi, #ffb15a); }
html.phone .grid tbody tr.grouphead .groupfold { width: 32px; height: 32px; font-size: 15px; }
/* View travel info on a person's heading over their flights (`flights` in web/labor.js): a pill after the words. */
.grid tbody tr.grouphead .grouptravel {
  margin-left: 12px; padding: 1px 8px; border: 1px solid currentColor; border-radius: 999px;
  background: transparent; color: inherit; font: 600 10px/1.4 var(--data); cursor: pointer; opacity: .8; vertical-align: middle;
}
.grid tbody tr.grouphead .grouptravel:hover, .grid tbody tr.grouphead .grouptravel:focus-visible { opacity: 1; background: var(--amber, #ff8a1f); color: var(--panel, #131519); }
/* The traveler's note under the heading's line (2026-10-20): one line, cut with an ellipsis, the whole on hover — never pushing View travel info away. */
.grid tbody tr.grouphead .groupnote { display: block; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; opacity: .85; text-transform: none; }
/* The pop-up's details: a field of the form a line — its label, its value in a cell of its own, and Copy, which takes the value
   alone (the owner, 2026-10-08). A `.sub` is set in capitals; the values read as they were typed, so what is shown is what is copied. */
.askbox.asktravelinfo table.travelinfo th { text-align: left; font-weight: 600; color: var(--ink-faint); padding: 4px 16px 4px 8px; white-space: nowrap; }
.askbox.asktravelinfo table.travelinfo td { padding: 4px 12px 4px 0; user-select: text; }
.askbox.asktravelinfo table.travelinfo tbody td.value { text-transform: none; letter-spacing: normal; }
.askbox.asktravelinfo table.travelinfo td.copycell { width: 1%; padding: 2px 8px; text-align: right; white-space: nowrap; }
.askbox.asktravelinfo .copyvalue {
  min-width: 64px; padding: 2px 10px; border: 1px solid var(--sheet-rule); border-radius: 4px;
  background: #fff; color: var(--sheet-ink); font: 600 11px/1.4 var(--data); cursor: pointer;
}
.askbox.asktravelinfo .copyvalue:hover, .askbox.asktravelinfo .copyvalue:focus-visible { border-color: #0b63c5; color: #0b63c5; outline: none; }
.askbox.asktravelinfo .copyvalue.copied { border-color: #2e8b57; color: #2e8b57; }
/* The field the browser's own copy reads from where there is no clipboard API: off the screen, never seen. */
textarea.copybuffer { position: fixed; top: -1000px; left: -1000px; width: 1px; height: 1px; opacity: 0; }

/* Trucking › Footage (`web/footage.js`): the trailers, the feet, the weight, read across a room. */
/* Logistics › Equipment summary (`web/staging-summary.js`; the owner, 2026-10-28): the totals, then every line under its staging color. */
.stagingsummary .stagingspacer { height: 14px; }
.stagingsummary .stagingheading { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.stagingsummary .stagingswatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--seam-bright); background: transparent; }
.footage .footcards { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 8px; }
.footage .footcard { display: flex; flex-direction: column; gap: 2px; min-width: 170px; padding: 10px 14px; background: var(--panel-hi); border: 1px solid var(--seam); border-radius: 6px; }
.footage .footcard strong { font-size: 26px; line-height: 1.1; color: var(--amber); font-variant-numeric: tabular-nums; }
.footage .footcard.warn strong { color: #ff6b6b; }
.footage .footlabel { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.75; }
.footage .footsub { font-size: 12px; opacity: 0.8; }
.footage .footrules { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 4px 0 10px; }
.footage .footfield { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.footage .footfigure { width: 96px; }
.footage .footunsized { margin-top: 18px; }
@media (max-width: 900px) {
  .footage .footcard { min-width: calc(50% - 6px); }
  .footage .footrules { flex-direction: column; align-items: stretch; }
}

/* Inventory › Order for a list vendor — Alford Media (web/list-order.js): the departments it
   takes, the areas as a strip of names, and the sheet a column an area. */
.listorders { margin-top: 18px; }
.listorder + .listorder { margin-top: 28px; }
.listorder .ordertitlerow { flex-wrap: wrap; row-gap: 6px; }
.listorder .ordertitlerow .commands { margin: 0; }
.listdepts { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; font: 12px/1.4 var(--chrome); color: var(--ink); }
.listdept { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.listdept small { color: var(--amber); font-variant-numeric: tabular-nums; }
.listdept.warn { color: var(--amber); }
.listareas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 2px; font: 12px/1.4 var(--chrome); }
.listareas .footlabel { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.75; }
.listarea { display: inline-flex; align-items: center; gap: 2px; }
.listareas input[type="text"] { font: 12px/1.4 var(--chrome); padding: 2px 6px; }
.listread { display: inline-flex; align-items: center; gap: 8px; }
.listsheet .empty + .listread { margin-top: 6px; }
.grid tbody td.tint-ordered { font-weight: 700; color: var(--sheet-ink, inherit); }
@media (max-width: 899px) {
  .listorder .ordertitlerow { gap: 8px; }
  .listareas input[type="text"] { max-width: 60vw; }
}
/* Inventory › Order: one order a vendor, picked at the top (a different vendor is a different order). */
.ordervendors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0 10px; font: 12px/1.4 var(--chrome); }
.ordervendors .footlabel { font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.75; margin-right: 4px; }
.ordervendor { font: 600 12px/1.2 var(--chrome); padding: 6px 12px; border-radius: 6px; border: 1px solid var(--seam); background: var(--panel-hi); color: var(--ink); cursor: pointer; }
.ordervendor:hover { border-color: var(--amber); }
.ordervendor.on { background: var(--amber); border-color: var(--amber); color: #101317; cursor: default; }
/* The BOM order in front, in plain words: its title, and the file it was loaded from as a link (the owner, 2026-10-07). */
.bomabout { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: -4px 0 10px; }
.bomabout .bomtitlelabel { display: inline-flex; align-items: center; gap: 6px; }
.bomabout .footlabel { font: 11px/1.4 var(--chrome); letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.75; }
.bomabout .bomtitle { width: 220px; max-width: 60vw; padding: 4px 8px; border: 1px solid var(--seam); background: #0e1114; color: var(--ink); font: 13px/1.3 var(--chrome); }
.bomabout .bomtitle:focus { outline: none; border-color: var(--amber); }
.bomabout .bomfrom { margin: 0; flex: 1 1 320px; }
.bomfilelink { color: var(--amber-hi); text-decoration: underline; word-break: break-all; }
/* Fix on a line two orders hold: the orders ranked, the top one picked (the owner, 2026-10-07). */
.askbox.askwhichorder { max-width: min(820px, calc(100vw - 40px)); }
.askwhichorder select.askfield { min-width: 300px; }
.askwhichorder input[type="radio"] { accent-color: var(--amber); }
.askwhichorder .whichorders { flex: 1 0 100%; display: flex; flex-direction: column; gap: 6px; }
.askwhichorder .whichorder { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; border: 1px solid var(--seam); border-radius: 8px; cursor: pointer; }
.askwhichorder .whichorder:has(input:checked) { border-color: var(--amber); }
.askwhichorder .whichorder.cannot { opacity: 0.55; cursor: default; }
.askwhichorder .whichorder span { opacity: 0.85; }

/*
 * Adds go on, on Inventory › Order and Sub-orders, is one drop-down (`pickDown` in web/dropdown.js; the owner,
 * 2026-10-07, on MSFT Ignite 26's 24 sub-orders, once a large chip each in four rows: "they take up a lot of
 * space, and the spreadsheet only shows eight lines … more like a table, in a single column, or compact"). The
 * face is one line; the list is one column in a monospace face, its columns at the same tabs, the number
 * right-aligned and the picked row ticked — the look of the review's case picker (`pickrows`). It hangs in the
 * window's own coordinates (the page's main box scrolls and would clip it), over the sheets.
 */
.pickdown { position: relative; margin: 6px 0 10px; }
.pickdown-btn {
  display: inline-block; max-width: 100%; padding: 6px 12px; border: 1px solid var(--seam); border-radius: 6px;
  background: var(--panel-hi); color: var(--ink); font: 600 12px/1.2 var(--chrome); text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: top; cursor: pointer;
}
.pickdown-btn:hover, .pickdown-btn[aria-expanded="true"] { border-color: var(--amber); }
.pickdown-btn:focus-visible { outline: 1px solid var(--amber-hi); outline-offset: 1px; }
.pickdown-btn .pickdown-label { font-weight: 400; opacity: 0.75; }
.pickdown-btn .pickdown-value { color: var(--amber-hi); font-weight: 600; }
.pickdown-menu { position: fixed; z-index: 60; min-width: min(340px, calc(100vw - 16px)); max-width: calc(100vw - 16px); padding: 4px 0; }
.pickdown-menu > * { flex: none; }
/* One scroll box for the heading and the rows (the owner, 2026-10-10: the BOM order list "doesn't scroll well"): the heading stuck at its top, the wheel on any row scrolling the rows. */
.pickdown-menu > .pickdown-scroll { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: auto; }
.pickdown-menu .pickdown-scroll > .pickdown-head { position: sticky; top: 0; z-index: 1; background: var(--panel); }
/* The heading and the list as wide as their rows, so a window narrower than a row scrolls the two together. */
.pickdown-menu .pickdown-scroll > * { min-width: max-content; }
.pickdown-menu .pickdown-scroll > .pickdown-list { flex: 1 1 auto; min-height: 0; }
.pickdown-menu .pickdown-filter {
  margin: 4px 8px 6px; padding: 6px 9px; border: 1px solid var(--seam); background: #0e1114; color: var(--ink); font: 12px/1.3 var(--data);
}
.pickdown-menu .pickdown-filter:focus { outline: none; border-color: var(--amber); }
/* The columns are in ch, so the heading and every row are laid out in the same monospace face (the heading's words are set smaller on their cells). */
.pickdown-menu .pickdown-head, .pickdown-menu .pickdown-row {
  display: grid; grid-template-columns: var(--pick-cols); column-gap: 2ch; align-items: baseline; padding: 4px 14px 4px 30px;
  font: 12px/1.35 var(--data);
}
.pickdown-menu .pickdown-head { padding-top: 2px; padding-bottom: 6px; border-bottom: 1px solid var(--seam); color: var(--ink-faint); }
.pickdown-menu .pickdown-head .pickdown-cell { font: 600 9px/1.35 var(--chrome); letter-spacing: .12em; text-transform: uppercase; }
.pickdown-menu .pickdown-head .pickdown-cell.right { margin-right: -.12em; }
.pickdown-menu .pickdown-list { position: relative; overflow: visible; }
.pickdown-menu .pickdown-row { position: relative; width: 100%; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.pickdown-menu .pickdown-row[hidden] { display: none; }
.pickdown-menu .pickdown-row:hover, .pickdown-menu .pickdown-row:focus { outline: none; color: var(--ground); background: var(--metal); }
.pickdown-menu .pickdown-row.on { color: var(--amber-hi); font-weight: 700; }
.pickdown-menu .pickdown-row.on::before { content: '\2713'; position: absolute; left: 11px; }
.pickdown-menu .pickdown-row.on:hover, .pickdown-menu .pickdown-row.on:focus { color: var(--ground); }
.pickdown-menu .pickdown-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pickdown-menu .pickdown-cell.right { text-align: right; }
.pickdown-menu .pickdown-whole .pickdown-cell { grid-column: 1 / -1; }
.pickdown-menu .pickdown-empty { margin: 6px 14px; color: var(--ink-faint); font: 12px/1.3 var(--data); }
.pickdown-menu .pickdown-extra { margin-top: 4px; border-top: 1px solid var(--seam); }
/* The Order page's title line stays one line (the owner, 2026-10-07): cut with an ellipsis where the window is narrow, said whole on hover. */
.keyhint.orderline { max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/*
 * Adds go on narrows the Order sheets to one sub-order (the owner, 2026-10-07: "an option to have all orders selected,
 * or if I select a sub-order …"): a line under the drop-down says what they hold. Right-click › Split… and a quantity
 * typed on a show with two or more sub-orders ask in a pop-up whose list of the other orders is a list box in the
 * pop-up itself — `pickDown` hangs its list in the window's coordinates, which a pop-up's own transform moves — in the
 * picker's monospace face, the columns at the same tabs, with what each holds of the line at the end of its row.
 */
.keyhint.orderscope { max-width: none; margin: 0 0 8px; }
.askbox.asksplit, .askbox.askorderchange { width: min(700px, calc(100vw - 40px)); max-width: min(700px, calc(100vw - 40px)); align-content: flex-start; }
.askbox p.dim { color: var(--ink-faint); }
.askbox .askchangebody { flex: 1 0 100%; display: flex; flex-direction: column; gap: 10px; }
/* In a column the base rules' `flex: 1 0 100%` would be a basis of the whole height: each step's parts take their own. */
.askbox .askchangebody > *, .askbox .askchangebody > .asksplitrow, .askbox .askchangebody > .askrow { flex: 0 0 auto; }
.askbox .askchangebody p { margin: 0; }
.askbox .asksplitrow { flex: 1 0 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; }
.askbox .asksplitrow > span:first-child { min-width: 118px; font: 700 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.askbox .asksplitrow .orderchoicebox { flex: 1 1 100%; min-width: 0; }
.askbox p.asksplitwhy { min-height: 1.5em; color: var(--amber-hi); }
/* Several sticks joined in groups (the owner, 2026-10-27): the sizes as buttons, the groups typed, the pieces they make. */
.askbox.askjoingroups { width: min(560px, calc(100vw - 40px)); max-width: min(560px, calc(100vw - 40px)); align-content: flex-start; }
.askbox.askjoingroups .joingroupsizes { justify-content: flex-start; gap: 6px; }
.askbox.askjoingroups .joingroupsfield { flex: 1; min-width: 180px; }
.askbox.askjoingroups .joingroupslist { flex: 1 0 100%; margin: 0; padding: 0 0 0 18px; max-height: 200px; overflow: auto; }
.askbox.askjoingroups p.joingroupswhy { flex: 1 0 100%; margin: 0; min-height: 1.5em; }
.askbox.askjoingroups p.joingroupswhy.bad { color: var(--amber-hi); }
.orderchoicebox { display: flex; flex-direction: column; gap: 4px; }
.orderchoicebox .orderfind { width: 100%; box-sizing: border-box; padding: 6px 9px; font: 12px/1.3 var(--data); }
.orderchoicehead { padding: 2px 8px; font: 600 10px/1.35 var(--data); color: var(--ink-faint); white-space: pre; overflow: hidden; }
.orderchoice {
  width: 100%; box-sizing: border-box; padding: 2px 0; background: #0e1114; border: 1px solid var(--seam); color: var(--ink);
  font: 12px/1.45 var(--data); white-space: pre; overflow: auto;
}
.orderchoice:focus { outline: none; border-color: var(--amber); }
.orderchoice option { padding: 2px 8px; }
.orderchoice option:checked { background: var(--metal); color: var(--ground); }

/* Office snacks: the QR beside its link (Management › Food and beverage). */
.snacklink { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.snacklink .snackqr { background: #fff; padding: 4px; flex: 0 0 auto; }
.snacklink .snacklinkwords { min-width: 0; flex: 1 1 auto; }
.snacklink .importbar { flex-wrap: wrap; }
@media (max-width: 900px) { .snacklink { flex-wrap: wrap; } }

/* The quick label (Cases › Quick label): a 6 x 4 drawn at 1.4 px a point, typed into. */
.quicklabel { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.quicklabel .qsheet { width: 605px; height: 403px; background: #fff; color: #000; border: 1px solid #888; box-shadow: 0 2px 8px rgba(0,0,0,.4); display: flex; flex-direction: column; justify-content: center; padding: 20px; box-sizing: border-box; overflow: hidden; }
.quicklabel .qline { outline: none; text-align: center; font-family: Arial, Helvetica, sans-serif; font-weight: 700; line-height: 1.18; white-space: nowrap; overflow: hidden; min-height: 1em; }
.quicklabel .qline:focus { box-shadow: inset 0 0 0 1px var(--amber); }
.quicklabel .qline.bar { background: #000; color: #fff; }
.quicklabel .qline.shade { background: #d1d1d1; }
.quicklabel .qline.empty::before { content: attr(data-hint); color: #aaa; font-weight: 400; }
.quicklabel .qtools { flex: 1 1 260px; min-width: 240px; }
.quicklabel .qlinetools { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 3px 0; }
.quicklabel .qlinetools .qname { font: 600 10px/1 var(--chrome); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); width: 44px; }
.quicklabel .qlinetools button { padding: 2px 8px; font-size: 10px; }
.quicklabel .qlinetools button[aria-pressed="true"] { background: var(--amber-lo); color: var(--ground); }
/* The name and the saved labels beside the label (the owner, 2026-10-07): a name box and Save above the page, the list beside it. */
.quicklabel .qleft { display: flex; flex-direction: column; gap: 8px; max-width: 100%; }
.quicklabel .qnamebar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.quicklabel .qnamebox, .quicklabel .qfind {
  flex: 1 1 220px; min-width: 160px; padding: 6px 9px; background: #0e1114; border: 1px solid var(--seam);
  color: var(--ink); font-family: var(--data); font-size: 12px;
}
.quicklabel .qnamebox:focus, .quicklabel .qfind:focus { outline: none; border-color: var(--amber); }
.quicklabel .qnamebar .cmd[hidden], .quicklabel .qsaved .qfind[hidden] { display: none; }
.quicklabel .qsaved { margin-top: 14px; }
.quicklabel .qsavedrows { max-height: 340px; overflow-y: auto; }
.quicklabel .qsaved .qfind { display: block; width: 100%; margin: 4px 0 6px; }
.quicklabel .qsavedrow { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border: 1px solid var(--seam); margin: 3px 0; background: var(--panel); }
.quicklabel .qsavedrow.open { border-color: var(--amber); }
.quicklabel .qsavedtext { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.quicklabel .qsavedtext b { font-size: 12px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quicklabel .qsavedtext span { font-size: 11px; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quicklabel .qsavedbtns { display: flex; gap: 4px; flex: 0 0 auto; }
/* A saved label's Print is `.qsavedprint`, never `.printcmd`: Advance hides every Print button (`body.mode-advance .printcmd`), and this is the one it leaves (the owner, 2026-10-07: "show print on a saved quick label"). */
.quicklabel .qsavedbtns button { padding: 2px 8px; font-size: 10px; }
.quicklabel .qhistory { margin-top: 14px; }
.quicklabel .qhistory button { display: block; width: 100%; text-align: left; margin: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) { .quicklabel .qleft { width: 100%; } .quicklabel .qsheet { width: 100%; height: auto; aspect-ratio: 3 / 2; } }

/* Add venue lines (Management › Schedule › Production schedule): the catalogue as a table inside the pop-up. */
.askbox.askvenue { width: min(1180px, 96vw); }
.askbox.askvenue .subtable { max-height: 48vh; overflow: auto; margin: 6px 0; }
.askbox.askvenue .venuelines td input.askfield, .askbox.askvenue .venuelines td select.askpick { width: 100%; min-width: 64px; box-sizing: border-box; }
.askbox.askvenue .venuelines td input.askfield.wide { min-width: 180px; }
.askbox.askvenue .venuelines td input.askfield.short { min-width: 84px; }
.askbox.askvenue .venuelines tr.grouphead td { background: var(--panel-hi); }

/* A device on the Devices sheet seated in no rack build: its name in italics on the sheet's own
   stripe, "Not racked" on hover (the owner, 2026-10-03; italics since 2026-10-06 — the amber on
   dark read as a fault). */
.grid tbody tr:nth-child(n) td.tint-notracked { background: var(--sheet); color: var(--sheet-ink); font-style: italic; }
.grid tbody tr:nth-child(even) td.tint-notracked { background: var(--sheet-alt); }

/* A sub-order's Return the app laid, from the vendor's Consolidated tab or its master order (the owner, 2026-10-07): italics on the
   sheet's own stripe, the way a default reads, until a date is typed over it. */
.grid tbody tr:nth-child(n) td.tint-laid { background: var(--sheet); color: var(--sheet-ink); font-style: italic; }
.grid tbody tr:nth-child(even) td.tint-laid { background: var(--sheet-alt); }


/* Paperwork › Instructions (2026-10-04; files with versions, 2026-10-07): the header as every PDF prints it, and the versions pop-up. */
.askversions .floortable { max-height: 50vh; overflow: auto; margin: 8px 0; }
.askversions td { white-space: nowrap; }
.askversions td button + button { margin-left: 6px; }
.instrhead {
  display: grid; grid-template-columns: 170px 1fr 200px; align-items: stretch;
  border: 1.5px solid #666; background: #fff; color: #000; margin: 6px 0 8px;
  font-family: var(--data); font-size: 11px; line-height: 1.3;
}
.instrhead > div { padding: 5px 8px; display: flex; flex-direction: column; min-width: 0; }
.instrhead .ihl { border-right: 1px solid #666; }
.instrhead .ihr { border-left: 1px solid #666; text-align: right; }
.instrhead b { font-size: 15px; line-height: 1.2; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.instrhead .iht { justify-content: center; align-items: center; font-size: 18px; font-weight: 700; text-align: center; }
.instrhead span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 900px) {
  .instrhead { grid-template-columns: 1fr; }
  .instrhead .ihl, .instrhead .ihr { border: 0; text-align: left; }
}

/* Review's kind headings fold their findings on a click (the owner, 2026-10-04); the Position refresh pop-up. */
.review-kind { cursor: pointer; user-select: none; }
.review-kind .reviewcaret { width: 10px; color: var(--ink-faint); font-weight: 400; font-size: 11px; letter-spacing: 0; }
.review-group[hidden] { display: none; }
/* Expand all and Collapse all on the head, beside the count, drawn as a heading's Ignore all is (the owner, 2026-10-26). */
.reviewhead .reviewfolds { display: inline-flex; gap: 6px; }
.reviewhead .reviewfold {
  padding: 3px 10px; border: 1px solid var(--seam); background: transparent; color: var(--ink-faint);
  font: 600 9px/1.6 var(--chrome); letter-spacing: .12em; text-transform: uppercase; cursor: pointer;
}
.reviewhead .reviewfold:hover:not(:disabled) { border-color: var(--amber-lo); color: var(--amber); }
.reviewhead .reviewfold:disabled { opacity: .4; cursor: default; }
/* A heading's buttons at its right — Copy UIDs, Snooze ▾ or Wake, Ignore all — and a kind asleep, dimmed with when it wakes (2026-10-26). */
.review-kind .reviewkindacts { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.review-kind .reviewkindacts .reviewall { margin-left: 0; }
.review-kind .reviewsnooze { position: relative; display: inline-flex; }
.review-kind .reviewsnoozemenu { min-width: 120px; }
.review-kind.snoozed { color: var(--ink-faint); }
.review-kind .reviewsnoozed { font: 400 10.5px/1 var(--data); letter-spacing: 0; text-transform: none; color: var(--ink-faint); }
/* Which light it is, as it was and as the drawing has it now: a small table under the finding, a changed cell in amber. */
.reviewfacts { width: auto; margin: 5px 0 2px; border-collapse: collapse; font: 11px/1.35 var(--data); }
.reviewfacts th, .reviewfacts td { padding: 2px 10px 2px 0; text-align: left; white-space: nowrap; }
.reviewfacts thead th { color: var(--ink-faint); font: 600 9px/1.4 var(--chrome); letter-spacing: .12em; text-transform: uppercase; }
.reviewfacts tbody th { color: var(--ink-faint); font-weight: 600; }
.reviewfacts td { color: var(--ink); }
.reviewfacts td.changed { color: var(--amber); font-weight: 600; }
.askdupitem p { margin: 0; }
.askdupitem + .askdupitem { margin-top: 8px; }
.askconflicts .floortable { max-height: 50vh; overflow: auto; margin: 8px 0; }
.askconflicts td label { display: flex; gap: 6px; align-items: center; cursor: pointer; white-space: nowrap; }
.askconflicts .askrow + .floortable { margin-top: 4px; }

/* Library tags (2026-10-23): chips on each row and a bar of them above the list, each a filter at a click. */
.library .libtags { width: 220px; max-width: 220px; padding: 3px 8px; font-size: 12px; }
.library .libtagbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; }
.library .libtagbar > .keyhint { font: 700 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); margin: 0 6px 0 0; }
.library .trkchip, .asklibtags .trkchip { padding: 1px 9px; border: 1px solid var(--seam-bright); border-radius: 999px; background: transparent; color: var(--ink); font: 600 11px/1.6 var(--data); cursor: pointer; }
.library .trkchip:hover, .asklibtags .trkchip:hover { border-color: var(--amber-lo); color: var(--amber-hi); }
.library .trkchip.on { background: var(--amber); border-color: var(--amber); color: #14171b; }
.library .trkchip.trknone { border-style: dashed; }
.library .libtagcell .libtagwrap { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; max-width: 220px; }
.library .libtagedit { font-size: 11px; color: var(--ink-faint); }
.asklibtags .libtagoffer { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 8px; }
.asklibtags .askfield { flex: 1 0 100%; }
/* Logistics › Addresses (2026-10-23): a verified address reads greened; the lookup pop-up lists what the map found. */
.grid tbody tr:nth-child(n) td.tint-verified { background: #e6f2e6; color: #1e4a24; }
.askbox.askaddress { max-width: 560px; }
.askaddress .askfield { flex: 1 0 100%; }
.askaddress .addrfound { flex: 1 0 100%; display: flex; flex-direction: column; gap: 6px; max-height: 40vh; overflow: auto; }
.askaddress .addroption { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: baseline; padding: 4px 6px; border: 1px solid var(--seam-bright); cursor: pointer; }
.askaddress .addroption b { color: var(--ink); }
.askaddress .addroption span { grid-column: 2; color: var(--ink-faint); font-family: var(--data); font-size: 11px; }
/* Publish… on Trucking (the owner, 2026-10-07): the trips to tick, and the quick picks — by truck, by pickup day, by
   category — that tick them. The trips are a light table in the dark pop-up, as every pop-up that holds a sheet. */
.askbox.asktrucking { max-width: min(980px, calc(100vw - 40px)); width: min(980px, calc(100vw - 40px)); align-content: flex-start; }
/* A block, not a column of flex items: `.askbox p` gives every paragraph `flex: 1 0 100%`, which in a column took the whole height. */
.asktrucking .trkbody { flex: 1 0 100%; min-width: 0; }
.asktrucking .trkbody > * { margin: 0 0 8px; }
.asktrucking .trkpicks { display: flex; flex-direction: column; gap: 6px; }
.asktrucking .trkpickrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.asktrucking .trkpickrow > span { flex: 0 0 92px; font: 700 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.asktrucking .trkchip { padding: 2px 10px; border: 1px solid var(--seam-bright); border-radius: 999px; background: transparent; color: var(--ink); font: 600 11px/1.6 var(--data); cursor: pointer; }
.asktrucking .trkchip:hover { border-color: var(--amber-lo); color: var(--amber-hi); }
.asktrucking .trkchip.on { background: var(--amber); border-color: var(--amber); color: #14171b; }
.asktrucking .trkchip.trkevery, .asktrucking .trkchip.trknone { border-style: dashed; }
/* The trucks and the addresses as pickers (the owner, 2026-10-23): the chips of what is picked, a box that finds the rest. */
.asktrucking .trkpickerrow { align-items: flex-start; }
.asktrucking .trkpicker { flex: 1 1 320px; min-width: 0; }
.asktrucking .trkpicker .people.pick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.asktrucking .trkpicker .pickchips { margin: 0; }
.asktrucking .trkpicker .pickchips .keyhint { margin: 0; line-height: 24px; }
.asktrucking .trkpicker .pickrow { position: relative; flex: 1 1 200px; }
.asktrucking .trkpicker .pickinput { width: 100%; max-width: 260px; padding: 3px 8px; font-size: 12px; }
.asktrucking .trkpicker .picklist { z-index: 30; min-width: 260px; max-height: 240px; }
.asktrucking .trkpicker .pickrow { margin: 0; }
.asktrucking .trktrips { flex: 0 1 auto; max-height: 38vh; }
.asktrucking .trktrips td, .asktrucking .trktrips th { white-space: nowrap; }
.asktrucking .trktrips td:first-child, .asktrucking .trktrips th:first-child { width: 28px; text-align: center; }
.asktrucking .trktrips input[type="checkbox"] { margin: 0; vertical-align: middle; }
.asktrucking .trkactions { align-items: center; gap: 10px; margin: 4px 0 0; }
.asktrucking .trkactions .trkbook { flex-direction: row; align-items: center; gap: 6px; }
.asktrucking .trkactions .trkbook span { font: 600 10px/1.6 var(--chrome); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.asktrucking .trkresult a { color: var(--amber-hi); }
.asktrucking .trkresult ul { margin: 4px 0 0; padding-left: 18px; font: 11.5px/1.5 var(--data); }
.asktrucking .trkresult .dim { color: var(--ink-faint); }
/* ---- Management (the owner, 2026-10-07): Add wristbands…, Credentials by rule, Comm request, Key cards ---- */
/* Add wristbands…: the kind, the days as a straight column, the counts as a small table. */
.askbox.askwristbands { max-width: 900px; width: min(900px, calc(100vw - 40px)); }
.askbox.askwristbands > p.keyhint { flex: 1 0 100%; margin: 0; }
.askbox.askwristbands > b, .askbox.askwristbands > .keyhint, .askbox.askwristbands > em.askcode { flex: 1 0 100%; margin-bottom: 0; }
.askbox.askwristbands > b { margin-top: 10px; }
.askbox.askwristbands .wbkinds { flex-direction: column; align-items: flex-start; }
.askbox.askwristbands .tri { flex: 1 0 100%; flex-wrap: wrap; gap: 6px; }
.askbox.askwristbands .tri button + button { border-left: 1px solid var(--seam); }
.askbox.askwristbands .wbbody { flex: 1 0 100%; }
.askbox.askwristbands .wbbody .subtable { max-height: 34vh; overflow: auto; margin: 6px 0; }
.askbox.askwristbands .wblines td input.askfield { width: 100%; min-width: 64px; box-sizing: border-box; }
.askbox.askwristbands .wbbody .drow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0; }
/* Credentials: the two ticks over the counts, as the Distribute window's Send as is drawn. */
.credrules { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 8px 0; }
.credrules > b { font: 700 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.credrules .asktick { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; cursor: pointer; }
.credrules .asktick span { font: 11.5px var(--data); color: var(--ink); }
.credrules .keyhint { flex: 1 0 100%; margin: 0; }
/* Comm request's Add people… and Channels…, Key cards' picker: a picker of chips in a pop-up. */
.askbox.askcommpeople, .askbox.askkeycards { max-width: 760px; width: min(760px, calc(100vw - 40px)); }
.askbox.askcommpeople > p.keyhint, .askbox.askkeycards > p.keyhint, .askbox.askcommchannels > p.keyhint { flex: 1 0 100%; margin: 0; }
.askbox.askcommpeople > .askgroup, .askbox.askkeycards > .askgroup, .askbox.askcommpeople > div > .askgroup { flex: 1 0 100%; display: flex; flex-direction: column; gap: 4px; }
.askbox.askcommpeople > .askgroup > span, .askbox.askkeycards > .askgroup > span, .askbox.askcommpeople > div > .askgroup > span { font: 700 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.askbox.askcommpeople > div { flex: 1 0 100%; }
.askbox.askcommchannels { max-width: 520px; width: min(520px, calc(100vw - 40px)); }
.askbox.askcommchannels ul { flex: 1 0 100%; margin: 4px 0 4px 18px; padding: 0; }
.askbox.askcommchannels textarea.askfield { flex: 1 0 100%; width: 100%; box-sizing: border-box; font-family: var(--data); line-height: 1.5; }

/* Trucking › Dashboard: every truck as a card with its status, a filter, and the wall link (the owner, 2026-10-07). */
.truckdash { padding: 4px 2px 40px; }
.truckdash .dashtools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 6px 0 10px; }
.truckdash .dashchips { display: flex; flex-wrap: wrap; gap: 6px; }
.truckdash .dashchip { padding: 4px 11px; font: 700 12px/1.3 var(--chrome); color: var(--ink); background: var(--panel-hi); border: 2px solid var(--st, var(--seam-bright)); border-radius: 999px; cursor: pointer; }
.truckdash .dashchip b { margin-left: 2px; font-variant-numeric: tabular-nums; }
.truckdash .dashchip.on { color: #0b0c0e; background: var(--st, var(--amber)); }
.truckdash .dashstamp { font-size: 11px; color: var(--ink-dim); }
.truckdash .wallrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 12px; padding: 8px 12px; background: var(--panel-hi); border: 1px solid var(--seam); border-radius: 6px; }
.truckdash .wallrow > b { font: 700 11px/1 var(--chrome); letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.truckdash .wallrow .walladdress { flex: 1 1 280px; min-width: 0; padding: 5px 8px; font: 12px var(--data); color: var(--ink); background: var(--ground); border: 1px solid var(--seam-bright); border-radius: 4px; }
.truckdash .wallrow button, .truckdash .wallrow a.wallsee { padding: 5px 12px; font: 700 12px var(--chrome); color: var(--ink); text-decoration: none; background: var(--plate); border: 1px solid var(--seam-bright); border-radius: 4px; cursor: pointer; }
.truckdash .wallrow button.wallopen { color: #0b0c0e; background: var(--metal); border-color: var(--amber-lo); }
.truckdash .wallrow .wallqr { background: #fff; padding: 4px; border-radius: 4px; }
.truckdash .wallrow .wallnote { flex: 1 0 100%; color: var(--ink-dim); }
.truckdash .dashgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.truckdash .dashcard { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--panel-hi); border: 1px solid var(--seam); border-left: 6px solid var(--st, var(--seam-bright)); border-radius: 6px; }
.truckdash .dashhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.truckdash .dashid { font-size: 26px; line-height: 1.1; letter-spacing: .02em; }
.truckdash .dashtrailer { color: var(--ink-dim); }
.truckdash .dashwhat { color: var(--ink-dim); }
.truckdash .dashstatus { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.truckdash .dashword, .truckdash .dashpick { font: 700 15px var(--chrome); color: var(--st); }
.truckdash .dashpick { padding: 3px 6px; background: var(--ground); border: 2px solid var(--st); border-radius: 4px; }
.truckdash .dashstatus small { color: var(--ink-dim); }
.truckdash .dashleg em { font-style: normal; color: var(--ink-dim); }
.truckdash .dashcases { display: flex; align-items: center; gap: 8px; }
.truckdash .dashbar { flex: 1 1 auto; height: 7px; background: var(--ground); border: 1px solid var(--seam); border-radius: 4px; overflow: hidden; }
.truckdash .dashbar i { display: block; height: 100%; background: var(--st); }
.truckdash .dashcases span { white-space: nowrap; color: var(--ink-dim); }
.truckdash .dashcases b { color: var(--ink); font-variant-numeric: tabular-nums; }
.truckdash .dashdriver { color: var(--ink-dim); }
/* A driver's Picked up or In dock waiting for a person to accept or dismiss it (the owner, 2026-10-07): beside the status, which it has not moved. */
.truckdash .dashreport { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 2px 0; padding: 6px 8px; background: var(--ground); border: 1px dashed var(--amber); border-radius: 4px; }
.truckdash .dashreportwords b { color: var(--amber); }
.truckdash .dashreport small { color: var(--ink-dim); }
.truckdash .dashreportacts { display: inline-flex; gap: 6px; margin-left: auto; }
.truckdash .dashreportacts button { padding: 3px 12px; font: 700 12px var(--chrome); color: var(--ink); background: var(--plate); border: 1px solid var(--seam-bright); border-radius: 4px; cursor: pointer; }
.truckdash .dashreportacts button.reportaccept { color: #0b0c0e; background: var(--metal); border-color: var(--amber-lo); }
.truckdash .dashreportacts button:disabled { opacity: .55; cursor: default; }

/*
 * CAD › Pricing (the owner, 2026-10-07: "Move pricing from universal settings … make it present in the CAD section of the app. The
 * pricing should be editable by both internal and external financing. Yes, the bills at is for the overview."): one sheet of prices
 * with its commands on the toolbar and the vendors' rate cards under it; Bills at is the same drop-down on this page's toolbar and
 * beside the Budget's heading, where the headline total at it sits.
 */
.cadpricing { padding-bottom: 24px; }
.cadpricing .pricinginfo { margin: 6px 0 10px; color: var(--ink-faint); font-family: var(--data); font-size: 10px; letter-spacing: .04em; max-width: none; }
.cadpricing .pricingbody { min-width: 0; }
.cadpricing .pricingcards h3 { margin: 22px 0 4px; }
.cadpricing .pricingcards .keyhint { margin: 3px 0 10px; color: var(--ink-faint); font-family: var(--data); font-size: 10px; letter-spacing: .04em; }
.cadpricing .ratecard { margin: 0 0 14px; padding-top: 8px; border-top: 1px solid var(--seam); }
.cadpricing .ratecardhead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 6px; }
.cadpricing .ratecardhead .dim { flex: 1 1 240px; min-width: 0; color: var(--ink-faint); font: 11px var(--data); }
.cadpricing .cardfind { margin: 4px 0 6px; max-width: 360px; width: 100%; }
.cadpricing .cardsheet .keyhint { margin: 2px 0 6px; }
/* Bills at on the toolbar sits among the page's commands, small, and on the Budget beside its heading. */
.toolbar .billsatslot { display: inline-flex; align-items: center; margin-left: 4px; }
.toolbar .pickdown.billsat { margin: 0; }
.toolbar .pickdown.billsat .pickdown-btn { padding: 4px 10px; font-size: 11px; }
.toolbar .billsat.readonly { font: 11px/1.2 var(--chrome); color: var(--ink); }
.billsat.readonly .billsat-label { opacity: .75; }
.billsat.readonly .billsat-value { color: var(--amber-hi); }
.cadbudget .areashead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 4px; }
.cadbudget .areashead h3 { margin: 0; }
.cadbudget .billshead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; }
.cadbudget .billshead .pickdown { margin: 0; }
.cadbudget .billsat-total { color: var(--amber-hi); font: 600 13px var(--data); }
.cadbudget .billshead .keyhint { margin: 0; }
.cadbudget .areastable td.billstotal { font-weight: 700; }
.cadbudget .areastable tfoot td { padding: 0 10px; height: var(--row); white-space: nowrap; background: var(--sheet-head); color: var(--sheet-ink); border-top: 2px solid var(--sheet-rule); border-bottom: 1px solid var(--sheet-line); font-weight: 700; }
.cadbudget .pricingsays { margin: 3px 0 12px; color: var(--ink-faint); font-family: var(--data); font-size: 10px; letter-spacing: .04em; max-width: none; }
.cadbudget .pricinglink { color: var(--amber-hi); text-decoration: underline; cursor: pointer; }
/* Export: the budget as a workbook or a Google Sheet (web/cad-export.js). */
:is(.cadbudget, .cadoverview) .exportrow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 6px 0 2px; }
/* The row's buttons in the commands' own look (they sat unstyled, white, on the Budget page): the plate and the amber, metal on hover. */
:is(.cadbudget, .cadoverview) .exportrow .cmd { padding: 6px 12px; border: 1px solid var(--seam); background: var(--plate); color: var(--amber); font: 600 9.5px/1 var(--chrome); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; white-space: nowrap; }
:is(.cadbudget, .cadoverview) .exportrow .cmd:hover:not(:disabled) { color: var(--ground); background: var(--metal); }
:is(.cadbudget, .cadoverview) .exportrow .cmd:disabled { opacity: .5; cursor: wait; }
.cadoverview .exportrow { margin: 0 0 8px; }
:is(.cadbudget, .cadoverview) .exportrow .exportlabel { font: 600 10px var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
:is(.cadbudget, .cadoverview) .exportrow .result { font: 11px/1.4 var(--chrome); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
:is(.cadbudget, .cadoverview) .exportrow .result.did, :is(.cadbudget, .cadoverview) .exportrow .result.did a { color: var(--amber-hi); }
:is(.cadbudget, .cadoverview) .exportrow .result.failed { color: #ff6b7a; }
/* The pop-ups: Add a code, a rate sheet read, pricing copied, the tiers. */
.askbox.askpricingcode { max-width: 640px; width: min(640px, calc(100vw - 40px)); }
.askbox .askcodes { flex: 1 0 100%; display: flex; flex-direction: column; gap: 2px; max-height: 40vh; overflow: auto; }
.askbox .askcodepick { display: grid; grid-template-columns: minmax(110px, max-content) 1fr auto; align-items: baseline; gap: 4px 12px; width: 100%; padding: 4px 8px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; font: 11.5px var(--data); }
.askbox .askcodepick b { color: var(--amber-hi); }
.askbox .askcodepick span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.askbox .askcodepick em { color: var(--ink-faint); font-style: normal; font-size: 10.5px; }
.askbox .askcodepick:hover, .askbox .askcodepick:focus { outline: none; background: var(--metal); color: var(--ground); }
.askbox .askcodepick:hover b, .askbox .askcodepick:focus b { color: var(--ground); }
.askbox.askratesheet { width: min(860px, calc(100vw - 40px)); max-width: min(860px, calc(100vw - 40px)); align-content: flex-start; }
.askbox.askratesheet .subtable { flex: 1 0 100%; max-height: 26vh; overflow: auto; }
.askbox.askratesheet .ratereplaces:empty { display: none; }
.askbox .grid.sub select.askpick { background: #fff; border: 1px solid var(--sheet-line); color: var(--sheet-ink); color-scheme: light; width: 100%; min-width: 170px; }
.askbox .grid.sub select.askpick option { background: #fff; color: var(--sheet-ink); }
.askbox.askpricingcopy { width: min(620px, calc(100vw - 40px)); max-width: min(620px, calc(100vw - 40px)); }
.askbox.askpricingcopy .copyplan { flex: 1 0 100%; }
.askbox.askpricingtiers { width: min(560px, calc(100vw - 40px)); max-width: min(560px, calc(100vw - 40px)); }
.askbox .tiersedit { flex: 1 0 100%; display: flex; flex-direction: column; gap: 6px; }
.askbox .tierrow { display: flex; align-items: center; gap: 8px; }
.askbox .tierrow .tiername { width: 170px; }
.askbox .tierrow .tiernote { flex: 1 1 auto; min-width: 0; font: 11px var(--data); color: var(--ink-faint); }
.askbox .tierrow.gone .tiername { text-decoration: line-through; }
.askbox .tierrow .cmd.small { padding: 3px 8px; }

/* CAD (2026-10-08): Manual mode folded at the foot of Sync and Live data; the Budget's overview pivot; the snapshots' compare. */
.manualmode .manualbody { padding-top: 6px; }
.manualmode .manualbody[hidden] { display: none; }
/* CAD › Overview: the area picker and the truss switch. The picker is one compact line — the chips, then a short box (the owner,
   2026-10-08, of the box that had been made bigger that morning: "make the areas … type one to find one or pick from the list box smaller"). */
/*
 * CAD › Overview's header is one row and the sheet the rest (the owner, 2026-10-28: "a lot of wasted space"): Areas with Hide
 * unused, Layout and Columns ▾ at the left, the truss estimate — Truss as and the motor plan — pushed to the right; the export and
 * where the areas came from under it on one line; the sheet's headings in its own case under a band of areas or symbols.
 */
.cadoverview .overviewtools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 22px; margin: 2px 0 6px; }
.cadoverview .overviewareas { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 0 1 auto; }
.cadoverview .overviewlabel { font: 700 11px/26px var(--chrome); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); white-space: nowrap; }
.cadoverview .overviewtruss { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 18px; margin-left: auto; }
.cadoverview .people.pick { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; flex: 0 1 auto; min-width: 0; background: none; border: 0; margin: 0; }
.cadoverview .people.pick .pickchips .keyhint { font-size: 12px; line-height: 26px; margin: 0; }
.cadoverview .people.pick .pickchips { margin: 0; }
.cadoverview .people.pick .pickrow { margin: 0; width: 200px; max-width: 100%; }
.cadoverview .people.pick .pickinput { font-size: 13px; padding: 4px 8px; width: 100%; max-width: 200px; }
.cadoverview .people.pick .picklist { right: auto; min-width: 300px; }
.cadoverview .pickchip b { font-size: 13px; }
.cadoverview .hideunused { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); white-space: nowrap; cursor: pointer; }
.cadoverview .hideunused input { width: 15px; height: 15px; margin: 0; accent-color: var(--amber); cursor: pointer; }
.cadoverview .tracktoggle { display: inline-flex; }
.cadoverview .tracktoggle .scopetoggle { margin-left: 0; font-size: 12.5px; padding: 5px 12px; }
.cadoverview .tracktoggle .scopetoggle + .scopetoggle { border-left-width: 0; }
.cadoverview .tracktoggle .scopetoggle[aria-pressed="true"] { color: var(--amber-hi); border-color: var(--amber-lo); background: var(--panel-hi); }
.cadoverview .overviewtools .commands { background: none; border: 0; padding: 0; margin: 0; align-self: center; }
.cadoverview .overviewtools .commands .cmd { border: 1px solid var(--seam-bright); padding: 7px 12px; }
.cadoverview .kindtoggle { margin-top: 0; }
.cadoverview .motorplan { align-items: center; flex: 0 1 auto; min-width: 0; }
.cadoverview .motorplan .dfield { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.cadoverview .motorfield { width: 60px; font-size: 13px; padding: 4px 6px; }
.cadoverview .exportrow .overviewsource { margin-left: auto; font: 11px/1.4 var(--chrome); color: var(--ink-faint); cursor: help; }
.cadoverview .overviewheadline { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 6px; }
.cadoverview .overviewheadline h3 { margin: 0; }
.cadoverview .overviewheadline .overviewsum { font: 12px/1.4 var(--data); color: var(--ink-dim); }
.cadoverview h3.overviewmotorshead { margin: 16px 0 6px; }
/* The headings in the sheet's own case, so Active, Spare and Total read whole in a narrow column under their band. */
.cadoverview .sheetframe .grid thead th[data-c] { text-transform: none; letter-spacing: .02em; }
.cadoverview .againstorder { margin-top: 22px; }
.cadbudget .areassheets .sheetframe + .sheetframe { margin-top: 6px; }
.cadbudget td.billstotal { font-weight: 700; }
.cadsnapshots .tracktoggle { display: inline-flex; }
.cadsnapshots .tracktoggle .scopetoggle { margin-left: 0; }
.cadsnapshots .tracktoggle .scopetoggle + .scopetoggle { border-left-width: 0; }
.cadsnapshots .tracktoggle .scopetoggle[aria-pressed="true"] { color: var(--amber-hi); border-color: var(--amber-lo); background: var(--panel-hi); }
.cadsnapshots .areashead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; }
.cadsnapshots .areashead h3 { margin: 0; }
.cadsnapshots .comparesection { margin-top: 12px; }
.cadsnapshots .comparesection h4 { margin: 0 0 4px; }
.cadsnapshots .comparetable td.up { color: #2e7d32; font-weight: 600; }
.cadsnapshots .comparetable td.down { color: #c62828; font-weight: 600; }
.cadsnapshots .comparetable td.dim { color: var(--ink-faint); }
.cadsnapshots .comparetable tr.changed td:first-child { font-weight: 600; }

/* Management › Export options (the owner, 2026-10-10): the workbook's box, then a tick a tab, a line each, then the log. */
.exportoptions h3 { margin: 16px 0 8px; }
.exportoptions .exportstatus, .exportoptions .exportexcel { max-width: 820px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--seam); }
.exportoptions .exportstatus p, .exportoptions .exportexcel p { margin: 4px 0; color: var(--ink-dim); }
.exportoptions .exportstatus .laborbar, .exportoptions .exportexcel .laborbar { margin-top: 10px; }
.exportoptions a.exportlink { color: var(--amber); font-weight: 600; text-decoration: none; }
.exportoptions a.exportlink:hover { text-decoration: underline; }
.exportoptions .exporttabs { display: grid; gap: 6px; max-width: 820px; }
.exportoptions .exporttab { display: flex; align-items: baseline; gap: 8px; cursor: pointer; }
.exportoptions .exporttab input { flex: 0 0 auto; }
.exportoptions .exporttab b { flex: 0 0 auto; font-weight: 600; }
.exportoptions .exportnote { color: var(--ink-faint); }
.exportoptions .exportshares { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--seam); }
.exportoptions .exportshares p { margin: 3px 0; color: var(--ink-dim); }

/*
 * Inventory › Order › Consolidated (the owner, 2026-10-10): every order a column. The Split… panel docks above the
 * sheet in the page's own flow — an `.askbox` still, so Escape backs out of it — and the eyedropper, armed, makes every
 * cell of the sheet a crosshair until a column is clicked.
 */
.bomorders .bomall { padding: 4px 10px; border: 1px solid var(--seam-bright); background: var(--plate); color: var(--ink); font: 600 11px/1.3 var(--chrome); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.bomorders .bomall:hover { border-color: var(--amber); }
.bomorders .bomall.on { background: var(--amber); color: var(--ground); border-color: var(--amber); }
.splitdockhost:empty { display: none; }
.askbox.asksplit.splitdock { position: static; transform: none; left: auto; top: auto; width: auto; max-width: none; margin: 0 0 8px; box-sizing: border-box; }
.askbox.splitdock .splitto { min-width: 260px; max-width: 100%; }
.askbox.splitdock .eyedropper[aria-pressed="true"] { background: var(--amber); color: var(--ground); border-color: var(--amber); }
body.eyedropping .sheetframe td[data-c], body.eyedropping .sheetframe th[data-c] { cursor: crosshair; }
body.eyedropping .sheetframe .grid td.ordercol, body.eyedropping .sheetframe .grid th.ordercol { box-shadow: inset 0 0 0 1px rgba(255,138,31,.45); }

/* Lumen asks which tabs of a workbook to read (the owner, 2026-10-10): a scrolling list of ticks with each tab's rows. */
.tabscard .tablist { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 6px 0; }
.tabscard .tabrow { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; padding: 3px 4px; cursor: pointer; }
.tabscard .tabrow small { opacity: 0.7; }
.tabscard .tabsaid { margin-left: auto; opacity: 0.8; align-self: center; }
/* The call sheet's Meal time sits in the light table: white with the sheet's ink, never the dark field (owner, 2026-10-11: "this wierd highlight again"). */
.grid.sub input.callmeal, input.callmeal { background: transparent; color: var(--sheet-ink, #1d232b); border: 1px solid transparent; color-scheme: light; font: inherit; padding: 2px 4px; }
.grid.sub input.callmeal:hover:not(:disabled) { border-color: var(--sheet-rule, #c9cfd6); background: #fff; }
.grid.sub input.callmeal:focus { background: #fff; outline: none; box-shadow: inset 0 0 0 2px #0b63c5; }
.grid.sub input.callmeal:disabled { opacity: 1; color: var(--sheet-ink, #1d232b); }
/* A roster cut's way, under Keep / Flag / Cut (the owner, 2026-10-11): everything with its lines, the slot kept as TBD, or a new name. */
.askbox.importwiz .cuthow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 4px; max-width: 360px; }
.askbox.importwiz .cuthow[hidden], .askbox.importwiz .cutrestaff[hidden] { display: none; }
.askbox.importwiz .cuthow .cuthowopt { white-space: normal; text-align: left; }
.askbox.importwiz .cuthow .cutrestaff { width: 160px; }
.askbox.importwiz .cuthow .cuthowopt { padding: 3px 8px; border-radius: 6px; border: 1px solid var(--sheet-rule, #c9cfd6); background: #fff; color: var(--sheet-ink, #1d232b); cursor: pointer; font: 600 10.5px/1.3 var(--chrome); }
.askbox.importwiz .cuthow .cuthowopt.on { background: #5c2b31; border-color: #5c2b31; color: #ffd7dc; }

/* A tick a person set over the app's own answer (the roster's Local to prep and Local to on-site, 2026-10-11). */
.grid tbody td.toggle.marked { box-shadow: inset 0 0 0 2px var(--amber); background: color-mix(in srgb, var(--amber) 18%, var(--sheet)); }

/* A long sheet lays out only the rows near the screen (`applyWindow` in web/grid.js, owner 2026-10-12): the rest are kept in the
   page but not displayed, and the spacers hold their height. */
.grid tbody tr.offscreen { display: none; }
.grid tbody tr.winpad td { padding: 0; border: 0; height: 0; background: var(--sheet); }

/* ---- CAD › Publish history (2026-10-14): every publish of the budget, charted ---------------------------------------- */
.pubhist { --pub-up: #e66767; --pub-down: #3987e5; display: grid; gap: 14px; max-width: 1280px; }
.pubhist .keyhint { margin: 0; }
.pubcontrols { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.pubseg { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.publabel { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin-right: 4px; }
.pubchip { background: var(--panel-hi); color: var(--ink-dim); border: 1px solid var(--seam); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 12px; cursor: pointer; }
.pubchip:hover:not(:disabled) { color: var(--ink); border-color: var(--seam-bright); }
.pubchip[aria-pressed="true"] { background: rgba(255,138,31,.14); color: var(--amber-hi); border-color: var(--amber-lo); }
.pubchip:disabled { opacity: .35; cursor: default; background: var(--panel-hi); color: var(--ink-faint); border-color: var(--seam); }
.pubtiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.pubtile { background: linear-gradient(180deg, var(--panel-hi), var(--panel)); border: 1px solid var(--seam); border-radius: 10px; padding: 12px 14px; display: grid; gap: 2px; position: relative; overflow: hidden; }
.pubtile::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--seam-bright); }
.pubtile.hero::before { background: var(--metal); }
.pubtile.up::before { background: var(--pub-up); }
.pubtile.down::before { background: var(--pub-down); }
.pubtilelabel { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); }
.pubtilevalue { font: 600 24px/1.2 var(--data); color: var(--ink); font-variant-numeric: tabular-nums; }
.pubtile.hero .pubtilevalue { font-size: 28px; color: var(--amber-hi); }
.pubtilesub { font-size: 12px; color: var(--ink-dim); }
.pubcard { background: var(--panel); border: 1px solid var(--seam); border-radius: 12px; padding: 12px 14px 8px; box-shadow: 0 8px 24px rgba(0,0,0,.35); min-width: 0; }
.pubcardhead { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.pubcardhead h3 { margin: 0; font-size: 14px; color: var(--ink); }
.pubcardhead .dim, .pubhist .dim { color: var(--ink-faint); font-size: 12px; }
.pubwarn { color: var(--amber-hi); font-size: 12px; }
.pubchart { width: 100%; min-height: 60px; overflow: hidden; }
.pubplot { position: relative; }
.pubplot svg { display: block; overflow: visible; }
.pubplot .grid { stroke: var(--seam); stroke-width: 1; stroke-dasharray: 2 4; }
.pubplot .zero { stroke: var(--seam-bright); stroke-width: 1; }
.pubplot .axis { fill: var(--ink-faint); font: 11px var(--data); }
.pubplot .endlabel { fill: var(--ink); font: 600 12px var(--data); paint-order: stroke; stroke: var(--panel); stroke-width: 4px; }
.pubplot .dot { stroke: var(--panel); stroke-width: 2; }
.pubplot .cross { stroke: var(--ink-dim); stroke-width: 1; }
.pubplot .bar.up { fill: var(--pub-up); }
.pubplot .bar.down { fill: var(--pub-down); }
.pubplot .bar.flat { fill: var(--ink-faint); }
.pubplot .barlabel { font: 600 11px var(--data); fill: var(--ink); }
.pubtip { position: absolute; z-index: 4; pointer-events: none; background: rgba(19,21,25,.96); border: 1px solid var(--seam-bright); border-radius: 8px; padding: 8px 10px; display: grid; gap: 3px; font-size: 12px; min-width: 180px; box-shadow: 0 8px 22px rgba(0,0,0,.5); }
.pubtip .tiprow { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center; }
.pubtip .tiprow i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.pubtip .tiprow b { font-family: var(--data); font-variant-numeric: tabular-nums; }
.pubtip em, .pubhist em { font-style: normal; font-family: var(--data); }
.pubhist .up, .pubhist em.up { color: var(--pub-up); }
.pubhist .down, .pubhist em.down { color: var(--pub-down); }
.publegend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 6px; font-size: 12px; color: var(--ink-dim); }
.publegenditem { display: inline-flex; align-items: center; gap: 6px; }
.publegenditem i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.pubtable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pubtable th { text-align: left; font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); padding: 6px 10px; border-bottom: 1px solid var(--seam-bright); white-space: nowrap; position: sticky; top: 0; background: var(--panel); }
.pubtable td { padding: 6px 10px; border-bottom: 1px solid var(--seam); color: var(--ink-dim); vertical-align: middle; }
.pubtable tbody tr:hover td { background: var(--panel-hi); }
.pubtable td.num { font-family: var(--data); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pubtable td.strong { color: var(--ink); font-weight: 600; }
.pubtable td.delta small { color: var(--ink-faint); }
.pubtable .deltapill { display: inline-block; padding: 1px 7px; border-radius: 999px; background: rgba(125,131,141,.12); }
.pubtable td.up .deltapill { background: rgba(230,103,103,.14); color: var(--pub-up); }
.pubtable td.down .deltapill { background: rgba(57,135,229,.16); color: var(--pub-down); }
.pubtable td.up small, .pubtable td.down small { color: inherit; }
.pubtable tr.picked td { background: rgba(255,138,31,.05); }
.pubtable .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; border: 1px solid var(--seam); }
.pubtable .tickcell { width: 28px; text-align: center; }
.pubtable .sparkcell { width: 104px; }
.howbadge { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--seam-bright); color: var(--ink-dim); }
.howbadge.how-xlsx { border-color: #199e70; color: #5fd3a6; }
.howbadge.how-sheet { border-color: #3987e5; color: #8ab9f1; }
.howbadge.how-sync { border-color: var(--amber-lo); color: var(--amber-hi); }
.howbadge.how-sync-auto { border-style: dashed; }
.publink { color: var(--amber-hi); text-decoration: none; }
.pubempty { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 48px 16px; background: var(--panel); border: 1px dashed var(--seam-bright); border-radius: 12px; color: var(--ink-dim); }
.pubemptyicon { font-size: 34px; }
/* A change on a sheet that rose or fell: warm and cool, as Publish history's charts draw them (CAD › Snapshots' comparison, Publish history's sheets). */
.grid tbody td.tint-rise, .grid tbody tr:nth-child(even) td.tint-rise { background: #fbe3e3; color: #a32121; font-weight: 600; }
.grid tbody td.tint-fall, .grid tbody tr:nth-child(even) td.tint-fall { background: #dde9fb; color: #1b4f9c; font-weight: 600; }

/* Describe this column… (2026-10-14): the small "i" beside a heading that carries a description, built in or typed; the pop-up; the Columns… picker's line. */
.grid thead th .colinfo::before { content: 'i'; }
.grid thead th .colinfo {
  display: inline-block; margin-left: 4px; width: 12px; height: 12px; border-radius: 50%; border: 1px solid currentColor;
  font: italic 700 9px/11px Georgia, serif; text-align: center; vertical-align: 1px; opacity: .55; text-transform: none; letter-spacing: 0;
}
.grid thead th.described .colinfo { opacity: .9; color: #0b63c5; }
.askbox.askdescribe { width: min(460px, calc(100vw - 32px)); }
.askbox.askdescribe .describetext { box-sizing: border-box; width: 100%; min-height: 96px; resize: vertical; font: 13px/1.4 var(--data); }
.askbox.askdescribe .describecount { display: block; text-align: right; color: var(--ink-faint); font: 11px var(--data); }
.askbox.askdescribe .describeorg { display: flex; align-items: center; gap: 6px; margin: 6px 0; cursor: pointer; }
.askbox.askfield { width: min(440px, calc(100vw - 32px)); }
.askbox.askfield .fieldrow, .askbox.askfield .fieldchoicerow { display: flex; flex-direction: column; gap: 3px; margin: 0 0 8px; font-size: 12px; color: var(--ink-faint); }
.askbox.askfield .fieldname, .askbox.askfield .fieldkind, .askbox.askfield .fieldchoices { box-sizing: border-box; width: 100%; font: 13px/1.4 var(--data); }
.askbox.askfield .fieldchoices { min-height: 84px; resize: vertical; }
.askbox.askfield .fieldchoicerow[hidden] { display: none; }
.columnpick label .columnnote { flex: 0 1 45%; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--ink-faint); font: 10.5px var(--data); }

/*
 * The summary row (`summaryfoot` in web/grid.js; wave 2 of the Airtable-like features, the owner, 2026-10-14): pinned to the
 * foot of the sheet's box as it scrolls, its own <tfoot> and never a row of the data. Above the rows' cells and chips (2),
 * the row numbers and frozen columns (3) and the frozen rows (5–7), under the heading strip (10); its frozen cells stick at
 * the left as the body's do. A cell with no figure reads nothing until hovered, where it offers one.
 */
.grid tfoot.summaryfoot td, .grid tfoot.summaryfoot th {
  position: sticky; bottom: 0; z-index: 8;
  height: 26px; padding: 0 8px;
  background: var(--sheet-head, #e6e9ed); color: #3b4652;
  border-top: 2px solid var(--sheet-rule, #c9ced6); border-right: 1px solid var(--sheet-rule, #c9ced6);
  font: 11px/1 var(--data); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; user-select: none;
}
.grid tfoot.summaryfoot th.summarycorner { left: 0; z-index: 9; text-align: right; color: #a35200; font-weight: 700; cursor: default; }
.grid tfoot.summaryfoot td.frozen { z-index: 9; }
.grid tfoot.summaryfoot td.colhidden { display: none; }
.grid tfoot.summaryfoot td:hover { background: #dde2e8; }
.grid tfoot.summaryfoot td.summarised { text-align: right; }
.grid tfoot.summaryfoot .summarylabel { font: 600 9px/1 var(--chrome); letter-spacing: .06em; text-transform: uppercase; color: #6b7480; margin-right: 6px; }
.grid tfoot.summaryfoot .summaryvalue { font-weight: 700; color: #1f252c; }
.grid tfoot.summaryfoot .summarycount { color: #6b7480; }
.grid tfoot.summaryfoot td.summarynone:not(:has(.summarycount)):hover::after { content: 'Summarise \25be'; color: #8a929c; font-size: 10px; }
.sheetsummaryctl .cmd.on { border-color: var(--amber, #ff8a1f); color: var(--amber, #ff8a1f); }

/*
 * Row height (Row height on the toolbar; owner, 2026-10-14, wave 2 of the Airtable-like features): Short is the sheet as
 * it always was; Medium, Tall and Extra tall give every row of the sheet 40, 58 and 92 pixels and let its words wrap onto
 * the lines that room holds — two, three, five — ending in … on the last, the whole value on hover and in the cell bar.
 * A number never wraps (`td.num`), nor does a colour's band words or the editor. A row given its own height by its grip
 * keeps it (`tr[style*="height"]` above). The windowed sheet's spacers take the height from `ROW_HEIGHT_PX` in web/grid.js.
 */
.sheetframe[data-rowh="medium"] { --row: 40px; --rowh-lines: 2; }
.sheetframe[data-rowh="tall"] { --row: 58px; --rowh-lines: 3; }
.sheetframe[data-rowh="xtall"] { --row: 92px; --rowh-lines: 5; }
.sheetframe[data-rowh] .grid tbody td { height: var(--row); line-height: 14px; vertical-align: middle; }
.sheetframe[data-rowh] .grid tbody td:not(.num):not(.toggle) { white-space: normal; }
.sheetframe[data-rowh] .grid tbody td:not(.num) > .cellvalue,
.sheetframe[data-rowh] .grid tbody td:not(.num) .cellchip:not(.banded) > .cellvalue {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--rowh-lines); line-clamp: var(--rowh-lines);
  overflow: hidden; overflow-wrap: break-word; white-space: normal;
}
.sheetframe[data-rowh] .grid tbody td:not(.num) .cellchip:not(.banded) {
  height: auto; max-height: calc(var(--row) - 6px); border-radius: 9px; padding-top: 1px; padding-bottom: 1px; line-height: 14px;
}
.sheetframe[data-rowh] .grid tbody td input, .sheetframe[data-rowh] .grid tbody td textarea { line-height: normal; }
.sheetframe[data-rowh] .grid tbody tr.grouphead td { height: auto; }
/*
 * A column that wraps (`wrap` on a grid column; the owner, 2026-10-28, of the production schedule's Notes: "Notes should wrap
 * in cell and expand cell height to be fully visible based on the column width"): its words break inside the column, the line
 * breaks they carry kept, and the row grows to show them whole, whatever row height the sheet is at. It is typed in a box of
 * several lines (`.cell-edit-lines`), sized to what it holds.
 */
.grid tbody td.wrapcell { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 16px; padding-top: 3px; padding-bottom: 3px; }
.sheetframe[data-rowh] .grid tbody td.wrapcell:not(.num):not(.toggle) { white-space: pre-wrap; line-height: 16px; }
.sheetframe[data-rowh] .grid tbody td.wrapcell:not(.num) > .cellvalue {
  display: inline; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; white-space: pre-wrap;
}
.grid tbody td .cell-edit-lines { display: block; resize: none; overflow: hidden; white-space: pre-wrap; line-height: 16px; padding: 0; }

/* ---- the record card, docked at a sheet's right (wave 3, the owner, 2026-10-14) ----------------------------------
   Space on a row, a click on its number or right-click › Open record: the row as a card beside the sheet, which narrows to
   make room (never covered). Its fields, the hidden ones folded, then attachments, linked records and its history
   (`web/rowcard.js`, `web/record-card.js`). A phone draws the card as a pop-up instead (`web/phone.css`). */
.sheetframe.hasrecord { --recw: 380px; min-height: max(460px, calc(100vh - 260px)); }
.sheetframe.hasrecord > .cellbar, .sheetframe.hasrecord > .gridwrap { margin-right: var(--recw); }
.recordpanel {
  position: absolute; top: 0; right: 0; bottom: 0; width: var(--recw, 380px); z-index: 14;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); border-left: 2px solid var(--amber); color: var(--ink);
  box-shadow: -6px 0 18px rgba(0, 0, 0, .35);
}
.recordpanel:focus { outline: none; }
/* Under the corner's pills the card's foot is lifted clear of them, so Close and the last of History are never behind Lumen and Chat (`fitSheets`). */
.recordpanel.padfoot { padding-bottom: var(--panel-pad, var(--corner-h, 0px)); }
.recordpanel .rowcardhead { flex: none; padding: 10px 12px 8px; border-bottom: 1px solid var(--seam-bright); background: var(--panel-hi); }
.recordpanel .rowcardtitle { display: block; font: 700 11px/1.2 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.recordpanel .rowcardplace { display: block; margin-top: 3px; font: 13px/1.3 var(--data); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recordpanel .rowcardscroll { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 2px 12px 12px; overscroll-behavior: contain; }
.recordpanel .rowcardfield { display: flex; flex-direction: column; gap: 3px; padding: 7px 0 8px; border-bottom: 1px solid var(--seam); }
.recordpanel .rowcardlabel { font: 700 10.5px/1.2 var(--chrome); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.recordpanel .rowcardnote { font: 12px/1.35 var(--chrome); color: var(--ink-dim); white-space: pre-wrap; }
.recordpanel .rowcardhint { font: 11.5px/1.35 var(--chrome); color: var(--ink-faint); }
.recordpanel .rowcardinput, .recordpanel .rowcardselect {
  width: 100%; min-height: 28px; padding: 4px 8px; font: 13px/1.35 var(--data); color: var(--sheet-ink);
  background: var(--sheet); border: 1px solid var(--seam-bright); border-radius: 4px;
}
.recordpanel textarea.rowcardlong { resize: vertical; white-space: pre-wrap; }
.recordpanel .rowcardinput:focus, .recordpanel .rowcardselect:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber-lo); }
.recordpanel .rowcardinput.saving, .recordpanel .rowcardselect.saving { border-color: var(--amber-hi); }
.recordpanel .rowcardinput.saved, .recordpanel .rowcardselect.saved { border-color: #3fa56b; }
.recordpanel .failed { border-color: #e0524f !important; }
.recordpanel .rowcardvalue.locked { padding: 3px 0; font: 13px/1.35 var(--data); color: var(--ink-dim); white-space: pre-wrap; word-break: break-word; }
.recordpanel .rowcardcheck { width: 18px; height: 18px; accent-color: var(--amber); }
/* A column of several values: the filter-as-you-type picker, its list in the card's own flow so the panel's scroll never clips it. */
.rowcard .rowcardpicker .pickchips { margin: 2px 0 4px; }
.rowcard .rowcardpicker .pickrow { max-width: none; margin: 0; }
.rowcard .rowcardpicker .pickinput { max-width: none; }
.rowcard .rowcardpicker .picklist { position: static; margin-top: 2px; max-height: 220px; box-shadow: none; }
.recordpanel .rowcardpick { justify-content: flex-start; text-transform: none; letter-spacing: 0; font: 13px/1.3 var(--data); }
.recordpanel .rowcardhidden { margin-top: 6px; }
.recordpanel .rowcardhiddenhead, .recordpanel .rowcardsectionhead { cursor: pointer; padding: 8px 0 4px; font: 700 11px/1.2 var(--chrome); letter-spacing: .12em; text-transform: uppercase; color: var(--amber-hi); }
.recordpanel .rowcardsectionhead { cursor: default; margin: 12px 0 2px; border-top: 1px solid var(--seam-bright); padding-top: 10px; }
.recordpanel .rowcardempty { margin: 4px 0; font: 12px/1.35 var(--chrome); color: var(--ink-faint); }
.recordpanel .rowcardsaid { flex: none; padding: 0 12px; font: 12px/1.35 var(--chrome); color: var(--ink-dim); }
.recordpanel .rowcardsaid.bad { color: #ff7a73; }
.recordpanel .rowcardfoot { flex: none; display: flex; gap: 6px; padding: 8px 12px; border-top: 1px solid var(--seam-bright); background: var(--panel-hi); }
.recordpanel .rowcardfoot .rowcardclose { margin-left: auto; }
.recordpanel .rowcardhistory { list-style: none; margin: 4px 0 0; padding: 0; }
.recordpanel .rowcardhistory li { padding: 5px 0 6px; border-bottom: 1px dashed var(--seam); font: 12px/1.4 var(--chrome); }
.recordpanel .histwhen { color: var(--ink-dim); }
.recordpanel .histwhen b { color: var(--ink); font-weight: 600; }
.recordpanel .histwhat { font-family: var(--data); word-break: break-word; }
.recordpanel .histfield { color: var(--amber-hi); }
.recordpanel .histfrom { color: var(--ink-dim); text-decoration: line-through; }
.recordpanel .histto { color: var(--ink); }
.recordpanel .linkgroup { margin: 4px 0 8px; }
.recordpanel .linkgrouphead { font: 700 10.5px/1.2 var(--chrome); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); margin: 6px 0 3px; }
.recordpanel .linkrow { display: flex; align-items: center; gap: 8px; padding: 2px 0; font: 12.5px/1.3 var(--data); }
.recordpanel .linklabel { color: var(--ink); white-space: nowrap; }
.recordpanel .linkdetail { flex: 1 1 auto; min-width: 0; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recordpanel .linkgo { margin-left: auto; padding: 1px 8px; min-height: 0; font-size: 11px; }
.recordpanel .rowcardfiles { display: flex; flex-direction: column; gap: 6px; }
.recordpanel .rowcardfile { display: flex; flex-direction: column; gap: 3px; color: var(--amber-hi); font: 12px/1.3 var(--data); text-decoration: none; }
.recordpanel .rowcardfile img { max-width: 100%; max-height: 180px; object-fit: contain; border: 1px solid var(--seam-bright); background: #fff; }
.recordpanel .rowcardcontents ul { margin: 2px 0; padding-left: 18px; font: 12.5px/1.4 var(--data); }
.cellhistorynote {
  position: fixed; z-index: 120; max-width: 336px; padding: 5px 9px; pointer-events: none;
  font: 12px/1.35 var(--chrome); color: var(--ink); background: #1d2127; border: 1px solid var(--amber-lo); border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}

/*
 * Comments on a record (wave 3 of the Airtable-like features, 2026-10-14; `web/record-comments.js`): a small speech bubble
 * at the left of a row number with the count of the record's open comments, the thread's pop-up, and the @ list.
 */
.grid th.rownum .rowcomments {
  position: absolute; left: 3px; top: 50%; transform: translateY(-50%); z-index: 4;
  min-width: 13px; height: 12px; padding: 0 3px; box-sizing: border-box; border-radius: 3px;
  background: #f0a630; color: #1a1305; font: 700 9px/12px var(--data); text-align: center; cursor: pointer;
}
.grid th.rownum .rowcomments::after {
  content: ''; position: absolute; left: 3px; bottom: -3px; border: 3px solid transparent; border-top-color: #f0a630; border-bottom: 0;
}
.grid th.rownum .rowcomments:hover { background: #ffc46b; }
.askbox.commentsbox { width: min(520px, calc(100vw - 32px)); z-index: 96; flex-direction: column; flex-wrap: nowrap; }
.askbox.commentsbox .commentshead { margin: 0; }
.commentthread { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.commentthread .commentstate { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 12px var(--data); color: var(--ink-dim); }
.commentthread .resolvedsaid { color: #7fc48a; }
.commentthread .commentlist { display: flex; flex-direction: column; gap: 8px; max-height: min(46vh, 420px); overflow: auto; }
.commentthread .comment { padding: 8px 10px; border: 1px solid var(--seam); border-radius: 10px; background: rgba(255,255,255,.03); }
.commentthread .comment.mine { border-color: rgba(255,196,107,.35); }
.commentthread .comment .by { font: 11px var(--data); color: var(--ink-faint); margin-bottom: 4px; }
.commentthread .comment .by b { color: var(--ink); }
.commentthread .commenttext { font: 13px/1.45 var(--data); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.commentthread .mention { color: var(--amber); }
.commentthread .commentacts { display: flex; gap: 10px; margin-top: 4px; }
.commentthread .linkish { background: none; border: 0; padding: 0; color: var(--ink-dim); font: 11px var(--data); text-decoration: underline; cursor: pointer; }
.commentthread .commentcompose { position: relative; display: flex; flex-direction: column; gap: 6px; }
.commentthread .commentbox { box-sizing: border-box; width: 100%; min-height: 64px; resize: vertical; font: 13px/1.4 var(--data); }
.commentthread .commentsaid.bad { color: #ff8a8a; }
.commentthread .mentionlist {
  position: absolute; left: 0; right: 0; bottom: calc(100% - 30px); z-index: 2; max-height: 220px; overflow: auto;
  background: var(--panel); border: 1px solid var(--seam-bright); border-radius: 8px; box-shadow: 0 10px 28px rgba(0,0,0,.5);
}
.commentthread .mentionpick { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 6px 10px; background: none; border: 0; color: var(--ink); text-align: left; cursor: pointer; font: 13px var(--data); }
.commentthread .mentionpick small { color: var(--ink-faint); font-size: 11px; }
.commentthread .mentionpick.lit, .commentthread .mentionpick:hover { background: rgba(255,196,107,.16); }
.pingtable .pinggo { margin-left: 8px; }
.rowcard .rowcardcomments { margin-left: auto; }

/*
 * Edit N rows… (wave 3 of the Airtable-like features; `web/bulk-edit.js`): the rows picked one by one with Ctrl+click on
 * their numbers read as selected, and the dialog is a column, what to do to it and the value, with the count it will change.
 */
.grid tbody tr.picked > td { background: var(--sheet-sel) !important; }
.grid tbody tr.picked:nth-child(even) > td { background: #c6d6e9 !important; }
.grid th.rownum.picked { color: #0b63c5; background: #cddcef; }
.askbox.bulkedit { width: min(480px, calc(100vw - 40px)); max-width: min(480px, calc(100vw - 40px)); flex-direction: column; flex-wrap: nowrap; }
.askbox.bulkedit .bulktitle { font-weight: 700; margin: 0; }
.askbox.bulkedit .bulkgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.askbox.bulkedit label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.askbox.bulkedit label > span { color: var(--ink-dim); }
.askbox.bulkedit .bulkvalue { display: flex; flex-direction: column; gap: 8px; }
.askbox.bulkedit .bulkvalue:empty { display: none; }
.askbox.bulkedit .askfield, .askbox.bulkedit .askpick { width: 100%; box-sizing: border-box; }
.askbox.bulkedit .bulkchecks { max-height: 220px; overflow: auto; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--seam); padding: 6px 8px; }
.askbox.bulkedit .bulkchecks label, .askbox.bulkedit .bulkticks label { flex-direction: row; align-items: center; gap: 6px; font-size: 13px; }
.askbox.bulkedit .bulkticks { display: flex; gap: 18px; }
.askbox.bulkedit .bulkpreview { margin: 0; font-size: 13px; color: var(--amber); }
.askbox.bulkedit .askrow { display: flex; gap: 8px; }

/* ---- Kanban layout (web/sheet-layout-kanban.js): a column of cards for each value of a drop-down ---- */
/* The board fills the sheet's box (the layout host has only a min-height, which a percentage cannot be taken of). */
.layouthost.layout-kanban { height: 100%; }
.kanban { display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--ground); color: var(--ink); }
.kanban:focus { outline: none; }
.kanbanbar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 8px; border-bottom: 1px solid var(--seam); background: var(--panel); }
.kanbanfield { display: inline-flex; align-items: center; gap: 6px; font: 12px/1.2 var(--chrome); color: var(--ink-dim); }
.kanbanpick { background: var(--panel-hi); color: var(--ink); border: 1px solid var(--seam-bright); font: 13px/1.2 var(--chrome); padding: 3px 6px; }
.kanbanfields { position: relative; }
.kanbanfieldsmenu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; min-width: 220px; max-height: 320px; overflow: auto; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: var(--panel); border: 1px solid var(--amber); box-shadow: 0 6px 18px rgba(0, 0, 0, .4); }
.kanbanfieldsmenu[hidden] { display: none; }
.kanbanfieldsmenu label { font-size: 13px; white-space: nowrap; }
.kanbanfieldsnote { margin-top: 4px; font-size: 11px; color: var(--ink-faint); }
.kanbanlanes { flex: 1 1 0; min-height: 0; display: flex; gap: 10px; padding: 10px; overflow-x: auto; overflow-y: hidden; }
.kanbanlane { flex: none; width: 272px; display: flex; flex-direction: column; min-height: 0; background: var(--panel); border: 1px solid var(--seam); }
.kanbanlane.folded { width: 44px; }
.kanbanlane.folded .kanbanhead { flex-direction: column; align-items: center; height: 100%; }
.kanbanlane.folded .kanbanname { writing-mode: vertical-rl; transform: rotate(180deg); }
.kanbanlane.dropover { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.kanbanhead { flex: none; display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--seam-bright); background: var(--panel-hi); }
.kanbanfold, .kanbanadd { background: none; border: 0; color: var(--ink-dim); font: 13px/1 var(--chrome); cursor: pointer; padding: 2px 4px; }
.kanbanfold:hover, .kanbanadd:hover { color: var(--amber); }
.kanbanadd { margin-left: auto; font-size: 16px; font-weight: 700; color: var(--amber); }
.kanbanname { font: 700 12px/1.3 var(--chrome); letter-spacing: .04em; color: var(--amber); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanbanname.choicechip, .kanbanvalue.choicechip { padding: 0 7px; border: 1px solid var(--choice-border, rgba(127,127,127,.4)); border-radius: 9px; background: var(--choice-fill, transparent); color: var(--choice-ink, inherit); }
.kanbanlane.none .kanbanname { color: var(--ink-dim); font-style: italic; }
.kanbancount { font: 12px/1 var(--data); color: var(--ink-faint); }
.kanbancards { position: relative; flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px; }
.kanbanspacer { position: relative; }
.kanbanempty { padding: 10px; font-size: 12px; color: var(--ink-faint); font-style: italic; }
.kanbancard { position: absolute; left: 0; right: 0; box-sizing: border-box; padding: 6px 8px; background: var(--panel-hi); border: 1px solid var(--seam-bright); border-left: 3px solid var(--seam-bright); cursor: grab; overflow: hidden; user-select: none; touch-action: pan-y; }
.kanbancard:hover { border-left-color: var(--amber); }
.kanbancard:focus { outline: 1px solid var(--amber); outline-offset: -1px; }
.kanbancard.dragging { opacity: .35; }
.kanbanghost { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; opacity: .92; box-shadow: 0 8px 22px rgba(0, 0, 0, .5); border-left-color: var(--amber); }
.kanban.dragging, .kanban.dragging .kanbancard { cursor: grabbing; }
.kanbancardtitle { font: 700 13px/22px var(--chrome); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanbancardfield { display: flex; gap: 6px; align-items: center; font: 12px/18px var(--chrome); overflow: hidden; white-space: nowrap; }
.kanbanlabel { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; color: var(--ink-faint); }
.kanbanvalue { overflow: hidden; text-overflow: ellipsis; color: var(--ink); line-height: 16px; }
.kanbanmark { position: absolute; left: 0; right: 0; height: 2px; background: var(--amber); z-index: 2; pointer-events: none; }
/* Gallery (wave 4, `web/sheet-layout-gallery.js`): a card a record, windowed — the cards are placed by `transform` in a room as tall
   as every row of them, so a scroll draws only the ones on screen. The sheet's own light paper, its lines and ink. */
.gallerywrap { display: flex; flex-direction: column; gap: 6px; }
.gallerybar { position: sticky; top: 0; z-index: 12; padding: 6px 10px; background: var(--panel); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--ink-dim); }
.gallerybar select { font: inherit; }
.gallerysizes { display: inline-flex; }
.gallerysizes .gallerysize { min-width: 28px; padding: 2px 6px; }
.gallerysizes .gallerysize.on { background: var(--amber); color: #101317; border-color: var(--amber-lo); }
.galleryfieldspanel { position: absolute; top: 100%; left: 0; z-index: 30; margin-top: 4px; max-height: 340px; overflow: auto; min-width: 220px;
  background: var(--panel); border: 1px solid var(--seam-bright); box-shadow: 0 18px 40px rgba(0,0,0,.6); padding: 6px 0; }
.galleryfieldsnote { padding: 2px 12px 6px; color: var(--ink-faint); font-size: 11px; }
.galleryfieldpick { display: flex; align-items: center; gap: 6px; padding: 3px 12px; color: var(--ink); cursor: pointer; }
.galleryfieldpick:hover { background: var(--panel-hi); }
.gallerybox { position: relative; background: var(--sheet-alt); }
.galleryroom { position: relative; }
.galleryempty { margin: 0; padding: 24px; color: var(--sheet-dim); }
.gallerycard { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; overflow: hidden; contain: strict;
  background: var(--sheet); color: var(--sheet-ink); border: 1px solid var(--sheet-line); border-radius: 6px; cursor: pointer;
  box-shadow: 0 1px 2px rgba(20,23,27,.08); }
.gallerycard:hover { border-color: var(--sheet-rule); box-shadow: 0 2px 8px rgba(20,23,27,.14); }
.gallerycard:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.gallerycover { flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--sheet-line);
  font: 600 40px/1 var(--chrome); }
.gallerybox[data-size="s"] .gallerycover { height: 90px; font-size: 32px; }
.gallerybox[data-size="m"] .gallerycover { height: 130px; }
.gallerybox[data-size="l"] .gallerycover { height: 190px; font-size: 56px; }
.gallerycover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallerybody { padding: 10px 10px; min-width: 0; }
.gallerycardtitle { height: 30px; line-height: 22px; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gallerycardtitle.untitled { color: var(--sheet-dim); font-weight: 400; font-style: italic; }
.galleryfield { display: flex; align-items: center; gap: 8px; height: 24px; min-width: 0; font-size: 12px; }
.gallerylabel { flex: 0 0 38%; color: var(--sheet-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.galleryvalue { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--data); }
.gallerychip { display: inline-block; margin-right: 4px; padding: 0 7px; line-height: 18px; border: 1px solid var(--sheet-rule); border-radius: 9px;
  font-family: var(--chrome); }
.gallerychip.choicechip { background: var(--choice-fill, transparent); border-color: var(--choice-border, var(--sheet-rule)); color: var(--choice-ink, inherit); }
.gallerytick { margin: 0; width: 16px; height: 16px; cursor: pointer; }
/* The Timeline layout (wave 4, 2026-10-14; web/sheet-layout-timeline.js): a sheet's records as bars along the days, on the sheet's own light
   ground. The day and hour rules are the lines' background, never an element a day; the names column and the days stick. */
.layouthost.layout-timeline { height: 100%; min-height: 0; }
.tl { display: flex; flex-direction: column; min-height: 0; height: 100%; background: var(--sheet); color: var(--sheet-ink); font: 13px var(--chrome); }
.tl .tltools { display: flex; flex-wrap: wrap; align-items: end; gap: 6px 10px; padding: 6px 8px; border-bottom: 1px solid var(--sheet-rule); background: var(--sheet-head); }
.tl .tlfield { display: flex; flex-direction: column; gap: 1px; width: 132px; font-size: 11px; color: var(--sheet-dim); }
.tl .tlpick { font: 12px var(--chrome); width: 100%; height: auto; min-height: 0; margin: 0; color: var(--sheet-ink); background: var(--sheet); border: 1px solid var(--sheet-rule); border-radius: 3px; padding: 2px 4px; }
.tl .tlzooms { display: flex; }
.tl .tlzoom, .tl .tltoday { font: 12px var(--chrome); padding: 3px 10px; border: 1px solid var(--sheet-rule); background: var(--sheet); color: var(--sheet-ink); cursor: pointer; }
.tl .tlzoom + .tlzoom { border-left: none; }
.tl .tlzoom:first-child { border-radius: 3px 0 0 3px; }
.tl .tlzoom:last-child { border-radius: 0 3px 3px 0; }
.tl .tlzoom.on { background: var(--amber); border-color: var(--amber-lo); color: #1b1004; font-weight: 600; }
.tl .tltoday { border-radius: 3px; }
.tl .tlnote { font-size: 12px; color: var(--sheet-dim); margin-left: auto; }
.tl .tlscroll { position: relative; flex: 1 1 auto; min-height: 160px; overflow: auto; overscroll-behavior: contain; }
.tl .tlscroll:focus { outline: none; }
.tl .tlcanvas { position: relative; min-width: 100%; }
.tl .tlhead { position: sticky; top: 0; z-index: 4; height: 34px; background: var(--sheet-head); border-bottom: 1px solid var(--sheet-rule); }
.tl .tlcorner { position: sticky; left: 0; z-index: 5; width: 180px; height: 34px; background: var(--sheet-head); border-right: 1px solid var(--sheet-rule); }
.tl .tldays { position: absolute; inset: 0; }
.tl .tlday { position: absolute; top: 0; height: 34px; box-sizing: border-box; padding: 3px 6px 0; border-left: 1px solid var(--sheet-rule); font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; }
.tl .tlhour { position: absolute; bottom: 2px; font-size: 10px; font-weight: 400; color: var(--sheet-dim); transform: translateX(-50%); }
.tl .tllines { position: relative; background-repeat: repeat; background-image:
  repeating-linear-gradient(to right, var(--sheet-rule) 0 1px, transparent 1px var(--tl-day, 180px)),
  repeating-linear-gradient(to right, var(--sheet-line) 0 1px, transparent 1px var(--tl-hour, 0px)); }
.tl .tlline { position: absolute; left: 0; right: 0; border-bottom: 1px solid var(--sheet-line); }
.tl .tlline.tlgroup { background: var(--panel); color: var(--amber); border-bottom-color: var(--seam); }
.tl .tlname { position: sticky; left: 0; z-index: 2; width: 180px; height: 100%; box-sizing: border-box; padding: 0 8px; display: flex; align-items: center; gap: 6px;
  background: var(--sheet-alt); border-right: 1px solid var(--sheet-rule); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl .tlgroup .tlname { background: var(--panel); font-weight: 600; width: auto; min-width: 180px; max-width: 60vw; border-right: none; }
.tl .tlcount { font-weight: 400; font-size: 11px; color: var(--ink-dim); }
.tl .tlbar { position: absolute; top: 4px; height: 21px; box-sizing: border-box; padding: 0 6px; display: flex; align-items: center; border-radius: 4px; cursor: grab;
  background: #e7ecf3; border: 1px solid #9fb0c6; color: var(--sheet-ink); font-size: 12px; white-space: nowrap; overflow: hidden; touch-action: none; user-select: none; }
.tl .tlbar.allday { border-radius: 2px; }
.tl .tlbar:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.tl .tlbar.dragging { cursor: grabbing; opacity: 0.85; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); z-index: 3; }
.tl .tlwords { overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.tl .tlend { position: absolute; top: 0; right: 0; width: 7px; height: 100%; cursor: ew-resize; }
.tl .tlend:hover, .tl .tlbar:focus .tlend { background: rgba(0, 0, 0, 0.12); }
.tl .tltodayline { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--amber); z-index: 3; pointer-events: none; }
.tl .tlagenda { display: none; }
/* A shared view's read-only link (Views ▾ › Share a read-only link…; wave 4, 2026-10-14). */
.askbox.askviewlink .viewlinkrow { display: flex; gap: 10px; align-items: center; margin: 6px 0; }
.askbox.askviewlink .viewlinkaddress { flex: 1 1 auto; min-width: 0; font-size: 12px; }
.askbox.askviewlink .viewlinkqr { flex: none; background: #fff; border-radius: 4px; }
.askbox.askviewlink .askrow { flex-wrap: wrap; }
.askbox.askviewlinks .viewlinkstable td { vertical-align: middle; }

/* ---- the Calendar layout of a sheet (wave 4, 2026-10-14; web/sheet-layout-calendar.js) -------------------------------- */
.calendarlayout { display: flex; flex-direction: column; gap: 6px; padding: 6px 8px 10px; font: 12px/1.35 var(--chrome); }
.calendarlayout .calbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; position: sticky; top: 0; z-index: 3; padding: 4px 0; background: var(--panel); }
.calendarlayout .calbar .cmd { padding: 2px 9px; min-width: 28px; border: 1px solid var(--seam-bright); background: var(--plate); color: var(--ink); font: 12px var(--chrome); cursor: pointer; border-radius: 2px; }
.calendarlayout .calbar .cmd:hover { border-color: var(--amber); color: var(--amber-hi); }
.calendarlayout .caltitle { font-size: 15px; margin: 0 8px; color: var(--ink); min-width: 150px; }
.calendarlayout .calmodes { display: inline-flex; }
.calendarlayout .calbar .calmode.on { background: var(--metal); color: #1a1006; border-color: var(--amber-lo); }
.calendarlayout .calpick { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-dim); margin-left: 6px; }
.calendarlayout .calpick select { background: var(--panel-hi); color: var(--ink); color-scheme: dark; border: 1px solid var(--seam-bright); padding: 2px 4px; font: inherit; }
.calendarlayout .calgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-left: 1px solid var(--seam); border-top: 1px solid var(--seam); }
.calendarlayout .calweekday { padding: 3px 6px; color: var(--ink-dim); text-transform: uppercase; font-size: 11px; border-right: 1px solid var(--seam); border-bottom: 1px solid var(--seam); background: var(--panel-hi); }
.calendarlayout .calday { min-height: 96px; border-right: 1px solid var(--seam); border-bottom: 1px solid var(--seam); padding: 2px 3px 4px; background: var(--panel); min-width: 0; }
.calendarlayout .calgrid.week .calday { min-height: 320px; }
.calendarlayout .calday.outside { background: var(--ground); }
.calendarlayout .calday.outside .caldaynum { color: var(--ink-faint); }
.calendarlayout .calday.today .caldaynum { color: #1a1006; background: var(--amber); border-radius: 9px; padding: 0 6px; }
.calendarlayout .calday.dropping { outline: 2px dashed var(--amber); outline-offset: -2px; background: var(--panel-hi); }
.calendarlayout .caldayhead { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 18px; }
.calendarlayout .caldaynum { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.calendarlayout .caladd { border: 1px solid var(--seam-bright); background: transparent; color: var(--amber); border-radius: 50%; width: 18px; height: 18px; line-height: 14px; padding: 0; cursor: pointer; opacity: 0.35; }
.calendarlayout .calday:hover .caladd, .calendarlayout .caladd:focus-visible { opacity: 1; }
.calendarlayout .calchips { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.calendarlayout .calchip { display: flex; gap: 6px; align-items: baseline; padding: 1px 6px; border: 1px solid var(--seam-bright); border-radius: 9px; background: var(--panel-hi); color: var(--ink); cursor: pointer; white-space: nowrap; overflow: hidden; min-width: 0; }
.calendarlayout .calchip:hover { border-color: var(--amber); }
.calendarlayout .calchip[draggable="true"] { cursor: grab; }
.calendarlayout .calchip.dragging { opacity: 0.4; }
.calendarlayout .calchip.span { border-radius: 0; }
.calendarlayout .calchip.spanstart { border-top-left-radius: 9px; border-bottom-left-radius: 9px; }
.calendarlayout .calchip.spanend { border-top-right-radius: 9px; border-bottom-right-radius: 9px; }
.calendarlayout .calchip.span:not(.spanstart) .calchipmain { opacity: 0.75; }
.calendarlayout .calchipmain { overflow: hidden; text-overflow: ellipsis; }
.calendarlayout .calchipmore { color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.calendarlayout .calchip.coloured .calchipmore { color: inherit; opacity: 0.75; }
.calendarlayout .calmore { border: 0; background: transparent; color: var(--amber); text-align: left; padding: 0 6px; cursor: pointer; font: inherit; }
.calendarlayout .calundated { border-top: 1px solid var(--seam); padding-top: 6px; color: var(--ink-dim); }
.calendarlayout .calundated .calchips { flex-direction: row; flex-wrap: wrap; }
.calendarlayout .calnote { color: var(--ink-dim); }
/* A phone: a day list, each day a heading and its chips the width of the screen. */
.calendarlayout.phone .caldaylist { display: flex; flex-direction: column; gap: 6px; }
.calendarlayout.phone .calday { min-height: 0; border: 1px solid var(--seam); padding: 6px 8px; }
.calendarlayout.phone .caldaynum { font-size: 14px; color: var(--ink); }
.calendarlayout.phone .calchip { padding: 6px 10px; font-size: 14px; }
.calendarlayout.phone .caladd { opacity: 1; width: 30px; height: 30px; font-size: 18px; }
.calendarlayout.phone .calpick select { font-size: 16px; }
.calendarlayout.phone .calprev, .calendarlayout.phone .calnext, .calendarlayout.phone .caltoday, .calendarlayout.phone .calmodes, .calendarlayout.phone .caltitle { display: none; }

/* A US federal holiday (the owner, 2026-10-14): the Days sheet's Holiday cell, and the flag on a day's heading on Shifts and the Production schedule. */
.grid tbody td.tint-holiday, .grid tbody tr:nth-child(even) td.tint-holiday { background: #fbe7d0; color: #7a3d00; font-weight: 600; }
/* A label's print status on the Printed column (`web/label-status.js`): ready amber, changed red, PDF blue, printed green — opaque pale fills, dark ink, the same on every row. */
.grid tbody td.tint-print-ready, .grid tbody tr:nth-child(even) td.tint-print-ready { background: #fbe7c4; color: #6b4300; font-weight: 600; }
.grid tbody td.tint-print-changed, .grid tbody tr:nth-child(even) td.tint-print-changed { background: #f7d4d0; color: #7a1f17; font-weight: 600; }
.grid tbody td.tint-print-pdf, .grid tbody tr:nth-child(even) td.tint-print-pdf { background: #d3e3f5; color: #1f3f6b; font-weight: 600; }
.grid tbody td.tint-print-printed, .grid tbody tr:nth-child(even) td.tint-print-printed { background: #d4ecd6; color: #1f5a2a; font-weight: 600; }
/* The same four on the Reprint panel's status pills and chips. */
.reprint .printstate { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.reprint .printstate.print-ready { background: #fbe7c4; color: #6b4300; }
.reprint .printstate.print-changed { background: #f7d4d0; color: #7a1f17; }
.reprint .printstate.print-pdf { background: #d3e3f5; color: #1f3f6b; }
.reprint .printstate.print-printed { background: #d4ecd6; color: #1f5a2a; }
.reprint .statuschips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.reprint .statuschips button { font-size: 12px; padding: 2px 10px; border-radius: 12px; border: 1px solid var(--line, #444); background: transparent; color: inherit; cursor: pointer; }
.reprint .statuschips button[aria-pressed="true"] { background: var(--amber, #e8a33d); color: #1c1308; border-color: var(--amber, #e8a33d); }
.reprint .shownprint { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0 0 6px; }
.reprint table.printcounts { border-collapse: collapse; margin: 6px 0; font-size: 13px; }
.reprint table.printcounts th, .reprint table.printcounts td { padding: 3px 10px 3px 0; text-align: right; }
.reprint table.printcounts th:first-child, .reprint table.printcounts td:first-child { text-align: left; }
.reprint table.printcounts td.num0 { opacity: 0.45; }
.reprint table.printcounts button.kindlink { background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; padding: 0; font: inherit; }
.holidayflag { color: #ffb347; font-weight: 700; }
/* The US federal holidays under a pay-policy sheet (`web/holiday-list.js`). */
details.holidaylist { margin: 10px 0; }
details.holidaylist > summary { cursor: pointer; color: var(--amber-hi); font-weight: 600; }
details.holidaylist .subtable { margin-top: 6px; }
/* The Library's picks: a press, a drag, Ctrl+click or Shift+click (web/library.js). */
table.librarylist tr.libpickrow { cursor: default; }
table.librarylist tr.libpickrow.picked td { background: color-mix(in srgb, var(--amber, #f0a020) 16%, transparent); }
table.librarylist tr.libpickrow.picked td:first-child { box-shadow: inset 3px 0 0 var(--amber, #f0a020); }
.library:focus { outline: none; }

/* Add several… on Share and Settings › Users (`web/bulk-share.js`): the roster ticked, or emails pasted. */
/* One column, top to bottom: the generic pop-up's `flex: 1 0 100%` rows grew to the pane's whole height inside a
   column and squeezed the roster's table to nothing (the owner, 2026-10-16: "it doesnt show anything"). */
.askbox.bulkshare {
  width: min(860px, calc(100vw - 40px)); max-width: min(860px, calc(100vw - 40px));
  flex-direction: column; flex-wrap: nowrap; align-items: stretch;
}
.askbox.bulkshare > * { flex: 0 0 auto; }
.askbox.bulkshare .askrow { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; margin: 0; }
.askbox.bulkshare .askrow:last-child { justify-content: flex-end; }
.askbox.bulkshare .bulkpane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.askbox.bulkshare .bulkpane > * { flex: 0 0 auto; }
.askbox.bulkshare .bulkpane .floortable { flex: 0 1 auto; min-height: 120px; max-height: 46vh; overflow: auto; width: 100%; }
.askbox.bulkshare .bulkpane .askrow .askfield { flex: 1 1 240px; min-width: 0; height: auto; }
.askbox.bulkshare textarea.askfield { width: 100%; box-sizing: border-box; height: auto; font-family: ui-monospace, monospace; }
.askbox.bulkshare tr.off td { color: var(--ink-dim); }
.askbox.bulkshare tbody tr { cursor: pointer; }
.askbox.bulkshare .cmd.on { outline: 2px solid var(--amber, #f5a524); }
.askbox.bulkshare select.askfield { width: auto; flex: 0 0 auto; }
.askbox.bulkshare .inlinetick { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.askbox.bulkshare .keyhint.short { color: var(--ink-faint); }

/* A tick beside a row's controls (Settings › This show › Users' Email the invitation, Add several…). */
.inlinetick { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
/* A sheet's form (Views ▾ › Make a form…, wave 5, `web/forms-ui.js`): the columns to ask, each opening its question when ticked. */
.askbox.askform { max-width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: auto; }
.askbox.askform .formpicks { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.askbox.askform .formfields { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow: auto; margin: 4px 0 8px; }
.askbox.askform .formfield { border: 1px solid var(--line, #d9dde3); border-radius: 6px; padding: 4px 8px; }
.askbox.askform .formfield.on { border-color: #f0a02a; }
.askbox.askform .formdetail { display: flex; flex-direction: column; gap: 4px; padding: 4px 0 4px 24px; }
.askbox.askform .formmore { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.askbox.askform textarea.asktext { min-height: 52px; resize: vertical; }
.askbox.askform .viewlinkrow { display: flex; gap: 10px; align-items: center; margin: 6px 0; }
.askbox.askform .viewlinkaddress { flex: 1 1 auto; min-width: 0; font-size: 12px; }
.askbox.askform .viewlinkqr { flex: none; background: #fff; border-radius: 4px; }
.askbox.askform .askrow { flex-wrap: wrap; }

/* Rules that act inside the app only (#21, `web/rules.js`): the editor, a sheet's list and Settings › Show › Rules. */
.askbox.rulebox, .askbox.rulesheetbox { width: min(720px, calc(100vw - 32px)); max-width: min(720px, calc(100vw - 32px)); z-index: 96; flex-direction: column; flex-wrap: nowrap; }
.rulebody { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rulehead { margin: 0; }
.ruleline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ruleline > b { width: 48px; font-size: 11px; color: var(--amber); letter-spacing: .04em; }
.ruleline select, .ruleline input { padding: 4px 7px; border: 1px solid var(--seam); background: #0e1114; color: var(--ink); font-size: 12px; min-width: 0; }
.ruleline input.ruleinput { flex: 1 1 140px; }
.ruleline input.rulename { flex: 1 1 260px; }
.rulerow { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--seam); }
.rulerow.paused .rulewords { opacity: .6; }
.rulewords { min-width: 0; flex: 1 1 auto; }
.rulewords p { margin: 4px 0 0; }
.rulesheet { color: var(--ink-faint); font-size: 12px; }
.rulerefusal { color: #ff8a7a; }
.ruletools { display: flex; gap: 6px; flex-wrap: wrap; }
.ruleswitchrow { display: inline-flex; align-items: center; gap: 8px; margin: 4px 0; }
.rulespanel h4 { margin: 16px 0 6px; }
.rulelog { border-collapse: collapse; width: 100%; font-size: 12px; }
.rulelog th, .rulelog td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--seam); vertical-align: top; }
.rulelog tr.failed td { color: #ff8a7a; }
.rulelog tr.undone td { color: var(--ink-faint); text-decoration: line-through; }
/* The Labor and Management home pages: a table of contents of the app's rail, a card a group, a row a page with its figures (2026-10-16). */
.apphome.appoverview { max-width: none; }
.tocgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; align-items: start; }
.toccard { background: var(--panel); border: 1px solid var(--seam); border-radius: 6px; padding: 8px 0 6px; }
.toccard h4 { margin: 0 12px 4px; font: 600 10px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
.tocrow { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; width: 100%; padding: 5px 12px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.tocrow:hover, .tocrow:focus-visible { background: var(--panel-hi); }
.tocrow:hover .tocname { color: var(--amber-hi); text-decoration: underline; }
.tocname { font-weight: 600; }
.tocfacts { display: inline-flex; flex-wrap: wrap; gap: 0 10px; color: var(--ink-dim); font-size: 12px; }
.tocfact b { color: var(--ink); font-weight: 600; }
.tocfact.warn b { color: var(--amber); }

/*
 * Ask Lumen to fill… (wave 5 of the Airtable-like features, #22; `web/fill-column.js`): Edit N rows…'s pop-up, wider for its
 * review — a row each, what it holds, what Lumen proposes (an unsure one in amber, an unchanged one dimmed) and a tick.
 */
.askbox.bulkedit.fillcolumn { width: min(720px, calc(100vw - 40px)); max-width: min(720px, calc(100vw - 40px)); }
/* Its own height each: `.askbox p` and `.askgrid` take `flex: 1 0 100%`, the whole of a column pop-up given a height (a phone's). */
.askbox.bulkedit.fillcolumn > *, .askbox.bulkedit.fillcolumn .fillbody > * { flex: 0 0 auto; }
.askbox.bulkedit .fillbody { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.askbox.bulkedit .fillsentence { resize: vertical; font: 13px var(--data); }
.askbox.bulkedit .fillreads { display: flex; flex-wrap: wrap; gap: 4px 14px; max-height: 140px; overflow: auto; border: 1px solid var(--seam); padding: 6px 8px; font-size: 13px; }
.askbox.bulkedit .fillreads .fillreadshead { flex: 1 0 100%; font-size: 12px; color: var(--ink-dim); }
.askbox.bulkedit .fillreads label { flex-direction: row; align-items: center; gap: 4px; font-size: 13px; }
.askbox.bulkedit .fillprogress { width: 100%; }
.askbox.bulkedit .fillask { margin-left: auto; }
.askbox.bulkedit .fillreview { max-height: min(52vh, 460px); overflow: auto; border: 1px solid var(--seam); }
.askbox.bulkedit .filltable { width: 100%; border-collapse: collapse; font: 13px var(--data); table-layout: fixed; }
.askbox.bulkedit .filltable th { position: sticky; top: 0; background: var(--panel); text-align: left; font-weight: 600; color: var(--ink-dim); padding: 4px 6px; }
.askbox.bulkedit .filltable th:first-child, .askbox.bulkedit .filltable td.fillrow { width: 3.5em; color: var(--ink-faint); }
.askbox.bulkedit .filltable th:last-child, .askbox.bulkedit .filltable td.filltickcell { width: 2.2em; text-align: center; }
.askbox.bulkedit .filltable td { padding: 3px 6px; border-top: 1px solid var(--seam); vertical-align: middle; }
.askbox.bulkedit .filltable td.fillbefore { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-dim); }
.askbox.bulkedit .filltable .fillvalue { width: 100%; box-sizing: border-box; }
.askbox.bulkedit .filltable tr.unsure:not(.same) .fillvalue { border-color: var(--amber); }
.askbox.bulkedit .filltable tr.same td { opacity: .6; }

/* Who gets a meal: wider, the list's filter row under its headings (the owner, 2026-10-18). */
.askbox.askmealfor { width: min(1100px, calc(100vw - 32px)); }
.askbox.askmealfor .mealforfilter th, .tablefilter th { padding: 2px 4px; }
.askbox.askmealfor .mealforfilter input, .tablefilter input { width: 100%; box-sizing: border-box; font-size: 12px; }
.coffeeoverhead { margin: 8px 0; align-items: center; gap: 10px; }

/* Every pop-up can be resized from its bottom-right corner, its size kept per browser and window size (`lx.popsize`, web/popup-size.js). */
.askbox { resize: both; min-width: 260px; min-height: 120px; }
/* Cases › Generated's sections under fold headings, and the rack and barge cases typed over (2026-10-18). */
.caseplan details.caseplanfold { margin-top: 18px; }
.caseplan details.caseplanfold > summary { cursor: pointer; list-style: revert; }
.caseplan details.caseplanfold > summary h3 { display: inline; margin: 0; }
.caseplan table.rackcases input:not([type="checkbox"]) { width: 100%; min-width: 60px; box-sizing: border-box; background: transparent; color: inherit; border: 1px solid transparent; font: inherit; }
.caseplan table.rackcases input:focus { border-color: var(--amber, #f0a020); }
.caseplan table.rackcases input.edited { font-style: italic; border-left: 2px solid var(--amber, #f0a020); }
.askbox.askmealfor .mealforhead { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.askbox.askmealfor .mealfortick { cursor: cell; user-select: none; }
.askbox.askmealfor .mealforlist tr.mealpicked td { background: rgba(255, 170, 40, .28); opacity: 1; }
.askbox.askmealfor .mealforlist tbody:focus { outline: none; }
/* The labor lists as sheets (2026-10-19): the import Review's and the flags' Change word and Decision, opaque on every row. */

/* The balance lock on Loads (the owner, 2026-10-25): a locked rack's card wears a faint amber edge, its Lock row under the moves. */
.rackload.locked { box-shadow: inset 3px 0 0 var(--amber); }
.racklockrow { margin-top: 6px; align-items: center; gap: 8px; }
.racklockrow .keyhint { margin: 0; }
.grid tbody tr:nth-child(n) td[class*="tint-chg-"] { font: 700 9.5px/1.6 var(--chrome); letter-spacing: .12em; text-transform: uppercase; }
.grid tbody tr:nth-child(n) td.tint-chg-new { color: #8a5a00; }
.grid tbody tr:nth-child(n) td.tint-chg-update { color: #1f5f9a; }
.grid tbody tr:nth-child(n) td.tint-chg-cut { color: #b3261e; }
.grid tbody tr:nth-child(n) td.tint-chg-duplicate { color: #7a5c00; }
.grid tbody tr:nth-child(n) td.tint-chg-same { color: #777; }
.grid tbody tr:nth-child(n) td.tint-undecided { background: #fff3c4; color: #5a4400; font-weight: 600; }
.grid tbody tr:nth-child(n) td.tint-decision-confirm, .grid tbody tr:nth-child(n) td.tint-decision-keep { background: #dcefd9; color: #1d4a1a; font-weight: 600; }
.grid tbody tr:nth-child(n) td.tint-decision-flag { background: #f1c232; color: #1a1400; font-weight: 600; }
.grid tbody tr:nth-child(n) td.tint-decision-deny { background: #f3d6d9; color: #6b1a22; font-weight: 600; }
/* A sheet inside a pop-up opens its drop-down list and its right-click menu over the pop-up, not under it (2026-10-20: on the
   import Review the Decision's list and the menu were drawn behind the wizard, so a click seemed only to offer typing and a
   right-click did nothing). Both hang on the body, below the pop-up's own layer until one is open. */
body:has(.askbox) > .cellpicker, body:has(.askbox) > .cellmenu { z-index: 97; }
body:has(.askbox) > .findbar { z-index: 96; }
/* A cell the document changes on the import Review (2026-10-20): what the show has now is on its hover. */
.grid tbody tr:nth-child(n) td.tint-changedcell { background: #dbe9f7; color: #123d66; font-weight: 600; box-shadow: inset 3px 0 0 #1f5f9a; }
.grid tbody tr:nth-child(n) td.tint-failed, .grid tbody tr:nth-child(n) td.tint-warn { color: #b3261e; font-weight: 600; }
.askbox.importwiz .reviewsheet .gridwrap, .askbox .bulkexisting .gridwrap, .askbox .draftlines .gridwrap { max-height: 44vh; }

/* Hotels › Stays: a facet that ticks several values (2026-10-19). */
details.facetmulti { position: relative; display: inline-block; }
details.facetmulti > summary { list-style: none; cursor: pointer; }
details.facetmulti > summary::-webkit-details-marker { display: none; }
details.facetmulti > summary::after { content: ' \25BE'; }
details.facetmulti > .facetlist { position: absolute; z-index: 40; top: 100%; left: 0; min-width: 220px; max-height: 320px; overflow: auto; background: var(--panel, #222); border: 1px solid var(--amber, #f0a020); border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
details.facetmulti .facetrow { display: flex; gap: 6px; align-items: center; white-space: nowrap; padding: 2px 4px; cursor: pointer; }

/* The order workbook's card at the top of Inventory › Order and Sub-orders (`orderWorkbookCard` in web/app.js). */
.workbookcard { border: 1px solid var(--line, #444); border-left: 3px solid var(--amber, #f6b26b); border-radius: 6px; padding: 6px 12px; margin: 4px 0 8px; display: grid; gap: 4px; }
.workbookcard > .result:empty { display: none; }
.workbookcard .workbookhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.workbookcard .workbookhead a { color: var(--amber, #f6b26b); }
.workbookcard .workbookactions { margin: 0 0 0 auto; }
.workbookcard .workbookchoose > summary { cursor: pointer; color: var(--muted, #aaa); font-size: 12px; }
.workbookcard .workbookchoose[open] > summary { margin-bottom: 6px; }
.askbox.reportplan .subtable { max-height: 52vh; overflow: auto; }
.askbox.reportplan select.reportpick { max-width: 360px; }
.askbox.reportplan label.reportdates { display: flex; gap: 8px; align-items: center; margin: 8px 0 0; font-size: 13px; }
.workbookcard .workbookreport { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.workbookcard .workbookreport .reportsaid { color: var(--amber-hi, #ffc46b); }
.workbookcard .workbookposted { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.workbookcard .workbookposted[hidden] { display: none; }
.askbox.postedreview .postedblock h4 { margin: 10px 0 4px; }
.askbox.postedreview .subtable { max-height: 220px; overflow: auto; }
.workbookcard .workbookactions:empty { display: none; }
.workbookcard .workbookwaiting { color: var(--amber-hi, #ffc46b); font-weight: 600; white-space: pre; }
.workbookcard .workbookwaiting[hidden] { display: none; }
.prepfiles { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: 6px; }

/* ---- A paperwork document's Layout, inside its Page setup (the owner, 2026-10-20) ---- */
.askbox.asksetup.pagesetup.haslayout { max-width: none; width: min(1240px, calc(100vw - 32px)); height: calc(100vh - 32px); display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.askbox.asksetup.pagesetup.haslayout > * { flex: 0 0 auto; }
/* Moved by its title and resized from its corner (`placeBox` in web/app.js): pinned by its own left and top. */
.askbox.movable { resize: both; }
.askbox .movehandle { cursor: move; user-select: none; }
.pagesetup details.setupprinter { padding: 2px 0 6px; }
.pagesetup details.setupprinter > summary { cursor: pointer; font: 600 12px var(--data); color: var(--ink); }
.pagesetup details.setupprinter[open] { display: flex; flex-direction: column; gap: 8px; }
.layoutedit { flex: 1 1 auto !important; min-height: 280px; display: flex; flex-direction: column; gap: 6px; margin: 4px 0; padding-top: 8px; border-top: 1px solid var(--seam); }
.layoutedit .layouthead { font: 600 13px var(--data); color: var(--amber-hi); margin-right: 4px; }
.layoutedit > * { flex: 0 0 auto !important; }
.layoutedit > .lsview, .layoutedit > .lspdf { flex: 1 1 0 !important; }
.lsbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.lsbar .lsfield { display: inline-flex; align-items: center; gap: 6px; font: 11px var(--data); color: var(--ink); }
.lsbar .lsfield .askfield.short { width: 64px; }
.lsbar .cmd.small { padding: 4px 9px; }
.lsbar .cmd.small.on { background: var(--amber-lo); color: var(--ground); }
.lsbar .lsspace { flex: 1; }
.lsnote { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.layoutfit.layoutover { color: #e8743b; }
/* Excel's Page Layout view: the grey ground, the page in white at its size (96 pixels to the inch), a ruler, letters, numbers. */
.lsview, .lspdf { flex: 1 1 auto; min-height: 220px; overflow: auto; background: #d9dbd6; border: 1px solid var(--seam); outline: none; }
.lsview[hidden], .lspdf[hidden] { display: none; }
.lspdf .layoutpage { display: block; margin: 12px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
/* A label sheet's Layout: the label to scale, each element a box to drag and resize (`labelLayoutEditor` in web/app.js). */
.layoutedit > .lbview { flex: 1 1 0 !important; }
.lbview { min-height: 260px; overflow: auto; background: #d9dbd6; border: 1px solid var(--seam); display: flex; align-items: center; justify-content: center; }
.lbstage { position: relative; flex: 0 0 auto; margin: 20px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3); outline: none; user-select: none; }
.lbstage:focus-visible { box-shadow: 0 0 0 2px var(--amber-hi), 0 2px 8px rgba(0,0,0,.3); }
.lbpicture { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity .15s; }
.lbpicture.stale { opacity: .45; }
.lbbox { position: absolute; box-sizing: border-box; border: 1px dashed rgba(176, 106, 0, .75); cursor: move; touch-action: none; }
.lbbox.moved { border-color: rgba(0, 104, 180, .85); }
/* A sheet of several labels: the boxes of the label not picked under Label. */
.lbbox[hidden] { display: none; }
.lbbox:hover { background: rgba(224, 138, 0, .06); }
.lbbox.selected { border: 1.5px solid #d97f00; background: rgba(224, 138, 0, .1); z-index: 2; }
/* A rule two points tall is hard to catch: its box reaches a few pixels past it for the pointer. */
.lbbox.lbk-rule::before { content: ''; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; }
.lbtag { position: absolute; left: -1px; bottom: 100%; display: none; padding: 0 4px; font: 600 10px/14px var(--data); color: #fff; background: rgba(150, 92, 0, .9); white-space: nowrap; pointer-events: none; }
.lbbox:hover .lbtag, .lbbox.selected .lbtag { display: block; }
.lbhandle { position: absolute; display: none; width: 9px; height: 9px; box-sizing: border-box; background: #fff; border: 1.5px solid #d97f00; }
.lbbox.selected .lbhandle { display: block; }
.lbh-nw { left: -5px; top: -5px; cursor: nwse-resize; }
.lbh-n { left: calc(50% - 4.5px); top: -5px; cursor: ns-resize; }
.lbh-ne { right: -5px; top: -5px; cursor: nesw-resize; }
.lbh-e { right: -5px; top: calc(50% - 4.5px); cursor: ew-resize; }
.lbh-se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.lbh-s { left: calc(50% - 4.5px); bottom: -5px; cursor: ns-resize; }
.lbh-sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.lbh-w { left: -5px; top: calc(50% - 4.5px); cursor: ew-resize; }
.lsdoc { position: relative; padding: 6px 0 24px; color: #1d1d1d; }
.lsruler { position: relative; height: 18px; background: #fff; border: 1px solid #b6b9b2; box-sizing: border-box; user-select: none; }
.lsruler .lsmarginband { position: absolute; top: 0; bottom: 0; background: #c9ccc5; }
.lsruler .lsinch { position: absolute; top: 1px; transform: translateX(-50%); font: 10px Arial, sans-serif; color: #333; }
.lsruler .lstick { position: absolute; bottom: 0; height: 4px; border-left: 1px solid #777; }
.lsruler .lstick.half { height: 7px; }
.lsletters { display: flex; height: 20px; user-select: none; }
.lsletter { position: relative; flex: 0 0 auto; box-sizing: border-box; height: 100%; background: #e6e8e3; border: 1px solid #b6b9b2; border-left: 0; font: 11px/18px Arial, sans-serif; color: #333; text-align: center; overflow: visible; }
.lsletters > .lsletter:nth-child(3) { border-left: 1px solid #b6b9b2; }
/* Excel's select-all corner, where the letters meet the numbers. */
.lscorner { flex: 0 0 auto; height: 100%; padding: 0; box-sizing: border-box; background: #e6e8e3 linear-gradient(135deg, transparent 58%, #9aa094 58%); border: 1px solid #b6b9b2; cursor: cell; }
.lscorner:hover { background-color: #d4ddc6; }
.lsletter, .lsnum { cursor: s-resize; }
.lsnum { cursor: e-resize; }
.lsletter.picked, .lsnum.picked { background: #c6dcc9; color: #0f5130; font-weight: bold; }
.lscell.picked, .lsrow.picked .lscell { background-color: rgba(33,115,70,.12); }
.lsletter > span { display: block; overflow: hidden; }
.lsletter:hover { background: #d4ddc6; }
.lscoledge { position: absolute; top: 0; bottom: 0; right: -4px; width: 8px; cursor: col-resize; z-index: 2; }
.lscoledge:hover { background: rgba(33,115,70,.45); }
.lsbody { display: flex; align-items: flex-start; }
.lsnums { position: relative; flex: 0 0 auto; user-select: none; }
.lsnum { position: absolute; left: 0; right: 0; box-sizing: border-box; background: #e6e8e3; border: 1px solid #b6b9b2; border-top: 0; font: 11px Arial, sans-serif; color: #333; display: flex; align-items: center; justify-content: center; overflow: visible; }
.lsnum:hover { background: #d4ddc6; }
.lsrowedge { position: absolute; left: 0; right: 0; bottom: -4px; height: 8px; cursor: row-resize; z-index: 2; }
.lsrowedge:hover { background: rgba(33,115,70,.45); }
.lspage { position: relative; flex: 0 0 auto; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.3); overflow: hidden; }
.lsmargin { position: absolute; border: 1px dashed #c9ccc5; pointer-events: none; box-sizing: border-box; }
.lsmarginline { position: absolute; top: 0; bottom: 0; border-left: 1px dashed #e8743b; pointer-events: none; opacity: .6; }
.lsheader { position: absolute; display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; box-sizing: border-box; border: 1px dashed #c9ccc5; color: #8a8d86; font: 11px Arial, sans-serif; }
.lsheader b { color: #333; font-size: 14px; }
.lsrow { position: absolute; display: block; border-bottom: 1px solid #d6d8d3; font-family: Arial, Helvetica, sans-serif; color: #1d1d1d; }
.lsrow.head { font-weight: bold; }
.lsrow.band { background: #f2f2f2; }
.lscell { position: absolute; top: 0; bottom: 0; box-sizing: border-box; border-right: 1px solid #e1e3de; overflow: hidden; }
/* A line of a cell set where the PDF sets it (`cellLines`, web/app.js): Arial at line-height 1, its baseline .83 of the size down. */
.lscell .lsborder { position: absolute; inset: 0; box-sizing: border-box; pointer-events: none; }
.lscell .lsline { position: absolute; white-space: pre; line-height: 1; font-family: Arial, Helvetica, sans-serif; }
.lsbreak { position: absolute; border-top: 2px dashed #8a8d86; padding-top: 4px; font: 11px Arial, sans-serif; color: #6b6f66; }
.lsmenu { position: fixed; z-index: 120; display: flex; flex-direction: column; min-width: 170px; padding: 4px 0; background: var(--panel); border: 1px solid var(--seam); border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.45); }
.lsmenu button { text-align: left; padding: 6px 14px; background: transparent; border: 0; color: var(--ink); font: 12px var(--data); cursor: pointer; }
.lsmenu button:hover, .lsmenu button:focus { background: var(--amber-lo); color: var(--ground); outline: none; }
.layouttip { position: fixed; z-index: 120; padding: 2px 7px; background: #f3f4f1; color: #1d2b1d; border: 1px solid #6b6f66; border-radius: 3px; font: 12px var(--data); white-space: nowrap; pointer-events: none; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.layoutwidthbox { position: fixed; z-index: 120; display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--ground); border: 1px solid var(--seam); border-radius: 4px; box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.layoutwidthbox input { width: 72px; }

.workbookcard .workbooklink { font-size: 12px; }
.workbookcard .workbooklink.linked { color: #8fd694; }
.workbookcard .workbooklink.unlinked { color: #ff8a80; }
/* The instruction email to a workbook Editor: its words to read and change before Send. */
.askbox.askinstructions { width: min(640px, calc(100vw - 32px)); }
.askbox.askinstructions textarea { width: 100%; box-sizing: border-box; min-height: 300px; font: inherit; white-space: pre-wrap; }
.askbox.askinstructions input.askfield { width: 100%; box-sizing: border-box; }


/* A finding's pick not yet saved (Review): outlined until its Save it, and the head's Save N unsaved changes. */
.wizardfix.unsaved { outline: 1px dashed var(--amber); outline-offset: 3px; border-radius: 3px; }
.reviewhead .savepicks[hidden] { display: none; }
/* EXCHANGE's Refresh with its ▾ (Replace…) as one group on the title row, the list hung under them (owner, 2026-10-26). */
.toolbar .commands.titlecmds > .refreshgroup { position: relative; display: flex; align-items: stretch; gap: 1px; }
.toolbar .commands.titlecmds > .refreshgroup .refreshmore { padding-left: 6px; padding-right: 6px; }
/* EXCHANGE's Sort by ▾ and Circuit Tools ▾ on the sheet's own row (owner, 2026-10-22). */
.toolbar .commands.toolrow > .exchangemenu { position: relative; display: flex; align-items: stretch; }
.toolbar .commands.toolrow > .exchangemenu .cabletoolsbtn { margin-left: 0; height: 100%; }
/* The Library's Internal / External (the owner, 2026-10-23): internal the team's alone, external everyone on the show. */
table.librarylist .libaud { white-space: nowrap; }
table.librarylist .cmd.dismiss.libaud.external, table.librarylist td.libaud.external { color: var(--amber, #e8a33d); border-color: currentColor; }
.laborbar select.libaudience { font: inherit; padding: 4px 6px; }

/* The rooming-list window on a hotel's card (Labor › Travel › Hotels › Publish tools; 2026-10-24): a field a row, the message tall. */
/* The rooming list in the Distribute window: To and CC typed in their own fields. */
.askbox.askroomlist input.gmto { flex: 1 1 auto; min-width: 0; }

/* The Budget page's sections as tabs (2026-10-24): the one in front in the amber, the rest plain. */
.budgettabs { margin: 10px 0 0; }
.budgettabs .cmd[aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--amber-hi); }

/*
 * The headings' own look (the owner, 2026-10-24, of the CAD Overview: "select the header row and adjust the height of it if I want
 * to cut some things off … rotate the text … adjust the font size"): a grip along the foot of the heading strip drags its height,
 * the words wrap to it and are cut off past it; right-click a heading › Headings upright / slanted 45° / turned 90°, a type size in
 * points, the height; `setHeadStyle` in web/grid.js dresses the frame.
 */

.gridwrap > .gridhead > .headgrip { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; cursor: row-resize; z-index: 11; }
.gridwrap > .gridhead > .headgrip:hover { background: rgba(11, 99, 197, .35); }
.gridwrap > .gridhead { position: sticky; }
.grid thead th[data-c] > .headwords { display: inline; }
.sheetframe[data-headh] .grid thead th[data-c] { height: var(--head-h); vertical-align: top; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.sheetframe[data-headh] .grid thead th[data-c] > .headwords { display: block; max-height: calc(var(--head-h) - 14px); overflow: hidden; }
.sheetframe[data-headsize] .grid thead th[data-c] { font-size: var(--head-size); letter-spacing: .04em; }
.sheetframe[data-headsize] .grid thead th[data-c] > .headwords { line-height: 1.2; }
/* Turned 90°: the words run up the cell, bottom to top, the cell as tall as the longest heading or the height set. */
.sheetframe[data-headrot="90"] .grid thead th[data-c] { height: var(--head-h, 120px); vertical-align: bottom; white-space: nowrap; padding-left: 8px; padding-right: 8px; }
.sheetframe[data-headrot="90"] .grid thead th[data-c] > .headwords {
  display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); max-height: calc(var(--head-h, 120px) - 14px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .06em;
}
.sheetframe[data-headrot="90"] .grid thead th[data-c] > .handle, .sheetframe[data-headrot="90"] .grid thead th[data-c] > .caret { bottom: 4px; top: auto; transform: none; }
/* Slanted 45°: the words lean up and to the right over the headings beside them, as Excel's do; the cells go clear so they show through. */
.sheetframe[data-headrot="45"] .grid thead th[data-c] { height: var(--head-h, 96px); vertical-align: bottom; white-space: nowrap; overflow: visible; background: transparent; }
.sheetframe[data-headrot="45"] .gridhead { background: var(--sheet-head); }
.sheetframe[data-headrot="45"] .grid thead th[data-c] > .headwords { display: inline-block; transform: rotate(-45deg); transform-origin: left bottom; white-space: nowrap; max-width: calc(var(--head-h, 96px) * 1.3); overflow: hidden; text-overflow: ellipsis; margin-left: 10px; }
.sheetframe[data-headrot="45"] .grid thead th[data-c] > .handle, .sheetframe[data-headrot="45"] .grid thead th[data-c] > .caret { bottom: 4px; top: auto; transform: none; }
/* The Format bar's Size: a number in points. */
.formatbar .fbsizelabel { display: inline-flex; align-items: center; gap: 3px; padding: 0 4px; }
.formatbar .fbsizelabel input.fbsize { width: 44px; font: inherit; font-size: 11px; padding: 1px 3px; }
.formatbar .fbsizelabel span { font-size: 10px; color: var(--ink-faint); }
/* CAD › Overview's Columns ▾: the kinds, the area totals, the drawing's items by category, a find box over them (the owner, 2026-10-24). */
/* Centred across the window in its own coordinates (the owner, 2026-10-24: it read off the right edge of the screen). */
.overviewmenu { position: fixed; z-index: 60; max-height: min(70vh, 640px); overflow: auto; min-width: 280px; }
.overviewmenu .overviewtick.overviewsub { padding-left: 26px; }
.overviewmenu .overviewfindrow { padding: 4px 8px; }
.overviewmenu .overviewfindrow .overviewfind { width: 100%; box-sizing: border-box; font-size: 12px; }
.overviewcolumns .overviewcolumnsctl { display: inline-block; }

/* Lumen assist on the cable sheet (`web/cable-dictate.js`): a panel on the page, listening until stopped, each pause a step. */
.dictatepanel {
  position: fixed; top: 112px; right: 16px; width: 380px; max-height: calc(100vh - 200px); z-index: 50;
  display: flex; flex-direction: column; gap: 8px; padding: 10px 12px;
  background: var(--panel); color: var(--ink); border: 2px solid var(--amber); border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
.dictatepanel:focus { outline: none; }
.dictatepanel header { display: flex; align-items: center; justify-content: space-between; color: var(--amber); }
.dictatepanel .dictateclose { background: none; border: 0; color: var(--ink); font-size: 20px; cursor: pointer; }
.dictatepanel .dictatebar { display: flex; align-items: center; gap: 12px; }
.dictatepanel .dictatelisten.listening { background: #b3261e; color: #fff; animation: dictatepulse 1.2s ease-in-out infinite; }
@keyframes dictatepulse { 50% { box-shadow: 0 0 0 6px rgba(179, 38, 30, .25); } }
.dictatepanel .dictateauto { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.dictatepanel .keyhint { margin: 0; }
.dictatepanel .dictatelive { min-height: 1.2em; font-size: 13px; font-style: italic; opacity: .8; }
.dictatepanel .dictatetype { width: 100%; box-sizing: border-box; font-size: 14px; padding: 6px 8px; }
.dictatepanel .dictatelog { overflow: auto; display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.dictatepanel .dictateentry { padding: 6px 8px; border-radius: 8px; background: var(--panel-hi); border-left: 3px solid #666; font-size: 13px; }
.dictatepanel .dictateentry.applied { border-left-color: #3fa34d; }
.dictatepanel .dictateentry.failed { border-left-color: #d9473b; }
.dictatepanel .dictateentry.nothing { opacity: .7; }
.dictatepanel .dictateheard { font-weight: 600; }
.dictatepanel .dictatestatus { display: flex; gap: 6px; align-items: center; margin-top: 2px; opacity: .85; }
.dictatepanel .dictatelines { margin: 4px 0 0; padding-left: 18px; }
.dictatepanel .dictatelines .unread { opacity: .7; font-style: italic; }
.dictatepanel .dictatelines .bad { color: #ff8a80; }
.dictatepanel .dictatebox { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 13px; padding: 4px 8px; border-radius: 8px; background: rgba(255, 138, 31, .14); color: var(--amber); }
.dictatepanel .dictatereviewbox { border: 1px solid #d9a13b; border-radius: 8px; padding: 6px 8px; max-height: 30vh; overflow: auto; }
.dictatepanel .dictatereviewbox h6 { margin: 0 0 4px; color: #f2c14e; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.dictatepanel .dictatereview { margin: 0; padding-left: 16px; font-size: 13px; }
.dictatepanel .dictatereview li { margin-bottom: 4px; }
.dictatepanel .dictatereview .why { color: #f2c14e; }
.dictatepanel .dictatereview button { margin-left: 6px; font-size: 12px; padding: 1px 6px; }
.dictatepanel .dictateentry.lumen { border-left-color: var(--amber); background: rgba(255, 138, 31, .08); }
.dictatepanel .dictateentry.lumen .dictateheard { color: var(--amber); font-size: 12px; }
.dictatepanel .dictateentry.asking { border: 1px solid var(--amber); border-left-width: 3px; }
.dictatepanel .dictateentry.question .dictateheard::before { content: '? '; color: var(--amber); }
.dictatepanel .dictateanswer { white-space: pre-wrap; }
.dictatepanel .dictatechoices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dictatepanel .dictatebox[hidden], .dictatepanel .dictatereviewbox[hidden] { display: none; }
.dictatepanel .dictateraw { font-weight: 400; font-size: 12px; opacity: .6; font-style: italic; }
.dictatepanel .dictatetrainbar { display: flex; gap: 6px; }
.dictatepanel .dictatetrain { border: 1px solid var(--amber); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.dictatepanel .dictatetrain[hidden] { display: none; }
.dictatepanel .dictatetrainline { font-size: 18px; font-weight: 600; color: var(--ink); }
.dictatepanel .dictatewords { margin: 0; padding-left: 16px; font-size: 13px; max-height: 20vh; overflow: auto; }
.dictatepanel .dictatewords button { margin-left: 6px; font-size: 11px; padding: 0 5px; }

/* ---- Management › Crew letter (`web/crew-letter.js`) ------------------------------------------------ */
.commands a.cmd { text-decoration: none; }
.crewletter { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); gap: 18px; align-items: start; padding: 4px 0 24px; }
.crewletter .clsections { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* Two panes that scroll on their own, so the letter as it reads stays in view beside the section being typed. */
.crewletter .clsections, .crewletter .clside { max-height: calc(100vh - 200px); overflow: auto; padding-right: 6px; }
.crewletter .clside { min-width: 0; }
.crewletter .clside h3 { margin: 14px 0 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.crewletter .clside .clrow h3 { margin: 0; }
.crewletter .clrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.crewletter .cltop { margin: 0 0 4px; }
.crewletter .cllabelword { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.crewletter .clinput {
  background: var(--ground); border: 1px solid var(--seam); color: var(--ink); font: 13px/1.4 var(--chrome);
  padding: 5px 7px; border-radius: 3px; min-width: 0; box-sizing: border-box;
}
.crewletter .clinput:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber-lo); }
.crewletter .clinput:disabled { color: var(--ink-dim); }
.crewletter textarea.clinput { width: 100%; resize: vertical; white-space: pre-wrap; }
.crewletter .cldoctitle { flex: 1 1 220px; font-size: 15px; }
.crewletter .claddsection { flex: 0 0 auto; }
.crewletter .clwide { flex: 1 1 260px; }
.crewletter .clsection { background: var(--panel); border: 1px solid var(--seam); border-left: 3px solid var(--amber-lo); border-radius: 4px; padding: 8px 10px 10px; }
.crewletter .clsection.off { border-left-color: var(--seam-bright); opacity: .62; }
.crewletter .clhead { display: flex; align-items: center; gap: 8px; }
.crewletter .clhead .cltitle { flex: 1 1 auto; font-weight: 600; font-size: 14px; }
.crewletter .clkind { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); white-space: nowrap; }
.crewletter .cmd {
  padding: 4px 10px; border: 1px solid var(--amber-lo); background: transparent; color: var(--amber);
  font: 600 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; white-space: nowrap;
}
.crewletter .cmd:hover:not(:disabled) { background: var(--amber-lo); color: var(--ground); }
.crewletter .cmd:disabled { opacity: .45; cursor: default; }
.crewletter .cmd.dismiss { border-color: var(--seam); color: var(--ink-faint); }
.crewletter .cmd.dismiss:hover:not(:disabled) { background: var(--seam); color: var(--ink); }
.crewletter .cmd.small { padding: 2px 8px; }
.crewletter .clmove, .crewletter .clx { padding: 2px 7px; font-size: 11px; letter-spacing: 0; }
.crewletter .clbody { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.crewletter .clfromshow { border: 1px dashed var(--seam-bright); border-radius: 3px; padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; }
.crewletter .clfromshow .keyhint { margin: 0; }
.crewletter .clplace { display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.crewletter .clplace span { color: var(--ink-dim); }
.crewletter .clmissing { font-style: italic; color: var(--amber) !important; }
.crewletter .clfields, .crewletter .clhospitals { display: flex; flex-direction: column; gap: 4px; }
.crewletter .clfield { display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr) auto; gap: 6px; align-items: start; }
.crewletter .clfield.blank { grid-template-columns: minmax(110px, 180px) minmax(0, 1fr); }
.crewletter .clfield .cllabel { font-weight: 600; }
.crewletter .clfield .clvalue { width: 100%; }
.crewletter .clhospital { display: grid; grid-template-columns: minmax(90px, 140px) minmax(120px, 1fr) minmax(140px, 1.4fr) minmax(90px, 120px) auto; gap: 6px; }
.crewletter .clhospital.blank { grid-template-columns: minmax(0, 1fr); }
.crewletter .cltick { display: flex; gap: 6px; align-items: center; color: var(--ink-dim); }
.crewletter .cltext {
  background: #fff; color: #1d1f23; border-radius: 3px; padding: 12px 14px; margin: 6px 0 0; max-height: 58vh; overflow: auto;
  font: 12.5px/1.5 var(--chrome); white-space: pre-wrap; word-break: break-word;
}
.crewletter .clversions td { white-space: nowrap; }
.crewletter .clversions td:nth-child(4) { white-space: normal; min-width: 140px; }
.askbox.clpick .clpicklist { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; margin-top: 8px; }
.askbox.clpick .clpickrow { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; background: var(--ground); border: 1px solid var(--seam); color: var(--ink); padding: 6px 8px; border-radius: 3px; cursor: pointer; }
.askbox.clpick .clpickrow:hover, .askbox.clpick .clpickrow:focus { border-color: var(--amber); }
.askbox.clpick .clpickrow span { color: var(--ink-dim); font-size: 12px; }
.askbox.clpick .clrow { display: flex; gap: 8px; }
.askbox.clpick .clrow .askfield { flex: 1 1 auto; }
/* Distribute's Crew letter: the note saved with the letter. */
.askdistribute .gmsaverow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0; }

/* ---- the print pop-up's By record sheet (web/print-records.js) ---------------------------------- */
/* A label sheet's labels as rows to tick, filter and print (the owner, 2026-10-27: "printing by record … a spreadsheet in
   that print popup"). The pane takes the body's place under the bar; the page tools step aside while it is up. */
.previewbar .previewtabs { display: inline-flex; gap: 0; }
.previewbar .previewtabs .cmd { padding: 6px 12px; }
.previewbar .previewtabs .cmd[aria-pressed="true"] { border-color: var(--amber-lo); background: var(--amber-lo); color: var(--ground); }
.previewbar .byrecordoff { display: none !important; }
.previewbody[hidden] { display: none; }
.recordspane { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 12px; overflow: hidden; }
.recordspane[hidden] { display: none; }
.recordspane .recordsbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.recordspane .recordsbar[hidden], .recordspane .recordshint[hidden] { display: none; }
/* The preview bar's own buttons: amber on the panel, the quiet ones on the seam. */
.recordspane .cmd {
  padding: 5px 12px; border: 1px solid var(--amber-lo); background: transparent; color: var(--amber);
  font: 600 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
}
.recordspane .cmd:hover:not([disabled]) { background: var(--amber-lo); color: var(--ground); }
.recordspane .cmd.dismiss { border-color: var(--seam); color: var(--ink-faint); }
.recordspane .cmd.dismiss:hover:not([disabled]) { border-color: var(--amber-lo); color: var(--amber); background: transparent; }
.recordspane .cmd[disabled] { opacity: .35; cursor: default; }
.recordspane .recordstabs { display: inline-flex; gap: 0; }
.recordspane .recordstabs .cmd[aria-pressed="true"] { border-color: var(--amber-lo); background: var(--amber-lo); color: var(--ground); }
.recordspane .recordscount, .recordspane .recordssaid { font: 11.5px var(--data); color: var(--ink-faint); }
.recordspane .recordssaid { color: var(--amber); }
/* Print in: the order the labels print in, beside Print (the owner, 2026-10-29). */
.recordspane .recordsorderlabel { display: inline-flex; align-items: center; gap: 6px; font: 600 9.5px/1.6 var(--chrome); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.recordspane .recordsorder {
  padding: 4px 8px; border: 1px solid var(--amber-lo); background: var(--panel); color: var(--amber);
  font: 12px var(--data); letter-spacing: 0; text-transform: none; cursor: pointer;
}
.recordspane .recordshint { margin: 0; }
.recordspane .recordssheet { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.recordspane .recordssheet[hidden] { display: none; }
.recordspane .recordssheet .sheetframe { flex: 1; min-height: 0; }
.recordspane .recordssheet .gridwrap { max-height: none; height: 100%; }
/* The grid's lists, menus and filter panels hang on the body: over the preview, which stands over every sheet. */
body:has(.previewer) > .cellpicker, body:has(.previewer) > .cellmenu { z-index: 98; }
/*
  A pop-up a sheet opens inside the preview — By record's Sort by several columns…, Group by…, Summarise this column…, Describe this
  column…, Filter… — is drawn over the preview and its shade, as Page setup is (the owner, 2026-11-01: "The drop down to sort by
  several columns here does nto work, it shoud lwork on every sheet for printing"; it opened at z 95, under the preview's 96).
*/
body:has(.previewer) > .askbox { z-index: 97; }
body:has(.previewer) > .findbar { z-index: 97; }

/* Truss orientation (the owner, 2026-10-28): a diagonal's suggested orientation, greyed in a blank cell, highlighted for review; and the wizard. */
.grid tbody td.tint-diagonalreview, .grid tbody tr:nth-child(even) td.tint-diagonalreview { background: rgba(245, 165, 36, .18); box-shadow: inset 0 0 0 1px var(--amber); }
.askbox.trussorient {
  width: min(980px, calc(100vw - 40px)); max-width: min(980px, calc(100vw - 40px));
  flex-direction: column; flex-wrap: nowrap; align-items: stretch;
}
.askbox.trussorient > * { flex: 0 0 auto; }
.askbox.trussorient .askrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.askbox.trussorient .askrow:last-child { justify-content: flex-end; }
.askbox.trussorient .orientsides { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.askbox.trussorient .orientside { display: flex; flex-direction: column; gap: 6px; min-width: 180px; font-size: 13px; color: var(--ink); }
.askbox.trussorient .dirpad { display: grid; grid-template-columns: repeat(3, 52px); grid-auto-rows: 30px; gap: 4px; }
.askbox.trussorient .dirpad .cmd { padding: 2px 4px; letter-spacing: .04em; }
.askbox.trussorient .dirpad .cmd.on { background: var(--amber); color: var(--panel); }
.askbox.trussorient .dircentre { display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: 11px; border: 1px dashed var(--seam); }
.askbox.trussorient .degbox { width: 160px; height: auto; }
.askbox.trussorient .floortable { max-height: 44vh; overflow: auto; width: 100%; }
.askbox.trussorient tbody tr { cursor: pointer; }
.askbox.trussorient tr.off td { color: var(--ink-dim); }
.askbox.trussorient td.suggested { color: var(--ink-faint); font-style: italic; white-space: nowrap; }
.askbox.trussorient tr.diag td { background: rgba(245, 165, 36, .18); }
.askbox.trussorient tr.differs td.suggested { color: var(--amber); }
.askbox.trussorient td.why { font-size: 12px; }
/* The positions and the reasons as written, not the small sheet's capitals. */
.askbox.trussorient tbody td { text-transform: none; letter-spacing: normal; }
.askbox.trussorient .orientsaid:empty { display: none; }
/* The Write cell: a drop-down of the suggestion and every orientation, or a box to type one (2026-10-28). */
.askbox.trussorient td.write { padding: 2px 4px; }
.askbox.trussorient td.write .askfield { width: 150px; height: auto; padding: 2px 4px; font-size: 12px; }
/* The two tabs, Orientation and Stick lengths (2026-10-29): the one in front lit as the stage pad's pick is. */
.askbox.trussorient .askrow.orienttabs { justify-content: flex-start; gap: 4px; border-bottom: 1px solid var(--seam); padding-bottom: 6px; }
.askbox.trussorient .orienttab.on { background: var(--amber); color: var(--panel); }
.askbox.trussorient .orientblock[hidden], .askbox.trussorient .lengthsblock[hidden] { display: none; }
.askbox.trussorient .lengthsblock { display: flex; flex-direction: column; gap: 8px; }
.askbox.trussorient .lengthsblock td.write .askfield { width: 210px; }
.askbox.trussorient .lengthsblock td.why { white-space: normal; min-width: 200px; }
.askbox.trussorient td.drawncell { color: var(--ink-faint); font-style: italic; white-space: nowrap; }
.askbox.trussorient tr.onepiece td { background: rgba(245, 165, 36, .12); }

/* Data › Fixture modes (2026-10-29, `web/fixture-modes.js`): the push buttons and the line under them, above the sheet. */
.fixturemodes .fixturemodehead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 8px; }
.fixturemodes .fixturemodebar { align-self: center; margin-left: 0; flex: 0 0 auto; }
.fixturemodes .fixturemodehead .keyhint { margin: 0; flex: 1 1 360px; }

/* Data › Drawing changes (2026-10-28, `web/drawing-changes.js`): which way a light went, and a record re-sent whole. */
.drawingchanges .drawingchangebar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 8px; }
.drawingchanges .drawingchangebar .keyhint { margin: 0; flex: 1 1 320px; }
.drawingchanges .tracktoggle { display: inline-flex; }
.drawingchanges .tracktoggle .scopetoggle { margin-left: 0; font-size: 12.5px; padding: 5px 12px; }
.drawingchanges .tracktoggle .scopetoggle + .scopetoggle { border-left-width: 0; }
.drawingchanges .tracktoggle .scopetoggle[aria-pressed="true"] { color: var(--amber-hi); border-color: var(--amber-lo); background: var(--panel-hi); }
.grid tbody tr:nth-child(n) td.tint-fromvw { background: #dde9fb; color: #1b4f9c; font-weight: 600; }
.grid tbody tr:nth-child(n) td.tint-tovw { background: #fdecc8; color: #6e3d00; font-weight: 600; }
.grid tbody tr:nth-child(n) td.tint-resent { background: #fbe3e3; color: #a32121; font-weight: 600; }

/* A loom checked from its tag's QR: done, flagged, the floor's note (2026-10-30). */
.loom .mini.loomdone.on { background: #1f3a24; border-color: #3fb950; color: #9be9a8; }
.loom .mini.loomflag.on { background: #3a1d1d; border-color: #e5484d; color: #ff8a92; }
details.loom.flagged > summary { box-shadow: inset 4px 0 0 #e5484d; }
.loomfloornote { color: #ffd0a0; font-style: italic; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A Skid Ski Special's T2W case: two sides of looms layered like a cake (owner, 2026-11-01). */
.t2wlooms { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; width: 100%; }
.loomsides { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; flex: 1; min-height: 0; }
.loomside { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--line, #555); border-radius: 3px; padding: 2px; font-size: 10px; }
.loomside.over { border-color: #d9534f; }
.loomstack { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 1px; justify-content: flex-end; }
.loomlayer { display: flex; flex-wrap: wrap; align-content: flex-end; gap: 2px; padding: 1px 2px; background: rgba(240, 160, 60, .18); border-radius: 2px; min-height: 14px; }
.loomlayer.new { flex: 0 0 auto; background: none; border: 1px dashed var(--line, #666); color: var(--dim, #999); justify-content: center; }
.loomlayer.over { outline: 2px solid #f0a03c; }
.loomchip { background: #f0a03c; color: #101317; border-radius: 3px; padding: 0 4px; cursor: grab; font-weight: 600; }
.loomfill { color: var(--dim, #999); text-align: right; }
/* The 8' skid with a T2W case: two 2' rack spots and the 4' case (owner, 2026-11-01). */
.bargetier.w3.t2w { grid-template-columns: 1fr 1fr 2fr; }
/* A skid's upper tier is racks stacked on racks; one turned on its side reads so (owner, 2026-11-01). */
.bargetier.upper.skidtier .bargeslot { height: 170px; }
.bargetier.upper.skidtier .bargeslot.kind-open { opacity: .55; }
.bargeslot.rotated { outline: 2px dashed #f0a03c; outline-offset: -3px; }
.bargeslot.rotated::after { content: 'on its side ⟲'; position: absolute; right: 6px; top: 4px; font-size: 10px; color: #f0a03c; }
.bargeslot.rotated { position: relative; }
.bargeslot.rotated .rackface2d, .bargeslot.rotated > svg { transform: rotate(-90deg) scale(.6); }
/*
  Cases › Generated (the owner, 2026-11-01): the head — Combine, Join, the share rules and the tool's word — stays above the tables,
  which scroll in a box of their own (`.caseplanbody`, sized to the window's foot by `fitBody`); each table's headings and its filter
  row are held at the top of that box as it scrolls.
*/
.caseplan .caseplantop { padding-bottom: 6px; border-bottom: 1px solid var(--seam); }
.caseplan .caseplantop .keyhint.combinesaid { margin: 4px 0 0; }
.caseplan .caseplanbody { overflow: auto; max-height: calc(100vh - 220px); overscroll-behavior: contain; padding-right: 4px; }
.caseplan .caseplanbody table thead { position: sticky; top: 0; z-index: 2; }
.caseplan table tr.filterrow th { padding: 2px 3px; background: var(--sheet-head); }
.caseplan table tr.filterrow input.colfilter {
  width: 100%; min-width: 40px; box-sizing: border-box; padding: 2px 4px; font: 11px var(--data);
  border: 1px solid var(--sheet-rule); background: #fff; color: var(--sheet-ink);
}
.caseplan .caseplancount { display: block; font: 10px var(--data); color: var(--amber-hi); margin: 0 0 4px; }
.caseplan .caseplancount:empty { display: none; }
/* The Generated tables sort by their headings (click, Shift+click for Then by): the arrow and its level after the words. */
.caseplan table thead th.sortable { cursor: pointer; user-select: none; }
.caseplan table thead th.sortable:hover { color: #000; }
.caseplan table thead th.sorted::after { content: " " attr(data-arrow); color: #8a4b00; font-size: 10px; }