/* hva leter du etter? :) */

/* ============================================================
   FONT — one variable JetBrains Mono (real 400–800 weights). Box-drawing
   and block glyphs (▲ █ ─) aren't in these subsets and fall back to the
   system monospace, like in a real terminal. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Dark terminal canvas — Dracula/Catppuccin-ish, not a flat hacker-green
     screen. Everything below cascades from these vars. */
  --ink-950: #11111B;
  --ink-900: #181825;
  --ink-800: #1E1E2E;
  --ink-700: #313244;
  --ink-600: #45475A;
  --ink-500: #585B70;
  --ink-400: #8A8FA8; /* dim-but-readable: 5.1:1 on --ink-800 */

  --mist: #F5F5F9;
  --muted: #A6ADC8;

  /* Full ANSI accent set, used round-robin across repeated content. */
  --ansi-red: #FF5555;
  --ansi-green: #50FA7B;
  --ansi-yellow: #F1FA8C;
  --ansi-cyan: #8BE9FD;
  --ansi-magenta: #FF79C6;
  --ansi-orange: #FFB86C;
  --ansi-purple: #BD93F9;

  --gold: var(--ansi-cyan);
  --gold-soft: var(--ansi-yellow);
  --aurora: var(--ansi-green);
  --error: var(--ansi-red);

  --bg: var(--ink-950);
  --panel: var(--ink-800);
  --border: var(--ink-700);
  --text: var(--mist);
  --text-muted: var(--muted);
  --accent: var(--gold);

  /* Monospace, everywhere, no exceptions. */
  --font-display: 'JetBrains Mono', ui-monospace, 'Cascadia Code', 'DejaVu Sans Mono', monospace;
  --font-body: var(--font-display);
  --font-mono: var(--font-display);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;

  --container: 84rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --man-indent: 1.25rem;

  --radius-sm: 6px;
  --radius-md: 8px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 420ms;

  /* Print timing: the command types in ≤ 360 ms, its output starts right
     after. Fast enough that nobody ever waits to read. */
  --out-delay: 380ms;
  --line-step: 45ms;

  --topbar-h: 92px; /* measured & corrected by main.js */
}
@media (min-width: 48em) {
  :root { --man-indent: 3rem; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--topbar-h) + var(--space-4));
  scroll-behavior: smooth;
  background: var(--bg);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  padding-top: var(--topbar-h);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  font-variant-ligatures: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
strong, b { font-weight: 700; }
::selection { background: var(--ansi-cyan); color: var(--ink-950); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
  }
}

/* Faint 42 px character grid behind everything. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  background-image:
    linear-gradient(rgba(139, 233, 253, 0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(139, 233, 253, 0.6) 1px, transparent 1px);
  background-size: 42px 42px;
}

/* ============================================================
   CRT / PHOSPHOR — optional, toggled from the tmux bar (`crt` button or
   the `crt on|off` command), remembered per browser. Static scanlines +
   vignette + a soft phosphor bloom on terminal text; one very faint
   rolling band is the only motion, and it stops under reduced motion.
   Never used as a contrast aid: all text passes AA with it off. */
html.crt body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  background:
    radial-gradient(ellipse 120% 90% at 50% 45%, transparent 62%, rgba(0, 0, 0, 0.38) 100%),
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.09) 0, rgba(0, 0, 0, 0.09) 1px, transparent 1px, transparent 3px);
}
html.crt::after {
  content: "";
  position: fixed;
  inset-inline: 0;
  top: 0;
  height: 28vh;
  z-index: 401;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(139, 233, 253, 0.022) 45%, rgba(245, 245, 249, 0.03) 50%, transparent);
  transform: translateY(-30vh);
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  html.crt::after { animation: crt-roll 11s linear infinite; }
}
@keyframes crt-roll {
  from { transform: translateY(-30vh); }
  to   { transform: translateY(105vh); }
}
html.crt .term-body,
html.crt .term-pane,
html.crt .prompt-line,
html.crt .man-head,
html.crt .tmux-bar,
html.crt .echo-out {
  text-shadow: 0 0 0.6px currentColor, 0 0 7px color-mix(in srgb, currentColor 30%, transparent);
}
html.crt .term-window--hero {
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(139, 233, 253, 0.06), 0 0 60px rgba(80, 250, 123, 0.05);
}

.hud-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--aurora);
  box-shadow: 0 0 6px 1px rgba(80, 250, 123, 0.85);
  margin-right: var(--space-2);
  vertical-align: middle;
}
@media (prefers-reduced-motion: no-preference) {
  .hud-dot { animation: hud-pulse 2.2s ease-in-out infinite; }
}
@keyframes hud-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -3rem;
  background: var(--gold);
  color: var(--ink-950);
  font-size: 0.875rem;
  font-weight: 700;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

/* ============================================================
   TOPBAR — window titlebar + tmux status line. The status line IS the nav:
   numbered windows (0:~ 1:om …, also reachable with the number keys),
   active window inverted with tmux's `*` flag, session name on the left,
   tools + clock on the right. */

