/* Styles for the static quote and market pages (built by
   scripts/build-pages.mjs). Base tokens come from styles.css. */

.qwrap { max-width: 880px; }
.qpage main { padding-top: 6px; }
.homelink { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.qnav a { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink3); text-decoration: none; border: 1px solid #2B3850; border-radius: 999px; padding: 8px 14px; }
.qnav a:hover { color: var(--ink); border-color: var(--hair); }

.crumbs { font-size: 11px; color: var(--ink4); margin: 14px 0 4px; }
.crumbs a { color: var(--ink4); text-decoration: none; }
.crumbs a:hover { color: var(--ink2); }
.crumbs span { color: var(--ink3); }

.qpage h1 { font-family: 'Space Grotesk', sans-serif; font-size: 26px; margin: 6px 0 4px; letter-spacing: -0.01em; }
.qsub { font-size: 12.5px; color: var(--ink3); margin: 0 0 16px; line-height: 1.5; }

.qhead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; margin: 0 0 14px; }
.qval { display: flex; align-items: baseline; gap: 10px; }
#qprice { font-family: 'Space Grotesk', sans-serif; font-size: 34px; font-weight: 700; }
.qchg { font-size: 15px; font-weight: 600; }
.qchg.up { color: var(--upt); }
.qchg.dn { color: var(--dn); }
.qstatus { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink3); display: flex; align-items: center; gap: 7px; }

.qchartbox { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px 8px; }
.qcharthead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.qcharthead b { font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; color: var(--ink3); }
#qchart { position: relative; margin-top: 6px; }
#qchart svg { display: block; width: 100%; height: 260px; }
.qgrid { stroke: var(--line2); stroke-width: 1; }
.qaxis-t { font-size: 10px; fill: var(--ink4); font-family: 'Inter', sans-serif; }
.qline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.qhover-line { stroke: var(--hair); stroke-width: 1; visibility: hidden; }
.qtip { position: absolute; top: 6px; left: 0; background: var(--panel2); border: 1px solid var(--hair); border-radius: 6px; padding: 5px 8px; font-size: 11px; color: var(--ink2); pointer-events: none; visibility: hidden; white-space: nowrap; }
.qtip b { font-variant-numeric: tabular-nums; color: var(--ink); }

.qstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 14px 0 4px; }
.qstat { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; }
.qstat .lb { font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em; color: var(--ink4); }
.qstat .vl { font-size: 14px; font-weight: 600; margin-top: 3px; font-variant-numeric: tabular-nums; }
.qstat .vl.up { color: var(--upt); }
.qstat .vl.dn { color: var(--dn); }

.qabout { margin-top: 20px; }
.qabout h2, .qrel h2, .mgroup h2 { font-size: 13px; letter-spacing: 0.04em; margin: 18px 0 6px; }
.mgroup h2 a { color: var(--ink); text-decoration: none; }
.mgroup h2 a:hover { color: var(--accent); }
.qabout p { font-size: 12.5px; color: var(--ink2); line-height: 1.65; margin: 0 0 10px; max-width: 72ch; }

.qrellinks { display: flex; flex-wrap: wrap; gap: 8px; }
.qrellinks a { font-size: 11.5px; color: var(--ink3); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.qrellinks a:hover { color: var(--ink); border-color: var(--hair); }

.mlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 14px 0; }
.mcard { display: flex; flex-direction: column; gap: 3px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; text-decoration: none; }
.mcard:hover { border-color: var(--hair); }
.mname { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--ink2); }
.mval { font-size: 16px; font-weight: 600; color: var(--ink); }
.mchg { font-size: 11.5px; font-weight: 600; color: var(--ink4); }
.mchg.up { color: var(--upt); }
.mchg.dn { color: var(--dn); }
.mfoot { font-size: 11.5px; color: var(--ink4); }