/* === Prompt blocks =================================================== */
/* A prompt is a thing people copy, not a thing they read past, so it gets a
   handle (the label), an action (copy), and the plain-text look of the box
   they'll paste it into. Colours come from base.css tokens so the block
   follows whatever theme the site is set to. */

.prompt {
  margin: 1.75rem 0;
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--accent-primary);
  border-radius: var(--radius-md);
  background: var(--bg-card);
  overflow: hidden;
}

.prompt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.75rem 0.5rem 1rem;
  border-bottom: 1px solid var(--border-light);
}

.prompt-label {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-kicker, var(--accent-primary));
}

.prompt-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
  padding: 0.3rem 0.7rem;
  font-family: var(--font-body);
  font-size: 0.85rem;
  line-height: 1.2;
  color: var(--button-text);
  background: var(--button-bg);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease;
}

.prompt-copy:hover,
.prompt-copy:focus-visible {
  background: var(--button-hover-bg);
}

.prompt-copy.is-copied {
  background: var(--accent-primary-dark);
}

.prompt-text {
  margin: 0;
  padding: 1rem 1.15rem;
  background: var(--bg-code-block);
  color: var(--text-code-block);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  line-height: 1.55;
  white-space: pre-wrap;   /* prompts are prose; let them wrap on a phone */
  word-break: break-word;
  overflow-x: auto;
}

.prompt-text code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.prompt-note {
  margin: 0;
  padding: 0.7rem 1.15rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-muted);
  background: var(--bg-editorial-note, transparent);
}

/* Step headings on the session page ---------------------------------- */
/* The page's main divisions (the entries in "On this page") are set as
   vermilion bands, a rubric in the manuscript sense, so they read as a level
   above the ### headings inside them while scrolling. */
.step {
  margin-top: 3rem;
  padding: 0.4em 0.7em;
  border: 0;
  border-radius: var(--radius-sm, 4px);
  background: var(--accent-primary);
  color: var(--parchment-pale, #fff);
  font-weight: 600;
  /* Keep #step-2 style links from landing underneath the sticky navbar. */
  scroll-margin-top: 5rem;
}

.prompt { scroll-margin-top: 5rem; }

/* === Past sessions row ================================================ */
/* Compact boxes for the home page's past sessions. A teaser row, not a card
   (cards.css): no thumbnail, no tags, just enough to decide whether to click
   through. auto-fit by default, so one box fills the row and two split it
   evenly; the home page sets pairs=true to hold it at two columns (below). */
.session-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--spacing-sm);
  margin: var(--spacing-md) 0 var(--spacing-lg);
}

.session-box {
  display: block;
  padding: var(--spacing-sm);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  color: inherit;
  text-decoration: none;
  transition: transform var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

/* Two boxes per row (pairs=true): the home page's past sessions, oldest
   first, so the semester fills in as a 2×2 grid in the order it happened
   instead of stretching to three narrow columns once there are three. One
   column on a phone, where two would leave the summaries a few words wide. */
.session-row.session-row-pairs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 600px) {
  .session-row.session-row-pairs {
    grid-template-columns: 1fr;
  }
}

.session-box:hover {
  transform: translateY(-2px);
  border-color: var(--card-hover-border);
  box-shadow: var(--shadow-md);
}

.session-box-kicker {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.session-box-title {
  margin: 0.3rem 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--card-heading-color);
}

.session-box-presenter {
  margin: -0.2rem 0 0.4rem;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-muted);
}

.session-box-summary {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--card-text-color);
}

/* === Session cards ===================================================== */
/* The sessions page: one large card per session, set like the flyers. A tinted
   band carries the kicker (the flyer's orange date bar), the title is the big
   display line, and the flyer's three bold points follow as a list with their
   one-line descriptions. Colours come from the theme tokens rather than the
   flyer's own palette so the cards follow whichever theme the site uses. */
.session-cards {
  display: grid;
  gap: var(--spacing-md);
  margin: var(--spacing-md) 0 var(--spacing-lg);
}

