/* The Market Map (site/map.js): a full-screen view over the chart app, in the site's colours. */
#fmap { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: var(--bg); color: var(--text); }
#fmap[hidden] { display: none; }
body.mapopen { overflow: hidden; }
#fmap svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.fm-bar { height: 52px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.fm-back { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 7px 10px 7px 6px; border-radius: 9px; color: var(--dim); font: 600 13px Geist, sans-serif; }
.fm-back:hover { background: var(--hover); color: var(--text); }
.fm-title { font: italic 800 15px Outfit, Geist, sans-serif; letter-spacing: .02em; white-space: nowrap; }
.fm-sub { color: var(--faint); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fm-find { margin-left: auto; display: flex; align-items: center; gap: 6px; height: 34px; width: 200px; padding: 0 10px; border: 1px solid var(--line2); border-radius: 9px; background: var(--bg2); color: var(--dim); flex: none; }
.fm-find input { all: unset; flex: 1; min-width: 0; color: var(--text); font: 500 13px Geist, sans-serif; }

.fm-body { flex: 1; min-height: 0; display: flex; position: relative; }
.fm-body canvas { flex: 1; min-width: 0; height: 100%; display: block; cursor: grab; touch-action: none;
                  background: radial-gradient(circle at 50% 50%, rgba(122,92,255,.07), transparent 60%); }
.fm-msg { position: absolute; left: 0; right: 340px; top: 45%; text-align: center; color: var(--dim); font: 500 14px Geist, sans-serif; padding: 0 20px; pointer-events: none; }
.fm-msg[hidden] { display: none; }

.fm-side { width: 340px; flex: none; overflow-y: auto; border-left: 1px solid var(--line); background: var(--panel); padding: 14px 16px 24px; font-size: 13px; }
.fm-side h3 { margin: 18px 0 8px; font: 700 11px Geist, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.fm-side h3:first-child { margin-top: 2px; }
.fm-dim { color: var(--dim); margin: 0 0 8px; line-height: 1.5; }
.fm-note { color: var(--faint); font-size: 11.5px; line-height: 1.5; margin-top: 18px; }
.fm-ins { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; padding: 9px 11px; margin-bottom: 6px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); line-height: 1.45; }
.fm-ins:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.fm-row { all: unset; box-sizing: border-box; display: flex; align-items: baseline; gap: 8px; width: 100%; cursor: pointer; padding: 7px 4px; border-bottom: 1px solid var(--line); }
.fm-row span { color: var(--faint); font-size: 12px; } .fm-row em { margin-left: auto; font-style: normal; font-weight: 600; }
.fm-key { list-style: none; padding: 0; margin: 0; color: var(--dim); line-height: 1.45; }
.fm-key li { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.fm-key i { flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%; }
.k-ring { border: 1.5px dashed var(--line2); }
.k-line { border-radius: 0 !important; height: 2px !important; margin-top: 9px !important; background: var(--accent); }
.k-size { background: radial-gradient(circle, var(--bg2) 50%, var(--up) 52%); box-shadow: 0 0 8px var(--up); }
.k-lead { border-radius: 0 !important; height: 0 !important; margin-top: 9px !important; border-top: 2px dashed #FDE725; }

.fm-x { all: unset; cursor: pointer; color: var(--dim); font: 600 12.5px Geist, sans-serif; padding: 4px 0 12px; }
.fm-x:hover { color: var(--text); }
.fm-coin { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.fm-coin img, .fm-coin i { width: 38px; height: 38px; border-radius: 50%; background: var(--bg2); display: grid; place-items: center; font: 700 11px Geist, sans-serif; font-style: normal; color: var(--dim); }
.fm-coin b { display: block; font: 800 18px Outfit, Geist, sans-serif; } .fm-coin span { color: var(--dim); font-size: 12px; }
.fm-coin em { margin-left: auto; font: 700 16px Geist, sans-serif; font-style: normal; }
.fm-stat { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.fm-stat span { color: var(--dim); } .fm-stat b { text-align: right; text-transform: capitalize; }
.fm-stat em { grid-column: 1 / -1; font-style: normal; color: var(--faint); font-size: 12px; }
.fm-stat .tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.tag.dn { background: var(--down-bg); color: var(--down); } .tag.up { background: var(--up-bg); color: var(--up); }
.fm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fm-chip { all: unset; cursor: pointer; display: inline-flex; gap: 6px; align-items: baseline; padding: 5px 10px; border-radius: 99px; border: 1px solid var(--line2); font: 600 12.5px Geist, sans-serif; }
.fm-chip em { font-style: normal; font-weight: 500; color: var(--faint); font-size: 11px; }
.fm-chip:hover { border-color: var(--accent); }
.fm-open { all: unset; box-sizing: border-box; display: block; width: 100%; text-align: center; cursor: pointer; margin-top: 20px; padding: 11px; border-radius: 11px;
           background: var(--accent); color: #fff; font: 700 14px Geist, sans-serif; }
.fm-open:hover { filter: brightness(1.1); }

/* phone: the map on top, the panel as a sheet below; it grows when a coin is picked */
@media (max-width: 860px) {
  .fm-bar { gap: 8px; padding: 0 8px; }
  .fm-sub { display: none; }
  .fm-find { width: auto; flex: 1; max-width: 220px; }
  .fm-back span { display: none; }
  .fm-body { flex-direction: column; }
  .fm-body canvas { flex: 1 1 auto; min-height: 0; }
  .fm-msg { right: 0; top: 30%; }
  .fm-side { width: auto; height: 38%; flex: none; border-left: 0; border-top: 1px solid var(--line2); border-radius: 16px 16px 0 0; padding: 12px 16px calc(20px + env(safe-area-inset-bottom)); }
  #fmap.picked .fm-side { height: 52%; }
  #mapBtn { display: none !important; }      /* in the "more" sheet instead */
}

/* bubbles view (Oct 22 2026): view switch and timeframe chips in the bar */
.fm-seg { display: inline-flex; flex: none; padding: 3px; gap: 2px; border: 1px solid var(--line2); border-radius: 10px; background: var(--bg2); }
.fm-seg button { all: unset; cursor: pointer; padding: 5px 10px; border-radius: 7px; color: var(--dim); font: 600 12.5px Geist, sans-serif; }
.fm-seg button:hover { color: var(--text); }
.fm-seg button.on { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); }
#fmap .fm-body canvas { cursor: default; background: radial-gradient(circle at 50% 45%, rgba(122,92,255,.05), transparent 65%); }
.k-fam { background: radial-gradient(circle, rgba(122,92,255,.45), rgba(122,92,255,0) 70%); }
.fm-tfrow span.on { border-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.fm-tfrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 14px; }
.fm-tfrow span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 4px; border: 1px solid var(--line); border-radius: 9px; font-weight: 700; }
.fm-tfrow small { color: var(--faint); font: 600 10.5px Geist, sans-serif; letter-spacing: .06em; }
.fm-tfrow .up { color: var(--up); } .fm-tfrow .dn { color: var(--down); }
@media (max-width: 860px) {
  /* two rows on a phone: back, title, search / the view switch and the timeframes */
  .fm-bar { height: auto; flex-wrap: wrap; row-gap: 8px; padding: 8px 10px; }
  .fm-title { white-space: nowrap; }
  .fm-find { order: 3; flex: 1 1 120px; max-width: none; }
  .fm-tfs { order: 4; }
  .fm-seg button { padding: 5px 9px; }
}