/* tiptap.css — the 📄 TIPTAP card. the writer's surface: printer paper on the desk.
   ported from oz4.2/mockups/rich-text-mockup.html, IC-cleaned + scoped to .p-richtext.
   the edit IS the print preview — what you see is what saves.

   IC BREAK · STYLE "no black-on-black, it's a black skin": this card is intentionally
   a LIGHT sheet inside the dark skin — the one surface that isn't black, by design.
   the document is the product; the paper has to read as paper. broken on purpose. */

.p-richtext {
  --rt-paper:#fafaf7; --rt-ph:#f1eee6; --rt-ink:#1a1a17; --rt-ink-dim:#6b6a61;
  --rt-line:#e6e2d8; --rt-accent:#7a6ef0; --rt-accent-soft:#e7e2f8;
  --rt-tab-bg:    #efece3;  /* inactive tab bg (warm off-white, slightly darker than --rt-ph) */
  --rt-save-hov:  #d8ecd8;  /* tab save-btn hover (soft green blush) */
  --rt-sandbox-hov:#efe6d8; /* tab sandbox-btn hover (warm cream) */
  --rt-trash-hov: #f2dada;  /* tab trash hover (soft pink blush) */
  --rt-armed:     #e24b4a;  /* tab trash armed (action red — destructive, not status) */
  --rt-grip:      #85837a;  /* bottom resize-bar glyph (warm dim gray on paper) */
  --rt-toolbar-bg:#f6f3ec;  /* toolbar row background (warm off-white, slightly darker than tab) */
  --rt-tag-txt:   #9a988e;  /* rt-tag text (warmer dim — between ink-dim and rt-line) */
  --rt-bq:        #4a4940;  /* blockquote text (dark warm brown — legible italic on paper) */
  --rt-code-bg:   #f0ede4;  /* inline code chip bg (warm grey — off from --rt-ph by 1 step) */
  --rt-white:     #ffffff;  /* popup/input/active-tab pure white (the one surface above --rt-paper) */
  background: var(--rt-paper);
  border: none;
  box-shadow: 0 4px 24px rgba(0,0,0,0.30), 0 1px 4px rgba(0,0,0,0.18);
}

/* the MAIN bar — the BOOK SHELF (matches the 🪶 writer agent's head; hist-topbar.png, shared with
   the historian skin — no dup). parchment serif over the shelf; jewels + STOP ride here (makeCard),
   so the status + the halt survive a collapse. the file row + toolbar live in the light subbar. */
.p-richtext .card-head {
  background: url('../skins/assets/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);
}
.p-richtext .card-head .card-icon { filter: drop-shadow(0 1px 3px rgba(0,0,0,0.85)); }
.p-richtext .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); }
.p-richtext .card-head::after { color: var(--rt-shelf-text); text-shadow: 0 1px 3px rgba(0,0,0,0.85); }   /* the ▾ chevron, parchment over the shelf */

/* the SUBBAR — rows 2 + 3, light paper controls (collapse away with the card) */
.p-richtext .card-subbar { background: var(--rt-ph); }
.p-richtext .card-body { height: 520px; }   /* room to write; the bottom bar slides it */
/* tiptap wears the book bean for the HEAD (now from skin/historian.css — fixes the old moved-asset path, matches
   the writer), but keeps its LIGHT paper body — the editor is the light sheet by design. the full dark book-frame
   around the light page is a deliberate tuning pass, not the default. */
.p-richtext[data-skin="historian"] > .card-body { background: var(--rt-paper); padding: 0; }

/* row 2 — the FILE row: name PILL · ＋ · 📂 · the TABS · status · ⚙️ gear (far right) */
.rt-filerow { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-bottom: 1px solid var(--rt-line); }

/* the name — pill 0 = FIXED title; ＋ adds subtitle pills (title : subtitle). the subtitle FLEXES
   to fill; the row only grows once a subtitle exists (.rt-pills-multi), so no gap when it's solo. */
.rt-pills { display: flex; align-items: center; gap: 5px; flex-shrink: 0; min-width: 0; }
.rt-pills-multi { flex: 1; }
.rt-title { width: 190px; flex-shrink: 0; font-size: var(--fs-ui); font-weight: 700; color: var(--rt-ink); background: var(--rt-white); border: 1px solid var(--rt-line); outline: none; padding: 5px 12px; border-radius: 999px; font-family: Georgia, 'Times New Roman', serif; }
.rt-title:focus { border-color: var(--rt-accent); box-shadow: 0 0 0 2px var(--rt-accent-soft); }
.rt-subtitle { flex: 1; min-width: 80px; font-size: var(--fs-ui); font-weight: 600; font-style: italic; color: var(--rt-ink-dim); }   /* the subtitle pill — flexes, lighter italic */

