/* datacore app chrome — transcribed from the numu Design System handoff
   (templates/datacore/Datacore.dc.html): every class below maps 1:1 to an
   inline-styled block of the prototype; style-hover/style-focus attributes
   became real pseudo-classes. Tokens resolve via tokens.css (contract +
   compat bridge). The near-black look is the design's dark and lives under
   html[data-mode="dark"]; light falls through to the stock light palette. */

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--font-body);
}

/* Night values live in ONE home: skin-night.css (linked by every page) —
   no per-sheet copies to drift. */

.dc { display: flex; flex-direction: column; height: 100dvh; background: var(--bg); color: var(--text); }

/* ── topbar ─────────────────────────────────────────────────────────────── */
.dc-topbar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); flex: none; }
.dc-burger { display: none; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm); padding: 0.2rem 0.45rem; font-size: var(--text-sm); line-height: 1; flex: none; }
.dc-dot { width: 0.95rem; height: 0.95rem; border-radius: 3px; background: var(--accent); flex: none; }
.dc-wordmark { font-family: var(--font-mono); font-weight: var(--weight-bold); letter-spacing: -0.02em; }
.dc-greet { font-size: var(--text-sm); color: var(--text-muted); }
.dc-spacer { flex: 1; }
.dc-pill { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-2xs); color: var(--success); border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); background: var(--success-tint); border-radius: var(--radius-full); padding: 0.15rem 0.6rem; }
.dc-pill i { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: var(--success); }
.dc-tbtn { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); padding: 0.2rem 0.55rem; cursor: pointer; font-size: var(--text-xs); color: var(--text-muted); }
.dc-tbtn:hover { border-color: var(--accent); color: var(--text); }
.dc-tbtn .glyph { font-size: var(--text-sm); line-height: 1; }

/* ── body: rail + main ──────────────────────────────────────────────────── */
.dc-body { display: flex; flex: 1; min-height: 0; position: relative; }
.dc-scrim { position: absolute; inset: 0; z-index: 70; background: color-mix(in srgb, #000 58%, transparent); /* skin-ok: overlay scrim, design-inherited */ }

.dc-rail { flex: none; display: flex; flex-direction: column; min-height: 0; width: 15rem; border-right: 1px solid var(--border); background: transparent; }
.dc-rail-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); }
.dc-rail-title { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle); font-weight: 600; }
.dc-rail-collapse { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; padding: 0.1rem 0.3rem; border-radius: var(--radius-xs); }
.dc-rail-list { flex: 1; overflow: auto; padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); }
.dc-rail-empty { font-size: var(--text-xs); color: var(--text-subtle); padding: var(--space-2); }
.dc-rail-empty code { font-family: var(--font-mono); color: var(--text-muted); }

