/* cmu-app.css: web-app components for the CMU web template. Load after the
   template CSS and cmu-cms.css, then the app's own stylesheet.

   Body classes: cmu-app on pages with the full CMU chrome, cmu-framed on
   pages shown inside another tool (such as a learning platform) without it. */

/* Pages framed by another tool: no CMU chrome */
body.cmu-framed {
  padding: 1.5rem;
}

/* Forms; see Page Setup and Forms in the docs (forms.html) */
body.cmu-app fieldset > ul {
  list-style-type: none;
  margin: 0;
}
body.cmu-app fieldset > ul > li {
  margin-left: 0;
}
/* A label right before a text box or menu, and a fieldset's legend: on their
   own line, in small gray capitals like cmu-label. Checkbox and radio button
   labels stay as they are, and so does a legend that asks a question (choice
   rows, a question card, matching, sorting, a card sort). */
body.cmu-app
  label:has(
    + select,
    + textarea,
    + input[type="text"],
    + input[type="email"],
    + input[type="search"],
    + input[type="number"],
    + input[type="date"],
    + input[type="datetime-local"]
  ),
body.cmu-app
  fieldset:not(.cmu-choices, .cmu-match, .cmu-question *, .cmu-card-sort *, :has(> .cmu-sort))
  > legend {
  display: block;
  margin: 0 0 0.35em;
  padding: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cmu-muted);
}
/* A legend that asks a question: bold, in sentence case (a question card
   styles its own) */
body.cmu-app
  fieldset:is(.cmu-choices, .cmu-match, :has(> .cmu-sort)):not(.cmu-question *)
  > legend {
  display: block;
  margin: 0 0 0.35em;
  padding: 0;
  font-weight: 700;
}
/* A group: a fieldset whose legend names fields in a row (Size: Width and
   Height). The fields' own labels are quieter, in ordinary case. */
body.cmu-app fieldset .cmu-field-row label {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
body.cmu-app fieldset {
  margin: 0 0 2em 0;
  min-width: 0;
} /* browsers default to min-content, which overflows narrow columns */
body.cmu-app input[type="checkbox"],
body.cmu-app input[type="radio"] {
  max-width: 100%;
  margin-right: 0.5em;
}
body.cmu-app select,
body.cmu-app input[type="text"] {
  width: 100%;
  margin-bottom: 2em;
}
body.cmu-app select.inline,
body.cmu-app input[type="text"].inline {
  width: auto;
  margin-bottom: 0;
}
/* Fields in one row, each with its label above (Width × Height, From and
   To); they wrap onto more lines when the row is too narrow */
body.cmu-app .cmu-field-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75em 1em;
  margin: 0 0 2em;
}
body.cmu-app .cmu-field-row > div {
  flex: 1 1 7em;
  min-width: 0;
}
/* Short fields (numbers, codes) keep to 7em instead of sharing the row */
body.cmu-app .cmu-field-row--short > div {
  flex-grow: 0;
}
/* max-width: the template caps inputs at calc(100% - 6px - .5em), which
   leaves a gap in a border-box cell and pushes the separator off center */
body.cmu-app .cmu-field-row :is(input, select) {
  width: 100%;
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
}
/* A separator (×, to) padded like a text box, so it lines up with the boxes */
body.cmu-app .cmu-field-row > span {
  padding: 0.35em 0;
  border: 1px solid transparent;
  line-height: normal;
}
body.cmu-app .cmu-field-row:has(+ p.cmu-hint) {
  margin-bottom: 0;
}
body.cmu-app .cmu-field-row + p.cmu-hint {
  padding: 0;
  margin: 0.35rem 0 2rem;
}

/* Account: your name (or Sign In) beside the menu button; in the menu, name and Sign Out (or Sign In) */
.roof .cmu-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(--cmu-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 .cmu-account:not(.cmu-account-open) {
  font-weight: 700;
  color: rgba(0, 0, 0, 0.65);
}
.roof .cmu-account:not(.cmu-account-open):hover {
  color: #c00;
}
/* On a red roof (roof red invert), white either way: dark text on red is hard to read */
.roof.invert .cmu-account {
  color: #fff;
}
.roof.invert .cmu-account:hover {
  color: rgba(255, 255, 255, 0.8);
}
/* The name leaves the roof 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 roof, so there it's only in the menu. */
.menu-on .roof .cmu-account {
  display: none;
}
/* With the template's search as well: search, then the account, then the
   menu button. Both join the roof's flex row instead of sitting on top of
   each other at the right. */
.roof > div:has(> .cmu-account) > form.search {
  position: relative;
  right: auto;
  margin-left: auto;
  align-self: stretch;
  height: auto;
}
.roof > div:has(> form.search) > .cmu-account {
  position: static;
  flex: 0 0 auto;
  max-width: 12em;
  margin: 0 3.4em 0 1.25em;
}
@media (max-width: 767px) {
  .roof .cmu-account {
    display: none;
  }
}
/* The account block at the top of the menu: the name, then Preferences and
   Sign Out side by side under it, the photo (if any) on the right, and a rule under it
   that sets it apart from the menu's sections */
nav#nav li.cmu-account-menu {
  position: relative;
  display: block;
  padding: 0.9rem 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}
