/* cmu-cms.css: content components for pages built on the CMU web template
   (www.cmu.edu/common/standard-v6). For CMS sites and apps alike; apps add
   cmu-app.css on top.

   Rules: link the template's own CSS (main.6.7.min.css) and use its classes
   as they are (a.btn, .btn.ghost, a.cta, table.alternate, .sr-only). Never
   copy its rules or values. Add a cmu-* class only where the template has
   nothing. */

/* The hidden attribute always hides, even where a kit or template rule sets
   display (such as a bold form label) */
[hidden] {
  display: none !important;
}

:root {
  --cmu-red: #c41230;
  --cmu-ink: #22262a;
  --cmu-muted: #5b6670;
  --cmu-line: #d9dde1;
  --cmu-tint: #f4f5f6;
  --cmu-green: #1d5a3a;
  --cmu-green-fill: #00853e;
  --cmu-green-tint: #e3f1ea;
  --cmu-amber: #6b4d00;
  --cmu-amber-tint: #fff4d6;
  --cmu-gold: #fdb515;
  --cmu-gray: #4a535b;
  --cmu-gray-tint: #eceef0;
  --cmu-red-tint: #fdf2f3;
  --cmu-blue: #043673; /* the template's blue */
  --cmu-link: #941120; /* the template's link color */
  --cmu-link-hover: #f00;
  --cmu-blue-tint: #e9eff7;
  /* Checkboxes, radio buttons, sliders and progress bars in CMU red instead
     of the browser's blue */
  accent-color: var(--cmu-red);
}

/* Small capitals: eyebrow (red, above a heading), label (gray) */
.cmu-eyebrow {
  margin: 0 0 0.5rem;
  /* The template pads paragraphs; an eyebrow sits right on its heading. */
  padding-bottom: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cmu-red);
}
.cmu-eyebrow + h1,
.cmu-eyebrow + h2,
.cmu-eyebrow + h3 {
  margin-top: 0;
  padding-top: 0;
}
.cmu-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cmu-muted);
}
/* A block label sits just above what it labels, whatever that is: a
   paragraph, a list, a field or a code block. The template pads both. (A
   span label sits beside its controls instead.) */
:is(p, div, legend).cmu-label {
  margin-bottom: 0.5rem;
  padding-bottom: 0;
}
:is(p, div, legend).cmu-label + * {
  margin-top: 0;
  padding-top: 0;
}
.cmu-lead {
  font-size: 1.2rem;
  line-height: 1.55;
  max-width: 44em;
  margin: 0 0 1.75rem;
}
/* A button with a call to action beside it: a cmu-cta-row, or any paragraph
   that holds a button and then a call to action. (Not any div: a card's div
   holds its heading and text too.) */
.cmu-cta-row,
p:has(> .btn + .cta) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
}
.cmu-cta-row {
  margin: 0 0 2.5rem;
}
.cmu-cta-row .btn,
p:has(> .btn + .cta) > .btn {
  margin: 0;
}
.cmu-cta-note {
  margin: 0;
  color: var(--cmu-muted);
  font-size: 0.95rem;
}

/* Hero card: copy on the left, a screenshot in a browser frame on the right */
.cmu-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 2.5rem;
  align-items: center;
  margin: 0 0 3.5rem;
  padding: 3rem 2.5rem;
  background:
    linear-gradient(135deg, rgba(196, 18, 48, 0.06) 0%, rgba(23, 44, 75, 0.06) 100%),
    var(--cmu-tint);
  border-top: 6px solid var(--cmu-red);
}
.cmu-hero h1 {
  font-size: clamp(2.2rem, 4.6vw, 3.3rem);
  letter-spacing: -0.01em;
}
/* A heading right after a hero, in the same block, starts a new section:
   leave what two sections' padding would (as when the hero is its own
   section), not the hero's margin plus the template's heading padding */
