/*
 * Echo reference stylesheet.
 * Plain CSS over the Echo tokens (tokens.css). It documents each component's
 * exact geometry; echo-cat implements the same values with Tailwind classes.
 * Icons are Phosphor (fill-based SVG, viewBox 256). Every colour comes from a token, so both themes work without overrides.
 */

/* ---------- Preview stage and helpers ---------- */
.echo-preview {
  margin: 0;
  padding: var(--space-4);
  background: var(--canvas);
  color: var(--ink);
  font: 400 14px/20px var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
.echo-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.echo-stack { display: grid; gap: var(--space-3); }
.echo-display { font-variation-settings: "wdth" 85; }
.echo-num { font-variant-numeric: tabular-nums; }
.echo-icon { width: var(--size-icon-md); height: var(--size-icon-md); flex: none; fill: currentColor; }
.echo-icon--sm { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.echo-icon--lg { width: var(--size-icon-lg); height: var(--size-icon-lg); }

/* ---------- Button ---------- */
.echo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1-5);
  height: var(--size-control-md); padding: 0 var(--space-3);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font: 500 14px/20px var(--font-sans); white-space: nowrap; cursor: pointer;
  transition: background-color 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out, box-shadow 120ms ease-out;
}
.echo-btn svg { width: var(--size-icon-md); height: var(--size-icon-md); }
.echo-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Raised buttons: a top-lit gradient, a 1px highlight on the top edge and a soft drop, in both themes. Pressing flips the volume inward. */
.echo-btn--primary { background: linear-gradient(var(--brand-top), var(--brand)); color: var(--on-brand); border-color: var(--brand-hover); box-shadow: var(--shadow-control-fill); }
.echo-btn--primary:hover { background: linear-gradient(var(--brand), var(--brand-hover)); }
.echo-btn--primary:active { background: var(--brand-hover); box-shadow: var(--shadow-control-pressed); }
.echo-btn--secondary { background: linear-gradient(var(--control-top), var(--control)); color: var(--ink); border-color: var(--control-line); box-shadow: var(--shadow-control); }
.echo-btn--secondary:hover { background: linear-gradient(var(--control-top), var(--control-hover)); }
.echo-btn--secondary:active { background: var(--control-hover); box-shadow: var(--shadow-control-pressed); }
.echo-btn--ghost { background: transparent; color: var(--ink-muted); }
.echo-btn--ghost:hover { background: var(--surface-sunken); color: var(--ink); }
.echo-btn--danger { background: linear-gradient(var(--danger-top), var(--danger)); color: var(--on-danger); border-color: var(--danger); box-shadow: var(--shadow-control-fill); }
.echo-btn--danger:hover { background: var(--danger); }
.echo-btn--danger:active { background: var(--danger); box-shadow: var(--shadow-control-pressed); }
.echo-btn--link { background: none; border: 0; padding: 0; height: auto; color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; }
.echo-btn--sm { height: var(--size-control-sm); padding: 0 var(--space-2); font-size: 13px; line-height: 18px; }
.echo-btn--lg { height: var(--size-control-lg); padding: 0 var(--space-4); font-size: 15px; }
.echo-btn--icon { width: var(--size-control-md); padding: 0; }
.echo-btn--icon.echo-btn--sm { width: var(--size-control-sm); }
.echo-btn:disabled, .echo-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* ---------- Keyboard key ---------- */
.echo-kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 var(--space-1); box-sizing: border-box;
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--radius-xs);
  background: var(--surface); color: var(--ink-muted);
  font: 500 11px/14px var(--font-mono);
}

