/* ========================================
   THE FULL CALENDAR: the month grid in a dialog (his widgets ee5f80ad 20:54 ET and 1e1578ea 20:55 ET, 25 Oct 2026; the seat's
   nashfullcal-1025 and -b). Drawn by fullcal.js, which says what it takes in and gives out.

   It opens the way the chat does (style.css, nk-chat-panel): a full-screen sheet up to 640 px, a large panel over the page above that.
   Every text size is one of step 1's ladder tokens (--t-body, --t-small, --t-eyebrow, --t-h3), every tap target is 44 px or more, and
   the colours are the site's own (:root in style.css). The row's card styles (week.css, .wk-band .wk-day) are the detail card's: the
   detail wears the class wk-band, so a day's card is the same card here and in the row.

   The motion is the script's (the Web Animations API: the sheet rises, the panel grows from the button, a finger drags the sheet down).
   The few transitions here are for hovers and for the strip's height; with Reduce Motion nothing in the dialog moves at all.

   ON A PHONE it is an app screen (his widget 0cc02180, 26 Oct 2026; the seat's nash-feed-1026 and -b): the month fills the whole screen,
   and it follows the way the phone is held (his 30 Oct 2026, widgets 95303cda, 2547944b, 31c45a1f; the seat's nash-beta-fixes-1030). It
   used to force landscape on a phone held upright, drawn by a CSS turn of the page, with a View upright control to get a list back. Nothing
   is turned any more, and there is no such control; both orientations render natively, so the orientation is never the only way in
   (WCAG 1.3.4, technique G214).
     - Held upright, the month is a LIST of its days down the screen, each day a row with its weekday and its events. Close stands on the
       screen's own top edge (.fc-bar); the month switch is at the foot.
     - Held sideways, the month lays out natively as the grid, no rotation. The month switch (the arrows, the month's name, Today) and Close
       are in a slim header bar above the grid, so no control is over a day cell.
     - A day tapped is a popup over the month on a phone (.fc-detail, positioned over the stage); a tablet and a desk keep the card beside
       the grid.
   The switch between the two is the orientation media queries below, so the phone's own turn changes the view at once, live.
   ======================================== */

.fc {
  position: fixed;
  inset: 0;
  z-index: 9100;                    /* over the chat's launcher (9000) and the nav (1000) */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  color: var(--white);
}

.fc[hidden] {
  display: none;
}

.fc-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 21, 28, 0.78);
}

/* The page behind does not scroll while the dialog is open (fullcal.js adds these classes and sets the body's top to minus the scroll it
   had, then restores it): the same freeze the chat's phone sheet uses (style.css, body.nk-chat-locked), on every width. The scrollbar's
   place is kept on a desk, so nothing behind shifts sideways. */
html.fc-locked {
  overflow: hidden;
  scrollbar-gutter: stable;
}

body.fc-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* ---------- the panel (above 640 px) and the sheet (up to it) ---------- */

.fc-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: min(1180px, calc(100vw - 96px));
  height: min(860px, calc(100vh - 96px));
  height: min(860px, calc(100dvh - 96px));       /* tracks Safari's toolbar where there is dvh */
  background: var(--nash-black-lighter);
  border: 1px solid rgba(249, 208, 116, 0.28);
  border-radius: 13px;
  box-shadow: 0 21px 55px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  overscroll-behavior: none;
}

.fc-panel:focus {
  outline: none;
}

