/* page-specific styles for premed; shared components belong in dibs.css */
/* Fix round 1 (17 Oct 2026). Loaded after dibs.css, so these override section 17 at equal specificity. */

/* Requirements, stacked rows (sys 10 tables; spec 5): each school's state sits on a shared grid, so a school's
   word lines up from row to row at every width that stacks (1024 to 1279 with 4 or 5 schools, and phones).
   Flex wrapping put UC San Diego at four different x positions down the list. The school name takes the
   88px label column of the drawer's property list (sys 9.6), and Not listed keeps its empty icon slot (3.5). */
.pm-req-wrap.is-stacked tr { display: grid; grid-template-columns: repeat(auto-fill, minmax(192px, 1fr)); column-gap: var(--s-4); row-gap: var(--s-1); }
.pm-req-wrap.is-stacked td.c-name { grid-column: 1 / -1; }
.pm-req-wrap.is-stacked td.c-st { min-width: 0; }
.pm-req-wrap.is-stacked .pm-st-school { display: inline-block; min-width: 88px; }
.pm-req-wrap.is-stacked span.pm-ico { display: inline-block; }

/* Fact strip (3.4): the units now follow a real space, so screen readers and copied text get "4.00 4 units",
   not "4.004 units". The space is about 3px at 15px Source Sans 3, so the margin drops to keep the 6px gap. */
.pm-unit { margin-left: 3px; }

/* Courses to take: a row with no meta line (later terms have no sections; unrated, no signals) drops the
   empty line and its 4px top margin, so the row is 68 with 12 above and below, not 12 above and 16 below */
.pm-clist .crow-meta:has(> .crow-a:empty):has(> .crow-b:empty) { display: none; }


@media (max-width: 599px) {
  /* "Review repeats" gets its own line, flush with the note text; inline it wrapped alone at 320 with an
     8px indent from its margin and padding */
  .pm-notes .text-btn { display: block; width: fit-content; margin: 2px 0 0 calc(-1 * var(--s-1)); }
}

/* ---------- Fix round 2 (17 Oct 2026) ---------- */

/* Courses to take: the course title wins line 2. RUBRIC lists the title as data that must stay readable, and
   L55 never cuts an issue title (it cuts the trailing chip). The requirement context follows the title when
   both fit, and drops whole onto its own muted line under the title when they do not, so at 320 and 390 the
   title keeps the full row width and truncates only if it alone is wider than the row. */
.pm-clist .crow { grid-template-rows: 22px minmax(22px, auto) auto; } /* line 2 grows when the context wraps */
.pm-clist .crow-l2 { flex-wrap: wrap; row-gap: 0; }
.pm-clist .crow-l2 .crow-title { max-width: 100%; }
.pm-clist .crow-ctx { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* Edit schools on phones (ios/groupme/dec-2024/0054): a bottom sheet sized to its content under a top inset,
   so the dimmed page stays visible above it, with a 56px head: title, muted limit, close at the right.
   The head and scrim exist only on phones; the desktop menu keeps the L250 anatomy. */
.pm-menu-head, .pm-menu-scrim { display: none; }
@media (max-width: 599px) {
  .pm-menu-scrim { display: block; position: fixed; inset: 0; z-index: 79; background: var(--scrim); }
  html.pm-sheet-open, html.pm-sheet-open body { overflow: hidden; }
  .pm-menu { top: auto; height: auto; max-height: 90dvh; padding-top: 0; border-radius: var(--r-panel) var(--r-panel) 0 0; }
  .pm-menu-head { display: flex; flex-shrink: 0; align-items: center; gap: var(--s-2); height: 56px; margin-right: calc(-1 * var(--s-2)); }
  .pm-menu-title { margin: 0; font: var(--t-h2); color: var(--ink); }
  .pm-menu-limit { font: var(--t-label); font-weight: 400; color: var(--muted); }
  .pm-menu-head .close { margin-left: auto; }
  .pm-menu-filter { flex-shrink: 0; }
  .pm-menu-list { flex: 0 1 auto; min-height: 0; }
  .pm-menu-foot { flex-shrink: 0; }
  .pm-menu-note { display: none; } /* the head already says "Up to 5" */
}
/* W6 S6 (Rails data): Recommended is a small filled dot in ink-2; a check line's Edit and Revoke sit after it */
.pm-st.is-rec { color: var(--ink-2); }
.pm-st.is-rec .pm-ico { color: var(--ink-2); }
.pm-dd-tools { display: inline-flex; gap: var(--s-2); margin-left: var(--s-2); }
.pm-dd-tools .text-btn { font: var(--t-label); }
/* W42 Your check: the student's own record, in ink-2 like In progress; never Done's positive colour */
.pm-st.is-yc { color: var(--ink-2); }
.pm-st.is-yc .pm-ico { color: var(--ink-2); }
.pm-check-says { margin: 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
/* W43 picked statuses: a picked state wears the computed state's own class, so it reads with the same word, glyph,
   colour and size. In progress is its half filled circle in the accent colour, picked or computed; Not required is
   a plain dash in muted text. */
.pm-st.is-ip .pm-ico { color: var(--accent); }
.pm-st.is-nr, .pm-st.is-nr .pm-ico { color: var(--muted); }
/* The check form's Status: the house segmented control as a radio group, under a label that matches the field
   labels. Each option reserves its semibold width (the W29 Goal picker's rule), so picking never moves the others;
   on a phone the four options take a 2 by 2 grid of equal halves.
   W49 (owner 4 Nov 2026 17:5x PST, "off center not"): the row spans the form column like the fields above and below
   it, four equal segments with each label centred in its own. The column has no gap: every button takes dibs.css's
   8px flex gap (button, .btn), and in this column it sat between the label and its zero-height bold copy, so each
   label rode 4px above its segment's centre (Discover's W41a cause and fix). */
.pm-field-l { display: block; font: var(--t-control); font-weight: 600; color: var(--ink); }
.seg.pm-pick { display: flex; flex-wrap: wrap; width: 100%; height: auto; margin-top: 6px; }
.seg.pm-pick > button { flex: 1 1 0; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0 10px; white-space: nowrap; }
.seg.pm-pick > button::after { content: attr(data-label); font-weight: 600; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; user-select: none; }
@media (max-width: 599px) {
  .seg.pm-pick { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
}