:root {
  --lab-workshop-accent: #d47b72;
  color-scheme: dark;
  color: var(--lab-text);
  background: var(--lab-bg);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { padding: 0; background: radial-gradient(circle at 50% -20%, #333b48, var(--lab-bg) 48%); }
button, input, select { font: inherit; }
button, input, select { border: 1px solid var(--lab-border-strong); border-radius: 4px; color: var(--lab-text); background: var(--lab-panel); }
button { padding: 7px 10px; font-size: 11px; }
button:hover, button:focus-visible, input:focus-visible, select:focus-visible { border-color: var(--lab-focus); outline: 2px solid rgb(97 175 239 / 20%); outline-offset: 1px; }
button.accent { border-color: var(--lab-workshop-accent); color: var(--lab-workshop-accent); background: rgb(212 123 114 / 10%); }
button.subtle { color: var(--lab-muted); background: transparent; }

.workshop-app { width: 100%; max-width: none; height: 100vh; margin: 0; overflow: hidden; border: 1px solid var(--lab-border-strong); border-radius: 0; background: rgb(24 27 33 / 94%); box-shadow: none; display: flex; flex-direction: column; }
/* `flex: 0 0 auto` so the header keeps its content's height: as a plain item of the app's column it would
   shrink to its `min-height` and let a wrapped nav spill over the workspace below it. */
.workshop-header { position: relative; display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; padding: 10px 16px; border-bottom: 1px solid var(--lab-border-strong); background: #242830; }
.workshop-brand { display: flex; align-items: center; gap: 11px; }
.workshop-mark { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--lab-workshop-accent); border-radius: 50%; color: var(--lab-workshop-accent); font-weight: 800; }
.workshop-brand strong { display: block; color: #f0f2f4; font-size: 15px; }
.workshop-build { color: var(--lab-muted); font-size: 10px; font-weight: 500; letter-spacing: .04em; }
.workshop-brand span { display: block; margin-top: 2px; color: var(--lab-muted); font-size: 11px; }
.workshop-actions { display: flex; align-items: center; gap: 7px; }
.workshop-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.workshop-nav a { padding: 5px 7px; border: 1px solid transparent; border-radius: 4px; color: var(--lab-muted); font-size: 11px; text-decoration: none; }
.workshop-nav a:hover, .workshop-nav a:focus-visible { border-color: var(--lab-border-strong); color: var(--lab-text); background: var(--lab-panel); outline: none; }
.workshop-nav__button { padding: 5px 7px; border-color: transparent; color: var(--lab-muted); background: transparent; font-size: 11px; }
.workshop-nav__button:hover, .workshop-nav__button:focus-visible { border-color: var(--lab-border-strong); color: var(--lab-text); background: var(--lab-panel); outline: none; }
/* The document actions sit over the stage, against its top edge, the way the preview controls sit against
   its bottom one. The X ruler owns the first 24px, and the stage's own labels sit at 32px to either side. */
.workshop-toolbar { position: absolute; top: 28px; left: 50%; z-index: 8; display: flex; align-items: center; justify-content: center; width: max-content; max-width: calc(100% - 28px); min-height: 0; margin: 0; padding: 0; border: 0; background: transparent; transform: translateX(-50%); }
.workshop-toolbar__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; padding: 4px; border: 1px solid var(--lab-border-strong); border-radius: 6px; background: rgb(29 33 40 / 94%); box-shadow: 0 5px 20px rgb(0 0 0 / 30%); }
.workshop-start__controls { display: flex; align-items: center; gap: 6px; min-width: 0; }
.workshop-start__controls select { flex: 1 1 auto; }
.workshop-start__controls button { flex: none; padding: 6px 10px; font-size: 11px; }
.workshop-status { color: var(--lab-workshop-accent); font-size: 11px; }
/* Fluid rails: both rails grow with the window between a readable minimum and a cap, so the
   document rail, Preview and Inspector are all visible from 1280px without scrolling the page. */
.workshop-workspace { position: relative; display: grid; flex: 1 1 auto; min-height: 0; grid-template-columns: clamp(240px, 26vw, 640px) minmax(0, 1fr) clamp(320px, 26vw, 700px); }
.workshop-panel { display: flex; min-width: 0; min-height: 0; flex-direction: column; background: linear-gradient(180deg, rgb(44 49 58 / 96%), rgb(35 40 48 / 96%)); }
.workshop-panel[hidden] { display: none !important; }
.workshop-drawer-toggle { display: inline-flex; align-items: center; gap: 6px; }
.workshop-drawer-toggle[hidden] { display: none !important; }
.workshop-drawer-toggle[aria-expanded="true"] { border-color: var(--lab-workshop-accent); color: var(--lab-workshop-accent); background: rgb(212 123 114 / 10%); }
.workshop-panel--left { border-right: 1px solid var(--lab-border-strong); }
.workshop-panel--right { border-left: 1px solid var(--lab-border-strong); }
.workshop-panel__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 45px; padding: 11px 13px; border-bottom: 1px solid var(--lab-border-strong); }
.workshop-panel__header h2 { margin: 0; color: #edf0f4; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.workshop-panel__header small { color: var(--lab-muted); font-size: 11px; }
.workshop-panel__body { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scrollbar-width: none; -ms-overflow-style: none; padding: 12px; }
.workshop-panel__body::-webkit-scrollbar { display: none; }
.workshop-section { margin-bottom: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--lab-border); }
.workshop-section:last-child { border-bottom: 0; }
.workshop-section[hidden], .workshop-field[hidden], .workshop-inspector-actions[hidden] { display: none !important; }
.workshop-selected-header { margin: 0 0 10px; }
.workshop-selected-header h3 { margin: 0 0 3px; color: var(--lab-text); font-size: 13px; font-weight: 600; }
.workshop-selected-header p { margin: 0; color: var(--lab-muted); font-size: 11px; line-height: 1.4; }
.workshop-selected-inspector .workshop-section { margin: 0; padding: 0; border: 0; }
.workshop-selected-inspector .workshop-section > summary { display: none; }
.workshop-selected-inspector .workshop-section > div[hidden] { display: none !important; }
.workshop-selected-inspector .workshop-inspector-section__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 20px; }
.workshop-inspector-section { margin: 0 0 10px; padding: 0 0 9px; border-bottom: 1px solid var(--lab-border); }
.workshop-inspector-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.workshop-inspector-section:not([open]) { padding-bottom: 0; }
.workshop-inspector-section > summary { list-style: none; cursor: pointer; }
.workshop-inspector-section > summary::-webkit-details-marker { display: none; }
.workshop-inspector-section > summary::before { width: 1em; margin-inline-end: 3px; color: var(--lab-muted); content: "▸"; }
.workshop-inspector-section[open] > summary::before { content: "▾"; }
.workshop-selected-inspector .workshop-field { display: flex; min-width: 0; flex-direction: column; align-items: stretch; gap: 6px; margin: 8px 0; font-size: 12px; }
.workshop-selected-inspector .workshop-field input, .workshop-selected-inspector .workshop-field select,
.workshop-selected-inspector .workshop-field textarea { padding: 9px 10px; font-size: 12px; }
.workshop-selected-inspector .workshop-field textarea { min-height: 76px; }
.workshop-selected-inspector #element-text-field, .workshop-selected-inspector #element-layout-fields,
.workshop-selected-inspector #attachment-layout-fields, .workshop-selected-inspector .workshop-inspector-actions,
.workshop-selected-inspector .workshop-note { grid-column: 1 / -1; }
.workshop-selected-inspector .workshop-layout-grid { gap: 8px; margin: 8px 0; }
.workshop-selected-inspector .workshop-layout-grid label { font-size: 11px; }
.workshop-selected-inspector .workshop-layout-grid input { padding: 8px; font-size: 12px; }
.workshop-selected-inspector .workshop-inspector-actions { margin-top: 13px; }
.workshop-selected-inspector .workshop-inspector-actions button { min-height: 34px; font-size: 11px; }
.workshop-selected-inspector .workshop-inspector-actions .danger { flex: 0 0 auto; }
.workshop-section > summary { list-style: none; }
.workshop-section > summary::-webkit-details-marker { display: none; }
.workshop-section > summary::before { width: 1em; margin-inline-end: 3px; color: var(--lab-muted); content: "▸"; }
.workshop-section[open] > summary::before { content: "▾"; }
.workshop-section:not([open]) { padding-bottom: 0; }
.workshop-section__title { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; color: var(--lab-workshop-accent); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.workshop-section__actions, .workshop-history { display: inline-flex; align-items: center; gap: 4px; }
.workshop-face-settings { margin-top: 10px; padding: 10px; border: 1px solid var(--lab-border); border-radius: 5px; background: rgb(24 27 33 / 35%); }
.workshop-face-settings__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: var(--lab-text); font-size: 11px; }
.workshop-face-settings .workshop-field { margin: 8px 0; }
.workshop-face-settings .workshop-field:last-child { margin-bottom: 0; }
.workshop-add-button, .workshop-history button { padding: 2px 5px; border: 0; font-size: 10px; }
.workshop-history button:disabled { opacity: .35; }
.workshop-field { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 8px; margin: 7px 0; color: var(--lab-muted); font-size: 11px; }
.workshop-field input, .workshop-field select { width: 100%; min-width: 0; padding: 6px 8px; font-size: 11px; }
.workshop-field textarea { width: 100%; min-width: 0; resize: vertical; padding: 6px 8px; border: 1px solid var(--lab-border-strong); border-radius: 4px; color: var(--lab-text); background: var(--lab-panel); font: inherit; font-size: 11px; }
.workshop-field input[type="color"] { height: 29px; padding: 2px; }
.workshop-range-field { grid-template-columns: 88px minmax(0, 1fr) auto; }
.workshop-range-field input[type="range"] { min-width: 0; padding: 0; accent-color: var(--lab-workshop-accent); }
.workshop-range-field output { min-width: 42px; color: var(--lab-muted); font-size: 10px; text-align: right; }
.workshop-stack { display: grid; gap: 6px; }
.workshop-tree-item { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; width: 100%; min-height: 48px; padding: 10px 10px; border-color: transparent; color: var(--lab-text); background: transparent; text-align: left; font-size: 13px; }
.workshop-tree-item:hover { background: var(--lab-panel-raised); }
.workshop-tree-item--dragging { opacity: .45; }
.workshop-tree-item--drop-target { border-color: var(--lab-focus); background: rgb(97 175 239 / 12%); box-shadow: inset 0 0 0 1px rgb(97 175 239 / 18%); }
.workshop-tree-item[aria-current="true"] { border-color: var(--lab-workshop-accent); background: rgb(212 123 114 / 11%); }
.workshop-tree-item__icon { color: var(--lab-focus); text-align: center; }
.workshop-tree-item__collapse { min-width: 0; padding: 0; border-color: transparent; color: var(--lab-focus); background: transparent; font-size: 16px; text-align: center; }
.workshop-tree-item__thumbnail { width: 32px; height: 32px; border: 1px solid var(--lab-border-strong); border-radius: 4px; object-fit: cover; background: var(--lab-panel); }
.workshop-tree-item__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workshop-tree-item__meta { color: var(--lab-muted); font-size: 10px; }
/* The tree is a size container, so a row answers to the rail's width rather than the viewport's. */
.workshop-element-tree { container: workshop-tree / inline-size; max-height: 420px; overflow: auto; padding-right: 2px; }
.workshop-layered-tree { gap: 2px; }
.workshop-layer-children { display: grid; gap: 2px; margin: 0 0 4px 15px; padding-left: 8px; border-left: 1px solid var(--lab-border); }
.workshop-tree-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.workshop-layer-item { grid-template-columns: 36px minmax(0, 1fr) auto minmax(0, max-content); }
.workshop-element-item { grid-template-columns: 36px minmax(0, 1fr) auto auto minmax(0, max-content); }
.workshop-member-item { grid-template-columns: 36px minmax(0, 1fr) auto; min-height: 40px; padding-block: 6px; cursor: default; }
.workshop-group-members { margin-left: 12px; }
.workshop-tree-item[data-face-id] { --tree-item-accent: #78c2b7; border-left: 2px solid var(--tree-item-accent); background: rgb(120 194 183 / 4%); }
.workshop-layer-item { --tree-item-accent: #91afe8; border-left: 2px solid var(--tree-item-accent); background: rgb(145 175 232 / 5%); }
.workshop-element-item { --tree-item-accent: #d5b477; border-left: 2px solid var(--tree-item-accent); background: rgb(213 180 119 / 3%); }
.workshop-tree-item[data-face-id] .workshop-tree-item__icon,
.workshop-layer-item .workshop-tree-item__collapse,
.workshop-layer-item .workshop-tree-item__icon { color: var(--tree-item-accent); }
.workshop-tree-item[data-face-id]:hover, .workshop-layer-item:hover, .workshop-element-item:hover {
  border-left-color: var(--tree-item-accent);
  background: color-mix(in srgb, var(--tree-item-accent) 10%, transparent);
}
.workshop-tree-item[data-face-id][aria-current="true"],
.workshop-layer-item[aria-current="true"],
.workshop-element-item[aria-current="true"] {
  border-color: var(--tree-item-accent);
  background: color-mix(in srgb, var(--tree-item-accent) 16%, transparent);
  box-shadow: inset 2px 0 var(--tree-item-accent);
}
.workshop-element-item__type { color: var(--lab-muted); font-size: 11px; text-transform: lowercase; }
.workshop-tree-item__mode { min-width: 54px; padding: 4px 6px; color: var(--lab-muted); font-size: 10px; text-transform: capitalize; }
.workshop-spacer-sizing { display: inline-flex; align-items: center; gap: 2px; }
.workshop-spacer-sizing .workshop-tree-item__action { min-width: 18px; padding-inline: 3px; }
.workshop-tree-item__actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 2px; }
.workshop-tree-item__action { min-width: 22px; padding: 4px 5px; border-color: transparent; color: var(--lab-muted); background: transparent; font-size: 10px; line-height: 1; }
.workshop-tree-item__action:hover, .workshop-tree-item__action:focus-visible { border-color: var(--lab-border-strong); color: var(--lab-text); background: var(--lab-panel-raised); }
.workshop-tree-item__unavailable { color: #e5c07b; }
/* Below the width where a row can still spare a readable line for its label, the row wraps: the
   label keeps the first line beside the icon, and the metadata, the mode toggle and the actions
   follow underneath. Actions added later wrap onto a further line instead of squeezing the label
   again, so a row that gains controls stays readable. This block comes last on purpose: it has to
   outrank the single-line row rules above it on source order. */
@container workshop-tree (max-width: 500px) {
  .workshop-layer-item, .workshop-element-item, .workshop-member-item { display: flex; flex-wrap: wrap; align-items: center; row-gap: 5px; }
  .workshop-layer-item > .workshop-tree-item__label,
  .workshop-element-item > .workshop-tree-item__label,
  .workshop-member-item > .workshop-tree-item__label { flex: 1 1 calc(100% - 44px); }
  .workshop-tree-item__icon, .workshop-tree-item__collapse { flex: 0 0 36px; }
  .workshop-tree-item__thumbnail { flex: 0 0 32px; }
  .workshop-element-item__type { flex: 0 1 auto; white-space: nowrap; }
  .workshop-tree-item__actions { flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-start; }
  /* Tighter row padding and nesting, so a label keeps its line several groups deep. */
  .workshop-tree-item { padding-inline: 6px; }
  .workshop-layer-children { margin-left: 6px; padding-left: 4px; }
  .workshop-group-members { margin-left: 4px; }
}
.workshop-note { margin: 8px 0 0; color: var(--lab-muted); font-size: 11px; line-height: 1.45; }
.workshop-error { margin-top: 8px; padding: 7px 8px; border: 1px solid rgb(225 139 135 / 50%); border-radius: 4px; color: #e8a19c; background: rgb(225 139 135 / 8%); font-size: 11px; line-height: 1.35; }
.workshop-warning { margin-top: 8px; padding: 7px 8px; border: 1px solid rgb(229 192 123 / 50%); border-radius: 4px; color: #e5c07b; background: rgb(229 192 123 / 8%); font-size: 11px; line-height: 1.35; }
.workshop-badge { display: inline-flex; align-items: center; padding: 3px 6px; border: 1px solid var(--lab-border-strong); border-radius: 4px; color: var(--lab-muted); font-size: 10px; }

/* `--workshop-stage-top` is the room the document actions take against the top edge; the stage's own
   labels sit below it, and the narrow rule raises it for the width where the toolbar wraps. */
.workshop-stage { --workshop-stage-top: 78px; position: relative; min-width: 0; overflow: hidden; background: radial-gradient(ellipse at center, #333944 0%, #252a32 56%, #20242b 100%); }
.workshop-stage .cardinal-feedback { display: none; }
.workshop-stage::before { position: absolute; inset: 0; opacity: .17; background-image: linear-gradient(rgb(255 255 255 / 6%) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / 6%) 1px, transparent 1px); background-size: 32px 32px; content: ""; mask-image: linear-gradient(to bottom, black, transparent 90%); }
.workshop-stage__zone { position: absolute; inset: 0; pointer-events: none; }
/* Below the document actions, which the stage now carries against its top edge. */
.workshop-stage__header { position: absolute; inset: var(--workshop-stage-top) 16px auto 42px; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--lab-muted); font-size: 11px; }
.workshop-stage__header strong { color: var(--lab-workshop-accent); font-weight: 600; }
.workshop-stage__footer { position: absolute; inset: var(--workshop-stage-top) 16px auto auto; z-index: 2; display: flex; gap: 14px; color: var(--lab-muted); font-size: 10px; }
.workshop-stage__footer strong { color: var(--lab-workshop-accent); font-weight: 500; }
.workshop-preview-state { position: absolute; left: 42px; bottom: 20px; z-index: 2; color: var(--lab-muted); font-size: 10px; }
.workshop-preview-state strong { color: var(--lab-workshop-accent); font-weight: 500; }
.workshop-stage-controls { position: absolute; left: 50%; bottom: 12px; z-index: 8; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 5px; width: max-content; max-width: calc(100% - 28px); padding: 7px; border: 1px solid var(--lab-border-strong); border-radius: 7px; background: rgb(29 33 40 / 94%); box-shadow: 0 5px 20px rgb(0 0 0 / 30%); transform: translateX(-50%); }
.workshop-stage-controls > button { min-height: 30px; padding: 5px 7px; color: var(--lab-muted); font-size: 10px; white-space: nowrap; }
.workshop-stage-controls > button[aria-pressed="true"] { border-color: var(--lab-workshop-accent); color: var(--lab-workshop-accent); background: rgb(212 123 114 / 10%); }
.workshop-stage-controls__divider { width: 1px; height: 24px; margin: 0 2px; background: var(--lab-border-strong); }
.workshop-stage-zoom { display: grid; grid-template-columns: auto minmax(58px, 90px) 36px; align-items: center; gap: 5px; padding: 0 3px; color: var(--lab-muted); font-size: 10px; }
.workshop-stage-zoom input { width: 100%; min-width: 0; padding: 0; accent-color: var(--lab-workshop-accent); }
.workshop-stage-zoom output { color: var(--lab-text); font-size: 10px; text-align: right; }
.workshop-layout-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.workshop-layout-grid label { display: grid; gap: 3px; color: var(--lab-muted); font-size: 10px; }
.workshop-layout-grid input { width: 100%; padding: 5px 6px; font-size: 11px; }
.workshop-field input[type="checkbox"] { width: auto; padding: 0; }
.workshop-inspector-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.workshop-inspector-actions button { flex: 1 1 70px; padding: 6px; font-size: 10px; }
.workshop-inspector-actions .danger { color: #e18b87; border-color: rgb(225 139 135 / 45%); }
.workshop-overlay-editor { position: absolute; z-index: 4; border: 1px solid rgb(212 123 114 / 72%); border-radius: 3px; background: rgb(212 123 114 / 10%); pointer-events: none; }
.workshop-overlay-editor--flow { border-style: dashed; background: transparent; }
.workshop-overlay-editor--flow .workshop-overlay-handle { display: none; }
.workshop-overlay-handle { position: absolute; display: block; width: 10px; height: 10px; padding: 0; border: 1px solid var(--lab-workshop-accent); border-radius: 1px; background: #252a32; pointer-events: auto; }
.workshop-overlay-handle--nw { left: -6px; top: -6px; }
.workshop-overlay-handle--n { left: 50%; top: -6px; transform: translateX(-50%); }
.workshop-overlay-handle--ne { right: -6px; top: -6px; }
.workshop-overlay-handle--e { right: -6px; top: 50%; transform: translateY(-50%); }
.workshop-overlay-handle--se { right: -6px; bottom: -6px; }
.workshop-overlay-handle--s { left: 50%; bottom: -6px; transform: translateX(-50%); }
.workshop-overlay-handle--sw { left: -6px; bottom: -6px; }
.workshop-overlay-handle--w { left: -6px; top: 50%; transform: translateY(-50%); }
.workshop-card-grid { position: absolute; z-index: 3; border: 1px solid rgb(229 192 123 / 60%); border-radius: 14px; opacity: .72; pointer-events: none; background-image: linear-gradient(to right, rgb(229 192 123 / 28%) 1px, transparent 1px), linear-gradient(to bottom, rgb(229 192 123 / 28%) 1px, transparent 1px); background-position: 0 0; background-repeat: repeat; transform-origin: 0 0; overflow: hidden; }
.workshop-ruler { position: absolute; z-index: 2; color: var(--lab-muted); font-size: 9px; line-height: 1; pointer-events: none; }
.workshop-ruler--x { inset: 0 0 auto; height: 24px; border-bottom: 1px solid rgb(151 163 177 / 24%); }
.workshop-ruler--y { inset: 0 auto 0 0; width: 38px; border-right: 1px solid rgb(151 163 177 / 24%); }
.workshop-ruler__axis { position: absolute; z-index: 1; display: grid; place-items: center; width: 34px; height: 18px; color: var(--lab-workshop-accent); font-weight: 700; white-space: nowrap; }
.workshop-ruler--x .workshop-ruler__axis { left: 7px; top: 3px; }
.workshop-ruler--y .workshop-ruler__axis { left: 2px; top: 27px; }
.workshop-ruler__ticks { position: absolute; inset: 0; }
.workshop-ruler__selection { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.workshop-ruler__tick { position: absolute; color: var(--lab-muted); white-space: nowrap; }
.workshop-ruler--x .workshop-ruler__tick { top: 12px; border-left: 1px solid rgb(151 163 177 / 38%); padding-left: 2px; height: 11px; }
.workshop-ruler--y .workshop-ruler__tick { left: 16px; border-top: 1px solid rgb(151 163 177 / 38%); padding-top: 2px; width: 13px; }
.workshop-ruler__tick--card-edge { color: var(--lab-workshop-accent); font-weight: 700; }
.workshop-ruler--x .workshop-ruler__tick--card-edge { border-color: var(--lab-workshop-accent); }
.workshop-ruler--y .workshop-ruler__tick--card-edge { border-color: var(--lab-workshop-accent); }
.workshop-ruler__selection-marker { position: absolute; color: #75dfc5; font-size: 9px; font-weight: 700; white-space: nowrap; }
.workshop-ruler--x .workshop-ruler__selection-marker { top: 0; height: 24px; border-left: 1px solid #75dfc5; }
.workshop-ruler--x .workshop-ruler__selection-marker::before { position: absolute; top: 0; left: 1px; color: #75dfc5; content: attr(data-label); text-shadow: 0 1px 3px #171a20, 0 0 3px #171a20; transform: translateX(-50%); }
.workshop-ruler--x .workshop-ruler__selection-marker--start::before { transform: none; }
.workshop-ruler--x .workshop-ruler__selection-marker--end::before { transform: translateX(-100%); }
.workshop-ruler--y .workshop-ruler__selection-marker { left: 14px; width: 24px; border-top: 1px solid #75dfc5; }
.workshop-ruler--y .workshop-ruler__selection-marker::before { position: absolute; top: 1px; left: 1px; color: #75dfc5; content: attr(data-label); text-shadow: 0 1px 3px #171a20, 0 0 3px #171a20; transform: translateY(-50%); }
.workshop-ruler--y .workshop-ruler__selection-marker--start::before { transform: none; }
.workshop-ruler--y .workshop-ruler__selection-marker--end::before { transform: translateY(-100%); }

/* Below about 1100px two fluid columns are left, and the Inspector becomes a drawer that
   overlays the Preview instead of dropping below the fold. The controller decides when it is
   open; that state is editor-only and lives in memory. */
@media (max-width: 1100px) {
  body { padding: 0; }
  .workshop-app { border-radius: 0; }
  .workshop-header { align-items: flex-start; flex-direction: column; }
  .workshop-actions { width: 100%; flex-wrap: wrap; }
  .workshop-stage { --workshop-stage-top: 122px; }
  .workshop-workspace { grid-template-columns: clamp(240px, 30vw, 360px) minmax(0, 1fr); }
  .workshop-panel--right { position: absolute; z-index: 9; inset: 0 0 0 auto; width: min(420px, 100%); border-left: 1px solid var(--lab-border-strong); box-shadow: -10px 0 28px rgb(0 0 0 / 38%); }
}

@media (max-width: 720px) {
  .workshop-workspace { display: flex; flex-direction: column; }
  .workshop-panel--left, .workshop-panel--right { border: 0; border-bottom: 1px solid var(--lab-border-strong); }
  .workshop-panel--right { position: static; inset: auto; width: auto; box-shadow: none; }
  .workshop-stage { min-height: 570px; order: -1; }
  .workshop-toolbar { max-width: calc(100% - 16px); }
  .workshop-toolbar__actions { gap: 4px; padding: 3px; }
  .workshop-stage-controls { bottom: 10px; gap: 3px; max-width: calc(100% - 16px); padding: 5px; }
  .workshop-stage-controls > button { min-height: 28px; padding: 4px 6px; }
  .workshop-stage-controls__divider { display: none; }
  .workshop-stage-zoom { grid-template-columns: auto minmax(54px, 76px) 34px; gap: 4px; }
}

/* ---- Inspector field sections: Text, Transform, Mask and a member's Size rules. ---- */
/* A field that needs the whole row inside the Inspector's two-column section body. */
.workshop-selected-inspector .workshop-field--wide { grid-column: 1 / -1; }
.workshop-selected-inspector .workshop-inspector-section__body > .workshop-note { margin: 6px 0 0; }
.workshop-selected-inspector .workshop-range-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 8px; }
.workshop-selected-inspector .workshop-range-field > span { grid-column: 1 / -1; }
.workshop-selected-inspector .workshop-range-field input[type="range"] { padding: 0; accent-color: var(--lab-workshop-accent); }
.workshop-selected-inspector .workshop-range-field output { min-width: 42px; color: var(--lab-muted); font-size: 10px; text-align: right; }
.workshop-selected-inspector [aria-invalid] { border-color: var(--lab-workshop-accent); }
/* ---- Group authoring. Appended as one block so it stays separable from the rules above. ---- */

/* A member row carries the same controls as any other row, so it takes the same track template and wraps
   the same way under the tree's container query above. */
.workshop-member-item { grid-template-columns: 36px minmax(0, 1fr) auto auto minmax(0, max-content); min-height: 44px; cursor: pointer; }
.workshop-member-item { --tree-item-accent: #b9a1d8; border-left: 2px solid var(--tree-item-accent); background: rgb(185 161 216 / 4%); }
.workshop-member-item:hover { border-left-color: var(--tree-item-accent); background: color-mix(in srgb, var(--tree-item-accent) 10%, transparent); }
.workshop-member-item[aria-current="true"] { border-color: var(--tree-item-accent); background: color-mix(in srgb, var(--tree-item-accent) 16%, transparent); box-shadow: inset 2px 0 var(--tree-item-accent); }
.workshop-element-item[data-group="true"] { --tree-item-accent: #8fd4c4; }

/* A section its own module hides when the selection is not its subject. */
.workshop-inspector-section[hidden] { display: none !important; }

/* An edit that went through but could not be carried out exactly, such as an overlay box that no fraction
   of its new parent can express. Editor state: it never reaches the document or the Authoring history. */
.workshop-notice { margin-top: 8px; padding: 7px 8px; border: 1px solid rgb(143 212 196 / 45%); border-radius: 4px; color: #8fd4c4; background: rgb(143 212 196 / 8%); font-size: 11px; line-height: 1.35; }
.workshop-notice[hidden] { display: none !important; }

/* The individual-sides expander for a group's padding. */
.workshop-group-sides { grid-column: 1 / -1; margin: 2px 0 6px; }
.workshop-group-sides > summary { list-style: none; color: var(--lab-muted); cursor: pointer; font-size: 11px; }
.workshop-group-sides > summary::-webkit-details-marker { display: none; }
.workshop-group-sides > summary::before { width: 1em; margin-inline-end: 3px; content: "▸"; }
.workshop-group-sides[open] > summary::before { content: "▾"; }
.workshop-selected-inspector .workshop-group-sides .workshop-field { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: center; margin: 6px 0; }

/* ---- Text runs and the document's Symbol set. ---- */
/* These blocks set `display`, which outranks the hidden attribute's own rule, so each one says how it
   disappears, exactly as the panel, section and field rules above do. */
.workshop-runs-switch[hidden], .workshop-runs-confirm[hidden], .workshop-run-rows[hidden],
.workshop-run-row[hidden], .workshop-run-row__actions[hidden], .workshop-run-style__body[hidden],
.workshop-symbol-list[hidden], .workshop-symbol-add[hidden], .workshop-symbol__fields[hidden] { display: none !important; }
/* The Styled runs switch, its inline confirmation, and one row per run. A row keeps its field, its style
   disclosure and its actions on separate lines so a narrow Inspector never clips a control. */
.workshop-runs-switch { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.workshop-runs-switch .workshop-field { margin: 0; }
.workshop-runs-confirm { display: grid; gap: 6px; padding: 8px; border: 1px solid var(--lab-border-strong); border-radius: 8px; background: rgb(255 255 255 / 4%); }
.workshop-runs-confirm > p { margin: 0; }
.workshop-run-rows { display: grid; gap: 8px; }
.workshop-run-row { display: grid; gap: 4px; padding: 6px; border: 1px solid var(--lab-border); border-radius: 8px; }
.workshop-run-row[data-run-kind="symbol"] { border-style: dashed; }
.workshop-run-row .workshop-field { margin: 0; }
.workshop-run-row__actions { display: flex; gap: 4px; justify-content: flex-end; }
.workshop-run-action { min-width: 26px; padding: 2px 6px; border: 1px solid var(--lab-border-strong); border-radius: 6px; background: transparent; color: inherit; font-size: 11px; }
.workshop-run-action:disabled { opacity: 45%; }
.workshop-run-style > summary { cursor: pointer; font-size: 11px; }
.workshop-run-style__body { display: grid; gap: 4px; padding: 4px 0 0; }
.workshop-run-rows[aria-invalid] { outline: 1px solid var(--lab-workshop-accent); outline-offset: 2px; }
/* The Symbols section in the document rail: one disclosure per symbol, with its image beside its fields. */
.workshop-symbol-list { display: grid; gap: 6px; }
.workshop-symbol { border: 1px solid var(--lab-border); border-radius: 8px; padding: 4px 6px; }
.workshop-symbol > summary { cursor: pointer; }
.workshop-symbol__fields { display: grid; gap: 4px; padding: 6px 0 2px; }
.workshop-symbol__fields .workshop-field { margin: 0; }
.workshop-symbol__preview { width: 28px; height: 20px; object-fit: contain; background: rgb(255 255 255 / 6%); border-radius: 4px; }
.workshop-symbol-add { display: grid; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--lab-border); }
.workshop-symbol-add .workshop-field { margin: 0; }
/* The Interaction section's checkbox: caption and box on one line, whatever the Inspector's field layout. */
.workshop-checkbox-row { display: flex; align-items: center; }
.workshop-checkbox-row .workshop-field { flex-direction: row; align-items: center; gap: 8px; margin: 0; }
.workshop-checkbox-row .workshop-field input[type="checkbox"] { width: auto; margin: 0; padding: 0; }