/* Holon Editor v1 — shared rich-text engine stylesheet.
   Served at /shared/holon-editor-v1.css. Bump ?v= on every edit.
   Inherits Deep Deck tokens (--dd-*, --h-accent) when present; standalone light fallbacks otherwise. */

.holon-editor {
  --he-bg: var(--dd-panel, #ffffff);
  --he-bar: var(--dd-panel-2, #f4f7fc);
  --he-ink: var(--dd-ink, #0c1830);
  --he-dim: var(--dd-ink-dim, #4a5a78);
  --he-line: var(--dd-line, #d3dcec);
  --he-accent: var(--h-accent, #55f934);
  --he-accent-ink: #06210a;
  --he-focus: var(--dd-focus, #1f6feb);
  --he-hover: rgba(31, 111, 235, .10);
  --he-on: rgba(31, 111, 235, .18);
  --he-code-bg: rgba(12, 24, 48, .06);
  --he-danger: #b3261e;
  --he-radius: 10px;
  --he-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --he-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  display: flex; flex-direction: column;
  background: var(--he-bg); color: var(--he-ink);
  border: 1px solid var(--he-line); border-radius: var(--he-radius);
  font-family: var(--he-font); font-size: 15px; line-height: 1.55;
  min-width: 0; box-sizing: border-box;
}
.holon-editor *, .holon-editor *::before, .holon-editor *::after { box-sizing: border-box; }
.holon-editor:focus-within { border-color: var(--he-focus); box-shadow: 0 0 0 1px var(--he-focus); }

/* dark: Deep Deck default theme, or OS dark when no Deep Deck theme attribute is set */
html[data-theme="dark"] .holon-editor, .holon-editor.he-dark {
  --he-bg: var(--dd-panel, #0f1a2e); --he-bar: var(--dd-panel-2, #14213a); --he-ink: var(--dd-ink, #e8eefb);
  --he-dim: var(--dd-ink-dim, #9fb0cf); --he-line: var(--dd-line, #26375a); --he-focus: var(--dd-focus, #7ab2ff);
  --he-hover: rgba(122, 178, 255, .14); --he-on: rgba(122, 178, 255, .26); --he-code-bg: rgba(255, 255, 255, .08); --he-danger: #ff8a80;
}
html[data-theme="light"] .holon-editor, .holon-editor.he-light {
  --he-bg: var(--dd-panel, #ffffff); --he-bar: var(--dd-panel-2, #f4f7fc); --he-ink: var(--dd-ink, #0c1830);
  --he-dim: var(--dd-ink-dim, #4a5a78); --he-line: var(--dd-line, #d3dcec); --he-focus: var(--dd-focus, #1f6feb);
  --he-hover: rgba(31, 111, 235, .10); --he-on: rgba(31, 111, 235, .18); --he-code-bg: rgba(12, 24, 48, .06); --he-danger: #b3261e;
}

/* ── toolbar ── */
.he-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0;
  padding: 6px 8px; background: var(--he-bar);
  border-bottom: 1px solid var(--he-line); border-radius: var(--he-radius) var(--he-radius) 0 0;
}
.he-group { display: flex; align-items: center; gap: 2px; padding: 0 6px; border-right: 1px solid var(--he-line); }
.he-group:first-child { padding-left: 0; }
.he-group:last-child { border-right: 0; padding-right: 0; }
.he-btn {
  width: 30px; height: 30px; flex: 0 0 30px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--he-ink); border: 1px solid transparent; border-radius: 6px;
  font: 600 12px/1 var(--he-font); cursor: pointer;
}
.he-btn svg { width: 16px; height: 16px; display: block; pointer-events: none; }
.he-t { font: 700 14px/1 var(--he-font); display: inline-flex; flex-direction: column; align-items: center; pointer-events: none; }
.he-t-sm { display: inline-block; font-size: 12px; }
.he-t-sm sub, .he-t-sm sup { font-size: 8px; line-height: 0; position: relative; vertical-align: baseline; }
.he-t-sm sub { top: 3px; } .he-t-sm sup { top: -5px; }
.he-t-color i { display: block; width: 14px; height: 3px; margin-top: 2px; border-radius: 1px; background: currentColor; }
.he-t-hl { padding: 2px 4px; border-radius: 3px; background: #fff3a3; color: #0c1830; }
.he-btn:hover { background: var(--he-hover); }
.he-btn.on, .he-btn[aria-pressed="true"], .he-btn[aria-expanded="true"] { background: var(--he-on); border-color: var(--he-focus); }
.he-btn:disabled, .he-select:disabled { opacity: .4; cursor: not-allowed; }
.he-btn:disabled:hover { background: transparent; }
.he-select {
  height: 30px; max-width: 150px; padding: 0 24px 0 8px; margin: 0;
  background-color: var(--he-bg); color: var(--he-ink);
  border: 1px solid var(--he-line); border-radius: 6px; font: 500 13px/1 var(--he-font); cursor: pointer;
}
.he-select option { background: var(--he-bg); color: var(--he-ink); }
.he-btn:focus-visible, .he-select:focus-visible, .he-pbtn:focus-visible, .he-input:focus-visible,
.he-swatch:focus-visible, .he-colorpick:focus-visible, .he-file:focus-visible, .he-check input:focus-visible {
  outline: 2px solid var(--he-focus); outline-offset: 1px;
}

/* ── inline panel + context rows (never overlays) ── */
.he-panel, .he-context {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px;
  padding: 8px 10px; background: var(--he-bar); border-bottom: 1px solid var(--he-line); font-size: 13px;
}
.he-panel[hidden], .he-context[hidden] { display: none; }
.he-context { align-items: center; }
.he-plabel { font: 600 11px/30px "Space Grotesk", var(--he-font); letter-spacing: .06em; text-transform: uppercase; color: var(--he-dim); }
.he-field { display: flex; flex-direction: column; gap: 3px; flex: 1 1 220px; min-width: 0; margin: 0; }
.he-field > span { font-size: 12px; font-weight: 600; color: var(--he-dim); }
.he-input {
  height: 30px; width: 100%; min-width: 0; padding: 0 8px;
  background: var(--he-bg); color: var(--he-ink); border: 1px solid var(--he-line); border-radius: 6px; font: 400 13px/1 var(--he-font);
}
.he-input::placeholder { color: var(--he-dim); opacity: .8; }
.he-field:has(.he-num) { flex: 0 0 84px; }
.he-num { width: 84px; }
.he-check { display: inline-flex; align-items: center; gap: 6px; height: 30px; margin: 0; color: var(--he-ink); white-space: nowrap; cursor: pointer; }
.he-check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--he-focus); }
.he-or { line-height: 30px; color: var(--he-dim); }
.he-file { max-width: 230px; height: 30px; font: 400 12px/30px var(--he-font); color: var(--he-dim); }
.he-pbtn {
  height: 30px; padding: 0 12px; margin: 0; white-space: nowrap;
  background: var(--he-bg); color: var(--he-ink); border: 1px solid var(--he-line); border-radius: 6px;
  font: 600 12px/1 var(--he-font); cursor: pointer;
}
.he-pbtn:hover { background: var(--he-hover); }
.he-pbtn-primary { background: var(--he-accent); border-color: var(--he-accent); color: var(--he-accent-ink); }
.he-pbtn-primary:hover { background: var(--he-accent); filter: brightness(.94); }
.he-pbtn-danger { color: var(--he-danger); border-color: currentColor; }
.he-swatches { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 30px; }
.he-swatch { width: 22px; height: 22px; padding: 0; border-radius: 5px; border: 1px solid var(--he-line); cursor: pointer; }
.he-swatch.on { box-shadow: 0 0 0 2px var(--he-bg), 0 0 0 4px var(--he-focus); }
.he-colorpick { width: 34px; height: 26px; padding: 0; border: 1px solid var(--he-line); border-radius: 5px; background: var(--he-bg); cursor: pointer; }

/* ── ribbon (mount(el, { ribbon: true })): tabs + fixed-height body, so the page below never moves ── */
.he-ribbon { position: relative; background: var(--he-bar); border-bottom: 1px solid var(--he-line); border-radius: var(--he-radius) var(--he-radius) 0 0; min-width: 0; }
.he-rtabs { display: flex; align-items: flex-end; gap: 2px; padding: 4px 10px 0; min-height: 34px; }
.he-rtab { height: 30px; padding: 0 14px; margin: 0; border: 0; border-bottom: 3px solid transparent; border-radius: 6px 6px 0 0; background: transparent; color: var(--he-dim); font: 600 13px/1 var(--he-font); cursor: pointer; }
.he-rtab[hidden] { display: none; }
.he-rtab:hover { background: var(--he-hover); color: var(--he-ink); }
.he-rtab[aria-selected="true"] { color: var(--he-ink); border-bottom-color: var(--he-focus); }
.he-rtab-ctx { color: var(--he-focus); }
.he-rtab:focus-visible, .he-rstyle:focus-visible, .he-rx:focus-visible { outline: 2px solid var(--he-focus); outline-offset: -2px; }
.he-rtabs-end { margin-left: auto; display: flex; align-items: center; gap: 14px; padding: 0 2px 7px; font-size: 12px; color: var(--he-dim); min-width: 0; }
.he-rtabs-end .he-status { flex: 0 1 auto; color: var(--he-danger); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.he-rbody { background: var(--he-bg); border-top: 1px solid var(--he-line); height: 94px; overflow-x: auto; overflow-y: hidden; }
.he-rpane { display: flex; align-items: stretch; height: 100%; width: max-content; min-width: 100%; }
.he-rpane[hidden] { display: none; }
.he-rgroup { display: flex; flex-direction: column; flex: 0 0 auto; padding: 6px 12px 3px; border-right: 1px solid var(--he-line); }
.he-rrows { display: flex; flex-direction: column; justify-content: center; gap: 4px; flex: 1 1 auto; }
.he-rrow { display: flex; align-items: center; gap: 3px; min-height: 30px; white-space: nowrap; }
.he-rrow:empty { display: none; }
.he-rlabel { text-align: center; font: 500 11px/15px var(--he-font); color: var(--he-dim); letter-spacing: .02em; }
.he-rfield { display: inline-flex; align-items: center; gap: 6px; margin: 0 6px 0 0; font-size: 12px; font-weight: 600; color: var(--he-dim); }
.he-rfield .he-input { width: 64px; } .he-rfield .he-rwide { width: 300px; } .he-rfield .he-rmid { width: 190px; }
.he-rgroup .he-check { margin-right: 6px; font-size: 13px; }
.he-rgroup .he-pbtn:disabled { opacity: .45; cursor: not-allowed; }
.he-rstyle { height: 30px; width: 104px; padding: 0 10px; margin: 0; border: 1px solid var(--he-line); border-radius: 6px; background: var(--he-bg); color: var(--he-ink); font: 400 13px/1 var(--he-font); text-align: left; white-space: nowrap; overflow: hidden; cursor: pointer; }
.he-rstyle:hover { background: var(--he-hover); }
.he-rstyle.on { border-color: var(--he-focus); background: var(--he-on); }
.he-rs-h1 { font-weight: 800; font-size: 15px; } .he-rs-h2 { font-weight: 700; font-size: 14px; } .he-rs-h3 { font-weight: 700; }
.he-rs-q { font-style: italic; color: var(--he-dim); } .he-rs-code { font-family: var(--he-mono); font-size: 12px; }
.he-rswatches { gap: 3px; min-height: 30px; }
.he-rswatches .he-swatch { width: 20px; height: 20px; border-radius: 4px; flex: 0 0 20px; }
.he-rswatches .he-colorpick { width: 26px; height: 22px; margin-left: 3px; }
.he-rglyph { display: inline-flex; width: 24px; justify-content: center; color: var(--he-ink); }
.he-rx { width: 22px; height: 22px; padding: 0; margin: 0; border: 1px solid var(--he-line); border-radius: 4px; background: var(--he-bg); color: var(--he-dim); font: 700 14px/1 var(--he-font); cursor: pointer; }
.he-rx:hover { background: var(--he-hover); color: var(--he-ink); }

/* ── ribbon dropdown pickers (Word-style; float over the page) ── */
.holon-editor.he-has-ribbon { position: relative; }
.he-rmenubtn { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 8px; margin: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--he-ink); font: 600 12px/1 var(--he-font); cursor: pointer; }
.he-rmenubtn:hover { background: var(--he-hover); }
.he-rmenubtn[aria-expanded="true"] { background: var(--he-on); border-color: var(--he-focus); }
.he-rmenubtn:focus-visible { outline: 2px solid var(--he-focus); outline-offset: 1px; }
.he-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: .7; }
.he-rmenu { position: absolute; z-index: 40; min-width: 180px; max-width: calc(100vw - 16px); padding: 6px; background: var(--he-bg); border: 1px solid var(--he-line); border-radius: 8px; box-shadow: 0 8px 28px rgba(8, 15, 30, .22); }
.he-rmenu-item { display: flex; align-items: center; gap: 8px; width: 100%; height: 30px; padding: 0 10px; margin: 0; border: 0; border-radius: 6px; background: transparent; color: var(--he-ink); font: 500 13px/1 var(--he-font); text-align: left; cursor: pointer; }
.he-rmenu-item:hover { background: var(--he-hover); }
.he-rmenu-item:focus-visible { outline: 2px solid var(--he-focus); outline-offset: -2px; }
.he-msect { padding: 8px 8px 4px; font: 600 11px/1 var(--he-font); letter-spacing: .04em; text-transform: uppercase; color: var(--he-dim); }
.he-mgrid { display: grid; grid-template-columns: repeat(10, 18px); gap: 3px; padding: 2px 4px 4px; }
.he-mswatch { width: 18px; height: 18px; padding: 0; border: 1px solid rgba(8, 15, 30, .25); border-radius: 3px; cursor: pointer; }
.he-mswatch.he-mvar { border-color: rgba(8, 15, 30, .12); }
.he-mswatch:hover { outline: 2px solid var(--he-focus); outline-offset: 1px; }
.he-mswatch.on { outline: 2px solid var(--he-focus); outline-offset: 1px; }
.he-mswatch:focus-visible { outline: 2px solid var(--he-focus); outline-offset: 1px; }
.he-mcustom { justify-content: space-between; }
.he-mcustom input[type="color"] { width: 34px; height: 22px; padding: 0; border: 1px solid var(--he-line); border-radius: 4px; background: var(--he-bg); cursor: pointer; }
.he-rpicbtn svg { width: 16px; height: 16px; }
.he-tgrid { display: grid; grid-template-columns: repeat(10, 18px); gap: 2px; padding: 2px; }
.he-tcell { width: 18px; height: 18px; padding: 0; border: 1px solid var(--he-line); border-radius: 2px; background: var(--he-bg); cursor: pointer; }
.he-tcell.on { background: var(--he-on); border-color: var(--he-focus); }
.he-tcell:focus-visible { outline: 2px solid var(--he-focus); outline-offset: 1px; }
.he-gcap { padding: 6px 4px 2px; text-align: center; font: 500 12px/1 var(--he-font); color: var(--he-dim); }
.he-murl { display: flex; flex-direction: column; gap: 6px; padding: 4px 6px 6px; }
.he-murl .he-rfield { flex-direction: column; align-items: stretch; gap: 3px; margin: 0; }
.he-murl .he-rfield .he-input { width: 100%; }

/* ── body / content ── */
.he-body { flex: 1 1 auto; min-width: 0; cursor: text; }
.holon-editor-content {
  min-height: var(--he-min-h, 160px); padding: 14px 16px; outline: none;
  color: var(--he-ink); font: 400 15px/1.6 var(--he-font);
  overflow-wrap: anywhere; word-break: normal; white-space: normal; /* matches how Canvas renders the saved HTML */
}
.holon-editor-content[contenteditable="false"] { opacity: .8; cursor: default; }
.holon-editor-content > :first-child { margin-top: 0; }
.holon-editor-content > :last-child { margin-bottom: 0; }
.holon-editor-content p { margin: 0 0 .7em; }
.holon-editor-content h1, .holon-editor-content h2, .holon-editor-content h3,
.holon-editor-content h4, .holon-editor-content h5, .holon-editor-content h6 {
  font-family: "Space Grotesk", var(--he-font); font-weight: 700; line-height: 1.25; margin: 1.1em 0 .45em; color: var(--he-ink);
}
.holon-editor-content h1 { font-size: 1.8em; } .holon-editor-content h2 { font-size: 1.45em; }
.holon-editor-content h3 { font-size: 1.22em; } .holon-editor-content h4 { font-size: 1.08em; }
.holon-editor-content h5 { font-size: 1em; } .holon-editor-content h6 { font-size: .9em; color: var(--he-dim); }
.holon-editor-content ul, .holon-editor-content ol { margin: 0 0 .7em; padding-left: 1.6em; }
.holon-editor-content li { margin: .15em 0; }
.holon-editor-content li > ul, .holon-editor-content li > ol { margin: .15em 0 0; }
.holon-editor-content blockquote { margin: 0 0 .7em; padding: .15em 0 .15em 1em; border-left: 3px solid var(--he-focus); color: var(--he-dim); }
.holon-editor-content blockquote > :last-child { margin-bottom: 0; }
.holon-editor-content a { color: var(--he-focus); text-decoration: underline; cursor: text; }
.holon-editor-content code { font: .9em var(--he-mono); background: var(--he-code-bg); padding: .1em .35em; border-radius: 4px; }
.holon-editor-content pre {
  margin: 0 0 .7em; padding: 10px 12px; background: var(--he-code-bg); border: 1px solid var(--he-line); border-radius: 8px;
  font: 13px/1.5 var(--he-mono); white-space: pre-wrap; overflow-wrap: anywhere;
}
.holon-editor-content pre code { background: none; padding: 0; font: inherit; }
.holon-editor-content mark { padding: 0 .1em; border-radius: 2px; color: #0c1830; }   /* highlights are light fills: keep ink dark in both themes */
.holon-editor-content mark a { color: #0b4fc4; }
.holon-editor-content hr { border: 0; border-top: 2px solid var(--he-line); margin: 1em 0; }
.holon-editor-content img { max-width: 100%; height: auto; border-radius: 4px; vertical-align: bottom; cursor: pointer; }
.holon-editor-content img.he-selected { outline: 3px solid var(--he-focus); outline-offset: 2px; }
.holon-editor-content table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 0 0 .7em; }
.holon-editor-content th, .holon-editor-content td { border: 1px solid var(--he-line); padding: 6px 8px; vertical-align: top; text-align: left; min-width: 2em; }
.holon-editor-content th { background: var(--he-bar); font-weight: 700; }
.holon-editor-content.is-empty[data-placeholder]::before {
  content: attr(data-placeholder); float: left; height: 0; color: var(--he-dim); opacity: .85; pointer-events: none;
}

.he-findbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 7px 12px; background: var(--he-bar); border-top: 1px solid var(--he-line); }
.he-findbar[hidden] { display: none; }
.he-findbar .he-input { width: 180px; }
.he-findcount { min-width: 64px; font-size: 12px; color: var(--he-dim); font-variant-numeric: tabular-nums; }
.he-findbar .he-btn { width: 28px; height: 28px; flex: 0 0 28px; }
.he-rfindbtn svg { width: 15px; height: 15px; }
.he-rshade svg { width: 16px; height: 16px; }
.holon-editor-content span.he-find { background: #fff2a8; border-radius: 2px; }
.holon-editor-content span.he-find-active { background: #ffb838; box-shadow: 0 0 0 1px #d98400; }

.he-riconbtn { display: inline-flex; align-items: center; gap: 6px; height: 30px; }
.he-riconbtn svg { width: 15px; height: 15px; }
.he-rmenu-item.he-mi-on { background: var(--he-on); }
.he-symgrid { display: grid; grid-template-columns: repeat(8, 26px); gap: 2px; padding: 2px 4px 4px; }
.he-symcell { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--he-ink); font: 400 16px/1 var(--he-font); cursor: pointer; }
.he-symcell:hover { background: var(--he-hover); }
.he-symcell:focus-visible { outline: 2px solid var(--he-focus); outline-offset: -2px; }
.holon-editor-content ul.he-task { list-style: none; padding-left: 1.7em; }
.holon-editor-content ul.he-task > li { position: relative; }
.holon-editor-content ul.he-task > li::before { content: ""; position: absolute; left: -1.5em; top: .18em; width: 16px; height: 16px; border: 1.5px solid var(--he-dim); border-radius: 4px; background: var(--he-bg); cursor: pointer; box-sizing: border-box; }
.holon-editor-content ul.he-task > li[data-checked="true"]::before { background: var(--he-focus); border-color: var(--he-focus); }
.holon-editor-content ul.he-task > li[data-checked="true"]::after { content: ""; position: absolute; left: calc(-1.5em + 5px); top: .42em; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); pointer-events: none; }
.holon-editor-content ul.he-task > li[data-checked="true"] { color: var(--he-dim); text-decoration: line-through; }
.holon-editor-content hr.he-pagebreak { border: 0; border-top: 2px dashed var(--he-line); margin: 1.2em 0; position: relative; }
.holon-editor-content hr.he-pagebreak::after { content: "Page break"; position: absolute; left: 50%; top: -0.75em; transform: translateX(-50%); background: var(--he-bg); padding: 0 8px; font: 600 10px/1 var(--he-font); letter-spacing: .06em; text-transform: uppercase; color: var(--he-dim); }
@media print { .holon-editor-content hr.he-pagebreak { break-after: page; page-break-after: always; border: 0; margin: 0; height: 0; } .holon-editor-content hr.he-pagebreak::after { display: none; } }

.he-rvideo svg { width: 16px; height: 16px; }
.holon-editor-content iframe { display: block; width: 100%; max-width: 680px; aspect-ratio: 16 / 9; height: auto; margin: .4em 0; border: 0; border-radius: 8px; background: #000; }

.he-rgroup[aria-label="Editing"] { margin-left: auto; border-right: 0; border-left: 1px solid var(--he-line); }
.holon-editor-content .he-cols { column-gap: 2.2em; margin: 0 0 .7em; }
.holon-editor-content .he-cols > :last-child { margin-bottom: 0; }
.holon-editor-content td.he-cell-sel, .holon-editor-content th.he-cell-sel { background: rgba(31,111,235,.18); outline: 1px solid var(--he-focus); }
.he-ctxmenu { position: fixed; z-index: 60; min-width: 180px; padding: 5px; background: var(--dd-panel, #fff); border: 1px solid var(--dd-line, #d3dcec); border-radius: 8px; box-shadow: 0 10px 32px rgba(8,15,30,.26); font: 500 13px/1 Inter, system-ui, sans-serif; color: var(--dd-ink, #0c1830); }
.he-ctxitem { display: block; width: 100%; height: 30px; padding: 0 12px; margin: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.he-ctxitem:hover:not(:disabled) { background: rgba(31,111,235,.12); }
.he-ctxitem:disabled { opacity: .4; cursor: default; }
.he-ctxitem:focus-visible { outline: 2px solid var(--dd-focus, #1f6feb); outline-offset: -2px; }
.he-ctxdanger { color: #b3261e; }
.he-ctxsep { height: 1px; margin: 4px 6px; background: var(--dd-line, #d3dcec); }
html[data-theme="dark"] .he-ctxmenu { background: #14213a; color: #e8eefb; border-color: #26375a; }
.he-rlink svg { width: 16px; height: 16px; }
.he-linkform { display: flex; flex-direction: column; gap: 8px; padding: 4px 6px 6px; min-width: 260px; }
.he-linkform .he-rfield { flex-direction: column; align-items: stretch; gap: 4px; margin: 0; }
.he-linkform .he-rfield .he-input { width: 100%; }
.he-linkform .he-check { height: auto; font-weight: 500; }
.he-linkbtns { display: flex; gap: 8px; margin-top: 2px; }
.he-linkbtns .he-pbtn { flex: 0 0 auto; }
.he-linkbtns .he-pbtn-primary { flex: 1 1 auto; }
.holon-editor-content .he-callout { position: relative; margin: 0 0 .8em; padding: 12px 14px 12px 16px; border-left: 4px solid var(--co-accent,#2a5298); border-radius: 8px; background: var(--co-bg,#eef4ff); }
.holon-editor-content .he-callout > :last-child { margin-bottom: 0; }
.holon-editor-content .he-callout::before { content: var(--co-label,"Note"); display: block; font: 700 11px/1 "Space Grotesk", Inter, sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--co-accent,#2a5298); margin-bottom: 6px; }
.holon-editor-content .he-callout[data-type="note"] { --co-accent:#2563eb; --co-bg:#eff5ff; --co-label:"Note"; }
.holon-editor-content .he-callout[data-type="tip"] { --co-accent:#0e9f6e; --co-bg:#ecfdf3; --co-label:"Tip"; }
.holon-editor-content .he-callout[data-type="warning"] { --co-accent:#d97706; --co-bg:#fffbeb; --co-label:"Warning"; }
.holon-editor-content .he-callout[data-type="important"] { --co-accent:#dc2626; --co-bg:#fef2f2; --co-label:"Important"; }
.holon-editor-content .he-callout[data-type="objective"] { --co-accent:#7c3aed; --co-bg:#f5f3ff; --co-label:"Objective"; }
.he-rcallout svg { width: 16px; height: 16px; }
.he-calloutitem { display: flex; align-items: center; gap: 8px; }
.he-cochip { width: 14px; height: 14px; border-radius: 4px; flex: 0 0 14px; border-left: 4px solid; }
.he-callout-note .he-cochip { background:#eff5ff; border-color:#2563eb; }
.he-callout-tip .he-cochip { background:#ecfdf3; border-color:#0e9f6e; }
.he-callout-warning .he-cochip { background:#fffbeb; border-color:#d97706; }
.he-callout-important .he-cochip { background:#fef2f2; border-color:#dc2626; }
.he-callout-objective .he-cochip { background:#f5f3ff; border-color:#7c3aed; }
.he-source { display: block; width: 100%; min-height: var(--he-min-h, 160px); box-sizing: border-box; padding: 14px 16px; border: 0; outline: none; resize: vertical; background: var(--he-code-bg, #0c18300f); color: var(--he-ink); font: 13px/1.6 var(--he-mono); tab-size: 2; white-space: pre-wrap; overflow-wrap: anywhere; }
.he-rsource svg { width: 16px; height: 16px; }
.holon-editor.he-sourcemode .he-rtab:not([data-tab="home"]),
.holon-editor.he-sourcemode .he-rpane .he-rgroup:not([aria-label="Editing"]) { opacity: .4; pointer-events: none; }
/* ── footer ── */
.he-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px;
  padding: 4px 10px; border-top: 1px solid var(--he-line); background: var(--he-bar);
  border-radius: 0 0 var(--he-radius) var(--he-radius); font-size: 12px; color: var(--he-dim);
}
.he-status { flex: 1 1 auto; min-width: 0; }
.he-count { flex: 0 0 auto; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .he-group { padding: 0 4px; }
  .he-select { max-width: 112px; }
  .he-field { flex-basis: 100%; }
  .holon-editor-content { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) { .holon-editor * { transition: none !important; animation: none !important; } }
@media (forced-colors: active) {
  .he-btn.on, .he-btn[aria-pressed="true"] { border-color: Highlight; forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .holon-editor-content img.he-selected { outline-color: Highlight; }
}