/* chart.css: owner lane B. Chart parts (CF-DS 3.15 progress bars, 3.19 charts): .pbar, daily .bars, .ring, legend. Plain DS-1: data colours only, no accent layer. */

/* progress bar: hatched remainder everywhere; sm 6, md 10, lg 14; fills are done, new (last 7 days, pink), some, std, over */
.pbar{position:relative;display:flex;height:10px;border-radius:var(--r-xs);background:var(--hatch),rgb(var(--p-mist) / .05);box-shadow:var(--edge)}
.pbar.sm{height:6px;border-radius:var(--r-xs)}
.pbar.lg{height:14px;border-radius:var(--r-1)}
.pbar i{flex:none;height:100%;min-width:4px;background:rgb(var(--p-accent-rgb) / .55)}
.pbar i:first-child{border-radius:var(--pill) 0 0 var(--pill)}
.pbar i.end{border-radius:0 var(--pill) var(--pill) 0}
.pbar i:first-child.end{border-radius:var(--pill)}
.pbar .done{background:linear-gradient(90deg,var(--p-accent-600,var(--data-accent)),var(--accent))}
.pbar.lg .done{box-shadow:0 2px 18px -2px rgb(var(--p-accent-rgb) / .55)}
.pbar .new{background:linear-gradient(90deg,var(--p-pink-400,var(--data-pink-2)),var(--p-pink-200,var(--data-pink)))}
.pbar.lg .new{box-shadow:0 2px 18px -2px rgba(255,143,208,.75)}
.pbar .some{background:var(--accent-line)}
.pbar .std{background:var(--accent-soft-2)}
.pbar .over{background:var(--amber)}
.pbar.stacked{gap:2px;overflow:hidden}
.pbar.stacked i{border-radius:0}
.pbar-row{display:grid;gap:var(--s-2);min-width:0}
.pbar-row .top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);color:var(--text-2);font:400 var(--fs-1)/16px var(--font)}
.pbar-row .top .l{display:flex;align-items:center;gap:var(--s-2);min-width:0}
.pbar-row .top b{color:var(--text);font:600 var(--fs-2)/18px var(--font);font-variant-numeric:tabular-nums}
.pbar-row .top b span{color:var(--text-3)}
.pbar-rows{display:grid;gap:var(--s-4)}

/* day bars: every column stands on a full-height hatched track; a zero day is the track only (.z); last 7 days pink (.new); today (.today) */
.bars{display:flex;align-items:flex-end;gap:2px;height:56px;padding-bottom:1px;box-shadow:inset 0 -1px 0 var(--line-strong)}
.bars i{position:relative;flex:1 1 0;min-width:0;height:100%;border-radius:var(--r-xs) var(--r-xs) 0 0;background:var(--hatch),rgb(var(--p-mist) / .03)}
.bars i::after{content:"";position:absolute;inset:auto 0 0;height:max(2px,calc(var(--v) * 100%));border-radius:var(--r-xs) var(--r-xs) 0 0;background:var(--accent-line)}
.bars i.z::after{display:none}
.bars i.new::after{background:linear-gradient(180deg,var(--data-pink),var(--data-pink-2));box-shadow:0 0 12px -2px rgba(255,143,208,.55)}
.bars i.today::after{background:linear-gradient(180deg,var(--white),var(--data-pink))}
.bars i:hover::after{filter:brightness(1.3)}
.bars i .badge{position:absolute;bottom:calc(var(--v) * 100% + 8px);left:50%;translate:-50% 0;z-index:1;pointer-events:none;opacity:0;transition:opacity var(--dur-1) var(--ease)}
.bars i:hover .badge{opacity:1}
.bars-ax{display:flex;justify-content:space-between;margin-top:6px;color:var(--text-3);font:400 var(--fs-1)/16px var(--font)}

/* ring (gauge) and legend */
.ring-w{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.ring{position:relative;flex:none;width:112px;height:112px}
.ring svg{display:block;width:112px;height:112px;transform:rotate(-90deg)}
.ring .c{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:0;text-align:center}
.ring .c b{font:600 var(--fs-7)/32px var(--font);letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums}
.ring .c span{font:400 var(--fs-1)/16px var(--font);color:var(--text-3)}
.lgd{display:grid;gap:var(--s-2);min-width:200px;margin:0;padding:0;list-style:none}
.lgd li{display:grid;grid-template-columns:9px minmax(0,1fr) auto;align-items:center;gap:10px;color:var(--text-2);font-size:var(--fs-2);line-height:18px}
.lgd li i{width:9px;height:9px;border-radius:50%}
.lgd li b{color:var(--text);font:600 var(--fs-2)/18px var(--font);font-variant-numeric:tabular-nums}
.lgd .done{background:linear-gradient(135deg,var(--p-accent-600,var(--data-accent)),var(--accent))}
.lgd .some{background:var(--accent-line)}
.lgd .left{background:var(--hatch),rgb(var(--p-mist) / .05);box-shadow:var(--edge-strong)}