/* mp-week-picker — a camp page's weeks as tiles, its two price cards, Reserve.
   The chosen tile is the action green with ink words; the others raised panels (ink-raised on an
   ink page). Contract: COMPONENTS.md §7.53. */
@layer components {
  .mp-week-picker { display: grid; gap: var(--mp-space-xl); scroll-margin-block-start: calc(var(--mp-h-header) + var(--mp-space-s)); }

  /* The head: the season, then its booking state in the accent after a dot (open), or quiet. */
  .mp-week-picker__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-space-2xs) var(--mp-space-s); margin-block-end: calc(-1 * var(--mp-space-s)); font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-ui); letter-spacing: var(--mp-track-caps); text-transform: uppercase; }
  .mp-week-picker__season { color: var(--mp-color-text-2); }
  .mp-week-picker__state { display: inline-flex; align-items: center; gap: var(--mp-space-2xs); color: var(--mp-color-text-2); }
  .mp-week-picker__state--open { color: var(--mp-color-accent-text); }
  .mp-week-picker__state--open::before { content: ""; inline-size: .6em; block-size: .6em; border-radius: 50%; background-color: currentColor; }

  .mp-week-picker__weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, calc(var(--mp-tap) * 6.5)), 1fr)); gap: var(--mp-space-xs); } /* four across at the widest: two rows of a summer's eight */
  .mp-week-picker__week {
    display: flex;
    flex-direction: column;
    gap: var(--mp-space-xs);
    min-block-size: calc(var(--mp-tap) * 3.5);
    padding: var(--mp-space-m);
    border: var(--mp-border) solid var(--mp-color-surface-2);
    border-radius: var(--mp-radius-md);
    background-color: var(--mp-color-surface-2);
    color: var(--mp-color-text);
    text-align: start;
    transition: background-color var(--mp-dur-fast) var(--mp-ease-out), border-color var(--mp-dur-fast) var(--mp-ease-out);
  }
  .mp-week-picker__week:not(:disabled):hover { border-color: var(--mp-color-action); }
  .mp-week-picker__week:focus-visible { outline: var(--mp-focus-width) solid var(--mp-color-focus); outline-offset: var(--mp-focus-offset); }
  .mp-week-picker__week[aria-pressed="true"] { border-color: var(--mp-color-action); background-color: var(--mp-color-action); color: var(--mp-color-on-action); }
  .mp-week-picker__week:disabled { cursor: not-allowed; opacity: .55; }
  .mp-week-picker__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--mp-space-2xs); } /* a chip too long to sit beside the numeral goes under it */
  .mp-week-picker__phone { white-space: nowrap; }
  .mp-week-picker__no { font: var(--mp-weight-display) var(--mp-fs-stat) / .85 var(--mp-font-display); letter-spacing: var(--mp-track-display); }
  .mp-week-picker__status {
    flex: 0 1 auto; /* a long label wraps inside the tile, never past it */
    min-inline-size: 0;
    padding: var(--mp-space-3xs) var(--mp-space-2xs);
    border-radius: var(--mp-radius-pill);
    background-color: var(--mp-color-surface);
    color: var(--mp-color-accent-text);
    font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-ui);
    letter-spacing: var(--mp-track-caps);
    text-transform: uppercase;
  }
  .mp-week-picker__status--low { background-color: var(--mp-color-warn-soft); color: var(--mp-color-warn); } /* as .mp-avail--low: the amber on its own pale fill reads on any surface, ink too */
  .mp-week-picker__status--full, .mp-week-picker__status--closed, .mp-week-picker__status--unknown { color: var(--mp-color-text-2); }
  .mp-week-picker__week[aria-pressed="true"] .mp-week-picker__status { background-color: var(--mp-color-inverse); color: var(--mp-color-on-inverse); }
  .mp-page-ink .mp-week-picker__week[aria-pressed="true"] .mp-week-picker__status { background-color: var(--mp-color-surface); color: var(--mp-color-text); } /* the page's ink */
  .mp-week-picker__dates { margin-block-start: auto; font: var(--mp-weight-display) var(--mp-fs-display-2xs) / 1 var(--mp-font-display); letter-spacing: var(--mp-track-display); text-transform: uppercase; }
  .mp-week-picker__note { margin-block-start: calc(-1 * var(--mp-space-2xs)); font: var(--mp-weight-ui) var(--mp-fs-sm) / var(--mp-lh-snug) var(--mp-font-ui); }

  /* The price cards: in the pay-in-full window the white card first, the deposit card second. */
  .mp-week-picker__prices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--mp-tap) * 8)), 1fr)); gap: var(--mp-space-xs); }
  .mp-week-picker__price {
    display: flex;
    flex-direction: column;
    gap: var(--mp-space-s);
    padding: var(--mp-space-panel);
    border-radius: var(--mp-radius-md);
    background-color: var(--mp-color-surface-2);
  }
  .mp-week-picker__price.mp-scheme-light { background-color: var(--mp-color-surface); }
  .mp-week-picker__price-label { color: var(--mp-color-accent-text); font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-ui); letter-spacing: var(--mp-track-caps); text-transform: uppercase; }
  .mp-week-picker__amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--mp-space-2xs) var(--mp-space-xs); }
  .mp-week-picker__figure { font: var(--mp-weight-display) var(--mp-fs-display-xl) / .9 var(--mp-font-display); letter-spacing: var(--mp-track-display); }
  .mp-week-picker__per { font: var(--mp-weight-ui) var(--mp-fs-lead) / var(--mp-lh-tight) var(--mp-font-ui); }
  .mp-week-picker__with { margin-block-start: calc(-1 * var(--mp-space-2xs)); color: var(--mp-color-text-2); font-size: var(--mp-fs-sm); } /* "$926.60 with HST", small under the pre-tax figure */
  .mp-week-picker__price-text { max-inline-size: var(--mp-measure); color: var(--mp-color-text-2); }
  /* The proof line: one quiet line under the cards, across them. */
  .mp-week-picker__proof { grid-column: 1 / -1; margin-block-start: var(--mp-space-2xs); color: var(--mp-color-text-2); font-size: var(--mp-fs-sm); }

  .mp-week-picker__go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mp-space-s) var(--mp-space-m); }
  .mp-week-picker__go > .mp-btn { min-block-size: var(--mp-h-control); padding-inline: var(--mp-space-l); font-size: var(--mp-fs-lead); }
  .mp-week-picker__go-note { max-inline-size: var(--mp-measure); color: var(--mp-color-text-2); font-size: var(--mp-fs-sm); }
  /* Phone: two to a row; the numeral, the dates, then the status chip under them and the note. */
  @media (width < 48rem) {
    .mp-week-picker__weeks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mp-week-picker__week { gap: var(--mp-space-2xs); min-block-size: 0; padding: var(--mp-space-s); }
    .mp-week-picker__top { display: contents; }
    .mp-week-picker__no { font-size: var(--mp-fs-stat); }
    .mp-week-picker__dates { order: 1; margin-block-start: var(--mp-space-3xs); }
    .mp-week-picker__status { order: 2; align-self: flex-start; }
    .mp-week-picker__status:is(.mp-week-picker__status--closed, .mp-week-picker__status--full, .mp-week-picker__status--unknown) { padding-inline: 0; background-color: transparent; text-wrap: balance; } /* a long quiet state as words in the dimmed tile, not a three-line pill */
    .mp-week-picker__note { order: 3; margin-block-start: 0; font-size: var(--mp-fs-xs); }
  }

  /* v2 (Nick, "Build it", 2026-10-30): the pricing left, the weeks right from 64rem, stacked below;
     the action row aligned to the columns. Contract: COMPONENTS.md §7.53, "v2". */
  .mp-week-picker--v2 { gap: var(--mp-space-l); }
  .mp-week-picker__body { display: grid; gap: var(--mp-space-l); }
  .mp-week-picker__pricing,
  .mp-week-picker__dates-col { display: flex; flex-direction: column; gap: var(--mp-space-s); }
  .mp-week-picker__step { display: flex; align-items: center; gap: var(--mp-space-2xs); color: var(--mp-color-text-2); font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-ui); letter-spacing: var(--mp-track-caps); text-transform: uppercase; }
  .mp-week-picker__step-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mp-space-2xs) var(--mp-space-s); }
  .mp-week-picker--v2 .mp-week-picker__head { margin: 0; }

  /* Static pricing: the first card white, the other raised; both stay fully visible on mobile. */
  .mp-week-picker__packages { display: grid; gap: var(--mp-space-s); min-inline-size: 0; margin: 0; padding: 0; border: 0; }
  .mp-week-picker__package-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mp-space-s); }
  .mp-week-picker__package-words { display: grid; gap: var(--mp-space-3xs); }
  .mp-week-picker__package { display: flex; flex-direction: column; gap: var(--mp-space-xs); padding: var(--mp-space-m); border-radius: var(--mp-radius-lg); background-color: var(--mp-color-surface-2); color: var(--mp-color-text); }
  .mp-week-picker__package.mp-scheme-light { background-color: var(--mp-color-surface); }
  .mp-week-picker__package-name,
  .mp-week-picker__package-includes,
  .mp-week-picker__package-price,
  .mp-week-picker__sale { display: block; }
  .mp-week-picker__package-name { color: var(--mp-color-accent-text); font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-ui); letter-spacing: var(--mp-track-caps); text-transform: uppercase; }
  .mp-week-picker__package-includes { color: var(--mp-color-text-2); }
  .mp-week-picker__package-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--mp-space-3xs) var(--mp-space-xs); }
  .mp-week-picker__from,
  .mp-week-picker--v2 .mp-week-picker__per { font: var(--mp-weight-ui) var(--mp-fs-base) / var(--mp-lh-tight) var(--mp-font-ui); }
  .mp-week-picker__package .mp-week-picker__figure { font-size: var(--mp-fs-stat); }
  /* The one price format in a sale (Nick 2026-11-05): the sale figure leads in the text colour, the
     regular figure struck after it one step smaller in the secondary colour; the sale row's words
     are the end note, in the accent. */
  .mp-week-picker__figure { text-decoration: none; }
  .mp-week-picker__was { color: var(--mp-color-text-2); font: var(--mp-weight-display) var(--mp-fs-display-l) / .9 var(--mp-font-display); letter-spacing: var(--mp-track-display); }
  .mp-week-picker__ends { color: var(--mp-color-accent-text); font-weight: var(--mp-weight-ui); }
  .mp-week-picker__package .mp-week-picker__with { margin: 0 0 0 auto; color: var(--mp-color-text-2); font-size: var(--mp-fs-sm); }
  /* The sale row: the pill in the accent with the card's own surface for its words (white on
     green-text on the white card, ink on green on the raised one), the row on the soft accent. */
  .mp-week-picker__sale { display: flex; align-items: center; gap: var(--mp-space-xs); padding: var(--mp-space-2xs) var(--mp-space-s); border-radius: var(--mp-radius-md); background-color: var(--mp-color-accent-soft); font-size: var(--mp-fs-sm); }
  .mp-week-picker__sale b { font-weight: var(--mp-weight-ui); }
  .mp-week-picker__pill { flex: none; padding: var(--mp-space-3xs) var(--mp-space-2xs); border-radius: var(--mp-radius-pill); background-color: var(--mp-color-accent-text); color: var(--mp-color-surface); font: var(--mp-weight-ui) var(--mp-fs-label) / var(--mp-lh-tight) var(--mp-font-ui); letter-spacing: var(--mp-track-caps); text-transform: uppercase; }
  /* The deposit, once, for both packages. */
  .mp-week-picker__deposit { display: flex; align-items: center; gap: var(--mp-space-s); margin-block-start: auto; padding: var(--mp-space-s) var(--mp-space-m); border-radius: var(--mp-radius-md); box-shadow: inset 0 0 0 var(--mp-border) var(--mp-color-line); }
  .mp-week-picker__deposit-figure { flex: none; font: var(--mp-weight-display) var(--mp-fs-display-l) / .9 var(--mp-font-display); letter-spacing: var(--mp-track-display); }
  .mp-week-picker__deposit-text { color: var(--mp-color-text-2); font-size: var(--mp-fs-sm); line-height: var(--mp-lh-snug); }
  .mp-week-picker__deposit-text b { color: var(--mp-color-text); font-weight: var(--mp-weight-ui); }

  /* The weeks: a picked tile keeps its surface and takes the green ring and "Selected". */
  .mp-week-picker__picked { display: none; }
  .mp-week-picker--v2 .mp-week-picker__week[aria-pressed="true"] { border-color: var(--mp-color-action); background-color: var(--mp-color-surface-2); color: var(--mp-color-text); box-shadow: inset 0 0 0 var(--mp-border) var(--mp-color-action); }
  .mp-week-picker--v2 .mp-week-picker__week[aria-pressed="true"] .mp-week-picker__picked { display: block; color: var(--mp-color-accent-text); font: var(--mp-weight-ui) var(--mp-fs-sm) / var(--mp-lh-snug) var(--mp-font-ui); }
  .mp-week-picker--v2 .mp-week-picker__week[aria-pressed="true"] .mp-week-picker__status { background-color: var(--mp-color-surface); color: var(--mp-color-accent-text); }
  @media (width >= 48rem) and (width < 64rem) {
    .mp-week-picker--v2 .mp-week-picker__weeks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }

  /* The action row: stacked, Reserve full width, its note, the proof; from 64rem on the columns. */
  .mp-week-picker--v2 .mp-week-picker__go { display: grid; gap: var(--mp-space-s); }
  .mp-week-picker__reserve { display: grid; gap: var(--mp-space-s); }
  .mp-week-picker--v2 .mp-week-picker__proof { order: 1; margin: 0; }
  .mp-week-picker--v2 .mp-week-picker__reserve > .mp-btn { justify-content: center; min-block-size: var(--mp-h-control); padding-inline: var(--mp-space-l); font-size: var(--mp-fs-lead); }

  @media (width >= 64rem) {
    .mp-week-picker__body { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; }
    .mp-week-picker--v2 .mp-week-picker__weeks { flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
    /* A tile: the number beside its dates, the note and the chip under the dates. */
    .mp-week-picker--v2 .mp-week-picker__week { display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; column-gap: var(--mp-space-m); row-gap: var(--mp-space-3xs); min-block-size: calc(var(--mp-tap) * 2.9); padding: var(--mp-space-s) var(--mp-space-m); }
    .mp-week-picker--v2 .mp-week-picker__top { display: contents; }
    .mp-week-picker--v2 .mp-week-picker__no { grid-row: 1 / span 4; align-self: center; }
    .mp-week-picker--v2 .mp-week-picker__week > :not(.mp-week-picker__top),
    .mp-week-picker--v2 .mp-week-picker__status { grid-column: 2; justify-self: start; }
    .mp-week-picker--v2 .mp-week-picker__dates { order: -1; margin: 0; }
    .mp-week-picker--v2 .mp-week-picker__note { margin: 0; }
    .mp-week-picker--v2 .mp-week-picker__go { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: var(--mp-space-l); }
    .mp-week-picker--v2 .mp-week-picker__proof { order: 0; }
    .mp-week-picker__reserve { display: flex; align-items: center; gap: var(--mp-space-m); grid-column: 2; }
    .mp-week-picker--v2 .mp-week-picker__reserve > .mp-btn { flex: none; }
  }
  @media (width < 48rem) {
    /* 2 x 4, compact (design, 2026-10-30): the number beside its dates where the dates fit whole,
       else under it; the note and "Selected" on lines of their own; a tile with no note about 72px. */
    .mp-week-picker--v2 .mp-week-picker__week { flex-flow: row wrap; align-items: baseline; align-content: center; gap: var(--mp-space-3xs) var(--mp-space-2xs); min-block-size: calc(var(--mp-tap) * 1.6); padding: var(--mp-space-s) var(--mp-space-xs); } /* 12 at the sides: "01 JUN 28–JUL 2" fits at 390 */
    .mp-week-picker--v2 .mp-week-picker__no { font-size: var(--mp-fs-display-s); }
    .mp-week-picker--v2 .mp-week-picker__dates { order: 0; margin: 0; white-space: nowrap; }
    .mp-week-picker--v2 .mp-week-picker__week > :is(.mp-week-picker__note, .mp-week-picker__picked) { flex-basis: 100%; }
    .mp-week-picker__package .mp-week-picker__with { flex-basis: 100%; margin: 0; }
    .mp-week-picker__sale { align-items: flex-start; }
  }
}