/* Exodus Portal — ratified D4 blend: layered cards · Eva-first · journal calm · light cosmic register.
   Both themes authored (dark = home theme, light = paper-cool). */
:root{
  --bg0:#0A101C; --bg1:#14243A;
  --ink:#D9DEE7; --ink-hi:#F0F4F8; --mut:#8B96A8; --faint:#5A6478;
  --card:rgba(255,255,255,.045); --card-hi:rgba(255,255,255,.08); --line:rgba(255,255,255,.09);
  --eva:#4FD6C4; --eva-dim:rgba(79,214,196,.16); --eva-line:rgba(79,214,196,.4);
  --amber:#F0B463; --amber-dim:rgba(240,180,99,.14);
  --crit:#E0705F; --good:#59C98B;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --r:14px;
  color-scheme: dark;
}
:root[data-theme="light"]{
  --bg0:#EEF2F7; --bg1:#DEE7F2;
  --ink:#243040; --ink-hi:#101826; --mut:#5D6B80; --faint:#8C99AC;
  --card:rgba(255,255,255,.75); --card-hi:#FFFFFF; --line:rgba(20,40,70,.12);
  --eva:#0F8A79; --eva-dim:rgba(15,138,121,.10); --eva-line:rgba(15,138,121,.45);
  --amber:#B0621F; --amber-dim:rgba(176,98,31,.12);
  --crit:#B0442F; --good:#2F7D4C;
  --shadow:0 10px 26px rgba(30,50,80,.14);
  color-scheme: light;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); font:15px/1.5 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:radial-gradient(1400px 700px at 50% -14%, var(--bg1) 0%, var(--bg0) 58%) fixed;
  overflow-x:hidden;
}
#stars{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5}
:root[data-theme="light"] #stars{opacity:.14}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer; padding:0}
input,select,textarea{font:inherit; color:var(--ink-hi)}
::placeholder{color:var(--faint)}
a{color:var(--eva)}

#app{position:relative; z-index:1; display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden}

/* ---------- header ---------- */
header.bar{
  display:flex; align-items:center; gap:14px; padding:10px 18px;
  border-bottom:1px solid var(--line); backdrop-filter:blur(10px);
  position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg0) 72%, transparent);
}
.orb{width:26px; height:26px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 35% 30%, #B9F6EC, var(--eva) 62%, #16544B);
  box-shadow:0 0 16px var(--eva-line); cursor:pointer}
@media (prefers-reduced-motion:no-preference){
  .orb{animation:orbPulse 3.4s ease-in-out infinite}
  @keyframes orbPulse{0%,100%{box-shadow:0 0 12px var(--eva-line)}50%{box-shadow:0 0 26px var(--eva-line)}}
}
.crumb{font-size:13px; font-weight:650; color:var(--mut); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.crumb b{color:var(--ink-hi)} .crumb .sep{color:var(--faint); margin:0 7px}
.bar .spacer{flex:1}
.lens{display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; font-size:11.5px; font-weight:700; flex:0 0 auto}
.lens button{padding:5px 14px; color:var(--mut); transition:all .18s}
.lens button.sel{background:var(--eva-dim); color:var(--eva)}
.iconbtn{font-size:12px; font-weight:700; color:var(--mut); border:1px solid var(--line); border-radius:9px; padding:6px 12px; transition:all .15s; flex:0 0 auto}
.iconbtn:hover{color:var(--ink-hi); border-color:var(--eva-line)}
.rolechip{font-size:10px; letter-spacing:.08em; font-weight:800; color:var(--faint); text-transform:uppercase}

/* ---------- layout: main + eva dock ---------- */
#shell{display:flex; flex:1; min-height:0}
main#view{flex:1; min-width:0; overflow-y:auto; padding:20px clamp(14px,3vw,34px) 90px}
main#view > *{max-width:1060px; margin-left:auto; margin-right:auto}
#evadock{width:380px; flex:0 0 auto; border-left:1px solid var(--line); display:flex; flex-direction:column;
  background:color-mix(in srgb, var(--bg0) 55%, transparent); backdrop-filter:blur(12px);
  transition:margin-right .25s ease}
