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

/* Fix rounds 1 and 2 (17 Oct). The base Ask styles are dibs.css section 18; these refine them. */

/* A follow-up sent in this view gets room to sit at the top of the thread, 16 under the header, with
   Thinking... and then its answer filling in below it (L19, L20: the newest turn reads from its question
   down; page-ask 2: nothing hides behind the pinned composer). Without the room the turn landed at the
   page end and its answer arrived behind the composer. 80 = the 48 header + 16 above the turn + the
   log's 16 bottom padding; --ask-dock-h is the measured composer block (ask.js placeToast). */
.ask-turn.is-fresh {
  min-height: calc(100vh - 80px - var(--ask-dock-h, 154px));
  min-height: calc(100dvh - 80px - var(--ask-dock-h, 154px));
}

/* ---------- week strip blocks (page-ask 5; L20: codes never break inside a word) ----------
   A course code stays on one line whenever it fits. Measured at 13/600: LIFESCI 7C 60, ENGCOMP 3 68,
   ETHNMUS M50A 92. A block's text box is about 132 at 1440, 74 at 1280 with the detail pane open (a 496
   strip) and about 60 when two blocks share a column. Subject and number are each unbreakable, so a code
   breaks only at its space, and only when it is wider than the block (ETHNMUS M50A with the pane open);
   cutting it would drop "M50A", the part that names the class. The time line gives way first: it shrinks
   to nothing when the code needs both lines of a 50-minute block. */
.ask-week .wk-block .wk-code { flex-shrink: 0; white-space: normal; }
.ask-week .wk-block .wk-subj, .ask-week .wk-block .wk-no,
.ask-week .wk-block.is-narrow .wk-subj, .ask-week .wk-block.is-narrow .wk-no {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top;
}
.ask-week .wk-block .wk-time { flex: 0 1 auto; min-height: 0; }
.ask-week .wk-block.is-mid:not(.is-short) .wk-time,
.ask-week .wk-block.is-narrow.is-mid:not(.is-short) .wk-time { display: block; }
/* The time line: the range ("9:00-10:15 AM", 70 wide) where it fits, the start alone ("9:00 AM", 39)
   where it would be cut. Blocks sharing a column get the start from ask.js; a discussion sharing its column
   leads with its section ("Dis 1B" over "Clash"), the fact a discussion move is about. */
.ask-week .wk-start { display: none; }
.ask-week .wk-block.is-narrow .wk-start { display: inline; }
/* Overlapping blocks: 4px insets (the repair strip's Thu, Work beside the proposed Dis 1B). Lecture blocks
   keep room for their 3px bar. */
.ask-week .wk-opt.is-narrow, .ask-week .wk-busy.is-narrow { padding-left: 4px; padding-right: 4px; }
/* a discussion's line 2 holds its section and time ("Dis 1A 12:00-12:50 PM", about 112): under a 700 strip
   (1440 with the pane open is 655) it keeps the start alone, "Dis 1A 12:00 PM" */
@container (max-width: 700px) {
  .ask-week .wk-sec ~ .wk-range { display: none; }
  .ask-week .wk-sec ~ .wk-start { display: inline; }
}
@container (max-width: 640px) {
  .ask-week .wk-range { display: none; }
  .ask-week .wk-start { display: inline; }
  /* a discussion's line 2 is its section alone: "Dis 1A 11:00 AM" is 77 wide */
  .ask-week .wk-sec ~ .wk-start { display: none; }
  /* the Plan grid's compact insets (page-plan 12), so ENGCOMP 3 (68) fits a 74 text box */
  .ask-week .wk-block { padding: 2px 4px 2px 7px; }
  .ask-week .wk-block.wk-opt { padding: 1px 4px; }
  .ask-week .wk-block.wk-busy { padding: 2px 4px; }
}

/* ---------- phone day list (page-ask 12) ----------
   A time never breaks onto two lines ("10:00 / AM" with the fallback font, before Source Sans 3 loads).
   Async items come first with "Async" in the time column, where every other item has its time. */
.adl-time { white-space: nowrap; }
.ask-days .adl-async { margin-top: var(--s-1); }

/* ---------- quarter outline (page-ask 10) ----------
   One container, one row per role, every row built the same way: the role as a 13/18 label, then what
   fills it, the shared course row or "Course not chosen" (L20: one consistent row structure in the
   container). The label sits above the course row, never after its title, so the title keeps its width. */
.ask-outline > .ask-role { display: flex; flex-direction: column; padding: var(--s-3) var(--s-4); }
.ask-outline > .ask-role + .ask-role { border-top: 1px solid var(--line); padding-top: 11px; }
.ask-role-label { margin: 0; font: var(--t-label); color: var(--ink-2); }
.ask-outline .ask-role-sub { margin: 2px 0 0; font: var(--t-meta); color: var(--muted); }
/* a filled role is one target: the course row's link covers the label too, and hover, selection and focus
   paint the whole role */
.ask-outline > .ask-role.is-filled { position: relative; padding: var(--s-3) 0 0; }
.ask-outline > .ask-role.is-filled + .ask-role { padding-top: 11px; }
.ask-outline > .ask-role + .ask-role.is-filled { padding-top: 11px; }
.ask-outline > .ask-role.is-filled > .ask-role-label { padding: 0 var(--s-4); }
.ask-outline > .ask-role.is-filled > .crow { position: static; padding-top: 2px; background: transparent; }
.ask-outline > .ask-role.is-filled:hover { background: var(--bg); }
.ask-outline > .ask-role.is-filled:has(.crow.is-selected) { background: var(--surface-2); }
.ask-outline > .ask-role.is-filled:has(.crow-main:focus-visible) { box-shadow: inset 0 0 0 2px var(--focus); }
.ask-outline > .ask-role.is-filled .crow:has(.crow-main:focus-visible) { box-shadow: none; }
/* the inline add row (L250: the input on top, nothing else in the row; Enter adds, Escape cancels) */
.ask-role-add input { display: block; width: 100%; margin-top: var(--s-1); }

/* ---------- empty thread, phones (page-ask 8, 12; N21 rows read whole) ----------
   Suggested and Recent rows wrap to a second line rather than cut the question: at 320 "What would a B in
   LIFESCI 7C do to my GPA?" lost "GPA", the word that says what it asks. 44 tall for one line. */
