/* The page builder (builder/index.html), on top of style.css: dark, like the board. */

body.builder .site-nav, body.builder main { max-width: 84rem; }
.lede { margin: -0.5rem 0 1.25rem; max-width: 52rem; }
h2 { margin: 0 0 0.5rem; font-size: 1.05rem; color: var(--text-primary); }
h3 { margin: 1rem 0 0.4rem; font-size: 0.95rem; color: var(--text-primary); }
.hint { margin: 0 0 0.75rem; font-size: 0.85rem; color: var(--text-secondary); }
.empty { color: var(--text-secondary); font-size: 0.9rem; list-style: none; }

/* Three panes: widgets | board | forms; stacked on a phone. The board sets the row's height (and fits the
   window), and the widget list and the forms are as tall as the board and scroll inside themselves, so the
   whole board stays in view while one picks a widget or edits the page. */
.workspace { grid-template-columns: 15rem minmax(0, 1fr) 20rem; display: grid; gap: 1rem; align-items: stretch; margin-bottom: 1rem; }
.pane { margin: 0; }
.workspace .pane { padding: 0.9rem 1rem; }
#palette-pane, #inspector { contain: size; min-height: 26rem; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 62rem) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  #palette-pane, #inspector { contain: none; min-height: 0; }
  #palette-pane { max-height: 20rem; }
  .palette { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
}

/* Smaller buttons than the flasher's big green one. */
body.builder button { min-height: 2.25rem; padding: 0.4rem 0.9rem; font-size: 0.95rem; }
button.secondary { background: var(--background); color: var(--text-primary); border: 1px solid var(--divider); }
button.secondary:hover { background: var(--surface); border-color: var(--text-secondary); }
button.danger { margin-top: 0.9rem; background: transparent; color: var(--danger); border: 1px solid var(--danger); }
button.danger:hover { background: var(--danger); color: var(--background); }

