/* Calendar page: a month grid and a "coming up" list.

   The grid is a 7-column CSS grid rather than a table — the month is a
   layout, and screen readers get the dates from each cell's own label. */
.cal-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
}
.cal-nav { display: flex; align-items: center; gap: 10px; }
.cal-month {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  min-width: 190px;
}
.cal-step {
  font: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--sir-blue);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color 0.12s ease;
}
.cal-step:hover { border-color: var(--sir-blue-3); }
.cal-step:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cal-today {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--sir-blue);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
}
.cal-today:hover { border-color: var(--sir-blue-3); }
.cal-today:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cal-add { margin-left: auto; }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  width: 100%;
}
.cal-dayname {
  background: var(--bg-grey);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 8px;
  text-align: center;
}
.cal-cell {
  position: relative;
  background: var(--white);
  min-height: 104px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cal-cell.is-empty { background: #FAFAFA; }
.cal-date { font-size: 12.5px; font-weight: 600; color: var(--text); }
.cal-cell.is-today .cal-date {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sir-blue);
  color: var(--white);
}
.cal-cell.has-events:hover { background: #F7F9FC; }

.cal-pill {
  font-size: 11.5px;
  line-height: 1.35;
  border-radius: 3px;
  padding: 3px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cal-more { font-size: 11px; color: var(--muted); }

/* Covers the cell so the whole day opens it, while staying one tab stop. */
.cal-open {
  position: absolute;
  inset: 0;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.cal-open:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* Category colours. Kept inside the brand palette — navy shades carry the
   work events, with gold used once for marketing rather than sprinkled
   about. Text colour is chosen per background to stay readable at this
   size, which is why the lighter fills take ink rather than white. */
.is-auction    { background: var(--sir-blue);   color: var(--white); }
.is-training   { background: var(--sir-blue-2); color: var(--white); }
.is-meeting    { background: var(--sir-blue-3); color: var(--white); }
.is-marketing  { background: var(--gold);       color: var(--sir-blue-ink); }
.is-social     { background: var(--sir-blue-4); color: var(--ink); }
.is-other      { background: var(--sir-blue-5); color: var(--ink); }
/* Public holidays sit deliberately darker than birthdays: a day off is
   worth noticing, a birthday is a nicety. Neutral grey rather than another
   navy, so it does not read as one more work category. */
.is-holiday    { background: #6b6b6b;          color: var(--white); }
.is-birthday   { background: var(--sir-blue-tint); color: var(--ink); box-shadow: inset 0 0 0 1px var(--sir-blue-5); }

/* Filter chips double as the key. */
.cal-filters { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.cal-chip {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
  transition: border-color 0.12s ease, opacity 0.12s ease;
}
.cal-chip:hover { border-color: var(--sir-blue-3); }
.cal-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cal-chip.is-off { opacity: 0.55; color: var(--muted); }
/* Off: the fill drops away and the tick goes with it, so the state reads
   from the shape as well as the colour. */
.cal-chip.is-off .cal-swatch {
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--border-dash);
}
.cal-chip.is-off .cal-swatch svg { opacity: 0; }
.cal-swatch {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cal-swatch svg { width: 11px; height: 11px; display: block; }

.cal-tag {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 3px;
  padding: 2px 7px;
}
.cal-row-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.cal-next-head { margin-top: 4px; }
.cal-upcoming { display: flex; flex-direction: column; gap: 2px; width: 100%; }
.cal-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
}
.cal-row:last-child { border-bottom: none; }
.cal-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 4px;
}
.cal-badge-month { font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.cal-badge-day { font-size: 17px; font-weight: 600; line-height: 1.1; }
.cal-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-row-name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.cal-row-where { font-size: 12.5px; color: var(--muted); }

.cal-day-panel { max-width: 480px; }
.cal-day-body { padding: 26px 28px 22px; display: flex; flex-direction: column; gap: 14px; }
.cal-day-title {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}
.cal-day-list { display: flex; flex-direction: column; }

@media (max-width: 860px) {
  .cal-cell { min-height: 84px; padding: 6px; }
  .cal-pill { font-size: 10.5px; }
}
@media (max-width: 700px) {
  .cal-month { font-size: 18px; min-width: 150px; }
  .cal-add { margin-left: 0; width: 100%; }
  .cal-cell { min-height: 64px; }
  /* Below this width the pills cannot be read; the dot says "something is
     on" and the day opens for the detail. */
  .cal-pill, .cal-more { display: none; }
  .cal-cell.has-events::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sir-blue);
    margin-top: 2px;
  }
  .cal-filters { gap: 6px; }
  .cal-chip { font-size: 11px; padding: 5px 10px; }
}

/* Saving to a personal calendar. */
.cal-downloads-section { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.cal-downloads-note { font-size: 12.5px; color: var(--muted); margin: 0; }
.cal-downloads { display: flex; flex-wrap: wrap; gap: 8px; }
.cal-save {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--sir-blue);
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 32px;
  height: 32px;
  flex: none;
  margin-left: auto;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.cal-save.is-wide { width: auto; height: auto; padding: 9px 16px; margin-left: 0; }
.cal-save:hover { border-color: var(--sir-blue-3); background: var(--bg-grey); }
.cal-save:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cal-save.is-saved { border-color: var(--sir-blue); background: var(--sir-blue); color: var(--white); }
.cal-day-list .cal-save { margin-left: auto; }