/* Goood product compositions. Core recipes stay in components.css; these are Goood's own patterns. */

/* Per-element inputs that js/product.js sets inline; these are their defaults. */
:root{--glow:4px;--gx:50%;--gy:50%;--bob-d:5.2s;--bob-o:0s;--bob-y:7px;--img:none;--tint:var(--night-sky-1);--p:0}

/* ---------- Page shell ---------- */
.goood{position:relative;min-height:100dvh;overflow-x:hidden;background:var(--bg);color:var(--fg);isolation:isolate}
.goood--sky{background:var(--sky-gradient)}
/* Home (as in the handoff): the sky gradient spans one screen and stays still while the content scrolls over it;
   the glow and the stars scroll with the page. */
.goood--home{background:var(--neutral-950)}
.goood--home::before{content:'';position:fixed;inset:0;z-index:-2;background:var(--sky-gradient);pointer-events:none}
.goood--library{background:var(--library-gradient)}
.goood--room{background:linear-gradient(180deg,var(--room,var(--night-sky-1)) 0%,var(--night-room) 46%,var(--neutral-950) 100%)}
.goood--tint{background:linear-gradient(180deg,color-mix(in srgb,var(--tint,var(--night-sky-1)) 13%,var(--neutral-950)) 0%,var(--neutral-950) 42%)}
.goood--black{background:var(--black)}
.goood__main{position:relative;padding-bottom:calc(var(--space-20) * 2.4)}
.sky-glow{position:absolute;inset:0 0 auto;height:35rem;background:var(--sky-glow);pointer-events:none;z-index:-1}
.room-glow{position:absolute;inset:0 0 auto;height:30rem;background:radial-gradient(circle at 78% 22%,color-mix(in srgb,var(--m) 30%,transparent) 0%,transparent 50%);pointer-events:none;z-index:-1}
.stars{position:absolute;inset:0 0 auto;height:22rem;pointer-events:none;z-index:-1}
.star{position:absolute;border-radius:50%;background:var(--neutral-50);box-shadow:0 0 var(--glow,4px) currentColor;color:var(--neutral-50)}

/* Small spacing helpers for product compositions. */
.pt-2{padding-top:var(--space-2)}.pt-3{padding-top:var(--space-3)}.pt-6{padding-top:var(--space-6)}
.entries{list-style:none;margin:0;padding-top:var(--space-7)}
.tabs__tab[aria-pressed="true"]{color:var(--fg-brand-primary);background:var(--brand-primary-subtle);border-color:var(--brand-primary-800)}
.lib-search[aria-disabled="true"] .field__control{padding-left:var(--space-12);border-radius:var(--radius-full);display:flex;align-items:center;margin:0;cursor:default}

/* ---------- Text rhythm (DESIGN.md "Goood rhythm") ---------- */
.inset-card{padding-inline:var(--space-4)}
.display{font-family:var(--font-display);font-weight:var(--weight-light);letter-spacing:var(--letter-spacing-tight);line-height:var(--line-height-tight)}
.display i,.display em{font-style:italic}
.page-question{font-family:var(--font-display);font-weight:var(--weight-light);font-size:var(--text-4xl);line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-tight)}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);padding:var(--space-14) var(--space-6) 0}
.section-head h2{font-size:var(--text-2xl);line-height:var(--line-height-snug)}
.section-head__note{margin-top:var(--space-1);font-size:var(--text-sm);color:var(--fg-muted)}
.section-head--sm{padding-top:var(--space-10)}.section-head--sm h2{font-size:var(--text-xl)}
.text-link{display:inline-flex;align-items:center;gap:var(--space-1);min-height:var(--touch-target);padding:0 var(--space-1);color:var(--fg-brand-primary);font-size:var(--text-sm);font-weight:var(--weight-medium);text-decoration:none;border:0;background:none}
.text-link:hover{color:var(--fg)}
.wordmark{font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:var(--letter-spacing-wide);text-transform:uppercase;color:var(--fg-muted)}

/* ---------- Pearls: Goood's only characters (n34). Light upper-left, glint, soft shade. ---------- */
.pearl{--s:84;--halo:.42;display:block;flex:none;width:calc(var(--s) * 1px);height:calc(var(--s) * 1px);border-radius:50%;border:0;padding:0;background:var(--pearl-glint),radial-gradient(circle at 32% 28%,var(--l,var(--brand-secondary-50)) 0%,var(--m,var(--brand-secondary-400)) 46%,var(--d,var(--brand-secondary-700)) 100%);box-shadow:inset calc(var(--s) * -.12px) calc(var(--s) * -.16px) calc(var(--s) * .26px) var(--pearl-shadow),inset calc(var(--s) * .06px) calc(var(--s) * .09px) calc(var(--s) * .16px) var(--pearl-light),0 calc(var(--s) * .14px) calc(var(--s) * .3px) var(--pearl-drop),0 0 calc(var(--s) * var(--halo) * 1px) color-mix(in srgb,var(--m,var(--brand-secondary-400)) 33%,transparent)}
.pearl--flat{box-shadow:inset calc(var(--s) * -.13px) calc(var(--s) * -.2px) calc(var(--s) * .33px) var(--pearl-shadow),inset calc(var(--s) * .07px) calc(var(--s) * .1px) calc(var(--s) * .2px) var(--pearl-light),0 0 0 2px var(--night-ink),0 0 calc(var(--s) * .4px) color-mix(in srgb,var(--m,var(--brand-secondary-400)) 33%,transparent)}
.pearl--jessa{--l:var(--brand-secondary-50);--m:var(--brand-secondary-400);--d:var(--brand-secondary-700)}
[data-feeling="calm"]{--l:var(--feel-calm-light);--m:var(--feel-calm);--d:var(--feel-calm-deep);--room:var(--feel-calm-room)}
[data-feeling="anxious"]{--l:var(--feel-anxious-light);--m:var(--feel-anxious);--d:var(--feel-anxious-deep);--room:var(--feel-anxious-room)}
[data-feeling="sad"]{--l:var(--feel-sad-light);--m:var(--feel-sad);--d:var(--feel-sad-deep);--room:var(--feel-sad-room)}
[data-feeling="tired"]{--l:var(--feel-tired-light);--m:var(--feel-tired);--d:var(--feel-tired-deep);--room:var(--feel-tired-room)}
[data-feeling="overstimulated"]{--l:var(--feel-overstimulated-light);--m:var(--feel-overstimulated);--d:var(--feel-overstimulated-deep);--room:var(--feel-overstimulated-room)}
[data-feeling="down-on-myself"]{--l:var(--feel-down-light);--m:var(--feel-down);--d:var(--feel-down-deep);--room:var(--feel-down-room)}
[data-feeling="unsure"]{--l:var(--feel-unsure-light);--m:var(--feel-unsure);--d:var(--feel-unsure-deep);--room:var(--feel-unsure-room)}
.pearl-stack{display:flex;padding-left:var(--space-2)}.pearl-stack .pearl{--s:30;margin-left:calc(var(--space-2) * -1.1)}
/* Jessa's story: her pearl in a Sun Gold ring. */
.story-ring{display:grid;place-items:center;width:var(--touch-target);height:var(--touch-target);padding:var(--space-1);border:2px solid var(--accent);border-radius:50%;background:none;box-shadow:var(--glow-gold)}
.story-ring .pearl{--s:32;box-shadow:none}

