/* ==================================================================
   Plutonium Browser — base

   Direction: terminal-raw. Monospace throughout, no rounded corners,
   visible hairlines, structure you can see. The accent stays purple —
   terminal green is the one cliché this project has avoided from the
   start, and it isn't starting now.

   The default typeface is the visitor's own monospace. A site for
   people who live in a terminal should render in the face they already
   read all day. JetBrains Mono is an optional drop-in; see fonts/.
   ================================================================== */

@font-face {
  font-family: "Plutonium Mono";
  src: url("../fonts/JetBrainsMono-Variable.woff2") format("woff2-variations");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --bg:      #0a0a0b;
  --panel:   #0f0f11;
  --raised:  #16161a;
  --line:    #26262b;
  --line-lo: #1a1a1e;

  --text:    #e8e8ea;
  --dim:     #8b8b93;
  --faint:   #5a5a62;

  --accent:  #9d7cff;
  --accent-lo: #4b3a80;
  --accent-bg: #16101f;
  --on-accent: #0a0a0b;

  --ok:      #7fd0a8;
  --warn:    #e0b062;
  --bad:     #e08585;

  --mono: "Plutonium Mono", ui-monospace, "Cascadia Mono", "Cascadia Code",
          "JetBrains Mono", "SF Mono", "DejaVu Sans Mono", Consolas, monospace;

  --page:  1180px;
  --text-w: 74ch;
  --bar:   30px;   /* height of the fixed status strip */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  min-height: 100vh;
  padding-bottom: var(--bar);
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-variant-ligatures: none;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }

/* --------------------------- typography -------------------------- */

h1, h2, h3, h4 { font-weight: 700; line-height: 1.05; }

h1 {
  font-size: clamp(2.1rem, 6.4vw, 4.6rem);
  letter-spacing: -.055em;
  text-transform: uppercase;
}

h2 {
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  letter-spacing: -.04em;
  text-transform: uppercase;
}

h3 { font-size: 1rem; letter-spacing: -.01em; }

p { color: var(--dim); }

.lede { max-width: var(--text-w); color: var(--dim); font-size: 1rem; }

/* A shell prompt is how every section announces itself. It is not
   decoration: the command names what the section contains. */
.cmd {
  display: block;
  margin-bottom: 1.4rem;
  color: var(--faint);
  font-size: .8rem;
  letter-spacing: .02em;
}

.cmd::before { content: "$ "; color: var(--accent); }

.label {
  color: var(--faint);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

code {
  padding: .08em .34em;
  background: var(--raised);
  color: #cfcfd6;
  font-size: .92em;
}

kbd {
  display: inline-block;
  padding: .1em .42em;
  border: 1px solid var(--line);
  background: var(--raised);
  color: #cfcfd6;
  font-size: .8em;
  white-space: nowrap;
}

/* ----------------------------- layout ---------------------------- */

.wrap { width: min(var(--page), 100% - 2rem); margin-inline: auto; }

.section {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
  border-top: 1px solid var(--line);
}

.section--flush { border-top: 0; }

.rule { height: 1px; border: 0; background: var(--line); }

/* Nothing on this site is rounded. */
.btn, .card, .panel, input, textarea, select, pre, table, .term { border-radius: 0; }

/* --------------------------- status strip ------------------------ */
/* Fixed to the bottom like a tmux status line. Carries live facts —
   version, detected platform, licence — not slogans.                 */

.status {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  height: var(--bar);
  padding: 0 .9rem;
  border-top: 1px solid var(--line);
  background: var(--panel);
  color: var(--faint);
  font-size: .72rem;
  letter-spacing: .04em;
  overflow: hidden;
  white-space: nowrap;
}

.status b {
  padding: 0 .55rem;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  align-self: stretch;
  display: flex;
  align-items: center;
  margin-right: .9rem;
}

.status span + span::before {
  content: "·";
  margin: 0 .6rem;
  color: var(--line);
}

.status .grow { flex: 1 1 auto; }

/* -------------------------- accessibility ------------------------ */

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .7rem 1rem; background: var(--accent); color: var(--on-accent);
  font-weight: 700;
}
.skip:focus { left: .5rem; top: .5rem; }

.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;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}