/* Class page, #class/<course id> (spec/page-class.md). Tokens and parts from dibs.css only: the drawer's tables,
   property list, workload bar and buttons. Widths follow the content box (container query), so the sidebar,
   the rail and the drawer pane all give the same layout for the same room. */
main:has(> .cp) { max-width: calc(var(--w-list) + 2 * var(--s-8)); }
html.rail main:has(> .cp) { max-width: calc(var(--w-list) + 2 * var(--s-8) + 240px - var(--rail)); }
.cp { --cp-bleed: var(--s-8); container: cp / inline-size; position: relative; }

/* two columns at 880 and up: content left, the action card sticky right (AB53) */
.cp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.cp-top, .cp-body, .cp-side { min-width: 0; }
@container cp (min-width: 880px) {
  .cp-grid { grid-template-columns: minmax(0, 1fr) 320px; column-gap: var(--s-12); grid-template-areas: "top side" "body side"; align-items: start; }
  .cp-top { grid-area: top; }
  .cp-body { grid-area: body; }
  .cp-side { grid-area: side; position: sticky; top: var(--s-8); align-self: start; padding-top: 44px; }
  .cp-bar-layer, .cp-bar { display: none; }
}

/* 1 header (L97 back link, AB36 code over title) */
.cp-head { margin-bottom: var(--s-6); }
.cp-back { margin-bottom: var(--s-3); }
.cp-back .icon { width: 16px; height: 16px; }
.cp-titlerow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.cp-titlerow h1 { margin: 0; font: var(--t-title); color: var(--ink); font-variant-numeric: tabular-nums; }
.cp-sub { margin: var(--s-1) 0 0; font: var(--t-body); color: var(--ink-2); max-width: var(--w-read); }
.cp-meta { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: var(--s-2) 0 0; font: var(--t-meta); color: var(--muted); }

/* 2 figures strip (AB53, AB36): label over figure, no boxes, one rule above and below */
.cp-stats { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-8); margin: 0 0 var(--s-6); padding: var(--s-4) 0; border-block: 1px solid var(--line); }
.cp-stat { min-width: 0; }
.cp-stat dt { font: var(--t-label); color: var(--muted); }
.cp-stat dd { margin: var(--s-1) 0 0; font: var(--t-h2); color: var(--ink); font-variant-numeric: tabular-nums; }
.cp-stat dd .cp-none { font: var(--t-meta); color: var(--muted); }
.cp-caveat { margin: calc(var(--s-4) * -1) 0 var(--s-6); max-width: var(--w-read); }
.cp-work { display: inline-flex; align-items: center; gap: var(--s-2); }
.cp-work .bar { margin: 0; }

/* the action card (AB53): seats, the two actions, Check against my plan */
.cp-card { padding: var(--s-5, 20px); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
/* the card's head is the seat line at --t-item, as AB53's card leads with its one figure (check 0 m8) */
.cp-card-seat { margin: 0 0 var(--s-3); font: var(--t-item); }
.cp-acts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.cp-acts .btn-lg { width: 100%; }
.cp-card .cp-full { padding: 0 0 var(--s-2); }
.cp-checkbtn { width: 100%; margin-top: var(--s-2); }
.cp-check { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); transform-origin: top center; }
.cp-check-h { margin: 0 0 var(--s-2); font: var(--t-label); color: var(--muted); }
.cp-check-l { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.cp-check-l li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--s-2); font: var(--t-meta); color: var(--ink); }
.cp-check-l .icon { width: 16px; height: 16px; margin-top: 2px; }
.cp-check-l .is-ok .icon { color: var(--positive); }
.cp-check-l .is-warn .icon, .cp-check-l .is-warn { color: var(--warning); }
.cp-check-l .is-muted { color: var(--muted); }
.cp-check-l .is-muted .icon { color: var(--muted); }

/* 3 description and 4 jump links */
.cp-desc { max-width: var(--w-read); margin-bottom: var(--s-4); }
.cp-desc p { margin: 0; font: var(--t-body); color: var(--ink-2); }
.cp-desc .d-cross { margin-top: var(--s-2); font: var(--t-meta); color: var(--muted); }
.cp-jump { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); margin: 0 0 var(--s-2); padding: var(--s-2) 0; font: var(--t-control); }
.cp-jump a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink-2); }
.cp-jump a:hover { color: var(--ink); }

/* sections: heading --t-h2 18/24 as Plan's page sections, with a muted note right */
.cp-sec { padding-top: var(--s-8); scroll-margin-top: var(--s-4); }
.cp-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-3); }
.cp-sec-head h2 { margin: 0; font: var(--t-h2); color: var(--ink); }
.cp-sec-head h2:focus { outline: none; }
.cp-sec-head h2:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.cp-empty, .cp-line { margin: 0; font: var(--t-meta); color: var(--muted); }
.cp-line { color: var(--ink); }
.cp-sub-h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); margin: var(--s-6) 0 var(--s-2); font: var(--t-meta); font-weight: 600; color: var(--ink); }

/* 5 sections table (AB129): Section | When | Where | Seats | Instructor */
.cp-secs .cw-sec { width: 72px; }
.cp-secs .cw-when { width: 184px; }
.cp-secs .cw-where { width: 140px; }
.cp-secs .cw-seats { width: 112px; }
.cp-secs .c-seats { white-space: nowrap; }
.cp-secs .c-when .d-clash { display: block; }