nav#nav li.cmu-account-menu > a {
  display: inline-block;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  padding-right: 0;
}
nav#nav li.cmu-account-menu > .cmu-account-name {
  display: block;
  padding-bottom: 0.4em;
  font-size: 1.2em;
  font-weight: 700;
}
nav#nav li.cmu-account-menu:has(.cmu-avatar) > a {
  max-width: calc(100% - 56px - 3rem); /* clear of the photo */
}
/* Preferences and Sign Out a step larger than the menu's links. The
   template indents menu links 2em; at these larger sizes, scale it back so
   the name and Preferences line up with the menu */
nav#nav li.cmu-account-menu > .cmu-account-name ~ a {
  margin-right: 0.5em;
  padding-left: 0.4em;
  padding-right: 0.4em;
  font-size: 1.1em;
}
nav#nav li.cmu-account-menu > .cmu-account-name {
  padding-left: calc(2em / 1.2);
}
/* A short line between Preferences and Sign Out, in the gap between them;
   decoration, so screen readers skip it */
nav#nav li.cmu-account-menu > .cmu-account-name ~ a ~ a {
  position: relative;
}
nav#nav li.cmu-account-menu > .cmu-account-name ~ a ~ a::before {
  content: "" / "";
  position: absolute;
  top: 30%;
  bottom: 30%;
  left: -0.3em;
  border-left: 1px solid color-mix(in srgb, currentColor 45%, transparent);
}
/* The indent goes outside Preferences, so its pressed and focus highlight
   sits evenly around the word, as Sign Out's does */
nav#nav li.cmu-account-menu > .cmu-account-name + a {
  margin-left: calc(2em / 1.1 - 0.4em);
}
.cmu-account-name,
.cmu-account-name:hover {
  cursor: default;
  color: inherit;
}
/* The signed-in user's photo (cmu-avatar): small and round before their
   name in the roof, larger on the right of the menu's account block */
.cmu-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.roof .cmu-account .cmu-avatar {
  margin-right: 0.5em;
}
nav li.cmu-account-menu .cmu-avatar {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  width: 56px;
  height: 56px;
  transform: translateY(-50%);
}

/* Tabs: the one you're on is red and underlined, like the active nav tab */
.cmu-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75em;
  margin: 0 0 1.75em;
  border-bottom: 1px solid var(--cmu-line);
}
#content .cmu-tabs a,
#content .cmu-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(--cmu-ink);
  font-weight: 600;
}
#content .cmu-tabs a:hover {
  color: var(--cmu-red);
}
#content .cmu-tabs a[aria-current="page"] {
  color: var(--cmu-red);
  border-bottom-color: var(--cmu-red);
}
/* Folded tabs (a cmu-more inside the tabs), like a folded list: a "2 More"
   cta at the end of the first row (the details box itself drops out of the
   layout); opened, the rest wrap onto the next line and it says Show Fewer */
.cmu-tabs-more {
  display: contents;
}
/* Newer browsers wrap a details' contents in ::details-content, which would
   keep the folded tabs off the tabs' row; take it out of the layout too, and
   hide the folded tabs ourselves while closed */
.cmu-tabs-more::details-content {
  display: contents;
}
.cmu-tabs-more:not([open]) > div {
  display: none;
}
.cmu-tabs-more summary {
  margin: 0;
  padding: 0.2em 0 0;
  line-height: 2.2;
}
.cmu-tabs-more > div {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75em;
}

/* Small text */
.cmu-muted,
.cmu-hint {
  color: var(--cmu-muted);
}
.cmu-hint {
  font-size: 0.85em;
}
/* A hint right under its field: the template's space below the field moves
   below the hint, and the template's padding on every <p> goes */
