/* Theme Editor — Panel UI (TE.1, 2026-05-19)
   Tokens drive the editor itself, so it reads the active theme too. */

/* TE.3 — Draggable + resizable panel.  Default origin top-right.
   Saved position overrides via inline left/top/width/height. */
.theme-editor-host {
  position: fixed;
  top: 64px;
  right: 0;
  z-index: 12000;
  width: min(440px, 92vw);
  height: min(720px, 92vh);
  display: flex;
  flex-direction: column;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line);
  box-shadow: var(--neon-shadow-panel-glow, 0 0 0 1px rgba(0, 0, 0, 0.5));
  font-family: var(--neon-font-family-sans, system-ui, sans-serif);
  resize: none;
  overflow: hidden;
}

.theme-editor-host[hidden] {
  display: none;
}

.theme-editor-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.theme-editor-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--neon-spacing-md, 8px);
  padding: var(--neon-spacing-md, 8px) var(--neon-spacing-lg, 12px);
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}

.theme-editor-title {
  margin: 0;
  font-family: var(--neon-font-family-mono, ui-monospace, monospace);
  font-size: var(--neon-font-size-md, 12px);
  font-weight: var(--neon-font-weight-bold, 700);
  letter-spacing: var(--neon-font-letter-spacing-caps, 0.08em);
  text-transform: uppercase;
}

.theme-editor-close {
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  font-weight: var(--neon-font-weight-bold, 700);
}

.theme-editor-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--neon-spacing-sm, 4px);
  padding: var(--neon-spacing-md, 8px) var(--neon-spacing-lg, 12px);
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
  align-items: center;
}

.theme-editor-actions .ghost-button {
  min-height: 28px;
  padding: 0 8px;
  font-size: var(--neon-font-size-sm, 11px);
}

.theme-editor-base-theme {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--neon-font-size-sm, 11px);
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: var(--neon-font-letter-spacing-caps, 0.08em);
}

.theme-editor-base-theme select {
  min-height: 26px;
  padding: 0 6px;
  font-family: var(--neon-font-family-mono, ui-monospace, monospace);
  font-size: var(--neon-font-size-sm, 11px);
  background: var(--tracker-cell-2);
  color: var(--text);
  border: 1px solid var(--line);
}

.theme-editor-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--neon-spacing-md, 8px) var(--neon-spacing-lg, 12px);
}

/* P5.e — Search/filter bar.  Sits above the active-theme bar.
   Live filter against token name + human label + group label. */
.theme-editor-search-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px var(--neon-spacing-lg, 12px);
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}

.theme-editor-search-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 28px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--tracker-cell);
  color: var(--text);
  font-family: var(--neon-font-family-mono, ui-monospace, monospace);
  font-size: var(--neon-font-size-sm, 11px);
}

.theme-editor-search-input:focus-visible {
  outline: 1px solid var(--role-accent-cursor);
  outline-offset: -1px;
  border-color: var(--role-accent-cursor);
}

.theme-editor-search-count {
  flex: 0 0 auto;
  font-family: var(--neon-font-family-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--role-text-muted);
  white-space: nowrap;
}

.theme-editor-search-count--filtered {
  color: var(--role-accent-armed);
}

/* P5.m — Recent-swatches strip.  Sits below the search bar.  Each
   swatch is a click-to-copy chip; the "just-copied" pulse flashes
   the focus ring so the user sees the action landed. */
.theme-editor-recent-strip {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px var(--neon-spacing-lg, 12px);
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}

.theme-editor-recent-label {
  flex: 0 0 auto;
  font-family: var(--neon-font-family-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--role-text-muted);
}

.theme-editor-recent-swatch {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: 2px;
  cursor: pointer;
  appearance: none;
  padding: 0;
  transition: transform 120ms ease, border-color 120ms ease;
}

.theme-editor-recent-swatch:hover {
  transform: scale(1.15);
  border-color: var(--role-line-strong);
}

.theme-editor-recent-swatch.just-copied {
  outline: 2px solid var(--role-accent-armed);
  outline-offset: 1px;
}

/* P5.f — "Changed only" toggle chip in the search bar.  Inactive
   reads as a muted ghost; active uses the armed accent so the user
   sees the filter is narrowing the view. */
