/* ═══════════════════════════════════════════════════════════════════════════
   MUMS · Support Studio ▸ Standard & Training
   TEMPLATE ENGINE + TEMPLATE STUDIO — design system   (feature `tpx-1`)
   ───────────────────────────────────────────────────────────────────────────
   Two scopes live here and they never bleed into each other:

     .tcx-*   what a GROUP PAGE renders — the widget grid and every widget type
     .tcs-*   what the AUTHOR sees — the Template Studio (manager + builder)

   Plus a short tail of `.tc-*` overrides for the de-duplicated shell surfaces
   (provenance chip, breadcrumb crumbs, rail row) whose base rules live in
   training_collection.css.

   THEMING: this file uses ONLY --ss-* tokens, which enterprise_theme.css
   re-points per html[data-ss-theme]. That is what makes every surface below
   dual-theme without a single duplicated rule. Never hard-code a surface or
   text colour here; hard-code only the semantic accents (tone colours), which
   are identical in both themes by design.

   OVERFLOW CONTRACT: a widget is a fixed box whose BODY scrolls
   (.tcx-scroll). That is what lets an author place widgets freely without any
   of them growing into a neighbour. Below 980px — and inside the Studio's
   narrow device previews — the grid collapses to one column, placement is
   dropped in favour of reading order, and the bodies stop scrolling because
   there is no longer a box to overflow.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The one local token this layer owns ──────────────────────────────────
   --ss-muted is a shared Support Studio token and re-pointing it would
   repaint the whole shell (a guarded surface). But at the 9–11px sizes this
   layer uses for secondary labels it measures 4.07:1 on the light ramp —
   under WCAG AA for small text. --tcx-dim is therefore a LOCAL darkening,
   scoped to tpx-1 surfaces only: identical to --ss-muted on the dark ramp,
   a step darker on the light one. Nothing outside this file is affected.   */
