/* /topics and /topics/<slug> - the knowledgebase, and the moment lists folded
 * into it.
 *
 * Merged 2026-09-17 from concepts.css + pages.css, when /concepts and /pages
 * became one route: two stylesheets for one page is one more place for a rule
 * to be overridden by accident.
 *
 * Appended after app.css, so the tokens, type and pill buttons all come from
 * there - this file only adds what the two concept pages need.
 *
 * The hard-won rule from 2026-09-15 applies throughout and is why every grid
 * child below carries `min-width: 0`: a grid or flex item defaults to
 * `min-width: auto`, which refuses to shrink below its content. These pages are
 * built almost entirely out of the longest real strings the corpus produces -
 * sentence-length section headings and 300-character transcript snippets - so
 * anything without it produces a horizontal scroll, which notes/45b-org.md says
 * must never happen. Tested against the longest string in concepts.json, not a
 * convenient one.
 */

.lede a { color: var(--alt-accent); }

.conceptnote { margin-bottom: 1.6rem; }

.crumb { margin: 0 0 .6rem; }
.crumb a { color: var(--alt-text); opacity: .75; text-decoration: none; }
.crumb a:hover { opacity: 1; }

/* ---------------------------------------------------------------- the grid */

.topicgrid {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  /* One column on a phone. auto-fit + minmax(0,...) rather than a media query:
     the floor is 0 so a card can always shrink inside its track. */
  grid-template-columns: 1fr;
  gap: .9rem;
}
@media (min-width: 720px) {
  .topicgrid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
}

.topic {
  position: relative;
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "num  title"
    "num  alt"
    "num  meta";
  column-gap: .7rem;
  row-gap: .25rem;
  padding: .9rem 1rem;
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid rgb(var(--alt-text-rgb) / .08);
}
.topic > * { min-width: 0; }

.tnum {
  grid-area: num;
  font-family: "Handel Gothic D Bold", var(--heading-font, sans-serif);
  font-size: 1.5rem;
  line-height: 1;
  opacity: .35;
  align-self: start;
  font-variant-numeric: tabular-nums;
}

.tlink, .topic .tt { grid-area: title; }
.tlink { text-decoration: none; }
.topic .tt {
  display: block;
  font-family: "Handel Gothic D Bold", var(--heading-font, sans-serif);
  font-size: 1.05rem;
  line-height: 1.25;
  color: var(--alt-text);
  overflow-wrap: anywhere;
}
.tlink:hover .tt { color: var(--alt-accent); }

/* The whole card is the hit area, with the anchor still the real link so it
   stays keyboard-focusable and middle-clickable. Same pattern as .calllist. */
.tlink::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }

.talt {
  grid-area: alt;
  font-size: .8rem;
  line-height: 1.35;
  opacity: .5;
  overflow-wrap: anywhere;
}
.tmeta { grid-area: meta; font-size: .85rem; opacity: .8; margin-top: .2rem; }
.tmeta .langs {
  display: inline-block;
  margin-left: .4rem;
  padding: 0 .45rem;
  border-radius: 30px;
  font-size: .7rem;
  letter-spacing: .06em;
  background: rgb(var(--alt-text-rgb) / .1);
}

.topic.is-empty { opacity: .55; }
.topic.is-empty .tt { color: rgb(var(--alt-text-rgb) / .7); }

/* ------------------------------------------------------------- one topic */

.cgroup { margin: 0 0 2.2rem; min-width: 0; }
.cgroup h2 { font-size: 1.15rem; margin: 0 0 .15rem; overflow-wrap: anywhere; }
.cgroup h2 a { color: var(--alt-text); text-decoration: none; }
.cgroup h2 a:hover { color: var(--accent-bright); text-shadow: var(--link-glow); }
.gmeta { margin: 0 0 .7rem; font-size: .85rem; opacity: .6; }

.momentlist { list-style: none; margin: 0; padding: 0; }
.momentlist li {
  min-width: 0;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas:
    "time depth sec"
    "snip snip  snip"
    "hits hits  hits";
  column-gap: .6rem;
  row-gap: .3rem;
  align-items: baseline;
  padding: .7rem .8rem;
  border-left: 2px solid rgb(var(--alt-text-rgb) / .12);
  margin-bottom: .5rem;
  background: rgb(var(--alt-text-rgb) / .03);
  border-radius: 0 10px 10px 0;
}
.momentlist li > * { min-width: 0; }
.momentlist li:hover { border-left-color: var(--accent); }

.mlink { grid-area: time; text-decoration: none; }
.mt {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--alt-accent);
  white-space: nowrap;
}
.mlink:hover .mt { text-decoration: underline; }