@media (max-width: 599px) {
  .ask-li { height: auto; min-height: 44px; padding-top: 11px; padding-bottom: 11px; align-items: flex-start; }
  .ask-li-icon { margin-top: 3px; }
  .ask-li-text { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
}

/* ---------- History menu on touch (page-ask 11, 12; RUBRIC 44 targets through padding) ----------
   Rows are 44 tall, and the row's Pin and "..." stay shown, since a touch has no hover to reveal them.
   Their 28 icons get 44 hit areas (8 around each), 16 apart so the areas do not overlap. */
@media (pointer: coarse), (max-width: 599px) {
  .ask-hi-link { min-height: 44px; }
  .ask-hi-link, .ask-hi:hover .ask-hi-link, .ask-hi:focus-within .ask-hi-link { padding-right: 88px; }
  .ask-hi-act, .ask-hi:hover .ask-hi-act, .ask-hi:focus-within .ask-hi-act { display: flex; gap: var(--s-4); top: 8px; right: 6px; background: transparent; }
  .ask-hi-act .icon-btn { position: relative; }
  .ask-hi-act .icon-btn::before { content: ''; position: absolute; inset: -8px; }
  .ask-hist-filter input { height: 44px; min-height: 44px; }
}

/* ---------- answer cards from Rails (proto-on-rails W7 S4) ----------
   On Rails an answer arrives as server HTML (answer_html) in these classes; the four sample answers above
   never use most of them. One card is one .ask-panel: a head (title line with at most one state badge,
   one meta line), its rows, then .ask-foot. Folds are one shape, .ask-more. Preview: #ask?review=answers. */
.ask-panel + .ask-panel, .ask-panel + .ask-more, .ask-more + .ask-panel, .ask-answer > .ask-more, .ask-answer > .ask-planning { margin-top: var(--s-3); }
/* a Rails card always has its head; the sample GPA panel above (no head) keeps its own insets */
.ask-panel:has(> .ask-panel-head) { padding: var(--s-3) var(--s-4); }
.ask-panel-head { margin: 0 0 var(--s-2); }
.ask-panel-line { display: flex; align-items: center; gap: var(--s-2); margin: 0; min-width: 0; }
.ask-panel-title { min-width: 0; margin: 0; font: var(--t-item); color: var(--ink); overflow-wrap: anywhere; }
.ask-panel-status { flex-shrink: 0; margin-left: auto; }
.ask-panel-meta { margin: 2px 0 0; font: var(--t-meta); color: var(--muted); }
.ask-panel-head + .ask-verdict { margin-top: 0; }
.ask-panel-head ~ .ask-props { margin-top: var(--s-1); }
.ask-panel-head ~ .clist { margin-left: calc(-1 * var(--s-4)); margin-right: calc(-1 * var(--s-4)); border-left: 0; border-right: 0; border-radius: 0; }
.ask-panel-head ~ .ask-week { margin-top: var(--s-2); }
.ask-h { margin: var(--s-4) 0 0; font: var(--t-item); color: var(--ink); }
.ask-ol { counter-reset: ask-ol; }
.ask-ol li { counter-increment: ask-ol; }
.ask-ol li::before { content: counter(ask-ol) '.'; top: 0; left: 0; width: auto; height: auto; border-radius: 0; background: none; color: var(--muted); font: var(--t-label); line-height: inherit; }
.ask-code { padding: 0 4px; border-radius: 4px; background: var(--surface-2); font: 600 13px/20px var(--font-ui); font-variant-numeric: tabular-nums; }
.ask-pre { margin: var(--s-3) 0 0; padding: var(--s-2) var(--s-3); border-radius: var(--r-control); background: var(--surface-2); font: var(--t-meta); white-space: pre-wrap; overflow-wrap: anywhere; }
.ask-quote { margin: var(--s-2) 0 0; padding-left: var(--s-3); border-left: 2px solid var(--line); color: var(--ink-2); }

/* one fold: the summary is a 44 tall row with a chevron; the body sits under it */
.ask-more { margin-top: var(--s-2); }
.ask-more-sum {
  display: flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0; list-style: none; cursor: pointer;
  font: var(--t-label); color: var(--ink-2);
}
.ask-more-sum::-webkit-details-marker { display: none; }
.ask-more-sum::before {
  content: ''; flex-shrink: 0; width: 6px; height: 6px; margin: 0 3px 0 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--dm-popover-ms, 368ms) var(--dm-popover-ease, linear);
}
.ask-more[open] > .ask-more-sum::before { transform: rotate(45deg); }
.ask-more-sum:hover { color: var(--ink); }
.ask-more-sum:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.ask-more-body { padding: 0 0 var(--s-2) 16px; }
.ask-more-body > :first-child { margin-top: 0; }
.ask-panel-head ~ .ask-more { border-top: 1px solid var(--line); margin-top: var(--s-3); }
.ask-panel-head ~ .ask-more:last-child { margin-bottom: calc(-1 * var(--s-1)); }

/* tables: their own scroll region, never the page (RUBRIC 12: no horizontal page scroll at 390) */
.ask-table { margin-top: var(--s-3); padding: 0; overflow-x: auto; }
.ask-table:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ask-tbl { width: 100%; border-collapse: collapse; font: var(--t-meta); color: var(--ink); font-variant-numeric: tabular-nums; }
.ask-tbl.is-wide { min-width: 520px; }
.ask-tbl th, .ask-tbl td { padding: 7px var(--s-3); text-align: left; vertical-align: top; border-top: 1px solid var(--line); }
.ask-tbl thead th { border-top: 0; font: var(--t-label); color: var(--muted); }
.ask-tbl tbody th { font-weight: 600; white-space: nowrap; }
.ask-tbl tr.t-muted th, .ask-tbl tr.t-muted td { color: var(--muted); }
.ask-cell-note { display: block; margin-top: 2px; color: var(--muted); }

/* the tools line under an answer (jump links) and the hand-off */
.ask-tools { display: flex; flex-wrap: wrap; align-items: center; column-gap: var(--s-1); row-gap: 0; font: var(--t-label); color: var(--muted); }
.ask-tools .text-btn { min-height: 32px; }
.ask-handoff { margin-top: var(--s-3); }

/* course results: the courseRow list inside a panel, the fit line once a week was checked */
.ask-results .ask-foot { margin-bottom: var(--s-1); }
.crow.has-fit { grid-template-rows: auto auto auto auto; }
.ask-seat-read { white-space: nowrap; }

/* the week inside a panel; a week the reader's plan has changed since is said in the head */
.ask-week[data-ask-week-stale] .wk { opacity: .72; }
.ask-alt .ask-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r-pill); background: var(--surface-2); font: var(--t-label); }