.term-topbar {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  background: rgba(17, 17, 27, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.term-topbar-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: 0.6rem;
}

.term-topbar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}
.term-topbar-brand .term-dot { width: 11px; height: 11px; }
.term-topbar-brand .brand-mark { width: 20px; height: 20px; color: var(--gold); }
.term-topbar-name {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--mist);
  white-space: nowrap;
}
@media (max-width: 34em) { .term-topbar-name { display: none; } }

.term-topbar-path {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.term-cursor--inline {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  background: var(--gold);
  vertical-align: text-bottom;
  margin-left: 2px;
}

.term-topbar .btn {
  flex-shrink: 0;
  font-size: 0.75rem;
  padding: 0.5em 0.9em;
}

/* tmux status line */
.tmux-bar {
  display: flex;
  align-items: stretch;
  min-height: 1.95rem;
  background: var(--ansi-green);
  color: var(--ink-950);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  padding-inline: calc(var(--gutter) - 0.5rem) var(--gutter);
}
.tmux-session {
  display: flex;
  align-items: center;
  padding-inline: 0.5rem 0.75rem;
  font-weight: 800;
  white-space: nowrap;
}
.tmux-windows {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tmux-windows::-webkit-scrollbar { display: none; }

.term-tab {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 0 0.6rem;
  color: var(--ink-950);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tmux-idx { opacity: 0.72; }
.tmux-flag { display: inline-block; width: 1ch; }
.term-tab:hover { background: rgba(17, 17, 27, 0.14); }
.term-tab.is-active {
  background: var(--ink-950);
  color: var(--ansi-green);
}
.term-tab.is-active .tmux-idx { opacity: 1; }
.term-tab.is-active .tmux-flag::after { content: "*"; }
.term-tab:focus-visible { outline: 2px solid var(--ink-950); outline-offset: -3px; }
.term-tab.is-active:focus-visible { outline-color: var(--ansi-green); }

.tmux-right {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding-left: 0.5rem;
  white-space: nowrap;
}
.tmux-btn {
  font: inherit;
  color: var(--ink-950);
  background: transparent;
  border: 0;
  border-radius: 3px;
  padding: 0.3rem 0.45rem;
  cursor: pointer;
  min-height: 1.6rem;
}
.tmux-btn:hover { background: rgba(17, 17, 27, 0.14); }
.tmux-btn:focus-visible { outline: 2px solid var(--ink-950); outline-offset: 0; }
.tmux-btn[aria-pressed="false"] { text-decoration: line-through; opacity: 0.75; }
.tmux-clock {
  padding-left: 0.6rem;
  margin-left: 0.25rem;
  border-left: 1px solid rgba(17, 17, 27, 0.35);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 40em) {
  .tmux-session, .tmux-clock, .js-tmux-keys { display: none; }
  .tmux-bar { padding-inline: 0.25rem 0.5rem; }
}

/* ============================================================
   TERMINAL WINDOW — the hero, the contact modal and the tmux popup. */

.term-window {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.term-titlebar,
.term-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--ink-900);
  border-bottom: 1px solid var(--border);
}
.term-titlebar-label,
.term-title {
  margin-left: auto;
  font-size: 0.6875rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.term-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-600); flex-shrink: 0; }
.term-dot--red { background: var(--ansi-red); }
.term-dot--yellow { background: var(--ansi-yellow); }
.term-dot--green { background: var(--ansi-green); }

/* ============================================================
   HERO — a real shell. Boots (first visit per session), types
   `cat README.md`, then waits for you. */

.hero {
  min-height: calc(100svh - var(--topbar-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-6) var(--space-5);
}

.term-window--hero {
  max-width: 54rem;
  margin-inline: auto;
  width: 100%;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}

.term-body {
  height: min(56vh, 30rem);
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-5);
  font-size: 0.8125rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-600) transparent;
  overscroll-behavior: contain;
}
.term-body > div,
.term-static > div { min-height: 1.3em; }
.term-body::-webkit-scrollbar { width: 8px; }
.term-body::-webkit-scrollbar-track { background: transparent; }
.term-body::-webkit-scrollbar-thumb {
  background: var(--ink-600);
  border-radius: 4px;
  border: 2px solid var(--panel);
}
.term-body::-webkit-scrollbar-thumb:hover { background: var(--gold); }
@media (max-width: 40em) {
  .term-body { padding: var(--space-4); font-size: 0.78rem; height: min(52vh, 26rem); }
}

/* Server-rendered README: what you see without JS. With JS the shell
   prints it live, so the static copy never paints (no flash). */
.term-static { white-space: normal; }
.term-static > div { white-space: pre-wrap; }
.js .term-static { display: none; }
html:not(.js) .term-input-row,
html:not(.js) .term-extrakeys,
html:not(.js) .term-hint,
html:not(.js) .tmux-btn { display: none; }
.kt-failsafe .term-static { display: block; }

