/* The chart and the line of an indicator (views/chart.js). Tokens only (docs/VIEW-DESIGN.md). */
/* a tile of something measured often */
.metric-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; padding: 8px 12px 4px; }
.metric-tile { background: var(--elev); border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--border-soft); padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: pointer; }
@media (hover: hover) { .metric-tile:hover { box-shadow: 0 0 0 1px var(--border); } }
.mt-name { font-size: var(--fs-body); color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-value { display: flex; align-items: baseline; gap: 5px; font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 0; }
.mt-value b { font-size: var(--fs-title-l); font-weight: 650; letter-spacing: -.01em; color: var(--text); }
.mt-value span { font-size: var(--fs-caption); color: var(--text-3); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.metric-tile.out .mt-value b, .lab-row.out .lab-value, .big-value.out .bv-line b { color: color-mix(in srgb, var(--orange) 78%, var(--text)); }
.mt-chart { height: 32px; margin-top: 4px; }
.mt-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--fs-caption); color: var(--text-4); margin-top: 4px; white-space: nowrap; }
.state-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; background: var(--text-4); vertical-align: 1px; }
.state-dot.ok { background: var(--green); } .state-dot.low, .state-dot.high { background: var(--orange); }
/* a line of a lab value */
.lab-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px minmax(64px, 120px) 64px; align-items: center; gap: 12px; min-height: 48px; margin: 0 8px; padding: 0 12px; border-radius: var(--r-sm); cursor: pointer; }
@media (hover: hover) { .lab-row:hover { background: var(--hover); } }
.lab-row:active, .metric-tile:active { background: var(--press); }
.lab-row.words { grid-template-columns: minmax(0, 1fr) auto; }
.lab-row.words .lab-value { font-weight: 500; font-size: var(--fs-body); }
.lab-name { min-width: 0; display: flex; flex-direction: column; }
.lab-name span { font-size: var(--fs-body); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-name small { font-size: var(--fs-caption); color: var(--text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab-value { text-align: right; font-size: var(--fs-read); font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.lab-range, .lab-trend { height: 22px; min-width: 0; display: flex; align-items: center; }
.range-bar { width: 100%; height: 12px; display: block; overflow: visible; }
.rb-track, .rb-norm, .rb-dot { fill: none; stroke-linecap: round; }
.rb-track { stroke: var(--hover); stroke-width: 5; } .rb-norm { stroke: color-mix(in srgb, var(--green) 45%, transparent); stroke-width: 5; }
.rb-dot { stroke: var(--text-2); stroke-width: 11; } .rb-dot.out { stroke: var(--orange); }
/* the head of an indicator's page */
.big-value { padding: 6px 12px 10px; }
.bv-line { display: flex; align-items: baseline; gap: 8px; font-variant-numeric: tabular-nums; }
.bv-line b { font-size: var(--fs-title-l); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; color: var(--text); }
.bv-line span { font-size: var(--fs-body); color: var(--text-3); }
.bv-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.accent-chip { background: color-mix(in srgb, var(--orange) 16%, transparent); color: color-mix(in srgb, var(--orange) 70%, var(--text)); }
.lab-tabs { margin: 4px 12px 8px; }
.chart { width: 100%; height: 100%; display: block; overflow: visible; }
.fade-a { stop-color: var(--accent); stop-opacity: .2; } .fade-b { stop-color: var(--accent); stop-opacity: 0; }
.chart-area { stroke: none; }
.chart-line { fill: none; stroke: var(--accent); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; }
.chart-line.second { stroke: color-mix(in srgb, var(--accent) 50%, transparent); }
/* the last value of a small chart: a line of no length with round ends stays round whatever the box stretches to */
.chart-end { fill: none; stroke: var(--accent); stroke-width: 6; stroke-linecap: round; }
.chart-end.out { stroke: var(--orange); }
/* the large chart */
.chart-full { height: auto; touch-action: pan-y; cursor: crosshair; }
.chart-full .chart-line { stroke-width: 2; }
.chart-grid { fill: none; stroke: var(--border-soft); stroke-width: 1; shape-rendering: crispEdges; }
.chart-tick { font-size: var(--fs-micro); fill: var(--text-4); font-variant-numeric: tabular-nums; }
.chart-band { fill: color-mix(in srgb, var(--green) 10%, transparent); }
.chart-bound { fill: none; stroke: color-mix(in srgb, var(--green) 55%, transparent); stroke-width: 1; stroke-dasharray: 3 4; }
.chart-norm { font-size: var(--fs-micro); fill: color-mix(in srgb, var(--green) 75%, var(--text)); }
.chart-between { fill: color-mix(in srgb, var(--accent) 9%, transparent); stroke: none; }
.chart-dot { fill: var(--elev); stroke: var(--accent); stroke-width: 2; }
.chart-dot.second { stroke: color-mix(in srgb, var(--accent) 50%, var(--elev)); }
.chart-dot.out { fill: var(--orange); stroke: var(--orange); }
.chart-label { font-size: var(--fs-micro); font-weight: 600; fill: var(--text-2); font-variant-numeric: tabular-nums; }
.chart-label.out { fill: color-mix(in srgb, var(--orange) 78%, var(--text)); }
.chart-halo { fill: color-mix(in srgb, var(--accent) 18%, transparent); } .chart-halo.out { fill: color-mix(in srgb, var(--orange) 22%, transparent); }
.chart-last { fill: var(--accent); stroke: var(--elev); stroke-width: 2; } .chart-last.out { fill: var(--orange); }
.chart-last.second { fill: color-mix(in srgb, var(--accent) 50%, var(--elev)); }
.chart-cursor { visibility: hidden; pointer-events: none; } .chart-cursor.on { visibility: visible; }
.chart-cursor-line { fill: none; stroke: var(--text-4); stroke-width: 1; shape-rendering: crispEdges; }
.chart-cursor-dot { fill: var(--elev); stroke: var(--text); stroke-width: 2; } .chart-cursor-dot.off { visibility: hidden; }
.chart-wrap { margin: 4px 12px 12px; padding: 12px 14px 12px; background: var(--elev); border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--border-soft); }
.chart-read { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 20px; font-size: var(--fs-caption); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-read.on .chart-read-text { color: var(--text); font-weight: 600; }
.chart-legend { display: inline-flex; align-items: center; gap: 5px; color: var(--text-4); }
.lg { display: inline-block; width: 10px; height: 3px; border-radius: 2px; background: var(--accent); margin-left: 6px; } .lg.second { background: color-mix(in srgb, var(--accent) 50%, transparent); }
.chart-big { height: 240px; margin-top: 6px; }
.chart-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.chart-stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.chart-stat small { font-size: var(--fs-micro); color: var(--text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chart-stat b { font-size: var(--fs-read); font-weight: 650; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.value-tape { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.value-tape::-webkit-scrollbar { display: none; }
.period-switch { margin: 2px 12px 8px; }
@media (max-width: 640px) {
  .metric-tiles { grid-template-columns: 1fr 1fr; gap: 8px; padding: 6px 12px 4px; }
  .lab-row { grid-template-columns: minmax(0, 1fr) 52px 64px 52px; gap: 10px; margin: 0 4px; }
  .lab-row.words { grid-template-columns: minmax(0, 1fr) auto; }
  .chart-big { height: 200px; }
  .chart-wrap { margin: 4px 8px 12px; padding: 12px 12px 10px; }
}