/* The canvas of the main page: blocks on a grid, edit mode, the notebook sheet, loading placeholders. */
:root { --canvas-row: 36px; }
.canvas-bar { position: sticky; top: var(--grid-gap); z-index: 4; display: flex; align-items: center; gap: var(--sp-3); min-height: 36px; flex-wrap: wrap;
  padding: var(--sp-2) var(--sp-3); background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius-widget); }
.canvas-bar[hidden] { display: none; }
.canvas-bar .grow { flex: 1; }
.canvas { position: relative; display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); grid-auto-rows: var(--canvas-row); gap: var(--grid-gap);
  min-height: calc(var(--rows, 8) * (var(--canvas-row) + var(--grid-gap))); align-content: start; }

/* a block: its place comes from four custom properties, set by the script */
.block { grid-column: calc(var(--x, 0) + 1) / span var(--w, 6); grid-row: calc(var(--y, 0) + 1) / span var(--h, 4); position: relative; display: flex; flex-direction: column;
  min-width: 0; min-height: 0; padding: 0; overflow: hidden; }
.block-head { display: flex; align-items: center; gap: var(--sp-2); padding: 0 var(--sp-4); min-height: 40px; color: var(--muted); font-size: var(--fs-sm); font-weight: 500; flex: none; }
.block-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.block-tools { display: none; gap: 2px; }
.block-grip { display: none; color: var(--muted); }
.block-body { flex: 1; min-height: 0; overflow: auto; padding: 0 var(--sp-4) var(--sp-4); }
.block.no-header .block-head { display: none; }
.block.no-header .block-body { padding-top: var(--sp-4); }

/* edit mode */
.canvas.editing .block { outline: 1px dashed var(--line); cursor: default; transition: grid-row var(--motion), grid-column var(--motion); }
.canvas.editing .block-head { cursor: grab; background: var(--surface-2); }
.canvas.editing .block-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.canvas.editing .block-tools { display: inline-flex; }
.canvas.editing .block-grip { display: inline-grid; cursor: grab; }
.canvas.editing .block-body { pointer-events: none; user-select: none; }
.canvas.editing .block.no-header .block-head { display: flex; position: absolute; top: 0; left: 0; right: 0; z-index: 2; min-height: 32px; opacity: 0.94; }
.canvas.editing .block.dragging { z-index: 6; opacity: 0.92; cursor: grabbing; box-shadow: 0 8px 28px rgb(0 0 0 / 0.35); }
.canvas.editing .block.dragging .block-head { cursor: grabbing; }
.placeholder { grid-column: 1; grid-row: 1; background: var(--accent); opacity: 0.16; border: 1px dashed var(--accent); border-radius: var(--radius-widget); pointer-events: none; }
.rz { display: none; position: absolute; z-index: 3; touch-action: none; }
.canvas.editing .rz { display: block; }
.rz-e { top: 0; right: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.rz-s { left: 0; right: 0; bottom: 0; height: 8px; cursor: ns-resize; }
.rz-se { right: 0; bottom: 0; width: 18px; height: 18px; cursor: nwse-resize; border-right: 3px solid var(--accent); border-bottom: 3px solid var(--accent); border-bottom-right-radius: 6px; }
.add-slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); background: transparent; border: 2px dashed var(--line);
  border-radius: var(--radius-widget); color: var(--muted); }
.add-slot:hover { border-color: var(--accent); color: var(--text); }

/* a notebook sheet behind the blocks while editing: one cell is one column and one row */
.canvas.editing { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M0 0h10M0 0v10' stroke='%23ffffff' stroke-opacity='0.08' fill='none'/%3E%3C/svg%3E");
  background-size: calc((100% + var(--grid-gap)) / 24) calc(var(--canvas-row) + var(--grid-gap)); background-position: calc(var(--grid-gap) / -2) calc(var(--grid-gap) / -2); border-radius: var(--radius-widget); }
:root[data-theme="day"] .canvas.editing { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpath d='M0 0h10M0 0v10' stroke='%23000000' stroke-opacity='0.10' fill='none'/%3E%3C/svg%3E"); }

/* the catalogue panel and loading placeholders */
.catalog-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-control); }
.catalog-item .grow { flex: 1; min-width: 0; }
.skeleton { background: var(--surface); opacity: 0.6; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }