/* =====================================================================
   Nadi Pulse — the look. One voice with the Nadi editor's landing:
   parchment, a deep ink-blue, a thread of gold; Cormorant for what is
   named, Jost for what is said. Dr Deep meets this alone, with his
   eyes about to close — so it is quiet, large, and says little.
   ===================================================================== */
:root{
  --ink:#0f0e0c; --parchment:#faf8f3; --warm:#f5f2eb; --mid:#5a5550;
  --gold:#8a6d3b; --gold-lt:#b8943f; --rule:#d4c9b0; --rule-soft:#e8e1d0;
  --accent:#1a2744; --accent-lt:#223060;
  --done:#4e7a5b; --done-soft:#e9f1ea;
  --bench:#7a3b3b;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:'Jost',sans-serif;font-weight:300;background:var(--parchment);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.55}
.phone{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.serif{font-family:'Cormorant Garamond',serif}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* ---- the landing ---- */
.landing{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 32px}
.landing .mark{width:74px;height:74px;color:var(--gold);margin-bottom:30px}
.landing .mark svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.landing .word{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:44px;letter-spacing:.06em;color:var(--accent);line-height:1}
.landing .word b{font-weight:400}
.landing .rule{width:44px;height:1px;background:var(--gold);margin:22px auto 14px}
.landing .sub{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid)}
.landing .enter{margin-top:64px;font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--accent);
  border:1px solid var(--rule);background:var(--warm);padding:14px 46px;border-radius:40px;letter-spacing:.04em;
  transition:border-color .2s,background .2s}
.landing .enter:active{border-color:var(--gold);background:rgba(184,148,63,.08)}
.landing .foot{margin-top:auto;padding-top:40px;font-size:11px;letter-spacing:.08em;color:var(--mid);font-style:italic}

/* ---- the top bar ---- */
.top{display:flex;align-items:center;gap:14px;padding:18px 22px 6px;min-height:52px}
.top .brand{font-family:'Cormorant Garamond',serif;font-size:17px;letter-spacing:.12em;color:var(--accent)}
.top .brand span{color:var(--gold-lt)}
.top .back{font-size:13px;letter-spacing:.06em;color:var(--mid);padding:6px 0;display:flex;align-items:center;gap:6px}
.top .back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 22px 40px}

/* ---- the column of states ---- */
.lead{font-family:'Cormorant Garamond',serif;font-size:30px;font-weight:300;color:var(--accent);line-height:1.15;margin-top:14px}
.lead-rule{width:44px;height:1px;background:var(--gold);margin:14px 0 6px}
.sub{font-size:12.5px;letter-spacing:.05em;color:var(--mid);margin-bottom:26px}
.section{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);margin:28px 0 8px}
.section:first-of-type{margin-top:6px}
.row{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:13px 4px 13px 2px;
  border-bottom:1px solid var(--rule-soft);transition:background .15s}
.row:active{background:rgba(184,148,63,.06)}
.row .n{font-family:'Cormorant Garamond',serif;font-size:13px;color:var(--gold);min-width:22px;text-align:right;font-variant-numeric:tabular-nums}
.row .t{flex:1;min-width:0}
.row .t .name{font-family:'Cormorant Garamond',serif;font-size:21px;color:var(--accent);line-height:1.15}
.row .t .nadi{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:16px;color:var(--gold);margin-top:1px}
.row .state{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);display:flex;align-items:center;gap:7px;white-space:nowrap}
.row .dot{width:7px;height:7px;border-radius:50%;border:1px solid var(--rule)}
.row.done .dot{background:var(--done);border-color:var(--done)}
.row.done .state{color:var(--done)}
.row.done .t .name{color:var(--done)}
.row.bench{border:1px solid var(--rule);background:var(--warm);padding:14px 16px;margin:4px 0 2px;border-radius:4px}
.row.bench .t .name{color:var(--bench)}

/* ---- a state's page ---- */
.eyebrow{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mid);margin-top:10px}
.title{font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:300;color:var(--accent);line-height:1.1;margin-top:4px}
.title.done{color:var(--done)}
.nadi-name{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:24px;color:var(--gold);margin-top:4px;line-height:1.2}
.title-rule{width:44px;height:1px;background:var(--gold);margin:16px 0 22px}

.namebtn{display:block;width:100%;text-align:left;font-size:12.5px;letter-spacing:.06em;color:var(--gold);
  padding:12px 0;border-top:1px solid var(--rule-soft);border-bottom:1px solid var(--rule-soft);margin-bottom:26px}
.namebtn.small{font-size:11px;color:var(--mid);border:none;padding:4px 0 0;margin-bottom:22px}
.namebox{border:1px solid var(--rule);background:var(--warm);padding:16px;margin-bottom:26px;border-radius:4px}
.namebox label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mid);margin-bottom:10px}
.namebox input{width:100%;font-family:'Cormorant Garamond',serif;font-size:24px;font-style:italic;color:var(--accent);
  background:none;border:none;border-bottom:1px solid var(--gold);padding:4px 0 8px;outline:none;border-radius:0}
.namebox .acts{display:flex;justify-content:flex-end;gap:22px;margin-top:16px}
.namebox .acts button{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);padding:6px 0}
.namebox .acts button.save{color:var(--gold)}

.acts3{display:flex;flex-direction:column;gap:12px}
.act{display:flex;align-items:center;gap:18px;width:100%;text-align:left;background:var(--warm);
  border:1px solid var(--rule);padding:20px 20px;border-radius:4px;transition:border-color .2s,background .2s}
.act:active{border-color:var(--gold);background:rgba(184,148,63,.06)}
.act.primary{border-color:rgba(184,148,63,.55)}
.act .ico{width:24px;height:24px;color:var(--gold);flex:none}
.act .ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.act .name{font-family:'Cormorant Garamond',serif;font-size:23px;color:var(--accent);line-height:1.1}
.act.bench .name{color:var(--bench)}

/* ---- the pulse screen: ready, then the dark ---- */
.sitready .fact{font-size:13px;letter-spacing:.06em;color:var(--mid);margin-top:6px}
.sitready .fact.dim{margin-top:22px;font-size:12px;line-height:1.6}
.begin{display:block;width:100%;font-family:'Cormorant Garamond',serif;font-size:24px;color:var(--accent);
  border:1px solid rgba(184,148,63,.55);background:var(--warm);padding:18px;border-radius:4px;margin-top:26px;letter-spacing:.03em}
.begin:active{border-color:var(--gold);background:rgba(184,148,63,.08)}
/* the placing screen — the house's light: the camera's window, the pulse seen, ten seconds counted */
.sit{position:fixed;inset:0}
.place{position:absolute;inset:0;background:var(--parchment);display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:calc(36px + env(safe-area-inset-top)) 28px 0}
.place .title.small{font-size:30px}
.place .cam{position:relative;width:96px;height:96px;border-radius:18px;overflow:hidden;border:1px solid var(--rule);
  background:#2a2520;margin-top:34px;box-shadow:0 14px 30px -18px rgba(26,39,68,.5)}
.place .cam video{width:100%;height:100%;object-fit:cover;display:block}
.place .pdot{position:absolute;right:8px;bottom:8px;width:8px;height:8px;border-radius:50%;background:var(--gold-lt);opacity:0;transition:opacity .6s}
.place .pdot.settling,.place .pdot.found{opacity:1;animation:breathe 1.1s ease-in-out infinite}
/* the scope, as on the person's page: it exists only once there is a pulse to draw */
.place .scope{width:100%;max-width:320px;height:90px;margin:26px auto 0;overflow:hidden;border:1px solid var(--rule);border-radius:12px;
  background:var(--warm);opacity:0;transition:opacity .6s}
.place .scope.show{opacity:1}
.place .scope svg{width:100%;height:100%;display:block}
.place .pword{font-size:13px;letter-spacing:.05em;color:var(--mid);margin-top:18px;min-height:20px;line-height:1.6}
@keyframes breathe{0%,100%{opacity:.25}50%{opacity:1}}

/* the dark — fades in over the placing screen once the recording has begun */
.dark{position:absolute;inset:0;background:#120f0d;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:#6a5d4e;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);opacity:0;pointer-events:none;transition:opacity 4.5s ease-in-out}
.dark.on{opacity:1;pointer-events:auto}
.dark .orb{width:150px;height:150px;border-radius:50%;
  background:radial-gradient(circle at 42% 38%,#c9733f 0%,#a8502f 45%,#6e2a26 100%);
  box-shadow:0 0 70px 10px rgba(168,80,47,.22);opacity:.6;transition:opacity 2s}
.dark .orb.beating{animation:beat 3.75s ease-in-out infinite}       /* sixteen a minute — the disharmonies, and the workbench */
.dark .orb.prakriti.beating{animation-duration:7.5s}                /* eight a minute — the Prakritis */
.dark .orb.fault{opacity:.45}
.dark .orb.closing{animation:none;opacity:.3;transition:opacity 3s}
@keyframes beat{0%,100%{transform:scale(1);opacity:.72}45%{transform:scale(1.07);opacity:1}}
.dark .count{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:'Cormorant Garamond',serif;font-size:96px;font-weight:300;
  color:#efe3d2;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 0 30px rgba(0,0,0,.6)}
.dark .word{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:18px;margin-top:42px;letter-spacing:.04em;min-height:22px}
.dark .line{font-size:11.5px;letter-spacing:.14em;margin-top:8px;min-height:16px;font-variant-numeric:tabular-nums;opacity:.8}
.dark .stop{position:absolute;bottom:calc(26px + env(safe-area-inset-bottom));font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#4f4538;padding:14px 30px}

/* ---- a soft word that passes ---- */
.toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(10px);
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:17px;color:var(--parchment);background:var(--accent);
  padding:10px 22px;border-radius:30px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}