/* ============================================================
   Swiftpoint Hub — OLED Editor v2 (Pro Layout)

   Full-viewport pixel editor for the Z3's 64×32 monochrome OLED.

   Colours, the reset and the site header come from the shared
   layers (tokens.css, base.css, hdr.css), loaded before this
   file. The simulated display colours (--oled-on / --oled-off /
   --oled-canvas) are fixed in tokens.css because they imitate the
   physical screen, not the site's theme.
   ============================================================ */

/* This is a dense tool surface, so the OLED panels get tighter corners
   and nothing else does. Scoped to the app region rather than to <body>:
   on <body> it would also restyle the header's own controls, which are
   shared with every other page and must look the same on all of them. */
.workspace,
.frame-strip,
.keyframe-panel,
.status-bar,
.modal-backdrop {
  --r-sm: 5px;
  --r-md: 8px;
}

html,
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-body);
}

/* ── Header ── */
/* Owned entirely by css/hdr.css: the menu bar, the tool strip and the
   app-shell treatment (solid fill, no blur) are all shared, and the
   OLED editor gets the same bar as the reading pages. Only the page's
   own widgets are added to the strip. */

/* ── Tool strip: OLED-only widgets ──
   Every plain button in the strip is a `.tbar-btn` from the shared
   toolbar, exactly as the Profile Builder writes them. What is left
   here are the three controls that are genuinely specific to a pixel
   editor: the ON/OFF ink split, the text field, and the two menus. */

/* ── Text input ── */
.text-field,
.tbar-input[type='text'] {
  width: 96px;
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.text-field::placeholder,
.tbar-input[type='text']::placeholder {
  text-transform: none;
}

/* ── Ink toggle ── */
.ink-split {
  display: flex;
  height: 28px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface);
}
.ink-half {
  display: flex; align-items: center; gap: 4px; padding: 0 9px;
  background: transparent; border: none; color: var(--text-3);
  font-family: var(--font-mono); font-size: 0.65rem; font-weight: 600;
  letter-spacing: 0.1em; cursor: pointer; transition: all var(--t-fast);
}
.ink-half svg { width: 12px; height: 12px; flex-shrink: 0; }
.ink-half:first-child { border-right: 1px solid var(--line); }
.ink-half:hover { color: var(--text); }
.ink-half.active.ink-on { background: rgba(124, 227, 227, 0.12); color: var(--oled-on); }
.ink-half.active.ink-off { background: var(--surface-2); color: var(--text-2); }

/* ── Panel widgets ──
   `.tb-label` and `.tb-opt` are the small caption / checkbox-and-select
   pairs used by the OLED side panels, the timeline and the modals —
   the strip itself uses the shared `.tbar-label` / `.tbar-opt`. */
.tb-label {
  font-size: 0.55rem;
  font-family: var(--font-mono);
  color: var(--text-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tb-opt {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.6rem;
  font-family: var(--font-mono);
  color: var(--text-3);
  cursor: pointer;
  white-space: nowrap;
}
.tb-opt input[type='checkbox'] { accent-color: var(--accent); width: 12px; height: 12px; margin: 0; }
.tb-opt input[type='range'] { accent-color: var(--accent); }
.tb-opt select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 3px;
  font-size: 0.65rem;
  font-family: var(--font-mono);
  cursor: pointer;
}

/* One focus ring for the local widgets. The shared `.tbar-btn` has its
   own; these are the ones that live outside the strip. */
.ed-btn:focus-visible,
.ex-btn:focus-visible,
.ink-half:focus-visible,
.frame-thumb:focus-visible,
.zoom-btn:focus-visible,
.lp-btn:focus-visible,
.text-field:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* ── Examples menu ── */
.example-menu-wrap { position: relative; }
.example-dropdown {
  /* fixed, not absolute: the tool strip is a horizontal scroller and
     would clip an absolute child. js/oled-editor.js sets top/left from
     the button's box on open. */
  position: fixed;
  top: 0;
  left: 0;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-md); padding: 6px; z-index: var(--z-toast);
  box-shadow: var(--shadow-lg); min-width: 200px;
}
.example-item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; border-radius: var(--r-sm);
  color: var(--text-dim); padding: 8px 10px; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.72rem; transition: all 0.12s ease;
}
.example-item:hover { background: var(--lime-dim); color: var(--lime); }

