/* ═══════════════════════════════════════════════════════════════════
   stream-2a.css — Teacher "Stream" redesign (option 2a "Today Timeline")
   A dark 3-column command dashboard, SCOPED to `.st2` so the rest of the
   (light) app is untouched. Tokens are the design-handoff §5 values, mapped
   to page-local custom properties. Fonts: the app's own (Outfit / system) +
   IBM Plex Mono (already loaded) for labels/timestamps — no new webfont.
   ═══════════════════════════════════════════════════════════════════ */
.st2{
  /* surfaces */
  --s2-canvas:#0b0b0e; --s2-app:#0d0d11; --s2-nav:#121218;
  --s2-card:#17171f; --s2-inset:#1e1e27; --s2-input:#1c1c24; --s2-chip:#20202a;
  /* borders — stronger so cards read as distinct panels on the dark canvas */
  --s2-bw:#34343f; --s2-bnav:#26262f; --s2-bcard:#2e2e3a; --s2-bchip:#2b2b36;
  --s2-bhover:#40404c; --s2-drail:#2a2a33; --s2-dlist:#26262f;
  /* text — brighter secondary/label tiers; the old faint grays were unreadable */
  --s2-strong:#f6f6f9; --s2-text:#f2f2f5; --s2-head:#ececf1; --s2-2:#d4d4dc;
  --s2-muted:#aeaeba; --s2-faint:#9999a6; --s2-faintest:#7e7e8a;
  /* accent (violet) */
  --s2-acc:#8b7bff; --s2-acc2:#a99bff; --s2-acc-tx:#c4bbff;
  --s2-acc-grad:linear-gradient(135deg,#a99bff,#8b7bff);
  --s2-av-grad:linear-gradient(135deg,#8b7bff,#6f5cff);
  --s2-acc-tint:rgba(139,123,255,.13);
  /* status */
  --s2-ok:#35c98a; --s2-warn:#e6b25a; --s2-danger:#e5677a; --s2-info:#6aa8ff;
  --s2-ok-t:rgba(53,201,138,.12); --s2-warn-t:rgba(230,178,90,.14); --s2-danger-t:rgba(229,103,122,.14);
  /* fonts — reuse the app's, no CDN. Outfit ≈ the geometric display; system sans for body; Plex Mono for data */
  --s2-display:'Outfit',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --s2-sans:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --s2-mono:'IBM Plex Mono',ui-monospace,'Cascadia Code',Consolas,monospace;

  background:var(--s2-app); color:var(--s2-text); font-family:var(--s2-sans);
  border:1px solid var(--s2-bw); border-radius:20px; overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85);
  max-width:1240px; margin:0 auto; -webkit-font-smoothing:antialiased;
  /* fill the viewport height so the window occupies the screen instead of
     floating as a short card in a sea of black */
  display:flex; flex-direction:column; min-height:calc(100vh - 34px);
}
.st2 .s2-body{flex:1}
.st2 *{box-sizing:border-box}
.st2 ::selection{background:rgba(139,123,255,.32)}
.st2 button{font-family:inherit;cursor:pointer}
.st2 .mono{font-family:var(--s2-mono)}
.st2 .num{font-family:var(--s2-display);font-variant-numeric:tabular-nums}

/* section labels */
.st2 .s2-lbl{font-family:var(--s2-mono);font-size:10px;font-weight:400;letter-spacing:.11em;
  text-transform:uppercase;color:var(--s2-faint);margin:0 0 10px}

/* ── body grid ── */
.st2 .s2-body{display:grid;grid-template-columns:236px minmax(0,1fr) 300px;align-items:stretch}
.st2 .s2-left{border-right:1px solid var(--s2-drail);padding:18px 16px}
.st2 .s2-center{padding:20px 22px;min-width:0}
.st2 .s2-right{border-left:1px solid var(--s2-drail);padding:18px 16px;display:flex;flex-direction:column;gap:16px}

/* ── left rail ── */
.st2 .s2-classcard{display:flex;gap:11px;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--s2-drail);margin-bottom:16px}
.st2 .s2-tile{flex:0 0 auto;width:40px;height:40px;border-radius:11px;background:var(--s2-av-grad);color:#0a0a0c;
  font-family:var(--s2-display);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.st2 .s2-classcard .nm{font-family:var(--s2-display);font-weight:600;font-size:13.5px;color:var(--s2-head);line-height:1.15}
.st2 .s2-classcard .sub{font-family:var(--s2-mono);font-size:10px;letter-spacing:.04em;color:var(--s2-muted);margin-top:3px}

.st2 .s2-qa{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:2px}
.st2 .s2-qa button{width:100%;display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;
  border:0;background:transparent;color:var(--s2-2);font-size:13;text-align:left}
.st2 .s2-qa button i{width:16px;text-align:center;font-size:14px;color:var(--s2-muted)}
.st2 .s2-qa button:hover{background:var(--s2-inset);color:var(--s2-text)}
.st2 .s2-qa button.on{color:var(--s2-acc-tx);background:rgba(139,123,255,.1)}
.st2 .s2-qa button.on:hover{background:rgba(139,123,255,.16)}
.st2 .s2-qa button.on i{color:var(--s2-acc-tx)}

.st2 .s2-sched{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:12px}
.st2 .s2-sched li{display:flex;gap:11px}
.st2 .s2-sched .tm{flex:0 0 auto;width:40px}
.st2 .s2-sched .tm .t{font-family:var(--s2-mono);font-size:11px;color:var(--s2-faint);line-height:1.1}
.st2 .s2-sched .tm .ap{font-family:var(--s2-mono);font-size:9px;color:var(--s2-faintest);letter-spacing:.05em}
.st2 .s2-sched .ti{font-family:var(--s2-display);font-weight:500;font-size:12.5px;color:var(--s2-head);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.st2 .s2-sched .rm{font-family:var(--s2-mono);font-size:9.5px;color:var(--s2-faint);margin-top:2px}
.st2 .s2-now{font-family:var(--s2-mono);font-size:8px;letter-spacing:.06em;color:var(--s2-acc-tx);
  background:rgba(139,123,255,.14);border-radius:5px;padding:1px 6px;display:inline-flex;align-items:center;gap:5px}
.st2 .s2-dot{width:5px;height:5px;border-radius:50%;display:inline-block}
.st2 .s2-dot.live{animation:s2pulse 1.8s ease-in-out infinite}
@keyframes s2pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}

.st2 .s2-code{border:1px dashed #2a2a34;border-radius:11px;padding:12px 13px;margin-top:4px}
.st2 .s2-code .row{display:flex;align-items:center;gap:10px;margin-top:8px}
.st2 .s2-code .val{font-family:var(--s2-display);font-weight:600;font-size:16px;letter-spacing:.08em;color:var(--s2-head);flex:1}
.st2 .s2-code button{width:28px;height:28px;border-radius:8px;border:1px solid #2a2a34;background:transparent;color:var(--s2-muted);display:flex;align-items:center;justify-content:center}
.st2 .s2-code button:hover{color:var(--s2-acc-tx);border-color:var(--s2-acc)}

/* ── KPI strip ── */
.st2 .s2-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:18px}
.st2 .s2-kpi{position:relative;overflow:hidden;background:var(--s2-card);border:1px solid var(--s2-bcard);border-radius:13px;padding:12px 13px}
.st2 .s2-kpi:hover{border-color:var(--s2-bhover)}
.st2 .s2-kpi .bar{position:absolute;left:0;top:11px;bottom:11px;width:3px;border-radius:3px}
.st2 .s2-kpi .k{font-family:var(--s2-mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--s2-muted);padding-left:8px}
.st2 .s2-kpi .v{font-family:var(--s2-display);font-weight:600;font-size:23px;letter-spacing:-.01em;color:var(--s2-strong);padding-left:8px;margin-top:3px}

/* ── composer ── */
.st2 .s2-composer{background:var(--s2-card);border:1px solid var(--s2-bcard);border-radius:14px;padding:14px;margin-bottom:18px}
.st2 .s2-composer.open{border-color:#2f2b45;padding:16px;box-shadow:0 0 0 1px rgba(139,123,255,.22),0 24px 60px -30px rgba(0,0,0,.75)}
.st2 .s2-cav{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--s2-av-grad);color:#fff;
  font-family:var(--s2-display);font-weight:600;font-size:12px;display:flex;align-items:center;justify-content:center}
.st2 .s2-crow{display:flex;gap:12px;align-items:center}
.st2 .s2-cfake{flex:1;background:var(--s2-input);border:1px solid var(--s2-bchip);border-radius:10px;padding:11px 14px;color:var(--s2-faint);cursor:text;font-size:13.5px}
.st2 .s2-cfoot{display:flex;align-items:center;margin-top:12px;border-top:1px solid var(--s2-dlist);padding-top:12px}
.st2 .s2-attach{display:flex;gap:6px}
.st2 .s2-attach button{display:flex;align-items:center;gap:6px;padding:7px 11px;border-radius:8px;border:0;background:transparent;color:var(--s2-muted);font-size:11.5px}
.st2 .s2-attach button i{font-size:14px}
.st2 .s2-attach button:hover{background:var(--s2-input);color:var(--s2-head)}
.st2 .s2-post{margin-left:auto;padding:9px 18px;border-radius:9px;border:0;background:var(--s2-acc-grad);color:#0a0a0c;font-weight:600;font-size:12.5px;display:inline-flex;align-items:center;gap:7px}
.st2 .s2-post:hover{filter:brightness(1.08)}
/* composer expanded */
.st2 .s2-ctabs{display:flex;gap:7px;margin-bottom:14px}
.st2 .s2-ctab{padding:6px 13px;border-radius:20px;border:0;background:transparent;color:var(--s2-muted);font-size:12px;font-weight:500}
.st2 .s2-ctab:hover{color:var(--s2-head)}
.st2 .s2-ctab.on{color:var(--s2-acc-tx);background:rgba(139,123,255,.16);font-weight:600}
.st2 .s2-ta{flex:1;min-height:96px;background:var(--s2-input);border:1px solid #33304a;border-radius:10px;padding:13px 15px;
  color:var(--s2-text);line-height:1.6;font-size:13.5px;font-family:inherit;resize:vertical}
.st2 .s2-ta::placeholder{color:var(--s2-muted)}
.st2 .s2-aud{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:11.5px;color:var(--s2-muted)}
.st2 .s2-aud .chip{display:inline-flex;align-items:center;gap:6px;background:var(--s2-input);border:1px solid var(--s2-bchip);color:var(--s2-2);border-radius:16px;padding:3px 10px}
.st2 .s2-aud .add{border:1px dashed var(--s2-bchip);border-radius:16px;padding:3px 10px;background:transparent;color:var(--s2-muted)}
/* audience picker: "To:" button + dropdown of periods/students */
.st2 .s2-audbtn{display:inline-flex;align-items:center;gap:8px;background:var(--s2-input);border:1px solid var(--s2-bchip);
  color:var(--s2-2);border-radius:16px;padding:4px 12px;font-size:11.5px;cursor:pointer;font-family:inherit}
.st2 .s2-audbtn:hover{border-color:var(--s2-bhover)}
.st2 .s2-audbtn.on{border-color:var(--s2-acc);color:var(--s2-text)}
.st2 .s2-audbtn i{font-size:9px;color:var(--s2-faint)}
.st2 .s2-audpanel{margin-top:8px;border:1px solid var(--s2-bcard);border-radius:12px;background:var(--s2-inset);
  max-height:280px;overflow:auto;padding:6px}
.st2 .s2-audtop{display:flex;gap:8px;padding:4px 6px 8px;border-bottom:1px solid var(--s2-drail);margin-bottom:6px}
.st2 .s2-audtop button{background:none;border:0;cursor:pointer;font-family:var(--s2-mono);font-size:10px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--s2-acc-tx,var(--s2-acc));padding:2px 4px;border-radius:5px}
.st2 .s2-audtop button:hover{background:var(--s2-chip)}
.st2 .s2-audsec{margin-bottom:4px}
.st2 .s2-audhead{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;cursor:pointer;font-size:12.5px;color:var(--s2-head);font-weight:600}
.st2 .s2-audhead:hover{background:var(--s2-chip)}
.st2 .s2-audhead .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st2 .s2-audhead .ct{font-family:var(--s2-mono);font-size:9.5px;font-weight:400;color:var(--s2-faint);white-space:nowrap}
.st2 .s2-audstuds{padding:0 8px 6px 30px;display:flex;flex-direction:column;gap:1px}
.st2 .s2-audstud{display:flex;align-items:center;gap:9px;padding:4px 6px;border-radius:7px;cursor:pointer;font-size:12px;color:var(--s2-2)}
.st2 .s2-audstud:hover{background:var(--s2-chip)}
.st2 .s2-audhead input,.st2 .s2-audstud input{width:15px;height:15px;accent-color:var(--s2-acc);cursor:pointer;flex:0 0 auto}
.st2 .s2-audempty{padding:16px;text-align:center;font-size:12px;color:var(--s2-faint)}
/* targeted-post chip on a feed announcement card */
.st2 .s2-target{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--s2-acc-tx,var(--s2-acc));
  background:var(--s2-acc-tint);border-radius:12px;padding:2px 9px}
.st2 .s2-target i{font-size:10px}
.st2 .s2-cfoot2{display:flex;align-items:center;margin-top:14px;border-top:1px solid var(--s2-dlist);padding-top:13px}
.st2 .s2-iconbtn{width:34px;height:34px;border-radius:8px;border:0;background:transparent;color:var(--s2-muted);display:inline-flex;align-items:center;justify-content:center;font-size:15px}
.st2 .s2-iconbtn:hover{background:var(--s2-input);color:var(--s2-acc-tx)}
.st2 .s2-cancel{margin-left:auto;padding:8px 14px;border-radius:9px;border:0;background:transparent;color:var(--s2-muted);font-size:12.5px;font-weight:500}
.st2 .s2-cancel:hover{background:var(--s2-input)}

/* ── filter bar ── */
.st2 .s2-filter{display:flex;align-items:center;gap:7px;margin-bottom:16px;flex-wrap:wrap}
.st2 .s2-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;border:0;background:transparent;color:var(--s2-muted);font-size:11.5px;font-weight:500}
.st2 .s2-chip:hover{color:var(--s2-head)}
.st2 .s2-chip.on{color:var(--s2-acc-tx);background:rgba(139,123,255,.16);font-weight:600}
.st2 .s2-chip .ct{font-family:var(--s2-mono);font-size:9.5px;opacity:.75}