/* ---------- Field and input ---------- */
.echo-field { display: grid; gap: var(--space-1); }
.echo-label { font: 500 13px/18px var(--font-sans); color: var(--ink); }
.echo-input {
  box-sizing: border-box; width: 100%; height: var(--size-control-md); padding: 0 var(--space-2);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); font: 400 14px/20px var(--font-sans);
}
.echo-input::placeholder { color: var(--ink-muted); }
.echo-input:focus { outline: 2px solid var(--focus); outline-offset: -1px; border-color: var(--focus); }
.echo-input[aria-invalid="true"] { border-color: var(--danger); }
.echo-input:read-only { background: var(--surface-sunken); }
.echo-help { font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.echo-help--error { color: var(--danger); }

/* ---------- Combobox (an input that filters a menu-styled listbox) ---------- */
.echo-combobox { position: relative; }
.echo-combobox > .echo-input { padding-left: calc(var(--space-2) + 20px + var(--space-1-5)); }
.echo-combobox > .echo-combobox__flag { position: absolute; left: var(--space-2); top: 50%; translate: 0 -50%; pointer-events: none; }
.echo-combobox__flag { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 20px; font-size: 16px; line-height: 1; color: var(--ink-muted); }
.echo-combobox__flag svg { width: var(--size-icon-md); height: var(--size-icon-md); }
/* Eight rows, then scroll; outranks a host's generic popover-menu height. */
.echo-menu.echo-combobox__list[popover] { max-height: calc(8 * var(--size-control-sm) + 2 * var(--space-1)); overflow-y: auto; }
.echo-combobox__name { flex: none; }
.echo-combobox__native { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-muted); }
.echo-combobox__code { margin-left: auto; padding-left: var(--space-2); font: 500 11px/14px var(--font-mono); text-transform: uppercase; color: var(--ink-muted); }
.echo-combobox__option[aria-selected="true"] .echo-combobox__name { color: var(--brand-ink); font-weight: 500; }
.echo-combobox__empty { padding: var(--space-1-5) var(--space-2); font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }

/* ---------- Model picker (a provider select and a model combobox) ---------- */
.echo-model-select { display: grid; gap: var(--space-1); }
.echo-model-select__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-3); align-items: start; }
@media (max-width: 640px) { .echo-model-select__row { grid-template-columns: minmax(0, 1fr); } }
.echo-model-select .echo-combobox > .echo-input,
.echo-model-select__native,
.echo-model-select__provider > select { padding-left: var(--space-2); font: 400 13px/18px var(--font-mono); }
/* The provider select drops the native chrome so it lines up with the model input; a caret icon replaces the arrow. */
.echo-model-select__provider { position: relative; }
.echo-model-select__provider > select { appearance: none; padding-right: calc(var(--space-2) + var(--size-icon-md) + var(--space-1)); cursor: pointer; }
.echo-model-select__provider > svg { position: absolute; right: var(--space-2); top: 50%; translate: 0 -50%; width: var(--size-icon-md); height: var(--size-icon-md); color: var(--ink-muted); pointer-events: none; }
.echo-model-select__status { display: flex; align-items: center; gap: var(--space-1-5); min-height: 20px; font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.echo-model-select__status[data-state="error"] { color: var(--danger); }
.echo-model-select__status svg { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.echo-menu__item.echo-model-select__option { flex-wrap: wrap; column-gap: var(--space-2); row-gap: 0; height: auto; min-height: var(--size-control-sm); padding-block: var(--space-1); }
.echo-model-select__id { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 13px/18px var(--font-mono); }
.echo-model-select__option[aria-selected="true"] .echo-model-select__id { color: var(--brand-ink); font-weight: 500; }
.echo-model-select__current { color: var(--ink-muted); }
.echo-model-select__option .echo-chip { margin-left: auto; }
.echo-model-select__note { flex-basis: 100%; font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }

/* ---------- Dropzone (a native file input that also takes dropped files) ---------- */
.echo-dropzone {
  position: relative; overflow: hidden; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--surface);
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}
.echo-dropzone__area {
  display: grid; justify-items: center; gap: var(--space-1); padding: var(--space-5) var(--space-4);
  text-align: center; color: var(--ink-muted); cursor: pointer;
}
.echo-dropzone__area:hover { background: var(--surface-sunken); }
.echo-dropzone__area > svg { width: var(--size-icon-lg); height: var(--size-icon-lg); margin-bottom: var(--space-1); fill: currentColor; }
/* Visually hidden but focusable; it sits at the bottom centre so a "Select a file" bubble points at the zone. */
.echo-dropzone__input { position: absolute; left: 50%; bottom: var(--space-2); width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.echo-dropzone__title { font: 500 14px/20px var(--font-sans); color: var(--ink); }
.echo-dropzone__hint { font: 400 13px/18px var(--font-sans); }
.echo-dropzone__formats { font: 400 11px/16px var(--font-mono); }
.echo-dropzone:has(.echo-dropzone__input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -1px; border-style: solid; border-color: var(--focus); }
.echo-dropzone[data-over] { border-style: solid; border-color: var(--brand); background: var(--brand-soft); }
.echo-dropzone[data-over] .echo-dropzone__area { background: none; color: var(--brand-ink); }
.echo-dropzone:has(.echo-dropzone__input[aria-invalid="true"]) { border-color: var(--danger); }
.echo-dropzone__files { display: grid; margin: 0; padding: var(--space-1) 0; list-style: none; border-top: 1px solid var(--line); }
.echo-dropzone__file { display: flex; align-items: baseline; gap: var(--space-2); padding: var(--space-1) var(--space-3); }
.echo-dropzone__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 13px/20px var(--font-mono); color: var(--ink); }
.echo-dropzone__size { flex: none; font: 400 11px/16px var(--font-mono); color: var(--ink-muted); }
.echo-dropzone__file > .echo-bracket { flex: none; margin-left: auto; }

/* A row or page region that opens an upload when a file is dropped on it. */
.echo-droptarget:not(tr) { position: relative; border-radius: var(--radius-md); }
.echo-droptarget:not(tr)[data-over] { background: var(--brand-soft); box-shadow: inset 0 0 0 2px var(--brand); }
.echo-droptarget[data-drop-hint][data-over]::after {
  content: attr(data-drop-hint); position: absolute; top: var(--space-3); left: 50%; translate: -50% 0; z-index: 1;
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); background: var(--brand); color: var(--on-brand);
  font: 500 13px/18px var(--font-sans); box-shadow: var(--shadow-popover); pointer-events: none; white-space: nowrap;
}
.echo-table tr.echo-droptarget[data-over] > td { background: var(--brand-soft); }
.echo-table tr.echo-droptarget[data-over] > td:first-child { box-shadow: inset 2px 0 0 var(--brand); }

