/* common/block.css — the shared authoring block surface styles (common/block-surface.js).
 *
 * Both editors render the main body as `.blk` elements via the same surface, so its look lives here and
 * is loaded by editor/index.html and template-editor/index.html alike. All colours/spacing come from
 * common/tokens.css, which both pages load first. The template's control-branch content keeps its own
 * `.tc` / `.tmpl-*` styles (in template-editor.css); this file styles only the shared `.blk` world. */

.blk { outline: none; padding: .1rem .15rem; border-radius: var(--r-xs); min-height: 1.3em; }
.blk[contenteditable="true"]:focus { box-shadow: inset 0 0 0 2px var(--accent-ring); }
.blk-heading { position: relative; font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; margin: .3rem 0 .2rem; }
/* The heading's structural level (H1…): a small corner badge — a CSS ::before, so it never becomes
   editable text or reaches readBlock. Right-click the heading to change the level. */
.blk-heading[data-hlevel]::before {
  content: attr(data-hlevel);
  position: absolute; top: .1rem; right: .2rem; pointer-events: none;
  font-size: .56rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--accent-strong); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 0 .35rem; opacity: .5;
}
.blk-heading:hover[data-hlevel]::before, .blk-heading:focus[data-hlevel]::before { opacity: 1; }
/* A semantic block (turn, quote, …) shows a corner badge naming its type — and a turn its speaker — so
   you can recognise the element. A CSS ::before, so it never reaches readBlock. Right-click to edit. */
.blk[data-sem] { position: relative; }
.blk[data-sem]::before {
  content: attr(data-sem);
  position: absolute; top: .1rem; right: .2rem; pointer-events: none; max-width: 55%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: .56rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
  color: var(--accent-strong); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 0 .4rem; opacity: .55;
}
.blk[data-sem]:hover::before, .blk[data-sem]:focus::before { opacity: 1; }
/* Semantic view: outline each annotated block so the semantic element is explicit, and pin its badge on. */
.blocks[data-mode="semantic"] .blk[data-sem] {
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--border));
  border-radius: var(--r-xs); padding: .6rem .4rem .25rem;
}
.blocks[data-mode="semantic"] .blk[data-sem]::before,
.blocks[data-mode="semantic"] .blk-heading[data-hlevel]::before { opacity: 1; }
.blk-paragraph { margin: .35rem 0; }
.blk-quote { margin: .5rem 0; padding-left: .9rem; border-left: 3px solid var(--border-strong); color: var(--muted); font-style: italic; }
.blk-turn { margin: .35rem 0; }
.blk-loose { margin: .35rem 0; color: var(--faint); }
.blk-group { position: relative; margin: .5rem 0; padding-left: .8rem; border-left: 2px solid var(--border-strong); }
.blk-group + .blk-group { margin-top: .6rem; }
/* A section is a container block: its hover toolbar (insert before/after, name) sits top-right, shown on
   hover of THIS section only (direct child, so a nested section's bar doesn't appear too). */
.blk-group > .blk-tools { position: absolute; top: -.3rem; right: 0; opacity: 0; transition: opacity .12s ease; display: flex; align-items: center; gap: .2rem; }
.blk-group:hover > .blk-tools, .blk-group > .blk-tools:focus-within { opacity: 1; }
.blk-group[data-name]::before { content: attr(data-name); position: absolute; top: -.55rem; left: .4rem; font-size: .64rem; line-height: 1; padding: .1rem .3rem; border-radius: 3px; background: var(--accent); color: #fff; opacity: .85; pointer-events: none; }
/* The head strip above the first block: a hover-revealed "+ ———" line to add a paragraph at the very
   top, whatever the first block is (mirrors the empty tail strip at the bottom). */
.blk-head-insert { display: flex; align-items: center; gap: .4rem; height: .7rem; width: 100%; margin: 0 0 .15rem; padding: 0; cursor: pointer; background: none; border: 0; font: inherit; text-align: left; }
.blk-head-plus { font-size: .8rem; font-weight: 700; color: var(--faint); opacity: 0; transition: opacity .12s ease; padding: 0 .2rem; line-height: 1; }
.blk-head-insert::after { content: ""; flex: 1; height: 1px; background: var(--border); opacity: 0; transition: opacity .12s ease; }
.blk-head-insert:hover .blk-head-plus, .blk-head-insert:focus-visible .blk-head-plus { opacity: 1; color: var(--accent-strong); }
.blk-head-insert:hover::after, .blk-head-insert:focus-visible::after { opacity: 1; }
/* A footnote's body block: labelled "Footnote N" (matching the marker's superscript) so it reads as
   the note's content, not a stray paragraph. The label is a CSS ::before, so it is not editable text
   and readBlock never sees it. */
.blk-note {
  position: relative;
  margin: .3rem 0 .3rem 2.4rem;
  padding: .1rem .15rem .1rem .6rem;
  border-left: 3px solid var(--accent-ring);
  color: var(--muted);
  font-size: .93em;
}
.blk-note::before {
  content: "Footnote " attr(data-note);
  position: absolute; left: -2.4rem; top: .15rem; width: 2.2rem;
  text-align: right;
  font-size: .66rem; font-weight: 700; letter-spacing: .02em;
  color: var(--accent-strong);
  text-transform: uppercase;
}

/* structural blocks (list / table / dataset), with an edit affordance */
.blk-structure { position: relative; margin: .6rem 0; }
.blk-tools { position: absolute; top: -.3rem; right: 0; opacity: 0; transition: opacity .12s ease; display: flex; align-items: center; gap: .2rem; }
.blk-structure:hover .blk-tools, .blk-tools:focus-within { opacity: 1; }
/* Optional per-element name: an editable field in the (hover) tools bar, plus a persistent corner
   badge so a named element is recognisable at a glance without hovering. */
.blk-name { width: 8rem; max-width: 22vw; font-size: .72rem; padding: .1rem .3rem; border: 1px solid var(--border); border-radius: 3px; background: var(--surface, #fff); color: var(--text); }
.blk-name:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.blk-structure[data-name]::before { content: attr(data-name); position: absolute; top: -.55rem; left: .4rem; font-size: .64rem; line-height: 1; padding: .1rem .3rem; border-radius: 3px; background: var(--accent); color: #fff; opacity: .85; pointer-events: none; }
.blk-structure table { border-collapse: collapse; width: 100%; font-size: .92em; }
/* Mirror the engine's default table look (assets/scml-default-web.css): horizontal rules only, a header
   marked by weight + a strong bottom rule (no grey fill), so the surface matches the HTML/PDF previews. */
.blk-structure th, .blk-structure td { padding: .3rem .5rem; text-align: left; vertical-align: top; white-space: pre-wrap; min-width: 3rem; }
.blk-structure td { border-bottom: 1px solid var(--border); }
.blk-structure th { font-weight: 700; border-bottom: 2px solid var(--text); }
.blk-structure [contenteditable]:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.blk-structure li[contenteditable] { outline: none; }
.blk-structure li[contenteditable]:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
.blk-structure td.cell-subtotal { font-weight: 700; }
.blk-structure td.cell-group { background: var(--surface-2); }
.blk-structure ul, .blk-structure ol { margin: .2rem 0; padding-left: 1.4rem; }
.blk-structure li { margin: .1rem 0; white-space: pre-wrap; }
.blk-dataset { font-family: var(--mono); font-size: .82rem; color: var(--muted); padding: .4rem .6rem; background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--r-sm); }

/* inline marks — visual mode: recognizable formatting */
.blk strong { font-weight: 700; }
.blk .data-money, .blk .data-number, .blk .data-measure, .blk .data-datetime, .blk .data-name,
.blk .data-abbrev, .blk .data-code, .blk .data-formula {
  background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 3px; padding: 0 .1rem;
}
.blk .ref-internal, .blk .ref-external { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; cursor: text; }
.blk .redaction { background: var(--ink); color: var(--ink); border-radius: 3px; }
.blk .scml-unknown { border-bottom: 2px dotted var(--warn); }
/* A music primitive shows its compact linear notation (the spoken form rides on aria-label). */
.blk .scml-music { font-family: ui-monospace, "Cascadia Code", "Consolas", monospace; white-space: nowrap; }
/* inline marks — semantic mode: a tinted underline that shows the tag boundary without changing glyphs */
.blk .ann-mark { border-bottom: 2px solid var(--accent-ring); background: var(--accent-soft); border-radius: 2px; }

/* zero-width anchors (footnote / annotation points). The glyph is CSS `::after` content — not real
   DOM text — so readBlock still reads these back as a zero-width span. A footnote (`ann-note`) shows a
   numbered superscript; any other point mark shows a neutral bullet. */
.blk .ann-point { display: inline-block; cursor: pointer; }
.blk .ann-point::after { content: "•"; font-size: .7em; vertical-align: super; color: var(--muted); }
.blk .ann-note::after {
  counter-increment: scml-note; content: counter(scml-note);
  font-size: .68em; vertical-align: super; font-weight: 700;
  color: var(--accent-strong); padding: 0 .1em;
}

/* Slash insert menu — a floating, searchable palette of block constructs opened by typing "/" at the
   start of an empty block. Positioned at the caret; filtered by what follows the "/". */
.slash-menu {
  /* Above the running-fragment modal overlay (z 1000) so the insert menu shows while editing a header. */
  position: fixed; z-index: 1100; min-width: 12rem; max-height: 16rem; overflow: auto;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 9px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18); padding: 0.25rem; display: flex; flex-direction: column; gap: 1px;
}
.slash-menu[hidden] { display: none; }
.slash-item {
  text-align: left; border: 0; background: transparent; color: var(--ink); cursor: pointer;
  font: inherit; font-size: 0.85rem; padding: 0.3rem 0.5rem; border-radius: 6px;
}
.slash-item:hover, .slash-item.active { background: var(--accent-soft); }
.slash-empty { padding: 0.35rem 0.5rem; font-size: 0.82rem; color: var(--muted); }

/* The floating "+" that follows the focused block; opens the same insert menu to add a block after it. */
.block-plus {
  position: fixed; z-index: 1100; width: 1.25rem; height: 1.25rem; padding: 0; line-height: 1;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--muted);
  font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.block-plus[hidden] { display: none; }
.block-plus:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }