/* Public market pages (/markets, /quote, /sectors, /macro, /calendar, /screener, /heatmap).
   Plain and dense on purpose: tables with hairline rules, numbers right-aligned in
   tabular figures, color only on up/down values. Uses theme tokens only, so dark and
   light both work without overrides. */

.mk-page { padding-top: 28px; padding-bottom: 64px; }
.mk-page h1 { font-size: clamp(28px, 3.6vw, 38px); font-weight: 650; letter-spacing: -0.02em; margin: 0; }
.mk-page h2 { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 10px; }
.mk-page p { line-height: 1.65; }

.mk-crumbs { font-size: 13.5px; color: var(--text-faint); margin-bottom: 14px; }
.mk-crumbs a { color: var(--text-dim); }
.mk-crumbs a:hover { color: var(--text); text-decoration: underline; }
.mk-crumbs span { margin: 0 6px; }

.mk-lede { max-width: 720px; margin: 10px 0 0; font-size: 16px; }
.mk-section { margin-top: 40px; }
.mk-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.mk-section-head a { font-size: 14px; color: var(--text-dim); }
.mk-section-head a:hover { color: var(--text); }
.mk-note { font-size: 13px; color: var(--text-faint); margin-top: 10px; }
.mk-empty { padding: 18px 0; color: var(--text-dim); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }

.mk-up { color: var(--bull); }
.mk-down { color: var(--bear); }

/* ---------- tables ---------- */
.mk-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mk-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.mk-table th, .mk-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.mk-table th { font-weight: 500; font-size: 13px; color: var(--text-faint); border-bottom-color: var(--border); }
.mk-table th:first-child, .mk-table td:first-child { padding-left: 0; }
.mk-table th:last-child, .mk-table td:last-child { padding-right: 0; }
.mk-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.mk-table td.wrap { white-space: normal; min-width: 220px; color: var(--text-dim); }
.mk-table a { color: var(--text); }
.mk-table a:hover { text-decoration: underline; }
.mk-table .sym { color: var(--text-faint); font-size: 13px; margin-left: 6px; }
.mk-table tr.mk-strong td { font-weight: 600; }
.mk-table tbody tr:hover td { background: var(--bg-2); }