body.cmu-app :is(input, select, textarea):has(+ p.cmu-hint) {
  margin-bottom: 0;
}
body.cmu-app :is(input, select, textarea, fieldset > ul) + p.cmu-hint {
  padding: 0;
  margin: 0.35rem 0 2rem;
}
body.cmu-app fieldset > ul + p.cmu-hint:last-child,
body.cmu-app fieldset > p.cmu-hint:last-child {
  margin-bottom: 0;
}
/* Options that belong to one choice: inside its list item, lined up with
   its label, shown only while its radio button or checkbox is picked */
body.cmu-app .cmu-sub-options {
  margin: 0.6em 0 0.9em 1.65em;
}
body.cmu-app
  li:has(> input:is([type="radio"], [type="checkbox"]):not(:checked))
  > .cmu-sub-options {
  display: none;
}
body.cmu-app .cmu-sub-options :is(select, input[type="text"]) {
  margin-bottom: 0.75em;
}
body.cmu-app .cmu-sub-options > ul {
  list-style-type: none;
  margin: 0;
}
body.cmu-app .cmu-sub-options > ul > li {
  margin-left: 0;
}
body.cmu-app .cmu-sub-options > ul + p.cmu-hint {
  padding: 0;
  margin: 0.35rem 0 0;
}
/* Choice rows: each radio button or checkbox with its label in a large row,
   the whole row a target, for a question with a few answers; see Choice Rows
   in the docs (forms.html) */
.cmu-choices ul {
  margin: 0;
  padding: 0;
}
.cmu-choices li {
  list-style: none;
  margin: 0 0 0.6em;
  padding: 0;
}
body.cmu-app .cmu-choices label {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin: 0;
  padding: 0.85em 1em;
  border: 1px solid var(--cmu-line);
  background: #fff;
  font-weight: 400;
  cursor: pointer;
}
body.cmu-app .cmu-choices input {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  margin: 0;
}
.cmu-choices label:hover {
  background: var(--cmu-tint);
}
.cmu-choices label:has(:checked) {
  border-color: var(--cmu-red);
  background: var(--cmu-red-tint);
}
/* Inside the row, so a list or box around it doesn't clip the ring */
.cmu-choices label:has(:focus-visible) {
  outline: 2px solid var(--cmu-red);
  outline-offset: -3px;
}
/* A question card: one question and its choice rows on a white card, with a
   rule under the question; put it in a colored band. Its buttons: back on
   the left, forward (Next, or Submit on the last question) on the right */
.cmu-question {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2em 2.5em;
  background: #fff;
  color: var(--cmu-ink);
}
body.cmu-app .cmu-question legend {
  width: 100%;
  margin-bottom: 1.25em;
  padding-bottom: 1em;
  border-bottom: 1px solid var(--cmu-ink);
  font-size: 1.1em;
  font-weight: 400;
}
body.cmu-app .cmu-question fieldset {
  margin-bottom: 0.75rem;
}
.cmu-question > :last-child {
  margin-bottom: 0;
}
/* Three columns: the back arrow on the left, the forward arrow on the
   right and Submit, on the last question, centered, away from where people
   have been clicking forward */
.cmu-question-buttons {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cmu-line);
}
.cmu-question-buttons > .cmu-question-back {
  grid-column: 1;
  justify-self: start;
}
.cmu-question-buttons > [type="submit"] {
  grid-column: 2;
}
.cmu-question-buttons > :not(.cmu-question-back, [type="submit"]) {
  grid-column: 3;
  justify-self: end;
}
@media (max-width: 767px) {
  .cmu-question {
    padding: 1.25em;
  }
}

/* Matching: each item and a menu of answers beside it, drawn as two puzzle
   pieces: the item has a socket on its right, the menu a tab on its left.
   Once an answer is picked, the pieces snap together. Under 600px the menu
   goes under its item, without the puzzle shapes. See Matching in the docs
   (forms.html) */
