/* Source: https://github.com/TFH-Web/rock-frontend/blob/main/theme/Styles/v18/tfh-master-calendar.css */
/* Converted from theme/Styles/master-calendar.less for the Rock v18 RockV2 theme. */
/* Plain CSS: native nesting + custom properties. No compiler. */

/* Local design tokens (were LESS @variables) */
:root {
  --cal-border         : var(--tfh-border); /*  spec "Rock border" — bordered controls, dividers — v1: #d9d9e4 */
  --cal-chip-bg        : var(--tfh-light-gray); /*  chip fill, banner fill — v1: #f7f8f9 */
  --cal-chip-hover     : var(--color-interface-soft); /*  chip hover, +N more hover — v1: #e8ebee */
  --cal-selected       : var(--color-interface-softer); /*  selected day tint, multi-day chip fill — v1: #eef1f3 */
  --cal-out-month      : var(--color-interface-softer); /*  out-of-month cell — v1: #f7f7f7 */
  --cal-row-hover      : var(--color-interface-softer); /*  agenda row hover — v1: #fafbfc */
  --cal-off-ring       : var(--color-interface-medium); /*  hollow campus dot ring — v1: #c9c9c9 */
  --cal-print-border   : #ccc; /*  print cell ring */
  --cal-tag-bg         : var(--color-interface-softer); /* v1: #f0f2f5 */
  --cal-tag-border     : var(--color-interface-soft); /* v1: #dde3e7 */
  --cal-pending-ink    : var(--color-warning-strong); /* v1: #8a5a00 */
  --cal-pending-bg     : var(--color-warning-soft); /* v1: #fff6e5 */
  --cal-pending-border : var(--color-warning-tint); /* v1: #f0d9a8 */
  --cal-special-bg     : var(--color-warning-soft); /* v1: #fffaf0 */
  --cal-special-ring   : var(--color-warning-tint); /* v1: #f0e0c0 */
  --cal-special-ink    : var(--color-warning-strong); /* v1: #9a6b1a */
  --cal-hero-end       : #534e41;
  --cal-rail-width     : 236px;
  --cal-max-width      : 2200px; /*  ceiling only — fills the block below this */
  --cal-mono           : ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/*  ============================================================ */
/*  Master Church Calendar — Custom Styles */
/*  RockWeb/Themes/Rock/Styles/master-calendar.less */

/*  Import this file from _custom.less: */
/*    @import "master-calendar.less"; */

/*  Pairs with master-calendar/master-calendar-lava-template.lava, */
/*  which goes in the Calendar Lava block's Lava Template setting. */

/*  Every colour here that is not a campus colour is static. Campus */
/*  colours are injected inline from Lava — never a class. */
/*  ============================================================ */

/*  ── Tokens used from the site-wide :root set ───────────────────────────── */
/*    --tfh-brand  --tfh-black  --tfh-muted  --tfh-muted-light */
/*    --tfh-border  --tfh-light-gray  --tfh-radius-*  --tfh-shadow */
/*  Campus colours are NOT here by design — they come off the Campus entity's */
/*  core_CampusColor attribute and are injected inline from Lava. */

/*  ── Local palette ──────────────────────────────────────────────────────── */
/*  Design-specific neutrals with no site-wide token. Every value below is from */
/*  the approved spec's "Design-specific neutrals" list — none are invented. */

/*  NOTE var(--cal-border): the spec's "Rock border" is #d9d9e4, which is NOT in */
/*  :root. The closest existing token is --tfh-border-dark (#d0d5d8), a */
/*  different colour. Kept local rather than silently retargeting the design or */
/*  editing the shared token block — see BLOCK-SETTINGS.md if this should be */
/*  promoted to :root. */
/*  Pending-approval tag and the Special Occasion day tint. Not in the approved */
/*  spec — that spec predates both features. Amber was chosen to read as "not */
/*  settled yet" without competing with the campus dots, which own colour on this */
/*  page. Revisit if either goes into the design system properly. */
/*  Warm-brown gradient end stop. No token exists; _custom.less repeats the */
/*  literal in four places (hero bar, modal headers) — mirrored here. */

/*  Only used for the feed address, where a URL benefits from fixed-width digits */
/*  and unambiguous punctuation. Stack, not a token — no mono token exists. */


/*  ── Page shell ─────────────────────────────────────────────────────────── */
/*  No padding here. Rock already pads every block on the page, so any padding we */
/*  add lands on top of it and the content sits visibly inset from everything else */
/*  on the site. Same rule applies to any block we write — see rock-frontend/CLAUDE.md. */

/*  Width: staff run large monitors, and this layout genuinely benefits from the */
/*  room. The rail is a fixed width and the month grid is seven equal columns */
/*  taking whatever is left, so every extra pixel goes into the day cells — which */
/*  is where event titles are currently being truncated. */

/*  var(--cal-max-width) is a sanity stop for ultra-wide displays rather than a design */
/*  constraint; below it the page simply fills its block. Change that one value if */
/*  it wants to go wider still. */
.tfh-cal-page {
  max-width: var(--cal-max-width);
  margin: 0 auto;
}

.tfh-cal-shell {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.tfh-cal-rail {
  width: var(--cal-rail-width);
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 18px;
}

.tfh-cal-railbody { display: block; }

.tfh-cal-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/*  Calendar + agenda cards sit on .tfh-panel-card but run tighter than the */
/*  site-wide 30px card padding. */
.tfh-cal-card { padding: 20px; }


/*  ── Header ─────────────────────────────────────────────────────────────── */
/*  No title of our own — the Rock page already prints "Master Church Calendar" */
/*  above this block. The header row is now just the CTA on the left and the month */
/*  navigation on the right. */

/*  "Request an event" stays out of the nav row: that row is already carrying */
/*  arrows, Today, the view toggle, Subscribe and Print, and a primary button in */
/*  there reads as navigation. */

/*  The button itself is Rock's .btn.btn-primary — hover, focus and active states */
/*  come from the theme. This class only positions it and spaces the icon, so */
/*  nothing here should touch colour, border or state. */
.tfh-cal-hdr__cta {
  /*  No top margin. It used to separate the button from the page title above it; */
  /*  with the title gone that margin is just dead space at the very top of the */
  /*  block, which is what it looked like. */
  i { margin-right: 6px; }
}

.tfh-cal-hdr {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.tfh-cal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/*  Two groups inside the nav row. On desktop they are flex rows inside a flex row */
/*  with the same 8px gap, so the result is indistinguishable from one flat list; */
/*  on mobile the nav stacks them into two defined lines. */
.tfh-cal-nav__month,
.tfh-cal-nav__tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

/*  Anchors and buttons share the chrome; anchors carry the ?Date= nav. */
.tfh-cal-navbtn {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--cal-border);
  background: var(--tfh-white);
  border-radius: 8px;
  color: var(--tfh-brand-ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;

  &:hover,
  &:focus { background: var(--tfh-light-gray); color: var(--tfh-brand-ink); text-decoration: none; }
}

.tfh-cal-navbtn--wide {
  width: auto;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
}

.tfh-cal-navlabel {
  min-width: 170px;
  text-align: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--tfh-black);

  /*  Same chrome as the arrows, Today and the Month/Week toggle beside it: it */
  /*  is a button now, so in that row it has to look like one. Type size stays */
  /*  the heading's — it is still the month, not another 13px control. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--cal-border);
  border-radius: 8px;
  background: var(--tfh-white);
  cursor: pointer;

  &:hover,
  &:focus { background: var(--tfh-light-gray); color: var(--tfh-black); }
}

.tfh-cal-navlabel__caret {
  font-size: 12px;
  color: var(--tfh-muted);
}


/*  ── Month jump ─────────────────────────────────────────────────────────── */
/*  Anchored to the label rather than the nav row: the panel should read as */
/*  belonging to the month it replaces. */
.tfh-cal-monthpick {
  position: relative;
}

.tfh-cal-monthmenu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  min-width: 190px;
  padding: 6px;
  background: var(--tfh-white);
  border: 1px solid var(--cal-border);
  border-radius: 10px;
  box-shadow: 0 12px 24px -8px rgba(0,0,0,.22);
}

.tfh-cal-monthpick--open .tfh-cal-monthmenu { display: block; }

.tfh-cal-monthmenu__item {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--tfh-brand-ink);
  text-decoration: none;

  &:hover,
  &:focus { background: var(--tfh-light-gray); color: var(--tfh-brand-ink); text-decoration: none; }
}

.tfh-cal-monthmenu__item--current {
  background: var(--cal-chip-bg);
  color: var(--tfh-black);
}

.tfh-cal-toggle {
  display: flex;
  margin-left: 4px;
  border: 1px solid var(--cal-border);
  border-radius: 8px;
  overflow: hidden;
}

.tfh-cal-toggle__btn {
  height: 36px;
  padding: 0 14px;
  border: 0;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: var(--tfh-white);
  color: var(--tfh-brand-ink);
  text-decoration: none;
  display: flex;
  align-items: center;

  & + & { border-left: 1px solid var(--cal-border); }
  &:hover { text-decoration: none; color: var(--tfh-brand-ink); }
}

.tfh-cal-toggle__btn--active {
  background: var(--tfh-brand);
  color: #fff;

  &:hover { color: #fff; }
}


/*  ── Campus scope notice ────────────────────────────────────────────────── */
.tfh-cal-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--tfh-white);
  border: 1px solid var(--cal-border);
  border-left: 4px solid var(--tfh-brand);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
}

