/* GeoKeys chrome. Seven named regions, four templates.
   docs/specs/layout-regions-and-keyboard.md  ·  ADR-0068 (the shell is the
   scope bar)  ·  ADR-0069 (preferences)  ·  ADR-0074 (readable without
   colour, usable without a mouse).

   No colour literal belongs in this file. Every one comes from gk-tokens.css,
   which is generated from tokens.json. If you need a colour that is not here,
   add it to tokens.json.                                                    */

@import url('./gk-tokens.css');

/* ---- 0. reset, type, density ------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

:root {
  /* Density is a preference, not a theme (ADR-0069). One variable moves every
     row height, pad and font step together, so "verbose" is one attribute on
     <body> and not forty rules. */
  --row: 26px;
  --pad: 6px;
  --fs: 13.5px;
  --fs-small: 12px;
  --gap: 8px;
  --rail-w: 232px;
  --insp-w: 300px;
  --chrome-h: 38px;
  /* ONE FONT (Jason, 2026-10-17: "Must still be some places where the font
     is not the same"). Hole ids, depths and codes used to be set in the
     monospace face, which read as a second font on every screen. They are
     now IBM Plex Sans with tabular figures, so digits still line up in a
     column. --mono is kept as a name so no lane file has to change; real
     code (SQL in Explain, error detail) uses --code. */
  --sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --mono: var(--sans);
  --code: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
}

/* TEXT SIZE is the person's own setting (Jason, 2026-10-17: "font size
   could be a user setting - even 3 options smaller, normal, larger").
   Rows (density) is spacing only; text is size only; row height follows
   both, so a larger text never sits in a cramped row. Normal is a step up
   from the old default, toward the estates mockup; Smaller is the old look. */
body[data-text="small"] { --fs: 12.5px; --fs-small: 11px; --row: 22px; }
body[data-text="large"] { --fs: 15px;   --fs-small: 13px; --row: 30px; }

body[data-density="verbose"] { --pad: 9px; --gap: 12px; --row: 32px; }
body[data-density="verbose"][data-text="small"] { --row: 30px; }
body[data-density="verbose"][data-text="large"] { --row: 36px; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--ground);
  color: var(--ink);
  font: var(--fs)/1.45 var(--sans);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}

h1, h2, h3 { font-weight: 600; margin: 0; }

/* Numbers line up or they cannot be compared. Depths, analytes, hole ids. */
.num, .depth, .mono, td.num, th.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num, td.num, th.num { text-align: right; }

button, input, select { font: inherit; color: inherit; }

/* ---- 1. focus, skip links --------------------------------------------- */

/* Every focusable thing shows a ring. This is the whole of "usable without a
   mouse" that CSS can contribute, and it is not optional. */
:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 1px;
}

.skips { position: absolute; z-index: 60; }
.skips a {
  position: absolute; left: -9999px; top: 0;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--accent); padding: 6px 10px; border-radius: 4px;
  text-decoration: none; white-space: nowrap;
}
.skips a:focus { left: 8px; top: 8px; }

/* A region that has just been jumped to says so for a moment, because a
   keyboard jump with no visible answer feels like a key that did nothing. */
.region { position: relative; }
.region.jumped::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--accent);
  animation: fade 900ms ease-out forwards;
}
@keyframes fade { from { opacity: 1; } to { opacity: 0; } }

/* ---- 2. the frame: seven regions -------------------------------------- */

#app {
  display: grid;
  height: 100vh;
  grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--insp-w);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    'scope     scope     scope'
    'filters   filters   filters'
    'screens   screens   screens'
    'nav       work      inspector'
    'status    status    status';
}

#scope     { grid-area: scope; }
#filters   { grid-area: filters; }
#screens   { grid-area: screens; }
#nav       { grid-area: nav; }
#work      { grid-area: work; }
#inspector { grid-area: inspector; }
#status    { grid-area: status; }

/* The four templates change the BODY only (regions 4-6). Fixed chrome never
   moves: same place, same order, every screen, every module. */
body[data-template="t1"] #app {          /* nav + work */
  grid-template-columns: var(--rail-w) minmax(0, 1fr) 0;
}
body[data-template="t1"] #inspector { display: none; }

/* ENTRY BORROWS THE INSPECTOR COLUMN.
   The Grid screen is a two-region template, so there is no Selection pane on
   it -- which is where a new record is typed (ADR-0082; Jason, 2026-10-04:
   "the selection pane is where I would enter all data"). Rather than give the
   screen a third region it does not otherwise need, the pane APPEARS while
   something is being typed and goes away when it is saved or abandoned. It is
   wider than the reading inspector because the point of choosing it over a
   grid row was seeing every field at once without scrolling. */
body[data-entry="on"] #app { grid-template-columns: var(--rail-w) minmax(0, 1fr) 420px; }
body[data-entry="on"] #inspector { display: block; }
body[data-entry="on"] #inspector .insp-head,
body[data-entry="on"] .inspspine { display: none; }

body[data-template="t2"] #app { }        /* nav + work + inspector: as above */

body[data-template="t3"] #app {          /* split work, inspector optional */
  grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--insp-w);
}
body[data-template="t3"] #work[data-layout="split"] {
  display: grid;
  /* The log gets --split of the height and the table the rest, with a handle
     between them. Dragging it is how you see more of the hole. */
  grid-template-rows: minmax(0, var(--split, 55%)) 7px minmax(0, 1fr);
}
/* Folded: the table keeps its header row -- and with it the button that
   brings it back. A control that folds itself off the screen is a trap. */
body[data-template="t3"] #work[data-layout="split"][data-fold="table"] {
  grid-template-rows: minmax(0, 1fr) 7px auto;
}
/* The grab bar between the log and the table. */
.splitter {
  background: var(--panel2); border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); cursor: row-resize;
  position: relative;
}
.splitter::after {
  content: ''; position: absolute; left: 50%; top: 2px;
  width: 42px; height: 3px; margin-left: -21px; border-radius: 2px;
  background: var(--line2);
}
.splitter:hover::after, .splitter.dragging::after { background: var(--accent); }
body[data-density="verbose"] .splitter { height: 9px; }

/* A list is one flow, however the template is set. */
#work[data-layout="flow"] { display: block; }

/* The map fills what is left after its own toolbar, and does NOT scroll: a
   scrollbar on a pannable map is two gestures competing for one wheel. */
/* Three rows: the collar bar, the colour/size bar, and the map taking
   whatever is left. Naming only two left the slack on the wrong row and the
   map ended up in the bottom third of the screen. */
#work[data-layout="map"] {
  display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden;
}

body[data-template="t4"] #app {          /* compare: equal panes, no nav */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    'scope   scope'
    'filters filters'
    'screens screens'
    'work    inspector'
    'status  status';
}
body[data-template="t4"] #nav { display: none; }

/* Explain mode adds a row across the bottom of the work area -- the seven
   regions are unmoved, a tracing panel is simply pushed in under them. The
   height is a custom property so the bar at its top can drag it. */
body[data-explain="on"] #app {
  grid-template-rows: auto auto auto minmax(0, 1fr)
                      minmax(96px, var(--xh, 34%)) auto;
  grid-template-areas:
    'scope     scope     scope'
    'filters   filters   filters'
    'screens   screens   screens'
    'nav       work      inspector'
    'explain   explain   explain'
    'status    status    status';
}
body[data-explain="on"][data-template="t4"] #app {
  grid-template-areas:
    'scope   scope'
    'filters filters'
    'screens screens'
    'work    inspector'
    'explain explain'
    'status  status';
}
#explain { display: none; }
body[data-explain="on"] #explain {
  grid-area: explain; display: grid;
  grid-template-rows: 7px auto minmax(0, 1fr);
  border-top: 1px solid var(--line); background: var(--panel);
  overflow: hidden; min-height: 0;
}

/* ---- 3. scope (banner) ------------------------------------------------ */

#scope {
  display: flex; align-items: center; gap: var(--gap);
  background: var(--panel); border-bottom: 1px solid var(--line);
  padding: 0 var(--pad); min-height: var(--chrome-h);
}

.brand { display: flex; align-items: center; gap: 6px; font-weight: 600; letter-spacing: -.02em; }
.brand .mark {
  width: 16px; height: 16px; border-radius: 4px;
  background: var(--accent);
  box-shadow: inset 0 0 0 3px var(--panel), inset 0 0 0 4px var(--accent);
}