/* ---------- Home ---------- */
.home-bar{display:flex;justify-content:space-between;align-items:center;padding:calc(max(env(safe-area-inset-top),var(--device-top)) + var(--space-5)) var(--space-6) 0}
.greeting{display:flex;flex-direction:column;gap:var(--space-1-5);padding:var(--space-16) var(--space-6) 0}
.greeting__hello{font-size:var(--text-md);color:var(--fg-secondary)}
/* The check-in card: the one raised, glowing card on Home (the primary action). */
.checkin{display:flex;align-items:center;gap:var(--space-4);width:100%;padding:var(--space-4) 1.125rem var(--space-4) var(--space-4);border:var(--border-width) solid var(--border-strong);border-radius:var(--radius-lg);background:var(--surface-raised);box-shadow:var(--glow-cta);color:var(--fg);text-align:left;text-decoration:none;transition:transform var(--motion-fast) var(--ease),background var(--motion-fast) var(--ease)}
.checkin:hover{background:var(--surface-well)}.checkin:active{transform:scale(.985);background:var(--surface-pressed)}
.checkin__text{flex:1;display:flex;flex-direction:column;gap:var(--space-0-5)}
.checkin__title{font-family:var(--font-display);font-size:var(--text-lg-plus);line-height:var(--line-height-snug)}
.checkin__hint{font-size:var(--text-xs);color:var(--fg-muted)}
.go-dot{position:relative;display:grid;place-items:center;flex:none;width:var(--touch-target);height:var(--touch-target);border-radius:50%;background:radial-gradient(circle at 32% 26%,var(--brand-primary-200) 0%,var(--brand-primary-400) 52%,var(--brand-primary-500) 100%);box-shadow:inset 0 1px 0 var(--pearl-light),inset 0 -2px 4px color-mix(in srgb,var(--brand-primary-700) 45%,transparent),0 4px 12px color-mix(in srgb,var(--black) 35%,transparent),var(--glow-gold);color:var(--accent-fg);transition:transform var(--motion-normal) var(--ease),box-shadow var(--motion-normal) var(--ease)}.go-dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:var(--border-width) solid color-mix(in srgb,var(--accent) 28%,transparent);pointer-events:none}.go-dot .icon{width:1.0625rem;height:1.0625rem}
/* A little extra weight on the outline triangle so it holds up at 17px on gold. */
.go-dot .icon path{stroke:currentColor;stroke-width:5;stroke-linejoin:round}.checkin:hover .go-dot{transform:translateX(2px)}.checkin:active .go-dot{transform:scale(.94)}
.tree-row{display:flex;align-items:center;gap:var(--space-3-5);margin:var(--space-3) var(--space-4) 0;padding:var(--space-3-5) var(--space-4);border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-md);background:var(--surface-card);font-size:var(--text-md)}
/* June's tree: a soft sculpted tree, small, sitting just above the row's baseline. */
.tree-row__tree{flex:none;width:1.75rem;height:1.75rem;margin-block:calc(var(--space-1) * -1);object-fit:contain;filter:drop-shadow(0 1px 2px color-mix(in srgb,var(--pearl-shadow) 50%,transparent))}
.tree-row__text{flex:1}.tree-row__text span{color:var(--fg-muted)}
.tree-row__days{display:flex;gap:5px}.tree-row__days i{width:6px;height:6px;border-radius:50%;background:var(--brand-secondary)}.tree-row__days i.is-ahead{background:color-mix(in srgb,var(--neutral-50) 24%,transparent)}

/* Category tile: a door into a section, with its line art. */
.tile-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);padding:var(--space-3) var(--space-4) 0}
.cat-tile{position:relative;display:flex;align-items:center;height:5.75rem;padding:var(--space-3-5) var(--space-7) var(--space-3-5) var(--space-3-5);overflow:hidden;border:var(--border-width) solid var(--border);border-radius:var(--radius-md);background:var(--surface-card);color:var(--fg);text-decoration:none;transition:background var(--motion-fast) var(--ease)}
.cat-tile:hover{background:var(--surface-well)}.cat-tile:active{background:var(--surface-pressed)}
.cat-tile__name{position:relative;max-width:5.75rem;font-size:var(--text-sm);line-height:var(--line-height-snug)}

