/* ════════════════════════════════════════════════════════════
   mobile.css — only loaded at viewports <=768px (via media link).
   Desktop browsers never download this file. All overrides and
   mobile-only components live here so they can be ripped out by
   removing the <link> tag.
   ════════════════════════════════════════════════════════════ */

:root {
  /* tighter gutters for narrow screens */
  --gutter-x: 14px;
}

/* ── reveal mobile-only DOM nodes ─────────────────────────── */
.m-compare-cards { display: flex; flex-direction: column; gap: 8px; }

/* leave space at the bottom of the page for the fixed dock; clip horizontal
   overflow defensively so wide intrinsic-content panels can't push the
   document past the viewport (which would offset position:fixed elements). */
html, body { overflow-x: clip; }
body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }

/* ── topbar ───────────────────────────────────────────────── */
.brand-sub { display: none; }
.brand-name { font-size: 12px; }
.brand-mark { width: 24px; height: 24px; }
.brand-mark svg { width: 24px; height: 24px; }

.topbar-inner { gap: 12px; padding: 10px var(--gutter-x); }
.topbar-right { gap: 8px; }
.lang-toggle button { padding: 4px 8px; }
.clock { display: none; }

/* ── market pulse ─────────────────────────────────────────── */
.mp-head { flex-wrap: wrap; gap: 8px 12px; }
.mp-title { gap: 8px; }
.mp-sub { font-size: 10px; }
.mp-countdown { font-size: 10px; }

