/* =====================================================================================================================
   GLASS: the chart stylesheet (src/glass/glass-charts.css, 29 Oct 2026). Styles ONLY the gc- classes that glass.js draws:
   the kit's 14 charts and the IA.glass.draw primitives every page-drawn chart uses (GLASS-GUIDE.md section 8). Nothing
   here styles a page, a part or an old class on its own; an old class appears only beside a gc- class, to outrank the
   old kit's rule for the same element.

   LOAD ORDER: kit.css, deltas.css, glass.css, glass-charts.css, then app.css. Every colour is a contract token from
   glass.css, with the same value as its fallback, so a chart still reads if a token is missing. Every chart word fills
   with a word token (--t1, --t2, --t3), never a raw colour, so a face that steps its words up (glass.css's lit panel
   sets --t3 to its lit grey) steps the chart's words with it.

   WEIGHT. Every rule for a chart's own marks starts at svg.gc:not(#gc-k): the chart's svg root plus an id weight that
   no element carries. A page's own class of the same name (the Green coffee page's .gc-pen, .gc-track, scoped by the
   build to :root[data-page] at 0,3,0) can never restyle a glass chart, and a page that needs a chart drawn differently
   asks the kit. The same weight puts every shape back on display, so a page's display:none on a class it shares with
   the kit cannot hide a mark. The two charts drawn in HTML (hbars, meter) keep a class weight: pages still tune their
   rows' spacing (ask, packaging, online, shops) until they are restyled.

   HOW A MARK GETS ITS COLOUR. A tone class sets --gc-c once (gc-ink, gc-lit, gc-ink2, gc-prev, gc-faint, gc-event,
   gc-amber, gc-green, gc-done); a tick or column fills with it and a line strokes with it. A tone on a group colours every mark
   inside it, so hovering a column (gc-hot) relights the whole column. Series are told apart by lightness and label,
   never hue: amber only for what is past where it should be, green only as the "kept, on rhythm or done" signal (1.1:
   a stage ring closed in green with a fine tick once shipped, gc-done), red never.

   READING (glass.js D.readout). The host takes gc-reads (focusable; a drag along it reads, a drag up or down scrolls the
   page and a pinch still zooms); the svg takes gc-reading while a point is read: the guide and the dot show, the story's words step aside, a
   column or a part being read (gc-hot) is lit and, in a chart read by parts (gc-pread), the other parts dim. In hbars
   the rows not being read dim.

   MOTION (GLASS-GUIDE section 9). A chart is revealed ONCE: a clip that opens left to right (gc-rv-x) or, for stacks
   and columns, bottom to top (gc-rv-y), 900ms after its panel; a line draws in over 1.6s (gc-draw); story dots and
   labels fade in after (gc-fade, 700ms); meters grow from the left and their shortfall follows (gc-grow). Every
   animation starts when the chart is drawn, is timed from its panel's --delay (set by IA.motion.arrive) and fills
   BACKWARDS only, so the resting chart never depends on a class arriving. Each keyframe exists twice (A and B); an
   ancestor .g-play-1 swaps to the B twin so IA.glass.replay restarts it. Reduced motion and html.still: last frame.

   UK English. No em dashes, no en dashes. Example names only.
   ===================================================================================================================== */

