/* =========================================================================
   TRACK HUB — the middle level of RoboticsLab → track → lab.

   The map on RoboticsLab answers "what is there"; this page answers "what is
   in it, in full" — the long description each lab has always had, its whole
   table of contents, and the same two doors every other surface now offers.

   Layout and components come from kit.css and hub.css. This file is only the
   wide card, which no other page has: the map card is a tile in a grid, this
   one is a row you read.
   ========================================================================= */

.track-lead { max-width: 760px; margin: 1.6rem auto 1.5rem; text-align: center; }
.track-lead h1 { font-size: 1.9rem; margin-bottom: 0.6rem; }
.track-lead p { color: var(--bp-ink-dim); line-height: 1.7; font-size: 0.95rem; }
.track-lead .t-count {
  display: inline-block; margin-top: 0.9rem;
  font-family: var(--mono); font-size: 0.73rem; color: var(--bp-ink-dim);
  border: 1px solid var(--bp-line); border-radius: 20px; padding: 0.22rem 0.8rem;
}

/* A slim band rather than a card: searching every formula at once is a
   different kind of thing from the tools listed underneath. */
.index-band {
  display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap;
  text-decoration: none; color: inherit;
  border: 1px solid var(--bp-line); border-left: 3px solid var(--bp-cyan);
  border-radius: 9px; padding: 0.75rem 1.1rem; margin-bottom: 1.8rem;
  background: rgba(124, 201, 255, 0.045); transition: 0.18s;
}
.index-band:hover { background: rgba(124, 201, 255, 0.09); border-color: var(--bp-cyan); }
.index-band svg { width: 34px; height: 20px; color: var(--bp-cyan); flex: none; }
.index-band .ib-text { flex: 1; min-width: 220px; font-size: 0.85rem; color: var(--bp-ink-dim); line-height: 1.55; }
.index-band .ib-text b { color: var(--bp-ink); font-size: 0.95rem; display: block; margin-bottom: 0.12rem; }
.index-band .ib-cta { font-family: var(--mono); font-size: 0.76rem; font-weight: 600; color: var(--bp-cyan); white-space: nowrap; }
.index-band .ib-cta::after { content: ' →'; }

/* ------------------------------- The card ------------------------------- */
.tlab {
  display: grid; grid-template-columns: 280px 1fr;
  background: var(--bp-panel); border: 1px solid var(--bp-line);
  border-left: 3px solid var(--lab, var(--bp-cyan));
  border-radius: 10px; overflow: hidden; margin-bottom: 1rem;
  transition: 0.16s;
}
.tlab:hover, .tlab:focus-within { border-color: var(--lab, var(--bp-cyan)); }
.tlab .tl-media {
  line-height: 0; background: var(--bp-bg);
  border-right: 1px solid var(--bp-line);
}
.tlab .tl-media img {
  display: block; width: 100%; height: 100%; min-height: 168px;
  object-fit: cover;
}
.tlab .tl-body { padding: 1rem 1.15rem 0.9rem; display: flex; flex-direction: column; }
.tlab h2 {
  font-family: var(--mono); font-size: 1.02rem; font-weight: 700;
  color: var(--lab, var(--bp-cyan)); margin-bottom: 0.45rem; line-height: 1.4;
}
.tlab .tl-desc { font-size: 0.86rem; color: var(--bp-ink-dim); line-height: 1.68; }
.tlab .tl-desc strong { color: var(--bp-ink); font-weight: 600; }
.tlab .tl-meta {
  font-family: var(--mono); font-size: 0.7rem; color: var(--bp-line2);
  margin: 0.7rem 0 0.6rem;
}

/* The doors sit inside the body here rather than spanning the card, so they
   read as two buttons and not as a footer strip. */
.tlab .l-doors {
  display: flex; gap: 0.45rem; border-top: 0; background: transparent;
  margin-top: auto;
}
.tlab .l-doors .door {
  border: 1px solid var(--bp-line2); border-radius: 7px;
  padding: 0.42rem 0.95rem; font-size: 0.78rem;
}
.tlab .l-doors .door + .door { border-left: 1px solid var(--bp-line2); }

/* ---------------------------- Chapter list ---------------------------- */
.tl-toc { margin-top: 0.85rem; border-top: 1px solid var(--bp-line); padding-top: 0.6rem; }
.tl-toc > summary {
  font-family: var(--mono); font-size: 0.73rem; color: var(--bp-ink-dim);
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 0.4rem;
  transition: 0.16s;
}
.tl-toc > summary::-webkit-details-marker { display: none; }
.tl-toc > summary::after {
  content: '▸'; color: var(--bp-line2); transition: transform 0.16s; display: inline-block;
}
.tl-toc[open] > summary::after { transform: rotate(90deg); }
.tl-toc > summary:hover { color: var(--lab, var(--bp-cyan)); }
.tl-toc ol {
  list-style: none; margin: 0.6rem 0 0.2rem; padding: 0;
  columns: 2; column-gap: 1.5rem;
}
.tl-toc li { break-inside: avoid; }
.tl-toc a {
  display: flex; gap: 0.5rem; align-items: baseline;
  text-decoration: none; color: var(--bp-ink); font-size: 0.83rem; line-height: 1.5;
  padding: 0.25rem 0.45rem; border-radius: 6px; transition: 0.14s;
}
.tl-toc a:hover { background: var(--bp-panel2); color: var(--lab, var(--bp-cyan)); }
.tl-toc .ch-n { font-family: var(--mono); font-size: 0.68rem; color: var(--bp-line2); flex: none; }

/* A track that has more coming says so in words rather than as dead cards. */
.track-soon {
  font-size: 0.85rem; color: var(--bp-ink-dim); line-height: 1.75;
  padding: 0.9rem 1.1rem; border: 1px dashed var(--bp-line);
  border-radius: 9px; background: rgba(255, 255, 255, 0.012); margin-top: 1.6rem;
}
.track-soon strong { color: var(--bp-steel); }

@media (max-width: 820px) {
  .tlab { grid-template-columns: 1fr; }
  .tlab .tl-media { border-right: 0; border-bottom: 1px solid var(--bp-line); }
  .tlab .tl-media img { min-height: 0; aspect-ratio: 16 / 9; }
  .tl-toc ol { columns: 1; }
  .track-lead h1 { font-size: 1.5rem; }
}