/* schema — app styles. Tokens first (light is the default, [data-theme="dark"]
   overrides, [data-mode] on <body> sets the mode accent), then components,
   then the shell. */

/* ================= tokens ================= */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;            /* panels, cards, popovers, inputs */
  --bg-sunken: #f4f5f7;     /* canvas, wells, segmented tracks */
  --bg-hover: #eef0f3;
  --bg-active: #e4e7eb;
  --line: #e1e4e8;          /* hairlines between regions */
  --line-strong: #c9ced5;   /* control borders */
  --fg: #1c2026;
  --fg-muted: #5b636e;      /* secondary text */
  --fg-faint: #858d98;      /* icons, placeholders, disabled */
  --accent: #0a62d0;
  --accent-solid: #0a62d0;
  --accent-soft: #e8f0fd;
  --accent-line: #a9c8f5;
  --focus-ring: 0 0 0 3px #0a62d033;
  --add: #1b7f3a;  --add-soft: #e6f5ea;  --add-line: #8fcf9f;
  --del: #c62a31;  --del-soft: #fcebec;  --del-line: #eea5a8;
  --mod: #935f00;  --mod-soft: #fcf2d9;  --mod-line: #e2c178;
  --cmp: #6f45d6;  --cmp-soft: #f3effd;  --cmp-line: #c9b7f4;
  --dsg: #0b7593;  --dsg-soft: #e5f4f8;  --dsg-line: #9fd2e1;
  --canvas: #f4f5f7;
  --canvas-dot: #d3d8de;
  --node-row-line: #eef0f3;
  --key-pk: #1c2026;  --key-fk: #0a62d0;  --key-uq: #5b636e;
  --shadow-1: 0 1px 2px rgba(20,24,30,.06);
  --shadow-pop: 0 1px 2px rgba(20,24,30,.06), 0 8px 24px rgba(20,24,30,.14);
  --scrim: rgba(20,24,30,.28);
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-15: 15px; --fs-20: 20px;
  --mono-11: 11px; --mono-12: 12px; --mono-13: 13px;
  --lh: 1.45;
  --r-1: 3px; --r-2: 5px; --r-3: 8px; --r-4: 12px;
  --h-sm: 24px; --h-md: 28px; --h-lg: 32px;
  --topbar-h: 44px; --canvasbar-h: 40px; --sidebar-w: 264px; --details-w: 340px; --editor-w: 520px;
  --mode: var(--fg-muted); --mode-soft: var(--bg); --mode-line: var(--line); --mode-stripe: transparent;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #16191e;
  --bg-sunken: #0f1114;
  --bg-hover: #1f232a;
  --bg-active: #292e36;
  --line: #262b32;
  --line-strong: #3a414b;
  --fg: #e3e7ec;
  --fg-muted: #9ba4af;
  --fg-faint: #6c757f;
  --accent: #6aa6f9;
  --accent-solid: #2f6fdb;
  --accent-soft: #172538;
  --accent-line: #2c4f80;
  --focus-ring: 0 0 0 3px #6aa6f940;
  --add: #5cc47a;  --add-soft: #13281b;  --add-line: #2a6139;
  --del: #f07a7f;  --del-soft: #33181b;  --del-line: #74303a;
  --mod: #e3ae4c;  --mod-soft: #2d2311;  --mod-line: #6b501c;
  --cmp: #ab91f8;  --cmp-soft: #211b36;  --cmp-line: #4b3c86;
  --dsg: #52bfdf;  --dsg-soft: #0f252d;  --dsg-line: #20586a;
  --canvas: #0f1114;
  --canvas-dot: #242930;
  --node-row-line: #22262d;
  --key-pk: #e3e7ec;  --key-fk: #6aa6f9;  --key-uq: #9ba4af;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-pop: 0 0 0 1px rgba(255,255,255,.02), 0 10px 28px rgba(0,0,0,.55);
  --scrim: rgba(0,0,0,.5);
}
body[data-mode="compare"] { --mode: var(--cmp); --mode-soft: var(--cmp-soft); --mode-line: var(--cmp-line); --mode-stripe: var(--cmp); }
body[data-mode="design"]  { --mode: var(--dsg); --mode-soft: var(--dsg-soft); --mode-line: var(--dsg-line); --mode-stripe: var(--dsg); }

/* ================= base ================= */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font: var(--fs-13)/var(--lh) var(--font-ui); }
body { display: flex; flex-direction: column; overflow: hidden; border-top: 2px solid var(--mode-stripe); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code, .mono { font-family: var(--font-mono); font-size: var(--mono-12); }
[hidden] { display: none !important; }
.spacer { flex: 1; }
.vsep { width: 1px; height: 20px; background: var(--line); flex: none; }
.muted { color: var(--fg-muted); }
::placeholder { color: var(--fg-faint); }

kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px;
  border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: var(--r-1);
  font: var(--mono-11)/1 var(--font-mono); color: var(--fg-muted); background: var(--bg); }
.sc { font: 10px/1 var(--font-mono); color: var(--fg-faint); }
.btn--primary .sc { color: inherit; opacity: .8; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--h-md); padding: 0 10px;
  border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--bg); white-space: nowrap; }
