/* Calendar card, grid, legend, the Radiant, bar strip, data table, anomaly and live views. */

[data-slot="calendar"], [data-slot="anomalies"], [data-slot="live"] { margin-block-end: 0; }
.cal-card { padding: 1.25rem 1.375rem 1.375rem; }
.cal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-block-end: 1rem; }
.cal-head h2 { font-size: 1.125rem; font-weight: 600; }
.cal-head .sub { margin-block-start: 0.125rem; color: var(--color-text-muted); font-size: 0.8125rem; }
.cal-head-text { flex: 1 1 18rem; }
.cal-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ramp { display: flex; flex-direction: column; gap: 0.25rem; }
.ramp-bar { display: flex; inline-size: 17.5rem; block-size: 0.625rem; border-radius: var(--radius-pill); overflow: hidden; }
.ramp-bar i { flex: 1; }
.ramp-ticks, .ramp-ends { display: flex; inline-size: 17.5rem; color: var(--color-text-muted); font: 0.6875rem var(--font-mono); }
.ramp-ticks span { flex: 1; }
.ramp-ends { justify-content: space-between; font-family: var(--font-sans); }

.seg { display: inline-flex; margin: 0; padding: 0.1875rem; border-radius: var(--radius-pill); background: var(--color-surface-2); border: 1px solid var(--color-border); }
.seg-opt, .layer label {
  position: relative; display: inline-flex; align-items: center; min-block-size: 2rem; padding: 0 0.875rem; border: 0; border-radius: var(--radius-pill);
  background: none; color: var(--color-text-muted); font-size: 0.8125rem; font-weight: 500; cursor: pointer;
}
.seg-opt[aria-checked="true"], .layer label:has(input:checked) { background: var(--color-raised); color: var(--color-text); box-shadow: 0 0 0 1px var(--color-border-strong); }
.layer label:has(input:focus-visible) { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.layer input[type="radio"] { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }

.cal-scroll { overflow-x: auto; max-inline-size: 100%; padding: 0.25rem; margin: -0.25rem; }
.cal-grid { display: block; min-inline-size: 40rem; }
.cal-row { display: grid; grid-template-columns: 3rem repeat(12, minmax(0, 1fr)) 8.5rem; gap: 3px; align-items: center; margin-block-end: 3px; }
.cal-year, .cal-colhead { color: var(--color-text-muted); font-size: 0.75rem; }
.cal-year { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.cal-colhead { position: relative; padding-block-end: 0.375rem; text-align: center; font-weight: 500; }
.cal-colhead .short, .cal-median-label .short { display: none; }
.cal-colhead.is-current, .cal-year.is-current { color: var(--current); font-weight: 700; }
.cal-colhead.is-current::after { content: ""; position: absolute; inset-inline: 30%; inset-block-end: 0; block-size: 2px; border-radius: 2px; background: currentColor; }
.cal-cell {
  position: relative; display: grid; place-items: center; block-size: 1.375rem; border-radius: var(--radius-cell);
  font: 500 0.75rem / 1 var(--font-mono); font-variant-numeric: tabular-nums; cursor: pointer; scroll-margin: 6rem;
}
.cal-cell.is-empty { border: 1px dashed var(--color-border); background: transparent; cursor: default; }
.cal-cell.is-median { outline: 1px dashed var(--color-border-strong); outline-offset: 1px; cursor: default; }
.cal-cell.bin-5, .cal-cell.bin-6 { box-shadow: 0 0 0.875rem -0.25rem var(--glow-cell); }
.cal-cell.is-linked { box-shadow: inset 0 0 0 1px var(--color-surface), 0 0 0 2px var(--color-focus); z-index: 1; }
.cal-cell.is-selected { z-index: 2; transform: scale(1.14); box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus), 0 0.5rem 1.25rem rgb(0 0 0 / 0.35); }
.cal-cell:focus-visible { z-index: 3; outline: 0; box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px var(--color-focus), 0 0 0 6px var(--color-focus-halo); }
.num-s { display: none; }
.cal-num { pointer-events: none; }
.cal-total { display: flex; align-items: center; gap: 0.5rem; padding-inline-start: 0.5rem; font-size: 0.75rem; }
.cal-total-head { color: var(--color-text-muted); font-weight: 500; padding-block-end: 0.375rem; }
.cal-total-bar { flex: none; inline-size: calc(var(--w, 0) * 4.25rem); block-size: 0.5rem; border-radius: var(--radius-pill); background: var(--bar); }
.cal-total.is-busiest .cal-total-bar { background: var(--color-fire); }
.cal-total-n { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.cal-median { margin-block-start: 0.5rem; padding-block-start: 0.5rem; border-block-start: 1px solid var(--color-border); }
.cal-median-label { font-family: var(--font-sans); font-size: 0.6875rem; }
.cal-readout { min-block-size: 1.25rem; margin-block-start: 0.75rem; color: var(--color-text-muted); font-size: 0.8125rem; }
.cal-notes { color: var(--color-text-muted); font-size: 0.75rem; }
.cal-notes:empty { display: none; }
.cal-foot { margin-block-start: 1rem; padding-block-start: 0.75rem; border-block-start: 1px solid var(--color-border); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .cal-cell[data-row] { transition: transform var(--dur-2) var(--ease-std), box-shadow var(--dur-2) var(--ease-std); }
  .cal-cell[data-row]:hover:not(.is-selected) { z-index: 1; transform: scale(1.08); }
}
@media (prefers-reduced-motion: no-preference) {
  .cal-grid.is-revealing .cal-cell[data-row] { animation: ignite var(--dur-5) var(--ease-enter) both; animation-delay: calc(var(--i, 0) * 14ms); }
  /* On the HTML wrapper: Chrome kept painting the first frame of animations set on SVG content. */
  .radiant-wrap { animation: radiant-grow 700ms var(--ease-enter) both; }
}
@media (prefers-reduced-motion: reduce) {
  .cal-grid.is-revealing { animation: fade-in var(--dur-2) linear both; }
}
@keyframes radiant-grow { from { opacity: 0; transform: scale(0.6) rotate(-20deg); } }
@keyframes ignite { from { opacity: 0; transform: scale(0.55); filter: brightness(1.8) saturate(0.4); } }
/* By viewport, not by the main column: opening the panel at 1440 must not drop the year totals. */
@media (max-width: 79.99rem) {
  .cal-row { grid-template-columns: 3rem repeat(12, minmax(0, 1fr)); }
  .cal-total { display: none; }
}

/* Marks use currentColor, so their contrast equals the cell's text pair. */
.is-estimated::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-end: 0;
  border-block-start: 0.375rem solid currentColor; border-inline-start: 0.375rem solid transparent; border-start-end-radius: var(--radius-cell); opacity: 0.55;
}
.all-estimated .is-estimated::after { display: none; }
.legend-estimated-note { display: none; }
.all-estimated .legend-estimated-note { display: block; }
.all-estimated .legend-item:has(.mark-estimated) { display: none; }
.is-partial::before { content: ""; position: absolute; inset-inline: 0.125rem; inset-block-end: 0.125rem; block-size: 2px; background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px); }

