/* xtier.dev — retro CRT theme. BEM: class selectors only, every block sets its own color + font.
   Fonts: Pixeloid Sans (display), IBM Plex Mono (UI/body), VT323 (terminal) */
:root {
  --screen: #121b13;
  --panel: #131d14;
  --panel-2: #1a261b;
  --line: #8fb887;        /* pale frame */
  --line-dim: #3d5a3c;
  --ph: #a3f586;          /* phosphor accent: fills, icons, headline */
  --ph-hi: #eef5e6;       /* bright text: titles */
  --ph-dim: #ccd2c5;      /* secondary text */
  --text: #e6ebe0;
  --ink: #0f1c10;
  --ph-muted: #6dbb72;    /* dim green: comments, paths, meta */
  --ph-deep: #2d6e35;     /* dark green on cream */
  --ph-soft: #b3ffbe;     /* illustration icons (What I build, Developer Stack) */
  --glow-text: #abf99c;   /* .text-glow headings */
  --info: #8fd8ff;
  --err: #ff8f8f;
  --note: #f2f6c9;
  --cream: #eee4ce;
  --cream-2: #e3d6c1;
  --cream-line: #9ca887;
  --r: 6px;
  --glow: 0 0 4px rgba(163, 245, 134, .3);
  --f-display: "Pixeloid Sans", monospace;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;
  --f-term: "VT323", monospace;
  /* terminal keeps the original saturated phosphor */
  --term-bg: #08160d;
  --term-fg: #8dfc8a;
  --term-hi: #c3ffb0;
  --term-cmd: #e8f38a;
  --term-muted: #9fd99a;
  --syn-kw: #ff8fd0;
  --syn-str: #ffd36e;
  --term-glow: 0 0 6px rgba(141, 252, 138, .55);
}

/* Pixeloid Sans by GGBotNet, OFL 1.1 (assets/fonts/licenses/pixeloid-OFL.txt); 9px grid */
@font-face { font-family: "Pixeloid Sans"; src: url("assets/fonts/pixeloid-sans-bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
:root { scrollbar-gutter: stable; }   /* page width never jumps when the scrollbar appears */
:focus-visible { outline: 2px dashed var(--ph-hi); outline-offset: 3px; }

/* ---------- page (on <body>) ---------- */
.page {
  margin: 0; min-height: 100vh;
  font: 500 15px/1.5 var(--f-mono); color: var(--text);
  background: radial-gradient(ellipse at 50% 30%, #17231a 0%, var(--screen) 60%, #0c120c 100%) fixed var(--screen);
  cursor: url(assets/img/cursor.png) 1 1, auto;
  -webkit-text-size-adjust: 100%;
}

/* ---------- screen + CRT overlay ---------- */
.screen { max-width: 1140px; min-height: 100vh; margin: 0 auto; padding: 22px; color: var(--text); }
:root { --crt-cell: 2.8px; --crt-h: .07; --crt-v: .04; }
/* soft square pixel mask + vignette (::after), slow rolling scan band (::before) */
.screen::after {
  content: ""; position: fixed; top: 0; left: 0; right: 0; pointer-events: none; z-index: 50;
  height: 100vh; height: 100lvh;   /* the large viewport: on iOS the overlay also covers the strip under Safari's floating toolbar */
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,var(--crt-h)) 0, transparent 35%, transparent 65%, rgba(0,0,0,var(--crt-h)) 100%) 0 0 / 100% var(--crt-cell),
    repeating-linear-gradient(90deg,  rgba(0,0,0,var(--crt-v)) 0, transparent 35%, transparent 65%, rgba(0,0,0,var(--crt-v)) 100%) 0 0 / var(--crt-cell) 100%,
    radial-gradient(ellipse at center, rgba(163,245,134,.035), transparent 70%),
    radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,.35) 100%);
  animation: flicker 5s ease-in-out infinite;
}
.screen::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 35vh; pointer-events: none; z-index: 49;
  background: linear-gradient(transparent, rgba(163,245,134,.045) 50%, transparent);
  animation: roll 9s linear infinite;
}
@keyframes flicker { 0%, 100% { opacity: 1 } 50% { opacity: .93 } }
@keyframes roll { from { transform: translateY(-35vh) } to { transform: translateY(100vh) } }