/* ---------- Resource picker (checkbox rows of language resources) ---------- */
.echo-picker { display: grid; gap: var(--space-2); }
.echo-picker__list {
  margin: 0; padding: 0; list-style: none; max-height: calc(8 * (var(--size-control-md) + var(--space-1))); overflow-y: auto;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface);
}
.echo-picker__row {
  display: flex; align-items: center; gap: var(--space-2); min-height: calc(var(--size-control-md) + var(--space-1)); padding: 0 var(--space-3);
  margin-top: -1px; border-top: 1px solid var(--line); cursor: pointer;
}
.echo-picker__row[hidden] { display: none; }
.echo-picker__row:hover { background: var(--surface-sunken); }
.echo-picker__row:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: -2px; }
.echo-picker__row > input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.echo-picker__row > .echo-pill { flex: none; }
.echo-picker__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 14px/20px var(--font-sans); color: var(--ink); }
.echo-picker__langs { flex: none; margin-left: auto; padding-left: var(--space-2); font: 400 12px/16px var(--font-mono); color: var(--ink-muted); }
.echo-picker__none { padding: var(--space-2) var(--space-3); font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.echo-picker__foot { display: flex; align-items: baseline; gap: var(--space-2); font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }

/* ---------- Chip (status badge) ---------- */
.echo-chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  height: 20px; padding: 0 var(--space-1-5); border-radius: var(--radius-sm);
  background: var(--surface-sunken); color: var(--ink-muted);
  font: 500 12px/16px var(--font-sans); white-space: nowrap;
}
.echo-chip svg { width: 12px; height: 12px; }
.echo-chip--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.echo-chip--brand { background: var(--brand-soft); color: var(--brand-ink); }
.echo-chip--draft { background: var(--draft-soft); color: var(--draft); }
.echo-chip--confirmed { background: var(--confirmed-soft); color: var(--confirmed); }
.echo-chip--review { background: var(--review-soft); color: var(--review); }
.echo-chip--danger { background: var(--danger-soft); color: var(--danger); }
.echo-chip--signoff { background: var(--signoff-soft); color: var(--signoff); }

