/* ==========================================================
   Rehan Khalil — Portfolio (terminal theme)
   Color system, layout, and component styles.
   ========================================================== */

:root{
  --bg:#211D19; --panel:#2E2822; --panel2:#332D27; --text:#EDE3D3; --dim:#8F8474;
  --amber:#D9A441; --sage:#8FA37E; --red:#D96A5E; --rule:#463E35;
  box-sizing:border-box; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:inherit}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:'JetBrains Mono',monospace;line-height:1.7;font-size:.94rem}
a{color:var(--amber)}
.wrap{max-width:880px;margin:0 auto;padding:36px 24px 60px}

/* --- top window bar (page header) --- */
.topbar{background:var(--panel2);border-bottom:1px solid var(--rule);padding:10px 20px;display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:10;padding-top:calc(10px + env(safe-area-inset-top,0px))}
.dot{width:11px;height:11px;border-radius:50%}
.dot.r{background:var(--red)}.dot.y{background:var(--amber)}.dot.g{background:var(--sage)}
.topbar .title{margin-left:10px;color:var(--dim);font-size:.82rem}

/* --- each section rendered as its own "terminal window" --- */
.win{background:var(--panel);border:1px solid var(--rule);border-radius:8px;margin-bottom:26px;overflow:hidden;box-shadow:0 6px 18px rgba(0,0,0,0.18)}
.win-bar{background:var(--panel2);padding:9px 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--rule)}
.win-bar .dot{width:9px;height:9px}
.win-bar .fname{margin-left:8px;color:var(--text);font-size:.85rem;font-weight:700}
.win-bar .fpath{color:var(--dim);font-size:.78rem}
.win-body{padding:24px 22px}

.prompt{color:var(--sage)}
.cmdline{color:var(--dim);margin-bottom:14px;font-size:.85rem}
.cmdline .prompt{margin-right:6px}
h1{font-size:1.55rem;color:var(--text);margin:0 0 6px}
.role{color:var(--amber);margin-bottom:16px;font-size:.95rem}
.lede{color:var(--text);max-width:64ch;margin:0}
.status-line{margin-top:16px;font-size:.82rem;color:var(--dim);display:flex;align-items:center;gap:8px}
.status-line .sdot.live{width:7px;height:7px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 0 rgba(143,163,126,0.6);animation:pulse 2s infinite}
.status-line .highlight{color:var(--amber)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(143,163,126,0.5)}70%{box-shadow:0 0 0 6px rgba(143,163,126,0)}100%{box-shadow:0 0 0 0 rgba(143,163,126,0)}}
.dim{color:var(--dim)}

/* --- project list --- */
.tree{border-left:1px solid var(--rule);padding-left:20px;margin-top:4px}
.proj{padding:20px 0;border-bottom:1px dashed var(--rule)}
.proj:last-child{border-bottom:none}
.proj-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:6px}
.proj .name{color:var(--sage);font-weight:700;font-size:1.05rem}
.proj .tag{color:var(--dim);font-size:.78rem}
.proj p{color:var(--text);margin:6px 0 8px;max-width:66ch;font-size:.92rem}
.proj > a.runlink{font-size:.85rem;display:inline-block;margin-top:8px}
.status{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;padding:2px 9px;border:1px solid var(--rule);border-radius:3px}
.status.deployed{color:var(--sage)}
.status.trained{color:var(--amber)}
.status .sdot{width:6px;height:6px;border-radius:50%;background:currentColor}
.metrics-line{color:var(--dim);font-size:.78rem;margin-top:6px}
.metrics-line b{color:var(--text)}
.metrics-line .sep{color:var(--rule);margin:0 8px}

/* --- demo tab switcher (used per project: live / interface / video / log / architecture / case study) --- */
.demo-tabs{display:flex;gap:2px;margin-top:16px;border-bottom:1px solid var(--rule);flex-wrap:wrap}
.demo-tab{background:none;border:none;color:var(--dim);font-family:'JetBrains Mono',monospace;font-size:.74rem;padding:8px 14px;cursor:pointer;border-bottom:2px solid transparent}
.demo-tab.active{color:var(--amber);border-bottom-color:var(--amber)}
.demo-panel{display:none;border:1px solid var(--rule);border-top:none;border-radius:0 0 6px 6px;overflow:hidden;background:#171412;max-width:100%}
.demo-panel.active{display:block}
.win-body{max-width:100%;overflow-x:hidden}
.demo-bar{background:var(--panel2);padding:6px 12px;font-size:.72rem;color:var(--dim);border-bottom:1px solid var(--rule);display:flex;justify-content:space-between}

/* live iframe demo — responsive 16:9 box instead of a fixed pixel height,
   so it scales cleanly on any screen instead of overflowing/overlapping */
.demo-panel .embed-box{position:relative;width:100%;padding-top:56.25%;background:#fff}
.demo-panel .embed-box iframe,
.demo-panel .embed-box video{position:absolute;top:0;left:0;width:100%;height:100%;border:none;display:block;object-fit:contain;background:#000}

/* screenshot / UI mockup */
.ui-mock{padding:16px;display:flex;justify-content:center}
.ui-mock svg{width:100%;max-width:520px;height:auto}
.screenshot{width:100%;display:block;background:#000}

/* video demo placeholder — swap for a real <video> tag once you have a recording */
.video-placeholder{padding:40px 20px;text-align:center;color:var(--dim);font-size:.82rem}
.video-placeholder code{color:var(--amber)}

/* terminal-replay style log */
.tty{padding:14px 16px;font-size:.82rem;color:var(--text);white-space:pre-wrap;line-height:1.65}
.tty .out{color:var(--dim)}
.tty .ok{color:var(--sage)}
.tty .in{color:var(--text)}
.tty .prompt{color:var(--sage)}

/* architecture diagram */
.arch{padding:18px;display:flex;justify-content:center}
.arch svg{width:100%;max-width:560px;height:auto}

/* case study expand/collapse */
details.case{border:1px solid var(--rule);border-top:none}
details.case summary{list-style:none;cursor:pointer;padding:10px 16px;font-size:.78rem;color:var(--amber);background:var(--panel2)}
details.case summary::-webkit-details-marker{display:none}
details.case summary::before{content:"▸ "}
details.case[open] summary::before{content:"▾ "}
details.case .case-body{padding:16px;font-size:.86rem;color:var(--text)}
details.case .case-body b{color:var(--amber)}
details.case .case-body p{margin:0 0 10px}

/* --- skills table --- */
table.skills{border-collapse:collapse;margin-top:4px;width:100%}
table.skills td{padding:6px 14px 6px 0;border-bottom:1px solid var(--rule);vertical-align:top}
table.skills td.k{color:var(--amber);white-space:nowrap;width:1%;font-size:.88rem}
table.skills td.v{color:var(--text);font-size:.88rem}
table.skills td.bar{width:170px}
.bar-track{color:var(--rule);letter-spacing:1px}
.bar-fill{color:var(--sage)}

/* --- contact --- */
.contact-box a{display:block;margin-top:8px}
.cursor{display:inline-block;width:8px;height:1.1em;background:var(--amber);vertical-align:-2px;animation:blink 1s step-start infinite}
@keyframes blink{50%{opacity:0}}

@media(max-width:600px){
  .wrap{padding:24px 14px 50px}
}