/* ============================================================
   KNOWLEDGE WORKSTATION — shared base (Kull OS)
   PNW palette: cool white, indigo ink, wheat-gold accent.
   Pure CSS. A copy of this file lives inside every app folder
   so each app is fully self-contained.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --gold:#f5c542; --gold-bright:#ffd84d; --amber:#f0a811; --amber-deep:#d98a06;
  --ink:#1b2a3d; --ink-2:#2b405c; --ink-3:#43607f;
  --forest:#27543d; --meadow:#4f7a3e; --hill:#367c5e; --moss:#5f7d3f;
  --sky:#8fb4d6; --sky-deep:#5b86ab; --water:#cfe0e2; --storm:#6e7884;
  --paper:#f6fafc; --paper-2:#ffffff; --paper-3:#eaf1f4; --paper-4:#dfe9ee;
  --line:#d8e3e9; --line-2:#c4d4dd; --muted:#56676f; --faint:#8294a0;
  --live:#4f9d4f; --danger:#d8553f; --info:#2f6fb0;
  --pixel:'Silkscreen',monospace; --sans:'Space Grotesk',system-ui,sans-serif; --mono:'Space Mono',ui-monospace,monospace;
  --r:5px; --r-lg:9px;
  --shadow:0 1px 0 rgba(32,18,51,.12),0 8px 24px -12px rgba(32,18,51,.30);
  --shadow-lg:0 3px 0 rgba(32,18,51,.16),0 24px 60px -20px rgba(32,18,51,.45);
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0; font-family:var(--sans); color:var(--ink);
  background:var(--paper); -webkit-font-smoothing:antialiased; line-height:1.5;
}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;}
a{color:inherit;text-decoration:none;}

/* ---------- App window shell ---------- */
.win{
  position:fixed; inset:0; display:flex; flex-direction:column;
  background:var(--paper-2); overflow:hidden;
}
/* Titlebar */
.titlebar{
  height:40px; flex:none; display:flex; align-items:center; gap:10px;
  padding:0 12px; background:var(--ink); color:#fff;
  border-bottom:1px solid #0d0719;
}
.titlebar__icon{width:20px;height:20px;border-radius:4px;background:var(--gold);
  display:grid;place-items:center;color:var(--ink);font-family:var(--pixel);font-size:9px;}
.titlebar__title{font-size:13px;font-weight:600;letter-spacing:.01em;}
.titlebar__title b{color:var(--gold);font-weight:700;}
.titlebar__sub{font-size:11px;color:#b9a9d6;}
.titlebar__spacer{flex:1;}
.winbtns{display:flex;gap:8px;align-items:center;}
.winbtn{width:13px;height:13px;border-radius:50%;border:none;}
.winbtn--min{background:#f5c542;}
.winbtn--max{background:#4f9d4f;}
.winbtn--close{background:#d8553f;}

/* Menubar */
.menubar{
  height:30px;flex:none;display:flex;align-items:center;gap:2px;padding:0 8px;
  background:var(--paper-3);border-bottom:1px solid var(--line);
  font-size:13px;color:var(--ink);
}
.menubar span{padding:4px 9px;border-radius:4px;}
.menubar span:hover{background:var(--paper-4);}

/* Toolbar */
.toolbar{
  flex:none;display:flex;align-items:center;gap:6px;padding:8px 12px;
  background:var(--paper-2);border-bottom:1px solid var(--line);
}
.tbtn{
  height:32px;min-width:32px;padding:0 10px;border:1px solid var(--line-2);
  background:var(--paper-2);border-radius:var(--r);color:var(--ink);
  font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;
}
.tbtn:hover{background:var(--paper-3);}
.tbtn--icon{padding:0;justify-content:center;font-size:15px;}
.tbtn--primary{background:var(--gold);border-color:var(--amber);color:var(--ink);font-weight:700;}
.tbtn--primary:hover{background:var(--gold-bright);}
.tbtn--ghost{border-color:transparent;background:transparent;}
.tsep{width:1px;height:20px;background:var(--line);margin:0 4px;}

/* Body split */
.body{flex:1;display:flex;min-height:0;}
.sidebar{
  width:220px;flex:none;background:var(--paper-3);border-right:1px solid var(--line);
  overflow:auto;padding:10px 0;
}
.side-h{font-family:var(--pixel);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);padding:12px 16px 6px;}
.side-i{display:flex;align-items:center;gap:10px;padding:7px 16px;font-size:13px;color:var(--ink);}
.side-i:hover{background:var(--paper-4);}
.side-i.active{background:var(--paper-2);box-shadow:inset 3px 0 0 var(--gold);font-weight:600;}
.side-i .ic{width:18px;text-align:center;opacity:.8;}
.content{flex:1;min-width:0;overflow:auto;background:var(--paper);}

/* Statusbar */
.statusbar{
  height:26px;flex:none;display:flex;align-items:center;gap:14px;padding:0 14px;
  background:var(--ink);color:#cbbce4;font-size:11px;font-family:var(--mono);
  border-top:1px solid #0d0719;
}
.statusbar .sb-r{margin-left:auto;display:flex;gap:14px;}
.statusbar b{color:var(--gold);font-weight:700;}

/* Pixel chrome bits */
.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;border-radius:999px;
  font-size:11px;font-weight:600;background:var(--paper-3);border:1px solid var(--line-2);}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--live);}
.pill--gold{background:var(--gold);border-color:var(--amber);color:var(--ink);}
.eyebrow{font-family:var(--pixel);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-deep);}
.scroll::-webkit-scrollbar{width:12px;height:12px;}
.scroll::-webkit-scrollbar-thumb{background:var(--line-2);border:3px solid transparent;background-clip:content-box;border-radius:10px;}