:root{
  /* Steady Ground identity: calm confidence. Ivory ground, charcoal text, forest for primary actions,
     sage for supporting surfaces, terracotta only for the mark and small celebratory moments. */
  --bg:#F7F5F0; --surface:#FFFFFF; --surface-2:#EDEAE2; --line:#D8D3C8;
  --fg:#26342F; --muted:#55665F;
  --accent:#24584F; --accent-fg:#F7F5F0; --accent-soft:#DCE8E0;
  --sage:#A9C5B3; --sage-soft:#E4EDE7;
  --good:#24584F; --good-soft:#DCE8E0;
  --warn:#8A5A2B; --warn-soft:#F1E6D6;
  --alert:#9A3F3A; --alert-soft:#F4E0DC;
  --terra:#C9856B;
  --series2:#C9856B;
  --font-display:'DM Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:'DM Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1B2622; --surface:#26342F; --surface-2:#2E3D37; --line:#3E4F48;
    --fg:#F0EEE8; --muted:#A9B8B0;
    --accent:#8FC2A8; --accent-fg:#1B2622; --accent-soft:#2E4A41;
    --sage:#5F8572; --sage-soft:#2A3B34;
    --good:#8FC2A8; --good-soft:#2E4A41;
    --warn:#E0B37F; --warn-soft:#3C3124;
    --alert:#F0A39A; --alert-soft:#3F2A27;
    --terra:#D9997F;
    --series2:#D9997F;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1B2622; --surface:#26342F; --surface-2:#2E3D37; --line:#3E4F48;
  --fg:#F0EEE8; --muted:#A9B8B0;
  --accent:#8FC2A8; --accent-fg:#1B2622; --accent-soft:#2E4A41;
  --sage:#5F8572; --sage-soft:#2A3B34;
  --good:#8FC2A8; --good-soft:#2E4A41;
  --warn:#E0B37F; --warn-soft:#3C3124;
  --alert:#F0A39A; --alert-soft:#3F2A27;
  --terra:#D9997F;
  --series2:#D9997F;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:17px; line-height:1.55; font-weight:400;
  padding-block:0 112px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
  -webkit-text-size-adjust:100%;
}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:10; background:var(--bg)}
[hidden]{display:none !important}
img{max-width:100%}
.wrap{max-width:560px; margin:0 auto}
h1,h2,h3,p{margin:0}
h1{font-family:var(--font-display); font-weight:600; font-size:28px; line-height:1.2; text-wrap:balance; letter-spacing:-.01em}
h2{font-family:var(--font-display); font-weight:600; font-size:21px; line-height:1.25; text-wrap:balance}
h3{font-size:18px; line-height:1.3; font-weight:600}
.eyebrow{font-size:15px; font-weight:500; color:var(--muted)}
.hint,.muted{color:var(--muted)}
.hint{font-size:15px}
.card .hint,.card .meta{font-size:15px}
.ivory{color:var(--accent-fg)}
.top{display:flex; align-items:center; gap:12px; padding-block:18px 10px}
.mark{width:40px; height:40px; flex:none}
.brand{font-family:var(--font-display); font-weight:600; font-size:22px; line-height:1.1; letter-spacing:-.01em}
.top{justify-content:space-between}
.top-left{display:flex; align-items:center; gap:12px; min-width:0}
/* The logo and name are one button back to Home. */
.home-link{background:none; border:0; padding:4px 6px 4px 0; margin:0; font:inherit; color:inherit; text-align:left; cursor:pointer; border-radius:12px; min-height:44px}
.home-link:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.gear{min-width:44px; height:44px; flex:none; border-radius:12px; border:1px solid var(--line); background:var(--surface); color:var(--fg); cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:0 12px; font:inherit; font-size:15px; font-weight:600}
.gear svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.stack{display:flex; flex-direction:column; gap:16px}
.stack-s{display:flex; flex-direction:column; gap:10px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:0 1px 2px rgba(38,52,47,.04); padding:18px; display:flex; flex-direction:column; gap:12px; min-width:0}
.card-alert{background:var(--alert-soft); border-color:var(--alert)}
.card-good{background:var(--sage-soft); border-color:var(--sage)}
.card-accent{background:var(--sage-soft); border-color:var(--sage)}
.row{display:flex; flex-wrap:wrap; gap:10px}
.btn{font:inherit; font-weight:600; font-size:17px; min-height:50px; padding:10px 18px; border-radius:12px; border:1.5px solid var(--accent); background:transparent; color:var(--accent); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; text-align:center; text-decoration:none}
.btn-primary{background:var(--accent); color:var(--accent-fg)}
.btn-quiet{border-color:var(--line); color:var(--fg)}
.btn-danger{border-color:var(--alert); color:var(--alert)}
.btn-wide{width:100%}
.btn:disabled{opacity:.5; cursor:default}
.link{font:inherit; font-weight:700; background:none; border:0; padding:10px 0; min-height:44px; color:var(--muted); text-decoration:underline; cursor:pointer; text-align:left}
.link-danger{color:var(--alert)}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font:inherit; min-height:44px; padding:8px 14px; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--fg); cursor:pointer; text-align:left}
.chip[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); font-weight:700}
.chip[aria-pressed="true"]::before{content:"\2713"; margin-right:6px}
.chip-radio[aria-pressed="true"]::before{content:"\25CF"}
.field{display:flex; flex-direction:column; gap:8px}
.lbl{font-weight:700}
.lbl-row{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.val{color:var(--muted); font-weight:700; font-variant-numeric:tabular-nums}
.anchors{display:flex; justify-content:space-between; font-size:14px; color:var(--muted)}
input[type="text"],input[type="number"],input[type="datetime-local"],input[type="date"],textarea,select{font:inherit; color:var(--fg); background:var(--bg); border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; min-height:48px; width:100%; min-width:0}
textarea{min-height:96px; resize:vertical}
input[type="range"]{width:100%; height:32px; accent-color:var(--accent)}
.seg{display:flex; gap:4px; background:var(--surface-2); padding:4px; border-radius:14px}
.seg button{flex:1; min-height:44px; border:0; border-radius:10px; background:transparent; font:inherit; font-size:15px; font-weight:700; color:var(--muted); cursor:pointer; padding:4px 2px}
.seg button[aria-selected="true"]{background:var(--surface); color:var(--fg); box-shadow:0 0 0 1px var(--line)}
.scale{display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
.scale-11{grid-template-columns:repeat(6,1fr)}
.scale-3{grid-template-columns:repeat(3,1fr)}
.sc{min-height:52px; font:inherit; font-size:20px; font-weight:700; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); color:var(--fg); cursor:pointer}
.sc-s{min-height:46px; font-size:17px}
.sc[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-fg)}
.list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.item{padding:14px 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:6px; min-width:0}
.item:first-child{border-top:0; padding-top:0}
.item-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.item-head strong,.item-head h3{min-width:0; overflow-wrap:anywhere}
.pill{display:inline-block; padding:2px 10px; border-radius:999px; background:var(--accent-soft); font-size:14px; font-weight:700; white-space:nowrap}
.pill-warn{background:var(--warn-soft)}
.pill-good{background:var(--good-soft)}
.pill-alert{background:var(--alert-soft)}
.meta{font-size:15px; color:var(--muted)}
.prose{display:flex; flex-direction:column; gap:12px; max-width:65ch}
.prose ul{margin:0; padding-left:22px; display:flex; flex-direction:column; gap:6px}
.prose blockquote{margin:0; padding:12px 16px; border-left:4px solid var(--sage); background:var(--sage-soft); border-radius:0 12px 12px 0; font-size:18px; font-weight:500}
.bar{display:block; width:100%; height:10px; background:var(--surface-2); border-radius:999px; overflow:hidden}
.bar span{display:block; height:100%; background:var(--accent); border-radius:999px}
.dots{display:flex; gap:8px}
.dotcol{display:flex; flex-direction:column; align-items:center; gap:2px; font-size:14px; color:var(--muted)}
.dot{width:22px; height:22px; border-radius:50%; border:2px solid var(--line)}
.dot-on{background:var(--good); border-color:var(--good)}
.check{width:44px; height:44px; flex:none; border-radius:12px; border:2px solid var(--line); background:var(--surface); color:var(--accent-fg); cursor:pointer; font:inherit; font-weight:700; font-size:20px}
.check[aria-pressed="true"]{background:var(--good); border-color:var(--good)}
.plan-row{display:flex; align-items:center; gap:12px}
.plan-text{flex:1; min-width:0; overflow-wrap:anywhere}
.x{width:44px; height:44px; flex:none; border:0; background:none; font:inherit; font-size:22px; color:var(--muted); cursor:pointer}
.chart{width:100%; height:auto; display:block}
.chart .grid{stroke:var(--line); stroke-width:1}
.chart .ax{fill:var(--muted); font-size:13px; font-family:var(--font-body)}
.chart .barr{fill:var(--accent)}
.chart .ln1{stroke:var(--accent); fill:none; stroke-width:2.5}
.chart .ln2{stroke:var(--series2); fill:none; stroke-width:2.5; stroke-dasharray:6 4}
.chart .m1{fill:var(--accent)}
.chart .m2{fill:var(--series2)}
.legend{display:flex; gap:16px; font-size:15px; color:var(--muted)}
.sw{display:inline-block; width:12px; height:12px; margin-right:6px; vertical-align:-1px}
.sw1{background:var(--accent); border-radius:50%}
.sw2{background:var(--series2)}
.breath{display:grid; place-items:center; height:290px; position:relative}
.orb{width:250px; height:250px; border-radius:50%; background:var(--accent-soft); border:3px solid var(--accent); transform:scale(.55); transition:transform .15s linear}
.breath-text{position:absolute; text-align:center; display:flex; flex-direction:column; align-items:center}
.breath-text .big{font-family:var(--font-display); font-size:56px; line-height:1; font-variant-numeric:tabular-nums}
.breath-text .ph{font-weight:700; font-size:20px}
.bigtext{font-family:var(--font-display); font-size:24px; line-height:1.3; text-wrap:balance; font-weight:500}
.exnum{font-family:var(--font-display); font-size:44px; font-variant-numeric:tabular-nums}
.tool-btn{font:inherit; text-align:left; width:100%; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px 18px; color:var(--fg); cursor:pointer; display:flex; flex-direction:column; gap:4px; min-height:64px}
.tool-btn .t{font-weight:600; font-size:18px}
.door{background:var(--accent); color:var(--accent-fg); border-color:var(--accent); flex-direction:row; align-items:center; justify-content:space-between; gap:12px}
.door .meta{color:var(--accent-fg); opacity:.85}
.door-soft{background:var(--sage-soft); border-color:var(--sage); color:var(--fg)}
.door-soft .meta{color:var(--muted); opacity:1}
.door .t{display:flex; flex-direction:column; gap:2px; min-width:0}
.door .chev{flex:none; width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.pin{width:40px; height:40px; flex:none; border-radius:10px; border:1px solid var(--line); background:var(--surface); color:var(--muted); cursor:pointer; display:grid; place-items:center}
.pin[aria-pressed="true"]{color:var(--accent); border-color:var(--accent); background:var(--accent-soft)}
.pin svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.tool-row{display:flex; gap:10px; align-items:stretch}
.tool-row .tool-btn{flex:1; min-width:0}
.tool-row .pin{align-self:center}
.tool-btn .item-head{width:100%}
.sess{display:flex; gap:14px; align-items:flex-start}
.sess-n{flex:none; width:44px; height:44px; border-radius:12px; background:var(--accent-soft); color:var(--accent); font-family:var(--font-display); font-weight:600; font-size:20px; display:grid; place-items:center}
.sess-n.done{background:var(--good); color:var(--accent-fg)}
.sess-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px}
.tabs{position:fixed; left:0; right:0; bottom:0; z-index:20; background:var(--surface); border-top:1px solid var(--line); padding:6px max(8px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(8px, env(safe-area-inset-left, 0px))}
.tabs-in{max-width:560px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:4px}
.tab{font:inherit; font-size:14px; font-weight:600; border:0; background:transparent; color:var(--muted); min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border-radius:12px; cursor:pointer; padding:0 2px}
.tab[aria-current="page"]{color:var(--accent); background:var(--accent-soft)}
.tab svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.avatar{width:72px; height:72px; border-radius:50%; background:var(--accent); color:var(--accent-fg); display:grid; place-items:center; font-family:var(--font-display); font-size:30px; font-weight:600; flex:none}
.swatches{display:flex; gap:10px}
.swatch{width:44px; height:44px; border-radius:50%; border:3px solid transparent; cursor:pointer; padding:0}
.swatch[aria-pressed="true"]{border-color:var(--fg)}
.feel-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.feel-btn{font:inherit; min-height:64px; border-radius:14px; border:1.5px solid var(--line); background:var(--surface); color:var(--fg); cursor:pointer; font-weight:700; font-size:18px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px}
.feel-btn small{font-weight:400; font-size:14px; color:var(--muted)}
.feel-btn[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent)}
.timeline{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.tl-day{display:flex; flex-direction:column; gap:6px}
.tl-item{display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-top:1px solid var(--line)}
.tl-item:first-of-type{border-top:0}
.tl-ic{width:28px; height:28px; flex:none; border-radius:8px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent)}
.tl-ic svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.tl-text{flex:1; min-width:0; overflow-wrap:anywhere}
.breath{display:grid; place-items:center; height:300px; position:relative}
.orb-glow{position:absolute; width:260px; height:260px; border-radius:50%; background:var(--accent-soft); opacity:.5; transform:scale(.55)}
/* Bilateral stimulation. The dot is placed by script on every frame rather than by a CSS
   animation, so the sweep is unaffected by the reduced-motion rules below: here, as with
   the breathing circle, the movement is the exercise rather than decoration. */