:is(#content, body) .cmu-hero:has(+ :is(h1, h2)) {
  margin-bottom: 4rem;
}
:is(#content, body) .cmu-hero + :is(h1, h2) {
  padding-top: 0;
}
.cmu-hero .cmu-cta-row {
  margin-bottom: 0.9rem;
}
.cmu-hero .cmu-cta-row:last-child {
  margin-bottom: 0;
}
.cmu-hero-art {
  position: relative;
  min-width: 0;
}
.cmu-hero-art img {
  display: block;
  box-sizing: border-box; /* the border fits inside the window's width */
  border: 1px solid var(--cmu-line);
  border-top: 0;
  box-shadow: 0 18px 40px rgba(23, 44, 75, 0.16);
}
.cmu-hero-art::before,
.cmu-shot--browser::before {
  /* browser-window bar with three dots */
  content: "";
  display: block;
  height: 1.6rem;
  background:
    radial-gradient(circle, #b9bfc5 0.28rem, transparent 0.3rem) 0.7rem 50% / 0.9rem 0.9rem
      no-repeat,
    radial-gradient(circle, #b9bfc5 0.28rem, transparent 0.3rem) 1.6rem 50% / 0.9rem 0.9rem
      no-repeat,
    radial-gradient(circle, #b9bfc5 0.28rem, transparent 0.3rem) 2.5rem 50% / 0.9rem 0.9rem
      no-repeat,
    #e4e7ea;
  border: 1px solid var(--cmu-line);
  border-bottom: 0;
}
/* Two or three screenshots, overlapping down and to the right, cropped to
   one shape from the top; the last is in front */
.cmu-hero-art--stack {
  display: grid;
}
.cmu-hero-art--stack::before {
  display: none;
}
/* Each image, or a link around it (such as to enlarge it), is one window */
.cmu-hero-art--stack > * {
  grid-area: 1 / 1;
  width: 66%;
}
:is(#content, body) .cmu-hero-art--stack > a:not(.btn):not(.cta):not(.box):not(.scrolldown) {
  display: block;
  padding: 0;
  border: 0;
}
.cmu-hero-art--stack > a img {
  width: 100%;
}
/* Each window draws its own bar, with the dots, in its top padding */
.cmu-hero-art--stack img {
  box-sizing: content-box;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: left top; /* keep the roof and the start of each line */
  padding-top: 1.6rem;
  border-top: 1px solid var(--cmu-line);
  background:
    radial-gradient(circle, #b9bfc5 0.28rem, transparent 0.3rem) 0.7rem 0.35rem / 0.9rem 0.9rem
      no-repeat,
    radial-gradient(circle, #b9bfc5 0.28rem, transparent 0.3rem) 1.6rem 0.35rem / 0.9rem 0.9rem
      no-repeat,
    radial-gradient(circle, #b9bfc5 0.28rem, transparent 0.3rem) 2.5rem 0.35rem / 0.9rem 0.9rem
      no-repeat,
    #e4e7ea;
}
.cmu-hero-art--stack > :nth-child(2) {
  margin: 17% 0 0 17%;
}
/* The third, or the second of two, goes all the way to the right */
.cmu-hero-art--stack > :nth-child(3),
.cmu-hero-art--stack > :nth-child(2):last-child {
  margin: 34% 0 0 34%;
}
/* A photo or a tartan pattern file, with no browser frame */
.cmu-hero-art--plain::before {
  display: none;
}
.cmu-hero-art--plain img {
  border: 0;
  box-shadow: none;
  width: 100%;
}
@media (max-width: 820px) {
  .cmu-hero {
    grid-template-columns: 1fr;
    padding: 2rem 1.25rem;
  }
}

/* Card links: one per audience or option */
.cmu-paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1.25rem;
  margin: 0 0 3.5rem;
}
.cmu-paths--two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin-bottom: 2.75rem;
}
a.cmu-path,
a.cmu-path:link,
a.cmu-path:visited {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.6rem 1.5rem 1.9rem !important; /* beats #content a { padding-bottom: 1px } */
  background: #fff;
  border: 1px solid var(--cmu-line) !important;
  color: var(--cmu-ink) !important;
  text-decoration: none !important;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.15s;
}
a.cmu-path strong {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.25;
}
a.cmu-path .cmu-eyebrow {
  margin: 0;
  color: var(--cmu-muted);
}
a.cmu-path .cta {
  margin-top: auto;
}
a.cmu-path:hover,
a.cmu-path:focus-visible {
  border-color: var(--cmu-red) !important;
  box-shadow: 0 8px 22px rgba(23, 44, 75, 0.12);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  a.cmu-path {
    transition: none;
  }
  a.cmu-path:hover {
    transform: none;
  }
}

/* How it works: numbered columns */
ol.cmu-flow {
  counter-reset: cmu-flow;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 1.5rem;
  margin: 0 0 3.5rem;
  padding: 0;
}
ol.cmu-flow > li {
  counter-increment: cmu-flow;
  position: relative;
  padding-top: 3.4rem;
  line-height: 1.55;
}
ol.cmu-flow > li::before {
  content: counter(cmu-flow);
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--cmu-red);
  border-radius: 50%;
  color: var(--cmu-red);
  font-weight: 700;
  font-size: 1.1rem;
}
ol.cmu-flow > li > strong {
  display: block;
  font-size: 1.15rem;
  margin-bottom: 0.25rem;
}

/* Callout: a labeled aside on a page (cmu-label, then text beside it) */
.cmu-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1.5rem;
  margin: 0 0 3.5rem;
  padding: 1.4rem 1.75rem;
  background: var(--cmu-tint);
  border-left: 4px solid var(--cmu-line);
}
.cmu-callout p {
  margin: 0;
  padding: 0;
}
/* Colors, for what kind of aside it is: blue for a note, green for a tip,
   gold for a warning, red for a caution. The label takes the color too. */
.cmu-callout--blue {
  background: var(--cmu-blue-tint);
  border-left-color: var(--cmu-blue);
}
.cmu-callout--green {
  background: var(--cmu-green-tint);
  border-left-color: var(--cmu-green-fill);
}
.cmu-callout--gold {
  background: var(--cmu-amber-tint);
  border-left-color: var(--cmu-gold);
}
.cmu-callout--red {
  background: var(--cmu-red-tint);
  border-left-color: var(--cmu-red);
}
.cmu-callout--blue .cmu-label {
  color: var(--cmu-blue);
}
.cmu-callout--green .cmu-label {
  color: var(--cmu-green);
}
.cmu-callout--gold .cmu-label {
  color: var(--cmu-amber);
}
.cmu-callout--red .cmu-label {
  color: var(--cmu-red);
}

/* Note: a plain tinted message among other content */
.cmu-note {
  margin: 0 0 1.25em;
  background: var(--cmu-tint);
  border-left: 4px solid var(--cmu-line);
}
/* Equal padding even on a p: the template zeroes a p's top padding when
   it's first (p:first-child) and its bottom padding when it's last in a
   grid (.grid p:last-child). The id in :is() only adds weight; body keeps
   it working on pages without #content. */
:is(#content, body) .cmu-note {
  padding: 0.85em 1.1em;
}
.cmu-note p {
  margin: 0;
  padding: 0;
}

/* FAQ teaser: a few questions and answers in columns, before a link to the FAQ */
.cmu-faq-teaser {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1.25rem 2rem;
  margin: 0 0 1.25rem;
}
.cmu-faq-teaser > div {
  padding-top: 1rem;
  border-top: 2px solid var(--cmu-line);
}
.cmu-faq-teaser h3 {
  margin: 0 0 0.35rem;
  padding: 0;
  font-size: 1rem;
  font-weight: 700;
}
.cmu-faq-teaser p {
  margin: 0;
  line-height: 1.55;
}

/* Two columns: text, then a screenshot; one column on phones */
.cmu-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 2rem;
  align-items: start;
  margin: 0 0 2.75rem;
}
@media (max-width: 760px) {
  .cmu-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Carousel: the template makes each slide (.grid) width: 100%, but on wide
   screens it also pads .grid on both sides, so each slide came out wider
   than the carousel and the slides drifted out of line. Count the padding
   inside the width. */
.js-flickityCustom .grid {
  box-sizing: border-box;
}
/* The carousel script measures its height once, at load; when the page then
   narrows (the menu opening, images arriving) the slides shrink but the
   carousel keeps the old height, leaving a gap below. Stack the slides in
   one grid cell instead, so the carousel is always as tall as its tallest
   slide. The script still moves them sideways with transforms. */
.js-flickityCustom .flickity-viewport {
  height: auto !important; /* over the script's inline height */
}
.js-flickityCustom .flickity-slider {
  position: relative;
  display: grid;
  height: auto;
}
.js-flickityCustom .flickity-slider > * {
  grid-area: 1 / 1;
  position: relative !important; /* over the script's inline position */
  left: 0 !important;
}

/* Annotated image: a tall image, such as a screenshot or a diagram, on the
   right, with numbered callouts on the left, each pinned beside its part of
   the image (--cmu-at on the callout: how far down, 0 to 1) and overlapping
   its edge. Where the component is narrower than 50rem (70rem with --wide),
   the text, the callouts and the image stack. See Annotated Image in the
   docs (sections.html). */
.cmu-annotated {
  --cmu-annotated-bar: 0px;
  container-type: inline-size;
  position: relative;
  margin: 0 0 1.5rem;
  padding-bottom: 2.25rem; /* room for the caption, which hangs below */
}
.cmu-annotated:has(> .cmu-shot--browser) {
  --cmu-annotated-bar: 1.6rem; /* the browser window's bar, above the image */
}
.cmu-annotated-notes {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
.cmu-annotated-notes > li.cmu-callout {
  margin: 0 0 0.75rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 6px 18px rgba(23, 44, 75, 0.12);
}
/* Title, words and call to action, one above another in every callout */
.cmu-annotated-notes > li.cmu-callout > p {
  flex-basis: 100%;
}
@container (min-width: 50rem) {
  .cmu-annotated:not(.cmu-annotated--wide) > figure {
    position: relative;
    width: 56%;
    margin: 0 0 0 auto;
  }
  /* The caption hangs below the screenshot, so the callouts line up with
     the image alone */
  .cmu-annotated:not(.cmu-annotated--wide) > figure > figcaption {
    position: absolute;
    top: 100%;
  }
  .cmu-annotated:not(.cmu-annotated--wide) .cmu-annotated-text {
    position: absolute;
    top: 0;
    bottom: 2.25rem; /* the image alone, not the caption\'s room */
    left: 0;
    width: 46%;
    z-index: 1;
  }
  /* Text above the callouts stays clear of the screenshot */
  .cmu-annotated:not(.cmu-annotated--wide) .cmu-annotated-text > p {
    margin-right: 13%;
  }
  .cmu-annotated:not(.cmu-annotated--wide) .cmu-annotated-notes {
    margin: 0;
  }
  .cmu-annotated:not(.cmu-annotated--wide) .cmu-annotated-notes > li.cmu-callout {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--cmu-annotated-bar) + (100% - var(--cmu-annotated-bar)) * var(--cmu-at, 0));
    margin: 0;
    transform: translateY(-50%);
  }
}
/* --wide, for long text or callouts: side by side only from 70rem */
@container (min-width: 70rem) {
  .cmu-annotated--wide > figure {
    position: relative;
    width: 56%;
    margin: 0 0 0 auto;
  }
  /* The caption hangs below the screenshot, so the callouts line up with
     the image alone */
  .cmu-annotated--wide > figure > figcaption {
    position: absolute;
    top: 100%;
  }
  .cmu-annotated--wide .cmu-annotated-text {
    position: absolute;
    top: 0;
    bottom: 2.25rem; /* the image alone, not the caption\'s room */
    left: 0;
    width: 46%;
    z-index: 1;
  }
  /* Text above the callouts stays clear of the screenshot */
  .cmu-annotated--wide .cmu-annotated-text > p {
    margin-right: 13%;
  }
  .cmu-annotated--wide .cmu-annotated-notes {
    margin: 0;
  }
  .cmu-annotated--wide .cmu-annotated-notes > li.cmu-callout {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--cmu-annotated-bar) + (100% - var(--cmu-annotated-bar)) * var(--cmu-at, 0));
    margin: 0;
    transform: translateY(-50%);
  }
}

