/* ─────────────────────────────────────────────────────────────────────────
   DARKROOM — the charts page's own furniture. Loaded after cc.css.

   Two kinds of figure share this sheet and neither knows about the other.

   The server-drawn `<svg>` figures are styled by class, so they flip with the
   colour scheme for free and cost nothing to redraw. The vendored chart
   library ships no runtime stylesheet at all: everything it draws is bare SVG
   carrying its own class names, so the second half of this file is a theme
   written against those names rather than an override of anything.

   The one thing a stylesheet cannot reach is that library's series colours.
   It bakes them into element attributes when it draws, so cc-charts.js reads
   `--c0`..`--c8` off the root and rebuilds on a scheme change. That is why the
   series palette is declared on `html[data-theme]` here rather than scoped to
   the page: a custom property the script reads has to be on the element the
   script asks.

   The kicker, the h1 and the deck repeat the bot page's and the archive's on
   purpose. A page head that is nearly the same reads as a different site.
   ───────────────────────────────────────────────────────────────────────── */

/* ── the series palette ─────────────────────────────────────────────── */
/* Nine hues, in stack order, read by both halves of the page: `.s0`..`.s8`
   below and cc-charts.js through getComputedStyle. The signal leads, the
   add/del pair keep their own meaning, and the last is deliberately the
   quietest because it is where every tail band lands.

   The light set is not the dark set: each hue is darkened until it carries a
   readable edge stroke and a legend swatch against the light page's paper,
   the same correction cc.css records for its ink rungs. */
html[data-theme="dark"]{
  --c0:#ff5b2e; --c1:#e2a03f; --c2:#63c98a; --c3:#4fa3d1;
  --c4:#b58ce0; --c5:#f2637e; --c6:#cfc39a; --c7:#79a08c; --c8:#8b857c;
}
html[data-theme="light"]{
  --c0:#b83204; --c1:#8a5c0c; --c2:#11713f; --c3:#1b5b85;
  --c4:#5f3a92; --c5:#b8213f; --c6:#6f6134; --c7:#356050; --c8:#67624f;
}

/* padding-block only. A `padding:` shorthand on a class that rides the same
   element as `.shell` wins on order and zeroes the site's gutter; the page
   still looks internally consistent and only reveals itself beside the
   masthead. DarkroomAssetsTest asserts this and it is not decoration. */
.chartbook{padding-block:22px 60px}

/* ── the grid of small multiples ────────────────────────────────────── */
/* Every chart on this page is a tile on one grid rather than an essay with a
   figure in it. The six built out of divs are `span 6` at most; the five the
   page already had - two server-drawn SVGs and three the library draws - keep
   the full width, because a heatmap of every day the docs changed does not
   survive being made a third of a screen wide. */
.grid-ch{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:20px}
.chart{
  grid-column:span 12; min-width:0;
  border:1px solid var(--rule); border-radius:var(--radius); background:var(--bg-2);
  padding:12px 14px 11px;
}
.chart .ch-h{display:flex; align-items:baseline; gap:10px; margin-bottom:12px}
.chart .ch-h .k{font:500 10px/1 var(--mono); letter-spacing:.12em; color:var(--ink-4)}
.chart .ch-h h2{margin:0; font:400 19px/1.1 var(--display); font-variation-settings:"opsz" 96; color:var(--ink)}
.chart .ch-h h2 em{font-style:italic; color:var(--sig)}
.chart .ch-h .m{margin-left:auto; font:10.5px var(--mono); color:var(--ink-4); white-space:nowrap}
.chart .ch-r{margin:10px 0 0; font:13px/1.45 var(--prose); color:var(--ink-3)}
.chart .ch-r b{color:var(--ink); font-weight:500}
.chart .ch-r a{color:var(--sig)}

@media (min-width:1100px){
  .chart.w8{grid-column:span 8}
  .chart.w6{grid-column:span 6}
  .chart.w4{grid-column:span 4}
}

