/* ==========================================================================
   NYCharts — editorial chart styles (public site + admin)
   Theme via custom properties. Light defaults on .nyc-chart; any ancestor
   with .on-dark (or the chart itself) switches to the dark palette.
   ========================================================================== */
.nyc-chart {
  --chart-bg: #FFFFFF;
  --chart-ink: #0E1330;
  --chart-muted: #6a7090;
  --chart-grid: rgba(14, 19, 48, .1);
  --chart-accent: #050A30;
  --chart-highlight: #E8B400;
  --chart-1: #050A30;
  --chart-2: #3B4BD8;
  --chart-3: #E8B400;
  --chart-4: #D9483B;
  --chart-5: #1F9E89;
  --chart-6: #8B5CF6;
  --chart-tip-bg: #050A30;
  --chart-tip-ink: #FFFFFF;
  --chart-tip-value: #FFF200;
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  color: var(--chart-ink);
  font-family: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.on-dark .nyc-chart,
.nyc-chart.on-dark {
  --chart-bg: #050A30;
  --chart-ink: #FFFFFF;
  --chart-muted: #9aa0c8;
  --chart-grid: rgba(255, 255, 255, .12);
  --chart-accent: #FFF200;
  --chart-highlight: #FFF200;
  --chart-1: #FFF200;
  --chart-2: #7C8CFF;
  --chart-3: #FFFFFF;
  --chart-4: #FF7A6B;
  --chart-5: #3DD6B5;
  --chart-6: #C4A5FF;
  --chart-tip-bg: #0B1446;
}

/* Head */
.nyc-chart-head { margin: 0 0 16px; max-width: 62ch; }
.nyc-chart-title { margin: 0; font: 700 clamp(18px, 1.1rem + .5vw, 23px)/1.22 "Inter Tight", ui-sans-serif, system-ui, sans-serif; letter-spacing: -.012em; color: var(--chart-ink); text-wrap: balance; }
.nyc-chart-sub { margin-top: 5px; font-size: 14px; line-height: 1.45; color: var(--chart-muted); }

/* Legend */
.nyc-chart-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; font-size: 12.5px; font-weight: 500; color: var(--chart-ink); }
.nyc-key { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.nyc-key i { flex: none; width: 10px; height: 10px; border-radius: 3px; }
.nyc-key i.is-line { width: 16px; height: 3px; border-radius: 2px; }

/* Plot */
.nyc-chart-body { position: relative; width: 100%; min-width: 0; }
.nyc-svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.nyc-chart-empty { display: grid; place-items: center; min-height: 180px; padding: 24px; border: 1px dashed var(--chart-grid); border-radius: 12px; color: var(--chart-muted); font: 500 12px/1.4 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; text-align: center; }

/* Donut */
.nyc-donut { display: flex; flex-direction: column; align-items: center; gap: 20px; }
.nyc-donut.is-side { flex-direction: row; align-items: center; gap: clamp(20px, 4vw, 44px); }
.nyc-donut-plot { flex: none; max-width: 100%; }
.nyc-donut-legend { list-style: none; margin: 0; padding: 0; width: 100%; min-width: 0; flex: 1; }
.nyc-donut-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 3.6em; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--chart-grid); font-size: 13.5px; line-height: 1.3; border-radius: 4px; transition: background .15s; }
.nyc-donut-legend li:last-child { border-bottom: 0; }
.nyc-donut-legend li.is-active { background: var(--chart-grid); }
.nyc-donut-legend i { width: 10px; height: 10px; border-radius: 3px; }
.nyc-dl-label { overflow-wrap: anywhere; }
.nyc-dl-val { font: 700 12.5px/1 "JetBrains Mono", ui-monospace, monospace; }
.nyc-dl-pct { font: 500 12px/1 "JetBrains Mono", ui-monospace, monospace; color: var(--chart-muted); text-align: right; }