/* ---------- Segment state (icon in the status cell) ---------- */
.echo-state { display: inline-flex; align-items: center; gap: var(--space-1-5); font: 400 13px/18px var(--font-sans); color: var(--ink); }
.echo-state svg { width: var(--size-icon-md); height: var(--size-icon-md); flex: none; }
.echo-state--new svg { color: var(--ink-faint); }
.echo-state--draft svg { color: var(--draft); }
.echo-state--confirmed svg { color: var(--confirmed); }
.echo-state--review svg { color: var(--review); }
.echo-state--rejected svg, .echo-state--conflict svg { color: var(--danger); }
.echo-state--signoff svg { color: var(--signoff); }
.echo-state--locked svg { color: var(--ink-muted); }

/* ---------- Match chip (TM score / MT origin) ---------- */
.echo-match {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 20px; padding: 0 var(--space-1-5); box-sizing: border-box;
  border-radius: var(--radius-sm);
  font: 500 12px/16px var(--font-mono); font-variant-numeric: tabular-nums;
}
.echo-match--context, .echo-match--exact { background: var(--confirmed-soft); color: var(--confirmed); }
.echo-match--context { box-shadow: inset 0 0 0 1px var(--confirmed); }
.echo-match--fuzzy { background: var(--review-soft); color: var(--review); }
.echo-match--low { background: var(--surface-sunken); color: var(--ink-muted); }
.echo-match--mt { background: var(--brand-soft); color: var(--brand-ink); }

/* ---------- Placeable tag ---------- */
.echo-tag {
  display: inline-flex; align-items: center; height: 18px; padding: 0 var(--space-1);
  margin: 0 1px; vertical-align: 1px; box-sizing: border-box;
  background: var(--tag-bg); color: var(--tag-ink); border-radius: var(--radius-xs);
  font: 500 11px/14px var(--font-mono); font-variant-numeric: tabular-nums; cursor: default;
}
.echo-tag--open { padding-right: 9px; border-radius: var(--radius-xs) 0 0 var(--radius-xs);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 0 100%); }
.echo-tag--close { padding-left: 9px; border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 6px 100%, 0 50%); }
/* Numbered tags cycle through the categorical hues except red: tag n takes --c((n-1) mod 6)+1. */
.echo-tag--c1 { background: var(--cat-violet-soft); color: var(--cat-violet); }
.echo-tag--c2 { background: var(--cat-teal-soft); color: var(--cat-teal); }
.echo-tag--c3 { background: var(--cat-orange-soft); color: var(--cat-orange); }
.echo-tag--c4 { background: var(--cat-plum-soft); color: var(--cat-plum); }
.echo-tag--c5 { background: var(--cat-green-soft); color: var(--cat-green); }
.echo-tag--c6 { background: var(--cat-yellow-soft); color: var(--cat-yellow); }
.echo-tag--paired { background: var(--brand-soft); color: var(--brand-ink); }
.echo-tag--error { background: var(--danger-soft); color: var(--danger); }
.echo-tag--outline { box-shadow: inset 0 0 0 1px var(--tag-line); }

