/* The sheet the concept views share: the shape of My builds' stage, the caption over its top, and a row of controls under
   it. Each one's own drawing is styled in its own css: msg.css and the pg-*.css files. Colours, type, space, radius
   and motion come from the tokens; drawings' numbers are world units. */

/* The block's intro, as Up close had it */
.pg-how { padding-block-start: var(--space-fluid-l); }
.pg-how-intro { padding-block-start: 0; }
.pg-how-intro .eyebrow { margin-block-end: var(--space-3); color: var(--accent-text); font-size: var(--text-xs); }
.pg-how-intro h4 {
  margin: 0;
  max-inline-size: 18ch;
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

/* Until a concept is built, the stage keeps room for its controls, so nothing moves when it comes in */
.tb:has([role="tab"][aria-selected="true"]:is([data-look="erpMsg"], [data-look="pgMove"])) .stage:not(:has(.layer)) { margin-block-end: var(--mf-ctl); }

.cx { margin: 0; container: cx / inline-size; }
.cx-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--sheet);
  color: var(--sheet-ink);
}
/* Between a phone and a laptop, a little taller than a film, so a drawing keeps room under its caption */
@container cx (560px <= width < 700px) {
  .cx-stage { aspect-ratio: 4 / 3; }
}
@container cx (width < 560px) {
  .cx-stage { aspect-ratio: 400 / 620; }
}
.cx-world, .cx-world > svg, .cx-world > canvas { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; }

/* The caption: what the concept shows, then a line that changes as you look around it */
.cx-cap {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  display: grid;
  gap: var(--space-1-5);
  padding: var(--space-fluid-s) var(--space-fluid-m) var(--space-3);
  background: linear-gradient(var(--sheet) 70%, color-mix(in srgb, var(--sheet) 0%, transparent));
  pointer-events: none;
}
.cx-cap p { margin: 0; }
.cx-e {
  color: var(--accent-text);
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}
.cx-h {
  max-inline-size: 30ch;
  color: var(--text);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.cx-d { max-inline-size: 64ch; min-block-size: calc(2 * var(--leading-snug) * var(--text-sm)); color: var(--muted); font-size: var(--text-sm); line-height: var(--leading-snug); }
@container cx (width >= 900px) {
  .cx-h { font-size: var(--text-h4); }
  .cx-d { font-size: var(--text-md); min-block-size: calc(2 * var(--leading-snug) * var(--text-md)); }
}

/* Controls: as tall as a film's, so a concept and a film change places without the page moving */
.cx-ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  min-block-size: var(--mf-ctl);
  padding-block-start: var(--space-3);
}
.cx-ctl:empty { display: none; }
.cx-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-0-5);
  padding: var(--space-0-5);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--sunk);
}
.cx-seg button {
  min-block-size: var(--space-10);
  padding-inline: var(--space-4);
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.cx-seg button:hover { color: var(--text); }
.cx-seg button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--lift); }
.cx-seg button:focus-visible, .cx-btn:focus-visible, .cx-key:focus-visible { outline: 2px solid var(--accent); outline-offset: var(--space-0-5); }

/* A button with a word, as replay */
.cx-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--space-10);
  padding-inline: var(--space-3-5) var(--space-4);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  box-shadow: var(--lift);
  cursor: pointer;
}
.cx-btn svg { inline-size: var(--space-3-5); block-size: var(--space-3-5); fill: currentColor; }
.cx-btn[hidden] { display: none; }

/* A drawing's key: one chip per series, each with its swatch, that picks that series out */
.cx-keys { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }
.cx-key {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--space-8);
  padding-inline: var(--space-2-5) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.cx-key:hover { color: var(--text); }
.cx-key[aria-pressed="true"] { border-color: var(--text); background: var(--surface); color: var(--text); }
.cx-key .sw { inline-size: var(--space-5); block-size: var(--space-2); overflow: visible; }
.cx-key .sw path { fill: none; stroke: var(--c, var(--text)); stroke-width: 4; stroke-linecap: round; }
.cx-key .sw .i { stroke: var(--surface); stroke-width: 1.6; }
.cx-key[aria-pressed="false"] .sw .i { stroke: var(--bg); }
.cx-note { margin: 0; color: var(--muted); font-family: var(--mono); font-size: var(--text-2xs); letter-spacing: var(--tracking-wide); }

/* Text drawn in a concept: the sheet's mono, in its ink, its soft grey or its faint */
.cx-world svg { overflow: visible; font-family: var(--mono); }
.cx-world svg text { fill: var(--sheet-ink); }

@media (width < 640px) {
  .cx-seg button { padding-inline: var(--space-3); }
}