/* ===========================================================================
   gk-io.css  --  GK-IO's screens: export (and import, later)

   Lane owner: GK-IO. Linked by shell.html after gk.css, which is FROZEN.
   No colour literal belongs here: every colour is a token from gk-tokens.css
   (imported by gk.css), because light mode is a separate palette and a typed
   hex is invisible until it is on a projector.
   =========================================================================== */

/* ---- the export picker ----------------------------------------------- */

.io-head { flex-wrap: nowrap; overflow: hidden; gap: var(--gap); }
.io-clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.io-head .tool.go[disabled] { opacity: .45; cursor: not-allowed; }

/* CSV | Excel. State is carried by aria-pressed AND by weight, never by
   colour alone (ADR-0074). */
.io-segs { display: inline-flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.io-seg {
  font: inherit; font-size: var(--fs-small); padding: 2px 10px; cursor: pointer;
  background: var(--panel); color: var(--dim); border: 0;
}
.io-seg + .io-seg { border-left: 1px solid var(--line); }
.io-seg[aria-pressed="true"] { background: var(--soft); color: var(--ink); font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent); }

/* A sentence, not an alert box: what is missing, or what just happened. */
.io-banner {
  margin: 0; padding: var(--pad); border-bottom: 1px solid var(--line);
  background: var(--panel); color: var(--ink);
}
.io-banner.io-ok  { box-shadow: inset 3px 0 0 var(--ok); }
.io-banner.io-bad { box-shadow: inset 3px 0 0 var(--warn); }
/* The method-split offer (ADR-0086 s.4): shown only when some cell's
   results disagree, so it carries the attention edge. */
.io-banner.io-split { box-shadow: inset 3px 0 0 var(--warn); }
/* The every-pass opt-in: a choice, not a warning, so no attention edge. */
.io-passes p { margin: 0 0 var(--gap); }
.io-passes label { display: inline-flex; align-items: baseline; gap: var(--gap); cursor: pointer; }
.io-split p { margin: 0 0 var(--gap); }
.io-split label { display: inline-flex; align-items: baseline; gap: var(--gap); cursor: pointer; }

.io-estatebar {
  display: flex; align-items: baseline; gap: var(--gap);
  padding: var(--pad); border-bottom: 1px solid var(--line); background: var(--panel);
}

.io-tablewrap { overflow: auto; }
.io-grid td:first-child, .io-grid th:first-child { width: 2.2em; text-align: center; }
.io-grid input[type="checkbox"] { cursor: pointer; accent-color: var(--accent); }
.io-grid input[type="checkbox"][disabled] { cursor: not-allowed; }

/* The table's name as a person would say it, with its database name under
   it -- the file in the zip is named after the second. */
/* #60 (Jason 2026-11-08): the name and the table on ONE line. Two lines in
   a grid row of one line's height showed the first and clipped the tops of
   the second. Long names end in an ellipsis; the whole is in the title. */
.io-name { display: flex; flex-direction: row; align-items: baseline; gap: .6em; min-width: 0;
           white-space: nowrap; overflow: hidden; line-height: inherit; }
.io-name > * { overflow: hidden; text-overflow: ellipsis; }
.io-name > :first-child { flex: 0 1 auto; }
.io-db { font-family: var(--mono); font-size: var(--fs-small); color: var(--dim); }
.io-dim { color: var(--dim); }
.io-flag { font-size: var(--fs-small); color: var(--warn); font-weight: 600; white-space: nowrap; }

/* How rows are chosen, in words ("through Line, Sample"). The full route --
   long, exact, the manifest's wording -- is the tooltip. The first preview
   printed the full route on every row and a location row ran to five lines
   (rendered and looked at, 2026-10-11). */
.io-scope { color: var(--dim); white-space: normal; cursor: help; }
/* A refused table, drawn as plainly as an exported one: the reason is the
   point, so it is ink, not faint. */
.io-why { font-size: var(--fs-small); color: var(--ink); font-style: italic; white-space: normal; }

.rail-list .io-soon { font-style: italic; white-space: normal; color: var(--dim); }
.meta.io-ticked { color: var(--ink); font-weight: 600; }

/* ---- the import screen ------------------------------------------------ */

/* A closed button must look closed: Load stays shut until Check passes, and
   the mockup showed a disabled .tool.go reading as live. */
.im-steps ~ * .tool.go[disabled], .io-head ~ * .tool.go[disabled] { opacity: .45; cursor: not-allowed; }

