/* Carlito: a free font with the same letter shapes as Calibri. Used on devices without Calibri. */
@font-face{font-family:Carlito;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/carlito-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Carlito;font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/carlito-latin-700-normal.woff2) format('woff2')}

:root{
  color-scheme:light;
  /* Sooner light look (branding/00-brand): paper page, white cards, ink text, Module Manager purple accent.
     The old dark theme is gone: the platform uses one light look in every part. */
  --ink:#1D2230; --ink-2:#454B58; --ink-3:#5F6673;
  --ground:#F6F5F1; --paper:#FFFFFF; --line:#E3E5EA; --line-2:#ECEDF1; --soft:#F3F4F6;
  --blue:#7B4FA0; --blue-tint:#F1EAF7; /* the app accent (name kept so the rest of this file still works) */
  --bad:#C0392B; --bad-tint:#FBEAE8;
  --head:#FFFFFF;
  --field-line:#8A8F9C; /* form field borders: 3:1 or more against white (WCAG 1.4.11) */
  /* chart tokens. Each mark is 3:1 or more against white. */
  --grid:#E3E5EA; --axis:#C9CDD6;
  --s1:#7B4FA0; --s2:#C9541E;
  /* ordinal: not yet -> strong. Warm for the two lower bands, purple for the two upper ones, so each band is clearly
     its own colour (one purple from light to dark was hard to tell apart). Each is 3:1 or more against white. */
  --o1:#C2452D; --o2:#B07300; --o3:#7650A3; --o4:#24093F;
  --none:#D6D5CF;
  --m-worried:#C0392B; --m-unsure:#D9685A; --m-neutral:#8F8D86; --m-curious:#2F6DB5;
  --good:#2E8B57; --warn:#C98A00; --serious:#D9685A; --critical:#C0392B;
  --sans:"Plus Jakarta Sans",Carlito,Calibri,"Segoe UI",system-ui,-apple-system,sans-serif;
  --r:14px; --shadow:0 1px 2px rgba(29,34,48,.06),0 4px 16px rgba(29,34,48,.06);
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font:17px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{margin:0;line-height:1.2;font-weight:700;text-wrap:balance}
h1{font-size:1.6rem} h2{font-size:1.25rem} h3{font-size:1.05rem}
p{margin:0}
.muted{color:var(--ink-3)} .small{font-size:.88rem} .tiny{font-size:.78rem}
.label{font-size:.74rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.end{justify-content:flex-end}
.spacer{flex:1}
.stack{display:flex;flex-direction:column;gap:12px}
.stack.tight{gap:4px}
.error{color:var(--bad);font-weight:700}
.num{font-variant-numeric:tabular-nums}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:var(--paper);border-radius:8px;padding:7px 14px;font-weight:700;font-size:.95rem;line-height:1.2;white-space:nowrap;color:var(--ink)}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.small{padding:4px 10px;font-size:.85rem}
.drawer .btn.ghost{background:transparent}
input[type=password],input[type=date],input[type=text],input[type=search],select,textarea{border:1px solid var(--field-line,var(--line));border-radius:8px;padding:7px 10px;background:var(--paper);min-width:0}
textarea{width:100%;resize:vertical}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.pad{padding:18px}
.login{min-height:100vh;display:grid;place-items:center;padding:16px}
.login .card{width:min(420px,100%)}

/* header and tabs */
/* The module bar under the shared Sooner top bar: module picker, the apps it uses, marking badge, Refresh. */
.mod-bar{background:var(--paper);border-bottom:1px solid var(--line)}
.mod-bar-in{max-width:1400px;margin:0 auto;padding:12px 16px;display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap}
.mod-title{display:flex;flex-direction:column;gap:2px;min-width:0;max-width:100%}
.sub{font-size:.88rem;color:var(--ink-3)}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;border-radius:99px;padding:4px 12px;background:var(--blue-tint);color:var(--ink)}
.sooner-bar .sooner-brand{border-radius:6px}
.tabs{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.tabs-in{max-width:1400px;margin:0 auto;padding:0 16px;display:flex;gap:4px;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:12px 14px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--blue)}
.tabs .count{font-weight:400;color:var(--ink-3);margin-left:4px}

.wrap{max-width:1400px;margin:0 auto;padding:18px 16px 60px}
.filters{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.filters label{display:flex;gap:8px;align-items:center;font-weight:700;font-size:.92rem}
.filters select{max-width:min(360px,70vw)}
.check{font-weight:400!important}
.notice{border-radius:var(--r);padding:12px 14px;margin-bottom:14px;font-size:.95rem}
.notice.bad{background:var(--bad-tint);color:var(--ink);border:1px solid var(--bad)}
.notice.info{background:var(--blue-tint);border:1px solid var(--line)}

section > * + *{margin-top:16px}
.grid2{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:900px){.grid2{grid-template-columns:minmax(0,1fr)}}
.card h2{font-size:1.1rem}
.card .intro{color:var(--ink-2);font-size:.9rem;margin-top:2px}
.card-head{display:flex;gap:10px;align-items:flex-start;justify-content:space-between;margin-bottom:12px}

/* stat tiles */
.tiles{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tile{padding:14px 16px}
.tile .v{font-size:2rem;font-weight:700;line-height:1.1;margin-top:4px}
.tile .v small{font-size:1rem;color:var(--ink-3);font-weight:400}
.tile .d{font-size:.85rem;color:var(--ink-2);margin-top:2px}

/* bar rows */
.bars{display:flex;flex-direction:column;gap:10px}
.bar-row{display:grid;grid-template-columns:minmax(120px,34%) minmax(0,1fr) 72px;gap:10px;align-items:center}
.bar-row .name{font-size:.92rem;line-height:1.25}
.bar-row .name small{display:block;color:var(--ink-3);font-size:.8rem}
.bar-row .val{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;font-size:.92rem}
.bar-row .val small{display:block;font-weight:400;color:var(--ink-3);font-size:.76rem}
.track{height:14px;background:var(--line-2);border-radius:0 4px 4px 0;position:relative}
.fill{height:100%;background:var(--s1);border-radius:0 4px 4px 0;min-width:2px}
.track .mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink)}
.stack-bar{display:flex;height:14px;gap:2px;border-radius:0 4px 4px 0;overflow:hidden}
.stack-bar > span{height:100%;min-width:3px}
.stack-bar.tall{height:22px}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.85rem;color:var(--ink-2);margin-top:10px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.hit{cursor:default}

/* status chip: icon + word, never colour alone */
.status{display:inline-flex;gap:6px;align-items:center;font-size:.85rem;font-weight:700;white-space:nowrap}
.status::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--c)}
.status.met{--c:var(--good)} .status.partly{--c:var(--warn)} .status.notyet{--c:var(--critical)} .status.none{--c:var(--none)} .status.few{--c:var(--none)}
.level{display:inline-block;font-size:.78rem;font-weight:700;border:1px solid var(--line);border-radius:99px;padding:1px 8px;white-space:nowrap;background:var(--soft)}
.tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:4px;padding:1px 6px;background:var(--soft);color:var(--ink-3)}

/* tables */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th{font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);text-align:left;font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:10px;border-bottom:1px solid var(--line-2);vertical-align:top}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
.task-name{font-weight:700}
.task-prompt{color:var(--ink-3);font-size:.85rem;max-width:460px}
details.numbers{margin-top:10px;font-size:.88rem}
details.numbers summary{cursor:pointer;color:var(--blue);font-weight:700}
details.numbers table{margin-top:6px}

/* classes */
.class-head{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-bottom:10px}
.class-head h2{font-size:1.25rem}
.objectives{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.obj{display:grid;grid-template-columns:minmax(0,1fr) auto 150px;gap:12px;align-items:center;font-size:.93rem}
@media (max-width:700px){.obj{grid-template-columns:minmax(0,1fr) auto}.obj .track{grid-column:1/-1}}
.act{background:var(--soft);border-radius:8px;padding:10px 12px;font-size:.92rem}
.act ul{margin:4px 0 0;padding-left:18px}

/* line chart */
.linechart svg{display:block;width:100%;height:auto;overflow:visible}
.linechart text{fill:var(--ink-3);font-size:12px;font-family:var(--sans)}
.linechart .end{fill:var(--ink-2);font-weight:700}

/* questions */
.worry{border-top:1px solid var(--line-2);padding-top:10px;margin-top:10px}
.worry:first-child{border-top:0;padding-top:0;margin-top:0}
.worry .ex{font-size:.88rem;color:var(--ink-2);margin:4px 0 0;padding-left:16px}
.worry .sug{font-size:.88rem;margin-top:4px}
.q-list{list-style:none;margin:0;padding:0}
.q-list li{padding:8px 0;border-bottom:1px solid var(--line-2);font-size:.93rem}
.q-list li:last-child{border-bottom:0}
.headline{font-size:1.05rem}

/* drawer */
.drawer-back{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:20}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(760px,100vw);background:var(--paper);z-index:21;display:flex;flex-direction:column;box-shadow:-4px 0 24px rgba(0,0,0,.15)}
.drawer-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.drawer-body{padding:16px 18px 40px;overflow-y:auto}
.answer{border:1px solid var(--line);border-radius:8px;padding:12px;margin-top:10px}
.answer .meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.85rem;color:var(--ink-3)}
.answer .text{white-space:pre-wrap;margin-top:6px}
.answer .why{font-size:.88rem;color:var(--ink-2);margin-top:6px;border-left:3px solid var(--line);padding-left:8px}
.rating{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--ink)}
.rating i{width:10px;height:10px;border-radius:3px;display:inline-block}
.outcome-row{border:1px solid var(--line);border-radius:8px;padding:10px;display:grid;gap:8px}
.outcome-row .lv{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.88rem}
.pills{display:flex;gap:6px;flex-wrap:wrap}
.pills button{border:1px solid var(--line);background:var(--paper);border-radius:99px;padding:3px 10px;font-size:.85rem}
.pills button[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.tip{position:fixed;z-index:40;pointer-events:none;background:var(--ink);color:var(--paper);font-size:.85rem;line-height:1.35;border-radius:6px;padding:7px 9px;max-width:300px;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.tip b{display:block}
.empty{padding:28px;text-align:center;color:var(--ink-3)}
@media (forced-colors: active){.fill,.stack-bar > span{forced-color-adjust:none}}

/* set up */
.su-bar{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}
.su{display:grid;grid-template-columns:260px minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:900px){.su{grid-template-columns:minmax(0,1fr)}}
.su-nav{padding:8px;display:flex;flex-direction:column;gap:2px;position:sticky;top:56px;max-height:calc(100vh - 72px);overflow-y:auto}
@media (max-width:900px){.su-nav{position:static;max-height:none}}
.su-item{display:flex;gap:8px;align-items:flex-start;text-align:left;background:none;border:0;border-radius:8px;padding:8px 10px;font-weight:700;font-size:.93rem;color:var(--ink)}
.su-item small{display:block;font-weight:400;color:var(--ink-3);font-size:.8rem}
.su-item:hover{background:var(--soft)}
.su-item[aria-current="true"]{background:var(--blue-tint);box-shadow:inset 3px 0 0 var(--blue)}
.su-add{padding:8px 10px}
.dot{width:9px;height:9px;border-radius:50%;margin-top:6px;flex:none;background:var(--none)}
.dot.ok{background:var(--good)} .dot.bad{background:var(--critical)} .dot.wait{background:var(--warn)}
.su-main{display:flex;flex-direction:column;gap:16px;min-width:0}
.fgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.fgrid .wide{grid-column:span 2}
@media (max-width:600px){.fgrid .wide{grid-column:auto}}
.fld{display:flex;flex-direction:column;gap:4px;min-width:0}
.fld input,.fld select,.fld textarea{width:100%}
.drop{display:block;border:2px dashed var(--line);border-radius:10px;padding:18px;text-align:center;cursor:pointer;background:var(--soft)}
.drop.over,.drop:hover{border-color:var(--blue)}
.task-card{border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}
.check{display:inline-flex;gap:6px;align-items:center}
.notice ul{margin:4px 0 0;padding-left:18px}
input[type=number],input[type=email],input[type=url]{border:1px solid var(--field-line,var(--line));border-radius:8px;padding:7px 10px;background:var(--paper);min-width:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mod-pick select{font-weight:700;font-size:1.05rem;padding:8px 12px;border-radius:10px;max-width:min(520px,100%);min-height:44px}
.app-choice{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.app-choice input{margin-top:4px}
.app-choice small{display:block;color:var(--ink-3);font-size:.85rem}
.btn.danger{color:var(--bad);border-color:var(--bad)}
.btn.danger:hover{background:var(--bad-tint)}

/* Links and Blackboard (Set up) */
.share-item{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--line-2);padding-top:10px}
.share-code{display:block;background:var(--soft);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;overflow-wrap:anywhere;white-space:pre-wrap;user-select:all}
.who{font-size:.72rem;font-weight:700;border-radius:99px;padding:1px 8px;border:1px solid var(--line)}
.who.stu{background:var(--blue-tint)}
.who.staff{background:var(--soft)}

/* Week content (Set up): slides, learning material and links for each app */
.content-card h3.sub{font-size:1rem;margin:6px 0 0}
.file-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;border:1px solid var(--line-2);border-radius:8px;padding:6px 10px}
.drop.small-drop{padding:12px}
.content-card .task-part{border-top:1px solid var(--line-2);padding-top:12px;margin-top:4px}
.content-card > h2{font-size:1.25rem}

/* The module's own documents (Set up, Module details) */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-top:6px}
.doc-box{display:flex;flex-direction:column;gap:6px;border:1px solid var(--line-2);border-radius:10px;padding:12px}
.leader-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid var(--line);flex:none}
.leader-photo.empty{display:inline-flex;align-items:center;justify-content:center;background:var(--soft);font-weight:700;color:var(--ink-3)}
/* File choosers: hidden from sight but still reachable with the Tab key (WCAG 2.1.1). The label around them shows the focus ring. */
.file-in{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;opacity:0}
/* The hidden file box sits inside its own button or drop area, so it cannot push the page wider (it did: 1319 px on a 1280 px laptop). */
.drop,label.btn{position:relative}
.file-in{left:0;top:0}
label:has(.file-in:focus-visible){outline:3px solid var(--blue);outline-offset:2px}
/* On a narrow phone screen (or 400% zoom) long button labels wrap instead of making the page scroll sideways (WCAG 1.4.10) */
@media (max-width:480px){.btn{white-space:normal;text-align:center}}

/* ---------- Sooner light look: finishing touches ---------- */
/* Focus: sooner.css draws an amber ring, which is faint on white (about 1.8:1). Here the outer ring is the app purple
   (6:1 on white), so it is easy to see (WCAG 2.4.7, 1.4.11). The higher specificity wins over sooner.css. */
html[data-app] :focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 5px var(--blue)}
.btn{border-radius:999px;padding:8px 16px;min-height:38px;border-color:#C9CDD6;transition:background-color .15s ease,border-color .15s ease}
.btn:hover{border-color:var(--blue);background:var(--blue-tint)}
.btn.primary:hover{background:#673E8A;border-color:#673E8A}
.btn.small{min-height:32px;padding:5px 12px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.danger:hover{background:var(--bad-tint);border-color:var(--bad)}
.card{border-radius:var(--r)}
.tile .v{color:var(--ink)}
.tabs{box-shadow:0 1px 0 rgba(29,34,48,.03)}
.tabs button{border-radius:8px 8px 0 0}
.tabs button:hover{color:var(--ink);background:var(--soft)}
.tabs button[aria-selected="true"]{color:var(--blue)}
.tabs button[aria-selected="true"] .count{color:var(--blue)}
.label{color:var(--ink-3)}
.act{background:var(--blue-tint)}
.drawer-back{background:rgba(29,34,48,.35)}
details.numbers summary{color:var(--blue)}
.su-item[aria-current="true"]{color:var(--ink)}
/* Teachers see the set-up but cannot change it: fields stay readable, not greyed out. */
.su-readonly input:disabled,.su-readonly select:disabled,.su-readonly textarea:disabled{color:var(--ink);-webkit-text-fill-color:var(--ink);background:var(--soft);opacity:1;cursor:default}
.su-readonly .leader-only{display:none!important}
input[type=checkbox]{accent-color:var(--blue)}
.su-readonly input[type=checkbox]{cursor:default}
.readonly-note{display:flex;gap:10px;align-items:flex-start;background:var(--blue-tint);border-left:4px solid var(--blue);border-radius:8px;padding:10px 14px;font-size:.95rem;color:var(--ink)}
/* Phone width: no sideways page scroll. Wide tables scroll inside their own box. */
html,body{overflow-x:hidden}
@media (max-width:640px){
  .mod-bar-in{padding:10px 16px}
  .mod-pick,.mod-pick select{width:100%;max-width:100%}
  .filters label:not(.check){flex:1 1 100%;min-width:0}
  .filters select{flex:1 1 auto;min-width:0;width:100%;max-width:none}
  /* Wide tables become a list of cards on a phone: one card for each row, each value with its column name before it
     (the page copies the column names into data-label). Nothing hides off the right edge. */
  .table-wrap{overflow:visible}
  .table-wrap > table, .table-wrap > table > tbody, .table-wrap > table > tbody > tr, .table-wrap > table > tbody > tr > td{display:block;width:100%}
  .table-wrap > table > thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .table-wrap > table > tbody > tr{border:1px solid var(--line);border-radius:10px;padding:6px 12px;margin:0 0 10px;background:var(--paper)}
  .table-wrap > table > tbody > tr > td{border:0;padding:6px 0;text-align:left}
  .table-wrap > table > tbody > tr > td[data-label]:not([data-label=""]){position:relative;padding-left:calc(38% + 10px);min-height:2em}
  .table-wrap > table > tbody > tr > td[data-label]:not([data-label=""])::before{content:attr(data-label);position:absolute;left:0;top:8px;width:38%;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:700}
  .table-wrap > table > tbody > tr > td + td{border-top:1px solid var(--line-2)}
  /* The first cell (task, question, name) is the card's title: full width, its column name above it. */
  .table-wrap > table > tbody > tr > td:first-child[data-label]:not([data-label=""]){padding-left:0}
  .table-wrap > table > tbody > tr > td:first-child[data-label]:not([data-label=""])::before{position:static;display:block;width:auto;margin-bottom:4px}
  .table-wrap > table > tbody > tr > td[colspan]{display:block}
  .table-wrap > table > tbody > tr > td input:not([type=checkbox]),.table-wrap > table > tbody > tr > td select{width:100%}
  .tabs button{font-size:.95rem}
  .wrap{padding:14px 16px 48px}
  .pad{padding:16px}
  .tile .v{font-size:1.6rem}
  .bar-row{grid-template-columns:minmax(0,1fr) 64px}
  .bar-row .track{grid-column:1/-1;grid-row:2}
  .tabs button{padding:12px 10px}
}
/* "Estimated marks. Students are anonymous." with the full rules in a fold-out. */
details.how{margin:0 0 12px}
details.how summary{cursor:pointer;color:var(--ink-2)}
details.how p{margin:6px 0 0;max-width:80ch}
/* A tile with nothing to count yet says so in words instead of a big "0%". */
.tile .v .none-yet{display:block;font-size:1rem;font-weight:700;line-height:1.3;color:var(--ink-2)}