/* KOS Jarvis. Ported unchanged from reference/karl-owner-view.html and
   reference/simon-commercial-view.html. Approved one-off departure from KOS
   Style Spec v1.1 (dot grid, mono font, darker background): do not correct
   it back to spec. Additions for the app shell are at the bottom. */
:root{
  --bg:#050c19;--panel:#112449;--rule:#233c6b;--ink:#eaf0fb;--muted:#9fb2d3;
  --accent:#9b8cff;--accent-soft:#262457;--on-accent:#0b1a33;
  --good:#5fd49a;--good-soft:#123a3a;--warn:#f5b94b;--warn-soft:#3a3122;--bad:#ff7d7d;--bad-soft:#3d1f35;
  --font-display:"Archivo",system-ui,sans-serif;--font-body:"Public Sans",system-ui,sans-serif;--font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:28px;
  --radius-sm:8px;--radius-md:10px;--radius-pill:999px;
  color-scheme:dark;box-sizing:border-box;
  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:#050c19;--panel:#112449;--ink:#eaf0fb}}
:root[data-theme="dark"]{--bg:#050c19;--panel:#112449;--ink:#eaf0fb}
@media print{:root{--bg:#ffffff;--panel:#f4f6fb;--rule:#d5dbe8;--ink:#0b1a33;--muted:#4a5b7a;--accent:#5b4bd6;--accent-soft:#eeebff;--on-accent:#ffffff;
  --good:#1a7f4e;--good-soft:#e3f5ec;--warn:#8a5a00;--warn-soft:#fdf2dc;--bad:#b42323;--bad-soft:#fbe5e5;color-scheme:light}
  .jarvis,.kos-btn,.chip,.signout{display:none!important}}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--bg)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background-color:var(--bg);background-image:radial-gradient(#2a4677 1.2px,transparent 1.2px);background-size:22px 22px;color:var(--ink);font-family:var(--font-body);font-size:15px;line-height:1.5;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
button,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
h1,h2,h3{font-family:var(--font-display);margin:0;letter-spacing:-.01em;text-wrap:balance}
h1{font-size:clamp(26px,4vw,36px);font-weight:800;line-height:1.1}
h2{font-size:21px;font-weight:700}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.wrap{max-width:1180px;margin:0 auto;padding:28px var(--space-5) 60px;display:flex;flex-direction:column;gap:var(--space-6)}
.panel{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius-md)}

header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--bg);border-bottom:1px solid var(--rule)}
.bar{max-width:1180px;margin:0 auto;padding:12px var(--space-5);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3)}
.mark{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:800;font-size:15px}
.mark .sq{width:26px;height:26px;border-radius:7px;background:transparent;border:1.5px solid var(--accent);color:var(--accent);display:grid;place-items:center;font-size:13px;font-weight:800}
.mark .app{font-weight:700;color:var(--muted)}
.meta{font-size:12px;color:var(--muted)}
footer{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;padding:14px var(--space-5);border-top:1px solid var(--rule);font-size:12px;color:var(--muted)}

