:root {
	--paper: #F7F5EF;
	--paper-raised: #FFFFFF;
	--ink: #202B3A;
	--ink-soft: #5B6675;
	--line: #DEDACB;
	--blue: #2E5EAA;
	--blue-soft: #E7EEF9;
	--green: #35815F;
	--green-soft: #E4F1EA;
	--coral: #C05038;
	--coral-soft: #FBE9E4;
	--honors: #7A5AA6;
	--honors-soft: #EFE8F7;
	--ok: #256B4A;
	--ok-soft: #E2F0E9;
	--warn: #A83512;
	--warn-soft: #FCE8DF;
	--radius: 10px;
	font-size: 16px;
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video, table, pre { max-width: 100%; }
/* every flex/grid child may shrink below its content width instead of overflowing */
.stat-card, .item-row, .item-body, .course-summary-row, .csr-name,
.contact-field, .upcoming-row, .course-head, .course-head-right { min-width: 0; }
.item-title, .csr-name, .contact-value, .drawer-item { overflow-wrap: anywhere; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
	margin: 0;
}

button { font-family: inherit; cursor: pointer; }
a { color: var(--blue); }

/* ---------------------------------------------------------------- login */

.login-screen {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	overflow-y: auto;               /* only vertical, if a tiny screen needs it */
	overflow-x: hidden;             /* never let the login pan sideways */
	background:
		repeating-linear-gradient(180deg, transparent, transparent 34px, var(--line) 35px),
		var(--paper);
}
.login-screen[hidden] { display: none; }

.login-card {
	position: relative;
	width: 100%;
	max-width: min(360px, 100%);
	background: var(--paper-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 40px 28px 28px;
	box-shadow: 0 12px 32px rgba(32, 43, 58, 0.08);
}

.login-tab {
	position: absolute;
	top: -18px;
	left: 24px;
	background: var(--blue);
	color: #fff;
	font-family: "Space Grotesk", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	padding: 6px 14px;
	border-radius: 6px 6px 2px 2px;
}

.login-card h1 { font-size: 22px; margin-bottom: 6px; }
.login-sub { color: var(--ink-soft); font-size: 14px; margin: 0 0 20px; }

#login-form { display: flex; gap: 8px; }

#login-password {
	flex: 1;
	padding: 11px 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--paper);
	color: var(--ink);              /* was inheriting a dark colour in dark mode */
}
#login-password::placeholder { color: var(--ink-soft); }
#login-password:focus { outline: 2px solid var(--blue); outline-offset: 1px; }

#login-form button {
	padding: 11px 18px;
	border: none;
	border-radius: 8px;
	background: var(--blue);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
}
#login-form button:hover { background: #244d8d; }

.login-error { color: var(--coral); font-size: 13px; margin: 14px 0 0; }
.login-offline { color: var(--ink-soft); font-size: 13px; margin: 14px 0 0; }

.local-role-picker { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line); }
.local-role-picker .login-sub { margin-bottom: 10px; }
.role-pick-btn {
	padding: 9px 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--paper);
	color: var(--ink);
	font-size: 13px;
	font-weight: 600;
	margin-right: 8px;
}
.role-pick-btn:hover { border-color: var(--blue); color: var(--blue); }

/* ----------------------------------------------------------------- app */

.app-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 24px;
	background: var(--paper-raised);
	border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand-mark {
	width: 42px;
	height: 42px;
	flex: none;
	display: block;
}
.brand-mark svg { width: 100%; height: 100%; display: block; }
.pl-page { fill: var(--blue); }
.pl-spine { fill: var(--ink); opacity: 0.28; }
.pl-ring { fill: var(--ink-soft); }
.pl-rule { stroke: #fff; stroke-width: 2; stroke-linecap: round; opacity: 0.9; }

.brand h1 { font-size: 18px; }
.role-line { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-soft); }

.header-actions { display: flex; align-items: center; gap: 10px; }

.offline-badge {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	color: var(--coral);
	background: var(--coral-soft);
	padding: 4px 9px;
	border-radius: 999px;
}

.ghost-btn {
	white-space: nowrap;
	background: transparent;
	border: 1px solid var(--line);
	color: var(--ink-soft);
	padding: 7px 13px;
	border-radius: 7px;
	font-size: 13px;
}
.ghost-btn:hover { border-color: var(--ink-soft); color: var(--ink); }

/* ---------------------------------------------------------- binder tabs */

.tabs { display: none; }   /* replaced by the hamburger menu at all widths */

.tab-btn {
	flex: none;
	position: relative;
	background: var(--paper);
	border: 1px solid var(--line);
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--ink-soft);
	white-space: nowrap;
}

.tab-btn .tab-dot {
	display: inline-block;
	min-width: 17px;
	height: 17px;
	padding: 0 5px;
	border-radius: 999px;
	background: var(--coral);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 17px;
	text-align: center;
	margin-left: 6px;
	vertical-align: middle;
}