.term-cmd { color: var(--mist); }
.term-ok { color: var(--ansi-green); }
.term-error { color: var(--ansi-red); }
.term-warn { color: var(--ansi-yellow); }
.term-dim { color: var(--muted); }
.term-faint { color: var(--ink-400); }
.term-code { color: var(--ansi-purple); }
.term-cyan { color: var(--ansi-cyan); }
.term-magenta { color: var(--ansi-magenta); }
.term-orange { color: var(--ansi-orange); }
.term-strong { font-weight: 700; }
.term-dir { color: var(--ansi-cyan); font-weight: 700; }
.term-exe { color: var(--ansi-green); font-weight: 700; }
.term-body a { color: var(--ansi-cyan); text-decoration: underline; text-underline-offset: 0.2em; }
.term-body .ps1-user, .term-prompt-label .ps1-user { color: var(--ansi-green); font-weight: 700; }
.term-body .ps1-path, .term-prompt-label .ps1-path { color: var(--ansi-cyan); font-weight: 700; }
.term-body .ind { padding-left: 7ch; }
@media (max-width: 40em) { .term-body .ind { padding-left: 3ch; } }
.term-body mark { background: var(--ansi-yellow); color: var(--ink-950); border-radius: 2px; }

/* "logo" command — beams-style reveal, see main.js beamsReveal(). */
.term-logo { position: relative; overflow: hidden; }
.term-logo-line span.is-beam {
  color: var(--mist);
  text-shadow: 0 0 6px rgba(245, 245, 249, 0.85), 0 0 14px rgba(139, 233, 253, 0.5);
}
.term-logo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(245, 245, 249, 0.4) 50%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
  mix-blend-mode: overlay;
}
.term-logo.is-lit::after { animation: term-logo-glint 1.1s ease-out 1; }
@keyframes term-logo-glint {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

.term-input-row {
  display: flex;
  align-items: center;
  gap: 1ch;
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
}
.term-prompt-label {
  color: var(--ansi-green);
  font-weight: 700;
  white-space: nowrap;
}
.term-input-wrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  font-size: 0.8125rem;
}
.term-input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  outline: none;
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: inherit;
  font-weight: 500;
  line-height: 1.5;
  caret-color: transparent;
}
.term-input::placeholder { color: var(--ink-400); }
.term-input:disabled { cursor: progress; }
.term-input:focus-visible { outline: none; }
.term-input-row:focus-within { background: rgba(139, 233, 253, 0.035); }

/* Block cursor that follows the caret (main.js sets --caret / --scroll). */
.term-cursor {
  display: inline-block;
  width: 1ch;
  height: 1.25em;
  background: var(--gold);
}
.term-cursor--block {
  position: absolute;
  top: 50%;
  left: 0;
  margin-top: -0.625em;
  transform: translateX(calc(var(--caret, 0) * 1ch - var(--scroll, 0) * 1px));
  mix-blend-mode: difference;
  pointer-events: none;
}
.term-input:not(:focus) + .term-cursor--block { background: transparent; box-shadow: inset 0 0 0 1px var(--gold); mix-blend-mode: normal; }
.term-input:disabled + .term-cursor--block { opacity: 0.4; }
@media (prefers-reduced-motion: no-preference) {
  .term-cursor { animation: term-blink 1.06s steps(1) infinite; }
  .term-input:focus + .term-cursor--block.is-typing { animation: none; }
}
@keyframes term-blink { 50% { opacity: 0; } }

@media (max-width: 40em) {
  /* iOS zooms into focused fields under 16px. */
  .term-input-wrap { font-size: 16px; }
  .term-input-row { padding: var(--space-3) var(--space-4); }
  .term-window--hero .term-prompt-label { font-size: 0.75rem; }
}

/* Termux-style extra-keys row on touch / narrow screens. */
.term-extrakeys {
  display: none;
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
}
.term-extrakeys button {
  flex: 1;
  min-height: 2.6rem;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--muted);
  background: var(--ink-900);
  border: 0;
  cursor: pointer;
}
.term-extrakeys button:active:not(:disabled) { background: var(--ink-700); color: var(--mist); }
.term-extrakeys button:disabled { opacity: 0.45; }
@media (pointer: coarse), (max-width: 40em) {
  .term-extrakeys { display: flex; }
}

.term-hint {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  max-width: 54rem;
  margin-inline: auto;
}
.term-hint button {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--ink-900);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.4em 0.85em;
  min-height: 2rem;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.term-hint button::before { content: "$ "; color: var(--ink-400); }
.term-hint button:hover:not(:disabled),
.term-hint button:focus-visible:not(:disabled) {
  color: var(--mist);
  background: var(--ink-800);
  border-color: var(--gold);
}
.term-hint button:disabled { opacity: 0.4; cursor: progress; }
.term-hint button:nth-child(4n+1) { border-color: color-mix(in srgb, var(--ansi-cyan) 35%, var(--border)); }
.term-hint button:nth-child(4n+2) { border-color: color-mix(in srgb, var(--ansi-magenta) 35%, var(--border)); }
.term-hint button:nth-child(4n+3) { border-color: color-mix(in srgb, var(--ansi-green) 35%, var(--border)); }
.term-hint button:nth-child(4n+4) { border-color: color-mix(in srgb, var(--ansi-orange) 35%, var(--border)); }

