faucet-cli 1.13.0

/* ============================================================================
   faucet stream — console
   Aesthetic: "instrument panel" — a precise technical control plane. Teal is the
   signal color (flow/liquid). Monospace for IDs/metrics/logs. Dark-first with a
   clean light mode. Offline: system font stacks only (no CDN).
   ========================================================================== */

/* ---- design tokens : light (default) ---- */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg: #eef2f3;
  --bg-grad: radial-gradient(1200px 600px at 100% -10%, #dff0ee 0%, transparent 60%),
             radial-gradient(900px 500px at -10% 0%, #e7eef0 0%, transparent 55%);
  --surface: #ffffff;
  --surface-2: #f6f9f9;
  --surface-sunken: #eef2f3;
  --border: #d6dee0;
  --border-strong: #c2ced1;
  --ink: #0f172a;
  --ink-dim: #51616b;
  --ink-faint: #8595a0;

  --brand: #0d9488;
  --brand-strong: #14b8a6;
  --brand-tint: rgba(20, 184, 166, 0.10);
  --brand-ring: rgba(20, 184, 166, 0.35);

  --ok: #0e9f6e;
  --overlay: #7c3aed;
  --fail: #e02424;
  --queued: #c2700b;
  --cancelled: #64748b;
  --running: var(--brand-strong);

  --term-bg: #0c1418;
  --term-ink: #c7d6d2;

  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08);
  --shadow-2: 0 8px 24px rgba(15, 23, 42, 0.12);
  --shadow-pop: 0 12px 40px rgba(15, 23, 42, 0.18);

  --r-sm: 6px;
  --r: 10px;
  --r-lg: 16px;
  --sp: 8px;

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---- design tokens : dark ---- */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #070d11;
  --bg-grad: radial-gradient(1100px 560px at 100% -10%, rgba(20, 184, 166, 0.10) 0%, transparent 55%),
             radial-gradient(800px 500px at -5% -5%, rgba(20, 184, 166, 0.06) 0%, transparent 50%);
  --surface: #0e171d;
  --surface-2: #121e25;
  --surface-sunken: #0a1116;
  --border: #1d2c34;
  --border-strong: #294049;
  --ink: #e6f0ee;
  --ink-dim: #93a7a3;
  --ink-faint: #5f757a;

  --brand: #14b8a6;
  --brand-strong: #2dd4bf;
  --brand-tint: rgba(45, 212, 191, 0.12);
  --brand-ring: rgba(45, 212, 191, 0.40);

  --ok: #34d399;
  --overlay: #a78bfa;
  --fail: #f87171;
  --queued: #fbbf24;
  --cancelled: #94a3b8;
  --running: var(--brand-strong);

  --term-bg: #050a0d;
  --term-ink: #b8ccc7;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.5);
  --shadow-pop: 0 16px 50px rgba(0, 0, 0, 0.6);
}

/* auto = follow the OS when no explicit choice */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    color-scheme: dark;
    --bg: #070d11;
    --bg-grad: radial-gradient(1100px 560px at 100% -10%, rgba(20, 184, 166, 0.10) 0%, transparent 55%),
               radial-gradient(800px 500px at -5% -5%, rgba(20, 184, 166, 0.06) 0%, transparent 50%);
    --surface: #0e171d;
    --surface-2: #121e25;
    --surface-sunken: #0a1116;
    --border: #1d2c34;
    --border-strong: #294049;
    --ink: #e6f0ee;
    --ink-dim: #93a7a3;
    --ink-faint: #5f757a;
    --brand: #14b8a6;
    --brand-strong: #2dd4bf;
    --brand-tint: rgba(45, 212, 191, 0.12);
    --brand-ring: rgba(45, 212, 191, 0.40);
    --ok: #34d399;
    --overlay: #a78bfa;
    --fail: #f87171;
    --queued: #fbbf24;
    --cancelled: #94a3b8;
    --term-bg: #050a0d;
    --term-ink: #b8ccc7;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 10px 30px rgba(0, 0, 0, 0.5);
    --shadow-pop: 0 16px 50px rgba(0, 0, 0, 0.6);
  }
}

/* ---- reset / base ---- */
*,
*::before,
*::after { box-sizing: border-box; }

/* `min-height` (not `height`) on body: `height: 100%` caps <body>'s box at one
   viewport, and a `position: sticky` element's containing block is its parent —
   so the sticky topbar could only stick within that one-viewport-tall box and
   scrolled away once the page grew past a screen. `min-height` lets <body> grow
   to the full content height, so the topbar sticks the whole way down. */
html { height: 100%; }
body { min-height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  background-color: var(--bg);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1 { font-size: 1.5rem; font-weight: 650; letter-spacing: -0.02em; margin: 0; }
h2 { font-size: 1.0rem; font-weight: 600; letter-spacing: -0.01em; margin: 1.6rem 0 0.6rem; color: var(--ink); }
h3 { font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-dim); margin: 0 0 0.5rem; }

a { color: var(--brand); text-decoration: none; }
button { font-family: inherit; }

::selection { background: var(--brand-ring); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--brand-strong);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; border: 2px solid transparent; background-clip: content-box; }

/* ============================================================================
   top bar
   ========================================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18px;
  height: 56px;
  padding: 0 20px;
  /* Opaque so content scrolling underneath never bleeds through the bar (which
     otherwise reads as a stray row floating above a sticky table header). */
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
/* a thin "flow" line of brand color under the bar */
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-strong), transparent);
  opacity: 0.5;
}

.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.brand-mark {
  width: 26px; height: 26px;
  filter: drop-shadow(0 0 6px var(--brand-ring));
}
.brand-name { font-size: 1.02rem; letter-spacing: -0.01em; }
.brand-name b { font-weight: 700; }
.brand-name { color: var(--brand); font-weight: 400; }
.brand-name b { color: var(--ink); }

.nav { display: flex; gap: 2px; }
.nav button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font-size: 0.9rem;
  font-weight: 550;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.nav button:hover { color: var(--ink); background: var(--surface-2); }

.spacer { flex: 1; }

.icon-btn {
  appearance: none;
  width: 34px; height: 34px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink-dim);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 0.95rem;
  transition: border-color 0.15s, color 0.15s, transform 0.08s;
}
.icon-btn:hover { color: var(--brand); border-color: var(--brand-ring); }
.icon-btn:active { transform: translateY(1px); }

/* ============================================================================
   layout
   ========================================================================== */
.view { display: block; }
.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 28px 24px 64px;
  animation: rise 0.28s ease both;
}
/* The lineage graph uses a little more width than the standard reading-width
   page, but not the full screen — 1280 keeps the two columns comfortable. */
.page-wide { max-width: 1280px; }
/* Opacity-only — animating `transform` here (even ending at none) makes `.page`
   a containing block for the whole fill, which breaks `position: sticky` on any
   descendant table header (it would stick to `.page` and scroll away, not to the
   viewport). */
@keyframes rise { from { opacity: 0; } to { opacity: 1; } }

.page-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.page-head h1 { margin-right: auto; }

.empty {
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-align: center;
  padding: 40px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--r);
  background: var(--surface);
}

/* ============================================================================
   buttons
   ========================================================================== */
.btn-primary, .btn-ghost, .btn-danger, .btn-warn {
  appearance: none;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.08s, background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--brand);
  color: #fff;
  /* Subtle lift only — the previous `0 6px 18px` glow extended well below the
     button, making it read as taller than the flat ghost/warn buttons beside it
     even though all three are the same height. */
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.btn-primary:hover { background: var(--brand-strong); box-shadow: 0 0 0 3px var(--brand-tint); }
.btn-primary:active { transform: translateY(1px); }

.btn-ghost {
  background: var(--surface);
  color: var(--ink-dim);
  border-color: var(--border);
}
.btn-ghost:hover { color: var(--ink); border-color: var(--border-strong); background: var(--surface-2); }
.btn-ghost.active { color: var(--brand); border-color: var(--brand-ring); background: var(--brand-tint); }
.btn-ghost:active { transform: translateY(1px); }

