/* FeedOS brand tokens + shared primitives for the console (tokens from feedos.org v3: dark violet, Lato, JetBrains Mono).
 * Shared by index.html and views/*.js. Views add their own prefixed classes (lad-, thr-, s3d-); do not redefine these. */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&family=JetBrains+Mono:wght@400;500&display=swap");
:root{
  --bg:#05060F; --bg-2:#0B0A14; --surface:#0D0C19; --surface-2:#171428; --surface-3:#1F1B36;
  --ink:#F4F2FA; --dim:#ABA5C0; --faint:#9A93B4; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.15);
  --violet:#7C5CFF; --lilac:#C4B5FD; --blue:#3D8BFF; --cyan:#22D3EE; --pink:#F472B6; --lime:#A3E635; --orange:#FB923C;
  --good:#34D399; --warn:#FBBF24; --serious:#F87171;
  --good-bg:rgba(52,211,153,.13); --warn-bg:rgba(251,191,36,.13); --serious-bg:rgba(248,113,113,.14); --blue-bg:rgba(61,139,255,.15); --violet-bg:rgba(124,92,255,.16);
  --grad:linear-gradient(120deg,#C4B5FD 0%,#7C5CFF 52%,#3D8BFF 100%);
  --f-ui:"Lato",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1); --r-card:18px; --r-chip:10px; --r-pill:99px;
  --console-shadow:0 40px 120px rgba(0,0,0,.6),0 0 80px rgba(124,92,255,.15);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:14px;line-height:1.45}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--lilac);outline-offset:2px}
code,.mono{font-family:var(--f-mono);font-size:12px}
.lbl{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:700}
.note{color:var(--faint);font-size:12px}
.panel{background:var(--surface);border-radius:var(--r-card);box-shadow:inset 0 0 0 1px var(--line);min-width:0}

/* status chips: icon + word, never colour alone (statuses come from data.js ST/chip()) */
.st{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:1px 8px;border-radius:var(--r-pill);white-space:nowrap}
.st.ok,.st.done{background:var(--good-bg);color:var(--good)} .st.limited{background:var(--warn-bg);color:var(--warn)} .st.blocked{background:var(--serious-bg);color:var(--serious)}
.st.soon,.st.auth,.st.now{background:var(--blue-bg);color:#7DB0FF} .st.plan,.st.next{background:rgba(255,255,255,.06);color:var(--dim)}
.st.ready{background:var(--violet-bg);color:var(--lilac)} .st.gated{background:var(--violet-bg);color:var(--lilac);box-shadow:inset 0 0 0 1px rgba(196,181,253,.35)}
.btn{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:14px;padding:7px 14px;font-weight:700;font-size:13px;background:rgba(255,255,255,.07);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn:hover{background:rgba(255,255,255,.12)} .btn[disabled]{opacity:.4;cursor:not-allowed}
.btn.primary{background:#6644F0;box-shadow:0 10px 40px rgba(124,92,255,.35)} .btn.primary:hover{background:#6F4EF5}
.btn.warn{background:var(--warn-bg);color:var(--warn);box-shadow:inset 0 0 0 1px rgba(251,191,36,.5)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line);font-size:12px;white-space:nowrap}
.pill.demo{background:var(--warn-bg);color:var(--warn);box-shadow:none;font-weight:700}

/* portrait avatar: round photo, state ring (member hue via --hue), badge (violet sparkle = AI agent, dark person = human).
 * Markup: <span class="av [sm|lg|xl]" data-s="working" style="--hue:#6D5BE0"><img src="..." alt=""><span class="badge ai|hu">svg</span></span> */
.av{position:relative;width:40px;height:40px;flex:none;border-radius:50%;background:var(--surface-2);--hue:var(--violet)}
.av img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.av::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;pointer-events:none}
.av[data-s="idle"]::after{border-color:color-mix(in srgb,var(--hue) 35%,transparent)}
.av[data-s="working"]::after{border-color:var(--hue);border-top-color:transparent;animation:av-spin 1.1s linear infinite}
.av[data-s="waiting"]::after{border-color:var(--warn);border-style:dashed;animation:av-pulse 1.6s ease-in-out infinite}
.av[data-s="blocked"]::after{border-color:var(--serious)}
.av[data-s="learned"]::after{border-color:var(--lilac);box-shadow:0 0 14px var(--violet)}
.av[data-s="done"]::after{border-color:color-mix(in srgb,var(--hue) 55%,transparent)}
.av.sm{width:30px;height:30px}.av.sm::after{inset:-3px}.av.lg{width:64px;height:64px}.av.lg::after{inset:-5px}.av.xl{width:96px;height:96px}.av.xl::after{inset:-6px}
.badge{position:absolute;right:-4px;bottom:-4px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 2px var(--surface);z-index:1}
.badge svg{width:10px;height:10px}.badge.ai{background:#7C5CFF}.badge.hu{background:#3B4A44}
.av.sm .badge{width:14px;height:14px;right:-4px;bottom:-4px}.av.sm .badge svg{width:8px;height:8px}
.av.lg .badge{width:22px;height:22px}.av.lg .badge svg{width:13px;height:13px}.av.xl .badge{width:28px;height:28px}.av.xl .badge svg{width:16px;height:16px}
.tag{font-size:10px;font-weight:700;padding:1px 6px;border-radius:5px;border:1px solid var(--line-2);color:var(--faint);white-space:nowrap;letter-spacing:.04em}
.tag.ai{color:var(--lilac);border-color:rgba(196,181,253,.5)}
@keyframes av-spin{to{transform:rotate(360deg)}} @keyframes av-pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.av[data-s="working"]::after,.av[data-s="waiting"]::after{animation:none}}