/* modhead.css — the module header band (R9 G6.A E0; REDESIGN_PLAN_FINAL §2.2.3 "Module header"; CONTRACT_R9 §7 clause 42, RL-118).
   Drawn by core/wm.js through js/ui/modhead.js under a window's title bar and above the module's own root, and only for a manifest
   that declares "meta": true. EVERY selector here names the band (.ui-modhead or one of its parts): a window without the flag never
   meets a rule of this file (test/modhead.test.mjs holds it).

   GEOMETRY. One band, 44 px at the comfortable density and 36 px at the dense (compact) one, × --font-scale: exactly the plan's
   figures at 100 % text, growing with the type at 115 / 130 % as the Provenance bar and the Ledger row do. Comfortable: two lines
   on the left (the eyebrow; then the title with the meta line after it) and the toolbar on the right, centred. Dense: one line.
   The left edge is --pad-window, so the title lines up with the module's own content; every other gap and padding is a --sp-*
   token (the 4-px grid). Lacquer, never glass: an opaque --surface-solid with a --line-1 hairline under it, as the Provenance bar.

   WHO GIVES WAY. Grid tracks, not flex shrink: the title's track is minmax(0, max-content) and the meta line's minmax(0, 1fr), so
   the title has its whole width before the meta line has a pixel (flex shrink would shave a sliver off the title and ellipsise
   it). Inside the meta line the source keeps at least 8 em (its path ellipsises at the START, the file's own name stays); what
   still does not fit is modhead.js's to fold — the flags into "+N", then the date, then the source; the † chip never.

   TYPE ROLES. The eyebrow is the desk's .w2-eyebrow (11 px small capitals in the reading serif, --text-3); the title the Title
   role (--fs-lg, medium, --text-1); the meta line --fs-xs in --text-3 with tabular figures; the source a path chip in the mono
   face, coloured as the rendered path chip is (md.css: the accent on its wash — it is a link and opens the file).

   THE WORLDS. The eyebrow also carries the comps' .eyebrow, the title is an h2 and the meta line the comps' .meta, so the scoped
   rules of designs.css reach them (the Reading Room's serif titles and small-capital labels; the Counting House's Display 700
   title, tracked capitals and figures in Cascadia Code). This file sets no world of its own.

   MOTION. None but the hover colour of the path chip (the kit's buttons keep their own colour transitions); no layout property is
   ever transitioned. */

.ui-modhead {
  --modhead-h: calc(44px * var(--font-scale));
  flex: none; box-sizing: border-box; display: flex; align-items: center; gap: var(--sp-4);
  height: var(--modhead-h); min-width: 0; margin: 0;
  padding: 0 calc(var(--pad-window) - var(--sp-2)) 0 var(--pad-window);
  background: var(--surface-solid); border-bottom: 1px solid var(--line-1);
  color: var(--text-1); font-family: var(--font-ui); font-size: var(--fs-md); line-height: var(--lh-ui);
}
:root[data-density="compact"] .ui-modhead { --modhead-h: calc(36px * var(--font-scale)); }

/* ── the identity: the eyebrow over the title and its meta line (one line when dense) ─────────────────────────────────────── */
.ui-modhead__id { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; }
.ui-modhead .ui-modhead__eyebrow {
  display: flex; align-items: center; gap: var(--sp-2); min-width: 0; min-height: 16px; margin: 0;
  overflow: hidden; white-space: nowrap; line-height: 1.25;
}
.ui-modhead__place { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ui-modhead__dot { flex: none; color: var(--text-4); }
/* the meta line keeps a floor (its source chip at 8em, the † chip and a "+N"): a long title ellipsises before the meta line vanishes (the lead, 16/10/2026) */
.ui-modhead__line { display: grid; grid-template-columns: minmax(0, max-content) minmax(min(12em, 40%), 1fr); align-items: baseline; column-gap: var(--sp-3); min-width: 0; }
.ui-modhead .ui-modhead__title {
  min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-lg); font-weight: var(--fw-medium); line-height: 1.25; letter-spacing: 0; color: var(--text-1);
}
.ui-modhead__meta {
  min-width: 0; display: flex; align-items: center; gap: var(--sp-2); overflow: hidden; white-space: nowrap;
  font-size: var(--fs-xs); line-height: 1.25; color: var(--text-3); font-variant-numeric: tabular-nums;
}
:root[data-density="compact"] .ui-modhead__id { grid-template-columns: minmax(0, max-content) minmax(min(12em, 40%), 1fr); align-items: baseline; column-gap: var(--sp-4); }

