/* Sheet contents that are page patterns (owner: sheets, WP3; CONTRACTS.md §5): layout around the components and
   the patterns with no system home (gap S11): 1. Boards, 2. Hype / Gourdon, 3. Party, 4. Holiday Shelf, 5. Recap. */

/* ---------- 1. Boards ---------- */
.board-tabs{margin-bottom:var(--sp-3)}
.board-note{margin-bottom:var(--sp-3)}

/* ---------- 2. Hype (Gourdon the Pumpkin Oracle; page pattern, gap S11) ---------- */
/* min(240px,62vw) is the hero's own geometry; it shrinks on compact phones and landscape phones. */
.hype-hero{position:relative;width:min(240px,62vw);aspect-ratio:578/594;margin:0 auto var(--sp-2)}
html.compact .hype-hero{width:min(170px,46vw)}
@media (orientation:landscape) and (max-height:500px){.hype-hero{width:min(170px,46vw)}}
.hype-pumpkin,.hype-face{position:absolute;inset:0;width:100%;height:100%}
.hype-face .hype-glowface{fill:var(--candle-300)}  /* the lit face: candle light */
.hype-face .hype-teeth{fill:#73290a}               /* art color: the carved pumpkin's flesh (no token, gap S5) */
/* Calm: one radial glow instead of the sparks (hype.js holds it for dur-reveal). */
.hype-hero::after{content:"";position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--candle-300) 55%,transparent),transparent 65%);opacity:0;transition:opacity var(--dur-reveal) var(--ease-out);pointer-events:none}
.hype-hero.is-glow::after{opacity:1}
html[data-calm] .hype-hero::after{transition-duration:var(--dur-ui)!important} /* the Calm glow fades instead of snapping (D8) */
.hype-sparks{position:absolute;left:50%;top:60%;width:0;height:0;pointer-events:none}
.hype-spark{position:absolute;left:0;top:0;width:var(--sp-3);height:var(--sp-3);border-radius:50%;background:var(--candle-300)}
.hype-spark:nth-child(3n){background:var(--pumpkin-500)}
.hype-spark:nth-child(3n+1){width:var(--sp-2);height:var(--sp-2);background:var(--slime-400)}
.hype-said{margin-bottom:var(--sp-1);text-align:center}
.hype-actions{display:flex;flex-direction:column;gap:var(--sp-2)}
.hype-bar .bf-meter{margin-bottom:var(--sp-2)}
.hype-bar-text{margin:0;text-align:center}

/* ---------- 3. Party ---------- */
.party-actions{display:flex;flex-direction:column;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.party-gcal{align-self:center}
.party-install{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);margin:var(--sp-3) 0}
.party-install p{margin:0}
.party-foot{text-align:center}
.party-foot a{display:inline-block;padding-block:var(--sp-3)} /* the one link home keeps a 44px tap box (lh-20 + 2 × sp-3) */

/* ---------- 4. Holiday Shelf (page pattern, gap S11) ---------- */
/* A snap scroller of 132px tiles. The sp-2 padding (with a matching negative margin) leaves room for the focus
   ring (ring + ring-offset = 6px) so the scroller never clips it. Holiday colors are content data (--tile). */
.shelf{display:flex;gap:var(--sp-3);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--sp-2);margin:0 calc(-1 * var(--sp-2)) var(--sp-3);scrollbar-width:thin}
.shelf-cell{flex:0 0 132px;display:flex;scroll-snap-align:start}  /* 132px: the tile's own size */
.shelf-tile{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:var(--sp-1);min-height:132px;padding:var(--sp-3);border-radius:var(--r-card);border:var(--hairline) solid var(--plate-line);background:linear-gradient(170deg,var(--tile) 0%,var(--tile) 18%,var(--bg) 62%);color:var(--text);text-decoration:none}
.shelf-tile.is-next{border-color:var(--candle-300);box-shadow:var(--glow-candle)}
.shelf-emoji{margin-bottom:auto;font-size:var(--fs-36);line-height:var(--lh-solid)}
.shelf-name{color:var(--text)}
@media (hover:hover){.shelf-tile:hover{border-color:var(--lilac-300)}}

/* ---------- 5. Recap ---------- */
.recap-share{margin:var(--sp-3) 0}
.recap-bye{margin-top:var(--sp-4);text-align:center} /* the farewell line (gap S11): a centered note, no italic */