/* Sunday Anyday design foundations: the shared colour tokens and components.
   DESIGN.md is the guide. This file is additive: every custom property starts
   with --sa- and every selector names an sa- class or a data-sa- attribute, so
   a page that uses none of them looks exactly as it did. index.html loads it
   before the area stylesheets, so they can still override it.
   tools/check_design_kit.mjs keeps it that way. */

:root{
 --sa-paper:#f8f0e0;
 --sa-surface:#fffdf7;
 --sa-ink:#1b3326;
 --sa-green:#234b3d;
 --sa-clay:#b4532a;
 --sa-clay-dark:#96441f;
 --sa-gold:#f2bd4b;
 --sa-sage:#6f8a63;
 --sa-red:#a6322d;
 --sa-rose:#f3ded7;
 --sa-pill:rgba(255,253,247,.92);
 --sa-shadow:0 1px 6px rgba(35,75,61,.15);
 --sa-card-shadow:0 2px 0 rgba(35,75,61,.1),0 10px 28px rgba(27,51,38,.14);
 --sa-focus:var(--sa-ink);
 --sa-tap:44px;
 --sa-col:1064px;
 --sa-col-reading:760px;
 --sa-gutter:16px;
 --sa-scene-h:clamp(200px,min(33.34vw,40vh),560px);
 /* One colour per game: a fill, and an ink for its text and edge. The fills
    are close to the paper, so a game's shape always takes its ink edge. */
 --sa-game-search:#e2eccf;--sa-game-search-ink:#33542d;
 --sa-game-scramble:#f3deca;--sa-game-scramble-ink:#754725;
 --sa-game-sudoku:#f4e7b7;--sa-game-sudoku-ink:#624b18;
 --sa-game-groups:#e7e0ef;--sa-game-groups-ink:#4f3d6b;
 --sa-game-cross:#dee9ef;--sa-game-cross-ink:#264e64;
 --sa-game-maze:#dfebd9;--sa-game-maze-ink:#355936;
}
@supports (height:1svh){:root{--sa-scene-h:clamp(200px,min(33.34vw,40svh),560px)}}
@media (min-width:700px){:root{--sa-gutter:24px}}

/* Game background (Michael, Oct 27, 2026: option C): every game screen sits on
   a soft gradient tinted by the day's scene type, with a warm default. A theme
   swaps only this variable; the band, boards, keys and state colours stay the
   same. Each bottom colour keeps the sage edges at 3:1 and all text at 4.5:1.
   The game screen sets data-sa-theme from EDITIONS[edition].scene. */
