/* 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 Canvas LTI frame) 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 (app.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: bold, on
   their own line (the template leaves them plain). Checkbox labels stay as
   they are. */
body.cmu-app
  label:has(
    + select,
    + textarea,
    + input[type="text"],
    + input[type="email"],
    + input[type="search"],
    + input[type="number"],
    + input[type="date"]
  ),
body.cmu-app fieldset > legend {
  display: block;
  font-weight: 700;
  margin: 0 0 0.35em;
  padding: 0;
}
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;
  }
}
nav#nav li.cmu-account-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.cmu-account-name,
.cmu-account-name:hover {
  cursor: default;
  color: inherit;
}
/* With your photo (cmu-avatar): small and round before your name in the
   roof, larger above it at the top of the menu, as in Workday */
.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-account-name:has(.cmu-avatar) {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4em;
}
nav li.cmu-account-menu .cmu-avatar {
  width: 56px;
  height: 56px;
}

/* 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;
}

/* Page title row: h1 with actions on the right */
.cmu-page-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5em 1em;
}
.cmu-page-title form {
  margin: 0;
}

/* 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 it's picked (hide them with hidden) */
body.cmu-app .cmu-sub-options {
  margin: 0.6em 0 0.9em 1.65em;
}
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;
}
/* 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);
}

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

/* 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);
}
.cmu-dialog-buttons {
  display: flex;
  gap: 0.5em;
  margin: 1.25em 0 0;
}
.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 (app-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;
}

/* 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, as in Cascade's news
   indexes (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-end;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--cmu-line);
}
.cmu-panel-footer .btn,
.cmu-panel-footer button {
  margin: 0;
}