.session-card {
  border: 1px solid var(--card-border);
  border-radius: var(--radius-sm);
  background: var(--card-bg);
  overflow: hidden;
}

.session-card-band {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.35rem var(--spacing-sm);
  padding: 0.7rem var(--spacing-md);
  background: var(--accent-primary);
  color: #fff;
  font-family: var(--font-heading);
  font-weight: 600;
}

/* The date and time, set large enough to read as the card's first line
   rather than a label over it. Mixed case: at this size the flyer band's
   letterspaced capitals shout. */
.session-card-when {
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: 0.01em;
}

/* On a phone the time drops below the date as a unit rather than breaking
   inside the range. */
.session-card-time {
  white-space: nowrap;
}

.session-card-tag {
  padding: 0.05rem 0.55rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* On a phone the date wraps instead, so the pill stays one line. */
  white-space: nowrap;
}

.session-card-body {
  padding: var(--spacing-md);
}

.session-card-body > * {
  margin-top: 0;
}

/* The extra class outranks base.css's under-768px `.container p, h3, ul`
   side padding, which would otherwise indent the card's contents a second
   time inside the body's own padding. Padding only: at this weight a
   margin-top here would also cancel .session-card-links' spacing. */
.session-card .session-card-body > * {
  padding-left: 0;
  padding-right: 0;
}

.session-card-title {
  margin: 0 0 0.35rem;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.1;
}

.session-card-title a {
  color: var(--accent-primary);
  text-decoration: none;
  border-bottom: none;
}

.session-card-title a:hover {
  text-decoration: underline;
}

.session-card-presenter {
  margin-bottom: 0.35rem;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--card-heading-color);
}

/* The same name on the session's own page, between the header and the
   lead paragraph (_layouts/base.html). */
.session-byline {
  margin-top: var(--spacing-md);
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--text-muted);
}

.session-card-meta {
  margin-bottom: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.session-card-summary {
  max-width: 68ch;
  font-size: 1.05rem;
  line-height: 1.55;
}

.session-card-points {
  list-style: none;
  margin: var(--spacing-sm) 0;
  padding: 0;
  border-top: 1px solid var(--metadata-border);
}

.session-card-points li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--metadata-border);
}

.session-card-points strong {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--card-heading-color);
}

.session-card-points span {
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--card-text-color);
}

/* === Home page section heading ========================================= */
/* "Upcoming sessions" opens the home page's listing, so it is set a step
   above a body h2 and above the next session's title under it (2.9rem at
   most), with a red rule to start the section. Garamond is loaded at
   400/500/600, so 600 rather than the h2's 700, and the tracking pulled in
   as on the program's titles. */
.sessions-heading {
  padding-bottom: 0.45rem;
  border-bottom: 2px solid var(--accent-primary);
  font-size: clamp(2.3rem, 5.5vw, 3.3rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

/* Under 768px base.css pads every .container h2 sideways, which would start
   the rule a gutter to the left of the heading's text. Without it, text, rule
   and the cards below share one left edge. */
.container .sessions-heading {
  padding-left: 0;
  padding-right: 0;
}

/* The card's two actions as buttons: the session page filled (.btn-primary,
   buttons.css) and the flyer outlined in the same red beside it, so the page
   reads as the main action and the flyer as the companion. */
.session-card-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  margin-bottom: 0;
  font-weight: 600;
}

.session-card-links a.session-card-flyer,
.session-card-links a.session-card-flyer:visited {
  display: inline-block;
  padding: calc(0.7em - 1px) calc(1.5em - 1px);
  border: 1px solid var(--button-bg);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--button-bg);
  font-family: var(--font-body);
  font-size: 1rem;
  text-decoration: none;
  transition: background-color var(--transition-normal), transform var(--transition-fast);
}

.session-card-links a.session-card-flyer:hover {
  background: var(--interactive-subtle-hover);
  color: var(--button-bg);
  transform: translateY(-1px);
}

/* === Session program ================================================== */
/* The home page's upcoming sessions (cards/session-program.html), set like a
   printed program: the next session opens out, later ones are agenda rows.
   No boxes and no filled bands. Red is the rubric here as everywhere on the
   site: the date numerals and the weeks-away labels, the things to notice,
   and nothing else. */

/* Under 768px base.css pads every .container p, h3, ul and li sideways, and
   typography.css gives each li a margin and a fixed line height. Inside the
   program those would indent the feature's columns and break up the agenda
   rules, so this block sets its own. :where() holds these resets at two
   classes, enough to beat those rules and no more, so the margins set on
   each element below still apply. */
.container .session-program :where(p, h3, ul) {
  margin: 0;
  padding-left: 0;
  padding-right: 0;
}

.container .session-program :where(li) {
  margin: 0;
  line-height: inherit;
}

.session-program {
  margin: var(--spacing-md) 0 var(--spacing-xl);
}

/* Small capitals in the sans: the weekday and the weeks-away label. */
.session-when,
.session-feature-weekday,
.session-agenda-weekday {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.session-when {
  color: var(--accent-primary);
}

/* The month in Garamond capitals, so it reads as one unit with the numeral
   under it; a sans label at caption size looked like a footnote to it. */
.session-feature-month,
.session-agenda-month {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1;
  text-transform: uppercase;
}

/* Lining figures of equal width, so "11", "18" and "2" sit the same way
   under their months from row to row. */
.session-feature-day,
.session-agenda-day {
  font-variant-numeric: lining-nums tabular-nums;
}

/* The feature: a when-and-where column ruled off from the body, the day set
   as a rubricated initial. The column is centred: Garamond's figures carry
   their serifs and the 1's flag unevenly, so a flush-left numeral never looks
   flush with the month above it. */
.session-feature {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 0 var(--spacing-lg);
}

.session-feature-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-right: var(--spacing-md);
  border-right: 1px solid var(--metadata-border);
}

.session-feature-month {
  font-size: 1.3rem;
}

.session-feature-day {
  margin: 0.3rem 0 0.5rem;
  font-family: var(--font-heading);
  font-size: 6.5rem;
  font-weight: 500;
  line-height: 0.85;
  color: var(--accent-primary);
}

.session-feature-weekday {
  color: var(--text-muted);
}

.session-feature-time {
  margin-top: 0.2rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-muted);
}

.session-program .session-feature-title {
  margin: 0.35rem 0 0.2rem;
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.session-feature-title a {
  color: var(--text-body);
  border-bottom: none;
}

.session-feature-title a:hover {
  color: var(--accent-primary);
}

.session-feature-presenter {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--text-muted);
}

/* The room, under the time. Sans rather than the time's mono: at the
   column's width the mono breaks "History Commons" mid-name. */
.session-feature-location {
  margin-top: 0.45rem;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--text-muted);
}

.session-feature-room {
  white-space: nowrap;
}

.session-program .session-feature-summary {
  max-width: 62ch;
  margin-top: var(--spacing-sm);
  font-size: 1.05rem;
  line-height: 1.55;
}

/* The flyer's three points side by side, each under a heavy rule like a
   column head in a printed program. */
.session-program .session-feature-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
  list-style: none;
}

.session-program .session-feature-points li {
  padding-top: 0.6rem;
  border-top: 2px solid var(--text-body);
}

.session-feature-points strong {
  display: block;
  margin-bottom: 0.3rem;
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.2;
}

.session-feature-points span {
  display: block;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.session-program .session-feature-note {
  margin-top: var(--spacing-sm);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* The session page filled (.btn-primary, buttons.css), the flyer as a plain
   underlined link beside it: the program has one button, not two. */
.session-program .session-feature-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm) var(--spacing-md);
  margin-top: var(--spacing-md);
}

.session-feature-links a.session-feature-flyer {
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}

/* "Later this semester": .sessions-heading a size down, with a hairline
   where it has a heavy rule, so the agenda reads as part of Upcoming
   sessions rather than a new section. Smaller than the next session's title
   (2.9rem at most), larger than the row titles under it (1.55rem). */
.session-program .session-later-heading {
  margin-top: var(--spacing-xl);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--accent-primary);
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3.6vw, 2.2rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.session-agenda {
  list-style: none;
}

