/* Certant Flat — analytics page local rules. Tokens only, prefix .pg-analytics-. */

/* flat.css offers split--3 only; six widget cards and seventeen chart cards need
   to reflow from several across down to two, which no fixed column count does.
   17 cards with an 18px h4 wrapped five of their names onto two and three lines
   and left ~90px of dead space under every short card; the old gallery ran
   197x120. A tighter column brings the row back to that rhythm. */
.pg-analytics-glyphs { display: grid; grid-template-columns: repeat(auto-fill, minmax(152px, 1fr)); gap: var(--sp-3); }
.pg-analytics-glyph-card { --pad: var(--sp-3); gap: var(--sp-1); }

/* sets the one hue the 23 currentColor glyphs inherit, and stacks glyph over label. */
.pg-analytics-glyph-card { display: flex; flex-direction: column; align-items: flex-start; color: var(--blue); }
.pg-analytics-glyph-card h4 { font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: var(--lh-snug); }

/* Both galleries draw at different viewBox ratios (60x36 and 24x24); sizing by
   height, not width, renders them at one optical size and at the 34px the old
   gallery used, instead of 60px wide and lost in the card. */
.pg-analytics-glyph-card svg { width: auto; height: 34px; }
.pg-analytics-glyphs--widget .pg-analytics-glyph-card svg { height: 30px; }

/* The old card answered the pointer with a teal border and a 2px lift; the lift
   is banned, the acknowledgement is not, so the card takes the page's blue tint. */
.pg-analytics-glyph-card { transition: background var(--dur) var(--ease); }
.pg-analytics-glyph-card:hover { --_bg: var(--blue-tint); }

/* flat.css has no bar-chart primitive; this is the hero demo's revenue chart,
   ported from scripts/question-to-chart.js. A flex column let the caption
   sibling shrink the rect's percentage track below 140px, so every bar at or
   above ~81% rendered the same height; a fixed grid row the rect cannot
   shrink out of keeps every quarter's column the same size and its own bar
   proportional to its value. */
.pg-analytics-bars { display: flex; align-items: flex-end; gap: var(--sp-4); }
.pg-analytics-bar { flex: 1; display: grid; grid-template-rows: 140px auto; justify-items: center; }

/* the moving bar height is the point of the demo; colour is set by class, never
   inline, per the rollout brief. Blue reads as data, bronze marks the one bar
   the paragraph explains. align-self: end anchors the rect to the bottom of
   its fixed-height row so it grows upward like a real bar. */
.pg-analytics-bar-rect { width: 100%; align-self: end; border-radius: var(--r-mark) var(--r-mark) 0 0; background: var(--blue); transition: height 0.7s var(--ease); }
.pg-analytics-bar-rect--dip { background: var(--yellow); }

/* The old chart sat its columns on a hairline; without one the bars float on the tint. */
.pg-analytics-bars { border-bottom: 1.5px solid var(--line); }

/* flat.css's .icon has no default hue; blue marks the prompt as part of the same
   Ask-pillar demo as the bars and citation chips below it. */
.pg-analytics-prompt { color: var(--blue); }

/* the typing demo's cursor is a bare span with no mark of its own; the caret
   blinks on a CSS animation (below) rather than a setInterval writing inline
   visibility, so reduced-motion can reach it. */
.pg-analytics-caret { display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.15em; background: var(--blue); animation: pg-analytics-blink 0.9s steps(2, start) infinite; }
@keyframes pg-analytics-blink { 50% { opacity: 0; } }

/* The chevron wrapped to its own line above the question at 390px, so the demo
   no longer read as one typed line; .cluster has no no-wrap variant. */
.pg-analytics-ask { flex-wrap: nowrap; align-items: flex-start; }
.pg-analytics-ask .pg-analytics-prompt { flex: none; margin-top: 2px; }

/* The demo's "thinking" mark. The original expanded a shadow glow (banned);
   a bronze ring that grows out of a bronze dot carries the same meaning flat. */