@media (max-width: 640px) {
  .fc-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;                  /* fallback for browsers without dvh */
    height: 100dvh;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ---------- the stage and the bar ---------- */

/* The stage holds the head, the months, the foot (the month switch) and the day's popup: one box, in the panel's column on a desk and a tablet. */
.fc-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Close: the panel's own child, over the stage. On a desk it is the head's old last place, at the panel's top right, and the head leaves it
   room (.fc-head's right padding). */
.fc-bar {
  position: absolute;
  top: 13px;
  right: 13px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fc-scrim,
.fc-pop-close {
  display: none;                    /* a phone's own: the blocks below show them */
}

/* ---------- the head: the dialog's name (a desk's and a tablet's; a phone's month fills the screen, below) ---------- */

.fc-head {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 13px 69px 13px 21px;     /* the right is Close's room: 13 + its 44 px + the head's 12 px gap, where it stood in the row */
  border-bottom: 1px solid rgba(249, 208, 116, 0.18);
  background: var(--nash-black-lighter);
  touch-action: none;               /* a finger on the head drags the sheet held upright as a list; fullcal.js reads it */
  user-select: none;
  -webkit-user-select: none;
}

.fc-grabber {
  display: none;
}

.fc-title {
  order: 1;
  flex: 1 1 auto;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 400;
  letter-spacing: 3px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--nash-orange);
}

/* ---------- the foot: the ONE month switch, at the bottom of the calendar, and Today beside it ----------
   His 00:31 ET 27 Oct 2026 (the seat's nash-cal-1026): "you do not need the scroll for months, just the calendar; the top one and the bottom
   one feel redundant"; his 00:32 ET (nash-cal-1026b): "the bottom one stays, you got it backwards". So the switch is here and not in the head. */

.fc-foot {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  padding: 10px 21px;
  border-top: 1px solid rgba(249, 208, 116, 0.18);
  background: var(--nash-black-lighter);
  user-select: none;
  -webkit-user-select: none;
}

.fc-nav {
  order: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fc-month-label {
  flex: 1 1 auto;
  min-width: 168px;                 /* fixed enough that a longer month's name moves nothing beside it */
  margin: 0;
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 2px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--nash-yellow);
}

.fc-today-btn {
  order: 3;
  box-sizing: border-box;
  min-width: 44px;
  min-height: 44px;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid var(--nash-orange);
  border-radius: 3px;
  color: var(--nash-orange);
  font-family: var(--font-heading);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

.fc-today-btn:hover {
  background: var(--nash-orange);
  color: var(--nash-black);
}

.fc-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 4px;
  background: none;
  border: none;
  color: var(--gray-300);
  font-size: var(--t-h3);
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s ease;
}

.fc-close:hover {
  color: var(--nash-orange);
}

.fc-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid rgba(237, 230, 219, 0.2);
  border-radius: 50%;
  color: var(--nash-orange);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  line-height: 1;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.fc-arrow:hover:not([aria-disabled="true"]) {
  background: var(--nash-red);
  border-color: var(--nash-red);
  color: var(--white);
}

.fc-arrow[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
}

.fc button:focus-visible,
.fc a:focus-visible {
  outline: 2px solid var(--nash-yellow);
  outline-offset: 2px;
}

/* ---------- the body: the months, then (a desk: beside them) the chosen day's card ---------- */

.fc-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 21px;
  padding: 13px 12px 21px;
  overflow-y: auto;
  overscroll-behavior: contain;      /* a flick at the end of the panel never reaches the page behind */
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 768px) {
  .fc-body {
    padding: 21px;
  }
}

@media (min-width: 1024px) {
  .fc-body {
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
  }

  .fc-detail {
    position: sticky;
    top: 0;
  }
}

/* ONE month is drawn at a time and nothing scrolls sideways between months: the others are hidden, and the switch at the bottom of the
   calendar (the arrows, the keys, Today) turns to one (his 00:31 ET 27 Oct 2026, the seat's nash-cal-1026: "you do not need the scroll
   for months, just the calendar"; his 00:32 ET, nash-cal-1026b: "the bottom one stays"). SQUARED: this was a strip of pages that snapped,
   x mandatory, and gave way to a swipe. */
.fc-months {
  display: block;
  min-width: 0;
}

.fc-month {
  min-width: 0;
}

.fc-month[hidden] {
  display: none;
}

.fc-weekdays,
.fc-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.fc-weekdays span {
  padding: 4px 0 6px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--t-eyebrow);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gray-300);
}

@media (min-width: 768px) {
  .fc-weekdays,
  .fc-grid {
    gap: 4px;
  }
}

/* ---------- a day ---------- */

.fc-cell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  margin: 0;
  padding: 6px 4px;
  background: rgba(24, 34, 48, 0.55);
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  color: var(--white);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.fc-cell:hover {
  background: rgba(248, 149, 34, 0.12);
}

.fc .fc-cell:focus-visible {
  outline: 2px solid var(--nash-yellow);
  outline-offset: -3px;
}

/* a day behind today stays, dimmed, as it does in the row */
.fc-cell--past {
  opacity: 0.66;
}

/* the day with no house to open, or closed: a dashed edge, and (from 768 px) its house line in small grey capitals */
.fc-cell--shut {
  border-style: dashed;
}

.fc-cell--rent .fc-shut {
  color: var(--nash-orange);
}

