/* =============================================================================
   The three app pages: launch, coin, docs. Layout only. Every card, chip, row,
   stat and control comes from base.css so a panel on the coin page and a panel
   on the launch page are the same object.
   ========================================================================== */

.page { padding-top: var(--s6); }
.page-head { margin-bottom: var(--s5); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s5); }
.page-head h1 { margin-bottom: var(--s3); }
.page-head p { color: var(--muted); max-width: 62ch; }

.row-2 { display: grid; grid-template-columns: 1fr 190px; gap: var(--s3); }
@media (max-width: 560px) { .row-2 { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ launch page */
.launch-grid { display: grid; grid-template-columns: 1fr 372px; gap: var(--s4); align-items: start; }
@media (max-width: 1040px) { .launch-grid { grid-template-columns: 1fr; } }

.panel-head .search { height: 34px; width: 190px; font-size: var(--t-xs); border-radius: var(--r-pill); }

/* The market picker is a control, not a stack of cards: no fill until you are
   choosing, and the selected one is the only thing that carries an accent. */
.mkt-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: 6px;
  max-height: 336px; overflow-y: auto; margin-top: var(--s4); padding-right: 4px;
}
.mkt {
  position: relative; text-align: left; padding: 10px 12px 11px; border-radius: var(--r-s);
  border: 1px solid transparent; background: var(--bg-2);
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.mkt:hover { border-color: var(--line-2); }
.mkt.on { border-color: var(--accent); background: rgba(0,82,255,.1); }
.mkt.nodata { opacity: .5; }
.mkt-top { display: flex; align-items: center; gap: 7px; }
.mkt-top .mkt-cls { margin-left: auto; }
.mkt-id { font-size: var(--t-sm); font-weight: 600; letter-spacing: -.02em; font-family: var(--mono); }
.mkt-cls { font-size: .62rem; color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }
.mkt-name { font-size: var(--t-xs); color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-px { display: flex; justify-content: space-between; gap: 6px; font-size: var(--t-xs); margin-top: 8px; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.mkt-closed { position: absolute; top: 10px; right: 12px; font-size: .58rem; color: var(--dim); font-family: var(--mono); letter-spacing: .08em; }

.seg { display: flex; gap: var(--s2); }
.seg button {
  flex: 1; height: 44px; border-radius: var(--r-s); border: 1px solid var(--line-2);
  background: var(--bg-2); color: var(--muted); font-size: var(--t-sm); font-weight: 520;
  transition: color .16s var(--ease), border-color .16s var(--ease), background .16s var(--ease);
}
.seg.big button { height: auto; padding: 13px 15px; text-align: left; display: block; }
.seg .seg-t { display: block; font-weight: 560; font-size: var(--t-body); }
.seg .seg-s { display: block; font-size: var(--t-xs); color: var(--dim); margin-top: 3px; }
.seg button:hover { color: var(--text); border-color: var(--glass-line-2); }
.seg button.on[data-side='long']  { color: var(--long);  border-color: rgba(35,209,139,.5); background: rgba(35,209,139,.12); }
.seg button.on[data-side='short'] { color: var(--short); border-color: rgba(255,84,98,.45); background: rgba(255,84,98,.11); }
.seg button.on .seg-s { color: var(--muted); }

/* ---- the preview ---- */
.preview .sticky { position: sticky; top: 86px; }
.p-coin { display: flex; align-items: center; gap: var(--s3); padding: var(--s5); border-bottom: 1px solid var(--line); }
.p-face { width: 46px; height: 46px; border-radius: 12px; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--surface-2); font-family: var(--mono); font-weight: 620; font-size: .85rem; }
.p-face .logo { width: 100%; height: 100%; background: none; border-radius: 0; }
.p-name { font-size: 1.05rem; font-weight: 560; letter-spacing: -.02em; }
.p-tick { font-size: var(--t-xs); color: var(--dim); font-family: var(--mono); }
.p-stats { grid-template-columns: 1fr 1fr; }
.p-note { font-size: var(--t-xs); color: var(--dim); }

/* -------------------------------------------------------------- coin page */
.coin-head { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
.coin-face { width: 54px; height: 54px; border-radius: 14px; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--surface-2); font-family: var(--mono); font-weight: 620; }
.coin-face .logo { width: 100%; height: 100%; background: none; border-radius: 0; }
.coin-title { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.coin-title .tk { font-family: var(--mono); color: var(--dim); font-size: var(--t-body); }
.coin-sub { color: var(--muted); font-size: var(--t-sm); margin-top: 3px; max-width: 60ch; }
.coin-head .spacer { flex: 1; }
.coin-px { text-align: right; }
.coin-px .k { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.coin-px .v { font-family: var(--mono); font-size: 1.45rem; font-weight: 560; letter-spacing: -.03em; margin: 2px 0; }
.coin-px .s { font-size: var(--t-xs); color: var(--dim); }
@media (max-width: 720px) {
  .coin-head { gap: var(--s3); }
  .coin-head .spacer { display: none; }
  .coin-px { text-align: left; flex: 1; min-width: 140px; }
  .coin-px .v { font-size: 1.25rem; }
}

.coin-grid { display: grid; grid-template-columns: 1fr 356px; gap: var(--s4); align-items: start; }
@media (max-width: 1040px) { .coin-grid { grid-template-columns: 1fr; } }
.coin-left, .coin-right { display: flex; flex-direction: column; gap: var(--s4); }
.coin-left .panel + .panel, .coin-right .panel + .panel { margin-top: 0; }

.chart-legend { display: flex; gap: var(--s5); padding: var(--s3) var(--s5) 0; font-size: var(--t-xs); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.chart-legend i { width: 12px; height: 2px; border-radius: 2px; background: var(--accent); display: inline-block; }
.chart-legend i.floor { background: var(--long); }
.chart-wrap { padding: var(--s3) var(--s4) var(--s4); }
canvas.chart { width: 100%; height: 260px; display: block; }
.chart-empty { padding: var(--s7) var(--s5); text-align: center; color: var(--dim); font-size: var(--t-sm); max-width: 54ch; margin-inline: auto; }

.vault-stats { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .vault-stats { grid-template-columns: repeat(2, 1fr); } }
#v-market { display: flex; align-items: center; gap: 8px; }
#v-market .logo { width: 20px; height: 20px; }

.cover { padding: var(--s5); border-top: 1px solid var(--line); }
.cover-head { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--t-sm); color: var(--muted); margin-bottom: var(--s3); }
.cover-head b { color: var(--text); font-family: var(--mono); font-weight: 550; }
.cover-note { margin-top: var(--s3); font-size: var(--t-xs); color: var(--dim); }

/* the liquidation line is a row in the panel, with a dot for its state */
.liq {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) var(--s5); border-top: 1px solid var(--line);
  font-size: var(--t-sm); color: var(--muted);
}
.liq::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--short); flex: none; }
.liq.safe::before { background: var(--long); }
.liq b { font-family: var(--mono); color: var(--text); }

.trade-tabs { display: flex; gap: 4px; }
.trade-tabs button {
  height: 30px; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--t-xs);
  color: var(--muted); border: 1px solid transparent;
}
.trade-tabs button:hover { color: var(--text); }
.trade-tabs button.on { background: var(--surface-3); color: var(--text); border-color: var(--line-2); }

.amt-row { display: flex; gap: 6px; margin-top: var(--s2); }
.amt-row button {
  flex: 1; height: 30px; border-radius: var(--r-s); border: 1px solid var(--line);
  background: var(--bg-2); color: var(--muted); font-size: var(--t-xs); font-family: var(--mono);
}
.amt-row button:hover { color: var(--text); border-color: var(--line-2); }

.trades { max-height: 320px; overflow-y: auto; }
.trades > div { display: grid; grid-template-columns: 58px 1fr auto; gap: var(--s3); align-items: center; padding: 10px var(--s5); border-bottom: 1px solid var(--line); font-size: var(--t-sm); }
.trades > div:last-child { border-bottom: 0; }
.trades .sd { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; }
.trades .am { font-family: var(--mono); color: var(--muted); font-size: var(--t-xs); }
.trades .tm { font-family: var(--mono); color: var(--dim); font-size: var(--t-xs); }

/* ------------------------------------------------------------------- docs */
.docs { display: grid; grid-template-columns: 200px minmax(0, 72ch); justify-content: center; gap: var(--s7); align-items: start; padding-top: var(--s6); }
/* Long-form reading needs a surface. The painting stays visible around the
   plate and behind the contents list, and stops under the prose. */
.docs-body {
  background: linear-gradient(180deg, rgba(17,33,66,.5), rgba(5,11,24,.62));
  border: 1px solid rgba(232,236,245,.1);
  border-radius: var(--r-panel);
  box-shadow: inset 0 1px 0 rgba(232,236,245,.13), 0 24px 60px -30px rgba(2,5,12,.9);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  padding: var(--s7) var(--s7) var(--s8);
}
.docs-nav a { border-radius: 10px; }
@media (max-width: 900px) { .docs { grid-template-columns: 1fr; gap: var(--s5); } .docs-nav { position: static !important; flex-direction: row !important; flex-wrap: wrap; } }
.docs-nav { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 2px; }
.docs-nav a { padding: 7px 12px; border-radius: var(--r-pill); font-size: var(--t-sm); color: var(--muted); }
.docs-nav a:hover { background: var(--glass-hi); color: var(--text); }
.docs-body h2 { margin: var(--s8) 0 var(--s4); scroll-margin-top: 96px; }
.docs-body h2:first-child { margin-top: 0; }
.docs-body h3 { margin: var(--s5) 0 var(--s2); }
.docs-body p, .docs-body li { color: var(--muted); }
.docs-body p { margin-bottom: var(--s3); }
.docs-body ul { margin: 0 0 var(--s4) var(--s5); }
.docs-body li { margin-bottom: 6px; }
.docs-body code { font-family: var(--mono); font-size: .86em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 1px 5px; color: var(--text); }
.docs-body .callout { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); padding: var(--s4) 0; margin: var(--s5) 0; }
.docs-body .callout p:last-child { margin-bottom: 0; }
.docs-body table { width: 100%; border-collapse: collapse; margin: var(--s2) 0 var(--s5); font-size: var(--t-sm); }
.docs-body th, .docs-body td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); }
.docs-body th { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 500; }
.docs-body td { color: var(--muted); }
.docs-body td:first-child { font-family: var(--mono); color: var(--text); white-space: nowrap; padding-right: var(--s5); }