/* editor.css — CKEditor 5 themed to the parchment design system.
 *
 * Standalone: no @import, safe to <link> on its own inside an HTMX-loaded
 * edit-form partial. Reads the --v-* custom properties from victoria.css
 * (already on the page everywhere this is used) with hard-coded fallbacks
 * so the widget still looks right if victoria.css hasn't loaded yet.
 *
 * django-ckeditor-5's own stylesheet (django_ckeditor_5/dist/styles.css)
 * exposes CKEditor 5's standard --ck-* theme variables; overriding them here
 * re-skins every editor surface — toolbar, dropdowns, balloons, dialogs —
 * without fighting its selector specificity. See ARCHITECTURE.md §5 and
 * apps/common/sanitize.py for what the editor is allowed to emit; this file
 * only concerns look, not content policy.
 *
 * Height: the "page" and "event" CKEDITOR_5_CONFIGS (config/settings.py)
 * share one toolbar; the event config's compact editable area is opt-in via
 * the .v-editor--compact modifier below — wrap the widget's
 * `.ck-editor-container` (or an ancestor) in that class.
 *
 * Every custom property below carries `!important` (item 24, feedback-
 * 2026-08-19 — "the field to enter the 'body' has an ugly white
 * background which differs from everything else"; QA'd 2026-08-19 with
 * the dev-seed data: the *toolbar* row was white too, not just the
 * editable pane below it). Root cause: `templates/base.html` links this
 * file before `{% block head %}`, and the CKEditor5 widget's own vendor
 * stylesheet (django_ckeditor_5/dist/styles.css) is injected *there*, via
 * each form's `form.media` (see e.g. views.stream's `event_form_media`)
 * — always after this file, never before. That vendor stylesheet
 * re-declares this exact set of `--ck-color-*` names at its own `:root`
 * (its stock light theme, `#fff` backgrounds and all); at equal
 * specificity the later declaration wins regardless of which file
 * "intends" to be the override, so every variable-driven surface here
 * (toolbar, dropdowns, panels, buttons, tooltips…) was silently reverting
 * to vendor default the instant a form loaded its own CSS. `!important`
 * is the correct tool, not a workaround: this project has no other author
 * declaring any `--ck-*` name (confirmed — `static/css/victoria.css` owns
 * the site's own design tokens, `--v-*`, never `--ck-*`), so nothing here
 * competes with itself; it only needs to out-rank one specific vendor
 * stylesheet whose load position this file can't control without editing
 * `templates/base.html`. */
