/* rpc.cafe — styles
   Token contract: paper (default) + shell. prefers-color-scheme picks shell
   on dark-mode OSes; [data-theme] attribute (set by theme.js) overrides. */

/* ── tokens ─────────────────────────────────────────────────────────── */

:root {
  /* PAPER — warm cream stock, ink-red accent, structural hairlines */
  --bg: #f1ead8;
  --bg2: #ece3cd;
  --ink: #1c1612;
  --ink-soft: #6a5840;
  --accent: #a83228;
  --dim: #6a5840;
  --muted: #9b8a6e;
  --rule: #1c1612;
  --rule-soft: rgba(28, 22, 18, 0.25);
  --rule-dotted: rgba(28, 22, 18, 0.30);
  --chrome: #f1ead8;
  --chrome-ink: #1c1612;
  --chrome-active: #1c1612;
  --chrome-active-ink: #f1ead8;
  --ok: #a83228;
  --warn: #a83228;
  --caret: #1c1612;

  --serif: "Fraunces", Georgia, serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --masthead-rule: 2px;
  --page-pad-x: clamp(18px, 4vw, 36px);
  --page-pad-y: clamp(16px, 3vw, 22px);
  --body-max: 64rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* SHELL — deep roast, amber-cream ink, tmux-green is only on chrome */
    --bg: #1a130c;
    --bg2: #221913;
    --ink: #e9d9b8;
    --ink-soft: #a08260;
    --accent: #d97757;
    --dim: #8a6b4a;
    --muted: #5a4a36;
    --rule: #3a2f22;
    --rule-soft: rgba(154, 124, 84, 0.18);
    --rule-dotted: rgba(154, 124, 84, 0.35);
    --chrome: #2a4a2a;
    --chrome-ink: #cfe8cf;
    --chrome-active: #7cb87c;
    --chrome-active-ink: #0a1a0a;
    --ok: #9bc48a;
    --warn: #d9a066;
    --caret: #e9d9b8;
    --masthead-rule: 1px;
  }
}

:root[data-theme="paper"] {
  --bg: #f1ead8;
  --bg2: #ece3cd;
  --ink: #1c1612;
  --ink-soft: #6a5840;
  --accent: #a83228;
  --dim: #6a5840;
  --muted: #9b8a6e;
  --rule: #1c1612;
  --rule-soft: rgba(28, 22, 18, 0.25);
  --rule-dotted: rgba(28, 22, 18, 0.30);
  --chrome: #f1ead8;
  --chrome-ink: #1c1612;
  --chrome-active: #1c1612;
  --chrome-active-ink: #f1ead8;
  --ok: #a83228;
  --warn: #a83228;
  --caret: #1c1612;
  --masthead-rule: 2px;
}

:root[data-theme="shell"] {
  --bg: #1a130c;
  --bg2: #221913;
  --ink: #e9d9b8;
  --ink-soft: #a08260;
  --accent: #d97757;
  --dim: #8a6b4a;
  --muted: #5a4a36;
  --rule: #3a2f22;
  --rule-soft: rgba(154, 124, 84, 0.18);
  --rule-dotted: rgba(154, 124, 84, 0.35);
  --chrome: #2a4a2a;
  --chrome-ink: #cfe8cf;
  --chrome-active: #7cb87c;
  --chrome-active-ink: #0a1a0a;
  --ok: #9bc48a;
  --warn: #d9a066;
  --caret: #e9d9b8;
  --masthead-rule: 1px;
}

/* ── fonts (self-hosted, latin subset, variable woff2) ──────────────── */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Fraunces.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Fraunces-Italic.woff2") format("woff2");
}

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

/* ── reset / base ───────────────────────────────────────────────────── */

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

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-thickness: 2px;
}

button {
  font: inherit;
}

/* ── page frame ─────────────────────────────────────────────────────── */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: var(--page-pad-y) var(--page-pad-x);
  max-width: var(--body-max);
  margin: 0 auto;
  position: relative;
}

/* ── masthead ───────────────────────────────────────────────────────── */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 6px;
  border-bottom: var(--masthead-rule) solid var(--rule);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ink);
}

.masthead__crumb {
  white-space: nowrap;
}

.masthead__crumb--mid {
  color: var(--ink-soft);
}

.masthead__toggle {
  margin-left: auto;
}

/* ── title block ────────────────────────────────────────────────────── */

.title {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}

.wordmark {
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(56px, 11vw, 86px);
  line-height: 0.85;
  letter-spacing: -2.5px;
  margin: 0;
  white-space: nowrap;
}

.wordmark__dot {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.title__aside {
  flex: 1;
  padding-left: 16px;
  border-left: 2px solid var(--rule);
  min-width: 0;
}

.title__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.title__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.15;
  margin-top: 2px;
}