#evadock.hidden{margin-right:-380px}

/* ---------- cards ---------- */
.rv{opacity:0; transform:translateY(14px); animation:rv .5s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes rv{to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.rv{animation:none; opacity:1; transform:none}}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; box-shadow:var(--shadow); position:relative;
  transition:transform .18s ease, border-color .18s ease, background .18s ease;
}
.card.click{cursor:pointer}
.card.click:hover{transform:translateY(-3px); border-color:var(--eva-line); background:var(--card-hi)}
.card:focus-visible{outline:2px solid var(--eva); outline-offset:2px}

/* one-thing banner (journal spirit) */
.onething{border-color:var(--amber); background:linear-gradient(140deg, var(--amber-dim), transparent 65%)}
.onething .lbl{font-size:10px; letter-spacing:.16em; font-weight:800; color:var(--amber); text-transform:uppercase}
.onething h2{margin:4px 0 2px; font-size:20px; color:var(--ink-hi); line-height:1.3}
.onething .sub{font-size:12.5px; color:var(--mut)}

.sect{font-size:10.5px; letter-spacing:.15em; font-weight:800; color:var(--mut); text-transform:uppercase; margin:26px 0 10px; display:flex; align-items:center; gap:10px}
.sect .n{color:var(--faint); font-weight:700}
.sect .toggle{margin-left:auto; display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; text-transform:none; letter-spacing:0}
.sect .toggle button{padding:3px 12px; font-size:11px; font-weight:700; color:var(--mut)}
.sect .toggle button.sel{background:var(--card-hi); color:var(--ink-hi)}

/* needs-you rows */
.needrow{display:flex; align-items:center; gap:12px; padding:11px 14px; margin-bottom:8px}
.needrow .stripe{width:3px; align-self:stretch; border-radius:2px; background:var(--amber)}
.needrow .stripe.crit{background:var(--crit)}
.needrow .t{flex:1; min-width:0}
.needrow .t b{display:block; font-size:13.5px; color:var(--ink-hi); font-weight:650}
.needrow .t span{font-size:11px; color:var(--mut)}
.needrow .due{font-size:10.5px; font-weight:700; color:var(--amber); white-space:nowrap}

/* stream / entity card grid */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
.scard .id{font-size:9.5px; letter-spacing:.14em; font-weight:800; color:var(--faint)}
.scard h3{margin:3px 0 4px; font-size:15px; color:var(--ink-hi)}
.scard .na{font-size:11.5px; color:var(--mut); min-height:34px}
.scard .bau{font-size:9.5px; color:var(--faint); margin-top:8px}
.meter{height:5px; border-radius:3px; background:color-mix(in srgb, var(--ink) 12%, transparent); overflow:hidden; margin-top:9px}
.meter i{display:block; height:100%; background:var(--amber); border-radius:3px; transition:width .8s cubic-bezier(.2,.7,.3,1)}
.meter i.crit{background:var(--crit)} .meter i.good{background:var(--good)}
.mline{display:flex; justify-content:space-between; font-size:10px; color:var(--faint); margin-top:5px}
.defect{font-size:10.5px; font-weight:700; color:var(--crit); margin-top:7px}