.theme-editor-search-chip {
  flex: 0 0 auto;
  appearance: none;
  cursor: pointer;
  padding: 2px 8px;
  min-height: 24px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--role-text-muted);
  font-family: var(--neon-font-family-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0;
  white-space: nowrap;
}

.theme-editor-search-chip:hover {
  color: var(--role-text-primary);
  border-color: var(--role-line-strong);
}

.theme-editor-search-chip.is-active {
  color: var(--role-accent-armed);
  border-color: var(--role-accent-armed);
  background: color-mix(in srgb, var(--role-accent-armed) 14%, transparent);
}

/* P5.c — Active-theme bar.  Sits between the actions strip and the
   token body.  Shows the currently-loaded theme + per-theme actions
   (rename / duplicate / delete for customs, reset for dirty base). */
.theme-editor-theme-bar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 6px var(--neon-spacing-lg, 12px);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent 60%),
    var(--panel);
  font-size: var(--neon-font-size-sm, 11px);
}

.theme-editor-theme-bar-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border: 1px solid var(--neon-color-accent, var(--cyan));
  color: var(--neon-color-accent, var(--cyan));
  font-family: var(--neon-font-family-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.theme-editor-theme-bar-name {
  font-family: var(--neon-font-family-mono, ui-monospace, monospace);
  font-size: var(--neon-font-size-md, 12px);
  font-weight: 800;
  color: var(--text);
}

.theme-editor-theme-bar-dirty {
  font-style: normal;
  font-weight: 600;
  font-size: 10px;
  color: var(--amber);
  margin-left: 4px;
}

.theme-editor-theme-bar-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}

.theme-editor-theme-bar-btn.ghost-button {
  min-height: 24px;
  padding: 0 7px;
  font-size: 10px;
  letter-spacing: 0.04em;
}

.theme-editor-theme-bar-btn--danger.ghost-button {
  /* TH.8 (2026-05-21): theme-aware via --role-accent-record so Sand
     resolves to its own danger ink (#d91c22) instead of the neon
     fallback #ff5a5a (state-rule lint surfaced this). */
  border-color: color-mix(in srgb, var(--role-accent-record) 60%, var(--line));
  color: var(--role-accent-record);
}

.theme-editor-theme-bar-btn--danger.ghost-button:hover,
.theme-editor-theme-bar-btn--danger.ghost-button:focus-visible {
  background: color-mix(in srgb, var(--role-accent-record) 14%, transparent);
}

.theme-editor-group {
  margin: 0 0 var(--neon-spacing-lg, 12px);
}

.theme-editor-group-head {
  /* P5.h — Group head is now a clickable button; reset native chrome
     and lay out the chevron + label inline. */
  appearance: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 var(--neon-spacing-sm, 4px);
  padding: 2px 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: var(--neon-font-family-mono, ui-monospace, monospace);
  font-size: var(--neon-font-size-sm, 11px);
  font-weight: var(--neon-font-weight-bold, 700);
  letter-spacing: var(--neon-font-letter-spacing-caps, 0.08em);
  text-transform: uppercase;
  color: var(--neon-color-accent, var(--cyan));
}

.theme-editor-group-head:hover {
  color: var(--role-text-bright, var(--text));
}

.theme-editor-group-chev {
  display: inline-block;
  width: 10px;
  font-size: 10px;
  transition: transform 120ms ease;
}

/* P5.h — Collapsed state.  Chevron rotates, body rows hide.  We
   keep the head visible so the user can toggle back. */
.theme-editor-group.is-collapsed .theme-editor-group-chev {
  transform: rotate(-90deg);
}

.theme-editor-group.is-collapsed .theme-editor-row {
  display: none;
}

.theme-editor-row {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(160px, 1.4fr);
  gap: 6px;
  align-items: center;
  padding: 4px 0;
  padding-left: 10px;
  border-bottom: 1px dashed var(--line);
  font-size: var(--neon-font-size-sm, 11px);
  position: relative;
}

/* P5.g — "Modified" dot rendered as a pseudo-element on the row's
   left gutter.  Invisible by default; lights up in the armed-amber
   accent when the row's token is in overrideStore.  Lets the user
   scan the whole body and instantly see which rows they've edited
   without having to toggle "Changed only". */