.line-art{position:absolute;right:-6px;top:3px;width:116px;height:86px;opacity:.55;color:var(--cat,var(--brand-secondary));-webkit-mask-image:radial-gradient(ellipse 62% 58% at 68% 50%,#000 15%,transparent 78%);mask-image:radial-gradient(ellipse 62% 58% at 68% 50%,#000 15%,transparent 78%);filter:blur(.35px) drop-shadow(0 0 7px color-mix(in srgb,currentColor 50%,transparent));pointer-events:none}
.line-art svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:.8;stroke-linecap:round}
[data-cat="short-calm-downs"]{--cat:var(--cat-short-calm-downs)}[data-cat="extended-sessions"]{--cat:var(--cat-extended-sessions)}[data-cat="sleep-stories"]{--cat:var(--cat-sleep-stories)}
[data-cat="asmr"]{--cat:var(--cat-asmr)}[data-cat="slow-tv"]{--cat:var(--cat-slow-tv)}[data-cat="walking-meditations"]{--cat:var(--cat-walking-meditations)}

/* ---------- Video thumbnails ----------
   v1 thumbnails are not in the handoff. Placeholder: the category tint as a soft night glow plus its line art.
   (The concept's striped fill and monospace caption are replaced; see DESIGN.md "Deviations".) */
.thumb{position:relative;display:block;overflow:hidden;border-radius:var(--radius-sm);background:radial-gradient(120% 90% at 78% 18%,color-mix(in srgb,var(--cat,var(--brand-secondary)) 42%,transparent) 0%,transparent 64%),linear-gradient(160deg,color-mix(in srgb,var(--cat,var(--brand-secondary)) 26%,var(--neutral-900)) 0%,var(--neutral-950) 100%)}
/* Hairline edge that fades out towards the bottom, so it never reads as a line against the dark base. */
.thumb::after{content:'';position:absolute;inset:0;border:var(--border-width) solid var(--border-strong);border-radius:inherit;-webkit-mask-image:linear-gradient(180deg,#000 0%,#0000008C 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 0%,#0000008C 45%,transparent 100%);pointer-events:none}
.thumb .line-art{inset:auto;right:6%;top:14%;width:64%;height:72%;opacity:.5}
.thumb__badge{position:absolute;left:var(--space-2);top:var(--space-2)}
.thumb__dur{position:absolute;right:var(--space-1-5);bottom:var(--space-1-5)}
.thumb__play{position:absolute;inset:0;display:grid;place-items:center}
.play-dot{display:grid;place-items:center;width:var(--space-16);height:var(--space-16);border-radius:50%;background:var(--neutral-50);color:var(--night-deep);box-shadow:var(--glow-cream);transition:transform var(--motion-fast) var(--ease)}.play-dot .icon{width:1.5rem;height:1.5rem;margin-left:2px}
/* New-this-week feature card. */
.feature-card{display:flex;flex-direction:column;gap:var(--space-3);width:100%;padding:var(--space-2);border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-md);background:var(--surface-card);color:var(--fg);text-decoration:none;transition:background var(--motion-fast) var(--ease)}
.feature-card:hover{background:var(--surface-well)}.feature-card .thumb{height:11.25rem}
.feature-card__text{display:flex;flex-direction:column;gap:var(--space-1);padding:0 var(--space-2) var(--space-2)}
.feature-card__title{font-family:var(--font-display);font-size:var(--text-lg);line-height:var(--line-height-snug)}
.meta{font-size:var(--text-sm);color:var(--fg-muted)}.meta--xs{font-size:var(--text-xs)}
/* Rail of video cards: portrait or landscape per category. */
.rail{display:flex;gap:var(--space-2-5);padding:var(--space-3) var(--space-4) 0;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding-inline:var(--space-4)}
.rail::-webkit-scrollbar{display:none}
.video-card{flex:none;display:flex;flex-direction:column;gap:var(--space-2);width:10.5rem;color:var(--fg);text-decoration:none;scroll-snap-align:start}
.video-card .thumb{height:6.25rem}
.video-card[data-shape="portrait"]{width:7.5rem}.video-card[data-shape="portrait"] .thumb{height:10rem}
.video-card__title{font-size:var(--text-sm);line-height:var(--line-height-snug);color:var(--fg)}
.video-card:hover .video-card__title{color:var(--fg-brand-primary)}
.video-card:active .thumb{transform:scale(.98)}
/* Video row (destination, section). */
.video-list{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-8) var(--space-4) 0}
.video-row{display:flex;align-items:center;gap:var(--space-3-5);width:100%;padding:var(--space-2);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);background:var(--surface-card);color:var(--fg);text-decoration:none;transition:background var(--motion-fast) var(--ease)}
.video-row:hover{background:var(--surface-well)}.video-row:active{background:var(--surface-pressed)}
.video-row .thumb{width:4rem;height:4rem;flex:none}.video-row .thumb .line-art{width:90%;right:-10%}
.video-row__text{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--space-1)}
.video-row__title{font-family:var(--font-display);font-size:var(--text-lg);line-height:var(--line-height-snug)}
.video-row__go{margin-right:var(--space-2);color:var(--fg-secondary)}.video-row__go .icon{width:1rem;height:1rem}
/* Section entry: a card holding a row plus an expandable description. */
.entry{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2);border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-md);background:var(--surface-card)}
.entry__link{display:flex;gap:var(--space-3-5);align-items:center;color:var(--fg);text-decoration:none;border-radius:var(--radius-sm)}
.entry__link .thumb{width:7rem;height:4.5rem;flex:none}
.entry__title{font-family:var(--font-display);font-size:var(--text-lg);line-height:var(--line-height-snug)}
.entry__link:hover .entry__title{color:var(--fg-brand-primary)}
.entry__desc{padding:0 var(--space-1-5);font-size:var(--text-sm);line-height:var(--line-height-relaxed);color:var(--fg-secondary)}
.entry__toggle{align-self:flex-start;min-height:var(--touch-target);margin-block:calc(var(--space-2) * -1);padding:0 var(--space-1-5);border:0;background:none;color:var(--fg-brand-primary);font-size:var(--text-xs);font-weight:var(--weight-medium)}

/* ---------- Sounds ---------- */
.sound-rail{display:flex;gap:var(--space-2);padding:var(--space-3) var(--space-4) 0;overflow-x:auto;scrollbar-width:none}
.sound-card{position:relative;flex:none;display:flex;align-items:flex-end;justify-content:center;width:6.25rem;height:11.25rem;padding:0 var(--space-1-5) var(--space-5);border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-md);background:var(--image-fade),var(--img) center 12%/cover,var(--neutral-900);color:var(--fg);font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-light);line-height:var(--line-height-snug);text-align:center;transition:transform var(--motion-fast) var(--ease),border-color var(--motion-normal) var(--ease)}
.sound-card:active{transform:scale(.97)}
.sound-card[aria-pressed="true"]{border-color:var(--brand-primary-600)}
.playing-tag{position:absolute;top:var(--space-2-5);left:var(--space-2-5);display:flex;align-items:center;gap:var(--space-1-5);font-family:var(--font-body);font-size:var(--text-2xs);font-weight:var(--weight-medium);letter-spacing:var(--letter-spacing-caps);color:var(--fg-brand-primary)}
.playing-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.sound-card:not([aria-pressed="true"]) .playing-tag{display:none}
/* Sheet tiles. --img is resolved relative to this stylesheet: set it as url(../assets/…). */
.sound-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}
.sound-tile{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-2);height:5.75rem;padding:var(--space-3) var(--space-3-5);border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-md);background:var(--image-fade-tile),var(--img) center 30%/cover,var(--neutral-900);color:var(--fg);text-align:left}
.sound-tile[aria-pressed="true"]{border-color:var(--brand-primary-600)}
.sound-tile__name{font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-light)}
.sound-tile__status{font-size:var(--text-2xs);font-weight:var(--weight-bold);letter-spacing:var(--letter-spacing-caps);color:var(--fg-brand-primary);text-transform:uppercase}
.sound-controls{display:flex;align-items:center;gap:var(--space-4);padding:0 var(--space-1)}
.round-play{display:grid;place-items:center;flex:none;width:var(--control-lg);height:var(--control-lg);border:0;border-radius:50%;background:var(--neutral-50);color:var(--night-deep);transition:transform var(--motion-fast) var(--ease)}.round-play:active{transform:scale(.95)}.round-play .icon{width:1.375rem;height:1.375rem}
.volume{flex:1;display:flex;flex-direction:column;gap:var(--space-1)}
.volume__label{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--fg-muted);font-variant-numeric:tabular-nums}
.range{--value:60%;width:100%;height:var(--control-sm);margin:0;background:none;appearance:none;-webkit-appearance:none;cursor:pointer}
.range::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent) var(--value),var(--neutral-700) var(--value))}
.range::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent) var(--value),var(--neutral-700) var(--value))}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;border-radius:50%;background:var(--neutral-50);box-shadow:var(--shadow-sm)}
.range::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--neutral-50);box-shadow:var(--shadow-sm)}
.sheet-head{display:flex;justify-content:space-between;align-items:center;padding:0 var(--space-2)}
.sheet-head h2{font-size:var(--text-2xl)}
.sheet-note{padding:0 var(--space-2);font-size:var(--text-xs);line-height:var(--line-height-relaxed);color:var(--fg-muted)}

/* Wave: the now-playing glyph. Five bars; stilled when paused. */
.wave{display:flex;align-items:center;gap:2.5px;height:14px;color:var(--fg-brand-primary)}
.wave i{width:1.5px;border-radius:1px;background:currentColor;transform-origin:center;animation:wave var(--d,1.6s) ease-in-out var(--o,0s) infinite}
.wave i:nth-child(1){height:8px;--d:1.6s}.wave i:nth-child(2){height:13px;--d:2.2s;--o:-.37s}.wave i:nth-child(3){height:10px;--d:1.8s;--o:-.74s}.wave i:nth-child(4){height:14px;--d:2.6s;--o:-1.11s}.wave i:nth-child(5){height:9px;--d:2s;--o:-1.48s}
.is-paused .wave{color:var(--fg-subtle)}.is-paused .wave i{animation:none;height:4px}
@keyframes wave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}

/* ---------- Floating chrome: now-playing pill + capsule tab bar ---------- */
.chrome{position:fixed;inset:auto 0 0;z-index:var(--layer-chrome);display:flex;flex-direction:column;padding-top:var(--space-8);background:var(--surface-fade);pointer-events:none}
.chrome>*{pointer-events:auto}
.now-playing{align-self:center;display:flex;align-items:center;gap:var(--space-2-5);min-height:var(--control-sm);margin-bottom:var(--space-3);padding:var(--space-1-5) var(--space-4) var(--space-1-5) var(--space-2);border:var(--border-width) solid var(--border-strong);border-radius:var(--radius-full);background:var(--surface-raised);-webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);color:var(--fg);font-size:var(--text-xs);font-weight:var(--weight-medium);white-space:nowrap;transition:transform var(--motion-fast) var(--ease)}
.now-playing:active{transform:scale(.97)}
.now-playing__icon{display:grid;place-items:center;width:22px;height:22px}
.now-playing__hint{color:var(--fg-muted);font-weight:var(--weight-regular)}
.chrome .bottom-nav{position:static;margin:0 var(--space-3-5) max(var(--space-3),max(env(safe-area-inset-bottom),var(--device-bottom)))}
.bottom-nav__create{flex:none;display:grid;place-items:center;width:46px;height:46px;margin:0 var(--space-1);padding:0;border:0;border-radius:50%;background:none;cursor:default}
.bottom-nav__create .pearl{--s:46;box-shadow:inset -7px -10px 16px var(--pearl-shadow),var(--glow-sage)}
/* Ambient lifecycle: the chrome fades out where the sound fades (player, end, grounding). */
.chrome[hidden]{display:none}

