/* Raysho - moss & slate glass, iPhone-first, light only */

:root{
  color-scheme: light;
  --bg:#f3f5f2; --bg-2:#e8ebe5; --card:#ffffff;
  --ink:#273039; --ink-2:#586471; --ink-3:#8a95a0;
  --line:#e0e4dd; --line-2:#eef1ec;
  --navy:#273039; --soft:#eaefe1;
  --accent:#5e7346; --accent-2:#4c5f38;
  --red:#b23c3c; --red-bg:#f7eae7;
  --amber:#946a12; --amber-bg:#f5efdd;
  --blue:#3f6591; --blue-bg:#e9eef4;
  --green:#4f7a4a; --green-bg:#e9f1e6;
  --slate-bg:#edefec;
  --shadow:0 1px 2px rgba(39,48,57,.05), 0 8px 20px -10px rgba(39,48,57,.16);
  --shadow-lg:0 24px 60px -18px rgba(30,40,30,.35);
  --r:14px;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink); font:15px/1.5 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overscroll-behavior-y:contain;
}

/* ============ AMBIENT INTELLIGENCE FIELD ============
   Slow, depth-layered light that reads as "something is thinking behind this".
   Pure GPU transforms (translate3d/scale) on 4 blurred orbs - no canvas, no JS
   per frame, no measurable battery cost on iPhone. body.thinking brightens and
   quickens it while the engine is actually working, so the motion means something. */
#aura{position:fixed;inset:-10%;z-index:-1;overflow:hidden;pointer-events:none;
  transition:opacity .5s ease, filter .5s ease}
#aura span{position:absolute;border-radius:50%;will-change:transform;
  transform:translate3d(0,0,0);backface-visibility:hidden}
#aura .a1{width:86vw;height:86vw;left:-26vw;top:-18vw;
  background:radial-gradient(circle at 34% 32%, rgba(94,115,70,.62), rgba(94,115,70,.10) 58%, transparent 70%);
  animation:orbA 26s ease-in-out infinite alternate}
#aura .a2{width:74vw;height:74vw;right:-24vw;top:2vh;
  background:radial-gradient(circle at 62% 38%, rgba(63,101,145,.56), rgba(63,101,145,.08) 56%, transparent 70%);
  animation:orbB 34s ease-in-out infinite alternate}
#aura .a3{width:96vw;height:96vw;left:2vw;bottom:-34vw;
  background:radial-gradient(circle at 46% 54%, rgba(126,148,96,.52), rgba(126,148,96,.08) 58%, transparent 72%);
  animation:orbC 30s ease-in-out infinite alternate}
#aura .a4{width:52vw;height:52vw;right:-2vw;bottom:12vh;
  background:radial-gradient(circle at 50% 50%, rgba(196,168,96,.34), transparent 66%);
  animation:orbD 22s ease-in-out infinite alternate}
/* faint grid = the "structure" under the glow; keeps it premium, not lava-lamp */
#aura .mesh{position:absolute;inset:0;border-radius:0;opacity:.6;
  background-image:linear-gradient(rgba(39,48,57,.05) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(39,48,57,.05) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(72% 58% at 50% 34%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(72% 58% at 50% 34%, #000 0%, transparent 78%);
  animation:meshDrift 40s linear infinite}
@keyframes orbA{
  0%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(7vw,5vh,0) scale(1.13)}
  100%{transform:translate3d(-3vw,10vh,0) scale(.95)}}
@keyframes orbB{
  0%{transform:translate3d(0,0,0) scale(1.04)}
  50%{transform:translate3d(-9vw,8vh,0) scale(.9)}
  100%{transform:translate3d(4vw,-4vh,0) scale(1.16)}}
@keyframes orbC{
  0%{transform:translate3d(0,0,0) scale(.94)}
  50%{transform:translate3d(-6vw,-7vh,0) scale(1.1)}
  100%{transform:translate3d(8vw,-2vh,0) scale(1)}}
@keyframes orbD{
  0%{transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-7vw,-9vh,0) scale(1.3)}}
