/* Website section — visual editing of web/site/. Scoped to .website; see
   SPEC-V2.md §3.2. Tokens come from crm.css's :root, never new hex values. */

.website { display: flex; flex-direction: column; gap: 14px; }

/* ---- toolbar --------------------------------------------------------- */
/* Not sticky on its own — .site-side-panel (below) is the sticky element,
   and this is just its first, fixed-height row. Making the TOOLBAR sticky
   while the inspector stayed normal-flow (the previous version of this)
   put them in the same stacking column with the toolbar visually pinned
   above wherever the page had scrolled the inspector to — the two ended up
   overlapping, with the toolbar's opaque card painting over the inspector
   and blocking clicks on it. Kept deliberately short (no site-wide font
   picker, no page tabs, no hint paragraph): every row here is height the
   inspector below it loses. */
.site-toolbar {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 10px;
  padding: 14px 16px;
}

.site-page-row { display: flex; align-items: flex-end; gap: 8px; }
.site-page-field { flex: 1 1 auto; min-width: 0; margin: 0; }

.site-device-toggle { display: flex; gap: 4px; background: var(--divider); padding: 4px; border-radius: var(--r-ctl); flex: 0 0 auto; }
.site-device-btn {
  display: flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border: none; background: none; border-radius: calc(var(--r-ctl) - 2px); color: var(--muted); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.site-device-btn svg { width: 16px; height: 16px; }
.site-device-btn:hover { color: var(--ink); }
.site-device-btn.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

.site-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.site-page-field.kit, .site-tools .btn { flex: 1 1 0; }

.site-save-status { font-size: 12px; font-weight: 600; color: var(--muted); text-align: center; }
.site-save-status.bad { color: var(--red); }

.site-hint { font-size: 12px; color: var(--muted); margin: 0; }

.site-block-menu {
  position: absolute; z-index: 500; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-ctl); box-shadow: 0 10px 30px rgba(0,0,0,.16); padding: 6px; min-width: 160px;
}
.site-block-item {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 9px 10px; border-radius: 8px; font: inherit; font-size: 13px; cursor: pointer;
}
.site-block-item:hover { background: var(--paper); }

/* ---- workspace: canvas beside the side panel --------------------------- */
.site-workspace { display: flex; gap: 14px; align-items: flex-start; }

/* No fixed height and no overflow/scroll of its own — height is set by
   fitCanvas() (website.js) to match the page's real (scaled) height, so
   the APP's own scroller is what moves to see the rest of a tall page,
   not a box inside it. */
.site-canvas-wrap {
  position: relative; flex: 1 1 auto; min-width: 0; border-radius: var(--r-card);
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-card);
  overflow: hidden;
}
/* Width/height/transform are set by fitCanvas(): a fixed real-desktop
   width (CANVAS_NATIVE_WIDTH in website.js) scaled down uniformly with
   `transform: scale()` to fit whatever this wrap actually has — shrinking
   everything together, the way zooming a browser out does, rather than
   the site's own responsive CSS reflowing awkwardly at an arbitrary width. */
.site-canvas { display: block; transform-origin: top left; border: none; background: #fff; }

/* A real side panel, not an overlay — floating it over the canvas was worse,
   it just hid whatever you were trying to look at.
   Deliberately NOT sticky, and the inspector has no height cap or
   overflow of its own: both the toolbar and inspector are plain, full-
   height blocks that scroll with the rest of the page, same as the
   canvas. A sticky toolbar with a height-capped, internally-scrolling
   inspector was tried and rejected twice over — capped, it was too short
   to use; sticky-but-uncapped, it visually overlapped the inspector as the
   page scrolled (a sticky element keeps its own flow-position reserved for
   layout purposes even while visually pinned elsewhere, so a normal-flow
   sibling scrolls INTO that reserved space, not past it). Normal flow for
   both is the only arrangement with no overlap and no internal scrollbar;
   the trade-off is the toolbar (Save/Preview/Publish included) scrolls out
   of view on a very tall page, the same as everything else here does. */
.site-side-panel {
  flex: 0 0 300px; display: flex; flex-direction: column; gap: 14px;
}
.site-inspector {
  padding: 16px;
}

.site-inspector-tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft); padding: 3px 8px; border-radius: 999px; margin-bottom: 12px;
}

.site-field-group { margin-bottom: 18px; }
.site-field-group-title { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.site-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.site-field-row .field, .site-field-row .kf { margin-bottom: 0; }
.site-inspector .field { margin-bottom: 8px; position: relative; }
.site-inspector .kf { margin-bottom: 8px; }
.site-inspector .field input[type="color"] { padding: 3px; height: 34px; }
.site-inspector .field input[type="range"] { padding: 0; }

.site-clear-btn {
  position: absolute; right: 4px; top: 22px; border: none; background: none; color: var(--faint);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 4px 6px;
}
.site-clear-btn:hover { color: var(--ink); }

.site-full-btn { width: 100%; }

/* This screen is desktop-only (crm.js hides the Website rail item and
   blocks the route below the app's own mobile cutover) — this block is
   just a graceful fallback for a desktop window narrowed after the screen
   is already open, not a real mobile layout. */
@media (max-width: 860px) {
  .site-workspace { flex-direction: column; }
  .site-side-panel { width: 100%; flex-basis: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .site-device-btn { transition: none; }
}