/* ==========================================================================
   Naveed Qadir — Portfolio
   Concept: "naveed.dev" — a working VS Code–style IDE in the browser.
   Features: activity bar, file explorer, tabs, breadcrumbs, command palette,
   bottom panel (interactive terminal / problems / output), status bar.
   Hand-authored, token-based CSS. No framework, no build step.
   ========================================================================== */

:root {
    --bg: #1E1E1E;            /* editor */
    --bg-deep: #181818;
    --chrome: #323233;        /* title bar */
    --tabs: #252526;          /* tab strip / inactive tab */
    --tab-active: #1E1E1E;
    --sidebar: #252526;       /* explorer */
    --activity: #333333;      /* activity bar */
    --panelbg: #1E1E1E;       /* bottom panel */
    --statusbar: #007ACC;     /* classic VS Code blue */
    --statusbar-ink: #FFFFFF;

    --card: #252526;
    --card-2: #2A2D2E;
    --line: #2B2B2B;
    --line-2: #3C3C3C;
    --hover: #2A2D2E;

    --ink: #E6E6E6;           /* default editor text (brighter for readability) */
    --ink-dim: #C7C7C7;       /* secondary text */
    --ink-mute: #9A9A9A;      /* line nums / meta (raised from #858585 for AA) */

    /* VS Code "Dark+" syntax tokens */
    --kw: #569CD6;            /* keyword blue */
    --fn: #DCDCAA;           /* function yellow */
    --str: #CE9178;          /* string orange-brown */
    --num: #B5CEA8;          /* number green */
    --type: #4EC9B0;         /* type teal */
    --var: #9CDCFE;          /* variable light blue */
    --cmt: #6A9955;          /* comment green */
    --accent: #4EC9B0;        /* teal brand accent */
    --accent-ink: #06211E;
    --danger: #F14C4C;
    --warn: #CCA700;

    --font-ui: "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-code: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Menlo, Consolas, monospace;

    --fs-display: clamp(2.3rem, 5.6vw, 4.4rem);
    --fs-h2: clamp(1.5rem, 3.2vw, 2.4rem);
    --fs-h3: clamp(1.05rem, 1.9vw, 1.35rem);
    --fs-body: 0.975rem;
    --fs-sm: 0.875rem;
    --fs-code: 0.84rem;

    --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
    --s6: 32px; --s7: 48px; --s8: 64px; --s9: 88px;

    --activity-w: 48px;
    --sidebar-w: 240px;
    --titlebar-h: 36px;
    --tabbar-h: 36px;
    --breadcrumb-h: 26px;
    --statusbar-h: 24px;
    --panel-h: 220px;

    --r-sm: 5px;
    --r-md: 8px;
    --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
[hidden] { display: none !important; }   /* the hidden attribute always wins */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;             /* the editor owns scrolling */
    height: 100vh;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
h1, h2, h3 { line-height: 1.12; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
code, .mono { font-family: var(--font-code); }
::selection { background: #264F78; color: #fff; }

/* VS Code–style scrollbars everywhere */
* { scrollbar-width: thin; scrollbar-color: #424242 transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #424242; border: 3px solid transparent; background-clip: content-box; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #4f4f4f; background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

:is(a, button, input, .focusable):focus-visible {
    outline: 1px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.skip-link {
    position: fixed; left: var(--s4); top: -60px; z-index: 500;
    background: var(--accent); color: var(--accent-ink);
    padding: var(--s2) var(--s4); border-radius: var(--r-sm); font-weight: 600;
    transition: top .2s var(--ease);
}
.skip-link:focus { top: var(--s4); }

/* ==========================================================================
   App shell
   ========================================================================== */
.app {
    height: 100vh; display: flex; flex-direction: column;
    transition: transform .3s var(--ease), opacity .3s var(--ease);
    transform-origin: bottom left;
}
/* Default = attached / maximized: fills the viewport, no margin, square corners. */
/* The floating "windowed" look is OPT-IN via body.windowed (double-click title bar). */
@media (min-width: 980px) {
    body.windowed .app {
        height: calc(100vh - 24px); margin: 12px auto; width: calc(100vw - 24px);
        border-radius: 12px; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.55); border: 1px solid #000;
    }
    body.windowed { background: #000; }
    body.windowed .titlebar { border-radius: 12px 12px 0 0; }
}
/* Minimized: genie-out to the dock chip */
body.minimized .app { transform: scale(.04) translateY(140vh); opacity: 0; pointer-events: none; }
/* Closed: hide everything */
body.closed .app { display: none; }

/* Dock chip (pops out when minimized) */
.dock-chip {
    position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%) translateY(140%);
    z-index: 480; display: flex; align-items: center; gap: var(--s3);
    background: var(--chrome); border: 1px solid var(--line-2); color: var(--ink);
    padding: var(--s3) var(--s5); border-radius: 999px; box-shadow: 0 16px 40px rgba(0,0,0,.5);
    transition: transform .35s var(--ease), opacity .25s var(--ease); opacity: 0;
}
.dock-chip.show { transform: translateX(-50%) translateY(0); opacity: 1; animation: dockpop .5s var(--ease); }
@keyframes dockpop { 0% { transform: translateX(-50%) translateY(140%) scale(.6); } 60% { transform: translateX(-50%) translateY(-10%) scale(1.05); } 100% { transform: translateX(-50%) translateY(0) scale(1); } }
.dock-chip:hover { border-color: var(--accent); }
.dock-logo { font-family: var(--font-code); font-weight: 700; color: var(--ink); }
.dock-logo span { color: var(--accent); }
.dock-logo.big { font-size: 3rem; opacity: .7; }
.dock-label { font-size: var(--fs-sm); font-family: var(--font-code); }
.dock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }

/* Closed window screen */
.closed-screen { position: fixed; inset: 0; z-index: 470; display: flex; align-items: center; justify-content: center; background: var(--bg-deep); text-align: center; }
.closed-screen[hidden] { display: none; }
.dock-chip[hidden] { display: none; }
.closed-inner h2 { font-size: 1.6rem; color: var(--ink); margin: var(--s3) 0 var(--s2); }
.closed-inner p { color: var(--ink-mute); margin-bottom: var(--s6); max-width: 34ch; }

/* Confirm dialog panel */
.modal-panel.confirm { max-width: 420px; }
.modal-panel.confirm h2 { display: flex; align-items: center; gap: var(--s3); }

/* ==========================================================================
   App shell (continued)
   ========================================================================== */

/* Title bar */
.titlebar {
    height: var(--titlebar-h); flex: none;
    display: flex; align-items: center; gap: var(--s4);
    padding-inline: var(--s3);
    background: var(--chrome); border-bottom: 1px solid #1b1b1b;
}
.lights { display: flex; gap: var(--s2); padding-right: var(--s2); }
.lights button { width: 13px; height: 13px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0; }
.lights button i { font-size: 8px; color: #00000088; opacity: 0; transition: opacity .12s; }
.lights:hover button i { opacity: 1; }
.lights .r { background: #FF5F57; } .lights .y { background: #FEBC2E; } .lights .g { background: #28C840; }
.lights button:hover { filter: brightness(1.1); }
.titlebar .menu { display: none; gap: var(--s4); font-size: var(--fs-sm); color: #cccccc; }
@media (min-width: 760px) { .titlebar .menu { display: flex; } }
.titlebar .title { margin-inline: auto; font-size: var(--fs-sm); color: #cccccc; display: inline-block; }
.titlebar .title .accent { color: var(--accent); }
.titlebar .actions { display: flex; align-items: center; gap: var(--s3); color: #cccccc; font-size: var(--fs-sm); }
.titlebar .actions button:hover { color: #fff; }
.webview-btn { display: inline-flex; align-items: center; gap: var(--s2); font-size: 0.78rem; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); padding: 3px var(--s3); border-radius: var(--r-sm); }
.webview-btn:hover { background: var(--accent); color: var(--accent-ink); }
@media (max-width: 620px) { .webview-btn span { display: none; } }

/* Middle: activity bar + sidebar + editor group */
.middle { flex: 1; display: flex; min-height: 0; max-width: 100%; }

/* Activity bar */
.activitybar {
    width: var(--activity-w); flex: none;
    background: var(--activity);
    display: none; flex-direction: column; justify-content: space-between;
    min-height: 0; overflow: hidden;
}
@media (min-width: 760px) { .activitybar { display: flex; } }
.act-top { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.act-top::-webkit-scrollbar { display: none; }
.act-bottom { display: flex; flex-direction: column; flex: none; }
.activitybar button {
    width: var(--activity-w); height: var(--activity-w);
    display: flex; align-items: center; justify-content: center;
    color: #858585; font-size: 1.35rem; position: relative;
    border-left: 2px solid transparent;
}
.activitybar button:hover { color: #fff; }
.activitybar button.active { color: #fff; border-left-color: #fff; }

/* Sidebar */
.sidebar {
    width: var(--sidebar-w); flex: none;
    background: var(--sidebar); border-right: 1px solid var(--line);
    display: none; flex-direction: column; min-height: 0; overflow: hidden;
}
@media (min-width: 760px) { .sidebar { display: flex; } }
.sidebar.collapsed { display: none; }
.side-pane { display: none; flex-direction: column; min-height: 0; flex: 1; }
.side-pane.active { display: flex; }
.sidebar .side-title {
    font-size: 0.68rem; letter-spacing: .1em; text-transform: uppercase; color: #bbb;
    padding: var(--s3) var(--s5) var(--s2); display: flex; justify-content: space-between; align-items: center; flex: none;
}
.sidebar .tree { overflow-y: auto; flex: 1; min-height: 0; padding-bottom: var(--s4); }

/* Extensions pane */
.ext-count { color: var(--ink-mute); font-weight: 400; }
.ext-searchbar { margin: 0 var(--s4) var(--s2); padding: 5px var(--s3); background: var(--bg-deep); border: 1px solid var(--line-2); border-radius: var(--r-sm); display: flex; align-items: center; gap: var(--s2); flex: none; }
.ext-searchbar:focus-within { border-color: var(--accent); }
.ext-searchbar i { color: var(--ink-mute); font-size: 0.78rem; }
.ext-searchbar input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--ink); font-size: 0.82rem; font-family: var(--font-ui); }
.ext-group { padding: var(--s2) var(--s5); font-size: 0.64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); flex: none; }
.ext-empty { padding: var(--s5); color: var(--ink-mute); font-size: var(--fs-sm); text-align: center; }
.ext-list { overflow-y: auto; flex: 1; min-height: 0; padding: 0 var(--s2); }
.ext-item[hidden] { display: none; }
.ext-item { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-radius: var(--r-sm); }
.ext-item:hover { background: var(--hover); }
.ext-ic { width: 32px; height: 32px; border-radius: var(--r-sm); background: var(--bg-deep); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex: none; }
.ext-name { font-size: 0.84rem; color: var(--ink); font-weight: 500; }
.ext-desc { font-size: 0.72rem; color: var(--ink-mute); }
.ext-ok { margin-left: auto; color: var(--accent); font-size: 0.75rem; }

/* Source Control pane */
.scm-repo { padding: var(--s3) var(--s5); display: flex; flex-direction: column; gap: var(--s2); flex: none; }
.scm-row { font-size: var(--fs-code); color: var(--ink-dim); display: flex; align-items: center; gap: var(--s2); font-family: var(--font-code); }
.scm-row.muted { color: var(--ink-mute); font-size: 0.76rem; }
.scm-row i { color: var(--ink-mute); }
.scm-actions { padding: var(--s2) var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.scm-btn { display: flex; align-items: center; gap: var(--s3); padding: var(--s3); border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--ink-dim); border: 1px solid var(--line-2); }
.scm-btn i { width: 16px; text-align: center; }
.scm-btn:hover { border-color: var(--accent); color: var(--ink); }
.scm-btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.scm-btn.primary:hover { filter: brightness(1.08); color: var(--accent-ink); }
body.theme-light .scm-row, body.theme-light .scm-btn { color: #3B3B3B; }
.tree .folder {
    width: 100%; text-align: left;
    font-size: 0.72rem; color: var(--ink-dim); font-family: var(--font-ui);
    padding: 4px var(--s3); display: flex; align-items: center; gap: var(--s2); cursor: default;
    text-transform: uppercase; letter-spacing: .02em; font-weight: 600;
}
button.folder { cursor: pointer; }
button.folder:hover { background: var(--hover); }
.tree .folder.sub { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: var(--fs-code); color: var(--ink-dim); }
.tree .folder .chev { transition: transform .15s var(--ease); }
.tree .folder[aria-expanded="true"] .chev { transform: rotate(90deg); }
.file-list.nested a { padding-left: 48px; }
.tree .folder i.chev { font-size: .7rem; width: 12px; color: var(--ink-mute); text-align: center; }
.tree .folder i.fld { color: #C09553; font-size: .9rem; }
.file-list { list-style: none; padding: 0; margin: 0; }
.file-list a {
    font-family: var(--font-ui); font-size: var(--fs-code); color: var(--ink-dim);
    display: flex; align-items: center; gap: var(--s2);
    padding: 4px var(--s4) 4px 34px;
    position: relative;
}
.file-list a .fi { width: 16px; font-size: .82rem; flex: none; text-align: center; }
.file-list a:hover { background: var(--hover); }
.file-list a[aria-current="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); color: #fff; }
.file-list a[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent); }
.ext-py { color: #4B8BBE; } .ext-log { color: #C09553; } .ext-md { color: #519ABA; }
.ext-dir { color: #C09553; } .ext-json { color: #CBCB41; } .ext-sh { color: #89E051; }
.sidebar .side-foot { flex: none; padding: var(--s3) var(--s5); border-top: 1px solid var(--line); font-size: 0.72rem; color: var(--ink-mute); font-family: var(--font-code); line-height: 1.9; background: var(--sidebar); }
.sidebar .side-foot a:hover { color: var(--accent); }

/* Editor group (tabs + breadcrumb + document) */
.group { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; position: relative; }

/* Minimap (decorative, very subtle overview — like VS Code) */
.minimap { position: absolute; top: calc(var(--tabbar-h) + var(--breadcrumb-h)); right: 0; bottom: 0; width: 56px; z-index: 5; pointer-events: none; background: transparent; display: none; padding: var(--s2) 8px; }
@media (min-width: 1200px) { .minimap { display: block; } }
.minimap::before {
    content: ""; position: absolute; inset: var(--s4) 12px; border-radius: 2px;
    background-image: repeating-linear-gradient(transparent 0 3px, #ffffff0a 3px 4px);
    -webkit-mask-image: repeating-linear-gradient(90deg, #000 0 62%, transparent 62% 100%);
    mask-image: repeating-linear-gradient(90deg, #000 0 62%, transparent 62% 100%);
    opacity: .6;
}
.minimap-view { position: absolute; left: 6px; right: 6px; height: 90px; top: 10px; background: #ffffff0d; border-radius: 2px; transition: top .15s linear; }
body.theme-light .minimap::before { background-image: repeating-linear-gradient(transparent 0 3px, #0000000d 3px 4px); }
body.theme-light .minimap-view { background: #00000010; }

/* Context menus (account / settings) */
.ctx-menu { position: fixed; z-index: 420; min-width: 250px; background: #252526; border: 1px solid #454545; border-radius: var(--r-sm); box-shadow: 0 8px 30px rgba(0,0,0,.5); padding: var(--s2); display: none; }
.ctx-menu.open { display: block; }
.ctx-profile { display: flex; gap: var(--s3); align-items: center; padding: var(--s3); }
.ctx-profile img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; object-position: top; }
.ctx-name { font-weight: 600; color: #fff; font-size: 0.92rem; }
.ctx-sub { font-size: 0.76rem; color: var(--ink-mute); display: flex; align-items: center; gap: var(--s2); margin-top: 2px; }
.ctx-sep { height: 1px; background: #3C3C3C; margin: var(--s2) 0; }
.ctx-item { display: flex; align-items: center; gap: var(--s3); width: 100%; text-align: left; padding: var(--s2) var(--s3); border-radius: var(--r-sm); color: var(--ink-dim); font-size: 0.86rem; }
.ctx-item i { width: 16px; text-align: center; color: var(--ink-mute); }
.ctx-item:hover { background: #04395E; color: #fff; }
.ctx-item:hover i { color: #fff; }
.ctx-item .ctx-hint { margin-left: auto; font-family: var(--font-code); font-size: 0.68rem; color: var(--ink-mute); }
.ctx-item:hover .ctx-hint { color: #cfe6ff; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #4EC9B0; display: inline-block; }

/* Keyboard shortcut list */
.kbd-list { list-style: none; padding: 0; margin: var(--s4) 0 0; display: flex; flex-direction: column; gap: var(--s2); }
.kbd-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s2) 0; border-bottom: 1px solid var(--line); color: var(--ink-dim); font-size: var(--fs-sm); }
.kbd-list kbd { font-family: var(--font-code); font-size: 0.72rem; background: #3C3C3C; border: 1px solid #555; border-bottom-width: 2px; border-radius: 4px; padding: 2px 7px; color: #eee; margin-left: 4px; }

/* Tab strip */
.tabstrip {
    height: var(--tabbar-h); flex: none; display: none; align-items: stretch;
    background: var(--tabs); border-bottom: 1px solid var(--line);
    overflow-x: auto; scrollbar-width: none;
}
@media (min-width: 760px) { .tabstrip { display: flex; } }
.tabstrip::-webkit-scrollbar { display: none; }
.tab {
    display: flex; align-items: center; gap: var(--s2);
    font-size: var(--fs-code); color: #969696; white-space: nowrap;
    padding: 0 var(--s3); border-right: 1px solid var(--line);
    background: var(--tabs); position: relative; max-width: 190px;
}
.tab .fi { font-size: .82rem; }
.tab .tx { overflow: hidden; text-overflow: ellipsis; }
.tab.preview .tx { font-style: italic; }
.tab:hover { background: #2D2D2D; }
.tab[aria-current="true"] { background: var(--tab-active); color: #fff; }
.tab[aria-current="true"]::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--accent); }
.tab .x { color: transparent; font-size: .9rem; width: 18px; height: 18px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.tab:hover .x, .tab[aria-current="true"] .x { color: #c5c5c5; }
.tab .x:hover { background: #ffffff22; color: #fff; }

/* Breadcrumbs */
.breadcrumbs {
    height: var(--breadcrumb-h); flex: none; display: none; align-items: center; gap: var(--s1);
    padding-inline: var(--s4); background: var(--bg); border-bottom: 1px solid var(--line);
    font-size: 0.76rem; color: #858585; font-family: var(--font-ui); overflow-x: auto; scrollbar-width: none; white-space: nowrap;
}
@media (min-width: 760px) { .breadcrumbs { display: flex; } }
.breadcrumbs::-webkit-scrollbar { display: none; }
.breadcrumbs .sep { opacity: .6; }
.breadcrumbs .cur i { margin-right: 4px; font-size: .78rem; }
.breadcrumbs i { font-size: .72rem; }
.breadcrumbs .cur { color: var(--ink-dim); }

/* Mobile top bar */
.m-top { display: flex; align-items: center; justify-content: space-between; padding: var(--s2) var(--s3); background: var(--tabs); border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .m-top { display: none; } }
.m-top .cwd { font-family: var(--font-code); font-size: var(--fs-code); color: var(--ink-dim); }
.m-top .cwd b { color: var(--accent); }
.menu-btn { display: inline-flex; flex-direction: column; gap: 5px; width: 28px; padding: 4px 0; }
.menu-btn span { height: 2px; background: var(--ink); display: block; }

/* The scrolling document */
.doc { flex: 1; min-height: 0; overflow-y: auto; scroll-behavior: smooth; max-width: 100%; }
.doc::-webkit-scrollbar { width: 14px; }
.doc::-webkit-scrollbar-thumb { background: #424242; border: 4px solid var(--bg); border-radius: 10px; }
.doc::-webkit-scrollbar-thumb:hover { background: #4f4f4f; }

/* ==========================================================================
   Section scaffolding — each = an open "file"
   ========================================================================== */
.file-section {
    padding: var(--s7) clamp(var(--s4), 4vw, var(--s8));
    border-bottom: 1px solid var(--line);
    scroll-margin-top: var(--s4);
    max-width: 1180px;
    overflow-wrap: break-word;
}
.hero-lead, .hero-sub, .section-intro, .about-copy p, .entry .desc, .case-body p { overflow-wrap: break-word; }
.eyebrow { font-family: var(--font-code); font-size: var(--fs-code); color: var(--cmt); margin-bottom: var(--s4); overflow-wrap: anywhere; }
.eyebrow .hash { color: var(--kw); }
.section-title { font-size: var(--fs-h2); color: #fff; }
.section-intro { color: var(--ink-dim); max-width: 62ch; margin-top: var(--s3); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { font-family: var(--font-code); font-size: 0.74rem; color: var(--var); border: 1px solid var(--line-2); background: var(--card); padding: 3px var(--s3); border-radius: var(--r-sm); white-space: nowrap; }

.btn { display: inline-flex; align-items: center; gap: var(--s2); font-family: var(--font-code); font-weight: 600; font-size: var(--fs-sm); padding: var(--s3) var(--s5); border-radius: var(--r-sm); transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.btn-solid { background: var(--accent); color: var(--accent-ink); }
.btn-solid:hover { background: #6fe0c8; }
.btn-ghost { border: 1px solid var(--line-2); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ==========================================================================
   Welcome / empty editor state
   ========================================================================== */
.welcome { min-height: 60vh; display: flex; align-items: center; justify-content: center; padding: var(--s8) var(--s5); }
.welcome-inner { text-align: center; max-width: 420px; }
.welcome-logo { font-family: var(--font-code); font-size: 3.5rem; font-weight: 700; color: var(--ink-mute); opacity: .5; }
.welcome-logo span { color: var(--accent); }
.welcome-inner h2 { font-size: 1.5rem; color: var(--ink); margin: var(--s3) 0 var(--s2); }
.welcome-inner > p { color: var(--ink-mute); margin-bottom: var(--s6); }
.welcome-actions { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; }
.welcome-recent { list-style: none; padding: 0; margin: var(--s7) 0 0; display: flex; flex-direction: column; gap: var(--s1); text-align: left; }
.welcome-recent button { display: flex; align-items: center; gap: var(--s3); width: 100%; padding: var(--s2) var(--s3); border-radius: var(--r-sm); font-family: var(--font-code); font-size: var(--fs-sm); color: var(--ink-dim); }
.welcome-recent button:hover { background: var(--hover); color: var(--ink); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding-top: var(--s6); padding-bottom: var(--s7); max-width: none; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--s7); align-items: center; }
.hero-grid > * { min-width: 0; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: 1.05fr .95fr; gap: var(--s8); } }
.hero-code .cmt { color: var(--cmt); font-size: var(--fs-code); font-family: var(--font-code); }
.hero-name { font-size: var(--fs-display); font-weight: 700; letter-spacing: -.03em; line-height: 1; color: #fff; margin: var(--s4) 0; overflow-wrap: anywhere; }
.hero-name .brace { color: #808080; }
.hero-role { font-family: var(--font-code); font-size: clamp(.95rem, 2vw, 1.3rem); color: var(--fn); margin-bottom: var(--s5); overflow-wrap: anywhere; }
.hero-role .kw { color: var(--kw); } .hero-role .str { color: var(--str); }
.hero-lead { color: var(--ink-dim); max-width: 54ch; font-size: 1.02rem; }
.hero-lead strong { color: #fff; font-weight: 600; }
.hero-sub { color: var(--ink-mute); font-size: var(--fs-sm); margin-top: var(--s3); max-width: 54ch; }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s6); }
.live-row { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s6); font-family: var(--font-code); font-size: var(--fs-code); color: var(--ink-mute); }
.live { display: inline-flex; align-items: center; gap: var(--s2); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); position: relative; }
.dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--accent); animation: ping 1.9s var(--ease) infinite; }
@keyframes ping { 0% { transform: scale(.5); opacity: 1; } 100% { transform: scale(2); opacity: 0; } }

/* code-editor hero block (line numbers) */
.codeblock { border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; background: var(--bg-deep); font-family: var(--font-code); font-size: var(--fs-code); box-shadow: 0 18px 50px rgba(0,0,0,.45); }
.codeblock .cb-bar { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); background: var(--tabs); border-bottom: 1px solid var(--line); color: #969696; font-size: 0.78rem; }
.codeblock .cb-bar .fi { color: var(--kw); }
.codeblock .cb-body { display: flex; overflow-x: auto; }
.codeblock .gutter { padding: var(--s4) var(--s2) var(--s4) var(--s4); color: #5a5a5a; text-align: right; user-select: none; border-right: 1px solid var(--line); background: var(--bg-deep); }
.codeblock .gutter span { display: block; line-height: 1.75; }
.codeblock pre { padding: var(--s4) var(--s4) var(--s4) var(--s3); line-height: 1.75; white-space: pre; tab-size: 2; overflow-x: auto; margin: 0; }
.codeblock .kw { color: var(--kw); } .codeblock .fn { color: var(--fn); } .codeblock .str { color: var(--str); }
.codeblock .num { color: var(--num); } .codeblock .var { color: var(--var); } .codeblock .cmt { color: var(--cmt); }
.codeblock .type { color: var(--type); }

/* ==========================================================================
   About
   ========================================================================== */
.about-grid { display: grid; grid-template-columns: 1fr; gap: var(--s7); align-items: start; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 300px 1fr; gap: var(--s8); } }
.id-card { border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--card); overflow: hidden; }
.id-card .id-head { padding: var(--s5); border-bottom: 1px solid var(--line); display: flex; gap: var(--s4); align-items: center; }
.id-card img { width: 68px; height: 68px; border-radius: var(--r-md); object-fit: cover; object-position: top; border: 1px solid var(--line-2); flex: none; }
.id-card .name { font-weight: 700; font-size: 1.1rem; color: #fff; }
.id-card .role { font-family: var(--font-code); font-size: var(--fs-code); color: var(--accent); margin-top: 2px; }
.id-card dl { margin: 0; padding: var(--s5); display: grid; grid-template-columns: auto 1fr; gap: var(--s3) var(--s4); font-family: var(--font-code); font-size: var(--fs-code); }
.id-card dt { color: var(--ink-mute); } .id-card dd { margin: 0; color: var(--ink); text-align: right; }
.id-card .socials { display: flex; gap: var(--s4); padding: 0 var(--s5) var(--s5); font-size: 1.1rem; color: var(--ink-mute); }
.id-card .socials a:hover { color: var(--accent); }
.about-copy h2 { font-size: var(--fs-h2); margin-bottom: var(--s4); color: #fff; }
.about-copy p { color: var(--ink-dim); margin-bottom: var(--s4); }
.about-copy p strong { color: #fff; font-weight: 600; }
.callout { border-left: 2px solid var(--accent); background: var(--card); border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: var(--s4) var(--s5); font-family: var(--font-code); font-size: var(--fs-code); color: var(--ink-dim); margin-top: var(--s5); }
.callout b { color: var(--cmt); font-weight: 400; }

/* ==========================================================================
   Experience log
   ========================================================================== */
.log-sub { font-family: var(--font-code); font-size: var(--fs-code); color: var(--cmt); margin: var(--s7) 0 var(--s5); }
.log-sub:first-child { margin-top: var(--s6); }
.log { position: relative; }
.log::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--line-2); }
@media (min-width: 760px) { .log::before { left: 168px; } }
.entry { position: relative; padding-left: var(--s7); padding-block: var(--s4); display: grid; grid-template-columns: 1fr; gap: var(--s2); }
@media (min-width: 760px) { .entry { grid-template-columns: 168px 1fr; gap: var(--s7); padding-left: 0; align-items: baseline; } }
.entry::before { content: ""; position: absolute; left: 1px; top: 24px; width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line-2); transition: border-color .3s var(--ease), background .3s var(--ease); }
@media (min-width: 760px) { .entry::before { left: 162px; } }
.entry:hover::before { border-color: var(--accent); background: var(--accent); }
.entry .meta { font-family: var(--font-code); font-size: var(--fs-code); color: var(--ink-mute); }
.entry .meta .type { color: var(--num); display: block; margin-top: var(--s1); }
.entry .role { font-size: var(--fs-h3); color: #fff; font-weight: 700; }
.entry .org { color: var(--ink-dim); margin-top: 2px; }
.entry .desc { color: var(--ink-mute); font-size: var(--fs-sm); margin-top: var(--s2); max-width: 62ch; }
.entry .chips { margin-top: var(--s3); }

/* ==========================================================================
   Services
   ========================================================================== */
.svc-grid { display: grid; grid-template-columns: 1fr; gap: var(--s4); margin-top: var(--s6); }
@media (min-width: 860px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
.svc { border: 1px solid var(--line-2); border-radius: var(--r-md); padding: var(--s6); background: var(--card); display: flex; flex-direction: column; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.svc:hover { border-color: var(--accent); transform: translateY(-3px); }
.svc .idx { font-family: var(--font-code); font-size: var(--fs-code); color: var(--ink-mute); }
.svc .ico { width: 44px; height: 44px; border-radius: var(--r-sm); background: var(--card-2); display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 1.2rem; margin: var(--s4) 0 var(--s5); }
.svc h3 { font-size: var(--fs-h3); color: #fff; }
.svc > p { color: var(--ink-dim); font-size: var(--fs-sm); margin: var(--s3) 0 var(--s5); }
.svc ul { list-style: none; padding: 0; margin-top: auto; display: flex; flex-direction: column; gap: var(--s2); }
.svc li { font-size: var(--fs-sm); color: var(--ink-dim); display: flex; align-items: center; gap: var(--s3); font-family: var(--font-code); }
.svc li i { color: var(--accent); font-size: .8rem; }

/* ==========================================================================
   Projects — case rows
   ========================================================================== */
.cases { display: flex; flex-direction: column; gap: var(--s7); margin-top: var(--s7); }
.case { display: grid; grid-template-columns: 1fr; gap: var(--s5); align-items: center; }
@media (min-width: 860px) { .case { grid-template-columns: 1.1fr .9fr; gap: var(--s7); } .case.flip .case-media { order: 2; } }
.case-media { border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; aspect-ratio: 16/9; position: relative; background: var(--card); }
.case-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.case:hover .case-media img { transform: scale(1.03); }
.case-media .no { position: absolute; top: var(--s3); left: var(--s3); font-family: var(--font-code); font-size: var(--fs-code); color: var(--accent); background: #000000aa; padding: 3px var(--s3); border-radius: var(--r-sm); }
.case-body .kind { font-family: var(--font-code); font-size: var(--fs-code); color: var(--ink-mute); }
.case-body h3 { font-size: var(--fs-h3); margin: var(--s3) 0; color: #fff; }
.case-body .summary { color: #fff; font-weight: 600; margin-bottom: var(--s2); }
.case-body p { color: var(--ink-dim); font-size: var(--fs-sm); }
.case-body .chips { margin: var(--s4) 0 var(--s5); }
.view-link { display: inline-flex; align-items: center; gap: var(--s3); font-family: var(--font-code); font-weight: 600; font-size: var(--fs-sm); color: var(--accent); padding-bottom: 3px; border-bottom: 1px solid transparent; transition: border-color .25s var(--ease), gap .25s var(--ease); }
.view-link:hover { border-color: var(--accent); gap: var(--s4); }

/* ==========================================================================
   Other projects — card grid
   ========================================================================== */
.other-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--s4); margin-bottom: var(--s6); }
.repos-link { font-family: var(--font-code); font-size: var(--fs-sm); color: var(--ink-dim); display: inline-flex; gap: var(--s2); align-items: center; }
.repos-link:hover { color: var(--accent); }
.card-grid { display: grid; grid-template-columns: 1fr; gap: var(--s5); }
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.card { border: 1px solid var(--line-2); border-radius: var(--r-md); overflow: hidden; background: var(--card); text-align: left; display: flex; flex-direction: column; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.card:hover { border-color: var(--accent); transform: translateY(-3px); }
.card-media { aspect-ratio: 16/9; position: relative; overflow: hidden; background: var(--bg-deep); }
.card-media img, .card-media video { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card-media img, .card:hover .card-media video { transform: scale(1.05); }
.card-media .badge { position: absolute; top: var(--s3); right: var(--s3); font-family: var(--font-code); font-size: 11px; color: var(--accent-ink); background: var(--accent); padding: 3px var(--s3); border-radius: var(--r-sm); font-weight: 600; }
.card-media .hint { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: var(--s2); background: #000000aa; color: #fff; font-size: var(--fs-sm); font-weight: 600; opacity: 0; transition: opacity .3s var(--ease); }
.card:hover .card-media .hint { opacity: 1; }
.card-body { padding: var(--s5); }
.card-body h3 { font-size: 1.05rem; color: #fff; }
.card-body p { color: var(--ink-dim); font-size: var(--fs-sm); margin: var(--s3) 0 var(--s4); }

/* ==========================================================================
   Achievements
   ========================================================================== */
.ach-grid { display: grid; grid-template-columns: 1fr; gap: var(--s5); margin-top: var(--s7); }
@media (min-width: 860px) { .ach-grid { grid-template-columns: 1fr 1fr; } }
.ach { border: 1px solid var(--line-2); border-radius: var(--r-md); padding: var(--s6); background: var(--card); display: flex; flex-direction: column; }
.ach.wide { grid-column: 1 / -1; }
.ach-top { display: flex; gap: var(--s4); align-items: flex-start; margin-bottom: var(--s5); }
.ach-ico { width: 42px; height: 42px; border-radius: var(--r-sm); background: var(--card-2); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex: none; }
.ach h3 { font-size: var(--fs-h3); color: #fff; }
.ach .when { font-family: var(--font-code); font-size: var(--fs-code); color: var(--ink-mute); margin-top: var(--s1); }
.ach p { color: var(--ink-dim); font-size: var(--fs-sm); margin-bottom: var(--s5); }
.ach .chips { margin-top: auto; }
.ach-actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }
.ach-btn { font-family: var(--font-code); font-size: var(--fs-sm); font-weight: 600; padding: var(--s2) var(--s4); border-radius: var(--r-sm); border: 1px solid var(--line-2); color: var(--ink); display: inline-flex; gap: var(--s2); align-items: center; transition: border-color .2s var(--ease), color .2s var(--ease); }
.ach-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ==========================================================================
   Stack
   ========================================================================== */
.stack-grid { display: grid; grid-template-columns: 1fr; gap: var(--s5); margin-top: var(--s7); }
@media (min-width: 760px) { .stack-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; } }
.stack-card { border: 1px solid var(--line-2); border-radius: var(--r-md); padding: var(--s6); background: var(--card); transition: border-color .3s var(--ease); }
.stack-card:hover { border-color: var(--accent); }
.stack-card.tall { grid-row: span 2; } .stack-card.wide { grid-column: span 2; }
@media (max-width: 759px) { .stack-card.wide, .stack-card.tall { grid-column: auto; grid-row: auto; } }
.stack-card .ico { width: 42px; height: 42px; border-radius: var(--r-sm); background: var(--card-2); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: var(--s4); }
.stack-card h3 { font-size: var(--fs-h3); color: #fff; margin-bottom: var(--s2); }
.stack-card > p { color: var(--ink-mute); font-size: var(--fs-sm); margin-bottom: var(--s5); }
.skill-tag { font-family: var(--font-code); font-size: 0.78rem; color: var(--ink-dim); border: 1px solid var(--line-2); background: var(--bg-deep); border-radius: var(--r-sm); padding: 6px var(--s3); display: inline-flex; align-items: center; gap: var(--s2); }
.skill-tag i { color: var(--accent); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-wrap { display: grid; grid-template-columns: 1fr; gap: var(--s7); align-items: center; }
@media (min-width: 900px) { .contact-wrap { grid-template-columns: 1.1fr .9fr; } }
.contact h2 { font-size: clamp(1.9rem, 4.6vw, 3.2rem); color: #fff; margin: var(--s4) 0 var(--s5); }
.contact h2 .em { color: var(--accent); }
.contact p { color: var(--ink-dim); max-width: 48ch; }
.contact p.sub { color: var(--ink-mute); font-size: var(--fs-sm); margin-top: var(--s3); }
.contact-cta { display: flex; flex-wrap: wrap; gap: var(--s4); margin-top: var(--s6); }
.phone-link { font-family: var(--font-code); color: var(--ink-dim); margin-top: var(--s5); display: inline-flex; gap: var(--s2); align-items: center; }
.phone-link:hover { color: var(--accent); }
.phone-link i { color: var(--accent); }

/* ==========================================================================
   Bottom panel (Terminal / Problems / Output)
   ========================================================================== */
.panel { flex: none; height: var(--panel-h); display: flex; flex-direction: column; background: var(--panelbg); border-top: 1px solid var(--line); }
.panel.collapsed { height: auto; }
.panel.collapsed .panel-views { display: none; }
.panel-tabs { height: 34px; flex: none; display: flex; align-items: stretch; gap: var(--s4); padding-inline: var(--s4); border-bottom: 1px solid var(--line); }
.panel-tabs button { font-size: 0.72rem; letter-spacing: .08em; text-transform: uppercase; color: #969696; border-bottom: 1px solid transparent; display: inline-flex; align-items: center; gap: var(--s2); }
.panel-tabs button .count { font-family: var(--font-code); background: #ffffff22; color: #ddd; border-radius: 8px; font-size: .62rem; padding: 1px 6px; letter-spacing: 0; }
.panel-tabs button:hover { color: #ddd; }
.panel-tabs button.active { color: #fff; border-bottom-color: var(--accent); }
.panel-tabs .toggle { margin-left: auto; color: #969696; font-size: .9rem; width: 28px; height: 24px; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; align-self: center; }
.panel-tabs .toggle:hover { color: #fff; background: #ffffff14; }
.panel-tabs .toggle i { transition: transform .2s var(--ease); }
.panel.collapsed .panel-tabs .toggle i { transform: rotate(180deg); }
body.theme-light .panel-tabs .toggle:hover { background: #00000010; }
.panel-views { flex: 1; min-height: 0; overflow: hidden; }
.panel-view { display: none; height: 100%; overflow-y: auto; font-family: var(--font-code); font-size: var(--fs-code); padding: var(--s3) var(--s4); line-height: 1.75; }
.panel-view.active { display: block; }
/* terminal view */
#view-terminal .t-line { white-space: pre-wrap; word-break: break-word; }
#view-terminal .prompt { color: var(--accent); }
#view-terminal .path { color: var(--kw); }
#view-terminal .ok { color: var(--num); }
#view-terminal .err { color: var(--danger); }
#view-terminal .cmt { color: var(--cmt); }
#view-terminal .link { color: var(--var); text-decoration: underline; cursor: pointer; }
.t-input-row { display: flex; align-items: baseline; gap: var(--s2); }
.t-input-row .prompt { color: var(--accent); }
.t-input-row .path { color: var(--kw); }
.t-input { flex: 1; min-width: 0; background: transparent; border: none; color: var(--ink); font-family: var(--font-code); font-size: var(--fs-code); outline: none; }
/* problems view */
.prob { display: flex; gap: var(--s3); align-items: flex-start; padding: 3px 0; color: var(--ink-dim); }
.prob i { color: var(--warn); margin-top: 3px; }
.prob .where { color: var(--ink-mute); }
/* output view */
#view-output .o-line { color: var(--ink-mute); }
#view-output .o-line .tag { color: var(--accent); }

/* ==========================================================================
   Status bar
   ========================================================================== */
.statusbar { height: var(--statusbar-h); flex: none; display: flex; align-items: center; gap: 1px; background: var(--statusbar); color: var(--statusbar-ink); font-size: 0.74rem; }
.statusbar .seg { display: inline-flex; align-items: center; gap: var(--s1); padding: 0 var(--s3); height: 100%; white-space: nowrap; }
.statusbar button.seg:hover { background: #ffffff2a; }
.statusbar .push { margin-left: auto; }
.statusbar .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #7CFC00; }
@media (max-width: 680px) { .statusbar .opt { display: none; } }

/* ==========================================================================
   Command palette
   ========================================================================== */
.palette { position: fixed; inset: 0; z-index: 450; display: none; justify-content: center; padding-top: 10vh; }
.palette.open { display: flex; }
.palette-backdrop { position: absolute; inset: 0; background: #00000055; }
.palette-box { position: relative; width: min(600px, 92vw); max-height: 60vh; background: #252526; border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: 0 20px 60px rgba(0,0,0,.6); overflow: hidden; display: flex; flex-direction: column; }
.palette-box input { width: 100%; background: #3C3C3C; border: 1px solid var(--accent); color: #fff; font-family: var(--font-ui); font-size: 0.95rem; padding: var(--s3) var(--s4); outline: none; }
.palette-list { list-style: none; margin: 0; padding: var(--s2); overflow-y: auto; }
.palette-list li { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-sm); font-size: 0.9rem; color: var(--ink-dim); cursor: pointer; }
.palette-list li .fi { width: 16px; text-align: center; font-size: .82rem; }
.palette-list li .hintkey { margin-left: auto; font-family: var(--font-code); font-size: .7rem; color: var(--ink-mute); }
.palette-list li.sel, .palette-list li:hover { background: #04395E; color: #fff; }

/* ==========================================================================
   Modals
   ========================================================================== */
.modal { position: fixed; inset: 0; z-index: 460; display: flex; align-items: center; justify-content: center; padding: var(--s4); opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
.modal.open { opacity: 1; pointer-events: auto; }
.modal-backdrop { position: absolute; inset: 0; background: #000000bb; }
.modal-panel { position: relative; background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r-md); max-width: 760px; width: 100%; max-height: 86vh; overflow: auto; transform: translateY(14px); transition: transform .3s var(--ease); box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.modal.wide .modal-panel { max-width: 1000px; }
.modal.open .modal-panel { transform: none; }
.modal-close { position: absolute; top: var(--s4); right: var(--s4); z-index: 2; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--card); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink); }
.modal-close:hover { border-color: var(--accent); color: var(--accent); }
.modal-media { aspect-ratio: 16/9; overflow: hidden; background: #000; border-bottom: 1px solid var(--line); }
.modal-media.contain { aspect-ratio: auto; max-height: 70vh; display: flex; align-items: center; justify-content: center; }
.modal-media img, .modal-media video { width: 100%; height: 100%; object-fit: cover; }
.modal-media.contain img { object-fit: contain; }
.modal-content { padding: var(--s6); }
.modal-content h2 { font-size: var(--fs-h3); color: #fff; margin-bottom: var(--s4); }
.modal-content p { color: var(--ink-dim); font-size: var(--fs-sm); margin-bottom: var(--s5); }
.modal-content .chips { margin-bottom: var(--s5); }
.modal-links { display: flex; flex-wrap: wrap; gap: var(--s3); }

body.lock { overflow: hidden; }

/* Mobile explorer drawer */
.mobile-menu { position: fixed; inset: 0; z-index: 440; background: var(--sidebar); transform: translateX(100%); transition: transform .3s var(--ease); visibility: hidden; padding: var(--s6) var(--s5); overflow-y: auto; }
.mobile-menu.open { transform: none; visibility: visible; }
.mobile-menu .mm-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s5); }
.mobile-menu .mm-head .side-title { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #bbb; }
.mobile-menu ol { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.mobile-menu a { font-family: var(--font-ui); font-size: 1.05rem; color: var(--ink-dim); display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s2); border-radius: var(--r-sm); }
.mobile-menu a .fi { width: 20px; text-align: center; }
.mobile-menu a:hover { background: var(--hover); color: #fff; }
.mobile-close { font-size: 1.3rem; color: var(--ink-dim); width: 40px; height: 40px; }

/* ==========================================================================
   Scroll reveal + reduced motion
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i, 0) * 55ms); }
.reveal.in-view { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .doc { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .reveal { opacity: 1; transform: none; }
    .dot::after { display: none; }
}

/* ==========================================================================
   Light theme (VS Code "Light+") — toggled via settings menu
   ========================================================================== */
body.theme-light {
    --bg: #FFFFFF; --bg-deep: #F3F3F3; --chrome: #DDDDDD; --tabs: #ECECEC; --tab-active: #FFFFFF;
    --sidebar: #F3F3F3; --activity: #2C2C2C; --panelbg: #FFFFFF; --statusbar: #007ACC;
    --card: #F8F8F8; --card-2: #EFEFEF; --line: #E0E0E0; --line-2: #CFCFCF; --hover: #E8E8E8;
    --ink: #1E1E1E; --ink-dim: #3B3B3B; --ink-mute: #6E6E6E;
    --kw: #0000FF; --fn: #795E26; --str: #A31515; --num: #098658; --type: #267F99; --var: #001080; --cmt: #008000;
    --accent: #0E7490; --accent-ink: #FFFFFF;
}
body.theme-light { --statusbar: #007ACC; }
/* headings & key text */
body.theme-light .section-title, body.theme-light .hero-name, body.theme-light h2, body.theme-light h3,
body.theme-light .id-card .name, body.theme-light .about-copy h2, body.theme-light .entry .role,
body.theme-light .svc h3, body.theme-light .case-body h3, body.theme-light .card-body h3,
body.theme-light .ach h3, body.theme-light .stack-card h3, body.theme-light .contact h2,
body.theme-light .hero-lead strong, body.theme-light .about-copy p strong, body.theme-light .case-body .summary { color: #1E1E1E; }
body.theme-light .codeblock, body.theme-light .skill-tag { background: #F3F3F3; }
body.theme-light .codeblock .cb-bar { background: #ECECEC; color: #3B3B3B; }
body.theme-light .codeblock .gutter { background: #F3F3F3; color: #237893; border-color: #E0E0E0; }
/* chrome: title bar, menu, breadcrumbs, tabs, panel, minimap */
body.theme-light .titlebar { background: #DDDDDD; border-bottom-color: #c8c8c8; }
body.theme-light .titlebar .title { color: #3B3B3B; }
body.theme-light .titlebar .menu, body.theme-light .titlebar .actions { color: #3B3B3B; }
body.theme-light .titlebar .actions button:hover, body.theme-light .titlebar .menu button:hover { color: #000; }
body.theme-light .activitybar { background: #2C2C2C; }
body.theme-light .activitybar button { color: #b0b0b0; }
body.theme-light .activitybar button:hover, body.theme-light .activitybar button.active { color: #fff; }
body.theme-light .sidebar { border-right-color: #E0E0E0; }
body.theme-light .side-title { color: #3B3B3B; }
body.theme-light .tree .folder { color: #3B3B3B; }
body.theme-light .file-list a { color: #3B3B3B; }
body.theme-light .file-list a:hover { background: #E8E8E8; }
body.theme-light .file-list a[aria-current="true"] { background: #E3F2EE; color: #1E1E1E; }
body.theme-light .ext-name { color: #1E1E1E; }
body.theme-light .ext-item:hover { background: #E8E8E8; }
body.theme-light .tabstrip { background: #ECECEC; }
body.theme-light .tab { background: #ECECEC; color: #6E6E6E; border-right-color: #E0E0E0; }
body.theme-light .tab:hover { background: #E2E2E2; }
body.theme-light .tab[aria-current="true"] { background: #fff; color: #1E1E1E; }
body.theme-light .breadcrumbs { background: #fff; color: #6E6E6E; border-bottom-color: #E0E0E0; }
body.theme-light .breadcrumbs .cur { color: #3B3B3B; }
body.theme-light .m-top { background: #ECECEC; }
body.theme-light .panel { background: #fff; border-top-color: #E0E0E0; }
body.theme-light .panel-tabs { border-bottom-color: #E0E0E0; }
body.theme-light .panel-tabs button { color: #6E6E6E; }
body.theme-light .panel-tabs button:hover, body.theme-light .panel-tabs button.active { color: #1E1E1E; }
body.theme-light .panel-tabs button .count { background: #00000018; color: #333; }
body.theme-light .minimap { background: linear-gradient(90deg, transparent, #00000010); }
body.theme-light .doc::-webkit-scrollbar-thumb, body.theme-light ::-webkit-scrollbar-thumb { background: #c2c2c2; background-clip: content-box; }
body.theme-light * { scrollbar-color: #c2c2c2 transparent; }
/* panel content */
body.theme-light #view-output .o-line { color: #6E6E6E; }
body.theme-light .prob { color: #3B3B3B; }
body.theme-light .t-input { color: #1E1E1E; }
/* menus / palette */
body.theme-light .ctx-menu { background: #fff; border-color: #c8c8c8; }
body.theme-light .ctx-name { color: #1E1E1E; }
body.theme-light .ctx-item { color: #3B3B3B; }
body.theme-light .ctx-item i { color: #6E6E6E; }
body.theme-light .ctx-item:hover, body.theme-light .palette-list li.sel, body.theme-light .palette-list li:hover { background: #0060C0; color: #fff; }
body.theme-light .ctx-item:hover i { color: #fff; }
body.theme-light .palette-box { background: #F3F3F3; border-color: #c8c8c8; }
body.theme-light .palette-box input { background: #fff; color: #1E1E1E; }
body.theme-light .palette-list li { color: #3B3B3B; }
body.theme-light .kbd-list kbd { background: #E6E6E6; border-color: #bbb; color: #222; }
body.theme-light .ext-search { background: #fff; }
body.theme-light ::selection { background: #ADD6FF; color: #000; }

/* ==========================================================================
   Mobile responsive tuning
   ========================================================================== */
@media (max-width: 759px) {
    /* Keep the IDE chrome on mobile — activity bar, tabs, breadcrumbs, panel, status bar */
    .activitybar { display: flex; width: 44px; }
    .activitybar button { width: 44px; height: 46px; font-size: 1.2rem; }
    .tabstrip { display: flex; }
    .breadcrumbs { display: flex; }
    .m-top { display: none; }

    /* Sidebar becomes an overlay drawer that slides over the editor */
    .sidebar {
        display: flex; position: fixed; left: 44px; top: var(--titlebar-h);
        bottom: var(--statusbar-h); width: min(78vw, 300px); z-index: 180;
        transform: translateX(-110%); transition: transform .28s var(--ease);
        box-shadow: 0 0 40px rgba(0,0,0,.5);
    }
    .sidebar.mobile-open { transform: none; }
    .sidebar.collapsed { display: flex; }   /* collapse handled by transform on mobile */
    .sidebar-scrim { position: fixed; inset: var(--titlebar-h) 0 var(--statusbar-h) 0; background: #0008; z-index: 170; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease); }
    .sidebar-scrim.show { opacity: 1; pointer-events: auto; }

    .group { max-width: 100vw; overflow-x: hidden; }
    .doc { max-width: 100vw; }
    .file-section { padding: var(--s6) var(--s4); max-width: 100vw; }
    .hero { padding-top: var(--s5); padding-bottom: var(--s6); }
    .hero-role, .eyebrow, .hero-code .cmt { white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
    .codeblock { font-size: 0.72rem; }
    .codeblock .cb-body { overflow-x: auto; }
    .codeblock pre { white-space: pre-wrap; word-break: break-word; }
    .minimap { display: none; }
    .ctx-menu { position: fixed; left: 48px !important; right: var(--s4); bottom: calc(var(--statusbar-h) + 4px) !important; top: auto !important; min-width: 0; }
    .panel { height: 170px; }
    .panel-tabs { gap: var(--s3); padding-inline: var(--s3); }
    .panel-tabs button { font-size: 0.66rem; }
    .statusbar { font-size: 0.68rem; }
    .statusbar .seg { padding: 0 var(--s2); gap: 3px; }
    .titlebar .title { font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 50vw; }
    .titlebar { gap: var(--s2); }
    .tab { max-width: 150px; }
}
@media (max-width: 420px) {
    .hero-name { font-size: clamp(2rem, 11vw, 2.6rem); }
    .live-row { gap: var(--s2); }
    .activitybar button:nth-child(n+4) { }  /* keep all; they're compact */
    .breadcrumbs { display: none; }          /* reclaim space on very small screens */
}