/* ── Symbol menu ── */
.symbol-menu-wrap { position: relative; }
.symbol-dropdown {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px; z-index: 200; box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
  max-height: 80vh; overflow: auto;
}
.symbol-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin-bottom: 8px; }
.symbol-item {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px;
  cursor: pointer; transition: all 0.12s ease; padding: 2px;
}
.symbol-item canvas { image-rendering: pixelated; image-rendering: crisp-edges; width: 16px; height: 16px; }
.symbol-item:hover { border-color: var(--lime); background: rgba(198, 245, 66, 0.05); }
.symbol-item.active { border-color: var(--lime); background: var(--lime-dim); }
.symbol-size-row { display: flex; align-items: center; gap: 6px; padding-top: 6px; border-top: 1px solid var(--line); }

/* ── Ed / Ex buttons ── */
.ed-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  padding: 4px 8px; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--text-dim);
  font-size: 0.63rem; font-family: var(--font-mono); cursor: pointer;
  transition: all 0.12s ease; white-space: nowrap;
}
.ed-btn:hover:not(:disabled) { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.ed-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.ed-btn.danger { color: var(--text-faint); }
.ed-btn.danger:hover:not(:disabled) { color: var(--danger); border-color: rgba(255, 107, 94, 0.3); }

.ex-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 3px;
  padding: 4px 8px; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-sm); color: var(--text-dim);
  font-size: 0.63rem; font-family: var(--font-mono); cursor: pointer;
  transition: all 0.12s ease; white-space: nowrap;
}
.ex-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.ex-btn.primary { background: var(--lime-dim); border-color: rgba(198, 245, 66, 0.25); color: var(--lime); }
.ex-btn.primary:hover { background: rgba(198, 245, 66, 0.2); }

/* ── Workspace (canvas + layer panel) ── */
.workspace {
  flex: 1;
  display: flex;
  min-height: 0;
  overflow: hidden;
}

/* ── Canvas area ── */
.canvas-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  min-width: 0;
  overflow: hidden;
}
.canvas-area.zoomed { overflow: auto; }
.canvas-frame {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: calc((100vh - 200px) * 2);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--oled-off);
  box-shadow:
    0 0 0 1px rgba(124, 227, 227, 0.22),
    0 0 0 6px rgba(20, 22, 24, 0.9),
    0 0 90px rgba(124, 227, 227, 0.05),
    0 10px 44px rgba(0, 0, 0, 0.55);
  cursor: crosshair;
  flex-shrink: 0;
}
.canvas-frame canvas {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  image-rendering: pixelated; image-rendering: crisp-edges;
}
#oled-canvas { z-index: 1; }
#oled-overlay { z-index: 2; pointer-events: none; }
.guide-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.guide-v, .guide-h { position: absolute; display: none; }
.guide-v { top: 0; bottom: 0; left: 50%; width: 0; border-left: 1.5px dashed rgba(198, 245, 66, 0.7); }
.guide-h { left: 0; right: 0; top: 50%; height: 0; border-top: 1.5px dashed rgba(198, 245, 66, 0.7); }
.guide-v.visible, .guide-h.visible { display: block; }
.grid-overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  z-index: 3; pointer-events: none; background-color: transparent;
  background-image:
    repeating-linear-gradient(to right, rgba(124, 227, 227, 0.2) 0, rgba(124, 227, 227, 0.2) 1px, transparent 1px, transparent),
    repeating-linear-gradient(to bottom, rgba(124, 227, 227, 0.2) 0, rgba(124, 227, 227, 0.2) 1px, transparent 1px, transparent);
}
.frame-bezel-glow {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 0px, rgba(255, 255, 255, 0.035) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: overlay;
}

/* ── Layer Panel (right sidebar) ── */
.layer-panel {
  width: 200px;
  flex-shrink: 0;
  background: var(--surface);
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.lp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.2);
}
.lp-actions { display: flex; gap: 2px; }
.lp-btn {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text-dim);
  font-size: 0.7rem;
  cursor: pointer;
  transition: all 0.12s ease;
  padding: 0;
}
.lp-btn:hover { color: var(--text); border-color: var(--line-strong); }
.lp-btn.danger:hover { color: var(--danger); }
.lp-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
}

/* Layer items */
.layer-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.12s ease;
  margin-bottom: 2px;
}
.layer-item:hover { background: rgba(255, 255, 255, 0.04); }
.layer-item.active {
  background: var(--lime-dim);
  border-color: rgba(198, 245, 66, 0.3);
}
.layer-thumb {
  width: 40px;
  height: 22px;
  background: var(--oled-off);
  border: 1px solid var(--line);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.layer-thumb canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}
