/* Badgekaserne — Patch-Editor (/editor/). Same Materialkiste world as styles.css; editor-only parts.
   Yellow stays for the one send action, counts and the active selection. Tabs use the language-switch chip. */

.ed-page [hidden] { display: none !important; }
.ed-vh { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }

/* header scrolls away on phones so the preview can own the top of the screen */
@media (max-width: 899px) { .ed-page .top { position: relative; } }

.ed-head { padding-top: 18px; padding-bottom: 10px; }
.ed-title { font-size: clamp(2.1rem, 10vw, 4rem); margin: 0 0 8px; }
.ed-lede { margin: 0; max-width: 44ch; color: var(--on-olive-2); }
.ed-lede strong { color: var(--paper); font-weight: 600; }

.ed-grid { display: grid; gap: 16px; padding-bottom: 48px; }
.ed-grid > * { min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  .ed-page *, .ed-page *::before { transition: none !important; }
}

/* ───────── stage: pinned preview, toolbar, views, tabs ───────── */
.ed-stage {
  position: sticky; top: 0; z-index: 15;
  margin-inline: calc(var(--gutter) * -1); padding: 8px var(--gutter) 10px;
  background: var(--olive-night);
  box-shadow: 0 10px 14px -12px rgba(0, 0, 0, .7);
}
.ed-crate { padding: 16px 14px 10px; }
.ed-crate .crate-code { position: relative; z-index: 2; }
.ed-count { white-space: nowrap; }

.ed-pv {
  width: 100%; height: clamp(180px, 33vh, 330px);
  margin: 8px auto 6px; overflow: visible;
  touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45));
}
.ed-pv:active { cursor: grabbing; }
.ed-pv:focus-visible { outline-offset: 6px; }
/* only items and handles hold the finger (editor.js cancels touchstart there); a swipe on the empty crate scrolls */

/* short phone screens: the pinned badge takes a quarter of the height; a tap on it (.is-big) or zoom gives it more */
@media (max-width: 899px) and (max-height: 760px) {
  .ed-pv, .ed-mock { height: clamp(130px, 24vh, 190px); margin: 4px auto 2px; }
  .ed-crate { padding-top: 12px; padding-bottom: 8px; }
  .ed-crate.is-big .ed-pv, .ed-crate.is-big .ed-mock { height: clamp(180px, 33vh, 330px); }
}

/* crate label: one line, the shape name gives way before the colour count does */
#ed-code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* phones: while typing, shrink the sticky preview so the soft keyboard doesn't push the field under it */
@media (max-width: 899px) {
  .ed-page:has(.ed-field input:focus) .ed-pv { height: clamp(110px, 16vh, 160px); }
}

/* preview tools under the badge: undo + redo, views, zoom */
.ed-pvbar { position: relative; z-index: 2; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ed-tool {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 44px; padding: 0 10px;
  border: 1px solid var(--olive-hi); border-radius: var(--r); background: transparent; color: var(--paper); cursor: pointer;
  font-family: var(--f-cond); font-weight: 700; font-size: .95rem; letter-spacing: .05em; text-transform: uppercase;
}
.ed-tool svg { width: 18px; height: 18px; flex: none; }
.ed-tool:hover { background: var(--olive-hi); }
.ed-tool:disabled { opacity: .4; cursor: default; background: transparent; }
.ed-tool[aria-pressed="true"] { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.ed-views { display: flex; border: 1px solid var(--olive-hi); border-radius: var(--r); overflow: hidden; }
.ed-views button {
  min-height: 44px; min-width: 44px; padding: 0 10px; border: 0; background: transparent; color: var(--on-olive-2); cursor: pointer;
  font-family: var(--f-cond); font-weight: 700; font-size: .92rem; letter-spacing: .04em; text-transform: uppercase;
}
.ed-views button + button { border-left: 1px solid var(--olive-hi); }
.ed-views button:hover { color: var(--paper); }
.ed-views button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.ed-views button:focus-visible, .ed-tool:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }

/* undo + redo sit together at the left of the preview toolbar */
.ed-hist { display: flex; gap: 6px; }
/* language switch on the editor: 44 px targets like the rest of the toolbar */
.ed-page .lang a, .ed-page .lang span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }

/* drawn mockups take the preview's place, same box */
.ed-mock { display: block; width: 100%; height: clamp(180px, 33vh, 330px); margin: 8px auto 6px; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); }
.ed-mock-badge { overflow: hidden; }

/* handle cursors; the hit circles are transparent and 44 px across on screen */
.ed-h-nwse { cursor: nwse-resize; }
.ed-h-nesw { cursor: nesw-resize; }
.ed-h-rot { cursor: grab; }