/* ---------- Text marks inside segment text ---------- */
.echo-mark { background: var(--marker-soft); color: inherit; border-radius: var(--radius-xs); box-shadow: inset 0 -2px 0 var(--marker); padding: 0 1px; }
.echo-term { text-decoration: underline dotted var(--brand-ink); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.echo-qa { text-decoration: underline wavy var(--danger); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.echo-diff-ins { background: var(--confirmed-soft); color: var(--confirmed); text-decoration: none; border-radius: var(--radius-xs); }
.echo-diff-del { background: var(--danger-soft); color: var(--danger); text-decoration: line-through; border-radius: var(--radius-xs); }

/* ---------- Segment row (CAT grid) ---------- */
.echo-grid { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.echo-grid__head {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr) 36px;
  background: var(--canvas); border-bottom: 1px solid var(--line);
  font: 600 11px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted);
}
.echo-grid__head > div { padding: var(--space-1-5) var(--space-3); }
.echo-grid__head > div + div { border-left: 1px solid var(--line); }
.echo-seg {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1fr) 36px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  box-shadow: inset 2px 0 0 transparent;
}
.echo-seg:last-child { border-bottom: 0; }
.echo-seg--alt { background: var(--row-alt); }
.echo-seg--active { background: var(--brand-soft); box-shadow: inset 2px 0 0 var(--brand); }
.echo-seg--conflict { box-shadow: inset 2px 0 0 var(--danger); }
.echo-seg__id {
  padding: var(--space-2) var(--space-2) var(--space-2) 0; text-align: right;
  font: 500 12px/24px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-muted);
}
.echo-seg__source, .echo-seg__target {
  min-width: 0; padding: var(--space-2) var(--space-3);
  border-left: 1px solid var(--line); font: 400 15px/24px var(--font-sans); color: var(--ink);
  overflow-wrap: anywhere;
}
.echo-seg--active .echo-seg__target { background: var(--surface); box-shadow: inset 0 0 0 1px var(--brand); }
.echo-seg--locked .echo-seg__target { background: var(--surface-sunken); color: var(--ink-muted); }
.echo-seg__target:empty::before { content: attr(data-placeholder); color: var(--ink-muted); }
.echo-seg__status { display: flex; justify-content: center; padding-top: 12px; border-left: 1px solid var(--line); }
.echo-seg__status svg { width: var(--size-icon-md); height: var(--size-icon-md); }

/* ---------- Reference item (TM / MT suggestion in the dock) ---------- */
.echo-ref {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--space-3); row-gap: var(--space-1);
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); background: var(--surface);
}
.echo-ref--selected { background: var(--brand-soft); }
.echo-ref__key { grid-row: 1 / span 3; padding-top: 2px; }
.echo-ref__source { font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.echo-ref__target { font: 400 15px/24px var(--font-sans); color: var(--ink); }
.echo-ref__meta { font: 400 12px/16px var(--font-sans); color: var(--ink-muted); }
.echo-ref__score { grid-column: 3; grid-row: 1; }

/* ---------- Top bar ---------- */
.echo-topbar {
  display: flex; align-items: center; gap: var(--space-3);
  height: var(--size-topbar); padding: 0 var(--space-3); box-sizing: border-box;
  background: var(--surface); border-bottom: 1px solid var(--line);
}
.echo-logo { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.echo-logo svg { display: block; height: 20px; width: auto; }
.echo-logo__mark { color: var(--brand); }
.echo-logo__word { color: var(--ink); }
.echo-wordmark { font: 600 18px/1 var(--font-sans); font-variation-settings: "wdth" 85; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.echo-topbar__sep { width: 1px; height: 20px; background: var(--line); }
.echo-crumbs { display: flex; align-items: center; gap: var(--space-1-5); min-width: 0; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
.echo-crumbs [aria-current] { color: var(--ink); font-weight: 500; }
.echo-langpair { font: 500 12px/16px var(--font-mono); color: var(--ink-muted); padding: 0 var(--space-1-5); height: 20px; display: inline-flex; align-items: center; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--line); }
.echo-topbar__spacer { flex: 1; }
.echo-navlink {
  display: inline-flex; align-items: center; gap: var(--space-1-5); height: var(--size-control-sm); padding: 0 var(--space-2);
  border-radius: var(--radius-sm); font: 500 13px/18px var(--font-sans); color: var(--ink-muted); text-decoration: none;
}
.echo-navlink:hover { background: var(--surface-sunken); color: var(--ink); }
.echo-navlink[aria-current="page"] { background: var(--brand-soft); color: var(--brand-ink); }
.echo-presence { display: inline-flex; }
.echo-avatar {
  width: 24px; height: 24px; border-radius: var(--radius-full); display: inline-flex; align-items: center; justify-content: center;
  font: 600 10px/1 var(--font-sans); background: var(--surface-sunken); color: var(--ink); box-shadow: 0 0 0 2px var(--surface);
}
.echo-avatar + .echo-avatar { margin-left: -4px; }

/* ---------- Tabs ---------- */
.echo-tabs { display: flex; gap: var(--space-4); padding: 0 var(--space-3); border-bottom: 1px solid var(--line); background: var(--surface); }
.echo-tab {
  display: inline-flex; align-items: center; gap: var(--space-1-5); height: 36px; padding: 0; margin-bottom: -1px;
  background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer;
  font: 500 13px/18px var(--font-sans); color: var(--ink-muted);
}
.echo-tab svg { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.echo-tab:hover { color: var(--ink); }
.echo-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--brand); }
.echo-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-xs); }
.echo-count { font: 500 11px/14px var(--font-mono); font-variant-numeric: tabular-nums; padding: 1px var(--space-1); border-radius: var(--radius-xs); background: var(--surface-sunken); color: var(--ink-muted); }