.scroll-cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: center;
}
.scroll-cue-line { width: 1px; height: 20px; background: var(--border); }
.scroll-cue:hover { color: var(--mist); }

/* ============================================================
   TERM-BLOCK — every section: a `kodelig@senja:~$ command` prompt, then
   its output in a tmux pane (titled border; the pane you're reading gets
   tmux's green active border). When a block scrolls in (main.js adds
   .is-run) the command types itself — steps of exactly 1ch, so it is
   real per-character typing — and the output prints under it line by
   line. Everything is hidden from first paint only when JS is present,
   with a failsafe (kt-failsafe) if main.js never boots. */

.term-block { padding-block: var(--space-8) 0; }
.term-block:last-child { padding-bottom: var(--space-8); }
.term-block--tight { padding-top: var(--space-6); }

.term-line {
  font-size: 0.9375rem;
  margin-bottom: var(--space-4);
}
.prompt-line {
  color: var(--mist);
  font-weight: 600;
  white-space: nowrap;
}
.ps1 { font-weight: 700; }
.ps1-user { color: var(--ansi-green); }
.ps1-path { color: var(--ansi-cyan); }
.ps1-mini { color: var(--ansi-magenta); margin-right: 1ch; }
.prompt-line::after {
  content: "";
  display: inline-block;
  width: 1ch;
  height: 1.15em;
  margin-left: 0.15ch;
  vertical-align: text-bottom;
  background: var(--gold);
  opacity: 0;
}
.term-block.is-current .prompt-line::after { opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  .term-block.is-current .prompt-line::after { animation: term-blink 1.06s steps(1) infinite; }
}
@media (max-width: 40em) {
  .prompt-line { white-space: normal; overflow-wrap: anywhere; font-size: 0.8125rem; }
  .prompt-line .ps1 { display: none; }
}

.js .cmd-typed {
  display: inline-block;
  vertical-align: bottom;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
}
.js .is-run .cmd-typed {
  animation: kt-type min(calc(var(--n, 10) * 22ms), 360ms) steps(var(--n, 10), end) forwards;
}
@keyframes kt-type { to { max-width: calc(var(--n, 10) * 1ch + 1px); } }
@media (max-width: 40em) {
  .js .cmd-typed { display: inline; max-width: none; white-space: normal; }
  .js .is-run .cmd-typed { animation: none; }
}

.term-pane {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: border-color 300ms var(--ease-out);
}
.term-pane[data-title]::before {
  content: " " attr(data-title) " ";
  position: absolute;
  top: -0.7em;
  left: 1.25rem;
  padding-inline: 0.25ch;
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink-400);
  background: var(--bg);
  white-space: pre;
  transition: color 300ms var(--ease-out);
}
.term-block.is-current .term-pane { border-color: color-mix(in srgb, var(--ansi-green) 70%, var(--border)); }
.term-block.is-current .term-pane[data-title]::before { color: var(--ansi-green); }
@media (max-width: 40em) {
  .term-pane { padding: var(--space-5) var(--space-4); }
}

/* Print-in: pane wipes down from its title, lines fade in in sequence. */
.js .term-block .term-pane,
.js .echo-out {
  clip-path: inset(0 0 100% 0);
}
.js .term-block.is-run .term-pane,
.js .term-block.is-run .echo-out {
  clip-path: inset(-2em -2em -2em -2em);
  transition: clip-path 520ms cubic-bezier(0.25, 0.8, 0.25, 1) var(--out-delay), border-color 300ms var(--ease-out);
}
.js .out-line {
  opacity: 0;
  transform: translateY(4px);
}
.js .is-run .out-line {
  opacity: 1;
  transform: none;
  transition:
    opacity 260ms ease-out calc(var(--out-delay) + var(--i, 0) * var(--line-step)),
    transform 260ms var(--ease-out) calc(var(--out-delay) + var(--i, 0) * var(--line-step));
}

/* Stand-alone reveal (portfolio cards). */
.js .reveal {
  opacity: 0;
  transform: translateY(8px);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity 420ms var(--ease-out) calc(var(--i, 0) * 70ms), transform 420ms var(--ease-out) calc(var(--i, 0) * 70ms);
}

/* No JS / failsafe / reduced motion: everything simply there. */
.kt-failsafe .cmd-typed { max-width: none !important; animation: none !important; }
.kt-failsafe .term-pane, .kt-failsafe .echo-out { clip-path: none !important; }
.kt-failsafe .out-line, .kt-failsafe .reveal { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .js .cmd-typed { max-width: none; animation: none !important; }
  .js .term-block .term-pane, .js .echo-out { clip-path: none; }
  .js .out-line, .js .reveal { opacity: 1; transform: none; }
}

