/* Template Builder R4 — approved 268:151. One scoped presentation owner. */
body[data-view="template"] {
  --template-accent: #202020;
  --template-window-background: #fafafa;
  --template-label-primary: #212121;
  --template-label-secondary: #666;
  --shell-nav-height: 72px;
  overflow: hidden;
  background: var(--template-window-background);
}
body[data-view="template"] .app-shell {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: var(--shell-nav-height) minmax(0, 1fr) !important;
  background: var(--template-window-background);
}
body[data-view="template"] .sidebar,
body[data-view="template"] .canvas-board,
body[data-view="template"] .function-dock,
body[data-view="template"] #shellContextActions { display: none !important; }
body[data-view="template"] .workspace {
  grid-column: 1 !important;
  grid-row: 2 !important;
  grid-template-rows: minmax(0, 1fr) !important;
  width: 100%;
  min-width: 0;
  height: calc(100vh - var(--shell-nav-height)) !important;
  background: var(--template-window-background) !important;
  background-image: none !important;
}
body[data-view="template"] .view-panel[data-view="template"].active {
  grid-row: 1 !important;
  display: block !important;
  width: 100%; height: 100%; min-width: 0; min-height: 0;
  padding: 0 !important;
  overflow: auto;
  background: var(--template-window-background);
}
body[data-view="template"] .template-builder-root { min-height: 100%; width: 100%; }
body[data-view="template"] .template-builder-shell {
  display: flex; flex-direction: column; gap: 24px;
  min-height: calc(100dvh - var(--shell-nav-height));
  width: 100%; box-sizing: border-box; padding: 28px 40px 32px;
  color: var(--template-label-primary); font-family: var(--ui-font); font-size: 14px;
}
body[data-view="template"] .template-builder-page-heading {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  min-height: 92px; flex: 0 0 auto; min-width: 0;
}
body[data-view="template"] .template-builder-identity { flex: 1; min-width: 0; }
body[data-view="template"] .template-builder-context { margin: 0 0 4px; font-size: 14px; line-height: 22px; }
body[data-view="template"] .template-builder-title-group { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
body[data-view="template"] .template-builder-title {
  min-width: 0; max-width: 100%; margin: 0; padding: 0;
  font: inherit; font-size: 26px; line-height: 34px; font-weight: 700;
  overflow-wrap: anywhere; cursor: text; border-radius: 4px !important;
}
body[data-view="template"] .template-builder-title-affordance { display: none; }
body[data-view="template"] .template-builder-title-input {
  box-sizing: border-box; width: min(var(--template-title-edit-width, 320px), 100%);
  min-width: 0; max-width: 640px; height: 44px; padding: 4px 8px;
  font: inherit; font-size: 26px; line-height: 34px; font-weight: 700;
  border: 1px solid #202020; border-radius: 8px !important; background: white; color: #212121;
}
body[data-view="template"] [data-template-action="rename"] {
  flex: 0 0 88px; height: 44px; padding: 0 16px; border: 0; background: transparent;
  font: inherit; font-size: 14px; color: #202020; border-radius: 8px !important; cursor: pointer;
}
body[data-view="template"] .template-builder-save-status { font-size: 12px; line-height: 18px; color: #666; }
body[data-view="template"] .template-builder-page-actions { display: flex; gap: 12px; flex: 0 0 auto; }
body[data-view="template"] .template-builder-page-actions button {
  box-sizing: border-box; height: 44px; padding: 0 16px; border: 1px solid #e2e2e2;
  background: white; color: #202020; font: inherit; font-size: 14px; font-weight: 600;
  border-radius: 8px !important; cursor: pointer; white-space: nowrap;
}
body[data-view="template"] [data-template-action="preview"] { width: 112px; }
body[data-view="template"] [data-template-action="save"] { width: 96px; }
body[data-view="template"] [data-template-action="use-template"] { width: 176px; background: #202020; color: white; }
body[data-view="template"] .template-builder-canvas.template-builder-workbench-canvas {
  position: relative; top: 0; display: flex; flex-direction: column; flex: 1;
  gap: 16px; width: 100%; min-width: 0; min-height: 0;
  padding: 0; background: transparent; overflow: visible;
}
body[data-view="template"] .template-builder-layout { min-width: 0; width: 100%; }
body[data-view="template"] .template-builder-layout-heading {
  display: flex; align-items: baseline; gap: 16px; min-height: 28px; margin-bottom: 24px;
}
body[data-view="template"] .template-builder-layout-heading strong { font-size: 16px; line-height: 24px; }
body[data-view="template"] .template-builder-layout-heading span { font-size: 14px; line-height: 22px; }
body[data-view="template"] .template-builder-layout-heading small { font-size: 13px; line-height: 21px; }
body[data-view="template"] .template-builder-material-canvas {
  --template-card-height: 328px;
  position: relative; width: 100%; min-width: 0; min-height: var(--template-card-height);
  border: 0; background: transparent; overflow-x: auto; padding: 2px; margin: -2px;
}
body[data-view="template"] .template-builder-block-list {
  display: grid; grid-template-columns: repeat(var(--template-block-count), minmax(186.667px, 448px));
  gap: 16px; align-items: start; justify-content: start; justify-content: safe center; position: relative;
  width: 100%; min-height: var(--template-card-height);
}
body[data-view="template"] .template-builder-drop-lane:is([data-template-block-count="4"],[data-template-block-count="5"],[data-template-block-count="6"]) { --template-card-height: 248px; }
body[data-view="template"] .template-builder-block {
  position: relative; box-sizing: border-box; min-width: 0; height: var(--template-card-height);
  display: flex; flex-direction: column; gap: 12px; padding: 20px;
  border: 0; border-radius: 12px !important; background: white;
  box-shadow: inset 0 0 0 1px #dbdbdb; cursor: grab; touch-action: none;
}
body[data-view="template"] .template-builder-block-header { display: flex; flex-direction: column; gap: 2px; height: 56px; flex: 0 0 56px; min-width: 0; }
body[data-view="template"] .template-builder-block-header > span { font-size: 12px; line-height: 20px; padding-right: 32px; }
body[data-view="template"] .template-builder-block-header strong { font-size: 20px; line-height: 28px; font-weight: 700; overflow-wrap: anywhere; }
body[data-view="template"] .template-builder-drop-lane:is([data-template-block-count="4"],[data-template-block-count="5"],[data-template-block-count="6"]) .template-builder-block-header strong { font-size: 15px; line-height: 23px; }
body[data-view="template"] .template-builder-delete {
  position: absolute; top: 20px; right: 20px; z-index: 2;
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 4px !important; background: transparent; cursor: pointer;
}
body[data-view="template"] .template-builder-delete img { display: block; }
body[data-view="template"] .template-builder-block:hover { box-shadow: inset 0 0 0 1px #999; }
body[data-view="template"] .template-builder-block:focus-within { box-shadow: inset 0 0 0 2px #202020; }
body[data-view="template"] .template-builder-block.is-dragging { opacity: .55; }
body[data-view="template"] .template-builder-preview { flex: 1; min-width: 0; min-height: 0; display: grid; place-items: center; }
body[data-view="template"] .template-preview-art { width: 100%; height: 100%; position: relative; }
body[data-view="template"] .template-r4-art { position: absolute; left: 50%; top: 50%; display: none; transform: translate(-50%, -50%) scale(var(--template-art-scale, 1)); transform-origin: center; }
body[data-view="template"] .template-r4-art img { display: block; max-width: none; }
body[data-view="template"] .template-r4-desktop { display: block; }
body[data-view="template"] [data-template-block-count="1"] .template-preview-stacked-area .template-r4-desktop { display: none; }
body[data-view="template"] [data-template-block-count="1"] .template-r4-single { display: block; }
body[data-view="template"] .template-builder-drop-lane:is([data-template-block-count="4"],[data-template-block-count="5"],[data-template-block-count="6"]) .template-r4-desktop { display: none; }
body[data-view="template"] .template-builder-drop-lane:is([data-template-block-count="4"],[data-template-block-count="5"],[data-template-block-count="6"]) .template-r4-six { display: block; }
body[data-view="template"] .template-builder-snap-guide { display: none; }
body[data-view="template"] .template-builder-empty { min-height: 352px; display: grid; place-content: center; gap: 16px; text-align: center; border: 0; }
body[data-view="template"] .template-builder-empty strong { font-size: 20px; line-height: 28px; }
body[data-view="template"] .template-builder-empty p { margin: 0; font-size: 14px; color: #666; }
body[data-view="template"] .template-builder-canvas.is-drag-active .template-builder-empty { border-color: #202020; background: #f3f3f3; }
body[data-view="template"] .template-builder-block:is(.is-drop-before,.is-drop-after)::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: #202020; border-radius: 2px !important; pointer-events: none;
}
body[data-view="template"] .template-builder-block.is-drop-before::after { left: -9px; }
body[data-view="template"] .template-builder-block.is-drop-after::after { right: -9px; }
body[data-view="template"] .template-builder-canvas:has(.is-dragging-source) [data-template-block-count="1"] .template-builder-block.is-drop-after::after {
  content: "Drop here"; left: calc(100% + 16px); right: auto; width: 100%;
  display: grid; place-items: center; box-sizing: border-box;
  border: 1px dashed #8c8c8c; border-radius: 12px !important; background: transparent;
  color: #212121; font-size: 14px;
}
body[data-view="template"] .template-builder-insert-marker { position: absolute; height: var(--template-card-height); width: 3px; background: #202020; pointer-events: none; }
body[data-view="template"] .template-builder-palette-slot { width: 100%; min-width: 0; margin-top: auto; }
body[data-view="template"] .template-builder-palette.template-builder-material-popover {
  position: static; width: min(624px, 100%); min-width: 0; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 12px; padding: 20px; margin: 0 auto;
  border: 0; border-radius: 12px !important; background: white;
  box-shadow: inset 0 0 0 1px #dbdbdb, 0 4px 16px rgba(0,0,0,.07);
}
body[data-view="template"] .template-builder-palette.is-moved { position: fixed; z-index: 40; margin: 0; width: min(624px, calc(100vw - 32px)); overflow-y: auto; overflow-x: hidden; }
body[data-view="template"] .template-builder-palette-handle {
  position: relative; display: grid; place-items: center; width: 100%; height: 28px; flex: 0 0 28px;
  padding: 0; border: 0; background: transparent; color: #292929;
  font: inherit; font-size: 14px; font-weight: 600; line-height: 22px; text-align: center;
  cursor: grab; touch-action: none; user-select: none;
}
body[data-view="template"] .template-builder-palette-grip { position: absolute; left: 0; top: 3px; width: 24px; font-size: 18px; }
body[data-view="template"] .template-builder-palette-handle:active { cursor: grabbing; }
body[data-view="template"] .template-builder-palette-viewport { min-width: 0; width: 100%; }
body[data-view="template"] .template-builder-palette-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
body[data-view="template"] .template-builder-palette-row > .template-builder-element-card {
  appearance: none; min-width: 0; width: auto; height: 132px; padding: 0;
  display: grid; place-items: center; box-sizing: border-box;
  border: 0; border-radius: 8px !important; background: #f9f9f9; color: #292929;
  font: inherit; cursor: grab; touch-action: none; user-select: none;
}
body[data-view="template"] .template-builder-element-group { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 144px; height: 94px; }
body[data-view="template"] .template-builder-element-icon-surface { display: block; width: 120px; height: 64px; }
body[data-view="template"] .template-builder-element-icon-surface img { display: block; }
body[data-view="template"] .template-builder-element-label { width: 144px; height: 22px; font-size: 14px; line-height: 22px; font-weight: 600; text-align: center; white-space: nowrap; }
body[data-view="template"] .template-builder-element-card:hover:not(:disabled) { background: #f2f2f2; box-shadow: inset 0 0 0 1px #aaa; }
body[data-view="template"] .template-builder-element-card:disabled { opacity: .4; cursor: not-allowed; }
body[data-view="template"] .template-builder-element-card.is-dragging-source { opacity: .55; }
body[data-view="template"] .template-builder-block *,
body[data-view="template"] .template-builder-element-card * { -webkit-user-drag: none; }
body[data-view="template"] .template-builder-limit-feedback { font-size: 13px; color: #666; text-align: center; }
body[data-view="template"] :is(button,input,[tabindex]):focus-visible { outline: 2px solid #202020; outline-offset: 2px; }
@media (max-width: 1400px) {
  body[data-view="template"] .template-builder-material-canvas { --template-card-height: 272px; }
  body[data-view="template"] .template-r4-desktop,
  body[data-view="template"] [data-template-block-count="1"] .template-r4-single,
  body[data-view="template"] .template-builder-drop-lane:is([data-template-block-count="4"],[data-template-block-count="5"],[data-template-block-count="6"]) .template-r4-six { display: none; }
  body[data-view="template"] .template-r4-laptop { display: block; }
  body[data-view="template"] .template-builder-drop-lane:is([data-template-block-count="4"],[data-template-block-count="5"],[data-template-block-count="6"]) .template-r4-laptop { display: none; }
  body[data-view="template"] .template-builder-drop-lane:is([data-template-block-count="4"],[data-template-block-count="5"],[data-template-block-count="6"]) .template-r4-laptop-six { display: block; }
}
@media (max-width: 900px) {
  body[data-view="template"] .template-builder-shell { padding: 24px 20px 32px; }
  body[data-view="template"] .template-builder-page-heading { flex-wrap: wrap; }
  body[data-view="template"] .template-builder-identity { flex-basis: 100%; }
}
@media (max-width: 680px) {
  body[data-view="template"] .template-builder-palette-row { grid-template-columns: minmax(0, 1fr); }
  body[data-view="template"] .template-builder-page-actions { flex-wrap: wrap; gap: 8px; }
  body[data-view="template"] .template-builder-page-actions button { width: auto; }
  body[data-view="template"] .template-builder-layout-heading { flex-wrap: wrap; gap: 8px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-view="template"] .template-builder-shell * { transition: none; }
}