/* ===========================================================================
   EVENTS: what the agenda component needed once it had a source

   The agenda itself is already drawn. `css/interior-b.css` §6 built the band,
   the 78px date block, the title over its detail line and the time pulled
   right, and left the rows empty because there was no events post type. There
   now is one (plugin/tcf-church/includes/events.php), and this file adds only
   the parts that shell never had:

     - the "Subscribe (iCal) →" link the canvas draws in the head, which was
       deliberately left off while there was no feed to point it at
     - the fuller row on /members/events/, which carries the details paragraph
     - the subscribe panel under the rows
     - the month grid on /members/calendar/, at the bottom of this file

   NOTHING HERE RESTYLES A ROW. If a rule in this file and a rule in
   interior-b.css §6 disagree about the same property, this file is wrong.

   SCOPING. The README asks for page-scoped selectors. The agenda rules below
   follow interior-b.css instead and scope to `:is(.tcf-ct-calendar,
   .tcf-mb-agenda)`, because the same rows appear on Contact, on
   /members/calendar/ and on /members/events/, and scoping half a component by
   page and half by class is how a cascade bug starts.

   The subscribe panel is scoped to its own root class, `.tcf-subscribe`, and
   that is not laziness either: it is placed by a pattern author, and it turned
   out to be placed in a `.tcf-mb-band` panel beside the rows rather than under
   them. Scoped to the agenda band it rendered completely unstyled there -
   measured: a native 40px form button with white text. A component that can be
   dropped anywhere has to be styled by what it is, not by where it landed.
   Nothing else on this site uses the `tcf-subscribe` prefix.
   =========================================================================== */

/* The date block is now a <time> element, so the two spans need a block
   context of their own. interior-b.css already gives each span display:block;
   this only stops the inline <time> from collapsing them onto one line. */
:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__date > time {
  display: block;
}

/* ---------------------------------------------------------------------------
   The head link

   Canvas: brick, 15px/600, on a 1px #D7B4A8 underline three pixels under the
   text. The underline is `text-decoration` rather than a border, because §5.8
   wants a 44px tap target and a border-bottom on a 44px-tall box would leave
   the rule floating half a centimetre below the words.
   --------------------------------------------------------------------------- */
:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__subscribe {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  flex: 0 0 auto;
  font-size: var(--tcf-text-ui);
  font-weight: 600;
  color: var(--tcf-accent);
  text-decoration: underline;
  text-decoration-color: var(--tcf-link-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--tcf-motion-hover) var(--tcf-ease);
}
:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__subscribe:hover,
:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__subscribe:focus-visible {
  color: var(--tcf-accent-strong);
  text-decoration-color: currentColor;
}

/* ---------------------------------------------------------------------------
   The right-hand column

   One paragraph on the canvas, "7:00 pm · Winthrop Dr". With a real source
   there are up to three facts to carry: the time, the place, and how often it
   comes round, so they stack instead of running together behind separators
   that would wrap unpredictably at narrow widths.
   --------------------------------------------------------------------------- */
:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__when {
  text-align: right;
  max-width: 22ch;
}
:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__where,
:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__repeat,
:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__span {
  display: block;
}
/* M-15. The date block on the left of a row names ONE day; on a camp that day
   is only where it starts. The range goes here, in ink rather than muted,
   because on a multi-day event it is the more important half of "when" and the
   row would otherwise say 31 Aug and mean six days. */
:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__span {
  margin-top: 2px;
  font-size: var(--tcf-text-meta);
  color: var(--tcf-ink);
}
/* `muted`, not `tertiary`, and that is not a preference. tertiary measures
   3.32:1 on paper-alt, which check_a11y.py fails, and style.css's own note on
   the token permits it only "on labels of 19px or larger at semibold, and only
   where the label repeats information available elsewhere". This is 14px and it
   is the only place the page says how often something comes round. */
:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__repeat {
  margin-top: 2px;
  font-size: var(--tcf-text-meta);
  color: var(--tcf-muted);
}

