/* PAI architecture, interactive: paper palette, one colour per lane (as the static diagram). */
.pai-dia { --ink: #1a1f24; --muted: #5b6670; --paper: #faf9f7; --amber: #d98a2b;
  --chat: #4f5d68; --chat-bg: #f2f5f7; --voice: #2c6e9b; --voice-bg: #edf3f8; --capture: #1f7a6d; --capture-bg: #edf6f4; --recap: #b5651d; --recap-bg: #fbf4ec;
  position: relative; margin: 1.5rem 0; font-family: "Source Sans 3", system-ui, sans-serif; color: var(--ink); }
.pai-dia button { font: inherit; color: inherit; margin: 0; min-height: 0; min-width: 0; line-height: 1.3; letter-spacing: normal; text-transform: none; box-shadow: none; -webkit-appearance: none; appearance: none; }
/* on the About PAI page: the theme's figure is sized for an image; the live diagram takes the full rail */
.pai-architecture-diagram--live { max-width: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; padding: 0 !important; }
.pai-architecture-diagram--live .bridge-visual__caption { margin-top: .6rem; }
.pd-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem; margin-bottom: 1rem; }
/* In the PAI panel the diagram is taller than the frame: the trace controls stay at the top while the lanes scroll
   under them (author 2026-10-01: "make the trace a question sticky to the pai panel"). */
