/* ============================================================================
   The calendar page.

   Its own stylesheet because two different hosts render it: youthby.com/calendar,
   which also loads styles.css, and /<town>/calendar, which is a town's own page
   with the town's own palette and none of the names styles.css uses. So every
   color is resolved here, once, against whatever the host defines and falling
   back to the site's own — see .cal-page below. Nothing outside a .cal-page
   subtree is affected.
   ========================================================================== */
.cal-page {
  /* Deliberately reads the host's variables rather than restating them: on the
     main site these come from styles.css, and on a town page they do not exist,
     so the fallbacks are the town-less values. */
  --cal-ink:      var(--ink, #231B34);
  --cal-muted:    var(--muted, #6E6977);
  --cal-line:     var(--line, #E5E0E8);
  --cal-paper:    var(--paper, #FCFAF7);
  --cal-surface:  var(--surface, #FFFFFF);
  --cal-purple:   var(--purple, #5929A7);
  --cal-purple-d: var(--purple-dark, #422080);
  --cal-tint:     var(--purple-tint, #F2EAFA);
  --cal-radius:   var(--radius-panel, 20px);
}

/* The page's container. .shell does this on the main site, but a town page has
   no .shell, so the calendar carries its own and both hosts use it. */
.cal-page-shell {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 clamp(22px, 5vw, 74px);
}

.cal-page {
  padding: clamp(24px, 4vw, 44px) 0 clamp(40px, 6vw, 72px);
  /* styles.css paints a fixed paper-grain layer at z-index 0; .shell lifts
     itself over it and so must this. */
  position: relative;
  z-index: 1;
}

/* ============================================================================
   MY CALENDAR
   The one page here that is not an article. Everything on it comes out of the
   visitor's own browser, so it is noindex and it has no prose to fall back on
   — the empty state has to do the explaining.
   ========================================================================== */
.cal-intro {
  max-width: 62ch;
  font-size: 17px; line-height: 1.6; color: var(--cal-muted);
}
.cal-toolbar {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: flex-end; justify-content: space-between;
  margin-top: 8px; margin-bottom: 20px;
}
.cal-filter { display: flex; flex-direction: column; gap: 5px; }
.cal-filter span {
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--cal-muted);
}
.cal-filter select {
  font: inherit; font-size: 15px; padding: 10px 12px;
  border: 1px solid var(--cal-line); border-radius: 10px;
  background: var(--cal-paper); color: var(--cal-ink); min-width: 190px;
}
.cal-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cal-note {
  margin-top: 18px; margin-bottom: 22px; padding: 12px 16px; border-radius: 10px;
  background: var(--cal-tint); color: var(--cal-ink); font-size: 14px;
}

.cal-layout {
  display: grid; gap: clamp(22px, 3vw, 34px);
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 330px);
  align-items: start;
}
/* Pinned below the header, not under it: 18px put the card on top of the
   toolbar as soon as the page was scrolled. */
.cal-panel-saved { position: sticky; top: 96px; margin-top: 0; }
.cal-panel {
  background: var(--cal-surface);
  border: 1px solid var(--cal-line);
  border-radius: var(--cal-radius);
  padding: clamp(16px, 2vw, 22px);
}
.cal-side { display: flex; flex-direction: column; gap: clamp(22px, 3vw, 34px); }
.cal-side h2, .cal-panel-month h2 {
  font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin: 0;
}
.cal-panel-sub { margin-top: 6px; font-size: 13.5px; color: var(--cal-muted); line-height: 1.5; }

.cal-month-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.cal-month-title { font-variant-numeric: tabular-nums; }
.cal-nav {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--cal-line);
  background: var(--cal-paper); color: var(--cal-ink); font-size: 20px; line-height: 1;
  cursor: pointer;
}
.cal-nav:hover { border-color: var(--cal-purple); color: var(--cal-purple); }

.cal-weekdays {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  margin-top: 18px; gap: 4px;
}
.cal-weekdays span {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--cal-muted); text-align: center;
}
.cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px; margin-top: 6px;
}
.cal-cell {
  min-height: 96px; padding: 6px; border-radius: 10px;
  background: var(--cal-paper); border: 1px solid transparent;
  display: flex; flex-direction: column; gap: 3px; overflow: hidden;
}
.cal-cell.is-outside { opacity: .4; }
.cal-cell.is-today { border-color: var(--cal-purple); }
.cal-daynum { font-size: 12px; font-weight: 700; color: var(--cal-muted); }
.cal-cell.is-today .cal-daynum { color: var(--cal-purple); }

.cal-chip {
  display: flex; align-items: center; gap: 5px;
  border: 0; border-radius: 6px; padding: 3px 6px;
  font: inherit; font-size: 11.5px; font-weight: 600; text-align: left;
  cursor: pointer; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  background: var(--cal-tint); color: var(--cal-purple-d);
}
.cal-chip-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: currentColor; }
.cal-chip-reg-close { background: #FDE7E7; color: #A32424; }
.cal-chip-reg-open { background: #E4F3E6; color: #226B2C; }
.cal-chip-tryout { background: #FCEFD9; color: #8A5A11; }
/* A saved program's dates are on the month before anyone has added them, and
   the dashed edge is the whole difference between "you chose this" and "this
   is what you are considering". */
.cal-chip.is-saved-only {
  background: transparent; border: 1px dashed var(--cal-line); color: var(--cal-muted);
}
.cal-more {
  border: 0; background: none; padding: 0 6px; font: inherit; font-size: 11px;
  font-weight: 700; color: var(--cal-muted); cursor: pointer; text-align: left;
}
.cal-legend {
  display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px;
  font-size: 12px; color: var(--cal-muted);
}
.cal-key { display: inline-flex; align-items: center; gap: 6px; }
.cal-key::before {
  content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--cal-tint);
}
.cal-key-close::before { background: #FDE7E7; }
.cal-key-open::before { background: #E4F3E6; }
.cal-key-tryout::before { background: #FCEFD9; }

.cal-list, .cal-saved-list { list-style: none; margin: 14px 0 0; padding: 0; }
/* Each entry is its own card, not a row divided from the next: the lists are
   things to act on one at a time. */
.cal-list { display: grid; gap: 10px; }
.cal-item {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px; align-items: start;
  padding: 12px; border: 1px solid var(--cal-line); border-radius: 14px;
  background: var(--cal-surface);
}
/* The date sits above the kind inside the text column: as a fourth column in
   a 330px panel it squeezed the name into three lines. */
.cal-item-when { font-size: 11.5px; font-weight: 800; color: var(--cal-ink); }
.cal-item-thumb {
  width: 34px; height: 34px; border-radius: 8px; overflow: hidden;
  display: grid; place-items: center; background: var(--cal-tint, #f2eaf8);
  font-size: 13px; font-weight: 800; color: var(--cal-purple, #5929a7);
}
.cal-item-thumb img { width: 34px; height: 34px; object-fit: cover; display: block; }
.cal-item-kind {
  font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--cal-muted);
}
.cal-item-title { font-size: 14.5px; font-weight: 600; color: var(--cal-ink); margin-top: 2px; }
/* The name opens the mini card; it is a button so it is reachable from a
   keyboard, styled to read as the row's title rather than as a control. */
.cal-item-open {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  font: inherit; font-size: 14.5px; font-weight: 600; color: var(--cal-ink);
  text-align: left; cursor: pointer; margin-top: 2px;
}
.cal-item-open:hover { color: var(--cal-purple, #5929a7); text-decoration: underline; text-underline-offset: 3px; }
.cal-item-open:focus-visible { outline: 2px solid var(--cal-purple, #5929a7); outline-offset: 2px; border-radius: 4px; }

/* ---------- the mini card ---------- */
.cal-pop {
  position: fixed; z-index: 90; width: min(320px, calc(100vw - 24px));
  background: var(--cal-surface, #fff); border: 1px solid var(--cal-line, #e5e0e8);
  border-radius: 14px; box-shadow: 0 18px 48px -20px rgba(35, 27, 52, .45);
  overflow: hidden;
}
.cal-pop-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 12px; text-decoration: none; color: inherit; }
.cal-pop-card:hover .cal-pop-title { color: var(--cal-purple, #5929a7); }
.cal-pop-photo { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; display: block; background: var(--cal-tint, #f2eaf8); }
.cal-pop-photo-mono { display: grid; place-items: center; background: var(--cal-purple, #5929a7); color: #fff; font-size: 26px; font-weight: 800; }
.cal-pop-copy { min-width: 0; display: grid; gap: 3px; align-content: start; }
.cal-pop-kind { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--cal-muted, #6e6977); }
.cal-pop-title { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--cal-ink, #231b34); }
.cal-pop-meta { font-size: 12px; color: var(--cal-muted, #6e6977); line-height: 1.4; }
.cal-pop-go { margin-top: 4px; font-size: 12.5px; font-weight: 700; color: var(--cal-purple, #5929a7); }
.cal-item-meta { font-size: 12.5px; color: var(--cal-muted); margin-top: 2px; }
.cal-item-flag {
  font-size: 11.5px; font-weight: 700; color: var(--cal-purple); margin-top: 4px;
}
.cal-item-go {
  font-size: 12.5px; font-weight: 700; color: var(--cal-purple);
  text-decoration: none; white-space: nowrap;
}
.cal-item-go:hover { text-decoration: underline; }
.cal-blank { margin-top: 12px; font-size: 13.5px; color: var(--cal-muted); line-height: 1.5; }

.cal-saved-list { display: grid; gap: 10px; }
/* The search saved from the results page, above the saved programs: the
   question a parent asked, with the one button that asks it again. */
.cal-saved-search {
  margin-top: 14px; padding: 11px 13px;
  border: 1px solid var(--cal-line); border-radius: 12px; background: var(--cal-surface);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.cal-saved-search p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--cal-muted); }
.cal-saved-search strong { display: block; color: var(--cal-ink); }
.cal-saved-search .btn { white-space: nowrap; }
/* A saved program is a picture, a name and one line of facts, with its four
   small actions in a single row beneath. The actions cannot sit beside the
   name: four chips are wider than the column the shortlist lives in, and a
   grid that gives them their natural width leaves the name at zero. */
.cal-saved-item {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px;
  align-items: center;
  padding: 9px 11px; border: 1px solid var(--cal-line); border-radius: 12px;
  background: var(--cal-surface); cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.cal-saved-item:hover { border-color: #cbb7e4; box-shadow: 0 10px 24px -18px rgba(35, 27, 52, .45); }
.cal-saved-link { color: inherit; text-decoration: none; }
.cal-saved-link:hover { color: var(--cal-purple, #5929a7); text-decoration: underline; text-underline-offset: 3px; }
/* One small photograph, the name, and one line of facts. The buttons sit
   under them as a row of chips rather than as a column down the side, which
   is what made the row read as five stacked actions with a name attached. */
.cal-saved-main {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 26px;
  gap: 9px; align-items: center; min-width: 0;
}
.cal-saved-thumb {
  width: 38px; height: 38px; border-radius: 8px; object-fit: cover;
  display: block; background: var(--cal-tint, #f2eaf8);
}
.cal-saved-thumb-mono {
  display: grid; place-items: center;
  background: var(--cal-purple, #5929a7); color: #fff;
  font-size: 16px; font-weight: 800;
}
.cal-saved-copy { min-width: 0; }
.cal-saved-name { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.cal-saved-meta { font-size: 12.5px; color: var(--cal-muted); margin-top: 2px; }
.cal-saved-remove {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  border: 1px solid var(--cal-line); background: var(--cal-surface, #fff);
  color: var(--cal-muted); font-size: 17px; line-height: 1; cursor: pointer;
}
.cal-saved-remove:hover { color: #a3262c; border-color: #e7c5c7; background: #fdf4f4; }
.cal-on-badge { background: #efe9f7; color: var(--cal-purple, #5929a7); }
.cal-saved-acts { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: flex-start; }
/* Registered is a third state, and it has to look like one: not the shortlist
   and not the month, the thing a family has actually signed up for. */
.cal-reg-badge {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px;
  background: #E4F3E6; color: #226B2C; font-size: 10.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; vertical-align: 1px;
}
.cal-mini[aria-pressed="true"] { border-color: #226B2C; color: #226B2C; background: #F1F9F2; }
.cal-reminders { margin-top: 12px; }
.cal-reminders .cal-item-reg-close .cal-item-kind { color: #A3262C; }
.cal-mini {
  border: 1px solid var(--cal-line); background: var(--cal-paper); border-radius: 7px;
  padding: 4px 8px; font: inherit; font-size: 11.5px; font-weight: 700;
  color: var(--cal-purple); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.cal-mini:hover { border-color: var(--cal-purple); }
.cal-mini-unsave { color: var(--cal-muted); border-color: transparent; background: none; padding-left: 4px; padding-right: 4px; font-weight: 600; }
.cal-mini-unsave:hover { color: #A3262C; border-color: #E7C5C7; background: #FDF4F4; }
.cal-mini-note { font-size: 11.5px; color: var(--cal-muted); max-width: 130px; text-align: right; }

.cal-empty { text-align: center; padding: clamp(30px, 5vw, 54px) 0; }
.cal-empty h2 { font-size: 20px; font-weight: 800; }
.cal-empty p { margin: 10px auto 18px; max-width: 46ch; color: var(--cal-muted); }

/* ---------------------------------------------------------------------------
   The export dialog.

   Every rule it needs is here, scoped to .cal-export, because its two hosts do
   not share a stylesheet: youthby.com/calendar loads styles.css and a town's
   page loads only this file plus the town's own inlined CSS. The dialog used to
   wear classes from styles.css — .btn, .btn-quiet, .signin-provider,
   .signin-close — which the town host never sends, so on a town's calendar the
   three provider buttons arrived with no border, no color and no close
   affordance at all.
   --------------------------------------------------------------------------- */
.cal-export {
  /* The reset both hosts open with — `* { margin: 0 }` on the main site, and
     `*, *::before, *::after { margin: 0 }` in a town's shell — is an author
     rule, so it beats the UA's `dialog:modal { margin: auto }` that does the
     centring. Without this line the dialog opens flush into the top-left
     corner of the viewport rather than the middle of it. */
  margin: auto;
  width: min(452px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: 0;
  border-radius: 20px;
  padding: clamp(26px, 5vw, 34px);
  background: var(--cal-surface, #fff);
  color: var(--cal-ink, #231B34);
  font-family: "DM Sans", "Inter", system-ui, -apple-system, sans-serif;
  box-shadow: 0 40px 80px -40px rgba(35,27,52,.55), 0 0 0 1px rgba(35,27,52,.05);
  /* .cal-page resolves these for the calendar; the dialog is its sibling, not
     its child, so it restates them against the same host variables. */
  --cal-ink:      var(--ink, #231B34);
  --cal-muted:    var(--muted, #6E6977);
  --cal-line:     var(--line, #E5E0E8);
  --cal-purple:   var(--purple, #5929A7);
  --cal-purple-d: var(--purple-dark, #422080);
  --cal-tint:     var(--purple-tint, #F2EAFA);
}
.cal-export::backdrop {
  background: rgba(35,27,52,.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.cal-export-close {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px;
  display: grid; place-items: center;
  color: var(--cal-muted);
  background: none; border: 0; border-radius: 9px;
  cursor: pointer;
  transition: background-color .18s, color .18s;
}
.cal-export-close:hover { background: var(--cal-tint); color: var(--cal-purple); }
.cal-export-close:focus-visible { outline: 2px solid var(--cal-purple); outline-offset: 2px; }

.cal-export-badge {
  display: grid; place-items: center;
  width: 44px; height: 44px; margin-bottom: 16px;
  border-radius: 13px;
  background: var(--cal-tint); color: var(--cal-purple);
}
.cal-export h2 {
  margin: 0 0 8px;
  font-size: 21px; font-weight: 800; letter-spacing: -0.012em;
  color: var(--cal-ink);
}
.cal-export-head p { margin: 0; font-size: 14.5px; line-height: 1.58; color: var(--cal-muted); }

.cal-export-providers { display: grid; gap: 9px; margin-top: 22px; }
.cal-export-provider {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 13px 16px;
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  color: var(--cal-ink);
  background: var(--cal-surface);
  border: 1.5px solid var(--cal-line);
  border-radius: 11px;
  cursor: pointer;
  transition: border-color .18s, background-color .18s;
}
.cal-export-provider:hover { border-color: var(--cal-purple); background: var(--cal-tint); }
.cal-export-provider:focus-visible { outline: 2px solid var(--cal-purple); outline-offset: 2px; }
/* The marks are drawn at a fixed size and must not be squeezed by the label
   next to them. Google's is four colors and keeps them; Apple's and the
   envelope take the button's own text color. */
.cal-export-mark { flex: none; }

.cal-export-or {
  display: flex; align-items: center; gap: 12px;
  margin: 18px 0;
  font-size: 11.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--cal-muted);
}
.cal-export-or::before, .cal-export-or::after {
  content: ""; flex: 1; height: 1px; background: var(--cal-line);
}

.cal-export-go {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 15px 18px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  color: #fff;
  background: var(--cal-purple);
  border: 0; border-radius: 11px;
  cursor: pointer;
  transition: background-color .2s;
}
.cal-export-go:hover { background: var(--cal-purple-d); }
.cal-export-go:focus-visible { outline: 2px solid var(--cal-purple-d); outline-offset: 2px; }

.cal-export-note {
  margin: 16px 0 0; padding-top: 14px;
  border-top: 1px solid var(--cal-line);
  font-size: 12.5px; line-height: 1.55; color: var(--cal-muted);
}

@media (max-width: 1180px) {
  .cal-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
  .cal-panel-month { grid-column: 1; grid-row: 1; }
  .cal-side { grid-column: 2; grid-row: 1; }
  .cal-panel-saved { grid-column: 1 / -1; grid-row: 2; position: static; }
}
@media (max-width: 900px) {
  .cal-layout { grid-template-columns: minmax(0, 1fr); }
  .cal-panel-month, .cal-side, .cal-panel-saved { grid-column: auto; grid-row: auto; }
}
@media (max-width: 720px) {
  /* The month grid is the wrong shape for a phone: seven columns at 390px is
     a 50px cell, and the chips inside it stop being readable. The list is the
     same data in the order it will actually be lived. */
  .cal-panel-month { display: none; }
  .cal-item { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cal-item-go { justify-self: start; }
  .cal-actions { width: 100%; }
  .cal-actions .btn { flex: 1; }
  .cal-filter { width: 100%; }
  .cal-filter select { width: 100%; }
}


/* ---------- the saved shortlist, given its own row -------------------------
   It used to sit third in the right-hand rail, under a fold long enough that a
   parent could reasonably conclude their saved programs were not on the page at
   all. It has room of its own now, which is also where its three controls per
   program want to be. */
.cal-panel-saved { margin-top: 0; }
.cal-panel-saved .cal-panel-sub { max-width: 70ch; }
.cal-panel-saved .cal-saved-list { margin-top: 18px; }
.cal-panel-saved .cal-saved-acts { flex-direction: row; align-items: center; }

.cal-elsewhere {
  margin-top: clamp(20px, 3vw, 30px);
  font-size: 15px;
  color: var(--cal-muted);
}
.cal-elsewhere a { color: var(--cal-purple); font-weight: 700; }
.cal-elsewhere a:hover { text-decoration: underline; }

/* On a phone the actions are thumb targets in their own row under the name. */
@media (max-width: 720px) {
  .cal-panel-saved .cal-saved-item { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .cal-saved-acts { flex-wrap: wrap; justify-content: flex-start; }
  .cal-panel-saved .cal-saved-acts { justify-content: flex-start; flex-wrap: wrap; }
  .cal-panel-saved .cal-mini { min-height: 44px; display: inline-flex; align-items: center; }
}

/* The page's own header is a label and a line of explanation, not a landing
   hero: a parent who has clicked My Calendar wants the month, and the top of
   the page should not be the reason it is below the fold. */
.info-hero { padding: 10px 0 2px; }
.info-hero h1 { font-size: clamp(23px, 2.6vw, 30px); margin-top: 3px; }
.info-hero .eyebrow { margin-bottom: 2px; }
.info-hero-lede { margin-top: 3px; font-size: 13.5px; }
@media (max-width: 620px) {
  .info-hero { padding: 12px 0 4px; }
  .info-hero-lede { font-size: 14px; }
}

/* The export sheet offers two working ways out — a per-date Google link in
   the list, and one file for the whole plan — rather than doors that lead
   nowhere. */
.cal-export-actions { display: grid; gap: 10px; padding: 4px 24px 6px; }
.cal-export-actions .cal-export-go { width: 100%; margin: 0; }
.cal-export-alt {
  width: 100%; min-height: 44px; border: 1px solid var(--cal-line, #E5E0E8);
  border-radius: 10px; background: none; color: var(--cal-ink, #231B34);
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
.cal-export-alt:hover { background: rgba(89, 41, 167, 0.06); }

html{scrollbar-gutter:stable}

/* ============================================================================
   A DESKTOP CALENDAR THAT USES THE DESKTOP
   Saved programs on the left, the month in the middle, and what is closing
   or coming up on the right — three columns across the whole window, so the
   month keeps seven readable day cells without anything stacking below it.
   ========================================================================== */
@media (min-width:1021px) {
  .cal-page-shell {
    max-width: none;
    padding-left: clamp(16px, 2.2vw, 34px);
    padding-right: clamp(16px, 2.2vw, 34px);
  }
  .cal-page { padding-top: clamp(10px, 1.6vw, 18px); }
  .cal-toolbar { margin-top: 0; margin-bottom: 14px; }
  .cal-layout {
    grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 330px);
    grid-template-rows: auto;
    gap: clamp(16px, 1.8vw, 26px);
    align-items: start;
  }
  .cal-panel-saved { grid-column: 1; grid-row: 1; position: sticky; top: 96px; }
  .cal-panel-month { grid-column: 2; grid-row: 1; }
  .cal-side { grid-column: 3; grid-row: 1; }
  .cal-grid { min-height: 460px; }
}

/* ---------- Google Calendar ---------- */
/* The one action most parents actually want: the date in the calendar they
   already use. Google's own mark, on a white button, in the same column as
   the other actions. */
.cal-gcal {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #fff; border: 1px solid var(--cal-line); color: var(--cal-ink);
  font-weight: 700;
}
.cal-gcal:hover { border-color: #4285F4; background: #f7fbff; }
.cal-gcal-mark { width: 16px; height: 16px; flex: none; }

@media (min-width:1021px) {
  /* The actions are chips in one wrapping row under the name, sized to their
     own labels rather than stretched into a column. */
  .cal-saved-acts { gap: 5px; }
  .cal-saved-acts .cal-mini { min-height: 28px; padding: 4px 9px; font-size: 11.5px; }
  .cal-saved-acts .cal-mini-note { text-align: left; max-width: none; }
}

/* ---------- the phone's calendar: a list you open --------------------------
   On a phone the month grid is hidden and this takes its place, above the
   saved programs. Closed by default; the summary says how many dates there
   are so it can be judged without opening it. */
.cal-agenda { display: none; }
@media (max-width: 720px) {
  .cal-agenda {
    display: block;
    margin: 0 0 16px;
    border: 1px solid var(--cal-line, #E5E0E8);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
  }
  .cal-agenda > summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px;
    cursor: pointer;
    font-weight: 800;
    font-size: 15px;
    color: var(--cal-ink, #231B34);
  }
  .cal-agenda > summary::-webkit-details-marker { display: none; }
  .cal-agenda > summary::after {
    content: '›';
    margin-left: auto;
    font-size: 20px;
    line-height: 1;
    color: var(--cal-purple, #5929A7);
    transform: rotate(90deg);
    transition: transform .2s ease;
  }
  .cal-agenda[open] > summary::after { transform: rotate(-90deg); }
  .cal-agenda-count {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--cal-purple, #5929A7);
    background: var(--cal-tint, #F2EAFA);
    border-radius: 999px;
    padding: 3px 9px;
  }
  .cal-agenda-body { padding: 4px 14px 16px; }
  .cal-agenda-empty { font-size: 13px; color: var(--cal-muted, #6E6977); margin: 8px 4px 4px; }
  .ag-day { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-top: 1px solid #F4EFF8; }
  .ag-day:first-child { border-top: 0; }
  .ag-date { display: grid; justify-items: center; align-content: start; gap: 0; padding-top: 2px; }
  .ag-dow { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--cal-muted, #6E6977); }
  .ag-num { font-size: 20px; font-weight: 800; line-height: 1.1; color: var(--cal-ink, #231B34); }
  .ag-mon { font-size: 10px; color: var(--cal-muted, #6E6977); }
  .ag-date.is-today .ag-num { color: #fff; background: var(--cal-purple, #5929A7); border-radius: 10px; padding: 0 7px; }
  .ag-items { display: grid; gap: 6px; }
  .ag-item { display: grid; gap: 2px; padding: 9px 12px; border-radius: 10px; background: #F5EFFB; border-left: 4px solid #5929A7; }
  .ag-title { font-size: 13.5px; font-weight: 700; color: #231B34; line-height: 1.35; }
  .ag-meta { font-size: 11.5px; color: #5f5669; }
  .ag-deadline { background: #FDEEF4; border-left-color: #C2427E; }
  .ag-opening { background: #EAF6EE; border-left-color: #1F7A4D; }
  .ag-tryout { background: #FFF6E5; border-left-color: #B7791F; }
  /* The agenda is the calendar on a phone, so the Coming up list is the same
     dates a second time. */
  #cal-upcoming-panel { display: none; }
}

/* A program saved where the provider publishes aid keeps that marker in the
   shortlist: the shortlist is where the fee question gets decided. */
.cal-aid-badge { background: #E7F0E9 !important; color: #2F6B44 !important; }

/* The note is a line of reassurance, not a section; the panels under it need
   room to read as a separate thing. */
@media (max-width: 720px) {
  .cal-note { margin-bottom: 20px; }
}