/* Volume Monitor */
:root, :root[data-theme="dark"] {
  --bg: #0b0e13; --panel: #11151c; --panel2: #171c25; --hover: #1a2029; --line: #222a35; --line2: #2c3542;
  --text: #e7eaf0; --muted: #8b94a5; --dim: #8893a4;
  --up: #1fcf8a; --up-bg: rgba(31, 207, 138, .12); --down: #f2495a; --down-bg: rgba(242, 73, 90, .12);
  --warn: #f5a524; --conf: #b394ff; --conf-bg: rgba(179, 148, 255, .14); --star: #ffc53d;
  --teal: #4fe0bf;   /* venue colours (--v-<name>) come from the registry: base.html #vm-venue-css */
  --flash: rgba(179, 148, 255, .22); --watch-bg: rgba(255, 197, 61, .07); --conf-row: rgba(179, 148, 255, .07);
  --shadow: 0 1px 0 rgba(255,255,255,.02), 0 8px 24px rgba(0,0,0,.25);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f4f6f9; --panel: #ffffff; --panel2: #f7f8fa; --hover: #f1f4f8; --line: #e4e7ec; --line2: #d6dbe3;
  --text: #121826; --muted: #5a6475; --dim: #606c7d;
  --up: #067a4d; --up-bg: rgba(8, 158, 99, .10); --down: #c4263b; --down-bg: rgba(217, 45, 67, .09);
  --warn: #995b00; --conf: #6d3fe0; --conf-bg: rgba(109, 63, 224, .10); --star: #d99a00;
  --teal: #087b63;
  --flash: rgba(109, 63, 224, .14); --watch-bg: rgba(217, 154, 0, .08); --conf-row: rgba(109, 63, 224, .05);
  --shadow: 0 1px 2px rgba(16,24,40,.05);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: var(--fs-body, 1rem)/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "tnum" 1, "cv11" 1;
}
a { color: inherit; }
button, input, select { font: inherit; color: inherit; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-xs); }
.up { color: var(--up); } .down { color: var(--down); }
[hidden] { display: none !important; }
.mono, .feed td { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace; }

/* ---- header ---- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding-block: 12px; border-bottom: 1px solid var(--line); background: var(--panel);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.logo { width: 30px; height: 30px; flex: none; }
.logo rect { fill: var(--panel2); stroke: var(--line2); }
.logo path { fill: var(--up); }
h1 { font-size: var(--fs-h2); margin: 0; letter-spacing: -.01em; font-weight: 700; }
.sub { font-size: var(--fs-xs); color: var(--muted); }
.actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--ctl-h); padding: .25rem .75rem;
  border: 1px solid var(--line2); border-radius: 8px; background: var(--panel2); cursor: pointer;
  font-size: .875rem; font-weight: 500; white-space: nowrap;
}
.btn:hover { border-color: var(--muted); }
.btn.on { border-color: var(--up); color: var(--up); background: var(--up-bg); }
.btn.off { color: var(--muted); }
.btn.attn { border-color: var(--warn); color: var(--warn); animation: pulse 2s ease-in-out infinite; }
.btn.sm { min-height: var(--ctl-h-sm); font-size: var(--fs-xs); padding: .125rem .625rem; }
.btn.icon { width: var(--ctl-h); padding: 0; justify-content: center; }
.btn.icon svg { width: 16px; height: 16px; fill: currentColor; }
@keyframes pulse { 50% { box-shadow: 0 0 0 3px rgba(245,165,36,.18); } }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-right: 4px; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.live.ok i { background: var(--up); box-shadow: 0 0 0 3px var(--up-bg); }
.live.bad i { background: var(--down); }
.live.demo i { background: var(--conf); }

/* ---- status strip ---- */
.status {
  padding-block: 7px; font-size: var(--fs-xs); color: var(--muted);
  border-bottom: 1px solid var(--line); background: var(--bg);
  position: relative; overflow-x: auto;
}
/* Phones: one readable, scrollable row, including before the first response and during reconnects. From 900px the
   row wraps instead (T-459: at 1920 the last venues were cut off behind the hidden scrollbar). */
