/* SCML Template Editor — the shared frame (reset, header, buttons, small controls, theme toggle) comes
   from common/shell.css; this file only adds the template-editor-specific surfaces: the profile/package
   bar, the schema and body builders, the template marks, the preview and the findings. Token-based and
   theme-aware via common/tokens.css. */

/* The status pill and the section headers (.pane-label / .pl-title / .view-controls) come from
   common/shell.css now — this app only keeps the bits below that are template-editor-specific. */

/* The profile + packages bar (.profilebar) and its dropdown now live in the shared common/shell.css. */

/* Toolbar (the palette ribbon: tabs row + item row; styled in common/shell.css) */
/* The structure ribbon and the profile selector belong to the Template window: they live inside its panel
   (below the pane label), not in the global app chrome, so they move/hide with that panel. The profile
   selector sits to the left of the ribbon on one row to save vertical space. */
#toolbar { display: flex; flex: 0 0 auto; flex-direction: column; gap: var(--space-1); padding: var(--space-2) 1rem; background: var(--surface); border-bottom: 1px solid var(--border); }
/* Top-align so the profile button stays on the ribbon's first (tab) row and does not drift down when the
   ribbon wraps to a second line. Its top padding matches #toolbar's, keeping it level with the tabs. */
.tmpl-ribbon { flex: 0 0 auto; display: flex; align-items: flex-start; background: var(--surface); border-bottom: 1px solid var(--border); padding-left: 1rem; }
.tmpl-ribbon > .tmpl-profile { flex: 0 0 auto; display: flex; align-items: center; padding-top: var(--space-2); }
.tmpl-ribbon > #toolbar { flex: 1 1 auto; min-width: 0; border-bottom: none; padding-left: var(--space-3); }

/* Layout — the work area is a split tree built at runtime from a preset (common/layout.js): nested
   flex boxes (.split) with a draggable gutter between the two children of each split, and a .zone leaf
   holding one movable panel. A grip in each panel header drags it to another zone (they swap); the
   Panels menu toggles panels on/off; the Layout menu switches presets. Preset, placement and sizes
   persist. */
main { flex: 1; display: flex; min-height: 0; }
#layout-root { flex: 1; display: flex; min-width: 0; min-height: 0; }
/* Header channel field + the "Options" popover (Language, Zone, and the preview aids/toggles). */
.hdr-field { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--muted); }
.hdr-field > select { font-size: .8rem; }
.opts-panel { min-width: 16rem; max-width: 26rem; padding: .5rem .6rem; display: flex; flex-direction: column; gap: .55rem; }
.opts-panel .opts-row { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.opts-panel label { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; }
/* The tour sits at the bottom of the Weergave panel, set off by a divider — a low-key entry point
   rather than a standing toolbar button (it is mostly a first-run affordance). */
.opts-panel .opts-row-tour { border-top: 1px solid var(--border); padding-top: .5rem; margin-top: .1rem; }
/* Style editor follows the app Channel: its Target select is hidden; a note shows for a channel with no
   styling (fingerspelling), and the gallery is hidden then. */
.se-target-wrap[hidden], .se-nostyle[hidden], #se-gallery[hidden] { display: none; }
.se-nostyle { font-size: .8rem; color: var(--muted); font-style: italic; }
/* Bottom status bar: the app status tag (left) and a clickable validation flag (right) that opens the
   Validation panel. */
.statusbar { flex: 0 0 auto; display: flex; align-items: center; gap: .6rem; padding: .2rem .8rem; min-height: 1.7rem;
  border-top: 1px solid var(--border); background: var(--surface); }
.statusbar-spacer { flex: 1 1 auto; }
.statusbar-flag { font: inherit; font-size: .72rem; line-height: 1.4; border: 1px solid var(--border); border-radius: 999px;
  padding: .05rem .6rem; cursor: pointer; background: var(--surface); color: var(--text-dim); }
.statusbar-flag:hover { border-color: var(--text-dim); }
.statusbar-flag.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.statusbar-flag.bad { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-bg); }
.split { display: flex; flex: 1 1 0; min-width: 0; min-height: 0; }
.split-row { flex-direction: row; }
.split-col { flex-direction: column; }

