/* ══════════════════════════════════════════════════════════════════════════
   CS MINICAL — THE calendar's skin. (CS-PLAT-09 · Dom 2026-08-22 → 08-23)

   Pairs with components/cs-minical.js. The JS builds the DOM and owns the
   behaviour; this file is only what it looks like, in its own sheet so no lane
   has to edit another's stylesheet to ship.

   THE REFERENCE IS THE /cs/calendar MONTH POPOVER. Dom, 2026-08-23, pointing at
   it: "This mini cal use everywhere please." So this sheet is that popover,
   measured off the screen it was approved on, and every calendar in the
   product now renders from it:

     ‹ August 2026 ›   40px square chevrons, hairline border, no fill
     M T W T F S S     weekday initials, 9px/600, ink-3
     [34] 7 × 6        plain numerals — NO rings, NO pills, NO boxes
     today             filled var(--brand) circle, WHITE numeral
     selected          a 1px var(--brand) ring, and nothing else
     this week         a soft --bg-hover band across the whole row
     dots              up to 3 under the numeral, in the caller's own colours
     outside month     muted · unavailable days muted and unpressable
     footer            one helper line (or Today / Clear) in ink-3

   GEOMETRY IS FIXED, NOT FLUID (Dom 2026-08-23: "no yo-yo shapes on date
   selections"). Every row is `[18px] repeat(7, 32px)`, so a day cell is 32×30
   with a 22px circle inside it on EVERY screen — neither the cell nor the disc
   can stretch into an ellipse when the host is wide.

   Tokens only: --brand for the three red things, the neutral ladder for
   everything else, the 4 / 8 / 12 / 16 / 24 / 32 spacing scale. The one literal
   is --csmc-today-ink, below, and it is white on purpose.
   ══════════════════════════════════════════════════════════════════════════ */

.csmc-pop, .csmc-inline, .csmc-panel {
  /* The numeral on today's red disc. WHITE in both themes — that is what the
     approved popover shows, and --brand-ink flips to near-black in dark, which
     would make today read as a hole instead of a marker. */
  --csmc-today-ink: #FFFFFF;
  --csmc-cell: 32px;   /* the column, and the day's hit width */
  --csmc-row: 30px;    /* 2 pad + 22 disc + 1 gap + 4 dots = 29 */
  --csmc-disc: 22px;   /* the numeral's circle — the ONE round thing here */
}

/* ── the trigger: a quiet "Sun Aug 23 ▾" button, never a native field ────── */
.csmc { position: relative; display: inline-block; }

/* The original input stays in the DOM as the ISO value carrier for every save
   path already written against it. It is hidden, not removed. */
.csmc-native {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  border: 0; opacity: 0; overflow: hidden; clip-path: inset(50%);
  pointer-events: none;
}

/* The trigger inherits the field's own classes from the JS, so a caller that
   styled the input still styles this. These are only the defaults underneath. */
.csmc-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 100%; cursor: pointer; font: inherit; text-align: left;
  color: var(--csx-ink, var(--ink, var(--ink90)));
}
.csmc-trigger.is-empty .csmc-trigger-t { color: var(--csx-ink-3, var(--ink-3)); }
.csmc-trigger-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csmc-caret {
  width: 6px; height: 6px; flex: none; margin-top: -3px;
  border-right: 1.5px solid var(--csx-ink-3, var(--ink-3));
  border-bottom: 1.5px solid var(--csx-ink-3, var(--ink-3));
  transform: rotate(45deg);
}
.csmc-trigger:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── the panel ───────────────────────────────────────────────────────────── */
.csmc-pop {
  position: absolute; z-index: 70; top: calc(100% + 8px); left: 0;
  width: 268px; padding: 12px;
  background: var(--csx-overlay, var(--csx-surface, var(--bg-elevated, var(--cat-ink))));
  border: 1px solid var(--csx-line-2, var(--line, var(--hair15)));
  border-radius: var(--csx-r-md, 12px);
  box-shadow: var(--csx-shadow-pop, 0 24px 60px -24px rgba(0,0,0,.5));
  font-family: var(--font-sans, system-ui, sans-serif);
  color: var(--csx-ink, var(--ink, var(--ink90)));
}
.csmc-pop[hidden] { display: none; }

/* Inline (in the page) and panel (the caller owns the box) drop the surface. */
.csmc-inline, .csmc-panel {
  display: block; width: 244px; max-width: 100%;
  font-family: var(--font-sans, system-ui, sans-serif);
  color: var(--csx-ink, var(--ink, var(--ink90)));
}
/* The panel's host owns its box, so the grid sizes it — max-content is exactly
   the fixed track (7 × 32 plus the week gutter), never a shrink-wrapped sliver.
   max-width has to be re-set with it: the panel is absolutely positioned off a
   small button, so the inherited `max-width: 100%` measured 100px and crushed
   the grid — and left unbounded, the footer sentence set the width on one long
   line. 268px is the grid plus its padding; the helper wraps, as it should. */
.csmc-panel { width: max-content; max-width: 268px; }

/* ── ‹ Month YYYY › ──────────────────────────────────────────────────────── */
.csmc-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.csmc-head.is-static { justify-content: flex-start; }
.csmc-title {
  font-size: calc(13px * var(--text-scale, 1)); font-weight: 600; letter-spacing: -.01em;
  color: var(--csx-ink, var(--ink, var(--ink90)));
}
.csmc-nav {
  width: 40px; height: 40px; padding: 0; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--csx-line, var(--line, var(--hair)));
  border-radius: 10px;
  background: none; cursor: pointer;
  color: var(--csx-ink-3, var(--ink-3, var(--ink60)));
  transition: background 170ms ease, color 170ms ease, border-color 170ms ease;
}
.csmc-nav svg {
  width: 16px; height: 16px; display: block;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.csmc-nav:hover {
  background: var(--csx-surface-hover, var(--bg-hover, transparent));
  color: var(--csx-ink, var(--ink));
}
.csmc-nav:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }

/* ── the grid. ONE track everywhere: [wk] then seven 32px columns. ───────── */
.csmc-dow, .csmc-row {
  display: grid; grid-template-columns: repeat(7, var(--csmc-cell));
  align-items: center; justify-content: space-between;
}
.csmc-dow:has(.csmc-wk), .csmc-grid.has-wk .csmc-row {
  grid-template-columns: 18px repeat(7, var(--csmc-cell));
}
.csmc-dow {
  margin-bottom: 4px; text-align: center;
  font-size: calc(9px * var(--text-scale, 1)); font-weight: 600; letter-spacing: .04em;
  color: var(--csx-ink-3, var(--ink-3, var(--ink60)));
}
/* The ISO week gutter — the same numbers the week grid prints in its corner. */
.csmc-wk {
  font-size: calc(9px * var(--text-scale, 1)); text-align: right; padding-right: 4px; opacity: .55;
  color: var(--csx-ink-3, var(--ink-3, var(--ink60)));
  font-variant-numeric: tabular-nums;
}
/* The week the grid behind this one is showing. Orientation, not a selection,
   so it is a band and never a border. */
/* Ink at 6%, not --bg-hover: the band sits on the panel's OWN surface, and a
   solid hover token is nearly the same colour as that surface in dark — the
   band was invisible on /cs/calendar. A wash reads on paper and on ink alike. */
.csmc-row.is-band { background: color-mix(in srgb, var(--csx-ink, var(--ink)) 6%, transparent); }

/* ── a day ───────────────────────────────────────────────────────────────── */
.csmc-day {
  position: relative;
  width: var(--csmc-cell); height: var(--csmc-row);
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 2px 0 0; border: 0; background: none; cursor: pointer;
  font: inherit;
  color: var(--csx-ink, var(--ink, var(--ink90)));
}
/* THE NUMERAL. This is the only thing in the grid that can be a circle, and it
   is a circle in exactly two states: today (filled) and selected (ringed). */
.csmc-n {
  display: grid; place-items: center;
  /* flex: none is LOAD-BEARING. The day is a flex column, so without it the
     disc shrinks to whatever height is left over and today's circle becomes an
     ellipse — the exact "yo-yo shape" this whole pass is about. */
  flex: none;
  width: var(--csmc-disc); height: var(--csmc-disc);
  border-radius: 50%;
  font-size: calc(12px * var(--text-scale, 1)); font-weight: 500; line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: background 170ms ease, color 170ms ease, box-shadow 170ms ease;
}
.csmc-day:hover .csmc-n { background: var(--csx-surface-hover, var(--bg-hover, transparent)); }
.csmc-day:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 8px; }

/* TODAY — the one filled disc in the grid. */
.csmc-day.is-today .csmc-n,
.csmc-day.is-today:hover .csmc-n {
  background: var(--brand);
  color: var(--csmc-today-ink);
  font-weight: 600;
}
/* THE DAY YOU PICKED, when it is not today: a 1px ring, nothing else. */
.csmc-day.is-sel:not(.is-today) .csmc-n {
  box-shadow: inset 0 0 0 1px var(--brand);
  font-weight: 600;
}
/* Not this month — shown, because a month grid that hides its edges is not a
   month grid, but clearly not part of it. */
.csmc-day.is-out .csmc-n { color: var(--csx-ink-3, var(--ink-3)); opacity: .4; }
/* A day we cannot sell. Muted, not hidden; not pressable, so it is not a
   control that does nothing. */
.csmc-day.is-off { cursor: default; }
.csmc-day.is-off .csmc-n { color: var(--csx-ink-4, var(--ink-4)); }
.csmc-day.is-off:hover .csmc-n { background: none; }
.csmc-day.is-today.is-off .csmc-n {
  background: color-mix(in srgb, var(--brand) 40%, transparent);
  color: var(--csx-ink, var(--ink));
}

/* ── dots: "there is something on this day", never a count ───────────────── */
.csmc-dots { display: flex; gap: 2px; height: 4px; align-items: center; }
.csmc-dot { width: 3.5px; height: 3.5px; border-radius: 50%; display: block; flex: none; }

/* ── one quiet footer line ───────────────────────────────────────────────── */
.csmc-foot {
  margin: 8px 0 0; padding-top: 8px;
  border-top: 1px solid var(--csx-line, var(--line, var(--hair)));
  font-size: calc(11px * var(--text-scale, 1)); line-height: 1.35; text-align: center;
  color: var(--csx-ink-3, var(--ink-3, var(--ink60)));
}
.csmc-foot.is-links {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  text-align: left;
}
.csmc-link {
  padding: 0; border: 0; background: none; cursor: pointer; font: inherit;
  font-size: calc(11px * var(--text-scale, 1)); font-weight: 600;
  color: var(--csx-ink-3, var(--ink-3, var(--ink60)));
  transition: color 170ms ease;
}
.csmc-link:hover { color: var(--csx-ink, var(--ink)); }
.csmc-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .csmc-pop *, .csmc-inline *, .csmc-panel * { transition-duration: 1ms !important; }
}