/* ============================================================
   TWO STEPS DOWN — shared diagram
   Ported from "10th (2).html", which replaces the earlier
   "10th final.html" / "pcm.html" pair.

   WHY THIS VERSION SETTLES THE WIDTH ARGUMENT
   The old design was a top-down fan: one column per stream, so
   width grew with the number of streams and thirteen of them ran
   2530px. Every fix - narrowing boxes, full-bleeding the section,
   sideways scroll - was working around that.

   This one reads left to right in three columns: Class 10, the
   streams down a spine, then what each opens into. Column width is
   clamped (158-292px), so the board never exceeds about 1056px no
   matter how many streams there are. It fits the content column on
   every page, and growth goes downward, where a page already
   scrolls. The full-bleed wrapper and the width presets are gone.

   TWO DEPARTURES FROM THE FILE, both deliberate:

   1. Type is the site's - Archivo labels, Inter prose, mono for
      figures - as agreed last round. The prototype's JetBrains Mono
      is not loaded anywhere; --f-data is IBM Plex Mono, which the
      layout already serves.

   2. Everything is scoped under .tsd. The prototype styled bare
      body, header, h1 and put its palette on :root, all of which
      would reach the site's own chrome.

   The blueprint palette, the glass sheet, the elbow wires with
   arrowheads, the vignette and the phone layout are all as drawn.
   ============================================================ */

.tsd{
  /* The prototype's blueprint theme, scoped. It also shipped "slate" and
     "sage"; only this one is ported, and swapping is a matter of replacing
     these values. */
  --paper:#eaeff5;
  --paper-2:#e2e9f1;
  --grid:rgba(38,71,110,.072);
  --grid-strong:rgba(38,71,110,.135);
  --sheet-a:rgba(255,255,255,.52);
  --sheet-b:rgba(255,255,255,.26);
  --frame:rgba(38,71,110,.14);
  --ink:#0f151d;
  --ink-soft:#4c5a6b;
  --ink-faint:#8593a4;
  --card:#ffffff;
  --card-line:#d2dae4;
  --wire:#a6b4c4;
  --wire-lit:#1c3d63;
  --hi:#0d7a63;
  --mid:#a5620f;
  --low:#b13129;
  --shadow:22,40,62;
  --ease:cubic-bezier(.4,0,.2,1);

  --mono:var(--f-data);
  --label:var(--f-display);
  --body:var(--f-body);

  color:var(--ink);
  font-family:var(--body);
  font-size:13px;
  -webkit-font-smoothing:antialiased;
  border:1px solid var(--frame);
  border-radius:12px;
  /* Not overflow:hidden - that would make .tsd a scroll container and the
     sticky title bar below would silently stop sticking. */
}
.tsd *{box-sizing:border-box}

/* ---------------- title bar ---------------- */
.tsd-head{
  /* The prototype pinned this to the window. Here it pins under the site
     header, whose live height site.js publishes as --icg-head-h. */
  position:sticky;top:var(--icg-head-h,0px);z-index:5;
  background:linear-gradient(var(--paper),var(--paper-2));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--frame);padding:15px 20px 13px;
  border-radius:11px 11px 0 0;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 10px 20px -22px rgba(var(--shadow),.7);
}
.tsd-titlebar{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tsd-titlebar h2{
  margin:0;font-family:var(--label);font-size:19px;font-weight:800;
  letter-spacing:-.028em;line-height:1.25;color:var(--ink);
}
.tsd-titlebar h2 span{color:var(--ink-faint);font-weight:500;letter-spacing:-.015em}
.tsd .sub{
  color:var(--ink-soft);font-size:13px;max-width:800px;margin-top:7px;line-height:1.55;
}
.tsd .sub em{font-style:italic;color:var(--ink)}

.tsd .bar-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;align-items:center}
.tsd button.ctl{
  font-family:var(--mono);font-size:11px;letter-spacing:.03em;
  color:var(--ink-soft);cursor:pointer;
  background:var(--card);border:1px solid var(--card-line);border-radius:7px;padding:7px 12px;
  box-shadow:0 1px 2px -1px rgba(var(--shadow),.25);
  transition:color .12s,border-color .12s;
}
.tsd button.ctl:hover{color:var(--ink);border-color:var(--wire)}
.tsd button.ctl:focus-visible{outline:2px solid var(--hi);outline-offset:1px}

/* ---------------- full screen ----------------

   Two routes to the same place. The Fullscreen API is preferred because it
   also takes the browser's own chrome, which is most of the point; where it
   is unavailable or refused - iPhone Safari has no element fullscreen - the
   script falls back to .is-cover, a fixed overlay that behaves the same from
   the reader's side.

   Both drop the panel's rounding and border, because at the edge of the
   screen there is nothing left for them to separate the panel from. */