.dc-proj { display: flex; flex-direction: column; }
.dc-proj-btn { display: flex; align-items: center; gap: var(--space-2); padding: 0.3rem 0.35rem; border: 0; background: transparent; cursor: pointer; width: 100%; text-align: left; color: var(--text-muted); font: inherit; }
.dc-proj-btn .chev { color: var(--text-subtle); font-size: 0.7rem; width: 0.7rem; flex: none; }
.dc-proj-btn .bi { font-size: 0.85rem; line-height: 1; flex: none; }
.dc-proj-btn .pname { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dc-proj-btn .pcount { font-size: var(--text-2xs); color: var(--text-subtle); font-variant-numeric: tabular-nums; }
.dc-proj-tables { display: flex; flex-direction: column; gap: 1px; padding-left: 0.5rem; margin: 1px 0 var(--space-1) 0.45rem; border-left: 1px solid var(--border); }

.dc-tbl { display: flex; align-items: center; gap: var(--space-2); padding: 0.3rem 0.4rem; border-radius: var(--radius-sm); background: transparent; border: 1px solid transparent; }
.dc-tbl.is-active { background: var(--accent-tint); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }
.dc-tbl .bi { font-size: 0.85rem; line-height: 1; color: var(--text-subtle); flex: none; }
.dc-tbl.is-active .bi { color: var(--accent); }
.dc-tbl-open { flex: 1; text-align: left; border: 0; background: transparent; cursor: pointer; min-width: 0; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0; }
.dc-tbl-hide { border: 0; background: transparent; color: var(--text-subtle); cursor: pointer; font-size: var(--text-xs); }
.dc-restore { margin-top: var(--space-1); text-align: left; border: 1px dashed var(--border-strong); background: transparent; color: var(--text-muted); cursor: pointer; font-size: var(--text-2xs); padding: 0.3rem 0.5rem; border-radius: var(--radius-sm); }

.dc-steps { border-top: 1px solid var(--border); padding: var(--space-2) var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); min-height: 0; max-height: 42%; overflow: auto; }
.dc-steps-title { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle); font-weight: 600; }
.dc-steps-empty { font-size: var(--text-2xs); color: var(--text-subtle); line-height: 1.5; }
.dc-step { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-2xs); }
.dc-step .ok { color: var(--success); }
.dc-step .lbl { font-family: var(--font-mono); color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-step .hash { color: var(--text-subtle); }

.dc-rail-closed { width: 2.25rem; flex: none; border-right: 1px solid var(--border); display: flex; justify-content: center; padding-top: var(--space-2); }
.dc-rail-closed button { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }

/* narrow: the rail overlays as a drawer */
@media (max-width: 47.5rem) { /* --bp-sm 48rem ladder; 47.5rem = 760px, synced with datacore.js narrow() */
  .dc-burger { display: inline-flex; }
  .dc-greet, .dc-pill { display: none; }
  .dc-tbtn .lbl { display: none; } /* icon-only topbar buttons (owned here — .dc-*) */
  .dc-rail { position: absolute; top: 0; bottom: 0; left: 0; width: min(17rem, 84%); z-index: 80; border-right: 1px solid var(--border-strong); background: var(--surface); box-shadow: var(--shadow-dialog); }
  .dc-rail-closed { display: none; }
}

/* ── main: thread + composer ────────────────────────────────────────────── */
.dc-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.dc-thread { flex: 1; overflow: auto; padding: var(--space-6) var(--space-6) var(--space-4); }
@media (max-width: 47.5rem) { /* --bp-sm 48rem ladder (760px sync) */ .dc-thread { padding: var(--space-4) var(--space-3) var(--space-3); } }
.dc-thread-inner { max-width: 52rem; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-5); }

.dc-empty { padding: var(--space-10) 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); }
.dc-empty .mark { width: 2rem; height: 2rem; border-radius: 6px; background: var(--accent); }
.dc-empty h1 { margin: 0; font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.dc-empty p { margin: var(--space-2) auto 0; max-width: 34rem; color: var(--text-muted); line-height: 1.6; }
.dc-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.dc-chip { border: 1px solid var(--border-strong); background: var(--surface); border-radius: var(--radius-full); padding: 0.35rem 0.8rem; cursor: pointer; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text); }
.dc-chip:hover { border-color: var(--accent); }

.dc-cmd { display: flex; justify-content: flex-end; }
.dc-cmd > div { display: inline-flex; align-items: baseline; gap: var(--space-2); background: var(--accent-tint); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: var(--radius); padding: 0.4rem 0.7rem; max-width: 80%; }
.dc-cmd .p { color: var(--accent); font-family: var(--font-mono); }
.dc-cmd .t { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text); white-space: pre-wrap; }

.dc-note { display: flex; gap: var(--space-2); align-items: baseline; font-size: var(--text-sm); }
.dc-note .dc-dot { width: 0.85rem; height: 0.85rem; transform: translateY(2px); }

.dc-card { display: flex; gap: var(--space-3); }
.dc-card > .dc-dot { margin-top: 0.15rem; }
.dc-frame { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }

.dc-q-head { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); background: var(--surface-subtle); }
.dc-q-head .title { font-family: var(--font-mono); font-weight: var(--weight-semibold); }
.dc-q-head .sub { font-size: var(--text-sm); color: var(--text-muted); }
.dc-q-kpis { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--border); }
.dc-kpi { padding: var(--space-3) var(--space-4); border-right: 1px solid var(--border); }
.dc-kpi .lbl { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-subtle); }
.dc-kpi .val { font-size: var(--text-xl); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; color: var(--text); }
.dc-kpi.warn .val { color: var(--warning); }
.dc-q-cols { padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); border-bottom: 1px solid var(--border); }
.dc-q-col { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.dc-q-col .name { font-family: var(--font-mono); width: 7rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-q-col .kind { font-size: var(--text-2xs); color: var(--text-subtle); width: 3rem; }
.dc-q-col .nulls { font-size: var(--text-2xs); color: var(--text-subtle); width: 5rem; }
.dc-q-col .nulls.warn { color: var(--warning); }
.dc-q-col .sugg { flex: 1; font-size: var(--text-2xs); color: var(--text-muted); }
.dc-q-grid { overflow: auto; }

.dc-grid { border-collapse: collapse; width: 100%; }
.dc-grid th { padding: 0.3rem 0.5rem; border: 1px solid var(--border); background: var(--surface-subtle); font-weight: 600; white-space: nowrap; font-size: var(--text-xs); }
.dc-grid td { padding: 0.3rem 0.5rem; border: 1px solid var(--border); white-space: nowrap; font-size: var(--text-xs); }
.dc-grid .num { text-align: right; }
.dc-grid .null { color: var(--text-subtle); }

.dc-p-head { padding: 0.5rem 0.8rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.dc-p-head .interp { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.dc-p-head .impact { font-size: var(--text-xs); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.dc-p-head .impact.warn { color: var(--warning); }
.dc-p-sql { padding: 0.4rem 0.8rem; border-bottom: 1px solid var(--border); background: var(--surface-sunken); display: flex; flex-direction: column; gap: 1px; }
.dc-p-sql div { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--accent); white-space: pre-wrap; word-break: break-word; }
.dc-p-grid { overflow: auto; max-height: 13rem; }
.dc-p-foot { padding: 0.45rem 0.8rem; border-top: 1px solid var(--border); display: flex; align-items: center; gap: var(--space-2); background: var(--surface-subtle); flex-wrap: wrap; }
.dc-p-foot .state { font-size: var(--text-2xs); color: var(--text-subtle); }
.dc-p-foot .saved { color: var(--accent); font-size: var(--text-xs); }
.dc-p-foot .saved code { font-family: var(--font-mono); }
.dc-p-foot .discarded { color: var(--text-subtle); font-size: var(--text-xs); }

.dc-btn { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); padding: 0.3rem 0.7rem; cursor: pointer; font-size: var(--text-sm); color: var(--text-muted); font-family: inherit; }
.dc-btn:hover { border-color: var(--accent); color: var(--text); }
.dc-btn.sm { padding: 0.25rem 0.6rem; font-size: var(--text-xs); }
.dc-btn-ghost { border: 0; background: transparent; border-radius: var(--radius-sm); padding: 0.3rem 0.5rem; cursor: pointer; font-size: var(--text-sm); color: var(--text-subtle); font-family: inherit; }
.dc-btn-ghost:hover { color: var(--text); }

/* ── composer ───────────────────────────────────────────────────────────── */
.dc-composer { flex: none; border-top: 1px solid var(--border); background: var(--surface); }
.dc-composer-inner { max-width: 52rem; margin: 0 auto; padding: var(--space-3) var(--space-4); }
.dc-meta { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); flex-wrap: wrap; min-height: 1.4rem; }
.dc-iconbtn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); width: 1.6rem; height: 1.5rem; cursor: pointer; font-size: var(--text-sm); color: var(--text-muted); }
.dc-iconbtn:hover { border-color: var(--accent); color: var(--text); }
.dc-vsep { width: 1px; height: 1rem; background: var(--border); flex: none; }
.dc-on { font-size: var(--text-xs); color: var(--text-muted); }
.dc-on code { font-family: var(--font-mono); color: var(--text); }
.dc-on .n { font-variant-numeric: tabular-nums; }
.dc-nohint { font-size: var(--text-xs); color: var(--text-subtle); }
.dc-nohint code { font-family: var(--font-mono); }
.dc-tool { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); padding: 0.2rem 0.5rem; cursor: pointer; font-size: var(--text-2xs); color: var(--text-muted); font-family: var(--font-mono); }
.dc-tool:hover { border-color: var(--accent); color: var(--text); }

