/* page-plan-generate.css: the Draft a plan sheet and the Clears section on Plan (spec/page-plan-generate.md).
   Sheet: CA102 right-docked create panel (meta over title, hairline sections, pinned footer, secondary then
   primary); CA391/CA392 working and result states in the same surface; GPT44 thin determinate bar with step lines;
   L182 was -> now rows; ST381 requirement rows with a status mark and one explanation line, no cards. */

/* ---------- sheet frame ---------- */
#drawer.is-gen .pg-dh { align-items: center; }
.pg-dh-t { min-width: 0; }
.pg-meta { margin: 0; font: var(--t-label); color: var(--muted); }
.pg-dh h2 { margin: 0; font: var(--t-h2); }
.pg-db { display: grid; align-content: start; gap: var(--s-6); }
.pg-db > * + * { margin-top: 0; }
.pg-db h3 { margin: 0 0 var(--s-2); font: var(--t-item); color: var(--ink); }
.pg-lede { margin: 0; font: var(--t-body); color: var(--ink-2); }
.pg-muted, .pg-hint { margin: var(--s-2) 0 0; font: var(--t-meta); color: var(--muted); }
.pg-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.pg-sec-head h3 { margin-bottom: var(--s-2); }
.pg-df { gap: var(--s-2); }
.pg-df .df-r { display: flex; gap: var(--s-2); }
.pg-df button { white-space: nowrap; }

/* status glyphs (Progress shapes, L55): colour is state only */
.pg-glyph { width: 16px; height: 16px; flex-shrink: 0; color: var(--muted); }
.pg-glyph--met { color: var(--positive); }
.pg-glyph--part { color: var(--accent); }

