/* The month calendar — STORY-014.
 *
 * A month is genuinely tabular, so it is a <table> with real column headers
 * rather than a grid of divs wearing ARIA. design.md: semantic HTML first.
 *
 * Mobile-first. The narrow layout is the base and the chips are added at the
 * breakpoint, so a phone never downloads a desktop layout and then undoes it.
 */

.cal-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-2);
  margin-block-start: var(--space-4);
}
.cal-bar .field { inline-size: auto; min-inline-size: 7rem; }
.cal-bar__spacer { margin-inline-start: auto; }

/* The month in words, for anyone who has just changed the year and wants to be
 * sure. Also what a screen reader reads as the table's caption. */
.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 day numbers are */
  margin-block-start: var(--space-3);
}

.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 name 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); }

/* Today is marked by an accent bar and by being announced as today's date;
 * never by colour alone. */
.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. Found by
 * looking at the phone frame; it is 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;
}

/* The count is the phone's whole affordance, so it is a number and not a dot:
 * "3" says how much is there, a dot only says "something". */
.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. */
.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 is the word that carries the meaning without colour — a time for an
 * Event, a priority for a Task. */
.chip__lead {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-medium);
}
/* One line, ellipsised. A long event name must not stretch the row or push the
 * page into horizontal scroll — the agenda below shows it in full. */
.chip__text {
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.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;
}
.cal__more:hover { color: var(--color-text); text-decoration: underline; }
.cal__more:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

@media (min-width: 48rem) {
  .cal__cell { block-size: 7rem; padding: var(--space-2); }
  .cal__chips { display: block; }
  /* The count would be a second, quieter copy of what the chips already say. */
  .cal__count { display: none; }
  /* With no count to place, the number returns to the corner it belongs in.
   * The 44px floor stays: a wide viewport is not proof of a mouse. */
  .cal__day {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
  }
}

/* The selected day in full. On the phone this is where the detail lives; on
 * desktop it is the answer to a day with more than fits. */
.cal-agenda { margin-block-start: var(--space-5); }