:root { --bg: #131314; --card: #1e1f20; --line: #3c4043; --text: #e3e3e3; --muted: #9aa0a6;
  --good: #3fb97a; --bad: #e5534b; --warn: #d9a441; --blue: #8ab4f8; --pill: #282a2c; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.45 "Google Sans", Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
/* the header (RangeTrades, 10/1): the name on the left, room for more, the status on the right */
header.top { display: flex; align-items: center; gap: 16px; padding: 0 24px; min-height: 64px; }
header a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
.brand a { padding-left: 0; }
.brand { font-size: 22px; letter-spacing: -.01em; white-space: nowrap; }
.brand .b1 { font-weight: 600; color: var(--text); }
.brand .b2 { font-weight: 400; color: #c4c7c5; margin-left: 1px; }
.top-room { flex: 1; }
.top-meta { white-space: nowrap; }
/* the range tiles on the left, aligned to the left edge; the chat on the right (wide screens) */
.layout { display: flex; align-items: flex-start; gap: 24px; padding: 0 24px 24px; }
main { flex: 1 1 auto; min-width: 0; max-width: 1040px; padding: 0 0 16px; }
@media (max-width: 1099px) { .layout { display: block; padding: 0 16px 16px; } header.top { padding: 0 16px; } }
@media (max-width: 480px) { header.top { gap: 8px; flex-wrap: wrap; } .top-room { display: none; } .brand { font-size: 20px; } }
h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  margin: 12px 0 6px; font-weight: 600; }
a { color: var(--blue); text-decoration: none; cursor: pointer; }
a.plain, .brand a { color: inherit; }
.muted { color: var(--muted); } .small { font-size: 12.5px; }
.good { color: var(--good); } .bad { color: var(--bad); } .warn { color: var(--warn); }

/* account strip */
.account { padding: 10px 0 2px; }
.account b { font-weight: 650; }
.account .sub { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--muted); font-size: 13px; }
.account .fee { color: var(--warn); }
.account .risk { color: var(--muted); font-size: 13px; margin: 1px 0; }
.stale-banner:empty { display: none; }
.stale-banner { margin-top: 10px; padding: 7px 12px; border-radius: 8px; background: #3a3019; color: #f0c56a; }
.banner { margin: 8px 0 4px; padding: 8px 12px; border-radius: 10px; background: #3a1d1d;
  border: 1px solid #5a2a2a; color: #ffd0cc; }
/* advice paused: every advice line, chip and the Open block's lines */
.stale .slot, .stale .banner, .stale .pill, .stale .line.do, .stale .room, .stale .dip,
.stale .dip-card, .stale .hint { opacity: .45; }

/* position cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; margin: 8px 0; }
.card-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.card-title { font-weight: 650; font-size: 15px; }
.pill { border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 650;
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.pill.act { background: #3a1d1d; color: #ff8f86; }
.pill.go { background: #173826; color: #7fe0a8; }
.pill.set { background: #3a3019; color: #f0c56a; }
.pill.grey { background: #232a33; color: var(--muted); }
.facts { color: var(--muted); font-size: 13px; margin: 1px 0 4px; }
.slot { display: grid; grid-template-columns: 58px 1fr; gap: 8px; margin: 3px 0; }
.slot em { font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); padding-top: 2px; }
.line.do { color: var(--text); font-weight: 550; }
.slot.also .line, .slot.more { color: var(--muted); }
.orders { font-size: 12.5px; color: var(--muted); margin: 3px 0 0; }
.slot.size .line { color: var(--text); font-size: 13px; }
.fold { color: var(--muted); }
.fold-body { color: var(--muted); }
.runner-row { font-size: 12.5px; margin-top: 2px; }
.runner-row:empty { display: none; }
.why { color: var(--blue); font-size: 11.5px; cursor: pointer; margin-left: 2px; white-space: nowrap; }
.why.tag { border: 1px solid #34465e; border-radius: 6px; padding: 0 5px; font-size: 11px; font-weight: 400; }
.why-box { background: #11161c; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  margin: 6px 0; font-size: 12.5px; color: var(--muted); font-weight: 400; }

/* the level ladder: price high to low; resistance red, support green, strong solid, medium mid,
   weak faint; the NOW row blue with the price large; the trader's own numbers as rows or chips */
.range-status { font-size: 13px; margin: 5px 0 0; }
.ladder { max-width: 560px; margin: 5px 0 2px; font-size: 13px; font-variant-numeric: tabular-nums; }
.lr { display: grid; grid-template-columns: 9em 1fr auto 4.2em; align-items: baseline; gap: 1px 8px;
  padding: 2px 8px; margin-top: 1px; border-left: 4px solid transparent; border-radius: 0 5px 5px 0; }
.lr-px { font-weight: 600; white-space: nowrap; }
.lr-what { color: var(--muted); }
.lr-d { color: var(--muted); font-size: 12px; white-space: nowrap; text-align: right; }
/* the position's P&L if price reaches the row: right-aligned, the 4th column */
.lr-pnl { grid-column: 4; font-size: 12px; white-space: nowrap; text-align: right; }
.lr-pnl.good { color: #7fe0a8; } .lr-pnl.bad { color: #ff8f86; }
.ladder[data-where="open"] .lr { grid-template-columns: 9em 1fr auto; }
.lr-chips { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 2px 4px; }
.lr.res { border-left-color: var(--bad); background: rgba(229, 83, 75, .16); }
.lr.res .lr-px { color: #ff8f86; } .lr.res .lr-what { color: #e8a7a1; }
.lr.sup { border-left-color: var(--good); background: rgba(63, 185, 122, .16); }
.lr.sup .lr-px { color: #7fe0a8; } .lr.sup .lr-what { color: #a3d9b8; }
.lr.res.medium { border-left-color: rgba(229, 83, 75, .55); background: rgba(229, 83, 75, .07); }
.lr.sup.medium { border-left-color: rgba(63, 185, 122, .55); background: rgba(63, 185, 122, .07); }
.lr.medium .lr-px { font-weight: 500; }
.lr.res.medium .lr-px { color: #d98a85; } .lr.sup.medium .lr-px { color: #86c9a2; }
.lr.medium .lr-what { color: var(--muted); }
.lr.weak { border-left-color: #353c46; background: none; opacity: .7; }
.lr.weak .lr-px, .lr.weak .lr-what { color: var(--muted); font-weight: 400; }
.lr.st-broken, .lr.st-retesting { background-image: repeating-linear-gradient(135deg, transparent 0 6px,
  rgba(255, 255, 255, .06) 6px 8px); }
.lr.st-testing .lr-what, .lr.st-pushing .lr-what { color: var(--warn); }
.lr.now { background: rgba(91, 157, 255, .2); border-left-color: var(--blue); padding: 3px 8px; }
.lr.now .lr-px { color: #9cc2ff; font-size: 18px; font-weight: 700; line-height: 1.25; }
.lr.now .lr-what { color: var(--blue); font-size: 11px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .06em; }
.lr.mk { border-left: 4px dotted #4a5260; }
.lr.mk .lr-px { color: var(--text); font-weight: 500; } .lr.mk .lr-what { color: var(--text); }
.chip { font-size: 11.5px; border-radius: 6px; padding: 0 6px; background: #232a33; color: #c9d1dc;
  white-space: nowrap; }
.chip.k-tp, .lr.mk.k-tp .lr-what { color: #7fe0a8; }
.chip.k-loss, .chip.k-liq, .chip.k-stop, .lr.mk.k-loss .lr-what, .lr.mk.k-liq .lr-what,
.lr.mk.k-stop .lr-what { color: #ff8f86; }
.chip.k-break, .lr.mk.k-break .lr-what { color: #f0c56a; }
.chip.k-bids, .chip.k-asks, .lr.mk.k-bids .lr-what, .lr.mk.k-asks .lr-what { color: #9cc2ff; }
.chip.k-last, .lr.mk.k-last .lr-what { color: var(--muted); }
.lad-more { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; padding: 0 12px; }
@media (max-width: 480px) {
  .card { padding: 9px 10px; }
  .lr { grid-template-columns: 8.9em 1fr auto 3.8em; gap: 1px 6px; padding: 2px 6px; font-size: 12.5px; }
  .lr-px { letter-spacing: -.01em; }
}

/* Open block and footer */
.open > div > div { margin: 2px 0; }
.room { color: var(--text); }
.coin-line { font-size: 13.5px; }
.open .coin-line { margin: 6px 0; }
.dip, .hint, .dip-card.stub { color: var(--muted); font-size: 13px; }
.dip-card { border-left: 3px solid var(--warn); padding: 2px 0 2px 10px; }
.footer { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted);
  font-size: 12.5px; }
/* Recent alerts (collapsed by default) */
.alerts-log { margin-top: 12px; font-size: 12.5px; }
.alerts-log summary { cursor: pointer; color: var(--muted); padding: 13px 0; line-height: 18px; }
/* taps of at least 44px on #/ and #/all: an inline link keeps its line (the padding is taken back
   by the margin) but its tap area is 44px tall */
.card-title a.plain, .footer a, a.runner { display: inline-block; padding: 13px 0; margin: -13px 0;
  line-height: 18px; }
.alert-row { padding: 6px 0; border-bottom: 1px solid var(--line); }
.alert-ev { color: var(--muted); margin-top: 2px; }
.latest-alert a { display: block; margin: 6px 0; padding: 6px 10px; border-radius: 8px;
  background: #1d2a3d; color: var(--text); font-size: 12.5px; text-decoration: none; }

/* a row's "open" chevron (the other coin's line on a position page) */
.h-go { color: var(--muted); font-size: 18px; margin-left: 2px; }

/* #/p/<coin>: one position */
.coin { padding: 6px 0 2px; }
/* tap targets of at least 44px: the back link, the ladder toggle, the header links, the rows */
.back { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px 0 0;
  font-size: 14px; margin: 0 0 -4px; }
.c-head { font-weight: 650; font-size: 15px; }
.c-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 2px 0 6px; }
.c-price .big { font-size: 30px; font-weight: 700; color: #9cc2ff; font-variant-numeric: tabular-nums; }
.c-pnl { font-size: 17px; font-weight: 650; }
.clock { font-size: 12.5px; border-radius: 999px; padding: 2px 10px; background: #232a33;
  color: #c9d1dc; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart { margin: 4px 0 8px; min-height: 60px; }
.c-svg { display: block; max-width: 100%; height: auto; background: #11161c; border-radius: 10px; }
.c-svg .grid { stroke: #1f252d; stroke-width: 1; }
.c-svg .ax { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
/* price tags in the right gutter: the live price (blue) and each line's price */
.c-svg rect.tg { fill: #11161c; stroke-width: 1; stroke: #4a5260; }
.c-svg rect.tg.t-now { fill: var(--blue); stroke: none; }
.c-svg text.tg-t { font-weight: 600; }
.c-svg text.tg-t.t-now { fill: #0f1216; font-weight: 700; }
.c-svg .tg-tick { stroke-width: 1; }
.c-svg rect.t-break, .c-svg rect.t-fail { stroke: var(--warn); }
.c-svg text.t-break, .c-svg text.t-fail, .c-svg .tg-tick.t-break, .c-svg .tg-tick.t-fail { fill: var(--warn); stroke: var(--warn); }
.c-svg rect.t-tp { stroke: var(--good); } .c-svg text.t-tp, .c-svg .tg-tick.t-tp { fill: #7fe0a8; stroke: var(--good); }
.c-svg rect.t-entry { stroke: #8b95a3; } .c-svg text.t-entry, .c-svg .tg-tick.t-entry { fill: #c9d1dc; stroke: #8b95a3; }
.c-svg rect.t-loss, .c-svg rect.t-liq { stroke: var(--bad); }
.c-svg text.t-loss, .c-svg text.t-liq, .c-svg .tg-tick.t-loss, .c-svg .tg-tick.t-liq { fill: #ff8f86; stroke: var(--bad); }
.c-svg text.tg-t { stroke: none; }
.c-svg .b-res { fill: rgba(229, 83, 75, .22); } .c-svg .b-sup { fill: rgba(63, 185, 122, .22); }
.c-svg .b-res.b-medium { fill: rgba(229, 83, 75, .12); } .c-svg .b-sup.b-medium { fill: rgba(63, 185, 122, .12); }
.c-svg .b-weak { fill: rgba(139, 149, 163, .07); }
.c-svg .b-watch { fill: rgba(217, 164, 65, .26); }
.c-svg .cd { stroke-width: 1; } .c-svg .cd.up { stroke: #3fb97a; fill: #3fb97a; }
.c-svg .cd.dn { stroke: #e5534b; fill: #e5534b; } .c-svg .cd.live { opacity: .55; }
.c-svg .l-break { stroke: var(--warn); stroke-dasharray: 5 3; stroke-width: 1.4; }
/* a rule row's price, as its notch on the home bar: white dashed, labelled "↓ 82,752" */
.c-svg .l-rule { stroke: #e6e9ee; stroke-dasharray: 5 3; stroke-width: 1.3; }
.c-svg text.l-rule { fill: #e6e9ee; font-weight: 700; }
.c-svg rect.t-rule { stroke: #e6e9ee; } .c-svg text.t-rule, .c-svg .tg-tick.t-rule { fill: #e6e9ee; stroke: #e6e9ee; }
.c-svg .l-fail { stroke: var(--warn); stroke-dasharray: 1 3; stroke-width: 1.8; }
.c-svg .l-tp { stroke: var(--good); stroke-dasharray: 5 3; stroke-width: 1.4; }
.c-svg .l-entry { stroke: #8b95a3; stroke-width: 1.2; }
.c-svg .l-loss { stroke: var(--bad); stroke-dasharray: 5 3; stroke-width: 1.2; }
.c-svg line.l-loss.passed { opacity: .5; }
.c-svg .l-liq { stroke: var(--bad); stroke-width: 1.6; }
.c-svg .l-now { stroke: var(--blue); stroke-width: 1; }
.c-svg .l-decide { stroke: var(--warn); stroke-dasharray: 2 3; stroke-width: 1.4; }
/* a line's word, on a halo of the chart's background so it reads over the candles */
.c-svg text.cl { font-size: 10px; stroke: #11161c; stroke-width: 3px; stroke-dasharray: none;
  stroke-linejoin: round; paint-order: stroke; opacity: 1; }
.c-svg text.cl.off { fill: var(--muted); }
.c-svg text.l-loss.passed { fill: #c98a85; }
.c-svg text.l-break, .c-svg text.l-fail { fill: var(--warn); } .c-svg text.l-tp { fill: var(--good); }
.c-svg text.l-entry { fill: #aab3bf; } .c-svg text.l-loss, .c-svg text.l-liq { fill: #ff8f86; }
/* the break this page names, at its close, on the page chart and the other coin's mini-chart */
.c-svg .l-brk { stroke: var(--warn); stroke-dasharray: 4 3; stroke-width: 1.2; opacity: .85; }
.c-svg text.l-brk-t { fill: var(--warn); font-size: 9.5px; }
/* the other coin: one line of facts over its mini-chart, the whole block a link to its page */
.ref { display: block; max-width: 720px; color: var(--text); margin: -2px 0 8px; text-decoration: none; }  /* the charts' width */
.ref-line { position: relative; min-height: 24px; padding: 3px 18px 2px 0; font-size: 13px;
  line-height: 1.4; color: #c9d1dc; overflow-wrap: anywhere; box-sizing: border-box; }
.ref-line b { color: var(--text); }
.ref-line .h-go { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 16px; }
.ref-chart { min-height: 40px; }
.ref:active .ref-svg, .ref:hover .ref-svg { outline: 1px solid #2d3542; }
.c-svg .mk { stroke-width: 1.2; }
.c-svg .mk-hold.sup { fill: #3fb97a; stroke: #11161c; } .c-svg .mk-hold.res { fill: #e5534b; stroke: #11161c; }
.c-svg .mk-break { fill: var(--warn); stroke: #11161c; }
.c-svg .mk-failed { fill: none; stroke: #c9d1dc; stroke-width: 1.4; }
.c-status { font-size: 13.5px; margin: 6px 0; }
.watch { border: 1px solid #4a3d1f; background: #1c1912; border-radius: 12px; padding: 9px 12px;
  margin: 8px 0; font-size: 13.5px; overflow-wrap: anywhere; }
.watch.st-failed { border-color: var(--line); background: var(--card); }
.w-title { font-weight: 650; color: #f0c56a; margin-bottom: 3px; }
.watch.st-failed .w-title { color: var(--text); }
.w-line { color: var(--muted); margin: 2px 0; }
.w-line.w-why { font-size: 12.5px; }
.w-when { margin: 6px 0 0; font-weight: 600; color: #f0c56a; }
.w-rows { margin: 2px 0 3px; }
.w-row { padding: 3px 8px; border-left: 3px solid transparent; border-radius: 0 6px 6px 0; margin: 1px 0; }
.w-row.live { border-left-color: var(--blue); background: rgba(91, 157, 255, .13); }
.w-cond { font-weight: 600; } .w-extra { color: var(--muted); }
.w-pnl { float: right; font-size: 12.5px; font-weight: 600; margin-left: 8px; }
.w-pnl.good { color: #7fe0a8; } .w-pnl.bad { color: #ff8f86; }
.w-would { font-weight: 600; margin-top: 3px; }
.w-note { color: var(--muted); font-size: 12px; margin: -2px 0 3px; }
.w-wait { color: #f0c56a; font-size: 12.5px; margin: 5px 0 0; }
/* the close the rows name has passed: they wait for the engine's next view */
.watch.passed .w-when, .watch.passed .w-rows, .watch.passed .w-would { opacity: .45; }
.p-note { margin: 4px 0 0 4px; color: #ff8f86; font-size: 13px; }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px;
  margin: 8px 0; font-size: 13.5px; overflow-wrap: anywhere; }
.p-h { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  font-weight: 600; margin-bottom: 3px; }
.plan ol { margin: 0; padding-left: 20px; }
.plan li { margin: 4px 0; padding: 2px 4px; border-radius: 6px; color: var(--muted); }
.plan li b { color: var(--text); font-weight: 600; }
.plan li.cur { color: var(--text); background: rgba(91, 157, 255, .13); }
.plan li.live:not(.cur) { color: #c9d1dc; }
.p-also { margin-top: 2px; }
.c-lad { margin: 6px 0 2px; font-size: 13px; }
.lad-toggle { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px 0 0;
  font-size: 13.5px; }
.stale .plan, .stale .watch { opacity: .45; }
@media (max-width: 480px) {
  header { padding: 0 16px; }
  .c-price .big { font-size: 26px; }
}

/* #/ the market board (HOME_BOARD.md "Simple board", HOME_CLARITY.md): the colour key, then BTC and
   ETH, each with its chip and step, what is happening, its ranges bar, its two rule rows and, when
   held, its position. The chip: grey the open range, amber a zone deciding or a break counting,
   green a break up or a support that held, red a break down or a resistance that held */
.home { padding: 8px 0 2px; }
.mb-none { display: flex; align-items: center; min-height: 44px; }
.mb-legend { margin: 2px 0 10px; padding: 0 14px; }  /* aligned with the cards' content (10/1) */
.mb-lg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; font-size: 11.5px;
  color: var(--muted); line-height: 17px; }
.mb-legend .lg { cursor: pointer; }
.mb-howto { display: inline; }
.mb-howto summary { display: inline; cursor: pointer; color: var(--blue); list-style: none; white-space: nowrap; }
.mb-howto summary::-webkit-details-marker { display: none; }
.mb-howto[open] summary::after { content: " ▾"; }
.mb-howto dl { flex-basis: 100%; margin: 8px 0 4px; padding: 10px 14px; background: var(--card); border-radius: 12px;
  font-size: 13px; line-height: 1.45; color: var(--text); display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; }
.mb-howto dt { font-weight: 600; } .mb-howto dd { margin: 0; color: #c4c7c5; }
.ht-s { display: none; }
@media (max-width: 480px) { .mb-legend { padding: 0 2px; } .mb-howto dl { grid-template-columns: 1fr; gap: 2px; } .mb-howto dd { margin-bottom: 6px; }
  .ht-l { display: none; } .ht-s { display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center;
    border-radius: 50%; background: var(--pill); color: var(--text); font-weight: 700; } }
.mb-legend .lg { white-space: nowrap; }
.lg-sw { display: inline-block; width: 12px; height: 10px; border-radius: 2px; margin-right: 4px;
  vertical-align: -1px; }
.lg-sw.p-below { background: rgba(63, 185, 122, .88); } .lg-sw.p-above { background: rgba(229, 83, 75, .88); }
.lg-sw.p-inside { background: rgba(217, 164, 65, .85); }
.lg-sw.p-range { background: rgba(91, 157, 255, .22); box-shadow: inset 0 0 0 1px rgba(91, 157, 255, .7); }
.lg-l { color: #c9d1dc; font-weight: 700; }
/* the key with the letters' meaning ('S/M/W strength', round 3 of the review) keeps to one line on
   a phone: a little tighter there */
@media (max-width: 480px) {
  .mb-lg-row { gap: 3px 6px; font-size: 11px; }
  .lg-sw { width: 11px; margin-right: 3px; }
}
@media (max-width: 375px) {
  .mb-lg-row { gap: 3px 5px; font-size: 10.5px; letter-spacing: -.01em; }
  .lg-sw { width: 10px; margin-right: 2px; }
}
.lg-notch { display: inline-block; width: 0; height: 11px; border-left: 2px dashed #e6e9ee; margin: 0 5px 0 3px;
  vertical-align: -1px; }
.mb-row { display: block; background: var(--card); border: 1px solid transparent; border-radius: 16px;
  padding: 12px 14px 13px; margin: 0 0 14px; color: var(--text); text-decoration: none; }
.mb-row:hover { border-color: var(--line); }
@media (max-width: 480px) { .mb-row { padding: 10px 10px 11px; margin-bottom: 10px; } }  /* a phone: the room the rows need */
.mb-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.mb-coin { font-size: 15px; font-weight: 700; color: var(--text); }  /* the link to the coin's page */
.mb-coin .h-go { font-size: 16px; }
.mb-price { font-size: 22px; font-weight: 700; color: #9cc2ff; font-variant-numeric: tabular-nums;
  line-height: 1.15; }
.mb-asof { font-size: 11px; color: var(--warn); font-variant-numeric: tabular-nums; }
.mb-clock { margin-left: auto; font-size: 11.5px; border-radius: 999px; padding: 0 7px;
  background: #232a33; color: #c9d1dc; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mb-chip { display: inline-block; border-radius: 999px; padding: 1px 9px; font-size: 12.5px; font-weight: 650;
  border: 1px solid transparent; cursor: pointer; }
.mb-grey { background: #232a33; color: #aab3bf; }
.mb-amber { background: #3a3019; color: #f0c56a; border-color: #5a4a22; }
.mb-green { background: #173826; color: #7fe0a8; border-color: #245a3b; }
.mb-red { background: #3a1d1d; color: #ff8f86; border-color: #5a2a2a; }
/* the step line; its tap lists the steps, the current one marked */
.mb-step { display: inline-block; font-size: 12.5px; color: #c9d1dc; margin: 7px 0 0; cursor: pointer;
  border-bottom: 1px dotted #56606d; }
.mb-caret { color: var(--muted); font-size: 11px; }
.mb-steps { background: #11161c; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
  margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.mb-steps ol { margin: 5px 0 0; padding-left: 20px; }
.mb-steps li { margin: 2px 0; padding: 1px 4px; border-radius: 5px; }
.mb-steps li b { color: #c9d1dc; font-weight: 600; }
.mb-steps li.cur { background: rgba(217, 164, 65, .16); color: var(--text); }
.mb-steps li.cur b { color: #f0c56a; }
/* the verdict beside the clock (HOME_SECOND_TRY.md R6): quiet, secondary to the chip; on a phone
   it wraps to its own line under the header */
.mb-verdict { font-size: 12.5px; line-height: 17px; color: var(--text); cursor: pointer; white-space: normal;
  overflow-wrap: anywhere; text-decoration: underline dotted #56606d; text-underline-offset: 3px; }
.mb-verdict[data-key^="row"], .mb-verdict[data-key="hold"] { color: #c9d1dc; }
/* the progress line in the step line's place (E5): only while a count runs, one line on a desktop,
   at most two on a phone; a break counting in amber (the chip's "deciding"), closes inside muted */
.mb-track { font-size: 12.5px; line-height: 1.4; color: #c9d1dc; margin: 7px 0 0; overflow-wrap: anywhere; }
.mb-ts { cursor: pointer; border-bottom: 1px dotted #4a5260; }
.mb-ts.ts-break { color: #f0c56a; }
.mb-ts.ts-inside, .mb-ts.ts-retest { color: #c9d1dc; }
.mb-pl { font-weight: 600; color: #e6e9ee; }
.mb-ts.ts-break .mb-pl { color: #f0c56a; }
/* a band's two edges stay on one line ('83,328–83,600': the review of 9/30 split them at the dash) */
.nb { white-space: nowrap; }
@media (max-width: 480px) {
  .mb-verdict { flex-basis: 100%; }
  .mb-track { font-size: 12px; letter-spacing: -.01em; }
  /* the progress line's 'latest' goes on a phone, so it keeps to two lines; the tap says it is the
     latest close */
  .mb-tl { display: none; }
}
/* a narrower phone (360px): the progress line set tighter, still two lines */
@media (max-width: 375px) { .mb-track { font-size: 11.5px; letter-spacing: -.025em; }
  /* a small phone: 'redrawn' without its time (the bar's tag and the tap have it) */
  .mb-rt { display: none; } }
/* the status line (E4): one sentence of fact, then "Why it matters:" (its label set apart) */
.mb-what { font-size: 13.5px; line-height: 1.38; margin: 6px 0 0; color: #dfe4ea; }
.wm-l { font-weight: 600; color: #e6e9ee; }
/* a tap target that is open, and its why under its part of the card */
.wk-on { outline: 2px solid #9cc2ff; outline-offset: 1px; border-radius: 4px; }
.why-box.mb-whybox { margin: 6px 0 2px; color: #c9d1dc; }
/* THE RANGES BAR (board.ranges_bar, home.decorate): one equal slot per zone in price order, the
   current range (or the zone price is in) twice as wide; each block coloured by where it sits
   against the live price (green below: support; red above: resistance; amber while price is inside
   it: deciding), its saturation and letter its strength (S, M, W). The rows share one grid, so a
   block, its notch labels and its two edge prices share a column */
.rb { margin: 8px 0 0; }
.rb-row { display: grid; }
/* each rule row's price: a dashed amber notch at the edge of its zone, its label above, outward */
.rb-notes { position: relative; height: 23px; }  /* the price label, then 4px, then the line */
/* the live price over the blue line (9/29) */
.rb-pl { position: absolute; top: 0; font-size: 12px; font-weight: 700; color: #9cc2ff; line-height: 16px;
  white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; z-index: 3;
  padding: 0 3px; border-radius: 3px; background: var(--card, #161b22); }
/* a gap between two zones that is not the open range: open space, a thin dashed line */
.rb-gap { position: relative; cursor: pointer; }
.rb-gap i { position: absolute; left: 1px; right: 1px; top: 50%; border-top: 1px dashed #56606d; }
.rb-nl { position: absolute; top: 0; font-size: 10.5px; font-weight: 700; color: #e6e9ee; line-height: 15px;
  white-space: nowrap; font-variant-numeric: tabular-nums; cursor: pointer; padding: 0 2px; }
.rb-notch { position: absolute; top: -7px; bottom: -3px; width: 0; margin-left: -1px;
  border-left: 2px dashed #e6e9ee; pointer-events: none; z-index: 1; }
.rb-more { color: var(--muted); font-size: 11px; font-weight: 600; line-height: 13px; margin-top: 1px;
  cursor: pointer; white-space: nowrap; }
.rb-bar { position: relative; height: 26px; }
.rb-cell { position: relative; padding: 2px 1.5px; min-width: 0; cursor: pointer; }
.rb-cell.rb-range { background: rgba(91, 157, 255, .16); border: 1px solid rgba(91, 157, 255, .6);
  border-radius: 5px; padding: 3px; }
.rb-cell.rb-focus:not(.rb-range) { padding: 1px 1px; }
/* the wide zone: its letter in the corner, clear of the price marker */
.rb-focus .rb-z { justify-content: flex-start; padding-left: 5px; }
.rb-z { display: flex; align-items: center; justify-content: center; height: 100%; border-radius: 3px;
  font-size: 11px; font-weight: 800; }
.rb-z.p-below { background: rgba(63, 185, 122, .88); } .rb-z.p-above { background: rgba(229, 83, 75, .88); }
.rb-z.p-inside { background: rgba(217, 164, 65, .88); }
.rb-z.p-below.s-medium { background: rgba(63, 185, 122, .5); } .rb-z.p-above.s-medium { background: rgba(229, 83, 75, .5); }
.rb-z.p-inside.s-medium { background: rgba(217, 164, 65, .55); }
.rb-z.p-below.s-weak { background: rgba(63, 185, 122, .38); } .rb-z.p-above.s-weak { background: rgba(229, 83, 75, .38); }
.rb-z.p-inside.s-weak { background: rgba(217, 164, 65, .45); }
.rb-l { color: #0f1216; line-height: 1; }
.rb-z.s-medium .rb-l { color: #f2f4f7; } .rb-z.s-weak .rb-l { color: #dfe4ea; }
.rb-now { position: absolute; top: -3px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px;
  background: #5b9dff; box-shadow: 0 0 0 1px #0f1216; pointer-events: none; z-index: 2; }
/* each zone's ONE number (HOME_P0_P2.md Revision 4), at the edge that faces price with a small
   tick there: a support's top at its right edge, a resistance's bottom at its left, the zone price
   is inside both; at least 12px, weight 500, in the zone's colour */
.rb-labs { font-size: 12px; line-height: 14px; }
.rb-lab { display: flex; flex-direction: column; align-items: stretch; min-width: 0; padding-top: 2px;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.rb-nums { display: flex; }
.rb-nums.f-top { justify-content: flex-end; } .rb-nums.f-bottom { justify-content: flex-start; }
.rb-nums.f-both { justify-content: space-between; column-gap: 6px; }
.rb-num { font-weight: 500; letter-spacing: -.025em; line-height: 14px; }
.rb-num.f-r { border-right: 1.5px solid currentColor; padding-right: 1.5px; }
.rb-num.f-l { border-left: 1.5px solid currentColor; padding-left: 1.5px; }
/* the zone price is in: both edges, each inset from its border, clear of the neighbours' numbers */
.rb-nums.f-both { padding: 0 2px; }
/* a narrower phone (360px): the same 12px, set tighter */
@media (max-width: 375px) { .mb-row { padding-left: 8px; padding-right: 8px; }
  .rb-num { letter-spacing: -.06em; } .rb-num.f-r { padding-right: 1px; } .rb-num.f-l { padding-left: 1px; }
  .rb-nums.f-both { padding: 0 1px; } }
.rb-lab.p-below { color: #86c9a2; } .rb-lab.p-above { color: #e39a95; } .rb-lab.p-inside { color: #f0c56a; }
.rb-lab.s-weak { color: var(--muted); }
/* a zone's history, small, under its number ("broke ↑ 04:00", "was support") */
.rb-tag { font-size: 11px; line-height: 12px; color: #c9d1dc; white-space: normal; text-align: center;
  letter-spacing: 0; margin-top: 2px; max-width: 100%; cursor: pointer; border-bottom: 1px dotted #56606d; }
/* the open range: its name (its ends are its neighbours' numbers) */
.rb-lab-range { align-items: center; }
.rb-rl { text-align: center; font-size: 10.5px; font-weight: 700; color: #9cc2ff; letter-spacing: 0; }
/* THE EVENT TAPE (Revision 3; newest first since 9/29): 'now <price>' first, then the tiles
   newest to oldest, '‹' between them; green an up move, red a down move; the row fits the card (coach.js tapeFit folds
   the oldest holds, then retests, then the oldest tiles: never a sideways scroll) */
.mb-tape { margin: 9px 0 0; }
.mb-tape-none { font-size: 12.5px; color: var(--muted); }
.tp-row { display: flex; align-items: center; overflow: hidden; gap: 0; }
.tp-cut { flex: none; color: var(--muted); font-size: 13px; padding: 0 0 0 3px; }
.tp-w { display: inline-flex; align-items: center; flex: none; }
.tp { display: inline-flex; flex-direction: column; flex: none; padding: 3px 5px 3px; border-radius: 6px;
  border: 1px solid transparent; cursor: pointer; line-height: 1.2; }
.tp b { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp i { font-style: normal; font-size: 10.5px; color: #c9d1dc; white-space: nowrap; }
.tp-up { background: #173826; border-color: #245a3b; } .tp-up b { color: #7fe0a8; }
.tp-down { background: #3a1d1d; border-color: #5a2a2a; } .tp-down b { color: #ff8f86; }
/* a failed break's run's end: a high or a low, nobody's win (E8) */
.tp-run { background: #26282b; border-color: #4a4e54; } .tp-run b { color: #e3e3e3; }
/* a tile whose zone was redrawn away (HOME_SECOND_TRY.md R5d): muted grey, still readable */
.tp.tp-gone { background: #1d2229; border-color: #353c46; } .tp.tp-gone b { color: #b4bcc7; }
.tp.tp-gone i { color: #9aa4b1; }
.tp-sep { color: var(--muted); font-size: 13px; padding: 0 2px; }
.tp-now { flex: none; font-size: 12px; color: #9cc2ff; white-space: nowrap; padding-right: 1px; }
.tp-now b { font-variant-numeric: tabular-nums; }
/* a phone: the time under the two words, 'now' over the price, so three tiles fit at 390px */
@media (max-width: 480px) {
  .tp i { display: flex; flex-direction: column; line-height: 1.15; }
  .tp-dot { display: none; }
  .tp-now { display: inline-flex; flex-direction: column; line-height: 1.15; font-size: 11px; }
  .tp-now b { font-size: 12.5px; }
}
/* THE POSITION STRIP at the bottom of the card (Revision 3): slim, accent-tinted, bordered */
.mb-pos { margin: 10px -3px -3px; padding: 5px 8px; border: 1px solid #34465e; border-radius: 7px;
  background: rgba(91, 157, 255, .1); font-size: 13px; line-height: 1.35; display: flex; flex-wrap: wrap;
  align-items: baseline; gap: 0 4px; }
.mb-det { margin-left: auto; padding-left: 10px; font-size: 12.5px; white-space: nowrap; }
.mb-pos-l { font-size: 10px; font-weight: 700; letter-spacing: .06em; color: #9cc2ff; margin-right: 4px; }
.mb-pos-flat .mb-pos-t { color: var(--muted); }
/* WHAT CHANGES IT (and at the top of the coin page), 10/7: one list, ▲ on top, thin dividers, no
   boxes; a row: its glyph, its outcome and the close at one price, then what it means (muted), and
   on the right how far price is from it. Green the buyers' side, red the sellers' */
.mb-rules { margin: 9px 0 0; }
.mb-rule { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 8px; align-items: baseline;
  font-size: 13.5px; line-height: 1.38; padding: 6px 0; border-top: 1px solid var(--line); cursor: pointer; }
.mb-rules .mb-sec + .mb-rule { border-top: 0; }
.mr-g { font-size: 11px; }
.mr-l { font-weight: 600; }
.t-up .mr-g, .t-up .mr-l { color: #7fe0a8; }
.t-down .mr-g, .t-down .mr-l { color: #ff8f86; }
.t-mid .mr-g { color: var(--muted); }
.mr-c { color: var(--text); }
.mr-s { color: var(--muted); font-size: 12.5px; margin-top: 1px; }
.mr-d { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mr-here, .mr-now { font-size: 11px; padding: 1px 6px; border-radius: 6px; }
.mr-here { background: rgba(91, 157, 255, .16); color: #9cc2ff; }
.mr-now { background: rgba(240, 197, 106, .16); color: #f0c56a; }
/* a rule's counter while it counts ("1 of 2 ☑☐") */
/* the counter at the end of its own row's text, inline (round 3 of the review: floated right, it
   dropped under a full row and sat between the ↓ and ↑ rows on a desktop) */
.mb-count { display: inline-block; margin-left: 6px; font-size: 12px; font-weight: 700; color: #f0c56a;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
.stale .mb-chip, .stale .mb-rule { opacity: .45; }
/* the live price left the wide slot or passed a rule's price: the chip is the last view's, and
   says so ("· updating") until the next one */
.mb-chip.mb-moved, .mb-what.mb-moved { opacity: .6; }
.mb-upd { font-size: 11px; color: var(--muted); }
/* the coin page's top: the home card's chip and sentence */
.c-now { font-size: 13.5px; line-height: 1.4; margin: 2px 0 4px; }
.c-what { color: #dfe4ea; }
.c-rules { margin: 4px 0 8px; max-width: 720px; }
.c-rules .mb-rules { margin: 0; }
/* the details that moved off home (HOME_P0_P2.md "COIN PAGE"): the position details, then the rule
   tracker, the last 6 closes and what changed today behind their toggles */
.c-pos { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px;
  margin: 8px 0; max-width: 720px; font-size: 13.5px; line-height: 1.45; }
.c-pos-ticket code { font-size: 12.5px; color: var(--text); }
.copy { font: inherit; font-size: 12px; background: #1d2a3d; color: var(--text); border: 1px solid #34465e;
  border-radius: 6px; padding: 2px 10px; min-height: 28px; cursor: pointer; margin-left: 4px; }
.c-pos-at { color: var(--muted); }
.c-det .c-lad-body { max-width: 720px; }
.c-tr { margin: 4px 0 8px; } .c-tr-h { color: #dfe4ea; }
.c-ck { color: var(--muted); padding-left: 10px; font-variant-numeric: tabular-nums; }
.c-ck.done { color: #f0c56a; }
.c-reset { color: var(--muted); font-size: 12.5px; padding-left: 10px; }
.c-cl, .c-log { font-variant-numeric: tabular-nums; margin: 2px 0; }
.c-cl-t { color: var(--muted); display: inline-block; min-width: 42px; }
.c-cl-w { color: var(--muted); }
.c-cl-s { margin-top: 4px; color: #dfe4ea; }

/* the view predates the latest 15m close: its chip and rows are about a candle that closed, until
   the next view lands (bug hunt 9/29 item 16) */
.mb-passed .mb-chip, .mb-passed .mb-rules, .mb-passed .mb-what, .mb-passed .mb-verdict, .mb-passed .mb-track,
#coin .c-rules.passed { opacity: .55; }
.stale .mb-verdict, .stale .mb-track { opacity: .45; }
.mb-wait { color: var(--muted, #888); font-size: 12px; }

/* HOME_SPCX.md S2: SPCX's zones are unproven, said once beside its chip (grey, quiet) */
.mb-unproven { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px; font-size: 12px;
  color: var(--muted, #8b949e); border: 1px solid var(--line); cursor: pointer; white-space: nowrap; }

/* ---------- the chat panel (chat.py, CHAT.md): on the right on a wide screen, the whole screen on a phone ---------- */
.chat-open { position: fixed; right: 16px; bottom: 16px; z-index: 40; padding: 9px 16px; border-radius: 20px;
  border: 1px solid var(--line); background: #1f6feb; color: #fff; font-size: 14px; font-weight: 600;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.chat { position: fixed; z-index: 50; top: 0; right: 0; bottom: 0; width: 380px; max-width: 100vw; display: flex;
  flex-direction: column; background: var(--card, #161b22); border-left: 1px solid var(--line);
  box-shadow: -4px 0 16px rgba(0,0,0,.35); }
.chat[hidden] { display: none; }
.chat-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.chat-head b { flex: 1; }
.chat-head button { background: none; border: 1px solid var(--line); color: inherit; border-radius: 6px;
  padding: 3px 8px; cursor: pointer; font-size: 13px; }
.chat-head .chat-x { font-size: 18px; line-height: 1; padding: 2px 8px; }
.chat-key { padding: 12px; font-size: 14px; }
.chat-key p { margin: 0 0 8px; }
.chat-keyform, .chat-form { display: flex; gap: 8px; }
.chat-keyin { flex: 1; min-width: 0; }
.chat-keyerr { color: #f85149; }
.chat-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 14px; }
.chat-turn { display: flex; flex-direction: column; gap: 6px; }
.chat-q { align-self: flex-end; max-width: 85%; background: #1f6feb33; border: 1px solid #1f6feb66; border-radius: 10px;
  padding: 6px 10px; white-space: pre-wrap; }
.chat-q:empty { display: none; }
.chat-a { white-space: pre-wrap; line-height: 1.45; }
.chat-err { color: #f0883e; }
.chat-form { padding: 10px 12px; border-top: 1px solid var(--line); }
.chat-form[hidden] { display: none; }
.chat-in { flex: 1; min-width: 0; resize: none; font: inherit; padding: 6px 8px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--pill); color: inherit; }
.chat-form button, .chat-keyform button { padding: 6px 14px; border-radius: 6px; border: 0; background: #1f6feb; color: #fff; cursor: pointer; }
.chat-form button:disabled { opacity: .5; cursor: default; }
@media (max-width: 1099px) { .chat { width: 100vw; border-left: 0; } }
/* docked: the page's right-hand column, always open, as tall as the window */
.chat.docked { position: sticky; top: 12px; flex: 0 0 400px; width: 400px; height: calc(100vh - 88px);
  z-index: 1; border: 0; border-left: 1px solid var(--line); border-radius: 0; box-shadow: none;
  background: transparent; }
.chat.docked .chat-x { display: none; }
.chat.docked .chat-head { border-bottom: 0; padding-top: 4px; padding-bottom: 12px; }
.chat.docked .chat-head, .chat.docked .chat-key, .chat.docked .chat-log, .chat.docked .chat-form,
.chat.docked .chat-empty { padding-left: 20px; padding-right: 0; }
.chat-title { font-size: 26px; font-weight: 400; }
.chat-empty { padding: 4px 12px 8px; display: flex; flex-direction: column; gap: 10px; }
.chat-empty h3 { font-size: 20px; font-weight: 500; margin: 8px 0 6px; }
.chat-sug { text-align: left; font: inherit; color: var(--text); background: var(--card); border: 0;
  border-radius: 16px; padding: 12px 16px; cursor: pointer; }
.chat-sug:hover { background: var(--pill); }
.chat-form { border-top: 0; }
.chat-form { align-items: center; }
.chat-in { border-radius: 24px; border: 0; background: var(--pill); padding: 11px 16px; min-height: 44px;
  max-height: 140px; line-height: 22px; }
.chat-form button { height: 40px; padding: 0 18px; }
.chat-form button, .chat-keyform button { border-radius: 20px; background: #a8c7fa; color: #062e6f; font-weight: 600; }
.chat-q { background: var(--pill); border: 0; border-radius: 16px; }

/* the sections' titles (the trader, 10/1: "logically isolate these sections") */
.mb-sec { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  margin: 8px 0 3px; }
.mb-sec-n { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 4px; }

.vd-l { color: var(--muted); }  /* 'If it closed now at 84,600:' (10/1) */