.st-list { display: flex; gap: 4px 14px; width: max-content; min-height: 1.45em; }
@media (min-width: 56.25rem) {
  .status { overflow-x: visible; }
  .st-list { flex-wrap: wrap; width: auto; }
}
/* T-721: while more venues sit off the right edge, the strip fades out there (app.js toggles .more-r on scroll). */
.status.more-r { -webkit-mask-image: linear-gradient(to left, transparent, #000 3rem); mask-image: linear-gradient(to left, transparent, #000 3rem); }
.st { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.st i { width: 7px; height: 7px; border-radius: 50%; background: var(--up); }
.st.amber i { background: var(--warn); } .st.red i { background: var(--down); }
.st b { color: var(--text); font-weight: 500; }

/* ---- layout ---- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 16px; padding-block: 16px; align-items: start; }
.feed-col { min-width: 0; }
.side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 12px; }

/* ---- filters ---- */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.fgroup { display: inline-flex; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; background: var(--panel); }
.fgroup .tg { border: 0; border-radius: 0; border-right: 1px solid var(--line); }
.fgroup .tg:last-child { border-right: 0; }
.tg {
  min-height: var(--ctl-h-sm); padding: .125rem .625rem; background: var(--panel); border: 1px solid var(--line2); border-radius: 8px;
  color: var(--dim); cursor: pointer; font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
}
.tg:hover { color: var(--text); }
/* --vc = the venue's colour, set on .v-<venue> and .chip.<venue> by base.html #vm-venue-css */
.tg.on { color: var(--text); background: var(--panel2); box-shadow: inset 0 -2px 0 var(--vc, var(--muted)); }
.tg.up.on { color: var(--up); box-shadow: inset 0 -2px 0 var(--up); }
.tg.down.on { color: var(--down); box-shadow: inset 0 -2px 0 var(--down); }
.tg.conf.on { color: var(--conf); border-color: var(--conf); background: var(--conf-bg); box-shadow: none; }
.tg.star.on { color: var(--star); border-color: var(--star); box-shadow: none; }
.fsel { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.fsel select, .search {
  min-height: var(--ctl-h-sm); border: 1px solid var(--line2); border-radius: 8px; background: var(--panel); padding: .125rem .5rem; font-size: var(--fs-sm);
}
.search { width: 110px; text-transform: uppercase; }
.search::placeholder { text-transform: none; color: var(--dim); opacity: 1; }
.linkbtn { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; text-decoration: underline; padding: 0 4px; }
.ftoggle, .feed td .tm { display: none; }
.feed-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; margin: 2px 2px 6px; flex-wrap: wrap; }
#count { color: var(--text); font-weight: 500; }

/* ---- feed table ---- */
.tablewrap {
  container: signals / inline-size;
  position: relative; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow);
  overflow: auto; max-height: calc(100vh - 200px); min-height: 280px; overscroll-behavior: contain;
}
.feed { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-table); white-space: nowrap; }
.feed th {
  position: sticky; top: 0; z-index: 2; background: var(--panel2); color: var(--muted); font: 600 11px/1 Inter, sans-serif;
  text-transform: uppercase; letter-spacing: .04em; text-align: left; padding: 9px 6px; border-bottom: 1px solid var(--line);
}
.feed td { padding: 6px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.feed .r { text-align: right; }
.feed tbody tr { transition: background-color .6s; }
.feed tbody tr:hover td { background-color: var(--hover); }
.feed td.c-time, .feed th.c-time { padding-left: 10px; }
.feed td.c-time { color: var(--muted); }
.feed td.c-time .age { display: block; font-size: 10.5px; color: var(--dim); }
.feed td.c-time .lat { display: block; max-width: 9em; white-space: normal; font-size: 10px; line-height: 1.25; color: var(--dim); }
.feed td.c-coin { position: sticky; left: 0; z-index: 1; background-color: var(--panel); }
.feed th.c-coin { position: sticky; left: 0; z-index: 3; }
.feed tr.lv2 td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
.feed tr.lv3 td:first-child { box-shadow: inset 3px 0 0 var(--down); }
.feed tr.cf td:first-child { box-shadow: inset 3px 0 0 var(--conf); }
.feed td { background-image: linear-gradient(var(--tint, transparent), var(--tint, transparent)); }
.feed tr.cf { --tint: var(--conf-row); }
.feed tr.w { --tint: var(--watch-bg); }
.feed tr.cf.w { --tint: var(--conf-row); }
.feed tr.new td { animation: flash 2.4s ease-out; }
.feed tr.upd td.o { animation: flash 1.6s ease-out; }
/* Keep metadata readable through the composited flash and row tint. */
.feed tr.new :is(.age, .lat, .stb, .o.pending, .o.na),
.feed tr.upd td.o:is(.pending, .na) { color: var(--text); }
@keyframes flash { 0%, 25% { background-color: var(--flash); } 100% { background-color: transparent; } }

.coin, .cm { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; }
.cm { margin-left: 5px; }
.coin b { font-family: Inter, sans-serif; font-weight: 700; font-size: 13.5px; letter-spacing: -.01em; cursor: pointer; }
.coin b:hover { text-decoration: underline; text-decoration-color: var(--dim); }
.stb { background: none; border: 0; padding: 0 2px; cursor: pointer; color: var(--dim); font-size: 14px; line-height: 1; }
.stb:hover { color: var(--star); }
.stb.on { color: var(--star); }
/* <span class="chip binance">: venue colour via --vc; a chip without a venue inherits its colour */
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 5px; font: 600 10.5px/16px Inter, sans-serif;
  border: 1px solid currentColor; letter-spacing: .02em; white-space: nowrap; color: var(--vc);
}
.chip .m { color: var(--muted); font-weight: 500; }
.chip.cfc { background: var(--conf-bg); border-color: transparent; }
.cfwrap { display: flex; flex-wrap: wrap; gap: 3px 4px; align-items: center; min-width: 150px; max-width: 190px; white-space: normal; }
.cfn { color: var(--conf); font: 700 11px Inter, sans-serif; margin-right: 2px; }

.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 6px; border-radius: 5px;
  font: 700 10.5px/16px Inter, sans-serif; letter-spacing: .04em; background: var(--panel2); color: var(--muted); border: 1px solid var(--line2);
}
.badge.liq { color: var(--warn); border-color: rgba(245,165,36,.4); }
.badge.funding { color: var(--teal); }
.badge.trade { color: var(--conf); border-color: var(--conf-bg); }
.pips { display: inline-flex; gap: 2px; }
.pips i { width: 3px; height: 9px; border-radius: 1px; background: var(--line2); }
.pips i.on { background: var(--muted); }
.lv2 .pips i.on { background: var(--warn); }
.lv3 .pips i.on { background: var(--down); }
.sub2 { font: 500 10.5px Inter, sans-serif; color: var(--muted); margin-left: 4px; }