/* A screenshot with a border and an optional caption. --browser draws it in
   a browser window; its bar is shared with the hero's, above */
.cmu-shot {
  margin: 0 0 1.75rem;
}
.cmu-shot img {
  display: block;
  box-sizing: border-box;
  border: 1px solid var(--cmu-line);
  box-shadow: 0 6px 18px rgba(23, 44, 75, 0.1);
}
/* The window is as wide as its screenshot, never wider than the column */
.cmu-shot--browser {
  width: fit-content;
  max-width: 100%;
}
.cmu-shot--browser img {
  border-top: 0;
}
/* A linked screenshot: the link wraps the image exactly, with no underline.
   The template pads and underlines every link in #content with
   #content a:not(.btn):not(.cta):not(.box):not(.scrolldown), so this
   matches its weight. */
:is(#content, body) .cmu-shot a:not(.btn):not(.cta):not(.box):not(.scrolldown) {
  display: block;
  padding: 0;
  border: 0;
}
/* Captioned like the template's own photos (figure.image) */
.cmu-shot figcaption {
  margin-top: 0.5rem;
  font-style: italic;
}

/* Enlarge on click (needs cmu-app.js): a link to the full-size image with
   data-cmu-zoom opens it over the page, dimmed behind, in a <dialog>; see
   Enlarge on Click in the docs (content.html) */