/* A zone holds exactly one panel that fills it; it scrolls if the panel overflows. */
/* `flex` lets a lone root zone (the Full-focus preset) fill #layout-root; inside a split the gutter sets
   explicit inline flex on each child, which overrides this default. */
.zone { display: flex; flex: 1 1 0; flex-direction: column; min-width: 0; min-height: 0; overflow-y: auto; background: var(--surface); }
.region { display: flex; flex-direction: column; min-height: 0; }
.region.scroll { overflow-y: auto; }

/* Gutters between the two children of a split. */
.gutter { flex: 0 0 auto; position: relative; background: var(--border); z-index: 5; touch-action: none; }
.gutter-v { width: 5px; cursor: col-resize; }
.gutter-h { height: 5px; cursor: row-resize; }
.gutter::after { content: ""; position: absolute; inset: -3px; } /* a fatter invisible hit area */
.gutter:hover, .gutter.dragging { background: var(--accent); }

/* Skip link: off-screen until focused, then pinned top-left so keyboard users can jump past the header. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: .4rem .7rem;
  background: var(--accent-strong, #2b6);
  color: #fff;
  border-radius: 0 0 var(--r-sm) 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

body.splitting { user-select: none; }
body.splitting iframe { pointer-events: none; } /* let the drag cross the preview iframe */

/* Movable panels: one per zone; a grip in the header drags it to another zone, where they swap. */
.panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; flex: 1 1 auto; }
/* Brief flash on the node an Inspector click (outline / annotation) navigates to. */
@keyframes node-flash { from { background: var(--accent-soft); } to { background: transparent; } }
.node-flash { animation: node-flash 1.4s ease-out; }
/* Inspector panel: collapsible sections (outline / annotations / media / bundle), like the document editor. */
.inspector-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }
.inspector-body > details { border-bottom: 1px solid var(--border); }
.inspector-body > details > summary { cursor: pointer; padding: 0.4rem 0.6rem; font-size: 0.72rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.03em; color: var(--text-dim); user-select: none; display: flex; align-items: center; gap: 0.4rem; }
.inspector-body > details[open] > summary { color: var(--text); }
.inspector-body > details > :not(summary) { margin: 0 0.4rem 0.5rem; }
.inspector-body .findings { max-height: none; padding: 0.3rem 0.2rem; }
.inspector-body .res-item { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.2rem 0.2rem; font-size: 0.78rem; }
.inspector-body .res-item .res-id { overflow-wrap: anywhere; }
.panel[data-panel="schema"], .panel[data-panel="signing"] { padding: .6rem; }
.panel > section { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.panel-grip { cursor: grab; color: var(--text-dim); user-select: none; padding: 0 .15rem; line-height: 1; }
.panel-grip:hover { color: var(--text); }
.panel-grip:active { cursor: grabbing; }
body.panel-dragging { user-select: none; }
body.panel-dragging iframe { pointer-events: none; } /* so a drop target under the preview still gets the drop */
.zone.drop-target { outline: 2px dashed var(--accent); outline-offset: -4px; background: color-mix(in srgb, var(--accent) 8%, transparent); }
.hint { margin: 0; font-size: var(--text-xs); color: var(--text-dim); }
.view-controls select { font: inherit; font-size: var(--text-sm); max-width: 12rem; }
#preview { flex: 1; border: 0; width: 100%; min-height: 0; background: var(--surface); }
#sample { flex: 1 1 auto; width: 100%; min-height: 4rem; border: 0; border-top: 1px solid var(--border); padding: .6rem .9rem; font-family: ui-monospace, monospace; font-size: .82rem; background: var(--surface-2); color: var(--text); resize: none; }
/* A status bar under the Sample data editor: live JSON + schema-conformance feedback as the data is typed. */
.sample-status { flex: 0 0 auto; max-height: 7rem; overflow-y: auto; padding: .35rem .9rem; font-size: .74rem; line-height: 1.4;
  border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: .15rem; }
.sample-status.ok { color: var(--ok); background: var(--ok-bg); }
.sample-status.bad { color: var(--warn); background: var(--warn-bg); }
.sample-status .f-path { font-family: ui-monospace, monospace; opacity: .8; }

/* The Layout / Panels menus sit at the right of the profile bar. */
.profilebar-spacer { flex: 1 1 auto; }

/* Schema builder */
.card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: .5rem .7rem; }
.card > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem; }
.card > summary::-webkit-details-marker { display: none; }
/* A clear disclosure chevron so it reads as collapsible: points right when closed, down when open. */
.card > summary::before { content: "\25B8"; font-size: .8em; color: var(--text-dim); transition: transform .12s ease; }
.card[open] > summary::before { transform: rotate(90deg); }
/* Secondary actions (schema import/export) sit as an overflow (⋯) menu at the right of the card header. */
.summary-menu { margin-left: auto; }
.icon-btn { font: inherit; line-height: 1; padding: .1rem .35rem; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-dim); cursor: pointer; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn[aria-expanded="true"] { background: var(--surface-2); color: var(--text); }
#schema { display: flex; flex-direction: column; gap: .4rem; margin: .6rem 0; }
.field-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .35rem .4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.field-host { display: flex; flex-direction: column; gap: .4rem; }
/* Each nesting level is its own indented column with a guide line, so depth stays legible however
   deep records/lists nest (the border + indent compound one step per level). */
.nest { display: flex; flex-direction: column; gap: .4rem; margin-left: .55rem; padding-left: .7rem; border-left: 2px solid var(--border-strong); }
.field-row input[type="text"], .field-row select, .field-row input[type="number"] { font: inherit; font-size: .8rem; padding: .25rem .35rem; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--surface); color: var(--text); }
.field-row .f-name { width: 8rem; }
.field-row .f-rule { width: 6rem; }
.field-row label.switch { font-size: .75rem; display: inline-flex; gap: .2rem; align-items: center; color: var(--text-dim); }
.field-row .f-remove { margin-left: auto; }
/* Type-specific rules, collapsed by default (toggled by the ⚙ button) so the schema stays compact. */
.field-extra { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: 0 0 .1rem 1.1rem; padding: .35rem .5rem; border-left: 2px solid var(--border-strong); background: var(--surface-2); border-radius: var(--radius-sm); }
.f-opts.on { color: var(--accent); border-color: var(--accent); }
/* Enum values as chips + a dashed "new value" box, so it is clear each entry is its own value. */
.enum-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; flex: 1 1 100%; }
.enum-tag { display: inline-flex; align-items: center; gap: .15rem; padding: .1rem .1rem .1rem .45rem; font-size: .8rem; background: var(--chip); color: var(--chip-ink); border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chip-ink) 25%, transparent); }
.enum-tag-x { border: 0; background: transparent; color: inherit; cursor: pointer; opacity: .55; padding: 0 .2rem; line-height: 1; }
.enum-tag-x:hover { opacity: 1; }
.enum-add { min-width: 7rem; font: inherit; font-size: .8rem; padding: .2rem .4rem; color: var(--text); background: var(--surface); border: 1px dashed var(--border-strong); border-radius: 4px; }
.enum-add::placeholder { color: var(--text-dim); }
.panel-actions { display: flex; gap: .5rem; margin-top: .4rem; flex-wrap: wrap; align-items: center; }
.constraints { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.constraints li { font-size: .78rem; display: flex; gap: .5rem; align-items: center; }
.constraints .c-del { margin-left: auto; }

/* Body editor — grows to fill the pane so the template text sits at the top and the (collapsible)
   data-schema / signing cards settle at the bottom. */
/* The template body scrolls INSIDE the panel so the header (pane-label) and the breadcrumb
   (context-bar) stay pinned at the panel's top and bottom instead of scrolling away with the text. */
.body { display: flex; flex-direction: column; gap: .5rem; flex: 1 1 0; min-height: 0; overflow-y: auto; padding: .9rem .9rem 3rem; }
/* The body is a scrolling flex column; without this a tall block (a table with a repeat/if row) is shrunk
   below its content height and its bottom (the "+ row" affordance) overlaps the next block. */
.body > * { flex-shrink: 0; }
.tc { border: 0; border-radius: var(--radius-sm); padding: .2rem .3rem; outline: none; }
/* A content block is just editable text (no box on hover). The focused one gets the same subtle inset
   ring as the document editor — nothing more. */
.tc:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
/* Inline condition / repetition: a bracketed region around editable text, with a small badge. */
.tmpl-ir { border-radius: 3px; padding: 0 .15em 0 0; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
.tmpl-ir::before { content: attr(data-ir); font-size: .68em; font-weight: 700; letter-spacing: .02em; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 3px 0 0 3px; padding: 0 .3em; margin-right: .25em; user-select: none; }
.tmpl-repeat { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--region-line, var(--accent)) 40%, transparent); }
.tmpl-repeat::before { color: var(--region-line, var(--accent)); background: color-mix(in srgb, var(--region-line, var(--accent)) 12%, transparent); }
/* A conditional column: the cell carries a corner badge with the condition. */
.tmpl-cell-cond { position: relative; box-shadow: inset 0 2px 0 var(--accent); }
.tmpl-cell-cond::before { content: attr(data-cond); position: absolute; top: 0; right: 0; font-size: .62em; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); padding: 0 .3em; border-radius: 0 0 0 3px; pointer-events: none; user-select: none; }
/* Frame the units a multi-unit selection covers — what a condition / repeat would wrap. */
.wrap-sel { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
/* A <tr> can't take an outline, so frame the row through its cells: a uniform tint plus an accent border
   top/bottom (and left/right on the end cells). Qualify with th/td so it also wins over the header-cell
   background (.tmpl-grid th), which is why a selected header row previously showed only its borders. */
tr.wrap-sel { outline: none; }
tr.wrap-sel > th, tr.wrap-sel > td {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent);
}
tr.wrap-sel > :first-child { box-shadow: inset 2px 0 0 var(--accent), inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent); }
tr.wrap-sel > :last-child { box-shadow: inset -2px 0 0 var(--accent), inset 0 2px 0 var(--accent), inset 0 -2px 0 var(--accent); }
.tc[data-block="heading"] { font-size: 1.4rem; font-weight: 600; }
.tc[data-block="block"] { }
.tc[data-block="list.item"] { list-style: disc; margin-left: 1.4rem; display: list-item; }
.tc[data-block="table.cell"] { }
.tc-wrap { position: relative; }

