/* ===========================================================================
   gk-admin.css  --  GK-ADMIN's screens: the sign-in page and the licences

   Lane owner: GK-ADMIN. 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). Prefixes: .gka- for signing in (gk-auth.js), .gku-
   for users and licences (gk-users.js), .gkg- for editing in the grid
   (gk-grid.js), so nothing here can land on another lane's element by
   accident.
   =========================================================================== */

/* ---- the sign-in page ------------------------------------------------- */

.gka-page {
  min-height: 100vh;
  display: grid; place-items: center;
  background: var(--ground); color: var(--ink);
  font-family: var(--sans); font-size: var(--fs);
}
.gka-card { width: min(340px, calc(100vw - 32px)); }
.gka-brand {
  display: flex; align-items: center; gap: 9px;
  margin-bottom: 22px; font-size: 19px; font-weight: 600;
}
/* .mark is the scope bar's diamond, reused so the brand is one drawing. */
.gka-brand .mark {
  width: 15px; height: 15px; display: block;
  background: var(--accent); border-radius: 3px; transform: rotate(45deg);
}
.gka-lede { color: var(--ink2); line-height: 1.5; margin: 0 0 14px; }
.gka-form {
  border: 1px solid var(--line2); background: var(--panel); border-radius: 6px;
}
.gka-body { padding: 14px; display: grid; gap: 10px; }
.gka-field { display: grid; gap: 4px; }
.gka-label { color: var(--dim); font-size: var(--fs-small); }
.gka-field input, .gku-table input, .gku-table select {
  background: var(--bed); color: var(--ink);
  border: 1px solid var(--line2); border-radius: 3px;
  padding: 5px 7px; font: inherit;
}
.gka-field input:focus, .gku-table input:focus, .gku-table select:focus {
  outline: 2px solid var(--edge); outline-offset: 0; border-color: var(--accent);
}
.gka-check { display: flex; align-items: center; gap: 6px; color: var(--ink2); }
.gka-submit { width: 100%; padding: 6px; }
.gka-msg { color: var(--warn); margin: 0; min-height: 1em; }
.gka-msg:empty { display: none; }

/* ---- sheets: account, password, re-auth ------------------------------ */

.gka-sheetbody { padding: var(--pad) calc(var(--pad) * 2) calc(var(--pad) * 2); }
.gka-inline { display: grid; gap: 10px; min-width: min(320px, 80vw); }
.gka-menu { list-style: none; margin: var(--gap) 0 0; padding: 0; }
.gka-item {
  display: block; width: 100%; text-align: left;
  background: transparent; color: var(--ink); border: 0;
  padding: 6px 4px; font: inherit; cursor: pointer;
}
.gka-item:hover, .gka-item:focus-visible { background: var(--panel2); color: var(--accent2); }

/* ---- users and licences ---------------------------------------------- */

.gku { min-width: 0; }
.gku-head { display: flex; align-items: center; gap: var(--gap); margin-bottom: var(--gap); }
.gku-wrap { overflow-x: auto; }
/* table.grid is width:auto in gk.css; a class alone loses to it. */
table.grid.gku-table { width: 100%; }
table.grid.gku-table td { vertical-align: middle; }
.gku-unissued { font-style: italic; }
.gku-actions-inline { display: inline-flex; flex-wrap: wrap; gap: 4px; }
/* Name and initials share the name column. As two inline inputs the
   initials were squeezed to a sliver by the table's auto layout, so it read
   as no box at all. A flex pair with fixed minimums cannot do that. */
.gku-namecell { display: inline-flex; gap: 4px; align-items: center; }
.gku-table input.gku-name { width: 14ch; min-width: 14ch; }
.gku-table input.gku-code { width: 7ch; min-width: 7ch; flex: none; text-transform: uppercase; }
.gku-past { margin-top: calc(var(--gap) * 1.5); }
.gku-past summary { cursor: pointer; color: var(--dim); }
.gku-note { margin-top: calc(var(--gap) * 1.5); }
.gku-actions { display: flex; gap: var(--gap); margin-top: var(--gap); }

