/* Editor chrome only. The runtime shares none of this — an embedded document
   pulls style.css and nothing here. */
#ed-root { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem; }
#ed-stage { flex: 1 1 auto; min-width: 0; }
#ed-panel { flex: 0 0 22rem; max-height: 90vh; overflow-y: auto; }

#ed-bar { display: flex; gap: .5rem; align-items: center; margin: .5rem 0; flex-wrap: wrap; }
#ed-status { font-size: .85rem; opacity: .8; }
#ed-status.ed-bad { color: #ff6b6b; opacity: 1; }

#ed-json { max-height: 16rem; overflow: auto; font-size: .7rem; opacity: .75; }

.ed-section { margin-bottom: 1rem; }
.ed-section h3 { margin: .25rem 0 .5rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.ed-sub { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; opacity: .6; margin: .5rem 0 .25rem; }

.ed-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: .2rem 0; }
.ed-row label { font-size: .8rem; opacity: .85; }
.ed-row input, .ed-row select { flex: 0 0 9rem; }
.ed-row input[type="checkbox"] { flex: 0 0 auto; }

.ed-item { border: 1px solid rgba(128,128,128,.35); border-radius: .3rem; padding: .5rem; margin-bottom: .5rem; }
.ed-item-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; }

/* An item's head is the control that opens and shuts it. A button, not a
   styled div, so it reaches the keyboard for free; stripped back to inherit
   because the only thing it should look like is the heading it replaced.
   The open/shut state itself is held in editor.js against the item object —
   every edit rebuilds this panel, so nothing in here survives a keystroke. */
.ed-item-toggle { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .35rem;
  background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit;
  text-align: left; cursor: pointer; }
.ed-item-toggle:focus-visible { outline: 1px solid currentColor; outline-offset: 2px; }
.ed-caret { flex: 0 0 auto; font-size: .75rem; opacity: .75; }

/* A shut item names itself. One line, clipped rather than wrapped, so a long
   word cannot push "remove" off the row or make the shut item taller than the
   thing it is standing in for. */
.ed-item-summary { flex: 1 1 auto; min-width: 0; font-size: .75rem; opacity: .6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Shut, the head is the whole item, so the gap under it is not for anything. */
.ed-item:has(.ed-item-body[hidden]) .ed-item-head { margin-bottom: 0; }
.ed-remove { font-size: .7rem; padding: .1rem .4rem; }
.ed-error { color: #ff6b6b; font-size: .8rem; }

/* Advisory, not an error: the document is valid and will render, it just will
   not render what the knob suggests. Amber rather than .ed-error's red, and it
   sits under the control it is about — see hintFor in editor.js. */
.ed-hint { color: #e0a63c; font-size: .72rem; line-height: 1.35; margin: -.05rem 0 .4rem; max-width: 20rem; }

/* Composition members: the ordered list of presets whose stages run in turn.
   Order is editable because it is part of the look — a stage runs on what the
   previous one returned. */
.ed-members { display: flex; flex-direction: column; gap: 2px; }
.ed-member { display: flex; align-items: center; gap: 4px; }
.ed-member-name { flex: 1; font-family: inherit; font-size: 11px; }
.btn.ed-tiny { padding: 0 5px; min-width: 18px; line-height: 18px; font-size: 11px; }
.btn.ed-tiny:disabled { opacity: 0.3; cursor: default; }

/* A knob's control row: the field, plus whatever acts on it. */
.ed-knob { display: flex; align-items: center; gap: 4px; }
.ed-knob input[type="number"] { flex: 1; min-width: 0; }
.ed-auto-tag { flex: 1; font-size: 11px; opacity: 0.7; }

/* `hidden` loses to `display: flex`, and #ed-root sets it.
   Without this the gate looks right and the page is still 22rem of empty panel
   wider than a phone, scrolling sideways, with the piece and the text running
   off the edge. Caught in a screenshot; no request-level check could see it. */
[hidden] { display: none !important; }

/* The narrow-viewport gate. Sized so the piece is the page rather than a
   decoration on it: on a 390px phone the frame lands about 350x140. */
#narrow-gate { min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.25rem; padding: 1.5rem; }
#narrow-piece { width: 100%; max-width: 30rem; aspect-ratio: 800 / 320;
  border: 0; border-radius: .3rem; display: block; }
#narrow-line { max-width: 24rem; margin: 0; text-align: center; line-height: 1.5;
  font-size: .95rem; opacity: .85; }
#narrow-note { margin: 0; text-align: center; font-size: .72rem; opacity: .5; }
#narrow-note a { color: inherit; }

/* Reachable from the editor without competing with it: the same weight as the
   build stamp it sits beside. A notice nobody can find is not a notice. */
/* Both toolbar links, styled together: they are the same kind of thing — a
   quiet way out of the editor — and only one of them should ever be the loudest
   thing in the bar, which is neither. */
#ed-embed, #ed-privacy { font-size: .8rem; opacity: .55; color: inherit; }
#ed-embed:hover, #ed-privacy:hover { opacity: .85; }