.theme-editor-row::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
  transform: translateY(-50%);
  transition: background 120ms ease;
  pointer-events: none;
}

.theme-editor-row.is-modified::before {
  background: var(--role-accent-armed);
  box-shadow: 0 0 4px var(--role-accent-armed);
}

.theme-editor-row-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* TE.8 — Row label = the primary readable element (13 px bold).
   The --neon-* code below is supplementary, muted, 10 px. */
.theme-editor-row-label-text {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
  color: var(--text);
}

.theme-editor-row-label-code {
  font-family: var(--neon-font-family-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--neon-color-text-muted, var(--muted));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.7;
}

.theme-editor-row-input {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

/* P5.c — Live colour swatch shown to the left of every colour input.
   Checkerboard background hints transparency for rgba tokens. */
.theme-editor-row-swatch {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(0, 0, 0, 0.45);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  background-color: transparent;
  background-image:
    linear-gradient(45deg, rgba(255, 255, 255, 0.18) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.18) 75%, rgba(255, 255, 255, 0.18)),
    linear-gradient(45deg, rgba(255, 255, 255, 0.18) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.18) 75%, rgba(255, 255, 255, 0.18));
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  /* The actual colour comes from inline `background-color`, which
     sits ON TOP of the checkerboard.  Solid colours fully cover it;
     translucent rgba shows the pattern through.  Same effect every
     modern browser. */
  background-blend-mode: normal;
}

/* P5.l — WCAG contrast badge.  Appended to text-role rows so the
   designer sees the AA/AAA grade at a glance while editing.  Sits
   in the row's right gutter; small mono pill with grade-coloured
   fill. */
.theme-editor-contrast-badge {
  align-self: center;
  justify-self: end;
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  border-radius: 2px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--role-text-muted);
  font-family: var(--neon-font-family-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  pointer-events: auto;
  cursor: help;
}

.theme-editor-contrast-badge[data-grade="aaa"] {
  color: var(--role-accent-success);
  border-color: var(--role-accent-success);
  background: color-mix(in srgb, var(--role-accent-success) 12%, transparent);
}

.theme-editor-contrast-badge[data-grade="aa"] {
  color: var(--role-accent-info);
  border-color: var(--role-accent-info);
  background: color-mix(in srgb, var(--role-accent-info) 12%, transparent);
}

.theme-editor-contrast-badge[data-grade="aa-large"] {
  color: var(--role-accent-armed);
  border-color: var(--role-accent-armed);
  background: color-mix(in srgb, var(--role-accent-armed) 12%, transparent);
}

.theme-editor-contrast-badge[data-grade="fail"] {
  color: var(--role-accent-record);
  border-color: var(--role-accent-record);
  background: color-mix(in srgb, var(--role-accent-record) 14%, transparent);
}

.theme-editor-row-input input[type="color"] {
  width: 36px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
}

.theme-editor-row-input .theme-editor-row-input-text {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  min-height: 26px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  background: var(--tracker-cell-2);
  color: var(--text);
  font-family: var(--neon-font-family-mono, ui-monospace, monospace);
  font-size: 12px;
}

.theme-editor-row-input .theme-editor-row-input-text--wide {
  flex: 1 1 100%;
}

.theme-editor-row-input textarea {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  min-height: 44px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  background: var(--tracker-cell-2);
  color: var(--text);
  font-family: var(--neon-font-family-mono, ui-monospace, monospace);
  font-size: 11px;
  line-height: 1.3;
  resize: vertical;
}

.theme-editor-row-reset {
  flex: 0 0 auto;
  width: 24px;
  min-height: 24px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
}

.theme-editor-footer {
  flex: 0 0 auto;
  padding: var(--neon-spacing-sm, 4px) var(--neon-spacing-lg, 12px);
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--neon-color-text-muted, var(--muted));
  font-size: 11px;
}

.theme-editor-footer code {
  font-family: var(--neon-font-family-mono, ui-monospace, monospace);
}

/* ================================================================
   TE.3 — Drag handle (header) + resize handle (bottom-right) +
   inspect overlay + filter pill.
   ================================================================ */