.btn-danger {
  background: transparent;
  color: var(--fail);
  border-color: color-mix(in srgb, var(--fail) 45%, transparent);
}
.btn-danger:hover { background: var(--fail); color: #fff; }

/* Warning: recoverable-but-disruptive actions (cancel a run, discard DLQ,
   deprecate a template) — amber outline that fills on hover. Sits between the
   neutral ghost and the destructive (red) danger button so consequential
   actions read as "careful" without implying irreversible data loss. */
.btn-warn {
  background: transparent;
  color: var(--queued);
  border-color: color-mix(in srgb, var(--queued) 45%, transparent);
}
.btn-warn:hover { background: var(--queued); color: #fff; }
.btn-warn:active { transform: translateY(1px); }

.btn-primary:disabled, .btn-ghost:disabled, .btn-danger:disabled, .btn-warn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ============================================================================
   filters
   ========================================================================== */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
}
/* Fill the filter bar so the placeholder is never clipped. */
.filters #t-search { flex: 1 1 auto; min-width: 0; }

input, select, textarea {
  font-family: var(--font-sans);
  font-size: 0.88rem;
  color: var(--ink);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--brand-ring);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
input::placeholder, textarea::placeholder { color: var(--ink-faint); }

/* Timezone selector in the topbar — compact; inherits the themed chevron below. */
/* `background-color` (not the `background` shorthand) so it never resets
   background-repeat/position — otherwise the dark-mode chevron image re-added by
   `[data-theme=dark] select` tiles into a row of overlapping chevrons. */
.tz-select { font-size: 0.8rem; max-width: 190px; padding-top: 5px; padding-bottom: 5px; background-color: transparent; }

/* Themed select: drop the native arrow for a custom chevron with real breathing
   room on the right, so it stops crowding the border. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2351616b'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 14px;
  cursor: pointer;
}
[data-theme="dark"] select {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2393a7a3'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] select {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%2393a7a3'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209l6%206%206-6'/%3E%3C/svg%3E");
  }
}

/* ============================================================================
   date-time picker (themed replacement for the native datetime-local popup)
   ========================================================================== */
.date-input { cursor: pointer; min-width: 168px; }
.dp-pop {
  position: fixed;
  z-index: 400;
  width: 268px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.22);
  font-size: 0.85rem;
  color: var(--ink);
}
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dp-title { font-weight: 650; }
.dp-nav {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--ink-dim); cursor: pointer; font-size: 1rem; line-height: 1;
}
.dp-nav:hover { color: var(--ink); border-color: var(--border-strong); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-wd { margin-bottom: 2px; }
.dp-wdc { text-align: center; font-size: 0.68rem; color: var(--ink-faint); padding: 2px 0; }
.dp-day {
  aspect-ratio: 1 / 1; border: 0; background: transparent; cursor: pointer;
  border-radius: 7px; color: var(--ink); font-size: 0.82rem;
  font-family: var(--font-sans);
  transition: background 0.12s, color 0.12s;
}
.dp-day:hover { background: var(--surface-sunken); }
.dp-muted { color: var(--ink-faint); }
.dp-today-c { box-shadow: inset 0 0 0 1px var(--brand-ring); }
.dp-sel { background: var(--brand); color: #fff; font-weight: 600; }
.dp-sel:hover { background: var(--brand-strong); }
.dp-time { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.dp-time-lbl { font-size: 0.72rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; margin-right: auto; }
.dp-tz { text-transform: none; letter-spacing: 0; opacity: 0.85; }
.dp-time input { width: 46px; text-align: center; padding: 5px 4px; }
.dp-colon { color: var(--ink-dim); }
.dp-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }
.dp-foot-r { display: flex; gap: 6px; }
.dp-clear, .dp-today, .dp-done {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-dim);
  border-radius: var(--r-sm); padding: 5px 11px; font-size: 0.8rem; cursor: pointer;
  font-family: var(--font-sans);
}
.dp-clear:hover, .dp-today:hover { color: var(--ink); border-color: var(--border-strong); }
.dp-done { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 550; }
.dp-done:hover { background: var(--brand-strong); border-color: var(--brand-strong); }

/* ============================================================================
   runs list
   ========================================================================== */
.runs-list { display: flex; flex-direction: column; gap: 6px; }

.run-row {
  display: grid;
  grid-template-columns: 120px 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.08s, box-shadow 0.15s, background 0.15s;
}
.run-row:hover {
  border-color: var(--border-strong);
  border-left-color: var(--brand-strong);
  box-shadow: var(--shadow-1);
  transform: translateX(2px);
}
.run-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-meta {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-dim);
  text-align: right;
}
.run-time { color: var(--ink-faint); min-width: 150px; }
/* Datasets list as one aligned ("invisible") table — every column shares a
   width across all rows via table-layout:fixed, so roles/rows/time line up and
   the URI truncates at the same x on every row (#646). */
.ds-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
/* Sticky header so the column labels stay visible while scrolling the list. */
.ds-table thead th {
  position: sticky; top: 56px; z-index: 15; background: var(--surface);
  text-align: left; font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; padding: 10px 18px; border-bottom: 1px solid var(--border);
}
/* Airier rows + generous column padding so nothing looks clumped. */
.ds-table tbody td { padding: 15px 18px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ds-table tbody tr:last-child td { border-bottom: none; }
.ds-tr { cursor: pointer; }
.ds-tr:hover td { background: color-mix(in srgb, var(--ink-faint) 8%, transparent); }
/* URI cell scrolls horizontally to reveal the full path. The scrollbar is hidden
   (scroll still works via trackpad / shift-wheel; full value is in the tooltip)
   so it never overlaps the single line of text, and a right-edge fade signals
   there is more to the right. */
.ds-uri-in {
  overflow-x: auto; white-space: nowrap; font-weight: 600;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
}
/* The fade signals "more to the right" — but at the end of the scroll (or when
   the text fits with no scroll) it would blur the last characters. `at-end` (set
   by JS on scroll) drops the mask so the tail is always crisp. */
.ds-uri-in.at-end { -webkit-mask-image: none; mask-image: none; }
.ds-uri-in::-webkit-scrollbar { display: none; }
.ds-meta { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-dim); white-space: nowrap; }
.ds-num { text-align: right; }
.ds-time { color: var(--ink-faint); }
/* Fixed widths; column 2 (URI) takes the rest and ellipsises uniformly. */
/* KIND column: extra right padding guarantees a clear gap before DATASET. */
.ds-table th:nth-child(1), .ds-table td:nth-child(1) { width: 124px; padding-right: 28px; }
.ds-table th:nth-child(3), .ds-table td:nth-child(3) { width: 96px; }
.ds-table th:nth-child(4), .ds-table td:nth-child(4) { width: 78px; text-align: right; }
.ds-table th:nth-child(5), .ds-table td:nth-child(5) { width: 124px; text-align: right; }
.ds-table th:nth-child(6), .ds-table td:nth-child(6) { width: 224px; }
/* Guarantee the last column's content clears the right border. */
.ds-table td:last-child, .ds-table th:last-child { padding-right: 22px; }

/* Filter bar: keep it on one line; the URI search flexes to fill the gap. */
.filters-1line { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; }
.filters-1line #f-q { flex: 1 1 auto; min-width: 90px; }
.filters-1line .date-input { width: 120px; flex: 0 0 auto; }

/* Kind multi-select dropdown (native <details> — no extra open/close JS). */
.dd { position: relative; flex: 0 0 auto; }
.dd > summary {
  list-style: none; cursor: pointer; user-select: none; white-space: nowrap;
  font-size: 0.85rem; padding: 7px 12px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-dim);
}
.dd > summary::-webkit-details-marker { display: none; }
.dd[open] > summary { border-color: var(--brand-strong); color: var(--brand-strong); }
.dd-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 20; min-width: 150px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow-1);
}
.dd-opt { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; font-size: 0.85rem; cursor: pointer; }
.dd-opt:hover { background: color-mix(in srgb, var(--ink-faint) 10%, transparent); }
.dd-empty { color: var(--ink-faint); font-size: 0.8rem; padding: 4px 8px; }

/* Filter chips (role). */
.filter-chips { display: inline-flex; gap: 6px; flex: 0 0 auto; }
.chip {
  font-size: 0.8rem; padding: 5px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border); background: var(--surface); color: var(--ink-dim);
}
.chip-on { border-color: var(--brand-strong); color: var(--brand-strong); font-weight: 600; }

/* Runs list reuses the shared table; its columns differ from datasets. */
.ds-table.runs-table th:nth-child(1), .ds-table.runs-table td:nth-child(1) { width: 132px; padding-right: 16px; }
.ds-table.runs-table th:nth-child(3), .ds-table.runs-table td:nth-child(3) { width: 92px; }
.ds-table.runs-table th:nth-child(4), .ds-table.runs-table td:nth-child(4) { width: 118px; text-align: right; }
.ds-table.runs-table th:nth-child(5), .ds-table.runs-table td:nth-child(5) { width: 224px; text-align: left; }
.ds-table.runs-table td:nth-child(6), .ds-table.runs-table th:nth-child(6) { display: none; }

/* Preview toggle: fixed width so switching Preview↔Hide never shifts the row. */
.lo-preview-btn { min-width: 68px; }

#r-more { align-self: center; margin: 16px auto 0; }