/* ---------- Status bar ---------- */
.echo-statusbar {
  display: flex; align-items: center; gap: var(--space-4);
  height: var(--size-statusbar); padding: 0 var(--space-3); box-sizing: border-box;
  background: var(--canvas); border-top: 1px solid var(--line);
  font: 400 12px/16px var(--font-sans); color: var(--ink-muted); white-space: nowrap;
}
.echo-statusbar b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.echo-statusbar__item { display: inline-flex; align-items: center; gap: var(--space-1); }
.echo-statusbar__item svg { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.echo-progress { display: flex; width: 160px; height: 4px; border-radius: var(--radius-full); background: var(--line); overflow: hidden; }
.echo-progress > .is-confirmed { background: var(--confirmed); }
.echo-progress > .is-draft { background: var(--draft); }
.echo-progress > .is-signoff { background: var(--signoff); }

/* ---------- Menu (dropdown, context menu, command palette list) ---------- */
.echo-menu {
  min-width: 220px; padding: var(--space-1); box-sizing: border-box;
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
}
.echo-menu__label { padding: var(--space-1-5) var(--space-2) var(--space-1); font: 600 11px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.echo-menu__item {
  display: flex; align-items: center; gap: var(--space-2); height: var(--size-control-sm); padding: 0 var(--space-2);
  border-radius: var(--radius-sm); font: 400 13px/18px var(--font-sans); color: var(--ink); cursor: default;
}
.echo-menu__item svg { width: var(--size-icon-md); height: var(--size-icon-md); color: var(--ink-muted); }
.echo-menu__item[data-highlighted] { background: var(--surface-sunken); }
.echo-menu__item--danger, .echo-menu__item--danger svg { color: var(--danger); }
.echo-menu__shortcut { margin-left: auto; display: inline-flex; gap: 2px; }
.echo-menu__sep { height: 1px; margin: var(--space-1) calc(var(--space-1) * -1); background: var(--line); }

/* ---------- Dialog ---------- */
.echo-dialog {
  width: 100%; max-width: 440px; box-sizing: border-box; padding: var(--space-5);
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-dialog);
}
.echo-dialog__title { margin: 0; font: 600 18px/24px var(--font-sans); color: var(--ink); }
.echo-dialog__body { margin: var(--space-2) 0 0; font: 400 14px/20px var(--font-sans); color: var(--ink-muted); max-width: var(--measure); }
.echo-dialog__footer { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); }

