/* Monolith Studio TYPE SYSTEM - named text/style types (the Lego "types"). ONE definition per type so every
   element of that type looks the same; change the type here → every instance follows. Linked AFTER core/tokens.css
   (resolves var(--txt)/--accent/--low/--mono) and BEFORE the inline <style> (per-instance position/padding still win).
   Anchored on the shared type scale and established sidebar title.

   Migration is per-cluster: as each type lands here, the duplicated ad-hoc rules in <style> are trimmed to the type. */

/* TITLE: the standard page/stage title. Base = the sidebar h1 "Monolith Assembly Studio" (17px/600).
   Every title (sidebar, the four stage bars, the tree/orient/preview titles) is
   this one type so they all look the same. The MONOLITH brand span keeps its own .lockup type. Layout (the
   lockup-row flex/gap, absolute positioning) stays on the instance - the type is the text only. */
.t-title{ font-size:17px; font-weight:600; color:var(--txt); }

/* SECTION HEADER: 12px UPPERCASE / .04em / 700 / muted-gray. Section headers are muted-gray, NEVER purple,
   NEVER the title. The biggest single fold - 9 selectors spelled this identically; the only difference is 11 vs 12px
   (the --sm size variant). The existing selectors are grouped here so the look is single-sourced with zero markup churn;
   .t-section / .t-section--sm are the reusable classes for new elements. ── */
.t-section, .t-section--sm,
.sec h2, .preflight-sec .pft,
.steps li.stepgrp, .grpsec, table.bom th, .tg th.axg, .tg tr.sec th, .uihdr
  { font-weight:700; color:var(--low); text-transform:uppercase; letter-spacing:.04em; }
.t-section, .sec h2, .preflight-sec .pft { font-size:12px; }
.t-section--sm, .steps li.stepgrp, .grpsec, table.bom th, .tg th.axg, .tg tr.sec th, .uihdr { font-size:11px; }

/* KICKER: the accent-purple eyebrow. Kickers are accent purple / 600 / UPPERCASE / .08em,
   the OPPOSITE of the muted section header). The 700/.07em (.cfggh) drift snaps into the
   type. 11px = the --sm variant. ── */
.t-kicker, .t-kicker--sm,
.play .lbl .frac, #orLbl .frac, .cfggh
  { font-weight:600; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; }
.t-kicker, .play .lbl .frac, #orLbl .frac { font-size:12px; }
.t-kicker--sm, .cfggh { font-size:11px; }
/* PAGE EYEBROW: the wide-tracked 11px/.14em mono kicker over a page head. It used to live as a
   body.builderdeploy override that silently beat .t-kicker--sm's .08em - named here so the two are
   distinguishable types rather than a drift. Layout (the flex row + rule) stays on the instance. */
.t-kicker--page, #buildHd .k, #projHd .k, #delivHd .k, #guideHd .k
  { font:600 11px/1 var(--mono); color:var(--accent); text-transform:uppercase; letter-spacing:.14em; }

/* DANGER: destructive action. Red family at rest-tint var(--bad-rest)=#e8a09a, full red var(--bad) on hover.
   Reusable color type; the existing destructive buttons resolve the same rest-tint via var(--bad-rest). ── */
.danger, #orientBar #orRevert, #treeBar #tExit{ color:var(--bad-rest); }
/* body.stage-end #pvExitTop joins the hover list instead of respelling the red: at the end of a Builder
   stage the touch header's Exit wears exactly this, with no hover to reach it. See core/studio.css. */
.danger:hover, #orientBar #orRevert:hover, #treeBar #tExit:hover, body.stage-end #pvExitTop{ color:var(--bad); border-color:var(--bad); }
/* PRESSED - the level the family was missing. Without it .play button:active painted the red Exit purple. */
.danger:active, .danger.shortcut-pressed, #orientBar #orRevert:active, #treeBar #tExit:active
  { color:var(--bad); border-color:var(--bad); background:var(--bad-press); }

/* CARD SHELL: panel fill, hairline, 8px radius. Eight surfaces spelled this identically and three more
   spelled the --panel2 variant. .surface-card / .surface-card--sunken are the reusable classes; the existing
   selectors are grouped so the shell is single-sourced with zero markup churn. Elevation is TWO scales, not
   three: --elev for a resting card, --elev-float for anything that floats over content. ── */
.surface-card, .btile, .bomcat, #cfgBar, .chrome-question
  { background:var(--panel); border:1px solid var(--line); border-radius:8px; }
.surface-card--sunken, .chrome-choice-nest, .moreMenu
  { background:var(--panel2); border:1px solid var(--line); border-radius:8px; }

/* UNAVAILABLE is not one state. Eight opacity values (.3 .38 .4 .42 .45 .5 .55 .62) across five mechanisms
   collapse into four named treatments, each saying something different:
     inert            - exists, temporarily unavailable, no affordance
     ruled out        - a choice this configuration forbids (cursor says so)
     not applicable   - does not exist in this configuration at all
     out of sequence  - exists and is reachable, but it is not your turn yet
   Only the first is "disabled". Grouping the existing selectors here single-sources the value. ── */