.tfh-cal-notice__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--tfh-black);
}

.tfh-cal-notice__hint {
  font-size: 13px;
  color: var(--tfh-muted);
  flex: 1;
  min-width: 0;
}

.tfh-cal-notice__btn {
  font-size: 13px;
  font-weight: 600;
  color: var(--tfh-brand-ink);
  background: transparent;
  border: 1px solid var(--cal-border);
  border-radius: 8px;
  padding: 7px 12px;
  cursor: pointer;
  text-decoration: none;

  &:hover { background: var(--tfh-light-gray); color: var(--tfh-brand-ink); text-decoration: none; }
}


/*  ── Mobile filter bar (hidden above the mobile breakpoint) ─────────────── */
.tfh-cal-filterbar { display: none; }

.tfh-cal-filterbar__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--cal-border);
  background: var(--tfh-white);
  border-radius: 8px;
  color: var(--tfh-brand-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.tfh-cal-filterbar__summary {
  font-size: 13px;
  color: var(--tfh-muted);
  flex: 1;
  min-width: 0;
}

.tfh-cal-filterbar__all {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--cal-border);
  background: var(--tfh-white);
  border-radius: 8px;
  color: var(--tfh-brand-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  align-items: center;

  &:hover { color: var(--tfh-brand-ink); text-decoration: none; }
}


/*  ── Empty / no-match banners ───────────────────────────────────────────── */
.tfh-cal-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--cal-chip-bg);
  border: 1px solid var(--cal-tag-border);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 12px;
}