/* ============================================================================
   status pills
   ========================================================================== */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 99px;
  border: 1px solid;
  white-space: nowrap;
}
.pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 99px;
  background: currentColor;
}
.pill-completed { color: var(--ok);        border-color: color-mix(in srgb, var(--ok) 40%, transparent);        background: color-mix(in srgb, var(--ok) 12%, transparent); }
.pill-failed    { color: var(--fail);      border-color: color-mix(in srgb, var(--fail) 40%, transparent);      background: color-mix(in srgb, var(--fail) 12%, transparent); }
.pill-queued    { color: var(--queued);    border-color: color-mix(in srgb, var(--queued) 40%, transparent);    background: color-mix(in srgb, var(--queued) 12%, transparent); }
.pill-cancelled { color: var(--cancelled); border-color: color-mix(in srgb, var(--cancelled) 40%, transparent); background: color-mix(in srgb, var(--cancelled) 12%, transparent); }
.pill-running   { color: var(--running);   border-color: color-mix(in srgb, var(--running) 45%, transparent);   background: color-mix(in srgb, var(--running) 14%, transparent); }
.pill-running::before { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--running); opacity: 1; }
  50%      { box-shadow: 0 0 0 4px transparent; opacity: 0.55; }
}

/* ============================================================================
   run detail
   ========================================================================== */
.detail-actions { display: flex; gap: 8px; }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px 18px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
}
.detail-grid > div { font-family: var(--font-mono); font-size: 0.82rem; color: var(--ink-dim); }
.detail-grid > div b { color: var(--ink); }

.error-box {
  margin-top: 12px;
  padding: 12px 14px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--fail);
  background: color-mix(in srgb, var(--fail) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--fail) 30%, transparent);
  border-radius: var(--r-sm);
  white-space: pre-wrap;
  word-break: break-word;
}

/* tables */
.tbl {
  width: 100%;
  /* Fixed layout + wrapping so a long description column can't force the table
     wider than its card (was overflowing the boundary). */
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.84rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}
.tbl th, .tbl td { overflow-wrap: anywhere; }
.tbl th:nth-child(1), .tbl td:nth-child(1) { width: 26%; }
.tbl th:nth-child(2), .tbl td:nth-child(2) { width: 14%; }
.tbl th:nth-child(3), .tbl td:nth-child(3) { width: 12%; }
.tbl th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-weight: 600;
  padding: 9px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.tbl td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-dim);
  vertical-align: top;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--surface-2); }

/* logs — terminal surface */
.logs {
  margin: 0;
  max-height: 460px;
  overflow: auto;
  padding: 14px 16px;
  background: var(--term-bg);
  color: var(--term-ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.35);
}
.logs .log-truncated { color: var(--queued); font-style: italic; }
.logs .log-end { color: var(--brand-strong); font-weight: 600; }

/* ============================================================================
   submit
   ========================================================================== */
.mode-toggle { display: inline-flex; gap: 4px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r); }
.mode-toggle .btn-ghost { border-color: transparent; background: transparent; }

.submit-mode { margin-top: 8px; }

.code {
  width: 100%;
  min-height: 320px;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: 0.84rem;
  line-height: 1.6;
  tab-size: 2;
  background: var(--term-bg);
  color: var(--term-ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  padding: 14px 16px;
}

.submit-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: center;
  margin: 18px 0;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--surface);
}
.submit-opts label { display: inline-flex; align-items: center; gap: 8px; font-size: 0.84rem; color: var(--ink-dim); }
.submit-opts input[type="text"], .submit-opts input:not([type="checkbox"]), .submit-opts select { min-width: 120px; }

.submit-actions { display: flex; gap: 10px; }

.submit-out {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--term-bg);
  color: var(--term-ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 360px;
  overflow: auto;
}

/* wizard */
.wizard-step {
  padding: 16px;
  margin-bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
}
.wizard-step > label { display: flex; flex-direction: column; gap: 4px; max-width: 320px; font-size: 0.82rem; color: var(--ink-dim); margin-bottom: 10px; }
.wizard-tx {
  padding: 12px;
  margin: 8px 0;
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-ring);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.wizard-tx > label { display: flex; flex-direction: column; gap: 4px; max-width: 320px; }
.sf-host { margin-top: 10px; }

/* ============================================================================
   schema-form renderer
   ========================================================================== */
.sf-object {
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  margin: 0;
  background: var(--surface-sunken);
}
.sf-field {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 12px;
  align-items: start;
  padding: 7px 0;
  border-bottom: 1px dashed var(--border);
}
.sf-field:last-child { border-bottom: 0; }
.sf-field > label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-dim);
  /* Center the label against the input's height so their text lines up, instead
     of pinning it to the top while the input text sits centered. */
  min-height: 34px;
  display: flex;
  align-items: center;
  word-break: break-word;
}
.sf-field input:not([type="checkbox"]),
.sf-field select,
.sf-field textarea { width: 100%; }
.sf-field input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand); }

.sf-array { display: flex; flex-direction: column; gap: 6px; }
.sf-array-item { display: flex; gap: 8px; align-items: flex-start; }
.sf-array-item > :first-child { flex: 1; }
.sf-array > .btn-ghost { align-self: flex-start; padding: 4px 10px; font-size: 0.8rem; }

.sf-union { display: flex; flex-direction: column; gap: 8px; }
.sf-union > select { max-width: 220px; }

.sf-raw { width: 100%; min-height: 64px; font-family: var(--font-mono); font-size: 0.8rem; }

.help { display: block; color: var(--ink-faint); font-size: 0.74rem; margin-top: 4px; line-height: 1.4; }
/* Align the description under the input's text (input has a ~11px inset: 1px
   border + 10px padding), so it doesn't hang to the left of the field. */
.sf-field .help { padding-left: 11px; }

/* ============================================================================
   schema explorer
   ========================================================================== */
.schemas-page {
  /* The schema explorer is a 2-column layout (list + wide reference table), so it
     needs more room than the default 1080px reading width. Widen it (stays
     centered, so it grows on both sides) to stop the type/description columns
     from wrapping awkwardly. */
  max-width: 1360px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  align-items: start;
}
.schema-list {
  position: sticky;
  top: 76px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-height: calc(100vh - 100px);
  overflow: auto;
  padding-right: 4px;
}
.schema-note {
  margin: 0 0 16px; padding: 2px 0 2px 10px;
  border-left: 2px solid var(--brand-ring);
  font-size: 0.72rem; line-height: 1.5; color: var(--ink-faint);
}
.schema-note b { color: var(--ink-dim); font-weight: 600; }
.schema-note code { font-size: 0.92em; }
.schema-state-list { display: flex; flex-direction: column; gap: 6px; }
.schema-state {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface-2);
}
.schema-state b { font-size: 0.82rem; color: var(--ink); }
.schema-state span { display: block; margin-top: 2px; font-size: 0.72rem; line-height: 1.45; color: var(--ink-faint); }
.schema-group { display: flex; flex-direction: column; gap: 3px; }
.schema-item {
  appearance: none;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.schema-item:hover { background: var(--surface-2); color: var(--ink); }
.schema-item.active { background: var(--brand-tint); color: var(--brand); border-left-color: var(--brand-strong); }
.tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-dim);
  padding: 2px 8px;
  margin: 2px 4px 2px 0;
  border: 1px solid var(--border);
  border-radius: 99px;
}
.schema-view {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px 20px;
  box-shadow: var(--shadow-1);
}
.schema-view h2 { margin-top: 0; font-family: var(--font-mono); }
.raw { margin-top: 14px; }
.raw summary { cursor: pointer; color: var(--ink-dim); font-size: 0.82rem; }
.raw pre {
  margin-top: 10px;
  padding: 14px;
  background: var(--term-bg);
  color: var(--term-ink);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  overflow: auto;
  max-height: 420px;
}

/* ============================================================================
   token modal
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  place-items: center;
  background: rgba(4, 8, 11, 0.55);
  backdrop-filter: blur(4px);
  padding: 20px;
}
.modal.open { display: grid; animation: fade 0.18s ease both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  width: min(420px, 100%);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-lg);
  padding: 22px 22px 18px;
  box-shadow: var(--shadow-pop);
  animation: pop 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.modal-card h2 { margin: 0 0 6px; }
.modal-card p { margin: 0 0 14px; color: var(--ink-dim); font-size: 0.86rem; }
.modal-card input { width: 100%; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* ============================================================================
   toasts
   ========================================================================== */
