/* Alphinity Docs — "how this desk takes a trade" (feature #37).
   Dark, one column of content, the same palette as the monitor (shell.css'
   :root custom properties) so the two tabs read as one instrument. No
   decision colour is a literal here — every colour is one of shell.css's
   custom properties, referenced with var(). */

/* A sidebar and a content pane, with NO JavaScript — ADR-0023 makes "/docs
   ships no <script>" true by construction, so the section switching is CSS
   `:target` driven by ordinary anchors. Picking a section is a real URL, which
   also means any section can be linked to directly. */
#docs-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

#docs-nav {
  border-right: 1px solid var(--border);
  background: var(--panel);
  padding: 18px 0 30px 0;
  overflow-y: auto;
  min-height: 0;
}

.nav-title {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin: 0 16px 12px 16px;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list a {
  display: block;
  padding: 7px 16px;
  color: var(--text-dim);
  text-decoration: none;
  border-left: 2px solid transparent;
}

.nav-list a:hover, .nav-list a:focus-visible {
  color: var(--text);
  background: var(--border);
  outline: none;
}

/* The active row is styled off `:target` too, so the sidebar and the pane can
   never disagree about which section is open. */
.nav-list a:target,
#sec-what:not(:target) ~ * .nav-list a[href="#sec-what"] {
  color: var(--text);
}

/* ── The version block ────────────────────────────────────────────────────
   Highlighted rather than merely appended: it is the legend for the coloured
   edges on the performance tab, and a legend nobody notices is a legend that
   does not work. Raised panel, its own rule above, and the swatch carries the
   only saturated colour in the whole sidebar. */
.nav-versions {
  margin: 20px 10px 0 10px;
  padding: 12px 6px 10px 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.nav-versions .nav-title {
  margin: 0 10px 10px 10px;
  color: var(--text);
  font-weight: 600;
}

.version-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.version-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  color: var(--text-dim);
  text-decoration: none;
  border-radius: 4px;
}

.version-link:hover, .version-link:focus-visible {
  color: var(--text);
  background: var(--border);
  outline: none;
}

/* The swatch IS the legend — the same value the trade card's left edge uses,
   so the two are matched by eye and not by reading a label. */
.version-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.version-num {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
}

.version-name {
  font-size: 11px;
  color: var(--text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.version-now {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--selected);
}

.nav-legend {
  margin: 10px 10px 0 10px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-dim);
}

.nav-foot {
  color: var(--text-dim);
  margin: 18px 16px 0 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

#docs {
  max-width: 980px;
  padding: 24px 28px 60px;
  overflow-y: auto;
  height: 100%;
  min-height: 0;
}

/* One section at a time. `#sec-what` is the landing section; as soon as any
   section is targeted it yields to it. A browser without `:has()` keeps the
   landing section visible alongside the targeted one — degraded, never blank. */
.doc-section {
  display: none;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.doc-section:target {
  display: block;
}

#sec-what {
  display: block;
}

#docs:has(.doc-section:target) #sec-what:not(:target) {
  display: none;
}

#docs-header h1 {
  font-size: 20px;
  letter-spacing: 0.04em;
  margin: 0 0 6px 0;
}

#docs-intro {
  color: var(--text-dim);
  max-width: 760px;
}