.tfh-cal-banner__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--tfh-black);
}

.tfh-cal-banner__hint {
  font-size: 13px;
  color: var(--tfh-muted);
  flex: 1;
  min-width: 0;
}

.tfh-cal-banner__btn {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: var(--tfh-brand);
  border: 0;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  text-decoration: none;

  &:hover { color: #fff; text-decoration: none; }
}


/*  ── Mobile week strip (hidden above the mobile breakpoint) ─────────────── */
.tfh-cal-strip { display: none; }

.tfh-cal-strip__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 56px;
  padding: 7px 2px;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  background: var(--tfh-white);
  box-shadow: inset 0 0 0 1px var(--tfh-border);
}

.tfh-cal-strip__day--today { box-shadow: inset 0 0 0 2px var(--tfh-brand); }

.tfh-cal-strip__day--selected {
  background: var(--tfh-brand);
  box-shadow: inset 0 0 0 1px var(--tfh-brand);

  .tfh-cal-strip__dow { color: rgba(255,255,255,.7); }
  .tfh-cal-strip__num { color: #fff; }
  /*  Campus colour is inline on the dot; override it while selected. */
  .tfh-cal-dot { background: #fff !important; } /*  overrides the Lava inline campus colour */
}

.tfh-cal-strip__dow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--tfh-muted);
}

.tfh-cal-strip__num {
  font-size: 16px;
  font-weight: 700;
  color: var(--tfh-black);
  line-height: 1.1;
}

.tfh-cal-strip__dots {
  display: flex;
  gap: 2px;
  justify-content: center;
  min-height: 5px;
}


/*  ── Weekday header + month grid ────────────────────────────────────────── */
.tfh-cal-dowrow {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}

.tfh-cal-dow {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tfh-muted);
  padding-bottom: 2px;
}

.tfh-cal-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.tfh-cal-day {
  box-sizing: border-box;
  min-height: 118px;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: var(--tfh-white);
  box-shadow: inset 0 0 0 1px var(--tfh-border);

  &:hover { background: var(--tfh-light-gray); }
}

.tfh-cal-day--out {
  background: var(--cal-out-month);

  .tfh-cal-day__num { font-weight: 400; color: var(--tfh-muted-light); }
}

.tfh-cal-day--selected {
  background: var(--cal-selected);
  box-shadow: inset 0 0 0 2px var(--tfh-brand);
}

.tfh-cal-day__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

/*  ── Special Occasion days ──────────────────────────────────────────────── */
/*  A tint plus a name, not a badge. The job is to catch the eye of someone */
/*  scanning for an open date, so it has to be visible while empty — but it must */
/*  not outrank an actual event chip sitting in the same cell. */
.tfh-cal-day--special {
  background: var(--cal-special-bg);
  box-shadow: inset 0 0 0 1px var(--cal-special-ring);

  &:hover { background: color-mix(in srgb, var(--cal-special-bg) 92%, var(--tfh-black)) /* was darken(@cal-special-bg, 2%) */; }
}

.tfh-cal-day__so {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cal-special-ink);
}

/*  Per-cell "MON 17" label — only shown in the mobile single-column week list. */
.tfh-cal-day__label {
  display: none;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tfh-muted);
}

