/* ── kh-areas.css — KUI-04 · the 768–1000px band, behind KH_UI_AREAS_V1 ──────
   Doc 11 (4 Sep 2026), measured at 820×900: "the rail becomes 82px wide and
   clips labels into unidentified glyphs; account controls collide." A rail of
   unnamed glyphs is not a compact mode, it is a memory test — and the icons are
   ◧ ❋ ✦ ▦ ◎ ☑ ✓ ◰, which nobody learns.

   So at that width the navigation becomes a LABELLED DRAWER: full names, slid
   off-canvas until asked for, over the work rather than squeezing it. The
   account and security controls leave the 66px footer they were colliding in
   and become an avatar menu in the status bar.

   EVERY RULE HERE IS SCOPED TO html.kh-areas, which only kh-areas.js paints and
   only when the flag is on. With KH_UI_AREAS_V1 off this stylesheet matches
   nothing at all. Loaded after kinetic-yield.css because it is undoing that
   file's ≤1000px collapse, which is written with !important.               ── */

/* The flagged chrome exists at every width but is only WANTED in the band where
   the drawer hides the sidebar's own footer. Above it, the sidebar is open and
   labelled already and a second account menu would just be a second account menu. */
html.kh-areas .kh-navtoggle { display:none; }
html.kh-areas .kh-av { display:none; }

@media (min-width:768px) and (max-width:1000px) {
  html.kh-areas .kh-navtoggle { display:inline-flex; align-items:center; gap:7px; }
  html.kh-areas .kh-av { display:block; position:relative; }

  /* ── the drawer ─────────────────────────────────────────────────────────── */
  html.kh-areas body [data-khregion="nav"] { position:fixed !important; top:0 !important; bottom:0 !important; left:0 !important; width:248px !important; flex-basis:248px !important; margin-top:0 !important; z-index:60; transform:translateX(-100%); visibility:hidden; transition:transform var(--kh-t-3) var(--kh-swift), visibility 0s linear var(--kh-t-3); box-shadow:var(--kh-e4); border-right:1px solid var(--kh-line); }
  /* Off-canvas is not hidden: a translated drawer keeps ~35 controls in the tab order
     and in the accessibility tree, off-screen. visibility takes them out — delayed by
     one transition on the way out so the slide still plays, restored instantly on the
     way in so the drawer is focusable the moment it moves. */
  html.kh-areas.kh-nav-open body [data-khregion="nav"] { transform:translateX(0); visibility:visible; transition:transform var(--kh-t-3) var(--kh-swift), visibility 0s; }
  html.kh-areas body [data-khregion="bar"] { margin-left:0 !important; padding-inline:14px !important; }

  /* ── the labels come back ───────────────────────────────────────────────── */
  html.kh-areas body [data-khregion="nav"] button[data-mod] { justify-content:flex-start !important; padding:9px 11px !important; }
  html.kh-areas body [data-khregion="nav"] button[data-mod] > span:first-child { width:16px !important; font-size:var(--kh-fs-13) !important; }
  html.kh-areas body [data-khregion="nav"] button[data-mod] > span:nth-child(n+2) { position:static !important; width:auto !important; height:auto !important; padding:0 !important; margin:0 !important; overflow:visible !important; clip:auto !important; white-space:nowrap !important; }
  html.kh-areas body [data-khregion="nav"] [style*="letter-spacing:.14em"] { height:auto !important; overflow:visible !important; padding:12px 10px 8px !important; color:var(--kh-ink-dim) !important; }
  html.kh-areas body [data-khregion="nav"] > div:first-child { padding:18px 16px 12px !important; }
  html.kh-areas body [data-khregion="nav"] > div:first-child img { width:140px !important; }
  html.kh-areas body [data-khregion="nav"] > div:first-child::after { content:none; }
  html.kh-areas body [data-khregion="nav"] > div:nth-child(3) { padding-inline:12px !important; }

  /* ── the account block moves to the avatar menu, not into a 66px collision ─ */
  html.kh-areas body [data-khregion="nav"] > div:last-child { display:none !important; }
}

/* A closed <details> hides its children through a UA rule, and a UA rule loses to
   ANY author declaration — every nav row carries an inline display:flex (dc-lite
   renders the template's inline styles verbatim), so without this both disclosures
   would sit permanently open and All tools would just be the 31 peers again. */
html.kh-areas .kh-alltools:not([open]) > *:not(summary), html.kh-areas .kh-av:not([open]) > *:not(summary) { display:none !important; }

/* ── the avatar menu · a native <details>, so Escape, Tab and a screen reader
      all behave without a line of menu code ──────────────────────────────── */
html.kh-areas .kh-av > summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:8px; }
html.kh-areas .kh-av > summary::-webkit-details-marker { display:none; }
html.kh-areas .kh-av-face { width:28px; height:28px; border-radius:var(--kh-r-pill); background:linear-gradient(135deg,var(--kh-gold),var(--kh-gold-0)); display:flex; align-items:center; justify-content:center; font:700 var(--kh-fs-12-5)/1 var(--kh-font-ui); color:var(--kh-paper-ink); }
html.kh-areas .kh-av-who { font:600 var(--kh-fs-11)/1.3 var(--kh-font-ui); color:var(--kh-ink-dim); text-align:left; }
html.kh-areas .kh-av-menu { position:absolute; right:0; top:36px; z-index:70; min-width:212px; padding:10px; display:flex; flex-direction:column; gap:6px; background:var(--kh-void-3); border:1px solid var(--kh-line); border-radius:var(--kh-r-2); box-shadow:var(--kh-e4); }
html.kh-areas .kh-av-menu button { width:100%; text-align:left; border:1px solid var(--kh-warn); background:transparent; color:var(--kh-ink-dim); font:700 var(--kh-fs-11)/1 var(--kh-font-ui); padding:9px 10px; border-radius:var(--kh-r-1); cursor:pointer; }
html.kh-areas .kh-navtoggle { border:1px solid var(--kh-warn); background:transparent; color:var(--kh-gold); font:700 var(--kh-fs-11)/1 var(--kh-font-ui); padding:7px 10px; border-radius:var(--kh-r-1); cursor:pointer; }

/* ── the pinned active-job header · the same 14 modules kh-route.js calls
      job-scoped, so a job screen always says which job it is ─────────────── */
html.kh-areas .kh-jobhdr { position:sticky; top:0; z-index:6; display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:10px 22px; background:var(--kh-paper); border-bottom:1px solid var(--kh-hair-paper); }
html.kh-areas .kh-jobhdr-ref { font:800 var(--kh-fs-14)/1 var(--kh-font-ui); color:var(--kh-paper-ink); }
html.kh-areas .kh-jobhdr-at { font:600 var(--kh-fs-12-5)/1.3 var(--kh-font-ui); color:var(--kh-paper-dim); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
html.kh-areas .kh-jobhdr-stage { font:700 var(--kh-fs-10)/1 var(--kh-font-mono); letter-spacing:.1em; color:var(--kh-paper-ink); background:var(--kh-card-paper); border:1px solid var(--kh-hair-paper); border-radius:var(--kh-r-pill); padding:5px 9px; }
html.kh-areas .kh-jobhdr-none { color:var(--kh-crit); }