/* State is written out in words; the colour only repeats it (ADR-0074). */
.gku-pill {
  display: inline-block; padding: 1px 8px; border-radius: 10px;
  border: 1px solid var(--line2); color: var(--ink2);
  font-size: var(--fs-small); white-space: nowrap;
}
.gku-pill.ok   { border-color: var(--ok);   color: var(--ok); }
.gku-pill.warn { border-color: var(--warn); color: var(--warn); }
.gku-pill.off  { color: var(--faint); }

.gku-temp {
  font-size: 18px; letter-spacing: .06em; padding: 8px 10px;
  background: var(--bed); border: 1px solid var(--line2); border-radius: 4px;
  user-select: all;
}

/* ---- editing in the grid (gk-grid.js, ADR-0089) -------------------------
   The coded-cell editor: an input that fills the cell, with the vocabulary
   as a datalist. Same type and colours as the cell it replaces, so starting
   an edit does not make the row jump. */
.gkg-term-cell { display: block; height: 100%; }
.gkg-term {
  width: 100%; height: 100%; box-sizing: border-box;
  padding: 0 var(--pad); border: 1px solid var(--accent); border-radius: 0;
  background: var(--ground); color: var(--ink);
  font: inherit;
}
.gkg-term:focus { outline: none; }
/* Since note 17 (2026-10-14) the coded-cell editor is a dropdown: a popup
   over the cell, the box the height of the row and the list under it,
   label first and the stored code dim beside it. */
.gkg-term-pop {
  display: flex; flex-direction: column;
  background: var(--ground); border: 1px solid var(--accent);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
.gkg-term-pop .gkg-term { height: var(--row, 22px); border: 0; border-bottom: 1px solid var(--line2); }
.gkg-term-list {
  list-style: none; margin: 0; padding: 2px 0;
  max-height: 260px; overflow-y: auto;
}
.gkg-term-opt {
  display: flex; gap: var(--pad); justify-content: space-between; align-items: baseline;
  padding: 2px var(--pad); cursor: pointer; white-space: nowrap;
}
.gkg-term-opt:hover { background: var(--bed); }
.gkg-term-opt.on { background: var(--accent); color: var(--ground); }
.gkg-term-code { color: var(--dim); font-size: .9em; }
.gkg-term-opt.on .gkg-term-code { color: inherit; opacity: .8; }
.gkg-term-none { padding: 4px var(--pad); color: var(--dim); white-space: normal; max-width: 320px; }
.gkg-date { padding: 0 2px; color-scheme: light dark; }
.obe-ask { display: flex; flex-direction: column; gap: var(--pad); padding: var(--pad); }
/* A row that is not current (pass.show = all): read, not edited. Dimmed and
   in italics, so it never passes for the current value at a glance. */
.ag-row.gkg-not-current { color: var(--dim); font-style: italic; }

/* ---- the users sheet: big enough to see, and resizable ---------------
   gk.css caps a wide sheet at 980px and makes every input in a sheet 100%
   wide; in a table row of inputs that squeezes each one to nothing. The
   users sheet takes most of the window, can be dragged larger or smaller
   from its corner, and its inputs size to what they hold. */
dialog#gkUsers.sheet.wide {
  width: min(1600px, 97vw); max-width: 97vw;
  max-height: 92vh; overflow: auto;
  resize: both; min-width: 480px; min-height: 240px;
}
#gkUsers .gku-table input, #gkUsers .gku-table select { width: auto; }
#gkUsers .gku-table input[type="email"] { width: 30ch; min-width: 24ch; }
#gkUsers .gku-table input.gku-name { width: 14ch; min-width: 14ch; }
#gkUsers .gku-table input.gku-code { width: 7ch; min-width: 7ch; }
#gkUsers .gku-table input.gku-project { width: 16ch; min-width: 12ch; }
#gkUsers .gku-table input.gk-date { min-width: 11ch; }
#gkUsers .gku-table th { position: relative; white-space: nowrap; }
#gkUsers .gku-table td { white-space: nowrap; }
.gku-grip {
  position: absolute; top: 0; right: 0; bottom: 0; width: 6px;
  cursor: col-resize; touch-action: none; z-index: 1;
}
.gku-grip:hover, .gku-grip:active { background: var(--line2); }