.toasts {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 360px;
}
.toast {
  padding: 11px 14px;
  font-size: 0.85rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--brand-strong);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-2);
  animation: toast-in 0.22s ease both;
  word-break: break-word;
}
@keyframes toast-in { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.toast-error { border-left-color: var(--fail); }
.toast-info { border-left-color: var(--brand-strong); }

/* ============================================================================
   responsive
   ========================================================================== */
@media (max-width: 760px) {
  .topbar { gap: 10px; padding: 0 12px; }
  .brand-name { display: none; }
  .page { padding: 18px 14px 48px; }
  .run-row { grid-template-columns: auto 1fr; row-gap: 4px; }
  .run-row .run-meta { text-align: left; }
  .run-time { min-width: 0; }
  .schemas-page { grid-template-columns: 1fr; }
  .schema-list { position: static; max-height: none; }
  .sf-field { grid-template-columns: 1fr; gap: 4px; }
  .sf-field > label { padding-top: 0; }
}

/* ============================================================================
   reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Dead-letter-queue panel (#281) */
.dlq-panel { display: flex; flex-direction: column; gap: 0.5rem; }
.dlq-hint { color: var(--muted, #888); font-size: 0.85rem; margin: 0; }
.dlq-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.dlq-input { flex: 1 1 20rem; min-width: 12rem; }
.dlq-check { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; }
.dlq-tables { display: flex; flex-wrap: wrap; gap: 1rem; }
.dlq-tables .tbl { flex: 0 1 auto; }
.dlq-json { white-space: pre-wrap; word-break: break-all; font-size: 0.8rem; overflow-x: auto; }
.dlq-sample { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.dlq-replay textarea { width: 100%; font-family: monospace; box-sizing: border-box; }
.rollback-panel { margin: 0.75rem 0 1rem; }
.rollback-panel[hidden] { display: none; }
.rollback-panel h2 { margin: 0 0 0.25rem; }
.rollback-result ul { margin: 0.4rem 0 0 1rem; padding: 0; }
.rollback-result li { margin: 0.15rem 0; }

/* Data Movement Catalog (#279): Datasets browser + Lineage graph */
.mono { font-family: var(--font-mono); }
.dataset-title { font-size: 1.05rem; word-break: break-all; }
.detail-grid label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted, #888); margin-bottom: 2px; }
.volume-bars { display: flex; align-items: flex-end; gap: 4px; min-height: 68px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); }
/* Sparse (<3 runs): a text summary instead of a lone bar in an empty box. */
.volume-summary { padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); color: var(--ink-dim); font-size: 0.9rem; }
.volume-hint { color: var(--ink-faint); }

/* Local-outputs "Manage" disclosure — tuck the destructive controls away. */
.lo-manage { position: relative; }
.lo-manage > summary { list-style: none; cursor: pointer; user-select: none; font-size: 0.85rem; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-dim); white-space: nowrap; }
.lo-manage > summary::-webkit-details-marker { display: none; }
.lo-manage[open] > summary { border-color: var(--brand-strong); color: var(--brand-strong); }
.lo-manage-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; min-width: 320px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-1); }
.volume-bar { width: 14px; border-radius: 3px 3px 0 0; background: var(--running, #4a9eda); opacity: 0.85; }
/* Column profiles (#708) on the dataset detail page. */
.profile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 10px; color: var(--ink-dim); font-size: 0.88rem; }
.profile-drift { list-style: none; margin: 0 0 12px; padding: 10px 14px; display: grid; gap: 6px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--queued) 40%, transparent); border-radius: var(--r); }
.profile-drift li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 0.85rem; }
.pill.drift-flag { color: var(--queued); border-color: color-mix(in srgb, var(--queued) 45%, transparent); background: color-mix(in srgb, var(--queued) 12%, transparent); }
.ds-table.profile-table th, .ds-table.profile-table td { text-align: left; padding: 10px 14px; }
.ds-table.profile-table th:nth-child(1), .ds-table.profile-table td:nth-child(1) { width: 22%; padding-right: 14px; }
.ds-table.profile-table th:nth-child(2), .ds-table.profile-table td:nth-child(2) { width: 104px; }
.ds-table.profile-table th:nth-child(3), .ds-table.profile-table td:nth-child(3) { width: 168px; }
.ds-table.profile-table th:nth-child(4), .ds-table.profile-table td:nth-child(4) { width: 84px; text-align: right; }
.ds-table.profile-table th:nth-child(5), .ds-table.profile-table td:nth-child(5) { width: 20%; }
.ds-table.profile-table th:nth-child(6), .ds-table.profile-table td:nth-child(6) { width: auto; }
.ds-table.profile-table td.num { font-variant-numeric: tabular-nums; }
.profile-flags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.profile-drift .run-meta { text-align: left; flex: 1 1 240px; }
.table-scroll { overflow-x: auto; }
.ds-table.profile-table { min-width: 760px; }
.ds-table.profile-table td:nth-child(5) { overflow-wrap: anywhere; }
.ds-table.profile-table tr.profile-drifted td:first-child { box-shadow: inset 3px 0 0 var(--queued); }
.profile-null { white-space: nowrap; font-variant-numeric: tabular-nums; }
.spark { vertical-align: middle; margin-left: 6px; }
.spark path { fill: none; stroke: var(--brand-strong); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.spark .spark-end { fill: var(--brand-strong); }
.spark .spark-drift { fill: var(--queued); }
.profile-chip { display: inline-block; margin: 2px 6px 2px 0; padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); font-size: 0.78rem; font-family: var(--font-mono); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.profile-chip b { font-weight: 600; color: var(--ink-dim); font-family: inherit; }
.volume-bar:hover { opacity: 1; }
.schema-version { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); margin-bottom: 8px; }
.schema-version summary { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; flex-wrap: wrap; }
.schema-json { margin: 0; padding: 12px 14px; border-top: 1px solid var(--border); font-size: 0.78rem; overflow-x: auto; }
.diff-added   { color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
.diff-widened { color: var(--queued); border-color: color-mix(in srgb, var(--queued) 40%, transparent); }
.diff-changed { color: var(--fail); border-color: color-mix(in srgb, var(--fail) 40%, transparent); }
.diff-removed { color: var(--cancelled); border-color: color-mix(in srgb, var(--cancelled) 40%, transparent); }
.edge-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 12px; }
.edge-lists h3 { margin: 4px 0; font-size: 0.85rem; color: var(--ink-dim); }
/* Owners + declared consumers (#707). */
.stewardship { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 12px; }
.stewardship > div > label { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-dim); margin-bottom: 6px; }
.stewardship-owners { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.stewardship-owners > label { flex-basis: 100%; }
.owner-pill { color: var(--brand); border-color: var(--brand-ring); background: var(--brand-tint); text-transform: none; letter-spacing: 0; }
.consumer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 0.84rem; }
.consumer-row:first-of-type { border-top: 0; }
.consumer-name { font-weight: 600; color: var(--ink); }
.annotate-form > summary { cursor: pointer; font-size: 0.84rem; color: var(--ink-dim); }
.annotate-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 16px; margin: 10px 0; }
.annotate-fields label { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; font-size: 0.78rem; color: var(--ink-dim); min-width: 0; }
.annotate-fields input { width: 100%; min-width: 0; }
/* The graph scrolls both ways inside its card. The SVG keeps its natural pixel
   size (set as width/height attributes) rather than stretching to 100% — that
   is what lets wide labels overflow and scroll left/right instead of squashing. */
.lineage-graph { overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 8px; max-height: 78vh; }
.lineage-svg { display: block; margin: 0 auto; }
.lineage-hint { margin: -4px 0 12px; font-size: 0.8rem; color: var(--ink-faint); }

/* "Load more" — a centred, intentional affordance rather than a stray ghost
   button pinned to the left edge under the last row. */
