/* Portable role contract (supply on :root or a host ancestor):
 --craft-field, --craft-surface, --craft-ink, --craft-muted, --craft-line,
 --craft-accent, --craft-on-accent, --craft-focus,
 --craft-font-body, --craft-font-display, --craft-font-mono,
 --craft-size-body, --craft-size-small, --craft-size-title,
 --craft-space-sm, --craft-space-md, --craft-space-lg, --craft-radius.
 Only the standalone uses --craft-page-margin. No outside page styles here. */
.craft-lab { container: craft-lab / inline-size; color: var(--craft-ink); background: var(--craft-field); font: var(--craft-size-body)/1.5 var(--craft-font-body); min-width: 0; }
.craft-lab *, .craft-lab *::before, .craft-lab *::after { box-sizing: border-box; }
.craft-lab [hidden] { display: none !important; }
.craft-workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 300px); gap: var(--craft-space-lg); align-items: start; }
.craft-figure { margin: 0; min-width: 0; }
.craft-figure-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--craft-space-sm); border-top: 1px solid var(--craft-line); padding: var(--craft-space-md) 0; color: var(--craft-muted); font: var(--craft-size-small)/1.5 var(--craft-font-mono); }
.craft-stage { position: relative; background: var(--craft-surface); min-height: 120px; }
.craft-stage canvas, .craft-stage img { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; image-rendering: pixelated; }
.craft-figure figcaption { color: var(--craft-muted); font-size: var(--craft-size-small); padding-block: var(--craft-space-md); max-width: 75ch; }
.craft-compare-labels { pointer-events: none; position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
.craft-compare-labels span { padding: var(--craft-space-sm); background: var(--craft-field); font: var(--craft-size-small)/1.5 var(--craft-font-mono); }
.craft-compare-labels::after { content: ''; position: absolute; inset-block: 0; left: 50%; width: 1px; background: var(--craft-ink); }
.craft-controls { border-top: 1px solid var(--craft-line); padding-top: var(--craft-space-md); display: grid; gap: var(--craft-space-md); min-width: 0; }
.craft-field { display: grid; gap: var(--craft-space-sm); min-width: 0; font-size: var(--craft-size-small); }
.craft-field > span { display: flex; justify-content: space-between; gap: var(--craft-space-sm); }
.craft-field output { color: var(--craft-accent); font-family: var(--craft-font-mono); }
.craft-lab input, .craft-lab select, .craft-lab button { accent-color: var(--craft-accent); font: inherit; color: inherit; border-radius: var(--craft-radius); }
.craft-field select, .craft-field input[type='number'] { width: 100%; min-width: 0; min-height: 44px; padding: var(--craft-space-sm); border: 1px solid var(--craft-line); background: var(--craft-surface); }
.craft-field input[type='range'] { width: 100%; margin: 0; min-height: 32px; cursor: pointer; }
.craft-lab button { min-height: 44px; padding: var(--craft-space-sm) var(--craft-space-md); border: 1px solid var(--craft-line); background: var(--craft-surface); cursor: pointer; font-size: var(--craft-size-small); }
.craft-lab button:hover:not(:disabled) { border-color: var(--craft-accent); }
.craft-lab [data-craft='export'] { color: var(--craft-on-accent); background: var(--craft-accent); border-color: var(--craft-accent); }
.craft-lab :disabled { opacity: .55; cursor: not-allowed; }
.craft-lab :focus-visible { outline: 2px solid var(--craft-focus); outline-offset: 4px; }
.craft-effects { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--craft-space-sm); }
.craft-effects legend { padding: 0 0 var(--craft-space-sm); font: var(--craft-size-small)/1.5 var(--craft-font-mono); color: var(--craft-muted); }
.craft-effects label { display: flex; align-items: center; gap: var(--craft-space-sm); min-height: 44px; border: 1px solid var(--craft-line); padding: var(--craft-space-sm); cursor: pointer; font-size: var(--craft-size-small); }
.craft-effects label:has(:checked) { border-color: var(--craft-accent); color: var(--craft-accent); }
.craft-effects input { margin: 0; flex: 0 0 auto; }
.craft-description, .craft-note, .craft-method { margin: 0; color: var(--craft-muted); font-size: var(--craft-size-small); }
.craft-description { min-height: 4.5em; }
.craft-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--craft-space-md); }
.craft-check { display: flex; align-items: center; gap: var(--craft-space-sm); font-size: var(--craft-size-small); min-height: 44px; }
.craft-check input { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; }
.craft-actions { display: flex; gap: var(--craft-space-sm); }
.craft-actions > button:first-child { flex: 1; }
.craft-export { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: end; gap: var(--craft-space-sm); padding-top: var(--craft-space-md); border-top: 1px solid var(--craft-line); }
.craft-status { border-top: 1px solid var(--craft-line); padding-top: var(--craft-space-md); margin: var(--craft-space-lg) 0 var(--craft-space-sm); overflow-wrap: anywhere; font-size: var(--craft-size-small); }
.craft-method { max-width: 100ch; }
@container craft-lab (max-width: 1023px) {
  .craft-workspace { grid-template-columns: minmax(0, 1fr); }
  .craft-controls { grid-template-columns: 1fr 1fr; column-gap: var(--craft-space-lg); }
  .craft-controls > .craft-field:first-child, .craft-controls > .craft-description, .craft-controls > .craft-effects, .craft-controls > .craft-status { grid-column: 1 / -1; }
  .craft-effects { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .craft-description { min-height: auto; }
}
@container craft-lab (min-width: 640px) and (max-width: 1023px) {
  /* Keep each action adjacent to its explanation; ordinary auto-placement
     stranded the export note in the opposite column at wide-phone widths. */
  .craft-controls { grid-template-areas: 'source source' 'effects effects' 'description description' 'strength parameters' 'comparison comparison' 'actions motion' 'export export-note' 'retry retry'; }
  .craft-controls > .craft-field:first-child { grid-area: source; }
  .craft-effects { grid-area: effects; }
  .craft-description { grid-area: description; }
  .craft-controls > .craft-field:has([data-craft='strength']) { grid-area: strength; }
  .craft-pair { grid-area: parameters; }
  .craft-check { grid-area: comparison; }
  .craft-actions { grid-area: actions; }
  [data-craft='motion'] { grid-area: motion; align-self: center; }
  .craft-export { grid-area: export; }
  [data-craft='export-note'] { grid-area: export-note; align-self: center; }
  [data-craft='retry'] { grid-area: retry; }
}
@container craft-lab (max-width: 639px) {
  .craft-controls { grid-template-columns: minmax(0, 1fr); }
  .craft-effects { grid-template-columns: 1fr 1fr; }
}