.theme-editor-header {
  cursor: move;
  user-select: none;
}
.theme-editor-header button {
  cursor: pointer;
}

.theme-editor-inspect {
  min-width: 64px;
  min-height: 26px;
  padding: 0 8px;
  margin-right: 4px;
  font-size: 12px;
}
/* TE.5 — Active Inspect button glows RED + pulses so it's unmissable. */
.theme-editor-inspect.active {
  background: var(--neon-color-danger);
  color: #fff;
  border-color: var(--neon-color-danger);
  box-shadow:
    0 0 0 1px var(--neon-color-danger),
    0 0 10px color-mix(in srgb, var(--neon-color-danger) 60%, transparent);
  animation: themeEditorInspectPulse 1.4s ease-in-out infinite;
}
@keyframes themeEditorInspectPulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px var(--neon-color-danger),
      0 0 8px color-mix(in srgb, var(--neon-color-danger) 45%, transparent);
  }
  50% {
    box-shadow:
      0 0 0 1px var(--neon-color-danger),
      0 0 18px color-mix(in srgb, var(--neon-color-danger) 80%, transparent);
  }
}

/* Resize handle bottom-right */
.theme-editor-resize-handle {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  z-index: 2;
  background:
    linear-gradient(
      135deg,
      transparent 0,
      transparent 5px,
      var(--neon-color-text-muted, var(--muted)) 5px,
      var(--neon-color-text-muted, var(--muted)) 7px,
      transparent 7px,
      transparent 9px,
      var(--neon-color-text-muted, var(--muted)) 9px,
      var(--neon-color-text-muted, var(--muted)) 11px,
      transparent 11px
    );
  opacity: 0.6;
}
.theme-editor-resize-handle:hover {
  opacity: 1;
}

/* TE.5 — Filter pill: now a prominent banner with eyebrow + big
   element name + parameter count + action buttons. */