:root { --tcx-dim: var(--ss-muted, #8b949e); }
html[data-ss-theme="light"] { --tcx-dim: #58616e; }

/* wik-1 · the second local token: INK ON A BRIGHT FILL. A lime/blue/green
   accent needs a near-black label, and the layer already darkens toward
   #0b1017 everywhere it derives an accent ink (see §7). Naming it once stops
   a second near-black being invented per widget — which is exactly what the
   first cut of the knowledge-base lane did (#06131f alongside #0b1017). It is
   deliberately the SAME value on both ramps: the fill it sits on is the
   accent, and the accent is bright in both. */
:root { --tcx-on-accent: #0b1017; }

/* ═══════════════════════════════════════════════════════════════════════
   1 · THE GRID
   ═══════════════════════════════════════════════════════════════════════ */
.tcx-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  padding: 16px 20px 24px;
}
.tcx-grid.wiki { max-width: 1320px; margin: 0 auto; }
.tcx-wiki { display: block; }

.tcx-w {
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
}
/* value widgets and section cards wear the card chrome; layout elements do not */
.tcx-w.tcx-val,
.tcx-w.tc-ms {
  background: var(--ss-surface2, rgba(255,255,255,.03));
  border: 1px solid var(--ss-border, rgba(255,255,255,.08));
}
.tcx-w.tcx-val:hover,
.tcx-w.tc-ms:hover { border-color: var(--ss-border2, rgba(255,255,255,.16)); }
.tcx-w.tcx-struct { background: transparent; border: 0; }

.tcx-w-body { padding: 12px 14px; flex: 1; min-height: 0; }
.tcx-w-body.tcx-static { padding: 0; display: flex; flex-direction: column; justify-content: center; }
.tcx-scroll { overflow: auto; }
.tcx-bare .tc-mf-lbl { display: none; }
.tcx-mut { opacity: .55; font-size: .9em; margin-right: 4px; }
.tcx-hint { font-size: 10.5px; color: var(--tcx-dim, #8b949e); margin-top: 5px; line-height: 1.45; }

/* thin scrollbars inside widgets — the same language as the rest of the studio */
.tcx-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.tcx-scroll::-webkit-scrollbar-thumb {
  background: var(--ss-border, rgba(255,255,255,.12)); border-radius: 8px;
}
.tcx-scroll::-webkit-scrollbar-thumb:hover { background: var(--tcx-dim, #8b949e); }
.tcx-scroll::-webkit-scrollbar-track { background: transparent; }

/* section cards keep the existing .tc-ms head, but the body must scroll */
.tcx-w.tc-ms > .tc-ms-body { flex: 1; min-height: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   2 · WIDGET TYPES
   ═══════════════════════════════════════════════════════════════════════ */

/* ── rich article / wiki body ───────────────────────────────────────── */
.tcx-rt { font-size: 12.5px; line-height: 1.65; color: var(--ss-text, #d0d8e4); }
.tcx-rt-p { margin: 0 0 10px; }
.tcx-rt-h { color: var(--ss-text, #e6edf3); font-weight: 800; line-height: 1.3; scroll-margin-top: 16px; }
.tcx-rt-h1 { font-size: 17px; margin: 4px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--ss-border, rgba(255,255,255,.08)); }
.tcx-rt-h2 { font-size: 14.5px; margin: 16px 0 8px; }
.tcx-rt-h3 { font-size: 12.5px; margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .05em; color: var(--tcx-dim, #8b949e); }
.tcx-rt-h4 { font-size: 12px; margin: 12px 0 6px; }
.tcx-rt-ul, .tcx-rt-ol { margin: 0 0 10px; padding-left: 20px; }
.tcx-rt-ul li, .tcx-rt-ol li { margin-bottom: 4px; }
.tcx-rt-q {
  margin: 0 0 10px; padding: 8px 14px;
  border-left: 3px solid var(--tc-accent, var(--ss-accent, #58a6ff));
  background: var(--ss-surface3, rgba(255,255,255,.04));
  border-radius: 0 8px 8px 0; color: var(--tcx-dim, #8b949e); font-style: italic;
}
.tcx-rt-hr { border: 0; border-top: 1px solid var(--ss-border, rgba(255,255,255,.1)); margin: 14px 0; }
.tcx-rt code, .tcx-code code {
  font-family: var(--ss-mono, monospace); font-size: .92em;
  background: var(--ss-surface3, rgba(255,255,255,.06));
  border: 1px solid var(--ss-border2, rgba(255,255,255,.06));
  border-radius: 5px; padding: 1px 5px;
}
.tcx-rt-pre, .tcx-code {
  margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; overflow: auto;
  background: var(--ss-surface3, rgba(255,255,255,.05));
  border: 1px solid var(--ss-border, rgba(255,255,255,.08));
}
.tcx-rt-pre code, .tcx-code code {
  background: none; border: 0; padding: 0; white-space: pre;
  font-size: 11.5px; line-height: 1.6; color: var(--ss-text, #d0d8e4);
}
.tcx-rt a { color: var(--ss-accent, #58a6ff); text-decoration: none; }
.tcx-rt a:hover { text-decoration: underline; }
.tcx-rt-img { max-width: 100%; height: auto; border-radius: 8px; margin: 6px 0; display: block; }
.tcx-mono, textarea.tcx-mono { font-family: var(--ss-mono, monospace); }

/* wiki cross-reference + resolved ID CODE token */
.tcx-xref {
  color: var(--ss-accent, #58a6ff); text-decoration: none;
  border-bottom: 1px dashed currentColor; cursor: pointer; background: none; border-top: 0; border-left: 0; border-right: 0; padding: 0;
  font: inherit;
}
.tcx-xref:hover { text-decoration: none; border-bottom-style: solid; }
.tcx-xref.missing { color: var(--ss-warn, #d29922); cursor: help; border-bottom-style: dotted; }
.tcx-code-val {
  background: color-mix(in srgb, var(--ss-cyan, #22d3ee) 14%, transparent);
  color: var(--ss-cyan, #22d3ee); border-radius: 4px; padding: 0 4px; font-weight: 700;
}
.tcx-code-val.missing {
  background: color-mix(in srgb, var(--ss-warn, #d29922) 14%, transparent);
  color: var(--ss-warn, #d29922);
}
@supports not (background: color-mix(in srgb, red 10%, blue)) {
  .tcx-code-val { background: rgba(34,211,238,.14); }
  .tcx-code-val.missing { background: rgba(210,153,34,.14); }
}

.tcx-rt-ed { display: flex; flex-direction: column; gap: 6px; }
.tcx-rt-hint { font-size: 10px; color: var(--tcx-dim, #8b949e); line-height: 1.7; }
.tcx-rt-hint code {
  font-family: var(--ss-mono, monospace); background: var(--ss-surface3, rgba(255,255,255,.06));
  border-radius: 4px; padding: 1px 4px; margin-right: 4px;
}
textarea.tc-med-rich, textarea.tc-med-code { font-family: var(--ss-mono, monospace); font-size: 11.5px; line-height: 1.6; }

/* ── headings / dividers / notes ─────────────────────────────────────── */
.tcx-head { display: flex; align-items: baseline; gap: 10px; padding: 4px 2px; scroll-margin-top: 16px; }
.tcx-head span { font-weight: 800; color: var(--ss-text, #e6edf3); letter-spacing: .01em; }
.tcx-head em { font-style: normal; font-size: 11px; color: var(--tcx-dim, #8b949e); }
.tcx-head.lvl1 span { font-size: 17px; }
.tcx-head.lvl2 span { font-size: 14px; }
.tcx-head.lvl3 span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--tcx-dim, #8b949e); }
.tcx-head.lvl1 { border-bottom: 1px solid var(--ss-border, rgba(255,255,255,.08)); padding-bottom: 8px; }
.tcx-div { height: 1px; background: var(--ss-border, rgba(255,255,255,.1)); align-self: center; width: 100%; }
.tcx-spacer { flex: 1; }
.tcx-note {
  padding: 10px 14px; border-radius: 10px;
  background: var(--ss-surface3, rgba(255,255,255,.04));
  border: 1px dashed var(--ss-border, rgba(255,255,255,.12));
}

/* ── on-this-page rail ───────────────────────────────────────────────── */
.tcx-toc {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px;
  background: var(--ss-surface2, rgba(255,255,255,.03));
  border: 1px solid var(--ss-border, rgba(255,255,255,.08));
  border-radius: 12px; height: 100%; overflow: auto;
}
.tcx-toc-h {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tcx-dim, #8b949e); margin-bottom: 6px;
}
.tcx-toc-a {
  font-size: 11.5px; color: var(--tcx-dim, #8b949e); text-decoration: none;
  padding: 4px 8px; border-radius: 6px; border-left: 2px solid transparent; line-height: 1.4;
}
.tcx-toc-a:hover { color: var(--ss-text, #e6edf3); background: var(--ss-surface3, rgba(255,255,255,.05)); border-left-color: var(--tc-accent, var(--ss-accent, #58a6ff)); }
.tcx-toc-a.lvl1 { font-weight: 700; color: var(--ss-text, #d0d8e4); }
.tcx-toc-a.lvl2 { padding-left: 18px; }
.tcx-toc-a.lvl3 { padding-left: 28px; font-size: 11px; }

/* ── tags · steps · stat · progress ──────────────────────────────────── */
.tcx-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tcx-tag {
  font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  color: var(--tc-accent, var(--ss-accent, #58a6ff));
  background: color-mix(in srgb, var(--tc-accent, #58a6ff) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tc-accent, #58a6ff) 32%, transparent);
}
@supports not (background: color-mix(in srgb, red 10%, blue)) {
  .tcx-tag { background: rgba(88,166,255,.12); border-color: rgba(88,166,255,.32); }
}

.tcx-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tcx-step { display: flex; gap: 10px; align-items: flex-start; }
.tcx-step-n {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800;
  color: var(--tc-accent, var(--ss-accent, #58a6ff));
  background: color-mix(in srgb, var(--tc-accent, #58a6ff) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tc-accent, #58a6ff) 34%, transparent);
}
@supports not (background: color-mix(in srgb, red 10%, blue)) {
  .tcx-step-n { background: rgba(88,166,255,.14); border-color: rgba(88,166,255,.34); }
}
.tcx-step-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tcx-step-t { font-size: 12px; font-weight: 700; color: var(--ss-text, #e6edf3); }
.tcx-step-d { font-size: 11.5px; color: var(--tcx-dim, #8b949e); line-height: 1.5; }

.tcx-stat { display: flex; flex-direction: column; gap: 2px; justify-content: center; height: 100%; }
.tcx-stat-v {
  font-size: 26px; font-weight: 800; line-height: 1.05; letter-spacing: -.02em;
  color: var(--tc-accent, var(--ss-accent, #58a6ff));
  display: flex; align-items: baseline; gap: 5px;
}
.tcx-stat-u { font-size: 12px; font-style: normal; font-weight: 700; color: var(--tcx-dim, #8b949e); }
.tcx-stat-c { font-size: 10.5px; color: var(--tcx-dim, #8b949e); line-height: 1.4; }

.tcx-prog { display: flex; flex-direction: column; gap: 6px; justify-content: center; height: 100%; }
.tcx-prog-bar {
  height: 8px; border-radius: 20px; overflow: hidden;
  background: var(--ss-surface3, rgba(255,255,255,.08));
  border: 1px solid var(--ss-border2, rgba(255,255,255,.06));
}
.tcx-prog-bar > span {
  display: block; height: 100%; border-radius: 20px;
  background: var(--tc-accent, var(--ss-accent, #58a6ff)); transition: width .25s ease;
}
.tcx-prog-meta { display: flex; align-items: baseline; gap: 8px; font-size: 11px; color: var(--tcx-dim, #8b949e); }
.tcx-prog-meta b { font-size: 13px; color: var(--ss-text, #e6edf3); }

/* ── quote / definition ─────────────────────────────────────────────── */
.tcx-quote {
  margin: 0; padding: 10px 14px; border-radius: 0 10px 10px 0;
  border-left: 3px solid var(--tc-accent, var(--ss-accent, #58a6ff));
  background: var(--ss-surface3, rgba(255,255,255,.04));
  display: flex; flex-direction: column; gap: 6px;
}
.tcx-quote-t { font-size: 12.5px; line-height: 1.6; color: var(--ss-text, #d0d8e4); }
.tcx-quote-by { font-size: 10.5px; color: var(--tcx-dim, #8b949e); font-style: normal; }

/* ── callouts ───────────────────────────────────────────────────────── */
.tcx-callout {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--tcx-tone, #58a6ff) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tcx-tone, #58a6ff) 30%, transparent);
  border-left: 3px solid var(--tcx-tone, #58a6ff);
}
@supports not (background: color-mix(in srgb, red 10%, blue)) {
  .tcx-callout { background: rgba(88,166,255,.1); border-color: rgba(88,166,255,.3); }
}
.tcx-callout > i { color: var(--tcx-tone, #58a6ff); font-size: 14px; margin-top: 1px; flex-shrink: 0; }
.tcx-callout-b { font-size: 12px; line-height: 1.6; color: var(--ss-text, #d0d8e4); min-width: 0; }

/* ── documents / videos ─────────────────────────────────────────────── */
.tcx-doc, .tcx-vid {
  display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 8px;
  text-decoration: none; color: var(--ss-text, #d0d8e4);
  background: var(--ss-surface3, rgba(255,255,255,.03));
  border: 1px solid var(--ss-border2, rgba(255,255,255,.06));
  margin-bottom: 6px; font-size: 12px;
}
.tcx-doc:hover, .tcx-vid:hover { border-color: var(--tc-accent, var(--ss-accent, #58a6ff)); }
.tcx-doc > i { color: var(--tc-accent, var(--ss-accent, #58a6ff)); font-size: 14px; }
.tcx-doc-n, .tcx-vid-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcx-doc-x {
  font-size: 9px; font-weight: 800; letter-spacing: .05em; padding: 1px 6px; border-radius: 4px;
  color: var(--tcx-dim, #8b949e); background: var(--ss-surface2, rgba(255,255,255,.05));
  border: 1px solid var(--ss-border, rgba(255,255,255,.08));
}
.tcx-vid-play {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 10px;
  color: #fff; background: var(--ss-danger, #f85149);
}

/* ── images ─────────────────────────────────────────────────────────── */
.tcx-fig { margin: 0; display: flex; flex-direction: column; gap: 6px; height: 100%; min-height: 0; }
.tcx-img-a {
  display: block; flex: 1; min-height: 0; border: 0; padding: 0; background: none; cursor: zoom-in;
  border-radius: 10px; overflow: hidden;
}
.tcx-img { width: 100%; height: 100%; min-height: 90px; display: block; background: var(--ss-surface3, rgba(255,255,255,.04)); }
.tcx-cap { font-size: 10.5px; color: var(--tcx-dim, #8b949e); line-height: 1.4; }
.tcx-imgwarn {
  font-size: 10.5px; line-height: 1.5; padding: 7px 9px; border-radius: 8px;
  color: var(--ss-warn, #d29922);
  background: rgba(210,153,34,.1); border: 1px solid rgba(210,153,34,.28);
}
.tcx-gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.tcx-gcell {
  border: 1px solid var(--ss-border, rgba(255,255,255,.08)); border-radius: 9px; overflow: hidden;
  background: var(--ss-surface3, rgba(255,255,255,.04)); padding: 0; cursor: zoom-in;
  display: flex; flex-direction: column;
}
.tcx-gcell:hover { border-color: var(--tc-accent, var(--ss-accent, #58a6ff)); }
.tcx-gcell img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.tcx-gcap {
  font-size: 10px; color: var(--tcx-dim, #8b949e); padding: 5px 7px; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tcx-imged, .tcx-ibed { display: flex; flex-direction: column; gap: 7px; }
.tcx-ed-row { display: flex; gap: 7px; align-items: center; }
.tcx-ed-row > .tc-input { flex: 1; min-width: 0; }
.tcx-probe { flex-shrink: 0; white-space: nowrap; }
.tcx-probe-out {
  display: none; font-size: 10.5px; line-height: 1.5; padding: 7px 9px; border-radius: 8px;
  color: var(--tcx-dim, #8b949e);
  background: var(--ss-surface3, rgba(255,255,255,.04));
  border: 1px solid var(--ss-border2, rgba(255,255,255,.06));
}
.tcx-probe-out.show { display: block; }
.tcx-probe-out.good { color: var(--ss-green, #3fb950); background: rgba(63,185,80,.1); border-color: rgba(63,185,80,.28); }
.tcx-probe-out.warn { color: var(--ss-warn, #d29922); background: rgba(210,153,34,.1); border-color: rgba(210,153,34,.28); }
.tcx-probe-out.bad  { color: var(--ss-danger, #f85149); background: rgba(248,81,73,.1); border-color: rgba(248,81,73,.28); }

/* ── infobox (encyclopedia) ─────────────────────────────────────────── */
.tcx-ib {
  display: flex; flex-direction: column; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--ss-border, rgba(255,255,255,.1));
  background: var(--ss-surface3, rgba(255,255,255,.03));
}
.tcx-ib-head {
  padding: 8px 12px; font-size: 11.5px; font-weight: 800; text-align: center;
  color: var(--tc-accent, var(--ss-accent, #58a6ff));
  background: color-mix(in srgb, var(--tc-accent, #58a6ff) 12%, transparent);
  border-bottom: 1px solid var(--ss-border, rgba(255,255,255,.08));
}
@supports not (background: color-mix(in srgb, red 10%, blue)) {
  .tcx-ib-head { background: rgba(88,166,255,.12); }
}
.tcx-ib-img { padding: 10px; }
.tcx-ib-img img { width: 100%; border-radius: 7px; display: block; }
.tcx-ib-cap { font-size: 10px; color: var(--tcx-dim, #8b949e); text-align: center; padding: 0 10px 8px; }
.tcx-ib-rows { display: flex; flex-direction: column; }
.tcx-ib-row {
  display: grid; grid-template-columns: 40% 1fr; gap: 8px; padding: 6px 12px;
  border-top: 1px solid var(--ss-border2, rgba(255,255,255,.05)); font-size: 11.5px;
}
.tcx-ib-k { color: var(--tcx-dim, #8b949e); font-weight: 700; }
.tcx-ib-v { color: var(--ss-text, #d0d8e4); word-break: break-word; }

/* ── responsive collapse ────────────────────────────────────────────── */
/* Two triggers, same result: the real viewport getting narrow, and the
   Studio's device preview being narrow inside a wide viewport (.tcx-narrow,
   set on the preview frame). Authored placement is dropped in favour of
   reading order — a 3-column widget at 430px would be unreadable. */
@media (max-width: 980px) {
  .tcx-grid { grid-template-rows: none !important; padding: 12px 14px 20px; }
  .tcx-grid > .tcx-w { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .tcx-scroll { overflow: visible; }
  .tcx-w { min-height: 60px; }
  .tcx-img { min-height: 160px; }
}
.tcx-narrow .tcx-grid { grid-template-rows: none !important; }
.tcx-narrow .tcx-grid > .tcx-w { grid-column: 1 / -1 !important; grid-row: auto !important; }
.tcx-narrow .tcx-scroll { overflow: visible; }
.tcx-narrow .tcx-w { min-height: 60px; }

/* ═══════════════════════════════════════════════════════════════════════
   3 · TEMPLATE STUDIO — manager
   ═══════════════════════════════════════════════════════════════════════ */
.tcs-mgr-top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.tcs-mgr-top .tc-tpick-hint { flex: 1; margin: 0; }
.tcs-mgr-list { display: flex; flex-direction: column; gap: 8px; }
.tcs-row {
  display: flex; align-items: center; gap: 13px; padding: 12px 14px; border-radius: 11px;
  background: var(--ss-surface2, rgba(255,255,255,.03));
  border: 1px solid var(--ss-border, rgba(255,255,255,.08));
}
.tcs-row:hover { border-color: var(--ss-border2, rgba(255,255,255,.18)); }
.tcs-row-ic {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 16px; border: 1px solid;
}
.tcs-row-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tcs-row-name { font-size: 13.5px; font-weight: 800; color: var(--ss-text, #e6edf3); }
.tcs-row-name em { font-style: normal; font-size: 10px; color: var(--tcx-dim, #8b949e); font-weight: 700; }
.tcs-row-sub { font-size: 10.5px; color: var(--tcx-dim, #8b949e); line-height: 1.4; }
.tcs-row-tabs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.tcs-row-tab {
  display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 700;
  padding: 2px 8px; border-radius: 20px; color: var(--tcx-dim, #8b949e);
  background: var(--ss-surface3, rgba(255,255,255,.05));
  border: 1px solid var(--ss-border2, rgba(255,255,255,.06));
}
.tcs-row-tab.wiki { color: var(--ss-purple, #a25ddc); border-color: rgba(162,93,220,.3); }
.tcs-row-act { display: flex; gap: 6px; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   4 · TEMPLATE STUDIO — builder
   ═══════════════════════════════════════════════════════════════════════ */
.tcs-ov {
  position: fixed; inset: 0; z-index: 12000;
  background: var(--ss-bg, #010409);
  font-family: var(--ss-font, 'Segoe UI', system-ui, sans-serif);
  color: var(--ss-text, #d0d8e4);
}
.tcs { position: absolute; inset: 0; display: flex; flex-direction: column; --tcs-accent: #22d3ee; }

.tcs-top {
  flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--ss-surface, #0d1117);
  border-bottom: 1px solid var(--ss-border, rgba(255,255,255,.09));
}
.tcs-brand {
  display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800;
  letter-spacing: .02em; color: var(--ss-text, #e6edf3); white-space: nowrap;
}
.tcs-brand i { color: var(--tcs-accent); }
.tcs-idbits { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; max-width: 720px; }
.tcs-name, .tcs-desc {
  min-width: 0; font: inherit; padding: 7px 10px; border-radius: 8px;
  background: var(--ss-surface2, rgba(255,255,255,.04));
  border: 1px solid var(--ss-border, rgba(255,255,255,.1));
  color: var(--ss-text, #e6edf3);
}
.tcs-name { flex: 0 0 240px; font-weight: 700; font-size: 12.5px; }
.tcs-desc { flex: 1; font-size: 11.5px; }
.tcs-name:focus, .tcs-desc:focus { outline: none; border-color: var(--tcs-accent); }
.tcs-iconbtn, .tcs-swatch {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 13px;
  background: var(--ss-surface2, rgba(255,255,255,.04));
  border: 1px solid var(--ss-border, rgba(255,255,255,.1));
  color: var(--tcs-accent);
}
.tcs-iconbtn:hover, .tcs-swatch:hover { border-color: var(--tcs-accent); }
.tcs-top-sp { flex: 1; }

.tcs-seg {
  display: inline-flex; padding: 3px; gap: 3px; border-radius: 9px; flex-shrink: 0;
  background: var(--ss-surface2, rgba(255,255,255,.05));
  border: 1px solid var(--ss-border, rgba(255,255,255,.08));
}
.tcs-segb {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 7px;
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 700;
  color: var(--tcx-dim, #8b949e);
}
.tcs-segb:hover { color: var(--ss-text, #e6edf3); }
.tcs-segb.active { background: var(--ss-surface3, rgba(255,255,255,.09)); color: var(--ss-text, #e6edf3); }
.tcs-seg.sm .tcs-segb { padding: 4px 10px; font-size: 10.5px; }
.tcs .tc-btn.primary.lit { box-shadow: 0 0 0 3px color-mix(in srgb, var(--tcs-accent) 30%, transparent); }
@supports not (box-shadow: 0 0 0 3px color-mix(in srgb, red 30%, blue)) {
  .tcs .tc-btn.primary.lit { box-shadow: 0 0 0 3px rgba(34,211,238,.3); }
}

.tcs-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 268px minmax(0, 1fr) 316px; }
.tcs-left, .tcs-right {
  min-height: 0; overflow-y: auto; display: flex; flex-direction: column;
  background: var(--ss-surface, #0d1117);
}
.tcs-left { border-right: 1px solid var(--ss-border, rgba(255,255,255,.09)); }
.tcs-right { border-left: 1px solid var(--ss-border, rgba(255,255,255,.09)); }

.tcs-sec { padding: 12px 13px; border-bottom: 1px solid var(--ss-border2, rgba(255,255,255,.05)); }
.tcs-sec.grow { flex: 1; min-height: 0; }
.tcs-sec-h {
  display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
  color: var(--tcx-dim, #8b949e);
}
.tcs-sec-h i { font-size: 11px; color: var(--tcs-accent); }
.tcs-sec-act { margin-left: auto; display: flex; gap: 3px; }
.tcs-note { font-size: 10.5px; color: var(--tcx-dim, #8b949e); line-height: 1.5; margin-top: 9px; }
.tcs-note.sp { color: var(--ss-cyan, #22d3ee); }
.tcs-note b { color: var(--ss-text, #d0d8e4); }

/* pages rail */
.tcs-pages { display: flex; flex-direction: column; gap: 4px; }
.tcs-page {
  display: flex; align-items: center; gap: 5px; padding: 5px 6px; border-radius: 8px; cursor: pointer;
  border: 1px solid transparent; background: var(--ss-surface2, rgba(255,255,255,.03));
}
.tcs-page:hover { border-color: var(--ss-border, rgba(255,255,255,.12)); }
.tcs-page.active { border-color: var(--tcs-accent); background: var(--ss-surface3, rgba(255,255,255,.07)); }
.tcs-page-ic {
  width: 26px; height: 26px; flex-shrink: 0; border-radius: 7px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
  color: var(--tcs-accent); background: var(--ss-surface3, rgba(255,255,255,.06));
  border: 1px solid var(--ss-border2, rgba(255,255,255,.06));
}
.tcs-page-in {
  flex: 1; min-width: 0; font: inherit; font-size: 11.5px; font-weight: 700;
  background: none; border: 1px solid transparent; border-radius: 5px; padding: 3px 5px;
  color: var(--ss-text, #e6edf3);
}
.tcs-page-in:focus { outline: none; border-color: var(--tcs-accent); background: var(--ss-bg, #010409); }
.tcs-page-kind {
  font-size: 8.5px; font-weight: 800; letter-spacing: .06em; padding: 2px 5px; border-radius: 4px;
  cursor: pointer; flex-shrink: 0;
  color: var(--tcx-dim, #8b949e); background: var(--ss-surface3, rgba(255,255,255,.06));
  border: 1px solid var(--ss-border2, rgba(255,255,255,.06));
}
.tcs-page-kind.wiki { color: var(--ss-purple, #a25ddc); border-color: rgba(162,93,220,.35); }
.tcs-page-mv { display: none; gap: 1px; flex-shrink: 0; }
.tcs-page:hover .tcs-page-mv, .tcs-page.active .tcs-page-mv { display: flex; }

/* palette */
.tcs-pal { display: flex; flex-direction: column; gap: 4px; }
.tcs-pal-cat {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tcx-dim, #8b949e); opacity: .75; margin: 8px 0 3px;
}
.tcs-pal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.tcs-pal-b {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 9px 5px 8px; border-radius: 8px; cursor: pointer; text-align: center;
  background: var(--ss-surface2, rgba(255,255,255,.03));
  border: 1px solid var(--ss-border2, rgba(255,255,255,.06));
  color: var(--tcx-dim, #8b949e); font: inherit;
}
.tcs-pal-b:hover { border-color: var(--tcs-accent); color: var(--ss-text, #e6edf3); background: var(--ss-surface3, rgba(255,255,255,.06)); }
.tcs-pal-b i { font-size: 14px; color: var(--tcs-accent); }
.tcs-pal-b span { font-size: 9.5px; font-weight: 700; line-height: 1.25; }
.tcs-pal-tag {
  position: absolute; top: 3px; right: 3px; font-style: normal;
  font-size: 7.5px; font-weight: 800; letter-spacing: .04em; padding: 1px 3px; border-radius: 3px;
  color: var(--ss-cyan, #22d3ee); background: rgba(34,211,238,.14);
}
.tcs-pal-tag.wiki { color: var(--ss-purple, #a25ddc); background: rgba(162,93,220,.16); right: auto; left: 3px; }

/* stage */
.tcs-stage { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--ss-bg, #010409); }
.tcs-stage-bar {
  flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  border-bottom: 1px solid var(--ss-border2, rgba(255,255,255,.05));
  background: var(--ss-surface, #0d1117);
}
.tcs-stage-t { display: flex; align-items: baseline; gap: 8px; font-size: 12px; font-weight: 800; color: var(--ss-text, #e6edf3); }
.tcs-stage-t i { color: var(--tcs-accent); }
.tcs-stage-t em { font-style: normal; font-size: 10px; font-weight: 600; color: var(--tcx-dim, #8b949e); }
.tcs-dev { display: inline-flex; gap: 3px; }
.tcs-devb {
  width: 28px; height: 26px; border-radius: 7px; cursor: pointer; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ss-surface2, rgba(255,255,255,.04));
  border: 1px solid var(--ss-border2, rgba(255,255,255,.06));
  color: var(--tcx-dim, #8b949e);
}
.tcs-devb:hover { color: var(--ss-text, #e6edf3); }
.tcs-devb.active { border-color: var(--tcs-accent); color: var(--tcs-accent); }
.tcs.previewing [data-datamode] { display: inline-flex; }
.tcs:not(.previewing) [data-datamode] { display: none; }
.tcs.previewing [data-act="tidy"] { display: none; }

.tcs-stage-scroll { flex: 1; min-height: 0; overflow: auto; padding: 16px; }
.tcs-frame { margin: 0 auto; }
.tcs-frame.framed {
  border: 1px solid var(--ss-border, rgba(255,255,255,.12));
  border-radius: 14px; background: var(--ss-surface, #0d1117); overflow: hidden;
  box-shadow: 0 22px 60px -28px rgba(0,0,0,.8);
}

/* canvas */
.tcs-canvas {
  position: relative; display: grid; gap: 12px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  min-height: 420px; padding: 12px;
  border-radius: 12px;
  background: var(--ss-surface, #0d1117);
  border: 1px solid var(--ss-border2, rgba(255,255,255,.05));
}
.tcs-guides {
  position: absolute; inset: 12px; display: grid; gap: 12px;
  grid-template-columns: repeat(12, minmax(0, 1fr)); pointer-events: none; z-index: 0;
}
.tcs-guides i {
  border-left: 1px dashed var(--ss-border2, rgba(255,255,255,.06));
  border-right: 1px dashed var(--ss-border2, rgba(255,255,255,.06));
}
.tcs-cw {
  position: relative; z-index: 1; min-width: 0; min-height: 0; overflow: hidden; cursor: grab;
  display: flex; flex-direction: column; gap: 5px; padding: 8px 9px; border-radius: 9px;
  background: var(--ss-surface2, rgba(255,255,255,.05));
  border: 1px solid var(--ss-border, rgba(255,255,255,.12));
  user-select: none; touch-action: none;
}
.tcs-cw:hover { border-color: var(--tcx-dim, #8b949e); }
.tcs-cw.sel { border-color: var(--tcs-accent); box-shadow: 0 0 0 1px var(--tcs-accent) inset; }
.tcs-cw.dragging { cursor: grabbing; opacity: .85; }
.tcs-cw.resizing { opacity: .85; }
.tcs-cw-h { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 11px; }
.tcs-cw-h i { color: var(--tcs-accent); font-size: 11px; flex-shrink: 0; }
.tcs-cw-h b { font-weight: 700; color: var(--ss-text, #e6edf3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcs-cw-h em { font-style: normal; font-size: 9.5px; color: var(--tcx-dim, #8b949e); white-space: nowrap; }
.tcs-cw-dim {
  margin-left: auto; font-size: 9px; font-weight: 800; color: var(--tcx-dim, #8b949e);
  background: var(--ss-surface3, rgba(255,255,255,.07)); border-radius: 4px; padding: 1px 5px; flex-shrink: 0;
}
.tcs-cw-fields { display: flex; flex-wrap: wrap; gap: 4px; overflow: hidden; }
.tcs-cw-f {
  display: inline-flex; align-items: center; gap: 4px; font-size: 9.5px;
  padding: 2px 6px; border-radius: 5px; color: var(--tcx-dim, #8b949e);
  background: var(--ss-surface3, rgba(255,255,255,.05));
  border: 1px solid var(--ss-border2, rgba(255,255,255,.05));
}
.tcs-rs {
  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize;
  background:
    linear-gradient(135deg, transparent 50%, var(--tcx-dim, #8b949e) 50%, var(--tcx-dim, #8b949e) 60%, transparent 60%,
                    transparent 70%, var(--tcx-dim, #8b949e) 70%, var(--tcx-dim, #8b949e) 80%, transparent 80%);
  border-bottom-right-radius: 9px; opacity: .55;
}
.tcs-cw:hover .tcs-rs, .tcs-cw.sel .tcs-rs { opacity: 1; }
.tcs-canvas-empty {
  grid-column: 1 / -1; grid-row: 1 / span 6; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  color: var(--tcx-dim, #8b949e); text-align: center; padding: 20px;
}
.tcs-canvas-empty i { font-size: 26px; opacity: .4; }
.tcs-canvas-empty b { font-size: 13px; color: var(--ss-text, #e6edf3); }
.tcs-canvas-empty span { font-size: 11px; max-width: 340px; line-height: 1.5; }

/* preview */
.tcs-preview { background: var(--ss-surface, #0d1117); border-radius: 12px; overflow: hidden; }
.tcs-pv-note {
  font-size: 11px; line-height: 1.5; padding: 9px 14px; color: var(--tcx-dim, #8b949e);
  background: var(--ss-surface2, rgba(255,255,255,.03));
  border-bottom: 1px solid var(--ss-border2, rgba(255,255,255,.05));
}
.tcs-pv-note i { color: var(--tcs-accent); margin-right: 6px; }
.tcs-pv-note b { color: var(--ss-text, #d0d8e4); }
.tcs-probe-host { visibility: hidden; pointer-events: none; }

/* inspector fields */
.tcs-f { display: flex; flex-direction: column; gap: 4px; margin-bottom: 9px; }
.tcs-f > span {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tcx-dim, #8b949e);
}
.tcs-f input, .tcs-f select, .tcs-f textarea {
  font: inherit; font-size: 11.5px; padding: 6px 9px; border-radius: 7px; width: 100%;
  background: var(--ss-surface3, rgba(255,255,255,.05));
  border: 1px solid var(--ss-border, rgba(255,255,255,.1));
  color: var(--ss-text, #e6edf3);
}
.tcs-f textarea { resize: vertical; line-height: 1.5; }
.tcs-f input:focus, .tcs-f select:focus, .tcs-f textarea:focus { outline: none; border-color: var(--tcs-accent); }
.tcs-f.sm > span { font-size: 8.5px; }
.tcs-f.sm input { padding: 5px 6px; text-align: center; }
.tcs-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tcs-chk { display: flex; align-items: flex-start; gap: 7px; font-size: 11px; color: var(--tcx-dim, #8b949e); margin-bottom: 9px; line-height: 1.4; }
.tcs-chk input { margin-top: 1px; }
.tcs-wbtns { display: flex; flex-wrap: wrap; gap: 5px; }
.tcs-pickbtn {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 7px; cursor: pointer;
  font: inherit; font-size: 11.5px; color: var(--ss-text, #e6edf3);
  background: var(--ss-surface3, rgba(255,255,255,.05));
  border: 1px solid var(--ss-border, rgba(255,255,255,.1));
}
.tcs-pickbtn:hover { border-color: var(--tcs-accent); }
.tcs-pickbtn i { color: var(--tcs-accent); }

.tcs-flds { display: flex; flex-direction: column; gap: 5px; }
.tcs-fld {
  display: grid; grid-template-columns: 1fr; gap: 4px; padding: 7px; border-radius: 8px;
  background: var(--ss-surface2, rgba(255,255,255,.03));
  border: 1px solid var(--ss-border2, rgba(255,255,255,.06));
}
.tcs-fld input, .tcs-fld select {
  font: inherit; font-size: 11px; padding: 5px 7px; border-radius: 6px; width: 100%;
  background: var(--ss-surface3, rgba(255,255,255,.05));
  border: 1px solid var(--ss-border, rgba(255,255,255,.1));
  color: var(--ss-text, #e6edf3);
}
.tcs-fld input:focus, .tcs-fld select:focus { outline: none; border-color: var(--tcs-accent); }
.tcs-fld-mv { display: flex; gap: 2px; justify-content: flex-end; }

/* pop-overs */
.tcs-pop {
  position: fixed; z-index: 12100; padding: 10px; border-radius: 11px;
  background: var(--ss-surface2, #161b22);
  border: 1px solid var(--ss-border, rgba(255,255,255,.14));
  box-shadow: 0 18px 48px -18px rgba(0,0,0,.85);
}
.tcs-pop-h {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tcx-dim, #8b949e); margin-bottom: 8px;
}
.tcs-pop-icons { display: grid; grid-template-columns: repeat(5, 30px); gap: 5px; }
.tcs-pop-ic {
  width: 30px; height: 30px; border-radius: 7px; cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ss-surface3, rgba(255,255,255,.05));
  border: 1px solid var(--ss-border2, rgba(255,255,255,.06));
  color: var(--tcx-dim, #8b949e);
}
.tcs-pop-ic:hover { color: var(--ss-text, #e6edf3); border-color: var(--tcx-dim, #8b949e); }
.tcs-pop-ic.on { color: var(--tcs-accent); border-color: var(--tcs-accent); }
.tcs-pop-colors { display: grid; grid-template-columns: repeat(6, 24px); gap: 6px; }
.tcs-pop-c { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.tcs-pop-c.on { border-color: var(--ss-text, #e6edf3); }

/* narrow builder — the rails stack under the stage rather than crushing it */
@media (max-width: 1180px) {
  .tcs-body { grid-template-columns: 220px minmax(0, 1fr) 268px; }
  .tcs-name { flex-basis: 170px; }
  .tcs-desc { display: none; }
}
@media (max-width: 900px) {
  .tcs-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(240px, 1fr) auto; }
  .tcs-left, .tcs-right { max-height: 260px; border: 0; border-bottom: 1px solid var(--ss-border, rgba(255,255,255,.09)); }
  .tcs-pal-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════
   5 · SHELL DE-DUPLICATION  (tpx-1)
   Overrides for the surfaces whose base rules live in
   training_collection.css. Kept here so the whole tpx-1 change reads as one
   file rather than a scatter of one-line edits.
   ═══════════════════════════════════════════════════════════════════════ */

/* breadcrumb — the ONE place the location is written; crumbs navigate */
#tc-canvas-path { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.tc-crumb {
  display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: inherit;
  background: none; border: 0; padding: 1px 3px; border-radius: 5px;
  color: var(--tcx-dim, #8b949e); cursor: default; max-width: 340px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
button.tc-crumb { cursor: pointer; }
button.tc-crumb:hover { color: var(--ss-accent, #58a6ff); background: var(--ss-surface2, rgba(255,255,255,.05)); }
.tc-crumb.cur { color: var(--ss-text, #d0d8e4); font-weight: 700; }
.tc-crumb-sep { color: var(--tcx-dim, #8b949e); opacity: .45; }

/* rail row — description instead of the old "N series · … modules" */
.tc-group-count {
  flex-shrink: 0; min-width: 20px; text-align: center;
  font-size: 9.5px; font-weight: 800; padding: 2px 6px; border-radius: 20px;
  color: var(--tc-accent, var(--ss-accent, #58a6ff));
  background: var(--ss-surface3, rgba(255,255,255,.06));
  border: 1px solid var(--ss-border2, rgba(255,255,255,.08));
}

/* hero — folders now sit on the right of the identity row */
.tc-gp-id > .tc-gp-meta { flex: 1; }
.tc-gp-id > .tc-gp-folders { margin-left: auto; flex-shrink: 0; }

/* provenance chip — replaces the full-width linked-group ribbon */
.tc-src-chip {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; margin-left: 9px;
  font: inherit; font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
  padding: 2px 9px; border-radius: 20px; cursor: pointer; max-width: 260px;
  color: var(--ss-accent, #58a6ff);
  background: var(--ss-surface2, rgba(255,255,255,.04));
  border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 34%, transparent);
}
@supports not (border-color: color-mix(in srgb, red 30%, blue)) {
  .tc-src-chip { border-color: rgba(88,166,255,.34); }
}
.tc-src-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-src-chip i { font-size: 9px; flex-shrink: 0; }
.tc-src-chip:hover { background: var(--ss-surface3, rgba(255,255,255,.08)); }
.tc-src-chip.orphan { color: var(--ss-warn, #d29922); border-color: rgba(210,153,34,.45); background: rgba(210,153,34,.1); }

.tc-src-pop { min-width: 300px; max-width: 380px; }
.tc-src-pop-b { padding: 9px 12px 11px; display: flex; flex-direction: column; gap: 6px; }
.tc-src-pop-row { display: flex; align-items: baseline; gap: 10px; font-size: 11px; }
.tc-src-pop-row > span:first-child {
  flex: 0 0 96px; color: var(--tcx-dim, #8b949e); font-size: 9.5px;
  font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
}
.tc-src-pop-row b { color: var(--ss-text, #e6edf3); font-weight: 700; word-break: break-word; }
.tc-src-pop-row.codes { align-items: flex-start; }
.tc-src-pop-row .tc-src-codes { display: flex; flex-wrap: wrap; gap: 4px; }
.tc-src-pop-note {
  font-size: 10.5px; line-height: 1.5; color: var(--tcx-dim, #8b949e);
  padding-top: 7px; border-top: 1px solid var(--ss-border2, rgba(255,255,255,.06));
}
.tc-src-pop.orphan .tc-ctx-head { color: var(--ss-warn, #d29922); }

/* page name beside the template chip in the meta bar */
.tc-main-pagename {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; color: var(--tcx-dim, #8b949e);
}
.tc-main-pagename i { color: var(--tc-accent, var(--ss-accent, #58a6ff)); font-size: 10px; }

/* picker: page-kind marker */
.tc-tpick-kind {
  font-size: 8px; font-weight: 800; letter-spacing: .06em; padding: 1px 4px; border-radius: 3px;
  color: var(--ss-purple, #a25ddc); background: rgba(162,93,220,.16); margin-left: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   6 · LIGHT-RAMP CONTRAST REPAIRS
   Measured with the full alpha stack composited to the page canvas (taking
   the first non-transparent ancestor as opaque reports nonsense on these
   rgba-over-rgba surfaces). Three labels came out under WCAG AA 4.5:1 for
   small text on the light ramp. Each is repaired HERE — additively, scoped
   to this layer — rather than by re-pointing a shared Support Studio token,
   which would repaint guarded surfaces well outside Standard & Training.
   ═══════════════════════════════════════════════════════════════════════ */

/* Every field label on a group page, and the rail's group description.
   SPECIFICITY NOTE — enterprise_theme.css is an UNTOUCHABLE ZONE (MACE
   approval required) and loads LAST, carrying
   `html[data-ss-theme="light"] .tc-mf-lbl { color: var(--ss-muted) }` at
   (0,2,1). Overriding it additively therefore needs (0,3,1) here, not a
   token edit and certainly not a hand-edit of the guarded generated file. */
html[data-ss-theme="light"] .tcx-w .tc-mf-lbl,
html[data-ss-theme="light"] .tcx-grid .tc-mf-lbl,
.tcx-w .tc-mf-lbl,
.tcx-grid .tc-mf-lbl { color: var(--tcx-dim, #8b949e); }

html[data-ss-theme="light"] .tc-group-btn .tc-group-sub,
html[data-ss-theme="light"] #left-panel-training_collection .tc-group-sub,
.tc-group-btn .tc-group-sub { color: var(--tcx-dim, #8b949e); }

/* Tag chips take the GROUP's accent, and a saturated accent on a pale tint
   measured 2.35:1. Darken the ink toward the page's own near-black while the
   accent keeps carrying the identity through the border and fill. */
html[data-ss-theme="light"] .tcx-tag {
  color: color-mix(in srgb, var(--tc-accent, #58a6ff) 58%, #0b1017);
  border-color: color-mix(in srgb, var(--tc-accent, #58a6ff) 46%, transparent);
}
html[data-ss-theme="light"] .tcx-stat-v,
html[data-ss-theme="light"] .tcx-step-n {
  color: color-mix(in srgb, var(--tc-accent, #58a6ff) 62%, #0b1017);
}
/* The infobox head sits on a 12% accent FILL, so it needs the extra step. */
html[data-ss-theme="light"] .tcx-ib .tcx-ib-head {
  color: color-mix(in srgb, var(--tc-accent, #58a6ff) 48%, #0b1017);
}

/* Page-tab subtitles now carry the template's own tab descriptions, so they
   are read, not decoration. Same (0,3,1) rule as the labels above. */
html[data-ss-theme="light"] .tc-gp-tabs .tc-gp-tab-sub,
.tc-gp-tabs .tc-gp-tab-sub { color: var(--tcx-dim, #8b949e); }

/* ── The rest of the sweep ────────────────────────────────────────────────
   A full text-node sweep of the workspace (both ramps, alpha stack
   composited, large-text rule applied at 18.66px/700) turned up the labels
   below. They are all text this feature renders — tab names, the "Not set"
   placeholder, the key/contact/table sub-labels inside widgets, the hero
   description and folder chips — so they are repaired here rather than left
   because their class happens to predate tpx-1.                            */
html[data-ss-theme="light"] .tc-gp-tabs .tc-gp-tab-name,
html[data-ss-theme="light"] .tc-gp-hero .tc-gp-desc,
html[data-ss-theme="light"] .tc-gp-hero .tc-gp-folder-name,
html[data-ss-theme="light"] .tc-gp-hero .tc-gp-folder-host,
html[data-ss-theme="light"] .tcx-w .tc-mf-notset,
html[data-ss-theme="light"] .tcx-w .tc-mf-kv-k,
html[data-ss-theme="light"] .tcx-w .tc-mf-ct-role,
html[data-ss-theme="light"] .tcx-w .tc-mf-ct-line,
html[data-ss-theme="light"] .tcx-w .tc-mtable th,
html[data-ss-theme="light"] .tcx-w .tc-mf-type,
.tcx-w .tc-mf-type,
.tc-gp-tabs .tc-gp-tab-name,
.tc-gp-hero .tc-gp-desc,
.tc-gp-hero .tc-gp-folder-name,
.tc-gp-hero .tc-gp-folder-host,
.tcx-w .tc-mf-notset,
.tcx-w .tc-mf-kv-k,
.tcx-w .tc-mf-ct-role,
.tcx-w .tc-mf-ct-line,
.tcx-w .tc-mtable th { color: var(--tcx-dim, #8b949e); }
/* An ACTIVE tab is the current location and stays at full ink. */
.tc-gp-tabs .tc-gp-tab.active .tc-gp-tab-name,
html[data-ss-theme="light"] .tc-gp-tabs .tc-gp-tab.active .tc-gp-tab-name { color: var(--ss-text, #e6edf3); }

/* Contact avatars take a hashed per-name colour, which lands anywhere on the
   wheel — the same saturation problem as the tag chips, except the colour is
   INLINE (it has to be: it is computed per name). `filter` cannot help, since
   darkening the element darkens its tint by the same amount and the ratio
   does not move. _avatar() therefore also publishes the hue as `--tc-av`, and
   this rule re-derives a darker ink from it. Scoped to widgets, so avatars in
   comments and module detail keep their existing look. */
html[data-ss-theme="light"] .tcx-w .tc-avatar {
  color: color-mix(in srgb, var(--tc-av, #58a6ff) 52%, #0b1017) !important;
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  html[data-ss-theme="light"] .tcx-w .tc-avatar { color: var(--ss-text, #1f2733) !important; }
}

/* Studio micro-tags: 7.5–8.5px semantic markers, the smallest ink here. */
.tcs-pal-tag { color: #0a5a6e; background: rgba(34,211,238,.18); }
.tcs-pal-tag.wiki { color: #6d28d9; background: rgba(162,93,220,.2); }
.tcs-page-kind.wiki { color: #6d28d9; }
html[data-ss-theme="dark"] .tcs-pal-tag { color: #67e8f9; background: rgba(34,211,238,.16); }
html[data-ss-theme="dark"] .tcs-pal-tag.wiki { color: #d3b4fb; background: rgba(162,93,220,.2); }
html[data-ss-theme="dark"] .tcs-page-kind.wiki { color: #d3b4fb; border-color: rgba(162,93,220,.45); }
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  html[data-ss-theme="light"] .tcx-tag,
  html[data-ss-theme="light"] .tcx-stat-v,
  html[data-ss-theme="light"] .tcx-step-n,
  html[data-ss-theme="light"] .tcx-ib-head { color: var(--ss-text, #1f2733); }
}

/* ═══════════════════════════════════════════════════════════════════════
   7 · stx-1 — IMAGE ACTION LINKS + WIDGET DENSITY (2026-08-08, MACE)
   ───────────────────────────────────────────────────────────────────────
   Gallery cells and the infobox image can now carry an authored
   click-through link (SharePoint action links): a linked cell renders as
   an <a> with an external-link badge; an unlinked one stays a lightbox
   zoom <button>. The infobox image therefore changed from a passive <div>
   to a real control and needs its button/anchor chrome reset. Plus a
   quiet density pass: widget bodies and section heads lose dead padding
   so information-heavy pages fit more per screen without losing air.
   ═══════════════════════════════════════════════════════════════════════ */

/* Gallery cell that carries an action link */
.tcx-gcell { position: relative; }
a.tcx-gcell, a.tcx-gcell:hover { text-decoration: none; color: inherit; }
.tcx-gcell-ext {
  position: absolute; top: 5px; right: 5px;
  display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 5px; font-size: 8px;
  color: #fff; background: rgba(11,16,23,.62);
  border: 1px solid rgba(255,255,255,.25);
  pointer-events: none;
  opacity: 0; transition: opacity .12s ease;
}
.tcx-gcell-link:hover .tcx-gcell-ext,
.tcx-gcell-link:focus-visible .tcx-gcell-ext { opacity: 1; }

/* Infobox image is now a control (zoom button, or an action-link anchor) */
button.tcx-ib-img, a.tcx-ib-img {
  display: block; width: 100%; margin: 0; border: none;
  background: transparent; font: inherit; text-align: inherit;
  cursor: zoom-in; -webkit-appearance: none; appearance: none;
}
a.tcx-ib-img { cursor: pointer; }
button.tcx-ib-img:focus-visible, a.tcx-ib-img:focus-visible {
  outline: 2px solid var(--tc-accent, var(--ss-accent, #58a6ff)); outline-offset: 2px;
  border-radius: 7px;
}

/* Density pass — tighter widget internals, same geometry (C2 untouched:
   the BOX sizes are authored; only the chrome inside each box slims). */
.tcx-w-body { padding: 9px 11px; }
.tcx-w .tc-ms-head { padding: 8px 12px; }
.tcx-w .tc-ms-body { padding: 9px 12px; }
.tcx-gal { gap: 6px; }

/* ═══════════════════════════════════════════════════════════════════════
   8 · tpx-2 — FREE-FORM CANVAS + PROFESSIONAL REDESIGN (2026-08-11, MACE)
   ───────────────────────────────────────────────────────────────────────
   Canvas-kind pages dropped the 12-column grid: a widget is an absolutely
   positioned box in real px (left/top/width/height/z-index/opacity, no
   upper bound), so it can be placed, layered and sized exactly like the
   reference scene editor. WIKI pages are untouched — the rules in §1–§7
   above still govern them exactly as before. This section is appended
   LAST on purpose (stx-1's own lesson, §7 of the sibling file): later
   source order wins the cascade against the generic .tcx-w rules above.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── rendered group page — the free canvas itself ─────────────────────── */
.tcx-freewrap { overflow: auto; padding: 4px 4px 24px; }
.tcx-grid.free {
  position: relative;
  display: block;
  border-radius: 14px;
  background:
    radial-gradient(circle, var(--ss-border2, rgba(255,255,255,.09)) 1px, transparent 1px)
    0 0 / 22px 22px;
  background-color: var(--ss-bg, #010409);
  transition: transform .12s ease;
}
html[data-ss-theme="light"] .tcx-grid.free {
  background:
    radial-gradient(circle, rgba(15,23,32,.10) 1px, transparent 1px)
    0 0 / 22px 22px;
  background-color: var(--ss-bg, #f4f6f9);
}
.tcx-grid.free > .tcx-w { margin: 0; }
.tcx-w-free.tcx-val,
.tcx-w-free.tc-ms {
  box-shadow: 0 10px 28px -18px rgba(0,0,0,.55);
  transition: box-shadow .15s ease, border-color .15s ease;
}
.tcx-w-free.tcx-val:hover,
.tcx-w-free.tc-ms:hover { box-shadow: 0 14px 34px -16px rgba(0,0,0,.65); }
.tcx-locked { cursor: default; }

/* ── Studio design canvas — free mode ──────────────────────────────────── */
.tcs-freescroll { overflow: auto; border-radius: 12px; }
.tcs-canvas.free {
  display: block;
  grid-template-columns: none;
  min-height: 0;
  background:
    radial-gradient(circle, var(--ss-border2, rgba(255,255,255,.10)) 1px, transparent 1px)
    0 0 / 22px 22px;
  background-color: var(--ss-surface, #0d1117);
}
.tcs-canvas.free .tcs-cw {
  border-radius: 10px;
  box-shadow: 0 8px 22px -16px rgba(0,0,0,.7);
}
.tcs-canvas.free .tcs-cw.locked {
  cursor: default;
  border-style: dashed;
  opacity: .82;
}
.tcs-cw-lock { color: var(--tcx-dim, #8b949e); font-size: 9.5px; flex-shrink: 0; }
.tcs-canvas.free .tcs-canvas-empty {
  position: absolute; inset: 0; grid-column: unset; grid-row: unset;
}

/* ── Inspector — Position & size (px), Z-Index, Opacity, Lock ─────────── */
.tcs-sec-hint {
  font-style: normal; font-size: 9px; font-weight: 700; letter-spacing: .04em;
  color: var(--tcx-dim, #8b949e); text-transform: uppercase; margin-left: 6px;
}
.tcs-lockchk {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10px;
  color: var(--tcx-dim, #8b949e); cursor: pointer; user-select: none;
}
.tcs-lockchk input { accent-color: var(--tcs-accent); }
.tcs-lockchk:has(input:checked) { color: var(--tcs-accent); }
.tcs-f input:disabled { opacity: .5; cursor: not-allowed; }

/* ── Redesign pass — compact, aligned titles/labels/notes (MACE brief) ─── */
.tc-ms-head { gap: 8px; }
.tc-ms-head h3 { font-size: 12.5px; font-weight: 800; letter-spacing: -.01em; margin: 0; }
.tc-mf-lbl { font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; margin-bottom: 4px; }
.tc-mf { margin-bottom: 10px; }
.tc-mf:last-child { margin-bottom: 0; }
.tcs-sec-h { letter-spacing: -.01em; }
.tcs-note { margin-top: 6px; }

/* ═══════════════════════════════════════════════════════════════════════
   8b · wik-1 — THE KNOWLEDGE BASE LANE (2026-08-13, MACE)
   ───────────────────────────────────────────────────────────────────────
   Six widgets that turn the TRAINING GUIDE tab into a working knowledge
   base: Quick Copy · Interactive Checklist · Read Time & Level ·
   SharePoint Smart Link · Engagement Bar · Wiki Search.

   THEMING RULE IS UNCHANGED: --ss-* tokens only, plus --tcx-dim for
   secondary ink. The one exception is the semantic accents (a level
   colour, a file-kind colour), which are published as inline CUSTOM
   PROPERTIES by the engine and consumed here — never as an inline
   `color`, so nothing needs !important and the light ramp can derive a
   darker ink from the same hue (C20).

   This section sits BEFORE §9 on purpose: §9's container queries must
   stay last so they shrink these widgets too.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Quick Copy ───────────────────────────────────────────────────────── */
.tcx-qc { display: flex; flex-direction: column; gap: 10px; }
.tcx-qc-row { display: flex; flex-direction: column; gap: 4px; }
.tcx-qc-lbl {
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--tcx-dim);
}
.tcx-qc-line {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--ss-border, rgba(255,255,255,.1));
  border-radius: 9px; overflow: hidden;
  background: var(--ss-surface3, rgba(255,255,255,.04));
}
.tcx-qc-code {
  flex: 1 1 auto; min-width: 0;
  padding: 9px 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; line-height: 1.5; color: var(--ss-text, #e6edf3);
  white-space: pre-wrap; word-break: break-word;
}
.tcx-qc-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px; border: 0; border-left: 1px solid var(--ss-border, rgba(255,255,255,.1));
  background: var(--ss-surface2, rgba(255,255,255,.03));
  color: var(--ss-text, #e6edf3);
  font-size: 11px; font-weight: 700; cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.tcx-qc-btn:hover { background: var(--ss-accent, #58a6ff); color: var(--tcx-on-accent); }
.tcx-qc-btn.copied { background: #3fb950; color: var(--tcx-on-accent); }
.tcx-qc-all {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: 8px; cursor: pointer;
  border: 1px dashed var(--ss-border, rgba(255,255,255,.16));
  background: transparent; color: var(--tcx-dim);
  font-size: 11px; font-weight: 700;
}
.tcx-qc-all:hover { color: var(--ss-text, #e6edf3); border-style: solid; }
.tcx-qc-all.copied { color: #3fb950; border-color: #3fb950; }

/* ── Interactive checklist ────────────────────────────────────────────── */
.tcx-ck { display: flex; flex-direction: column; gap: 10px; }
.tcx-ck-head { display: flex; align-items: center; gap: 9px; }
.tcx-ck-bar {
  flex: 1 1 auto; height: 6px; border-radius: 999px; overflow: hidden;
  background: var(--ss-surface3, rgba(255,255,255,.06));
}
.tcx-ck-fill {
  display: block; height: 100%; width: 0;
  background: #3fb950;
  transition: width .24s ease;
}
.tcx-ck-count {
  flex: 0 0 auto; font-size: 10.5px; font-weight: 800;
  color: var(--tcx-dim); font-variant-numeric: tabular-nums;
}
.tcx-ck-reset {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--ss-border, rgba(255,255,255,.1));
  background: transparent; color: var(--tcx-dim); font-size: 10px;
}
.tcx-ck-reset:hover { color: var(--ss-text, #e6edf3); }
.tcx-ck-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.tcx-ck-tog {
  width: 100%; display: flex; align-items: flex-start; gap: 10px; text-align: left;
  padding: 8px 10px; border-radius: 9px; cursor: pointer;
  border: 1px solid transparent; background: var(--ss-surface3, rgba(255,255,255,.03));
  color: inherit; font: inherit;
  transition: background .14s ease, border-color .14s ease;
}
.tcx-ck-tog:hover { border-color: var(--ss-border, rgba(255,255,255,.14)); }
.tcx-ck-box {
  flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px;
  border-radius: 5px; display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--ss-border, rgba(255,255,255,.24));
  color: transparent; font-size: 9px;
  transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.tcx-ck-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tcx-ck-t { font-size: 12px; font-weight: 600; color: var(--ss-text, #e6edf3); }
.tcx-ck-n { font-size: 10.5px; line-height: 1.45; color: var(--tcx-dim); }
.tcx-ck-tog[aria-checked="true"] .tcx-ck-box { background: #3fb950; border-color: #3fb950; color: var(--tcx-on-accent); }
.tcx-ck-tog[aria-checked="true"] .tcx-ck-t { text-decoration: line-through; color: var(--tcx-dim); }

/* ── Read time / difficulty badges ───────────────────────────────────── */
.tcx-rm { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.tcx-rm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--ss-border, rgba(255,255,255,.12));
  background: var(--ss-surface3, rgba(255,255,255,.04));
  font-size: 10.5px; font-weight: 700; letter-spacing: .01em;
  color: var(--ss-text, #e6edf3); white-space: nowrap;
}
.tcx-rm-chip i { font-size: 9.5px; color: var(--tcx-dim); }
.tcx-rm-chip em {
  font-style: normal; font-size: 8.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tcx-dim);
  padding: 1px 4px; border-radius: 4px;
  background: var(--ss-surface2, rgba(255,255,255,.05));
}
/* C20 — the level hue arrives as a variable, so the ramp derives its own ink. */
.tcx-rm-chip.lvl {
  color: var(--tcx-lvl, var(--ss-text, #e6edf3));
  border-color: color-mix(in srgb, var(--tcx-lvl, #58a6ff) 42%, transparent);
  background: color-mix(in srgb, var(--tcx-lvl, #58a6ff) 12%, transparent);
}
.tcx-rm-chip.lvl i { color: inherit; }
html[data-ss-theme="light"] .tcx-rm-chip.lvl { color: color-mix(in srgb, var(--tcx-lvl, #58a6ff) 55%, #0b1017); }
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .tcx-rm-chip.lvl { color: var(--ss-text, #e6edf3); }
}

/* ── SharePoint smart links ──────────────────────────────────────────── */
.tcx-sl { display: flex; flex-direction: column; gap: 9px; }
.tcx-sl-card {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 11px; text-decoration: none;
  border: 1px solid var(--ss-border, rgba(255,255,255,.1));
  background: var(--ss-surface3, rgba(255,255,255,.03));
  transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
.tcx-sl-card:hover {
  border-color: color-mix(in srgb, var(--tcx-sl-c, #58a6ff) 55%, transparent);
  background: var(--ss-surface2, rgba(255,255,255,.055));
}
.tcx-sl-card.blocked { border-color: rgba(248,81,73,.4); background: rgba(248,81,73,.07); }
.tcx-sl-ic {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: var(--tcx-sl-c, var(--ss-accent, #58a6ff));
  border: 1px solid color-mix(in srgb, var(--tcx-sl-c, #58a6ff) 32%, transparent);
  background: color-mix(in srgb, var(--tcx-sl-c, #58a6ff) 12%, transparent);
}
.tcx-sl-ic.play { border-radius: 50%; }
.tcx-sl-b { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.tcx-sl-t {
  font-size: 12px; font-weight: 700; color: var(--ss-text, #e6edf3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tcx-sl-m { font-size: 10px; color: var(--tcx-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcx-sl-go { flex: 0 0 auto; font-size: 10px; color: var(--tcx-dim); }
.tcx-sl-card:hover .tcx-sl-go { color: var(--tcx-sl-c, var(--ss-accent, #58a6ff)); }
.tcx-sl-fig { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tcx-sl-imgb {
  padding: 0; border: 1px solid var(--ss-border, rgba(255,255,255,.1));
  border-radius: 11px; overflow: hidden; cursor: zoom-in; background: transparent;
  display: block; line-height: 0;
}
.tcx-sl-imgb img { width: 100%; height: auto; display: block; }
/* A dead image link explains itself instead of collapsing to a sliver. */
.tcx-sl-fig.failed .tcx-sl-imgb { cursor: default; border-style: dashed; border-color: rgba(210,153,34,.45); background: rgba(210,153,34,.07); }
.tcx-sl-broken {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 14px 14px; line-height: 1.5;
  font-size: 10.5px; color: var(--tcx-dim);
}
.tcx-sl-broken i { flex: 0 0 auto; font-size: 15px; color: var(--ss-warn, #d29922); }
.tcx-sl-video {
  width: 100%; border-radius: 11px; display: block;
  border: 1px solid var(--ss-border, rgba(255,255,255,.1));
  background: #000;
}
.tcx-sl-cap { display: flex; flex-direction: column; gap: 2px; }

/* ── Engagement bar (views · likes · comments) ───────────────────────── */
.tcx-eng { display: flex; flex-direction: column; gap: 12px; }
.tcx-eng-skel, .tcx-ws-skel {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--tcx-dim);
}
.tcx-eng-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ss-border, rgba(255,255,255,.08));
}
.tcx-eng-stat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--ss-border, rgba(255,255,255,.1));
  background: var(--ss-surface3, rgba(255,255,255,.03));
  font-size: 11px; font-weight: 700; color: var(--ss-text, #e6edf3);
  font-variant-numeric: tabular-nums;
}
.tcx-eng-stat i { font-size: 10px; color: var(--tcx-dim); }
.tcx-eng-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--ss-border, rgba(255,255,255,.12));
  background: var(--ss-surface3, rgba(255,255,255,.03));
  color: var(--ss-text, #e6edf3); font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  transition: border-color .14s ease, background .14s ease, color .14s ease;
}
.tcx-eng-btn:hover { border-color: var(--ss-accent, #58a6ff); }
.tcx-eng-btn i { font-size: 10px; }
.tcx-eng-btn.on { color: #f97316; border-color: rgba(249,115,22,.5); background: rgba(249,115,22,.12); }
.tcx-eng-btn.on i { color: #f97316; }
.tcx-eng-btn[disabled] { opacity: .55; cursor: progress; }
.tcx-eng-spacer { flex: 1 1 auto; }

.tcx-eng-composer { display: flex; gap: 9px; align-items: flex-start; }
.tcx-eng-cbox { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 7px; position: relative; }
.tcx-eng-ta {
  width: 100%; resize: vertical; min-height: 60px;
  padding: 9px 11px; border-radius: 9px;
  border: 1px solid var(--ss-border, rgba(255,255,255,.12));
  background: var(--ss-surface3, rgba(255,255,255,.03));
  color: var(--ss-text, #e6edf3);
  font: inherit; font-size: 12px; line-height: 1.5;
}
.tcx-eng-ta:focus { outline: none; border-color: var(--ss-accent, #58a6ff); }
.tcx-eng-crow { display: flex; align-items: center; gap: 8px; }
.tcx-eng-hint { flex: 1 1 auto; font-size: 10px; color: var(--tcx-dim); }
.tcx-eng-send {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 8px; cursor: pointer; border: 0;
  background: var(--ss-accent, #58a6ff); color: var(--tcx-on-accent);
  font-size: 11px; font-weight: 800;
}
.tcx-eng-send[disabled] { opacity: .45; cursor: not-allowed; }

/* @mention autocomplete — a body-level portal is not needed here because the
   list is anchored inside the composer's own relative box. */
.tcx-eng-ment {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
  margin-top: 4px; max-height: 210px; overflow-y: auto;
  border-radius: 10px; padding: 4px;
  border: 1px solid var(--ss-border, rgba(255,255,255,.14));
  background: var(--ss-surface1, #161b22);
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
}
.tcx-eng-ment[hidden] { display: none; }
.tcx-eng-mrow {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: 7px; cursor: pointer;
  border: 0; background: transparent; color: var(--ss-text, #e6edf3);
  font: inherit; font-size: 11.5px; text-align: left;
}
.tcx-eng-mrow:hover, .tcx-eng-mrow.sel { background: var(--ss-surface3, rgba(255,255,255,.07)); }
.tcx-eng-mrole { margin-left: auto; font-size: 9.5px; font-weight: 700; color: var(--tcx-dim); }

.tcx-eng-list { display: flex; flex-direction: column; gap: 10px; }
.tcx-eng-cm { display: flex; gap: 9px; }
.tcx-eng-cm.reply { margin-left: 30px; }
.tcx-eng-cmb {
  flex: 1 1 auto; min-width: 0;
  border-radius: 11px; padding: 9px 11px;
  border: 1px solid var(--ss-border, rgba(255,255,255,.09));
  background: var(--ss-surface3, rgba(255,255,255,.03));
}
.tcx-eng-cm.resolved > .tcx-eng-cmb { border-color: rgba(63,185,80,.45); background: rgba(63,185,80,.07); }
.tcx-eng-cmh { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; }
.tcx-eng-cmn { font-size: 11.5px; font-weight: 800; color: var(--ss-text, #e6edf3); }
.tcx-eng-cmt { font-size: 9.5px; color: var(--tcx-dim); }
/* C20 · a saturated accent on its OWN pale tint measures ~2.2:1 on the light
   ramp — this chip was 2.15:1 when it was a flat #3fb950. The ramp derives a
   darker ink from the same hue instead (the §7 trick), so nothing needs
   !important and the dark ramp keeps the bright green it reads well as. */
.tcx-eng-rchip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 999px;
  font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #3fb950; border: 1px solid rgba(63,185,80,.45); background: rgba(63,185,80,.12);
}
html[data-ss-theme="light"] .tcx-eng-rchip {
  color: color-mix(in srgb, #3fb950 46%, var(--tcx-on-accent));
  border-color: rgba(63,185,80,.55);
  background: rgba(63,185,80,.16);
}
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  html[data-ss-theme="light"] .tcx-eng-rchip { color: var(--ss-text, #e6edf3); }
}
.tcx-eng-cmx { font-size: 12px; line-height: 1.55; color: var(--ss-text, #e6edf3); white-space: pre-wrap; word-break: break-word; }
.tcx-eng-at { font-weight: 700; color: var(--ss-accent, #58a6ff); }
.tcx-eng-acts { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.tcx-eng-act {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font: inherit; font-size: 10px; font-weight: 700; color: var(--tcx-dim);
}
.tcx-eng-act:hover { color: var(--ss-text, #e6edf3); }
.tcx-eng-act.danger:hover { color: #f85149; }
.tcx-eng-act.res:hover { color: #3fb950; }
.tcx-eng-empty { font-size: 11px; color: var(--tcx-dim); font-style: italic; }

/* ── Wiki search ─────────────────────────────────────────────────────── */
.tcx-wsearch { display: flex; flex-direction: column; gap: 10px; }
.tcx-ws-field {
  display: flex; align-items: center; gap: 9px;
  padding: 0 11px; border-radius: 10px;
  border: 1px solid var(--ss-border, rgba(255,255,255,.13));
  background: var(--ss-surface3, rgba(255,255,255,.03));
}
.tcx-ws-field:focus-within { border-color: var(--ss-accent, #58a6ff); }
.tcx-ws-ic { font-size: 11px; color: var(--tcx-dim); }
.tcx-ws-input {
  flex: 1 1 auto; min-width: 0; border: 0; outline: none; background: transparent;
  padding: 10px 0; color: var(--ss-text, #e6edf3); font: inherit; font-size: 12.5px;
}
.tcx-ws-input::-webkit-search-cancel-button { display: none; }
.tcx-ws-clear {
  border: 0; background: transparent; cursor: pointer; padding: 2px;
  color: var(--tcx-dim); font-size: 11px; visibility: hidden;
}
.tcx-ws-field.has .tcx-ws-clear { visibility: visible; }
.tcx-ws-clear:hover { color: var(--ss-text, #e6edf3); }
.tcx-ws-out { display: flex; flex-direction: column; gap: 6px; }
.tcx-ws-hit {
  width: 100%; display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 9px 11px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--ss-border, rgba(255,255,255,.08));
  background: var(--ss-surface3, rgba(255,255,255,.03));
  color: inherit; font: inherit;
  transition: border-color .14s ease, background .14s ease;
}
.tcx-ws-hit:hover { border-color: var(--ss-accent, #58a6ff); background: var(--ss-surface2, rgba(255,255,255,.055)); }
.tcx-ws-hh { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tcx-ws-hg { font-size: 12px; font-weight: 800; color: var(--ss-text, #e6edf3); }
.tcx-ws-hp {
  font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px; color: var(--tcx-dim);
  background: var(--ss-surface2, rgba(255,255,255,.06));
}
.tcx-ws-hs { font-size: 10.5px; line-height: 1.5; color: var(--tcx-dim); }
.tcx-ws-hs mark { background: transparent; color: var(--ss-accent, #58a6ff); font-weight: 700; }
.tcx-ws-note { font-size: 10.5px; color: var(--tcx-dim); font-style: italic; }

/* ═══════════════════════════════════════════════════════════════════════
   9 · stx-2 — A WIDGET SHRINKS WITH ITS CONTENTS (2026-08-12, MACE)
   ───────────────────────────────────────────────────────────────────────
   MUST STAY LAST IN THIS FILE (source-order cascade, same rule as §8).

   The complaint was "yung mga widgets sa template studio hindi mapaliit,
   may limitation … dapat dynamic ang mga element nun, liliit din dapat."
   Two separate causes, both fixed:

     ① a FLOOR in the engine — every type declared a minW/minH that the
        clamp enforced, so a Table could not go under 3×3 no matter what
        the author wanted. Removed in template_engine.js (the declared
        size is now a default hint, never a limit).

     ② nothing INSIDE the box responded. A widget shrunk to 120px was a
        big widget with its content clipped: 12px labels, 14px padding,
        30px avatars, unchanged. That is what made small sizes feel
        "broken" rather than small.

   The fix for ② is CONTAINER QUERIES, not media queries: the ruler has to
   be the WIDGET's own box, because a 120px widget and a 900px widget sit
   side by side inside the same viewport on the same canvas. Each widget
   declares itself a container and steps its own typography, padding and
   ornament down at four sizes. Everything degrades to the current look on
   an engine without @container support — the box simply scrolls, exactly
   as contract 2 already promised.
   ═══════════════════════════════════════════════════════════════════════ */
.tcx-w { container-type: inline-size; container-name: tcxw; }
/* A free-canvas widget has an authored WIDTH *and* HEIGHT, so it can be
   queried on both axes; a wiki widget's height is the grid's, not its own. */
.tcx-w-free { container-type: size; }

@supports (container-type: inline-size) {
  /* ≤ 300px — the "column" size: trim the chrome, keep every element. */
  @container tcxw (max-width: 300px) {
    .tcx-w-body { padding: 7px 8px; }
    .tcx-w .tc-ms-head { padding: 6px 8px; gap: 6px; }
    .tcx-w .tc-ms-body { padding: 7px 8px; }
    .tc-ms-head h3 { font-size: 11.5px; }
    .tc-mf-lbl { font-size: 9px; margin-bottom: 3px; }
    .tc-mf { margin-bottom: 7px; }
    .tcx-hint { font-size: 9.5px; }
    .tcx-gal { gap: 4px; }
  }
  /* ≤ 200px — the "tile" size: one column everywhere, smaller ink. */
  @container tcxw (max-width: 200px) {
    .tcx-w-body { padding: 5px 6px; }
    .tcx-w .tc-ms-head { padding: 5px 6px; }
    .tcx-w .tc-ms-body { padding: 5px 6px; }
    .tc-ms-head h3 { font-size: 10.5px; }
    .tc-ms-head .tc-ms-ic { width: 20px; height: 20px; font-size: 9px; }
    .tc-mf-lbl { font-size: 8.5px; letter-spacing: .02em; }
    .tc-mf-val, .tcx-kv, .tcx-list, .tcx-steps, .tcx-links { font-size: 10.5px; }
    .tcx-kv { grid-template-columns: 1fr; gap: 2px; }
    .tcx-stat-v { font-size: 18px; }
    /* the avatar's box is written INLINE by the ctx.avatar() factory (its
       colour is hashed from the name), so only !important can shrink it —
       the same reason §7's --tc-av ink repair needs one. */
    .tc-avatar { width: 20px !important; height: 20px !important; font-size: 9px !important; }
    .tcx-gal { grid-template-columns: 1fr; }
    .tcx-ib { font-size: 10px; }
  }
  /* ≤ 130px — the "chip" size: labels and ornament step aside so the VALUE
     still reads. Nothing is display:none'd that carries information. */
  @container tcxw (max-width: 130px) {
    .tcx-w-body { padding: 4px 5px; }
    .tcx-w .tc-ms-head { padding: 4px 5px; }
    .tcx-w .tc-ms-head .tc-ms-ic { display: none; }
    .tc-ms-head h3 { font-size: 9.5px; }
    .tc-mf-lbl { font-size: 8px; margin-bottom: 2px; }
    .tc-mf-val, .tcx-kv, .tcx-list, .tcx-steps, .tcx-links { font-size: 9.5px; line-height: 1.35; }
    .tcx-stat-v { font-size: 14px; }
    .tcx-tag, .tcx-badge { font-size: 8px; padding: 1px 5px; }
    .tcx-hint { display: none; }
  }
  /* A very SHORT free widget: kill vertical padding before the text size,
     because height is what ran out — not width. */
  @container tcxw (max-height: 74px) {
    .tcx-w-body { padding-top: 4px; padding-bottom: 4px; }
    .tcx-w .tc-ms-head { padding-top: 3px; padding-bottom: 3px; }
    .tcx-w .tc-ms-body { padding-top: 3px; padding-bottom: 3px; }
    .tc-mf { margin-bottom: 4px; }
  }
  @container tcxw (max-height: 44px) {
    .tcx-w .tc-ms-head { display: none; }   /* the body IS the widget now */
    .tc-mf-lbl { display: none; }
  }
}

/* ── The Studio's design chip shrinks the same way ─────────────────────── */
/* .tcs-cw is the placeholder the BUILDER drags — it is not the rendered
   widget, so it needs its own steps or a 60px box shows a clipped header
   and the author cannot tell what they just resized. */
.tcs-cw { container-type: inline-size; container-name: tcscw; }
.tcs-cw-h { min-width: 0; }
.tcs-cw-h b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@supports (container-type: inline-size) {
  @container tcscw (max-width: 240px) {
    .tcs-cw-h { padding: 4px 6px; gap: 5px; font-size: 10px; }
    .tcs-cw-h em { display: none; }               /* the type name repeats the icon */
    .tcs-cw-fields { gap: 3px; padding: 4px 6px; }
    .tcs-cw-f { font-size: 8.5px; }
  }
  @container tcscw (max-width: 150px) {
    .tcs-cw-h { padding: 3px 5px; font-size: 9px; }
    .tcs-cw-dim { display: none; }                /* the inspector shows the exact px */
    .tcs-cw-fields { display: none; }
  }
  @container tcscw (max-width: 92px) {
    .tcs-cw-h b { display: none; }                /* icon only — still identifiable */
    .tcs-cw-h { justify-content: center; }
  }
}
/* The resize handle must stay grabbable at the smallest authored size, so it
   shrinks with the chip instead of overhanging it. */
.tcs-cw { min-width: 12px; min-height: 12px; }
@supports (container-type: inline-size) {
  @container tcscw (max-width: 92px) {
    .tcs-rs { width: 10px; height: 10px; }
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   §10 · SEARCHABLE WIDGET PALETTE (swx-2)
   The registry remains the source of truth; this layer only improves discovery.
   ═══════════════════════════════════════════════════════════════════════ */
.tcs-pal-meta { margin-left: auto; color: var(--tcx-dim, var(--ss-muted, #8b949e)); font-size: 9px; font-weight: 500; }
.tcs-pal-tools { display: grid; gap: 6px; padding: 7px 0 4px; }
.tcs-pal-search { position: relative; display: flex; align-items: center; }
.tcs-pal-search > i { position: absolute; left: 8px; color: var(--tcx-dim, var(--ss-muted, #8b949e)); font-size: 10px; pointer-events: none; }
.tcs-pal-search input { width: 100%; height: 30px; padding: 0 26px 0 24px; color: var(--ss-text, #e6edf3); background: var(--ss-surface3, #21262d); border: 1px solid var(--ss-border, #30363d); border-radius: 6px; outline: none; font: inherit; font-size: 11px; }
.tcs-pal-search input:focus { border-color: var(--ss-accent, #58a6ff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ss-accent, #58a6ff) 20%, transparent); }
.tcs-pal-search input::-webkit-search-cancel-button { display: none; }
.tcs-pal-search button { position: absolute; right: 4px; width: 22px; height: 22px; color: var(--tcx-dim, var(--ss-muted, #8b949e)); background: transparent; border: 0; border-radius: 4px; cursor: pointer; }
.tcs-pal-search button:hover { color: var(--ss-text, #e6edf3); background: var(--ss-border, #30363d); }
.tcs-pal-cats { display: flex; gap: 3px; overflow-x: auto; scrollbar-width: thin; }
.tcs-pal-catb { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; min-height: 27px; padding: 0 7px; color: var(--tcx-dim, var(--ss-muted, #8b949e)); background: transparent; border: 1px solid transparent; border-radius: 5px; cursor: pointer; font: inherit; font-size: 9.5px; white-space: nowrap; }
.tcs-pal-catb:hover { color: var(--ss-text, #e6edf3); background: var(--ss-surface3, #21262d); }
.tcs-pal-catb.active { color: var(--ss-accent, #58a6ff); background: color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent); border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 28%, transparent); }
.tcs-pal-help { margin: 4px 0 7px; color: var(--tcx-dim, var(--ss-muted, #8b949e)); font-size: 9.5px; line-height: 1.4; }
.tcs-pal-b:focus-visible,
.tcs-pal-catb:focus-visible,
.tcs-pal-search input:focus-visible,
.tcs-pal-search button:focus-visible { outline: 2px solid var(--ss-accent, #58a6ff); outline-offset: 2px; }
.tcs-pal-none { display: grid; place-items: center; gap: 4px; min-height: 90px; padding: 12px; color: var(--tcx-dim, var(--ss-muted, #8b949e)); text-align: center; border: 1px dashed var(--ss-border, #30363d); border-radius: 7px; }
.tcs-pal-none > i { font-size: 14px; }
.tcs-pal-none b { color: var(--ss-text, #e6edf3); font-size: 10.5px; }
.tcs-pal-none span { font-size: 9.5px; }
@media (max-width: 760px) {
  .tcs-pal-cats { padding-bottom: 2px; }
  .tcs-pal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .tcs-pal-b, .tcs-pal-catb { transition: none; }
}