.bin-0 { background: var(--bin-0); color: var(--bin-0-text); }
.bin-1 { background: var(--bin-1); color: var(--bin-1-text); }
.bin-2 { background: var(--bin-2); color: var(--bin-2-text); }
.bin-3 { background: var(--bin-3); color: var(--bin-3-text); }
.bin-4 { background: var(--bin-4); color: var(--bin-4-text); }
.bin-5 { background: var(--bin-5); color: var(--bin-5-text); }
.bin-6 { background: var(--bin-6); color: var(--bin-6-text); }
.bin-nodata, .nodata { background: var(--nodata-hatch); background-color: var(--nodata-bg); color: var(--nodata-text); }

.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; color: var(--color-text-muted); font-size: 0.75rem; }
.legend-list { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.legend-item { display: flex; align-items: center; gap: 0.375rem; }
.swatch { position: relative; display: inline-block; inline-size: 0.875rem; block-size: 0.875rem; border-radius: 3px; outline: 1px solid var(--cell-edge); outline-offset: -1px; }
.swatch.mark-estimated, .swatch.mark-partial { background: var(--color-surface-2); color: var(--color-text); }
.swatch.mark-estimated::after { content: ""; position: absolute; inset-block-start: 0; inset-inline-end: 0; border-block-start: 0.375rem solid currentColor; border-inline-start: 0.375rem solid transparent; opacity: 0.55; }
.swatch.mark-partial::before { content: ""; position: absolute; inset-inline: 0; inset-block-end: 0.125rem; block-size: 2px; background: repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px); }
.legend-unit { margin: 0; }

