/* page-specific styles for plan; shared components belong in dibs.css */
/* Plan fix round 2 (spec/page-plan.md and the two iteration-2 reviews). These rules follow dibs.css section
   15 and override it where they repeat a selector. */

/* Busy hatch. Light keeps --line on --bg (1.15:1). Dark --line on --bg measured 1.33:1, twice as loud as
   light and as C110's hatch (#eaeaea on #f8f8f8), so dark stripes use --surface-2 (1.20:1). Label and
   time contrast on the stripe stay above 4.5:1 (--muted 6.1:1). */
/* --busy-stripe now lives in dibs.css beside .wk-busy, so Calendar uses the same hatch (b1r4 n4) */
.plan .wk-busy, .plan .wk-busy:hover { background: repeating-linear-gradient(135deg, var(--busy-stripe) 0 3px, var(--bg) 3px 6px); }

/* C: the grid ends 8 below its last hour line, as it starts 8 above its first, and that line carries its
   label ("6 PM"), so the top and bottom of the grid read the same (C120 labels sit on their lines). */
.plan .wk-body { height: calc(16px + var(--rows) * var(--pitch)); }
/* 320: the 34 gutter clipped "Async" to "Asyn" behind 4px of padding */
@media (max-width: 359px) { .plan .wk-lane-label { padding-right: 2px; } }

/* A: one toolbar on the title row (sys 9.11; S252 header actions, C120): Busy hours, Export and Share, 8 apart,
   right-aligned on the title's center line. Phones keep the title and the icon-only Share on line one and put
   Busy hours and Export, labels kept, on their own line under it. With Draft a plan and Enrollment order the
   toolbar holds four buttons, which no longer fit beside the title below 960, so the tablet widths take the
   phone layout too (merge of page/plan-generate). */
.plan-head { column-gap: var(--s-2); }
.plan-head h1 { margin-right: auto; }
@media (max-width: 959px) {
  .plan-head { flex-wrap: wrap; row-gap: var(--s-3); }
  .plan-head .share-anchor { order: 1; }
  .plan-head .plan-actions { order: 2; flex-basis: 100%; flex-wrap: wrap; row-gap: var(--s-2); } /* Enrollment order is the third tool: it wraps under the first two */
}

/* C heading: "Your typical week" (owner ruling 23 Oct). The grid is one repeating week with no dates; the heading
   says so in one muted line, and two quiet tertiary links at its right open Calendar at the quarter and at finals
   week (N381 "Manage in Calendar" sits at the right of the calendar view's own header row). */
.plan-week { margin-top: var(--s-6); }
.plan-week-head { align-items: flex-end; }
.plan-week-t { min-width: 0; }
.plan-week-sub { margin: 2px 0 0; font: var(--t-meta); color: var(--muted); }
.plan-week-links { display: flex; flex-shrink: 0; gap: var(--s-2); }
.plan-week-links .btn { margin: 0; white-space: nowrap; }
.plan-week .wk { margin-top: var(--s-3); }
/* Finals view (owner walk 2 W2): what is not on the grid, one muted line each under it (classes with no posted
   exam time, classes with no final, common finals weekend); a clash keeps the summary's danger text.
   shared-plan.js draws the same lines. */
.plan-fin-notes { margin-top: var(--s-3); }
.plan-fin-note { margin: 0; font: var(--t-meta); color: var(--muted); }
.plan-fin-note + .plan-fin-note { margin-top: var(--s-1); }
@media (max-width: 599px) {
  .wk.plan-fin-grid { display: none; } /* phones read the finals day list, on Plan and on a shared plan */
  .plan-week-head { flex-wrap: wrap; row-gap: 0; }
  .plan-week-links { flex-basis: 100%; margin: var(--s-2) 0 0; }
  .plan .plan-week .wk-days { margin-top: var(--s-2); }
}

/* B: every fact boundary is 16, measured to the ink (L116; page-plan 6). The first assignment glyph sits
   about 3 inside its 16 icon box. */
.pf-work .assign > :first-child { margin-left: -3px; }
/* GE with several categories: names on wide screens, the count with a tip on phones (page-plan 6, 12) */
.pf-ge-n { display: none; }
@media (max-width: 599px) {
  .pf-ge-all { display: none; }
  .pf-ge-n { display: inline-flex; }
}

