/**
 * The guide. Diagram vocabulary only; structure comes from options.css and the
 * stepped/troubleshooting bits from help.css, both loaded first.
 *
 * EVERY DEALER COLOUR IS A TOKEN, never a literal, and that is load-bearing here
 * in a way it is not on an ordinary page. This page's whole job is teaching that
 * red means resistance, amber means the pin and purple means the flip. A diagram
 * drawn in a slightly different red teaches the wrong colour for a line the chart
 * is about to draw, which is worse than no diagram. test/uiTokens.test.mjs fails
 * on any hex in here.
 *
 * The SVGs are styled by CLASS rather than by presentation attributes, so the same
 * tokens reach them and a palette change moves the diagrams with the chart.
 */

/* ------------------------------------------------------------------ toc --- */

/* Chips in the hero, not a sticky strip of its own.
 *
 * It WAS sticky, and with the redesign's sticky topbar above it that made two
 * pinned bars stacked to 100px -- a fifth of a laptop viewport spent on chrome, on
 * a page whose entire job is reading. The topbar is the thing worth pinning
 * (it carries the link to the other help page and the session state); a table of
 * contents is a thing you use once, at the top, which is where it now lives. */
.toc {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tdx-space-6);
  padding: 0 var(--tdx-space-24) var(--tdx-space-32);
}
.toc a {
  padding: var(--tdx-space-6) var(--tdx-space-12);
  border-radius: var(--tdx-radius-pill);
  color: var(--tdx-white-2);
  font-size: var(--tdx-text-sm);
  text-decoration: none;
  /* A visible chip at rest, not only on hover. Seven transparent-bordered links in
   * a row read as one sentence of link text; the point of a contents strip is that
   * you can see there are seven of them without hovering to find out. */
  background: var(--tdx-panel-lo);
  border: 1px solid var(--tdx-line-soft);
  transition:
    background var(--tdx-dur-fast) var(--tdx-ease-out),
    border-color var(--tdx-dur-fast) var(--tdx-ease-out),
    color var(--tdx-dur-fast) var(--tdx-ease-out);
}
.toc a:hover {
  color: var(--tdx-white);
  background: var(--tdx-raise);
  border-color: var(--tdx-line-hi);
}
.toc a:focus-visible { outline: 2px solid var(--tdx-accent); outline-offset: 2px; }

/* ------------------------------------------------------------- figures --- */

.fig { margin: 0; padding: var(--tdx-space-16) var(--tdx-space-24) var(--tdx-space-20); }
.fig svg { width: 100%; height: auto; display: block; border-radius: var(--tdx-radius-sm); }
.fig--narrow svg { max-width: 560px; margin: 0 auto; }
.fig--inline { padding: var(--tdx-space-12) 0 0; }
.fig figcaption {
  margin-top: var(--tdx-space-12);
  color: var(--tdx-slate);
  font-size: var(--tdx-text-xs);
  line-height: 1.55;
}

/* ------------------------------------------------- the diagram vocabulary --- */

.d-bg { fill: var(--tdx-navy); }

/* The four meanings. Same tokens the chart draws with. */
.d-res  { stroke: var(--tdx-red);    stroke-width: 2; }
.d-sup  { stroke: var(--tdx-green);  stroke-width: 2; }
.d-pin  { stroke: var(--tdx-amber);  stroke-width: 2; }
/* Dashed, because the flip is not a wall and the chart draws it apart too. */
.d-flip { stroke: var(--tdx-purple); stroke-width: 2; stroke-dasharray: 7 5; }

/* The bloom. On the chart it is a stack of wide translucent lines; here one
 * translucent band says the same thing without pretending to be a screenshot. */
.d-glow-res { fill: var(--tdx-red);   opacity: 0.16; }
.d-glow-sup { fill: var(--tdx-green); opacity: 0.16; }
.d-glow-pin { fill: var(--tdx-amber); opacity: 0.16; }

.d-lbl { font: 600 9px var(--tdx-mono); text-anchor: end; }
.d-t-res  { fill: var(--tdx-red-text); }
.d-t-sup  { fill: var(--tdx-green-text); }
.d-t-pin  { fill: var(--tdx-amber); }
.d-t-flip { fill: var(--tdx-purple-text); }