/* The Radiant. Slices use classes, never inline style (strict CSP). */
.radiant-wrap { position: relative; }
.radiant { display: block; overflow: visible; }
.rb { stroke: none; }
.rb:hover { filter: brightness(1.25); }
.rb-0 { fill: var(--bin-0); }
.rb-1 { fill: var(--bin-1); }
.rb-2 { fill: var(--bin-2); }
.rb-3 { fill: var(--bin-3); }
.rb-4 { fill: var(--bin-4); }
.rb-5 { fill: var(--bin-5); }
.rb-6 { fill: var(--bin-6); }
.rad-sel-ground { fill: none; stroke: var(--color-surface); stroke-width: 6.5; stroke-linejoin: round; }
.rad-sel { fill: none; stroke: var(--color-focus); stroke-width: 3.5; stroke-linejoin: round; }
.rad-spoke { fill: none; stroke: var(--color-focus); stroke-opacity: 0.45; stroke-width: 0.6; stroke-dasharray: 1.5 1.5; }
.rad-labels text { fill: var(--color-text-muted); font: 500 7.5px var(--font-sans); }
.rad-labels.is-abbr text { font-size: 7px; }
.rad-center circle { fill: var(--color-surface); }
.radiant-tip {
  position: absolute; inset-inline-start: var(--x, 0); inset-block-start: var(--y, 0); z-index: 2; transform: translate(-50%, calc(-100% - 0.75rem));
  padding: 0.25rem 0.5rem; border-radius: 0.5rem; background: var(--color-text); color: var(--color-bg); font-size: 0.75rem; font-weight: 500; white-space: nowrap; pointer-events: none;
}

/* Bar strip in the panel: every year of the selected month. */
.bs-bar { fill: var(--bar); }
.bs-bar.is-sel { fill: var(--bar-sel); }
.bs-value { fill: var(--color-text); font: 500 10px var(--font-mono); }
.bs-tick { fill: var(--color-text-muted); font: 9.5px var(--font-mono); }
.bs-median { stroke: var(--color-text); stroke-width: 1.2; stroke-dasharray: 4 3; }
.bs-median-label { fill: var(--color-text); font: 9.5px var(--font-sans); }

@media (max-width: 40rem) {
  .cal-card { padding: 1rem 0.75rem; }
  .cal-head { gap: 0.75rem; }
  .ramp, .ramp-bar, .ramp-ticks, .ramp-ends { inline-size: 100%; }
  .ramp-host { flex: 1 1 100%; }
  .cal-scroll { overflow: visible; padding: 0; margin: 0; }
  .cal-grid { min-inline-size: 0; }
  .cal-row { grid-template-columns: 1.875rem repeat(12, minmax(0, 1fr)); gap: 2px; margin-block-end: 2px; }
  .cal-total { display: none; }
  .cal-year { font-size: 0.5625rem; letter-spacing: -0.04em; }
  .cal-colhead { font-size: 0.6875rem; }
  .cal-colhead .long, .cal-median-label .long { display: none; }
  .cal-colhead .short, .cal-median-label .short { display: inline; }
  .cal-cell { block-size: 1.625rem; border-radius: 0.25rem; font-size: 0.625rem; letter-spacing: -0.05em; }
  .num-l { display: none; }
  .num-s { display: inline; }
  .is-estimated::after { border-block-start-width: 0.25rem; border-inline-start-width: 0.25rem; }
}
@media (max-width: 22rem) {
  .cal-cell { font-size: 0.5625rem; }
}

.data-table-scroll { overflow: auto; max-inline-size: 100%; }
.data-table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
.data-table caption { padding-block: var(--space-2); text-align: start; font-weight: 600; }
.data-table th, .data-table td { padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border-strong); text-align: end; white-space: nowrap; }
.data-table thead th { background: var(--color-surface); }
.data-table tbody th { position: sticky; inset-inline-start: 0; background: var(--color-surface); }
.data-table-note { margin: var(--space-2) 0 0; color: var(--color-text-muted); }