.load-more {
  display: block;
  margin: 16px auto 4px;
  min-width: 220px;
  padding: 10px 22px;
  font-weight: 550;
  color: var(--ink-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.load-more:hover {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--brand-strong);
  box-shadow: var(--shadow-1);
}
/* `display:block` above outranks the UA `[hidden]{display:none}` (same
   specificity, author wins), so the button stayed visible even when hidden was
   set. This restores it: at the end of the list the button truly disappears. */
.load-more[hidden] { display: none; }

/* Numbered pager (datasets): « ‹ 1 … 4 [5] 6 … 20 › » + a count summary. */
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 4px;
}
.pager:empty { display: none; }
.pager-btn {
  min-width: 34px;
  padding: 6px 10px;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pager-btn:hover:not(:disabled):not(.is-current) {
  background: var(--surface-2);
  color: var(--ink);
  border-color: var(--brand-strong);
}
.pager-btn.is-current {
  background: var(--brand-strong);
  border-color: var(--brand-strong);
  color: #fff;
  font-weight: 600;
  cursor: default;
}
.pager-btn:disabled { opacity: 0.4; cursor: default; }
.pager-gap { color: var(--ink-faint); padding: 0 2px; }
.pager-info {
  margin-left: 10px;
  font-size: 0.78rem;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.lineage-edge { fill: none; stroke: var(--border); stroke-width: 2; transition: stroke 0.15s, opacity 0.15s; }
.lineage-edge:hover { stroke: var(--brand-strong); }
.lineage-node rect { fill: var(--surface-2, #f4f6f8); stroke: var(--border); stroke-width: 1; transition: stroke 0.15s, fill 0.15s, opacity 0.15s; }
.lineage-node text { fill: var(--ink-dim); font-family: var(--font-mono); font-size: 11px; transition: fill 0.15s; }
/* Label lives in a foreignObject and scrolls horizontally *inside* the box, so
   the full path is reachable by scrolling the box itself (like .ds-uri-in). The
   scrollbar is hidden (trackpad / shift-wheel still scroll) with a right-edge
   fade hinting there is more to the right. */
.lnode-label {
  height: 100%;
  line-height: 24px; /* NODE_H (26) − 2 border (#646) */
  padding: 0 10px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 10.5px; /* #646: lighter, cleaner type — was 11px */
  letter-spacing: -0.1px;
  color: var(--ink-dim);
  cursor: pointer;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
}
.lnode-label::-webkit-scrollbar { display: none; }
.lineage-node:hover rect { stroke: var(--brand-strong); }
.lineage-root rect { stroke: var(--ok); stroke-width: 2; } /* #646: was 2.5 */
/* Click-to-highlight: the selected node, its neighbours, and their edges stay
   bright while everything else dims, so a dataset's connections read at a glance.
   Selected = solid brand; neighbour = brand tint; active edge = brand line. */
.lineage-node.is-selected rect { fill: color-mix(in srgb, var(--brand) 14%, var(--surface)); stroke: var(--brand); stroke-width: 1.5; }
.lineage-node.is-selected text { fill: var(--ink); }
.lineage-node.is-selected .lnode-label { color: var(--ink); font-weight: 600; }
.lineage-node.is-neighbour rect { fill: color-mix(in srgb, var(--brand) 6%, var(--surface)); stroke: color-mix(in srgb, var(--brand) 55%, var(--border)); stroke-width: 1; }
.lineage-node.is-neighbour .lnode-label { color: var(--ink); }
.lineage-edge.is-active { stroke: var(--brand); stroke-width: 1.5; }
/* Non-highlighted nodes clearly recede: opacity alone barely fades an already
   pale box on a pale ground, so also wash the fill toward the background and
   grey the text — the highlighted set then reads unmistakably. */
.lineage-svg.has-selection .lineage-node:not(.is-selected):not(.is-neighbour) rect {
  fill: color-mix(in srgb, var(--border) 22%, var(--surface));
  stroke: color-mix(in srgb, var(--border) 55%, transparent);
}
.lineage-svg.has-selection .lineage-node:not(.is-selected):not(.is-neighbour) .lnode-label { color: var(--ink-faint); opacity: 0.55; }
.lineage-svg.has-selection .lineage-edge:not(.is-active) { opacity: 0.12; }

/* ============================================================================
   pipeline templates (#444)
   ========================================================================== */
/* status · name · updated · live · newest · params — fixed meta widths so the
   column header (a separate grid) lines up with the rows below it. */
/* Borderless rows with a bottom separator so Templates reads as the same table
   as Runs/Datasets (its columns are fixed-width, so they already align). */
.tpl-row {
  grid-template-columns: 120px 1fr 108px 205px 56px 64px 60px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: none;
  padding: 14px 16px;
}
.tpl-row:hover { background: color-mix(in srgb, var(--ink-faint) 8%, transparent); border-left: none; box-shadow: none; transform: none; }
.tpl-row .run-meta { white-space: nowrap; } /* keep the timestamp (incl. AM/PM) on one line */
.tpl-list-head {
  display: grid;
  grid-template-columns: 120px 1fr 108px 205px 56px 64px 60px;
  align-items: center;
  gap: 14px;
  position: sticky;
  top: 56px;
  z-index: 15;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  /* match .run-row content inset: 16px padding + 3px transparent left border */
  padding: 10px 16px;
  border-left: 3px solid transparent;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tpl-list-head .tpl-col-r { text-align: right; }
/* Sortable column headers — look like the plain labels, but clickable. */
.tpl-list-head .tpl-sort {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: color 0.15s;
}
.tpl-list-head .tpl-sort:hover { color: var(--ink); }
.tpl-list-head .tpl-sort.is-active { color: var(--brand); }
.tpl-list-head .tpl-sort.tpl-col-r { justify-content: flex-end; }
.tpl-sort-caret { font-size: 0.9em; }
.tpl-list-head .tpl-sort:not(.is-active) .tpl-sort-caret { opacity: 0.4; }
.tpl-row-kind { display: flex; align-items: center; }
/* Every kind is the same width, so the column lines up. */
.tpl-row-kind .tpl-kind { box-sizing: border-box; width: 96px; padding-left: 0; padding-right: 0; }
.tpl-row-id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tpl-row-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Template kind pills — hue per kind so a mixed list scans at a glance. */
.tpl-kind { font-size: 0.62rem; line-height: 1; padding: 4px 8px; letter-spacing: 0.03em; justify-content: center; }
/* Trim the label to its cap height so the equal padding centres the (all-caps)
   text exactly, instead of leaving the descender space below it. */
.tpl-kind .pill-label { display: block; text-box: trim-both cap alphabetic; }
.tpl-kind-source-template { color: var(--running);   border-color: color-mix(in srgb, var(--running) 45%, transparent);   background: color-mix(in srgb, var(--running) 12%, transparent); }
.tpl-kind-sink-template   { color: var(--queued);    border-color: color-mix(in srgb, var(--queued) 45%, transparent);    background: color-mix(in srgb, var(--queued) 12%, transparent); }
.tpl-kind-pipeline        { color: var(--ink-dim);   border-color: var(--border-strong);                                    background: var(--surface-2); }
.tpl-kind-deployment      { color: var(--overlay);   border-color: color-mix(in srgb, var(--overlay) 45%, transparent);   background: color-mix(in srgb, var(--overlay) 12%, transparent); }
.tpl-kind-source-template::before, .tpl-kind-sink-template::before, .tpl-kind-pipeline::before, .tpl-kind-deployment::before { display: none; }
.tpl-row-id b { font-weight: 600; font-size: 0.95rem; }
.tpl-row-desc {
  font-size: 0.8rem;
  color: var(--ink-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tpl-h2 { margin: 26px 0 10px; font-size: 0.95rem; color: var(--ink-dim); }

/* Source × sink compatibility matrix on the Templates page (#677). */
.tpl-matrix { margin-bottom: 18px; }
/* Owner / Type filters above the compatibility grid: pill buttons that open a
   checkbox menu, one pair per axis. */
.tpl-facets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.tpl-facet-group { display: inline-flex; align-items: center; gap: 8px; }
.tpl-facets-sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 6px; }
.tpl-facets-count { margin-left: auto; }
.tpl-facet { position: relative; }
.tpl-facet-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink); font: inherit; font-size: 0.84rem; cursor: pointer;
}
.tpl-facet-btn:hover { border-color: var(--border-strong); }
.tpl-facet-btn.is-on { border-color: var(--brand-ring); background: var(--brand-tint); color: var(--brand); }
.tpl-facet-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.7; }
.tpl-facet-n { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--brand); color: var(--surface); font-size: 0.7rem; line-height: 18px; text-align: center; }
.tpl-facet-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; min-width: 180px; max-height: 260px; overflow: auto;
  padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 14%, transparent);
}
.tpl-facet-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 0.84rem; cursor: pointer; white-space: nowrap; }
.tpl-facet-opt:hover { background: var(--surface-2); }
.tpl-matrix-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.tpl-matrix-head .tpl-h2 { margin: 6px 0 8px; }
/* The grid scrolls inside its own box both ways, with the sink header row and
   the source column pinned, so a large catalog stays readable and the list
   below it stays in reach. */
