/* hub-page.css -- the training hub's status pages and front page (/ai-ml/training/).
   Loaded after /styles.css and research/research.css, whose tokens, page head, numbers band,
   folds and chart classes (.rc) it uses. CSP style-src 'self': every style lives here.
   Created by LT Sean Egan, PhD 2026-10-12
   Modified: SDE 2026-10-12  first version: study cards, live lines, job list, day chart */

:root {
  --hp-free: var(--rc-a);
  --hp-paid: var(--rc-b);
  --hp-wait: var(--rc-n2);
  --hp-gap: clamp(1.75rem, 4vw, 2.5rem);
}

/* the research navigation has five cells here: four studies and the front page */
.rh-nav.hp-nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 599.98px) {
  .rh-nav.hp-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- the live line under the lead: when the desk was read ---- */
.hp-updated { display: block; color: var(--text-3); font-family: var(--mono); font-size: 0.8125rem; }
.hp-updated.hp-stale { color: var(--k-amber); }

/* ---- study cards ---- */
.hp-cards { display: grid; gap: var(--hp-gap); margin: 0; padding: 0; list-style: none; }
.hp-card {
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule-strong);
  max-width: 48rem;
}
.hp-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 0.5rem; }
.hp-card-head h2, .hp-card-head h3 {
  margin: 0;
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.375rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.hp-reading {
  margin: 0 0 0.6rem;
  color: var(--read-2);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 40em;
  text-wrap: pretty;
}
.hp-live {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin: 0 0 0.9rem;
  padding: 6px 0 6px 12px;
  border-left: 2px solid var(--rc-a);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.hp-live:empty { display: none; }
.hp-live .hp-last { color: var(--text-3); }
.hp-card .rh-fig { margin: 0.4rem 0 0.9rem; }
.hp-card .fold { max-width: 44rem; }
.hp-card .fold-body > p { font-size: 1rem; }
.hp-card .fold-body ul { margin: 0.3rem 0 0.8rem; padding-left: 1.2rem; color: var(--read-2); font-family: var(--serif); line-height: 1.55; }
.hp-card .fold-body li { margin: 0.25rem 0; }
.hp-sub { margin: 1.4rem 0 0; padding-left: 14px; border-left: 2px solid var(--rule); }

/* ---- figures: small panels side by side on wide screens, one column on phones ---- */
.hp-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; max-width: 760px; }
.hp-panels.hp-one { grid-template-columns: minmax(0, 1fr); max-width: 470px; }
@media (max-width: 639.98px) { .hp-panels { grid-template-columns: minmax(0, 1fr); } }
.hp-panels svg.rc { max-width: 380px; }
.hp-panels.hp-one svg.rc { max-width: 470px; }
.rc .hp-bar-free { fill: var(--hp-free); }
.rc .hp-bar-paid { fill: var(--hp-paid); }
.rc .hp-bar-track { fill: var(--rc-n3); }
.rc .hp-bar-wait { fill: var(--hp-wait); }
.rc .hp-pass { fill: var(--rc-a); }
.rc .hp-fail { fill: var(--rc-b); }
.rc .hp-line-a { stroke: var(--rc-a); stroke-width: 2; fill: none; }
.rc .hp-line-n { stroke: var(--rc-n); stroke-width: 2; fill: none; stroke-dasharray: 5 4; }
.rc .hp-dot-a { fill: var(--rc-a); }
.rc .hp-dot-n { fill: var(--rc-n); }
.rc .hp-dot-b { fill: var(--rc-b); }
.rc .hp-dot-d { fill: var(--rc-d); }
.rc .hp-box { fill: var(--rc-surface); stroke: var(--rule-strong); stroke-width: 1; }
.rc .hp-box-a { fill: var(--rc-a2); stroke: var(--rc-a); stroke-width: 1.25; }
.rc .hp-now { stroke: var(--rc-b); stroke-width: 1.5; }

/* ---- numbers band: four live readouts ---- */
.hp-band .num-fig small { font-size: 0.6em; color: var(--text-3); }

/* ---- job list ---- */
.hp-jobs { max-width: 48rem; }
.hp-jgroup { border-top: 1px solid var(--rule); }
.hp-jgroup:last-child { border-bottom: 1px solid var(--rule); }
.hp-jgroup > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 0;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.hp-jgroup > summary::-webkit-details-marker { display: none; }
.hp-jgroup > summary::marker { content: ""; }
.hp-jgroup > summary::after {
  content: "+";
  flex: none;
  width: 1ch;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 1.1rem;
  font-weight: 400;
}
.hp-jgroup[open] > summary::after { content: "\2212"; }
.hp-jgroup > summary:hover { color: var(--accent); }
.hp-gname { flex: 1 1 auto; }
.hp-gcount { color: var(--text-3); font-family: var(--mono); font-size: 0.8125rem; font-weight: 400; }
.hp-gnote { margin: 0 0 10px; color: var(--text-3); font-family: var(--sans); font-size: 0.875rem; }
.hp-jstudy {
  margin: 8px 0 2px;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.hp-jlist { margin: 0 0 10px; padding: 0; list-style: none; }
.hp-job {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12ch, 22ch) minmax(12ch, 16ch);
  gap: 2px 14px;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.875rem;
}
.hp-job:first-child { border-top: 0; }
.hp-jwhat { color: var(--text); min-width: 0; }
.hp-jnode { color: var(--text-2); font-size: 0.8125rem; }
.hp-jwhen { color: var(--text-3); font-family: var(--mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; text-align: right; }
.hp-q { display: inline-block; margin-left: 6px; padding: 0 5px; border: 1px solid var(--rule); color: var(--text-3); font-size: 0.6875rem; }
.hp-q-free, .hp-q-transfer { border-color: var(--rc-a); color: var(--text-2); }
.hp-bad { color: var(--rc-b); }
@media (max-width: 639.98px) {
  .hp-job { grid-template-columns: minmax(0, 1fr) auto; }
  .hp-jnode { grid-column: 1 / -1; grid-row: 2; }
}

/* ---- recent events ---- */
.hp-events { margin: 0; padding: 0; list-style: none; max-width: 48rem; border-top: 1px solid var(--rule-strong); }
.hp-events li {
  display: grid;
  grid-template-columns: 12ch minmax(0, 1fr);
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--text);
}
.hp-events time { color: var(--text-3); font-family: var(--mono); font-size: 0.75rem; }

/* ---- front page: one row per study, with its live line ---- */
.hp-studies .project-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 18px; }
.hp-studies > li { padding-bottom: 12px; }
.hp-studies .where { color: var(--text-3); font-family: var(--mono); font-size: 0.75rem; font-weight: 400; }
.hp-studies .hp-line {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  margin: 0;
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.hp-studies .hp-line .hp-when { color: var(--text-3); font-family: var(--mono); font-size: 0.75rem; }
.hp-studies .hp-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.hp-studies .rh-live { min-height: 36px; }

/* the moved notice left where a page used to be */
.hp-moved { max-width: 40rem; padding: 3rem 1rem; font-family: var(--sans); }

/* the cards and live figures sit in the main column, like the sections after them */
main.rh > .hp-cards { margin-left: var(--col-start); }
[data-live="progress"], [data-live="collect"] { max-width: 420px; }
[data-live="days"] { max-width: 470px; }
[data-live="progress"] svg.rc, [data-live="days"] svg.rc, [data-live="collect"] svg.rc { max-width: 100%; }
[data-live="progress"] { margin: 0 0 0.9rem; }