.row{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:stretch}
.jarvis{flex:1 1 340px;min-width:0;padding:24px;display:flex;flex-direction:column;align-items:center;gap:16px}
.orb{position:relative;width:min(220px,60vw);aspect-ratio:1;display:flex;align-items:center;justify-content:center}
.ring{position:absolute;border-radius:50%}
.r1{inset:0;border:1px solid var(--rule);opacity:1;animation:breath 4s ease-in-out infinite}
.r2{inset:6%;border:2px dashed var(--accent);opacity:.55;animation:spin 18s linear infinite}
.r3{inset:15%;border:1px solid var(--rule);border-top-color:transparent;border-bottom-color:transparent;opacity:.6;animation:spinb 9s linear infinite}
.core{position:relative;width:44%;aspect-ratio:1;border-radius:50%;background:var(--bg);border:2px solid var(--accent);animation:pulse 3.2s ease-in-out infinite}
.core::after{content:"";position:absolute;inset:34%;border-radius:50%;background:var(--accent)}
.orb.listening .r2{animation-duration:4s}.orb.listening .core{animation-duration:1.1s}
.orb.thinking .r2{animation-duration:1.6s}.orb.thinking .r3{animation-duration:2.4s}.orb.thinking .core{opacity:.8;animation-duration:2s}
.orb.speaking .core{animation:talk .45s ease-in-out infinite}.orb.speaking .r2{animation-duration:6s}
@keyframes spin{to{transform:rotate(360deg)}}@keyframes spinb{to{transform:rotate(-360deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes talk{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes breath{0%,100%{opacity:.3}50%{opacity:.7}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
.state{text-align:center;display:flex;flex-direction:column;gap:2px}
.state b{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.state span{font-size:14px;color:var(--muted)}
.ask{width:100%;display:flex;gap:var(--space-2)}
.ask input{flex:1 1 auto;min-width:0;min-height:44px;padding:0 16px;border-radius:var(--radius-pill);border:1px solid var(--rule);background:var(--bg)}
.iconbtn{width:44px;height:44px;flex:0 0 44px;border-radius:var(--radius-pill);border:1px solid var(--rule);background:var(--panel);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.iconbtn:hover{border-color:var(--muted)}
.iconbtn.primary{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.iconbtn[aria-pressed="true"]{border-color:var(--ink);background:var(--bg)}
.chips{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center}
.chip{min-height:36px;padding:0 14px;border-radius:var(--radius-pill);border:1px solid var(--rule);background:var(--panel);font-size:13px;font-weight:600;cursor:pointer}
.chip:hover{border-color:var(--muted)}
.toggles{font-size:13px;color:var(--muted)}
.toggles label{display:flex;gap:6px;align-items:center;cursor:pointer;min-height:32px}
.toggles input{accent-color:var(--ink)}
.note{font-size:13px;color:var(--muted);text-align:center;min-height:18px}

.brief{flex:999 1 520px;min-width:0;padding:24px;display:flex;flex-direction:column;gap:16px}
.answer{display:none;padding:16px;border-radius:var(--radius-sm);background:var(--bg);border:1px solid var(--rule)}
.answer.on{display:block}
.answer .q{font-size:13px;color:var(--muted);margin-bottom:6px}
.answer .a{white-space:pre-wrap;font-size:17px;line-height:1.55}
.acts{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:var(--radius-md);overflow:hidden;margin:0;padding:0;list-style:none}
.act{display:grid;grid-template-columns:40px 1fr auto;gap:14px;padding:14px var(--space-4);border-bottom:1px solid var(--rule);align-items:start}
.act:last-child{border-bottom:none}
.act .n{font-family:var(--font-mono);font-weight:500;font-size:14px;color:var(--muted);padding-top:2px}
.act .body{display:flex;flex-direction:column;gap:4px;min-width:0}
.act .ttl{font-weight:600}
.act .d{font-size:14px;color:var(--muted)}
.act .who{font-size:13px;color:var(--muted)}
@media (max-width:640px){.act{grid-template-columns:30px 1fr}.act .val{grid-column:2}}

.verdict{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--space-3)}
.v{display:flex;flex-direction:column;gap:6px;padding:var(--space-4);border-radius:var(--radius-md);border:1px solid var(--rule);background:var(--panel)}
.v .fig{font-family:var(--font-display);font-size:28px;font-weight:800;line-height:1.1;color:var(--muted)}
.v p{margin:0;font-size:14px;color:var(--muted)}

.k-chip{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:var(--radius-pill);background:var(--panel);color:var(--muted);border:1px solid var(--rule);white-space:nowrap}
.k-chip.good{background:var(--good-soft);color:var(--good);border-color:transparent}
.k-chip.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.k-chip.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}

.agents{flex:999 1 520px;min-width:0;display:flex;flex-direction:column;gap:var(--space-3)}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px}
.count{font-size:13px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-3)}
.agent{text-align:left;padding:var(--space-4);display:flex;flex-direction:column;gap:8px;cursor:pointer;background:var(--panel);border:1px solid var(--rule);border-radius:var(--radius-md);min-height:44px}
.agent:hover{border-color:var(--muted)}
.agent .t{display:flex;justify-content:space-between;align-items:center;gap:8px}
.agent .nm{font-family:var(--font-display);font-weight:700;font-size:16px}
.agent .nt{font-size:13px;color:var(--muted)}

.jobs{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:var(--space-3)}
.job{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px var(--space-4);border:0;border-bottom:1px solid var(--rule);width:100%;background:transparent;text-align:left;cursor:pointer;min-height:44px}
.job:last-child{border-bottom:0}
.job:hover .jn{text-decoration:underline}
.jn{font-weight:600}
.jr{font-size:13px;color:var(--muted)}
.disp{padding:var(--space-4);display:flex;flex-direction:column;gap:8px}
.disp .dl{display:flex;justify-content:space-between;align-items:center;gap:12px}

.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.meta{font-family:var(--font-mono)}
.jarvis{position:relative}
.jarvis .cn{position:absolute;width:14px;height:14px;border-color:var(--muted);border-style:solid;opacity:.7}
.cn.tl{top:10px;left:10px;border-width:1px 0 0 1px}.cn.tr{top:10px;right:10px;border-width:1px 1px 0 0}
.cn.bl{bottom:10px;left:10px;border-width:0 0 1px 1px}.cn.br{bottom:10px;right:10px;border-width:0 1px 1px 0}
.wave{display:flex;gap:4px;align-items:center;height:22px}
.wave i{display:block;width:3px;height:4px;border-radius:2px;background:var(--muted);transition:height .2s}
.wave.listening i,.wave.speaking i{background:var(--ink);animation:bar .9s ease-in-out infinite}
.wave.thinking i{animation:bar 1.6s ease-in-out infinite;background:var(--muted)}
.wave i:nth-child(2){animation-delay:.1s}.wave i:nth-child(3){animation-delay:.2s}.wave i:nth-child(4){animation-delay:.3s}.wave i:nth-child(5){animation-delay:.4s}.wave i:nth-child(6){animation-delay:.25s}.wave i:nth-child(7){animation-delay:.05s}
@keyframes bar{0%,100%{height:4px}50%{height:20px}}
.sys{display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.sys span{display:inline-flex;align-items:center;gap:7px}
.dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}
.dot.good{background:var(--good);animation:blink 2.4s ease-in-out infinite}.dot.warn{background:var(--warn)}.dot.bad{background:var(--bad)}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.log{font-family:var(--font-mono);font-size:12.5px;line-height:1.6;padding:12px 14px;border-radius:var(--radius-sm);background:var(--bg);border:1px solid var(--rule);max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.log .l{color:var(--muted);white-space:pre-wrap;word-break:break-word}
.log .l b{font-weight:500;color:var(--ink)}
.answer .a{font-family:var(--font-body)}
.jr{font-family:var(--font-mono);font-size:12px}
.jcols{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.jm{font-family:var(--font-mono);font-size:12px;color:var(--muted);white-space:nowrap}
.count{font-family:var(--font-mono);font-size:12px}
.k-chip{font-family:var(--font-mono);font-weight:500;letter-spacing:.04em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- App shell additions (not in the reference files) ------------------- */
/* Layout wrappers that were inline style attributes in the reference; moved
   here so the CSP can forbid inline styles. */
.intro{display:flex;flex-direction:column;gap:6px}
.section{display:flex;flex-direction:column;gap:var(--space-3)}
.row.split{align-items:flex-start;gap:var(--space-6)}
.job-main{min-width:0}
/* A connected figure reads in ink; "Not connected" stays muted as designed. */
.v .fig.live{color:var(--ink)}

.barend{display:flex;align-items:center;gap:var(--space-4)}
.signout{margin:0}
.signout button{font-family:var(--font-mono);font-size:12px;color:var(--muted);background:transparent;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.signout button:hover{color:var(--ink)}

.gate{max-width:440px;margin:0 auto;padding:12vh var(--space-5) 60px}
.gate .panel{padding:28px;display:flex;flex-direction:column;gap:var(--space-4)}
.gate p{margin:0;color:var(--muted)}
.gate form{display:flex;flex-direction:column;gap:var(--space-3);margin:0}
.gate label{font-size:13px;color:var(--muted)}
.gate input[type="email"],.gate input[type="text"]{min-height:44px;padding:0 16px;border-radius:var(--radius-pill);border:1px solid var(--rule);background:var(--bg);width:100%}
.gate input[name="code"]{font-family:var(--font-mono);font-size:18px;letter-spacing:.3em}
.gate a{color:var(--ink);font-size:13px;text-underline-offset:3px}
.btn{min-height:44px;padding:0 20px;border-radius:var(--radius-pill);border:1px solid var(--ink);background:var(--ink);color:var(--bg);font-weight:600;cursor:pointer}
.btn.quiet{background:var(--panel);border-color:var(--rule);color:var(--ink)}
.btn.quiet:hover{border-color:var(--muted)}
.gate .err{color:var(--bad)}
.gate .devs{display:flex;flex-wrap:wrap;gap:var(--space-2)}

/* --- Phase 2: live Paprika panels ---------------------------------------- */
.v .figrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.k-chip.tag{margin-left:6px;vertical-align:middle;text-transform:uppercase}
.job-empty{padding:14px var(--space-4);font-size:14px;color:var(--muted)}
/* The inner scroll box is for a phone only, where the cards sit below the jobs.
   At desktop width the list shows every row. */
@media (max-width:640px){.joblist.scroll{max-height:640px;overflow-y:auto}}
.sys span[title]{cursor:help}
@media print{.joblist.scroll{max-height:none;overflow:visible}}
/* The owner's job column carries live rows now, so it gets a little more room. */
.jobs{flex-basis:400px}
/* Keep the "Margin so far" label on the same line as its chip. */
.mgroup{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}

/* --- Phase C: reminders in the brief ---------------------------------------- */
.act.urgent{box-shadow:inset 3px 0 0 var(--bad)}
.act.urgent .ttl{color:var(--bad)}
.act-done{min-height:36px;padding:0 14px;font-size:13px;align-self:center}
@media (max-width:640px){.act-done{grid-column:2;justify-self:start}}
@media print{.act-done{display:none!important}}

/* --- Phase F: sign-in option and phone layout ------------------------------ */
.gate label.check{display:flex;gap:8px;align-items:center;min-height:32px;cursor:pointer;color:var(--ink)}
/* On a phone: Jarvis first (orb and ask box, then the brief), then margin watch,
   then jobs, then the figure cards and the rest. The status dots move to the
   end so the ask box is on the first screen. */
@media (max-width:640px){
  .wrap{padding-top:16px;gap:var(--space-5)}
  .intro{display:contents}
  .intro .eyebrow{display:none}
  .intro h1{font-size:22px}
  .intro .sys{order:9}
  .sec-watch,.sec-actions{order:1}
  .row.split,.sec-jobs{order:2}
  .sec-figures{order:3}
  .row.split .jobs{order:-1}
  .jarvis{padding:16px;gap:12px}
  .brief{padding:16px}
  .orb{width:min(150px,40vw)}
  .barend .meta{display:none}
}

/* --- Cash card: extra lines under a figure card's note ------------------------ */
.v p.line{font-size:13px}
.v p.line.warn{color:var(--warn)}
.v p.line.bad{color:var(--bad)}
.v p.line.good{color:var(--muted)}

/* --- Cash card: Details toggle ---------------------------------------------------- */
.v details.more{font-size:13px;color:var(--muted)}
.v details.more summary{cursor:pointer;min-height:32px;display:flex;align-items:center;gap:6px;color:var(--ink);font-weight:600;list-style:none}
.v details.more summary::-webkit-details-marker{display:none}
.v details.more summary::before{content:"+";font-family:var(--font-mono);color:var(--muted)}
.v details.more[open] summary::before{content:"−"}
.v details.more p{margin:4px 0 0}
@media print{.v details.more summary{display:none}}

/* --- Management actions ------------------------------------------------------------- */
.agroup{display:flex;align-items:center;gap:10px;padding:10px var(--space-4);border-bottom:1px solid var(--rule);background:var(--bg)}
.mact{display:flex;align-items:flex-start;gap:12px;padding:12px var(--space-4);border-bottom:1px solid var(--rule);cursor:pointer;min-height:44px}
.mact:last-child{border-bottom:0}
.mact input{width:20px;height:20px;flex:0 0 20px;margin-top:2px;accent-color:var(--accent);cursor:pointer}
.mact-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.mact .jr{font-size:13px;color:var(--muted)}
.mact.mine{box-shadow:inset 3px 0 0 var(--accent)}
.mact.done .jn{text-decoration:line-through;color:var(--muted)}

/* --- Meeting mode ----------------------------------------------------------------- */
.meetbtn{min-height:32px;padding:0 12px;border-radius:var(--radius-pill);border:1px solid var(--rule);background:var(--panel);font-size:12px;font-weight:600;cursor:pointer}
.meetbtn:hover{border-color:var(--muted)}
.meetbtn[aria-pressed="true"]{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.voice{display:flex;align-items:center;gap:8px;min-height:32px;padding:0 12px;border-radius:var(--radius-pill);border:1px solid var(--rule);background:var(--panel);font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.voice .dot{margin:0}
.voice.listening{color:var(--ink)}
.voice.greeting,.voice.capturing,.voice.answering{border-color:var(--bad);color:var(--bad)}
.voice.greeting .dot,.voice.capturing .dot,.voice.answering .dot{background:var(--bad);animation:meetpulse 1.4s ease-in-out infinite}
.voice.muted,.voice.paused,.voice.off{opacity:.75}
@keyframes meetpulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.5)}}
.orb.meeting .core{animation:meetcore 1.6s ease-in-out infinite;border-color:var(--bad)}
.orb.meeting .core::after{background:var(--bad)}
.orb.meeting .r2{border-color:var(--bad)}
@keyframes meetcore{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.orb.meeting.speaking .core{animation:talk .45s ease-in-out infinite}
.iconbtn:disabled{opacity:.4;cursor:not-allowed}
@media (max-width:640px){.voice{order:-1;flex:1 1 100%;justify-content:center}}
@media print{.meetbtn,.voice{display:none!important}}