/* EasyMDE */
.EasyMDEContainer { min-width: 0; max-width: 100%; color: var(--color-text); }
.EasyMDEContainer .CodeMirror {
  min-width: 0; max-width: 100%; min-height: 11rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-field); color: var(--color-text); font-family: var(--font-body); font-size: var(--cms-font-size-md);
}
.EasyMDEContainer .CodeMirror-cursor { border-left-color: var(--color-text); }
.EasyMDEContainer .CodeMirror-selected { background: var(--color-accent-soft); }
.editor-toolbar {
  min-width: 0; max-width: 100%; display: flex; flex-wrap: nowrap; align-items: center; overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain; scrollbar-width: thin;
  border: 1px solid var(--color-border-strong); border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--color-surface); opacity: 1;
}
.editor-toolbar.fullscreen { background: var(--color-surface); }
.editor-toolbar i.separator { flex: 0 0 auto; border-color: var(--color-border); }
.editor-toolbar button { flex: 0 0 auto; color: var(--color-muted) !important; transition: border-color var(--motion-fast), background var(--motion-fast), color var(--motion-fast); }
.editor-toolbar button:hover, .editor-toolbar button.active { border-color: var(--color-border-strong); background: var(--color-surface-raised); color: var(--color-text) !important; }
.editor-toolbar button::before { font-family: inherit !important; font-size: var(--cms-font-size-sm); line-height: 30px; }
.editor-toolbar button.bold::before { content: "B"; font-weight: 700; }
.editor-toolbar button.italic::before { content: "I"; font-style: italic; font-weight: 600; }
.editor-toolbar button.heading::before { content: "H"; font-weight: 700; }
.editor-toolbar button.quote::before { content: "\201C"; font-size: var(--cms-font-size-lg); font-weight: 700; }
.editor-toolbar button.unordered-list::before { content: "\2022\00a0\2022"; letter-spacing: -1px; }
.editor-toolbar button.ordered-list::before { content: "1."; font-size: var(--cms-font-size-sm); }
.editor-toolbar button.link::before { content: "\2197"; }
.editor-toolbar button.preview::before { content: "\25c9"; }
.editor-toolbar .editor-char-count {
  flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; justify-content: flex-end;
  min-height: 30px; max-width: 100%; padding: 0 .35rem;
  color: var(--color-faint); font-family: var(--font-condensed); font-size: var(--cms-font-size-2xs);
  letter-spacing: .05em; line-height: 30px; white-space: nowrap;
}
.editor-preview, .editor-preview-side { background: var(--color-surface); color: var(--color-text); }

@media (max-width: 560px) {
  /* Formatting controls are the deliberate compact exception so the complete
     toolset remains on one row. */
  .editor-toolbar button { width: 2rem; min-width: 2rem; height: 2rem; min-height: 2rem; }
  .editor-toolbar .editor-char-count {
    margin-left: auto; min-height: 2rem; padding: 0 .35rem; line-height: 2rem;
  }
}

