/* /cohorts and /cohorts/<code>.
   Tokens come from app.css; nothing here declares a colour of its own.
   Every grid is auto-fit with a minmax whose MINIMUM is 0-safe: a fixed
   minimum wider than the viewport is how a page starts scrolling sideways,
   which notes/45b-org.md says must never happen. */

.cohgrid {
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
/* Never four across: past the width where auto-fit would fit a fourth 19rem
   column (~1258px), pin the track count at three and let the cards widen. */
@media (min-width: 75rem) {
  .cohgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.cohcard {
  position: relative; min-width: 0;
  background: var(--surface); border-radius: 12px; padding: 16px 18px;
  border: 1px solid rgb(var(--alt-text-rgb) / .08);
  display: grid; gap: 6px; align-content: start;
}
.cohcard:hover { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
/* The whole card is the hit area. The anchor stays a real link and ::after
   stretches it, so there is no nested-interactive markup and no click handler. */
.cohlink { text-decoration: none; }
.cohlink::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.cohcard h2 { margin: 0; overflow-wrap: anywhere; }

.cohstate {
  font-size: .75rem; letter-spacing: .04em; text-transform: uppercase;
  color: rgb(var(--alt-text-rgb) / .5);
}
/* The state word is a pill, matching .up-today on the schedule above - same
   shape, same size, same uppercase. Its rules are repeated here rather than
   shared with upcoming.css because that stylesheet only arrives when there is
   something upcoming to show, and this pill must not depend on that. */
.cohpill {
  display: inline-block;
  padding: .1em .7em;
  border-radius: var(--radius-btn);
  background: rgb(var(--alt-text-rgb) / .1);
  vertical-align: .1em;
}
.cohcard.is-running .cohpill {
  background: color-mix(in srgb, var(--alt-accent) 22%, transparent);
  color: var(--alt-accent);
}
.cohending { color: var(--warn); font-weight: 600; }
/* The open-ended counterpart: informational, not urgent, so the brand blue
   rather than amber. --accent itself is too dark to read on --bg, so it is
   lifted toward white - still the token, no new hex. */
.cohopen { color: color-mix(in srgb, var(--accent) 55%, #fff); font-weight: 600; }
.cohblurb { margin: .2em 0 0; font-size: .9rem; color: rgb(var(--alt-text-rgb) / .75); }

.cohstats {
  list-style: none; margin: .4em 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .2em 1em;
  font-size: .85rem; color: rgb(var(--alt-text-rgb) / .6);
}
.cohstats b { color: var(--alt-text); }

/* ---- one cohort ---- */
.cohsec { margin-block: 34px; }
.cohsec h2 { display: flex; align-items: baseline; gap: .5rem; }
.cohsec .count {
  font-family: Chivo, sans-serif; font-size: .8rem; font-weight: 400;
  color: rgb(var(--alt-text-rgb) / .5);
}

/* The call description on the cohort's call list. Sits between the title and
   the date line; .cmain is already min-width:0, so a long one wraps inside the
   row instead of widening it. */
.calllist .cdesc {
  margin: .15em 0 .1em; font-size: .85rem;
  color: rgb(var(--alt-text-rgb) / .7); overflow-wrap: anywhere;
}

/* ---- updates ---- */
.updlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.upd {
  min-width: 0; background: var(--surface); border-radius: 12px; padding: 14px 18px;
  border-left: 3px solid color-mix(in srgb, var(--accent) 70%, transparent);
}
.upd.is-draft { border-left-color: rgb(var(--alt-text-rgb) / .25); opacity: .85; }
.updhead { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; }
.updon { font-size: .8rem; color: rgb(var(--alt-text-rgb) / .55); }
.updtitle { margin: .2em 0 .3em; font-size: 1.05rem; }
.updbody { margin: .4em 0; overflow-wrap: anywhere; }
.updadmin { display: flex; gap: 8px; flex-wrap: wrap; margin-top: .6em; }
.updadmin form { margin: 0; }
.updadmin .btn-secondary { padding: .2em .9em; font-size: .78rem; cursor: pointer; }
.btn-secondary.danger:hover { background: color-mix(in srgb, var(--alert) 70%, transparent); }

.updnew { margin-top: 18px; }
.updnew summary { cursor: pointer; color: rgb(var(--alt-text-rgb) / .75); }
.updform { max-width: 40rem; justify-items: stretch; }
.updform textarea {
  font: inherit; width: 100%; color: var(--alt-text); resize: vertical;
  background: var(--surface); border: 1px solid rgb(var(--alt-text-rgb) / .2);
  border-radius: 10px; padding: .55em .8em;
}
.updform textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.updform label.inline { display: flex; align-items: center; gap: .5em; }
.updform button { justify-self: start; }

/* ---- testimonials ----
   The stage, bars and panes are app.css's, shared with /calls/<slug>; only
   what differs lives here. See templates/cohort_show.php. */
.tstage { margin-top: 6px; }
/* Who is on screen, where a call page has its depth switcher. */
.tnow {
  margin: 0; align-self: center; font-weight: 600; font-size: 1rem;
  min-width: 0; overflow-wrap: anywhere;
}
/* A participant is a LINK (to its .mp4, for no-JS), styled as a section row. */
a.sec { text-decoration: none; }
a.sec:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sec.is-off { cursor: default; opacity: .6; }
.sec .tflags { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.lang:disabled { opacity: .35; cursor: not-allowed; }
.lang:disabled:hover { background: transparent; }
.skipnote a { color: inherit; }
/* The cover as a play button, until the first play. Covers the native
   controls too, on purpose: before anything has played there is nothing for
   them to do that this does not. */
.tvidbox { position: relative; }
.tstart {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; padding: 0; margin: 0; cursor: pointer;
  background: transparent; display: flex; align-items: center; justify-content: center;
}
.tstart[hidden] { display: none; }
.tstarticon {
  width: 76px; height: 76px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 88%, transparent);
  box-shadow: 0 4px 18px rgb(0 0 0 / .35);
  position: relative; transition: transform .15s ease;
}
.tstarticon::after {
  content: ""; position: absolute; left: 30px; top: 22px;
  border-style: solid; border-width: 16px 0 16px 26px;
  border-color: transparent transparent transparent #fff;
}
.tstart:hover .tstarticon, .tstart:focus-visible .tstarticon { transform: scale(1.08); }
.tstart:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
@media (max-width: 640px) {
  .tstarticon { width: 60px; height: 60px; }
  .tstarticon::after { left: 23px; top: 17px; border-width: 13px 0 13px 21px; }
}

/* Typed testimonials, when there are any: quotes under the stage. */
.twritten { margin: 22px 0 10px; font-size: 1rem; }
.tlist {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .tlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .tlist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tcard {
  min-width: 0; background: var(--surface); border-radius: 12px; padding: 14px 16px;
  display: grid; gap: 8px; align-content: start;
}
.tcard.is-private { border: 1px dashed rgb(var(--alt-text-rgb) / .25); background: transparent; }
.tname { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.twhen {
  font-family: Chivo, sans-serif; font-weight: 400; font-size: .78rem;
  color: rgb(var(--alt-text-rgb) / .55);
}
.ttext {
  margin: 0; padding-left: .9em; font-size: .92rem;
  border-left: 2px solid color-mix(in srgb, var(--alt-accent) 60%, transparent);
  overflow-wrap: anywhere;
}
.warn { color: var(--alert); }

.tmissing { margin-top: 20px; font-size: .9rem; color: rgb(var(--alt-text-rgb) / .7); }
.tmissing h3 { font-size: .95rem; margin-bottom: .3em; }
.tmissing ul { margin: 0; padding-left: 1.2em; }

/* Recorded but not yet in the corpus, and the ones that never will be. Admin
   only. Deliberately quieter than .calllist: nothing here is a link, because
   there is no page to go to yet, and a row that looks clickable and is not is
   worse than a plain one. min-width:0 on the grid child is what stops a long
   Portuguese session title from pushing the page wider than the viewport. */
.pending { margin-top: 26px; }
.pending h3 { font-size: 1rem; margin-bottom: .35em; }
.pendlist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.pendlist li {
  min-width: 0;
  padding: 8px 12px;
  border: 1px dashed rgb(var(--alt-text-rgb) / .22);
  border-radius: 8px;
  overflow-wrap: anywhere;
}
.pendlist .ct { font-weight: 500; font-size: .92rem; }
.pendlist .why { display: block; font-size: .8rem; color: var(--alert); margin-top: .25em; }