a[data-cmu-zoom] {
  cursor: zoom-in;
}
.cmu-zoom {
  max-width: min(92vw, 1400px);
  max-height: 92vh;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
}
.cmu-zoom::backdrop {
  background: rgba(0, 0, 0, 0.6);
}
.cmu-zoom-frame {
  max-height: 92vh;
  overflow: auto;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.cmu-zoom img {
  display: block;
  max-width: 100%;
  max-height: 92vh;
  cursor: zoom-out;
}
/* An image much taller than the window: full width, scrolling (the script
   decides) */
.cmu-zoom--tall img {
  max-height: none;
}
/* The template darkens every button on hover; this one stays a plain white x */
.cmu-zoom .cmu-zoom-close,
.cmu-zoom .cmu-zoom-close:hover {
  position: absolute;
  top: -2.75rem;
  right: 0;
  margin: 0;
  padding: 0 0.25rem;
  border: 0;
  background: none;
  color: #fff;
  font-size: 2.25rem;
  line-height: 1;
}

/* A line across a grid band's full width, above or below its cards, such as
   an introduction or a link to see more (the template spans only a first h1) */
.grid > .cmu-grid-full {
  flex: 0 0 100%;
}

/* A kit block that ends its content section (as each does in Cascade, one
   block per section) leaves the space below to the section's own padding */
#content .content > div > [class^="cmu-"]:last-child,
#content .content > div > [class*=" cmu-"]:last-child {
  margin-bottom: 0;
}

/* Table cells centered vertically, so one-line cells sit level with wrapped
   ones and with images (the template sets top or baseline) */
#content table.alternate td {
  vertical-align: middle;
}

/* A light gray section, the gray of the kit's code snippets: lighter than
   the template's grey, for a testimonial or a quiet band. Text stays dark. */
.cmu-lightgrey {
  background-color: var(--cmu-tint);
}

/* Testimonial: a quote from a person, with their name, role and square
   photo beside it. Put it in a section such as content wide cmu-lightgrey.
   Stacks on phones, photo first. See Testimonial in the docs
   (sections.html). */
.cmu-testimonial {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
}
.cmu-testimonial > img {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.cmu-testimonial > figure {
  margin: 0;
}
/* The red quotation-mark tile; decoration, so screen readers skip it */
.cmu-testimonial > figure::before {
  content: "\201C" / "";
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  background: var(--cmu-red);
  color: #fff;
  font:
    700 5rem/1.15 Georgia,
    "Times New Roman",
    serif;
  text-align: center;
  overflow: hidden;
}
/* The template's blockquote is 2.35em and light; here the quote is set at
   about lead size, semibold, with a thin rule beside it at 30% black (the
   template's 15% fades on gray) */
#content .cmu-testimonial blockquote {
  margin: 1.75rem 0 0;
  padding: 0 0 0 2rem;
  border-left: 1px solid rgba(0, 0, 0, 0.3);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.5;
  color: var(--cmu-ink);
}
#content .cmu-testimonial blockquote p {
  margin: 0;
  padding: 0;
}
.cmu-testimonial cite {
  display: block;
  margin-top: 2rem;
  font-style: normal;
  font-weight: 700;
  line-height: 1.5;
}
.cmu-testimonial cite strong {
  color: var(--cmu-red);
  font-size: 1.25rem;
}
@media (max-width: 760px) {
  .cmu-testimonial {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
  }
  .cmu-testimonial > img {
    grid-column: 1;
    max-width: 16rem;
  }
  .cmu-testimonial > figure {
    grid-row: 2;
  }
  #content .cmu-testimonial blockquote {
    font-size: 1.3rem;
  }
}

