/* Syllabus Registry: additions to the CMU template CSS, which pages link
   from www.cmu.edu (main.6.7.min.css). Shared by packages/web (body.syl-web,
   full CMU chrome) and the Canvas tool in packages/lti-course (body.syl-lti,
   no chrome). Use the template's own classes (a.btn, .btn.ghost, a.cta,
   table.alternate, .sr-only) as they are, don't copy its rules or values,
   and add a syl-* class only where it has nothing. The colors and the
   .syl-note and .syl-pill components match the cmu.edu/syllabusregistry
   site's style.css. */

body {
  --syl-red: #c41230;
  --syl-ink: #22262a;
  --syl-muted: #5b6670;
  --syl-line: #d9dde1;
  --syl-tint: #f4f5f6;
  --syl-green: #1d5a3a;
}

/* Canvas tool pages: no CMU chrome, framed by Canvas */
body.syl-lti { padding: 1.5rem; }

/* Standalone web pages: the TLI form idiom (as on requests.eberly.cmu.edu) */
body.syl-web fieldset > ul { list-style-type: none; padding-left: 0; margin: 0; }
body.syl-web fieldset { margin: 0 0 2em 0; }
body.syl-web input[type="checkbox"],
body.syl-web input[type="radio"] { max-width: 100%; margin-right: 0.5em; }
body.syl-web input[type="checkbox"] + label,
body.syl-web input[type="radio"] + label { display: inline; font-weight: normal; }
body.syl-web select,
body.syl-web input[type="text"] { width: 100%; margin-bottom: 2em; }
body.syl-web select.inline,
body.syl-web input[type="text"].inline { width: auto; margin-bottom: 0; }


/* Account: your name (or Sign In) beside the menu button; in the menu, name and Sign Out (or Sign In) */
.roof .syl-account {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 3.4em;
  display: flex;
  align-items: center;
  max-width: 45%;
  overflow: hidden;
  line-height: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--syl-ink);
}
/* Signed out, Sign In looks like the template's header links (header li a):
   bold gray, red on hover. Signed in, the name is plain text. */
.roof .syl-account:not(.syl-account-open) { font-weight: 700; color: rgba(0, 0, 0, 0.65); }
.roof .syl-account:not(.syl-account-open):hover { color: #c00; }
/* The name leaves the bar when the menu opens (as the menu button does);
   the menu's account item has it instead. Below 768px the template's
   wordmark fills the bar, so there it's only in the menu. */
.menu-on .roof .syl-account { display: none; }
@media (max-width: 767px) { .roof .syl-account { display: none; } }
nav#nav li.syl-account-menu { display: flex; flex-direction: column; align-items: flex-end; }
.syl-account-name, .syl-account-name:hover { cursor: default; color: inherit; }

/* Semester tabs (partials/semester-tabs): the one you're on is red and
   underlined, like the active nav tab */
.syl-semester-tabs { display: flex; flex-wrap: wrap; gap: 0 1.75em; margin: 0 0 1.75em; border-bottom: 1px solid var(--syl-line); }
#content .syl-semester-tabs a, #content .syl-semester-tabs a:hover {
  margin-bottom: -1px;
  padding-top: 0.2em; /* the template fixes padding-bottom at 1px */
  line-height: 2.2;
  border-bottom: 3px solid transparent;
  color: var(--syl-ink);
  font-weight: 600;
}
#content .syl-semester-tabs a:hover { color: var(--syl-red); }
#content .syl-semester-tabs a[aria-current="page"] { color: var(--syl-red); border-bottom-color: var(--syl-red); }
/* Folded semesters: the link stays at the end of the first row (the details
   box itself drops out of the layout); opened, the rest wrap below it */
.syl-semester-more { display: contents; }
.syl-semester-more summary { margin: 0; padding: 0.2em 0 0; line-height: 2.2; }
.syl-semester-more .syl-more-link { margin-left: 0; }
.syl-semester-more > div { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0 1.75em; }

