/* Professional HTML Editor — wraps the real CKEditor 4 Standard build.
   CKEditor renders its own toolbar/skin; this file only styles the small
   custom file-bar (New/Open/Save/Preview) and status bar around it, plus
   a couple of light touches so CKEditor's own chrome doesn't clash with
   the page's rounded-card look. Pure client-side: nothing here ever
   leaves the browser. */
.het-fit.het-scope {
  display: flex; flex-direction: column; gap: 14px;
  max-width: 1600px; width: 100%; margin: 0 auto;
  padding: 90px 4vw 60px;
  min-height: calc(100vh - 70px);
}
.het-hero { text-align: center; flex-shrink: 0; }
.het-hero h1 {
  font-size: 1.5rem !important; font-weight: 800 !important;
  color: var(--brand, #8b5cf6) !important;
  margin: 0 0 4px !important;
}
#hetScope .het-hero p {
  font-size: .85rem !important; color: var(--txt-2, #64748b) !important;
  margin: 0 auto !important; max-width: 760px;
}

.het-card {
  display: flex; flex-direction: column; gap: 0;
  padding: 0; overflow: hidden;
  border: 1px solid var(--border, #e2e8f0); border-radius: 16px;
  background: var(--surface, #fff);
}

/* ── File bar: New / Open / Save / Preview — the one thing CKEditor
   itself doesn't do (it has no concept of your local filesystem). Follows
   the site's own theme variables, same as every other tool, so it always
   matches whatever light/dark/accent theme is currently active. ── */
.het-filebar {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 10px; background: var(--page-bg, #f8fafc);
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.het-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--txt, #0f172a); cursor: pointer;
  font-size: .82rem; position: relative;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.het-btn:hover { background: var(--surface, #fff); border-color: var(--border, #e2e8f0); }

[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #1d1d1f; color: #fff; font-size: .68rem; font-weight: 600;
  padding: 4px 8px; border-radius: 6px; white-space: nowrap; z-index: 20;
  pointer-events: none;
}
[data-tip]:hover::before {
  content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  border: 4px solid transparent; border-top-color: #1d1d1f; z-index: 20; pointer-events: none;
}

/* CKEditor's own chrome — follows the site's theme variables too, so it
   matches the file bar above/status bar below in every light/dark/accent
   combination, not a fixed color of its own. */
.cke_chrome { border: none !important; border-radius: 0 !important; background: var(--page-bg, #f8fafc) !important; }
.cke_top { border-bottom: 1px solid var(--border, #e2e8f0) !important; background: var(--page-bg, #f8fafc) !important; border-radius: 0 !important; }
.cke_bottom { display: none !important; } /* we render our own status bar below */
.cke_button_on, .cke_button__source.cke_button_on { background: var(--brand, #8b5cf6) !important; opacity: 1 !important; }

/* CKEditor 4's skin is hard-coded for a light page — its icon sprites and
   dropdown labels are dark-on-light and read fine against the site's
   light themes as-is. ONLY in dark mode (regardless of which accent is
   layered on top — this selector matches any of them) do those same
   dark icons go low-contrast against the now-dark toolbar, so the
   inversion below is scoped to data-theme="dark" alone and never runs in
   any light variant, light+accent included. */
html[data-theme="dark"] .cke_chrome .cke_button_icon,
html[data-theme="dark"] .cke_chrome .cke_combo_text,
html[data-theme="dark"] .cke_chrome .cke_combo_arrow,
html[data-theme="dark"] .cke_chrome .cke_path,
html[data-theme="dark"] .cke_chrome .cke_toolbar_separator {
  filter: invert(1) !important;
}
html[data-theme="dark"] .cke_resizer { filter: invert(0.8); }
html[data-theme="dark"] .cke_combo_button,
html[data-theme="dark"] .cke_panel, html[data-theme="dark"] .cke_panel_frame {
  background: var(--surface, #1e293b) !important; border-color: var(--border, #334155) !important;
}
html[data-theme="dark"] .cke_menuitem a, html[data-theme="dark"] .cke_panel_listItem a {
  color: var(--txt, #f1f5f9) !important;
}
html[data-theme="dark"] .cke_menuitem a:hover, html[data-theme="dark"] .cke_panel_listItem a:hover,
html[data-theme="dark"] .cke_panel_listItem.cke_selected a {
  background: var(--page-bg, #0f172a) !important;
}
html[data-theme="dark"] .cke_dialog_body, html[data-theme="dark"] .cke_dialog_contents {
  background: var(--surface, #1e293b) !important;
}
html[data-theme="dark"] .cke_dialog_title, html[data-theme="dark"] .cke_dialog_footer,
html[data-theme="dark"] .cke_dialog_tabs, html[data-theme="dark"] .cke_dialog_tab {
  background: var(--page-bg, #0f172a) !important; color: var(--txt, #f1f5f9) !important; border-color: var(--border, #334155) !important;
}
html[data-theme="dark"] .cke_dialog_tab_selected { background: var(--surface, #1e293b) !important; }
html[data-theme="dark"] .cke_dialog_close_button { filter: invert(1); }
html[data-theme="dark"] .cke_dialog_contents_body, html[data-theme="dark"] .cke_dialog label {
  color: var(--txt, #f1f5f9) !important;
}
html[data-theme="dark"] .cke_dialog input[type="text"], html[data-theme="dark"] .cke_dialog input[type="number"],
html[data-theme="dark"] .cke_dialog select, html[data-theme="dark"] .cke_dialog textarea {
  background: var(--page-bg, #0f172a) !important; color: var(--txt, #f1f5f9) !important; border-color: var(--border, #334155) !important;
}
html[data-theme="dark"] .cke_dialog_ui_button { background: var(--surface, #1e293b) !important; color: var(--txt, #f1f5f9) !important; border-color: var(--border, #334155) !important; }
html[data-theme="dark"] .cke_dialog_ui_button_ok { background: var(--brand, #8b5cf6) !important; border-color: var(--brand, #8b5cf6) !important; color: #fff !important; }

.het-statusbar {
  display: flex; align-items: center; gap: 16px;
  padding: 7px 14px; border-top: 1px solid var(--border, #e2e8f0);
  background: var(--page-bg, #f8fafc); font-size: .72rem; color: var(--txt-2, #64748b);
}
.het-status-saved { margin-left: auto; color: #16a34a; font-weight: 600; opacity: 0; transition: opacity .3s ease; }
.het-status-saved.het-status-show { opacity: 1; }

.het-init-error {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; margin-bottom: 14px; border-radius: 10px;
  background: var(--red-bg, #fef2f2); border: 1px solid var(--red-bd, #fecaca);
  color: var(--red, #ef4444); font-size: .85rem; font-weight: 600;
}