.bls-track{position:relative; height:128px; margin:14px 0; border-radius:18px; background:var(--accent-soft); border:1.5px solid var(--line); overflow:hidden}
.bls-dot{position:absolute; top:50%; left:0; margin-top:-22px; width:44px; height:44px; border-radius:50%; background:var(--accent)}
.bls-ears{display:flex; align-items:center; justify-content:center; gap:18px; margin:22px 0}
.bls-ear{font-size:15px; font-weight:600; color:var(--muted)}
.bls-dot-sm{position:static; margin:0; width:26px; height:26px}
.toast{position:fixed; left:50%; transform:translateX(-50%); bottom:calc(84px + env(safe-area-inset-bottom, 0px)); background:var(--fg); color:var(--bg); padding:10px 16px; border-radius:12px; z-index:30; max-width:calc(100% - 32px); opacity:0; pointer-events:none; transition:opacity .2s; text-align:center}
.toast-on{opacity:1}
.badge{display:inline-block; font-size:14px; font-weight:700; padding:3px 10px; border-radius:999px; background:var(--warn-soft); color:var(--fg)}
.empty{display:flex; flex-direction:column; gap:12px; align-items:flex-start}
dl.defs{margin:0; display:flex; flex-direction:column; gap:6px; font-size:15px; color:var(--muted)}
dl.defs dt{font-weight:700; color:var(--fg)}
dl.defs dd{margin:0}
.welcome{min-height:70vh; display:flex; flex-direction:column; justify-content:center; gap:20px}
.welcome .mark{width:56px; height:56px}
.welcome .mark-lg{width:76px; height:76px}
.optbtn{font:inherit; text-align:left; width:100%; background:var(--surface); border:1.5px solid var(--line); border-radius:16px; padding:16px 18px; color:var(--fg); cursor:pointer; display:flex; flex-direction:column; gap:4px}
.optbtn[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft)}
.optbtn .t{font-weight:700; font-size:18px}
.kv{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; font-size:15px}
.kv dt{color:var(--muted)}
.kv dd{margin:0; min-width:0; overflow-wrap:anywhere}
.sticky-actions{position:sticky; bottom:calc(84px + env(safe-area-inset-bottom, 0px)); background:var(--bg); padding-block:8px}
html.text-large body{font-size:19px}
html.text-large .btn,html.text-large .chip{min-height:52px}
html.text-larger body{font-size:22px}
html.text-larger .btn,html.text-larger .chip{min-height:56px}
html.text-larger h1{font-size:32px}
html.calm-ui *:not(.orb){transition:none !important; animation:none !important}
html.calm-ui .orb-glow{display:none}
.ring{position:relative; width:96px; height:96px; flex:none}
.ring svg{width:96px; height:96px; transform:rotate(-90deg)}
.ring-bg{fill:none; stroke:var(--surface-2); stroke-width:8}
.ring-fg{fill:none; stroke:var(--good); stroke-width:8; stroke-linecap:round; transition:stroke-dashoffset .6s ease}
.ring-txt{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1}
.ring-big{font-family:var(--font-display); font-size:22px; font-weight:600; font-variant-numeric:tabular-nums}
.ring-sub{font-size:14px; color:var(--muted); margin-top:3px}
.medal{width:48px; height:48px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); color:var(--muted)}
.medal svg{width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.badge-tile.on .medal,.cel-card .medal{background:var(--accent); color:var(--accent-fg)}
.badge-tile.on .medal-calm,.cel-card .medal-calm{background:var(--good)}
.badge-tile.on .medal-plan,.cel-card .medal-plan{background:var(--terra); color:#F7F5F0}
.badges{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:10px}
.badge-tile{display:flex; gap:12px; align-items:center; padding:10px; border-radius:12px; border:1px solid var(--line); opacity:.6; min-width:0}
.badge-tile.on{opacity:1; background:var(--bg)}
.badge-body{display:flex; flex-direction:column; gap:2px; min-width:0}
.badge-body strong{overflow-wrap:anywhere}
.feedback{padding:12px 14px; border-radius:12px; background:var(--surface); border:1px solid var(--line)}
.overlay{position:fixed; inset:0; z-index:40; background:rgba(10,20,25,.55); display:grid; place-items:center; padding:16px}
.cel-card{background:var(--surface); color:var(--fg); border-radius:20px; padding:24px; max-width:380px; width:100%; display:flex; flex-direction:column; gap:10px; align-items:flex-start; animation:pop .3s ease}
.cel-card .medal{width:64px; height:64px}
.cel-card .medal svg{width:34px; height:34px}
@keyframes pop{from{transform:translateY(8px); opacity:0} to{transform:translateY(0); opacity:1}}
.fx-layer{position:fixed; inset:0; z-index:36; pointer-events:none; display:grid; place-items:center; overflow:hidden}
.fx-check{width:72px; height:72px; border-radius:50%; background:var(--accent); color:var(--accent-fg); display:grid; place-items:center; box-shadow:0 8px 28px rgba(0,0,0,.22); animation:fxpop 1.1s ease forwards}
.fx-check svg{width:38px; height:38px; stroke:currentColor; fill:none; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:28; stroke-dashoffset:28; animation:fxdraw .38s .16s ease forwards}
.fx-bit{position:absolute; left:50%; top:50%; width:10px; height:10px; border-radius:2px; animation:fxfly .9s ease-out forwards}
@keyframes fxpop{0%{transform:scale(.9); opacity:0} 20%{transform:scale(1); opacity:1} 75%{opacity:1} 100%{transform:scale(1); opacity:0}}
@keyframes fxdraw{to{stroke-dashoffset:0}}
@keyframes fxfly{0%{transform:translate(0,0) rotate(0); opacity:1} 100%{transform:translate(var(--dx), var(--dy)) rotate(var(--r)); opacity:0}}
@media (prefers-reduced-motion: reduce){
  .fx-check{animation:none; opacity:.96}
  .fx-check svg{animation:none; stroke-dashoffset:0}
  *,*::before,*::after{transition:none !important; animation:none !important}
}

/* ---------- artwork ---------- */
.art{display:block; width:100%; height:auto}
.art .bg{fill:var(--accent-soft)}
.art .iv{fill:var(--surface)}
.art .a{fill:var(--accent)}
.art .s{fill:var(--sage)}
.art .t{fill:var(--terra)}
.art .glow{fill:var(--terra); opacity:.14}
.art .ln{fill:none; stroke:var(--accent); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round}
.art .ln.lnt{stroke:var(--terra)}
.art .num{font-family:var(--font-display); font-weight:700; font-size:40px; fill:var(--accent)}
.art .num.sm{font-size:22px}
.art-step{max-width:340px; margin:14px auto 4px}
.art-body{max-width:250px}
.art-body .part{fill:var(--sage)}
.art-body .part .limb{fill:none; stroke:var(--sage); stroke-width:11; stroke-linecap:round; stroke-linejoin:round}
.art-body .part .limb.thick{stroke-width:15}
.art-body .part.on{fill:var(--terra); opacity:1}
.art-body .part.on .limb{stroke:var(--terra)}

/* ---------- Learn ---------- */
.learn-row{display:flex; gap:14px; align-items:center; width:100%; text-align:left; padding:14px; border:1px solid var(--line); border-radius:var(--radius, 16px); background:var(--surface); color:var(--fg); font:inherit; cursor:pointer}
.learn-row:hover{border-color:var(--sage)}
.learn-row:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.learn-row .art-thumb{width:64px; height:64px; flex:none}
.learn-row-text{display:flex; flex-direction:column; gap:4px; min-width:0}
.learn-row-text .t{font-weight:600; font-size:17px}
.learn-status{font-size:14px}
.learn-hero{max-width:180px}
.learn-prose h2{margin-top:22px}
.learn-prose h2:first-child{margin-top:0}
.learn-prose ul{padding-left:22px}
.learn-prose li{margin:6px 0}
.learn-note{background:var(--accent-soft); border-radius:12px; padding:12px 14px; color:var(--fg)}
.trap-list{display:flex; flex-direction:column; gap:10px; margin:12px 0}
.trap{border:1px solid var(--line); border-radius:14px; padding:12px 14px; background:var(--bg)}
.trap p{margin:4px 0}
.trap-name{font-weight:700}
.trap-what{color:var(--muted)}
.trap-bal{color:var(--accent)}
.lbl-inline{font-weight:600; color:var(--fg)}
.card-care{background:var(--sage-soft); border-color:var(--sage)}
.sources summary{cursor:pointer; font-weight:600; min-height:44px; display:flex; align-items:center}
.sources ul{padding-left:20px; color:var(--muted); font-size:15px}
.check-row{display:flex; gap:10px; align-items:center; font-size:17px; min-height:44px; cursor:pointer}
.check-row input{width:22px; height:22px; accent-color:var(--accent)}

/* ---------- rhythm walk ---------- */
.walk-feet{display:flex; justify-content:center; gap:56px; margin:16px 0 8px}
.foot{display:flex; flex-direction:column; align-items:center; gap:4px; font-size:14px; color:var(--muted)}
.foot svg{fill:var(--sage)}
.foot.on svg{fill:var(--terra); opacity:1}
.foot.on{color:var(--fg); font-weight:600}
.bpm-row{display:flex; align-items:center; gap:10px}
.bpm-row input[type=range]{flex:1; accent-color:var(--accent); height:44px}
.bpm-step{min-width:48px; font-size:22px; padding:0}
.bls-ears{justify-content:space-between; margin:6px 2px 0}
.tag{display:inline-block; font-size:14px; font-weight:600; padding:3px 10px; border-radius:999px; background:var(--sage-soft); color:var(--fg)}

/* ---------- grounding art: the hand ---------- */
.art .hand{fill:none; stroke:var(--accent); stroke-width:10.5; stroke-linecap:round}
.art .hand .thumb{stroke-width:11.5}
.art .ln.thin{stroke-width:3}

/* ---------- shifting attention: the songbird scene ---------- */
/* The scene has its own colours so the bird looks like a real bird in both themes;
   only the sky and hills dim in dark mode. */
.bird-scene{display:block; width:100%; max-width:460px; height:auto; margin:10px auto 4px; border-radius:22px;
  --sky1:#DCEBF2; --sky2:#F2F0E4; --hill:#C9DCCB; --cloud:#FFFFFF; --leaf:#5E8F6E; --leaf2:#86AE8F; --branch:#7A5A44}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .bird-scene{--sky1:#22323A; --sky2:#2C3A33; --hill:#33493F; --cloud:#3C4C52; --leaf:#5F8B6C; --leaf2:#4C7259; --branch:#8A6A52} }
:root[data-theme="dark"] .bird-scene{--sky1:#22323A; --sky2:#2C3A33; --hill:#33493F; --cloud:#3C4C52; --leaf:#5F8B6C; --leaf2:#4C7259; --branch:#8A6A52}
.bird-scene .sky1{stop-color:var(--sky1)} .bird-scene .sky2{stop-color:var(--sky2)}
.bird-scene .hill{fill:var(--hill)}
.bird-scene .cloud{fill:var(--cloud); opacity:.85}
.bird-scene .branch{fill:none; stroke:var(--branch); stroke-width:7; stroke-linecap:round}
.bird-scene .twig{fill:none; stroke:var(--branch); stroke-width:3.5; stroke-linecap:round}
.bird-scene .leafy ellipse{fill:var(--leaf)}
.bird-scene #leavesBack ellipse{fill:var(--leaf2)}
.bird-scene .b-back{fill:#5D6B72}
.bird-scene .b-dark{fill:#3B464C}
.bird-scene .b-breast{fill:#D9824F}
.bird-scene .b-belly{fill:#F3E9DA}
.bird-scene .b-bar{fill:none; stroke:#F3EFE6; stroke-width:2.2; stroke-linecap:round}
.bird-scene .b-ring{fill:#F3EFE6}
.bird-scene .b-eye{fill:#1E2326}
.bird-scene .b-shine{fill:#FFFFFF}
.bird-scene .b-lid{fill:#5D6B72}
.bird-scene .b-beak{fill:#E2B04A}
.bird-scene .b-beak-lo{fill:#C99536}
.bird-scene .b-legs{fill:none; stroke:#8A6A52; stroke-width:2.6; stroke-linecap:round}
.bird-scene .note{fill:none; stroke:var(--terra); stroke-width:2; stroke-linecap:round}
.bird-scene #birdBody{animation:birdBreathe 2.6s ease-in-out infinite}
.bird-scene #leavesA{animation:leafSway 4.2s ease-in-out infinite}
.bird-scene #leavesB{animation:leafSway 5.1s ease-in-out infinite reverse}
.bird-scene #cloud1{animation:cloudDrift 60s linear infinite alternate}
.bird-scene #cloud2{animation:cloudDrift 80s linear infinite alternate-reverse}
@keyframes birdBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.018)}}
@keyframes leafSway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}
@keyframes cloudDrift{from{transform:translateX(-20px)}to{transform:translateX(40px)}}
.shift-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-top:4px}
.shift-step{text-align:center; font-size:14px; font-weight:600; padding:6px 4px; border-radius:999px; background:var(--surface-2); color:var(--muted)}
.shift-step.done{background:var(--sage-soft); color:var(--fg)}
.shift-step.on{background:var(--accent); color:var(--accent-fg)}
.shift-prompt{min-height:150px}
.shift-prompt .bigtext{margin:4px 0 6px}
.shift-kind{margin:0; font-size:14px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--terra)}
.shift-card[data-kind="listen"] .bird-scene{opacity:.55; transition:opacity 1.2s ease}
.shift-card[data-kind="look"] .bird-scene{opacity:1; transition:opacity 1.2s ease}

/* ---------- unpack a moment ---------- */
.moment-card{background:var(--sage-soft); border:1.5px solid var(--sage); border-radius:16px; padding:14px 16px; font-size:18px; line-height:1.5}
.moment-card p{margin:0}
.moment-card .moment-what{font-size:15px; color:var(--muted); margin-bottom:6px}

/* Access code screen (gate.js): covers the app until the code is entered once on this phone. */
html.gate-on, html.gate-on body{overflow:hidden}
.gate{position:fixed; inset:0; z-index:1000; background:var(--bg); overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:calc(env(safe-area-inset-top, 0px) + 48px) max(20px, env(safe-area-inset-right, 0px)) calc(env(safe-area-inset-bottom, 0px) + 32px) max(20px, env(safe-area-inset-left, 0px))}
.gate-in{max-width:400px; margin:0 auto; display:flex; flex-direction:column; gap:18px}
.gate-mark{width:64px; height:64px}
.gate-sub{color:var(--muted)}
.gate input[type="password"]{font:inherit; font-size:22px; letter-spacing:.3em; color:var(--fg); background:var(--surface); border:1.5px solid var(--line); border-radius:12px; padding:12px 14px; min-height:54px; width:100%; min-width:0}
.gate input[type="password"]:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-color:var(--accent)}
.gate-msg{color:var(--alert); font-weight:600; min-height:1.55em}
.gate-msg:empty{min-height:0}
.gate-hint{color:var(--muted); font-size:15px}
.gate-crisis{font-size:15px; color:var(--muted); border-top:1px solid var(--line); padding-top:16px; margin-top:8px}
.gate-crisis a{color:var(--accent); font-weight:600}