.cmu-match ul {
  margin: 0;
  padding: 0;
}
.cmu-match li {
  --cmu-piece: #e4909c; /* the pieces' colored ends, red once matched */
  list-style: none;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 2.5em;
  margin: 0 0 1em;
  padding: 0;
  transition: column-gap 0.2s;
}
.cmu-match li:has(option:checked:not([value=""])) {
  --cmu-piece: var(--cmu-red);
  column-gap: 0;
}
body.cmu-app .cmu-match li > label,
body.cmu-app .cmu-match li > select {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 4.5em;
  margin: 0;
  border: 1px solid var(--cmu-line);
  background-color: #fff;
}
body.cmu-app .cmu-match li > label {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.75em 1.75em 0.75em 1em;
  border-left: 1.25em solid var(--cmu-piece);
  font-weight: 400;
}
body.cmu-app .cmu-match li > select {
  padding: 0.75em 1em 0.75em 1.75em;
  border-right: 1.25em solid var(--cmu-piece);
}
/* The socket: a half circle cut into the item's right edge */
.cmu-match label::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1px;
  box-sizing: border-box;
  width: 0.9em;
  height: 1.8em;
  margin-top: -0.9em;
  border: 1px solid var(--cmu-line);
  border-right: 0;
  border-radius: 0.9em 0 0 0.9em;
  background: #fff;
}
/* The tab: a half circle on the menu's left edge, into the socket */
.cmu-match li::after {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(50% + 1.25em - 0.9em);
  box-sizing: border-box;
  width: calc(0.9em + 1px); /* over the menu's left border */
  height: 1.8em;
  margin-top: -0.9em;
  border: 1px solid var(--cmu-line);
  border-right: 0;
  border-radius: 0.9em 0 0 0.9em;
  background: #fff;
  pointer-events: none;
  transition: left 0.2s;
}
.cmu-match li:has(option:checked:not([value=""]))::after {
  left: calc(50% - 0.9em);
}
@media (max-width: 600px) {
  .cmu-match li,
  .cmu-match li:has(option:checked:not([value=""])) {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
  }
  .cmu-match label::after,
  .cmu-match li::after {
    display: none;
  }
  body.cmu-app .cmu-match li > label {
    min-height: 0;
    border-bottom: 0;
  }
  body.cmu-app .cmu-match li > select {
    min-height: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cmu-match li,
  .cmu-match li::after {
    transition: none;
  }
}

/* Card sort: each card, a white card with its words, gets one of a few
   groups, picked from large tiles under it (radio buttons). See Card Sort
   in the docs (forms.html) */
/* Cards up to 20rem wide, centered when they don't fill the row */
.cmu-card-sort {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 20rem));
  justify-content: center;
  gap: 1.5em;
}
/* Cards in a row are the same height, with the tiles at the bottom */
body.cmu-app .cmu-card-sort > fieldset {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 2em 1.5em 1.5em;
  border: 0;
  background: #fff;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  text-align: center;
}
/* The card's words: the fieldset's legend, inside the card */
body.cmu-app .cmu-card-sort > fieldset > legend {
  float: left;
  width: 100%;
  margin: 0 0 1.75em;
  font-size: 1.15em;
  line-height: 1.45;
}
body.cmu-app .cmu-card-sort > fieldset > ul {
  clear: both;
  display: grid;
  gap: 0.75em;
  margin: auto 0 0;
  padding: 0;
}
body.cmu-app .cmu-card-sort > fieldset > ul > li {
  margin: 0;
  padding: 0;
}
body.cmu-app .cmu-card-sort label {
  position: relative;
  display: block;
  margin: 0;
  padding: 1.5em 1em;
  background: var(--cmu-tint);
  color: var(--cmu-ink);
  font-weight: 700;
  cursor: pointer;
}
/* The radio button stays in the tile for keyboards, out of sight */
body.cmu-app .cmu-card-sort input {
  position: absolute;
  opacity: 0;
}
body.cmu-app .cmu-card-sort label:hover {
  background: var(--cmu-gray-tint);
}
body.cmu-app .cmu-card-sort label:has(:checked) {
  background: var(--cmu-red);
  color: #fff;
}
body.cmu-app .cmu-card-sort label:has(:focus-visible) {
  outline: 2px solid var(--cmu-ink);
  outline-offset: 2px;
}

/* Sorting (needs cmu-app.js): an ordered list people put in order with up and
   down arrow buttons the script adds to each item, numbered in red. See Sorting in
   the docs (forms.html) */
ol.cmu-sort {
  counter-reset: cmu-sort;
  list-style: none;
  margin: 0;
  padding: 0;
}
ol.cmu-sort > li {
  counter-increment: cmu-sort;
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin: 0 0 0.6em;
  padding: 0.6em 0.75em 0.6em 1em;
  border: 1px solid var(--cmu-line);
  background: #fff;
}
ol.cmu-sort > li::before {
  content: counter(cmu-sort);
  flex: none;
  min-width: 1.25em;
  color: var(--cmu-red);
  font-weight: 700;
}
.cmu-sort-moves {
  display: flex;
  flex: none;
  gap: 0.4em;
  margin-left: auto;
}
.cmu-sort-moves .btn {
  margin: 0;
}
/* The first item can't go up, and the last can't go down */
.cmu-sort-moves .btn:disabled {
  opacity: 0.35;
  cursor: default;
}

