/* binance.flashrouter.io tracker layer. Loaded after styles.css and glass.css. Variables only; no hex, no fonts of its own. */

.tr-status { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--muted-2); border: 1px solid var(--border-2); border-radius: 999px; padding: 0.25rem 0.7rem; background: var(--bg-2); white-space: nowrap; }
.tr-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--silver-lo); }
.tr-status[data-live="live"]::before { background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: tr-pulse 2.4s infinite; }
.tr-status[data-live="bundled"]::before { background: var(--warn); }
@keyframes tr-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* hero */
.tr-hero { padding: 4.4rem 0 2.6rem; }
.tr-hero h1 { max-width: 22ch; }
.tr-hero .lede { font-size: 1.12rem; color: var(--muted); max-width: 66ch; }
.tr-hero .eyebrow { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 0.9rem; display: flex; gap: 0.8rem; flex-wrap: wrap; align-items: center; }

/* headline counters */
.tr-counters { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--border); border-left: 1px solid var(--border); margin-top: 2rem; }
@media (max-width: 960px) { .tr-counters { grid-template-columns: repeat(2, 1fr); } }
.tr-counter { padding: 1rem 1.1rem; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); display: grid; gap: 0.15rem; min-width: 0; background: var(--surface); }
.tr-counter .k { color: var(--muted-2); font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; }
.tr-counter .v { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tr-counter .s { color: var(--muted); font-size: 0.8rem; line-height: 1.35; }

/* basis pills */
.basis { display: inline-block; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.12rem 0.45rem; border-radius: 3px; border: 1px solid var(--border-2); color: var(--muted); vertical-align: middle; white-space: nowrap; }
.basis[data-b="onchain"] { color: var(--ok); border-color: var(--ok); }
.basis[data-b="preliminary"] { color: var(--warn); border-color: var(--warn); }
.basis[data-b="article"], .basis[data-b="explorer"] { color: var(--ink2); }
.state { display: inline-block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.14rem 0.5rem; border-radius: 3px; border: 1px solid var(--border-2); color: var(--ink2); white-space: nowrap; }
.state[data-s="REAL"] { border-color: var(--ok); color: var(--ok); }
.state[data-s="TESTED"] { border-color: var(--ink2); }
.state[data-s="NOT DEPLOYED"] { border-color: var(--warn); color: var(--warn); }

/* alert tape */
.tr-tape { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; display: grid; grid-template-columns: auto 1fr; align-items: stretch; }
.tr-tape .lbl { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); padding: 0.7rem 0.9rem; border-right: 1px solid var(--border); background: var(--bg-2); display: flex; align-items: center; white-space: nowrap; }
.tr-tape .track { overflow: hidden; position: relative; }
.tr-tape .items { display: flex; gap: 2.5rem; padding: 0.7rem 1rem; white-space: nowrap; width: max-content; animation: tr-scroll 60s linear infinite; }
.tr-tape:hover .items { animation-play-state: paused; }
.tr-tape .items span { font-family: var(--mono); font-size: 0.8rem; color: var(--ink2); }
.tr-tape .items b { color: var(--text); font-weight: 600; }
.tr-tape .items i { font-style: normal; color: var(--accent); }
@keyframes tr-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tr-tape .items { animation: none; white-space: normal; width: auto; flex-wrap: wrap; gap: 0.6rem 1.6rem; } .tr-status[data-live="live"]::before { animation: none; } }

/* chips */
.chips { display: flex; gap: 0.45rem; flex-wrap: wrap; margin: 0 0 1.1rem; }
.chip { font: inherit; font-size: 0.82rem; padding: 0.32rem 0.75rem; border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface); color: var(--muted); cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink2); color: var(--bg); border-color: var(--ink2); }
.chip:hover { border-color: var(--text); color: var(--text); }
.chip[aria-pressed="true"]:hover { color: var(--bg); }