.tpl-matrix-scroll { overflow: auto; max-height: 460px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
/* `.tbl` clips with `overflow: hidden`, which would make the table itself the
   sticky containing box and let the pinned header scroll away with it. The
   scroll box above already draws the border and the rounded corners. */
.tpl-matrix-table { margin: 0; min-width: 100%; width: max-content; table-layout: auto; border-collapse: separate; border-spacing: 0; overflow: visible; border: 0; border-radius: 0; }
.tpl-matrix-table th, .tpl-matrix-table td { width: auto; }
.tpl-matrix-table td { padding: 7px 10px; vertical-align: middle; }
.tpl-matrix-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); min-width: 92px; max-width: 128px; padding: 9px 10px; border-bottom: 1px solid var(--border); }
.tpl-matrix-table thead th a, .tpl-matrix-table thead th .tpl-matrix-kind { display: block; overflow: hidden; text-overflow: ellipsis; }
.tpl-matrix-table tbody th { position: sticky; left: 0; z-index: 1; background: var(--surface); max-width: 230px; min-width: 190px; padding: 7px 12px; border-right: 1px solid var(--border); overflow: hidden; text-overflow: ellipsis; }
.tpl-matrix-table thead th.tpl-matrix-corner { left: 0; z-index: 3; text-align: left; border-right: 1px solid var(--border); }
.tpl-matrix-table tbody tr:hover th { background: var(--surface-2); }
.tpl-matrix-table th, .tpl-matrix-table td { text-align: center; white-space: nowrap; }
.tpl-matrix-table thead th { vertical-align: bottom; }
.tpl-matrix-table tbody th { text-align: left; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 0.9rem; }
.tpl-matrix-table a { color: inherit; text-decoration: none; }
.tpl-matrix-table a:hover { text-decoration: underline; }
.tpl-matrix-kind { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.03em; color: var(--ink-faint); text-transform: none; font-weight: 500; margin-top: 2px; }
.tpl-matrix-corner { color: var(--ink-faint); font-weight: 500; }
.tpl-cell { font-family: var(--font-mono); font-size: 0.85rem; min-width: 64px; }
.tpl-cell a { display: inline-block; padding: 4px 12px; border-radius: 999px; }
.tpl-cell-ok a { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.tpl-cell-ok a:hover { background: color-mix(in srgb, var(--ok) 22%, transparent); text-decoration: none; }
.tpl-cell-partial a, .tpl-cell-partial > span { color: var(--queued); background: color-mix(in srgb, var(--queued) 14%, transparent); }
.tpl-cell-partial > span { display: inline-block; padding: 4px 12px; border-radius: 999px; cursor: help; }
.tpl-cell-bad { color: var(--fail); }
.tpl-cell-none { color: var(--ink-faint); }
.tpl-desc { color: var(--ink-dim); font-size: 0.88rem; margin: 12px 0 0; }

.tpl-notice {
  margin: 14px 0 0;
  padding: 11px 14px;
  font-size: 0.86rem;
  color: var(--ink-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--queued);
  border-radius: var(--r-sm);
}
.tpl-notice b { color: var(--ink); }
.tpl-notice code { font-family: var(--font-mono); font-size: 0.82rem; }
.tpl-notice-warn { border-left-color: var(--cancelled); }

.tpl-register {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
}
.tpl-register textarea { min-height: 220px; }

.tpl-versions { display: flex; flex-direction: column; gap: 6px; }
/* Flex, not grid: a control hidden for the caller's role (#698) must leave no
   empty track behind, and the fixed widths below keep rows aligned. */
.tpl-version {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.tpl-version-live { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.tpl-version[data-version] { cursor: pointer; }
.tpl-versions-hint { margin: -4px 0 8px; font-size: 0.8rem; }
.tpl-version-picked { box-shadow: 0 0 0 2px var(--brand-ring); background: color-mix(in srgb, var(--brand-tint) 55%, var(--surface)); }
.tpl-vnum { font-weight: 700; font-size: 0.9rem; flex: 0 0 42px; }
.tpl-vchannels { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 auto; min-width: 0; }
.tpl-version .tpl-vdeprecate { min-width: 96px; }
.tpl-version .tpl-launch { min-width: 76px; }
.tpl-assign { max-width: 160px; }
.tpl-version .btn-ghost, .tpl-version .btn-danger, .tpl-version .btn-warn { padding: 5px 11px; font-size: 0.8rem; }
.tpl-version-retired { background: color-mix(in srgb, var(--surface-sunken) 60%, var(--surface)); }
.tpl-version-retired .tpl-vnum { color: var(--ink-dim); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-faint) 70%, transparent); }
.tpl-launch-wrap { overflow-x: auto; }
.tpl-launch-tbl th:nth-child(1), .tpl-launch-tbl td:nth-child(1) { width: 4rem; }
.tpl-launch-tbl th:nth-child(2), .tpl-launch-tbl td:nth-child(2) { width: 6rem; }
.tpl-launch-tbl th:nth-child(3), .tpl-launch-tbl td:nth-child(3) { width: 14rem; }
.tpl-launch-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tpl-body {
  flex: 1 1 100%;
  margin: 6px 0 0;
  max-height: 340px;
  overflow: auto;
  padding: 13px 15px;
  background: var(--term-bg);
  color: var(--term-ink);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.6;
  tab-size: 2;
  white-space: pre;
}

.tpl-trigger {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
/* Trigger options: a grid of label-over-control fields, so every control lines up. */
.submit-opts.tpl-trigger-opts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; align-items: end; margin: 0; padding: 0; border: 0; background: none; }
.tpl-trigger-opts label { display: flex; flex-direction: column; align-items: stretch; gap: 5px; min-width: 0; font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.tpl-trigger-opts label.tpl-field-wide { grid-column: span 2; }
.tpl-picked { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; box-sizing: border-box; min-height: 33px; padding: 4px 10px; border: 1px dashed var(--border); border-radius: var(--r); font-weight: 400; color: var(--ink); }
.tpl-picked b { font-weight: 700; margin-right: 2px; }
.tpl-trigger-opts select, .tpl-trigger-opts input:not([type="checkbox"]) { width: 100%; min-width: 0; font-weight: 400; }
@media (max-width: 900px) { .submit-opts.tpl-trigger-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .submit-opts.tpl-trigger-opts { grid-template-columns: minmax(0, 1fr); } .tpl-trigger-opts label.tpl-field-wide { grid-column: auto; } }
/* Trigger form: one section per composed template (source / sink /
   deployment), each with its own picker row and parameters, then the run. */
.tpl-seg { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r); }
.tpl-seg-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tpl-seg-head h3 { margin: 0; font-size: 0.74rem; font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-dim); }
.tpl-seg-hint { font-size: 0.78rem; color: var(--ink-faint); }
.tpl-seg-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; align-items: start; }
.tpl-seg-fields label { display: flex; flex-direction: column; align-items: stretch; gap: 5px; min-width: 0; font-size: 0.82rem; font-weight: 600; color: var(--ink); }
.tpl-seg-fields label.tpl-field-wide { grid-column: span 2; }
.tpl-seg-fields select, .tpl-seg-fields input:not([type="checkbox"]) { width: 100%; min-width: 0; font-weight: 400; }
.tpl-seg .tpl-params:empty { display: none; }
.tpl-seg .tpl-params > .tpl-desc { margin: 0; font-size: 0.8rem; color: var(--ink-faint); }
@media (max-width: 700px) {
  .tpl-seg-fields { grid-template-columns: minmax(0, 1fr); }
  .tpl-seg-fields label.tpl-field-wide { grid-column: auto; }
}
.tpl-params { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 18px; }
.tpl-param { display: flex; flex-direction: column; gap: 5px; }
.tpl-param-name { font-size: 0.82rem; font-weight: 600; color: var(--ink); }
/* Tags sit on their own row beneath the variable name, and are a touch smaller. */
.tpl-param-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-bottom: 1px; }
.tpl-param-tags .pill { font-size: 0.6rem; line-height: 1; padding: 3px 7px; justify-content: center; }
.tpl-param-tags .pill::before { display: none; }