.im-steps { display: flex; border-bottom: 1px solid var(--line); background: var(--panel); }
.im-steps button {
  flex: 1; white-space: nowrap; font: inherit; padding: 8px 10px; border: 0;
  border-right: 1px solid var(--line); background: transparent; color: var(--dim);
  cursor: pointer; text-align: left;
}
.im-steps button[aria-current="step"] { color: var(--ink); font-weight: 600; background: var(--soft);
  box-shadow: inset 0 -3px 0 var(--accent); }
.im-steps button[disabled], .im-steps button.im-locked { opacity: .45; }
.im-n { display: inline-block; width: 1.6em; font-weight: 700; }

.im-pane { padding: var(--pad); display: flex; flex-direction: column; gap: calc(var(--pad) * 1.5); overflow: auto; }
.im-pane h3 { margin: 0; font-size: 1em; }
.im-card { border: 1px solid var(--line); border-radius: 6px; padding: var(--pad); background: var(--panel); }
.im-card p { margin: 4px 0; }
.im-row { display: flex; gap: var(--gap); align-items: center; flex-wrap: wrap; }
.im-drop { border: 2px dashed var(--line2); border-radius: 8px; padding: 24px; text-align: center; color: var(--dim); }
.im-big { font-size: 1.1em; font-weight: 600; color: var(--ink); }
.im-pill { display: inline-block; font-size: var(--fs-small); padding: 1px 8px; border-radius: 10px;
  border: 1px solid var(--line2); color: var(--dim); }
.im-pill.ok { color: var(--ok); border-color: var(--ok); }

/* The proof is the point of Check, so it is the first thing in it. Pass and
   fail are carried by the sentence; the edge colour only reinforces it
   (ADR-0074). */
.im-proof { border-left: 4px solid var(--ok); }
.im-proof.blocked { border-left-color: var(--accent); }
.im-proof ul { margin: 6px 0; padding-left: 1.2em; }
.im-span { display: block; margin-top: 6px; }
.im-grid td, .im-grid th { vertical-align: top; }
/* The editor's "Goes to" and element/unit pickers: narrower, and the pair
   kept on one line, so less of the grid scrolls sideways. */
.im-grid select { max-width: 15rem; }
.im-pair { display: inline-flex; gap: 4px; white-space: nowrap; }

/* ---- Order of trust (gk-order.js) ------------------------------------- */
.ord-last { margin: 0; padding: 0 var(--pad); }
.ord-picks { display: flex; flex-wrap: wrap; gap: var(--gap); padding: var(--pad) var(--pad) 0; }
.ord-pick { display: inline-flex; align-items: center; gap: 6px; }
.ord-pick select { max-width: min(28rem, 100%); }
/* One column grid for the whole list, shared by every row through subgrid,
   so the code column is as wide as the longest code ("interpretation") and
   every name starts at the same x. Before this the code sat in a fixed
   3.2rem cell and ran over the name (MASTER's walk, 16-orders.jpg). */
.ord-list { list-style: none; margin: 0; padding: var(--pad); display: grid; gap: 6px;
  grid-template-columns: 2.2rem max-content minmax(0, 1fr) auto; }
