/* Glance charts (glance-charts.mjs): rings, donuts, sparklines, stacked bars, meters, every goal on
   one time axis, and a goal's pace. Colours come from each page's theme tokens, so day and night work. */
.g-ring,.g-donut,.g-spark,.g-stack,.g-meter,.g-gantt,.g-pace-chart,.g-key{--g-c:var(--accent)}
.good{--g-c:var(--good)}.warn{--g-c:var(--warn)}.bad{--g-c:var(--bad,var(--danger))}.violet{--g-c:var(--violet,var(--human))}.quiet{--g-c:var(--quiet)}.accent,.live{--g-c:var(--accent)}

/* Tooltip */
.g-tip{position:absolute;z-index:80;max-width:min(320px,calc(100vw - 16px));padding:6px 9px;border:1px solid var(--line-strong,var(--line));border-radius:8px;background:var(--surface-solid,var(--surface));color:var(--text);font:500 12px/1.4 var(--sans,inherit);box-shadow:0 8px 24px rgba(0,0,0,.28);pointer-events:none}
.g-tip[hidden]{display:none}
[data-tip]{cursor:default}button[data-tip]{cursor:pointer}
[data-tip]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Ring */
.g-ring{display:grid;justify-items:center;gap:6px;margin:0;text-align:center;min-width:0}
.g-ring-dial{position:relative;width:var(--g-size,72px);aspect-ratio:1}
.g-ring.s{--g-size:52px}.g-ring.l{--g-size:104px}
.g-ring-svg,.g-donut-svg{width:100%;height:100%;display:block;overflow:visible}
.g-ring-track{fill:none;stroke:var(--sunken,rgba(127,127,127,.14));stroke-width:5}
.g-ring-track.empty{stroke-dasharray:2 3;stroke:var(--line)}
.g-ring-value{fill:none;stroke:var(--g-c);stroke-width:5;stroke-linecap:round;transition:stroke-dasharray .7s var(--ease-out,ease)}
.g-ring-mark{stroke:var(--text);stroke-width:1.6;stroke-linecap:round}
.g-ring-text{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;font:700 calc(var(--g-size,72px) * .22)/1 var(--mono,monospace);color:var(--text);font-variant-numeric:tabular-nums}
.g-ring-text small{font:500 10px/1.2 var(--sans,inherit);color:var(--quiet);margin-top:3px}
.g-ring-cap{display:grid;gap:2px;max-width:150px}
.g-ring-label{font-size:12px;font-weight:650;color:var(--text);line-height:1.25}
.g-ring-sub{font-size:11px;color:var(--quiet);line-height:1.3}
.g-rings{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:14px 10px;align-items:start}

