/* School — Learn's own place (server/web/pages/school.js, school-due.js).
   Drawn from the theme's variables like every page; the one colour of its own
   a row carries is its course's. The phone's twin is
   components/pages/SchoolPage.tsx + components/school/. */
/* Red and accent as TEXT: mixed toward the ink, so small words read on the surface in both modes
   (the theme's own red is tuned for fills and borders, 3:1 against the page). */
.sch-page, .sch-sheet, .sch-due {
  --sch-danger: color-mix(in srgb, var(--danger) 52%, var(--ink));
  --sch-accent: color-mix(in srgb, var(--accent) 52%, var(--ink));
}
.sch-page { display: flex; flex-direction: column; gap: 12px; max-width: 640px; margin: 0 auto; }
.screen-scroll > .inner.sch-page { padding-top: calc(52px + env(safe-area-inset-top)); padding-bottom: 48px; }
.sch-page .grow, .sch-sheet .grow, .sch-due .grow { flex: 1; min-width: 0; }
.sch-head { display: flex; align-items: center; gap: 8px; }
.sch-title { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.6px; color: var(--ink); font-family: var(--font-display, inherit); }
.sch-ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 36; flex: none; }
.sch-ic.small { width: 15px; height: 15px; }
.sch-ic.big { width: 32px; height: 32px; color: var(--accent); }
.sch-ic.bad { color: var(--sch-danger); }
.sch-ic.good { color: var(--success); }
.sch-iconbtn { width: 40px; height: 40px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.sch-add { height: 40px; border-radius: 20px; border: 0; background: var(--accent); color: var(--on-accent); padding: 0 16px 0 11px; display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; cursor: pointer; flex: none; }
.sch-iconbtn:hover, .sch-add:hover, .sch-btn:hover, .sch-chip:hover { filter: brightness(0.97); }
.sch-page button:focus-visible, .sch-sheet button:focus-visible, .sch-sheet a:focus-visible, .sch-due button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.sch-btn { min-height: 44px; border-radius: 13px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; }
.sch-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.sch-btn.quiet { border-color: transparent; background: transparent; color: var(--ink-muted); }
.sch-btn.danger { color: var(--sch-danger); }
.sch-btn.wide { align-self: stretch; }
.sch-btn:disabled, .sch-tick:disabled, .sch-step:disabled { opacity: 0.5; cursor: default; }
.sch-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sch-chip { min-height: 36px; border-radius: 18px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); padding: 0 13px; display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sch-chip.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.sch-chip .sch-ic { width: 14px; height: 14px; }
.sch-chip-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

.sch-card { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 14px; display: flex; flex-direction: column; gap: 8px; text-align: left; font: inherit; color: var(--ink); }
button.sch-card { cursor: pointer; }
.sch-banner { flex-direction: row; align-items: center; gap: 10px; border-color: var(--danger); font-size: 13.5px; line-height: 19px; }
.sch-empty { align-items: center; padding: 26px 16px; gap: 10px; }
.sch-empty-title { font-size: 18px; font-weight: 800; text-align: center; }
.sch-quiet { font-size: 13.5px; line-height: 19px; color: var(--ink-muted); }
.sch-quiet.center { text-align: center; max-width: 420px; }
.sch-quiet.pad { padding: 14px 0; }
.sch-quiet.bad, .sch-error { color: var(--sch-danger); }
.sch-error { font-size: 13.5px; line-height: 19px; }
.sch-said { font-size: 13.5px; line-height: 19px; color: var(--ink); }
.sch-now { background: var(--accent-soft); border-color: var(--accent); gap: 6px; }
.sch-now.late { border-color: var(--danger); }
.sch-now-head { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: 1px; color: var(--sch-accent); }
.sch-now.late .sch-now-head { color: var(--sch-danger); }
.sch-now-head .sch-ic { width: 15px; height: 15px; }
.sch-now-line { font-size: 15.5px; line-height: 21px; font-weight: 600; }

.sch-group { display: flex; flex-direction: column; gap: 6px; }
.sch-section { display: flex; align-items: center; gap: 6px; margin-top: 4px; min-height: 24px; font-size: 11.5px; font-weight: 800; letter-spacing: 1px; color: var(--ink-muted); }
.sch-section.late { color: var(--sch-danger); }
.sch-count { font-size: 12px; font-weight: 700; letter-spacing: 0; flex: 1; text-align: left; }
button.sch-toggle { min-height: 44px; width: 100%; background: none; border: 0; padding: 0; font: inherit; font-size: 11.5px; font-weight: 800; letter-spacing: 1px; color: var(--ink-muted); cursor: pointer; }
button.sch-toggle .sch-ic { margin-right: 4px; }

/* ---- finding things: the search box and the row of courses ---- */
.sch-search { position: relative; display: flex; align-items: center; }
.sch-search > .sch-ic { position: absolute; left: 13px; color: var(--ink-muted); pointer-events: none; }
.sch-search-input { padding-left: 36px; padding-right: 40px; min-height: 44px; border-radius: 13px; }
.sch-search-input::-webkit-search-cancel-button { display: none; }
.sch-search-x { position: absolute; right: 4px; width: 36px; height: 36px; border: 0; background: none; color: var(--ink-muted); display: grid; place-items: center; cursor: pointer; border-radius: 18px; }
/* One row that scrolls sideways, out to the page's edges: six courses do not push the list down the page. */
.sch-filter { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; scroll-padding: 0 16px; }
.sch-filter::-webkit-scrollbar { display: none; }
.sch-filter .sch-chip { flex: none; max-width: 260px; }
/* A chip's words: whole, on as many lines as they need, in a row that wraps; one line ending in … in the row that scrolls. Its count never gives way. */
.sch-chip { max-width: 100%; box-sizing: border-box; }
.sch-chip-label { min-width: 0; text-align: left; }
.sch-chips .sch-chip { white-space: normal; padding-top: 7px; padding-bottom: 7px; line-height: 18px; }
.sch-filter .sch-chip-label { white-space: normal; overflow-wrap: break-word; }
.sch-chip-count { flex: none; }

/* ---- the assignment's own page ---- */
.sch-over-link { background: none; border: 0; padding: 6px 0; min-height: 32px; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.sch-over-link:hover { text-decoration: underline; }
.sch-says { gap: 10px; }
.sch-says-line { font-size: 16px; line-height: 22px; font-weight: 700; }
.sch-says-line.late { color: var(--sch-danger); }
.sch-says-sub { font-size: 14px; line-height: 19px; color: var(--ink); }
.sch-score { font-size: 24px; font-weight: 800; letter-spacing: -0.4px; font-variant-numeric: tabular-nums; }
.sch-facts { display: flex; flex-direction: column; gap: 4px; }
.sch-fact { display: flex; gap: 10px; font-size: 13.5px; line-height: 19px; }
.sch-fact-k { width: 54px; flex: none; color: var(--ink-muted); font-weight: 700; }
.sch-note { border-radius: 12px; background: var(--surface-2, rgba(127,127,127,0.1)); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; line-height: 19px; color: var(--ink); }
.sch-note-title { font-weight: 800; }
.sch-prose { display: flex; flex-direction: column; gap: 4px; font-size: 15px; line-height: 22px; color: var(--ink); overflow-wrap: anywhere; }
.sch-prose-gap { height: 6px; }
.sch-prose-h { font-size: 15.5px; font-weight: 800; }
/* A heading has room above it, a paragraph stands apart from what is around it; rows of a list stay close. */
.sch-prose > .sch-prose-h:not(:first-child) { margin-top: 10px; }
.sch-prose > .sch-prose-p + :not(.sch-prose-h), .sch-prose > :not(.sch-prose-h) + .sch-prose-p { margin-top: 6px; }
.sch-prose .b { font-weight: 700; } .sch-prose .i { font-style: italic; } .sch-prose .u { text-decoration: underline; }
.sch-prose-pre { margin: 2px 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2, rgba(127,127,127,0.1)); font: 13px/19px ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.sch-prose-hr { border: 0; border-top: 1px solid var(--border); margin: 6px 0; width: 100%; }
.sch-prose-img { display: inline-flex; align-items: center; gap: 6px; }
.sch-prose-li { display: flex; gap: 8px; padding-left: 4px; }
.sch-prose-mark { flex: none; min-width: 12px; color: var(--ink-muted); }
.sch-link, .sch-prose a { color: var(--sch-accent); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.sch-file { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; color: var(--ink); text-decoration: none; font-size: 14.5px; line-height: 19px; box-sizing: border-box; }
.sch-file + .sch-file, .sch-rubric + .sch-rubric, .sch-grade-item + .sch-grade-item { border-top: 1px solid var(--border); }
.sch-says > .sch-file { border: 1px solid var(--border); border-radius: 12px; }
.sch-file-name { overflow-wrap: anywhere; font-weight: 600; }
a.sch-file:hover { background: var(--surface-2, rgba(127,127,127,0.08)); }
.sch-rubric { padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.sch-rubric-head { display: flex; gap: 10px; align-items: baseline; }
.sch-rubric-name { font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.sch-rubric-score { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.sch-rubric-said { font-size: 13.5px; line-height: 19px; color: var(--ink); overflow-wrap: anywhere; }
.sch-rubric-levels { display: flex; flex-direction: column; gap: 3px; margin-top: 2px; }
.sch-rubric-level { display: flex; flex-direction: column; font-size: 12.5px; line-height: 17px; color: var(--ink-muted); padding: 4px 8px; border-radius: 8px; overflow-wrap: anywhere; }
.sch-rubric-level.on { background: var(--accent-soft); color: var(--ink); }
.sch-rubric-level-name { font-weight: 700; }

/* ---- a course's own page ---- */
.sch-grade-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 9px 12px; border: 0; background: none; text-align: left; font: inherit; color: var(--ink); box-sizing: border-box; }
button.sch-grade-item { cursor: pointer; }
.sch-grade-text { display: flex; flex-direction: column; gap: 2px; }
.sch-grade-name { font-size: 14.5px; font-weight: 600; line-height: 19px; overflow-wrap: anywhere; }
.sch-grade-shown { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; flex: none; white-space: nowrap; }
.sch-news-title { font-size: 16px; font-weight: 700; line-height: 21px; overflow-wrap: anywhere; }
.sch-module { display: flex; flex-direction: column; gap: 6px; }
.sch-module.nested { padding: 8px 0 4px 12px; gap: 2px; }
.sch-module + .sch-file, .sch-file + .sch-module { border-top: 1px solid var(--border); }
.sch-module-title { font-size: 13px; font-weight: 800; letter-spacing: 0.2px; color: var(--ink-muted); overflow-wrap: anywhere; }
.sch-module.nested > .sch-module-title { padding: 0 12px 0 0; }
.sch-small.pad { padding: 6px 12px; }
.sch-small.faint { color: var(--ink-faint); overflow-wrap: anywhere; }

/* ---- your school: signing in, and the other ways ---- */
.sch-signin { gap: 12px; border-color: var(--accent); }
.sch-signin.small { border-color: var(--border); }
.sch-signin-head { display: flex; align-items: center; gap: 12px; }
.sch-signin-title { font-size: 17px; font-weight: 800; letter-spacing: -0.2px; }
.sch-signedout { flex-direction: row; align-items: center; gap: 12px; }
.sch-signedout > .grow { display: flex; flex-direction: column; gap: 2px; }
.sch-signedout-title { font-size: 15px; font-weight: 700; }
.sch-fold { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 6px 2px; border: 0; background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.sch-fold > .grow { display: flex; flex-direction: column; gap: 1px; }
.sch-fold-title { font-size: 15px; font-weight: 700; }
.sch-list { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.sch-item { display: flex; align-items: stretch; min-height: 58px; }
.sch-item + .sch-item, .sch-block + .sch-block, .sch-sys + .sch-sys, .sch-dayrow + .sch-dayrow { border-top: 1px solid var(--border); }
.sch-item-bar { width: 4px; flex: none; }
.sch-tick { width: 44px; flex: none; border: 0; background: none; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.sch-mark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink-muted); display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box; }
.sch-mark.done { background: var(--success); border-color: var(--success); color: #fff; }
.sch-mark.missed { border-color: var(--ink-muted); color: var(--ink-muted); }
.sch-mark .sch-ic { width: 13px; height: 13px; stroke-width: 56; }
/* Handed in from its row (pages/school.js handIn): the circle springs as it fills, the check draws itself in from
   its short end, the title is struck; then the row folds away. The confetti is .sch-burst, over everything. */
.sch-mark.pop { animation: sch-pop 460ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes sch-pop { 0% { transform: scale(0.45); background: transparent; border-color: var(--success); } 45% { transform: scale(1.32); } 100% { transform: scale(1); } }
.sch-mark.pop path { stroke-dasharray: 1 1; stroke-dashoffset: -1; animation: sch-check 300ms 150ms ease-out forwards; }
@keyframes sch-check { to { stroke-dashoffset: 0; } }
.sch-item.ticked .sch-item-name { text-decoration: line-through; color: var(--ink-muted); transition: color 220ms ease; }
.sch-item.ticked .sch-tick:disabled { opacity: 1; }
.sch-burst { position: fixed; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 2000; }
/* The bits: out from the circle (--dx, --dy) in the first third, then tumbling down past it (--fall) as they fade. */
.sch-bits i { position: absolute; left: 0; top: 0; border-radius: 2px; opacity: 0; animation: sch-bits 1.5s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
@keyframes sch-bits {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(0.5); }
  6% { opacity: 1; }
  30% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(calc(var(--spin) * 0.35)) scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx) * 1.35), calc(-50% + var(--fall))) rotate(var(--spin)); }
}
.sch-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .sch-mark.pop, .sch-mark.pop path { animation: none; stroke-dashoffset: 0; } }
.sch-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 3px; padding: 10px 12px 10px 0; border: 0; background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
/* Under the title: the course as a short chip, then when it is due in full. They wrap to a line each on a narrow phone rather than cut each other short. */
.sch-item-meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 2px; min-width: 0; }
.sch-course-chip { display: inline-flex; align-items: center; gap: 5px; min-width: 0; max-width: 100%; font-size: 12.5px; line-height: 17px; font-weight: 600; color: var(--ink-muted); }
.sch-course-chip-name { white-space: normal; overflow-wrap: break-word; }
.sch-item-text { display: flex; flex-direction: column; min-width: 0; }
.sch-item-name { font-size: 15.5px; font-weight: 600; line-height: 20px; display: block; overflow-wrap: anywhere; }
.sch-item.done .sch-item-name { color: var(--ink-muted); text-decoration: line-through; }
.sch-item-sub { font-size: 12.5px; line-height: 17px; color: var(--ink-muted); white-space: normal; overflow-wrap: break-word; }
.sch-item-sub.late, .sch-item-when.late { color: var(--sch-danger); }
.sch-item-sub.faint { color: var(--ink-faint); }
.sch-item-when { font-size: 12.5px; line-height: 17px; font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; flex: 0 1 auto; min-width: 0; }
.sch-item-sub.wrap, .sch-course .sch-item-sub { white-space: normal; overflow: visible; }
.sch-item-when.soon { color: var(--sch-accent); }
.sch-back { align-self: flex-start; background: none; border: 0; padding: 6px 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-muted); cursor: pointer; min-height: 44px; }
.sch-chev { color: var(--ink-muted); font-size: 20px; line-height: 1; flex: none; }

.sch-course { flex-direction: row; align-items: center; gap: 12px; }
.sch-course-head { display: flex; align-items: center; gap: 12px; }
.sch-course-dot { width: 12px; height: 36px; border-radius: 6px; flex: none; }
/* A course's name is whole wherever it stands: it wraps, it is never cut. */
.sch-course-name { font-size: 16px; font-weight: 700; line-height: 21px; overflow-wrap: anywhere; }
.sch-grade-row { display: flex; align-items: baseline; gap: 10px; }
.sch-grade-row .sch-item-sub { white-space: normal; }
.sch-grade { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; }
.sch-grade-small { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; flex: none; }
.sch-grade-small.none { color: var(--ink-muted); }
.sch-notes { font-size: 13.5px; line-height: 19px; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }

.sch-week-day { display: flex; gap: 10px; }
.sch-week-label { width: 38px; flex: none; text-align: center; padding-top: 8px; color: var(--ink); }
.sch-week-dow { font-size: 11px; font-weight: 800; letter-spacing: 0.6px; color: var(--ink-muted); }
.sch-week-num { font-size: 19px; font-weight: 800; }
.sch-week-day.is-today .sch-week-dow, .sch-week-day.is-today .sch-week-num { color: var(--sch-accent); }
.sch-week-body { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 44px; }
.sch-week-row { display: flex; align-items: center; gap: 8px; min-height: 30px; border: 0; background: none; padding: 0; text-align: left; font: inherit; color: var(--ink); width: 100%; }
button.sch-week-row { cursor: pointer; min-height: 44px; }
.sch-week-dot { width: 8px; height: 8px; border-radius: 4px; margin: 0 3px; flex: none; }
.sch-week-flag { width: 14px; text-align: center; font-size: 13px; flex: none; }
.sch-week-text { font-size: 14.5px; line-height: 19px; font-weight: 600; display: block; overflow-wrap: anywhere; }
.sch-week-text.strong { font-weight: 700; }
.sch-week-text.muted { color: var(--ink-muted); }

/* ---- sheets (ui.js panel) ---- */
.sch-sheet { display: flex; flex-direction: column; gap: 14px; padding: 4px 18px 26px; color: var(--ink); max-width: 640px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.sch-sheet { position: relative; }
/* The panel already pads its body: a second gutter here only made everything in a sheet wrap sooner on a small phone. */
.panel-body > .sch-sheet { padding-left: 0; padding-right: 0; }
.panel-body > .sch-sheet > .sch-sheet-x { right: 0; }
.sch-sheet-x { position: absolute; top: 0; right: 14px; width: 36px; height: 36px; border-radius: 18px; border: 0; display: grid; place-items: center; background: var(--surface-2, rgba(127,127,127,0.14)); color: var(--ink-muted); cursor: pointer; z-index: 1; }
.sch-sheet-x svg { width: 15px; height: 15px; stroke-width: 44; }
.sch-sheet .sch-item-head { padding-right: 44px; }
.sch-sheet-x:hover { color: var(--ink); }
.sch-sheet-title { margin: 0; padding-right: 44px; font-size: 19px; font-weight: 800; letter-spacing: -0.3px; }
.sch-label { font-size: 12px; font-weight: 700; letter-spacing: 0.3px; color: var(--ink-muted); }
.sch-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.sch-input { width: 100%; box-sizing: border-box; min-height: 46px; font-size: 16px; }
textarea.sch-input { min-height: 84px; }
.sch-time { max-width: 160px; }
.sch-hint, .sch-small { font-size: 12.5px; line-height: 17px; color: var(--ink-muted); }
.sch-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sch-row.end { align-items: flex-end; }
.sch-item-head { display: flex; gap: 12px; }
.sch-bar { width: 5px; border-radius: 3px; flex: none; }
.sch-over { font-size: 12.5px; font-weight: 700; letter-spacing: 0.2px; color: var(--ink-muted); margin-bottom: 2px; }
.sch-item-title { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.3px; line-height: 26px; overflow-wrap: anywhere; }
.sch-item-due { font-size: 14px; line-height: 19px; margin-top: 4px; color: var(--ink-muted); }
.sch-item-due.late { color: var(--sch-danger); }
.sch-block { display: flex; align-items: center; gap: 10px; padding: 11px 12px; font-size: 14.5px; font-weight: 600; }
.sch-block.done, .sch-block.missed { color: var(--ink-muted); }
.sch-more { align-self: flex-start; background: none; border: 0; padding: 6px 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-muted); cursor: pointer; min-height: 44px; }
.sch-swatch { width: 36px; height: 36px; border-radius: 18px; border: 2.5px solid transparent; color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; padding: 0; }
.sch-swatch.on { border-color: var(--ink); }
.sch-steps { margin: 0; padding: 12px 12px 12px 30px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; line-height: 19px; }
.sch-conn { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.sch-conn.bad { border-color: var(--danger); }
.sch-conn-head { display: flex; align-items: center; gap: 8px; }
.sch-conn-name { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.sch-sys { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 10px 12px; border: 0; border-top: 0; background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; box-sizing: border-box; }
.sch-dayrow { display: flex; align-items: center; gap: 10px; padding: 7px 12px; }
.sch-dayname { width: 40px; font-size: 14.5px; font-weight: 700; }
.sch-dayvalue { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.sch-dayvalue.off { color: var(--ink-muted); }
.sch-step { width: 40px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: none; color: var(--ink); font-size: 18px; cursor: pointer; flex: none; }
.sch-month { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 8px; max-width: 340px; }
.sch-month-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 4px; }
.sch-month-title { font-size: 15px; font-weight: 700; }
.sch-month-arrow { width: 36px; height: 36px; border: 0; background: none; color: var(--ink); font-size: 22px; cursor: pointer; }
.sch-month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; justify-items: center; }
.sch-month-dow { font-size: 11.5px; font-weight: 700; color: var(--ink-muted); padding: 4px 0; }
.sch-month-day { width: 100%; max-width: 36px; aspect-ratio: 1; height: auto; border-radius: 18px; border: 1.5px solid transparent; background: none; color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; padding: 0; }
.sch-month-day.is-today { border-color: var(--accent); font-weight: 700; }
.sch-month-day.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }

/* ---- the card on Learn's Today (school-due.js) ---- */
.sch-due { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 10px 14px; display: flex; flex-direction: column; gap: 4px; color: var(--ink); }
.sch-due[hidden] { display: none; }
.sch-due button { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
.sch-due-empty { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.sch-due-quiet { font-size: 14px; color: var(--ink-muted); }
.sch-due-action { font-size: 14px; font-weight: 700; color: var(--sch-accent); white-space: nowrap; }
.sch-due-head { display: flex; align-items: center; gap: 6px; min-height: 28px; color: var(--ink-muted); }
.sch-due-title { font-size: 11.5px; font-weight: 800; letter-spacing: 1px; }
.sch-due-badge { font-size: 12.5px; font-weight: 700; color: var(--sch-danger); margin-left: 4px; }
.sch-due-more { font-size: 12.5px; }
.sch-due-row { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.sch-due-dot { width: 8px; height: 30px; border-radius: 4px; flex: none; }
.sch-due-name { font-size: 15px; font-weight: 600; white-space: normal; overflow-wrap: break-word; }

@media (max-width: 600px) {
  .sch-btn { min-height: 46px; }
  .sch-sheet { padding-left: 16px; padding-right: 16px; }
}