.dc-input-zone { position: relative; }
.dc-ac { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); max-height: 15rem; overflow-y: auto; overflow-x: hidden; z-index: 60; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: var(--space-1); box-shadow: var(--shadow-popover); }
.dc-ac-item { display: flex; align-items: center; gap: var(--space-2); padding: 0.3rem 0.45rem; border-radius: var(--radius-xs); cursor: pointer; width: 100%; min-width: 0; overflow: hidden; }
.dc-ac-item.is-active { background: var(--accent-tint); }
.dc-ac-kind { font-family: var(--font-mono); font-size: var(--text-2xs); border-radius: var(--radius-xs); padding: 0 0.25rem; flex: none; min-width: 2.4rem; text-align: center; border: 1px solid; }
.dc-ac-label { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text); font-weight: 600; flex: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }
.dc-ac-hint { font-size: var(--text-2xs); color: var(--text-muted); flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: right; }
.dc-ac-trunc { font-size: var(--text-2xs); color: var(--text-subtle); padding: 0.2rem 0.5rem; border-top: 1px solid var(--border); }

.dc-input-wrap { display: flex; align-items: flex-start; gap: var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 0.45rem 0.45rem 0.45rem 0.7rem; }
.dc-input-wrap:focus-within { border-color: var(--accent); }
.dc-prompt { color: var(--accent); font-family: var(--font-mono); padding-top: 0.15rem; }
.dc-ta { flex: 1; border: 0; outline: none; background: transparent; resize: none; font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6; color: var(--text); min-width: 0; min-height: 4.6rem; max-height: 11rem; overflow-y: auto; }
.dc-run { align-self: flex-end; border: 0; background: var(--accent); color: var(--text-on-accent); border-radius: var(--radius-sm); padding: 0.35rem 0.8rem; cursor: pointer; font-size: var(--text-sm); font-weight: 600; }
.dc-hints { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.35rem; font-size: var(--text-2xs); color: var(--text-subtle); font-family: var(--font-mono); flex-wrap: wrap; }
.dc-hints .k { color: var(--accent); }
.dc-hints .sep { color: var(--border-strong); }
.dc-hints button { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; font-family: var(--font-mono); font-size: var(--text-2xs); padding: 0; }
.dc-hints button:hover { color: var(--accent); }

/* ── overlays (connect + SQL reference) ─────────────────────────────────── */
.dc-overlay { position: fixed; inset: 0; z-index: 110; background: color-mix(in srgb, #000 64%, transparent); /* skin-ok: overlay scrim, design-inherited */ display: flex; align-items: flex-start; justify-content: center; padding: var(--space-8) var(--space-4); overflow: auto; }
.dc-modal { width: min(48rem, 100%); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-dialog); overflow: hidden; display: flex; flex-direction: column; max-height: 82vh; }
.dc-modal.wide { width: min(56rem, 100%); max-height: none; display: block; }
.dc-m-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); background: var(--surface-subtle); flex: none; }
.dc-m-head .hgroup { flex: 1; min-width: 0; }
.dc-m-title { font-family: var(--font-mono); font-weight: var(--weight-bold); }
.dc-m-sub { font-size: var(--text-xs); color: var(--text-muted); }
.dc-m-sub .hl { color: var(--accent); }
.dc-m-close { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); width: 1.7rem; height: 1.7rem; cursor: pointer; color: var(--text-muted); flex: none; }
.dc-m-close:hover { border-color: var(--accent); color: var(--text); }