/* proposal, selection, repairs, outline */
.ask-picks { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--s-4); row-gap: var(--s-1); margin: var(--s-2) 0 0; font: var(--t-body); }
.ask-picks dt { font-weight: 600; color: var(--ink); white-space: nowrap; }
.ask-picks dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.ask-selection select, .ask-repairs select { max-width: 100%; }
.ask-selection fieldset { min-width: 0; margin: var(--s-2) 0 0; padding: 0; border: 0; }
.ask-selection legend { padding: 0; font: var(--t-label); color: var(--muted); }
.ask-repairs .adl { margin-top: var(--s-2); }
.ask-planning > * + * { margin-top: var(--s-3); }
.ask-superseded .badge { margin-right: var(--s-1); }
.ask-superseded fieldset { min-width: 0; margin: 0; padding: 0; border: 0; opacity: .72; }

/* dates: the published calendar rows, passed dates quiet */
.ask-dates { margin-top: var(--s-2); }
.ask-dates .adl-row { height: auto; min-height: 44px; padding-block: var(--s-2); flex-wrap: wrap; row-gap: var(--s-1); }
.ask-dates .adl-code { flex: 1 1 14ch; min-width: 0; white-space: normal; overflow-wrap: anywhere; }
.ask-dates .adl-row .badge { margin-left: auto; flex: none; }
.ask-dates .adl-row[data-deadline-state="passed"] { opacity: .64; }
.ask-dates .adl-row[data-deadline-state="next"]::before { background: var(--accent); }

/* schools side by side where they fit, stacked on a phone */
.ask-school-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s-3); margin-top: var(--s-2); }
.ask-schools > .ask-school + .ask-school { margin-top: var(--s-3); }
.ask-school { min-width: 0; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-control); }
.ask-school-name, .ask-school h4 { margin: 0; font: var(--t-item); color: var(--ink); }
.ask-school .ask-props { grid-template-columns: 96px minmax(0, 1fr); }
.ask-school .ask-props dt, .ask-school .ask-props dd { align-items: flex-start; min-height: 0; padding: 4px 0; }
.ask-school .ask-props dd p { margin: 0; }

/* the audit trace and diagrams: a path of nodes joined by a hairline */
.ask-audit { margin-top: var(--s-2); }
.ask-diagram-node { margin-top: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-control); }
.ask-diagram-node-heading { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); font: var(--t-body); color: var(--ink); }
.ask-diagram-status { font: var(--t-label); color: var(--muted); }
.ask-diagram-node[data-diagram-state="met"] > .ask-diagram-node-heading .ask-diagram-status { color: var(--positive); }
.ask-diagram-node[data-diagram-state="blocked"] > .ask-diagram-node-heading .ask-diagram-status { color: var(--danger); }
.ask-diagram-node[data-diagram-state="unknown"] > .ask-diagram-node-heading .ask-diagram-status,
.ask-diagram-node[data-diagram-state="review"] > .ask-diagram-node-heading .ask-diagram-status { color: var(--warning); }
.ask-diagram-node-detail { margin: 2px 0 0; font: var(--t-meta); color: var(--muted); }
.ask-diagram-children { margin-left: var(--s-3); padding-left: var(--s-3); border-left: 1px solid var(--line); }
.ask-diagram-edge { display: block; height: var(--s-1); }
.ask-diagram-root-flat { padding: 0; border: 0; }

