@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&display=swap');

/* Shared SYL page chrome. Any page that includes collections/sylNav.tpl needs this as well
   as syl/nav.css: nav.css styles the header but relies on all of it — the global reset to
   clear RC's element styles off .container and the nav links, the :root tokens it reads,
   and the .ct wrapper it lays the header out inside. Without it the header renders on RC's
   dark body in the wrong font.

   Extracted from syl/plan.css, which carried the only copy with the explanation attached;
   assignment-view.css, assignment-share.css and assignments-dash.css each hold their own.
   New pages link this instead of pasting it again. */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "montserrat";
}

body.syl.readocracy {
	background: #ffffff !important;
}

/* design.tpl wraps every logged-in hubs page in RC's .team-content — 50px of #1E202E,
   white text, min-width 1100px. The schools pages are the first SYL surface routed
   through hubs, so neutralize the shell the same way the dark body is above.

   The margin is the reason the header sat inset: team.css centres the shell with
   `margin: 0 auto !important`, so once min-width is gone it is narrower than the
   page and both auto margins resolve to something. */
body.syl.readocracy .team-content {
	background: #ffffff !important;
	padding: 0;
	min-width: 0;
	margin: 0 !important;
	width: 100%;
	color: inherit;
}

/* team.css also resets every descendant to proxima-nova. That selector is (0,1,0) and
   outranks the universal reset above, so inside a hubs page the SYL header rendered in
   RC's font — restated here at a weight that wins. Icon elements are exempt: this rule
   would otherwise beat .material-icons-round and render its ligatures as plain text. */
body.syl.readocracy .team-content *:not([class*="material-icons"]) {
	font-family: "montserrat";
}

:root {
	--muted: #6b6b6b;
	--line: #e7e7e7;
	--bg: #ffffff;
	--dark: rgba(30, 30, 30, 1);
	--dark-2: #1f1f1f;
	--cta: rgba(187, 255, 179, 1);
	--cta-2: #aaf39f;
	--cta-3: #96e58a;
	--spacing-lg: 40px;
	--spacing-md: 20px;
	--spacing-sm: 10px;
	--font-size-lg: 24px;
	--font-size-md: 16px;
	--grey: #727272;
}

.ct {
	color: #000;
	background: var(--bg);
	width: 100%;
	min-height: 100vh;
	padding: 20px 20px 40px;
	display: flex;
	flex-direction: column;
}

.nav-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 100vw !important;
	gap: 20px;
}

.right {
	display: flex;
	align-items: center;
	gap: 20px;
}

.desktop-nav {
	display: inline-flex;
	align-items: center;
	gap: 20px;
}