/* The range and exclusion notes under a figure. These carry the reasons a
   figure covers what it covers, so they are quiet but never faint. */
.chart .note{margin-top:12px; max-width:80ch; color:var(--ink-4); font:12px/1.5 var(--prose)}
.chart .note .lbl.t{display:inline; margin-right:6px; color:var(--ink-3); font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase}
.chart .note a{color:var(--ink-3); border-bottom:1px solid var(--rule-2); transition:color .18s var(--ease), border-color .18s var(--ease)}
.chart .note a:hover{color:var(--ink); border-bottom-color:var(--sig)}

.chart .empty{padding:26px 0; color:var(--ink-4); font-size:12px; letter-spacing:.08em}

/* ── plots made of divs ─────────────────────────────────────────────── */
/* No canvas and no library: the numbers are in the HTML the server sent, so a
   reader with no JavaScript sees the same chart. The ceiling is written under
   the plot because a bar chart with no axis is a shape, not a measurement. */
.plot{position:relative}
.plot .cap{position:absolute; top:-18px; right:0; font:10.5px var(--mono); color:var(--ink-4); font-weight:400}
.plot.bars,.plot.stack{--h:96px; display:flex; align-items:flex-end; gap:1px; height:var(--h); border-bottom:1px solid var(--rule-2)}
.plot.bars i{flex:1; min-width:1px; background:var(--sig-dim)}
.plot.bars i:hover{background:var(--sig)}
.plot.stack i.col{flex:1; min-width:1px; display:block}
.plot.stack .st{display:flex; flex-direction:column-reverse; width:100%; height:100%}
.plot.stack .st i{display:block; width:100%}
.plot.stack .st i.use{background:var(--t-use)}
.plot.stack .st i.notice{background:var(--t-notice)}
.plot.stack .st i.soon{background:var(--t-soon)}
.plot.stack .st i.internal{background:var(--t-internal)}

.plot.split{display:flex; height:30px; gap:1px; border-radius:2px; overflow:hidden}
.plot.split i{display:flex; align-items:center; justify-content:center; min-width:2px; font:500 11px var(--mono); color:var(--bg)}
.plot.split i b{font-weight:500}

.lgd{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:9px; font:11px var(--mono); color:var(--ink-3)}
.lgd span{display:inline-flex; align-items:center; gap:6px}
.lgd i{width:8px; height:8px; border-radius:2px; background:var(--ink-4)}
.lgd b{color:var(--ink); font-weight:500}
.lgd i.use,.plot.split i.use{background:var(--t-use)}
.lgd i.notice{background:var(--t-notice)}
.lgd i.soon{background:var(--t-soon)}
.lgd i.internal{background:var(--t-internal)}
.lgd i.k-feat,.plot.split i.k-feat{background:var(--sig)}
.lgd i.k-fix,.plot.split i.k-fix{background:var(--add)}
.lgd i.k-dev,.plot.split i.k-dev{background:var(--off)}
.lgd i.k-set,.plot.split i.k-set{background:var(--ink-4)}
.lgd i.k-have,.plot.split i.k-have{background:var(--add)}
.lgd i.k-gap,.plot.split i.k-gap{background:var(--notable)}

/* ── the figure frame ───────────────────────────────────────────────── */
/* `min-width:0` and a scroll of its own for the reason cc-home.css records:
   a chart library given a box narrower than its own minimum draws at that
   minimum anyway and pushes the whole document sideways. It scrolls inside
   its own frame instead. The server-drawn ones scale and never need it, so
   they opt back out below. */
.ch-fig{
  margin-top:26px; border:1px solid var(--rule); background:var(--bg-2);
  padding:14px 10px 8px; min-width:0; overflow-x:auto; position:relative;
}
/* The register mark the rest of the identity uses on a framed block. */
.ch-fig::before{content:""; position:absolute; top:-1px; left:-1px; width:26px; height:1px; background:var(--sig)}
.ch-fig::after{content:""; position:absolute; top:-1px; left:-1px; width:1px; height:26px; background:var(--sig)}