/* today: the number on a red disc, an orange edge */
.fc-cell--today {
  background: rgba(248, 149, 34, 0.09);
  border-color: var(--nash-orange);
  box-shadow: inset 0 0 0 1px var(--nash-orange);
}

.fc-cell--today .fc-num {
  background: var(--nash-red);
  color: var(--white);
}

/* the day whose card is beside the grid */
.fc-cell[aria-pressed="true"] {
  background: rgba(249, 208, 116, 0.14);
  border-color: var(--nash-yellow);
}

.fc-top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fc-num {
  display: inline-block;
  min-width: 1.6em;
  padding: 1px 5px;
  border-radius: 999px;
  text-align: center;
  font-family: var(--font-heading);
  font-size: var(--t-small);
  font-weight: 500;
  line-height: 1.3;
}

/* the weekday: only where the month is a list (a phone held upright, below) */
.fc-wd {
  display: none;
  font-family: var(--font-heading);
  font-size: var(--t-eyebrow);
  letter-spacing: 1.5px;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--gray-300);
}

.fc-today-tag {
  display: none;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--nash-red);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 1.5px;
  line-height: 1.2;
  text-transform: uppercase;
}

/* a phone's cell: a dot for each event; a desk's: a line for each */
.fc-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  margin-top: auto;
}

.fc-dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nash-orange);
}

.fc-dot--tix {
  background: var(--nash-red-light);
}

.fc-dot--around {
  background: var(--gray-500);
}

.fc-more {
  font-family: var(--font-heading);
  font-size: var(--t-eyebrow);
  line-height: 1;
  color: var(--gray-300);
}

/* a line for each event, and a closed day's house line: how a desk draws a cell, and how a phone held upright draws a row (both below turn them on) */
.fc-evs,
.fc-shut {
  display: none;
}

.fc-ev {
  position: relative;
  display: block;
  padding-left: 10px;
  font-size: var(--t-eyebrow);
  line-height: 1.3;
  overflow-wrap: anywhere;
  color: var(--white);
}

.fc-ev::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--nash-orange);
}

.fc-ev--tix::before {
  background: var(--nash-red-light);
}

.fc-ev--around,
.fc-ev--around::before {
  color: var(--gray-300);
}

.fc-ev--around::before {
  background: var(--gray-500);
}

.fc-shut {
  margin-top: auto;
  font-family: var(--font-heading);
  font-size: var(--t-eyebrow);
  letter-spacing: 1px;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--gray-300);
}

@media (min-width: 768px) {
  .fc-cell {
    min-height: 104px;
    padding: 8px;
  }

  .fc-today-tag {
    display: inline-block;
  }

  .fc-dots {
    display: none;
  }

  .fc-evs {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }

  .fc-shut {
    display: block;
  }
}

/* ---------- the chosen day's card: the row's own (week.css), set in this column ---------- */

.fc .fc-detail.wk-band {
  margin: 0;
}

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

/* ==========================================================================
   A PHONE (his widget 0cc02180; the seat's nash-feed-1026 and -b)
   Held upright (up to 640 px wide, portrait) or held sideways (up to 500 px tall, landscape). A tablet and a desk are above.
   ========================================================================== */

/* ----- both ways: the day's card is a popup over the month, with a scrim behind it and a Done under it ----- */

@media (max-width: 640px) and (orientation: portrait), (max-height: 500px) and (orientation: landscape) {
  .fc-detail {
    display: none;
  }

  .fc-panel.is-pop .fc-detail {
    display: block;
    position: absolute;               /* over the stage (which is positioned), centred in it */
    left: 50%;
    top: 50%;
    z-index: 5;
    box-sizing: border-box;
    width: min(560px, calc(100% - 32px));
    max-height: calc(100% - 24px);
    padding: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translate(-50%, -50%);
    background: var(--nash-black-lighter);
    border: 1px solid rgba(249, 208, 116, 0.28);
    border-radius: 13px;
    box-shadow: 0 21px 55px rgba(0, 0, 0, 0.6);
  }

  .fc-panel.is-pop .fc-scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 4;
    background: rgba(14, 21, 28, 0.62);
  }

  .fc-panel.is-pop .fc-pop-close {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 44px;
    min-height: 44px;
    margin: 8px auto 0;
    padding: 6px 18px;
    background: transparent;
    border: 1px solid var(--nash-orange);
    border-radius: 3px;
    color: var(--nash-orange);
    font-family: var(--font-heading);
    font-size: var(--t-small);
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
  }

  /* the month's name, a phone's width (it was 168 px for a desk) */
  .fc-month-label {
    min-width: 120px;
    letter-spacing: 1px;
  }
}