.tsd:fullscreen,
.tsd.is-cover{
  border:0;border-radius:0;background:var(--paper);
  overflow:auto;-webkit-overflow-scrolling:touch;
}
.tsd.is-cover{position:fixed;inset:0;z-index:120;margin:0}

/* No site header up there any more, so the title bar pins to the very top. */
.tsd:fullscreen .tsd-head,
.tsd.is-cover .tsd-head{top:0;border-radius:0}
.tsd:fullscreen .foot,
.tsd.is-cover .foot{border-radius:0}

/* While the overlay is up the page underneath must not scroll behind it. */
body.tsd-cover-open{overflow:hidden}

.tsd .legend{
  display:flex;gap:14px;align-items:center;color:var(--ink-faint);
  font-size:11.5px;margin-left:auto;flex-wrap:wrap;
}
.tsd .legend b{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-faint);
}
.tsd .dot{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:5px;vertical-align:1px}

/* ---------------- canvas ---------------- */
.tsd .canvas{
  position:relative;padding:26px 20px 30px;
  background-color:var(--paper);
  background-image:
    linear-gradient(to right,var(--grid) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid) 1px,transparent 1px),
    linear-gradient(to right,var(--grid-strong) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-strong) 1px,transparent 1px);
  background-size:22px 22px,22px 22px,110px 110px,110px 110px;
  background-position:center top;
}
.tsd .canvas::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 70% at 50% -10%,transparent 45%,rgba(var(--shadow),.055));
}
.tsd #tsdBoardWrap{
  position:relative;overflow-x:auto;border:1px solid var(--frame);border-radius:12px;
  background:linear-gradient(var(--sheet-a),var(--sheet-b));
  padding:20px 16px;box-shadow:0 1px 0 rgba(255,255,255,.5) inset;
}
.tsd #tsdBoard{position:relative;margin:0 auto;--lab-lines:2;--met-lines:2}

.tsd #tsdWires{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}
.tsd #tsdWires marker#tsdArw path{fill:var(--wire)}
.tsd #tsdWires marker#tsdArwLit path{fill:var(--wire-lit)}
.tsd #tsdWires path{
  fill:none;stroke:var(--wire);stroke-width:1.3;marker-end:url(#tsdArw);
  transition:stroke .14s,stroke-width .14s,opacity .14s;
}
.tsd #tsdWires path.lit{stroke:var(--wire-lit);stroke-width:1.8;marker-end:url(#tsdArwLit)}

/* ---------------- boxes ---------------- */
.tsd .box{
  position:absolute;background:var(--card);border:1px solid var(--card-line);border-radius:7px;
  padding:9px 11px 9px 13px;overflow:visible;
  box-shadow:0 1px 1px rgba(var(--shadow),.04),0 10px 20px -16px rgba(var(--shadow),.35);
  transition:box-shadow .16s var(--ease),border-color .16s,opacity .16s,transform .16s var(--ease);
}
.tsd .box:hover{transform:translateY(-1px)}
.tsd .bar{position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:5px 0 0 5px;background:var(--accent)}
.tsd .lab{
  display:block;font-family:var(--label);
  font-size:12px;font-weight:700;letter-spacing:-.022em;line-height:1.36;
  max-height:calc(var(--lab-lines) * 1.36em);overflow:hidden;color:var(--ink);
}
.tsd .sc{
  float:right;margin:0 0 0 8px;font-family:var(--mono);
  font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.tsd .met{
  display:block;margin-top:5px;font-family:var(--body);
  font-size:10.5px;line-height:1.4;color:var(--ink-soft);
  max-height:calc(var(--met-lines) * 1.4em);overflow:hidden;
}
.tsd .sc.hi{color:var(--hi)}
.tsd .sc.mid{color:var(--mid)}
.tsd .sc.low{color:var(--low)}
.tsd .box.low{border-color:#e7bcbc}
.tsd .box.root{border-color:var(--ink);box-shadow:0 2px 3px rgba(var(--shadow),.08),0 16px 30px -18px rgba(var(--shadow),.55)}
.tsd .box.lit{border-color:var(--accent);box-shadow:0 2px 4px rgba(var(--shadow),.09),0 18px 34px -20px rgba(var(--shadow),.6)}
.tsd .box.togglable{cursor:pointer}
.tsd .box.togglable:hover{border-color:var(--wire-lit)}

.tsd .chip{
  position:absolute;right:9px;bottom:-10px;
  background:var(--card);border:1px solid var(--card-line);border-radius:20px;
  box-shadow:0 2px 6px -4px rgba(var(--shadow),.4);
  font-family:var(--body);font-size:10px;font-variant-numeric:tabular-nums;
  color:var(--ink-soft);padding:2px 9px;white-space:nowrap;
}
.tsd .box.lit .chip{border-color:var(--accent);color:var(--accent)}
.tsd .chip.tog{cursor:pointer;transition:color .12s,border-color .12s}
.tsd .chip.tog:hover{border-color:var(--hi);color:var(--hi)}
.tsd .chip.tog:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.tsd #tsdBoard.focused .box:not(.lit):not(.root){opacity:.3}
.tsd #tsdBoard.focused #tsdWires path:not(.lit){opacity:.22}

/* A box that is the end of the line here and has a page of its own. */
.tsd a.box,.tsd a.lkid{text-decoration:none;color:inherit}
.tsd a.box:hover{border-color:var(--wire-lit)}
.tsd a.box:focus-visible,.tsd a.lkid:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tsd .ext{
  position:absolute;right:10px;top:9px;line-height:1;
  font-size:10.5px;color:var(--ink-faint);transition:color .12s;
}
.tsd a.box:hover .ext,.tsd a.lkid:hover .ext{color:var(--wire-lit)}
.tsd a.box .lab{padding-right:16px}

/* ---------------- phone layout ---------------- */
.tsd #tsdList{display:none;--lab-lines:3;--met-lines:2}
.tsd .lroot{
  position:relative;background:var(--card);border:1px solid var(--ink);border-radius:7px;
  padding:10px 12px 10px 14px;margin-bottom:4px;
  box-shadow:0 2px 3px rgba(var(--shadow),.08),0 14px 26px -18px rgba(var(--shadow),.5);
}
.tsd .branch{position:relative;transition:opacity .14s}
.tsd .branch::before{
  content:"";position:absolute;left:13px;top:0;height:16px;border-left:1px solid var(--wire);
}
.tsd .lstream{
  position:relative;margin:16px 0 0;background:var(--card);border:1px solid var(--card-line);
  border-radius:7px;padding:9px 11px 9px 13px;
  box-shadow:0 1px 1px rgba(var(--shadow),.04),0 10px 20px -16px rgba(var(--shadow),.35);
}
.tsd .kids{position:relative;margin:0 0 0 22px;padding-left:20px;border-left:1px solid var(--wire)}
.tsd .kids::before{content:"";position:absolute;left:-1px;top:-12px;height:12px;border-left:1px solid var(--wire)}
.tsd .lkid{
  position:relative;display:block;margin-top:11px;background:var(--card);
  border:1px solid var(--card-line);border-radius:7px;padding:9px 11px 9px 13px;
  box-shadow:0 1px 1px rgba(var(--shadow),.04),0 8px 16px -14px rgba(var(--shadow),.3);
}
.tsd .lkid::before{
  content:"";position:absolute;left:-20px;top:19px;width:14px;border-top:1px solid var(--wire);
}
.tsd .lkid::after{
  content:"";position:absolute;left:-7px;top:15px;
  border:4px solid transparent;border-left-color:var(--wire-lit);opacity:.7;
}
.tsd #tsdList.focused .branch:not(.lit){opacity:.32}
.tsd .lstream.lit,.tsd .lkid.lit{border-color:var(--accent)}
.tsd .lchip{
  display:inline-block;margin-top:8px;background:var(--card);border:1px solid var(--card-line);
  border-radius:20px;font-size:10px;color:var(--ink-soft);padding:2px 9px;cursor:pointer;
  font-family:var(--body);font-variant-numeric:tabular-nums;
}
.tsd .lchip:hover{border-color:var(--hi);color:var(--hi)}

.tsd .hint{font-family:var(--body);color:var(--ink-faint);font-size:11px;padding:10px 20px 0}
.tsd .foot{
  margin-top:6px;border-top:1px solid var(--frame);background:var(--paper-2);
  padding:18px 20px 22px;color:var(--ink-soft);font-size:12.5px;line-height:1.65;
  border-radius:0 0 11px 11px;
}
.tsd .foot b{font-weight:600;color:var(--ink)}
.tsd .foot a{color:var(--wire-lit);border-bottom:1px solid rgba(28,61,99,.3)}
.tsd .foot a:hover{border-bottom-color:var(--wire-lit)}
.tsd .empty{padding:34px 20px;color:var(--ink-soft);font-size:13px}

@media (max-width:700px){
  .tsd-head{padding:12px 13px}
  .tsd .canvas{padding:16px 13px 22px}
  .tsd .legend{margin-left:0}
  .tsd .foot{padding:16px 13px 20px}
  /* CSS owns this decision - the script never fights it. */
  .tsd #tsdBoardWrap{display:none}
  .tsd #tsdList{display:block}
  .tsd .hint{padding:10px 13px 0}
}
@media print{
  .tsd-head{position:static}
  .tsd .canvas{background-image:none;padding:0}
  .tsd .canvas::after{display:none}
  .tsd #tsdBoardWrap{overflow:visible;box-shadow:none;background:none}
  .tsd .hint{display:none}
  .tsd{border:0}
}
@media (prefers-reduced-motion:reduce){
  .tsd *{transition:none!important}
  .tsd .box:hover{transform:none}
}