/* ── feed ── */
.st2 .s2-divider{display:flex;align-items:center;gap:12px;margin:8px 0 14px}
.st2 .s2-divider span{font-family:var(--s2-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--s2-faint)}
.st2 .s2-divider .hr{flex:1;height:1px;background:var(--s2-drail)}
.st2 .s2-fcard{background:var(--s2-card);border:1px solid var(--s2-bcard);border-radius:14px;padding:15px;margin-bottom:12px}
.st2 .s2-fhead{display:flex;gap:11px;align-items:flex-start}
.st2 .s2-fav{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#22222c;border:1px solid #2e2e39;color:#cfcfd8;
  font-family:var(--s2-display);font-weight:600;font-size:12px;display:flex;align-items:center;justify-content:center}
.st2 .s2-fav.alert{background:var(--s2-danger-t);border-color:transparent;color:var(--s2-danger)}
.st2 .s2-fmeta{flex:1;min-width:0}
.st2 .s2-fname{font-weight:600;font-size:13px;color:var(--s2-head);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.st2 .s2-faction{font-weight:400;font-size:12px;color:var(--s2-muted)}
.st2 .s2-ftime{font-family:var(--s2-mono);font-size:10px;color:var(--s2-faint);margin-top:3px}
.st2 .s2-pin{font-family:var(--s2-mono);font-size:8.5px;letter-spacing:.06em;color:var(--s2-acc-tx);background:rgba(139,123,255,.14);border-radius:5px;padding:1px 6px;display:inline-flex;align-items:center;gap:4px}
.st2 .s2-fbody{margin-top:11px;font-size:13px;line-height:1.55;color:var(--s2-2)}
.st2 .s2-ffoot{display:flex;gap:16px;margin-top:12px;border-top:1px solid var(--s2-dlist);padding-top:11px;font-size:12px;color:var(--s2-muted)}
.st2 .s2-ffoot button{border:0;background:transparent;color:inherit;display:inline-flex;align-items:center;gap:7px;font-size:12px;padding:0}
.st2 .s2-ffoot button:hover .fa-heart,.st2 .s2-ffoot .like:hover{color:var(--s2-danger)}
.st2 .s2-ffoot .cmt:hover{color:var(--s2-acc-tx)}
/* "seen by X of Y" read-receipt on a teacher announcement */
.st2 .s2-seen{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--s2-muted)}
.st2 .s2-seen i{font-size:11px;color:var(--s2-faint)}
.st2 .s2-seen.all{color:var(--s2-ok)}
.st2 .s2-seen.all i{color:var(--s2-ok)}

/* submit sub-card */
.st2 .s2-sub{background:var(--s2-inset);border:1px solid var(--s2-bcard);border-radius:12px;padding:11px;margin-top:11px;display:flex;gap:13px}
.st2 .s2-thumb{flex:0 0 auto;width:124px;height:74px;border-radius:9px;position:relative;overflow:hidden;
  background:repeating-linear-gradient(135deg,#1b1b23,#1b1b23 9px,#181820 9px,#181820 18px);display:flex;align-items:center;justify-content:center}
.st2 .s2-thumb .ic{font-size:22px;color:rgba(255,255,255,.55)}
.st2 .s2-thumb .badge{position:absolute;left:6px;top:6px;font-family:var(--s2-mono);font-size:8.5px;letter-spacing:.08em;padding:1px 5px;border-radius:4px;background:rgba(10,10,12,.72)}
.st2 .s2-thumb .meta{position:absolute;right:6px;bottom:6px;font-family:var(--s2-mono);font-size:9.5px;padding:1px 5px;border-radius:4px;background:rgba(10,10,12,.72);color:#d0d0d8}
.st2 .s2-subinfo{flex:1;min-width:0;display:flex;flex-direction:column}
.st2 .s2-subtitle{font-family:var(--s2-display);font-weight:600;font-size:13.5px;color:var(--s2-head)}
.st2 .s2-subnote{font-size:12px;color:var(--s2-muted);margin-top:3px}
.st2 .s2-subbtns{display:flex;gap:8px;margin-top:auto;padding-top:10px}
.st2 .s2-grade-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:9px;border:0;background:var(--s2-acc-grad);color:#0a0a0c;font-weight:600;font-size:12px}
.st2 .s2-grade-btn:hover{filter:brightness(1.08)}
.st2 .s2-ghost{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:9px;border:1px solid #2a2a34;background:transparent;color:var(--s2-2);font-size:12px}
.st2 .s2-ghost:hover{border-color:var(--s2-bhover);color:var(--s2-text)}

/* question */
.st2 .s2-ctx{display:inline-flex;align-items:center;font-family:var(--s2-mono);font-size:9.5px;color:var(--s2-2);background:var(--s2-chip);border:1px solid var(--s2-bchip);border-radius:6px;padding:2px 8px;margin-top:11px}
.st2 .s2-reply{display:flex;gap:8px;margin-top:11px}
.st2 .s2-reply input{flex:1;background:var(--s2-input);border:1px solid var(--s2-bchip);border-radius:9px;padding:9px 12px;color:var(--s2-text);font-family:inherit;font-size:12.5px}
.st2 .s2-reply input::placeholder{color:var(--s2-faint)}

/* grade card */
.st2 .s2-gradecard{background:var(--s2-inset);border:1px solid var(--s2-bcard);border-radius:12px;padding:13px 15px;margin-top:11px;display:flex;align-items:center;justify-content:space-between}
.st2 .s2-gradecard .an{font-family:var(--s2-display);font-weight:600;font-size:13.5px;color:var(--s2-head)}
.st2 .s2-gradecard .rt{font-family:var(--s2-mono);font-size:10px;color:var(--s2-faint);margin-top:2px}
.st2 .s2-score{font-family:var(--s2-display);font-weight:600;font-size:22px;color:var(--s2-ok)}
.st2 .s2-score .o{font-size:12px;color:var(--s2-faint)}

/* due card */
.st2 .s2-duefoot{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.st2 .s2-duecount{font-family:var(--s2-mono);font-size:11px;color:var(--s2-warn)}

/* ── right rail cards ── */
.st2 .s2-rcard{background:var(--s2-card);border:1px solid var(--s2-bcard);border-radius:14px;padding:14px 15px}
.st2 .s2-rhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.st2 .s2-rtitle{font-family:var(--s2-display);font-weight:600;font-size:13px;color:var(--s2-head);display:flex;align-items:center;gap:8px}
.st2 .s2-rlink{font-size:11.5px;color:var(--s2-muted);border:0;background:transparent;font-family:var(--s2-mono);letter-spacing:.03em}
.st2 .s2-rlink:hover{color:var(--s2-acc-tx)}
.st2 .s2-live{font-family:var(--s2-mono);font-size:8.5px;letter-spacing:.08em;color:var(--s2-ok);display:inline-flex;align-items:center;gap:5px}

.st2 .s2-att-big{font-family:var(--s2-display);font-weight:600;font-size:20px;color:var(--s2-ok)}
.st2 .s2-att-big span{font-size:12px;color:var(--s2-muted);font-family:var(--s2-sans);font-weight:400;margin-left:6px}
.st2 .s2-prog{height:7px;border-radius:4px;background:var(--s2-dlist);overflow:hidden;margin:10px 0}
.st2 .s2-prog span{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,#35c98a,#2fae78)}
.st2 .s2-legend{display:flex;gap:16px;font-size:11.5px;color:var(--s2-muted)}
.st2 .s2-legend span{display:inline-flex;align-items:center;gap:6px}

/* calendar */
.st2 .s2-calnav{display:flex;gap:4px}
.st2 .s2-calnav button{width:24px;height:24px;border-radius:7px;border:1px solid var(--s2-bchip);background:transparent;color:var(--s2-muted);display:flex;align-items:center;justify-content:center;font-size:11px}
.st2 .s2-calnav button:hover{color:var(--s2-acc-tx);border-color:var(--s2-acc)}
.st2 .s2-caldow,.st2 .s2-calgrid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center}
.st2 .s2-caldow span{font-family:var(--s2-mono);font-size:9px;color:var(--s2-faint);padding-bottom:6px}
.st2 .s2-calgrid .d{height:28px;position:relative;font-family:var(--s2-display);font-size:11px;color:var(--s2-2);display:flex;align-items:center;justify-content:center}
.st2 .s2-calgrid .d.today{font-weight:600}
.st2 .s2-calgrid .d.today .cir{position:absolute;width:23px;height:23px;border-radius:50%;background:var(--s2-av-grad);z-index:0}
.st2 .s2-calgrid .d.today .n{position:relative;z-index:1;color:#0a0a0c}
.st2 .s2-calgrid .d .mk{position:absolute;bottom:2px;width:4px;height:4px;border-radius:50%}

/* upcoming */
.st2 .s2-uprow{padding:10px 0;border-top:1px solid var(--s2-dlist)}
.st2 .s2-uprow:first-of-type{border-top:0;padding-top:2px}
.st2 .s2-uptop{display:flex;align-items:center;justify-content:space-between;gap:8px}
.st2 .s2-uptitle{font-family:var(--s2-display);font-weight:500;font-size:12px;color:var(--s2-head);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st2 .s2-updone{font-family:var(--s2-mono);font-size:10px;color:var(--s2-faint);flex:0 0 auto}
.st2 .s2-updue{display:flex;align-items:center;gap:6px;font-size:11.5px;margin-top:4px}

/* recent files */
.st2 .s2-filerow{display:flex;align-items:center;gap:11px;padding:9px 0;border-top:1px solid var(--s2-dlist)}
.st2 .s2-filerow:first-of-type{border-top:0}
.st2 .s2-ext{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:var(--s2-input);border:1px solid #23232b;
  font-family:var(--s2-mono);font-size:8px;font-weight:500;display:flex;align-items:center;justify-content:center}
.st2 .s2-fileinfo{flex:1;min-width:0}
.st2 .s2-filename{font-size:12px;color:var(--s2-head);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st2 .s2-filewhen{font-family:var(--s2-mono);font-size:9.5px;color:var(--s2-faint);margin-top:2px}
.st2 .s2-empty{color:var(--s2-faint);font-size:12px;padding:6px 0}

/* ── LIGHT THEME — when the app's Display setting is Light (no body.theme-dark).
   A designed light surface ladder (not an inversion): white cards on a cool
   grey canvas, the same violet accent (text shades darkened for AA on white),
   status hues deepened so the dots/labels stay legible. ── */
body:not(.theme-dark) .st2{
  /* deeper, higher-contrast light ladder — the previous set washed out on a
     bright monitor. Canvas is a clear cool grey so white cards read as raised;
     borders + text are darkened for solid AA contrast. */
  --s2-canvas:#e7e8ee; --s2-app:#eceef3; --s2-nav:#ffffff;
  --s2-card:#ffffff; --s2-inset:#f3f4f8; --s2-input:#eef0f5; --s2-chip:#e8eaf1;
  --s2-bw:#c9cad6; --s2-bnav:#dcdde6; --s2-bcard:#d3d4de; --s2-bchip:#cbccd8;
  --s2-bhover:#b3b4c2; --s2-drail:#dcdde6; --s2-dlist:#e3e4ec;
  --s2-strong:#0f0f16; --s2-text:#1a1a22; --s2-head:#22222b; --s2-2:#34343f;
  --s2-muted:#585866; --s2-faint:#73737f; --s2-faintest:#9a9aa6;
  --s2-acc:#6a58f0; --s2-acc2:#7b6af5; --s2-acc-tx:#5140c4;
  --s2-acc-tint:rgba(106,88,240,.12);
  --s2-ok:#12854f; --s2-warn:#946610; --s2-danger:#c62f48; --s2-info:#2660cc;
  --s2-ok-t:rgba(18,133,79,.12); --s2-warn-t:rgba(148,102,16,.14); --s2-danger-t:rgba(198,47,72,.13);
  box-shadow:0 20px 50px -28px rgba(30,30,50,.28);
}
/* raise the cards off the canvas so they don't melt into it */
body:not(.theme-dark) .st2 .s2-kpi,
body:not(.theme-dark) .st2 .s2-composer,
body:not(.theme-dark) .st2 .s2-plan,
body:not(.theme-dark) .st2 .s2-fcard,
body:not(.theme-dark) .st2 .s2-rcard{box-shadow:0 1px 2px rgba(20,20,40,.04),0 4px 14px -8px rgba(20,20,40,.14)}
body:not(.theme-dark) .st2 .s2-lbl,
body:not(.theme-dark) .st2 .s2-kpi .k{color:#5f5f6d}
body:not(.theme-dark) .st2 ::selection{background:rgba(123,106,245,.25)}
body:not(.theme-dark) .st2 .s2-qa button.on{background:rgba(123,106,245,.10)}
body:not(.theme-dark) .st2 .s2-qa button.on:hover{background:rgba(123,106,245,.16)}
body:not(.theme-dark) .st2 .s2-now,
body:not(.theme-dark) .st2 .s2-pin{background:rgba(123,106,245,.12)}
body:not(.theme-dark) .st2 .s2-ctab.on,
body:not(.theme-dark) .st2 .s2-chip.on{background:rgba(123,106,245,.13)}
body:not(.theme-dark) .st2 .s2-composer.open{border-color:#c9c2f2;box-shadow:0 0 0 1px rgba(123,106,245,.25),0 20px 50px -28px rgba(30,30,45,.3)}
body:not(.theme-dark) .st2 .s2-ta{border-color:#cfcadd}
body:not(.theme-dark) .st2 .s2-code{border-color:#d4d4de}
body:not(.theme-dark) .st2 .s2-code button{border-color:#d4d4de}
body:not(.theme-dark) .st2 .s2-thumb{background:repeating-linear-gradient(135deg,#e8e8ef,#e8e8ef 9px,#e2e2ea 9px,#e2e2ea 18px)}
body:not(.theme-dark) .st2 .s2-thumb .ic{color:rgba(40,40,60,.45)}
body:not(.theme-dark) .st2 .s2-thumb .badge,
body:not(.theme-dark) .st2 .s2-thumb .meta{background:rgba(255,255,255,.85);color:#3f3f4a}
body:not(.theme-dark) .st2 .s2-fav{background:#ececf2;border-color:#dddde6;color:#4a4a58}
body:not(.theme-dark) .st2 .s2-ghost{border-color:#d4d4de}
body:not(.theme-dark) .st2 .s2-ext{border-color:#dddde6}
body:not(.theme-dark) .st2 .s2-post,
body:not(.theme-dark) .st2 .s2-grade-btn{color:#fff}
body:not(.theme-dark) .st2 .s2-tile,
body:not(.theme-dark) .st2 .s2-calgrid .d.today .n{color:#fff}

/* ── responsive collapse (§7) ── */
@media(max-width:1100px){
  .st2 .s2-body{grid-template-columns:minmax(0,1fr) 300px}
  .st2 .s2-left{display:none}
}
@media(max-width:820px){
  .st2 .s2-body{grid-template-columns:1fr}
  .st2 .s2-right{border-left:0;border-top:1px solid var(--s2-drail)}
  .st2 .s2-kpis{grid-template-columns:repeat(2,1fr)}
}
/* ── Break out of the app's default content cap so the Stream fills the
   monitor like the Today dashboard does. The app caps content at
   `.page-inner{max-width:clamp(1180px,92%,1900px)}` (beta-style.css); Today
   widens it with a `td-home` body class. We do the same with `st2-wide`,
   added by stream-2a.js only while the teacher Stream is showing and dropped
   on every other route — so Classwork/People/Grades keep their normal width.
   THIS is what removes the dead side gutters; .st2's own caps below just fill
   whatever width this gives. ── */
body.st2-wide #page-inner,
body.st2-wide .page-inner{max-width:min(96vw,3400px);margin-left:auto;margin-right:auto}

/* ── wide + ultrawide: grow the rails + type so the dashboard fills the screen
   instead of pooling empty space. .st2 fills whatever width #page-inner gives
   it (the widener above governs the outer measure). Placed last so it wins the
   cascade over the base grid rule. ── */
@media(min-width:1500px){
  .st2{max-width:none}
  .st2 .s2-body{grid-template-columns:264px minmax(0,1fr) 344px}
  .st2 .s2-center{padding:24px 34px}
  .st2 .s2-left,.st2 .s2-right{padding:22px 20px}
}
@media(min-width:1900px){
  .st2{max-width:none}
  .st2 .s2-body{grid-template-columns:320px minmax(0,1fr) 420px}
  .st2 .s2-center{padding:28px 46px}
  .st2 .s2-kpis{gap:12px}
  .st2 .s2-kpi .v{font-size:27px}
}
/* keep the SINGLE-column feed at a comfortable measure when the center gets
   wide but isn't yet ultrawide (1700–2199px). */
@media(min-width:1700px) and (max-width:2199px){
  .st2 .s2-plan,.st2 .s2-composer,.st2 .s2-filter,.st2 #s2-feed{max-width:1000px}
}
/* true ultrawide (≥2200px viewport — 2560 QHD, 3440×1440, etc.): one feed
   column can't fill a ~2000px-wide center without either stretching cards or
   pooling dead side-gutters, so flow the feed into TWO columns. The Today /
   Earlier dividers span both. This is what actually uses a 34" screen — twice
   the cards on-screen, no empty center. */
@media(min-width:2200px){
  .st2{max-width:none}
  .st2 .s2-body{grid-template-columns:360px minmax(0,1fr) 500px}
  .st2 .s2-center{padding:30px 54px}
  .st2 .s2-kpi .v{font-size:29px}
  .st2 #s2-feed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px 22px;align-items:start;max-width:none}
  .st2 #s2-feed > .s2-fcard{margin-bottom:0}
  .st2 #s2-feed > .s2-divider{grid-column:1/-1;margin-top:2px}
  .st2 #s2-feed > .s2-empty{grid-column:1/-1}
  /* composer + filter span the full center above the 2-up feed */
  .st2 .s2-composer,.st2 .s2-filter{max-width:none}
}
/* ≥3000px viewport (e.g. a 3440 at 100% scaling, or a 4K ultrawide):
   a third feed column keeps card width readable rather than ballooning. */
@media(min-width:3000px){
  .st2 #s2-feed{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* a quiet class shouldn't read as a broken page — give the empty feed room */
.st2 #s2-feed:only-child .s2-empty,
.st2 .s2-empty{min-height:0}
.st2 #s2-feed > .s2-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;min-height:220px;gap:6px;color:var(--s2-faint)}
.st2 #s2-feed > .s2-empty::before{content:"\f0e0";font-family:"Font Awesome 6 Free";font-weight:900;font-size:26px;opacity:.4;margin-bottom:4px}

/* ── class period + live "time left" (left-rail bell card) ── */
.st2 .s2-bellcard{padding-bottom:16px;border-bottom:1px solid var(--s2-drail);margin-bottom:16px}
.st2 .s2-bellcard:empty{display:none;padding:0;border:0;margin:0}
.st2 .s2-bell-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.st2 .s2-bell-per{font-family:var(--s2-display);font-weight:600;font-size:13px;color:var(--s2-head)}
.st2 .s2-bell-tag{font-family:var(--s2-mono);font-size:8.5px;letter-spacing:.1em;font-weight:600;color:#0a0a0c;background:var(--s2-ok);padding:2px 6px;border-radius:5px}
.st2 .s2-bell-live{margin-left:auto;font-family:var(--s2-mono);font-size:11px;font-weight:600;color:var(--s2-ok)}
.st2 .s2-bell-sub{margin-left:auto;font-size:11px;color:var(--s2-muted)}
.st2 .s2-bellprog{height:4px;border-radius:3px;background:var(--s2-inset);margin-top:8px;overflow:hidden}
.st2 .s2-bellprog span{display:block;height:100%;border-radius:3px;background:var(--s2-acc-grad,var(--s2-acc));transition:width .6s ease}

/* ── today's plan card (center, class-specific) ── */
.st2 .s2-plan{background:var(--s2-card);border:1px solid var(--s2-bcard);border-left:3px solid var(--s2-acc);
  border-radius:14px;padding:15px 16px;margin-bottom:16px}
.st2 .s2-plan-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.st2 .s2-plan-mod{font-family:var(--s2-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--s2-acc-tx,var(--s2-acc));margin-bottom:3px}
.st2 .s2-plan-h{margin:0 0 9px;font-family:var(--s2-display);font-weight:600;font-size:17px;line-height:1.25;color:var(--s2-head)}
.st2 .s2-plan-h .d{color:var(--s2-muted)}
.st2 .s2-plan-work{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;line-height:1.4;color:var(--s2-2);
  background:var(--s2-inset);border-radius:9px;padding:9px 11px}
.st2 .s2-plan-work i{flex:0 0 auto;margin-top:2px;color:var(--s2-acc)}
.st2 .s2-plan-teach{margin-top:8px;font-size:12px;line-height:1.45;color:var(--s2-muted)}

/* ── interactive calendar ── */
.st2 .s2-calnav button{cursor:pointer;color:var(--s2-muted);background:none;border:0;padding:3px 6px;border-radius:6px}
.st2 .s2-calnav button:hover{background:var(--s2-inset);color:var(--s2-text)}
.st2 .s2-calgrid .d.clk{cursor:pointer;border-radius:8px}
.st2 .s2-calgrid .d.clk:hover{background:var(--s2-inset)}
.st2 .s2-calgrid .d.sel{background:var(--s2-acc-tint);box-shadow:inset 0 0 0 1px var(--s2-acc)}
.st2 .s2-calsel{margin-top:11px;border-top:1px solid var(--s2-drail);padding-top:10px}
.st2 .s2-calsel-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;
  font-family:var(--s2-mono);font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--s2-muted)}
.st2 .s2-calsel-x{background:none;border:0;cursor:pointer;color:var(--s2-faint);padding:2px 5px;border-radius:5px}
.st2 .s2-calsel-x:hover{background:var(--s2-inset);color:var(--s2-text)}
.st2 .s2-calsel-row{display:flex;align-items:center;gap:7px;padding:4px 0;font-size:11.5px;color:var(--s2-2)}
.st2 .s2-calsel-row .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.st2 .s2-calsel-row .tm{flex:0 0 auto;font-family:var(--s2-mono);font-size:10px;color:var(--s2-muted)}
.st2 .s2-calsel-none{font-size:11.5px;color:var(--s2-faint)}

/* ── wide-viewport readability: bump the small type once there's room. Placed
   at the END so it wins over the base component sizes above (source order). ── */
@media(min-width:1500px){
  .st2 .s2-lbl,.st2 .s2-plan-mod{font-size:10.5px}
  .st2 .s2-kpi .k{font-size:10.5px}
  .st2 .s2-classcard .nm,.st2 .s2-rtitle,.st2 .s2-bell-per{font-size:14px}
  .st2 .s2-plan-h{font-size:18px}
  .st2 .s2-plan-work,.st2 .s2-plan-teach{font-size:13.5px}
  .st2 .s2-fcard,.st2 .s2-uprow,.st2 .s2-uptitle,.st2 .s2-filename{font-size:13.5px}
  .st2 .s2-qa button{font-size:13px}
}
@media(min-width:2200px){
  .st2 .s2-plan-h{font-size:19px}
  .st2 .s2-plan-work,.st2 .s2-plan-teach,.st2 .s2-fcard,.st2 .s2-uprow{font-size:14px}
}