/* =====================================================================
   aped — design system v3: CLEAN.

   Warm dark taupe ground, one sand accent (#D8AC70), no glow, no bloom,
   crisp borders, quiet depth. The register: an application,
   not an art piece.

   The old amber/oxblood theme is gone. Variable NAMES keep the --amber
   aliases so every page keeps working; their VALUES are the accent.
   ===================================================================== */

:root{
  /* elevation stack: inset top highlight, ambient, contact. no glow. */
  --elev-1: inset 0 1px 0 rgba(255,242,228,.035), 0 1px 2px rgba(0,0,0,.28);
  --elev-2: inset 0 1px 0 rgba(255,242,228,.04), 0 2px 6px rgba(0,0,0,.30), 0 10px 24px rgba(0,0,0,.22);
  --elev-3: inset 0 1px 0 rgba(255,242,228,.05), 0 2px 8px rgba(0,0,0,.34), 0 28px 68px rgba(0,0,0,.42);
  --ease: cubic-bezier(.22,.68,.32,1);
  --ease-out: cubic-bezier(.16,.84,.44,1);

  /* ape colors: warm taupe ground, sand accent. not the reference's mint. */
  --bg:        #262120;        /* page ground */
  --win:       #2E2925;        /* window body */
  --panel:     #2A2521;        /* cards / sheets */
  --panel-2:   #25201C;        /* wells, inner surfaces */
  --line:      #3E3730;        /* borders */
  --line-hi:   #4D443B;

  --ink:       #E2DAD0;
  --ink-dim:   #B5AA9D;
  /* CONTRAST, measured not guessed. The old pair computed 2.24:1
     (--steel-dim on --win) and 4.03:1 (--steel), and --steel-dim is not
     decoration: it paints every field label under every figure, and the
     status line that says whether the bot is running. These two are the
     same hue family lifted to 4.5:1 and 5.4:1 minimum across all four
     grounds, keeping four distinct rungs at roughly 4.5 / 5.4 / 7 / 11. */
  --steel:     #A89C8E;
  --steel-dim: #9A8F80;

  --accent:     #D8AC70;       /* the one lit thing: light brown / sand */
  --accent-hi:  #EAC791;
  --accent-dim: #8B6C42;
  --clay:       #C97460;       /* errors, kept soft */

  /* THE ONE GREEN ON THE SITE, and it is spent deliberately. It marks a buy
     landing on the chart and nothing else, because green-means-buy is the one
     convention every trader already reads without a legend. Using it anywhere
     else would cost it that meaning, so it stays reserved for that marker. */
  --buy:        #63C97D;

  /* aliases so existing pages keep working */
  --amber:     var(--accent);
  --amber-hi:  var(--accent-hi);
  --amber-dim: var(--accent-dim);

  --mono: "Red Hat Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* glow is retired. pages that reference it get nothing. */
  --glow-amber: none;
  --bloom: none;
  --bloom-soft: none;
}

*{ box-sizing:border-box }
html,body{ margin:0; min-height:100% }
body{
  background:var(--bg);
  color:var(--ink-dim);
  font:13px/1.8 var(--mono);
  -webkit-font-smoothing:antialiased;
}

html{ scrollbar-width:thin; scrollbar-color:var(--line-hi) var(--bg) }
body::-webkit-scrollbar{ width:10px }
body::-webkit-scrollbar-thumb{ background:var(--line-hi); border-radius:5px }
body::-webkit-scrollbar-track{ background:var(--bg) }

a{ color:var(--accent); text-decoration:none }
a:hover{ color:var(--accent-hi) }
::selection{ background:rgba(216,172,112,.22); color:var(--ink) }

/* the scan overlay is retired with the phosphor look; pages that still
   include <div class="scan"> get nothing. */

/* ------------------------------------------------ the tty inner pages.
   they keep their terminal grammar, recolored quiet: taupe sheet,
   sand accents, no glow. */
.screen{
  max-width:900px; margin:26px auto;
  padding:clamp(18px,4vw,40px) clamp(14px,3.4vw,36px) 70px;
  background:var(--win); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.35), 0 3px 12px rgba(0,0,0,.25);
  overflow-wrap:break-word;
}
.screen b{ color:var(--ink); font-weight:500 }
.lit{ color:var(--accent) }
.dim{ color:var(--steel-dim) }
.stl{ color:var(--steel) }
.err{ color:var(--clay) }