body.pai-panel figure.bridge-visual:has(> .pai-dia), body.pai-embed figure.bridge-visual:has(> .pai-dia) { overflow: visible; }   /* sticky needs no clipping ancestor */
body.pai-panel .pai-dia .pd-bar, body.pai-embed .pai-dia .pd-bar { position: sticky; top: 0; z-index: 6; margin: 0 -.25rem 1rem; padding: .6rem .25rem; background: var(--paper, #faf9f7); box-shadow: 0 1px 0 rgba(26, 31, 36, .08); }
.pd-group { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.pd-k { font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: .3rem; }
body .pai-dia .pd-btn, body .pai-dia .pd-seg { border: 1px solid #cfd6db; background: #fff; border-radius: 999px; padding: .42rem .9rem; font-size: .86rem; cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
body .pai-dia .pd-btn:hover, body .pai-dia .pd-seg:hover { border-color: #8fa3ae; }
body .pai-dia .pd-btn.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
body .pai-dia .pd-seg { border-radius: 0; margin-left: -1px; }
body .pai-dia .pd-seg:first-of-type { border-radius: 999px 0 0 999px; } body .pai-dia .pd-seg:last-of-type { border-radius: 0 999px 999px 0; }
body .pai-dia .pd-seg.on { background: #e8f1f4; border-color: #2c5f6e; color: #1d4a57; font-weight: 600; position: relative; }
.pai-dia :focus-visible { outline: 2px solid #2c5f6e; outline-offset: 2px; }

.pd-stage { position: relative; display: grid; gap: .9rem; }
.pai-dia .pd-stage > svg.pd-wires { position: absolute !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; margin: 0 !important; max-width: none !important; z-index: 2; pointer-events: none; overflow: visible; display: block; }
.pd-w { fill: none; stroke: #9aa7b0; stroke-width: 1.4; opacity: .7; }
.pd-w.x { stroke-dasharray: 4 4; opacity: .5; }
.pd-wires marker path { fill: #9aa7b0; }
.pd-trail { fill: none; stroke: var(--amber); stroke-width: 2.4; stroke-linecap: round; filter: drop-shadow(0 0 4px rgba(217,138,43,.6)); }
.pd-dot { fill: #fff; stroke: var(--amber); stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(217,138,43,.9)); }
.tracing .pd-w { opacity: .35; }

.pd-lane { position: relative; border-radius: 12px; padding: .8rem 1rem 1rem; border: 1px solid; transition: opacity .35s, filter .35s; }
.pd-lane[data-lane="chat"] { background: var(--chat-bg); border-color: #d3dde3; --lc: var(--chat); }
.pd-lane[data-lane="voice"] { background: var(--voice-bg); border-color: #c9dbe8; --lc: var(--voice); }
.pd-lane[data-lane="capture"] { background: var(--capture-bg); border-color: #c5e0da; --lc: var(--capture); }
.pd-lane[data-lane="recap"] { background: var(--recap-bg); border-color: #ecd7c1; --lc: var(--recap); }
.focusing .pd-lane:not(.focus) { opacity: .35; filter: saturate(.4); }
.pai-dia .pd-lane-h { display: flex; align-items: baseline; gap: .45rem; border: 0; background: none; padding: 0; margin: 0 0 .7rem; cursor: pointer; font-size: .74rem !important; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--lc) !important; text-align: left; }
.pd-ln { font-variant-numeric: tabular-nums; }
.pd-lnote { font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--muted); font-size: .8rem; }
.pd-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem 1.4rem; align-items: start; }
.pd-grid > .pd-node { grid-column: var(--c) / span var(--w); grid-row: var(--r); }

.pd-node { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; text-align: left; cursor: pointer;
  background: #fff; border: 1.5px solid var(--lc); border-radius: 9px; padding: .6rem .7rem; min-height: 3.6rem;
  transition: box-shadow .35s, transform .35s cubic-bezier(.16,1,.3,1), border-color .35s, background .35s; }
.pd-node.dashed { border-style: dashed; }
.pd-node:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(26,31,36,.1); }
.pd-t { font: 600 .92rem/1.2 Fraunces, Georgia, serif; }
.pd-s { font-size: .74rem; line-height: 1.3; color: var(--muted); }
.pd-node.sel { box-shadow: 0 0 0 3px rgba(44,95,110,.18); }
.pd-node.lit { background: #fffaf2; }
.pd-node.now { border-color: var(--amber); box-shadow: 0 0 0 4px rgba(217,138,43,.2), 0 8px 24px rgba(217,138,43,.18); transform: translateY(-2px); }
.pd-node.cut.now { animation: pd-cut .5s ease 2; }
@keyframes pd-cut { 50% { transform: translateX(-3px); } }
.pd-model { border-width: 2px; }
.pd-model.openai { --lc: #0f766e; }
.pd-model .pd-t { transition: opacity .3s; }
.pd-tools { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .35rem; }
.pd-tools i { font: normal .6rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding: .18rem .3rem; border-radius: 3px; background: #eef1f3; color: #53616b; transition: background .3s, color .3s; }
.pd-tools i.on { background: var(--amber); color: #fff; }

.pd-foot { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
.pd-detail, .pd-log { background: #fff; border: 1px solid #dfe4e7; border-radius: 10px; padding: 1rem 1.1rem; margin: 0; min-height: 9.5rem; }
.pd-dl { margin: 0; font-size: .66rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pd-dt { margin: .25rem 0 0; font: 600 1.1rem/1.25 Fraunces, Georgia, serif; }
.pd-dd { margin: .45rem 0 0; font-size: .92rem; line-height: 1.5; }
.pd-dk { margin: .5rem 0 0; font: .72rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; color: #2c5f6e; }
.pd-log { list-style: none; max-height: 13rem; overflow: auto; font-size: .86rem; line-height: 1.45; }
.pd-log:empty::before { content: "Pick a question above to trace it through the system."; color: var(--muted); }
.pd-log li { padding: .22rem 0; animation: pd-in .4s cubic-bezier(.16,1,.3,1); }
.pd-log .pd-ask { font: italic .95rem Fraunces, Georgia, serif; color: var(--ink); padding-bottom: .4rem; }
.pd-ln2 { font-weight: 600; color: #8a5a17; }
.pd-log .pd-done { color: var(--muted); padding-top: .4rem; }
@keyframes pd-in { from { opacity: 0; transform: translateY(4px); } }

@media (max-width: 900px) { .pd-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem 1.6rem; } .pd-grid > .pd-node { grid-column: var(--mc) / span var(--mw); grid-row: var(--mr); } }
@media (max-width: 560px) { .pd-grid { grid-template-columns: 1fr 1fr; gap: .6rem; } .pd-grid > .pd-node { grid-column: auto; grid-row: auto; } .pd-foot { grid-template-columns: 1fr; } .pd-tools { display: none; } }
@media (prefers-reduced-motion: reduce) { .pd-node, .pd-lane, .pd-log li { transition: none; animation: none; } }