/* Editor materials only: the child's compiled page keeps its own colors and type. */
.builder-workspace {
  --paper-grain: url('/assets/textures/paper-grain.png');
  --kraft-grain: url('/assets/textures/kraft-grain.png');
  --paper-white: #fffdf6;
  --paper-line: #d6cdb9;
  --builder-line: #ddd5c5;
}

/* Light drawing paper for the controls; color stays concentrated in the tools. */
.builder-workspace .builder-toolbar,
.builder-workspace .block-inspector,
.builder-workspace .linked-code-heading,
.builder-workspace .linked-code-caption {
  background-color: var(--paper-white);
  background-image: var(--paper-grain);
  background-size: 512px 300px;
}
.builder-workspace .builder-toolbar {
  display: grid;
  grid-template-columns: auto auto minmax(0,1fr) 180px;
  height: 74px; padding: 10px 20px; gap: 18px;
  border-bottom-color: var(--paper-line);
}
.builder-workspace .builder-views {
  grid-column: 1; order: 0; margin: 0; padding: 3px; gap: 3px;
  border: 1px solid var(--paper-line); border-radius: 8px;
  background: #eeeadd; box-shadow: none;
}
.builder-workspace .builder-views button {
  min-width: 112px; height: 44px; padding: 8px 12px;
  border: 1px solid transparent; border-radius: 5px;
  color: #526176; font-size: 17px; line-height: 24px; white-space: nowrap;
}
.builder-workspace .builder-views button[aria-selected=true] {
  color: #20599d; border-color: #94b3d3; background: #deebfa;
  box-shadow: inset 0 -2px #94b3d3;
}
.builder-workspace .builder-history {
  grid-column: 2; order: 0; margin: 0; gap: 6px; flex-wrap: nowrap;
}
.builder-workspace .builder-history button {
  min-width: 84px; height: 44px; padding: 8px 10px;
  border: 1px solid var(--paper-line); border-radius: 6px;
  background: #fffdf6; color: #43556d; font-size: 15px;
  white-space: nowrap; line-height: 24px; box-shadow: 0 1px 0 #cec5b1;
}
.builder-workspace .builder-history button:disabled {
  opacity: 1; color: #87877f; background: #f1eee5;
  border-color: #ddd8cb; box-shadow: none;
}
.builder-workspace .builder-preview-action { grid-column: 4; width: 180px; }
.builder-workspace .builder-preview-action button {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 44px; min-height: 44px; padding: 8px 10px;
  border: 1px solid #16804a; border-radius: 6px;
  font-size: 16px; line-height: 24px; white-space: nowrap;
}
.builder-workspace .try-site-button {
  background-image: var(--paper-grain);
  background-size: 512px 300px;
  box-shadow: 0 2px 0 #116738;
}
.builder-workspace .builder-preview-action .back-to-building {
  border-color: #94b3d3; background: #deebfa; color: #20599d;
  box-shadow: 0 2px 0 #94b3d3;
}
.builder-workspace .builder-code-tools { justify-content: flex-start; flex-wrap: wrap; }
.builder-workspace .builder-code-tools .linked-code-toggle { margin-left: auto; }
.builder-workspace .builder-code-tools button,
.builder-workspace .builder-code-tools select { min-height: 44px; }
.builder-workspace .builder-code-tools button[aria-pressed=true] {
  color: #20599d; border-color: #94b3d3; background: #deebfa;
}
.builder-workspace .site-pages {
  background-color: #f3edde;
  background-image: var(--paper-grain);
  border-bottom-color: var(--paper-line);
}
.builder-workspace .site-pages button {
  border-radius: 6px;
  border-color: #d5cdb9;
  background-color: #fffdf5;
  background-image: var(--paper-grain);
  box-shadow: 0 1px 0 #cec5b1;
}
.builder-workspace .site-pages button[aria-pressed=true] {
  color: #20599d; background-color: #deebfa;
  border: 1px solid #94b3d3;
  background-image: var(--paper-grain);
  box-shadow: inset 0 -2px #94b3d3;
}
.builder-workspace .site-pages .new-page-control {
  border: 1px dashed #a59b87; color: #43556d;
  background: #fffdf580; box-shadow: none;
}
.builder-workspace .site-pages .page-settings-control {
  border: 1px solid #d5cdb9; color: #43556d; background: #fffdf5;
}
@media (max-width: 900px) {
  .builder-workspace .builder-toolbar { gap: 10px; padding: 10px 12px; }
}
@media (max-width: 720px) {
  .builder-workspace .builder-toolbar {
    position: static; height: auto; padding: 10px;
    grid-template-columns: minmax(0,1fr) 160px; gap: 10px;
  }
  .builder-workspace .builder-views { grid-column: 1 / -1; }
  .builder-workspace .builder-views button { flex: 1; min-width: 0; }
  .builder-workspace .builder-views button>span { display: inline; }
  .builder-workspace .builder-history { grid-column: 1; gap: 4px; }
  .builder-workspace .builder-history button { flex: 1; min-width: 0; padding: 8px 6px; font-size: 14px; }
  .builder-workspace .builder-preview-action { grid-column: 2; width: 160px; }
  .builder-workspace .builder-preview-action button { font-size: 15px; }
  .builder-workspace .builder-code-tools .linked-code-toggle { margin-left: 0; }
}
@media (max-width: 360px) {
  .builder-workspace .builder-toolbar { grid-template-columns: minmax(0,1fr) 144px; gap: 8px; }
  .builder-workspace .builder-preview-action { width: 144px; }
  .builder-workspace .builder-preview-action button { font-size: 14px; gap: 5px; }
  .builder-workspace .builder-history button { font-size: 13px; padding: 8px 4px; }
}