/* A short note beside a button, centered on it; wraps under it when narrow */
.cmu-button-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em 1em;
  margin: 0 0 1.5em;
}
.cmu-button-note > * {
  margin: 0;
}
.cmu-button-note > p {
  padding: 0;
}
/* Right under a photo, it acts on that photo: close to it, room after */
figure.image:has(+ .cmu-button-note) {
  padding-bottom: 0.75rem;
}
.cmu-empty {
  text-align: center;
  color: var(--cmu-muted);
  padding: 1.25em;
}
/* Codes (departments, course numbers) kept on one line */
.cmu-code {
  white-space: nowrap;
}

/* Acting as another user (an admin seeing the app as someone else): a thick
   frame around the window and a bar fixed along its bottom edge, both in
   the template's teal, so the session is never mistaken for your own. Put
   cmu-acting-as on <body> and the bar anywhere inside it. (Fixed, not
   sticky: on wide screens the template makes <body> one window tall.) */
:root {
  --cmu-acting: #008285;
}
body.cmu-acting-as {
  padding-bottom: 4.5em;
}
body.cmu-acting-as::after {
  content: "";
  position: fixed;
  inset: 0;
  border: 6px solid var(--cmu-acting);
  pointer-events: none;
  z-index: 2000;
}
body.cmu-acting-as .cmu-acting-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1999;
}
.cmu-acting-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5em 1.25em;
  margin: 0;
  padding: 0.6em 1em;
  background: var(--cmu-acting);
  color: #fff;
  font-weight: 700;
  text-align: center;
}
.cmu-acting-bar p {
  margin: 0;
  padding: 0;
}
.cmu-acting-bar .btn.ghost {
  margin: 0;
  color: #fff;
  border-color: #fff;
}
.cmu-acting-bar .btn.ghost:hover {
  background: rgba(0, 0, 0, 0.25);
}
body.cmu-acting-as .scrolltop {
  bottom: 5em;
}
@media (max-width: 600px) {
  body.cmu-acting-as {
    padding-bottom: 7em;
  }
}

/* Flash messages: the result of what someone just did, shown once. Standing
   announcements are the template's own color bands instead. */
.cmu-flash {
  margin: 1em 0;
  border-left: 4px solid;
}
/* Equal padding even on a p (see .cmu-note in cmu-cms.css) */
:is(#content, body) .cmu-flash {
  padding: 0.75em 1em;
}
.cmu-flash--error {
  background: var(--cmu-red-tint);
  color: var(--cmu-red);
}
.cmu-flash--success {
  background: var(--cmu-green-tint);
  color: var(--cmu-green);
}
.cmu-flash--notice {
  background: var(--cmu-amber-tint);
  border-color: var(--cmu-gold);
  color: var(--cmu-amber);
}

/* A <button class="btn"> where a form needs one, such as a sign-in that
   must POST: wide fills its line, as a.btn.wide does, and in a heading
   (<h4> on a red box) it takes the heading's type, as a link would */
button.btn.wide {
  display: block;
  width: 100%;
}
:is(h1, h2, h3, h4, h5, h6) button.btn {
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* Buttons that look like links (POST actions next to plain links): the
   template's link color and its 1px rule, with line-height: normal so the
   rule sits where a link's does */
.cmu-link-button {
  background: none;
  border: 0;
  border-bottom: 1px solid;
  padding: 0 0 1px;
  margin: 0;
  font: inherit;
  line-height: normal;
  color: var(--cmu-link);
  text-align: left;
  cursor: pointer;
  transition:
    color 0.3s,
    border-color 0.3s;
}
.cmu-link-button:hover {
  background: none;
  color: var(--cmu-link-hover);
}
.invert .cmu-link-button {
  color: inherit;
}

/* Dialog (<dialog>), with a file drop zone and buttons at the bottom */
.cmu-dialog {
  width: min(32em, calc(100vw - 2em));
  box-sizing: border-box;
  padding: 1.5em;
  border: 1px solid var(--cmu-line);
  background: #fff;
  color: var(--cmu-ink);
}
/* Page rules such as "last child has no bottom margin" would pull it off center */
.cmu-dialog:modal {
  margin: auto;
}
.cmu-dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}
/* A box's closing buttons (dialog, framed panel, question card) sit under a
   rule: it says they finish the whole box. Loose buttons in a page get none. */