.ch-fig.static{overflow-x:visible; padding:18px 14px 12px}

/* Inside a tile the frame is the tile's. A figure keeping its own border here
   would draw a box inside a box and its register mark would sit on top of the
   tile's corner rather than on the page's grid. */
.chart .ch-fig{margin-top:0; border:0; background:none; padding:0 0 16px}
.chart .ch-fig::before,.chart .ch-fig::after{content:none}
/* The script draws its legend a few pixels below the height it gives the svg,
   so the glyphs are cut in half by the svg's own box wherever the figure has no
   padding left to bleed into. The bordered figure outside a tile hid that under
   its 12px; a tile has to say it. */
.chart .ch-fig .chart-container svg{overflow:visible}
.chart .ch-legend,.chart .ch-controls,.chart .ch-strip{margin-top:12px}

.ch-fig figcaption{
  margin-top:10px; padding-top:10px; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}

/* What a reader sees when the library never arrives, and what they keep
   seeing if it throws. Facts, not an apology. */
.ch-fig .fallback{padding:22px 14px; font-size:11.5px; letter-spacing:.04em; color:var(--ink-3); line-height:1.7}
.ch-fig .fallback p+p{margin-top:8px}
.ch-fig .fallback ul{list-style:none; margin-top:10px}
.ch-fig .fallback li{padding:3px 0}
.ch-fig .fallback b{color:var(--ink-2); font-weight:500}

/* ── the server-drawn SVG figures ───────────────────────────────────── */
/* Everything here is a class rather than a value, which is the whole reason
   these two figures need no script to survive a scheme flip. */
.cc-svg{display:block; width:100%; height:auto; overflow:visible}
.cc-svg .rule{stroke:var(--rule); stroke-width:1; shape-rendering:crispEdges}
.cc-svg .rule.axis{stroke:var(--rule-2)}
.cc-svg .tick{
  font-family:var(--mono); font-size:9px;
  letter-spacing:.1em; fill:var(--ink-3);
}
.cc-svg .tick.y{text-anchor:end; dominant-baseline:middle}
.cc-svg .tick.x{text-anchor:middle}

/* A band is its hue at low opacity with the same hue full strength along its
   own top edge, so nine stacked areas stay tellable apart without nine
   saturated fills fighting each other. */
.cc-svg .band{fill-opacity:.42; stroke:none}
.cc-svg .edge{fill:none; stroke-width:1.25; stroke-linejoin:round; stroke-opacity:.9}

.cc-svg .band.s0{fill:var(--c0)} .cc-svg .edge.s0{stroke:var(--c0)}
.cc-svg .band.s1{fill:var(--c1)} .cc-svg .edge.s1{stroke:var(--c1)}
.cc-svg .band.s2{fill:var(--c2)} .cc-svg .edge.s2{stroke:var(--c2)}
.cc-svg .band.s3{fill:var(--c3)} .cc-svg .edge.s3{stroke:var(--c3)}
.cc-svg .band.s4{fill:var(--c4)} .cc-svg .edge.s4{stroke:var(--c4)}
.cc-svg .band.s5{fill:var(--c5)} .cc-svg .edge.s5{stroke:var(--c5)}
.cc-svg .band.s6{fill:var(--c6)} .cc-svg .edge.s6{stroke:var(--c6)}
.cc-svg .band.s7{fill:var(--c7)} .cc-svg .edge.s7{stroke:var(--c7)}
.cc-svg .band.s8{fill:var(--c8)} .cc-svg .edge.s8{stroke:var(--c8)}

.cc-svg .bar{shape-rendering:crispEdges}
.cc-svg .bar.add{fill:var(--add); fill-opacity:.85}
.cc-svg .bar.del{fill:var(--del); fill-opacity:.85}