/* ---------- quote header + tabs ---------- */
.mk-qhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.mk-qhead .mk-sub { font-size: 14px; color: var(--text-faint); margin-top: 4px; }
.mk-price { text-align: right; }
.mk-price .big { font-size: 34px; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1; }
.mk-price .chg { font-size: 16px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.mk-price .asof { font-size: 12.5px; color: var(--text-faint); margin-top: 4px; }

.mk-tabs { display: flex; gap: 24px; border-bottom: 1px solid var(--border); margin-top: 22px; overflow-x: auto; }
.mk-tabs a { padding: 10px 0; font-size: 15px; color: var(--text-dim); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.mk-tabs a:hover { color: var(--text); }
.mk-tabs a.on { color: var(--text); border-bottom-color: var(--text); font-weight: 500; }

.mk-subnav { display: flex; gap: 18px; flex-wrap: wrap; margin: 18px 0 6px; font-size: 14px; }
.mk-subnav a { color: var(--text-dim); }
.mk-subnav a:hover { color: var(--text); }
.mk-subnav a.on { color: var(--text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.mk-subnav .sep { color: var(--text-faint); }

/* ---------- quote summary layout ---------- */
.mk-quote-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; margin-top: 28px; }
.mk-chart { height: 440px; border: 1px solid var(--rule); }
.mk-stats { width: 100%; border-collapse: collapse; font-size: 14px; }
.mk-stats td { padding: 8px 0; border-bottom: 1px solid var(--rule); }
.mk-stats td:last-child { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.mk-stats td:first-child { color: var(--text-dim); }
.mk-profile { max-width: 780px; }
.mk-profile p { font-size: 15px; }
.mk-profile .mk-facts { margin-top: 12px; font-size: 14px; color: var(--text-dim); }
.mk-profile .mk-facts b { color: var(--text); font-weight: 500; }

.mk-links { list-style: none; padding: 0; margin: 0; font-size: 15px; }
.mk-links li { padding: 7px 0; border-bottom: 1px solid var(--rule); }
.mk-links a:hover { text-decoration: underline; }
.mk-links .d { color: var(--text-faint); font-size: 13.5px; margin-left: 8px; }

/* ---------- two-column link lists (markets index, other sectors) ---------- */
.mk-cols { columns: 3 220px; column-gap: 32px; }
.mk-cols a { display: block; padding: 5px 0; color: var(--text-dim); font-size: 14.5px; break-inside: avoid; }
.mk-cols a:hover { color: var(--text); text-decoration: underline; }

/* ---------- news ---------- */
.mk-news { list-style: none; padding: 0; margin: 0; }
.mk-news li { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.mk-news a { font-size: 16px; font-weight: 500; line-height: 1.45; color: var(--text); }
.mk-news a:hover { text-decoration: underline; }
.mk-news .meta { font-size: 13px; color: var(--text-faint); margin-top: 4px; }

/* ---------- macro ---------- */
.mk-spark { display: block; width: 100%; height: 260px; margin-top: 18px; }
.mk-spark .line { fill: none; stroke: var(--accent); stroke-width: 1.8; vector-effect: non-scaling-stroke; }
.mk-spark .grid { stroke: var(--chart-grid, var(--rule)); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mk-spark-axis { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-faint); margin-top: 6px; }
.mk-latest { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 18px; }
.mk-latest .v { font-size: 30px; font-weight: 650; font-variant-numeric: tabular-nums; }
.mk-latest .l { font-size: 13px; color: var(--text-faint); }

.mk-embed { margin-top: 24px; min-height: 480px; }

@media (max-width: 900px) {
  .mk-quote-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mk-chart { height: 340px; }
  .mk-price { text-align: left; }
}
@media (max-width: 560px) {
  .mk-page { padding-top: 18px; }
  .mk-table { font-size: 14px; }
  .mk-table th, .mk-table td { padding: 8px 10px; }
}

/* ---------- expanded market pages ---------- */
.mk-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.mk-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.mk-grid3 h3 { font-size: 16px; font-weight: 600; margin: 8px 0 6px; }
.mk-grid3 .mk-table { font-size: 14px; }
.mk-breadth { font-size: 15px; color: var(--text-dim); margin: 4px 0 12px; }
.mk-breadth strong { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.mk-th-sub { font-weight: 400; font-size: 11.5px; color: var(--text-faint); }
.mk-stat-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; margin-top: 28px; }
.mk-stat-groups h2 { font-size: 18px; }
.mk-stats a, .mk-table th a { color: inherit; text-decoration: underline; text-decoration-color: var(--border-2); text-underline-offset: 3px; }
.mk-stats a:hover { color: var(--text); }
.mk-profile-grid { grid-template-columns: minmax(0, 1fr) 380px; }
.mk-news .sum { font-size: 14px; color: var(--text-dim); margin: 4px 0 0; line-height: 1.55; }
.mk-news .meta a.mk-tk { font-size: 13px; font-weight: 400; color: var(--text-dim); }
.mk-links-2 { columns: 2 320px; column-gap: 40px; }
.mk-links-2 li { break-inside: avoid; }
.mk-days { gap: 8px 16px; }
.mk-count { color: var(--text-faint); font-size: 12.5px; }
.mk-latest .v.mk-up { color: var(--bull); }
.mk-latest .v.mk-down { color: var(--bear); }
.mk-latest .l a { color: inherit; text-decoration: underline; }

.mk-curve { display: block; width: 100%; height: auto; margin-top: 8px; }
.mk-curve .grid { stroke: var(--chart-grid, var(--rule)); stroke-width: 1; }
.mk-curve .tick { fill: var(--text-faint); font-size: 12px; font-family: var(--font); }
.mk-curve .line, .mk-curve .line2, .mk-curve .line3 { fill: none; stroke-width: 2.2; }
.mk-curve .line { stroke: var(--accent); }
.mk-curve .line2 { stroke: var(--text-dim); stroke-dasharray: 5 4; }
.mk-curve .line3 { stroke: var(--text-faint); stroke-dasharray: 2 4; }
.mk-curve .dot { fill: var(--accent); }
.mk-legend { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-dim); margin-top: 6px; }
.mk-legend span { display: inline-block; width: 22px; height: 0; border-top: 2px solid; margin-left: 14px; }
.mk-legend span:first-child { margin-left: 0; }
.mk-legend .k1 { border-color: var(--accent); }
.mk-legend .k2 { border-color: var(--text-dim); border-top-style: dashed; }
.mk-legend .k3 { border-color: var(--text-faint); border-top-style: dotted; }

@media (max-width: 900px) {
  .mk-grid2, .mk-grid3, .mk-stat-groups, .mk-profile-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Three-across mover tables: let long company names wrap so price and change stay visible. */
.mk-grid3 .mk-table td:first-child { white-space: normal; min-width: 0; }
.mk-grid3 .mk-table .sym { display: block; margin-left: 0; font-size: 12px; }

/* Financial statements lookup + TradingView charts under the SEC tables */
.fin-lookup { display: flex; gap: 10px; max-width: 520px; margin: 22px 0 8px; }
.fin-lookup input { flex: 1; min-width: 0; text-transform: uppercase; }
.fin-popular { list-style: none; margin: 12px 0 0; padding: 0; columns: 3; column-gap: 40px; }
.fin-popular li { break-inside: avoid; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.fin-popular a { font-weight: 600; color: var(--text); }
.fin-popular a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fin-popular span { margin-left: 6px; font-size: 13px; color: var(--text-faint); }
.fin-learn { margin: 12px 0 0; padding-left: 20px; color: var(--text-dim); font-size: 15px; }
.fin-learn li { padding: 5px 0; }
.fin-learn a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.mk-tv-fin { margin-top: 14px; min-height: 560px; }
@media (max-width: 900px) { .fin-popular { columns: 2; } }
@media (max-width: 520px) { .fin-popular { columns: 1; } .fin-lookup { flex-direction: column; } }

/* Phones: drop the point-change column where a percent column sits next to it, so the
   price and the percent change both fit without swiping the table. */
@media (max-width: 560px) { .mk-chg { display: none; } }
@media (max-width: 560px) {
  /* Let the name column wrap so short tables fit the screen; numbers stay on one line. */
  .mk-table td:first-child, .mk-table th:first-child { white-space: normal; }
  .mk-table td:first-child .sym { display: block; margin-left: 0; }
  .mk-table th, .mk-table td { padding: 8px 6px; }
  .mk-table th:first-child, .mk-table td:first-child { padding-left: 0; }
  .mk-table th:last-child, .mk-table td:last-child { padding-right: 0; }
}