/* Busy hours on the grid (spec/busy-hours-drag.md 5.5): class blocks always sit above busy time, its drag
   preview and a lifted busy block, so a hatch never covers a class's text. Busy is 1 and 2 (busy-drag.css),
   classes 3; selected 3, focus 5 and landing 6 stay above. */
.plan .wk-lec, .plan .wk-dis { z-index: 3; }
/* the old drag preview sat at 6, above everything */
.plan .wk-busy.is-preview { z-index: 2; box-shadow: none; }
/* phones: every weekday label carries its own + Add busy time, beside the rows it adds to (busy-hours-drag 7;
   GroupMe 0038 puts actions next to what they act on). 28 visual, 44 target. */
.plan .adl-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.plan .adl-head .adl-label { flex: 1; min-width: 0; padding-top: 6px; padding-bottom: 6px; } /* centered on the 28 button */
.plan .bd-day-add { position: relative; z-index: 1; flex: none; gap: 4px; height: 28px; min-height: 28px; padding: 0 8px; margin-right: -2px; font: var(--t-control); color: var(--ink-2); }
.plan .bd-day-add::before { content: ''; position: absolute; inset: -9px 0; } /* b1r3 m1: 9 from the 26 padding box is 44; z-index 1 keeps it over the next .adl-row */
.plan .bd-day-add .icon { width: 16px; height: 16px; color: var(--muted); }

/* Add to my calendar rows (the dialog lives on Calendar, events.js): label and value at one size, color alone tells
   them apart (N245) */
.ex-row dt, .ex-row dt label { font: var(--t-meta); color: var(--muted); }

/* Share popover, first state: one line on what the link does, above the toggle row and the primary (N214) */
.sp-lead { margin: 2px 0 4px; font: var(--t-meta); color: var(--ink-2); text-wrap: pretty; }
.sp-lead.is-muted { color: var(--muted); }

/* Add an idea: the system short-form modal (system 9.7; L274) */
#idea-modal { width: min(440px, calc(100vw - 32px)); }
#idea-modal .modal-body { padding-top: var(--s-4); }
#idea-input { display: block; width: 100%; margin-top: 6px; }
@media (pointer: coarse), (max-width: 599px) {
  #idea-modal .modal-foot button, #idea-modal .modal-head .icon-btn { position: relative; }
  #idea-modal .modal-foot button { min-height: 32px; } /* 32 visual, 44 target, as the Export modal */
  #idea-modal .modal-foot button::before { content: ''; position: absolute; inset: -7px 0; }
  #idea-modal .modal-head .icon-btn { width: 28px; height: 28px; min-height: 28px; }
  #idea-modal .modal-head .icon-btn::before { content: ''; position: absolute; inset: -9px; }
}

/* Choose a lecture or a discussion (W3 S3): the same short-form modal, a radio list (system 9.4 rows) */
#choice-modal { width: min(440px, calc(100vw - 32px)); }
#choice-modal .modal-body { padding-top: var(--s-4); }
.choice-lead { margin: 0 0 var(--s-2); font: var(--t-body); color: var(--ink-2); text-wrap: pretty; }
.choice-list { min-width: 0; margin: 0; padding: 0; border: 0; }
#choice-modal .choice-row { display: flex; align-items: flex-start; gap: var(--s-2); padding: var(--s-2) 0; border-top: 1px solid var(--line); cursor: pointer; font-weight: 400; }
#choice-modal .choice-row:last-child { border-bottom: 1px solid var(--line); }
#choice-modal .choice-row input { margin-top: 3px; }
.choice-main { display: flex; flex-direction: column; min-width: 0; }
.choice-label { font: var(--t-body); font-weight: 600; color: var(--ink); }
.choice-sub { font: var(--t-meta); color: var(--muted); }
/* Choose a section (owner walk 6 W16): each lecture a heading, its discussions the radio rows under it; the list
   scrolls inside the sheet and Cancel and Add to plan stay in view */
#choice-modal[open] { display: flex; flex-direction: column; max-height: min(680px, calc(100dvh - 32px)); }
#choice-modal form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
#choice-modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
#choice-modal .modal-foot { border-top: 1px solid var(--line); padding-top: var(--s-4); }
.choice-group { scroll-margin-top: var(--s-2); }
.choice-group + .choice-group { margin-top: var(--s-3); }
.choice-head { display: flex; flex-direction: column; min-width: 0; padding: var(--s-2) 0 var(--s-1); }
#choice-modal .choice-group .choice-row:last-child { border-bottom: 1px solid var(--line); }
#choice-modal .choice-dis { padding-left: var(--s-3); }
#choice-modal .choice-dis .choice-label { font-weight: 500; }
@media (pointer: coarse), (max-width: 599px) {
  #choice-modal .choice-row { min-height: 44px; }
  #choice-modal .modal-foot button { min-height: 44px; }
}