.theme-editor-filter-pill {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 2px solid var(--neon-color-accent, var(--cyan));
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--neon-color-accent, var(--cyan)) 18%, var(--panel-2)) 0%,
      color-mix(in srgb, var(--neon-color-accent, var(--cyan)) 8%, var(--panel-2)) 100%
    );
  font-size: 12px;
  color: var(--text);
}
.theme-editor-filter-banner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.theme-editor-filter-eyebrow {
  font-family: var(--neon-font-family-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: var(--neon-font-letter-spacing-caps, 0.08em);
  text-transform: uppercase;
  color: var(--neon-color-accent, var(--cyan));
}
.theme-editor-filter-title {
  margin: 0;
  font-family: var(--neon-font-family-mono, monospace);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
}
.theme-editor-filter-target {
  font-family: var(--neon-font-family-mono, monospace);
  font-size: 11px;
  color: var(--neon-color-text-muted, var(--muted));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.theme-editor-filter-count {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}
.theme-editor-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.theme-editor-filter-action {
  min-height: 24px;
  padding: 0 10px;
  font-size: 11px;
}

/* Inspect overlay (positioned outside the editor) */
.theme-editor-inspect-overlay {
  position: fixed;
  pointer-events: none;
  z-index: 11999;
  border: 2px solid var(--neon-color-accent, var(--cyan));
  background: color-mix(in srgb, var(--neon-color-accent, var(--cyan)) 12%, transparent);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.5),
    0 0 12px color-mix(in srgb, var(--neon-color-accent, var(--cyan)) 50%, transparent);
  transition: left 60ms linear, top 60ms linear, width 60ms linear, height 60ms linear;
}
.theme-editor-inspect-overlay::after {
  content: attr(data-label);
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 4px;
  padding: 2px 6px;
  background: var(--neon-color-accent, var(--cyan));
  color: var(--neon-color-bg-base);
  font-family: var(--neon-font-family-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 2px;
}

/* While inspect is active, change global cursor on the page. */
html.theme-editor-inspecting,
html.theme-editor-inspecting body {
  cursor: crosshair !important;
}

/* Copy button flash */
.theme-editor-flash {
  background: var(--neon-color-success, var(--lime)) !important;
  color: var(--neon-color-bg-base) !important;
  border-color: var(--neon-color-success, var(--lime)) !important;
}

/* ================================================================
   TE.4 — Passive inspect shield.  Cyan tint over the whole viewport
   (excluding the editor) so users see "the app is in passive mode".
   pointer-events: none — events flow through and get blocked by the
   capture-phase handler in JS, not by the CSS overlay.
   ================================================================ */
.theme-editor-inspect-shield {
  position: fixed;
  inset: 0;
  z-index: 11997;  /* below editor (12000) and outline overlay (11999) */
  pointer-events: none;
  background: color-mix(
    in srgb,
    var(--neon-color-accent, var(--cyan)) 8%,
    transparent
  );
}

.theme-editor-inspect-shield[hidden] {
  display: none;
}

/* ================================================================
   TE.6 — Flat filter-results container.  When an element is picked,
   matching rows are MOVED here (live bindings stay intact) so all
   editable parameters appear together at the top of the body, no
   scrolling required.
   ================================================================ */
.theme-editor-filter-results {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  margin: 0 0 var(--neon-spacing-md, 8px);
  padding: 0;
}

.theme-editor-filter-results[hidden] {
  display: none;
}

/* Rows in flat mode get tighter padding so all 10–15 params fit
   without scrolling on a 720 px high editor. */
.theme-editor-filter-results .theme-editor-row {
  padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 30%, var(--panel-2));
}
.theme-editor-filter-results .theme-editor-row:last-child {
  border-bottom: 0;
}

/* Textareas in flat mode start more compact (still resizable). */
.theme-editor-filter-results .theme-editor-row-input textarea {
  min-height: 36px;
}

/* Hint when the picked element has no curated map entry. */
.theme-editor-filter-empty {
  padding: 14px;
  color: var(--neon-color-text-muted, var(--muted));
  font-size: 12px;
  font-style: italic;
  text-align: center;
}

/* TE.8 — Group prefix is now suppressed entirely.  The row label
   (HUMAN_LABELS) contains the category in plain English already
   ("Primary text colour", "Corner radius — Large", etc.) so a
   separate tiny eyebrow only adds noise. */
.theme-editor-row-label-group {
  display: none;
}
.theme-editor-filter-results .theme-editor-row-label-group {
  display: none;
  font-family: var(--neon-font-family-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--neon-font-letter-spacing-caps, 0.08em);
  text-transform: uppercase;
  color: var(--neon-color-accent, var(--cyan));
  line-height: 1.1;
  margin-bottom: 1px;
}

/* ================================================================
   TE.10 — Live inspector: hardcoded-value rows + inheritance hints.
   ================================================================ */

.theme-editor-row--hardcoded {
  /* Subtle tinted background so the user spots hardcoded entries
     at a glance among the token-driven rows. */
  background: color-mix(in srgb, var(--neon-color-warning, var(--amber)) 8%, transparent);
}

.theme-editor-row-label-inherited {
  display: block;
  font-family: var(--neon-font-family-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--neon-color-text-muted, var(--muted));
  margin-top: 2px;
  opacity: 0.85;
}

.theme-editor-row-badge {
  flex: 0 0 auto;
  padding: 2px 6px;
  margin-left: 4px;
  border-radius: 2px;
  font-family: var(--neon-font-family-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.theme-editor-row-badge--hardcoded {
  background: color-mix(in srgb, var(--neon-color-warning, var(--amber)) 50%, var(--panel-2));
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--neon-color-warning, var(--amber)) 70%, transparent);
}

.theme-editor-row--hardcoded .theme-editor-row-input-text[readonly] {
  cursor: text;
  user-select: all;
}

/* TE.11 — Visual colour swatch next to hardcoded colour rows so
   the user can spot which colour each row controls at a glance. */
.theme-editor-row-swatch {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 2px;
  /* Checker so transparent / semi-transparent values are visible */
  background-image:
    linear-gradient(45deg, rgba(20, 28, 60, 0.18) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(20, 28, 60, 0.18) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(20, 28, 60, 0.18) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(20, 28, 60, 0.18) 75%);
  background-size: 8px 8px;
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  position: relative;
  overflow: hidden;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.30);
}
/* TE.11 — background-color is set inline via JS; the checker
   background-image from the rule above stays beneath so partial-
   alpha values reveal the checker pattern. */