.is-inert,
.studio-menu-btn:disabled, .command-palette-row.disabled, .studio-import-watch:disabled,
button.b:disabled, .vsep .pvbtn:disabled, .timeline-stage-arrows button:disabled,
.timeline-nav-picker:disabled, .timeline-stage-manage:disabled, .studio-context-menu button:disabled,
#filesSec .dlbtn:disabled, .play button:disabled, .dbtn:disabled, .shtoggle.disabled, .btile.locked
  { opacity:.42; cursor:default; }
.is-ruled-out, .project-import-mode button:disabled
  { color:rgba(255,255,255,.22); border-color:rgba(255,255,255,.06); cursor:not-allowed; }
.is-not-applicable{ width:0; opacity:0; }
.is-out-of-sequence{ filter:grayscale(.75) brightness(.62); }   /* .btile.seqlocked is NOT here: greying a whole tile greys the stage name and step count with it, and "later, not yet" still has to be readable. studio.css puts the filter on that tile's cover instead. */

/* FILLED PRIMARY: the ONE filled action per surface. 12 sites spelled this identically and disagreed only on
   the edge; the --primary-hi edge wins. Grouped here so the fill is single-sourced with zero markup churn;
   .is-primary is the reusable class for new elements. Geometry (padding, radius, which border sides exist)
   stays on the instance - the type owns the fill, the edge colour and the text colour only.
   .dok is matched as .dbtn.dok on purpose: this file is linked BEFORE chrome.css, so a bare .dok would tie
   with .dbtn on specificity and lose on order, leaving the dialog's primary button unfilled. chrome.ts's
   dialogButtonClass() always emits 'dbtn ' + role, so the pair is guaranteed. ── */
.is-primary,
.play button.primary, #orientBar #orOk, #operationBar #operationOk,
.btile.inprogress .pv, .btile:hover .pv, #filesSec .dlbtn,
#cfgBar .cfgdone, .timeline-view-as-panel .cfgdone, #treeBar .b.primary,
.material-library-actions .material-reference-save.is-dirty,
.dbtn.dok, .dlg .dbtn.dok, .dlg .dialog-save.is-dirty
  { background:var(--primary); border-color:var(--primary-hi); color:#fff; }

/* ── KEYCAP - the mono raised cap (3px bottom border, --code fill) for hotkey hints. 3 byte-identical blocks fold here;
   .kbd is the reusable class. On a filled-primary button the cap inverts to read on the purple fill. ── */
.kbd, .play button kbd, .viewfinder-bar .b kbd, #treeBar .b kbd, .bartop .b kbd
  { display:inline-flex; align-items:center; justify-content:center; min-width:21px; height:21px; padding:0 6px; margin-left:9px;
    background:var(--code); border:1px solid rgba(255,255,255,.16); border-bottom-width:3px; border-radius:4px;
    font:12px/1 var(--mono); color:var(--txt); box-shadow:0 1px 0 rgba(0,0,0,.4); }
.primary .kbd, .play button.primary kbd, #orientBar #orOk kbd, #operationBar #operationOk kbd, #treeBar .b.primary kbd
  { background:rgba(0,0,0,.3); border-color:rgba(255,255,255,.3); color:#fff; }
/* DEVICE-MODE variant (not viewport size): keycaps advertise keyboard hotkeys → hide them in touch mode (no keyboard).
   The global keydown handler stays bound (inert on touch); only the visual hint is gated. html.dev-touch is set
   synchronously by the head device-mode script, so there's no first-paint flash. (The .play .navbtn nav-glyph keycap is
   repurposed as the mobile nav arrow at small width → handled separately, not hidden here.) */
.dev-touch .bartop .b kbd, .dev-touch .viewfinder-bar .b kbd, .dev-touch #treeBar .b kbd { display:none; }
/* play/preview bar (.play isn't a .bartop, its buttons aren't .b) - hide its hotkey keycaps too, but KEEP the .navbtn
   ← → kbds: at narrow width those are restyled into the bare nav arrows (the button's only label) and read as
   directional icons on touch, not key hints. So exclude .navbtn, hide the rest (B/R/M/D/Space/A/Esc). */
.dev-touch .play button:not(.navbtn) kbd { display:none; }

/* ── META - 12px low-emphasis meta / counter text (var(--low)). The quiet line under a name, the crumbs, counts. ── */
.t-meta, .play .lbl2, .btile .meta, .crumbs, #treeTop .ttl .counts { font-size:12px; color:var(--low); }

/* ── MONO NAME - build / project / file names rendered mono (12px / 400 / var(--muted)). ── */
.t-mono-name, #buildTop #buildName, #projTop #projName, #delivTop #delivName { font-size:12px; font-weight:400; color:var(--muted); font-family:var(--mono); }

/* ── CONTROL - 15px/500 control-bar readout TEXT (the play/orient bar step label; tabular numerals for STEP X/Y). ── */
.t-control, .play .lbl, #orLbl, #orLbl b { font-size:15px; font-weight:500; color:var(--txt); font-variant-numeric:tabular-nums; }