/* The chip row IS the filter (ADR-0068). It is one component, used once. */
.chips { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; min-width: 0; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; color: var(--ink2);
  border: 1px solid var(--line2); border-radius: 12px;
  padding: 2px 9px; cursor: pointer; max-width: 260px;
}
.chip:hover { color: var(--ink); border-color: var(--accent); }
.chip[aria-pressed="true"], .chip.on {
  background: var(--soft); border-color: var(--edge); color: var(--ink);
}
.chip .k { color: var(--dim); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .06em; }
.chip .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip.empty { color: var(--faint); border-style: dashed; }

/* A set chip carries its own clear. */
.chipwrap { display: inline-flex; align-items: center; }
.chipwrap .chipx {
  background: transparent; border: 0; color: var(--dim);
  cursor: pointer; padding: 0 4px; margin-left: -3px; line-height: 1;
}
.chipwrap .chipx:hover { color: var(--accent2); }

/* A hole with nothing logged says so in the rail, in the warning colour. */
.rail-list .meta.none { color: var(--warn); }
.sep { color: var(--faint); padding: 0 1px; }

.spacer { flex: 1 1 auto; }

.badge {
  font-family: var(--mono); font-size: var(--fs-small);
  color: var(--dim); border: 1px solid var(--line2); border-radius: 4px;
  padding: 1px 6px; white-space: nowrap;
}
.badge.stale { color: var(--warn); border-color: var(--warn); }

.tool {
  background: transparent; border: 1px solid var(--line2); color: var(--ink2);
  border-radius: 4px; padding: 2px 8px; cursor: pointer;
}
.tool:hover { color: var(--ink); border-color: var(--accent); }

/* ---- 4. filters (search) ---------------------------------------------- */

#filters {
  display: flex; align-items: center; gap: var(--gap);
  background: var(--panel2); border-bottom: 1px solid var(--line);
  padding: calc(var(--pad) / 2) var(--pad);
}

#filters input[type="search"], #filters input[type="text"] {
  background: var(--bed); border: 1px solid var(--line2); border-radius: 4px;
  padding: 3px 8px; min-width: 180px;
}
#filters input::placeholder { color: var(--faint); }

.label { color: var(--dim); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .06em; }

/* ---- 5. screens (navigation) ------------------------------------------ */

#screens {
  display: flex; gap: 0; background: var(--panel2);
  border-bottom: 1px solid var(--line); padding: 0 var(--pad);
}
.tab {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--dim); padding: 6px 12px; cursor: pointer;
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tab[data-wired="no"]::after { content: ' ·'; color: var(--faint); }

/* ---- 6. nav rail ------------------------------------------------------ */

#nav {
  background: var(--surface-side); border-right: 1px solid var(--line);
  overflow: auto; min-height: 0;
}
.rail-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: var(--pad); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; background: var(--surface-side);
}
.rail-list { list-style: none; margin: 0; padding: 0; }
.rail-list li > button {
  display: flex; align-items: baseline; gap: 6px; width: 100%;
  background: transparent; border: 0; border-left: 2px solid transparent;
  color: var(--ink2); text-align: left; cursor: pointer;
  padding: 0 var(--pad); min-height: var(--row);
}
.rail-list li > button:hover { background: var(--side-hover); color: var(--ink); }
.rail-list li > button[aria-current="true"] {
  background: var(--soft); border-left-color: var(--accent); color: var(--ink);
}
.rail-list .id { font-family: var(--mono); }
.rail-list .meta { margin-left: auto; color: var(--faint); font-size: var(--fs-small); font-family: var(--mono); }
/* The passes of the open hole, nested under it. */
.subrail { list-style: none; margin: 0 0 4px; padding: 0; background: var(--panel2); }
.subrail li > button {
  display: flex; align-items: baseline; gap: 6px; width: 100%;
  background: transparent; border: 0; border-left: 2px solid transparent;
  color: var(--ink2); text-align: left; cursor: pointer;
  padding: 0 var(--pad) 0 calc(var(--pad) * 3); min-height: calc(var(--row) - 2px);
  font-size: var(--fs-small);
}
.subrail li > button:hover { color: var(--ink); background: var(--panel); }
.subrail li > button[aria-current="true"] {
  background: var(--soft); border-left-color: var(--accent); color: var(--ink);
}
.subrail li > button.warn { color: var(--warn); }
.subrail .id { font-family: var(--mono); }
.subrail .meta { margin-left: auto; color: var(--faint); font-family: var(--mono); }

.group { color: var(--dim); font-size: var(--fs-small); text-transform: uppercase;
         letter-spacing: .06em; padding: var(--pad) var(--pad) 2px; }

/* ---- 7. work --------------------------------------------------------- */

#work { overflow: auto; min-height: 0; min-width: 0; background: var(--surface-work); }
.pane { min-height: 0; min-width: 0; overflow: auto; }
.pane + .pane { border-top: 1px solid var(--line); }
.pane-head {
  display: flex; align-items: center; gap: var(--gap);
  padding: calc(var(--pad) / 2) var(--pad);
  border-bottom: 1px solid var(--line); background: var(--panel2);
  position: sticky; top: 0; z-index: 2;
}
.pane-title { font-weight: 600; }
.hint { color: var(--dim); font-size: var(--fs-small); }

/* The graphic log. A track is a column of bands; a band is an interval. */
.tracks { display: flex; gap: var(--gap); padding: var(--pad); align-items: flex-start; }
.track { flex: 0 0 auto; }
.track > .cap { color: var(--dim); font-size: var(--fs-small); text-align: center; padding-bottom: 2px; }
.track .col {
  position: relative; width: 58px; background: var(--bed);
  border: 1px solid var(--line2);
  box-shadow: inset 0 0 0 1px var(--ground);
}
/* Overlapping intervals sit side by side rather than on top of each other:
   a second occurrence, or a second pass, is a second lane. */
.track .col.lanes .band { border-left-color: var(--band-edge-strong); }
.track.depthcol .col { width: 46px; background: transparent; border: 0; }
/* Every band is outlined. Without it, two adjacent units of similar colour
   read as one unit, which is a false reading of the log -- and on a printed
   or projected screen it is the first thing to disappear. The outline is a
   dark wash (tokens.json band_edge) rather than a theme colour, because it
   sits on the data colour and has to hold on all of them. */
.band {
  position: absolute; left: 0; right: 0; overflow: hidden;
  border: 1px solid var(--band-edge);
  font-family: var(--mono); font-size: 10px; line-height: 1;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.band:hover { border-color: var(--accent2); box-shadow: inset 0 0 0 1px var(--accent2); }
.band[aria-current="true"] {
  border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent);
}
/* Never colour alone (ADR-0074 s7): the code is printed in the band, and
   lithology additionally carries a hatch. */
.band.pattern::before {
  content: ''; position: absolute; inset: 0; opacity: .35;
  background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,.55) 0 1px, transparent 1px 5px);
}
.band > span { position: relative; z-index: 1; }
/* A point observation is a depth, not an interval: it gets a marker with a
   tail into the margin, never a band pretending to be 200 mm thick. */
.band.point { border: 0; box-shadow: none; }
.band.point::after {
  content: ''; position: absolute; left: -4px; right: -4px; top: 0; height: 3px;
  background: currentColor; opacity: .9;
}
.band.point:hover::after, .band.point[aria-current="true"]::after { left: -7px; right: -7px; }

.tick { position: absolute; left: 0; right: 4px; text-align: right;
        color: var(--faint); font-family: var(--mono); font-size: 10px; }
.tick::after { content: ''; position: absolute; right: -4px; top: 50%; width: 4px;
               height: 1px; background: var(--line2); }


/* ---- 7b. the pen, the drag, and typed entry -------------------------- */

/* The pen bar says three things that must never be implied: which pass a
   drag writes to, which subject, and which term. */
/* best | 1 | 2 | all -- which version of the hole you are reading. */
.passbar { gap: 4px; }
.passbar .chip { padding: 1px 8px; }
.passbar .chip.warnchip { border-color: var(--warn); color: var(--warn); }
.passbar .chip.warnchip[aria-pressed="true"] { color: var(--ink); }
.passbar .hint { margin-left: 4px; }

.pen, .entry, .passes {
  display: flex; align-items: center; gap: var(--gap); flex-wrap: wrap;
  padding: calc(var(--pad) / 2) var(--pad);
  border-bottom: 1px solid var(--line); background: var(--panel2);
}
.entry { border-bottom: 0; border-top: 1px solid var(--line); }
.pen select, .pen input, .entry input {
  background: var(--bed); color: var(--ink);
  border: 1px solid var(--line2); border-radius: 4px; padding: 2px 6px;
}
.entry input { font-family: var(--mono); }

/* One code box per subject in the summary log's append strip. The subject's
   name sits on the box rather than in a dropdown, because the whole point of
   typing across the row is that you are not choosing one subject at a time. */