.btn:hover { background: var(--bg-hover); }
.btn:active { background: var(--bg-active); }
.btn:focus-visible, .icon-btn:focus-visible, .input:focus, .seg button:focus-visible, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.btn:disabled { color: var(--fg-faint); border-color: var(--line); background: var(--bg); cursor: default; }
.btn--sm { height: var(--h-sm); padding: 0 8px; font-size: var(--fs-12); }
.btn--lg { height: var(--h-lg); padding: 0 14px; }
.btn--block { width: 100%; }
.btn--primary { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; font-weight: 600; }
.btn--primary:hover { background: var(--accent-solid); filter: brightness(1.08); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--accent); }
.btn--ghost:hover { background: var(--bg-hover); }
.btn--danger { color: var(--del); }
.btn--danger.btn--solid { background: var(--del); border-color: var(--del); color: #fff; font-weight: 600; }
.icon-btn { width: var(--h-md); height: var(--h-md); display: inline-flex; align-items: center; justify-content: center; flex: none;
  border: 1px solid transparent; border-radius: var(--r-2); background: transparent; color: var(--fg-muted); }
.icon-btn:hover { background: var(--bg-hover); color: var(--fg); }
.icon-btn--bordered { border-color: var(--line-strong); }
.caret::after { content: "▾"; font-size: 10px; color: var(--fg-faint); margin-left: 2px; }
/* update banner: one thin line above the whole app */
.update-banner { flex: none; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 26px; padding: 3px 36px; position: relative;
  background: var(--mod-soft); color: var(--mod); border-bottom: 1px solid var(--mod-line); font-size: var(--fs-12); text-align: center; flex-wrap: wrap; }
.update-banner[hidden] { display: none; }
.update-banner b { font-weight: 600; }
.update-banner .linkish { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.update-banner code { font: var(--mono-11)/1.4 var(--font-mono); padding: 1px 6px; border: 1px solid var(--mod-line); border-radius: var(--r-1); background: var(--bg); color: var(--fg); cursor: copy; }
.update-banner .update-banner__close { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: inherit; font-size: 15px; line-height: 1; cursor: pointer; opacity: .7; padding: 2px 4px; }
.update-banner .update-banner__close:hover { opacity: 1; }
.dialog--whatsnew { width: min(640px, 94vw); }
.dialog--whatsnew .dialog__body { max-height: 70vh; overflow: auto; }
.whatsnew__ver { margin: 14px 0 2px; font-size: var(--fs-13); }
.whatsnew__ver span { font-weight: 400; color: var(--fg-muted); font-size: var(--fs-12); }
.dialog--whatsnew h4 { margin: 8px 0 2px; font-size: var(--fs-12); }
.dialog--whatsnew ul { padding-left: 18px; margin: 4px 0; font-size: var(--fs-12); color: var(--fg-muted); }
.dialog--whatsnew li { margin: 3px 0; }
.dialog--whatsnew .dialog__body p { margin: 4px 0; }
.whatsnew__how { margin-top: 12px !important; }
.whatsnew__how code { cursor: copy; }

/* ---------- segmented ---------- */
.seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 7px; }
.seg button { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 0; border-radius: var(--r-2);
  background: transparent; color: var(--fg-muted); font-size: var(--fs-12); white-space: nowrap; }
.seg button:hover { color: var(--fg); }
.seg button[aria-pressed="true"] { background: var(--bg); color: var(--fg); font-weight: 600; box-shadow: var(--shadow-1); }
.seg--fill { display: flex; }
.seg--fill button { flex: 1; justify-content: center; }
.seg--mode { border-radius: var(--r-3); flex: none; }
.seg--mode button { height: 26px; padding: 0 10px; font-size: var(--fs-13); font-weight: 600; border-radius: 6px; }
.seg--mode button[aria-pressed="true"] { color: var(--mode); box-shadow: var(--shadow-1), 0 0 0 1px var(--line); }
body[data-mode="browse"] .seg--mode button[aria-pressed="true"] { color: var(--fg); }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 16px; padding: 0 5px; border-radius: 8px;
  font: 600 var(--mono-11) var(--font-mono); background: var(--bg-active); color: var(--fg-muted); }
.count:empty { display: none; }
.seg--mode button[aria-pressed="true"] .count { background: var(--mode-soft); color: var(--mode); }

/* scope lens: Changes N [− depth +] | All tables N */
.lens button .n { font: var(--mono-11) var(--font-mono); }
.lens button[aria-pressed="true"] { color: var(--mode); border: 1px solid var(--mode-line); padding-right: 4px; }
.lens button[aria-pressed="true"] .n { color: var(--mode); }
.stepper { display: inline-flex; align-items: center; gap: 2px; height: 16px; padding-left: 4px; border-left: 1px solid var(--mode-line); color: var(--fg-muted); font-weight: 400; }
.stepper span[role="button"] { width: 14px; text-align: center; border-radius: var(--r-1); cursor: pointer; }
.stepper span[role="button"]:hover { background: var(--bg-hover); color: var(--fg); }
.stepper span[aria-disabled="true"] { opacity: .35; cursor: default; }
.stepper output { font: var(--mono-11) var(--font-mono); color: var(--fg); min-width: 14px; text-align: center; }
.lens-hint { font-size: var(--fs-11); color: var(--fg-muted); }

/* ---------- chips ---------- */
.chip { display: inline-flex; align-items: stretch; height: var(--h-sm); border: 1px solid var(--accent-line); border-radius: var(--r-2);
  background: var(--accent-soft); color: var(--accent); font: var(--mono-12)/22px var(--font-mono); white-space: nowrap; overflow: hidden; flex: none; }
.chip > b, .chip > .chip__lbl { padding: 0 6px; font-weight: 600; }
.chip > .chip__lbl { border: 0; background: none; color: inherit; font: inherit; }
.chip > i { font: var(--fs-12)/22px var(--font-ui); color: var(--fg-muted); font-style: normal; padding-left: 6px; margin-right: 4px; }
.chip button { border: 0; background: none; color: inherit; padding: 0; }
.chip button:hover:not(:disabled) { background: color-mix(in srgb, currentColor 14%, transparent); }
.chip button:disabled { opacity: .35; cursor: default; }
.chip__n { align-self: center; font-size: 10.5px; background: var(--bg); border-radius: 8px; padding: 0 5px; margin-right: 4px; line-height: 16px; color: var(--fg-muted); }
.chip__n.warn { color: var(--del); }
.chip__depth { display: inline-flex; align-items: center; border-left: 1px solid var(--accent-line); font: var(--fs-11) var(--font-ui); }
.chip__depth button { width: 18px; height: 100%; }
.chip__x { width: 20px; border-left: 1px solid var(--accent-line) !important; font-size: 13px; }
.chip--rule { border-color: var(--line-strong); background: var(--bg-sunken); color: var(--fg); }
.chip--rule .chip__x { border-color: var(--line-strong) !important; color: var(--fg-muted); }
.chip--paused { border-style: dashed; border-color: var(--line-strong); background: none; color: var(--fg-faint); text-decoration: line-through; padding: 0 6px; cursor: pointer; }
.chip--paused:hover { color: var(--fg-muted); }
.chip-more { border: 1px dashed var(--line-strong); background: none; border-radius: var(--r-2); font-size: var(--fs-11); color: var(--fg-muted); padding: 0 6px; height: var(--h-sm); }
.chip-input { border: 0; outline: 0; background: transparent; font: var(--mono-12) var(--font-mono); min-width: 70px; flex: 1 1 150px; height: var(--h-sm); padding: 0 4px; }
.filter-bar > .btn { flex: none; }
.chip-input:focus { outline: none; }

