/* kavana - visual language
   Athletic, not playful. Black ground, one accent, heavy Hebrew type, square
   corners. Confidence comes from weight and space, never from decoration.
   Hebrew has no uppercase, so emphasis is carried by weight and scale. */

:root{
  --ink:#0A0A0A;
  --surface:#131313;
  --surface-2:#1C1C1C;
  --line:#2A2A2A;
  --paper:#FFFFFF;
  --muted:#8A8A8A;
  --dim:#5E5E5E;
  --volt:#D7FF3E;
  --volt-dim:#A8C82F;
  --danger:#FF4438;
  --pad:20px;
  --tap:52px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--ink);color:var(--paper)}
body{
  font-family:'Heebo',system-ui,sans-serif;
  font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
button,input,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{border:0;background:none;cursor:pointer}

/* ---- type ---- */
.display{font-weight:900;letter-spacing:-.03em;line-height:.92;font-size:clamp(34px,10vw,54px)}
.h1{font-weight:900;letter-spacing:-.02em;font-size:26px;line-height:1.1}
.h2{font-weight:800;font-size:19px;letter-spacing:-.01em}
.label{font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--muted)}
.body{font-size:15px;color:#D8D8D8}
.small{font-size:13px;color:var(--muted)}
.num{font-weight:900;font-size:clamp(40px,13vw,64px);line-height:.85;letter-spacing:-.04em;
     font-feature-settings:"tnum";direction:ltr}
.volt{color:var(--volt)}

/* ---- shell ---- */
#app{min-height:100dvh;display:flex;flex-direction:column;max-width:560px;margin:0 auto;
     position:relative}
.screen{flex:1;display:flex;flex-direction:column;padding:var(--pad);padding-bottom:96px;
        animation:rise .32s cubic-bezier(.16,1,.3,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.spacer{flex:1}

.topbar{display:flex;align-items:center;gap:12px;padding:16px var(--pad) 4px;
        min-height:56px}
.topbar .back{width:40px;height:40px;display:grid;place-items:center;font-size:22px;
              color:var(--muted);margin-inline-start:-8px}
.brand{font-weight:900;letter-spacing:.24em;font-size:12px}
.brand::after{content:"";display:inline-block;width:6px;height:6px;background:var(--volt);
              margin-inline-start:6px;vertical-align:middle}

/* ---- buttons ---- */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap);
     padding:14px 22px;font-weight:800;font-size:16px;letter-spacing:-.01em;
     transition:transform .12s ease,opacity .12s ease}
