on every page. One layout, one set of heights/sizes, period. Don't ship a page with inline-styled labels and 22px-tall buttons; use the shared classes. */ .ark-controls { min-height: 48px; background: var(--glass); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); box-shadow: inset 0 1px 0 var(--hairline); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; align-items: center; flex-wrap: wrap; row-gap: 6px; column-gap: 10px; padding: 8px 16px; flex-shrink: 0; margin-top: 6px; /* small gap from the top nav so the two read as separate components */ } .ark-ctrl-group { display: inline-flex; align-items: center; gap: 8px; } .ark-ctrl-label { font-size: 10px; font-weight: 700; color: var(--text-lo); letter-spacing: .9px; text-transform: uppercase; white-space: nowrap; } .ark-ctrl-sep, .ark-divider { /* both names supported — they're the same thing */ width: 1px; height: 20px; background: var(--border); margin: 0 4px; flex-shrink: 0; } /* ── Segment buttons ─────────────────────────────────────────── */ .ark-seg { display: inline-flex; align-items: center; gap: 1px; } .ark-seg-btn { height: 28px; padding: 0 12px; background: transparent; border: 1px solid var(--border); color: var(--text-lo); font-size: 12px; font-weight: 500; font-family: var(--font); transition: all .15s; white-space: nowrap; border-radius: 0; cursor: pointer; } .ark-seg-btn:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); } .ark-seg-btn:last-child { border-radius: 0 var(--r-sm) var(--r-sm) 0; } .ark-seg-btn:only-child { border-radius: var(--r-sm); } .ark-seg-btn + .ark-seg-btn { margin-left: -1px; } .ark-seg-btn:hover { color: var(--text-md); background: var(--bg-hover); z-index: 1; } .ark-seg-btn.active { background: var(--accent-dim); border-color: var(--accent-border); color: var(--accent-2); box-shadow: 0 0 0 1px var(--accent-border), 0 0 14px -2px var(--accent-dim), inset 0 1px 0 var(--hairline); z-index: 2; } /* ── Icon buttons ────────────────────────────────────────────── */ .ark-btn-icon { width: 28px; height: 28px; background: transparent; border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text-lo); font-size: 14px; display: flex; align-items: center; justify-content: center; transition: all .15s; cursor: pointer; flex-shrink: 0; } .ark-btn-icon:hover { color: var(--text-md); background: var(--bg-hover); border-color: var(--border2); } /* ── Primary/secondary buttons ───────────────────────────────── */ .ark-btn { height: 28px; padding: 0 12px; border-radius: var(--r-md); font-size: 11px; font-weight: 600; font-family: var(--font); border: 1px solid var(--border2); background: var(--bg-card2); color: var(--text-md); transition: all .15s; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .ark-btn:hover { background: var(--bg-hover); border-color: var(--border3); color: var(--text-hi); } .ark-btn.primary { background: var(--grad-accent); border-color: transparent; color: #fff; box-shadow: var(--shadow-accent); } .ark-btn.primary:hover { background: var(--accent-hover); filter: brightness(1.06); } /* ── Stats strip — same on scanner & chart, single component shape ─ */ .ark-stats { display: flex; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--glass); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); box-shadow: inset 0 1px 0 var(--hairline); align-items: stretch; margin-top: 6px; /* small gap so the controls bar and stats read as two distinct components */ } .ark-stat { flex: 1; padding: 12px 18px; border-right: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ark-stat.lead { /* highlighted first cell */ flex: 0 0 auto; min-width: 220px; padding: 10px 18px; background: var(--bg-card2, var(--bg-card)); } /* Scanner stats strip: center each card's label + value (scoped to #stats-strip so analytics' left-aligned strips are untouched). */ #stats-strip .ark-stat { align-items: center; text-align: center; } #stats-strip .ark-stat-value { overflow: visible; } /* "Transactions" card — deposit/withdraw counts with direction arrows, market-perspective colours (deposit onto exchange = red, withdraw = green). */ .ark-stat-flowcount { display: flex; gap: 16px; justify-content: center; align-items: center; } .ark-stat-flowcount .fc-dep, .ark-stat-flowcount .fc-wd { display: inline-flex; align-items: center; gap: 3px; } .ark-stat-flowcount .fc-dep { color: var(--red); } .ark-stat-flowcount .fc-wd { color: var(--green); } .ark-stat-flowcount .fc-arrow { font-size: 13px; line-height: 1; } /* Criticals shown inline next to the Events total — e.g. "760 (276 critical)" */ .ark-stat-crit { margin-left: 7px; font-size: 12px; font-weight: 600; color: var(--red); opacity: .85; } /* "+N" delta on the Tx-in-cache value (txs added in the latest poll) */ .ark-stat-delta { margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--green); } /* Per-card delta line under each metric — how much it changed on the last update. Reserves height (min-height) so cards don't jump when it appears. */ .ark-stat-delta-line { font-size: 10px; font-family: var(--mono); font-weight: 600; line-height: 1.2; min-height: 12px; color: var(--text-lo); /* gray — secondary info; the +/− sign carries direction */ } /* One-shot tick re-triggered by Fmt.count() when a metric value changes, so live updates flash on top of the digit roll. Opacity-only (no transform) so it works on the inline metrics too, not just block-level values. */ @keyframes value-pop { 0% { opacity: .4; } 45% { opacity: 1; } 100% { opacity: 1; } } .value-pop { animation: value-pop .4s ease-out; } @media (prefers-reduced-motion: reduce) { .value-pop { animation: none; } } /* Rank chip used inside ark-stat-sub — e.g. "#2 of 5" next to Volume */ .rank-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 8px; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: .3px; background: rgba(155, 114, 255, 0.12); border: 1px solid rgba(155, 114, 255, 0.30); color: #b69bff; vertical-align: middle; } .rank-badge.top { background: rgba(0, 209, 122, 0.14); border-color: rgba(0, 209, 122, 0.35); color: var(--green); } .rank-badge.first { /* #1 — flame chip, warmer colour */ background: linear-gradient(135deg, rgba(255, 140, 0, 0.18), rgba(255, 77, 77, 0.18)); border-color: rgba(255, 140, 0, 0.50); color: #ff9933; animation: rank-pulse 2.2s ease-in-out infinite; } @keyframes rank-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 140, 0, 0); } 50% { box-shadow: 0 0 10px 0 rgba(255, 140, 0, 0.35); } } .rank-badge .flame { font-size: 12px; line-height: 1; color: #ff9933; } /* ── Material Symbols Outlined helpers ───────────────────────── Loaded from Google Fonts on index.html and chart.html. Use as: warning Default size matches the stat-label text. */ .mat-ic, .material-symbols-outlined { font-family: 'Material Symbols Outlined'; font-weight: 400; font-style: normal; font-size: 14px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; vertical-align: -2px; } .ark-stat-label .mat-ic { font-size: 12px; margin-right: 4px; vertical-align: -2px; opacity: 0.75; } .mat-ic.sm { font-size: 11px; } .mat-ic.md { font-size: 14px; } .mat-ic.lg { font-size: 18px; } .mat-ic.red { color: var(--red); } .mat-ic.orange { color: var(--orange); } .mat-ic.green { color: var(--green); } .mat-ic.blue { color: var(--accent); } .mat-ic.purple { color: #9b72ff; } .ark-stat:last-child { border-right: none; } .ark-stat-label { font-size: 9px; font-weight: 600; color: var(--text-lo); letter-spacing: .8px; text-transform: uppercase; white-space: nowrap; } .ark-stat-value { font-size: 16px; font-weight: 700; color: var(--text-hi); font-family: var(--mono); letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ark-stat-sub { font-size: 10px; font-family: var(--mono); white-space: nowrap; } /* ── Card ────────────────────────────────────────────────────── */ .ark-card { background: var(--bg-card); background-image: var(--grad-card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-1), inset 0 1px 0 var(--hairline); } .ark-card-header { padding: 8px 14px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ark-card-title { font-size: 10px; font-weight: 700; color: var(--text-lo); letter-spacing: .8px; text-transform: uppercase; } /* ── Tabs ────────────────────────────────────────────────────── */ .ark-tabs { display: flex; border-bottom: 1px solid var(--border); } .ark-tab { padding: 0 14px; height: 34px; font-size: 11px; font-weight: 600; color: var(--text-lo); border-bottom: 2px solid transparent; background: transparent; border-top: none; border-left: none; border-right: none; cursor: pointer; transition: all .15s; letter-spacing: .2px; display: flex; align-items: center; gap: 5px; white-space: nowrap; } .ark-tab:hover { color: var(--text-md); } .ark-tab.active { color: var(--text-hi); border-color: var(--accent); } .ark-tab-count { background: var(--bg-hover); color: var(--text-lo); border-radius: 3px; padding: 1px 5px; font-size: 9px; font-weight: 700; font-family: var(--mono); } .ark-tab.active .ark-tab-count { background: var(--accent-dim); color: var(--accent-2); } /* ── Badge / pill ────────────────────────────────────────────── */ .ark-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 3px; font-size: 9px; font-weight: 700; font-family: var(--mono); letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; } .ark-badge.red { background: var(--red-dim); color: var(--red); border: 1px solid rgba(255,59,92,.25); } .ark-badge.orange { background: var(--orange-dim); color: var(--orange); border: 1px solid rgba(255,140,0,.25); } .ark-badge.green { background: var(--green-dim); color: var(--green); border: 1px solid rgba(0,209,122,.25); } .ark-badge.blue { background: var(--accent-dim); color: var(--accent-2); border: 1px solid rgba(26,127,255,.3); } .ark-badge.purple { background: var(--purple-dim); color: var(--purple); border: 1px solid rgba(155,114,255,.25); } .ark-badge.gray { background: var(--bg-hover); color: var(--text-lo); border: 1px solid var(--border); } /* ── Input ───────────────────────────────────────────────────── */ .ark-input { height: 30px; padding: 0 10px; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text-md); font-size: 12px; font-family: var(--font); outline: none; transition: border-color .15s; width: 100%; } .ark-input:focus { border-color: var(--border3); } .ark-input::placeholder { color: var(--text-lo); } .ark-input.mono { font-family: var(--mono); font-size: 11px; } /* ── Table ───────────────────────────────────────────────────── */ .ark-table { width: 100%; border-collapse: collapse; } .ark-table th { padding: 6px 14px; font-size: 9px; font-weight: 700; color: var(--text-lo); letter-spacing: .7px; text-transform: uppercase; border-bottom: 1px solid var(--border); text-align: left; background: var(--bg-card); white-space: nowrap; } .ark-table td { padding: 7px 14px; font-size: 12px; color: var(--text-md); border-bottom: 1px solid var(--border); white-space: nowrap; } .ark-table tr:hover td { background: var(--bg-hover); } .ark-table tr:last-child td { border-bottom: none; } .ark-table .num { font-family: var(--mono); text-align: right; } .ark-table .hi { color: var(--text-hi); font-weight: 500; } .ark-table .red { color: var(--red); } .ark-table .green { color: var(--green); } /* ── Anomaly card ────────────────────────────────────────────── */ .ark-anomaly { padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; display: flex; flex-direction: column; gap: 3px; position: relative; } .ark-anomaly::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 0; } .ark-anomaly:hover { background: var(--bg-hover); } .ark-anomaly-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; } .ark-anomaly-type { font-size: 10px; font-weight: 700; letter-spacing: .3px; display: flex; align-items: center; gap: 4px; } .ark-anomaly-amount { font-size: 13px; font-weight: 600; color: var(--text-hi); font-family: var(--mono); } .ark-anomaly-note { font-size: 11px; color: var(--text-md); line-height: 1.4; } .ark-anomaly-meta { font-size: 10px; color: var(--text-lo); font-family: var(--mono); display: flex; gap: 8px; align-items: center; } /* ── Tooltip popup ───────────────────────────────────────────── */ .ark-tooltip { position: absolute; background: var(--bg-card2); border: 1px solid var(--border2); border-radius: var(--r-lg); padding: 10px 12px; min-width: 200px; max-width: 240px; pointer-events: none; display: none; z-index: 200; box-shadow: 0 4px 20px rgba(0,0,0,.5); } .ark-tooltip-type { font-size: 10px; font-weight: 700; margin-bottom: 4px; font-family: var(--mono); } .ark-tooltip-amt { font-size: 14px; font-weight: 700; color: var(--text-hi); font-family: var(--mono); margin-bottom: 2px; } .ark-tooltip-note { font-size: 11px; color: var(--text-md); line-height: 1.4; } .ark-tooltip-meta { font-size: 10px; color: var(--text-lo); font-family: var(--mono); margin-top: 4px; } /* ── Loading / spinner ───────────────────────────────────────── */ .ark-loader { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .ark-spinner { width: 20px; height: 20px; border: 2px solid var(--border2); border-top-color: var(--accent); border-radius: 50%; animation: spin .6s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } } .ark-fadein { animation: fadeIn .25s ease; } /* ── Mono values ─────────────────────────────────────────────── */ .mono { font-family: var(--mono); } .hi { color: var(--text-hi) !important; } .md { color: var(--text-md) !important; } .lo { color: var(--text-lo) !important; } .green { color: var(--green) !important; } .red { color: var(--red) !important; } .orange{ color: var(--orange)!important; } .blue { color: var(--accent-2) !important; } .purple{ color: var(--purple)!important; } /* ── Chart container ─────────────────────────────────────────── */ .ark-chart-header { padding: 8px 14px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .ark-pair-name { font-size: 13px; font-weight: 700; color: var(--text-hi); font-family: var(--mono); } .ark-price-big { font-size: 20px; font-weight: 700; color: var(--text-hi); font-family: var(--mono); letter-spacing: -.5px; } .ark-price-chg { font-size: 11px; font-family: var(--mono); } .ark-price-chg.up { color: var(--green); } .ark-price-chg.dn { color: var(--red); } .ark-ohlcv { display: flex; gap: 10px; } .ark-ohlcv span { font-size: 10px; font-family: var(--mono); color: var(--text-lo); } .ark-ohlcv b { color: var(--text-md); } /* ── Legend strip ────────────────────────────────────────────── */ .ark-legend { position: absolute; top: 8px; right: 8px; /* anchor to the right edge of the chart canvas so it doesn't overlap the ticker label on the left */ z-index: 50; display: flex; align-items: center; gap: 8px; pointer-events: none; } .ark-legend-item { display: flex; align-items: center; gap: 3px; font-size: 9px; font-family: var(--mono); color: var(--text-lo); } /* ── Sidebar ─────────────────────────────────────────────────── */ .ark-sidebar { width: 300px; flex-shrink: 0; border-left: 1px solid var(--border); display: flex; flex-direction: column; background: var(--bg-card); overflow: hidden; padding-top: 16px; /* match .content's padding so the anomalies card header aligns vertically with the transactions table card */ } /* ── Suggestion chips ────────────────────────────────────────── */ .ark-chips { display: flex; flex-wrap: wrap; gap: 5px; } .ark-chip { padding: 4px 10px; background: var(--bg-hover); border: 1px solid var(--border2); border-radius: 3px; color: var(--text-lo); font-size: 10px; font-family: var(--mono); cursor: pointer; transition: all .15s; } .ark-chip:hover { border-color: var(--accent-border); color: var(--accent-2); background: var(--accent-dim); } /* ── Status pills ────────────────────────────────────────────── */ .ark-status { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 3px; font-size: 10px; font-weight: 600; font-family: var(--mono); letter-spacing: .3px; } .ark-status.live { background: var(--green-dim); color: var(--green); border: 1px solid rgba(0,209,122,.2); } .ark-status.demo { background: var(--orange-dim); color: var(--orange); border: 1px solid rgba(255,140,0,.2); } .ark-status.error { background: var(--red-dim); color: var(--red); border: 1px solid rgba(255,59,92,.2); } /* ── Progress ring (countdown) ───────────────────────────────── */ .ark-ring-wrap { display: flex; align-items: center; gap: 5px; } .ark-ring-label { font-size: 9px; color: var(--text-lo); font-family: var(--mono); } /* ── Divider ─────────────────────────────────────────────────── */ .ark-divider { width: 1px; height: 18px; background: var(--border); flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════ Detail modal (.wm-*) — shared across chart.html (wall match) and index.html (tx detail). Single source of truth so layout/colors stay aligned. Was inline in chart.html; lifted here when scanner started using the same pattern. ═══════════════════════════════════════════════════════════════ */ .wm-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(4, 10, 22, .72); backdrop-filter: blur(4px); animation: wm-fade .14s ease-out; } .wm-modal[hidden] { display: none; } @keyframes wm-fade { from { opacity: 0 } to { opacity: 1 } } .wm-card { background: var(--bg-card, #0c1729); border: 1px solid var(--border, #1c2c42); border-radius: 10px; box-shadow: var(--shadow-2); width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 64px); overflow: auto; box-shadow: 0 18px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.02); animation: wm-pop .18s cubic-bezier(.2,.9,.3,1.2); } @keyframes wm-pop { from { transform: scale(.95); opacity: 0 } to { transform: scale(1); opacity: 1 } } .wm-head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-card, #0c1729); z-index: 1; } .wm-head-title { flex: 1; min-width: 0; } .wm-head-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-lo); display: flex; align-items: center; gap: 6px; } .wm-head-main { font-size: 15px; font-weight: 700; color: var(--text-hi); font-family: var(--mono); margin-top: 2px; word-break: break-all; } .wm-close { background: transparent; border: 1px solid var(--border); width: 28px; height: 28px; border-radius: 6px; color: var(--text-lo); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all .12s; } .wm-close:hover { color: var(--text-hi); background: rgba(255,255,255,.04); } .wm-section { padding: 12px 16px; border-bottom: 1px solid var(--border); } .wm-section:last-child { border-bottom: none; } .wm-section-title { font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--text-lo); display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .wm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 14px; } .wm-field-label { font-size: 9px; font-weight: 600; color: var(--text-lo); letter-spacing: .6px; text-transform: uppercase; display: flex; align-items: center; gap: 4px; } .wm-field-value { font-size: 12px; font-weight: 700; color: var(--text-hi); font-family: var(--mono); margin-top: 2px; word-break: break-all; } .wm-field-value.lo { color: var(--text-md); font-weight: 500; } .wm-field-value.red { color: var(--red); } .wm-field-value.green { color: var(--green); } .wm-field-value.orange { color: var(--orange); } .wm-field-value.purple { color: #9b72ff; } /* Price-action section (tx-detail modal): per-horizon excursion rows + wallet track record. ▲ peak up, ▼ peak down, net = where it closed. */ .pa-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 3px 0; } .pa-row .pa-h { min-width: 30px; color: var(--text-lo); font-weight: 700; font-size: 10px; letter-spacing: .5px; } .pa-row .green { color: var(--green); } .pa-row .red { color: var(--red); } .pa-row .lo { color: var(--text-lo); font-weight: 500; } .pa-block { border-left: 2px solid var(--border2); padding-left: 10px; } .pa-track { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); } .wm-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 11px; font-size: 10px; font-weight: 700; font-family: var(--mono); border: 1px solid currentColor; } .wm-link { color: var(--accent, #4a8eff); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .wm-link:hover { text-decoration: underline; } .wm-actions { display: flex; gap: 8px; align-items: center; padding: 12px 16px; background: rgba(255,255,255,.015); border-top: 1px solid var(--border); } .wm-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 14px; border-radius: 7px; background: transparent; border: 1px solid var(--border); color: var(--text-md); cursor: pointer; font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; transition: all .14s; } .wm-btn:hover { color: var(--text-hi); border-color: var(--text-lo); } .wm-btn.primary { background: rgba(74,142,255,.12); border-color: rgba(74,142,255,.5); color: var(--accent, #4a8eff); } .wm-btn.primary.active { background: rgba(74,142,255,.22); border-color: var(--accent, #4a8eff); color: #ffffff; } .wm-btn .mat-ic { font-size: 16px; vertical-align: -3px; } /* Scanner tx rows: hover state for clickability (mirror chart's .wm-row). */ .tx-row-clickable { cursor: pointer; } .tx-row-clickable:hover td { background: rgba(255,255,255,.03); } /* ═══════════════════════════════════════════════════════════════ Risk filter pills — single-select chip look (rounded, vs .ark-seg-btn boxy segments). Used on scanner for risk filter AND on both pages for MM filter chips. Was inline in index.html; lifted shared so chart.html renders identical chips. ═══════════════════════════════════════════════════════════════ */ .risk-pill { height: 28px; padding: 0 12px; background: transparent; border: 1px solid var(--border); border-radius: 14px; color: var(--text-lo); font-size: 12px; font-weight: 600; font-family: var(--font); cursor: pointer; transition: all .15s; display: inline-flex; align-items: center; white-space: nowrap; } .risk-pill:hover { border-color: var(--border2); color: var(--text-md); } .risk-pill.active { background: var(--accent-dim); border-color: var(--accent-border); color: var(--accent-2); } .risk-pill[data-risk="critical"].active { background: rgba(255,59,92,.12); border-color: rgba(255,59,92,.4); color: var(--red); } .risk-pill[data-risk="medium"].active { background: rgba(255,140,0,.1); border-color: rgba(255,140,0,.35); color: var(--orange); } /* ══════════════════════════════════════════════════════════════ RESPONSIVE / MOBILE (Iter 18) Shared foundation for every page that uses the .ark-* shell: a collapsing hamburger nav, wrapping controls, reflowing stats, and horizontally-scrollable dense tables. Page-specific layouts (e.g. chart's two-column split) add their own @media on top. Breakpoints: 860px = nav collapses / tablet, 560px = phone. ══════════════════════════════════════════════════════════════ */ /* Hamburger button — injected into .ark-nav by responsive-nav.js, hidden on desktop, revealed ≤860px. */ .ark-nav-burger { display: none; margin-left: 8px; width: 32px; height: 32px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text-md); font-size: 16px; line-height: 1; cursor: pointer; flex-shrink: 0; } .ark-nav-burger:hover { color: var(--text-hi); border-color: var(--border2); } /* Tablet / narrow-desktop (861–1100px): the scanner dashboard strip has ~10 metric cells. As plain flex:1 cells they get crushed to ~80px and the values ($497.37M, net-flow + bias, …) clip/overflow. Keep it a horizontally- swipeable row of readable cells instead — same treatment the ≤860 mobile block applies, extended up through the tablet range. Scoped to the scanner strip (#stats-strip) + analytics' per-CEX metrics strip (#cex-metrics) — both have ~8–10 cells; analytics' shorter aggregate strips are untouched. */ @media (max-width: 1100px) { #stats-strip.ark-stats, #cex-metrics.ark-stats { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; } #stats-strip .ark-stat, #cex-metrics .ark-stat { flex: 0 0 auto; min-width: 150px; scroll-snap-align: start; } #stats-strip .ark-stat.lead, #cex-metrics .ark-stat.lead { min-width: 220px; } } /* Mobile collapsible filter bar — see mobile-filters.js. The tappable summary is hidden on desktop; the rules that show it + collapse the bar live in the 860px block below. */ .mf-toggle { display: none; } @media (max-width: 860px) { .ark-nav { padding: 0 12px; } .ark-nav-burger { display: inline-flex; } .ark-nav-right { gap: 6px; } /* Compact header on mobile — hide the wordmark (logo mark + hamburger stay), matching the chart page. Frees room for the collapsed nav. */ .ark-nav-logo-text { display: none; } /* Colour restraint: inactive CEX/exchange logos in any segmented selector go monochrome; only the selected one keeps its brand colour. The `img` guard scopes this to logo buttons (time/risk pills have no ). */ .ark-seg-btn:not(.active) img { filter: grayscale(1) brightness(1.7); opacity: .7; } .ark-seg-btn.active img { filter: none; opacity: 1; } /* Collapse any [data-collapsible] filter bar behind a tappable summary. !important so it beats component display rules defined in each page's inline