/* phones: zoom gives the badge most of the screen while placing small parts */
.ed-crate.is-zoom .ed-pv, .ed-crate.is-zoom .ed-mock { height: 62vh; }
@media (min-width: 900px) {
  .ed-zoom { display: none; }
  .ed-mock { height: min(calc(100vh - 340px), 560px); min-height: 360px; margin: 14px auto 10px; }
}

/* narrow phones: undo shows its icon only (the label stays as aria-label), so all three views fit */
@media (max-width: 399px) {
  .ed-tool span { display: none; }
  /* undo, redo, three views and zoom share 328 px at 360 */
  .ed-pvbar { gap: 4px; }
  .ed-views button { padding: 0 4px; font-size: .82rem; letter-spacing: 0; }
  .ed-hist { gap: 4px; }
}

.ed-tabs { display: flex; margin-top: 10px; border: 1px solid var(--olive-hi); border-radius: var(--r); background: var(--olive-night); }
.ed-tabs [role="tab"] {
  flex: 1 1 0; min-width: 0; min-height: 46px; padding: 0 4px;
  border: 0; background: transparent; color: var(--on-olive-2); cursor: pointer;
  font-family: var(--f-cond); font-weight: 700; font-size: .98rem; letter-spacing: .05em; text-transform: uppercase;
}
.ed-tabs [role="tab"] + [role="tab"] { border-left: 1px solid var(--olive-hi); }
.ed-tabs [role="tab"]:hover { color: var(--paper); background: var(--olive-hi); }
.ed-tabs [role="tab"][aria-selected="true"] { background: var(--paper); color: var(--ink); }
.ed-tabs [role="tab"]:focus-visible { outline-offset: -3px; }

/* ───────── panels and form controls ───────── */
.ed-panel { display: grid; gap: 22px; padding-top: 4px; }
.ed-set { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 10px; }
.ed-set legend { padding: 0; margin-bottom: 10px; font-family: var(--f-cond); font-weight: 700; font-size: 1.15rem; letter-spacing: .02em; color: var(--paper); }
.ed-set .ed-sublegend { font-size: 1rem; font-weight: 600; color: var(--on-olive-2); margin-bottom: 6px; }
.ed-note { margin: 0; color: var(--on-olive-3); font-size: .93rem; line-height: 1.45; }

/* long part names ("Lorbeerkranz-Hälfte links") must not widen the tool column */

.ed-panel, .ed-sel, .ed-list { grid-template-columns: minmax(0, 1fr); }

.ed-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.ed-pre {
  display: grid; grid-template-columns: 40px 1fr; align-items: center; gap: 10px; min-height: 64px; padding: 8px 10px;
  border: 1px solid var(--olive-hi); border-radius: var(--r); background: transparent; color: var(--on-olive-2); cursor: pointer; text-align: left;
  font-family: var(--f-cond); font-weight: 700; font-size: .98rem; letter-spacing: .03em; text-transform: uppercase; line-height: 1.1;
}
.ed-pre:hover { border-color: var(--on-olive-3); color: var(--paper); }
.ed-pre:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.ed-pre-thumb { width: 40px; height: 48px; display: block; }
@media (min-width: 900px) { .ed-presets { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ed-pre { grid-template-columns: 1fr; justify-items: center; text-align: center; } .ed-pre-thumb { width: 52px; height: 62px; } }
.ed-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ed-opts.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ed-opt { position: relative; display: block; cursor: pointer; }
.ed-opt-box {
  display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 48px; height: 100%; padding: 10px 6px;
  border: 1px solid var(--olive-hi); border-radius: var(--r); color: var(--on-olive-2); text-align: center;
  font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; line-height: 1.1;
}
.ed-opt-box svg { width: 42px; height: 46px; }
.ed-opt-box small { font-size: .85rem; font-weight: 600; text-transform: none; letter-spacing: .02em; }
.ed-opt:hover .ed-opt-box { border-color: var(--on-olive-3); color: var(--paper); }
.ed-opt input:checked + .ed-opt-box { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.ed-opt input:focus-visible + .ed-opt-box { outline: 3px solid var(--signal); outline-offset: 3px; }
.ed-num-k { font-family: var(--f-stencil); font-weight: 900; font-size: 1.7rem; line-height: 1; letter-spacing: .04em; }
.ed-num-b { font-family: var(--f-cond); font-weight: 700; font-size: 1.7rem; line-height: 1; }

/* field division options: three per row, so the labels stay readable at 360 */
.ed-divs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ed-divs .ed-opt-box { padding: 8px 4px; font-size: .88rem; letter-spacing: .02em; }
.ed-divs .ed-opt-box svg { width: 28px; height: 28px; }
.ed-divs b { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }

.ed-tipfields { display: grid; gap: 14px; }

.ed-check { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; font-weight: 500; }
.ed-check input {
  appearance: none; -webkit-appearance: none; width: 26px; height: 26px; flex: none; margin: 0;
  display: grid; place-content: center; cursor: pointer;
  border: 2px solid var(--on-olive-3); border-radius: var(--r); background: var(--olive-deep);
}
.ed-check input:checked { background: var(--paper); border-color: var(--paper); }
.ed-check input:checked::after { content: ""; width: 12px; height: 7px; border: solid var(--ink); border-width: 0 0 3px 3px; transform: translateY(-2px) rotate(-45deg); }

.ed-field { display: grid; gap: 6px; }
.ed-field > span, .ed-range > span { display: flex; justify-content: space-between; gap: 12px; font-family: var(--f-cond); font-weight: 600; font-size: 1.02rem; color: var(--on-olive-2); }
.ed-field input {
  width: 100%; min-height: 50px; padding: 0 12px;
  font: 900 1.45rem/1 var(--f-stencil); letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); background: var(--paper); border: 0; border-radius: var(--r);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .14);
}
.ed-field input:focus-visible { outline-offset: 2px; }