.term-output {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: var(--text);
  max-width: 72ch;
}
.term-output--caption { font-size: 0.8125rem; color: var(--muted); }
.term-link { color: var(--ansi-cyan); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ansi-cyan) 40%, transparent); text-underline-offset: 0.2em; }
.term-link:hover, .term-link:focus-visible { text-decoration-color: currentColor; }
.pane-more { margin-top: var(--space-5); font-size: 0.8125rem; }
.pane-more--outside { margin-top: var(--space-5); }

/* ---------- md-list (hvorfor) ---------- */

.md-list { display: flex; flex-direction: column; gap: var(--space-4); }
.md-item { display: flex; gap: 1ch; font-size: 0.9375rem; line-height: 1.65; max-width: 80ch; }
.md-bullet { font-weight: 800; flex-shrink: 0; }
.md-item:nth-child(4n+1) .md-bullet { color: var(--ansi-cyan); }
.md-item:nth-child(4n+2) .md-bullet { color: var(--ansi-magenta); }
.md-item:nth-child(4n+3) .md-bullet { color: var(--ansi-green); }
.md-item:nth-child(4n+4) .md-bullet { color: var(--ansi-orange); }
.md-item strong { color: var(--mist); }

/* ---------- ls-list ---------- */

.ls-summary { font-size: 0.8125rem; color: var(--muted); margin-bottom: var(--space-3); }
.ls-list { display: flex; flex-direction: column; }
.ls-row {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 2ch;
  padding-block: var(--space-3);
  border-top: 1px dashed var(--border);
  font-size: 0.8125rem;
}
.ls-list > .ls-row:first-child { border-top: none; }
.ls-perm, .ls-meta { color: var(--ink-400); font-variant-numeric: tabular-nums; }
.ls-name { font-weight: 700; }
.ls-row:nth-child(3n+1) .ls-name { color: var(--ansi-cyan); }
.ls-row:nth-child(3n+2) .ls-name { color: var(--ansi-magenta); }
.ls-row:nth-child(3n+3) .ls-name { color: var(--ansi-green); }
.ls-desc {
  grid-column: 1 / -1;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--text-muted);
  margin-top: var(--space-1);
  max-width: 80ch;
}
.ls-desc p + p { margin-top: var(--space-2); }

@media (max-width: 34em) {
  .ls-row { grid-template-columns: 1fr; gap: 2px; }
  .ls-perm, .ls-meta { display: none; }
}

/* ---------- json-block (pricing on the homepage) ---------- */

.json-block { font-size: 0.875rem; line-height: 1.8; }
.json-punct { color: var(--ink-400); }
.json-key { color: var(--ansi-cyan); }
.json-str { color: var(--ansi-yellow); }
.json-num { color: var(--ansi-green); font-weight: 700; }
.json-bool { color: var(--ansi-purple); }
.json-entry {
  margin: var(--space-4) 0 var(--space-4) 2ch;
  padding-left: 2ch;
  border-left: 2px solid var(--border);
}
.json-entry:nth-child(4n+2) { border-left-color: var(--ansi-cyan); }
.json-entry:nth-child(4n+3) { border-left-color: var(--ansi-magenta); }
.json-entry:nth-child(4n+4) { border-left-color: var(--ansi-green); }
.json-entry:nth-child(4n+5) { border-left-color: var(--ansi-orange); }
.json-row { margin-left: 2ch; }
.json-row--desc { color: var(--muted); max-width: 90ch; }
@media (max-width: 34em) {
  .json-entry { margin-left: 0; padding-left: 1ch; }
  .json-row { margin-left: 1ch; }
}

/* ---------- portfolio image panes ---------- */

.term-projects-grid {
  margin-top: var(--space-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6) var(--space-5);
}
@media (min-width: 40em) { .term-projects-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .term-projects-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.term-project { display: flex; flex-direction: column; min-width: 0; }
.term-cmd--small { font-size: 0.8125rem; margin-bottom: var(--space-3); display: block; }
.term-pane--image { padding: 0; height: 100%; display: flex; flex-direction: column; flex: 1; }
.term-pane--image .portfolio-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--ink-900); }
.portfolio-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.92) contrast(1.02); transition: filter 300ms var(--ease-out), transform 600ms var(--ease-out); }
.term-pane--image .term-output--caption { display: block; padding: var(--space-4); margin: 0; font-size: 0.8125rem; }
.term-output--caption p + p, .term-output--caption .project-text p { margin-top: var(--space-2); }
.term-pane--image .json-str { color: var(--mist); font-weight: 700; }
.term-project--card { color: inherit; }
.term-project--card .term-pane { transition: border-color var(--dur-fast) var(--ease-out); }
.term-project--card:hover .term-pane,
.term-project--card:focus-visible .term-pane { border-color: var(--ansi-cyan); }
.term-project--card:hover img { filter: saturate(1.05) contrast(1.05); transform: scale(1.02); }
.term-project--card h3 { font-size: 1rem; color: var(--mist); margin: var(--space-1) 0 var(--space-2); }
.project-tag { color: var(--ansi-magenta); font-size: 0.75rem; font-weight: 600; }
.project-visit { display: inline-block; margin-top: var(--space-3); }