@keyframes meshDrift{to{background-position:44px 44px, 44px 44px}}
/* Pryt is thinking - the field responds */
body.thinking #aura{filter:saturate(1.5) brightness(1.05)}
body.thinking #aura .a1{animation-duration:7s}
body.thinking #aura .a2{animation-duration:9s}
body.thinking #aura .a3{animation-duration:8s}
body.thinking #aura .a4{animation-duration:6s}
button,input,select,textarea{font:inherit;color:inherit}
.hidden{display:none !important}
::selection{background:#dbe6cc}
.mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,#3d4f3c,#5e7346);color:#fff;font-weight:800;font-size:15px;flex:none;
  box-shadow:0 2px 6px -2px rgba(45,60,45,.5)}
.mark-lg{width:60px;height:60px;border-radius:17px;font-size:28px;margin:0 auto 18px}

/* ============ LANDING ============ */
.landing{max-width:1060px;margin:0 auto;padding:0 22px calc(40px + var(--safe-b))}
.l-nav{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--safe-t) + 18px) 0 10px}
.l-brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.3px}
.l-signin{background:none;border:1px solid var(--line);border-radius:22px;padding:9px 18px;font-weight:650;font-size:14px;cursor:pointer;color:var(--ink-2);min-height:40px}
.l-signin:active{background:var(--bg-2)}
.l-hero{text-align:center;padding:52px 0 8px}
.l-hero h1{font-size:clamp(38px,7vw,64px);line-height:1.04;letter-spacing:-2px;margin:0 0 18px;font-weight:800}
.l-hero h1 em{font-style:normal;background:linear-gradient(120deg,#5e7346,#3f6591);-webkit-background-clip:text;background-clip:text;color:transparent}
.l-sub{max-width:560px;margin:0 auto 26px;color:var(--ink-2);font-size:17px;line-height:1.6}
.l-cta{background:linear-gradient(135deg,#3d4f3c,#5e7346);color:#fff;border:none;border-radius:14px;padding:16px 42px;
  font-size:17px;font-weight:700;cursor:pointer;box-shadow:0 14px 30px -12px rgba(45,60,45,.55);min-height:52px}
.l-cta:active{transform:scale(.98)}
.l-heroCard{max-width:460px;margin:44px auto 0;background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.75);
  border-radius:20px;padding:18px;text-align:left;box-shadow:var(--shadow-lg);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
.lh-label{font-size:10.5px;letter-spacing:1.2px;font-weight:800;color:var(--ink-3);margin:2px 4px 12px}
.lh-opt{display:flex;align-items:center;gap:12px;padding:12px;border-radius:13px;border:1px solid var(--line-2);margin-bottom:9px;background:#fff}
.lh-opt.lh-top{border-color:#cdd9bc;background:linear-gradient(135deg,#f4f7ee,#fff)}
.lh-rank{flex:none;width:26px;height:26px;border-radius:50%;background:var(--soft);color:var(--accent-2);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.lh-top .lh-rank{background:var(--accent);color:#fff}
.lh-opt b{display:block;font-size:14.5px}
.lh-opt small{color:var(--ink-3);font-size:12px}
.lh-opt>div{min-width:0}
.lh-rec{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:#fff;background:var(--accent);border-radius:11px;padding:3px 9px;margin-bottom:5px}
.l-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding:64px 0 8px}
.l-step{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.7);border-radius:18px;padding:22px;box-shadow:var(--shadow);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ls-n{display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;align-items:center;justify-content:center;margin-bottom:12px}
.l-step h3{margin:0 0 8px;font-size:18px;letter-spacing:-.2px}
.l-step p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.6}
.l-not{text-align:center;padding:56px 0 20px}
.l-not h2{font-size:clamp(24px,4.5vw,34px);letter-spacing:-1px;margin:0 0 24px}
.l-notgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;text-align:left}
.l-notgrid>div{border:1px dashed var(--line);border-radius:16px;padding:18px}
.l-notgrid b{font-size:15.5px}
.l-notgrid p{margin:6px 0 0;color:var(--ink-2);font-size:13.5px;line-height:1.55}
.l-foot{text-align:center;color:var(--ink-3);font-size:13px;padding:44px 0 8px}
.l-footbrand{display:flex;align-items:center;justify-content:center;gap:10px}
.l-footlinks{display:flex;justify-content:center;gap:20px;margin-top:16px}
.l-footlinks a{color:var(--ink-2);font-weight:650;text-decoration:none;font-size:13px;padding:8px 4px;min-height:40px;display:inline-flex;align-items:center}
.l-footnote{max-width:520px;margin:12px auto 0;font-size:11.5px;line-height:1.6;color:var(--ink-3);opacity:.85}

/* ============ GATE ============ */
.gate{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;overflow:hidden;
  padding:calc(24px + var(--safe-t)) 24px calc(24px + var(--safe-b));
  background:linear-gradient(160deg,#2a352e 0%,#3d4f3c 55%,#5e7346 130%)}
/* the intelligence field, dark-mode twin - same language as #aura */
.gate::before,.gate::after{content:"";position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.gate::before{width:120vw;height:120vw;left:-40vw;top:-45vw;
  background:radial-gradient(circle at 40% 40%, rgba(160,196,120,.24), transparent 62%);
  animation:orbA 24s ease-in-out infinite alternate}
.gate::after{width:96vw;height:96vw;right:-38vw;bottom:-40vw;
  background:radial-gradient(circle at 55% 45%, rgba(120,168,214,.20), transparent 64%);
  animation:orbB 30s ease-in-out infinite alternate}
.gate-card{width:100%;max-width:360px;text-align:center;color:#fdfdfb;position:relative;z-index:1}
.gate-card h1{font-size:24px;margin:0 0 6px;letter-spacing:-.4px}
.gate-card p{margin:0 0 24px;opacity:.75;font-size:14px}
.g-in{width:100%;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);color:#fff;border-radius:13px;
  padding:15px;font-size:16px;outline:none;margin-bottom:11px;text-align:center}
.g-in::placeholder{color:rgba(255,255,255,.45)}
.g-in:focus{border-color:#c8d6b0}
.g-pin{letter-spacing:8px;font-size:20px}
/* PIN is masked by default; the eye is the only way to reveal it */
.g-pinwrap{position:relative;margin-bottom:11px}
.g-pinwrap .g-in{margin-bottom:0;padding-right:52px}
.g-eye{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:46px;height:46px;border:none;background:none;
  cursor:pointer;color:rgba(255,255,255,.62);display:flex;align-items:center;justify-content:center;padding:0}
.g-eye:active{color:#fff}
.g-eye svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.g-btn{width:100%;background:#fff;color:#2a352e;border:none;border-radius:13px;padding:15px;font-size:16px;font-weight:750;cursor:pointer;margin-top:6px;min-height:52px}
.g-btn:disabled{opacity:.6}
.g-alt{background:none;border:none;color:rgba(255,255,255,.75);font-size:13.5px;font-weight:600;cursor:pointer;margin-top:16px;padding:8px}
.g-err{color:#ffc2b8;font-size:13px;font-weight:600;min-height:18px;margin-top:8px}
.g-note{font-size:12px;opacity:.6;line-height:1.5;margin-top:14px}

/* ============ APP CHROME ============ */
/* Glass header: content must never collide with the title on scroll */
.hdr{position:sticky;top:0;z-index:40;padding:calc(var(--safe-t) + 12px) 16px 10px;
  background:rgba(243,245,242,.72);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid transparent;transition:border-color .2s ease, background .2s ease}
.hdr.stuck{background:rgba(243,245,242,.86);border-bottom-color:rgba(224,228,221,.9)}
.hdr-row{display:flex;align-items:center;justify-content:space-between;max-width:720px;margin:0 auto}
.hdr-title{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;letter-spacing:-.3px}
.icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--card);cursor:pointer;
  color:#fff;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none;
  background:linear-gradient(135deg,#3d4f3c,#5e7346);border-color:transparent;box-shadow:0 2px 8px -3px rgba(45,60,45,.5)}
.icon-btn:active{transform:scale(.94)}
.view{padding:6px 16px calc(122px + var(--safe-b));max-width:720px;margin:0 auto}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:36;display:flex;align-items:center;justify-content:space-around;
  background:rgba(255,255,255,.9);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-top:1px solid rgba(255,255,255,.6);padding:8px 10px calc(8px + var(--safe-b));
  transition:transform .18s ease, opacity .18s ease}
/* iOS: fixed bars strand themselves above the keyboard - drop the nav out of the way */
body.kb .nav{transform:translateY(115%);opacity:0;pointer-events:none}
body.kb .view{padding-bottom:24px}
.nav-btn{flex:1;border:none;background:none;display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:11px;font-weight:650;color:var(--ink-3);cursor:pointer;padding:10px 4px;min-height:52px;justify-content:center}
.nav-btn.on{color:var(--accent-2)}
.ni{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav-feed{flex:none;width:60px;height:60px;margin-top:-26px;border-radius:50%;border:4px solid var(--bg);
  background:linear-gradient(135deg,#3d4f3c,#5e7346);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 24px -8px rgba(45,60,45,.6)}
.nav-feed .ni{width:26px;height:26px;stroke-width:2.2}
.nav-feed:active{transform:scale(.94)}
.nav-feed.on{outline:3px solid var(--soft)}

/* ============ SHARED APP PIECES ============ */
.sec{margin:20px 0 10px;display:flex;align-items:baseline;justify-content:space-between}
.sec h2{font-size:11.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-3);margin:0;font-weight:800}
.sec .cnt{font-size:12px;color:var(--ink-3);font-weight:650}
.card{background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.72);border-radius:var(--r);padding:15px 16px;margin-bottom:11px;
  box-shadow:var(--shadow);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3);
  cursor:pointer;position:relative;overflow:hidden;transition:transform .1s}
.card:active{transform:scale(.995)}
/* Aging ramp: the edge gets wider, hotter and starts to glow the longer it rots.
   A 60-day-overdue action must not look like a 2-day one. */
.card.od::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);opacity:.5}
.card.od2::before{width:4px;opacity:.8}
.card.od3::before{width:5px;opacity:1;background:linear-gradient(180deg,#c94a3f,#8e2b2b);
  box-shadow:0 0 12px rgba(178,60,60,.55)}
.card.od3{border-color:rgba(178,60,60,.28)}
.card.od3 .p-now{background:var(--red);color:#fff}
.pill{font-size:11px;font-weight:650;padding:3px 8px;border-radius:5px;white-space:nowrap}
.p-now{background:var(--red-bg);color:var(--red)} .p-today{background:var(--amber-bg);color:var(--amber)}
.p-week{background:var(--blue-bg);color:var(--blue)} .p-later{background:var(--slate-bg);color:var(--ink-3)}
.p-area{background:transparent;color:var(--ink-3);border:1px solid var(--line);font-weight:600}
.p-done{background:var(--green-bg);color:var(--green)}
.p-val{background:var(--green-bg);color:var(--green);font-weight:750}
.restnote{text-align:center;color:var(--ink-3);font-size:12.5px;padding:18px 10px 4px}
.empty{text-align:center;padding:46px 18px;color:var(--ink-3)}
.empty b{display:block;color:var(--ink-2);font-size:17px;margin-bottom:6px;font-weight:700}
.hero{position:relative;overflow:hidden;border-radius:18px;padding:20px 20px 17px;margin:8px 0 6px;color:#fff;
  background:linear-gradient(135deg,#2a352e 0%,#3d4f3c 50%,#5e7346 100%);box-shadow:0 16px 34px -16px rgba(45,60,45,.6)}
.hero-deco{position:absolute;right:-50px;top:-50px;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle at 32% 32%,rgba(255,255,255,.2),transparent 68%);pointer-events:none}
.hero-label{font-size:12px;font-weight:650;opacity:.85}
.hero-num{font-size:40px;font-weight:800;line-height:1.05;letter-spacing:-1.5px;margin:3px 0}
.hero-sub{font-size:12.5px;opacity:.85}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 16px 10px;margin:0 -16px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:var(--card);border-radius:22px;padding:9px 15px;font-size:13px;
  font-weight:650;color:var(--ink-2);cursor:pointer;white-space:nowrap;min-height:38px}
.chip.on{background:var(--navy);border-color:var(--navy);color:#fff}
.toast{position:fixed;left:50%;transform:translateX(-50%) translateY(20px);bottom:calc(100px + var(--safe-b));
  background:var(--navy);color:#fff;padding:11px 20px;border-radius:24px;font-size:13.5px;font-weight:650;z-index:90;
  opacity:0;pointer-events:none;transition:.22s;max-width:88vw;text-align:center;line-height:1.4}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* direction (advisor MCQ) */
.direction{background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.75);border-radius:18px;padding:16px;margin:12px 0;
  box-shadow:var(--shadow);backdrop-filter:blur(12px) saturate(1.3);-webkit-backdrop-filter:blur(12px) saturate(1.3)}
.dir-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.dir-head b{font-size:11.5px;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-3);font-weight:800}
.dir-refresh{border:none;background:none;color:var(--accent);font-size:12.5px;font-weight:700;cursor:pointer;
  padding:12px 6px;margin:-12px -6px;min-height:44px}
.dir-sum{font-size:13px;color:var(--ink-2);margin:0 0 10px;line-height:1.5}
.dir-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px;border-radius:13px;
  border:1px solid var(--line-2);margin-bottom:9px;background:#fff;cursor:pointer;transition:transform .1s}
.dir-opt:active{transform:scale(.99)}
.dir-opt.top{border-color:#cdd9bc;background:linear-gradient(135deg,#f4f7ee,#fff)}
.dir-rank{flex:none;width:27px;height:27px;border-radius:50%;background:var(--soft);color:var(--accent-2);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.dir-opt.top .dir-rank{background:var(--accent);color:#fff}
.dir-opt b{display:block;font-size:14.5px;line-height:1.3}
.dir-opt small{color:var(--ink-3);font-size:12px;line-height:1.4;display:block;margin-top:1px}
.dir-rec{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase;
  color:#fff;background:var(--accent);border-radius:11px;padding:3px 9px;margin-bottom:5px}
.dir-badge{font-size:10px;font-weight:800;letter-spacing:.5px;color:var(--blue);background:var(--blue-bg);border-radius:10px;padding:3px 8px;margin-left:8px}
.nudge{display:flex;gap:9px;background:var(--amber-bg);border-radius:12px;padding:11px 13px;font-size:13px;color:var(--amber);line-height:1.5;margin-top:4px}

/* feed / capture */
.cap{background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.75);border-radius:18px;padding:16px;margin:10px 0;
  box-shadow:var(--shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.cap textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:13px;padding:13px;font-size:16px;
  min-height:130px;resize:none;outline:none;line-height:1.55}
@media(min-width:721px){.cap textarea{resize:vertical}}
.cap textarea:focus{border-color:var(--accent)}
.cap-row{display:flex;gap:10px;margin-top:11px}
.cap-mic{flex:none;width:50px;height:50px;border-radius:50%;border:1px solid var(--line);background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--ink-2)}
.cap-mic.on{background:var(--red);border-color:var(--red);color:#fff;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(178,60,60,.35)}50%{box-shadow:0 0 0 10px rgba(178,60,60,0)}}
.cap-go{flex:1;background:linear-gradient(135deg,#3d4f3c,#5e7346);color:#fff;border:none;border-radius:13px;
  font-size:15.5px;font-weight:750;cursor:pointer;min-height:50px}
.cap-go:disabled{opacity:.6}
.cap-hint{font-size:12px;color:var(--ink-3);margin-top:10px;line-height:1.5}
.partner{display:flex;gap:11px;margin:14px 0;align-items:flex-start}
.partner .mark{margin-top:2px}
.partner-b{background:var(--soft);border-radius:4px 16px 16px 16px;padding:12px 14px;font-size:13.5px;line-height:1.55;color:#3c4a30}
.partner-b.warn{background:var(--amber-bg);color:var(--amber)}
.prop{background:#fff;border:1px solid var(--line-2);border-radius:14px;padding:14px;margin-bottom:10px;
  transition:opacity .18s ease, transform .18s ease}
.prop.gone{opacity:0;transform:translateX(14px) scale(.98)}
.prop b{font-size:15px}
.prop .pnote{color:var(--ink-2);font-size:13.5px;margin:3px 0 8px;line-height:1.45}
.prop-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:11px}
/* Primary action gets the room; labels must never wrap on a 375px phone */
.prop-btns{display:flex;gap:8px;align-items:stretch}
.prop-btns button{border-radius:11px;padding:12px 6px;font-size:13.5px;font-weight:700;cursor:pointer;min-height:46px;white-space:nowrap}
.pb-add{flex:1.9;background:var(--accent);color:#fff;border:none;box-shadow:0 6px 14px -8px rgba(45,60,45,.7)}
.pb-add:active{transform:scale(.98)}
.pb-edit{flex:1;background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.pb-skip{flex:.9;background:none;border:none;color:var(--ink-3);font-weight:650}
.skel{height:78px;border-radius:14px;margin-bottom:10px;background:linear-gradient(90deg,var(--line-2) 25%,#f7f8f5 45%,var(--line-2) 65%);
  background-size:220% 100%;animation:shim 1.2s infinite linear}
.skel-hero{height:112px;border-radius:18px;margin:8px 0 12px}
.skel-dir{height:250px;border-radius:18px;margin-bottom:16px}
@keyframes shim{from{background-position:180% 0}to{background-position:-40% 0}}

/* forms / sheets */
.sheet{position:fixed;inset:0;z-index:60}
.sheet-scrim{position:absolute;inset:0;background:rgba(24,28,34,.45)}
.sheet-body{position:absolute;left:0;right:0;bottom:0;max-height:92vh;max-height:92dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  background:var(--bg);border-radius:22px 22px 0 0;padding:8px 17px calc(30px + var(--safe-b));box-shadow:var(--shadow-lg);
  animation:up .34s cubic-bezier(.16,1.02,.3,1);touch-action:pan-y}
@keyframes up{from{transform:translateY(46px);opacity:.4}}
.sheet-scrim{transition:opacity .2s ease}
.grab{cursor:grab}
@media(min-width:721px){.sheet-body{max-width:560px;margin:0 auto;border-radius:20px;bottom:auto;top:50%;transform:translateY(-50%);max-height:88vh}}
.grab{width:40px;height:4px;border-radius:3px;background:var(--line);margin:6px auto 10px}
.sh-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:4px 0 12px}
.sh-hd h3{margin:0;font-size:19px;font-weight:750;letter-spacing:-.3px;min-width:0;overflow-wrap:anywhere}
.sh-x{border:none;background:var(--bg-2);width:44px;height:44px;border-radius:50%;font-size:19px;cursor:pointer;color:var(--ink-2);flex:none;margin:-5px -6px 0 0}
.fld{margin-bottom:12px}
.fld label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--ink-3);font-weight:750;margin-bottom:6px}
.fld input,.fld select,.fld textarea{width:100%;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:12px 13px;outline:none;font-size:16px;color:var(--ink)}
.fld textarea{min-height:72px;resize:none;line-height:1.5}
@media(min-width:721px){.fld textarea{resize:vertical}}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--accent)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.btn{width:100%;border:none;border-radius:13px;padding:15px;font-size:15.5px;font-weight:750;cursor:pointer;margin-top:4px;min-height:50px}
.btn:disabled{opacity:.4;cursor:default;box-shadow:none}
.btn-p{background:linear-gradient(135deg,#3d4f3c,#5e7346);color:#fff}
.btn-g{background:#fff;border:1px solid var(--line);color:var(--ink-2)}
.btn-d{background:none;border:none;color:var(--red);font-weight:650;font-size:13.5px;padding:12px;width:100%;cursor:pointer}

/* item rows */
.it-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.it-title{font-weight:700;font-size:15.5px;line-height:1.35}
.it-note{color:var(--ink-2);font-size:13.5px;margin-top:3px;line-height:1.45}
.it-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;align-items:center}
/* 26px dot, 44px hit area - the most-tapped control in the app */
.it-done{flex:none;width:44px;height:44px;margin:-9px -10px -9px 0;border:none;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0}
.it-done::before{content:"";width:26px;height:26px;border-radius:50%;border:2px solid var(--line);background:#fff;
  transition:transform .1s ease}
.it-done:active::before{transform:scale(.86);border-color:var(--accent)}
.card.done{opacity:.55}
.card.done .it-title{text-decoration:line-through}

/* you / brief */
.brief{background:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.75);border-radius:16px;padding:18px;box-shadow:var(--shadow);
  font-size:14px;line-height:1.65;color:var(--ink-2)}
.brief h2{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--accent-2);margin:16px 0 6px;font-weight:800}
.brief h2:first-child{margin-top:0}
.brief ul{margin:4px 0;padding-left:18px}
.brief p{margin:4px 0}
.you-name{display:flex;align-items:center;gap:13px;margin:10px 0 18px}
.you-av{width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#3d4f3c,#5e7346);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:800}
.you-name b{font-size:19px;display:block}
.you-name small{color:var(--ink-3)}

/* ============ CONSENT + FIRST-RUN QUESTIONS ============ */
body.solo .view{padding-top:calc(var(--safe-t) + 20px);padding-bottom:calc(40px + var(--safe-b))}
.ob{max-width:520px;margin:0 auto}
.ob-top{text-align:center;margin-bottom:6px}
.ob-bar{height:5px;border-radius:3px;background:rgba(39,48,57,.10);overflow:hidden;margin:4px 0 14px}
.ob-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#3d4f3c,#5e7346);transition:width .3s ease}
.ob-step{font-size:11px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.ob-h{font-size:25px;line-height:1.22;letter-spacing:-.7px;margin:0 0 10px;font-weight:800}
.ob-p{color:var(--ink-2);font-size:15px;line-height:1.6;margin:0 0 16px}
.ob-note{color:var(--ink-3);font-size:13.5px;line-height:1.55;margin:0 0 16px}
.ob-list{margin:0 0 20px;padding:0;list-style:none}
.ob-list li{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.7);border-radius:13px;padding:13px 15px;
  margin-bottom:9px;font-size:14px;line-height:1.55;color:var(--ink-2);box-shadow:var(--shadow)}
.ob-list b{color:var(--ink);display:block;margin-bottom:2px;font-size:14.5px}
.ob-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:15px 16px;margin-bottom:9px;font-size:15.5px;font-weight:600;color:var(--ink);
  cursor:pointer;min-height:56px;transition:transform .08s ease,border-color .12s ease}
.ob-opt:active{transform:scale(.985)}
.ob-opt.on{border-color:var(--accent);background:linear-gradient(135deg,#f4f7ee,#fff);box-shadow:0 0 0 1px var(--accent) inset}
.ob-tick{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);position:relative}
.ob-opt.on .ob-tick{border-color:var(--accent);background:var(--accent)}
.ob-opt.on .ob-tick::after{content:"";position:absolute;left:6px;top:2.5px;width:5px;height:10px;
  border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg)}
.ob-text{width:100%;border:1px solid var(--line);background:#fff;border-radius:14px;padding:14px;font-size:16px;
  min-height:110px;resize:none;outline:none;line-height:1.55}
.ob-text:focus{border-color:var(--accent)}
.ob-safe{display:flex;align-items:flex-start;background:var(--soft);border-radius:12px;padding:11px 13px;
  font-size:12.5px;line-height:1.5;color:#3c4a30;margin:16px 0 6px}
.ob-btns{display:flex;gap:10px;margin-top:10px}
.ob-btns .btn{margin-top:0}
.ob-btns .btn-g{flex:.7}
.ob-btns .btn-p{flex:1.6}
.ob-agree{display:flex;align-items:flex-start;gap:12px;background:rgba(255,255,255,.8);border:1px solid var(--line);
  border-radius:14px;padding:15px;margin-bottom:14px;font-size:13.5px;line-height:1.55;color:var(--ink-2);cursor:pointer}
.ob-agree input{flex:none;width:24px;height:24px;accent-color:var(--accent);margin:0}
.ob-agree a{color:var(--accent-2);font-weight:700}
.ob-out,.ob-skip{display:block;width:100%;color:var(--ink-3);margin-top:8px;min-height:44px}

/* the ongoing drip - one question, tap to answer, never blocks anything */
.askc{background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.75);border-radius:18px;padding:16px;margin:16px 0 4px;
  box-shadow:var(--shadow);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.askc-hd{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.askc-hd b{font-size:12px;letter-spacing:.2px;color:var(--ink-3);font-weight:750}
.askc-q{font-size:16px;font-weight:750;line-height:1.35;margin-bottom:12px;letter-spacing:-.2px}
.askc-note{font-size:12.5px;color:var(--ink-3);line-height:1.5;margin:-6px 0 12px}
.askc .ob-opt{font-size:14.5px;min-height:50px;padding:13px 14px}
.askc-skip{width:100%;background:none;border:none;color:var(--ink-3);font-size:13px;font-weight:650;cursor:pointer;
  min-height:44px;margin-top:2px}
.partner-b.safe{background:var(--blue-bg);color:#31506f}
.privcard{cursor:default}
.privcard b{font-size:14.5px}
.privcard p{margin:5px 0 0;color:var(--ink-2);font-size:13.5px;line-height:1.55}
.privlinks{display:flex;gap:16px;margin-top:12px}
.privlinks a{color:var(--accent-2);font-weight:700;font-size:13px;text-decoration:none}
.sh-p{color:var(--ink-2);font-size:14px;line-height:1.6;margin:0 0 16px}
.er-red{background:linear-gradient(135deg,#8e2b2b,#b23c3c)}

/* A long unbroken string (URL, ref number) must never push the layout sideways */
.it-title,.it-note,.dir-opt b,.dir-opt small,.prop b,.prop .pnote,.brief,.partner-b,.hero-sub{overflow-wrap:anywhere}

/* "Pryt is thinking" - a live edge on the card being computed, not a spinner */
.direction.working{position:relative}
.direction.working::after{content:"";position:absolute;inset:-1px;border-radius:19px;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(94,115,70,.5) 50%,transparent 70%);
  background-size:280% 100%;animation:sweep 1.5s linear infinite;
  mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  mask-composite:exclude;-webkit-mask-composite:xor;padding:1.5px}
@keyframes sweep{from{background-position:180% 0}to{background-position:-80% 0}}

@keyframes viewin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}