/* Screening Room — one hand-written stylesheet, no framework.

   Two registers (PLAN.md §5):
   - the schedule pages are text-only and dense, modelled on a printed listing;
   - the screening page opens up.

   Mobile-first. Nothing restructures at a breakpoint; the layout only gets
   roomier. One accent colour, used for state and for links, and nowhere else. */

/* --- tokens ----------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  --paper: #fbfaf7;
  --ink: #16150f;
  --muted: #65645c;
  --rule: #dedcd4;
  --accent: #a6301a;
  --shade: #f2f0ea;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", monospace;

  --measure: 34rem;
  --page: 44rem;
  --gutter: 1.125rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #100f0d;
    --ink: #ecebe4;
    --muted: #918f85;
    --rule: #2a2822;
    --accent: #f4805f;
    --shade: #1a1815;
  }
}

/* --- base ------------------------------------------------------------------- */

* { box-sizing: border-box; }

/* An img with width and height attributes needs height:auto, or the attribute
   wins and a 1000x1500 poster renders 1500px tall inside a 150px column. */
img { max-width: 100%; height: auto; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0 var(--gutter) 4rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 0.15em; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.empty { color: var(--muted); }

/* --- frame ------------------------------------------------------------------ */

/* Header, content and footer share one measure so they always share one left
   edge. The screening page widens it; nothing else does. */
.site-header,
main,
.site-footer {
  max-width: var(--page);
  margin-inline: auto;
}

.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0 1.25rem;
}

.site-title {
  color: var(--ink);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  text-decoration: none;
}

.site-nav {
  display: flex;
  gap: 1rem;
  font-size: 0.8125rem;
}

.site-nav a { color: var(--muted); text-decoration: none; }
.site-nav a:hover { color: var(--accent); }

.site-footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.75rem;
}

.colophon-link { margin: 0; }
.colophon-link a { color: var(--muted); text-decoration: none; }
.colophon-link a:hover { color: var(--accent); }

.colophon { max-width: var(--measure); }
.colophon h2 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted); margin: 2rem 0 0.5rem; }
.colophon p { margin: 0 0 0.75rem; }

/* Closes the colophon rather than interrupting it. Small and muted is what
   TMDB's "less prominent than the logos that identify Your Application" asks
   for, so the compliant treatment and the quiet one are the same treatment. */