/* ---------------------------------------------------------------------------
   The fuller row, on /members/events/

   Same row, two extra parts. Once a row is several lines tall, centring it
   against a 78px date block puts the date beside the middle of the paragraph
   rather than beside the title it belongs to.
   --------------------------------------------------------------------------- */
:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__row--detail {
  align-items: flex-start;
  padding-block: 26px;
}
:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__body {
  margin: 10px 0 0;
  max-width: 62ch;
  font-size: var(--tcf-text-body-sm);
  line-height: var(--tcf-leading-body);
  color: var(--tcf-ink);
}
:is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__body a {
  color: var(--tcf-accent);
  text-decoration: underline;
  text-decoration-color: var(--tcf-link-underline);
  text-underline-offset: 3px;
}
/* The per-event "add this one to my calendar" link was removed on 2026-08-09
   along with the endpoint behind it (see events-ics.php's docblock): the model
   is subscribe once and get everything, and a downloaded copy of one event goes
   stale silently. Its rules went with it rather than being left here waiting
   for a caller that is not coming back. */

/* ---------------------------------------------------------------------------
   The subscribe panel

   The bordered card the rest of the build uses, sat on `paper` inside the
   `paper-alt` band so it reads as an aside to the list rather than another row
   of it.

   The address is printed in full rather than hidden behind a copy button,
   because a copy button is JavaScript and this page currently ships none, and
   because a member setting this up on a laptop for a phone needs to be able to
   see the address to type it.
   --------------------------------------------------------------------------- */
.tcf-subscribe {
  margin-top: var(--tcf-space-6);
  padding: var(--tcf-space-5);
  max-width: 62ch;
  background-color: var(--tcf-page);
  border: 1px solid var(--tcf-rule);
  border-radius: var(--tcf-radius);
}
.tcf-subscribe__heading {
  margin: 0 0 10px;
  font-family: var(--tcf-font-display);
  font-weight: 400;
  font-size: var(--tcf-text-card);
  line-height: var(--tcf-leading-card);
  color: var(--tcf-ink);
}
.tcf-subscribe__lede,
.tcf-subscribe__google {
  margin: 0 0 14px;
  max-width: none;
  font-size: var(--tcf-text-body-sm);
  line-height: var(--tcf-leading-body);
  color: var(--tcf-muted);
}

/* The confirmation after a reset. Moss is the system's one success colour, and
   §5.1 wants the outcome said in words as well, which the sentence does. */
.tcf-subscribe__done {
  margin: 0 0 14px;
  padding-left: 14px;
  max-width: none;
  border-left: 2px solid var(--tcf-status-success);
  font-size: var(--tcf-text-body-sm);
  line-height: var(--tcf-leading-body);
  color: var(--tcf-ink);
}

.tcf-subscribe__actions {
  margin: 0 0 20px;
  max-width: none;
}
.tcf-subscribe__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 24px;
  font-size: var(--tcf-text-ui);
  font-weight: 600;
  background-color: transparent;
  border: 1px solid var(--tcf-button-border);
  border-radius: var(--tcf-radius);
  transition: color var(--tcf-motion-hover) var(--tcf-ease),
              border-color var(--tcf-motion-hover) var(--tcf-ease);

  /* !important, and measured in the browser before reaching for it - this
     button first shipped brick and underlined. It is beating style.css's
     `.entry-content a:not(...)` prose-link rule, whose nine :not() arguments
     put it around ten classes of specificity, which no sane selector here can
     out-specify. Exactly the precedent set by .tcf-lt-button-onbrick in
     interior-b.css, for exactly the same reason: that rule underlines links in
     running prose, and this is a button.

     -webkit-text-fill-color as well as color, because it overrides `color`
     wherever text is actually painted - setting `color` alone changes the
     computed value and nothing visible, which is the trap recorded three times
     in UI_UX_BRIEF §6. */
  color: var(--tcf-ink) !important;
  -webkit-text-fill-color: var(--tcf-ink) !important;
  text-decoration: none !important;
}
.tcf-subscribe__button:hover,
.tcf-subscribe__button:focus-visible {
  color: var(--tcf-accent-strong) !important;
  -webkit-text-fill-color: var(--tcf-accent-strong) !important;
  border-color: var(--tcf-accent-strong);
}