/* Trigger form row picker (#741): one checkbox row per stream / matrix row. */
.tpl-rows-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 18px; }
.tpl-rows-parents { display: flex; flex-direction: column; gap: 5px; font-size: 0.82rem; font-weight: 600; color: var(--ink); min-width: 240px; }
.tpl-rows-parents select { font-weight: 400; }
.tpl-rows-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.tpl-rows { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.tpl-pick {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: 4px 12px;
  padding: 9px 12px; border-top: 1px solid var(--border); cursor: pointer; font-size: 0.84rem; color: var(--ink);
  transition: background 0.12s;
}
.tpl-pick:first-child { border-top: 0; }
.tpl-pick:hover { background: var(--surface-2); }
.tpl-pick input[type="checkbox"] { margin: 0; accent-color: var(--brand); }
.tpl-pick-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.tpl-pick-id { font-weight: 600; overflow-wrap: anywhere; }
.tpl-pick-main .pill { font-size: 0.66rem; padding: 2px 8px; }
.tpl-pick-tag { font-size: 0.7rem; color: var(--ink-dim); border: 1px solid var(--border); border-radius: 999px; padding: 1px 7px; }
.tpl-pick-facts { color: var(--ink-faint); font-size: 0.78rem; min-width: 0; overflow-wrap: anywhere; }
.tpl-pick-why, .tpl-pick-mark { grid-column: 2 / -1; font-size: 0.76rem; }
.tpl-pick-why { color: var(--fail); }
.tpl-pick-mark:empty { display: none; }
.tpl-pick-disabled { cursor: not-allowed; opacity: 0.7; }
.tpl-pick-disabled:hover { background: transparent; }
.tpl-pick-ancestor { background: var(--brand-tint); }
.tpl-pick-pulled .tpl-pick-mark { color: var(--brand); font-weight: 550; }
.tpl-pick-blocked { background: color-mix(in srgb, var(--fail) 8%, transparent); }
.tpl-pick-blocked .tpl-pick-mark { color: var(--fail); }
.tpl-rows-preview { font-size: 0.8rem; color: var(--ink-dim); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 1.2em; }
.tpl-rows-preview-label { font-size: 0.7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.tpl-rows-arrow { color: var(--ink-faint); }
.tpl-rows-preview-err { color: var(--fail); }
@media (max-width: 700px) {
  .tpl-pick { grid-template-columns: 18px minmax(0, 1fr); }
  .tpl-pick-facts { grid-column: 2 / -1; }
}

/* Status filter chips on the templates list (multi-toggle; launched+draft on by default). */
.tpl-status-filter { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* Status and kind are separate dimensions: a label each, and a divider between. */
.tpl-status-filter + .tpl-status-filter { border-left: 1px solid var(--border); padding-left: 14px; margin-left: 6px; }
@media (max-width: 1100px) { .tpl-status-filter + .tpl-status-filter { border-left: 0; padding-left: 0; margin-left: 0; } }
.tpl-filter-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-right: 2px; }
.tpl-chip {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-faint);
  border-radius: 999px; padding: 5px 12px; font-size: 0.78rem; cursor: pointer;
  font-family: var(--font-sans); transition: color 0.14s, background 0.14s, border-color 0.14s;
}
.tpl-chip:hover { color: var(--ink); border-color: var(--border-strong); }
.tpl-chip.is-on { background: var(--brand-tint); border-color: var(--brand-ring); color: var(--brand); font-weight: 550; }

@media (max-width: 760px) {
  /* Number + channels on the first line, then the controls wrap as one row. */
  .tpl-version { display: flex; flex-wrap: wrap; row-gap: 8px; }
  .tpl-version .tpl-vnum { flex: 0 0 42px; }
  .tpl-version .tpl-vchannels { flex: 1 1 calc(100% - 52px); }
  .tpl-version .tpl-assign { max-width: none; flex: 1 1 100%; }
  .tpl-version .tpl-body { flex: 1 1 100%; }
  /* The fixed column header can't line up once rows stack — hide it and let the
     rows collapse to status + name with the meta wrapping below. */
  .tpl-list-head { display: none; }
  /* Narrow: pills on top, the name full width, then the numbers on one labelled line. */
  .tpl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .tpl-row .tpl-row-id { flex: 1 1 100%; }
  .tpl-row .run-meta { font-size: 0.78rem; }
  .tpl-row .run-meta[data-l]::before { content: attr(data-l) " "; color: var(--ink-faint); }
  .tpl-row .run-meta { text-align: left; }
}

/* ── Local outputs panel (#587/#588) ─────────────────────────────────────────
   Cleanup controls for local sink output files, on the Datasets page (where the
   data artifacts already are) rather than the Runs tab (which is about
   execution history). */
.lo-head { margin-top: 28px; }
.lo-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.lo-bar .run-meta { margin-right: auto; }
.lo-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--ink-dim);
  white-space: nowrap;
}
.lo-purge { display: inline-flex; align-items: center; gap: 6px; }
.lo-purge input { width: 72px; }
.lo-list { display: flex; flex-direction: column; gap: 6px; }
.lo-row {
  display: grid;
  /* kind · path · state · age · last-written · preview · delete — FIXED widths so
     every independent row grid lines up (badge/age/time/buttons align). */
  grid-template-columns: 84px minmax(0, 1fr) 92px 72px 190px 82px 96px;
  align-items: center;
  gap: 10px;
  cursor: default;
}
.lo-row .lo-state, .lo-row .run-meta { justify-self: start; }
.lo-row .lo-preview-btn, .lo-row .btn-danger { justify-self: stretch; text-align: center; }
.lo-row .run-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-row .btn-danger { padding: 5px 11px; font-size: 0.8rem; }
/* An expired output is a normal, expected end state — dimmed, never an error. */
.lo-expired { opacity: 0.62; }
.lo-expired .lo-state { color: var(--ink-dim); border-color: var(--border); background: transparent; }
/* An external file is outside the GC's authority; mark it so the absence of a
   Delete button reads as deliberate rather than as a missing control. */
.lo-external .lo-state {
  color: var(--queued);
  border-color: color-mix(in srgb, var(--queued) 40%, transparent);
  background: color-mix(in srgb, var(--queued) 12%, transparent);
}
.lo-replaced .lo-state {
  color: var(--running);
  border-color: color-mix(in srgb, var(--running) 40%, transparent);
  background: color-mix(in srgb, var(--running) 12%, transparent);
}
.lo-present .lo-state {
  color: var(--ok);
  border-color: color-mix(in srgb, var(--ok) 40%, transparent);
  background: color-mix(in srgb, var(--ok) 12%, transparent);
}


/* ── Dataset preview (#586) ───────────────────────────────────────────────────
   The rows an output actually holds, read back through the matching source
   connector. Expands below its output row; the table scrolls on its own axis so
   a 40-column parquet part can never widen the page. */
.lo-item { display: flex; flex-direction: column; gap: 6px; }
.lo-preview {
  padding: 10px 12px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.dp-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.dp-rows-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--ink-dim);
}
.dp-rows { width: 84px; }
.dp-bar .btn-ghost { padding: 5px 11px; font-size: 0.8rem; }
.dp-scroll { overflow-x: auto; }
.dp-table {
  /* Auto layout (not the fixed widths of `.tbl`): the column set is whatever
     the data has, so nothing sensible can be hardcoded. */
  border-collapse: collapse;
  font-size: 0.8rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}
.dp-table th {
  position: sticky;
  top: 0;
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  font-weight: 600;
  padding: 7px 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.dp-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  color: var(--ink-dim);
  vertical-align: top;
  /* Keep each value on one line — the table scrolls horizontally for wide
     column sets; a single oversized value is ellipsised, not wrapped. */
  white-space: nowrap;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dp-table tbody tr:last-child td { border-bottom: 0; }
.dp-table tbody tr:hover td { background: var(--surface-2); }
/* A missing / null field reads as absent, not as an empty string. */
.dp-absent { color: var(--ink-faint); }
.dp-raw { white-space: pre-wrap; }

@media (max-width: 760px) {
  .lo-row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 8px; }
  .lo-bar .run-meta { margin-right: 0; width: 100%; }
}

