/* ===== calendar.css — the delivery-date calendar (checkout /order/). Copy this block verbatim into site/src/css/calendar.css. =====
   Brand: deep green #083c22 is the only fill, pink #fd3c8b is a GRAPHIC (focus ring, selected bar, today dot) and never text,
   cream/white/mint-light are the grounds. Fraunces for the month label only; Plus Jakarta Sans for every control.
   Every colour pair below is AA (ratios listed in SPEC.md). Tap targets are 44px minimum in every state and at every width. */

.cal { --cal-closed: #5a6a5e; --cal-closed-ground: #f3f4ee; --cal-gap: 6px; --cal-cell: 52px; margin: 0 0 20px; }

/* 1. Mode toggle — a segmented control on a cream track; the real <input type="radio" name="fulfilment"> stays in the page for every script that reads it */
.cal-mode { margin: 0 0 18px; padding: 0; border: 0; }
.cal-mode-legend { margin: 0 0 10px; font-size: 16px; font-weight: 700; }
.cal-mode-track { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: var(--cream); border: 1px solid var(--line); border-radius: 14px; }
.cal-mode-opt { position: relative; display: block; margin: 0; }
.cal-mode-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cal-mode-text { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 52px; padding: 7px 10px; border-radius: 11px; font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--ink); text-align: center; transition: background-color 160ms ease-out, color 160ms ease-out; }
.cal-mode-sub { font-size: 13px; font-weight: 600; color: var(--muted); }
.cal-mode-input:hover + .cal-mode-text { background: var(--mint-light); }
.cal-mode-input:checked + .cal-mode-text { background: var(--green-deep); color: var(--white); }
.cal-mode-input:checked + .cal-mode-text .cal-mode-sub { color: var(--mint-text); }
.cal-mode-input:focus-visible + .cal-mode-text { outline: 3px solid var(--pink); outline-offset: 2px; }
.cal-mode-input:active + .cal-mode-text { transform: scale(0.98); }

/* 2. Head — month label + the one rule line */
.cal-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin: 0 0 10px; }
.cal-month { margin: 0; font-family: var(--display); font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--green-deep); font-variation-settings: "opsz" 36, "SOFT" 20; }
.cal-rule { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--muted); }

/* 3. Grid — a real <table>; rows Mon–Sun; one <button> per date */
.cal-table { width: 100%; border-collapse: separate; border-spacing: var(--cal-gap); margin: 0 calc(-1 * var(--cal-gap)); table-layout: fixed; }
.cal-dow { padding: 0 0 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: var(--muted); text-align: center; }
.cal-cell { padding: 0; vertical-align: top; }
.cal-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; min-width: 44px; min-height: var(--cal-cell); padding: 6px 2px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--white); color: var(--ink); font-size: 17px; font-weight: 700; line-height: 1.1; text-align: center; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out, transform 120ms ease-out; }
.cal-num { display: block; }
.cal-tag { display: block; font-size: 11px; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; color: var(--muted); }
.cal-tag:empty { display: none; }
/* month start inside the grid: "1 Nov" reads as a date, not a bare 1 (data-month-start sits on .cal-num) */
.cal-num[data-month-start]::after { content: " " attr(data-month-start); font-size: 12px; font-weight: 700; }
/* available */
.cal-day[data-state="available"]:hover { background: var(--mint-light); border-color: var(--green-deep); }
.cal-day[data-state="available"]:active { transform: scale(0.96); }
/* selected: deep-green fill, white number, pink bar under the number (the brand's underline) */
.cal-day[aria-pressed="true"] { background: var(--green-deep); border-color: var(--green-deep); color: var(--white); }
.cal-day[aria-pressed="true"] .cal-tag { color: var(--mint-text); }
.cal-day[aria-pressed="true"]::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 18px; height: 3px; border-radius: 2px; background: var(--pink); transform: translateX(-50%); }
.cal-day[aria-pressed="true"]:hover { background: var(--green-deep); border-color: var(--green-deep); }
/* today: a pink dot top-right + "Today" tag; aria-current="date" on the button */
.cal-day[aria-current="date"]::before { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); }
/* closed (past cut-off / outside the 14 days / already gone): flat, no border, muted; still focusable so the reason is read out */
.cal-day[data-state="closed"] { background: var(--cal-closed-ground); border-color: transparent; color: var(--cal-closed); cursor: not-allowed; }
.cal-day[data-state="closed"] .cal-tag { color: var(--cal-closed); }
.cal-day[data-state="closed"]:active { transform: none; }
/* past dates in the first row: lighter still, no tile */
.cal-day[data-state="closed"][data-past] { background: transparent; }
/* sold out: struck-through number, tag "Full"; still focusable */
.cal-day[data-state="soldout"] { background: var(--white); border-style: dashed; border-color: var(--line); color: var(--cal-closed); cursor: not-allowed; }
.cal-day[data-state="soldout"] .cal-num { text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: var(--pink); }
.cal-day[data-state="soldout"] .cal-tag { color: var(--cal-closed); }
.cal-day[data-state="soldout"]:active { transform: none; }
/* keyboard focus: pink ring on every state (3.1:1 on white, 3.6:1 on deep green) */
.cal-day:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
/* padding cells before/after the range */
.cal-cell--pad { background: transparent; }

/* 4. Chosen date line (aria-live) + key + messages */
.cal-chosen { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--mint-light); color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.4; }
.cal-chosen::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--green-deep); box-shadow: 0 0 0 3px var(--mint); }
.cal-chosen:empty { display: none; }
.cal-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 13px; font-weight: 600; color: var(--muted); }
.cal-key li { display: inline-flex; align-items: center; gap: 6px; }
.cal-key-swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line-strong); background: var(--white); }
.cal-key-swatch--closed { background: var(--cal-closed-ground); border-color: transparent; }
.cal-key-swatch--soldout { border-style: dashed; border-color: var(--line); }
.cal-key-swatch--selected { background: var(--green-deep); border-color: var(--green-deep); }
.cal-msg { margin: 10px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--cream); font-size: 15px; font-weight: 600; line-height: 1.5; color: var(--ink); }
.cal-msg:empty, .cal-msg[hidden] { display: none; }

/* 5. Widths: the 390px column gives 44–48px cells; from 480px the cells grow and the tags get room */
@media (min-width: 480px) { .cal { --cal-cell: 60px; --cal-gap: 8px; } .cal-day { font-size: 18px; } .cal-tag { font-size: 12px; } }
@media (max-width: 767px) { .cal-mode-text { font-size: 16px; } .cal-mode-sub { font-size: 13px; } .cal-rule { font-size: 15px; } }
@media (max-width: 400px) { .cal-day { padding-inline: 0; } .cal-tag { font-size: 10.5px; } }

/* 6. Reduced motion: no transitions, no press scale */
@media (prefers-reduced-motion: reduce) { .cal-day, .cal-mode-text { transition: none; } .cal-day:active, .cal-mode-input:active + .cal-mode-text { transform: none; } }

/* ---- integration (L6, 31 Oct 2026): not part of the design artefact block above; no new colours. ---- */
/* The calendar shows the chosen window in its own line, so the collection note is not repeated while it is live. */
html[data-calendar-live] #collect-note { display: none; }