/*
  usr/usosky — terminal look.
  Colours, font and sizes match the original single-file version. Sizes still
  scale with the window (vmin) as before, with a floor so phones stay readable.
*/

@font-face {
  font-family: "Inconsolata";
  src: url("../fonts/inconsolata-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inconsolata";
  src: url("../fonts/inconsolata-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #161719;
  --fg: #c5c8c6;
  --dim: #7a7e82;
  --user: #87c38a;
  --dir: #85befd;
  --bright: #ffffff;
  --yellow: #f0c674;
  --aqua: #8abeb7;
  --purple: #b294bb;
  --orange: #de935f;
  --pink: #e98fa6;

  --fs: max(13px, 3vmin);              /* phones: 3vmin as before, never below 13px */
  --lh: 1.034;                         /* line height, as before (3.1vmin / 3vmin) */
  --row: calc(var(--fs) * var(--lh));  /* height of one terminal line */
  --pad: 12px;
  --bar: calc(var(--row) + 6px);       /* height of the tmux status bar */

  --banner-cols: 66;                   /* widest line of the banner */
  --face-cols: 39;                     /* widest line of the face */
}

@media (min-width: 768px) {
  :root {
    --fs: max(12px, 2.5vmin);
    --lh: 1.04;                        /* 2.6vmin / 2.5vmin, as before */
    --pad: max(8px, 0.6vmin);
  }
}

@media (pointer: coarse) {
  :root { --bar: calc(var(--row) + 22px); }   /* bigger tap targets on touch screens */
}

html {
  background: var(--bg);
  color: var(--fg);
  font-family: "Inconsolata", monospace;
  font-size: var(--fs);
  line-height: var(--lh);
  font-weight: 400;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: var(--pad);
  padding-bottom: calc(var(--bar) + var(--row) + env(safe-area-inset-bottom, 0px));
}

p, h1, h2, ul, ol, li, pre {
  margin: 0;
  padding: 0;
  font: inherit;
}
ul, ol { list-style: none; }
b, strong { font-weight: 700; }
cite { font-style: normal; }
pre { white-space: pre; }

a { color: inherit; }
a:hover { color: var(--bright); }
a:focus-visible { outline: 1px solid var(--dir); outline-offset: 2px; }

.user { color: var(--user); }
.dir { color: var(--dir); }
.ps1 { white-space: nowrap; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* one blank line after each command's output, as before */
.out { margin-bottom: var(--row); }

.banner {
  color: var(--bright);
  /* as big as the text, but never wider than the screen */
  font-size: min(1em, calc((100vw - 2 * var(--pad) - 12px) / (var(--banner-cols) * 0.5)));
  line-height: var(--lh);
  overflow-x: auto;
}

/* face and summary side by side; the summary starts on the face's 3rd line, as before */
.about {
  --face-fs: min(var(--fs), calc((100vw - 2 * var(--pad) - 12px - 13 * var(--fs)) / (var(--face-cols) * 0.5)));
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: start;
  column-gap: calc(var(--face-fs) * 2.5);   /* 5 columns, as before */
  margin-top: var(--row);                    /* blank line above the face, as before */
}
.face {
  font-size: var(--face-fs);
  line-height: var(--lh);
}
.card { padding-top: calc(2 * var(--face-fs) * var(--lh)); }
.card p,
.card h2,
.card li {
  display: block;
  height: var(--row);
  white-space: nowrap;
}

/* very narrow phones: slightly smaller text, face above the summary */
@media (max-width: 359px) {
  :root { --fs: 12px; }
  .about {
    --face-fs: min(var(--fs), calc((100vw - 2 * var(--pad) - 12px) / (var(--face-cols) * 0.5)));
    grid-template-columns: auto;
    row-gap: var(--row);
  }
  .card { padding-top: 0; }
}

/* blinking cursor while a command is typed, and at the final prompt */
.cmd.typing::after,
.cursor::after {
  content: "|";
  color: var(--bright);
  animation: blink 500ms linear infinite alternate;
}
@keyframes blink {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- activity log: date, tag, text; wrapped lines stay under the text ---------- */
.log-line { padding-left: 19ch; text-indent: -19ch; }
.log-date,
.log-tag { display: inline-block; text-indent: 0; }
.log-date { width: 10ch; }   /* + one space = 11 columns */
.log-tag { width: 7ch; }     /* + one space = 8 columns */
.tag-pub { color: var(--user); }
.tag-conf,
.tag-talk { color: var(--dir); }
.tag-job { color: var(--yellow); }
.tag-edu { color: var(--aqua); }
.tag-award { color: var(--purple); }
.tag-post { color: var(--orange); }
.tag-news { color: var(--bright); }
.tag-code { color: var(--pink); }

/* ---------- publications ---------- */
.pub + .pub { margin-top: var(--row); }
.pub p { padding-left: 4ch; }
.pub .pub-head { padding-left: 0; }
.pub-n { color: var(--user); }
.pub-year { color: var(--dir); }
.pub-title { color: var(--bright); }
.me { color: var(--user); font-weight: 700; }
.file-head { margin-bottom: var(--row); }

/* ---------- shell output ---------- */
.keep { white-space: pre-wrap; }
.out > * + .file-head { margin-top: var(--row); }
.comment { color: var(--dim); }
mark { background: var(--dir); color: var(--bg); }
.bib { white-space: pre-wrap; overflow-wrap: anywhere; }
.help {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 3ch;
}
.help .k { color: var(--bright); }
.help .wide { grid-column: 1 / -1; }
.help .help-head { color: var(--user); font-weight: 700; }
.ls-dir { color: var(--dir); font-weight: 700; }

/* ---------- the live prompt ---------- */
.js .source { display: none; }
.screen .line { overflow-wrap: anywhere; }
.input-line {
  display: flex;
  align-items: baseline;
  scroll-margin-bottom: calc(var(--bar) + 2 * var(--row));
}
.input-line .ps1 { flex: none; }
.input-wrap {
  flex: 1;
  min-width: 0;
  margin-left: 0.5em;
}
.cmd-input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font: inherit;
  line-height: inherit;
  caret-color: var(--bright);
}
.cmd-input::placeholder { color: var(--dim); opacity: 1; }

/* touch screens with small text: draw the input at 16px and scale it down, so iOS doesn't zoom in on focus */
.zoomfix .input-line { align-items: flex-start; }
.zoomfix .input-wrap { height: var(--row); }
.zoomfix .cmd-input {
  font-size: 16px;
  width: calc(100% / var(--input-scale));
  height: calc(var(--row) / var(--input-scale));
  line-height: calc(var(--row) / var(--input-scale));
  transform: scale(var(--input-scale));
  transform-origin: 0 0;
}

/* ---------- tmux status bar = the tabs ---------- */
.tmux {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: stretch;
  gap: 0.5ch;
  height: calc(var(--bar) + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  padding: 0 var(--pad) env(safe-area-inset-bottom, 0px);
  background: var(--bar-bg, var(--user));
  color: var(--bg);
  white-space: nowrap;
  overflow: hidden;
}
.tmux > * {
  display: flex;
  align-items: center;
}
.tmux a {
  padding: 0 0.5ch;
  color: inherit;
  text-decoration: none;
}
.tmux a:hover { text-decoration: underline; }
.tmux a:focus-visible { outline: 1px solid var(--bg); outline-offset: -3px; }
.tmux a[aria-current="page"] { font-weight: 700; }
.tmux a[aria-current="page"]::after { content: "*"; }
.tmux a.last::after { content: "-"; }
.tmux .session { padding-right: 0.5ch; }
.tmux .session.armed { background: var(--bg); color: var(--user); padding-left: 0.5ch; }
.tmux .status-right { margin-left: auto; gap: 1.5ch; }
/* narrower screens drop the less important parts first */
@media (max-width: 1199px) { .tmux .host { display: none; } }
@media (max-width: 899px) { .tmux .clock-date { display: none; } }
@media (max-width: 699px) { .tmux .co2 { display: none; } }
@media (max-width: 479px) { .tmux .wx-text { display: none; } }
@media (max-width: 399px) { .tmux .session { display: none; } }

/* ---------- colour themes (command: theme, or the button top right) ---------- */
html[data-theme="green"] {
  --bg: #061006; --fg: #3fdf74; --dim: #23864a; --user: #8effb1; --dir: #3fdf74; --bright: #d4ffe0;
  --yellow: #8effb1; --aqua: #3fdf74; --purple: #8effb1; --orange: #8effb1; --pink: #8effb1;
}
html[data-theme="amber"] {
  --bg: #110a00; --fg: #ffb000; --dim: #9a6a00; --user: #ffd166; --dir: #ffb000; --bright: #ffe6ad;
  --yellow: #ffd166; --aqua: #ffb000; --purple: #ffd166; --orange: #ffd166; --pink: #ffd166;
}
html[data-theme="ibm"] {
  --bg: #000000; --fg: #aaaaaa; --dim: #777777; --user: #55ff55; --dir: #6f8fff; --bright: #ffffff;
  --yellow: #ffff55; --aqua: #55ffff; --purple: #ff55ff; --orange: #ffaa00; --pink: #ff5555; --bar-bg: #00aaaa;
}

/* ---------- theme button, top right (js/extras.js adds it) ---------- */
:root { --tb: max(28px, 1.5rem); }
.theme-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 20;
  display: grid;
  place-items: center;
  width: var(--tb);
  height: var(--tb);
  padding: 0;
  border: 1px solid var(--dim);
  border-radius: 0;
  background: var(--bg);
  color: var(--dim);
  cursor: pointer;
}
.theme-btn svg { width: 62%; height: 62%; }
.theme-btn:hover,
.theme-btn[aria-expanded="true"] { color: var(--bright); border-color: var(--bright); }
.theme-btn:focus-visible { outline: 1px solid var(--dir); outline-offset: 2px; }
.theme-menu {
  position: absolute;
  top: calc(var(--tb) + 8px);
  right: 4px;
  z-index: 20;
  min-width: 13ch;
  padding: 0.5ch 0;
  border: 1px solid var(--dim);
  background: var(--bg);
}
.theme-menu[hidden] { display: none; }
.theme-menu-head,
.theme-menu-rule { padding: 0 1ch; color: var(--dim); }
.theme-opt {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0 1ch;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  line-height: var(--lh);
  text-align: left;
  white-space: pre;
  cursor: pointer;
}
.theme-opt[aria-checked="true"] { color: var(--bright); }
.theme-opt:hover,
.theme-opt:focus-visible { background: var(--user); color: var(--bg); outline: 0; }
@media (pointer: coarse) {
  .theme-opt { padding-block: 7px; }
}

/* ---------- CRT mode (command: crt) ---------- */
.crt body { text-shadow: 0 0 1px currentColor, 0 0 7px color-mix(in srgb, currentColor 35%, transparent); }
.crt .tmux { text-shadow: none; }
.crt body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgb(0 0 0 / 0.22) 2px 3px),
    radial-gradient(ellipse at center, transparent 60%, rgb(0 0 0 / 0.45) 100%);
}

/* links glitch for a moment on hover */
@keyframes glitch {
  0% { text-shadow: 2px 0 #ff5f7e, -2px 0 #4fd2ff; }
  33% { text-shadow: -2px 0 #ff5f7e, 2px 0 #4fd2ff; }
  66% { text-shadow: 1px 1px #ff5f7e, -1px -1px #4fd2ff; }
  100% { text-shadow: none; }
}
.screen a:hover { animation: glitch 240ms steps(1, end) 1; }

/* ---------- neofetch and weather: picture left, text right ---------- */
.neo {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 3ch;
  align-items: start;
}
/* the portrait: a 64x64 stencil of the favicon photo, used as a mask and painted in the theme's colours */
.neo-pic {
  --portrait: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' shape-rendering='crispEdges'%3E%3Cpath d='\
M14 2h4v1h-4zM20 2h1v1h-1zM22 2h1v1h-1zM36 2h1v1h-1zM14 3h10v1h-10zM25 3h1v1h-1zM36 3h2v1h-2z\
M40 3h2v1h-2zM14 4h14v1h-14zM34 4h5v1h-5zM40 4h3v1h-3zM15 5h14v1h-14zM34 5h10v1h-10z\
M15 6h16v1h-16zM32 6h13v1h-13zM49 6h1v1h-1zM15 7h30v1h-30zM49 7h4v1h-4zM16 8h39v1h-39z\
M16 9h40v1h-40zM57 9h2v1h-2zM16 10h44v1h-44zM17 11h44v2h-44zM18 13h44v2h-44zM18 15h42v1h-42z\
M22 16h4v1h-4zM27 16h2v1h-2zM33 16h25v1h-25zM39 17h14v1h-14zM2 18h2v1h-2zM22 18h1v1h-1z\
M24 18h2v1h-2zM40 18h11v1h-11zM21 19h3v1h-3zM40 19h10v2h-10zM3 21h1v1h-1zM6 21h1v1h-1z\
M33 21h2v1h-2zM41 21h8v2h-8zM58 21h1v1h-1zM2 22h3v3h-3zM27 22h1v1h-1zM33 22h4v1h-4z\
M38 22h2v1h-2zM51 22h2v1h-2zM17 23h3v1h-3zM27 23h2v1h-2zM32 23h4v1h-4zM38 23h11v1h-11z\
M52 23h2v1h-2zM57 23h1v1h-1zM17 24h7v1h-7zM27 24h22v1h-22zM53 24h2v1h-2zM2 25h5v1h-5z\
M16 25h11v1h-11zM30 25h1v1h-1zM34 25h16v1h-16zM2 26h7v3h-7zM16 26h34v4h-34zM55 26h2v1h-2z\
M52 27h10v4h-10zM3 29h6v1h-6zM3 30h4v1h-4zM17 30h34v3h-34zM5 31h3v1h-3zM52 31h9v2h-9z\
M4 32h1v1h-1zM6 32h3v1h-3zM4 33h6v1h-6zM17 33h35v2h-35zM53 33h8v3h-8zM5 34h5v1h-5zM6 35h4v1h-4z\
M17 35h22v1h-22zM41 35h11v1h-11zM7 36h1v1h-1zM18 36h20v2h-20zM40 36h13v1h-13zM54 36h7v1h-7z\
M39 37h14v2h-14zM55 37h6v1h-6zM19 38h19v2h-19zM55 38h5v2h-5zM41 39h2v1h-2zM45 39h7v1h-7z\
M20 40h19v1h-19zM42 40h3v1h-3zM47 40h4v1h-4zM54 40h5v1h-5zM20 41h26v1h-26zM54 41h3v1h-3z\
M58 41h1v1h-1zM21 42h26v1h-26zM48 42h2v1h-2zM53 42h4v1h-4zM16 43h1v1h-1zM21 43h35v1h-35z\
M16 44h2v1h-2zM21 44h33v1h-33zM16 45h3v1h-3zM22 45h31v1h-31zM57 45h1v2h-1zM16 46h4v1h-4z\
M23 46h10v1h-10zM39 46h8v1h-8zM17 47h3v2h-3zM23 47h12v1h-12zM54 47h3v1h-3zM23 48h15v1h-15z\
M52 48h5v1h-5zM18 49h2v1h-2zM24 49h16v1h-16zM51 49h5v1h-5zM19 50h1v1h-1zM25 50h16v1h-16z\
M49 50h6v1h-6zM56 50h1v1h-1zM26 51h17v1h-17zM48 51h9v1h-9zM28 52h16v1h-16zM45 52h11v1h-11z\
M29 53h27v1h-27zM30 54h25v1h-25zM30 55h24v1h-24zM31 56h22v1h-22zM32 57h20v1h-20zM33 58h18v1h-18z\
M35 59h15v1h-15zM37 60h12v1h-12zM39 61h8v1h-8z'/%3E%3C/svg%3E");
  width: 13.5em;   /* as tall as the 13 lines of text beside it */
  height: 13.5em;
  background: linear-gradient(var(--user), var(--dir));
  -webkit-mask: var(--portrait) center / contain no-repeat;
  mask: var(--portrait) center / contain no-repeat;
}
.neo-key { color: var(--user); }
.swatch { display: inline-block; width: 3ch; }
.wx-icon { color: var(--fg); }
.wx-sun { color: var(--yellow); }
.wx-rain,
.wx-storm { color: var(--dir); }
@media (max-width: 699px) {
  .neo:not(.wx) { grid-template-columns: auto; row-gap: var(--row); }
  .neo-pic { width: 12em; height: 12em; }
}

.boot-ok { color: var(--user); }

/* ---------- co2 bars ---------- */
.co2-old { color: var(--dim); }
.co2-past { color: var(--dir); }
.co2-now { color: var(--user); }

/* ---------- coffee and tea ---------- */
.art { overflow-x: auto; }
.teapot { color: var(--aqua); }
.tea .cup { color: var(--fg); }
.tea .steam { color: var(--dim); }

/* ---------- matrix rain ---------- */
.matrix {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: block;
  width: 100%;
  height: 100%;
}

/* ---------- plain version (no JavaScript): the source shown as one session ---------- */
.source .log li { padding-left: 19ch; text-indent: -19ch; }
.source .log li::before {
  content: attr(data-date) " [" attr(data-tag) "]";
  display: inline-block;
  width: 19ch;
  text-indent: 0;
  color: var(--dim);
}
.source .pubs li { padding-left: 6ch; text-indent: -6ch; }
.source .pubs li + li { margin-top: var(--row); }
.source .pubs li::before {
  content: "[" attr(data-n) "]";
  display: inline-block;
  width: 6ch;
  text-indent: 0;
  color: var(--user);
}
.source cite { color: var(--bright); }

@media (prefers-reduced-motion: reduce) {
  .cmd.typing::after,
  .cursor::after,
  .screen a:hover { animation: none; }
}

/* scrollbars, as before (Chrome, Edge, Safari) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { border-radius: 10px; box-shadow: inset 0 0 1px white; }
::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: 0 0 0 1px white; }

/* Firefox equivalent */
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--fg) var(--bg); scrollbar-width: thin; }
}