:root {
  /* soft studio grey with a faint dot grid, milky white glass, and blurred color "blobs" for highlights */
  --bg: #e8e9eb;
  --text: #1c1c1e;
  --text-2: rgba(28, 28, 30, 0.72);
  --text-3: rgba(28, 28, 30, 0.45);
  --line: rgba(0, 0, 0, 0.06);
  --lime: #e2f43c;            /* the small neon chips ("Go Pro", "Best Seller") */
  --pink: #ef5f9c;
  --green: #3fa24d;
  --solid: #1c1c1e;
  --on-solid: #ffffff;
  /* glass layers: chrome (bars), window (big panel), card (inside it), pill (rows and buttons) */
  --chrome: rgba(255, 255, 255, 0.55);
  --window: rgba(255, 255, 255, 0.32);
  --card: rgba(255, 255, 255, 0.55);
  --card-hover: rgba(255, 255, 255, 0.75);
  --pill: rgba(255, 255, 255, 0.62);
  --well: rgba(255, 255, 255, 0.5);
  --tint: rgba(255, 255, 255, 0.8);
  --radius: 26px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", system-ui, sans-serif;
  --dots: "Doto", ui-monospace, monospace;
  --side: 64px;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(circle, rgba(0, 0, 0, 0.07) 1px, transparent 1.3px) 0 0 / 22px 22px,
    var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: inherit; }
button { font: inherit; color: inherit; }

/* Headings: large, clean, regular weight, tight tracking */
.page-head h1, .up-head h2, .me-name, .t-title, .f-name, .modal h2 { letter-spacing: -0.02em; }

/* ---------- Background glows ---------- */
/* a few very soft pastel glows behind the glass, like the out-of-focus color in the references */
.scene {
  position: fixed; inset: -60px; z-index: -1; filter: blur(60px); pointer-events: none;
  background:
    radial-gradient(ellipse 34% 30% at 8% 88%, rgba(124, 196, 120, 0.35), transparent 70%),
    radial-gradient(ellipse 30% 26% at 94% 14%, rgba(239, 95, 156, 0.18), transparent 70%),
    radial-gradient(ellipse 30% 28% at 82% 92%, rgba(185, 166, 232, 0.28), transparent 70%),
    radial-gradient(ellipse 26% 22% at 30% 8%, rgba(247, 177, 74, 0.16), transparent 70%);
}

/* ---------- Milky glass ---------- */
.chrome, .window {
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
}
.chrome, .window, .glass {
  border: 0;
  box-shadow: 0 18px 50px rgba(20, 20, 30, 0.06), 0 1px 2px rgba(20, 20, 30, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.chrome { background: var(--chrome); }
.window {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.5) 0%, var(--window) 50%, rgba(255, 255, 255, 0.22) 100%);
  border-radius: 40px;
}
.glass {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
}
/* thin bright rim that catches the light on the top-left */
.chrome::after, .window::after, .glass::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 40%, rgba(255, 255, 255, 0.15) 70%, rgba(255, 255, 255, 0.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

/* ---------- Color blobs ---------- */
/* blurred gradient fills used for grade cards, chips, file icons and avatars */
.hue-green { --b1: #2f9e44; --b2: #6cc56f; --b3: #c7e6a8; --b4: #f1cf9c; }
.hue-pink  { --b1: #ec4f90; --b2: #f48cb8; --b3: #f9c7dc; --b4: #fde8f0; }
.hue-amber { --b1: #f0731a; --b2: #f7a945; --b3: #f6d3a2; --b4: #d9dcec; }
.hue-lilac { --b1: #9b84e0; --b2: #bba9ee; --b3: #ddd3f7; --b4: #eef0fb; }
.hue-sky   { --b1: #4f93e6; --b2: #8bbbf0; --b3: #c6ddf7; --b4: #eef3fb; }
.hue-leaf   { --b1: #5fbf4a; --b2: #96d77c; --b3: #d3edbf; --b4: #f1f4dc; }
.hue-yellow { --b1: #e9b80c; --b2: #f3d34a; --b3: #f8e8a6; --b4: #f6f1dc; }
.hue-red    { --b1: #e03a3a; --b2: #ef7a6e; --b3: #f6c0b8; --b4: #fbe7e3; }
.hue-mist  { --b1: #b9bcc6; --b2: #cdd0d8; --b3: #e1e3e8; --b4: #eff0f3; }
.blob {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(120% 95% at 50% 85%, var(--b1) 0%, var(--b2) 38%, var(--b3) 72%, var(--b4) 100%);
  box-shadow: 0 16px 40px rgba(20, 20, 30, 0.08), inset 0 0 28px rgba(255, 255, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ---------- Top bar ---------- */
.topbar {
  position: absolute; z-index: 10; top: 16px; left: 16px; right: 16px; /* stays at the top of the page and scrolls away */
  height: 60px; border-radius: 999px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 10px;
}
.me { display: flex; align-items: center; gap: 12px; }
.me-avatar {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; color: #fff;
  background: radial-gradient(120% 100% at 50% 80%, #2f9e44, #8fd18a 60%, #e6f0d6);
  box-shadow: 0 4px 12px rgba(47, 158, 68, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.me-name { font-weight: 500; font-size: 16px; }
.sources { display: flex; gap: 8px; }
.pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
  font-size: 12.5px; font-weight: 500; color: var(--text-2);
  background: var(--tint); box-shadow: 0 2px 8px rgba(20, 20, 30, 0.05), inset 0 1px 0 #fff;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
/* connection status: soft green = connected, soft red = not connected */
.dot.live { background: #4cc163; box-shadow: 0 0 6px 1px rgba(76, 193, 99, 0.5); }
.dot.off { background: #f0607a; box-shadow: 0 0 6px 1px rgba(240, 96, 122, 0.45); }
.dot.warn { background: #e9b80c; box-shadow: 0 0 6px 1px rgba(233, 184, 12, 0.5); } /* Canvas expires within 7 days */
.sources .pill { min-width: 92px; justify-content: center; } /* Canvas and Calendar match exactly */
button.pill { border: 0; font-family: inherit; line-height: inherit; cursor: pointer; transition: background 0.2s; }
button.pill:hover { background: #fff; }

/* ---------- Left sidebar ---------- */
.sidebar {
  position: fixed; z-index: 10; left: 16px; top: 100px;
  width: var(--side); padding: 8px; border-radius: 999px;
  display: flex; flex-direction: column; gap: 6px;
}
.sidebar a {
  position: relative; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text-3); text-decoration: none;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.sidebar a:hover { background: rgba(255, 255, 255, 0.6); color: var(--text); }
/* selected tab: a raised white disc, like the selected "Tools" pill */
.sidebar a.active { color: var(--text); background: #fff; box-shadow: 0 6px 16px rgba(20, 20, 30, 0.1), inset 0 1px 0 #fff; }
.sidebar svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sidebar span { display: none; }
/* hover label next to each icon */
.sidebar a::after {
  content: attr(data-label); position: absolute; left: calc(100% + 14px); top: 50%; transform: translate(-4px, -50%);
  padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap; color: var(--text);
  background: rgba(255, 255, 255, 0.85); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  box-shadow: 0 6px 18px rgba(20, 20, 30, 0.1); opacity: 0; pointer-events: none; transition: opacity 0.15s, transform 0.15s;
}
.sidebar a:hover::after { opacity: 1; transform: translate(0, -50%); }

/* ---------- Main window ---------- */
main {
  margin: 92px 32px 24px calc(var(--side) + 48px); /* 32px gap after the sidebar, 32px at the right edge */
  min-height: calc(100vh - 116px);
  padding: 32px 34px 40px;
} /* fills the width, so the gap after the sidebar matches the gap at the right edge of the screen */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 4px 2px 26px; flex-wrap: wrap; }
.page-head h1 { font-size: 42px; letter-spacing: -0.035em; margin: 0; font-weight: 500; }
.page-head p { margin: 6px 0 0; color: var(--text-3); }
.page-head p.courses-lead { max-width: 62ch; line-height: 1.45; }
.section-title { font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: var(--text); margin: 30px 4px 12px; }
/* page pieces rise in one after another (see cascadeIn in app.js) */
.piece { animation: rise 0.55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 65ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(0.985); } }

/* ---------- Controls ---------- */
.chip-lime { display: inline-block; margin-left: 10px; padding: 3px 9px; border-radius: 999px; background: var(--lime); color: #2a2d07; font-size: 11.5px; font-weight: 600; vertical-align: 3px; letter-spacing: 0; }
.segmented {
  display: inline-flex; padding: 4px; border-radius: 999px; gap: 2px;
  background: rgba(0, 0, 0, 0.04); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
.segmented.glass::after { display: none; }
.segmented button {
  border: 0; background: transparent; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  font-size: 13px; font-weight: 500; color: var(--text-3);
}
.segmented button.on { background: #fff; color: var(--text); box-shadow: 0 3px 10px rgba(20, 20, 30, 0.08); }

.btn {
  display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; text-decoration: none;
  padding: 10px 16px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--text);
  background: var(--tint); box-shadow: 0 3px 10px rgba(20, 20, 30, 0.06), inset 0 1px 0 #fff;
  transition: transform 0.15s, background 0.2s;
}
.btn:hover { background: #fff; }
.btn:active { transform: scale(0.97); }
/* primary action: the green glass pill ("Qualification · Open") */
.btn.dark { color: #fff; background: linear-gradient(100deg, #2f9e44, #6cc56f 70%, #a9dc96); box-shadow: 0 8px 20px rgba(47, 158, 68, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.btn.dark:hover { filter: brightness(1.05); }
.btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Dashboard: grades ---------- */
.grades { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 14px; }
.grade-card { padding: 18px 20px 16px; border-radius: var(--radius); text-align: center; }
.grade-card .code { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; opacity: 0.9; }
.grade-card .name { font-size: 13px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; }
.grade-card .score { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; }
.dots { font-family: var(--dots); font-weight: 800; letter-spacing: 0.02em; }
.grade-card .pct { font-size: 44px; line-height: 1; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); }
.grade-card .pct small { font: 500 17px/1 var(--font); margin-left: 2px; opacity: 0.85; }
.grade-card .letter { font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.grade-card .note-line { font-size: 12.5px; margin-top: 8px; opacity: 0.9; }
/* little ruler of ticks along the bottom, like the "Biological age" card */
.ticks { display: flex; justify-content: space-between; align-items: flex-end; height: 14px; margin-top: 14px; opacity: 0.6; }
.ticks i { width: 1.5px; height: 6px; border-radius: 2px; background: #fff; }
.ticks i:nth-child(4n+1) { height: 11px; }
.grade-card.no-grade { color: var(--text-2); }
.grade-card.no-grade .ticks i { background: rgba(28, 28, 30, 0.35); }

/* ---------- Dashboard: upcoming ---------- */
.upcoming { padding: 8px; }
.up-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px 12px; }
.up-head h2 { margin: 0; font-size: 19px; font-weight: 500; }
.up-head .meta { color: var(--text-3); font-size: 13px; margin-left: 8px; font-weight: 400; }
/* rows are stacked white pills, not ruled lines */
.task {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) 160px 120px; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 20px; background: var(--pill);
  box-shadow: 0 2px 8px rgba(20, 20, 30, 0.03), inset 0 1px 0 #fff;
  transition: background 0.2s, opacity 0.3s;
}
.task + .task { margin-top: 6px; }
.task:hover { background: rgba(255, 255, 255, 0.85); }
.task.done .t-title { color: var(--text-3); }
/* checked-off rows get one line drawn all the way across, left to right */
.task { position: relative; }
.task::after {
  content: ""; position: absolute; left: 40px; right: 40px; top: 50%; height: 1.5px; border-radius: 2px;
  background: rgba(28, 28, 30, 0.45); opacity: 0; pointer-events: none;
}
.task.done::after { opacity: 1; }
.task.just-done::after { animation: strike-pop 0.3s cubic-bezier(.3, 1.6, .5, 1); } /* only when you check it, not on every redraw */
/* the whole line appears at once with a small pop, rather than drawing across */
@keyframes strike-pop {
  0% { opacity: 0; transform: scale(0.94, 0); }
  60% { opacity: 1; transform: scale(1.01, 2.2); }
  100% { opacity: 1; transform: none; }
}
.task.done { opacity: 0.55; }
/* the row being checked off lifts above the others while it slides to the bottom */
.task.moving { position: relative; z-index: 2; opacity: 1; background: #fff; box-shadow: 0 14px 30px rgba(20, 20, 30, 0.12); }
.check {
  width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; display: grid; place-items: center;
  background: #fff; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.15);
}
.task.done .check { background: linear-gradient(135deg, #2f9e44, #6cc56f); box-shadow: none; }
.check svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; fill: none; opacity: 0; }
.task.done .check svg { opacity: 1; }
.t-title { font-weight: 500; font-size: 15px; }
.t-sub { color: var(--text-3); font-size: 13px; margin-top: 4px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* course tags: a tiny color blob dot plus the code */
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 500; padding: 3px 9px 3px 7px; border-radius: 99px; background: #fff; color: var(--text-2); box-shadow: 0 1px 4px rgba(20, 20, 30, 0.05); }
.tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 50% 70%, var(--b1, #b9bcc6), var(--b3, #e1e3e8)); }
.t-due { text-align: right; }
.t-due .when { font-weight: 500; font-size: 14px; }
.t-due .date { color: var(--text-3); font-size: 12.5px; margin-top: 2px; }
.t-due.urgent .when::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 8px rgba(239, 95, 156, 0.7); margin-right: 7px; vertical-align: 2px; }
.stars { display: flex; gap: 2px; justify-content: flex-end; cursor: help; }
.stars svg { width: 16px; height: 16px; }
.stars .on { fill: var(--text); }
.stars .off { fill: rgba(0, 0, 0, 0.1); }
/* hover card explaining the rating */
.stars { position: relative; outline: none; }
.star-tip {
  position: absolute; right: -6px; bottom: calc(100% + 8px); z-index: 30; width: 212px; padding: 10px 12px;
  border-radius: 16px; text-align: left; cursor: default; font-size: 11px; color: var(--text-2);
  background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 28px rgba(20, 20, 30, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity 0.15s, transform 0.15s;
}
.stars:hover .star-tip, .stars:focus .star-tip { opacity: 1; transform: none; }
.tip-head { font-size: 12.5px; color: var(--text); margin-bottom: 4px; }
.tip-head b { font-weight: 600; }
.tip-row { display: flex; justify-content: space-between; gap: 8px; margin-top: 4px; white-space: nowrap; }
.tip-row span:first-child { color: var(--text-3); }
.tip-row span:last-child { text-align: right; color: var(--text); }
.tip-bar { display: block; height: 3px; margin-top: 4px; border-radius: 99px; background: rgba(0, 0, 0, 0.07); overflow: hidden; }
.tip-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #8fd18a, #f7a945 60%, #ef5f9c); }
.star-tip p { margin: 6px 0 0; font-size: 10px; line-height: 1.35; color: var(--text-3); }
.legend { color: var(--text-3); font-size: 12.5px; padding: 12px 14px 6px; }

/* ---------- Dashboard: two columns (upcoming | announcements, plus the inbox with Outlook sign-in) ---------- */
.dash-cols { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(min(300px, 100%), 1fr); gap: 18px; }
/* both columns stretch to the same height; each list scrolls inside its own box */
.dash-cols > section { display: flex; flex-direction: column; min-height: 0; gap: 14px; }
.dash-cols .upcoming, .dash-cols .feed { flex: 1; }
.dash-cols > section > .section-title { margin-bottom: -2px; }
.feed { display: flex; flex-direction: column; min-height: 0; padding: 8px; }
.mail-list { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(0,0,0,.15) transparent;
  /* soft fade at the bottom edge hints there is more to scroll */
  -webkit-mask-image: linear-gradient(#000 calc(100% - 36px), transparent); mask-image: linear-gradient(#000 calc(100% - 36px), transparent); }
.feed .btn svg { width: 13px; height: 13px; }
.mail {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 12px 14px;
  border-radius: 20px; text-decoration: none; background: var(--pill); box-shadow: inset 0 1px 0 #fff; transition: background 0.2s;
}
.mail + .mail { margin-top: 6px; }
.mail:hover { background: rgba(255, 255, 255, 0.85); }
.mail-avatar {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600;
  background: #fff; color: var(--text-2); box-shadow: 0 2px 6px rgba(20, 20, 30, 0.06);
}
.mail-avatar.blob-dot { color: #fff; font-size: 9.5px; letter-spacing: 0.02em; background: radial-gradient(120% 100% at 50% 80%, var(--b1), var(--b2) 50%, var(--b3)); }
.mail-top { display: flex; align-items: baseline; gap: 8px; }
.mail-from { flex: 1; min-width: 0; font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-time { flex: none; font-size: 12px; color: var(--text-3); }
.mail-subject { font-size: 14px; margin-top: 2px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-subject svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; vertical-align: -2px; margin-right: 5px; }
.mail-preview { font-size: 12.5px; margin-top: 3px; color: var(--text-3); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* unread: darker sender and subject, plus a pink dot beside the time */
.mail.unread .mail-from { color: var(--text-2); }
.mail.unread .mail-subject { font-weight: 600; }
.mail.unread .mail-time::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 6px rgba(239, 95, 156, 0.6); margin-right: 6px; vertical-align: 1px; }
@media (max-width: 1100px) { .dash-cols { grid-template-columns: minmax(0, 1fr); } .mail-list { max-height: 380px; } }
/* side by side, the assignment list sets the height and the right column matches it (its own length is ignored) */
@media (min-width: 1101px) {
  .dash-cols > section:last-child { contain: size; }
  /* a floor, so announcements + inbox keep room even when there are only a few assignments */
  .dash-cols { grid-auto-rows: minmax(620px, auto); }
}

/* ---------- Calendar ---------- */
.cal-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cal-wrap { padding: 12px; overflow-x: auto; }
.cal { min-width: 820px; }
.cal-row { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); }
.cal-dayhead { text-align: center; padding: 8px 4px 10px; }
.cal-dayhead .dow { font-size: 11.5px; font-weight: 500; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.08em; }
.cal-dayhead .num { font-size: 22px; font-weight: 500; margin-top: 4px; width: 40px; height: 40px; line-height: 40px; border-radius: 50%; display: inline-block; }
.cal-dayhead.today .num { background: var(--lime); color: #2a2d07; box-shadow: 0 4px 14px rgba(200, 220, 40, 0.4); }
.cal-due { background: rgba(255, 255, 255, 0.45); border-radius: 18px; box-shadow: inset 0 1px 0 #fff; }
.cal-due .lab, .cal-hours .lab { font-size: 11px; color: var(--text-3); text-align: right; padding-right: 8px; }
.cal-due .lab { padding-top: 10px; }
.cal-due .cell { padding: 6px 4px; display: flex; flex-direction: column; gap: 4px; min-height: 40px; }
/* Calendar items use the same glow as the class folders and grade cards (.blob): deepest color fading out
   through lighter tints, with a soft white glow inside. The deepest part sits right behind the title and
   time (a fixed size, so short and long events look alike) to keep the white text easy to read; longer
   events fade to their palest tint below that. Colors are the app's hue sets (--b1..--b4); with none set,
   an event is Outlook pink (.hue-pink). */
.due-chip, .event {
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
  background: radial-gradient(120% 70px at 50% 30px, var(--b1, #ec4f90) 0%, var(--b2, #f48cb8) 38%, var(--b3, #f9c7dc) 72%, var(--b4, #fde8f0) 100%);
  box-shadow: 0 8px 20px rgba(20, 20, 30, 0.08), inset 0 0 16px rgba(255, 255, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: box-shadow 0.2s, transform 0.2s;
}
.due-chip:hover, .event:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(20, 20, 30, 0.12), inset 0 0 16px rgba(255, 255, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.due-chip {
  font-size: 11.5px; font-weight: 500; padding: 6px 9px; border-radius: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.due-chip.done { opacity: 0.4; text-decoration: line-through; }
.due-chip.allday { --b1: #b9bcc6; --b2: #cdd0d8; --b3: #e1e3e8; --b4: #eff0f3; color: var(--text-2); text-shadow: none; } /* .hue-mist: quiet, with dark text */
.cal-body { position: relative; }
.cal-body .cal-row { position: absolute; inset: 0; }
.cal-hours .lab { height: 52px; transform: translateY(-7px); }
.cal-col { position: relative; border-left: 1px solid var(--line); background-image: repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px 52px); }
.cal-col.today { background-color: rgba(226, 244, 60, 0.08); }
/* by kind (eventKind in app.js): classes blue, athletics orange, meetings and other Outlook events pink,
   ones added here green, all-day items grey; Canvas due dates are purple (hue-lilac) */
.event {
  position: absolute; left: 3px; right: 3px; padding: 6px 9px; border-radius: 14px; overflow: hidden;
  font-size: 11.5px; line-height: 1.3;
  /* the whole event stays its color: deepest behind the title, settling into the mid tint (not white) below */
  background: radial-gradient(120% 70px at 50% 30px, var(--b1, #ec4f90) 0%, var(--b2, #f48cb8) 100%);
}
.event:hover { z-index: 3; }
.event b { display: block; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event span { color: rgba(255, 255, 255, 0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.now-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--pink); box-shadow: 0 0 8px rgba(239, 95, 156, 0.5); z-index: 2; }
.now-line::before { content: ""; position: absolute; left: -4px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--pink); }
.cal-legend { display: flex; gap: 16px; font-size: 12.5px; color: var(--text-3); padding: 14px 8px 2px; }
.cal-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.cal-legend .lg-event, .cal-legend .lg-due {
  background: radial-gradient(120% 95% at 50% 85%, var(--b1, #ec4f90) 0%, var(--b2, #f48cb8) 38%, var(--b3, #f9c7dc) 72%, var(--b4, #fde8f0) 100%);
  box-shadow: 0 2px 6px rgba(20, 20, 30, 0.1), inset 0 0 3px rgba(255, 255, 255, 0.5);
}
.cal-legend .lg-due { --b1: #9b84e0; --b2: #bba9ee; --b3: #ddd3f7; --b4: #eef0fb; } /* .hue-lilac */

/* ---------- Professors ---------- */
.prof-top { display: flex; gap: 14px; align-items: center; }
.avatar {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff;
  font-weight: 600; font-size: 16px;
  /* same color as the course (hue-* on the element), green if none */
  background: radial-gradient(120% 100% at 50% 85%, var(--b1, #2f9e44), var(--b2, #8fd18a) 55%, var(--b3, #e6f0d6));
  box-shadow: 0 6px 16px rgba(20, 20, 30, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.muted { color: var(--text-3); }
.btn.disabled, .btn:disabled { opacity: 0.4; pointer-events: none; }

/* ---------- Documents ---------- */
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); gap: 16px; }
.folder { padding: 18px; cursor: pointer; text-align: left; transition: transform 0.2s, background 0.2s; }
.folder:hover { transform: translateY(-3px); background: var(--card-hover); }
.folder-blob { width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; }
.folder-blob svg { width: 30px; height: 30px; }
.folder .f-name { font-weight: 500; margin-top: 14px; }
.folder .f-sub { color: var(--text-3); font-size: 13px; margin-top: 3px; }
.files { padding: 8px; }
.file { display: grid; grid-template-columns: 40px minmax(0, 1fr) 90px 110px; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 20px; text-decoration: none; background: var(--pill); box-shadow: inset 0 1px 0 #fff; }
.file + .file { margin-top: 6px; }
.file:hover { background: rgba(255, 255, 255, 0.85); }
/* file badges colored by type, like the pink PDF / green XLS / grey TXT icons */
.ficon { width: 34px; height: 38px; border-radius: 8px 12px 8px 8px; display: grid; place-items: end center; padding-bottom: 6px; font-size: 8.5px; font-weight: 700; color: #fff; letter-spacing: .04em; background: #b9bcc6; box-shadow: 0 3px 8px rgba(20, 20, 30, 0.08); }
.ficon.kind-pdf { background: linear-gradient(160deg, #f48cb8, #ec4f90); }
.ficon.kind-xls { background: linear-gradient(160deg, #8fd18a, #3fa24d); }
.ficon.kind-doc { background: linear-gradient(160deg, #8bbbf0, #4f93e6); }
.ficon.kind-ppt { background: linear-gradient(160deg, #f7b14a, #f0731a); }
.file .fn { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file .fs, .file .fd { color: var(--text-3); font-size: 13px; text-align: right; }
.empty { text-align: center; padding: 50px 20px; color: var(--text-3); }
.empty.small { padding: 22px 20px; font-size: 14px; }
.note { font-size: 13px; color: var(--text-3); margin: 14px 6px 0; }

.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0;
  padding: 11px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 500; z-index: 50;
  background: rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  box-shadow: 0 10px 30px rgba(20, 20, 30, 0.12);
  transition: opacity .25s, transform .25s; pointer-events: none;
}
.toast.glass::after { display: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Connect Outlook dialog ---------- */
.modal-backdrop { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(232, 233, 235, 0.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade 0.2s; }
.modal-backdrop[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } }
.modal { position: relative; width: min(440px, 100%); padding: 26px 26px 20px; border-radius: 30px; background: rgba(255, 255, 255, 0.8); animation: rise 0.3s cubic-bezier(.2, .8, .2, 1); }
.modal h2 { margin: 0 0 14px; font-size: 22px; font-weight: 500; }
.modal p { margin: 0 0 12px; line-height: 1.45; }
.steps { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 16px; line-height: 1.45; }
.steps li > div { margin-top: 10px; }
.code-row { display: flex; align-items: center; gap: 10px; }
.code-row .code { font: 800 24px/1 var(--dots); letter-spacing: 0.12em; white-space: nowrap; padding: 10px 14px; border-radius: 16px; background: #fff; box-shadow: inset 0 1px 0 #fff, 0 2px 8px rgba(20, 20, 30, 0.06); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }

/* ---------- Phone width: sidebar becomes an iOS-style bottom bar ---------- */
@media (max-width: 760px) {
  .topbar { top: 12px; left: 12px; right: 12px; height: 54px; }
  .me-avatar { width: 34px; height: 34px; }
  .me-name { font-size: 14px; }
  .pill { padding: 7px 10px; }
  .sources .pill { min-width: 0; }
  .sidebar {
    top: auto; bottom: 14px; left: 10px; right: 10px; width: auto;
    flex-direction: row; justify-content: space-around; padding: 6px; gap: 0;
  }
  .sidebar a { width: auto; height: auto; flex: 1; min-width: 0; border-radius: 999px; padding: 8px 1px; gap: 3px; } /* the tabs share the bar */
  .sidebar span { display: block; max-width: 100%; font-size: 9.5px; font-weight: 500; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sidebar a::after { display: none; }
  main { margin: 78px 8px 100px; padding: 22px 16px 28px; border-radius: 30px; min-height: 0; }
  .page-head h1 { font-size: 32px; }
  .task { grid-template-columns: 26px minmax(0, 1fr); }
  .task .t-due, .task .stars { grid-column: 2; justify-content: flex-start; text-align: left; }
  .star-tip { right: auto; left: -6px; }
  .task .t-due { display: flex; gap: 8px; align-items: baseline; }
  .file { grid-template-columns: 40px minmax(0, 1fr); }
  .file .fs, .file .fd { display: none; }
  .file.with-del { grid-template-columns: 40px minmax(0, 1fr) 30px; }
  .module-row { grid-template-columns: 40px minmax(0, 1fr) 18px 30px; }
  .module-row .fs { display: none; }
}

/* ---------- Dashboard: To do planner ---------- */
.todo { padding: 8px; }
.day-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.day-nav h2 { min-width: 0; }
.btn.icon { width: 34px; height: 34px; padding: 0; justify-content: center; }
.btn.icon svg { width: 16px; height: 16px; }
.btn.small { padding: 7px 12px; font-size: 12px; }
.todo-actions { display: flex; align-items: center; gap: 10px; }
.todo-actions .meta { color: var(--text-3); font-size: 13px; }
.todo-item {
  position: relative; display: grid; grid-template-columns: 16px 26px minmax(0, 1fr) auto; align-items: center; gap: 10px 12px;
  padding: 12px 16px; border-radius: 20px; background: var(--pill); box-shadow: 0 2px 8px rgba(20, 20, 30, 0.03), inset 0 1px 0 #fff;
  transition: background 0.2s, opacity 0.3s;
}
.todo-item + .todo-item { margin-top: 6px; }
.todo-item:hover { background: rgba(255, 255, 255, 0.85); }
.todo-text { font-size: 15px; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.todo-item.done { opacity: 0.55; }
.todo-item.done .todo-text { color: var(--text-3); }
.todo-item.done .check { background: linear-gradient(135deg, #2f9e44, #6cc56f); box-shadow: none; }
.todo-item.done .check svg { opacity: 1; }
/* same full-width line as Due soon when something is checked off */
.todo-item::after {
  content: ""; position: absolute; left: 40px; right: 40px; top: 50%; height: 1.5px; border-radius: 2px;
  background: rgba(28, 28, 30, 0.45); opacity: 0; pointer-events: none;
}
.todo-item.done::after { opacity: 1; }
.todo-item.just-done::after { animation: strike-pop 0.3s cubic-bezier(.3, 1.6, .5, 1); }
.todo-kind { font-size: 11px; color: var(--text-3); }
.todo-del { border: 0; background: transparent; cursor: pointer; font-size: 18px; line-height: 1; color: var(--text-3); width: 26px; height: 26px; border-radius: 50%; opacity: 0; transition: opacity 0.15s, background 0.15s; }
.todo-item:hover .todo-del, .todo-del:focus { opacity: 1; }
.todo-del:hover { background: rgba(0, 0, 0, 0.06); color: var(--text); }
.todo-empty { padding: 18px 16px; color: var(--text-3); font-size: 14px; }
.todo-new { display: flex; gap: 8px; margin-top: 8px; }
.todo-new[hidden] { display: none; }
.todo-new input {
  flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 15px; color: var(--text);
  padding: 11px 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(47, 158, 68, 0.35), 0 2px 8px rgba(20, 20, 30, 0.04);
}
.todo-new input::placeholder { color: var(--text-3); }
@media (hover: none) { .todo-del { opacity: 1; } }

/* ---------- Canvas countdown + reminders ---------- */
.countdown { border-radius: 22px; padding: 18px 20px 16px; text-align: center; margin-bottom: 12px; }
.countdown .pct { display: block; font-size: 56px; line-height: 1; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); }
.countdown .cd-label { display: block; margin-top: 6px; font-size: 13.5px; }
.cd-bar { height: 5px; margin-top: 14px; border-radius: 99px; background: rgba(255, 255, 255, 0.35); overflow: hidden; }
.cd-bar i { display: block; height: 100%; border-radius: inherit; background: #fff; }
.alert-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 22px; margin-bottom: 12px; }

/* ---------- Settings ---------- */
.settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }  /* one card per row, top to bottom */
.set-card { padding: 22px; }
.set-card h3 { margin: 0 0 12px; font-size: 18px; font-weight: 500; }
.small-note { font-size: 12.5px; margin: 14px 0 0; }
.set-lead { margin: -4px 4px 14px; font-size: 14px; }
.conn-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.conn-card { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.conn-head { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: start; }
.conn-icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; font-weight: 700; font-size: 18px; }
.conn-icon svg, .wl-tile svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wl-tile svg { width: 15px; height: 15px; stroke-width: 2; }
.conn-title h3 { margin: 0; font-size: 18px; font-weight: 500; }
.conn-title p { margin: 3px 0 0; font-size: 13px; color: var(--text-3); line-height: 1.4; }
.conn-status { grid-column: 2; justify-self: start; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 99px; display: inline-flex; align-items: center; gap: 6px; background: #fff; }
.conn-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.conn-status.tone-live::before { background: #4cc163; box-shadow: 0 0 6px rgba(76, 193, 99, 0.5); }
.conn-status.tone-warn::before { background: #e9b80c; box-shadow: 0 0 6px rgba(233, 184, 12, 0.5); }
.conn-status.tone-off::before { background: #f0607a; box-shadow: 0 0 6px rgba(240, 96, 122, 0.45); }
.set-field { display: block; margin-bottom: 10px; }
.set-field > span { display: block; font-size: 12.5px; color: var(--text-3); margin: 0 4px 6px; }
.set-input { display: flex; align-items: center; background: #fff; border-radius: 999px; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(20, 20, 30, 0.04); transition: box-shadow 0.15s; }
.set-input:focus-within { box-shadow: inset 0 0 0 1.5px rgba(47, 158, 68, 0.55), 0 2px 8px rgba(20, 20, 30, 0.04); }
.set-input input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--text); padding: 11px 16px; }
.set-input input:disabled { color: var(--text-3); cursor: not-allowed; }
.set-input .eye { border: 0; background: transparent; cursor: pointer; padding: 0 14px 0 6px; color: var(--text-3); display: grid; place-items: center; }
.set-input .eye svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.conn-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.conn-actions .muted { font-size: 12.5px; }
.conn-error { margin: 8px 4px 0; font-size: 13px; color: #c33b3b; }
.conn-help, .conn-more { font-size: 13.5px; }
.conn-help summary, .conn-more summary { cursor: pointer; color: var(--text-2); font-weight: 500; list-style: none; padding: 2px 4px; }
.conn-help summary::before, .conn-more summary::before { content: "›"; display: inline-block; margin-right: 6px; transition: transform 0.15s; }
.conn-help[open] summary::before, .conn-more[open] summary::before { transform: rotate(90deg); }
.conn-help .steps { margin: 10px 0 10px; font-size: 13.5px; }
.conn-more { margin: 2px 0 10px; }
.conn-more .set-field { margin-top: 10px; }
/* a card with more than one way to connect (Calendar: Outlook and Google), one under the other */
.conn-option { display: flex; flex-direction: column; gap: 12px; }
.conn-option + .conn-option { border-top: 1px solid var(--edge, rgba(0, 0, 0, 0.08)); padding-top: 18px; }
.conn-option-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.conn-option-head h4 { margin: 0; font-size: 15px; font-weight: 600; }
.pw-form[aria-disabled="true"] { opacity: 0.75; }

/* folding cards (app.js bindFolds): the heading shows, the rest slides open under it */
.settings-grid { align-items: start; }
.foldable.conn-card { gap: 0; }
.fold-head { position: relative; cursor: pointer; padding-right: 30px; border-radius: 12px; }
.fold-head:focus-visible { outline: 2px solid var(--text-2); outline-offset: 6px; }
.foldable .acct-lead { margin-bottom: 0; }
.fold-chev { position: absolute; top: 4px; right: 0; width: 22px; height: 22px; display: grid; place-items: center; color: var(--text-3); transition: transform 0.25s; }
.fold-chev::before { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: translateY(-2px) rotate(45deg); }
.foldable.open .fold-chev { transform: rotate(180deg); }
.fold-head:hover .fold-chev { color: var(--text); }
.fold-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; }
.foldable.open .fold-body { grid-template-rows: 1fr; }
.fold-inner { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s 0.25s; }
.foldable.open .fold-inner { visibility: visible; transition: none; }
.conn-card .fold-inner { display: flex; flex-direction: column; gap: 14px; }
.conn-card .fold-inner > :first-child, .set-card .fold-inner > :first-child { margin-top: 16px; }
@media (prefers-reduced-motion: reduce) { .fold-body, .fold-chev, .fold-inner { transition: none; } }

/* drag to reorder */
.grip { border: 0; background: transparent; padding: 0; width: 16px; height: 28px; display: grid; place-items: center; cursor: grab; color: var(--text-3); opacity: 0.35; touch-action: none; transition: opacity 0.15s; }
.grip svg { width: 16px; height: 16px; fill: currentColor; }
.todo-item:hover .grip, .grip:focus-visible { opacity: 1; }
.todo-item.dragging { z-index: 5; cursor: grabbing; background: #fff; box-shadow: 0 16px 36px rgba(20, 20, 30, 0.16); transition: none; }
.todo-item.dragging .grip { cursor: grabbing; opacity: 1; }
@media (hover: none) { .grip { opacity: 0.7; } }
body.is-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }

/* To do: Activities (calendar events) and Tasks, each tinted in its calendar color, fading to white */
.todo-group { display: flex; align-items: center; gap: 8px; margin: 10px 8px 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.todo-group span { font-size: 11px; font-weight: 600; letter-spacing: 0; padding: 1px 7px; border-radius: 99px; background: rgba(0, 0, 0, 0.05); color: var(--text-2); }
.todo-activities { display: grid; gap: 6px; margin-bottom: 6px; }
.todo-activity {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 20px;
}
.act-time { font-size: 12.5px; font-weight: 600; color: var(--text-2); white-space: nowrap; }
.todo-item.assignment { --b1: #9b84e0; --b2: #bba9ee; --b3: #ddd3f7; --b4: #eef0fb; } /* Canvas due-date lilac (.hue-lilac) */
.todo-item.task { --b1: #4f93e6; --b2: #8bbbf0; --b3: #c6ddf7; --b4: #eef3fb; } /* your own tasks: sky (.hue-sky) */
.kind-tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; letter-spacing: 0.01em; }
.kind-tag.activity, .kind-tag.task { background: rgba(255, 255, 255, 0.28); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); text-shadow: none; }
.todo-item .t-sub { margin-top: 3px; }
.todo-end { display: flex; align-items: center; gap: 4px; }
.todo-item.assignment .todo-end { padding-right: 2px; }

/* ---------- Slow loads: skeleton shimmers until data arrives, then pieces cascade in ---------- */
.sk-wrap, #view > .sk-head { animation: fade 0.3s ease both; }
.sk {
  border-radius: 22px; background: linear-gradient(100deg, rgba(255, 255, 255, 0.35) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.35) 70%);
  background-size: 300% 100%; animation: shimmer 1.4s ease-in-out infinite; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.sk-head { margin: 4px 2px 26px; }
.sk-title { width: 340px; max-width: 70%; height: 44px; border-radius: 14px; }
.sk-line { width: 240px; max-width: 50%; height: 14px; border-radius: 8px; margin-top: 12px; }
.sk-card { height: 150px; border-radius: var(--radius); }
.sk-label { width: 90px; height: 16px; border-radius: 8px; margin: 30px 4px 12px; }
.sk-panel { height: 320px; border-radius: var(--radius); }
.sk-panel.sk-short { height: 170px; }
.sk-cols { grid-auto-rows: auto !important; }
.sk-cols > section { contain: none !important; }
@media (prefers-reduced-motion: reduce) {
  .piece { animation: none; }
  .sk { animation: none; }
}

/* Activities and Tasks show three rows; the rest scroll inside the box */
.todo-activities, .todo-list { position: relative; }
.todo-activities.scrolls, .todo-list.scrolls {
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
  padding-right: 2px; -webkit-mask-image: linear-gradient(#000 calc(100% - 22px), transparent); mask-image: linear-gradient(#000 calc(100% - 22px), transparent);
}
.todo-activities.scrolls.at-end, .todo-list.scrolls.at-end { -webkit-mask-image: none; mask-image: none; }

/* ---------- Calendar: type-to-edit box ---------- */
.cal-cmd { flex: 1; min-width: 260px; max-width: 520px; margin-left: auto; }
.cal-command { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 14px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(20, 20, 30, 0.05); transition: box-shadow 0.15s; }
.cal-command:focus-within { box-shadow: inset 0 0 0 1.5px rgba(155, 132, 224, 0.6), 0 6px 18px rgba(155, 132, 224, 0.15); }
.cal-cmd-icon { width: 18px; height: 18px; flex: none; fill: #9b84e0; }
.cal-command input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 14px; color: var(--text); padding: 7px 0; }
.cal-command input::placeholder { color: var(--text-3); }
.cal-command .btn.icon { width: 32px; height: 32px; }
.cal-feedback { margin: 8px 14px 0; font-size: 13px; color: var(--text-2); animation: fade 0.2s; }
.cal-feedback.bad { color: #c33b3b; }
.cal-feedback button { border: 0; background: none; padding: 0 0 0 6px; font: inherit; font-weight: 600; color: #6a52c2; cursor: pointer; }
.cal-feedback button:hover { text-decoration: underline; }
/* events you added from the box: mint green */
.event.src-mine { --b1: #2f9e44; --b2: #6cc56f; --b3: #c7e6a8; --b4: #f1cf9c; } /* .hue-green */
.event.kind-class, .todo-activity.kind-class, .cal-legend .lg-event.kind-class { --b1: #4f93e6; --b2: #8bbbf0; --b3: #c6ddf7; --b4: #eef3fb; } /* .hue-sky */
.event.kind-athletics, .todo-activity.kind-athletics, .cal-legend .lg-event.kind-athletics { --b1: #f0731a; --b2: #f7a945; --b3: #f6d3a2; --b4: #fbeedd; } /* .hue-amber */
.cal-legend .lg-event.src-mine { --b1: #2f9e44; --b2: #6cc56f; --b3: #c7e6a8; --b4: #f1cf9c; }
.todo-activity.src-mine { --b1: #2f9e44; --b2: #6cc56f; --b3: #c7e6a8; --b4: #f1cf9c; } /* .hue-green, like on the calendar */

/* compact To do box: tighter rows, smaller header and text */
#todo { padding: 6px; }
#todo .up-head { padding: 8px 10px 4px; }
#todo .up-head h2 { font-size: 17px; }
#todo .btn.icon { width: 30px; height: 30px; }
#todo .btn.icon svg { width: 14px; height: 14px; }
#todo .todo-group { margin: 6px 8px 5px; font-size: 11px; }
#todo .todo-activities, #todo .todo-list { gap: 4px; }
#todo .todo-activity { padding: 7px 14px; border-radius: 16px; grid-template-columns: 58px minmax(0, 1fr) auto; }
#todo .todo-item { padding: 7px 14px; border-radius: 16px; gap: 8px 10px; }
#todo .todo-item + .todo-item { margin-top: 4px; }
#todo .todo-text { font-size: 14px; }
#todo .act-time { font-size: 12px; }
#todo .check { width: 20px; height: 20px; }
#todo .kind-tag { font-size: 10.5px; padding: 1px 7px; }
#todo .grip { height: 22px; }
#todo .todo-new { margin-top: 6px; }
#todo .todo-new input { padding: 8px 14px; font-size: 14px; }
#todo .todo-empty { padding: 10px 14px; font-size: 13px; }

/* calendar header: the type-to-edit box sits level with the week arrows and Today */
.cal-actions { display: flex; align-items: center; gap: 12px; flex: 1; justify-content: flex-end; min-width: 0; flex-wrap: wrap; }
.cal-actions .cal-cmd { position: relative; margin-left: 0; }
.cal-actions .cal-command { height: 34px; padding: 3px 3px 3px 14px; box-sizing: border-box; }
.cal-actions .cal-command .btn.icon { width: 28px; height: 28px; }
.cal-actions .cal-command input { padding: 4px 0; font-size: 13.5px; }
.cal-actions .cal-feedback { position: absolute; left: 0; right: 0; top: calc(100% + 4px); margin: 0 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* a Settings card you were sent to from the top bar glows briefly */
.conn-card { transition: box-shadow 0.4s; }
.conn-card.spotlight { box-shadow: 0 0 0 3px rgba(155, 132, 224, 0.55), 0 18px 50px rgba(155, 132, 224, 0.25); }

/* ---------- To do: small location card when hovering an activity ---------- */
.act-tip {
  position: fixed; z-index: 60; display: flex; align-items: center; gap: 5px; max-width: 260px; padding: 5px 10px 5px 8px;
  border-radius: 999px; font-size: 11.5px; font-weight: 500; color: var(--text-2); pointer-events: none;
  background: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 6px 18px rgba(20, 20, 30, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  opacity: 0; transform: translateY(3px); transition: opacity 0.15s, transform 0.15s;
}
.act-tip.show { opacity: 1; transform: none; transition-delay: 0.25s; }
.act-tip span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-tip svg { width: 13px; height: 13px; flex: none; fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Documents: Canvas module folders inside each class ---------- */
.module-row {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 18px 30px; gap: 14px; align-items: center; width: 100%; padding: 10px 10px 10px 14px;
  border: 0; border-radius: 20px; background: var(--pill); box-shadow: inset 0 1px 0 #fff; font: inherit; color: inherit; text-align: left;
  cursor: pointer; transition: background 0.2s, transform 0.2s;
}
.module-row + .module-row { margin-top: 6px; }
.module-row:hover { background: rgba(255, 255, 255, 0.85); transform: translateX(2px); }
.module-row .fn { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.module-row .fs { color: var(--text-3); font-size: 13px; white-space: nowrap; }
.module-blob { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; }
.module-blob svg { width: 20px; height: 20px; }
.module-row .chev { width: 16px; height: 16px; fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.todo-group .sync-line { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.docs-uploads { margin-top: 22px; }
.page-head .head-back { margin-top: 14px; }
.btn.spinning { pointer-events: none; opacity: 0.7; }
.btn.spinning svg { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Documents: professor line + toolbar under a class's title ---------- */
.course-head { margin-bottom: 18px; }
.prof-strip { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 28px; padding: 12px 20px 12px 12px; margin-bottom: 12px; font-size: 14px; }
.ps-name { display: flex; align-items: center; gap: 12px; }
.ps-name .avatar { width: 38px; height: 38px; font-size: 13px; }
.ps-name b { font-weight: 500; font-size: 15px; }
.ps-item { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text-2); }
.ps-item > svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--text-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ps-item a { text-decoration: none; overflow-wrap: anywhere; }
.ps-item a:hover { text-decoration: underline; }
.ps-copy { display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.ps-copy:hover { background: rgba(0, 0, 0, 0.05); }
.ps-copy svg { width: 14px; height: 14px; fill: none; stroke: var(--text-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.docs-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 18px 0 14px; }

/* ---------- Documents: delete buttons (module folders and your uploads) ---------- */
.file.with-del { grid-template-columns: 40px minmax(0, 1fr) 90px 110px 30px; padding-right: 10px; }
.file.with-del[data-open] { cursor: pointer; }
.module-row:focus-visible, .file.with-del:focus-visible { outline: 2px solid rgba(47, 158, 68, 0.5); outline-offset: 2px; }
.row-del {
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: transparent; color: #e03a3a; opacity: 0.55; transition: opacity 0.15s, background 0.15s, transform 0.15s;
}
.row-del svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.module-row:hover .row-del, .file.with-del:hover .row-del, .row-del:focus-visible { opacity: 1; }
.row-del:hover { background: rgba(224, 58, 58, 0.1); transform: scale(1.06); }
.row-del:focus-visible { outline: 2px solid rgba(224, 58, 58, 0.45); }
.btn.danger { color: #fff; background: linear-gradient(100deg, #e03a3a, #ef7a6e); box-shadow: 0 8px 20px rgba(224, 58, 58, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
.btn.danger:hover { filter: brightness(1.05); }
.del-icon svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Documents: your own folders inside My Uploads ---------- */
.todo-group .new-folder { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500; gap: 6px; }
.todo-group .new-folder svg { width: 14px; height: 14px; }
.ufolder-row { transition: background 0.2s, transform 0.2s, box-shadow 0.2s; }
body.dragging-upload .ufolder-row { box-shadow: inset 0 0 0 1.5px rgba(47, 158, 68, 0.35); }
.ufolder-row.drop-over { background: rgba(220, 245, 226, 0.95); box-shadow: inset 0 0 0 2px rgba(47, 158, 68, 0.7); transform: scale(1.01); }
.file[draggable="true"] { cursor: grab; }
.file.dragging { opacity: 0.45; }
.modal-input {
  width: 100%; box-sizing: border-box; padding: 11px 14px; margin: 0 0 12px; border: 0; border-radius: 14px; font: inherit; font-size: 15px;
  background: #fff; color: var(--text); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, 0.08); outline: none; transition: box-shadow 0.15s;
}
.modal-input:focus { box-shadow: inset 0 0 0 1.5px rgba(47, 158, 68, 0.6), 0 6px 18px rgba(47, 158, 68, 0.12); }

/* ---------- To do: activities and tasks glow like calendar events ---------- */
/* Same recipe as .event (deepest color behind the text, soft white glow inside); colors from the sets above,
   with Outlook pink when none is set. */
.todo-activity, .todo-item.assignment, .todo-item.task {
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
  background: radial-gradient(120% 70px at 50% 30px, var(--b1, #ec4f90) 0%, var(--b2, #f48cb8) 38%, var(--b3, #f9c7dc) 72%, var(--b4, #fde8f0) 100%);
  box-shadow: 0 8px 20px rgba(20, 20, 30, 0.08), inset 0 0 16px rgba(255, 255, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: box-shadow 0.2s, transform 0.2s, opacity 0.3s;
}
.todo-activity:hover, .todo-item.assignment:hover, .todo-item.task:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(20, 20, 30, 0.12), inset 0 0 16px rgba(255, 255, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
#todo .todo-item.dragging { transform: none; box-shadow: 0 16px 36px rgba(20, 20, 30, 0.2), inset 0 0 16px rgba(255, 255, 255, 0.35); }
.todo-activity .act-time, .todo-item .t-sub { color: rgba(255, 255, 255, 0.88); }
.todo-item.done .todo-text { color: #fff; }
.todo-item::after { background: rgba(255, 255, 255, 0.85); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); } /* the strike line when checked off */
.todo-item .check { background: rgba(255, 255, 255, 0.3); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.85); }
.todo-item .check:hover { background: rgba(255, 255, 255, 0.5); }
.todo-item.done .check { background: #fff; box-shadow: none; }
.todo-item.done .check svg { stroke: var(--b1, #2f9e44); }
.todo-item .grip, .todo-item .todo-del { color: rgba(255, 255, 255, 0.9); }
.todo-item .todo-del:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }
.todo-item .t-sub .tag { text-shadow: none; } /* the course pill stays white with dark text */

/* ---------- To do: task rows are one line, the same height as activity rows ---------- */
#todo .todo-item .grip { height: 17px; }
#todo .todo-item .check { width: 17px; height: 17px; }
#todo .todo-item .check svg { width: 10px; height: 10px; }
#todo .todo-item .todo-text { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; } /* course + due sit after the title */
#todo .todo-item .t-sub { margin-top: 0; font-size: 12px; gap: 6px; }
#todo .todo-item .t-sub .tag { padding: 1px 8px 1px 6px; font-size: 11px; }
/* every "Activity" / "Task" tag is the same width and ends the same distance from the right edge;
   your own tasks' × floats just left of the tag (shown on hover) so it doesn't push the tag in */
#todo .kind-tag { min-width: 58px; justify-content: center; }
#todo .todo-item .todo-end { padding-right: 0; }
#todo .todo-item .todo-del {
  position: absolute; right: 78px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; font-size: 15px;
}