:root {
  --bg: #ffffff;
  --ink: #0b0b0b;
  --muted: #6b6b6b;
  --line: #e2e2e2;
  --dots: #d6d6d6;
  --fdnd-accent: #0b0b0b;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr auto; /* the canvas, and the settings panel when a card is selected */
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

/* Top bar */
.bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 16px;
  border-bottom: 1px solid var(--line);
}
.brand {
  font: 600 1.25rem/1 Georgia, "Times New Roman", serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.bar { flex-wrap: wrap; }
.tools { display: flex; align-items: center; gap: 0.25rem; margin-left: auto; flex-wrap: wrap; }
.tools .group { display: inline-flex; align-items: center; gap: 0.2rem; margin-left: 0.4rem; }
.tools .group-label { font-size: 0.8rem; color: var(--muted); margin-right: 0.1rem; }
.zoom { display: flex; align-items: center; gap: 0.25rem; }

/* Advanced settings (a disclosure in the toolbar) */
.advanced { position: relative; margin-left: 0.4rem; }
.advanced summary {
  display: flex;
  align-items: center;
  height: 2rem;
  padding: 0 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  list-style: none;
}
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary::after { content: "▾"; margin-left: 0.35rem; font-size: 0.7rem; color: var(--muted); }
.advanced summary:hover, .advanced[open] summary { border-color: var(--ink); }
.advanced-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 1000;
  width: min(18rem, calc(100vw - 32px));
  /* taller than the window: it scrolls (main.js sets --panel-top to just below its button) */
  max-height: calc(100dvh - var(--panel-top, 4rem) - 12px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.75rem;
  background: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}
.advanced fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 0.35rem; }
.advanced legend { padding: 0; font-weight: 600; margin-bottom: 0.25rem; }
.advanced fieldset p { margin: 0 0 0.35rem; font-size: 0.8rem; color: var(--muted); }
.advanced label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.advanced input { accent-color: var(--ink); margin: 0; }
.tools button,
.zoom button {
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.6rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.tools button:hover:not(:disabled),
.zoom button:hover { border-color: var(--ink); }
.tools button:disabled { opacity: 0.35; cursor: default; }
.tools button.is-danger { color: #b3261e; border-color: #e7b9b5; }
.tools button.is-danger:hover:not(:disabled) { background: #b3261e; color: #fff; border-color: #b3261e; }
.tools .sep, .zoom .sep { width: 1px; height: 1.25rem; margin: 0 0.35rem; background: var(--line); }
.zoom .toggle[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.zoom output { min-width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); }

/* Canvas */
.graph-viewport {
  position: relative;
  overflow: hidden;
  overflow: clip; /* hidden still lets focus() scroll it, which would shift everything */
  touch-action: none;
  cursor: default;
  background-color: var(--bg);
  background-image: radial-gradient(circle, var(--dots) 1px, transparent 1.2px);
}
.graph-viewport.is-panning { cursor: grabbing; }
.graph-world {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  transform-origin: 0 0;
}
.graph-wires {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: visible;
  pointer-events: none;
}
.wire-line { fill: none; stroke: var(--wire-color, var(--ink)); stroke-width: 1.75; vector-effect: non-scaling-stroke; }
.wire-hit { fill: none; stroke: transparent; stroke-width: 14; vector-effect: non-scaling-stroke; pointer-events: stroke; cursor: pointer; }
.wire:hover .wire-line { stroke-width: 2.5; }
.wire.is-selected .wire-line { stroke-width: 3; stroke-dasharray: 7 4; }
.wire-temp { stroke-dasharray: 5 4; pointer-events: none; }
/* Advanced → Show connections on top: the wires over the cards, but ports and grips over the wires */
.graph-viewport.wires-on-top .graph-wires { z-index: 20; }
.graph-viewport.wires-on-top .port-layer,
.graph-viewport.wires-on-top .card-grip { z-index: 21; }

/* Cards */
.card {
  position: absolute;
  width: max(var(--card-w, 15rem), var(--cols-span, 0px)); /* its set width, grown to fit lined-up ports */
  font-size: calc(14px * var(--font-scale, 1)); /* the card's Text size; everything written on it is in em */
  background: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 10px;
}
.card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.card.is-selected { outline: 2px solid var(--ink); outline-offset: 3px; }
.card.is-focused { outline: none; }
.card.is-drop-target { outline: 2px dashed var(--ink); outline-offset: 4px; }
.card-head {
  font-size: calc(14px * var(--head-scale, 1)); /* the nameplate has its own size, apart from the body text */
  padding: 0.571em 0.857em 0.629em;
  background: var(--ink);
  color: var(--bg);
  border-radius: 9px 9px 0 0;
}
.card-kind { display: block; font-size: 0.743em; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.65; }
.card-title { margin: 0; font-size: 1.086em; font-weight: 600; }
/* The body grows to fit lined-up ports down the sides; a blank card (no nameplate) is a plain slate */
.card-ports { min-height: max(6rem, var(--rows-span, 0px)); }
/* A resized card: its body is exactly the height set (contents fit themselves to it) */
.card.is-sized .card-ports { height: max(var(--body-h), var(--rows-span, 0px)); min-height: 0 !important; }
.card.is-blank .card-ports { min-height: max(9rem, var(--rows-span, 0px)); }

/* Ports: a triangle centred on the card's edge (graph.js places and turns it). The layer
   covers the card's padding box, so percentages run along its edges. */
.port-layer { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.port {
  position: absolute;
  width: 0;
  height: 0;
  font-size: 0.8rem;
  pointer-events: auto;
  cursor: grab;
}
.graph-viewport.is-sliding, .graph-viewport.is-sliding * { cursor: grabbing !important; }
.graph-viewport.is-wiring, .graph-viewport.is-wiring * { cursor: crosshair !important; }
.port-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 12px;
  height: 14px;
  translate: -50% -50%;
  transition: scale 0.12s;
}
.port-dot::before { content: ""; position: absolute; inset: -6px; } /* a bigger target to grab */
.port-dot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.port-dot path {
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.port:hover .port-dot, .port.can-connect .port-dot { scale: 1.2; }
.port.is-target .port-dot, .port.is-menu-open .port-dot { scale: 1.45; }
.graph-viewport.is-wiring .port:not(.can-connect) { opacity: 0.35; }




/* Narrow screens: a compact top bar */
@media (max-width: 560px) {
  .bar { gap: 0.5rem; }
  .brand { font-size: 1.05rem; letter-spacing: 0.12em; }
  .zoom { gap: 0.2rem; }
  .zoom .sep, .zoom output, .tools .sep { display: none; }
  .tools { order: 3; width: 100%; margin-left: 0; justify-content: space-between; }
  .tools .group, .advanced { margin-left: 0; }
  /* Drop-down panels span the screen just below their button (main.js sets the top) */
  .advanced-panel { position: fixed; left: 16px; right: 16px; top: var(--panel-top, 8rem); width: auto; }
  .zoom button { min-width: 1.9rem; padding: 0 0.45rem; }
}
/* The smallest phones: pinch replaces the − and + buttons */
@media (max-width: 360px) {
  #zoom-in, #zoom-out { display: none; }
}

/* Port options menu */
.port-menu {
  position: fixed;
  z-index: 1000;
  display: grid;
  min-width: 11rem;
  padding: 0.3rem;
  background: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  font-size: 0.85rem;
}
.port-menu-title {
  padding: 0.3rem 0.6rem 0.4rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.port-menu-item {
  padding: 0.4rem 0.6rem;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
}
.port-menu-item:hover:not(:disabled), .port-menu-item:focus-visible { background: var(--ink); color: var(--bg); outline: none; }
.port-menu-item:disabled { opacity: 0.35; cursor: default; }
.port-menu-item.is-danger { color: #b3261e; }
.port-menu-item.is-danger:hover, .port-menu-item.is-danger:focus-visible { background: #b3261e; color: #fff; }
.wire-swatches { display: grid; grid-template-columns: repeat(6, 1.6rem); gap: 0.35rem; padding: 0.35rem 0.45rem; }
.wire-swatch {
  position: relative; width: 1.6rem; height: 1.6rem; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--swatch); border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--line);
}
.wire-swatch:hover, .wire-swatch:focus-visible, .wire-swatch:focus-within { box-shadow: 0 0 0 2px var(--ink); outline: none; }
.wire-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--ink); }
.wire-swatch[aria-checked="true"]::after { content: ''; position: absolute; inset: 0.45rem; border-radius: 50%; background: var(--bg); }
.wire-swatch.is-custom { background: var(--swatch, conic-gradient(#d93025, #e8710a, #d4a000, #188038, #1a73e8, #8e24aa, #d81b60, #d93025)); }
.wire-swatch.is-custom input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.port-menu-sep { height: 1px; margin: 0.3rem 0.2rem; background: var(--line); }
.port-menu-input {
  margin: 0 0.2rem 0.2rem;
  padding: 0.45rem 0.6rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 6px;
}

/* Confirm dialog (removing a configured card) */
.confirm-dialog {
  width: min(26rem, calc(100vw - 32px));
  padding: 1.25rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
}
.confirm-dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.confirm-dialog h2 { margin: 0 0 0.5rem; font-size: 1.1rem; }
.confirm-dialog p { margin: 0 0 0.6rem; color: var(--muted); }
.impact-list { margin: 0 0 0.75rem; padding-left: 1.1rem; max-height: 40vh; overflow: auto; }
.impact-list li { margin: 0.2rem 0; }
.confirm-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem; }
.confirm-actions button {
  padding: 0.5rem 1rem;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.confirm-actions button:hover { border-color: var(--ink); }
.confirm-actions button.is-danger { background: #b3261e; color: #fff; border-color: #b3261e; }
.confirm-actions button.is-danger:hover { background: #8f1d17; }

/* ---------- card types ---------- */

/* Sizes: views are bigger, to show their chart */
.card[data-type="view"] { width: max(var(--card-w, 22rem), var(--cols-span, 0px)); }
.card[data-type="view"] .card-ports { min-height: max(13rem, var(--rows-span, 0px)); }
.card[data-kind="table-view"] .card-ports { min-height: max(3rem, var(--rows-span, 0px)); } /* as tall as its Height */
.card[data-kind="search"] .card-ports { min-height: max(3rem, var(--rows-span, 0px)); } /* just its search bar */
.card-ports { position: relative; display: flex; flex-direction: column; }

/* A blank card asks what it is */
.card-choose { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; margin: auto; padding: 0.5rem 0; width: 80%; }
.card-choose button {
  padding: 0.3rem 0.6rem;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 6px;
  cursor: pointer;
}
.card-choose button:hover { background: var(--ink); color: var(--bg); }

.card-content { flex: 1; min-width: 0; padding: 0.686em 1.029em; overflow: hidden; }
.card-content-view { display: flex; flex-direction: column; justify-content: center; }

/* Values (card peeks and the settings panel) */
.value-kind { font-size: 0.8em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4em; }
.value-scalar { font-size: 1.6em; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.value-error { color: #b3261e; font-size: 0.914em; overflow-wrap: anywhere; }
.value-empty { color: var(--muted); font-size: 0.914em; font-style: italic; }
.value-more { margin-top: 0.286em; font-size: 0.8em; color: var(--muted); }
.value-list { margin: 0; padding-left: 1.143em; font-size: 0.891em; }
.value-table { overflow: auto; max-height: 100%; }
.value-table table { border-collapse: collapse; font-size: 0.823em; width: 100%; }
.value-table th, .value-table td {
  padding: 0.15rem 0.4rem 0.15rem 0;
  text-align: left;
  white-space: nowrap;
  max-width: 9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--line);
}
.value-table th { font-weight: 600; position: sticky; top: 0; background: var(--bg); }
.value-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Table views: a scrolling window onto every row (rows are a fixed height; see scrollTable) */
.scroll-area { overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; cursor: auto; }
.scroll-table .value-table { max-height: none; }
.scroll-table tr { height: calc(22px * var(--font-scale, 1)); }
.scroll-table th, .scroll-table td { padding-top: 0; padding-bottom: 0; line-height: calc(21px * var(--font-scale, 1)); }
.scroll-table tr.spacer { height: auto; } /* (only as tall as the rows it stands in for) */
.scroll-table tr.spacer td { padding: 0; border: 0; line-height: 0; }
/* A pinned header that fully covers rows scrolling under it (collapsed borders don't stay pinned) */
.scroll-table th { z-index: 1; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--ink); }
.scroll-table .value-more { margin-top: 0.343em; }

/* The resize grip in every card's bottom-right corner */
.card-grip {
  position: absolute;
  right: 3px;
  bottom: 3px;
  z-index: 2;
  width: 14px;
  height: 14px;
  cursor: nwse-resize;
  touch-action: none;
  background: linear-gradient(135deg, transparent 0 45%, var(--ink) 45% 52%, transparent 52% 64%, var(--ink) 64% 71%, transparent 71% 83%, var(--ink) 83% 90%, transparent 90%);
  opacity: 0;
  transition: opacity 0.12s;
}
.card:hover .card-grip, .card.is-selected .card-grip, .card.is-resizing .card-grip { opacity: 0.45; }
.card-grip:hover, .card.is-resizing .card-grip { opacity: 1 !important; }
@media (hover: none) { .card-grip { opacity: 0.45; } } /* touch: no hover, so always show it */
.card.is-deck > .card-grip { cursor: ew-resize; } /* a deck's width is yours; its height follows its cards */
/* A resized table view: the table fills the card, showing as many rows as fit */
.card.is-sized .scroll-table { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.card.is-sized .scroll-table .scroll-area { flex: 1; min-height: 0; height: auto !important; }
.card.is-sized[data-kind="table-view"] .card-content-view { justify-content: flex-start; } /* (charts and numbers stay centred) */
.card.is-resizing, .card.is-resizing * { cursor: nwse-resize !important; user-select: none; }

/* Charts and numbers (view cards) */
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .bar { fill: var(--ink); }
.chart .line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.chart .dot { fill: var(--ink); }
.chart .axis { stroke: var(--ink); stroke-width: 1; }
.chart .tick { font-size: var(--tick, 9px); fill: var(--muted); }
.big-number { text-align: center; }
.big-number-value { font-size: 2.971em; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.big-number-caption { color: var(--muted); font-size: 0.971em; }
.card-content-view .big-number { container-type: inline-size; } /* (a card always has a width) */
.card-content-view .big-number-value { font-size: min(2.971em, 26cqi); white-space: nowrap; overflow-wrap: normal; }

/* ---------- settings panel ---------- */

.inspector {
  grid-row: 2;
  grid-column: 2;
  width: 22rem;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-left: 1px solid var(--line);
  background: var(--bg);
}
.inspector[hidden] { display: none; }
body.panel-left { grid-template-columns: auto 1fr; } /* (Advanced: the panel on the left) */
body.panel-left .inspector { grid-column: 1; border-left: 0; border-right: 1px solid var(--line); }
body.panel-left .graph { grid-row: 2; grid-column: 2; }
.inspector-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--line);
}
.inspector-title { margin: 0; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inspector-close {
  width: 2rem;
  height: 2rem;
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--ink);
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}
.inspector-close:hover { border-color: var(--ink); }
.inspector-body { flex: 1; overflow: auto; padding: 1rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.85rem; align-content: start; }
.inspector-fields, .inspector-output { min-width: 0; } /* a wide output table scrolls; it doesn't widen the panel */
.inspector-lead { margin: 0; font-weight: 600; }
.inspector-head, .inspector-lead, .inspector-label, .type-choice, .segmented { -webkit-user-select: none; user-select: none; }
.type-choices { display: grid; gap: 0.5rem; }
.type-choice {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0.85rem;
  text-align: left;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 8px;
  cursor: pointer;
}
.type-choice span { color: var(--muted); font-size: 0.82rem; }
.type-choice:hover { background: var(--ink); color: var(--bg); }
.type-choice:hover span { color: var(--bg); opacity: 0.8; }
.inspector-field { display: grid; gap: 0.3rem; }
.inspector-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.inspector-input {
  width: 100%;
  padding: 0.45rem 0.6rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.inspector-input:focus { outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink); }
.inspector-input.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.82rem; }
textarea.inspector-input { resize: vertical; }
.inspector-check { display: flex; align-items: center; gap: 0.5rem; }
.inspector-check input { accent-color: var(--ink); }
.inspector-note { margin: 0; font-size: 0.8rem; color: var(--muted); }
.inspector-button {
  justify-self: start;
  padding: 0.4rem 0.8rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--ink);
  border-radius: 6px;
  cursor: pointer;
}
.inspector-button:hover { background: var(--ink); color: var(--bg); }
.inspector-fields { display: grid; gap: 0.85rem; }
.inspector-output { border-top: 1px solid var(--line); padding-top: 0.85rem; }
.inspector-output h3 { margin: 0 0 0.5rem; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.inspector-output .value-table { max-height: 18rem; }
.segmented { display: flex; border: 1px solid var(--ink); border-radius: 6px; overflow: hidden; }
.segmented button {
  flex: 1;
  padding: 0.4rem 0.5rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 0;
  border-left: 1px solid var(--ink);
  cursor: pointer;
}
.segmented button:first-child { border-left: 0; }
.segmented button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

.advanced-danger { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }
.advanced-danger button {
  padding: 0.4rem 0.8rem;
  font: inherit;
  color: #b3261e;
  background: var(--bg);
  border: 1px solid #e7b9b5;
  border-radius: 6px;
  cursor: pointer;
}
.advanced-danger button:hover { background: #b3261e; color: #fff; border-color: #b3261e; }

/* Phones: the settings panel is a sheet over the bottom of the canvas */
@media (max-width: 700px) {
  .inspector {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    width: auto;
    max-height: 55vh;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--ink);
    box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.12);
    border-radius: 12px 12px 0 0;
  }
}

/* PostgreSQL card: sign-in and account line */
.signin { display: grid; gap: 0.5rem; }
.inspector-account { font-size: 0.85rem; color: var(--muted); }
.db-picker, .db-connect { display: grid; gap: 0.6rem; }
.db-connect { padding: 0.75rem; border: 1px solid var(--line); border-radius: 8px; }
.db-connect .inspector-button { justify-self: start; }
.link-button { padding: 0; font: inherit; color: var(--ink); background: none; border: 0; text-decoration: underline; cursor: pointer; }

/* Search cards: just a search bar (the results go out of its output) */
.card[data-kind="search"] { width: max(var(--card-w, 20rem), var(--cols-span, 0px)); }
/* the bar, then advanced search beside it when there's room (else under it) */
.card-search { display: flex; flex-wrap: wrap; align-items: center; align-content: start; gap: 0.5rem 1rem; }
.card-search > div:not(.search-options) { flex-basis: 100%; }
.search-bar {
  flex: 1 1 14em;
  min-width: 0;
  width: 100%;
  padding: 0.457em 0.686em 0.457em 2.171em;
  font: inherit;
  font-size: 0.971em;
  color: var(--ink);
  background: var(--bg) no-repeat 0.6rem 50% / 0.85rem
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='6.5' cy='6.5' r='5' fill='none' stroke='%230b0b0b' stroke-width='2'/%3E%3Cpath d='M10.5 10.5 15 15' stroke='%230b0b0b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  border: 1px solid var(--ink);
  border-radius: 999px;
}
.search-bar:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.card-search > div:empty, .present-content > div:empty { display: none; }
.search-options { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em 0.9em; font-size: 0.857em; }
.search-advanced { padding: 0; font: inherit; color: var(--muted); text-align: left; background: none; border: 0; cursor: pointer; }
.search-advanced::before { content: '▸ '; }
.search-advanced[aria-expanded="true"]::before { content: '▾ '; }
.search-advanced:hover, .search-advanced:focus-visible { color: var(--ink); }
.search-option { display: inline-flex; align-items: center; gap: 0.35em; cursor: pointer; }
.search-option:has(input:disabled) { color: var(--muted); cursor: default; }
.search-option select { font: inherit; max-width: 12em; padding: 0.15em 0.3em; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; }

/* Settings: Text size slider */
.inspector-size { display: flex; align-items: center; gap: 0.6rem; }
.inspector-size input[type="range"] { flex: 1; accent-color: var(--ink); }
.inspector-pct { min-width: 3rem; font-variant-numeric: tabular-nums; }
#font-level { min-width: 3rem; text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); }

/* Shift+drag selection box, and the cards it's passing over */
.marquee { position: absolute; z-index: 5; pointer-events: none; border: 1px dashed var(--ink); background: rgba(11, 11, 11, 0.05); }
.card.is-marked { outline: 2px dashed var(--ink); outline-offset: 3px; }

/* ---------- decks ---------- */

/* A deck is a see-through zone (connections to the cards in it show through) under its nameplate. */
.card.is-deck { background: transparent; }
.card.is-deck .card-ports { background: rgba(11, 11, 11, 0.035); border-radius: 0 0 9px 9px; }
.card.is-deck.is-blank .card-ports { border-radius: 9px; }
.deck-zone { display: grid; place-items: center; }
.deck-hint { color: var(--muted); font-size: 1em; border: 1px dashed var(--line); border-radius: 8px; padding: 0.8em 1.2em; pointer-events: none; }
.card.is-deck-target { outline: 2px dashed var(--ink); outline-offset: 4px; }
.card.is-deck-target .card-ports { background: rgba(11, 11, 11, 0.07); }
.card.is-deck-refused { outline: 2px dashed #b3261e; outline-offset: 4px; }

/* The selected cards' connections stand out */
.wire.is-related .wire-line { stroke-width: 2.75; }

/* ---------- small things ---------- */

.tools button.icon { min-width: 2rem; padding: 0; font-size: 1.05rem; }

/* Notes about what just happened */
.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 1200;
  translate: -50% 12px;
  max-width: calc(100vw - 32px);
  padding: 0.55rem 0.9rem;
  color: var(--bg);
  background: var(--ink);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.2);
  font-size: 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, translate 0.18s;
}
.toast.is-shown { opacity: 1; translate: -50% 0; }

/* Shortcuts panel */
.shortcuts summary { min-width: 2rem; justify-content: center; font-weight: 700; }
.shortcuts summary::after { content: none; }
.shortcuts .advanced-panel { width: min(22rem, calc(100vw - 32px)); max-height: 70vh; overflow: auto; }
.shortcuts h2 { margin: 0.6rem 0 0.35rem; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.shortcuts h2:first-child { margin-top: 0; }
.shortcuts dl { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 0.8rem; margin: 0; font-size: 0.85rem; }
.shortcuts dt { font-weight: 600; white-space: nowrap; }
.shortcuts dd { margin: 0; color: var(--muted); }

/* ---------- decks, for viewing ---------- */

/* Cards inside a deck: a slim white title strip instead of the black nameplate */
.card.in-deck .card-head { background: var(--bg); color: var(--ink); border-bottom: 1px solid var(--line); padding-block: 0.45em; }
.card.in-deck .card-kind { display: none; }
/* A deck's own wiring stays in the background (full strength while something is selected) */
.wire.is-inner .wire-line { opacity: 0.22; stroke-dasharray: 3 3; }
.wire.is-inner.is-related .wire-line { opacity: 1; stroke-dasharray: none; }
/* The nameplate's View button */
.card-head { position: relative; }
.deck-open {
  position: absolute;
  right: 0.7em;
  top: 50%;
  translate: 0 -50%;
  padding: 0.3em 0.75em;
  font: inherit;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}
.deck-open:hover { outline: 2px solid var(--bg); outline-offset: 2px; }

/* The deck viewer: a full-window dashboard */
.present {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background: var(--bg);
}
.present::backdrop { background: var(--bg); }
.present-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1.5rem;
  border-bottom: 1px solid var(--line);
}
.present-brand { font: 600 0.9rem/1 Georgia, "Times New Roman", serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.present-name { flex: 1; margin: 0; font-size: 1.35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.present-full, .present-close {
  height: 2.2rem;
  padding: 0 0.9rem;
  font: inherit;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.present-close { width: 2.2rem; padding: 0; font-size: 1.3rem; }
.present-full:hover, .present-close:hover { border-color: var(--ink); }
.present-grid {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: grid; /* the deck's own 12-column grid; each panel on its cells (main.js) */
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: var(--row, 60px);
  align-content: start;
  gap: 16px;
  padding: 24px;
}
.present-panel[data-kind="search"] { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.present-panel[data-kind="search"] .present-title { margin-bottom: 0.4em; }
.present-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: calc(14px * var(--font-scale, 1));
}
.present-title { margin: 0 0 0.6em; font-size: 1.15em; font-weight: 600; }
.present-content { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.present-view { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.present-view .scroll-table { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.present-view .scroll-table .scroll-area { flex: 1; min-height: 0; height: auto !important; }
/* Big, but never wider than its panel (a narrow one shrinks it rather than breaking "6.8K" in two) */
.present-panel[data-kind="number"] .present-content { container-type: size; } /* (so the number can fit its height too) */
.present-view .big-number { container-type: inline-size; }
.present-view .big-number-value { font-size: min(4.5em, 28cqi, calc((100cqh - 1.5em) / 1.1)); white-space: nowrap; }
.present-empty { grid-column: 1 / -1; align-self: center; text-align: center; color: var(--muted); }
@media (max-width: 700px) {
  /* Phones: everything in one column, each panel a good size */
  .present-grid { grid-template-columns: 1fr; grid-auto-rows: auto; padding: 16px; }
  .present-panel { grid-column: 1 !important; grid-row: auto !important; height: max(280px, 55vh); }
  .present-panel[data-kind="search"], .present-panel[data-kind="number"] { height: auto; }
  .present-panel[data-kind="number"] .present-content { container-type: normal; }
  .present-head { padding: 0.6rem 1rem; }
  .present-brand { display: none; }
}
/* A Search card in the deck viewer */
.present-content > .search-bar { font-size: 1.05em; }
.present-panel[data-kind="search"] .present-content { flex-direction: row; flex-wrap: wrap; align-items: center; align-content: start; gap: 0.6em 1em; }
.present-panel[data-kind="search"] .present-content > div:not(.search-options) { flex-basis: 100%; }

/* Where a card dragged over a deck would land */
.deck-marker { position: absolute; z-index: 0; border: 2px dashed var(--ink); background: rgba(11, 11, 11, 0.05); border-radius: 10px; pointer-events: none; }

/* Editing rows (PostgreSQL tables with "Allow editing" on) */
.scroll-table .row-edit { width: 1.6em; padding: 0 0.15em; text-align: center; }
.row-edit-button {
  padding: 0; width: 1.4em; font: inherit; line-height: 1; color: var(--muted);
  background: none; border: 0; border-radius: 4px; cursor: pointer;
}
.row-edit-button:hover, .row-edit-button:focus-visible { color: var(--bg); background: var(--ink); outline: none; }
.scroll-table td.cell-editable { cursor: text; }
.scroll-table td.cell-editable:hover { box-shadow: inset 0 0 0 1px var(--line); }
.scroll-table td.is-editing { padding: 0; }
.scroll-table td.is-saving { color: var(--muted); }
.cell-input {
  width: 100%; min-width: 6em; height: calc(21px * var(--font-scale, 1)); padding: 0 0.3em;
  font: inherit; color: var(--ink); background: var(--bg);
  border: 0; outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 0;
}
.table-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6em; }
.row-add { font-size: 0.8em; white-space: nowrap; }

.row-dialog {
  width: min(34rem, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--ink); border-radius: 10px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.2);
}
.row-dialog::backdrop { background: rgba(0, 0, 0, 0.35); }
.row-form { display: flex; flex-direction: column; max-height: calc(100vh - 50px); padding: 1.25rem; }
.row-title { margin: 0 0 0.75rem; font-size: 1.1rem; }
.row-fields {
  display: grid; grid-template-columns: minmax(7rem, auto) 1fr; gap: 0.4rem 0.75rem; align-items: center;
  overflow: auto; min-height: 0; padding: 2px;
}
.row-label { font-size: 0.8rem; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
.row-required { color: #b3261e; }
.row-fields .inspector-input { padding: 0.3rem 0.5rem; }
.row-fields .inspector-input:disabled { color: var(--muted); background: #f6f6f6; }
.row-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.9rem; }
.row-actions .is-danger { margin-right: auto; color: #b3261e; border-color: #b3261e; }
.row-actions .is-danger:hover { color: #fff; background: #b3261e; }
.inspector-button.is-primary { font-weight: 600; }
.inspector-button.is-primary.is-dirty { color: var(--bg); background: var(--ink); }
.row-form .value-error:empty, .form-body .value-error:empty { display: none; }

/* Form card: one row at a time */
.form-card { display: flex; flex-direction: column; gap: 0.5em; height: 100%; min-height: 0; font-size: calc(1rem * var(--font-scale, 1) * 0.85); }
.form-nav { display: flex; align-items: center; gap: 0.35em; }
.form-where { flex: 1; text-align: center; font-size: 0.85em; color: var(--muted); font-variant-numeric: tabular-nums; }
.form-nav-button {
  min-width: 2em; padding: 0.15em 0.5em; font: inherit; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
}
.form-nav-button:hover:not(:disabled) { border-color: var(--ink); }
.form-nav-button:disabled { opacity: 0.35; cursor: default; }
.form-body { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.form-body .row-fields { max-height: 18em; grid-template-columns: minmax(5em, auto) 1fr; }
.form-body .row-label { font-size: 0.8em; }
.form-body .inspector-input { font-size: 0.9em; }
.form-body .row-actions { margin-top: 0.6em; }
.form-note { margin: 0.5em 0 0; font-size: 0.8em; color: var(--muted); }

/* Board view: rows as tiles in lanes (e.g. deals by stage) */
.board {
  display: flex;
  gap: 0.7em;
  height: 24em;
  overflow-x: auto;
  overflow-y: hidden;
  font-size: 0.85em;
}
.board-lane {
  display: flex;
  flex-direction: column;
  flex: 1 0 11.5em;
  min-width: 11.5em;
  max-width: 22em;
  min-height: 0;
  background: #f4f4f4;
  border-radius: 8px;
}
.board-lane-head {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
  padding: 0.55em 0.7em 0.4em;
  font-size: 0.85em;
}
.board-lane-name { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.board-lane-count { color: var(--muted); }
.board-lane-total { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.board-list {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  flex: 1;
  min-height: 2.5em;
  padding: 0 0.45em 0.45em;
  overflow-y: auto;
}
.board-tile {
  padding: 0.45em 0.6em;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  line-height: 1.3;
}
.board-tile[tabindex] { cursor: pointer; }
.board.is-movable .board-tile { cursor: grab; }
.board-tile:hover, .board-tile:focus-visible { border-color: var(--ink); outline: none; }
.board-tile-title { display: block; overflow-wrap: anywhere; }
.board-tile-meta { display: flex; gap: 0.6em; margin-top: 0.15em; color: var(--muted); font-size: 0.9em; }
.board-tile-amount { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }
.board-more { padding: 0.2em 0.3em; }
.board .fdnd-placeholder { min-height: 2.6em; border-radius: 6px; }
.present-view .board { height: 100%; }

/* Filter settings: a line per condition */
.filter-conditions { display: grid; gap: 0.4rem; margin-bottom: 0.5rem; }
.filter-condition { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 0.3rem; align-items: center; }
.filter-condition .inspector-input { min-width: 0; }
.filter-condition input[hidden] { display: block; visibility: hidden; }
.filter-remove { width: 1.8rem; height: 1.8rem; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: none; cursor: pointer; }
.filter-remove:hover { border-color: var(--ink); }

/* Sideways bar charts */
.chart-sideways .tick { font-size: var(--tick, 9px); }

/* Signing in to the Finale server from the top bar */
.signin-needed { font-weight: 600; border-color: var(--ink) !important; }
.signin-dialog { padding: 1.2rem; border: 1px solid var(--ink); border-radius: 10px; width: min(22rem, calc(100vw - 32px)); }
.signin-dialog::backdrop { background: rgba(0, 0, 0, 0.25); }
.signin-dialog h2 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.signin-dialog .signin { display: grid; gap: 0.5rem; }
.signin-dialog .signin-cancel { justify-self: start; }
.tools button[hidden] { display: none; }

/* The deck viewer's tabs: every deck, to switch between them without leaving */
.present-decks { display: flex; align-items: center; gap: 0.3rem; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.present-decks[hidden] { display: none; }
.present-decks::-webkit-scrollbar { display: none; }
.present-tab, .present-step {
  flex: none;
  height: 2.2rem;
  padding: 0 0.85rem;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.present-step { width: 2.2rem; padding: 0; font-size: 1.2rem; font-weight: 400; }
.present-tab:hover, .present-step:hover:not(:disabled) { border-color: var(--ink); }
.present-tab[aria-current="true"] { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.present-step:disabled { opacity: 0.3; cursor: default; }
.present-name[hidden] { display: none; }

/* Picked rows (a Table view's or Search card's output) */
.scroll-table tr.is-pickable { cursor: pointer; }
.scroll-table tr.is-pickable:hover td { background: #f4f4f4; }
.scroll-table tr.is-picked td { background: #e6e6e6 !important; font-weight: 600; }
.scroll-table tr.is-picked td:first-child { box-shadow: inset 3px 0 0 var(--ink); }
.picked-note { display: block; }
.table-foot .picked-note { display: inline; margin-left: 0.5em; }

/* Note view: a canvas's or deck's own instructions */
.card-content-view:has(> .note-view) { justify-content: flex-start; }
.note-view { min-height: 0; flex: 1 1 auto; font-size: 0.95em; line-height: 1.45; }
.note-view p, .note-view ul, .note-view ol { margin: 0 0 0.5em; }
.note-view ul, .note-view ol { padding-left: 1.3em; }
.note-view li + li { margin-top: 0.15em; }
.note-view > :last-child { margin-bottom: 0; }
.present-view:has(> .note-view) { justify-content: flex-start; }

/* Advanced → Demos */
.advanced .demos select { width: 100%; padding: 0.35rem 0.4rem; font: inherit; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); }
.advanced .demos .demo-blurb { margin: 0.1rem 0 0.2rem; min-height: 2.4em; }
.advanced .demos button { justify-self: start; padding: 0.4rem 0.8rem; font: inherit; color: var(--bg); background: var(--ink); border: 1px solid var(--ink); border-radius: 6px; cursor: pointer; }
.advanced .demos button:hover { background: var(--bg); color: var(--ink); }
.advanced .demos + fieldset, .advanced fieldset + .demos, .advanced fieldset + .connections, .advanced fieldset + .panel-side { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--line); }

/* Advanced → Saved layouts: a name and Save, then each saved one with Open and delete */
#layouts { display: grid; gap: 0.4rem; }
#layouts button { padding: 0.35rem 0.7rem; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--ink); border-radius: 6px; cursor: pointer; }
#layouts button:hover { background: var(--ink); color: var(--bg); }
#layouts button[type="submit"] { color: var(--bg); background: var(--ink); }
#layouts button[type="submit"]:hover { color: var(--ink); background: var(--bg); }
#layouts button.is-danger { padding: 0.35rem 0.55rem; color: #b3261e; border-color: #e7b9b5; }
#layouts button.is-danger:hover { color: #fff; background: #b3261e; border-color: #b3261e; }
.layout-save { display: flex; gap: 0.4rem; }
.advanced .layout-save input { flex: 1; min-width: 0; padding: 0.35rem 0.4rem; font: inherit; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--ink); }
.layout-list { display: grid; gap: 0.3rem; max-height: 14rem; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.layout-list li { display: flex; align-items: center; gap: 0.35rem; }
.layout-list span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.advanced p.layouts-error { color: #b3261e; }

/* Conversation view: a ticket's messages as a thread (ours on the right, theirs on the left) */
.card-content-view:has(> .conversation), .card-content-view:has(> .details),
.present-view:has(> .conversation), .present-view:has(> .details) { justify-content: flex-start; }
.conversation { display: flex; flex-direction: column; gap: 0.4em; min-height: 0; flex: 1 1 auto; font-size: calc(1rem * var(--font-scale, 1) * 0.85); }
.card:not(.is-sized) .conversation { height: calc(26em * var(--font-scale, 1)); }
.conv-summary { flex: none; }
.conv-list { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 0.55em; padding: 0.2em 0.1em 0.4em; }
.conv-day { align-self: center; margin: 0.4em 0 0.1em; font-size: 0.8em; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
.conv-msg { max-width: 82%; padding: 0.45em 0.7em 0.5em; border: 1px solid var(--line); border-radius: 10px; background: #f3f3f3; }
.conv-msg.is-theirs { align-self: flex-start; border-bottom-left-radius: 3px; }
.conv-msg.is-ours { align-self: flex-end; border-bottom-right-radius: 3px; color: var(--bg); background: var(--ink); border-color: var(--ink); }
.conv-msg.is-bot { background: var(--bg); border-style: dotted; }
.conv-msg.is-internal { color: var(--ink); background: #fbf6e1; border: 1px dashed #8a7a2c; }
.conv-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em; margin-bottom: 0.15em; font-size: 0.85em; }
.conv-author { font-weight: 700; }
.conv-time { opacity: 0.65; font-variant-numeric: tabular-nums; }
.conv-head .conv-time { margin-left: auto; }
.conv-badge { padding: 0 0.4em; font-size: 0.85em; font-weight: 600; border: 1px solid currentColor; border-radius: 999px; }
.conv-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.conv-quote { margin-top: 0.35em; font-size: 0.9em; }
.conv-quote summary { cursor: pointer; opacity: 0.7; }
.conv-quote > div { margin-top: 0.2em; padding-left: 0.6em; border-left: 2px solid currentColor; opacity: 0.75; white-space: pre-wrap; }
.conv-files { display: flex; flex-wrap: wrap; gap: 0.3em; margin-top: 0.35em; }
.conv-file { padding: 0.05em 0.5em; font-size: 0.85em; border: 1px solid currentColor; border-radius: 6px; opacity: 0.85; }
.conv-event { align-self: center; display: flex; gap: 0.5em; max-width: 90%; font-size: 0.82em; color: var(--muted); text-align: center; white-space: pre-wrap; }
.conv-reply { flex: none; display: flex; flex-direction: column; gap: 0.3em; padding-top: 0.4em; border-top: 1px solid var(--line); }
.conv-input { width: 100%; min-height: 3.2em; padding: 0.4em 0.55em; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
.conv-input:focus { outline: none; border-color: var(--ink); }
.conv-tools { display: flex; align-items: center; justify-content: flex-end; gap: 0.8em; }
.conv-note-toggle { display: inline-flex; align-items: center; gap: 0.3em; font-size: 0.9em; color: var(--muted); cursor: pointer; }
.conv-send { padding: 0.3em 1em; font: inherit; font-weight: 600; color: var(--bg); background: var(--ink); border: 1px solid var(--ink); border-radius: 6px; cursor: pointer; }
.conv-send:hover { color: var(--ink); background: var(--bg); }
.conv-send:disabled { opacity: 0.5; cursor: default; }

/* Details view: one row as a profile */
.details { min-height: 0; flex: 1 1 auto; overflow: auto; font-size: calc(1rem * var(--font-scale, 1) * 0.85); }
.details-title { font: 600 1.35em/1.2 Georgia, "Times New Roman", serif; overflow-wrap: anywhere; }
.details-subtitle { margin-top: 0.1em; color: var(--muted); }
.details-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(11em, 1fr)); gap: 0.55em 1em; margin: 0.6em 0 0; }
.details-item { min-width: 0; }
.details-item dt { font-size: 0.78em; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.details-item dd { margin: 0.05em 0 0; overflow-wrap: anywhere; }
.details-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.details-since { color: var(--muted); }
.details-none { color: var(--muted); }
.details-text { white-space: pre-wrap; }
.column-types { display: grid; gap: 0.3rem; }
.column-type { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 0.4rem; align-items: center; }
.column-type-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; }
.column-type .inspector-input { min-width: 0; }

/* SQL query card: its helper under the query (tables and columns to click in, examples, a cheat sheet) */
.sql-help { display: grid; gap: 0.4rem; }
.sql-names { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.sql-chip { padding: 0.1rem 0.4rem; font: 0.78rem ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; cursor: pointer; }
.sql-chip.is-table { font-weight: 700; border-color: var(--ink); }
.sql-chip:hover, .sql-chip:focus-visible { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.sql-sheet summary { font-size: 0.85rem; cursor: pointer; }
.sql-sheet p { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--muted); }
.sql-sheet code { font: 0.78rem ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink); }

/* Copy schema (Database cards' settings) */
.schema-copy { display: grid; gap: 0.4rem; border-top: 1px solid var(--line); padding-top: 0.85rem; }
.schema-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.schema-status { font-size: 0.8rem; color: var(--muted); min-height: 1em; }