/* quick start select, order fields: body font, not the stencil of the badge texts */
.ed-field select {
  width: 100%; min-height: 50px; padding: 0 12px; border: 0; border-radius: var(--r);
  font: 600 1.05rem var(--f-body); color: var(--ink); background: var(--paper);
}
.ed-field-sm input { min-height: 46px; font: 500 1rem var(--f-body); letter-spacing: 0; text-transform: none; }
.ed-field-sm input::placeholder { color: var(--ink-soft); }

.ed-range { display: grid; gap: 2px; }
.ed-range output { color: var(--paper); font-family: var(--f-cond); font-weight: 700; font-variant-numeric: tabular-nums; }
.ed-range input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.ed-range input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--olive-deep); box-shadow: inset 0 1px 0 rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .06); }
.ed-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 50%; background: var(--paper); border: 3px solid var(--olive-deep); box-shadow: 0 2px 4px rgba(0, 0, 0, .45); }
.ed-range input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--olive-deep); }
.ed-range input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--paper); border: 3px solid var(--olive-deep); box-shadow: 0 2px 4px rgba(0, 0, 0, .45); }
.ed-range input[type="range"]:focus-visible { outline: none; }
.ed-range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--signal); }
.ed-range input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--signal); }

.ed-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 14px;
  border: 1px solid var(--on-olive-3); border-radius: var(--r); background: transparent; color: var(--paper); cursor: pointer;
  font-family: var(--f-cond); font-weight: 700; font-size: 1.02rem; letter-spacing: .05em; text-transform: uppercase;
}
.ed-btn:hover { background: var(--olive-hi); }
.ed-btn svg { width: 18px; height: 18px; flex: none; }
.ed-btn .ed-dot { width: 20px; height: 20px; }
.ed-btn[disabled] { opacity: .45; cursor: not-allowed; background: transparent; }
.ed-btnrow { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-dot { width: 20px; height: 20px; flex: none; }

.ed-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.ed-meta { font-family: var(--f-cond); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--signal); }

/* ───────── placed icons and text lines ───────── */
.ed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ed-list:empty { display: none; }
.ed-item { display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--olive-hi); border-radius: var(--r); }
.ed-item.is-sel { border-color: var(--paper); background: var(--olive); }
.ed-item-main {
  flex: 1; min-width: 0; min-height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 8px;
  border: 0; background: none; color: var(--paper); text-align: left; cursor: pointer; font: 500 1rem var(--f-body);
}
.ed-item-main svg { width: 34px; height: 34px; flex: none; }
.ed-item-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ed-icobtn { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: 0; border-radius: var(--r); background: none; color: var(--on-olive-2); cursor: pointer; }
.ed-icobtn:hover { background: var(--olive-hi); color: var(--paper); }
.ed-icobtn:disabled { opacity: .3; cursor: default; background: none; }
.ed-icobtn svg { width: 22px; height: 22px; }
.ed-icobtn .ed-dot { width: 24px; height: 24px; }

.ed-sel { display: grid; gap: 6px; padding: 14px 14px 12px; background: var(--olive-deep); border-radius: var(--r); }
.ed-sel-name { font-family: var(--f-cond); font-weight: 700; font-size: 1.15rem; letter-spacing: .03em; text-transform: uppercase; }