/* ---------- Toast ---------- */
.echo-toast {
  display: flex; align-items: flex-start; gap: var(--space-2); width: 360px; max-width: 100%; box-sizing: border-box;
  padding: var(--space-3); background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover); font: 400 14px/20px var(--font-sans); color: var(--ink);
}
.echo-toast svg { width: var(--size-icon-lg); height: var(--size-icon-lg); flex: none; }
.echo-toast__title { font-weight: 500; }
.echo-toast__desc { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.echo-toast__action { margin-left: auto; }
.echo-toast--success svg { color: var(--confirmed); }
.echo-toast--error svg { color: var(--danger); }
.echo-toast--info svg { color: var(--brand-ink); }

/* ---------- Tooltip ---------- */
.echo-tooltip {
  display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2);
  background: var(--ink); color: var(--surface); border-radius: var(--radius-sm);
  font: 400 12px/16px var(--font-sans); box-shadow: var(--shadow-popover);
}
.echo-tooltip .echo-kbd { background: transparent; color: inherit; border-color: var(--ink-faint); }

/* ---------- Panel ---------- */
.echo-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); }
.echo-panel__header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.echo-panel__title { margin: 0; font: 600 15px/20px var(--font-sans); }
.echo-panel__body { padding: var(--space-4); }

/* ---------- Empty state ---------- */
.echo-empty {
  display: grid; justify-items: start; gap: var(--space-2); padding: var(--space-6);
  border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface);
  font: 400 14px/20px var(--font-sans); color: var(--ink-muted);
}
.echo-empty > svg { width: var(--size-icon-lg); height: var(--size-icon-lg); }
.echo-empty > p { margin: 0; }

/* ---------- Quiet and bracket text actions (instrument-panel headers) ---------- */
.echo-btn--quiet {
  height: auto; padding: 0; background: none; border: 0;
  font: 500 12px/16px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted);
}
.echo-btn--quiet svg { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.echo-btn--quiet:hover { color: var(--ink); }
.echo-btn--quiet.is-danger:hover { color: var(--danger); }
.echo-actions { display: flex; align-items: center; gap: var(--space-5); }
.echo-actions__sep { width: 1px; height: 14px; background: var(--line-strong); }
.echo-bracket { font: 400 12px/16px var(--font-mono); color: var(--ink-muted); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; }
.echo-bracket::before { content: "["; } .echo-bracket::after { content: "]"; }
.echo-bracket:hover { color: var(--brand-ink); }

/* ---------- Status dot ---------- */
.echo-dot { display: inline-flex; align-items: center; gap: var(--space-2); font: 500 11px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.echo-dot::before { content: ""; width: 8px; height: 8px; flex: none; background: currentColor; }
.echo-dot > span { color: var(--ink-muted); }
.echo-dot--live { color: var(--confirmed); } .echo-dot--busy { color: var(--review); } .echo-dot--error { color: var(--danger); } .echo-dot--idle { color: var(--ink-faint); }
.echo-dot--round::before { border-radius: var(--radius-full); }

/* ---------- Section header ---------- */
.echo-section { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-bottom: var(--space-2); }
.echo-section__title { margin: 0; font: 600 11px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.echo-section__meta { font: 400 12px/16px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-muted); }

/* ---------- Metric (stat tiles) ---------- */
.echo-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.echo-metric { padding: var(--space-5) var(--space-4); display: grid; gap: var(--space-2); }
.echo-metric + .echo-metric { border-left: 1px solid var(--line); }
.echo-metric__label { font: 500 11px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.echo-metric__value { font: 300 28px/32px var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.echo-metric__unit { margin-left: var(--space-1); font: 400 12px/16px var(--font-mono); color: var(--ink-muted); }
.echo-metric__value.is-good { color: var(--confirmed); }

/* ---------- Data table ---------- */
.echo-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); font: 400 14px/20px var(--font-sans); color: var(--ink); }
.echo-table th { padding: var(--space-2) var(--space-3); text-align: left; font: 500 11px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); border-bottom: 1px solid var(--line); background: var(--surface); }
.echo-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.echo-table tr:last-child td { border-bottom: 0; }
.echo-table tbody tr:hover td { background: var(--row-alt); }
.echo-table .is-num { text-align: right; font: 400 13px/20px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.echo-table .is-code { font: 400 13px/20px var(--font-mono); }
.echo-meter { display: inline-flex; align-items: center; gap: var(--space-2); width: 100%; font: 400 12px/16px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-muted); }
.echo-meter__track { flex: 1; min-width: 60px; height: 3px; background: var(--line); display: flex; overflow: hidden; }
.echo-meter__track > .is-confirmed { background: var(--confirmed); } .echo-meter__track > .is-draft { background: var(--draft); }

/* ---------- Property list (key / value) ---------- */
.echo-props { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--space-4); row-gap: var(--space-1-5); margin: 0; font: 400 13px/20px var(--font-sans); }
.echo-props dt { color: var(--ink-muted); display: inline-flex; align-items: center; gap: var(--space-1-5); }
.echo-props dt svg { width: var(--size-icon-sm); height: var(--size-icon-sm); }
.echo-props dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.echo-props .is-code { font: 400 12px/20px var(--font-mono); color: var(--brand-ink); }
.echo-props .is-empty { color: var(--ink-faint); }