/* One row per session, the whole row a link: date | title, meta, summary |
   weeks away. The side padding is only there so the hover wash has an edge. */
.session-agenda-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr auto;
  gap: 0 var(--spacing-md);
  align-items: baseline;
  padding: var(--spacing-md) 0.5rem;
  border-bottom: 1px solid var(--metadata-border);
  color: var(--text-body);
  transition: background-color var(--transition-normal);
}

.session-agenda-row:hover {
  background: var(--interactive-subtle);
  color: var(--text-body);
}

/* Month, day, weekday and time stacked and centred, as in the feature. */
.session-agenda-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.session-agenda-month {
  font-size: 1.05rem;
}

.session-agenda-day {
  margin: 0.15rem 0 0.35rem;
  font-family: var(--font-heading);
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 0.95;
  color: var(--accent-primary);
}

.session-agenda-weekday {
  font-size: 0.7rem;
  color: var(--text-muted);
}

.session-agenda-time {
  margin-top: 0.1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.session-agenda-title {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.15;
}

.session-agenda-row:hover .session-agenda-title {
  color: var(--accent-primary);
}

.session-agenda-meta {
  display: block;
  margin-top: 0.15rem;
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-style: italic;
  color: var(--text-muted);
}

.session-agenda-summary {
  display: block;
  max-width: 60ch;
  margin-top: 0.4rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.session-agenda-when {
  align-self: start;
  padding-top: 0.25rem;
  white-space: nowrap;
}

.session-agenda-arrow {
  display: inline-block;
  margin-left: 0.3rem;
  transition: transform var(--transition-normal);
}

.session-agenda-row:hover .session-agenda-arrow {
  transform: translateX(3px);
}

/* On a phone the dates fold into one line above the title, in the feature
   and in each agenda row, with the weeks-away label between date and title;
   the feature's points stack. */
@media (max-width: 720px) {
  .session-feature {
    grid-template-columns: 1fr;
  }

  .session-feature-date {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    text-align: left;
    gap: 0 0.6rem;
    margin-bottom: var(--spacing-sm);
    padding: 0 0 0.6rem;
    border-right: none;
    border-bottom: 1px solid var(--metadata-border);
  }

  .session-feature-day {
    order: -1;
    margin: 0;
    font-size: 3rem;
  }

  .session-feature-month {
    font-size: 1rem;
  }

  /* Its own line under the folded date, rather than wrapping in after the
     time. */
  .session-feature-location {
    flex-basis: 100%;
    margin-top: 0.15rem;
  }

  .session-program .session-feature-points {
    grid-template-columns: 1fr;
  }

  /* The date folds into one line over the title and the weeks-away label
     goes between them, in the same order as the feature. */
  .session-agenda-row {
    grid-template-columns: 1fr;
    gap: 0.35rem 0;
  }

  .session-agenda-date {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
    text-align: left;
  }

  .session-agenda-day {
    order: -1;
    margin: 0;
    font-size: 2rem;
  }

  .session-agenda-month {
    font-size: 0.95rem;
  }

  .session-agenda-date {
    grid-row: 1;
  }

  .session-agenda-when {
    grid-row: 2;
    padding-top: 0.15rem;
  }

  .session-agenda-body {
    grid-row: 3;
  }
}

/* === Session list ===================================================== */
/* The sessions page (cards/session-list.html): every session as one line, a
   table of contents rather than a display. Same rules as the home page's
   agenda, a size down. Upcoming rows are full ink with red dates and a
   weeks-away label. Past rows recede (below), so the line between done and
   to come shows without a heading. */
.container .session-list {
  margin: var(--spacing-md) 0 var(--spacing-lg);
  padding-left: 0;
  padding-right: 0;
  border-top: 1px solid var(--text-body);
  list-style: none;
}

.container .session-list :where(li) {
  margin: 0;
  line-height: inherit;
}

.session-list-row {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: 0 var(--spacing-md);
  align-items: baseline;
  padding: 0.85rem 0.5rem;
  border-bottom: 1px solid var(--metadata-border);
  color: var(--text-body);
  transition: background-color var(--transition-normal);
}

.session-list-row:hover {
  background: var(--interactive-subtle);
  color: var(--text-body);
}

.session-list-date {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-muted);
}

.session-list-row.is-upcoming .session-list-date {
  color: var(--accent-primary);
}

.session-list-title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
}