/* ---------- form ---------- */
.pg-needs, .pg-fixed, .pg-picks, .pg-chgs, .pg-steps, .pg-held, .pg-clist { list-style: none; margin: 0; padding: 0; }
.pg-needs, .pg-chgs { border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.pg-need, .pg-chg { display: flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: var(--s-2) var(--s-4); font: var(--t-meta); }
.pg-need + .pg-need, .pg-chg + .pg-chg { border-top: 1px solid var(--line); }
.pg-need-n, .pg-chg-n { flex: 1; min-width: 0; color: var(--ink); }
.pg-need-v { color: var(--ink-2); white-space: nowrap; }
.pg-chg-v { display: inline-flex; align-items: center; gap: var(--s-1); white-space: nowrap; color: var(--ink-2); }
.pg-chg-v .icon { width: 14px; height: 14px; color: var(--muted); }
.pg-was { color: var(--muted); }
.pg-now { color: var(--ink); font-weight: 600; }
.pg-units { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.pg-units input, .pg-courses :is(select, .csel) { width: 100%; }
.pg-courses { max-width: 220px; }
/* W38 (owner 4 Nov 2026, "this looks like shit"): the Goal pill hugs its four options, as every other dibs segment
   does (Plan Week / Finals / Map), instead of stretching to the sheet as an outlined bar with a hole at the right.
   The options keep their own widths: four equal ones would need 4 x 128 px and the 480 px sheet holds 425. On a
   phone the four options take a 2 by 2 grid of equal halves that fills the pill, so the box never has a hole.
   References: spec/screens/plan-generate-goal.SCREEN.md. */
.seg.pg-goal { display: flex; flex-wrap: wrap; width: fit-content; height: auto; max-width: 100%; }
.seg.pg-goal > button { white-space: nowrap; }
@media (max-width: 599px) {
  .seg.pg-goal { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
}
/* the selected goal's one-line note; it keeps one line's height when empty so the sections below never move */
.pg-goal-note { min-height: 1lh; margin: var(--s-2) 0 0; font: var(--t-meta); color: var(--muted); }
/* W29 check 1 M2: the selected option is semibold, so choosing one used to widen it and push Free mornings onto a
   second row at 1440. Each option reserves its semibold width in a hidden, zero-height copy of its own label, so
   choosing never changes a width and the pill wraps only when it would wrap anyway (a phone). */
.seg.pg-goal > button { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 8px; }
.seg.pg-goal > button::after { content: attr(data-label); font-weight: 600; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; user-select: none; }
.pg-fixed-row { display: grid; grid-template-columns: 88px 1fr; gap: var(--s-3); min-height: 32px; align-items: baseline; padding: 6px 0; font: var(--t-meta); color: var(--ink); }
.pg-fixed-k { font: var(--t-label); font-weight: 400; color: var(--muted); }

/* ---------- running ---------- */
.pg-run { display: grid; gap: var(--s-3); }
.pg-run-t { margin: 0; font: var(--t-item); }
.pg-bar { height: 4px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.pg-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--dm-content-ms, 441ms) var(--dm-content-ease, linear); }
.pg-step { display: flex; align-items: center; gap: var(--s-2); min-height: 30px; font: var(--t-meta); color: var(--ink-2); }

/* ---------- result ---------- */
.pg-result-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.pg-say { margin: var(--s-2) 0 0; font: var(--t-body); color: var(--ink); }
/* W24 (owner, 3 Nov 2026): no warning box; a limit dibs could not meet is a plain row under Against your audit. */
.pg-relax { list-style: none; margin: 0; padding: 0; }
.pg-relax li { display: flex; align-items: flex-start; gap: var(--s-2); padding: 4px var(--s-4); font: var(--t-meta); color: var(--ink-2); }
.pg-relax .pg-glyph { margin-top: 2px; }
.pg-tag { margin-left: var(--s-1); font: var(--t-meta); color: var(--muted); white-space: nowrap; }
.pg-pick-note { margin: 2px 0 0; font: var(--t-meta); color: var(--muted); }
.pg-picks { border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.pg-pick { padding: var(--s-3) var(--s-4); }
.pg-pick + .pg-pick { border-top: 1px solid var(--line); }
.pg-pick-l1 { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.pg-code { font: var(--t-item); color: var(--ink); }
.pg-units-n { font: var(--t-meta); color: var(--ink-2); white-space: nowrap; }
.pg-pick-title { margin: 0; font: var(--t-body); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-pick-meta { margin: 2px 0 0; font: var(--t-meta); color: var(--ink-2); }
.pg-held li { display: flex; align-items: flex-start; gap: var(--s-2); padding: 4px 0; font: var(--t-meta); color: var(--ink-2); }
.pg-held .pg-glyph { margin-top: 2px; }
.pg-keepnote { margin: 0; font: var(--t-meta); color: var(--muted); }

/* ---------- gates (guest, no pass, no audit, nothing left, nothing found, error) ---------- */
.pg-gate { padding: var(--s-6) 0 0; }
.pg-gate h3 { font: var(--t-h2); }
.pg-gate p { max-width: 420px; margin: 0 0 var(--s-2); font: var(--t-body); color: var(--ink-2); }
.pg-price { font: var(--t-meta); color: var(--muted); }

/* ---------- Plan: toolbar button and the Clears section ---------- */
.plan-actions > #gen-btn { white-space: nowrap; }
.gen-s { display: none; }
@media (max-width: 379px) { .gen-l { display: none; } .gen-s { display: inline; } }
@media (pointer: coarse), (max-width: 599px) {
  .plan-actions > #gen-btn { position: relative; }
  .plan-actions > #gen-btn::before { content: ''; position: absolute; inset: -7px 0; }
}
.pf-clears { color: var(--accent); text-decoration: none; }
.pf-clears:hover { text-decoration: underline; }

.plan-clears { margin-top: var(--s-8); }
.plan-clears .plan-sec-head { align-items: center; margin-bottom: var(--s-3); }
.plan-clears .plan-sec-head button { white-space: nowrap; }
/* the read line sits with the action at the right, as Classes keeps its read line right (page-plan 7) */
.plan-clears .plan-sec-head .plan-read { margin-left: auto; }
.plan-clears .plan-sec-head .plan-read + button { margin-left: 0; }
.pg-clist { border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.pg-crow { display: flex; align-items: center; gap: var(--s-3); min-height: 56px; padding: var(--s-2) var(--s-4); }
.pg-clist > li + li { border-top: 1px solid var(--line); }
.pg-ctext { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pg-cname { font: var(--t-control); color: var(--ink); }
.pg-csay { font: var(--t-meta); color: var(--ink-2); }
.pg-see { flex-shrink: 0; font: var(--t-control); color: var(--accent); text-decoration: none; white-space: nowrap; }
.pg-see:hover { text-decoration: underline; }
.pg-ct > summary { display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: 0 var(--s-4); cursor: pointer; list-style: none; }
.pg-ct > summary::-webkit-details-marker { display: none; }
.pg-ct > summary .pg-cname { flex: 1; }
.pg-cn { font: var(--t-label); color: var(--muted); font-variant-numeric: tabular-nums; }
.pg-ct ul { list-style: none; margin: 0; padding: 0 0 var(--s-2); }
.pg-crow--ct { min-height: 44px; padding-left: calc(var(--s-4) + 16px + var(--s-3)); }
.pg-ctnote { margin: 0; padding: 0 var(--s-4) var(--s-3) calc(var(--s-4) + 16px + var(--s-3)); font: var(--t-meta); color: var(--muted); }
.pg-cfoot { margin: var(--s-2) 0 0; font: var(--t-meta); color: var(--muted); }
.pg-lock { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-panel); background: var(--surface); }
.pg-lock p { flex: 1 1 260px; margin: 0; font: var(--t-meta); color: var(--ink-2); }

@media (max-width: 599px) {
  #drawer.is-gen { width: 100%; border-left: 0; }
  #drawer.is-gen .pg-df { padding-bottom: env(safe-area-inset-bottom, 0px); }
  .pg-db { padding: var(--s-4); }
  .pg-crow { align-items: flex-start; flex-wrap: wrap; }
  .pg-crow .pg-see { margin-left: calc(16px + var(--s-3)); }
}
@media (max-width: 359px) {
  .pg-units { grid-template-columns: 1fr; }
  .pg-df { padding: 0 var(--s-4); }
  .pg-fixed-row { grid-template-columns: 1fr; gap: 0; }
}