/* When to buy: page-specific layout, loaded after site.css and scoped to [data-page="calendar"].
   The forecast: this month lifted to the top as a bordered lit tile, a twelve-cell month strip as the
   board's head row, the year as rows (flush hairline rows in light, lit tiles in dark, through the
   system's --row-* tokens), and the discount curve in a panel with its text in CSS px. */

[data-page="calendar"] .lede { max-width: 66ch; }
[data-page="calendar"] .sec-h p { max-width: 66ch; }

/* ---- row anatomy, shared by the strip and the year rows: month cell, body, category calls, tab ---- */
[data-page="calendar"] .fc-m,
[data-page="calendar"] .now-strip {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 19rem) auto;
  grid-template-areas: "mo body calls tab";
  gap: var(--s3) var(--s5);
  align-items: start;
  min-width: 0;
}
[data-page="calendar"] .fc-mo { grid-area: mo; margin: 0; padding-top: 2px; font-size: var(--t3); font-weight: 800; font-family: var(--font-semi); text-transform: uppercase; letter-spacing: .01em; line-height: 1; color: var(--fg); min-width: 0; }
[data-page="calendar"] .fc-mo h2 { margin: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; text-wrap: inherit; color: inherit; }
[data-page="calendar"] .fc-mo .fc-sub { display: block; margin-top: 6px; font-size: var(--t-2); font-weight: 700; font-family: var(--font-semi); letter-spacing: .12em; text-transform: uppercase; line-height: 1.2; color: var(--fg-3); }
[data-page="calendar"] .fc-body { grid-area: body; min-width: 0; max-width: 68ch; }
[data-page="calendar"] .fc-body h3,
[data-page="calendar"] .fc-body .fc-t { margin: 0; font-size: var(--t1); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--fg); }
[data-page="calendar"] .fc-body p { margin: var(--s2) 0 0; color: var(--fg-2); }
[data-page="calendar"] .fc-body > :first-child { margin-top: 0; }
[data-page="calendar"] .fc-body .now-link { font-weight: 600; }
[data-page="calendar"] .fc-calls { grid-area: calls; margin: 0; min-width: 0; font-size: var(--t-1); border-top: 1px solid var(--rule); }
[data-page="calendar"] .fc-calls > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s3); align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--rule); }
[data-page="calendar"] .fc-calls dt { font-weight: 700; color: var(--fg); }
[data-page="calendar"] .fc-calls dd { margin: 0; color: var(--fg-2); text-align: right; }
[data-page="calendar"] .fc-m > .tab,
[data-page="calendar"] .now-strip > .tab { grid-area: tab; justify-self: end; }

/* ---- this month: the answer, as a bordered lit tile under the page head ---- */
[data-page="calendar"] .now-strip { margin-top: var(--s2); grid-template-columns: auto minmax(0, 1fr) minmax(0, 19rem) auto; border: 2px solid var(--fg); border-radius: var(--radius); padding: var(--s4) var(--s5) var(--s5); }

/* ---- the key: what the three calls mean ---- */
[data-page="calendar"] .fc-key { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4) var(--s5); margin: 0 0 var(--s5); }
[data-page="calendar"] .fc-key > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); min-width: 0; }
[data-page="calendar"] .fc-key dd { margin: 0; font-size: var(--t-1); color: var(--fg-2); max-width: 42ch; }

/* ---- the month strip: the board's head row, each cell a jump link carrying the call ---- */
[data-page="calendar"] .mnav ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border-top: 2px solid var(--fg); }
[data-page="calendar"] .mnav li { margin: 0; min-width: 0; }
[data-page="calendar"] .mnav li + li { border-left: 1px solid var(--rule); }
[data-page="calendar"] .mnav li .skel { margin: 20px auto; }
[data-page="calendar"] .mnav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 56px; padding: 8px 4px; text-decoration: none; color: var(--fg); font-size: var(--t1); font-weight: 800; font-family: var(--font-semi); text-transform: uppercase; letter-spacing: .01em; line-height: 1; transition: background-color var(--dur-1) ease-out, color var(--dur-1) ease-out; }
[data-page="calendar"] .mnav a small { margin-top: 5px; font-size: var(--t-2); font-weight: 700; font-family: var(--font-semi); letter-spacing: .1em; line-height: 1; color: var(--fg-3); transition: color var(--dur-1) ease-out; }
@media (hover: hover) and (pointer: fine) { [data-page="calendar"] .mnav a:hover { background: var(--bg-2); } }
[data-page="calendar"] .mnav a:focus-visible { z-index: 1; }