.ord-row {
  display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; column-gap: var(--gap);
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px;
}
@supports not (grid-template-columns: subgrid) {
  .ord-row { grid-template-columns: 2.2rem 9rem minmax(0, 1fr) auto; }
  .ord-code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.ord-row[draggable="true"] { cursor: grab; }
.ord-row.tied { border-top-style: dashed; }
.ord-pos { font-family: var(--mono); font-weight: 600; color: var(--accent); text-align: center; font-variant-numeric: tabular-nums; }
.ord-row.tied .ord-pos { color: var(--dim); }
.ord-code { font-family: var(--mono); background: var(--soft); border-radius: 4px; padding: 1px 6px; justify-self: start; }
.ord-what { display: grid; min-width: 0; }
.ord-name { font-weight: 500; }
.ord-tag { margin-left: 6px; font-size: var(--fs-small); text-transform: uppercase; letter-spacing: 0.04em;
  border: 1px solid var(--warn); color: var(--warn); border-radius: 999px; padding: 0 6px; }
.ord-tag.dim { border-color: var(--line); color: var(--dim); }
.ord-ctl { display: flex; align-items: center; gap: 4px; }
.ord-tie { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-small); color: var(--dim); white-space: nowrap; }
.ord-unknown { padding: 0 var(--pad) var(--pad); }
.ord-unknown h3 { margin: var(--pad) 0 4px; font-size: 1em; }
.ord-unknown ul { margin: 0; padding-left: 1.2em; }
@media (max-width: 560px) {
  .ord-list { grid-template-columns: 2rem minmax(0, 1fr); }
  .ord-row { grid-template-columns: subgrid; row-gap: 2px; }
  .ord-code, .ord-what { grid-column: 2; }
  .ord-ctl { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ---- Despatch (gk-despatch.js, ADR-0096) -------------------------------- */
.desp-late { color: var(--warn); }
/* Controls on the despatch screen take the app's form look (gk.css .vform),
   so a date or a sample list is never white-on-white in the dark theme. */
.desp-form input, .desp-form select, .desp-form textarea,
.desp-inline input, .desp-inline select, .ord-pick select, .ls-tools select,
.se-grid input, .se-grid select, .desp-actions input, .desp-actions select,
.im-row select, .im-row input:not([type=file]):not([type=checkbox]), .im-grid select, .im-grid input:not([type=checkbox]) {
  background: var(--ground); color: var(--ink); border: 1px solid var(--line2); border-radius: 3px; padding: 3px 6px; font: inherit; }
.desp-form input:focus, .desp-form select:focus, .desp-form textarea:focus,
.desp-inline input:focus, .desp-inline select:focus, .ord-pick select:focus, .ls-tools select:focus,
.im-row select:focus, .im-row input:focus, .im-grid select:focus, .im-grid input:focus, .desp-actions select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.desp-form ::placeholder, .desp-inline ::placeholder { color: var(--faint); }
.desp-form { display: grid; gap: var(--gap); padding: var(--pad); max-width: 46rem; }
.desp-field { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 4px var(--gap); align-items: start; }
.desp-field .hint { grid-column: 2; }
.desp-label { padding-top: 4px; color: var(--dim); }
.desp-field textarea { font-family: var(--mono); min-height: 8rem; resize: vertical; }
.desp-lab { display: flex; gap: 6px; flex-wrap: wrap; }
.desp-lab select { flex: 1 1 14rem; min-width: 0; }
.desp-actions { display: flex; gap: 6px; padding: 0 var(--pad) var(--pad); }
.desp-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 4px var(--pad); }
.desp-stat b { font-variant-numeric: tabular-nums; }
.desp-table { width: calc(100% - 2 * var(--pad)); margin: 0 var(--pad); border-collapse: collapse; }
.desp-table th, .desp-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.desp-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.desp-table tr.desp-out td { color: var(--dim); }
/* One line: two buttons wrapped to 29 px in a 24 px grid row and clipped (sweep 2026-11-08, #60's kind). */
.desp-acts { display: inline-flex; gap: 4px; flex-wrap: nowrap; white-space: nowrap; }
.desp-acts .tool { padding-top: 0; padding-bottom: 0; min-height: 0; height: 20px; line-height: 18px; font-size: var(--fs-small); }
.desp-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px var(--pad); }
.desp-inline input[type="text"] { flex: 1 1 14rem; min-width: 0; }
.desp-log { padding: 0 var(--pad) var(--pad); }
.desp-log h3 { margin: var(--pad) 0 4px; font-size: 1em; }
.desp-log ul { margin: 0; padding-left: 1.2em; }
.desp-withdrawn > span:first-child { text-decoration: line-through; color: var(--dim); }
@media (max-width: 560px) {
  .desp-field { grid-template-columns: minmax(0, 1fr); }
  .desp-field .hint { grid-column: 1; }
}

/* ---- QA/QC (gk-qaqc.js, ADR-0096 s.8) ----------------------------------- */
/* Outcome is a word and a shape on every row; colour only reinforces it.
   Status tokens: --ok pass, --warn warn, --accent fail. */
