/* ===== 8-BIT COLOR SHELL — retro DOS website template =====
   Change the colours in the :root block below — everything follows.  */
:root{
  --dot:#111111;            /* halftone dot colour        */
  --wall:#ffffff;           /* page background            */
  --case:#e9e2d2;           /* monitor plastic            */
  --case-dark:#c9c0ac;      /* monitor shadow             */
  --screen:#000000;         /* screen background          */
  --bar:#2222c8;            /* title bar blue             */
  --ink:#e8e8e8;            /* main text                  */
  --cyan:#00d8d8;           /* folder colour 1            */
  --magenta:#d800d8;        /* folder colour 2            */
  --dim:#8a8a8a;
  --pixel:'Press Start 2P',monospace;
  --sys:'VT323','Courier New',monospace;
}
/* alternate palettes — body[data-theme="amber"] etc. */
body[data-theme="amber"]{--bar:#a85000;--cyan:#ffb000;--magenta:#ff7000;--ink:#ffd79a}
body[data-theme="green"]{--bar:#006000;--cyan:#33ff66;--magenta:#00b84a;--ink:#c8ffd6}
body[data-theme="mono"] {--bar:#333333;--cyan:#ffffff;--magenta:#9a9a9a;--ink:#ffffff}
/* Game Boy LCD — the screen itself goes olive-green */
body[data-theme="gameboy"]{
  --screen:#9bbc0f; --ink:#0f380f; --bar:#0f380f; --dim:#306230;
  --cyan:#306230; --magenta:#8bac0f; --case:#d8d0bd; --case-dark:#b8b09c;
}
body[data-theme="gameboy"] .titlebar{color:#9bbc0f}
body[data-theme="gameboy"] .screen::before{
  background:repeating-linear-gradient(rgba(15,56,15,0) 0 2px, rgba(15,56,15,.14) 2px 4px)}
body[data-theme="gameboy"] .ficon b{background:rgba(15,56,15,.35)}
body[data-theme="gameboy"] .menubar .sw{color:var(--ink)}
body[data-theme="gameboy"] .menubar .sw:hover{background:var(--ink);color:var(--screen)}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{min-height:100%}
body{
  background:
    radial-gradient(var(--dot) 1.6px, transparent 1.7px) 0 0/12px 12px,
    var(--wall);
  font-family:var(--sys);
  display:flex;flex-direction:column;align-items:center;
  padding:44px 18px 70px;
}

/* ── the monitor ───────────────────────────── */
.monitor{
  width:min(940px,100%);
  background:var(--case);
  border-radius:26px;
  padding:34px 34px 22px;
  box-shadow:0 0 0 3px #2b2b2b, 14px 16px 0 rgba(0,0,0,.35);
  position:relative;
}
.monitor::after{ /* vent line */
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  bottom:9px;width:120px;height:6px;border-radius:4px;background:var(--case-dark);
}
.screen{
  background:var(--screen);
  border:3px solid #2b2b2b;
  padding:14px;
  position:relative;overflow:hidden;
  min-height:600px;
  display:flex;flex-direction:column;gap:10px;
}
.screen::before{ /* scanlines */
  content:'';position:absolute;inset:0;pointer-events:none;z-index:9;
  background:repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 4px);
}
.tag{
  margin-top:22px;background:var(--case);border:3px solid #2b2b2b;border-radius:8px;
  padding:10px 22px;font-family:var(--pixel);font-size:13px;color:#2b2b2b;
  box-shadow:6px 6px 0 rgba(0,0,0,.3)
}

/* ── title + menu ──────────────────────────── */
.titlebar{
  background:var(--bar);color:#fff;font-family:var(--pixel);font-size:11px;
  text-align:center;padding:7px 6px;letter-spacing:1px;position:relative;z-index:2
}
.titlebar .ctrls{position:absolute;right:8px;top:6px;font-size:9px;letter-spacing:0}
.menubar{
  display:flex;gap:16px;font-size:19px;color:var(--ink);padding:0 2px;z-index:2;position:relative;
  border-bottom:1px solid var(--dim);padding-bottom:4px;flex-wrap:wrap
}
.menubar u{color:var(--cyan)}
.menubar .right{margin-left:auto;display:flex;gap:14px}
.menubar .sw{cursor:pointer;color:var(--magenta)}
.menubar .sw:hover{background:var(--magenta);color:#000}

/* ── folder shelf ──────────────────────────── */
.shelf{
  border:4px double var(--ink);padding:16px 14px 12px;position:relative;z-index:2
}
.shelf .lbl{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--screen);color:var(--ink);font-family:var(--pixel);font-size:10px;padding:0 10px
}
.folders{display:grid;grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:14px 10px}
.fold{background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:7px;padding:6px 2px}
.ficon{width:78px;height:58px;position:relative;image-rendering:pixelated}
.ficon i{position:absolute;inset:0;background:var(--cyan);
  clip-path:polygon(0 8px, 30px 8px, 36px 0, 78px 0, 78px 58px, 0 58px)}
.fold:nth-child(even) .ficon i{background:var(--magenta)}
.ficon b{position:absolute;left:6px;right:6px;bottom:6px;height:4px;background:rgba(0,0,0,.35)}
.fold .fname{font-family:var(--pixel);font-size:10px;color:var(--ink);letter-spacing:0}
.fold:hover .ficon i{filter:brightness(1.25)}
.fold:hover .fname,.fold.on .fname{background:var(--ink);color:#000;padding:2px 4px}
.fold.on .ficon i{clip-path:polygon(0 8px, 30px 8px, 36px 0, 78px 0, 78px 58px, 10px 58px);
  transform:skewX(-6deg)}

/* ── viewer pane ───────────────────────────── */
.pane{display:flex;gap:16px;flex:1;z-index:2;position:relative;min-height:170px}
.doc{flex:1;color:var(--ink);font-size:21px;line-height:1.32}
.doc h2{font-family:var(--pixel);font-size:12px;color:var(--cyan);margin-bottom:10px;letter-spacing:1px}
.doc p{margin-bottom:9px}
.doc a{color:var(--magenta)}
.doc ul{list-style:none}
.doc li{margin-bottom:5px}
.doc li::before{content:'> ';color:var(--cyan)}
.doc .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.doc .chip{border:1px solid var(--ink);padding:1px 9px;font-size:18px}
.pc{flex:0 0 148px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px}
.pc svg{width:148px;height:auto}

/* ── status bar ────────────────────────────── */
.status{display:flex;align-items:center;gap:10px;font-size:19px;color:var(--ink);z-index:2;position:relative;
  border-top:1px solid var(--dim);padding-top:6px;flex-wrap:wrap}
.sw-chip{width:16px;height:16px;display:inline-block;border:1px solid var(--ink)}
.sw-chip.c{background:var(--cyan)}.sw-chip.m{background:var(--magenta)}
.blink{animation:bl 1s steps(1) infinite}@keyframes bl{50%{opacity:0}}
.status .right{margin-left:auto}

@media(max-width:720px){
  .monitor{padding:20px 18px 16px;border-radius:18px}
  /* keep the file name off the window buttons */
  .titlebar{font-size:9px;padding:8px 96px 8px 10px;text-align:left;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .titlebar .ctrls{font-size:8px;top:8px;letter-spacing:-1px}
  .shelf .lbl{font-size:8px;white-space:nowrap}
  .shelf{padding:14px 10px 10px}
  .menubar{font-size:17px;gap:12px}
  .status{font-size:17px}
  .pc{display:none}
  .doc{font-size:19px}
  /* keep the desktop look: folders stay in rows, just smaller */
  .folders{grid-template-columns:repeat(3,1fr);gap:12px 6px}
  .fold{padding:4px 0;gap:5px}
  .ficon{width:58px;height:44px}
  .ficon i{clip-path:polygon(0 6px, 22px 6px, 27px 0, 58px 0, 58px 44px, 0 44px)}
  .fold.on .ficon i{clip-path:polygon(0 6px, 22px 6px, 27px 0, 58px 0, 58px 44px, 7px 44px)}
  .fold .fname{font-size:8px}
}
@media(max-width:400px){
  .folders{gap:10px 4px}
  .ficon{width:50px;height:38px}
  .ficon i{clip-path:polygon(0 5px, 19px 5px, 23px 0, 50px 0, 50px 38px, 0 38px)}
  .fold.on .ficon i{clip-path:polygon(0 5px, 19px 5px, 23px 0, 50px 0, 50px 38px, 6px 38px)}
  .fold .fname{font-size:7px}
}