/* Rajdhani (Indian Type Foundry) for the HUD, Share Tech Mono (Carrois) where columns must line up.
   Both SIL OFL 1.1, Latin subset, bundled so the wall works offline. */
@font-face { font-family: "Rajdhani"; font-weight: 300; src: url("fonts/Rajdhani-300.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Rajdhani"; font-weight: 400; src: url("fonts/Rajdhani-400.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Rajdhani"; font-weight: 500; src: url("fonts/Rajdhani-500.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Rajdhani"; font-weight: 600; src: url("fonts/Rajdhani-600.woff2") format("woff2"); font-display: block; }
@font-face { font-family: "Share Tech Mono"; src: url("fonts/ShareTechMono-Regular.woff2") format("woff2"); font-display: block; }

:root {
  --bg: #060708;
  --glass: rgba(16, 20, 25, 0.62);
  --edge: rgba(168, 216, 234, 0.10);
  --ice: #a8d8ea;
  --ice-dim: rgba(168, 216, 234, 0.55);
  --ice-faint: rgba(168, 216, 234, 0.14);
  --text: #e4ebf0;
  --muted: #76838f;
  --warn: #d6b47a;
  --err: #e0907f;
  --hud: "Rajdhani", system-ui, sans-serif;
  --mono: "Share Tech Mono", "JetBrainsMono Nerd Font", "JetBrains Mono", "Geist Mono", ui-monospace, monospace;
  /* 1080p is the reference canvas; everything scales with the viewport height. */
  --u: min(calc(100vh / 108), calc(100vw / 192));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--bg); color: var(--text); cursor: none; }
body { font-family: var(--hud); font-size: calc(var(--u) * 2.15); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }

/* Slow, blurred light behind the glass, plus a faint dot grid. */
.backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden;
  background-image: radial-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: calc(var(--u) * 2.8) calc(var(--u) * 2.8); }
.backdrop i { position: absolute; width: 70vw; height: 70vw; border-radius: 50%; filter: blur(120px); opacity: 0.11;
  background: radial-gradient(circle, var(--ice) 0%, transparent 62%); }
.backdrop i:first-child { left: -20vw; top: -35vw; }
.backdrop i:last-child { right: -25vw; bottom: -45vw; opacity: 0.07; }

#wall { height: 100vh; display: grid; gap: calc(var(--u) * 1.6); padding: calc(var(--u) * 2.4) calc(var(--u) * 2.8);
  grid-template-rows: calc(var(--u) * 4.2) 38fr 34fr 22fr; transition: transform 4s ease; }

.card { background: var(--glass); border: 1px solid var(--edge); border-radius: calc(var(--u) * 1.8);
  padding: calc(var(--u) * 2) calc(var(--u) * 2.4); min-height: 0; min-width: 0;
  display: flex; flex-direction: column; }
h2 { font-size: calc(var(--u) * 1.7); font-weight: 500; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; }
h2::before { content: "› "; color: var(--ice-dim); }
h2 small { font-size: inherit; color: var(--muted); opacity: 0.6; letter-spacing: 0.06em; text-transform: none; margin-left: 0.6em; }
h3 { font-size: calc(var(--u) * 1.6); font-weight: 500; color: var(--muted); letter-spacing: 0.14em; text-transform: uppercase; margin-top: auto; padding-top: calc(var(--u) * 1.4); }