/* ---- My settings (gk-auth.js, ADR-0092) ------------------------------ */
.gks-body { padding: var(--pad); display: grid; gap: calc(var(--gap) * 1.5); }
.gks-row { display: grid; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: var(--gap); }
.gks-head { display: flex; gap: var(--gap); align-items: baseline; justify-content: space-between; }
.gks-desc { margin: 0; color: var(--ink2); }
.gks-choices { display: flex; gap: calc(var(--gap) * 2); }
.gks-choices input[type="radio"] { width: auto; }

/* The users sheet waiting for a password: says so, with its own button. */
.gku-ask { display: grid; gap: var(--gap); justify-items: start; padding: var(--pad) 0; }

/* ---- Obligations: the bands and the header count (gk-obligations.js, ADR-0098)
   Overdue's colour is gk-spatial.css's .ob-late / tr.ob-overdue, unchanged. */
.ob-grid tr.ob-upcoming .ob-state { color: var(--warn); font-weight: 600; }
.ob-grid tr.ob-later .ob-state { color: var(--dim); }
.ob-band { display: flex; gap: var(--gap); align-items: baseline; }
.ob-band-overdue > span:first-child { color: var(--accent); }
.ob-band-upcoming > span:first-child { color: var(--warn); }
.ob-missing { color: var(--warn); }
.tool.ob-badge { color: var(--warn); border-color: var(--warn); }
.tool.ob-badge.ob-late { color: var(--accent); border-color: var(--accent); }

/* ---- Environment: readings through time (gk-environment.js, .gke-) ---- */
.gke-series { margin-bottom: 18px; }
/* #38: a station's series sit under it in the rail, one step in. */
#rail button.gke-rail-series { padding-left: 22px; }
#rail button.gke-rail-series .id { font-weight: normal; }
.gke-chart { padding: 0 var(--gap); }
.gke-chart svg { width: 100%; max-width: 900px; height: auto; display: block; }
.gke-line { fill: none; stroke: var(--accent); stroke-width: 1.6; }
.gke-dot { fill: var(--accent); }
.gke-grid { stroke: var(--line); stroke-width: 1; }
.gke-tick { fill: var(--dim); font-size: 10px; font-family: var(--mono); }
/* A reading without a value is marked under the axis, in the warning
   colour, and the line breaks over it -- never a point at zero. */
.gke-gap { fill: var(--warn); }
.gke-warn { color: var(--warn); }
.gke-novalue td { color: var(--dim); font-style: italic; }

/* ---- Obligations: the two entry grids (gk-obligations.js, .obe-) ------- */
/* Full width, like every other grid (Jason's note 73: Consultations stopped
   at 1200 px on a wide screen; so did Permits, Readings and Promises). */
.obe-grid { padding: 0 var(--gap) 14px; }
.obe-tools { display: flex; gap: var(--gap); padding: 2px var(--gap) 6px; }
/* A row typed but not yet saved: it still needs something the database
   requires, and the status line says what. */
.obe-grid .obe-new { font-style: italic; }

/* ---- People: hours on site (gk-people.js, .gkp-) ------------------------ */
.gkp-grid tr { cursor: pointer; }
.gkp-grid tr.gkp-picked td { background: var(--panel2); }
.gkp-warn { color: var(--warn); font-weight: 600; }

