/* =================== MARKETS PAGE =================== */
.mk-controls{
  margin-top:44px; padding:24px 0 6px;
  border-top:1px solid var(--line-on-paper);
  border-bottom:1px solid var(--line-on-paper);
}
.mk-ctrl-row{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}

.mk-view{ display:flex; gap:8px; }
.mk-view-btn{
  width:38px; height:38px; padding:8px;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; cursor:pointer;
  border:1px solid var(--line-on-paper); border-radius:2px;
  color:var(--ink-soft);
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.mk-view-btn svg{ width:100%; height:100%; fill:currentColor; }
.mk-view-btn:hover{ border-color:rgba(18,20,26,.4); color:var(--ink); }
.mk-view-btn.active{ color:var(--gold-500); border-color:var(--gold-500); background:rgba(214,158,39,.09); }

.mk-markets{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.mk-check{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-family:var(--f-mono); font-size:.85rem; letter-spacing:.04em;
}
.mk-soon{
  margin:0; font-family:var(--f-mono); font-size:.7rem;
  color:var(--ink-soft); opacity:.75;
}

/* shared checkbox look */
.mk-check input,
.mk-opt input{
  appearance:none; -webkit-appearance:none;
  position:relative; flex:0 0 auto;
  width:16px; height:16px; margin:0;
  border:1px solid rgba(18,20,26,.35); border-radius:2px;
  background:transparent; cursor:pointer;
  transition:background .18s ease, border-color .18s ease;
}
.mk-check input:checked,
.mk-opt input:checked{ background:var(--gold-500); border-color:var(--gold-500); }
.mk-check input:checked::after,
.mk-opt input:checked::after{
  content:''; position:absolute; left:4px; top:.5px;
  width:4px; height:9px;
  border:solid var(--navy-950); border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

/* ---- per-market picker ---- */
.mk-pickers{ display:flex; gap:14px; flex-wrap:wrap; margin-top:22px; padding-bottom:18px; }
.mk-picker{ position:relative; }
.mk-picker-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 18px; cursor:pointer;
  background:var(--navy-950); color:#fff; border:1px solid var(--navy-950); border-radius:2px;
  font-family:var(--f-mono); font-size:.78rem; letter-spacing:.04em;
  transition:background .2s ease, color .2s ease;
}
.mk-picker-btn:hover{ background:var(--navy-800); }
.mk-picker-btn .mk-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 5px;
  background:var(--gold-500); color:var(--navy-950);
  border-radius:10px; font-size:.7rem; font-weight:600;
}
.mk-panel{
  position:absolute; top:calc(100% + 8px); left:0; z-index:50;
  width:290px; max-width:calc(100vw - 40px);
  background:#fff;
  border:1px solid var(--line-on-paper);
  box-shadow:0 18px 40px rgba(18,20,26,.16);
  border-radius:2px;
  padding:14px;
}
.mk-search{
  width:100%; padding:10px 12px;
  font-family:var(--f-mono); font-size:.78rem; color:var(--ink);
  background:var(--paper);
  border:1px solid var(--line-on-paper); border-radius:2px;
}
.mk-search:focus{ outline:2px solid var(--gold-500); outline-offset:1px; }
.mk-list{ margin-top:10px; max-height:250px; overflow-y:auto; }
.mk-opt{
  display:flex; align-items:center; gap:10px;
  padding:9px 4px; cursor:pointer;
  border-bottom:1px solid rgba(18,20,26,.07);
  font-family:var(--f-mono); font-size:.78rem;
}
.mk-opt:last-child{ border-bottom:0; }
.mk-opt:hover{ background:var(--paper); }
.mk-opt-t{ font-weight:600; min-width:52px; }
.mk-opt-n{ color:var(--ink-soft); font-size:.74rem; }
.mk-nores{ margin:12px 4px 2px; font-family:var(--f-mono); font-size:.74rem; color:var(--ink-soft); }

/* ---- board ---- */
.mk-board{ margin-top:52px; }
.mk-section + .mk-section{ margin-top:56px; }
.mk-section-title{
  font-size:clamp(1.3rem,3vw,1.9rem);
  margin-bottom:22px;
}
.mk-empty{
  font-family:var(--f-mono); font-size:.82rem; color:var(--ink-soft);
  padding:44px 0; border-top:1px solid var(--line-on-paper);
}
/* prices carry a currency symbol here, so they must never break across lines */
.mk-board .ticker-cell .value{
  font-size:clamp(1.4rem,2.4vw,1.95rem);
  white-space:nowrap;
}
/* exchange tag, unified view only */
.mk-unified .ticker-cell{ position:relative; }
.mk-unified .ticker-cell .label{ padding-right:52px; }
.mk-badge{
  position:absolute; top:26px; right:22px;
  font-family:var(--f-mono); font-size:.56rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-soft);
  padding:3px 6px;
  border:1px solid var(--line-on-paper); border-radius:2px;
  background:rgba(18,20,26,.04);
  white-space:nowrap;
}
#mk-status{ flex-wrap:wrap; gap:22px; }
.mk-stat{ display:inline-flex; align-items:center; gap:8px; }

