/* The Calendar tab — increment J, step 2 (NEXT-PLAN §5 J; the owner's N13).
 *
 * Its own stylesheet: day.css and capture.css take no new rules (the wave's
 * ground rules). The month in MOCKUP.html's calendar language (its .cal
 * block, :104-109): a grid of days — empty, .w light for 1–4 entries, .c
 * solid for 5 or more, .m a move day's blue-grey (which wins), .today
 * outlined — drawn here as day BUTTONS of 44 px at least, each with its date.
 *
 * Every colour is a tokens.css token, so light and dark are one definition.
 * The one colour tokens.css has no name for, the light shade, is the accent
 * mixed into the surface (no new hex, and one rule for both themes, as every
 * theme rule lives in tokens.css): the green tint the cards use measures
 * 1.07:1 against the page in light mode, which would read as no shade at all.
 * calendar-view.js writes the classes; a second mount (the desktop's left
 * pane, NEXT-PLAN §5 L) takes the same rules.
 */

/* ------------------------------------------------------ ‹ October ›, row 1 */

.cal__head {
  display: flex;
  align-items: center;
  min-height: var(--touch);
  margin: var(--space-1) 0 var(--space-2);
}

/* The view's heading, in the day page's serif (day.css .view__title.day__date). */
.cal__title,
.view__title.cal__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

/* The arrows look exactly as the day's (days.css .day__step: a quiet glyph on
 * a 44 px target, hugging the title); being buttons, their chrome goes. */
.cal__step {
  padding: 0;
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.cal__step--prev {
  margin: 0 calc(-1 * var(--space-2)) 0 calc(-1 * var(--space-3));
}

.cal__step--next {
  margin-left: calc(-1 * var(--space-2));
}

/* ---------------------------------------------------------------- the grid */

/* Seven equal columns 2 px apart, as the wireframe's (.cal gap: 2px): at
 * 360 px each day is still 45 px wide. The table's outer spacing reaches
 * into the gutter, so the days line up with the header and the key. */
.cal__grid {
  width: calc(100% + 4px);
  margin: 0 -2px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 2px;
}

.cal__grid th {
  padding: 0 0 var(--space-1);
  color: var(--ink-muted);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
}

.cal__grid td {
  padding: 0;
}

/* S (review finding 8): a phone with Android's Display size turned up is
 * 320 px wide, and seven days in its 288 px column were 39 px each — under
 * the 44 px a day's button owes. Below 352 px (where the column stops giving
 * 44) the tab's month runs to the screen's edges, across the page's gutters
 * (app.css's body padding, --space-4 a side), 1 px apart: (320 − 8) ÷ 7 is
 * 44.5 px a day. Nothing scrolls sideways — the grid is exactly the screen's
 * width. The desk pane's own month (desktop.css) is never this narrow. */
@media (max-width: 351.98px) {
  .cal__grid {
    width: calc(100% + 2 * var(--space-4));
    margin: 0 calc(-1 * var(--space-4));
    border-spacing: 1px;
  }
}

/* S, step 2: beside the side column (720px to 1099px; views.css) the tab's
 * month stands in a column up to 647px wide, and a day 48px tall was a slot
 * 84px long. A day there is four wide to three tall, and never under the
 * 44px it owes: at 800px that is 55 by 44, at 1024px 84 by 63. Only while
 * the pane is up — a phone on its side keeps the 48px row, which is all its
 * 412px of height can carry — and only the tab's month, not the pane's. */
@media (min-width: 720px) and (max-width: 1099.98px) {
  .shell:has(> .pane--left:not([hidden])) > .view .cal__day {
    height: auto;
    aspect-ratio: 4 / 3;
  }
}

/* A day: its date on the page's surface, a hairline round it — nothing written. */
.cal__day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--touch);
  height: 3rem;
  padding: 0;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.cal__day:hover {
  border-color: var(--accent);
}

/* Outside the cell, past a 2 px gap of page, so it reads on a solid day too. */
.cal__day:focus-visible {
  z-index: 1;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* .w: 1 to 4 entries — the accent nearly a third of the way into the
 * surface: about 1.6:1 against an empty day in both themes, where the cards'
 * own washes stand 1.3 to 1.4:1 (tokens.css). */
.cal__day--light,
.cal__swatch--light {
  background: var(--tint-money);
  background: color-mix(in srgb, var(--accent) 30%, var(--surface));
  border-color: transparent;
}

/* .c: 5 or more — the accent itself, its ink on it (6.6:1 light, 5.8:1 dark). */
.cal__day--solid,
.cal__swatch--solid {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: transparent;
}

/* .m: a move day — the Move cards' own blue-grey, which wins over both… */
.cal__day--move,
.cal__swatch--move {
  background: var(--tint-move);
  border-color: transparent;
}

/* …and a bar under the date that says it without colour (WCAG 1.4.1): the
 * blue-grey and the light green are close in lightness. */
.cal__day--move::after,
.cal__swatch--move::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0.375rem;
  width: 1rem;
  height: 3px;
  margin-left: -0.5rem;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.6;
}

/* .today: outlined in the emphasis edge (3.3:1 on the light surface), with a
 * ring of the surface inside it, so the outline reads on any shade. */
.cal__day--today,
.cal__day--today:hover {
  border: 2px solid var(--emphasis-edge);
  box-shadow: inset 0 0 0 2px var(--surface);
  font-weight: 700;
}

/* ----------------------------------------------------------------- the key */

.cal__key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  color: var(--ink-muted);
  font-size: var(--text-sm);
}

.cal__key li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.cal__swatch {
  position: relative;
  display: inline-block;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid var(--border);
  border-radius: 3px;
}

.cal__swatch--move::after {
  bottom: 2px;
  width: 0.625rem;
  height: 2px;
  margin-left: -0.3125rem;
  color: var(--ink);
}

.cal__swatch--today {
  background: var(--surface);
  border: 2px solid var(--emphasis-edge);
}

/* ---------------------------------- a day that holds a plan (increment P)
 *
 * A dot in the day's corner, in the orange the Planned strip is drawn in — a
 * SHAPE, never a fifth shade: N13's shades say what was written, and a day
 * can be written and planned at once. Ringed in the page's surface so it
 * reads on the solid green and the blue-grey too. ::before, because a move
 * day's bar is the ::after. The day's spoken name says "2 planned"
 * (calendar-spec.js dayLabel), so nothing is told by colour alone. */
.cal__day--plan::before,
.cal__swatch--plan::before {
  content: "";
  position: absolute;
  top: 0.3125rem;
  right: 0.3125rem;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: var(--emphasis-edge);
  box-shadow: 0 0 0 1.5px var(--surface);
}

.cal__swatch--plan::before {
  top: 2px;
  right: 2px;
  width: 0.375rem;
  height: 0.375rem;
}

/* Wave R: the Upcoming list under the month (calendar.js drawUpcoming). Each
   day is a 44 px button to its page; its plans are a plain list under it. */
.upcoming {
  margin-top: 1rem;
}
.upcoming__day {
  display: block;
  width: 100%;
  min-height: var(--touch);
  padding: 0.5rem 0;
  border: 0;
  border-top: 1px solid var(--border);
  background: none;
  color: var(--ps-green);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.upcoming__rows {
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
}
.upcoming__row {
  padding: 0.25rem 0;
  color: var(--ink);
  font-size: var(--text-sm);
}