/* ---------------------------------------------------------------------------
   THE HOME TAB — the desk overview gets its own door, stacked above the three
   workflow tabs (Kazim, 2026-09-24)

   THE TWO THINGS THIS FIXES. (1) Home had no state of its own: the overview took
   the stage while `WORKFLOW` still named the last tab, so pressing the tab the
   console already named did nothing and the operator had to switch away and back
   to reach the list. Home is now a TAB — one of the four, selected when its view
   is on screen — so the tab strip always says where you are. (2) The three
   workflows had no address: the tab writes one now (`#Hague` / `#Informal` /
   `#Translations`, and `#Home` for this one), so a reload lands on the tab that
   was in the URL instead of a coin-toss between them.

   SIZING, from the family already on this console (DESIGN.md "Structure" and
   "Components"): the tab strip below is a sunken multi-cell track, radius
   `--r-md`, its current cell raised on `--raised` with a `--line-2` border and
   `--e1`. The Home tab is the SAME control with ONE cell, so it takes the same
   treatment at the strip's own width — `align-items: stretch` on the stack makes
   it exactly the length of the three tabs beneath it, which is what was asked
   for. No new material, no second accent, no radius the console does not already
   use.

   THE FEEL is the console's own, not a new one: `app.css` already carries the
   press rule (`button:not(:disabled):active { transform: scale(0.98) }`, on
   pointer-DOWN, never on release) and the release easing for every `button`, and
   this one is a `<button>`, so it answers the finger the way every other control
   on the desk does. The 6px gap between the two rows is the same beat as the
   strip's own 2px cell gap scaled to a row break — enough to read as two strips,
   too little to read as two unrelated things.
   --------------------------------------------------------------------------- */

/* THE TOOLS STAY ALIGNED WITH THE TABS (Kazim: "keep everything from the right of it how it
   already is"). The search box and the three Create buttons were aligned with the workflow tab
   strip when there was only one row; centred against a two-row stack they float halfway between
   Home and the tabs. Aligning the bar's items to the bottom pins them to the tab row they act on,
   which is where they were. Scoped to the desk: a phone's bar is its own single-row layout and
   `app.css` owns it (the phone blocks set their own alignment, and a media query adds no
   specificity, so an unscoped rule here would override them). */
@media (min-width: 721px) {
  .wfbar { align-items: flex-end; }
}

/* The stack: Home above the three tabs. It is the tablist (both rows are tabs of
   one control), and its width is the strip's — so `stretch` gives the Home tab
   the full length of the row beneath it. */
.wf-bar-left {
  display: flex; flex-direction: column; gap: 6px;
  align-items: stretch; min-width: 0;
}

/* One cell of the same segmented control the three workflows sit in. */
.wf-home-tab {
  font: inherit; font-size: 13px; font-weight: 660;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; min-height: 40px; padding: 7px 18px; min-width: 0;
  color: var(--ink-2); background: var(--sunken);
  border: 1px solid var(--line); border-radius: var(--r-md);
  cursor: pointer;
}
.wf-home-tab:hover { background: var(--hover); color: var(--ink); }
/* The current row's cell: raised, hairline-bordered, accent ink — exactly the
   dress `.wf-tab.on` wears one row down, so "where am I" reads the same on both. */
body.ovw-on .wf-home-tab {
  color: var(--accent); background: var(--raised);
  border-color: var(--line-2); box-shadow: var(--e1);
}
body.ovw-on .wf-home-tab:hover { color: var(--accent); background: var(--raised); }

/* WHILE THE OVERVIEW OWNS THE STAGE, NO WORKFLOW TAB IS CURRENT. `WORKFLOW` still
   remembers the last tab the operator stood on (a tab click needs it), but no
   workflow's list is on screen, so lighting one of them would say a list is up
   when it is not — the same class of false statement the console refuses
   everywhere else. The greyed blanket tab's reduced contrast is left alone: it
   still says what it says. */
body.ovw-on .wf-tab.on {
  color: var(--ink-2); background: transparent;
  border-color: transparent; box-shadow: none;
}
body.ovw-on .wf-tab.on .wf-n { color: var(--ink-4); }

/* A phone keeps the two controls it has (the three-line menu naming the current
   workflow, and the search toggle) and reaches Home by the mark, which it has
   always had. The tabs are already hidden there; a full-width Home row would add
   height to the one bar that must stay short, so it is hidden with them. */
@media (max-width: 720px) {
  .wf-home-tab { display: none; }
}
/* A landscape phone brings the tabs back onto the bar's second row; the stack has
   to claim that row, or the tabs would sit in a zero-width column. */
@media (max-width: 720px) and (orientation: landscape) and (min-width: 560px) {
  .wf-bar-left { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------------
   ON HOME THE LEFT BAR IS NOT SHOWN AT ALL (Kazim, 2026-09-24)

   His words: "the left bar is clear, no hague/informal/translation text or any
   cases/jobs from any of those showing when in home, only when any of those is
   selected should it show." Clearing the rail's CONTENTS is the first half and it
   is done in `renderRail`. This is the second half: an empty bordered column
   still occupied the left 420px of the desk and read as a broken panel — the
   strip above it named nothing and the hairline ran down to the sheet for no
   reason. On Home the column is not drawn.

   THE GRID MUST FOLLOW IT. `.desk-body` is `var(--rail) 1fr`, so hiding the rail
   alone would drop the sheet into the narrow first track instead of letting it
   take the width the rail gave up. `minmax(0, 1fr)` is the single full track (the
   `minmax(0, …)` is what keeps a wide child from overflowing the track).

   `ovw-on` CARRIES THE SCOPE FOR FREE: it is set only where the overview can
   actually be drawn, which is the desk. A phone never sets it (the rail IS the
   page there, and its list is the whole screen), so no phone rule is needed and
   none is written — an unscoped `display: none` here would have deleted the phone
   operator's only list. */
body.ovw-on .queue { display: none; }
body.ovw-on .desk-body { grid-template-columns: minmax(0, 1fr); }