/* ---------- Headers ---------- */
.page-head{display:flex;flex-direction:column;gap:var(--space-2-5);padding:var(--space-5) var(--space-6) 0}
.page-head h1{font-size:var(--text-4xl)}
.page-head p{font-size:var(--text-md);line-height:var(--line-height-relaxed);color:var(--fg-secondary)}
.close-bar{display:flex;justify-content:flex-end;padding:calc(max(env(safe-area-inset-top),var(--device-top)) + var(--space-2-5)) var(--space-4) 0}

/* ---------- Feeling picker ---------- */
.picker{position:relative;min-height:max(100dvh,52.75rem);overflow:hidden}
.picker__glow{position:absolute;inset:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),color-mix(in srgb,var(--m,transparent) 33%,transparent) 0%,transparent 62%);opacity:0;transition:opacity var(--motion-slower) var(--ease);pointer-events:none}
.picker.is-picking .picker__glow{opacity:1}
.picker__title{position:relative;display:flex;flex-direction:column;gap:var(--space-1-5);padding:var(--space-1) var(--space-6) 0;transition:opacity var(--motion-slow) var(--ease)}
.picker.is-picking .picker__title{opacity:.35}
/* The pearls' layer covers the screen; only the pearls take taps, so the close button above stays reachable. */
.feelings{position:absolute;inset:0;list-style:none;margin:0;padding:0;pointer-events:none}.feelings .feeling{pointer-events:auto}
.feeling{position:absolute;display:flex;flex-direction:column;align-items:center;gap:var(--space-2-5);width:8.125rem;translate:-50% 0;transition:opacity var(--motion-slow) var(--ease)}
.feeling__button{display:flex;flex-direction:column;align-items:center;gap:var(--space-2-5);border:0;padding:0;background:none;color:var(--fg);border-radius:var(--radius-md)}
.feeling .pearl{transition:transform var(--motion-slower) var(--ease),box-shadow var(--motion-slower) var(--ease)}
.feeling__button:active .pearl{transform:scale(.94)}
.feeling__name{font-family:var(--font-display);font-size:var(--text-lg);white-space:nowrap}
.picker.is-picking .feeling:not(.is-picked){opacity:.12}
.feeling.is-picked .pearl{transform:scale(1.28);--halo:1.1}
.feeling[data-bob]{animation:bob var(--bob-d,5.2s) ease-in-out var(--bob-o,0s) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(var(--bob-y,7px))}}

/* ---------- Destination ---------- */
.dest-pearl{position:absolute;top:calc(max(env(safe-area-inset-top),var(--device-top)) + 4.5rem);right:var(--space-8);--s:84;box-shadow:inset -10px -14px 22px var(--pearl-shadow),inset 5px 8px 14px var(--pearl-light),0 12px 24px var(--pearl-drop),0 0 46px color-mix(in srgb,var(--m) 50%,transparent)}
.dest-title{display:flex;flex-direction:column;gap:var(--space-2-5);padding:6.625rem var(--space-6) 0}
.dest-title h1{font-size:var(--text-6xl);font-style:italic;line-height:var(--line-height-none);letter-spacing:var(--letter-spacing-tight)}
.dest-title h1.is-long{font-size:var(--text-5xl)}
.dest-title p{font-size:var(--text-body-lg);color:var(--fg-secondary)}
.alt-list{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);padding:0 var(--space-4)}
/* Divider between Jessa's videos and the two alternatives: a hairline either side of "or". */
.or-divider{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-6) var(--space-6) var(--space-4);color:var(--fg-subtle);font-size:var(--text-xs)}
.or-divider::before,.or-divider::after{content:'';flex:1;border-top:var(--border-width) solid var(--border-strong)}
.alt-list .alt-row{flex-direction:column;align-items:flex-start;gap:var(--space-3);height:100%;padding:var(--space-4)}
.alt-row{display:flex;align-items:center;gap:var(--space-3-5);width:100%;padding:var(--space-3-5) var(--space-4);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);background:var(--surface-card);color:var(--fg);text-align:left;text-decoration:none;transition:background var(--motion-fast) var(--ease)}
.alt-row:hover{background:var(--surface-well)}
.alt-row--jessa{background:var(--brand-secondary-subtle);border-color:var(--brand-secondary-800)}
.alt-row--jessa .pearl{--s:36}
.alt-row__icon{display:grid;place-items:center;flex:none;width:2.25rem;height:2.25rem;border:var(--border-width) solid var(--border-strong);border-radius:50%;color:var(--fg-secondary)}.alt-row__icon .icon{width:1rem;height:1rem}
.alt-row__text{flex:1;display:flex;flex-direction:column;gap:var(--space-0-5)}
.alt-row__title{font-size:var(--text-md);font-weight:var(--weight-medium)}
.alt-row__go{color:var(--fg-brand-primary)}.alt-row__go .icon{width:1rem;height:1rem}

/* ---------- Grounding ---------- */
.grounding{display:flex;flex-direction:column;align-items:center;min-height:100dvh;text-align:center;background:radial-gradient(circle at 50% 36%,color-mix(in srgb,var(--feel-unsure) 16%,transparent) 0%,transparent 42%),linear-gradient(180deg,var(--feel-unsure-room) 0%,var(--neutral-950) 100%)}
.grounding .close-bar{align-self:stretch;justify-content:flex-start}
.breath{display:grid;place-items:center;width:10rem;height:10rem;margin-top:calc(var(--space-20) + var(--space-8))}
.breath .pearl{--s:150;animation:breathe 10s var(--ease-breath) infinite;box-shadow:inset -16px -22px 34px var(--pearl-shadow),inset 8px 12px 22px var(--pearl-light),0 20px 40px var(--pearl-drop),0 0 70px color-mix(in srgb,var(--m) 35%,transparent)}
@keyframes breathe{0%{transform:scale(.72)}40%{transform:scale(1)}100%{transform:scale(.72)}}
.breath-cue{margin-top:var(--space-12);font-family:var(--font-display);font-size:var(--text-3xl);font-style:italic;font-weight:var(--weight-light);line-height:var(--line-height-snug)}
.breath-note{max-width:17.5rem;margin-top:var(--space-3-5);font-size:var(--text-md);line-height:var(--line-height-relaxed);color:var(--fg-secondary)}
.countdown{margin-top:auto;margin-bottom:var(--space-16);font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-light);color:var(--fg-secondary);font-variant-numeric:tabular-nums}