/* ---------- CTA ---------- */

.cta-heading { font-size: clamp(1.15rem, 2.5vw, 1.5rem); font-weight: 800; color: var(--mist); margin-top: var(--space-3); }
.term-cta-btn {
  margin-top: var(--space-5);
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink-950);
  background: var(--gold);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.9em 1.5em;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(139, 233, 253, 0.2);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.term-cta-btn:hover, .term-cta-btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(139, 233, 253, 0.32);
}

/* ============================================================
   BUTTON (topbar trigger) */

.btn {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink-950);
  background: var(--gold);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.6em 1.1em;
  cursor: pointer;
  transition: filter var(--dur-fast) var(--ease-out);
}
.btn:hover, .btn:focus-visible { filter: brightness(1.1); }

/* ============================================================
   MAN PAGES — every sub-page. Classic layout: three-column header rule,
   bold uppercase section names flush left, body indented under them,
   ~80-column measure, footer rule with version and date. */

.man-head { padding-top: var(--space-7); }
.man-rule {
  display: flex;
  justify-content: space-between;
  gap: 2ch;
  margin: var(--space-5) 0 var(--space-6);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--mist);
}
.man-rule-mid { color: var(--muted); font-weight: 500; text-align: center; }
.man-rule--foot { margin: var(--space-8) 0 var(--space-6); padding-top: var(--space-4); border-top: 1px dashed var(--border); }
@media (max-width: 40em) {
  .man-rule > span:last-child { display: none; }
  .man-rule-mid { text-align: right; }
}
.man-sec {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--mist);
  margin-bottom: var(--space-2);
}
.man-title {
  margin-left: var(--man-indent);
  font-size: clamp(1.45rem, 4.2vw, 2.6rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--mist);
  max-width: 34ch;
  text-wrap: balance;
}
.man-name { color: var(--ansi-cyan); }
.man-dash { color: var(--ink-400); font-weight: 400; }

.man-block { padding-top: var(--space-6); }
.man-body {
  margin-left: var(--man-indent);
  max-width: 78ch;
  font-size: 0.9375rem;
  line-height: 1.8;
  color: var(--text);
}
.man-body--flush { margin-left: 0; }
.man-body--lede { font-size: 1rem; }
.man-body > * + * { margin-top: var(--space-4); }
.man-body h2 {
  margin: var(--space-7) 0 var(--space-3) calc(var(--man-indent) * -1);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mist);
}
.man-body h3 { margin-top: var(--space-6); font-size: 0.9375rem; font-weight: 700; color: var(--ansi-cyan); }
.man-body h4 { font-size: 0.9375rem; font-weight: 700; color: var(--ansi-magenta); }
.man-body a { color: var(--ansi-cyan); text-decoration: underline; text-underline-offset: 0.2em; }
.man-body strong { color: var(--mist); }
.man-body em { font-style: normal; text-decoration: underline; text-underline-offset: 0.2em; }
.man-body ul, .man-body ol { display: flex; flex-direction: column; gap: var(--space-2); }
.man-body ul > li { position: relative; padding-left: 3ch; }
.man-body ul > li::before { content: "•"; position: absolute; left: 0.5ch; color: var(--ansi-green); }
.man-body ol { counter-reset: man; }
.man-body ol > li { position: relative; padding-left: 4ch; counter-increment: man; }
.man-body ol > li::before { content: counter(man) "."; position: absolute; left: 0; color: var(--ansi-green); font-weight: 700; }
.man-body code { color: var(--ansi-yellow); }
.man-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.man-body table { border-collapse: collapse; font-size: 0.875rem; }
.man-body th, .man-body td { border: 1px dashed var(--border); padding: 0.4em 1ch; text-align: left; }

.pane-heading {
  font-size: 0.875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--mist);
  margin-bottom: var(--space-5);
}
.pane-heading--big { font-size: clamp(1.2rem, 3vw, 1.75rem); letter-spacing: -0.01em; line-height: 1.25; }
.pane-kicker { font-size: 0.8125rem; font-weight: 700; color: var(--ansi-green); margin-bottom: var(--space-2); }
.block-heading { font-size: clamp(1.15rem, 2.5vw, 1.5rem); font-weight: 800; color: var(--mist); }
.block-lede { color: var(--muted); margin: var(--space-2) 0 var(--space-6); }

/* Tjenester: ls -l tilbud/ */
.offer-list { display: grid; gap: var(--space-5); }
@media (min-width: 48em) { .offer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-7); } }
.offer { padding-left: 2ch; border-left: 2px solid var(--border); }
.offer:nth-child(4n+1) { border-left-color: var(--ansi-cyan); }
.offer:nth-child(4n+2) { border-left-color: var(--ansi-magenta); }
.offer:nth-child(4n+3) { border-left-color: var(--ansi-green); }
.offer:nth-child(4n+4) { border-left-color: var(--ansi-orange); }
.offer-file { font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offer:nth-child(4n+1) .ls-name { color: var(--ansi-cyan); }
.offer:nth-child(4n+2) .ls-name { color: var(--ansi-magenta); }
.offer:nth-child(4n+3) .ls-name { color: var(--ansi-green); }
.offer:nth-child(4n+4) .ls-name { color: var(--ansi-orange); }
.offer h3 { margin: var(--space-2) 0; font-size: 1.0625rem; font-weight: 800; color: var(--mist); line-height: 1.35; }
.offer p { color: var(--muted); font-size: 0.9375rem; line-height: 1.7; }
.offer-link { display: inline-block; margin-top: var(--space-3); font-size: 0.8125rem; font-weight: 600; }

/* Tjenester: cat prosess.log */
.log-list { display: flex; flex-direction: column; margin-top: var(--space-5); }
.log-entry {
  display: grid;
  grid-template-columns: 3ch auto minmax(0, 1fr);
  gap: 0 2ch;
  padding-block: var(--space-4);
  border-top: 1px dashed var(--border);
}
.log-entry:first-child { border-top: 0; }
.log-step { color: var(--ink-400); font-weight: 700; font-variant-numeric: tabular-nums; }
.log-ok { color: var(--ansi-green); font-weight: 700; white-space: pre; }
.log-body h3 { font-size: 1rem; font-weight: 800; color: var(--mist); }
.log-copy { margin-top: var(--space-1); color: var(--muted); line-height: 1.7; max-width: 76ch; }
.log-copy p + p { margin-top: var(--space-2); }
@media (max-width: 34em) {
  .log-entry { grid-template-columns: auto minmax(0, 1fr); }
  .log-ok { display: none; }
}

/* Priser */
.col-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.col-table th, .col-table td { text-align: left; padding: 0.7em 2ch 0.7em 0; border-bottom: 1px dashed var(--border); vertical-align: baseline; }
.col-table thead th { color: var(--ink-400); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; }
.col-table tbody th { font-weight: 700; }
.col-table tbody tr:last-child > * { border-bottom: 0; }
.col-price { color: var(--ansi-green); font-weight: 700; white-space: nowrap; }
@media (max-width: 34em) {
  .col-table thead { display: none; }
  .col-table tr { display: grid; grid-template-columns: 1fr auto; padding-block: 0.5em; border-bottom: 1px dashed var(--border); }
  .col-table tbody tr:last-child { border-bottom: 0; }
  .col-table th, .col-table td { border: 0; padding: 0.1em 0; }
  .col-table tbody th { grid-column: 1 / -1; }
}
.price-line { margin-bottom: var(--space-4); font-size: 1.125rem; }
.price-line strong { color: var(--ansi-green); font-weight: 800; }
.price-line span { color: var(--muted); font-size: 0.8125rem; }

/* Facebook: diff -y */
.term-pane--diff { padding: var(--space-5); }
.diff-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 1.6; }
.diff-table caption { text-align: left; color: var(--muted); padding-bottom: var(--space-4); caption-side: top; }
.diff-table caption::before { content: "# "; color: var(--ink-400); }
.diff-table th, .diff-table td { text-align: left; vertical-align: top; padding: 0.7em 1.5ch; }
.diff-table thead th { font-weight: 800; border-bottom: 1px solid var(--border); }
.diff-table thead .diff-minus { color: var(--ansi-red); }
.diff-table thead .diff-plus { color: var(--ansi-green); }
.diff-mark { font-weight: 800; margin-right: 0.5ch; }
.diff-table tbody th { width: 22%; color: var(--mist); font-weight: 700; padding-left: 0; }
.diff-hunk { color: var(--ansi-purple); }
.diff-table tbody td { width: 39%; position: relative; padding-left: 3ch; }
.diff-table tbody td.diff-minus { background: rgba(255, 85, 85, 0.07); color: var(--muted); }
.diff-table tbody td.diff-plus { background: rgba(80, 250, 123, 0.07); color: var(--mist); }
.diff-table tbody tr + tr > * { border-top: 1px dashed var(--border); }
.diff-sign { position: absolute; left: 1ch; font-weight: 800; }
.diff-minus .diff-sign { color: var(--ansi-red); }
.diff-plus .diff-sign { color: var(--ansi-green); }
.digital-home-mobile-label { display: none; }
@media (max-width: 47.99em) {
  .diff-table, .diff-table tbody, .diff-table tr, .diff-table th, .diff-table td { display: block; width: auto !important; }
  .diff-table thead { display: none; }
  .diff-table caption { display: block; }
  .diff-table tbody tr { padding-block: var(--space-3); }
  .diff-table tbody tr + tr > * { border-top: 0; }
  .diff-table tbody tr + tr { border-top: 1px dashed var(--border); }
  .diff-table tbody th { padding: 0 0 0.4em; }
  .diff-table tbody td { padding: 0.5em 1ch 0.5em 3ch; }
  .digital-home-mobile-label { display: block; font-size: 0.75rem; font-weight: 700; }
  .diff-minus .digital-home-mobile-label { color: var(--ansi-red); }
  .diff-plus .digital-home-mobile-label { color: var(--ansi-green); }
  .diff-sign { top: 0.5em; }
}