.d-candle line { stroke: var(--tdx-slate); stroke-width: 1.4; }
.d-candle .d-up { fill: var(--tdx-green); }
.d-candle .d-dn { fill: var(--tdx-red); }
.d-vol { fill: var(--tdx-slate); opacity: 0.55; }

.d-note { fill: var(--tdx-slate); font: 600 9px var(--tdx-font); text-anchor: end; }
.d-mini { fill: var(--tdx-slate); font: 600 9px var(--tdx-mono); }

/* The regime card, sketched. */
.d-card rect { fill: rgba(var(--tdx-panel-rgb), 0.96); stroke: var(--tdx-line); }
.d-card-h { fill: var(--tdx-green-text); font: 700 7.5px var(--tdx-mono); letter-spacing: 0.06em; }
.d-card-b { fill: var(--tdx-white-2); font: 600 7px var(--tdx-font); }
.d-card-s { fill: var(--tdx-slate); font: 500 6px var(--tdx-font); }
.d-dot-pin  { fill: var(--tdx-amber); }
.d-dot-flip { fill: var(--tdx-purple); }

/* Boxes and arrows, for the flow diagrams. */
.d-exp rect { fill: rgba(var(--tdx-slate-rgb), 0.1); stroke: var(--tdx-line-soft); }
.d-exp text { fill: var(--tdx-white-2); font: 600 11px var(--tdx-font); text-anchor: middle; }
.d-exp .d-sub { fill: var(--tdx-slate); font: 500 9px var(--tdx-font); }
.d-exp--out rect { fill: rgba(var(--vx-blue-rgb), 0.12); stroke: rgba(var(--vx-blue-rgb), 0.42); }
.d-arrow { fill: none; stroke: var(--tdx-slate); stroke-width: 1.3; opacity: 0.7; }

/* ------------------------------------------------------ reaction gallery --- */

.react {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--tdx-space-12);
  padding: var(--tdx-space-16) var(--tdx-space-24);
}
.react__i {
  margin: 0;
  padding: var(--tdx-space-12);
  border-radius: var(--tdx-radius-sm);
  background: rgba(var(--tdx-slate-rgb), 0.07);
  border: 1px solid var(--tdx-line-soft);
}
.react__i svg { width: 100%; height: auto; display: block; }
.react__i figcaption {
  margin-top: var(--tdx-space-8);
  color: var(--tdx-slate);
  font-size: var(--tdx-text-xs);
  line-height: 1.5;
}
/* The word is the thing being taught, so it gets its own line and the only
 * full-strength colour in the caption. */
.react__i figcaption b {
  display: block;
  margin-bottom: 3px;
  color: var(--tdx-white);
  font: 700 11px var(--tdx-mono);
  letter-spacing: 0.06em;
}

/* --------------------------------------------------------- setting rows --- */

.setting {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: var(--tdx-space-16);
  padding: var(--tdx-space-16) var(--tdx-space-24);
  border-top: var(--tdx-rule);
}
.setting__k {
  font-weight: 620;
  font-size: var(--tdx-text-sm);
  color: var(--tdx-white);
}
.setting__v p { margin: 0 0 var(--tdx-space-8); font-size: var(--tdx-text-sm); color: var(--tdx-white-2); line-height: 1.6; }
.setting__v p:last-child { margin-bottom: 0; }
.setting__v .fine { color: var(--tdx-slate); }

/* ---------------------------------------------------------------- narrow --- */

@media (max-width: 620px) {
  .setting { grid-template-columns: minmax(0, 1fr); gap: var(--tdx-space-8); padding-left: var(--tdx-space-16); padding-right: var(--tdx-space-16); }
  .fig { padding-left: var(--tdx-space-16); padding-right: var(--tdx-space-16); }
  .react { padding-left: var(--tdx-space-16); padding-right: var(--tdx-space-16); }
  .toc { padding-left: var(--tdx-space-16); padding-right: var(--tdx-space-16); }
}