:root {
  --ck-border-radius: var(--v-radius, 3px) !important;

  --ck-color-base-foreground: var(--v-panel-dark, #241c17) !important;
  --ck-color-base-background: var(--v-panel-dark, #241c17) !important;
  --ck-color-base-border: var(--v-gold-dim, #8a7038) !important;
  --ck-color-base-action: var(--v-gold, #c2a15a) !important;
  --ck-color-base-focus: var(--v-gold, #c2a15a) !important;
  --ck-color-base-text: var(--v-cream, #ece2cc) !important;
  --ck-color-base-active: var(--v-gold, #c2a15a) !important;
  --ck-color-base-active-focus: var(--v-gold-bright, #e3ca8d) !important;

  --ck-color-text: var(--v-cream, #ece2cc) !important;
  --ck-color-focus-border: var(--v-gold, #c2a15a) !important;
  --ck-color-focus-outer-shadow: rgba(194, 161, 90, 0.35) !important;
  --ck-color-shadow-drop: rgba(0, 0, 0, 0.45) !important;
  --ck-color-shadow-drop-active: rgba(0, 0, 0, 0.6) !important;
  --ck-color-shadow-inner: rgba(0, 0, 0, 0.3) !important;

  --ck-color-button-default-background: transparent !important;
  --ck-color-button-default-hover-background: rgba(194, 161, 90, 0.18) !important;
  --ck-color-button-default-active-background: rgba(194, 161, 90, 0.28) !important;
  --ck-color-button-default-disabled-background: transparent !important;
  --ck-color-button-on-background: rgba(194, 161, 90, 0.3) !important;
  --ck-color-button-on-hover-background: rgba(194, 161, 90, 0.4) !important;
  --ck-color-button-on-active-background: rgba(194, 161, 90, 0.46) !important;
  --ck-color-button-on-disabled-background: rgba(194, 161, 90, 0.14) !important;
  --ck-color-button-on-color: var(--v-gold-bright, #e3ca8d) !important;
  --ck-color-button-action-background: var(--v-maroon-2, #6b2b2f) !important;
  --ck-color-button-action-hover-background: var(--v-red, #8c2b26) !important;
  --ck-color-button-action-active-background: var(--v-red-bright, #a8362f) !important;
  --ck-color-button-action-text: var(--v-cream, #ece2cc) !important;
  --ck-color-button-save: var(--v-green, #4f6b3a) !important;
  --ck-color-button-cancel: var(--v-red, #8c2b26) !important;

  --ck-color-toolbar-background: var(--v-panel-dark, #241c17) !important;
  --ck-color-toolbar-border: var(--v-gold-dim, #8a7038) !important;

  --ck-color-panel-background: var(--v-panel-dark-2, #2e241d) !important;
  --ck-color-panel-border: var(--v-gold-dim, #8a7038) !important;

  --ck-color-list-background: var(--v-panel-dark-2, #2e241d) !important;
  --ck-color-list-button-hover-background: rgba(194, 161, 90, 0.18) !important;
  --ck-color-list-button-on-background: rgba(194, 161, 90, 0.3) !important;
  --ck-color-list-button-on-background-focus: rgba(194, 161, 90, 0.4) !important;
  --ck-color-list-button-on-text: var(--v-gold-bright, #e3ca8d) !important;

  --ck-color-input-background: rgba(0, 0, 0, 0.35) !important;
  --ck-color-input-border: var(--v-gold-dim, #8a7038) !important;
  --ck-color-input-text: var(--v-cream, #ece2cc) !important;
  --ck-color-input-disabled-background: rgba(0, 0, 0, 0.5) !important;
  --ck-color-input-disabled-border: var(--v-ink-3, #6d6151) !important;
  --ck-color-input-disabled-text: var(--v-cream-2, #b9ab90) !important;
  --ck-color-input-error-border: var(--v-red, #8c2b26) !important;
  --ck-color-labeled-field-label-background: var(--v-panel-dark, #241c17) !important;

  --ck-color-dropdown-panel-background: var(--v-panel-dark-2, #2e241d) !important;
  --ck-color-dropdown-panel-border: var(--v-gold-dim, #8a7038) !important;
  --ck-color-dialog-background: var(--v-panel-dark-2, #2e241d) !important;
  --ck-color-dialog-form-header-border: var(--v-gold-dim, #8a7038) !important;

  --ck-color-tooltip-background: var(--v-ink, #2b241c) !important;
  --ck-color-tooltip-text: var(--v-cream, #ece2cc) !important;

  --ck-color-link-default: #7a3a1e !important;
  --ck-color-link-selected-background: rgba(194, 161, 90, 0.25) !important;
  --ck-color-link-fake-selection: rgba(194, 161, 90, 0.35) !important;

  --ck-color-engine-placeholder-text: var(--v-ink-3, #6d6151) !important;
  --ck-color-upload-bar-background: var(--v-gold, #c2a15a) !important;

  --ck-color-widget-hover-border: var(--v-gold, #c2a15a) !important;
  --ck-color-widget-blurred-border: rgba(194, 161, 90, 0.4) !important;
  --ck-color-widget-editable-focus-background: rgba(255, 255, 255, 0.4) !important;

  --ck-color-table-focused-cell-background: rgba(194, 161, 90, 0.16) !important;

  --ck-font-face: var(--v-font-body, "EB Garamond", Georgia, serif) !important;
}

/* --- Container & toolbar chrome ------------------------------------------ */

.ck-editor-container {
  border: 1px solid var(--v-gold-dim, #8a7038);
  border-radius: var(--v-radius, 3px);
  overflow: hidden;
  box-shadow: var(--v-shadow, 0 2px 10px rgba(0, 0, 0, 0.45));
}

.ck.ck-editor__top .ck-toolbar {
  border: 0;
  border-bottom: 1px solid var(--v-gold-dim, #8a7038);
  border-radius: 0;
  padding: 6px 8px;
}

.ck.ck-editor__top .ck-sticky-panel__content {
  border-bottom: 1px solid var(--v-gold-dim, #8a7038);
}

/* --- The parchment editable surface -------------------------------------- */

.ck.ck-content.ck-editor__editable {
  min-height: 360px;
  padding: var(--v-5, 24px) !important;
  font-family: var(--v-font-body, "EB Garamond", Georgia, serif);
  font-size: var(--v-fs-base, 1rem);
  line-height: 1.6;
  color: var(--v-ink, #2b241c);
  /* `!important` on these three (not the rest of the rule): the vendor
     stylesheet's own `.ck.ck-editor__main>.ck-editor__editable{background:
     var(--ck-color-base-background)}` ties this selector's specificity
     exactly (three classes each) and loads after this file (see the
     file-level comment above) — a `background` *shorthand* wins ties by
     source order and, when it wins, resets every sub-property it doesn't
     mention (including `-image` and `-size`) to its initial value, not
     just `-color`. That's deliberately different from `--ck-color-base-*`
     above: the editable page is meant to read as parchment regardless of
     what `--ck-color-base-background` (the surrounding dark chrome) is
     set to, so it never routes through that variable at all. */
  background-color: var(--v-paper, #ece2c9) !important;
  background-image: var(--v-tex-paper, none) !important;
  background-size: 520px !important;
  background-blend-mode: soft-light;
  border: 0;
  border-radius: 0;
}

.ck.ck-editor__editable_inline > :first-child { margin-top: 0; }
.ck.ck-editor__editable_inline > :last-child { margin-bottom: 0; }

/* Compact variant for event-length content (timeline events, era
   descriptions) — wrap the
   widget's container in .v-editor--compact to opt in. */
.v-editor--compact .ck.ck-content.ck-editor__editable {
  min-height: 160px;
}

/* --- Typography inside the editable area & sanitized read view ----------- */

.ck-content h2, .ck-content h3, .ck-content h4 {
  font-family: var(--v-font-display, "Cinzel", Georgia, serif);
  color: var(--v-ink, #2b241c);
  line-height: 1.2;
}
.ck-content h2 { font-size: var(--v-fs-xl, 1.75rem); margin: 1.2em 0 0.5em; }
.ck-content h3 { font-size: var(--v-fs-lg, 1.375rem); margin: 1.1em 0 0.5em; }
.ck-content h4 {
  font-size: var(--v-fs-md, 1.125rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 1em 0 0.4em;
}

.ck-content a { color: #7a3a1e; }

.ck-content blockquote {
  margin: 1em 0;
  padding: var(--v-2, 8px) var(--v-4, 16px);
  border-left: 3px solid var(--v-gold-dim, #8a7038);
  background: rgba(194, 161, 90, 0.1);
  font-style: italic;
  color: var(--v-ink-2, #4a4034);
}

.ck-content figure.image {
  margin: 1em 0;
}
.ck-content figure.image img { border-radius: var(--v-radius, 3px); }
.ck-content figure.image figcaption,
.ck-content .ck-figcaption {
  padding: var(--v-1, 4px) var(--v-2, 8px);
  font-family: var(--v-font-body, "EB Garamond", Georgia, serif);
  font-size: var(--v-fs-xs, 0.75rem);
  font-style: italic;
  text-align: center;
  color: var(--v-ink-3, #6d6151);
  background: rgba(43, 36, 28, 0.05);
}

.ck-content table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--v-fs-sm, 0.875rem);
}
.ck-content table th, .ck-content table td {
  padding: var(--v-2, 8px) var(--v-3, 12px);
  border: 1px solid rgba(43, 36, 28, 0.3);
}
.ck-content table th {
  font-family: var(--v-font-display, "Cinzel", Georgia, serif);
  font-size: var(--v-fs-xs, 0.75rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v-ink-3, #6d6151);
  background: rgba(43, 36, 28, 0.06);
}

/* --- Word count footer ---------------------------------------------------- */

.ck-word-count {
  padding: var(--v-1, 4px) var(--v-3, 12px);
  font-family: var(--v-font-mono, monospace);
  font-size: var(--v-fs-xs, 0.75rem);
  color: var(--v-ink-3, #6d6151);
}