/* The address itself. `overflow-wrap: anywhere` because it is 60 characters
   with no spaces in it, and a 320px phone would otherwise widen the whole page
   to fit it; §6.4 fails a page that scrolls sideways. */
.tcf-subscribe__url {
  margin: 0 0 20px;
  max-width: none;
}
.tcf-subscribe__url code {
  display: block;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--tcf-text-meta);
  line-height: 1.5;
  color: var(--tcf-ink);
  background-color: var(--tcf-surface);
  border: 1px solid var(--tcf-rule);
  border-radius: var(--tcf-radius);
  overflow-wrap: anywhere;
}

.tcf-subscribe__note {
  padding-top: 18px;
  border-top: 1px solid var(--tcf-rule);
}
/* 15.5, not 14. This is the paragraph that tells a member their calendar link
   is a password, which is the most consequential sentence on the page, and
   §1.2's 15px floor covers anything anyone reads as prose. check_design.py
   failed it as soon as the gates could see the member area at all
   (MAINTAINABILITY_REVIEW M-7). Same ruling as the sign-in card's reset line
   and the directory's scope note. */
.tcf-subscribe__note p {
  margin: 0 0 10px;
  max-width: none;
  font-size: var(--tcf-text-body-sm);
  line-height: var(--tcf-leading-body);
  color: var(--tcf-muted);
}
.tcf-subscribe__note form {
  margin: 0;
}

/* A <button>, because it submits a form, and therefore a control the theme and
   Blocksy both dress as a filled brick button. Measured before this rule: white
   text, a 3px radius and a 40px box. Everything below is undoing that so it
   reads as the quiet text link it is - the destructive-ish action on this panel
   should not be the loudest thing on it.

   .tcf-subscribe .tcf-subscribe__reset, two classes, to out-specify a theme
   rule on `button` or `.wp-element-button` without !important. */
.tcf-subscribe .tcf-subscribe__reset {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  font-family: var(--tcf-font-body);
  font-size: var(--tcf-text-meta);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  color: var(--tcf-accent);
  -webkit-text-fill-color: var(--tcf-accent);
  background: none;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--tcf-link-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color var(--tcf-motion-hover) var(--tcf-ease);
}
.tcf-subscribe .tcf-subscribe__reset:hover,
.tcf-subscribe .tcf-subscribe__reset:focus-visible {
  color: var(--tcf-accent-strong);
  -webkit-text-fill-color: var(--tcf-accent-strong);
  background: none;
  background-color: transparent;
  text-decoration-color: currentColor;
}

@media (max-width: 767px) {
  /* interior-b.css already wraps the row and pushes the right-hand column onto
     its own full-width line under the title. Left-aligned there, because it is
     no longer a column. */
  :is(.tcf-ct-calendar, .tcf-mb-agenda) .tcf-agenda__when {
    text-align: left;
    max-width: none;
  }
  .tcf-subscribe {
    padding: var(--tcf-space-4);
  }
}


/* §1.2 sets a 15px floor on body copy at every breakpoint, and these three are
   body copy rather than metadata: the line telling a member how to get an event
   added, the repeat description, and the subscribe panel's explanation. They
   were at 14. The dates and durations beside them stay at the meta step, which
   §1.2 does put at 14. */