/* ── body — two-column man page ─────────────────────────────────────── */

.body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 6px;
  flex: 1;
}

/* single-column man-page body for sub-pages (colophon, now): one flow of
   sections rather than the hub's two columns. The shell theme already forces
   .body to one column, so this only changes the paper voice. */
.body--flow {
  grid-template-columns: 1fr;
  max-width: 64ch;
}

/* return-to-hub link at the foot of a sub-page body */
.manpage-return {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-top: 22px;
}

.manpage-return a {
  color: var(--accent);
}

/* section headers — mono uppercase with red underline */
.sec-head {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  margin-top: 14px;
  margin-bottom: 6px;
  padding-bottom: 2px;
  border-bottom: 1.5px solid var(--accent);
  white-space: nowrap;
}

/* body text inside sections */
.sec-body {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.sec-body--ink {
  color: var(--ink);
}

.sec-body .term {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}

/* SEE ALSO cross-refs */
.xref-list {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.85;
  list-style: none;
  padding: 0;
  margin: 0;
}

.xref-list a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.xref-list__sec {
  color: var(--ink);
}

.xref-list__desc {
  color: var(--ink-soft);
}

/* apps */
.apps {
  display: block;
}

/* status note above the roster — muted, mono, clearly not a heading */
.apps__note {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 10px;
}

.app {
  padding: 8px 0 10px;
  border-bottom: 1px dotted var(--rule-dotted);
}

.app:last-child {
  border-bottom: none;
}

.app__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.app__name {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
}

/* man-page section number, e.g. name(3) — mono superscript, muted.
   Matches the stub-title (n) ornament in the shell theme. */
.app__sec {
  font-family: var(--mono);
  font-size: 0.55em;
  font-weight: 400;
  color: var(--ink-soft);
  vertical-align: 0.45em;
  margin-left: 1px;
}

.app__spacer {
  flex: 1;
}

.app__ver {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-soft);
  white-space: nowrap;
}

.app__tagline {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 3px;
}

.app__links {
  font-family: var(--mono);
  font-size: 10.5px;
  margin-top: 3px;
  white-space: nowrap;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.app__link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.app__link--pending {
  color: var(--dim);
  text-decoration: none;
  cursor: default;
}

.app__link--pending::before {
  content: "↗ ";
}

.app__link::before {
  content: "↗ ";
}

/* ── stub-page body ─────────────────────────────────────────────────── */

.stub {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 60px 0;
}

.stub__title {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(40px, 8vw, 60px);
  line-height: 1;
  letter-spacing: -1px;
  margin: 0;
}

.stub__title .dot {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.stub__line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
  max-width: 36ch;
  margin: 0;
}

.stub__back {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 8px;
}

/* ── footer ─────────────────────────────────────────────────────────── */

.foot {
  margin-top: 24px;
  padding-top: 6px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  color: var(--ink);
}

.foot__mid {
  font-family: var(--serif);
  font-style: italic;
  letter-spacing: 0;
  font-size: 12px;
  color: var(--ink-soft);
  text-align: center;
  flex: 1;
}

.colophon {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--ink-soft);
  text-align: center;
}

/* ── theme toggle ───────────────────────────────────────────────────── */

/* One control, switch semantics: the whole button flips the theme no matter
   which label you hit. The two labels are indicators, not separate buttons —
   the active one is highlighted purely from :root[data-theme], so the state
   is correct on first paint (the FOUC script always sets data-theme). */
