/* Fonts ship with the app (SIL Open Font License, see fonts/OFL-*.txt), so the store build
   looks right on first launch with no signal and nothing is requested from Google. */
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fonts/bricolage-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fonts/bricolage-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Young Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/young-serif-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Young Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url(fonts/young-serif-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* The light in the water, and how much of it falls from above (--sun) or rises from below (--rise).
   Registered so they fade between depths with the water. */
@property --glow{syntax:"<color>";inherits:true;initial-value:#A9EEE4}
@property --sun{syntax:"<percentage>";inherits:true;initial-value:0%}
@property --rise{syntax:"<percentage>";inherits:true;initial-value:6%}

:root{
  /* A dive down the water column: sunlit lagoon in the shallows, then open blue, the last of the
     light, the twilight zone, and midnight at the deep end. The light changes source on the way
     down: sunshine at the surface, living light in the deep (a jellyfish's violet, then the gold of
     an anglerfish's lure). Every water keeps text at 4.5:1 or better. */
  --d1:#146468; --d2:#004C5F; --d3:#03324F; --d4:#0D1A37; --d5:#060919;
  --g1:#A9EEE4; --g2:#8EDBE6; --g3:#93C3EA; --g4:#B9A6FF; --g5:#FFC75A;
  --ink:#EEF6F7;
  /* 86% keeps 4.5:1 on the brightest water, even where a light ray crosses it */
  --muted:color-mix(in srgb,var(--ink) 86%,transparent);
  --aqua:#6FD6D0;
  --buoy:#FFD447; --buoy-ink:#241B00;
  --ring:#FF5A4E;
  --glass:color-mix(in srgb,var(--ink) 6%,transparent);
  --line:color-mix(in srgb,var(--ink) 14%,transparent);
  --sheet:#0A1322; --sheet-line:color-mix(in srgb,var(--ink) 9%,transparent);
  --ui:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --serif:"Young Serif",Georgia,"Times New Roman",serif;
  --water:var(--d1); --glow:var(--g1); --sun:0%; --rise:6%;
  --wv:1; --fl:.85; --cu:.5;   /* how much surface, flow and current shows (see .ocean) */
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
html{background:var(--water)}
body{
  margin:0;font-family:var(--ui);font-size:17px;line-height:1.45;
  background:var(--water);color:var(--ink);
  transition:background-color .6s ease,--glow .6s ease,--sun .6s ease,--rise .6s ease;
  -webkit-tap-highlight-color:transparent;overflow:hidden;overscroll-behavior:none;
}
/* Sunlight from above fades as you go down and living light from below takes over. The shallows get
   no wash on top: that water is bright already, and the rays in .scene carry the sun. */
body[data-level="1"]{--water:var(--d1);--glow:var(--g1);--sun:0%;--rise:6%;--wv:1;--fl:.85;--cu:.5}
body[data-level="2"]{--water:var(--d2);--glow:var(--g2);--sun:5%;--rise:8%;--wv:.55;--fl:1;--cu:.65}
body[data-level="3"]{--water:var(--d3);--glow:var(--g3);--sun:8%;--rise:10%;--wv:.25;--fl:1;--cu:.8}
body[data-level="4"]{--water:var(--d4);--glow:var(--g4);--sun:6%;--rise:13%;--wv:0;--fl:.8;--cu:.95}
body[data-level="5"]{--water:var(--d5);--glow:var(--g5);--sun:0%;--rise:16%;--wv:0;--fl:.6;--cu:1}
html:has(body[data-level="2"]){--water:var(--d2)} html:has(body[data-level="3"]){--water:var(--d3)}
html:has(body[data-level="4"]){--water:var(--d4)} html:has(body[data-level="5"]){--water:var(--d5)}

/* Light falling from above and a glow rising from below, both the colour of the depth */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:
    radial-gradient(95% 42% at 50% -6%,color-mix(in srgb,var(--glow) var(--sun),transparent),transparent 72%),
    radial-gradient(75% 38% at 90% 106%,color-mix(in srgb,var(--glow) var(--rise),transparent),transparent 70%);
}
/* Fine grain so the dark reads as water at night, not a flat screen */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

button{font:inherit;color:inherit;cursor:pointer}
button:disabled{opacity:.35;cursor:default}
:focus-visible{outline:3px solid var(--buoy);outline-offset:3px}
[hidden]{display:none!important}
svg{width:22px;height:22px;flex:none}

.screen{
  position:fixed;inset:0;max-width:560px;margin:0 auto;
  display:flex;flex-direction:column;
  padding:calc(var(--safe-t) + 14px) 18px calc(var(--safe-b) + 16px);
}

.motes{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.motes i{
  position:absolute;left:var(--x);bottom:-8px;width:var(--s);height:var(--s);border-radius:50%;
  background:var(--glow);box-shadow:0 0 10px 1px var(--glow);opacity:0;
  animation:mote var(--t) linear var(--d) infinite;
}
@keyframes mote{
  0%{transform:translate(0,0);opacity:0} 12%{opacity:.55}
  50%{transform:translate(10px,-52vh)} 88%{opacity:.3} 100%{transform:translate(-6px,-104vh);opacity:0}
}

/* Scenery for each depth: light rays, the surface seen from below, distant life, darker water lower
   down. All five are drawn once in index.html and cross-fade with the water as the depth changes.
   Decoration only, and kept faint (rays at 6% or less) so text keeps its contrast. */
.scene{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.scene svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;visibility:hidden;
  transition:opacity .6s ease,visibility 0s .6s}   /* once faded out, it stops being painted at all */
body[data-level="1"] .sc-1,body[data-level="2"] .sc-2,body[data-level="3"] .sc-3,
body[data-level="4"] .sc-4,body[data-level="5"] .sc-5{opacity:1;visibility:visible;transition:opacity .6s ease,visibility 0s}

/* The water moving. Three bands, each a few thin looping strips (see index.html): waves at the surface,
   a flow of streaks through the middle, dark currents along the bottom. They only animate transform,
   which the GPU compositor does without repainting, and each strip is a thin layer, so the whole thing
   stays light on memory. How much of each shows depends on the depth: the surface fades out as you go
   down, the currents grow. Hidden bands stop painting and pause. Each strip's box (and its SVG viewBox) is
   trimmed to the rows that hold ink: the GPU keeps a texture for the whole box, so empty rows cost memory. */
.ocean{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.ocean .strip{position:absolute;left:0;width:150%;animation:drift-l var(--t,40s) linear infinite;transition:opacity .6s ease}
.ocean .strip svg,.swell svg{display:block;width:100%;height:100%}
@keyframes drift-l{from{transform:translateX(0)}to{transform:translateX(-33.3333%)}}
@keyframes drift-r{from{transform:translateX(-33.3333%)}to{transform:translateX(0)}}
/* Each strip carries its band's opacity itself. Set on a band holding several layers, opacity would make the
   compositor draw the band into an extra offscreen texture every frame first. */
.waves .strip{opacity:var(--wv)} .flow .strip{opacity:var(--fl)} .currents .strip{opacity:var(--cu)}
.waves,.flow,.currents{position:absolute;left:0;right:0;transition:visibility 0s}
.waves{top:0;height:34px}
.waves .w1{top:0;height:23px;--t:23s}
.waves .bob{position:absolute;left:0;right:0;top:4px;height:27px;animation:bob-sea 4.6s ease-in-out infinite alternate}
.waves .w2{top:0;height:27px;--t:15s;animation-name:drift-r}
@keyframes bob-sea{from{transform:translateY(-2px)}to{transform:translateY(3px)}}
.flow{inset:0}
.flow .f1{top:calc(30% + 8px);height:13px;--t:46s}
.flow .f2{top:calc(47% + 6px);height:12px;--t:62s;animation-name:drift-r}
.flow .f3{top:calc(63% + 8px);height:8px;--t:38s}
.currents{bottom:0;height:300px}
.currents .c1{bottom:169px;height:44px;--t:84s}
.currents .c2{bottom:108px;height:38px;--t:112s;animation-name:drift-r}
.currents .c3{bottom:157px;height:7px;--t:28s}
/* No surface to see at the bottom of the ocean: fade it out, then stop painting and moving it */
body[data-level="4"] .waves,body[data-level="5"] .waves{visibility:hidden;transition:visibility 0s .6s}
body[data-level="4"] .waves *,body[data-level="5"] .waves *{animation-play-state:paused}
/* The sunset covers the top of the home screen, so its surface waves would only waste work */
body:has(#home:not([hidden])) .waves{display:none}
/* Under the hand-off or a sheet there's nothing to see: hold the water still (saves the GPU) */
body:has(#passScreen:not([hidden])) :is(.ocean *,.swell *,.glint svg),
body:has(.sheet-wrap:not([hidden])) :is(.ocean *,.swell *,.glint svg){animation-play-state:paused}
/* Moving water off in Settings: everything stays where it is */
.still :is(.ocean *,.swell *,.glint svg){animation:none}

/* Sea life swims through now and then, a different creature at each depth, drawn in the same flat,
   geometric style as the scenery. Every layer animates one thing, transform or opacity only: .fish
   carries the swim across and the fade, .fish-bob the gentle wave, and the small parts (fins, bell,
   lure) their own loops. Creatures are drawn facing right. Moving parts pivot on their own box
   (transform-box: fill-box), so a drawing can change without retuning pixel origins. */
.sea{position:absolute;inset:0}
.fish{
  --o:.55;
  position:absolute;left:0;top:var(--y);opacity:0;will-change:transform,opacity;
  animation:fish-swim var(--dur) linear forwards;
}
.fish-bob{animation:fish-wave var(--wave) ease-in-out var(--phase) infinite alternate}
.fish svg{display:block;overflow:visible;width:var(--w);height:var(--h)}
.fish.rtl svg{transform:scaleX(-1)}
.fish .tail{transform-box:fill-box;transform-origin:100% 50%;animation:fish-tail var(--tw,.7s) ease-in-out var(--tp,0s) infinite alternate}
@keyframes fish-swim{
  0%{transform:translateX(var(--x0));opacity:0} 10%,90%{opacity:var(--o)}
  100%{transform:translateX(var(--x1));opacity:0}
}
@keyframes fish-wave{from{transform:translateY(calc(var(--amp) * -1))}to{transform:translateY(var(--amp))}}
@keyframes fish-tail{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
@keyframes fish-glow{from{opacity:.3}to{opacity:1}}

/* 1 Shallows: a flying fish. Swims with its fins folded, leaps in an arc with them spread, glides,
   dips back in. */
.k-flying{--o:.6}
.k-flying .fish-bob{animation:fish-leap var(--dur) linear forwards}
.k-flying .pitch{transform-box:fill-box;transform-origin:50% 56%;animation:fish-pitch var(--dur) ease-in-out forwards}
.k-flying .wings{transform-box:fill-box;transform-origin:98% 98%;animation:fish-wings var(--dur) ease-in-out forwards}
.k-flying .wings.far{transform-origin:100% 0}
.k-flying .tail{transform-origin:100% 48%}
@keyframes fish-leap{
  0%,26%{transform:translateY(0);animation-timing-function:cubic-bezier(.2,.7,.35,1)}
  46%{transform:translateY(calc(var(--leap) * -1));animation-timing-function:ease-in-out}
  56%{transform:translateY(calc(var(--leap) * -.92));animation-timing-function:cubic-bezier(.6,0,.85,.4)}
  74%,100%{transform:none}
}
@keyframes fish-pitch{
  0%,26%{transform:rotate(0)} 42%{transform:rotate(-24deg)} 52%{transform:rotate(-6deg)}
  64%{transform:rotate(10deg)} 74%{transform:rotate(26deg)} 82%,100%{transform:rotate(0)}
}
@keyframes fish-wings{
  0%,27%{opacity:0;transform:scale(.15)} 34%,60%{opacity:1;transform:scale(1)} 68%,100%{opacity:0;transform:scale(.15)}
}
.ripple{
  position:absolute;width:38px;height:10px;margin:-5px 0 0 -19px;border-radius:50%;opacity:0;
  border:1.5px solid color-mix(in srgb,var(--glow) 50%,#EAF7FA);animation:fish-ripple 1s ease-out var(--rd) both;
}
@keyframes fish-ripple{0%{opacity:0;transform:scale(.3)} 15%{opacity:.4} 100%{opacity:0;transform:scale(1.7)}}

/* 2 Wading: a green sea turtle, rowing with its front flippers. */
.k-turtle{--o:.5}
.k-turtle .fin-l,.k-turtle .fin-r{transform-box:fill-box;transform-origin:77% 98%;animation:turtle-row 2.6s ease-in-out infinite alternate}
.k-turtle .fin-r{transform-origin:77% 2%;animation-name:turtle-row-r}
@keyframes turtle-row{from{transform:rotate(-14deg)}to{transform:rotate(8deg)}}
@keyframes turtle-row-r{from{transform:rotate(14deg)}to{transform:rotate(-8deg)}}

/* 3 Swimming: a manta ray, the slowest of them all. Seen from above, its wings rise and fall. */
.k-manta{--o:.7}
.k-manta .flap{transform-box:fill-box;transform-origin:50% 50%;animation:manta-flap 3s ease-in-out infinite alternate}
@keyframes manta-flap{from{transform:scaleY(1)}to{transform:scaleY(.82)}}

/* 4 Diving: a jellyfish drifting through, its bell pulsing and its rim lit. */
.k-jelly{--o:.85}
.k-jelly .bell,.k-jelly .tents{transform-box:fill-box;transform-origin:50% 0}
.k-jelly .bell{animation:jelly-pulse 2.4s ease-in-out infinite alternate}
.k-jelly .tents{animation:jelly-sway 3.4s ease-in-out infinite alternate}
.k-jelly .lights{animation:fish-glow 1.8s ease-in-out infinite alternate}
.k-jelly .halo{animation:fish-glow 3s ease-in-out infinite alternate}
@keyframes jelly-pulse{from{transform:scale(1,1)}to{transform:scale(1.06,.9)}}
@keyframes jelly-sway{from{transform:skewX(-5deg)}to{transform:skewX(5deg)}}

/* 5 The deep end: an anglerfish. All but invisible, except for the lure. It drifts, pauses, drifts. */
.k-angler{--o:1;animation:fish-hover var(--dur) ease-in-out forwards}
.k-angler .tail{animation-duration:1.6s}
.k-angler .lure{transform-box:fill-box;transform-origin:0 66%;animation:fish-lure 3.2s ease-in-out infinite alternate}
.k-angler .halo{animation:fish-glow 2.8s ease-in-out .3s infinite alternate}
.k-angler .bulb{animation:fish-glow 2.2s ease-in-out infinite alternate}
@keyframes fish-lure{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
@keyframes fish-hover{
  0%{transform:translateX(var(--x0));opacity:0} 8%,92%{opacity:var(--o)}
  28%,40%{transform:translateX(calc(var(--x0) + var(--span) * .3))}
  62%,72%{transform:translateX(calc(var(--x0) + var(--span) * .66))}
  100%{transform:translateX(var(--x1));opacity:0}
}

/* ---------- shared controls ---------- */
.icon-btn{
  width:44px;height:44px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line);background:var(--glass);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.pill{
  min-height:44px;background:var(--glass);border:1px solid var(--line);border-radius:999px;
  padding:8px 16px;font-weight:600;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.btn-buoy{
  background:linear-gradient(180deg,#FFE27C,var(--buoy) 50%,#F4BE2A);color:var(--buoy-ink);border:0;border-radius:999px;
  min-height:48px;padding:12px 22px;font-weight:700;font-size:1rem;
  box-shadow:0 12px 32px -12px color-mix(in srgb,var(--buoy) 75%,transparent),inset 0 1px 0 rgba(255,255,255,.55);
}
.btn-buoy:active{transform:translateY(1px)}
.wide{width:100%}
.ghost{
  border:1px solid var(--line);background:var(--glass);
  border-radius:18px;font-weight:600;
}
.ghost.small{padding:10px 16px;font-size:.92rem;border-radius:999px;min-height:44px}
.link{background:none;border:0;padding:8px;color:var(--muted);font-size:.85rem;text-decoration:underline;text-underline-offset:3px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  min-height:44px;border:1px solid var(--line);background:var(--glass);
  border-radius:999px;padding:9px 17px;font-weight:600;font-size:1rem;
  transition:border-color .2s,background-color .2s,transform .12s;
}
.chip:hover{border-color:color-mix(in srgb,var(--glow) 60%,transparent);background:color-mix(in srgb,var(--glow) 12%,transparent)}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--water);border-color:var(--ink)}

/* ---------- home ---------- */
.home{overflow-y:auto;-webkit-overflow-scrolling:touch;padding-top:calc(var(--safe-t) + 18px)}
.home-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.kicker{margin:0;font-size:.76rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--glow)}
/* A sunset over the water behind the title. The sky ends exactly at the title's waterline (57%),
   so "Deep" sits in the sky and "End" in the sea, whatever size the title is. */
.horizon{position:relative;margin:0 0 18px}
.sky,.glint{position:absolute;left:-18px;right:-18px;z-index:-1;pointer-events:none}
.sky{top:calc(-120px - var(--safe-t));bottom:43%}
.glint{top:57%;bottom:0}
.sky svg,.glint svg{display:block;width:100%;height:100%}
/* The sea's moving edge at the horizon (filled with the water colour so its crests rise into the sky),
   and the sun's reflection shimmering on it. Transform and opacity only, like .ocean. */
.swell{position:absolute;left:-18px;right:-18px;top:calc(57% - 3px);height:10px;overflow:hidden;z-index:-1;pointer-events:none}
.swell .strip{position:absolute;left:0;top:0;width:150%;height:100%;animation:drift-l 13s linear infinite}
.swell .tint{fill:var(--water)}   /* the sea below the crest, the same colour as the water */
.glint svg{animation:glint 3.4s ease-in-out infinite alternate}
@keyframes glint{from{opacity:.62;transform:translateX(-3px)}to{opacity:1;transform:translateX(3px)}}
/* On tablets and desktops the column is narrower than the screen: soften the sky's sides into the water */
@media (min-width:600px){
  .sky,.glint{-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
}
.title{
  font-weight:800;font-size:clamp(4.2rem,23vw,6.8rem);line-height:.86;letter-spacing:-.055em;margin:0;
  /* the waterline cuts through the word */
  background:linear-gradient(to bottom,var(--ink) 0 57%,color-mix(in srgb,var(--glow) 80%,#fff) 57% 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 24px color-mix(in srgb,var(--glow) 22%,transparent));
}
.lede{margin:0 0 30px;max-width:28ch;font-size:1.08rem;color:var(--muted)}
.resume{
  display:flex;align-items:center;gap:12px;text-align:left;width:100%;
  /* darker than the water around it, so its small glow-coloured label stays readable in the sunlit shallows */
  background:linear-gradient(120deg,color-mix(in srgb,var(--glow) 12%,transparent),transparent),rgba(2,12,22,.24);
  border:1px solid color-mix(in srgb,var(--glow) 42%,transparent);
  border-radius:20px;padding:14px 16px 14px 18px;margin:0 0 30px;
}
.resume-txt{flex:1;display:flex;flex-direction:column;gap:2px}
.resume svg{color:var(--glow)}
.resume-k{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
.resume-v{font-weight:600}
.pick-q{font-family:var(--serif);font-weight:400;font-size:1.55rem;line-height:1.2;margin:0 0 16px}
.group{margin:0 0 18px}
.group-h{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:0 0 9px}
.custom{display:flex;gap:10px;margin:8px 0 32px}
.custom input,.name-row input,.field textarea{
  flex:1;min-width:0;font:inherit;padding:12px 18px;border-radius:999px;min-height:48px;
  border:1px solid var(--line);background:var(--glass);color:inherit;transition:border-color .2s;
}
.custom input:focus,.name-row input:focus,.field textarea:focus{border-color:color-mix(in srgb,var(--glow) 70%,transparent)}
.custom input::placeholder,.name-row input::placeholder,.field textarea::placeholder{color:inherit;opacity:.45}
.small-h{font-size:1rem;font-weight:700;margin:0 0 10px}
.small-h span,.field span{font-weight:400;color:var(--muted)}
.name-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.name-row label{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--muted)}
.name-row input{width:100%;color:var(--ink)}
.foot{margin:auto 0 0;padding-top:28px;text-align:center}

/* ---------- play ---------- */
.topbar{display:flex;align-items:center;gap:8px}
.topbar #changeWho{flex:1;min-width:0;text-align:left}
.stage{flex:1;display:grid;grid-template-columns:58px 1fr;gap:16px;min-height:0;margin:14px 0}

.gauge{position:relative;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:999px;cursor:grab}
.gauge .end{position:absolute;left:0;right:0;text-align:center;font-size:.75rem;font-weight:600;opacity:.7}
.gauge .end.top{top:0}.gauge .end.bot{bottom:0}
/* The depth slider is the app's identity: keep it exactly as the original artifact drew it */
.rail{position:absolute;top:30px;bottom:30px;left:50%;width:0}
.track{
  position:absolute;top:0;bottom:0;left:-4px;width:8px;border-radius:8px;
  background:linear-gradient(to bottom,#6FD6D0,#2F9FB0,#1F5E8C,#16306A,#0A1236);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--ink) 25%,transparent);
}
.knob{
  position:absolute;left:-21px;width:42px;height:42px;margin-top:-21px;border-radius:50%;
  background:
    radial-gradient(circle,var(--water) 0 7px,transparent 7.5px),
    conic-gradient(#fff 0 25%,#FF5A4E 0 50%,#fff 0 75%,#FF5A4E 0);
  box-shadow:0 3px 10px rgba(0,20,40,.35);
  transition:top .35s cubic-bezier(.3,1.4,.5,1);pointer-events:none;
}
.gauge.dragging .knob{transition:none}

/* The card scrolls if a long question and its follow-up outgrow a small phone. The two
   spacers centre it otherwise, without clipping the top when it does scroll. */
.card{display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto;padding:4px 2px 4px 0}
.card::before,.card::after{content:"";flex:1 0 0}
.meta{font-size:.76rem;margin:0 0 8px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
.level-name{font-weight:800;font-size:1.4rem;letter-spacing:-.02em;margin:0 0 20px}
.level-n{font-size:.82rem;font-weight:600;color:var(--muted);letter-spacing:0;margin-left:4px}
.question{
  font-family:var(--serif);font-weight:400;font-size:clamp(1.65rem,7vw,2.4rem);
  line-height:1.2;margin:0;max-width:22ch;text-wrap:pretty;
  text-shadow:0 0 36px color-mix(in srgb,var(--glow) 30%,transparent);
}
.card.moment .question{font-size:clamp(1.45rem,6vw,2rem)}
/* Question transitions (a setting): the old question drifts up and away, the new one rises from below */
.card .question,.card .meta,.card .left,.card .follow{transition:opacity .19s ease-in,transform .19s ease-in}
.card.leaving .question{opacity:0;transform:translateY(-16px)}
.card.leaving .meta,.card.leaving .left,.card.leaving .follow{opacity:0}
.question.enter{animation:rise .5s cubic-bezier(.2,.8,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.follow{margin-top:20px}
.dig{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px 8px 13px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--glow) 45%,transparent);background:color-mix(in srgb,var(--glow) 10%,transparent);
  font-weight:600;font-size:.92rem;
}
.dig svg{width:18px;height:18px;color:var(--glow)}
.dig[aria-expanded="true"]{background:transparent;border-color:var(--line);color:var(--muted)}
.follow-q{
  margin:14px 0 0;padding:2px 0 2px 14px;border-left:2px solid var(--glow);max-width:24ch;
  font-family:var(--serif);font-size:1.2rem;line-height:1.3;animation:rise .45s cubic-bezier(.2,.8,.3,1) both;
}
.follow-k{display:block;font-family:var(--ui);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--glow);margin-bottom:4px}
.left{margin:18px 0 0;font-size:.88rem;color:var(--muted)}
.reset{align-self:flex-start;margin-top:18px}

.actions{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.actions .ghost{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:10px 4px;font-size:.82rem;min-height:64px;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  transition:background-color .2s,border-color .2s;
}
.actions .ghost svg{color:var(--glow)}
.actions .ghost[aria-pressed="true"]{background:var(--ink);color:var(--water);border-color:var(--ink)}
.actions .ghost[aria-pressed="true"] svg{color:inherit}
/* After a few answers at one depth, Deeper glows: an invitation, never a push */
#deeper.nudge{
  border-color:color-mix(in srgb,var(--glow) 75%,transparent);background:color-mix(in srgb,var(--glow) 16%,transparent);
  animation:nudge 1.8s ease-out 3;
}
@keyframes nudge{
  from{box-shadow:0 0 0 0 color-mix(in srgb,var(--glow) 55%,transparent)}
  to{box-shadow:0 0 0 14px color-mix(in srgb,var(--glow) 0%,transparent)}
}
.next{width:100%;padding:17px;font-size:1.1rem;border-radius:20px;min-height:58px;transition:box-shadow .6s ease}
/* Down where the only light is living light, the button glows like the anglerfish's lure */
body[data-level="4"] .next{box-shadow:0 12px 32px -12px color-mix(in srgb,var(--buoy) 75%,transparent),0 0 28px color-mix(in srgb,var(--buoy) 22%,transparent),inset 0 1px 0 rgba(255,255,255,.55)}
body[data-level="5"] .next{box-shadow:0 0 0 6px color-mix(in srgb,var(--buoy) 10%,transparent),0 0 44px color-mix(in srgb,var(--buoy) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.55)}

/* ---------- hand-off: the next question waits underwater ---------- */
.surface{
  --sea:color-mix(in srgb,var(--water) 55%,#000);
  position:fixed;inset:0;z-index:20;overflow:hidden;
  display:grid;grid-template-rows:1fr 1fr;
  background:
    radial-gradient(70% 45% at 50% 0%,color-mix(in srgb,var(--glow) 22%,transparent),transparent 72%),
    color-mix(in srgb,var(--water) 94%,var(--glow));
  animation:fade .3s ease both;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.surface-sky{
  display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;
  padding:calc(var(--safe-t) + 24px) 24px 104px;
}
.surface-k{margin:0 0 12px;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--glow)}
.surface-h{margin:0;font-weight:800;font-size:clamp(2.3rem,11vw,3.4rem);letter-spacing:-.045em;line-height:.98;max-width:11ch;overflow-wrap:anywhere}
.surface-sea{position:relative;background:var(--sea);transform:translateY(calc(var(--p,0) * -14px))}
.surface .wave{position:absolute;left:0;bottom:calc(100% - 1px);width:200%;height:26px;animation:drift 7s linear infinite}
.w-fill{fill:var(--sea)}
.w-crest{fill:none;stroke:color-mix(in srgb,var(--glow) 70%,transparent);stroke-width:2;vector-effect:non-scaling-stroke}
@keyframes drift{to{transform:translateX(-50%)}}
.bubble{
  position:absolute;bottom:-12px;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;
  border:1.5px solid color-mix(in srgb,var(--glow) 55%,transparent);opacity:0;
  animation:bubble var(--t) ease-in var(--d) infinite;
}
@keyframes bubble{
  0%{transform:translate(0,0);opacity:0} 15%{opacity:.8}
  50%{transform:translate(6px,-22vh)} 100%{transform:translate(-4px,-46vh);opacity:0}
}
.hold{
  position:absolute;left:50%;top:50%;width:132px;height:132px;margin:-66px 0 0 -66px;
  border:0;padding:0;background:transparent;border-radius:50%;touch-action:none;
  animation:bob 2.6s ease-in-out infinite;
}
.hold.holding{animation-play-state:paused}
.hold .hold-meter{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.hm-track{fill:none;stroke:color-mix(in srgb,var(--ink) 16%,transparent);stroke-width:5}
.hm-fill{fill:none;stroke:var(--buoy);stroke-width:5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.hold-buoy{
  position:absolute;inset:20px;border-radius:50%;
  background:conic-gradient(#fff 0 25%,#FF5A4E 0 50%,#fff 0 75%,#FF5A4E 0);
  -webkit-mask:radial-gradient(circle,transparent 0 31%,#000 32%);mask:radial-gradient(circle,transparent 0 31%,#000 32%);
  box-shadow:0 6px 18px rgba(0,10,30,.45);
  transform:translateY(calc(var(--p,0) * -10px)) scale(calc(1 + var(--p,0) * .1));
}
.surface-hint{
  position:absolute;left:24px;right:24px;top:calc(50% + 86px);margin:0;text-align:center;
  font-weight:600;opacity:.75;transition:opacity .2s;
}
.surface.holding .surface-hint{opacity:.35}
.surface.out{animation:surface-out .5s cubic-bezier(.55,0,.8,.3) forwards;pointer-events:none}
.surface.out .hold-buoy{transition:transform .5s ease-in,opacity .5s;transform:translateY(-60px) scale(1.25);opacity:0}
@keyframes surface-out{to{transform:translateY(-100%)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-7px) rotate(4deg)}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- sheets ---------- */
.scrim{position:fixed;inset:0;background:rgba(1,4,12,.62);z-index:30;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:31;max-height:86%;
  background:linear-gradient(180deg,color-mix(in srgb,var(--glow) 8%,var(--sheet)),var(--sheet) 180px);
  border:1px solid var(--line);border-bottom:0;border-radius:26px 26px 0 0;
  box-shadow:0 -24px 60px rgba(0,0,0,.5);
  padding:12px 20px calc(20px + var(--safe-b));
  display:flex;flex-direction:column;max-width:560px;margin:0 auto;
  animation:up .3s ease both;
}
.sheet::before{content:"";flex:none;width:38px;height:4px;border-radius:4px;background:var(--line);margin:0 auto 10px}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.sheet h2{margin:0;font-family:var(--serif);font-weight:400;font-size:1.5rem}
.x{background:transparent;border:0;font-size:.95rem;font-weight:600;padding:10px 8px;color:var(--muted);min-height:44px}
.list{list-style:none;margin:0;padding:0;overflow-y:auto}
.list li{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--sheet-line)}
.list li p{margin:0;flex:1;font-family:var(--serif);font-size:1.1rem;line-height:1.3}
.list li small{display:block;font-family:var(--ui);font-size:.85rem;color:var(--muted);margin-top:4px}
/* A dot in the slider's colour for the depth the question came from */
.list li small[data-level]::before{
  content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:7px;vertical-align:1px;
  background:var(--dot);box-shadow:0 0 0 1.5px color-mix(in srgb,var(--ink) 55%,transparent);
}
.list small[data-level="1"]{--dot:#6FD6D0} .list small[data-level="2"]{--dot:#2F9FB0} .list small[data-level="3"]{--dot:#1F5E8C}
.list small[data-level="4"]{--dot:#16306A} .list small[data-level="5"]{--dot:#0A1236}
.li-btns{display:flex;flex-direction:column;align-items:flex-end}
a.ghost{color:inherit;text-decoration:none;display:inline-flex;align-items:center}
.native .web-only{display:none}
.empty{color:var(--muted);font-family:var(--ui)!important;font-size:1rem!important}

.note-q{font-family:var(--serif);font-size:1.15rem;line-height:1.3;margin:0 0 16px}
#noteReasons{margin-bottom:16px}
.field{display:flex;flex-direction:column;gap:6px;font-size:.9rem;font-weight:600;margin-bottom:14px}
.field textarea{border-radius:16px;resize:vertical;font-weight:400;font-size:1rem;line-height:1.4}
.hint{font-size:.85rem;color:var(--muted);margin:10px 0 0;text-align:center}

.menu-body{overflow-y:auto;margin:0 -20px;padding:0 20px}
.block{padding:16px 0;border-top:1px solid var(--sheet-line)}
.block h3{margin:0 0 8px;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--glow)}
.block p{margin:0 0 12px}
.row{display:flex;gap:10px;align-items:center}
.toggle{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:44px;margin-bottom:10px}
.toggle input{
  appearance:none;-webkit-appearance:none;flex:none;width:52px;height:32px;border-radius:999px;margin:0;
  background:color-mix(in srgb,var(--ink) 20%,transparent);position:relative;cursor:pointer;transition:background .2s;
}
.toggle input::after{
  content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s;
}
.toggle input:checked{background:var(--glow)}
.toggle input:checked::after{transform:translateX(20px)}
.change{margin-bottom:14px}
.change b{display:block;margin-bottom:4px}
.change ul{margin:0;padding-left:20px;color:var(--muted)}
.change li{margin-bottom:4px}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:16px;right:16px;bottom:calc(var(--safe-b) + 16px);z-index:40;
  max-width:520px;margin:0 auto;display:flex;align-items:center;gap:12px;
  background:color-mix(in srgb,#0E1A2E 94%,transparent);color:var(--ink);
  border:1px solid var(--line);border-radius:18px;padding:12px 12px 12px 18px;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  font-weight:600;box-shadow:0 14px 40px rgba(0,0,0,.5);animation:up .3s ease both;
}
.toast span{flex:1}
.toast-btn{background:var(--buoy);color:var(--buoy-ink);border:0;border-radius:999px;padding:10px 16px;font-weight:700;min-height:44px}

/* ---------- privacy / help pages ---------- */
body.doc-page{overflow:auto}
.doc{position:relative;max-width:640px;margin:0 auto;padding:calc(var(--safe-t) + 20px) 20px calc(var(--safe-b) + 40px)}
.doc h1{font-family:var(--serif);font-weight:400;font-size:2.3rem;letter-spacing:-.01em;line-height:1.08;margin:8px 0 6px}
.doc h2{font-size:1.15rem;margin:28px 0 8px}
.doc a{color:var(--glow)}
.doc .back{font-weight:600;text-decoration:none}
.doc .muted{color:var(--muted);margin-top:0}
.doc li{margin-bottom:4px}

@media (min-height:760px){ .stage{margin:24px 0} }
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }