/* Programs (#programs) and one program (#programs/<id>): spec/page-programs.md.
   Index: Linear 0038 (grouped list, group row with count), Stripe 0201 (filters over the table, count line with
   Clear), dibs Clubs (search first, list rows). Program: dibs class page (back link, two columns, sticky side card,
   AB53), Linear 0074/0076 (title over a properties block, content below). Tokens only (spec/system.md). */
.prg-sub { max-width: var(--w-read); }

/* toolbar: search on its own row, kind and school under it (Stripe 0201) */
.prg-tools { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-2); }
.prg-search { width: 100%; max-width: none; }
.prg-search input:not(:placeholder-shown) ~ kbd { display: none; }
.prg-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.prg-kind { flex: none; }
.prg-school { max-width: 100%; }

.prg-count { display: flex; align-items: center; gap: var(--s-2); min-height: 32px; margin: var(--s-4) 0 var(--s-2); font: var(--t-label); color: var(--muted); }
.prg-clear { height: 28px; min-height: 28px; padding: 0 var(--s-2); }

/* groups (Linear 0038: a group row with its count, then the rows) */
.prg-group + .prg-group { margin-top: var(--s-6); }
.prg-gh { display: flex; align-items: baseline; gap: var(--s-2); margin: 0 0 var(--s-2); font: var(--t-h2); color: var(--ink); }
.prg-gn { font: var(--t-label); color: var(--muted); font-variant-numeric: tabular-nums; }

/* the program row (sys 9.5): name and course count, then department, school and any honors or specialization */
.prg-row { display: flex; flex-direction: column; gap: 2px; color: var(--ink); }
.prg-row:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); }
.prg-l1 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); min-width: 0; }
.prg-name { min-width: 0; font: var(--t-item); color: var(--ink); overflow-wrap: anywhere; }
.prg-n { flex: none; font: var(--t-meta); color: var(--muted); font-variant-numeric: tabular-nums; }
.prg-meta { display: flex; flex-wrap: wrap; gap: 0 var(--s-4); font: var(--t-meta); color: var(--ink-2); }
.prg-meta .prg-extra { color: var(--muted); }
.prg-meta .prg-pm { color: var(--ink); font-weight: 500; }
.prg-hint { margin: 0 0 var(--s-4); max-width: var(--w-read); font: var(--t-meta); color: var(--ink-2); }

.prg-source { margin: var(--s-6) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }

/* program page: the class page's grid (two columns from 880 of content) */
.prg-detail { container: pg / inline-size; }
.prg-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.prg-top, .prg-side, .prg-body { min-width: 0; }
@container pg (min-width: 880px) {
  .prg-grid { grid-template-columns: minmax(0, 1fr) 320px; column-gap: var(--s-12); grid-template-areas: "top side" "body side"; align-items: start; }
  .prg-top { grid-area: top; }
  .prg-body { grid-area: body; }
  .prg-side { grid-area: side; position: sticky; top: var(--s-8); align-self: start; padding-top: 44px; }
}
.prg-back { margin-bottom: var(--s-3); }
.prg-back .icon { width: 16px; height: 16px; }
.prg-head h1 { margin: 0; overflow-wrap: anywhere; }
.prg-dsub { margin: var(--s-1) 0 0; font: var(--t-body); color: var(--ink-2); }
.prg-side { margin: var(--s-6) 0 0; }
/* pre-major (brief point 2): one plain line, then the catalog's own sentence */
.prg-entry { margin: var(--s-3) 0 0; max-width: var(--w-read); }
.prg-entry-h { margin: 0; font: var(--t-control); font-weight: 600; color: var(--ink); }
.prg-entry-t { margin: 2px 0 0; font: var(--t-meta); color: var(--ink-2); }
.prg-card { padding: var(--s-5, 20px); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.prg-props { grid-template-columns: 96px minmax(0, 1fr); }
.prg-props dd { overflow-wrap: anywhere; }
.prg-cat { width: 100%; margin-top: var(--s-4); justify-content: center; }
.prg-src { margin: var(--s-3) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }

/* requirements: the catalog's sections, groups and course lists */
.prg-body { margin-top: var(--s-8); }
.prg-req-h { margin: 0 0 var(--s-1); font: var(--t-h2); }
.prg-linked { margin: 0 0 var(--s-4); font: var(--t-meta); color: var(--muted); }
.prg-outline { max-width: var(--w-read); }
.prg-g0 { padding: var(--s-5, 20px) 0 var(--s-2); border-top: 1px solid var(--line); }
.prg-g0:first-child { border-top: 0; padding-top: var(--s-2); }
.prg-g1, .prg-g2, .prg-g3 { margin-top: var(--s-4); }
.prg-g2, .prg-g3 { padding-left: var(--s-4); border-left: 2px solid var(--line); }
.prg-h { margin: 0 0 var(--s-1); color: var(--ink); }
.prg-h0 { font: var(--t-h2); }
.prg-h1 { font: var(--t-item); }
.prg-h2, .prg-h3 { font: var(--t-control); font-weight: 600; }
.prg-or { font: var(--t-label); color: var(--muted); text-transform: none; }
.prg-note, .prg-rule { margin: 0 0 var(--s-2); font: var(--t-meta); color: var(--ink-2); max-width: var(--w-read); }
.prg-rule { padding: var(--s-2) var(--s-3); border: 1px dashed var(--line-strong); border-radius: var(--r-control); }
.prg-courses { list-style: none; margin: 0; padding: 0; }

/* against the reader's record (brief point 4): the state said once above the outline (Vercel 0072/0074 checklist count,
   Stripe 0381 status per step), the lines carry a quiet mark in the Progress glyph shapes */
.prg-mine { margin: 0 0 var(--s-5, 20px); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); max-width: var(--w-read); }
.prg-mine p { margin: 0; font: var(--t-meta); color: var(--ink-2); }
.prg-mine .prg-mine-h { font: var(--t-control); font-weight: 600; color: var(--ink); }
.prg-mine--none { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.prg-mine--none p { flex: 1 1 260px; }
.prg-mine--none .btn .icon { width: 16px; height: 16px; }
.prg-tally { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); list-style: none; margin: var(--s-2) 0; padding: 0; }
.prg-tally b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.prg-mine .prg-mine-w { margin-bottom: var(--s-1); }
.prg-mine .prg-mine-f { color: var(--muted); }
.prg-glyph { width: 16px; height: 16px; flex: none; color: var(--muted); }
.prg-st { display: inline-flex; align-items: center; gap: 6px; font: var(--t-label); font-weight: 400; color: var(--ink-2); white-space: nowrap; }
.prg-st.is-taken, .prg-st.is-taken .prg-glyph { color: var(--ink); }
.prg-st.is-ct { color: var(--muted); }
.prg-st-n { color: var(--muted); }
.prg-hrow { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin: 0 0 var(--s-1); }
.prg-hrow > .prg-h { margin: 0; min-width: 0; }
.prg-hrow > .prg-st { align-self: center; }
.prg-cm { white-space: nowrap; }
.prg-course { display: grid; grid-template-columns: 7.5em minmax(0, 1fr) auto; column-gap: var(--s-4); align-items: baseline; padding: 6px 0; border-top: 1px solid var(--line); font: var(--t-meta); }
.prg-courses > .prg-course:first-child { border-top: 0; }
.prg-code { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
a.prg-code { color: var(--accent); }
.prg-ctitle { min-width: 0; color: var(--ink-2); }
.prg-more { margin-top: var(--s-1); padding-left: 0; }
.prg-none p { margin: 0; font: var(--t-meta); color: var(--ink-2); }

/* class page "Counts toward" (brief point 5; Linear 0074 linked projects under the detail): name, then kind and section */
.prg-ct-list { list-style: none; margin: var(--s-3) 0 0; padding: 0; max-width: var(--w-read); }
.prg-ct-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s-3); padding: 6px 0; border-top: 1px solid var(--line); font: var(--t-meta); }
.prg-ct-row:first-child { border-top: 0; }
.prg-ct-row a { min-width: 0; overflow-wrap: anywhere; }
.prg-ct-more { margin-top: var(--s-1); padding-left: 0; }

@media (max-width: 599px) {
  .prg-filters { flex-direction: column; align-items: stretch; }
  .prg-kind { display: flex; }
  .prg-kind > button { flex: 1; }
  .prg-l1 { flex-direction: column; gap: 0; }
  .prg-course { grid-template-columns: minmax(0, 1fr) auto; }
  .prg-course .prg-ctitle { grid-column: 1 / -1; }
  .prg-hrow { flex-wrap: wrap; }
  .prg-course .prg-cm { grid-row: 1; grid-column: 2; }
  .prg-code { white-space: normal; }
}

/* Alternative degree paths are explicit; choosing one never changes the saved audit. */
.prg-path { max-width: var(--w-read); margin-bottom: var(--s-4); }
.prg-path label { display: block; font: var(--t-label); margin-bottom: var(--s-2); }
.prg-path select, .prg-path .csel { max-width: 100%; }
.prg-path .prg-note { margin-top: var(--s-2); }