/* ---------- Video page ---------- */
.hero-still{display:block;width:100%;height:12.75rem;border-radius:var(--radius-md)}.hero-still .thumb{height:100%;border-radius:var(--radius-md)}
.hero-still:hover .play-dot{transform:scale(1.05)}
.video-title{display:flex;flex-direction:column;gap:var(--space-1-5);padding:var(--space-5) var(--space-6) 0}
.video-title h1{font-size:var(--text-2xl);line-height:var(--line-height-snug)}
.action-row{display:flex;gap:var(--space-2);padding:var(--space-4) var(--space-4) 0;overflow-x:auto;scrollbar-width:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--touch-target);padding:0 var(--space-3-5);border:var(--border-width) solid var(--border);border-radius:var(--radius-full);background:var(--surface-card);color:var(--fg);font-size:var(--text-xs);font-weight:var(--weight-medium);transition:color var(--motion-fast) var(--ease),border-color var(--motion-fast) var(--ease)}
.chip .icon{width:1rem;height:1rem}
.chip[aria-pressed="true"]{color:var(--fg-brand-primary);border-color:var(--brand-primary-800)}
.chip[aria-disabled="true"]{color:var(--fg-secondary);cursor:default}
.desc{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-5) var(--space-6) 0}
.desc p{font-size:var(--text-md);line-height:var(--line-height-relaxed);color:var(--fg-secondary);max-width:65ch}
.tags{display:flex;flex-wrap:wrap;gap:var(--space-1-5);padding:var(--space-3-5) var(--space-6) 0}
.comment-field{display:flex;align-items:center;min-height:var(--control-lg);margin:var(--space-3-5) var(--space-4) 0;padding:0 var(--space-4);border:var(--border-width) solid var(--border);border-radius:var(--radius-full);background:var(--surface-card);color:var(--fg-subtle);font-size:var(--text-sm)}
.comments{list-style:none;margin:0;padding:var(--space-2) var(--space-6) 0}
.comment{display:flex;gap:var(--space-3);padding:var(--space-4) 0;border-bottom:var(--border-width) solid var(--border-hairline)}
.comment__body{flex:1;display:flex;flex-direction:column;gap:var(--space-1)}
.comment__who{font-size:var(--text-xs);color:var(--fg-muted)}.comment__who b{color:var(--fg);font-weight:var(--weight-medium)}
.comment__text{font-size:var(--text-md);line-height:var(--line-height-normal)}
.heart{display:grid;place-items:center;flex:none;width:var(--touch-target);height:var(--touch-target);margin:calc(var(--space-1) * -1) calc(var(--space-2) * -1) 0 0;border:0;border-radius:50%;background:none;color:var(--fg-subtle);transition:color var(--motion-fast) var(--ease),transform var(--motion-fast) var(--ease)}
.heart .icon{width:1.125rem;height:1.125rem}.heart[aria-pressed="true"]{color:var(--fg-brand-primary)}.heart:active{transform:scale(.9)}

/* ---------- Player ---------- */
.play-screen{display:flex;flex-direction:column;min-height:100dvh;background:var(--black)}
.play-screen__bar{display:flex;align-items:center;gap:var(--space-3);padding:calc(max(env(safe-area-inset-top),var(--device-top)) + var(--space-1)) var(--space-4) 0}
.play-screen__title{flex:1;font-family:var(--font-body);padding-right:var(--space-14);text-align:center;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--fg-secondary)}
.play-screen__stage{flex:1;display:grid;place-items:center}
.play-screen__screen{width:100%;aspect-ratio:16 / 9;border-radius:0;border-inline:0}
.play-screen__screen .line-art{opacity:.7;animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{to{transform:translateX(-8%)}}
.play-screen.is-paused .play-screen__screen .line-art{animation-play-state:paused}
.play-screen__controls{display:flex;flex-direction:column;gap:var(--space-2-5);padding:0 var(--space-6) calc(max(env(safe-area-inset-bottom),var(--device-bottom)) + var(--space-10))}
.progress{height:3px;border-radius:2px;background:var(--neutral-700);overflow:hidden}.progress i{display:block;height:100%;background:var(--accent);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .1s linear}
.times{display:flex;justify-content:space-between;font-size:var(--text-xs);color:var(--fg-muted);font-variant-numeric:tabular-nums}
.transport{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-7);margin-top:var(--space-4)}
.transport .round-play{width:4.25rem;height:4.25rem;background:var(--surface-hover);border:var(--border-width) solid var(--border-strong);color:var(--fg)}
.transport .text-link{justify-self:start;color:var(--fg-secondary)}

/* ---------- Video end ---------- */
.end{display:flex;flex-direction:column;min-height:100dvh;padding:0 var(--space-6);background:radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--brand-secondary) 16%,transparent) 0%,transparent 50%),linear-gradient(180deg,var(--night-deep) 0%,var(--neutral-950) 72%)}
.end__meta{margin-top:calc(var(--space-20) * 2.75);font-size:var(--text-md);color:var(--fg-secondary)}
.end h1{margin-top:var(--space-2-5);font-size:var(--text-4xl)}
.choice-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin-top:var(--space-10)}
.end__note{margin-top:var(--space-4);font-size:var(--text-xs);line-height:var(--line-height-relaxed);color:var(--fg-muted)}
.end__next{margin-top:auto;margin-bottom:calc(max(env(safe-area-inset-bottom),var(--device-bottom)) + var(--space-8));font-size:var(--text-xs);color:var(--fg-muted)}

