/* page-specific styles for progress; shared components belong in dibs.css */

/* Fix round 2 (spec/page-progress.md). Loaded after dibs.css, so these override section 16 there. */

/* R2 meters (2.4, 4): the inner track draws and clips the bar, so the focusable meter can take a 44px touch
   area under a coarse pointer (6 + 2 x 19) without the clip swallowing it. The visual bar is unchanged. */
.pmeter { position: relative; display: block; background: none; overflow: visible; }
.pm-track { display: flex; height: 100%; border-radius: var(--r-control); background: var(--line-strong); overflow: hidden; }

/* Row menus (sys 9.7 items, rubric 44px targets): the shared item is 32px; on touch it grows to 44, as Premed's does */
@media (pointer: coarse), (max-width: 599px) {
  .pmenu .menu-item { min-height: 44px; }
  .pmeter::before { content: ''; position: absolute; inset: -19px 0; }
}

/* Option rows beside the detail pane (2.1: "the option rows' meta line uses its second line"). With the list at
   496 to 656px, the two fact groups each opened a line and PSYCH 10 ran 3; as on phones (2.7), the facts flow as
   one wrapping run with the shared 16px trailing margins, so every option keeps to two meta lines. */
@media (min-width: 1280px) {
  body.pane-open .popts .crow-meta { column-gap: 0; margin-right: calc(-1 * var(--s-4)); }
  body.pane-open .popts .crow-a, body.pane-open .popts .crow-b { display: contents; }
  body.pane-open .popts .crow-b > * { margin-right: var(--s-4); }
}

/* Records: the edited row takes the --surface-2 fill (M109), which is also the neutral badge fill, so a badge
   would vanish into the row. On that row a badge takes the surface fill (M109 keeps its tag legible). */
.rec tr.is-editing .badge { background: var(--surface); }
/* "Repeat" is plain muted text (dibs.css .repeat-mark), as in Premed's Science courses; on the code's baseline */
.rec-l1 { align-items: baseline; }

/* Edit drawer facts (3.5; sys 9.6): the same 88px label column as the course detail's property list, and a
   hairline between the record's facts and its editable fields, as M109 splits them */
.rec-props { grid-template-columns: 88px minmax(0, 1fr); padding-bottom: var(--s-6); border-bottom: 1px solid var(--line); }
.db > .rec-props + .rec-fields { margin-top: var(--s-6); }

/* ---------- proto-on-rails W6 S4: what Rails can say that the sample never did ---------- */
/* Q3 remainder-only cell: the audit prints what is left and no total, so there is no bar and no "of N" (dibs never
   invents a denominator). The note sits where the bar would, in the meter's 12px slot, so the strip keeps its height. */
.pcell--rem .pcell-note { margin-top: var(--s-2); font: var(--t-meta); color: var(--muted); }
.pv--none { color: var(--muted); }
/* Banners (server sentences, said once above the strip). Calendly 0104's quiet tinted line, sys 9.8 tokens only. */
.pbanner { display: flex; gap: var(--s-3); margin: 0 0 var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-panel); background: var(--surface-2); color: var(--ink-2); font: var(--t-meta); }
.pbanner .icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; color: var(--muted); }
.pbanner p { margin: 0; max-width: 72ch; }
.pbanner--warn { background: var(--warning-subtle); }
.pbanner--warn .icon { color: var(--warning); }
/* Long empty copy (Rails' six reasons carry two sentences and the print steps): left edges stay centred, lines wrap
   at reading width. */
.empty.pempty--long p { max-width: 520px; }
.empty.pempty--long p + p { margin-top: var(--s-2); }
/* The page's qualifier (owner walk 2 W3): muted meta text a section gap below what it qualifies, as Premed's .pm-qual
   reads, never flush against a card edge. */
.prog-disclosure { margin: var(--s-6) 0 0; max-width: var(--w-read); font: var(--t-meta); color: var(--muted); }
/* Guest delete (Linear 0308 danger zone row): what it is on the left, one action on the right, a hairline above. */
.pdanger { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-8); padding: var(--s-4) 0 0; border-top: 1px solid var(--line); }
.pdanger-h { margin: 0; font: var(--t-control); color: var(--ink); }
.pdanger-text p { margin: var(--s-1) 0 0; max-width: 60ch; font: var(--t-meta); color: var(--muted); }
.pdanger .btn-danger { flex-shrink: 0; }
@media (max-width: 599px) {
  .pdanger { flex-direction: column; align-items: stretch; }
  .pdanger .btn-danger { align-self: flex-start; }
}

/* ---------- proto-on-rails W6 S5: Course records on Rails, the repeats view (C6) ---------- */
/* Unsure (the bucket the server cannot place) reads as a muted state, never a warning: it is a fact about the
   course code, not something the reader did wrong. */