/* ---- the year as rows ---- */
[data-page="calendar"] .fc { --ground-fg: var(--fg); list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
[data-page="calendar"] .fc-m { margin: 0; padding: var(--s4) var(--row-pad) var(--s5); border-top: 1px solid var(--row-rule); border-radius: var(--radius); scroll-margin-top: var(--s6); }
[data-page="calendar"] .fc-m + .fc-m { margin-top: var(--row-gap); }
[data-page="calendar"] .fc-m:first-child { border-top: 0; }
/* the current month: an ink ring inside the tile in both themes. Where the year is lit tiles on the ground (dark: --row-gap is 6px,
   0 in light) a second ring in the ground's own ink, captured on the list before .tile remaps --fg, lifts it off its neighbours. */
[data-page="calendar"] .fc-m.now { padding-inline: var(--s4); margin-inline: calc(var(--row-pad) - var(--s4)); box-shadow: inset 0 0 0 2px var(--tile-fg); outline: min(2px, var(--row-gap)) solid var(--ground-fg); outline-offset: 0; border-top-color: transparent; }
[data-page="calendar"] .fc-m.now:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[data-page="calendar"] .fc-m.now + .fc-m { border-top-color: transparent; }

/* ---- the discount curve ---- */
[data-page="calendar"] .cv-legend { list-style: none; margin: 0 0 var(--s4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--t-1); font-weight: 600; color: var(--fg-2); }
[data-page="calendar"] .cv-legend li { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
[data-page="calendar"] .cv-legend svg { flex: none; overflow: visible; }
[data-page="calendar"] #curve { position: relative; min-width: 0; }
[data-page="calendar"] #curve svg { display: block; width: 100%; height: auto; overflow: visible; }
[data-page="calendar"] .cv-ax { font-size: 12px; font-weight: 600; fill: var(--fg-3); font-variant-numeric: tabular-nums; }
[data-page="calendar"] .cv-ax.is-now { font-weight: 800; fill: var(--fg); }
[data-page="calendar"] .cv-gl { stroke: var(--rule); stroke-width: 1; }
[data-page="calendar"] .cv-ln { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
[data-page="calendar"] .cv-ln.skis { stroke: var(--figure); }
[data-page="calendar"] .cv-ln.boots { stroke: var(--fg-2); stroke-dasharray: 7 5; }
[data-page="calendar"] .cv-ar { fill: var(--figure); opacity: .1; }
[data-page="calendar"] .cv-pt { stroke: var(--panel); stroke-width: 2; }
[data-page="calendar"] .cv-pt.skis { fill: var(--figure); }
[data-page="calendar"] .cv-pt.boots { fill: var(--fg-2); }
[data-page="calendar"] .cv-lbl { font-size: 12px; font-weight: 800; fill: var(--fg); paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; }
[data-page="calendar"] .cv-now { stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 2 3; }
[data-page="calendar"] .cv-now-lbl { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; fill: var(--fg); paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; }
[data-page="calendar"] .curve .note { margin-top: var(--s4); max-width: 68ch; }

/* ---- breakpoints ---- */
@media (max-width: 1100px) {
  [data-page="calendar"] .fc-m { grid-template-columns: 5.5rem minmax(0, 1fr) auto; grid-template-areas: "mo body tab" "mo calls tab"; }
  [data-page="calendar"] .now-strip { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "mo body tab" "mo calls tab"; }
  [data-page="calendar"] .fc-calls { max-width: 36rem; }
}
@media (max-width: 820px) {
  [data-page="calendar"] .mnav ol { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  [data-page="calendar"] .mnav li:nth-child(7) { border-left: 0; }
  [data-page="calendar"] .mnav li:nth-child(n+7) { border-top: 1px solid var(--rule); }
  [data-page="calendar"] .fc-key { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  [data-page="calendar"] .fc-key > div { flex-direction: row; align-items: flex-start; gap: var(--s3); }
  [data-page="calendar"] .fc-key dd { max-width: 60ch; }
}
@media (max-width: 560px) {
  [data-page="calendar"] .fc-m,
  [data-page="calendar"] .now-strip { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "mo tab" "body body" "calls calls"; gap: var(--s3); }
  [data-page="calendar"] .fc-mo { font-size: var(--t2); }
  [data-page="calendar"] .now-strip { padding: var(--s4); }
  [data-page="calendar"] .fc-m { padding-block: var(--s4); }
  [data-page="calendar"] .fc-m.now { margin-inline: 0; padding-inline: var(--s4); }
  [data-page="calendar"] .fc-calls { max-width: none; }
}
@media (pointer: coarse) {
  [data-page="calendar"] .mnav a { min-height: 56px; }
}

/* ===== motion and fill (2 Nov 2026). Tokens from site.css :root; every rule has its reduced-motion path below. =====
   The strip reads through fill: each cell wears its call the way a tab does (buy green, watch amber, wait outlined), the word
   still printed under the month, so the shape of the year is one glance. The current month keeps its call and wears the
   board's ink ring, the same ring the current row wears. */
[data-page="calendar"] .mnav a { transition: background-color var(--dur-1) ease-out, color var(--dur-1) ease-out, box-shadow var(--dur-1) ease-out, transform var(--dur-1) var(--ease-out); }
[data-page="calendar"] .mnav a:active { transform: scale(.97); }
[data-page="calendar"] .mnav li[data-call="buy"] a { background: var(--green); color: var(--on-green); }
[data-page="calendar"] .mnav li[data-call="buy"] a small { color: var(--on-green); }
[data-page="calendar"] .mnav li[data-call="watch"] a { background: var(--amber); color: var(--on-amber); }
[data-page="calendar"] .mnav li[data-call="watch"] a small { color: var(--on-amber); }
@media (hover: hover) and (pointer: fine) { [data-page="calendar"] .mnav li[data-call="buy"] a:hover,
[data-page="calendar"] .mnav li[data-call="watch"] a:hover { box-shadow: inset 0 0 0 2px currentColor; } }
[data-page="calendar"] .mnav li[data-call] a[aria-current] { box-shadow: inset 0 0 0 2px var(--fg); }
[data-page="calendar"] .mnav li[data-call="wait"] a[aria-current] { background: transparent; color: var(--fg); }
[data-page="calendar"] .mnav li[data-call="wait"] a[aria-current] small { color: var(--fg-3); }
@media (hover: hover) and (pointer: fine) { [data-page="calendar"] .mnav li[data-call="wait"] a[aria-current]:hover { background: var(--bg-2); } }

/* the key's drawn marks: twelve cells, this call's months filled; drawn by page-calendar.js, the tab and the line stand without it */
[data-page="calendar"] .fc-key dt { display: flex; flex: none; align-items: center; gap: var(--s3); }
[data-page="calendar"] .fc-key .fc-mark { display: inline-flex; flex: none; align-items: center; width: 95px; height: 10px; }
[data-page="calendar"] .fc-key .fc-mark:empty { display: none; }
[data-page="calendar"] .fc-key .fc-mark svg { display: block; width: 95px; height: 10px; max-width: none; overflow: visible; } /* the base sheet's svg max-width would let the row squeeze it */
[data-page="calendar"] .fc-key .fc-mark rect { fill: none; stroke: var(--rule); stroke-width: 1; }
[data-page="calendar"] .fc-key .fc-mark[data-call="buy"] rect.on { fill: var(--green); stroke: var(--green); }
[data-page="calendar"] .fc-key .fc-mark[data-call="watch"] rect.on { fill: var(--amber); stroke: var(--amber); }
[data-page="calendar"] .fc-key .fc-mark[data-call="wait"] rect.on { fill: none; stroke: var(--fg); }

@media (prefers-reduced-motion: reduce) {
  [data-page="calendar"] .mnav a { transition: background-color var(--dur-1) ease-out, color var(--dur-1) ease-out, box-shadow var(--dur-1) ease-out; }
  [data-page="calendar"] .mnav a:active { transform: none; }
}