/* A page from another site in a frame (a dashboard, a form): the width of
   its column at any screen size; set its height with the height attribute.
   The template sizes only video iframes. */
.cmu-embed {
  display: block;
  width: 100%;
  border: 1px solid var(--cmu-line);
}

/* A block of code to read or copy: scrolls sideways by default; --wrap
   wraps long lines (URLs, HTML) so all of it stays in view. It belongs to
   the sentence that introduces it, so it sits close under it (like a line
   break), then a paragraph's space before what follows. */
p:not(.cmu-label):has(+ :is(.cmu-snippet, .cmu-copyable)) {
  padding-bottom: 0.5em;
}
.cmu-snippet {
  margin: 0 0 1em;
  overflow-x: auto;
  background: var(--cmu-tint);
  border: 1px solid var(--cmu-line);
  font-size: 0.85rem;
  line-height: 1.5;
  /* Long lines wrap rather than scroll; copying still gives them as written */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Keep the inset when the template zeroes a pre's first/last-child padding. */
:is(#content, body) .cmu-snippet {
  padding: 1rem 1.25rem;
}
.cmu-snippet code {
  font-family: Menlo, Consolas, monospace;
}
/* Wrapping is the default now; the old name still works */
.cmu-snippet--wrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* A named copy button beside its block, on the right; under it on phones */
.cmu-copy-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.5rem;
  margin: 0 0 1em;
}
.cmu-copy-row > .cmu-snippet {
  flex: 1 1 18rem;
  min-width: 0;
  margin: 0;
}
.cmu-copy-row > .btn {
  margin: 0;
}
/* In a copy box, room on the right so the text never runs under the icon */
.cmu-copyable > .cmu-snippet {
  padding-right: 3rem;
}

/* A code block with a copy icon in its top right corner, where people look
   for it. The wrapper holds the button still while the code scrolls
   sideways under it.
   Needs cmu-app.js. Icons: GitHub's Octicons copy and check, MIT license,
   Copyright (c) 2023 GitHub Inc. */
.cmu-copyable {
  position: relative;
  margin: 0 0 1em;
}
/* The template zeroes a first and last child's padding; keep the block's */
:is(#content, body) .cmu-copyable > .cmu-snippet {
  margin: 0;
  padding: 1rem 3.25rem 1rem 1.25rem;
}
.cmu-copy {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: 0;
  padding: 0;
  background: #fff;
  border: 1px solid var(--cmu-line);
  border-radius: 6px;
  color: #6d6e71;
  cursor: pointer;
}
/* The template darkens every button on hover (and a tap leaves it there) */
.cmu-copy:hover {
  background: #fff;
  color: #222;
  border-color: #6d6e71;
}
.cmu-copy::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z'/%3E%3Cpath d='M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.cmu-copy[data-cmu-copy-state="copied"] {
  color: var(--cmu-green);
  border-color: currentColor;
}
.cmu-copy[data-cmu-copy-state="copied"]::before {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z'/%3E%3C/svg%3E");
}
/* Countdown (needs cmu-app.js): days, hours, minutes and seconds on flip
   cards; see Countdown in the docs (content.html). The sentence inside is
   the fallback and what screen readers get; the script hides it visually. */