/* ---- cards open a chart ---- */
.mk-board .ticker-cell{ cursor:pointer; transition:background .2s ease; }
.mk-board .ticker-cell:hover{ background:rgba(214,158,39,.06); }

/* ---- chart modal ---- */
.mk-modal{
  position:fixed; inset:0; z-index:9995;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.mk-modal[hidden]{ display:none; }
.mk-modal-backdrop{ position:absolute; inset:0; background:rgba(11,21,36,.74); }
.mk-modal-box{
  position:relative; z-index:1;
  /* dvh second so it wins where supported: on iOS Safari 100vh is the tall
     viewport, so a vh-sized box runs under the address bar */
  width:min(880px,100%); max-height:min(90vh, calc(100vh - 48px));
  max-height:min(90dvh, calc(100dvh - 48px));
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  padding:34px clamp(20px,4vw,44px) 30px;
  background:var(--paper); color:var(--ink);
  border-radius:2px;
  box-shadow:0 30px 80px rgba(11,21,36,.45);
}
.mk-modal-close{
  position:absolute; top:14px; right:14px;
  width:36px; height:36px; padding:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; border:1px solid var(--line-on-paper); border-radius:2px;
  color:var(--ink-soft); font-size:1.3rem; line-height:1;
  transition:color .2s ease, border-color .2s ease;
}
.mk-modal-close:hover{ color:var(--ink); border-color:rgba(18,20,26,.4); }
.mk-modal-eyebrow{
  margin:0; font-family:var(--f-mono); font-size:.68rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-500);
}
.mk-modal-title{
  margin:10px 0 0; padding-right:44px;
  font-size:clamp(1.4rem,3.4vw,2.1rem); text-transform:none; letter-spacing:0;
}
.mk-modal-quote{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-top:14px;
}
.mk-modal-price{
  font-family:var(--f-mono); font-weight:600;
  font-size:clamp(1.5rem,3.4vw,2.1rem); font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.mk-modal-delta{ font-family:var(--f-mono); font-size:.9rem; }

.mk-chart-wrap{
  margin-top:26px; padding-top:20px;
  border-top:1px solid var(--line-on-paper);
}
.mk-chart-meta{
  margin:0 0 14px; font-family:var(--f-mono); font-size:.7rem; color:var(--ink-soft);
}
/* Lightweight Charts draws with layout.background transparent and light text,
   so the box behind it carries the dark surface. */
.mk-chart-box{
  width:100%; height:clamp(220px,38vh,330px);
  background:var(--navy-950);
  border-radius:2px;
  overflow:hidden;
}
.mk-attrib{
  margin:10px 0 0; text-align:right;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.04em; color:var(--ink-soft);
}
.mk-attrib a{ border-bottom:1px solid var(--line-on-paper); padding-bottom:1px; }
.mk-attrib a:hover{ color:var(--ink); border-bottom-color:var(--gold-500); }
.mk-chart-msg{
  margin:0; padding:64px 0; text-align:center;
  font-family:var(--f-mono); font-size:.82rem; color:var(--ink-soft);
}
.mk-chart-error{ padding:48px 16px; text-align:center; }
.mk-chart-error .mk-chart-msg{ padding:0 0 20px; }
@media (max-width:620px){
  .mk-modal{ padding:12px; }
  .mk-modal-box{ max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); }
}

@media (max-width:620px){
  .mk-ctrl-row{ gap:22px; }
  .mk-pickers{ width:100%; }
  .mk-picker, .mk-picker-btn{ width:100%; justify-content:center; }
}

@media (pointer: coarse){
  .mk-modal-close{ min-width:44px; min-height:44px; }
  .mk-search{ font-size:16px; }
}