.mdepth {
  grid-area: depth;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .1rem .5rem;
  border-radius: 30px;
  background: rgb(var(--alt-text-rgb) / .1);
  opacity: .8;
  white-space: nowrap;
}
.msec {
  grid-area: sec;
  font-size: .8rem;
  opacity: .6;
  overflow-wrap: anywhere;
}
.msnip {
  grid-area: snip;
  font-size: .9rem;
  line-height: 1.5;
  opacity: .9;
  overflow-wrap: anywhere;
}
.msnip em { opacity: .6; font-style: normal; font-weight: 600; }
.mhits {
  grid-area: hits;
  font-size: .7rem;
  letter-spacing: .03em;
  opacity: .4;
  overflow-wrap: anywhere;
}

/* On a wider screen the timestamp column can hold the depth pill beside it and
   the section heading gets the rest. Nothing below 720px changes. */
@media (min-width: 720px) {
  .momentlist li {
    grid-template-areas:
      "time depth sec"
      "time depth snip"
      "time depth hits";
    align-items: start;
  }
  .mlink, .mdepth { align-self: start; }
}

.foot { margin-top: 2.5rem; font-size: .85rem; opacity: .6; }


/* ---- from pages.css: the knowledgebase shape - cards, threads, passages
 * and the vocabulary list. ---- */

/* ------------------------------------------------------- the contents list */

.kbgrid {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .9rem;
}
@media (min-width: 720px) {
  .kbgrid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
}

.kbcard {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "num title"
    "num alt"
    "num sum"
    "num start";
  column-gap: .7rem;
  row-gap: .25rem;
  padding: .9rem 1rem;
  background: var(--surface);
  border: 1px solid rgb(var(--alt-text-rgb) / .08);
  border-radius: 14px;
}
.kbcard > * { min-width: 0; }
.kbcard.is-empty { opacity: .45; }