.dir { font: 700 11px Inter, sans-serif; letter-spacing: .04em; padding: 2px 6px; border-radius: 5px; }
.dir.buy { color: var(--up); background: var(--up-bg); }
.dir.sell { color: var(--down); background: var(--down-bg); }
.dir.mixed { color: var(--muted); background: var(--panel2); }
.qv { font-weight: 600; }
.x { font-weight: 600; }
.x.hi { color: var(--warn); } .x.hot { color: var(--down); }
.bs { display: inline-flex; align-items: center; gap: 6px; }
.bs .bar { width: 28px; height: 4px; border-radius: 2px; background: var(--down); opacity: .85; overflow: hidden; }
.bs .bar i { display: block; height: 100%; background: var(--up); }
.o.pending { color: var(--dim); }
.o.na { color: var(--dim); }
.trade {
  display: inline-block; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line2); text-decoration: none;
  font: 600 11.5px Inter, sans-serif; color: var(--text); background: var(--panel2);
}
.trade:hover { border-color: var(--muted); }
/* Phone-only (T-721): a row's details toggle and the "Show all" button under the feed. */
.feed .more { display: none; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; }
.feed-more { display: none; }
.empty { padding: 48px 16px; text-align: center; color: var(--muted); }
.empty b { color: var(--text); display: block; margin-bottom: 4px; font-size: 14px; }
.nfa { font-size: 11.5px; color: var(--dim); margin: 8px 2px 0; }

