/* Core16 advisor portal. Palette and table styling carried over from the advisor-board mockup (web/board-x7k2/). The typefaces are served from this origin (static/fonts/, each under the SIL Open Font License beside it), never from Google Fonts: a page showing minors' records shouldn't make third-party requests, and the CSP wouldn't allow one. Latin subset, variable weight; the system face shows until a file arrives. */ @font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/portal/static/fonts/bricolage-grotesque.woff2") format("woff2"); } @font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/portal/static/fonts/hanken-grotesk.woff2") format("woff2"); } @font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/portal/static/fonts/geist-mono.woff2") format("woff2"); } :root { --ink: #0E2340; --ink2: #3C5573; --ink3: #6E829B; --ice: #E6ECF3; --ice2: #F2F6FA; --surface: #FFFFFF; --rule: #CCDAE8; --rule2: #A6BED6; --blue: #0B4C86; --alarm: #A8261C; --alarmbg: #FAEAE8; --warn: #8A5A00; --warnbg: #FBF1DC; --ok: #1B6140; --okbg: #E4EFE9; --okrule: #A9CBB9; --alarmrule: #E0B3AE; --warnrule: #E3CB95; --warnstripe: #C99A2E; /* The team page's week-of-work bar, green to red (6 Nov 2026). */ --loadlow: #2E9E5B; --loadmid: #E0A526; --loadhigh: #D2392B; --infobg: #E8F0F5; --inforule: #A9C4D4; --replybg: #DAEAF7; /* Hockey on a parent's calendar. A warm orange, opposite --blue for school: dark green and then violet both sat too close to the navy to tell apart on a thin stripe (28 Sep 2026). */ --hockey: #A94A0C; --hockeybg: #FDEBDD; --onink: #FFFFFF; --onalarm: #FFFFFF; --backdrop: rgba(16, 32, 52, .45); --hero: #0E2340; --onhero: #FFFFFF; --onhero2: #C4D4E6; --herorule: #5F7C9C; --tourdim: rgba(6, 16, 30, .55); --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* Headings and big figures. */ --display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif; --radius: 16px; --radius-s: 10px; color-scheme: light; } /* Dark mode. Follows the device unless someone picks Light or Dark in the top bar, which theme.js applies as data-theme before the page paints. The token list is repeated because CSS can't share one block between a media query and an attribute selector. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #E3EBF4; --ink2: #AFC0D3; --ink3: #8497AE; --ice: #0A1420; --ice2: #16263A; --surface: #0F1C2C; --rule: #22344A; --rule2: #36506B; --blue: #7DB2E3; --alarm: #F0897E; --alarmbg: #351B1A; --warn: #E2B25E; --warnbg: #2F2513; --ok: #6FC79B; --okbg: #122C20; --okrule: #2D5E45; --alarmrule: #6B312B; --warnrule: #65501F; --warnstripe: #C99A2E; --loadlow: #4CC283; --loadmid: #E8B04A; --loadhigh: #EE5A4C; --infobg: #132A3D; --inforule: #2E5573; --replybg: #1B3A57; --hockey: #F29A5C; --hockeybg: #36210F; --onink: #0A1420; --onalarm: #1E0A08; --backdrop: rgba(0, 0, 0, .6); --hero: #16263A; --onhero: #E3EBF4; --onhero2: #AFC0D3; --herorule: #4A6585; --tourdim: rgba(0, 0, 0, .68); color-scheme: dark; } } :root[data-theme="dark"] { --ink: #E3EBF4; --ink2: #AFC0D3; --ink3: #8497AE; --ice: #0A1420; --ice2: #16263A; --surface: #0F1C2C; --rule: #22344A; --rule2: #36506B; --blue: #7DB2E3; --alarm: #F0897E; --alarmbg: #351B1A; --warn: #E2B25E; --warnbg: #2F2513; --ok: #6FC79B; --okbg: #122C20; --okrule: #2D5E45; --alarmrule: #6B312B; --warnrule: #65501F; --warnstripe: #C99A2E; --loadlow: #4CC283; --loadmid: #E8B04A; --loadhigh: #EE5A4C; --infobg: #132A3D; --inforule: #2E5573; --replybg: #1B3A57; --hockey: #F29A5C; --hockeybg: #36210F; --onink: #0A1420; --onalarm: #1E0A08; --backdrop: rgba(0, 0, 0, .6); --hero: #16263A; --onhero: #E3EBF4; --onhero2: #AFC0D3; --herorule: #4A6585; --tourdim: rgba(0, 0, 0, .68); color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--ice); color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; } .wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px 72px; } a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* top bar */ .topbar { border-bottom: 1px solid var(--rule2); background: var(--surface); } .topbar-in { max-width: 1280px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 8px 24px; min-height: 54px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 15px; } .brand svg { width: 24px; height: 24px; color: var(--ink); flex: none; } .brand span { color: var(--ink3); font-weight: 400; } nav { display: flex; gap: 2px; } nav a { color: var(--ink2); font-weight: 500; text-decoration: none; padding: 8px 12px; border-bottom: 2px solid transparent; } nav a:hover { color: var(--ink); } nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--blue); } nav .badge { display: inline-block; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: var(--alarm); color: var(--onalarm); font-size: 12px; font-weight: 600; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; vertical-align: 1px; } .me { margin-left: auto; display: flex; align-items: center; gap: 12px; color: var(--ink2); font-size: 13px; } .me form { margin: 0; } .linkbtn { font: inherit; color: var(--blue); background: none; border: none; padding: 0; cursor: pointer; } /* sign-in and enrollment */ .card { max-width: 440px; margin: 48px auto 0; padding: 24px; background: var(--surface); border: 1px solid var(--rule); } .card h1 { margin: 0 0 10px; font-size: 20px; font-weight: 600; } .card p { margin: 0 0 14px; color: var(--ink2); } .primary { font: inherit; font-weight: 600; color: var(--onink); background: var(--ink); border: none; border-radius: var(--radius-s); padding: 10px 16px; cursor: pointer; } .primary:disabled { opacity: .6; cursor: default; } .status { min-height: 1.45em; margin: 12px 0 0; } .status.error { color: var(--alarm); } .notice { padding: 9px 12px; background: var(--ice2); border: 1px solid var(--rule); color: var(--ink); } .fineprint { max-width: 440px; margin: 12px auto 0; color: var(--ink3); font-size: 12px; } /* How a student gets a sign-in code: the phone's own screens in order. Four across on a laptop, where the page is read beside the phone in their hand. */ .code-steps { max-width: 1040px; margin: 40px auto 0; scroll-margin-top: 16px; } .card p a, .code-steps a { color: var(--blue); } .code-steps h2 { font-size: 18px; margin-bottom: 14px; } .code-steps ol { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .code-steps li { counter-increment: step; } .code-steps h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15px; font-weight: 600; } .code-steps h3::before { content: counter(step); flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--onink); font-size: 13px; } .code-steps img { display: block; width: 100%; max-width: 280px; height: auto; border: 1px solid var(--rule2); border-radius: var(--radius); } .code-steps li p { margin: 10px 0 0; max-width: 280px; color: var(--ink2); } .code-steps ol + h2 { margin-top: 32px; } .code-steps dl { margin: 0; max-width: 64ch; } .code-steps dt { font-weight: 600; } .code-steps dd { margin: 2px 0 14px; color: var(--ink2); } @media (max-width: 1000px) { .code-steps ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .code-steps ol { grid-template-columns: minmax(0, 1fr); } } /* A call the advisor reading the roster is the second adult on. The only thing on that page addressed to the reader rather than to a student, so it sits above the counts in the warning palette: not an alarm, but somewhere they are expected to be. */ .duty { margin-top: 20px; padding: 12px 14px; background: var(--warnbg); border: 1px solid var(--warnrule); } .duty h2 { color: var(--warn); } .duty ul { list-style: none; margin: 9px 0 0; padding: 0; display: grid; gap: 8px; } .duty li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 13px; } .duty li b { min-width: 86px; font-weight: 600; font-variant-numeric: tabular-nums; } .duty li.now b { color: var(--warn); } .duty li a { color: var(--ink); font-weight: 600; } .duty form { margin: 0; } .duty .primary { padding: 5px 12px; font-size: 13px; } .duty > p { margin: 11px 0 0; color: var(--ink2); font-size: 12.5px; max-width: 80ch; } /* counts strip */ .counts { display: flex; flex-wrap: wrap; margin-top: 20px; border: 1px solid var(--rule); background: var(--surface); } .count { flex: 1 1 0; min-width: 132px; padding: 13px 16px; border-right: 1px solid var(--rule); } .count:last-child { border-right: none; } .count b { display: block; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; } .count small { color: var(--ink3); font-size: 12px; } .count.flagged b { color: var(--alarm); } /* sections */ .sec { margin-top: 26px; } .sechead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 9px; } h2 { font-size: 15px; font-weight: 600; margin: 0; } .sechead p { margin: 0; color: var(--ink3); font-size: 12.5px; } /* A collapsible section: the h2 (or a form's h3) sits in the summary, with a chevron that turns when open. */ .fold > summary { cursor: pointer; list-style: none; } .fold > summary::-webkit-details-marker { display: none; } .fold > summary h2::before, .fold > summary h3::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 9px 2px 1px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); transition: transform 0.15s; } .fold[open] > summary h2::before, .fold[open] > summary h3::before { transform: rotate(45deg); } .fold:not([open]) > summary.sechead { margin-bottom: 0; } .panel.fold > summary h2 { display: inline-block; margin: 0; } .panel.fold[open] > summary { margin-bottom: 3px; } .empty { padding: 16px; background: var(--surface); border: 1px solid var(--rule); color: var(--ink3); } /* the roster's search box, above its table */ .find { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 9px; } .find[hidden], .empty[hidden] { display: none; } [data-find-item][hidden], [data-find-group][hidden], [data-email-other][hidden] { display: none; } main > .find { margin-top: 16px; } /* the row the arrow keys are on, while the cursor stays in the search box */ tbody tr.picked, tbody tr.picked:hover, .gate-row.picked { background: var(--ice); box-shadow: inset 0 0 0 2px var(--blue); } .find input { flex: 0 1 340px; min-width: 0; height: 34px; box-sizing: border-box; font: inherit; color: var(--ink); padding: 7px 9px; border: 1px solid var(--rule2); border-radius: var(--radius-s); background: var(--surface); } .find .found { color: var(--ink3); font-size: 12.5px; font-variant-numeric: tabular-nums; } /* roster table */ .tablewrap { background: var(--surface); border: 1px solid var(--rule); overflow-x: auto; } table { border-collapse: collapse; width: 100%; min-width: 1020px; } th { text-align: left; font-size: 12px; font-weight: 600; color: var(--ink2); padding: 9px 12px; border-bottom: 1px solid var(--rule2); white-space: nowrap; background: var(--ice2); } th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } td { padding: 11px 12px; border-bottom: 1px solid var(--rule); vertical-align: top; } tbody tr:last-child td { border-bottom: none; } /* The row's worst chip, as a stripe down its left edge rather than a tint across it, the same marking the review queue uses. */ tbody tr.alarm td:first-child { box-shadow: inset 4px 0 var(--alarm); } tbody tr.warn td:first-child { box-shadow: inset 4px 0 var(--warnstripe); } tbody tr:hover { background: var(--ice2); } .who { font-weight: 600; } .who em { display: block; font-style: normal; font-weight: 400; color: var(--ink3); font-size: 12px; } .prov { font-family: var(--mono); font-size: 12.5px; color: var(--ink2); } .tag { font-size: 11px; font-weight: 500; color: var(--ink3); border: 1px solid var(--rule2); border-radius: var(--radius-s); padding: 0 5px; vertical-align: 1px; } .chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; } .chip { font-size: 11.5px; font-weight: 400; padding: 2px 7px; border-radius: var(--radius-s); border: 1px solid; } .chip.alarm { color: var(--alarm); border-color: var(--alarmrule); background: var(--alarmbg); } .chip.warn { color: var(--warn); border-color: var(--warnrule); background: var(--warnbg); } .chip.info { color: var(--blue); border-color: var(--inforule); background: var(--infobg); } .sechead h2 .chip { margin-left: 6px; vertical-align: 2px; } /* Roster chips come in three weights, so an alarm is found without reading: solid for an alarm, an outline for a warning, and plain text for a note. The full sentence is in the title. */ .who .chip { font-size: 12px; padding: 2px 8px; } .who .chip b { font-weight: 700; } .who .chip.alarm { color: var(--onalarm); background: var(--alarm); border-color: var(--alarm); } .who .chip.alarm::before { content: "\25CF"; font-size: 9px; margin-right: 5px; vertical-align: 1px; } .who .chip.warn { background: none; } /* Followed up: the same colour, no fill, and the date of the conversation. */ .who .chip.alarm.done { color: var(--alarm); background: var(--alarmbg); border-color: var(--alarmrule); } .who .tick { font-weight: 600; color: var(--ok); margin-left: 2px; } /* Flagged, not yet followed up: still a solid alarm, with the step taken. */ .who .flag { opacity: 0.85; margin-left: 2px; } .who .notes { margin-top: 5px; font-size: 12px; font-weight: 400; color: var(--ink3); } .who .notes .chip { all: unset; } .who .notes .chip b { font-weight: 600; } .who .notes .chip + .chip::before { content: " \00B7 "; } /* A course near the next grade band: a chance to lift the GPA, not a problem. */ .lift { color: var(--blue); font-size: 11px; margin-left: 3px; border-bottom: 1px dotted var(--inforule); } .bad { color: var(--alarm); font-weight: 600; } .sub { font-size: 12.5px; } /* The app build a check-in reported, beside the date on the student file. */ .build { font-family: var(--mono); font-size: 11.5px; color: var(--ink3); } .dash { color: var(--rule2); } abbr { text-decoration: none; } /* Anything that explains itself: portal.js moves its title into data-tip and shows it in the bubble below on a click, so it gets the pointing hand. The second selector outweighs the notes' `all: unset`. */ [data-tip], .who .notes [data-tip] { cursor: pointer; } [data-tip]:focus-visible, .who .notes [data-tip]:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .tip { position: absolute; z-index: 20; max-width: min(340px, calc(100vw - 16px)); padding: 7px 10px; border-radius: var(--radius-s); background: var(--ink); color: var(--onink); font-size: 12.5px; font-weight: 400; line-height: 1.4; white-space: pre-line; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); pointer-events: none; } footer { margin-top: 30px; color: var(--ink3); font-size: 12px; max-width: 70ch; } .who a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule2); } .who a:hover { border-bottom-color: var(--ink); } code { font-family: var(--mono); font-size: 12.5px; } .quiet { margin: 0; color: var(--ink3); } /* student file */ .back { display: inline-flex; align-items: center; gap: 8px; margin: 20px 0 4px; padding: 8px 14px 8px 11px; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; background: var(--surface); border: 1px solid var(--rule2); border-radius: var(--radius-s); } .back:hover { border-color: var(--blue); color: var(--blue); } .back span { font-size: 16px; line-height: 1; } .file { background: var(--surface); border: 1px solid var(--rule); margin-top: 10px; } .filehead { padding: 18px 20px; border-bottom: 1px solid var(--rule2); } .filehead h1 { margin: 0; font-size: 24px; font-weight: 600; } .meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 12px 0 0; font-size: 13px; } .meta dt { color: var(--ink3); font-size: 11.5px; } .meta dd { margin: 0; font-weight: 500; } .panel { padding: 18px 20px; border-bottom: 1px solid var(--rule); } .panel:last-child { border-bottom: none; } .panel h2 { margin: 0 0 3px; font-size: 14px; } .note { margin: 0 0 12px; color: var(--ink3); font-size: 12.5px; max-width: 80ch; } .verdict { padding: 13px 15px; border: 1px solid var(--okrule); border-radius: var(--radius-s); background: var(--okbg); } .verdict b { font-size: 15px; color: var(--ok); } .verdict.alarm { border-color: var(--alarmrule); background: var(--alarmbg); } .verdict.alarm b { color: var(--alarm); } .verdict.warn { border-color: var(--warnrule); background: var(--warnbg); } .verdict.warn b { color: var(--warn); } .verdict p { margin: 10px 0 0; color: var(--ink2); font-size: 12.5px; } /* One entry per issue: the sentence, its why, the courses behind it (each with where it stands and what to do), then "Next". The same shape whether it's the headline or a reason under it, so the eye learns it once. */ .verdict .why, .file-notes .why { display: block; margin-top: 3px; color: var(--ink2); font-size: 12.5px; } .verdict > .why { color: var(--ink); font-size: 13.5px; } .verdict ul.issues { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; } .verdict .issues > li { padding: 8px 0 0; border-top: 1px solid rgba(0, 0, 0, .08); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .verdict .issues > li { border-top-color: rgba(255, 255, 255, .1); } } :root[data-theme="dark"] .verdict .issues > li { border-top-color: rgba(255, 255, 255, .1); } .verdict .issue-text { font-weight: 600; } .verdict .alarm > .issue-text { color: var(--alarm); } .verdict .warn > .issue-text { color: var(--warn); } /* The ⓘ: why, and what to do, in portal.js's bubble on a click. */ .ask-why { display: inline-block; width: 16px; height: 16px; border-radius: 50%; margin-left: 2px; border: 1px solid currentColor; color: var(--blue); font: 600 11px/14px var(--sans); text-align: center; vertical-align: 1px; cursor: pointer; user-select: none; } .ask-why:hover { background: var(--blue); color: var(--surface); } .verdict a.where, .file-notes a.where { color: var(--blue); font-size: 12.5px; margin-left: 6px; } /* The courses behind an issue, one box each, in the box's own tint. */ .verdict ul.raised, .file-notes ul.raised { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 6px; } .verdict .raised li { display: grid; gap: 4px; padding: 8px 12px; border: 1px solid rgba(0, 0, 0, .1); border-radius: var(--radius-s); background: rgba(255, 255, 255, .45); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .verdict .raised li { border-color: rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .18); } } :root[data-theme="dark"] .verdict .raised li { border-color: rgba(255, 255, 255, .12); background: rgba(0, 0, 0, .18); } .verdict .raised-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; } .verdict .raised-head strong { font-weight: 600; color: var(--ink); } .verdict .raised-head .meta { color: var(--ink3); font-size: 12px; } .verdict .raised .why { margin-top: 0; } .verdict .raised .route { display: block; color: var(--ink); font-size: 13px; max-width: 80ch; } .verdict .raised .do { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 4px 0 0; } .verdict .raised .do a, .verdict .raised .do button { display: inline-block; padding: 6px 12px; font-size: 13px; text-decoration: none; } .verdict .raised .do a:hover, .verdict .raised .do button:hover { border-color: var(--blue); color: var(--blue); } .verdict .raised .by { color: var(--ink2); font-size: 12.5px; } .verdict .raised .by q { quotes: "“" "”"; } .verdict .raised .by.done { color: var(--ok); font-weight: 600; } .file-notes { margin: 10px 0 0; padding-left: 18px; color: var(--ink2); font-size: 13px; } .file-notes li { margin: 2px 0; } .contact-form label.check .by { color: var(--ink3); font-size: 12px; font-weight: 400; } .figures { display: flex; flex-wrap: wrap; gap: 12px 36px; margin: 14px 0 0; } .figures dt { color: var(--ink3); font-size: 12px; } .figures dd { margin: 0; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; } /* Shared by the Core courses and 10/7 panels: the big figure, the key, and the bars the 10/7 gate still uses. */ .req-total { display: flex; align-items: flex-end; gap: 12px; margin: 4px 0 12px; } .req-total b { font-size: 44px; line-height: .9; font-weight: 700; font-variant-numeric: tabular-nums; } .req-total p { margin: 0; color: var(--ink2); font-size: 13.5px; } .pace-row, .clock-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 640px; margin: 0 0 14px; font-size: 14px; } .pace-row abbr { border-bottom: 1px dotted var(--ink3); } .pace-row .by, .clock-row .by { color: var(--ink3); } .pace-row .chip { flex: none; font-size: 12.5px; font-weight: 600; padding: 3px 9px; } .req-key { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 10px; padding: 0; color: var(--ink2); font-size: 12.5px; } .req-key li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: var(--radius-s); vertical-align: -1px; } .req-key .completed::before { background: var(--ink); } .req-key .in-progress::before { background: var(--warnstripe); } .req-key .planned::before { background: var(--rule2); } .req-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 640px; } .req-bars li { display: grid; grid-template-columns: minmax(96px, 13em) 1fr 3.5em; align-items: center; gap: 12px; font-size: 14px; } .req-bars svg { display: block; width: 100%; height: 12px; border-radius: 6px; overflow: hidden; } .req-bars .req-count { font-family: var(--mono); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; } .req-bars .met .req-count { color: var(--ok); } .req-bars .track { fill: var(--ice); } .req-bars .completed { fill: var(--ink); } .req-bars .in-progress { fill: var(--warnstripe); } .req-bars .planned { fill: var(--rule2); } .req-bars + .note { margin-top: 14px; } /* Core courses: the app's slot grid, one box per required course. The boxes are what the 16 actually is, a count; the 10/7 panel above keeps a bar, because a gate is a pace. --warnbg/--ice fills with a --warnstripe/--rule2 edge stand in for the app's tinted fills, which are one colour at low opacity. */ .core-slots { list-style: none; margin: 0; padding: 0; max-width: 560px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; } .core-slots li { display: grid; gap: 6px; justify-items: start; } .core-slots .slot-head { display: flex; align-items: baseline; gap: 6px; color: var(--ink2); font-size: 13.5px; } .core-slots .req-count { font-family: var(--mono); font-size: 12.5px; font-variant-numeric: tabular-nums; } .core-slots .met .req-count { color: var(--ok); } .core-slots svg { display: block; height: 30px; width: auto; max-width: 100%; } .core-slots .completed { fill: var(--ink); } .core-slots .in-progress { fill: var(--warnbg); } .core-slots .planned { fill: var(--ice); } .core-slots .edge { fill: none; stroke-width: 1.5; } .core-slots .edge.done { stroke: var(--ink); } .core-slots .edge.now { stroke: var(--warnstripe); } .core-slots .edge.later, .core-slots .edge.empty { stroke: var(--rule2); } .core-slots .edge.empty { stroke-dasharray: 4 3; } .core-slots .hit { fill: transparent; pointer-events: all; cursor: help; } .core-slots .tick { fill: none; stroke: var(--onink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .core-slots + .note { margin-top: 14px; } /* The 10/7 panel: what's missing, in the colour of the flag it explains. */ .req-key .missing.alarm::before { background: var(--alarm); } .req-key .missing.warn::before { background: var(--warn); } .gate-bars .missing { fill: var(--alarm); } .gate-bars .warn .missing { fill: var(--warn); } .gate-bars .pace { fill: var(--ink2); } .gate-bars .alarm .req-count { color: var(--alarm); } .gate-bars .warn .req-count { color: var(--warn); } .gate-short { margin: 12px 0 0; font-weight: 600; } .gate-short.alarm { color: var(--alarm); } .gate-short.warn { color: var(--warn); } #ten-seven h2 abbr { border-bottom: 1px dotted var(--ink3); } /* The one shortened label: dotted, so it reads as something to click. */ .req-label abbr { border-bottom: 1px dotted var(--ink3); } @media (max-width: 520px) { .req-bars li { grid-template-columns: 1fr 3.5em; gap: 4px 12px; } .req-bars .req-label { grid-column: 1 / -1; } .core-slots { grid-template-columns: minmax(0, 1fr); } } /* The Core GPA panel, after the app's GPA tab. */ .gpa-head { display: flex; align-items: flex-end; gap: 12px; margin: 4px 0 12px; max-width: 480px; } .gpa-head b { font-size: 44px; line-height: .9; font-weight: 700; font-variant-numeric: tabular-nums; } .gpa-head p { margin: 0; color: var(--ink2); font-size: 13.5px; } .gpa-head .chip { margin-left: auto; align-self: center; font-size: 12.5px; font-weight: 600; padding: 3px 9px; } .chip.ok { color: var(--ok); border-color: var(--okrule); background: var(--okbg); } .gpa-scale { display: block; width: 100%; max-width: 480px; height: auto; margin-bottom: 12px; } .gpa-scale .track { fill: var(--ice); } .gpa-scale .fill { fill: var(--ink); } .gpa-scale .minimum { fill: var(--warnstripe); } .gpa-scale text { fill: var(--ink3); font-family: var(--mono); font-size: 9px; text-anchor: middle; } .cliffs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .cliff { border: 1px solid var(--inforule); background: var(--infobg); border-radius: var(--radius-s); padding: 11px 14px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; } .cliff .jump { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; } .cliff .jump s { text-decoration: none; color: var(--ink3); font-weight: 400; } .cliff p { margin: 0; font-size: 13px; } .tablewrap.inner { border: none; } table.courses { min-width: 680px; } tr.nocount td { color: var(--ink3); } /* A stronger rule where the grade changes, so each grade reads as a group. */ table.courses tr.newgrade td { border-top: 2px solid var(--rule2); } td.match { font-size: 12px; font-weight: 600; } td.match.approved { color: var(--ok); } td.match.excluded, td.match.unrecognized { color: var(--alarm); } td.match .why { display: block; font-weight: 400; color: var(--ink3); } /* A course the file raises reads at full strength, not greyed like a gym course. */ tr.flagged td.match .why { color: var(--warn); font-weight: 600; } /* A course behind one of the file's chips, tinted in that chip's colour with the stripe the roster uses, so the chip and its course read as one. Its text is at full strength even when it won't count: it's the course being raised. */ table.courses tr.alert-alarm, table.courses tr.alert-alarm:hover { background: var(--alarmbg); } table.courses tr.alert-warn, table.courses tr.alert-warn:hover { background: var(--warnbg); } table.courses tr.alert-info, table.courses tr.alert-info:hover { background: var(--infobg); } table.courses tr.alert-alarm td:first-child { box-shadow: inset 4px 0 var(--alarm); } table.courses tr.alert-warn td:first-child { box-shadow: inset 4px 0 var(--warnstripe); } table.courses tr.alert-info td:first-child { box-shadow: inset 4px 0 var(--inforule); } table.courses tr[class*="alert-"] td { color: var(--ink); } table.courses tr.alert-alarm td.match { color: var(--alarm); } table.courses tr.alert-warn td.match { color: var(--warn); } table.courses tr.alert-info td.match { color: var(--blue); } /* Its title explains the chip on a click, as the roster's chips do. */ table.courses abbr.course-why { border-bottom: 1px dotted currentColor; } /* A flag with a rule behind it (the 10/7 gate) explains the rule on a click. */ .verdict abbr.rule { border-bottom: 1px dotted currentColor; } .time { list-style: none; margin: 0; padding: 0; } .time li { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--ice); } .time li:last-child { border-bottom: none; } .time time { color: var(--ink3); font-size: 12px; font-variant-numeric: tabular-nums; } .time p { margin: 0 0 2px; } .time p.alarm { color: var(--alarm); font-weight: 600; } .time p.warn { color: var(--warn); } .log .said-with { font-weight: 600; } .log .said { margin: 3px 0; white-space: pre-line; max-width: 70ch; } .log .by { color: var(--ink3); font-size: 12px; } .log .corrected { color: var(--warn); font-size: 12px; font-weight: 600; margin-left: 6px; } .log-asked { margin: 3px 0; max-width: 70ch; } .log-asked > summary { color: var(--blue); cursor: pointer; } .log-asked[open] { margin-bottom: 8px; } .log-asked[open] > summary { margin-bottom: 4px; } /* What Ask Core16 said, in the box the family saw it in (.bubble.ask), which also keeps it from reading as the start of the reply under it. */ .said-box { margin: 3px 0; padding: 8px 10px; max-width: 70ch; background: var(--ice2); border-radius: var(--radius-s); } .said-box p { margin: 0; } .said-box .by { margin-bottom: 2px; color: var(--ink2); font-size: 12px; font-weight: 600; } .said-box .said { white-space: pre-line; } /* Above the latest entries now that the log reads oldest first. */ .log-older { margin-bottom: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--ice); } .log-older[open] > summary { margin-bottom: 10px; } .log-older > summary { color: var(--blue); cursor: pointer; font-size: 13px; } .log-older:not([open]) .when-open, .log-older[open] .when-closed { display: none; } /* minmax(0, 1fr) and min-width: 0 keep the form to its panel's width. Left to size themselves, the form and its labels grow to their widest content: a select's longest option ("Corrects an earlier entry" names a date, channel and person) or a fieldset's, which ran the whole form past the file's narrow side column between 1240px and a wide window. */ .contact-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; max-width: 720px; } .contact-form h3 { margin: 0; font-size: 13.5px; } .fields { display: flex; flex-wrap: wrap; gap: 12px; } .fields .grow { flex: 1 1 200px; } .contact-form label { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; align-content: start; min-width: 0; font-size: 12.5px; color: var(--ink2); font-weight: 500; } .contact-form fieldset { min-width: 0; } .contact-form input, .contact-form select, .contact-form textarea { font: inherit; color: var(--ink); padding: 7px 9px; border: 1px solid var(--rule2); border-radius: var(--radius-s); background: var(--surface); max-width: 100%; } .contact-form textarea { width: 100%; resize: vertical; } /* A parent's name and address make a long option, which would otherwise widen the whole form past a narrow panel. */ .contact-form [data-email-to] { width: 100%; } .contact-form .primary { justify-self: start; } .field-error, .form-error { color: var(--alarm); font-size: 12px; font-weight: 500; margin: 0; } @media (max-width: 600px) { .time li { grid-template-columns: 1fr; gap: 2px; } .panel, .filehead { padding-inline: 14px; } } /* the Grade 11 gate: ten slots, the Core16 mark's own picture of the rule */ .gate { background: var(--surface); border: 1px solid var(--rule); } .gate-row { display: grid; grid-template-columns: 220px 1fr 150px; align-items: center; gap: 18px; padding: 13px 16px; border-bottom: 1px solid var(--rule); } .gate-name { font-weight: 600; } .gate-name a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule2); } .gate-name em { display: block; font-style: normal; font-weight: 400; color: var(--ink3); font-size: 12px; } .gate-name em.stale { color: var(--warn); } .slots { display: flex; gap: 3px; } .slot { height: 26px; flex: 1; border: 3px solid var(--rule2); border-radius: 6px; } .slot.done { background: var(--ink); border-color: var(--ink); } .slot.proj { background: repeating-linear-gradient(45deg, var(--rule2) 0 3px, transparent 3px 6px); } .slot.short { border-color: var(--alarm); background: var(--alarmbg); } .gate-verdict { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; } .gate-verdict em { display: block; font-style: normal; font-weight: 400; font-size: 12px; color: var(--ink3); } .gate-verdict.bad { color: var(--alarm); } .gate-verdict.good { color: var(--ok); } /* What to do, under the verdict: in the ink, since the figure above is already the colour. */ .gate-verdict em.next { color: var(--ink2); max-width: 24ch; margin-left: auto; } @media (max-width: 720px) { .gate-verdict em.next { margin-left: 0; } } .legend { display: flex; flex-wrap: wrap; gap: 16px; padding: 9px 16px; background: var(--ice2); font-size: 12px; color: var(--ink3); } .legend i { display: inline-block; width: 12px; height: 12px; border: 2px solid var(--rule2); border-radius: var(--radius-s); vertical-align: -2px; margin-right: 5px; } .legend i.done { background: var(--ink); border-color: var(--ink); } .legend i.proj { background: repeating-linear-gradient(45deg, var(--rule2) 0 3px, transparent 3px 6px); } .legend i.short { border-color: var(--alarm); background: var(--alarmbg); } @media (max-width: 720px) { .gate-row { grid-template-columns: 1fr; gap: 9px; } .gate-verdict { text-align: left; } } /* review queue */ .people { display: flex; flex-wrap: wrap; gap: 4px 12px; } .people a { color: var(--blue); } /* How far along each student is: a completed blocking course can only be submitted to NCAA, not swapped, so it reads in the alarm colour. */ .person { display: inline-flex; flex-direction: column; } .person .status { font-size: 12px; color: var(--ink3); } .person .status.done { color: var(--alarm); font-weight: 600; } /* What resolves the course, under its name: read before anything is opened. */ table.queue .who .route { display: block; margin-top: 4px; font-weight: 400; font-size: 12.5px; color: var(--ink2); max-width: 52ch; } table.queue { min-width: 860px; } /* Urgency: red blocks certification, yellow blocks nothing but needs a look. */ .sec.alarm .sechead h2 { color: var(--alarm); } .sec.warn .sechead h2 { color: var(--warn); } .sec.alarm .sechead h2::before, .sec.warn .sechead h2::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: currentColor; } table.queue.alarm tbody tr, table.queue.alarm tbody tr:hover { background: var(--alarmbg); } table.queue.warn tbody tr, table.queue.warn tbody tr:hover { background: var(--warnbg); } table.queue.alarm td { border-bottom-color: var(--alarmrule); } table.queue.warn td { border-bottom-color: var(--warnrule); } table.queue.alarm td:first-child { box-shadow: inset 4px 0 var(--alarm); } table.queue.warn td:first-child { box-shadow: inset 4px 0 var(--warnstripe); } td.act { min-width: 220px; } .filed { display: block; font-weight: 400; color: var(--ink3); font-size: 12px; } .act summary { color: var(--blue); cursor: pointer; } /* The toggle names what it will do: "Show options" closed, "Hide options" open. */ .act details:not([open]) .when-open, .act details[open] .when-closed { display: none; } .queue-action { display: grid; gap: 8px; margin-top: 8px; } .queue-action label { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink2); font-weight: 500; } .queue-action .opt { font-weight: 400; color: var(--ink3); } .queue-action textarea { font: inherit; color: var(--ink); padding: 6px 8px; border: 1px solid var(--rule2); border-radius: var(--radius-s); background: var(--surface); width: 100%; resize: vertical; } .queue-action .buttons { display: flex; flex-wrap: wrap; gap: 8px; } .queue-action .buttons button:not(.primary) { font: inherit; font-size: 13px; padding: 6px 10px; cursor: pointer; color: var(--ink); background: var(--surface); border: 1px solid var(--rule2); border-radius: var(--radius-s); } .queue-action .note { margin: 0; font-size: 12px; } .flags { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .flags .by { display: block; color: var(--ink3); font-size: 12px; } .flags .said { display: block; white-space: pre-line; max-width: 40ch; } .flags + details { margin-top: 8px; } .contact-form fieldset.resolves { border: 1px solid var(--rule); border-radius: var(--radius-s); padding: 8px 12px; margin: 0; } .contact-form fieldset.resolves legend { font-size: 12.5px; color: var(--ink2); font-weight: 500; padding: 0 4px; } .contact-form label.check { display: flex; gap: 8px; align-items: center; font-weight: 400; color: var(--ink); } /* Each course on a line of its own with what ticking it does underneath, so a narrow column never splits a course name to make room for the note. */ .contact-form fieldset.resolves { display: grid; gap: 8px; } .contact-form fieldset.resolves label.check { align-items: flex-start; } .contact-form fieldset.resolves label.check input { margin-top: 3px; } .contact-form fieldset.resolves .what .by { display: block; margin-top: 1px; } /* staff */ table.staff { min-width: 760px; } td.actions { white-space: nowrap; text-align: right; } td.actions form { display: inline; margin-left: 14px; } .linkbtn.danger { color: var(--alarm); } .form-error.banner { padding: 9px 12px; margin: 0 0 10px; background: var(--alarmbg); border: 1px solid var(--alarmrule); } .notice { margin: 0 0 10px; padding: 9px 12px; background: var(--ice2); border: 1px solid var(--rule); } .staff-form { display: grid; gap: 12px; max-width: 760px; } .staff-form label { display: grid; gap: 4px; align-content: start; font-size: 12.5px; color: var(--ink2); font-weight: 500; } .staff-form input, .staff-form select { font: inherit; color: var(--ink); padding: 7px 9px; border: 1px solid var(--rule2); border-radius: var(--radius-s); background: var(--surface); max-width: 100%; } .staff-form .primary, .staff-form .note { justify-self: start; margin: 0; } /* families */ table.families { min-width: 640px; } table.families td div + div { margin-top: 3px; } tr.muted td, tr.muted td a { color: var(--ink3); } .staff-form .opt { font-weight: 400; color: var(--ink3); } /* Add a family is one grid of three sections, so each heading sits on its own fields and the space goes between sections instead. */ .staff-form.add-family h3 { margin: 8px 0 -8px; } .staff-form.add-family h3:first-of-type { margin-top: 0; } /* The folded second student: its fields are outside the form's grid, so they need the grid's 12px themselves. */ .staff-form.add-family .second-student > summary h3 { margin: 0; } .staff-form.add-family .second-student > .fields { margin-top: 12px; } .staff-form.add-family .second-student > summary + .fields { margin-top: 8px; } .staff-form h3 { margin: 4px 0 0; } .card.wide { max-width: 640px; } .code-dialog { width: min(520px, calc(100vw - 32px)); padding: 22px 24px; color: var(--ink); background: var(--surface); border: 1px solid var(--rule2); border-radius: var(--radius-s); } .code-dialog::backdrop { background: var(--backdrop); } .code-dialog h2 { margin: 0 0 10px; font-size: 17px; } .code-dialog p { margin: 0 0 12px; color: var(--ink2); } .code-dialog .code { font: 600 30px var(--mono); letter-spacing: .08em; color: var(--ink); margin-bottom: 10px; } .code-dialog textarea { width: 100%; font: 12.5px var(--mono); color: var(--ink); padding: 8px 9px; resize: none; border: 1px solid var(--rule2); border-radius: var(--radius-s); background: var(--ice2); } .code-dialog .buttons { display: flex; gap: 8px; align-items: center; margin-top: 10px; } .code-dialog .buttons form { margin: 0; } .code-dialog .status { margin: 6px 0 4px; } .code-dialog .note { margin: 0; font-size: 12.5px; color: var(--ink3); } /* asking before something that can't be undone -- see portal.js */ .ask { width: min(460px, calc(100vw - 32px)); padding: 22px 24px; color: var(--ink); background: var(--surface); border: 1px solid var(--rule2); border-radius: var(--radius-s); } .ask::backdrop { background: var(--backdrop); } .ask h2 { margin: 0; font-size: 17px; } .ask p { margin: 10px 0 0; color: var(--ink2); } .ask p[hidden] { display: none; } .ask .buttons { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 20px; } @media (prefers-reduced-motion: no-preference) { .ask[open] { animation: ask-in .13s ease-out; } @keyframes ask-in { from { opacity: 0; transform: translateY(-6px); } } } .linkbox { display: flex; gap: 8px; flex-wrap: wrap; } .setup-email { margin-bottom: 20px; } .linkbox input { flex: 1 1 280px; min-width: 0; font: 12.5px var(--mono); color: var(--ink); padding: 8px 9px; border: 1px solid var(--rule2); border-radius: var(--radius-s); background: var(--ice2); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* renaming, archiving and deleting a student */ .notice.top, .form-error.banner.top { margin: 12px 0 0; } .archived-note { margin: 8px 0 0; color: var(--warn); font-size: 13px; } .archived { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--rule); } .archived li { padding: 9px 12px; border-bottom: 1px solid var(--rule); } .archived li:last-child { border-bottom: none; } .archived a { color: var(--ink); font-weight: 600; } .archived .by { color: var(--ink3); font-size: 12px; } .contact-form.first { margin-top: 10px; padding-top: 0; border-top: none; } .contact-form .note { margin: 0; color: var(--ink3); font-size: 12.5px; max-width: 70ch; } /* A footnote under a form ("To add a parent…" below the Call button) needs room, or it reads as part of the button. */ .contact-form + .quiet { margin-top: 12px; font-size: 12.5px; } .secondary, .danger { font: inherit; font-weight: 600; justify-self: start; cursor: pointer; border-radius: var(--radius-s); padding: 9px 15px; background: var(--surface); } .secondary { color: var(--ink); border: 1px solid var(--rule2); } .danger { color: var(--onalarm); background: var(--alarm); border: 1px solid var(--alarm); } /* A link-style button that's also dangerous (Revoke, Withdraw, Cancel) stays a link: without this, .danger above fills it in and its red text vanishes. */ .linkbtn.danger { background: none; border: none; padding: 0; font-weight: inherit; } .danger-zone h2, .danger-zone h3 { color: var(--alarm); } /* appearance switch in the top bar */ .brand svg rect[stroke] { stroke: var(--rule2); } .theme { display: inline-flex; border: 1px solid var(--rule2); border-radius: var(--radius-s); overflow: hidden; } .theme[hidden] { display: none; } .theme button { font: inherit; font-size: 12px; color: var(--ink2); background: var(--surface); border: none; padding: 3px 9px; cursor: pointer; } .theme button + button { border-left: 1px solid var(--rule2); } .theme button:hover { color: var(--ink); } .theme button[aria-pressed="true"] { color: var(--onink); background: var(--ink); } /* read aloud, not shown */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Mentor sessions: the Sessions page and the panel on a student's file. */ .sessions-figures { margin: 12px 0 16px; } .sessions-figures dd .sub { display: block; font-size: 12.5px; font-weight: 400; } .sessions-figures dd .bad { font-size: 15px; } td.actions label { font-size: 12.5px; color: var(--ink3); } td.actions label.check { display: inline-flex; gap: 6px; align-items: center; margin-right: 10px; } td.actions input[type="text"] { width: 240px; margin-left: 6px; font: inherit; padding: 5px 8px; color: var(--ink); background: var(--surface); border: 1px solid var(--rule2); border-radius: var(--radius-s); } .staff-form label > textarea { display: block; width: 100%; max-width: 70ch; margin-top: 4px; font: inherit; padding: 7px 9px; color: var(--ink); background: var(--surface); border: 1px solid var(--rule2); border-radius: var(--radius-s); resize: vertical; } .staff-form h3 { margin: 0 0 10px; font-size: 14px; } #sessions .time.log form { margin-top: 6px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } #sessions .contact-form { margin-top: 18px; } /* A contact form folded away by default: the rule above it moves to the details, its h3 to the summary. */ .form-fold { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--rule); max-width: 720px; } .form-fold > summary h3 { display: inline-block; margin: 0; font-size: 13.5px; } #sessions .form-fold > .contact-form { margin-top: 12px; padding-top: 0; border-top: none; } .ledger[open] > summary { margin-bottom: 12px; } /* The availability calendar on a professional's own page. A week of half-hour bands; the free ones are real checkboxes, so ticking a week works with no JavaScript at all and portal.js only adds sweeping a run with one drag. */ .weeknav { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: end; margin: 0 0 10px; } .weekjump { display: flex; gap: 10px; align-items: center; } .weekjump strong { font-size: 13px; color: var(--ink); min-width: 15ch; text-align: center; } .weekjump a { text-decoration: none; } .weekjump .is-off { opacity: .35; } .weeknav label { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink2); font-weight: 500; } .weeknav select[name] { height: 40px; } .weeknav select { font: inherit; padding: 6px 8px; color: var(--ink); background: var(--surface); border: 1px solid var(--rule2); border-radius: var(--radius-s); } .calwrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); } .calwrap .cal { border-collapse: collapse; width: 100%; min-width: 620px; table-layout: fixed; } .calwrap .cal thead th { padding: 7px 4px; font-size: 12px; font-weight: 600; color: var(--ink); background: var(--ice2); border-bottom: 1px solid var(--rule); } .calwrap .cal thead th span { display: block; font-size: 11px; font-weight: 400; color: var(--ink3); } .calwrap .cal thead th:first-child, .calwrap .cal tbody th { width: 62px; } .calwrap .cal tbody th { padding: 0 8px 0 0; font-size: 11px; font-weight: 400; color: var(--ink3); text-align: right; vertical-align: top; white-space: nowrap; } .calwrap .cal td { padding: 0; border-left: 1px solid var(--rule); height: 17px; } .calwrap .cal td.onhour { border-top: 1px solid var(--rule); } .calwrap .cal tbody tr:first-child td { border-top: none; } /* The checkbox is the cell: no tick, just the whole band filling in, which is what someone sweeping a Tuesday evening is actually looking at. */ .cal .band input { appearance: none; -webkit-appearance: none; display: block; margin: 0; width: 100%; height: 17px; cursor: pointer; background: transparent; border: none; } .cal .band input:hover { background: var(--ice); } .cal .band input:checked { background: var(--blue); } .cal .band input:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; } .cal .band.open { background: var(--okbg); } .cal .band.booked { background: var(--infobg); } .cal .band.past { background: var(--ice2); } .cal .band .held { display: block; height: 17px; padding: 0 4px; overflow: hidden; font-size: 11px; line-height: 17px; color: var(--ink2); white-space: nowrap; } .cal .band.booked .held { font-weight: 600; color: var(--ink); } .callegend { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 8px 0 0; font-size: 12.5px; color: var(--ink3); } .callegend .key { display: inline-block; width: 13px; height: 13px; margin-right: 2px; vertical-align: -2px; border: 1px solid var(--rule2); } .callegend .key.free { background: var(--surface); } .callegend .key.open { background: var(--okbg); border-color: var(--okrule); } .callegend .key.booked { background: var(--infobg); border-color: var(--inforule); } .callegend .key.past { background: var(--ice2); } .calgo { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: end; margin: 14px 0 0; } .calgo label { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink2); font-weight: 500; } .calgo select[name] { height: 40px; } .calgo select { font: inherit; padding: 7px 8px; color: var(--ink); background: var(--surface); border: 1px solid var(--rule2); border-radius: var(--radius-s); } .calgo .primary { margin: 0; } .calgo p { margin: 0 0 8px; } .onetime { margin: 22px 0 0; } .onetime > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink2); } .onetime .staff-form { margin-top: 12px; } /* Sweeping a run shouldn't select the day names along the way. */ .cal.sweeping { user-select: none; -webkit-user-select: none; } /* A fortnight of evenings is forty rows. Folded away once it is longer than a glance, since the calendar above already shows the same week in a shape somebody can read; this is the list you withdraw from. */ .alltimes > summary { cursor: pointer; margin: 0 0 10px; font-size: 13px; font-weight: 600; color: var(--ink2); } .alltimes[open] > summary { margin-bottom: 10px; } /* A family's parents and guardians, on the family's page. */ .guardians { list-style: none; margin: 8px 0 12px; padding: 0; } .guardians li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--rule); } .guardians form { margin: 0; } .calls details { margin: 8px 0 16px; } .guardians .login { display: block; font-style: normal; color: var(--ink3); font-size: 12.5px; } .guardians .acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; } /* A parent's page (parent.html): each student's figures, then one calendar. */ .fineprint.wide { max-width: 80ch; margin: 26px 0 0; } .child .status { display: grid; gap: 14px; } .child .status > * { margin: 0; } /* The GPA row is capped narrower than the pace rows under it, which left its chip about 160px left of theirs. On the parent page they share one width. */ .child .status .gpa-head { max-width: 640px; } .agenda { list-style: none; margin: 8px 0 12px; padding: 0; max-width: 760px; } .agenda li { display: grid; grid-template-columns: 6.5em 1fr auto; align-items: baseline; gap: 12px; padding: 7px 0 7px 10px; border-bottom: 1px solid var(--rule); border-left: 3px solid var(--rule2); margin-bottom: 2px; font-size: 14px; } .agenda time { color: var(--ink2); font-variant-numeric: tabular-nums; } .agenda b { font-weight: 600; } .agenda em { display: block; font-style: normal; color: var(--ink3); font-size: 12.5px; } .agenda .due, .agenda .school { border-left-color: var(--blue); } .agenda .hockey { border-left-color: var(--hockey); } .agenda .session { border-left-color: var(--warnstripe); } .agenda .done b, .agenda .done time { color: var(--ink3); font-weight: 400; } /* The month's list mixes school and hockey: a wider stripe, the calendar's tint behind the row, and the kind named under the date. */ .agenda.mixed li { border-left-width: 5px; padding-right: 8px; } .agenda.mixed .due, .agenda.mixed .school { background: var(--infobg); } .agenda.mixed .hockey { background: var(--hockeybg); } .agenda.mixed .session { background: var(--warnbg); } .agenda .when { display: flex; flex-direction: column; } .agenda .when .at { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; } .agenda .done .when .at { color: var(--ink3); font-weight: 400; } .agenda .kind { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } .agenda .due .kind, .agenda .school .kind { color: var(--blue); } .agenda .hockey .kind { color: var(--hockey); } .agenda .session .kind { color: var(--warn); } /* A parent's add and edit forms: a card, two columns, every box full width in its column so the rows line up. One column on a phone. */ .parent-edit .edit-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; } .parent-edit .edit-fields .wide { grid-column: 1 / -1; } .parent-edit .edit-field input, .parent-edit .edit-field select { width: 100%; height: 38px; box-sizing: border-box; } .parent-edit .staff-form { gap: 16px; } /* Beside the repeat field on a wide screen, under it on a phone. */ .parent-edit .field-note { margin: 0; align-self: end; font-size: 12px; color: var(--ink3); line-height: 1.4; } @media (max-width: 520px) { .parent-edit .edit-fields { grid-template-columns: 1fr; } } .edit-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .edit-actions .secondary { text-decoration: none; } .remove-edit { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; } .remove-edit .quiet { flex-basis: 100%; margin: 0; } .agenda .item-extras { align-self: center; } .item-extras { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px 10px; } .agenda .waiting-chip, .agenda .edit-link { font-size: 12px; } .agenda .edit-link { color: var(--blue); white-space: nowrap; } /* Buttons, not links: they're how a parent changes the calendar, and as underlined text at the foot of a panel they read as fine print. */ .add-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 8px; } .add-links .secondary { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 500; line-height: 1.2; padding: 7px 12px; text-decoration: none; } .add-links .secondary svg { flex: none; color: var(--blue); } .add-links a.secondary:hover { border-color: var(--blue); } /* No course to put a due date under: the button stays, greyed, so the choice is still visible, with a "?" saying why. */ .add-links .add-off { display: inline-flex; align-items: center; gap: 6px; } .add-links .is-disabled { color: var(--ink3); border-style: dashed; cursor: not-allowed; } .add-links .is-disabled svg { color: var(--ink3); } .add-panel .note { margin: 0; } .agenda.calls li { align-items: center; } .call-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 10px; } .call-actions form { margin: 0; } .call-actions .sub { color: var(--ink3); font-size: 12.5px; } .monthnav { display: flex; gap: 14px; margin-left: auto; font-size: 13px; } .monthnav a { color: var(--blue); } .cal-key { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; padding: 0; color: var(--ink2); font-size: 12.5px; } .cal-key li::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: var(--radius-s); vertical-align: -1px; } .cal-key .due::before { background: var(--blue); } .cal-key .hockey::before { background: var(--hockey); } .cal-key .session::before { background: var(--warnstripe); } .cal-wrap .cal { width: 100%; border-collapse: collapse; table-layout: fixed; background: var(--surface); } .cal-wrap .cal th { padding: 6px 8px; border: 1px solid var(--rule); color: var(--ink3); font-size: 12px; font-weight: 600; text-align: left; } .cal-wrap .cal td { height: 96px; padding: 5px 6px; border: 1px solid var(--rule); vertical-align: top; overflow: hidden; } .cal-wrap .cal td.out { background: var(--ice2); } .cal-wrap .cal td.out .date { color: var(--ink3); } .cal-wrap .cal .date { display: block; margin-bottom: 3px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink2); } .cal-wrap .cal td.today { box-shadow: inset 0 0 0 2px var(--blue); } .cal-wrap .cal td.today .date { color: var(--blue); font-weight: 700; } .cal-wrap .cal .ev { display: block; margin-top: 2px; padding: 1px 5px; border-left: 3px solid; font-size: 11.5px; line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-wrap .cal .ev i { font-style: normal; font-weight: 600; } .cal-wrap .cal .ev.due, .cal-wrap .cal .ev.school { border-color: var(--blue); background: var(--infobg); } .cal-wrap .cal .ev.hockey { border-color: var(--hockey); background: var(--hockeybg); } .cal .ev.session { border-color: var(--warnstripe); background: var(--warnbg); } .cal .ev.done { color: var(--ink3); background: none; } @media (max-width: 720px) { .cal-wrap, .cal-key { display: none; } .monthnav { margin-left: 0; width: 100%; } .agenda li { grid-template-columns: 5.5em 1fr auto; } /* A phone has no room for buttons beside a session: they go under it. */ .agenda.calls li { grid-template-columns: 5.5em 1fr; } .agenda.calls .call-actions { grid-column: 1 / -1; justify-content: flex-start; } } /* Safari draws a