.io-warn { border-left-color: var(--warn); }
.qc-h { margin: var(--pad) var(--pad) 4px; font-size: 1em; }
h4.qc-h { font-weight: 500; color: var(--ink2); }
.qc-o { white-space: nowrap; }
.qc-pass { color: var(--ok); }
.qc-warn { color: var(--warn); }
.qc-fail { color: var(--accent); font-weight: 600; }
.qc-v-fail { color: var(--accent); }
.qc-v-warn { color: var(--warn); }
.qc-chart { padding: 0 var(--pad); max-width: 46rem; }
.qc-svg { width: 100%; height: auto; display: block; }
.qc-square { max-width: 24rem; }
.qc-svg .qc-ax { fill: var(--dim); font-size: 11px; font-family: var(--mono); }
.qc-svg .qc-mid { stroke: var(--line2); stroke-width: 1; }
.qc-svg .qc-warnline { stroke: var(--warn); stroke-width: 1; stroke-dasharray: 4 3; }
.qc-svg .qc-failline { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 3; }
.qc-svg .qc-jobline { stroke: var(--line2); stroke-width: 1; stroke-dasharray: 1 3; }
.qc-svg .qc-pt circle, .qc-svg .qc-pt path { stroke-width: 2; }
.qc-svg .qc-pass circle { fill: var(--ok); stroke: var(--ground); }
.qc-svg .qc-warn path { fill: var(--warn); stroke: var(--ground); }
.qc-svg .qc-fail path { fill: none; stroke: var(--accent); stroke-width: 2.5; }
.qc-svg .qc-other circle { fill: none; stroke: var(--faint); }
.qc-svg .qc-hit { fill: transparent; stroke: none; }
.qc-svg .qc-pt:hover circle, .qc-svg .qc-pt:hover path { stroke: var(--ink); }
.qc-rules { padding: var(--pad); color: var(--dim); }
.qc-rules summary { cursor: pointer; }

/* ---- The Leapfrog set (gk-export.js, ADR-0097) ------------------------ */
.io-set { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px var(--gap); margin: 0; padding: var(--pad); max-width: 52rem; }
.io-set dt { justify-self: start; align-self: start; }
.io-set dd { margin: 0; }
@media (max-width: 560px) { .io-set { grid-template-columns: minmax(0, 1fr); } }

/* ---- JORC Table 1 (gk-report.js, ADR-0097 s.2) ------------------------ */
.rep-card { padding: var(--pad); max-width: 52rem; }
.rep-title { margin: 0 0 2px; font-size: 1.15em; }
.rep-ask { color: var(--ink2); margin: 6px 0; }
.rep-facts { margin: 0; padding-left: 1.2em; }
.rep-facts li { margin: 2px 0; }
.rep-words { width: 100%; min-height: 9rem; resize: vertical; background: var(--ground); color: var(--ink);
  border: 1px solid var(--line2); border-radius: 3px; padding: 6px 8px; font: inherit; line-height: 1.45; }
.rep-words:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.rep-card .desp-actions { padding: 6px 0 0; align-items: center; }
.rep-written { color: var(--ok); }
.rep-facts-only, .rep-to-write { color: var(--dim); }
.pane-head a.tool { text-decoration: none; }

