/*
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 BEAN — a CARD wearing the book skin ... search: "THE BEAN — a CARD"
══════════════════════════════════════════════════════════════════════

 FOR AI
 ───────
   **OWNS** — This file is the single source of truth for the "historian" skin: a book-themed
   **visual frame applied to conversations, agent bars, and cards via the
   **`[data-skin="historian"]` attribute. It exports no names; it depends entirely on CSS custom
   **properties (`--hist-text`, `--hist-user`, `--hist-mark`, `--hist-ph`, `--rt-shelf`,
   **`--rt-shelf-text`) defined elsewhere, and on four PNG files in this folder:
   **`historian-top.png`, `hist-topbar.png`, `hist-topbar-vert.png`.
   
   **TOUCH HERE**
   - Change the book frame's window position or size → adjust `padding` L12 (`.convo-screen`) and
   - L52 (`.card-body`). Both must be tuned to match the transparent window in
   - `historian-top.png`.
   - Change the bookshelf image → replace the filename in `background-image` L24 (horizontal) and
   - L26 (vertical orientation). Line 36 and 43 also use `hist-topbar.png` for the convo and card
   - headers.
   - Change text color inside the book → edit `--hist-text` custom property (not here; defined in
   - theme file).
   - Change the shelf's bottom border color or shadow → L22, L36, L45 (all three places use
   - `--rt-shelf` and the same `box-shadow`).
   - Change user message styling (italic, prefix, color) → L14, L15.
   
   **TRAPS**
   - The `padding` values on L12 and L52 are load-bearing: they position content inside the PNG
   - window. Changing them without tuning to the actual PNG will orphan the visual frame.
   - The `box-shadow` value `inset 0 -38px 28px -20px rgba(0,0,0,0.55)` appears on L23, L36, L44
   - (three places). If you change it, change all three or the shelf will look inconsistent
   - across agent-bar, convo-head, and card-head.
   - The PNG filenames (`historian-top.png`, `hist-topbar.png`, `hist-topbar-vert.png`) are
   - hardcoded. If you rename the files, you must update all references: L5, L24, L26, L36, L43,
   - L51.
   - Line 26 uses `[data-orient="vertical"]` to swap the topbar image. This selector is
   - load-bearing; removing it will break the vertical layout.
   
   **DO NOT**
   - Do not rename `[data-skin="historian"]` or any of the custom property names (`--hist-*`,
   - `--rt-shelf*`) here; they are contracts with other files.
   - Do not move or edit the PNG files themselves; that belongs in the asset folder.
   - Do not add new skins or modify the structure of `.convo`, `.agent-bar`, or `.card` elements;
   - that belongs in the HTML/template layer.
   - Do not change font families without checking that Georgia and serif fallbacks are available
   - in the theme.
   
   
   
   ---

END IC SHIP PASS
*/

/* historian.css — an OPEN BOOK. the frame PNG bezels a dark screen; serif ink within. historian-top.png is
   the book frame (dark bezel, transparent center window) on .convo; messages inset by padding to sit INSIDE
   the window. the agent-bar head wears the book cover. (pngs live right here — same folder.) */
.convo[data-skin="historian"] {
  background: #0a0908 url('historian-top.png') center / 100% 100% no-repeat;
  border: none; border-radius: 0; padding: 0;
}
.convo[data-skin="historian"] .convo-screen {
  background: transparent;
  font-family: 'Georgia', 'Times New Roman', serif;
  color: var(--hist-text); line-height: 1.7;
  padding: 13% 12% 8%;                 /* inset into the book-frame window — tune to the PNG */
}
.convo[data-skin="historian"] .msg-u   { color: var(--hist-user); font-style: italic; }
.convo[data-skin="historian"] .msg-u::before { content: '— '; color: var(--hist-mark); }
.convo[data-skin="historian"] .msg-bot { color: var(--hist-text); }
.convo[data-skin="historian"] .msg-stream:empty::before { color: var(--hist-ph); }

/* the agent-bar head wears the bookshelf — a wide panorama, orientation-aware (vertical rail gets the tall art) */
.agent-bar[data-skin="historian"] .ab-head {
  background-position: center; background-size: cover; background-repeat: no-repeat;
  border-bottom: 2px solid var(--rt-shelf);
  box-shadow: inset 0 -38px 28px -20px rgba(0,0,0,0.58);
  background-image: url('hist-topbar.png');
}
.agent-bar[data-orient="vertical"][data-skin="historian"] .ab-head { background-image: url('hist-topbar-vert.png'); }
.agent-bar[data-skin="historian"] { background: #0e0c0a; border-color: var(--rt-shelf); }
.agent-bar[data-skin="historian"] .ab-name {
  color: var(--rt-shelf-text); font-family: 'Georgia', 'Times New Roman', serif; letter-spacing: 0.5px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
.agent-bar[data-skin="historian"] .ab-grip,
.agent-bar[data-skin="historian"] .ab-add { color: var(--rt-shelf-text); text-shadow: 0 1px 4px rgba(0,0,0,0.9); }

/* the convo box's own top bar */
.convo[data-skin="historian"] .convo-head { background: url('hist-topbar.png') center / cover no-repeat; box-shadow: inset 0 -38px 28px -20px rgba(0,0,0,0.55); border-bottom: 2px solid var(--rt-shelf); }
.convo[data-skin="historian"] .head-title { color: var(--rt-shelf-text); font-family: 'Georgia', serif; text-shadow: 0 1px 4px rgba(0,0,0,0.9); }

/* ── THE BEAN — a CARD wearing the book skin (makeCard wear:'historian' → [data-skin] on the card).
      card-head = the bookshelf (same shelf the agent bar wears); card-body = the book frame, content inset
      into the window. so learn + tiptap read as the writer/tutor's open book. ── */
.card[data-skin="historian"] > .card-head {
  background: url('hist-topbar.png') center / cover no-repeat;
  box-shadow: inset 0 -38px 28px -20px rgba(0,0,0,0.55);
  border-bottom: 2px solid var(--rt-shelf);
}
.card[data-skin="historian"] > .card-head .card-icon { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.85)); }
.card[data-skin="historian"] > .card-head .card-title { color: var(--rt-shelf-text); font-family: 'Georgia', 'Times New Roman', serif; letter-spacing: 1px; text-shadow: 0 1px 4px rgba(0,0,0,0.9); }
.card[data-skin="historian"] > .card-head::after { color: var(--rt-shelf-text); text-shadow: 0 1px 3px rgba(0,0,0,0.85); }
.card[data-skin="historian"] > .card-body {
  background: #0a0908 url('historian-top.png') center / 100% 100% no-repeat;
  /* inset the content into the book-frame window. (Sum 2026-08-17: "needs to shift right")
     ⭐ MEASURED, not guessed — historian-top.png is 256×174 and its transparent window is
     left 18px · right 12px · top 8px · bottom 9px. THE ART IS ASYMMETRIC BY 6px: the window sits
     right of centre, so any symmetric padding lands the content left of the opening no matter what
     you pick. That is why this looked "shifted left" and why nudging both sides evenly never fixed it.
     % of the box, and the background is `100% 100%`, so these map 1:1 onto the art. */
  padding: 4.6% 3.92% 5.17% 7.8%;   /* Sum's dial: left 7.8% (0.77% inside the window edge for
                                        breathing room); right dropped by the same 0.77% so the pair
                                        still sums to 11.72% and the content box keeps its width. */
}