.cmu-dialog-buttons {
  display: flex;
  gap: 0.5em;
  margin: 1.25em 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--cmu-line);
}
.cmu-dialog-buttons .btn {
  margin: 0;
}
.cmu-drop {
  position: relative;
  display: block;
  margin: 1em 0 0.5em;
  padding: 1.75em 1em;
  border: 2px dashed var(--cmu-line);
  text-align: center;
  cursor: pointer;
}
/* The real file input stays focusable for keyboards but out of sight */
.cmu-drop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  opacity: 0;
}
.cmu-drop-pick {
  color: var(--cmu-red);
  text-decoration: underline;
}
.cmu-drop-over,
.cmu-drop:focus-within {
  border-color: var(--cmu-ink);
  background: #f6f7f8;
}
.cmu-drop-has-file {
  border-style: solid;
}
.cmu-drop-file {
  display: block;
  margin-top: 0.5em;
  font-weight: 700;
  word-break: break-all;
}

/* Progress: a headline number and bars */
.cmu-stat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25em;
  margin: 1em 0;
  padding: 1em 1.25em;
  border: 1px solid var(--cmu-line);
}
.cmu-stat-value {
  font-size: 1.5em;
  font-weight: 700;
}
.cmu-stat-sub {
  font-size: 0.85em;
  color: var(--cmu-muted);
}
.cmu-stat > .cmu-meter {
  flex: 1;
  height: 12px;
}
/* Divs, not spans: the template script strips style="" from spans */
.cmu-meter {
  display: inline-block;
  vertical-align: middle;
  width: 8em;
  height: 10px;
  background: #e8eaec;
}
.cmu-meter > div {
  display: block;
  height: 100%;
  background: var(--cmu-green-fill);
}
.cmu-pct {
  font-weight: 700;
  vertical-align: middle;
  margin-left: 0.5em;
}
.cmu-pct--high {
  color: var(--cmu-green);
}
.cmu-pct--mid {
  color: var(--cmu-amber);
}
.cmu-pct--low {
  color: var(--cmu-red);
}
/* Per-item rows under the headline */
.cmu-breakdown {
  flex-basis: 100%;
  list-style: none;
  margin: 0.5em 0 0;
  padding: 0.75em 0 0;
  border-top: 1px solid var(--cmu-line);
}
.cmu-breakdown li {
  display: flex;
  align-items: center;
  gap: 0.75em;
  margin: 0.35em 0;
}
.cmu-breakdown .cmu-code {
  min-width: 4em;
}
.cmu-breakdown .cmu-pct {
  margin: 0;
  min-width: 3em;
}
/* More rows folded under a breakdown, in a details.cmu-more; see Progress in
   the docs (messages.html) */
.cmu-breakdown-more {
  flex-basis: 100%;
  margin-top: 0.5em;
  padding-top: 0.75em;
  border-top: 1px solid var(--cmu-line);
}
.cmu-breakdown-more .cmu-breakdown {
  border-top: 0;
}

/* A meter across its whole box, and white on a colored box (invert) */
.cmu-meter--full {
  display: block;
  width: 100%;
}
.invert .cmu-meter {
  background: rgba(255, 255, 255, 0.35);
}
.invert .cmu-meter > div {
  background: #fff;
}
/* In a sidebar box, a meter is a bar, not one of the template's padded boxes */
.content .sidebar .cmu-meter,
.content .sidebar .cmu-meter > div {
  margin: 0;
  padding: 0;
}
/* A label on a colored box takes the box's white */
.invert .cmu-label {
  color: inherit;
}

/* Course outline: the parts of a course or task in order, each done, current or not
   started, with a marker on the right; see Course Outline in the docs
   (messages.html) */
