/* ==========================================================================
   ICGC Quarterly Schedule
   Shares the site's tokens where they exist and falls back where they do not,
   so this works on the member page whether or not adinkra.css is loaded.
   ========================================================================== */
.sch {
  --s-ink: #14100C;
  --s-paper: #EFF1EC;
  --s-surface: #FFFFFF;
  --s-gold: #A87524;
  --s-green: #0F5D4E;
  --s-clay: #A34032;
  --s-communion: #9B2C1B;   /* the outline's .so-communion, matched exactly */
  --s-text: #1B1F1A;
  --s-text2: #5A6158;
  --s-muted: #6C7269;
  --s-rule: #D5DACE;
  --s-display: Futura, "Avenir Next", "Century Gothic", "Trebuchet MS", sans-serif;
  --s-body: "Iowan Old Style", "Hoefler Text", Palatino, Georgia, serif;

  font-family: var(--s-body);
  color: var(--s-text);
}

/* ---- sign-in gate --------------------------------------------------------- */
.sch-gate {
  max-width: 460px;
  margin: 0 auto;
  padding: 40px 34px 34px;
  background: var(--s-surface);
  border: 1px solid var(--s-rule);
  text-align: center;
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
}
.sch-gate-eyebrow {
  font-family: Futura, "Avenir Next", "Century Gothic", sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: 0.22em;
  text-transform: uppercase; color: #A87524; margin: 0 0 10px;
}
.sch-gate-title {
  font-family: Futura, "Avenir Next", "Century Gothic", sans-serif;
  font-size: 30px; font-weight: 500; letter-spacing: -0.01em;
  margin: 0 0 12px; color: #1B1F1A;
}
.sch-gate-note { color: #5A6158; margin: 0 0 24px; font-size: 18px; }
.sch-gate label { display: block; text-align: left; font-size: 16px; color: #5A6158; margin-bottom: 14px; }
.sch-gate input[type="text"],
.sch-gate input[type="password"] {
  width: 100%; box-sizing: border-box;
  padding: 12px 14px; margin-top: 5px;
  border: 1px solid #D5DACE; background: #EFF1EC;
  font-family: inherit; font-size: 18px;
}
.sch-gate .login-submit input,
.sch-gate #wp-submit {
  font-family: Futura, "Avenir Next", "Century Gothic", sans-serif;
  font-size: 16px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase;
  background: #A87524; color: #14100C; border: 2px solid #A87524;
  padding: 14px 30px; cursor: pointer; border-radius: 0; width: 100%;
}
.sch-gate .login-remember { text-align: left; font-size: 16px; }
.sch-gate-help { margin: 18px 0 0; font-size: 16px; }
.sch-gate-help a { color: #A87524; }

/* ---- header bar ----------------------------------------------------------- */
.sch-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.sch-month {
  font-family: var(--s-display);
  font-size: clamp(26px, 3.4vw, 38px); font-weight: 500;
  letter-spacing: -0.01em; margin: 0; color: var(--s-text);
}
.sch-nav {
  font-family: var(--s-display);
  font-size: 15px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none; color: var(--s-text2);
  padding: 10px 14px; border: 1px solid var(--s-rule);
  transition: background-color .18s, color .18s;
}
.sch-nav:hover { background: var(--s-text); color: var(--s-paper); border-color: var(--s-text); }

/* ---- tools ---------------------------------------------------------------- */
.sch-tools {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--s-rule);
}
.sch-btn {
  font-family: var(--s-display);
  font-size: 15px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 11px 20px; border: 2px solid var(--s-text); background: none;
  color: var(--s-text); cursor: pointer; border-radius: 0;
  transition: background-color .18s, color .18s;
}
.sch-btn-solid { background: var(--s-gold); border-color: var(--s-gold); color: #14100C; }
.sch-btn-solid:hover { background: #C08A2E; border-color: #C08A2E; }
.sch-btn-line:hover { background: var(--s-text); color: var(--s-paper); }
.sch-status { font-size: 16px; color: var(--s-muted); }
.sch-status.is-ok { color: var(--s-green); }
.sch-status.is-err { color: var(--s-clay); }
.sch-readonly { font-size: 16px; color: var(--s-muted); }

/* A save that did not get through leaves the new name sitting in the cell,
   which reads exactly like success. Say so where the eye already is - on the
   calendar itself - rather than only in a line of toolbar text that is easy to
   scroll past on a phone. */
.sch.has-unsaved .sch-grid { outline: 2px solid var(--s-clay); outline-offset: 3px; }
.sch.has-unsaved .sch-status.is-err {
  display: block; font-weight: 700; padding: 8px 12px;
  background: #FBEDE9; border-left: 4px solid var(--s-clay);
}

/* ---- the grid ------------------------------------------------------------- */
.sch-grid { border: 1px solid var(--s-rule); background: var(--s-rule); }
.sch-head, .sch-body { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; }
.sch-head { background: var(--s-rule); }
.sch-dow {
  background: var(--s-ink); color: #F2EDE3;
  font-family: var(--s-display);
  font-size: 14px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 12px 8px; text-align: center;
}
.sch-dow-abbr { display: none; }

.sch-body { gap: 1px; }

/* Every week the same height, which is what a month view is supposed to look
   like and what it did not.
   A Sunday carries a full service list - coordinator, opening prayer, praise
   and worship, song and word ministration - and a Tuesday carries a Bible
   study, so on a real month the six week rows measured 130, 421, 304, 384, 363
   and 363 pixels. The grid already stretches the seven days WITHIN a week
   against each other, which is why the days never looked wrong; what it does
   not do is size one week like the next, and that is the ragged edge you see
   running down the page.

   No media-query guard here, unlike the year plan on the events page. That
   grid collapses to a single column on a phone, where equal rows would stack
   twelve tall empty boxes. This one never collapses - .sch-scroll keeps the
   seven columns at a legible width and scrolls sideways instead, precisely so
   a roster still shows which weekday a duty falls on - so there is never a
   narrow case where equalising is the wrong thing.

   The cost, which is real: a sparse week is padded out to the fullest one.
   Where a month starts on a Saturday, that first row goes from 130px to 421px
   of mostly empty grid. That is the trade a uniform calendar makes. */
.sch-body { grid-auto-rows: 1fr; }
.sch-cell {
  background: var(--s-surface);
  min-height: 132px;
  padding: 8px 9px 10px;
  position: relative;
  font-size: 15px;
  line-height: 1.45;
}
.sch-cell-blank { background: #F4F6F1; }
.sch-daynum {
  font-family: var(--s-display);
  font-weight: 700; font-size: 17px; color: var(--s-text);
  margin-bottom: 5px;
}

/* ---- an event inside a day ------------------------------------------------ */
.sch-event { margin-bottom: 9px; }
.sch-event:last-child { margin-bottom: 0; }
.sch-event-title {
  display: block;
  font-family: var(--s-display);
  font-weight: 700; font-size: 14px;
  color: var(--s-text); line-height: 1.3;
}
.sch-event-time { display: block; font-weight: 400; color: var(--s-muted); }
.sch-role { display: block; color: var(--s-text2); font-size: 14px; }
.sch-role-name { color: var(--s-muted); }
.sch-note {
  display: block; margin-top: 3px;
  font-family: var(--s-display); font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--s-clay);
}

/* colour-code the recurring meetings so the month reads at a glance */
.sch-event-sunday_service .sch-event-title { color: var(--s-gold); }
.sch-event-bible_study   .sch-event-title { color: var(--s-green); }
.sch-event-prayer_meeting .sch-event-title { color: var(--s-clay); }
.sch-event-half_night    .sch-event-title { color: #6B4E9E; }

/* Communion, matching the service outline's own title exactly - see
   .so-service-title.so-communion in outline.css. The two screens name the same
   Sunday and now name it in the same colour.

   Deliberately NOT --s-clay: that is the prayer meeting's colour here and the
   error colour everywhere else, and #9B2C1B is the darker red the outline chose
   precisely to stay out of its way. They are close, and the only place they
   could meet is a week holding both a communion Sunday and a prayer meeting.

   Written at (0,3,0) so it beats .sch-event-sunday_service .sch-event-title
   outright rather than by sitting later in the file - communion IS a
   sunday_service, so both rules always match and source order is too fragile a
   thing to hang it on. */
.sch-event-sunday_service .sch-event-title.is-communion,
.sch-event-title.is-communion { color: var(--s-communion); }

/* ---- edit affordances ----------------------------------------------------- */
.sch-edit-day {
  position: absolute; top: 6px; right: 6px;
  font-family: var(--s-display); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--s-paper); border: 1px solid var(--s-rule);
  color: var(--s-text2); padding: 3px 7px; cursor: pointer;
}
.sch-edit-day:hover { background: var(--s-gold); border-color: var(--s-gold); color: #14100C; }
.sch.is-editing .sch-cell { cursor: pointer; }
.sch.is-editing .sch-cell:hover { background: #FBF9F4; }

/* ---- day editor dialog ---------------------------------------------------- */
.sch-dialog {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(20,16,12,.55);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 16px; overflow-y: auto;
}
.sch-dialog[hidden] { display: none; }
.sch-panel {
  background: var(--s-surface);
  border: 1px solid var(--s-rule);
  width: 100%; max-width: 620px;
  padding: 26px;
  font-family: var(--s-body);
}
.sch-panel h3 {
  font-family: var(--s-display); font-size: 24px; font-weight: 500;
  margin: 0 0 4px; color: var(--s-text);
}
.sch-panel-sub { color: var(--s-muted); font-size: 16px; margin: 0 0 20px; }

.sch-ev {
  border: 1px solid var(--s-rule); padding: 16px; margin-bottom: 14px;
  background: #FBFAF7;
}
.sch-ev-head { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; }
.sch-ev-head select { flex: 1; }
.sch-panel label {
  display: block; font-family: var(--s-display);
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--s-muted); margin: 10px 0 4px;
}
.sch-panel input[type="text"],
.sch-panel select {
  width: 100%; box-sizing: border-box;
  padding: 9px 11px; border: 1px solid var(--s-rule);
  background: #fff; font-family: var(--s-body); font-size: 17px; color: var(--s-text);
  border-radius: 0;
}
.sch-panel input[type="text"]:focus,
.sch-panel select:focus { outline: 2px solid var(--s-gold); outline-offset: 0; }
.sch-remove {
  font-family: var(--s-display); font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: none; border: 1px solid var(--s-clay); color: var(--s-clay);
  padding: 7px 12px; cursor: pointer;
}
.sch-remove:hover { background: var(--s-clay); color: #fff; }
.sch-panel-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

/* a datalist-backed text input: pick a known name or type a new one */
.sch-hint { font-size: 14px; color: var(--s-muted); margin-top: 4px; }

/* ---- responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  .sch-dow-full { display: none; }
  .sch-dow-abbr { display: inline; }
  .sch-cell { min-height: 104px; font-size: 14px; padding: 6px; }
  .sch-event-title, .sch-role { font-size: 13px; }
}
/* The block that used to live here collapsed the month into a single column on
   phones - no weekday header, no blanks, one day after another. It has been
   removed rather than overridden, because a roster's whole point is which day of
   the week a duty falls on, and a list throws that away. The calendar keeps its
   seven columns at every width now and scrolls sideways inside .sch-scroll
   instead; see the block at the end of this file. */

/* ---- print: match the printed quarterly sheet ------------------------------ */
@media print {
  @page { size: landscape; margin: 10mm; }
  body * { visibility: hidden; }
  .sch, .sch * { visibility: visible; }
  .sch { position: absolute; left: 0; top: 0; width: 100%; }
  .sch-tools, .sch-nav, .sch-edit-day, .sch-dialog { display: none !important; }
  .sch-grid { border-color: #000; background: #000; }
  .sch-dow { background: #fff !important; color: #000 !important; border-bottom: 1px solid #000; }
  .sch-cell { min-height: 108px; break-inside: avoid; }
  .sch-event-title { color: #000 !important; }
  .sch-month { font-size: 20pt; }
  .sch-cell, .sch-role, .sch-event-title { font-size: 8.5pt; }
}


/* ==========================================================================
   Weekday cell formatting
   1. event title (the activity) in bold
   2. every person in bold, each in their own colour
   ========================================================================== */
.sch-event-title { font-weight: 700 !important; }

.sch-name { font-weight: 700; }
.sch-name-tbd { font-weight: 400; color: var(--s-muted); font-style: italic; }
.sch-name-sep { color: var(--s-rule, #D5DACE); margin: 0 3px; font-weight: 400; }

/* Someone who has told the office they cannot make this duty.
 *
 * Struck through, not hidden and not recoloured. The name has to stay legible
 * because the roster manager's next question is "who was I expecting?", and it
 * keeps its own colour because that colour is how this calendar is read at a
 * glance - overriding it to a warning red would make the person look like a
 * different person. The rule does the talking.
 *
 * The dotted underline is the affordance for the title attribute; the mark
 * alone could be read as "cancelled" rather than "cannot come". */
.sch-name.is-unavailable {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--s-clay);
  opacity: 0.7;
}
.sch-name.is-unavailable::after {
  content: "!";
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  background: var(--s-clay);
  text-decoration: none;
  vertical-align: text-top;
}

/* "Can't make a date?"
 *
 * Its own row beside the view switcher rather than a place on .sch-tools. Those
 * toolbars sit inside the month section and are hidden in day and week view,
 * which is right for Edit and Print and wrong for this: a phone opens on day
 * view, and somebody crying off a duty is usually on a phone. Out here it shows
 * in every view and at every width.
 *
 * Right-aligned and outlined in clay, so it reads as an aside from the roster
 * rather than as a control of it. */
.sch-notice-bar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 14px;
}
.sch-btn-notice {
  border-color: var(--s-clay);
  color: var(--s-clay);
}
/* "preview" - shown on the button only while the notice page is still a draft,
   so an editor testing it knows why the address looks unusual. It disappears on
   its own the moment the page is published. */
.sch-btn-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--s-muted);
  vertical-align: 2px;
}
.sch-btn-notice:hover .sch-btn-tag,
.sch-btn-notice:focus .sch-btn-tag { background: rgba(255, 255, 255, 0.3); }
.sch-btn-notice:hover,
.sch-btn-notice:focus {
  background: var(--s-clay);
  color: #fff;
}
@media (max-width: 600px) {
  /* Full width on a phone, where it is the only thing on its row and a
     right-aligned button is an easy miss. */
  .sch-notice-bar { justify-content: stretch; }
  .sch-btn-notice { flex: 1 1 auto; text-align: center; }
}
@media print {
  /* A printed roster is a reference, not a form. */
  .sch-notice-bar { display: none !important; }
}

/* print: colour costs ink and photocopies badly, so names go plain black */
@media print {
  .sch-name { color: #000 !important; font-weight: 700; }
  .sch-name-sep { color: #666 !important; }
  /* The strike survives printing - a photocopied roster that quietly drops the
     one mark that says "this person is not coming" is worse than no mark. */
  .sch-name.is-unavailable { text-decoration-color: #000 !important; opacity: 1; }
  .sch-name.is-unavailable::after { background: #000 !important; color: #fff !important; }
}


/* ==========================================================================
   Harmonised with the site type scale.
   The calendar stays denser than page copy - seven columns need it - but the
   families and weights now match everything else.
   ========================================================================== */
.sch-event-title,
.sch-event-time,
.sch-name,
.sch-role-name,
.sch-month,
.sch-dow,
.sch-daynum,
.sch-btn,
.sch-gate-title,
.sch-gate-eyebrow {
  font-family: Futura, "Avenir Next", "Century Gothic", "URW Gothic", "Trebuchet MS", sans-serif;
}

.sch-event-title { font-size: 16px; font-weight: 700; }
.sch-name        { font-size: 16px; font-weight: 700; }
.sch-role-name   { font-size: 14px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }
.sch-role        { font-size: 16px; }

.sch-gate-eyebrow {
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.sch-gate-title { font-size: clamp(25px, 3vw, 34px); font-weight: 700; letter-spacing: -0.02em; }
.sch-gate-note  { font-family: "Iowan Old Style", "Hoefler Text", Palatino, Georgia, serif; font-size: 19px; line-height: 1.85; }
.sch-btn        { font-size: 16px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; }

/* ==========================================================================
   YEAR TOOLS
   ========================================================================== */
/* A second row of controls, shown only while editing. Copying a whole month
   between years is a bigger action than editing one day, so it is set apart
   rather than mixed in with Save and Cancel. */
.sch-year-tools {
  border-top: 1px solid var(--ad-rule, #D5DACE);
  margin-top: 4px;
  padding-top: 14px;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.sch-year-label {
  font-family: var(--ad-display, sans-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ad-muted, #6C7269);
  margin-right: 4px;
}
.sch-year-note {
  font-family: var(--ad-body, serif);
  font-size: 17px;
  color: var(--ad-muted, #6C7269);
}
.sch-year-tools .sch-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

@media (max-width: 767px) {
  .sch-year-tools { flex-direction: column; align-items: stretch; }
  .sch-year-tools .sch-btn { width: 100%; }
  .sch-year-note { text-align: center; }
}

@media print {
  .sch-year-tools { display: none !important; }
}

/* ==========================================================================
   HIDDEN ATTRIBUTE
   ========================================================================== */
/* An author-level display value silently defeats [hidden]. Anything in the
   schedule that carries the attribute should obey it. */
.sch [hidden],
.sch-tools[hidden],
.sch-year-tools[hidden] {
  display: none !important;
}

/* ==========================================================================
   DIALOG TOKENS
   ========================================================================== */
/* The dialog is appended to <body>, so it sits outside .sch and never inherited
   the palette. Same values, second scope. */
.sch-dialog {
  --s-ink: #14100C;
  --s-paper: #EFF1EC;
  --s-surface: #FFFFFF;
  --s-gold: #A87524;
  --s-green: #0F5D4E;
  --s-clay: #A34032;
  --s-communion: #9B2C1B;   /* the outline's .so-communion, matched exactly */
  --s-text: #1B1F1A;
  --s-text2: #5A6158;
  --s-muted: #6C7269;
  --s-rule: #D5DACE;
  --s-display: Futura, "Avenir Next", "Century Gothic", "Trebuchet MS", sans-serif;
  --s-body: "Iowan Old Style", "Hoefler Text", Palatino, Georgia, serif;

  font-family: var(--s-body);
  color: var(--s-text);
}

/* A tall day can outgrow the viewport; let the panel scroll rather than push
   its buttons off the bottom of the screen. */
.sch-panel {
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}

/* ==========================================================================
   WIDER CELLS AND A SCROLLING CALENDAR
   ========================================================================== */

/* ---- give the rows their measure back ------------------------------------ */
/* Stated here because page-data max_width loses to the overflow guard in
   adinkra.css - see the note in that file. */
/* BOTH properties, and the width is the one that was missing.
 *
 * adinkra.css sets `.ad-sec .et_pb_row { width: 90% }`, so raising max-width
 * alone only lifts a ceiling the row was not touching. Measured at 1280: the row
 * was 1152px before this change and 1152px after it - the edit read as done and
 * changed nothing on the screen most people use. It only ever widened a monitor
 * big enough for 90% to exceed the old 1560px cap.
 *
 * width takes it to 97% everywhere; max-width still stops it at 1760 so a very
 * wide monitor does not get a roster stretched into unreadable columns. */
.ad-sched-row {
	width: 97% !important;
	max-width: min(1760px, 97%) !important;
}
.ad-ev-row {
	width: 97% !important;
	max-width: min(1760px, 97%) !important;
}

/* ---- the grid ------------------------------------------------------------ */
/* The scroller is inert at desktop widths: the grid fits, so nothing scrolls.
   It earns its keep below 900px. */
.sch-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* Cells can be shorter now there is room to be wider. min-height keeps empty
   days from collapsing into slivers and losing the shape of the month. */
.sch-cell { min-height: 112px; }

/* Names are what make cells tall. At 1760px a column is ~250px, which holds
   most of them on one line; the rest wrap once instead of three times.

   Widened from 1560 in August 2026. The ceiling is not the design's 1180px
   measure - that governs READING copy, and a roster is a table scanned by column,
   not a paragraph. It is the monitor: 1760 plus the 97% still leaves a margin at
   1920, which is what the office actually uses, and below about 1815 the
   percentage takes over so nothing is clipped on a laptop. */
.sch-role { line-height: 1.4; }

@media (max-width: 1100px) {
  .sch-cell { min-height: 104px; font-size: 14px; }
}

/* ---- phones and small tablets: keep the calendar ------------------------- */
@media (max-width: 900px) {
  /* Seven columns, each wide enough to read, scrolling sideways inside
     .sch-scroll rather than stacking into a list. */
  .sch-head,
  .sch-body { grid-template-columns: repeat(7, minmax(150px, 1fr)); }

  .sch-scroll .sch-grid { min-width: 1050px; }   /* 7 x 150 */

  /* The scroll container needs to look scrollable, or nobody swipes it. */
  .sch-scroll {
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .sch-scroll::-webkit-scrollbar { height: 8px; }
  .sch-scroll::-webkit-scrollbar-thumb {
    background: var(--s-rule);
    border-radius: 4px;
  }
}

@media (max-width: 640px) {
  .sch-head,
  .sch-body { grid-template-columns: repeat(7, minmax(150px, 1fr)); }
  .sch-scroll .sch-grid { min-width: 1050px; }   /* 7 x 150 */

  .sch-cell { min-height: 118px; padding: 8px 9px 10px; }
  .sch-daynum { font-size: 16px; }

  /* Abbreviated headers so seven of them fit the scrolled width. */
  .sch-dow { font-size: 13px; padding: 10px 4px; letter-spacing: 0.12em; }

  /* The +2pt bump further up the file lands after the 900px block and undoes
     its 13px, so names were rendering at 16px in a 150px column and wrapping
     to two lines each. Restated here, at the end, where it wins. */
  .sch-event-title,
  .sch-role { font-size: 13.5px; line-height: 1.35; }
  .sch-role-name,
  .sch-event-time { font-size: 12.5px; }
  .sch-cell { font-size: 13.5px; }
}

/* ==========================================================================
   ROLE LABEL ABOVE THE NAMES
   ========================================================================== */
.sch-role {
  display: block;
  margin-bottom: 9px;
}
.sch-role:last-child { margin-bottom: 0; }

/* The label: quiet, and on its own line. */
.sch-role-name {
  display: block;
  font-family: var(--s-display);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s-muted);
  line-height: 1.3;
  margin-bottom: 1px;
}

/* The bracketed time beside an event title - "(2100 - 0000)" - is the same kind
   of information as a time used as a role label - "0500 - 0530" - so the two
   should not be different sizes. It had no size of its own and inherited the
   title's, which made it the larger of the pair.

   It lives inside .sch-event-title, and a child's own font-size ignores the
   parent's breakpoints, so it is restated alongside .sch-role-name at each one
   rather than left to follow the title down. */
.sch-event-time {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  line-height: 1.3;
  margin-bottom: 6px;   /* the gap before the first role label */
}

/* The names: what the cell is actually for. Colour comes from the event type
   rules further up, so only weight and size are set here. */
.sch-role-people {
  display: block;
  font-family: var(--s-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
}

/* A little more air between one duty and the next now that each is two lines. */
.sch-event { margin-bottom: 12px; }
.sch-event:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .sch-role-name,
  .sch-event-time  { font-size: 11.5px; letter-spacing: 0.1em; }
  .sch-role-people { font-size: 13.5px; }
  .sch-role { margin-bottom: 7px; }
  .sch-event { margin-bottom: 10px; }
}

@media print {
  .sch-role-name,
  .sch-event-time  { font-size: 7pt; letter-spacing: 0.08em; }
  .sch-role-people { font-size: 8.5pt; }
  .sch-role { margin-bottom: 4px; }
  .sch-event { margin-bottom: 6px; }
}

/* ==========================================================================
   VIEWER MONTH LIMIT
   ========================================================================== */
/* Same box as .sch-nav so the month heading does not shift when an arrow is
   unavailable, but plainly inert - no border, no hover, no pointer. */
.sch-nav-off {
  font-family: var(--s-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s-rule);
  padding: 10px 14px;
  border: 1px solid transparent;
  cursor: default;
  user-select: none;
}

.sch-scope-note {
  font-family: var(--s-body);
  font-size: 16px;
  color: var(--s-muted);
  margin: -6px 0 18px;
  max-width: 62ch;
}

@media print {
  /* Neither belongs on a printed roster. */
  .sch-nav-off,
  .sch-scope-note { display: none; }
}

/* ==========================================================================
   MOBILE: LET THE NAMES SCALE
   ========================================================================== */
/* .sch-name sets its own 16px further up the file, which meant the names
   ignored every size set on their container. Inheriting puts .sch-role-people
   back in charge, so one declaration moves a label and its names together. */
.sch-name { font-size: inherit; }

/* Desktop keeps the size it had - stated here because the rule above just
   removed the 16px these were relying on. */
.sch-role-people { font-size: 15px; }

@media (max-width: 900px) {
  /* Wide enough for a full name on one line. Seven of these scroll sideways
     inside .sch-scroll; the page itself never does. */
  .sch-head,
  .sch-body { grid-template-columns: repeat(7, minmax(190px, 1fr)); }
  .sch-scroll .sch-grid { min-width: 1330px; }   /* 7 x 190 */

  .sch-cell { min-height: 104px; padding: 8px 10px 10px; }
  .sch-daynum { font-size: 16px; margin-bottom: 4px; }

  .sch-event-title { font-size: 14px; }
  .sch-role-name,
  .sch-event-time  { font-size: 11px; letter-spacing: 0.1em; }
  .sch-role-people { font-size: 14px; }

  .sch-role  { margin-bottom: 6px; }
  .sch-event { margin-bottom: 10px; }
}

@media (max-width: 640px) {
  /* Same shape as the block above - the two breakpoints only differed to
     abbreviate the weekday headings. */
  .sch-head,
  .sch-body { grid-template-columns: repeat(7, minmax(190px, 1fr)); }
  .sch-scroll .sch-grid { min-width: 1330px; }

  .sch-cell { min-height: 104px; }
  .sch-dow { font-size: 13px; padding: 10px 4px; letter-spacing: 0.12em; }
}

/* ==========================================================================
   DAY / WEEK / MONTH VIEWS
   ========================================================================== */

/* ---- the switch ---------------------------------------------------------- */
.sch-views {
  display: flex;
  border: 1px solid var(--s-rule);
  background: var(--s-surface);
  margin-bottom: 16px;
}
.sch-view {
  flex: 1 1 0;
  padding: 11px 6px;
  font-family: var(--s-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s-muted);
  background: none;
  border: 0;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.sch-view:hover { color: var(--s-text); }
.sch-view.is-on { background: var(--s-ink); color: #F2EDE3; }
.sch-view:focus-visible { outline: 2px solid var(--s-gold); outline-offset: -2px; }

/* ---- which one shows ----------------------------------------------------- */
/* Every view is hidden by default and one is switched back on, so there is
   never a moment where two are visible. */
.sch-v { display: none; }

/* Nothing chosen yet: month on a laptop, day on a phone. */
@media (min-width: 901px) { .sch:not([data-view]) .sch-v-month { display: block; } }
@media (max-width: 900px) { .sch:not([data-view]) .sch-v-day   { display: block; } }

.sch[data-view="day"]   .sch-v-day   { display: block; }
.sch[data-view="week"]  .sch-v-week  { display: block; }
.sch[data-view="month"] .sch-v-month { display: block; }

/* Editing lives in the month grid, so the toolbars belong to it. Hiding them
   elsewhere rather than moving them keeps one source of truth in the markup.

   Named views only. `:not([data-view="month"])` also matches an element with no
   attribute at all - which is every first visit - so it hid the toolbar on a
   laptop showing the month, where editing is the whole point. */
.sch[data-view="day"]  .sch-tools,
.sch[data-view="week"] .sch-tools { display: none; }

/* Nothing chosen yet and a narrow screen: day is showing, so no toolbar. */
@media (max-width: 900px) {
  .sch:not([data-view]) .sch-tools { display: none; }
}

/* .sch-btn-events was the way through to the year's church calendar, on this
   toolbar. It moved to the top of the events panel below the roster, where the
   calendar it opens actually lives - see icgc_events_shortcode(). Nothing here
   renders it any more, so nothing here styles it. */

/* ---- day ----------------------------------------------------------------- */
.sch-daycard {
  background: var(--s-surface);
  border: 1px solid var(--s-rule);
  padding: 20px 18px 22px;
}
.sch-daycard.is-today { border-color: var(--s-gold); }
.sch-daycard-dow {
  margin: 0;
  font-family: var(--s-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s-muted);
}
.sch-today-tag {
  color: #14100C;
  background: var(--s-gold);
  padding: 2px 7px;
  margin-left: 8px;
  letter-spacing: 0.1em;
}
.sch-daycard-num {
  margin: 3px 0 16px;
  font-family: var(--s-display);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--s-text);
}

/* ---- week ---------------------------------------------------------------- */
.sch-weeklist {
  display: grid;
  gap: 1px;
  background: var(--s-rule);
  border: 1px solid var(--s-rule);
}
.sch-weekrow {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  background: var(--s-surface);
}
.sch-weekrow.is-today { background: #FBF7EF; }
.sch-weekdate {
  padding: 13px 6px;
  text-align: center;
  border-right: 1px solid #EBEEE6;
}
.sch-weekdow {
  display: block;
  font-family: var(--s-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s-muted);
}
.sch-weeknum {
  display: block;
  font-family: var(--s-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--s-text);
}
.sch-weekbody { padding: 13px 14px; min-width: 0; }

/* ---- day and week on a big screen ---------------------------------------
   Both views inherit the row's full 1180px measure, which is right for a month
   of seven columns and far too wide for one day's duties - a card the width of
   the page holding four short lines. Narrowed and centred above the phone
   breakpoint only: on a phone the day view is the default and should keep the
   whole screen.
   ------------------------------------------------------------------------- */
@media (min-width: 901px) {
  .sch-daycard {
    max-width: 560px;
    margin-inline: auto;
    text-align: center;
    padding: 26px 30px 28px;
  }

  /* The role blocks are laid out as label-above-names; centring the block
     itself keeps that pairing together rather than centring each line
     independently, which would break the label away from its names. */
  .sch-daycard .sch-event { text-align: center; }
  .sch-daycard .sch-role,
  .sch-daycard .sch-role-name,
  .sch-daycard .sch-role-people { text-align: center; }
  .sch-daycard .sch-event-title,
  .sch-daycard .sch-event-time { text-align: center; }

  .sch-weeklist {
    max-width: 720px;
    margin-inline: auto;
  }
  .sch-weekbody { text-align: center; }
  .sch-weekbody .sch-role,
  .sch-weekbody .sch-role-name,
  .sch-weekbody .sch-role-people,
  .sch-weekbody .sch-event-title,
  .sch-weekbody .sch-event-time { text-align: center; }
}

/* A day with nothing on it still gets its row - a roster with gaps in it is
   information, and a list that silently skips Tuesday makes the reader count. */
.sch-nothing {
  margin: 0;
  font-family: var(--s-body);
  font-size: 15px;
  font-style: italic;
  color: #9AA096;
}

/* ---- print --------------------------------------------------------------- */
@media print {
  /* The printed sheet is the month, whatever is on screen. */
  .sch-views { display: none; }
  .sch-v-day, .sch-v-week { display: none !important; }
  .sch-v-month { display: block !important; }
}

/* ==========================================================================
   HEADER BAR ON A PHONE
   ========================================================================== */
/* Three columns rather than a wrapping row, so the date always sits between
   its arrows however narrow the screen. */
.sch-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}
.sch-bar .sch-month {
  text-align: center;
  min-width: 0;
  overflow-wrap: break-word;
}

@media (max-width: 560px) {
  /* Just the arrows. The date says what is being looked at; the words
     "Previous" and "Next" were only ever confirming which way an arrow points. */
  .sch-nav-word { position: absolute; width: 1px; height: 1px; overflow: hidden;
                  clip: rect(0 0 0 0); white-space: nowrap; }
  .sch-nav {
    font-size: 19px;
    line-height: 1;
    padding: 12px 15px;   /* a comfortable tap target now the label is gone */
  }
  .sch-bar { gap: 8px; }
  .sch-month { font-size: 25px; }
}

/* ==========================================================================
   ARROWS BESIDE THE DATE
   ========================================================================== */
@media (max-width: 560px) {
  /* The middle column stops stretching, and the group centres as a whole, so
     the arrows sit either side of the date rather than at the screen edges. */
  .sch-bar {
    grid-template-columns: auto minmax(0, max-content) auto;
    justify-content: center;
    gap: 14px;
  }
}


/* ==========================================================================
   MINISTERING BANDS
   ==========================================================================
   Under the calendar in all three views, because the value is one fact about
   the month rather than part of building the roster, and day view is what a
   phone opens on.

   EVERY SELECTOR HERE IS DOUBLED - .sch-bands.sch-bands - and that is not
   style. The schedule page carries `ad-sec`, whose body rule is
   `.ad-sec .et_pb_text_inner p` at (0,2,1): 19px, a 68ch measure and auto side
   margins. A single class loses to it, and the way it loses is silent - the
   rows rendered 187px in from the card they sit inside, with no warning
   anywhere. Doubling reaches (0,3,0) and settles it. Same reason outline.css
   doubles .so.so; the heading rules (.ad-sec h2, centred, up to 47px) are the
   other half of the same problem.
   ========================================================================== */
.sch-bands.sch-bands {
  margin: 28px 0 0;
  padding: 20px 22px;
  background: var(--s-surface);
  border: 1px solid var(--s-rule);
  border-radius: 3px;
  /* content-box is the default and the padding above would push a 100%-wide
     child past the card. The mobile rules below do make the fields 100%. */
  box-sizing: border-box;
}
.sch-bands.sch-bands .sch-bands-title {
  font-family: var(--s-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--s-ink);
  margin: 0 0 4px;
}
.sch-bands.sch-bands .sch-bands-note,
.sch-bands.sch-bands .sch-bands-hint {
  font-family: var(--s-body);
  font-size: 15px;
  color: var(--s-muted);
  margin: 0 0 16px;
  max-width: 62ch;
  margin-inline: 0;   /* the ad-sec rule centres a <p> inside its measure */
}
.sch-bands.sch-bands .sch-bands-hint { margin-bottom: 12px; }
.sch-bands.sch-bands .sch-bands-saved {
  font-family: var(--s-display);
  font-size: 14px;
  color: var(--s-gold);
  margin: 0 0 14px;
  margin-inline: 0;
  max-width: none;
}

/* Read-only: the same two facts, without pretending they are controls. */
.sch-bands.sch-bands .sch-bands-read { margin: 0; }
.sch-bands.sch-bands .sch-bands-read dt {
  font-family: var(--s-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s-muted);
}
.sch-bands.sch-bands .sch-bands-read dd {
  font-family: var(--s-body);
  font-size: 18px;
  color: var(--s-ink);
  margin: 2px 0 14px;
}
.sch-bands.sch-bands .sch-bands-read dd:last-child { margin-bottom: 0; }

/* One grid for both rows, so the selects line up under each other whatever the
   labels say. A fixed label width fitted one of these two and not the other,
   and 7px of drift between two related controls reads as a mistake. */
.sch-bands.sch-bands .sch-bands-rows {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr);
  align-items: center;
  gap: 12px 14px;
}
.sch-bands.sch-bands .sch-bands-row { display: contents; }

.sch-bands.sch-bands .sch-bands-add {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.sch-bands.sch-bands .sch-bands-label {
  font-family: var(--s-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--s-ink);
  margin: 0;
}
.sch-bands.sch-bands .sch-bands-select,
.sch-bands.sch-bands .sch-bands-input {
  font-family: var(--s-body);
  font-size: 16px;   /* 16px or iOS zooms the page when the field is focused */
  color: var(--s-ink);
  background: var(--s-surface);
  border: 1px solid var(--s-rule);
  border-radius: 2px;
  padding: 9px 11px;
  min-height: 44px;
  box-sizing: border-box;
}
.sch-bands.sch-bands .sch-bands-default {
  font-family: var(--s-body);
  font-size: 14px;
  font-style: italic;
  color: var(--s-muted);
}
.sch-bands.sch-bands .sch-bands-actions { margin: 18px 0 0; }

.sch-bands.sch-bands .sch-bands-manage {
  margin: 18px 0 0;
  border-top: 1px solid var(--s-rule);
  padding-top: 14px;
}
.sch-bands.sch-bands .sch-bands-manage summary {
  font-family: var(--s-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--s-gold);
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.sch-bands.sch-bands .sch-bands-list {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  max-width: 420px;
}
.sch-bands.sch-bands .sch-bands-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--s-rule);
}
.sch-bands.sch-bands .sch-bands-name {
  font-family: var(--s-body);
  font-size: 16px;
  color: var(--s-ink);
}
.sch-bands.sch-bands .sch-bands-drop {
  font-family: var(--s-display);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--s-clay);
  background: none;
  border: 0;
  padding: 10px 4px;   /* a 44px target without a visible button */
  cursor: pointer;
  text-decoration: underline;
}

@media (max-width: 700px) {
  /* Label above its select. Two of these labels plus a dropdown do not fit
     across a phone, and letting the grid wrap put the select under the label
     at whatever indent the first column happened to be. */
  .sch-bands.sch-bands { padding: 16px; }
  .sch-bands.sch-bands .sch-bands-rows {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .sch-bands.sch-bands .sch-bands-row {
    display: block;
    margin-bottom: 14px;
  }
  .sch-bands.sch-bands .sch-bands-label { display: block; margin-bottom: 6px; }
  .sch-bands.sch-bands .sch-bands-select,
  .sch-bands.sch-bands .sch-bands-input { width: 100%; }
  .sch-bands.sch-bands .sch-bands-default { display: block; margin-top: 6px; }
}

@media print {
  /* The bands belong on a printed roster; the controls to change them do not.
     Hiding the whole form was the first attempt and it printed the card empty
     for editors - the only people who have the Print button - while viewers
     got both names. The selects stay: a browser prints one as its chosen
     value, which is exactly the line wanted on paper. */
  .sch-bands.sch-bands .sch-bands-manage,
  .sch-bands.sch-bands .sch-bands-actions,
  .sch-bands.sch-bands .sch-bands-default,
  .sch-bands.sch-bands .sch-bands-saved { display: none; }
  .sch-bands.sch-bands { border: 1px solid #000; break-inside: avoid; page-break-inside: avoid; }
  .sch-bands.sch-bands .sch-bands-select { border: 0; padding: 0; min-height: 0; }
}

/* ==========================================================================
   THE TWO PANELS UNDER THE CALENDAR
   ==========================================================================
   Ministering bands on the left, the media team roster on the right. A grid
   rather than floats or a flex row, so the two cards are the same height
   without either knowing about the other - the media table is five rows and
   the bands are two, and matching them by hand would be a number to maintain.

   `align-items: stretch` - the default, and asked for on 15 August 2026. It
   was `start` first, so each card was as tall as its own contents and the two
   ended at different points, which reads as one of them being unfinished
   rather than as two independent cards. Stretched, they always end level.

   The empty space that creates in the shorter card is why the media table
   below is set tight at desktop widths: the pair settles at 408px rather than
   488px, so the equal height is close to the SHORTER card's natural height and
   neither ends up mostly padding. Both halves of that were one decision.

   The margin that used to sit on .sch-bands moves here. Left on the child it
   would apply to both cards inside the grid and add a gap above only one of
   them, because the media panel is not always rendered.
   ========================================================================== */
.sch-panels.sch-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: stretch;
  margin: 28px 0 0;
}
.sch-panels.sch-panels > .sch-bands.sch-bands { margin-top: 0; }

/* One column below 900px. Not 600 like the rest of this file: two cards each
   holding a four-column table are unreadable side by side long before a phone,
   and the media table is the wider of the two. */
@media (max-width: 900px) {
  .sch-panels.sch-panels { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MEDIA TEAM
   ==========================================================================
   Doubled selectors throughout, for the reason given above the bands: the
   schedule page carries `ad-sec`, whose body rule beats a single class and
   silently indents everything by 187px inside its own card.
   ========================================================================== */
.sch-media.sch-media {
  padding: 20px 22px;
  background: var(--s-surface);
  border: 1px solid var(--s-rule);
  border-radius: 3px;
  box-sizing: border-box;
}
/* Every value here is copied from .sch-bands-title on purpose, including the
   ones that look like defaults. The two cards sit side by side, so a heading
   that differs in letterspacing or case does not read as a variation - it reads
   as one of them being broken. The first draft set letter-spacing: .01em and no
   text-transform, and the pair rendered as "MINISTERING BANDS" beside a plain
   "Media Team". Only the bottom margin differs, because a table follows this
   and two label rows follow that. */
.sch-media.sch-media .sch-media-title {
  font-family: var(--s-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  color: var(--s-ink);
  margin: 0 0 12px;
}
.sch-media.sch-media .sch-media-saved,
.sch-media.sch-media .sch-media-empty,
.sch-media.sch-media .sch-media-hint {
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 12px;
  max-width: none;      /* the ad-sec 68ch measure has no business in a card */
  text-align: left;
}
.sch-media.sch-media .sch-media-saved { color: var(--s-accent, inherit); }

.sch-media.sch-media .sch-media-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sch-media.sch-media .sch-media-table th,
.sch-media.sch-media .sch-media-table td {
  padding: 7px 8px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--s-rule);
}
.sch-media.sch-media .sch-media-table thead th {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .75;
  white-space: nowrap;
}
.sch-media.sch-media .sch-media-table tbody th {
  font-weight: 600;
  white-space: nowrap;
}
.sch-media.sch-media .sch-media-table tr:last-child th,
.sch-media.sch-media .sch-media-table tr:last-child td { border-bottom: 0; }

/* This Sunday. A left rule and weight rather than a fill, so it still reads
   when printed in black and white and does not depend on colour alone. */
.sch-media.sch-media .sch-media-table tr.is-next th[scope="row"] {
  box-shadow: inset 3px 0 0 currentColor;
  padding-left: 12px;
}
.sch-media.sch-media .sch-media-table tr.is-next { font-weight: 600; }

.sch-media.sch-media .sch-media-select,
.sch-media.sch-media .sch-media-input {
  font: inherit;
  padding: 5px 7px;
  min-height: 34px;
  width: 100%;
  box-sizing: border-box;
  background: var(--s-bg, #fff);
  border: 1px solid var(--s-rule);
  border-radius: 2px;
}
.sch-media.sch-media .sch-media-actions { margin: 16px 0 0; }

/* Copied from .sch-bands-manage, values and all. The two cards sit side by
   side and each ends with a disclosure that does the same job, so "Who is on
   the media team" reading as small grey body text beside a gold
   "Change the list of bands" reads as an oversight rather than a difference.
   `display: flex` is also what removes the default disclosure triangle in
   Chrome, which is why the bands has no arrow and this one used to. */
.sch-media.sch-media .sch-media-manage {
  margin: 18px 0 0;
  border-top: 1px solid var(--s-rule);
  padding-top: 14px;
  font-size: 13px;
}
.sch-media.sch-media .sch-media-manage summary {
  font-family: var(--s-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--s-gold);
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.sch-media.sch-media .sch-media-people {
  list-style: none;
  margin: 12px 0;
  padding: 0;
}
.sch-media.sch-media .sch-media-people li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
}
.sch-media.sch-media .sch-media-remove {
  font: inherit;
  font-size: 12px;
  background: none;
  border: 0;
  padding: 4px 6px;
  cursor: pointer;
  /* Not --so-rule and not a grey: that tone measures 1.25:1 and a control set
     in it reads as a broken page rather than a quiet one. Inherits instead. */
  text-decoration: underline;
}
.sch-media.sch-media .sch-media-addrow {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px;
}

/* Tight rows, and ONLY where the cards are side by side.
   This is the "Option A" half of the equal-height decision above: it is what
   brings the pair down to roughly the shorter card's height instead of the
   taller one's. Deliberately fenced above the 900px breakpoint, because it
   takes the selects from 34px to 30px and the rest of this site works to a
   44px touch target. Below 900px the panels stack, nothing needs matching, and
   the full-size controls come back. */
@media (min-width: 901px) {
  .sch-media.sch-media .sch-media-table th,
  .sch-media.sch-media .sch-media-table td { padding: 2px 8px; }
  .sch-media.sch-media .sch-media-select { min-height: 30px; padding: 3px 6px; }
}

@media (max-width: 600px) {
  /* The four-column table is the thing that breaks first on a phone. It keeps
     its shape and scrolls sideways inside the card rather than the card
     spilling out of the page - the same answer the month grid uses. */
  .sch-media.sch-media { overflow-x: auto; }
  .sch-media.sch-media .sch-media-table { min-width: 380px; }
}

@media print {
  /* Same ruling as the bands above: the roster belongs on a printed roster, the
     controls to change it do not, and the selects stay because a browser
     prints one as its chosen value. */
  .sch-media.sch-media .sch-media-manage,
  .sch-media.sch-media .sch-media-actions,
  .sch-media.sch-media .sch-media-saved { display: none; }
  .sch-media.sch-media { border: 1px solid #000; break-inside: avoid; page-break-inside: avoid; }
  .sch-media.sch-media .sch-media-select { border: 0; padding: 0; min-height: 0; }
  .sch-panels.sch-panels { grid-template-columns: 1fr 1fr; }
}