/* Chart frame · the kit rules for this component, quoted from phase-2/kit (kit v3) by phase-4/src/build_pack.py.
   Tokens come from ../../styles.css. Build it as: Chart, ToggleGroup. */
/* families/data-display/family.css */
.dd-label-row{display:flex;align-items:center;gap:var(--s-2);margin-bottom:var(--s-3)}
/* families/data-display/family.css */
.dd-sk{display:block;border-radius:var(--r-chip);background:hsl(var(--foreground)/.075);animation:kit-skel var(--motion-skeleton)}
/* families/data-display/family.css */
.dd-c1{background:hsl(var(--chart-1))}
/* families/data-display/family.css */
.dd-chart{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--r-card);display:flex;flex-direction:column;min-width:0}
/* families/data-display/family.css */
.dd-chart-h{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-4) var(--s-4) 0}
/* families/data-display/family.css */
.dd-chart-h .r{margin-left:auto;display:flex;gap:var(--s-2);align-items:center}
/* families/data-display/family.css */
.dd-chart-t{font:var(--w-semibold) var(--text-section)/var(--lh-section) var(--font-voice);font-stretch:var(--font-stretch-title);letter-spacing:var(--tr-section)}
/* families/data-display/family.css */
.dd-chart-s{font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:2px}
/* families/data-display/family.css */
.dd-legend{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);padding:var(--s-3) var(--s-4) 0;font-size:var(--text-small);color:hsl(var(--foreground))}
/* families/data-display/family.css */
.dd-legend span{display:inline-flex;align-items:center;gap:6px}
/* families/data-display/family.css */
.dd-legend .key{width:14px;height:2px;border-radius:1px;background:hsl(var(--chart-1))}
/* families/data-display/family.css */
.dd-legend .key.prev{background:hsl(var(--chart-muted))}
/* families/data-display/family.css */
.dd-legend .key.sq{width:8px;height:8px;border-radius:2px}
/* families/data-display/family.css */
.dd-legend .key.prev.dash{background:none;border-top:2px dotted hsl(var(--chart-muted));height:0}
/* families/data-display/family.css */
.dd-plot{position:relative;padding:var(--s-2) var(--s-4) var(--s-3)}
/* families/data-display/family.css */
.dd-plot svg{width:100%;height:auto;overflow:visible}
/* families/data-display/family.css */
.dd-ax text{fill:hsl(var(--muted-foreground));font:var(--text-micro) var(--font-ui);font-variant-numeric:tabular-nums}
/* families/data-display/family.css */
.dd-line{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* families/data-display/family.css */
.dd-line.now{stroke:hsl(var(--chart-1))}
/* families/data-display/family.css */
.dd-line.prev{stroke:hsl(var(--chart-muted));stroke-dasharray:1 4}
/* families/data-display/family.css */
.dd-area{fill:hsl(var(--chart-1)/.10)}
/* families/data-display/family.css */
.dd-end{fill:hsl(var(--chart-1));stroke:hsl(var(--card));stroke-width:2}
/* families/data-display/family.css */
.dd-endlbl{fill:hsl(var(--foreground));font:var(--w-semibold) var(--text-micro) var(--font-ui);font-variant-numeric:tabular-nums}
/* families/data-display/family.css */
.dd-cross{stroke:hsl(var(--secondary-border));stroke-width:1;opacity:0;transition:opacity var(--motion-hover)}
/* families/data-display/family.css */
.dd-hdot{stroke:hsl(var(--card));stroke-width:2;opacity:0;transition:opacity var(--motion-hover)}
/* families/data-display/family.css */
.dd-hdot.now{fill:hsl(var(--chart-1))}
/* families/data-display/family.css */
.dd-hdot.prev{fill:hsl(var(--chart-muted))}
/* families/data-display/family.css */
.dd-plot.hov .dd-cross, .dd-plot.hov .dd-hdot{opacity:1}
/* families/data-display/family.css */
.dd-hit{fill:transparent;cursor:crosshair}
/* families/data-display/family.css */
.dd-tip{position:absolute;z-index:4;min-width:168px;padding:var(--s-2) var(--s-3);background:hsl(var(--popover));border:1px solid hsl(var(--border));border-radius:var(--r-card);box-shadow:var(--e-pop);font-size:var(--text-small);pointer-events:none;opacity:0;transform:translateY(var(--pop-shift));transition:opacity var(--motion-pop-out),transform var(--motion-pop-out)}
/* families/data-display/family.css */
.dd-tip.show{opacity:1;transform:none;transition:opacity var(--motion-pop-in),transform var(--motion-pop-in)}
/* families/data-display/family.css */
.dd-tip b{display:block;font:var(--w-semibold) var(--text-small)/1.3 var(--font-voice);margin-bottom:var(--s-1)}
/* families/data-display/family.css */
.dd-tip .tr{display:flex;align-items:center;gap:6px;line-height:1.6}
/* families/data-display/family.css */
.dd-tip .tr .v{margin-left:auto;padding-left:var(--s-3);font-variant-numeric:tabular-nums;font-weight:var(--w-semibold)}
/* families/data-display/family.css */
.dd-tip .sw{width:8px;height:8px;border-radius:2px;background:hsl(var(--chart-1))}
/* families/data-display/family.css */
.dd-tip .sw.prev{background:hsl(var(--chart-muted))}
/* families/data-display/family.css */
.dd-tip .sw.c1{background:hsl(var(--chart-1))}
/* families/data-display/family.css */
.dd-tip .sw.c2{background:hsl(var(--chart-2))}
/* families/data-display/family.css */
.dd-tip .sw.c3{background:hsl(var(--chart-3))}
/* families/data-display/family.css */
.dd-chart-f{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-4);border-top:1px solid hsl(var(--border));font-size:var(--text-small);color:hsl(var(--muted-foreground));margin-top:auto}
/* families/data-display/family.css */
.dd-chart-f .r{margin-left:auto}
/* families/data-display/family.css */
.dd-table{width:100%;font-size:var(--text-small);font-variant-numeric:tabular-nums}
/* families/data-display/family.css */
.dd-table th{font:var(--w-semibold) var(--text-micro)/1 var(--font-voice);font-stretch:var(--font-stretch-title);text-align:left;color:hsl(var(--muted-foreground));padding:var(--s-2) var(--s-3);background:hsl(var(--muted));border-bottom:1px solid hsl(var(--border));position:sticky;top:0}
/* families/data-display/family.css */
.dd-table td{padding:6px var(--s-3);border-bottom:1px solid hsl(var(--border))}
/* families/data-display/family.css */
.dd-table .n{text-align:right}
/* families/data-display/family.css */
.dd-tablewrap{max-height:248px;overflow:auto;margin:var(--s-2) var(--s-4) var(--s-3);border:1px solid hsl(var(--border));border-radius:var(--r-control)}
/* families/data-display/family.css */
.dd-bars{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4)}
/* families/data-display/family.css */
.dd-bar{display:grid;grid-template-columns:132px minmax(0,1fr) 64px;gap:var(--s-3);align-items:center;font-size:var(--text-small);border-radius:var(--r-chip);position:relative}
/* families/data-display/family.css */
.dd-bar .t{height:18px;position:relative}
/* families/data-display/family.css */
.dd-bar .t i{position:absolute;left:0;top:0;bottom:0;background:hsl(var(--chart-1));border-radius:0 var(--r-chip) var(--r-chip) 0;transition:filter var(--motion-hover)}
/* families/data-display/family.css */
.dd-bar .v{text-align:right;font-variant-numeric:tabular-nums;font-weight:var(--w-semibold)}
/* families/data-display/family.css */
.dd-bar .k{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* families/data-display/family.css */
.dd-bar:hover .t i, .dd-bar:focus-visible .t i{filter:brightness(.82)}
/* families/data-display/family.css */
.dd-bar:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}
/* families/data-display/family.css */
.dd-axis-row{display:grid;grid-template-columns:132px minmax(0,1fr) 64px;gap:var(--s-3);font-size:var(--text-micro);color:hsl(var(--muted-foreground));padding:0 var(--s-4) var(--s-3)}
/* families/data-display/family.css */
.dd-axis-row div{position:relative;height:14px}
/* families/data-display/family.css */
.dd-axis-row div span{position:absolute;top:0;transform:translateX(-50%)}
/* families/data-display/family.css */
.dd-axis-row div span:first-child{transform:none}
/* families/data-display/family.css */
.dd-fun{display:flex;flex-direction:column;padding:var(--s-3) var(--s-4) var(--s-4)}
/* families/data-display/family.css */
.dd-skel{width:100%;display:flex;align-items:flex-end;gap:6px;height:150px}
/* families/data-display/family.css */
.dd-skel .dd-sk{flex:1}
/* families/data-display/family.css */
.dd-src{font:var(--w-medium) var(--text-micro)/1 var(--font-code);color:hsl(var(--muted-foreground));padding:3px 5px;border-radius:var(--r-chip);background:hsl(var(--muted))}