.attribution {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 2rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.attribution img { width: 4rem; height: auto; opacity: 0.7; flex: 0 0 auto; }

.page-title {
  margin: 0 0 1.25rem;
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

/* --- the schedule register -------------------------------------------------- */

.day { margin-bottom: 1.75rem; }

.day-heading {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0;
  padding: 0.4rem 0 0.35rem;
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.schedule {
  margin: 0;
  padding: 0;
  list-style: none;
}

.row { border-bottom: 1px solid var(--rule); }

/* A fixed time column rather than `auto`: the titles must start on the same
   x-position down the whole page, which is what makes the list scannable. */
.row-link {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr) auto;
  column-gap: 0.6rem;
  align-items: baseline;
  padding: 0.7rem 0;
  color: inherit;
  text-decoration: none;
}

.row-link:hover .row-title { color: var(--accent); }

.row-time {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  color: var(--muted);
  white-space: nowrap;
}

.row-main { min-width: 0; }

/* The title is the only visually heavier element on the row. */
.row-title {
  display: block;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
  /* A single unbreakable word must never push the page sideways. */
  overflow-wrap: anywhere;
}

.row-meta {
  display: block;
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.35;
}

/* A series is a label on the row, not a box around it. */
.row-series {
  display: inline-block;
  margin-top: 0.2rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.row-seats {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}

.row-seats.is-gone { color: var(--accent); }

.row.is-cancelled .row-title,
.row.is-cancelled .row-time { text-decoration: line-through; }
.row.is-cancelled { opacity: 0.6; }

/* --- series header ---------------------------------------------------------- */

/* --- the series listing ----------------------------------------------------- */
/* The schedule's register: a scannable line each, no thumbnails. The pictures
   live on the series pages. */

.series-list { margin: 0; padding: 0; list-style: none; }

.series-row { border-top: 1px solid var(--rule); }
.series-row:last-child { border-bottom: 1px solid var(--rule); }

.series-row-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  padding: 0.8rem 0;
  color: inherit;
  text-decoration: none;
}

.series-row-link:hover .series-row-title { color: var(--accent); }

.series-row-main { flex: 1 1 14rem; min-width: 0; }

.series-row-title {
  display: block;
  font-size: 1.0625rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.series-row-blurb {
  display: block;
  max-width: var(--measure);
  margin-top: 0.15rem;
  color: var(--muted);
  font-size: 0.875rem;
}

.series-row-meta {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.series-row-count::before { content: "·"; margin: 0 0.4rem; color: var(--rule); }

/* --- the series page -------------------------------------------------------- */

/* Same shape as the screening page's still, and for the same reason: the box is
   held at 16:9 so the page does not reflow when the image arrives. */
.series-hero {
  margin: 0 0 1.25rem;
  aspect-ratio: 16 / 9;
}

.series-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
  background: var(--shade);
  display: block;
}

.series-hero figcaption {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.series-header { margin-bottom: 1.5rem; }

.series-description {
  max-width: var(--measure);
  margin: 0 0 0.6rem;
  color: var(--ink);
  font-size: 0.9375rem;
}

.series-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* --- the screening page ----------------------------------------------------- */
/* One source order — still, title, card, details — in three shapes. On a wide
   viewport the grid forms two columns under the title and the card sticks.
   On mobile nothing is rearranged: the card is already second, because
   RSVPing is what the visitor came to do. */

.screening { display: grid; gap: 0; }

.still {
  margin: 0 0 1.25rem;
  /* Reserved by width/height on the img as well; this holds the box when the
     source is not exactly 16:9. */
  aspect-ratio: 16 / 9;
}

.still img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 3px;
  background: var(--shade);
  display: block;
}

.still figcaption {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.poster {
  flex: 0 0 auto;
  width: 8.5rem;
  margin: 0 0 1rem;
}

.poster img {
  width: 100%;
  border-radius: 3px;
  background: var(--shade);
  display: block;
}

.poster figcaption {
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.75rem;
}

.details { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.details-text { flex: 1 1 16rem; min-width: 0; }

.title-block { margin-bottom: 1.25rem; }

/* No image at all is a shape, not a gap: the title block opens the page under
   a rule, with room around it. */
.has-no-image .title-block {
  padding-top: 1.5rem;
  border-top: 2px solid var(--ink);
}

.film-title {
  margin: 0 0 0.4rem;
  font-size: 1.75rem;
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.film-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.875rem;
}

.film-meta span + span::before {
  content: "·";
  margin-right: 0.75rem;
  color: var(--rule);
}

.film-series {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
}

/* The admin's shortcuts into the form behind whatever they are looking at.
   Rendered for one person on pages written for everyone else, so they are
   sized and coloured to be found when looked for and ignored otherwise. */
.edit-link {
  margin-left: 0.5rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-decoration: none;
  vertical-align: 0.3em;
  white-space: nowrap;
}

.edit-link:hover { color: var(--accent); }

.banner {
  margin: 1rem 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--accent);
  background: var(--shade);
  color: var(--accent);
  font-size: 0.875rem;
}

.attendance {
  margin: 1.25rem 0;
  padding: 1rem 1.1rem;
  background: var(--shade);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

.attendance p { margin: 0 0 0.5rem; }
.attendance p:last-child { margin-bottom: 0; }

.attendance-when {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}

.attendance-where {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: var(--muted);
  font-size: 0.875rem;
}

/* Standing details about someone's home: shown only once a guest is confirmed. */
.attendance-directions { color: var(--ink); }

.attendance-count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0.9rem 0 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.attendance-waiting { color: var(--muted); font-weight: 400; }

.attendance-subhead {
  margin: 0.75rem 0 0.2rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.attendance-names {
  margin: 0 0 0.35rem;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
}

.attendance-names li { padding: 0.1rem 0; }
.attendance-names.is-waiting { color: var(--muted); }

.attendance-message {
  margin: 0.75rem 0 0;
  color: var(--accent);
  font-size: 0.8125rem;
}

.attendance-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}

.attendance-action input { width: 100%; }
.attendance-action button { width: 100%; text-align: center; }
.attendance-action .link-button { width: auto; text-align: left; }
.attendance-action small { color: var(--muted); font-size: 0.75rem; }

.attendance-label { font-size: 0.8125rem; font-weight: 600; }

/* The state, not the action: "You're in", "You're #2". */
.attendance-state {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
}

.attendance-note { color: var(--muted); font-size: 0.8125rem; }

/* Below the rule that closes the card, so it reads as an aside to the aside.
   Specific enough to beat the `.attendance p` shorthand, which zeroes the top
   margin this needs. */
.attendance .attendance-admin {
  margin: 0.9rem 0 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--rule);
}

.attendance-admin .edit-link { margin-left: 0; vertical-align: baseline; }

.name-form {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  max-width: 24rem;
  margin: 0 0 2rem;
}

.name-form label { font-size: 0.8125rem; font-weight: 600; }
.name-form-row { display: flex; gap: 0.5rem; }
.name-form input { flex: 1; min-width: 0; }
.name-form small { color: var(--muted); font-size: 0.75rem; }

/* /me rows carry an action, so the status and the button stack in a column on
   the right instead of the button wrapping onto its own line. */
.me-list { margin: 0; padding: 0; list-style: none; }

.me-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  align-items: start;
  border-bottom: 1px solid var(--rule);
}

.me-row-link {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  column-gap: 0.6rem;
  align-items: baseline;
  padding: 0.7rem 0;
  color: inherit;
  text-decoration: none;
}

.me-row-link:hover .row-title { color: var(--accent); }

.me-row-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.1rem;
  padding: 0.7rem 0;
}

.me-row-side form { margin: 0; }

.details { max-width: var(--measure); }

/* The host talking, set against the film's own blurb directly beneath it. The
   accent rule and the attribution line are what separate the two; the type is
   deliberately the same size, because this is the thing worth reading, not a
   caption on it. `pre-line` honours the line breaks typed into the textarea
   without any of the markup a rich-text field would invite. */
.host-note {
  margin: 0 0 1.1rem;
  padding: 0.1rem 0 0.1rem 0.9rem;
  border-left: 2px solid var(--accent);
}

.host-note blockquote {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  white-space: pre-line;
}

.host-note figcaption {
  margin-top: 0.45rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.blurb { margin: 0 0 1rem; font-size: 1rem; line-height: 1.6; }

.links { display: flex; gap: 1rem; font-size: 0.875rem; }

/* --- wider viewports -------------------------------------------------------- */
/* Roomier, not rearranged: the columns grow, the structure does not move. */

@media (min-width: 34rem) {
  :root { --gutter: 2rem; }

  body { font-size: 1.0625rem; }

  .row-link { grid-template-columns: 5.5rem minmax(0, 1fr) auto; column-gap: 1.25rem; padding: 0.8rem 0; }
  .row-title { font-size: 1.125rem; }
  .row-time, .row-seats { font-size: 0.8125rem; }

  .film-title { font-size: 2.125rem; }
  .attendance { max-width: 22rem; }
}

@media (min-width: 46rem) {
  /* The screening page is the one place that wants more than a reading
     column, because the card sits beside the text. Widening the page rather
     than just `main` keeps the header on the same left edge as the title. */
  body:has(.screening) { --page: 62rem; }

  .screening {
    grid-template-columns: minmax(0, 1fr) 19rem;
    grid-template-areas:
      "still   still"
      "title   title"
      "banner  banner"
      "details card";
    column-gap: 2.5rem;
    align-items: start;
  }

  .still { grid-area: still; }
  .title-block { grid-area: title; }
  .screening .banner { grid-area: banner; }
  .details { grid-area: details; }

  .screening .attendance {
    grid-area: card;
    position: sticky;
    top: 1.5rem;
    max-width: none;
    margin-top: 0;
  }

  .poster { width: 10rem; margin-bottom: 0; }
}

@media (min-width: 60rem) {
  .day-heading { font-size: 0.8125rem; }
}

/* --- sign-in ---------------------------------------------------------------- */

/* A quiet note under a form or a block. */
.hint { color: var(--muted); font-size: 0.8125rem; max-width: var(--measure); }

.lede {
  max-width: var(--measure);
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.lede strong { color: var(--ink); font-weight: 600; }

.sign-in-form { max-width: 20rem; }
.sign-in-form input { width: 100%; }

/* The nav's sign-out is a form, because signing out is a state change and must
   not be something a prefetch or a crawler can trigger. */
.site-nav form { display: inline; margin: 0; }

/* --- admin ------------------------------------------------------------------ */
/* Utilitarian on purpose. The design budget is for the public pages; this only
   has to be legible and quick to use at a laptop. */

.admin-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-bottom: 0.75rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
}

.admin-nav a { color: var(--muted); text-decoration: none; }
.admin-nav a:hover { color: var(--accent); }

main h1 { font-size: 1.5rem; letter-spacing: -0.02em; margin: 0 0 1.25rem; }
main h2 { font-size: 1.15rem; margin: 2rem 0 0.5rem; }
main h3 { font-size: 0.95rem; font-weight: 600; margin: 1.25rem 0 0.35rem; }

table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th, td { text-align: left; padding: 0.5rem 0.75rem 0.5rem 0; vertical-align: top; }

th {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

tbody tr { border-top: 1px solid var(--rule); }
tr.cancelled td { opacity: 0.55; text-decoration: line-through; }
td form { display: inline; }

.tag {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
}

.field { display: flex; flex-direction: column; gap: 0.25rem; max-width: 34rem; margin: 0 0 1rem; }
.field label { font-size: 0.8125rem; font-weight: 600; }
.field.checkbox label { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
.field small { color: var(--muted); font-size: 0.8rem; }
.field small.error, .error { color: var(--accent); }
.field.has-error input,
.field.has-error textarea,
.field.has-error select { border-color: var(--accent); }

input, textarea, select {
  font: inherit;
  padding: 0.4rem 0.5rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 3px;
}

input[type="checkbox"] { width: auto; }

button, .button {
  font: inherit;
  padding: 0.4rem 0.9rem;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 3px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.link-button {
  padding: 0;
  color: var(--muted);
  background: none;
  border: none;
  font-size: 0.8125rem;
  text-decoration: underline;
  cursor: pointer;
}

.link-button:hover { color: var(--accent); }

.counts { list-style: none; padding: 0; font-size: 1.0625rem; }
.counts li { padding: 0.35rem 0; }

.guest-list { list-style: none; padding: 0; }
.guest-list li { padding: 0.2rem 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.guest-list .mono { color: var(--muted); }

.copy-all { display: flex; flex-direction: column; gap: 0.35rem; max-width: 34rem; margin-top: 1.5rem; }
.copy-all label { font-size: 0.8125rem; font-weight: 600; }
.copy-all textarea { font-family: var(--mono); font-size: 0.8125rem; }
.copy-all .link-button { align-self: flex-start; }

/* --- TMDB search and the backdrop picker ------------------------------------ */

.tmdb-search { margin-bottom: 1.5rem; }
.tmdb-search input { width: 100%; max-width: 34rem; }

.tmdb-results { list-style: none; margin: 0.5rem 0 0; padding: 0; max-width: 34rem; }
.tmdb-results li { border-top: 1px solid var(--rule); }

.tmdb-results a {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0;
  color: inherit;
  text-decoration: none;
}

.tmdb-results a:hover .tmdb-title { color: var(--accent); }
.tmdb-title { font-weight: 600; }
.tmdb-meta { color: var(--muted); font-size: 0.8125rem; }

.backdrop-poster { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }

.backdrop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0.75rem;
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
}

.backdrop-grid form { margin: 0; }

.backdrop-choice {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  padding: 0.35rem;
  background: none;
  color: var(--muted);
  border: 1px solid var(--rule);
  text-align: left;
  font-size: 0.6875rem;
}

.backdrop-choice:hover { border-color: var(--accent); }
.backdrop-choice img { width: 100%; border-radius: 2px; display: block; }

.frame-preview { display: block; width: 100%; max-width: 34rem; border-radius: 3px; margin: 0.75rem 0; }
.frame-nudge { display: flex; gap: 1rem; margin-bottom: 1rem; }
.frame-nudge form { margin: 0; }
.frame-accept { max-width: 34rem; }

.image-slot {
  padding: 1rem 0 0.5rem;
  border-top: 1px solid var(--rule);
}

.image-slot h3 { margin-top: 0; }
.image-slot h3 .mono { color: var(--muted); font-weight: 400; }
.image-preview { display: block; width: 14rem; height: auto; border-radius: 3px; margin-bottom: 0.5rem; }
.image-preview.poster { width: 8rem; }

/* --- calendar feed (PLAN.md D6) --------------------------------------------- */

/* The URL is a credential, so it reads as one: monospace, selectable, and set
   apart from the RSVP list rather than sitting in it. */
.calendar-feed {
  max-width: 34rem;
  margin: 0 0 2rem;
  padding: 0.9rem 1rem 1rem;
  background: var(--shade);
  border: 1px solid var(--rule);
}

.calendar-feed h2 { margin: 0 0 0.35rem; font-size: 1rem; }
.calendar-feed .hint { margin: 0 0 0.7rem; }

.feed-url {
  width: 100%;
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
}

.calendar-feed form { display: flex; align-items: baseline; gap: 0.6rem; margin-top: 0.5rem; }
.calendar-feed form small { color: var(--muted); font-size: 0.75rem; }

/* --- admin: a screening that is off (PLAN.md D11) ---------------------------- */

.notice {
  margin: 1.5rem 0 0;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--accent);
  background: var(--shade);
  font-size: 0.875rem;
}

.notify-attendees {
  margin-top: 1.5rem;
  padding: 0.9rem 1rem 1rem;
  border: 1px solid var(--rule);
  background: var(--shade);
}

.notify-attendees h2 { margin: 0 0 0.35rem; font-size: 1rem; color: var(--accent); }
.notify-attendees p { margin: 0 0 0.7rem; color: var(--muted); font-size: 0.8125rem; }