.cmu-outline {
  list-style: none;
  margin: 0 0 1.5em;
  padding: 0;
  border-top: 1px solid var(--cmu-line);
}
.cmu-outline > li {
  position: relative;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--cmu-line);
  border-left: 4px solid transparent;
}
:is(#content, body) .cmu-outline > li > a:not(.btn):not(.cta):not(.box):not(.scrolldown),
.cmu-outline > li > span {
  display: block;
  padding: 1em 3em 1em 1em;
  border: 0;
  color: var(--cmu-ink);
}
:is(#content, body) .cmu-outline > li > a:not(.btn):not(.cta):not(.box):not(.scrolldown):hover {
  background: var(--cmu-tint);
}
.cmu-outline > li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1em;
  box-sizing: border-box;
  width: 1.15em;
  height: 1.15em;
  margin-top: -0.575em;
  border: 2px solid #b9bfc5;
  border-radius: 50%;
}
.cmu-outline > li.cmu-outline-current {
  border-left-color: var(--cmu-red);
  font-weight: 700;
}
.cmu-outline > li.cmu-outline-current::after {
  border-color: var(--cmu-red);
  border-right-color: transparent;
}
.cmu-outline > li.cmu-outline-done::after {
  border-color: var(--cmu-red);
  background: var(--cmu-red)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 80% no-repeat;
}

/* Folded long lists (<details class="cmu-more">): the summary reads as a
   line of text ending in a template cta, the count of what's hidden ("6
   More") or Show Fewer (cmu-more-closed / cmu-more-open). A plain space in
   the markup separates the text and the cta. */
.cmu-more summary {
  cursor: pointer;
  list-style: none;
  color: var(--cmu-muted);
}
.cmu-more summary::-webkit-details-marker {
  display: none;
}
.cmu-more summary:hover .cta {
  color: var(--cmu-red);
}
.cmu-more .cmu-more-open,
.cmu-more[open] .cmu-more-closed {
  display: none;
}
.cmu-more[open] .cmu-more-open {
  display: inline;
}

/* Long results: a count under the list, then either Load More or a pager.
   Load More is a ghost btn half the width of the page, like the template's
   .loadmore; full width on phones. */
.cmu-results-count {
  text-align: center;
  color: var(--cmu-muted);
  margin: 1.5em 0 0;
}
.cmu-load-more {
  text-align: center;
  margin: 0.75em 0 0;
}
.cmu-load-more .btn {
  display: block;
  width: 50%;
  margin: 0 auto;
}
/* Pager (<div class="cmu-pager" role="navigation">; not <nav>, whose links
   the template strips of borders): one list of first, previous, the page
   numbers, next and last. The current page has aria-current="page"; an
   arrow that goes nowhere has no href and aria-disabled="true". On phones
   the first and last arrows (cmu-pager-end) give way to the numbers. */
.cmu-pager {
  margin: 0.75em 0 0;
}
.cmu-pager ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.25em;
}
/* (#content: the template indents an ol's 10th item on, for two-digit numbers) */
#content .cmu-pager li {
  margin: 0;
  padding: 0;
}
#content .cmu-pager a,
.cmu-pager span {
  display: block;
  box-sizing: border-box;
  min-width: 2.25em;
  padding: 0.3em 0.35em;
  text-align: center;
  line-height: 1.5;
  border: 1px solid transparent;
  border-radius: 2px;
  text-decoration: none;
}
#content .cmu-pager a[href]:hover {
  border-color: var(--cmu-line);
}
#content .cmu-pager a[aria-current="page"] {
  background: var(--cmu-red);
  border-color: var(--cmu-red);
  color: #fff;
  font-weight: 700;
}
#content .cmu-pager a[aria-disabled="true"] {
  color: var(--cmu-muted);
  opacity: 0.45;
  cursor: default;
}
.cmu-pager .cmu-pager-arrow {
  font-weight: 700;
}
.cmu-pager span {
  color: var(--cmu-muted);
}
@media (max-width: 600px) {
  .cmu-pager .cmu-pager-end {
    display: none;
  }
  .cmu-pager ol {
    gap: 0.1em;
  }
  #content .cmu-pager a,
  .cmu-pager span {
    min-width: 1.9em;
    padding: 0.3em 0.15em;
  }
  .cmu-load-more .btn {
    width: 100%;
  }
}

/* Tables: the template's table.alternate (cells centered vertically in
   cmu-cms.css), plus numeric and fitted columns. */
table.alternate th.num,
table.alternate td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.cmu-fit {
  width: 1%;
  white-space: nowrap;
}
/* Sortable headers: the header text is the button */
th[data-sort-key] .cmu-sort {
  all: unset;
  cursor: pointer;
  font-weight: inherit;
  white-space: nowrap;
}
th[data-sort-key] .cmu-sort:hover {
  color: #c00;
}
th[data-sort-key] .cmu-sort:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
th[aria-sort] .cmu-sort {
  color: #c00;
}
.cmu-sort-arrow {
  font-size: 0.7em;
  vertical-align: 0.15em;
}
/* Row checkbox: the whole cell is its click target. The label fills the
   cell, so it has no width of its own to hold the column open: the side
   padding plus min-width (the box) do that. */
