/* PORT's cool, physical palette. Load after the component styles. */
:root {
  --wall: #e4eaf1;
  --plate: #f1f5fa;
  --ink: #121925;
  --muted: #5e6978;
  --line: #12192528;
  --accent: #4d6fe8;
  --accent-ink: #3d5bc6;
  --copper: var(--accent-ink);
  --port-dark: #121925;
  --port-dark-panel: #202735;
  --port-dark-muted: #a3afc1;
  --port-dark-line: #f1f5fa22;
  --port-live: #8aa4ff;
  --tool-market: #5869d9;
  --tool-coin: #1c8b9c;
  --tool-bundle: #d56e60;
  --tool-board: #8573bf;
}

::selection { background: #4d6fe833; }
.hero {
  background: radial-gradient(ellipse at 58% 46%, #f1f5fa66 0, transparent 62%), var(--wall);
}
.nav-links { background: #f1f5faad; }
.menu-button { background: #f1f5fac9; }
.nav-sheet { box-shadow: 0 15px 40px #12192518; }
.nav.dark .nav-links { border-color: #f1f5fa30; background: #121925b0; }
.nav.dark .menu-button { background: #121925dc; border-color: #f1f5fa30; }
.sound-toggle { border-color: #12192525; }
.sound-toggle:hover { background: #1219250a; border-color: #12192565; }
.nav.dark .sound-toggle { border-color: #f1f5fa30; }
.nav.dark .sound-toggle:hover { background: #f1f5fa0a; border-color: #f1f5fa80; }
.lamp {
  background: var(--accent);
  box-shadow: 0 0 0 4px #4d6fe814;
  animation-name: port-blue-lamp;
}
@keyframes port-blue-lamp { 50% { box-shadow: 0 0 0 5px #4d6fe808; } }
.hero-hint i, .intro-dot, .footer-dot { background: var(--accent); }
.pulse-line { background: linear-gradient(90deg, transparent, var(--accent), transparent); }
.state-tools li i { border-color: #5e697860; }
.plug-tag { background: #f1f5fade; box-shadow: 0 3px 7px #12192503; }
.plug-tag.active, .plug-tag:hover { background: var(--ink); box-shadow: 0 3px 16px #12192510; }
.console-shell { border-color: #1219253b; box-shadow: 0 20px 50px -35px #12192530; }
.result-symbol { color: #8c98a8; }
.token-image { background: #d8e0e9; }
#raw-result { background: #18212e; color: #dce5f1; }
.config-details pre { background: #e4eaf180; }
.closing { background: var(--port-dark); }
.closing:after {
  border-color: #f1f5fa14;
  box-shadow: 0 0 0 80px #f1f5fa03, 0 0 0 160px #f1f5fa02;
}
.closing .eyebrow, .closing-path { color: var(--port-dark-muted); }
.closing-path i { background: var(--port-live); }
dialog::backdrop { background: #12192570; }
/* This iris is created with an inline color by the scroll adapter. */
.socket-scroll-iris { background: var(--port-dark) !important; }

/* A pale receipt and blue signal within the graphite request path. */
.port-flow {
  --pf-dark: var(--port-dark);
  --pf-dark-2: var(--port-dark-panel);
  --pf-plate: var(--plate);
  --pf-mute: var(--port-dark-muted);
  --pf-line: #364253;
  --pf-live: var(--port-live);
  --pf-paper: #edf2f8;
  --pf-ink: var(--ink);
}
.port-flow-head p, .port-flow-details p { color: #bbc6d5; }
.port-flow-pick button { color: #dce5f1; }
.port-flow-pick button:hover { border-color: #69788b; }
.port-flow-pick button[aria-pressed=true] { color: var(--ink); }
.port-flow-livewire { filter: none; }
.port-flow-box { stroke: #455165; }
.port-flow-station[data-active=true] .port-flow-box { fill: #202b42; }
.port-flow-symbol { stroke: #c7d2df; }
.port-flow-bus { fill: #263141; stroke: #4a586c; }
.port-flow-branch { stroke: #455165; }
.port-flow-tool { fill: #59697d; }
.port-flow-station[data-active=true] .port-flow-tool { fill: var(--pf-live); }
.port-flow-ring { stroke: #66768c; }
.port-flow-station[data-active=true] .port-flow-ring { fill: #243049; }
.port-flow-pin-dot { fill: #95a3b6; }
.port-flow-station[data-active=true] .port-flow-pin-dot { fill: #c7d5ff; }
.port-flow-source-bars rect { fill: #455165; }
.port-flow-station[data-active=true] .port-flow-source-bars rect { fill: #6f8be7; }
.port-flow-method rect { stroke: #4a586c; }
.port-flow-method text { fill: #dce5f1; }
.port-flow-pulse { fill: #d4dfff; }
.port-flow-navigation button { border-top-color: #3a4658; }
.port-flow-navigation button[aria-selected=true] { border-color: var(--pf-live); }
.port-flow-navigation button:hover { border-color: #a3afc1; }
.port-flow-receipt-head { border-color: var(--ink); color: var(--muted); }
.port-flow-receipt dl > div { border-color: #12192533; }
.port-flow-receipt dt, .port-flow-receipt-note { color: var(--muted); }
.port-flow-stamp { border-color: var(--accent-ink); color: var(--accent-ink); }
.port-flow-progress { background: #303e50; }

/* Each tool keeps the same hue in its physical plug, legend and diagrams. */
[data-select-tool=dynamicFee], [data-architecture-device=dynamicFee],
[data-architecture-packet=dynamicFee], [data-plug=dynamicFee],
[data-tool-row=dynamicFee] { --tool-color: var(--tool-market); }
[data-select-tool=twap], [data-architecture-device=twap],
[data-architecture-packet=twap], [data-plug=twap],
[data-tool-row=twap] { --tool-color: var(--tool-coin); }
[data-select-tool=rangeOrders], [data-architecture-device=rangeOrders],
[data-architecture-packet=rangeOrders], [data-plug=rangeOrders],
[data-tool-row=rangeOrders] { --tool-color: var(--tool-bundle); }
[data-select-tool=custom], [data-architecture-device=custom],
[data-architecture-packet=custom], [data-plug=custom],
[data-tool-row=custom] { --tool-color: var(--tool-board); }
/* The original fragments and scene adapter set these custom properties inline. */
[data-select-tool] { --plug-color: var(--tool-color) !important; }
.plug-tag[data-plug] { --c: var(--tool-color) !important; }
[data-tool-row] { --active-color: var(--tool-color) !important; }
.port-cable-packets [data-architecture-packet] { stroke: var(--tool-color); }
[data-architecture-device=dynamicFee] > g[stroke] { stroke: var(--tool-color); }
[data-architecture-device=twap] > circle[stroke] { stroke: var(--tool-color); }
[data-architecture-device=twap] > circle[fill]:not([fill=none]) { fill: var(--tool-color); }
[data-architecture-device=rangeOrders] > g[fill],
[data-architecture-device=custom] > g[fill] { fill: var(--tool-color); }

.port-architecture { background: var(--wall); color: var(--ink); }
.port-architecture-count { border-top-color: var(--ink); border-bottom-color: var(--line); }
.port-architecture-count .mono, .port-architecture-copy .port-architecture-note { color: var(--muted); }
.port-architecture-tool { color: var(--ink); }
.port-architecture-tool[data-select-tool=dynamicFee] { --tool-label: #414fa6; }
.port-architecture-tool[data-select-tool=twap] { --tool-label: #166a77; }
.port-architecture-tool[data-select-tool=rangeOrders] { --tool-label: #a04f46; }
.port-architecture-tool[data-select-tool=custom] { --tool-label: #655292; }
.port-architecture-tool:hover, .port-architecture-tool.active { color: var(--tool-label); }
#port-arch-plate stop:first-child { stop-color: var(--plate); }
#port-arch-plate stop:last-child { stop-color: #dce4ee; }
#port-arch-plug stop:first-child { stop-color: #536174; }
#port-arch-plug stop:last-child { stop-color: #263141; }
#port-arch-shadow feDropShadow { flood-color: var(--ink); }
.port-cable-lines { stroke: #202735; }
[data-architecture-device] > rect[stroke] { stroke: var(--line); }
.port-architecture-hub rect { fill: var(--port-dark); }
.port-architecture-hub .port-svg-body { fill: var(--plate); }
.port-architecture-hub .port-svg-mono { fill: var(--port-dark-muted); }

.port-instruments { background: var(--port-dark); color: var(--plate); }
.port-instruments:before { background: radial-gradient(70% 40% at 35% 0%, #293a5270, transparent 80%); }
.port-instruments-head > p { color: #bbc6d5; }
.port-instrument { background: linear-gradient(145deg, #202b3b8c, #18212e99); border-color: var(--port-dark-line); color: var(--plate); }
.port-instrument:before { background: radial-gradient(230px at var(--pointer-x) var(--pointer-y), #f1f5fa05, transparent 80%); }
.port-instrument:hover, .port-instrument.active { background-color: #243044; }
.port-instrument-market { --tool-label: #a1aaff; }
.port-instrument-coin { --tool-label: #67bdc9; }
.port-instrument-bundle { --tool-label: #f2a295; }
.port-instrument-board { --tool-label: #bbace8; }
.port-instrument-title > span, .port-instrument-caption,
.port-instrument-signal > span, .port-instrument-footer > span,
.port-coin-rail > span, .port-coin-caption, .port-board-column > span,
.port-board-column > small, .port-instruments-rule { color: var(--port-dark-muted); }
.port-instrument > p, .port-instrument-footer { color: #bbc6d5; }
.port-instrument:hover .port-instrument-title > span,
.port-instrument:hover .port-instrument-footer > span,
.port-instrument.active .port-instrument-footer > span { color: var(--tool-label); }
.port-dial-track { stroke: var(--port-dark-line); }
.port-dial-ticks { stroke: #8797aa; }
.port-dial-needle > path, .port-dial-needle > circle:first-of-type { stroke: var(--plate); }
.port-dial-needle > circle:first-of-type { fill: var(--port-dark-panel); }
.port-market-dial > path[stroke="#2f55d4"], .port-request-path { stroke: var(--tool-market); }
.port-market-dial > circle[fill="#2f55d4"], .port-dial-needle > circle:last-of-type { fill: var(--tool-market); }
.port-market-dial .port-svg-mono { fill: var(--port-dark-muted); }
.port-instrument-signal, .port-instrument-footer { border-top-color: var(--port-dark-line); }
.port-coin-rail { border-color: #f1f5fa29; }
.port-coin-rail:after { background: repeating-linear-gradient(to bottom, transparent 0, transparent 15px, #a3afc12b 15px, #a3afc12b 17px); }
.port-coin-rail > i { border-color: var(--tool-coin); background: var(--tool-coin); }
.port-coin-rings { border-color: color-mix(in srgb, var(--tool-coin), transparent 69%); background: radial-gradient(color-mix(in srgb, var(--tool-coin), transparent 97.5%), transparent 70%); }
.port-coin-rings > i:not(:nth-child(3)):not(:nth-child(4)) { border-color: #f1f5fa14; }
.port-coin-rings > i:nth-child(3) { border-color: color-mix(in srgb, var(--tool-coin), transparent 70%); }
.port-coin-rings > i:nth-child(4), .port-coin-input > i { background: var(--tool-coin); }
.port-coin-rings > span { color: var(--tool-coin); }
.port-coin-input { border-color: #f1f5fa26; color: #bbc6d5; }
.port-bundle-scope svg > g[stroke] { stroke: #66768c; }
.port-bundle-blocks { fill: #263141; stroke: #8797aa; }
.port-instrument-bundle:hover .port-bundle-blocks rect { stroke: color-mix(in srgb, var(--tool-bundle), transparent 44%); fill: #332c32; }
.port-bundle-scope [fill="#d23f78"] { fill: var(--tool-bundle); }
.port-bundle-scan { stroke: var(--tool-bundle); }
.port-bundle-scope .port-svg-mono { fill: #bbc6d5; }
.port-board-slots { border-color: var(--port-dark-line); background: linear-gradient(140deg, #273345, #18212e); box-shadow: inset 0 1px #f1f5fa08; }
.port-board-slots > i { border-color: #f1f5fa18; background: var(--port-dark); }
.port-board-slots > i:before { background: color-mix(in srgb, var(--tool-board), var(--port-dark) 30%); }
.port-instrument-board:hover .port-board-slots { border-color: color-mix(in srgb, var(--tool-board), transparent 60%); }
.port-instrument-board:hover .port-board-slots > i:before,
.port-instrument-board.active .port-board-slots > i:before { background: var(--tool-board); }
.port-board-wire { border-color: #f1f5fa29; }
.port-board-wire > i { background: #f1f5fa29; }
.port-instruments-rule > i { background: var(--port-live); }

/* Documentation and client configuration share the same cool paper. */
.port-docs-head { background: var(--plate); border-color: var(--line); }
.port-docs-head > .mono { color: var(--muted); }
.port-docs-head .close-dialog { border-color: #12192525; }
.port-docs-head .close-dialog:hover { background: #e0e8f1; }
.port-docs-toc, .port-docs-section, .port-docs-endpoint,
.port-docs-client, .port-docs-tool, .port-docs-errors > div { border-color: var(--line); }
.port-docs-toc > .mono, .port-docs-toc a,
.port-docs-section .port-docs-label, .port-docs-endpoint > .mono,
.port-docs-dialog .port-docs-small, .port-docs-dialog .port-docs-source-link { color: var(--muted); }
.port-docs-toc a:hover, .port-docs-toc a[aria-current=true] { color: var(--ink); }
.port-docs-toc a[aria-current=true]::after { background: var(--accent); }
.port-docs-scroll { scrollbar-color: #a3afc1 transparent; }
.port-docs-dialog p, .port-docs-errors dd { color: var(--muted); }
.port-docs-dialog strong, .port-docs-errors dt { color: #29384b; }
.port-docs-dialog a:not(.button) { text-decoration-color: #5e697866; }
.port-docs-dialog p code { background: #e1e8f1; color: #34465c; }
.port-docs-dialog pre { background: #e1e8f1; color: #34465c; border-color: #12192515; }
.port-docs-endpoint > code { color: var(--ink); }
.port-docs-endpoint > .text-button, .port-docs-code .text-button,
.port-docs-tool h4 code, .port-docs-errors dd a { color: var(--accent-ink); }
.port-docs-dialog .port-docs-prompt { border-color: var(--accent-ink); background: #e1e8f1; }
.port-docs-dialog :focus-visible { outline-color: var(--accent-ink); }

@media (prefers-reduced-motion: reduce) { .lamp { animation: none; } }