/* A tray of construction-paper pieces. No texture is placed over text. */
.builder-workspace .block-palette {
  background-color: #f6eedb;
  background-image: var(--kraft-grain);
  background-size: 384px 384px;
  border-right-color: #d2c5a9;
  box-shadow: inset -4px 0 0 #fffaf16b;
}
.toolbox-heading h2 { position: relative; width: fit-content; isolation: isolate; }
.toolbox-heading h2::after {
  content: ''; position: absolute; z-index: -1;
  height: 7px; left: -2px; right: -5px; bottom: 0;
  background: #f2d35f; border-radius: 2px 5px 3px 1px; rotate: -1deg;
  pointer-events: none;
}
.builder-workspace .palette-block {
  position: relative;
  --tool-tint: #dceafb; --tool-edge: #a9bdd8;
  border-radius: 4px 4px 7px 4px;
  background-image: var(--paper-grain);
  background-size: 512px 300px;
  border-color: var(--tool-edge);
  box-shadow: 1px 3px 0 var(--tool-edge), 1px 5px 6px #6b563019;
}
.builder-workspace .tool-text { --tool-tint: #e8e1fb; --tool-edge: #c0aedf; --tool-color: #50417d; }
.builder-workspace .tool-picture { --tool-tint: #deedc4; --tool-edge: #b3c798; --tool-color: #3c622b; }
.builder-workspace .tool-sticker { --tool-tint: #ffe6a0; --tool-edge: #d8bd70; --tool-color: #7b4b0d; }
.builder-workspace .tool-sound { --tool-tint: #f5d9e9; --tool-edge: #d7afc9; --tool-color: #87436c; }
.builder-workspace .tool-button { --tool-tint: #ffdac2; --tool-edge: #d9ae90; --tool-color: #8a4628; }
.builder-workspace .tool-divider { --tool-tint: #d9ede9; --tool-edge: #a6c9c1; --tool-color: #38685e; }
.builder-workspace .palette-block::after {
  content: ''; position: absolute; top: 0; right: 0; width: 10px; height: 10px;
  background: linear-gradient(45deg, #fff9 49%, var(--tool-edge) 51%);
  border-radius: 0 3px 0 2px; pointer-events: none;
}
.builder-workspace .block-palette .palette-block:hover:not(:disabled):not([aria-selected=true]):not([aria-pressed=true]) {
  background-color: var(--tool-tint);
  background-image: var(--paper-grain);
  background-size: 512px 300px;
  transform: translateY(-3px) rotate(-1.5deg);
  box-shadow: 1px 5px 0 var(--tool-edge), 2px 8px 10px #6b563029;
}
.builder-workspace .block-palette .palette-block:active {
  transform: translateY(1px); box-shadow: 0 1px 0 var(--tool-edge);
}
.builder-workspace .canvas-media { border-top-color: #d5c8ab; }
.builder-workspace .canvas-media .canvas-media-friend,
.builder-workspace .canvas-media .canvas-media-friend:hover:not(:disabled):not([aria-selected=true]):not([aria-pressed=true]) {
  border-radius: 4px 4px 8px 4px;
  background-color: var(--friend-paper);
  background-image: var(--paper-grain);
  background-size: 512px 300px;
  box-shadow: 1px 2px 0 #c7bea7, 1px 4px 5px #6b563014;
}
.canvas-media-friend img {
  filter: drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 2px 1px #59472c30);
}
.builder-workspace .add-section,
.builder-workspace .canvas-media .canvas-media-toggle {
  border-radius: 4px;
  background-color: #fffdf3;
  border-color: #baac8c;
  color: #56644e;
}

/* The work surface sits behind the website, never on top of its content. */
.builder-workspace .builder-stage {
  background-color: #e9ddc4;
  background-image: var(--kraft-grain);
  background-size: 384px 384px;
  box-shadow: inset 0 3px 8px #71562a0e;
}
.builder-workspace .canvas-document {
  outline: 8px solid var(--paper-white);
  border-radius: 2px;
  box-shadow: 0 0 0 9px #c7bda8, 2px 11px 0 0 #fffcf2, 2px 12px 0 1px #cfc4ae, 3px 17px 22px #66533226;
}
.builder-workspace .canvas-add-section {
  margin-top: 28px;
  background-color: #fffdf3;
  background-image: var(--paper-grain);
  border: 1px dashed #9b8b6c;
  border-radius: 4px;
  box-shadow: 1px 2px 0 #cdbf9f;
  color: #58634c;
}
.builder-workspace .canvas-document .section-toolbar {
  background-color: #fff9db;
  background-image: var(--paper-grain);
  border-color: #cec2a1;
  border-radius: 3px;
  box-shadow: 1px 2px 3px #5e4c2c23;
}
.builder-workspace .canvas-document .block-drag-handle::before { border-radius: 4px; background: #fffdf6; }

/* The inspector is a clean sheet with index tabs and paper color swatches. */
.builder-workspace .block-inspector { border-left-color: #cfc4ae; }
.builder-workspace .inspector-context-nav { border-bottom-color: #ded4bf; }
.builder-workspace .inspector-context-nav button { border-radius: 5px 5px 2px 2px; background: #eee9db; }
.builder-workspace .inspector-context-nav button[aria-pressed=true] { background: #dceafb; }
.builder-workspace .inspector-tabs { border-radius: 4px; background: #eee9dd; }
.builder-workspace .inspector-tabs button { border-radius: 3px; }
.builder-workspace .inspector-tabs button[aria-selected=true] { background: #fffef9; box-shadow: 0 2px 0 #c9c2b2; }
.builder-workspace .inspector-block-icon { border-radius: 4px 5px 7px 3px; background: #dceafb; box-shadow: 1px 2px 0 #b4c5d9; }
.builder-workspace .builder-field textarea,
.builder-workspace .builder-field select,
.builder-workspace .builder-field input[data-action-property] { border-radius: 4px; background: #fffefa; border-color: #c6bea9; }
.builder-workspace .choice-tile { border-radius: 4px; background: #fffefa; border-color: #dad2c0; box-shadow: 0 2px 0 #e1d9c6; }
.builder-workspace .choice-tile[aria-pressed=true] { border-color: #477cdc; background: #eef4ff; box-shadow: inset 0 0 0 1px #477cdc, 0 2px 0 #b7c9e5; }
.builder-workspace .theme-preview { border-radius: 2px; box-shadow: 1px 2px 0 #bdb29c; }
.builder-workspace .inspector-welcome {
  position: relative; margin-top: 10px; border: 1px solid #e5cf84; border-radius: 2px 4px 7px 2px;
  background-color: #fff0b8; background-image: var(--paper-grain);
  box-shadow: 1px 3px 0 #dbcca1, 2px 5px 8px #5c4b2620;
}
.inspector-welcome::before {
  content: ''; position: absolute; width: 50px; height: 16px; left: calc(50% - 25px); top: -9px;
  background: #b2d4d9b8; border-left: 1px dashed #91b8bd; border-right: 1px dashed #91b8bd;
  rotate: -4deg; pointer-events: none;
}
.builder-workspace .block-more-options,
.builder-workspace .column-width-settings { border-color: #ddd3bf; border-radius: 4px; }
.builder-workspace .block-effects { background: #f4f0e5; border-color: #ddd3bf; border-radius: 4px; }
.builder-workspace .builder-status { background: #f4efdf; border-top-color: #d8cdb6; }
.builder-workspace .builder-preview-tools { background: #fffdf6; border-radius: 4px; border-color: #cfc4ae; }
.builder-workspace .builder-preview-paper:not(.phone) { border-radius: 2px; border: 6px solid #fffdf6; box-shadow: 0 1px 0 1px #c5b89d, 2px 5px 0 #fffcf2, 3px 12px 20px #66533226; }

/* A pull-out picture drawer and the same paper materials in the pickers. */
.builder-workspace .canvas-media-tray {
  margin-top: 10px; padding: 12px 8px;
  border: 1px solid #d1c4a9; border-top: 4px solid #d8cbaa; border-radius: 3px;
  background: #fffdf5 var(--paper-grain) repeat;
  background-size: 512px 300px;
  box-shadow: inset 0 2px 4px #6d583012, 1px 3px 0 #cdbf9f;
}
.builder-workspace .canvas-media-field input,
.builder-workspace .canvas-media-field select { border-color: #c6bea9; background: #fffefa; }
.builder-workspace .canvas-media-results .canvas-media-picture {
  border-color: #d3c8b1; border-radius: 3px; background: #fffefa;
  box-shadow: 1px 2px 0 #e0d6bf; font-size: 13px;
}
.builder-workspace .canvas-media-results .canvas-media-thumbnail { background: #f3f0e7; border-radius: 2px; }
.builder-workspace .canvas-media-pagination button { border-color: #d3c8b1; border-radius: 3px; }
.builder-workspace .canvas-media-toggle[aria-expanded=true] { box-shadow: inset 0 -3px #9ab9cb; }

/* These dialogs are mounted outside the workspace; keep their materials local. */
.section-library,
.media-library,
.builder-workspace .page-dialog {
  --paper-grain: url('/assets/textures/paper-grain.png');
  --kraft-grain: url('/assets/textures/kraft-grain.png');
  border: 1px solid #c7bda8; border-radius: 5px 5px 9px 5px;
  background: #fffdf6 var(--paper-grain) repeat; background-size: 512px 300px;
  box-shadow: 0 5px 0 #ece4d1, 0 6px 0 1px #bfb39a, 0 18px 48px #302e3533;
}
.section-library .page-dialog-heading,
.media-library .media-heading,
.builder-workspace .page-dialog-heading {
  background: transparent; border-bottom-color: #ddd3bf;
}
.section-library .page-dialog-heading {
  position: sticky; top: 0; z-index: 2;
  background: #fffdf6 var(--paper-grain) repeat; background-size: 512px 300px;
}
.section-library .page-dialog-heading h2,
.media-library .media-heading h2 {
  width: fit-content;
  background: linear-gradient(transparent 78%, #f5db8190 78%, #f5db8190 95%, transparent 95%);
}
.section-library .page-dialog-heading button,
.media-library .media-close,
.builder-workspace .page-dialog-heading button { background: #eee9db; border-radius: 4px; }
.section-library .section-template-grid {
  background: #eee5d1 var(--kraft-grain) repeat; background-size: 384px 384px;
  padding-top: 20px; padding-bottom: 24px;
}
.section-library .section-template-grid>button {
  --card-tab: #a6c9de;
  position: relative; background: #fffdf7; border-color: #d0c5ac; border-radius: 3px 3px 6px 3px;
  box-shadow: 1px 3px 0 #d1c4a6, 2px 5px 6px #66533213;
  transition: box-shadow .14s, border-color .14s;
}
.section-library .section-template-grid>button:nth-child(2) { --card-tab: #a8c79b; }
.section-library .section-template-grid>button:nth-child(3) { --card-tab: #a8d3cf; }
.section-library .section-template-grid>button:nth-child(4) { --card-tab: #e1bf70; }
.section-library .section-template-grid>button:nth-child(5) { --card-tab: #c3aedc; }
.section-library .section-template-grid>button:nth-child(6) { --card-tab: #c7c2b5; }
.section-library .section-template-grid>button::before {
  content: ''; position: absolute; width: 38px; height: 12px; top: 4px; left: calc(50% - 19px);
  background: var(--card-tab); border-left: 1px dashed #fff7; border-right: 1px dashed #fff7;
  opacity: .8; rotate: -3deg; pointer-events: none;
}
.section-library .section-template-grid>button:is(:hover,:focus-visible) {
  background: #fffef9; border-color: #7199bf;
  box-shadow: 1px 3px 0 #b4c6d2, 2px 6px 9px #4f677a20;
}
.section-library .section-miniature { border-radius: 2px; margin-top: 4px; border: 1px solid #17324d10; }
.section-library .mini-photo { border-radius: 1px; box-shadow: 1px 2px 0 #abc1c7; }
.section-library .section-library-foot { border-top-color: #d6cab3; }
.media-library .media-tabs { background: #ece7da; border-radius: 4px; }
.media-library .media-tabs button { border-radius: 3px; }
.media-library .media-tabs button[aria-pressed=true] { background: #fffef9; box-shadow: 0 2px 0 #c9c2b2; }
.media-library .media-search input { border-radius: 4px; border-color: #c6bea9; }
.media-library .media-categories button { border-radius: 6px 6px 2px 2px; border-color: #d1c8b6; background: #fffefa; }
.media-library .media-categories button[aria-pressed=true] { background: #2e65bd; border-color: #2e65bd; }
.media-library .media-results {
  background: #eee5d1 var(--kraft-grain) repeat; background-size: 384px 384px;
  border-top-color: #d4c8ad; padding-top: 14px;
}
.media-library .media-picture { border-color: #d9ceb9; border-radius: 3px; background: #fffefa; box-shadow: 1px 3px 0 #cfc1a3; }
.media-library .media-picture>span { background: #f6f2e9; border-radius: 2px; }
.media-library .media-picture:hover { border-color: #91b1d0; }
.media-library .media-picture[aria-pressed=true] { border-color: #477cdc; background: #eef4ff; box-shadow: 1px 3px 0 #9ab3d9; }
.media-library .media-sound { border-color: #d9ceb9; border-radius: 4px; box-shadow: 1px 2px 0 #cfc1a3; }
.media-library .media-pagination { background: #f4eedd; }
.media-library .media-footer { background: #fffdf6; border-top-color: #d6cab3; }
.builder-workspace .page-name-label input { border-radius: 4px; border-color: #c6bea9; }
.builder-workspace .page-start label { background: #fffefa; border-color: #d3c8b1; border-radius: 4px; box-shadow: 1px 2px 0 #e0d6bf; }
.builder-workspace .page-start label:has(input:checked) { background: #eef4ff; border-color: #7ca1dc; }

/* A readable tab explains the grab handle without changing its pointer behavior. */
.builder-workspace .canvas-document .block-drag-handle {
  width: 70px; min-width: 70px; height: 44px; min-height: 44px;
  display: flex; justify-content: center; align-items: center; gap: 3px;
  right: -16px; font-size: 22px;
}
.builder-workspace .canvas-document .block-drag-handle::before { inset: 6px 0; background: #e5effb; border: 1px solid #90afd4; }
.builder-workspace .canvas-document .block-drag-handle::after { content: 'Drag'; font: 700 12px/1 var(--rocode-font-family); pointer-events: none; }
.builder-workspace .canvas-document .block-drag-handle:focus-visible { outline: 3px solid #1f4fbf; outline-offset: 2px; }

/* The cloned content keeps the exact grab point. Only its backing tilts. */
.canvas-drag-preview {
  border-radius: 3px !important;
  border-color: #4d7eac !important;
  box-shadow: 2px 15px 28px #4e3c3040, 0 3px 7px #4e3c302a !important;
}
.canvas-drag-preview::before {
  content: ''; position: absolute; z-index: -1; inset: -3px;
  border: 1px solid #d2c7af; border-radius: 3px;
  background: #fffdf6 url('/assets/textures/paper-grain.png') repeat;
  background-size: 512px 300px;
  rotate: -1deg; pointer-events: none;
}
.canvas-drag-preview-label { border-radius: 3px !important; }
.canvas-document .canvas-drag-source { opacity: .4; }
.canvas-document .canvas-drop-slot { border-radius: 3px; background-color: #e3effa; box-shadow: inset 0 0 0 4px #fff9, 1px 2px 0 #b4c9dd; }
.canvas-drop-guide { border-radius: 3px; }
.canvas-document .canvas-just-dropped { animation: paper-settle .26s ease-out; }
@keyframes paper-settle {
  from { transform: translateY(-3px); box-shadow: 1px 6px 10px #5e4b2b26; }
  to { transform: translateY(0); box-shadow: 0 0 0 transparent; }
}
@media (max-width:720px) {
  .builder-workspace .builder-stage { padding-left: 18px; padding-right: 18px; }
  .builder-workspace .block-palette { box-shadow: inset 0 -3px 0 #fffaf16b; }
}
@media (max-width:380px) {
  .section-library .section-template-grid { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion:reduce) {
  .section-library .section-template-grid>button { transition: none; }
  .builder-workspace .block-palette .palette-block:hover:not(:disabled):not([aria-selected=true]):not([aria-pressed=true]),
  .builder-workspace .block-palette .palette-block:active { transform: none; }
  .canvas-drag-preview::before { rotate: none; }
  .canvas-document .canvas-just-dropped { animation: none; }
}