/* Header: a shell prompt. */
.top { display: flex; align-items: center; justify-content: space-between; padding: 0 calc(var(--u) * 0.6); }
.prompt { font-size: calc(var(--u) * 2.3); color: var(--text); }
.prompt .who { color: var(--ice); }
.prompt .path { color: var(--muted); margin-right: 0.6em; }
.cursor { display: inline-block; width: 0.6em; height: 1.05em; margin-left: 0.35em; vertical-align: -0.15em; background: var(--ice); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.meta { display: flex; align-items: baseline; gap: calc(var(--u) * 3); color: var(--muted); font-size: calc(var(--u) * 2); }
.meta .clock { color: var(--text); font-size: calc(var(--u) * 3.2); letter-spacing: 0.04em; }
.link::before { content: "●"; margin-right: 0.5em; color: var(--warn); }
.link.on::before { color: var(--ice); }

/* GPU waves. */
.gpus { display: grid; grid-template-columns: repeat(var(--gpu-cols, 2), 1fr); gap: calc(var(--u) * 1.6); min-height: 0; }
.gpu header { display: flex; justify-content: space-between; align-items: flex-start; }
.gpu h2 .idx { color: var(--text); }
.gpu h2 .name { letter-spacing: 0.06em; text-transform: none; }
.gpu .pct { line-height: 0.85; color: var(--text); }
.gpu .pct .val { font-size: calc(var(--u) * 9.6); font-weight: 300; letter-spacing: -0.03em; }
.gpu .pct small { font-size: calc(var(--u) * 3.4); color: var(--muted); margin-left: 0.15em; }
.gpu .wave { flex: 1; min-height: 0; width: 100%; margin: calc(var(--u) * 1.2) 0; }
.gpu footer { display: flex; gap: calc(var(--u) * 3.6); color: var(--muted); font-size: calc(var(--u) * 2); align-items: center; }
.gpu footer .vram { display: flex; align-items: center; gap: 0.8em; color: var(--text); }
.gpu footer .vram i { display: block; width: calc(var(--u) * 12); height: 3px; background: var(--ice-faint); border-radius: 2px; overflow: hidden; }
.gpu footer .vram b { display: block; height: 100%; background: var(--ice-dim); transition: width 1s ease; }
.gpu footer .hot { color: var(--warn); }

/* Middle row. */
.mid { display: grid; grid-template-columns: 0.9fr 1.25fr 1fr; gap: calc(var(--u) * 1.6); min-height: 0; }
.lanes-big { display: flex; align-items: baseline; gap: 0.2em; margin-top: calc(var(--u) * 1); }
.lanes-big span { font-size: calc(var(--u) * 6.2); font-weight: 300; line-height: 1; }
.lanes-big small { font-size: calc(var(--u) * 3.4); color: var(--muted); }
.lanes-big em { font-style: normal; color: var(--muted); margin-left: 0.8em; font-size: calc(var(--u) * 1.9); }
.lanes { list-style: none; display: flex; flex-direction: column; gap: calc(var(--u) * 0.6); margin: calc(var(--u) * 1) 0; font-size: calc(var(--u) * 1.8); }
.lanes li { display: flex; gap: 0.9em; color: var(--muted); }
.lanes li .dot { width: 0.8em; text-align: center; color: var(--muted); }
.lanes li.busy { color: var(--text); }
.lanes li.busy .dot { color: var(--ice); }
.lanes li.down { color: var(--err); }
.lanes li.parked, #engines li.parked { opacity: 0.45; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 0.8) calc(var(--u) * 2); margin-top: auto; }
.facts dt { color: var(--muted); font-size: calc(var(--u) * 1.6); }
.facts dd { font-size: calc(var(--u) * 2.6); }

.periods { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: calc(var(--u) * 1); }
.periods div { display: flex; flex-direction: column; gap: calc(var(--u) * 0.3); }
.periods span { color: var(--muted); font-size: calc(var(--u) * 1.7); }
.periods b { font-size: calc(var(--u) * 5.4); font-weight: 300; line-height: 1.05; }
.periods small { color: var(--muted); font-size: calc(var(--u) * 1.7); }
#days { flex: 1; min-height: 0; width: 100%; margin-top: calc(var(--u) * 1.4); }
.note { color: var(--muted); font-size: calc(var(--u) * 1.6); margin-top: calc(var(--u) * 0.6); }

.models ol { list-style: none; display: flex; flex-direction: column; gap: calc(var(--u) * 0.4); margin-top: calc(var(--u) * 0.8); flex-shrink: 0; }
.models li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 0.9em; align-items: baseline; }
.models li .rank { color: var(--muted); }
.models li .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.models li .amount { color: var(--muted); }
.models li i { grid-column: 1 / -1; height: 2px; background: var(--ice-faint); margin-top: calc(var(--u) * 0.4); border-radius: 2px; }
.models li i b { display: block; height: 100%; background: var(--ice-dim); border-radius: 2px; }
.models h3 { padding-top: calc(var(--u) * 0.6); flex-shrink: 0; }
.engines { line-height: 1.1; scrollbar-width: thin; scrollbar-color: var(--edge) transparent; min-height: 0; overflow-y: auto; overflow-x: hidden; list-style: none; display: flex; flex-direction: column; gap: calc(var(--u) * 0.2); margin-top: calc(var(--u) * 0.6); color: var(--muted); font-size: calc(var(--u) * 1.9); }
.engines li { display: block; flex-shrink: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.engines b { color: var(--text); font-weight: 400; }
.empty { color: var(--muted); }

/* Bottom row: terminal-style log tail beside a per-request ledger. */
.bottom { display: grid; grid-template-columns: 1.15fr 1fr; gap: calc(var(--u) * 1.6); min-height: 0; }
.req, .line { font-family: var(--mono); font-size: calc(var(--u) * 1.85); }
.req { display: grid; grid-template-columns: 6.2em minmax(0, 1fr) 4.6em 4.6em 5.4em 5.4em; gap: 0.8em; white-space: nowrap; }
.req.head { color: var(--muted); font-size: calc(var(--u) * 1.85); margin-top: calc(var(--u) * 1); }
.req.head span { font-size: 0.8em; letter-spacing: 0.08em; text-transform: uppercase; }
.req.head span:nth-child(n+3), .req .num { text-align: right; }
.req .ts { color: var(--muted); }
.req .model { overflow: hidden; text-overflow: ellipsis; color: var(--ice-dim); }
.req .num { color: #c6d0d7; }
.req.running .num, .req.running .model { color: var(--ice); }
.requests .lines { margin-top: calc(var(--u) * 0.4); }
.logs { padding-bottom: calc(var(--u) * 1.4); }
.lines { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;
  margin-top: calc(var(--u) * 0.8); font-size: calc(var(--u) * 1.85); line-height: 1.5;
  mask-image: linear-gradient(to bottom, transparent 0, #000 30%); }
.line { display: grid; grid-template-columns: 6.2em 10em 1fr; gap: 1em; white-space: nowrap; animation: in 0.5s ease; }
.line .ts { color: var(--muted); }
.line .unit { color: var(--ice-dim); overflow: hidden; text-overflow: ellipsis; }
.line .msg { overflow: hidden; text-overflow: ellipsis; color: #c6d0d7; }
.line.warn .msg { color: var(--warn); }
.line.error .msg { color: var(--err); }
.line.tail .msg::after { content: ""; display: inline-block; width: 0.55em; height: 1em; vertical-align: -0.15em; margin-left: 0.4em; background: var(--ice); animation: blink 1.1s steps(1) infinite; }
@keyframes in { from { opacity: 0; transform: translateY(0.4em); } }

/* ---------- Phones and tablets ----------
   The wall above is the 16:10-and-wider layout. Anything narrower or shorter (phones, tablets
   in portrait, iPads, phones on their side) gets the same cards in a scrolling column, with the
   same type scale tied to the screen width instead of its height. */
@media (max-aspect-ratio: 159/100), (max-height: 599px) {
  :root { --u: min(calc(100vw / 48), 9.5px); }
  html, body { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; cursor: auto; overscroll-behavior-y: none; -webkit-text-size-adjust: 100%; }
  .backdrop i { filter: blur(60px); }
  #wall { height: auto; min-height: 100dvh; grid-template-rows: none; transform: none !important;
    padding: max(calc(var(--u) * 1.6), env(safe-area-inset-top)) max(calc(var(--u) * 1.6), env(safe-area-inset-right))
             max(calc(var(--u) * 2.4), env(safe-area-inset-bottom)) max(calc(var(--u) * 1.6), env(safe-area-inset-left)); }

  .top { flex-wrap: wrap; row-gap: calc(var(--u) * 0.6); padding: 0; }
  .prompt { font-size: calc(var(--u) * 2.1); }
  .meta { gap: calc(var(--u) * 1.8); font-size: calc(var(--u) * 1.7); margin-left: auto; }
  .meta .clock { font-size: calc(var(--u) * 2.6); }
  #date { display: none; }

  .gpus { grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--u) * 40)), 1fr)); }
  .gpu .pct .val { font-size: calc(var(--u) * 7.4); }
  .gpu .pct small { font-size: calc(var(--u) * 2.8); }
  .gpu .wave { flex: none; height: calc(var(--u) * 15); }
  .gpu footer { flex-wrap: wrap; gap: calc(var(--u) * 0.6) calc(var(--u) * 2.2); font-size: calc(var(--u) * 1.7); }
  .gpu footer .vram i { width: calc(var(--u) * 9); }

  .mid, .bottom { grid-template-columns: 1fr; }
  .card { padding: calc(var(--u) * 1.8) calc(var(--u) * 2); }
  .lanes-big span { font-size: calc(var(--u) * 5.4); }
  .lanes { font-size: calc(var(--u) * 1.7); }
  .lanes li { white-space: nowrap; }
  .lanes li span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .facts { margin-top: calc(var(--u) * 1.4); }
  .periods b { font-size: calc(var(--u) * 4.6); }
  #days { flex: none; height: calc(var(--u) * 18); }
  .models ol { margin-bottom: calc(var(--u) * 1); }
  h3 { margin-top: calc(var(--u) * 1.4); }

  .lines { flex: none; height: calc(var(--u) * 34); font-size: calc(var(--u) * 1.65); }
  .line { grid-template-columns: 5.6em 1fr; grid-template-areas: "ts unit" "msg msg"; gap: 0 0.8em; margin-bottom: 0.25em; }
  .line .ts { grid-area: ts; } .line .unit { grid-area: unit; }
  .line .msg { grid-area: msg; white-space: normal; overflow-wrap: anywhere; }
  .req { grid-template-columns: 5.4em minmax(0, 1fr) 3.6em 3.6em 3.8em; gap: 0.6em; font-size: calc(var(--u) * 1.65); }
  .req > :nth-child(6) { display: none; }
  .req.head { font-size: calc(var(--u) * 1.65); }
}

/* Tablets: two cards per row where there is room. */
@media ((max-aspect-ratio: 159/100) or (max-height: 599px)) and (min-width: 700px) {
  :root { --u: min(calc(100vw / 80), 9.5px); }
  .mid { grid-template-columns: 1fr 1fr; }
  .mid .models { grid-column: 1 / -1; }
  .gpu .wave { height: calc(var(--u) * 17); }
  #date { display: inline; }
}
@media ((max-aspect-ratio: 159/100) or (max-height: 599px)) and (min-width: 1000px) {
  :root { --u: min(calc(100vw / 100), 9.5px); }
  .mid { grid-template-columns: 1.1fr 1.2fr 1fr; }
  .mid .models { grid-column: auto; }
  .bottom { grid-template-columns: 1.15fr 1fr; }
  .req > :nth-child(6) { display: block; }
  .req { grid-template-columns: 6.2em minmax(0, 1fr) 4.6em 4.6em 5.4em 5.4em; }
}