/* ============================================================
   Bloom — the School page (/school.html), 26 Oct 2026
   Staff Check-in & School Dashboard Spec v1 S4 + the class overview
   (School Dashboard wireframe frames 01–02). sch- prefix. Builds on
   style.css (nav, card, btn) and checkin.css (heartbeat, meadow).
   ============================================================ */

.sch-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; }
.sch-head h1 { font-family: var(--hand); font-size: 32px; font-weight: 600; line-height: 1.1; margin: 2px 0 0; }
.sch-sub { color: var(--ink-soft); font-size: 15px; margin-top: 6px; }
.sch-privacy { color: var(--ink-soft); font-size: 14px; margin: 10px 0 0; }
.sch-range { display: flex; gap: 8px; flex-wrap: wrap; }
.sch-range .btn.sm { font-size: 15px; padding: 6px 16px; }
.sch-range .btn.on { background: var(--green-l); border-color: var(--green-deep); }
.sch-garden { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 15px; color: var(--ink-soft); }
.sch-garden b { font-family: var(--hand); font-size: 22px; color: var(--ink); }
.sch-back { display: inline-block; font-weight: 700; font-size: 15px; color: var(--green-deep); margin-bottom: 10px; }
.sch-back:hover { text-decoration: underline; }

.sch-card { margin-top: 16px; }
.sch-n { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.sch-n .sch-day { font-family: var(--hand); font-size: 22px; font-weight: 600; }
.sch-n .sch-count { font-size: 16px; color: var(--ink-soft); }
.sch-n .sch-count b { font-family: var(--hand); font-size: 24px; color: var(--ink); margin-right: 2px; }
.sch-guard { color: var(--ink-soft); font-size: 15px; background: var(--beige); border-radius: 10px; padding: 10px 14px; margin-top: 10px; }
.sch-words { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: baseline; margin-top: 12px; font-size: 15px; color: var(--ink-soft); }
.sch-words b { color: var(--ink); font-family: var(--hand); font-weight: 600; font-size: 17px; }
.sch-words b small { color: var(--ink-soft); font-size: 13px; font-weight: 500; margin-left: 2px; }

/* the classes table */
.sch-tbl-wrap { overflow-x: auto; margin-top: 8px; }
.sch-tbl { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 720px; }
.sch-tbl th { text-align: left; font-family: var(--hand); font-weight: 500; font-size: 13px; letter-spacing: .3px; color: var(--ink-soft); padding: 8px 10px; border-bottom: 2px solid var(--line-c, rgba(46,44,69,.14)); white-space: nowrap; }
.sch-tbl td { padding: 10px; border-bottom: 1px solid var(--line-c, rgba(46,44,69,.1)); vertical-align: middle; }
.sch-tbl tr.sch-row { cursor: pointer; }
.sch-tbl tr.sch-row:hover td { background: var(--paper); }
.sch-tbl tr.sch-row:focus-within td { background: var(--paper); }
.sch-tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sch-tbl .sch-cls { font-family: var(--hand); font-weight: 600; font-size: 16px; }
.sch-tbl .sch-cls small { display: block; font-family: var(--body); font-weight: 400; font-size: 13px; color: var(--ink-soft); }
.sch-tbl .sch-cls a { color: inherit; }
.sch-tbl .mut { color: var(--ink-soft); }
.sch-mini { display: flex; align-items: flex-end; gap: 3px; height: 28px; }
.sch-mini i { display: block; flex: 0 0 7px; border-radius: 2px; background: rgba(46,44,69,.12); display: flex; flex-direction: column-reverse; overflow: hidden; }
.sch-mini i b { display: block; width: 100%; }
.sch-mini i.none { background: transparent; border-bottom: 2px solid rgba(46,44,69,.12); height: 2px !important; }
.sch-mini i.thin { background: rgba(46,44,69,.22); flex-basis: 4px; }
.sch-mini b.f5 { background: #4caf6e; } .sch-mini b.f4 { background: #8fd19e; } .sch-mini b.f3 { background: #f5c242; } .sch-mini b.f2 { background: #f29b5a; } .sch-mini b.f1 { background: #6f8fd6; }

/* ask the staff */
.sch-q-intro { color: var(--ink-soft); font-size: 15px; margin: 0 0 12px; }
.sch-q-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.sch-q { display: flex; align-items: center; gap: 10px; text-align: left; font: inherit; font-size: 16px; color: var(--ink); background: var(--paper); border: var(--line); border-radius: 16px; padding: 12px 16px; min-height: 52px; cursor: pointer; }
.sch-q:hover { background: var(--beige); }
.sch-q.own-new { border-style: dashed; color: var(--ink-soft); }
.sch-q .sch-q-x { margin-left: auto; color: var(--ink-soft); font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 8px; }
.sch-q .sch-q-x:hover { background: rgba(46,44,69,.08); color: var(--ink); }
.sch-q-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.sch-q-form input { flex: 1 1 280px; font: inherit; font-size: 16px; padding: 10px 14px; border: 2px solid var(--ink); border-radius: 12px; background: var(--card); color: var(--ink); }
.sch-q-form .sch-q-len { font-size: 13px; color: var(--ink-soft); }
.sch-open { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; background: #FFF0D1; border: 2px solid #FFDFA0; border-radius: 16px; padding: 12px 16px; font-size: 15px; margin-top: 12px; }
.sch-open .sch-open-q { font-family: var(--hand); font-weight: 600; font-size: 17px; }
.sch-open .sch-open-m { color: var(--ink-soft); }
.sch-open .btn.sm { margin-left: auto; font-size: 15px; padding: 6px 16px; }
.sch-closed { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; }
.sch-ask { text-align: left; font: inherit; color: var(--ink); background: var(--paper); border: var(--line); border-radius: 20px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; }
.sch-ask:hover { background: var(--beige); }
.sch-ask-q { font-family: var(--hand); font-size: 18px; font-weight: 600; line-height: 1.2; }
.sch-ask-m { font-size: 14px; color: var(--ink-soft); }
.sch-ask-mini .ck-meadow { min-height: 0; }
.sch-ask-big { margin-top: 14px; border-top: 1px solid var(--line-c, rgba(46,44,69,.12)); padding-top: 12px; }

/* class overview */
.sch-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 10px; }
.sch-tile { background: var(--paper); border: var(--line); border-radius: 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sch-tile .n { font-family: var(--hand); font-size: 28px; font-weight: 600; line-height: 1.1; }
.sch-tile .l { font-size: 13px; color: var(--ink-soft); }
.sch-weeks { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.sch-wk { font-family: var(--hand); font-weight: 600; font-size: 14px; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--line-c, rgba(46,44,69,.14)); color: var(--ink-soft); background: var(--card); }
.sch-wk.done { background: var(--green-deep); color: #fff; border-color: var(--green-deep); }
.sch-wk.now { border-color: var(--ink); color: var(--ink); border-width: 3px; }
.sch-wk-note { font-size: 14px; color: var(--ink-soft); margin-left: 8px; }
.sch-days-wrap { overflow-x: auto; margin-top: 10px; }
.sch-days { border-collapse: collapse; font-size: 14px; }
.sch-days th { font-family: var(--hand); font-weight: 500; font-size: 13px; color: var(--ink-soft); text-align: left; padding: 6px 10px 6px 0; white-space: nowrap; }
.sch-days td { padding: 6px 8px; text-align: center; border-top: 1px solid var(--line-c, rgba(46,44,69,.08)); white-space: nowrap; }
.sch-days td.lbl { text-align: left; color: var(--ink-soft); padding-right: 12px; }
.sch-days td.mon { border-left: 2px solid var(--line-c, rgba(46,44,69,.14)); }
.sch-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: rgba(46,44,69,.12); }
.sch-dot.on { background: var(--green-deep); }

.sch-empty { color: var(--ink-soft); font-size: 16px; padding: 18px 6px; text-align: center; }
@media (max-width: 640px) {
  .sch-head h1 { font-size: 26px; }
  .sch-tile .n { font-size: 24px; }
}

/* ============================================================
   4 Nov 2026 — the wellbeing-first dashboard (School Score Spec §3)
   ============================================================ */
.sch-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; padding: 4px 4px 0; }
.sch-top h1 { font-family: var(--hand); font-size: 32px; font-weight: 600; line-height: 1.1; margin: 2px 0 0; }
.sch-top .sch-privacy { margin-top: 6px; }
.sch-head .note { font-size: 13px; color: var(--ink-soft); }

/* the four tiles */
.sch-tiles2 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.sch-tile2 { background: var(--card); border: var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sch-big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sch-big .n { font-family: var(--hand); font-size: 44px; font-weight: 600; line-height: 1; }
.sch-big .n .none { font-size: 22px; color: var(--ink-soft); }
.sch-big .s { font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.sch-big em { font-style: normal; font-family: var(--hand); font-size: 18px; font-weight: 600; color: var(--ink-soft); }
.sch-big em.good, .sch-score em.good { color: var(--green-deep); }
.sch-sub2 { font-size: 13px; color: var(--ink-soft); }
.sch-sub2 a { font-weight: 700; color: var(--green-deep); }
.sch-chg { display: block; font-size: 13px; color: var(--ink-soft); font-weight: 400; }
.sch-chg.up { color: var(--green-deep); font-weight: 700; }
.sch-chg.down { color: var(--coral-deep); font-weight: 700; }
.sch-sub2 .sch-chg { display: inline; }

/* the checked-in bar with the 60% line */
.sch-bar { position: relative; height: 12px; border-radius: 6px; background: rgba(46,44,69,.10); margin: 2px 0; }
.sch-bar i { display: block; height: 100%; border-radius: 6px; background: var(--green); }
.sch-bar i.low { background: var(--sunny); }
.sch-bar b { position: absolute; top: -4px; width: 2px; height: 20px; background: var(--ink); }
.sch-td-bar .sch-bar { height: 10px; }
.sch-td-bar .sch-bar b { top: -3px; height: 16px; }
.sch-td-bar small { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 5px; }
.sch-td-bar small.low { color: var(--ink); font-weight: 700; }
.sch-th-bar { min-width: 180px; }

/* the week-by-week line */
.sch-chart-wrap { overflow-x: auto; margin-top: 6px; }
.sch-chart { display: block; min-width: 640px; font-family: var(--body); }
.sch-chart line.grid { stroke: rgba(46,44,69,.10); stroke-width: 1; }
.sch-chart line.mid { stroke: rgba(46,44,69,.30); stroke-width: 1.5; stroke-dasharray: 5 5; }
.sch-chart text { font-size: 12px; fill: var(--ink-soft); }
.sch-chart text.pt { font-size: 11px; }
.sch-chart text.val { font-weight: 700; fill: var(--green-deep); }
.sch-chart polyline { fill: none; stroke: var(--green-deep); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.sch-chart circle.dot { fill: var(--green-deep); }
.sch-chart circle.hollow { fill: var(--card); stroke: var(--green-deep); stroke-width: 3; }

/* time + moments, side by side */
.sch-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.sch-two .sch-card { margin-top: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.sch-stack { display: flex; height: 40px; border-radius: 10px; overflow: hidden; }
.sch-stack i, .sch-legend i { display: block; background: var(--violet); }
.sch-stack i { color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--hand); font-weight: 600; font-size: 17px; font-style: normal; }
.sch-stack i.prac, .sch-legend i.prac { background: var(--sky); }
.sch-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sch-legend b { display: flex; align-items: center; gap: 6px; font-family: var(--hand); font-weight: 600; font-size: 15px; }
.sch-legend i { width: 10px; height: 10px; border-radius: 50%; }
.sch-legend small { display: block; font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.sch-line { font-size: 15px; }
.sch-moments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; flex: 1; }
.sch-moments > div { border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sch-moments .green { background: var(--green-l); }
.sch-moments .coral { background: var(--coral-l); }
.sch-moments .n { font-family: var(--hand); font-size: 40px; font-weight: 600; line-height: 1; }
.sch-moments .l { font-family: var(--hand); font-weight: 600; font-size: 16px; }
.sch-moments small { font-size: 13px; color: var(--ink-soft); }

/* the classes table, the score column */
.sch-tbl tr.nos td { background: var(--sunny-l); }
.sch-score { white-space: nowrap; }
.sch-score .n { font-family: var(--hand); font-weight: 600; font-size: 22px; }
.sch-score em { font-style: normal; font-family: var(--hand); font-weight: 600; color: var(--ink-soft); margin-left: 6px; }
.sch-score .none { font-family: var(--hand); font-weight: 600; font-size: 16px; color: var(--ink-soft); }
.sch-spark polyline { fill: none; stroke: var(--green-deep); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sch-spark circle.pt { fill: var(--green-deep); }
.sch-spark circle.gap { fill: var(--sunny); }
.sch-spark.down polyline { stroke: var(--coral-deep); }
.sch-mins { white-space: nowrap; }
.sch-mins .n { font-family: var(--hand); font-weight: 600; font-size: 18px; }
.sch-mins .n.low { color: var(--coral-deep); }
.sch-mins small { display: block; font-size: 13px; color: var(--ink-soft); }

/* worth a word, ask collapsed */
.sch-word { background: var(--green-l); }
.sch-word p { margin: 4px 0 0; font-size: 15px; line-height: 1.5; }
.sch-ask-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sch-ask-text { font-size: 15px; margin-top: 2px; }
#sch-ask-wrap { margin-top: 12px; }

@media (max-width: 900px) {
  .sch-tiles2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sch-top h1 { font-size: 26px; }
  .sch-two, .sch-legend, .sch-moments { grid-template-columns: minmax(0, 1fr); }
  .sch-big .n { font-size: 36px; }
}