/* Add to my calendar on the toolbar is a link to Calendar's export (owner ruling 23 Oct), drawn as the toolbar's
   bordered button; on touch it gets the same 44 target as Busy hours beside it (sys 9.1) */
.plan-actions > a.btn { margin: 0; white-space: nowrap; }
@media (pointer: coarse), (max-width: 599px) {
  .plan-actions > a.btn { position: relative; min-height: 32px; }
  .plan-actions > a.btn::before { content: ''; position: absolute; inset: -7px 0; }
}
/* the toolbar keeps one line on phones: labels never wrap inside a button, and below 380 Add to my calendar keeps
   its mark only, as Calendar's own button does on phones (its name stays for screen readers and in the tip) */
.plan-actions > button, .plan-actions > a.btn { white-space: nowrap; }
/* with Draft a plan on the toolbar (spec/page-plan-generate.md 3) the phone line holds four buttons, so below 600
   Add to my calendar and Enrollment order keep their marks only from 599 down, not 379 */
@media (max-width: 599px) {
  .plan-actions > #export-btn, .plan-actions > #order-btn { width: 44px; padding: 0; justify-content: center; }
  .plan-add-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.sp-open { display: inline-flex; align-items: center; gap: 4px; font: var(--t-control); }
.sp-open .icon { width: 14px; height: 14px; }

/* Board switcher (critic C2; spec/plan-board-switcher.md). It sits on the title's line, right after the term,
   as Calendly's schedule name (0335) and ChatGPT's model title (0080) carry their menus: one board is a quiet
   chevron, two or more show the shown board's name in the body face beside it. The title block takes the
   free space the h1 used to take, so the toolbar keeps its place. */
.plan-head .plan-title { display: flex; align-items: center; gap: var(--s-1); min-width: 0; margin-right: auto; }
.plan-head .plan-title h1 { margin-right: 0; white-space: nowrap; }
.board-btn { flex-shrink: 1; min-width: 0; margin: 0; }
.board-btn.icon-btn .icon { width: 18px; height: 18px; }
.board-btn.has-name {
  display: inline-flex; align-items: center; gap: var(--s-1); min-height: 32px; padding: 0 var(--s-2);
  border-color: transparent; background: transparent; color: var(--ink-2); font: var(--t-body);
}
.board-btn.has-name:hover, .board-btn[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); }
.board-btn.has-name .icon { flex-shrink: 0; width: 16px; height: 16px; color: var(--muted); }
.board-name { min-width: 0; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-menu { min-width: 220px; max-width: calc(100vw - 16px); }
/* Below 960 the title shares its line with Share only: the board name gives way (ellipsis) before Share wraps. */
@media (max-width: 959px) {
  .plan-head .plan-title { flex: 1 1 0; }
  .plan-head .share-anchor { flex-shrink: 0; }
  .board-name { max-width: none; }
}
.rmenu .mi-radio { justify-content: space-between; gap: var(--s-4); }
.rmenu .mi-radio > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rmenu .mi-radio .icon { flex-shrink: 0; color: var(--ink); }
.rmenu .mi-radio[aria-checked="true"] { font-weight: 500; }
#board-modal { width: min(440px, calc(100vw - 32px)); }
#board-modal .modal-body { padding-top: var(--s-4); }
#board-input { display: block; width: 100%; margin-top: 6px; }
.board-hint { margin: var(--s-2) 0 0; font: var(--t-meta); color: var(--muted); }
@media (max-width: 599px) {
  .board-btn, #board-modal .modal-foot button, #board-modal .modal-head .icon-btn { position: relative; }
  .board-btn.icon-btn { width: 32px; height: 32px; min-height: 32px; }
  .board-btn::before { content: ''; position: absolute; inset: -7px 0; } /* 44 target, 32 visual (from the padding box) */
  .board-btn.icon-btn::before { inset: -7px; }
  #board-modal .modal-foot button { min-height: 32px; }
  #board-modal .modal-foot button::before { content: ''; position: absolute; inset: -7px 0; }
  #board-modal .modal-head .icon-btn::before { content: ''; position: absolute; inset: -9px; }
  .board-menu .menu-item { min-height: 44px; }
}