.layer-info {
  flex: 1;
  min-width: 0;
}
.layer-name {
  font-size: 0.6rem;
  font-family: var(--font-mono);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.layer-obj-count {
  font-size: 0.5rem;
  font-family: var(--font-mono);
  color: var(--text-faint);
}
.layer-vis {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 0.7rem;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.layer-vis:hover { color: var(--text); }
.layer-vis.hidden { opacity: 0.3; }
.layer-lock {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 0.6rem;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.layer-lock:hover { color: var(--text); }
.layer-lock.locked { color: var(--danger); }

/* Object properties panel */
.obj-props {
  border-top: 1px solid var(--line);
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.15);
}
.obj-prop-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  font-size: 0.6rem;
  font-family: var(--font-mono);
}
.obj-prop-row label { color: var(--text-faint); min-width: 24px; }
.obj-prop-row span { color: var(--text); }
.obj-prop-row input[type="number"] {
  width: 45px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--text);
  font-size: 0.6rem;
  font-family: var(--font-mono);
  padding: 2px 4px;
}
.obj-prop-row input[type="number"]:focus { outline: 1px solid var(--lime); }
.obj-prop-row select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1px 3px;
  font-size: 0.6rem;
  font-family: var(--font-mono);
  cursor: pointer;
}

/* ── Frame strip ── */
.frame-strip {
  flex-shrink: 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: 5px 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.frame-strip-controls { display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
.frame-list {
  display: flex; align-items: center; gap: 5px;
  overflow-x: auto; flex: 1 1 auto; min-width: 60px; padding: 2px 0;
}
.frame-thumb {
  position: relative; flex-shrink: 0; width: 40px; height: 24px;
  padding: 0; background: var(--oled-off); border: 1px solid var(--line);
  border-radius: 3px; cursor: pointer; overflow: hidden;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.frame-thumb canvas { width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.frame-thumb span {
  position: absolute; bottom: 1px; right: 2px;
  font-family: var(--font-mono); font-size: 0.45rem;
  color: var(--on-solid); opacity: 0.6; text-shadow: 0 0 2px var(--oled-off);
}
.frame-thumb:hover { border-color: var(--line-strong); }
.frame-thumb.active { border-color: var(--lime); box-shadow: 0 0 0 1px rgba(198, 245, 66, 0.3), 0 0 8px rgba(198, 245, 66, 0.2); }

/* ── Keyframe panel ── */
.keyframe-panel {
  flex-shrink: 0; background: var(--surface); border-top: 1px solid var(--line);
  padding: 5px 10px; display: none; flex-direction: column; gap: 5px;
}
.keyframe-panel.visible { display: flex; }
.kf-header { display: flex; align-items: center; gap: 4px; }
.kf-timeline {
  display: flex; align-items: center; gap: 2px; overflow-x: auto; padding: 3px 0; min-height: 26px;
}
.kf-thumb {
  position: relative; flex-shrink: 0; width: 28px; height: 18px;
  padding: 0; background: var(--oled-off); border: 1px solid var(--line);
  border-radius: 2px; cursor: pointer; transition: all 0.12s ease;
}
.kf-thumb canvas { width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.kf-thumb.is-key { border-color: var(--lime); box-shadow: 0 0 0 1px rgba(198, 245, 66, 0.3); }
.kf-thumb.is-key::after {
  content: ''; position: absolute; top: 1px; right: 1px;
  width: 4px; height: 4px; background: var(--lime); border-radius: 50%;
}
.kf-thumb.active { border-color: var(--lime); box-shadow: 0 0 6px rgba(198, 245, 66, 0.4); }
.kf-controls { display: flex; align-items: center; gap: 5px; }

/* ── Status bar ── */
.status-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 10px; background: var(--surface); border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-faint); flex-shrink: 0;
}
.sb-sep { color: var(--line-strong); }
.sb-spacer { flex: 1; }
.sb-link { color: var(--text-faint); text-decoration: none; transition: color 0.15s; }
.sb-link:hover { color: var(--lime); }
.sb-btn {
  background: none; border: none; font-family: var(--font-mono);
  font-size: 0.6rem; cursor: pointer; padding: 0;
}
.export-msg { color: var(--lime); }
.zoom-btn {
  width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--line); border-radius: 3px;
  color: var(--text-dim); font-family: var(--font-mono); font-size: 0.65rem; line-height: 1;
  cursor: pointer; padding: 0;
}
.zoom-btn:hover { color: var(--text); border-color: var(--line-strong); }

/* ── Modals ── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.6); z-index: 199; }
#symbol-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 199; }
.modal-panel {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 16px 18px; z-index: 200; box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
  min-width: 240px; max-width: 90vw;
}
.modal-panel h3 {
  margin: 0 0 10px; font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--lime);
}
.modal-row { margin-bottom: 8px; gap: 6px !important; }
.modal-row input[type="range"] { flex: 1; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.import-preview {
  display: block; width: 256px; height: 128px; max-width: 100%;
  image-rendering: pixelated; image-rendering: crisp-edges;
  background: var(--oled-off); border: 1px solid var(--line); border-radius: 4px; margin-bottom: 10px;
}
.shortcuts-panel { max-width: 460px; }
.shortcuts-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 5px 16px;
  font-family: var(--font-mono); font-size: 0.65rem; color: var(--text-dim);
}
.shortcuts-grid kbd {
  display: inline-block; background: var(--bg); border: 1px solid var(--line-strong);
  border-radius: 3px; padding: 1px 4px; font-family: var(--font-mono); font-size: 0.6rem; color: var(--text);
}

/* ── .spcf profile inject modal ── */
.spcf-panel {
  width: 560px; max-width: 92vw; max-height: 86vh;
  display: flex; flex-direction: column; gap: 8px;
}
.spcf-panel h3 { margin: 0 0 4px; flex-shrink: 0; }
.spcf-drop {
  border: 1px dashed var(--line-strong); border-radius: var(--r-md);
  padding: 14px 16px; display: flex; flex-direction: column; align-items: center;
  gap: 8px; background: rgba(0, 0, 0, 0.15); text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease; flex-shrink: 0;
}
.spcf-drop.dragover { border-color: var(--lime); background: var(--lime-dim); }
.spcf-hint { margin: 0; font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-faint); }
.spcf-hint b { color: var(--text-dim); font-weight: 600; }
.spcf-drop-actions { display: flex; gap: 8px; }
.spcf-meta { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-dim); flex-shrink: 0; }
.spcf-groups {
  overflow-y: auto; max-height: 300px; min-height: 0;
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 8px; background: rgba(0, 0, 0, 0.12); flex: 1 1 auto;
}
.spcf-group + .spcf-group { margin-top: 10px; }
.spcf-group-name {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 0.6rem; color: var(--lime);
  text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 2px 3px;
}
.spcf-g-extra { color: var(--text-faint); text-transform: none; letter-spacing: 0; }
.spcf-map {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 5px 8px; margin: 3px 0; cursor: pointer; text-align: left;
  font-family: var(--font-mono); transition: all 0.12s ease;
}
.spcf-map:hover { border-color: var(--line-strong); background: rgba(255, 255, 255, 0.03); }
.spcf-map.active {
  border-color: var(--lime); background: var(--lime-dim);
  box-shadow: 0 0 0 1px var(--lime), 0 0 12px rgba(198, 245, 66, 0.25);
}
.spcf-map-btn { font-size: 0.66rem; color: var(--text); font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.spcf-map-badge {
  font-size: 0.5rem; color: var(--lime); border: 1px solid rgba(198, 245, 66, 0.3);
  background: var(--lime-dim); border-radius: 3px; padding: 0 4px; flex-shrink: 0;
}
.spcf-map-act {
  flex: 1; min-width: 0; font-size: 0.58rem; color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right;
}
.spcf-empty { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-faint); padding: 4px; }
.spcf-opts {
  border-top: 1px solid var(--line); padding-top: 8px;
  display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;
}
.spcf-opts-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-dim); }
.spcf-opt-label { color: var(--text-faint); text-transform: uppercase; font-size: 0.55rem; letter-spacing: 0.06em; }
.spcf-radio, .spcf-checkbox { display: flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
.spcf-radio input, .spcf-checkbox input { accent-color: var(--lime); width: 12px; height: 12px; margin: 0; }
.spcf-frames-note { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-faint); }
.spcf-selected-note { font-family: var(--font-mono); font-size: 0.62rem; color: var(--lime); }
.spcf-error { font-family: var(--font-mono); font-size: 0.62rem; color: var(--danger); white-space: pre-wrap; }

/* ── Scrollbar styling ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ── Responsive ──
   Only the OLED's own panels. The header and the tool strip respond on
   their own terms in css/hdr.css. */
@media (max-width: 900px) {
  .layer-panel { width: 160px; }
  .tb-label { display: none; }
  /* Icon-only tool buttons, so the strip fits more of them on screen.
     Only the ones that have an icon to fall back on — a word-only
     button would otherwise go blank. */
  .tbar-btn:has(svg) > span { display: none; }
  .tbar-btn:has(svg) { padding: 0 8px; }
}
@media (max-width: 700px) {
  .layer-panel { display: none; }
}