.tl{ white-space:pre-wrap; min-height:1.2em }
.gap{ height:1.05em }
.cmd .pr{ color:var(--steel-dim) }
.cmd .cx{ color:var(--ink) }

.dot{ display:inline-block; transform:translateY(-.06em) }
.dot.run{ color:var(--accent) }
.dot.wait{ color:var(--steel) }
.dot.dead{ color:var(--clay) }
.dot.blink{ animation:dotblink .5s steps(2,jump-none) 1 }
@keyframes dotblink{ 0%{ color:var(--accent-hi) } }

.statgrid{ display:flex; flex-wrap:wrap; gap:8px 54px; padding:10px 0 4px }
.stat .sl{ font-size:10px; letter-spacing:.2em; color:var(--steel-dim) }
.stat .sn{ font-size:clamp(24px,4.2vw,40px); line-height:1.25; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; color:var(--ink) }
.stat .sn.lit{ color:var(--accent) }
.stat .ss{ font-size:10px; color:var(--steel-dim) }

.jl{ white-space:pre-wrap; word-break:break-word }
.jl .ts{ color:var(--steel-dim) }
.jl .src{ color:var(--steel) }
.jl .msg{ color:var(--ink-dim) }
.jl .msg b{ color:var(--ink); font-weight:500 }
.jl.jerr .msg{ color:var(--clay) }
.jl.hot{ animation:jhot 2.2s ease-out 1 }
@keyframes jhot{ 0%{ background:rgba(216,172,112,.08) } 100%{ background:transparent } }

.cursor{ display:inline-block; width:.6em; height:1.15em; vertical-align:-.2em;
  background:var(--accent); animation:curblink 1.06s steps(1) infinite }
@keyframes curblink{ 50%{ opacity:0 } }

.promptline{ display:block; cursor:text }
.promptline .pr{ color:var(--steel-dim) }
.promptline .mirror{ color:var(--ink) }
.promptline input{ position:absolute; opacity:0; width:1px; height:1px; border:0; padding:0 }
.hintrow{ padding-top:14px; font-size:11px; color:var(--steel-dim); line-height:2 }
.hintrow a{ color:var(--steel) }
.hintrow a:hover{ color:var(--accent) }
.hintrow .sep{ padding:0 7px; color:var(--steel-dim) }

.copyable{ cursor:pointer; border-bottom:1px dashed var(--steel-dim) }
.copyable:hover{ color:var(--accent-hi); border-color:var(--accent-dim) }

/* ------------------------------------------------ the typeset man page */
.pager{ max-width:780px; margin:26px auto; padding:6px clamp(16px,3.4vw,44px) 50px;
  background:var(--win); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 24px 60px rgba(0,0,0,.35), 0 3px 12px rgba(0,0,0,.25) }
.pager .ph{ display:flex; justify-content:space-between; color:var(--steel-dim);
  font-size:11px; padding:24px 0 28px; font-family:var(--mono) }
.pager .prose{ font-family:var(--serif); font-size:16.5px; line-height:1.75; color:var(--ink) }
.pager .prose p{ margin:0 0 1em }
.pager h2{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; font-weight:700;
  color:var(--ink); margin:2.1em 0 .7em; text-transform:uppercase }
.pager h2:first-of-type{ margin-top:.4em }
.pager .indent{ margin-left:26px }
.pager code, .pager .m{ font-family:var(--mono); font-size:.88em; color:var(--accent) }
.pager .opt{ margin:0 0 1em 26px }
.pager .opt dt{ font-family:var(--mono); font-size:13px; color:var(--ink); font-weight:500 }
.pager .opt dd{ margin:2px 0 14px 26px; font-family:var(--serif) }
.pager .end{ color:var(--steel-dim); font-size:11px; font-family:var(--mono); padding:30px 0 10px }
@media (max-width:640px){ .pager .indent, .pager .opt{ margin-left:10px } .pager .opt dd{ margin-left:12px } }

.bootin{ opacity:0; animation:bootin .3s ease-out forwards; animation-delay:var(--bd,0ms) }
@keyframes bootin{ to{ opacity:1 } }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important }
  .bootin{ opacity:1 }
}