/* ============================================================
   SAIGA design system — implemented from the Claude Design handoff
   bundle (saiga-design-system). Warm, human, editorial: sand canvas,
   paper panels, deep ink text, terracotta ember accent, pine for trust.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,300..800;1,300..700&family=Geist+Mono:wght@400..600&display=swap');

:root {
  --font-display:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-sans:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --white:#FFFFFF; --paper:#FBF7EF; --sand:#F4ECDD; --sand-2:#EBE0CD; --sand-3:#E0D2BB;
  --line:#E2D7C4; --line-2:#D2C4AC;
  --ink:#1C1814; --ink-2:#4B4339; --ink-3:#847A6B; --ink-4:#A99E8C;

  --ember:#D85A34; --ember-deep:#B6431E; --ember-press:#9C381A; --ember-tint:#F7DECF; --ember-tint-2:#FBEDE3;
  --pine:#2E4B3B; --pine-deep:#213729; --pine-tint:#D9E3D7; --pine-tint-2:#EBF0E8;
  --saffron:#E7A23B; --saffron-tint:#F8E6C4;
  --success:#2E7D52; --success-tint:#DCEBE0; --warning:#C8821B; --warning-tint:#F7E7C6;
  --danger:#C0432B; --danger-tint:#F6DDD4;

  --r-xs:6px; --r-sm:9px; --r-md:13px; --r-lg:18px; --r-xl:26px; --r-pill:999px;
  --shadow-xs:0 1px 2px rgba(43,31,18,.06); --shadow-sm:0 2px 6px rgba(43,31,18,.07);
  --shadow-md:0 6px 18px rgba(43,31,18,.09),0 2px 6px rgba(43,31,18,.05);
  --shadow-lg:0 16px 40px rgba(43,31,18,.12),0 4px 12px rgba(43,31,18,.06);
  --shadow-ember:0 8px 24px rgba(184,67,30,.28);
  --ease-out:cubic-bezier(.22,1,.36,1); --dur-fast:130ms; --dur:220ms;
}

* { box-sizing:border-box; }
html,body { height:100%; }
body.saiga { margin:0; font-family:var(--font-sans); background:var(--sand); color:var(--ink);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv01"; overflow:hidden; }
.wrap { max-width:1120px; margin:0 auto; padding:0 24px; }

/* ---------- App shell (sidebar + main), from the app UI kit ---------- */
.app { display:flex; height:100vh; }
.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { height:56px; flex:none; border-bottom:1px solid var(--line); background:rgba(251,247,239,.85); backdrop-filter:blur(10px); display:flex; align-items:center; gap:14px; padding:0 24px; }
.topbar .ws { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--ink); }
.topbar .ws i { width:15px; height:15px; color:var(--ink-3); }
.topbar .tb-right { margin-left:auto; display:flex; align-items:center; gap:14px; color:var(--ink-3); }
.topbar .synced { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-3); }
.topbar .synced .dot { width:7px; height:7px; border-radius:999px; background:var(--success); }
.topbar i.act { width:18px; height:18px; cursor:pointer; }
.content { flex:1; overflow-y:auto; }
.content::-webkit-scrollbar { width:10px; }
.content::-webkit-scrollbar-thumb { background:var(--line-2); border-radius:999px; border:3px solid var(--sand); }

