/* Visor — the portal: Home (the greeting, live sessions, classes, activity),
   the class pages (the cover and tabs, assignments and folders,
   announcements, people, settings), the assignment page's frame and the
   calendar, in Visor's "lens" look (see app.css). */

/* ---------- course colours (lib/classes.js COURSE_COLORS) ---------- */
.cc-teal { --cc: #1E9BC4; } .cc-green { --cc: #3C9A5F; } .cc-navy { --cc: #2F5DA8; } .cc-violet { --cc: #7454C6; }
.cc-magenta { --cc: #B13F8E; } .cc-red { --cc: #C9483F; } .cc-orange { --cc: #D9772B; } .cc-gold { --cc: #C2961C; }
.cc-slate { --cc: #5E6E7D; } .cc-forest { --cc: #2E7D4F; }

/* A class's banner: its colour, a lens motif from Visor's logo (picked from
   the class id) and its initials */
.course-art { position: relative; overflow: hidden; color: #fff; --cc-dark: color-mix(in srgb, var(--cc, #5E6E7D) 60%, #14293A);
  background: var(--motif, none) center / cover no-repeat, linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 55%), linear-gradient(125deg, var(--cc, #5E6E7D), var(--cc-dark)); }
.course-art.pat-0 { --motif: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='white' stroke-opacity='.32' stroke-width='2.5'><circle cx='136' cy='60' r='38'/><circle cx='170' cy='60' r='38'/></g></svg>"); }
.course-art.pat-1 { --motif: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='white' stroke-opacity='.32' stroke-width='2.5'><circle cx='22' cy='112' r='52'/><circle cx='70' cy='112' r='52'/></g></svg>"); }
.course-art.pat-2 { --motif: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='white' stroke-opacity='.32' stroke-width='2.5'><circle cx='150' cy='26' r='24'/><circle cx='174' cy='50' r='24'/><circle cx='150' cy='74' r='24'/></g></svg>"); }
.course-art.pat-3 { --motif: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='white' stroke-opacity='.32' stroke-width='2.5'><circle cx='186' cy='8' r='22'/><circle cx='186' cy='8' r='40'/><circle cx='186' cy='8' r='58'/></g></svg>"); }
.course-art.pat-4 { --motif: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='white' stroke-opacity='.32' stroke-width='2.5'><circle cx='160' cy='40' r='32'/><circle cx='160' cy='84' r='32'/></g></svg>"); }
.course-art.pat-5 { --motif: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMid slice'><g fill='white' fill-opacity='.10'><circle cx='170' cy='24' r='44'/><circle cx='198' cy='104' r='50'/></g><g fill='none' stroke='white' stroke-opacity='.32' stroke-width='2.5'><circle cx='120' cy='96' r='22'/><circle cx='146' cy='96' r='22'/></g></svg>"); }
/* A background the teachers chose instead (classes.js courseArt, lib/classes.js
   BACKGROUND_PRESETS): one of these designs, or their own picture (--bg-img,
   centred --bg-pos down, over the class colour while it loads). Each keeps a
   soft shade at the bottom so the initials stay readable. */
.course-art.has-bg { --shade: linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.26)); }
.course-art.bg-photo { background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.42)), var(--bg-img) 50% var(--bg-pos, 50%) / cover no-repeat, linear-gradient(125deg, var(--cc, #5E6E7D), var(--cc-dark)); }
.course-art.bg-sunrise { background: var(--shade), url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMid slice'><circle cx='150' cy='80' r='28' fill='white' fill-opacity='.24'/><circle cx='150' cy='80' r='44' fill='none' stroke='white' stroke-opacity='.16' stroke-width='2'/><path d='M0 98 Q50 86 100 96 T200 92 V120 H0Z' fill='white' fill-opacity='.12'/></svg>") center / cover no-repeat, linear-gradient(165deg, #F4A261 0%, #E07A5F 36%, #B5517D 70%, #6D3F8C 100%); }
.course-art.bg-ocean { background: var(--shade), url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='white' stroke-opacity='.22' stroke-width='2'><path d='M-10 66 Q15 56 40 66 T90 66 T140 66 T190 66 T240 66'/><path d='M-10 84 Q15 74 40 84 T90 84 T140 84 T190 84 T240 84'/><path d='M-10 102 Q15 92 40 102 T90 102 T140 102 T190 102 T240 102'/></g></svg>") center / cover no-repeat, linear-gradient(170deg, #2BA3C6 0%, #16709F 50%, #0D3F6E 100%); }
.course-art.bg-meadow { background: var(--shade), url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMid slice'><circle cx='164' cy='28' r='14' fill='white' fill-opacity='.22'/><path d='M0 78 Q45 56 95 72 T200 62 V120 H0Z' fill='white' fill-opacity='.13'/><path d='M0 98 Q60 80 120 94 T200 86 V120 H0Z' fill='white' fill-opacity='.15'/></svg>") center / cover no-repeat, linear-gradient(180deg, #8CCB9F 0%, #52A06D 48%, #2C6A4D 100%); }
.course-art.bg-night { background: var(--shade), url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMid slice'><g fill='white'><circle cx='18' cy='20' r='1' opacity='.8'/><circle cx='46' cy='42' r='.8' opacity='.6'/><circle cx='70' cy='14' r='1.2' opacity='.85'/><circle cx='96' cy='34' r='.7' opacity='.55'/><circle cx='120' cy='12' r='.9' opacity='.7'/><circle cx='132' cy='52' r='.8' opacity='.5'/><circle cx='186' cy='60' r='1' opacity='.7'/><circle cx='30' cy='64' r='.7' opacity='.45'/><circle cx='84' cy='70' r='.9' opacity='.5'/><circle cx='108' cy='88' r='.7' opacity='.4'/><circle cx='194' cy='18' r='.8' opacity='.6'/></g><circle cx='164' cy='32' r='15' fill='white' fill-opacity='.85'/><circle cx='171' cy='27' r='14' fill='%23202a5c'/></svg>") center / cover no-repeat, radial-gradient(70% 90% at 82% 18%, rgba(110, 130, 230, .45), rgba(110, 130, 230, 0) 60%), linear-gradient(170deg, #26306B 0%, #121838 100%); }
.course-art.bg-chalkboard { background: var(--shade), url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' preserveAspectRatio='xMidYMid slice'><g fill='none' stroke='white' stroke-opacity='.17' stroke-width='1.6' stroke-linecap='round'><path d='M104 26 Q122 18 140 28 T178 24'/><path d='M110 40 h44 M110 50 h30'/><circle cx='160' cy='84' r='15'/><path d='M145 84 h30 M160 69 v30'/><path d='M120 96 l14 -22 l14 22 Z'/></g></svg>") center / cover no-repeat, radial-gradient(90% 70% at 25% 25%, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 70%), linear-gradient(160deg, #36594B, #1F3B32); }
.course-art.bg-blueprint { background: var(--shade), repeating-linear-gradient(0deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px 64px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .16) 0 1px, transparent 1px 64px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 16px), repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 1px, transparent 1px 16px), linear-gradient(160deg, #2C6CB0, #173F75); }
.course-art.bg-library { background: var(--shade), linear-gradient(180deg, transparent 80%, rgba(0, 0, 0, .28) 80%, rgba(0, 0, 0, .28) 83%, transparent 83%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .08) 0 13px, rgba(0, 0, 0, .14) 13px 15px, rgba(255, 255, 255, .02) 15px 26px, rgba(0, 0, 0, .14) 26px 28px, rgba(255, 255, 255, .12) 28px 36px, rgba(0, 0, 0, .14) 36px 38px, rgba(110, 30, 20, .14) 38px 49px, rgba(0, 0, 0, .14) 49px 51px), linear-gradient(165deg, #9A6A43, #5A3720); }
.course-art.bg-aurora { background: var(--shade), radial-gradient(60% 80% at 15% 0%, rgba(80, 230, 170, .55), rgba(80, 230, 170, 0) 70%), radial-gradient(55% 75% at 65% 10%, rgba(90, 170, 255, .45), rgba(90, 170, 255, 0) 70%), radial-gradient(40% 60% at 95% 30%, rgba(170, 120, 255, .35), rgba(170, 120, 255, 0) 70%), linear-gradient(180deg, #0F2D40, #0A1A26); }
.course-initials { position: absolute; left: 14px; bottom: 7px; font-weight: 700; font-size: 17px; letter-spacing: .02em; line-height: 1; text-shadow: 0 1px 2px rgba(0,0,0,.18); }

/* ---------- dropdown menus (ddHtml in classes.js) ---------- */
.dd { position: relative; }
.dd-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 214px; background: #fff; border: 0; border-radius: 10px; box-shadow: var(--shadow-md); padding: 6px; z-index: 45; }
.dd-menu.right { left: auto; right: 0; }
.dd-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px; background: none; text-align: left; font-size: 14px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.dd-item:hover, .dd-item:focus-visible { background: var(--surface-2); outline: none; }
.dd-item:disabled { opacity: .45; cursor: default; background: none; }
.dd-item svg { width: 16px; height: 16px; color: var(--ink-2); flex: none; }
.dd-item.danger, .dd-item.danger svg { color: #B23B37; }
.dd-item .dd-note { margin-left: auto; padding-left: 14px; font-size: 12px; color: var(--ink-3); }
.dd-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.dd-label { font-size: 12px; font-weight: 600; color: var(--ink-3); padding: 6px 12px 4px; }

/* ---------- page frames ---------- */
.portal { max-width: 1320px; margin: 0 auto; padding: 34px 36px 48px; }
.home-hello { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.home-hello h1 { margin: 0; font-size: 23px; line-height: 1.25; font-weight: 650; letter-spacing: -0.015em; }
.home-hello p { margin: 3px 0 0; font-size: 14px; color: var(--ink-2); }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 28px; align-items: start; }
.home-h { margin: 0 0 10px; font-size: 14px; font-weight: 600; letter-spacing: 0; }
.portal-h1 { font-size: 24px; margin: 0 0 4px; }

/* A live session: a band across the top of Home */
.live-bands { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.live-bands:empty { display: none; }
.live-band { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px 12px 18px; border-radius: var(--r-lg); background: linear-gradient(90deg, var(--green-soft), var(--blue-soft)); box-shadow: inset 0 0 0 1px #CFE7D6, inset 3px 0 0 var(--green-deep); }
.live-band .live-tag { background: #fff; }
.live-band-t { flex: 1 1 300px; min-width: 0; }
.live-band-t span { color: #38596A; }
.btn svg { flex: none; }
.live-band .btn svg, .next-up-btn svg { width: 16px; height: 16px; }

/* A student's next piece of work */
.next-up { display: flex; align-items: center; gap: 14px 24px; flex-wrap: wrap; margin-bottom: 22px; padding: 14px 16px 14px 20px; border-radius: var(--r-lg); background: linear-gradient(90deg, var(--blue-soft), var(--green-soft)); box-shadow: inset 0 0 0 1px #C9E6F1, inset 3px 0 0 var(--blue-deep); }
.next-up-t { flex: 1 1 320px; min-width: 0; }
.next-up-k { font-size: 12px; font-weight: 600; color: #38596A; }
.next-up h2 { margin: 1px 0; font-size: 16px; line-height: 1.3; font-weight: 600; letter-spacing: -0.005em; overflow-wrap: anywhere; }
.next-up p { margin: 0; font-size: 13px; color: #38596A; }
.next-up-btn { background: var(--brand); color: #fff; }
.next-up-btn:hover { background: var(--brand-hover); color: #fff; }

/* Class tiles: the banner with the class's initials, then its name and numbers */
.course-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.course-tile { position: relative; display: flex; flex-direction: column; overflow: hidden; background: #fff; border-radius: 16px; box-shadow: 0 0 0 1px rgba(20,41,58,.05), 0 6px 18px rgba(20,41,58,.07); color: inherit; text-decoration: none; transition: box-shadow .2s var(--ease), transform .2s var(--ease); }
.course-tile:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(20,41,58,.06), 0 14px 30px rgba(20,41,58,.13); }
.course-tile:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.course-tile .course-art { flex: none; aspect-ratio: 16 / 9; transition: transform .35s var(--ease); }
.course-tile:hover .course-art { transform: scale(1.03); }
/* On a card the picture is the point: no shading over it, and no letters on a chosen picture */
.course-tile .course-art.bg-photo { background: var(--bg-img) 50% var(--bg-pos, 50%) / cover no-repeat, linear-gradient(125deg, var(--cc, #5E6E7D), var(--cc-dark)); }
.course-tile .course-art.has-bg { --shade: linear-gradient(transparent, transparent); }
.course-tile .course-art.has-bg .course-initials { display: none; }
.course-tile .course-art:not(.has-bg)::before { display: none; }
.course-tile .course-initials { left: 18px; bottom: 14px; font-size: 30px; }
.course-tile.archived .course-art { filter: grayscale(.7); opacity: .8; }
.ct-body { position: relative; display: flex; flex-direction: column; gap: 5px; padding: 12px 16px 14px; flex: 1; background: #fff; }
.ct-name { font-weight: 650; font-size: 15.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ct-next { display: flex; align-items: center; gap: 6px; margin-top: auto; min-height: 22px; font-size: 13px; color: var(--ink-2); min-width: 0; }
.ct-next b { flex: 0 1 auto; min-width: 0; overflow: hidden; color: var(--ink); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.ct-next em { flex: none; margin-left: auto; padding: 1px 9px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-hover); font-size: 12px; font-style: normal; font-weight: 600; }
.ct-next.soon em { background: var(--amber-soft); color: #94600E; }
.ct-next.late em { background: var(--red-soft); color: #A33631; }
.ct-flags { position: absolute; top: 10px; right: 10px; left: 10px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.ct-flag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.95); color: var(--ink); font-size: 12px; font-weight: 600; box-shadow: 0 1px 3px rgba(20,41,58,.2); }
.home-more { margin-top: 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* The right-hand column (Upcoming, Ready to read, Live now…): sections with thin lines between rows */
.side-box { margin-bottom: 26px; }
.side-box-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.side-box-h a { font-size: 13px; font-weight: 600; letter-spacing: 0; }
.side-box-h.red { color: #B23B37; }
.side-box-h.live { color: #256B3B; }
.side-box-h.live .live-dot { margin-right: 4px; background: var(--green-deep); animation: none; box-shadow: none; }
.side-n { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.side-box-p { font-size: 14px; }
.side-empty { padding: 4px 0; font-size: 14px; color: var(--ink-2); }
.ev-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.up-row { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; transition: background-color .15s; }
a.ev-row:hover, a.up-row:hover { background: var(--surface-2); }
.up-date { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; width: 40px; height: 42px; border-radius: 6px; overflow: hidden; background: color-mix(in srgb, var(--cc, #5E6E7D) 10%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc, #5E6E7D) 34%, #fff); line-height: 1.05; }
.up-date i { align-self: stretch; padding: 2px 0 1px; background: color-mix(in srgb, var(--cc, #5E6E7D) 74%, #14293A); color: #fff; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.up-date b { flex: 1; display: flex; align-items: center; font-size: 14.5px; font-weight: 650; color: color-mix(in srgb, var(--cc, #5E6E7D) 62%, #14293A); font-variant-numeric: tabular-nums; }
.up-when { flex: none; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.ev-main { min-width: 0; flex: 1; }
.ev-title { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.ev-meta { display: block; font-size: 13px; color: var(--ink-2); margin-top: 1px; }
.ev-meta.red { color: #B23B37; font-weight: 600; }
.side-stat { display: flex; justify-content: space-between; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: inherit; text-decoration: none; }
a.side-stat:hover { background: var(--surface-2); }
.side-stat b { font-variant-numeric: tabular-nums; }
.ext-line { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; }
.ext-line svg { width: 16px; height: 16px; flex: none; }
.ext-line.ok { color: var(--green-deep); }

/* ---------- the class page: its cover, its tabs, then the page ---------- */
.course { --cc-ink: color-mix(in srgb, var(--cc, var(--brand)) 62%, #14293A); --cc-soft: color-mix(in srgb, var(--cc, var(--brand)) 13%, #fff); }
.course-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; max-width: 1320px; margin: 0 auto; padding: 24px 36px 48px; }
.course.no-right .course-body { grid-template-columns: minmax(0, 1fr); }
.course-main { min-width: 0; }
.course-right { min-width: 0; }

/* The cover: the class's banner across the top of the sheet, its name on it */
.course-hero { position: relative; display: flex; align-items: flex-end; min-height: 104px; box-sizing: border-box; padding: 20px 36px 16px; overflow: hidden; border-radius: var(--r-xl) var(--r-xl) 0 0; color: #fff; }
.course-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,24,32,.14), rgba(8,24,32,.56)); }
.course-cover { position: absolute; inset: 0; }
.course-cover .course-initials { display: none; }
.course-hero-text { position: relative; z-index: 1; min-width: 0; max-width: min(760px, 100%); }
.course-name { font-size: 22px; font-weight: 650; letter-spacing: -0.012em; line-height: 1.2; overflow-wrap: anywhere; }
.course-name .pill { vertical-align: 5px; margin-left: 4px; }
.course-who { display: flex; align-items: center; gap: 8px; margin-top: 3px; font-size: 13px; min-width: 0; }
.course-who > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-who .avatar-stack .avatar { border-width: 1.5px; margin-left: -6px; }
.course-who .avatar-stack .avatar:first-child { margin-left: 0; }
.course-hero-tools { position: absolute; z-index: 1; top: 14px; right: 14px; display: flex; gap: 8px; }
.glass-btn { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 0; border-radius: var(--r-ctl); background: rgba(255,255,255,0.9); color: var(--ink); font-weight: 600; font-size: 13.5px; transition: background-color .15s; }
.glass-btn:hover { background: #fff; }
.glass-btn svg { width: 16px; height: 16px; flex: none; color: var(--ink-2); }
.glass-btn.icon { width: 32px; padding: 0; justify-content: center; }
.glass-btn.code .glass-k { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.glass-btn.code .mono { font-size: 14.5px; font-weight: 800; letter-spacing: .12em; }

/* The class's pages: pill tabs on a line under the cover */
.course-tabs { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; padding: 0 36px; border-bottom: 1px solid var(--line); }
.course-tabs a { display: flex; align-items: center; gap: 7px; min-height: 44px; box-sizing: border-box; padding: 0; margin-bottom: -1px; border-bottom: 2px solid transparent; color: var(--ink-2); text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; }
.course-tabs a:hover { color: var(--ink); }
.course-tabs a.active { color: var(--ink); border-bottom-color: var(--cc-ink); }
.course-tabs a svg { width: 16px; height: 16px; color: currentColor; opacity: .85; flex: none; }
.course-tabs .count { font-size: 11.5px; font-weight: 600; padding: 0 6px; border-radius: var(--r-ctl); background: var(--surface-2); color: var(--ink-2); }
.course-tabs a.active .count { background: var(--cc-soft); color: var(--cc-ink); }

/* The compact form (assignment and review pages): one bar with the class's tile */
.course-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 48px; box-sizing: border-box; padding: 0 36px; border-bottom: 1px solid var(--line); }
.course-bar-id { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: inherit; text-decoration: none; }
.course-bar-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.course-bar-id:hover .course-bar-name { color: var(--cc-ink); }
.course-bar .course-tabs { padding: 0; border: 0; }
.course-bar .course-tabs { gap: 18px; align-self: stretch; }
.course-bar .course-tabs a { min-height: 48px; font-size: 13px; }

.info-row { display: flex; gap: 6px; padding: 2px 0; }
.info-row span:first-child { color: var(--ink-2); }
.people-h { font-size: 15px; margin: 26px 0 10px; display: flex; gap: 8px; align-items: baseline; }
.people-h .muted { font-size: 13px; font-weight: 600; }
/* Add people from your school: the picker */
.sp-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sp-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(18,48,59,0.14), 0 0 0 1px rgba(18,48,59,0.05); }
.sp-q { flex: 1; min-width: 200px; }
.sp-as { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; }
.sp-as select { width: auto; }
.sp-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 2px 6px; flex-wrap: wrap; }
.sp-all { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.sp-list { max-height: min(52vh, 460px); overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.sp-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background-color .15s; }
.sp-row:last-child { border-bottom: 0; }
.sp-row:hover { background: var(--surface-2); }
.sp-row:has(input:checked:not(:disabled)) { background: var(--brand-soft); }
.sp-row.in { cursor: default; }
.sp-row.in .sp-who { opacity: .6; }
.sp-row input { flex: none; width: 16px; height: 16px; accent-color: var(--brand); }
.sp-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.sp-who b, .sp-who .tiny { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-empty { padding: 28px 18px; text-align: center; color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }

/* A page's own heading, under the tabs */
.course-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.course-head h1 { font-size: 19px; line-height: 1.25; margin: 0; font-weight: 650; overflow-wrap: anywhere; }
.course-head .crumbs { margin-bottom: 4px; }
.course-sub { font-size: 13.5px; color: var(--ink-2); margin-top: 3px; }
.crumbs .crumb-drop { border-radius: 6px; padding: 1px 4px; margin: -1px -4px; }
.crumbs .crumb-drop.drop-into { background: var(--brand-soft); outline: 2px dashed var(--brand); }

/* Materials: folders and assignments in the teacher's order */
.mat-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mat-toolbar .grow { flex: 1; }
.mat-list { display: flex; flex-direction: column; }
.mat-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 10px; border-bottom: 1px solid var(--line); transition: background-color .15s; }
.mat-row:hover { background: var(--surface-2); }
.mat-folder { border-bottom: 0; border-radius: 10px; background: var(--surface-2); margin: 6px 0; }
.mat-folder:hover { background: #EDF3F5; }
.mat-empty { border: 1.5px dashed #C3D3DA; border-radius: 10px; }
.mat-progress { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.mat-progress .sbar { width: 96px; }
.mat-nums { display: grid; justify-items: end; gap: 2px; min-width: 132px; }
.mat-nums-t { display: inline-flex; gap: 10px; }
.mat-row.is-draft .mat-title { color: var(--ink-2); }
.mat-grip { width: 12px; flex: none; margin-right: -4px; color: var(--ink-3); cursor: grab; opacity: 0; display: flex; }
.mat-grip svg { width: 12px; height: 18px; }
.mat-row:hover .mat-grip, .mat-row:focus-within .mat-grip { opacity: 1; }
.mat-ic { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mat-ic svg { width: 18px; height: 18px; }
.t-writing { background: #E1F2FA; color: #0E6E9C; }
.t-group { background: var(--violet-soft); color: #5B3FB0; }
.t-discussion { background: var(--amber-soft); color: #94600E; }
.t-folder { background: color-mix(in srgb, var(--fc, #8396A3) 14%, #fff); color: var(--fc, #6F8593); }
.t-folder svg { width: 20px; height: 20px; }
.fc-teal { --fc: #1E9BC4; } .fc-green { --fc: #3C9A5F; } .fc-navy { --fc: #2F5DA8; } .fc-violet { --fc: #7454C6; } .fc-magenta { --fc: #B13F8E; }
.fc-red { --fc: #C9483F; } .fc-orange { --fc: #D9772B; } .fc-gold { --fc: #C2961C; } .fc-slate { --fc: #5E6E7D; } .fc-forest { --fc: #2E7D4F; }
.mat-body { flex: 1; min-width: 0; }
.mat-title { font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.mat-title:hover { color: var(--brand); }
.mat-title::after { content: ""; position: absolute; inset: 0; } /* the whole row opens it */
.mat-meta { display: flex; flex-wrap: wrap; gap: 2px 0; margin-top: 1px; font-size: 13px; color: var(--ink-2); }
.mat-meta > span:not(:last-of-type)::after { content: "·"; margin: 0 7px; color: var(--ink-3); font-weight: 400; }
.mat-meta .overdue { color: #B23B37; font-weight: 600; }
.mat-side { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.mat-stat { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.mat-stat b { color: var(--ink); }
.mat-row .dd { position: relative; z-index: 2; }
.mat-row.dragging { opacity: .45; }
.mat-row.drop-before::before, .mat-row.drop-after::after { content: ""; position: absolute; left: 6px; right: 6px; height: 3px; border-radius: 2px; background: var(--brand); z-index: 3; }
.mat-row.drop-before::before { top: -6px; }
.mat-row.drop-after::after { bottom: -6px; }
.mat-row.drop-into { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.folder-desc { background: var(--surface-2); border-radius: 10px; padding: 14px 18px; margin-bottom: 12px; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.mat-empty { padding: 34px 20px; text-align: center; color: var(--ink-2); font-size: 14px; }
.mat-empty b { display: block; color: var(--ink); font-size: 15.5px; margin-bottom: 4px; }

/* Colour swatches (course settings, folders) */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--field-line); background: var(--cc, #fff); padding: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.swatch svg { width: 15px; height: 15px; opacity: 0; }
.swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--ink); }
.swatch[aria-checked="true"] svg { opacity: 1; }
.swatch.none { background: #fff; color: var(--ink-2); }
.swatch.none::after { content: ""; width: 20px; height: 2px; background: var(--red); transform: rotate(-45deg); position: absolute; }
.swatch.none { position: relative; }
.swatch.none[aria-checked="true"]::after { display: none; }
.color-preview { display: flex; gap: 14px; align-items: center; margin-top: 10px; }
.color-preview .course-art { width: 120px; height: 68px; border-radius: 12px; }
.cs-banner { align-items: flex-start; }
.cs-banner .course-art { width: 168px; height: 84px; border-radius: 14px; flex: none; }
/* The banner dialog (classes.js openClassBanner) */
.bn-preview { display: flex; flex-direction: column; gap: 8px; }
.bn-big { height: 132px; border-radius: 12px; }
.bn-big .course-initials { font-size: 32px; left: 16px; bottom: 13px; }
.bn-cap { display: flex; gap: 8px; align-items: baseline; font-size: 13px; color: var(--ink-2); }
.bn-cap b { color: var(--ink); font-size: 14px; }
.bn-k { font-weight: 700; font-size: 13.5px; margin: 18px 0 8px; }
.bn-k .label-note { font-weight: 500; }
.bn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.bn-tile { display: flex; flex-direction: column; gap: 5px; padding: 4px; border: 2px solid transparent; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--line); text-align: left; cursor: pointer; transition: box-shadow .15s, border-color .15s, transform .15s var(--ease, ease); }
.bn-tile:hover { box-shadow: 0 0 0 1px #C9D5DC, 0 4px 10px rgba(16, 48, 61, .08); }
.bn-tile[aria-checked="true"] { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.bn-tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.bn-art { height: 56px; border-radius: 12px; }
.bn-art .course-initials { font-size: 15px; left: 7px; bottom: 6px; }
.bn-name { font-size: 12.5px; font-weight: 600; color: var(--ink-2); padding: 0 3px 2px; }
.bn-upload { align-items: center; justify-content: center; min-height: 84px; border: 2px dashed var(--field-line); box-shadow: none; color: var(--ink-2); }
.bn-upload:hover { border-color: var(--brand); color: var(--brand); box-shadow: none; }
.bn-upload svg { width: 20px; height: 20px; }
.bn-pos { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease, ease); }
.bn-pos.open { grid-template-rows: 1fr; }
.bn-pos-in { overflow: hidden; min-height: 0; }
.bn-pos-pad { padding-top: 16px; }
.bn-pos-row { display: flex; align-items: center; gap: 10px; margin: 8px 0 4px; }
.bn-pos-row input[type="range"] { flex: 1; accent-color: var(--brand); }
.bn-pos .hint { font-size: 12.5px; color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .bn-tile, .bn-pos { transition: none; } }

/* Folder picker (move to…) */
.folder-tree { display: flex; flex-direction: column; gap: 2px; max-height: 50vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.folder-tree label { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: 14px; cursor: pointer; }
.folder-tree label:hover { background: var(--surface-2); }
.folder-tree label.dim { opacity: .45; cursor: not-allowed; }
.folder-tree svg { width: 16px; height: 16px; color: var(--fc, #8396A3); flex: none; }

/* ---------- updates ---------- */
.upd-composer { background: #fff; border: 0; box-shadow: var(--shadow-sm); border-radius: var(--r-xl); padding: 14px 16px; margin-bottom: 16px; transition: box-shadow .2s; }
.upd-composer:focus-within { box-shadow: var(--shadow-md), 0 0 0 2px var(--brand-soft); }
.upd-composer textarea { display: block; width: 100%; min-height: 70px; border: 0; outline: none; resize: vertical; font: inherit; font-size: 14.5px; line-height: 1.55; padding: 4px 2px; }
.upd-composer-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 10px; }
.upd-composer-foot .grow { flex: 1; }
.upd-composer-foot .check-row { margin: 0; font-size: 13px; }
.upd-classes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.upd-class { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--field-line); border-radius: 999px; font-size: 12.5px; font-weight: 600; background: #fff; color: var(--ink-2); }
.upd-class i { width: 8px; height: 8px; border-radius: 50%; background: var(--cc); }
.upd-class[aria-pressed="true"] { border-color: var(--cc); background: color-mix(in srgb, var(--cc) 10%, #fff); color: var(--ink); }
.upd { display: flex; gap: 12px; background: #fff; border: 0; box-shadow: var(--shadow-sm); border-radius: var(--r-xl); padding: 16px 18px; margin-bottom: 12px; }
.upd.pinned { background: #FFFCF5; box-shadow: var(--shadow-sm), inset 0 0 0 1.5px #F1D9A8; }
.upd-main { flex: 1; min-width: 0; }
.upd-head { display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; font-size: 13.5px; }
.upd-author { font-weight: 700; }
.upd-where { color: var(--ink-2); }
.upd-where a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.upd-where a:hover { color: var(--brand); text-decoration: underline; }
.upd-time { font-size: 12.5px; color: var(--ink-3); }
.upd-pin { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: var(--r-ctl); background: var(--amber-soft); font-size: 11.5px; font-weight: 700; color: #94600E; }
.upd-pin svg { width: 12px; height: 12px; }
.upd-body { margin-top: 6px; font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.upd-edit textarea { width: 100%; min-height: 90px; margin-top: 8px; }
.upd-edit .btn-row { justify-content: flex-end; }
.upd .dd { margin: -4px -6px 0 0; }
.act-ic { width: 38px; height: 38px; border-radius: 50%; flex: none; }
.upd-more { display: flex; justify-content: center; padding: 6px 0 2px; }
.feed-empty { background: #fff; border: 0; box-shadow: var(--shadow-sm); border-radius: var(--r-xl); padding: 30px 20px; text-align: center; color: var(--ink-2); font-size: 14px; }
.feed-empty b { display: block; color: var(--ink); font-size: 15.5px; margin-bottom: 4px; }

/* ---------- the assignment page inside the course ---------- */
.asg-head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.asg-head .mat-ic { width: 48px; height: 48px; border-radius: 50%; }
.asg-head .mat-ic svg { width: 22px; height: 22px; }
.asg-title { flex: 1; min-width: 220px; }
.asg-meta { display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; margin-top: 5px; font-size: 13.5px; color: var(--ink-2); }
.asg-meta .overdue { color: #B23B37; font-weight: 600; }
.asg-meta > span:not(.pill) + span:not(.pill)::before { content: "·"; margin-right: 12px; color: var(--ink-3); }
.asg-actions { display: flex; gap: 8px; align-items: center; }
.your-work .pill { margin-bottom: 8px; }
.your-work .btn { width: 100%; justify-content: center; margin-top: 10px; }
.your-work-line { font-size: 13px; color: var(--ink-2); padding: 1px 0; }

/* ---------- calendar ---------- */
.cal-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-title { font-size: 24px; font-weight: 750; margin: 0 10px 0 4px; min-width: 180px; letter-spacing: -.025em; }
.cal-head .grow { flex: 1; }
.cal-head select.input { width: auto; max-width: 240px; padding: 6px 9px; font-size: 13.5px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: #fff; border: 0; box-shadow: var(--shadow-sm); border-radius: var(--r-xl); overflow: hidden; }
.cal-dow { padding: 10px 12px 8px; background: #fff; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.cal-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 112px; padding: 5px 5px 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-cell.last-row { border-bottom: 0; }
.cal-cell.other { background: var(--surface-2); }
.cal-cell.other .cal-num { color: var(--ink-3); }
.cal-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12.5px; font-weight: 600; flex: none; }
.cal-cell.today .cal-num { background: var(--brand); color: #fff; }
.cal-ev { display: block; padding: 3px 8px; border-left: 0; border-radius: 8px; background: color-mix(in srgb, var(--cc, #8A9BA8) 11%, #fff); color: var(--ink); font-size: 12px; line-height: 1.3; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev:hover { background: color-mix(in srgb, var(--cc, #8A9BA8) 20%, #fff); }
.cal-ev .k { font-weight: 700; }
.cal-ev .t { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cal-ev.draft { background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cc, #8A9BA8) 40%, #fff); color: var(--ink-2); font-style: italic; }
.cal-ev.done { color: var(--ink-2); text-decoration: line-through; }
.cal-ev.overdue { color: #B23B37; }
.cal-ev::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--cc, var(--ink-3)); vertical-align: 1px; }
.cal-more { align-self: flex-start; border: 0; background: none; padding: 1px 6px; font-size: 12px; font-weight: 600; color: var(--brand); }
.cal-more:hover { text-decoration: underline; }
.cal-list { background: #fff; border: 0; box-shadow: var(--shadow-sm); border-radius: var(--r-xl); overflow: hidden; }
.cal-list-day { padding: 10px 18px; background: var(--surface-2); border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 700; }
.cal-list-day.today { color: var(--brand); }
.cal-list-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); color: inherit; text-decoration: none; }
.cal-list-row:hover { background: #F7FAFB; }
.cal-list-row:last-child { border-bottom: 0; }
.cal-list-row .time { width: 76px; flex: none; font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cal-list-row .ev-main { min-width: 0; }
.cal-list-row .ev-title { font-size: 14px; }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font-size: 12.5px; color: var(--ink-2); }
.cal-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cal-legend i { width: 10px; height: 10px; border-radius: 50%; background: var(--cc); }

/* ---------- narrower screens ---------- */
@media (max-width: 1180px) {
  .home-grid, .course-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  .portal { padding: 22px 16px 48px; }
  .home-hello h1 { font-size: 25px; }
  .course-hero { min-height: 128px; padding: 22px 16px 16px; }
  .course-name { font-size: 22px; }
  .course-hero-tools { top: 10px; right: 10px; }
  .glass-btn.code .glass-k { display: none; }
  .course-body { padding: 18px 16px 48px; }
  .course-tabs { padding: 8px 12px; }
  .course-bar { padding: 8px 16px; }
  .course-bar .course-tabs { width: 100%; }
  .next-up { padding: 20px; }
  .cal-cell { min-height: 74px; }
  .cal-ev .k, .cal-ev .t { display: none; }
}
@media (max-width: 720px) {
  .course-tabs a { padding: 0 12px; }
  .course-tabs a svg { display: none; }
  /* Title across the row, the settings beside it, the numbers on a line under it */
  .mat-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 6px 10px; }
  .mat-row .mat-side { grid-column: 2 / 4; justify-content: flex-start; gap: 6px; }
  .mat-row .mat-side:has(.dd) { display: contents; }
  .mat-row .dd { grid-column: 3; grid-row: 1; }
  .mat-row .mat-nums, .mat-row .mat-side > .pill { grid-column: 2 / 4; grid-row: 2; justify-self: start; }
  .mat-nums { justify-items: start; min-width: 0; }
  .mat-grip, .mat-hint { display: none; }
}

/* ---------- motion: everything moves the same calm way ----------
   One easing (quick start, soft landing) and short durations everywhere;
   nothing moves for people who ask their system for less motion. */
:root { --ease: cubic-bezier(.2, .7, .2, 1); interpolate-size: allow-keywords; }
@keyframes vxMenuIn { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }
.dd-menu:not(.hidden), .menu:not(.hidden) { animation: vxMenuIn .16s var(--ease); transform-origin: top right; }
.dd-menu:not(.right):not(.hidden) { transform-origin: top left; }
/* A new page fades up into place (router.js adds .route-enter for a moment) */
@keyframes vxPageIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.route-view.route-enter > * { animation: vxPageIn .24s var(--ease) both; }
/* <details> open and close smoothly */
details::details-content { height: 0; overflow: clip; transition: height .3s var(--ease), content-visibility .3s allow-discrete; }
details[open]::details-content { height: auto; }
details > summary { transition: color .15s; }
.course-tabs a, .side-stat, .ev-row, .dd-item, .upd-class, .swatch, .crumbs a, .tab { transition: background-color .15s, color .15s, border-color .15s, box-shadow .15s; }
.course-art { transition: filter .2s, opacity .2s; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
}

/* A page's shape while it loads (router.js). Late fade, so a quick load shows nothing. */
.skel-page { animation: skelIn .2s ease .18s both; }
@keyframes skelIn { from { opacity: 0; } to { opacity: 1; } }
.skel { border-radius: 10px; background: linear-gradient(100deg, var(--surface-2) 30%, #E9F0F3 50%, var(--surface-2) 70%); background-size: 240% 100%; animation: skelGlide 1.5s linear infinite; }
@keyframes skelGlide { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.skel-title { width: min(340px, 70%); height: 34px; margin-bottom: 12px; }
.skel-line { width: min(460px, 90%); height: 16px; margin-bottom: 30px; }
.skel-row { height: 54px; margin-bottom: 10px; }
.skel-hero { height: 150px; margin-bottom: 26px; border-radius: 10px; }
.skel-cols { display: grid; grid-template-columns: minmax(0, 1fr) 312px; gap: 28px; }
.skel-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; align-content: start; }
.skel-card { height: 228px; border-radius: 16px; }
@media (max-width: 900px) { .skel-cols { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .skel-page, .skel { animation: none; } }

/* Search (search.js): a box, then results grouped by kind */
.vnav-search { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.vnav-search kbd { margin-left: auto; padding: 1px 6px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font: 600 11px var(--font); }
.jump-box { position: relative; }
.jump-box svg { position: absolute; left: 13px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.jump-box .input { padding-left: 40px; }
.jump-list { display: flex; flex-direction: column; max-height: min(52vh, 420px); margin: 12px -8px 0; overflow-y: auto; }
.jump-h { padding: 10px 10px 4px; color: var(--ink-3); font-size: 12px; font-weight: 600; }
.jump-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.jump-row:hover, .jump-row.on { background: var(--brand-soft); }
.jump-row b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jump-row span { flex: none; max-width: 45%; margin-left: auto; overflow: hidden; color: var(--ink-2); font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; }
.jump-empty { padding: 26px 10px; color: var(--ink-2); text-align: center; }

/* ---------- numbers and status ----------
   One set of status colours everywhere: green returned, amber to review, blue
   in progress, the empty track not started. */
.s-done { background: var(--green-deep); }
.s-review { background: #E9A23A; }
.s-going { background: var(--blue-deep); }
.s-rest { background: #DCE6EB; }
.sbar { display: flex; height: 7px; overflow: hidden; border-radius: 2px; background: #DCE6EB; }
.sbar i { display: block; min-width: 2px; height: 100%; }
.skey { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; font-size: 11.5px; color: var(--ink-2); }
.skey span { display: inline-flex; align-items: center; gap: 5px; }
.skey i, .side-stat .sw i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.side-stat .sw { display: inline-flex; align-items: center; gap: 8px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 10px; margin-bottom: 20px; }
.kpis.thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi { --k: var(--brand); --k-bar: var(--k); --k-ink: color-mix(in srgb, var(--k) 80%, #14293A); position: relative; display: flex; flex-direction: column; min-width: 0; padding: 12px 14px 11px; overflow: hidden; border-radius: var(--r-lg); background: linear-gradient(135deg, color-mix(in srgb, var(--k) 8%, #fff), #fff 68%); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k) 20%, var(--line)); }
.kpi::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--k-bar); }
/* The logo's two lenses in the corner, in the tile's colour */
.kpi::after { content: ""; position: absolute; top: -14px; right: -18px; width: 80px; height: 80px; background: var(--k); opacity: .15; pointer-events: none; -webkit-mask: var(--lens) center / contain no-repeat; mask: var(--lens) center / contain no-repeat; --lens: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 92 92'><g fill='none' stroke='black' stroke-width='1.5'><circle cx='36' cy='46' r='30'/><circle cx='56' cy='46' r='30'/></g></svg>"); }
.kpi-k { color: var(--k-ink); font-size: 11.5px; font-weight: 650; letter-spacing: .01em; }
.kpi-v { margin: 1px 0 2px; color: var(--ink); font-size: 23px; font-weight: 650; line-height: 1.2; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpi .sbar { margin: 2px 0 4px; }
.kpi-n { margin-top: auto; color: var(--ink-2); font-size: 12px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Blue and green are Visor's own and carry its gradient; amber and red mean something needs a look */
.k-blue { --k: #0E7BAB; --k-bar: var(--grad); } .k-green { --k: #2E8549; --k-bar: var(--grad); } .k-amber { --k: #C27C12; } .k-red { --k: #C9483F; }

/* Fine line-work over a class's colour; a chosen background keeps its own */
.course-art:not(.has-bg)::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.075) 0 1px, transparent 1px 12px), repeating-linear-gradient(90deg, rgba(255,255,255,.075) 0 1px, transparent 1px 12px), radial-gradient(70% 130% at 100% 0%, rgba(255,255,255,.2), transparent 62%); pointer-events: none; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 12px; }
.hs { padding: 0 16px; border-left: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.88); font-size: 11.5px; line-height: 1.25; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.hs:first-child { padding-left: 0; border-left: 0; }
.hs b { display: block; color: #fff; font-size: 18px; font-weight: 650; font-variant-numeric: tabular-nums; }

.mchip { display: inline-flex; align-items: center; height: 18px; margin-left: 6px; padding: 0 6px; border-radius: 4px; background: var(--surface); color: var(--ink-2); font-size: 11.5px; font-style: normal; font-weight: 600; white-space: nowrap; }
.mchip.locked { background: #FBE7E6; color: #A33631; }
.mchip.open { background: #E1F2FA; color: #0E6E9C; }
.rel { font-weight: 600; color: var(--brand-hover); }
.rel.soon { color: #A1640B; }
.rel.late { color: #B23B37; }
.roster-num { font-size: 13px; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.roster-num b { color: var(--ink); }
.roster-num .sbar { width: 84px; margin-top: 4px; }
@media (max-width: 600px) {
  .kpis, .kpis.thirds { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .kpi-v { font-size: 20px; }
  .hs { padding: 0 11px; font-size: 11px; }
  .hs b { font-size: 15px; }
  .mchip { margin-left: 0; margin-right: 6px; }
}

@media (prefers-reduced-motion: reduce) { .course-tile, .course-tile .course-art { transition: none; } .course-tile:hover, .course-tile:hover .course-art { transform: none; } }

/* Profile settings: your icon, a color or an image */
.prof-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.prof-name { font-weight: 700; font-size: 16px; }
.prof-tabs { display: flex; width: fit-content; margin-bottom: 12px; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, 34px); gap: 10px; padding: 4px; }
.swatch { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%; background: var(--sw); color: #fff; cursor: pointer; transition: transform .12s var(--ease), box-shadow .12s var(--ease); }
.swatch:hover { transform: scale(1.1); }
.swatch:focus-visible, .swatch:focus-within { outline: 2px solid var(--brand); outline-offset: 3px; }
.swatch svg { width: 17px; height: 17px; opacity: 0; }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sw); }
.swatch[aria-pressed="true"] svg { opacity: 1; }
.swatch.custom { overflow: hidden; background: conic-gradient(#E5484D, #F5A524, #46A758, #1E9BC4, #6246BE, #C2366E, #E5484D); }
.swatch.custom::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; pointer-events: none; }
.swatch.custom.on::after { inset: 7px; background: var(--sw); box-shadow: 0 0 0 2px #fff; }
.swatch.custom input { position: absolute; inset: -6px; width: 46px; height: 46px; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.prof-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; border: 1.5px dashed var(--field-line); border-radius: var(--r-lg); background: var(--surface-2); color: var(--ink-2); font-size: 13px; text-align: center; cursor: pointer; transition: border-color .15s, background-color .15s; }
.prof-drop b { color: var(--ink); font-size: 14px; font-weight: 600; }
.prof-drop:hover, .prof-drop.over, .prof-drop:focus-within { border-color: var(--brand); background: var(--brand-soft); }
.prof-file { position: relative; cursor: pointer; }
.prof-file:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }

/* The tour: one card, one idea at a time */
.modal.tour { position: relative; max-width: 440px; overflow: hidden; }
.modal.tour .mh { position: absolute; top: 0; right: 0; z-index: 1; padding: 10px; }
.modal.tour .mh h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.modal.tour .mb { padding: 0; }
.modal.tour .mf { align-items: center; padding: 0 24px 22px; }
.tour-step { animation: tour-in .22s var(--ease); }
@keyframes tour-in { from { opacity: 0; transform: translateX(10px); } }
.tour-art { display: flex; align-items: center; justify-content: center; height: 172px; background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 440 172'><g fill='none' stroke-width='1.5'><circle cx='178' cy='86' r='112' stroke='%234DBEDC' stroke-opacity='.8'/><circle cx='262' cy='86' r='112' stroke='%237BC288' stroke-opacity='.8'/></g></svg>") center / cover no-repeat, linear-gradient(135deg, #C4EAF5, #D8F1DE); }
.tour-ic { display: inline-flex; align-items: center; justify-content: center; width: 76px; height: 76px; border-radius: 50%; background: #fff; box-shadow: 0 8px 22px rgba(20,41,58,.14); color: var(--brand); }
.tour-ic svg { width: 34px; height: 34px; }
.tour-text { padding: 20px 24px 22px; }
.tour-text h2 { margin: 0 0 6px; font-size: 21px; font-weight: 700; letter-spacing: -0.012em; }
.tour-text p { margin: 0; min-height: 3em; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.tour-dots { display: flex; gap: 6px; margin-right: auto; }
.tour-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); transition: background-color .2s; }
.tour-dots i.on { background: var(--brand); }
@media (prefers-reduced-motion: reduce) { .tour-step { animation: none; } }

/* Your School */
.school-hero { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.school-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: 16px; background: linear-gradient(135deg, #C4EAF5, #D8F1DE); box-shadow: inset 0 0 0 1px var(--line); color: var(--brand); }
.school-logo svg { width: 30px; height: 30px; }
.school-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.school-id { flex: 1 1 240px; min-width: 0; }
.school-id h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.school-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.school-actions .btn svg { width: 16px; height: 16px; }
.school-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 12px; }
.school-bar input[type=search] { flex: 1 1 220px; min-width: 0; }
.school-bar select { width: auto; }
.school-tabs { margin-bottom: 12px; }
.school-table .linklike { text-align: left; }
.school-class-h { margin: 16px 0 6px; font-size: 14px; font-weight: 650; }
.class-staff-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.class-staff-row select { width: auto; max-width: 100%; }
.home-h-tools { display: flex; align-items: center; gap: 8px; }
.school-class-list { columns: 2; column-gap: 20px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.school-class-list li { padding: 3px 0; break-inside: avoid; overflow-wrap: anywhere; }
.school-check { width: 34px; padding-right: 0 !important; }
.school-check input { width: 16px; height: 16px; accent-color: var(--brand); }
.school-more { padding: 10px; text-align: center; border-top: 1px solid var(--line); }
.school-bulk { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 10px; padding: 8px 12px; border-radius: var(--r-lg); background: var(--brand-soft); font-size: 13.5px; }
.school-bulk .btn svg { width: 15px; height: 15px; }
.school-roles { margin-top: 18px; font-size: 14px; color: var(--ink-2); }
.school-roles summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.school-roles dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 10px 0 0; }
.school-roles dt { font-weight: 600; color: var(--ink); }
.school-roles dd { margin: 0; }
.school-none { text-align: center; }
.school-none h1 { margin: 12px 0 6px; font-size: 22px; }
.school-none .field { text-align: left; }
.school-logo-row { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.school-logo-row .hint { margin-top: 6px; }
.setup-card { margin-bottom: 18px; padding: 16px 18px; border-radius: var(--r-lg); background: linear-gradient(90deg, var(--blue-soft), var(--green-soft)); box-shadow: inset 0 0 0 1px #C9E6F1; }
.setup-card h2 { margin: 0 0 10px; font-size: 16px; font-weight: 650; }
.setup-card ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.setup-card li { display: flex; align-items: center; gap: 10px; min-height: 34px; font-size: 14.5px; }
.setup-card li.done { color: var(--ink-2); }
.setup-n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: #fff; font-size: 12.5px; font-weight: 700; color: var(--brand); box-shadow: inset 0 0 0 1px #BFDDE9; }
.setup-card li.done .setup-n { background: var(--green-deep); box-shadow: none; color: #fff; }
.setup-n svg { width: 14px; height: 14px; }
.setup-t { flex: 1; min-width: 0; }
.grade-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.grade-chip { min-width: 34px; height: 30px; padding: 0 7px; border: 0; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--field-line); color: var(--ink-2); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.grade-chip:hover { box-shadow: inset 0 0 0 1px var(--brand); }
.grade-chip[aria-pressed="true"] { background: var(--brand); box-shadow: none; color: #fff; }
.ap-file { display: inline-block; margin-top: 6px; font-size: 13px; cursor: pointer; }
.ap-defaults { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 16px; }
.ap-sum { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; }
.ap-bad { color: #A33631; font-weight: 500; }
.ap-table { max-height: 300px; overflow: auto; border-radius: var(--r-lg); box-shadow: inset 0 0 0 1px var(--line); }
.ap-table .roster td, .ap-table .roster th { padding: 6px 10px; }
.ap-table .ap-email { max-width: 240px; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ap-table .ap-grades { width: 90px; }
.ap-send { margin-right: auto; }
.invite-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 12px 14px; border-radius: var(--r-lg); background: linear-gradient(90deg, var(--blue-soft), var(--green-soft)); box-shadow: inset 0 0 0 1px #C9E6F1; }
.invite-banner > img, .invite-banner .school-logo { flex: none; width: 48px; height: 48px; border-radius: 12px; background: #fff; object-fit: contain; }
.invite-banner b { display: block; font-size: 15.5px; }
.invite-banner span { font-size: 13.5px; color: var(--ink-2); }
.invite-mode .role-cards, .invite-mode #suStudentExtras, .invite-mode .sub, .invite-mode .field:has(#suRoleLabel), .invite-mode .field:has(#suSchoolPicker) { display: none; }
.school-new { display: inline-block; margin-top: 6px; font-size: 13.5px; font-weight: 600; }
@media (max-width: 600px) {
  .ap-defaults { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ap-table .roster { min-width: 520px; }
  .modal .mf:has(.ap-send) { flex-wrap: wrap; }
  .ap-send { flex: 1 1 100%; margin-right: 0; }
  .school-roles dl { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .school-roles dd { margin-bottom: 8px; }
  .roster-card:has(.school-table) { overflow-x: auto; }
}

/* Joining a school, and a school's requests and terms */
.home-h-row { display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 10px; }
.home-h-row .home-h { margin: 0; }
.home-term { width: auto; }
.school-ask { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 8px 24px; margin-bottom: 20px; padding: 16px 18px; border-radius: var(--r-lg); background: linear-gradient(90deg, var(--blue-soft), var(--green-soft)); box-shadow: inset 0 0 0 1px #C9E6F1; }
.school-ask h2 { margin: 0 0 4px; font-size: 17px; font-weight: 650; }
.school-ask p { margin: 0; }
.school-wait { margin-bottom: 20px; }
.school-or { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--ink-3); font-size: 13px; }
.school-or::before, .school-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.school-requests { margin-bottom: 18px; }
.school-requests h2 { margin: 0 0 8px; font-size: 15px; font-weight: 650; }
.school-requests { padding: 14px 16px; border-radius: var(--r-lg); background: var(--amber-soft); box-shadow: inset 0 0 0 1px #F1DDBB; }
.req-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 10px 0; border-top: 1px solid #F1DDBB; }
.req-who { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }
.req-row select { width: auto; }
.req-grades { width: 90px; }
.term-list { display: flex; flex-wrap: wrap; gap: 8px; }
.term-chip { display: grid; grid-template-columns: auto auto; gap: 2px 10px; justify-content: start; align-items: center; padding: 9px 12px; border: 0; border-radius: var(--r-lg); background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: inherit; text-align: left; }
.term-chip .tiny { grid-column: 1 / -1; }
button.term-chip { cursor: pointer; }
button.term-chip:hover { box-shadow: inset 0 0 0 1px var(--brand); }
@media (max-width: 720px) { .school-ask { grid-template-columns: minmax(0, 1fr); } }
.class-school-note { margin: 12px 36px 0; }
@media (max-width: 720px) { .class-school-note { margin: 12px 16px 0; } }
.live-flags { color: #A1640B; font-weight: 600; }