/* ---- contractors (gk-contractors.js, ADR-0061) -------------------------
   Cells the database works out (metres, the strike number) are not typed
   into, so they read as derived. A deeper water strike not sealed off from
   the one above is mostly the first water still running: kept, dimmed. */
.ag-cell.ct-derived { color: var(--dim); }
.ag-row.ct-not-alone { color: var(--dim); font-style: italic; }
/* The shift the crew and shift note below belong to (tranche 3): the shift
   grid is also how a shift is picked. */
.ag-row.ct-picked { background: var(--panel2); }

/* ---- Tenure: subject tabs and due-date chips (gk-obligations.js) --------
   Notes #23 and #39: one grid, with what it shows picked from two chip
   rows. .obt- so nothing here lands on another lane's chips. */
.obt-row { padding: 4px 12px 0; gap: 4px; }
.obt-row .obt-k { min-width: 5ch; text-transform: uppercase; letter-spacing: .06em; font-size: var(--fs-small); }
.obt-row .chip { padding: 1px 8px; }
.obt-row .chip .obt-n { margin-left: 4px; text-transform: none; letter-spacing: 0; }
.obt-row .chip.obt-late .obt-n { color: var(--warn); }
.obt-tabs { padding-top: 8px; }
.obt-legend { margin-top: 2px; }

/* ---- People: one stakeholder's card (gk-registers.js rgStakeholderCard) */
.rg-facts { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 4px 0; }
.rg-facts dt { color: var(--dim); }
.rg-facts dd { margin: 0; }

/* ---- Contractors: a shift's sign-off and totals (gk-contractors.js) ----
   Jason's ruling 2: signed off or not is a state the screen says in words,
   never a blank line. */
.ct-signbar { align-items: center; }
.ct-sign { font-weight: 600; padding: 1px 8px; border-radius: 3px; border: 1px solid var(--line2); }
.ct-sign.ct-signed { border-color: var(--accent); }
.ct-sign.ct-unsigned { border-color: var(--warn); color: var(--warn); }
.ct-totals { margin-top: 2px; }

/* Events and the HSEC settings (gk-events.js). */
.ev-child { margin-top: 10px; }
.hs-matrix th, .hs-matrix td { text-align: center; white-space: nowrap; }
.hs-cell { color: var(--ink); }
.hs-b0 { background: color-mix(in srgb, var(--map-step-2) 45%, transparent); }
.hs-b1 { background: color-mix(in srgb, var(--map-step-3) 45%, transparent); }
.hs-b2 { background: color-mix(in srgb, var(--map-step-5) 50%, transparent); }
.hs-b3, .hs-b4 { background: color-mix(in srgb, var(--map-step-6) 60%, transparent); }
.hs-bx { outline: 1px dashed var(--warn); }

/* gk-stamps.js: who entered and last changed a row. A stamp is a quiet
   link to the row's history; a stamp still being read is a dim ellipsis. */
.st-stamp { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer;
            text-decoration: underline dotted; text-underline-offset: 3px; }
.st-stamp:hover, .st-stamp:focus-visible { color: var(--accent); }
.st-wait { opacity: .6; }

/* ---- the first-run checklist (gk-firstrun.js) -------------------------- */
/* .gkf- : one numbered step per row; the next one to do carries the accent,
   a done one a tick in --ok, one the server could not count a "?". */
.gkf { padding: 4px 16px 24px; max-width: 760px; }
.gkf-lede { color: var(--ink2); margin: 10px 0 14px; line-height: 1.5; }
.gkf-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gkf-step {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: start;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel);
}
.gkf-step.next { border-color: var(--edge); background: var(--soft); }
.gkf-mark {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line2);
  display: grid; place-items: center; font-size: 13px; color: var(--dim);
}
.gkf-step.done .gkf-mark { border-color: var(--ok); color: var(--ok); }
.gkf-step.next .gkf-mark { border-color: var(--accent); }
.gkf-step.unknown .gkf-mark { border-color: var(--warn); color: var(--warn); }
.gkf-body { min-width: 0; }
.gkf-title { font-weight: 600; color: var(--ink); }
.gkf-why { margin: 3px 0 6px; color: var(--ink2); line-height: 1.45; }
.gkf-count { font-size: 12px; color: var(--dim); }
.gkf-step.done .gkf-count { color: var(--ok); }
.gkf-step.unknown .gkf-count { color: var(--warn); }
.gkf-note { padding: 16px; color: var(--ink2); }
.gkf-note p { margin: 6px 0 0; }

