/* ============================================================
   SIGIL — phone mockups (rich, animated screens)
   ============================================================ */
.phonewrap{display:flex;justify-content:center;perspective:1600px;will-change:transform}
.phone{
  width:min(340px,84vw);aspect-ratio:9/19.3;border-radius:46px;padding:11px;position:relative;
  background:linear-gradient(155deg,#1b201f,#090c0b 62%,#050706);
  box-shadow:var(--shadow),0 0 0 1px rgba(255,255,255,.06),0 0 0 11px #0a0d0c,0 0 0 12px rgba(255,255,255,.04),0 0 70px rgba(54,236,78,.09);
  transform-style:preserve-3d;will-change:transform;
}
.phone::after{content:"";position:absolute;inset:11px;border-radius:36px;pointer-events:none;z-index:6;
  background:linear-gradient(120deg,rgba(255,255,255,.10),transparent 22%,transparent 78%,rgba(255,255,255,.05));mix-blend-mode:screen}
.screen{width:100%;height:100%;border-radius:36px;overflow:hidden;position:relative;display:flex;flex-direction:column;
  background:radial-gradient(120% 70% at 50% -8%,rgba(54,236,78,.08),#050706 52%)}
.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:33%;height:20px;background:#000;border-radius:99px;z-index:8;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.island::after{content:"";position:absolute;right:9px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 40% 40%,#1d2b00,#0a1100);box-shadow:0 0 4px rgba(54,236,78,.5)}

/* status bar */
.statusbar{display:flex;align-items:center;justify-content:space-between;padding:13px 22px 4px;font-family:"Space Mono";font-size:11px;color:var(--ink);position:relative;z-index:7}
.statusbar .sig{display:flex;align-items:center;gap:5px}
.statusbar .bars{display:flex;align-items:flex-end;gap:1.5px;height:10px}
.statusbar .bars i{width:2.5px;background:var(--ink);border-radius:1px}
.statusbar .bars i:nth-child(1){height:30%}.statusbar .bars i:nth-child(2){height:55%}.statusbar .bars i:nth-child(3){height:78%}.statusbar .bars i:nth-child(4){height:100%}
.statusbar .batt{width:22px;height:11px;border:1px solid rgba(237,237,230,.6);border-radius:3px;position:relative;padding:1.5px}
.statusbar .batt::after{content:"";position:absolute;right:-3px;top:50%;transform:translateY(-50%);width:1.5px;height:5px;background:rgba(237,237,230,.6);border-radius:0 1px 1px 0}
.statusbar .batt i{display:block;height:100%;width:72%;background:var(--acc);border-radius:1.5px}

/* app header */
.apphead{display:flex;align-items:center;justify-content:space-between;padding:6px 18px 8px;font-family:"Space Mono";font-size:9.5px;letter-spacing:.16em;color:var(--muted);text-transform:uppercase;position:relative;z-index:7}
.apphead .l{display:flex;align-items:center;gap:7px;color:var(--ink)}
.apphead .gmark{width:11px;height:11px}

.scr-body{flex:1;padding:4px 15px 16px;overflow:hidden;display:flex;flex-direction:column;gap:10px;position:relative;z-index:7}
.uicard{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.012));border:1px solid var(--hair);border-radius:16px;padding:13px 14px;position:relative}
.uicard.acc{border-color:var(--line);background:linear-gradient(180deg,rgba(54,236,78,.07),rgba(54,236,78,.012))}
.uih{font-family:"Syne";font-weight:700;font-size:14px;letter-spacing:0}
.uismall{font-size:11.5px;color:var(--muted);line-height:1.5}
.ink{color:var(--ink)}
.accent{color:var(--acc)}
.eym{font-family:"Space Mono";font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}
.row{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between}
.tag-g{font-family:"Space Mono";font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:#060708;background:var(--acc);padding:4px 9px;border-radius:99px;display:inline-flex;align-items:center;gap:4px;font-weight:700}
.tag-o{font-family:"Space Mono";font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--acc);border:1px solid var(--line);padding:4px 9px;border-radius:99px;display:inline-flex;align-items:center;gap:4px}
.tag-m{font-family:"Space Mono";font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);border:1px solid var(--hair2);padding:4px 9px;border-radius:99px;display:inline-block}
.av{width:28px;height:28px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  font-family:"Syne";font-weight:700;font-size:11px;color:var(--acc);background:linear-gradient(135deg,#1d2622,#0c100e);border:1px solid var(--hair)}
.divline{height:1px;background:var(--hair);margin:1px 0}

/* mini magma orb in screen (faceted, glowing — echoes the hero organism) */
.miniorb{width:60px;height:60px;border-radius:50%;margin:4px auto 2px;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 50% 54%,rgba(190,255,150,.95),rgba(54,236,78,.65) 26%,rgba(10,70,24,.85) 58%,#030a04 100%);
  box-shadow:0 0 34px rgba(54,236,78,.5),inset 0 0 16px rgba(0,0,0,.55),inset 0 0 10px rgba(54,236,78,.45);
  animation:orbPulse 4s ease-in-out infinite}
.miniorb::before{content:"";position:absolute;inset:0;border-radius:50%;mix-blend-mode:overlay;opacity:.55;
  background:
    repeating-conic-gradient(from 0deg,rgba(0,0,0,.6) 0deg 6deg,transparent 6deg 13deg),
    repeating-radial-gradient(circle at 50% 50%,transparent 0 5px,rgba(0,0,0,.45) 5px 6px)}
.miniorb::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle at 44% 40%,rgba(255,255,255,.25),transparent 42%);mix-blend-mode:screen}
@keyframes orbPulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.05);filter:brightness(1.15)}}
@keyframes spin{to{transform:rotate(360deg)}}