/* ===========================================================================
   THE MONTH GRID  (/members/calendar/)

   The calendar page was built with a month-view slot in it (see
   theme/tcf-child/patterns/page-member-calendar.php) and never had one, so it
   fell back to the same agenda rows its sibling /members/events/ already
   carries - which is why the "See it as a list" link beside it read as
   nonsense. This is that slot filled. The two pages are the two views and
   there is no switcher: /members/calendar/ is the month, /members/events/ is
   the list, and each points at the other.

   THREE THINGS DECIDE EVERY RULE BELOW.

   1. It is a real <table>, so the semantics come free: seven column headers a
      screen reader announces with every cell, and a caption naming the month.
      Nothing here uses a grid of divs pretending to be one.

   2. The event's NAME is plain text in the cell and is never the thing you
      have to hover to read. The fuller record sits inside a native <details>,
      which opens to a click, a tap and Enter alike. A :hover tooltip would be
      unreachable on a phone - which is where a church calendar is actually
      read - and would fail WCAG 1.4.13. It would also be the only thing on
      this page needing JavaScript, and the page ships none.

   3. Below 1024px the seven columns stop being a calendar. The threshold was
      MEASURED rather than picked: a column has to hold "gathering" at the
      15px body floor without breaking it in half, which needs about 100px of
      usable cell, which needs about 1024px of viewport once the page gutter
      and seven lots of cell padding are taken out. At 768px it breaks words;
      at 320px seven columns are a horizontal scrollbar, which §6.4 fails
      outright.

      So below 1024px the same table flattens into a day-by-day stack of the
      days that have something on them - the same month, the same markup, the
      same month arrows, no second copy of anything and no second query. The
      alternative was shrinking the type under the 15px floor, which trades a
      layout problem for a legibility one on the device most likely to be
      reading this in a car park before a meeting.
   =========================================================================== */

.tcf-cal {
  margin-top: var(--tcf-space-5);
}

/* The month, and the arrows. `space-between` rather than a centred month name:
   the title is read, the arrows are aimed at, and putting the title hard left
   keeps it on the same axis as the band heading above it. */
.tcf-cal__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tcf-space-4);
  margin-bottom: var(--tcf-space-4);
}
.tcf-cal__title {
  margin: 0;
  font-family: var(--tcf-font-display);
  font-weight: 400;
  font-size: var(--tcf-text-card);
  line-height: var(--tcf-leading-card);
  color: var(--tcf-ink);
}
.tcf-cal__steps {
  display: flex;
  align-items: center;
  gap: var(--tcf-space-2);
  margin: 0;
  max-width: none;
}

/* 44px square, which is §5.8's target rather than 2.5.8's 24px floor: these are
   the only two controls on the page and they are aimed at repeatedly. */
.tcf-cal__step,
.tcf-cal__now {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  font-size: var(--tcf-text-ui);
  font-weight: 600;
  color: var(--tcf-ink);
  text-decoration: none;
  border: 1px solid var(--tcf-button-border);
  border-radius: var(--tcf-radius);
  transition: color var(--tcf-motion-hover) var(--tcf-ease),
              border-color var(--tcf-motion-hover) var(--tcf-ease);
}
/* A chip, not a button: "This month" is a state to return to rather than an
   action, which is the distinction --tcf-radius-chip exists to draw. */
.tcf-cal__now {
  padding-inline: var(--tcf-space-4);
  border-radius: var(--tcf-radius-chip);
}
.tcf-cal__step:hover,
.tcf-cal__step:focus-visible,
.tcf-cal__now:hover,
.tcf-cal__now:focus-visible {
  color: var(--tcf-accent-strong);
  border-color: var(--tcf-accent-strong);
}
/* The far end of the range. Rendered rather than removed so the row does not
   shuffle sideways on the first and last month, and aria-hidden in the markup
   so nothing announces an arrow that goes nowhere. */
.tcf-cal__step.is-spent {
  color: var(--tcf-muted);
  border-color: var(--tcf-rule);
}

.tcf-cal__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: 0;
}

/* The weekday row is a label, so it takes the eyebrow step. `muted` on the
   band's paper-alt is 5.16:1; `tertiary` would be 3.32:1 and fails, which is
   the same ruling the date block in interior-b.css §6 already carries. */
.tcf-cal__head {
  padding: 0 var(--tcf-space-2) var(--tcf-space-2);
  font-family: var(--tcf-font-body);
  font-size: var(--tcf-text-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tcf-tracking-eyebrow);
  text-transform: uppercase;
  text-align: left;
  color: var(--tcf-muted);
}

.tcf-cal__cell {
  height: 6rem;                       /* a minimum, in table layout */
  padding: var(--tcf-space-2);
  vertical-align: top;
  background-color: var(--tcf-page);
  border: 1px solid var(--tcf-rule);
}
/* The days either side that complete the first and last weeks. The missing
   paper fill is what steps them back - they are the shape of the month, not
   information about it, and they carry no events for the same reason. */