/* ---------- the chart's own surface ---------- */
svg.gc:not(#gc-k){--gc-c:var(--ink,#E7E8E4);--gc-halo:#1D1F1C;overflow:visible;-webkit-user-select:none;user-select:none}
svg.gc:not(#gc-k) :is(g,path,line,rect,circle,text,tspan){display:inline}
svg.gc:not(#gc-k) .gc-ink{--gc-c:var(--ink,#E7E8E4)}
svg.gc:not(#gc-k) .gc-lit{--gc-c:var(--t1,#ECEDEA)}
svg.gc:not(#gc-k) .gc-ink2{--gc-c:var(--ink-2,rgba(236,237,234,0.45))}
svg.gc:not(#gc-k) .gc-prev{--gc-c:var(--ink-prev,rgba(236,237,234,0.30))}
svg.gc:not(#gc-k) .gc-faint{--gc-c:var(--ink-faint,rgba(236,237,234,0.22))}
svg.gc:not(#gc-k) .gc-event{--gc-c:rgba(236,237,234,0.92)}
svg.gc:not(#gc-k) .gc-amber{--gc-c:var(--amber,#E2A447)}
svg.gc:not(#gc-k) .gc-green{--gc-c:var(--green,#4FC77E)}
/* 1.1: done (D.stageRing {done:true}): the closed ring and its fine tick in --g-green, the green no bridge remap can grey;
   the stale rule (glass.css 3.3) greys it to t2 while its panel is behind, updating or loading */
svg.gc:not(#gc-k) .gc-done{--gc-c:var(--g-green,#4FC77E)}
svg.gc:not(#gc-k) .gc-tick{fill:none;stroke:var(--gc-c);stroke-width:1.25px;stroke-linecap:round;stroke-linejoin:round}

/* ---------- the chart's words: Inter, tabular, never mono, nothing under 11px; always a word token ---------- */
svg.gc:not(#gc-k) .gc-txt{font-family:var(--g-font,Inter,system-ui,-apple-system,"Segoe UI",sans-serif);font-size:11px;font-weight:400;font-style:normal;letter-spacing:0;font-feature-settings:"tnum" 1,"cv11" 1;fill:var(--t3,#8E908A);stroke:none;text-transform:none}
svg.gc:not(#gc-k) .gc-txt.gc-t2{fill:var(--t2,#9A9C96)}
svg.gc:not(#gc-k) .gc-txt.gc-t1{fill:var(--t1,#ECEDEA)}
svg.gc:not(#gc-k) .gc-txt.gc-v{font-size:12px;fill:var(--t1,#ECEDEA)}
svg.gc:not(#gc-k) .gc-txt.gc-v2{font-size:12px;fill:var(--t2,#9A9C96)}
svg.gc:not(#gc-k) .gc-txt .gc-unit{font-size:11px;fill:var(--t2,#9A9C96)}
/* a t3 word on the bright part of its face (a resting panel's lit corner, a band or a tile there) steps up to t2 so it
   keeps 4.5:1 (glass.js D.lift marks it; glass.css lifts words on hover, press and chosen faces) */
svg.gc:not(#gc-k) .gc-txt.gc-lift{fill:var(--t2,#9A9C96)}

/* ---------- marks ---------- */
svg.gc:not(#gc-k) .gc-tk{fill:var(--gc-c);stroke:none;transition:opacity .15s ease,fill .15s ease}
svg.gc:not(#gc-k) .gc-ln{fill:none;stroke:var(--gc-c);stroke-width:1.25px;stroke-linecap:round;stroke-linejoin:round}
svg.gc:not(#gc-k) .gc-ln.gc-prev{stroke-width:1.25px;stroke-dasharray:0 3.2}
svg.gc:not(#gc-k) .gc-ln.gc-thin{stroke-width:1px}
svg.gc:not(#gc-k) .gc-usual{fill:none;stroke:var(--target,rgba(255,255,255,0.32));stroke-width:1px;stroke-dasharray:3 4}
svg.gc:not(#gc-k) .gc-band{fill:var(--band,rgba(255,255,255,0.04));stroke:none}
svg.gc:not(#gc-k) .gc-track,svg.gc:not(#gc-k) .gc-base{fill:none;stroke:rgba(255,255,255,0.12);stroke-width:1px}
svg.gc:not(#gc-k) .gc-grid{fill:none;stroke:var(--grid,rgba(255,255,255,0.05));stroke-width:1px}
svg.gc:not(#gc-k) .gc-dot{fill:var(--gc-c);stroke:var(--gc-halo);stroke-width:2.5px;paint-order:stroke}
svg.gc:not(#gc-k) .gc-ring{fill:none;stroke:var(--gc-c);stroke-width:1px}
svg.gc:not(#gc-k) .gc-hollow{fill:var(--gc-halo);stroke:var(--ink-2,rgba(236,237,234,0.45));stroke-width:1px}
svg.gc:not(#gc-k) .gc-notch{fill:rgba(255,255,255,0.55);stroke:none}
svg.gc:not(#gc-k) .gc-col-p{fill:none;stroke:var(--gc-c);stroke-width:1px}
svg.gc:not(#gc-k) .gc-col-pf{fill:var(--gc-c);fill-opacity:.42;stroke:none}
svg.gc:not(#gc-k) .gc-link{fill:none;stroke:var(--target,rgba(255,255,255,0.32));stroke-width:1px;stroke-dasharray:2 3}
svg.gc:not(#gc-k) .gc-orderby{fill:none;stroke:var(--t2,#9A9C96);stroke-width:1px;stroke-dasharray:2 2}
svg.gc:not(#gc-k) .gc-rw{fill:none;stroke:var(--gc-c);stroke-width:1px}
svg.gc:not(#gc-k) .gc-rt{fill:none;stroke:var(--gc-c);stroke-width:1px}
svg.gc:not(#gc-k) .gc-gate{fill:var(--t2,#9A9C96);stroke:none}
svg.gc:not(#gc-k) .gc-ring-tr{fill:none;stroke:rgba(255,255,255,0.12);stroke-width:1.25px}
svg.gc:not(#gc-k) .gc-arc{fill:none;stroke:var(--gc-c);stroke-width:1.25px;stroke-linecap:round}
svg.gc:not(#gc-k) .gc-legend-sw{fill:rgba(255,255,255,0.09);stroke:none}

/* the mini set (notes made visual, 4 Nov; GLASS-GUIDE section 8, "The mini set"): a mini's tile face, its one strong
   figure, the hero's greeting and sentence, a change chip and its words. Up is green (the kit's up), down stays t2;
   amber words only beside the one amber mark. A mini is the kit's own marks inside this frame, never a second style */
svg.gc:not(#gc-k) .gc-mini-bg{fill:rgba(255,255,255,0.035);stroke:rgba(255,255,255,0.06);stroke-width:1px}
svg.gc:not(#gc-k) .gc-chip-bg{fill:rgba(255,255,255,0.06);stroke:none}
svg.gc:not(#gc-k) .gc-txt.gc-fig{font-size:22px;font-weight:300;letter-spacing:-0.01em;fill:var(--t1,#ECEDEA)}
svg.gc:not(#gc-k) .gc-txt.gc-fig.gc-xl{font-size:34px;letter-spacing:-0.02em}
svg.gc:not(#gc-k) .gc-txt.gc-im.gc-fig.gc-xl{font-size:32px}
svg.gc:not(#gc-k) .gc-txt.gc-hi{font-size:24px;font-weight:300;letter-spacing:-0.01em;fill:var(--t1,#ECEDEA)}
svg.gc:not(#gc-k) .gc-txt.gc-sent{font-size:14px;fill:var(--t2,#9A9C96)}
/* an image's words (the channels' pictures): 14/11 13/11 of the page's, so a picture shown narrower than its 320 keeps 11px */
svg.gc:not(#gc-k) .gc-txt.gc-im{font-size:13px}
svg.gc:not(#gc-k) .gc-txt.gc-im:is(.gc-v,.gc-v2){font-size:14px}
svg.gc:not(#gc-k) .gc-txt.gc-im.gc-fig{font-size:24px}
svg.gc:not(#gc-k) .gc-txt.gc-im.gc-hi{font-size:28px}
svg.gc:not(#gc-k) .gc-txt.gc-im.gc-sent{font-size:16px}
svg.gc:not(#gc-k) .gc-txt.gc-im .gc-unit{font-size:13px}
svg.gc:not(#gc-k) .gc-txt.gc-up{fill:var(--green,#4FC77E)}
svg.gc:not(#gc-k) .gc-txt.gc-amb{fill:var(--amber,#E2A447)}

/* certainty fills (money leaving: booked, likely, possible): solid, hatched, outline; never red */
svg.gc:not(#gc-k) .gc-cert{--gc-c:var(--ink-2,rgba(236,237,234,0.45))}
svg.gc:not(#gc-k) .gc-cert-firm{fill:var(--gc-c);stroke:none}
svg.gc:not(#gc-k) .gc-cert-likely{stroke:var(--gc-c);stroke-width:1px}
svg.gc:not(#gc-k) .gc-cert-maybe{fill:none;stroke:var(--gc-c);stroke-width:1px}
svg.gc:not(#gc-k) .gc-hatch{fill:var(--ink-2,rgba(236,237,234,0.45));stroke:none}

/* the pencil (Coming next): the shape only, a 14% dashed edge, no figure */
svg.gc:not(#gc-k) .gc-pen{fill:none;stroke:rgba(255,255,255,0.14);stroke-width:1px;stroke-dasharray:3 4;stroke-linecap:round}
svg.gc:not(#gc-k) .gc-pen-fill{fill:rgba(255,255,255,0.02);stroke:none}

/* ---------- reading (hover, touch, keyboard): a 1px guide at 18% white and a t1 dot on the point ---------- */
.gc-reads{touch-action:pan-y pinch-zoom;-webkit-tap-highlight-color:transparent}
/* K12: on a phone every chart that reads is a 44px target, whatever its drawn height (a meter is 9px, a dayline row 16):
   a centred hit box rides on the host's ::after (every host is position:relative; none has its own ::after). Each edge
   sits at min(0, 50% - 22px), so the box is max(100%, 44px) each way with no transform: WebKit counts a transformed
   box's untransformed place toward the page's width, and a 322px box at left:50% pushed pages 120px sideways. */
@media (pointer:coarse),(max-width:899px){.gc-reads::after{content:"";position:absolute;top:min(0px,calc(50% - 22px));bottom:min(0px,calc(50% - 22px));left:min(0px,calc(50% - 22px));right:min(0px,calc(50% - 22px))}}
svg.gc:not(#gc-k) .gc-hit{fill:transparent;stroke:none;cursor:crosshair}
svg.gc:not(#gc-k) .gc-guide{stroke:rgba(255,255,255,0.18);stroke-width:1px;opacity:0;transition:opacity .15s ease;pointer-events:none}
svg.gc:not(#gc-k) .gc-hdot{fill:var(--t1,#ECEDEA);stroke:var(--gc-halo);stroke-width:2.5px;paint-order:stroke;opacity:0;transition:opacity .15s ease;pointer-events:none}
svg.gc:not(#gc-k) .gc-hprev{fill:var(--gc-halo);stroke:var(--ink-prev,rgba(236,237,234,0.30));stroke-width:1.25px;opacity:0;transition:opacity .15s ease;pointer-events:none}
svg.gc.gc-reading:not(#gc-k) :is(.gc-guide,.gc-hdot,.gc-hprev){opacity:1}
svg.gc.gc-reading:not(#gc-k) .gc-story-hide{opacity:0;transition:opacity .15s ease}
svg.gc:not(#gc-k) :is(.gc-col,.gc-cell).gc-hot{--gc-c:var(--t1,#ECEDEA)}
svg.gc:not(#gc-k) .gc-slot.gc-hot{opacity:1}
svg.gc.gc-reading:not(#gc-k) .gc-slot:not(.gc-hot){opacity:.45}
svg.gc.gc-pread.gc-reading:not(#gc-k) .gc-part:not(.gc-hot)>.gc-tk{opacity:.35}

/* page readers light a part by toggling .hot and .dim on the kit's carrier circles (r=0, never painted): split's
   fill strings, waffle's __waffle nodes. A part whose carriers are not hot dims while the chart is hovered. */
svg.gc:not(#gc-k) .gc-carrier{pointer-events:none}
.hovering svg.gc:not(#gc-k) .gc-part:has(> .gc-carrier.dim:not(.hot))>.gc-tk{opacity:.28}

/* ---------- the two kit charts that stay in HTML (pages read their old classes); rows spaced once, by .hb's gap ---------- */
.gc-mt.mt-t,.gc-hb .gc-hb-t.hb-t{position:relative;display:block;height:auto;border-radius:0;background:none;box-shadow:none}
.gc-mt svg,.gc-hb-t svg{display:block;overflow:visible}
.gc-hb .gc-hb-l.hb-l{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 6px;font-family:var(--g-font,Inter,system-ui,sans-serif);font-size:14px;line-height:1.3;font-weight:400;letter-spacing:0;color:var(--t1,#ECEDEA)}
.gc-hb .gc-hb-l.hb-l span{min-width:0}
.gc-hb .gc-hb-l.hb-l b{font-family:var(--g-font,Inter,system-ui,sans-serif);font-size:14px;line-height:1;font-weight:400;letter-spacing:0;color:var(--t1,#ECEDEA);font-feature-settings:"tnum" 1,"cv11" 1;white-space:nowrap}
.gc-hb .gc-hb-n.hb-n{margin-top:6px;font-size:12.5px;line-height:1.35;color:var(--t2,#9A9C96)}
.gc-hb .gc-hb-t.hb-t{transition:opacity .15s ease}
.gc-hb.gc-reading .gc-hb-r:not(.gc-hot) .gc-hb-t.hb-t{opacity:.45}

/* ---------- motion: the one reveal, the line, the fade, the grow (A and B twins) ---------- */
svg.gc.gc-rv-x:not(#gc-k){animation:gcRevealXA 900ms var(--ease-draw,cubic-bezier(0.45,0,0.15,1)) calc(var(--delay,0ms) + 320ms) backwards}
svg.gc.gc-rv-y:not(#gc-k){animation:gcRevealYA 900ms var(--ease-draw,cubic-bezier(0.45,0,0.15,1)) calc(var(--delay,0ms) + 320ms) backwards}
/* the dash lives only inside the draw, so a resting line is solid in any browser, whatever it does with pathLength */
svg.gc:not(#gc-k) .gc-draw{animation:gcDrawA 1.6s var(--ease-draw,cubic-bezier(0.45,0,0.15,1)) calc(var(--delay,0ms) + 320ms) backwards}
svg.gc:not(#gc-k) .gc-fade{animation:gcFadeA 700ms ease calc(var(--delay,0ms) + var(--gc-at,1500ms)) backwards}
svg.gc:not(#gc-k) .gc-grow{transform-box:fill-box;transform-origin:0 50%;animation:gcGrowA 1s var(--ease,cubic-bezier(0.16,1,0.3,1)) calc(var(--delay,0ms) + 320ms + var(--gc-dd,0ms)) backwards}
.g-play-1 svg.gc.gc-rv-x:not(#gc-k),svg.g-play-1.gc.gc-rv-x:not(#gc-k){animation-name:gcRevealXB}
.g-play-1 svg.gc.gc-rv-y:not(#gc-k),svg.g-play-1.gc.gc-rv-y:not(#gc-k){animation-name:gcRevealYB}
.g-play-1 svg.gc:not(#gc-k) .gc-draw{animation-name:gcDrawB}
.g-play-1 svg.gc:not(#gc-k) .gc-fade{animation-name:gcFadeB}
.g-play-1 svg.gc:not(#gc-k) .gc-grow{animation-name:gcGrowB}
@keyframes gcRevealXA{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes gcRevealXB{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes gcRevealYA{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes gcRevealYB{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes gcDrawA{from{stroke-dasharray:1 1;stroke-dashoffset:1}to{stroke-dasharray:1 1;stroke-dashoffset:0}}
@keyframes gcDrawB{from{stroke-dasharray:1 1;stroke-dashoffset:1}to{stroke-dasharray:1 1;stroke-dashoffset:0}}
@keyframes gcFadeA{from{opacity:0}to{opacity:1}}
@keyframes gcFadeB{from{opacity:0}to{opacity:1}}
@keyframes gcGrowA{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes gcGrowB{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* reduced motion and html.still (#still): every chart at its last frame, at once */
@media (prefers-reduced-motion:reduce){svg.gc,svg.gc *,.gc-hb *,.gc-reads{animation:none!important;transition:none!important}}
.still svg.gc,.still svg.gc *,.still .gc-hb *{animation:none!important;transition:none!important}
/* a forecast's range (D.forecast): a soft band with a dashed edge, beyond the solid past; never a colour */
svg.gc:not(#gc-k) .gc-fcband{fill:rgba(255,255,255,0.06);stroke:var(--ink-2,rgba(236,237,234,0.45));stroke-width:1px;stroke-dasharray:2 3}
svg.gc:not(#gc-k) .gc-fclink{fill:none;stroke:var(--target,rgba(255,255,255,0.32));stroke-width:1px;stroke-dasharray:3 4}