/* Cura Core · charts.css
   Charts drawn by js/charts.js: axes, marks, tooltip, legend, horizontal bars, status strip, ring, sparkline,
   and the "Show as table" fold. "Bound Manual" direction: hairline grid in warm stone, ink text in Plex,
   the figure in the ring set in Newsreader, the tooltip on the cover. Series colours come from tokens.css
   (--c1 blue, --c2 ochre for Premium only, --c3 teal for signed, --c4 the empty track, --amber for attention).
   Every chart sits inside a white card: teal is 3.4:1 on white and only 3.0:1 on the paper. */

/* ---------------- frame ---------------- */

.chart { position: relative; width: 100%; }
.chart svg { display: block; overflow: visible; }

/* ---------------- text, grid, marks ---------------- */

.chart text { font-family: var(--font-sans); font-size: 11.5px; font-weight: 400; fill: var(--ink-3); }
.chart .tick { font-variant-numeric: tabular-nums lining-nums; }
.chart .endlabel { fill: var(--ink); font-weight: 600; font-size: 12.5px; font-variant-numeric: tabular-nums lining-nums; }
.chart .gridline { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart .baseline { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
.chart .xhair { stroke: var(--ink-3); stroke-width: 1; shape-rendering: crispEdges; }
.chart .mark { transition: opacity var(--dur-1) var(--ease); }
.chart .mark.dim { opacity: .45; }
.chart .hit { fill: transparent; cursor: default; }
.chart .hit:focus { outline: none; }
.chart .hit:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px; }

/* ---------------- legend ---------------- */

.chart-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font: 500 12.5px/1.2 var(--font-sans); color: var(--ink-2); }
.chart-legend span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.chart-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; box-shadow: inset 0 0 0 1px rgba(28, 26, 23, .1); }
.chart-legend i.line { width: 14px; height: 2px; border-radius: 1px; box-shadow: none; }

/* ---------------- tooltip (on the cover) ---------------- */

.chart-tip {
  position: fixed; z-index: 300; pointer-events: none;
  background: var(--tip-bg); color: var(--cover-cream);
  border-radius: var(--radius-sm); padding: 9px 12px; min-width: 120px; max-width: min(300px, calc(100vw - 16px));
  font: 400 12.5px/1.4 var(--font-sans); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(4px); transition: opacity .1s var(--ease), transform .1s var(--ease);
}
.chart-tip.in { opacity: 1; transform: none; }
.chart-tip .t { color: var(--cover-ink-2); font-weight: 600; margin-bottom: 4px; }
.chart-tip .r { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.chart-tip .r b { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums lining-nums; color: var(--cover-cream); }
.chart-tip .r b:empty { display: none; }
.chart-tip .r .k { width: 12px; height: 3px; border-radius: 1px; flex: none; }
.chart-tip .r span { color: var(--cover-ink); }
/* rows with no swatch (a stacked total, a note under the value) indent by the swatch width so the figures line up */
.chart-tip .r > b:first-child, .chart-tip .r > b:empty + span { margin-left: 20px; }

/* ---------------- ring meter ---------------- */

.ring { display: block; flex: none; }
/* The figure is set by charts.js in Newsreader 500 with lining figures. The caption under it
   ("signed") is a small-caps running head; "text + text" so a ring without a caption is untouched. */
.ring text + text { text-transform: uppercase; letter-spacing: .08em; }

/* ---------------- sparkline ---------------- */

svg.spark { display: block; width: 100%; overflow: visible; }

/* ---------------- horizontal bars ---------------- */

.hbars { display: grid; gap: 12px; align-content: start; }
.hbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.hbar .top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13.5px; line-height: 1.3; }
.hbar .top .l { font-weight: 600; color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar .top .l .ref { margin-right: 6px; }
.hbar .top .v { font-weight: 600; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); white-space: nowrap; flex: none; }
.hbar .top .v small { font-size: 12.5px; font-weight: 600; color: var(--ink-3); margin-left: 5px; }
.hbar .track { height: 8px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.hbar .track span { display: block; height: 100%; border-radius: 2px; background: var(--c1); }

/* ---------------- status strip and key ---------------- */

.status-strip { display: flex; height: 8px; gap: 2px; border-radius: 2px; overflow: hidden; background: transparent; }
.status-strip span { display: block; height: 100%; border-radius: 2px; }
.status-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin-top: 14px; }
.status-keys div { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; line-height: 1.3; color: var(--ink-2); }
.status-keys b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; margin-left: auto; padding-left: 6px; }
.status-keys i { width: 10px; height: 10px; border-radius: 2px; flex: none; box-shadow: inset 0 0 0 1px rgba(28, 26, 23, .1); }

/* ---------------- "Show as table" fold ---------------- */

.chart-table { margin-top: 12px; }
.chart-table summary {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; list-style: none;
  font: 600 12.5px/1 var(--font-sans); color: var(--ink-3); padding: 4px 0; border-radius: 2px;
  transition: color var(--dur-1) var(--ease);
}
.chart-table summary::-webkit-details-marker { display: none; }
.chart-table summary::before {
  content: ''; width: 5px; height: 5px; flex: none; margin: 0 2px 1px 1px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--dur-2) var(--ease);
}
.chart-table[open] summary::before { transform: rotate(45deg); margin-bottom: 3px; }
.chart-table summary:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.chart-table summary:focus-visible { outline-offset: 3px; }
.chart-table .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.chart-table table { width: 100%; margin-top: 10px; font-size: 13px; }
.chart-table th { padding: 6px 10px; }
.chart-table td { padding: 6px 10px; font-size: 13px; font-variant-numeric: tabular-nums lining-nums; }
.chart-table th:first-child, .chart-table td:first-child { white-space: nowrap; }
.chart-table .num { text-align: right; }

/* ---------------- Bento layer (October 2026) ----------------
   Charts keep their marks, grid and colours; only the soft shapes around them round off to match the
   plates: bar tracks and the status strip become pills, the tooltip a small rounded plate. */

.hbar .track, .hbar .track span { border-radius: 999px; }
.hbar .track { box-shadow: inset 0 1px 2px rgba(22, 34, 44, .08); }
.status-strip { border-radius: 999px; }
.chart-tip { border-radius: 12px; box-shadow: 0 1px 0 rgba(255, 255, 255, .08) inset, 0 18px 36px -12px rgba(0, 0, 0, .5); }
.chart-legend i, .status-keys i { border-radius: 3px; }

/* ---------------- responsive and print rules for this area ---------------- */

@media (max-width: 640px) {
  .chart text { font-size: 11.5px; }
  .hbar .top { font-size: 13px; }
  .status-keys { gap: 8px 12px; }
  .status-keys div { font-size: 12.5px; }
  .chart-table td, .chart-table th { padding: 6px 8px; }
}

@media (pointer: coarse) {
  .chart-table summary { min-height: var(--tap); }
}

@media print {
  .chart-tip, .chart .xhair, .chart .hdot { display: none !important; }
  .chart .mark.dim { opacity: 1; }
  .chart-table summary { display: none; }
}