/* editor/panel.css — the content editor's styles, as a shared partial.
 *
 * Lifted verbatim out of `timeline/concept-c.css` on 2026-08-05 for issue
 * #85, the sibling of #84's move of the panel's markup into panel.js. The
 * panel now travels as one thing — markup, behaviour and appearance — so the
 * portrait page can host the editor without a second copy of 270 lines of
 * CSS quietly going stale beside the first. Issue #81 removed duplicated
 * assets for exactly this reason, and re-introducing a copy here would have
 * undone it.
 *
 * Nothing about the rules changed in the move. They are authored in the kit's
 * own tokens (--surface, --line, --fg, --fg-dim, --accent, --shadow, --body,
 * --display), so they follow whichever page loads them into light or dark
 * without a prefers-color-scheme block of their own, and they can never
 * reach inside a .stage. Sizes are in px/rem of the PAGE, never canvas px.
 *
 * Load after kit.css and after the hosting page's own stylesheet.
 */

/* ══ CONTENT EDITOR — page chrome, not stage ═══════════════════════════════
   Everything below is authored in the kit's own tokens (--surface, --line,
   --fg, --fg-dim, --accent, --shadow, --body, --display) so it follows the
   page into light or dark without a single prefers-color-scheme block of its
   own, and so it can never reach inside .stage. Sizes are in px/rem of the
   PAGE, never canvas px.                                                   */

/* ── the Preview / Edit content switch ─────────────────────────────────── */
.modebar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  margin:0 0 14px}
.modeseg{display:inline-flex;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:3px;box-shadow:var(--shadow)}
.modetab{font:600 13px/1 var(--body);color:var(--fg-dim);background:none;border:0;
  border-radius:7px;padding:9px 16px;cursor:pointer;transition:color .15s,background .15s}
.modetab:hover{color:var(--fg)}
.modetab[aria-selected="true"]{background:var(--accent);color:#fff}
.modetab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.modenote{font-size:12.5px;color:var(--fg-dim)}

.pane[hidden]{display:none}

/* ── editor shell ──────────────────────────────────────────────────────── */
.ed{margin-top:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);padding:18px 18px 22px}
.ed h2,.ed h3{font-family:var(--display);font-weight:400;margin:0}
.ed h2{font-size:21px}
.ed h3{font-size:16px}
.ed-top{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:flex-end;
  justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--line)}