/* assignment reports: one row per course */
.ask-work-row + .ask-work-row { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.ask-work-row .crow-l1 { margin: 0; }
.ask-work-row .ask-bullets li.is-focus { color: var(--warning); }

/* add audit context: label over a full-width box */
.ask-excerpt .field-label { display: block; margin-top: var(--s-3); font: var(--t-label); color: var(--ink-2); }
.ask-excerpt textarea { display: block; width: 100%; margin-top: var(--s-1); }
.ask-excerpt .check { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; font: var(--t-meta); color: var(--ink); }

/* the sources fold: the old source lists keep their structure in quiet type */
.ask-sources-fold { margin-top: var(--s-3); }
.ask-source-row, .ask-source-group { margin-top: var(--s-2); }
.ask-source-summary { min-height: 32px; font: var(--t-label); color: var(--ink-2); cursor: pointer; }
.ask-source-heading, .ask-source-group-title { margin: var(--s-2) 0 0; font: var(--t-label); color: var(--ink); }
.ask-source-list, .ask-source-checks { list-style: none; margin: var(--s-1) 0 0; padding: 0; }
.ask-source-list > li + li, .ask-source-checks > li + li { margin-top: var(--s-2); }
.ask-source-name, .ask-source-label, .ask-source-check-name { font: var(--t-meta); font-weight: 600; color: var(--ink); }
.ask-source-note, .ask-source-meta, .ask-source-lede, .ask-source-reading, .ask-source-group-note, .ask-source-check-notes, .ask-source-check-state,
.ask-sources .text-muted, .ask-sources .text-xs { margin: 2px 0 0; font: var(--t-meta); color: var(--muted); }
.ask-sources .text-stop { color: var(--danger); }
.ask-sources a, .ask-source-link { color: var(--accent); }

/* the error line keeps its old hook class */
.ask-error-line.text-stop { color: var(--danger); }

@media (max-width: 599px) {
  .ask-panel:has(> .ask-panel-head) { padding: var(--s-3); }
  .ask-panel-head ~ .clist { margin-left: calc(-1 * var(--s-3)); margin-right: calc(-1 * var(--s-3)); }
  .ask-picks { grid-template-columns: minmax(0, 1fr); }
  .ask-picks dd { margin-bottom: var(--s-1); }
}

/* ---------- an earlier chat is read only until Continue (owner Q4; proto-on-rails W7 S5) ---------- */
/* The bar takes the composer's place and size, so the thread does not move when a reader continues it. */
.ask-readonly { display: flex; align-items: center; gap: var(--s-3); min-height: 96px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-panel); padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4); }
.ask-readonly-say { flex: 1; margin: 0; display: flex; align-items: flex-start; gap: var(--s-2); font: var(--t-body); color: var(--ink-2); }
.ask-readonly-say .icon { flex: none; margin-top: 2px; color: var(--muted); }
.ask-readonly .primary { flex: none; }
@media (max-width: 560px) { .ask-readonly { flex-direction: column; align-items: stretch; } .ask-readonly .primary { width: 100%; } }
#ask-modal.confirm-modal .pc-text + .pc-text { margin-top: var(--s-2); }

/* ---------- which purchased request a question uses (R21, 1 Nov; ask.js offerHTML) ---------- */
/* One line above the box: "Use" as a 13/18 label, then the request. One choice is named; two or more are the Use menu
   (select.js), whose group heads say what each kind covers. The line sits on the column, outside the composer, so the
   box and Send keep their size and place. */
.ask-offer { display: flex; align-items: center; gap: var(--s-2); min-width: 0; margin: 0 0 var(--s-2); font: var(--t-meta); color: var(--ink-2); }
.ask-offer-k { flex: none; font: var(--t-label); color: var(--muted); }
p.ask-offer { align-items: baseline; } /* the named request may wrap to two lines on a phone; "Use" stays on its first */
.ask-offer-v { min-width: 0; }
.ask-offer-v strong { font-weight: 500; color: var(--ink); }
.ask-offer :is(select, :where(.csel)) { flex: 0 1 auto; width: auto; min-width: 0; }
/* R22 L1: the Use menu is a grid, "Use" then the trigger, and what the pick covers on a second line under the trigger.
   The trigger wraps the request's label (two lines at 390 and 320) instead of cutting it with an ellipsis. */
div.ask-offer { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--s-2); row-gap: var(--s-1); }
div.ask-offer :is(select, :where(.csel)) { justify-self: start; max-width: 100%; }
.ask-offer button.csel { white-space: normal; height: auto; }
.ask-offer :is(.csel-value, .csel-sizer) { white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
.ask-offer-c { grid-column: 2; min-width: 0; color: var(--muted); }
/* the open Use menu (select.js names it after the label, aria-label "Use") wraps its rows at 320 the same way */
.csel-menu[aria-label="Use"] :is(.csel-opt, .csel-group-l) { white-space: normal; }
.csel-menu[aria-label="Use"] .csel-opt-l { overflow-wrap: anywhere; text-overflow: clip; padding-block: 6px; }
/* the new chat's verdict let no question through: its sentence, with the info glyph on the first line */
p.ask-offer-say { align-items: flex-start; }
.ask-offer-say .icon { flex: none; margin-top: 2px; color: var(--muted); }
.ask-empty .ask-offer { margin-top: var(--s-3); }
.ask-empty .ask-offer + .ask-composer { margin-top: 0; }