/* screens.css - THE STAFF SCREENS' OWN LAYOUTS (RULING_V_Close_Ceiling_And_Station_Points_Amendment_1, chain 975, s.B lane S3).
   One file, linked ONCE, directly after style.css in the base layout's <head> (`_brand_head.html`). It holds only what belongs to one screen
   of the V pass's last batch; whatever is shared by many screens lives in style.css (lane S1). Tokens only - no literal colour.
   Each block names the 967 row it answers. Selectors carry `:not(#_)` where they must beat style.css's own, the way that sheet does. */

/* ---- V4  /salary/queue/<sid>: the decision bar floats at the foot of the window; the page keeps the bar's own height as space under its
   last line, so the last card scrolls clear of it. The bar is one button row (the control height, 12px above and below, a 1px rule); on a
   phone Reject stands over Approve with 12px between. `--control-h` is the density's, read where the density is set (the body). ---- */
:root main:has(.sq-decide):not(#_) { --sq-bar-h: calc(var(--control-h) + 2 * var(--space-3) + 1px);
                                      padding-bottom: calc(var(--space-7) + var(--sq-bar-h)); }
@media (max-width: 599.98px) {
  :root main:has(.sq-decide):not(#_) { --sq-bar-h: calc(2 * var(--control-h) + 3 * var(--space-3) + 1px); }
}

/* ---- V10  /duty-names: the names are one column, not two ---- */
:root main ul.hl-names.duty-names:not(#_) { columns: auto; column-count: 1; }

/* ---- V10  /golive: from 1024px the table is as wide as its content, not the page; below it the rows are cards as before ---- */
@media (min-width: 1024px) {
  :root main .tablewrap.golive-list:not(#_) { width: fit-content; max-width: 100%; }
  :root main .golive-list table:not(#_) { width: auto; table-layout: auto; }
  :root main .golive-list th:first-child:not(#_) { width: auto; min-width: 14rem; }
}

/* ---- V10  /eventlog: the rows sit inside the list band (880px, the widest a single line of a list may run), their "Details" beside the text
   instead of at the far edge of the screen ---- */
:root main .tablewrap.ev-list:not(#_) { max-width: 880px; }

/* ---- V10  /statutory: the compliance table's edit column keeps a fixed minimum width, so its form never squeezes (from 1024px; below it the
   rows are cards) ---- */
@media (min-width: 1024px) {
  :root main td:has(> form.stp-src-form):not(#_) { min-width: 22rem; }
}

/* ---- V10  /privacy/anonymise/<eid>: the key column is as wide as its longest key (not 38% of the card), with one floor so the two cards'
   values share an edge; on a phone the keys wrap as before ---- */
@media (min-width: 600px) {
  :root main .anon-kv th:not(#_) { width: 1%; min-width: 9rem; white-space: nowrap; }
}

/* ---- V7  /salary/queue at a desktop table (1280px up; below it the rows are cards): the name column has a floor, so a name wraps to two lines at
   most, and it takes all the room the other columns do not need (Institution and Post gave theirs up: their values are one smaller line under the
   name). The tick box keeps its 32px beside the name: the text is held to what the box leaves, so it wraps there instead of dropping under the box. ---- */
@media (min-width: 1280px) {
  :root main .sq-layout .sq-table tr > :first-child:not(#_) { width: auto; min-width: 22rem; }
  :root main .sq-layout .sq-table tr > :not(:first-child):not(#_) { width: 1%; white-space: nowrap; }
  :root main .sq-layout .sq-table td.sq-name:not(#_) { white-space: nowrap; }
  :root main .sq-layout .sq-table td.sq-name > .sq-name__text:not(#_) { max-width: calc(100% - 32px); white-space: normal; }
}

/* ---- V9  /users/<uid> and /hr-success-gate: where these rows stack into cards a desktop column width must not follow them. `.u-kv td.act` (1%) left
   "Change" a 3px box, right-aligned, its first letter cut by the card; `.sg-decl td.act` (88px) and `td:first-child` (50%) left "Declare" mid-card
   and the title's rule short. Each cell takes the card's width and starts at its text edge. ---- */
@media (max-width: 1023.98px) {
  :root main table.u-kv > tbody > tr > :is(th, td):not(#_), :root main table.sg-decl > tbody > tr > td:not(#_) { width: auto; }
  :root main table.u-kv td.act:not(#_), :root main table.sg-decl td.act:not(#_) { text-align: left; }
}