/* AVA design tokens + primitives.
 * PORTED from ava@8f1713e26c13:ava/web/design.py (TOKENS_CSS + PRIMITIVES_CSS) — the brand
 * carries as ASSETS, not code (component brief). Light :root + [data-theme="dark"] override;
 * static/theme.js picks the theme before first paint.
 */
:root{
  /* surfaces / ink */
  --bg:#ffffff; --fg:#0a0c10; --muted:#586273; --line:#e7ebf0;
  --surface:#ffffff; --surface2:#f4f8fd; --raise:#ffffff;
  /* brand blue (kept ~current, with a ramp for tints) */
  --blue-50:#eef5fe; --blue-100:#dbeafd; --blue-200:#bcd8fb; --blue-300:#93c0f6;
  --blue-400:#63a3f1; --blue-500:#4aa3f0; --blue-600:#2f7fd6; --blue-700:#2560ba;
  --blue-800:#204c93; --blue-900:#1b3c72;
  --accent:#4aa3f0; --accent-text:#0b66c2; --accent-ink:#06243f; --on-accent:#ffffff;
  --accent-soft:rgba(74,163,240,.12); --accent-line:rgba(74,163,240,.50);
  /* semantic status */
  --ok:#0f8f50; --ok-soft:rgba(15,143,80,.12);
  --warn:#9a5a08; --warn-soft:rgba(194,112,10,.13);
  --danger:#c5453b; --danger-soft:rgba(197,69,59,.13);
  --info:#0e7c8b; --info-soft:rgba(14,124,139,.13);
  /* memory-graph node categories (were TYPE_COLORS JS literals) */
  --cat-identity:#4aa3f0; --cat-preference:#7e57ff; --cat-goal:#0f8f50;
  --cat-person:#e6a44e; --cat-event:#e0568a; --cat-state:#2bb6c4;
  --cat-task:#9a5af0; --cat-artifact:#8a93a6; --cat-insight:#c2700a;
  /* status-breakdown segments (were seg-* literals) */
  --seg-waiting:#9a86d6; --seg-proposed:#9aa6b6; --seg-review:#4db6c4;
  --seg-failed:#c5453b; --seg-abandoned:#6b7280;
  --muted-chip:#9aa0aa; --scrim:rgba(8,11,18,.52);
  --grid:rgba(10,12,16,.035);
  /* elevation */
  --shadow-sm:0 1px 2px rgba(10,12,16,.06);
  --shadow:0 1px 2px rgba(10,12,16,.05),0 8px 24px rgba(10,12,16,.05);
  --shadow-lg:0 2px 6px rgba(10,12,16,.06),0 18px 44px rgba(10,12,16,.10);
  /* type */
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-display:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --fs-hero:clamp(34px,6vw,52px); --fs-h1:26px; --fs-h2:20px; --fs-h3:16px;
  --fs-body:15px; --fs-sm:13px; --fs-xs:11px;
  /* shape + space */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:24px; --sp-7:32px; --sp-8:48px;
}
[data-theme="dark"]{
  --bg:#050609; --fg:#eef1f6; --muted:#9aa2b1; --line:#1a1f29;
  --surface:#0b0e14; --surface2:#0f131b; --raise:#11151d;
  --blue-50:#0c1a2e; --blue-100:#102541; --blue-200:#173357; --blue-300:#1f4a80;
  --blue-400:#2f66b4; --blue-500:#4f8ef0; --blue-600:#6ea3f4; --blue-700:#8fb8f7;
  --blue-800:#b3d0fb; --blue-900:#d8e7fe;
  --accent:#2f4cc0; --accent-text:#7e9bff; --accent-ink:#ffffff; --on-accent:#ffffff;
  --accent-soft:rgba(60,98,220,.18); --accent-line:rgba(110,140,255,.45);
  --ok:#34d27b; --ok-soft:rgba(52,210,123,.14);
  --warn:#e6a44e; --warn-soft:rgba(224,154,62,.16);
  --danger:#e5645a; --danger-soft:rgba(229,100,90,.16);
  --info:#3fc9dc; --info-soft:rgba(63,201,220,.16);
  --cat-identity:#5fb0f5; --cat-preference:#9a7cff; --cat-goal:#34d27b;
  --cat-person:#f0b968; --cat-event:#f07bb0; --cat-state:#4fd0e0;
  --cat-task:#b483ff; --cat-artifact:#9aa3b5; --cat-insight:#e0a44e;
  --seg-waiting:#a99bde; --seg-proposed:#aab4c2; --seg-review:#5fcbd8;
  --seg-failed:#e5645a; --seg-abandoned:#8a93a6;
  --muted-chip:#7b8291; --scrim:rgba(0,0,0,.55);
  --grid:rgba(255,255,255,.035);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 1px 2px rgba(0,0,0,.5),0 12px 30px rgba(0,0,0,.45);
  --shadow-lg:0 2px 6px rgba(0,0,0,.5),0 22px 50px rgba(0,0,0,.55);
}

/* ---- primitives ---- */
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--font);
  font-size:var(--fs-body);line-height:1.55;-webkit-font-smoothing:antialiased;
  transition:background .3s,color .3s;min-height:100vh}
a{color:var(--accent-text);text-decoration:none}
h1{font-family:var(--font-display);font-weight:700;letter-spacing:-.02em;
  font-size:var(--fs-h1);line-height:1.2}
h2{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h2);
  letter-spacing:-.015em}
h3{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);
  letter-spacing:-.01em}
.wrap{max-width:560px;margin:0 auto;padding:var(--sp-8) var(--sp-5)}
.wrap.wide{max-width:760px}
/* buttons */
.btn{display:inline-block;background:var(--accent);color:var(--on-accent);border:0;
  border-radius:var(--r-sm);padding:11px 16px;font:inherit;font-weight:600;
  line-height:1.2;cursor:pointer;text-decoration:none;transition:filter .15s ease}
.btn:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent;color:var(--accent-text);border:1px solid var(--accent-line)}
.btn.danger{background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger)}
/* fields */
.field{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--surface);color:var(--fg);font:inherit;margin:6px 0}
.field:focus{border-color:var(--accent-line)}
.field:focus:not(:focus-visible){outline:none}
/* cards + tiles */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--shadow);padding:var(--sp-5)}
.card--soft{border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:var(--sp-6)}
.card+.card{margin-top:var(--sp-4)}
.tile{display:block;background:var(--surface);color:var(--fg);border:1px solid var(--line);
  border-radius:var(--r-md);padding:var(--sp-4);box-shadow:var(--shadow-sm)}