/* Page title row: h1 with actions on the right */
.syl-page-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5em 1em;
}
.syl-page-title h1 { margin: 0; }
.syl-page-title form { margin: 0; }
/* Semester order arrows on the Admin page */
.syl-order { display: flex; gap: 0.4em; margin: 0; }
.syl-order .btn { margin: 0; padding: 0.2em 0.75em; font-size: 1.2em; line-height: 1.4; }
.syl-order button[disabled] { opacity: 0.35; cursor: default; }

/* Small text */
.syl-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--syl-muted);
}
.syl-hint, .syl-subtext, .syl-instructor-id, .syl-dept-code { color: var(--syl-muted); }
.syl-hint { font-size: 0.85em; }
.syl-empty { text-align: center; color: var(--syl-muted); padding: 1.25em; }
/* Codes (departments, course numbers) in the body font, as on Browse */
.syl-code { white-space: nowrap; }
.syl-full { width: 100%; }
/* The framework makes tables display: block (so they scroll on phones), which won't stretch them */
@media (min-width: 768px) { table.syl-full { display: table; } }

/* Messages */
.syl-note {
  margin: 0 0 1.25em;
  padding: 0.85em 1.1em;
  background: var(--syl-tint);
  border-left: 4px solid var(--syl-line);
}
.syl-note p { margin: 0; padding: 0; }
.syl-banner { margin: 1em 0; padding: 0.75em 1em; border-left: 4px solid; }
.syl-banner.error { background: #fdf2f3; border-color: var(--syl-red); color: var(--syl-red); }
.syl-banner.success { background: #e3f1ea; border-color: var(--syl-green); color: var(--syl-green); }

/* Status pills */
.syl-pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 3px;
  background: #eceef0;
  color: #4a535b;
}
.syl-pill--available { background: #e3f1ea; color: var(--syl-green); }
.syl-pill--unavailable { background: #fff4d6; color: #6b4d00; }

/* Buttons that act like links (POST actions next to plain links) */
.syl-link-button {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--syl-red);
  text-decoration: underline;
  text-align: left;
  cursor: pointer;
}
.syl-link-button:hover { background: none; color: #f00; }
/* The same look on a real link: drop the template's border underline */
a.syl-link-button, a.syl-link-button:hover { border-bottom: none; }

/* Upload dialog on My Department(s): the sections it applies to, a drop
   zone, then the buttons */
.syl-dialog {
  width: min(32em, calc(100vw - 2em));
  box-sizing: border-box;
  padding: 1.5em;
  border: 1px solid var(--syl-line);
  background: #fff;
  color: var(--syl-ink);
}
.syl-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.syl-dialog h2 { margin-top: 0; }
.syl-upload-targets { margin: 0 0 0.75em 1.25em; padding: 0; }
.syl-upload-targets li { margin: 0.2em 0; padding: 0; }
/* .btn, .syl-banner and friends set display, which beats a bare [hidden] */
.syl-dialog [hidden] { display: none !important; }
.syl-drop {
  display: block;
  margin: 1em 0 0.5em;
  padding: 1.75em 1em;
  border: 2px dashed var(--syl-line);
  text-align: center;
  cursor: pointer;
}
/* The real file input stays focusable for keyboards but out of sight */
.syl-drop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  opacity: 0;
}
.syl-drop { position: relative; }
.syl-drop-pick { color: var(--syl-red); text-decoration: underline; }
.syl-drop-over, .syl-drop:focus-within { border-color: var(--syl-ink); background: #f6f7f8; }
.syl-drop-has-file { border-style: solid; }
.syl-drop-file { display: block; margin-top: 0.5em; font-weight: 700; word-break: break-all; }
.syl-dialog-buttons { display: flex; gap: 0.5em; margin: 1.25em 0 0; }
.syl-dialog-buttons .btn { margin: 0; }

/* Completion: a headline number and bars */
.syl-stat {
  display: flex;
  align-items: center;
  gap: 1.25em;
  margin: 1em 0;
  padding: 1em 1.25em;
  border: 1px solid var(--syl-line);
}
.syl-stat-value { font-size: 1.5em; font-weight: 700; }
.syl-stat-sub { font-size: 0.85em; color: var(--syl-muted); }
.syl-stat { flex-wrap: wrap; }
.syl-stat > .syl-meter { flex: 1; height: 12px; }
/* Per-department rows, for admins of several departments */
.syl-breakdown { flex-basis: 100%; list-style: none; margin: 0.5em 0 0; padding: 0.75em 0 0; border-top: 1px solid var(--syl-line); }
.syl-breakdown li { display: flex; align-items: center; gap: 0.75em; margin: 0.35em 0; }
.syl-breakdown .syl-code { min-width: 4em; }
.syl-breakdown .syl-pct { margin: 0; min-width: 3em; }

/* Folded long lists on My Departments: a summary line with a Show all /
   Show fewer link */
.syl-more summary { cursor: pointer; list-style: none; color: var(--syl-muted); }
.syl-more summary::-webkit-details-marker { display: none; }
.syl-more .syl-more-link { margin-left: 0.5em; color: var(--syl-red); font-weight: 600; }
.syl-more summary:hover .syl-more-link { text-decoration: underline; }
.syl-more .syl-more-open, .syl-more[open] .syl-more-closed { display: none; }
.syl-more[open] .syl-more-open { display: inline; }
.syl-dept-codes { margin: -0.5em 0 1.5em; color: var(--syl-muted); }
.syl-dept-codes p { margin: 0.5em 0 0; }
.syl-breakdown-more { flex-basis: 100%; margin-top: 0.5em; padding-top: 0.75em; border-top: 1px solid var(--syl-line); }
.syl-breakdown-more .syl-breakdown { border-top: 0; }
.syl-breakdown-more .syl-more-link { margin-left: 0; }
/* Divs, not spans: the template script strips style="" from spans */
.syl-meter { display: inline-block; vertical-align: middle; width: 8em; height: 10px; background: #e8eaec; }
.syl-meter > div { display: block; height: 100%; background: var(--syl-green); }
.syl-pct { font-weight: 700; vertical-align: middle; margin-left: 0.5em; }
.syl-pct.high { color: var(--syl-green); }
.syl-pct.mid { color: #6b4d00; }
.syl-pct.low { color: var(--syl-red); }

/* Tables: framework table.alternate, plus numeric columns */
table.alternate th.num, table.alternate td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Filter rows above a list (dept dashboard, dept upload) */
.syl-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1em 1.5em; margin-bottom: 1em; }
.syl-filter-group { display: flex; flex-direction: column; gap: 0.25em; }
.syl-filter-checks { display: flex; flex-wrap: wrap; gap: 0.75em; }
.syl-filter-checks label { display: flex; align-items: center; gap: 0.25em; margin: 0; font-weight: normal; }
body.syl-web .syl-filter-group input[type="text"] { min-width: 15em; margin-bottom: 0; }
/* Bulk bar: a tinted band on top of the table, the count then the actions.
   Its height is fixed so buttons appearing don't nudge the table. */
.syl-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em 0.75em;
  min-height: 3.5em;
  padding: 0.5em 0.75em;
  background: var(--syl-tint);
  border: 1px solid var(--syl-line);
  border-bottom: 0;
}
.syl-bulk-bar .syl-selection-count { color: var(--syl-muted); margin-right: 0.5em; }
.syl-bulk-bar .syl-selection-count.syl-has-selection { color: var(--syl-ink); font-weight: 600; }
.syl-bulk-bar .btn { margin: 0; }
/* Sortable headers on My Department(s): the header text is the button */
th[data-sort-key] .syl-sort {
  all: unset;
  cursor: pointer;
  font-weight: inherit;
  white-space: nowrap;
}
th[data-sort-key] .syl-sort:hover { color: #c00; }
th[data-sort-key] .syl-sort:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
th[aria-sort] .syl-sort { color: #c00; }
.syl-sort-arrow { font-size: 0.7em; vertical-align: 0.15em; }
/* Table columns that shrink to their content */
.syl-fit { width: 1%; white-space: nowrap; }
/* Row actions on My Department(s): the selection bar's small buttons, side
   by side, a pair splitting the column evenly; labels wrap inside the
   buttons when the table is short of room */
/* One fixed width for every row button, alone or in a pair, however wide the table */
.syl-row-buttons { display: grid; grid-auto-flow: column; grid-auto-columns: 8.5em; justify-content: start; gap: 0.4em; }
.syl-row-buttons > * { display: flex; }
.syl-row-buttons .btn { display: flex; align-items: center; justify-content: center; width: 100%; box-sizing: border-box; text-align: center; }
/* Line height for wrapped labels (the template's is 1, with an id selector);
   slimmer sides so "Do not expect" fits on one line in 8.5em.
   Labels keep "a syllabus" and "Do not expect" together with  . */
#content .syl-row-buttons .btn { line-height: 1.25; padding-left: 0.25em; padding-right: 0.25em; }
/* Every button as tall as a two-line one (2 lines, padding, border), so
   rows don't change height with the label */
.syl-row-buttons .btn { min-height: calc(3.2em + 4px); }
/* Below 1200px there's no room to keep names and statuses on one line, and
   wrapping them beats a table that scrolls sideways */
@media (max-width: 1199px) {
  td .syl-instructor, td .syl-pill { white-space: normal; }
  /* No room for a side-by-side pair: stack it, each label on one line */
  .syl-row-buttons { grid-auto-flow: row; grid-auto-columns: auto; }
  td .syl-row-buttons .btn { white-space: nowrap; min-height: 0; }
}
.syl-row-buttons form { margin: 0; }
.syl-row-buttons .btn { margin: 0; white-space: normal; }
/* The table sits flush under the selection bar (the upload dialog comes between them in the markup) */
#syl-bulk-form ~ table { margin-top: 0; }
/* .btn and button display rules would otherwise beat the framework's bare [hidden] */
.syl-bulk-bar [hidden] { display: none !important; }

/* Two-column pages: Browse has filters on the left, dept upload has the
   apply panel on the right. One column on phones. */
.syl-browse, .syl-apply-layout { display: grid; gap: 2.5em; align-items: start; }
/* The search box sits over the table only, so the filters start level with the table */
.syl-browse {
  grid-template-columns: 16em minmax(0, 1fr);
  grid-template-areas: ". search" "facets results";
  row-gap: 0;
}
.syl-browse > .syl-facets { grid-area: facets; }
.syl-browse > .syl-search-bar { grid-area: search; }
.syl-browse > .syl-results { grid-area: results; }
.syl-apply-layout { grid-template-columns: minmax(0, 1fr) 16em; align-items: stretch; }
/* The framework makes .content > div an inline-block */
.content > .syl-browse { display: grid; width: 100%; }
@media (max-width: 767px) {
  .syl-browse, .syl-apply-layout { grid-template-columns: minmax(0, 1fr); gap: 1.5em; }
  .syl-browse { grid-template-areas: "facets" "search" "results"; row-gap: 0.75em; }
}

/* Browse (home) */
.syl-search-bar { margin-bottom: 0.5em; }
.syl-search-bar input[type="text"] { width: 100%; margin-bottom: 0; }
.syl-title-cell {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.syl-instructor { display: block; white-space: nowrap; }
.syl-instructor + .syl-instructor { margin-top: 0.25em; }
.syl-instructor-name, .syl-instructor-id { white-space: nowrap; }
/* My Department(s) has the most columns: Title gets a fixed share, and an
   instructor's (andrewid) drops under the name rather than widening the column */
th.syl-title-col { width: 30%; }
#syl-dept-course-rows .syl-instructor { white-space: normal; }
/* Browse: under the table, the result count and Load more */
.syl-results-count { text-align: center; color: var(--syl-muted); margin: 1.5em 0 0; }
.syl-load-more { text-align: center; margin: 0.75em 0 0; }
.syl-load-more[hidden] { display: none; }
.syl-facets h2 {
  margin: 1.25em 0 0.5em;
  padding-top: 1.25em;
  border-top: 1px solid var(--syl-line);
  font-size: 1.1em;
  font-weight: 700;
}
.syl-facets h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.syl-facets > summary { display: none; }
@media (max-width: 767px) {
  .syl-facets { border: 1px solid var(--syl-line); }
  .syl-facets > summary { display: list-item; padding: 0.75em 1em; font-weight: 700; cursor: pointer; background: var(--syl-tint); }
  .syl-facets > div { padding: 1em; }
}
.syl-filter-checklist { list-style: none; margin: 0; padding: 0; }
.syl-filter-checklist li { margin: 0; transition: background-color 0.15s ease; }
.syl-filter-checklist li:hover { background-color: rgba(196,18,48,.08); }
.syl-filter-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 0.9em;
  font-weight: normal;
  padding: 0.5em 0.3em;
}
.syl-filter-checklist label input[type="checkbox"] { margin-top: 0.2em; flex-shrink: 0; }
.syl-filter-text, .syl-dept-code { display: block; }
.syl-filter-list-search { width: 100%; margin-bottom: 0.5em; }
/* College headings among the departments. display: contents lets the <li>
   do the layout whether or not the heading has a checkbox. */
.syl-filter-checklist li.syl-college-group {
  display: flex;
  align-items: flex-start;
  gap: 0.9em;
  padding: 0.5em 0.3em;
  margin-top: 1em;
}
.syl-filter-checklist li.syl-college-group:first-child { margin-top: 0; }
.syl-college-group label { display: contents; }
.syl-college-group h3 { margin: 0; padding: 0; font-size: 1em; }

/* Section lists (instructor upload, dept upload) */
fieldset.section-selection h3 { margin-top: 1em; }
fieldset.section-selection h3:first-child { margin-top: 0; }
fieldset.section-selection h3 .syl-course-num { font-family: monospace; font-size: 0.8em; color: var(--syl-muted); font-weight: normal; }
.syl-select-all { display: flex; align-items: baseline; gap: 0.5em; padding: 0.35em 0; border-bottom: 1px solid #e8eaec; }
.syl-select-all label { font-weight: 700; }
.syl-section-list li { display: flex; align-items: baseline; gap: 0.5em; margin-left: 0; padding: 0.35em 0; border-bottom: 1px solid #e8eaec; }
/* The display: flex above beats the framework's bare [hidden] */
.syl-section-list li[hidden] { display: none; }
.syl-section-list li label { flex: 1; }
.syl-section-list .syl-code { margin-right: 0.5em; }
.syl-section-status { margin-left: 0.5em; }

/* Dept upload: the apply panel follows the list down the page. On phones
   it's a bar fixed to the bottom of the screen. */
.syl-apply-panel > div { position: sticky; top: 1em; }
.syl-apply-panel h2 { margin-top: 0; }
.syl-apply-panel .syl-selection-count { display: block; margin-bottom: 0.75em; }
@media (max-width: 767px) {
  .syl-apply-panel > div {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0; z-index: 10;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.25em 1em;
    padding: 0.75em 1em; background: #fff; border-top: 1px solid var(--syl-line);
  }
  .syl-apply-panel h2, .syl-apply-panel .syl-hint { display: none; }
  .syl-apply-panel p { margin: 0; }
  .syl-apply-panel .syl-selection-count { margin: 0; }
  .syl-apply-panel .btn { margin: 0; }
  .syl-apply-layout { padding-bottom: 5em; }
}
.syl-replace-warning { color: #6b4d00; }

/* Dept dashboard */
/* The whole cell is the checkbox's click target */
table .syl-select-cell { position: relative; padding: 0 0.85em; text-align: center; vertical-align: top; min-width: 1.15em; }
/* The label fills the cell (a big target), so it has no width of its own to
   hold the column open: the side padding plus min-width (the box) do that */
.syl-select-cell label { position: absolute; inset: 0; margin: 0; padding-top: 0.6em; cursor: pointer; display: flex; justify-content: center; align-items: flex-start; }
.syl-select-cell input[type="checkbox"] { width: 1.15em; height: 1.15em; margin: 0; cursor: pointer; }
/* The template gives checkboxes a right margin, which pushes this one off center */
table .syl-select-cell label input[type="checkbox"] { margin: 0; }
/* Every app table centers its cells vertically: one-line cells sit level
   with a wrapped title, a list of instructors or a row's buttons */
#content table.alternate td { vertical-align: middle; }
#content table.alternate td.syl-select-cell label { padding-top: 0; align-items: center; }

/* Central admin */
.syl-dept-columns { columns: 3; }
.syl-dept-columns li { break-inside: avoid; }
.syl-code-row { display: flex; gap: 2em; }
.syl-code-row > div { flex: 1; }
.syl-settings-value { font-family: monospace; font-size: 0.85em; white-space: pre-wrap; word-break: break-all; max-width: 30em; }
.syl-row-actions { display: flex; gap: 1em; align-items: baseline; }
.syl-row-actions form { margin: 0; }

/* Panels (Canvas tool pages, demo pages): plain and left-aligned, like a
   Canvas page, since Canvas already frames the tool */
.syl-panel { max-width: 44rem; }
.syl-panel-header h2 { margin: 0 0 0.5rem; }
.syl-panel-header .syl-subtext { margin: 0; }
.syl-panel-body { padding: 1.5rem 0; }
.syl-panel-body > .syl-label { margin: 0 0 0.5rem; }
.syl-panel-body table.alternate { margin-bottom: 1.25rem; }
.syl-panel-body table.alternate td:first-child { width: 2.5em; text-align: center; }
.syl-panel-body input[type="radio"] { width: auto; margin: 0; }
.syl-panel-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--syl-line);
}
.syl-panel-footer .btn, .syl-panel-footer button { margin: 0; }

/* Canvas tool: start page options */
.syl-options { display: flex; flex-direction: column; gap: 0.75rem; }
.syl-option { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--syl-line); }
.syl-option-text { flex: 1; }
.syl-option-text strong { display: block; margin-bottom: 0.2em; }
.syl-option-text span { color: var(--syl-muted); }
.syl-option a.btn { flex-shrink: 0; min-width: 6em; margin: 0; text-align: center; }
.syl-warning { color: var(--syl-red); }

/* Canvas tool: linked syllabus details */
.syl-detail { display: flex; gap: 0.75rem; align-items: baseline; margin-bottom: 0.6rem; }
.syl-detail .syl-label { min-width: 9rem; flex-shrink: 0; }

/* Canvas tool: section checklist */
.syl-checklist { border: 1px solid var(--syl-line); }
.syl-checklist > div { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.75rem; }
.syl-checklist > div + div { border-top: 1px solid var(--syl-line); }
.syl-checklist label { display: flex; flex: 1; gap: 0.6rem; align-items: center; margin: 0; font-weight: normal; cursor: pointer; }

/* Demo-mode pages (/dev/login, /dev/launch) */
.syl-demo { max-width: 40rem; }
.syl-demo .syl-panel { max-width: 35rem; }
.syl-demo-buttons { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 1.5em 0; }
.syl-demo-buttons form { margin: 0; }
.syl-demo-custom { display: flex; gap: 0.5em; max-width: 26rem; }
body.syl-web .syl-demo-custom input[type="text"] { flex: 1; margin-bottom: 0; }
.syl-demo-custom button { margin: 0; }
.syl-demo-field { margin-bottom: 1em; }
.syl-demo-field label { display: block; font-weight: 700; margin-bottom: 0.4em; }
.syl-demo-field select { width: 100%; }

/* A web-page syllabus shown on our page (views/syllabus-frame.ejs) */
.syl-syllabus-meta { margin-top: -0.5em; font-weight: 600; }
.syl-syllabus-frame {
  display: block;
  width: 100%;
  height: max(32em, calc(100vh - 12em));
  border: 1px solid var(--syl-line);
  background: #fff;
}