/* ═══════════════════════════════════════════════════════════════════════════
   dtx-3 · DISTRIBUTION TASK ▸ INSTRUCTION GUIDE — the wiki BRIDGE LAYER
   ---------------------------------------------------------------------------
   Loaded AFTER support_studio/wiki_workspace.css and template_studio.css on
   distribution_task.html, and lazily on My Task.

   ── WHAT THIS FILE IS ─────────────────────────────────────────────────────
   The Instruction Guide is painted by `TCTemplates.renderWikiSpace` — the
   same function Support Studio ▸ Standard & Training paints with — so it
   arrives wearing Support Studio's class names (`.swx-*`, `.tcx-*`, `.tc-*`)
   and asking for Support Studio's tokens (`--ss-*`). This page has its own
   ramp (`--dt-*`, distribution_task.css).

   Rather than fork 190 KB of stylesheet, this file does two small things:

     1. It DEFINES the `--ss-*` family from the `--dt-*` family, scoped to
        `.dtx-wiki` (and to `.dtx-wiki-portal`, because a menu or dialog
        portalled to <body> is outside that scope by construction). Nothing
        outside those two scopes is touched, so the studio ramp cannot leak
        into the workspace around it and vice versa.
     2. It supplies the handful of `.tc-*` editor rules that live in
        training_collection.css — the ONE studio sheet that is not loaded
        here, because it styles the whole Standard & Training shell. They are
        copied verbatim (§3) rather than reinvented: the same rule in two
        files is drift; the same rule in one file with a comment saying where
        it came from is a decision.

   ── THE COLOUR CONTRACT, RESTATED FOR A BORROWED SHEET ────────────────────
   `--ss-accent` is used by the studio sheets as an INK (`color:`) and, in a
   few places, as a solid FILL whose ink is `--tcx-on-accent`. One value
   cannot serve both roles across two ramps — that is the 2.48:1 button
   defect, and this is exactly where it would reappear.

   So `--ss-accent` takes the `--dt-accent` INK token (which is already tuned
   per ramp), and `--tcx-on-accent` — the ink that belongs ON that fill — is
   stated in the SAME block, per ramp: white over the light ramp's deep blue,
   near-black over the dark ramp's bright cyan. Ink is a paired token of the
   fill, always in the same declaration.

   ── LIGHT IS THE BASE ─────────────────────────────────────────────────────
   Same rule as distribution_task.css: the light ramp is defined on the bare
   selector and the dark ramp REDEFINES the same tokens. No colour here has
   its only definition inside a selector that might not match.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   1 · THE TOKEN BRIDGE
   ═══════════════════════════════════════════════════════════════════════ */