.tile--link{transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.tile--link:hover{border-color:var(--accent-line);transform:translateY(-1px);box-shadow:var(--shadow)}
/* chips */
.badge{display:inline-block;padding:2px 8px;border-radius:var(--r-pill);
  background:var(--accent-soft);color:var(--accent-text);font-size:var(--fs-xs)}
.badge--ok{background:var(--ok-soft);color:var(--ok)}
.badge--warn{background:var(--warn-soft);color:var(--warn)}
.badge--danger{background:var(--danger-soft);color:var(--danger)}
.badge--info{background:var(--info-soft);color:var(--info)}
.pill{display:inline-block;padding:2px 8px;border-radius:var(--r-pill);font-size:var(--fs-xs);
  background:var(--accent-soft);color:var(--accent-text);font-variant-numeric:tabular-nums}
/* helper text */
.sub{color:var(--muted);font-size:var(--fs-sm)}
/* numeric/data cells: readable AIVAS UI face with aligned figures (no mono face) */
.mono,.num{font-family:var(--font);font-variant-numeric:tabular-nums}
/* two-column layout row (renamed from dashboard .row to avoid collision) */
.l-row{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.l-row>*{flex:1;min-width:280px}
/* banners (shared; replaces inline <p>/ad-hoc card banners) */
.banner{border-radius:var(--r-md);padding:12px 14px;margin:0 0 14px;font-size:var(--fs-sm);
  border:1px solid var(--line);background:var(--surface2)}
.banner--error{background:var(--danger-soft);border-color:var(--danger);color:var(--danger)}
.banner--success{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.banner--info{background:var(--accent-soft);border-color:var(--accent-line);color:var(--accent-text)}
/* forms in prose/marketing context only (scoped so dashboard .ghost isn't restyled) */
.prose input,.prose textarea{width:100%;padding:11px 12px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface);color:var(--fg);font:inherit;margin:6px 0}
code{font-family:var(--font-mono);background:var(--surface2);padding:2px 6px;border-radius:6px}
::selection{background:var(--accent-soft)}
:focus-visible{outline:2px solid var(--accent-line);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- chat island (component 01) ---- */
.chat-page{max-width:820px;margin:0 auto;padding:var(--sp-4) var(--sp-4) var(--sp-6);
  display:flex;flex-direction:column;min-height:100vh}
.chat-page__bar{display:flex;align-items:center;justify-content:space-between;
  padding-bottom:var(--sp-3);border-bottom:1px solid var(--line)}
.chat-page__bar .brandmark strong{font-family:var(--font-display);letter-spacing:-.02em}
.chat-page__nav a{margin-left:var(--sp-4);font-size:var(--fs-sm)}
#chat-root{flex:1;display:flex;flex-direction:column;min-height:0}
.chat{flex:1;display:flex;flex-direction:column;min-height:0;gap:var(--sp-3);
  padding-top:var(--sp-3)}
.chat__status{display:flex;align-items:center;gap:var(--sp-2);color:var(--muted);
  font-size:var(--fs-xs)}
.chat__status .dot{width:8px;height:8px;border-radius:50%;background:var(--muted-chip)}
.chat__status[data-state="live"] .dot{background:var(--ok)}
.chat__status[data-state="reconnecting"] .dot{background:var(--warn)}
.chat__status[data-state="offline"] .dot{background:var(--danger)}
.chat__log{flex:1;overflow-y:auto;list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:var(--sp-3)}
.msg{max-width:min(78%,620px);padding:10px 14px;border-radius:var(--r-lg);
  background:var(--surface2);border:1px solid var(--line)}
.msg--user{align-self:flex-end;background:var(--accent-soft);border-color:var(--accent-line)}
.msg--assistant{align-self:flex-start}
.msg--pending{opacity:.6}
.msg__text{white-space:pre-wrap;overflow-wrap:anywhere}
/* Markdown blocks inside one assistant bubble. */
.msg__md p + p, .msg__md ul, .msg__md pre { margin-top: 6px; }
.msg__md p { margin: 0; }
.msg__code { overflow-x: auto; }
.msg__artifacts{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-2)}
.artifact{display:flex;flex-direction:column;gap:2px;padding:10px 12px;min-width:180px}
.artifact__title{font-weight:600}
.chat__call{align-self:flex-start}
.chat__composer{display:flex;gap:var(--sp-2);align-items:center}
.chat__composer .field{margin:0}
@media (max-width:520px){.msg{max-width:92%}}

/* ---- dashboard ---- */
.dash__bar{display:flex;align-items:center;justify-content:space-between;
  margin-bottom:var(--sp-5);padding-bottom:var(--sp-3);border-bottom:1px solid var(--line)}
.dash__bar .brandmark strong{font-family:var(--font-display);letter-spacing:-.02em}
.goal{padding:var(--sp-3) 0;border-top:1px solid var(--line)}
.goal:first-of-type{border-top:0}
.goal__tasks{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:flex;
  flex-direction:column;gap:6px}
.activity{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;
  max-height:340px;overflow-y:auto}
.activity__row{display:flex;gap:var(--sp-2);align-items:baseline}
.activity__label{font-weight:500}

/* ---- sign-in primitives (ported from V1's welcome/auth cards) ----
   The Google button is NOT `.btn`: Google's brand terms want their own button treatment (their
   mark, neutral surface, our border), and styling it as our primary accent button both breaks
   those terms and tells the user the wrong thing about who they are about to trust. It lives
   here rather than in welcome.css because /login uses it too, and one deployment must not have
   two differently-shaped Google buttons. */
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:999px;
  padding:12px 14px;font:inherit;font-weight:600;cursor:pointer;text-decoration:none;
  transition:border-color .15s,background .15s}
.btn-google:hover{border-color:var(--accent-line);background:var(--surface2)}
.btn-google svg{flex:none}
/* A labelled rule. `.divider` centres its text between two hairlines, which is how the
   break-glass password form announces itself as the secondary door rather than a second
   equal option. */
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:var(--fs-sm)}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
/* The auth card OUTSIDE the landing page (i.e. /login): the landing page's own stylesheet
   positions `.authcard` inside a grid, so the standalone modifier restores the centred column
   the shell would otherwise have given it. */
.authcard--standalone{max-width:420px;margin:0 auto}