.spcell { display: inline-flex; align-items: center; gap: 4px; }
.spcell .k {
  color: var(--dim); font-size: var(--fs-small);
  text-transform: uppercase; letter-spacing: .06em;
}
.spcell input::placeholder { color: var(--faint); }

/* EVERY lane takes a drag now, so every lane says so before the pointer goes
   down. The pen's lane keeps the outline on top of that: the crosshair means
   "you can draw here", the outline means "this is the one the pen bar is
   describing", and after a drag they are the same lane. */
.track .col { cursor: crosshair; }
.track .col.pen { box-shadow: inset 0 0 0 1px var(--edge); }
.track .col.pen .band { cursor: crosshair; }

.ghost {
  position: absolute; left: -2px; right: -2px;
  background: var(--soft); border: 1px dashed var(--accent);
  pointer-events: none; display: flex; align-items: center; justify-content: center;
}
.ghost > span {
  font-family: var(--mono); font-size: 10px; color: var(--ink);
  background: var(--panel); padding: 0 3px; border-radius: 2px; white-space: nowrap;
}

.gridhost { height: calc(100% - 30px); width: 100%; }

/* ---- 8. tables ------------------------------------------------------- */

/* FIT TO WINDOW IS AN OPTION, NOT THE RULE. width:100% stretches every
   column to whatever is left over rather than to what is in it, which puts
   more space between a label and its value than between one row and the next.
   The body carries the mode; 'window' is the only one that fills. */
/* ---- creating (8h) --------------------------------------------------
   The pane is the form. It widens while it is being written into, because
   "you can see all data on one screen rather than scrolling" is the reason
   it was chosen over a row (Jason, 2026-10-04). */
.entrybar { display: flex; gap: 4px; align-items: center;
  padding: 6px var(--pad) 0; }