.session-list-row:hover .session-list-title {
  color: var(--accent-primary);
}

.session-list-presenter {
  /* Wraps as a unit, so a long title pushes the whole name to the next line
     rather than splitting it. */
  display: inline-block;
  margin-left: 0.6rem;
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-style: italic;
  color: var(--text-muted);
}

.session-list-summary {
  display: block;
  max-width: 68ch;
  margin-top: 0.2rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.session-list-when {
  white-space: nowrap;
}

/* Past rows: filed away. A parchment wash a step darker than the page,
   grey date and title, and "Materials" where upcoming rows count weeks. The
   summary stays at --text-muted rather than going lighter, since anything
   paler drops under 4.5:1 on the wash. Hovering one brings it back to full
   ink, a different response from the red wash on upcoming rows, so it reads
   as reopening something finished. */
.session-list-row.is-past {
  background: var(--bg-section-alt-flat);
}

.session-list-row.is-past .session-list-title {
  color: var(--text-muted);
}

.session-list-materials {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.session-list-row.is-past:hover {
  background: color-mix(in srgb, var(--bg-section-alt-flat) 70%, var(--parchment, #e9dcc8));
}

.session-list-row.is-past:hover .session-list-date,
.session-list-row.is-past:hover .session-list-title {
  color: var(--text-body);
}

.session-list-row.is-past:hover .session-list-materials {
  color: var(--accent-primary);
}

/* The next session: a faint vermilion wash and a red rule down the left
   edge, the rubric marking where the semester stands. Red-tinted rather than
   another parchment step, so it can't be read as one more past row. The rule
   is an inset shadow, so the row's text stays aligned with the others. */
.session-list-row.is-next {
  background: color-mix(in srgb, var(--accent-primary) 11%, var(--bg-page));
  box-shadow: inset 3px 0 0 var(--accent-primary);
}

.session-list-row.is-next:hover {
  background: color-mix(in srgb, var(--accent-primary) 16%, var(--bg-page));
}

/* --text-muted is about 4.4:1 on the wash, just under AA, so the row's
   summary and presenter are set in full ink, which also lifts it. */
.session-list-row.is-next .session-list-summary,
.session-list-row.is-next .session-list-presenter {
  color: var(--text-body);
}

/* On a phone the weeks-away label moves over the title, as in the agenda. */
@media (max-width: 720px) {
  .session-list-row {
    grid-template-columns: 3.8rem 1fr;
  }

  .session-list-date {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .session-list-when {
    grid-column: 2;
    grid-row: 1;
    padding-bottom: 0.15rem;
  }

  .session-list-body {
    grid-column: 2;
    grid-row: 2;
  }

  /* Its own line under the title, rather than wrapping in with the
     inline margin still showing as an indent. */
  .session-list-presenter {
    display: block;
    margin: 0.1rem 0 0;
  }
}

/* === Schedule list ===================================================== */
/* The semester's remaining dates, one per row, topic or "Topic TBA". Plain
   rows rather than another card — this is a calendar, not a set of things to
   click into, and most rows don't have anywhere to link yet. --metadata-border
   and the mono date already carry the right weight (typography.css uses the
   same pairing for .metadata-strip). */
.schedule-list {
  list-style: none;
  margin: var(--spacing-md) 0 var(--spacing-lg);
  padding: 0;
}

.schedule-item {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--metadata-border);
}

.schedule-item:last-child {
  border-bottom: none;
}

.schedule-date {
  flex: 0 0 4.5rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.schedule-tba {
  color: var(--text-muted);
  font-style: italic;
}

/* The one-line rule that the whole session hangs on. */
.rule {
  margin: 2rem 0;
  padding: 1.1rem 1.4rem;
  border-left: 4px solid var(--interactive-hover);
  background: var(--bg-accent);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.4;
}

/* One sentence per step that a reader skimming the page should come away
   with. Same family as .rule, a size down, with a small label so it reads as
   a marker rather than a pull quote. Markup:
   <div class="keypoint" markdown="1">The sentence.</div> */
.keypoint {
  padding: 0.8rem 1.25rem 0.9rem;
  border-left: 3px solid var(--accent-primary);
  border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
  background: var(--bg-accent);
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.45;
}

.keypoint::before {
  content: "Key point";
  display: block;
  margin-bottom: 0.15rem;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-primary);
}

/* The closing list of principles, framed as a card to take away. */
.takeaways {
  padding: 1.4rem 1.6rem;
  border: 1px solid var(--border-section-alt, var(--border-light));
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-section-alt-flat, var(--bg-card));
}

.takeaways p {
  margin-bottom: 0.75rem;
}

.takeaways li + li {
  margin-top: 0.6rem;
}

/* A quiet note, for things worth keeping in mind rather than warnings. */
.reminder {
  padding: 0.7rem 1.1rem;
  border-left: 3px solid var(--info);
  border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
  background: var(--bg-editorial-note);
  font-size: 0.98rem;
  line-height: 1.5;
}

:is(.keypoint, .takeaways, .reminder) > :last-child {
  margin-bottom: 0;
}

@media (max-width: 480px) {
  .prompt-text { font-size: 0.85rem; padding: 0.85rem 0.9rem; }
  .prompt-copy-text { display: none; }   /* icon-only button on small screens */
  .rule { font-size: 1.1rem; }
  .keypoint { font-size: 1.05rem; }
  .takeaways { padding: 1.1rem 1.15rem; }
}


/* === Demo blocks ===================================================== */
/* A demo is the counterpart to a prompt: the prompt is what you paste, the
   demo is what actually came back. It deliberately does NOT look like a
   prompt — no copy button, no mono paste-box — because it is evidence to be
   read rather than an instruction to be used. Paper rather than terminal:
   this is a transcript, and it should feel like a quotation.

   The head carries provenance. An unlabelled transcript stops being true
   without anyone noticing when the model changes underneath it. */

.demo {
  margin: 1.75rem 0;
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--text-muted);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--bg-card) 60%, var(--bg-page));
  overflow: hidden;
}