/* A heading's structural level: a small badge (H1…) with indent/outdent buttons that nest/unnest a
   section. The badge is always visible; the buttons appear on hover, like the other block controls. */
.tmpl-hlevel { display: inline-flex; align-items: center; gap: .2rem; margin-bottom: .1rem; }
.tmpl-hlevel-badge {
  font-size: .6rem; font-weight: 700; letter-spacing: .03em; color: var(--accent);
  border: 1px solid var(--border); border-radius: 999px; padding: 0 .4rem; background: var(--surface-2);
}
.tmpl-hlevel .btn {
  opacity: 0; padding: 0 .3rem; font-size: .75rem; line-height: 1.3; color: var(--text-dim);
  background: none; border-color: transparent; transition: opacity .12s ease;
}
.tc-wrap:hover .tmpl-hlevel .btn, .tmpl-hlevel:focus-within .btn { opacity: 1; }
.tmpl-hlevel .btn:hover { color: var(--accent); background: var(--surface-2); border-color: var(--border); }

.tmpl-var { display: inline; background: var(--chip); color: var(--chip-ink); border-radius: 4px; padding: 0 .25rem; font-size: .95em; white-space: nowrap; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chip-ink) 30%, transparent); }
.tmpl-var::before { content: "«"; opacity: .55; }
.tmpl-var::after { content: "»"; opacity: .55; }
.tmpl-var:empty::after { content: "«" attr(data-field) "»"; opacity: 1; }
.tmpl-var:empty::before { content: none; }
.tc strong { font-weight: 600; }

/* Semantic inline marks (data-t): a subtle tint / dotted underline so authors see the markup they
   applied in the contenteditable. Presentation only — the engine annotation comes from data-t. */