/* Export step 2: one line per field. The minimum is ticked and locked. */
.io-fields { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.io-fields input { accent-color: var(--accent); }
.io-fields label { display: flex; gap: var(--gap); align-items: baseline; padding: 2px 0; cursor: pointer; }
.io-fields .io-min label { cursor: default; }
.io-fname { font-family: var(--mono); min-width: 14em; }

/* Saved exports (135): the keep card in step 3, and the rail's notes. */
.io-keep-name { flex: 1 1 18em; min-width: 12em; font: inherit; padding: 3px 6px; border: 1px solid var(--line2);
  border-radius: 3px; background: var(--ground); color: var(--ink); }
.io-keep-name:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.io-keep-name::placeholder { color: var(--faint); }
.io-keep-scope { display: inline-flex; gap: 4px; align-items: baseline; cursor: pointer; white-space: nowrap; }
.io-keep-scope input { accent-color: var(--accent); }
.io-railnote { padding: 4px 12px; }

/* JORC: how a draft works over time (note 18), folded under the heading. */
.rep-how { margin: 0 var(--pad); max-width: 52rem; color: var(--ink2); }
.rep-how summary { cursor: pointer; color: var(--dim); padding: 4px 0; }
.rep-how ul { margin: 2px 0 6px; padding-left: 1.2em; }
.rep-how li { margin: 2px 0; }

/* JORC editions (136). */
.rep-pick { background: var(--ground); color: var(--ink); border: 1px solid var(--line2); border-radius: 3px; padding: 3px 6px; font: inherit; max-width: 22rem; }
.rep-pick:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.rep-ed { margin: 6px var(--pad); padding: 6px var(--pad); max-width: 52rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 4px; background: var(--panel); }
.rep-ed.rep-final { border-left-color: var(--ok); }
.rep-ed p { margin: 2px 0; }
.rep-ed .desp-actions { padding: 4px 0 0; }
.rep-diff { list-style: none; padding-left: 0; font-variant-numeric: tabular-nums; }
.rep-new { color: var(--ok); }
.rep-gone { color: var(--warn); }
.rep-progs { display: flex; flex-direction: column; gap: 2px; }
.rep-holes { min-height: 5rem; font-family: var(--mono); }
.rep-carried { color: var(--dim); }
.rep-rewritten { color: var(--ok); }
.rep-words:disabled { opacity: .75; cursor: not-allowed; }
.rep-head { flex-wrap: wrap; row-gap: 4px; }
.rep-head .tool, .rep-head .pane-title { white-space: nowrap; }
.rep-scope { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.rep-scope-detail { grid-column: 2; }

/* Market releases (137). */
.rep-line { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) 5rem 5rem; gap: 6px; margin: 4px 0; align-items: start; }
.rep-line input, .rep-line textarea { min-width: 0; }
.rep-depth { width: 5rem; }
.rep-short { flex: 0 1 12rem; }
.desp-form .im-row input { flex: 1 1 8rem; }
.rep-line .rep-holes { min-height: 2.4rem; }

/* QA/QC tolerances (138). */
.qc-tols { list-style: none; margin: 0 var(--pad); padding: 0; max-width: 52rem; display: flex; flex-direction: column; gap: 8px; }
.qc-tol { padding: 6px var(--pad); border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
section.qc-tol { margin: 8px var(--pad); max-width: 52rem; }
.qc-tol-words { font-weight: 500; }
.qc-tol .tool { margin-top: 4px; }
.qc-tol-form { padding: 6px 0 0; max-width: none; }
.qc-tol-f { display: inline-flex; gap: 4px; align-items: baseline; }
.qc-tol-f input { width: 5rem; }
.qc-tol-f .hint { white-space: nowrap; }
.qc-tols ~ p.hint, .qc-tols ~ .desp-actions, .qc-tols ~ details { margin-left: var(--pad); margin-right: var(--pad); }

/* QA/QC decisions, certificates and methods (210, 211) */
section > .qc-tol.qc-dec, .qc-dec { margin: 6px var(--pad); max-width: 52rem; }
.qc-decform { margin: 6px var(--pad); max-width: 52rem; }
.qc-picks { list-style: none; margin: 4px 0; padding: 4px 6px; max-height: 16rem; overflow: auto;
  border: 1px solid var(--line); border-radius: 4px; background: var(--ground); columns: 3 12rem; }
.qc-picks li { break-inside: avoid; }
.qc-picks label { display: inline-flex; gap: 4px; align-items: baseline; }
.qc-paste { width: 100%; font-family: var(--mono); font-size: 0.9em; }
.qc-old { color: var(--dim); }
section.qc-tol.qc-old { background: var(--ground); }
.qc-foot { margin: 4px var(--pad); }
.qc-o.qc-over-range, .qc-o.qc-not-certified-for-this-method { color: var(--dim); }
.qc-radios { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 4px 0; }
.qc-radio { display: inline-flex; gap: 6px; align-items: center; }
.qc-paste { background: var(--ground); color: var(--ink); border: 1px solid var(--line2); border-radius: 4px; padding: 6px; }
.qc-problems { list-style: none; margin: 4px 0; }
.qc-nowrap { white-space: nowrap; }

/* Import: building an importer for a laboratory file (212) */
.im-or { margin: 12px 0 4px; color: var(--dim); }
table.im-lab { margin: 8px 0; }
table.im-lab tr.im-off td { color: var(--dim); }
table.im-lab .im-method { width: 9rem; font-family: var(--mono); }
table.im-lab .im-lor { width: 5rem; font-family: var(--mono); }
table.im-lab input[type="text"] { background: var(--ground); color: var(--ink); border: 1px solid var(--line2); border-radius: 4px; padding: 3px 6px; }
table.im-lab input[type="text"]:disabled { color: var(--dim); opacity: .6; }
.im-labname { background: var(--ground); color: var(--ink); border: 1px solid var(--line2); border-radius: 4px; padding: 4px 8px; min-width: 16rem; }

/* ---- the risk register (gk-risk.js, 218) -------------------------------
   Band shades come from the map's sequential ramp, softened against the
   panel. The shade is never the meaning: every cell and badge says its
   band, count or score in words. */
.rk-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: var(--gap) var(--pad); }
.rk-chips .io-seg { border: 1px solid var(--line); border-radius: 4px; }
.rk-heat { padding: var(--gap) var(--pad); overflow-x: auto; }
.rk-grid { border-collapse: separate; border-spacing: 2px; font-size: var(--fs-small); }
.rk-grid th { font-weight: 500; color: var(--dim); text-align: left; padding: 2px 6px; white-space: nowrap; }
.rk-grid thead th { text-align: center; white-space: normal; vertical-align: bottom; }
.rk-corner { color: var(--faint); }
.rk-cell { padding: 0; min-width: 2.75rem; height: 2.6rem; border-radius: 3px; background: var(--panel2); }
.rk-cellbtn { width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding: 2px 6px; border: 0; background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.rk-cellbtn:disabled { cursor: default; }
.rk-cellbtn.rk-empty { cursor: default; }
.rk-rate { display: flex; align-items: center; gap: 4px; margin-top: var(--gap); font-weight: 500; }
.rk-cell.rk-on { box-shadow: inset 0 0 0 2px var(--accent); }
.rk-n { font-weight: 600; font-size: 1.1em; }
.rk-score { color: var(--dim); font-size: var(--fs-small); }
.rk-b1 { background: color-mix(in srgb, var(--map-step-1) 40%, var(--panel)); }
.rk-b2 { background: color-mix(in srgb, var(--map-step-3) 40%, var(--panel)); }
.rk-b3 { background: color-mix(in srgb, var(--map-step-5) 45%, var(--panel)); }
.rk-b4 { background: color-mix(in srgb, var(--map-step-6) 55%, var(--panel)); }
.rk-b5, .rk-b6 { background: color-mix(in srgb, var(--map-step-6) 70%, var(--panel)); }
.rk-badge { display: inline-block; padding: 0 6px; border-radius: 3px; color: var(--ink); margin-right: 4px; }
.rk-legend { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--gap); }
.rk-levels { display: grid; gap: 2px; margin: 2px 0 var(--gap); }
.rk-level { display: grid; grid-template-columns: auto 10rem 1fr; gap: var(--gap); align-items: baseline; cursor: pointer; }
.rk-lvl { font-weight: 500; }
.rk-form input[type="text"] { width: 100%; max-width: 48rem; }

/* Lab set-up (gk-labsetup.js): the tools under a screen's title wrap, so a
   narrow pane never pushes a button out of sight. */
.ls-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px var(--pad); }
.ls-tools select { max-width: 100%; }
.ls-desc { margin: 0; padding: 0 var(--pad) var(--pad); max-width: 60rem; }

