/* Storybook: paintings in the brand garden style, all on one paper. The
   paintings' paper is the page's paper, so a scene needs no fade to hide a seam:
   it starts flush under the masthead and ends in its own plain ground. The
   shared pieces (buttons, back pill, card over scene, stepping stones, chip
   rows) come from design.css; this file places them on these pages. Nothing
   here moves on its own. */
:root{--paper:var(--sa-paper)}

/* Page heads. The head keeps the page column's width, so its title lines up
   with the page; only the painting reaches out to the screen edges. Clipping
   the page sideways stops a desktop scrollbar adding a sideways scroll. Each
   painting is a full-width 3:1 panorama with open sky across its top: it shows
   whole where the window allows, and on a short laptop window it gives up a
   strip of sky and of the plain paper under its ground, so the page's main
   action stays in view. --scene-room is the
   window height the masthead and the card's action need below the sky.
   (Passport.css pads its page with !important, hence the !important here.) */
html:has(.page-scene){overflow-x:clip}
#main:has(.page-scene:not([hidden])){padding-top:0!important}
.help-page:has(>.page-scene){margin-top:0}
.page-scene{position:relative;--scene-room:240px;--scene-h:min(33.34vw,max(240px,100svh - var(--scene-room)))}
.page-scene:has(+.pack-intro){--scene-room:280px}
.page-scene+*{position:relative}
.page-scene-art{display:block;width:100vw;margin-left:calc(50% - 50vw)}
.page-scene-art img{display:block;width:100%;max-width:none;height:var(--scene-h);object-fit:cover;object-position:50% 25%}
/* The title sits in the scene's open sky; the back pill at the column's top left. */
.page-scene>h1{position:absolute;top:7%;left:0;max-width:min(30vw,6.4em);margin:0;padding:0;border:0;font:normal clamp(40px,4.2vw,60px)/1.06 var(--serif);letter-spacing:-1px;color:var(--sa-green)}
/* garden.css styles the back link too; the pill keeps its own shape. */
.garden-back.sa-backpill{display:inline-flex;font-size:16px}
.page-scene>.sa-backpill{position:absolute;z-index:3;top:14px;left:0;margin:0}

/* Card over scene. These pages already sit in the column, so the card keeps
   the column's left edge rather than adding its own gutter. It overlaps the
   painting's ground, which dissolves into the paper. On tablet widths the
   painting is shorter, so the card overlaps less and leaves its middle
   object (the bench, the table) whole. */