.kbcard .tnum { grid-area: num; }
.kbtitle {
  grid-area: title;
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.kbtitle a { text-decoration: none; color: var(--alt-text); }
.kbtitle a:hover { text-decoration: underline; color: var(--accent-bright); text-shadow: var(--link-glow); }
.kbcard .talt { grid-area: alt; }
.kbsum {
  grid-area: sum;
  margin: .3rem 0 0;
  font-size: .82rem;
  opacity: .75;
  overflow-wrap: anywhere;
}
.kbstart {
  grid-area: start;
  margin: .15rem 0 0;
  font-size: .78rem;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------- topic page */

.kbh {
  margin: 2.2rem 0 .4rem;
  font-size: 1.15rem;
  border-top: 1px solid rgb(var(--alt-text-rgb) / .1);
  padding-top: 1.4rem;
}
.kbnote { font-size: .85rem; margin: 0 0 1rem; }

/* Start here */
.kbstartcard {
  background: var(--surface);
  border: 1px solid rgb(var(--alt-text-rgb) / .12);
  border-left: 3px solid var(--accent);
  border-radius: 0 14px 14px 0;
  padding: 1rem 1.1rem;
  margin: 1.4rem 0 0;
  min-width: 0;
}
.kbstartcard h2 { margin: 0 0 .6rem; font-size: 1rem; }
.kbstartmeta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;            /* a phone puts the call title on its own line */
  align-items: center;
  gap: .5rem;
}
.kbstartmeta > * { min-width: 0; }
.kbpill {
  display: inline-block;
  padding: .35rem .95rem;
  border-radius: var(--radius-btn);
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}
.kbpill:hover { filter: brightness(1.15); }
.kbcall { font-size: .85rem; opacity: .7; overflow-wrap: anywhere; }
.kbsec { margin: .6rem 0 0; font-size: .95rem; overflow-wrap: anywhere; }
.kbwhy { margin: .5rem 0 0; font-size: .78rem; }

/* What was taught */
.threadlist {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: thread;
}
.thread {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .2rem;
  padding: .7rem .8rem;
  margin-bottom: .5rem;
  background: rgb(var(--alt-text-rgb) / .03);
  border-left: 2px solid rgb(var(--alt-text-rgb) / .12);
  border-radius: 0 10px 10px 0;
}
.thread > * { min-width: 0; }
.thread:hover { border-left-color: var(--accent); }
.thheading {
  font-weight: 600;
  color: var(--alt-text);
  text-decoration: none;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.thheading:hover { color: var(--alt-accent); text-decoration: underline; }
.thmeta {
  font-size: .75rem;
  opacity: .6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}
.thmeta > * { min-width: 0; }
.thmeta .mdepth { opacity: .9; }
.langs { font-size: .7rem; letter-spacing: .08em; opacity: .7; }

/* In their words */
.passage {
  margin: 0 0 1rem;
  padding: .9rem 1rem;
  background: var(--surface);
  border-radius: 12px;
  min-width: 0;
}
.passage blockquote {
  margin: 0;
  font-size: .95rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.passage blockquote::before { content: "\201C"; opacity: .4; }
.passage blockquote::after  { content: "\201D"; opacity: .4; }
.passage figcaption {
  margin-top: .6rem;
  font-size: .78rem;
  opacity: .7;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  overflow-wrap: anywhere;
}
.passage figcaption > * { min-width: 0; }
.passage figcaption a { color: var(--alt-accent); }

/* The words that mark it */
.vocab {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.vocab li {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  gap: .4rem;
  padding: .25rem .7rem;
  border-radius: 30px;
  background: rgb(var(--alt-text-rgb) / .07);
  font-size: .8rem;
}
.vt { overflow-wrap: anywhere; }
.vn { font-variant-numeric: tabular-nums; opacity: .5; font-size: .72rem; }

/* Where it was taught */
/* ------------------------------------- where it was taught, per call
 *
 * Each call is a <details>: the summary is the whole knob, so the hit area is
 * the full row on a phone rather than a chevron the thumb has to find. The
 * marker is removed and replaced with our own, because Safari and Firefox draw
 * the native triangle in different places and it cannot be positioned.
 */
.kbcalls { min-width: 0; }

details.cgroup {
  margin: 0 0 .5rem;
  border: 1px solid rgb(var(--alt-text-rgb) / .12);
  border-radius: 10px;
  overflow: hidden;              /* keeps the open panel inside the radius */
}
details.cgroup[open] { border-color: rgb(var(--alt-text-rgb) / .22); }

details.cgroup > summary {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title knob" "meta knob";
  column-gap: .8rem;
  row-gap: .15rem;
  align-items: center;
  padding: .75rem .9rem;
  cursor: pointer;
  list-style: none;              /* Firefox */
}
details.cgroup > summary::-webkit-details-marker { display: none; }
details.cgroup > summary::marker { content: ''; }
details.cgroup > summary:hover { background: rgb(var(--alt-text-rgb) / .04); }
details.cgroup > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
details.cgroup > summary > * { min-width: 0; }

.cgtitle {
  grid-area: title;
  font-weight: 700;
  color: var(--alt-text);
  overflow-wrap: anywhere;
}
details.cgroup > summary .gmeta {
  grid-area: meta;
  margin: 0;
  font-size: .78rem;
  opacity: .55;
  overflow-wrap: anywhere;
}

/* The knob. It says what is inside and which way it will move, because
 * "8 moments ▾" is a promise and a bare chevron is not. */
.cgknob {
  grid-area: knob;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
  font-size: .8rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--alt-text-rgb) / .2);
  color: var(--alt-text);
  opacity: .8;
}
details.cgroup > summary:hover .cgknob {
  opacity: 1;
  border-color: var(--accent);
}
.cgn { font-weight: 700; color: var(--alt-accent); }
.cgchev { transition: transform .15s ease; }
details.cgroup[open] > summary .cgchev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .cgchev { transition: none; } }

.cgopen {
  margin: 0;
  padding: .6rem .9rem 0;
  font-size: .85rem;
}
details.cgroup .momentlist { padding: .4rem .9rem .9rem; }
details.cgroup .momentlist li { border-left-color: rgb(var(--alt-text-rgb) / .18); }

/* ---- the spoken-language filter (2026-09-20) ----
   Pills, per the org design system. Wraps rather than scrolls: the corpus can
   gain a language and this row must never be what widens a page. */
.langfilter { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
              margin: 1.25rem 0; min-width: 0; }
.lf-label   { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase;
              opacity: .7; margin-right: .25rem; }
.lf-opt     { display: inline-flex; align-items: center; gap: .4rem;
              padding: .34rem .85rem; border-radius: 999px;
              border: 1px solid var(--rule, rgba(255,255,255,.22));
              text-decoration: none; font-size: .92rem; line-height: 1.2;
              white-space: nowrap; }
.lf-opt:hover { border-color: currentColor; }
.lf-opt.is-on { background: var(--accent, #38e8c8); color: #06231e;
                border-color: transparent; font-weight: 600; }
.lf-n       { font-size: .78rem; opacity: .65; font-variant-numeric: tabular-nums; }
.lf-opt.is-on .lf-n { opacity: .8; }
.lf-note    { flex: 1 1 100%; margin: .35rem 0 0; font-size: .9rem; min-width: 0; }