.tab-btn.active {
	background: var(--blue);
	color: #fff;
	font-weight: 600;
	border-color: var(--blue);
}
.tab-btn.active .tab-dot { background: #fff; color: var(--blue); }

/* -------------------------------------------------------------- content */

.content { max-width: 900px; margin: 0 auto; padding: 22px 20px 80px; }

.course-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 18px;
}

.course-title { font-size: 22px; margin-bottom: 4px; }
.course-provider { color: var(--ink-soft); font-size: 13px; }

.course-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	font-size: 13px;
	color: var(--ink-soft);
	margin-top: 10px;
}
.course-meta span strong { color: var(--ink); font-weight: 600; }

.note-box {
	background: var(--blue-soft);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 10px 13px;
	font-size: 12.5px;
	color: var(--ink);
	margin-bottom: 18px;
	line-height: 1.5;
}

.track-toggle {
	display: inline-flex;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 3px;
	gap: 2px;
}
.track-toggle button {
	border: none;
	background: transparent;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-soft);
}
.track-toggle button.active { background: var(--honors); color: #fff; }

/* --------------------------------------------------------------- stats */

.stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }

.stat-card {
	flex: 1 1 140px;
	background: var(--paper-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px 16px;
}
.stat-card .num { font-family: "Space Grotesk", sans-serif; font-size: 24px; font-weight: 700; }
.stat-card .label { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

.progress-track {
	height: 7px;
	background: var(--line);
	border-radius: 999px;
	overflow: hidden;
	margin-top: 8px;
}
.progress-fill { height: 100%; background: var(--ok); border-radius: 999px; }

/* -------------------------------------------------------------- weeks */

.week-block { margin-bottom: 16px; }

.week-head {
	border-bottom: 1px solid var(--line);
	padding-bottom: 6px;
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 0 2px 8px;
}
.week-tag {
	font-family: "Space Grotesk", sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--ink);
	background: var(--paper-raised);
	border: 1px solid var(--line);
	padding: 3px 9px;
	border-radius: 5px;
}
.week-date { font-size: 12.5px; color: var(--ink); opacity: 0.85; font-weight: 500; }
.week-current { color: var(--blue); font-weight: 600; }

.item-list {
	background: var(--paper-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
}

.item-row {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 11px 14px;
	border-bottom: 1px solid var(--line);
}
.item-row:last-child { border-bottom: none; }
.item-row.done { background: var(--ok-soft); }
.item-row.requested { background: var(--warn-soft); }
.item-row.is-break { background: transparent; color: var(--ink-soft); font-style: italic; }

.item-check {
	width: 20px;
	height: 20px;
	margin-top: 2px;
	flex: none;
	accent-color: var(--green);
}

.item-body { flex: 1; min-width: 0; }
.item-code { font-size: 11.5px; font-weight: 700; color: var(--blue); margin-right: 6px; }
.item-title { font-size: 14px; }
.item-title.struck { text-decoration: line-through; color: var(--ink-soft); }

.item-tags { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.tag {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
	padding: 2px 7px;
	border-radius: 999px;
}
.tag-honors { background: var(--honors-soft); color: var(--honors); }
.tag-dba { background: var(--blue-soft); color: var(--blue); }
.tag-note { background: var(--coral-soft); color: var(--coral); }
.tag-score { background: var(--ok-soft); color: var(--ok); }

.item-date-input {
	width: 96px;
	font-size: 12px;
	padding: 4px 6px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--paper);
	color: var(--ink-soft);
}

.item-actions { flex: none; }
.request-btn, .approve-btn, .dismiss-btn {
	border: none;
	border-radius: 6px;
	padding: 6px 11px;
	font-size: 12px;
	font-weight: 600;
}
.request-btn { background: var(--blue-soft); color: var(--blue); }
.request-btn:hover { background: #d7e3f6; }
.request-btn:disabled { background: var(--coral-soft); color: var(--coral); cursor: default; }
.approve-btn { background: var(--green); color: #fff; margin-right: 6px; }
.dismiss-btn { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); }

/* ---------------------------------------------------------- gradebook */

.grade-badge {
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	font-size: 18px;
	background: var(--green-soft);
	color: var(--green);
	padding: 6px 14px;
	border-radius: 8px;
}

/* ---------------------------------------------------------- overview */

.overview-section { margin-bottom: 26px; }
.overview-section h2 { font-size: 15px; margin-bottom: 10px; }

.course-summary-row {
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--paper-raised);
	border: 1px solid var(--line);
	border-radius: 9px;
	padding: 12px 14px;
	margin-bottom: 8px;
	cursor: pointer;
}
.course-summary-row:hover { border-color: var(--blue); }
.course-summary-row .csr-name { flex: 1; font-weight: 600; font-size: 14px; }
.course-summary-row .csr-bar { flex: none; width: 120px; }
.course-summary-row .csr-pct { flex: none; width: 40px; text-align: right; font-size: 13px; color: var(--ink-soft); }

.upcoming-row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px solid var(--line);
	font-size: 13.5px;
}
.upcoming-row:last-child { border-bottom: none; }
.upcoming-row .u-date { color: var(--ink-soft); flex: none; width: 90px; }

.empty-note { color: var(--ink-soft); font-size: 13.5px; font-style: italic; }

.menu-btn { display: none; }

.topbar {
	position: sticky;
	top: 0;
	z-index: 30;
	background: var(--paper-raised);
}
.nav-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 11px 24px;
	background: var(--paper-raised);
	border: none;
	border-bottom: 1px solid var(--line);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--ink);
	text-align: left;
	cursor: pointer;
}
.nav-bar:hover { background: var(--paper); }
.nav-bar-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-bar-caret { color: var(--ink-soft); font-size: 13px; transition: transform 0.15s; }
.nav-bar.open .nav-bar-caret { transform: rotate(180deg); }
.nav-bar-menu, .nav-bar-menu::before, .nav-bar-menu::after {
	content: "";
	display: block;
	width: 18px;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
	position: relative;
}
.nav-bar-menu { flex: none; }
.nav-bar-menu::before { position: absolute; top: -6px; }
.nav-bar-menu::after { position: absolute; top: 6px; }


.menu-bars, .menu-bars::before, .menu-bars::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 17px;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
	transform: translateX(-50%);
}
.menu-bars { top: 50%; transform: translate(-50%, -50%); }
.menu-bars::before { top: -6px; }
.menu-bars::after { top: 6px; }

.nav-scrim {
	position: fixed;
	inset: 0;
	top: 0;
	touch-action: none;
	overscroll-behavior: contain;
	background: rgba(20, 27, 38, 0.55);   /* dims the app behind the panel */
	z-index: 40;
}
.nav-scrim[hidden] { display: none; }
.nav-drawer {
	overscroll-behavior: contain;
	position: fixed;
	top: 0;                 /* JS sets this to the bottom of the sticky topbar */
	left: 0;
	right: 0;
	max-height: 72vh;
	overflow-y: auto;
	background: var(--paper-raised);
	border-bottom: 1px solid var(--line);
	border-radius: 0 0 14px 14px;
	box-shadow: 0 14px 28px rgba(20, 27, 38, 0.22);
	z-index: 50;
	display: flex;
	flex-direction: column;
	padding-bottom: 6px;
}
.nav-drawer[hidden] { display: none; }
.drawer-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 18px;
	border-bottom: 1px solid var(--line);
	flex: none;
}
.drawer-heading { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 17px; }
.drawer-close {
	width: 40px;
	height: 40px;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--paper);
	font-size: 24px;
	line-height: 1;
	color: var(--ink-soft);
}
.drawer-list {
	flex: 1;
	overflow-y: auto;
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.nav-drawer .drawer-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	text-align: left;
	border: none;
	background: transparent;
	border-radius: 10px;
	padding: 15px 16px;
	font-size: 16px;
	font-weight: 500;
	color: var(--ink);
	top: 0;
}
.nav-drawer .drawer-item.active { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
.nav-drawer .drawer-item .tab-dot { background: var(--coral); }
.drawer-foot {
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 12px 16px 14px;
	border-top: 1px solid var(--line);
}
.drawer-role { font-size: 13px; color: var(--ink-soft); }
.drawer-logout { white-space: nowrap; }

.alert-box {
	background: var(--coral-soft);
	border: 1px solid var(--coral);
	border-left-width: 4px;
	border-radius: var(--radius);
	padding: 12px 14px;
	margin-bottom: 14px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--ink);
}
.alert-box .jump-link { background: var(--coral); color: #fff; }
.alert-box .jump-link:hover { background: #a8422e; }

/* ------------------------------------------------- pace / cross-course */

.course-head-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.csr-grade {
	margin-left: 8px;
	font-size: 12px;
	font-weight: 700;
	color: var(--green);
	background: var(--green-soft);
	padding: 2px 7px;
	border-radius: 999px;
}
.csr-pace { display: block; font-size: 12px; font-weight: 500; margin-top: 3px; }

.pace-ahead { color: var(--ok); }
.pace-behind { color: var(--warn); }
.pace-on { color: var(--blue); }
.pace-none { color: var(--ink-soft); }

.stat-card.pace-ahead .num { color: var(--ok); }
.stat-card.pace-behind .num { color: var(--warn); }
.stat-card.pace-ahead .num,
.stat-card.pace-behind .num,
.stat-card.pace-on .num,
.stat-card.pace-none .num { font-size: 17px; }

.jump-link {
	border: none;
	background: var(--blue-soft);
	color: var(--blue);
	font-size: 11px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 999px;
	margin-right: 7px;
}
.jump-link:hover { background: #d7e3f6; }

.tag-when { background: var(--paper); color: var(--ink-soft); border: 1px solid var(--line); }

/* ---------------------------------------------------- segment controls */

.segment-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 22px 0 10px;
}
.segment-head h3 { font-size: 15px; }

.start-control { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); }
.start-date-input {
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 5px 8px;
	font: inherit;
	font-size: 12.5px;
	background: var(--paper-raised);
	color: var(--ink);
}
.clear-start-btn {
	border: 1px solid var(--line);
	background: transparent;
	color: var(--ink-soft);
	border-radius: 6px;
	padding: 5px 9px;
	font-size: 12px;
}

/* ---------------------------------------------------------- contacts */

.contact-card {
	background: var(--paper-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px 18px;
	margin-bottom: 14px;
}
.contact-title { font-size: 15px; margin-bottom: 12px; }

.contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px 18px;
}
.contact-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.contact-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.contact-value { font-size: 13.5px; overflow-wrap: anywhere; word-break: break-word; min-width: 0; }
.config-input {
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 7px 9px;
	font: inherit;
	font-size: 13.5px;
	background: var(--paper);
	color: var(--ink);
	width: 100%;
	max-width: 100%;
	min-width: 0;
}
.config-input:focus { outline: 2px solid var(--blue); outline-offset: 1px; background: var(--paper-raised); }

@media (max-width: 860px) {
	.app-header { gap: 12px; }
	.brand h1 { font-size: 16px; }
	.role-line { display: none; }         /* role now lives in the drawer footer */
	#logout-btn { display: none; }        /* logout now lives in the drawer footer */
	.content { padding-top: 18px; }
}

@media (max-width: 560px) {
	.app-header { padding: 12px 14px; }
	.content { padding: 16px 14px 90px; }
	.course-title { font-size: 20px; }
	.item-row { flex-wrap: wrap; padding: 14px 4px; }
	.item-check { width: 22px; height: 22px; }
	.item-title { font-size: 15px; }
	.item-actions { width: 100%; padding-left: 34px; margin-top: 8px; }
	.request-btn, .approve-btn, .dismiss-btn { padding: 9px 14px; font-size: 13px; }
	.contact-grid { grid-template-columns: 1fr; }
	.segment-head { align-items: flex-start; }
	.stat-row { gap: 8px; }
	.stat-card { flex: 1 1 calc(50% - 4px); padding: 12px 14px; }
	.stat-card .num { font-size: 20px; }
	.stat-card.pace-ahead .num, .stat-card.pace-behind .num,
	.stat-card.pace-on .num, .stat-card.pace-none .num { font-size: 15px; }
	.course-summary-row { flex-wrap: wrap; }
	.course-summary-row .csr-bar { width: 100%; order: 3; margin-top: 6px; }
	.course-summary-row .csr-pct { width: auto; }
}


.sync-line { font-size: 12.5px; color: var(--green); margin: -6px 0 14px; font-weight: 600; }

.status-dot {
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 2px solid var(--line);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: transparent;
	margin-top: 1px;
}
.status-dot.is-done { background: var(--ok); border-color: var(--ok); color: #fff; }
.item-row.is-readonly { cursor: default; }

.contact-value a { overflow-wrap: anywhere; }

/* ---------------------------------------------------------- inbox */
.inbox-row .inbox-meta { font-size: 12px; color: var(--ink-soft); margin-top: 3px; }
.inbox-row .inbox-preview { font-size: 13px; color: var(--ink-soft); margin-top: 5px; overflow-wrap: anywhere; }
.status-dot.is-unread { background: var(--coral); border-color: var(--coral); }
.inbox-act {
	border: none;
	background: var(--blue-soft);
	color: var(--blue);
	border-radius: 7px;
	padding: 7px 11px;
	font-size: 12.5px;
	font-weight: 600;
	margin-left: 6px;
}
.inbox-act.ghost { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); }
.inbox-act.danger { background: var(--coral-soft); color: var(--coral); }
.inbox-act:disabled { opacity: 0.5; }
.inbox-open { margin-left: 6px; font-size: 12.5px; font-weight: 600; }

/* iOS Safari auto-zooms (and then lets you pan the page sideways) when a
   focused input's font-size is under 16px. Keep every input at 16px to stop
   that — this is what caused the login field to shift the screen on phones. */
#login-password, .config-input, .item-date-input, .start-date-input,
input, select, textarea { font-size: 16px; }

/* iOS renders <input type=date> at a large fixed intrinsic width that won't
   shrink; on a phone it overflowed, forcing iOS to widen the whole layout
   (which knocked out the narrow-screen rules and pushed content off-screen).
   Cap every input to its container and let them shrink. */
input, select, textarea { max-width: 100%; min-width: 0; box-sizing: border-box; }
.start-control { flex-wrap: wrap; max-width: 100%; }
.start-date-input { max-width: 100%; min-width: 0; width: auto; }
.item-date-input { width: 76px; max-width: 100%; }
.item-actions { max-width: 100%; }

/* inbox scope chips */
.inbox-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px; }
.inbox-chip {
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--ink-soft);
	border-radius: 999px;
	padding: 7px 13px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}