.entrybar .tool { flex: 0 1 auto; }
.entrybar .tool.off { opacity: .55; cursor: not-allowed; }
.entrypane { display: block; padding: var(--pad); overflow: auto; min-height: 0; }
.entrypane[hidden] { display: none; }
body[data-entry="on"] #insp { display: none; }
.entryhead { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.vform { display: grid; grid-template-columns: 96px minmax(0, 1fr);
  gap: 5px var(--gap); align-items: baseline; }
.vform .vlab { color: var(--dim); font-size: var(--fs-small);
  text-transform: uppercase; letter-spacing: .06em; text-align: right; }
.vform .vlab.req::after { content: " *"; color: var(--accent); }
.vform .given { color: var(--ink); background: var(--soft);
  border: 1px dashed var(--line2); border-radius: 3px; padding: 2px 5px;
  display: flex; align-items: baseline; gap: 6px; }
.vform .given .lock { color: var(--dim); font-family: var(--mono);
  font-size: var(--fs-small); }
.vform input, .vform select { width: 100%; background: var(--surface-work);
  color: var(--ink); border: 1px solid var(--line2); border-radius: 3px;
  padding: 2px 5px; font: inherit; }
.vform input:focus, .vform select:focus { outline: 2px solid var(--accent);
  outline-offset: -2px; }
.entrypane .hint { display: block; }
.vsplit { display: block; border-top: 1px solid var(--line); margin: 10px 0 6px;
  padding-top: 6px; color: var(--dim); font-size: var(--fs-small);
  text-transform: uppercase; letter-spacing: .06em; }
.entryerr { border: 1px solid var(--bad, #b4524a); border-radius: 4px;
  padding: 8px; margin-top: 12px; background: var(--soft); }
.entryerr strong { color: var(--bad, #b4524a); }
.entryerr p { margin: 4px 0 0; }
.entryerr pre { white-space: pre-wrap; font-size: var(--fs-small);
  color: var(--dim); margin: 6px 0 0; }
.entryerr summary { cursor: pointer; color: var(--dim);
  font-size: var(--fs-small); margin-top: 6px; }

/* A Save you have to go looking for is a Save that gets missed. */
.entryfoot { position: sticky; bottom: -1px; display: flex; gap: 6px;
  align-items: center; flex-wrap: wrap; background: var(--panel);
  border-top: 1px solid var(--line); margin-top: 12px; padding: 8px 0 2px; }
.tool.go { border-color: var(--accent); font-weight: 600; }

table.grid { border-collapse: collapse; width: auto; }
/* No min-width: a table narrower than the pane should STOP, not stretch to
   meet an edge nobody is reading. Whitespace on the right is cheaper than
   half an inch between a label and its value. */
body[data-colfit="window"] table.grid { width: 100%; }
body[data-colfit="fixed"] table.grid { table-layout: fixed; width: auto; }
body[data-colfit="fixed"] table.grid th, body[data-colfit="fixed"] table.grid td {
  width: 130px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
table.grid th, table.grid td {
  border-bottom: 1px solid var(--line); padding: 0 var(--pad);
  height: var(--row); text-align: left; white-space: nowrap;
}
table.grid thead th {
  position: sticky; top: 0; background: var(--panel2); color: var(--dim);
  font-weight: 600; font-size: var(--fs-small); text-transform: uppercase;
  letter-spacing: .05em; z-index: 1;
}
table.grid tbody tr:hover { background: var(--panel2); }
table.grid tbody tr[aria-selected="true"] { background: var(--soft); }
/* The row a band was clicked to reach: found, then quiet again. The ring is
   removed by the script after a moment -- NOT animated to opacity 0, which
   would fade the row's own text out with it. */
table.grid tbody tr.found { box-shadow: inset 0 0 0 2px var(--accent); }
table.grid td.empty, .muted { color: var(--faint); }
/* A cell that carries a finding rather than a value. */
table.grid td.warntext { color: var(--warn); }
table.grid tbody tr { cursor: default; }
.swatch { display: inline-block; width: 9px; height: 9px; border-radius: 2px;
          margin-right: 5px; vertical-align: -1px; }

/* ---- 9. inspector ---------------------------------------------------- */

#inspector {
  background: var(--surface-side); border-left: 1px solid var(--line);
  overflow: auto; min-height: 0;
}
/* Collapsed, it keeps a spine you can click to bring it back -- never a
   region that disappears with no way home. */
body[data-inspector="off"] #app { grid-template-columns: var(--rail-w) minmax(0, 1fr) 24px; }
body[data-inspector="off"] #inspector { overflow: hidden; }
body[data-inspector="off"] #inspector .insp-head,
body[data-inspector="off"] #inspector dl.kv { display: none; }
.inspspine {
  display: none; width: 100%; height: 100%; background: transparent;
  border: 0; color: var(--dim); cursor: pointer; padding: var(--pad) 0;
  writing-mode: vertical-rl; font-size: var(--fs-small);
  letter-spacing: .08em; text-transform: uppercase;
}
.inspspine:hover { color: var(--ink); }
body[data-inspector="off"] .inspspine { display: block; }
.insp-head { display: flex; align-items: center; justify-content: space-between; }
.insp-head { padding: var(--pad); border-bottom: 1px solid var(--line); }
dl.kv { margin: 0; padding: var(--pad); display: grid; grid-template-columns: auto 1fr;
        gap: 2px var(--gap); align-items: baseline; }
dl.kv dt { color: var(--dim); font-size: var(--fs-small); }
dl.kv dd { margin: 0; }

/* ---- 10. status ------------------------------------------------------ */

#status {
  display: flex; align-items: center; gap: var(--gap);
  background: var(--panel); border-top: 1px solid var(--line);
  padding: 0 var(--pad); min-height: 24px;
  color: var(--dim); font-size: var(--fs-small);
}
#status .ok { color: var(--ok); }
#status .warn { color: var(--warn); }

/* ---- 11. overlays: palette and keyboard map -------------------------- */

dialog.sheet {
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line2); border-radius: 8px; padding: 0;
  width: min(560px, 92vw); box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
dialog.sheet::backdrop { background: rgba(0,0,0,.5); }
dialog.sheet header { padding: var(--pad); border-bottom: 1px solid var(--line); }
dialog.sheet input {
  width: 100%; background: var(--bed); border: 1px solid var(--line2);
  border-radius: 4px; padding: 6px 8px;
}
dialog.sheet ul { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow: auto; }
dialog.sheet li > button {
  display: flex; gap: var(--gap); width: 100%; background: transparent; border: 0;
  color: var(--ink2); text-align: left; padding: 5px var(--pad); cursor: pointer;
}
dialog.sheet li > button:hover, dialog.sheet li > button[aria-current="true"] {
  background: var(--soft); color: var(--ink);
}
dialog.sheet .what { color: var(--faint); margin-left: auto; font-size: var(--fs-small); }
kbd {
  font-family: var(--mono); font-size: var(--fs-small);
  border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 3px;
  padding: 0 4px; color: var(--ink2);
}

/* ---- 11b. explain mode ----------------------------------------------- */

/* With explain on, the named regions show their own edges: the point is to
   make the structure of the screen visible, not decorative. */
body[data-explain="on"] .region { outline: 1px dashed var(--line2); outline-offset: -1px; }
body[data-explain="on"] #explainBtn { border-color: var(--accent); color: var(--ink); }

/* The grab bar: the same gesture as the log/table splitter. */
.xbar {
  background: var(--panel2); border-bottom: 1px solid var(--line);
  cursor: row-resize; position: relative;
}
.xbar::after {
  content: ''; position: absolute; left: 50%; top: 2px;
  width: 42px; height: 3px; margin-left: -21px; border-radius: 2px;
  background: var(--line2);
}
.xbar:hover::after, .xbar.dragging::after { background: var(--accent); }

.xhead {
  display: flex; align-items: center; gap: var(--gap);
  padding: 2px var(--pad); border-bottom: 1px solid var(--line);
}
.xhead h2 { margin: 0; }

/* Two panes: the requests down the left, the statements of the selected one
   across the rest. The statements get the width -- that is the whole reason
   this panel is not in the inspector. */
.xpanes { display: grid; grid-template-columns: 250px minmax(0, 1fr);
          min-height: 0; overflow: hidden; }
.xroutes { list-style: none; margin: 0; padding: 0; overflow: auto;
           border-right: 1px solid var(--line); background: var(--panel2); }
.xroutes > li > button {
  display: block; width: 100%; text-align: left; background: none;
  border: 0; border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  padding: 4px var(--pad); color: var(--ink2); cursor: pointer; font: inherit;
}
.xroutes > li > button:hover { background: var(--panel); color: var(--ink); }
.xroutes > li > button[aria-current="true"] {
  background: var(--panel); color: var(--ink); border-left-color: var(--accent);
}
.xdetail { overflow: auto; padding: var(--pad); min-width: 0; }

.xroute { font-family: var(--mono); color: var(--ink); }
.xnums { display: block; color: var(--dim); font-size: var(--fs-small); }
.xnote { color: var(--warn); font-size: var(--fs-small); margin: 4px 0 0; }
.xcalls { list-style: none; margin: var(--pad) 0 0; padding: 0; }
.xcalls > li {
  border-left: 2px solid var(--line2); padding: 0 0 0 var(--pad);
  margin-bottom: var(--gap);
}
.xhead-call { display: flex; align-items: baseline; gap: var(--gap); flex-wrap: wrap; }
.xhead-call .xnums { display: inline; }
.xname { font-family: var(--mono); color: var(--ink2); }
.xparams { color: var(--faint); font-family: var(--mono); font-size: var(--fs-small); }
.xerr { color: var(--warn); font-size: var(--fs-small); }

/* How long this statement took as a share of the whole request: the answer
   to "why is this one slower than that one" should be visible, not counted. */
.xshare { height: 4px; background: var(--line); border-radius: 2px; margin: 3px 0; }
.xshare > span { display: block; height: 100%; border-radius: 2px;
                 background: var(--accent2); }
.xshare.slow > span { background: var(--warn); }

.xsql > summary { color: var(--dim); font-size: var(--fs-small); cursor: pointer; }
.xsql pre, .srcbody pre {
  background: var(--bed); border: 1px solid var(--line); border-radius: 4px;
  padding: var(--pad); overflow: auto; max-height: 40vh;
  font-family: var(--code); font-size: var(--fs-small); white-space: pre; margin: 4px 0;
}
.xlinks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.xlinks .tool { font-family: var(--mono); font-size: var(--fs-small); padding: 0 6px; }
.xcomment { color: var(--ink2); }
dialog.sheet.wide { width: min(980px, 94vw); }
.srcbody { padding: var(--pad); max-height: 72vh; overflow: auto; }
.srcbody h3 { margin: var(--gap) 0 2px; }

/* ---- 11c. the map ----------------------------------------------------- */

/* Colour by / size by, and the legend. One row, scrolling sideways rather
   than wrapping: a legend that grows a second line moves the map down, and
   the map is the thing being looked at. */
.maplegend {
  display: flex; align-items: center; gap: var(--gap);
  padding: 2px var(--pad); border-bottom: 1px solid var(--line);
  background: var(--panel2); overflow-x: auto; white-space: nowrap;
}
.maplegend .label { display: inline-flex; align-items: center; gap: 4px; }
.maplegend select.tool {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line2);
  border-radius: 3px; padding: 1px 4px; font: inherit; font-size: var(--fs-small);
}
.legend { display: flex; align-items: center; gap: var(--gap); }
.legend .key {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--ink2); font-size: var(--fs-small);
}
.legend .key i {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid var(--map-ring); flex: none;
}

/* The map, and under it the strip that only appears when there is something
   to say. It is a ROW, not an overlay: floated over the map it landed on
   Leaflet's own scale bar and attribution, and two messages on top of each
   other are worse than one message with less room. */
.mapwrap { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.mapbox { width: 100%; height: 100%; min-height: 240px; background: var(--bed); }

/* Leaflet draws its own chrome. These put it in the shell's clothes rather
   than leaving two design systems on one screen. */
.leaflet-container { font: inherit; background: var(--bed); }
.leaflet-control-layers, .leaflet-control-scale-line, .leaflet-bar a {
  background: var(--panel); color: var(--ink); border-color: var(--line);
}
.leaflet-bar a:hover { background: var(--panel2); color: var(--ink); }
.leaflet-control-attribution {
  background: var(--panel); color: var(--dim); font-size: var(--fs-small);
}
.leaflet-control-attribution a { color: var(--accent2); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
}
.leaflet-tooltip {
  background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  font-size: var(--fs-small);
}
.leaflet-tooltip-top:before { border-top-color: var(--line); }

.mappop { display: grid; gap: 4px; min-width: 150px; }
.mappop .hint { font-size: var(--fs-small); color: var(--dim); }
.mappop .tool { justify-self: start; margin-top: 2px; }

.mapnote:empty { display: none; }
.mapnote p {
  margin: 0; padding: var(--pad); background: var(--panel);
  border-top: 1px solid var(--line); color: var(--ink2);
  font-size: var(--fs-small);
}
.mapnote .warn { color: var(--ink2); }

#mapAnalyte {
  background: var(--panel2); color: var(--ink); border: 1px solid var(--line2);
  border-radius: 3px; padding: 1px 4px; font: inherit; font-size: var(--fs-small);
}

/* ---- 12. honest empties ---------------------------------------------- */

.notyet { padding: calc(var(--pad) * 3); max-width: 60ch; color: var(--ink2); }
.notyet h2 { margin-bottom: var(--pad); }
.notyet code { font-family: var(--code); color: var(--accent2); }
pre, code, kbd, .entryerr pre { font-family: var(--code); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ---- 8b. the Data screen: head, the "also here" bar, then the grid ----
   Three rows, with only the grid scrolling. .gridhost assumes a single 30px
   head, which is why this layout sets the height instead of borrowing it. */
#work[data-layout="data"] {
  display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden;
}
#work[data-layout="data"] .gridhost { height: 100%; min-height: 0; }

/* ---- 8c. the Grid screen on ONE HOLE: head, the summary log, the way in --
   Same three rows as the Data screen, and for the same reason. The append
   strip is the last row and it is PINNED: a hole with four hundred intervals
   must not put the row that adds the four hundred and first below four
   hundred rows of scrolling, and appending it after a full-height .gridhost
   put it below the window altogether. */
#work[data-layout="grid"] {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden;
}
#work[data-layout="grid"] .gridhost { height: 100%; min-height: 0; }
#work[data-layout="grid"] > .entry { border-top: 1px solid var(--line2); }
.relbar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  padding: 3px var(--pad); border-bottom: 1px solid var(--line);
  background: var(--panel); min-height: 24px; }
.relbar .chip .k { text-transform: uppercase; }
.rail-list .moreback { color: var(--dim); }

/* ---- 8c. the hierarchy tree in the rail (specs A5-A7) -----------------
   The tree reuses .rail-list's button styling, so a node already has the
   hover, the current-row mark and the keyboard outline. What is added here is
   the indent machinery and the two bars above it. */
#navBars:empty { display: none; }
#navBars { border-bottom: 1px solid var(--line); }
.navmode, .jump { display: flex; align-items: center; gap: 3px; flex-wrap: wrap;
  padding: 4px var(--pad); }