.cmu-countdown-on > :not(.cmu-countdown-clock, .cmu-countdown-done) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* --replace: once it's done, the done message takes the cards' place */
.cmu-countdown--replace.cmu-countdown-ended > .cmu-countdown-clock {
  display: none;
}
.cmu-countdown-clock {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1rem 0 2rem;
  perspective: 400px;
}
.cmu-countdown-clock *,
.cmu-countdown-clock *::before,
.cmu-countdown-clock *::after {
  box-sizing: border-box;
}
.cmu-countdown-unit {
  text-align: center;
}
.cmu-countdown-label {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.1rem;
  color: var(--cmu-muted);
}
.cmu-countdown-card {
  display: block;
  position: relative;
  padding-bottom: 0.72em;
  font-size: 3.25rem;
  line-height: 1.25;
}
@media (max-width: 767px) {
  .cmu-countdown-card {
    font-size: 2.25rem;
  }
}
.cmu-countdown-top,
.cmu-countdown-bottom,
.cmu-countdown-back::before,
.cmu-countdown-back::after {
  display: block;
  /* Whole-pixel widths: each half is drawn on its own layer, and halves of a
     fractional width can land a pixel apart */
  width: fit-content;
  width: calc-size(fit-content, round(up, size, 1px));
  min-width: 1.8em;
  min-width: round(up, 1.8em, 1px);
  height: 0.72em;
  padding: 0 0.25em;
  border-radius: 0.15em 0.15em 0 0;
  background: #222;
  color: #ccc;
  backface-visibility: hidden;
  transform: translateZ(0);
  transform-style: preserve-3d;
}
.cmu-countdown-bottom {
  position: absolute;
  top: 50%;
  left: 0;
  overflow: hidden;
  border-top: 1px solid #000;
  border-radius: 0 0 0.15em 0.15em;
  background: #393939;
  color: #fff;
  pointer-events: none;
}
.cmu-countdown-bottom::after {
  content: attr(data-value);
  display: block;
  margin-top: -0.72em;
}
.cmu-countdown-back {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  pointer-events: none;
}
.cmu-countdown-back::before {
  content: attr(data-value);
  position: relative;
  z-index: -1;
  overflow: hidden;
}
.cmu-countdown-flip .cmu-countdown-back::before {
  animation: cmu-countdown-top 0.3s cubic-bezier(0.37, 0.01, 0.94, 0.35) both;
  transform-origin: center bottom;
}
.cmu-countdown-flip .cmu-countdown-back .cmu-countdown-bottom {
  animation: cmu-countdown-bottom 0.6s cubic-bezier(0.15, 0.45, 0.28, 1) both;
  transform-origin: center top;
}
@media (prefers-reduced-motion: reduce) {
  .cmu-countdown-flip .cmu-countdown-back::before,
  .cmu-countdown-flip .cmu-countdown-back .cmu-countdown-bottom {
    animation: none;
  }
}
@keyframes cmu-countdown-top {
  0% {
    transform: rotateX(0deg);
    z-index: 2;
  }
  0%,
  99% {
    opacity: 0.99;
  }
  100% {
    transform: rotateX(-90deg);
    opacity: 0;
  }
}
@keyframes cmu-countdown-bottom {
  0%,
  50% {
    z-index: -1;
    transform: rotateX(90deg);
    opacity: 0;
  }
  51% {
    opacity: 0.99;
  }
  100% {
    opacity: 0.99;
    transform: rotateX(0deg);
    z-index: 5;
  }
}

/* A Bootstrap Icon (an optional extra; see Install) floated in a card, as
   timeline cards float an icon image: the size of one, in CMU red */
.grid.boxes .bi.floatright {
  font-size: 3.5rem;
  line-height: 1;
  color: var(--cmu-red);
}

/* A heading right after a floated icon in a card sits beside it, level
   with its top, as if it came first (the template has every heading clear
   floats, and pads all but a first heading) */
.grid.boxes .floatright + h2 {
  clear: none;
  padding-top: 0;
}
/* A card with a rule (timeline cards): the rule and what follows it sit at
   the bottom, so the dates line up across a row of cards */