table .cmu-select-cell {
  position: relative;
  padding: 0 0.85em;
  text-align: center;
  vertical-align: top;
  min-width: 1.15em;
}
.cmu-select-cell label {
  position: absolute;
  inset: 0;
  padding-top: 0.6em;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.cmu-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 */
/* beats body.cmu-app's margin-right on checkboxes */
table .cmu-select-cell label input[type="checkbox"] {
  margin: 0;
}
#content table.alternate td.cmu-select-cell label {
  padding-top: 0;
  align-items: center;
}

/* Filter rows above a list */
/* Search over a list: a sentence saying what you can search by, then a
   full-width box whose <label> is for screen readers (sr-only) */
.cmu-search-bar {
  margin-bottom: 0.5em;
}
.cmu-search-bar p {
  margin: 0 0 0.5em;
}
.cmu-search-bar input[type="text"],
body.cmu-app .cmu-search-bar input[type="text"] {
  width: 100%;
  margin-bottom: 0;
}

/* People list: a small round headshot beside each name and title, as on
   CMU's experts page. Pair it with filters for a long list. */
#content .cmu-people,
.cmu-people {
  list-style: none;
  margin: 0 0 1.5em;
  padding: 0;
}
#content .cmu-people > li {
  display: flex;
  align-items: center;
  gap: 1em;
  margin: 0;
  padding: 0.75em 0;
  border-top: 1px solid var(--cmu-line);
}
.cmu-people img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.cmu-people p + p {
  color: var(--cmu-muted);
  font-size: 0.9em;
}

/* Groups line up at the top, so their labels share one line; checkboxes
   sit level with a text box beside them (its height, centered) */
.cmu-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1em 1.5em;
  margin-bottom: 1em;
}
.cmu-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}
body.cmu-app .cmu-filter-group > .cmu-label {
  margin: 0;
} /* beats the form label rule above */
.cmu-filter-checks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75em;
  min-height: 2.2em;
}
.cmu-filter-checks label {
  display: flex;
  align-items: center;
  gap: 0.25em;
}
body.cmu-app .cmu-filter-group input[type="text"] {
  min-width: 15em;
  margin: 0;
}

/* Bulk bar: a tinted band on top of a table, the selection count then the
   actions. Its height is fixed so buttons appearing don't nudge the table. */
.cmu-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(--cmu-tint);
  border: 1px solid var(--cmu-line);
  border-bottom: 0;
}
.cmu-bulk-bar .cmu-selection-count {
  color: var(--cmu-muted);
  margin-right: 0.5em;
}
.cmu-bulk-bar .cmu-selection-count.cmu-has-selection {
  color: var(--cmu-ink);
  font-weight: 600;
}
.cmu-bulk-bar .btn {
  margin: 0;
}
/* The template gives tables a top margin; the bar sits right on the table */
#content .cmu-bulk-bar + table,
#content .cmu-bulk-bar + * table:first-child {
  margin-top: 0;
}

/* Row buttons: the bulk bar's small buttons in a table cell, one fixed
   width alone or in a pair, as tall as a two-line button (2 lines, padding,
   border) so rows don't change height with the label. Keep two-word
   phrases together with &nbsp;. */
.cmu-row-buttons {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 8.5em;
  justify-content: start;
  gap: 0.4em;
}
.cmu-row-buttons form {
  margin: 0;
}
.cmu-row-buttons .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  min-height: calc(3.2em + 4px);
  margin: 0;
  text-align: center;
  white-space: normal;
}
/* Line height for wrapped labels (the template's is 1, with an id
   selector); slimmer sides so short labels fit on one line */
#content .cmu-row-buttons .btn {
  line-height: 1.25;
  padding-left: 0.25em;
  padding-right: 0.25em;
}
/* Below 1200px a wide table has no room: pills may wrap, and a pair stacks,
   each label on one line */
@media (max-width: 1199px) {
  td .cmu-pill {
    white-space: normal;
  }
  .cmu-row-buttons {
    grid-auto-flow: row;
    grid-auto-columns: auto;
  }
  td .cmu-row-buttons .btn {
    white-space: nowrap;
    min-height: 0;
  }
}

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