/* ── legends and count strips ───────────────────────────────────────── */
.ch-legend{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:26px}
.ch-legend .key{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; color:var(--ink-2); font-weight:300;
}
.ch-legend .key b{font-size:11px; letter-spacing:.1em; color:var(--ink-3); font-weight:400}
.ch-legend .sw{display:inline-block; width:11px; height:11px; flex:0 0 11px}
.ch-legend .sw.s0{background:var(--c0)} .ch-legend .sw.s1{background:var(--c1)}
.ch-legend .sw.s2{background:var(--c2)} .ch-legend .sw.s3{background:var(--c3)}
.ch-legend .sw.s4{background:var(--c4)} .ch-legend .sw.s5{background:var(--c5)}
.ch-legend .sw.s6{background:var(--c6)} .ch-legend .sw.s7{background:var(--c7)}
.ch-legend .sw.s8{background:var(--c8)}

/* The same strip the front door wears under its hero, and flush to the text
   column at both ends for the same reason. */
.ch-strip{
  margin-top:26px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
}
.ch-strip div{padding:20px 22px 18px; border-right:1px solid var(--rule); min-width:0}
.ch-strip div:first-child{padding-left:0}
.ch-strip div:last-child{padding-right:0; border-right:0}
.ch-strip .n{font:300 34px/.9 var(--display); font-variation-settings:"opsz" 144; letter-spacing:-.02em; display:block}
.ch-strip .lbl{display:block; margin-top:10px; overflow-wrap:anywhere}

/* ── the picker over figure 01 ──────────────────────────────────────── */
.ch-controls{display:flex; flex-wrap:wrap; gap:12px 26px; margin-top:26px; align-items:flex-start}
.ch-group{display:flex; flex-wrap:wrap; gap:6px}
.ch-group.models{flex:1; min-width:0}

.chip{
  font-family:var(--mono); font-size:10.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--rule-2); color:var(--ink-3); background:transparent;
  padding:7px 11px; cursor:pointer;
  /* `claude-sonnet-5[1m]` is wider than a 320px phone's text column, and a
     button does not wrap or shrink on its own: it pushed the whole document
     4px sideways, which is the same failure cc.css records for inline code
     and cc-home.css for the front door's chart. Break inside the name. */
  max-width:100%; overflow-wrap:anywhere; text-align:left;
  transition:color .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease);
}
.chip:hover{color:var(--ink-2); border-color:var(--ink-4)}
/* On is a border and a wash rather than a fill: a row of twenty-seven solid
   chips is louder than the chart they control. */
.chip.on{color:var(--sig); border-color:var(--sig); background:var(--sig-ghost)}
/* A model alias is an identifier and keeps its case; the metric chips are
   labels and do not. */
.chip.mono{text-transform:none; letter-spacing:.04em}

/* ── the vendored library's own SVG ─────────────────────────────────── */
/* It ships no stylesheet, so none of this overrides anything: these are the
   class names it writes and this is the only styling they ever get. Series
   colours are the exception and come from the palette above, through the
   script, because they are drawn as attributes. */
.ch-fig .chart-container{
  font-family:var(--ui); color:var(--ink-2); position:relative;
}
.ch-fig .chart-container .title{
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase; fill:var(--ink-3);
}
.ch-fig .chart-container .axis,
.ch-fig .chart-container .chart-label{
  font-family:var(--mono); font-size:9px; letter-spacing:.08em;
}
/* Axis tick labels carry no fill at all in `makeVertLine`/`makeHoriLine`, so
   they default to black and vanish on the dark page. The gridlines beside
   them are the opposite problem: their #dadada arrives as an inline style
   attribute, which a stylesheet only outranks with `!important`. Same two
   corrections cc-home.css records against the other chart library. */
.ch-fig .chart-container .axis text,
.ch-fig .chart-container .chart-label{fill:var(--ink-3); stroke:none}
.ch-fig .chart-container .axis line,
.ch-fig .chart-container .line-horizontal,
.ch-fig .chart-container .line-vertical{stroke:var(--rule) !important}
.ch-fig .chart-container line.dashed{stroke-dasharray:2,2}

.ch-fig .chart-container .legend-dataset-text{
  font-family:var(--mono); font-size:10px;
  letter-spacing:.1em; fill:var(--ink-2);
}
.ch-fig .chart-container .legend-dot{stroke:none}
/* Its legend rows are keyboard-inert markup, so they get a pointer and
   nothing that implies they can be clicked. */
.ch-fig .chart-container .graph-svg-tip.comparison,
.ch-fig .chart-container .chart-legend{cursor:default}

/* The tooltip is an absolutely positioned div, not SVG, and the library's own
   look for it is a rounded dark bubble that belongs to a different site. */
.ch-fig .graph-svg-tip{
  position:absolute; z-index:99999; padding:0;
  background:var(--bg-2); border:1px solid var(--rule-2); border-radius:0; box-shadow:none;
  font-family:var(--mono); font-size:11px; color:var(--ink);
  pointer-events:none;
}
.ch-fig .graph-svg-tip ul{list-style:none; margin:0; padding:8px 10px}
.ch-fig .graph-svg-tip ul.data-point-list li{
  display:flex; align-items:center; gap:7px; padding:2px 0;
  font-weight:400; letter-spacing:.04em; white-space:nowrap;
}
.ch-fig .graph-svg-tip .title{
  display:block; padding:6px 10px; margin:0;
  background:var(--raise); border-bottom:1px solid var(--rule);
  color:var(--ink-2); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  pointer-events:none;
}
.ch-fig .graph-svg-tip strong{color:var(--ink); font-weight:500}
.ch-fig .graph-svg-tip .svg-pointer{fill:var(--rule-2); stroke:none}

/* The heatmap. Its squares carry a fill attribute from the palette the script
   hands it, so what is left here is the grid's own furniture. There is no
   `.heatmap` wrapper class to scope to: the squares are `.day` and the month
   and weekday captions are `.domain-name` and `.subdomain-name`, straight
   under the container. */
.ch-fig .chart-container .day{stroke:var(--bg-2); stroke-width:1.4; rx:0; ry:0}
.ch-fig .chart-container .domain-name,
.ch-fig .chart-container .subdomain-name{
  font-family:var(--mono); font-size:9px;
  letter-spacing:.1em; fill:var(--ink-3);
}

/* A bar or a line the reader is not hovering is dimmed by the library through
   opacity; keep that, and keep the focus ring the shell defines everywhere
   else rather than letting an SVG element lose it. */
.ch-fig .chart-container .dataset-units path,
.ch-fig .chart-container .dataset-units rect{transition:opacity .18s var(--ease)}

/* ── responsive ─────────────────────────────────────────────────────── */
@media(max-width:860px){
  .chartbook{padding-block:16px 44px}
  .grid-ch{gap:14px}
  .ch-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ch-strip div{padding-left:22px; padding-right:22px; border-right:1px solid var(--rule)}
  .ch-strip div:nth-child(odd){padding-left:0}
  .ch-strip div:nth-child(even){padding-right:0; border-right:0}
  .ch-strip div:nth-child(n+3){border-top:1px solid var(--rule)}
  .ch-strip .n{font-size:28px}
}

@media(max-width:520px){
  .ch-fig{padding:10px 8px 6px}
  .ch-fig.static{padding:12px 8px 10px}
  .ch-controls{gap:10px 14px}
  .chip{padding:6px 9px; font-size:10px}
  .ch-legend{gap:6px 16px}
}

@media(prefers-reduced-motion:reduce){
  .chip,.chart .note a,.ch-fig .chart-container .dataset-units path,
  .ch-fig .chart-container .dataset-units rect{transition:none}
}