/* The Derivation Ladder's styling. It has no page of its own any more — it is
 * the panel behind "Schema the model is grounded in" on index.html.
 *
 * Everything is scoped to `.lad-root` — the component's outer element — so it
 * can be dropped in without its variables, font, or box-sizing leaking onto the
 * host page. The palette is deliberately identical to horizon.css's, taken from
 * RelationalAI's own design tokens, so the panel reads as part of the page
 * rather than as something embedded in it. */

.lad-root {
  --bg: #ffffff; --panel: #ffffff; --panel-2: #f8f7fc; --border: #e0e0eb;
  --txt: #131333; --txt-dim: #5a5a87; --txt-faint: #8181ac; --accent: #4e50b3;
  font-family: "Generalsans Variable", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
  color: var(--txt); background: var(--bg);
  /* 100% (not 100vh) so it fills whatever it is dropped into — the viewport
     when it is the page, the dock panel when it is embedded. */
  display: grid; grid-template-columns: 300px 1fr; height: 100%;
}
.lad-root * { box-sizing: border-box; }
/* themed scrollbars — thin, translucent, on-theme */
.lad-root * { scrollbar-width: thin; scrollbar-color: #cacadd transparent; }
.lad-root ::-webkit-scrollbar { width: 8px; height: 8px; }
.lad-root ::-webkit-scrollbar-track { background: transparent; }
.lad-root ::-webkit-scrollbar-thumb { background: #cacadd; border-radius: 8px; }
.lad-root ::-webkit-scrollbar-thumb:hover { background: #8181ac; }

/* ---- sidebar ---- */
.lad-side { background: var(--panel-2); border-right: 1px solid var(--border); display: flex; flex-direction: column; min-height: 0; }
.lad-brand { padding: 18px 18px 10px; font-weight: 800; letter-spacing: .22em; font-size: 15px; }
.lad-brand span { display: block; font-weight: 500; letter-spacing: .12em; font-size: 10px; text-transform: uppercase; color: var(--txt-dim); margin-top: 4px; }
.lad-search { margin: 0 14px 10px; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--panel); color: var(--txt); font: inherit; font-size: 13px; outline: none; }
.lad-search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px #e3e4f3; }
.lad-results { overflow-y: auto; padding: 0 8px 12px; flex: 1; min-height: 0; }
.lad-group { position: sticky; top: 0; z-index: 1; background: var(--panel-2); padding: 9px 9px 6px; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--txt-faint); display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.lad-group[data-tier]:hover { color: var(--txt-dim); }
.lad-gcaret { font-size: 8px; width: 9px; }
.lad-gcount { margin-left: auto; font-weight: 500; letter-spacing: normal; opacity: .75; }
.lad-grouplist[hidden] { display: none; }
.lad-hit { display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 12.5px; }
.lad-hit:hover { background: #f5f5fa; }
.lad-hit.on { background: #e3e4f3; }

/* The two code wells stay dark deliberately, and are now the only dark surfaces
   on the page. The syntax colours in swan-format.js were chosen against a dark
   background; relighting them is a separate job with its own contrast checking,
   and a dark well for code on a light page is a normal, legible pattern rather
   than a leftover. They get a softer surround so they read as inset rather than
   as the old theme showing through. */
.lad-card-defn code, .lad-pop-defn code { border-color: #2a2c63; }

/* ---- legend ---- */
.lad-legend { border-top: 1px solid var(--border); background: var(--panel-2); padding: 4px 6px 8px; }
.lad-leg-head { display: flex; align-items: center; gap: 6px; padding: 8px 9px 6px; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--txt-faint); cursor: pointer; user-select: none; }
.lad-leg-head:hover { color: var(--txt-dim); }
.lad-leg-sub { margin-left: auto; font-weight: 500; letter-spacing: normal; text-transform: none; opacity: .8; }
.lad-legend.collapsed .lad-leg-body { display: none; }
.lad-leg-tier { display: flex; align-items: center; gap: 7px; padding: 7px 9px 3px; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--txt-dim); }
.lad-leg-gutter { width: 3px; height: 12px; border-radius: 2px; }
.lad-leg-row { display: flex; align-items: center; gap: 8px; padding: 3px 9px 3px 16px; font-size: 12px; color: var(--txt-dim); }

/* ---- main ---- */
.lad-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.lad-nav { position: absolute; top: 14px; right: 18px; z-index: 4; display: flex; align-items: center; gap: 5px; }
.lad-nav button { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border); background: var(--panel); color: var(--txt-dim); font-size: 11px; cursor: pointer; transition: background .15s, color .15s; }
.lad-nav button:hover:not(:disabled) { background: #f5f5fa; color: var(--txt); }
.lad-nav button:disabled { opacity: .35; cursor: default; }
/* the relationships toggle is a wider labelled pill (override the 26px button width) */
.lad-nav .lad-relbtn { width: auto; padding: 0 10px; font-size: 10.5px; letter-spacing: .02em; white-space: nowrap; }
.lad-nav .lad-relbtn.on { background: #f2f2f9; border-color: #a7a8d9; color: #323374; }
.lad-nav .lad-relbtn.on:hover { background: #e3e4f3; color: #232452; }
.lad-verdict { font-size: 11.5px; font-weight: 600; }
.lad-verdict.lad-safe { color: #64d6a0; }
.lad-verdict.lad-warn { color: #8c5a00; }
.lad-empty { padding: 14px 16px; color: var(--txt-faint); font-size: 12.5px; font-style: italic; }
/* table column-impact list */
.lad-colsec { padding: 4px 0 10px; }
.lad-sech { padding: 8px 12px 5px; font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--txt-faint); }
.lad-readby { margin-left: auto; padding-left: 12px; font-size: 10px; color: #64d6a0; }
.lad-col-unused { opacity: .5; }
.lad-col-unused .lad-col { cursor: default; }
.lad-col-unused .lad-col:hover { text-decoration: none; }
.lad-head { padding: 16px 20px; border-bottom: 1px solid var(--border); }
/* The card was a dark gradient with white title text, which on a light page
   read as a hole punched in it. Flat surface, brand navy title, and the tier
   colour kept on the left edge — that stripe is the only thing carrying which
   layer you are looking at. */
.lad-card { background: var(--panel-2); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 12px; padding: 13px 15px; box-shadow: 0 1px 2px rgba(19,19,51,.04); }
.lad-card-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.lad-card .lad-dot { width: 10px; height: 10px; }
.lad-card-title { font-size: 21px; font-weight: 800; color: var(--txt); letter-spacing: .01em; }
.lad-kindbadge { font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; padding: 2px 7px; border-radius: 6px; color: var(--txt-dim); background: #f5f5fa; }
.lad-card-defn { margin-top: 11px; }
.lad-card-defn code { display: block; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; line-height: 1.55; color: #cdd6e6; background: #090c13; border: 1px solid var(--border); border-radius: 8px; padding: 11px 13px; white-space: pre; overflow-x: auto; tab-size: 2; }
/* syntax colours for the pretty-printed rule definition */
.tok-assign { color: #ff9d5c; font-weight: 700; }
.tok-kw     { color: #ff9d5c; }
.tok-fn     { color: #5ec8e6; }
.tok-fn-known { text-decoration: underline dotted rgba(94,200,230,.5); text-underline-offset: 3px; cursor: help; }
.lad-fntip { position: fixed; z-index: 20; pointer-events: none; max-width: 320px; padding: 9px 12px; border-radius: 9px; background: rgba(10,14,22,.97); border: 1px solid var(--border); color: var(--txt); font-size: 12.5px; line-height: 1.5; opacity: 0; transition: opacity .1s; box-shadow: 0 12px 34px #f5f5fa; transform: translateX(-50%); }

/* hover preview popup */
/* sizes to the content (no inner scrollbar — you can't reach it, it's
   pointer-events:none); capped at the viewport so it never runs off-screen */
.lad-pop { position: fixed; z-index: 18; pointer-events: none; width: max-content; max-width: 92vw; padding: 10px 12px; border-radius: 11px; background: #ffffff; border: 1px solid var(--border); box-shadow: 0 16px 40px rgba(19,19,51,.14); opacity: 0; transition: opacity .1s; }
.lad-pop-top { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.lad-pop-top .lad-label { cursor: default; }
.lad-pop-desc { margin-top: 7px; font-size: 12px; color: var(--txt-dim); }
/* table column list: vertical lists that wrap into a few grid columns */
.lad-pop-cols { margin-top: 9px; display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: 1px 22px; max-height: 78vh; }
.lad-colline { display: flex; align-items: baseline; gap: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; line-height: 1.65; }
.lad-cn { color: #1c1d41; }
.lad-ct { color: var(--txt-faint); font-size: 10.5px; margin-left: auto; }
.lad-pk { color: #8c5a00; font-size: 8.5px; font-weight: 700; letter-spacing: .06em; }
.lad-fk { color: #7fb0e0; font-size: 8.5px; font-weight: 700; letter-spacing: .06em; }
.lad-pop-defn { margin-top: 8px; }
.lad-pop-defn code { display: block; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; line-height: 1.5; color: #cdd6e6; background: #090c13; border: 1px solid var(--border); border-radius: 7px; padding: 9px 11px; white-space: pre; tab-size: 2; }
.tok-ref    { color: #9fd0ff; }
.tok-num    { color: #ffcf7a; }
.tok-lit    { color: #c58cff; }
.tok-op     { color: #8a94a6; }
.tok-punct  { color: #6b7688; }
.lad-tally { padding: 10px 22px; font-size: 12.5px; color: var(--txt-dim); border-bottom: 1px solid var(--border); background: var(--panel-2); }
.lad-tk { color: var(--txt-faint); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; margin-right: 4px; }

.lad-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; flex: 1; min-height: 0; }
.lad-tree { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--border); }
.lad-tree:last-child { border-right: 0; }
.lad-tree h3 { margin: 0; padding: 12px 18px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--txt); background: var(--panel-2); border-bottom: 1px solid var(--border); display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.lad-verdict-slot { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lad-tree h3 em { font-style: normal; color: var(--txt-faint); text-transform: uppercase; letter-spacing: .12em; font-size: 9.5px; margin-left: 6px; }
.lad-body {
  overflow: auto; padding: 8px 6px 40px; flex: 1; min-height: 0;
  --lad-ind: 20px;    /* px per depth level — matches render's depth*20 */
  --lad-c0: 24px;     /* depth-0 caret-centre x from rowwrap origin = margin6 + border2 + padbase10 + carethalf6 */
  --lad-rowpad: 8px;  /* rowwrap origin → row padding-box = margin6 + border2 */
  --lad-line: 1px;
  --lad-guide: rgba(148,163,184,.30);
}

/* ---- rows ---- */
.lad-rowwrap { position: relative; }
.lad-row {
  position: relative; display: flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 10px; margin-left: 6px; border-radius: 7px; cursor: pointer;
  border-left: 2px solid var(--tier, transparent); font-size: 13px; white-space: nowrap;
}
.lad-row:hover { background: #f5f5fa; }
.lad-caret { width: 12px; color: var(--txt-faint); font-size: 10px; flex: none; }
.lad-caret-none { visibility: hidden; }
.lad-via { font-size: 10px; color: var(--txt-faint); text-transform: uppercase; letter-spacing: .08em; margin-right: 2px; }
.lad-via-rel { color: #b79be0; }   /* lateral association, distinct from derivation */
.lad-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 7px currentColor; }
.lad-label { font-weight: 500; cursor: pointer; }
.lad-label:hover { text-decoration: underline; text-decoration-color: var(--txt-faint); }
.lad-tier { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; padding: 1px 5px; border-radius: 5px; color: var(--txt-dim); background: #f5f5fa; }
.lad-tier-tables { color: #9ec7ea; } .lad-tier-concepts { color: #7fe0b8; } .lad-tier-rules { color: #d9bcff; }
.lad-leaf { font-size: 11px; color: #5a5a87; font-family: ui-monospace, Menlo, monospace; }
.lad-leaf.lad-base { opacity: .8; font-style: italic; }
/* base-column leaves: the physical schema a rule rests on */
.lad-colrow { cursor: default; }
.lad-col { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: #1c1d41; cursor: pointer; }
.lad-col:hover { text-decoration: underline; }
.lad-colctx { font-size: 10.5px; color: var(--txt-faint); }
.lad-tag { font-size: 9.5px; padding: 1px 6px; border-radius: 5px; letter-spacing: .04em; }
.lad-shared { color: #8c5a00; background: #fff1d4; }
.lad-cycle { color: var(--bad); background: #ffeeeb; }
.lad-sharedrow { cursor: pointer; }
.lad-sharedrow:hover { background: #fff8e8; }
@keyframes lad-flash { 0% { background: #ffe4a8; } 100% { background: transparent; } }
.lad-flash { animation: lad-flash 1.1s ease-out; }

/* ---- tree connector guides ----
 * Positioned from the inline --depth set at render (on the rowwrap for wrapped
 * rows; on the row itself for bare colLeaf/relLink). All pseudo-elements, so the
 * border-left:2px var(--tier) gutter is never touched. Two coordinate frames:
 *   row-pseudo    (left:0 = row padding-box) → caret centre = depth*20+16
 *   rowwrap-pseudo(left:0 = rowwrap origin)  → caret centre = depth*20+24
 * (they differ by --lad-rowpad = 8px). */

/* incoming elbow: ONE box, two borders. Covers wrapped rows AND bare leaf rows.
   left border = vertical (row-top → centre); bottom border = tick to this caret. */
.lad-children > .lad-rowwrap > .lad-row::before,
.lad-children > .lad-row::before {
  content: ""; position: absolute; pointer-events: none;
  left: calc((var(--depth) - 1) * var(--lad-ind) + var(--lad-c0) - var(--lad-rowpad));
  top: 0; height: 50%; width: var(--lad-ind);
  border-left: var(--lad-line) solid var(--lad-guide);
  border-bottom: var(--lad-line) solid var(--lad-guide);
}
/* trunk carrying the line PAST a wrapped child's whole subtree to the next
   sibling. On ::after so it paints above pin/hover row backgrounds. Dropped on
   :last-child → that child terminates as a clean └ (elbow only); others get ├. */
.lad-children > .lad-rowwrap:not(:last-child)::after {
  content: ""; position: absolute; pointer-events: none;
  left: calc((var(--depth) - 1) * var(--lad-ind) + var(--lad-c0));
  top: 0; bottom: 0; width: var(--lad-line); background: var(--lad-guide);
}
/* bare leaf rows have no wrapper — their inter-sibling trunk rides the row ::after. */
.lad-children > .lad-row:not(:last-child)::after {
  content: ""; position: absolute; pointer-events: none;
  left: calc((var(--depth) - 1) * var(--lad-ind) + var(--lad-c0) - var(--lad-rowpad));
  top: 50%; bottom: 0; width: var(--lad-line); background: var(--lad-guide);
}
/* bridge: an OPEN parent hangs a half-row stub from its own caret down to its
   children's trunk. Gated on .lad-open so a collapsed parent shows no stub; also
   gives the depth-0 root its single outgoing line. Uses the row's OWN depth.
   Disjoint from the bare-row ::after (that matches .lad-children>.lad-row). */
.lad-rowwrap > .lad-row.lad-open::after {
  content: ""; position: absolute; pointer-events: none;
  left: calc(var(--depth) * var(--lad-ind) + var(--lad-c0) - var(--lad-rowpad));
  top: 50%; bottom: 0; width: var(--lad-line); background: var(--lad-guide);
}
/* isolate: row-owned pseudos (elbow, bare trunk, bridge) dim/brighten with their
   row's opacity automatically. Only the rowwrap trunk needs help: fade all,
   re-brighten the segment beside an on-path row so the spine's trunk stays crisp. */
.lad-body.lad-isolated .lad-rowwrap::after { opacity: .28; }
.lad-body.lad-isolated .lad-rowwrap:has(> .lad-row.lad-onpath)::after { opacity: 1; }

/* ---- collapse-to-depth stepper (in each tree header) ---- */
.lad-depthctl { display: inline-flex; align-items: center; gap: 2px; margin-left: 10px; align-self: center; flex: none; }
.lad-dc-btn { width: 18px; height: 18px; padding: 0; border-radius: 5px; border: 1px solid var(--border);
  background: var(--panel); color: var(--txt-dim); font-size: 12px; line-height: 1; cursor: pointer; }
.lad-dc-btn:hover:not(:disabled) { background: #f5f5fa; color: var(--txt); }
.lad-dc-btn:disabled { opacity: .3; cursor: default; }
.lad-dc-lvl { min-width: 22px; text-align: center; font-size: 10px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--txt-dim); cursor: pointer; }
.lad-dc-lvl:hover { color: var(--txt); }

/* ---- per-row hover tools: pin (📌) + isolate (⊙) ---- */
.lad-pin, .lad-iso {
  visibility: hidden; flex: none; width: 18px; height: 18px; padding: 0;
  border: 0; background: none; color: var(--txt-faint); font-size: 12px; line-height: 1;
  cursor: pointer; border-radius: 5px;
}
.lad-pin { margin-left: auto; font-size: 10.5px; filter: grayscale(1) opacity(.7); }
.lad-iso { margin-left: auto; }              /* iso alone (no pin) → pushed to the right edge */
.lad-pin + .lad-iso { margin-left: 2px; }    /* iso after a pin → sit right next to it, not split across the row */
.lad-row:hover .lad-pin, .lad-row:hover .lad-iso { visibility: visible; }
.lad-pin:hover { filter: none; background: #fff1d4; }
.lad-pin.on { visibility: visible; filter: none; }

/* a pinned node stays marked wherever it appears, across re-roots */
.lad-row.lad-pinned { background: #fff8e8; }
.lad-row.lad-pinned:hover { background: #fff1d4; }

/* sidebar list of pinned nodes.
   Scoped under .lad-side: tree rows ALSO carry `.lad-pinned` as a highlight
   flag, so a bare `.lad-pinned { margin }` here would leak onto them and shove
   them right (breaking the connector alignment). Keep this selector scoped. */
.lad-side .lad-pinned { margin: 0 14px 10px; }
.lad-pinned-head { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--txt-faint); padding: 2px 2px 6px; }
.lad-pinned-hint { font-weight: 500; letter-spacing: normal; text-transform: none; opacity: .7; margin-left: 6px; }
.lad-pinned-list { display: flex; flex-direction: column; gap: 4px; }
.lad-pinchip { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 8px; font-size: 12px; background: #fff8e8; border: 1px solid #ffd98a; }
.lad-pinchip-label { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lad-pinchip-label:hover { text-decoration: underline; }
.lad-pinchip .lad-tier { margin-left: auto; }
.lad-pinchip-x { flex: none; border: 0; background: none; color: var(--txt-faint); cursor: pointer; font-size: 11px; padding: 0 2px; }
.lad-pinchip-x:hover { color: var(--bad); }

/* ---- isolate a single lineage path ---- */
.lad-iso:hover { color: var(--accent); background: #e3e4f3; }
.lad-row.lad-iso-leaf .lad-iso { visibility: visible; color: var(--accent); }
/* dim every row, re-brighten the ones on the isolated path */
.lad-body.lad-isolated .lad-row { opacity: .16; transition: opacity .15s; }
.lad-body.lad-isolated .lad-row.lad-onpath { opacity: 1; }
.lad-body.lad-isolated .lad-row.lad-iso-leaf { background: #eef0f9; }
.lad-iso-clear {
  position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px;
  margin: 0 6px 6px; padding: 6px 10px; border-radius: 8px; font-size: 11.5px; color: var(--txt-dim);
  background: #eef0f9; border: 1px solid #c1c1d7;
}
.lad-iso-mark { color: var(--accent); }
.lad-iso-clearbtn { margin-left: auto; background: none; border: 0; color: var(--accent); font: inherit; cursor: pointer; padding: 0; }
.lad-iso-clearbtn:hover { text-decoration: underline; }

@media (max-width: 820px) {
  .lad-root { grid-template-columns: 1fr; }
  .lad-side { display: none; }
  .lad-cols { grid-template-columns: 1fr; grid-auto-rows: 1fr; }
}

/* ---- embedded (a panel on another page, not the ladder page) ------------- */
/* Set by createLadder({embedded:true}). The ladder is dropped into Horizon's
   schema panel, where it has a fixed height and no page chrome of its own. */
/* Embedded, the ladder sizes to its content and lets the *page* scroll.
   Filling a fixed-height box put the provenance tree in an inner scroller: the
   one thing you opened the panel to read was the one thing you had to scroll a
   box to see, while the page around it stayed still. A trace is only useful
   whole. */
.lad-embedded { height: auto; align-items: start; border-radius: 10px; }
/* Narrower sidebar: the panel is a slice of a page, not a page. */
.lad-embedded { grid-template-columns: 240px 1fr; }
/* The picker still has to be bounded — 104 entries would otherwise set the
   panel's height on its own — so it keeps its scroller and sticks, which also
   means search stays reachable however far down the tree you have read. */
.lad-embedded .lad-side { position: sticky; top: 0; max-height: 82vh; }
/* …and the trees do not scroll at all. */
.lad-embedded .lad-main { min-height: 0; }
.lad-embedded .lad-body { overflow: visible; flex: none; }
.lad-embedded .lad-cols { flex: none; }
.lad-embedded .lad-search { margin-top: 12px; }
/* The nav sits absolutely at top-right of .lad-main; inside a panel that
   collides with the panel's own controls, so tuck it in. */
.lad-embedded .lad-nav { top: 10px; right: 12px; }

@media (max-width: 760px) {
  /* Below the sidebar's own width the two-column grid stops being a layout.
     Search is the way in, so it stays and the trees scroll under it. */
  .lad-embedded { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .lad-embedded .lad-side { border-right: none; border-bottom: 1px solid var(--border); max-height: 38%; }
}

/* Docked into a host's header (see createLadder({navHost})): static, and pushed
   to the far right of whatever bar it was given. */
.lad-nav-docked { position: relative; top: -2px; margin-left: auto; padding-right: 6px; }