/* Calendar grid — STORY-014
 *
 * A month, as a table. The largest component in the product and the one most
 * often built as a grid of divs wearing ARIA; a month is genuinely tabular —
 * seven named columns, rows of weeks — so it is a <table> with real column
 * headers. design.md: semantic HTML first, ARIA only where semantics cannot
 * express it.
 *
 *   <table class="cal">
 *     <caption class="cal__caption">August 2026</caption>
 *     <thead><tr><th scope="col"><abbr title="Monday">Mon</abbr></th>…</tr></thead>
 *     <tbody>
 *       <tr><td class="cal__cell cal__cell--today">
 *         <button class="cal__day"><span class="cal__daynum">14</span>
 *                                  <span class="cal__count">3</span></button>
 *         <div class="cal__chips">…</div>
 *       </td>…</tr>
 *     </tbody>
 *   </table>
 *
 * ── mobile-first, and the grid is a locator ──────────────────────────────────
 * The narrow layout is the base; chips are added at the breakpoint. Intended as
 * the phone's answer to a 390px cell, the agenda beneath the grid turned out to
 * be the primary reading surface at EVERY width — chips truncate to two or three
 * words in a 1100px window with a sidebar. So the grid says *where* and the list
 * beneath says *what*. One list doing both jobs, not a phone screen with its own
 * rules.
 *
 * ── what this file cannot decide, and must not be assumed ────────────────────
 *   · **The first day of the week comes from the locale**, never a constant. It
 *     is Monday in much of the world, Sunday in much of the rest, Saturday in
 *     some. Same for month and weekday names — locale DATA, which no translation
 *     catalogue reaches. Recompute them on a language change; the prototype
 *     computed them once at load and they stayed English.
 *   · **Grouping is by the record's own calendar day, not by an instant.** An
 *     Event at 00:30 belongs to the day it is on at its Venue. Converting an
 *     instant back to a day with `toISOString` is precisely the bug — it lands
 *     on the previous day for anything east of UTC.
 *   · Today is marked by the accent bar AND by being announced as today's date.
 *     Selection is marked by the filled day number AND by `aria-pressed`.
 *     Neither is colour alone.
 */

.cal__caption {
  caption-side: top;
  text-align: start;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  padding-block-end: var(--space-2);
}

.cal {
  inline-size: 100%;
  border-collapse: collapse;
  table-layout: fixed;          /* seven equal columns, whatever the numbers are */
}

.cal th {
  padding-block: var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  text-align: center;
}

/* The abbreviation carries the full weekday in `title`; the dotted underline
 * some browsers add to <abbr> reads as an error in a header row. */
.cal th abbr { text-decoration: none; }

.cal__cell {
  border: 1px solid var(--color-border);
  vertical-align: top;
  padding: var(--space-1);
  block-size: 3.5rem;           /* a floor, never a fixed height — cells grow */
  background: var(--color-surface);
}

.cal__cell--adjacent { background: var(--color-surface-sunken); }
.cal__cell--adjacent .cal__daynum { color: var(--color-text-muted); }

.cal__cell--today { border-inline-start: var(--border-width-accent) solid var(--color-accent); }

.cal__cell--selected { background: var(--color-surface-sunken); }
.cal__cell--selected .cal__daynum {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border-radius: var(--radius-full);
}

/* The whole day is one target. 44px is the floor design.md sets for touch, and
 * a calendar cell is the control most often built below it.
 *
 * Stacked, not spread. Spreading the number and its count to opposite edges put
 * the count hard against the NEXT day's number, and at 390px it read as that
 * day's count — the number belonged to the wrong day at a glance. Invisible at
 * desktop width, where the count is hidden and the chips carry the load. */
.cal__day {
  inline-size: 100%;
  min-block-size: var(--target-min);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1);
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.cal__day:hover .cal__daynum { text-decoration: underline; }
.cal__day:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: calc(var(--focus-ring-offset) * -1);
  border-radius: var(--radius-sm);
}

.cal__daynum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.75rem;
  min-block-size: 1.75rem;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

/* A number, not a dot: "3" says how much is there, a dot only says "something".
 * On a phone this is the cell's entire affordance. */
.cal__count {
  min-inline-size: 1.25rem;
  padding-inline: var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-surface-inverse);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Chips are the wide layout's detail. Hidden below the breakpoint rather than
 * unrendered, so a resize needs no re-render. The consumer sets the breakpoint:
 * it depends on whether a sidebar is eating the width. */
.cal__chips { display: none; }

.chip {
  inline-size: 100%;
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  margin-block-start: var(--space-1);
  border: 1px solid var(--color-border);
  border-inline-start: var(--border-width-accent) solid currentColor;
  border-radius: var(--radius-sm);
  background: var(--color-surface-raised);
  font: inherit;
  font-size: var(--text-xs);
  text-align: start;
  cursor: pointer;
}
.chip:hover { border-color: var(--color-border-strong); }
.chip:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* The lead carries the meaning without colour — a time for an Event, a priority
 * for a Task. The chip's tone is the third signal, never the only one. */
.chip__lead {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
}

/* One line, ellipsised. A long name must not stretch the row or push the page
 * into horizontal scroll — the agenda beneath shows it in full. */
.chip__text {
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "+2 more" — the overflow answer for a busy day. It scrolls the agenda to that
 * day rather than expanding the cell, because a cell that grows to fit twelve
 * items reflows the whole month. */
.cal__more {
  display: block;
  inline-size: 100%;
  margin-block-start: var(--space-1);
  padding: var(--space-1);
  background: none;
  border: 0;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: start;
  cursor: pointer;
}