/* Living Field v2 (system pass 2026-10-08: type, controls, radii and elevation from /v/system/system.css): the atelier floating on white, in the Studio's own chip and panel language
   (tokens from /v/workspace/workspace.css: chrome card, chrome edge, accent, Jost + Schibsted + Plex Mono). */
.living-field { position: relative; height: 100vh; height: 100svh; min-height: 620px; max-height: 1100px; overflow: hidden; background: var(--white);
  isolation: isolate; touch-action: pan-y; }
.lf-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; cursor: default; }
.living-field.lf-ready .lf-canvas { cursor: pointer; }
.living-field.lf-is-open .lf-canvas { cursor: grab; }

.lf-copy { position: absolute; z-index: 2; left: var(--gutter); top: var(--top); max-width: min(560px, 40vw);
  pointer-events: none; transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out); }
.lf-copy .vs-headline { max-width: 9.5em; }
.lf-lede { margin: var(--s-5) 0 0; max-width: 21em; color: var(--vs-ink); }
.lf-coarse { display: none; }
@media (pointer: coarse) { .lf-fine { display: none; } .lf-coarse { display: inline; } }
.lf-is-open .lf-copy { opacity: 0; transform: translateY(-8px); }

.lf-truth { margin: var(--s-4) 0 0; transition: opacity .4s var(--ease-out); }
.lf-is-open .lf-truth { opacity: 0; }
.lf-noscript, .lf-failed::after { position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); color: var(--vs-muted); }
.lf-failed::after { content: "The field could not start WebGL on this device."; font: 400 var(--t-body)/1.4 var(--f-ui); }

.lf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; padding: 0; list-style: none; }

/* ---- the chip beside a piece that comes forward (Studio chrome card) ------------------------------------- */
/* ---- the label beside a piece that comes forward: plain type, no card (system pass: no invented Studio chrome) ---- */
.lf-chip { position: absolute; z-index: 5; left: 0; top: 0; width: max-content; min-width: 180px; max-width: 260px; padding: var(--s-2) 0;
  font-family: var(--f-ui); color: var(--vs-ink); text-shadow: 0 0 12px #fff, 0 0 4px #fff;
  opacity: 0; pointer-events: none; transition: opacity var(--d-fast) var(--ease-out); will-change: transform; }
.lf-chip.show { opacity: 1; }
.lf-chip-h b { font: var(--w-ui) var(--t-ui)/1.25 var(--f-ui); letter-spacing: var(--tr-ui); }
.lf-chip-step { display: flex; align-items: baseline; gap: var(--s-2); margin-top: 2px; font: 450 var(--t-caption)/1.3 var(--f-ui); color: var(--vs-ink-2); }
.lf-chip-step .lf-num { font: 500 var(--t-readout)/1 var(--f-mono); font-variant-numeric: tabular-nums; color: var(--vs-muted); min-width: 2.4em; }

/* ---- open: the piece title, size, step and two system buttons, in the headline column (no recreated panel) ---- */
.lf-panel { position: absolute; z-index: 6; left: var(--gutter); top: var(--top); width: min(380px, 32vw);
  display: grid; gap: var(--s-2); justify-items: start; font-family: var(--f-ui); color: var(--vs-ink);
  opacity: 0; transform: translateY(8px); transition: opacity var(--d-slow) var(--ease-out), transform var(--d-slow) var(--ease-out); }
.lf-panel.show { opacity: 1; transform: none; }
.lf-panel:focus, .lf-panel:focus-visible { outline: none; box-shadow: none; }   /* the panel takes focus for the screen reader, not as a target */
.lf-panel h3 { margin: 0; text-wrap: balance; }
.lf-mm { margin: 0; color: var(--vs-ink-2); }
.lf-step { margin: var(--s-4) 0 0; color: var(--vs-ink); font-size: var(--t-body); max-width: none; }
.lf-step .lf-num { margin-right: var(--s-2); color: var(--vs-muted); }
.lf-acts { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.lf-note { margin: var(--s-4) 0 0; }

/* ---- phone: its own composition ---- */
@media (max-width: 719px) {
  .living-field { min-height: 700px; }
  .lf-copy { right: var(--gutter); max-width: none; }
  .lf-lede { margin-top: var(--s-3); max-width: 20em; }
  .lf-chip { min-width: 0; max-width: calc(100vw - 40px); }
  .lf-panel { right: var(--gutter); top: auto; bottom: max(var(--s-6), env(safe-area-inset-bottom)); width: auto; }   /* the field lifts the opened piece to the top half on phone */
  .lf-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lf-chip, .lf-panel, .lf-copy { transition: none !important; }
}