.tfh-cal-day__num {
  font-size: 13px;
  font-weight: 600;
  color: var(--tfh-black);
  min-width: 22px;
  height: 22px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tfh-cal-day__num--today {
  background: var(--tfh-brand);
  color: #fff;
  font-weight: 700;
}


/*  ── Dot row (mobile month grid) ────────────────────────────────────────── */
.tfh-cal-dotrow {
  display: none;
  flex-wrap: wrap;
  gap: 3px;
  padding: 2px 2px 0;
}

.tfh-cal-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tfh-cal-dot--lg { width: 6px; height: 6px; }
.tfh-cal-dot--agenda { width: 9px; height: 9px; }
.tfh-cal-dot--occ { width: 10px; height: 10px; }


/*  ── Campus code badges ─────────────────────────────────────────────────── */
/*  The alternative to a colour dot: a rounded square in the campus colour with */
/*  the campus ShortCode in it. A chip in the corner of the grid then says which */
/*  campus it is without the reader knowing the colour mapping, and it stops the */
/*  marker depending on colour alone. */

/*  White text on an arbitrary campus colour is the obvious risk. The text shadow */
/*  keeps it legible over a light campus colour without hard-coding a per-campus */
/*  contrast rule — if a campus ever picks a genuinely pale colour, revisit this */
/*  rather than the shadow. */
.tfh-cal-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 20px;
  height: 14px;
  padding: 0 3px;
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
  text-transform: uppercase;
}

/*  Overflow counter — same footprint, no colour, so it reads as a count rather */
/*  than as another campus. */
.tfh-cal-code--more {
  background: var(--cal-tag-bg) !important;
  color: var(--tfh-muted);
  text-shadow: none;
  box-shadow: inset 0 0 0 1px var(--cal-tag-border);
}

.tfh-cal-code--agenda { min-width: 24px; height: 16px; font-size: 10px; }
.tfh-cal-code--occ    { min-width: 26px; height: 18px; font-size: 10px; }


/*  ── Event chips ────────────────────────────────────────────────────────── */
.tfh-cal-evlist {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.tfh-cal-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 3px 5px 4px;
  border-radius: 6px;
  background: var(--cal-chip-bg);
  min-width: 0;
  cursor: pointer;

  &:hover { background: var(--cal-chip-hover); }
}

.tfh-cal-chip--span {
  background: var(--cal-selected);
  box-shadow: inset 0 0 0 1px var(--cal-border);
}

/*  The title owns the full row — dots go beneath it, never beside it, or the */
/*  name truncates to a few characters once the grid narrows. */
.tfh-cal-chip__title {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--tfh-black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.tfh-cal-chip__span {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--tfh-muted);
  line-height: 1.3;
}

.tfh-cal-chip__dots {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}

/*  Week-view third line. Hidden in month view and on phones. */
.tfh-cal-chip__meta {
  display: none;
  font-size: 11px;
  color: var(--tfh-muted);
  line-height: 1.35;
  margin-top: 1px;
}


/*  ── Overflow: +N more and the hidden remainder ─────────────────────────── */
/*  One hidden container serves both the expander and print, so neither needs */
/*  a round-trip or a fetch. */
.tfh-cal-extra {
  display: none;
  flex-direction: column;
  gap: 3px;
}

.tfh-cal-more {
  font-size: 11px;
  font-weight: 600;
  color: var(--tfh-brand-ink);
  background: transparent;
  border: 0;
  padding: 2px 5px;
  text-align: left;
  cursor: pointer;
  border-radius: 4px;

  &:hover { background: var(--cal-chip-hover); }
}

.tfh-cal-more__less { display: none; }

.tfh-cal-day--expanded {
  .tfh-cal-extra { display: flex; }
  .tfh-cal-more__more { display: none; }
  .tfh-cal-more__less { display: inline; }
}


/*  ── Week view ──────────────────────────────────────────────────────────── */
.tfh-cal-month--week {
  .tfh-cal-day { min-height: 300px; }
  .tfh-cal-chip__meta { display: block; }
}


/*  ── Agenda card ────────────────────────────────────────────────────────── */
.tfh-cal-agenda__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.tfh-cal-agenda__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--tfh-black);
  margin: 0;
}

.tfh-cal-agenda__count {
  font-size: 13px;
  color: var(--tfh-muted);
}

.tfh-cal-agenda__day { display: none; }
.tfh-cal-agenda__day--active { display: block; }

.tfh-cal-agenda__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tfh-cal-agenda__row {
  border: 1px solid var(--tfh-border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  min-width: 0;

  &:hover { border-color: var(--cal-border); background: var(--cal-row-hover); }
}

.tfh-cal-agenda__dots {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
  flex-wrap: wrap;
  max-width: 70px;
}

.tfh-cal-agenda__body { flex: 1; min-width: 0; }

.tfh-cal-agenda__name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--tfh-black);
  line-height: 1.3;
}

.tfh-cal-agenda__meta {
  display: block;
  font-size: 12px;
  color: var(--tfh-muted);
  margin-top: 2px;
}

.tfh-cal-agenda__chev {
  font-size: 18px;
  color: var(--tfh-muted-light);
  flex-shrink: 0;
}

.tfh-cal-agenda__empty {
  text-align: center;
  padding: 26px 10px;
  color: var(--tfh-muted);
  font-size: 14px;
}


/*  ── Filter rail: mini calendar ─────────────────────────────────────────── */
.tfh-cal-fgroup { min-width: 200px; flex: 1; }

.tfh-cal-fhead {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tfh-muted);
  margin: 22px 0 10px;

  &:first-child { margin-top: 0; }
}

.tfh-cal-mini__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.tfh-cal-mini__dow {
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--tfh-muted-light);
  padding-bottom: 2px;
}

.tfh-cal-mini__day {
  border: 0;
  background: transparent;
  color: var(--tfh-black);
  font-size: 11px;
  font-weight: 400;
  border-radius: 6px;
  height: 24px;
  cursor: pointer;
  padding: 0;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;

  &:hover { outline: 1px solid var(--cal-border); color: var(--tfh-black); text-decoration: none; }
}

.tfh-cal-mini__day--has { font-weight: 700; background: var(--cal-selected); }
.tfh-cal-mini__day--out { color: var(--cal-off-ring); }

.tfh-cal-mini__day--selected {
  background: var(--tfh-brand);
  color: #fff;

  &:hover { color: #fff; }
}


/*  ── Filter rail: campuses (doubles as the colour legend) ───────────────── */
.tfh-cal-campuslist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 2px;
}

.tfh-cal-campus {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  background: transparent;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  text-decoration: none;

  &:hover { background: var(--tfh-light-gray); text-decoration: none; }
}

.tfh-cal-campus--off {
  opacity: .5;

  /*  Hollow dot: white fill with a grey ring, overriding the inline campus colour. */
  .tfh-cal-campus__dot {
    background: var(--tfh-white) !important; /*  overrides the Lava inline campus colour */
    box-shadow: inset 0 0 0 2px var(--cal-off-ring) !important; /*  ditto */
  }
}

.tfh-cal-campus__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tfh-cal-campus__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--tfh-black);
  flex: 1;
}

.tfh-cal-campus__count {
  font-size: 11px;
  color: var(--tfh-muted);
}


/*  ── Filter rail: audience chips ────────────────────────────────────────── */
.tfh-cal-audlist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tfh-cal-aud {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 20px;
  cursor: pointer;
  border: 1px solid var(--cal-border);
  background: var(--tfh-white);
  color: var(--tfh-black);
  text-decoration: none;

  &:hover { color: var(--tfh-black); text-decoration: none; }
}

.tfh-cal-aud--on {
  background: var(--tfh-brand);
  border-color: var(--tfh-brand);
  color: #fff;

  &:hover { color: #fff; }
}


/*  ── Modal / bottom sheet ───────────────────────────────────────────────── */
.tfh-cal-scrim {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(24,30,35,.55);
  z-index: 1050;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 16px;
  overflow: auto;
}

.tfh-cal-scrim--open { display: flex; }

.tfh-cal-sheet {
  background: var(--tfh-white);
  border-radius: 12px;
  width: 100%;
  max-width: 560px;
  box-shadow: 0 24px 48px -12px rgba(0,0,0,.35);
  overflow: hidden;
}

/*  Drag handle: mobile only. */
.tfh-cal-sheet__handle { display: none; padding: 10px 0 2px; }

.tfh-cal-sheet__handle--onhead { background: var(--tfh-brand); padding: 10px 0 0; }

.tfh-cal-sheet__grip {
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--cal-border);
  margin: 0 auto;
}

.tfh-cal-sheet__grip--onhead { background: rgba(255,255,255,.4); }

.tfh-cal-sheet__head {
  background: linear-gradient(to right, var(--tfh-brand), var(--cal-hero-end));
  padding: 20px 22px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

/*  Without this the title wraps mid-phrase against the close button. */
.tfh-cal-sheet__headtext { flex: 1; min-width: 0; }

.tfh-cal-sheet__eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.7);
  margin-bottom: 5px;
}

.tfh-cal-sheet__title {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

.tfh-cal-sheet__close {
  border: 0;
  background: rgba(255,255,255,.14);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;

  &:hover { background: rgba(255,255,255,.26); }
}

.tfh-cal-sheet__body { padding: 22px; }

.tfh-cal-sheet__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--tfh-black);
  margin: 0 0 18px;
  text-wrap: pretty;
}

.tfh-cal-occlist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.tfh-cal-occ {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--tfh-border);
  border-radius: 8px;
  padding: 9px 12px;
}

.tfh-cal-occ__campus {
  font-size: 14px;
  font-weight: 600;
  color: var(--tfh-black);
  flex: 1;
  min-width: 0;
}

/*  Location under the campus name. Added for the home page's event sheet, */
/*  which has a per-occurrence Location the month grid does not surface; */
/*  lives here so all .tfh-cal-occ* rules stay together. */
.tfh-cal-occ__loc {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--tfh-muted);
  margin-top: 1px;
}

.tfh-cal-occ__time {
  font-size: 13px;
  color: var(--tfh-black);
  font-variant-numeric: tabular-nums;
}

.tfh-cal-taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.tfh-cal-tag {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--tfh-muted);
  background: var(--cal-tag-bg);
  border: 1px solid var(--cal-tag-border);
  border-radius: 20px;
  padding: 4px 10px;
}

/*  Pending approval — the one tag that must not read as ambient metadata, since */
/*  the whole point is that this event is not confirmed yet. */
.tfh-cal-tag--pending {
  color: var(--cal-pending-ink);
  background: var(--cal-pending-bg);
  border-color: var(--cal-pending-border);
}

/*  ── Pending, on the grid ───────────────────────────────────────────────── */
/*  A pending event has to be distinguishable while scanning the month, not only */
/*  once the detail sheet is open — the whole point of surfacing requests on the */
/*  calendar is that someone notices them without going looking. */

/*  Dashed border rather than a fill: it reads as "not settled" at a glance and */
/*  survives being next to a campus colour dot without fighting it. */
.tfh-cal-chip--pending {
  background: var(--cal-pending-bg);
  box-shadow: inset 0 0 0 1px var(--cal-pending-border);
}

.tfh-cal-agenda__row--pending { background: var(--cal-pending-bg); }

/*  The chip is a flex column, so a block-level child stretches to the full chip */
/*  width and the dashed border runs on past the word. `display: inline-block` does */
/*  not stop that — flex stretching wins — so it needs align-self to shrink to its */
/*  own text. Inside the agenda row it is a plain inline child of a span, where */
/*  align-self is simply ignored. */
.tfh-cal-chip__pending {
  align-self: flex-start;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cal-pending-ink);
  border: 1px dashed var(--cal-pending-border);
  border-radius: 3px;
  padding: 0 3px;
  vertical-align: middle;
}

/*  In the agenda row it follows the event name inline, so it needs the gap that */
/*  the grid chip does not. */
.tfh-cal-agenda__name .tfh-cal-chip__pending { margin-left: 4px; }

/*  ── Subscribe feed address ─────────────────────────────────────────────── */
/*  A readonly input rather than plain text: it makes the address selectable and */
/*  obviously copyable, and gives the Copy button something to select from as a */
/*  fallback when the clipboard API is unavailable. */
.tfh-cal-feedurl {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}

.tfh-cal-feedurl__input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--cal-mono);
  font-size: 12px;
  color: var(--tfh-black);
  background: var(--cal-chip-bg);
  border: 1px solid var(--cal-border);
  border-radius: 6px;
  padding: 8px 10px;
}

.tfh-cal-feedurl__btn { flex: 0 0 auto; }

/*  Sits directly under the address so the scope is read at the moment of copying, */
/*  not after subscribing to the wrong thing. */
.tfh-cal-feedscope {
  margin-top: -6px;
  margin-bottom: 16px;
}

.tfh-cal-sheet__note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--tfh-muted);
  margin: 0 0 12px;

  strong { color: var(--tfh-black); font-weight: 600; }
}

/*  The one line people will regret ignoring, so it does not sit at muted weight */
/*  alongside everything else. */
.tfh-cal-sheet__note--warn {
  color: var(--cal-pending-ink);
  background: var(--cal-pending-bg);
  border: 1px solid var(--cal-pending-border);
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 0;

  strong { color: var(--cal-pending-ink); }
}

/*  Numbered steps. Counter rather than a plain list so the numerals sit in a */
/*  fixed gutter and the wrapped lines align under the text, not under the digit. */
.tfh-cal-steps {
  list-style: none;
  counter-reset: calstep;
  margin: 0 0 12px;
  padding: 0;

  li {
    counter-increment: calstep;
    position: relative;
    padding-left: 28px;
    margin-bottom: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--tfh-black);

    &::before {
      content: counter(calstep);
      position: absolute;
      left: 0;
      top: 0;
      width: 19px;
      height: 19px;
      border-radius: 50%;
      background: var(--cal-chip-bg);
      border: 1px solid var(--cal-border);
      font-size: 11px;
      font-weight: 700;
      line-height: 18px;
      text-align: center;
      color: var(--tfh-muted);
    }
  }

  strong { font-weight: 600; }
}

.tfh-cal-steps__btn i { margin-right: 6px; }

/*  ── Event attributes ───────────────────────────────────────────────────── */
/*  Label/value rows. Two columns rather than stacked, so several short values */
/*  (a room, a group, yes/no) read as a compact block instead of a long list. */
.tfh-cal-attrlist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.tfh-cal-attr {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
}

.tfh-cal-attr__label {
  flex: 0 0 40%;
  max-width: 160px;
  color: var(--tfh-muted);
}

.tfh-cal-attr__value {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--tfh-black);
  font-weight: 600;
}

.tfh-cal-attr__value--link {
  text-decoration: none;

  &:hover { color: var(--tfh-brand-ink); text-decoration: underline; }
}

/*  ── Audience ───────────────────────────────────────────────────────────── */
/*  Plain text, matching the Details values. These describe the event; they are */
/*  not controls, so they should not carry the affordance of one. */
.tfh-cal-audvalues {
  font-size: 13px;
  font-weight: 600;
  color: var(--tfh-black);
  margin-bottom: 14px;
}

/*  ── Linkages ───────────────────────────────────────────────────────────── */
.tfh-cal-linklist {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.tfh-cal-linkage {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  background: var(--cal-chip-bg);
  border: 1px solid var(--cal-border);
  border-radius: 6px;
  padding: 8px 10px;
}

.tfh-cal-linkage__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tfh-black);
  font-weight: 600;
}

/*  Linked names stay black rather than turning brand-coloured — the row already */
/*  has a coloured "Registration page" link on the right, and two link colours in */
/*  one row makes it unclear which is the primary action. */
.tfh-cal-linkage__name--link {
  text-decoration: none;

  &:hover { color: var(--tfh-brand-ink); text-decoration: underline; }
}

.tfh-cal-linkage__link {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 600;
  color: var(--tfh-brand-ink);

  &:hover { text-decoration: underline; }
}

/*  ── Edit in Rock ───────────────────────────────────────────────────────── */
/*  Bottom-right, muted, small. For the person fixing the event, not the person */
/*  reading the calendar — it should be findable without competing with anything. */
.tfh-cal-sheet__admin {
  margin-top: 14px;
  text-align: right;

  a {
    font-size: 11px;
    color: var(--tfh-muted-light, var(--tfh-muted));
    text-decoration: none;

    &:hover { color: var(--tfh-brand-ink); text-decoration: underline; }
  }
}

/*  ── Contact block ──────────────────────────────────────────────────────── */
.tfh-cal-contact {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

/*  Rock's PhotoUrl always returns something — a real photo or the silhouette */
/*  placeholder — so this never renders broken, but it can render generic. */
.tfh-cal-contact__photo {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--cal-chip-bg);
}

.tfh-cal-contact__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tfh-cal-contact__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--tfh-black);
}

.tfh-cal-contact__link {
  font-size: 13px;
  color: var(--tfh-muted);

  &:hover { color: var(--tfh-black); text-decoration: underline; }
}

.tfh-cal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tfh-cal-btn {
  font-size: 14px;
  font-weight: 600;
  padding: 11px 18px;
  border-radius: 8px;
  min-height: 44px; /*  phone hit target */
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  border: 1px solid var(--cal-border);
  background: var(--tfh-white);
  color: var(--tfh-brand-ink);
  text-decoration: none;

  &:hover { color: var(--tfh-brand-ink); text-decoration: none; background: var(--tfh-light-gray); }
}

.tfh-cal-btn--primary {
  background: var(--tfh-brand);
  border-color: var(--tfh-brand);
  color: #fff;

  /*  The spec defines no hover fill for the primary action, and there is no */
  /*  darker-brand token — so no invented colour here. */
  &:hover { color: #fff; }
}


/*  ── Filter sheet (mobile) ──────────────────────────────────────────────── */
.tfh-cal-fsheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.tfh-cal-fsheet__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--tfh-black);
  margin: 0;
}

/*  Larger rows inside the sheet — 44px targets. */
.tfh-cal-fsheet {
  .tfh-cal-campus { padding: 10px 6px; min-height: 44px; }
  .tfh-cal-campus__dot { width: 13px; height: 13px; }
  .tfh-cal-campus__name { font-size: 14px; }
  .tfh-cal-campus__count { font-size: 12px; }
  .tfh-cal-campuslist { margin-bottom: 20px; }
  .tfh-cal-audlist { gap: 8px; margin-bottom: 20px; }
  .tfh-cal-aud { font-size: 14px; padding: 10px 14px; border-radius: 22px; min-height: 44px; display: flex; align-items: center; }
}

/*  Subscribe, inside the mobile filter sheet. Full-width and 44px so it reads as */
/*  a row in the sheet rather than a stray icon. */
.tfh-cal-fsheet__sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin-bottom: 16px;
  border: 1px solid var(--cal-border);
  border-radius: 8px;
  background: var(--tfh-white);
  color: var(--tfh-brand-ink);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;

  &:hover { background: var(--tfh-light-gray); }
}

.tfh-cal-fsheet__apply {
  flex: 1;
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  background: var(--tfh-brand);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  justify-content: center;
}


/*  ── Rail stacks (Rock sidebar expanded) ────────────────────────────────── */
@media (max-width: 1120px) {
  .tfh-cal-shell { display: block; }

  .tfh-cal-rail {
    width: auto;
    flex-shrink: 1;
    margin: 0 0 16px;
  }

  .tfh-cal-railbody {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }

  .tfh-cal-fhead:first-child { margin-top: 0; }
}


/*  ── Nav row: two lines below 900px ────────────────────────────── */
/*  The nav has its own breakpoint, well above the page's 760px one, because it */
/*  runs out of room first: seven controls fit on one line only above roughly */
/*  890px. Between 761 and 900 the flat row wrapped ragged alongside the CTA — */
/*  month line adrift on one row, everything else strung out on the next. So the */
/*  header stacks and the nav splits into its two groups here, while the rest of */
/*  the layout stays desktop. */
@media (max-width: 900px) {
  .tfh-cal-hdr {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-bottom: 12px;
  }

  /*  Content width on its own line. Stretching a primary button across a tablet */
  /*  is a phone move; the 760px block does that where it belongs. */
  .tfh-cal-hdr__cta { align-self: flex-start; }

  /*  Two rows, each a plain left-aligned flex line with the same 8px gap the */
  /*  single row had. Nothing stretches at this width — a month button spanning */
  /*  880px reads as a banner, not a control. */
  .tfh-cal-nav { display: block; }

  .tfh-cal-nav__month { margin-bottom: 8px; }
}