/* Preview card */
.preview-panel .cms-card__header .eyebrow { margin-bottom: 0; }
.preview-lang-toggle { display: inline-flex; align-items: center; gap: .15rem; }
.preview-lang-button {
  min-height: 1.58rem; padding: .08rem .42rem; border: 1px solid var(--color-border); background: var(--color-field);
  color: var(--color-muted); cursor: pointer; font-size: var(--cms-font-size-2xs); font-weight: 700; letter-spacing: .06em;
  transition: border-color var(--motion-fast), background var(--motion-fast), color var(--motion-fast);
}
.preview-lang-button:hover { color: var(--color-text); }
.preview-lang-button.is-active { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); }
.preview-panel .js-preview { display: grid; gap: var(--space-3); }
.pv-card { display: grid; gap: .55rem; padding: var(--space-3); border: 1px solid var(--color-border); background: var(--color-field); }
.pv-when { color: var(--color-accent); font-family: var(--font-condensed); font-size: var(--cms-font-size-xs); font-weight: 700; letter-spacing: .12em; }
.pv-title { margin: 0; font-family: var(--font-display); font-size: var(--cms-font-size-lg); line-height: 1.15; }
.pv-venue { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; color: var(--color-muted); font-size: var(--cms-font-size-sm); }
.pv-venue .country-flag-wrap { display: inline-flex; align-items: center; vertical-align: -0.08em; }
.pv-venue .country-flag {
  width: 1.35em; height: auto; display: inline-block; border: 0;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.42),
    0 1px 2px rgba(0,0,0,.45);
}
.pv-venue .location-separator { color: var(--color-accent); opacity: .72; }
.pv-badge { padding: .1rem .5rem; border: 1px solid var(--color-accent); color: var(--color-accent); font-size: var(--cms-font-size-3xs); letter-spacing: .08em; text-transform: uppercase; }
.pv-rule { width: 100%; height: 1px; margin: .3rem 0; border: 0; background: var(--color-border); }
.pv-program { display: grid; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.pv-program li { display: grid; gap: .1rem; font-size: var(--cms-font-size-sm); }
.pv-program strong { font-weight: 500; }
.pv-program span { color: var(--color-muted); }
.pv-note { margin: 0; color: var(--color-muted); font-size: var(--cms-font-size-sm); font-style: italic; }
.pv-muted, .pv-program-empty { color: var(--color-faint); font-style: italic; }
.pv-member-head { display: flex; align-items: center; gap: .8rem; }
.pv-avatar {
  width: 3.2rem; height: 3.2rem; flex: none; border-radius: 50%; object-fit: cover;
  object-position: var(--focus-x, 50%) var(--focus-y, 50%); display: grid; place-items: center;
  background: var(--color-accent); color: #fff; font-weight: 600;
}
.pv-role { margin: .1rem 0 0; color: var(--color-accent); font-size: var(--cms-font-size-xs); }
.pv-fact { margin: 0; color: var(--color-muted); font-size: var(--cms-font-size-sm); font-style: italic; }
.pv-prose { color: var(--color-muted); font-size: var(--cms-font-size-sm); line-height: 1.5; }
.pv-prose em { font-style: italic; }
.pv-prose p { margin: 0 0 .5rem; }
.pv-thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.pv-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focus-x, 50%) var(--focus-y, 50%); }
.pv-thumb--empty { display: grid; place-items: center; color: var(--color-faint); }
.pv-play { position: absolute; inset: 0; margin: auto; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: color-mix(in srgb, var(--color-accent) 80%, transparent); }
.pv-play::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: .7rem solid #fff; border-top: .45rem solid transparent; border-bottom: .45rem solid transparent; transform: translateX(.1rem); }
.pv-media-cap { display: grid; gap: .15rem; margin-top: .5rem; }
.pv-composer { color: var(--color-faint); font-size: var(--cms-font-size-2xs); letter-spacing: .08em; text-transform: uppercase; }
.pv-work { font-weight: 500; }
.pv-eyebrow { margin: 0; color: var(--color-accent); font-size: var(--cms-font-size-2xs); letter-spacing: .1em; text-transform: uppercase; }
.pv-image { width: 100%; border: 1px solid var(--color-border); object-position: var(--focus-x, 50%) var(--focus-y, 50%); }
.pv-excerpt { margin: 0; color: var(--color-muted); font-size: var(--cms-font-size-sm); }
.pv-link { margin: 0; color: var(--color-accent); font-size: var(--cms-font-size-sm); font-weight: 500; }
.pv-kv { display: grid; gap: .1rem; margin: 0 0 .5rem; font-size: var(--cms-font-size-sm); }
.pv-kv span { color: var(--color-faint); font-size: var(--cms-font-size-2xs); letter-spacing: .06em; text-transform: uppercase; }

/* Version history */
.history-list { display: grid; gap: .6rem; margin: var(--space-3) 0 0; padding: 0; list-style: none; }
.history-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); background: var(--cms-bg-panel); }
/* The restore form holds only hidden inputs. As a flex item it still counted,
   so space-between spread three children and parked the button mid-row at a
   position that moved with the summary length. */
.history-row > form { display: contents; }
.history-row > .button { flex: none; margin-left: auto; }
.history-row div { min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.history-row span { color: var(--cms-history-metadata-color); font-size: var(--cms-font-size-xs); }
.muted-note { color: var(--color-muted); font-size: var(--cms-font-size-sm); }