/*
 * canvas-page runtime stub styling — Phase 2 Slice 1.
 *
 * Kind colours intentionally mirror dev-page.css so a page rendered
 * by the runtime looks identical to the editor canvas (minus the
 * editor chrome: handles, selection outline, status bar). Single
 * source of truth would be nicer; for Slice 1 the kind-colour block
 * is duplicated. Refactor once a real content-binding layer (Slice
 * 2+) makes the duplication pinch.
 *
 * The runtime emits CSS custom properties from PHP for the palette-
 * driven 'text' colour and the four kind backgrounds (so a future
 * palette schema with a kindColors field replaces the defaults in
 * one place).
 */

body.canvas-page-body {
  margin: 0;
  /* v0.11.7: transparent so the fixed #lines-layer background (z-index:0,
     painted from style.css) shows through. The artboard grey/white-sheet
     framing was a Slice-1 standalone-preview look; once the page composes
     lines behind content it would hide the lines. */
  background: transparent;
  color: #222;
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

.canvas-page {
  margin: 0 auto;
  /* Sit ABOVE the fixed lines layer (z-index:0) — same stacking the flowing
     .layout column uses. Transparent so the lines remain visible between and
     behind rects; each rect paints its own kind background. */
  position: relative;
  z-index: 1;
  background: transparent;
  /* width + height set inline by the template */
}

.rect {
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.18);
  /* Stub label flush top-left (mirrors the editor) so it never covers the
     centre of future bound content; the id stays absolute top-right. Padding
     insets only in-flow chrome, not absolute children. isolation keeps each
     rect its own stacking context for parity with the editor (and for when
     Slice 2 binds real z-indexed content). */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0.25rem 0.4rem;
  isolation: isolate;
  color: var(--cp-palette-text, rgba(0, 0, 0, 0.82));
  font-size: 0.9rem;
}

.rect-stub-label {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.75rem;
  color: rgba(0, 0, 0, 0.82); /* runtime chrome, not palette-bound */
}

.rect-stub-id {
  position: absolute;
  top: 0.25rem;
  right: 0.4rem;
  font-size: 0.65rem;
  color: rgba(0, 0, 0, 0.72); /* runtime chrome, not palette-bound */
  font-variant-numeric: tabular-nums;
}

/* Slice T1: real text content on a text rect at runtime. Inherits the
   rect's font, including any .ty-<id> typography token (class on the
   parent .rect; font properties inherit) — do NOT set font-size/family
   here. pre-wrap preserves the author's newlines + spacing; the node
   clips to the rect so overflow can't escape the layout box. */
.rect-text {
  width: 100%;
  white-space: pre-wrap;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* Slice TS1: atomic text-style marks (runtime). Same two rules as the
   editor (dev-page.css) for visual parity — a direct class on the run's
   <span> overrides the inherited .ty-<id> typography token. */
.rect-text .mk-strong    { font-weight: 700; }
.rect-text .mk-em        { font-style: italic; }
.rect-text .mk-underline { text-decoration: underline; }
/* TS3-b: link runs — underline affordance only; colour comes from the
   separate `color` mark or the inherited typography token (parity with the
   editor's .mk-link). The <a>'s default pointer cursor signals the link. */
.rect-text .mk-link { text-decoration: underline; }

/* v0.11.7: bound image content. The <img> fills the rect; object-fit comes
   from data-fit on the parent (.rect[data-fit=contain] → contain, else cover),
   object-position from inline focusX/focusY — parity with the editor's
   .pe-rect-img. A has-image rect drops its kind background + chrome so only the
   photo shows (an UNBOUND image rect keeps the stub + kind background). */
.rect.has-image {
  border: none;
  background: transparent;
  padding: 0;
  overflow: hidden;
}
.rect-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rect[data-fit="contain"] .rect-img { object-fit: contain; }

.rect--text       { background: var(--cp-kind-text); }
.rect--image      { background: var(--cp-kind-image); }
.rect--drilldown  { background: var(--cp-kind-drilldown); }
.rect--snippet    { background: var(--cp-kind-snippet); }
.rect--unknown    { background: #eeeeee; }

/* 6020 Slice 1: a snippet rect with a RESOLVED binding renders a live snippet
   at its position. Strip the editor-parity chrome (border/background/padding)
   so only the snippet's own markup shows — the rect becomes a bare positioned
   container. An UNBOUND/dangling snippet rect lacks .has-snippet and keeps the
   stub + kind background (so the author still sees an empty placeholder). */
.rect.has-snippet {
  border: none;
  background: transparent;
  padding: 0;
  overflow: visible;
}