/* ---------- Library ---------- */
.lib-head{padding:calc(max(env(safe-area-inset-top),var(--device-top)) + var(--space-8)) var(--space-6) 0}
.lib-head h1{font-size:var(--text-4xl)}
.lib-search{margin:var(--space-4) var(--space-4) 0}
.lib-search .field__control{min-height:var(--control-md);border-color:var(--border);background:var(--surface-raised);color:var(--fg-subtle)}
.lib-pills{padding:var(--space-3-5) var(--space-4) 0}
.lib-pills .tabs__list{margin-inline:calc(var(--space-4) * -1);padding-inline:var(--space-4)}
.featured{position:relative;display:block;height:13.125rem;margin:var(--space-5) var(--space-4) 0;border-radius:var(--radius-md);color:var(--fg);text-decoration:none}
.featured .thumb{position:absolute;inset:0;border-radius:var(--radius-md)}
.featured__text{position:absolute;left:var(--space-4);right:var(--space-4);bottom:var(--space-4);display:flex;flex-direction:column;gap:var(--space-1)}
.featured__title{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--weight-light);line-height:var(--line-height-tight)}
.row-head{display:flex;justify-content:space-between;align-items:center;padding:var(--space-10) var(--space-5) 0 var(--space-6)}
.row-head a{color:var(--fg);text-decoration:none}
.row-head h2{font-size:var(--text-xl)}
.row-head__go{display:grid;place-items:center;width:var(--touch-target);height:var(--touch-target);color:var(--fg-brand-primary)}.row-head__go .icon{width:1.125rem;height:1.125rem}
.empty{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);padding:var(--space-16) var(--space-8);text-align:center}
.empty h2{font-size:var(--text-xl)}.empty p{font-size:var(--text-md);color:var(--fg-secondary);line-height:var(--line-height-relaxed)}