.dtx-wiki,
.dtx-wiki-portal {
  --ss-bg:        var(--dt-bg2, #f6f8fc);
  --ss-surface:   var(--dt-panel, #ffffff);
  --ss-surface2:  var(--dt-panel2, #f3f6fb);
  --ss-surface3:  var(--dt-panel3, #e9eef7);
  --ss-border:    var(--dt-line, #d3dbe8);
  --ss-border2:   var(--dt-line2, #bcc7da);
  --ss-text:      var(--dt-text, #0d1526);
  --ss-muted:     var(--dt-text2, #41506b);

  --ss-accent:    var(--dt-accent, #0b6fa8);
  --tcx-on-accent: #ffffff;              /* the ink ON the accent fill (light) */

  --ss-green:     var(--dt-ok, #166534);
  --ss-warn:      var(--dt-warn, #8a5a00);
  --ss-danger:    var(--dt-bad, #b3261e);
  --ss-cyan:      var(--dt-info, #0b5f96);

  --ss-font:      var(--dt-font, 'Figtree', system-ui, sans-serif);
  --ss-mono:      var(--dt-mono, ui-monospace, Menlo, monospace);

  --swx-dim:      var(--dt-text2, #41506b);
  --tcx-dim:      var(--dt-text2, #41506b);
  --swx-rail:     268px;

  font-family: var(--ss-font);
  color: var(--ss-text);
}

html[data-dt-theme="dark"] .dtx-wiki,
html[data-dt-theme="dark"] .dtx-wiki-portal {
  /* The tokens above already resolve through --dt-*, which the dark ramp
     redefines — the ONLY value that must be restated here is the ink that
     belongs on the accent fill, because the accent itself changed. */
  --tcx-on-accent: #06121c;
}

/* ═══════════════════════════════════════════════════════════════════════
   2 · FITTING THE WORKSPACE INTO THIS PAGE
   ═══════════════════════════════════════════════════════════════════════ */

/* `.swx` bounds itself against the studio's chrome height. This page's chrome
   is a different height, so the one measurement that is page-specific is
   restated — and nothing else about the layout is touched. */
.dtx-wiki .swx {
  height: min(calc(100vh - 268px), 1100px);
  min-height: 440px;
  background: var(--ss-surface);
}
.dtx-wiki { display: block; min-width: 0; }

/* The ID CODE linker binds a field to a System Update code index this page
   does not load, so `resolveRef` can only ever answer "not published".
   A control that cannot work must not be on screen. */
.dtx-wiki .tc-mf-bindbtn,
.dtx-wiki [data-tcact="bind-field"] { display: none !important; }

/* Font Awesome is present on this page; these are the two icon sizes the
   borrowed sheets assume from the studio shell. */
.dtx-wiki .fas, .dtx-wiki-portal .fas { font-style: normal; }

/* ═══════════════════════════════════════════════════════════════════════
   3 · THE EDITOR CONTROLS
   Copied from public/css/support_studio/training_collection.css — the one
   studio sheet this page does not load, because it styles the whole
   Standard & Training shell (a 134 KB sheet for ~40 rules). Everything here
   is scoped under .dtx-wiki / .dtx-wiki-portal so it can never reach the
   studio, and the studio's own copy remains the original.
   ═══════════════════════════════════════════════════════════════════════ */

.dtx-wiki .tc-icon-btn,
.dtx-wiki-portal .tc-icon-btn {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; border: 1px solid transparent; background: transparent; cursor: pointer;
  color: var(--ss-muted); font-size: 11px; transition: background .1s, color .1s;
}
.dtx-wiki .tc-icon-btn:hover { background: var(--ss-surface2); color: var(--ss-text); }
.dtx-wiki .tc-icon-btn.danger:hover { color: var(--ss-danger); background: color-mix(in srgb, var(--ss-danger) 12%, transparent); }

.dtx-wiki .tc-link {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px;
  background: var(--ss-surface2); border: 1px solid var(--ss-border);
  color: var(--ss-text); text-decoration: none; font-size: 12.5px; margin-bottom: 6px;
  transition: background .1s, border-color .1s;
}
.dtx-wiki .tc-link:hover { background: var(--ss-surface3); border-color: var(--ss-accent); }
.dtx-wiki .tc-link i:first-child { color: var(--ss-accent); width: 16px; text-align: center; }
.dtx-wiki .tc-link-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dtx-wiki .tc-link-ext { font-size: 10px; opacity: .7; }

.dtx-wiki .tc-mf-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 800; padding: 4px 12px; border-radius: 20px; border: 1px solid;
  text-transform: uppercase; letter-spacing: .04em;
}
.dtx-wiki .tc-mf-badge-dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }

.dtx-wiki .tc-mf-kv { display: flex; flex-direction: column; }
.dtx-wiki .tc-mf-kv-row {
  display: grid; grid-template-columns: minmax(110px, 34%) 1fr; gap: 12px; padding: 6px 0;
  border-bottom: 1px dashed var(--ss-border); font-size: 12.5px;
}
.dtx-wiki .tc-mf-kv-row:last-child { border-bottom: none; }
.dtx-wiki .tc-mf-kv-v { color: var(--ss-text); font-weight: 600; overflow-wrap: anywhere; }

.dtx-wiki .tc-mf-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.dtx-wiki .tc-mf-list li {
  position: relative; padding-left: 18px; font-size: 12.5px; line-height: 1.5;
  color: var(--ss-text); overflow-wrap: anywhere;
}
.dtx-wiki .tc-mf-list li::before {
  content: ''; position: absolute; left: 2px; top: .55em; width: 7px; height: 7px;
  transform: rotate(45deg); background: var(--ss-accent); opacity: .85; border-radius: 1.5px;
}

.dtx-wiki .tc-mf-contacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.dtx-wiki .tc-mf-contact {
  display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px;
  background: var(--ss-surface2); border: 1px solid var(--ss-border);
}
.dtx-wiki .tc-mf-ct-meta { display: flex; flex-direction: column; min-width: 0; }
.dtx-wiki .tc-mf-ct-name { font-size: 12.5px; font-weight: 700; color: var(--ss-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.dtx-wiki .tc-mf-ed { min-width: 0; }
.dtx-wiki .tc-mrow { display: grid; gap: 7px; align-items: center; }
.dtx-wiki .tc-mrow.kv,
.dtx-wiki .tc-mrow.lk { grid-template-columns: minmax(110px, 34%) 1fr 30px; }
.dtx-wiki .tc-mrow.li { grid-template-columns: 1fr 30px; }
.dtx-wiki .tc-mrow.ct { grid-template-columns: 1fr 1fr 1.4fr 30px; }
.dtx-wiki .tc-mf-inswrap { display: flex; align-items: center; gap: 4px; min-width: 0; width: 100%; }

.dtx-wiki .tc-mf-refmiss {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600;
  color: var(--ss-warn); padding: 6px 10px; border-radius: 8px;
  background: color-mix(in srgb, var(--ss-warn) 10%, transparent);
  border: 1px dashed color-mix(in srgb, var(--ss-warn) 40%, transparent);
}
.dtx-wiki .tc-mf-boundbox {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; border-radius: 9px;
  background: color-mix(in srgb, var(--ss-cyan) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--ss-cyan) 35%, transparent);
}
.dtx-wiki .tc-mf-boundval { flex: 1; min-width: 120px; font-size: 12.5px; font-weight: 600; color: var(--ss-text); overflow-wrap: anywhere; }
.dtx-wiki .tcx-refchip {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--ss-mono);
  font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px;
  color: var(--ss-cyan); background: color-mix(in srgb, var(--ss-cyan) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--ss-cyan) 30%, transparent);
}
.dtx-wiki .tcx-ck-item { display: flex; align-items: flex-start; gap: 9px; padding: 4px 0; font-size: 13px; }
.dtx-wiki .tcx-as-note,
.dtx-wiki .tcx-ib-link { font-size: 12px; color: var(--ss-muted); }
.dtx-wiki .tcx-rmed,
.dtx-wiki .tcx-rmed-f { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════════
   4 · THE PORTALS — block menu, topic menu, dialogs
   Every one is a <body> child, because an overlay inside a scrolling,
   clipping article canvas loses to its own ancestors (memory.md: an overlay
   inside the content pane is the placement trap; z-index cannot rescue it).
   ═══════════════════════════════════════════════════════════════════════ */

.dtx-wiki-portal.swx-cmd { position: fixed; z-index: 2147483000; }

/* ── dtx-5 · THE CLOSE BUTTON (contract M2) ────────────────────────────
   MACE: *"hindi na cclose o walang close button yung menu option."* Both
   portalled menus offered exactly one exit — the Escape key — which for a
   mouse user is no exit at all. The ✕ is scoped to `.dtx-wiki-portal`, so
   Support Studio's own `.swx-cmd` is untouched by this file. */
.dtx-wiki-portal .swx-cmd-x {
  flex: 0 0 auto;
  margin-left: auto;                 /* the head has no flexible child in the
                                        topic menu, so the ✕ claims the gap */
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ss-border); border-radius: 7px;
  background: var(--ss-surface); color: var(--ss-text-2, var(--ss-text));
  font-size: 12px; line-height: 1; cursor: pointer; padding: 0;
}
.dtx-wiki-portal .swx-cmd-x:hover {
  border-color: var(--dt-bad, #b3261e);
  background: var(--dt-bad-soft, #fee2e2);
  color: var(--dt-bad, #b3261e);
}
.dtx-wiki-portal .swx-cmd-x:focus-visible {
  outline: 2px solid var(--ss-accent); outline-offset: 1px;
}

/* A long topic title must not push the ✕ off the edge of its own menu. */
.dtx-wiki-portal.is-topicmenu .swx-cmd-lane {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dtx-wiki-portal.is-topicmenu { display: flex; flex-direction: column; }
.dtx-wiki-portal.is-topicmenu .swx-cmd-list { overflow-y: auto; }

/* The keyboard cursor. Arrow keys move real DOM focus, but a focus ring alone
   is easy to lose against the hover state, so the active row is also tinted. */
.dtx-wiki-portal .swx-cmd-i.is-kb,
.dtx-wiki-portal .dtx-icbtn.is-kb {
  outline: 2px solid var(--ss-accent); outline-offset: -2px;
}

.dtx-wiki-portal .dtx-icgrid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; padding: 8px 10px 12px;
}
.dtx-wiki-portal .dtx-icbtn {
  height: 30px; border-radius: 7px; border: 1px solid var(--ss-border);
  background: var(--ss-surface2); color: var(--ss-text); cursor: pointer; font-size: 12px;
}
.dtx-wiki-portal .dtx-icbtn:hover { border-color: var(--ss-accent); color: var(--ss-accent); }
.dtx-wiki-portal .dtx-icbtn.is-on { background: var(--ss-accent); color: var(--tcx-on-accent); border-color: var(--ss-accent); }

.dtx-wiki-dlg-wrap {
  position: fixed; inset: 0; z-index: 2147483001;
  background: var(--dt-scrim, rgba(13, 21, 38, .48));
  display: grid; place-items: center; padding: 20px;
}
.dtx-wiki-dlg {
  width: min(460px, 100%); background: var(--ss-surface); color: var(--ss-text);
  border: 1px solid var(--ss-border); border-radius: 14px; overflow: hidden;
  box-shadow: var(--dt-shadow-lg, 0 12px 48px rgba(13, 21, 38, .18));
}
.dtx-wiki-dlg header {
  display: flex; align-items: center; gap: 9px; padding: 13px 15px;
  border-bottom: 1px solid var(--ss-border); background: var(--ss-surface2); font-size: 14px;
}
.dtx-wiki-dlg header i:first-child { color: var(--ss-accent); }
.dtx-wiki-dlg header b { flex: 1; }
.dtx-wiki-dlg-b { padding: 16px 15px; }
.dtx-wiki-dlg footer {
  display: flex; justify-content: flex-end; gap: 8px; padding: 12px 15px;
  border-top: 1px solid var(--ss-border); background: var(--ss-surface2);
}
.dtx-wiki-lbl { display: block; font-size: 11.5px; font-weight: 700; color: var(--ss-muted); margin-bottom: 6px; }
.dtx-wiki-p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ss-text); }

/* A click outside NUDGES rather than closing: these dialogs hold typed work,
   and a gesture that silently discards it is the dtx-2 defect. */
@keyframes dtxNudge {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.dtx-wiki-dlg.is-nudge { animation: dtxNudge .28s ease; }

/* ═══════════════════════════════════════════════════════════════════════
   5 · DRAG-AND-DROP RE-PARENTING
   The zone is derived from where in the row the pointer is, so the feedback
   has to name all three outcomes — otherwise "drop here" means three
   different things and the reader cannot tell which they are about to get.
   ═══════════════════════════════════════════════════════════════════════ */

.dtx-wiki .swx-node.is-dragging { opacity: .45; }
.dtx-wiki .swx-node.is-drop-in {
  background: color-mix(in srgb, var(--ss-accent) 16%, transparent);
  outline: 2px solid var(--ss-accent); outline-offset: -2px;
}
.dtx-wiki .swx-node.is-drop-before { box-shadow: inset 0 2px 0 0 var(--ss-accent); }
.dtx-wiki .swx-node.is-drop-after { box-shadow: inset 0 -2px 0 0 var(--ss-accent); }

/* ═══════════════════════════════════════════════════════════════════════
   6 · MY TASK — the read-only guide inside index.html
   The main app owns a generated theme layer that would translate a colour
   LITERAL into an override beating the correct token, so this scope re-points
   the SAME bridge at the nine tokens defined in BOTH generated ramps, and
   states no other fallback.
   ═══════════════════════════════════════════════════════════════════════ */

.mtx-guide .dtx-wiki,
.mtx-guide .dtx-wiki-portal {
  --ss-bg:       var(--bg);
  --ss-surface:  var(--panel);
  --ss-surface2: var(--card);
  --ss-surface3: var(--bg);
  --ss-border:   var(--border);
  --ss-border2:  var(--border);
  --ss-text:     var(--text);
  --ss-muted:    var(--muted);
  --ss-accent:   var(--ok);
  --ss-green:    var(--ok);
  --ss-warn:     var(--warn);
  --ss-danger:   var(--danger);
  --ss-cyan:     var(--ok);
  --swx-dim:     var(--muted);
  --tcx-dim:     var(--muted);
}
.mtx-guide .dtx-wiki .swx { height: 520px; min-height: 360px; }
/* index.html carries no Font Awesome (memory.md), so decorative glyphs would
   render as empty boxes. They are hidden rather than left to look broken;
   every one of them is decorative — the text beside it carries the meaning. */
.mtx-guide .dtx-wiki i.fas,
.mtx-guide .dtx-wiki i.far { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   7 · TWO INK CORRECTIONS THE BORROWED RAMP NEEDS ON A LIGHT GROUND
   ───────────────────────────────────────────────────────────────────────
   Both were MEASURED on the light ramp with the whole alpha stack
   composited, not guessed — and both exist because the studio sheets were
   tuned against a bright accent on a dark ground, where fading ink still
   clears AA. Fixed HERE, scoped to .dtx-wiki, because
   wiki_workspace.css is Support Studio's file and this page is its guest.
   ═══════════════════════════════════════════════════════════════════════ */

/* "opens the editor" measured 3.69:1 on the light ramp. Removing the 85%
   fade alone did NOT fix it — the INK was the problem, not the fade: the chip
   inherits the CTA's accent, and this page's light accent is a deep blue that
   does not clear AA over a pale chip. It is a hint, not an action, so it takes
   the page's own text ink and a ground stated in the SAME declaration. */
.dtx-wiki .swx-lane-cta-k {
  opacity: 1;
  color: var(--dt-text, #0d1526);
  background: color-mix(in srgb, var(--dt-text, #0d1526) 10%, transparent);
}

/* The empty-lane CTA's own hint text sits on the same ground. */
.dtx-wiki .swx-lane-empty p { color: var(--dt-text2, #41506b); }

/* SAVE MUST ALWAYS BE REACHABLE. The studio ribbon is one non-wrapping band
   that scrolls sideways — fine beside Support Studio's full-width canvas, but
   this page spends 288px on its own distribution rail, and browser QA measured
   the Save and Import buttons sitting 800px off the right edge of a 571px
   pane. A control you have to discover a horizontal scrollbar to reach is a
   control that is not there. The band wraps here instead. */
.dtx-wiki .swx-ribbon {
  flex-wrap: wrap;
  overflow-x: visible;
  row-gap: 7px;
}
/* The spacer's job was to push the state pill and Save to the right of a
   single row; once the band wraps it would force them onto a line of their
   own on every width. */
.dtx-wiki .swx-rb-sp { flex: 1 1 0; min-width: 0; }