.dc-conn-tabs { display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4) 0; flex: none; flex-wrap: wrap; }
.dc-conn-tab { display: flex; align-items: center; gap: 0.4rem; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); padding: 0.35rem 0.7rem; cursor: pointer; color: var(--text-muted); font-size: var(--text-sm); }
.dc-conn-tab:hover { border-color: var(--accent); color: var(--text); }
.dc-conn-tab.is-active { border-color: var(--accent); background: var(--accent-tint); color: var(--text); }
.dc-conn-tab .bi { font-size: 0.9rem; line-height: 1; }
.dc-demo-badge { font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--warning); border: 1px solid color-mix(in srgb, var(--warning) 35%, transparent); border-radius: var(--radius-xs); padding: 0 0.25rem; }
.dc-conn-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); overflow: auto; }

.dc-drop { border: 1px dashed var(--border-strong); border-radius: var(--radius); padding: var(--space-8) var(--space-4); text-align: center; color: var(--text-muted); cursor: pointer; }
.dc-drop:hover { border-color: var(--accent); color: var(--text); }
.dc-drop .big { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--text); }
.dc-drop .small { font-size: var(--text-xs); margin-top: var(--space-1); }
.dc-err { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--danger); }

.dc-idb-note { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.6; }
.dc-idb-note code { font-family: var(--font-mono); color: var(--text); }
.dc-idb-empty { border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); padding: var(--space-6); text-align: center; color: var(--text-subtle); font-size: var(--text-xs); }
.dc-idb-empty code { font-family: var(--font-mono); color: var(--text-muted); }
.dc-row { display: flex; align-items: center; gap: var(--space-2); padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.dc-row .bi { font-size: 0.9rem; line-height: 1; flex: none; color: var(--text-subtle); }
.dc-row .bi.acc { color: var(--accent); }
.dc-row .rmain { flex: 1; min-width: 0; }
.dc-row .rname { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dc-row .rmeta { font-size: var(--text-2xs); color: var(--text-subtle); }
.dc-row .kill { border: 0; background: transparent; color: var(--text-subtle); cursor: pointer; font-size: var(--text-sm); }
.dc-row .kill:hover { color: var(--danger); }
.dc-row .attached { font-size: var(--text-2xs); color: var(--success); font-family: var(--font-mono); }
.dc-clear-row { display: flex; }
.dc-clear { border: 1px solid var(--border); background: transparent; border-radius: var(--radius-xs); padding: 0.25rem 0.6rem; cursor: pointer; font-size: var(--text-2xs); color: var(--text-subtle); }
.dc-clear:hover { border-color: var(--danger); color: var(--danger); }

.dc-pg-fields { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.dc-pg-field { display: flex; flex-direction: column; gap: 0.25rem; flex: 1 1 7rem; min-width: 6rem; }
.dc-pg-field label { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-subtle); }
.dc-pg-field input { border: 1px solid var(--border-strong); background: var(--surface-sunken); border-radius: var(--radius-xs); padding: 0.35rem 0.5rem; color: var(--text); font-family: var(--font-mono); font-size: var(--text-xs); min-width: 0; width: 100%; }
.dc-pg-field input:focus { border-color: var(--accent); outline: none; }
.dc-enum { display: flex; gap: 0.2rem; flex-wrap: wrap; }
.dc-enum button { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-xs); padding: 0.3rem 0.45rem; cursor: pointer; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-2xs); }
.dc-enum button:hover { border-color: var(--accent); }
.dc-enum button.is-selected { border-color: var(--accent); background: var(--accent-tint); color: var(--text); }
.dc-pg-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.dc-accent-btn { border: 0; background: var(--accent); color: var(--text-on-accent); border-radius: var(--radius-sm); padding: 0.4rem 0.9rem; cursor: pointer; font-size: var(--text-sm); font-weight: 600; }
.dc-accent-btn[disabled] { opacity: 0.7; cursor: default; }
.dc-pg-try { font-size: var(--text-2xs); color: var(--text-subtle); font-family: var(--font-mono); }
.dc-handshake { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-sunken); padding: 0.5rem 0.7rem; display: flex; flex-direction: column; gap: 0.3rem; }
.dc-hs-row { display: flex; gap: var(--space-2); align-items: baseline; font-family: var(--font-mono); font-size: var(--text-2xs); }
.dc-hs-row .led { color: var(--success); }
.dc-hs-row .step { color: var(--accent); width: 3.5rem; flex: none; }
.dc-hs-row .detail { color: var(--text-muted); flex: 1; min-width: 0; }
.dc-hs-row .ms { color: var(--text-subtle); }
.dc-connected { display: flex; align-items: center; gap: var(--space-2); padding: 0.45rem 0.7rem; border: 1px solid color-mix(in srgb, var(--success) 35%, transparent); background: var(--success-tint); border-radius: var(--radius-sm); }
.dc-connected .led { width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: var(--success); flex: none; }
.dc-connected .info { font-size: var(--text-xs); color: var(--text); }
.dc-connected .info code { font-family: var(--font-mono); }
.dc-schema-head { display: flex; align-items: baseline; gap: var(--space-2); }
.dc-schema-title { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle); font-weight: 600; }
.dc-fineprint { font-size: var(--text-2xs); color: var(--text-subtle); line-height: 1.7; border-top: 1px solid var(--border); padding-top: var(--space-3); }
.dc-fineprint code { font-family: var(--font-mono); color: var(--text-muted); }
.dc-fineprint .demo { font-family: var(--font-mono); color: var(--warning); }
.dc-fineprint a { color: var(--accent); }