.jump { border-top: 1px solid var(--line); }
.navmode .tool[aria-pressed="true"] { color: var(--ink); background: var(--soft);
  border-color: var(--accent); }
.rail-list .node { display: flex; align-items: baseline; gap: 4px; width: 100%;
  text-align: left; }
.rail-list .node .tw { width: 12px; flex: 0 0 12px; color: var(--dim);
  font-family: var(--mono); text-align: center; }
.rail-list .node .tw.leaf { color: transparent; }
/* The name takes what is left after the twisty and the count, rather than
   shrinking to nothing: without min-width:0 a flex child will not go below its
   content width, and "lithology" was arriving as "lith...". */
.rail-list .node .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1 1 auto; min-width: 0; }
.rail-list .node .nm .sub { color: var(--faint); }
.rail-list .node .nm .id { font-family: var(--mono); }
/* A heading is a destination, not a record: quieter, and in the label voice. */
.rail-list .node.kind .nm { color: var(--dim); font-size: var(--fs-small);
  text-transform: uppercase; letter-spacing: .06em; }
.rail-list .node.all .nm { color: var(--dim); }
.rail-list .node .n { margin-left: auto; color: var(--faint);
  font-size: var(--fs-small); font-family: var(--mono); padding-left: 6px;
  white-space: nowrap; flex: 0 0 auto; }
.rail-list .node .n.none { color: var(--warn); }

/* ---------------------------------------------------------------------------
   THE MODULE SWITCHER (ADR-0068), inline in the scope header.

   Readable without colour (ADR-0074): the current module is marked by weight,
   a border and an underline rule, not by its hue alone. The hue is
   recognition, never the only signal.
   --------------------------------------------------------------------------- */
.mods { display: flex; gap: 2px; align-items: center; margin-left: 10px; }
.mods .mod {
  font: inherit; font-size: var(--fs-small); line-height: 1;
  padding: 5px 9px; border: 1px solid transparent; border-radius: 3px;
  background: none; color: var(--dim); cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.mods .mod:hover { color: var(--ink); background: var(--panel); }
.mods .mod[aria-current="true"] {
  color: var(--ink); font-weight: 600;
  background: var(--panel);
  border-color: var(--line);
  border-bottom-color: var(--hue);
}
.mods .mod:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Subjects and "hide empty" belong to the screens that read them (Log and
   Grid). Hidden elsewhere rather than left stale -- see go() in gk-core.js. */
body[data-subjects="no"] #subjectChips,
body[data-subjects="no"] #filters .subjects-only { display: none; }

/* ---- the log beside its tables, and the samples and assays tracks ------
   GK-MASTER, 2026-10-13 (gk-log.js, logSampleTrack / logAssayTrack). */
#work[data-layout="side"] {
  display: grid;
  grid-template-columns: minmax(0, var(--split, 55%)) 7px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
#work[data-layout="side"][data-fold="table"] { grid-template-columns: minmax(0, 1fr) 7px 0; }
#work[data-layout="side"] > .splitter {
  cursor: col-resize; border-top: 0; border-bottom: 0;
  border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
#work[data-layout="side"] > .splitter::after {
  left: 2px; top: 50%; width: 3px; height: 42px; margin-left: 0; margin-top: -21px;
}
.sidestack { display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; min-width: 0; }
.sidestack > .pane + .pane { border-top: 1px solid var(--line); }
.track .col.samples { width: 52px; }
.track .col.samples .smp {
  position: absolute; left: 3px; right: 3px; box-sizing: border-box;
  border: 1px solid var(--line2); border-radius: 2px; background: var(--panel2);
  color: var(--ink2); font: 9px 'IBM Plex Mono', Consolas, monospace;
  display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer;
}
.track .col.samples .smp.hl { border-color: var(--accent); background: var(--soft); color: var(--ink); }
.track .col.samples .smp[aria-current="true"] { outline: 2px solid var(--accent2); outline-offset: -1px; z-index: 2; }
.track .col.assay { background: var(--bed); }
.assaybar { position: absolute; left: 0; border-radius: 0 2px 2px 0; cursor: pointer; box-sizing: border-box; }
.assaybar.bdl { background: transparent; border-left: 2px solid var(--dim); }
.assaylegendrow { padding: 2px var(--pad) 0; font-size: var(--fs-small); }
.assaylegend { display: inline-flex; flex-wrap: wrap; gap: 2px 10px; align-items: center; }
.assaylegend .lg { display: inline-flex; align-items: center; gap: 4px; color: var(--ink2); font-variant-numeric: tabular-nums; }
.assaylegend .sw { width: 10px; height: 10px; border-radius: 2px; border: 1px solid var(--line2); }
table.samptbl tbody tr.hl td { background: var(--soft); color: var(--ink); }
/* A sample's assays in the selection panel (logSampleAssays). */
dl.kv dt.kvhead { margin-top: 8px; color: var(--ink); font-weight: 600; }
dl.kv dt.on, dl.kv dd.on { color: var(--accent2); font-weight: 600; }
dl.kv dd.num { font-variant-numeric: tabular-nums; }
dl.kv dd .sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: 0; border: 1px solid var(--line2); }

/* ---- gk-table.js: sort, filter, freeze, hide (GK-BOARD, 2026-10-14) ---- */
table.grid th.gkt-th { cursor: pointer; user-select: none; }
table.grid th.gkt-th:hover { color: var(--ink); }
table.grid th.gkt-sorted, table.grid th.gkt-filtered { color: var(--accent); }
.gkt-mark { font-weight: 700; }
.gkt-btn { border: 0; background: none; color: var(--faint); cursor: pointer;
  padding: 0 0 0 4px; font-size: 10px; opacity: 0; }
table.grid th:hover .gkt-btn, .gkt-btn:focus-visible,
table.grid th.gkt-filtered .gkt-btn { opacity: 1; }
table.grid th.gkt-frozen { z-index: 3; }
table.grid td.gkt-frozen { position: sticky; z-index: 1; background: var(--panel); }
table.grid th.gkt-frozen { position: sticky; }
table.grid .gkt-frozen-last { box-shadow: inset -1px 0 0 var(--line), 3px 0 4px -2px rgba(0,0,0,.18); }
table.grid tbody tr:hover td.gkt-frozen { background: var(--panel2); }
table.grid tbody tr[aria-selected="true"] td.gkt-frozen { background: var(--soft); }
.gkt-scroll { overflow: auto; }
caption.gkt-note, div.gkt-note { caption-side: top; text-align: left; padding: 4px var(--pad);
  font-size: var(--fs-small); color: var(--warn); white-space: nowrap; }
.gkt-clear { border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  border-radius: 3px; cursor: pointer; font-size: var(--fs-small); padding: 0 6px; }
.gkt-menu { position: fixed; z-index: 50; min-width: 210px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.2);
  padding: 4px; display: flex; flex-direction: column; }
.gkt-menu > button { text-align: left; border: 0; background: none; color: var(--ink);
  padding: 5px 8px; cursor: pointer; border-radius: 3px; }
.gkt-menu > button:hover, .gkt-menu > button:focus-visible { background: var(--panel2); }
.gkt-row { display: flex; gap: 4px; padding: 4px; }
.gkt-filter { flex: 1; min-width: 0; padding: 2px 6px; border: 1px solid var(--line);
  background: var(--bg, var(--panel)); color: var(--ink); }

/* ---- header Settings, Views and notes (gk-share.js, 175; GK-BOARD 2026-10-14) ---- */
.gk-cfgwrap { position: relative; display: inline-flex; }
.gk-pop { background: var(--panel); border: 1px solid var(--line2); border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); padding: 8px; z-index: 60; }
#cfgMenu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 250px;
  display: flex; flex-direction: column; gap: 6px; }
#cfgMenu[hidden] { display: none; }
.gk-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.gk-pop-note { font-size: var(--fs-small); border-top: 1px solid var(--line); padding-top: 6px; }
.gk-viewmenu { width: 340px; max-height: 70vh; display: flex; flex-direction: column; }
.gk-pop-list { overflow: auto; min-height: 30px; display: flex; flex-direction: column; }
.gk-pop-foot { display: flex; gap: 6px; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 8px; }
.gk-vrow { display: flex; align-items: stretch; border-radius: 4px; }
.gk-vrow:hover, .gk-vrow.on { background: var(--panel2); }
.gk-vrow.on .gk-vname { color: var(--accent); }
.gk-vopen { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start;
  background: none; border: 0; color: var(--ink); text-align: left; padding: 4px 6px; cursor: pointer; }
