/* =====================================================================
   TERMINAL.CSS — visual styling only, no content lives here.
   Restyled to match the site's "Modern Editorial / Bento" theme
   (index.html): same color variables, glass cards, floating blobs,
   fade-up entrance — but keeps the terminal's own monospace identity.
   Sections below:
     1. Theme colors (dark/light) — CSS variables (mirrors index.html)
     2. Body background + floating blobs
     3. Terminal "window" chrome (titlebar, traffic-light dots)
     4. Base layout (#screen, .line, links)
     5. Boot / neofetch banner (.banner)
     6. Prompt + input line
     7. Command history + help table
     8. Mobile responsiveness
   Terminal TEXT (what commands print) lives in js/terminal.js, in the
   `C` object near the top — edit there, not here.
===================================================================== */

:root{
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --radius:16px;
}
html:not([data-theme="light"]){
  --bg:#050608; --bg2:#03060a;
  --blob-a:#6bacff; --blob-b:#2f8bff; --blob-c:#1a56b3;
  --card: rgba(255,255,255,0.035); --card-strong: rgba(255,255,255,0.07);
  --border: rgba(255,255,255,0.10);
  --shadow: 0 10px 30px rgba(0,0,0,0.5);
  --text:#eef4fb; --muted:rgba(238,244,251,0.6);
  --accent:#2f8bff; --accent-2:#6bacff; --err:#ff6b5b;
}
html[data-theme="light"]{
  --bg:#f3f7fc; --bg2:#e7f0fa;
  --blob-a:#bcdcff; --blob-b:#5aa4f0; --blob-c:#8fc4f5;
  --card: rgba(255,255,255,0.66); --card-strong: rgba(255,255,255,0.9);
  --border: rgba(10,35,64,0.10);
  --shadow: 0 10px 28px rgba(20,50,90,0.08);
  --text:#0a2340; --muted:rgba(10,35,64,0.6);
  --accent:#1c6fe0; --accent-2:#1a56b3; --err:#c9483d;
}

*{box-sizing:border-box;}
html,body{height:100%; margin:0;}
body{
  background:linear-gradient(160deg, var(--bg) 0%, var(--bg2) 100%); background-attachment:fixed;
  color:var(--text);
  font-family:var(--mono);
  font-size:14.5px; line-height:1.65; -webkit-font-smoothing:antialiased;
  transition:background .3s ease, color .2s ease;
  position:relative; overflow-x:hidden;
}
::selection{background:var(--accent); color:#fff;}

/* ---------- floating blobs (same feel as index.html) ---------- */
.blob{position:fixed; border-radius:50%; filter:blur(90px); z-index:0; pointer-events:none;}
.blob-1{width:360px; height:360px; background:var(--blob-a); opacity:.25; top:-120px; left:-100px; animation:float-1 16s ease-in-out infinite;}
.blob-2{width:320px; height:320px; background:var(--blob-b); opacity:.20; bottom:-130px; right:-90px; animation:float-2 20s ease-in-out infinite;}
.blob-3{width:240px; height:240px; background:var(--blob-c); opacity:.16; top:42%; right:4%; animation:float-3 14s ease-in-out infinite;}
@keyframes float-1{0%,100%{transform:translate(0,0);}50%{transform:translate(40px,30px);}}
@keyframes float-2{0%,100%{transform:translate(0,0);}50%{transform:translate(-35px,-25px);}}
@keyframes float-3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-20px,25px) scale(1.08);}}
@media (prefers-reduced-motion:reduce){.blob-1,.blob-2,.blob-3{animation:none;}}

@keyframes fade-up{from{opacity:0; transform:translateY(16px);}to{opacity:1; transform:translateY(0);}}

/* ---------- terminal window chrome ---------- */
.term-shell{position:relative; z-index:2; max-width:860px; margin:0 auto; padding:24px 16px 50px;}
.term-window{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%);
  box-shadow:var(--shadow); overflow:hidden;
  animation:fade-up .5s ease both;
}
.term-titlebar{
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-bottom:1px solid var(--border); background:var(--card-strong);
}
.term-dots{display:flex; gap:7px; flex:0 0 auto;}
.term-dots span{width:11px; height:11px; border-radius:50%; display:inline-block;}
.term-dots span:nth-child(1){background:#ff5f57;}
.term-dots span:nth-child(2){background:#febc2e;}
.term-dots span:nth-child(3){background:#28c840;}
.term-title{flex:1; text-align:center; font-size:12px; color:var(--muted); letter-spacing:.02em;}
.term-actions{display:flex; align-items:center; gap:6px; flex:0 0 auto;}
.icon-btn{
  display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--border); background:transparent; color:var(--text); cursor:pointer; transition:background .2s ease;
}
.icon-btn:hover{background:var(--card);}
.icon-btn .icon{width:14px; height:14px;}
.icon-btn .icon-sun{display:none;}
html[data-theme="light"] .icon-btn .icon-moon{display:none;}
html[data-theme="light"] .icon-btn .icon-sun{display:block;}

/* ---------- base layout ---------- */
#screen{
  height:min(72vh, 640px); overflow-y:auto; overscroll-behavior:contain;
  padding:22px 22px 34px; cursor:text; scroll-behavior:smooth;
}
#screen::-webkit-scrollbar{width:9px;}
#screen::-webkit-scrollbar-track{background:transparent;}
#screen::-webkit-scrollbar-thumb{background:var(--border); border-radius:100px;}
.line{white-space:pre-wrap; word-break:break-word; margin:0 0 2px;}
.dim{color:var(--muted);}
.accent{color:var(--accent);}
.err{color:var(--err);}
a{color:var(--accent); text-decoration:none;}
a:hover{text-decoration:underline;}
strong{color:var(--accent); font-weight:700;}

.banner{margin-bottom:18px;}
.banner .row{display:flex; gap:10px;}
.banner .k{color:var(--muted); min-width:90px; flex:0 0 auto;}

.prompt-row{display:flex; align-items:center; gap:8px; margin-top:4px;}
.prompt-label{color:var(--accent); white-space:nowrap; flex:0 0 auto;}
#cmd-input{
  flex:1 1 auto; background:transparent; border:none; outline:none;
  color:var(--text); font-family:inherit; font-size:inherit; caret-color:var(--accent);
  min-width:0;
}

.history-block{margin-bottom:2px;}
.history-cmd{display:flex; gap:8px;}
.history-cmd .p{color:var(--accent);}

.help-table{margin:4px 0 0;}
.help-table .row{display:flex; gap:14px;}
.help-table .c1{color:var(--accent); min-width:110px; flex:0 0 auto;}

@media (max-width:600px){
  .term-shell{padding:14px 10px 40px;}
  #screen{height:min(68vh, 520px); padding:16px 14px 26px; font-size:13.5px;}
  .banner .k{min-width:70px;}
  .term-title{font-size:11px;}
}