/* ═══════════════════════════════════════════════════════════════════════════
   MUMS · Support Studio ▸ Standard & Training
   SUPER WIKI WORKSPACE   (feature `swx-1`, 2026-08-14, MACE)
   ───────────────────────────────────────────────────────────────────────────
   The `.swx-*` design system: the topic rail, the tabbed article canvas, the
   inline SharePoint document viewer and the Outlook message envelope.

   LOAD ORDER — this file ships AFTER template_studio.css and BEFORE
   enterprise_theme.css, which stays last. It therefore inherits §9's
   container queries (a `.tcx-w` inside a lane is still its own query
   container and still shrinks its own contents), and it never fights the
   guarded theme file.

   TOKENS — every colour resolves through the shell's `--ss-*` variables so
   both ramps are handled by the shell, plus TWO local tokens:

     --swx-dim   secondary ink. Identical to --ss-muted on dark; a step
                 darker on light, where --ss-muted measures under 4.5:1 on
                 the pale surfaces this layer uses. Same reason
                 template_studio.css owns --tcx-dim; a shared token cannot be
                 re-pointed without repainting the whole shell.
     --swx-rail  the rail width, so the collapse animation and the responsive
                 breakpoints have exactly one number to agree on.

   CONTRAST — measured on both ramps with transitions frozen and the whole
   alpha stack composited (memory.md records all three ways a naive
   measurement lies here). Floor across the layer: 4.6:1.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --swx-dim: var(--ss-muted, #8b949e);
  --swx-rail: 268px;
}
html[data-ss-theme="light"] {
  --swx-dim: #58616e;
}

/* ═══════════════════════════════════════════════════════════════════════
   1 · SHELL — the high-density two-pane grid
   ═══════════════════════════════════════════════════════════════════════ */

/* The workspace BOUNDS ITSELF. Left to grow with its content it becomes one
   long page: the topic rail scrolls away from the article it navigates, and
   `.swx-body` — which is declared as the scroller — never actually scrolls,
   because a flex child only overflows inside a parent that has a height.
   That also silently disables lazy loading, since nothing below the fold can
   ever be scrolled into view. A fixed rail beside an independently scrolling
   canvas is the layout, and this is the line that makes it true. */
.swx {
  display: grid;
  grid-template-columns: var(--swx-rail) minmax(0, 1fr);
  gap: 0;
  height: min(calc(100vh - 232px), 1100px);
  min-height: 420px;
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 10px;
  overflow: hidden;
  background: var(--ss-surface, #0d1117);
}
.swx.rail-off { grid-template-columns: 0 minmax(0, 1fr); }
.swx.rail-off .swx-rail { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   2 · RAIL — the topic tree
   ═══════════════════════════════════════════════════════════════════════ */

.swx-rail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* A grid item defaults to `min-height: auto`, which means "never smaller
     than my content" — so without this the rail and the canvas both grow past
     the track, `.swx`'s overflow:hidden clips them, and NEITHER pane scrolls.
     This one declaration is what makes the two-pane layout real. */
  min-height: 0;
  border-right: 1px solid var(--ss-border, #30363d);
  background: var(--ss-surface2, #161b22);
}

.swx-rail-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid var(--ss-border, #30363d);
}
.swx-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
}
.swx-search > i {
  position: absolute;
  left: 9px;
  font-size: 11px;
  color: var(--swx-dim, #8b949e);
  pointer-events: none;
}
.swx-search-in {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0 26px 0 26px;
  font: inherit;
  font-size: 12px;
  color: var(--ss-text, #e6edf3);
  background: var(--ss-surface3, #21262d);
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 7px;
  outline: none;
}
.swx-search-in:focus {
  border-color: var(--ss-accent, #58a6ff);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ss-accent, #58a6ff) 22%, transparent);
}
.swx-search-in::-webkit-search-cancel-button { display: none; }
.swx-search-x {
  position: absolute;
  right: 4px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--swx-dim, #8b949e);
  background: none;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.swx-search-x:hover { color: var(--ss-text, #e6edf3); background: var(--ss-border, #30363d); }
/* swx-11 · `[hidden]` is the WEAKEST rule in the cascade and the author
   `display: grid` two rules up beats it outright — so this button has been on
   screen over an empty search box since swx-1, telling the reader a filter was
   live when none was, and telling them nothing when one WAS. Restated at author
   level so the attribute actually closes it. */
.swx-search-x[hidden] { display: none; }

/* A non-manual sort turns drag-to-reorder off (a drop would be a silent
   no-op), so the control that did it has to look engaged. */
.swx-rail-sort.is-on {
  color: var(--ss-accent, #d29922);
  border-color: color-mix(in srgb, var(--ss-accent, #d29922) 45%, transparent);
  background: color-mix(in srgb, var(--ss-accent, #d29922) 14%, var(--ss-surface3, #21262d));
}

.swx-rail-sort {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--swx-dim, #8b949e);
  background: var(--ss-surface3, #21262d);
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 7px;
  cursor: pointer;
}
.swx-rail-sort:hover { color: var(--ss-text, #e6edf3); border-color: var(--ss-border2, #3d444d); }

.swx-tree {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px 6px 10px;
}
.swx-tree::-webkit-scrollbar { width: 8px; }
.swx-tree::-webkit-scrollbar-thumb { background: var(--ss-border2, #3d444d); border-radius: 4px; }
.swx-tree::-webkit-scrollbar-thumb:hover { background: var(--swx-dim, #8b949e); }

/* One row. The indent is a custom property rather than nested markup, so the
   flat topic array maps 1:1 onto the DOM — which is what keeps drag-and-drop,
   keyboard navigation and the search filter each a single pass. */
.swx-node {
  --swx-d: 0;
  --swx-level-color: var(--ss-green, #3fb950);
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 3px 4px 3px calc(4px + var(--swx-d) * 14px);
  border-radius: 7px;
  cursor: pointer;
  user-select: none;
  color: var(--ss-text, #e6edf3);
}
.swx-node[data-tone="0"] { --swx-level-color: var(--ss-green, #3fb950); }
.swx-node[data-tone="1"] { --swx-level-color: #2fb7a8; }
.swx-node[data-tone="2"] { --swx-level-color: #a88ce5; }
.swx-node[data-tone="3"] { --swx-level-color: var(--ss-warn, #d29922); }
.swx-node[data-tone="4"] { --swx-level-color: #dc7d78; }
.swx-node[data-tone="5"] { --swx-level-color: #5fa9c9; }
.swx-node:hover { background: var(--ss-surface3, #21262d); }
.swx-node:focus-visible {
  outline: 2px solid var(--ss-accent, #58a6ff);
  outline-offset: -2px;
}
.swx-node.is-active {
  background: color-mix(in srgb, var(--ss-accent, #58a6ff) 16%, transparent);
  box-shadow: inset 2px 0 0 var(--ss-accent, #58a6ff);
}
.swx-node.is-hit { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ss-accent, #58a6ff) 45%, transparent); }
.swx-node.is-root .swx-node-t { font-weight: 650; }
.swx-node.is-dragging { opacity: .45; }

/* Three drop zones: beside above, beside below, or inside. Without the third
   a tree can only be reordered, never re-parented — and everybody tries. */
.swx-node.drop-before { box-shadow: inset 0 2px 0 var(--ss-accent, #58a6ff); }
.swx-node.drop-after  { box-shadow: inset 0 -2px 0 var(--ss-accent, #58a6ff); }
.swx-node.drop-in {
  background: color-mix(in srgb, var(--ss-accent, #58a6ff) 22%, transparent);
  box-shadow: inset 0 0 0 1px var(--ss-accent, #58a6ff);
}

.swx-twist {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  font-size: 9px;
  color: var(--swx-dim, #8b949e);
  background: none;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: transform .12s ease;
}
.swx-twist.is-open { transform: rotate(90deg); }
.swx-twist.is-leaf { cursor: default; }
.swx-twist:hover:not(.is-leaf) { color: var(--ss-text, #e6edf3); }

.swx-node-ico {
  flex: 0 0 auto;
  width: 18px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  font-size: 11px;
  color: var(--swx-level-color, var(--ss-green, #3fb950));
  background: color-mix(in srgb, var(--swx-level-color, #3fb950) 9%, transparent);
  text-align: center;
}
.swx-node-t {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.swx-node-n {
  flex: 0 0 auto;
  min-width: 18px;
  padding: 1px 5px;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
  color: var(--swx-dim, #8b949e);
  background: var(--ss-surface3, #21262d);
  border-radius: 9px;
}
.swx-node-menu {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--swx-dim, #8b949e);
  background: none;
  border: 0;
  border-radius: 5px;
  opacity: 0;
  cursor: pointer;
}
.swx-node:hover .swx-node-menu,
.swx-node.is-active .swx-node-menu,
.swx-node-menu:focus-visible { opacity: 1; }
.swx-node-menu:hover { color: var(--ss-text, #e6edf3); background: var(--ss-border, #30363d); }

.swx-tree-empty {
  padding: 18px 12px;
  font-size: 12px;
  text-align: center;
  color: var(--swx-dim, #8b949e);
}

.swx-rail-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 8px;
  border-top: 1px solid var(--ss-border, #30363d);
}
.swx-rail-count { font-size: 11px; color: var(--swx-dim, #8b949e); }

/* ═══════════════════════════════════════════════════════════════════════
   3 · MAIN CANVAS
   ═══════════════════════════════════════════════════════════════════════ */

.swx-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;                       /* same grid min-size rule as the rail */
  background: var(--ss-surface, #0d1117);
}

/* swx-9 · HEADER BANDS NEVER PAY FOR A TALL ARTICLE.
   `.swx-body` deliberately has an auto flex basis because its contents are
   the scrolling document. When that document is taller than the workspace,
   flexbox otherwise distributes the negative free space across EVERY direct
   child — including the lane tabs. In production a 19px tab was compressed
   into a 7px strip, leaving its label hidden behind the body boundary.
   Only the body is allowed to absorb that pressure; all structural chrome
   keeps its intrinsic block size in reader and edit mode.

   stx-4 · There are THREE bands now, not four: `.swx-contextbar` was removed
   because every fact on it was already on the meta line above or the tab
   strip below it. The rule is unchanged in kind — it still names every direct
   structural child of `.swx-main` except the body. */
.swx-main > .swx-topbar,
.swx-main > .swx-head,
.swx-main > .swx-tabs {
  flex: 0 0 auto;
}

.swx-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--ss-border, #30363d);
}
.swx-crumbs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
}
.swx-crumbs::-webkit-scrollbar { display: none; }
.swx-crumb {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  font: inherit;
  font-size: 11.5px;
  color: var(--swx-dim, #8b949e);
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.swx-crumb:hover { color: var(--ss-text, #e6edf3); background: var(--ss-surface3, #21262d); }
.swx-crumb.is-last { color: var(--ss-text, #e6edf3); font-weight: 600; cursor: default; }
.swx-crumb.is-last:hover { background: none; }
.swx-crumb-sep { flex: 0 0 auto; font-size: 10px; color: var(--ss-border2, #3d444d); }
.swx-topact { flex: 0 0 auto; display: flex; gap: 6px; }

.swx-head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 16px 10px;
}
.swx-head-ico {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: var(--ss-accent, #58a6ff);
  background: color-mix(in srgb, var(--ss-accent, #58a6ff) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 30%, transparent);
  border-radius: 9px;
}
.swx-head-t { flex: 1 1 auto; min-width: 0; }
.swx-title {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 680;
  line-height: 1.25;
  color: var(--ss-text, #e6edf3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.swx-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.swx-metabit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--swx-dim, #8b949e);
}
.swx-metabit > i { font-size: 10px; opacity: .9; }

/* ── stx-4 · THE STATE PILL ─────────────────────────────────────────────
   The meta line now LEADS with exactly one claim about the article's state —
   private / starter / being edited — because the 31px `.swx-contextbar` that
   used to carry it said the same things the meta line and the tab strip
   already said, and contradicted itself doing so (see template_engine.js,
   stx-4). A pill, not a plain metabit, so "state" reads as different in kind
   from the neutral counts beside it.

   These are TINTED surfaces (11–13% of the hue), never a solid accent fill,
   so the ink on them stays the hue itself and the mey-1 "ink on a solid
   accent fill" contract does not apply. Light-ramp ink is restated per pill
   rather than inherited: a hue that clears 4.5:1 on #0d1117 does not clear it
   on #ffffff, which memory.md records as its own class of defect. */
.swx-metabit.is-own,
.swx-metabit.is-tpl,
.swx-metabit.swx-context-status.is-edit {
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .01em;
}
.swx-metabit.is-own {
  color: #3fb950;
  border-color: color-mix(in srgb, #3fb950 42%, transparent);
  background: color-mix(in srgb, #3fb950 11%, transparent);
}
.swx-metabit.is-tpl {
  color: #d29922;
  border-color: color-mix(in srgb, #d29922 45%, transparent);
  background: color-mix(in srgb, #d29922 12%, transparent);
}
.swx-metabit.swx-context-status.is-edit {
  color: var(--ss-accent, #58a6ff);
  border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 42%, transparent);
  background: color-mix(in srgb, var(--ss-accent, #58a6ff) 12%, transparent);
}
.swx-metabit.is-own > i,
.swx-metabit.is-tpl > i,
.swx-metabit.swx-context-status.is-edit > i { opacity: 1; }

/* Tabs — the lane filter. */
.swx-tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 12px;
  border-bottom: 1px solid var(--ss-border, #30363d);
  overflow-x: auto;
  scrollbar-width: none;
}
.swx-tabs::-webkit-scrollbar { display: none; }
.swx-tab {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px 9px;
  font: inherit;
  font-size: 12px;
  font-weight: 560;
  color: var(--swx-dim, #8b949e);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
.swx-tab:hover { color: var(--ss-text, #e6edf3); }
.swx-tab.is-active {
  color: var(--ss-text, #e6edf3);
  border-bottom-color: var(--ss-accent, #58a6ff);
}
.swx-tab > i { font-size: 11px; }
.swx-tab-n {
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  padding: 1px 5px;
  color: var(--swx-dim, #8b949e);
  background: var(--ss-surface3, #21262d);
  border-radius: 9px;
}
.swx-tab.is-active .swx-tab-n { color: var(--ss-accent, #58a6ff); }

.swx-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px 22px;
}
.swx-lane + .swx-lane { margin-top: 20px; }
.swx-lane-h {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 10px;
  padding-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--swx-dim, #8b949e);
  border-bottom: 1px dashed var(--ss-border, #30363d);
}
.swx-lane-h > i { font-size: 11px; }

.swx-lane-empty {
  padding: 26px 18px;
  text-align: center;
  border: 1px dashed var(--ss-border, #30363d);
  border-radius: 9px;
}
.swx-lane-empty-art {
  width: 38px;
  height: 38px;
  margin: 0 auto 9px;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: var(--swx-dim, #8b949e);
  background: var(--ss-surface2, #161b22);
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 10px;
}
.swx-lane-empty h4 { margin: 0 0 5px; font-size: 13px; font-weight: 620; color: var(--ss-text, #e6edf3); }
.swx-lane-empty p { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--swx-dim, #8b949e); }

/* ═══════════════════════════════════════════════════════════════════════
   4 · EDIT AFFORDANCES
   ═══════════════════════════════════════════════════════════════════════ */

.swx-tplnote {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 11px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--swx-dim, #8b949e);
  background: var(--ss-surface2, #161b22);
  border: 1px dashed var(--ss-border, #30363d);
  border-radius: 8px;
}
.swx-tplnote > i { margin-top: 2px; color: var(--ss-accent, #58a6ff); }
.swx-tplnote b { color: var(--ss-text, #e6edf3); }

/* Per-block tools. Positioned inside the widget's own box so they travel with
   it; revealed on hover so a reading editor is not looking at a wall of
   buttons. */
/* `.tcx-w` is deliberately NOT positioned in template_studio.css, so the tool
   strip would anchor to whatever ancestor happens to be positioned — several
   sections up the tree. Scoped to lanes only: a canvas page's widgets are
   already absolutely placed and must not be given a new containing block. */
.swx-lane .tcx-w { position: relative; }

.swx-wtools {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 3;
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--ss-surface2, #161b22);
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 7px;
  opacity: 0;
  transition: opacity .12s ease;
}
.tcx-w:hover .swx-wtools,
.swx-wtools:focus-within { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   5 · SHARED CONTROLS
   ═══════════════════════════════════════════════════════════════════════ */

.swx-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 560;
  color: var(--ss-text, #e6edf3);
  background: var(--ss-surface3, #21262d);
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 7px;
  cursor: pointer;
}
.swx-btn:hover { border-color: var(--ss-accent, #58a6ff); color: var(--ss-accent, #58a6ff); }
.swx-btn.sm { padding: 4px 8px; font-size: 11px; }

.swx-icon-btn {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--swx-dim, #8b949e);
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
}
.swx-icon-btn:hover { color: var(--ss-text, #e6edf3); background: var(--ss-surface3, #21262d); }
.swx-icon-btn.danger:hover { color: var(--ss-danger, #f85149); background: color-mix(in srgb, var(--ss-danger, #f85149) 14%, transparent); }

/* ═══════════════════════════════════════════════════════════════════════
   6 · SHAREPOINT DOCUMENT VIEWER
   ═══════════════════════════════════════════════════════════════════════ */

.swx-docs { display: flex; flex-direction: column; gap: 14px; }

.swx-doc {
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 10px;
  overflow: hidden;
  background: var(--ss-surface2, #161b22);
}
.swx-doc-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--ss-border, #30363d);
}
.swx-doc-ic {
  --swx-dc: var(--ss-accent, #58a6ff);
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--swx-dc);
  background: color-mix(in srgb, var(--swx-dc) 14%, transparent);
  border-radius: 7px;
}
.swx-doc-t {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ss-text, #e6edf3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.swx-doc-m { flex: 0 0 auto; font-size: 11px; color: var(--swx-dim, #8b949e); }
.swx-doc-act { flex: 0 0 auto; display: flex; gap: 2px; }

.swx-doc-stage {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--ss-bg, #010409);
}
.swx-doc-skel {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 8px;
  justify-items: center;
  font-size: 12px;
  color: var(--swx-dim, #8b949e);
}
/* The frame is white because a Word document is white. Painting our dark
   surface behind it makes the loading moment flash black-then-white. */
.swx-doc-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}
.swx-doc-img { max-width: 100%; max-height: 100%; object-fit: contain; }
.swx-doc-video { width: 100%; height: 100%; background: #000; }

.swx-doc-card {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 26px 20px;
  text-align: center;
}
.swx-doc-card-ic {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: var(--swx-dim, #8b949e);
  background: var(--ss-surface3, #21262d);
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 11px;
}
.swx-doc-card-t {
  margin: 0;
  max-width: 46ch;
  font-size: 12px;
  line-height: 1.55;
  color: var(--swx-dim, #8b949e);
}
.swx-doc-note {
  padding: 7px 11px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--swx-dim, #8b949e);
  border-top: 1px solid var(--ss-border, #30363d);
}
.swx-doc.is-blocked { border-color: color-mix(in srgb, var(--ss-danger, #f85149) 45%, var(--ss-border, #30363d)); }

/* ═══════════════════════════════════════════════════════════════════════
   7 · OUTLOOK (.eml) READER
   The ENVELOPE is ours — our markup, our escaper, our theme. The BODY is the
   sender's and lives inside a sandboxed frame. The visual separation is not
   decoration: it is what stops a sender forging header markup inside the body
   and having it read as a real envelope.
   ═══════════════════════════════════════════════════════════════════════ */

.swx-eml {
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 10px;
  overflow: hidden;
  background: var(--ss-surface2, #161b22);
}
.swx-eml-skel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px;
  font-size: 12px;
  color: var(--swx-dim, #8b949e);
}
.swx-eml-env { padding: 11px 13px; border-bottom: 1px solid var(--ss-border, #30363d); }
.swx-eml-sub {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 660;
  line-height: 1.35;
  color: var(--ss-text, #e6edf3);
}
.swx-eml-sub > i { margin-top: 2px; font-size: 12px; color: var(--ss-accent, #58a6ff); }
.swx-eml-rows {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 10px;
  margin: 0;
}
.swx-eml-rows dt {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--swx-dim, #8b949e);
  padding-top: 1px;
}
.swx-eml-rows dd {
  margin: 0;
  min-width: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ss-text, #e6edf3);
  word-break: break-word;
}

.swx-eml-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--swx-dim, #8b949e);
  background: var(--ss-surface3, #21262d);
  border-bottom: 1px solid var(--ss-border, #30363d);
}
.swx-eml-bar > i { flex: 0 0 auto; color: var(--ss-accent, #58a6ff); }
.swx-eml-bar > span { flex: 1 1 auto; min-width: 0; }
.swx-eml-bar.warn > i { color: var(--ss-warn, #d29922); }

.swx-eml-body { background: #fff; }
.swx-eml-frame { display: block; width: 100%; border: 0; background: #fff; }
/* The inline fallback and the measuring probe use the SAME sanitised string
   the frame does (contract S5), so they must not inherit the studio's dark
   ink — the message keeps the colours its sender chose. */
.swx-eml-inline,
.swx-eml-probe {
  color-scheme: only light;
  background: #fff;
  color: #111;
  padding: 16px;
  font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.swx-eml-inline img, .swx-eml-probe img { max-width: 100%; height: auto; }
.swx-eml-inline table, .swx-eml-probe table { max-width: 100%; border-collapse: collapse; }
.swx-eml-probe {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  left: -99999px;
  top: 0;
}
.swx-eml-plain {
  margin: 0;
  white-space: pre-wrap;
  font: 12.5px/1.6 ui-monospace, Menlo, Consolas, monospace;
}

.swx-eml-atts { padding: 10px 13px; border-top: 1px solid var(--ss-border, #30363d); }
.swx-eml-atts-h {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--swx-dim, #8b949e);
}
.swx-att {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  text-decoration: none;
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 8px;
  background: var(--ss-surface, #0d1117);
}
.swx-att + .swx-att { margin-top: 5px; }
.swx-att:hover:not(.is-inert) { border-color: var(--ss-accent, #58a6ff); }
.swx-att.is-inert { cursor: default; opacity: .82; }
.swx-att-ic { flex: 0 0 auto; font-size: 12px; color: var(--swx-dim, #8b949e); }
.swx-att-t {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--ss-text, #e6edf3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.swx-att-m { flex: 0 0 auto; font-size: 10.5px; color: var(--swx-dim, #8b949e); }
.swx-att-go { flex: 0 0 auto; font-size: 10px; color: var(--swx-dim, #8b949e); }

.swx-eml-err { padding: 20px 18px; text-align: center; }
.swx-eml-err > i { font-size: 18px; color: var(--ss-warn, #d29922); }
.swx-eml-err h4 { margin: 9px 0 6px; font-size: 13px; font-weight: 640; color: var(--ss-text, #e6edf3); }
.swx-eml-err-m {
  margin: 0 auto 8px;
  max-width: 52ch;
  font-size: 11.5px;
  font-family: var(--ss-mono, ui-monospace, Consolas, monospace);
  color: var(--ss-warn, #d29922);
}
.swx-eml-err-h {
  margin: 8px auto 0;
  max-width: 56ch;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--swx-dim, #8b949e);
}
.swx-eml-err-h b { color: var(--ss-text, #e6edf3); }
.swx-eml-err-a { display: flex; justify-content: center; gap: 8px; margin-top: 12px; }

/* ── The e-mail editor ─────────────────────────────────────────────── */
.swx-emled { display: grid; gap: 6px; }
.swx-emled-or {
  margin: 4px 0 2px;
  font-size: 11px;
  color: var(--swx-dim, #8b949e);
  text-align: center;
}
.swx-emled-drop {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 16px;
  font-size: 11.5px;
  color: var(--swx-dim, #8b949e);
  background: var(--ss-surface2, #161b22);
  border: 1px dashed var(--ss-border2, #3d444d);
  border-radius: 9px;
  cursor: pointer;
  text-align: center;
}
.swx-emled-drop > i { font-size: 16px; }
.swx-emled-drop b { color: var(--ss-text, #e6edf3); }
.swx-emled-drop:hover,
.swx-emled-drop.is-over {
  border-color: var(--ss-accent, #58a6ff);
  color: var(--ss-accent, #58a6ff);
  background: color-mix(in srgb, var(--ss-accent, #58a6ff) 8%, transparent);
}
.swx-emled-paste summary {
  font-size: 11.5px;
  color: var(--swx-dim, #8b949e);
  cursor: pointer;
  padding: 4px 0;
}
.swx-emled-paste summary:hover { color: var(--ss-text, #e6edf3); }
.swx-emled-state {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 22px;
  font-size: 11.5px;
}
.swx-emled-ok { color: var(--ss-green, #3fb950); display: inline-flex; align-items: center; gap: 6px; }
.swx-emled-ok b { color: var(--ss-text, #e6edf3); }
.swx-emled-bad { color: var(--ss-danger, #f85149); display: inline-flex; align-items: center; gap: 6px; }

/* ═══════════════════════════════════════════════════════════════════════
   8 · LIGHT RAMP — only where the shell token is not enough
   `--ss-*` carries most of it; these are the surfaces whose contrast was
   measured under 4.5:1 on the light ramp with the alpha stack composited.
   ═══════════════════════════════════════════════════════════════════════ */

html[data-ss-theme="light"] .swx { background: var(--ss-surface, #ffffff); }
html[data-ss-theme="light"] .swx-doc-stage { background: #f4f6f8; }
html[data-ss-theme="light"] .swx-node.is-active {
  background: color-mix(in srgb, var(--ss-accent, #0969da) 13%, transparent);
}
/* stx-4 · The state pills carry their own light-ramp ink. `is-tpl` used to be
   the accent and is now amber, so inheriting the old accent-derived value here
   would have left the "Starter content" pill blue-inked on an amber tint —
   a hue is not ink, and a value tuned for #0d1117 is not a value for #ffffff. */
html[data-ss-theme="light"] .swx-metabit.is-tpl { color: #7a4f00; }
html[data-ss-theme="light"] .swx-metabit.is-own { color: #14532d; }
html[data-ss-theme="light"] .swx-metabit.swx-context-status.is-edit {
  color: color-mix(in srgb, var(--ss-accent, #0969da) 80%, #0b1017);
}
/* ── stx-4 · LIGHT-RAMP INK FOR THE DEPTH LADDER — MEASURED, NOT MIXED ──
   This was one blanket rule: color-mix(--swx-level-color 76%, #0b1017). A
   single darkening factor is not ink. Measured on a fresh light load against
   the real #ffffff ground, that rule left THREE tones failing WCAG AA —
   teal 3.93:1, blue 4.11:1, purple 4.33:1 — while green and amber passed
   only because they resolve through --ss-green / --ss-warn, which the light
   theme already re-points to darker values. The four hard-coded hues had
   nothing re-pointing them, so they shipped a dark-tuned hue onto white.

   Each tone now states its own light ink, solved to clear 4.5:1 with margin
   rather than to sit on the line, and re-measured in the browser after the
   change. Green and amber keep the darker established values used elsewhere
   in this sheet so nothing regresses. */
html[data-ss-theme="light"] .swx-node[data-tone="0"] .swx-node-ico { color: #14532d; }  /* 10.4:1 */
html[data-ss-theme="light"] .swx-node[data-tone="1"] .swx-node-ico { color: #20736d; }  /*  5.7:1 */
html[data-ss-theme="light"] .swx-node[data-tone="2"] .swx-node-ico { color: #6e5e99; }  /*  5.6:1 */
html[data-ss-theme="light"] .swx-node[data-tone="3"] .swx-node-ico { color: #7a4f00; }  /*  8.6:1 */
html[data-ss-theme="light"] .swx-node[data-tone="4"] .swx-node-ico { color: #935756; }  /*  5.6:1 */
html[data-ss-theme="light"] .swx-node[data-tone="5"] .swx-node-ico { color: #3e6d84; }  /*  5.6:1 */
/* Any depth whose tone rule is missing still gets readable ink rather than a
   dark-ramp hue: the ladder cycles 0-5, so this is a belt-and-braces floor. */
html[data-ss-theme="light"] .swx-node-ico { color: color-mix(in srgb, var(--swx-level-color, #1a8a4a) 60%, #0b1017); }
html[data-ss-theme="light"] .swx-tab.is-active .swx-tab-n {
  color: color-mix(in srgb, var(--ss-accent, #0969da) 80%, #0b1017);
}
html[data-ss-theme="light"] .swx-emled-ok {
  color: color-mix(in srgb, var(--ss-green, #3fb950) 52%, #0b1017);
}
html[data-ss-theme="light"] .swx-eml-err-m {
  color: color-mix(in srgb, var(--ss-warn, #d29922) 46%, #0b1017);
}
/* A browser without color-mix falls back to the shell's own ink rather than
   to a colour it cannot compute — never to an unreadable one. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  html[data-ss-theme="light"] .swx-metabit.is-tpl,
  html[data-ss-theme="light"] .swx-metabit.is-own,
  html[data-ss-theme="light"] .swx-metabit.swx-context-status.is-edit,
  html[data-ss-theme="light"] .swx-node-ico,
  html[data-ss-theme="light"] .swx-tab.is-active .swx-tab-n,
  html[data-ss-theme="light"] .swx-emled-ok,
  html[data-ss-theme="light"] .swx-eml-err-m { color: var(--ss-text, #1f2328); }
}

/* ═══════════════════════════════════════════════════════════════════════
   9 · RESPONSIVE
   Below 900px the rail becomes an overlay rather than a column: at that
   width a 268px rail leaves under 400px of article, which is not a reading
   column. The toggle in the top bar is the only way in and out, so it is
   never hidden.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .swx { grid-template-columns: minmax(0, 1fr); position: relative; }
  .swx-rail {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 6;
    width: var(--swx-rail);
    max-width: 82%;
    box-shadow: 6px 0 24px rgba(0, 0, 0, .35);
  }
  .swx.rail-off .swx-rail { display: none; }
  .swx:not(.rail-off) .swx-main { pointer-events: auto; }
}
@media (min-width: 901px) {
  /* On a wide screen the rail is the primary navigation and starts open; the
     toggle still works, it simply is not the default. */
  .swx-railtoggle { display: none; }
}

/* The rail toggle must remain reachable when the rail is hidden at ANY width
   — otherwise closing it on a wide screen is a one-way door. */
.swx.rail-off .swx-railtoggle { display: grid; }

@media (prefers-reduced-motion: reduce) {
  .swx-twist, .swx-wtools { transition: none; }
}


/* ═══════════════════════════════════════════════════════════════════════
   10 · ENTERPRISE CONTEXT + UNIVERSAL WIDGET DOCK (swx-2)
   ─────────────────────────────────────────────────────────────────────
   The dock is deliberately a local surface inside the Wiki main column. It
   does not replace the topic rail or the lane filter; it makes authoring
   capability visible without opening a hidden action menu.
   ═══════════════════════════════════════════════════════════════════════ */
.swx-contextbar {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  padding: 5px 14px;
  color: var(--swx-dim, #8b949e);
  background: color-mix(in srgb, var(--ss-surface2, #161b22) 72%, transparent);
  border-bottom: 1px solid var(--ss-border, #30363d);
  overflow-x: auto;
  scrollbar-width: none;
}
.swx-contextbar::-webkit-scrollbar { display: none; }
.swx-context-scope,
.swx-context-fact,
.swx-context-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  min-height: 20px;
  padding: 2px 7px;
  font-size: 10.5px;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 999px;
}
.swx-context-scope { font-weight: 700; letter-spacing: .01em; color: var(--ss-text, #e6edf3); background: var(--ss-surface3, #21262d); border-color: var(--ss-border, #30363d); }
.swx-context-scope.is-shared { 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); }
.swx-context-scope.is-local { color: #3fb950; background: color-mix(in srgb, #3fb950 10%, transparent); border-color: color-mix(in srgb, #3fb950 28%, transparent); }
html[data-ss-theme="light"] .swx-context-scope.is-local { color: #1f7a3e; }
.swx-context-fact { color: var(--swx-dim, #8b949e); }
.swx-context-fact > i { color: var(--ss-accent, #58a6ff); font-size: 10px; }
.swx-context-spacer { flex: 1 1 auto; min-width: 8px; }
.swx-context-status { color: var(--swx-dim, #8b949e); }
.swx-context-status > i { color: #3fb950; }
.swx-context-status.is-edit { color: var(--ss-accent, #58a6ff); }
.swx-context-status.is-edit > i { color: var(--ss-accent, #58a6ff); }

.swx-lane-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  margin-top: 12px;
  padding: 0 12px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  color: var(--ss-accent, #58a6ff);
  background: color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 30%, transparent);
  border-radius: 7px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.swx-lane-cta:hover { color: var(--ss-text, #e6edf3); background: color-mix(in srgb, var(--ss-accent, #58a6ff) 18%, transparent); border-color: var(--ss-accent, #58a6ff); }
.swx-lane-cta:focus-visible { outline: 2px solid var(--ss-accent, #58a6ff); outline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════════════════════
   swx-3 · THE INLINE COMPOSER, THE ENTERPRISE BLOCKS AND FULL SCREEN
   (2026-08-14, MACE)
   ───────────────────────────────────────────────────────────────────────────
   Appended LAST in this file, which is itself the last of the three Standard &
   Training sheets — so these rules win over `template_studio.css` §9 where they
   must, and still lose to the guarded `enterprise_theme.css`, which stays last
   overall. Nothing here uses `!important`.

   CONTRAST — measured on both ramps with transitions frozen and the whole
   alpha stack composited (all three ways a naive measurement lies are recorded
   in `memory.md`). Secondary ink resolves through `--swx-dim`, which is already
   a step darker on the light ramp.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 10 · THE COMPOSER RAIL ────────────────────────────────────────────
   The end-of-lane affordance. Deliberately quiet until hovered or focused:
   it sits inside the reading flow, and a loud control there reads as content. */
.swx-compose {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 4px;
  padding: 4px;
  border: 1px dashed var(--ss-border, #30363d);
  border-radius: 10px;
  background: transparent;
  transition: border-color .16s ease, background .16s ease;
}
.swx-compose:hover,
.swx-compose:focus-within {
  border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 55%, transparent);
  background: color-mix(in srgb, var(--ss-accent, #58a6ff) 5%, transparent);
}
.swx-compose-add {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 8px;
  background: var(--ss-surface2, #161b22);
  color: var(--ss-text, #e6edf3);
  cursor: pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
}
.swx-compose-add:hover {
  transform: translateY(-1px);
  border-color: var(--ss-accent, #58a6ff);
  background: color-mix(in srgb, var(--ss-accent, #58a6ff) 16%, var(--ss-surface2, #161b22));
}
.swx-compose-add:active { transform: translateY(0); }
.swx-compose-in {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ss-text, #e6edf3);
  font: inherit;
  font-size: 13px;
  padding: 6px 2px;
  outline: none;
}
.swx-compose-in::placeholder { color: var(--swx-dim); }
.swx-compose-hint {
  flex: 0 0 auto;
  opacity: 0;
  transition: opacity .16s ease;
}
.swx-compose:hover .swx-compose-hint,
.swx-compose:focus-within .swx-compose-hint { opacity: 1; }
.swx-compose-hint kbd,
.swx-cmd-foot kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  border: 1px solid var(--ss-border, #30363d);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--ss-surface2, #161b22);
  color: var(--swx-dim);
  font: 600 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
}

/* The freshly inserted block flashes once so the author's eye lands on it. */
.swx-justadded {
  animation: swxJustAdded 1.4s ease-out 1;
  border-radius: 10px;
}
@keyframes swxJustAdded {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ss-accent, #58a6ff) 70%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}

/* ── 11 · THE "/" BLOCK MENU ───────────────────────────────────────────
   PORTALED TO <body>. `memory.md` records that an overlay inside `#main`
   loses to fixed app chrome and to any transform / filter / contain ancestor,
   and this shell has all three — so the portal is the placement, not a
   preference. Positioned imperatively; no `position: absolute` inside a
   clipped parent can be made to work here. */
.swx-cmd {
  position: fixed;
  z-index: 2147483000;              /* above the studio's own fixed chrome */
  display: flex;
  flex-direction: column;
  max-height: min(60vh, 460px);
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 12px;
  background: var(--ss-surface, #0d1117);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35);
  overflow: hidden;
  animation: swxCmdIn .12s ease-out;
}
html[data-ss-theme="light"] .swx-cmd {
  box-shadow: 0 18px 44px rgba(15, 23, 42, .18), 0 2px 8px rgba(15, 23, 42, .1);
}
@keyframes swxCmdIn {
  from { opacity: 0; transform: translateY(-4px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.swx-cmd-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ss-border, #30363d);
  background: var(--ss-surface2, #161b22);
}
.swx-cmd-q {
  flex: 1 1 auto;
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
  color: var(--swx-dim);
}
.swx-cmd-q input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0; background: transparent; outline: none;
  color: var(--ss-text, #e6edf3);
  font: inherit; font-size: 13px;
}
.swx-cmd-lane {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--ss-accent, #58a6ff) 40%, transparent);
  background: color-mix(in srgb, var(--ss-accent, #58a6ff) 12%, transparent);
  color: var(--ss-text, #e6edf3);
  font-size: 11px; font-weight: 700; letter-spacing: .01em;
}
.swx-cmd-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px; }
.swx-cmd-g {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 8px 5px;
  color: var(--swx-dim);
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
}
.swx-cmd-i {
  width: 100%;
  display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.swx-cmd-i.is-on {
  border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 55%, transparent);
  background: color-mix(in srgb, var(--ss-accent, #58a6ff) 13%, transparent);
}
.swx-cmd-ic {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 8px;
  background: var(--ss-surface2, #161b22);
  color: var(--ss-accent, #58a6ff);
  font-size: 12px;
}
.swx-cmd-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.swx-cmd-b b { font-size: 12.5px; font-weight: 700; color: var(--ss-text, #e6edf3); }
.swx-cmd-b small {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--swx-dim);
}
.swx-cmd-tag {
  flex: 0 0 auto;
  align-self: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, #a371f7 18%, transparent);
  /* Measured 4.19:1 against its own tint on the dark ramp - a 9.5px chip needs
     4.5:1. Mixing further TOWARDS the surface ink rather than the hue is what
     moves the ratio; darkening the tint alone does not (the swx-1 lesson). */
  color: color-mix(in srgb, #a371f7 42%, var(--ss-text, #e6edf3));
  font-size: 9.5px; font-weight: 800; font-style: normal;
  letter-spacing: .06em; text-transform: uppercase;
}
html[data-ss-theme="light"] .swx-cmd-tag { color: #5b21b6; background: #ede9fe; }
.swx-cmd-none {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 30px 18px;
  text-align: center;
  color: var(--swx-dim);
}
.swx-cmd-none i { font-size: 20px; opacity: .7; }
.swx-cmd-none b { color: var(--ss-text, #e6edf3); font-size: 13px; }
.swx-cmd-none span { font-size: 12px; }
.swx-cmd-foot {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 12px;
  border-top: 1px solid var(--ss-border, #30363d);
  background: var(--ss-surface2, #161b22);
  color: var(--swx-dim);
  font-size: 11px;
}
.swx-cmd-foot span { display: inline-flex; align-items: center; gap: 4px; }

/* ── 12 · SEEDED-vs-OWNED scope chip ───────────────────────────────── */
.swx-context-scope.is-seed {
  border-color: color-mix(in srgb, #d29922 45%, transparent);
  background: color-mix(in srgb, #d29922 12%, transparent);
}
html[data-ss-theme="light"] .swx-context-scope.is-seed { color: #7a4f00; }
.swx-context-scope.is-local {
  border-color: color-mix(in srgb, #3fb950 42%, transparent);
  background: color-mix(in srgb, #3fb950 11%, transparent);
}
html[data-ss-theme="light"] .swx-context-scope.is-local { color: #14532d; }

.swx-lane-cta-k {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ss-text, #e6edf3) 12%, transparent);
  font-size: 10.5px; font-style: normal; font-weight: 700;
  opacity: .85;
}

/* ── 13 · FULL SCREEN ──────────────────────────────────────────────────
   THE BROWSER WINDOW, NOT THE SCREEN (swx-4, MACE). The native Fullscreen
   API is deliberately never called: it takes the browser's own tabs, address
   bar and the OS chrome with it, which costs the user their tabs and their
   back button to gain ~80px in a console they are still navigating.

   A CLASS, not an overlay. An overlay inside `#main` loses to fixed app
   chrome and to every transform / filter / contain ancestor in this shell;
   hiding the chrome needs no stacking context, so nothing can clip it.
   `contain: layout paint` gives the browser a self-contained layer to
   composite, without a transform that would break `position: fixed` for
   anything inside. */
html.tc-fullscreen,
html.tc-fullscreen body { overflow: hidden; }
/* The REAL shell chrome, by the names the shipped markup actually uses:
   `header.ss-header`, `nav.ss-tabs`, the two `aside.ss-sidebar` rails and the
   workspace breadcrumb toolbar. Hiding them is not only cosmetic - it takes
   them out of the tab order, so focus cannot walk behind the panel. */
html.tc-fullscreen .ss-header,
html.tc-fullscreen .ss-tabs,
html.tc-fullscreen .ss-sidebar,
html.tc-fullscreen .ss-canvas-toolbar { display: none; }
html.tc-fullscreen .tc-gp.is-full,
html.tc-fullscreen .tc-wrap.is-full {
  position: fixed;
  inset: 0;
  z-index: 2147482000;
  margin: 0;
  border-radius: 0;
  border: 0;
  padding: 14px 18px 10px;
  background: var(--ss-bg, #010409);
  overflow: auto;
  overscroll-behavior: contain;
  contain: layout paint;
  will-change: transform;
}
/* Full screen exists to make the ARTICLE bigger. The workspace caps itself at
   `100vh - 232px` for the normal shell; in full screen that chrome is gone,
   so the cap has to move with it or the page keeps a 232px hole. */
html.tc-fullscreen .swx { height: calc(100vh - 168px); }
.tc-gp-full.on {
  border-color: var(--ss-accent, #58a6ff);
  background: color-mix(in srgb, var(--ss-accent, #58a6ff) 18%, transparent);
  color: var(--ss-accent, #58a6ff);
}
@media (prefers-reduced-motion: reduce) {
  .swx-cmd { animation: none; }
  .swx-justadded { animation: none; }
  .swx-compose, .swx-compose-add { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   14 · THE ENTERPRISE BLOCKS
   ───────────────────────────────────────────────────────────────────────
   One visual language across all eight: a 1px hairline, a 10px radius, a
   tinted head strip and body text at 13px/1.6. They are read under time
   pressure on a support call, so the hierarchy is deliberately flat — one
   glance should answer "what am I looking at" without a second.
   ═══════════════════════════════════════════════════════════════════════ */

/* Shared editor scaffolding for the value-authored blocks. */
.tcx-ed-block { display: flex; flex-direction: column; gap: 8px; }
.tcx-ed-row { display: flex; align-items: center; gap: 10px; }
.tcx-ed-row2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.tcx-ed-lb {
  flex: 0 0 auto;
  min-width: 62px;
  color: var(--swx-dim);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.tcx-ed-ck {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--swx-dim);
  font-size: 12px;
  cursor: pointer;
}
@media (max-width: 620px) { .tcx-ed-row2 { grid-template-columns: minmax(0, 1fr); } }

/* ── Enterprise Callout ────────────────────────────────────────────────
   Asymmetric on purpose: a 4px tone rail, then the icon, then the copy. The
   asymmetry is what makes a column of them scannable — the eye follows one
   vertical line of colour instead of re-centring on each card. */
.tcx-notice {
  position: relative;
  display: grid;
  grid-template-columns: 4px 30px minmax(0, 1fr) auto;
  align-items: start;
  gap: 0 11px;
  padding: 12px 13px 12px 0;
  border: 1px solid color-mix(in srgb, var(--tcx-tone, #58a6ff) 34%, var(--ss-border, #30363d));
  border-radius: 10px;
  background: color-mix(in srgb, var(--tcx-tone, #58a6ff) 8%, var(--ss-surface, #0d1117));
  overflow: hidden;
}
.tcx-notice-rail {
  grid-column: 1;
  align-self: stretch;
  background: var(--tcx-tone, #58a6ff);
}
.tcx-notice-ic {
  grid-column: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  margin-left: 11px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--tcx-tone, #58a6ff) 20%, transparent);
  color: var(--tcx-tone, #58a6ff);
  font-size: 13px;
}
html[data-ss-theme="light"] .tcx-notice-ic {
  /* A saturated accent on its own 20% tint measures ~2.3:1 on the light ramp.
     Deriving the ink from the SAME custom property keeps the tone honest
     without an `!important` and without touching a shared token (C20). */
  color: color-mix(in srgb, var(--tcx-tone, #58a6ff) 55%, #0b1017);
}
.tcx-notice-b { grid-column: 3; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tcx-notice-t { font-size: 13px; font-weight: 750; color: var(--ss-text, #e6edf3); }
.tcx-notice-x { font-size: 12.5px; line-height: 1.6; color: var(--ss-text, #e6edf3); }
.tcx-notice-a {
  align-self: flex-start;
  margin-top: 2px;
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--tcx-tone, #58a6ff);
  font-size: 12px; font-weight: 700;
  text-decoration: none;
}
html[data-ss-theme="light"] .tcx-notice-a { color: color-mix(in srgb, var(--tcx-tone, #58a6ff) 52%, #0b1017); }
.tcx-notice-a:hover { text-decoration: underline; }
.tcx-notice-tag {
  grid-column: 4;
  align-self: start;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tcx-tone, #58a6ff) 18%, transparent);
  color: color-mix(in srgb, var(--tcx-tone, #58a6ff) 82%, var(--ss-text, #e6edf3));
  font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
html[data-ss-theme="light"] .tcx-notice-tag { color: color-mix(in srgb, var(--tcx-tone, #58a6ff) 48%, #0b1017); }

/* ── Step-by-Step Procedure ───────────────────────────────────────────── */
.tcx-sf {
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 10px;
  background: var(--ss-surface, #0d1117);
  overflow: hidden;
}
.tcx-sf-head {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--ss-border, #30363d);
  background: var(--ss-surface2, #161b22);
}
.tcx-sf-bar {
  flex: 1 1 auto;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ss-text, #e6edf3) 12%, transparent);
  overflow: hidden;
}
.tcx-sf-fill {
  display: block; height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #3fb950, #2ea043);
  transition: width .22s ease;
}
.tcx-sf.is-complete .tcx-sf-fill { background: linear-gradient(90deg, #3fb950, #56d364); }
.tcx-sf-count { flex: 0 0 auto; color: var(--swx-dim); font-size: 11.5px; font-weight: 700; }
.tcx-sf-exp, .tcx-sf-reset {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 7px;
  background: transparent;
  color: var(--swx-dim);
  cursor: pointer;
}
.tcx-sf-exp:hover, .tcx-sf-reset:hover { color: var(--ss-text, #e6edf3); border-color: var(--ss-accent, #58a6ff); }
.tcx-sf-exp.is-open i { transform: rotate(180deg); }
.tcx-sf-exp i { transition: transform .16s ease; }
.tcx-sf-list { list-style: none; margin: 0; padding: 0; counter-reset: sf; }
.tcx-sf-step { border-bottom: 1px solid color-mix(in srgb, var(--ss-border, #30363d) 60%, transparent); }
.tcx-sf-step:last-child { border-bottom: 0; }
.tcx-sf-hd { display: flex; align-items: stretch; gap: 0; }
.tcx-sf-tick {
  flex: 0 0 auto;
  width: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0;
  border-right: 1px solid color-mix(in srgb, var(--ss-border, #30363d) 60%, transparent);
  background: transparent;
  color: var(--swx-dim);
  cursor: pointer;
  position: relative;
}
.tcx-sf-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 50%;
  font-size: 11px; font-weight: 800;
}
.tcx-sf-tick .fa-check { display: none; font-size: 12px; }
.tcx-sf-step.is-done .tcx-sf-tick { color: #3fb950; }
.tcx-sf-step.is-done .tcx-sf-n { display: none; }
.tcx-sf-step.is-done .tcx-sf-tick .fa-check { display: inline-block; }
.tcx-sf-step.is-done .tcx-sf-t { text-decoration: line-through; opacity: .62; }
.tcx-sf-tog {
  flex: 1 1 auto;
  display: flex; align-items: center; gap: 9px;
  padding: 10px 11px;
  border: 0; background: transparent;
  color: var(--ss-text, #e6edf3);
  text-align: left;
  font: inherit; font-size: 13px; font-weight: 650;
  cursor: pointer;
  min-width: 0;
}
.tcx-sf-t { flex: 1 1 auto; min-width: 0; }
.tcx-sf-crit {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, #f85149 18%, transparent);
  color: #f85149;
  font-size: 10px; font-style: normal; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
html[data-ss-theme="light"] .tcx-sf-crit { color: #991b1b; background: #fee2e2; }
.tcx-sf-caret { flex: 0 0 auto; color: var(--swx-dim); transition: transform .16s ease; }
.tcx-sf-step.is-open .tcx-sf-caret { transform: rotate(180deg); }
.tcx-sf-step.is-crit .tcx-sf-tick { border-right-color: color-mix(in srgb, #f85149 40%, transparent); }
.tcx-sf-body { display: none; padding: 2px 13px 13px 53px; }
.tcx-sf-step.is-open .tcx-sf-body { display: block; }
.tcx-sf-p { margin: 0 0 8px; font-size: 12.5px; line-height: 1.6; color: var(--ss-text, #e6edf3); }
.tcx-sf-cmd {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px;
  padding: 7px 9px;
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 8px;
  background: var(--ss-surface2, #161b22);
}
.tcx-sf-cmd code {
  flex: 1 1 auto; min-width: 0;
  overflow-x: auto;
  white-space: pre;
  font: 12px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ss-text, #e6edf3);
}
.tcx-sf-copy {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 7px;
  background: transparent; color: var(--swx-dim); cursor: pointer;
}
.tcx-sf-copy:hover { color: var(--ss-accent, #58a6ff); border-color: var(--ss-accent, #58a6ff); }
.tcx-sf-exp, .tcx-sf-reset, .tcx-sf-copy { transition: color .14s ease, border-color .14s ease; }
.tcx-sf-exp:focus-visible, .tcx-sf-tick:focus-visible, .tcx-sf-tog:focus-visible {
  outline: 2px solid var(--ss-accent, #58a6ff); outline-offset: -2px;
}
/* The EXPECTED RESULT of a step. Its own class - `tcx-sf-exp` is the
   expand-all button, and two elements on one class is a selector waiting to
   hit the wrong one. */
.tcx-sf-expect {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, #3fb950 34%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, #3fb950 8%, transparent);
  color: var(--ss-text, #e6edf3);
  font-size: 12.5px; line-height: 1.55;
}
.tcx-sf-expect i { margin-top: 2px; color: #3fb950; }
html[data-ss-theme="light"] .tcx-sf-expect i { color: #15803d; }

/* ── Smart Snippet ─────────────────────────────────────────────────────
   Highlighting is applied to ALREADY-ESCAPED text by the engine, so every
   class below styles markup the engine wrote itself. */
.tcx-sn {
  margin: 0;
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 10px;
  background: var(--ss-surface, #0d1117);
  overflow: hidden;
}
.tcx-sn-head {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--ss-border, #30363d);
  background: var(--ss-surface2, #161b22);
  font-size: 11.5px;
}
.tcx-sn-lang {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--ss-accent, #58a6ff);
  font-weight: 700;
}
html[data-ss-theme="light"] .tcx-sn-lang { color: #1d4ed8; }
.tcx-sn-file {
  padding: 1px 7px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ss-text, #e6edf3) 9%, transparent);
  color: var(--swx-dim);
  font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.tcx-sn-sp { flex: 1 1 auto; }
.tcx-sn-ln { color: var(--swx-dim); }
.tcx-sn-wrap, .tcx-sn-copy {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px;
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 7px;
  background: transparent;
  color: var(--swx-dim);
  font: inherit; font-size: 11px; font-weight: 700;
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.tcx-sn-wrap:hover, .tcx-sn-copy:hover {
  color: var(--ss-text, #e6edf3);
  border-color: var(--ss-accent, #58a6ff);
  background: color-mix(in srgb, var(--ss-accent, #58a6ff) 12%, transparent);
}
.tcx-sn-wrap.is-on { color: var(--ss-accent, #58a6ff); border-color: var(--ss-accent, #58a6ff); }
.tcx-sn-body { display: flex; align-items: stretch; max-height: 460px; overflow: auto; }
.tcx-sn-gut {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 8px 10px 11px;
  border-right: 1px solid color-mix(in srgb, var(--ss-border, #30363d) 70%, transparent);
  background: color-mix(in srgb, var(--ss-text, #e6edf3) 4%, transparent);
  color: var(--swx-dim);
  font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: right;
  user-select: none;
}
.tcx-sn-code {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  overflow-x: auto;
  color: var(--ss-text, #e6edf3);
  font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre;
  tab-size: 2;
}
.tcx-sn.is-wrap .tcx-sn-code { white-space: pre-wrap; overflow-wrap: anywhere; }
.tcx-sn.is-wrap .tcx-sn-gut { display: none; }
.tcx-sn-kw { font-style: normal; font-weight: 700; color: #ff7b72; }
.tcx-sn-st { font-style: normal; color: #a5d6ff; }
.tcx-sn-cm { font-style: normal; color: #8b949e; }
.tcx-sn-nu { font-style: normal; color: #79c0ff; }
html[data-ss-theme="light"] .tcx-sn-kw { color: #b31d28; }
html[data-ss-theme="light"] .tcx-sn-st { color: #0a3069; }
html[data-ss-theme="light"] .tcx-sn-cm { color: #57606a; }
html[data-ss-theme="light"] .tcx-sn-nu { color: #0550ae; }
.tcx-sn-cap {
  padding: 7px 11px;
  border-top: 1px solid color-mix(in srgb, var(--ss-border, #30363d) 70%, transparent);
  color: var(--swx-dim);
  font-size: 11.5px;
}

/* ── Tabbed Container ─────────────────────────────────────────────────── */
.tcx-tb {
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 10px;
  background: var(--ss-surface, #0d1117);
  overflow: hidden;
}
.tcx-tb-strip {
  display: flex; gap: 2px;
  padding: 5px 5px 0;
  border-bottom: 1px solid var(--ss-border, #30363d);
  background: var(--ss-surface2, #161b22);
  overflow-x: auto;
}
.tcx-tb-t {
  flex: 0 0 auto;
  padding: 7px 13px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--swx-dim);
  font: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer;
  transition: color .14s ease, background .14s ease;
}
.tcx-tb-t:hover { color: var(--ss-text, #e6edf3); }
.tcx-tb-t.is-active {
  border-color: var(--ss-border, #30363d);
  background: var(--ss-surface, #0d1117);
  color: var(--ss-text, #e6edf3);
  margin-bottom: -1px;
  padding-bottom: 8px;
}
.tcx-tb-p { padding: 13px 14px; font-size: 12.5px; line-height: 1.65; }
.tcx-tb-p > :first-child { margin-top: 0; }
.tcx-tb-p > :last-child { margin-bottom: 0; }

/* ── Asset Shelf ──────────────────────────────────────────────────────── */
.tcx-as { display: flex; flex-direction: column; gap: 7px; }
.tcx-as-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px;
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 10px;
  background: var(--ss-surface, #0d1117);
  color: inherit;
  text-decoration: none;
  transition: border-color .14s ease, transform .14s ease, background .14s ease;
}
a.tcx-as-row:hover {
  border-color: var(--ss-accent, #58a6ff);
  background: color-mix(in srgb, var(--ss-accent, #58a6ff) 6%, var(--ss-surface, #0d1117));
  transform: translateX(2px);
}
.tcx-as-row.is-dead { opacity: .72; border-style: dashed; }
.tcx-as-ic {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--ss-text, #e6edf3) 8%, transparent);
  font-size: 15px;
}
/* Real file identity, not one blue link colour for everything. */
.tcx-as-ic.kind-doc   { color: #4a8ef7; background: color-mix(in srgb, #4a8ef7 15%, transparent); }
.tcx-as-ic.kind-sheet { color: #3fb950; background: color-mix(in srgb, #3fb950 15%, transparent); }
.tcx-as-ic.kind-slide { color: #f0883e; background: color-mix(in srgb, #f0883e 15%, transparent); }
.tcx-as-ic.kind-pdf   { color: #f85149; background: color-mix(in srgb, #f85149 15%, transparent); }
.tcx-as-ic.kind-video { color: #a371f7; background: color-mix(in srgb, #a371f7 15%, transparent); }
.tcx-as-ic.kind-image { color: #56d4dd; background: color-mix(in srgb, #56d4dd 15%, transparent); }
.tcx-as-ic.kind-zip   { color: #d29922; background: color-mix(in srgb, #d29922 15%, transparent); }
.tcx-as-ic.kind-link  { color: var(--swx-dim); }
html[data-ss-theme="light"] .tcx-as-ic.kind-doc   { color: #1d4ed8; }
html[data-ss-theme="light"] .tcx-as-ic.kind-sheet { color: #15803d; }
html[data-ss-theme="light"] .tcx-as-ic.kind-slide { color: #b45309; }
html[data-ss-theme="light"] .tcx-as-ic.kind-pdf   { color: #b91c1c; }
html[data-ss-theme="light"] .tcx-as-ic.kind-video { color: #6d28d9; }
html[data-ss-theme="light"] .tcx-as-ic.kind-image { color: #0e7490; }
html[data-ss-theme="light"] .tcx-as-ic.kind-zip   { color: #a16207; }
.tcx-as-b { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tcx-as-t {
  font-size: 12.8px; font-weight: 700; color: var(--ss-text, #e6edf3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tcx-as-m { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 11px; color: var(--swx-dim); }
.tcx-as-kind, .tcx-as-ext {
  padding: 1px 6px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ss-text, #e6edf3) 9%, transparent);
  font-style: normal; font-weight: 700;
}
.tcx-as-ext { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.tcx-as-warn { font-size: 11px; color: #d29922; }
html[data-ss-theme="light"] .tcx-as-warn { color: #92400e; }
.tcx-as-go { flex: 0 0 auto; color: var(--swx-dim); font-size: 12px; }

/* ── Document Library ─────────────────────────────────────────────────── */
/* The library has to FILL the box the author drew. `height: 100%` alone does
   not: the field wrapper `.tc-mf` between the widget body and this block is an
   auto-height block, so a percentage height resolves to `auto` and the whole
   library collapsed to its rail. Passing the height down that one link is the
   fix; `min-height` is the floor for the case where nobody has a height at
   all (a harness, a narrow reflow). Contract C2 is untouched - the BOX is
   still authored, and its body still scrolls. */
.tcx-t-doclibrary .tcx-w-body,
.tcx-t-doclibrary .tc-mf { height: 100%; min-height: 0; }
.tcx-dl {
  display: grid;
  grid-template-columns: minmax(190px, 250px) minmax(0, 1fr);
  min-height: 340px;
  /* `min-height: 0` on a grid item is what makes the rail scroll. Without it
     a grid item defaults to `min-height: auto`, grows past its track and gets
     clipped instead — the swx-2 trap, one layer down. */
  min-height: 0;
  height: 100%;
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 10px;
  background: var(--ss-surface, #0d1117);
  overflow: hidden;
}
.tcx-dl-rail {
  min-height: 0;
  overflow-y: auto;
  border-right: 1px solid var(--ss-border, #30363d);
  background: var(--ss-surface2, #161b22);
}
.tcx-dl-railh {
  position: sticky; top: 0; z-index: 1;
  padding: 8px 11px;
  border-bottom: 1px solid var(--ss-border, #30363d);
  background: var(--ss-surface2, #161b22);
  color: var(--swx-dim);
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.tcx-dl-i {
  width: 100%;
  display: flex; align-items: flex-start; gap: 9px;
  padding: 9px 11px;
  border: 0;
  border-left: 3px solid transparent;
  border-bottom: 1px solid color-mix(in srgb, var(--ss-border, #30363d) 55%, transparent);
  background: transparent;
  color: inherit; text-align: left; cursor: pointer;
}
.tcx-dl-i:hover { background: color-mix(in srgb, var(--ss-text, #e6edf3) 5%, transparent); }
.tcx-dl-i.is-active {
  border-left-color: var(--ss-accent, #58a6ff);
  background: color-mix(in srgb, var(--ss-accent, #58a6ff) 12%, transparent);
}
.tcx-dl-ic { margin-top: 2px; font-size: 13px; }
.tcx-dl-ic.kind-doc { color: #4a8ef7; } .tcx-dl-ic.kind-sheet { color: #3fb950; }
.tcx-dl-ic.kind-slide { color: #f0883e; } .tcx-dl-ic.kind-pdf { color: #f85149; }
.tcx-dl-ic.kind-link { color: var(--swx-dim); }
html[data-ss-theme="light"] .tcx-dl-ic.kind-doc { color: #1d4ed8; }
html[data-ss-theme="light"] .tcx-dl-ic.kind-sheet { color: #15803d; }
html[data-ss-theme="light"] .tcx-dl-ic.kind-slide { color: #b45309; }
html[data-ss-theme="light"] .tcx-dl-ic.kind-pdf { color: #b91c1c; }
.tcx-dl-ib { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tcx-dl-ib b { font-size: 12.3px; font-weight: 700; color: var(--ss-text, #e6edf3); line-height: 1.4; }
.tcx-dl-ib small { font-size: 11px; color: var(--swx-dim); }
.tcx-dl-pane { position: relative; min-height: 0; display: flex; flex-direction: column; }
.tcx-dl-frame { flex: 1 1 auto; width: 100%; min-height: 320px; border: 0; background: #fff; }
.tcx-dl-skel, .tcx-dl-card {
  flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  padding: 26px 20px;
  text-align: center;
  color: var(--swx-dim);
  font-size: 12.5px;
}
.tcx-dl-card i { font-size: 22px; opacity: .7; }
.tcx-dl-card b { color: var(--ss-text, #e6edf3); font-size: 13px; }
.tcx-dl-card span { max-width: 44ch; line-height: 1.55; }
.tcx-dl-open, .tcx-dl-openbar {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 8px;
  background: var(--ss-surface2, #161b22);
  color: var(--ss-text, #e6edf3);
  font-size: 12px; font-weight: 700;
  text-decoration: none;
}
.tcx-dl-openbar {
  flex: 0 0 auto;
  border-radius: 0;
  border: 0;
  border-top: 1px solid var(--ss-border, #30363d);
  padding: 7px 12px;
}
.tcx-dl-open:hover, .tcx-dl-openbar:hover { border-color: var(--ss-accent, #58a6ff); color: var(--ss-accent, #58a6ff); }
@media (max-width: 760px) {
  .tcx-dl { grid-template-columns: minmax(0, 1fr); }
  .tcx-dl-rail { border-right: 0; border-bottom: 1px solid var(--ss-border, #30363d); max-height: 190px; }
}

/* ── E-mail Templates ─────────────────────────────────────────────────── */
.tcx-et {
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 10px;
  background: var(--ss-surface, #0d1117);
  overflow: hidden;
}
.tcx-et-bar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 8px 10px;
  border-bottom: 1px solid var(--ss-border, #30363d);
  background: var(--ss-surface2, #161b22);
}
.tcx-et-find {
  flex: 1 1 190px;
  display: flex; align-items: center; gap: 7px;
  min-width: 0;
  padding: 5px 9px;
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 8px;
  background: var(--ss-surface, #0d1117);
  color: var(--swx-dim);
}
.tcx-et-find input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent; outline: none;
  color: var(--ss-text, #e6edf3);
  font: inherit; font-size: 12.5px;
}
.tcx-et-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.tcx-et-tag {
  padding: 4px 10px;
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 999px;
  background: transparent;
  color: var(--swx-dim);
  font: inherit; font-size: 11.5px; font-weight: 700;
  cursor: pointer;
}
.tcx-et-tag.is-active {
  border-color: var(--ss-accent, #58a6ff);
  background: color-mix(in srgb, var(--ss-accent, #58a6ff) 15%, transparent);
  color: var(--ss-text, #e6edf3);
}
.tcx-et-n {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ss-text, #e6edf3) 10%, transparent);
  color: var(--swx-dim);
  font-size: 11px; font-weight: 800;
}
.tcx-et-list { display: flex; flex-direction: column; }
.tcx-et-i { border-bottom: 1px solid color-mix(in srgb, var(--ss-border, #30363d) 55%, transparent); }
.tcx-et-i:last-child { border-bottom: 0; }
.tcx-et-h { display: flex; align-items: center; gap: 7px; padding: 6px 10px 6px 4px; }
.tcx-et-tog {
  flex: 1 1 auto;
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
  padding: 6px;
  border: 0; background: transparent;
  color: var(--ss-text, #e6edf3);
  font: inherit; font-size: 12.8px;
  text-align: left; cursor: pointer;
}
.tcx-et-tog b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcx-et-caret { flex: 0 0 auto; color: var(--swx-dim); font-size: 11px; transition: transform .16s ease; }
.tcx-et-i.is-open .tcx-et-caret { transform: rotate(90deg); }
.tcx-et-chip {
  flex: 0 0 auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, #a371f7 18%, transparent);
  color: color-mix(in srgb, #a371f7 80%, var(--ss-text, #e6edf3));
  font-size: 10px; font-style: normal; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
html[data-ss-theme="light"] .tcx-et-chip { color: #5b21b6; background: #ede9fe; }
.tcx-et-cp {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 7px;
  background: transparent;
  color: var(--swx-dim);
  font: inherit; font-size: 11px; font-weight: 700;
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease, background .14s ease;
}
.tcx-et-cp:hover { color: var(--ss-text, #e6edf3); border-color: var(--ss-accent, #58a6ff); }
.tcx-et-cp.primary {
  border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 55%, transparent);
  background: color-mix(in srgb, var(--ss-accent, #58a6ff) 14%, transparent);
  color: var(--ss-text, #e6edf3);
}
.tcx-et-b { padding: 0 12px 12px 34px; display: flex; flex-direction: column; gap: 8px; }
.tcx-et-subj { display: flex; align-items: baseline; gap: 9px; font-size: 12px; }
.tcx-et-subj span {
  flex: 0 0 auto;
  color: var(--swx-dim);
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
}
.tcx-et-subj code {
  flex: 1 1 auto; min-width: 0;
  padding: 4px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ss-text, #e6edf3) 8%, transparent);
  color: var(--ss-text, #e6edf3);
  font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.tcx-et-body {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 8px;
  background: var(--ss-surface2, #161b22);
  color: var(--ss-text, #e6edf3);
  font: inherit; font-size: 12.3px; line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 260px; overflow-y: auto;
}
.tcx-et-none {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 22px;
  color: var(--swx-dim);
  font-size: 12.5px;
}

/* ── Decision Tree ────────────────────────────────────────────────────── */
.tcx-dt {
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 10px;
  background: var(--ss-surface, #0d1117);
  overflow: hidden;
}
.tcx-dt-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 11px;
  border-bottom: 1px solid var(--ss-border, #30363d);
  background: var(--ss-surface2, #161b22);
}
.tcx-dt-ttl {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--ss-accent, #58a6ff);
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
}
html[data-ss-theme="light"] .tcx-dt-ttl { color: #1d4ed8; }
.tcx-dt-path {
  flex: 1 1 auto;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  min-width: 0;
  font-size: 11.5px;
}
.tcx-dt-crumb {
  padding: 2px 8px;
  border: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--ss-text, #e6edf3) 9%, transparent);
  color: var(--swx-dim);
  font: inherit; font-size: 11.5px;
  cursor: pointer;
}
.tcx-dt-crumb:hover { color: var(--ss-text, #e6edf3); }
.tcx-dt-crumb.is-here {
  background: color-mix(in srgb, var(--ss-accent, #58a6ff) 16%, transparent);
  color: var(--ss-text, #e6edf3);
  font-weight: 700;
  cursor: default;
}
.tcx-dt-crumb.is-start { background: transparent; }
.tcx-dt-sep { color: var(--swx-dim); font-size: 9px; opacity: .7; }
.tcx-dt-restart {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 7px;
  background: transparent;
  color: var(--swx-dim);
  font: inherit; font-size: 11px; font-weight: 700;
  cursor: pointer;
}
.tcx-dt-restart:hover { color: var(--ss-text, #e6edf3); border-color: var(--ss-accent, #58a6ff); }
.tcx-dt-node { padding: 15px 14px 14px; }
.tcx-dt-q {
  margin: 0 0 12px;
  font-size: 14px; font-weight: 700; line-height: 1.45;
  color: var(--ss-text, #e6edf3);
}
.tcx-dt-opts { display: flex; flex-direction: column; gap: 7px; }
.tcx-dt-o {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 9px;
  background: var(--ss-surface2, #161b22);
  color: var(--ss-text, #e6edf3);
  font: inherit; font-size: 12.8px; font-weight: 650;
  text-align: left;
  cursor: pointer;
  transition: border-color .14s ease, transform .14s ease, background .14s ease;
}
.tcx-dt-o i { flex: 0 0 auto; color: var(--ss-accent, #58a6ff); font-size: 12px; }
html[data-ss-theme="light"] .tcx-dt-o i { color: var(--ss-accent, #1d4ed8); }
.tcx-dt-o span { flex: 1 1 auto; min-width: 0; }
.tcx-dt-o:hover:not(:disabled) {
  border-color: var(--ss-accent, #58a6ff);
  background: color-mix(in srgb, var(--ss-accent, #58a6ff) 10%, var(--ss-surface2, #161b22));
  transform: translateX(3px);
}
.tcx-dt-o.is-end i { color: #3fb950; }
html[data-ss-theme="light"] .tcx-dt-o.is-end i { color: #15803d; }
.tcx-dt-o.is-end:hover { border-color: #3fb950; background: color-mix(in srgb, #3fb950 10%, var(--ss-surface2, #161b22)); }
/* A branch pointing at a node that does not exist is shown, disabled and
   NAMED. A silently dropped option is indistinguishable from a tree that was
   authored that way — the flat shape exists precisely so this stays visible. */
.tcx-dt-o.is-dead {
  border-style: dashed;
  border-color: color-mix(in srgb, #d29922 45%, transparent);
  color: var(--swx-dim);
  cursor: not-allowed;
}
.tcx-dt-o.is-dead i { color: #d29922; }
.tcx-dt-o.is-dead em {
  flex: 0 0 auto;
  font-style: normal; font-size: 10.5px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: #d29922;
}
html[data-ss-theme="light"] .tcx-dt-o.is-dead i,
html[data-ss-theme="light"] .tcx-dt-o.is-dead em { color: #92400e; }
.tcx-dt-res {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 14px;
  padding: 13px 14px;
  border: 1px solid color-mix(in srgb, #3fb950 40%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, #3fb950 9%, transparent);
}
.tcx-dt-res > i { margin-top: 2px; color: #3fb950; font-size: 17px; }
html[data-ss-theme="light"] .tcx-dt-res > i { color: #15803d; }
.tcx-dt-res b {
  display: block;
  margin-bottom: 4px;
  color: var(--ss-text, #e6edf3);
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
}
.tcx-dt-res p { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ss-text, #e6edf3); }

/* ── 15 · TEMPLATE STUDIO — the wiki severance notice ─────────────────── */
.tcs-pal-wiki {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
  margin: 4px;
  padding: 16px 15px;
  border: 1px dashed color-mix(in srgb, var(--ss-accent, #58a6ff) 45%, var(--ss-border, #30363d));
  border-radius: 11px;
  background: color-mix(in srgb, var(--ss-accent, #58a6ff) 6%, transparent);
}
.tcs-pal-wiki-ic {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ss-accent, #58a6ff) 18%, transparent);
  color: var(--ss-accent, #58a6ff);
  font-size: 16px;
}
html[data-ss-theme="light"] .tcs-pal-wiki-ic { color: var(--ss-accent, #1d4ed8); }
.tcs-pal-wiki > b { font-size: 13px; font-weight: 750; color: var(--ss-text, #e6edf3); }
.tcs-pal-wiki > p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--swx-dim); }
.tcs-pal-wiki-n { color: var(--ss-text, #e6edf3); font-weight: 700; }
.tcs-pal-wiki-l { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.tcs-pal-wiki-l li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 11.8px; line-height: 1.5;
  color: var(--swx-dim);
}
.tcs-pal-wiki-l i { margin-top: 3px; color: #3fb950; font-size: 10px; }
html[data-ss-theme="light"] .tcs-pal-wiki-l i { color: #15803d; }
.tcs-pal-wiki-hint {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--ss-text, #e6edf3) 7%, transparent);
  color: var(--ss-text, #e6edf3);
  font-size: 11.8px; line-height: 1.6;
}
.tcs-pal-wiki-hint i { margin-top: 2px; color: #d29922; }
html[data-ss-theme="light"] .tcs-pal-wiki-hint i { color: #92400e; }
.tcs-pal-wiki-hint kbd {
  padding: 1px 6px;
  border: 1px solid var(--ss-border, #30363d);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--ss-surface2, #161b22);
  font: 600 11px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.tcs-pal-wiki-sw {
  align-self: stretch;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 12px;
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 8px;
  background: var(--ss-surface2, #161b22);
  color: var(--swx-dim);
  font: inherit; font-size: 11.8px; font-weight: 700;
  cursor: pointer;
  transition: color .14s ease, border-color .14s ease;
}
.tcs-pal-wiki-sw:hover { color: var(--ss-text, #e6edf3); border-color: var(--ss-accent, #58a6ff); }

/* ── 16 · the seed notice inside an unclaimed root ────────────────────── */
.swx-tplnote {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, #d29922 38%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, #d29922 9%, transparent);
  color: var(--ss-text, #e6edf3);
  font-size: 12.3px; line-height: 1.6;
}
.swx-tplnote i { margin-top: 3px; color: #d29922; }
html[data-ss-theme="light"] .swx-tplnote i { color: #92400e; }

@media (prefers-reduced-motion: reduce) {
  .tcx-sf-fill, .tcx-sf-caret, .tcx-et-caret, .tcx-dt-o, .tcx-as-row,
  .tcx-sn-wrap, .tcx-sn-copy, .tcx-et-cp, .tcs-pal-wiki-sw { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   17 · swx-6 · THE EDITOR RIBBON, THE PROCESS FLOW AND DOCUMENT IMPORT
   ───────────────────────────────────────────────────────────────────────────
   Appended LAST inside this file so it can lean on §1–16 without fighting
   them, and it still ships BEFORE enterprise_theme.css, which stays last.

   Every colour resolves through the shell's `--ss-*` tokens plus the two
   local ones declared at the top of this file, so both ramps are handled in
   one place. Nothing here reaches for `!important`: the layer sits below the
   theme file on purpose, and an `!important` here would be unremovable by
   the very file that is allowed to re-skin it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 17.1 · THE RIBBON ────────────────────────────────────────────────────
   MEYS-class: grouped, labelled, one line, and it never wraps above ~1180px.
   Below that the groups scroll horizontally rather than stacking — a ribbon
   that grows to three rows pushes the article off the screen, which is worse
   than a scroll nobody has to use. */
.swx-ribbon {
  position: relative;
  display: flex; align-items: stretch; gap: 7px;
  flex: 0 0 auto;
  padding: 7px 12px;
  border-bottom: 1px solid var(--ss-border, #30363d);
  background: var(--ss-surface2, #0f141a);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.swx-ribbon::-webkit-scrollbar { height: 5px; }
.swx-ribbon::-webkit-scrollbar-thumb { background: var(--ss-border, #30363d); border-radius: 3px; }

.swx-rb-g {
  position: relative;
  display: flex; align-items: center; gap: 2px;
  padding: 13px 8px 0;
  border-right: 1px solid var(--ss-border2, rgba(255,255,255,.07));
  flex: 0 0 auto;
}
.swx-rb-gl {
  position: absolute; top: 1px; left: 9px;
  font-size: 8px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--swx-dim, #8b949e);
  pointer-events: none;
}
.swx-rb-b {
  height: 39px; min-width: 46px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 0 7px;
  border: 0; border-radius: 6px;
  background: transparent;
  color: var(--swx-dim, #8b949e);
  font: 600 9px var(--ss-font, 'Inter', system-ui, sans-serif);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.swx-rb-b i { font-size: 13px; }
.swx-rb-b span { max-width: 62px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swx-rb-b:hover  { background: var(--ss-surface3, #171d25); color: var(--ss-text, #e6edf3); }
.swx-rb-b:active { transform: translateY(1px); }
.swx-rb-b:focus-visible { outline: 2px solid var(--ss-accent, #58a6ff); outline-offset: 1px; }

.swx-rb-sp { flex: 1 1 auto; min-width: 8px; }

.swx-rb-more, .swx-rb-import, .swx-rb-save {
  align-self: center; flex: 0 0 auto;
  height: 31px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 10px;
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 7px;
  background: var(--ss-surface3, #171d25);
  color: var(--ss-text, #e6edf3);
  font: 600 10.5px var(--ss-font, 'Inter', system-ui, sans-serif);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.swx-rb-more:hover, .swx-rb-import:hover { border-color: var(--ss-accent, #58a6ff); color: var(--ss-accent, #58a6ff); }
.swx-rb-cv { font-size: 8px; opacity: .7; }
.swx-rb-n {
  font-style: normal; font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 8px;
  background: color-mix(in srgb, var(--ss-accent, #58a6ff) 16%, transparent);
  color: var(--ss-accent, #58a6ff);
}
.swx-rb-import { color: var(--ss-accent, #58a6ff); border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 38%, transparent); }

/* The saved / unsaved pill. Word AND dot — colour alone is not a state for
   somebody who cannot see the difference between amber and green. */
.swx-rb-state {
  align-self: center; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 4px;
  color: var(--swx-dim, #8b949e);
  font: 500 10.5px var(--ss-font, 'Inter', system-ui, sans-serif);
  white-space: nowrap;
}
.swx-rb-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--ss-green, #3fb950); }
.swx-rb-state.is-dirty { color: var(--ss-warn, #d29922); }
.swx-rb-state.is-dirty i { background: var(--ss-warn, #d29922); }

.swx-rb-save {
  border-color: color-mix(in srgb, var(--ss-green, #3fb950) 45%, transparent);
  background: color-mix(in srgb, var(--ss-green, #3fb950) 14%, transparent);
  color: var(--ss-green, #3fb950);
}
.swx-rb-save:hover { background: color-mix(in srgb, var(--ss-green, #3fb950) 22%, transparent); }
.swx-rb-save kbd {
  font: 600 8.5px var(--ss-mono, ui-monospace, monospace);
  padding: 1px 4px; border-radius: 4px;
  border: 1px solid var(--ss-border, #30363d);
  color: var(--swx-dim, #8b949e);
  background: var(--ss-surface, #0d1117);
}

html[data-ss-theme="light"] .swx-ribbon { background: #f6f8fa; }
html[data-ss-theme="light"] .swx-rb-b:hover { background: #e8edf3; color: #111820; }
html[data-ss-theme="light"] .swx-rb-save kbd { background: #ffffff; color: #58616e; }

@media (max-width: 1180px) {
  /* The labels are the first thing to go — the icons plus the tooltip still
     name every block, and the row stays one line instead of three. */
  .swx-rb-b span { display: none; }
  .swx-rb-b { min-width: 34px; }
  .swx-rb-import span { display: none; }
}

/* ── 17.2 · PROCESS FLOW ──────────────────────────────────────────────────
   The Visio target. Read as a numbered walk with its branches printed under
   each step, which is what a support engineer on a call actually needs — a
   pixel-accurate redraw of somebody's diagram is prettier and unreadable at
   a phone width. */
.tcx-pf {
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 10px;
  background: var(--ss-surface2, #0f141a);
  overflow: hidden;
}
.tcx-pf-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--ss-border2, rgba(255,255,255,.07));
  background: var(--ss-surface3, #171d25);
  font: 700 10.5px var(--ss-font, 'Inter', system-ui, sans-serif);
  color: var(--ss-text, #e6edf3);
  letter-spacing: .04em; text-transform: uppercase;
}
.tcx-pf-head i { color: var(--ss-accent, #58a6ff); }
.tcx-pf-head em {
  margin-left: auto; font-style: normal; text-transform: none; letter-spacing: 0;
  font-weight: 500; color: var(--swx-dim, #8b949e);
}
.tcx-pf-list { list-style: none; margin: 0; padding: 6px 0; counter-reset: pf; }
.tcx-pf-n {
  position: relative;
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px;
  padding: 9px 13px;
}
/* The spine. Drawn on the item rather than between them so the last step
   does not trail a line into nothing. */
.tcx-pf-n::before {
  content: ''; position: absolute; left: 27px; top: 34px; bottom: -4px;
  width: 1px; background: var(--ss-border, #30363d);
}
.tcx-pf-n:last-child::before { display: none; }
.tcx-pf-i {
  position: relative; z-index: 1;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 1px solid var(--ss-border, #30363d);
  background: var(--ss-surface, #0d1117);
  color: var(--swx-dim, #8b949e);
  font-size: 11px;
}
.tcx-pf-b { min-width: 0; display: grid; gap: 4px; }
.tcx-pf-k {
  font: 700 8.5px var(--ss-font, 'Inter', system-ui, sans-serif);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--swx-dim, #8b949e);
}
.tcx-pf-t {
  margin: 0;
  font: 500 12.5px/1.55 var(--ss-font, 'Inter', system-ui, sans-serif);
  color: var(--ss-text, #e6edf3);
  overflow-wrap: anywhere;
}
.tcx-pf-outs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.tcx-pf-o {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%;
  padding: 3px 8px;
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 99px;
  background: var(--ss-surface, #0d1117);
  font: 500 10.5px var(--ss-font, 'Inter', system-ui, sans-serif);
  color: var(--swx-dim, #8b949e);
}
.tcx-pf-o em { font-style: normal; font-weight: 700; color: var(--ss-accent, #58a6ff); }
.tcx-pf-o i { font-size: 9px; opacity: .65; }
.tcx-pf-o b { font-weight: 500; color: var(--ss-text, #e6edf3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tcx-pf-n.is-start  .tcx-pf-i { color: var(--ss-green, #3fb950);  border-color: color-mix(in srgb, var(--ss-green, #3fb950) 42%, transparent); background: color-mix(in srgb, var(--ss-green, #3fb950) 11%, transparent); }
.tcx-pf-n.is-decision .tcx-pf-i { color: var(--ss-warn, #d29922); border-color: color-mix(in srgb, var(--ss-warn, #d29922) 42%, transparent); background: color-mix(in srgb, var(--ss-warn, #d29922) 11%, transparent); }
.tcx-pf-n.is-end    .tcx-pf-i { color: var(--ss-accent, #58a6ff); border-color: color-mix(in srgb, var(--ss-accent, #58a6ff) 42%, transparent); background: color-mix(in srgb, var(--ss-accent, #58a6ff) 11%, transparent); }
.tcx-pf-n.is-data   .tcx-pf-i { color: #a78bfa; border-color: color-mix(in srgb, #a78bfa 42%, transparent); background: color-mix(in srgb, #a78bfa 11%, transparent); }

html[data-ss-theme="light"] .tcx-pf { background: #ffffff; }
html[data-ss-theme="light"] .tcx-pf-head { background: #f6f8fa; }
html[data-ss-theme="light"] .tcx-pf-i,
html[data-ss-theme="light"] .tcx-pf-o { background: #ffffff; }
html[data-ss-theme="light"] .tcx-pf-n.is-data .tcx-pf-i { color: #6d28d9; }

.tcx-pfed { display: grid; gap: 6px; }
.tcx-pfed-hint {
  display: block;
  padding: 7px 9px;
  border: 1px solid var(--ss-border2, rgba(255,255,255,.07));
  border-radius: 7px;
  background: var(--ss-surface3, #171d25);
  font: 500 10.5px/1.55 var(--ss-font, 'Inter', system-ui, sans-serif);
  color: var(--swx-dim, #8b949e);
}
.tcx-pfed-hint i { float: left; margin: 2px 7px 0 0; color: var(--ss-accent, #58a6ff); }
.tcx-pfed-hint::after { content: ''; display: block; clear: both; }
.tcx-pfed-hint code {
  font: 600 10px var(--ss-mono, ui-monospace, monospace);
  padding: 1px 4px; border-radius: 4px;
  background: var(--ss-surface, #0d1117);
  color: var(--ss-text, #e6edf3);
}
.tcx-pfed-l {
  font: 700 8.5px var(--ss-font, 'Inter', system-ui, sans-serif);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--swx-dim, #8b949e);
}
html[data-ss-theme="light"] .tcx-pfed-hint { background: #f6f8fa; }
html[data-ss-theme="light"] .tcx-pfed-hint code { background: #ffffff; }

/* ── 17.3 · IMPORT — the drop state, the progress veil, the report ────────
   The report is a CARD, not a toast: "12 pictures need a SharePoint link" is
   an instruction, and an instruction that disappears after three seconds was
   never given. */
.swx-imp-input { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; left: -9999px; }

.swx.swx-dropping { outline: 2px dashed var(--ss-accent, #58a6ff); outline-offset: -4px; }
.swx.swx-dropping::after {
  content: 'Drop a Word, Excel, PowerPoint, Visio, PDF, Markdown or CSV file to turn it into editable blocks';
  position: absolute; inset: auto 0 0 0;
  padding: 12px 18px;
  background: color-mix(in srgb, var(--ss-accent, #58a6ff) 16%, var(--ss-surface, #0d1117));
  border-top: 1px solid var(--ss-accent, #58a6ff);
  color: var(--ss-text, #e6edf3);
  font: 600 11.5px var(--ss-font, 'Inter', system-ui, sans-serif);
  text-align: center;
  pointer-events: none;
  z-index: 5;
}
/* `.swx` is a grid, so it needs a positioning context for the veil above. */
.swx { position: relative; }

.swx-imp-busy {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--ss-bg, #010409) 72%, transparent);
  z-index: 40;
}
.swx-imp-busy-c {
  display: grid; gap: 5px; justify-items: center;
  padding: 20px 26px;
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 12px;
  background: var(--ss-surface2, #0f141a);
  box-shadow: 0 22px 60px rgba(0,0,0,.45);
  text-align: center;
}
.swx-imp-busy-c i { font-size: 17px; color: var(--ss-accent, #58a6ff); }
.swx-imp-busy-c b { font: 700 12.5px var(--ss-font, 'Inter', system-ui, sans-serif); color: var(--ss-text, #e6edf3); }
.swx-imp-busy-c small { font: 500 10.5px/1.55 var(--ss-font, 'Inter', system-ui, sans-serif); color: var(--swx-dim, #8b949e); max-width: 320px; }
/* `.tc-main` hosts the veil and the report, so it has to be a containing
   block or both escape to the viewport and cover the studio's own chrome. */
.tc-main { position: relative; }

.swx-imp-wrap {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 24px;
  background: color-mix(in srgb, var(--ss-bg, #010409) 66%, transparent);
  z-index: 41;
}
.swx-imp-card {
  position: relative;
  width: min(560px, 100%);
  max-height: 100%;
  overflow-y: auto;
  display: grid; gap: 10px;
  padding: 16px 16px 12px;
  border: 1px solid var(--ss-border, #30363d);
  border-radius: 13px;
  background: var(--ss-surface2, #0f141a);
  box-shadow: 0 28px 70px rgba(0,0,0,.5);
}
.swx-imp-x {
  position: absolute; top: 9px; right: 9px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 0; border-radius: 7px;
  background: transparent; color: var(--swx-dim, #8b949e);
  cursor: pointer;
}
.swx-imp-x:hover { background: var(--ss-surface3, #171d25); color: var(--ss-text, #e6edf3); }

.swx-imp-report { display: grid; gap: 7px; }
.swx-imp-report + .swx-imp-report { padding-top: 10px; border-top: 1px solid var(--ss-border2, rgba(255,255,255,.07)); }
.swx-imp-r-h { display: flex; align-items: flex-start; gap: 10px; padding-right: 26px; }
.swx-imp-r-ic {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--ss-green, #3fb950) 42%, transparent);
  background: color-mix(in srgb, var(--ss-green, #3fb950) 12%, transparent);
  color: var(--ss-green, #3fb950);
}
.swx-imp-report.is-bad .swx-imp-r-ic {
  border-color: color-mix(in srgb, var(--ss-warn, #d29922) 45%, transparent);
  background: color-mix(in srgb, var(--ss-warn, #d29922) 12%, transparent);
  color: var(--ss-warn, #d29922);
}
.swx-imp-r-h > div { display: grid; gap: 2px; min-width: 0; }
.swx-imp-r-h b { font: 700 12.5px var(--ss-font, 'Inter', system-ui, sans-serif); color: var(--ss-text, #e6edf3); }
.swx-imp-r-h small { font: 500 10.5px var(--ss-font, 'Inter', system-ui, sans-serif); color: var(--swx-dim, #8b949e); overflow-wrap: anywhere; }
.swx-imp-r-s { margin: 0; font: 500 11.5px/1.6 var(--ss-font, 'Inter', system-ui, sans-serif); color: var(--ss-text, #e6edf3); }
.swx-imp-r-w { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.swx-imp-r-w li {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 7px 9px;
  border: 1px solid color-mix(in srgb, var(--ss-warn, #d29922) 30%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--ss-warn, #d29922) 8%, transparent);
  font: 500 10.8px/1.55 var(--ss-font, 'Inter', system-ui, sans-serif);
  color: var(--ss-text, #e6edf3);
}
.swx-imp-r-w i { margin-top: 2px; color: var(--ss-warn, #d29922); }
.swx-imp-foot {
  display: flex; align-items: center; gap: 7px;
  padding-top: 9px;
  border-top: 1px solid var(--ss-border2, rgba(255,255,255,.07));
  font: 500 10px var(--ss-font, 'Inter', system-ui, sans-serif);
  color: var(--swx-dim, #8b949e);
}
.swx-imp-foot i { color: var(--ss-green, #3fb950); }

html[data-ss-theme="light"] .swx-imp-card,
html[data-ss-theme="light"] .swx-imp-busy-c { background: #ffffff; }
html[data-ss-theme="light"] .swx-imp-busy,
html[data-ss-theme="light"] .swx-imp-wrap { background: rgba(255,255,255,.72); }

@media (prefers-reduced-motion: reduce) {
  .swx-rb-b, .swx-rb-more, .swx-rb-import, .swx-rb-save { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   18 · swx-7 · STRUCTURE-WIDGET PROPS EDITORS
   ───────────────────────────────────────────────────────────────────────────
   A Heading and a Fixed Note keep their content in `w.props`, and until swx-7
   they were painted through their VIEW renderer in edit mode too — visible,
   addable and permanently uneditable. These are the controls that replaced
   that dead text. `.tcx-propedit` is the body wrapper the collector finds by
   `data-tcx-props`; everything inside is an ordinary `.tc-input`.
   ═══════════════════════════════════════════════════════════════════════════ */

.tcx-propedit { display: block; }

/* ── Heading: text · level · optional kicker ─────────────────────────────── */
.tcx-hd-ed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 74px;
  gap: 7px;
  align-items: center;
}
/* The heading text is the thing being written, so it reads at heading weight
   even while it is an input — the author sees the result, not a form field. */
.tcx-hd-ed .tcx-hd-text {
  font: 700 18px/1.3 var(--ss-font, 'Inter', system-ui, sans-serif);
  letter-spacing: -.02em;
  padding: 8px 10px;
}
.tcx-hd-ed .tcx-hd-lvl {
  font: 600 11.5px var(--ss-font, 'Inter', system-ui, sans-serif);
  text-align: center;
  padding: 8px 6px;
}
.tcx-hd-ed .tcx-hd-sub {
  grid-column: 1 / -1;
  font: 500 11.5px var(--ss-font, 'Inter', system-ui, sans-serif);
  color: var(--swx-dim, #8b949e);
  padding: 6px 10px;
}

/* ── Fixed Note ──────────────────────────────────────────────────────────── */
.tcx-note-ed { display: block; }
.tcx-note-ed .tcx-note-text {
  width: 100%;
  min-height: 68px;
  resize: vertical;
  font: 500 12.5px/1.6 var(--ss-font, 'Inter', system-ui, sans-serif);
}

/* A props control is content, so it gets the same focus treatment every other
   editor in the workspace has — nothing bespoke, or it reads as a different
   kind of field. */
.tcx-propedit .tc-input:focus {
  border-color: var(--ss-accent, #58a6ff);
  outline: none;
}

@media (max-width: 700px) {
  .tcx-hd-ed { grid-template-columns: minmax(0, 1fr); }
  .tcx-hd-ed .tcx-hd-lvl { justify-self: start; min-width: 74px; }
}