/* Teacher dashboard. Builds on styles.css. */

:root {
  --st-new: #f6e7a1;
  --st-approved: #6cc497;
  --st-finalized: #1f2f6b;
  --st-finalized-soft: #e3e8f6;
  --st-finalized-text: #1f2f6b;
  --st-redo: #d0342c;
  --st-resubmitted: #c99a00;
  --st-resubmitted-text: #8a6d00;
  --st-missing: transparent;
  --all-filed-bg: #e6eeff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --st-new: #7a6a2e; --st-approved: #3f8f62; --st-finalized: #8fa3e8; --st-finalized-soft: #222b4a; --st-finalized-text: #b9c7f5; --st-redo: #ff6b61; --st-resubmitted: #ffcf3a; --st-resubmitted-text: #ffcf3a; --all-filed-bg: #1c2744; }
}

main.wide { max-width: 1240px; padding-top: 26px; }
.narrow { max-width: 420px; margin: 0 auto; }
.admin-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
label.inline { flex-direction: row; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.topbar label.inline { color: rgba(255, 255, 255, .75); }
label.inline select { width: auto; padding: 6px 10px; font-weight: 700; color: var(--text); background: var(--card); }
.topbar .btn.small { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .18); box-shadow: none; }
.topbar .btn.small:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .3); }
@media (max-width: 700px) {
  .topbar { flex-wrap: wrap; }
  .admin-controls { width: 100%; justify-content: flex-start; }
}

.dash-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.dash-head h1 { margin: 0; }
.dash-head input { max-width: 280px; padding: 10px 14px; background: var(--card); box-shadow: var(--shadow-sm); }

/* Summary tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 18px 0 14px; }
.tile {
  position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 16px 14px 20px; box-shadow: var(--shadow);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.tile::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--brand); }
.tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tile b { display: block; font-size: 30px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.tile span { font-size: 13px; color: var(--muted); font-weight: 600; }
.tile.redo::before { background: var(--st-redo); }
.tile.redo b { color: var(--st-redo); }
.tile.finalized::before { background: var(--st-finalized); }
.tile.finalized b { color: var(--st-finalized-text); }
.tile.approved::before { background: var(--st-approved); }
.tile.approved b { color: var(--good); }

.legend { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.sw.new { background: var(--st-new); }
.sw.approved { background: var(--st-approved); }
.sw.finalized { background: var(--st-finalized); }
.sw.redo { background: var(--st-redo); }
.sw.resubmitted { background: var(--st-resubmitted); }
.sw.missing { border: 1.5px dashed var(--muted); }

/* Student cards */
.student-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.scard {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px; cursor: pointer; box-shadow: var(--shadow); text-align: left; font: inherit; color: inherit;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
}
.scard:hover, .scard:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); outline: none; }
.scard.has-redo { box-shadow: inset 4px 0 0 var(--st-redo), var(--shadow); }
.scard.has-redo:hover { box-shadow: inset 4px 0 0 var(--st-redo), var(--shadow-lg); }
.scard.all-filed { background: var(--all-filed-bg); border-color: color-mix(in srgb, var(--st-finalized) 30%, var(--line)); }
.scard .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.scard h3 { margin: 0; font-size: 17px; letter-spacing: -.01em; }
.scard .sid { font-size: 11px; font-weight: 800; letter-spacing: .08em; color: var(--brand); background: var(--brand-soft); padding: 2px 8px; border-radius: 99px; }
.bar { display: flex; height: 8px; border-radius: 99px; overflow: hidden; background: var(--field); border: 1px solid var(--line); }
.bar i { display: block; height: 100%; }
.bar .new { background: var(--st-new); }
.bar .approved { background: var(--st-approved); }
.bar .finalized { background: var(--st-finalized); }
.bar .redo { background: var(--st-redo); }
.bar .resubmitted { background: var(--st-resubmitted); }
.counts { font-size: 13px; color: var(--muted); }
.counts b { color: var(--text); }
.subjects { display: flex; flex-wrap: wrap; gap: 6px; }
.subj { font-size: 12px; font-weight: 650; padding: 3px 10px; border-radius: 99px; background: var(--brand-soft); color: var(--brand); }
.subj.missing { background: transparent; border: 1.5px dashed var(--line); color: var(--muted); }
.thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.thumbs img, .thumbs .more {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; background: #fff;
  border: 2px solid var(--st-new); display: block;
}
.thumbs .more { display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--field); }
.st-approved { border-color: var(--st-approved) !important; }
.st-finalized { border-color: var(--st-finalized) !important; }
.st-redo { border-color: var(--st-redo) !important; }
.st-resubmitted { border-color: var(--st-resubmitted) !important; }
.empty-card { color: var(--muted); font-size: 14px; }

/* One student's uploads */
.back-link { padding-left: 4px; color: var(--muted); }
.student-head { margin: 4px 0 14px; }
.student-head h1 { margin: 0; }
.upload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; margin-top: 12px; }
.utile {
  border: 3px solid var(--st-new); border-radius: 16px; overflow: hidden; background: var(--card);
  cursor: pointer; padding: 0; font: inherit; color: inherit; text-align: left; display: flex; flex-direction: column;
  box-shadow: var(--shadow); transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.utile:hover, .utile:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-lg); outline: none; }
.utile img, .utile .noimg { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #fff; display: block; }
.utile .noimg { display: grid; place-items: center; font-size: 40px; background: var(--field); }
.utile .cap { padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.utile .cap strong { font-size: 15px; }
.utile .tag { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.utile.st-approved .tag { color: var(--st-finalized); }
.utile.st-finalized .tag { color: var(--st-finalized); }
.utile.st-redo .tag { color: var(--st-redo); }
.utile.st-resubmitted .tag { color: var(--st-resubmitted-text); }

/* Viewer */
.viewer { position: fixed; inset: 0; z-index: 20; background: var(--bg); display: flex; flex-direction: column; animation: rise .25s var(--ease); }
.viewer-bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px; color: #fff;
  background: linear-gradient(120deg, var(--navy), var(--navy-2)); box-shadow: 0 2px 12px rgba(10, 18, 48, .25);
}
.viewer-bar .btn.ghost { color: #fff; }
.viewer-bar .btn.ghost:hover { background: rgba(255, 255, 255, .12); }
.viewer-bar .meta { color: rgba(255, 255, 255, .7); }
.viewer-title { text-align: center; display: flex; flex-direction: column; }
.save-state { justify-self: end; font-size: 13px; color: rgba(255, 255, 255, .7); }
.viewer-body { flex: 1; overflow-y: auto; padding: 20px 72px 40px; }
.v-pages { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.v-pages img { width: 100%; display: block; background: #fff; border-radius: 8px; box-shadow: var(--shadow-lg); }
.v-pages iframe { width: 100%; height: 80vh; border: 0; border-radius: 8px; background: #fff; box-shadow: var(--shadow-lg); }
.v-pages .loading { height: 50vh; display: grid; place-items: center; color: var(--muted); }
.v-panel { max-width: 860px; margin: 18px auto 0; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 18px; margin: 12px 0; }
.info-grid div span, .info-text span { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.info-text { margin-top: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.nav-arrow {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 21; width: 52px; height: 52px;
  border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 34px; line-height: 1;
  border-radius: 50%; cursor: pointer; box-shadow: var(--shadow-lg); display: grid; place-items: center; padding-bottom: 4px;
  transition: transform .15s var(--ease), background .15s, color .15s;
}
.nav-arrow:hover:not(:disabled) { background: var(--brand); color: #fff; border-color: transparent; transform: translateY(-50%) scale(1.08); }
.nav-arrow.prev { left: 12px; }
.nav-arrow.next { right: 12px; }
.nav-arrow:disabled { opacity: .3; cursor: default; }
@media (max-width: 700px) {
  .viewer-body { padding: 12px 12px 96px; }
  .nav-arrow { top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); transform: none; }
  .nav-arrow:hover:not(:disabled) { transform: scale(1.08); }
}

.review-card h2 { margin-bottom: 14px; }
.viewer-bar > :first-child { justify-self: start; }
.toggle-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.toggle {
  min-height: 58px; border-radius: 14px; font: inherit; font-size: 17px; font-weight: 750; cursor: pointer;
  background: var(--raised); border: 1.5px solid var(--line); color: var(--text); box-shadow: var(--shadow-sm);
  transition: transform .15s var(--ease), box-shadow .15s, background .15s, border-color .15s;
}
.toggle:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow); }
.toggle.approved:hover:not(:disabled) { border-color: var(--st-finalized); color: var(--st-finalized); }
.toggle.redo:hover:not(:disabled) { border-color: var(--st-redo); color: var(--st-redo); }
.toggle.approved[aria-pressed="true"] { background: linear-gradient(180deg, #1fae6a, var(--st-finalized)); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(20, 135, 79, .35); }
.toggle:disabled { opacity: .45; cursor: not-allowed; }
.toggle.redo[aria-pressed="true"] { background: linear-gradient(180deg, #e2504a, var(--st-redo)); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(208, 52, 44, .35); }
.reason-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.reason {
  display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 8px 14px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--raised); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; text-align: left;
  box-shadow: var(--shadow-sm); transition: transform .15s var(--ease), border-color .15s;
}
.reason:hover { transform: translateY(-1px); border-color: var(--st-redo); }
.reason::before { content: ''; width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--muted); flex: none; }
.reason[aria-pressed="true"] { background: var(--bad-soft); border-color: var(--st-redo); }
.reason[aria-pressed="true"]::before { background: var(--st-redo); border-color: var(--st-redo); box-shadow: inset 0 0 0 2px var(--card); }
.viewer-bar .btn { white-space: nowrap; }
.reason { overflow-wrap: anywhere; }

/* ---------- Approve → annotate → finalize ---------- */

.finish-row { display: flex; flex-direction: column; margin-bottom: 8px; }
.step-group { display: grid; grid-template-columns: 1fr; gap: 12px; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--line); }
.export-row { margin-bottom: 6px; }
.finish-row .btn { white-space: normal; line-height: 1.2; }
.anno-count { display: block; margin-bottom: 4px; color: var(--text); font-weight: 650; }
.anno-count.met { color: var(--st-finalized); }
.counts .met { color: var(--st-finalized); }
.finish-row .btn[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); }
.final-state { margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.final-state.done { color: var(--st-finalized-text); font-weight: 650; }
.final-state.stale { color: var(--warn); font-weight: 650; }

.anno-bar {
  position: sticky; top: -20px; z-index: 3; max-width: 860px; margin: -20px auto 14px; padding: 10px 12px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--card) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 0 0 16px 16px; box-shadow: var(--shadow-lg);
}
.anno-bar select { width: auto; padding: 7px 10px; }
.anno-bar .grow-space { flex: 1; }
.a-bold[aria-pressed="true"] { background: var(--text); color: var(--card); }
.swatches { display: flex; gap: 6px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; transition: transform .15s var(--ease); }
.swatch:hover { transform: scale(1.12); }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--text); }
.anno-hint { max-width: 860px; margin: 0 auto 10px; }
@media (max-width: 700px) { .anno-bar { top: -12px; margin-top: -12px; } }

/* Each page scales its text boxes with its own width (cqw units). */
.page-wrap { position: relative; container-type: inline-size; }
.page-wrap img { width: 100%; display: block; background: #fff; border-radius: 8px; box-shadow: var(--shadow-lg); }
.anno-layer { position: absolute; inset: 0; }
.annotating .anno-layer { cursor: text; }
.anno {
  position: absolute; min-width: 20px; white-space: pre-wrap; overflow-wrap: break-word;
  line-height: 1.25; padding: .15em .3em; border: 1px dashed transparent;
}
.annotating .anno { border-color: rgba(52, 86, 214, .45); background: rgba(255, 255, 255, .25); }
.anno.selected { border: 1.5px dashed var(--brand) !important; }
.anno .txt { outline: none; min-height: 1.25em; }
.anno .txt:empty::before { content: 'Type here'; opacity: .45; }
.anno .grip, .anno .resize { display: none; position: absolute; touch-action: none; user-select: none; }
.annotating .anno.selected .grip, .annotating .anno.selected .resize { display: block; }
.anno .grip {
  left: -14px; top: -14px; width: 26px; height: 26px; border-radius: 50%; cursor: move;
  background: var(--brand); color: #fff; font: 14px/26px system-ui, sans-serif; text-align: center; box-shadow: var(--shadow-brand);
}
.anno .resize { right: -6px; top: 20%; bottom: 20%; width: 10px; cursor: ew-resize; border-radius: 4px; background: var(--brand); opacity: .7; }

/* The dashboard is for computer browsers. On a phone, show a note instead. */
.desk-only { display: none; max-width: 420px; margin: 32px auto; text-align: center; }
@media (max-width: 759px) {
  body.admin .desk-only { display: block; margin-left: 16px; margin-right: 16px; }
  body.admin main, body.admin .viewer, body.admin .admin-controls { display: none !important; }
}

/* ---------- Students (spreadsheet-style list) ---------- */

.roster-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.roster-actions .meta { color: var(--warn); font-weight: 650; }
#screen-roster .hint { margin-top: 12px; max-width: 80ch; }
.roster-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.roster { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 860px; }
.roster th { position: sticky; top: 0; z-index: 1; text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); background: var(--field); padding: 10px 8px; border-bottom: 1px solid var(--line); }
.roster td { padding: 0; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: middle; }
.roster td:last-child, .roster th:last-child { border-right: 0; }
.roster tr:last-child td { border-bottom: 0; }
.roster td.num { width: 40px; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; background: var(--field); }
.roster input { border: 0; border-radius: 0; background: transparent; padding: 10px 8px; font-size: 14px; box-shadow: none; }
.roster input:hover { background: var(--field); }
.roster input:focus { background: var(--card); box-shadow: inset 0 0 0 2px var(--brand); }
.roster td:nth-child(4) { width: 70px; }
.roster td:nth-child(6) { min-width: 240px; }
.roster .sid-cell { width: 150px; padding: 6px 10px; font-variant-numeric: tabular-nums; }
.roster .sid-cell b { letter-spacing: .06em; color: var(--brand); }
.roster .why { display: block; font-size: 11px; color: var(--bad); line-height: 1.3; }
.roster tr.bad td.num { background: var(--bad-soft); color: var(--bad); font-weight: 700; }
.row-x { border: 0; background: none; color: var(--muted); cursor: pointer; width: 36px; height: 36px; border-radius: 8px; font-size: 14px; }
.row-x:hover { background: var(--bad-soft); color: var(--bad); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- LP dates ---------- */

.lp-range { font-size: 15px; font-weight: 600; color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.dates-grid { display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px 10px; align-items: center; }
.dates-grid b { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.dates-grid .lp-name { font-weight: 700; }
.dates-grid input { padding: 8px 10px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
#dates-dialog { width: min(520px, calc(100% - 32px)); }
.subj.short { background: var(--warn-soft, #fff4e0); color: var(--warn); }
.sem-line { margin-top: 2px; }
.sem-line i { font-style: normal; color: var(--muted); }
.roster th.sem1, .roster th.sem2 { white-space: nowrap; }
.roster th.sem1 { box-shadow: inset 0 -3px 0 var(--brand); }
.roster th.sem2 { box-shadow: inset 0 -3px 0 var(--st-finalized); }
.roster th span { font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted); margin-left: 4px; }
.roster td.col-classes, .roster td.col-classes2 { min-width: 220px; }
.roster td.col-classes2 input::placeholder { color: var(--muted); opacity: .75; font-style: italic; }
.roster .sid-cell b.ok { color: var(--st-finalized); }

/* The ES's own typed redo reason */
.redo-note { display: grid; gap: 6px; margin-top: 12px; font-weight: 600; font-size: 14px; }
.redo-note textarea { width: 100%; resize: vertical; min-height: 72px; font: inherit; font-weight: 400; }

/* ----- First sign-in setup steps ----- */
.setup-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.setup-head h1 { margin: 0 0 6px; }
.setup-head-actions { display: flex; gap: 8px; }
.setup { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; margin-top: 6px; }
@media (max-width: 820px) { .setup { grid-template-columns: 1fr; } }
.setup-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 16px; }
.setup-steps button {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid transparent; background: transparent; color: var(--muted); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.setup-steps button:disabled { cursor: default; opacity: .6; }
.setup-steps button:hover:not(:disabled) { background: var(--card); }
.setup-steps .num {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800;
  background: var(--field); border: 1px solid var(--line); color: var(--muted);
}
.setup-steps .is-done button { color: var(--text); }
.setup-steps .is-done .num { background: var(--good-soft); border-color: transparent; color: var(--good); }
.setup-steps .is-current button { background: var(--card); color: var(--text); border-color: var(--line); box-shadow: var(--shadow-sm); }
.setup-steps .is-current .num { background: var(--brand); border-color: transparent; color: var(--brand-ink); }
.setup-panel { padding: 26px 30px; }
.setup-panel h2 { margin: 0 0 14px; font-size: 24px; }
.setup-panel p { line-height: 1.55; }
.step-of { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .05em; }
.how { margin: 14px 0 18px; padding-left: 0; list-style: none; counter-reset: how; display: flex; flex-direction: column; gap: 10px; }
.how li { counter-increment: how; position: relative; padding-left: 40px; line-height: 1.55; }
.how li::before {
  content: counter(how); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 13px; font-weight: 800; background: var(--brand-soft); color: var(--brand);
}
.note { padding: 12px 14px; border-radius: 12px; background: var(--warn-soft); color: var(--text); border-left: 4px solid var(--warn); line-height: 1.5; }
.note.bad { background: var(--bad-soft); border-left-color: var(--bad); }
.step-actions { display: flex; justify-content: flex-end; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.narrow-form { max-width: 360px; }
.connect-row { display: flex; gap: 10px; }
.connect-row input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.connect-state { margin: 10px 0 0; font-weight: 650; color: var(--good); }
.connect-state.bad { color: var(--bad); font-weight: 600; }
.inline-field { flex-direction: row; align-items: center; gap: 10px; margin-bottom: 14px; }
.inline-field select { width: auto; }

/* ----- Student link and QR code ----- */
.link-box { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; margin: 6px 0 14px; }
.qr { width: 180px; height: 180px; flex: none; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.qr svg { display: block; width: 100%; height: 100%; }
.link-side { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 10px; }
.link-input { font-family: ui-monospace, Menlo, monospace; font-size: 13px; }
.link-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#link-dialog { width: min(620px, calc(100% - 32px)); }

/* ----- ES accounts ----- */
.add-es { display: grid; grid-template-columns: 1fr 1fr 1.4fr auto; gap: 12px; align-items: end; margin-bottom: 16px; }
@media (max-width: 760px) { .add-es { grid-template-columns: 1fr; } }
.roster.accounts { min-width: 760px; }
.roster.accounts td { padding: 10px 12px; vertical-align: middle; }
.roster.accounts .acts { text-align: right; white-space: nowrap; }
.roster.accounts .acts .btn + .btn { margin-left: 6px; }
.roster.accounts tr.is-off td { color: var(--muted); }
.empty-row { padding: 22px !important; text-align: center; }
.tag { display: inline-block; font-size: 13px; font-weight: 650; padding: 3px 10px; border-radius: 99px; background: var(--field); color: var(--muted); border: 1px solid var(--line); }
.tag.ok { background: var(--good-soft); color: var(--good); border-color: transparent; }
.tag.wait { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.tag.off { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
#welcome-dialog { width: min(600px, calc(100% - 32px)); }
#welcome-text { width: 100%; font: inherit; font-size: 14px; line-height: 1.5; resize: vertical; }
.roster.accounts td:nth-child(4) { width: auto; }
.connect-state.waiting { color: var(--brand); font-weight: 650; }
.connect-state.waiting::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 8px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; vertical-align: -1px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.by-hand { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.by-hand summary { cursor: pointer; color: var(--muted); font-weight: 600; font-size: 14px; }

/* ---------- Core subjects ---------- */
.core-controls { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
label.inline.check { font-size: 14px; color: var(--text); }
label.inline.check input { width: auto; }
.core-summary { font-size: 15px; margin: 4px 0 12px; }
.core-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 820px; }
.core-table th { text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--raised); }
.core-table tbody th { text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--text); background: transparent; width: 18%; }
.core-table tbody th small { display: block; font-weight: 500; color: var(--muted); }
.core-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); vertical-align: top; width: 17%; }
.core-table td.empty { text-align: center; color: var(--muted); padding: 24px; }
.core-cell small { display: block; color: var(--muted); font-size: 12px; margin: 2px 0 6px; line-height: 1.35; }
.core-cell.annotated { background: var(--st-finalized-soft); color: var(--st-finalized-text); font-weight: 650; }
.core-cell.annotated a { color: inherit; }
.core-cell.manual { background: var(--brand-soft); }
.core-cell.needed .core-need { color: var(--warn); font-weight: 700; }
.core-cell.missed { background: var(--bad-soft); }
.core-cell.missed .core-need { color: var(--bad); font-weight: 700; }
.core-mark { font: inherit; font-size: 12px; font-weight: 650; padding: 4px 10px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--text); }
.core-mark:hover { border-color: var(--brand); color: var(--brand); }
.core-mark.undo { border: 0; background: transparent; padding: 0; color: var(--brand); font-size: 14px; text-align: left; }
.core-mark.undo small { color: var(--muted); font-weight: 500; }
.core-elective { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); }
.core-sorting { margin-top: 16px; }
.core-sorting summary { cursor: pointer; font-weight: 700; }
.core-sort-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 16px; }
.core-sort-grid label { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; font-size: 14px; }
.core-sort-grid select { width: auto; max-width: 60%; padding: 4px 8px; }

.core-card h2 { margin-bottom: 8px; }
.core-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.core-mini li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.core-mini small { display: block; color: var(--muted); font-size: 12px; line-height: 1.35; }
.core-dot { flex: none; width: 12px; height: 12px; margin-top: 4px; border-radius: 50%; border: 2px solid var(--warn); }
.core-mini li.annotated .core-dot { background: var(--st-finalized); border-color: var(--st-finalized); }
.core-mini li.manual .core-dot { background: var(--brand); border-color: var(--brand); }
.core-mini li.missed .core-dot { border-color: var(--bad); }
.core-tag { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 650; background: var(--raised); }
.core-tag.fill { background: var(--warn-soft); }
.core-tag.ok { background: var(--st-finalized-soft); color: var(--st-finalized-text); }
.linkish { font: inherit; background: none; border: 0; padding: 0; color: var(--brand); cursor: pointer; text-decoration: underline; }
.meta.block { display: block; font-weight: 500; }
#welcome-hint.sent { color: var(--good); font-weight: 650; }
#welcome-hint.bad { color: var(--bad); font-weight: 650; }
.email-field { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--field); overflow: hidden; }
.email-field input { border: 0; border-radius: 0; background: transparent; min-width: 0; flex: 1; }
.email-domain { padding: 0 12px; color: var(--muted); font-weight: 600; white-space: nowrap; }

/* Running totals beside the student cards */
.dash-body { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.dash-body:has(> .rp-side[hidden]) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1000px) { .dash-body { grid-template-columns: minmax(0, 1fr); } }
.rp-side { padding: 16px 18px; }
.rp-side h2 { margin: 0; font-size: 18px; }
.core-sub { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 14px 0 6px; }
.side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.side-list li { display: grid; grid-template-columns: 100px 1fr auto; align-items: center; gap: 8px; }
.side-list li.here span:first-child, .side-list li.all span:first-child { font-weight: 700; }
.side-list b { font-variant-numeric: tabular-nums; }
.mini-bar { height: 8px; border-radius: 99px; background: var(--raised); overflow: hidden; border: 1px solid var(--line); }
.mini-bar i { display: block; height: 100%; background: var(--good); }
.behind { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.behind small { color: var(--muted); margin-left: 6px; }
.rp-side .btn { margin-top: 10px; }
.core-strip { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 8px; }
.core-strip span { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 99px; border: 1px solid var(--warn); color: var(--warn); }
.core-strip span.annotated { background: var(--st-finalized); border-color: var(--st-finalized); color: #fff; }
.core-strip span.manual { background: var(--brand); border-color: var(--brand); color: #fff; }
.core-strip span.missed { border-color: var(--bad); color: var(--bad); }
.core-table td.core-lps { width: 14%; white-space: nowrap; }
.core-lps span { display: block; font-size: 13px; line-height: 1.5; }
.core-lps span b { display: inline-block; min-width: 34px; color: var(--muted); }
.core-lps span.none { color: var(--muted); }
.lp-dots { list-style: none; margin: 0 0 4px; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.lp-dots li { display: grid; grid-template-columns: 44px auto 1fr; gap: 10px; align-items: center; }
.lp-dots li.here span:first-child { font-weight: 700; }
.lp-dots li.met b { color: var(--good); }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--muted); }
.dots i.on { background: var(--good); border-color: var(--good); }

/* Wide screens: the review panel sits beside the pages, so the totals stay in view. */
@media (min-width: 1200px) {
  .viewer-body { display: grid; grid-template-columns: minmax(0, 860px) 340px; justify-content: center; column-gap: 24px; align-items: start; }
  .viewer-body > .anno-bar, .viewer-body > .anno-hint { grid-column: 1 / -1; }
  .v-pages { margin: 0; max-width: none; }
  .v-panel { margin: 0; position: sticky; top: 0; max-height: calc(100vh - 110px); overflow: hidden auto; display: grid; gap: 14px; min-width: 0; }
  .v-panel > * { min-width: 0; margin: 0; }
  /* Review first, then the running totals, then the sample's details. */
  #v-review { order: 1; }
  #v-core { order: 2; }
  #v-info { order: 3; }
  .v-panel .finish-row { display: grid; grid-template-columns: 1fr; }
  .v-panel .finish-row .btn { width: 100%; }
}
.side-sum { margin: 8px 0 10px; font-size: 14px; }
.side-students { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.side-name { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 7px 8px; border: 0; border-radius: 8px;
  background: transparent; font: inherit; font-size: 14px; color: var(--text); cursor: pointer; text-align: left; }
.side-name:hover, .expanded > .side-name { background: var(--raised); }
.side-name b { font-size: 12px; white-space: nowrap; }
.side-students li.open .side-name b { color: var(--warn); }
.side-students li.late .side-name b { color: var(--bad); }
.side-students li.done .side-name b { color: var(--st-finalized-text); }
.side-detail { padding: 6px 8px 12px 10px; border-left: 3px solid var(--line); margin: 2px 0 8px 8px; }
.side-detail ul { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 8px; }
.side-detail li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.side-detail small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; }
.side-detail .core-mark { margin-top: 4px; }
.side-detail .core-mark.undo { font-size: 12px; margin-left: 4px; }
.side-detail li.annotated .core-dot { background: var(--st-finalized); border-color: var(--st-finalized); }
.side-detail li.manual .core-dot { background: var(--brand); border-color: var(--brand); }
.side-detail li.missed .core-dot { border-color: var(--bad); }
.core-boxes { display: inline-grid; grid-template-columns: repeat(4, 26px); gap: 4px; flex: none; }
.core-boxes i { height: 16px; border-radius: 4px; background: #fff; border: 1.5px solid var(--line); }
.core-boxes i.ok { background: var(--st-finalized); }
.core-boxes.labels i { height: auto; background: none; font-style: normal; font-size: 10px; font-weight: 700; color: var(--muted); text-align: center; text-transform: uppercase; }
.side-head { display: flex; justify-content: space-between; padding: 0 8px 2px; }
.side-name { align-items: center; }
.student-core .rp-chips { display: flex; gap: 6px; margin: 10px 0 12px; }
.student-core .side-head.mine { margin-top: 4px; font-weight: 650; font-size: 14px; }
.student-core .side-detail { border-left: 0; margin: 12px 0 0; padding: 0; }
.student-core .side-detail ul { grid-template-columns: 1fr; }
.side-detail li.needed small, .side-detail li.missed small { color: var(--bad); }
.side-detail li.needed .core-dot, .side-detail li.missed .core-dot { border-color: var(--bad); }

/* One student's page: each class and whether it has a sample in this LP */
.class-check { margin: 12px 0 16px; padding: 14px 18px; }
.class-check h2 { margin: 0 0 10px; font-size: 18px; }
.class-check h2 .meta { font-size: 13px; font-weight: 600; margin-left: 8px; }
.cc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cc-list li { display: grid; grid-template-columns: 22px auto auto 1fr; align-items: baseline; gap: 8px; font-size: 15px; }
.cc-list small { color: var(--muted); text-align: right; }
.cc-mark { font-weight: 800; }
.cc-list li.ok .cc-mark { color: var(--good); }
.cc-list li.no .cc-mark, .cc-list li.short .cc-mark { color: var(--bad); }
.cc-list li.no b { color: var(--muted); }
.cc-count { font-size: 12px; font-weight: 700; color: var(--muted); }

/* Top bar: WiSH goes home; the signed-in name opens Settings and Sign out */
a.brand { color: #fff; text-decoration: none; }
a.brand:hover { opacity: .9; }
.user-menu { position: relative; margin-left: 8px; }
.topbar .btn.small.user-btn { background: rgba(255, 255, 255, .18); font-weight: 700; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; padding: 6px; display: grid; gap: 2px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 20; }
.menu[hidden] { display: none; }
.menu button { border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--text); text-align: left; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.menu button:hover, .menu button:focus-visible { background: var(--brand-soft); color: var(--brand); outline: none; }

/* Dashboard: which LP is showing, as a filter rather than a title */
.lp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lp-pick { font-size: 15px; font-weight: 650; color: var(--text); }
.lp-pick select { font-size: 15px; }
.lp-head .lp-range { margin-left: 0; }

/* Settings and Share pages */
.settings-card { max-width: 620px; margin: 14px 0; padding: 18px 20px; }
.settings-card h2 { margin: 0; font-size: 18px; }
.settings-card > select { width: auto; min-width: 140px; max-width: 200px; justify-self: start; align-self: flex-start; }
.settings-card .dialog-actions { justify-content: flex-start; }
#screen-link .card { max-width: 720px; margin-top: 14px; padding: 18px 20px; }

/* Text boxes the student or family added: shown in place, edited only by them */
.anno.family { border: 1px dashed rgba(224, 122, 0, .7); pointer-events: auto; }
.anno.family .family-tag { position: absolute; top: -1.3em; left: -1px; font: 700 10px/1.4 system-ui, sans-serif; color: #fff; background: #e07a00; padding: 0 5px; border-radius: 4px; letter-spacing: .02em; }

/* Delete button in the viewer and the Trash page */
.trash-btn { margin-top: 12px; color: var(--muted); }
.trash-btn:hover { color: #c0392b; }
.trash-grid { display: grid; gap: 12px; margin-top: 16px; }
.trash-item { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding: 12px 16px; }
.trash-item img, .trash-item .noimg { width: 64px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; background: #fff; display: grid; place-items: center; }
.trash-info { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.trash-actions { display: flex; gap: 8px; }