.tcf-cal__cell--outside {
  background-color: transparent;
}
.tcf-cal__cell--outside .tcf-cal__num {
  color: var(--tcf-muted);
}

.tcf-cal__num {
  display: flex;
  align-items: baseline;
  gap: var(--tcf-space-2);
  font-family: var(--tcf-font-display);
  font-size: 1.0625rem;               /* 17px */
  font-weight: 400;
  line-height: 1.2;
  color: var(--tcf-ink);
  font-variant-numeric: tabular-nums;
}
/* Only ever visible in the flattened phone layout, where there is no column
   header left to say which day of the week this is. */
.tcf-cal__weekday {
  display: none;
  order: -1;
  font-family: var(--tcf-font-body);
  font-size: var(--tcf-text-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tcf-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tcf-muted);
}

/* Today is marked three ways, and that is the point: a ring, a colour and the
   word itself, so it survives §5.1's "never colour alone" and survives being
   printed. aria-current="date" carries it to a screen reader. */
/* An outline drawn inwards rather than an inset box-shadow. Visually identical
   and it keeps the promise §1.4 makes: this design has no shadows anywhere, and
   check_design.py is right to ask about one on a cell. */
.tcf-cal__cell.is-today {
  outline: 2px solid var(--tcf-accent);
  outline-offset: -2px;
}
.tcf-cal__cell.is-today .tcf-cal__num {
  color: var(--tcf-accent);
}
.tcf-cal__today {
  display: block;
  margin-top: 2px;
  font-size: var(--tcf-text-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tcf-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tcf-accent);
}

.tcf-cal__events {
  margin: var(--tcf-space-2) 0 0;
  padding: 0;
  list-style: none;
}
.tcf-cal__event {
  margin: 0;
  font-size: var(--tcf-text-body-sm);  /* §1.2's 15px floor: this is the content */
  line-height: 1.3;
}
.tcf-cal__event + .tcf-cal__event {
  margin-top: 2px;
  border-top: 1px solid var(--tcf-rule);
}

/* ---------------------------------------------------------------------------
   A multi-day event (M-15)

   It is drawn as a repeated single-day entry, once in each day's cell, and NOT
   as a bar spanning the week. That is a structural decision rather than a
   stylistic one: the grid is a <table> with one <td> per day, and a spanning
   bar needs `colspan`. A colspanned cell has no day number of its own and no
   room for anything else on those days, so the moment a second event falls on
   the Wednesday of a camp there is nowhere to put it - and Mars Hill Camp,
   Monday 31 August to Saturday 5 September, crosses both a week boundary and a
   month boundary, which would need the bar broken into fragments anyway.

   Repetition costs legibility, so the markup buys it back twice and this rule
   is only the third, quietest part of that: every entry names which day of the
   span it is ("Day 3 of 6") beside the title, and the disclosure opens on the
   whole range ("Monday 31 August to Saturday 5 September 2026") before it says
   anything else. Both are text, so they survive the 1023px flattening into the
   day-by-day stack, where a drawn bar would have had nothing left to span.

   The rule below is a hairline down the left of every day of the span - enough
   to read the six entries as one object at a glance, drawn in the same
   hairline colour as every other divider on the site, and gone entirely on a
   one-day event. --tcf-space-2 of padding rather than a margin so the 36px
   target the disclosure needs is not eaten into.
   --------------------------------------------------------------------------- */
.tcf-cal__event--span > details > .tcf-cal__event-summary {
  padding-left: var(--tcf-space-2);
  border-left: 2px solid var(--tcf-rule);
}
/* The name and the day marker are one line of text, so the marker is muted to
   keep the name the thing that is read first. It inherits everything else from
   .tcf-cal__event-meta, which it also carries. */
.tcf-cal__event-nth {
  white-space: nowrap;
}

/* The disclosure. 36px rather than 44 because a month cell holds up to three of
   these and 44 each turns a busy week into a screenful; 36 clears WCAG 2.5.8's
   24px target with room, and check_design.py measures against that. */