.toggle {
  display: inline-flex;
  border: 1px solid var(--rule);
  background: transparent;
  padding: 0;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.toggle__opt {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease;
}

:root[data-theme="paper"] .toggle__opt[data-opt="paper"],
:root[data-theme="shell"] .toggle__opt[data-opt="shell"] {
  background: var(--ink);
  color: var(--bg);
  font-weight: 700;
}

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

.toggle__glyph {
  margin-right: 6px;
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {

  .toggle__opt,
  * {
    transition: none !important;
  }
}

/* ── responsive ─────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .body {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .title {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .title__aside {
    border-left: none;
    padding-left: 0;
  }

  .masthead {
    flex-wrap: wrap;
    gap: 8px;
  }

  .masthead__toggle {
    margin-left: 0;
  }

  .foot {
    font-size: 9px;
  }

  .foot__mid {
    flex: 1 0 100%;
    order: 3;
  }
}

@media (max-width: 420px) {
  .wordmark {
    font-size: 52px;
    letter-spacing: -1.5px;
  }

  .app__row {
    flex-wrap: wrap;
  }
}

/* ── shell-mode voice swap ──────────────────────────────────────────────
   Renders the man-page as if it's open in less(1): mono everywhere, no red
   underlines, single column, ":" pager prompt with a blinking caret at the
   bottom. Colour swap is done by tokens above; this block does fonts,
   layout, and the pager ornament. Activates only when JS has set
   data-theme="shell" (the FOUC script ensures that on first paint). */

/* hide the editorial title block entirely — the masthead already carries
   the manpage header (NAME(SECTION) · ... · PG x/y), so the wordmark and
   "FROM THE MANUAL" tagline are paper-voice ornaments that don't belong
   in a man-page render. */
[data-theme="shell"] .title {
  display: none;
}

/* sections: drop the red underline AND the leading § (silcrow is editorial;
   real man-pages just have NAME on its own line). .sec-mark is the span
   wrapper around "§ " — keeping it in markup means paper still renders
   the silcrow ornament; shell hides it. */
[data-theme="shell"] .sec-head {
  border-bottom: none;
  padding-bottom: 0;
  margin-top: 18px;
  margin-bottom: 6px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 2.5px;
}

[data-theme="shell"] .sec-mark {
  display: none;
}

[data-theme="shell"] .sec-body {
  color: var(--ink);
}

[data-theme="shell"] .sec-body .term {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}

/* body: single column, manpage-style left indent on content under each
   section head. less(1) renders man bodies indented ~7 chars from the
   header column; we approximate with 24px. */
[data-theme="shell"] .body {
  grid-template-columns: 1fr;
  gap: 4px;
  max-width: 72ch;
  margin-top: 12px;
}

[data-theme="shell"] .sec-body,
[data-theme="shell"] .xref-list,
[data-theme="shell"] .apps {
  padding-left: 24px;
}

/* SEE ALSO: already mono; just tighten */
[data-theme="shell"] .xref-list {
  line-height: 1.7;
}

/* apps: mono-only, lowercased; serif name → mono */
[data-theme="shell"] .app__name {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  text-transform: lowercase;
}

/* stub pages: same voice swap on the centred title */
[data-theme="shell"] .stub__title {
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(32px, 6vw, 48px);
  letter-spacing: -0.5px;
}

[data-theme="shell"] .stub__title::after {
  content: "(1)";
  color: var(--ink-soft);
  font-weight: 400;
  font-size: 0.6em;
  margin-left: 4px;
  vertical-align: 0.2em;
}

[data-theme="shell"] .stub__title .dot {
  font-style: normal;
  font-weight: 700;
}

[data-theme="shell"] .stub__line {
  font-family: var(--mono);
  font-style: normal;
  font-size: 12px;
  color: var(--ink-soft);
}

/* foot → less(1) pager prompt. Hide the printed-column children; render a
   single ":" + blinking caret via pseudo-elements on the host. */
[data-theme="shell"] .foot>* {
  display: none;
}

[data-theme="shell"] .foot {
  display: block;
  text-align: left;
  border-top: 1px solid var(--rule);
  padding: 8px 0 0;
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  color: var(--ink);
}

[data-theme="shell"] .foot::before {
  content: ":";
  color: var(--accent);
  font-weight: 700;
}

[data-theme="shell"] .foot::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 13px;
  background: var(--caret);
  vertical-align: -2px;
  margin-left: 4px;
  animation: rpc-caret-blink 1.06s steps(2, end) infinite;
}

/* colophon hidden in shell — the pager prompt replaces it */
[data-theme="shell"] .colophon {
  display: none;
}

@keyframes rpc-caret-blink {
  50% {
    opacity: 0;
  }
}

/* the prompt is meant to read as an input area — make it feel clickable
   (prompt.js wires the bell to it). Whole footer line is the target. */
[data-theme="shell"] .foot {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* ── secret cursors ─────────────────────────────────────────────────────
   Set by prompt.js via [data-egg] when the Konami code or the IT Crowd
   emergency number is entered. The caret only renders in shell, so the egg
   handler drops you into shell to make the payoff visible. */
[data-egg="konami"] .foot::after {
  width: 9px;
  background: #ff2e88;
  animation: rpc-caret-blink 1.06s steps(2, end) infinite,
             rpc-egg-hue 1.6s linear infinite;
}

[data-egg="konami"] .foot::before {
  color: #ff2e88;
  animation: rpc-egg-hue 1.6s linear infinite;
}

[data-egg="itcrowd"] .foot::after {
  background: #ff2b2b;
  box-shadow: 0 0 6px rgba(255, 43, 43, 0.85);
  animation: rpc-caret-blink 0.5s steps(2, end) infinite;
}

[data-egg="itcrowd"] .foot::before {
  color: #ff2b2b;
}

@keyframes rpc-egg-hue {
  to {
    filter: hue-rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="shell"] .foot::after,
  [data-egg] .foot::after,
  [data-egg] .foot::before {
    animation: none;
    opacity: 0.85;
  }
}