.sb { width:256px; flex:none; background:var(--paper); border-right:1px solid var(--line); display:flex; flex-direction:column; height:100vh; }
.sb-top { padding:16px 16px 8px; }
.sb-ask { margin:6px 12px; display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:var(--r-md); border:1px solid var(--line-2); background:var(--white); color:var(--ink-3); font-size:13.5px; box-shadow:var(--shadow-xs); cursor:pointer; }
.sb-ask i { width:16px; height:16px; color:var(--ember); }
.sb-ask .kbd { margin-left:auto; font-family:var(--font-mono); font-size:11px; border:1px solid var(--line); border-radius:5px; padding:1px 5px; color:var(--ink-3); }
.sb-nav { padding:10px; display:flex; flex-direction:column; gap:2px; }
.sb-nav a { display:flex; align-items:center; gap:11px; padding:8px 11px; border-radius:var(--r-sm); text-decoration:none; color:var(--ink-2); font-size:14.5px; font-weight:500; transition:background var(--dur-fast) var(--ease-out); }
.sb-nav a:hover { background:rgba(0,0,0,.04); }
.sb-nav a.active { background:var(--ember-tint); color:var(--ember-deep); font-weight:650; }
.sb-nav a i { width:18px; height:18px; flex:none; }
.sb-sec { padding:14px 16px 8px; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); }
.sb-src { padding:0 12px; display:flex; flex-direction:column; gap:1px; flex:1; overflow-y:auto; }
.sb-src .s { display:flex; align-items:center; gap:10px; padding:7px 11px; border-radius:var(--r-sm); }
.sb-src .s .g { width:16px; height:16px; border-radius:5px; flex:none; }
.sb-src .s .nm { flex:1; font-size:13.5px; color:var(--ink-2); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-src .s .sd { width:7px; height:7px; border-radius:999px; flex:none; }
.sb-user { border-top:1px solid var(--line); padding:12px 14px; display:flex; align-items:center; gap:10px; }
.sb-user .av { width:30px; height:30px; border-radius:999px; background:var(--pine); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex:none; }
.sb-user .nm { font-size:13px; font-weight:650; color:var(--ink); }
.sb-user .meta { font-size:11.5px; color:var(--ink-3); }

h1,.h1 { font-family:var(--font-display); font-weight:750; font-size:clamp(28px,3.2vw,40px); line-height:1.1; letter-spacing:-0.028em; color:var(--ink); margin:0; }
h3,.h3 { font-family:var(--font-sans); font-weight:650; font-size:19px; line-height:1.25; letter-spacing:-0.005em; color:var(--ink); margin:0; }
.lead { font-size:16px; color:var(--ink-2); }
.muted { color:var(--ink-3); }
.mono { font-family:var(--font-mono); font-feature-settings:"zero"; }
code { font-family:var(--font-mono); font-size:13px; background:var(--sand-2); padding:1px 6px; border-radius:5px; color:var(--ink-2); }
a { color:var(--ember-deep); text-decoration-thickness:1.5px; text-underline-offset:2px; }

/* ---------- Brand mark ---------- */
.brand { display:flex; align-items:center; gap:10px; }
.brand .mark { width:30px; height:30px; border-radius:10px; background:var(--ember); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:750; font-size:20px; flex:none; box-shadow:var(--shadow-ember); }
.brand .word { font-family:var(--font-sans); font-weight:800; font-size:21px; letter-spacing:-0.035em; color:var(--ink); }

/* ---------- Nav (warm tabs) ---------- */
.saiga-nav { display:flex; align-items:center; gap:18px; padding:16px 24px; background:var(--paper); border-bottom:1px solid var(--line); }
.saiga-nav .tabs { display:flex; gap:4px; margin-left:8px; }
.saiga-nav .tabs a { color:var(--ink-3); text-decoration:none; padding:8px 14px; border-radius:var(--r-md); font-size:14.5px; font-weight:550; transition:background var(--dur-fast) var(--ease-out); }
.saiga-nav .tabs a:hover { background:var(--sand-3); color:var(--ink-2); }
.saiga-nav .tabs a.active { background:var(--ember-tint); color:var(--ember-deep); font-weight:650; }
.saiga-nav .right { margin-left:auto; font-size:12.5px; color:var(--ink-3); display:flex; align-items:center; gap:7px; }
.saiga-nav .dot { width:7px; height:7px; border-radius:999px; background:var(--success); }

header.page { padding:26px 0 16px; }
header.page .sub { color:var(--ink-3); margin-top:6px; font-size:13.5px; }

/* ---------- Panels / cards ---------- */
.panel { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); }

/* ---------- Pills (status / quadrant / model / decision) ---------- */
.pill { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:650; padding:4px 11px; border-radius:var(--r-pill); white-space:nowrap; line-height:1.3; }
.pill.mono { font-family:var(--font-mono); font-weight:600; font-size:11px; }
/* quadrant */
.q-automate { background:var(--ember-tint); color:var(--ember-deep); }
.q-assist   { background:var(--success-tint); color:var(--success); }
.q-augment  { background:var(--saffron-tint); color:#7A5210; }
.q-human    { background:var(--sand-3); color:var(--ink-2); }
/* decision */
.dec-auto    { background:var(--pine-tint); color:var(--pine); }
.dec-propose { background:var(--warning-tint); color:#7A5210; }
.dec-ignore  { background:var(--sand-3); color:var(--ink-3); }
/* model */
.m-opus   { background:var(--ember-tint); color:var(--ember-deep); }
.m-sonnet { background:var(--pine-tint); color:var(--pine); }
.m-haiku  { background:var(--success-tint); color:var(--success); }
.m-none   { background:var(--sand-3); color:var(--ink-3); }

/* ---------- Buttons ---------- */
.btn { font-family:var(--font-sans); font-weight:600; font-size:14px; border-radius:var(--r-md); padding:9px 16px; border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:all var(--dur) var(--ease-out); }
.btn.primary { background:var(--ember); color:#fff; box-shadow:var(--shadow-ember); }
.btn.primary:hover { background:var(--ember-deep); }
.btn.secondary { background:var(--paper); color:var(--ink); border-color:var(--line-2); box-shadow:var(--shadow-xs); }

footer.page { padding:24px 0 48px; color:var(--ink-3); font-size:12.5px; border-top:1px solid var(--line); margin-top:18px; }