.ed-line { padding-left: 12px; border-left: 3px solid var(--olive-hi); }
.ed-line.is-sel { border-left-color: var(--paper); }

.ed-sel-name { overflow-wrap: anywhere; }

/* compact placed-icon rows on phones: 8 rows with 4 tools each */
@media (max-width: 420px) {
  .ed-item { gap: 0; padding: 2px; }
  .ed-item-main { gap: 8px; padding: 0 4px; font-size: .92rem; }
  .ed-item-main svg { width: 28px; height: 28px; }
  .ed-list { gap: 4px; }
}

/* ───────── colours ───────── */
.ed-targets { display: flex; flex-wrap: wrap; gap: 6px; }
.ed-chip { position: relative; }
.ed-chip-box {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px 0 9px;
  border: 1px solid var(--olive-hi); border-radius: var(--r); cursor: pointer; color: var(--on-olive-2);
  font-family: var(--f-cond); font-weight: 700; letter-spacing: .03em;
}
.ed-chip:hover .ed-chip-box { color: var(--paper); border-color: var(--on-olive-3); }
.ed-chip input:checked + .ed-chip-box { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.ed-chip input:focus-visible + .ed-chip-box { outline: 3px solid var(--signal); outline-offset: 3px; }

.ed-for { display: flex; align-items: center; gap: 8px; margin: 2px 0 -2px; font-family: var(--f-cond); font-weight: 700; font-size: 1.02rem; letter-spacing: .03em; color: var(--paper); }
.ed-for .ed-dot { width: 22px; height: 22px; }
.ed-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 6px; }
.ed-sw { position: relative; }
.ed-sw-box {
  display: grid; justify-items: center; align-content: start; gap: 5px; min-height: 44px; height: 100%; padding: 8px 3px 7px;
  border: 1px solid transparent; border-radius: var(--r); cursor: pointer; text-align: center;
  font-size: .8rem; line-height: 1.15; color: var(--on-olive-2);
}
.ed-sw-box svg { width: 38px; height: 38px; }
.ed-sw:hover .ed-sw-box { border-color: var(--olive-hi); }
.ed-sw-check { display: none; }
.ed-sw input:checked + .ed-sw-box { border-color: var(--paper); background: var(--olive); color: var(--paper); }
.ed-sw input:checked + .ed-sw-box .ed-sw-check { display: inline; }
.ed-sw input:focus-visible + .ed-sw-box { outline: 3px solid var(--signal); outline-offset: 2px; }