.gk-vname { font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gk-vopen .meta { color: var(--dim); font-size: var(--fs-small); }
.gk-vx { background: none; border: 0; color: var(--dim); cursor: pointer; padding: 0 8px; }
.gk-vx:hover { color: var(--accent2); }
.gk-note { border: 1px solid var(--line); border-radius: 4px; padding: 6px 8px;
  display: flex; flex-direction: column; gap: 4px; }
.gk-note.done { opacity: .6; }
.gk-note.done .gk-ntext { text-decoration: line-through; }
.gk-nhead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gk-ntext { white-space: pre-wrap; }
.gk-nans { color: var(--dim); border-left: 2px solid var(--accent); padding-left: 6px; }
.linkish { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; font: inherit; }
#filters #scopeChips { flex: 0 1 auto; }
table.grid.gk-hist td { white-space: normal; max-width: 320px; word-break: break-word; }

/* ---- gk-rows.js: entering a row in any table (ADR-0082 Part B) ---------- */
.vform textarea { width: 100%; background: var(--surface-work); color: var(--ink);
  border: 1px solid var(--line); border-radius: 3px; font: inherit; resize: vertical; }
.vform textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.rows-pick { display: grid; grid-template-columns: minmax(0, 1fr) 7em; gap: 4px; }
.rows-ctx { margin-top: 2px; }
#dataAdd .tool.off, .relbar .chip.off { opacity: .55; cursor: not-allowed; }
.vform .vlab:has(+ span > textarea) { align-self: start; padding-top: 4px; }

/* ---- the estates (estates mockup, Jason 2026-10-17; gk-core.js MODULES) ----
   The top level is the job you are doing, so it reads at body size, not as
   small print. Still readable without colour (ADR-0074): weight and an
   underline mark the current estate; the hue is recognition only. */
:root {
  --m-tenure:      #4a8fb8;
  --m-environment: #3f9a7f;
  --m-community:   #b4607a;
  --m-safety:      #b4607a;   /* Health & Safety (2026-10-18); community merged into environment */
  --m-contracts:   #9a8f3a;
}
.mods { gap: 0; margin-left: 14px; }
.mods .mod { font-size: inherit; padding: 8px 10px 6px; border: 0; border-radius: 0;
  border-bottom: 2px solid transparent; background: none; }
.mods .mod:hover { background: none; color: var(--ink); }
.mods .mod[aria-current="true"] { background: none; border-bottom-color: var(--hue); }

/* The header keeps four things. #build stays for the code that anchors on it
   and is read in the menu; the account button gk-auth.js adds is reached
   through the initials menu's "Account..." row. */
#scope > #build, #scope > #gkAccountBtn { display: none; }
.gk-me { font-weight: 600; letter-spacing: .02em; }
.gk-me-who { border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.gk-me-name { font-weight: 600; }
.gk-pop-actions { justify-content: flex-start; gap: 6px; }

/* Bring in / Send out: the importer and exporter from any estate, at the
   end of the tab row and quieter than a tab. */
#screens { align-items: center; }
#screens .spacer { flex: 1; }
.tab.tab-io { font-size: var(--fs-small); padding: 3px 9px; margin-left: 4px;
  border: 1px solid var(--line); border-radius: 4px; }
.tab.tab-io[aria-pressed="true"] { color: var(--ink); border-color: var(--accent); }

/* ---- gkTable through AG Grid (gk-table.js, GK-BOARD 2026-10-17) --------
   One grid throughout the app. The host takes the spec's cls, so a lane's
   container selectors still find it; the row classes lanes set through
   row(row, tr) are mirrored here for the ag-row they now land on. */
.gk-ag { width: 100%; }
.gk-ag .ag-row { cursor: pointer; }
.gk-ag .ag-row.gk-sel { background: var(--soft); }
.gk-ag .ag-row.gkp-picked { background: var(--panel2); }
.ob-grid .ag-row.ob-overdue .ob-state { color: var(--accent); font-weight: 600; }
.ob-grid .ag-row.ob-soon .ob-state { color: var(--warn); }
.ob-grid .ag-row.ob-upcoming .ob-state { color: var(--warn); font-weight: 600; }
.ob-grid .ag-row.ob-later .ob-state { color: var(--dim); }

/* ---- surfaces: where the work is, and what frames it -------------------
   Jason, note #40 (2026-10-17): "the main grids (the centre working area)
   needs to be the brighter colour, and the selection/Navigation areas be
   the darker colour from the themes." So the work area takes the brighter
   of the theme's two surfaces and the rail and the selection pane the
   darker, in both themes. Defined here, not in gk-tokens.css, because that
   file is regenerated by scripts/gen-tokens-css.py. gridTheme() reads
   --surface-work, so every grid follows. */
:root {
  --surface-work: var(--panel);
  --surface-side: var(--ground);
  --side-hover: var(--panel2);
  --stripe: var(--panel2);
  --row-line: rgba(255, 255, 255, .06);
  --row-hover: rgba(255, 255, 255, .035);
  --row-sel: rgba(204, 107, 61, .16);
}
:root[data-theme="light"] {
  /* The mockup's light look (estates-mock.html, Jason 2026-10-17: "really
     clean and crisp"): white work area, the rail and pane on the warm
     off-white, hover on the tab-row grey, odd grid rows the faintest tint. */
  --surface-work: var(--panel);
  --surface-side: var(--ground);
  --side-hover: var(--panel2);
  --stripe: #fbfaf8;
  --row-line: #eeebe5;
  --row-hover: #faf8f4;
  --row-sel: #fbeee4;
}

/* ---- gk-walk.js: walking the hierarchy (walk-mock.html) ----------------- */
.gkw { display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: auto; background: var(--surface-work, var(--panel)); }
.gkw-pad { display: block; padding: 10px 12px; }
.gkw-crumb { display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-bottom: 1px solid var(--line);
  font-size: var(--fs-small); color: var(--dim); position: sticky; top: 0; z-index: 3; background: var(--surface-work, var(--panel)); }
.gkw-path { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gkw-crumb a { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--faint); }
.gkw-crumb .sep { color: var(--faint); }
.gkw-level { border-bottom: 1px solid var(--line); }
.gkw-head { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--panel2); white-space: nowrap; }
.gkw-head .t { font-weight: 600; }
.gkw-head .n { color: var(--dim); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gkw-head .add, .gkw-col .add { border: 1px solid var(--line); background: var(--surface-work, var(--panel)); color: var(--ink);
  border-radius: 5px; padding: 2px 9px; font: inherit; font-size: var(--fs-small); cursor: pointer; }
.gkw-head .add:hover { border-color: var(--accent); }
.gkw-picked { padding: 5px 12px; cursor: pointer; background: var(--soft); box-shadow: inset 3px 0 0 var(--accent); }
.gkw-grid { max-height: 60vh; overflow: auto; }
/* A big grid scrolls itself and is sized to the window (gkAgFit), so its
   wrapper takes no cap of its own (Jason 2026-11-08, tall monitor). */
.gkw-grid:has(> .gk-ag[data-want]), .gkw-grid:has(> .gkw-log[data-want]) { max-height: none; overflow: visible; }
.gkw-level.collapsed .gkw-grid { display: none; }
.gkw-tabs { display: flex; gap: 2px; padding: 0 8px; background: var(--panel2); border-bottom: 1px solid var(--line); overflow-x: auto; }
.gkw-tabs .tab { border: 0; background: none; font: inherit; padding: 6px 10px; color: var(--dim); cursor: pointer;
  border-bottom: 2px solid transparent; white-space: nowrap; }
.gkw-tabs .tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.gkw-tabs .tab .c, .gkw-prow .c { color: var(--faint); font-size: var(--fs-small); margin-left: 5px; }
.gkw-subtabs { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 12px; border-bottom: 1px solid var(--line); }
.gkw-subtabs .chip.on, .gkw-codechips .chip.on { border-color: var(--accent); }
.gkw-pseudo { display: flex; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line); }
.gkw-pseudo:empty { display: none; }
.gkw-prow { border: 1px dashed var(--line); background: none; border-radius: 5px; padding: 2px 9px; font: inherit;
  font-size: var(--fs-small); color: var(--dim); cursor: pointer; }
.gkw-prow.on { border-style: solid; border-color: var(--accent); color: var(--ink); }
.gkw-note { padding: 5px 12px; font-size: var(--fs-small); color: var(--dim); border-bottom: 1px solid var(--line); }
.gkw-codes { padding: 8px 12px; border-bottom: 1px solid var(--line); }
.gkw-codechips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.gkw-terms { max-height: 280px; overflow: auto; }
.gkw-more { margin: 6px 12px; }
.gkw-cols { display: flex; flex: 1; min-height: 360px; overflow-x: auto; }
.gkw-col { flex: 0 0 250px; border-right: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0; }
.gkw-col.gkw-leaf { flex: 1 1 auto; min-width: 480px; border-right: 0; }
.gkw-list { list-style: none; margin: 0; padding: 4px 0; overflow: auto; }
.gkw-list li { padding: 4px 12px; cursor: pointer; display: flex; gap: 8px; white-space: nowrap; }
.gkw-list li:hover { background: var(--soft); }
.gkw-list li.on { background: var(--soft); box-shadow: inset 3px 0 0 var(--accent); }
.gkw-list li.pseudo { color: var(--dim); font-style: normal; border-bottom: 1px dashed var(--line); }
.gkw-list li .id { overflow: hidden; text-overflow: ellipsis; }
.gkw-list li .m { margin-left: auto; color: var(--faint); font-size: var(--fs-small); overflow: hidden; text-overflow: ellipsis; }
.ag-row.gkw-on, tr.gkw-on td { background: var(--soft) !important; }


/* ---- Tester feedback (gk-feedback.js, 184; feedback-mock.html, approved
   2026-10-18). A panel down the right of the app; the app gives it room
   rather than sitting under it. Kind colours are a tint of their own ink, so
   they hold in both themes. ------------------------------------------------ */
.gk-fb, .fb-tri, #fbBtn { --fb-bad: #d0685e; --fb-info: #7aa3cf; --fb-plum: #b98cc3; }
:root[data-theme="light"] .gk-fb, :root[data-theme="light"] .fb-tri,
:root[data-theme="light"] #fbBtn { --fb-bad: #a8433b; --fb-info: #3d6a99; --fb-plum: #7d3b8a; }
#fbBtn { border-color: var(--accent); color: var(--accent); white-space: nowrap; }
#fbBtn[aria-expanded="true"] { background: var(--soft); }
body[data-feedback="open"] #app { margin-right: 380px; }
.gk-fb { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; z-index: 40; overflow: auto;
  background: var(--ground); border-left: 1px solid var(--line); color: var(--ink); }
.gk-fb[hidden] { display: none; }
.fb-ph { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line);
  background: var(--panel); position: sticky; top: 0; z-index: 1; }
