/* ═══ CORRECTION LAYER · 2026-08-26 ═══════════════════════════════════════════════════════════════
   Everything below this block was written when this file was skin/jem.css and the skin identifier was
   "jem". Both changed today. The old text is KEPT, not edited — Sum's rule: "keep stale comments, not
   dead code, attach corrections to stale comments, not delete. Leaves a trail for the next intelligence
   reading or fixing or improving or reverse engineering."

   So, reading the doc below, apply these four:

   1. THE FILE is skin/alpha.css. It was skin/jem.css.
   2. THE IDENTIFIER is "alpha" — every selector keys on [data-skin="alpha"] now.
      ⚠ The DO NOT further down says "do not rename the skin identifier 'jem' — it is a contract with
      HTML." That was true and it was honoured: the contract's other end (AGENT_BARS.alpha in
      shell/workspace.js) was changed in the same commit. The rule stands; it was paid, not broken.
   3. THE ASSETS are alpha-topbar.png · alpha-topbar-vert.png · alpha-topbar.svg. Renamed in place.
   4. WHY: jem the bot left 0zweb entirely (see _bench-for-totois/) and alpha kept wearing her skin. A
      skin outlives its bot, so it takes the name of the bot that WEARS it — which is how aoladdin.css
      and muskett.css already worked. These two were the odd ones out.

   The De Stijl design, the Mondrian reasoning, and the arithmetic argument below are UNCHANGED and
   still correct. Only the names moved.
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/*
IC SHIP PASS — generated by icpass.py from the map. edit the CODE; rerun to refresh this.

══════════════════════════════════════════════════════════════════════
 PAGE 0 — TABLE OF CONTENTS  (goldfish pointers)
 jump by SEARCHING the anchor phrase — line numbers drift, names don't.
══════════════════════════════════════════════════════════════════════
  the agent bar's head wears the composition .... search: "the agent bar's head"
  CLEAN TIER: jem needs no exception. The bar ... search: "CLEAN TIER: jem needs"
══════════════════════════════════════════════════════════════════════

 FOR AI
 ───────
   **OWNS** — The visual identity and layout rules for the "jem" skin (De Stijl aesthetic:
   **Mondrian grid, primary colours, geometric sans-serif). Exports colour variables (lines
   **14–15), message styling (lines 26–27), and background images for agent bar and conversation
   **headers. Any other file applying `[data-skin="alpha"]` depends on these selectors existing and
   **these images being loadable.
   
   **TOUCH HERE**
   - Change primary colours → CSS custom properties L14–15
   - Change message border width or colour → `.msg.bot` / `.msg.u` L26–27
   - Change agent bar or conversation header background image → `background-image: url()` L31,
   - 35, 46, 59
   - Change text colour in agent bar or headers → `color:` L38, 42, 50, 62
   - Change font family → `font-family:` L22, 38, 50
   - Change border thickness or colour → `border:` / `border-bottom:` / `border-inline-start:`
   - L17, 26–27, 33, 47
   - Adjust clean-tier overrides → L58–62
   
   **TRAPS**
   - The three image files (`alpha-topbar.png`, `alpha-topbar-vert.png`, `alpha-topbar.svg`) are
   - generated by `~/Local/0z-desk/make-jem-bar.py` (line 6). Changing image names here without
   - regenerating them will silently fail to load. The `.svg` variant (line 59) is used only in
   - clean tier; both `.png` variants must exist for normal operation.
   - Hex colours are duplicated: `#12100e` appears at lines 15, 33, 36, 38, 42, 50, 60, 62.
   - Changing one without the others breaks visual consistency.
   - Line 35 uses `[data-orient="vertical"]` selector — this must match the attribute name used
   - in the HTML that applies the skin.
   - Lines 58–59 override lines 30–32 and 45–47 when `[data-tier="clean"]` is set. Both blocks
   - must be kept in sync for the clean tier to work.
   - Line 10 states "Opacity on text is banned here" — do not add `opacity:` to any text colour
   - rule.
   
   **DO NOT**
   - Do not rename the skin identifier `"jem"` — it is a contract with HTML that applies
   - `[data-skin="alpha"]`.
   - Do not move or regenerate the image files from this file; that is `make-jem-bar.py`'s job.
   - Do not add rounded corners (line 17 comment is explicit: "De Stijl has no rounded corners").
   - Do not add opacity to text colours (line 10).
   - Do not change the font stack without understanding that "geometric sans" is a design
   - requirement (line 22 comment).
   
   
   
   ---

END IC SHIP PASS
*/

/* alpha.css — DE STIJL. (was jem.css; renamed 26 Aug when jem left 0zweb and alpha kept the skin.
   A skin outlives its bot, so it takes the name of the bot that WEARS it, like aoladdin.css and muskett.css.)
   DE STIJL. Piet Mondrian, 1917: black rules, primary blocks, a warm white ground.
   Mondrian died in 1944, so this is public domain — and that is the whole joke. You cannot copy the
   logo; you can go UPSTREAM of it. The grid, the colour blocking and the flat primaries every modern
   interface runs on came from a Dutch painter fifty years before any of them. (Sum 2026-07-29.)

   The bar png is DRAWN, not generated — ~/Local/0z-desk/make-jem-bar.py emits alpha-topbar.png,
   ⚠ (26 Aug) THE RECIPE STILL WRITES THE OLD NAMES. make-jem-bar.py is outside this repo and was not
   touched; the three files it emits were renamed HERE when alpha inherited the skin. Re-run it and you
   get jem-topbar.* back beside the alpha-topbar.* this file now asks for. Rename its outputs (or the
   script) before the next regeneration, or the bar will silently fall back to no background.
   alpha-topbar-vert.png AND alpha-topbar.svg from one recipe. A Mondrian is arithmetic; a model would
   hand back wonky rules and muddy primaries. Redraw at any size by re-running that script.

   Opacity on text is banned here as everywhere — every role below is a solid hex.
   Apply via [data-skin="alpha"]. */

.convo[data-skin="alpha"] {
  --jem-red: #d62828; --jem-blue: #1d3fa8; --jem-yellow: #f2c230;
  --jem-white: #f7f5f0; --jem-black: #12100e;
  background: var(--jem-white);
  border: 4px solid var(--jem-black); border-radius: 0;   /* De Stijl has no rounded corners. none. */
}
.convo[data-skin="alpha"] .convo-screen {
  background: var(--jem-white);
  color: var(--jem-black);
  font-family: 'Futura', 'Avenir Next', 'Helvetica Neue', system-ui, sans-serif;   /* geometric sans, the movement's own */
  letter-spacing: 0.2px;
}
/* a bot line gets a red rule at its edge, a user line a blue one — colour as STRUCTURE, never decoration */
.convo[data-skin="alpha"] .msg.bot { border-inline-start: 6px solid var(--jem-red); background: var(--jem-white); color: var(--jem-black); }
.convo[data-skin="alpha"] .msg.u   { border-inline-start: 6px solid var(--jem-blue); background: var(--jem-white); color: var(--jem-black); }