.doc-section {
  margin-top: 36px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.doc-section h2 {
  font-size: 16px;
  margin: 0 0 14px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* ── The six lenses ────────────────────────────────────────────────────── */

.lens-list {
  display: grid;
  gap: 10px;
}

.lens-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 2px solid var(--selected);
  border-radius: 4px;
  padding: 10px 14px;
}

.lens-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.lens-head h3 {
  font-size: 13px;
  margin: 0;
}

.lens-reads {
  color: var(--text-dim);
  font-size: 11px;
}

.lens-who {
  margin: 6px 0 0 0;
}

.lens-desc {
  margin: 6px 0 0 0;
  color: var(--text-dim);
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.quote-gloss {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 12px;
}

.quote, .fact-row {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 14px;
}

.fact-row dt {
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.fact-row dd {
  margin: 0;
}

.unavailable {
  color: var(--sell);
  font-style: italic;
  margin: 0;
}

.hard-rules, .flow-steps, .tick-stages, .debate-questions, .ladder-penalties {
  margin: 0;
  padding-left: 20px;
}

.hard-rules li, .flow-steps li, .tick-stages li,
.debate-questions li, .ladder-penalties li {
  margin-bottom: 8px;
}

.quote-h, .sub-h {
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 8px 0;
}

/* A sub-heading inside a section needs air above it; one inside a quote box
   is already the first thing in its box and must not push it open. */
.sub-h {
  margin-top: 24px;
}

.note {
  color: var(--text-dim);
  margin: 12px 0 0 0;
}

/* Which of the trader's two passes a step belongs to. Sized off the list
   text so a step's first line still reads as one line. */
.mode-chip {
  display: inline-block;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 5px;
  margin-right: 4px;
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  vertical-align: 1px;
}

.gloss p {
  margin: 0 0 10px 0;
}

.diagram {
  margin: 0 0 12px 0;
}

.diagram svg {
  width: 100%;
  height: auto;
  color: var(--text);
}

.diagram figcaption {
  color: var(--text-dim);
  margin-top: 6px;
}

.value-area-band {
  fill: var(--panel);
  stroke: var(--border);
}

.level-line {
  stroke: currentColor;
  stroke-width: 1.5;
}

.vah-line { stroke: var(--sell); }
.poc-line { stroke: var(--text-dim); stroke-dasharray: 4 3; }
.val-line { stroke: var(--buy); }

.level-label {
  fill: currentColor;
  font-size: 10px;
}

.candle {
  fill: var(--text-dim);
}

.candle-fresh {
  fill: var(--buy);
}

.panel-label {
  fill: var(--text-dim);
  font-size: 10px;
}

.panel-verdict {
  fill: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
}

.panel-verdict-hit {
  fill: var(--buy);
}

.pipe-stage rect {
  fill: var(--panel);
  stroke: var(--border);
}

.pipe-stage text {
  fill: currentColor;
  font-size: 10px;
}

.pipe-debate rect {
  fill: var(--panel);
  stroke: var(--selected);
}

.pipe-participant {
  fill: var(--border);
}

.pipe-participant-label {
  fill: currentColor;
  font-size: 8px;
}

.pipe-branch {
  fill: var(--incomplete);
  font-size: 9px;
}

.pipe-sub {
  fill: var(--text-dim);
  font-size: 8px;
}

.pipe-round {
  fill: currentColor;
  font-size: 9px;
  font-weight: 600;
}

.ladder-tf {
  fill: currentColor;
  font-size: 11px;
  font-weight: 600;
}

.ladder-horizon {
  fill: var(--text-dim);
  font-size: 10px;
}

.roster-table, .sources-table, .trade-table, .dalio-table {
  width: 100%;
  border-collapse: collapse;
}

.roster-table th, .roster-table td,
.sources-table th, .sources-table td,
.dalio-table th, .dalio-table td {
  text-align: left;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}

.roster-table th, .sources-table th, .dalio-table th {
  color: var(--text-dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* The principle column is a label, the mechanism column is the argument —
   the fixed first column keeps the two readable as a pair down the page. */
.dalio-table {
  margin-top: 12px;
}

.dalio-table td:first-child {
  width: 30%;
  color: var(--text-dim);
}

.dalio-table td:first-child strong {
  color: var(--text);
}

.standing-table td:first-child {
  width: 34%;
}

/* The one place on this page that says what the desk does NOT do yet. It is
   set apart on purpose: an honest gap buried in body text reads as a boast. */
.gap-note {
  border-left: 2px solid var(--incomplete);
}

.gap-note dd p {
  margin: 0 0 8px 0;
}

.gap-note dd p:last-child {
  margin-bottom: 0;
}

.trade-fields {
  margin: 0;
  padding-left: 20px;
}

.trade-card-img {
  max-width: 100%;
  margin-top: 8px;
  border: 1px solid var(--border);
}

.bar-list {
  list-style: none;
  margin: 12px 0 0 0;
  padding: 0;
}

.bar-row {
  display: grid;
  grid-template-columns: 70px 1fr 40px;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.bar-label {
  text-transform: uppercase;
  font-size: 11px;
  color: var(--text-dim);
}

.bar-track {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  height: 14px;
  overflow: hidden;
}

.bar {
  display: block;
  height: 100%;
}

.bar-buy { background: var(--buy); }
.bar-sell { background: var(--sell); }
.bar-hold { background: var(--hold); }
.bar-abstain { background: var(--abstain); }

.bar-count {
  text-align: right;
  color: var(--text-dim);
}

code {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.9em;
}

/* ── Section: the version cards ───────────────────────────────────────────
   Each card carries its version's colour on the same left edge the trade
   cards use, so the docs page and the performance page are visibly the same
   scheme rather than two palettes that happen to agree. */
.version-card {
  border: 1px solid var(--border);
  border-left: 3px solid var(--version-color, var(--border));
  border-radius: 5px;
  background: var(--panel);
  padding: 12px 14px;
  margin: 0 0 12px 0;
}

.version-card.is-current {
  background: var(--bg);
}

.version-head {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.version-swatch {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  flex: 0 0 auto;
}

.version-label {
  margin: 0;
  font-size: 14px;
}

.version-badge {
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--selected);
  border: 1px solid var(--selected);
  border-radius: 3px;
  padding: 1px 5px;
}

.version-span {
  margin-left: auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
}

.version-why {
  margin: 0 0 10px 0;
  color: var(--text);
}

.version-conditions {
  display: grid;
  grid-template-columns: minmax(120px, max-content) 1fr;
  gap: 3px 14px;
  margin: 0 0 10px 0;
  font-size: 12px;
}

.version-conditions dt {
  color: var(--text-dim);
  text-transform: lowercase;
}

.version-conditions dd {
  margin: 0;
  color: var(--text);
}

.version-pin {
  margin: 0;
  font-size: 11px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

/* Narrow: the definition grid stacks rather than squeezing the value column
   into a two-character ribbon. */
@media (max-width: 640px) {
  .version-conditions { grid-template-columns: 1fr; }
  .version-conditions dd { margin-bottom: 6px; }
}