.btn:active{transform:scale(.985)}
.btn[disabled]{opacity:.35;pointer-events:none}
.btn-primary{background:var(--volt);color:#0A0A0A}
.btn-ghost{background:transparent;color:var(--paper);border:1.5px solid var(--line)}
.btn-dark{background:var(--surface-2);color:var(--paper)}
.btn-block{width:100%}
.btn-rec{background:var(--surface-2);border:1.5px solid var(--line)}
.btn-rec.on{background:var(--danger);border-color:var(--danger);color:#fff}

.dock{position:fixed;bottom:0;left:0;right:0;max-width:560px;margin:0 auto;
      padding:14px var(--pad) calc(14px + env(safe-area-inset-bottom));
      background:linear-gradient(to top,var(--ink) 66%,transparent);z-index:20}

/* ---- inputs ---- */
.field{width:100%;background:var(--surface);border:1.5px solid var(--line);
       padding:15px 16px;min-height:var(--tap);outline:none;transition:border-color .15s}
.field:focus{border-color:var(--volt)}
.field::placeholder{color:var(--dim)}
textarea.field{resize:vertical;min-height:104px;line-height:1.55}

/* ---- cards ---- */
.card{background:var(--surface);border:1.5px solid var(--line);padding:18px}
.card-accent{border-inline-start:3px solid var(--volt)}
.rule{height:1.5px;background:var(--line);margin:18px 0}

.stat-row{display:flex;gap:2px;margin-top:18px}
.stat{flex:1;background:var(--surface);padding:14px 12px;text-align:center}
.stat .num{font-size:32px}
.stat .label{margin-top:8px;font-size:10px;letter-spacing:.12em}

/* ---- choice chips ---- */
.choices{display:grid;gap:2px}
.choices.cols{grid-template-columns:repeat(4,1fr)}
.choice{background:var(--surface);border:1.5px solid transparent;padding:16px 14px;
        text-align:start;transition:all .15s}
.choice[aria-pressed="true"]{background:var(--volt);color:#0A0A0A;border-color:var(--volt)}
.choice[aria-pressed="true"] .small,.choice[aria-pressed="true"] .label{color:#0A0A0A;opacity:.72}
.choice .ttl{font-weight:800}
.choices.cols .choice{text-align:center;padding:18px 6px}
.choices.cols .choice .ttl{font-size:22px;font-weight:900;direction:ltr}

/* ---- progress ---- */
.bar{height:3px;background:var(--surface-2);overflow:hidden}
.bar > i{display:block;height:100%;background:var(--volt);width:0;
         transition:width .45s cubic-bezier(.16,1,.3,1)}
.steps{display:flex;gap:3px;margin-bottom:22px}
.steps i{flex:1;height:3px;background:var(--surface-2)}
.steps i.done{background:var(--volt)}

/* ---- question ---- */
.qnum{font-weight:900;font-size:13px;color:var(--volt);letter-spacing:.1em;direction:ltr}
.qtext{font-weight:800;font-size:21px;line-height:1.32;margin:10px 0 20px}
.qhint{color:var(--dim);font-size:13px;margin-top:10px}

/* ---- player ---- */
.scrub{width:100%;height:36px;display:block;touch-action:none}
.times{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);
       direction:ltr;font-feature-settings:"tnum"}
.transport{display:flex;align-items:center;justify-content:center;gap:24px;margin-top:22px}
.tbtn{width:56px;height:56px;display:grid;place-items:center;color:var(--paper);opacity:.85}
.tbtn:active{opacity:1}
.playbtn{width:84px;height:84px;background:var(--volt);color:#0A0A0A;display:grid;
         place-items:center;border-radius:50%}

/* ---- library ---- */
.lib-item{display:flex;align-items:center;gap:14px;padding:16px 0;
          border-bottom:1.5px solid var(--line);width:100%;text-align:start}
.lib-item .play{width:44px;height:44px;flex:0 0 44px;background:var(--surface-2);
                display:grid;place-items:center;color:var(--volt)}
.lib-meta{flex:1;min-width:0}
.lib-meta .t{font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;
             text-overflow:ellipsis}

.toast{position:fixed;inset-inline:16px;bottom:96px;max-width:528px;margin:0 auto;
       background:var(--danger);color:#fff;padding:14px 16px;font-weight:700;font-size:14px;
       z-index:60;animation:rise .2s ease}
.spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.25);border-top-color:var(--volt);
      border-radius:50%;animation:sp .7s linear infinite;display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}
.pulse{animation:pl 1.6s ease-in-out infinite}
@keyframes pl{0%,100%{opacity:1}50%{opacity:.45}}

/* ---- select ---- */
select.field{appearance:none;background-image:
  linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(0% + 18px) 50%,calc(0% + 24px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;padding-inline-start:40px}
select.field option{background:var(--surface);color:var(--paper)}
.stack{display:grid;gap:2px}

/* ---- candidate rows ---- */
.cand{display:flex;align-items:center;gap:12px;width:100%;text-align:start;
      background:var(--surface);border:1.5px solid transparent;padding:15px 16px;
      transition:border-color .15s}
.cand:active{border-color:var(--volt)}
.cand .badge{font-size:11px;font-weight:800;padding:3px 7px;background:var(--surface-2);
             color:var(--muted);direction:ltr}
.cand.top .badge{background:var(--volt);color:#0A0A0A}

/* ---- position picker ---- */
/* One row per role group, so a group never wraps into its neighbour. */
.pos-group{margin-top:12px}
.pos-group .label{margin-bottom:6px}
.pos-row{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px}
.pos{background:var(--surface);border:1.5px solid transparent;padding:14px 8px;text-align:center;
     font-weight:800;transition:all .15s}
.pos[aria-pressed="true"]{background:var(--volt);color:#0A0A0A;border-color:var(--volt)}
.pos .label{display:block;margin-top:4px;font-size:10px}
.pos[aria-pressed="true"] .label{color:#0A0A0A;opacity:.7}

/* ---- chapter recorder ---- */
.chapter-head{display:flex;align-items:baseline;gap:10px;margin-bottom:4px}
.chapter-head .n{font-weight:900;font-size:13px;color:var(--volt);direction:ltr}
.prompts{display:grid;gap:2px;margin:18px 0}
.prompt{display:flex;gap:12px;align-items:flex-start;background:var(--surface);
        padding:14px 15px;border-inline-start:3px solid transparent;
        transition:border-color .25s,opacity .25s}
.prompt .tick{flex:0 0 18px;height:18px;margin-top:2px;border:1.5px solid var(--dim);
              display:grid;place-items:center;font-size:11px;color:transparent;
              transition:all .25s}
.prompt.done{border-inline-start-color:var(--volt);opacity:.55}
.prompt.done .tick{background:var(--volt);border-color:var(--volt);color:#0A0A0A}
.prompt .txt{flex:1;font-size:15px;line-height:1.4}

.recwrap{display:grid;place-items:center;gap:14px;padding:10px 0 4px}
.recbtn{width:92px;height:92px;border-radius:50%;background:var(--danger);
        display:grid;place-items:center;color:#fff;font-weight:900;
        box-shadow:0 0 0 0 rgba(255,68,56,.55);transition:transform .15s}
.recbtn:active{transform:scale(.96)}
.recbtn.on{background:var(--volt);color:#0A0A0A;animation:rec 1.6s ease-out infinite}
@keyframes rec{0%{box-shadow:0 0 0 0 rgba(215,255,62,.5)}
               100%{box-shadow:0 0 0 26px rgba(215,255,62,0)}}
.rectime{font-variant-numeric:tabular-nums;direction:ltr;font-weight:800;font-size:15px}

.followup{background:var(--surface-2);border-inline-start:3px solid var(--volt);
          padding:15px 16px;margin-top:2px}
.readybar{display:flex;align-items:center;gap:10px;background:var(--surface);
          padding:13px 15px;margin-top:2px;border-inline-start:3px solid var(--volt)}

/* ---- onboarding agent ---- */
.xbtn{margin-inline-start:auto;width:40px;height:40px;display:grid;place-items:center;
      font-size:22px;color:var(--muted)}
.orbwrap{display:grid;place-items:center;height:240px;margin:12px 0}
/* The orb: layered shades of volt drifting inside a sphere. Motion is driven
   from JS by the live voice level (--e, 0..1), so it breathes with whoever is
   talking - fast and bright when the agent speaks, softer while it listens. */
.orb{position:relative;width:170px;height:170px;border-radius:50%;overflow:hidden;
     isolation:isolate;will-change:transform;
     background:radial-gradient(circle at 50% 58%,#2E3D0B 0%,#1A2207 50%,#0B0E04 100%);
     box-shadow:0 0 calc(24px + 70px*var(--e,0)) calc(2px + 10px*var(--e,0))
                rgba(215,255,62,calc(.12 + .38*var(--e,0))),
                inset 0 0 30px rgba(0,0,0,.55);
     transition:opacity .6s, filter .6s}
.orb i{position:absolute;inset:-25%;border-radius:50%;filter:blur(14px);
       mix-blend-mode:screen;will-change:transform;opacity:.82}
.orb i:nth-child(1){background:radial-gradient(circle at 36% 40%,#D7FF3E 0 11%,transparent 33%)}
.orb i:nth-child(2){background:radial-gradient(circle at 64% 63%,#7FA01C 0 14%,transparent 38%)}
.orb i:nth-child(3){background:radial-gradient(circle at 58% 30%,#F3FFB8 0 4%,transparent 18%);
                    filter:blur(8px)}
.orb i:nth-child(4){background:conic-gradient(from 0deg,transparent 0 14%,rgba(215,255,62,.32) 22%,
                    transparent 36%,rgba(96,122,14,.55) 58%,transparent 76%,rgba(238,255,140,.22) 88%,
                    transparent);filter:blur(20px);opacity:.9}
/* A thin sheen so it reads as a sphere, not a flat disc. */
.orb::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
            background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.22),transparent 38%);
            box-shadow:inset 0 0 0 1px rgba(215,255,62,.18)}
.orb.listening{filter:brightness(.88)}
.orb.idle{filter:brightness(.6)}
.caption{min-height:4.5em;font-size:19px;font-weight:700;line-height:1.35;text-align:center;
         color:#EDEDED}
.caption.you{color:var(--muted);font-weight:400;font-size:15px}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:13px;
         color:var(--muted)}
.consent input{margin-top:3px;accent-color:var(--volt)}
.choice:disabled{opacity:.4;cursor:not-allowed}
[hidden]{display:none!important}