/* ══════════════════════════════════════════════════════════════════════════
   codex-skin.css — THE GREYSCALE SKIN. Loads LAST, after openai-scale.css.

   The owner's reference is the ChatGPT and Codex product surface: near white,
   neutral grey, almost no chroma, soft large radii, hairline borders, one
   near-black accent. A census of the live page found 86 colour tokens, every
   one of them warm: --bg #0c0a08, --ink #f8f4f0, --accent #ff7a1a, plus whole
   gold, mint, jade and rose families.

   This file re-points those tokens and restyles no component. It edits no
   existing stylesheet, and instrument.css is untouched.

   Reverting is deleting one link line. Nothing else knows this file exists.
   ══════════════════════════════════════════════════════════════════════════ */

:root, :root:root, :root:root:root {
  /* ── ground and surfaces ─────────────────────────────────────────────── */
  --bg:          #ffffff;
  --s1:          #f9f9f9;
  --s2:          #f0f0f0;
  --s-0:         #ffffff;
  --s-1:         #f9f9f9;
  --s-2:         #f0f0f0;
  --s-3:         #ececec;
  --s-4:         #e5e5e5;
  --panel:       #f9f9f9;
  --rail:        #f9f9f9;
  --pop:         #ffffff;
  --glass:       rgba(255, 255, 255, .86);
  --glass-solid: #ffffff;
  --glass-edge:  rgba(13, 13, 13, .10);
  --glass-line:  rgba(13, 13, 13, .06);

  /* ── ink ─────────────────────────────────────────────────────────────── */
  --ink:   #0d0d0d;
  --ink2:  #5d5d5d;
  --ink3:  #8f8f8f;
  --empty: #8f8f8f;
  --v1:    #0d0d0d;
  --v2:    #5d5d5d;
  --v3:    #8f8f8f;
  --v4:    #b4b4b4;
  --v5:    #d9d9d9;

  /* ── lines. Hairlines, not walls. The reference uses one weight. ─────── */
  --line:        #e5e5e5;
  --line2:       #d9d9d9;
  --line-2:      #e5e5e5;
  --line-strong: #c9c9c9;
  --edge-1:      #e5e5e5;
  --edge-2:      #d9d9d9;

  /* ── accent. The reference does not use a brand hue for emphasis, it uses
        near black. One accent, used sparingly. ──────────────────────────── */
  --accent:     #0d0d0d;
  --accent-ink: #0d0d0d;
  --brand:      #0d0d0d;
  --brand-fill: #0d0d0d;
  --on-brand:   #ffffff;
  --focus:      #0d0d0d;
  --mint:       #0d0d0d;
  --mint2:      #2f2f2f;
  --live:       #2b7a4b;
  --live2:      #2b7a4b;

  /* ── semantics. Muted, not saturated. ────────────────────────────────── */
  --pos: #2b7a4b;  --good: #2b7a4b;  --good-ink: #2b7a4b;
  --neg: #b42318;  --bad:  #b42318;
  --mid: #8f8f8f;  --warn: #8f8f8f;  --warn-ink: #8f8f8f;

  /* ── washes ──────────────────────────────────────────────────────────── */
  --hover-wash: rgba(13, 13, 13, .045);
  --flash:      rgba(13, 13, 13, .07);

  /* ── the quantile ramp, greyscale light to dark ──────────────────────── */
  --q1:#f7f7f7; --q2:#ededed; --q3:#dcdcdc; --q4:#bcbcbc; --q5:#8f8f8f;

  /* ── category tints, neutral ─────────────────────────────────────────── */
  --cat-crypto: rgba(13,13,13,.10); --cat-equity: rgba(13,13,13,.08);
  --cat-etf:    rgba(13,13,13,.06); --cat-index:  rgba(13,13,13,.045);
  --cat-gold:   rgba(13,13,13,.03); --cat-preipo: rgba(13,13,13,.02);

  /* ── the four named colour families, all neutralised except their ink ── */
  --gold-txt:#5d5d5d; --gold-dim:#8f8f8f;
  --gold-line:rgba(13,13,13,.18); --gold-fill:rgba(13,13,13,.06); --gold-wash:rgba(13,13,13,.03);
  --mint-txt:#0d0d0d; --mint-dim2:#5d5d5d;
  --mint-line:rgba(13,13,13,.22); --mint-fill:rgba(13,13,13,.07); --mint-wash:rgba(13,13,13,.035);
  --jade-txt:#2b7a4b; --jade-dim:#3f8a5d;
  --jade-line:rgba(43,122,75,.30); --jade-fill:rgba(43,122,75,.09); --jade-wash:rgba(43,122,75,.04);
  --rose-txt:#b42318; --rose-dim:#c4453b;
  --rose-line:rgba(180,35,24,.28); --rose-fill:rgba(180,35,24,.08); --rose-wash:rgba(180,35,24,.035);

  /* ── the paper ink ramp, inverted for a white ground ─────────────────── */
  --pp-ink-construction: rgba(13,13,13,.055);
  --pp-ink-drawn:        rgba(13,13,13,.085);
  --pp-ink-margin:       rgba(13,13,13,.130);
  --pp-ink-lead:         rgba(13,13,13,.300);
  --pp-ink-figure:       rgba(13,13,13,.460);
}

/* The body ground, stated explicitly because paper.css builds a material on it
   and instrument.css sets a colour-scheme that drives form controls. */
:root:root body { background: var(--bg); color: var(--ink); }
:root { color-scheme: light; }

/* Soft corners and hairline borders, the two geometric signatures of the
   reference surface. openai-scale.css already moved the radius tokens; this
   removes the heavy panel borders that read as a terminal on a white ground. */
:root:root body .sc-c,
:root:root body .op-c,
:root:root body .sh-pro,
:root:root body .mn-card { border-color: var(--line); box-shadow: none; }

/* The decorative diagonal texture reads as noise on white. */
:root:root body .paper-grain,
:root:root body .pp-grain { opacity: .35; }

/* ── tap-target repair ───────────────────────────────────────────────────
   oai-c.css gives each rail item a 44px hit area with an absolute ::after,
   which is the right technique: it keeps nav.rail at 37px so the measured
   CLS reservation does not regress. But the pseudo-element picked up a paint
   and rendered as a solid 44px slab across the phone nav. Measured at 390:
   a.rl-item::after, background rgb(13,13,13), height 44px, spanning the bar.
   A hit area is geometry, never ink. */
@media (max-width: 899px) {
  :root:root:root body nav.rail .rl-item::after,
  :root:root:root body nav.rail a::after {
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* ── the NEW badge ───────────────────────────────────────────────────────
   nav.css:159 sets `background: var(--accent)` with `color: var(--bg)`.
   That was orange-on-near-black and read as a small tag. With the accent
   re-pointed to #0d0d0d and the ground to #ffffff it inverted into a solid
   black slab next to "Vaults", which is the heaviest object in the nav and
   the least important. The reference surface draws this as a quiet chip. */
/* REVERTED 2026-09-23 to match the Figma target (frame 405:17), which draws
   this as a solid black pill with white text. Sampled from the design PNG at
   the badge centre. My earlier grey chip was a judgement call the design
   overrules. */
:root:root:root body .rl-new {
  background: #0d0d0d !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  letter-spacing: .06em !important;
  border-radius: 5px !important;
}