/* ---------- Sidebar ---------- */
.echo-sidebar { width: var(--size-sidebar); box-sizing: border-box; padding: var(--space-2); background: var(--canvas); border-right: 1px solid var(--line); display: grid; gap: var(--space-0-5); align-content: start; }
.echo-sidebar__group { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-2) var(--space-1); font: 600 11px/16px var(--font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.echo-sidebar__item { display: flex; align-items: center; gap: var(--space-2); height: var(--size-control-sm); padding: 0 var(--space-2); border-radius: var(--radius-sm); font: 400 13px/18px var(--font-sans); color: var(--ink); text-decoration: none; }
.echo-sidebar__item svg { width: var(--size-icon-md); height: var(--size-icon-md); color: var(--ink-muted); flex: none; }
.echo-sidebar__item:hover { background: var(--surface-sunken); }
.echo-sidebar__item[aria-current="page"] { background: var(--brand-soft); color: var(--brand-ink); font-weight: 500; }
.echo-sidebar__item[aria-current="page"] svg { color: var(--brand-ink); }
.echo-sidebar__count { margin-left: auto; font: 400 11px/14px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-muted); }

/* ---------- Categorical colour (identity, never state) ---------- */
.echo-cat-red { --cat: var(--cat-red); --cat-soft: var(--cat-red-soft); }
.echo-cat-orange { --cat: var(--cat-orange); --cat-soft: var(--cat-orange-soft); }
.echo-cat-yellow { --cat: var(--cat-yellow); --cat-soft: var(--cat-yellow-soft); }
.echo-cat-green { --cat: var(--cat-green); --cat-soft: var(--cat-green-soft); }
.echo-cat-teal { --cat: var(--cat-teal); --cat-soft: var(--cat-teal-soft); }
.echo-cat-violet { --cat: var(--cat-violet); --cat-soft: var(--cat-violet-soft); }
.echo-cat-plum { --cat: var(--cat-plum); --cat-soft: var(--cat-plum-soft); }
.echo-sidebar__item[class*="echo-cat-"] svg { color: var(--cat); }
.echo-pill { display: inline-flex; align-items: center; gap: var(--space-1); height: 20px; padding: 0 var(--space-1-5); border-radius: var(--radius-sm); background: var(--cat-soft, var(--surface-sunken)); color: var(--cat, var(--ink-muted)); font: 500 12px/16px var(--font-sans); white-space: nowrap; }
.echo-pill svg { width: 12px; height: 12px; }
.echo-avatar[class*="echo-cat-"] { background: var(--cat-soft); color: var(--cat); }

/* ---------- Density ---------- */
.echo-compact .echo-seg__source, .echo-compact .echo-seg__target { padding: var(--space-1) var(--space-3); font-size: 14px; line-height: 22px; }
.echo-compact .echo-seg__id { padding-top: var(--space-1); padding-bottom: var(--space-1); line-height: 22px; }
.echo-compact .echo-seg__status { padding-top: 7px; }

@media (prefers-reduced-motion: reduce) {
  .echo-btn, .echo-dropzone { transition: none; }
}