/* ---------- Launch ---------- */
.launch{display:grid;place-items:center;min-height:100dvh}
.launch__mark{display:flex;flex-direction:column;align-items:center;gap:var(--space-6)}
/* The Goood mark (js/brand.js). Rings are cream; the sun is Sun Gold; the moon is cream. */
.logo{display:inline-block;line-height:var(--line-height-none);color:var(--fg)}
.logo__svg{display:block;width:100%;height:auto;overflow:visible}
.logo__sun{fill:var(--brand-primary);stroke:none}.logo__rays{stroke:var(--brand-primary);fill:none}
.logo__moon{fill:var(--neutral-50);stroke:none}
.logo--home{width:4.5rem;color:var(--neutral-100)}
.launch .logo{width:12.5rem}
/* Splash (n1): the rings draw in left to right, the sun rises, then the moon; "you are goood" follows. */
.logo--animate .logo__ring{stroke-dasharray:100;stroke-dashoffset:100;animation:draw 1s var(--ease) forwards}
.logo--animate .logo__ring--open{animation-delay:.25s}.logo--animate .logo__ring--moon{animation-delay:.5s}
.logo--animate .logo__sun{opacity:0;transform:translateY(5px);transform-box:fill-box;transform-origin:center;animation:sunrise .9s var(--ease) 1s forwards}
.logo--animate .logo__rays{animation:spin-in 1.4s var(--ease) 1s backwards;transform-box:fill-box;transform-origin:center}
.logo--animate .logo__moon{opacity:0;animation:fade-in-to .9s var(--ease) 1.5s forwards}
@keyframes sunrise{to{opacity:1;transform:none}}@keyframes spin-in{from{transform:rotate(-45deg)}}@keyframes fade-in-to{to{opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}
.launch__line{font-family:var(--font-display);font-size:var(--text-2xl);line-height:var(--line-height-snug);font-style:italic;font-weight:var(--weight-light);opacity:0;animation:rise 1s var(--ease) 2s forwards}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- Walkthrough (n33) ---------- */
.tour{position:fixed;inset:0;z-index:var(--layer-overlay)}
.tour__blur{position:absolute;inset:0;-webkit-backdrop-filter:var(--blur-tour);backdrop-filter:var(--blur-tour);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;pointer-events:none}
.tour__spot{position:absolute;border-radius:var(--radius-lg);box-shadow:0 0 0 200vmax var(--scrim-tour);pointer-events:none;transition:background 400ms var(--ease-soft)}
/* Opening: the spotlight starts closed (filled with the dim), then opens onto the target. */
.tour__spot.is-hushed{background:var(--scrim-tour);transition:none}
/* The spotlit element carries the same forest light as step 1, whatever sits behind it.
   An inset shadow paints under the element's content, so text, gold and images stay untouched. */
.is-lit{box-shadow:inset 0 0 0 100vmax color-mix(in srgb,var(--night-sky-1) 70%,transparent);transition:box-shadow var(--motion-slow) var(--ease)}
/* Lit groups get breathing room below their last row, without shifting the layout. */
.tile-grid.is-lit,.sound-rail.is-lit{padding-bottom:var(--space-4);margin-bottom:calc(var(--space-4) * -1);border-radius:var(--radius-lg)}
/* A muted tab (Journal) is shown at full strength while the tour points at it. */
.bottom-nav__item.is-lit{opacity:1;color:var(--fg)}
.checkin.is-lit{box-shadow:inset 0 0 0 100vmax color-mix(in srgb,var(--night-sky-1) 70%,transparent),var(--glow-cta)}
/* The tour is drawn from the first frame (dimmed, spotlight closed, text hidden), so Home never shows without it. */
/* The ending curtain: night black over everything, faded in, then out once Home is back at the top. */
.tour__curtain{position:fixed;inset:0;z-index:calc(var(--layer-overlay) + 1);background:var(--neutral-950);opacity:0;transition:opacity 520ms var(--ease-soft);pointer-events:none}.tour__curtain.is-on{opacity:1;transition-duration:420ms}
.tour__card{position:absolute;left:var(--space-6);right:var(--space-6);display:flex;flex-direction:column;gap:var(--space-2-5)}
/* Text choreography: leave together and quickly (up, blurred); arrive one by one, rising from below. */
.tour__card>*{transition:opacity 440ms var(--ease-soft),transform 520ms cubic-bezier(.16,1,.3,1),filter 440ms var(--ease-soft)}
.tour__card>:nth-child(2){transition-delay:70ms}.tour__card>:nth-child(3){transition-delay:140ms}
.tour__card.is-leaving>*{opacity:0;transform:translateY(-8px);filter:blur(4px);transition-duration:220ms;transition-timing-function:var(--ease-soft)}
.tour__card.is-leaving>:nth-child(2){transition-delay:30ms}.tour__card.is-leaving>:nth-child(3){transition-delay:60ms}
.tour__card.is-before>*{opacity:0;transform:translateY(12px);filter:blur(4px);transition:none}
.tour__dots i{transition:background var(--motion-slow) var(--ease-soft)}
.tour__card h2{font-size:var(--text-2xl)}
.tour__card p{font-size:var(--text-md);line-height:var(--line-height-relaxed);color:var(--fg-secondary)}
.tour__actions{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-top:var(--space-3)}
.tour__dots{display:flex;gap:var(--space-1-5)}.tour__dots i{width:6px;height:6px;border-radius:50%;background:var(--neutral-700)}.tour__dots i.is-on{background:var(--accent)}
@keyframes fade-out{to{opacity:0;visibility:hidden}}

/* ---------- Showcase helpers (system.html only) ---------- */
.goood-specimen{display:flex;flex-wrap:wrap;gap:var(--space-6);align-items:flex-end;padding:var(--space-6);border-radius:var(--radius-md);background:var(--sky-gradient)}
.goood-specimen--col{flex-direction:column;align-items:stretch;max-width:24.375rem}
.goood-specimen .feeling__name{font-size:var(--text-md)}

/* ---------- Motion (DESIGN.md "Motion") ----------
   Screen changes use a night veil (js/product.js), not browser snapshots: leaving, the veil fades over the content;
   arriving, it fades away. The floating chrome sits above it and stays put. Shared moves (the picked pearl, the
   tapped thumbnail) are lifted above the veil and glide into place on the next screen. */
/* Screens change in layers, never as a whole: the content fades out and rises in, the background dips gently
   behind it (so a change of tint blends), and the floating chrome stays still. */
.veil{--veil-hold:.35;position:fixed;inset:0;z-index:-1;background:var(--neutral-950);opacity:var(--veil-hold);pointer-events:none;transition:opacity 620ms var(--ease-soft)}
.veil.is-clear{opacity:0}.veil.is-leaving{opacity:var(--veil-hold);transition-duration:220ms}
/* Content never fully disappears: it softens to a third and a slight blur, and the next screen starts from there. */
.is-leaving-page main>*:not(.in-flight):not(:has(.in-flight)){opacity:.35;filter:blur(3px);transform:translateY(-4px);transition:opacity 220ms var(--ease-soft),filter 220ms var(--ease-soft),transform 220ms var(--ease-soft)}
.is-entering main>*:not(.in-flight):not(:has(.in-flight)){animation:page-in 620ms var(--ease-soft) both}
@keyframes page-in{from{opacity:.35;filter:blur(3px);transform:translateY(4px)}}
.in-flight{z-index:calc(var(--layer-chrome) - 4)}
/* Sheet exit: faster than its entrance. */
.sheet.is-closing{animation:sheet-out var(--motion-normal) cubic-bezier(.4,0,1,1) forwards}.sheet.is-closing::backdrop{animation:fade-out-scrim var(--motion-normal) linear forwards}
@keyframes sheet-out{to{transform:translateY(100%)}}@keyframes fade-out-scrim{to{opacity:0}}
/* Feedback: a soft pop when something is hearted or favorited, a crossfade when the sound changes. */
.heart[aria-pressed="true"] .icon,.chip[aria-pressed="true"] .icon{animation:pop var(--motion-slow) cubic-bezier(.16,1,.3,1)}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.15)}100%{transform:none}}
[data-now].is-new{animation:now-in var(--motion-slow) var(--ease)}
@keyframes now-in{from{opacity:0;filter:blur(3px)}}
/* Arrival choreography (js/product.js choreograph()): each cued element waits for its --d, then moves in.
   Cards move as whole cards; nothing inside a card animates on arrival. */
.is-arriving [data-arrive]{animation:arrive-rise 760ms cubic-bezier(.22,1,.36,1) var(--d,0ms) both}
.is-arriving [data-arrive="glow"]{animation:arrive-fade 1400ms var(--ease-soft) var(--d,0ms) both}
.is-arriving [data-arrive="twinkle"]{animation:arrive-fade 900ms var(--ease-soft) var(--d,0ms) both}
.is-nightfall.goood--home::before{animation:arrive-fade 900ms var(--ease-soft) both}
@keyframes arrive-rise{from{opacity:.25;transform:translateY(12px);filter:blur(4px)}}
@keyframes arrive-fade{from{opacity:0}}
/* Reduced motion: no flight or blur; screens and states still change with a brief fade. */
@media(prefers-reduced-motion:reduce){
  .heart[aria-pressed="true"] .icon,.chip[aria-pressed="true"] .icon,[data-now].is-new{animation:none}
}

@media(prefers-reduced-motion:reduce){.feeling[data-bob],.wave i,.breath .pearl,.play-screen__screen .line-art{animation:none}.logo--animate .logo__ring{stroke-dashoffset:0;animation:none}.logo--animate .logo__sun,.logo--animate .logo__moon{opacity:1;transform:none;animation:none}.launch__line{opacity:1;animation:none}}