.mark { border-radius: 3px; }
.mark-data { text-decoration: underline dotted; text-decoration-color: color-mix(in srgb, var(--text-dim) 90%, transparent); text-underline-offset: 3px; }
.mark-lang { text-decoration: underline dotted; text-decoration-color: var(--ok); text-underline-offset: 3px; }
.mark-dir { text-decoration: underline dashed; text-decoration-color: var(--text-dim); text-underline-offset: 3px; }
.mark-ref { color: #2563eb; text-decoration: underline; }
:root[data-theme="dark"] .mark-ref { color: #7da7ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mark-ref { color: #7da7ff; } }
.mark-redaction { background: color-mix(in srgb, var(--text) 14%, transparent); text-decoration: line-through; text-decoration-color: var(--text-dim); }
.mark-note { display: inline; }
.mark-note::after { content: "†"; vertical-align: super; font-size: .7em; font-weight: 600; color: #2563eb; cursor: help; }
:root[data-theme="dark"] .mark-note::after { color: #7da7ff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mark-note::after { color: #7da7ff; } }
.mark.scml-unknown { text-decoration: underline wavy; text-decoration-color: var(--warn); }
.dialog-error { color: var(--warn); font-size: .78rem; min-height: 1em; margin: -.3rem 0 .6rem; }
/* Formula (Content-MathML) field: textarea + "?" reference, live validity + rendered preview. */
.formula-bar { display: flex; gap: .4rem; align-items: flex-start; }
.formula-bar .formula-input { flex: 1; }
/* The dataset data-grid field (editable table + CSV paste). */
.grid-field { display: flex; flex-direction: column; gap: .4rem; }
.grid-table { border-collapse: collapse; }
.grid-table td { border: 1px solid var(--border, #ccc); padding: 0; }
.grid-table input { border: 0; background: transparent; color: inherit; font: inherit; width: 6.5em; padding: .2em .35em; }
.grid-table input:focus { outline: 2px solid var(--accent-ring, #59f); outline-offset: -2px; }
.grid-table input.grid-hcell { font-weight: 600; background: var(--muted-bg, #eef1f4); }
.grid-bar { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; }
.grid-btn { font: inherit; padding: .15em .5em; cursor: pointer; }
.grid-csv { width: 100%; font-family: ui-monospace, monospace; }
.grid-hint { margin: .3rem 0 0; font-size: .78rem; color: var(--muted); }
.grid-scroll { max-height: 45vh; overflow: auto; border: 1px solid var(--border, #ccc); border-radius: 4px; }
.grid-sizebar { display: flex; gap: .8rem; align-items: center; margin-bottom: .4rem; }
.grid-numlabel { display: inline-flex; gap: .3rem; align-items: center; font-size: .82rem; color: var(--muted); }
.grid-num { width: 3.4rem; font: inherit; }
.dialog-hint { display: block; margin: .15rem 0 .1rem; font-size: .76rem; line-height: 1.35; color: var(--muted); }
.dialog-advanced { margin: .2rem 0; }
.dialog-advanced > summary { cursor: pointer; font-size: .82rem; color: var(--muted); padding: .15rem 0; }
.dialog-advanced[open] > summary { margin-bottom: .3rem; }
.formula-help-toggle { flex: none; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--accent-strong); font-weight: 700; line-height: 1; cursor: pointer; }
.formula-help-toggle:hover { border-color: var(--accent); color: var(--accent); }
.formula-status { font-size: .78rem; min-height: 1.1em; color: var(--muted); overflow-wrap: anywhere; }
.formula-status.ok { color: var(--ok); }
.formula-status.bad { color: var(--warn); }
.formula-preview { font-size: 1.15rem; overflow-x: auto; }
.formula-preview:not(:empty) { padding: .35rem .5rem; background: var(--accent-soft); border-radius: var(--radius-sm); }
.formula-help { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .5rem .6rem; background: var(--surface); max-height: 16rem; overflow: auto; font-size: .78rem; }
.formula-help-hint { display: block; color: var(--muted); margin-bottom: .4rem; }
.formula-help-table { border-collapse: collapse; width: 100%; }
.formula-help-table th { text-align: left; color: var(--muted); font-weight: 600; padding: .15rem .4rem; border-bottom: 1px solid var(--border); }
.formula-help-table td { padding: .15rem .4rem; vertical-align: top; }
.formula-help-table td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.formula-example { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--accent-strong); cursor: pointer; padding: .1rem .3rem; font-size: .76rem; }
.formula-example:hover { border-color: var(--accent); color: var(--accent); }
.formula-help-sub { display: block; margin-top: .5rem; color: var(--muted); font-weight: 600; }
.formula-consts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; }
.formula-const code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--accent-soft); padding: 0 .25rem; border-radius: 4px; }
.dialog-label { color: var(--text); font-weight: 500; }

/* Structure containers (section / quote / turn) render as a light left-bordered group — like the
   document editor's sections — with the type label + controls only on hover. Tables and lists drop the
   border/indent entirely: the grid and the bullets are self-evident. */
.container-block { position: relative; border-left: 2px solid var(--border); padding: .05rem 0 .1rem .6rem; margin: .15rem 0; }
.container-block[data-block="table"], .container-block[data-block="table.row"], .container-block[data-block="list"] { border-left: 0; padding-left: 0; margin: .1rem 0; }
.container-head { display: flex; align-items: center; gap: .4rem; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); opacity: 0; transition: opacity .12s ease; }
.container-block:hover > .container-head { opacity: .8; }

/* A section is seamless (like the document editor): a subtle left-bordered nested group, no type label —
   just small unwrap/delete controls on hover. Content is edited inline, exactly like top-level blocks. */
.tmpl-section { position: relative; border-left: 2px solid var(--border); padding-left: .6rem; margin: .15rem 0; }
.section-children { display: flex; flex-direction: column; gap: .35rem; }
.section-tools { position: absolute; top: .1rem; right: .1rem; display: flex; gap: .1rem; opacity: 0; transition: opacity .12s ease; z-index: 1; }
.tmpl-section:hover > .section-tools, .section-tools:focus-within { opacity: 1; }
.section-tools .btn { padding: 0 .35rem; font-size: .72rem; line-height: 1.3; color: var(--text-dim); background: none; border-color: transparent; }
.section-tools .btn:hover { color: var(--accent); background: var(--surface-2); border-color: var(--border); }

/* Outline navigator (parity with the document editor): top-level body nodes, click to focus, drag to
   reorder. */
.outline { list-style: none; margin: 0; padding: .25rem; overflow: auto; flex: 1 1 auto; min-height: 0; }
.outline-item { display: flex; gap: .4rem; align-items: baseline; padding: .2rem .35rem; border-radius: 5px; cursor: grab; font-size: .8rem; }
.outline-item:hover { background: var(--surface-2); }
.outline-item.dragging { opacity: .5; }
.outline-item.drop-target { box-shadow: inset 0 2px 0 var(--accent); }
.outline-tag { flex: none; font-family: ui-monospace, monospace; font-size: .62rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-dim); min-width: 4rem; }
.outline-heading > .outline-text { font-weight: 600; }
.outline-text { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.region { border-left: 3px solid var(--region-line); padding: .05rem 0 .1rem .6rem; margin: .15rem 0; }
.region-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .2rem; font-size: .72rem; color: var(--text-dim); cursor: pointer; }
.region-head .region-kind { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.region-head .region-expr { font-family: ui-monospace, monospace; color: var(--text); }
.region-children { display: flex; flex-direction: column; gap: .35rem; }
.region-else { font-size: .68rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; margin: .25rem 0 .1rem; }

/* Legacy flex fallback (only the generic table.row path, off the real-<table> render, uses it). */
.table-row { display: flex; }
.table-row .tc { flex: 1; border: 1px solid var(--border); border-radius: 0; margin: 0 -1px -1px 0; }

/* The +add / remove affordances stay hidden until you hover the group. */
.container-block > .btn, .region > .btn { margin-top: .2rem; padding: .1rem .45rem; font-size: .7rem; color: var(--text-dim); background: none; border-color: transparent; opacity: 0; transition: opacity .12s ease; }
.container-block:hover > .btn, .region:hover > .btn { opacity: 1; }
.container-block > .btn:hover, .region > .btn:hover { color: var(--accent); background: var(--surface-2); border-color: var(--border); }
.node-actions { display: inline-flex; gap: .2rem; margin-left: auto; }
.node-actions .btn { padding: .05rem .3rem; font-size: .7rem; }

/* Real table / list rendering: a grid and a bulleted/numbered list like the document editor, with the
   cells / items as editable content leaves. Control-flow inside them renders as a spanning row / item. */
.tmpl-grid { border-collapse: collapse; width: 100%; font-size: .95em; }
.tmpl-grid th, .tmpl-grid td.tmpl-td { border: 1px solid var(--border); vertical-align: top; min-width: 3rem; padding: 0; }
.tmpl-td .tc, .tmpl-grid th .tc { padding: .3rem .45rem; outline: none; min-height: 1.4em; }
.tmpl-grid th { background: var(--surface-2); }
.tmpl-grid th .tc { font-weight: 700; }
.tmpl-td[data-role="subtotal"] .tc { font-weight: 700; }
.tmpl-td[data-role="group"] { background: var(--surface-2); }
.cf-cell { padding: .2rem .3rem; background: color-mix(in srgb, var(--region-line) 12%, transparent); }
.tmpl-list { margin: .2rem 0; padding-left: 1.5rem; }
.tmpl-list > li { margin: .12rem 0; }
.tmpl-list .tc { outline: none; }
.tmpl-list .tc[data-block="list.item"] { display: block; list-style: none; margin-left: 0; } /* no double bullet inside the real <li> */
.cf-item { list-style: none; margin-left: -1rem; }

/* Findings */
.findings { list-style: none; margin: 0; padding: .3rem .9rem .9rem; display: flex; flex-direction: column; gap: .3rem; max-height: 160px; overflow-y: auto; }
.findings li { font-size: .78rem; padding: .3rem .5rem; border-radius: 4px; background: var(--warn-bg); color: var(--warn); }
.findings li.ok { background: var(--ok-bg); color: var(--ok); }
.findings .f-path { font-family: ui-monospace, monospace; opacity: .8; }

/* Dialog */
/* Above the running-content modal (z 60) so a table/list builder opened from inside it is visible. */
#dialog-root:not([hidden]) { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.35); z-index: 1200; }
.dialog { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.1rem; width: min(28rem, 94vw); max-height: 88vh; overflow: auto; }
.dialog.dialog-wide { width: min(52rem, 94vw); }
/* Starter gallery: a responsive grid of pick-a-template cards. */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .7rem; margin-bottom: .9rem; }
.gallery-card { display: flex; flex-direction: column; gap: .3rem; text-align: left; padding: .8rem .9rem; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; transition: border-color .1s, background .1s; }
.gallery-card:hover, .gallery-card:focus-visible { border-color: var(--accent); background: var(--accent-soft, var(--surface)); outline: none; }
.gallery-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gallery-card-title { font-size: .92rem; font-weight: 600; }
.gallery-card-desc { font-size: .78rem; color: var(--text-dim); line-height: 1.35; }
.dialog h2, .dialog-title { display: block; font-size: 1rem; font-weight: 600; margin: 0 0 .8rem; }
.dialog-row { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; color: var(--text-dim); margin-bottom: .8rem; }
.dialog-row-check { flex-direction: row; align-items: center; gap: .45rem; }
.dialog-row-check .dialog-label { color: var(--text); font-weight: 500; }
/* Enum "is one of": a wrapping set of value checkboxes instead of a free-text field. */
.enum-checks { display: flex; flex-wrap: wrap; gap: .3rem .9rem; padding: .2rem 0; }
.enum-checks .switch { color: var(--text); font-size: .82rem; }
.dialog-row input, .dialog-row select, .dialog-row textarea { font: inherit; padding: .4rem .5rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.dialog-actions button { font: inherit; font-size: .85rem; padding: .4rem .7rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); cursor: pointer; }
.dialog-actions button[type="submit"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* Annotation context menu (right-click a mark) */
/* Above the running-fragment modal (overlay z 60, its own controls z 1000) so the context menu shows while
   editing a header/footer/side, not only in the body. */
.ctx-menu { position: fixed; z-index: 1100; min-width: 10rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: .25rem; display: flex; flex-direction: column; gap: .1rem; }
.ctx-head { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-dim); padding: .3rem .5rem .25rem; }
.ctx-item { text-align: left; background: none; border: none; padding: .35rem .5rem; border-radius: 4px; cursor: pointer; font: inherit; font-size: .85rem; color: var(--text); }
.ctx-item:hover, .ctx-item:focus-visible { background: color-mix(in srgb, var(--text) 8%, transparent); }
.ctx-item:focus-visible { outline: 2px solid var(--accent, #4a7); outline-offset: -2px; }
.ctx-danger { color: var(--warn); }

/* Media resource list (Media… dialog) */
.res-item { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .3rem .4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: .3rem; }
.res-id { font-size: .8rem; font-family: ui-monospace, monospace; }

.signing-fields { display: flex; flex-direction: column; gap: .4rem; margin: .6rem 0; }
.signing-fields label { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; color: var(--text-dim); }
.signing-fields select, .signing-fields input { font: inherit; }

@media (max-width: 820px) { main { grid-template-columns: 1fr; } .pane.left { border-right: 0; border-bottom: 1px solid var(--border); } }

/* ============================================================
   Shared style workbench (see ../editor/style-workbench.js).
   Aliases map this app's palette onto the workbench's variable names, then the se-* rules are the same
   as the document editor's. The panel is a fixed full-screen overlay, so it needs no body-class chrome.
   ============================================================ */
:root {
  --ink: var(--text); --muted: var(--text-dim); --accent-strong: var(--accent);
  --danger: var(--warn); --header: var(--surface);
  --accent-soft: color-mix(in srgb, var(--accent) 14%, var(--surface));
}
/* The style editor is a docked layout panel: it fills its zone as a flex column (a wrapping toolbar
   over a scrolling role gallery), rather than a full-screen overlay. */
#style-editor { color: var(--ink); background: var(--bg); display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
#style-editor > .se-bar { flex: 0 0 auto; flex-wrap: wrap; }
#style-editor > .se-gallery { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.se-bar:has(.zone-picker) > .pl-title { display: none; }

/* Rich running-content (header/footer/side) editor overlay — its blocks are edited on the shared
   block bridge, so a `var` chip renders empty with its field in `data-var` (painted here). */
.run-overlay { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, #000 45%, transparent); display: flex; align-items: center; justify-content: center; }
.run-box { background: var(--surface); color: var(--ink); border-radius: 10px; padding: 1rem 1.2rem; width: min(680px, 92vw); max-height: 86vh; overflow: auto; box-shadow: 0 12px 40px rgba(0, 0, 0, .35); }
.run-box h2 { margin: 0 0 .2rem; font-size: 1rem; }
.run-note { color: var(--muted); font-size: .82rem; margin: 0 0 .6rem; }
.run-toolbar { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; flex-wrap: wrap; }
.run-var-label { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--muted); }
#run-blocks { border: 1px solid var(--border); border-radius: 6px; padding: .4rem; min-height: 4rem; background: var(--bg); }
#run-blocks .blk { padding: .3rem .4rem; border-radius: 4px; outline: none; }
#run-blocks .blk:focus { background: color-mix(in srgb, var(--accent) 8%, transparent); }
#run-blocks .tmpl-var:empty::after { content: "«" attr(data-var) "»"; opacity: 1; }
.run-actions { display: flex; justify-content: flex-end; margin-top: .7rem; }

/* Schema-driven autocomplete popup for the Sample data textarea (appended to <body>, caret-anchored). */
.sample-ac {
  position: absolute; z-index: 1000; min-width: 12rem; max-width: 22rem; max-height: 14rem; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.18);
  font-size: .82rem; padding: .2rem;
}
.sample-ac-item { display: flex; align-items: baseline; justify-content: space-between; gap: .8rem; padding: .2rem .45rem; border-radius: 4px; cursor: pointer; }
.sample-ac-item.sel, .sample-ac-item:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.sample-ac-label { font-family: ui-monospace, "SF Mono", monospace; color: var(--text); }
.sample-ac-hint { font-size: .72rem; color: var(--muted, #888); font-style: italic; }