/* waveform (live) */
.wave{display:flex;align-items:center;gap:3px;height:34px;margin-top:8px}
.wave span{flex:1;background:linear-gradient(var(--acc),var(--acc2));border-radius:2px;opacity:.9;
  animation:eq 1.05s ease-in-out infinite;min-height:10%}
@keyframes eq{0%,100%{height:16%}50%{height:100%}}

/* play button with progress ring */
.playbtn{position:relative;width:38px;height:38px;flex:none}
.playbtn svg{position:absolute;inset:0;transform:rotate(-90deg)}
.playbtn .pc{fill:none;stroke:var(--hair2);stroke-width:2}
.playbtn .pp{fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;
  stroke-dasharray:113;stroke-dashoffset:113;transition:stroke-dashoffset .2s linear}
.playbtn .tri{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--acc);font-size:12px}

/* progress bars */
.bar{height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:9px}
.bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--acc2),var(--acc));
  box-shadow:0 0 10px var(--acc-soft);transition:width 1.4s var(--ease)}

/* agenda timeline */
.tline{position:relative;padding-left:16px;margin-top:2px}
.tline::before{content:"";position:absolute;left:3px;top:6px;bottom:6px;width:1px;background:var(--hair2)}
.tev{position:relative;margin-bottom:10px}
.tev::before{content:"";position:absolute;left:-16px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--panel);border:1px solid var(--muted)}
.tev.now::before{background:var(--acc);border-color:var(--acc);box-shadow:0 0 10px var(--acc)}
.tev .tm{font-family:"Space Mono";font-size:9.5px;letter-spacing:.06em;color:var(--acc)}
.tev.soft .tm{color:var(--muted)}

/* category chips row */
.chiprow{display:flex;gap:6px}
.cchip{font-family:"Space Mono";font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:99px;
  color:var(--muted);border:1px solid var(--hair2)}