/*  ── Mobile: week strip, filter sheet, bottom sheet ─────────────────────── */
@media (max-width: 760px) {
  /*  Still no padding — Rock's own block padding applies at every width. */

  /*  The rail and the desktop notice both collapse into the filter bar — */
  /*  two strips saying the same thing is the defect this consolidation fixed. */
  .tfh-cal-rail,
  .tfh-cal-notice { display: none; }

  /*  The month line goes edge to edge on a phone: it is the biggest target and */
  /*  the one people aim for. Above this width it stays at its natural size — see */
  /*  the 900px block, which has already split the nav into two rows. */
  .tfh-cal-nav__month .tfh-cal-monthpick { flex: 1; min-width: 0; }

  /*  min-width: 170px would stop the label shrinking on a 320px screen. */
  .tfh-cal-nav__month .tfh-cal-navlabel {
    width: 100%;
    min-width: 0;
  }

  .tfh-cal-nav__tools { justify-content: space-between; }

  .tfh-cal-toggle { margin-left: 0; }

  /*  Subscribe moves into the filter sheet; print has no mobile use at all. */
  .tfh-cal-navbtn--rss,
  .tfh-cal-navbtn--print { display: none; }

  /*  A primary action reads as deliberate at full width and as a stray pill at */
  /*  content width. */
  .tfh-cal-hdr__cta {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .tfh-cal-filterbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
  }

  .tfh-cal-card { padding: 14px; }

  /*  Month grid keeps its shape so empty days still read as empty, but the */
  /*  chip lists give way to a dot row; the agenda card does the reading. */
  .tfh-cal-day { min-height: 56px; padding: 4px; }
  .tfh-cal-day__num { font-size: 12px; }
  .tfh-cal-dow { font-size: 9px; }
  .tfh-cal-evlist { display: none; }
  .tfh-cal-dotrow { display: flex; }

  /*  Week view becomes the strip plus a single-column day list. */
  .tfh-cal-month--week {
    display: none; /*  the strip replaces the 7-column week grid */
  }

  .tfh-cal-strip--week {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
  }

  .tfh-cal-dowrow--week { display: none; }

  /*  Selected-day header pins so context survives scrolling the list. */
  /*  Deliberately no auto-scroll on tap. */
  .tfh-cal-agenda__head {
    position: sticky;
    top: 0;
    background: var(--tfh-white);
    z-index: 2;
    padding: 2px 0 10px;
    margin-bottom: 6px;
  }

  /*  Sheets rise from the bottom. */
  .tfh-cal-scrim--open {
    align-items: flex-end;
    padding: 0;
  }

  .tfh-cal-sheet {
    max-width: none;
    border-radius: 16px 16px 0 0;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
  }

  .tfh-cal-sheet__body {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tfh-cal-sheet__handle { display: block; }

  .tfh-cal-actions {
    position: sticky;
    bottom: 0;
    background: var(--tfh-white);
    padding-top: 12px;
    box-shadow: 0 -8px 12px -8px rgba(0,0,0,.12);
  }

  .tfh-cal-actions > .tfh-cal-btn {
    flex: 1;
    justify-content: center;
  }
}


/*  ── Print: month grid only, nothing truncated ──────────────────────────── */
@media print {
  .tfh-cal-page { padding: 0; max-width: none; }

  /*  Nav buttons go, the month label stays — a printed month has to say which */
  /*  month it is. */
  .tfh-cal-navbtn,
  .tfh-cal-nav__tools,
  .tfh-cal-navlabel__caret,
  .tfh-cal-monthmenu,
  .tfh-cal-toggle,
  .tfh-cal-rail,
  .tfh-cal-agenda,
  .tfh-cal-notice,
  .tfh-cal-filterbar,
  .tfh-cal-banner,
  .tfh-cal-strip,
  .tfh-cal-more { display: none; }

  /*  The month label survives print, but the button shell around it should not. */
  .tfh-cal-navlabel {
    border: 0;
    background: transparent;
    padding: 0;
  }

  .tfh-cal-card {
    padding: 0;
    box-shadow: none;
  }

  .tfh-cal-day {
    min-height: 104px;
    box-shadow: inset 0 0 0 1px var(--cal-print-border);
    background: var(--tfh-white);
  }

  .tfh-cal-month--week .tfh-cal-day { min-height: 200px; }

  /*  Every event prints, including the ones the screen caps behind "+N more". */
  .tfh-cal-evlist { display: flex; }
  .tfh-cal-extra { display: flex; }
  .tfh-cal-dotrow { display: none; }
}