/* ── the agent bar's head wears the composition ── */
.agent-bar[data-skin="alpha"] .ab-head {
  background-image: url('alpha-topbar.png');
  background-position: center; background-size: 100% 100%; background-repeat: no-repeat;
  border-bottom: 4px solid #12100e;
}
.agent-bar[data-orient="vertical"][data-skin="alpha"] .ab-head { background-image: url('alpha-topbar-vert.png'); }
.agent-bar[data-skin="alpha"] { background: #f7f5f0; border-color: #12100e; }
.agent-bar[data-skin="alpha"] .ab-name {
  color: #12100e; font-family: 'Futura', 'Avenir Next', 'Helvetica Neue', system-ui, sans-serif;
  font-weight: 800; letter-spacing: 1.5px; text-transform: lowercase;
}
.agent-bar[data-skin="alpha"] .ab-grip,
.agent-bar[data-skin="alpha"] .ab-add { color: #12100e; }
/* the ＋ CONTRAST (Sum 2026-08-16): attach.css loads AFTER this file and paints .ab-add's background
   var(--btn) — the app's dark chip — so the black glyph above sat on dark grey, on the Mondrian white.
   Give it De Stijl's own tile: white ground, black rule, black ＋ — a Mondrian cell, not a chip. */
.agent-bar[data-skin="alpha"] .ab-add { background: #f7f5f0; border: 2px solid #12100e; color: #12100e; border-radius: 0; }
.agent-bar[data-skin="alpha"] .ab-add:hover { background: #f2c230; border-color: #12100e; color: #12100e; }

/* the convo box's own top bar */
.convo[data-skin="alpha"] .convo-head {
  background: url('alpha-topbar.png') center / 100% 100% no-repeat;
  border-bottom: 4px solid #12100e;
}
.convo[data-skin="alpha"] .head-title {
  color: #12100e; font-family: 'Futura', 'Avenir Next', system-ui, sans-serif;
  font-weight: 800; letter-spacing: 1.5px;
}

/* ── CLEAN TIER: jem needs no exception. The bar is already DRAWN (make-jem-bar.py emits the svg
      alongside the png), so De Stijl survives clinical and corporate unchanged — which is the
      argument for drawing things in the first place. This block only keeps the primaries from
      being relit by the clean-tier palette. ── */
html[data-tier="clean"] .agent-bar[data-skin="alpha"] .ab-head,
html[data-tier="clean"] .convo[data-skin="alpha"] .convo-head { background-image: url('alpha-topbar.svg'); background-size: 100% 100%; }
html[data-tier="clean"] .agent-bar[data-skin="alpha"] { background: #f7f5f0; border-color: #12100e; }
html[data-tier="clean"] .agent-bar[data-skin="alpha"] .ab-name,
html[data-tier="clean"] .convo[data-skin="alpha"] .head-title { color: #12100e; }

/* ── THE CLASS FIX + THE INK (Sum 2026-08-10: "make the text itself those colors"). The rules
   above target `.msg.bot`/`.msg.u`, but the app writes `msg-bot`/`msg-u` (workspace.js) — so
   De Stijl's primaries never once landed on a line. Now the COLOUR IS THE TYPE, not the bar:
     BLACK  the bot's words        BLUE   the human in the loop
     YELLOW the injection / ESP    RED    the stream prompt + which model is answering
   ⚠ the ESP yellow is DARKENED to an ochre ink (#9a7500): #f2c230 on this cream is ~1.7:1, and
   the ESP is long text he actually reads (ADA is personal). Same hue family, readable. */
.convo[data-skin="alpha"] .msg-bot { color: var(--jem-black); border-inline-start: 6px solid var(--jem-red); background: var(--jem-white); }
.convo[data-skin="alpha"] .msg-u,
.convo[data-skin="alpha"] .msg-u * { color: var(--jem-blue); }
.convo[data-skin="alpha"] .msg-u   { border-inline-start: 6px solid var(--jem-blue); background: var(--jem-white); }
.convo[data-skin="alpha"] .msg-inj,
.convo[data-skin="alpha"] .esp-bar  { background: var(--jem-white); border-inline-start: 6px solid #9a7500; }
.convo[data-skin="alpha"] .inj-head,
.convo[data-skin="alpha"] .esp-head,
.convo[data-skin="alpha"] .inj-body,
.convo[data-skin="alpha"] .esp-body { color: #9a7500; background: var(--jem-white); border: 0; }
.convo[data-skin="alpha"] .msg-stream { color: var(--jem-red); }
.convo[data-skin="alpha"] .msg-stream:empty::before { color: var(--jem-red); }
.convo[data-skin="alpha"] .msg-note,
.convo[data-skin="alpha"] .msg-note * { color: var(--jem-red); }

/* ── THE INK, DECISIVE (Sum 2026-08-10: "make jem text black, make users blue… the text itself").
   The earlier rules lost to something heavier upstream and the bot's words stayed ghost-grey on
   cream. Colour every descendant, kill any inherited opacity, and win the cascade outright:
   BLACK the bot · BLUE the human (including the live stream) · RED which model answered ·
   OCHRE the injection/ESP. */
.convo[data-skin="alpha"] .msg-bot,
.convo[data-skin="alpha"] .msg-bot * { color: #12100e !important; opacity: 1 !important; }
.convo[data-skin="alpha"] .msg-u,
.convo[data-skin="alpha"] .msg-u *,
.convo[data-skin="alpha"] .msg-stream,
.convo[data-skin="alpha"] .msg-stream * { color: #1d3fa8 !important; opacity: 1 !important; }
.convo[data-skin="alpha"] .msg-stream:empty::before { color: #1d3fa8 !important; opacity: 1 !important; }
.convo[data-skin="alpha"] .msg-note,
.convo[data-skin="alpha"] .msg-note * { color: #d62828 !important; opacity: 1 !important; }
.convo[data-skin="alpha"] .inj-head,
.convo[data-skin="alpha"] .inj-head *,
.convo[data-skin="alpha"] .esp-head,
.convo[data-skin="alpha"] .inj-body,
.convo[data-skin="alpha"] .esp-body { color: #9a7500 !important; opacity: 1 !important; }