/* ---- several databases, and two-step sign-in (2026-11-08) ------------- */

.gka-title { font-size: 15px; font-weight: 600; margin: 0 0 10px; }
.gka-dbs { display: grid; gap: 8px; margin-bottom: 10px; }
.gka-db {
  display: grid; gap: 2px; text-align: left; cursor: pointer;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line2); border-radius: 6px; padding: 10px 12px; font: inherit;
}
.gka-db:hover, .gka-db:focus-visible { border-color: var(--accent); }
.gka-db .mono { color: var(--dim); font-size: var(--fs-small); }
.gka-link {
  background: transparent; border: 0; padding: 2px 0; cursor: pointer;
  color: var(--accent2); font: inherit; text-align: left; text-decoration: underline;
}
.gka-item.on { color: var(--dim); cursor: default; }
.gka-dbchip { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gka-enrol { display: grid; gap: 10px; max-width: 360px; }
/* The code is black on its own white square in either theme (qr.js). */
.gka-qr { width: 200px; height: 200px; }
.gka-qr svg { display: block; width: 100%; height: 100%; }
.gka-key { word-break: break-all; }
.gka-codes { columns: 2; margin: 0; padding-left: 22px; }

/* The event form (#68, gk-events.js evFormView): the work area's form
   standard (docs/sweep/visual-standard.md), the label column 8-11rem. */
.ev-form { display: grid; gap: 10px; max-width: 54rem; }
.ev-form .vform { grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr); row-gap: 8px; }
.ev-form .vform select { width: auto; min-width: 12rem; }
.ev-when, .ev-sh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ev-form .vform .ev-when input.gk-date, .ev-form .vform .ev-when .gk-date-wrap { width: auto; }
/* #75: one Where -- the answer, then what that answer needs, wrapping. */
.ev-where, .ev-point { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ev-form .vform .ev-where select, .ev-form .vform .ev-where input { width: auto; max-width: 100%; }
.ev-where .hint { flex-basis: 100%; }
.ev-sh-form { flex-basis: 100%; display: grid; gap: 6px; padding: 8px 10px; margin-top: 4px;
  border: 1px solid var(--line2); border-radius: 6px; background: var(--panel); max-width: 30rem; }
.ev-sh-f { display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-items: center; gap: 6px; }
.ev-sh-f .vlab { color: var(--dim); font-size: var(--fs-small); }
.ev-sh-f .vlab.req::after { content: " *"; color: var(--accent); }
.ev-more > summary { cursor: pointer; color: var(--dim); }
.ev-more[open] > summary { margin-bottom: 8px; }
.ev-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* #74: the filters in force above the events list, each with an x. */
.ev-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ev-chip { display: inline-flex; align-items: center; gap: 2px; }
.ev-chip .ev-x { color: var(--dim); }
.ev-chip:hover .ev-x, .ev-chip:focus-visible .ev-x { color: var(--accent); }

/* The grid's date cell is gkDateInput (ISO): the box and its calendar
   button side by side in the cell; the "use YYYY-MM-DD" line is the box's
   own red outline here, as there is no room under a cell. */
.gkg-term-cell .gk-date-wrap { display: flex; align-items: stretch; height: 100%; gap: 2px; }
.gkg-term-cell .gk-date-wrap .gkg-date { flex: 1 1 auto; min-width: 0; }
.gkg-term-cell .gk-date-msg { display: none; }