/* ---------- shared page chrome: layout, nav, footer ---------- */
.layout { display: grid; gap: 22px; color: var(--text); }
/* page-head: every inner page starts the same way — big glowing title + DOS path line */
.page-head { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 20px; color: var(--text); text-shadow: var(--glow); }
.page-head__path { color: var(--ph-muted); font: 500 14px/1.4 var(--f-mono); word-break: break-all; }
/* the DOS path is a breadcrumb (tools/crumbs.py): every folder links to its page, the current one is lit */
.page-head__crumb { color: var(--ph-muted); font: 500 14px/1.4 var(--f-mono); text-decoration: none; }
.page-head__crumb:hover { background: var(--ph); color: var(--ink); text-shadow: none; }
.page-head__crumb--current, .page-head__crumb--current:hover { background: none; color: var(--ph-hi); text-shadow: var(--glow); }
.page-head__sep { color: var(--ph-muted); font: 500 14px/1.4 var(--f-mono); }
/* nav */
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 0; border-bottom: 2px solid var(--line); color: var(--text); font: 500 16px var(--f-mono); text-shadow: var(--glow); }
.nav__brand { display: flex; align-items: center; gap: 10px; margin-right: auto; color: var(--ph-hi); font: 700 22px var(--f-mono); text-decoration: none; }
.nav__link { padding: 3px 12px; border-radius: 4px; color: var(--text); font: 500 16px var(--f-mono); text-decoration: none; }
.nav__link:hover, .nav__link--current { background: var(--ph); color: var(--ink); text-shadow: none; }
/* footer */
.footer { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; padding: 10px 16px; border: 2px solid var(--line); border-radius: var(--r); color: var(--text); font: 500 13px var(--f-mono); text-shadow: var(--glow); }
.footer__brand { display: flex; align-items: center; gap: 10px; margin-right: auto; color: var(--ph-hi); font: 700 18px var(--f-mono); }
.footer__logo { display: block; width: 22px; height: auto; }
.footer__link { display: flex; align-items: center; gap: 8px; color: var(--text); font: 500 13px var(--f-mono); text-decoration: none; }
.footer__link:hover { color: var(--ph-hi); }
.footer__icon { width: 22px; height: 22px; }

/* ---------- scrollbars: OverlayScrollbars, pixel theme (square handle, no radius) ---------- */
.os-theme-xtier {
  --os-size: 10px; --os-padding-perpendicular: 2px; --os-padding-axis: 2px;
  --os-track-border-radius: 0; --os-track-bg: rgba(141, 252, 138, .06); --os-track-bg-hover: rgba(141, 252, 138, .1); --os-track-bg-active: rgba(141, 252, 138, .14);
  --os-handle-border-radius: 0; --os-handle-min-size: 40px;
  --os-handle-bg: var(--line-dim); --os-handle-bg-hover: var(--line); --os-handle-bg-active: var(--ph);
}

/* ---------- glow utilities: the only place glow is defined ---------- */
.text-glow {
  color: var(--glow-text);
  text-shadow: 0 0 6px color-mix(in srgb, var(--glow-text) 60%, transparent), 0 0 18px color-mix(in srgb, var(--glow-text) 30%, transparent), 3px 3px 0 #0b120b;
}
/* icons: color only (SVG uses currentColor); set per context via --icon-color. No glow by design. */
.icon-glow { color: var(--icon-color, var(--glow-text)); }
.win--cream .icon-glow, .win-pill--cream .icon-glow { color: var(--ink); }

/* ---------- ico: stroked line icon (mix with an element class for size) ---------- */
.ico { display: block; width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: square; }

/* ---------- win ---------- */
.win { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 2px solid var(--line); border-radius: var(--r); background: var(--panel); color: var(--text); font: 500 15px/1.5 var(--f-mono); text-shadow: var(--glow); }
.win__bar {
  display: flex; flex: none; align-items: center; gap: 10px;
  padding: 6px 10px; border-bottom: 2px solid var(--line);
  background: linear-gradient(var(--panel-2), var(--panel)); color: var(--ph-hi);
  font: 700 16px/1.2 var(--f-mono);
}
.win__icon { display: block; flex: none; width: 24px; height: 24px; object-fit: contain; }
.win__icon--text { display: grid; place-items: center; font: 700 16px/1 var(--f-mono); }
.win__title { min-width: 0; margin: 0; overflow: hidden; color: var(--ph-hi); font: 500 19px/1.2 var(--f-mono); white-space: nowrap; text-overflow: ellipsis; }
/* classic Mac title-bar pinstripes: 1px lines on whole pixels, fill the bar between title and controls */
.win__hatch { flex: 1 1 auto; align-self: center; min-width: 24px; height: 11px; margin: 0 4px; background: repeating-linear-gradient(180deg, var(--line-dim) 0 1px, transparent 1px 3px); }
.win--cream .win__hatch { background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--ink) 35%, transparent) 0 1px, transparent 1px 3px); }
.win__note { margin-left: auto; color: var(--ph-dim); font: 500 12px var(--f-mono); }
.win__link { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 2px 8px; border-radius: 3px; color: var(--ph-hi); font: 500 15px var(--f-mono); text-decoration: none; transition: background .12s, color .12s; }
.win__link:hover { background: var(--ph); color: var(--ink); text-shadow: none; }
.win__link-arrow { display: inline-block; transition: transform .12s steps(2); }
.win__link:hover .win__link-arrow { transform: translateX(4px); }
.win__ctrls { display: flex; gap: 4px; margin-left: auto; }
/* Win98-style title button: 1px border, 1px hard bevel inside, 1px hard semi-transparent ring outside (no blur) */
.win__ctrl {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 18px; line-height: 0; margin: 0; padding: 0; appearance: none;
  border: 1px solid var(--ph); border-radius: 3px;
  background: linear-gradient(#26391f, #142015);
  box-shadow: inset 1px 1px 0 rgba(195, 255, 176, .35), inset -1px -1px 0 rgba(0, 0, 0, .55), 0 0 0 1px rgba(163, 245, 134, .25);
  color: var(--ph-hi); font: 700 11px/1 var(--f-mono); text-shadow: none;
}
.win__ctrl-icon { display: block; flex: none; width: 10px; height: 10px; color: currentColor; }
.win__ctrl:active { background: linear-gradient(#142015, #26391f); box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .55), inset -1px -1px 0 rgba(195, 255, 176, .35), 0 0 0 1px rgba(163, 245, 134, .25); }
.win--cream .win__ctrl {
  border-color: #1b211b; border-radius: 2px; background: linear-gradient(#ded1b8, #d2c4af); color: var(--ink);
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #8c8d86, 0 0 0 1px rgba(0, 0, 0, .25);
}
.win--cream .win__ctrl:active { background: linear-gradient(#bdbeb6, #d6d6d0); box-shadow: inset 1px 1px 0 #8c8d86, inset -1px -1px 0 #fff, 0 0 0 1px rgba(0, 0, 0, .25); }
.win__ctrl[data-win] { cursor: pointer; }
.win__ctrl--off { opacity: .35; }   /* decorative controls (long post windows): no fx on them */
.win__body { flex: 1 1 auto; padding: 14px; color: var(--text); }

/* msgbox(): a small system window for the playful notices (retro.js) */
.msgbox { max-width: min(440px, calc(100vw - 32px)); margin: auto; padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible; }
.msgbox::backdrop { background: rgba(3, 8, 4, .6); }
.msgbox__win { box-shadow: 0 0 0 1px rgba(163, 245, 134, .25), 6px 6px 0 rgba(0, 0, 0, .55); }
.msgbox__body { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px 16px; padding: 18px; color: var(--text); }
.msgbox__icon { display: grid; place-items: center; width: 38px; height: 38px; background: var(--ph); color: var(--ink); font: 700 20px/1 var(--f-mono); text-shadow: none; }
.msgbox__text { margin: 0; color: var(--text); font: 500 14px/1.5 var(--f-mono); }
.msgbox__ok { grid-column: 1 / -1; justify-self: end; }
.msgbox__close { cursor: pointer; }
.msgbox__link { color: var(--ph-hi); text-decoration: underline; text-underline-offset: 3px; }
.msgbox__link:hover { background: var(--ph); color: var(--ink); text-shadow: none; }

/* lightbox: one <dialog> for every a[data-lightbox] (retro.js); a site window over a dimmed, scanlined screen */
.lightbox { position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 16px; border: 0; background: transparent; color: var(--text); font: 500 15px/1.5 var(--f-mono); overflow: hidden; }
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: rgba(3, 8, 4, .9); }
.lightbox::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(163, 245, 134, .05) 0 1px, transparent 1px 3px); }
.lightbox__win { max-width: 100%; max-height: 100%; box-shadow: 0 0 0 1px rgba(163, 245, 134, .25), 8px 8px 0 rgba(0, 0, 0, .55); }
.lightbox__bar { gap: 10px; }
.lightbox__title { color: var(--ph-hi); font: 500 17px/1.2 var(--f-mono); }
.lightbox__count { flex: none; color: var(--ph-dim); font: 500 13px/1 var(--f-mono); }
.lightbox__btn { cursor: pointer; }
.lightbox__btn[hidden] { display: none; }
.lightbox__body { display: grid; justify-items: center; gap: 10px; max-height: calc(100vh - 100px); overflow: auto; padding: 12px; background: var(--term-bg); color: var(--text); }
.lightbox__img { display: block; max-width: none; border: 2px solid var(--line-dim); background: var(--panel); }
.lightbox__img--pixel { image-rendering: pixelated; }
.lightbox__cap { max-width: 70ch; margin: 0; color: var(--ph-muted); font: 500 13px/1.4 var(--f-mono); text-align: center; }
.lightbox__cap::before { content: "fig > "; color: var(--ph); }
.lightbox__cap[hidden] { display: none; }

/* window close/minimize fx (driven by retro.js) */
.win__flash { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; background: #d6ffc9; box-shadow: inset 0 0 24px rgba(141, 252, 138, .9); }
.win__flash--min { background: #2b4a2d; box-shadow: inset 0 0 0 2px var(--ph); }
.win-pill {
  position: absolute; z-index: 40; display: flex; align-items: center; gap: 10px; overflow: hidden;
  padding: 0 12px; border: 2px solid var(--line); border-radius: var(--r);
  background: linear-gradient(var(--panel-2), var(--panel)); box-shadow: 0 0 0 1px rgba(163, 245, 134, .25);
  color: var(--ph-hi); font: 500 19px/1.2 var(--f-mono); text-shadow: var(--glow); white-space: nowrap;
}
.win-pill--cream { border-color: var(--cream-line); background: var(--cream-2); color: var(--ink); text-shadow: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.win-pill--cream .win__title { color: var(--ink); }
.win-loader {
  position: absolute; z-index: 40; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 6px; padding: 10px 14px;
  border: 1px solid var(--ph); border-radius: 3px; background: var(--term-bg);
  box-shadow: 0 0 0 1px rgba(163, 245, 134, .25);
  color: var(--term-fg); font: 20px/1 var(--f-term); text-shadow: var(--term-glow); letter-spacing: .1em;
}
.win-loader__bar { width: 96px; height: 10px; border: 1px solid var(--term-fg); padding: 1px; }
.win-loader__fill { height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--term-fg) 0 10px, transparent 10px 12px); animation: win-load var(--load-ms, 1000ms) steps(8) forwards; }
@keyframes win-load { to { width: 100%; } }

.win--cream { border-color: var(--cream-line); background: var(--cream); color: var(--ink); text-shadow: none; }
.win--cream .win__bar { border-color: var(--cream-line); background: var(--cream-2); color: var(--ink); }
.win--cream .win__title { color: var(--ink); }
.win--cream .win__body { color: var(--ink); }

.win__body--term { background: var(--term-bg); color: var(--term-fg); font: 20px/1.15 var(--f-term); text-shadow: var(--term-glow); }


/* ---------- btn ---------- */
/* base = shape only; colours come from --primary / --secondary */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 21px; border: 2px solid transparent; border-radius: var(--r);
  font: 600 18px var(--f-mono); text-decoration: none;
  transition: transform .08s, box-shadow .15s, background .15s;
}
.btn:hover { transform: translate(-1px,-1px); }
.btn:active { transform: translate(1px,1px); }
.btn--primary { border-color: #d6f6cd; background: #98f377; color: var(--ink); text-shadow: none; box-shadow: 0 0 12px rgba(152,243,119,.3); }
.btn--primary:hover { box-shadow: 0 0 20px rgba(152,243,119,.5); }
.btn--secondary { border-color: #d6dccf; background: transparent; color: var(--text); text-shadow: var(--glow); }
.btn--secondary:hover { box-shadow: 0 0 16px rgba(163,245,134,.3); }
.btn__icon { width: 20px; height: 20px; }
.btn__icon--wide { width: 24px; height: 17px; }   /* ~15% smaller than the 28x20 slot */

/* ---------- small blocks ---------- */
.chip { padding: 2px 10px; border: 1.5px solid #7a8a6a; border-radius: 99px; background: #c6d9aa; color: var(--ink); font: 600 11px/1.5 var(--f-mono); text-shadow: none; }
.tagline { display: inline-block; padding: 3px 18px; border-radius: var(--r); background: var(--ph); color: var(--ink); text-shadow: none; box-shadow: 0 0 12px rgba(163,245,134,.3); font: 500 21px/1.5 var(--f-mono); letter-spacing: .02em; }
/* pixel fonts ship one weight: never fake bold/italic, it smears the pixels */
.mega { margin: 0 0 4px; font: 700 clamp(36px, 7vw, 50px)/.98 var(--f-display); font-synthesis: none; text-transform: uppercase; letter-spacing: .02em; }
.cursor::after { content: "█"; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0 } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-width: 640px) {
  .screen { padding: 14px; }
}