/*
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="jem"]` 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 (`jem-topbar.png`, `jem-topbar-vert.png`, `jem-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="jem"]`.
   - 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
*/

/* jem.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 jem-topbar.png,
   jem-topbar-vert.png AND jem-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="jem"]. */

.convo[data-skin="jem"] {
  --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="jem"] .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="jem"] .msg.bot { border-inline-start: 6px solid var(--jem-red); background: var(--jem-white); color: var(--jem-black); }
.convo[data-skin="jem"] .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="jem"] .ab-head {
  background-image: url('jem-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="jem"] .ab-head { background-image: url('jem-topbar-vert.png'); }
.agent-bar[data-skin="jem"] { background: #f7f5f0; border-color: #12100e; }
.agent-bar[data-skin="jem"] .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="jem"] .ab-grip,
.agent-bar[data-skin="jem"] .ab-add { color: #12100e; }

/* the convo box's own top bar */
.convo[data-skin="jem"] .convo-head {
  background: url('jem-topbar.png') center / 100% 100% no-repeat;
  border-bottom: 4px solid #12100e;
}
.convo[data-skin="jem"] .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="jem"] .ab-head,
html[data-tier="clean"] .convo[data-skin="jem"] .convo-head { background-image: url('jem-topbar.svg'); background-size: 100% 100%; }
html[data-tier="clean"] .agent-bar[data-skin="jem"] { background: #f7f5f0; border-color: #12100e; }
html[data-tier="clean"] .agent-bar[data-skin="jem"] .ab-name,
html[data-tier="clean"] .convo[data-skin="jem"] .head-title { color: #12100e; }