/* unit colour chips on the tip */
.ed-units { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.ed-unit {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; cursor: pointer; text-align: left;
  border: 1px solid var(--olive-hi); border-radius: var(--r); background: none; color: var(--paper); font: 500 .9rem/1.2 var(--f-body);
}
.ed-unit .ed-dot { flex: none; }
.ed-unit:hover { border-color: var(--on-olive-3); }
.ed-unit[aria-pressed="true"] { border-color: var(--paper); background: var(--olive); }

/* ───────── send: slip, order, variants ───────── */
.ed-send { gap: 18px; }
.ed-slip { padding-top: 18px; margin-top: 8px; }
.ed-slip .stamp { left: auto; right: 14px; }
.ed-slip th {
  width: 6.5em; padding: 7px 10px 7px 0; text-align: left; vertical-align: baseline;
  border-bottom: 1px dashed var(--paper-rule);
  font-family: var(--f-cond); font-weight: 700; font-size: .92rem; letter-spacing: .06em; text-transform: uppercase;
}
.ed-slip td { font-weight: 500; overflow-wrap: anywhere; }
.ed-sketch { font-family: var(--f-cond); font-weight: 700; font-size: 1.3rem; line-height: 1.3; letter-spacing: .01em; }
.ed-send .tag { justify-self: start; }
.ed-actions { display: flex; flex-wrap: wrap; gap: 0 22px; }
.ed-linkbtn { min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 1rem; text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.ed-status { min-height: 1.5em; color: var(--paper); font-weight: 500; }

.ed-order-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 420px) { .ed-order-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }
.ed-qty { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ed-qchip {
  min-height: 46px; padding: 0 6px; border: 1px solid var(--olive-hi); border-radius: var(--r); background: transparent; color: var(--on-olive-2); cursor: pointer;
  font-family: var(--f-cond); font-weight: 700; font-size: 1.1rem; letter-spacing: .04em; text-transform: uppercase;
}
.ed-qchip:hover { color: var(--paper); border-color: var(--on-olive-3); }
.ed-qchip[aria-pressed="true"] { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.ed-qchip:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.ed-price { font-family: var(--f-cond); font-weight: 700; font-size: 1.12rem; line-height: 1.35; color: var(--paper); }
.ed-order a, .ed-photo a { color: var(--paper); }

/* variants */
.ed-varlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ed-varlist:empty { display: none; }
.ed-var { display: flex; align-items: center; gap: 12px; padding: 4px 4px 4px 8px; border: 1px solid var(--olive-hi); border-radius: var(--r); }
.ed-var b { flex: 1; font-family: var(--f-cond); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.ed-var-thumb { width: 34px; height: 44px; flex: none; }
.ed-vars .ed-btn { justify-self: start; }
.ed-photo { color: var(--on-olive-2); }

/* ───────── icon sheet ───────── */
.ed-sheet {
  width: 100%; max-width: 100%; max-height: 84vh; margin: auto 0 0; padding: 0;
  border: 0; border-radius: 10px 10px 0 0; background: var(--olive-deep); color: var(--paper);
  box-shadow: 0 -14px 34px rgba(0, 0, 0, .55);
}
.ed-sheet[open] { display: flex; flex-direction: column; }
.ed-sheet::backdrop { background: rgba(10, 12, 8, .68); }
.ed-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 6px 0 16px; }
.ed-sheet-head h2 { margin: 0; font-size: 1.35rem; }
.ed-cats { flex: none; display: flex; gap: 6px; overflow-x: auto; padding: 8px 16px 12px; scrollbar-width: thin; }
.ed-cats button {
  flex: none; min-height: 44px; padding: 0 14px; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--olive-hi); border-radius: var(--r); background: transparent; color: var(--on-olive-2);
  font-family: var(--f-cond); font-weight: 700; font-size: .98rem; letter-spacing: .04em; text-transform: uppercase;
}
.ed-cats button:hover { color: var(--paper); border-color: var(--on-olive-3); }
.ed-cats button[aria-pressed="true"] { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.ed-icongrid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); align-content: start; gap: 8px; padding: 0 16px 12px;
}
.ed-pick {
  display: grid; justify-items: center; align-content: start; gap: 6px; min-height: 44px; padding: 12px 4px 10px;
  border: 1px solid var(--enamel-line); border-radius: var(--r); background: var(--olive); color: var(--paper); cursor: pointer;
  font: 500 .82rem/1.2 var(--f-body); text-align: center;
}
.ed-pick svg { width: 50px; height: 50px; }
.ed-pick:hover { border-color: var(--paper); }
.ed-pick.is-part { border-style: dashed; }
.ed-pick-group {
  grid-column: 1 / -1; margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--olive-hi);
  font-family: var(--f-cond); font-weight: 700; font-size: .95rem; letter-spacing: .05em; text-transform: uppercase; color: var(--on-olive-2);
}
.ed-pick-group:first-child { margin-top: 0; border-top: 0; padding-top: 0; }

/* group headings make the sheet long enough that auto rows got squeezed to their 44px minimum */
.ed-icongrid { grid-auto-rows: max-content; }
.ed-pick span { max-width: 100%; hyphens: auto; overflow-wrap: anywhere; }

/* icon search */
.ed-search { flex: none; display: flex; align-items: center; gap: 10px; padding: 8px 16px 0; }
.ed-search input {
  flex: 1; min-width: 0; min-height: 46px; padding: 0 12px; border: 0; border-radius: var(--r);
  font: 500 1rem var(--f-body); color: var(--ink); background: var(--paper);
}
.ed-search input:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.ed-search .ed-meta:empty { display: none; }
.ed-pick-none { grid-column: 1 / -1; padding: 12px 0; }

.ed-sheet-foot { flex: none; padding: 4px 16px 16px; font-size: .85rem; }

@media (min-width: 700px) {
  .ed-sheet { max-width: 680px; max-height: 80vh; margin: auto; border-radius: 6px; }
}

/* ───────── desktop: preview left, tools right ───────── */
@media (min-width: 900px) {
  .ed-head { padding-top: 40px; padding-bottom: 22px; }
  .ed-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    grid-template-areas: "pv tabs" "pv tools";
    grid-template-rows: auto 1fr;
    column-gap: 40px; row-gap: 18px; align-items: start; padding-bottom: 80px;
  }
  .ed-stage { display: contents; }
  .ed-crate { grid-area: pv; position: sticky; top: 76px; padding: 24px 28px 16px; }
  .ed-tabs { grid-area: tabs; margin-top: 0; }
  .ed-tools { grid-area: tools; }
  .ed-pv { height: min(calc(100vh - 340px), 560px); min-height: 360px; margin: 14px auto 10px; }
}