/* PodcastHub Design Lab · Date calendar, five options (B2, Rick, 2026-10-16)
   Uses ONLY tokens.css variables. Anything the token sheet lacks is derived here as a
   --local-* value built from tokens (color-mix), never a raw hex. Listed in the B2 report. */

/* ---------- local values (derived from tokens, no raw colour) ---------- */
:root {
  --local-glow: color-mix(in srgb, var(--primary) 45%, transparent);          /* rule 32: selection glow α .45 */
  --local-glow-soft: color-mix(in srgb, var(--primary) 22%, transparent);
  --local-sheen: color-mix(in srgb, var(--ph-white) 55%, transparent);
  --local-hi: color-mix(in srgb, var(--ph-white) 85%, transparent);          /* top-edge light */
  --local-shade: color-mix(in srgb, var(--ph-ink) 9%, transparent);           /* bottom-edge shade */
  --local-contact: color-mix(in srgb, var(--ph-ink) 14%, transparent);
  --local-drop: color-mix(in srgb, var(--ph-ink) 9%, transparent);
  --local-hatch: color-mix(in srgb, var(--fg-subtle) 22%, transparent);
  --local-photo-scrim: color-mix(in srgb, var(--ph-ink) 35%, transparent);
  --local-sheet-fill: color-mix(in srgb, var(--surface) 72%, transparent);   /* frost tint that passes on its own (materials rule 5) */
  --local-deep: var(--primary-active);                                         /* stand-in for the PROPOSAL --ph-color-primary-deep */
}
[data-theme="dark"] {
  --local-glow: color-mix(in srgb, var(--secondary) 50%, transparent);
  --local-glow-soft: color-mix(in srgb, var(--secondary) 24%, transparent);
  --local-hi: color-mix(in srgb, var(--ph-white) 10%, transparent);
  --local-shade: color-mix(in srgb, var(--ph-ink) 60%, transparent);
  --local-contact: transparent; --local-drop: transparent;                    /* dark: lighter fill + border, no shadows */
  --local-hatch: color-mix(in srgb, var(--fg-subtle) 30%, transparent);
  --local-sheet-fill: color-mix(in srgb, var(--surface) 80%, transparent);
}

/* The shell's 390px column + 16px page padding overflows a 390px phone. Page-local fix only. */
@media (max-width: 430px) {
  .options { padding-inline: 0; }
  .option .label { padding-inline: 16px; }
  .option .frame { border-radius: 0; border-inline: 0; }
}

/* ---------- shared bits inside every frame ---------- */
.ctx { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 14px; }
.ctx .studio { font: 700 var(--fs-h3)/1.2 var(--font-display); font-stretch: var(--font-display-stretch); }
[dir="rtl"] .ctx .studio { font-family: var(--font-arabic); font-stretch: normal; }
.ctx .ask { font-size: var(--fs-ui); color: var(--fg-muted); }
.lbl { font-size: var(--fs-label); line-height: 1.25; color: var(--fg-subtle); font-weight: 500; }
.sum { margin-top: 16px; min-height: 76px; padding: 12px 14px; border-radius: var(--r-tile); background: var(--surface); border: 1px solid var(--line-subtle); display: flex; gap: 12px; align-items: center; }
.sum .tick { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-fill); color: var(--primary-on); }
.sum .tick svg { width: 16px; height: 16px; }
.sum.empty .tick { background: var(--surface-sunken); color: var(--fg-subtle); }
.sum .what { font-size: var(--fs-ui); font-weight: 600; line-height: 1.35; }
.sum .more { font-size: var(--fs-ui); color: var(--fg-muted); line-height: 1.35; }
.sum.empty .what { color: var(--fg-muted); font-weight: 500; }
.next-link { display: block; width: 100%; min-height: var(--t-min); padding: 10px 2px; margin-top: 4px; border: 0; background: none; color: var(--fg-muted); font: 500 var(--fs-ui)/1.4 var(--font-body); cursor: pointer; text-align: start; border-radius: var(--r-chip); }
.next-link .go { color: var(--primary-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-skip-ink: auto; }
.next-link svg { display: inline-block; vertical-align: -3px; margin-inline-start: 2px; color: var(--primary-ink); }
[dir="rtl"] .next-link, [dir="rtl"] .sum, [dir="rtl"] .cal-nav button { font-family: var(--font-arabic); }
.flip { display: inline-block; }
[dir="rtl"] .flip { transform: scaleX(-1); }                 /* arrows point the reading way */
.tk { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--primary-on); color: var(--primary-fill); flex: none; margin-inline-end: 4px; vertical-align: -3px; }
.tk svg { width: 11px; height: 11px; }
.chk { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-on); color: var(--primary-fill); }
.chk svg { width: 12px; height: 12px; }
button { -webkit-tap-highlight-color: transparent; }

