/* Rich text bodies, floating format toolbar, fonts, ornaments. Card paper styles live in richtext-styles.css. */
@import url("/css/richtext-styles.css");

:root, .rt-surface {
  --rt-gold: var(--gold, #c9a227);
  --rt-crimson: var(--danger, #b3263a);
  --rt-forest: var(--ok, #2f7d4f);
  --rt-sapphire: #2a62c9;
  --rt-violet: #8b5cf6;
  --rt-black: #1b1410;
  --rt-parchment: var(--parchment, #f1e8cf);
  --rt-silver: #b9c0c9;
  --rt-hl1: rgba(240, 208, 96, 0.38);
  --rt-hl2: rgba(232, 120, 140, 0.34);
  --rt-hl3: rgba(110, 190, 130, 0.34);
  --rt-hl4: rgba(120, 165, 235, 0.34);
}

/* Fonts: spans set family directly, surfaces also publish --rt-font for the editor default. */
.ff-cinzel { --rt-font: 'Cinzel', serif; font-family: var(--rt-font); }
.ff-uncial { --rt-font: 'Uncial Antiqua', serif; font-family: var(--rt-font); }
.ff-fell { --rt-font: 'IM Fell English', serif; font-family: var(--rt-font); }
.ff-pirata { --rt-font: 'Pirata One', cursive; font-family: var(--rt-font); }
.ff-medieval { --rt-font: 'MedievalSharp', cursive; font-family: var(--rt-font); }
.ff-vibes { --rt-font: 'Great Vibes', cursive; font-family: var(--rt-font); }
.ff-caveat { --rt-font: 'Caveat', cursive; font-family: var(--rt-font); }
.ff-notojp { --rt-font: 'Noto Serif JP', serif; font-family: var(--rt-font); }
.ff-inter { --rt-font: 'Inter', sans-serif; font-family: var(--rt-font); }

.rt-editor { position: relative; outline: none; overflow-wrap: anywhere; min-height: 60px; cursor: text; }
.rt-editor.ed.body { font-family: var(--rt-font, var(--font-body)); }
.rt-editor.is-empty::before { content: attr(data-placeholder); color: var(--ink-3, #7a735c); pointer-events: none; }
.rt-editor p, .rt-editor div { margin: 0 0 0.55em; }
.rt-editor > :last-child { margin-bottom: 0; }
.rt-editor h3 { font-family: var(--font-display, 'Cinzel', serif); font-size: 1.4em; margin: 0.3em 0 0.35em; color: var(--rt-heading, var(--accent-ink, var(--rt-gold))); }
.rt-editor h4 { font-family: var(--font-display, 'Cinzel', serif); font-size: 1.12em; margin: 0.25em 0 0.3em; letter-spacing: 0.04em; color: var(--rt-heading, var(--accent-ink, var(--rt-gold))); opacity: 0.9; }
.rt-editor blockquote { margin: 0.4em 0 0.6em; padding: 0.15em 0.9em; border-left: 3px solid var(--rt-gold); font-style: italic; background: color-mix(in srgb, var(--rt-gold) 8%, transparent); border-radius: 0 6px 6px 0; }
.rt-editor ul, .rt-editor ol { margin: 0.2em 0 0.6em; padding-left: 1.5em; }
.rt-editor li { margin: 0.1em 0; }
.rt-editor li::marker { color: var(--rt-gold); }
.rt-center { text-align: center; }
.sz-sm { font-size: 0.82em; }
.sz-lg { font-size: 1.25em; }
.sz-xl { font-size: 1.75em; line-height: 1.15; }
.sz-title { font-size: 2.3em; line-height: 1.1; letter-spacing: 0.02em; }
.rt-editor span[style*="background-color"] { border-radius: 3px; padding: 0 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.rt-editor .dropcap::first-letter {
  float: left; font-family: 'Cinzel', 'Uncial Antiqua', serif; font-weight: 700; font-size: 3.1em;
  line-height: 0.82; padding: 0.07em 0.1em 0 0; color: var(--rt-dc-color, var(--accent-ink, var(--rt-gold)));
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25), 0 0 12px color-mix(in srgb, var(--rt-gold) 35%, transparent);
}
.rt-editor.ff-uncial .dropcap::first-letter, .rt-editor .ff-uncial.dropcap::first-letter { font-family: 'Uncial Antiqua', serif; font-weight: 400; }

/* Ornamental dividers */
.rt-editor hr.orn { border: 0; height: auto; margin: 0.7em 0; background: none; text-align: center; color: var(--rt-gold); overflow: visible; }
.rt-editor hr.orn::after { display: block; font-size: 1.5em; line-height: 1; letter-spacing: 0; }
.rt-editor hr.orn-fleuron::after { content: "\2766"; }
.rt-editor hr.orn-fleur::after { content: "\269C"; }
.rt-editor hr.orn-cross::after { content: "\2720"; }
.rt-editor hr.orn-diamond { position: relative; height: 14px; background: linear-gradient(90deg, transparent, currentColor 40%, currentColor 60%, transparent) center / 100% 1px no-repeat; }
.rt-editor hr.orn-diamond::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }

/* Floating toolbar */
.rt-toolbar {
  position: fixed; z-index: 10000; display: flex; flex-direction: column; align-items: stretch; gap: 6px;
  width: max-content; max-width: min(460px, calc(100vw - 16px)); padding: 7px 8px; border-radius: 10px;
  background: var(--rt-bar-bg, #171d21); color: var(--ink-0, #f1e8cf); font: 500 12px/1 var(--font-ui, 'Inter', system-ui, sans-serif);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.16)); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  user-select: none; -webkit-user-select: none;
}
.rt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.rt-row + .rt-row { padding-top: 6px; border-top: 1px solid var(--glass-border, rgba(255, 255, 255, 0.12)); }
.rt-toolbar.is-caret .rt-row-color, .rt-toolbar.is-caret .rt-drop { display: none; }
.rt-toolbar.is-caret .rt-row-type { padding: 0; border: 0; }
.rt-toolbar[hidden], .rt-panel[hidden] { display: none; }
.rt-group { display: flex; align-items: center; gap: 2px; }
.rt-btn { min-width: 26px; height: 26px; padding: 0 6px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.rt-btn:hover { background: rgba(255, 255, 255, 0.1); }
.rt-btn.is-on { background: rgba(var(--accent-rgb, 201, 162, 39), 0.3); border-color: rgba(var(--accent-rgb, 201, 162, 39), 0.7); }
.rt-btn:focus-visible { outline: 2px solid var(--rt-gold); outline-offset: 1px; }
.rt-btn-wide { padding: 0 9px; }
.rt-mark-bold { font-weight: 800; } .rt-mark-italic { font-style: italic; font-family: Georgia, serif; }
.rt-mark-underline { text-decoration: underline; } .rt-mark-strike { text-decoration: line-through; }
.rt-block-heading { font-weight: 800; } .rt-block-subheading { font-size: 11px; font-weight: 700; }
.rt-dropcap-btn { font-family: 'Cinzel', serif; font-weight: 700; font-size: 15px; color: var(--rt-gold); }
.rt-swatch { min-width: 0; width: 18px; height: 18px; padding: 0; margin: 0 1px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); }
.rt-swatch-none { background: transparent; font-size: 12px; line-height: 1; color: var(--ink-2, #a89f80); }
.rt-pop { position: relative; }
.rt-panel {
  position: absolute; left: 0; top: calc(100% + 8px); z-index: 1; display: flex; flex-direction: column; gap: 2px;
  min-width: 190px; max-height: 260px; overflow-y: auto; padding: 5px; border-radius: 10px;
  background: var(--rt-bar-bg, #171d21); border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.16)); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}
.rt-toolbar.panel-up .rt-panel { top: auto; bottom: calc(100% + 8px); }
.rt-panel-orn { flex-direction: row; min-width: 0; }
.rt-drop-trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; border-color: var(--glass-border, rgba(255, 255, 255, 0.2)); background: rgba(255, 255, 255, 0.05); }
.rt-drop-font .rt-drop-trigger { width: 138px; } .rt-drop-size .rt-drop-trigger { width: 82px; }
.rt-drop-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-drop-caret { font-size: 10px; opacity: 0.7; }
.rt-panel-font { min-width: 210px; max-height: 280px; }
.rt-panel-size { min-width: 130px; }
.rt-font-item, .rt-size-item { display: block; width: 100%; height: auto; min-height: 30px; padding: 4px 10px; text-align: left; white-space: nowrap; }
.rt-font-item { font-size: 17px; line-height: 1.25; }
.rt-font-body { font-family: var(--font-body); }
.rt-size-item { line-height: 1.2; }
.rt-orn-item { font-size: 20px; width: 34px; height: 34px; color: var(--rt-gold); }

@media (prefers-reduced-motion: no-preference) { .rt-btn { transition: background var(--dur-fast, 140ms); } }