.demo-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--border-light);
}

.demo-label {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Which tool, which day. Quiet, but never optional. */
.demo-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-muted);
}

.demo-text {
  padding: 0.9rem 1.2rem;
  font-size: 0.95rem;
  line-height: 1.55;
}

.demo-text > :first-child { margin-top: 0; }
.demo-text > :last-child  { margin-bottom: 0; }

/* Recorded replies keep their own headings and tables. Set them as parts of
   the reply, not as headings of the page: no h2 rule, no page-scale type. */
.demo-text h1, .demo-text h2, .demo-text h3,
.demo-text h4, .demo-text h5, .demo-text h6 {
  margin: 1.1rem 0 0.4rem;
  padding: 0;
  border: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}
.demo-text h1, .demo-text h2 { font-size: 1.1rem; }

.demo-text table {
  width: 100%;
  margin: 0.6rem 0;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.demo-text th, .demo-text td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--border-light);
  text-align: left;
  vertical-align: top;
}

.demo-note {
  margin: 0;
  padding: 0.6rem 1.2rem 0.9rem;
  font-size: 0.88rem;
  font-style: italic;
  color: var(--text-muted);
}

/* An unfilled slot is loud on purpose. A demonstration that ships with
   invented or missing transcripts is worse than one that admits it isn't
   finished, so this is hard to mistake for content. */
.demo--empty {
  border-left-color: var(--error);
  background: color-mix(in srgb, var(--error) 7%, var(--bg-page));
  padding: 0.9rem 1.2rem;
}

.demo--empty p { margin: 0.35rem 0; font-size: 0.9rem; }

.demo-empty-head {
  font-weight: 600;
  color: var(--error);
}