/* cross-asset card: stack the 3 sub-columns vertically so each gets a full-width sparkline */
.mp-card[data-card="cross"] .mp-cross-grid {
  grid-template-columns: 1fr;
  gap: 4px;
}
.mp-card[data-card="cross"] .mp-cross-grid > div {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.mp-card[data-card="cross"] .mp-cross-lbl { flex: 0 0 36px; }
.mp-card[data-card="cross"] .mp-cross-v   { flex: 0 0 auto; min-width: 110px; }
.mp-card[data-card="cross"] .mp-cross-spark {
  flex: 1 1 auto;
  height: 16px;
  margin-top: 0;
}

/* hover tip is hover-only — useless on touch. mobile.js opens the
   bottom sheet on tap instead, so just hide the inline tip. */
.mp-tip { display: none; }
.opt-tip { display: none; }

/* watch-strip: keep horizontal scroll */
.watch-strip-head { gap: 10px; }
.watch-strip-sub { font-size: 10px; }
.ticker-pill { flex-basis: 96px; min-height: 70px; }
.ticker-pill .px { font-size: 12px; }
/* search card collapses to an icon-only chip on touch; tap to expand */
.rail-search {
  flex: 0 0 52px;
  width: 52px;
  padding: 0;
  justify-content: center;
  align-items: center;
  gap: 0;
  overflow: hidden;
  transition: flex-basis 220ms ease, width 220ms ease, padding 220ms ease, gap 220ms ease;
}
.rail-search input {
  width: 0;
  flex: 0 0 0;
  padding: 0;
  transition: width 220ms ease, padding 220ms ease;
}
.rail-search-icon { font-size: 20px; transition: font-size 200ms; }
.rail-search.expanded {
  flex-basis: 240px;
  width: 240px;
  padding: 0 14px;
  justify-content: flex-start;
  gap: 10px;
}
.rail-search.expanded input {
  width: auto;
  flex: 1 1 auto;
  padding: 8px 4px;
}
.rail-search.expanded .rail-search-icon { font-size: 18px; }

/* ── main layout: hero / stats / panels ───────────────────── */
.layout { gap: 14px; padding: 14px var(--gutter-x) 24px; }
.hero { padding: 16px; }
.hero-head { gap: 12px; margin-bottom: 16px; }
.symbol { font-size: 32px; }
.earnings-node {
  flex: 0 1 100%;
  align-items: flex-start;
  gap: 3px;
  min-width: 0;
  min-height: 0;
  white-space: normal;
}
.earnings-table-wrap { width: 100%; }
.price { font-size: 28px; }
.chart-wrap { height: 320px; }

.range-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
.range-tabs::-webkit-scrollbar { display: none; }
.range-tabs button { flex: 0 0 auto; }

.stats-grid { grid-template-columns: 1fr 1fr; }
@media (max-width: 420px) { .stats-grid { grid-template-columns: 1fr; } }
/* horizontal label/value rows on mobile so 17 metrics don't push the
   chart so far up the screen. */
.stats-grid .stat {
  padding: 9px 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.stats-grid .stat .lbl {
  margin-bottom: 0;
  font-size: 10px;
  letter-spacing: 0.6px;
  flex: 0 1 auto;
  min-width: 0;
}
.stats-grid .stat .val {
  font-size: 14px;
  text-align: right;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* options 3D — keep but allow it to shrink */
.options-panel { padding: 14px var(--gutter-x); }
.options-summary { grid-template-columns: 1fr 1fr; gap: 6px; }
.options-3d-wrap { height: 320px; }

/* ── compare: hide the table, show the card list instead ─── */
.compare-panel { padding: 14px var(--gutter-x); }
.compare-panel .panel-head {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.compare-tools {
  margin-left: 0;
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.compare-tools select { flex: 1 1 0; min-width: 0; }
.compare-table-wrap { display: none; }
.compare-chips-row { flex-direction: column; align-items: stretch; gap: 8px; }
.compare-chips { flex-wrap: wrap; }
/* desktop has `flex: 0 0 200px` for the row layout — that becomes a 200px
   *height* once we flip the row to flex-direction: column on mobile. */
.compare-add { flex: 0 0 auto; width: 100%; }

.m-compare-cards .m-cmp-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.m-compare-cards .m-cmp-card.active {
  border-color: var(--accent);
  background: var(--accent-dim);
}
.m-compare-cards .m-cmp-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.m-compare-cards .m-cmp-sym {
  font-family: 'JetBrains Mono'; font-weight: 600; font-size: 14px;
  letter-spacing: 1px; color: var(--text);
}
.m-compare-cards .m-cmp-active-tag {
  font-family: 'JetBrains Mono'; font-size: 10px; letter-spacing: 1px;
  color: var(--accent);
}
.m-compare-cards .m-cmp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}
.m-compare-cards .m-cmp-cell {
  display: flex; justify-content: space-between; gap: 6px;
  font-size: 12px;
  color: var(--text-dim);
}
.m-compare-cards .m-cmp-cell .lbl { color: var(--text-faint); font-family: 'JetBrains Mono'; font-size: 11px; }
.m-compare-cards .m-cmp-cell .val { color: var(--text); font-family: 'JetBrains Mono'; font-variant-numeric: tabular-nums; }

/* ── verdict ──────────────────────────────────────────────── */
.verdict-panel { padding: 14px var(--gutter-x); }

/* ── footer ───────────────────────────────────────────────── */
.foot {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 16px var(--gutter-x) 20px;
}

/* ════════════════════════════════════════════════════════════
   mobile-only components: bottom dock + bottom sheet
   ════════════════════════════════════════════════════════════ */

.m-dock {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  background: rgba(15, 17, 21, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 6px var(--gutter-x) calc(6px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}
.m-dock a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px;
  text-decoration: none;
  color: var(--text-faint);
  font-family: 'JetBrains Mono';
  transition: color 120ms;
  min-width: 0;
  overflow: hidden;
}
.m-dock a.active { color: var(--accent); }
.m-dock-ic { font-size: 16px; line-height: 1; }
.m-dock-lb { font-size: 10px; letter-spacing: 0.5px; }

.m-sheet {
  position: fixed; inset: 0;
  z-index: 100;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.m-sheet[hidden] { display: none; }
.m-sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  animation: m-fade-in 160ms ease-out;
}
.m-sheet-panel {
  position: relative;
  background: var(--bg-1);
  border-top: 1px solid var(--line-2);
  padding: 8px var(--gutter-x) calc(20px + env(safe-area-inset-bottom, 0px));
  max-height: 80vh;
  overflow-y: auto;
  animation: m-sheet-up 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.m-sheet-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: var(--line-2);
  margin: 4px auto 14px;
}
.m-sheet-head {
  color: var(--accent);
  font-family: 'JetBrains Mono';
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px; margin-bottom: 10px;
}
.m-sheet-body {
  font-family: 'JetBrains Mono';
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-dim);
}
.m-sheet-body strong { color: var(--text); font-weight: 500; }

@keyframes m-fade-in   { from { opacity: 0; }              to { opacity: 1; } }
@keyframes m-sheet-up  { from { transform: translateY(100%); } to { transform: translateY(0); } }