/* 6 grade distribution (FL148): label, flat bar on a track, share, count */
.cp-gfilters { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); margin-bottom: var(--s-4); }
.cp-field { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.cp-field label { font: var(--t-label); color: var(--muted); }
.cp-dist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cp-dist li { display: grid; grid-template-columns: 32px minmax(0, 1fr) 56px 56px; align-items: center; column-gap: var(--s-3); min-height: 20px; font: var(--t-meta); }
.cp-dk { color: var(--ink); font-weight: 500; }
.cp-dbar { display: block; height: 8px; border-radius: 2px; background: var(--surface-2); overflow: hidden; }
.cp-dbar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.cp-dv { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.cp-dn { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.cp-dnote { margin: var(--s-3) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }

/* 7 to 9 */
.cp-k { font: var(--t-label); color: var(--muted); }
.cp-props { grid-template-columns: 120px minmax(0, 1fr); }

/* 10 class chat entry */
.cp-chat { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.cp-chat-t { display: flex; flex-direction: column; min-width: 0; font: var(--t-meta); }
.cp-chat-name { color: var(--ink); font-weight: 600; }
.cp-chat .btn { flex: none; }

/* 11 similar classes: the shared row in its container */
.cp-similar { margin-top: 0; }
.cp-body { padding-bottom: var(--s-6); }

/* the phone bar's layer: in the DOM after the figures (Tab order), drawn over the whole page down to main's bottom
   padding, with the bar at its foot; sticky keeps the bar on the window's bottom edge while the page is in view */
.cp-bar-layer { position: absolute; z-index: 5; inset: 0 calc(-1 * var(--cp-bleed)) calc(-1 * var(--s-8)); display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; }
.cp-bar { pointer-events: auto; }

/* one column under 880: the card sits under the figures; Watch and Add to plan move to a bar pinned to the bottom
   of the window (AB36), the only place they show at this width */
@container cp (max-width: 879.98px) {
  .cp-side { margin-bottom: var(--s-6); }
  .cp-card { padding: 0; border: 0; background: none; }
  .cp-card-seat, .cp-card .cp-acts, .cp-card .cp-full { display: none; }
  .cp-checkbtn { width: auto; margin-top: 0; } /* natural width in one column (check 0 m5) */
  .cp-grid { padding-bottom: calc(var(--cp-bar-h, 64px) + var(--s-6)); } /* room for the bar (a container query cannot style .cp itself) */
  .cp-check { padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
  .cp-bar { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); }
  .cp-bar-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 64px; padding: var(--s-3) var(--cp-bleed) calc(var(--s-3) + env(safe-area-inset-bottom, 0px)); }
  .cp-bar .cp-full { padding: var(--s-3) var(--cp-bleed) 0; }
  .cp-bar-seat { font: var(--t-meta); min-width: 0; }
  .cp-bar-acts { display: flex; gap: var(--s-2); flex: none; }
}
/* phones (390, 320): figures two to a line; in the bar the seat line keeps its place as a 13px line over the two
   buttons, which share the width (AB36 keeps the context next to the primary; check 0 m7) */
@container cp (max-width: 559.98px) {
  .cp-stats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
  .cp-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .cp-bar-in { flex-wrap: wrap; row-gap: var(--s-2); }
  .cp-bar-seat { flex: 1 1 100%; font: var(--t-label); }
  .cp-bar-acts { flex: 1 1 100%; }
  .cp-bar-acts .btn-lg { flex: 1; min-height: 44px; }
  .cp-checkbtn { min-height: 44px; }
  .cp-chat { flex-wrap: wrap; }
  .cp-props { grid-template-columns: 104px minmax(0, 1fr); }
  .cp-dist li { grid-template-columns: 28px minmax(0, 1fr) 52px 48px; column-gap: var(--s-2); }
  .cp-gfilters .cp-field { flex: 1 1 140px; }
}
@container cp (max-width: 339.98px) {
  .cp-dist li { grid-template-columns: 28px minmax(0, 1fr) 52px; }
  .cp-dn { display: none; }
  .cp-props { grid-template-columns: minmax(0, 1fr); }
  .cp-props dt { padding-bottom: 0; }
}
@media (max-width: 599px) { .cp { --cp-bleed: var(--s-4); } }
/* the sections table stacks when its column is narrow (phones, and the left column at 1024): section left, then time,
   place, seats and instructor on their own lines, as the drawer's table does on phones */
.cp-body { container: cpbody / inline-size; }
@container cpbody (max-width: 599.98px) {
  .cp-secs, .cp-secs tbody { display: block; }
  .cp-secs thead, .cp-secs colgroup { display: none; }
  .cp-secs tr { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 0; padding: var(--s-2) 0; border-bottom: 1px solid var(--line); }
  .cp-secs tbody tr:last-child { border-bottom: 0; }
  .cp-secs td { display: block; height: auto; padding: 0; border: 0; }
  .cp-secs .c-sec { grid-column: 1; grid-row: 1 / span 4; }
  .cp-secs .is-dis .c-sec { padding-left: var(--s-4); }
  .cp-secs .c-when { grid-column: 2; color: var(--ink); }
  .cp-secs .c-where, .cp-secs .c-instr { grid-column: 2; color: var(--muted); }
  .cp-secs .c-seats { grid-column: 2; text-align: left; padding: 0; }
}
@media (pointer: coarse) {
  .cp-back, .cp-jump a, .cp-chat .btn { min-height: 44px; }
  .cp-bar-acts .btn-lg { min-height: 44px; }
}
/* the bottom bar is 64 tall under 880 (about 100 on phones) (classpage.js sets body.cp-bar-on while it shows): a toast sits above it */
body.cp-bar-on #toast { bottom: calc(var(--cp-bar-h, 64px) + 16px); }