/* Architecture explorer (see explorer.js). Uses the site's tokens: --card --surface --text --text-muted --border --accent --font-mono */
.tx {
  container-type: inline-size;
  position: relative;
  margin: 0.25rem 0 1.5rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 0) 0 0 / 20px 20px,
    color-mix(in srgb, var(--card) 92%, var(--surface));
  padding: 0.9rem;
  font-size: 0.9rem;
  line-height: 1.45;
}
.tx__loading, .tx__err { padding: 2.5rem 1rem; text-align: center; color: var(--text-muted); font-family: var(--font-mono); font-size: 0.78rem; }

/* toolbar */
.tx__bar { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.55rem; }
.tx__crumbs { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); min-width: 0; }
.tx__crumb { background: none; border: 0; padding: 0.15rem 0.2rem; font: inherit; color: var(--text-muted); cursor: pointer; border-radius: 6px; }
.tx__crumb:last-child { color: var(--text); font-weight: 500; }
.tx__crumb:hover { color: var(--accent); }
.tx__actions { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
.tx__views { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.tx__view { border: 0; background: none; font: 600 0.72rem var(--font-sans); color: var(--text-muted); padding: 0.35rem 0.7rem; border-radius: 999px; cursor: pointer; white-space: nowrap; }
.tx__view[aria-pressed="true"] { background: var(--card); color: var(--text); box-shadow: var(--shadow-sm); }
.tx__view[data-view="proposal"][aria-pressed="true"] { color: #7C3AED; }
.tx__full { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text-muted); cursor: pointer; }
.tx__full svg { width: 16px; height: 16px; }
.tx__full:hover { color: var(--accent); border-color: var(--accent); }

.tx__filters { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.tx__hint { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.05em; color: var(--text-muted); text-transform: uppercase; margin-right: 0.15rem; }
.tx__chip { font: 500 0.72rem var(--font-sans); color: var(--text-muted); background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 0.28rem 0.6rem; cursor: pointer; }
.tx__chip b { font-weight: 600; color: var(--text); margin-left: 0.15rem; }
.tx__chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; }
.tx__chip[aria-pressed="true"] b { color: #fff; }

/* shared node bits */
.tx__kind { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--k); font-weight: 500; }
.tx__badges { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.tx__b { font-style: normal; font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.04em; padding: 0.05rem 0.35rem; border-radius: 5px; border: 1px solid currentColor; }
.tx__b--ai { color: #E04E72; } .tx__b--agent { color: #9333EA; } .tx__b--test { color: #15803D; } .tx__b--security { color: #B42318; } .tx__b--tool { color: #0E7490; }
.tx__status { display: inline-block; vertical-align: 2px; font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.08rem 0.4rem; border-radius: 5px; margin-left: 0.25rem; }
.tx__status--coming { color: #B45309; background: color-mix(in srgb, #F59E0B 16%, transparent); }
.tx__status--proposal { color: #7C3AED; background: color-mix(in srgb, #8B5CF6 15%, transparent); }

/* ---------- overview tree ---------- */
.tx__overview { --wide: 0; position: relative; display: grid; grid-template-columns: 1fr; gap: 0.7rem; padding-left: 0; }
.tx__links { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.tx__trunk { fill: none; stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 2; }
.tx__twig { fill: none; stroke: color-mix(in srgb, var(--text) 22%, transparent); stroke-width: 1.4; }
.tx__pulse { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: 2 26; stroke-linecap: round; animation: tx-flow 2.4s linear infinite; }
@keyframes tx-flow { to { stroke-dashoffset: -56; } }

.tx__root {
  position: relative; z-index: 1;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff;
  border-radius: 14px; padding: 0.75rem 0.9rem; box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 28%, transparent);
}
.tx__rootname { display: block; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; }
.tx__roottag { display: block; font-size: 0.74rem; opacity: 0.92; line-height: 1.35; margin-top: 0.15rem; }
.tx__rows { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; }
.tx__row { display: grid; min-width: 0; }
.tx__row:last-child:nth-child(odd) { grid-column: 1 / -1; }

.tx__branch {
  text-align: left; font: inherit; color: var(--text); cursor: pointer; min-width: 0; height: 100%;
  display: flex; flex-direction: column; gap: 0.15rem;
  background: var(--card); border: 1px solid var(--border); border-top: 4px solid var(--k);
  border-radius: 12px; padding: 0.5rem 0.6rem;
  transition: transform .2s, box-shadow .2s, border-color .2s, opacity .2s;
}
.tx__branch:hover, .tx__branch:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 22px color-mix(in srgb, var(--k) 18%, transparent); }
.tx__branch.is-linked { box-shadow: 0 0 0 2px color-mix(in srgb, var(--k) 45%, transparent); }
.tx__btitle { font-weight: 700; font-size: 0.86rem; letter-spacing: -0.01em; line-height: 1.25; }
.tx__bsum { display: none; font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; }
.tx__bprev { font-family: var(--font-mono); font-size: 0.6rem; color: var(--text-muted); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tx__bmeta { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; margin-top: auto; padding-top: 0.2rem; }
.tx__bmeta em { font-style: normal; font-weight: 700; font-size: 0.7rem; color: var(--k); }
.tx__go { margin-left: auto; font-family: var(--font-mono); font-size: 0.62rem; color: var(--accent); white-space: nowrap; }

.tx__leaves { display: none; flex-wrap: wrap; gap: 0.3rem; }
.tx__leaf {
  font: 500 0.66rem var(--font-mono); color: var(--text); cursor: pointer;
  background: color-mix(in srgb, var(--k) 9%, var(--card)); border: 1px solid color-mix(in srgb, var(--k) 35%, transparent);
  border-radius: 7px; padding: 0.18rem 0.45rem; transition: background .15s, opacity .2s, transform .15s;
}
.tx__leaf small { color: var(--k); font-size: 0.6rem; }
.tx__leaf:hover { background: color-mix(in srgb, var(--k) 20%, var(--card)); transform: translateY(-1px); }

.tx__overview.is-clamped { overflow: hidden; }
.tx__overview.is-clamped::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; z-index: 2;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--card) 96%, var(--surface)) 78%); pointer-events: none; }
.tx__more { position: absolute; z-index: 3; left: 50%; bottom: 12px; transform: translateX(-50%);
  font: 600 0.78rem var(--font-sans); color: #fff; background: var(--accent); border: 0; border-radius: 999px;
  padding: 0.5rem 1rem; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent); cursor: pointer; white-space: nowrap; }
.tx__more[hidden] { display: none; }

.is-coming.tx__branch, .is-coming.tx__leaf, .is-coming.tx__card { border-style: dashed; }
.is-proposal.tx__branch, .is-proposal.tx__leaf, .is-proposal.tx__card { border-style: dashed; --k: #7C3AED; background: color-mix(in srgb, #8B5CF6 6%, var(--card)); }
.is-proposal.tx__branch { border-top-style: solid; }

/* wide: real left-to-right tree */
@container (min-width: 560px) {
  .tx__overview { --wide: 1; grid-template-columns: 132px 1fr; column-gap: 2.2rem; align-items: start; }
  .tx__root { margin-top: 0.2rem; }
  .tx__rows { grid-template-columns: 1fr; gap: 0.4rem; }
  .tx__row { grid-template-columns: minmax(170px, 0.85fr) 1.15fr; column-gap: 1.4rem; align-items: center; }
  .tx__row:last-child:nth-child(odd) { grid-column: auto; }
  .tx__branch { border-top-width: 1px; border-left: 4px solid var(--k); padding: 0.45rem 0.65rem; height: auto; }
  .is-proposal.tx__branch { border-top-style: dashed; border-left-style: solid; }
  .tx__branch:hover, .tx__branch:focus-visible { transform: translateX(3px); }
  .tx__bsum { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .tx__bprev { display: none; }
  .tx__leaves { display: flex; }
  .tx__twig { stroke-dasharray: 3 4; }
}
@container (min-width: 900px) {
  .tx__overview { grid-template-columns: 170px 1fr; }
  .tx__bsum { -webkit-line-clamp: 2; }
}

/* ---------- diagram view ---------- */
.tx__modes { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); }
.tx__mode { border: 0; background: none; font: 600 0.72rem var(--font-sans); color: var(--text-muted); padding: 0.35rem 0.75rem; border-radius: 999px; cursor: pointer; }
.tx__mode[aria-pressed="true"] { background: var(--accent); color: #fff; }

.tx__diagram { position: relative; display: grid; gap: 2.6rem; padding: 0.2rem 0 0.4rem; overflow-x: clip; }
.tx__arrows { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 0; }
.tx__ap { fill: none; stroke: color-mix(in srgb, var(--accent) 60%, var(--text-muted)); stroke-width: 1.6; opacity: 0.75; }
.tx__arrow-g.is-back .tx__ap { stroke-dasharray: 5 5; opacity: 0.55; }
.tx__apulse { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 2 34; animation: tx-flow 2.2s linear infinite; }
.tx__ah { fill: color-mix(in srgb, var(--accent) 70%, var(--text-muted)); }
.tx__al { font: 500 10px var(--font-mono); fill: var(--text-muted); text-anchor: middle; dominant-baseline: middle;
  paint-order: stroke; stroke: color-mix(in srgb, var(--card) 94%, var(--surface)); stroke-width: 5px; stroke-linejoin: round; }
.tx__arrow-g.is-on .tx__ap { stroke: var(--accent); stroke-width: 2.4; opacity: 1; }
.tx__arrow-g.is-on .tx__al { fill: var(--accent); font-weight: 700; }

.tx__droot { position: relative; z-index: 1; justify-self: center; text-align: center; max-width: 30rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; border-radius: 14px; padding: 0.55rem 1rem;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 25%, transparent); margin-bottom: -1.2rem; }
.tx__droot b { display: block; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; }
.tx__droot span { display: block; font-size: 0.72rem; opacity: 0.92; }
.tx__drow { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.4rem; }
.tx__dbox {
  flex: 1 1 150px; max-width: 250px; min-width: 0; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  display: flex; flex-direction: column; gap: 0.2rem;
  background: var(--card); border: 1.5px solid color-mix(in srgb, var(--k) 45%, var(--border)); border-top: 5px solid var(--k);
  border-radius: 12px; padding: 0.5rem 0.6rem 0.55rem; box-shadow: var(--shadow-sm);
  transition: transform .2s, box-shadow .2s, opacity .2s;
}
.tx__dbox:hover, .tx__dbox:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px color-mix(in srgb, var(--k) 20%, transparent); }
.tx__dbox.is-linked { box-shadow: 0 0 0 2px color-mix(in srgb, var(--k) 50%, transparent); }
.tx__dbox.is-proposal { --k: #7C3AED; border-style: dashed; border-top-style: solid; background: color-mix(in srgb, #8B5CF6 6%, var(--card)); }
.tx__dbox.is-coming { border-style: dashed; border-top-style: solid; }
.tx__dtop { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; }
.tx__dtitle { font-weight: 700; font-size: 0.86rem; letter-spacing: -0.01em; line-height: 1.25; }
.tx__dmetric { font-style: normal; font-weight: 700; font-size: 0.72rem; color: var(--k); }
.tx__dparts { display: flex; flex-direction: column; gap: 2px; margin-top: 0.2rem; border-top: 1px dashed var(--border); padding-top: 0.3rem; }
.tx__dpart { font: 400 0.64rem/1.35 var(--font-mono); color: var(--text-muted); padding-left: 0.65rem; position: relative; border-radius: 4px; }
.tx__dpart::before { content: ''; position: absolute; left: 0.1rem; top: 0.45em; width: 5px; height: 5px; border-radius: 50%; background: var(--k); opacity: 0.7; }
.tx__dpart:hover { color: var(--text); background: color-mix(in srgb, var(--k) 8%, transparent); }
.tx__dmore { font: 500 0.6rem var(--font-mono); color: var(--accent); padding-left: 0.65rem; }
.tx__dside { position: relative; z-index: 1; border: 1.5px dashed var(--border); border-radius: 16px; padding: 1.1rem 0.6rem 0.7rem; background: color-mix(in srgb, var(--surface) 45%, transparent); }
.tx__dside-l { position: absolute; top: -0.6rem; left: 1rem; font: 500 0.62rem var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); background: color-mix(in srgb, var(--card) 92%, var(--surface)); padding: 0 0.4rem; }
.tx__diagram.is-clamped { overflow: hidden; }
.tx__diagram.is-clamped::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 110px; z-index: 2;
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--card) 96%, var(--surface)) 78%); pointer-events: none; }
@container (max-width: 520px) {
  .tx__diagram { gap: 2.2rem; }
  .tx__drow { gap: 0.5rem; }
  .tx__dbox { flex: 1 1 calc(50% - 0.5rem); max-width: none; }
  .tx__drow > .tx__dbox:only-child { flex-basis: 70%; max-width: 75%; }
  .tx__al { font-size: 9px; }
}
.tx--filtering .tx__dpart[data-id] { opacity: 0.35; box-shadow: none; }
.tx--filtering .tx__dpart[data-id].is-hit { opacity: 1; box-shadow: none; color: var(--text); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .tx__apulse { display: none; } .tx__dbox { transition: none; } }