/* ---- side ---- */
.card { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 12px; box-shadow: var(--shadow); }
.card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.card h2 { font-size: 13px; margin: 0; font-weight: 600; }
.check { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); cursor: pointer; }
.hot { list-style: none; margin: 0; padding: 0; counter-reset: h; }
.hot li {
  display: grid; grid-template-columns: 18px 1fr auto auto; gap: 8px; align-items: center; padding: 5px 6px; margin: 0 -6px;
  border-radius: 6px; cursor: pointer; font-size: 12.5px;
}
.hot li:hover, .hot li.sel { background: var(--hover); }
.hot li::before { counter-increment: h; content: counter(h); color: var(--dim); font-size: 11px; text-align: right; }
.hot .nm { font-weight: 700; display: flex; align-items: center; gap: 6px; min-width: 0; }
.hot .hb { display: inline-block; height: 4px; border-radius: 2px; background: var(--muted); opacity: .45; margin-right: 6px; vertical-align: middle; }
.hot .h { font-family: "JetBrains Mono", monospace; color: var(--muted); font-size: 11.5px; }
.hot .net { font-family: "JetBrains Mono", monospace; font-size: 11.5px; min-width: 62px; text-align: right; }
.watchlist { display: flex; flex-wrap: wrap; gap: 6px; }
.wl { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px; border-radius: 999px; border: 1px solid var(--line2); font-size: 12px; font-weight: 600; }
.wl span { cursor: pointer; }
.wl button { background: none; border: 0; color: var(--dim); cursor: pointer; padding: 0 4px; font-size: 13px; }
.wl button:hover { color: var(--down); }
.cta {
  display: block; text-decoration: none; padding: 14px; border-radius: 10px; border: 1px dashed var(--line2);
  background: linear-gradient(135deg, rgba(42, 171, 238, .12), transparent 70%);
}
.cta:hover { border-color: #2aabee; }
.cta-t { display: block; font-weight: 700; font-size: 13.5px; }
.cta-s { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.row-btns { display: flex; gap: 8px; margin-top: 10px; }

/* ---- faq / footer ---- */
.faq { padding-block: 8px; }
.faq h2 { font-size: var(--fs-h2); margin: 8px 0 12px; }
.faq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 10px; align-items: start; }
.faq details { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 10px 14px; }
.faq summary { cursor: pointer; font-weight: 600; font-size: .9375rem; }
.faq p { margin: 8px 0 2px; color: var(--muted); font-size: .875rem; }
.faq p b { color: var(--text); font-weight: 600; }
.foot { padding-top: 20px; padding-bottom: 32px; border-top: 1px solid var(--line); margin-top: 20px; font-size: .875rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; color: var(--muted); }
.foot a { color: var(--text); }
.addr {
  font-family: "JetBrains Mono", monospace; font-size: 12px; background: var(--panel); border: 1px solid var(--line2);
  border-radius: 6px; padding: 3px 8px; cursor: pointer; word-break: break-all; text-align: left; max-width: 100%;
}
.addr:hover { border-color: var(--muted); }
.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 20; background: var(--text); color: var(--bg);
  padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; box-shadow: 0 8px 30px rgba(0,0,0,.3);
}

