/* ============================================================================
   Sahi — learn block, symbol write-ups and site footer
   ----------------------------------------------------------------------------
   Injected into the prerendered HTML of every tool route by
   scripts/prerender-pages.mjs, as a sibling AFTER <div id="root">.

   Everything is namespaced under .sahi-learn / .sahi-foot / .sahi-learn-cue and
   declares its own custom properties, so nothing here can be reached by — or
   reach into — the terminal's stylesheets. The terminal shell is
   `.app { height: 100vh; overflow: hidden }`; this block begins below it.

   Palette matches /guides/open-interest.html, which is the existing static
   surface on this domain:
     bg 0    #15020B      panel   #15020B
     accent  #A50F66      cyan    #7FF6BC
     up      #0CAD60      down    #E35650
   ========================================================================== */

.sahi-learn,
.sahi-foot,
.sahi-learn-cue {
  --s-bg-0: #15020B;
  --s-bg-1: #15020B;
  --s-bg-2: #15020B;
  --s-line: rgba(255, 255, 255, 0.08);
  --s-line-2: rgba(255, 255, 255, 0.055);
  --s-text-1: #FFFFFF;
  --s-text-2: rgba(255, 255, 255, 0.78);
  --s-text-3: rgba(255, 255, 255, 0.58);
  --s-text-4: rgba(255, 255, 255, 0.48);
  --s-accent: #A50F66;
  --s-accent-soft: rgba(165, 15, 102, 0.14);
  --s-accent-line: rgba(165, 15, 102, 0.34);
  --s-cyan: #7FF6BC;
  --s-radius: 12px;
  --s-radius-sm: 8px;
  --s-maxw: 1180px;
  /* SAHI Sans, then the bare generic. This block used to trail a stack of OS UI
     faces, so any hiccup loading the brand face silently rendered the learn
     panel in San Francisco or Segoe right under a terminal set in SAHI Sans.
     The only permitted fallback is the generic keyword. */
  --s-font: "SAHI Sans", sans-serif;

  box-sizing: border-box;
  font-family: var(--s-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Guide pages reuse .sahi-learn__card, .sahi-learn__spec, .sahi-learn__explore and the
   symbol table inside .content-main, which is NOT a descendant of .sahi-learn — so
   every custom property above would be undefined there and each border and text
   colour would collapse to its initial value.
   Only the properties are re-declared, deliberately not the font: the guides set
   their own SAHI Sans and must not be overridden from here. Values are not
   duplicated in guide.css so the palette has exactly one definition. */
.content-main {
  --s-bg-0: #15020B;
  --s-bg-1: #15020B;
  --s-bg-2: #15020B;
  --s-line: rgba(255, 255, 255, 0.08);
  --s-line-2: rgba(255, 255, 255, 0.055);
  --s-text-1: #FFFFFF;
  --s-text-2: rgba(255, 255, 255, 0.78);
  --s-text-3: rgba(255, 255, 255, 0.58);
  --s-text-4: rgba(255, 255, 255, 0.48);
  --s-accent: #A50F66;
  --s-accent-soft: rgba(165, 15, 102, 0.14);
  --s-accent-line: rgba(165, 15, 102, 0.34);
  --s-cyan: #7FF6BC;
  --s-radius: 12px;
  --s-radius-sm: 8px;
  --s-maxw: 1180px;
}

.sahi-learn *,
.sahi-learn *::before,
.sahi-learn *::after,
.sahi-foot *,
.sahi-foot *::before,
.sahi-foot *::after { box-sizing: border-box; }

/* ── Section shell ───────────────────────────────────────────────────────── */

.sahi-learn {
  position: relative;
  display: block;
  background: var(--s-bg-0);
  background-image:
    radial-gradient(ellipse 60% 40% at 12% 0%, rgba(165, 15, 102, 0.10), transparent 70%),
    radial-gradient(ellipse 50% 34% at 88% 8%, rgba(127, 246, 188, 0.045), transparent 70%);
  border-top: 1px solid var(--s-line);
  color: var(--s-text-2);
  font-size: 15px;
  line-height: 1.72;
  padding: 0 20px;
  scroll-margin-top: 0;
}

.sahi-learn__inner {
  max-width: var(--s-maxw);
  margin: 0 auto;
  padding: 72px 0 64px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 322px;
  gap: 0 56px;
  align-items: start;
}

.sahi-learn__main { min-width: 0; }

/* ── At-a-glance card ────────────────────────────────────────────────────── */

.sahi-learn__aside { position: sticky; top: 26px; min-width: 0; }

.sahi-learn__card {
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  background:
    linear-gradient(180deg, rgba(165, 15, 102, 0.085), rgba(255, 255, 255, 0.012) 46%),
    rgba(255, 255, 255, 0.015);
  padding: 22px 22px 20px;
}

.sahi-learn__cardhead {
  margin: 0 0 16px !important;
  color: var(--s-text-1);
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sahi-learn__spec { margin: 0; display: grid; gap: 13px; }

.sahi-learn__spec > div {
  display: grid;
  gap: 2px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--s-line-2);
}

.sahi-learn__spec > div:last-child { padding-bottom: 0; border-bottom: 0; }

.sahi-learn__spec dt {
  color: var(--s-text-4);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.sahi-learn__spec dd {
  margin: 0;
  color: var(--s-text-2);
  font-size: 13px;
  line-height: 1.55;
}

.sahi-learn__cardlink {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 18px;
  color: #FEA3E5;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

.sahi-learn__cardlink::after {
  content: "";
  width: 5px;
  height: 5px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg);
}

.sahi-learn__cardlink:hover,
.sahi-learn__cardlink:focus-visible { color: #FFFFFF; outline: none; }

/* ── Header block ────────────────────────────────────────────────────────── */

.sahi-learn__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 6px 13px;
  border: 1px solid var(--s-accent-line);
  border-radius: 999px;
  background: var(--s-accent-soft);
  color: #FEA3E5;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}

.sahi-learn__eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--s-accent);
  box-shadow: 0 0 0 3px rgba(165, 15, 102, 0.22);
}

.sahi-learn h1 {
  margin: 0 0 20px;
  color: var(--s-text-1);
  font-size: clamp(1.6rem, 3.2vw, 2.45rem);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.025em;
}

.sahi-learn__lede {
  margin: 0 0 16px;
  max-width: 74ch;
  color: var(--s-text-2);
  font-size: 15.5px;
  line-height: 1.78;
}

.sahi-learn__lede:last-child { margin-bottom: 0; }

/* ── Section headings ────────────────────────────────────────────────────── */

.sahi-learn h2 {
  margin: 0 0 6px;
  color: var(--s-text-1);
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.3;
}

.sahi-learn__sub {
  margin: 0 0 22px;
  color: var(--s-text-3);
  font-size: 13.5px;
}

.sahi-learn__block { margin-top: 56px; }

.sahi-learn__rule {
  height: 1px;
  margin: 56px 0;
  border: 0;
  background: linear-gradient(90deg, var(--s-line), transparent 82%);
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */

.sahi-learn__faq { display: grid; gap: 10px; max-width: 900px; }

.sahi-learn__q {
  border: 1px solid var(--s-line-2);
  border-radius: var(--s-radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.012));
  overflow: hidden;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.sahi-learn__q:hover { border-color: rgba(255, 255, 255, 0.13); }

.sahi-learn__q[open] {
  border-color: var(--s-accent-line);
  background: linear-gradient(180deg, rgba(165, 15, 102, 0.075), rgba(165, 15, 102, 0.018));
}

.sahi-learn__q > summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 17px 20px;
  color: var(--s-text-1);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.sahi-learn__q > summary::-webkit-details-marker { display: none; }
.sahi-learn__q > summary::marker { content: ""; }

.sahi-learn__q > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin: 6px 0 0 auto;
  border-right: 2px solid var(--s-text-4);
  border-bottom: 2px solid var(--s-text-4);
  transform: rotate(45deg);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.sahi-learn__q[open] > summary::after {
  transform: rotate(-135deg);
  border-color: #FEA3E5;
}

.sahi-learn__q > summary:focus-visible {
  outline: 2px solid var(--s-accent);
  outline-offset: -2px;
  border-radius: var(--s-radius);
}

.sahi-learn__q > summary::before {
  content: "";
  flex: 0 0 auto;
  width: 3px;
  align-self: stretch;
  min-height: 20px;
  margin: 2px 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.11);
  transition: background 0.2s ease;
}

.sahi-learn__q[open] > summary::before { background: var(--s-accent); }

.sahi-learn__a {
  margin: 0;
  padding: 0 20px 19px 37px;
  color: var(--s-text-2);
  font-size: 14.5px;
  line-height: 1.78;
  max-width: 76ch;
}

/* ── Explore more ────────────────────────────────────────────────────────── */

.sahi-learn__group + .sahi-learn__group { margin-top: 22px; }

.sahi-learn__grouphead {
  margin: 0 0 11px;
  color: var(--s-text-4);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sahi-learn__explore {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sahi-learn__explore a {
  display: inline-block;
  padding: 8px 15px;
  border: 1px solid var(--s-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.022);
  color: var(--s-text-2);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.sahi-learn__explore a:hover,
.sahi-learn__explore a:focus-visible {
  color: #FFFFFF;
  border-color: var(--s-accent-line);
  background: var(--s-accent-soft);
  outline: none;
}

.sahi-learn__explore a[aria-current="page"] {
  color: #FECCF1;
  border-color: var(--s-accent-line);
  background: var(--s-accent-soft);
}

/* ── Breadcrumb cue: sits at the bottom edge of the first viewport and scrolls
      away with the page. Its flat treatment mirrors the shared breadcrumb
      pattern instead of appearing as a floating chip. ───────────────────── */

/* The cue sits in normal flow immediately above the write-up it points at.
   It used to float at `top: calc(100vh - 38px)` over the last strip of the
   terminal, which printed it straight through the chart legend on the OI
   tools and through the table on the chain. `translateX(-50%)` of a
   fractional-width element also parked its text on a half pixel, so it
   rendered permanently soft next to the crisp legend beside it. In flow it
   overlaps nothing and lands on the grid. */
.sahi-learn-cue {
  position: static;
  z-index: auto;
  display: block;
  box-sizing: border-box;
  /* Matches .sahi-learn so the cue and the write-up share one gutter. */
  padding: 0 20px;
  border: 0;
  border-top: 1px solid var(--s-line);
  border-radius: 0;
  background: var(--s-bg-0);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: var(--s-text-3);
  font-family: var(--s-font);
  font-size: 14px;
  line-height: 1.4;
  white-space: nowrap;
}

/* The section directly below owns an identical top rule — without this the
   two stack into a double line 1px apart. */
.sahi-learn-cue + .sahi-learn {
  border-top: 0;
}

.sahi-learn-cue ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  /* Same measure as .sahi-learn__inner, so the cue starts on the same
     left edge as the heading underneath it. */
  max-width: var(--s-maxw);
  margin: 0 auto;
  padding: 18px 0 0;
  list-style: none;
}

.sahi-learn-cue li {
  display: inline-flex;
  align-items: center;
}

.sahi-learn-cue a {
  color: var(--s-text-3);
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.18s ease;
}

.sahi-learn-cue a:hover {
  color: var(--s-text-1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sahi-learn-cue a:focus-visible {
  outline: 2px solid var(--s-accent);
  outline-offset: 3px;
}

.sahi-learn-cue .sep {
  color: var(--s-text-4);
}

.sahi-learn-cue [aria-current] {
  color: var(--s-text-1);
  font-weight: 500;
}

#sahi-learn-faq {
  scroll-margin-top: 24px;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.sahi-foot {
  display: block;
  background: var(--s-bg-1);
  border-top: 1px solid var(--s-line);
  color: var(--s-text-3);
  font-size: 13.5px;
  line-height: 1.7;
  padding: 0 20px;
}

.sahi-foot__inner {
  max-width: var(--s-maxw);
  margin: 0 auto;
  padding: 52px 0 30px;
}

.sahi-foot__cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
  gap: 40px 32px;
}

.sahi-foot__brand p {
  margin: 14px 0 0;
  max-width: 34ch;
  color: var(--s-text-3);
  font-size: 13px;
  line-height: 1.7;
}

.sahi-foot__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--s-text-1);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.sahi-foot__logo img {
  width: 26px;
  height: 26px;
  content: url("/brand/sahi-mark-on-dark.png?v=sahi-brand-20260730");
  object-fit: contain;
  border-radius: 0;
  display: block;
  background: transparent;
  box-shadow: none;
  filter: none;
}

:root[data-theme="light"] .sahi-foot__logo img {
  content: url("/brand/sahi-mark-on-light.png?v=sahi-brand-20260730");
}

.sahi-foot h3 {
  margin: 0 0 14px;
  color: var(--s-text-1);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.sahi-foot ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.sahi-foot a {
  color: var(--s-text-3);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.15s ease;
}

.sahi-foot a:hover,
.sahi-foot a:focus-visible { color: #FFFFFF; outline: none; }

.sahi-foot__legal {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--s-line-2);
  display: grid;
  gap: 16px;
}

.sahi-foot__legal p {
  margin: 0;
  color: var(--s-text-4);
  font-size: 11.5px;
  line-height: 1.75;
}

.sahi-foot__legal strong {
  display: block;
  margin-bottom: 3px;
  color: var(--s-text-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.sahi-foot__legal a { color: var(--s-text-3); font-size: inherit; text-decoration: underline; text-underline-offset: 2px; }

.sahi-foot__risk {
  padding: 15px 17px;
  border: 1px solid rgba(227, 86, 80, 0.2);
  border-radius: var(--s-radius-sm);
  background: rgba(227, 86, 80, 0.05);
}

/* The risk disclosure is a regulatory notice, so it has to stay legible in both
   themes. Both colours here were hardcoded to the dark palette, which left
   white body copy sitting on the near-white wash in light mode. */
.sahi-foot__risk strong { color: var(--s-risk-ink, #EE807B); }
.sahi-foot__risk p { color: var(--s-text-2); }

:root[data-theme="light"] .sahi-foot__risk { --s-risk-ink: #AE2C27; }

.sahi-foot__base {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--s-line-2);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
  justify-content: space-between;
  color: var(--s-text-4);
  font-size: 11.5px;
}

.sahi-foot__base nav { display: flex; flex-wrap: wrap; gap: 18px; }
.sahi-foot__base a { font-size: 11.5px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* ── Light theme: the terminal supports :root[data-theme='light'] ───────── */

:root[data-theme="light"] .sahi-learn,
:root[data-theme="light"] .sahi-foot,
:root[data-theme="light"] .sahi-learn-cue {
  --s-bg-0: #FFFFFF;
  --s-bg-1: #FEF1FA;
  --s-bg-2: #FEF1FA;
  --s-line: rgba(21, 2, 11, 0.11);
  --s-line-2: rgba(21, 2, 11, 0.075);
  --s-text-1: #15020B;
  --s-text-2: rgba(21, 2, 11, 0.78);
  --s-text-3: rgba(21, 2, 11, 0.68);
  --s-text-4: rgba(21, 2, 11, 0.60);
  --s-accent-soft: rgba(165, 15, 102, 0.09);
  --s-accent-line: rgba(165, 15, 102, 0.3);
}

:root[data-theme="light"] .sahi-learn {
  background-image:
    radial-gradient(ellipse 60% 40% at 12% 0%, rgba(165, 15, 102, 0.06), transparent 70%),
    radial-gradient(ellipse 50% 34% at 88% 8%, rgba(127, 246, 188, 0.04), transparent 70%);
}

:root[data-theme="light"] .sahi-learn__q {
  background: linear-gradient(180deg, rgba(21, 2, 11, 0.022), rgba(21, 2, 11, 0.008));
}

:root[data-theme="light"] .sahi-learn__q[open] {
  background: linear-gradient(180deg, rgba(165, 15, 102, 0.06), rgba(165, 15, 102, 0.015));
}

:root[data-theme="light"] .sahi-learn__facts li,
:root[data-theme="light"] .sahi-learn__explore a { background: rgba(21, 2, 11, 0.025); }

:root[data-theme="light"] .sahi-learn-cue {
  background: var(--s-bg-0);
  box-shadow: none;
}

:root[data-theme="light"] .sahi-learn__explore a:hover,
:root[data-theme="light"] .sahi-foot a:hover { color: #15020B; }

/* ── Motion / print ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .sahi-learn *,
  .sahi-foot *,
  .sahi-learn-cue { transition: none !important; }
}

@media print {
  .sahi-learn-cue { display: none; }
  .sahi-learn, .sahi-foot { background: #FFFFFF; color: #0F0F0F; }
  .sahi-learn__a { display: block !important; }
}

/* The generated symbol description remains in the document for prerendering,
   but it is not part of the interactive analytics dashboard. Hide the whole
   post-dashboard furniture once the live app shell is present. Standalone
   guide and FAQ pages do not mount `#root > .app`, so they remain unchanged. */
body:has(> #root > .app) > .sahi-learn-cue,
body:has(> #root > .app) > #sahi-learn,
body:has(> #root > .app) > .sahi-foot {
  display: none !important;
}

/* ============================================================================
   Round 2 — programmatic symbol pages
   Breadcrumbs, baked data tables, the A-Z symbol directory and sibling links.
   ========================================================================== */

/* ── Breadcrumbs ─────────────────────────────────────────────────────────── */

.sahi-learn__crumbs { margin: 0 0 22px; }

.sahi-learn__crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
}

.sahi-learn__crumbs li { display: inline-flex; align-items: center; gap: 7px; }

.sahi-learn__crumbs li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-right: 1.4px solid var(--s-text-4);
  border-top: 1.4px solid var(--s-text-4);
  transform: rotate(45deg);
}

.sahi-learn__crumbs a { color: var(--s-text-3); text-decoration: none; transition: color 0.15s ease; }
.sahi-learn__crumbs a:hover, .sahi-learn__crumbs a:focus-visible { color: #FFFFFF; outline: none; }
.sahi-learn__crumbs [aria-current="page"] { color: var(--s-text-1); font-weight: 600; }

/* ── Baked data table ────────────────────────────────────────────────────── */

.sahi-learn__tablewrap {
  margin: 0;
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  background: rgba(255, 255, 255, 0.018);
  overflow: hidden;
}

.sahi-learn__tablecap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--s-line-2);
  color: var(--s-text-2);
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.sahi-learn__stamp {
  color: var(--s-text-4);
  font-size: 11.5px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sahi-learn__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}

.sahi-learn__table th,
.sahi-learn__table td {
  padding: 10px 18px;
  text-align: left;
  border-bottom: 1px solid var(--s-line-2);
  white-space: nowrap;
}

.sahi-learn__table th.num,
.sahi-learn__table td.num { text-align: right; }

.sahi-learn__table thead th {
  color: var(--s-text-4);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.022);
}

.sahi-learn__table tbody th { color: var(--s-text-1); font-weight: 600; }
.sahi-learn__table tbody td { color: var(--s-text-2); }
.sahi-learn__table tbody tr:last-child th,
.sahi-learn__table tbody tr:last-child td { border-bottom: 0; }
.sahi-learn__table tbody tr:hover th,
.sahi-learn__table tbody tr:hover td { background: rgba(255, 255, 255, 0.022); }

.sahi-learn__table tr.is-atm th,
.sahi-learn__table tr.is-atm td {
  background: rgba(165, 15, 102, 0.09);
  box-shadow: inset 2px 0 0 var(--s-accent);
}

.sahi-learn__tag {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--s-accent-soft);
  border: 1px solid var(--s-accent-line);
  color: #FEA3E5;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  vertical-align: 1px;
}

/* ── Sibling tool links ──────────────────────────────────────────────────── */

.sahi-learn__siblings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sahi-learn__siblings a {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 16px;
  border: 1px solid var(--s-line-2);
  border-radius: var(--s-radius-sm);
  background: rgba(255, 255, 255, 0.018);
  text-decoration: none;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.sahi-learn__siblings a:hover,
.sahi-learn__siblings a:focus-visible {
  border-color: var(--s-accent-line);
  background: var(--s-accent-soft);
  outline: none;
}

.sahi-learn__sibtool { color: var(--s-text-1); font-size: 13.5px; font-weight: 600; }
.sahi-learn__sibsym { color: var(--s-text-4); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; }

/* ── A-Z symbol directory (how Google finds all 217 symbol pages) ────────── */

.sahi-learn__dir {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 22px 18px;
}

.sahi-learn__dirgroup { min-width: 0; }

.sahi-learn__dirletter {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--s-line-2);
  color: var(--s-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.sahi-learn__dirgroup ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }

.sahi-learn__dirgroup a {
  color: var(--s-text-3);
  font-size: 12.5px;
  text-decoration: none;
  transition: color 0.14s ease;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sahi-learn__dirgroup a:hover,
.sahi-learn__dirgroup a:focus-visible { color: #FFFFFF; outline: none; }

.sahi-learn__cardstamp {
  margin: 14px 0 0;
  color: var(--s-text-4);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* ── Light theme ─────────────────────────────────────────────────────────── */

:root[data-theme="light"] .sahi-learn__tablewrap,
:root[data-theme="light"] .sahi-learn__siblings a { background: rgba(21, 2, 11, 0.02); }
:root[data-theme="light"] .sahi-learn__table thead th { background: rgba(21, 2, 11, 0.03); }
:root[data-theme="light"] .sahi-learn__table tbody tr:hover th,
:root[data-theme="light"] .sahi-learn__table tbody tr:hover td { background: rgba(21, 2, 11, 0.028); }
:root[data-theme="light"] .sahi-learn__crumbs a:hover,
:root[data-theme="light"] .sahi-learn__dirgroup a:hover,
:root[data-theme="light"] .sahi-learn__siblings a:hover .sahi-learn__sibtool { color: #15020B; }

/* ==========================================================================
   Market-semantic colour authority
   Purple is interaction-only: focus, hover/active strokes and small icons.
   Static sections, cards, chips, table cells and structural borders are neutral.
   ========================================================================== */

.sahi-learn,
.sahi-foot,
.sahi-learn-cue {
  --s-bg-0: #0F0F0F;
  --s-bg-1: #0F0F0F;
  --s-bg-2: #1A1A1A;
  --s-line: rgba(255, 255, 255, 0.10);
  --s-line-2: rgba(255, 255, 255, 0.065);
  --s-accent-soft: rgba(255, 255, 255, 0.045);
  --s-accent-line: var(--s-line);
}

.sahi-learn {
  background: var(--s-bg-0);
  background-image: none;
}

.sahi-learn__card,
.sahi-learn__q,
.sahi-learn__q[open],
.sahi-learn__tablewrap,
.sahi-learn__siblings a {
  border-color: var(--s-line);
  background: rgba(255, 255, 255, 0.018);
  background-image: none;
}

.sahi-learn__eyebrow,
.sahi-learn__tag,
.sahi-learn__explore a[aria-current="page"] {
  border-color: var(--s-line);
  background: rgba(255, 255, 255, 0.035);
  color: var(--s-text-2);
}

.sahi-learn__table tr.is-atm th,
.sahi-learn__table tr.is-atm td {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 2px 0 0 var(--s-accent);
}

.sahi-learn__dirletter {
  border-color: var(--s-line);
}

.sahi-learn-cue {
  background: var(--s-bg-0);
}

/* Purple remains available on interactive states as a stroke/focus cue. */
.sahi-learn__q:hover,
.sahi-learn__q[open],
.sahi-learn__explore a:hover,
.sahi-learn__explore a:focus-visible,
.sahi-learn__siblings a:hover,
.sahi-learn__siblings a:focus-visible {
  border-color: var(--s-accent);
}

:root[data-theme="light"] .sahi-learn,
:root[data-theme="light"] .sahi-foot,
:root[data-theme="light"] .sahi-learn-cue {
  --s-bg-0: #FFFFFF;
  --s-bg-1: #F9F6F1;
  --s-bg-2: #F5F5F5;
  --s-line: rgba(15, 15, 15, 0.12);
  --s-line-2: rgba(15, 15, 15, 0.075);
  --s-accent-soft: rgba(15, 15, 15, 0.035);
  background-image: none;
}

:root[data-theme="light"] .sahi-learn__card,
:root[data-theme="light"] .sahi-learn__q,
:root[data-theme="light"] .sahi-learn__q[open],
:root[data-theme="light"] .sahi-learn__tablewrap,
:root[data-theme="light"] .sahi-learn__siblings a {
  background: rgba(15, 15, 15, 0.018);
}

:root[data-theme="light"] .sahi-learn__eyebrow,
:root[data-theme="light"] .sahi-learn__tag,
:root[data-theme="light"] .sahi-learn__explore a[aria-current="page"] {
  background: rgba(15, 15, 15, 0.035);
  color: var(--s-text-2);
}

:root[data-theme="light"] .sahi-learn__table tr.is-atm th,
:root[data-theme="light"] .sahi-learn__table tr.is-atm td {
  background: rgba(15, 15, 15, 0.035);
}

/* ============================================================================
   Learn strip
   ----------------------------------------------------------------------------
   Everything a tool dashboard adds below the terminal. Three links, each with a
   line saying where it goes, under the page H1 and one sentence of lede.

   The H1 is set at 19px, not hero size. It is here because /option-chain is the
   strongest keyword match on the site and needs to say what it is in crawlable
   text — but it is furniture at the foot of a terminal, not a landing page, and
   it is sized accordingly. Everything longer lives on /guides/<tool>.html.
   ========================================================================== */

.sahi-learn {
  --s-bg-0: #15020B;
  --s-line: rgba(255, 255, 255, 0.08);
  --s-text-1: #FFFFFF;
  --s-text-3: rgba(255, 255, 255, 0.58);
  --s-text-4: rgba(255, 255, 255, 0.48);
  --s-accent-line: rgba(165, 15, 102, 0.34);
  --s-radius: 12px;
  --s-maxw: 1180px;
  /* SAHI Sans, then the bare generic — same rule as the block above: the brand
     face or the generic keyword, never an OS UI face. */
  --s-font: "SAHI Sans", sans-serif;

  display: block;
  box-sizing: border-box;
  background: var(--s-bg-0);
  border-top: 1px solid var(--s-line);
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--s-font);
  -webkit-font-smoothing: antialiased;
  padding: 0 20px;
}

.sahi-learn *,
.sahi-learn *::before,
.sahi-learn *::after { box-sizing: border-box; }

.sahi-learn__inner {
  max-width: var(--s-maxw);
  margin: 0 auto;
  padding: 34px 0 38px;
}

.sahi-learn__head { max-width: 74ch; margin-bottom: 24px; }

.sahi-learn h1 {
  margin: 0 0 8px;
  font-size: 19px;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--s-text-1);
}

.sahi-learn__lede {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--s-text-3);
}

.sahi-learn__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 26px;
  padding: 18px 20px;
  border: 1px solid var(--s-accent-line);
  border-radius: var(--s-radius);
  background: linear-gradient(180deg, rgba(165, 15, 102, 0.11), rgba(255, 255, 255, 0.012) 76%);
}

.sahi-learn__prompt {
  flex: 1 1 320px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--s-text-3);
}

.sahi-learn__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Real buttons, not text links — this is the one action the strip exists for. */
.sahi-learn__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid var(--s-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--s-text-1);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.sahi-learn__btn:hover,
.sahi-learn__btn:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.28);
  transform: translateY(-1px);
  outline: none;
}

.sahi-learn__btn:focus-visible { outline: 2px solid var(--s-cyan, #7FF6BC); outline-offset: 3px; }

.sahi-learn__btn--primary {
  background: #A50F66;
  border-color: #A50F66;
  color: #FFFFFF;
  box-shadow: 0 8px 22px rgba(165, 15, 102, 0.34);
}

.sahi-learn__btn--primary::after { content: "→"; font-weight: 400; }

.sahi-learn__btn--primary:hover,
.sahi-learn__btn--primary:focus-visible {
  background: #C80E7D;
  border-color: #C80E7D;
  box-shadow: 0 12px 28px rgba(165, 15, 102, 0.44);
}

:root[data-theme="light"] .sahi-learn {
  --s-bg-0: #FFFFFF;
  --s-line: rgba(15, 15, 15, 0.12);
  --s-text-1: #0F0F0F;
  --s-text-3: rgba(15, 15, 15, 0.68);
  --s-text-4: rgba(15, 15, 15, 0.60);
  color: rgba(15, 15, 15, 0.78);
}
:root[data-theme="light"] .sahi-learn__link { background: rgba(15, 15, 15, 0.025); }
:root[data-theme="light"] .sahi-learn__kicker { color: #A50F66; }

/* ── Collapsed folds ────────────────────────────────────────────────────────
   The FAQ, the explore list and the A-Z symbol directory are all required as
   real text on the tool URL (Prompt 1 task 3, Prompt 2 task 1 — checklists A2
   and B2c). Prompt 1 task 3 permits an accordion so long as the answer text is
   in the source, which is what lets ~200 directory links and six full answers
   ship without becoming a wall of copy under a trading terminal.

   <details> keeps the content in the DOM when closed, so View Source and every
   crawler still read it. Never swap this for JS-toggled visibility.
   ------------------------------------------------------------------------- */
.sahi-learn__fold {
  margin-top: 12px;
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  background: rgba(255, 255, 255, 0.014);
}

.sahi-learn__fold summary {
  cursor: pointer;
  list-style: none;
  padding: 13px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--s-text-1);
}

.sahi-learn__fold summary::-webkit-details-marker { display: none; }

.sahi-learn__fold summary::before {
  content: "›";
  font-size: 16px;
  line-height: 1;
  color: var(--s-text-4);
  transition: transform 0.2s ease;
}

.sahi-learn__fold[open] > summary::before { transform: rotate(90deg); }
.sahi-learn__fold summary:hover { color: #FFFFFF; }
.sahi-learn__fold summary:focus-visible { outline: 2px solid var(--s-accent); outline-offset: -2px; }

.sahi-learn__count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  color: var(--s-text-4);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  padding: 2px 9px;
}

.sahi-learn__foldbody {
  padding: 4px 18px 18px;
  border-top: 1px solid var(--s-line-2);
}

.sahi-learn__eyebrow {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #FEA3E5;
}

.sahi-learn__block { margin-top: 20px; }
.sahi-learn__block h2 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--s-text-1); }
.sahi-learn__sub { margin: 0 0 14px; font-size: 13px; color: var(--s-text-3); }

/* Contextual guide link closing each analysis section. */
.sahi-learn__guideline {
  margin: 18px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--s-line-2);
  font-size: 12.5px;
  color: var(--s-text-4);
}
.sahi-learn__guideline a { color: var(--s-cyan); text-decoration: none; font-weight: 600; }
.sahi-learn__guideline a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Card interaction language ──────────────────────────────────────────────
   Four clickable surfaces exist across the site and had drifted to three
   different radii and three hover behaviours: .sahi-learn__next (symbol page →
   analysis), .sahi-learn__btn (tool page CTAs), .guide-card (guide grids) and
   .oc-analysis-link (in the terminal). They now share one grammar —

     rest   1px hairline, barely-there fill
     hover  accent border, 1px lift, soft shadow, arrow slides 3px

   so a clickable block reads the same wherever it appears. Sizes still differ
   by context; only the behaviour is unified.
   ------------------------------------------------------------------------- */
.sahi-learn__next {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-width: 620px;
  padding: 17px 20px;
  border: 1px solid var(--s-accent-line);
  border-radius: var(--s-radius);
  background: linear-gradient(180deg, rgba(165, 15, 102, 0.12), rgba(255, 255, 255, 0.012) 76%);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.sahi-learn__next:hover,
.sahi-learn__next:focus-visible {
  border-color: rgba(165, 15, 102, 0.75);
  background: linear-gradient(180deg, rgba(165, 15, 102, 0.18), rgba(255, 255, 255, 0.015) 76%);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.32);
  outline: none;
}
.sahi-learn__next:focus-visible { outline: 2px solid var(--s-cyan); outline-offset: 3px; }

.sahi-learn__next-k {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 700;
  color: #FFFFFF;
}
.sahi-learn__next-k::after {
  content: "→";
  font-weight: 400;
  color: var(--s-text-4);
  transition: transform 0.2s ease;
}
.sahi-learn__next:hover .sahi-learn__next-k::after { transform: translateX(3px); }

.sahi-learn__next-v {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--s-text-3);
}

:root[data-theme="light"] .sahi-learn__next {
  background: rgba(15, 15, 15, 0.03);
  border-color: rgba(15, 15, 15, 0.16);
}
:root[data-theme="light"] .sahi-learn__next-k { color: #0F0F0F; }

/* A-Z directory on /analysis — same job as the per-tool directories on the hubs. */
.sahi-learn__directory {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 22px 26px;
  margin-top: 24px;
}
.sahi-learn__dirgroup h3 {
  margin: 0 0 9px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--s-line);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--s-cyan);
}
.sahi-learn__dirgroup ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.sahi-learn__dirgroup a {
  font-size: 13px;
  color: var(--s-text-3);
  text-decoration: none;
  transition: color 0.15s ease;
}
.sahi-learn__dirgroup a:hover,
.sahi-learn__dirgroup a:focus-visible { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }