/* nimiq.kids — THE CALENDAR (public/kid/js/calendar.js).
   Split out of chart.css at the 800-line guard, like box.css and chrome.css before it.
   One module, one stylesheet: the card, its header and month arrows, the pinned day
   letters, and the date cells, base and tablet together.

   The STICKER on a date is not here. `.stk-cal` and the `.cal-dates .stk-*` rules live
   with the rest of the sticker kit in chart.css, where every size a sticker is ever drawn
   at sits in one place on purpose. Loaded AFTER chart.css. */

/* ---------- THE CALENDAR ----------
   Month name, then the week (day letters), then the dates. One card, three
   stacked rows, in that order.

   The whole behaviour rests on splitting the day LETTERS off into their own row:
   they are the column header, so they can stay pinned while the dates beneath
   them grow from a single week into the full month. Nothing above the dates ever
   moves, and the month can only push Today further down (Andjroo's rule: opening
   bumps content DOWN, never up). Both rows are the same
   `grid-template-columns: repeat(7, 1fr)`, so a column is in exactly the same
   place whether it has one date under it or six. */
.k-cal {
  display: flex; flex-direction: column; gap: var(--s3);
  background: #fff; border-radius: var(--r-card); box-shadow: var(--sh-card);
  padding: var(--s4) var(--s3);
}
/* The header row. `cal-hd` is still the whole row when the calendar is closed, so a
   shut calendar is byte-for-byte the control it has always been; the month arrows
   only exist once there is a month to move through. */
.cal-top { display: flex; align-items: center; gap: var(--s2); width: 100%; }
.cal-hd {
  display: flex; align-items: center; gap: var(--s2); flex: 1; min-width: 0;
  background: none; text-align: left;
}
.cal-nav { flex: none; display: flex; align-items: center; gap: var(--s1); }
.cal-nav button {
  display: inline-flex; padding: var(--s1); background: none;
  font-size: var(--fs-micro); color: var(--ink-50);
}
/* Not hidden when there is no month to go forward to: a control that vanishes moves
   the one beside it, and the pair has to stay put under a kid's thumb. */
.cal-nav button[disabled] { opacity: 0.25; }
.cal-month { flex: 1; font-size: var(--fs-body); font-weight: var(--fw-title); color: var(--ink); }
.cal-chev {
  flex: none; display: inline-flex; font-size: var(--fs-micro); color: var(--ink-30);
  transition: transform var(--t-ui) var(--ease);
}
.k-cal.is-open .cal-chev { transform: rotate(90deg); }

/* THE PINNED ROW. Same columns as the dates below it, so opening the month
   cannot shift a single column. The gap is the column rhythm for BOTH rows —
   4px let the tinted cells very nearly touch, which read as a checkerboard
   rather than a calendar. */
.cal-dow, .cal-dates {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s2);
  width: 100%;
}
.cal-dow span {
  text-align: center; font-size: var(--fs-micro); font-weight: var(--fw-title);
  color: var(--ink-50); line-height: 1;
}
.cal-dates { background: none; padding: 0; }

/* A date: the number, and under it the place the sticker lives.
   The old box had literally zero slack — 4 + 12 + 2 + 22 + 4 came to exactly the
   44px cell, so every sticker sat hard against the number above it and the cell
   edge below. The numbers below are the same stack with room to breathe. */
.cal-day {
  display: flex; flex-direction: column; align-items: center; gap: var(--s1);
  padding: 6px 0; border-radius: var(--r-tile);
  line-height: 1;
}
.cal-day b { font-size: 13px; font-weight: var(--fw-title); color: var(--ink-70); }
.cal-day.is-part { background: rgba(5, 130, 202, 0.08); }
.cal-day.is-full { background: rgba(33, 188, 165, 0.14); }
.cal-day.is-full b { color: var(--green-2); }
.cal-day.is-today { background: rgba(5, 130, 202, 0.1); }
.cal-day.is-today b { color: var(--blue-2); }
/* Days belonging to the months either side of this one. The NUMBER fades, so the
   month boundary still reads at a glance; the STICKER does not. Fading the whole
   cell used to turn a week of finished work into ghosts: the grid is whole Monday
   weeks, so on the 3rd of a month five of the seven dates in the row above Today
   belong to last month, and that row is the only past week ever on screen
   (Andjroo, 2026-08-03). A day that happened has to look like it happened. */
.cal-day.is-out b, .cal-day.is-out .cal-check { opacity: 0.35; }

/* The sticker's home. It is always this tall, so a week with stickers and a week
   without are exactly the same height and the rows below never jump. */
.cal-day-mark {
  position: relative; display: block; width: 34px; height: 34px;
}
.cal-check {
  display: grid; place-items: center; width: 100%; height: 100%;
  font-size: 16px; color: var(--green-2);
}

/* ---------- tablet scale-up (matches the block in chart.css) ---------- */
@media (min-width: 768px) {
  .k-cal { padding: var(--s4); gap: var(--s3); }
  .cal-month { font-size: var(--fs-title); }
  .cal-chev { font-size: var(--fs-label); }
  .cal-dow, .cal-dates { gap: var(--s2); }
  .cal-dow span { font-size: var(--fs-label); }
  .cal-day { padding: 8px 0 9px; gap: 5px; border-radius: var(--r-tile); }
  .cal-day b { font-size: 19px; }
  .cal-day-mark { width: 40px; height: 40px; }
  .cal-check { font-size: 18px; }
  .stk-cal { width: 40px; height: 40px; }
  .stk-cal .stk-emoji { font-size: 22px; }
}