/* timeline */
.tr-hours { width: 100%; height: auto; display: block; margin: 0.4rem 0 1.6rem; }
.tr-hours text { font-family: var(--mono); font-size: 10.5px; fill: var(--muted); }
.tr-hours .axis { stroke: var(--border-2); stroke-width: 1; }
.tr-hours .win { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
.tr-hours .tick { stroke: var(--ink2); stroke-width: 2; }
.tr-hours .tick.rehearsal { stroke: var(--muted); }
.tr-hours .tick.delegation { stroke: var(--accent); stroke-width: 3; }
.tr-hours .tick.revoke { stroke: var(--ok); stroke-width: 3; }
.tr-hours .lbl { font-size: 10px; fill: var(--muted-2); }
.tl { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border-2); }
.tl li { position: relative; padding: 0 0 1.4rem 1.6rem; display: grid; gap: 0.25rem; }
.tl li::before { content: ""; position: absolute; left: -7px; top: 0.45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--muted); }
.tl li[data-actor="attacker"]::before { border-color: var(--accent); background: var(--accent); }
.tl li[data-actor="binance"]::before { border-color: var(--ink2); background: var(--ink2); }
.tl li[data-actor="issuers"]::before { border-color: var(--ok); background: var(--ok); }
.tl li[data-actor="tracking"]::before { border-color: var(--uny); }
.tl .when { font-family: var(--mono); font-size: 0.78rem; color: var(--muted-2); display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.tl .when b { color: var(--text); font-weight: 500; }
.tl h3 { margin: 0; font-size: 1.02rem; }
.tl p { margin: 0; color: var(--muted); font-size: 0.93rem; }
.tl .links { display: flex; gap: 0.9rem; flex-wrap: wrap; font-family: var(--mono); font-size: 0.76rem; }
.tl li[hidden] { display: none; }
.tr-day { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin: 0.2rem 0 0.9rem -0.1rem; padding-left: 1.6rem; }

/* mechanism */
.mech { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .mech { grid-template-columns: 1fr; } }
.mech .m { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; display: grid; gap: 0.35rem; align-content: start; }
.mech .m .n { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); display: flex; justify-content: space-between; }
.mech .m h3 { margin: 0; }
.mech .m p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.clue { border-left: 2px solid var(--accent); background: var(--bg-2); padding: 1rem 1.2rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1.4rem 0 0; }
.clue p:last-child { margin-bottom: 0; }

/* money map */
.tr-map-wrap { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.1rem; align-items: start; }
@media (max-width: 900px) { .tr-map-wrap { grid-template-columns: 1fr; } }
.tr-map { width: 100%; height: auto; display: block; }
.tr-map .edge { fill: none; stroke: var(--silver); stroke-width: 1.6; }
.tr-map .edge.flow { stroke: var(--accent); stroke-width: 2; stroke-dasharray: 6 10; animation: tr-dash 1.6s linear infinite; opacity: 0.85; }
@keyframes tr-dash { to { stroke-dashoffset: -32; } }
@media (prefers-reduced-motion: reduce) { .tr-map .edge.flow { animation: none; } }
.tr-map .node { cursor: pointer; }
.tr-map .node circle { fill: var(--surface); stroke: var(--ink2); stroke-width: 1.5; transition: stroke-width 0.15s ease; }
.tr-map .node[data-kind="victim"] circle { stroke: var(--ink2); fill: var(--bg-2); }
.tr-map .node[data-kind="hub"] circle { stroke: var(--accent); stroke-width: 2.5; }
.tr-map .node[data-kind="pool"] circle { fill: color-mix(in srgb, var(--accent) 12%, var(--surface)); stroke: var(--accent); }
.tr-map .node[data-kind="route"] circle { stroke: var(--muted); stroke-dasharray: 3 3; }
.tr-map .node[data-kind="feeder"] circle, .tr-map .node[data-kind="staging"] circle { stroke: var(--warn); }
.tr-map .node[data-kind="exit"] circle { stroke: var(--bad); fill: var(--bg-2); }
.tr-map .node:hover circle, .tr-map .node[aria-selected="true"] circle { stroke-width: 3.5; }
.tr-map text { font-family: var(--font); font-size: 11.5px; fill: var(--text); pointer-events: none; }
.tr-map text.eth { font-family: var(--mono); font-size: 10px; fill: var(--muted-2); }
.tr-node-panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; display: grid; gap: 0.5rem; align-content: start; min-height: 220px; }
.tr-node-panel .k { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
.tr-node-panel h3 { margin: 0; }
.tr-node-panel .addr { font-family: var(--mono); font-size: 0.8rem; word-break: break-all; overflow-wrap: anywhere; }
.tr-node-panel .big { font-family: var(--display); font-weight: 800; font-size: 1.8rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.tr-node-panel p { margin: 0; color: var(--muted); font-size: 0.9rem; }

/* watch table */
.tr-watch .table-wrap { max-height: 560px; overflow: auto; }
.tr-watch th { position: sticky; top: 0; z-index: 1; }
.tr-watch td.addr { font-family: var(--mono); font-size: 0.78rem; }
.tr-watch td.addr a { text-decoration: none; }
.tr-watch td.addr a:hover { text-decoration: underline; }
.tr-watch td.eth { font-family: var(--mono); font-size: 0.86rem; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tr-watch th.eth { text-align: right; }
.tr-watch tr.stale td { color: var(--muted); font-style: italic; }
.tr-watch .lab { font-size: 0.86rem; }
.tr-watch .grp { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); display: block; margin-top: 0.15rem; }
.tr-watch .delta { font-family: var(--mono); font-size: 0.76rem; }
.tr-watch .delta.up { color: var(--ok); } .tr-watch .delta.down { color: var(--bad); }
.tr-watch .delegated { color: var(--bad); font-family: var(--mono); font-size: 0.74rem; }
.tr-watch-meta { display: flex; gap: 1rem 1.6rem; flex-wrap: wrap; font-family: var(--mono); font-size: 0.76rem; color: var(--muted-2); margin: 0.8rem 0 0; min-width: 0; }
.tr-watch-meta span { min-width: 0; overflow-wrap: anywhere; word-break: break-all; }
.copy { font: inherit; font-family: var(--mono); font-size: 0.7rem; border: 1px solid var(--border-2); background: var(--bg-2); color: var(--muted); border-radius: 3px; padding: 0.05rem 0.4rem; cursor: pointer; margin-left: 0.4rem; }
.copy:hover { color: var(--text); border-color: var(--text); }

/* three columns */
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 900px) { .cols3 { grid-template-columns: 1fr; } }
.cols3 .c { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.cols3 .c h3 { margin: 0 0 0.6rem; }
.cols3 .c ul { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.92rem; display: grid; gap: 0.5rem; }
.cols3 .c.good h3 { color: var(--ok); } .cols3 .c.bad h3 { color: var(--bad); } .cols3 .c.warn h3 { color: var(--warn); }

/* fix table */
.fix { display: grid; gap: 0.9rem; }
.fix .row { display: grid; grid-template-columns: 1.1fr 1.4fr 2fr auto; gap: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; align-items: start; }
@media (max-width: 960px) { .fix .row { grid-template-columns: 1fr; } }
.fix .link { display: grid; gap: 0.2rem; }
.fix .link b { font-family: var(--display); font-weight: 800; font-size: 1rem; }
.fix .link span { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-2); }
.fix .what { color: var(--muted); font-size: 0.9rem; }
.fix ul { margin: 0; padding-left: 1.1rem; font-size: 0.9rem; display: grid; gap: 0.35rem; }
.fix .stops { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--border-2); border-radius: 3px; padding: 0.15rem 0.5rem; color: var(--ink2); white-space: nowrap; }
.fix .stops[data-s="outright"] { color: var(--ok); border-color: var(--ok); }
.fix .stops[data-s="warns"] { color: var(--warn); border-color: var(--warn); }