.rec-unsure { color: var(--ink-2); font-style: italic; }
.rec tr.is-earlier td { color: var(--ink-2); }
.rec tr.is-earlier .rec-code { font-weight: 400; color: var(--ink-2); }
.rec-code--plain { display: inline-block; }
.rec--guest .c-title { width: auto; color: var(--ink-2); }
.rec--guest .c-course { width: 160px; }
.rec-guest-note { margin-top: var(--s-4); }
.rec-missing { margin: var(--s-3) 0 0; font: var(--t-meta); color: var(--muted); }
.rec-repeats { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); margin: var(--s-4) 0 0; font: var(--t-meta); color: var(--ink-2); }
.rec-help { display: block; margin-top: 4px; font: var(--t-meta); color: var(--muted); }
.rec-conflict { display: flex; gap: var(--s-2); align-items: flex-start; margin: 0 0 var(--s-4); padding: var(--s-3); border-radius: var(--r-control); background: var(--warning-subtle); font: var(--t-meta); color: var(--ink); }
.rec-conflict .icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
/* Pick list for a code that matches several courses (the server's COURSE_PICK): one tap fills the code. */
.rec-pick { margin-top: var(--s-2); }
.rec-pick-h { margin: 0 0 var(--s-1); font: var(--t-label); color: var(--muted); }
.rec-pick-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: var(--r-control); max-height: 240px; overflow: auto; }
.rec-pick-list li + li { border-top: 1px solid var(--line); }
.rec-pick-row { display: flex; gap: var(--s-3); width: 100%; min-height: 40px; padding: var(--s-2) var(--s-3); border: 0; border-radius: 0; background: none; text-align: left; font: var(--t-meta); color: var(--ink); }
.rec-pick-row[aria-pressed="true"] { background: var(--accent-subtle); }
.rec-pick-code { font-weight: 600; white-space: nowrap; }
.rec-pick-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }

/* Repeats view: Airbnb 0340 (stacked choice cards, the radio at the right, the chosen card outlined) and 0336
   (the fields a choice needs open under it). One card per course, each with its own Save. */
.reps-title { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.reps-back { display: inline-flex; align-items: center; gap: 2px; margin-left: -4px; font: var(--t-meta); color: var(--ink-2); }
.reps-back .icon { width: 16px; height: 16px; }
/* W37b: Course records leads with the same back line to Progress; Add attempt stays level with the h1 under it */
.rec-head:has(> .reps-title) { align-items: flex-end; }
/* W37c round 2: the Grade cell dropped .num so the desktop column reads left; a stacked record keeps its grade at the card's right edge, beside "..." */
@container (max-width: 879px) { .rec td.c-grade { text-align: right; } }
.reps-lede { max-width: var(--w-read); margin: var(--s-2) 0 0; font: var(--t-body); color: var(--ink-2); }
.reps-status { margin: var(--s-3) 0 0; font: var(--t-meta); color: var(--muted); }
.reps-list { display: flex; flex-direction: column; gap: var(--s-4); max-width: var(--w-form); margin-top: var(--s-6); }
.rep-card { padding: var(--s-4) var(--s-6); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.rep-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); }
.rep-head h2 { display: flex; flex-direction: column; gap: 2px; margin: 0; min-width: 0; font: var(--t-item); }
.rep-code { font-weight: 600; color: var(--ink); }
.rep-title { font: var(--t-meta); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-head .badge { flex-shrink: 0; }
.rep-now { margin: var(--s-2) 0 0; font: var(--t-meta); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rep-opts { margin: var(--s-4) 0 0; padding: 0; border: 0; min-width: 0; }
.rep-opt { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-control); font-weight: 400; cursor: pointer; }
.rep-opt + .rep-opt { margin-top: var(--s-2); }
.rep-opt:hover { border-color: var(--line-strong); }
.rep-opt:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.rep-opt:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.rep-opt input { width: 20px; height: 20px; }
.rep-opt-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rep-opt-name { font: var(--t-control); font-weight: 600; color: var(--ink); }
.rep-opt-d { font: var(--t-meta); color: var(--ink-2); }
.rep-sits { display: flex; flex-direction: column; gap: var(--s-2); margin-top: var(--s-3); padding-left: var(--s-4); border-left: 2px solid var(--line); }
.rep-sit { display: grid; grid-template-columns: minmax(0, 1fr) 120px 88px 32px; align-items: center; gap: var(--s-2); }
.rep-sit-n { font: var(--t-meta); color: var(--ink-2); white-space: nowrap; }
.rep-f { margin: 0; }
.rep-f select, .rep-f input { width: 100%; margin: 0; }
.rep-more { display: inline-flex; align-items: center; gap: var(--s-1); align-self: flex-start; }
.rep-more .icon { width: 16px; height: 16px; }
.rep-err { margin: var(--s-3) 0 0; }
.rep-foot { display: flex; justify-content: flex-end; margin-top: var(--s-4); }
@media (max-width: 599px) {
  .rep-card { padding: var(--s-4); }
  .rep-sit { grid-template-columns: minmax(0, 1fr) 80px 44px; grid-template-areas: "n n n" "g u x"; }
  .rep-sit-n { grid-area: n; }
  .rep-sit .rep-f:not(.rep-f--u) { grid-area: g; }
  .rep-sit .rep-f--u { grid-area: u; }
  .rep-sit .icon-btn { grid-area: x; }
  .rep-opt { min-height: 56px; }
  .rep-foot .primary { width: 100%; }
}
@media (prefers-reduced-motion: no-preference) {
  .rep-sits { animation: rep-open var(--dm-popover-ms, 280ms) var(--dm-popover-ease, linear) both; } /* the popover spring, sampled (motion-apple-springs.md 3) */
}
@keyframes rep-open { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }