/* Material tree, chat composer, and the tasks panel schedule */

/* ---- material tree ---- */
/* courses open into kinds, kinds into files; one branch open at a time,
   and picking never sends */
.chips .tree { display: flex; flex-direction: column; gap: 0;
  max-width: 820px; margin: 0 auto; width: 100%; }
/* no cards: courses sit on one surface, split by hairlines that fade at both ends */
/* the course bubble: a ring in its own color; the folder icon says it
   opens into folders */
.tcourse { border: 1px solid color-mix(in srgb,
  var(--course, var(--border)) 40%, var(--border));
  background: var(--panel); border-radius: 12px;
  margin-bottom: 12px; }
.trow { display: flex; align-items: center; gap: 9px; width: 100%;
  border: none; background: transparent;
  color: var(--dim); font-size: 12px; padding: 9px 2px;
  cursor: pointer; text-align: left;
  transition: background .15s, border-color .15s, color .15s;
  font-family: inherit; }
.trow:hover { color: var(--text);
  background: color-mix(in srgb, var(--course, var(--hov)) 7%,
  transparent); }
/* the course row is a quiet section header, not a button chip */
.trow.course { padding: 10px 12px; }
.trow.course .tdot { margin-right: 5px; }
.trow.course .tname { color: var(--text); font-size: 13px;
  font-weight: 650; }
.trow .tname { flex: 1 1 auto; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.trow .tcount { flex-shrink: 0; font-size: 10px; color: var(--faint);
  font-variant-numeric: tabular-nums; }
.trow .tchev { flex-shrink: 0; display: inline-flex;
  color: var(--faint); transition: transform .2s
  cubic-bezier(.34,1.56,.64,1); }
.trow.open .tchev { transform: rotate(90deg); }
.trow .tdot { flex-shrink: 0; width: 8px; height: 8px;
  border-radius: 50%; background: var(--course, var(--dim)); }
.trow .tfold { flex-shrink: 0; display: inline-flex;
  color: var(--course, var(--accent)); }
.trow .tfold .f-open { display: none; }
.trow.open .tfold .f-open { display: block; }
.trow.open .tfold .f-closed { display: none; }
.trow.picked { background: color-mix(in srgb,
  var(--course, var(--accent2)) 9%, transparent); color: var(--text); }
.trow .tpick { flex-shrink: 0; display: inline-flex;
  align-items: center; gap: 4px; border: 1px solid var(--border);
  border-radius: 999px; background: none; color: var(--faint);
  cursor: pointer; font-size: 9.5px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; line-height: 1;
  padding: 4px 9px; transition: all .15s; font-family: inherit; }
.trow .tpick:hover { color: var(--text); border-color: var(--dim); }
.trow.picked .tpick { background: var(--course, var(--accent2));
  border-color: var(--course, var(--accent2)); color: #0b0c0f; }
.trow .tpick.compact { width: 22px; height: 22px; padding: 0;
  justify-content: center; font-size: 12px; border-radius: 6px;
  letter-spacing: 0; }
/* the branch indents without a vertical guide; each row hangs on a fading tick */
.tkids { margin-left: 12px; display: flex; flex-direction: column;
  gap: 2px; }
.tcourse > .tkids { margin: 0 2px 4px 12px; }
.tkids .trow { position: relative; border-radius: 8px; }
.tkids .trow::before { content: ""; position: absolute;
  left: -8px; top: 50%; width: 6px; height: 1px;
  background: linear-gradient(to right, rgba(255,255,255,.14),
  rgba(255,255,255,.03)); }
.trow .ttype { flex-shrink: 0; font-size: 8px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; color: var(--faint);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 4px; }
/* the picked pins live with the other composer chips */
.pinchips { display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 2px 6px; }
.pinchips:empty { display: none; }
.pinchip { display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; color: var(--text); padding: 4px 8px 4px 10px;
  border-radius: 999px; border: 1px solid color-mix(in srgb,
  var(--course, var(--accent2)) 45%, var(--border));
  background: color-mix(in srgb, var(--course, var(--accent2)) 10%,
  transparent); }
.pinchip .pdot { width: 7px; height: 7px; border-radius: 50%;
  background: var(--course, var(--accent2)); flex-shrink: 0; }
.pinchip .pname2 { max-width: 220px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.pinchip .pkind { font-size: 9px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .5px; }
.pinchip button { border: none; background: none; color: var(--dim);
  cursor: pointer; font-size: 11px; padding: 0 2px; }
.pinchip button:hover { color: var(--text); }
.chips.hidden { display: none; }
/* ---- chat composer ---- */
/* compact week carousel: arrows walk the weeks (and the reading bubbles),
   the label jumps back to the current week */
.chatweek { display: flex; justify-content: center;
  max-width: 780px; width: 100%; margin: 0 auto;
  padding: 0 20px 6px; flex-shrink: 0; }
.chatweek.hidden { display: none; }
.cw-top { display: flex; align-items: center; justify-content: center;
  gap: 4px; }
/* transport, not buttons: borderless ghost chevrons like the schedule strip */
.cw-nav { width: 28px; height: 34px; border: none;
  background: none; color: rgba(255,255,255,.5);
  font-size: 17px; line-height: 1; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  transition: color .15s; }
.cw-nav:hover:not(:disabled) { color: rgba(255,255,255,.9); }
.cw-nav:disabled { opacity: .25; cursor: default; }
.cw-label { border: none; background: none; color: var(--dim2);
  font-size: 12px; font-weight: 600; cursor: pointer;
  padding: 3px 9px; border-radius: 7px; display: inline-flex;
  align-items: center; gap: 8px; }
.cw-label:hover { color: var(--text); background: var(--panel2); }
/* away from today: the label tints and offers the jump back */
.cw-label.away { color: var(--accent2); }
.cw-label.away::after { content: "back to current week";
  font-size: 9px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--accent2); }
.cwcur { display: inline-flex; align-items: center; gap: 5px;
  font-size: 9.5px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--green); }
.cwcur::before { content: "●"; font-size: 7px; }
.inputwrap { max-width: 820px; width: 100%; margin: 0 auto;
  padding: 18px 20px calc(26px + var(--kb, 0px));
  position: relative; }
/* the thread dissolves under the composer: a fade above the transparent
   strip, never a hard cut */
.inputwrap::before { content: ""; position: absolute;
  left: -20px; right: -20px; bottom: 100%; height: 34px;
  background: linear-gradient(to bottom, transparent, var(--chatbg));
  pointer-events: none; }
.filechips { display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 4px 8px; }
.filechips:empty { display: none; }
.filechip { display: inline-flex; align-items: center; gap: 7px;
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 8px; padding: 4px 9px; font-size: 12px;
  color: var(--text); }
.filechip button { border: none; background: none; color: var(--dim);
  cursor: pointer; font-size: 11px; }
.filechip button:hover { color: var(--red); }
.inputbar { display: flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 22px; padding: 10px 10px 10px 6px; min-height: 62px; }
.inputbar:focus-within { border-color: var(--accent); }
.plusbtn { width: 30px; height: 30px; border-radius: 50%;
  border: none; background: none; color: var(--dim); font-size: 18px;
  cursor: pointer; flex-shrink: 0; line-height: 1; display: flex;
  align-items: center; justify-content: center; }
.plusbtn:hover { color: var(--text); background: var(--panel2); }
.inputbar textarea { flex: 1; resize: none; background: none; border: none;
  color: var(--text); font: inherit; min-height: 22px; max-height: 160px;
  outline: none; padding: 0; overflow-y: hidden; line-height: 22px;
  display: block; align-self: center; }
.inputbar textarea::placeholder { color: var(--dim); }
/* send: invisible while empty, a filled circle once there is content */
.inputbar .sendbtn { background: transparent; border: none;
  color: var(--accent); font-weight: 600;
  border-radius: 50%; width: 34px; height: 34px; font-size: 16px;
  cursor: pointer; flex-shrink: 0; transition: opacity .15s;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; }
.inputbar .sendbtn:disabled { opacity: 0; cursor: default; }
.inputbar .sendbtn.ready, .inputbar .sendbtn.stop {
  opacity: 1; }
.inputbar .sendbtn.stop { background: var(--red); color: #fff;
  font-size: 12px; }
/* composer: the learn bar's pane of glass. The field on top, the row
   below (plus left, the disc right); one even hairline edge, no shadow
   (on the dark chat a drop shadow read as a smudge around the box) */
.chatcol { --cbar: color-mix(in srgb, var(--chatbg) 80%, black); }
.inputbar.chatbar { flex-direction: column; align-items: stretch;
  gap: 0; border-radius: 20px; padding: 2px 6px 4px; min-height: 0;
  background: color-mix(in srgb, var(--cbar) 60%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: none; }
.inputbar.chatbar:focus-within { border-color: rgba(255,255,255,.14); }
.inputbar.chatbar textarea { flex: none; width: 100%;
  font: 15px/22px Geist, Inter, system-ui, sans-serif;
  padding: 12px 10px 3px 12px; min-height: 50px; max-height: 140px;
  align-self: stretch; background: transparent; }
.inputbar.chatbar .inputrow { display: flex; align-items: center;
  justify-content: space-between; padding: 0 0 0 2px; }
.inputbar.chatbar .plusbtn { width: 32px; height: 32px; font-size: 18px;
  color: color-mix(in srgb, var(--dim) 80%, transparent); }
/* the disc: always there. Resting (nothing typed) a dimmed solid accent
   with the arrow waiting; armed, the full accent; streaming, a stop square */
.inputbar.chatbar .sendbtn { width: 36px; height: 36px; border-radius: 18px;
  opacity: 1; display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 34%, var(--cbar));
  color: color-mix(in srgb, #fff 60%, var(--cbar));
  transition: background .2s, color .2s, filter .15s; }
.inputbar.chatbar .sendbtn svg { grid-area: 1 / 1; transition: opacity .15s; }
.inputbar.chatbar .sendbtn .sq { opacity: 0; }
.inputbar.chatbar .sendbtn.stop .sq { opacity: 1; }
.inputbar.chatbar .sendbtn.stop .up { opacity: 0; }
.inputbar.chatbar .sendbtn:disabled { opacity: 1; }
.inputbar.chatbar .sendbtn.ready, .inputbar.chatbar .sendbtn.stop {
  background: var(--accent); color: #fff; }
.inputbar.chatbar .sendbtn.stop { background: var(--red); }
.inputbar.chatbar .sendbtn.ready:hover { filter: brightness(1.15); }
/* phones: the bar floats over the conversation as glass; the scroller
   pads by its height (--cbarh, measured in chat.js) */
@media (max-width: 900px) {
  .chatcol .inputwrap { position: absolute; left: 0; right: 0; bottom: 0;
    z-index: 3; max-width: none; padding: 4px 16px
      calc(8px + env(safe-area-inset-bottom, 0px) + var(--kb, 0px)); }
  .chatcol .inputwrap::before { display: none; }
  .chatcol .messages { padding-bottom: calc(var(--cbarh, 110px) + 2px); }
}
/* desktop: big-type conversation in a centered ~48rem column; the compact
   mobile sizing above stops at 900px */
@media (min-width: 901px) {
  .thread { max-width: min(92%, 820px); gap: 28px;
    padding: 32px 24px 12px; }
  .msg.assistant { font-size: 16.5px; line-height: 1.55; }
  .msg.assistant .content h1, .msg.assistant .content h2,
  .msg.assistant .content h3 { font-size: 18px; }
  .msg.assistant .content code { font-size: 15px; }
  .msg.assistant .content pre code { font-size: 14px;
    padding: 14px 18px; line-height: 1.7; }
  .msg.assistant .content th, .msg.assistant .content td
    { font-size: 14.5px; padding: 6px 11px; }
  .msg.user { font-size: 16px; padding: 12px 18px; }
  .thinkhead { font-size: 14px; }
  .thinkbody { font-size: 13.5px; }
  .inputwrap { max-width: min(92%, 820px); padding: 6px 24px 12px; }
  /* the same two rows as the learn bar, with a taller writing field */
  .inputbar.chatbar { padding: 6px 8px; }
  .inputbar.chatbar textarea { min-height: 68px; max-height: 240px;
    padding: 10px 10px 4px; font-size: 16px; line-height: 26px; }
  .chatweek { padding: 0 10px 2px; }
  .cw-label { font-size: 11px; padding: 2px 6px; }
  .cw-nav { height: 28px; }
  .pinchip .pname2 { max-width: 150px; }
  /* two-class selector + explicit width: a flex column shrink-wraps
     auto-width children, so auto margins would center a text-sized sliver */
  .chatcol .disclaimer { width: 100%; margin: 0 auto; padding: 8px 0 0; }
}
.inputwrap.unavailable .inputbar { opacity: .55; }
.inputwrap.unavailable .inputbar textarea::placeholder {
  color: var(--dim); }
.inputwrap.unavailable .plusbtn:disabled,
.inputwrap.unavailable .sendbtn:disabled { cursor: not-allowed; }
.disclaimer { width: 100%; max-width: 780px; margin: 0 auto;
  padding: 0 20px 14px; text-align: center;
  color: color-mix(in srgb, var(--dim) 50%, transparent);
  font-size: 10.5px; }
/* keyboard up on the phone: the disclaimer folds so the composer sits
   against the keyboard */
.kb-open .disclaimer { display: none; }

/* ---- tasks panel (overlay drawer) ---- */
.tasks { position: fixed; top: 0; bottom: 0; right: 0; z-index: 30;
  width: 470px; background: var(--bg); border-left: 1px solid var(--border);
  overflow-y: auto; padding: 0 18px 30px;
  box-shadow: -8px 0 24px rgba(0,0,0,.25); }
.tasks.hidden { display: none; }
.tasks::after { content: ""; position: fixed; right: 0; bottom: 0;
  width: 470px; height: 40px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg) 80%);
  opacity: 1; transition: opacity .2s; }
.tasks.at-bottom::after { opacity: 0; }
.tasks.hidden::after { display: none; }
#openTasks { right: 14px; }
h1 { font-size: 17px; font-weight: 700;
  background: linear-gradient(90deg, #ffef00, #ffa100 40%, #ff2417 75%,
    #f77d2e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 5px rgba(167,139,250,.26)); }
.sub { color: var(--dim); font-size: 12.5px; margin-top: 2px; }

.weekbar { margin: 2px 0 6px; }
/* the menu and collapse buttons ride in the week-context row; there is no
   dedicated header row */
.wkmenu { width: 34px; height: 34px; padding: 0; flex-shrink: 0;
  justify-content: center; gap: 0; border: none; background: none;
  border-radius: 9px; color: var(--dim); display: inline-flex;
  align-items: center; cursor: pointer;
  transition: color .15s, transform .12s, background .15s; }
.wkmenu:hover { color: var(--text);
  background: rgba(255,255,255,.06); }
.wkmenu:active { transform: scale(.92); }
.wkmenu:focus-visible { outline: 2px solid var(--accent);
  outline-offset: 2px; }
.wkhid { width: 30px; height: 30px; padding: 0; flex-shrink: 0;
  justify-content: center; font-size: 15px; border: none;
  background: none; border-radius: 8px; color: var(--dim);
  display: inline-flex; align-items: center; cursor: pointer;
  transition: color .15s, background .15s; }
.wkhid:hover { color: var(--text);
  background: rgba(255,255,255,.06); }
/* the release note: a small card atop the schedule; dismissals are
   remembered per major version */
.releasenote { margin: 2px 0 10px; border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 10px;
  background: var(--panel); padding: 10px 13px; }
.releasenote.hidden { display: none; }
.rn-head { display: flex; align-items: center; gap: 8px; }
.rn-title { font-size: 12.5px; font-weight: 700; }
.rn-close { margin-left: auto; border: none; background: none;
  color: var(--dim); cursor: pointer; font-size: 11px;
  padding: 3px 8px; border-radius: 5px; display: inline-flex;
  align-items: center; gap: 5px; }
.rn-close:hover { color: var(--text); background: var(--panel2); }
/* the cross is drawn, not a glyph, so it centers regardless of how the
   font renders U+2715 */
.rn-close .rn-x { display: block; }
.rn-list { margin: 7px 0 0; padding-left: 18px; display: flex;
  flex-direction: column; gap: 3px; }
.rn-list li { font-size: 12px; color: var(--dim2); line-height: 1.4; }
.rn-list li.rn-hl { border: 1px solid rgba(123,108,230,.5);
  background: rgba(123,108,230,.10); border-radius: 10px;
  padding: 10px 12px; margin: 8px 0 2px -18px; color: #d9d3fb;
  font-weight: 600; list-style: none; }
.rn-tag { display: inline-block; font-size: 9px; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase; color: #fff;
  background: var(--accent); border-radius: 20px; padding: 2px 8px;
  margin-right: 8px; vertical-align: 1px; }
.rn-list li:first-child { color: var(--text); font-weight: 600; }
.rn-sub { margin-top: 10px; font-size: 10px; font-weight: 700;
  color: var(--dim); text-transform: uppercase; letter-spacing: .8px; }
/* ---- week strip ---- */
/* the box has no top or side line: the header band opens cleanly, with a
   rule under row 1 and a bottom rule framing the carousel */
.weekstrip-box { background: none;
  border: none; border-bottom: 1px solid rgba(255,255,255,.08);
  border-radius: 0; padding: 0; width: 100%;
  max-width: 1200px; margin-left: auto; margin-right: auto; }
/* stacked: the week title and actions on top, progress dashes below */
.wk-context { display: flex; flex-direction: column; gap: 5px;
  padding: 6px 0 8px; width: 100%; max-width: 1200px; margin: 0 auto;
  border-bottom: 1px solid rgba(255,255,255,.08); }
.wk-top { display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; row-gap: 2px; }
.wk-left { display: flex; align-items: center; gap: 9px;
  min-width: 0; }
/* the whole-week toggle sits on the progress row: it acts on that bar */
.wk-left .markchip { margin-left: auto; padding: 3px 9px;
  font-size: 11px; gap: 6px; }
.wk-left .markchip .cbx { width: 12px; height: 12px; }
/* desktop gets a grey twin right of the week title; phones keep the
   progress-row one */
.markchip-top { margin-left: 6px; color: var(--faint);
  border-color: var(--border); padding: 3px 9px; font-size: 11px;
  gap: 6px; }
.markchip-top .cbx { width: 12px; height: 12px; }
.markchip-top:hover { color: var(--dim);
  border-color: rgba(255,255,255,.25); }
@media (max-width: 640px) {
  .markchip-top { display: none !important; }
}
@media (min-width: 641px) { .wk-left .markchip { display: none; } }
/* "Week 3" only (dates live on the tabs below), styled as the block's heading */
.wktitle { font-size: 14px; font-weight: 700; color: var(--text);
  white-space: nowrap; flex-shrink: 0;
  letter-spacing: .1px; }
.wkdots { display: flex; align-items: center; flex-wrap: wrap;
  gap: 5px; flex-shrink: 0; }
/* story-style segments, 13×5 with rounded ends. Pending is dim purple
   (gray reads as disabled), read is solid green; the tail dash tapers */
.dotbtn { width: 13px; height: 5px; padding: 0; border-radius: 2.5px;
  border: none; cursor: pointer; background: rgba(149,137,240,.30);
  transition: background .15s, width .15s; }
.dotbtn:hover { background: rgba(149,137,240,.6); }
.dotbtn.done { background: var(--green); }
.dotbtn.done:hover { background: var(--green); }
.dotbtn.tail { width: 8px; opacity: .75; }
.wkcount { font-size: 12px; color: var(--dim); white-space: nowrap;
  font-variant-numeric: tabular-nums; flex-shrink: 0; }
.wk-right { margin-left: auto; display: flex; align-items: center;
  justify-content: flex-end; gap: 8px; min-width: 0; }
/* the least-used action on the screen: ghosted, wakes up on hover */
.markchip { display: inline-flex; align-items: center; gap: 8px;
  flex-shrink: 0; background: transparent;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius); padding: 5px 12px;
  font-size: 12px; font-weight: 500; color: var(--dim);
  cursor: pointer; transition: color .15s, border-color .15s; }
.markchip:hover { color: var(--text);
  border-color: rgba(255,255,255,.30); }
.markchip:disabled { opacity: .5; cursor: default; }
.markchip .cbx { width: 14px; height: 14px; border-radius: 4px;
  border: 2px solid rgba(255,255,255,.25); position: relative;
  flex-shrink: 0; transition: background .15s, border-color .15s; }
.markchip:hover .cbx { border-color: rgba(255,255,255,.45); }
.markchip.checked { color: var(--green);
  border-color: rgba(63,185,111,.55); }
.markchip.checked .cbx { background: var(--green);
  border-color: var(--green); }
.markchip.checked .cbx::after { content: "✓"; position: absolute;
  inset: 0; color: #fff; font-size: 9px; display: flex;
  align-items: center; justify-content: center; }
/* partial week: a dash, not a check, in the box */
.markchip.indeterminate .cbx::after { content: ""; position: absolute;
  left: 2px; right: 2px; top: 50%; height: 2px; margin-top: -1px;
  border-radius: 1px; background: var(--accent2); }
.infobtn { background: none; border: none; color: var(--dim);
  font-size: 12px; cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(139,150,165,.4); }
.infobtn:hover { color: var(--hovt); }
/* transport, not actions: borderless ghost chevrons */
.weekbar .arrow { width: 26px; height: 38px; border: none;
  background: none; color: rgba(255,255,255,.5); cursor: pointer;
  flex-shrink: 0; display: inline-flex; align-items: center;
  justify-content: center; transition: color .15s; }
.weekbar .arrow:hover { color: rgba(255,255,255,.9); }
.weekbar .arrow:disabled { opacity: .25; cursor: default; }
.strip-main { display: flex; align-items: center; gap: 6px;
  margin-top: 7px; width: 100%; max-width: 1200px;
  margin-left: auto; margin-right: auto; }
.weekstrip-wrap { flex: 1; min-width: 0; position: relative; }
/* fade the cut-off tabs into the background on both edges so the trim
   next to the arrows looks intentional */
.weekstrip-wrap::before { content: ""; position: absolute;
  top: 0; left: 0; bottom: 0; width: 48px; pointer-events: none;
  background: linear-gradient(to left, transparent, var(--bg)); }
.weekstrip-wrap::after { content: ""; position: absolute;
  top: 0; right: 0; bottom: 0; width: 48px; pointer-events: none;
  background: linear-gradient(to right, transparent, var(--bg)); }
.weekstrip { display: flex; gap: 4px; overflow-x: auto;
  scrollbar-width: none; min-width: 0; padding: 2px; }
.weekstrip::-webkit-scrollbar { display: none; }
.weekchip { flex: 0 0 auto; min-width: 66px; padding: 5px 8px 5px;
  border-radius: var(--radius); border: 1px solid transparent;
  background: none; cursor: pointer; text-align: center;
  position: relative; color: var(--dim); transition: background .15s;
  display: flex; flex-direction: column; align-items: center; gap: 3px; }
.weekchip .n { font-size: 12.5px; font-weight: 650; color: var(--text);
  white-space: nowrap; }
.weekchip .d { font-size: 11px; white-space: nowrap; }
/* a 4px corner dot marks partially done weeks; finished and fresh weeks
   show none */
.weekchip .wdot { position: absolute; top: 5px; right: 5px;
  width: 4px; height: 4px; border-radius: 50%; }
.weekchip .wdot.part { background: var(--accent2); }
.weekchip .wdot.full, .weekchip .wdot.none { display: none; }
.weekchip:hover { background: var(--panel2); }
/* the selected tab carries the strip's only border: "you are here" must
   beat the current week's green bar */
.weekchip.active { background: rgba(123,108,230,.16);
  border-color: rgba(123,108,230,.55); }
.weekchip.active .n { color: var(--accent2); }
/* a finished week recedes: greyed and struck through */
.weekchip.done .n { color: var(--dim);
  text-decoration: line-through;
  text-decoration-color: rgba(139,150,165,.6); }
.weekchip.done .d { opacity: .75;
  text-decoration: line-through;
  text-decoration-color: rgba(139,150,165,.45); }
/* the week you're in: green name plus a green bar under the chip, visible
   even when it's also the selected tab */
.weekchip.current .n { color: var(--green); }
.weekchip.current.active { background: rgba(63,185,111,.14);
  border-color: rgba(63,185,111,.5); }
.weekchip.current.active .n { color: var(--green); }
.weekchip.current::after { content: ""; position: absolute;
  bottom: 0; left: 50%; transform: translateX(-50%);
  width: 18px; height: 2px; border-radius: 1px;
  background: var(--green); opacity: .7; }
.weekchip .examicon { vertical-align: -1px; margin-right: 4px; }
/* exams: amber icon + label only, no fill, no border */
.weekchip.exam .n { color: #ffcf8a; }
.toast { position: fixed; bottom: 18px; left: 50%;
  transform: translateX(-50%); z-index: 60; background: var(--panel2);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 14px; display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; color: var(--text); box-shadow: 0 8px 24px
  rgba(0,0,0,.4); opacity: 0; pointer-events: none;
  transition: opacity .2s; }
.toast.show { opacity: 1; pointer-events: auto; }
.toast button { background: none; border: none; color: var(--accent2);
  font-size: 12.5px; font-weight: 650; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; }

/* ---- schedule days and course groups ---- */
.sectionhead { font-size: 12px; color: var(--dim); margin: 10px 2px 6px;
  text-transform: uppercase; letter-spacing: .4px; }
.day { background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 12px 12px 16px; margin-bottom: 12px; }
.day:first-child { margin-top: 2px; }
.day.today { border-color: rgba(63,185,111,.4); }
.dayhead { display: flex; align-items: baseline; flex-wrap: wrap;
  gap: 3px 9px; padding: 0 2px 11px; font-size: 13px;
  font-weight: 650; color: var(--text); }
.dayhead .date { color: var(--faint); font-weight: 500; font-size: 12px; }
.dayhead .today { font-size: 10px; font-weight: 700; color: var(--green);
  background: rgba(63,185,111,.12); border: 1px solid rgba(63,185,111,.4);
  padding: 2px 8px; border-radius: 999px; letter-spacing: .04em;
  text-transform: uppercase; }
.day .group:last-child { margin-bottom: 0; }
/* one container per course: shaded from top line to closing line, colored
   spine on its left edge, equal room on both sides in the day card */
/* alignment invariant: every pill's left edge lands exactly at the spine's
   right edge. The pill pull is calc()-derived from these two variables, so
   never hardcode a negative margin that depends on them */
.group { --spine-w: 2px;   /* spine width */
  --tb-x: 13px;            /* taskblock inset from the group's edge */
  margin-bottom: 26px;
  padding-bottom: 12px; position: relative; background: #12161d;
  border-right: 1px solid var(--border);
  border-radius: 0 6px 6px 0; overflow: hidden; }
/* courses with reading content get a roomier dip below the last pill */
.group.has-materials { padding-bottom: 20px; }
/* the course spine: the box's full left edge, top line to closing line
   (the 12px padding below the content is the dip) */
.group::before { content: ""; position: absolute;
  left: 0; top: 0; bottom: 0; width: var(--spine-w);
  background: var(--course, var(--border)); }
/* closing line: the box's bottom edge, spine to the card's right border */
.group::after { content: ""; position: absolute;
  left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--border); }

.card { background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; padding: 9px 12px; margin-bottom: 9px;
  min-height: 44px;
  display: flex; align-items: center; gap: 11px; cursor: pointer;
  transition: border-color .15s, opacity .2s; }
.card:hover { border-color: var(--hodb); }
.card .box { width: 16px; height: 16px; border-radius: 5px;
  border: 2px solid var(--dim); flex-shrink: 0; position: relative; }
.card.done .box { background: var(--green); border-color: var(--green); }
.card.done .box::after { content: "✓"; position: absolute; inset: 0;
  color: #fff; font-size: 10px; display: flex; align-items: center;
  justify-content: center; }
.card .body { flex: 1; min-width: 0; }
.card .title { font-size: 13.5px; }
.card.done { opacity: .45; }
.card.done .title { text-decoration: line-through; }

/* material pill: a grid so the checkbox and icon sit on the link's first
   line while the name wraps and the page range hangs below. The link opens
   the file; clicking elsewhere marks read. The right side is rounded, the
   left stays flat where it meets the spine */
.pill { display: grid; grid-template-columns: auto 1fr auto;
  column-gap: 9px; align-content: center; align-items: center;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px 14px 14px 6px; padding: 5px 15px 7px 11px;
  margin-bottom: 9px; min-height: 35px; color: var(--dim2);
  font-size: 12.5px; cursor: pointer; max-width: 100%;
  transition: border-color .15s, opacity .2s; }
/* with a locator, top padding = locator height (12.6px) + gap (1px) +
   bottom padding (7px) - a 3px lift that sits the link slightly above center */
.pill.hinted { padding-top: 17.6px; }
.pill:hover { border-color: var(--hodb); background: var(--panel2);
  box-shadow: 0 0 0 3px rgba(123,108,230,.14); }
.pill .ficon { grid-column: 1; grid-row: 1; }
/* the box centers on row 1 with the link, not the whole pill; its inset
   comes from the pill's right padding */
.pill .box { grid-column: 3; grid-row: 1; align-self: center;
  width: 14px; height: 14px; margin-right: 7px;
  border-radius: 4px; border: 2px solid var(--dim); position: relative; }
.pill:hover .box { border-color: var(--hodb); }
.pill.done .box { background: var(--green); border-color: var(--green); }
.pill.done .box::after { content: "✓"; position: absolute; inset: 0;
  color: #fff; font-size: 9px; display: flex; align-items: center;
  justify-content: center; }
/* one line: the title shrinks so a trailing parenthetical is never clipped
   (the full name lives in the title attribute) */
.pill .pname { grid-column: 2; grid-row: 1; min-width: 0; overflow: hidden; }
/* fit-content: only the link text opens the PDF; the rest of the pill
   toggles read */
.pill .pname a { display: inline-flex; align-items: baseline; gap: 3px;
  min-width: 0; width: fit-content; max-width: 100%; }
.pill .pname .t { flex-shrink: 100; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
/* the parenthetical gives way only once the title is gone, and then
   ellipsizes too: it never spills over the tags beside it */
.pill .pname .suf { flex-shrink: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
/* done: strikethrough the title only, dim the locator, never strike it */
.pill.done .pname .t { text-decoration: line-through; }
/* the locator sits under the citation, dim and small */
.pill .phint { grid-column: 2; grid-row: 2; margin-top: 1px;
  color: var(--dim); font-size: 10.5px; line-height: 1.2; }
.pill .phint.entire { font-style: italic; opacity: .8; }
.pill.done .phint { opacity: .5; }
.pill .ficon { color: var(--dim); flex-shrink: 0; }
.pill.done { opacity: .55; }
.pill.reader { cursor: default; }
.pill.reader a { color: var(--accent2); text-decoration: none; }
.pill.reader a:hover { text-decoration: underline; }
.pill.reader .ext { color: var(--dim); font-size: 11px; }
.pill .pname .ext { color: var(--dim); font-size: 11px;
  text-decoration: none; }

/* new Brightspace material: a quiet marker that disappears with the first tick */
.pill .pname .newb { display: inline-flex; align-items: center;
  flex-shrink: 0; margin-left: 7px; padding: 1px 5px; border-radius: 4px;
  font-size: 8.5px; font-weight: 700; letter-spacing: .9px;
  text-transform: uppercase; color: var(--accent2);
  background: rgba(149,137,240,.14); }
.pill.done .newb { display: none; }

/* deadline pill (tick means "handed in"): the clock reads dimmer than a
   file icon so reading stays the visual default */
.pill.due .ficon { color: var(--dim); }
.pill.due { --tick-label: ""; }
.pill.due .t { color: var(--text); }
.pill.due .phint { font-style: normal; opacity: .75; }

/* the sync chip: quiet status text next to the week bar actions */
.syncinfo { font-size: 9px; color: var(--faint); white-space: nowrap;
  align-self: center; letter-spacing: .2px; opacity: .6;
  font-style: italic; }
/* the current week is marked in the strip, so the jump button is redundant
   on a phone and would overflow the row */
@media (max-width: 640px) {
  #jump { display: none; }
}
.syncinfo.live { color: var(--accent2); }
.syncinfo.warn { color: var(--warn, #e0a46a); opacity: .9; }
.empty { color: var(--dim); text-align: center; padding: 40px 0; }
/* a short crossfade when the week's content swaps; long fades read as laggy */
#checklist.swap, .weekstrip-box.swap {
  animation: swapin .18s cubic-bezier(.3,.6,.3,1); }
/* no "forwards": if the fetch is slow, the old week reappears after the
   fade-out instead of a blank gap */
#checklist.swapout { animation: swapout .13s ease-in; }
@keyframes swapin { from { opacity: 0; } }
@keyframes swapout { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  #checklist.swap, .weekstrip-box.swap, #checklist.swapout,
  .syncguide, .ssburger, .sscpy, .ssitem.hl {
    animation: none; }
}

/* the disclaimer rides under the composer, inside it */
.inputwrap .disclaimer { max-width: none; padding: 7px 0 0; }