.fb-notice { display: flex; gap: 8px; align-items: center; margin: 10px 12px 0; padding: 7px 10px; font-size: 13px;
  border: 1px solid var(--edge); background: var(--soft); border-radius: 6px; }
.fb-seg { display: flex; margin: 10px 12px 0; border: 1px solid var(--line); border-radius: 6px; overflow: hidden;
  background: var(--panel); }
.fb-seg button { flex: 1; background: none; border: 0; padding: 5px 6px; font: inherit; font-size: 12.5px;
  color: var(--dim); cursor: pointer; }
.fb-seg button + button { border-left: 1px solid var(--line); }
.fb-seg button[aria-pressed="true"] { background: var(--soft); color: var(--ink); }
.fb-empty { margin: 14px 12px; color: var(--dim); font-size: 13px; }
/* PAGE CHECKLISTS (252): the Checklist half of the Feedback panel. */
.fb-seg.fb-top { margin-bottom: 2px; }
.fb-prog { margin: 10px 12px 4px; font-size: 12.5px; color: var(--dim); }
.fb-bar { height: 4px; border-radius: 2px; background: var(--line); margin-top: 5px; overflow: hidden; }
.fb-bar i { display: block; height: 100%; background: var(--ok); }
.fb-step { display: flex; gap: 9px; margin: 6px 12px; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 7px; background: var(--panel); cursor: pointer; }
.fb-step.cur { border-color: var(--edge); cursor: default; }
.fb-sn { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line); display: grid;
  place-items: center; font-size: 11px; font-weight: 600; color: var(--dim); }