/* ---------- badges, pills, keys ---------- */
.badge { display: inline-flex; align-items: center; justify-content: center; height: 16px; padding: 0 4px; border: 1px solid; border-radius: var(--r-1);
  font: 700 10px/1 var(--font-ui); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.badge--add { color: var(--add); border-color: var(--add-line); }
.badge--mod { color: var(--mod); border-color: var(--mod-line); }
.badge--del { color: var(--del); border-color: var(--del-line); }
.badge--mode { color: var(--mode); border-color: var(--mode-line); }
.badge--muted { color: var(--fg-muted); border-color: var(--line-strong); }
.pill { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 9px; font: 600 var(--mono-11) var(--font-mono); }
.pill--add { background: var(--add-soft); color: var(--add); }
.pill--del { background: var(--del-soft); color: var(--del); }
.pill--mod { background: var(--mod-soft); color: var(--mod); }
.pill--none { background: var(--bg-active); color: var(--fg-muted); }
.key { font: 700 9.5px var(--font-mono); margin-right: 2px; }
.key--pk { color: var(--key-pk); } .key--fk { color: var(--key-fk); } .key--uq { color: var(--key-uq); } .key--ix { color: var(--fg-muted); }
.sign { font: 700 var(--mono-12) var(--font-mono); width: 10px; display: inline-block; text-align: center; }
.sign--add { color: var(--add); } .sign--del { color: var(--del); } .sign--mod { color: var(--mod); }
.dot { width: 6px; height: 6px; border-radius: 3px; display: inline-block; background: var(--fg-faint); }
.dot--mod { background: var(--mod); } .dot--add { background: var(--add); }

/* ---------- inputs ---------- */
.input { height: var(--h-md); padding: 0 8px; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--bg); min-width: 0; color: var(--fg); }
.input--sm { height: var(--h-sm); font-size: var(--fs-12); }
.input--mono { font: var(--mono-12) var(--font-mono); }
.input--well { background: var(--bg-sunken); }
textarea.input { height: auto; min-height: 52px; padding: 6px 8px; resize: vertical; font-size: var(--fs-12); line-height: 1.4; }
select.input { padding: 0 6px; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--accent-solid); margin: 0; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field > span { font-size: var(--fs-11); color: var(--fg-muted); }

/* ---------- section headers ---------- */
.sh { display: flex; align-items: baseline; gap: 4px; margin: 0; padding: 0 6px 4px; font-size: var(--fs-12); font-weight: 600; }
.sh > span { color: var(--fg-muted); font-weight: 400; }
.sh > em { margin-left: auto; font-style: normal; font-weight: 400; font-size: var(--fs-11); color: var(--fg-muted); white-space: nowrap; }
.gh { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px; margin-top: 4px; font: 600 var(--fs-11) var(--font-ui); color: var(--fg-muted); }
.gh code { font: inherit; font-family: var(--font-mono); flex: 1; }
.gh .tri { font-size: 9px; color: var(--fg-faint); }
.gh span { font-weight: 400; }

/* ---------- list rows ---------- */
.lrow { display: flex; align-items: center; gap: 8px; height: 24px; padding: 0 6px; border-radius: var(--r-2); font: var(--mono-12) var(--font-mono); cursor: pointer; }
.lrow:hover { background: var(--bg-hover); }
.lrow[aria-selected="true"] { background: var(--accent-soft); color: var(--accent); }
.lrow.is-out, .lrow.is-hidden { color: var(--fg-muted); }
.lrow--indent { padding-left: 20px; }
.lrow__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow__name.del { text-decoration: line-through; }
.lrow__n { width: 18px; text-align: right; font-size: var(--mono-11); color: var(--fg-muted); }
.lrow__tag, .lrow__kind { font: 10px var(--font-ui); color: var(--fg-faint); }
.lrow__kind { width: 26px; font-family: var(--font-mono); }
.lrow__sum { font-size: var(--mono-11); color: var(--fg-muted); white-space: nowrap; }
.lrow .badge { width: 54px; }
.lrow--change { height: 26px; }
.crow { display: grid; grid-template-columns: minmax(58px, max-content) minmax(0, 1fr); gap: 0 8px; padding: 5px 6px; border-radius: var(--r-2); cursor: pointer; }
.crow:hover { background: var(--bg-hover); }
.crow[aria-selected="true"] { background: var(--accent-soft); }
.crow__sha { font: var(--mono-12) var(--font-mono); color: var(--accent); white-space: nowrap; }
.crow__subj { font-size: var(--fs-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crow__meta { grid-column: 2; font-size: var(--fs-11); color: var(--fg-muted); }
.orow { display: grid; grid-template-columns: 16px 14px 1fr 16px; gap: 0 4px; padding: 5px 6px; border-radius: var(--r-2); align-items: start; }
.orow:hover { background: var(--bg-hover); }
.orow__i { font: var(--mono-11) var(--font-mono); color: var(--fg-faint); padding-top: 1px; }
.orow code { display: block; overflow-wrap: anywhere; line-height: 1.35; }
.orow small { display: block; font-size: var(--fs-11); color: var(--fg-muted); line-height: 1.35; }
.orow[data-status="err"] { background: var(--del-soft); }
.orow[data-status="err"] small { color: var(--del); }
.orow .x { visibility: hidden; border: 0; background: none; color: var(--fg-faint); padding: 0; line-height: 1.35; }
.orow:hover .x { visibility: visible; }
.orow .x:hover { color: var(--del); }
.list-empty { padding: 8px 6px; color: var(--fg-muted); font-size: var(--fs-12); }

/* ---------- menus & popovers ---------- */
.menu-wrap { position: relative; }
.menu, .popover { position: absolute; z-index: 40; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-3); box-shadow: var(--shadow-pop); color: var(--fg); }
.menu { min-width: 240px; padding: 4px; right: 0; top: calc(100% + 6px); }
.menu--left { right: auto; left: 0; }
.menu__head { padding: 8px 8px 2px; font-size: var(--fs-11); font-weight: 600; color: var(--fg-muted); white-space: nowrap; }
.menu__head span { font-weight: 400; }
.menu__item { display: flex; align-items: center; gap: 8px; width: 100%; height: 28px; padding: 0 8px; border: 0; border-radius: var(--r-2); background: none; text-align: left; white-space: nowrap; }
.menu__item:hover, .menu__item[aria-selected="true"] { background: var(--bg-hover); }
.menu__item > :first-child { flex: 1; }
.menu__item[aria-checked="true"]::before { content: "✓"; color: var(--mode); width: 14px; flex: none; }
.menu__item.is-current { color: var(--accent); }
.menu__desc { font-size: var(--fs-11); color: var(--fg-muted); }
.menu__item--danger { color: var(--del); }
.menu__sep { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.menu__foot { margin: 4px -4px -4px; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--bg-sunken); border-radius: 0 0 var(--r-3) var(--r-3); font-size: var(--fs-11); color: var(--fg-muted); }
.context-menu { position: fixed; }
.context-menu .menu__head { font-family: var(--font-mono); }
.popover { width: 320px; overflow: hidden; position: fixed; }
.popover__head { padding: 10px 12px; border-bottom: 1px solid var(--line); font-weight: 600; display: flex; align-items: baseline; gap: 6px; }
.popover__head span { color: var(--fg-muted); font-weight: 400; font-size: var(--fs-12); }
.popover__body { padding: 6px 12px; max-height: min(70vh, 560px); overflow: auto; font-size: var(--fs-12); }
.popover__foot { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--bg-sunken); font-size: var(--fs-12); }
.popover .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0; }
.popover .row > span:first-child { color: var(--fg-muted); white-space: nowrap; }
.popover .row.col { flex-direction: column; align-items: stretch; }
.popover .row select, .popover .row input[type=text], .popover .row input[type=number] { height: 26px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--bg); min-width: 0; font-size: var(--fs-12); }
.popover .row select { max-width: 170px; }
.popover .row input[type=text] { font-family: var(--font-mono); width: 100%; }
.popover .row input[type=number] { width: 80px; }
.popover .row input[type=range] { flex: 1; max-width: 150px; }
.popover .check { display: flex; align-items: center; gap: 6px; margin: 5px 0; cursor: pointer; font-size: var(--fs-12); }
.popover h4 { margin: 12px 0 4px; font-size: var(--fs-11); font-weight: 600; color: var(--fg-muted); }
.popover h4:first-child { margin-top: 6px; }
.why { list-style: none; margin: 0; padding: 0; }
.why li { display: flex; align-items: center; gap: 8px; min-height: 26px; }
.why li b { font: 600 var(--mono-12) var(--font-mono); width: 22px; text-align: right; flex: none; }
.why li span { flex: 1; }
.why li .btn { margin-left: auto; }
.schema-checks { display: flex; flex-wrap: wrap; gap: 4px 12px; }