/* Tooltip */
.nyc-tip { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; min-width: 96px; max-width: 250px; padding: 9px 12px 10px; border-radius: 10px; background: var(--chart-tip-bg); color: var(--chart-tip-ink); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 10px 30px rgba(5, 10, 48, .28); font: 500 12.5px/1.35 "Inter Tight", ui-sans-serif, system-ui, sans-serif; will-change: transform; }
.nyc-tip[hidden] { display: none; }
.nyc-tip-label { margin-bottom: 4px; font: 500 10.5px/1.3 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .07em; text-transform: uppercase; color: #aab0dd; }
.nyc-tip-value { font: 700 17px/1.15 "JetBrains Mono", ui-monospace, monospace; color: var(--chart-tip-value); white-space: nowrap; }
.nyc-tip-value small { font-size: 12px; font-weight: 500; color: #aab0dd; }
.nyc-tip-row { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 2px 0; }
.nyc-tip-row i { width: 8px; height: 8px; border-radius: 2px; }
.nyc-tip-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #dfe2f7; }
.nyc-tip-row b { font: 700 12.5px/1.2 "JetBrains Mono", ui-monospace, monospace; color: var(--chart-tip-value); }
.nyc-tip-row.is-total { margin-top: 3px; padding-top: 5px; border-top: 1px solid rgba(255, 255, 255, .14); }

/* Footer */
.nyc-chart-foot { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-top: 14px; padding-top: 11px; border-top: 1px solid var(--chart-grid); }
.nyc-chart-meta { min-width: 0; display: grid; gap: 3px; font-size: 12.5px; line-height: 1.45; color: var(--chart-muted); }
.nyc-chart-source a { color: inherit; text-decoration: underline; text-decoration-color: var(--chart-grid); text-underline-offset: 2px; overflow-wrap: anywhere; }
.nyc-chart-source a:hover { color: var(--chart-ink); text-decoration-color: currentColor; }
.nyc-chart-note { font-style: italic; }
.nyc-chart-toggle { flex: none; margin: 0; padding: 5px 11px; border: 1px solid var(--chart-grid); border-radius: 99px; background: transparent; color: var(--chart-ink); font: 600 10.5px/1.2 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: border-color .15s, background .15s; }
.nyc-chart-toggle:hover { border-color: var(--chart-ink); }
.nyc-chart-toggle:focus-visible { outline: 2px solid var(--chart-accent); outline-offset: 2px; }

/* Data table (toggle) + no-JS fallback */
.nyc-chart-table { margin-top: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.nyc-chart-table[hidden] { display: none; }
.nyc-chart-table table, .nyc-chart-fallback { width: 100%; border-collapse: collapse; font-size: 13px; color: var(--chart-ink); }
.nyc-chart-table th, .nyc-chart-table td, .nyc-chart-fallback th, .nyc-chart-fallback td { padding: 7px 10px; border-bottom: 1px solid var(--chart-grid); text-align: left; vertical-align: top; }
.nyc-chart-table thead th, .nyc-chart-fallback thead th { font: 600 10.5px/1.3 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .07em; text-transform: uppercase; color: var(--chart-muted); }
.nyc-chart-table td, .nyc-chart-fallback td { font: 500 12.5px/1.4 "JetBrains Mono", ui-monospace, monospace; text-align: right; white-space: nowrap; }
.nyc-chart-table thead th:not(:first-child) { text-align: right; }
.nyc-chart-table .nyc-total td { text-align: left; white-space: normal; color: var(--chart-muted); }
.nyc-chart-fallback caption { text-align: left; font-weight: 700; padding-bottom: 8px; }
.nyc-chart.nyc-ready .nyc-chart-fallback { display: none; }
.nyc-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Hover emphasis */
.nyc-bar, .nyc-slice { transition: opacity .18s ease; }
.nyc-svg.is-hovering .nyc-bar:not(.is-active) { opacity: .55; }
.nyc-svg.is-hovering .nyc-slice:not(.is-active) { opacity: .35; }

/* Entrance animation (is-pending → is-animating) */
.nyc-chart .nyc-bar { transition: transform .8s cubic-bezier(.2, .8, .2, 1), opacity .18s ease; transition-delay: var(--d, 0s), 0s; }
.nyc-chart.is-pending .nyc-bar-v { transform: scaleY(0); }
.nyc-chart.is-pending .nyc-bar-h { transform: scaleX(0); }
.nyc-chart .nyc-sweep { transition: stroke-dashoffset 1.15s cubic-bezier(.33, .7, .2, 1); }
.nyc-chart.is-pending .nyc-sweep { stroke-dashoffset: var(--c); }
.nyc-chart.is-animating .nyc-val,
.nyc-chart.is-animating .nyc-dot,
.nyc-chart.is-animating .nyc-area,
.nyc-chart.is-animating .nyc-donut-value,
.nyc-chart.is-animating .nyc-donut-label { transition: opacity .55s ease .6s; }
.nyc-chart.is-pending .nyc-val,
.nyc-chart.is-pending .nyc-dot,
.nyc-chart.is-pending .nyc-area,
.nyc-chart.is-pending .nyc-donut-value,
.nyc-chart.is-pending .nyc-donut-label { opacity: 0; }

@media (max-width: 520px) {
  .nyc-chart-head { margin-bottom: 12px; }
  .nyc-chart-sub { font-size: 13px; }
  .nyc-chart-foot { flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .nyc-chart .nyc-bar, .nyc-chart .nyc-sweep, .nyc-chart .nyc-val, .nyc-chart .nyc-dot, .nyc-chart .nyc-area { transition: none !important; }
  .nyc-chart.is-pending .nyc-bar-v, .nyc-chart.is-pending .nyc-bar-h { transform: none; }
  .nyc-chart.is-pending .nyc-sweep { stroke-dashoffset: 0; }
  .nyc-chart.is-pending .nyc-val, .nyc-chart.is-pending .nyc-dot, .nyc-chart.is-pending .nyc-area,
  .nyc-chart.is-pending .nyc-donut-value, .nyc-chart.is-pending .nyc-donut-label { opacity: 1; }
}