.cchip.on{color:#060708;background:var(--acc);border-color:var(--acc);font-weight:700}

/* typing draft caret */
.draft{min-height:34px}
.draft .cursor{display:inline-block;width:6px;height:13px;background:var(--acc);margin-left:1px;vertical-align:-2px;animation:blink 1s steps(1) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

/* unread dot */
.udot{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 8px var(--acc);flex:none}

@media (prefers-reduced-motion:reduce){
  .wave span,.miniorb,.miniorb::before,.miniorb::after,.draft .cursor{animation:none}
}

/* ============================================================
   App-faithful screen components (briefing / inbox / agenda / goals)
   ============================================================ */
/* sync counts */
.sync{display:flex;gap:14px;flex-wrap:wrap;font-family:"Space Mono";font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sync b{color:var(--acc);font-weight:700;margin-left:5px}
.sync .pl{color:var(--acc);margin-right:5px}

/* news category cards (briefing home) */
.news{display:flex;flex-direction:column;gap:8px}
.newscard{border:1px solid var(--cat,var(--line));border-radius:10px;padding:9px 11px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.006));position:relative}
.newscard .ncat{font-family:"Space Mono";font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--cat,var(--acc))}
.newscard .ntitle{font-size:11.5px;color:var(--ink);line-height:1.35;margin-top:3px}
.cat-ai{--cat:#39e6e6}.cat-mkt{--cat:#ff5b54}.cat-biz{--cat:#e8c23a}.cat-tech{--cat:#43e85a}.cat-env{--cat:#5ad17a}.cat-energy{--cat:#e8a13a}

/* narrating-now badge */
.narr{display:inline-flex;align-items:center;gap:6px;font-family:"Space Mono";font-size:8px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--acc);border:1px solid var(--line);border-radius:99px;padding:4px 9px;background:var(--acc-soft2)}
.narr .d{width:6px;height:6px;border-radius:50%;background:var(--acc);box-shadow:0 0 7px var(--acc);animation:narrpulse 1.4s ease-in-out infinite}
@keyframes narrpulse{0%,100%{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}

/* ask bar + mic */
.askbar{display:flex;align-items:center;gap:8px;margin-top:auto}
.askbar .inp{flex:1;border:1px solid var(--hair2);border-radius:99px;padding:10px 14px;font-size:11px;color:var(--muted);background:rgba(255,255,255,.02)}
.mic{width:36px;height:36px;border-radius:50%;flex:none;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--acc);font-size:14px;background:var(--acc-soft2)}
.mic.lg{width:58px;height:58px;font-size:20px}

/* voice capture box (agenda/goals) */
.miccap{border:1px solid var(--hair2);border-radius:14px;padding:16px 12px;text-align:center;background:rgba(255,255,255,.02)}
.miccap .lbl{font-family:"Space Mono";font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:9px}

/* add row */
.addrow{display:flex;gap:6px;align-items:stretch}
.addrow .f{flex:1;border:1px solid var(--hair2);border-radius:8px;padding:9px 11px;font-size:11px;color:var(--muted);background:rgba(255,255,255,.02)}
.addrow .dt{width:74px;flex:none;border:1px solid var(--hair2);border-radius:8px;padding:9px 8px;font-size:9.5px;color:var(--dim);background:rgba(255,255,255,.02);display:flex;align-items:center}
.addbtn{border:1px solid var(--acc);background:linear-gradient(180deg,var(--acc2),var(--acc));color:#051006;font-family:"Space Mono";font-weight:700;font-size:9px;letter-spacing:.06em;text-transform:uppercase;border-radius:8px;padding:0 11px;display:flex;align-items:center}

/* section header (collapsible look) */
.sect{display:flex;align-items:center;justify-content:space-between;font-family:"Space Mono";font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);padding:2px 0}
.sect .c{color:var(--muted)}
.subsect{font-family:"Space Mono";font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* event card (agenda) */
.evcard{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;padding:10px 11px;background:linear-gradient(180deg,rgba(54,236,78,.05),rgba(54,236,78,.01))}
.evcheck{width:24px;height:24px;border-radius:6px;border:1px solid var(--line);color:var(--acc);display:flex;align-items:center;justify-content:center;font-size:12px;flex:none}
.evtag{font-family:"Space Mono";font-size:7.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);line-height:1.2;width:48px;flex:none}
.evx{margin-left:auto;color:var(--dim);font-size:13px}

/* goal card */
.goalcard{border:1px solid var(--hair);border-radius:13px;padding:12px 13px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.008));position:relative}
.goalcard .gh{display:flex;align-items:center;gap:8px}
.goalcard .gi{font-size:14px;filter:grayscale(.1)}
.goalcard .gt{font-family:"Syne";font-weight:700;font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.goalcard .gtgt{margin-left:auto;font-size:12px;opacity:.9}
.goalcard .gsub{font-size:10.5px;color:var(--muted);margin-top:2px}
.goalcard .gpct{font-family:"Space Mono";font-size:10px;color:var(--acc);text-align:right;margin-top:-14px}
.goalcard .gmeta{font-family:"Space Mono";font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);margin-top:8px}
.pillbtn{display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);border-radius:10px;padding:11px;
  font-family:"Space Mono";font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--acc);background:var(--acc-soft2)}