.inbox-chip.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.inbox-chip.active .tab-dot { background: #fff; color: var(--blue); }
.inbox-email-input { display: block; width: 100%; margin-top: 8px; }

/* -------- dark theme tokens (toggle wins; else follow system) -------- */
/* the note-box has hard-coded light blues; make it token-based so it themes */

/* theme toggle in the menu footer */
.theme-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.theme-btn { border: none; background: transparent; color: var(--ink-soft); padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.theme-btn.active { background: var(--blue); color: #fff; }


/* dial/mail links inside meta lines shouldn't look like body text */
.course-meta a[href^="tel:"], .contact-value a[href^="tel:"] { font-weight: 600; }

.item-score-input {
	width: 84px;
	max-width: 100%;
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 6px 8px;
	background: var(--paper);
	color: var(--ink);
	text-align: center;
}

input::placeholder, textarea::placeholder { color: var(--ink-soft); opacity: 1; }
.item-score-input, .item-date-input, .start-date-input, .config-input { color: var(--ink); background: var(--paper); }

.tag-waiting { background: var(--honors-soft); color: var(--honors); }
.grade-calc { background: var(--blue-soft); color: var(--blue); font-size: 15px; }

/* ---------------------------------------------------- roomier desktop --- */
@media (min-width: 861px) {
	.content { max-width: 1180px; padding: 30px 34px 90px; }
	.app-header { padding: 20px 34px; }
	.nav-bar { padding: 13px 34px; font-size: 16px; }
	.course-title { font-size: 28px; }
	.course-provider, .course-meta { font-size: 14.5px; }
	.item-title { font-size: 16px; }
	.item-code { font-size: 13px; }
	.item-row { padding: 15px 6px; }
	.tag { font-size: 12px; }
	.stat-card { padding: 18px 20px; }
	.stat-card .num { font-size: 30px; }
	.stat-card .label { font-size: 13.5px; }
	.overview-section h2 { font-size: 18px; }
	.week-tag { font-size: 12.5px; }
	.week-date { font-size: 14px; }
	.note-box, .alert-box { font-size: 14px; }
	.grade-badge { font-size: 21px; padding: 8px 16px; }
	.contact-value, .config-input { font-size: 15px; }
	.csr-name { font-size: 15.5px; }
}

/* ------------------------------------------------------------ themes ----
   Each theme only redefines the token palette; every component reads from
   these, so nothing else needs to know a theme exists. */

/* Sunset — warm, soft, friendly */

/* Forest — calm, low-glare, easy on long reading */

/* Midnight — deep navy dark theme, softer than pure dark */
.theme-toggle { flex-wrap: wrap; }
.theme-btn { padding: 6px 10px; font-size: 12px; }
.tag-points { background: var(--paper); color: var(--ink-soft); border: 1px solid var(--line); }

/* ---------------------------------------------------------------- themes
   Two independent axes: a palette (data-palette) and a mode
   (data-mode). Every component reads only these tokens, so any
   palette works in both light and dark without further changes.
   With no data-mode set, the OS preference decides. */
:root {
	--paper: #F7F5EF;
	--paper-raised: #FFFFFF;
	--ink: #202B3A;
	--ink-soft: #5B6675;
	--line: #DEDACB;
	--blue: #2E5EAA;
	--blue-soft: #E7EEF9;
	--green: #35815F;
	--green-soft: #E4F1EA;
	--coral: #C05038;
	--coral-soft: #FBE9E4;
	--honors: #7A5AA6;
	--honors-soft: #EFE8F7;
}
:root[data-mode="dark"] {
	--paper: #14181E;
	--paper-raised: #1E242C;
	--ink: #E7EBF0;
	--ink-soft: #98A2AF;
	--line: #2C333D;
	--blue: #6E9BE6;
	--blue-soft: #22303F;
	--green: #63B491;
	--green-soft: #1B2C25;
	--coral: #E48468;
	--coral-soft: #33231F;
	--honors: #AC92D4;
	--honors-soft: #2A2438;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-mode="light"]) {
		--paper: #14181E;
		--paper-raised: #1E242C;
		--ink: #E7EBF0;
		--ink-soft: #98A2AF;
		--line: #2C333D;
		--blue: #6E9BE6;
		--blue-soft: #22303F;
		--green: #63B491;
		--green-soft: #1B2C25;
		--coral: #E48468;
		--coral-soft: #33231F;
		--honors: #AC92D4;
		--honors-soft: #2A2438;
	}
}
:root[data-palette="sunset"] {
	--paper: #FFF6F0;
	--paper-raised: #FFFFFF;
	--ink: #3A2A2E;
	--ink-soft: #7D5C62;
	--line: #F0D8CC;
	--blue: #B8452F;
	--blue-soft: #FDE9E1;
	--green: #2F8F73;
	--green-soft: #DCF1EA;
	--coral: #C0392B;
	--coral-soft: #FBE2DE;
	--honors: #9B5DA5;
	--honors-soft: #F5E6F7;
}
:root[data-palette="sunset"][data-mode="dark"] {
	--paper: #1F1416;
	--paper-raised: #2C1E21;
	--ink: #F6E7E2;
	--ink-soft: #C3A099;
	--line: #43302F;
	--blue: #F08A6B;
	--blue-soft: #3A2320;
	--green: #63B49A;
	--green-soft: #17302A;
	--coral: #F0836B;
	--coral-soft: #3A2028;
	--honors: #C79AD4;
	--honors-soft: #33223A;
}
@media (prefers-color-scheme: dark) {
	:root[data-palette="sunset"]:not([data-mode="light"]) {
		--paper: #1F1416;
		--paper-raised: #2C1E21;
		--ink: #F6E7E2;
		--ink-soft: #C3A099;
		--line: #43302F;
		--blue: #F08A6B;
		--blue-soft: #3A2320;
		--green: #63B49A;
		--green-soft: #17302A;
		--coral: #F0836B;
		--coral-soft: #3A2028;
		--honors: #C79AD4;
		--honors-soft: #33223A;
	}
}
:root[data-palette="forest"] {
	--paper: #F2F6F1;
	--paper-raised: #FFFFFF;
	--ink: #1E2E24;
	--ink-soft: #5A6E60;
	--line: #D3E0D3;
	--blue: #2F6B4F;
	--blue-soft: #DEEDE3;
	--green: #3B7D3B;
	--green-soft: #E1F0DE;
	--coral: #B5533B;
	--coral-soft: #F9E4DD;
	--honors: #6B5AA6;
	--honors-soft: #E8E5F6;
}
:root[data-palette="forest"][data-mode="dark"] {
	--paper: #111A15;
	--paper-raised: #1A2620;
	--ink: #E4EFE6;
	--ink-soft: #93A89A;
	--line: #27362C;
	--blue: #63B98D;
	--blue-soft: #182E24;
	--green: #6FBE6F;
	--green-soft: #1A2E1C;
	--coral: #DE8163;
	--coral-soft: #33231D;
	--honors: #9C8BD6;
	--honors-soft: #262042;
}
@media (prefers-color-scheme: dark) {
	:root[data-palette="forest"]:not([data-mode="light"]) {
		--paper: #111A15;
		--paper-raised: #1A2620;
		--ink: #E4EFE6;
		--ink-soft: #93A89A;
		--line: #27362C;
		--blue: #63B98D;
		--blue-soft: #182E24;
		--green: #6FBE6F;
		--green-soft: #1A2E1C;
		--coral: #DE8163;
		--coral-soft: #33231D;
		--honors: #9C8BD6;
		--honors-soft: #262042;
	}
}
:root[data-palette="purple"] {
	--paper: #F8F5FD;
	--paper-raised: #FFFFFF;
	--ink: #271F3A;
	--ink-soft: #6B6183;
	--line: #E2DAF2;
	--blue: #6B46C1;
	--blue-soft: #EDE5FB;
	--green: #2F8F73;
	--green-soft: #DCF1EA;
	--coral: #C0398A;
	--coral-soft: #FBE0F0;
	--honors: #8B5CF6;
	--honors-soft: #EFE7FE;
}
:root[data-palette="purple"][data-mode="dark"] {
	--paper: #16121F;
	--paper-raised: #211A30;
	--ink: #EDE7F8;
	--ink-soft: #A398BE;
	--line: #332948;
	--blue: #A98BFA;
	--blue-soft: #2A2140;
	--green: #5FC4A0;
	--green-soft: #17352E;
	--coral: #EE7BBE;
	--coral-soft: #33203A;
	--honors: #C4A6FF;
	--honors-soft: #2E2450;
}
@media (prefers-color-scheme: dark) {
	:root[data-palette="purple"]:not([data-mode="light"]) {
		--paper: #16121F;
		--paper-raised: #211A30;
		--ink: #EDE7F8;
		--ink-soft: #A398BE;
		--line: #332948;
		--blue: #A98BFA;
		--blue-soft: #2A2140;
		--green: #5FC4A0;
		--green-soft: #17352E;
		--coral: #EE7BBE;
		--coral-soft: #33203A;
		--honors: #C4A6FF;
		--honors-soft: #2E2450;
	}
}
:root[data-palette="pink"] {
	--paper: #FFF5F8;
	--paper-raised: #FFFFFF;
	--ink: #3A1F2B;
	--ink-soft: #8A6673;
	--line: #F6D8E2;
	--blue: #C2185B;
	--blue-soft: #FCE4EC;
	--green: #2F8F73;
	--green-soft: #DCF1EA;
	--coral: #D14343;
	--coral-soft: #FBE2E2;
	--honors: #8B5CF6;
	--honors-soft: #EFE7FE;
}
:root[data-palette="pink"][data-mode="dark"] {
	--paper: #1D1218;
	--paper-raised: #2A1B23;
	--ink: #F8E6ED;
	--ink-soft: #C398AA;
	--line: #402A34;
	--blue: #F473A8;
	--blue-soft: #3A2029;
	--green: #63B49A;
	--green-soft: #17302A;
	--coral: #F0836B;
	--coral-soft: #3A2028;
	--honors: #C4A6FF;
	--honors-soft: #2E2450;
}
@media (prefers-color-scheme: dark) {
	:root[data-palette="pink"]:not([data-mode="light"]) {
		--paper: #1D1218;
		--paper-raised: #2A1B23;
		--ink: #F8E6ED;
		--ink-soft: #C398AA;
		--line: #402A34;
		--blue: #F473A8;
		--blue-soft: #3A2029;
		--green: #63B49A;
		--green-soft: #17302A;
		--coral: #F0836B;
		--coral-soft: #3A2028;
		--honors: #C4A6FF;
		--honors-soft: #2E2450;
	}
}

/* palette swatches in the menu footer */
.palette-row { margin-left: 6px; }
.palette-btn { border: none; background: transparent; padding: 4px; border-radius: 999px; line-height: 0; }
.palette-btn.active { outline: 2px solid var(--blue); outline-offset: -1px; }
.swatch {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba(128, 128, 128, 0.35);
}
.sw-default { background: conic-gradient(from 225deg, #2E5EAA 0 50%, #F7F5EF 0 100%); }
.sw-sunset { background: conic-gradient(from 225deg, #B8452F 0 50%, #FFF6F0 0 100%); }
.sw-forest { background: conic-gradient(from 225deg, #2F6B4F 0 50%, #F2F6F1 0 100%); }
.sw-purple { background: conic-gradient(from 225deg, #6B46C1 0 50%, #F8F5FD 0 100%); }
.sw-pink { background: conic-gradient(from 225deg, #C2185B 0 50%, #FFF5F8 0 100%); }
.tag-book { background: var(--honors-soft); color: var(--honors); }

/* ------------------------------------------------- collapsible sections */

.section-head {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	background: none;
	border: none;
	padding: 4px 0;
	margin-bottom: 8px;
	text-align: left;
	color: inherit;
}
.section-head h2 { font-size: 15px; margin: 0; }
.section-caret {
	color: var(--ink-soft);
	font-size: 16px;
	line-height: 1;
	transition: transform 0.15s;
	transform: rotate(90deg);
}
.overview-section.is-collapsed .section-caret { transform: rotate(0deg); }
.overview-section.is-collapsed .section-body { display: none; }

/* ------------------------------------------------------- overview rows */

.course-summary-row { display: block; padding: 12px 14px; }
.csr-main { display: block; width: 100%; }
.csr-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.csr-top .csr-name { flex: 1; font-weight: 600; font-size: 14.5px; min-width: 0; }
.csr-top .csr-pct { flex: none; font-size: 12.5px; color: var(--ink-soft); width: auto; text-align: right; }
.course-summary-row .csr-bar { width: 100%; margin-top: 9px; }
.progress-track.slim { height: 4px; }

.csr-grade {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ok);
	background: var(--ok-soft);
	padding: 2px 8px;
	border-radius: 999px;
	margin-left: 0;
}
.csr-pace { display: inline; font-size: 12px; }

/* -------------------------------------------------------------- portals */

.portal-row { display: flex; flex-wrap: wrap; gap: 8px; }
.portal-link {
	display: inline-block;
	padding: 9px 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--paper-raised);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
}
.portal-link:hover { border-color: var(--blue); }

.alert-date { font-weight: 700; }

/* --------------------------------------------------------------- footer */

.app-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 24px 30px;
	border-top: 1px solid var(--line);
	font-size: 12.5px;
	color: var(--ink-soft);
	max-width: 1180px;
	margin: 0 auto;
}
.footer-version { letter-spacing: 0.02em; }

/* ------------------------------------------------------- changelog page */

.log-page { max-width: 760px; margin: 0 auto; padding: 40px 22px 80px; }
.log-head { margin-bottom: 28px; }
.log-head h1 { font-size: 30px; margin-bottom: 6px; }
.log-head p { color: var(--ink-soft); margin: 0; font-size: 14.5px; }
.log-entry {
	background: var(--paper-raised);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 18px 22px;
	margin-bottom: 16px;
}
.log-version {
	font-family: "Space Grotesk", sans-serif;
	font-weight: 700;
	font-size: 17px;
	margin-bottom: 10px;
}
.log-date { font-family: "Inter", sans-serif; font-weight: 500; font-size: 13px; color: var(--ink-soft); margin-left: 8px; }
.log-entry ul { margin: 0; padding-left: 20px; }
.log-entry li { font-size: 14.5px; line-height: 1.65; margin-bottom: 5px; }
.log-back { margin-top: 24px; font-size: 14px; }

/* ------------------------------------------------ status colour per theme
   Done / behind / ahead have to read as status, not decoration. On the
   forest and pink palettes the accent sits close to one of them, so those
   get shifted hues; dark modes get lighter, more saturated versions so they
   stay visible against the darker surfaces. */

:root[data-palette="forest"] { --ok: #1F6F3F; --ok-soft: #DDEFE0; --warn: #B23A18; --warn-soft: #FBE3DA; }
:root[data-palette="pink"]   { --ok: #1B6B4F; --ok-soft: #DCF0E8; --warn: #9C2727; --warn-soft: #FBE1E1; }
:root[data-palette="purple"] { --ok: #1B6B4F; --ok-soft: #DCF0E8; --warn: #A83512; --warn-soft: #FCE8DF; }
:root[data-palette="sunset"] { --ok: #1B6B4F; --ok-soft: #DCF0E8; --warn: #96291F; --warn-soft: #F9DED8; }

:root[data-mode="dark"]                    { --ok: #5FD09B; --ok-soft: #14322A; --warn: #FF9A6E; --warn-soft: #3A2119; }
:root[data-palette="forest"][data-mode="dark"] { --ok: #6EDBA0; --ok-soft: #14321F; --warn: #FF9166; --warn-soft: #3A2018; }
:root[data-palette="pink"][data-mode="dark"]   { --ok: #5FD0A8; --ok-soft: #12322A; --warn: #FF8F8F; --warn-soft: #3A1F1F; }
:root[data-palette="purple"][data-mode="dark"] { --ok: #5FD0A8; --ok-soft: #12322A; --warn: #FFA07A; --warn-soft: #3A2119; }
:root[data-palette="sunset"][data-mode="dark"] { --ok: #63D2A4; --ok-soft: #12322A; --warn: #FFB08C; --warn-soft: #3A2219; }

@media (prefers-color-scheme: dark) {
	:root:not([data-mode="light"])                    { --ok: #5FD09B; --ok-soft: #14322A; --warn: #FF9A6E; --warn-soft: #3A2119; }
	:root[data-palette="forest"]:not([data-mode="light"]) { --ok: #6EDBA0; --ok-soft: #14321F; --warn: #FF9166; --warn-soft: #3A2018; }
	:root[data-palette="pink"]:not([data-mode="light"])   { --ok: #5FD0A8; --ok-soft: #12322A; --warn: #FF8F8F; --warn-soft: #3A1F1F; }
	:root[data-palette="purple"]:not([data-mode="light"]) { --ok: #5FD0A8; --ok-soft: #12322A; --warn: #FFA07A; --warn-soft: #3A2119; }
	:root[data-palette="sunset"]:not([data-mode="light"]) { --ok: #63D2A4; --ok-soft: #12322A; --warn: #FFB08C; --warn-soft: #3A2219; }
}

.drawer-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.drawer-row-label {
	flex: none;
	width: 52px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink-soft);
}
.drawer-account { justify-content: space-between; padding-top: 4px; border-top: 1px dashed var(--line); }
.drawer-account .drawer-role { flex: 1; }
.palette-row { display: flex; gap: 4px; margin-left: 0; }
.theme-toggle { flex-wrap: nowrap; }
.theme-btn { padding: 6px 11px; }

/* The dropdown holds 11 sections plus the footer; give the list more of the
   screen on a phone and tighten the rows so it doesn't clip mid-word. */
@media (max-width: 560px) {
	.nav-drawer { max-height: 86vh; }
	.nav-drawer .drawer-item { padding: 12px 14px; font-size: 15px; }
	.drawer-list { padding: 8px 10px; }
	.drawer-foot { padding: 10px 14px 12px; }
	.drawer-row-label { width: 46px; }
}

/* --------------------------------------------------- login account picker */

.login-roles {
	display: flex;
	gap: 6px;
	margin-bottom: 14px;
}
.login-role {
	flex: 1;
	padding: 10px 8px;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--paper);
	color: var(--ink-soft);
	font-size: 13.5px;
	font-weight: 600;
}
.login-role:hover { border-color: var(--blue); }
.login-role.active {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}

/* ------------------------------------------------------------ docs page */

.doc-tabs { display: flex; gap: 6px; margin-bottom: 20px; flex-wrap: wrap; }
.doc-tab {
	padding: 9px 15px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--paper);
	color: var(--ink-soft);
	font-size: 13.5px;
	font-weight: 600;
}
.doc-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }

.log-entry h2 { font-size: 17px; margin: 0 0 10px; }
.log-entry h3 { font-size: 15px; margin: 18px 0 8px; }
.log-entry h4 { font-size: 14px; margin: 16px 0 6px; }
.log-entry p { font-size: 14.5px; line-height: 1.7; margin: 0 0 12px; }
.log-entry p:last-child { margin-bottom: 0; }
.log-entry code {
	font-size: 13px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 1px 5px;
}
.log-entry pre {
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 12px 14px;
	overflow-x: auto;
	font-size: 13px;
	line-height: 1.55;
}
.log-entry pre code { background: none; border: none; padding: 0; }

.doc-table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; font-size: 14px; }
.doc-table th, .doc-table td {
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}
.doc-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }