/* shauwki.nl — terminal visitekaartje (fit-to-screen, no scroll) */
:root{
  --bg:#05070a;
  --panel:#0c1016;
  --panel-bar:#10151c;
  --border:#1c2a22;
  --green:#4ade80;
  --green-dim:#22c55e;
  --amber:#e5c07b;
  --ink:#d7dee0;
  --muted:#6b7d74;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono",monospace;
}

@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("/fonts/JetBrainsMono-Medium.woff2") format("woff2");}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:700;font-display:swap;
  src:url("/fonts/JetBrainsMono-Bold.woff2") format("woff2");}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; height:100%; }
html,body{overflow:hidden}
/* interactieve elementen: geen 300ms tap-delay, geen double-tap-zoom (iOS+Android) */
.prompt,.file,.tab,.swipe,.btn,.pitem,.dot[data-modal]{touch-action:manipulation}

body{
  font-family:var(--mono);
  background:var(--bg);
  color:var(--ink);
  min-height:100svh;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  background-image:radial-gradient(130% 90% at 50% 0%, #0a0f16 0%, #05070a 60%);
}

/* ---------- layout: mobile = snap-scroll panes; desktop = side-by-side ---------- */
.shell{
  height:100dvh;
  padding:0
    calc(env(safe-area-inset-right) + 8px)
    0
    calc(env(safe-area-inset-left) + 8px);
  /* mobile: vertical scroll-snap between the panes */
  overflow-y:auto;overflow-x:hidden;
  scroll-snap-type:y mandatory;overscroll-behavior:y contain;
  -webkit-overflow-scrolling:touch;
}
/* mobile: .row is transparent zodat elke pane los snapt (4 schermen onder elkaar) */
.row{display:contents}
.pane{
  position:relative;
  height:100%;min-height:0;
  display:flex;flex-direction:column;
  scroll-snap-align:start;scroll-snap-stop:always;
}

.term{
  flex:1;min-height:0;display:flex;flex-direction:column;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 24px 60px -30px rgba(0,0,0,.9);
  max-width:680px;margin-inline:auto;width:100%;
}

/* swipe cue — only shown on the first pane (touch) */
.swipe{
  position:absolute;left:50%;bottom:6px;transform:translateX(-50%);
  display:none;align-items:center;gap:6px;
  background:transparent;border:0;cursor:pointer;
  color:var(--muted);font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;
  opacity:.7;padding:6px 10px;
}
.swipe-ar{display:inline-block;animation:bob 1.6s ease-in-out infinite}
.swipe.up .swipe-ar{transform:rotate(180deg)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

.bar{
  flex:none;display:flex;align-items:center;gap:8px;
  background:var(--panel-bar);border-bottom:1px solid var(--border);
  padding:11px 14px;
}
.dot{width:11px;height:11px;border-radius:50%;flex:none}
.dot.r{background:#ff5f56}.dot.y{background:#ffbd2e}.dot.g{background:#27c93f}
.dot.r[data-modal]{cursor:pointer}
.path{margin-left:7px;color:var(--muted);font-size:.74rem;letter-spacing:.02em}

.screen{
  flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  display:flex;flex-direction:column;
  gap:clamp(8px, 1.9vh, 18px);
  padding:clamp(16px, 3vh, 26px) clamp(16px, 4.5vw, 28px) clamp(8px, 1.4vh, 14px);
}
/* prompt is pinned between the scrollable screen and the statusbar */
.term > .prompt{flex:none;padding:6px clamp(16px, 4.5vw, 28px) 12px calc(clamp(16px, 4.5vw, 28px) + 4px)}

/* prompt */
.ln{font-size:clamp(.76rem, 3.1vw, .88rem);word-break:break-word}
.ps{font-weight:500;white-space:nowrap}
.ps .u{color:var(--green)}
.ps .c{color:var(--muted)}

.name{
  font-size:clamp(1.5rem, 6.6vw, 2.3rem);
  font-weight:700;letter-spacing:-.01em;line-height:1.08;
  color:var(--green);margin-top:clamp(2px,.6vh,6px);
  text-shadow:0 0 18px rgba(74,222,128,.24);
}

/* profile paragraph — justified like a newspaper column */
.out{
  color:var(--ink);opacity:.9;
  font-size:clamp(.76rem, 3.2vw, .9rem);
  margin-top:6px;max-width:64ch;
  text-align:justify;text-justify:inter-word;hyphens:auto;
}
.nb{white-space:nowrap;color:var(--amber)}

/* ls skills/ — echte ls-output: row-major (breedte eerst, dan volgende rij) */
.lsout{
  list-style:none;margin-top:6px;
  display:flex;flex-wrap:wrap;
  column-gap:clamp(14px, 4vw, 34px);
  row-gap:3px;
}
.lsout li{
  font-size:clamp(.74rem, 3vw, .86rem);
  white-space:nowrap;
}
/* Linux ls-dircolors stijl: categorie = kleur */
.lsout li.lang{color:#56d4e4}      /* programmeertalen — cyan */
.lsout li.dom{color:#8b9bf4}       /* domeinen/vakgebieden — indigo */

/* ls -lah contact/ — uitgelijnde rijen, kleur per dienst */
.files{margin-top:6px;display:flex;flex-direction:column;gap:4px}
.file{
  display:grid;grid-template-columns:auto auto 1fr;align-items:center;
  gap:clamp(8px,2.6vw,18px);
  min-height:38px;padding:6px 10px;
  border:1px solid transparent;border-radius:8px;
  text-decoration:none;color:var(--ink);
  background:transparent;font-family:var(--mono);
  font-size:clamp(.72rem, 3vw, .84rem);text-align:left;width:100%;
  cursor:pointer;
  transition:border-color .14s ease, background .14s ease;
}
.file:hover,.file:focus-visible{
  border-color:var(--border);background:rgba(255,255,255,.035);outline:none;
}
.file:focus-visible{box-shadow:0 0 0 2px rgba(74,222,128,.45)}
.perm{color:var(--muted);letter-spacing:.03em;white-space:nowrap}
.fn{font-weight:700}
.fv{opacity:.95;text-align:right;word-break:break-word}
.ext{margin-left:1px;opacity:.85}
/* dienst-kleuren (fn + fv samen) */
.c-mail .fn,.c-mail .fv{color:#e5c07b}   /* email — amber */
.c-li .fn,.c-li .fv{color:#4aa3ff}       /* linkedin — blauw */
.c-gh .fn,.c-gh .fv{color:#e6edf3}       /* github — wit */

/* ---------- interactive prompt + command palette ---------- */
.prompt{margin-top:auto;position:relative;cursor:pointer;outline:none}
.prompt .ln{word-break:break-word}
.typed{color:var(--ink);white-space:pre}
.cursor{
  display:inline-block;width:9px;height:1.05em;vertical-align:-2px;
  background:var(--green);animation:blink 1.1s steps(1) infinite;
  box-shadow:0 0 10px rgba(74,222,128,.6);
}
.prompt.open .cursor{animation:none;opacity:.45}
@keyframes blink{50%{opacity:0}}

/* faint inline hint right after the cursor — the "menu" cue */
.hint{
  color:var(--muted);opacity:.9;font-size:inherit;letter-spacing:.01em;
  margin-left:7px;transition:opacity .15s ease;user-select:none;
}
.prompt.open .hint,.prompt.typing .hint{opacity:0}

/* invisible desktop-only input (created in JS, 1px so it can never show a box) */
.pinput{
  position:absolute;left:0;bottom:0;width:1px;height:1px;
  opacity:0;border:0;padding:0;margin:0;background:transparent;
  color:transparent;caret-color:transparent;font:inherit;pointer-events:none;
}

/* the popup — suggestions that sit ABOVE the cursor row */
.palette{
  position:absolute;left:0;right:0;bottom:calc(100% + 8px);z-index:20;
  width:auto;
  background:var(--panel-bar);
  border:1px solid var(--border);border-radius:10px;
  box-shadow:0 -10px 40px -16px rgba(0,0,0,.85), 0 0 0 1px rgba(74,222,128,.06);
  overflow:hidden;
  transform-origin:bottom left;animation:palpop .15s ease-out;
}
.palette[hidden]{display:none}
@keyframes palpop{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.plist{list-style:none;max-height:min(52vh,320px);overflow-y:auto;overscroll-behavior:contain}
.pitem{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:12px;padding:11px 14px;cursor:pointer;
  border-left:2px solid transparent;
  transition:background .1s ease,border-color .1s ease;
}
.pitem .cmd{color:var(--green);font-weight:700;font-size:clamp(.78rem,3vw,.88rem);white-space:nowrap}
.pitem .desc{color:var(--muted);font-size:clamp(.68rem,2.6vw,.78rem);text-align:right;opacity:.85}
.pitem .ptag{color:#ff5f56;font-size:clamp(.6rem,2.3vw,.68rem);font-weight:700;opacity:.95}
.pitem .pext{color:var(--muted);font-size:.74rem;opacity:.7;width:12px;text-align:center}
.pitem[aria-selected="true"],.pitem:hover{
  background:rgba(74,222,128,.08);border-left-color:var(--green);
}

/* ---------- CV terminal: tabs ---------- */
.tabs{display:flex;align-items:flex-end;gap:4px;margin-left:10px;overflow:hidden}
.tab{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.01em;
  color:var(--muted);background:transparent;cursor:pointer;
  border:1px solid transparent;border-bottom:0;
  border-radius:7px 7px 0 0;padding:6px 12px;white-space:nowrap;
  transition:color .12s ease,background .12s ease;
}
.tab:hover{color:var(--ink)}
.tab.is-on{
  color:var(--green);background:var(--panel);
  border-color:var(--border);
}
.tab:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(74,222,128,.4)}

.tabpane[hidden]{display:none}
.cvscreen{gap:clamp(7px,1.6vh,14px)}

/* ---------- CV content: YAML syntax highlight (groeit in hoogte, nooit breedte) ---------- */
.yaml{
  font-family:var(--mono);
  font-size:clamp(.72rem,2.85vw,.83rem);
  line-height:1.55;
  white-space:normal;word-break:break-word;  /* block-per-regel; wrap via hangende inspring */
  overflow-x:hidden;
  margin-top:4px;color:var(--ink);
}
.yk{color:#56d4e4}                 /* keys — cyan */
.yv{color:#9ece6a}                 /* values — green */
.ynum{color:#e5c07b}               /* numbers/dates — amber */
.yd{color:var(--muted);opacity:.55}/* list dashes — subtiel */
.yc{color:var(--muted);opacity:.6;font-style:italic} /* comments */
.ye{color:var(--green);font-weight:700}   /* entry-naam (top-level key) — fel groen, bold */
.yp{color:var(--muted)}            /* punctuatie [ ] , : — gedimd */
.yaml .blank{display:block;height:.55em}  /* ademruimte tussen entries */
.yaml .yln{display:block}                             /* top-level regel (col 0) */
.yaml .yrow{display:block;padding-left:2ch}           /* veld-regel: wrap lijnt uit onder de key */
.yaml .yli{display:block;padding-left:6ch;text-indent:-2ch}  /* lijst-item: dash hangt, wrap lijnt uit met content */

/* ---------- statusbar (powerline vibe, naar Husseins terminal) ---------- */
.statusbar{
  flex:none;display:flex;align-items:stretch;
  font-size:.64rem;letter-spacing:.03em;
  border-top:1px solid var(--border);background:#070b10;
  overflow:hidden;
}
.seg{display:flex;align-items:center;gap:5px;padding:5px 12px;white-space:nowrap}
.seg .ic{opacity:.9}
.seg-date{background:#5e1526;color:#ffd9df;font-weight:600}  /* maroon, links */
.seg-sp{flex:1;min-width:8px;background:#5e1526}            /* vul de tussenruimte maroon */
/* net widget: down (groen) · sparkline · up (amber) op maroon, rechts */
.seg-net{background:#5e1526;gap:8px;padding:4px 12px}
.seg-net .dn,.seg-net .up{font-weight:600;font-variant-numeric:tabular-nums}
.seg-net .num{display:inline-block;min-width:2.3em;text-align:right}
.seg-net .dn{color:#6fe39a}
.seg-net .up{color:#ffce7a}
.seg-net .ar{opacity:.85;margin-left:1px}
.spark{width:52px;height:14px;display:block}
.spark polyline{fill:none;stroke-width:1.2;vector-effect:non-scaling-stroke}
.spark .sdn{stroke:#6fe39a;opacity:.95}
.spark .sup{stroke:#ff8a3d;opacity:.9}

/* ---------- mail compose modal ---------- */
.overlay{
  position:fixed;inset:0;z-index:50;
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  background:rgba(2,4,7,.72);
  -webkit-backdrop-filter:blur(2px);
  backdrop-filter:blur(2px);
}
.overlay[hidden]{display:none}
.modal{
  flex:0 1 auto;min-height:0;max-width:520px;width:100%;
  height:auto;max-height:min(88dvh,640px);   /* compact venster, NIET full-height (.term zet height:100%) */
  animation:pop .16s ease-out;
}
@keyframes pop{from{transform:translateY(8px) scale(.98);opacity:0}to{transform:none;opacity:1}}
.compose{padding:clamp(16px,3vh,24px) clamp(16px,4.5vw,26px);display:flex;flex-direction:column;gap:11px;overflow-y:auto;min-height:0}
.compose .ln{margin-bottom:3px}
.field{display:grid;grid-template-columns:62px 1fr;align-items:center;gap:10px}
.field.col{grid-template-columns:62px 1fr;align-items:start}
.lbl{color:var(--green-dim);font-size:.8rem;font-weight:700;padding-top:9px}
.field:not(.col) .lbl{padding-top:0}
input,textarea{
  font-family:var(--mono);font-size:16px;color:var(--ink);  /* 16px: iOS zoomt niet in op focus */
  background:#070b11;border:1px solid var(--border);border-radius:7px;
  padding:9px 11px;width:100%;resize:vertical;
}
input:focus,textarea:focus{outline:none;border-color:var(--green-dim);box-shadow:0 0 0 2px rgba(74,222,128,.25)}
input::placeholder,textarea::placeholder{color:#44524b}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.actions{display:flex;align-items:center;gap:12px;margin-top:3px;flex-wrap:wrap}
.btn{
  font-family:var(--mono);font-size:.84rem;font-weight:700;
  background:transparent;border:1px solid var(--green-dim);
  color:var(--green);border-radius:7px;padding:9px 14px;cursor:pointer;
  transition:background .14s ease;
}
.btn.send:hover,.btn.send:focus-visible{background:rgba(34,197,94,.14);outline:none}
.btn.cancel{border-color:var(--border);color:var(--muted)}
.btn.cancel:hover{background:rgba(255,255,255,.04)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.status{font-size:.78rem;color:var(--muted)}
.status.ok{color:var(--green)}
.status.err{color:#ff6b6b}

@media (prefers-reduced-motion:reduce){
  .cursor{animation:none}.file,.btn{transition:none}.modal{animation:none}
  .swipe-ar{animation:none}
}

/* ---------- mobile: panes fill the viewport, swipe cue visible ---------- */
@media (max-width:859px), (max-height:559px){
  .pane{
    height:100dvh;box-sizing:border-box;
    padding:calc(env(safe-area-inset-top) + 10px) 0 calc(env(safe-area-inset-bottom) + 10px);
  }
  #pane-1 .swipe{display:flex}
}

/* ---------- desktop: rijen van 2 terminals; verticale snap tussen rijen ---------- */
@media (min-width:860px) and (min-height:560px){
  .shell{
    display:block;padding:0;
    overflow-y:auto;overflow-x:hidden;
    scroll-snap-type:y mandatory;overscroll-behavior:y contain;
  }
  .row{
    display:flex;gap:clamp(24px,4vw,56px);align-items:stretch;justify-content:center;
    height:100dvh;
    padding:clamp(28px,4vh,44px) clamp(28px,4vw,52px);
    scroll-snap-align:start;scroll-snap-stop:always;
  }
  .pane{
    height:auto;flex:1 1 0;max-width:720px;min-width:0;
    scroll-snap-align:none;justify-content:center;
    margin-top:0;
  }
  .pane + .pane{margin-top:0}
  .term{
    flex:1 1 auto;height:100%;max-height:min(84dvh,820px);
    max-width:none;
  }
  .screen{flex:1 1 auto;overflow-y:auto;overscroll-behavior:auto}
  .prompt{margin-top:16px}
  .swipe{display:none !important}
}

@media (max-height:620px){
  .screen{gap:7px}
  .out{line-height:1.42}
}