.fb-sn.ok { background: var(--ok); border-color: var(--ok); color: var(--panel); }
.fb-sn.problem { background: var(--warn); border-color: var(--warn); color: var(--panel); }
.fb-sn.skip { color: var(--dim); }
.fb-st { flex: 1; min-width: 0; }
.fb-task { font-size: 13px; }
.fb-stag, .fb-writes { font-size: 11.5px; color: var(--dim); margin-top: 3px; }
.fb-see { font-size: 12.5px; margin-top: 6px; }
.fb-step .fb-foot { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.fb-note { background: var(--panel); border: 1px solid var(--line); border-radius: 7px; margin: 10px 12px; padding: 10px 12px; }
.fb-note.closed { opacity: .8; }
.fb-who { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.fb-av { width: 26px; height: 26px; border-radius: 50%; background: var(--panel2); border: 1px solid var(--line);
  display: grid; place-items: center; font-size: 11.5px; font-weight: 600; color: var(--dim); flex: none; }
.fb-t { color: var(--faint); font-size: 12px; }
.fb-chips { display: flex; gap: 5px; flex-wrap: wrap; margin: 7px 0 5px; }
.fb-chip { font-size: 11.5px; border-radius: 10px; padding: 1px 8px; border: 1px solid var(--line); color: var(--dim);
  background: var(--panel); white-space: nowrap; }
.fb-chip.c-err { color: var(--fb-bad); } .fb-chip.c-blk { color: var(--fb-plum); }
.fb-chip.c-mis { color: var(--fb-info); } .fb-chip.c-con { color: var(--warn); }
.fb-chip.c-ok { color: var(--ok); }
.fb-chip.c-err, .fb-chip.c-blk, .fb-chip.c-mis, .fb-chip.c-con, .fb-chip.c-ok, .fb-chip.p-slow, .fb-chip.s-und, .fb-chip.s-r2 {
  border-color: color-mix(in srgb, currentColor 40%, transparent); background: color-mix(in srgb, currentColor 9%, var(--panel)); }
.fb-chip.p-stop { color: #fff; background: var(--fb-bad); border-color: var(--fb-bad); }
.fb-chip.p-slow { color: var(--warn); }
.fb-chip.s-und { color: var(--fb-info); } .fb-chip.s-r2 { color: var(--fb-plum); }
.fb-chip.s-mvp { color: #fff; background: var(--accent); border-color: var(--accent); }
.fb-chip.s-wont { color: var(--faint); text-decoration: line-through; }
.fb-chip.s-fix { color: #fff; background: var(--ok); border-color: var(--ok); }
.fb-chip.t-closed { border-style: dashed; }
.fb-q { font-size: 13px; margin: 3px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-q span { color: var(--faint); font-size: 12px; display: block; white-space: normal; }
.fb-bm { display: inline-flex; gap: 5px; align-items: center; font: inherit; font-size: 12px; color: var(--fb-info);
  background: color-mix(in srgb, var(--fb-info) 9%, var(--panel)); border: 1px solid color-mix(in srgb, var(--fb-info) 40%, transparent);
  border-radius: 4px; padding: 1px 7px; margin-top: 4px; cursor: pointer; text-align: left; }
.fb-foot { display: flex; gap: 8px; align-items: center; margin-top: 7px; font-size: 12.5px; color: var(--dim); flex-wrap: wrap; }
.fb-foot .linkish { font-size: 12.5px; }
.fb-id { color: var(--faint); }
.fb-metoo { border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: 1px 9px; font: inherit;
  font-size: 12px; cursor: pointer; color: var(--dim); white-space: nowrap; }
.fb-metoo.on { border-color: var(--accent); color: var(--accent); }
.fb-metoo:disabled { cursor: default; opacity: .7; }
.fb-reply { margin-top: 8px; border-left: 3px solid var(--accent); padding: 4px 10px; background: var(--soft);
  font-size: 13px; border-radius: 0 4px 4px 0; white-space: pre-wrap; }
.fb-reply b { font-size: 12px; color: var(--accent); }
.fb-add { background: var(--panel); border: 1px solid var(--accent); border-radius: 7px; margin: 10px 12px; padding: 12px; }
.fb-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0 10px; }
.fb-cat { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; cursor: pointer; font: inherit; font-size: 13px;
  background: var(--panel); color: var(--ink); text-align: left; }
.fb-cat small { display: block; color: var(--faint); font-size: 11.5px; }
.fb-cat.on { border-color: var(--accent); background: var(--soft); }
.fb-f { display: block; font-size: 12.5px; color: var(--dim); margin: 8px 0 3px; }
.fb-add textarea, .fb-detail textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; border: 1px solid var(--line);
  border-radius: 4px; padding: 5px 7px; resize: vertical; min-height: 42px; background: var(--panel); color: var(--ink); }
.fb-imp { display: flex; gap: 6px; } .fb-imp .fb-cat { flex: 1; text-align: center; }
.fb-auto { margin-top: 10px; background: var(--ground); border: 1px dashed var(--line); border-radius: 5px; padding: 7px 9px;
  font-size: 12px; color: var(--dim); }
.fb-auto div { display: flex; gap: 6px; } .fb-auto div span:first-child { width: 72px; color: var(--faint); flex: none; }
.fb-similar { margin-top: 10px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
  background: color-mix(in srgb, var(--warn) 9%, var(--panel)); border-radius: 5px; padding: 7px 9px; font-size: 12.5px; }
.fb-similar[hidden] { display: none; }
.fb-s { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.fb-msg { display: block; margin-top: 6px; font-size: 12.5px; color: var(--warn); }
.fb-msg:empty { display: none; }
/* triage */
.fb-tri { display: flex; flex-direction: column; min-height: 0; }
.fb-tscroll { overflow: auto; max-height: 52vh; }
.fb-tlist { border-collapse: collapse; font-size: 13px; width: auto; }
.fb-tlist th { text-align: left; font-weight: 500; color: var(--dim); padding: 6px 12px; border-bottom: 1px solid var(--line);
  background: var(--panel2); position: sticky; top: 0; }
.fb-tlist td { padding: 6px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.fb-tlist td.txt { max-width: 420px; }
.fb-tlist td.num { text-align: right; }
.fb-tlist tr.row { cursor: pointer; }
.fb-tlist tr.row:hover td { background: var(--soft); }
.fb-tlist tr.on td { background: var(--soft); box-shadow: inset 0 0 0 0 var(--accent); }
.fb-tlist tr.on td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.fb-detail { border-top: 1px solid var(--line); padding: 12px 14px; background: var(--ground); max-width: 760px; }
.fb-detail .fb-note { margin: 8px 0; }
.fb-detail select, .fb-detail input[type="text"] { font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 4px;
  padding: 3px 5px; background: var(--panel); color: var(--ink); }
.fb-extra input { min-width: 260px; }
.fb-ph b, .fb-ph .tool { white-space: nowrap; }
/* 185: the close button and the one-line "Attached for you". */
.fb-ph .fb-x { padding: 2px 8px; font-size: 16px; line-height: 1; }
.fb-auto1 { margin-top: 8px; font-size: 11.5px; color: var(--faint); line-height: 1.4; }
.fb-add textarea[data-k="trying_to"] { min-height: 84px; }
.fb-railhint { padding: 2px 10px 4px; font-size: 12px; }
.fb-filter { display: flex; gap: 6px; align-items: center; padding: 2px 10px; font-size: 13px; cursor: pointer; }

/* #48: every filter button on the right of its header. AG Grid puts it on
   the left for right-aligned (number) columns; turn that one row round. */
.ag-right-aligned-header .ag-cell-label-container { flex-direction: row-reverse; }
.ag-right-aligned-header .ag-header-cell-filter-button { margin-left: 8px; }

/* "Help for this screen" at the top of the keyboard map (2026-10-18). */
.keymap-help { margin: 4px 0 10px; }
.keymap-help a { color: var(--accent); font-weight: 500; text-decoration: none; }
.keymap-help a:hover { text-decoration: underline; }

/* The walk's logs (2026-10-19): a hole's Log tab, and a subject's strip left
   of its grid. */
.gkw-log { padding: 6px 10px 10px; overflow: auto; }
.gkw-pair { display: flex; gap: 12px; align-items: flex-start; }
.gkw-strip { flex: none; }
.gkw-pairgrid { flex: 1; min-width: 0; }

/* Correct in the walk (2026-10-19): the banner, editable and changed cells. */
.gkw-fixbar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 0 10px 8px;
  padding: 7px 10px; border-radius: 6px; background: var(--fix-bg, #fff7d6); border: 1px solid var(--fix-line, #e3c766); }
:root:not([data-theme="light"]) .gkw-fixbar { --fix-bg: rgba(227, 199, 102, .14); --fix-line: #8a7630; }
.gkw-fixgrid .gkw-ed { background: color-mix(in srgb, var(--fix-bg, #fff7d6) 55%, transparent); }
.gkw-fixgrid .gkw-chg { background: var(--fix-bg, #fff7d6); font-weight: 600; }
.gkw-chgv { display: inline-flex; flex-direction: column; line-height: 1.15; position: relative; padding-right: 14px; }
.gkw-chgv small { font-weight: 400; color: var(--faint); text-decoration: line-through; }
.gkw-undo { position: absolute; right: -2px; top: -2px; border: 0; background: none; color: var(--faint); cursor: pointer; font-size: 12px; padding: 0 2px; }
.gkw-undo:hover { color: var(--accent); }

/* Find across a whole level of the walk (189). */
.gkw-findrow { display: flex; gap: 8px; align-items: center; margin: 0 10px 6px; }
.gkw-find { font: inherit; font-size: 12.5px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 5px;
  background: var(--surface-work, var(--panel)); color: var(--ink); min-width: 240px; }

/* Native scrollbars and form controls follow the theme (GK-ADMIN 2026-10-24
   06:50Z: AG Grid's horizontal scrollbar was white on dark). Here, not in
   gk-tokens.css, which is generated. Dark is the default theme. */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
/* Note 76 (Jason, light mode): a dropdown's list could draw dark text on a
   dark list, or light on light, when the OS and the app disagree about the
   theme. The list's colours are set here, from the theme, for every select. */
/* Note 76: the risk form's dropdowns stretched to the form's width (1,150 px
   and more). Chrome on Windows drew those open lists blank, and a choice that
   wide is hard to read anyway. No dropdown is wider than this. */
select { max-width: min(100%, 32rem); }
select option, select optgroup { color: var(--ink); background-color: var(--panel);
  /* An open list is drawn by Windows as its own window, which may not be able
     to use the page's downloaded font (IBM Plex): the rows drew blank on
     Jason's Chrome in both themes. The list uses a system font instead. */
  font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif; font-variant-numeric: normal; }

/* gkWhy (gk-table.js): a control that cannot act says why, beside itself. */
.gk-why { position: fixed; z-index: 60; max-width: 380px; min-width: 220px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--warn); border-radius: 7px; box-shadow: 0 6px 20px rgba(0,0,0,.25); padding: 8px 10px; font-size: 13px; }
.gk-why-t { display: flex; gap: 8px; align-items: flex-start; }
.gk-why-t span { flex: 1; }
.gk-why-x { background: none; border: 0; color: var(--dim); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.gk-why-c { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; max-height: 220px; overflow: auto; }

/* gkDateInput (gk-table.js): ISO dates, YYYY-MM-DD, whatever the computer's region. */
.gk-date-wrap { display: inline-flex; align-items: center; gap: 4px; position: relative; flex-wrap: wrap; }
.gk-date { font: inherit; font-variant-numeric: tabular-nums; }
.gk-date[aria-invalid="true"] { outline: 2px solid var(--warn); }
.gk-date-cal { padding: 1px 6px; line-height: 1.2; }
.gk-date-native { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.gk-date-msg { color: var(--warn); font-size: 12px; }

/* DROPDOWNS IN THE THEME (Jason 2026-11-09: the list's blue highlight did not
   match). Where the browser lets a page draw its own dropdowns
   (appearance: base-select, Chrome 135+), the list is drawn by the page:
   theme colours, the theme's accent for the chosen and hovered rows, and no
   dependence on how Windows draws native lists (note 76). Other browsers
   keep their native list. */
@supports (appearance: base-select) {
  select, ::picker(select) { appearance: base-select; }
  select { display: inline-flex; align-items: center; gap: 6px; }
  select::picker-icon { color: var(--dim); }
  ::picker(select) { background: var(--panel); color: var(--ink); border: 1px solid var(--line2);
    border-radius: 6px; padding: 3px 0; box-shadow: 0 8px 22px rgba(0,0,0,.28); max-height: 60vh; }
  /* Drawn by the page here, so the app's own font works again. */
  select option { padding: 4px 12px; background: transparent; color: var(--ink); font-family: inherit; }
  select option::checkmark { display: none; }
  select option:hover, select option:focus-visible { background: var(--soft); color: var(--ink); outline: none; }
  select option:checked { background: var(--accent); color: #fff; }
  select option:checked:hover { background: var(--accent2); }
}

/* GK-SPATIAL's visual sweep (2026-11-09), frozen-file items 3 and 4. */
.gk-ag .ag-layout-auto-height .ag-center-cols-viewport,
.gk-ag .ag-layout-auto-height .ag-center-cols-container { min-height: 0 !important; }
#subjectChips { flex-wrap: nowrap; overflow-x: auto; min-width: 0; flex: 1 1 auto; scrollbar-width: thin; }
#scopeChips { flex-wrap: nowrap; flex: 0 0 auto; }
#filters .label { white-space: nowrap; }