/* task rows + status pills */
.trow{display:flex; align-items:center; gap:11px; padding:10px 14px; margin-bottom:7px}
.trow .t{flex:1; min-width:0}
.trow .t b{display:block; font-size:13px; color:var(--ink-hi); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.trow .t span{font-size:10.5px; color:var(--mut)}
.pill{font-size:9.5px; font-weight:800; letter-spacing:.05em; padding:3px 9px; border-radius:999px; text-transform:uppercase; flex:0 0 auto}
.pill.inbox{background:color-mix(in srgb, var(--mut) 18%, transparent); color:var(--mut)}
.pill.next{background:color-mix(in srgb, var(--good) 16%, transparent); color:var(--good)}
.pill.active{background:var(--amber-dim); color:var(--amber)}
.pill.waiting{background:color-mix(in srgb, var(--crit) 14%, transparent); color:var(--crit)}
.pill.done{background:color-mix(in srgb, var(--good) 10%, transparent); color:var(--faint); text-decoration:line-through}
.lenschip{font-size:9px; font-weight:700; color:var(--faint); border:1px solid var(--line); border-radius:4px; padding:1px 5px}

/* stream header with across-navigation (Heimdall pattern) */
.streamhead{display:flex; align-items:center; gap:14px; margin-bottom:16px}
.streamhead .arrow{font-size:20px; color:var(--faint); padding:4px 10px; border-radius:8px}
.streamhead .arrow:hover{color:var(--eva); background:var(--card)}
.streamhead h2{margin:0; font-size:22px; color:var(--ink-hi)}
.streamhead .bau{font-size:11px; color:var(--mut)}

/* detail view */
.detail h2{font-size:20px; color:var(--ink-hi); margin:2px 0 8px}
.kv{display:grid; grid-template-columns:110px 1fr; gap:6px 14px; font-size:13px; margin:12px 0}
.kv dt{color:var(--mut); font-size:11px; text-transform:uppercase; letter-spacing:.08em; padding-top:2px}
.kv dd{margin:0; color:var(--ink)}
.statusrow{display:flex; gap:6px; flex-wrap:wrap; margin:10px 0}
.statusrow button{border:1px solid var(--line); border-radius:8px; padding:5px 12px; font-size:11.5px; font-weight:700; color:var(--mut)}
.statusrow button.sel{border-color:var(--eva-line); color:var(--eva); background:var(--eva-dim)}
.actbtn{border:1px solid var(--eva-line); color:var(--eva); border-radius:9px; padding:7px 16px; font-size:12.5px; font-weight:700; transition:all .15s}
.actbtn:hover{background:var(--eva-dim)}
.actbtn.amber{border-color:var(--amber); color:var(--amber)}
.actbtn.amber:hover{background:var(--amber-dim)}
.wochip{display:inline-flex; gap:8px; align-items:center; font-size:11px; font-weight:700; border:1px solid var(--line); border-radius:8px; padding:5px 10px; color:var(--mut)}
.wochip b{color:var(--eva)}
input.edit, textarea.edit, select.edit{width:100%; background:var(--card); border:1px solid var(--line); border-radius:9px; padding:8px 11px; font-size:13px}
textarea.edit{min-height:70px; resize:vertical}

/* week view */
.week{display:grid; grid-template-columns:repeat(7,1fr); gap:8px; overflow-x:auto}
.day{min-width:120px; padding:11px 12px}
.day .dh{font-size:10.5px; font-weight:800; color:var(--mut); text-transform:uppercase; letter-spacing:.08em}
.day .dh b{color:var(--ink-hi); display:block; font-size:15px; letter-spacing:0}
.day.today{border-color:var(--eva-line)}
.day .chipdue{display:block; font-size:10.5px; font-weight:600; color:var(--ink-hi); background:var(--amber-dim); border-radius:6px; padding:4px 7px; margin-top:7px; text-align:left; width:100%}
.day .sit{font-size:9.5px; font-weight:700; color:var(--eva); margin-top:7px}

/* ---------- Eva dock ---------- */
#evadock .ehead{display:flex; align-items:center; gap:9px; padding:13px 16px; border-bottom:1px solid var(--line)}
#evadock .ehead .nm{font-weight:800; letter-spacing:.04em; color:var(--ink-hi)}
#evadock .ehead .st{font-size:10px; color:var(--mut)}
#evadock .ehead .close{margin-left:auto; color:var(--faint); font-size:16px}
#msgs{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px}
.msg{max-width:92%; border-radius:12px; padding:9px 13px; font-size:13px; line-height:1.5}
.msg.eva{background:var(--card); border:1px solid var(--line); color:var(--ink); align-self:flex-start}
.msg.you{background:var(--amber-dim); border:1px solid color-mix(in srgb, var(--amber) 35%, transparent); color:var(--ink-hi); align-self:flex-end}
.msg.sys{font-size:11px; color:var(--faint); align-self:center; background:none; border:none}
.msg.eva p{margin:.3em 0} .msg.eva code{background:color-mix(in srgb,var(--ink) 12%,transparent); padding:1px 4px; border-radius:4px; font-size:.9em}
.acard{border:1px solid var(--eva-line); background:var(--eva-dim); border-radius:12px; padding:10px 13px; align-self:stretch}
.acard .k{font-size:9px; letter-spacing:.14em; font-weight:800; color:var(--eva); text-transform:uppercase}
.acard .v{font-size:12.5px; color:var(--ink-hi); margin:4px 0 3px}
.acard .r{font-size:10.5px; color:var(--mut); margin-bottom:8px}
.acard .btns{display:flex; gap:7px}
.acard .ok{background:var(--eva); color:#04231E; font-weight:800; border-radius:7px; padding:5px 14px; font-size:11px}
.acard .no{border:1px solid var(--line); color:var(--mut); border-radius:7px; padding:5px 14px; font-size:11px}
.acard.donea{opacity:.55} .acard .res{font-size:10.5px; color:var(--good); font-weight:700}
.acard .res.err{color:var(--crit)}
#evain{display:flex; gap:9px; padding:12px 14px 16px; border-top:1px solid var(--line)}
#evain textarea{flex:1; background:var(--card); border:1px solid var(--eva-line); border-radius:11px; padding:9px 13px; font-size:13px; resize:none; height:44px}
#evain button{color:var(--eva); font-weight:800; font-size:13px}
.offline{border:1px solid var(--crit); color:var(--crit); background:color-mix(in srgb, var(--crit) 8%, transparent); border-radius:10px; padding:8px 12px; font-size:11.5px; margin:10px 14px 0}

/* ---------- capture + login overlays ---------- */
.overlay{position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; background:rgba(4,8,16,.6); backdrop-filter:blur(6px)}
:root[data-theme="light"] .overlay{background:rgba(220,228,240,.6)}
.panel{width:min(440px, 92vw); background:var(--bg0); border:1px solid var(--line); border-radius:16px; padding:22px 24px; box-shadow:var(--shadow)}
.panel h3{margin:0 0 4px; color:var(--ink-hi)}
.panel .hint{font-size:11.5px; color:var(--mut); margin-bottom:14px}
.panel .g1{font-size:10.5px; color:var(--amber); margin-top:10px}
.panel .row2{display:flex; gap:8px; margin-top:10px}
.panel .primary{background:var(--eva); color:#04231E; font-weight:800; border-radius:9px; padding:9px 18px; font-size:13px}
.panel .ghost{border:1px solid var(--line); color:var(--mut); border-radius:9px; padding:9px 14px; font-size:12px}

/* ---------- phone (Eva-first per D4) ---------- */
#bottomnav{display:none}
@media (max-width:820px){
  #evadock{position:fixed; inset:0; width:100%; z-index:30; border-left:none; background:var(--bg0)}
  #evadock.hidden{margin-right:0; display:none}
  main#view{padding:14px 14px 92px}
  .grid{grid-template-columns:1fr 1fr}
  .week{grid-template-columns:repeat(7,minmax(110px,1fr))}
  #bottomnav{display:flex; position:fixed; bottom:0; left:0; right:0; z-index:25;
    border-top:1px solid var(--line); background:color-mix(in srgb, var(--bg0) 88%, transparent); backdrop-filter:blur(12px)}
  #bottomnav button{flex:1; padding:11px 0 max(11px, env(safe-area-inset-bottom)); font-size:10px; font-weight:800; letter-spacing:.06em; color:var(--faint); text-transform:uppercase}
  #bottomnav button.sel{color:var(--eva)}
  .onething h2{font-size:17px}
}
@media (max-width:480px){ .grid{grid-template-columns:1fr} }