/* Anomaly layer: PuOr 11 diverging classes, centered on the median. */
.div-0 { background: var(--div-below-5); color: var(--div-below-5-text); }
.div-1 { background: var(--div-below-4); color: var(--div-below-4-text); }
.div-2 { background: var(--div-below-3); color: var(--div-below-3-text); }
.div-3 { background: var(--div-below-2); color: var(--div-below-2-text); }
.div-4 { background: var(--div-below-1); color: var(--div-below-1-text); }
.div-5 { background: var(--div-center); color: var(--div-center-text); box-shadow: inset 0 0 0 1px var(--div-center-ring); }
.div-6 { background: var(--div-above-1); color: var(--div-above-1-text); }
.div-7 { background: var(--div-above-2); color: var(--div-above-2-text); }
.div-8 { background: var(--div-above-3); color: var(--div-above-3-text); }
.div-9 { background: var(--div-above-4); color: var(--div-above-4-text); }
.div-10 { background: var(--div-above-5); color: var(--div-above-5-text); }
.div-norank { background: var(--color-surface); color: var(--color-text); outline-style: dashed; }
/* Flag: a filled dot top-left plus a heavy inset frame, in the cell's text color, so it reads on every ramp color. */
.cal-cell.is-flagged { box-shadow: inset 0 0 0 0.1875rem currentColor; }
.cal-cell.is-flagged::before, .swatch.mark-flagged::before { content: ""; position: absolute; inset-block-start: 0.25rem; inset-inline-start: 0.25rem; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: currentColor; }
.swatch.mark-flagged { background: var(--color-surface); box-shadow: inset 0 0 0 0.1875rem currentColor; }
.anomaly-key { display: contents; }
.anomaly-key .legend { position: sticky; inset-block-end: 0; z-index: 3; background: var(--color-surface); padding-block: var(--space-2); border-block-start: 1px solid var(--color-border); }
.legend-ramp { display: flex; margin: 0; padding: 0; list-style: none; }
.legend-ramp .swatch { inline-size: 1.75rem; block-size: 1.5rem; }
.legend-ends { display: flex; justify-content: space-between; gap: var(--space-4); margin: var(--space-1) 0 var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.anomaly-preview-note { margin: 0 0 var(--space-2); }

/* Live view: the band and median stay neutral next to the live line. */
.live-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block-end: var(--space-2); }
.live-fetched, .live-readout { color: var(--color-text-muted); }
.live-readout { min-block-size: 1.5rem; margin: var(--space-2) 0 0; }
.live-chart { display: block; inline-size: 100%; max-inline-size: 60rem; block-size: auto; }
.live-grid { stroke: var(--color-border-strong); stroke-width: 1; opacity: 0.35; }
.live-tick { fill: var(--color-text-muted); font-size: 0.75rem; }
.live-band { fill: var(--series-era-line); opacity: 0.22; stroke: none; }
.live-median { fill: none; stroke: var(--series-era-line); stroke-width: 2; stroke-dasharray: 0.5rem 0.25rem; }
.live-line { fill: none; stroke: var(--series-live); stroke-width: 3; }
.live-tail { fill: none; stroke: var(--series-live); stroke-width: 3; stroke-dasharray: 0.25rem 0.25rem; }
.live-point { fill: var(--series-live); stroke: var(--color-surface); stroke-width: 2; cursor: pointer; }
.live-point.is-provisional { fill: var(--color-bg); stroke: var(--series-live); stroke-width: 3; }
.live-point:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
.live-label { font-size: 0.75rem; fill: var(--color-text); transform: translateX(0.5rem); }
.live-label-live { font-weight: 700; }
.live-key { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-2) 0 0; padding: 0; list-style: none; font-size: 0.875rem; }
.live-key li { display: flex; align-items: center; gap: var(--space-2); }
.live-key li::before { content: ""; inline-size: 1.25rem; border-block-start: 3px solid var(--series-live); }
.live-key-median::before { border-block-start: 2px dashed var(--series-era-line) !important; }
.live-key-band::before { block-size: 0.75rem; border: 0 !important; background: var(--series-era-line); opacity: 0.35; }
.live-key-live { font-weight: 700; }

.cal-toggle {
  min-block-size: 2.5rem; padding: 0 1rem; border-radius: var(--radius-pill); border: 1px solid var(--color-border-strong);
  background: transparent; color: var(--color-text); font-weight: 500; cursor: pointer;
}
.cal-toggle[aria-pressed="true"] { background: var(--color-raised); box-shadow: 0 0 0 1px var(--color-border-strong); }