/* ---- responsive ---- */
@media (max-width: 1320px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@media (max-width: 640px) {
  .top { padding-block: 10px; }
  .sub { display: none; }
  .actions { gap: 6px; }
  .btn { min-height: var(--ctl-h-sm); padding: .125rem .625rem; font-size: var(--fs-xs); }
  .btn.icon { width: var(--ctl-h-sm); }
  .live span { display: none; }
  .status { padding-block: 6px; gap: 4px 10px; }
  .layout { padding-block: 12px; gap: 12px; }
  .side { grid-template-columns: minmax(0, 1fr); }
  .filters { gap: 6px; }
  .search { flex: 1 1 90px; }
  .ftoggle { display: inline-flex; margin-bottom: 8px; }
  .filters { display: none; }
  .filters.open { display: flex; }
  /* T-721: compact alert rows, at most ~3 lines each, in the page's own scroll (no nested scroll box).
     Line 1: coin + venue chip, $ in 1m, the "More" toggle. Line 2: type, side, × normal, age, +5m.
     Line 3: confluence chips, when there are any. Empty cells (.e) are hidden, never a bare dash. "More" (.open)
     adds the remaining measurements as labelled lines. The newest 50 (app.js PHONE_ROWS) show until "Show all". */
  .tablewrap { max-height: none; min-height: 0; overflow: visible; overscroll-behavior: auto; }
  .tablewrap:not(.all) #rows > tr:nth-child(n+51) { display: none; }
  .feed-more:not([hidden]) { display: flex; margin: 8px auto; min-height: 44px; }
  .feed, .feed tbody { display: block; white-space: normal; }
  .feed thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .feed tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px; border-bottom: 1px solid var(--line); background-image: linear-gradient(var(--tint, transparent), var(--tint, transparent)); }
  .feed td { display: block; min-width: 0; padding: 0; border: 0; text-align: start; background-image: none; order: 20; flex: 0 0 100%; }
  .feed td.e, .feed tr:not(.open) td:is(:nth-child(7), :nth-child(8), :nth-child(10), :nth-child(12), :nth-child(13)) { display: none; }
  .feed td.c-coin { order: 1; flex: 1 1 calc(100% - 8.25rem - 20px); position: static; box-shadow: none; background-color: transparent; }
  .feed td.qv { order: 2; flex: 0 0 5.5rem; text-align: end; }
  .feed td:nth-child(3) { order: 3; flex: 0 1 auto; }
  .feed td:nth-child(4) { order: 4; flex: 0 1 auto; }
  .feed td:nth-child(6) { order: 5; flex: 0 1 auto; }
  .feed tr:not(.open) td.c-time { order: 6; flex: 0 1 auto; font-size: 0; }
  .feed tr:not(.open) td.c-time .age { display: inline; font-size: .6875rem; }
  .feed tr:not(.open) td.c-time .lat { display: none; }
  .feed td:nth-child(11) { order: 7; flex: 0 1 auto; margin-left: auto; }
  .feed td:last-child { order: 2; flex: 0 0 2.75rem; display: flex; justify-content: flex-end; }
  /* Open: the toggle stays put and the Trade link joins the labelled lines below. */
  .feed tr.open td:last-child { display: contents; }
  .feed tr.open td:last-child .more { order: 2; flex: 0 0 2.75rem; }
  .feed tr.open td:last-child a.trade { order: 21; margin-block: 0; }
  .feed td:nth-child(9) { order: 9; }
  .feed tr:not(.open) td:last-child .trade, .feed tr:not(.open) .orc, .feed tr:not(.open) td.qv .sub2 { display: none; }
  /* Labels: inline on +5m; labelled lines (label left, value right) for the cells "More" opens. */
  .feed td:nth-child(11)::before { content: attr(data-label) " "; color: var(--muted); font: 500 .6875rem Inter, sans-serif; }
  .feed tr.open td:is(.c-time, :nth-child(7), :nth-child(8), :nth-child(10), :nth-child(12), :nth-child(13)):not(.e) { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 10px; flex-wrap: wrap; }
  .feed tr.open td:is(.c-time, :nth-child(7), :nth-child(8), :nth-child(10), :nth-child(12), :nth-child(13))::before { content: attr(data-label); color: var(--muted); font: 500 .6875rem/1.4 Inter, sans-serif; margin-right: auto; }
  .feed tr.open td.c-time .age, .feed tr.open td.c-time .lat { display: inline; max-width: none; }
  .feed .coin { display: inline-flex; min-width: 0; }
  .feed .coin b { min-width: 0; font-size: .875rem; overflow-wrap: anywhere; }
  .feed .cm { display: inline-flex; flex-wrap: wrap; margin: 0 0 0 4px; }
  .feed :is(.chip, .badge, .dir, .bs) { white-space: nowrap; }
  .feed td:nth-child(3) .sub2 { display: inline; margin-left: 4px; }
  .feed .cfwrap { min-width: 0; max-width: none; }
  .feed .stb { margin-left: -10px; }
  .feed .stb, .feed a.trade { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; margin-block: -10px; }
  .feed .more { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; margin-block: -10px; margin-right: -10px; }
  /* Level and confluence keep their left bar, drawn on the row (its first cell is no longer leftmost). */
  .feed tr.lv2 { box-shadow: inset 3px 0 0 var(--warn); }
  .feed tr.lv3 { box-shadow: inset 3px 0 0 var(--down); }
  .feed tr.cf { box-shadow: inset 3px 0 0 var(--conf); }
  .feed tr:is(.lv2, .lv3, .cf) td:first-child { box-shadow: none; }
  .filters .fgroup { flex-wrap: wrap; min-width: 0; max-width: 100%; }
  .filters .tg, .modebar .tg { white-space: normal; overflow-wrap: anywhere; }
  .modebar .fgroup.mode { flex-wrap: wrap; max-width: 100%; }
  .hot li { grid-template-columns: 18px minmax(0, 1fr) auto; }
  .hot .net { grid-column: 2 / -1; }
  .hot .nm, .wl { overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
  .feed-meta .muted { display: none; }
  /* T-460: phones can't show page notifications (Android Chrome's `new Notification` throws; iOS needs a home-screen
     app), and the button pushed the home header to 3 rows (127px, sticky). Zoomed desktops (hover) keep it. */
  @media (hover: none) { #btn-notify { display: none; } }
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
}
.feed tr.w .coin b { color: var(--star); }
.hot li.none { display: block; cursor: default; } .hot li.none::before { content: none; }

/* Alert mode switch: always visible, above the filters. */
.modebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.modebar .fgroup.mode .tg { padding-left: 14px; padding-right: 14px; font-weight: 600; }
#mode-hint { width: 32ch; max-width: 100%; min-height: 1.45em; flex-shrink: 0; }

.qv .sub2 { display: block; margin-left: 0; }
.orc { display: block; margin-left: 0; color: var(--muted); text-decoration: none; white-space: nowrap; }
.orc:hover { text-decoration: underline; }

/* ---- accessibility (T-161) ---- */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.sr-pref { display: flex; margin-top: 10px; }
.tg:focus-visible, .btn:focus-visible,.stb:focus-visible, .linkbtn:focus-visible, .trade:focus-visible,
[data-coin]:focus-visible, .wl button:focus-visible, .cta:focus-visible, .fsel select:focus-visible, .search:focus-visible,
.check input:focus-visible {
  outline: 2px solid var(--conf); outline-offset: 2px;
}
.fgroup .tg:focus-visible { outline-offset: -2px; }   /* .fgroup clips its children (overflow: hidden) */
@media (prefers-reduced-motion: reduce) {
  .feed tr.new td, .feed tr.upd td.o, .btn.attn { animation: none; }
  .feed tbody tr { transition: none; }
}

/* ---- home (T-459) ---- */
/* Scanner title + note as one block, so the .page grid gap doesn't open between them. */
.scan-head .note { margin-top: 4px; }
/* T-709 vertical rhythm: hero, "Right now", the scanner heading and the venue strip (#status) sit one --home-gap
   apart, visible edge to visible edge. The hero ends in the 28px "How to read this" summary (~9px below its text)
   plus .pagehead's padding, and #status has its own 7px top padding, so those are subtracted. .page.x beats
   site.css's phone .page padding (site.css loads after this file). */
.page.now, .page.scan-head { --home-gap: 1.25rem; }
.page.now { padding-top: calc(var(--home-gap) - .375rem - 9px); padding-bottom: 0; }
.page.now + .page.scan-head { padding-top: var(--home-gap); }
.pagehead + .page.scan-head { padding-top: calc(var(--home-gap) - .375rem - 9px); }
.page.scan-head { padding-bottom: calc(var(--home-gap) - 7px); }
@media (max-width: 640px) { .page.now, .page.scan-head { --home-gap: 1rem; } }
/* "Right now" heatmap tile: views.heat_thumb's mini profile, longs red left of the price line, shorts green right. */
.heat-thumb { display: block; height: 1.75rem; margin-top: 6px; }
.heat-thumb svg { display: block; width: 100%; height: 100%; }
.heat-thumb path { fill: none; stroke-width: 1.4; }
.heat-thumb .l { stroke: var(--down); } .heat-thumb .s { stroke: var(--up); }
.heat-thumb .m { stroke: var(--text); stroke-width: 1; stroke-dasharray: 2 2; vector-effect: non-scaling-stroke; opacity: .6; }
.now-fg.k-xfear .stat-value, .now-fg.k-fear .stat-value { color: var(--down); }
.now-fg.k-xgreed .stat-value, .now-fg.k-greed .stat-value { color: var(--up); }
/* "How it works": the same full-width .faq-grid as every other page's FAQ (T-709: the old two-column prose-width
   grid left an empty half beside it). */
.howto details[open] { border-color: var(--line2); }
/* "?" beside the alert-mode switch: modes, levels, confluence and LIQ/FUND/TRADE rows, anchored to the mode bar. */
.modebar { position: relative; }
.mode-help summary {
  list-style: none; display: grid; place-items: center; width: var(--ctl-h-sm); height: var(--ctl-h-sm); border-radius: 50%;
  border: 1px solid var(--line2); color: var(--muted); font-weight: 700; cursor: pointer; user-select: none;
}
.mode-help summary::-webkit-details-marker { display: none; }
.mode-help summary:hover, .mode-help[open] summary { color: var(--text); border-color: var(--muted); }
.mode-help-p {
  position: absolute; z-index: 15; top: calc(100% + 6px); left: 0; width: min(36rem, 100%); max-height: 70vh; overflow: auto;
  padding: 2px 14px; border: 1px solid var(--line2); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow);
  font-size: var(--fs-xs); color: var(--muted);
}
.mode-help-p p { margin: 8px 0; }
.mode-help-p b { color: var(--text); font-weight: 600; }

/* ---- touch hit areas (T-666) ----
   Measured at 390px before this: header buttons (Menu, search, theme, sound) 30px tall, the "?" mode help 30x30, and
   the opened home filters (venue/market/kind toggles, Level/Min selects, coin search, Watchlist) 30px, Reset/Copy link
   18px. Phones and touch tablets (pointer: coarse) get 44px targets; mouse desktops keep the compact sizes.
   - Header buttons and "?" keep their drawn size (a taller sticky header costs every phone screen); a transparent
     ::before stretches the tappable box to 44px tall, centred on the button, and sideways only into half of the 6px
     gap, so neighbouring targets touch but never overlap. .actions rows are 14px apart so that holds when the
     actions wrap; the reach (T-720: 4px up, 10px down) stays inside .top's 10px padding, clear of the brand link. Outlines
     still trace the drawn button.
   - The home filters grow to 44px, the same rule markets.css applies to the funding/OI filters since T-661. */
@media (max-width: 640px), (pointer: coarse) {
  .top .actions { row-gap: 14px; }
  .top .btn, .mode-help summary { position: relative; }
  .top .btn::before, .mode-help summary::before {
    content: ""; position: absolute; top: calc(50% - 22px); bottom: calc(50% - 22px); left: -3px; right: -3px;
  }
  .top .btn::before { top: calc(50% - 19px); bottom: calc(50% - 25px); }   /* T-720: 4px up, 10px down */
  .mode-help summary::before { left: calc(50% - 22px); right: calc(50% - 22px); }
  .btn.ftoggle, .filters .tg, .filters .search, .filters .fsel select, .modebar .tg { min-height: 44px; }
  .filters .linkbtn { min-height: 44px; padding-inline: 8px; }
}
/* ---- touch hit areas, remaining (T-720) ----
   Measured at 390px before this: the brand link 30px tall, the scrolling page tabs (.hl-views 28px, .opt-nav 30px)
   and the "Remember on this device" switch and Retry/Reset links in .pf 24px. Same rule as above: drawn size unchanged.
   - .brand: a transparent ::after makes it 44px tall (no sideways reach). On the home page the header wraps on phones
     (brand row, then the actions row 10px below), so the two boxes are offset instead of centred: the brand reaches
     10px up (exactly .top's padding) and 4px down, the header buttons (T-666) 4px up and 10px down (exactly the
     bottom padding, and 4 + 10 = the 14px .actions row gap). 4 + 4 leaves 2px clear in the 10px row gap.
   - Scrolling tab strips clip anything outside their padding box (overflow-x: auto), so the strip's vertical padding
     grows to 8px to hold the tabs' 44px ::after, and negative margins give the space back: the tabs stay where they
     were. The extra 4px above is the page head's empty bottom padding (none when the strip follows another strip);
     the 8px below is the main column's empty top padding.
   - .pf (site.css, loaded after this file, so the rule lives there) has no border or background: its switch and
     links just get min-height 44px (the row grows, nothing drawn changes); an overlay would reach the filter
     controls 6px above it. */
@media (max-width: 640px), (pointer: coarse) {
  .brand, .mk-views:not([data-contextual]) a { position: relative; }
  .brand::after, .mk-views:not([data-contextual]) a::after {
    content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 22px); bottom: calc(50% - 22px);
  }
  .brand::after { top: calc(50% - 25px); bottom: calc(50% - 19px); }
  .mk-views:not([data-contextual]) { padding-block: 8px; margin-block: -4px -8px; }
  .mk-views + .mk-views:not([data-contextual]) { margin-top: 0; }
}