/* ===========================================================================
   BB2G — DE-TERMINAL
   Drop-in. Load it LAST, after everything else the page already loads.

   Kristen, 2026-08-05: "I don't want my apps to have this ugly terminal. I love
   the terminal if I'm coding or showing how to code on my educational apps."

   So this takes off the COSTUME and keeps the DATA:
     removed — near-black ground, macOS traffic lights, blinking cursor, the
               shell prompt's glow, the drop shadow and the rounded corners
     kept    — the monospace face, because hashes, IDs, JSON and log lines are
               data and they have to align

   What is left is a REGISTER: ivory stock, gold hairline, a black bar of gold
   letterspaced caps for the head. Same move as bbg-going-global's ledger.

   ⚠ Do NOT add this to the educational coding apps, where the terminal IS the
     subject being taught.
   =========================================================================== */

/* ---- the panel ---------------------------------------------------------- */
[class~="terminal"], [class~="term"], [class~="console"], [class~="computer"],
[class~="term-body"], [class~="console-body"], [class~="term-inner"],
[class~="shell"], [class~="cli"], [class~="sysmap"]{
  /* border-box so the hairline this adds does not widen the panel — without
     it a full-width panel overflows by exactly 2px on a phone. */
  box-sizing:border-box !important;
  background:#fbf9f4 !important;
  color:#3d382f !important;
  border:1px solid rgba(160,112,32,.42) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  text-shadow:none !important;
}

/* Nested body/inner panels must not double the border. */
[class~="terminal"] [class~="term-body"],
[class~="terminal"] [class~="term-inner"],
[class~="term"] [class~="term-body"],
[class~="term"] [class~="term-inner"],
[class~="console"] [class~="console-body"]{
  border:0 !important;
  background:transparent !important;
}

/* ---- the head bar ------------------------------------------------------- */
/* The window chrome becomes the card's black bar with gold caps. */
[class~="terminal"] > [class~="bar"], [class~="term"] > [class~="bar"],
[class~="console"] > [class~="bar"], [class~="computer"] > [class~="bar"],
[class~="term-bar"], [class~="terminal-bar"], [class~="console-bar"],
[class~="terminal"] > header, [class~="term"] > header{
  background:#0a0a0a !important;
  color:#f0d0a0 !important;
  border:0 !important;
  border-radius:0 !important;
  font-family:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  letter-spacing:.2em !important;
  text-transform:uppercase !important;
}
/* These need TWO compound selectors, not one: the descendant-text rule further
   down is `[class~="term"] *`, which ties on specificity and would otherwise
   win on order and paint the bar's caption near-black on near-black. */
[class~="terminal"] [class~="term-bar"] *, [class~="term"] [class~="term-bar"] *,
[class~="console"] [class~="console-bar"] *,
[class~="terminal"] > [class~="bar"] *, [class~="term"] > [class~="bar"] *,
[class~="console"] > [class~="bar"] *, [class~="computer"] > [class~="bar"] *,
[class~="terminal"] > header *, [class~="term"] > header *{
  color:#f0d0a0 !important;
  background-color:transparent !important;
}

/* ---- the text inside ----------------------------------------------------
   Terminal palettes are light-on-black, so every one of those colours would be
   invisible on the ivory. Inherit by default, then hand the semantic ones a
   tone that reads on a light ground. Monospace is untouched. */
/* !important is required, not decorative: the pages set these colours with
   two-class selectors like `.term .term-line`, which outrank a plain
   `[class~="term"] *`. Without it the light-on-black palette survives onto the
   new light ground and the panel becomes unreadable. */
[class~="terminal"] *, [class~="term"] *, [class~="console"] *,
[class~="computer"] *, [class~="shell"] *, [class~="cli"] *{
  color:#3d382f !important;
  background-color:transparent !important;
  text-shadow:none !important;
}
[class~="terminal"] [class*="ok"], [class~="term"] [class*="ok"],
[class~="console"] [class*="ok"], [class~="terminal"] [class*="good"],
[class~="terminal"] [class*="green"], [class~="term"] [class*="green"],
[class~="terminal"] [class*="pass"], [class~="term"] [class*="pass"]{ color:#2f6b3c !important; }

[class~="terminal"] [class*="err"], [class~="term"] [class*="err"],
[class~="console"] [class*="err"], [class~="terminal"] [class*="fail"],
[class~="terminal"] [class*="deny"], [class~="term"] [class*="deny"],
[class~="terminal"] [class*="red"], [class~="term"] [class*="red"],
[class~="terminal"] [class*="warn"], [class~="term"] [class*="warn"]{ color:#a82818 !important; }

[class~="terminal"] [class*="dim"], [class~="term"] [class*="dim"],
[class~="console"] [class*="dim"], [class~="terminal"] [class*="muted"],
[class~="terminal"] [class*="prev"], [class~="term"] [class*="prev"],
[class~="terminal"] [class*="comment"]{ color:#6f6759 !important; }

[class~="terminal"] [class*="idx"], [class~="term"] [class*="idx"],
[class~="terminal"] [class*="key"], [class~="terminal"] [class*="label"],
[class~="terminal"] [class*="blue"], [class~="term"] [class*="blue"]{ color:#6f4d14 !important; }

/* ---- the costume -------------------------------------------------------- */
/* Blinking cursor, and any animation named like a blink. */
[class~="cursor"], [class~="caret"], [class*="blink"]{
  display:none !important;
  animation:none !important;
}
/* macOS traffic lights. Matches the .dot d-r / d-y / d-g trio and friends. */
[class~="d-r"], [class~="d-y"], [class~="d-g"],
[class~="dot-red"], [class~="dot-yellow"], [class~="dot-green"],
[class*="traffic"]{
  display:none !important;
}
/* Some pages render the lights as bare .dot children of the bar. */
[class~="term-bar"] > [class~="dot"],
[class~="terminal"] > [class~="bar"] > [class~="dot"],
[class~="term"] > [class~="bar"] > [class~="dot"],
[class~="console"] > [class~="bar"] > [class~="dot"]{ display:none !important; }

/* The shell prompt keeps its text but loses the glow that sold the illusion. */
[class~="prompt"]{ color:#6f4d14 !important; text-shadow:none !important; }

/* ---- focus stays visible ------------------------------------------------- */
[class~="terminal"] :focus-visible, [class~="term"] :focus-visible,
[class~="console"] :focus-visible{ outline:2px solid #a07020 !important; outline-offset:2px; }