/* ----- held upright: the month is a list of days, each a 56 px row (the same buttons, drawn as rows); nothing is turned ----- */

@media (max-width: 640px) and (orientation: portrait) {
  .fc-panel {
    --fc-bar-h: calc(56px + env(safe-area-inset-top));   /* the bar: a 44 px control, 6 px above and below, under the notch */
  }

  /* Close, on the screen's own top edge, at its right. The bar is let through to what is under it (the stage's own padding is its room);
     its control takes the finger. */
  .fc-bar {
    top: 0;
    right: 0;
    left: 0;
    justify-content: flex-end;
    box-sizing: border-box;
    padding: calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) 6px calc(8px + env(safe-area-inset-left));
    pointer-events: none;
  }

  .fc-bar > * {
    pointer-events: auto;
  }

  /* The stage is the panel's column, under the bar and above the home indicator; the head keeps its place (the dialog's name) and the body
     scrolls between the head and the foot. */
  .fc-stage {
    padding: var(--fc-bar-h) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  .fc-head {
    flex-wrap: wrap;
    padding: 4px 12px 10px;
  }

  .fc-title {
    flex: 1 1 100%;
  }

  /* the foot is pinned under the list (the body scrolls above it): the month switch is always at the bottom of the screen */
  .fc-foot {
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 6px 12px;
  }

  .fc-nav {
    flex: 1 1 auto;
    justify-content: space-between;
  }

  .fc-body {
    padding: 13px 12px 21px;
  }

  .fc-weekdays,
  .fc-blank {
    display: none;
  }

  .fc-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  .fc-cell {
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 8px 12px;
  }

  .fc-top {
    flex: 0 0 auto;
    min-width: 96px;
  }

  .fc-wd {
    display: inline;
  }

  .fc-today-tag {
    display: inline-block;
  }

  .fc-dots {
    display: none;
  }

  .fc-evs {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .fc-shut {
    display: block;
    flex: 1 1 auto;
    margin: 0;
  }
}

/* ----- held sideways: the month lays out natively, the screen's whole width, no rotation ----- */

@media (max-height: 500px) and (orientation: landscape) {
  .fc-panel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  .fc-stage {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  /* Close at the screen's top right, in the header bar's own row (the stage's padding is the notch's; the bar is over it), and the bar's
     row is the month switch's too: the screen is 390 tall or less, and the controls are kept off the grid, so none is over a day cell. */
  .fc-bar {
    top: calc(4px + env(safe-area-inset-top));
    bottom: auto;
    right: calc(8px + env(safe-area-inset-right));
  }

  /* no head: the month's name in the header bar is the title, and the dialog is named by its aria-label (the head stays for a screen reader) */
  .fc-head {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* The month switch (the earlier arrow, the month's name, the later arrow, Today) is the header bar: first in the stage, ABOVE the grid, not
     in a foot under it (his 30 Oct 2026: the grid unobstructed, no control over a day). It is the foot in the page, moved up by `order`. */
  .fc-foot {
    order: -1;
    flex-wrap: nowrap;
    justify-content: flex-start;
    padding: 4px 60px 4px 12px;       /* the right is Close's room */
    border-top: 0;
    border-bottom: 1px solid rgba(249, 208, 116, 0.18);
  }

  .fc-nav {
    flex: 0 0 auto;
  }

  .fc-body {
    padding: 6px 12px 8px;
  }

  /* a phone's cell, as under 768 px (a dot for each event, 44 px at least), though the screen is wider than 768 */
  .fc-cell {
    min-height: 44px;
    padding: 4px 6px;
  }

  .fc-today-tag,
  .fc-evs,
  .fc-shut {
    display: none;
  }

  .fc-dots {
    display: flex;
  }

  .fc-weekdays,
  .fc-grid {
    gap: 2px;
  }
}

/* ---------- Reduce Motion: nothing in the dialog moves; fullcal.js plays no animation either ---------- */

@media (prefers-reduced-motion: reduce) {
  .fc,
  .fc *,
  .fc *::before,
  .fc *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}