/* SQL reference */
.dc-help-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-5); max-height: 70vh; overflow: auto; }
.dc-ref-scroll { overflow: auto; }
.dc-ref { border-collapse: collapse; width: 100%; min-width: 40rem; font-size: var(--text-sm); }
.dc-ref th { text-align: left; padding: 0.4rem 0.6rem; border: 1px solid var(--border); background: var(--surface-subtle); font-weight: 600; white-space: nowrap; }
.dc-ref th .hl { color: var(--accent); }
.dc-ref td { padding: 0.4rem 0.6rem; border: 1px solid var(--border); }
.dc-ref td.clause { white-space: nowrap; }
.dc-ref td.clause span { font-family: var(--font-mono); color: var(--accent); font-weight: 600; }
.dc-ref td.ex { white-space: nowrap; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
.dc-ref td.does { color: var(--text-muted); font-size: var(--text-xs); min-width: 14rem; }
.dc-help-cols { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.dc-help-col { flex: 1; min-width: 16rem; }
.dc-sec-title { font-family: var(--font-mono); font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-subtle); font-weight: 600; margin-bottom: var(--space-2); }
.dc-ops { border-collapse: collapse; width: 100%; font-size: var(--text-xs); }
.dc-ops td { padding: 0.25rem 0.5rem; border: 1px solid var(--border); font-family: var(--font-mono); }
.dc-ops td.op { color: var(--warning); white-space: nowrap; width: 6rem; }
.dc-ops td.does { color: var(--text-muted); }
.dc-aggs { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); line-height: 1.7; margin-top: var(--space-2); }
.dc-good ul { margin: 0; padding-left: 1.1rem; color: var(--text-muted); font-size: var(--text-xs); line-height: 1.7; }
.dc-good code { font-family: var(--font-mono); color: var(--text); }
.dc-good .strong { color: var(--text); }

/* ── touch — raise hit areas to the 44px floor (amenan-typescript) ───────── */
@media (pointer: coarse) {
  .dc-tbtn, .dc-burger { min-height: 2.75rem; padding: 0.5rem 0.8rem; }
  .dc-btn, .dc-btn-ghost { min-height: 2.75rem; }
  .dc-iconbtn { width: 2.75rem; height: 2.75rem; }
  .dc-chip { min-height: 2.75rem; padding: 0.6rem 1rem; }
  .dc-tool { min-height: 2.25rem; padding: 0.4rem 0.7rem; }
  .dc-tbl, .dc-proj-btn, .dc-row { min-height: 2.75rem; }
  .dc-ac-item { min-height: 2.75rem; }
  .dc-run { min-height: 2.75rem; padding: 0.5rem 1rem; }
  .dc-m-close { width: 2.75rem; height: 2.75rem; }
  .dc-rail-collapse, .dc-tbl-hide { min-width: 2.25rem; min-height: 2.25rem; }
}