/* TraceProof "Calm" theme – in the spirit of modern data tools (Sigma, Atlan, dbt Cloud, Snowsight):
   light sidebar, white surfaces on a barely-grey page, hairline borders, dark-grey (not black) text,
   headers by type and spacing (no filled bars), one accent used sparingly. Easy on the eyes all day.
   Light mode only; dark mode keeps its graphite palette. */
:root:not([data-theme="dark"]) {
  --accent: #3b5bdb; --accent-hover: #3451c7; --accent-2: #4c6ef5; --accent-soft: #eef2ff; --accent-text: #3451c7;
  --grad: none;
  --bg: #f7f8fa; --surface: #ffffff; --surface-2: #fafbfc; --surface-3: #f2f4f7;
  --border: #e6e8ec; --border-strong: #d5d9e0;
  --text: #1f2633; --text-2: #4a5465; --muted: #6b7484; --faint: #9aa2af;
  --pass: #1a7f4b; --pass-bg: #ecf7f1; --fail: #c4372f; --fail-bg: #fdf0ef; --warn: #b4600b; --warn-bg: #fdf5ea; --info: #3b5bdb; --info-bg: #eef2ff;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.04); --shadow: 0 1px 3px rgba(16,24,40,.06);
  --head-wash: none;
}

/* ---- undo the heavy borders: hairlines everywhere */
:root:not([data-theme="dark"]) .card, :root:not([data-theme="dark"]) .kpi, :root:not([data-theme="dark"]) .keys-box, :root:not([data-theme="dark"]) details.fold,
:root:not([data-theme="dark"]) .canvas-wrap, :root:not([data-theme="dark"]) .table-wrap, :root:not([data-theme="dark"]) .box, :root:not([data-theme="dark"]) .stepbar,
:root:not([data-theme="dark"]) .run-opt, :root:not([data-theme="dark"]) .modal, :root:not([data-theme="dark"]) .fwin, :root:not([data-theme="dark"]) .menu-pop,
:root:not([data-theme="dark"]) .cw-panel, :root:not([data-theme="dark"]) .jr-sec, :root:not([data-theme="dark"]) .resume, :root:not([data-theme="dark"]) .ct-row,
:root:not([data-theme="dark"]) .ct-result, :root:not([data-theme="dark"]) .xl-scope, :root:not([data-theme="dark"]) .xl-model, :root:not([data-theme="dark"]) .saved-row,
:root:not([data-theme="dark"]) .filters, :root:not([data-theme="dark"]) .pk-list, :root:not([data-theme="dark"]) .sb-cols, :root:not([data-theme="dark"]) .tc,
:root:not([data-theme="dark"]) .bd, :root:not([data-theme="dark"]) .tr-step, :root:not([data-theme="dark"]) .node, :root:not([data-theme="dark"]) .chip,
:root:not([data-theme="dark"]) .pill, :root:not([data-theme="dark"]) .seg, :root:not([data-theme="dark"]) .keys-row, :root:not([data-theme="dark"]) .btn,
:root:not([data-theme="dark"]) input, :root:not([data-theme="dark"]) select, :root:not([data-theme="dark"]) textarea { border-width: 1px; }
:root:not([data-theme="dark"]) .sidebar { border-right-width: 1px; }
:root:not([data-theme="dark"]) .topbar { border-bottom-width: 1px; }
:root:not([data-theme="dark"]) .card { border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }

/* ---- light sidebar, quiet active state */
:root:not([data-theme="dark"]) .sidebar { background: #fbfbfc; }
:root:not([data-theme="dark"]) .brand .logo { background: #1f2633; box-shadow: none; }
:root:not([data-theme="dark"]) .nav-group { color: var(--faint); font-weight: 600; }
:root:not([data-theme="dark"]) .nav-item svg { color: #7a8392; opacity: 1; }
:root:not([data-theme="dark"]) .nav-item .nav-txt { color: var(--text-2); font-weight: 500; }
:root:not([data-theme="dark"]) .nav-item:hover { background: #f1f3f6; }
:root:not([data-theme="dark"]) .nav-item.active { background: #eceffd; box-shadow: none; }
:root:not([data-theme="dark"]) .nav-item.active svg { color: var(--accent); }
:root:not([data-theme="dark"]) .nav-item.active .nav-txt { color: #2b3a8c; font-weight: 600; }
:root:not([data-theme="dark"]) .nav-tip { background: #1f2633; }

/* ---- page title: plain type, roomy */
:root:not([data-theme="dark"]) .page-head { margin-bottom: 20px; }
:root:not([data-theme="dark"]) .page-head h1 { font-size: 22px; font-weight: 650; color: var(--text); letter-spacing: -.015em; }
:root:not([data-theme="dark"]) .page-head p { color: var(--muted); }

/* ---- section headers: text, not filled bars */
:root:not([data-theme="dark"]) .card-head { background: transparent; border-bottom: 1px solid var(--border); padding: 14px 20px; border-radius: 0; }
:root:not([data-theme="dark"]) .card-head h3 { font-size: 15px; font-weight: 600; color: var(--text); }
:root:not([data-theme="dark"]) .card-head h3::before { display: none; }
:root:not([data-theme="dark"]) .card-head .sub { color: var(--muted); }
:root:not([data-theme="dark"]) .keys-head { background: transparent; margin: 0 0 10px; padding: 0; border: 0; border-radius: 0; }
:root:not([data-theme="dark"]) .keys-head:last-child, :root:not([data-theme="dark"]) .keys-head:has(+ .scope-detail:empty) { margin-bottom: 0; }
:root:not([data-theme="dark"]) .keys-head > svg, :root:not([data-theme="dark"]) .card-head > svg { color: var(--muted); }
:root:not([data-theme="dark"]) details.fold > summary { background: transparent; font-weight: 500; color: var(--text); border-radius: var(--r-sm); }
:root:not([data-theme="dark"]) details.fold > summary:hover { background: var(--surface-3); }
:root:not([data-theme="dark"]) details.fold[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: 12px; border-radius: var(--r-sm) var(--r-sm) 0 0; }
:root:not([data-theme="dark"]) details.fold > summary::before { color: var(--muted); }
:root:not([data-theme="dark"]) .modal-head { background: var(--surface); }

/* ---- steps: numbered, soft */
:root:not([data-theme="dark"]) .stepbar { padding: 10px; gap: 8px; box-shadow: var(--shadow-sm); }
:root:not([data-theme="dark"]) .steps { counter-reset: st; gap: 8px; flex-wrap: nowrap; }
:root:not([data-theme="dark"]) .steps li { counter-increment: st; min-width: 0; }
:root:not([data-theme="dark"]) .steps li + li::before { display: none; }
:root:not([data-theme="dark"]) .step { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; padding: 8px 10px; border-radius: var(--r-md);
  border: 1px solid transparent; background: transparent; }
:root:not([data-theme="dark"]) .step::before { content: "Step " counter(st); grid-column: 2; grid-row: 1; font-size: var(--fs-2xs); font-weight: 600; color: var(--faint); letter-spacing: .02em; }
:root:not([data-theme="dark"]) .step .n { grid-row: 1 / span 2; grid-column: 1; width: 28px; height: 28px; background: var(--surface-3); border: 1px solid var(--border); color: var(--muted); }
:root:not([data-theme="dark"]) .step .l { grid-column: 2; grid-row: 2; font-size: var(--fs-base); font-weight: 500; color: var(--text-2); }
:root:not([data-theme="dark"]) .step:hover:not(:disabled) { background: var(--surface-3); }
:root:not([data-theme="dark"]) .step.done .n { background: var(--pass-bg); color: var(--pass); border-color: #cfe9da; }
:root:not([data-theme="dark"]) .step.now { background: var(--accent-soft); border-color: #d9e0fb; box-shadow: none; }
:root:not([data-theme="dark"]) .step.now .n { background: var(--accent); color: #fff; border-color: transparent; }
:root:not([data-theme="dark"]) .step.now .l { color: #2b3a8c; font-weight: 600; }
:root:not([data-theme="dark"]) .step.now::before { color: var(--accent); }
:root:not([data-theme="dark"]) .step-hint { border-top: 1px solid var(--border); padding: 10px 4px 2px; background: transparent; border-left: 0; border-radius: 0; }
:root:not([data-theme="dark"]) .hint-k { color: var(--accent-text); }

/* ---- actions: flat accent, no gradients */
:root:not([data-theme="dark"]) .btn.primary, :root:not([data-theme="dark"]) .run-opt.primary-opt { background: var(--accent); border-color: var(--accent); box-shadow: none; }
:root:not([data-theme="dark"]) .btn.primary:hover { background: var(--accent-hover); }

/* ---- numbers in plain type; status shows only in the small dot and the thin bottom line */
:root:not([data-theme="dark"]) .kpi { box-shadow: none; }
:root:not([data-theme="dark"]) table thead th, :root:not([data-theme="dark"]) .table-wrap th { background: var(--surface-2); color: var(--muted); font-weight: 600; }

/* ---- the "pipeline at a glance" banner: a soft slate instead of deep navy */
:root:not([data-theme="dark"]) .glance { background: linear-gradient(160deg, #2a3446 0%, #323d52 100%); border: 0; box-shadow: var(--shadow); }

/* ---- coloured headings: deep indigo-blue, soft enough for all-day reading */
:root:not([data-theme="dark"]) { --heading: #2b3a8c; --heading-page: #1e2a5a; }
:root:not([data-theme="dark"]) .page-head h1 { color: var(--heading-page); }
:root:not([data-theme="dark"]) .card-head h3, :root:not([data-theme="dark"]) .keys-head b, :root:not([data-theme="dark"]) .modal-head h3,
:root:not([data-theme="dark"]) details.fold > summary, :root:not([data-theme="dark"]) .fwin-title { color: var(--heading); }
:root:not([data-theme="dark"]) .card-head > svg, :root:not([data-theme="dark"]) .keys-head > svg, :root:not([data-theme="dark"]) .modal-head > svg,
:root:not([data-theme="dark"]) details.fold > summary::before { color: var(--accent-2); }
:root:not([data-theme="dark"]) .card-head h3 { font-weight: 650; }

/* ================================================================ highlighted headings + coloured clickables
   Headings: a soft blue band with a blue bar on the left. Everything you can click is blue:
   solid = the main action, light blue = other actions, blue text = small / link-like actions, red = delete. */
:root:not([data-theme="dark"]) {
  --click-bg: #eef2ff; --click-bg-hover: #e0e7ff; --click-border: #c3cdf7; --click-text: #3046b8;
  --band: linear-gradient(90deg, #e9eefe 0%, #f4f6ff 45%, #ffffff 100%);
}
/* ---- headings */
:root:not([data-theme="dark"]) .card-head { background: var(--band); box-shadow: inset 4px 0 0 var(--accent); border-bottom-color: #dfe5fb; }
:root:not([data-theme="dark"]) .card { overflow: hidden; }
:root:not([data-theme="dark"]) .keys-head { margin: -12px -14px 12px; padding: 10px 14px; background: var(--band); box-shadow: inset 4px 0 0 var(--accent);
  border-bottom: 1px solid #dfe5fb; border-radius: calc(var(--r-md) - 1px) calc(var(--r-md) - 1px) 0 0; }
:root:not([data-theme="dark"]) .keys-head:last-child, :root:not([data-theme="dark"]) .keys-head:has(+ .scope-detail:empty) { margin-bottom: -12px; border-bottom: 0; border-radius: calc(var(--r-md) - 1px); }
:root:not([data-theme="dark"]) details.fold > summary { background: var(--band); box-shadow: inset 4px 0 0 var(--accent); font-weight: 600; }
:root:not([data-theme="dark"]) details.fold > summary:hover { background: linear-gradient(90deg, #dde5fd 0%, #eef2ff 60%, #ffffff 100%); }
:root:not([data-theme="dark"]) details.fold[open] > summary { border-bottom-color: #dfe5fb; }
:root:not([data-theme="dark"]) .hc-head { margin: -14px -16px 12px; padding: 10px 16px; background: var(--band); box-shadow: inset 4px 0 0 var(--accent);
  border-bottom: 1px solid #dfe5fb; border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0; }
:root:not([data-theme="dark"]) .modal-head { background: var(--band); box-shadow: inset 4px 0 0 var(--accent); }
:root:not([data-theme="dark"]) .page-head h1::after { content: ""; display: block; width: 40px; height: 3px; margin-top: 6px; border-radius: 2px; background: var(--accent); }

/* ---- buttons: every clickable is coloured */
:root:not([data-theme="dark"]) .btn { background: var(--click-bg); border-color: var(--click-border); color: var(--click-text); font-weight: 600; }
:root:not([data-theme="dark"]) .btn svg { color: var(--click-text); }
:root:not([data-theme="dark"]) .btn:hover { background: var(--click-bg-hover); border-color: var(--accent); color: #23379a; }
:root:not([data-theme="dark"]) .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
:root:not([data-theme="dark"]) .btn.primary svg { color: #fff; }
:root:not([data-theme="dark"]) .btn.primary:hover { background: var(--accent-hover); color: #fff; }
:root:not([data-theme="dark"]) .btn.ghost { background: transparent; border-color: transparent; color: var(--click-text); }
:root:not([data-theme="dark"]) .btn.ghost:hover { background: var(--click-bg); border-color: var(--click-border); }
:root:not([data-theme="dark"]) .btn.danger, :root:not([data-theme="dark"]) .btn.danger svg { color: var(--fail); }
:root:not([data-theme="dark"]) .btn.danger { background: var(--fail-bg); border-color: #f3c9c5; }
:root:not([data-theme="dark"]) .btn.danger-solid, :root:not([data-theme="dark"]) .btn.danger-solid svg { background: var(--fail); border-color: var(--fail); color: #fff; }
/* close (×) buttons stay quiet */
:root:not([data-theme="dark"]) .modal-head .btn.icon-btn, :root:not([data-theme="dark"]) .drawer-head > .btn.icon-btn, :root:not([data-theme="dark"]) .fwin-head .btn {
  background: transparent; border-color: transparent; color: var(--muted); }
:root:not([data-theme="dark"]) .modal-head .btn.icon-btn svg, :root:not([data-theme="dark"]) .drawer-head > .btn.icon-btn svg, :root:not([data-theme="dark"]) .fwin-head .btn svg { color: var(--muted); }
:root:not([data-theme="dark"]) .modal-head .btn.icon-btn:hover, :root:not([data-theme="dark"]) .drawer-head > .btn.icon-btn:hover { background: var(--surface-3); }
/* tabs, segments, jump links, lineage-box actions, links */
:root:not([data-theme="dark"]) .tab { color: var(--click-text); }
:root:not([data-theme="dark"]) .seg-item { color: var(--click-text); font-weight: 600; }
:root:not([data-theme="dark"]) .seg-item.active { background: var(--accent); color: #fff; box-shadow: none; }
:root:not([data-theme="dark"]) .jump { color: var(--click-text); background: var(--click-bg); border-color: var(--click-border); font-weight: 600; }
:root:not([data-theme="dark"]) .jump:hover { background: var(--click-bg-hover); }
:root:not([data-theme="dark"]) .jump.on { background: var(--accent); color: #fff; border-color: var(--accent); }
:root:not([data-theme="dark"]) .node .acts button { color: var(--click-text); background: var(--click-bg); border-color: var(--click-border); }
:root:not([data-theme="dark"]) .node .acts button:hover { background: var(--click-bg-hover); border-color: var(--accent); }
:root:not([data-theme="dark"]) .node .acts button.bad { color: var(--fail); background: var(--fail-bg); border-color: #f3c9c5; }
:root:not([data-theme="dark"]) a { color: var(--click-text); font-weight: 500; }
:root:not([data-theme="dark"]) a:hover { text-decoration: underline; }
:root:not([data-theme="dark"]) .run-opt:not(.primary-opt) { border-color: var(--click-border); background: var(--click-bg); }
:root:not([data-theme="dark"]) .run-opt:not(.primary-opt) b, :root:not([data-theme="dark"]) .run-opt:not(.primary-opt) svg { color: var(--click-text); }
:root:not([data-theme="dark"]) .run-opt:not(.primary-opt):hover { border-color: var(--accent); background: var(--click-bg-hover); }
:root:not([data-theme="dark"]) .hc-dim:hover { background: var(--click-bg); }
:root:not([data-theme="dark"]) input[type="checkbox"], :root:not([data-theme="dark"]) input[type="radio"] { accent-color: var(--accent); }
:root:not([data-theme="dark"]) .btn.ghost { background: #f6f8ff; border-color: #dbe2fb; }
:root:not([data-theme="dark"]) .btn.ghost:hover { background: var(--click-bg-hover); border-color: var(--accent); }

/* ================================================================ one readable type scale for every screen + strong headings */
:root {
  --fs-2xs: 11.5px; --fs-xs: 12.5px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 14.5px; --fs-lg: 17px; --fs-xl: 20px; --fs-2xl: 27px;
  --font-head: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}
body { font-size: var(--fs-base); line-height: 1.55; }
:root:not([data-theme="dark"]) { --heading: #101c46; --heading-page: #0b1433; }
.page-head h1, .card-head h3, .keys-head b, details.fold > summary, .modal-head h3, .drawer-head h2, .hc-head b, .hc-big, .glance-target, .fwin-title {
  font-family: var(--font-head); letter-spacing: -.012em; }
:root:not([data-theme="dark"]) .page-head h1 { font-size: var(--fs-2xl); font-weight: 700; color: var(--heading-page); }
:root:not([data-theme="dark"]) .card-head h3 { font-size: var(--fs-lg); font-weight: 700; color: var(--heading); }
:root:not([data-theme="dark"]) .keys-head b, :root:not([data-theme="dark"]) .hc-head b { font-size: 15.5px; font-weight: 700; color: var(--heading); }
:root:not([data-theme="dark"]) details.fold > summary { font-size: 15px; font-weight: 700; color: var(--heading); }
:root:not([data-theme="dark"]) .modal-head h3 { font-size: 18px; font-weight: 700; color: var(--heading); }
:root:not([data-theme="dark"]) .drawer-head h2 { font-size: 21px; font-weight: 700; color: var(--heading-page); }
:root:not([data-theme="dark"]) .hc-big { font-size: 18px; font-weight: 700; color: var(--heading); }
:root:not([data-theme="dark"]) .card-head .sub, :root:not([data-theme="dark"]) .keys-head .muted { font-size: var(--fs-sm); color: #56607a; }
:root:not([data-theme="dark"]) .tiny, :root:not([data-theme="dark"]) .muted { color: #5b6578; }
.ha-node text { font-size: 12px; }

/* ================================================================ pipeline at a glance: light background, dark table boxes */
:root:not([data-theme="dark"]) .glance { background: linear-gradient(135deg, #ffffff 0%, #eef3ff 55%, #e7f5fb 100%) !important; color: var(--text) !important;
  border: 1px solid #d9e1f5 !important; box-shadow: 0 10px 30px -18px rgba(40,60,120,.35) !important; }
:root:not([data-theme="dark"]) .glance::before { opacity: .5; background-image: radial-gradient(rgba(59,91,219,.16) 1px, transparent 1px); }
:root:not([data-theme="dark"]) .glance-kicker { color: var(--accent); }
:root:not([data-theme="dark"]) .glance-target { color: var(--heading-page); font-size: 23px; font-weight: 700; }
:root:not([data-theme="dark"]) .glance-hint, :root:not([data-theme="dark"]) .gl-records span, :root:not([data-theme="dark"]) .gl-stat span,
:root:not([data-theme="dark"]) .gl-bar-legend, :root:not([data-theme="dark"]) .glance-legend { color: #56607a; }
:root:not([data-theme="dark"]) .gl-stat, :root:not([data-theme="dark"]) .gl-records { background: #fff; border-color: #dfe5f5; }
:root:not([data-theme="dark"]) .gl-stat b, :root:not([data-theme="dark"]) .gl-records b { color: var(--heading-page); }
:root:not([data-theme="dark"]) .gl-records i { color: var(--accent); }
:root:not([data-theme="dark"]) .gl-bar { background: #e6ebf5; }
:root:not([data-theme="dark"]) .glance-map-wrap { background: rgba(255,255,255,.75); border-color: #dfe5f5; }
:root:not([data-theme="dark"]) .gl-lane { fill: #f2f5fc; } :root:not([data-theme="dark"]) .gl-lane.alt { fill: #e8eefb; }
:root:not([data-theme="dark"]) .gl-lane-t { fill: #4a5a86; font-size: 10.5px; }
/* the table boxes: dark navy, white names */
:root:not([data-theme="dark"]) .ha-node > rect { fill: #15234d; stroke: #15234d; }
:root:not([data-theme="dark"]) .ha-node > text { fill: #ffffff; }
:root:not([data-theme="dark"]) .ha-node > text.n { fill: #b9c8f0; }
:root:not([data-theme="dark"]) .gl-node:hover > rect, :root:not([data-theme="dark"]) .gl-node:focus > rect { fill: #22377a; stroke: #22377a; }
:root:not([data-theme="dark"]) .gl-node.fail > rect { stroke: #f04438; stroke-width: 2.4; } :root:not([data-theme="dark"]) .gl-node.warn > rect { stroke: #f59e0b; stroke-width: 2.4; }
:root:not([data-theme="dark"]) .ha-node.target > rect { fill: var(--accent); stroke: var(--accent); filter: drop-shadow(0 0 8px rgba(59,91,219,.5)); }
:root:not([data-theme="dark"]) .ha-node.target.fail > rect { stroke: #f04438; }
:root:not([data-theme="dark"]) .ha-node.target > text, :root:not([data-theme="dark"]) .ha-node.target > text.n { fill: #fff; }
:root:not([data-theme="dark"]) .gl-dot { fill: rgba(255,255,255,.55); }
:root:not([data-theme="dark"]) .ha-link { stroke: #a8b6dc; } :root:not([data-theme="dark"]) .ha-flow { stroke: var(--accent); }
:root:not([data-theme="dark"]) .gl-badge.grouped rect { fill: #c9d3ea; } :root:not([data-theme="dark"]) .gl-badge.grouped text { fill: #15234d; }
.glance .ha-node > text { font-size: 14px; font-weight: 600; }
.glance .ha-node > text.n { font-size: 13.5px; }
:root:not([data-theme="dark"]) .gl-lane-t { font-size: 12px; }
.gl-badge text { font-size: 11px; }
/* glance table boxes: light (soft blue fill, navy text) instead of dark navy */
:root:not([data-theme="dark"]) .ha-node > rect { fill: #eaf0fd; stroke: #b7c5ec; stroke-width: 1.2; }
:root:not([data-theme="dark"]) .ha-node > text { fill: #13224d; }
:root:not([data-theme="dark"]) .ha-node > text.n { fill: #4a5a86; }
:root:not([data-theme="dark"]) .gl-node:hover > rect, :root:not([data-theme="dark"]) .gl-node:focus > rect { fill: #dbe5fc; stroke: var(--accent); }
:root:not([data-theme="dark"]) .gl-node.fail > rect { fill: #fdeeed; stroke: #e5484d; stroke-width: 2; }
:root:not([data-theme="dark"]) .gl-node.warn > rect { fill: #fff6e6; stroke: #f59e0b; stroke-width: 2; }
:root:not([data-theme="dark"]) .gl-dot { fill: #8a97b8; }
:root:not([data-theme="dark"]) .gl-lane { fill: #f6f8fd; } :root:not([data-theme="dark"]) .gl-lane.alt { fill: #eff3fc; }
:root:not([data-theme="dark"]) .ha-node.target > rect { fill: var(--accent); stroke: var(--accent); }
:root:not([data-theme="dark"]) .ha-node.target.fail > rect { stroke: #e5484d; stroke-width: 2.5; }
:root:not([data-theme="dark"]) .ha-node.target.warn > rect { stroke: #f59e0b; stroke-width: 2.5; }
:root:not([data-theme="dark"]) .ha-node.target > text, :root:not([data-theme="dark"]) .ha-node.target > text.n { fill: #fff; }
:root:not([data-theme="dark"]) .ha-node.target .gl-dot { fill: #fff; }