/* pipeline */
.pipe { display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.pipe .p { display: grid; grid-template-columns: 2.4rem 7rem minmax(0, 1fr) auto; gap: 1rem; align-items: start; padding: 1rem 1.1rem; border-bottom: 1px solid var(--border); background: var(--surface); }
.pipe .p > * { min-width: 0; overflow-wrap: anywhere; }
.pipe .p:last-child { border-bottom: 0; }
@media (max-width: 760px) { .pipe .p { grid-template-columns: 2.4rem minmax(0, 1fr); } .pipe .p .what { grid-column: 2; } .pipe .p .st { grid-column: 2; } }
.pipe .p .n { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--ink2); font-family: var(--mono); font-size: 0.8rem; }
.pipe .p .name { font-family: var(--display); font-weight: 800; }
.pipe .p .what { color: var(--muted); font-size: 0.9rem; }
.pipe .p .what small { display: block; color: var(--muted-2); font-family: var(--mono); font-size: 0.72rem; margin-top: 0.3rem; }
.api { font-family: var(--mono); font-size: 0.8rem; display: grid; gap: 0.3rem; margin: 1rem 0 0; }
.api code { background: var(--bg-2); border: 1px solid var(--border); border-radius: 3px; padding: 0.1em 0.4em; }

/* two-up lists */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 860px) { .two { grid-template-columns: 1fr; } }
.two .c { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.two .c h3 { margin: 0 0 0.6rem; }
.two .c ul, .two .c ol { margin: 0; padding-left: 1.1rem; color: var(--muted); font-size: 0.92rem; display: grid; gap: 0.5rem; }
.sources li { margin-bottom: 0.35rem; }
.note { color: var(--muted-2); font-size: 0.84rem; }

/* nothing on the page may force a horizontal scroll at phone width */
.wrap, .tr-counter, .tr-node-panel, .fix .row > *, .mech .m, .cols3 .c, .two .c { min-width: 0; }
.tl p, .tl h3, .tl .when, .tr-hero .lede, .note, .api span { overflow-wrap: anywhere; }