/* ── templates: remote-origin sync panel (RFC 0006) ─────────────────────── */
.tpl-sync {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  margin: 0 0 14px;
  background: var(--surface);
  display: grid;
  gap: 10px;
}
.tpl-sync-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tpl-sync-head h2 {
  font-size: 14px;
  margin: 0;
  flex: 1 1 auto;
}
.tpl-sync-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-dim);
}
.tpl-sync-origins {
  display: grid;
  gap: 4px;
}
.tpl-sync-origin {
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 12.5px;
}
.tpl-sync-out {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.tpl-sync-report ul {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 12.5px;
  line-height: 1.55;
}
.tpl-sync-report-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.tpl-sync-mut { color: var(--ink); }
.tpl-sync-quiet { color: var(--ink-faint); }
.tpl-sync-warn { color: var(--queued); }
.tpl-sync-fail { color: var(--fail); }
.tpl-facets-clear { background: none; border: 0; padding: 0; font: inherit; font-size: 0.82rem; color: var(--brand); cursor: pointer; }
.tpl-facets-clear:hover { text-decoration: underline; }
/* Narrow screens: the axis separator goes (each group wraps as a unit) and the
   pinned source column gives the grid more room. After the base grid rules on
   purpose — same specificity, so order decides. */
@media (max-width: 700px) {
  .tpl-facets-sep { display: none; }
  .tpl-matrix-table tbody th { min-width: 120px; max-width: 150px; }
  .tpl-matrix-head .run-meta { text-align: left; }
}

/* Run summary (detail head): one card, split into labelled segments. */
.run-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-1); overflow: hidden; }
.rs-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.rs-name { margin: 0; font-size: 1.05rem; font-weight: 650; color: var(--ink); overflow-wrap: anywhere; }
.rs-id { margin-left: auto; font-size: 0.75rem; color: var(--ink-faint); }
.rs-segments { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.rs-seg { padding: 14px 18px; border-left: 1px solid var(--border); }
.rs-seg:first-child { border-left: 0; }
.rs-seg h3 { margin: 0 0 10px; font-size: 0.68rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.rs-seg dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; margin: 0; align-items: baseline; }
.rs-seg dt { font-size: 0.8rem; color: var(--ink-dim); }
.rs-seg dd { margin: 0; font-family: var(--font-mono); font-size: 0.84rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.rs-seg dd small { display: block; margin-top: 1px; font-family: var(--font-sans, inherit); font-size: 0.72rem; color: var(--ink-faint); }
.rs-seg dd.rs-empty { color: var(--ink-faint); }
.rs-seg dd a { color: var(--brand); }
@media (max-width: 720px) {
  .rs-seg { border-left: 0; border-top: 1px solid var(--border); }
  .rs-seg:first-child { border-top: 0; }
}

/* Submit wizard: optional pipeline blocks */
.wizard-step[data-group] > h3 { margin-bottom: 4px; }
.wizard-hint { margin: 0 0 12px; font-size: 0.82rem; color: var(--ink-dim); }
.wizard-adders { display: flex; flex-wrap: wrap; gap: 8px; }
.wizard-adders:empty { display: none; }
.wizard-blocks:not(:empty) { margin-bottom: 12px; display: flex; flex-direction: column; gap: 10px; }
.wizard-block { border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); padding: 12px 14px; }
.wizard-block-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wizard-block-head b { display: block; font-size: 0.9rem; color: var(--ink); }
.wizard-block-head small { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--ink-dim); }
.wizard-block-remove { padding: 2px 8px; line-height: 1.4; }
.wizard-block .wizard-tx { margin-top: 10px; }

/* Optional nested settings: off until switched on, so an unused feature is
   never enabled with its defaults. */
.sf-optional-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; font-size: 0.8rem; color: var(--ink-dim); cursor: pointer; }
.sf-optional .sf-object { margin-top: 6px; }

/* Signed-in identity (#698): principal + role next to the token button. */
.whoami { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 0.78rem; color: var(--ink-dim); white-space: nowrap; }
.whoami-name { font-family: var(--font-mono); color: var(--ink); max-width: 14ch; overflow: hidden; text-overflow: ellipsis; }
.whoami-role { padding: 1px 7px; border-radius: 999px; font-size: 0.68rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; background: var(--brand-tint); color: var(--brand); }
.whoami[data-role="viewer"] .whoami-role { background: color-mix(in srgb, var(--ink-faint) 16%, transparent); color: var(--ink-dim); }
@media (max-width: 720px) { .whoami-name { display: none; } }

/* ── Usage (#704) ─────────────────────────────────────────────────────────── */
.usage-filters .usage-by { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--ink-faint); }
.usage-filters #u-pipeline { flex: 1 1 auto; min-width: 90px; }
.usage-summary { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 14px 0 10px; font-size: 0.86rem; color: var(--ink-faint); }
.usage-summary .usage-stat b { color: var(--ink); font-variant-numeric: tabular-nums; }
.usage-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.usage-table thead th {
  position: sticky; top: 56px; z-index: 15; background: var(--surface);
  text-align: right; font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.usage-table thead th:first-child, .usage-table td.usage-key { text-align: left; }
.usage-table tbody td, .usage-table tfoot td {
  padding: 12px 14px; border-bottom: 1px solid var(--border); text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.usage-table td.usage-key { max-width: 360px; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.usage-table tfoot .usage-total td { font-weight: 700; border-top: 2px solid var(--border-strong); border-bottom: none; background: var(--surface-2); }
.usage-table td.empty { text-align: center; }
.usage-nr { display: inline-block; margin-left: 8px; font-size: 0.68rem; font-weight: 500; color: var(--queued); border: 1px solid color-mix(in srgb, var(--queued) 40%, transparent); border-radius: 999px; padding: 1px 7px; vertical-align: middle; }
.usage-failed { color: var(--fail); font-size: 0.78rem; }
.usage-note { margin-top: 14px; font-size: 0.8rem; color: var(--ink-faint); max-width: 70ch; }
.usage-note code { font-size: 0.78rem; }

/* ── Changes (#703) ───────────────────────────────────────────────────────── */
.chg-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 12px; }
.chg-table thead th {
  position: sticky; top: 56px; z-index: 15; background: var(--surface);
  text-align: left; font-size: 0.68rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; padding: 10px 14px; border-bottom: 1px solid var(--border);
}
.chg-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.chg-tr { cursor: pointer; }
.chg-tr:hover td { background: color-mix(in srgb, var(--ink-faint) 8%, transparent); }
.chg-tr.chg-selected td { background: var(--brand-tint); }
.chg-summary { max-width: 520px; }
.chg-reason { color: var(--ink-faint); font-size: 0.82rem; margin-top: 3px; }
.chg-detail { margin-top: 22px; padding: 18px 22px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.chg-detail-head { display: flex; align-items: center; gap: 12px; }
.chg-detail-head h2 { margin: 0; font-size: 1.05rem; flex: 1 1 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.chg-meta { color: var(--ink-faint); font-size: 0.82rem; margin: 8px 0 0; }
.chg-reason-big { margin: 12px 0 0; font-size: 0.95rem; }
.chg-error { margin: 12px 0 0; color: var(--fail); }
.chg-detail h3 { font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-faint); margin: 18px 0 8px; }
.chg-plan { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.chg-plan th { text-align: left; font-weight: 600; color: var(--ink-faint); padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; }
.chg-plan td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.chg-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 32px; }
.chg-kvs { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.chg-kv b { font-weight: 600; margin-right: 4px; }
.chg-muted { color: var(--ink-faint); }
.chg-approvals { margin: 0; padding-left: 18px; }
.chg-approvals li { margin: 2px 0; }
.chg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.chg-actions input { flex: 1 1 180px; min-width: 140px; }

/* Template health card (#732): the launched version's `faucet status`. */
.health-card { margin-top: 26px; }
.health-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.health-head .tpl-h2 { margin: 0 2px 0 0; }
.health-head .run-meta { margin-left: auto; }
.ds-table.health-table { min-width: 720px; }
.ds-table.health-table thead th { position: static; }
.ds-table.health-table th, .ds-table.health-table td { text-align: left; padding: 10px 14px; }
.ds-table.health-table th:nth-child(1), .ds-table.health-table td:nth-child(1) { width: 18%; padding-right: 14px; }
.ds-table.health-table th:nth-child(2), .ds-table.health-table td:nth-child(2) { width: 112px; }
.ds-table.health-table th:nth-child(3), .ds-table.health-table td:nth-child(3) { width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-table.health-table th:nth-child(4), .ds-table.health-table td:nth-child(4) { width: 22%; }
.ds-table.health-table th:nth-child(5), .ds-table.health-table td:nth-child(5) { width: 56px; text-align: right; }
.ds-table.health-table th:nth-child(6), .ds-table.health-table td:nth-child(6) { width: auto; }
.health-bm, .health-resume { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.health-num { font-variant-numeric: tabular-nums; }
.health-lag { white-space: nowrap; }
.batch-cell { white-space: nowrap; font-variant-numeric: tabular-nums; }
.batch-warn { color: var(--queued); }
.batch-bad { color: var(--fail); }
.ds-table.health-table tr.health-row:has(+ tr.health-why) td { border-bottom: none; padding-bottom: 4px; }
.ds-table.health-table tr.health-why td { padding-top: 0; color: var(--ink-dim); font-size: 0.8rem; }
.ds-table.health-table tr.health-failed td:first-child { box-shadow: inset 3px 0 0 var(--fail); }
.ds-table.health-table tr.health-degraded td:first-child { box-shadow: inset 3px 0 0 var(--queued); }
/* Tenants (#709) */
.tn-create, .tn-connect { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 4px; }
.tn-create input { flex: 1 1 200px; min-width: 0; }
.tn-connect input, .tn-connect select { flex: 1 1 160px; min-width: 0; }
.tn-connect textarea { flex: 1 1 100%; min-width: 0; font-family: var(--mono, ui-monospace, monospace); font-size: 0.82rem; }
.tn-limits { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.tn-limits label { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; color: var(--ink-faint); }
.tn-limits input { width: 150px; }
.tn-row-actions { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; }
.tn-spacer { flex: 1 1 auto; }
.chg-actions #td-confirm { flex: 0 1 220px; }