#main .sa-card-over-scene{width:auto;margin:calc(-1*var(--sa-overlap,40px)) 0 0}
@media(min-width:700px){#main .sa-card-over-scene{width:min(560px,100%);margin-top:calc(-1*clamp(48px,9.4vw,var(--sa-overlap-wide,120px)))}}
/* Passport's weekly board hides the scene; its card then sits on the page. */
#main .page-scene[hidden]+.sa-card-over-scene{margin-top:0}
/* Older pack and Passport styles would otherwise repaint the card. */
.pack-intro.sa-card-over-scene,.pack-quickstart.sa-card-over-scene{border:0;background:var(--sa-surface);box-shadow:var(--sa-card-shadow)}

/* Challenge packs: the "Start here" card over the scene. */
.pack-quickstart.sa-card-over-scene{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;align-items:center}
.pack-quickstart .garden-badge{width:56px;height:62px;margin:0}
.pack-quickstart h2{margin:0 0 8px;font:normal 26px/1.15 var(--serif);color:var(--sa-ink)}
.pack-quickstart .sa-btn{grid-column:1/-1;justify-self:start;margin-top:12px}
.pack-chips,.library-chips{margin:20px 0 16px}
.library-chips .sa-chip span{font-weight:400;opacity:.8}
/* All puzzles is a browsing page, so on a short laptop window its first
   puzzles show on the first screen. The painting gives up sky and plain
   ground (never below 79% of its height, so the greenhouse stays whole), the
   type chips sit on its dissolving ground, and the count shares the Search
   line while Search is closed. */
@media(min-width:700px){
 .page-scene:has(+.library-chips){--scene-room:330px;--scene-h:max(26.4vw,min(33.34vw,100svh - var(--scene-room)))}
 .page-scene:has(+.library-chips) img{object-position:50% 58%}
}
@media(min-width:700px) and (max-height:760px){
 /* The trimmed painting rises, so its title takes one smaller line, higher
    in the sky ("Word scrambles" would otherwise wrap onto the hills). */
 .page-scene:has(+.library-chips)>h1{top:4%;max-width:none;white-space:nowrap;font-size:clamp(40px,3.5vw,52px)}
 #main .library-chips{z-index:2;margin:-36px 0 6px}
 .library-discovery{margin-bottom:0}
 .library-discovery:not(:has(details[open]))+.library-count{width:max-content;margin:-38px 0 14px auto}
}

/* A pack's own page: its card holds the title, the stones and the one action. */
.pack-intro.sa-card-over-scene{display:block}
.pack-intro.sa-card-over-scene .garden-badge{position:absolute;top:20px;right:20px;width:60px;height:66px;margin:0}
.pack-intro.sa-card-over-scene h1{margin:0 72px 6px 0;font:normal 34px/1.1 var(--serif);color:var(--sa-ink)}
.pack-intro.sa-card-over-scene .pack-intro-copy p:not(.sa-eyebrow){margin:0 72px 14px 0;font-size:17px;color:#3f5546}
.pack-intro-action .sa-btn{margin-top:14px}
.pack-intro+.path-list-heading{margin-top:32px}

/* Pack cards: the painting on top, the badge as a seal on its lower edge, and
   stepping stones for progress. */
.pack-card.pack-painted{display:flex;flex-direction:column}
.pack-card.pack-painted .pack-scene{position:relative;display:block;aspect-ratio:3/2;min-height:0;padding:0;gap:0;border:0;background:var(--pack-color)}
.pack-painted .pack-painting{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pack-card.pack-painted .pack-scene .garden-badge{position:absolute;left:18px;bottom:-30px;width:60px;height:66px;margin:0;filter:drop-shadow(0 3px 3px #234b3d33)}
.pack-card.pack-painted>.pack-card-copy{padding-top:42px}
.pack-card .sa-progress{margin:14px 0 12px}
.pack-card .sa-progress__text{font-size:15px;font-weight:400;color:#3f5546}
/* Each card names its games beside their icons. */
.pack-card .pack-game-types{display:flex;flex-wrap:wrap;gap:4px 14px;white-space:normal;font-size:15px;color:#3f5546}
.pack-card .pack-game-types>span{display:inline-flex;align-items:center;gap:6px}
.pack-card .pack-game-types svg{width:20px;height:20px;margin:0;color:var(--sa-green)}

/* Passport: the green card over the scene holds the page's one action, the
   next puzzle to play. Under it, what the Passport keeps. */
#main .passport-cover.sa-card-over-scene{max-width:none;border-radius:20px}
@media(min-width:700px){#main .passport-cover.sa-card-over-scene{width:min(480px,100%)}}
.passport-cover .passport-play,.passport-next-note{grid-column:1/-1}
.passport-cover .passport-play{margin-top:8px}
@media(min-width:700px){.passport-cover .passport-play{justify-self:start}}
.passport-focus .sa-progress{margin:14px 0 16px}
.passport-next-note{margin:0;font-size:15px;color:#e8efe4}
.passport-next-note a{display:inline-block;padding:11px 2px;color:#ffe7a2}
.passport-guidance{margin:28px 0 8px}
.passport-purpose{max-width:44ch;margin:0 0 16px;font:normal 21px/1.4 var(--serif);color:var(--sa-green)}
.passport-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.passport-tile{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center;min-height:44px;padding:14px 16px;border:1px solid #d6dcc9;border-radius:16px;background:var(--sa-surface);color:var(--sa-ink);text-decoration:none}
.passport-tile .sa-icon{grid-row:span 2;width:28px;height:28px;color:var(--sa-green)}
.passport-tile strong{font-size:18px}
.passport-tile span{font-size:15px;line-height:1.35;color:#4a5d4e}
.passport-tile:hover{border-color:var(--sa-sage)}
.passport-how{min-height:44px;margin:8px 0 0;padding:0 2px;border:0;background:none;color:var(--sa-green);font:inherit;font-size:16px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* One page grid: list pages (Challenge packs, All puzzles, Passport) share a
   1064px column; a pack and Help read in a 760px column, like the Daily Five.
   (Passport.css sizes its page with !important.) */
@media(min-width:951px){
 #main:has(.page-scene){max-width:calc(var(--sa-col) + 96px)!important;padding-left:48px!important;padding-right:48px!important}
 #main:has(>.pack-intro),body[data-view="help"] #main{max-width:calc(var(--sa-col-reading) + 96px)!important}
 .help-page:has(>.page-scene){max-width:none}
}

/* Small fixes on these pages: eyebrows stay readable, the note under the packs
   reads clearly, small links are easy to tap, and Help's backup picker shows
   only its button. */
body:has(.page-scene) .eyebrow{font-size:14px}
.garden-note{color:#4a5d4e}
body:has(.page-scene) :is(.path-list-heading,.section-heading) a,.help-page a[href="#passport"]{display:inline-flex;align-items:center;min-height:44px}
#import-progress{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;clip-path:inset(50%)}
.backup-actions{position:relative}
.backup-actions label:has(+#import-progress:focus-visible){outline:3px solid var(--sa-focus);outline-offset:3px}
.help-page>.sa-btn{margin-top:28px}
#forget-stats{margin-top:12px}

@media(max-width:699px){
 /* Phones show a centred 2:1 crop. A title sits in the island's open sky. */
 .page-scene{--scene-h:50vw}
 .pack-quickstart .sa-btn{justify-self:stretch}
 .page-scene:has(>h1){display:flex;flex-direction:column-reverse}
 .page-scene>h1{position:relative;top:auto;max-width:none;margin:0;padding:14px 0 0;font-size:34px}
 .page-scene:has(>h1)>.page-scene-art{margin-top:-8px}
 .page-scene>.sa-backpill{top:10px}
 .pack-quickstart h2{font-size:22px}
 .pack-intro.sa-card-over-scene h1{font-size:28px}
 .pack-card.pack-painted .pack-scene{aspect-ratio:5/2}
 .pack-card.pack-painted .pack-scene .garden-badge{left:14px;bottom:-26px;width:52px;height:57px}
 .pack-card.pack-painted>.pack-card-copy{padding-top:36px}
 .passport-tiles{grid-template-columns:1fr;gap:8px}
 .passport-tile{padding:10px 14px}
}
/* Six stones fit a narrow card: on phones, and in the three-column pack grid
   on mid-size windows. */
@media(max-width:899px){
 :is(.pack-card,.pack-quickstart) .sa-steps{--sa-step:24px;--sa-step-gap:8px;flex-wrap:wrap;row-gap:8px}
 :is(.pack-card,.pack-quickstart) .sa-step{font-size:13px}
}
@media(max-width:359px){
 :is(.pack-card,.pack-quickstart) .sa-steps{--sa-step:22px}
 /* The smallest phones: a pack's card stays compact, so its button clears the menu. */
 .pack-intro.sa-card-over-scene{padding:16px}
 .pack-intro.sa-card-over-scene h1{font-size:25px}
 .pack-intro.sa-card-over-scene .pack-intro-copy p:not(.sa-eyebrow){margin-bottom:8px;font-size:16px}
 .pack-intro .sa-steps--lg{--sa-step:28px;--sa-step-gap:10px}
 .pack-intro .sa-progress__text{font-size:14px}
 .pack-intro-action .sa-btn{margin-top:8px}
}

/* One button look across the site (release 1). Older .button markup takes the
   .sa-btn look (design.css): a pill, green when primary, cream with a sage
   edge otherwise. Appearance only: width, display, margins and font size stay
   as each page set them, and compact game toolbars keep their own heights.
   New markup uses .sa-btn. */
.button,a.button,label.button{min-height:48px;border:2px solid var(--sa-sage);border-radius:999px;background:var(--sa-surface);color:var(--sa-green);font-family:inherit;font-weight:600;box-shadow:none;text-decoration:none;cursor:pointer}
.button:visited{color:var(--sa-green)}
.button:hover{background:#f1f4ea;border-color:var(--sa-green);color:var(--sa-green);text-decoration:none}
.button.primary,a.button.primary{background:var(--sa-clay);border-color:var(--sa-clay);color:var(--sa-surface)}
.button.primary:visited{color:var(--sa-surface)}
.button.primary:hover{background:var(--sa-clay-dark);border-color:var(--sa-clay-dark);color:var(--sa-surface)}
.button:focus-visible{outline:3px solid var(--sa-focus);outline-offset:3px}
.button:disabled,.button[aria-disabled="true"]{background:var(--sa-surface);border-color:var(--sa-sage);color:var(--sa-green);opacity:.55;cursor:not-allowed}
.button.primary:disabled,.button.primary[aria-disabled="true"]{background:var(--sa-clay);border-color:var(--sa-clay);color:var(--sa-surface)}
/* Destructive confirms (Clear progress, Restore, Delete profile, Leave the board) keep green, never clay. */
.button.primary.is-destructive,a.button.primary.is-destructive,.button.primary.is-destructive:disabled,.button.primary.is-destructive[aria-disabled="true"]{background:var(--sa-green);border-color:var(--sa-green);color:var(--sa-surface)}
.button.primary.is-destructive:hover{background:#1a3a2f;border-color:#1a3a2f;color:var(--sa-surface)}