/* Project bar: page tabs, undo, files */
.project-bar { margin: 0 0 1rem; padding: 0.75rem 1rem; }
.bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
.bar-gap { flex: 1; }
.page-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-right: 0.5rem; }
.page-tab { min-height: 2rem; padding: 0.25rem 0.8rem; font-weight: 500; background: var(--background); color: var(--text-secondary); border: 1px solid var(--divider); border-radius: 999px; }
.page-tab:hover { background: var(--background); color: var(--text-primary); border-color: var(--text-secondary); }
.page-tab[aria-selected="true"] { color: var(--text-primary); border-color: var(--accent); background: var(--surface); }
.page-tab.bad { border-color: var(--danger); }
.page-tab.bad::after { content: " !"; color: var(--danger); font-weight: 700; }
.project-note { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--warning); }
.paste summary { font-size: 0.85rem; }
.paste textarea { margin: 0.5rem 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; }
button.small, select.small { min-height: 2rem; padding: 0.25rem 0.7rem; font-size: 0.85rem; }
select.small { width: auto; }
.shortcuts { margin: 0.5rem 0 0; padding: 0.5rem 0.75rem; font-size: 0.8rem; background: var(--background); }
.shortcuts ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }
.align-row { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.edit-row { margin-top: 0.9rem; }
.edit-row button.danger { margin: 0; }
.size-info { margin: 0.2rem 0 0.4rem; }
.size-info.warn { color: var(--warning); }

/* Palette */
.palette { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.pal { display: flex; flex-direction: column; align-items: flex-start; width: 100%; padding: 0.5rem 0.7rem; text-align: left; font-weight: 400; border: 1px solid var(--divider); background: var(--background); color: var(--text-primary); cursor: grab; touch-action: manipulation; user-select: none; }
.pal:hover { border-color: var(--accent); background: var(--background); }
.pal:active { cursor: grabbing; background: var(--background); }
body.builder .pal { position: relative; padding-left: 1.7rem; }
.pal-grip { position: absolute; left: 0; top: 0; bottom: 0; width: 1.4rem; touch-action: none; cursor: grab;
  background: radial-gradient(circle, var(--text-secondary) 1.2px, transparent 1.6px) 0.35rem 50% / 0.45rem 0.55rem repeat-y,
              radial-gradient(circle, var(--text-secondary) 1.2px, transparent 1.6px) 0.8rem 50% / 0.45rem 0.55rem repeat-y;
  background-size: 0.45rem 0.55rem; background-repeat: repeat-y; }
.pal-title { font-weight: 600; }
.pal-hint { font-size: 0.75rem; color: var(--text-secondary); line-height: 1.3; }
.drag-chip { position: fixed; z-index: 10; padding: 0.3rem 0.7rem; border-radius: 0.4rem; background: var(--accent); color: var(--background); font-weight: 600; pointer-events: none; }

/* Orientation tabs */
.tabs { display: inline-flex; margin-bottom: 0.75rem; border: 1px solid var(--divider); border-radius: 0.5rem; overflow: hidden; }
.tabs button { min-height: 2rem; border: 0; border-radius: 0; background: var(--background); color: var(--text-secondary); font-weight: 500; }
.tabs button[aria-selected="true"] { background: var(--accent); color: var(--background); font-weight: 700; }

/* The board: the picture, then the editing overlay at panel pixels scaled to fit. */
.board { position: relative; width: 100%; max-width: calc(var(--panel-w, 456) * 2px); aspect-ratio: var(--panel-w, 456) / var(--panel-h, 280); margin: 0 auto 0.75rem; border: 6px solid #0a0a0b; border-radius: 1.4rem; background: #000; box-shadow: 0 0 0 1px var(--divider); box-sizing: content-box; }
/* No overflow clipping on the board, so a widget label above a top-row box paints over the bezel; the canvas rounds its own corners instead. */
.board canvas { display: block; width: 100%; height: 100%; border-radius: 0.9rem; }
.board.stale canvas { opacity: 0.45; }
.overlay { position: absolute; z-index: 2; left: 0; top: 0; transform-origin: 0 0; outline: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none; }
.overlay:focus-visible { box-shadow: inset 0 0 0 2px var(--info); }
.gcell { position: absolute; box-sizing: border-box; border: 1px dashed rgba(255, 255, 255, 0.13); pointer-events: none; }
.wbox { position: absolute; box-sizing: border-box; border: 1px solid transparent; border-radius: 6px; cursor: move; }
.wbox:hover { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.06); }
.wbox.selected { border: 2px solid var(--accent); background: rgba(102, 191, 13, 0.1); }
.wbox.invalid { border: 2px solid var(--danger); background: rgba(250, 56, 62, 0.14); }
.wbox.small::after { content: "too small"; position: absolute; right: 2px; bottom: 2px; padding: 0 4px; border-radius: 3px; background: var(--warning); color: #000; font: 600 10px system-ui, sans-serif; }
.wtag { display: none; position: absolute; left: 0; top: -17px; max-width: 100%; padding: 0 5px; overflow: hidden; border-radius: 3px; background: var(--accent); color: #000; font: 600 11px/17px system-ui, sans-serif; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; }
.wbox.selected .wtag, .wbox:hover .wtag { display: block; }
.wbox.invalid .wtag { background: var(--danger); }
.handle { position: absolute; width: 12px; height: 12px; border-radius: 3px; background: var(--accent); border: 1px solid #000; }
.handle-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.handle-nw { left: -6px; top: -6px; cursor: nwse-resize; }
.handle-ne { right: -6px; top: -6px; cursor: nesw-resize; }
.handle-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.handle-e { right: -6px; top: calc(50% - 6px); cursor: ew-resize; }
.handle-w { left: -6px; top: calc(50% - 6px); cursor: ew-resize; }
.handle-s { bottom: -6px; left: calc(50% - 6px); cursor: ns-resize; }
.handle-n { top: -6px; left: calc(50% - 6px); cursor: ns-resize; }
.marquee { position: absolute; box-sizing: border-box; border: 1px dashed var(--info); background: rgba(84, 199, 236, 0.12); pointer-events: none; }
.ghost { position: absolute; box-sizing: border-box; border-radius: 6px; pointer-events: none; }
.ghost.ok { border: 2px dashed var(--accent); background: rgba(102, 191, 13, 0.2); }
.ghost.bad { border: 2px dashed var(--danger); background: rgba(250, 56, 62, 0.25); }
.sample-toggle { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--text-secondary); }
.sample-toggle input { accent-color: var(--accent); }
.ctx-menu { position: fixed; z-index: 20; min-width: 11rem; padding: 0.25rem; border: 1px solid var(--divider); border-radius: 0.5rem; background: var(--surface); box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.5); }
.ctx-menu button { display: flex; justify-content: space-between; gap: 1.5rem; width: 100%; padding: 0.4rem 0.7rem; text-align: left; font-weight: 500; border: 0; border-radius: 0.35rem; background: transparent; color: var(--text-primary); }
.ctx-menu button:hover:not(:disabled), .ctx-menu button:focus-visible { background: var(--divider); color: var(--text-primary); }
.ctx-menu button.danger { margin: 0; color: var(--danger); }
.ctx-menu button.danger:hover, .ctx-menu button.danger:focus-visible { background: var(--danger); color: var(--background); }
.ctx-menu button:disabled { opacity: 0.45; cursor: default; }
.ctx-hint { color: var(--text-secondary); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.ctx-menu button.danger:hover .ctx-hint { color: inherit; }
.note { min-height: 1.4em; margin: 0; color: var(--info); font-size: 0.9rem; }

/* Forms */
.field { display: block; margin: 0 0 0.7rem; }
.field-label { display: block; margin-bottom: 0.2rem; font-size: 0.8rem; color: var(--text-secondary); }
.field.check { display: flex; align-items: flex-start; gap: 0.5rem; }
.field.check .field-label { margin: 0.05rem 0 0; }
.field input[type="checkbox"] { margin-top: 0.15rem; accent-color: var(--accent); }
input[type="text"], input[type="number"], select, textarea { width: 100%; box-sizing: border-box; padding: 0.4rem 0.55rem; border: 1px solid var(--divider); border-radius: 0.4rem; background: var(--background); color: var(--text-primary); font: inherit; font-size: 0.9rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--info); outline-offset: 1px; }
input.invalid, select.invalid { border-color: var(--danger); }
input:disabled { opacity: 0.5; }
.field-error { display: block; margin-top: 0.2rem; font-size: 0.8rem; color: var(--danger); }
.field-error:empty { display: none; }
.counter { display: block; margin-top: 0.15rem; font-size: 0.75rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.counter.over { color: var(--danger); font-weight: 600; }
.grid-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; margin-bottom: 0.7rem; }
.grid-row > .field-label { flex-basis: 100%; margin-bottom: 0; }
.grid-row .field, .grid-row .mini { flex: 1 1 4rem; min-width: 0; margin: 0; }
.mini span { display: block; font-size: 0.75rem; color: var(--text-secondary); }

/* The list of widgets on the page */
.wlist { margin: 0 0 1rem; padding: 0; list-style: none; display: grid; gap: 0.25rem; }
.wlist-item { display: flex; width: 100%; align-items: baseline; gap: 0.5rem; padding: 0.3rem 0.6rem; text-align: left; font-weight: 400; background: var(--background); color: var(--text-primary); border: 1px solid var(--divider); }
.wlist-item:hover { background: var(--background); border-color: var(--text-secondary); }
.wlist-item.selected { border-color: var(--accent); }
.wlist-item.invalid { border-color: var(--danger); }
.wlist-n { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.wlist-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wlist-kind { font-size: 0.75rem; color: var(--text-secondary); }

/* Output */
.output textarea { min-height: 12rem; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8rem; line-height: 1.45; white-space: pre; }
.output-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.6rem; }
.spacer { flex: 1; }
#verdict { margin: 0 0 0.6rem; font-size: 0.9rem; }
.version-alert { margin: 0 0 1rem; padding: 0.6rem 0.8rem; border: 1px solid var(--divider); border-left-width: 0.3rem; border-radius: 0.3rem; background: var(--surface); }
.version-alert ul { margin: 0 0 0.4rem; padding-left: 1.1rem; }
.version-alert p { margin: 0; }
.version-alert[data-level="low"] { border-left-color: var(--info); }
.version-alert[data-level="medium"] { border-left-color: var(--warning); }
.version-alert[data-level="high"] { border-left-color: var(--danger); }
#verdict[data-kind="ok"] { color: var(--accent); }
#verdict[data-kind="error"] { color: var(--danger); font-weight: 600; }
#verdict[data-kind="warn"] { color: var(--warning); font-weight: 600; }
#loading { color: var(--info); }
#fail { border-color: var(--danger); }

/* Palette group heading ("Board data") */
.pal-heading { margin: 0.6rem 0 0.1rem; font-size: 0.75rem; line-height: 1.3; color: var(--text-secondary); list-style: none; }
.pal-heading strong { display: block; font-size: 0.85rem; color: var(--text-primary); }