/* Saints in class (lane S; public/app/saints-class.js). Its own file, like journal-gifts.css, so the sprint's lanes don't
   all edit app.css. The tables reuse the Gifts of Others roster (.co-roster.gift-table): one design for Student Activity
   (Tim, Oct 12: "we shouldnt have different designs on each of them"). */

/* Her Saint in the New assignment window: compact chips under the question (the creator pass, Oct 18, after Tim's "have we
   given it to assignment builder so there is a good intuitive UX for doing the creation?"), blue when chosen as the
   window's other choices are; one or two rows at 1280, wrapping at 375. The radio stays inside its chip (relative), so
   focusing it never scrolls the window sideways. */
#dialog .sc-picks{display:flex;flex-wrap:wrap;gap:6px;border:0;padding:0;margin:0 0 14px}
#dialog .sc-pick{position:relative;display:inline-flex;align-items:center;gap:6px;margin:0;padding:3px 12px 3px 3px;border:1px solid var(--line);border-radius:999px;background:#fff;cursor:pointer;font-size:13px;line-height:1.2;transition:border-color .15s,background .15s}
#dialog .sc-pick input{position:absolute;inset:0;opacity:0;width:1px;height:1px;margin:0}
#dialog .sc-pick:has(input:checked){border-color:var(--blueink);background:var(--blue);color:#2f5360}
#dialog .sc-pick:has(input:focus-visible){outline:2px solid var(--blueink);outline-offset:2px}
#dialog .sc-pick .sc-portrait{width:24px;height:24px}
/* The count-off and choice marks take a portrait's place, so every label starts at the same x. */
.sc-dice{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:#f5eedc;color:#826a30;font:600 11px/1.15 Arial,sans-serif;text-align:center}
#dialog .sc-pick .sc-dice{width:24px;height:24px;font-size:7px}
#dialog .sc-pick .sc-dice svg{width:14px;height:14px}
/* "+ Add a reading", then the reading and passage once she wants them. */
#dialog .sc-reading-open{display:block;margin:0 0 14px;font-size:13px}

/* Square whatever page it's on: the student pages' img{height:auto} stretched it into an oval. */
.sc-portrait{flex:none;border-radius:50%;object-fit:cover;background:#f5eedc;aspect-ratio:1/1;height:auto}
/* Her Saint is a quiet line, not a button (Tim, Oct 20: "way too bold of font ... im not sure it needs to be in its own
   shape that feels like a cTA, it competes withn our other CTAs"): a 32px portrait and regular-weight words. */
.sc-ask .sc-portrait{width:32px}.sc-table .sc-portrait{width:22px}

/* Student Activity → Saints (Tim, Oct 18: "the headline is cumulative/average for the student and the stuff under it is
   an organized history with the same columns, so it all feels neat"). Her headline and her history are rows of one table,
   so every value sits under its header. Fits a portrait iPad as lane AE's teacher tables do (tables-fit, Oct 18): fixed
   layout, the small columns compact and fixed, Student takes the rest (min-width: 522 fixed + 200 = 722 of the 730px a
   768px screen gives a table); a long "on what" ends in "…" with the whole title on hover. Narrower, it scrolls.
   Widths measured in the browser with 10px side padding on the small columns, as lane AE's: the widest Saint in a history
   row ("Mother Teresa") 118px, "under 1 min" 75px in a headline's 14px, a Last 140px; 488 fixed + 240 for names = 728. */
.sc-table{table-layout:fixed;min-width:728px}
.sc-table :is(th,td):not(:first-child){padding-left:10px;padding-right:10px}
.sc-table .sc-col-saints{width:140px}.sc-table .sc-col-n{width:88px}.sc-table .sc-col-time{width:100px}.sc-table .sc-col-last{width:160px}
.sc-table :is(th,td){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-table td.sc-saints{white-space:normal}
.sc-chip{display:inline-flex;align-items:center;gap:2px;margin-right:6px;vertical-align:middle}
.sc-chip small{color:var(--muted);font-size:12px}
/* Caret, name and tag on one line; the caret's place is kept on every row so names and "on what" share an x. */
.sc-cell{display:flex;align-items:center;gap:8px;min-width:0}
.sc-caret{flex:none;width:12px;color:#8a908a;text-align:center}
.sc-toggle{display:flex;align-items:center;gap:8px;min-width:0;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:left}
.sc-name,.sc-on{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Her takeaway's mark: Ask a Saint's question bubble on its gold disc, drawn as the type pill draws it (assign-window.css
   .type-icon: 18px disc, the kind's fill and ink, a faint ring of the ink), so Shelly reads it as that assignment. Centered
   on her name (house rule: tags beside a title center on it). */
.sc-tag{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:999px;background:#ead9a6;color:#4f3f12;box-shadow:inset 0 0 0 1px color-mix(in srgb,#4f3f12 28%,transparent)}
.sc-tag svg{width:12px;height:12px}
/* Her history: the same columns, quieter than her headline. */
.sc-past :is(td){color:var(--muted);font-size:13px;border-top:0}
.sc-past .sc-on{color:var(--ink)}
.sc-who{display:inline-flex;align-items:center;gap:8px;min-width:0}
.sc-take-row td{border-top:0;padding-top:0}
.sc-takeaway{min-width:0;margin:0;padding:6px 12px;border-left:3px solid var(--gold);background:#faf7ef;font-style:italic;white-space:normal}
.sc-takeaway .link{margin-left:10px;font-style:normal}

/* The girl's card. */
.sc-ask{display:grid;gap:10px;margin:12px 0}
.sc-ask .sc-who strong{font-size:14.5px;font-weight:500;color:#3f4a42}
.sc-ask .task-instructions{margin:0}
.sc-passage-quote{margin:0 0 12px;padding:8px 14px;border-left:3px solid var(--gold);color:var(--muted);font-style:italic}
.sc-go{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:14px 0 6px}
.sc-share{display:grid;gap:6px;margin:16px 0 4px}
.sc-share label{font-size:14px;font-weight:600}
.sc-share-row{display:flex;gap:8px}
.sc-share-row input{flex:1;min-width:0;padding:8px 12px;border:1px solid var(--line);border-radius:10px;font:inherit}
.sc-privacy{margin:12px 0 0;color:var(--muted);font-size:13px}
.sc-sent{display:flex;gap:6px;align-items:baseline;color:var(--muted);font-size:14px}
#dialog .sc-share{margin:14px 0 6px}
/* Her two actions, "Ask St. Angela →" on the card and "Send to Ms. Pence" under the answers, are the app's primary button
   (.btn.primary, as "Send ↑" in the same window). They were the shared kit's button, which the student pages draw as the
   classic uppercase Times CTA (student.css .site-shell [data-slot=button]), unlike every other button there (APO, Oct 18).
   .btn never wraps, and "Continue with Mother Teresa →" is wider than a phone's card.
   At .85rem, the size of "Send ↑" (app.css .saint-composer-actions) and of "Continue →" on her home card: the .btn's own
   16px stood 48px tall beside the 44px "Send ↑" (measured at 375, Oct 18). */
.sc-go .btn{white-space:normal;max-width:100%;text-align:left}
.sc-go .btn,.sc-deliver .btn{font-size:.85rem}

/* Ask a Saint's deliverable (Tim, Oct 18): a star under each of the Saint's answers in her assignment's conversation,
   gold once starred; under the answers, what's left or "What did you learn?". */
.sc-star{display:inline-flex;align-items:center;gap:6px;margin:6px 0 0;padding:3px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font:500 13px/1.6 Arial,sans-serif;cursor:pointer}
.sc-star span{font-size:15px;line-height:1}
.sc-star.is-on{border-color:#cabb92;background:#f5eedc;color:#826a30}
.sc-star:focus-visible{outline:2px solid #826a30;outline-offset:2px}
/* Tight (Tim, Oct 20: "a ton of extra whitespace under my 'send to ms pence' area"): before she writes, the always-present
   box was an empty three-line field, an 8px gap and 14px padding, 196px of mostly white; now two lines that grow as she
   writes where the browser can (field-sizing; elsewhere she drags it taller), and less padding. */
.sc-deliver{display:grid;gap:6px;margin:16px 0 6px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:#fff}
.sc-deliver label{font-weight:600;font-size:14px}
.sc-deliver textarea{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:inherit;resize:vertical;field-sizing:content;min-height:3.6em;max-height:14em}
.sc-deliver-row{display:flex;justify-content:flex-end}
.sc-todo{margin:10px 0 0;color:var(--muted)}
.sc-deliver .sc-todo{margin:0}
.sc-learned{margin:0}
/* The Saint each girl is dealt, on her teacher's card: a plain portrait in its place (lane AE, Oct 19). */
.sc-anon{display:inline-block;width:32px;height:32px;border-radius:50%;background:#e7e5df}

/* Ask a Saint opened from her assignment (saints-class.js assignmentFrame; Tim, Oct 20: "does not really feel like it
   functions as an assignment"): the banner her card has, her Saint, and the three steps, numbered until each is done,
   then a green tick (the house "done" green), the step's words quieter. */
.sc-frame{margin:0 0 14px}
.sc-frame .sc-who{display:flex;align-items:center;gap:10px;margin:12px 0 0}
.sc-frame .sc-portrait{width:40px}
.sc-steps{list-style:none;counter-reset:sc-step;display:grid;gap:7px;margin:14px 0 0;padding:0}
.sc-steps li{counter-increment:sc-step;display:flex;align-items:center;gap:10px;font-size:14.5px;line-height:1.35}
.sc-step-mark{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid #cabb92;color:#826a30;font:600 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.sc-step-mark:empty::before{content:counter(sc-step)}
.sc-steps li.is-done{color:var(--muted)}
.sc-steps li.is-done .sc-step-mark{background:var(--completion-green,#326548);border-color:var(--completion-green,#326548);color:#fff}
/* Sent: her hand-in, said plainly in the done green, with when. */
.sc-deliver.is-sent{border-color:#bcd3c3;background:#f4f8f5}
.sc-deliver .sc-sent{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;color:var(--completion-green,#326548);font-size:15px}
.sc-deliver .sc-sent time{margin-left:auto;color:var(--muted);font-size:12.5px}
.sc-deliver>.link{justify-self:start}
/* The three sections under the list (Tim, Oct 20: "1 2 3 steps that kind of feel like sections"): a numbered heading
   that ticks like the list, a rule between them, the conversation and its own box in section 1, apart from what she
   hands in (sections 2 and 3). The steps' marks are drawn with their number (or a tick), not a counter. */
.sc-step-mark:empty::before{content:none}
.sc-sec{margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
/* #dialog: the student pages draw dialog headings in their serif; these are labels, in the interface face. */
#dialog .sc-sec .sc-sec-head{display:flex;align-items:center;gap:10px;margin:0 0 12px;font:600 15px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)}
#dialog .sc-sec.is-done .sc-sec-head{color:var(--muted)}
.sc-sec.is-done .sc-sec-head .sc-step-mark{background:var(--completion-green,#326548);border-color:var(--completion-green,#326548);color:#fff}
.sc-sec .saint-composer-actions{margin-bottom:0}
.sc-hint{margin:0;color:var(--muted);font-size:14px}
.sc-highlight{margin:0;padding:10px 14px;border-left:3px solid var(--gold);background:#faf7ef;font:italic 15px/1.55 Georgia,serif;color:#3a423a}
.sc-highlight span{display:block;margin-top:6px;font:400 12.5px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--muted)}
.sc-sec .sc-deliver{margin:0}
/* Her highlight (Tim, Oct 20: "hovering to choose a specific sentence that is said"): pointing at an answer lights one
   sentence at a time in the pale gold; the chosen one stays in the gold of the Ask a Saint type. */
.saint-answer .saint-sentence{border-radius:4px;cursor:pointer;transition:background .12s;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.saint-answer .saint-sentence:hover,.saint-answer .saint-sentence:focus-visible{background:#f7f0dc;outline:none}
/* Chosen reads apart from pointed-at (seen at 375, Oct 20: the two golds looked alike): darker, and underlined in gold. */
.saint-answer .saint-sentence.is-on{background:#ead9a6;color:#3b2f0d;text-decoration:underline 2px #a8893f;text-underline-offset:3px}
/* Section 1 as a phone's screen inside the card (Tim, Oct 20 ~3:05 PM: "its own contained space (ok if it is a bit
   tighter, like its on a pphone screen that is inside this card)"): a rounded frame, its messages scrolling inside it
   (newest exchange shown from its start, saints-class.js phoneToLatest), its box pinned below them, the type a step
   smaller, so the highlight and what she tells her teacher (sections 2 and 3) read as the card's main event. */
.sc-phone{max-width:430px;margin:0 auto;border:1px solid #d6d2c6;border-radius:24px;background:#fbfaf6;box-shadow:0 10px 24px -18px #3a423a80;overflow:hidden}
/* Its scroll hands on to the window at either end (Tim, Oct 20 ~7:1x PM: "when I am scrolling down, and my mouse is inside
   the AI conversation, I hit a limit and it wont let me go down"): overscroll-behavior:contain had trapped the wheel,
   trackpad and touch in it. And it is short enough that section 2's heading shows under the phone on a 1280x800 laptop
   (the window's body there is 528px: phone 300 + compose 112 + section 2's top 70 = 482). */
.sc-phone-log{position:relative;max-height:min(36vh,300px);overflow-y:auto;padding:12px 12px 6px}
.sc-phone-compose{padding:8px 12px 10px;border-top:1px solid #e8e4d8;background:#fff}
.sc-phone .saint-question{font-size:14px;padding:.55rem .8rem;border-radius:14px}
.sc-phone .saint-answer p{font-size:14px;line-height:1.55;padding:9px 13px}
.sc-phone .saint-turn{margin-bottom:10px}
.sc-phone .saint-sources,.sc-phone .saint-passage{font-size:12px}
.sc-phone #saint-question{font-size:14px;min-height:0;height:4.2em;border-radius:14px}
.sc-phone .saint-composer-actions{margin:.45rem 0 0}
.sc-phone #saint-voice-status:empty{display:none}
/* The × pinned and easy to find (Shelly, Oct 20, on a girl's Ask a Saint: "the x should be pinned. it's easy to get
   lost"). The window itself was a scroll container a few px taller than its box, so once its body reached the end the
   scroll carried on into the window and its head, with the ×, slid away; and the × was 8×20px of 12px gray. Now only the
   body scrolls (a column: head fixed, body flexes), and the × is a 36px round button at the head's top right. */
/* clip, not just hidden: a hidden box can still be scrolled by script (scrollIntoView), which slid the head away too. The
   body is the positioning frame, so screen-reader-only labels deep in it (position:absolute) stop stretching the
   window's own scroll area (measured at 375: 799px of scroll in a 642px window). */
#dialog.saints-dialog[open]{display:flex;flex-direction:column;overflow:hidden;overflow:clip}
#dialog.saints-dialog .dialog-head{flex:none;align-items:center}
#dialog.saints-dialog .dialog-body{flex:1 1 auto;min-height:0;position:relative}
#dialog.saints-dialog .dialog-head [data-action="close"]{flex:none;display:grid;place-items:center;width:36px;height:36px;margin:-4px -6px -4px 0;padding:0;border:0;border-radius:50%;background:#f1efe8;color:#3a423a;font:400 22px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer}
#dialog.saints-dialog .dialog-head [data-action="close"]:hover{background:#e6e2d6}
#dialog.saints-dialog .dialog-head [data-action="close"]:focus-visible{outline:2px solid #826a30;outline-offset:2px}

/* Draft with a Saint (saints-class.js draftPanel), in her own reading's window: a quiet panel above her title, open
   while her reading is empty, its four Saints in a row, its waiting bubble the conversation's (app.css .saint-dots). */
#dialog .sd-panel{margin:0 0 16px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fbfaf6}
#dialog .sd-panel summary{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:600;color:var(--ink)}
#dialog .sd-panel[open] summary{margin-bottom:10px}
#dialog .sd-panel label[for=sd-prompt]{display:block;margin:0 0 6px;font-size:14px;font-weight:600}
/* What she's making (lane TG #5): four pills in a row above her request, the chosen one in the Saints' gold. */
#dialog .sd-kinds{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0;border:0}
#dialog .sd-kind{position:relative;display:inline-flex}
#dialog .sd-kind input{position:absolute;opacity:0;pointer-events:none}
#dialog .sd-kind span{padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13.5px;line-height:1.3;cursor:pointer}
#dialog .sd-kind input:checked+span{border-color:#b19a61;background:#f5ecd2;color:#5b4a20;font-weight:600}
#dialog .sd-kind input:focus-visible+span{outline:2px solid #b19a61;outline-offset:2px}
#dialog .sd-panel textarea{width:100%;box-sizing:border-box}
#dialog .sd-saints{grid-template-columns:repeat(4,1fr);margin:10px 0}
#dialog .sd-saints .sc-pick{padding:6px 10px}
#dialog .sd-saints .sc-pick .sc-portrait{width:32px;height:32px}
#dialog .sd-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
#dialog .sd-length{display:flex;align-items:center;gap:8px;margin:0;font-size:14px}
#dialog .sd-length select{width:auto}
#dialog .sd-wait{margin:10px 0 0}
#dialog .sd-note{margin:8px 0 0;color:var(--muted);font-size:12.5px;line-height:1.35}
@media(max-width:480px){#dialog .sd-saints{grid-template-columns:1fr 1fr}}