:root{--sa-game-bg:linear-gradient(160deg,#fffaf0 0%,#f5e3cc 100%)}
[data-sa-theme=garden]{--sa-game-bg:linear-gradient(160deg,#fbfaee 0%,#e6e9cb 100%)}
[data-sa-theme=outdoors]{--sa-game-bg:linear-gradient(160deg,#f7fbf0 0%,#ddecd2 100%)}
[data-sa-theme=water]{--sa-game-bg:linear-gradient(160deg,#f5fbf8 0%,#d5eae6 100%)}
[data-sa-theme=town]{--sa-game-bg:linear-gradient(160deg,#fff8f3 0%,#f5e2db 100%)}
[data-sa-theme=winter],[data-sa-theme=newyear]{--sa-game-bg:linear-gradient(160deg,#f8fbfd 0%,#dce7f1 100%)}
[data-sa-theme=thanksgiving]{--sa-game-bg:linear-gradient(160deg,#fff7ec 0%,#fee0cc 100%)}
[data-sa-theme=christmas]{--sa-game-bg:linear-gradient(160deg,#fbfaf2 0%,#daeadf 100%)}
[data-sa-theme=valentine]{--sa-game-bg:linear-gradient(160deg,#fff8f8 0%,#f7e0e5 100%)}

/* Page grid: list pages use one 1064px column, reading pages 760px. */
.sa-col{box-sizing:border-box;width:min(100% - 2*var(--sa-gutter),var(--sa-col));margin-inline:auto}
.sa-col--reading{width:min(100% - 2*var(--sa-gutter),var(--sa-col-reading))}

/* Masthead: a full-width cream bar whose content stays in the column.
   The second selector lets it win over today's .masthead box when both classes are on one element. */
.sa-masthead-full,.masthead.sa-masthead-full{box-sizing:border-box;width:100%;max-width:none;margin-inline:0;padding-inline:max(var(--sa-gutter),calc((100% - var(--sa-col))/2));background:var(--sa-paper);border-bottom:1px solid rgba(111,138,99,.45)}

/* Eyebrow: the small label above a title. Never under 14px. */
.sa-eyebrow{margin:0 0 6px;font-size:max(14px,.875rem);font-weight:700;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--sa-green)}

/* Buttons: one primary per screen, in clay (the call-to-action colour, matching the
   newsletter's play button). Full width on phones, at least 200px on wider screens. */
.sa-btn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;margin:0;padding:11px 24px;border:2px solid var(--sa-clay);border-radius:999px;background:var(--sa-clay);color:var(--sa-surface);font:inherit;font-size:18px;font-weight:600;line-height:1.2;text-align:center;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.sa-btn:visited{color:var(--sa-surface)}
.sa-btn:hover{background:var(--sa-clay-dark);border-color:var(--sa-clay-dark);color:var(--sa-surface);text-decoration:none}
.sa-btn:focus-visible{outline:3px solid var(--sa-focus);outline-offset:3px}
.sa-btn[disabled],.sa-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
@media (min-width:700px){.sa-btn{width:auto;min-width:200px}}
.sa-btn--inline{width:auto}
.sa-btn--secondary{background:var(--sa-surface);border-color:var(--sa-sage);color:var(--sa-green)}
.sa-btn--secondary:visited{color:var(--sa-green)}
.sa-btn--secondary:hover{background:#f1f4ea;border-color:var(--sa-green);color:var(--sa-green)}
/* On deep green (the green card, the game band) the primary turns cream. */
.sa-btn--on-green,.sa-card-over-scene--green .sa-btn{--sa-focus:var(--sa-surface);background:var(--sa-surface);border-color:var(--sa-surface);color:var(--sa-green)}
.sa-btn--on-green:visited,.sa-card-over-scene--green .sa-btn:visited{color:var(--sa-green)}
.sa-btn--on-green:hover,.sa-card-over-scene--green .sa-btn:hover{background:var(--sa-paper);border-color:var(--sa-paper);color:var(--sa-green)}
.sa-card-over-scene--green .sa-btn--secondary{background:transparent;border-color:var(--sa-surface);color:var(--sa-surface)}
.sa-card-over-scene--green .sa-btn--secondary:visited,.sa-card-over-scene--green .sa-btn--secondary:hover{background:rgba(255,253,247,.12);color:var(--sa-surface)}

/* Back pill: "← All challenge packs" on the art. Legible on any sky. */
.sa-backpill{box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0;padding:0 16px;border:0;border-radius:22px;background:var(--sa-pill);box-shadow:var(--sa-shadow);color:var(--sa-green);font:inherit;font-size:16px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;transition:background-color .15s ease}
.sa-backpill:visited{color:var(--sa-green)}
.sa-backpill:hover{background:var(--sa-surface);color:var(--sa-green);text-decoration:none}
.sa-backpill:focus-visible{outline:3px solid var(--sa-ink);outline-offset:2px;box-shadow:var(--sa-shadow),0 0 0 2px var(--sa-surface)}
.sa-scene-head>.sa-backpill{position:absolute;z-index:3;top:14px;left:max(var(--sa-gutter),calc((100% - var(--sa-col))/2))}

/* Scene head: art flush under the masthead, full width, height follows the window. */
.sa-scene-head{position:relative;width:100%;margin:0;padding:0;overflow:hidden}
.sa-scene-head__art{display:block;width:100%;height:var(--sa-scene-h);object-fit:cover;object-position:var(--sa-scene-pos,50% 70%)}
.sa-scene-head--fade .sa-scene-head__art{-webkit-mask-image:linear-gradient(#000 0,#000 86%,transparent);mask-image:linear-gradient(#000 0,#000 86%,transparent)}
.sa-scene-head__title{position:absolute;z-index:2;top:68px;left:max(var(--sa-gutter),calc((100% - var(--sa-col))/2));right:max(var(--sa-gutter),calc((100% - var(--sa-col))/2));margin:0;color:var(--sa-ink)}

/* Card over scene: the page's key card overlaps the bottom of the art. */
.sa-card-over-scene{position:relative;z-index:2;box-sizing:border-box;width:min(100% - 2*var(--sa-gutter),var(--sa-col));margin:calc(-1*var(--sa-overlap,40px)) auto 0;padding:20px;border-radius:20px;background:var(--sa-surface);color:var(--sa-ink);box-shadow:var(--sa-card-shadow)}
@media (min-width:700px){.sa-card-over-scene{width:min(560px,100% - 2*var(--sa-gutter));margin:calc(-1*var(--sa-overlap-wide,120px)) auto 0 max(var(--sa-gutter),calc((100% - var(--sa-col))/2));padding:24px 28px}}
.sa-card-over-scene--green{--sa-focus:var(--sa-surface);background:var(--sa-green);color:var(--sa-surface)}
.sa-card-over-scene--green .sa-eyebrow{color:var(--sa-paper)}

/* Stepping stones: the one progress style. Up to 6 stones joined by a short path. */
.sa-progress{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.sa-progress__text{margin:0;font-size:16px;font-weight:600;line-height:1.3}
.sa-steps{--sa-step:28px;--sa-step-gap:16px;display:flex;align-items:center;gap:var(--sa-step-gap);margin:0;padding:0;list-style:none}
.sa-steps--lg{--sa-step:32px;--sa-step-gap:12px}
.sa-step{position:relative;box-sizing:border-box;flex:none;display:grid;place-items:center;width:var(--sa-step);height:var(--sa-step);margin:0;padding:0;border:2px solid var(--sa-sage);border-radius:50%;background:var(--sa-surface);color:var(--sa-ink);font-size:14px;font-weight:700;line-height:1}
.sa-step+.sa-step::before{content:"";position:absolute;top:50%;right:calc(100% + 4px);width:calc(var(--sa-step-gap) - 4px);border-top:2px solid var(--sa-sage);transform:translateY(-50%)}
.sa-step--done+.sa-step::before{border-top-color:var(--sa-green)}
.sa-step--done{border-color:var(--sa-green);background:var(--sa-green);color:transparent}
.sa-step--done::after{content:"";position:absolute;top:44%;left:50%;width:26%;height:48%;border:solid var(--sa-surface);border-width:0 2.5px 2.5px 0;transform:translate(-50%,-50%) rotate(45deg)}
.sa-step--now{border-color:var(--sa-ink);background:var(--sa-gold);color:var(--sa-ink)}
/* A tappable stone keeps a 44px target around the small circle (the 2px is the stone's border). */
.sa-step>a,.sa-step>button{position:absolute;inset:calc((var(--sa-step) - var(--sa-tap))/2 - 2px);display:grid;place-items:center;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;font:inherit;text-decoration:none;cursor:pointer}
.sa-step>a:focus-visible,.sa-step>button:focus-visible{outline:3px solid var(--sa-focus);outline-offset:-5px}
/* On deep green: cream stones, gold for now. */
.sa-steps--on-green .sa-step,.sa-card-over-scene--green .sa-step{border-color:var(--sa-surface);background:transparent;color:var(--sa-surface)}
.sa-steps--on-green .sa-step+.sa-step::before,.sa-card-over-scene--green .sa-step+.sa-step::before{border-top-color:rgba(255,253,247,.6)}
.sa-steps--on-green .sa-step--done,.sa-card-over-scene--green .sa-step--done{background:var(--sa-surface);color:transparent}
.sa-steps--on-green .sa-step--done::after,.sa-card-over-scene--green .sa-step--done::after{border-color:var(--sa-green)}
.sa-steps--on-green .sa-step--now,.sa-card-over-scene--green .sa-step--now{border-color:var(--sa-surface);background:var(--sa-gold);color:var(--sa-ink)}

/* Chip row: no scroll bar, snap, a swipe hint under it when there's more, drag with a mouse (chiprow.js). */
.sa-chiprow{position:relative}
.sa-chiprow__track{display:flex;gap:8px;margin:0;padding:6px 4px;list-style:none;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-inline:4px;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.sa-chiprow__track::-webkit-scrollbar{display:none;width:0;height:0}
@media (pointer:fine){.sa-chiprow__track{cursor:grab}}
.sa-chiprow__track.is-dragging,.sa-chiprow__track.is-dragging .sa-chip{cursor:grabbing;scroll-snap-type:none;-webkit-user-select:none;user-select:none}
.sa-chiprow--wrap .sa-chiprow__track{flex-wrap:wrap;overflow:visible;scroll-snap-type:none}
/* Swipe hint: one short line under anything that scrolls sideways, arrows on the side with more. */
.sa-swipe-hint{margin:0 0 6px;color:var(--sa-green);font-size:14px;font-weight:600;line-height:1.3;text-align:center}
.sa-swipe-hint[hidden]{display:none}
.sa-chip{box-sizing:border-box;flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0;padding:0 16px;border:2px solid var(--sa-sage);border-radius:22px;background:var(--sa-surface);color:var(--sa-ink);font:inherit;font-size:16px;font-weight:600;line-height:1.2;white-space:nowrap;text-decoration:none;cursor:pointer;scroll-snap-align:start;transition:background-color .15s ease,border-color .15s ease}
.sa-chip:visited{color:var(--sa-ink)}
.sa-chip:hover{border-color:var(--sa-green);color:var(--sa-ink);text-decoration:none}
.sa-chip[aria-pressed="true"],.sa-chip[aria-current]:not([aria-current="false"]),.sa-chip.is-selected{border-color:var(--sa-green);background:var(--sa-green);color:var(--sa-surface)}
.sa-chip:focus-visible{outline:3px solid var(--sa-focus);outline-offset:2px}

/* Picker: every choice list, in the game Actions menu's style (picker.js builds it around each select). */
.sa-picker{position:relative;display:inline-block;min-width:0;max-width:100%;vertical-align:middle}
.sa-picker--block{display:block;width:100%}
.sa-picker-native{display:none!important}
.sa-picker__button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:space-between;gap:12px;max-width:100%;min-height:var(--sa-tap);margin:0;padding:6px 16px 6px 18px;border:2px solid var(--sa-sage);border-radius:22px;background:var(--sa-surface);color:var(--sa-green);font:inherit;font-size:16px;font-weight:600;line-height:1.2;text-align:left;cursor:pointer;transition:border-color .15s ease}
.sa-picker--block .sa-picker__button{width:100%}
.sa-picker__button::after{content:"";flex:none;width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:translateY(-30%) rotate(45deg);transition:transform .15s ease}
.sa-picker__button[aria-expanded="true"]::after{transform:translateY(30%) rotate(225deg)}
.sa-picker__button:hover{border-color:var(--sa-green)}
.sa-picker__button:focus-visible{outline:3px solid var(--sa-focus);outline-offset:2px}
.sa-picker__button:disabled{opacity:.55;cursor:default}
.sa-picker__value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sa-picker__list{box-sizing:border-box;position:absolute;z-index:60;left:0;top:calc(100% + 6px);display:grid;gap:8px;min-width:100%;width:max-content;max-width:min(320px,calc(100vw - 24px));max-height:min(60vh,380px);margin:0;padding:12px;overflow:auto;overscroll-behavior:contain;list-style:none;background:var(--sa-surface);border:1px solid var(--sa-sage);border-radius:14px;box-shadow:var(--sa-card-shadow);text-align:left}
.sa-picker__list[hidden]{display:none}
.sa-picker__list:focus{outline:none}
.sa-picker--up .sa-picker__list{top:auto;bottom:calc(100% + 6px)}
.sa-picker--end .sa-picker__list{left:auto;right:0}
.sa-picker__option{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;margin:0;padding:8px 18px;border:2px solid var(--sa-sage);border-radius:24px;background:var(--sa-surface);color:var(--sa-green);font-size:17px;font-weight:600;line-height:1.25;cursor:pointer;-webkit-user-select:none;user-select:none}
.sa-picker__option.is-active{border-color:var(--sa-green);background:color-mix(in srgb,var(--sa-sage) 16%,var(--sa-surface))}
.sa-picker__list:focus-visible .sa-picker__option.is-active{outline:3px solid var(--sa-focus);outline-offset:1px}
.sa-picker__option[aria-selected="true"]{border-color:var(--sa-green);background:var(--sa-green);color:var(--sa-surface)}
.sa-picker__option[aria-selected="true"]::after{content:"✓";content:"✓"/"";flex:none}
.sa-picker__option[aria-disabled="true"]{opacity:.5;cursor:default}
/* On deep green: an outline button in cream; the list stays cream. */
.sa-picker--on-green .sa-picker__button{--sa-focus:var(--sa-surface);border-color:var(--sa-surface);background:transparent;color:var(--sa-surface)}
.sa-picker--on-green .sa-picker__button:hover{background:rgba(255,253,247,.12)}

/* Inline message: game feedback beside the action, icon plus colour, 17px or larger. */
.sa-inline-msg{--sa-msg:var(--sa-ink);box-sizing:border-box;display:flex;align-items:center;gap:10px;margin:8px 0;padding:10px 14px;border:2px solid var(--sa-sage);border-radius:12px;background:var(--sa-surface);color:var(--sa-msg);font-size:17px;font-weight:600;line-height:1.35}
.sa-inline-msg__icon{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--sa-msg);color:var(--sa-surface);font-size:15px;font-weight:800;line-height:1}
.sa-inline-msg--ok{--sa-msg:var(--sa-green);border-color:var(--sa-green)}
.sa-inline-msg--wrong{--sa-msg:var(--sa-red);border-color:var(--sa-red);background:var(--sa-rose)}

/* Hidden text for screen readers. */
.sa-sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* The hidden attribute still hides components that set their own display. */
.sa-btn[hidden],.sa-backpill[hidden],.sa-steps[hidden],.sa-progress[hidden],.sa-chip[hidden],.sa-chiprow__track[hidden],.sa-inline-msg[hidden]{display:none}

@media (prefers-reduced-motion:reduce){
 .sa-btn,.sa-backpill,.sa-chip,.sa-picker__button::after{transition:none}
}