/* Daily market pages: small additions on top of /legal.css (which already styles .data-tbl, .toc, .callout). */
.legal-hero .meta-line { margin-top: 14px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .02em; color: var(--muted-2); }
.table-wrap { overflow-x: auto; margin: 8px 0 24px; border-radius: var(--radius-sm); }
.table-wrap .data-tbl { margin: 0; min-width: 320px; }
.data-tbl th.num, .data-tbl td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.data-tbl td.up { color: var(--green); font-weight: 600; }
.data-tbl td.down { color: var(--red); font-weight: 600; }
.data-tbl td:first-child { width: auto; }
.day-nav { display: flex; justify-content: space-between; gap: 16px; margin: 32px 0 8px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; flex-wrap: wrap; }
/* A grid item defaults to min-width:auto, so a wide table would stretch the whole phone layout; let the column shrink and the wrapper scroll. */
.legal-wrap > * { min-width: 0; }
.table-wrap { max-width: 100%; }

/* ---- charts: plain HTML and SVG, no scripts. Labels wrap, nothing is clipped, nothing is ellipsised. */
.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 24px; }
.chart-grid > .chart-card { margin: 0; }
.chart-card { margin: 8px 0 24px; padding: 22px 24px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); min-width: 0; }
.chart-card figcaption { display: flex; flex-direction: column; gap: 3px; margin-bottom: 18px; }
.chart-title { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -.01em; color: var(--text); line-height: 1.25; }
.chart-sub { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted-2); line-height: 1.4; }
.chart-note { margin: 16px 0 0 !important; font-size: 13.5px !important; line-height: 1.55; color: var(--muted) !important; }

.line-chart { position: relative; height: 240px; margin-left: 60px; }
.line-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.line-chart .grid { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.line-chart .stroke { stroke: var(--green); stroke-width: 2.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.line-chart .stop-a { stop-color: var(--green); stop-opacity: .24; }
.line-chart .stop-b { stop-color: var(--green); stop-opacity: 0; }
.line-chart.down .stroke { stroke: var(--red); }
.line-chart.down .stop-a, .line-chart.down .stop-b { stop-color: var(--red); }
.line-chart .y-label { position: absolute; right: calc(100% + 12px); transform: translateY(-50%); font: 500 11.5px var(--font-mono); color: var(--muted-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.line-chart .dot { position: absolute; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--green); border: 2.5px solid #fff; box-shadow: 0 0 0 4px rgba(46, 125, 50, .18), var(--shadow-sm); }
.line-chart.down .dot { background: var(--red); box-shadow: 0 0 0 4px rgba(198, 40, 40, .16), var(--shadow-sm); }
.x-labels { display: flex; justify-content: space-between; margin: 12px 0 0 60px; font: 500 11.5px var(--font-mono); color: var(--muted-2); }

.bar-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
.chart-card .bar-head { font: 600 11.5px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 12px; line-height: 1.4; }
.bars, .dbars { list-style: none; margin: 0 !important; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.bar-row, .dbar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 7px; align-items: baseline; margin: 0 !important; padding: 0 !important; }
.bar-label { font-size: 14.5px; line-height: 1.35; color: var(--text); font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
.bar-label small { display: block; font-size: 12px; font-weight: 400; color: var(--muted-2); margin-top: 1px; }
.bar-value { font: 600 13.5px var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--muted); }
.bar-value.up { color: var(--green); } .bar-value.down { color: var(--red); }
.bar-track, .dbar-track { grid-column: 1 / -1; position: relative; height: 8px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.bar { display: block; height: 100%; border-radius: 999px; transform-origin: left center; animation: grow .9s var(--ease) both; }
.bar.up { background: linear-gradient(90deg, var(--green-lt), var(--green)); }
.bar.down { background: linear-gradient(90deg, var(--red-lt), var(--red)); }
.bar.flat { background: var(--muted-2); }
.dbar-track::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
.dbar { position: absolute; top: 0; bottom: 0; animation: grow .9s var(--ease) both; }
.dbar.up { left: 50%; transform-origin: left center; background: linear-gradient(90deg, var(--green), var(--green-lt)); border-radius: 0 999px 999px 0; }
.dbar.down { right: 50%; transform-origin: right center; background: linear-gradient(270deg, var(--red), var(--red-lt)); border-radius: 999px 0 0 999px; }
.dbar.flat { left: calc(50% - 1px); width: 2px !important; background: var(--muted-2); }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .bar, .dbar { animation: none; } }

.stack { display: flex; gap: 3px; height: 16px; border-radius: 999px; overflow: hidden; background: var(--bg-2); }
.seg { display: block; height: 100%; }
.seg.up, .sw.up { background: var(--green); } .seg.down, .sw.down { background: var(--red); } .seg.flat, .sw.flat { background: var(--line-2); }
.legend { list-style: none; margin: 16px 0 0 !important; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.legend li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 56px; column-gap: 10px; align-items: baseline; margin: 0 !important; padding: 0 !important; font-size: 14.5px; }
.sw { width: 11px; height: 11px; border-radius: 3px; align-self: center; display: block; }
.lg-name { color: var(--text); font-weight: 500; line-height: 1.35; overflow-wrap: anywhere; }
.lg-num { font: 500 13px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; }
.lg-pct { font: 600 13px var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text); text-align: right; }

.donut-wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: center; }
.donut { position: relative; width: 220px; max-width: 100%; margin: 0 auto; }
.donut svg { display: block; width: 100%; height: auto; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.donut-big { font: 700 28px var(--font-display); letter-spacing: -.02em; color: var(--text); line-height: 1.1; }
.donut-small { font: 500 11px var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted-2); margin-top: 4px; }
.donut-wrap .legend { margin-top: 0 !important; }

@media (max-width: 760px) {
  .chart-card { padding: 18px 16px 16px; }
  .chart-grid, .bar-cols { grid-template-columns: 1fr; }
  .line-chart { height: 200px; margin-left: 54px; }
  .x-labels { margin-left: 54px; }
  .donut-wrap { grid-template-columns: 1fr; gap: 22px; }
}

/* ---- tables on phones: tighter cells and wrapping headers so nothing needs a sideways scroll */
.data-tbl td small.sub { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 400; color: var(--muted-2); line-height: 1.35; }
@media (max-width: 760px) {
  .table-wrap .data-tbl { min-width: 0; font-size: 13.5px; }
  .table-wrap .data-tbl th, .table-wrap .data-tbl td { padding: 10px 7px; }
  .table-wrap .data-tbl th { font-size: 10.5px; letter-spacing: .03em; white-space: normal; line-height: 1.3; }
  .table-wrap .data-tbl td.num { font-size: 13px; }
}