.term-pane-row { display: grid; gap: var(--space-6); }
@media (min-width: 56em) { .term-pane-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.term-pane-row .term-output + .term-output { margin-top: var(--space-3); }
.term-pane-row .pane-heading { font-size: 1rem; letter-spacing: 0; line-height: 1.4; }
.term-pane-row .md-bullet { color: var(--ansi-magenta); }

.echo-out {
  font-size: clamp(1.35rem, 3.6vw, 2.4rem);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ansi-green);
  max-width: 30ch;
}

/* ============================================================
   tmux POPUP — the `:` command line, available on every page. */

.tmux-popup {
  position: fixed;
  z-index: 300;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: min(48rem, calc(100% - 2rem));
  transform: translate(-50%, 12px);
  opacity: 0;
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.tmux-popup.is-open { opacity: 1; transform: translate(-50%, 0); }
.tmux-popup .term-window { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); border-color: var(--ansi-green); }
.term-body--popup { height: min(40vh, 20rem); }
.tmux-popup .term-input-row { font-size: 0.8125rem; }

/* ============================================================
   FOOTER — a status line of its own. */

.site-footer {
  padding-block: var(--space-6);
  border-top: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--muted);
  background: var(--ink-950);
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); align-items: center; }
.footer-status { color: var(--ansi-green); }
.tagline { color: var(--mist); }
.footer-meta { margin-left: auto; }
.footer-contact { padding-top: var(--space-2); }
.footer-contact a { color: var(--ansi-cyan); }
.footer-contact a:hover { text-decoration: underline; }
.footer-contact span + a::before,
.footer-contact a + a::before,
.footer-contact a + span::before { content: " · "; color: var(--ink-400); }
@media (max-width: 40em) {
  .footer-meta { margin-left: 0; }
  .footer-contact { gap: var(--space-1) var(--space-3); }
}

/* ============================================================
   CONTACT MODAL — a vim-ish shell-script prompt sequence. */

.contact-modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 32rem;
  width: calc(100% - 2rem);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), overlay var(--dur-base) allow-discrete, display var(--dur-base) allow-discrete;
}
.contact-modal::backdrop {
  background: rgba(17, 17, 27, 0.75);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.contact-modal.is-open,
.contact-modal.is-open::backdrop { opacity: 1; transform: none; }

.term-close {
  margin-left: auto;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  background: none; border: none; cursor: pointer;
}
.term-close:hover { color: var(--ansi-red); }
.term-close svg { width: 14px; height: 14px; }

.contact-body { padding: var(--space-6); }
@media (max-width: 40em) { .contact-body { padding: var(--space-5) var(--space-4); } }
.contact-body .term-line.term-cmd { color: var(--ansi-green); font-size: 0.875rem; margin-bottom: var(--space-5); }

.term-field { margin-bottom: var(--space-4); }
.term-field label {
  display: block;
  font-size: 0.8125rem;
  color: var(--ansi-cyan);
  margin-bottom: var(--space-2);
}
.term-optional { color: var(--ink-400); font-weight: 400; }
.term-field input,
.term-field textarea {
  width: 100%;
  background: var(--ink-900);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--mist);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  padding: 0.7em 0.9em;
  resize: vertical;
  caret-color: var(--gold);
}
.term-field input:focus,
.term-field textarea:focus { border-color: var(--gold); outline: none; box-shadow: 0 0 0 3px rgba(139, 233, 253, 0.15); }

@media (max-width: 40em) {
  .term-field input,
  .term-field textarea { font-size: 16px; }
}

.contact-form-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-5); }
.term-submit {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--ink-950);
  background: var(--gold);
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.7em 1.2em;
  cursor: pointer;
}
.term-submit:disabled { opacity: 0.6; cursor: progress; }
.contact-status { font-size: 0.8125rem; margin: 0; }
.contact-status[data-state="error"] { color: var(--ansi-red); }
.contact-status[data-state="loading"] { color: var(--muted); }

.contact-success { font-size: 0.875rem; line-height: 1.8; }

/* tmux line on mid-size screens: with 9 windows (8:nettsjekk) the strip
   no longer fit between ~41em and ~75em and the last windows scrolled out
   of sight behind :cmd. Tighter windows and no clock there; the session
   name goes too on the narrowest tablets. */
@media (min-width: 40.01em) and (max-width: 75em) {
  .term-tab { padding-inline: 0.4rem; }
  .tmux-clock { display: none; }
}
@media (min-width: 40.01em) and (max-width: 62em) {
  .tmux-session { display: none; }
}