.grid.boxes > div:has(> hr) {
  display: flex;
  flex-direction: column;
}
.grid.boxes > div:has(> hr) > hr {
  margin-top: auto;
}
/* Space above the rule when nothing stretches the card (stacked on phones) */
.grid.boxes > div:has(> hr) > :first-child {
  margin-bottom: 1rem;
}

/* Lists: check marks, numbered steps */
/* Replace the template's list indent, including its extra indent from the
   tenth ordered item onward. Nested ordinary lists keep their own indent. */
:is(#content, body) :is(.cmu-flow, .cmu-steps, .cmu-checks) > li {
  margin-left: 0;
}
.cmu-checks {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.cmu-checks > li {
  position: relative;
  padding: 0 0 0.7rem 1.7rem;
  line-height: 1.5;
}
.cmu-checks > li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.15em;
  width: 0.5rem;
  height: 0.85rem;
  border: solid var(--cmu-red);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

ol.cmu-steps {
  counter-reset: cmu-step;
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}
ol.cmu-steps > li {
  counter-increment: cmu-step;
  position: relative;
  padding: 0 0 1rem 2.4rem;
  line-height: 1.55;
  min-height: 1.6rem;
}
ol.cmu-steps > li::before {
  content: counter(cmu-step);
  position: absolute;
  left: 0;
  top: 0.05rem;
  box-sizing: border-box;
  width: 1.6rem;
  height: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--cmu-red);
  border-radius: 50%;
  color: var(--cmu-red);
  font-weight: 700;
  font-size: 0.85rem;
}

/* Tables. The template makes tables display: block so they scroll on
   phones, which won't stretch them; cmu-full stretches them from 768px.
   position: relative keeps screen-reader-only text (.sr-only, positioned
   absolutely) inside that scroll, so it can't widen the page. */
table {
  position: relative;
}
table.cmu-full {
  width: 100%;
}
@media (min-width: 768px) {
  table.cmu-full {
    display: table;
  }
}
table.cmu-compare {
  table-layout: fixed;
}
.cmu-compare th,
.cmu-compare td {
  width: 50%;
}

/* Pills: gray unless given a tone */
.cmu-pill {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 3px;
  background: var(--cmu-gray-tint);
  color: var(--cmu-gray);
}
.cmu-pill--green {
  background: var(--cmu-green-tint);
  color: var(--cmu-green);
}
.cmu-pill--amber {
  background: var(--cmu-amber-tint);
  color: var(--cmu-amber);
}

/* Dates: a month-and-day block in the style of the events.cmu.edu (LiveWhale)
   widgets, for a date on its own or over a photo. A list of dates is the
   template's .events. Markup: <time class="cmu-date" datetime="2026-10-28">
   <span class="cmu-date-month">Oct</span> <span class="cmu-date-day">28</span></time> */
.cmu-date {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 auto;
  min-width: 3.25em;
  border: 1px solid var(--cmu-gray);
  background: #fff;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  text-align: center;
}
.cmu-date-month {
  background: var(--cmu-gray);
  color: #fff;
  padding: 0 0.5em;
  letter-spacing: 0.05em;
}
.cmu-date-day {
  color: var(--cmu-ink);
  font-size: 1.25em;
  padding: 0 0.4em;
}
.cmu-date--red {
  border-color: var(--cmu-red);
}
.cmu-date--red .cmu-date-month {
  background: var(--cmu-red);
}
/* Event cards: a photo with the date over its corner and a red rule under it */
#content .cmu-event-cards,
.cmu-event-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: 1.5rem;
  list-style: none;
  margin: 0 0 1.5em;
  padding: 0;
}
#content .cmu-event-cards > li {
  position: relative;
  margin: 0;
  padding: 0;
}
.cmu-event-cards img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-bottom: 4px solid var(--cmu-red);
  margin: 0 0 0.5em;
}
.cmu-event-cards .cmu-date {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
}
.cmu-event-cards h3 {
  margin: 0;
  padding: 0;
  font-size: 1.05em;
  font-weight: 700;
}
.cmu-event-cards p {
  margin: 0.25em 0 0;
  padding: 0;
  color: var(--cmu-muted);
  font-size: 0.9em;
}