/* ═══════════════════════════════════════
   FM · Fayez Muhammed — neo-brutalist desktop
   Vanilla CSS. No radius. No gradients.
   ═══════════════════════════════════════ */

:root{
  --paper:#f2ede0;
  --ink:#0a0a0a;
  --card:#ffffff;
  --red:#ff3b00;
  --blue:#2b4dff;
  --yellow:#ffe94a;
  --green:#00c46a;
  --bw:3px;
  --pop:6px 6px 0 var(--ink);
  --sans:'Space Grotesk',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --bar:44px;
  --surround:#e2ddcd;
}
[data-theme="dark"]{
  --surround:#0a0a09;
  --paper:#121210;
  --ink:#f2ede0;
  --card:#1c1c19;
  --red:#ff5227;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0}
html,body{height:100%}
body{
  font-family:var(--sans);font-size:15px;line-height:1.5;
  color:var(--ink);overflow:hidden;
  display:grid;place-items:center;padding:1.4rem;
  background:var(--surround);
  background-image:repeating-linear-gradient(45deg,
    rgba(0,0,0,.07) 0 10px,transparent 10px 22px);
}

/* the machine: one centred frame holding the whole OS */
.os{
  position:relative;display:flex;flex-direction:column;
  width:min(1180px,100%);height:min(860px,100%);
  border:var(--bw) solid var(--ink);box-shadow:10px 10px 0 var(--ink);
  background:var(--paper);overflow:hidden;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
svg{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:var(--bw) solid var(--blue);outline-offset:2px}

/* ── menu bar ── */
.menubar{
  position:relative;flex-shrink:0;height:var(--bar);z-index:500;
  display:flex;align-items:center;gap:1.25rem;padding:0 .8rem;
  background:var(--card);border-bottom:var(--bw) solid var(--ink);
  font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
}
/* FM monogram — one solid tile, a red dot, the name */
.mb-logo{display:flex;align-items:center;gap:.5rem}
.mb-logo .mono{
  display:grid;place-items:center;padding:.22rem .4rem;
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-weight:700;font-size:.76rem;
  letter-spacing:.02em;line-height:1;
  transition:background .18s ease,color .18s ease;
}
.mb-logo .mono-dot{
  width:.4rem;height:.4rem;background:var(--red);flex-shrink:0;
  transition:transform .18s ease;
}
.mb-logo .mono-word{
  font-weight:700;letter-spacing:.16em;font-size:.7rem;opacity:.75;
  transition:opacity .18s ease;
}
[data-theme="dark"] .mb-logo .mono{background:var(--yellow);color:#0a0a0a}
.mb-logo:hover .mono{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.mb-logo:hover .mono-dot{transform:scale(1.5)}
.mb-logo:hover .mono-word{opacity:1}
.mb-item{cursor:pointer;padding:.2rem .4rem;border:2px solid transparent}
.mb-item:hover{background:var(--ink);color:var(--paper)}
.mb-right{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.mb-btn{border:2px solid var(--ink);padding:.2rem .5rem;font-family:var(--mono);font-size:.7rem;font-weight:700}
.mb-btn:hover{background:var(--yellow);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.mb-clock{font-weight:700}

/* ── desktop ── */
.desktop{
  position:relative;z-index:1;flex:1;min-height:0;
  padding:1.4rem 1.4rem 6.2rem;
  overflow:hidden;
}

/* ── wallpapers: four swappable patterns ── */
.desktop::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  transition:background-color .3s ease;
}
/* 1 · diagonal caution stripes */
[data-wall="1"] .desktop::before{
  background-color:var(--paper);
  background-image:repeating-linear-gradient(45deg,
    color-mix(in srgb,var(--ink) 9%,transparent) 0 14px,
    transparent 14px 40px);
}
/* 2 · fat dot matrix */
[data-wall="2"] .desktop::before{
  background-color:var(--yellow);
  background-image:radial-gradient(circle,#0a0a0a 3.5px,transparent 3.6px);
  background-size:30px 30px;
}
[data-theme="dark"][data-wall="2"] .desktop::before{
  background-color:#1a1a16;
  background-image:radial-gradient(circle,var(--yellow) 3.5px,transparent 3.6px);
}
/* 3 · checkerboard */
[data-wall="3"] .desktop::before{
  background-color:var(--paper);
  background-image:
    linear-gradient(45deg,color-mix(in srgb,var(--red) 20%,transparent) 25%,transparent 25% 75%,color-mix(in srgb,var(--red) 20%,transparent) 75%),
    linear-gradient(45deg,color-mix(in srgb,var(--red) 20%,transparent) 25%,transparent 25% 75%,color-mix(in srgb,var(--red) 20%,transparent) 75%);
  background-size:64px 64px;
  background-position:0 0,32px 32px;
}
/* 4 · concentric arcs */
[data-wall="4"] .desktop::before{
  background-color:var(--paper);
  background-image:repeating-radial-gradient(circle at 12% 88%,
    color-mix(in srgb,var(--blue) 26%,transparent) 0 3px,
    transparent 3px 46px);
}

/* stage — the draggable area windows live in */
.stage{position:relative;height:100%;width:100%}

.icons{list-style:none;display:grid;grid-template-columns:repeat(2,88px);gap:.5rem;width:max-content}
.icon{
  width:88px;display:grid;justify-items:center;gap:.35rem;padding:.6rem .3rem;
  border:2px solid transparent;font-family:var(--mono);font-size:.66rem;text-align:center;
  transition:transform .12s ease;
}
.icon svg{width:40px;height:40px;stroke:#0a0a0a;stroke-width:2.6}
.icon svg .f{fill:var(--c)}
.icon svg .sh{fill:rgba(0,0,0,.22)}
.icon span{word-break:break-all}
.icon:hover{
  border-color:var(--ink);color:var(--ink);
  background:color-mix(in srgb,var(--c) 30%,#fff);
  transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink);
}
.icon:hover svg{transform:rotate(-4deg) scale(1.06)}
.icon svg{transition:transform .12s ease}
.icon:active{transform:none;box-shadow:none}

/* ── corner mini-game ── */
.game{
  position:absolute;left:0;bottom:0;width:300px;
  border:var(--bw) solid var(--ink);box-shadow:var(--pop);
  background:var(--card);user-select:none;
}
.game-bar{
  display:flex;justify-content:space-between;align-items:center;gap:.5rem;
  padding:.3rem .5rem;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;
}
.game-score b{color:var(--yellow);font-weight:700}
#gCanvas{display:block;width:100%;height:110px;background:var(--card);cursor:pointer}
.game-hint{
  display:block;width:100%;padding:.3rem;
  border-top:2px solid var(--ink);background:var(--yellow);color:#0a0a0a;
  font-family:var(--mono);font-size:.58rem;font-weight:700;letter-spacing:.1em;
}
.game-hint:hover{background:var(--red);color:#fff}
.game.over .game-hint{background:var(--red);color:#fff}

/* right rail */
.rail{
  position:absolute;right:0;top:0;
  display:flex;flex-direction:column;align-items:flex-end;gap:1.4rem;
}

/* sticky note */
.note{
  width:238px;
  background:var(--yellow);color:#0a0a0a;border:var(--bw) solid #0a0a0a;
  box-shadow:6px 6px 0 #0a0a0a;padding:1rem;transform:rotate(2deg);font-size:.85rem;
}
.note b{display:block;font-size:1.1rem;margin-bottom:.35rem}
.note p{margin-bottom:.7rem}
.note .dot{display:inline-block;width:.5rem;height:.5rem;background:var(--green);border:2px solid #0a0a0a;margin-right:.4rem;vertical-align:1px;animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.25}}

/* ── contact / social column ── */
.socials{list-style:none;display:flex;flex-direction:column;gap:.55rem;align-items:flex-end}
.soc{
  position:relative;display:grid;place-items:center;
  width:46px;height:46px;padding:11px;
  background:var(--c);color:#0a0a0a;
  border:var(--bw) solid var(--ink);box-shadow:5px 5px 0 var(--ink);
  transition:transform .12s ease,box-shadow .12s ease;
}
.soc svg{width:100%;height:100%;stroke:#0a0a0a;stroke-width:2}
.soc.brand svg{fill:#0a0a0a;stroke:none}
.soc:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.soc:active{transform:translate(5px,5px);box-shadow:none}

/* tooltip flies out to the left */
.soc em{
  position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);
  padding:.25rem .5rem;background:var(--ink);color:var(--paper);
  border:2px solid var(--ink);font-family:var(--mono);font-size:.66rem;font-style:normal;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s ease;
}
.soc:hover em{opacity:1}

/* ── windows ── */
.win{
  position:absolute;left:var(--x);top:var(--y);width:var(--w);max-width:100%;
  background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--pop);
  display:flex;flex-direction:column;max-height:calc(100% - 1rem);
  animation:pop .16s ease-out;
}
@keyframes pop{from{transform:scale(.96) translateY(6px);opacity:0}}
.win[hidden]{display:none}
.bar{
  display:flex;align-items:center;gap:.5rem;padding:.45rem .5rem;
  background:var(--ink);color:var(--paper);cursor:grab;user-select:none;
  font-family:var(--mono);font-size:.72rem;
}
.bar:active{cursor:grabbing}
.bar-t{margin-right:auto;font-weight:700;display:flex;align-items:center;gap:.45rem}
.bar-t::before{content:"";width:.7rem;height:.7rem;background:var(--c,var(--red));border:2px solid var(--paper)}
.x{width:1.35rem;height:1.35rem;display:grid;place-items:center;background:var(--red);color:#fff;border:2px solid var(--paper);font-size:.7rem;line-height:1}
.x:hover{background:var(--paper);color:var(--ink)}
.body{padding:1.1rem;overflow:auto;flex:1}
.body.pad0{padding:0}

/* ── terminal ── */
.term{
  display:flex;flex-direction:column;background:#0d0d0c;color:#e8e4d8;
  font-family:var(--mono);font-size:.78rem;line-height:1.7;
  height:340px;cursor:text;
}
.term-out{flex:1;overflow-y:auto;padding:.9rem .9rem 0}
.term-out p{white-space:pre-wrap;word-break:break-word}
.term-out .cmd{color:#8b5cf6}
.term-out .cmd b{color:#00c46a;font-weight:400}
.term-out .k{color:#ffe94a}
.term-out .a{color:#00c8d7;border-bottom:1px solid currentColor}
.term-out .err{color:#ff5227}
.term-out .dim{opacity:.55}
.term-out .head{color:#ff3b00;font-weight:700}
.term-line{display:flex;align-items:center;gap:.5rem;padding:.4rem .9rem .9rem}
.term-ps{color:#00c46a;flex-shrink:0;white-space:nowrap}
.term-ps b{color:#8b5cf6;font-weight:400}
#termIn{
  flex:1;background:none;border:0;outline:none;
  font:inherit;color:#e8e4d8;caret-color:#ff3b00;padding:0;
}

/* title-bar actions */
.bar-act{
  padding:.15rem .4rem;border:2px solid var(--paper);font-size:.6rem;font-weight:700;
  letter-spacing:.06em;flex-shrink:0;
}
.bar-act:hover{background:var(--paper);color:var(--ink)}

/* pdf viewer */
#win-resume{height:min(680px,calc(100% - 1rem))}
.pdf{display:flex;min-height:420px;background:var(--paper)}
.pdf object{width:100%;flex:1;border:0;display:block}
.pdf-fallback{display:none;gap:1rem;justify-items:center;padding:1.2rem;height:100%;overflow:auto}
.pdf-fallback img{border:var(--bw) solid var(--ink);box-shadow:var(--pop);max-width:100%}
.pdf-btn{
  padding:.6rem 1rem;background:var(--red);color:#fff;
  border:var(--bw) solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  font-family:var(--mono);font-size:.72rem;font-weight:700;
}
.pdf-btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}

/* readme */
.mono{font-family:var(--mono);font-size:.82rem}
.mono p{margin-bottom:.7rem}
.mono .muted{opacity:.65;margin-bottom:0}
.caret{display:inline-block;width:.5rem;height:.9rem;background:var(--red);vertical-align:-2px;margin-left:.3rem;animation:blink 1s steps(2) infinite}

/* work */
.job{border-left:var(--bw) solid var(--red);padding-left:.9rem;margin-bottom:1.2rem}
.job:last-child{margin-bottom:0}
.job .yr{font-family:var(--mono);font-size:.66rem;font-weight:700;background:var(--ink);color:var(--paper);padding:.1rem .35rem}
.job h3{font-size:1.05rem;font-weight:700;margin:.4rem 0 .2rem;text-transform:uppercase}
.job p{font-size:.86rem;opacity:.75}

/* projects — file list */
.fhead{
  display:flex;justify-content:space-between;padding:.45rem .9rem;
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;
}
.file{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.85rem .9rem;border-bottom:2px solid var(--ink);
  font-family:var(--mono);font-size:.8rem;transition:padding .15s ease;
}
.file:last-child{border-bottom:0}
.file:hover{background:var(--red);color:#fff;padding-left:1.4rem}
.file .fs{opacity:.6;font-size:.68rem;text-align:right}
.file:hover .fs{opacity:1}
.file.all{background:var(--yellow);color:#0a0a0a}
.file.all:hover{background:var(--blue);color:#fff}

/* stack */
.tags{display:flex;flex-wrap:wrap;gap:.45rem}
.tags span{
  padding:.35rem .7rem;border:2px solid var(--ink);font-family:var(--mono);font-size:.72rem;
  transition:transform .12s ease,box-shadow .12s ease;
}
.tags span:nth-child(4n+1):hover{background:var(--red);color:#fff}
.tags span:nth-child(4n+2):hover{background:var(--blue);color:#fff}
.tags span:nth-child(4n+3):hover{background:var(--yellow);color:#0a0a0a}
.tags span:nth-child(4n):hover{background:var(--green);color:#0a0a0a}
.tags span:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink)}

/* contact */
#form{display:grid;gap:.3rem}
#form label{font-family:var(--mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
#form input,#form textarea{
  width:100%;padding:.6rem;margin-bottom:.5rem;font:inherit;font-size:.86rem;resize:vertical;
  border:var(--bw) solid var(--ink);background:var(--paper);color:var(--ink);
}
#form input::placeholder,#form textarea::placeholder{opacity:.45}
#form input:focus,#form textarea:focus{outline:none;background:var(--card);box-shadow:4px 4px 0 var(--ink)}
#form button{
  padding:.7rem;background:var(--red);color:#fff;border:var(--bw) solid var(--ink);
  font-weight:700;letter-spacing:.06em;box-shadow:var(--pop);
  transition:transform .1s ease,box-shadow .1s ease;
}
#form button:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
#form button:active{transform:translate(6px,6px);box-shadow:none}
.hp{position:absolute;left:-9999px}
.note-out{font-family:var(--mono);font-size:.7rem;min-height:1rem;margin-top:.4rem}
.links{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem;padding-top:.9rem;border-top:2px solid var(--ink)}
.links a{font-family:var(--mono);font-size:.72rem;border-bottom:2px solid var(--red)}
.links a:hover{background:var(--red);color:#fff}

/* ── taskbar (flat, pinned to the very bottom) ── */
.taskbar{
  position:relative;flex-shrink:0;height:var(--bar);z-index:500;
  display:flex;align-items:center;gap:.6rem;padding:0 .8rem;
  background:var(--card);border-top:var(--bw) solid var(--ink);
  font-family:var(--mono);font-size:.7rem;
}
.tb-label{
  font-weight:700;text-transform:uppercase;letter-spacing:.1em;flex-shrink:0;
  background:var(--ink);color:var(--paper);padding:.2rem .45rem;
}
.tb-items{display:flex;gap:.4rem;align-items:center;overflow-x:auto;flex:1}
.tb-empty{opacity:.5;white-space:nowrap}
.tb-stat{flex-shrink:0;font-weight:700;opacity:.55;letter-spacing:.06em}
.tb-item{
  display:flex;align-items:center;gap:.4rem;padding:.25rem .5rem;
  border:2px solid var(--ink);background:var(--paper);white-space:nowrap;flex-shrink:0;
}
.tb-item::before{content:"";width:.6rem;height:.6rem;background:var(--c,var(--red));border:2px solid var(--ink);flex-shrink:0}
.tb-item:hover,.tb-item.front{background:var(--c,var(--blue));color:#0a0a0a;box-shadow:3px 3px 0 var(--ink)}
.tb-item.front::before{background:#0a0a0a}

/* ── dock (floats above the taskbar) ── */
.dock{
  position:absolute;bottom:calc(var(--bar) + 1rem);left:50%;transform:translateX(-50%);z-index:600;
  display:flex;align-items:flex-end;gap:.35rem;padding:.5rem .6rem;
  background:var(--card);border:var(--bw) solid var(--ink);box-shadow:var(--pop);
  max-width:calc(100vw - 2rem);
}
.dk{
  position:relative;display:grid;place-items:center;
  width:46px;height:46px;padding:5px;flex-shrink:0;
  border:2px solid var(--ink);background:color-mix(in srgb,var(--c) 26%,#fff);
  transform-origin:bottom center;
  transition:transform .16s cubic-bezier(.2,.9,.25,1.4),box-shadow .16s ease;
}
.dk svg{width:100%;height:100%;stroke:#0a0a0a;stroke-width:2.6}
.dk svg .f{fill:var(--c)}
.dk svg .sh{fill:rgba(0,0,0,.22)}
.dk-sep{width:2px;align-self:stretch;background:var(--ink);margin:0 .25rem;flex-shrink:0}

/* magnification — the hovered item grows, its neighbours grow less */
.dock:hover .dk:hover{transform:translateY(-14px) scale(1.5);box-shadow:4px 4px 0 var(--ink);z-index:2}
.dock:hover .dk:hover + .dk,
.dock:hover .dk:has(+ .dk:hover){transform:translateY(-6px) scale(1.22)}
.dock:hover .dk:hover + .dk + .dk,
.dock:hover .dk:has(+ .dk + .dk:hover){transform:translateY(-2px) scale(1.08)}

/* tooltip */
.dk em{
  position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%) scale(.68);
  transform-origin:bottom center;
  padding:.2rem .45rem;background:var(--ink);color:var(--paper);
  border:2px solid var(--ink);font-family:var(--mono);font-size:.62rem;font-style:normal;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s ease;
}
.dk:hover em{opacity:1}

/* running indicator */
.dk::after{
  content:"";position:absolute;bottom:-7px;left:50%;transform:translateX(-50%) scale(0);
  width:6px;height:6px;background:var(--ink);transition:transform .18s ease;
}
.dk.running::after{transform:translateX(-50%) scale(1)}
.dk.front{background:var(--c);box-shadow:inset 0 0 0 2px var(--card)}

/* ── mobile: windows become full-bleed sheets ── */
@media (max-width:760px){
  /* the frame drops away — the OS fills the phone */
  body{padding:0;background:var(--paper);background-image:none;overflow:hidden}
  .os{width:100%;height:100%;border:0;box-shadow:none}
  .desktop{overflow-y:auto;padding:1rem 1rem 118px}
  .mb-item{display:none}
  .icons{grid-template-columns:repeat(3,1fr);width:100%}
  .icon{width:100%}
  .game{position:static;width:100%;margin-top:1.2rem}
  .rail{position:static;align-items:stretch;gap:1rem;margin-top:1.2rem}
  .note{width:100%;transform:none}
  .socials{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start}
  .soc em{display:none}
  .win{
    position:fixed;left:0!important;top:var(--bar)!important;
    width:100%!important;max-width:100%;
    height:calc(100dvh - var(--bar) - 38px);max-height:none;
    border-left:0;border-right:0;box-shadow:none;z-index:700;
  }
  .bar{cursor:default}
  /* mobile browsers rarely render inline PDFs — show the preview instead */
  .pdf object{display:none}
  .pdf-fallback{display:grid;width:100%}
  .taskbar{height:38px}
  .tb-stat{display:none}
  .dock{gap:.25rem;padding:.4rem;bottom:calc(38px + .6rem);overflow-x:auto;justify-content:flex-start}
  .dk{width:40px;height:40px}
  .dock:hover .dk:hover{transform:none;box-shadow:none}
  .dock:hover .dk:hover + .dk,.dock:hover .dk:has(+ .dk:hover),
  .dock:hover .dk:hover + .dk + .dk,.dock:hover .dk:has(+ .dk + .dk:hover){transform:none}
  .dk em{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}