/* Entering a hole's samples (gk-despatch.js se*): a row the check refused
   is marked in its own words in the Check column, and tinted. */
.se-grid td { padding: 2px 4px; vertical-align: middle; }
.se-grid input:disabled, .se-grid select:disabled { opacity: .45; }
.se-grid tr.se-bad td { background: color-mix(in srgb, var(--warn) 12%, transparent); }
/* A table that cannot be exported, a field always in: marks, not controls (sweep 2026-11-08). */
.io-no, .io-always { display: inline-block; width: 1.1em; text-align: center; color: var(--dim); }
.ord-gap { visibility: hidden; }
/* Programme plans (269): one criterion per card, the fields as label and control. */
.plan-crit { padding-top: 6px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.plan-head { display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left; background: none; border: 0; color: var(--ink); font: inherit; padding: 2px 0; cursor: pointer; }
.plan-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.plan-t { font-weight: 600; }
.plan-planned { color: var(--ok); }
.plan-copied { color: var(--warn); }
.plan-not-planned { color: var(--dim); }
.plan-fields { display: grid; gap: 6px; margin: 6px 0; }
.plan-f { display: grid; grid-template-columns: 15rem 1fr; gap: 4px 12px; align-items: baseline; margin: 4px 0; }
.plan-l { color: var(--ink2); }
.plan-why { min-width: 22rem; }
@media (max-width: 760px) { .plan-f { grid-template-columns: 1fr; } }
.plan-check { padding: 4px 0; border-bottom: 1px solid var(--line); }
.rep-planned { margin: 6px 0; padding: 4px 10px; border-left: 3px solid var(--line2); }
.rep-planned ul ul { margin: 2px 0 4px; padding-left: 1.1em; }
.plan-sec { margin: 14px var(--pad) 0; }