/* OSAVUG — Omarchy desktop in a website. Dark Catppuccin-ish theme with
   Savannah gold accents (City Hall dome). */

:root{
  --bg:#0b0e14; --bg2:#11141c; --bar:#151823;
  --fg:#cdd6f4; --dim:#6c7086; --acc:#e5c07b; /* gold */
  --acc2:#89b4fa; --ok:#a6e3a1; --err:#f38ba8;
  --border:#1e2230; --sel:#20303f;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{
  background:var(--bg); color:var(--fg);
  font-family:"JetBrains Mono",monospace; font-size:15px;
  overflow:hidden; cursor:default;
}
.dim{color:var(--dim)}
#boot{position:fixed;inset:0;background:#000;z-index:50;transition:opacity .6s}

/* ---- Waybar ---- */
#waybar{
  position:fixed;top:0;left:0;right:0;height:34px;z-index:30;
  background:var(--bar);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;font-size:13px;user-select:none;
}
.wb-left,.wb-right{display:flex;gap:12px;align-items:center}
.wb-ws{padding:2px 8px;border-radius:6px;color:var(--dim);cursor:pointer}
.wb-ws.on{background:var(--sel);color:var(--acc)}
.wb-ws:hover{background:var(--sel)}
#ws-title{color:var(--dim);font-size:12px}
#wb-clock{color:var(--acc)}

/* ---- Workspaces ---- */
.workspace{position:fixed;inset:34px 0 56px;display:none;padding:18px;gap:16px}
.workspace[data-active="true"]{display:flex}

/* ---- Windows ---- */
.win{
  background:var(--bg2);border:1px solid var(--border);border-radius:10px;
  overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.55);
  display:flex;flex-direction:column;max-width:900px;margin:auto;width:100%;height:100%;
}
.wide-win{max-width:1000px}
.win-bar{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:var(--bar);border-bottom:1px solid var(--border);
}
.win-dots{display:flex;gap:6px}
.win-dots i{width:11px;height:11px;border-radius:50%;background:var(--dim);opacity:.5}
.win-dots i:first-child{background:var(--err);opacity:.9}
.win-dots i:nth-child(2){background:#e5c07b;opacity:.9}
.win-dots i:nth-child(3){background:var(--ok);opacity:.9}
.win-title{font-size:12px;color:var(--dim)}
.win-body{flex:1;overflow:auto;padding:24px 28px}

/* ---- Welcome ---- */
.welcome-body{text-align:center}
.logo-row{margin:6px 0 4px}
#dome-logo{width:340px;max-width:80%;image-rendering:pixelated}
.brand-line{color:var(--dim);font-size:13px;margin-bottom:18px}
h1{font-size:clamp(24px,4.5vw,44px);line-height:1.15;font-weight:700;margin-bottom:14px}
h1 b{color:var(--acc)}
.tagline{color:var(--dim);margin-bottom:22px;line-height:1.5}
.cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}
.cta{
  padding:10px 20px;border-radius:8px;background:var(--acc);color:#0b0e14;
  text-decoration:none;font-weight:700;border:1px solid var(--acc);
}
.cta:hover{filter:brightness(1.12)}
.cta.ghost{background:transparent;color:var(--fg);border-color:var(--border)}
.cta.ghost:hover{border-color:var(--acc);color:var(--acc)}
.meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;max-width:640px;margin:0 auto 18px;text-align:left;font-size:13px}
.hint{color:var(--dim);font-size:12px}
.hint b{color:var(--acc)}

/* ---- Terminal ---- */
.term-win{max-width:860px}
#terminal{background:#0a0c12;font-size:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
#terminal .in{color:var(--ok)}
#terminal .out{color:var(--fg)}
#terminal .err{color:var(--err)}
#terminal .gold{color:var(--acc)}
#terminal .cursor{display:inline-block;width:8px;height:16px;background:var(--fg);vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---- Install / community ---- */
.install-body h2,.community-body h2{color:var(--acc);font-size:15px;margin:22px 0 8px}
.install-body h2:first-child,.community-body h2:first-child{margin-top:0}
.install-body pre,.community-body pre{
  background:#0a0c12;border:1px solid var(--border);border-radius:8px;
  padding:12px 14px;overflow:auto;font-size:13px;line-height:1.5;
}
.install-body code,.community-body code{color:var(--acc)}
.install-body p,.community-body p{margin:10px 0;line-height:1.6}
.community-body a{color:var(--acc2)}
.checklist{list-style:none;padding:0}
.checklist li{margin:8px 0;padding-left:24px;position:relative}
.checklist li::before{content:"✓";position:absolute;left:0;color:var(--ok)}

/* ---- Dock ---- */
#dock{
  position:fixed;bottom:10px;left:50%;transform:translateX(-50%);z-index:30;
  background:var(--bar);border:1px solid var(--border);border-radius:14px;
  padding:8px 12px;display:flex;gap:10px;align-items:center;
}
#dock button{
  background:none;border:none;color:var(--dim);font-size:20px;cursor:pointer;
  padding:4px 8px;border-radius:8px;line-height:1;
}
#dock button:hover{background:var(--sel);color:var(--acc)}
#dock button.on{color:var(--acc);background:var(--sel)}
.dock-sep{width:1px;height:22px;background:var(--border)}

/* ---- Lock screen ---- */
#lockscreen{
  position:fixed;inset:0;z-index:40;background:#000;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:12px;
}
#lockscreen img{width:200px;image-rendering:pixelated;opacity:.9}
#lock-pw{
  background:var(--bg2);border:1px solid var(--border);border-radius:8px;
  color:var(--fg);padding:10px 16px;font-family:inherit;font-size:15px;width:280px;text-align:center;
}
.lock-hint{color:var(--dim);font-size:12px}

/* ---- Cheatsheet ---- */
#cheatsheet{
  position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);
}
.cs-card{
  background:var(--bg2);border:1px solid var(--border);border-radius:12px;
  padding:24px 28px;max-width:640px;width:92%;
}
.cs-title{margin-bottom:14px}.cs-title .dim{font-size:12px}
.cs-h{color:var(--acc);margin:8px 0 6px;font-weight:700}
.cs-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.cs-card p{font-size:13px;line-height:1.9;margin:0}
.cs-card code{background:var(--sel);padding:1px 6px;border-radius:4px;color:var(--acc)}
.cs-foot{text-align:center;color:var(--dim);margin-top:14px;font-size:12px}

/* Screensaver: floating dome */
#screensaver{
  position:fixed;inset:0;z-index:39;background:#000;display:none;
  align-items:center;justify-content:center;
}
#screensaver img{width:420px;image-rendering:pixelated;animation:float 9s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-24px)}}

/* reboot easter egg */
#reboot{position:fixed;inset:0;z-index:60;background:#000;display:none;color:var(--fg);
  font-family:"JetBrains Mono",monospace;padding:40px;font-size:14px;white-space:pre-wrap}

@media (max-width:640px){
  .win-body{padding:18px}
  .meta-grid{grid-template-columns:1fr 1fr}
}
/* logo preview row (Kelly's artwork under review) */
.preview-row{margin-bottom:10px}
#preview-logo{width:520px;max-width:92%;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.preview-tag{color:var(--dim);font-size:11px;margin-top:4px}