/* RangeTrades: the narrow header and the charts view (#/chart/<coin>, charts.js, CHARTS_VIEW.md) */

/* the header, one narrow row for both views (the trader, 10/7, on CoinMarketCap's 38px bar: "I also
   like how the header is narrow"): the name, Board | Charts, the coin tabs (charts view), the status */
header.top { min-height: 44px; gap: 14px; border-bottom: 1px solid #222428; }
header.top .brand { font-size: 18px; }
header.top a { min-height: 36px; }
.view-sw { display: inline-flex; background: #1b1c1e; border-radius: 8px; padding: 2px; }
header.top .view-sw a { min-height: 26px; padding: 0 12px; border-radius: 6px; color: var(--muted); font-size: 13px; }
header.top .view-sw a.on { background: #2b2d30; color: var(--text); }
.coin-tabs { display: none; align-items: stretch; gap: 2px; overflow-x: auto; scrollbar-width: none; }
body.view-chart .coin-tabs { display: inline-flex; }
header.top .ctab { gap: 6px; padding: 0 10px; color: var(--muted); font-size: 13px; white-space: nowrap;
  border-bottom: 2px solid transparent; border-radius: 0; min-height: 42px; }
header.top .ctab.on { color: var(--text); border-bottom-color: var(--blue); }
.ctab-px { font-variant-numeric: tabular-nums; color: inherit; }
.ctab-dot { width: 7px; height: 7px; border-radius: 50%; padding: 0; border: 0; }
.ctab-dot.mb-grey { background: #7d8590; } .ctab-dot.mb-amber { background: #d9a441; }
.ctab-dot.mb-green { background: #3fb97a; } .ctab-dot.mb-red { background: #e5534b; }
.chat.docked { height: calc(100vh - 60px); }
.live-dot { color: #3fb97a; }

/* the charts view: the main column takes the width the chat leaves */
body.view-chart main { max-width: none; padding-top: 8px; }
.ch-bar { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; padding: 0 0 6px; }
.ch-bar button { background: none; border: 0; color: var(--muted); font: inherit; font-size: 13px; padding: 4px 9px;
  border-radius: 6px; cursor: pointer; min-height: 30px; }
.ch-bar button:hover { color: var(--text); background: #1b1c1e; }
.ch-bar button.on { color: var(--text); background: #2b2d30; }
.ch-layers button.on { color: #c8dcff; background: #1d2a40; }
.ch-sep { width: 1px; height: 18px; background: #2a2d31; margin: 0 8px; }
.ch-wrap { position: relative; border: 1px solid #222428; border-radius: 10px; overflow: hidden; }
.ch-chart { height: calc(100vh - 330px); min-height: 340px; }
.ch-legend { position: absolute; top: 8px; left: 10px; z-index: 3; display: flex; gap: 10px; align-items: baseline;
  font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; pointer-events: none; }
.ch-legend b { color: var(--text); font-weight: 600; }
.ch-why { position: absolute; left: 10px; right: 90px; bottom: 36px; z-index: 4; background: #1e1f20ee;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font-size: 13px; line-height: 1.45; cursor: pointer; }
.ch-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2;
  color: var(--muted); pointer-events: none; }

/* under the chart: the board's reading of the coin */
.ch-read { padding: 10px 2px 0; }
.ch-top { display: flex; align-items: center; gap: 12px; }
.ch-what { margin: 8px 0 4px; line-height: 1.5; }
.ch-verdict, .ch-prog, .ch-pos { margin: 4px 0; }
.ch-verdict[data-why], .ch-prog[data-why], .ch-rule[data-why] { cursor: pointer; }
.ch-rules { margin: 8px 0 4px; display: flex; flex-direction: column; gap: 4px; }
.ch-rule { display: flex; gap: 8px; align-items: baseline; font-size: 13.5px; }
.ch-arrow { width: 14px; flex: 0 0 14px; text-align: center; font-size: 11px; }
.ch-count { margin-left: auto; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.ch-asks { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.ch-asks .chat-sug { padding: 7px 12px; border-radius: 16px; border: 1px solid var(--line); background: none;
  color: var(--text); font-size: 13px; cursor: pointer; }
.ch-asks .chat-sug:hover { background: #1b1c1e; }

@media (max-width: 1099px) {
  .ch-chart { height: 56vh; min-height: 300px; }
  .ch-legend { font-size: 11px; gap: 6px; }
}
@media (max-width: 480px) {
  /* a phone: the name and Board | Charts, then the coin tabs; the status line stays on the board */
  body.view-chart .top-meta { display: none; }
  .coin-tabs { order: 3; width: 100%; }
  header.top .ctab { min-height: 36px; padding: 0 8px; }
  .ch-legend .lg-ohl { display: none; }
}

/* the address box and alerts (viewer.js, AWS_PLAN.md) */
.addr-box { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; position: relative; }
.addr-form { display: inline-flex; gap: 6px; }
.addr-in { width: 300px; max-width: 46vw; padding: 5px 9px; border-radius: 7px; border: 1px solid var(--line);
  background: #1b1c1e; color: var(--text); font: inherit; font-size: 12.5px; }
.addr-form button, .addr-box button, .alerts-btn { background: #1b1c1e; border: 1px solid var(--line); color: var(--text);
  border-radius: 7px; padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.addr-on { font-variant-numeric: tabular-nums; color: var(--text); background: #1d2a40; border-radius: 7px; padding: 4px 9px; }
.addr-x { padding: 2px 8px !important; }
.addr-err { position: absolute; top: 100%; left: 0; margin-top: 4px; color: #ff8f86; font-size: 12px; white-space: nowrap; }
.alerts-btn.on { color: #7fe0a8; border-color: #245a3b; }
.alerts-tip { position: absolute; top: 46px; right: 16px; z-index: 60; max-width: 340px; background: #1e1f20; border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.4; box-shadow: 0 4px 16px rgba(0,0,0,.4); }
header.top { position: relative; }
@media (max-width: 760px) {
  header.top { flex-wrap: wrap; }
  .addr-box { order: 4; width: 100%; padding-bottom: 6px; }
  .addr-form { width: 100%; } .addr-in { flex: 1; width: auto; max-width: none; }
}
.chat-info { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 4px;
  border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--muted); font: italic 600 11px/1 Georgia, serif;
  cursor: pointer; padding: 0; vertical-align: 1px; }
.chat-info-text { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; }
.alerts-test { margin: 6px 0 10px; } .alerts-test button, .alerts-acts button { background: #1b1c1e; border: 1px solid var(--line);
  color: var(--text); border-radius: 7px; padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.alerts-acts { margin-top: 8px; display: flex; gap: 8px; }