/* Three-column teaching workbench: pages + locator | slide canvas | source + properties. */

:root {
  --bg: #eef0f3;
  --panel: #ffffff;
  --line: #dfe2e7;
  --text: #1f2328;
  --muted: #667085;
  --accent: #2f6fde;
  --accent-soft: #e8f0fd;
  --danger: #c4372b;
  --warn-bg: #fff6e0;
  --warn-line: #f0d48a;
  --radius: 6px;
  --mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    "Noto Sans CJK SC", sans-serif;
  font-size: 14px;
  color: var(--text);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); }
/* The shell owns horizontal scrolling; its content height excludes a classic scrollbar,
   keeping the bottom editing strip above it. Inner canvas/timeline scrolls stay independent. */
#app { height: 100%; overflow-x: auto; overflow-y: hidden; }
h1, h2, h3 { margin: 0; font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.spacer { flex: 1; }
.error { color: var(--danger); }
.fatal { margin: 40px; color: var(--danger); }

/* ---------------------------------------------------------------- controls */
.btn {
  font: inherit; border: 1px solid var(--line); background: var(--panel); color: var(--text);
  padding: 6px 12px; border-radius: var(--radius); cursor: pointer; white-space: nowrap;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px; line-height: 1.3;
}
.btn:hover:not(:disabled) { border-color: #c4c9d1; background: #f7f8fa; }
.btn:focus-visible, .field:focus-visible, .obj-item:focus-visible, .project-btn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.btn:disabled { opacity: .45; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover:not(:disabled) { background: #2560c6; border-color: #2560c6; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger-text { color: var(--danger); }
.btn.plain { border-color: transparent; background: transparent; }
.btn.plain:hover:not(:disabled) { background: #e9ebef; }
.btn.small { padding: 3px 8px; font-size: 12px; }
.btn.link { border: none; background: none; color: var(--accent); padding: 2px 0; }
.btn.link:hover:not(:disabled) { background: none; text-decoration: underline; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.btn-grid.three { grid-template-columns: 1fr 1fr 1fr; }
.empty-state .btn-row { justify-content: center; }

.field {
  font: inherit; border: 1px solid var(--line); border-radius: var(--radius); padding: 5px 8px;
  background: #fff; color: var(--text); min-width: 0;
}
.field.num { width: 84px; text-align: right; }

/* ---------------------------------------------------------------- frame */
/* Explicit areas: a hidden banner only empties its own auto track; the three columns
   always own the 1fr row. */
.workbench {
  height: 100%; min-width: var(--workbench-min-width, 1280px); display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "top" "banner" "main";
}
.topbar {
  grid-area: top; display: flex; align-items: center; gap: 8px; padding: 7px 14px; background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.title-block { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.project-title { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.save-state { color: var(--muted); font-size: 12px; white-space: nowrap; }
.save-state.dirty { color: #a15c00; }
.save-state.dirty::before { content: "● "; }
.badge {
  font-size: 12px; padding: 2px 8px; border-radius: 10px; background: var(--warn-bg);
  border: 1px solid var(--warn-line); color: #7a5600;
}
.more-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; min-width: 180px; padding: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(16, 24, 40, .14);
}
.menu-item {
  display: block; width: 100%; text-align: left; font: inherit; padding: 7px 10px; border: none; background: none;
  border-radius: var(--radius); cursor: pointer; color: var(--text);
}
.menu-item:hover, .menu-item:focus-visible { background: var(--accent-soft); outline: none; }
.sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.banner {
  grid-area: banner; display: flex; gap: 12px; align-items: center; padding: 7px 14px; background: var(--warn-bg);
  border-bottom: 1px solid var(--warn-line); font-size: 13px;
}
.columns {
  grid-area: main; display: grid; min-height: 0;
  grid-template-columns: var(--column-left, 212px) 6px minmax(496px, 1fr) 6px var(--column-right, 540px);
}
.column-splitter { position: relative; cursor: col-resize; touch-action: none; background: var(--bg); }
.column-splitter::after { content: ""; position: absolute; inset: 0 2px; background: var(--line); }
.column-splitter:hover::after, .column-splitter:focus-visible::after { background: var(--accent); }
.column-splitter:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.columns-resizing, .columns-resizing * { cursor: col-resize !important; user-select: none !important; }

/* ---------------------------------------------------------------- left: locator + pages */
.nav {
  background: #f7f8fa; border-right: 1px solid var(--line); min-height: 0; display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
}
.minimap-panel {
  position: relative; height: 112px; margin: 8px 8px 6px; border: 1px solid #d9e0ea; border-radius: 6px;
  background: #edf1f6; overflow: hidden;
}
.minimap { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; user-select: none; }
.minimap .mm-page { fill: #fff; stroke: #94a3b8; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.minimap .mm-obj { fill: rgba(31, 102, 209, .17); stroke: rgba(31, 102, 209, .72); stroke-width: 1; vector-effect: non-scaling-stroke; }
.minimap .mm-obj.selected { fill: rgba(31, 102, 209, .38); stroke: #1d4ed8; stroke-width: 1.6; }
.minimap .mm-viewport { fill: rgba(37, 99, 235, .10); stroke: #2563eb; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: grab; }
.minimap-home {
  position: absolute; left: 6px; bottom: 6px; width: 24px; height: 24px; padding: 0; display: grid; place-items: center;
  border: 1px solid rgba(100, 116, 139, .72); border-radius: 6px; background: rgba(255, 255, 255, .92); color: #334155;
  font-size: 14px; line-height: 1; cursor: pointer;
}
.minimap-home:hover { border-color: #2563eb; color: #1d4ed8; }
.pages-head { display: flex; justify-content: space-between; align-items: baseline; padding: 4px 10px 2px; }
.pages-title { font-size: 13px; font-weight: 600; }
.btn.tiny { padding: 2px 7px; font-size: 12px; }
.page-list { min-height: 0; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.page-card {
  position: relative; border: 2px solid transparent; border-radius: 6px; cursor: pointer; padding: 2px;
  background: transparent; outline: none;
}
.page-card:hover .thumb { box-shadow: 0 0 0 1px #b9cdf5; }
.page-card.active { border-color: var(--accent); }
.page-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.thumb {
  position: relative; aspect-ratio: 16 / 9; background: #fff; overflow: hidden; border-radius: 3px;
  box-shadow: 0 0 0 1px var(--line);
}
.thumb img { position: absolute; display: block; pointer-events: none; }
.page-badge {
  position: absolute; z-index: 2; top: 6px; left: 6px; min-width: 20px; height: 20px; padding: 0 5px; display: grid;
  place-items: center; border-radius: 10px; background: rgba(30, 41, 59, .78); color: #fff; font-size: 11px;
  font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none;
}
.page-card.active .page-badge { background: var(--accent); }

/* ---------------------------------------------------------------- centre: tools + canvas */
/* One explicit column: an implicit `auto` track would grow to the widest item's min-content
   (the nowrap toolbar), pushing every row past the centre into the right column at narrow widths. */
.centre { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; min-height: 0; }
.canvas-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px 10px; background: var(--panel);
  border-bottom: 1px solid var(--line); min-width: 0;
}
.zoom-label { min-width: 74px; text-align: center; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.canvas-host { position: relative; min-width: 0; min-height: 0; overflow: hidden; isolation: isolate; }
/* The visible frame: a page-ratio window; JS sets left/top/width/height (border box). */
.canvas-host > .viewport {
  position: absolute; overflow: auto; outline: none; border: 2px solid #2563eb; background: #e8edf4;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .08); overscroll-behavior: contain;
  scrollbar-width: none;
}
.canvas-host > .viewport::-webkit-scrollbar { display: none; }
.surface { position: relative; }
.slide {
  position: absolute; background: #fff; box-shadow: 0 1px 3px rgba(16, 24, 40, .12), 0 6px 20px rgba(16, 24, 40, .06);
  touch-action: none; user-select: none; overflow: hidden; transform-origin: 0 0;
}
.obj {
  position: absolute; display: block; cursor: grab; touch-action: none; user-select: none;
  -webkit-user-drag: none; outline: 1px solid transparent; outline-offset: 0;
}
.obj:hover { outline-color: #b9cdf5; }
.obj.selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.obj.dragging { cursor: grabbing; opacity: .9; }
/* The slide is scaled as a whole: keep outlines at their screen width. */
.slide .obj { outline-width: calc(1px * var(--inv-scale, 1)); }
.slide .obj.selected { outline-width: calc(2px * var(--inv-scale, 1)); outline-offset: calc(1px * var(--inv-scale, 1)); }
.slide .obj.draft { outline: calc(1.5px * var(--inv-scale, 1)) dashed var(--accent); cursor: text; }
.slide .obj.provisional.nm-empty { background: rgba(47, 111, 222, .07); }
.empty-state {
  position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 20px;
}
.empty-title { font-size: 18px; font-weight: 600; margin: 0; }
.empty-hint { color: var(--muted); margin: 0 0 8px; }

/* Inline source box (one textarea under the edited box; clipped to the centre column, below
   the menu/dialog/toast layers). */
.inline-editor {
  position: absolute; z-index: 20; width: min(420px, calc(100% - 12px)); display: flex; flex-direction: column; gap: 4px;
  padding: 8px; background: #fff; border: 1px solid var(--accent); border-radius: 8px; cursor: grab; touch-action: none;
  box-shadow: 0 6px 20px rgba(16, 24, 40, .16);
}
.inline-source {
  width: 100%; font-family: "SF Mono", Menlo, Consolas, "Liberation Mono", "SimSun", "宋体", "Songti SC", monospace; font-size: 14px; line-height: 1.5; color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 6px 8px; resize: none; min-height: 66px; max-height: 168px; outline: none;
}
.inline-source:focus { border-color: #9fbdf0; }
.inline-status { font-size: 12px; line-height: 1.4; }
.inline-status:empty { display: none; }
.inline-status.error { color: var(--danger); }
.inline-status.note { color: var(--muted); }
.inline-editor.flash { animation: inline-flash .5s ease-out; }
@keyframes inline-flash { 0% { box-shadow: 0 0 0 4px rgba(196, 55, 43, .35); } 100% { box-shadow: 0 6px 20px rgba(16, 24, 40, .16); } }
.nm-measure { position: absolute; left: -100000px; top: 0; visibility: hidden; pointer-events: none; contain: layout style; }
.thumb .nm-slide { pointer-events: none; }
.native-settings h3 { margin-top: 14px; }

/* ---------------------------------------------------------------- right: source + inspector */
.side {
  background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column;
  min-height: 0; overflow: hidden;
}
/* two task tabs; each panel scrolls on its own (its position is kept across switches) */
.side-tabs { display: flex; flex: none; border-bottom: 1px solid var(--line); background: #f7f8fa; }
.side-tab {
  flex: 1 1 0; font: inherit; font-size: 13px; font-weight: 600; padding: 9px 10px 8px; border: none;
  border-bottom: 2px solid transparent; background: none; color: var(--muted); cursor: pointer;
}
.side-tab:hover { color: var(--text); background: #f0f2f5; }
.side-tab.selected { color: var(--accent); border-bottom-color: var(--accent); background: var(--panel); }
.side-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.side-tab-mark { margin-left: 4px; font-size: 9px; vertical-align: 2px; color: #d08700; }
.side-panel { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; }
.side-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.side-note {
  position: sticky; bottom: 0; margin-top: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 7px 14px; font-size: 12px; background: var(--warn-bg); border-top: 1px solid var(--warn-line);
}
.side-note-text { flex: 1 1 160px; }
.source-panel { padding: 10px 14px 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.source-head { display: flex; align-items: center; gap: 8px; }
.source-title { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.source-panel .hint { margin: -2px 0 0; }
.source {
  width: 100%; font-family: var(--mono); font-size: 14px; line-height: 1.5; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 8px 10px; resize: vertical; min-height: 150px; color: var(--text);
}
.source.small { font-size: 12px; min-height: 72px; }
.settings .prop-label { width: 64px; }
.advanced { margin-top: 4px; }
.advanced summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.preamble-head { display: flex; justify-content: space-between; align-items: center; margin: 8px 0 4px; font-size: 13px; color: var(--muted); }
.notice { margin: 0; padding: 6px 10px; background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: var(--radius); font-size: 13px; }
.previews { display: flex; flex-direction: column; gap: 8px; }
.preview {
  margin: 0; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px;
  background: #fff; display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto;
}
.preview figcaption { font-size: 12px; color: var(--muted); }
.preview.candidate { border-color: #b9cdf5; }
.preview.candidate.stale { border-color: var(--warn-line); }
.preview.candidate.stale img { opacity: .4; }
.preview-img { max-width: 100%; height: auto; display: block; }
.render-status { font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-height: 22px; }
.render-status.error { color: var(--danger); }
.render-status.warn { color: #8a5a00; }
.render-status .log { width: 100%; color: var(--text); }
.render-status .log summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.render-status pre { font-family: var(--mono); font-size: 11px; white-space: pre-wrap; max-height: 140px; overflow: auto; background: #f6f7f9; padding: 6px; border-radius: 4px; }
.spinner {
  width: 14px; height: 14px; border-radius: 50%; border: 2px solid #c9d6f2; border-top-color: var(--accent);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.inspector { display: flex; flex-direction: column; min-height: 0; }
.inspector-toggle {
  font: inherit; font-size: 13px; font-weight: 600; text-align: left; padding: 9px 14px; border: none;
  border-bottom: 1px solid var(--line); background: #f7f8fa; cursor: pointer; color: var(--text);
}
.inspector-toggle:hover { background: #f0f2f5; }
.panel-section { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.panel-section.grow { border-bottom: none; }
.panel-section h3 { font-size: 13px; margin: 0 0 8px; }
.props-body h3 { margin-top: 14px; }
.props-body h3:first-child { margin-top: 0; }
.obj-list { list-style: none; margin: 0; padding: 0; max-height: 200px; overflow: auto; }
.obj-item {
  display: flex; gap: 8px; align-items: baseline; padding: 5px 6px; border-radius: var(--radius); cursor: pointer;
}
.obj-item:hover { background: #f3f5f8; }
.obj-item.selected { background: var(--accent-soft); }
.obj-index { color: var(--muted); font-size: 12px; min-width: 14px; text-align: right; }
.obj-text { font-family: var(--mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prop-row { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.prop-label { width: 56px; color: var(--muted); font-size: 13px; }
.unit { color: var(--muted); font-size: 12px; }
.source-info { margin: 0 0 10px; }
.export-list { list-style: none; padding: 0; margin: 0; max-height: 320px; overflow: auto; }
.export-list li { padding: 5px 0; border-bottom: 1px solid var(--line); word-break: break-all; }

/* ---------------------------------------------------------------- chooser */
.chooser { height: 100%; overflow: auto; display: flex; justify-content: center; padding: 48px 16px; }
.chooser-card {
  width: min(640px, 100%); background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 24px 28px; align-self: flex-start;
}
.chooser-head { display: flex; justify-content: space-between; align-items: center; }
.chooser-card h1 { font-size: 20px; }
.chooser-card h2 { font-size: 14px; margin: 22px 0 10px; }
.create-row { display: flex; gap: 8px; }
.create-row .field { flex: 1; }
.project-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }
.project-list li { padding: 10px 2px; border-bottom: 1px solid var(--line); }
.project-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.project-name { font-weight: 600; display: flex; gap: 8px; align-items: center; }
.tag { font-size: 11px; font-weight: 400; color: var(--accent); background: var(--accent-soft); padding: 1px 6px; border-radius: 8px; }

/* ---------------------------------------------------------------- dialogs / toasts */
.backdrop { position: fixed; inset: 0; background: rgba(16, 24, 40, .32); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; }
.dialog { background: #fff; border-radius: 10px; padding: 20px 22px; width: min(440px, 100%); box-shadow: 0 12px 40px rgba(16, 24, 40, .25); }
.dialog.wide { width: min(560px, 100%); }
.dialog h2 { font-size: 16px; margin-bottom: 10px; }
.dialog-msg { margin: 0 0 14px; line-height: 1.6; }
.dialog-msg p { margin: 0 0 8px; }
.dialog-input { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; font-size: 13px; color: var(--muted); }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.toasts { position: fixed; left: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { background: #2b3036; color: #fff; padding: 8px 12px; border-radius: var(--radius); font-size: 13px; max-width: 420px; display: flex; gap: 10px; }
.toast.error { background: var(--danger); }
.toast.warn { background: #8a5a00; }
.toast-action { color: #cfe0ff; }

.tag.muted-tag { color: var(--muted); background: #eef0f3; }

/* TikZ source dialog + figure objects */
.slide .tz-obj { cursor: grab; }
.dialog.wide.tz-dialog { width: min(760px, 92vw); }
.tz-source { display: block; width: 100%; box-sizing: border-box; min-height: 260px; resize: vertical;
  font-family: var(--mono); font-size: 13px; line-height: 1.45; white-space: pre; tab-size: 2; }
.tz-source[readonly] { background: #f5f6f8; color: #555; }
.tz-status { min-height: 1.5em; margin: 8px 0 12px; font-size: 13px; color: var(--muted); }
.tz-status.error { color: #c4372b; }
.tz-status.busy { color: var(--accent); }

/* Animation: snapshot filmstrip (below the canvas), drafts, interval panel, maker */
.film-host { min-width: 0; border-top: 0; padding-top: 1px; box-shadow: inset 0 1px var(--line); background: var(--panel); }
.anim-filmstrip { padding: 4px 10px 6px; }
.anim-filmstrip[hidden] { display: none; }
.anim-film-head { display: flex; align-items: baseline; gap: 10px; min-height: 18px; min-width: 0; }
.anim-film-title { flex: none; font-size: 12px; font-weight: 600; }
.anim-film-hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anim-film-row { display: flex; align-items: stretch; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 3px 2px 4px; }
.anim-film-list { display: flex; gap: 6px; align-items: stretch; }
.anim-snap-layout {
  flex: 0 0 auto; width: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 2px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px;
}
.anim-snap-layout.active { border-color: var(--accent); background: var(--accent-soft, #e8effc); }
.anim-snap-layout:disabled { opacity: .5; cursor: not-allowed; }
.anim-snap { flex: 0 0 auto; width: 140px; border: 2px solid transparent; border-radius: 6px; padding: 1px; cursor: pointer; outline: none; }
.anim-snap:hover .anim-snap-thumb { box-shadow: 0 0 0 1px #b9cdf5; }
.anim-snap.active { border-color: var(--accent); }
.anim-snap:focus-visible, .anim-snap-layout:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.anim-filmstrip.locked .anim-snap:not(.active) { opacity: .55; cursor: not-allowed; }
.anim-film-tools { display: inline-flex; flex: none; gap: 4px; align-items: center; }
.anim-snap-rename { width: 12em; height: 20px; padding: 0 4px; font-size: 12px; }
.anim-snap[data-kind="fixed"] .anim-snap-name::before { content: "◇ "; color: var(--accent); }
.anim-snap[data-kind="follow"] .anim-snap-name::before { content: "◆ "; color: #6b3fd1; }
.anim-snap.beyond .anim-snap-meta { color: #8a5a00; }
.anim-snap-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #fff; overflow: hidden; border-radius: 3px;
  box-shadow: 0 0 0 1px var(--line); }
.anim-snap-thumb .nm-slide { pointer-events: none; transform-origin: 0 0; }
.anim-snap-thumb img { position: absolute; display: block; pointer-events: none; }
.anim-snap-caption { display: flex; justify-content: space-between; gap: 4px; padding: 2px 2px 0; font-size: 12px; white-space: nowrap; }
.anim-snap-name { font-weight: 600; }
.anim-snap.final .anim-snap-meta { color: #8a5a00; }
.slide.anim-inspecting { box-shadow: 0 0 0 calc(3px * var(--inv-scale, 1)) rgba(47, 111, 222, .35); }
.slide.anim-inspecting .obj { cursor: default; }
.slide.anim-playing { box-shadow: 0 0 0 calc(3px * var(--inv-scale, 1)) rgba(217, 72, 15, .45); }
.slide.anim-playing .obj, .slide.anim-playing .obj.selected, .slide.anim-playing .obj.anim-hidden { outline-color: transparent; }
.anim-play-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 6px; }
.slide .obj.anim-hidden { outline: calc(1px * var(--inv-scale, 1)) dashed #8a94a6; }
/* Pointing at or selecting a hidden object reveals its editor-only preview. */
.slide.anim-inspecting:not(.anim-playing):not([data-compare]) .obj.anim-hidden:is(:hover, .selected) {
  opacity: .2 !important;
}
.slide .anim-shadow {
  position: absolute; z-index: 10000; box-sizing: border-box; pointer-events: none;
  outline: calc(2px * var(--inv-scale, 1)) dashed #d9480f; outline-offset: 0; background: rgba(217, 72, 15, .04);
}
.slide .anim-shadow .anim-shadow-content { opacity: .45; pointer-events: none; }
.slide .anim-shadow img.anim-shadow-content { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.slide .anim-shadow.draggable { pointer-events: auto; cursor: move; touch-action: none; background: rgba(217, 72, 15, .08); }
.slide .anim-shadow.dragging { cursor: grabbing; }
.anim-shadow-label { position: absolute; left: 0; top: 0; transform: translateY(-100%); font-size: calc(12px * var(--inv-scale, 1));
  color: #d9480f; background: rgba(255, 255, 255, .85); padding: 0 calc(3px * var(--inv-scale, 1)); white-space: nowrap; }
.obj-item.anim-hidden .obj-text { color: var(--muted); font-style: italic; }
.anim-panel h3 { display: block; }
.anim-interval { border: 1px solid var(--line, #e3e7ee); border-radius: 6px; padding: 5px 8px; margin-bottom: 6px; }
/* Status stays on one line; controls wrap by available width, not playback state. */
.anim-interval-head { display: flex; flex-direction: column; gap: 4px; }
.anim-interval-line, .anim-interval-controls { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; }
.anim-interval-controls { flex-wrap: wrap; justify-content: space-between; }
.anim-preview-option { display: flex; align-items: center; gap: 6px; margin-top: 6px; width: fit-content; }
.anim-preview-restore { margin: 0; }
.anim-interval-line .anim-interval-title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anim-interval-line .tl-scope { flex: 1 1 0; min-width: 4em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-scope[data-status="preview"], .tl-scope[data-status="locate"], .tl-scope[data-status="time"] { color: #b3470b; }
.anim-interval-head .anim-play-tools { flex: none; flex-wrap: nowrap; margin: 0; gap: 4px; }
/* a play slot holds both labels in one cell: ▶ / ◀ and ■ 停止 share its width */
.anim-play-btn { display: inline-grid; justify-items: center; }
.anim-play-btn > .anim-play-label { grid-area: 1 / 1; }
.anim-play-btn > .anim-play-label[data-off] { visibility: hidden; }
.anim-add { position: relative; display: inline-flex; flex-wrap: wrap; flex: 0 1 auto; min-width: 0; max-width: 100%; gap: 4px; }
.anim-add > .btn { flex: none; }
.anim-add-menu { right: 0; left: auto; top: calc(100% + 2px); min-width: 170px; }
/* Object names share the clip rows; only multiple animated properties need multiple rows. */
.tl-table { position: relative; display: grid; grid-template-columns: minmax(76px, 26%) minmax(0, 1fr); margin-top: 4px; }
.tl-labels { display: flex; flex-direction: column; min-width: 0; }
/* Scroll border (1 px) + pins (16 px) + ruler (18 px); then the track's 2 px gap. */
.tl-labels-head { box-sizing: border-box; height: 35px; padding: 18px 0 0 2px; line-height: 16px; border-bottom: 1px solid var(--line, #e3e7ee);
  margin-bottom: 2px; }
.tl-obj-label { flex: 1; min-width: 0; font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-row-channel { flex: none; font-size: 11px; }
.tl-row-label { height: 24px; display: flex; align-items: center; gap: 4px; min-width: 0; padding: 0 4px; border: 0;
  background: none; font: inherit; font-size: 12px; text-align: left; color: #526078; box-sizing: border-box; }
.tl-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-row-rel { white-space: nowrap; }
.tl-row-label.target-selected { background: #f3f4f6; }
.tl-row-label { cursor: pointer; }
.tl-row-label:hover:not(:disabled):not(.active-channel) { background: #eaf0f7; }
.tl-row-label:focus-visible { outline: 2px solid #234c89; outline-offset: -2px; }
.tl-row-label:disabled { cursor: default; opacity: 1; }
.tl-row-label.active-channel { background: #eaf1fe; color: #204e92; }
.tl-row-label.active-channel .tl-obj-label { font-weight: 600; }
.anim-settings:empty { display: none; }
.tl-detail-head { display: flex; align-items: center; gap: 4px; margin-bottom: 3px; }
.tl-detail-head .tl-detail-title { flex: 1; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anim-interval[data-final="true"] { border-style: dashed; }
.anim-interval-title { font-weight: 600; font-size: 13px; }
.anim-interval-summary { margin: 2px 0 6px; }
.anim-interval-list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.anim-card { display: flex; align-items: center; gap: 4px; font-size: 12px; }
.anim-card-label { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 2px 0; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font: inherit; }
.anim-interval-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.anim-maker { border: 1px solid var(--accent); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: #fbfcff; }
.anim-maker-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 4px; }
.anim-maker-title { font-weight: 600; font-size: 13px; }
.anim-maker-scope { margin: 0; }
.anim-maker-step { padding: 3px 0; border-top: 1px dashed #e6eaf1; }
.anim-maker-line { display: flex; align-items: center; gap: 6px; min-height: 22px; }
.anim-maker-label { width: 30px; flex: none; }
.anim-maker-pick { font-weight: 600; font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anim-maker-hint { margin: 2px 0 0; }
.anim-maker-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.anim-maker-step-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.anim-maker-no { width: 18px; height: 18px; border-radius: 9px; display: inline-grid; place-items: center; font-size: 11px;
  background: var(--accent); color: #fff; }
.anim-maker-choices { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-bottom: 4px; }
.anim-maker [aria-pressed="true"], .anim-maker-object[aria-selected="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.anim-maker-objects { display: flex; flex-direction: column; gap: 2px; max-height: 180px; overflow: auto; }
.anim-maker-object { text-align: left; border: 1px solid var(--line); border-radius: 4px; background: #fff; padding: 3px 6px;
  font: inherit; font-size: 12px; cursor: pointer; }
.anim-maker-object:disabled { opacity: .45; cursor: not-allowed; }
.anim-maker-settings { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.anim-maker-settings p { flex-basis: 100%; margin: 0; }
.anim-maker-summary { margin: 8px 0 0; }
.anim-maker-problem { margin: 6px 0 0; color: #c4372b; font-size: 12px; }
.anim-maker-problem[hidden] { display: none; }
.anim-maker-actions { display: flex; gap: 6px; margin-top: 8px; }
.anim-overview { margin-top: 4px; }
/* timeline (timeline.js): seconds ruler, automatic lanes, bars, draft, whole-page blocks */
.anim-timeline { box-sizing:border-box; margin: 6px 0 4px; border:1px solid transparent; border-top-color:var(--line, #e3e7ee); padding-top: 6px; }
.anim-timeline[hidden] { display: none; }
.tl-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.anim-overview-lock { font-style: italic; }
.tl-title { font-weight: 600; font-size: 13px; }
.tl-modes { display: inline-flex; gap: 2px; }
.tl-modes .btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.tl-bar-row { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin: 4px 0 2px; font-size: 12px; }
.tl-zoom { display: inline-flex; gap: 2px; }
.tl-scroll { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--line, #e3e7ee); border-radius: 4px; background: #fbfcfe; }
.tl-viewport { position: relative; min-width: 0; }
.tl-overlay { position: absolute; top: 1px; left: 1px; right: 1px; z-index: 3; pointer-events: none; }
.tl-overlay .tl-pin, .tl-overlay .tl-cue { pointer-events: auto; }
.tl-overlay [hidden] { display: none; }
.tl-canvas { position: relative; min-width: 100%; }
.tl-ruler { position: relative; height: 18px; border-bottom: 1px solid var(--line, #e3e7ee); cursor: col-resize; touch-action: none; }
.tl-tick { position: absolute; bottom: 0; width: 1px; height: 4px; background: #b9c2d0; }
.tl-tick.major { height: 8px; background: #8995a8; }
.tl-tick-label { position: absolute; bottom: 8px; left: 2px; font-size: 10px; color: var(--muted); white-space: nowrap; }
.tl-track { position: relative; margin: 2px 0; }
.tl-lane { position: absolute; left: 0; right: 0; height: 24px; border-bottom: 1px dashed #edf0f5; }
.tl-bar { position: absolute; height: 20px; margin-top: 2px; box-sizing: border-box; border: 1px solid #c7d4e7; border-radius: 3px;
  background: #edf2fa; color: #405775; font-size: 11px; line-height: 18px; overflow: hidden; white-space: nowrap; cursor: grab; touch-action: none; user-select: none; }
.tl-bar.target-selected:not(.selected) { border-color: #b4c7e4; }
.tl-bar:hover:not(.selected) { background: #e3ecfa; }
.tl-bar.selected { border-color: #3979d8; background: #c4dafa; color: #143f7c; z-index: 2; }
.tl-bar:focus-visible { outline: 2px solid #234c89; outline-offset: 1px; }
.tl-bar[data-timing-mode="with"] { cursor: default; }
.tl-bar-label { padding: 0 6px; pointer-events: none; }
.tl-handle-l, .tl-handle-r { position: absolute; top: 0; bottom: 0; width: min(6px, 25%); background: transparent; cursor: ew-resize; }
.tl-handle-l::after, .tl-handle-r::after { content: ""; position: absolute; top: 5px; bottom: 5px; left: 50%; width: 2px;
  transform: translateX(-50%); border-radius: 1px; background: #3979d8; opacity: 0; pointer-events: none; }
.tl-bar:hover .tl-handle-l::after, .tl-bar:hover .tl-handle-r::after,
.tl-bar:focus-visible .tl-handle-l::after, .tl-bar:focus-visible .tl-handle-r::after { opacity: 1; }
.tl-handle-l { left: 0; }
.tl-handle-r { right: 0; }
.tl-table[aria-disabled="true"] .tl-bar { cursor: default; }
.tl-table[aria-disabled="true"] .tl-bar:hover:not(.selected) { background: #edf2fa; }
/* snapshot pins (◇ fixed, ◆ follows an action's end) and export pause ticks above the ruler */
.tl-marks { position: relative; height: 16px; border-bottom: 1px solid var(--line, #e3e7ee); box-sizing: border-box; }
.tl-pin, .tl-cue { position: absolute; top: 0; height: 15px; min-width: 12px; padding: 0; margin-left: -6px; border: 0; background: none;
  font-size: 11px; line-height: 15px; text-align: center; cursor: pointer; color: var(--accent); touch-action: none; }
.tl-pin.follow { color: #6b3fd1; }
.tl-pin.beyond { color: #8a5a00; }
.tl-cue { color: #b3470b; font-size: 10px; }
.tl-pin:focus-visible, .tl-cue:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.tl-end { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid #8995a8; }
.tl-empty { margin: 4px 0; }
.tl-length { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anim-cue-toggle.active { border-color: #b3470b; color: #b3470b; }
/* the ONE current time: a held time, a preview and a travel share this line */
.tl-playhead { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; pointer-events: none; background: #d9480f; }
.tl-playhead[hidden] { display: none; }
.tl-hint, .tl-locked { margin: 4px 0; }
.tl-draft { display: inline-flex; flex: none; gap: 2px; align-items: center; }
.tl-detail { border: 1px solid var(--line, #e3e7ee); border-radius: 6px; padding: 5px 6px; margin: 4px 0; font-size: 12px; }
.tl-detail-title { font-weight: 600; margin-bottom: 3px; }
.tl-detail-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 3px 0; }
.tl-param { display: inline-flex; gap: 4px; align-items: center; }
.tl-param .num { width: 64px; }
.tl-resolved { margin: 3px 0 0; }
.tl-block { border: 1px solid var(--line, #e3e7ee); border-radius: 6px; padding: 4px 6px; }
.tl-block-head { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0 0 3px; font-size: 12px; cursor: pointer; }
.tl-block-head:hover { color: var(--accent); }
.tl-mini { position: relative; }
.tl-mini-bar { position: absolute; height: 10px; margin-top: 2px; padding: 0; border: 1px solid #7aa2e8; border-radius: 3px; background: #dce8fb; cursor: pointer; }
.tl-mini-bar.selected, .tl-mini-bar.target-selected { border-color: var(--accent); background: #c4d8fa; }
.tl-wait { text-align: center; font-size: 11px; color: var(--muted); margin: 2px 0; }
.tl-empty { margin: 4px 0; }
.anim-card-time { white-space: nowrap; }
.anim-overview summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.anim-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow: auto; }
.anim-row { border: 1px solid var(--line, #e3e7ee); border-radius: 6px; padding: 5px 6px; font-size: 12px; }
.anim-row.selected-target, .anim-card.selected-target { border-color: var(--accent); }
.anim-row-head { display: flex; align-items: center; gap: 6px; }
.anim-group { min-width: 18px; height: 18px; border-radius: 9px; background: var(--accent-soft, #e8effc); color: var(--accent);
  display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; }
.anim-start { font-size: 12px; padding: 1px 2px; }
.anim-label { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font: inherit; }
.anim-row-params { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.anim-param { display: inline-flex; align-items: center; gap: 3px; }
.anim-param .field { width: 64px; }
.anim-row-tools { display: flex; gap: 4px; justify-content: flex-end; margin-top: 4px; }
.anim-note { min-height: 1.2em; margin: 6px 0 0; }
.anim-note.error { color: #c4372b; }
@media (max-height: 640px) {
  .anim-snap { width: 108px; }
}

/* ---- 数学画板: on the slide (inert, or edited in place), thumbnails, the tools strip and its element panel */
.slide .cx-obj { cursor: grab; }
.slide .cx-obj.draft { outline: calc(2px * var(--inv-scale, 1)) solid var(--accent); outline-offset: calc(1px * var(--inv-scale, 1)); cursor: default; }
.slide .cx-obj.draft.provisional { outline-style: dashed; }
/* In-place editing: only the draft's own edit board takes the pointer (the host stays transparent
   so its letterbox is still the box; native.css keeps inert / player boards transparent). */
.slide .cx-obj.cx-editing .cx-board.cx-edit { pointer-events: auto; touch-action: none; }
/* Keep one ordinary pointer throughout board editing, including library-rendered elements. */
.slide .cx-obj.cx-editing,
.slide .cx-obj.cx-editing * { cursor: default !important; }
.cx-picture { position: absolute; object-fit: contain; pointer-events: none; }
.cx-strip-host { display: contents; }       /* a closed (hidden) strip is not a grid item at all */
.centre.cx-open .film-host { display: none; }
/* Fixed editing chrome: disclosure, status and confirmation never resize the fitted canvas. */
.cx-strip { display: grid; grid-template-rows: 36px 30px; height: 67px; min-width: 0; position: relative;
  container-type: inline-size; z-index: 12; border-top: 0; padding-top: 1px; box-shadow: inset 0 1px var(--line); background: var(--panel); }
.cx-strip[hidden] { display: none; }
.cx-strip-tools { display: contents; }
.cx-toolbar, .cx-context { display: flex; flex-wrap: nowrap; align-items: center; min-width: 0; padding: 0 10px; gap: 8px; }
.cx-toolbar { grid-row: 1; }
.cx-context { grid-row: 2; gap: 4px; font-size: 11px; }
.cx-tools { display: inline-flex; flex: 0 1 auto; gap: 2px; min-width: 0; overflow: hidden; }
.cx-strip .cx-tool { flex: none; height: 30px; gap: 3px; padding: 3px 5px; white-space: nowrap; }
.cx-tool-icon { flex: none; width: 20px; height: 20px; }
.cx-tool.on, .cx-more.on, .cx-more[aria-expanded="true"] { background: #e8effc; border-color: var(--accent); color: var(--accent); }
.cx-more { flex: none; height: 30px; gap: 3px; padding: 3px 5px; white-space: nowrap; }
.cx-more-icon { width: 18px; font-size: 18px; line-height: 1; }
.cx-current-tool { font-size: inherit; }
.cx-edit-actions { display: inline-flex; flex: none; align-items: center; gap: 2px; margin-left: auto; }
.cx-edit-actions .btn { height: 30px; padding: 3px 5px; gap: 2px; white-space: nowrap; }
.cx-edit-actions .cx-undo, .cx-edit-actions .cx-cancel { margin-left: 6px; }
.cx-action-icon { font-size: 18px; line-height: 1; }
.cx-hint { flex: 1 1 auto; min-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-hint.danger { color: var(--danger); }
.cx-slot { flex: 0 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.cx-slot::-webkit-scrollbar { height: 0; }
.cx-circle-form, .cx-candidates, .cx-delete-proposal { display: flex; flex-wrap: nowrap; align-items: center; gap: 3px; width: max-content; }
.cx-context .btn, .cx-context .field { height: 25px; min-height: 0; white-space: nowrap; font-size: 11px; padding: 2px 5px; }
.cx-circle-form .cx-circle-mode { width: 80px; flex: none; min-width: 0; }
.cx-circle-form .cx-radius { width: 52px; flex: none; min-width: 0; padding: 2px; }
.cx-circle-form .cx-radius-create { width: 44px; flex: none; }
.cx-back-pick { flex: none; }
.cx-strip-status { flex: none; width: 88px; }
.cx-status-chip { width: 100%; overflow: hidden; text-overflow: ellipsis; }
.cx-status-chip.warning { color: #885500; border-color: #d6b56b; background: #fff5d9; }
.cx-status-short, .cx-setting-short { display: none; }
.cx-settings { display: flex; flex: none; align-items: center; gap: 6px; }
.cx-settings .cx-check { white-space: nowrap; gap: 2px; font-size: 11px; }
.cx-settings input { width: 13px; height: 13px; margin: 0; }
.cx-tool-catalog, .cx-status-pop { position: absolute; bottom: calc(100% + 4px); z-index: 30; padding: 10px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 5px 22px #1c2c4930;
  overflow: auto; overscroll-behavior: contain; }
.cx-tool-catalog { left: 10px; width: min(calc(100% - 20px), 680px); max-height: min(50vh, 300px);
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 18px; }
.cx-tool-catalog[hidden], .cx-status-pop[hidden] { display: none; }
.cx-tool-group { flex: 0 0 auto; max-width: 100%; min-width: 0; }
.cx-tool-group-title { margin: 0 0 5px; font-size: 11px; font-weight: 600; color: var(--muted); }
.cx-tool-group-items { display: flex; flex-wrap: wrap; gap: 4px; }
.cx-status-pop { right: 10px; width: min(calc(100% - 20px), 360px); max-height: 200px; font-size: 12px; }
.cx-status-row { margin: 0 0 6px; }
.cx-status-row:last-child { margin-bottom: 0; }
.cx-status-names { display: flex; flex-wrap: wrap; gap: 3px; }
.cx-status-row.warn, .cx-session-notice { color: var(--danger); }
.cx-delete-clips.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
/* Full labels need room for all five basic tools plus the longest advanced-tool
   label (垂直平分线). Switch before flex shrink can clip the basic-tool group. */
@container (max-width: 780px) {
  .cx-toolbar { gap: 8px; }
  .cx-toolbar .cx-tools .cx-tool { width: 30px; padding: 4px; }
  .cx-toolbar > .cx-tools .cx-tool-text, .cx-toolbar > .cx-more .cx-tool-text, .cx-action-text, .cx-setting-full, .cx-status-full, .cx-back-text { display: none; }
  .cx-toolbar .cx-more { width: 44px; justify-content: center; }
  .cx-edit-actions .cx-delete, .cx-edit-actions .cx-undo, .cx-edit-actions .cx-redo { width: 30px; justify-content: center; }
  .cx-edit-actions .cx-cancel { width: 44px; }
  .cx-edit-actions .cx-finish { width: 50px; }
  .cx-setting-short, .cx-status-short { display: inline; }
  .cx-strip-status { width: 44px; }
  .cx-back-pick { width: 30px; padding: 2px; }
  .cx-settings { gap: 5px; }
  .cx-context { gap: 4px; }
}
.cx-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; position: sticky; top: -10px; z-index: 2; background: var(--panel); padding: 6px 0; }
.cx-draft-name { display: block; max-width: 220px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.cx-panel-head h3 { margin: 0; }
.cx-list { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 0; max-height: 280px; max-height: round(down, clamp(196px, 36vh, 360px), 28px); overflow: auto; }
.cx-list > li { flex: none; }
.cx-row { display: flex; align-items: center; gap: 6px; width: 100%; height: 28px; padding: 3px 6px; border: 1px solid transparent;
  border-radius: 5px; background: none; text-align: left; font: inherit; font-size: 12px; color: inherit; cursor: pointer; }
.cx-row:hover { background: #f3f5f8; }
.cx-row.candidate { border-color: #8aaccd; border-style: dashed; background: #f3f7fc; }
.cx-candidate-tag { flex: none; font-size: 10px; color: #305c88; }
.cx-row.on { border-color: var(--accent); background: #eef3fd; }
.cx-row.bad .cx-desc { color: var(--danger); }
.cx-kind { flex: none; min-width: 2.6em; padding: 0 4px; border-radius: 3px; background: #eef0f3; color: var(--muted);
  font-size: 11px; text-align: center; }
.cx-kind.k-param { background: #fdf0dc; color: #94580b; }
.cx-kind.k-function { background: #e6f3ea; color: #23703b; }
.cx-kind.k-intersection { background: #f3e8fb; color: #6d3a96; }
.cx-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.cx-clips { flex: none; font-size: 11px; color: var(--accent); }
.cx-warn { flex: none; color: var(--danger); font-weight: 700; }
.cx-empty { padding: 6px 2px; }
.cx-inspector, .cx-add { margin-top: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; display: flex;
  flex-direction: column; gap: 6px; }
.cx-insp-head, .cx-add-head { display: flex; align-items: center; gap: 6px; }
.cx-add-head { justify-content: space-between; }
.cx-status { font-size: 11px; color: var(--muted); }
.cx-status.bad { color: var(--danger); }
.cx-frow { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; }
.cx-flabel { flex: none; width: 3.6em; }
.cx-field { min-width: 0; flex: 1 1 120px; }
.cx-field.short { flex: 0 0 64px; width: 64px; }
.cx-field.bad { border-color: var(--danger); }
.cx-ferr { flex-basis: 100%; margin: 0; font-size: 12px; color: var(--danger); }
.cx-ferr:empty { display: none; }
.cx-check { display: inline-flex; align-items: center; gap: 3px; }
.cx-axis-style { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.cx-axis-style .cx-flabel { width: 6em; white-space: nowrap; }
.cx-axis-style details > summary { cursor: pointer; font-size: 12px; color: var(--muted, #667085); margin: 4px 0; }
.cx-axis-style details[open] { display: grid; gap: 3px; }
.cx-axis-style .cx-axis-preset { max-width: 100%; flex: 1 1 140px; }
.cx-axis-style input[type=color] { width: 28px; height: 22px; padding: 0 1px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.cx-axis-style .hint { color: #b54708; margin: 0; }
.cx-axis-style p { margin: 0; }
.cx-slider { flex: 1 1 120px; min-width: 0; }
.cx-value { flex: none; min-width: 3em; font-variant-numeric: tabular-nums; text-align: right; }
.cx-add-actions { display: flex; justify-content: flex-end; }
.cx-clip-note { margin: 0; }
/* Native geometry tools stay below the same slide; details stay in its existing right panel. */

.cx-native-panel .cx-add p, .cx-native-panel .cx-inspector p { margin: 2px 0; }
.cx-native-panel .cx-candidates { border-color: var(--accent); }
.cx-native-panel .cx-candidate { text-align: left; }
.cx-native-panel .cx-delete-proposal { border-color: var(--danger); }
.cx-native-panel .cx-delete-proposal .cx-add-actions { flex-wrap: wrap; gap: 6px; }
.cx-native-panel .cx-bind-new { white-space: normal; text-align: left; }
.cx-native-panel .cx-color { max-width: 80px; height: 30px; padding: 2px; }
.cx-native-panel .cx-point-role, .cx-native-panel .cx-driver-note { line-height: 1.5; }

/* Contextual panel: one mode card below the same list. */
.cx-row.picked { background: #e8effc; border-color: #b3c9ec; }
.cx-row.ineligible { opacity: .48; }
.cx-row.doomed { background: #fff0ee; color: var(--danger); }
.cx-row.doomed strong { text-decoration: line-through; }
.cx-pick-order { flex: none; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; font-size: 10px; background: var(--accent); color: white; }
.cx-hidden-tag { flex: none; font-size: 10px; }
.cx-construct-card { margin-top: 8px; padding: 10px; border: 1px solid #c9d9f1; background: #f6f9ff; border-radius: 6px; }
.cx-construct-card h4, .cx-insp-group h4 { margin: 0 0 6px; font-size: 12px; }
.cx-construct-card ol { list-style: none; padding: 0; margin: 8px 0; }
.cx-construct-card li { display: flex; align-items: baseline; gap: 7px; padding: 5px 0; color: var(--muted); }
.cx-construct-card li.current { color: var(--accent); }
.cx-step-number { display: inline-grid; place-items: center; flex: none; width: 18px; height: 18px; border-radius: 50%; background: #e8effc; font-size: 11px; }
.cx-construct-card .cx-add-actions { flex-wrap: wrap; gap: 4px; }
.cx-insp-group { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.cx-insp-group h4 { color: var(--text); }
.cx-definition-summary { line-height: 1.5; }

/* Desktop outer-workbench edge shortcut; floats outside the scrolled shell. */
.workbench-edge-scroll { position: fixed; z-index: 70; width: 36px; height: 36px;
  display: grid; place-items: center; padding: 0; transform: translateY(-50%);
  border: 1px solid #64748b88; border-radius: 50%; background: #ffffffd9; color: #1f2937;
  box-shadow: 0 5px 16px #0f172a2e; backdrop-filter: blur(6px); font: 700 26px/1 sans-serif;
  cursor: pointer; opacity: .72; }
.workbench-edge-scroll[data-direction="-1"] { left: 7px; }
.workbench-edge-scroll[data-direction="1"] { right: 7px; }
.workbench-edge-scroll:hover, .workbench-edge-scroll:focus-visible { opacity: 1; background: #fffffff5;
  outline: 2px solid #2563eb66; outline-offset: 2px; }
@media (hover: none), (pointer: coarse) { .workbench-edge-scroll { display: none !important; } }

/* Drop-in role styling (append to app.css). Presentation attributes already carry the
   same defaults, so icons render correctly without it; this block only tunes states. */
.cx-ico { overflow: visible; }
.cx-ico .cx-i-f { fill: currentColor; stroke: none; }
/* A disabled button already fades to .45; do not stack scaffold softening on top. */
.btn:disabled .cx-ico .cx-i-s, .btn:disabled .cx-ico .cx-i-d { opacity: 1; }
/* Selected: keep scaffold legible on the tinted background. */
.cx-tool.on .cx-ico .cx-i-s, .cx-more.on .cx-ico .cx-i-s { opacity: .8; }
.cx-ico-caret { width: 12px; height: 12px; }

/* Focused in-place board editing: keep every other live object mounted. */
.workbench.cx-focus .columns { grid-template-columns: minmax(496px, 1fr) 6px var(--column-right, 540px); }
.workbench.cx-focus .nav, .workbench.cx-focus .column-splitter[data-side="left"] { display: none; }
.slide.cx-focus .obj:not([data-focus-target]) { visibility: hidden; pointer-events: none; }
.slide.cx-focus .empty-state { visibility: hidden; }
/* The edit hatch is a layer under the board so focus motion can fade it (opacity 1 when idle). */
.cx-editing .cx-host::before, .cx-obj.cx-hatch-out .cx-host::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--cx-hatch-o, 1);
  background: repeating-linear-gradient(135deg, #e9edf3 0 1px, #f7f9fc 1px 7px);
}
.cx-ratio-note { margin: 5px 0 9px; }

/* Focus motion (focus_motion.js): the REAL layout interpolates through transient variables on
   .workbench; nothing here is persisted and every rule disappears with .cx-motion.  The left
   column keeps its content at full width and slides out under the clipped grid track. */
.workbench.cx-motion .canvas-tools { height: var(--cx-top-h); min-height: 0; overflow: hidden; align-content: flex-start; }
.workbench.cx-motion { min-width: var(--cx-min-w); }
.workbench.cx-motion .columns {
  grid-template-columns: var(--cx-nav-w) var(--cx-lsplit-w) minmax(496px, 1fr) 6px var(--column-right, 540px);
  overflow: clip;
}
.workbench.cx-motion .nav { display: grid; width: var(--cx-nav-full); min-width: var(--cx-nav-full);
  margin-left: calc(var(--cx-nav-w) - var(--cx-nav-full)); }
.workbench.cx-motion .column-splitter[data-side="left"] { display: block; overflow: hidden; }
.workbench.cx-motion .centre.cx-open .film-host, .workbench.cx-motion .film-host { display: block;
  height: var(--cx-film-h); padding-top: var(--cx-film-bw); min-height: 0; border-top: 0; box-shadow: inset 0 1px var(--line); overflow: hidden; }
.workbench.cx-motion .film-host > * { opacity: var(--cx-film-o); }
.workbench.cx-motion .cx-strip { height: var(--cx-strip-h); padding-top: var(--cx-strip-bw); min-height: 0; border-top: 0; box-shadow: inset 0 1px var(--line); overflow: hidden; }
.workbench.cx-motion .cx-strip > .cx-strip-tools > *, .workbench.cx-motion .cx-strip > .cx-status-pop {
  opacity: var(--cx-tools-o); translate: 0 var(--cx-tools-y); }
/* Leaving chrome: an inert static copy (never a board), stacked where the original was. */
.cx-motion-leaving, .cx-motion-leaving * { pointer-events: none !important; }
.workbench:not(.cx-motion) .cx-motion-leaving { display: none !important; }
.side > .cx-motion-leaving.cx-motion-stacked { z-index: 4; background: var(--panel); overflow: hidden;
  opacity: var(--cx-panel-out-o); }
.workbench.cx-motion .side > .side-panel:not(.cx-motion-leaving) { opacity: var(--cx-panel-in-o);
  translate: 0 var(--cx-panel-in-y); }
/* Other page objects evacuate (a `translate` per frame); they stay painted until they are out. */
.slide.cx-focus.cx-evacuating .obj:not([data-focus-target]) { visibility: visible; }
.slide .obj[data-cx-evac] { pointer-events: none; }
.slide .obj.cx-motion-new { opacity: var(--cx-new-o, 1); }

/* A warm inert/edit swap creates SVG fallback text before MathML labels hide it.
   JSXGraph's opacity transition otherwise leaves duplicate glyphs for the first100ms. */
.workbench.cx-motion .cx-board svg text { transition: none !important; }

/* Reserve the wider fit label using the current font, at every browser zoom. */
.zoom-fit { display: inline-grid; }
.zoom-fit > span, .zoom-fit::after { grid-area: 1 / 1; }
.zoom-fit::after { content: "适合画板"; visibility: hidden; }

/* Arrangement shares the insertion row and remains inside the measured toolbar. */
.object-tools { flex: none; display: flex; flex-wrap: nowrap; align-items: center; gap: 4px 8px; min-width: 0; }
.object-tools > .sep { margin: 0; }
/* Keep the target description for aria-describedby, without a visible name badge. */
.object-scope { display: none; }
.object-tools { justify-content: flex-end; }
.object-tools-group { flex: none; display: flex; align-items: center; gap: 4px; }
.object-tools-caption { font-size: 12px; color: var(--muted); }
.object-tools-caption + .object-tools-caption { margin-left: 2px; }
.object-seg { display: inline-flex; }
.object-seg > .btn { border-radius: 0; margin-left: -1px; padding: 3px 6px; }
.object-seg > .btn:first-child { border-radius: var(--radius) 0 0 var(--radius); margin-left: 0; }
.object-seg > .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.object-seg > .btn:focus-visible { position: relative; z-index: 2; }
.object-seg > .btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.object-seg > .btn[aria-disabled="true"]:hover { border-color: var(--line); background: var(--panel); }
/* Already aligned: a state, not an unavailable action. */
.object-seg > .btn[data-state="current"] { opacity: 1; position: relative; z-index: 1; border-color: #b9cdf5;
  background: #eef3fd; color: var(--accent); }
.object-seg > .btn[data-state="current"]:hover { border-color: #b9cdf5; background: #eef3fd; }

/* Formatting inspector: common slots first, explicit edit scope, compact units. */
.cx-scope { color: var(--muted); font-size: 11px; font-weight: normal; }
.cx-insp-group h4 .cx-scope { margin-left: 8px; }
.cx-insp-head > input { min-width: 0; flex: 1; max-width: 150px; }
.cx-inspector .cx-flabel { width: 5em; }
.cx-parents > summary { cursor: pointer; font-weight: 600; font-size: 12px; }
.cx-parents[open] { display: flex; flex-direction: column; gap: 6px; }
.cx-label-size { line-height: 1.6; }
.cx-typography { display: grid; gap: 8px; }
.cx-axis-inspector .cx-axis-style { border-top: 0; padding-top: 0; margin-top: 0; }

/* Selected element details expand within their own list item. One panel scrollbar. */
.cx-list.cx-inline-list { max-height: none; overflow: visible; }
.cx-inline-detail { margin: 0 0 8px 8px; padding: 6px 0 6px 8px; border-left: 2px solid var(--accent); }
.cx-inline-detail > .cx-inspector { margin-top: 0; }
.cx-inline-list .cx-row::before { content: "▸"; flex: 0 0 18px; width:18px; height:24px; line-height:24px; text-align:center; color: var(--muted); }
.cx-inline-list .cx-row[aria-expanded=true]::before { content: "▾"; color: var(--accent); }
/* Compact inline inspector: the element row is the only header. */
.cx-expanded-item { background:#eef3fd; box-shadow:inset 0 1px #d6e0f5,inset 0 -1px #d6e0f5; }
.cx-expanded-row.on { border:1px solid transparent; border-radius:0; height:28px; background:transparent; cursor:default; }
.cx-inline-list .cx-expanded-row::before { content:none; }
.cx-row-toggle { border:0; background:none; color:var(--accent); padding:0; width:18px; height:24px; font:inherit; line-height:24px; flex:none; cursor:pointer; }
.cx-inline-list .cx-row-name,.cx-expanded-row .cx-inline-name { box-sizing:border-box; flex:0 0 84px; width:84px; min-width:0; height:24px; border:1px solid transparent; background:transparent; padding:0 4px; font:inherit; font-weight:600; line-height:22px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cx-expanded-row .cx-inline-name:hover,.cx-expanded-row .cx-inline-name:focus { border-color:var(--accent); background:white; }
.cx-inline-detail { margin:0; padding:0 8px 8px 24px; border:0; }
.cx-inline-detail .cx-inspector { border:0; margin:0; padding:0; border-radius:0; }
.cx-compact,.cx-compact .cx-insp-group { display:flex; flex-direction:column; gap:6px; border:0; padding:0; }
.cx-compact .cx-frow { gap:3px 5px; min-height:26px; }
.cx-compact .cx-flabel { width:2.8em; font-size:12px; }
.cx-compact input.field,.cx-compact select.field { height:24px; font-size:12px; padding:0 4px; }
.cx-compact .cx-field.short { flex:0 0 46px; width:46px; }
.cx-compact .cx-field:not(.short) { flex:1 1 96px; min-width:0; }
.cx-compact .cx-compact-style .cx-color { flex:none; width:26px; height:22px; padding:0; }
.cx-compact .cx-compact-style .cx-width { flex:0 0 46px; width:46px; }
.cx-compact .cx-compact-style .cx-dash { flex:1 1 62px; width:68px; }
.cx-compact .cx-compact-coordinate .cx-bind-x,.cx-compact .cx-compact-coordinate .cx-bind-y { flex:0 1 52px; width:52px; min-width:38px; }
.cx-compact .btn.small { padding:1px 5px; min-height:24px; font-size:12px; }
.cx-compact .cx-ferr { flex:0 0 100%; font-size:11px; }
.cx-compact-more > summary { cursor:pointer; font-size:12px; color:var(--muted); padding:2px 0; }
.cx-compact-more[open] { display:flex; flex-direction:column; gap:6px; }
.cx-compact .cx-parents > summary { font-weight:normal; color:var(--muted); }
.cx-compact .cx-axis-style { margin:0; padding:0; border:0; gap:6px; }
.cx-compact .cx-axis-style .cx-flabel { width:5.5em; white-space:normal; }
.cx-compact .cx-slider { min-width:0; width:140px; flex:1 1 100px; }
.cx-native-panel { overflow-anchor:none; }
.cx-expanded-row:has(.cx-ferr) { height:auto; min-height:30px; flex-wrap:wrap; }
.cx-expanded-row .cx-ferr { flex:0 0 100%; margin-left:24px; font-size:11px; }
.cx-compact-more p { font-size:11px; color:var(--muted); }

.cx-inline-list .cx-expanded-row[aria-expanded=true]::before { content:none; }
.cx-inline-list .cx-expanded-row[data-expanded=true]::before { content:none; }

/* A single spacing rhythm for inline properties, including nested axis fields. */
.cx-compact .cx-property-row {
  display:grid; grid-template-columns:60px minmax(0,1fr);
  align-items:start; gap:0 8px; min-height:26px;
}
.cx-compact .cx-property-row > .cx-flabel {
  width:auto; min-width:0; padding-top:5px; font-size:12px; line-height:16px;
  white-space:normal;
}
.cx-compact .cx-control-cell {
  display:flex; flex-wrap:wrap; align-items:center; gap:6px;
  min-width:0; min-height:26px;
}
.cx-compact .cx-control-cell > .cx-frow { flex:1 1 100%; min-width:0; }
.cx-compact input.field,.cx-compact select.field,.cx-compact .btn.small {
  box-sizing:border-box; height:26px; min-height:26px; margin:0;
  font-size:12px; line-height:18px;
}
.cx-compact .cx-check { display:inline-flex; align-items:center; gap:5px; min-height:26px; margin:0; }
.cx-compact input[type=checkbox] { margin:0; flex:none; }
.cx-compact .cx-compact-style .cx-color { width:26px; height:26px; padding:2px; }
.cx-compact .cx-field.short,.cx-compact .cx-compact-style .cx-width { flex:0 0 50px; width:50px; }
.cx-compact .cx-control-cell > .cx-field:not(.short):not([type=color]):not(.cx-dash) { flex:1 1 70px; }
.cx-compact .cx-control-cell > .muted.small { line-height:18px; }
.cx-compact p,.cx-compact .cx-label-size { margin:0; line-height:18px; }
.cx-compact details > summary { min-height:26px; padding:4px 0; box-sizing:border-box; line-height:18px; }
.cx-compact .cx-typography,.cx-compact .cx-axis-style,.cx-compact .cx-parents[open],.cx-compact-more[open] { gap:6px; }
.cx-inline-detail { padding:14px 10px 10px 24px; }

.cx-compact .cx-control-cell > input[type=color] { flex:0 0 28px; width:28px; min-width:28px; height:26px; padding:2px; }
.cx-axis-inspector.cx-compact .cx-property-row { grid-template-columns:72px minmax(0,1fr); }

/* Inline validation and style units retain their meaning when controls wrap. */
.cx-compact .cx-property-row > .cx-ferr { grid-column:1 / -1; min-width:0; }
.cx-compact .cx-width-unit { display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; white-space:nowrap; }
.cx-compact .cx-control-cell > .cx-dash { flex:0 0 72px; width:72px; min-width:0; }

/* Page objects use the same inline property rhythm as construction elements. */
.obj-panel-head .obj-count { white-space:nowrap; }
.obj-list { display:flex; flex-direction:column; gap:0; margin:8px 0; max-height:none; overflow:visible; }
.obj-entry { flex:none; min-width:0; }
.obj-item { display:flex; align-items:center; gap:6px; width:100%; height:28px; padding:3px 6px;
  border:1px solid transparent; border-radius:5px; background:none; color:inherit; font:inherit; font-size:12px; text-align:left; }
.obj-item::before { content:"▸"; flex:0 0 18px; width:18px; height:24px; line-height:24px; text-align:center; color:var(--muted); }
.obj-item[aria-expanded=true]::before { content:"▾"; color:var(--accent); }
.obj-item.selected { border-color:var(--accent); background:#eef3fd; }
.obj-text { min-width:0; flex:1; font:inherit; font-weight:600; }
.panel-section.obj-inline-detail { margin:0; padding:14px 10px 10px 24px; border:0; }
.obj-compact { display:flex; flex-direction:column; gap:6px; }
.obj-compact .prop-row { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0; min-height:26px; }
.obj-compact .prop-label { flex:none; width:auto; font-size:12px; }
.obj-compact .num { width:64px; min-width:0; }
.obj-compact .native-settings { display:flex; flex-direction:column; gap:6px; }
.obj-compact .native-settings > .prop-row, .obj-compact > .prop-row { display:grid; grid-template-columns:60px minmax(0,1fr) auto; }
.obj-compact .native-settings .num { width:100%; max-width:96px; }
.obj-compact .field:not(.num) { min-width:0; width:100%; }
.obj-compact .btn { font-size:12px; min-height:26px; padding:3px 8px; }
.obj-compact .btn-grid { width:100%; gap:6px; }
.obj-compact .obj-more[open] { display:flex; flex-direction:column; gap:6px; }
.obj-compact .source-info { overflow-wrap:anywhere; }

/* One disclosure: the selected header and its properties form the same surface. */
.obj-item.obj-expanded-row.selected { height:28px; border:1px solid transparent; border-radius:0; background:transparent; cursor:default; }
.obj-item.obj-expanded-row::before { content:none; }
.obj-expanded-row .obj-name { box-sizing:border-box; flex:1 1 0; width:0; min-width:0; height:24px; padding:0 4px;
  border:1px solid transparent; border-radius:0; background:transparent; font:inherit; font-weight:600; line-height:22px; }
.obj-expanded-row .obj-name::placeholder { color:inherit; opacity:1; }
.obj-expanded-row .obj-name:hover,.obj-expanded-row .obj-name:focus { border-color:var(--accent); background:white; }
.obj-text { height:24px; padding:0 4px; border:1px solid transparent; line-height:22px; }
.obj-entry > .obj-inline-detail { background:transparent; }

/* Numeric values read like inline text until the teacher interacts with them. */
.cx-compact input.field[data-numeric], .obj-compact input.field.num {
  box-sizing:border-box; height:20px; min-height:20px; padding:0 4px; line-height:18px;
  border-color:transparent; border-radius:3px; background:transparent; box-shadow:none;
  font-size:12px; font-variant-numeric:tabular-nums;
}
.cx-compact input.field[data-numeric]:where(:hover:not(:disabled)), .obj-compact input.field.num:where(:hover:not(:disabled)) {
  border-color:#c7d4e7; background:rgba(255,255,255,.65);
}
.cx-compact input.field[data-numeric]:focus, .obj-compact input.field.num:focus {
  border-color:var(--accent); background:var(--panel);
}
.cx-compact input.field[data-numeric]:disabled, .obj-compact input.field.num:disabled { color:var(--muted); }
.cx-compact input.field[data-numeric]:is(.bad,[aria-invalid=true]), .obj-compact input.field.num[aria-invalid=true] {
  border-color:var(--danger); background:#fff4f2;
}

/* Floating toolbar disclosures: opening does not resize the fitted canvas. */
.tool-disclosure { position: relative; flex: none; }
.tool-disclosure > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; }
.tool-disclosure > summary::-webkit-details-marker { display: none; }
.tool-disclosure > summary::after { content: "▾"; color: var(--muted); font-size: 10px; }
.tool-disclosure[open] > summary { border-color: #b9cdf5; background: #eef3fd; }
.tool-disclosure-panel { position: absolute; top: calc(100% + 5px); right: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 10px;
  width: max-content; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 5px 18px #15274525; }
.insert-disclosure .tool-disclosure-panel { left: 0; right: auto; min-width: 140px; gap: 4px; }
.insert-disclosure .tool-disclosure-panel > button { text-align: left; }
.tool-disclosure:not([open]) > .tool-disclosure-panel { display: none; }

.inline-editor.dragging { cursor: grabbing; }
.inline-source { cursor: text; touch-action: auto; }

/* Stable separators belong to every object entry, never to its selected state. */
.obj-entry, .obj-entry.cx-expanded-item { border-top: 1px solid #d6e0f5; box-shadow: none; }
.obj-entry:last-child { border-bottom: 1px solid #d6e0f5; }
.obj-item.selected { border-color: transparent; border-radius: 0; }

/* Selected and expanded headings share the same colours and fixed metrics. */
.obj-entry > .obj-item.selected,
.obj-entry > .obj-item.obj-expanded-row.selected {
  background: #e0eafb;
  box-shadow: none;
  background-clip: border-box;
}
.obj-entry > .obj-item.selected .obj-text,
.obj-entry > .obj-expanded-row .obj-name { color: #203f6c; font-weight: 700; }
.obj-entry > .obj-item.selected::before { color: var(--accent); }

/* A quieter property surface; keep the expanded heading colours unchanged. */
.obj-entry.cx-expanded-item { background: #f7f9fd; }

/* Use the existing border slot for the title/detail divider, not an inset shadow.
   Collapsed entries are separated by their parent's persistent boundary. */
.obj-entry > .obj-item.obj-expanded-row.selected { border-bottom-color: #d6e0f5; }

/* Every title owns its bottom separator, collapsed or expanded, at the same pixel. */
.obj-list { border-top: 1px solid #d6e0f5; }
.obj-entry, .obj-entry.cx-expanded-item, .obj-entry:last-child { border-top: 0; border-bottom: 0; }
.obj-entry > .obj-item, .obj-entry > .obj-item.selected,
.obj-entry > .obj-item.obj-expanded-row.selected { border-bottom: 1px solid #d6e0f5; }
.obj-entry > .obj-inline-detail { border-bottom: 1px solid #d6e0f5; }

/* All page-object states share square edges, including unselected and hovered rows. */
.obj-entry, .obj-entry > .obj-item, .obj-entry > .obj-expanded-row { border-radius: 0; }

/* Separate disclosure button: no button nested inside the name/selection button. */
.obj-entry { position: relative; }
.obj-entry > button.obj-item::before { visibility: hidden; flex-basis: 24px; width: 24px; }
.obj-entry .obj-row-toggle { width: 24px; height: 24px; flex: 0 0 24px; padding: 0;
  border: 0; background: transparent; color: var(--accent); font-size: 17px; line-height: 24px;
  text-align: center; cursor: pointer; border-radius: 3px; }
.obj-entry > .obj-open-toggle { position: absolute; top: 2px; left: 7px; }
.obj-entry .obj-row-toggle:hover { background: #d5e3fa; }
.obj-entry .obj-row-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* A persistent disclosure arrow rotates without replacing the glyph. */
.obj-entry > .obj-open-toggle { z-index: 1; transition: transform 160ms ease-out; transform: rotate(0deg); }
.obj-entry > .obj-open-toggle[aria-expanded="true"] { transform: rotate(90deg); }
.obj-entry > .obj-expanded-row .obj-row-toggle { visibility: hidden; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .obj-entry > .obj-open-toggle { transition: none; }
}

.obj-entry.obj-detail-moving { overflow: hidden; overflow-anchor: none; }
.obj-detail-ghost { pointer-events: none; background: #f7f9fd !important; }

/* Construction element disclosures follow the page-object list. */
.cx-native-panel .cx-inline-list { border-top: 1px solid #d6e0f5; }
.cx-native-panel .cx-element-entry { position: relative; border-radius: 0; box-shadow: none; }
.cx-native-panel .cx-element-entry > .cx-row { border-radius: 0; border-bottom: 1px solid #d6e0f5; }
.cx-native-panel .cx-element-entry > .cx-row.on { background: #e0eafb; box-shadow: none; border-color: transparent; border-bottom-color: #d6e0f5; }
.cx-native-panel .cx-element-entry > .cx-row.on .cx-row-name,
.cx-native-panel .cx-element-entry > .cx-row.on .cx-inline-name { color: #203f6c; font-weight: 700; }
.cx-native-panel .cx-element-entry.cx-expanded-item { background: #f7f9fd; }
.cx-native-panel .cx-element-entry > .cx-inline-detail { border-bottom: 1px solid #d6e0f5; }
.cx-native-panel .cx-inline-list button.cx-row::before { visibility: hidden; width:24px; flex-basis:24px; }
.cx-native-panel .cx-element-entry .cx-row-toggle { visibility: hidden; pointer-events: none; width:24px; flex-basis:24px; }
.cx-disclosure { position:absolute; z-index:1; top:2px; left:7px; width:24px; height:24px;
  padding:0; border:0; border-radius:3px; background:transparent; color:var(--accent); font-size:17px;
  line-height:24px; text-align:center; cursor:pointer; transform:rotate(0deg); }
.cx-disclosure[aria-expanded=true] { transform:rotate(90deg); }
.cx-disclosure:hover { background:#d5e3fa; }
.cx-disclosure:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.cx-element-entry.cx-detail-moving { overflow:hidden; overflow-anchor:none; }
.cx-detail-ghost { pointer-events:none; background:#f7f9fd; }

.cx-panel-actions { display:flex; align-items:center; gap:8px; }
.cx-settings-toggle { flex:none; }
.cx-settings-toggle[aria-expanded=true] { background:#e0eafb; color:#203f6c; }
.cx-board-settings { margin:8px 0; padding:10px; border:1px solid #d6e0f5; background:#f7f9fd; border-radius:4px; }
.cx-board-settings .cx-frow { display:flex; align-items:center; gap:6px; }
.cx-board-settings .cx-flabel { width:84px; flex:none; }
.cx-follow-defaults { line-height:18px; }

/* Type badges have one footprint in both object and construction-element lists. */
.obj-entry .cx-kind, .cx-element-entry .cx-kind {
  box-sizing: border-box; flex: 0 0 56px; width: 56px; min-width: 56px;
  height: 18px; padding: 0 4px; line-height: 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* One centred title grid for both lists; leave less space before the badge. */
.obj-entry > .obj-item, .cx-native-panel .cx-element-entry > .cx-row {
  align-items: center; padding: 0 1px; gap: 3px;
}
.obj-entry > .obj-open-toggle, .cx-element-entry > .cx-disclosure {
  left: 2px; top: 2px; font-size: 0;
}
.obj-entry > .obj-open-toggle::before, .cx-element-entry > .cx-disclosure::before {
  content: ""; position: absolute; left: 8px; top: 7px; width: 8px; height: 10px;
  background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.obj-entry .cx-kind, .cx-element-entry .cx-kind {
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}

.obj-board-settings { display:flex; flex-direction:column; gap:6px; }

/* Board-wide settings live beside the title, independent of property disclosure. */
.obj-entry > .obj-board-settings-toggle { position:absolute; right:3px; top:2px; width:24px; height:24px;
  display:flex; align-items:center; justify-content:center; padding:0; border:0; border-radius:4px;
  background:transparent; color:var(--muted); font-size:18px; line-height:1; cursor:pointer; }
.obj-entry > .obj-board-settings-toggle:hover,
.obj-entry > .obj-board-settings-toggle[aria-expanded="true"] { background:#d5e3fa; color:var(--accent); }
.obj-entry > .obj-board-settings-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.obj-has-board-settings > .obj-item,
.obj-has-board-settings > .obj-expanded-row { padding-right:30px; }
.obj-entry > .obj-board-settings { padding:10px 12px; background:#f7f9fd; border-bottom:1px solid #d6e0f5; }

.obj-settings-sliders { width:14px; height:14px; display:flex; flex-direction:column; justify-content:space-between; padding:2px 0; box-sizing:border-box; }
.obj-settings-sliders > i { display:block; position:relative; height:1px; width:14px; background:currentColor; }
.obj-settings-sliders > i::after { content:""; position:absolute; top:-2px; left:3px; width:3px; height:5px; border-radius:1px; background:currentColor; }
.obj-settings-sliders > i:nth-child(2)::after { left:9px; }

/* Pointer preview mirrors the board hit without selecting or opening a row. */
.cx-native-panel .cx-element-entry > .cx-row.cx-pointer-hover { background:#edf4ff; box-shadow:inset -3px 0 var(--accent); }
.cx-native-panel .cx-element-entry > .cx-row.cx-pointer-hover.on { background:#e0eafb; }

/* Reversible trial: wider animation inspector, compact aligned tracks. */
.animation-wide #side-panel-anim { font-size:12px; }
.animation-wide .anim-panel { padding:10px; }
.animation-wide .anim-panel .btn { font-size:11px; padding:4px 7px; }
.animation-wide .anim-panel .field { font-size:12px; }
.animation-wide .anim-panel .small { font-size:11px; }
.tl-row-label,.tl-lane { height:22px; }
.tl-bar { height:18px; line-height:16px; }
.animation-wide .tl-obj-label { font-size:11px; }
.animation-wide .tl-row-channel { font-size:10px; }
.animation-wide .tl-bar { font-size:10px; }
.animation-wide .tl-title { font-size:12px; }
.animation-wide .tl-row-label { gap:3px; padding:0 3px; }

.animation-wide .tl-object-heading { background:#edf1f7; color:#34465e; }
.animation-wide .tl-object-heading .tl-obj-label { font-weight:600; }
.animation-wide .tl-object-heading-lane { background:#edf1f7; border-bottom:0; }
.animation-wide .tl-row-label:not(.tl-object-heading) { padding-left:10px; }

.fullscreen-preview { position:fixed; inset:0; z-index:10000; background:#161b24; }
.fullscreen-preview-frame { display:block; width:100%; height:100%; border:0; background:#161b24; }
.fullscreen-preview-close { position:absolute; top:12px; right:16px; z-index:2; background:#fff; box-shadow:0 2px 10px #0003; }
.fullscreen-preview-loading { position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); color:#fff; }

/* Parameter menus: shared content geometry, independent of list header geometry. */
.parameter-menu { font-size:13px; gap:12px; }
.parameter-menu .cx-insp-group { gap:6px; border:0; padding:0; }
.parameter-menu .cx-insp-group + .cx-insp-group { border-top:1px solid #e3e9f2; padding-top:12px; margin-top:4px; }
.parameter-menu h4 { font-size:12px; color:var(--muted); margin:0 0 4px; font-weight:600; }
.parameter-menu .cx-property-row { grid-template-columns:72px minmax(0,1fr); min-height:32px; gap:8px; }
.parameter-menu .cx-flabel { font-size:13px; width:auto; }
.parameter-menu input.field,.parameter-menu select.field { font-size:13px; min-height:26px; }
.parameter-menu .cx-field.short { flex:0 1 72px; width:72px; min-width:44px; }
.parameter-menu .cx-control-cell { min-width:0; gap:6px 10px; }
.parameter-menu .cx-control-cell > .cx-field:not(.short):not([type=color]) { flex:1 1 100%; width:100%; min-width:0; }
.parameter-menu summary { font-size:12px; color:var(--muted); cursor:pointer; padding:5px 0; }
.parameter-menu details[open] > .cx-insp-group { margin-top:6px; }
.parameter-menu .parameter-help p { font-size:12px; margin:4px 0; }
.parameter-menu .cx-parents > summary { font-size:13px; }
.board-settings-tabs { display:flex; gap:4px; flex-wrap:wrap; padding-bottom:8px; }
.board-settings-tabs button[aria-pressed=true] { background:#e0eafb; color:#234674; border-color:#b8cdef; }
.board-settings-content { padding:12px 8px; min-width:0; }
.board-settings-content > :last-child { display:flex; flex-direction:column; gap:8px; min-width:0; }
.board-settings-content .cx-scope { display:none; }
.board-settings-content .cx-axis-style { min-width:0; }
.board-settings-content .cx-frow { flex-wrap:wrap; min-width:0; }
.board-settings-content select { max-width:100%; }
.cx-native-panel > .cx-figure-export { margin:12px 8px; font-size:12px; }
@container (max-width:360px) { .parameter-menu .cx-property-row { grid-template-columns:60px minmax(0,1fr); } }
.board-settings-content .cx-board-settings { border:0; border-radius:0; margin:0; padding:0; background:transparent; }
.board-settings-content .cx-frow.cx-property-row { display:grid; }
.board-settings-content .cx-property-row > .cx-flabel { width:auto; }
.parameter-menu .cx-control-cell > label { display:inline-flex; align-items:center; gap:6px; }
.parameter-menu .cx-control-cell > label > .cx-field.short { width:64px; }
.parameter-menu .cx-property-row .cx-ferr { min-width:0; }

/* Compact numeric controls; expression and text fields retain their full width. */
.parameter-menu input.field.num,
.parameter-menu .native-settings input.field.num,
.parameter-menu .cx-control-cell input.field[data-numeric] {
  width:56px; max-width:56px; min-width:0; flex:0 1 56px;
  height:24px; min-height:24px; padding:1px 4px;
}

/* Office-style numeric fields: one compact box contains value, unit and steppers. */
.parameter-menu .office-number { display:inline-flex; align-items:center; flex:0 0 100px; width:100px; height:28px;
  box-sizing:border-box; border:1px solid #bfc3c9; border-radius:4px; background:#fff;
  box-shadow:inset 0 1px 2px #0000000c; overflow:hidden; vertical-align:middle; }
.parameter-menu .office-number:focus-within { border-color:#5688cd; box-shadow:0 0 0 1px #5688cd; }
.parameter-menu .office-number input.field { flex:1 1 0; width:0; max-width:none; min-width:0; height:26px; min-height:0;
  padding:2px 4px 2px 7px; border:0; border-radius:0; background:transparent; box-shadow:none; outline:none;
  text-align:left; font-size:13px; line-height:20px; appearance:textfield; }
.parameter-menu .office-number input::-webkit-inner-spin-button,
.parameter-menu .office-number input::-webkit-outer-spin-button { appearance:none; margin:0; }
.office-number-unit { flex:none; padding-right:5px; font-size:12px; color:var(--text); white-space:nowrap; }
/* Fixed equal halves and CSS triangles avoid platform button and font glyph differences. */
.office-number-arrows { flex:0 0 20px; width:20px; height:26px; display:grid;
  grid-template-rows:13px 13px; border-left:1px solid #dedfe2; box-sizing:border-box; }
.office-number-arrows > button { appearance:none; -webkit-appearance:none; display:grid; place-items:center;
  box-sizing:border-box; width:100%; height:13px; min-width:0; min-height:0; max-height:13px;
  padding:0; margin:0; border:0; border-radius:0; box-shadow:none;
  background:#fff; color:#666; line-height:1; cursor:pointer; }
.office-number-arrows > button:hover:not(:disabled) { background:#e8eff9; color:#245a9d; }
.office-number-arrows > button:active:not(:disabled) { background:#d4e3f7; color:#245a9d; }
.office-number-arrows > button:disabled { background:#fff; color:#aaa; cursor:default; }
.office-number-chevron { display:block; width:0; height:0; border-left:3px solid transparent;
  border-right:3px solid transparent; border-bottom:4px solid currentColor; pointer-events:none; }
.office-number-arrows > button[data-direction=down] .office-number-chevron { transform:rotate(180deg); }
.parameter-menu .prop-row { justify-content:space-between; }
.parameter-menu .native-settings > .prop-row { display:flex; }
.parameter-menu .cx-property-row { grid-template-columns:minmax(72px,1fr) auto; }
.parameter-menu .cx-control-cell { justify-content:flex-end; }
.parameter-menu .cx-control-cell > .prop-row { flex:1 1 100%; }
.parameter-menu .cx-property-row { grid-template-columns:72px minmax(0,1fr); }
.parameter-menu .office-number input.field:disabled { background:#f5f5f5; }
.parameter-menu .office-number:has(input[aria-invalid=true]) { border-color:#c74242; }

/* Keep the value and suffix together; all steppers share the same right edge. */
.parameter-menu .office-number > input.field:is(.num,[data-numeric]) {
  flex:0 1 auto; width:calc(var(--number-ch, 4) * 1ch + 11px); max-width:calc(100% - 20px); min-width:0;
  height:26px; min-height:0; padding:2px 4px 2px 7px; font-size:13px;
}
.parameter-menu .office-number-unit { font-size:13px; margin-right:auto; padding-right:5px; }
.parameter-menu .office-number-arrows { margin-left:auto; }

.parameter-menu .office-number > input.field:is(.num,[data-numeric]) { -webkit-appearance:none; appearance:textfield; }
.parameter-menu .office-number > input::-webkit-inner-spin-button,
.parameter-menu .office-number > input::-webkit-outer-spin-button { -webkit-appearance:none; display:none; }

.clipboard-menu { position:fixed; z-index:10000; display:flex; flex-direction:column; min-width:180px;
  padding:5px; border:1px solid #d0d5dd; border-radius:6px; background:white; box-shadow:0 4px 18px #0002; }
.clipboard-menu button { appearance:none; text-align:left; border:0; background:transparent; color:var(--text);
  font:inherit; font-size:13px; padding:7px 12px; border-radius:3px; cursor:pointer; }
.clipboard-menu button:hover:not(:disabled),.clipboard-menu button:focus-visible { background:#e8eff9; outline:none; }
.clipboard-menu button:disabled { color:#9ba3af; cursor:default; }
.obj.clipboard-select-text,.obj.clipboard-select-text * { user-select:text; -webkit-user-select:text; cursor:text; touch-action:auto; }
.obj.clipboard-select-text { outline:1px dashed #3276e7; }

/* Property groups keep their spacing without repeating subsection headings. */
.obj-inline-detail .parameter-menu h4,
.cx-inline-detail .parameter-menu h4 { display:none; }

.dimension-overrides { list-style:none; margin:4px 0 0; padding:0; }
.dimension-overrides > li { display:flex; flex-wrap:nowrap; align-items:center; gap:8px; padding:4px 0; border-bottom:1px solid #e3e9f2; }
.dimension-overrides > li:last-child { border-bottom:0; }
.dimension-override-info { display:flex; flex:1 1 0; min-width:0; align-items:center; gap:12px; }
.dimension-override-name { display:flex; flex:none; align-items:center; gap:8px; white-space:nowrap; }
.dimension-override-values { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.parameter-menu .dimension-overrides .cx-follow-dimensions { flex:0 0 24px; width:24px; height:24px; min-height:24px; padding:0; border:0; background:transparent; font-size:18px; line-height:24px; color:var(--muted); }
.parameter-menu .dimension-overrides .cx-follow-dimensions:hover { background:#e8eff9; color:var(--accent); }

/* Extend the existing timeline leftward, keeping its original top edge and spacing. */
.anim-timeline.tl-expanded { position:fixed; z-index:30; box-sizing:border-box; margin:0;
  background:var(--panel, #fff); overflow:auto; overscroll-behavior:contain; }
.tl-expanded .tl-head { position:sticky; top:-6px; z-index:5; background:var(--panel, #fff); }
.tl-expand-toggle { white-space:nowrap; }
.tl-expand-resize { position:absolute; left:0; top:0; bottom:0; width:7px; cursor:ew-resize; touch-action:none; z-index:8; }
.tl-expand-resize:hover,.tl-expand-resize:focus-visible { background:#2563eb26; outline:none; }
.tl-expansion-space[hidden] { display:none; }

/* Expose the slide while scrubbing the extended timeline; keep its hit targets active. */
.anim-timeline.tl-expanded { transition:opacity 160ms ease; }
.anim-timeline.tl-expanded.tl-scrubbing { opacity:.07; }
.tl-playhead { pointer-events:auto; cursor:ew-resize; touch-action:none; }
.tl-playhead::after { content:""; position:absolute; top:0; bottom:0; left:-5px; width:12px; }
@media (prefers-reduced-motion:reduce) { .anim-timeline.tl-expanded { transition:none; } }

/* Page actions live beside the thumbnail they affect. */
.page-add { flex:none; width:100%; min-height:30px; border-style:dashed; background:transparent; color:var(--muted); }
.page-add::before { content:"＋ "; }
.page-card { flex:none; }
.page-card.page-dragging { opacity:.4; }
.page-card.page-drop-before::before,.page-card.page-drop-after::after { content:""; position:absolute; left:0; right:0; height:3px; background:var(--accent); border-radius:2px; z-index:4; }
.page-card.page-drop-before::before { top:-6px; }
.page-card.page-drop-after::after { bottom:-6px; }
.page-add.page-drop-before { border-color:var(--accent); background:#edf3ff; }

/* Axis settings: each range and compound control keeps one deliberate row. */
.board-settings-axes .cx-frow.cx-property-row { grid-template-columns:56px minmax(0,1fr); align-items:center; gap:8px; min-height:32px; }
.board-settings-axes .cx-property-row > .cx-flabel { padding-top:0; width:auto; white-space:nowrap; }
.board-settings-axes .cx-control-cell { justify-content:flex-start; }
.board-settings-axes .axes-range-row > .cx-control-cell { display:grid; grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr); gap:6px; width:min(100%,226px); }
.board-settings-axes .axes-range-row .office-number { width:100%; min-width:0; }
.board-settings-axes .axes-range-row .muted { text-align:center; }
.board-settings-axes .axes-inline-options > .cx-control-cell { display:grid; grid-template-columns:minmax(60px,92px) auto; gap:8px; align-items:center; }
.board-settings-axes .axes-inline-options .office-number { width:100%; min-width:0; }
.board-settings-axes .axes-inline-options .cx-check { white-space:nowrap; gap:4px; }
.board-settings-axes .axes-name-row > .cx-control-cell { display:grid; grid-template-columns:minmax(0,1fr) 64px; gap:6px; width:min(100%,226px); }
.board-settings-axes .axes-name-row .cx-control-cell > .field { width:100%; min-width:0; }
.board-settings-axes .axes-origin-row select { width:92px; }
.board-settings-axes .cx-axis-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; flex-wrap:nowrap; }
.board-settings-axes .cx-axis-head > .cx-axis-preset { width:100%; min-width:0; }
.board-settings-axes .cx-axis-apply { white-space:nowrap; }
.board-settings-axes .axes-visibility { gap:16px; }
.board-settings-axes .axes-visibility label { display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.board-settings-axes .cx-axis-status { font-size:12px; }
.board-settings-content > .board-settings-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:2px; padding:3px; background:#f0f3f8; border-radius:6px; margin-bottom:4px; }
.board-settings-tabs > .btn { display:flex; align-items:center; justify-content:center; text-align:center; width:100%; min-width:0; padding:0 6px; white-space:nowrap; background:transparent; border-color:transparent; }
.board-settings-tabs > .btn[aria-pressed=true] { background:#fff; border-color:#d6e0f0; box-shadow:0 1px 2px #2034540a; }
.cx-empty { display:flex; align-items:center; flex-wrap:wrap; gap:4px; }

/* Label properties use distinct, aligned rows rather than one wrapping control group. */
.parameter-labels .cx-caption-settings { display:grid; gap:6px; }
.parameter-labels .cx-frow.cx-property-row { grid-template-columns:56px minmax(0,1fr); align-items:center; gap:8px; min-height:32px; }
.parameter-labels .cx-property-row > .cx-flabel { padding-top:0; width:auto; white-space:nowrap; }
.parameter-labels .cx-control-cell { justify-content:flex-start; }
.parameter-labels .cx-caption-display .cx-control-cell { flex-wrap:nowrap; gap:12px; }
.parameter-labels .cx-caption-display select.cx-field.short { width:92px; flex:0 0 92px; }
.parameter-labels .cx-caption-content input.cx-field { width:100%; min-width:0; }
.parameter-labels .cx-label-position > .cx-control-cell { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:min(100%,226px); gap:10px; }
.parameter-labels .cx-label-position .cx-control-cell > label { display:grid; grid-template-columns:12px minmax(0,1fr); min-width:0; gap:4px; }
.parameter-labels .cx-label-position .office-number { width:100%; min-width:0; }
.parameter-labels .cx-label-size .cx-control-cell { gap:12px; }

.focus-target-frame { position:absolute; z-index:10000; box-sizing:border-box; border:var(--focus-border,1.5px) dashed #2563eb; background:transparent; cursor:move; touch-action:none; outline:none; }
.focus-target-frame:focus-visible { border-style:solid; }
.focus-target-label { position:absolute; left:0; top:0; padding:2px 5px; background:#2563eb; color:white; font-size:var(--focus-label-size,12px); white-space:nowrap; pointer-events:none; }
.focus-target-handle { position:absolute; width:var(--focus-handle,10px); height:var(--focus-handle,10px); box-sizing:border-box; background:white; border:var(--focus-border,1.5px) solid #2563eb; border-radius:2px; transform:translate(-50%,-50%); }
.focus-target-handle[data-handle="nw"] { left:0; top:0; cursor:nwse-resize; }
.focus-target-handle[data-handle="ne"] { left:100%; top:0; cursor:nesw-resize; }
.focus-target-handle[data-handle="sw"] { left:0; top:100%; cursor:nesw-resize; }
.focus-target-handle[data-handle="se"] { left:100%; top:100%; cursor:nwse-resize; }
.focus-target-handle[data-handle="w"] { left:0; top:50%; cursor:ew-resize; }
.focus-target-handle[data-handle="e"] { left:100%; top:50%; cursor:ew-resize; }

.slide.focus-target-editing .obj { outline:none; }
.anim-param .anim-maker-offsetX, .anim-param .anim-maker-offsetY, .anim-param .anim-maker-widthPercent { width:86px; }

.anim-param .anim-maker-surroundings { width: auto; min-width: 8em; }
/* Space controls remain in the existing compact board strip. */
.cx-spatial-controls { display:flex; align-items:center; flex:none; gap:2px; }
.cx-spatial-controls .field { width:52px; min-width:0; padding:3px 1px; height:28px; font-size:11px; }
.cx-spatial-controls .cx-camera-preset { width:54px; }
.cx-spatial-controls .cx-mode { padding:4px; }
.cx-mode.on { color:var(--accent); background:#e9f1fb; }
@media (max-width:1250px) { .cx-spatial-controls .cx-mode { font-size:11px; padding:3px 2px; } .cx-native-editor .cx-toolbar { gap:3px; padding-inline:4px; } }
.cx-spatial-editor .cx-tools { flex:none; overflow:visible; }
@media (max-width:1250px) {
  .cx-spatial-controls .cx-workplane { width:44px; }
  .cx-spatial-controls .cx-camera-preset { width:48px; }
}

/* The temporary camera maker fits the supported compact window without changing layout mode. */
.anim-maker .anim-maker-camera-edit[aria-pressed="true"],
.anim-maker .anim-maker-camera-edit[aria-pressed="true"]:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
@media (max-width:1250px) {
  .workbench:has(.anim-maker-camera-edit) { min-width:1040px; }
  .workbench:has(.anim-maker-camera-edit) .columns { grid-template-columns:212px 6px minmax(496px,1fr) 6px 320px; }
}

.cx-projection-controls,.cx-perspective-strength { display:flex; align-items:center; gap:4px; flex:none; font-size:11px; }
.cx-projection-controls .field { height:25px; width:52px; padding:2px 3px; }
.cx-projection-controls .cx-strength { width:48px; }
.cx-projection-controls .cx-perspective-strength { white-space:nowrap; }
.anim-maker-projection { width:76px; }