.pg-analytics-ring { position: relative; flex: none; width: 10px; height: 10px; }
.pg-analytics-ring::before,
.pg-analytics-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.pg-analytics-ring::before { background: var(--yellow); }
.pg-analytics-ring::after { border: 2px solid var(--yellow); animation: pg-analytics-ring 1.8s var(--ease) infinite; }
@keyframes pg-analytics-ring {
  0%   { transform: scale(1);   opacity: 0.6; }
  70%, 100% { transform: scale(2.6); opacity: 0; }
}

/* The three loading lines faded and slid in on the original; toggling [hidden]
   snapped them. flat.css has no staged-reveal state. */
.pg-analytics-step { opacity: 0; transform: translateX(-4px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.pg-analytics-step.is-on { opacity: 1; transform: none; }

/* The chart panel rose into place over 0.4s on the original; [hidden] snapped it. */
.pg-analytics-chart { opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.pg-analytics-chart.is-on { opacity: 1; transform: none; }

/* .chip carries no border reset and this citation is a real <button>; it also has
   to read inside a 16px sentence rather than as a pill dropped into it, so it
   inherits the paragraph's size and is allowed to wrap. */
.pg-analytics-cite-btn {
  border: 0;
  font-size: inherit;
  line-height: inherit;
  padding: 1px var(--sp-2);
  white-space: normal;
  vertical-align: baseline;
}
/* The index sat welded to the citation text ("36%1"); its own paper ground
   separates it, the way the original's numbered badge did. */
.pg-analytics-cite-num {
  display: inline-block;
  min-width: 15px;
  margin-left: var(--sp-1);
  padding: 0 var(--sp-1);
  border-radius: var(--r-mark);
  background: var(--paper);
  font-size: 11px;
  font-weight: var(--fw-bold);
  text-align: center;
}

/* Eight annotation pins over the dashboard screenshot. flat.css has no overlay
   layer; the percentages are the drawn positions carried from the old page.
   .callout (flat.css) supplies the 24px disc, hue fill and paper rim, and
   button.callout supplies position:absolute + centring transform + cursor;
   this page only has to place each pin's centre. */
.pg-analytics-shot { position: relative; }
.pg-analytics-shot > img { display: block; width: 100%; height: auto; border-radius: var(--r-card); }
.pg-analytics-pin { top: var(--pin-top); left: var(--pin-left); }
/* Bronze is the moving highlight and, on a linked hover/focus, the lit-state
   fill .callout.is-hot already provides — so the ring is the only thing this
   page still has to draw, inset outside the larger 24px disc. */
.pg-analytics-pin::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid var(--yellow);
  animation: pg-analytics-pin-ring 2.4s var(--ease) infinite;
  animation-delay: var(--pin-delay, 0s);
}
@keyframes pg-analytics-pin-ring {
  0%   { transform: scale(1);   opacity: 0.65; }
  45%  { opacity: 0.45; }
  70%, 100% { transform: scale(2.1); opacity: 0; }
}
.pg-analytics-pin--p1 { --pin-top: 13%;   --pin-left: 8%;  --pin-delay: 0s; }
.pg-analytics-pin--p2 { --pin-top: 5.5%;  --pin-left: 38%; --pin-delay: 0.3s; }
.pg-analytics-pin--p3 { --pin-top: 42%;   --pin-left: 24%; --pin-delay: 0.6s; }
.pg-analytics-pin--p4 { --pin-top: 42%;   --pin-left: 78%; --pin-delay: 0.9s; }
.pg-analytics-pin--p5 { --pin-top: 78%;   --pin-left: 24%; --pin-delay: 1.2s; }
.pg-analytics-pin--p6 { --pin-top: 78%;   --pin-left: 50%; --pin-delay: 1.5s; }
.pg-analytics-pin--p7 { --pin-top: 96%;   --pin-left: 96%; --pin-delay: 1.8s; }
.pg-analytics-pin--p8 { --pin-top: 1.6%;  --pin-left: 73%; --pin-delay: 2.1s; }

/* The pin's card. Opacity only — the original also scaled and slid, which is a
   hover-lift by another name. Focus opens it so the keyboard reaches every pin. */
.pg-analytics-pin-card {
  position: absolute; width: 280px; z-index: 5;
  display: flex; flex-direction: column; gap: var(--sp-1);
  text-align: left; white-space: normal;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s var(--ease);
  /* The card lives inside the button.callout, whose white numeral colour and
     11px/700 type would otherwise cascade into the card's body text. */
  color: var(--fg-1); font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-normal);
}
.pg-analytics-pin:hover .pg-analytics-pin-card,
.pg-analytics-pin:focus-visible .pg-analytics-pin-card { opacity: 1; pointer-events: auto; }
.pg-analytics-pin-card--r  { left: 22px;  top: -10px; }
.pg-analytics-pin-card--l  { right: 22px; top: -10px; }
.pg-analytics-pin-card--b  { top: 22px;   left: -140px; }
.pg-analytics-pin-card--tr { left: 22px;  bottom: -10px; }
.pg-analytics-pin-card--bl { right: 22px; top: 22px; }
/* Pin 7 sits at 96%/96%, the drawing's bottom-right corner; a card opening
   down and left (--bl) runs off the bottom of the image. Flip it up, mirroring
   the old page's per-pin corner override (old-analytics.html's ps-card--bl). */
.pg-analytics-pin-card--tl { right: 22px; bottom: 22px; }

/* Links each pin to the table row below it (analytics.js wireDashboardPins):
   both ends take .is-hot on hover/focus, the pin's own disc via .callout.is-hot
   and the row's marker via .is-hot .callout (both flat.css); this rule is only
   the row's background tint, which flat.css has no opinion on. */
.pg-analytics-shot-row { outline: 0; transition: background 0.15s var(--ease); }
.pg-analytics-shot-row.is-hot .spec__label { color: var(--blue-text); }

/* The problem and its fix lit as a pair on hover; flat.css has no paired state.
   tabindex on the row mirrors the exemplar's .pg-arch-layer keyboard path.
   Fix (round 3 review): this panel is neutral cloud (tint tint--panel, no
   hue class) so its hover must deepen its own ground, not repaint it blue —
   DESIGN.md Elevation: "tints deepen one step", and the Hue Budget Rule bars
   a hued ground next to the hero panel. .tint--link (flat.css) sets the same
   convention for a neutral tint's hover. */
.pg-analytics-pair { outline: 0; transition: background var(--dur) var(--ease); }
/* The pair sits bare on the page (2026-09-21); hover lights the fix panel, the one painted surface. */
.pg-analytics-pair:hover .pg-analytics-fix,
.pg-analytics-pair:focus-visible .pg-analytics-fix { background: var(--bg-sunken); }
.pg-analytics-pair:hover .tile,
.pg-analytics-pair:focus-visible .tile { background: var(--blue); color: var(--on-solid); }
.pg-analytics-num {
  display: block; font-size: 32px; font-weight: var(--fw-black); line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--blue); opacity: 0.4;
  transition: opacity var(--dur) var(--ease);
}
.pg-analytics-pair:hover .pg-analytics-num,
.pg-analytics-pair:focus-visible .pg-analytics-num { opacity: 1; }

/* flat.css already forces every animation to 0.01ms under reduced motion, which
   lands each of these on its LAST keyframe — invisible. Declare the end states. */
@media (prefers-reduced-motion: reduce) {
  .pg-analytics-ring::after { animation: none; transform: none; opacity: 0.6; }
  .pg-analytics-pin::after  { animation: none; transform: none; opacity: 0.65; }
  .pg-analytics-caret       { animation: none; opacity: 1; }
  .pg-analytics-step        { opacity: 1; transform: none; }
  .pg-analytics-chart       { opacity: 1; transform: none; }
}

/* Under 800px the screenshot is ~320px wide; an 18px pin over it hits nothing
   useful and the 280px card cannot fit. The table below the frame is the map.
   The hint sentence names an action (hover, tab) that has nothing to act on
   once the pins are gone, so it goes with them. */
@media (max-width: 800px) {
  .pg-analytics-pin { display: none; }
  .pg-analytics-pin-hint { display: none; }
}

/* .tile's 70%-white fill vanishes on a paper card; flat.css only paints it per context
   (.flow-step .tile), so the blue equivalent belongs here. */
.pg-analytics-fix .tile { background: var(--blue-tint); color: var(--blue-text); }