/* Donut and legends */
.g-donut{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.g-donut-dial{--g-size:112px}
.g-donut-part{fill:none;stroke:var(--g-c);stroke-width:6;transition:stroke-width .2s,opacity .2s}
.g-donut-svg:has(.hot) .g-donut-part:not(.hot){opacity:.35}.g-donut-part.hot,.g-donut-part.on{stroke-width:8}
.g-donut .g-ring-text b{font:700 24px/1 var(--mono,monospace)}
.g-legend{display:grid;gap:4px;margin:0;padding:0;list-style:none;font-size:12.5px;min-width:0}
.g-legend-row{display:flex;flex-wrap:wrap;gap:4px 14px}
.g-key-button{display:flex;align-items:center;gap:8px;width:100%;min-height:28px;padding:3px 8px;border:1px solid transparent;border-radius:8px;background:none;color:var(--text);font:inherit;text-align:left}
button.g-key-button:hover,button.g-key-button[aria-pressed=true]{border-color:var(--line);background:var(--accent-soft)}
.g-key i{flex:none;width:10px;height:10px;border-radius:3px;background:var(--g-c)}
.g-key b{margin-left:auto;padding-left:10px;font:600 12px var(--mono,monospace);color:var(--muted)}
.g-legend-row .g-key{display:flex;align-items:center;gap:6px;color:var(--muted)}.g-legend-row .g-key b{margin-left:2px;padding:0}
.g-key i[style]{background:hsl(var(--hue) 70% 58%)}

/* Sparkline */
.g-spark{display:grid;min-width:0}
.g-spark-plot{position:relative;height:36px}
.g-spark-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.g-spark-area{fill:var(--g-c);opacity:.14}
.g-spark-line{fill:none;stroke:var(--g-c);stroke-width:1.8;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.g-spark-dot{position:absolute;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--g-c);box-shadow:0 0 0 3px color-mix(in srgb,var(--g-c) 22%,transparent)}
.g-spark-hits{position:absolute;inset:0;display:flex}.g-spark-hit{flex:1}.g-spark-hit:hover{background:linear-gradient(transparent,color-mix(in srgb,var(--g-c) 14%,transparent))}
.g-spark-empty{display:grid;place-items:center;height:36px;color:var(--quiet);font-size:11.5px;border:1px dashed var(--line);border-radius:8px}

/* Stacked bar and meter */
.g-stack{display:grid;gap:8px;min-width:0}
.g-stack-bar{display:flex;gap:2px;height:14px;border-radius:999px;overflow:hidden;background:var(--sunken,rgba(127,127,127,.14))}
.g-stack-bar.empty{border:1px dashed var(--line);background:none}
.g-stack-seg{flex:0 0 var(--w);min-width:3px;background:var(--g-c);transition:filter .15s}
.g-stack-seg[style*="--hue"]{background:hsl(var(--hue) 70% 58%)}
.g-stack-seg:hover{filter:brightness(1.25)}
.g-meter{position:relative;height:10px;border-radius:999px;background:var(--sunken,rgba(127,127,127,.14))}
.g-meter-fill{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:inherit;background:var(--g-c);transition:width .6s var(--ease-out,ease)}
.g-meter-mark{position:absolute;top:-4px;bottom:-4px;left:var(--x);width:3px;margin-left:-1.5px;border-radius:2px;background:var(--text)}
.g-meter-mark::after{content:"";position:absolute;inset:-6px -8px}

/* Every goal's progress, each on its own timeline */
.g-gantt{display:grid;gap:6px;min-width:0}
.g-gantt-rows{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.g-gantt-row{display:grid;grid-template-columns:minmax(120px,220px) minmax(0,1fr) minmax(76px,auto);align-items:center;gap:12px;width:100%;min-height:44px;padding:6px 10px;border:1px solid transparent;border-radius:10px;background:none;color:var(--text);font:inherit;text-align:left}
button.g-gantt-row:hover{background:var(--accent-soft);border-color:var(--line)}
.g-gantt-row.is-selected{border-color:var(--accent-line);background:var(--accent-soft)}
.g-gantt-row.needs .g-gantt-name b::after{content:" •";color:var(--warn)}
.g-gantt-name{display:grid;min-width:0}.g-gantt-name b{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-gantt-when{font:500 11.5px var(--mono,monospace);color:var(--muted);text-align:right;white-space:nowrap}
.g-pace{font-size:11px;color:var(--quiet)}.g-pace.good{color:var(--good)}.g-pace.warn{color:var(--warn)}.g-pace.bad{color:var(--bad,var(--danger))}.g-pace.live{color:var(--accent-text,var(--accent))}
.g-gantt-lane{position:relative;display:block;height:22px}
.g-gantt-seg{position:absolute;top:5px;height:12px;left:var(--x);width:var(--w);border-right:2px solid var(--surface-solid,var(--surface));background:var(--sunken,rgba(127,127,127,.14))}
.g-gantt-seg:first-child{border-radius:6px 0 0 6px}.g-gantt-seg:nth-child(4){border-radius:0 6px 6px 0;border-right:0}
.g-gantt-seg.done{background:color-mix(in srgb,var(--accent) 50%,transparent)}.g-gantt-seg.current{background:var(--accent);box-shadow:0 0 10px var(--accent-glow,transparent)}
.g-gantt-row.writing .g-gantt-seg{background:color-mix(in srgb,var(--violet,var(--human)) 60%,transparent)}
.g-gantt-row.solved .g-gantt-seg{background:color-mix(in srgb,var(--good) 50%,transparent)}
.g-gantt-row.ended:not(.solved) .g-gantt-seg{background:color-mix(in srgb,var(--quiet) 40%,transparent)}
.g-gantt-due{position:absolute;top:2px;bottom:2px;left:var(--x);width:2px;margin-left:-1px;background:var(--text);opacity:.55}
.g-gantt-now{position:absolute;top:-2px;bottom:-2px;left:var(--x);width:3px;margin-left:-1.5px;border-radius:2px;background:var(--warn);box-shadow:0 0 0 2px var(--surface-solid,var(--surface))}
.g-gantt-mark{position:absolute;top:1px;left:var(--x);transform:translateX(-50%);display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font:700 11px/1 var(--sans,inherit);background:var(--surface-solid,var(--surface));border:2px solid var(--quiet)}
.g-gantt-mark.solved{color:var(--good);border-color:var(--good)}.g-gantt-mark.ended{color:var(--bad,var(--danger));border-color:var(--bad,var(--danger))}
.g-gantt-key i{width:14px;height:8px;border-radius:3px}
.g-gantt-key.done i{background:color-mix(in srgb,var(--accent) 50%,transparent)}.g-gantt-key.current i{background:var(--accent)}.g-gantt-key.next i{background:var(--sunken,rgba(127,127,127,.14));outline:1px solid var(--line)}
.g-gantt-key.now i{width:3px;height:12px;background:var(--warn)}.g-gantt-key.solved i,.g-gantt-key.ended i{display:none}
.g-gantt-key.solved{color:var(--good)}.g-gantt-key.ended{color:var(--bad,var(--danger))}
.g-gantt-note{margin:0}

/* A goal's pace */
.g-pace-chart{display:grid;gap:6px;min-width:0}
.g-pace-frame{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px}
.g-pace-y{display:flex;flex-direction:column;justify-content:space-between;font:500 10px var(--mono,monospace);color:var(--quiet);padding:16px 0 0}
.g-pace-plot{position:relative;height:170px;border-bottom:1px solid var(--line);margin-top:0}
.g-pace-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.g-pace-band{fill:transparent}.g-pace-band.i1{fill:var(--sunken,rgba(127,127,127,.06))}.g-pace-band.current{fill:var(--accent-soft)}
.g-pace-plan{fill:none;stroke:var(--quiet);stroke-width:1.6;stroke-dasharray:5 4;vector-effect:non-scaling-stroke}
.g-pace-area{fill:var(--accent);opacity:.12}
.g-pace-line{fill:none;stroke:var(--accent);stroke-width:2.2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.g-pace-stage{position:absolute;top:2px;left:var(--x);width:var(--w);padding:0 6px;font:600 10.5px var(--mono,monospace);letter-spacing:.04em;color:var(--quiet);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.g-pace-stage.current{color:var(--accent-text,var(--accent))}
.g-pace-marker{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px}
.g-pace-marker::after{content:"";position:absolute;inset:0 -6px}
.g-pace-marker.now{background:var(--warn)}.g-pace-marker.deadline{background:repeating-linear-gradient(var(--text) 0 4px,transparent 4px 7px);opacity:.6}.g-pace-marker.finish{background:var(--good)}
.g-pace-dot,.g-pace-chart button.g-pace-dot{position:absolute;left:var(--x);top:var(--y);box-sizing:border-box;width:12px;height:12px;min-width:0;min-height:0;margin:-6px 0 0 -6px;padding:0;line-height:0;border:2px solid var(--surface-solid,var(--surface));border-radius:50%;background:hsl(var(--hue) 70% 58%);z-index:1;transition:transform .15s}
.g-pace-plot button.g-pace-dot:hover:not(:disabled),.g-pace-plot button.g-pace-dot:focus-visible{transform:scale(1.45);background:hsl(var(--hue) 70% 58%);border-color:var(--surface-solid,var(--surface))}
.g-pace-key i{width:14px;height:3px;border-radius:2px}
.g-pace-key.posts i{background:var(--accent)}.g-pace-key.plan i{background:repeating-linear-gradient(90deg,var(--quiet) 0 4px,transparent 4px 7px)}.g-pace-key.now i{width:3px;height:12px;background:var(--warn)}.g-pace-key.deadline i{width:3px;height:12px;background:var(--text);opacity:.6}

/* Glance boards */
.glance-board{display:grid;gap:16px}
.glance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.glance-card{display:grid;gap:10px;align-content:start;min-width:0;padding:14px;border:1px solid var(--line);border-radius:var(--r-m,14px);background:var(--raised,transparent);color:var(--text);text-decoration:none}
.glance-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.glance-card .glance-card-title{margin:0;font:600 10.5px/1.3 var(--mono,monospace);letter-spacing:.1em;text-transform:uppercase;color:var(--quiet)}
.glance-card-go{font-size:12px;font-weight:600;color:var(--accent-text,var(--accent));text-decoration:none;white-space:nowrap}.glance-card-go:hover{text-decoration:underline}
.glance-trend{display:block;font-size:10.5px;color:var(--quiet)}.glance-trend.good{color:var(--good)}.glance-trend.warn{color:var(--warn)}

.glance-card-value{font:700 20px/1.1 var(--mono,monospace);font-variant-numeric:tabular-nums}
.glance-card small{color:var(--quiet);font-size:11.5px;line-height:1.35}
.glance-lights{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.glance-light{display:flex;align-items:center;gap:8px;min-height:34px;padding:6px 12px 6px 10px;border:1px solid var(--line);border-radius:999px;background:var(--raised,transparent);color:var(--text);font:600 12.5px var(--sans,inherit);text-decoration:none}
a.glance-light:hover{border-color:var(--accent-line)}
.glance-light i{width:10px;height:10px;border-radius:50%;background:var(--g-c,var(--quiet));box-shadow:0 0 0 3px color-mix(in srgb,var(--g-c,var(--quiet)) 22%,transparent)}
.glance-light b{font-weight:inherit}
.glance-light span{color:var(--muted);font-weight:500}
.glance-light{--g-c:var(--quiet)}.glance-light.good{--g-c:var(--good)}.glance-light.warn{--g-c:var(--warn)}.glance-light.bad{--g-c:var(--bad,var(--danger))}.glance-light.live{--g-c:var(--accent)}
.glance-light.live i{animation:glance-pulse 1.8s ease-in-out infinite}
@keyframes glance-pulse{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--g-c) 8%,transparent)}}
.glance-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;align-items:stretch}
.glance-step{position:relative;display:grid;gap:2px;padding:8px 10px;border-radius:10px;background:var(--sunken,rgba(127,127,127,.08))}
.glance-step b{font:700 18px var(--mono,monospace)}.glance-step span{font-size:11px;color:var(--quiet)}
.glance-step:not(:last-child)::after{content:"→";position:absolute;right:-6px;top:50%;transform:translate(50%,-50%);color:var(--quiet);font-size:12px;z-index:1}
.glance-step.on{background:var(--accent-soft);outline:1px solid var(--accent-line)}
.glance-spark-row{display:grid;grid-template-columns:minmax(78px,auto) minmax(0,1fr);align-items:center;gap:12px}
.glance-spark-text{display:grid;gap:2px}.glance-spark-row .glance-card-value{font-size:17px}
.glance-spark-chart{display:grid;gap:2px;min-width:0}.glance-spark-chart .g-spark{width:100%}
.glance-goals{display:grid;gap:6px;min-width:0}
.g-gantt.compact .g-gantt-row{grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;min-height:0;padding:6px 8px}.g-gantt.compact .g-gantt-lane{grid-column:1/-1;grid-row:2;height:18px}
.g-gantt.compact .g-gantt-seg{top:4px;height:10px}.g-gantt.compact .g-gantt-name b{font-size:12.5px}

@media(max-width:720px){
  .g-gantt-row{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px}.g-gantt-lane{grid-column:1/-1;grid-row:2}
  .g-pace-plot{height:140px}.g-donut{justify-content:center}
}
@media(prefers-reduced-motion:reduce){.g-ring-value,.g-meter-fill,.g-donut-part{transition:none}.glance-light.live i{animation:none}}

/* The public Commons: the last 24 hours at a glance */
.pulse-panel #pulse{display:grid;gap:12px}
.pulse-panel .glance-light{margin:0;width:fit-content}
.pulse-panel .pulse-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pulse-panel .pulse-sub{margin:4px 0 -4px}
.pulse-panel .g-spark-plot{height:44px}
.pulse-axis{display:flex;justify-content:space-between;margin-top:-8px;font:500 10.5px var(--mono,monospace);color:var(--quiet)}