.ed-sub{margin:5px 0 0;font-size:12.5px;color:var(--fg-dim)}
.ed-top-r{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.ed-save{font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--fg-dim);
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.ed-save::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--vw-green);flex:0 0 8px}
.ed-save.busy::before{background:var(--vw-yellow)}
.ed-save.bad::before{background:#E5484D}
.ed-size{min-width:230px}
.ed-size-bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.ed-size-bar i{display:block;height:100%;width:0;border-radius:3px;
  background:var(--accent);transition:width .2s}
.ed-size.warn .ed-size-bar i{background:var(--vw-orange)}
.ed-size.over .ed-size-bar i{background:#E5484D}
.ed-size span{display:block;margin-top:5px;font-size:11.5px;color:var(--fg-dim);
  font-variant-numeric:tabular-nums}

/* ── buttons ───────────────────────────────────────────────────────────── */
.ed button{font:600 13px/1 var(--body);color:var(--fg);background:var(--surface);
  border:1px solid var(--line);border-radius:8px;padding:9px 14px;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.ed button:hover:not(:disabled){border-color:var(--accent)}
.ed button:disabled{opacity:.45;cursor:not-allowed}
.ed button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ed button.pri{background:var(--accent);border-color:var(--accent);color:#fff}
.ed button.pri:hover:not(:disabled){filter:brightness(1.08)}
.ed button.danger{color:#E5484D}
.ed button.danger:hover:not(:disabled){border-color:#E5484D}
.ed button.mini{padding:6px 10px;font-size:12px}
.ed-actions{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:14px;align-items:flex-end}
.ed-actions .spacer{flex:1 1 24px}
.ed>.hint{max-width:96ch}
.ed-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── messages, confirmations, JSON drawer ──────────────────────────────── */
.ed-msg{margin:12px 0 0;font-size:13px;padding:10px 13px;border-radius:9px;
  border:1px solid var(--line);background:var(--bg);color:var(--fg)}
.ed-msg[hidden]{display:none}
.ed-msg.ok{border-color:var(--vw-green)}
.ed-msg.warn{border-color:var(--vw-orange)}
.ed-msg.err{border-color:#E5484D}
.ed-msg ul{margin:7px 0 0;padding-left:20px}
.ed-msg li{margin:2px 0}
.ed-confirm{margin-top:12px;padding:13px 15px;border-radius:10px;
  border:1px solid var(--vw-orange);background:var(--bg);
  display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.ed-confirm[hidden]{display:none}
.ed-confirm p{margin:0;font-size:13px;flex:1 1 320px}
.ed-json{margin-top:12px}
.ed-json[hidden]{display:none}
.ed-json textarea{width:100%;font:400 12px/1.45 ui-monospace,SFMono-Regular,
  Menlo,Consolas,monospace;color:var(--fg);background:var(--bg);
  border:1px solid var(--line);border-radius:9px;padding:10px;resize:vertical}

/* ── the carousel strip ────────────────────────────────────────────────── */
.ed-carousel{margin-top:18px}
.ed-carousel-hd{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;
  justify-content:space-between;margin-bottom:9px}
.ed-carousel-hd p{margin:0;font-size:12px;color:var(--fg-dim)}
.ed-strip{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;
  padding:4px 4px 12px;scroll-behavior:smooth}
.ed-chip{flex:0 0 172px;text-align:left;padding:0;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:11px;
  cursor:pointer;display:flex;flex-direction:column;
  transition:border-color .15s,box-shadow .15s,transform .15s}
.ed-chip:hover{border-color:var(--accent)}
.ed-chip.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.ed-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ed-chip .th{height:74px;position:relative;background:var(--bg);overflow:hidden;
  border-bottom:1px solid var(--line)}
.ed-chip .th img{width:100%;height:100%;object-fit:cover;display:block}
.ed-chip .th .ph{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:10.5px;letter-spacing:.1em;font-weight:700;
  text-transform:uppercase;color:var(--fg-dim);
  background:repeating-linear-gradient(135deg,rgba(125,140,180,.16) 0 8px,
             rgba(125,140,180,.05) 8px 16px)}
.ed-chip .th .n{position:absolute;left:0;top:0;padding:3px 7px;
  font:700 11px/1 var(--body);color:#fff;background:rgba(7,10,18,.7);
  border-radius:0 0 7px 0;font-variant-numeric:tabular-nums}
.ed-chip .th .cnt{position:absolute;right:5px;bottom:5px;padding:2px 6px;
  font:700 10px/1.3 var(--body);color:#fff;background:rgba(7,10,18,.7);
  border-radius:5px}
.ed-chip .bd{padding:8px 10px 10px;border-left:4px solid var(--chipacc,var(--line))}
.ed-chip .k{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--fg-dim)}
.ed-chip .t{font-family:var(--display);font-size:13.5px;line-height:1.25;
  margin-top:3px;color:var(--fg);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.ed-chip .d{margin-top:5px;font-size:11px;color:var(--fg-dim);
  font-variant-numeric:tabular-nums}
.ed-chip .d.prov{font-style:italic;color:var(--vw-orange)}
.ed-add{flex:0 0 128px;border-style:dashed !important;align-self:stretch;
  min-height:150px;color:var(--fg-dim)}
.ed-add:hover{color:var(--accent)}

/* ── the detail panel ──────────────────────────────────────────────────── */
.ed-detail{margin-top:16px;border-top:1px solid var(--line);padding-top:16px}
.ed-detail.is-empty>:not(.ed-dhead){display:none}
.ed-dhead{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;
  justify-content:space-between;margin-bottom:12px}
.ed-dact{display:flex;flex-wrap:wrap;gap:7px}
.ed-cols{display:grid;gap:22px 30px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.ed-field{margin:0 0 16px}
.ed-field:last-child{margin-bottom:0}
.ed label,.ed .lab,.ed legend{display:block;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;color:var(--fg-dim);margin-bottom:6px}
.ed input[type=text],.ed input[type=number],.ed textarea,.ed select{
  width:100%;font:400 14px/1.45 var(--body);color:var(--fg);background:var(--bg);
  border:1px solid var(--line);border-radius:9px;padding:9px 11px}
.ed textarea{resize:vertical}
.ed input:focus-visible,.ed textarea:focus-visible,.ed select:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.ed .hint{margin:6px 0 0;font-size:12px;color:var(--fg-dim)}
.ed .hint code{font:400 11.5px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.ed .hint.warn{color:var(--vw-orange);font-weight:700}
.ed .hint.bad{color:#E5484D;font-weight:700}
.ed .prev{margin:8px 0 0;padding:10px 12px;border-radius:9px;background:var(--bg);
  border:1px dashed var(--line);font-family:var(--display);font-size:20px;
  line-height:1.2;color:var(--fg)}
.ed .prev em{font-style:italic}
.ed .prev .empty{font-family:var(--body);font-size:12.5px;color:var(--fg-dim);
  font-style:normal}
.ed fieldset{border:1px solid var(--line);border-radius:10px;padding:13px 14px 14px;
  margin:0 0 16px}
.ed legend{padding:0 6px;margin:0}
.ed .check{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;
  text-transform:none;letter-spacing:0;font-weight:400;color:var(--fg);
  margin-bottom:12px;cursor:pointer}
.ed .check input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.ed-row{display:flex;flex-wrap:wrap;gap:12px}
.ed-row>span{flex:1 1 130px}
.ed .err{margin:8px 0 0;font-size:12.5px;font-weight:700;color:#E5484D}
.ed .err[hidden],.ed .warnline[hidden]{display:none}
.ed .warnline{margin:0 0 12px;font-size:12.5px;padding:9px 12px;border-radius:9px;
  border:1px solid var(--vw-orange);background:var(--bg);color:var(--fg)}
.ed .swatch{display:inline-block;width:13px;height:13px;border-radius:4px;
  vertical-align:-2px;margin-right:7px;border:1px solid rgba(125,140,180,.4)}

/* ── images ────────────────────────────────────────────────────────────── */
.ed-drop{border:2px dashed var(--line);border-radius:11px;padding:18px;
  text-align:center;background:var(--bg);transition:border-color .15s,background .15s}
.ed-drop.hot{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--bg))}
.ed-drop p{margin:0 0 9px;font-size:13px;color:var(--fg-dim)}
.ed-drop p.hint{margin:9px 0 0}
/* the "keep the original size" opt-out sits under the cap it opts out of, so
   the two are read as one decision rather than two controls. Issue #91. */
.ed-drop .check{margin-top:10px}
.ed-drop p#f-orig-hint{margin:5px 0 0;font-size:12px}
.ed-imgs{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.ed-img{display:flex;gap:12px;align-items:flex-start;padding:10px;
  border:1px solid var(--line);border-radius:11px;background:var(--bg)}
.ed-img .th{flex:0 0 96px;height:72px;border-radius:7px;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);position:relative}
/* `contain`, deliberately different from every other thumbnail here. This one
   is an INDEX — it answers "which picture is this row?" — and a 96x72 cover
   crop of a wide logo lockup is a slab of white with two letters in it. The
   framing preview two rules down is the opposite job and stays `cover`,
   because that one IS the crop the author is setting. */
.ed-img .th img{width:100%;height:100%;object-fit:contain;display:block}
.ed-img .th .ph{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;text-align:center;font-size:9.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim);padding:4px}
.ed-img .meta{flex:1 1 170px;min-width:0}
.ed-img .meta b{display:block;font-size:13px;font-weight:700;color:var(--fg)}
.ed-img .meta small{display:block;margin-top:3px;font-size:11.5px;color:var(--fg-dim);
  font-variant-numeric:tabular-nums}
.ed-img .meta .crop{margin-top:8px}
.ed-img .meta .crop label{margin-bottom:4px}
.ed-img .meta .crop select{font-size:12.5px;padding:6px 9px}
.ed-img .acts{flex:0 0 auto;display:flex;flex-direction:column;gap:6px}

/* ── framing ─────────────────────────────────────────────────────────────
   The thumbnail is a button, because it is already the thing on screen that
   shows the crop, so it is the thing to press to change one. It keeps the
   plain thumbnail's border and surface; only the button chrome comes off. */
.ed-img button.th{padding:0;cursor:pointer}
.ed-img button.th:hover{border-color:var(--accent)}
/* the editor opens as a full-width row directly under the photograph it
   belongs to, so nothing the mouse is aiming at moves while it is open */
.ed-frame{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;padding:12px;
  border:1px solid var(--accent);border-radius:11px;background:var(--bg)}
/* the live frame is cut to the slot's real shape and styled the way the wall
   styles it, object-fit included — it IS the crop, not a picture of one */
.fr-stage{position:relative;flex:0 0 auto;overflow:hidden;border-radius:7px;
  border:1px solid var(--line);background:var(--surface);cursor:grab;touch-action:none}
.fr-stage.grabbing{cursor:grabbing}
.fr-stage:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fr-stage img{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;pointer-events:none}
/* the whole photograph, with everything outside the surviving region dimmed by
   the region's own outward shadow — one element, so there is no second overlay
   to keep in step with it */
.fr-src{position:relative;flex:0 0 auto;line-height:0;overflow:hidden;
  border-radius:7px;border:1px solid var(--line);cursor:crosshair;touch-action:none}
.fr-src.grabbing{cursor:grabbing}
.fr-src img{display:block;max-width:230px;max-height:190px;pointer-events:none}
.fr-region{position:absolute;border:2px solid var(--vw-yellow);
  box-shadow:0 0 0 9999px rgba(7,10,18,.52);pointer-events:none}
.fr-ctl{flex:1 1 200px;min-width:0}
.fr-row{display:flex;align-items:center;gap:9px;margin-top:9px}
.fr-row label{margin:0;flex:0 0 auto}
.fr-row input[type=range]{flex:1 1 auto;min-width:90px;accent-color:var(--accent)}
.fr-row output{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--fg-dim);
  font-variant-numeric:tabular-nums}
.fr-read{margin:10px 0 0;font-size:11.5px;line-height:1.55;color:var(--fg-dim);
  font-variant-numeric:tabular-nums}
.fr-btns{display:flex;gap:6px;margin-top:11px}

.ed-busy{font-size:12.5px;color:var(--fg-dim);margin:10px 0 0}
.ed-busy[hidden]{display:none}

/* Real progress, not a spinner — issue #91. On a 30 MB photograph the gap
   between decoding and encoding is seconds, and a bar that only says
   "working" through all of it is what makes people reload the page. */
.ed-prog{display:block;width:100%;height:6px;margin:7px 0 0;
  border:none;border-radius:3px;overflow:hidden;background:var(--surface);
  appearance:none;-webkit-appearance:none}
.ed-prog[hidden]{display:none}
.ed-prog::-webkit-progress-bar{background:var(--surface)}
.ed-prog::-webkit-progress-value{background:var(--accent);transition:width .12s linear}
.ed-prog::-moz-progress-bar{background:var(--accent)}

/* ── the card-template chooser ──────────────────────────────────────────
   Six deck layouts, each shown as a wireframe rather than described in a
   word list, because the choice is a shape. Real radios in one group, so
   the arrow keys move between them and the focus ring is the browser's.
   Every colour is a kit token, so the tiles follow the page into dark. */
.ed-tpl{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(146px,1fr))}
.ed-tpl label{display:block;margin:0;padding:9px 10px 10px;cursor:pointer;
  text-transform:none;letter-spacing:0;font-weight:400;color:var(--fg);
  background:var(--bg);border:1px solid var(--line);border-radius:11px;
  transition:border-color .15s,box-shadow .15s,background .15s}
.ed-tpl label:hover{border-color:var(--accent)}
.ed-tpl label.on{border-color:var(--accent);background:var(--surface);
  box-shadow:0 0 0 2px var(--accent) inset}
.ed-tpl input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.ed-tpl input:focus-visible+.wf{outline:2px solid var(--accent);outline-offset:3px}
.ed-tpl .wf{display:block;width:100%;height:auto;background:var(--surface);
  border:1px solid var(--line);border-radius:7px}
.ed-tpl .wf .cd{fill:none;stroke:var(--line);stroke-width:1}
.ed-tpl .wf .tx{fill:var(--fg-dim);opacity:.5}
.ed-tpl .wf .ch{fill:var(--accent);opacity:.5}
.ed-tpl .wf .fr{fill:var(--accent);fill-opacity:.2;stroke:var(--accent);stroke-width:1}
.ed-tpl .wf .gh{fill:none;stroke-dasharray:3.5 2.5;stroke-opacity:.7}
.ed-tpl label.on .wf .fr{fill-opacity:.4}
.ed-tpl .nm{display:block;margin-top:8px;font-size:12.5px;font-weight:700;
  line-height:1.25;color:var(--fg)}
.ed-tpl .dk{display:block;margin-top:2px;font-size:11px;line-height:1.3;
  color:var(--fg-dim)}

/* ── the one-step undo after a delete ─────────────────────────────────── */
.ed-undo{margin-top:12px;padding:13px 15px;border-radius:10px;
  border:1px solid var(--vw-green);background:var(--bg);
  display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.ed-undo[hidden]{display:none}
.ed-undo p{margin:0;font-size:13px;flex:1 1 320px}
.ed-add{display:flex;flex-direction:column;justify-content:center;
  align-items:center;gap:6px}
.ed-add .plus{display:block;width:34px;height:34px;border-radius:50%;
  border:2px solid currentColor;font:400 22px/30px var(--body);color:inherit}
.ed-add .cap{font-size:12.5px;font-weight:700;letter-spacing:.02em}


/* ── the shared timeline — issue #92 ───────────────────────────────────────
   Hidden entirely unless the page was built with a Supabase configuration,
   so the offline builder and the show players carry the rules and never the
   chrome. Same tokens as everything above; nothing here reaches a .stage. */
.ed-share{margin-top:18px;padding:14px 16px 15px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.ed-share[hidden]{display:none}
.ed-share-hd{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;
  justify-content:space-between}
.ed-share-hd h3{margin:0}
.ed-who{margin:0;font-size:12.5px;color:var(--fg-dim)}
/* a live count of the people in here, so presence reads as a state rather
   than as a sentence that may or may not have updated */
.ed-who .pip{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--vw-green);margin-right:6px;vertical-align:middle}
.ed-who.off .pip{background:var(--fg-dim)}
.ed-share-act{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:12px;
  align-items:flex-end}
.ed-share-act[hidden]{display:none}
.ed-share-act .spacer{flex:1 1 24px}
.ed-rev{font-size:12px;color:var(--fg-dim);align-self:center}
/* Sign in (#94). A rule of its own rather than a second .ed-share-act,
   because the row above the line and the row below it are two states of the
   panel and only ever one of them is on screen. */
.ed-auth{padding-bottom:12px;border-bottom:1px solid var(--line)}
.ed-auth[hidden]{display:none}

.ed-conflict{margin-top:12px;padding:13px 15px;border-radius:10px;
  border:1px solid var(--vw-orange);background:var(--bg)}
.ed-conflict[hidden]{display:none}
.ed-conflict-hd{margin:0 0 8px;font-size:13px;font-weight:700}
.ed-conflict ul{margin:0 0 8px;padding-left:20px;font-size:13px}
.ed-conflict li{margin:4px 0}

.ed-hist{margin-top:12px;padding:13px 15px;border-radius:10px;
  border:1px solid var(--line);background:var(--bg)}
.ed-hist[hidden]{display:none}
.ed-hist h4{margin:0 0 8px;font-size:13px}
.ed-hist-list{list-style:none;margin:0 0 8px;padding:0;
  max-height:280px;overflow-y:auto}
.ed-hist-list li{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;
  padding:7px 0;border-top:1px solid var(--line);font-size:12.5px}
.ed-hist-list li:first-child{border-top:0}
.ed-hist-list .n{font-weight:700;flex:0 0 3.5em}
/* The name typed at save time (#154) — first among the descriptive spans,
   ahead of who/when, so two saves with the same author and a close timestamp
   read apart at a glance. Absent on a blank-named save; the row falls back to
   author · date · entry count exactly as it did before this existed. */
.ed-hist-list .lbl{flex:1 1 12em;font-weight:700}
.ed-hist-list .w{flex:1 1 14em;color:var(--fg-dim)}
.ed-hist-list .now{color:var(--vw-green);font-weight:700}
/* What the CLIENT is looking at (timeline.live_revision) — a different fact
   from `.now`, which is the revision loaded in THIS editor. #155. */
.ed-hist-list .live{flex:0 0 auto;padding:2px 8px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:var(--vw-green);color:#fff}
.ed-hist-list .acts{display:flex;flex-wrap:wrap;gap:6px;flex:0 0 auto;
  margin-left:auto}

/* ══ the background, per display — issue #128 ═══════════════════════════════
   Same card as .ed-share above, because it is the same kind of thing: a
   show-level control that sits outside the entry strip. The panes are one
   per kind and only one is ever open, so the section does not change height
   as an author moves between a colour and a picture. */
.ed-bg{margin-top:18px;padding:14px 16px 15px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow)}
.ed-bg[hidden]{display:none}
.ed-bg-hd h3{margin:0}
.ed-bg-hd p{margin:5px 0 0;font-size:12.5px;color:var(--fg-dim);max-width:74ch}
.ed-bg-row{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:12px;
  align-items:flex-end}
.ed-bg-row .spacer{flex:1 1 24px}
.ed-bg-row .hint{flex:1 1 260px;margin:0 0 3px}
.ed-bg-pane{margin-top:12px}
.ed-bg-pane[hidden]{display:none}
.ed-bg input[type="color"]{width:100%;height:34px;padding:2px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface)}
.ed-bg input[type="range"]{width:100%}
/* the picture, once there is one: a wide thumbnail rather than a square,
   because a ground is judged on how it reads across a screen and a square
   crop of a panorama says nothing about that. */
.ed-bg-shot{display:flex;gap:14px;align-items:flex-start;margin-top:12px}
.ed-bg-shot[hidden]{display:none}
.ed-bg-thumb{flex:0 0 200px;height:112px;border-radius:9px;
  border:1px solid var(--line);background:var(--bg) center/cover no-repeat}
.ed-bg-name{margin:0;font-size:13px;font-weight:600;word-break:break-word}
.ed-bg-shot .hint{margin:4px 0 9px}