/* ---------- focus (zoomed-in) view ---------- */
.tx__view-wrap { will-change: transform; }
.tx__back { font: 600 0.75rem var(--font-sans); color: var(--accent); background: none; border: 0; padding: 0.2rem 0; cursor: pointer; margin-bottom: 0.5rem; }
.tx__fhead { background: var(--card); border: 1px solid var(--border); border-top: 5px solid var(--k); border-radius: 14px; padding: 0.85rem 0.95rem; margin-bottom: 0.8rem; }
.tx__fhead.is-proposal { --k: #7C3AED; border-style: dashed; border-top-style: solid; }
.tx__ftitle { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em; margin: 0.15rem 0 0.3rem; }
.tx__fsum { color: var(--text); font-size: 0.88rem; }
.tx__fdet { color: var(--text-muted); font-size: 0.82rem; margin-top: 0.35rem; }
.tx__conn { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
.tx__cl { font: 500 0.7rem var(--font-sans); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 0.25rem 0.6rem; cursor: pointer; }
.tx__cl small { color: var(--text-muted); font-family: var(--font-mono); font-size: 0.62rem; margin-left: 0.2rem; }
.tx__cl:hover { border-color: var(--accent); color: var(--accent); }

.tx__cards { display: grid; grid-template-columns: 1fr; gap: 0.55rem; }
@container (min-width: 560px) { .tx__cards:not(.tx__cards--flow) { grid-template-columns: 1fr 1fr; } }
.tx__card {
  background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--k);
  border-radius: 12px; padding: 0.65rem 0.8rem; transition: opacity .2s, box-shadow .3s;
}
.tx__card.is-ping { box-shadow: 0 0 0 3px color-mix(in srgb, var(--k) 45%, transparent); }
.tx__ctop { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; }
.tx__ctitle { font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; margin: 0.15rem 0 0.2rem; }
.tx__csum { font-size: 0.82rem; color: var(--text); }
.tx__cdet { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.3rem; }
.tx__ctech { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.45rem; align-items: center; }
.tx__ctech span { font-family: var(--font-mono); font-size: 0.62rem; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 0.08rem 0.4rem; }
.tx__ctech em { font-style: normal; font-weight: 700; font-size: 0.78rem; color: var(--k); margin-right: 0.2rem; }
.tx__deeper { margin-top: 0.55rem; font: 600 0.74rem var(--font-sans); color: #fff; background: var(--k); border: 0; border-radius: 8px; padding: 0.35rem 0.65rem; cursor: pointer; }
.tx__arrow { height: 18px; position: relative; }
.tx__arrow::before { content: ''; position: absolute; left: 22px; top: 1px; bottom: 5px; border-left: 2px dashed var(--accent); }
.tx__arrow::after { content: ''; position: absolute; left: 17px; bottom: 0; border: 6px solid transparent; border-top-color: var(--accent); border-bottom: 0; }

/* highlight filter */
.tx--filtering [data-id] { opacity: 0.28; }
.tx--filtering [data-id].is-hit { opacity: 1; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 50%, transparent); }

.tx__foot { display: flex; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-top: 0.75rem; font-family: var(--font-mono); font-size: 0.64rem; color: var(--text-muted); }
.tx__note { max-width: 46ch; }

/* full screen */
html.tx-lock, html.tx-lock body { overflow: hidden; }
.tx.tx--full {
  position: fixed; inset: 0; z-index: 400; margin: 0; border-radius: 0; overflow-y: auto;
  padding: max(1rem, env(safe-area-inset-top)) clamp(1rem, 4vw, 3rem) 2rem;
  background:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text) 9%, transparent) 1px, transparent 0) 0 0 / 22px 22px,
    var(--bg);
}
.tx--full .tx__stage { max-width: 1280px; margin: 0 auto; }
.tx--full .tx__bar, .tx--full .tx__filters, .tx--full .tx__foot { max-width: 1280px; margin-left: auto; margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
  .tx__branch, .tx__leaf { transition: none; }
  .tx__pulse { display: none; }
}

/* toolbar wraps on narrow cards (the ATLAS view toggle is long) */
.tx__actions { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
@container (max-width: 520px) {
  .tx__bar { flex-direction: column; align-items: stretch; }
  .tx__actions { margin-left: 0; justify-content: space-between; }
  .tx__views { order: 3; flex: 1 1 100%; }
  .tx__view { flex: 1 1 0; white-space: normal; line-height: 1.2; }
}