/* the icon buttons — ＋ subtitle · 📂 open · ⚙️ gear */
.rt-ic { flex-shrink: 0; width: 40px; height: 40px; padding: 0; background: none; border: 1px solid transparent; border-radius: 7px; color: var(--rt-ctrl); font-size: var(--fs-ui); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rt-ic:hover { background: var(--rt-hover); border-color: var(--rt-line); }

/* the TABS — multi-file, monaco-style. each carries its own 💾 save + 🗑 trash. */
.rt-tabs { flex: 1; min-width: 0; display: flex; align-items: center; gap: 5px; overflow-x: auto; scrollbar-width: none; padding: 0 2px; }
.rt-tabs::-webkit-scrollbar { display: none; }
.rt-tab { display: flex; align-items: center; gap: 1px; flex-shrink: 0; max-width: 200px; height: 38px; padding: 0 3px 0 11px; background: var(--rt-tab-bg); border: 1px solid var(--rt-line); border-radius: 7px; cursor: pointer; }
.rt-tab.active { background: var(--rt-white); border-color: var(--rt-accent); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.rt-tab-name { font-size: var(--fs-ui); font-weight: 600; color: var(--rt-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.rt-tab-save, .rt-tab-trash, .rt-tab-sandbox { width: 22px; height: 22px; flex-shrink: 0; padding: 0; background: none; border: none; border-radius: 5px; font-size: var(--fs-ui); line-height: 1; cursor: pointer; }
.rt-tab-save:hover { background: var(--rt-save-hov); }
.rt-tab-sandbox { background: url('assets/sandbox.png') center / 92% no-repeat; }   /* the sandbox = save to cache */
.rt-tab-sandbox:hover { background-color: var(--rt-sandbox-hov); }
.rt-tab-trash:hover { background: var(--rt-trash-hov); }
.rt-tab-trash.armed { background: var(--rt-armed); color: #fff; font-size: var(--fs-ui); font-weight: 800; }

.rt-status { font-size: var(--fs-ui); color: var(--rt-ink-dim); flex-shrink: 0; white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis; }

/* 📋 templates — a popover menu of baked-in starting docs (résumé · cover · memo · plan) */
.rt-tpl-wrap { position: relative; flex-shrink: 0; }
.rt-tpl-menu { position: absolute; top: 36px; left: 0; z-index: 30; display: none; flex-direction: column; gap: 1px; min-width: 184px; padding: 6px; background: var(--rt-white); border: 1px solid var(--rt-line); border-radius: 9px; box-shadow: 0 10px 28px rgba(0,0,0,0.2); }
.rt-tpl-menu.open { display: flex; }
.rt-tpl-item { text-align: left; padding: 8px 12px; background: none; border: none; color: var(--rt-ink); font: inherit; font-size: var(--fs-ui); cursor: pointer; border-radius: 6px; }
.rt-tpl-item:hover { background: var(--rt-ph); }
.rt-tpl-empty { color: var(--rt-ink-dim); cursor: default; }

/* the ⚙️ gear — a popover: show/hide toolbar groups + autohide the top bar */
.rt-gear-wrap { position: relative; flex-shrink: 0; }
.rt-gear-menu { position: absolute; top: 36px; right: 0; z-index: 30; display: none; flex-direction: column; gap: 1px; min-width: 184px; padding: 6px; background: var(--rt-white); border: 1px solid var(--rt-line); border-radius: 9px; box-shadow: 0 10px 28px rgba(0,0,0,0.2); }
.rt-gear-menu.open { display: flex; }
.rt-gear-row { display: flex; align-items: center; gap: 9px; padding: 6px 8px; font-size: var(--fs-ui); color: var(--rt-ink); cursor: pointer; border-radius: 6px; }
.rt-gear-row:hover { background: var(--rt-ph); }
.rt-gear-row input { cursor: pointer; }
.rt-gear-sep { margin-top: 3px; padding-top: 9px; border-top: 1px solid var(--rt-line); }

/* toolbar groups — the ⚙️ shows/hides each */
.rt-group { display: inline-flex; align-items: center; gap: 3px; }
.rt-hidden { display: none !important; }
.rt-tb svg { display: block; width: auto; height: 22px; }   /* the alignment icons — fill the bar */

/* columns — the page flows into N columns (per doc; carries into print) */
.rt-cols-btn { font-size: var(--fs-ui); }
.rt-cols-n { font-weight: 800; }
.rt-page[data-cols="2"] .ProseMirror { column-count: 2; column-gap: 2.4em; }
.rt-page[data-cols="3"] .ProseMirror { column-count: 3; column-gap: 1.8em; }

/* pickers — special symbols · emoji. a popover grid; click a glyph → insert at the cursor. */
.rt-pick { position: relative; display: inline-flex; }
.rt-pick-pop { position: absolute; top: 34px; left: 0; z-index: 30; display: none; flex-wrap: wrap; gap: 2px; width: 248px; max-height: 224px; overflow-y: auto; padding: 6px; background: var(--rt-white); border: 1px solid var(--rt-line); border-radius: 9px; box-shadow: 0 10px 28px rgba(0,0,0,0.2); }
.rt-pick-pop.open { display: flex; }
.rt-pick-item { width: 30px; height: 30px; border: none; background: none; border-radius: 6px; font-size: 16px; line-height: 1; cursor: pointer; }
.rt-pick-item:hover { background: var(--rt-ph); }

/* AUTOHIDE — the top bar (subbar) folds away while you write; hover the MAIN bar (the title row)
   to bring it back. (whole-card hover kept it always on — you're always over the card editing.) */
.p-richtext.rt-autohide .card-subbar { display: none; }
.p-richtext.rt-autohide .card-head:hover ~ .card-subbar,
.p-richtext.rt-autohide .card-subbar:hover { display: flex; }

/* the bottom resize bar — light, to match the paper */
.p-richtext .card-bottom { background: var(--rt-ph); border-top: 1px solid var(--rt-line); box-shadow: inset 0 3px 9px -3px rgba(0,0,0,0.12); }
.p-richtext .card-bottom::before { color: var(--rt-grip); }

/* toolbar */
.rt-toolbar { display: flex; align-items: center; gap: 3px; padding: 6px 10px; background: var(--rt-toolbar-bg); border-bottom: 1px solid var(--rt-line); flex-wrap: wrap; }
.rt-tb { background: none; border: 1px solid transparent; color: var(--rt-ctrl); cursor: pointer; font-size: var(--fs-ui); min-width: 40px; height: 40px; border-radius: 6px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; }
.rt-tb:hover { background: var(--rt-hover); }
.rt-tb.on { background: var(--rt-accent-soft); color: var(--rt-accent); border-color: var(--rt-accent-line); }
.rt-tb b { font-weight: 800; } .rt-tb i { font-style: italic; }
.rt-sep { width: 1px; height: 20px; background: var(--rt-line); margin: 0 5px; }
.rt-select { height: 40px; border: 1px solid var(--rt-line); background: var(--rt-white); color: var(--rt-ctrl); border-radius: 6px; font-size: var(--fs-ui); padding: 0 4px; cursor: pointer; }
.rt-color { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 7px; border-radius: 6px; cursor: pointer; color: var(--rt-ctrl); font-size: var(--fs-ui); }
.rt-color:hover { background: var(--rt-hover); }
.rt-color input[type=color] { width: 20px; height: 20px; border: 1px solid var(--rt-line); border-radius: 4px; padding: 0; background: none; cursor: pointer; }
.rt-wc { font-size: var(--fs-ui); color: var(--rt-ink-dim); }

/* the stats panel (word-count tool) — lives in the FILE ROW by the gear (never wraps); toggle via ⚙️ "word count" */
.rt-stats-grp { flex-shrink: 0; }
.rt-stats-trigger { gap: 3px; }
.rt-stats-car { font-size: 13px; color: var(--rt-ink-dim); }
.rt-stats-pop { right: 0; left: auto; min-width: 232px; }
.rt-stat-row { display: flex; justify-content: space-between; gap: 16px; padding: 4px 9px; font-size: var(--fs-ui); color: var(--rt-ink-dim); }
.rt-stat-row b { color: var(--rt-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.rt-stat-sel { background: var(--rt-accent-soft); border-radius: 5px; color: var(--rt-accent); }
.rt-stat-sel b { color: var(--rt-accent); }
.rt-stats-count { display: flex; align-items: center; gap: 7px; margin-top: 5px; padding: 7px 9px 3px; border-top: 1px solid var(--rt-line); }
.rt-count-q { flex: 1; min-width: 0; height: 26px; border: 1px solid var(--rt-line); border-radius: 6px; padding: 0 7px; font-size: var(--fs-ui); background: var(--rt-white); color: var(--rt-ink); font-family: inherit; }
.rt-count-n { font-size: var(--fs-ui); font-weight: 700; color: var(--rt-accent); min-width: 26px; text-align: center; font-variant-numeric: tabular-nums; }

/* save-as menu */
.rt-menu { position: relative; }
.rt-menu-pop { position: absolute; top: 34px; right: 0; z-index: 20; min-width: 160px; display: none; background: var(--rt-white); border: 1px solid var(--rt-line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); padding: 4px; }
.rt-menu.open .rt-menu-pop { display: block; }
.rt-menu-item { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 8px 10px; font-size: var(--fs-ui); color: var(--rt-ink); cursor: pointer; border-radius: 6px; }
.rt-menu-item:hover { background: var(--rt-ph); }
.rt-tag { font-size: var(--fs-ui); color: var(--rt-tag-txt); border: 1px solid var(--rt-line); border-radius: 4px; padding: 0 5px; }
.rt-tag.soon { color: var(--rt-accent); border-color: var(--rt-accent-line); }

/* outline popover (☰) — anchored left, scrolls, indented by heading level */
.rt-outline-pop { left: 0; right: auto; min-width: 240px; max-width: 340px; max-height: 320px; overflow-y: auto; }
.rt-outline-item { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 6px; padding: 6px 10px; font-size: var(--fs-ui); color: var(--rt-ink); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: inherit; }
.rt-outline-item:hover { background: var(--rt-ph); }
.rt-outline-item[data-lv="2"] { padding-left: 22px; font-size: 13px; }
.rt-outline-item[data-lv="3"] { padding-left: 34px; font-size: var(--fs-ui); color: var(--rt-ink-dim); }
.rt-outline-empty { padding: 8px 10px; font-size: var(--fs-ui); color: var(--rt-ink-dim); }

/* find & replace bar — sticky, floats top-right over the sheet, doesn't push the paper down */
.rt-find { position: sticky; top: 4px; z-index: 30; margin: 0 0 -46px auto; width: max-content; max-width: 100%; display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; background: var(--rt-white); border: 1px solid var(--rt-line); border-radius: 9px; box-shadow: 0 6px 20px rgba(0,0,0,0.16); padding: 6px 8px; }
.rt-find[hidden] { display: none; }
.rt-find input { height: 28px; border: 1px solid var(--rt-line); border-radius: 6px; padding: 0 8px; font-size: var(--fs-ui); background: var(--rt-white); color: var(--rt-ink); font-family: inherit; }
.rt-find .rt-find-q { width: 130px; } .rt-find .rt-find-r { width: 120px; }
.rt-find button { height: 28px; min-width: 28px; border: 1px solid transparent; background: none; border-radius: 6px; cursor: pointer; font-size: var(--fs-ui); color: var(--rt-ctrl); padding: 0 8px; }
.rt-find button:hover { background: var(--rt-hover); }
.rt-find .rt-find-count { font-size: var(--fs-ui); color: var(--rt-ink-dim); min-width: 36px; text-align: center; }

/* the page — the sheet you type on */
.rt-page { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding: 48px 76px 70px; background: var(--rt-paper); }
.rt-paper .ProseMirror { outline: none; font-family: Georgia, 'Times New Roman', serif; font-size: 18pt; line-height: 1.6; color: var(--rt-ink); min-height: 440px; }   /* (Sum 2026-07-11) new docs start at 18pt body — edit down anytime */
.rt-paper .ProseMirror h1 { font-size: 48pt; line-height: 1.15; }   /* (Sum) headings start at 48pt */
.rt-paper h1 { font-size: 30px; line-height: 1.25; margin: 0 0 0.4em; font-weight: 700; }
.rt-paper h2 { font-size: 22px; line-height: 1.3; margin: 1.2em 0 0.35em; font-weight: 700; }
.rt-paper p { margin: 0 0 0.85em; }
.rt-paper ul, .rt-paper ol { margin: 0 0 0.85em; padding-left: 1.4em; }
.rt-paper li { margin: 0.2em 0; }
.rt-paper blockquote { margin: 1em 0; padding: 0.2em 0 0.2em 1em; border-left: 3px solid var(--rt-accent-soft); color: var(--rt-bq); font-style: italic; }
.rt-paper a { color: var(--rt-accent); }
.rt-paper img { max-width: 100%; border-radius: 3px; margin: 0.4em 0; }
.rt-paper code { font-family: ui-monospace, monospace; background: var(--rt-code-bg); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }
.rt-paper mark { padding: 0 1px; border-radius: 2px; }

/* print = the pdf path: show ONLY the sheet. IC BREAK · STYLE "force is never the answer":
   !important is the conventional tool for a print medium override (a different medium,
   not a cascade bug) — and zoom must reset so the page prints 1:1. broken on purpose. */
@media print {
  body { zoom: 1 !important; height: auto !important; background: #fff !important; }
  body * { visibility: hidden !important; }
  .p-richtext .rt-page, .p-richtext .rt-page * { visibility: visible !important; }
  .p-richtext .rt-page { position: fixed; inset: 0; padding: 0.5in; overflow: visible; background: var(--rt-white); }
  @page { margin: 0.6in; }
}