/* ── the source: a path chip that opens the file (its path ellipsises at the START, so the file's own name stays in sight) ──── */
.ui-modhead__src {
  flex: 0 1 auto; min-width: min(8em, 100%); box-sizing: border-box; display: inline-flex; align-items: center; gap: var(--sp-2);
  height: calc(18px * var(--font-scale)); margin: 0; padding: 0 var(--sp-2);
  border: 1px solid color-mix(in srgb, var(--accent), transparent 70%); border-radius: var(--r-1);
  background: var(--accent-weak); color: var(--accent);
  font: var(--fw-regular) var(--fs-xs)/1 var(--font-mono); letter-spacing: 0; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.ui-modhead__src:hover { background: color-mix(in srgb, var(--accent-weak), var(--accent) 15%); }
.ui-modhead__src:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.ui-modhead__src-icon { flex: none; }
.ui-modhead__src-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: rtl; text-align: left; }
.ui-modhead__src-text > bdi { unicode-bidi: isolate; }

/* ── freshness and flags ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.ui-modhead__fresh { flex: none; color: var(--text-3); font-variant-numeric: tabular-nums; }
.ui-modhead__flags { flex: none; display: flex; align-items: center; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.ui-modhead__flag { display: flex; flex: none; }
/* a flag chip shows its words, as on the approved comp (provenance.html): the short glyph is the Provenance bar's narrow step only
   (base.css's svg.ui-icon outranks ui.css's .ui-pchip__glyph and draws it at every step; recorded as a core request on ui.css) */
.ui-modhead .ui-pchip__glyph { display: none; }
/* the last step of the meta line's fit: only the † chip is left, and it may ellipsise rather than spill out of the band */
.ui-modhead__meta[data-squeeze] .ui-modhead__flags, .ui-modhead__meta[data-squeeze] .ui-modhead__flag { flex: 0 1 auto; min-width: 0; }
.ui-modhead__meta[data-squeeze] .ui-pchip { max-width: 100%; }

/* ── the toolbar: the kit's, without its own row chrome (the band is the row) ─────────────────────────────────────────────── */
.ui-modhead > .ui-modhead__tools { flex: none; flex-wrap: nowrap; gap: var(--sp-2); min-height: 0; padding: 0; border: 0; }
.ui-modhead > .ui-modhead__tools > .ui-toolbar__left { flex: none; gap: var(--sp-2); }
.ui-modhead > .ui-modhead__tools > .ui-toolbar__right:empty { display: none; }
/* FIT (data-fit, set by modhead.js): short — the secondary actions that have an icon show the icon alone (their words stay the
   accessible name and become the tooltip); overflow — as short, and the secondary actions the title still needs room from wait in
   the "More actions" menu; tight — the primary action, when it has an icon, shows the icon alone too */
.ui-modhead:is([data-fit="short"], [data-fit="overflow"], [data-fit="tight"]) .ui-modhead__act--sec.has-icon .ui-btn__label,
.ui-modhead[data-fit="tight"] .ui-modhead__act--primary.has-icon .ui-btn__label { display: none; }
.ui-modhead:is([data-fit="short"], [data-fit="overflow"], [data-fit="tight"]) .ui-modhead__act--sec.has-icon,
.ui-modhead[data-fit="tight"] .ui-modhead__act--primary.has-icon { width: var(--btn-h); padding: 0; }

/* ── high contrast and forced colours: the hairline and the chip's frame become real lines ────────────────────────────────── */
:root[data-contrast="high"] .ui-modhead { border-bottom-color: var(--line-2); }
:root[data-contrast="high"] .ui-modhead__src { border-color: currentColor; }
@media (forced-colors: active) {
  .ui-modhead { border-bottom-color: CanvasText; }
  .ui-modhead__src { border-color: LinkText; color: LinkText; }
}