/* display popover (layout, columns, relations, objects) */
.display-pop { width: 340px; max-height: min(78vh, 760px); overflow: auto; padding: 4px 14px 12px; }
.display-pop details { border-bottom: 1px solid var(--line); padding: 6px 0 10px; }
.display-pop details:last-of-type { border-bottom: 0; }
.display-pop summary { cursor: pointer; font-weight: 600; padding: 4px 0; list-style: none; font-size: var(--fs-12); }
.display-pop summary::-webkit-details-marker { display: none; }
.display-pop summary::before { content: "▸"; display: inline-block; width: 14px; color: var(--fg-faint); transition: transform .15s; }
.display-pop details[open] > summary::before { transform: rotate(90deg); }
.display-pop details.advanced > summary { color: var(--fg-muted); font-weight: 500; }
.display-pop details.advanced h5 { margin: 10px 0 2px; font-size: var(--fs-11); font-weight: 600; color: var(--fg-muted); }
.display-pop .seg { display: flex; margin: 6px 0; }
.display-pop .seg button { flex: 1; justify-content: center; padding: 0 4px; }
.display-pop .seg.small { display: inline-flex; margin: 0; }
.display-pop .seg.small button { width: 30px; flex: none; }
.display-pop .row.buttons { justify-content: flex-start; margin-top: 10px; }

/* custom groups editor */
.groups-pop { width: 380px; }
.groups-pop .popover__body { padding: 8px 12px; display: flex; flex-direction: column; gap: 10px; }
.grp { border: 1px solid var(--line); border-radius: var(--r-3); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.grp__head { display: flex; align-items: center; gap: 6px; }
.grp__head input[type=color] { width: 22px; height: 22px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--bg); cursor: pointer; flex: none; }
.grp__head .grp__name { flex: 1; font-weight: 600; }
.grp__head .icon-btn { width: 22px; height: 22px; }
.grp__tables { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.grp__tables .chip-input { min-width: 120px; flex: 1 1 120px; }
.grp__meta { font-size: var(--fs-11); color: var(--fg-muted); }
.menu__item .swatch { width: 10px; height: 10px; border: 0; border-radius: 2px; flex: none; }

/* ref picker */
.refpick { width: 420px; max-width: calc(100vw - 16px); }
.refpick__top { display: flex; flex-direction: column; gap: 8px; padding: 8px; border-bottom: 1px solid var(--line); }
.refpick__top .input { width: 100%; height: 30px; }
.refpick__sides { display: flex; }
.refpick__sides button { flex: 1; justify-content: flex-start; height: 24px; }
.refpick__sides button[aria-pressed="true"] { color: var(--mode); }
.refpick__sides code { color: var(--fg); font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.refpick__sides kbd { align-self: center; margin: 0 6px; }
.refpick .popover__body { padding: 4px; max-height: min(60vh, 520px); }
.ref-item { display: flex; align-items: center; gap: 8px; width: 100%; height: 28px; padding: 0 8px; border: 0; background: none; border-radius: var(--r-2); text-align: left; }
.ref-item:hover, .ref-item.active { background: var(--bg-hover); }
.ref-item.current .l::after { content: " ✓"; color: var(--accent); }
.ref-item .l { font-family: var(--font-mono); font-size: var(--mono-12); white-space: nowrap; flex: none; }
.ref-item .d { color: var(--fg-muted); font-size: var(--fs-11); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; text-align: right; }
.ref-item.custom .l { color: var(--accent); font-family: var(--font-ui); }
.ref-item.preset { font-size: var(--fs-13); }
.ref-item.preset .l { font-family: var(--font-ui); flex: 1; }
.ref-item.preset .d { flex: none; font-family: var(--font-mono); }
.ref-item.preset[aria-checked="true"] { background: var(--mode-soft); }
.ref-item .chk { width: 14px; flex: none; color: var(--mode); font-size: 12px; }
.ref-item .k { width: 14px; text-align: right; flex: none; }
.ref-empty { padding: 12px; color: var(--fg-muted); text-align: center; }
.refpick .popover__foot b { font-weight: 600; cursor: pointer; }
.refpick .popover__foot b:hover { color: var(--accent); }

/* search results */
.search { position: relative; width: 300px; flex: 0 1 300px; min-width: 160px; }
.search .input { width: 100%; padding-right: 30px; }
.search > kbd { position: absolute; right: 6px; top: 5px; pointer-events: none; }
.search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-height: 60vh; overflow: auto; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-3); box-shadow: var(--shadow-pop); z-index: 30; padding: 4px; }
.search-results button { display: flex; width: 100%; text-align: left; border: 0; background: none; height: 26px; align-items: center; padding: 0 8px; border-radius: var(--r-2); gap: 6px; font: var(--mono-12) var(--font-mono); }
.search-results button:hover, .search-results button.active { background: var(--bg-hover); }
.search-results .col { color: var(--fg-muted); }
.search-results .hidden-tag { margin-left: auto; font: var(--fs-11) var(--font-ui); color: var(--fg-faint); }

/* dialogs */
.dialog { padding: 0; width: min(420px, 94vw); border: 1px solid var(--line-strong); border-radius: var(--r-4); background: var(--bg); color: var(--fg); box-shadow: var(--shadow-pop); }
.dialog::backdrop { background: var(--scrim); }
.dialog__body { padding: 16px 18px 10px; }
.dialog__body h3 { margin: 0 0 6px; font-size: var(--fs-15); }
.dialog__body p { margin: 0; font-size: var(--fs-12); color: var(--fg-muted); }
.dialog__foot { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 18px; border-top: 1px solid var(--line); }
.dialog--help { width: min(860px, 94vw); }
.dialog--help .dialog__body { padding: 18px 22px 8px; }
.help-version { font-weight: 400; font-size: var(--fs-12); color: var(--fg-muted); font-family: var(--font-mono); }
.dialog--help h4 { margin: 12px 0 4px; font-size: var(--fs-12); }
.dialog--help ul { padding-left: 18px; margin: 4px 0; font-size: var(--fs-12); color: var(--fg-muted); }
.dialog--help li { margin: 3px 0; }
.dialog--help li b { color: var(--fg); }
.dialog--help p { font-size: var(--fs-12); color: var(--fg-muted); margin: 4px 0; }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.legend { list-style: none; padding: 0 !important; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; border: 1.5px solid; }
.swatch.add { border-color: var(--add); background: var(--add-soft); } .swatch.del { border-color: var(--del); background: var(--del-soft); } .swatch.mod { border-color: var(--mod); background: var(--mod-soft); }

/* toasts */
.toast { position: fixed; left: 50%; bottom: 112px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px;
  min-height: 30px; padding: 6px 12px; border-radius: var(--r-3); box-shadow: var(--shadow-pop); font-size: var(--fs-12); max-width: 70vw; }
.toast--done { background: var(--fg); color: var(--bg); }
.toast--hint { position: absolute; left: 50%; bottom: 66px; transform: translateX(-50%); max-width: calc(100% - 340px); min-width: 0; background: var(--bg); border: 1px solid var(--line-strong); padding: 0 4px 0 12px; white-space: nowrap; z-index: 8; color: var(--fg-muted); box-shadow: var(--shadow-1); }
.toast--hint > span:first-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.toast--hint b { color: var(--fg); }
.toast--hint .icon-btn { width: 22px; height: 22px; }

/* ================= shell ================= */
.topbar { height: var(--topbar-h); flex: none; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--bg); }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; letter-spacing: -.01em; flex: none; }
.logo { width: 20px; height: 20px; display: block; }
.file { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 0 1 auto; }
.file__name { font: 600 var(--mono-12) var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 28vw; }
.file__meta { font: var(--mono-11) var(--font-mono); color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actions { display: flex; align-items: center; gap: 6px; flex: none; }
.actions .btn code { font-size: var(--mono-12); }

.layout { flex: 1; display: flex; min-height: 0; }
/* drag handles between the panels and the canvas (zero width, hit area overlaps the border) */
.resizer { position: relative; width: 0; flex: none; z-index: 7; }
.resizer::after { content: ""; position: absolute; top: 0; bottom: 0; left: -3px; width: 7px; cursor: col-resize; }
.resizer:hover::after, .resizer.active::after { background: var(--accent-line); }
#rz-right { display: none; }
.layout:has(#details:not([hidden]), #table-editor:not([hidden])) #rz-right { display: block; }
body.resizing { cursor: col-resize; user-select: none; }
body.resizing .canvas svg, body.resizing iframe { pointer-events: none; }
.sidebar { width: var(--sidebar-w); flex: none; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); background: var(--bg); }
.panel { display: none; flex: 1; min-height: 0; overflow: auto; padding: 8px 6px 16px; }
.panel.active { display: block; }
.panel-tools { padding: 0 6px 8px; display: flex; align-items: center; position: relative; }
.panel-tools .input { width: 100%; padding-right: 32px; }
.panel-tools .n { position: absolute; right: 14px; font: var(--mono-11) var(--font-mono); color: var(--fg-faint); pointer-events: none; }
.table-list, .history, .design-list, .changed-list { list-style: none; margin: 0; padding: 0; }
.sidebar__foot { padding: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; background: var(--bg); flex: none; }
.sidebar__foot .sh { white-space: nowrap; }
.sidebar__foot .row2 { display: flex; gap: 6px; }
.sidebar__foot .row2 > * { flex: 1; }
.sidebar__foot .paths { display: flex; flex-direction: column; gap: 2px; font: var(--mono-11) var(--font-mono); color: var(--fg-muted); overflow: hidden; }
.sidebar__foot .paths span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__foot .paths b { color: var(--fg); font-weight: 400; }
.toolbar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }

/* source card: first block of the sidebar in every mode */
.source { padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--mode-soft); border-bottom: 1px solid var(--mode-line); flex: none; }
.source__head { display: flex; align-items: center; justify-content: space-between; height: 20px; gap: 6px; }
.source__label { font-size: var(--fs-11); font-weight: 600; color: var(--mode); }
.source__state { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-11); color: var(--fg-muted); }
.source__title { font-size: var(--fs-15); font-weight: 600; line-height: 1.3; }
.source__title-input { width: 100%; font-size: var(--fs-15); font-weight: 600; line-height: 1.3; border: 0; background: transparent; padding: 0; margin: 0; border-radius: var(--r-1); }
.source__title-input:focus { outline: none; box-shadow: var(--focus-ring); }
.source__desc { width: 100%; font-size: var(--fs-12); color: var(--fg-muted); line-height: 1.4; border: 0; background: transparent; padding: 0; margin: 0; resize: none; border-radius: var(--r-1); font-family: inherit; }
.source__desc:focus { outline: none; box-shadow: var(--focus-ring); color: var(--fg); }
.source__meta { font: var(--mono-11) var(--font-mono); color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.source__foot { display: flex; align-items: center; gap: 4px; min-height: 20px; }
.source__foot .pills { display: inline-flex; gap: 4px; align-items: center; }
.source__foot .pills .lbl { font-size: var(--fs-11); color: var(--fg-muted); margin-left: 2px; }
.source p { margin: 0; font-size: var(--fs-12); color: var(--fg-muted); line-height: 1.45; }
.source p b { color: var(--fg); }
.refs { position: relative; border: 1px solid var(--mode-line); border-radius: var(--r-3); background: var(--bg); }
.ref { display: flex; align-items: center; gap: 8px; width: 100%; height: 40px; padding: 0 10px; border: 0; background: none; text-align: left; border-radius: var(--r-3); }
.ref + .ref { border-top: 1px solid var(--line); border-radius: 0 0 7px 7px; }
.refs .ref:first-child:not(:last-child) { border-radius: 7px 7px 0 0; }
.ref:hover, .ref[aria-expanded="true"] { background: var(--accent-soft); }
.ref::after { content: "▾"; font-size: 10px; color: var(--fg-faint); }
.ref__side { width: 50px; font-size: var(--fs-11); color: var(--fg-muted); flex: none; }
.ref__main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ref__main code { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref__main code.unset { color: var(--fg-faint); font-weight: 400; }
.ref__main small { font: var(--mono-11) var(--font-mono); color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ref--single { border: 1px solid var(--line-strong); }
.refs__swap { position: absolute; right: 30px; top: 28px; width: 24px; height: 24px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--fg-muted); padding: 0; font-size: 12px; line-height: 1; }
.refs__swap:hover { color: var(--fg); background: var(--bg-hover); }

/* canvas bar — filters, lens, count, display */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.canvasbar { min-height: var(--canvasbar-h); flex: none; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 10px; border-bottom: 1px solid var(--line); background: var(--bg); white-space: nowrap; }
.canvasbar__label { font-size: var(--fs-12); color: var(--fg-muted); flex: none; }
.filter-bar { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow: hidden; min-height: var(--canvasbar-h); }
/* expanded: chips wrap onto more lines so a long filter can be edited */
.canvasbar.expanded { align-items: flex-start; padding-top: 6px; padding-bottom: 6px; }
.canvasbar.expanded .filter-bar { flex-wrap: wrap; overflow: visible; row-gap: 6px; min-height: 0; }
.canvasbar.expanded > .btn, .canvasbar.expanded > .shown, .canvasbar.expanded > .vsep { margin-top: 2px; }
#fb-expand { color: var(--accent); }
#fb-clear { color: var(--fg-muted); }
.filter-bar .paused-lbl { font-size: var(--fs-11); color: var(--fg-faint); font-style: italic; }
.shown { display: inline-flex; align-items: center; gap: 6px; height: var(--h-sm); padding: 0 8px; border: 0; border-radius: var(--r-2); background: var(--bg-sunken); font-size: var(--fs-12); white-space: nowrap; flex: none; }
.shown:hover { background: var(--bg-hover); }
.shown b { font-weight: 600; }
.shown span { color: var(--fg-muted); }
#display-btn span { color: var(--fg-muted); font-weight: 400; }

.canvas { flex: 1; position: relative; overflow: hidden; background-color: var(--canvas);
  background-image: radial-gradient(var(--canvas-dot) 1px, transparent 1px); background-size: 20px 20px; }
.sch-viewer { cursor: grab; }
.sch-viewer.sch-panning { cursor: grabbing; }
.sch-viewer.sch-dragging, .sch-viewer.sch-dragging * { cursor: move !important; }
/* the select tool: an arrow; the hand tool (or Space held): a hand everywhere, tables included */
.sch-viewer.sch-tool-pointer, .sch-viewer.sch-tool-pointer svg.sv * { cursor: default; }
.sch-viewer.sch-tool-hand, .sch-viewer.sch-tool-hand svg.sv * { cursor: grab; }
.sch-viewer.sch-tool-hand.sch-panning, .sch-viewer.sch-tool-hand.sch-panning svg.sv * { cursor: grabbing; }
.sch-marquee { position: absolute; z-index: 4; pointer-events: none; border: 1px solid var(--accent, #0a62d0); background: color-mix(in srgb, var(--accent, #0a62d0) 10%, transparent); border-radius: 2px; }
/* floating tool bar: select / hand */
.tools { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 6; display: flex; gap: 4px; padding: 4px;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-4); box-shadow: var(--shadow-pop); }
.tools .tool { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--r-3); background: none; color: var(--fg); }
.tools .tool:hover { background: var(--bg-hover); }
.tools .tool[aria-pressed="true"] { background: var(--accent-solid); color: #fff; }
.sch-viewer .sv-bg { fill: transparent; }
/* diagram tooltip (rows, headers, edges) */
.sch-tip { position: absolute; z-index: 9; max-width: 400px; padding: 7px 10px 8px; background: var(--bg); color: var(--fg); border: 1px solid var(--line-strong); border-radius: var(--r-3); box-shadow: var(--shadow-pop); font: var(--mono-12)/1.45 var(--font-mono); pointer-events: none; overflow-wrap: anywhere; --ax: 18px; }
.sch-tip::before { content: ""; position: absolute; top: -6px; left: var(--ax); width: 10px; height: 10px; background: var(--bg); border-left: 1px solid var(--line-strong); border-top: 1px solid var(--line-strong); transform: rotate(45deg); }
.sch-tip.above::before { top: auto; bottom: -6px; transform: rotate(225deg); }
.sch-tip b { display: block; font-weight: 600; margin-bottom: 3px; white-space: pre-wrap; }
.sch-tip b:only-child { margin: 0; }
.sch-tip .l { display: flex; gap: 6px; color: var(--fg-muted); }
.sch-tip .l i { flex: none; width: 18px; font: 700 9.5px/18px var(--font-mono); color: var(--fg-faint); text-align: left; font-style: normal; }
.sch-tip .l.note { color: var(--fg); font-family: var(--font-ui); }
.sch-tip .l span { white-space: pre-wrap; }
.sch-minimap { position: absolute; left: 12px; bottom: 12px; width: 150px; height: 100px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-3); box-shadow: var(--shadow-1); cursor: crosshair; opacity: .95; }
.zoom { position: absolute; right: 12px; bottom: 12px; display: flex; height: 28px; background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--r-3); box-shadow: var(--shadow-1); overflow: hidden; z-index: 5; }
.zoom button { width: 28px; border: 0; background: none; color: var(--fg-muted); font-size: 14px; padding: 0; }
.zoom button:hover { background: var(--bg-hover); color: var(--fg); }
.zoom #zoom-level { width: auto; padding: 0 6px; font: var(--mono-11) var(--font-mono); color: var(--fg); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.zoom #zoom-fit { border-left: 1px solid var(--line); }
.loading, .empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--fg-muted); font-size: 14px; pointer-events: none; text-align: center; }
.empty { pointer-events: auto; flex-direction: column; gap: 10px; }
.empty .btns { display: flex; gap: 6px; }

/* right panel: details, or the docked table editor (same slot) */
.details { width: var(--details-w); flex: none; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); background: var(--bg); }
.details--editor { width: var(--editor-w); box-shadow: -8px 0 24px -16px rgba(0,0,0,.25); }
.details__head { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; flex: none; }
.details__title { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 var(--fs-15) var(--font-mono); min-width: 0; }
.details__title .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.details__title .schema { color: var(--fg-muted); font-weight: 400; }
.details__title .close { margin-left: auto; width: 24px; height: 24px; font-size: 15px; }
.details__comment { font-size: var(--fs-12); color: var(--fg-muted); margin: 0; }
.details__tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; align-items: center; }
.details__tools select.btn { padding: 0 6px; }
.details__tools input[type=color] { width: 24px; height: 24px; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--bg); cursor: pointer; }
.details__body { flex: 1; min-height: 0; overflow: auto; padding: 10px 14px 20px; }
.details__body .sh { padding: 14px 0 4px; }
.details__body .sh:first-child { padding-top: 0; }
.details__foot { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); flex: none; }
.cols { width: 100%; border-collapse: collapse; font: var(--mono-12) var(--font-mono); table-layout: fixed; }
.cols col.c-sign { width: 12px; } .cols col.c-key { width: 24px; } .cols col.c-type { width: 38%; } .cols col.c-eye { width: 20px; }
.cols td { height: 22px; padding: 2px 3px; border-bottom: 1px solid var(--node-row-line); vertical-align: top; }
.cols td.sign { padding-left: 0; }
.cols td.flags { white-space: nowrap; }
.cols td.flags .key + .key { margin-left: 2px; }
.cols td.type { text-align: right; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cols td.name { overflow-wrap: anywhere; }
.cols tr.added { background: var(--add-soft); } .cols tr.removed { background: var(--del-soft); } .cols tr.modified { background: var(--mod-soft); }
.cols tr.removed td.name, .cols tr.removed td.type { text-decoration: line-through; color: var(--del); }
.cols tr.added td.type { color: var(--add); } .cols tr.modified td.type { color: var(--mod); }
.cols tr.hidden-col td.name { opacity: .45; }
.cols .eye { border: 0; background: none; opacity: .3; padding: 0; font-size: 12px; }
.cols tr:hover .eye { opacity: 1; }
.cols .dflt { display: block; color: var(--fg-muted); font-size: var(--mono-11); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cols .chg { display: block; color: var(--mod); font-size: var(--mono-11); }
.cols .nul { color: var(--fg-faint); }
.list { list-style: none; padding: 0; margin: 0; font: var(--mono-12) var(--font-mono); }
.list li { padding: 3px 0; min-height: 22px; border-bottom: 1px solid var(--node-row-line); word-break: break-word; }
.list li.added { color: var(--add); } .list li.removed { color: var(--del); text-decoration: line-through; } .list li.modified { color: var(--mod); }
.list li .dir { color: var(--fg-faint); display: inline-block; width: 14px; }
.link { color: var(--accent); cursor: pointer; text-decoration: none; }
.link:hover { text-decoration: underline; }
pre.def { background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--r-2); padding: 8px; font-size: var(--mono-11); overflow: auto; max-height: 280px; white-space: pre-wrap; margin: 0; }
pre.ddiff { max-height: none; padding: 6px 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
pre.ddiff span { display: block; padding: 0 8px 0 18px; text-indent: -14px; }
pre.ddiff i { display: inline-block; width: 14px; font-style: normal; font-weight: 700; color: var(--fg-faint); }
pre.ddiff .add { background: var(--add-soft); } pre.ddiff .add i { color: var(--add); }
pre.ddiff .del { background: var(--del-soft); } pre.ddiff .del i { color: var(--del); }

/* docked table editor */
.te-head-row { display: flex; align-items: center; gap: 8px; }
.te-head-row .lbl { font-size: var(--fs-11); font-weight: 600; color: var(--mode); }
.te-head-row .hint { font-size: var(--fs-11); color: var(--fg-muted); margin-left: auto; }
.te-top { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.te-top .input { height: 32px; font: 600 var(--mono-13) var(--font-mono); }
.te-top .input.comment { font: var(--fs-13) var(--font-ui); height: 28px; }
.te-section { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.te-section:first-child { margin-top: 0; }
.te-section .sh { padding: 0; }
.te-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) 40px minmax(0,.8fr) 44px 20px; gap: 4px; align-items: center; margin-top: 4px; }
.te-grid--fk { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr) 110px 20px; }
.te-grid--ix { grid-template-columns: minmax(0,1.4fr) 50px minmax(0,1fr) 20px; }
.te-grid > .h { font-size: var(--fs-11); color: var(--fg-muted); padding: 0 2px; }
.te-grid > .h.c { text-align: center; }
.te-grid .input { height: 26px; font: var(--mono-12) var(--font-mono); padding: 0 7px; width: 100%; }
.te-grid .input.te-new { border-color: var(--add-line); }
.te-grid .c { justify-self: center; }
.te-grid select.input { padding: 0 4px; font-family: var(--font-ui); }
.te-del { border: 0; background: none; color: var(--fg-faint); padding: 0; text-align: center; }
.te-del:hover { color: var(--del); }
.te-err { margin-top: 12px; padding: 7px 10px; border-radius: var(--r-2); background: var(--del-soft); color: var(--del); font-size: var(--fs-12); }
.te-note { margin-top: 10px; }

/* design sidebar */
.design-list li { display: flex; align-items: baseline; gap: 8px; height: 26px; padding: 0 6px; border-radius: var(--r-2); cursor: pointer; }
.design-list li:hover { background: var(--bg-hover); }
.design-list .name { font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.design-list .meta { color: var(--fg-muted); font-size: var(--fs-11); white-space: nowrap; }
.design-list .x { visibility: hidden; border: 0; background: none; color: var(--fg-faint); padding: 0 2px; align-self: center; }
.design-list li:hover .x { visibility: visible; }
.design-list .x:hover { color: var(--del); }
.other-changes { color: var(--fg-muted); font-size: var(--fs-12); margin: 10px 6px 0; cursor: help; }

@media (max-width: 1180px) { :root { --details-w: 320px; --editor-w: 460px; } .file__name { max-width: 18vw; } .search { flex-basis: 220px; } }
@media (max-width: 900px) { .sidebar { width: 240px; } .brand span { display: none; } .topbar .file, .topbar .file + .vsep, .brand + .vsep { display: none; } }

/* phones: the sidebar becomes a drawer, the details panel covers the diagram */
.sidebar-btn, .sidebar-scrim { display: none; }
@media (max-width: 640px) {
  .topbar { gap: 6px; padding: 0 8px; }
  .sidebar-btn { display: inline-flex; }
  .topbar .brand, .topbar .search, #bug-btn, #theme-btn { display: none; }
  .seg--mode button { padding: 0 7px; }
  .layout { position: relative; }
  .sidebar { position: absolute; top: 0; bottom: 0; left: 0; z-index: 30; width: min(320px, 86vw);
    transform: translateX(-102%); transition: transform .18s ease; box-shadow: 8px 0 24px -12px rgba(0,0,0,.35); }
  body.sidebar-open .sidebar { transform: none; }
  body.sidebar-open .sidebar-scrim { display: block; position: absolute; inset: 0; z-index: 29; background: rgba(0,0,0,.3); }
  .resizer { display: none !important; }
  .details, .details--editor { position: absolute; top: 0; right: 0; bottom: 0; z-index: 25; width: 100%; border-left: 0; }
  .canvasbar { overflow-x: auto; scrollbar-width: none; }
  .canvasbar .filter-bar { flex: 0 0 auto; }
}
@media (max-width: 420px) { .actions .menu-wrap:has(#export-btn) { display: none; } }
@media (max-width: 640px) and (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* a narrow diagram has no room for the overlays */
.canvas.is-narrow .toast--hint { display: none; }
.canvas.is-cramped .sch-minimap { display: none !important; }
.input[aria-invalid="true"], .input[aria-invalid="true"]:focus { border-color: var(--del); box-shadow: 0 0 0 3px var(--del-soft); }
input[aria-invalid="true"]::placeholder { color: var(--del); }

/* bug reports: the recording bar, the dialog */
.rec-bar { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 30px; padding: 3px 16px; flex-wrap: wrap;
  background: #c62a31; color: #fff; font-size: var(--fs-12); } /* the same deep red in both themes: white text stays readable */
.rec-bar[hidden] { display: none; }
.rec-bar #rec-time { font: var(--mono-12) var(--font-mono); }
.rec-bar .rec-sep { opacity: .6; }
.rec-bar .rec-hint { opacity: .9; margin-left: 6px; }
.rec-bar .rec-stop { background: #fff; color: #c62a31; border-color: #fff; font-weight: 600; }
.rec-bar .rec-stop:hover { background: #fdecec; }
.rec-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.rec-bar .rec-dot { background: #fff; animation: rec-pulse 1.2s ease-in-out infinite; }
.btn--primary .rec-dot { background: #fff; margin-right: 7px; vertical-align: 0; }
@keyframes rec-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .rec-bar .rec-dot { animation: none; } }
#bug-btn.is-recording { color: var(--del); }
.dialog--bug { width: min(560px, 94vw); }
.dialog--bug .dialog__foot { align-items: center; }
.dialog--bug .spacer, .dialog__foot .spacer { flex: 1; }
.bug p { margin: 0 0 10px; font-size: var(--fs-13); color: var(--fg-muted); line-height: 1.5; }
.bug__steps { list-style: none; counter-reset: step; margin: 14px 0; padding: 0; display: grid; gap: 10px; }
.bug__steps li { counter-increment: step; display: grid; grid-template-columns: 28px 1fr; column-gap: 10px; font-size: var(--fs-13); }
.bug__steps li::before { content: counter(step); grid-row: span 2; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 700; display: grid; place-items: center; font-size: var(--fs-12); }
.bug__steps b { color: var(--fg); }
.bug__steps span { color: var(--fg-muted); font-size: var(--fs-12); }
.bug p.bug__fine { font-size: var(--fs-12); color: var(--fg-faint); margin: 12px 0 0; }
.bug__meta { font-size: var(--fs-12) !important; }
.bug__errs { color: var(--del); font-weight: 600; }
.bug__field { display: grid; gap: 4px; margin: 10px 0; font-size: var(--fs-12); font-weight: 600; color: var(--fg); }
.bug__field textarea { font: var(--fs-13)/1.45 var(--font-ui); padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-2); background: var(--bg); color: var(--fg); resize: vertical; }
.bug__field textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.bug__field textarea[aria-invalid="true"] { border-color: var(--del); box-shadow: 0 0 0 3px var(--del-soft); }
.bug__hide { font-size: var(--fs-12); margin: 6px 0 8px; display: block; line-height: 1.5; }
.bug__hide input { margin: 0 6px 0 0; vertical-align: -2px; }
.bug__preview summary { cursor: pointer; font-size: var(--fs-12); font-weight: 600; color: var(--fg-muted); padding: 4px 0; }
.bug__preview textarea { width: 100%; box-sizing: border-box; font: var(--mono-11)/1.5 var(--font-mono); padding: 8px; border: 1px solid var(--line); border-radius: var(--r-2); background: var(--bg-sunken); color: var(--fg); resize: vertical; }
.bug__skip, .bug__link { border-color: transparent; background: none; color: var(--fg-muted); padding-left: 4px; padding-right: 4px; }
.bug__skip:hover, .bug__link:hover { color: var(--accent); background: none; }