/* the "light up": glow (box-shadow, not clipped by the ripple's overflow) + an inner sheen + a pop.
   transform + opacity only animate (motion rule); the glow is a state, set instantly. */
.lit { box-shadow: 0 0 0 2px var(--primary), 0 0 14px 2px var(--local-glow) !important; }
.lit::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(120% 80% at 50% 0%, var(--local-sheen), transparent 60%); opacity: .55; pointer-events: none; }
.lit.pop { animation: pop var(--d-400) var(--ease-brand); }
.lit.pop::before { animation: sheen 520ms var(--ease-brand); }
@keyframes pop { 0% { transform: scale(var(--press-scale)); } 45% { transform: scale(1.045); } 100% { transform: scale(1); } }
@keyframes sheen { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: .55; } }

/* ============ OPTION 1 · 14-day strip ============ */
.strip-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.strip-head .m { font-size: var(--fs-ui); font-weight: 600; }
.strip { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 4px; padding: 6px 4px 10px; margin-inline: -4px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, black 82%, transparent); mask-image: linear-gradient(to right, black 82%, transparent); }
[dir="rtl"] .strip { -webkit-mask-image: linear-gradient(to left, black 82%, transparent); mask-image: linear-gradient(to left, black 82%, transparent); }
.strip::-webkit-scrollbar { display: none; }
.day { flex: none; scroll-snap-align: start; position: relative; width: 72px; min-height: 108px; padding: 10px 4px 10px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); color: var(--fg); display: flex; flex-direction: column; align-items: center; gap: 2px; font: inherit; cursor: pointer; isolation: isolate;
  transition: transform var(--d-180) var(--ease-brand), background-color var(--d-120); }
.day:active { transform: scale(var(--press-scale)); transition-duration: var(--d-80); }
.day .wd { font-size: var(--fs-label); color: var(--fg-muted); font-weight: 500; white-space: nowrap; }
.day .num { font: 700 26px/1.15 var(--font-display); font-stretch: var(--font-display-stretch); font-variant-numeric: tabular-nums; }
.day .av { font-size: var(--fs-label); color: var(--fg-muted); white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.dots { display: inline-flex; gap: 2px; }
.dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--primary); }
.day.today .wd { color: var(--primary-ink); font-weight: 700; }
.day.today { border-color: var(--primary); }
.day.off { cursor: default; background: repeating-linear-gradient(135deg, var(--local-hatch) 0 2px, transparent 2px 8px), var(--surface-sunken); border-style: dashed; color: var(--fg-subtle); }
.day.off .num { color: var(--fg-disabled); }
.day.full { background: var(--surface-sunken); border-style: dashed; color: var(--fg-subtle); }
.day.full .num { color: var(--fg-disabled); text-decoration: line-through; text-decoration-thickness: 2px; }
.day.full .av { color: var(--primary-ink); font-weight: 600; }
.day[aria-pressed="true"] { background: var(--primary-fill); border-color: transparent; color: var(--primary-on); }
.day[aria-pressed="true"] .wd, .day[aria-pressed="true"] .av { color: var(--primary-on); }
.day[aria-pressed="true"] .dots i { background: var(--primary-on); }

/* ============ OPTION 2 · Month grid, flat (also reused inside option 3's sheet) ============ */
.cal-nav { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.cal-nav .title { margin-inline-end: auto; font-size: var(--fs-h3); font-weight: 700; }
.cal-nav button { width: var(--t-min); height: var(--t-min); border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--fg); display: grid; place-items: center; cursor: pointer; transition: transform var(--d-180) var(--ease-brand); }
.cal-nav button:active { transform: scale(var(--press-scale)); }
.cal-nav button[hidden] { display: grid; visibility: hidden; }
.cal-nav svg { width: 20px; height: 20px; }
.grid { display: grid; grid-template-columns: repeat(7, 1fr); row-gap: 4px; }
.grid .wh { text-align: center; padding: 4px 0 8px; font-size: var(--fs-label); color: var(--fg-subtle); font-weight: 500; white-space: nowrap; }
[dir="rtl"] .grid .wh { font-size: var(--fs-label); letter-spacing: 0; }
.cell { position: relative; height: 52px; margin: 0 auto; width: 100%; max-width: 50px; border: 0; border-radius: 14px; background: none; color: var(--fg); font: 500 17px/1 var(--font-body); font-variant-numeric: tabular-nums; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; isolation: isolate; transition: transform var(--d-180) var(--ease-brand), background-color var(--d-120); }
@media (hover: hover) { button.cell:hover { background: var(--surface-hover); } }
button.cell:active { transform: scale(var(--press-scale)); }
.cell .bar { display: block; height: 3px; border-radius: 2px; background: var(--line); width: 28px; position: relative; overflow: hidden; }
.cell .bar b { position: absolute; inset-block: 0; inset-inline-start: 0; width: var(--free); background: var(--primary); border-radius: 2px; }
.cell.past, .cell.off { color: var(--fg-disabled); cursor: default; }
.cell.off::after { content: ""; width: 12px; height: 2px; background: var(--fg-disabled); border-radius: 1px; opacity: .6; }
.cell.full { color: var(--fg-subtle); cursor: default; text-decoration: line-through; text-decoration-thickness: 2px; }
.cell.today { box-shadow: inset 0 0 0 1.5px var(--primary); }
.cell[aria-pressed="true"] { background: var(--primary-fill); color: var(--primary-on); font-weight: 700; }
.cell[aria-pressed="true"] .bar { background: color-mix(in srgb, var(--primary-on) 35%, transparent); }
.cell[aria-pressed="true"] .bar b { background: var(--primary-on); }
.cell .tickmark { display: block; height: 12px; line-height: 0; margin-top: -3px; }   /* selected: the check takes the bar's place */
.cell .tickmark svg { width: 14px; height: 14px; }
.cal-foot { margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.legend-line { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: var(--fs-label); color: var(--fg-muted); }
.legend-line .k { display: inline-flex; align-items: center; gap: 6px; }
.legend-line .sw-bar { width: 22px; height: 3px; border-radius: 2px; background: var(--primary); }
.legend-line .sw-off { width: 12px; height: 2px; background: var(--fg-disabled); }

/* ============ OPTION 3 · Glass sheet over the real room ============ */
.option .frame.media { padding: 0; height: 720px; background: var(--ph-ink); }
.media .photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.media .photo-fallback { position: absolute; inset: 0; background: var(--field-gradient); }
.media .scrim { position: absolute; inset: 0; background: linear-gradient(to bottom, var(--local-photo-scrim), transparent 30%); pointer-events: none; }
.glass { background: var(--local-sheet-fill); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)); border: 1px solid var(--glass-stroke); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass { background: var(--surface); } }
@media (prefers-reduced-transparency: reduce) { .glass { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.media .top { position: absolute; inset-block-start: 16px; inset-inline: 16px; display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.media .pill { min-height: var(--t-min); padding: 0 16px; border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-ui); color: var(--fg); }
.sheet { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 3; border-radius: var(--r-sheet) var(--r-sheet) 0 0; border-block-end: 0; padding: 0 16px 16px; box-shadow: var(--glass-shadow);
  transform: translateY(var(--sheet-y, 0px)); transition: transform var(--d-400) var(--ease-brand); touch-action: none; }
.sheet.dragging { transition: none; }
.sheet .handle { display: grid; place-items: center; width: 100%; height: var(--t-min); border: 0; background: none; cursor: grab; padding: 0; }
.sheet .handle i { width: 40px; height: 5px; border-radius: 3px; background: var(--fg-subtle); opacity: .7; }
.sheet .sheet-title { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; }
.sheet .sheet-title b { font: 700 var(--fs-h3)/1.2 var(--font-display); font-stretch: var(--font-display-stretch); }
[dir="rtl"] .sheet .sheet-title b { font-family: var(--font-arabic); font-stretch: normal; }
.sheet .grid .cell { height: 46px; }
.sheet .cal-nav { margin-bottom: 2px; }
.sheet .cal-nav button { background: transparent; border-color: color-mix(in srgb, var(--fg) 18%, transparent); }
.sheet .cal-nav .title { font-size: var(--fs-ui); }
@media (hover: hover) { .sheet button.cell:hover { background: color-mix(in srgb, var(--fg) 7%, transparent); } }
.confirm { margin-top: 12px; width: 100%; height: var(--t-button-lg); border-radius: var(--r-pill); border: 0; font: 600 17px/1 var(--font-body); color: var(--primary-on); cursor: pointer; position: relative;
  background: linear-gradient(to bottom, var(--primary-fill), var(--local-deep)); box-shadow: var(--tactile-shadow); transition: transform var(--d-180) var(--ease-brand); }
[dir="rtl"] .confirm { font-family: var(--font-arabic); }
.confirm:active { transform: scale(var(--press-scale)); box-shadow: var(--tactile-pressed); transition-duration: var(--d-80); }
.confirm-wait { margin-top: 12px; height: var(--t-button-lg); border-radius: var(--r-pill); border: 1.5px dashed color-mix(in srgb, var(--fg) 30%, transparent); display: grid; place-items: center; font-size: var(--fs-ui); color: var(--fg-muted); }
.peek { position: absolute; inset-inline: 16px; inset-block-end: 16px; z-index: 2; border-radius: var(--r-card); padding: 12px 12px 12px 16px; display: flex; align-items: center; gap: 12px; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--d-260) var(--ease-brand), transform var(--d-260) var(--ease-brand); }
[dir="rtl"] .peek { padding: 12px 16px 12px 12px; }
.media.closed .peek { opacity: 1; transform: none; pointer-events: auto; }
.peek .txt { flex: 1; min-width: 0; }
.peek .txt b { display: block; font-size: var(--fs-ui); }
.peek .txt span { font-size: var(--fs-label); color: var(--fg-muted); }
.peek button { min-height: var(--t-button); padding: 0 18px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg); font: 600 var(--fs-ui)/1 var(--font-body); cursor: pointer; }
[dir="rtl"] .peek button { font-family: var(--font-arabic); }

/* ============ OPTION 4 · Heat strip (HeatmapCalendar idea) ============ */
.heat { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.heat .wh { text-align: center; font-size: var(--fs-label); color: var(--fg-subtle); padding-bottom: 4px; white-space: nowrap; }
.hc { position: relative; height: 56px; border-radius: 14px; border: 1px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: 600 17px/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--fg); isolation: isolate;
  background: color-mix(in srgb, var(--primary) var(--busy, 8%), var(--surface)); }
button.hc { cursor: pointer; transition: transform var(--d-180) var(--ease-brand); }
button.hc:active { transform: scale(var(--press-scale)); }
.hc.past { background: transparent; color: var(--fg-disabled); font-weight: 500; }
.hc.off { background: repeating-linear-gradient(135deg, var(--local-hatch) 0 2px, transparent 2px 8px); color: var(--fg-disabled); font-weight: 500; }
.hc.full { background: var(--surface); border: 1.5px dashed var(--line-strong); color: var(--fg-subtle); text-decoration: line-through; text-decoration-thickness: 2px; font-weight: 500; }
.hc.today { border-color: var(--primary); border-width: 1.5px; }
.hc[aria-pressed="true"] { background: var(--primary-fill); color: var(--primary-on); }
.hc .tickmark { line-height: 0; } .hc .tickmark svg { width: 14px; height: 14px; }
.heat-legend { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.ramp { display: flex; align-items: center; gap: 8px; font-size: var(--fs-label); color: var(--fg-muted); }
.ramp .sw { display: flex; gap: 3px; }
.ramp .sw i { width: 22px; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--primary) var(--busy), var(--surface)); border: 1px solid var(--line-subtle); }
.heat-legend .rule { font-size: var(--fs-ui); color: var(--fg); font-weight: 600; }
.heat-legend .keys { display: flex; gap: 16px; font-size: var(--fs-label); color: var(--fg-muted); }
.heat-legend .keys span { display: inline-flex; align-items: center; gap: 6px; }
.heat-legend .keys i { width: 16px; height: 14px; border-radius: 4px; }
.heat-legend .keys .k-off { background: repeating-linear-gradient(135deg, var(--local-hatch) 0 2px, transparent 2px 6px); border: 1px solid var(--line); }
.heat-legend .keys .k-full { border: 1.5px dashed var(--line-strong); }

/* ============ OPTION 5 · Tactile dial (raised keys, sink on press, light up) ============ */
.tac-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.tac-head .m { font-size: var(--fs-ui); font-weight: 600; }
.tac { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 4px; }
.key { position: relative; min-height: 96px; border-radius: 20px; border: 1px solid var(--line-subtle); padding: 10px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--fg); font: inherit; isolation: isolate;
  background: linear-gradient(to bottom, var(--surface-raised), var(--surface));
  box-shadow: inset 0 1px 0 var(--local-hi), inset 0 -3px 0 var(--local-shade), 0 1px 2px var(--local-contact), 0 6px 14px var(--local-drop); }
[data-theme="dark"] .key { border-color: var(--line-strong); background: linear-gradient(to bottom, var(--surface-active), var(--surface-raised)); }
button.key { cursor: pointer; transition: transform var(--d-180) var(--ease-brand); }
button.key:active { transform: translateY(1px) scale(var(--press-scale)); box-shadow: inset 0 2px 6px var(--local-shade); transition-duration: var(--d-80); }
.key .wd { font-size: var(--fs-label); color: var(--fg-muted); font-weight: 500; white-space: nowrap; }
.key .num { font: 700 26px/1.1 var(--font-display); font-stretch: var(--font-display-stretch); }
.key .av { font-size: var(--fs-label); color: var(--fg-muted); white-space: nowrap; }
.key .led { position: absolute; inset-block-start: 8px; inset-inline-start: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }
.key.today .wd { color: var(--primary-ink); font-weight: 700; }
.key.sunk { background: var(--surface-sunken); border-color: transparent; box-shadow: inset 0 2px 6px var(--local-shade), inset 0 -1px 0 var(--local-hi); color: var(--fg-subtle); }
[data-theme="dark"] .key.sunk { background: var(--surface-sunken); border-color: var(--line); }
.key.sunk .num { color: var(--fg-disabled); }
.key.sunk.full .num { text-decoration: line-through; text-decoration-thickness: 2px; }
.key[aria-pressed="true"] { background: linear-gradient(to bottom, var(--primary-fill), var(--local-deep)); color: var(--primary-on); border-color: transparent; box-shadow: var(--tactile-shadow); }
.key[aria-pressed="true"] .wd, .key[aria-pressed="true"] .av { color: var(--primary-on); }
.key[aria-pressed="true"] .led { background: var(--primary-on); box-shadow: 0 0 8px 2px color-mix(in srgb, var(--primary-on) 70%, transparent); }
.key.lit { box-shadow: var(--tactile-shadow), 0 0 0 2px var(--primary), 0 0 16px 3px var(--local-glow) !important; }
.key.nav { background: linear-gradient(to bottom, var(--surface-raised), var(--surface-hover)); }
.key.nav .go { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-muted); color: var(--primary-ink); }
.key.nav .go svg { width: 18px; height: 18px; }
.key.nav .av { color: var(--fg); font-weight: 600; text-align: center; white-space: normal; line-height: 1.2; }

/* ---------- reduced motion: no pop, no sheen, no slide; a 120ms shade step only (rule 34) ---------- */
@media (prefers-reduced-motion: reduce) {
  .lit.pop, .lit.pop::before { animation: none; }
  .sheet, .peek, .day, .cell, .hc, .key, .confirm, .cal-nav button { transition: background-color var(--d-120) !important; }
  .day:active, button.cell:active, button.hc:active, button.key:active, .confirm:active { transform: none; }
  .strip { scroll-behavior: auto; }
}