.tcf-cal__event-summary,
.tcf-cal__more-summary {
  /* `block`, not `flex`, so the name and the time run together as ordinary
     inline text and wrap as one sentence would - "Friday gathering 7:00 pm" on
     a wide cell, stacked on a narrow one. As flex items each was a box of its
     own and the disclosure arrow, pushed right with margin-left:auto, dropped
     to a line by itself the moment a title wrapped. */
  position: relative;
  display: block;
  min-height: 2.25rem;
  padding: 6px 16px 6px 0;
  cursor: pointer;
  list-style: none;
  color: var(--tcf-ink);
}
.tcf-cal__event-summary::-webkit-details-marker,
.tcf-cal__more-summary::-webkit-details-marker { display: none; }

.tcf-cal__event-name {
  font-weight: 600;
  /* `break-word`, not `anywhere`: break a word only when it genuinely cannot
     fit on a line of its own. `anywhere` split "gathering" across two lines in
     a column that had room for it. */
  overflow-wrap: break-word;
}
/* A triangle drawn in borders rather than a character, so no screen reader
   announces a stray glyph and no font has to carry it. It rotates on open with
   no transition - §1.7 does not list one, and a disclosure reporting a fact
   should not perform it. */
.tcf-cal__event-summary::after,
.tcf-cal__more-summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0.9rem;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--tcf-muted);
}
details[open] > .tcf-cal__event-summary::after,
details[open] > .tcf-cal__more-summary::after {
  transform: rotate(180deg);
}
.tcf-cal__event-summary:hover,
.tcf-cal__more-summary:hover {
  color: var(--tcf-accent-strong);
}

.tcf-cal__event-more {
  padding: 0 0 var(--tcf-space-2);
}
.tcf-cal__event-meta {
  margin: 0;
  max-width: none;
  font-size: var(--tcf-text-meta);
  line-height: 1.45;
  color: var(--tcf-muted);
}
.tcf-cal__event-note {
  margin: var(--tcf-space-1) 0 0;
  max-width: none;
  font-size: var(--tcf-text-body-sm);
  line-height: var(--tcf-leading-body);
  color: var(--tcf-ink);
}

.tcf-cal__more-summary {
  font-size: var(--tcf-text-meta);
  font-weight: 600;
  color: var(--tcf-accent);
}
.tcf-cal__more > .tcf-cal__events {
  margin-top: 0;
}

.tcf-cal__empty {
  margin: var(--tcf-space-5) 0 0;
  max-width: 620px;
  font-size: var(--tcf-text-body);
  line-height: var(--tcf-leading-body);
  color: var(--tcf-muted);
}

/* ---------------------------------------------------------------------------
   The phone

   Seven columns and a 15px event name need about 100px a column to stay
   readable; below 1024px there is not 700px of content width to give them, and
   forcing it breaks words at 768px and produces the sideways scroll §6.4 fails
   at 320px.

   So the table flattens: one day per block, weekday and date on one line, the
   day's events under it. The days with nothing on them are hidden rather than
   stacked - thirty empty blocks is not a calendar, it is a scroll - and so are
   the adjacent-month days, which were only ever there to square off the grid.
   Today stays even when it is empty, because "where am I" is the one thing the
   stack loses and the one thing worth keeping.
   --------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .tcf-cal__bar { flex-wrap: wrap; }

  .tcf-cal__table,
  .tcf-cal__table tbody,
  .tcf-cal__table tr,
  .tcf-cal__table td { display: block; width: auto; }
  .tcf-cal__table thead { display: none; }

  .tcf-cal__cell--outside,
  .tcf-cal__cell--bare:not(.is-today) { display: none; }

  .tcf-cal__cell {
    height: auto;
    padding: var(--tcf-space-3) var(--tcf-space-4);
    border-width: 0 0 1px;
  }
  /* The today ring survives the flattening unchanged - it is the one landmark
     the stack loses, since there is no grid position left to read it from. */
  .tcf-cal__weekday { display: inline; }

  .tcf-cal__event { font-size: var(--tcf-text-body); }
  .tcf-cal__event-summary { min-height: 2.75rem; }
}