/* =========================================================================
   TRACE INSTRUMENT: the result as one screen you look through, in the page's
   own paper. The stage fills the frame; the HUD sits on it in the corners; the
   rail holds the tracked contact and the roster; a scrubber runs time.
   Structure: head / main (screen + scrub | rail) / brief / How we know.
   ========================================================================= */
.gv{
  --gv-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gv-teal:#1f7a8c; --gv-orange:#e0522f; --gv-gold:#c08a2a; --gv-ink:#171310; --gv-green:#234a34;
  /* solid, fully opaque paper for the chart's floating label chips: never white,
     never see-through, so a label reads as a tag on the curve, not a hole in it */
  --gv-chip:#fbf9f5;
  background:var(--card,#fff); color:var(--ink); border:1px solid var(--line-2); border-radius:16px;
  overflow:hidden; margin:0 0 18px; box-shadow:0 26px 60px -40px rgba(23,19,16,.45);
  font-family:var(--sans); outline:none;
}
.gv *{ box-sizing:border-box; }

/* ---- head ---- */
.gv-head{ padding:18px 22px 15px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fbf9f5,#fff); }
.gv-eyebrow{ display:flex; gap:14px; flex-wrap:wrap; margin:0 0 9px; font:700 10px/1 var(--gv-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.gv-eyebrow .live{ color:var(--tr-live,#c0392b); font-weight:800; }
.gv-eyebrow .demo{ color:var(--tr-model); }
.gv-title{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.gv-title h1{ margin:0; font:700 clamp(24px,3.2vw,34px)/1.05 var(--serif); letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
.gv-verdict{ font:800 11px/1 var(--gv-mono); letter-spacing:.08em; text-transform:uppercase; padding:6px 12px; border-radius:6px; white-space:nowrap; border:1px solid; }
.gv-verdict.quiet{ color:var(--tr-meas); background:var(--tr-meas-tint); border-color:var(--tr-meas-line); }
.gv-verdict.moving{ color:var(--tr-attn); background:var(--tr-attn-tint); border-color:var(--tr-attn-line); }
.gv-verdict.loud{ color:#fff; background:var(--tr-attn); border-color:var(--tr-attn); }
/* the story runs as one long line across the head and only wraps when the card
   is actually narrow (no tight 84ch box). text-wrap:pretty keeps orphans off
   the last line so it never breaks a lone word onto its own row. */
.gv-story{ margin:11px 0 0; font:400 16px/1.55 var(--serif); color:var(--ink-soft); max-width:none; text-wrap:pretty; }
.gv-story b{ color:var(--ink); font-weight:600; }

/* ---- main ---- */
.gv-main{ display:grid; grid-template-columns:minmax(0,1fr) 300px; }
.gv-left{ min-width:0; }
/* the chart is the god's-eye viewport: a faintly recessed field with a hairline
   inner frame, so the plot reads as something you look down INTO, not a flat
   panel. Warm paper vignette, quiet grid wash. */
.gv-screen{ position:relative; height:520px; overflow:hidden;
  background:
    radial-gradient(900px 460px at 42% 30%, rgba(35,74,52,.07), transparent 68%),
    radial-gradient(600px 300px at 90% 100%, rgba(224,82,47,.045), transparent 60%),
    linear-gradient(180deg, #fdfbf7, #f8f5ef);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 14px 30px -22px rgba(23,19,16,.28); }
/* the fuse chart is a fixed window: nothing to pan, so the cursor stays a pointer */
.gv-stage{ display:block; width:100%; height:100%; cursor:default; touch-action:manipulation; }
.gv-stage text{ user-select:none; }
.gv-n:hover circle{ filter:brightness(.9); }
.gv-bar:hover rect{ filter:brightness(.94); }
/* the resting reticle (rides the default earliest post before you click anything)
   is a whisper: very see-through so it never competes with the data. A real click
   still reads because the selected point also brightens its own mark/bracket. */
.gv-ret{ opacity:.28; animation:gvPulse 2.2s ease-in-out infinite; transform-origin:center; }
@keyframes gvPulse{ 0%,100%{ opacity:.28; } 50%{ opacity:.12; } }

/* HUD: mono readouts pinned to the corners, on a sliver of paper */
.gv-hud{ position:absolute; z-index:3; pointer-events:none; font:700 10px/1.4 var(--gv-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
  background:rgba(255,255,255,.78); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); border:1px solid var(--line); border-radius:8px; padding:6px 9px; max-width:calc(100% - 24px); }
.gv-hud b{ color:var(--ink); font-weight:600; }
.gv-hud i{ font-style:normal; color:var(--muted); }
.gv-hud.tl{ left:12px; top:12px; text-transform:none; letter-spacing:.02em; font-size:12.5px; font-weight:700; max-width:52%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:8px 12px; }
.gv-hud.tl .ret{ color:var(--gv-teal); font-size:14px; margin-right:5px; }
.gv-hud.tl b{ color:var(--ink); }
.gv-hud.tl span{ color:var(--muted); font-weight:600; }
.gv-hud.tr{ right:12px; top:12px; display:flex; gap:14px; max-width:46%; white-space:nowrap; overflow:hidden; }
.gv-hud.tr span{ white-space:nowrap; }
.gv-hud.tr b{ font-size:13px; }
/* the readout: the numbers the header does not say, as big stat chips, live while
   scrubbing. It sits under the top HUD row, not the bottom, because the bottom of
   the fuse chart is the axis and the rug strip. */
.gv-hud.bl{ left:12px; top:52px; padding:0; background:none; border:0; backdrop-filter:none; -webkit-backdrop-filter:none; display:flex; gap:9px; max-width:calc(100% - 130px); }
.gv-stat{ display:inline-flex; flex-direction:column; gap:3px; background:rgba(255,255,255,.94); backdrop-filter:blur(7px) saturate(1.2); -webkit-backdrop-filter:blur(7px) saturate(1.2); border:1px solid var(--line-2); border-top-color:rgba(255,255,255,.9); border-radius:10px; padding:8px 13px; box-shadow:0 1px 2px rgba(23,19,16,.06), 0 12px 26px -16px rgba(23,19,16,.5); }
.gv-stat b{ font:800 19px/1 var(--serif); color:var(--ink); letter-spacing:-.015em; }
.gv-stat i{ font:700 9px/1.2 var(--gv-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-style:normal; }
/* a tile with an explainer invites a hover */
.gv-stat[title]{ cursor:help; }
.gv-legend{ display:flex; gap:7px 16px; flex-wrap:wrap; align-items:center; padding:11px 18px 0; font:500 11.5px/1.2 var(--gv-mono); color:var(--ink-soft); }
/* the two legends sit on a hairline shelf so they read as a key strip, not loose text */
.gv-legend-plat{ margin-top:2px; padding:11px 18px 11px; background:linear-gradient(180deg,#fbf9f5,#f8f5ef); border-top:1px solid var(--line); }
.gv-legend span{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.gv-legend i{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.gv-legend .n{ margin-left:auto; color:var(--muted); }
/* the marker legend uses the real glyph (a tiny SVG of the mark on the chart), so
   ring / dot / haloed dot / diamond read identically in the key and on the plot.
   Short tags, muted, tight: a quiet key under the loud platform pills, not a
   second sentence competing with the labels already on the curve. */
.gv-legend-mark{ padding-top:8px; gap:5px 14px; font-size:10.5px; color:var(--muted); text-transform:lowercase; letter-spacing:.01em; }
.gv-legend-mark span{ gap:5px; }
.gv-legend-mark span[title]{ cursor:help; }
.gv-gl{ flex:none; display:block; overflow:visible; }
/* export: build the artifact you want, THEN pull it. The trigger sits at the right
   end of the marker legend; the panel is a popover checklist of what to include. */
.gv-export{ margin-left:auto; position:relative; display:inline-flex; align-items:center; }
.gv-export-open{ font:600 10.5px/1 var(--gv-mono); letter-spacing:.02em; color:var(--ink-soft); background:var(--card,#fff);
  border:1px solid var(--line-2); border-radius:7px; padding:5px 10px; cursor:pointer; white-space:nowrap; transition:border-color .12s,color .12s; }
.gv-export-open:hover, .gv-export-open[aria-expanded="true"]{ border-color:var(--green); color:var(--ink); }
/* the panel opens UPWARD from the trigger (the legend sits low in the left column).
   It must never overrun the frame it lives in: cap its width to the container, cap
   its height to the space above the trigger and scroll instead of covering the whole
   chart, and keep it clear of the right gutter so text can never run off-screen. */
.gv-export-panel{ position:absolute; right:0; bottom:calc(100% + 8px); z-index:20;
  width:260px; max-width:calc(100vw - 32px);
  max-height:min(70vh, 460px); overflow-y:auto; overscroll-behavior:contain;
  background:var(--card,#fff); border:1px solid var(--line-2); border-radius:11px; padding:12px 13px;
  box-shadow:0 18px 44px -16px rgba(23,19,16,.5); text-align:left; }
.gv-export-panel[hidden]{ display:none; }
/* on a narrow frame the 260px panel would run off the left edge (it is anchored to
   the far-right trigger), so below ~380px it drops to left-anchored and full-width */
@media (max-width:420px){
  .gv-export-panel{ right:auto; left:0; width:min(300px, calc(100vw - 32px)); }
}
.gv-xp-lab{ margin:0 0 7px; font:700 9px/1 var(--gv-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.gv-xp-lab:not(:first-child){ margin-top:13px; }
/* Columns header carries the all/none toggle on its right */
.gv-xp-head{ display:flex; align-items:center; justify-content:space-between; }
.gv-xp-head .gv-xp-lab{ margin-bottom:0; }
.gv-xp-toggle{ font:700 9px/1 var(--gv-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--green);
  background:none; border:0; padding:3px 4px; margin:-2px -4px -2px 0; cursor:pointer; border-radius:5px; transition:color .12s,background .12s; }
.gv-xp-toggle:hover{ background:var(--wash,rgba(35,74,52,.08)); }
.gv-xp-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px 8px; margin-top:7px; }
.gv-xp-row{ display:flex; flex-wrap:wrap; gap:2px 8px; }
/* each option is a full-width hit target that highlights when its control is on.
   min-width:0 + overflow-wrap let a long label wrap instead of running off the edge;
   align to the top so a two-line label keeps its box at the first line. */
.gv-export-panel label{ display:flex; align-items:flex-start; gap:8px; min-width:0;
  font:500 12px/1.3 var(--sans); overflow-wrap:anywhere;
  color:var(--ink-soft); cursor:pointer; padding:5px 7px; margin:0 -5px; border-radius:7px; user-select:none;
  transition:background .12s,color .12s; }
.gv-export-panel label:hover{ background:var(--wash,rgba(35,74,52,.05)); color:var(--ink); }
.gv-export-panel label:has(input:checked){ color:var(--ink); font-weight:600; }
/* real inputs, hidden but still focusable and still what readOpts() reads */
.gv-export-panel input[type=checkbox], .gv-export-panel input[type=radio]{
  position:absolute; width:1px; height:1px; opacity:0; margin:0; pointer-events:none; }
/* the visible box/dot we draw ourselves so checked vs unchecked is unmistakable */
.gv-export-panel label::before{ content:""; flex:none; width:16px; height:16px; margin-top:0; border:1.5px solid var(--line-2);
  background:var(--card,#fff); border-radius:5px; transition:background .12s,border-color .12s,box-shadow .12s;
  background-repeat:no-repeat; background-position:center; background-size:11px; }
.gv-export-panel label:has(input[type=radio])::before{ border-radius:50%; }
.gv-export-panel label:hover::before{ border-color:var(--green); }
/* checkbox: filled green with a white tick */
.gv-export-panel label:has(input[type=checkbox]:checked)::before{ background-color:var(--green); border-color:var(--green);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/></svg>"); }
/* radio: green ring with a filled center dot */
.gv-export-panel label:has(input[type=radio]:checked)::before{ border-color:var(--green);
  box-shadow:inset 0 0 0 4px var(--green), inset 0 0 0 5px var(--card,#fff); }
/* keyboard focus ring on the drawn control (input is visually hidden inside the label) */
.gv-export-panel label:focus-within::before{ box-shadow:0 0 0 3px var(--wash,rgba(35,74,52,.2)); }
/* keep the checked radio's inner dot while adding the outer focus ring */
.gv-export-panel label:has(input[type=radio]:checked):focus-within::before{ box-shadow:0 0 0 3px var(--wash,rgba(35,74,52,.2)), inset 0 0 0 4px var(--green), inset 0 0 0 5px var(--card,#fff); }
.gv-xp-one{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); }
.gv-xp-actions{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:11px; padding-top:11px; border-top:1px solid var(--line); }
.gv-xp-actions button{ font:600 11.5px/1 var(--sans); color:#fff; background:var(--green); border:1px solid var(--green);
  border-radius:8px; padding:8px 10px; cursor:pointer; transition:filter .12s,box-shadow .12s; box-shadow:0 1px 2px rgba(23,19,16,.08); }
.gv-xp-actions button:hover{ filter:brightness(1.09); box-shadow:0 3px 10px -4px rgba(35,74,52,.5); }
.gv-xp-actions button:active{ filter:brightness(.96); }
.gv-xp-actions button:disabled{ background:var(--line,#e4ddd1); border-color:var(--line,#e4ddd1); color:var(--muted); cursor:not-allowed; filter:none; box-shadow:none; }
/* CSV + JSON share the top row (the two main pulls); Print spans the next row;
   Copy citation is the quiet full-width action at the bottom */
.gv-xp-actions #gvPrint{ grid-column:1 / -1; }
.gv-xp-actions button.ghost{ grid-column:1 / -1; color:var(--ink-soft); background:var(--card,#fff); border-color:var(--line-2); box-shadow:none; }
.gv-xp-actions button.ghost:hover{ border-color:var(--green); color:var(--ink); filter:none; box-shadow:none; }
.gv-xp-actions button.ok{ background:var(--green); color:#fff; border-color:var(--green); }
/* the platform legend carries the bar colors AND the engine's own totals, so the
   stack can be read back to a number without hovering anything. Each entry reads
   as a small chip so the key scans like a control panel. */
.gv-legend-plat{ font-weight:600; color:var(--ink); }
.gv-legend-plat span{ padding:3px 9px 3px 7px; border-radius:100px; background:var(--card,#fff); border:1px solid var(--line); box-shadow:0 1px 2px rgba(23,19,16,.05); }
.gv-legend-plat i{ width:10px; height:10px; border-radius:3px; box-shadow:0 1px 2px rgba(23,19,16,.2); }
.gv-legend-plat .c{ font-weight:700; color:var(--ink); }
.gv-legend-plat .n{ background:none; border:0; box-shadow:none; padding:0; }
.gv-legend-plat + .gv-legend{ padding-top:9px; }
.gv-hint{ margin:6px 0 0; text-align:center; font:500 10px/1.5 var(--gv-mono); color:var(--muted); }
.gv-hint b{ color:var(--ink-soft); font-weight:600; }
.gv-hud.br{ right:12px; bottom:12px; display:flex; gap:10px; flex-wrap:wrap; text-transform:none; letter-spacing:.02em; }
.gv-hud.br span{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.gv-hud.br i{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.gv.nohud .gv-hud, .gv.nohud .gv-reset, .gv.nohud .gv-zoom{ display:none; }
.gv-reset{ position:absolute; right:12px; top:112px; z-index:5; font:600 11px var(--sans); color:var(--ink-soft); background:#fffdf8; border:1px solid var(--line-2); border-radius:8px; padding:5px 9px; cursor:pointer; }
.gv-reset:hover{ border-color:var(--green); color:var(--ink); }
/* the zoom-reset chip: only shown while the x-window is a slice. It used to sit
   bottom-left, right on top of the scrubber / rug strip and block it. Moved UP to
   the top-left of the plot, clear below the stat tiles, so it never covers the
   timeline band. Fully OPAQUE so it never looks see-through. */
.gv-zoom{ position:absolute; left:64px; top:112px; z-index:5; display:inline-flex; align-items:center; gap:6px;
  font:600 11px/1 var(--gv-mono); color:var(--ink); background:#fffdf8;
  border:1px solid var(--line-2); border-radius:8px; padding:6px 10px; cursor:pointer; box-shadow:0 6px 16px -12px rgba(23,19,16,.4); }
.gv-zoom[hidden]{ display:none !important; }
.gv-zoom:hover{ border-color:var(--green); }
.gv-zoom .z{ font-size:13px; line-height:1; color:var(--gv-teal); }
.gv-zoom b{ font-weight:700; color:var(--ink); letter-spacing:.02em; }
/* while zoomed the stage invites a drag to pan */
.gv-screen.zoomed .gv-stage{ cursor:grab; }
/* the hover readout is fully OPAQUE solid paper (never a see-through card var),
   so the number under the cursor is always legible over the chart */
.gv-tip{ position:absolute; z-index:4; pointer-events:none; background:#fffdf8; border:1px solid var(--line-2); border-radius:9px; padding:8px 11px; font-size:12px; color:var(--ink); max-width:260px; opacity:0; transform:translateY(4px); transition:opacity .12s,transform .12s; box-shadow:0 14px 34px -16px rgba(23,19,16,.5); line-height:1.4; }
.gv-tip.on{ opacity:1; transform:none; }
.gv-tip b{ color:var(--ink); }
.gv-tip .who{ font:600 11px var(--gv-mono); color:var(--green); }
.gv-tip .t{ font:500 10px var(--gv-mono); color:var(--muted); margin-top:3px; }
.gv-empty{ font-size:12.5px; color:var(--muted); line-height:1.5; }

/* ---- bar lens toggles: switch what the bars mean, one reading at a time ---- */
.gv-lenses{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:10px 18px 0; }
.gv-lens-lab{ font:600 10px/1 var(--gv-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-right:2px; }
.gv-lens{ font:600 11px/1 var(--gv-mono); padding:5px 10px; border:1px solid var(--line-2); border-radius:7px; background:var(--card,#fff); color:var(--ink-soft); cursor:pointer; transition:border-color .12s,color .12s,background .12s; }
.gv-lens:hover{ border-color:var(--green); color:var(--ink); }
.gv-lens.on{ background:var(--green); border-color:var(--green); color:#fff; }
.gv-lens-vol{ margin-left:auto; }
.gv-lens-vol.on{ background:var(--tr-vol,#2f6f4f); border-color:var(--tr-vol,#2f6f4f); }

/* ---- scrubber: the transport bar. Reads as the control deck of the viewport. ---- */
.gv-scrub{ padding:13px 18px 14px; border-top:1px solid var(--line); background:linear-gradient(180deg,#f8f5ef,#f3efe7); }
.gv-scrub-row{ display:flex; align-items:center; gap:14px; }
.gv-play{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line-2); background:linear-gradient(180deg,#fff,#f7f4ee); color:var(--green); cursor:pointer; flex:none; display:grid; place-items:center; font-size:12px; box-shadow:0 1px 2px rgba(23,19,16,.06),0 6px 14px -8px rgba(23,19,16,.4); transition:transform .1s,border-color .12s,color .12s; }
.gv-play:hover{ border-color:var(--green); transform:scale(1.06); }
.gv-play:active{ transform:scale(.96); }
.gv-track{ position:relative; flex:1; height:34px; cursor:pointer; outline:none; }
.gv-track:focus-visible{ box-shadow:0 0 0 3px rgba(35,74,52,.15); border-radius:8px; }
.gv-track-line{ position:absolute; top:50%; left:0; right:0; height:3px; border-radius:3px; transform:translateY(-50%); background:var(--line-2); }
.gv-track-fill{ position:absolute; top:50%; left:0; height:3px; border-radius:3px; transform:translateY(-50%); background:linear-gradient(90deg,var(--gv-teal),var(--gv-green),var(--gv-orange)); box-shadow:0 0 6px -1px rgba(180,92,32,.45); transition:width .04s linear; }
/* the leading edge of the fill gets a soft comet-glow so the eye rides the cut */
.gv-track-fill::after{ content:""; position:absolute; right:0; top:50%; width:16px; height:9px; transform:translate(50%,-50%); border-radius:50%; background:radial-gradient(closest-side,rgba(198,106,40,.5),rgba(198,106,40,0)); pointer-events:none; }
/* Scrub ticks speak the SAME glyph language as the chart and the legend, so a mark
   on the timeline and its dot on the scrubber are visibly the one thing.
   earliest = hollow ring, jump = solid dot, amp = haloed dot, news = diamond. */
.gv-tick{ position:absolute; top:50%; width:10px; height:10px; border-radius:50%; transform:translate(-50%,-50%); background:var(--card,#fff); border:2px solid var(--gv-green); box-sizing:border-box; }
/* earliest: a hollow ring (matches the crowned earliest post) */
.gv-tick.earliest{ background:var(--card,#fff); border:2.5px solid var(--gv-teal); }
/* jump: a solid dot with a thin paper ring */
.gv-tick.jump{ background:var(--gv-orange); border:1.5px solid var(--card,#fff); }
/* amp: a solid dot wrapped in a soft halo, like the biggest-account ring on the plot */
.gv-tick.amp{ background:var(--gv-gold); border:1.5px solid var(--card,#fff); box-shadow:0 0 0 3px rgba(192,138,42,.22); }
/* news: a diamond (a square turned 45), ink-filled */
.gv-tick.news{ width:11px; height:11px; border-radius:2px; background:var(--gv-ink); border:1.5px solid var(--card,#fff); transform:translate(-50%,-50%) rotate(45deg); }
/* the playhead: a thin stem that cuts through the ticks, topped by a round grip
   cap sitting on the line, so "where the cut is" is also the thing you grab. */
.gv-head-mark{ position:absolute; top:50%; width:2px; height:26px; transform:translate(-50%,-50%); background:var(--ink); border-radius:2px; pointer-events:none; }
.gv-head-mark::before{ content:""; position:absolute; left:50%; top:50%; width:15px; height:15px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,#f3efe7); border:2px solid var(--ink); box-shadow:0 1px 2px rgba(23,19,16,.18),0 4px 10px -4px rgba(23,19,16,.5); }
.gv-track:hover .gv-head-mark::before,
.gv-track:focus-visible .gv-head-mark::before{ background:radial-gradient(circle at 35% 30%,#fff,#efe7d8); border-color:var(--gv-orange); box-shadow:0 1px 2px rgba(23,19,16,.18),0 4px 12px -3px rgba(180,92,32,.55),0 0 0 4px rgba(198,106,40,.14); }
.gv-track:active .gv-head-mark::before{ transform:translate(-50%,-50%) scale(1.08); }
/* during an active drag, kill the fill tween so the cut tracks the cursor 1:1 */
.gv-track:active .gv-track-fill{ transition:none; }
@media (prefers-reduced-motion:reduce){ .gv-track-fill{ transition:none; } }
.gv-now{ font:500 11px var(--gv-mono); color:var(--ink-soft); white-space:nowrap; min-width:112px; text-align:right; }
.gv-now b{ color:var(--tr-attn); font-weight:600; }
.gv-ends{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; font:500 10px var(--gv-mono); color:var(--muted); }
/* the two window bounds read as quiet endpoints; each gets a little tick above it */
.gv-end{ position:relative; color:var(--ink-soft); }
.gv-end::before{ content:""; position:absolute; top:-6px; left:0; width:1px; height:4px; background:var(--line-2); }
.gv-end-r{ text-align:right; }
.gv-end-r::before{ left:auto; right:0; }
/* the middle is the real payload of the search, so it carries the weight */
.gv-span{ letter-spacing:.02em; }
.gv-span b{ color:var(--ink); font-weight:700; }

/* ---- rail: tracked contact + roster ---- */
.gv-rail{ border-left:1px solid var(--line); background:linear-gradient(180deg,#f8f5ef,#f4f0e8); padding:13px; display:flex; flex-direction:column; gap:12px; min-height:0; }
.gv-rail > *{ flex:none; }
.gv-card{ background:var(--card,#fff); border:1px solid var(--line-2); border-radius:12px; padding:13px 14px; box-shadow:0 1px 2px rgba(23,19,16,.04),0 10px 24px -20px rgba(23,19,16,.4); }
.gv-card .lab, .gv-roster .lab{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:0 0 7px; font:600 9px/1 var(--gv-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.gv-k{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.gv-chip{ font:600 8.5px/1 var(--gv-mono); letter-spacing:.06em; text-transform:uppercase; padding:3px 7px; border-radius:100px; }
.gv-chip.meas{ color:var(--tr-meas); background:var(--tr-meas-tint); }
.gv-chip.model{ color:var(--tr-model); background:var(--tr-model-tint); }
.gv-chip.derived{ color:var(--tr-attn); background:var(--tr-attn-tint); }
.gv-card .who{ font:600 16px/1.25 var(--serif); color:var(--ink); }
.gv-card .who b{ color:var(--green); }
.gv-card .detail{ margin-top:5px; font-size:12px; line-height:1.55; color:var(--ink-soft); }
.gv-card .detail .mono{ font-family:var(--gv-mono); color:var(--ink); }
.gv-card .quote{ margin:7px 0 0; padding:6px 10px; border-left:2px solid var(--tr-meas); background:rgba(31,122,140,.05); border-radius:0 6px 6px 0; font:italic 400 12.5px/1.45 var(--serif); color:var(--ink-soft); overflow-wrap:anywhere; }
.gv-card .link{ display:inline-block; margin-top:7px; font:600 12px var(--sans); color:var(--green); text-decoration:none; }
.gv-card .link:hover{ text-decoration:underline; }
.gv-target{ border-color:var(--tr-meas-line); }
/* the selected post, rendered as a styled platform replica: reads unmistakably as
   the platform (accent + "View on X") without cloning a trademark. --acc is the
   platform tint, set inline per post. Roomy on purpose, the body is the point. */
.gv-post{ margin-top:2px; border:1px solid var(--line-2); border-radius:12px; padding:12px 13px 11px; background:var(--card,#fff); }
.gv-post.shot{ border-style:dashed; border-color:var(--acc); }
.gv-post-head{ display:flex; align-items:flex-start; gap:10px; }
/* timestamp sits at the top-right of the header, out of the name/handle stack,
   the way a real social card places it. Full UTC, monospaced, quiet. It wraps
   date over time (right-aligned) so a long stamp never squeezes the NAME into
   wrapping: the name is what matters, the timestamp gives way, not the reverse. */
.gv-post-when{ margin-left:auto; flex:0 0 auto; padding-top:2px; text-align:right;
  font:500 11px/1.35 var(--gv-mono); letter-spacing:.01em; color:var(--muted); }
.gv-post-when .d{ display:block; white-space:nowrap; }
.gv-post-when .t{ display:block; white-space:nowrap; color:var(--muted); opacity:.85; }
@media(max-width:420px){ .gv-post-when{ font-size:10px; } }
.gv-post-av{ flex:none; width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  font:800 17px/1 var(--serif); color:#fff; background:var(--acc); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); }
.gv-post-id{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto; padding-top:1px; }
.gv-post-id b{ font:700 14.5px/1.2 var(--sans); color:var(--ink); overflow-wrap:anywhere; }
/* handle + platform read on ONE line ("@handle · X"), never a lonely stacked
   platform word floating under the handle. */
.gv-post-id .h{ font:500 12px/1.25 var(--gv-mono); color:var(--muted); overflow-wrap:anywhere; }
.gv-post-id .h .pl{ color:var(--muted); }
.gv-post-id .h .dot{ color:var(--line-2); margin:0 5px; }
/* the loud true-brand color lives on the AVATAR (white-on-brand is always legible)
   and the "View on X" link; text metadata stays ink so a light brand (HN orange,
   Bluesky blue) never becomes unreadable body text. Only the accent pops. */
.gv-post-body{ margin:10px 0 0; font:400 14.5px/1.5 var(--serif); color:var(--ink); overflow-wrap:anywhere; white-space:normal; }
.gv-post-eng{ display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:11px; padding-top:9px; border-top:1px solid var(--line); }
.gv-post-eng .e{ font:500 11.5px/1 var(--gv-mono); color:var(--muted); }
.gv-post-eng .e b{ color:var(--ink); font-weight:700; }
.gv-post-tag{ margin-top:11px; padding-top:9px; border-top:1px solid var(--line); font:600 10.5px/1.3 var(--gv-mono); letter-spacing:.02em; color:var(--ink-soft); text-transform:uppercase; }
/* the action sits under its own hairline rule, so it reads as the card's footer
   and never crowds the text above it. */
.gv-post-link{ display:block; margin-top:12px; padding-top:11px; border-top:1px solid var(--line);
  font:700 12px var(--sans); color:var(--acc); text-decoration:none; }
.gv-post-link:hover{ text-decoration:underline; }
.gv-post-audit{ margin:8px 2px 0; font:500 10.5px/1.4 var(--gv-mono); color:var(--muted); }
.gv-post-audit .mono{ color:var(--ink-soft); }
.gv-roster{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.gv-roster .lab .mono{ font-family:var(--gv-mono); color:var(--ink-soft); letter-spacing:.04em; text-transform:none; }
.gv-list{ position:relative; overflow:auto; max-height:360px; border:1px solid var(--line-2); border-radius:12px; background:var(--card,#fff); box-shadow:inset 0 1px 2px rgba(23,19,16,.04); }
.gv-list::-webkit-scrollbar{ width:8px; } .gv-list::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:20px; }
.gv-row{ display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:8px 10px 8px 8px; border:0; border-bottom:1px solid var(--line); background:transparent; cursor:pointer; font:inherit; color:var(--ink); position:relative; transition:background .1s; }
.gv-row:last-child{ border-bottom:0; }
.gv-row:hover{ background:var(--paper,#f6f3ee); }
.gv-row.on{ background:var(--green-tint,#eaf0eb); box-shadow:inset 3px 0 0 var(--green); }
.gv-row .k{ width:3px; height:26px; border-radius:2px; flex:none; }
.gv-row .g{ flex:none; width:26px; height:22px; border-radius:6px; display:grid; place-items:center; font:600 9.5px var(--gv-mono); color:var(--ink-soft); background:#f1ede5; border:1px solid var(--line); }
.gv-row .m{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.gv-row .h{ font:600 12px var(--gv-mono); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gv-row .s{ font:500 10px var(--gv-mono); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- brief ---- */
.gv-brief{ border-top:1px solid var(--line); padding:14px 22px 12px; background:#fff; }
.gv-brief-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:10px; }
.gv-brief-cards:empty{ display:none; }
.gv-changes .change{ display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); }
.gv-changes .change:last-child{ border-bottom:0; padding-bottom:0; }
.gv-changes .d{ width:8px; height:8px; border-radius:50%; flex:none; margin-top:5px; }
.gv-changes .ctxt{ font-size:12.5px; color:var(--ink); line-height:1.4; }
.gv-changes .ct{ font:500 10px var(--gv-mono); color:var(--muted); margin-top:2px; }
.gv-honest{ margin:10px 0 0; font-size:11.5px; line-height:1.55; font-style:italic; color:var(--muted); }
.gv-foot{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:10px 0 0; font:500 12px/1.4 var(--sans); color:var(--muted); }

/* ---- drawer ---- */
.gv-how{ border-top:1px solid var(--line); background:#faf8f4; }
.gv-how > summary{ list-style:none; cursor:pointer; padding:13px 22px; font:600 11px var(--gv-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); display:flex; justify-content:space-between; }
.gv-how > summary::-webkit-details-marker{ display:none; }
.gv-how > summary:after{ content:"+"; color:var(--muted); }
.gv-how[open] > summary:after{ content:"\2212"; }
.gv-how-body{ padding:6px 14px 16px; }
.gv-how-body .tcard{ box-shadow:none; }

/* the result breaks out of the 760px tool column so the screen has room */
.tres.on.gv-wide{ position:relative; left:50%; transform:translateX(-50%); width:min(1080px, calc(100vw - 28px)); }

@media (max-width:860px){
  .gv-main{ grid-template-columns:1fr; }
  .gv-rail{ border-left:0; border-top:1px solid var(--line); }
  .gv-screen{ height:400px; }
  .gv-hud.tr{ display:none; }
  .gv-hud.br{ display:none; }
  .gv-hud.tl{ max-width:calc(100% - 24px); }
  .gv-hud.bl{ max-width:calc(100% - 110px); font-size:9.5px; }
  .gv-list{ max-height:260px; }
}
@media (prefers-reduced-motion:reduce){ .gv-tip{ transition:none; } .gv-ret{ animation:none; } }

/* =========================================================================
   TRACE CONSOLE SHELL (gvc-): the Semrush-style management console wrapped
   AROUND the .gv instrument. Built by render() only when NOT in preview mode.
   The instrument itself is unchanged; it mounts as the hero inside the
   Overview view. Sub-tabs show/hide .gvc-view blocks via the .on class.
   Chrome is neutral (paper, quiet borders, muted labels); data carries the
   accent. Matches _trace/reference/semrush-backlinks/console-mockup.html in
   the project's own tokens. No em dashes.
   ========================================================================= */

/* the console breaks out of the tool column, same as gv-wide did before.
   It sits on its OWN graduated stage, not the flat page paper, so every card
   inside it lifts off a surface instead of floating on nothing. That single
   move is what pulls the whole thing out of "gen 1 flat". */
.tres.on.gvc-host{ position:relative; left:50%; transform:translateX(-50%); width:min(1200px, calc(100vw - 24px)); }
.gvc-console{
  --gvc-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gvc-r:16px;                                       /* one card radius everywhere */
  --gvc-lift:0 1px 2px rgba(23,19,16,.04), 0 12px 28px -20px rgba(23,19,16,.30);
  --gvc-lift-2:0 2px 4px rgba(23,19,16,.05), 0 26px 60px -34px rgba(23,19,16,.40);
  font-family:var(--sans); color:var(--ink);
  background:
    radial-gradient(1200px 420px at 15% -8%, rgba(31,122,140,.06), transparent 60%),
    radial-gradient(900px 380px at 100% 0%, rgba(224,82,47,.05), transparent 55%),
    linear-gradient(180deg, #f4f0e9, #efeae1 60%, #ece6db);
  border:1px solid var(--line-2); border-radius:calc(var(--gvc-r) + 6px);
  padding:22px 22px 26px; box-shadow:var(--gvc-lift-2);
  position:relative;                                  /* anchor for the KPI info popover */
}
.gvc-console *{ box-sizing:border-box; }
/* Selection: the CHROME never highlights (clicking a tab / the pill / a caption used
   to leave that blue text-selection mess). But Trace is a data tool, so the DATA stays
   selectable and copyable, account handles, post text, the numbers in the lists and
   tiles. Default the console to no-select, then hand selection back to the data. */
.gvc-console{ -webkit-user-select:none; -moz-user-select:none; user-select:none; }
.gvc-console .gvc-rr, .gvc-console .gvc-rr *,
.gvc-console .gvc-row-lab, .gvc-console .gvc-row-val,
.gvc-console .gvc-kpi-v, .gvc-console .gvc-kpi-sub,
.gvc-console .gv-post-id, .gvc-console .gv-post-id *,
.gvc-console .gv-post-body,
.gvc-console .gvc-story,
.gvc-console .bio-facts, .gvc-console .bio-facts *,
.gvc-console .bio-what, .gvc-console .bio-what *{
  -webkit-user-select:text; -moz-user-select:text; user-select:text; }

/* ---- head: crumb + title + verdict + actions. Sits directly on the stage
   (no card) so it reads as a page header, with the verdict as the one loud
   object up top. ---- */
.gvc-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin:2px 2px 0; }
.gvc-head-main{ min-width:0; }
.gvc-crumb{ display:inline-flex; align-items:center; gap:7px; margin:0 0 12px; font:800 11px/1 var(--gvc-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
.gvc-crumb:before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--tr-attn); box-shadow:0 0 0 3px var(--tr-attn-tint); }
.gvc-crumb span{ color:var(--muted-2); }
.gvc-title{ margin:0; font:800 clamp(30px,4.4vw,46px)/1.0 var(--serif); letter-spacing:-.03em; color:var(--ink); text-wrap:balance; }
.gvc-when{ margin:8px 0 0; font:500 12px/1.4 var(--gvc-mono); color:var(--muted); }
/* the story in one sentence: what this is + where it stands now. Sits in the console
   directly under the header, above the tabs. Readable serif, with the origin/
   amplifier accents the engine bolds. */
.gvc-story{ margin:13px 2px 0; max-width:78ch;
  font:400 15px/1.6 var(--serif); color:var(--ink-soft); text-wrap:pretty; }
.gvc-story b{ font-weight:700; color:var(--ink); }
.gvc-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-left:auto; }
.gvc-verdict{ display:inline-flex; align-items:center; gap:8px; font:800 11px/1 var(--gvc-mono); letter-spacing:.09em; text-transform:uppercase; padding:10px 15px; border-radius:100px; border:1px solid; white-space:nowrap; box-shadow:var(--gvc-lift); }
.gvc-verdict.quiet{ color:var(--tr-meas); background:linear-gradient(180deg,#fff,var(--tr-meas-tint)); border-color:var(--tr-meas-line); }
.gvc-verdict.moving{ color:var(--tr-attn); background:linear-gradient(180deg,#fff,var(--tr-attn-tint)); border-color:var(--tr-attn-line); }
.gvc-verdict.loud{ color:#fff; background:linear-gradient(180deg,#e8623f,var(--tr-attn)); border-color:#c0431f; box-shadow:0 1px 2px rgba(0,0,0,.1),0 12px 26px -14px rgba(224,82,47,.7); }
.gvc-dot{ width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.7); animation:gvcPulse 1.6s infinite; }
@keyframes gvcPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,255,255,.6); } 70%{ box-shadow:0 0 0 6px rgba(255,255,255,0); } 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0); } }

/* ---- sub-tab bar: pill nav on a recessed track, so the active tab is an
   object you clearly landed on, not a thin underline you squint for. ---- */
.gvc-tabs{ display:flex; gap:3px; margin:20px 0 0; padding:5px; overflow-x:auto; scrollbar-width:none;
  background:rgba(23,19,16,.04); border:1px solid var(--line); border-radius:12px; }
.gvc-tabs::-webkit-scrollbar{ display:none; }
.gvc-tab{ display:inline-flex; align-items:center; gap:7px; border:0; background:none; font:800 13.5px/1 var(--sans); color:var(--ink-soft); cursor:pointer; padding:10px 15px; border-radius:8px; white-space:nowrap; transition:background .14s,color .14s,box-shadow .14s; }
.gvc-tab:hover{ color:var(--ink); background:rgba(255,255,255,.7); }
.gvc-tab.on{ color:#fff; background:var(--ink); box-shadow:0 2px 6px rgba(23,19,16,.28); }
.gvc-tab-cnt{ font:800 10.5px var(--gvc-mono); color:var(--ink-soft); padding:2px 6px; border-radius:6px; background:rgba(23,19,16,.07); }
.gvc-tab.on .gvc-tab-cnt{ color:var(--ink); background:#fff; }

/* ---- KPI strip: 6 lifted tiles with a colored top rail, so the numbers read
   as a dashboard and the two that matter (reach, velocity) genuinely pop. ---- */
.gvc-kpis{ display:grid; grid-template-columns:repeat(6,1fr); gap:11px; margin:16px 0 0; }
.gvc-kpi{ position:relative; padding:15px 16px 16px; background:var(--card,#fff); border:1px solid var(--line-2); border-radius:13px; box-shadow:var(--gvc-lift); overflow:hidden; transition:transform .14s, box-shadow .14s; }
.gvc-kpi:before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--line-2); opacity:.8; }
.gvc-kpi:hover{ transform:translateY(-2px); box-shadow:var(--gvc-lift-2); }
.gvc-kpi-k{ font:800 10px/1.2 var(--gvc-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); display:flex; align-items:center; gap:5px; }
.gvc-kpi-i{ -webkit-appearance:none; appearance:none; padding:0; margin:0; display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%; border:1px solid var(--line-2); background:transparent; color:var(--muted-2); font:700 9px/1 var(--sans); text-align:center; cursor:pointer; flex:none; transition:border-color .12s,color .12s,background .12s; }
.gvc-kpi-i:hover,.gvc-kpi-i:focus-visible{ border-color:var(--tr-meas); color:var(--tr-meas); outline:none; }
.gvc-kpi-i:focus-visible{ box-shadow:0 0 0 2px var(--tr-meas-line,rgba(79,160,175,.4)); }
/* the info popover: one shared bubble, positioned by JS relative to #gvcConsole */
.gvc-kpi-pop{ position:absolute; z-index:40; max-width:230px; padding:9px 12px; background:var(--ink,#1a1d21); color:#fff; font:600 11.5px/1.45 var(--sans); border-radius:9px; box-shadow:0 8px 26px rgba(0,0,0,.22); opacity:0; transform:translateY(-3px); pointer-events:none; transition:opacity .12s, transform .12s; }
.gvc-kpi-pop.on{ opacity:1; transform:translateY(0); pointer-events:auto; }
.gvc-kpi-pop:before{ content:""; position:absolute; top:-5px; left:50%; margin-left:-5px; width:10px; height:10px; background:inherit; transform:rotate(45deg); border-radius:2px; }
.gvc-kpi-v{ font:800 32px/1 var(--serif); margin:11px 0 0; letter-spacing:-.02em; color:var(--ink); }
.gvc-kpi-of{ font-size:16px; color:var(--muted-2); font-weight:700; }
.gvc-kpi-d{ font:600 12px/1.35 var(--sans); margin-top:8px; color:var(--ink-soft); }
.gvc-kpi.accent{ background:linear-gradient(180deg,#fff, #fff7f3); border-color:var(--tr-attn-line); }
.gvc-kpi.accent:before{ background:linear-gradient(90deg,var(--tr-attn),#f0805f); opacity:1; }
.gvc-kpi.accent .gvc-kpi-v{ color:var(--tr-attn); }
.gvc-kpi.accent .gvc-kpi-d{ color:#b8461f; }
/* the non-accent tiles carry the quiet teal rail so the strip still has color */
.gvc-kpi:not(.accent):before{ background:linear-gradient(90deg,var(--tr-meas),#4fa0af); opacity:.55; }

/* ---- views: one shown at a time ---- */
.gvc-view{ display:none; }
.gvc-view.on{ display:block; animation:gvcFade .22s ease both; }
@keyframes gvcFade{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }

/* main grid: instrument hero (left) + intel rail (right) */
.gvc-grid{ display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:14px; margin:14px 0 0; align-items:start; }
.gvc-rail{ display:flex; flex-direction:column; gap:14px; min-width:0; }

/* the instrument, as the hero. It keeps all its own IDs and wiring; we only
   strip its outer frame (the console card supplies it) and hide the chrome the
   console now carries itself (its own head/title, brief, and How-we-know
   drawer) so nothing reads doubled. Everything stays in the DOM. The hero gets
   the strongest lift on the page: it is the god's-eye viewport. */
.gvc-hero .gv{ margin:0; border-radius:var(--gvc-r); box-shadow:var(--gvc-lift-2); border-color:var(--line-2); overflow:hidden; }
.gvc-hero .gv-head{ display:none; }
.gvc-hero .gv-brief{ display:none; }
.gvc-hero .gv-how{ display:none; }

/* THE CHART IS THE POINT. Inside the console the instrument was nested inside a
   SECOND right-hand rail (its own .gv-rail, 300px) while the console's own
   .gvc-rail already carried Top accounts + Signals on the outside. Two rails
   crushed the chart to ~half width. So here the instrument goes single-column:
   the chart spans the whole hero, and its inner rail (selected post + Contacts)
   drops BELOW the chart as a horizontal strip. Nothing is lost, the chart
   breathes. Scoped to .gvc-hero so the standalone preview is untouched. */
.gvc-hero .gv-main{ grid-template-columns:1fr; }
.gvc-hero .gv-screen{ height:600px; }

/* THE READOUT BAY: below the chart, the roster (left) and "Where it started"
   (right) read as the instrument's two-panel readout deck, not stray cards under
   the plot. A darker recessed floor with an inset top edge ties it to the chart's
   own recessed viewport, and each panel is a real framed screen. Swapped from the
   DOM order (post-then-roster) with `order` so Contacts leads. Scoped to .gvc-hero
   so the standalone preview column is untouched. The locked-post replica (#gvTarget)
   is relocated out of here into the rail; "Where it started" (.gvc-where-bay) is
   relocated in to take the right slot. See relocateOverview() in trace-console.js. */
.gvc-hero .gv-rail{ border-left:0; border-top:1px solid var(--line-2);
  background:linear-gradient(180deg, #f1ede4, #ece7dc);
  box-shadow:inset 0 10px 24px -22px rgba(23,19,16,.5);
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  align-items:stretch; gap:14px; padding:16px 18px 18px; }
.gvc-hero .gv-rail > *{ min-width:0; }
/* Contacts roster leads (left), "Where it started" follows (right) */
.gvc-hero .gv-roster{ order:1; display:flex; flex-direction:column; }
.gvc-hero .gvc-where-bay{ order:2; align-self:start; }
/* the relocated "Where it started" card sits flush in the bay: its own .gvc-card
   frame carries the header, so just give it depth matched to the roster panel */
.gvc-hero .gvc-where-bay .gvc-card{ box-shadow:0 1px 2px rgba(23,19,16,.05), 0 16px 34px -26px rgba(23,19,16,.55); }
.gvc-hero .gvc-where-bay .gv-empty{ border:1px solid var(--line-2); border-radius:12px; background:var(--card,#fff); padding:18px; text-align:center; }
/* both panels: a framed white screen sitting on the bay floor, matched depth */
.gvc-hero .gv-rail .gv-card, .gvc-hero .gv-rail .gv-list{ box-shadow:0 1px 2px rgba(23,19,16,.05), 0 16px 34px -26px rgba(23,19,16,.55); }
/* the panel headers read as labeled bays: a mono caption with a leading tick */
.gvc-hero .gv-rail .lab{ margin:0 0 10px; padding:0 2px 9px; border-bottom:1px solid var(--line);
  font-size:9.5px; letter-spacing:.15em; color:var(--muted); }
.gvc-hero .gv-rail .lab:before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--tr-meas); flex:none; box-shadow:0 0 0 3px var(--tr-meas-tint); }
.gvc-hero .gv-roster .lab .mono{ margin-left:auto; }
.gvc-hero .gv-list{ max-height:320px; flex:1; }
/* NOTE: the locked-post panel (.gv-target) is no longer in this bay; it is
   relocated into the rail's "The post" card. See #gvcTargetSlot rules below. */

/* ---- cards: lifted paper with a tinted header strip, so each card reads as a
   distinct panel with a clear "what am I looking at" band up top. ---- */
.gvc-card{ background:var(--card,#fff); border:1.5px solid var(--ink); border-radius:var(--gvc-r); overflow:hidden; box-shadow:var(--gvc-lift); }
.gvc-card-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; background:var(--card,#fff); border-bottom:2px solid var(--ink); }
/* card titles read like the Bio's section heads: big black serif, no timid dot */
.gvc-card-h h3{ margin:0; font:800 18px/1.1 var(--serif); color:var(--ink); letter-spacing:-.015em; display:flex; align-items:center; gap:8px; }
.gvc-card-h h3:before{ display:none; }
.gvc-card-info{ font:800 11px/1 var(--gvc-mono); color:var(--ink-soft); letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; }
.gvc-card-link{ font:700 11.5px var(--sans); color:var(--green); text-decoration:none; cursor:pointer; background:var(--green-tint); border:0; padding:5px 9px; border-radius:100px; transition:filter .12s; }
.gvc-card-link:hover{ filter:brightness(.96); text-decoration:none; }
.gvc-card-b{ padding:14px 16px 16px; }

/* the rail's Signals card reuses .gv-changes markup; unwrap its inner card so
   it does not double-border inside the .gvc-card */
.gvc-rail .gv-card.gv-changes, .gvc-rail .gv-changes{ border:0; padding:0; background:none; box-shadow:none; }
.gvc-rail .gv-changes .lab{ display:none; }

/* ---- lag callout ("Where it started"): the hero stat of the rail, so it gets
   a real tinted slab, not a flat grey box. ---- */
.gvc-callout{ display:flex; align-items:center; gap:15px; padding:15px 16px; border-radius:12px;
  background:radial-gradient(120% 120% at 0% 0%, var(--green-tint), #f4f0e7 90%); border:1px solid #cfdcd0; }
/* the big stat never crowds or overruns the sentence: it takes only the room it
   needs, wraps if it must, and the sentence keeps the rest of the row */
.gvc-callout-big{ font:700 32px/.95 var(--serif); color:var(--green); letter-spacing:-.02em; flex:none; max-width:46%; overflow-wrap:break-word; }
.gvc-callout-txt{ flex:1; min-width:0; }
.gvc-callout-txt{ font:500 12.5px/1.5 var(--sans); color:var(--ink-soft); }
.gvc-callout-txt b{ color:var(--ink); font-weight:700; }

/* ---- rail "The post" card: the locked-post replica (#gvTarget) relocated here
   from the readout bay so the tweet reads BIG. The card header already says "The
   post", so the inner kind-label becomes a small caption and the replica fills
   the body edge to edge. Roomy body: the text is the whole point. ---- */
/* tight bottom padding so the card ends right under the post, not a strip of dead
   paper below "View on X" */
.gvc-target-card .gvc-card-b{ padding:14px 16px 13px; }
#gvcTargetSlot > .lab{ margin:0 0 10px; padding:0 0 9px; border-bottom:1px solid var(--line);
  font:600 9px/1 var(--gv-mono,var(--gvc-mono)); letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
  display:flex; align-items:center; gap:7px; }
/* the replica fills the card body edge-to-edge: no inner border/box, no floating
   margin, so there is no dead paper ring around the post. The card IS the post. */
#gvcTargetSlot .gv-post{ margin:0; border:0; border-radius:0; padding:0; background:none; }
/* nudge the replica bigger inside the roomier rail card */
#gvcTargetSlot .gv-post-av{ width:42px; height:42px; font-size:19px; }
#gvcTargetSlot .gv-post-id b{ font-size:15.5px; }
#gvcTargetSlot .gv-post-body{ font-size:15.5px; line-height:1.55; }
#gvcTargetSlot .gv-post-link{ font-size:12.5px; }
#gvcTargetSlot .gv-empty{ border:1px dashed var(--line-2); border-radius:12px; background:var(--paper,#f8f5ef); padding:20px 16px; text-align:center; color:var(--muted); font:400 13px/1.55 var(--sans); }

/* ---- roster (rail + Accounts view): rows you can hover and scan, ranked by
   reach. A hairline rank feel without adding data the JS doesn't supply. ---- */
.gvc-roster{ display:flex; flex-direction:column; }
.gvc-roster.full{ max-height:none; }
.gvc-rr{ display:flex; align-items:center; gap:11px; padding:9px 8px; margin:0 -8px; border-radius:9px; border-bottom:1px solid var(--line); transition:background .12s; }
.gvc-rr:last-child{ border-bottom:0; }
.gvc-rr:hover{ background:var(--paper,#f6f3ee); }
.gvc-av{ width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font:700 13px var(--serif); box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), 0 2px 6px -2px rgba(23,19,16,.4); }
.gvc-rr-m{ min-width:0; flex:1; }
.gvc-rr-m b{ font:650 12.5px var(--sans); color:var(--ink); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gvc-rr-m span{ font:500 10.5px var(--gvc-mono); color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.gvc-rr-reach{ font:700 12px var(--gvc-mono); color:var(--ink); white-space:nowrap; padding:3px 8px; border-radius:100px; background:var(--paper-2,#efeae1); }

/* ---- % bar rows (platform mix): thicker inset tracks so the mix reads at a
   glance, value chip pulled onto its own baseline. ---- */
.gvc-rows{ display:flex; flex-direction:column; gap:13px; }
.gvc-rows.big{ gap:18px; }
.gvc-row{ display:grid; grid-template-columns:1fr auto; gap:5px 10px; align-items:center; }
.gvc-row-lab{ font:600 12.5px var(--sans); color:var(--ink); display:flex; align-items:center; gap:8px; min-width:0; }
.gvc-rows.big .gvc-row-lab{ font-size:14.5px; }
.gvc-row-lab i{ width:10px; height:10px; border-radius:3px; flex:none; box-shadow:0 1px 2px rgba(23,19,16,.2); }
.gvc-row-val{ font:700 12px var(--gvc-mono); color:var(--ink-soft); white-space:nowrap; }
.gvc-row-bar{ grid-column:1/-1; height:8px; border-radius:100px; background:rgba(23,19,16,.06); overflow:hidden; box-shadow:inset 0 1px 2px rgba(23,19,16,.06); }
.gvc-rows.big .gvc-row-bar{ height:11px; }
.gvc-row-bar span{ display:block; height:100%; border-radius:100px; box-shadow:inset 0 1px 0 rgba(255,255,255,.35); }

/* ---- source-coverage table: zebra + roomy so a long list stays scannable ---- */
.gvc-cov{ width:100%; border-collapse:collapse; font-size:12.5px; }
.gvc-cov th{ text-align:left; font:700 9.5px/1 var(--gvc-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:0 8px 9px; border-bottom:1.5px solid var(--line-2); }
.gvc-cov th.r, .gvc-cov td.r{ text-align:right; }
.gvc-cov td{ padding:9px 8px; border-bottom:1px solid var(--line); color:var(--ink); }
.gvc-cov tbody tr{ transition:background .1s; }
.gvc-cov tbody tr:nth-child(even){ background:rgba(23,19,16,.018); }
.gvc-cov tbody tr:hover{ background:var(--paper,#f6f3ee); }
.gvc-cov tr:last-child td{ border-bottom:0; }
.gvc-zero{ color:var(--muted-2); }
.gvc-pill{ font:700 9px/1 var(--gvc-mono); letter-spacing:.05em; text-transform:uppercase; padding:4px 8px; border-radius:100px; white-space:nowrap; }
.gvc-pill.ok{ color:var(--green); background:var(--green-tint,#eaf0eb); box-shadow:inset 0 0 0 1px #cfdcd0; }
.gvc-pill.warn{ color:#b8461f; background:var(--tr-attn-tint,#fdeee9); box-shadow:inset 0 0 0 1px var(--tr-attn-line); }
/* quiet summary of the searched-but-empty sources, folded out of the main list */
.gvc-cov tfoot td.gvc-cov-more{ padding:9px 8px; border-top:1px solid var(--line); border-bottom:0; font:500 11.5px/1.3 var(--gvc-mono,inherit); color:var(--muted-2); text-align:left; }

/* ---- lower full-width cards ---- */
.gvc-lower{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:14px 0 0; }
.gvc-lower.one{ grid-template-columns:1fr; margin-top:0; }

/* ---- How we know view: the reused venues/confidence blocks ---- */
.gvc-how-wrap{ background:var(--card,#fff); border:1px solid var(--line-2); border-radius:var(--gvc-r); padding:18px 20px; box-shadow:var(--gvc-lift); }
.gvc-how-wrap .tcard{ box-shadow:none; }

/* ---- responsive: the tiles gap so they just reflow; no border bookkeeping ---- */
@media (max-width:1000px){
  .gvc-grid{ grid-template-columns:1fr; }
  .gvc-lower{ grid-template-columns:1fr; }
  .gvc-kpis{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:640px){
  .gvc-console{ padding:16px 14px 20px; }
  .gvc-kpis{ grid-template-columns:repeat(2,1fr); gap:9px; }
  .gvc-kpi-v{ font-size:24px; }
  /* on a phone the tall hero chart shrinks back and its readout bay stacks,
     Contacts still first */
  .gvc-hero .gv-screen{ height:420px; }
  .gvc-hero .gv-rail{ grid-template-columns:1fr; gap:12px; padding:14px; }
  .gvc-hero .gv-list{ max-height:260px; }
  .gvc-head{ align-items:flex-start; }
  .gvc-actions{ margin-left:0; }
}
@media (prefers-reduced-motion:reduce){ .gvc-dot{ animation:none; } .gvc-view.on{ animation:none; } .gvc-kpi{ transition:none; } }

/* =========================================================================
   BIO TAB: the internet-lore entry. Verdict + status tags, a fact grid, a
   sourced timeline of how it moved, its notable wording, and a written About.
   Reads like a Know Your Meme page, but every line traces to a post.
   ========================================================================= */
.bio-entry{ max-width:760px; }
/* the verdict is the headline of a lore page. It is BIG and BLACK and it shouts. */
.bio-verdict{ margin:0 0 20px; font:800 clamp(28px,4.2vw,42px)/1.12 var(--serif); letter-spacing:-.025em; color:var(--ink); text-wrap:balance; }
.bio-verdict b{ font-weight:800; color:var(--tr-attn); }
.bio-tags{ display:flex; gap:8px; flex-wrap:wrap; margin:0 0 26px; }
.bio-tag{ font:800 12px/1 var(--gvc-mono); letter-spacing:.05em; text-transform:uppercase; padding:9px 14px; border-radius:8px; border:1.5px solid var(--ink); color:var(--ink); background:var(--card,#fff); white-space:nowrap; }
.bio-tag.loud{ background:var(--tr-attn); border-color:var(--tr-attn); color:#fff; }
.bio-tag.moving{ background:var(--tr-attn); border-color:var(--tr-attn); color:#fff; }
.bio-tag.nopress{ background:var(--ink); border-color:var(--ink); color:#fff; }
.bio-tag.hot{ background:var(--tr-attn); border-color:var(--tr-attn); color:#fff; }

.bio-pl-dot{ width:10px; height:10px; border-radius:2px; display:inline-block; vertical-align:middle; margin-right:6px; }
/* platform badge: a brand-colour ring on paper with the platform's own mark inside,
   matching the chart's ring-node glyph language. Used in the path, fact grid, timeline. */
.plat-badge{ display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:2.5px solid; background:var(--card,#fff); vertical-align:middle; flex:none; box-sizing:border-box; }
.plat-badge svg{ display:block; }
.bio-arrow{ color:var(--ink); font-weight:800; margin:0 4px; }
.bio-sm{ color:var(--ink-soft); font-size:.9em; font-weight:600; }

/* fact grid: big values, hard black keys */
.bio-facts{ display:grid; grid-template-columns:1fr 1fr; gap:2px; background:var(--ink); border:2px solid var(--ink); border-radius:12px; overflow:hidden; margin:0 0 30px; }
.bio-fact{ background:var(--card,#fff); padding:14px 16px; min-width:0; }
.bio-fact-k{ font:800 10px/1 var(--gvc-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 8px; }
.bio-fact-v{ font:700 17px/1.2 var(--serif); color:var(--ink); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.bio-fact-v b{ font-weight:800; }

.bio-sec{ margin:0 0 30px; }
.bio-h4{ margin:0 0 16px; font:800 15px/1 var(--serif); letter-spacing:.01em; text-transform:none; color:var(--ink); padding-bottom:8px; border-bottom:2px solid var(--ink); display:inline-block; }

/* timeline beats: bigger text, heavier nodes, ink line */
.bio-beats{ list-style:none; margin:0; padding:0; position:relative; }
.bio-beats:before{ content:""; position:absolute; left:8px; top:10px; bottom:18px; width:2.5px; background:var(--ink); opacity:.85; }
.bio-beat{ position:relative; padding:0 0 22px 34px; }
.bio-beat:last-child{ padding-bottom:0; }
.bio-node{ position:absolute; left:0; top:2px; width:18px; height:18px; border-radius:50%; background:var(--card,#fff); border:4px solid var(--tr-vol,#234a34); box-sizing:border-box; }
.bio-beat.amp .bio-node{ border-color:var(--gv-gold,#c08a2a); box-shadow:0 0 0 4px rgba(192,138,42,.22); }
.bio-beat.spread .bio-node{ border-color:var(--tr-meas,#1f7a8c); }
.bio-beat.press .bio-node{ border-color:var(--gv-ink,#171310); }
.bio-beat.now .bio-node{ border-color:var(--tr-attn,#e0522f); border-style:dashed; }
.bio-when{ font:800 11px/1 var(--gvc-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:0 0 5px; }
.bio-what{ font:500 16px/1.45 var(--serif); color:var(--ink); }
.bio-what b{ font-weight:800; }
.bio-src{ font:800 12px var(--gvc-mono); color:var(--tr-attn); text-decoration:none; white-space:nowrap; }
.bio-src:hover{ text-decoration:underline; }

/* notable wording: real quote chips, ink, not gray */
.bio-phrase-lab{ margin:0 0 9px; font:800 12px/1 var(--gvc-mono); letter-spacing:.02em; text-transform:uppercase; color:var(--ink-soft); }
.bio-phrase-lab + .bio-phrases{ margin-bottom:18px; }
.bio-phrases{ display:flex; gap:9px; flex-wrap:wrap; }
.bio-phrase{ font:600 16px/1.3 var(--serif); color:var(--ink); background:linear-gradient(180deg,#fff,var(--tr-attn-tint)); border:2px solid var(--tr-attn); border-radius:10px; padding:8px 14px; box-shadow:0 1px 0 rgba(224,82,47,.15); }
/* the source's own wording gets the teal "measured" tint; the crowd's gets the orange */
.bio-src-phrases .bio-phrase{ background:linear-gradient(180deg,#fff,var(--tr-meas-tint)); border-color:var(--tr-meas); box-shadow:0 1px 0 rgba(31,122,140,.15); }

/* the whole story: bigger, blacker body */
.bio-about p{ margin:0 0 14px; font:400 18px/1.55 var(--serif); color:var(--ink); text-wrap:pretty; }
.bio-about p:first-child{ font-size:20px; line-height:1.45; }
.bio-about p:last-child{ margin-bottom:0; }
.bio-about b{ color:var(--ink); font-weight:800; }
.bio-caveat{ display:block; margin-top:8px; padding:10px 13px; border-left:3px solid var(--tr-meas); background:rgba(31,122,140,.06); border-radius:0 6px 6px 0; font:500 13px/1.5 var(--sans); color:var(--ink-soft); }

/* ---- structured KYM synopsis: labeled beats, then the receipts beneath ----------- */
.bio-story{ display:block; }
/* each beat: a mono label, then the body in serif lead type. The label sits above the
   body on narrow columns and rides its left edge on wide ones, so it reads as a section. */
.bio-beat-row{ display:grid; grid-template-columns:104px 1fr; gap:4px 18px; margin:0 0 18px; align-items:baseline; }
.bio-beat-row:last-child{ margin-bottom:0; }
.bio-beat-lab{ font:800 10.5px/1.3 var(--gv-mono); letter-spacing:.13em; text-transform:uppercase; color:var(--tr-attn); padding-top:5px; }
.bio-beat-body{ font:400 17px/1.5 var(--serif); color:var(--ink); text-wrap:pretty; }
.bio-beat-body b{ color:var(--ink); font-weight:800; }
/* a verbatim first post reads as a pull-quote, not body copy */
.bio-quote{ display:block; font:italic 400 16px/1.5 var(--serif); color:var(--ink-soft); padding-left:12px; border-left:2px solid var(--tr-meas); }
/* receipts: the sourced evidence, smaller + muted, set off by a hairline so the story
   reads first and the proof backs it. */
.bio-receipts{ margin:16px 0 0; padding:13px 0 0; border-top:1px solid var(--line-2); }
.bio-receipts p{ margin:0 0 7px; font:400 13px/1.5 var(--sans); color:var(--ink-soft); text-wrap:pretty; }
.bio-receipts p:last-child{ margin-bottom:0; }
.bio-receipts b{ color:var(--ink); font-weight:700; }

@media (max-width:560px){
  .bio-facts{ grid-template-columns:1fr; } .bio-verdict{ font-size:26px; }
  /* stack the label above the body on phones */
  .bio-beat-row{ grid-template-columns:1fr; gap:3px; }
  .bio-beat-lab{ padding-top:0; }
  .bio-beat-body{ font-size:16px; }
}

/* =========================================================================
   THE BOARD (goal + six tabs). Eye path on every tab: the headline sentence is
   the answer and its colored words are the legend; one hero; numbered beats in
   time order; one loud fact card; everything else quiet below. No em dashes.
   ========================================================================= */
.gvc-hl{ margin:0; max-width:30ch; font:700 clamp(26px,3.6vw,40px)/1.12 var(--serif); letter-spacing:-.022em; color:var(--ink); text-wrap:balance; }
.gvc-hl em, .gvc-tabh em{ font-style:normal; }
.gvc-a{ color:var(--tr-attn,#e0522f); }
.gvc-b{ color:var(--tr-meas,#1f7a8c); }
.gvc-crumb span{ margin:0 2px; }

/* the goal switcher: a quiet segmented control under the headline */
.gvc-goal{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:16px 2px 0; }
.gvc-goal-lab{ font:700 10.5px/1 var(--gvc-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-right:4px; }
.gvc-goal-b{ font:600 12.5px/1 var(--sans); color:var(--ink-soft); background:rgba(255,255,255,.6); border:1px solid var(--line-2); border-radius:100px; padding:8px 13px; cursor:pointer; transition:background .14s,color .14s,border-color .14s; }
.gvc-goal-b:hover{ color:var(--ink); background:#fff; }
.gvc-goal-b.on{ color:var(--ink); background:#fff; border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.gvc-goal-b:focus-visible, .gvc-beat:focus-visible, .gvc-fact-act:focus-visible{ outline:2px solid var(--tr-meas,#1f7a8c); outline-offset:2px; }

/* each tab's own answer, when it differs from the header's */
.gvc-tabh{ margin:22px 2px 0; max-width:46ch; font:600 clamp(20px,2.4vw,26px)/1.25 var(--serif); letter-spacing:-.012em; color:var(--ink); text-wrap:balance; }

/* numbered beats under the chart, read left to right in time order */
.gvc-beats{ display:grid; grid-template-columns:repeat(4,1fr); margin-top:-1px; background:var(--card,#fff); border:1px solid var(--line-2); border-top:0; border-radius:0 0 var(--gvc-r) var(--gvc-r); overflow:hidden; }
.gvc-beats.n1{ grid-template-columns:1fr; }
.gvc-beats.n2{ grid-template-columns:repeat(2,1fr); }
.gvc-beats.n3{ grid-template-columns:repeat(3,1fr); }
.gvc-hero .gv{ border-radius:var(--gvc-r) var(--gvc-r) 0 0; }
.gvc-hero .gv:only-child{ border-radius:var(--gvc-r); }
.gvc-beat{ all:unset; box-sizing:border-box; display:grid; grid-template-columns:22px 1fr; gap:3px 11px; padding:14px 16px 16px; border-right:1px solid var(--line); cursor:pointer; text-align:left; }
.gvc-beat:last-child{ border-right:0; }
.gvc-beat:hover{ background:#faf7f2; }
.gvc-beat-n{ grid-row:1/4; width:20px; height:20px; border-radius:50%; background:var(--ink); color:#fff; font:700 10.5px/20px var(--gvc-mono); text-align:center; }
.gvc-beat-when{ font:600 10.5px/1.3 var(--gvc-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.gvc-beat-what{ font:600 14px/1.3 var(--sans); color:var(--ink); }
.gvc-beat-stat{ display:flex; align-items:center; gap:7px; margin-top:3px; font:600 13px/1.2 var(--gvc-mono); color:var(--ink-soft); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gvc-beat-stat i{ width:8px; height:8px; border-radius:50%; flex:none; }
.gv-beatno{ pointer-events:none; }

/* the summary row: the loud fact card beside the goal's four numbers */
.gvc-sum{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.5fr); gap:14px; margin:14px 0 0; align-items:stretch; }
.gvc-sum:not(:has(.gvc-fact)){ grid-template-columns:1fr; }
.gvc-sum .gvc-kpis{ margin:0; grid-template-columns:repeat(2,1fr); }
.gvc-kpis.n4{ grid-template-columns:repeat(4,1fr); }
.gvc-sum .gvc-kpis.n4, .gvc-sum .gvc-kpis.n3{ grid-template-columns:repeat(2,1fr); }
.gvc-sum:not(:has(.gvc-fact)) .gvc-kpis.n4{ grid-template-columns:repeat(4,1fr); }
.gvc-fact{ display:flex; flex-direction:column; gap:10px; padding:22px 22px 20px; background:var(--ink); color:#f4efe7; border-radius:var(--gvc-r); box-shadow:var(--gvc-lift-2); }
.gvc-fact-big{ font:700 clamp(40px,5vw,58px)/1 var(--gvc-mono); letter-spacing:-.03em; color:#fff; font-variant-numeric:tabular-nums; }
.gvc-fact-txt{ margin:0; font:400 15px/1.5 var(--sans); color:#d9d2c8; max-width:46ch; text-wrap:pretty; }
.gvc-fact-txt b{ color:#fff; font-weight:600; }
.gvc-fact-act{ align-self:flex-start; margin-top:auto; font:700 12.5px/1 var(--sans); color:var(--ink); background:#fff; border:0; border-radius:100px; padding:10px 15px; cursor:pointer; text-decoration:none; }
.gvc-fact-act:hover{ background:#f1ebe2; text-decoration:none; }

/* avatars: monogram underneath, the real picture on top when we have one */
.gvc-av2{ position:relative; display:inline-flex; align-items:center; justify-content:center; flex:none; width:40px; height:40px; border-radius:50%; overflow:hidden; color:#fff; font:700 15px/1 var(--sans); }
.gvc-av2 img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Origin: earliest we could verify vs the biggest account on it */
.gvc-cmp{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); margin:16px 0 0; background:var(--card,#fff); border:1px solid var(--line-2); border-radius:var(--gvc-r); box-shadow:var(--gvc-lift); overflow:hidden; }
.gvc-cmp.one{ grid-template-columns:1fr; }
.gvc-cmp-side{ padding:20px 22px 22px; display:flex; flex-direction:column; gap:12px; min-width:0; border-top:4px solid var(--tr-meas,#1f7a8c); }
.gvc-cmp-side.a{ border-top-color:var(--tr-attn,#e0522f); }
.gvc-cmp-lab{ margin:0; font:700 10.5px/1 var(--gvc-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.gvc-cmp-who{ display:flex; align-items:center; gap:12px; min-width:0; }
.gvc-cmp-who b{ display:block; font:700 17px/1.2 var(--sans); color:var(--ink); }
.gvc-cmp-who span{ display:block; margin-top:3px; font:500 12px/1.3 var(--gvc-mono); color:var(--muted); }
.gvc-cmp-q{ margin:0; font:italic 400 16px/1.5 var(--serif); color:var(--ink-soft); text-wrap:pretty; }
.gvc-cmp-link{ margin-top:auto; font:700 12.5px var(--sans); color:var(--ink); }
.gvc-cmp-mid{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:0 18px; border-left:1px solid var(--line); border-right:1px solid var(--line); background:#faf7f2; }
.gvc-cmp-mid b{ font:700 26px/1 var(--gvc-mono); color:var(--ink); white-space:nowrap; }
.gvc-cmp-mid span{ font:600 11px/1 var(--gvc-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.gvc-note{ margin:10px 4px 0; font:400 12.5px/1.5 var(--sans); color:var(--muted); }
.gvc-note b{ color:var(--ink-soft); }
.gvc-sec{ margin:26px 0 0; }
.gvc-sec-h{ margin:0 2px 10px; font:700 11px/1 var(--gvc-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

/* quiet drawers for everything below the eye path */
.gvc-quiet{ margin:14px 0 0; border:1px solid var(--line-2); border-radius:12px; background:rgba(255,255,255,.55); }
.gvc-quiet > summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; padding:13px 16px; font:600 13px/1.2 var(--sans); color:var(--ink-soft); }
.gvc-quiet > summary::-webkit-details-marker{ display:none; }
.gvc-quiet > summary:before{ content:"+"; font:700 14px/1 var(--gvc-mono); color:var(--muted); width:12px; }
.gvc-quiet[open] > summary:before{ content:"\2212"; }
.gvc-quiet > summary b{ margin-left:auto; font:600 12px var(--gvc-mono); color:var(--muted); }
.gvc-quiet > :not(summary){ margin:0 12px 12px; }
.gvc-stack{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.gvc-ghost{ padding:10px 0; border-top:1px solid var(--line); }
.gvc-ghost:first-child{ border-top:0; padding-top:0; }
.gvc-ghost-h{ display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.gvc-ghost-h b{ font:600 13.5px var(--sans); color:var(--ink); }
.gvc-ghost-h span{ font:500 11.5px var(--gvc-mono); color:var(--muted); }
.gvc-ghost p{ margin:5px 0 0; font:italic 400 14px/1.45 var(--serif); color:var(--ink-soft); }
.gvc-gaps{ margin:0; padding-left:18px; display:grid; gap:6px; font:400 13px/1.45 var(--sans); color:var(--ink-soft); }
.gvc-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.gvc-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 8px 6px 11px; border:1px solid var(--line-2); border-radius:100px; font:600 12.5px var(--sans); color:var(--ink); background:#fff; }
.gvc-chip b{ font:700 11px var(--gvc-mono); color:#fff; background:var(--ink); border-radius:100px; padding:3px 7px; }
.gvc-cta{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:14px 0 0; padding:18px 20px; background:var(--ink); color:#d9d2c8; border-radius:var(--gvc-r); }
.gvc-cta p{ margin:0; font:400 14.5px/1.5 var(--sans); max-width:60ch; }
.gvc-cta b{ color:#fff; }

@media (max-width:1000px){
  .gvc-sum{ grid-template-columns:1fr; }
  .gvc-beats, .gvc-beats.n3{ grid-template-columns:repeat(2,1fr); }
  .gvc-beat:nth-child(2n){ border-right:0; }
  .gvc-beat:nth-child(n+3){ border-top:1px solid var(--line); }
}
@media (max-width:760px){
  .gvc-cmp{ grid-template-columns:1fr; }
  .gvc-cmp-mid{ flex-direction:row; padding:12px 18px; border:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .gvc-kpis.n4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:460px){
  .gvc-beats, .gvc-beats.n2, .gvc-beats.n3{ grid-template-columns:1fr; }
  .gvc-beat{ border-right:0; border-top:1px solid var(--line); }
  .gvc-beat:first-child{ border-top:0; }
}
@media (prefers-reduced-motion:reduce){ .gvc-goal-b{ transition:none; } }

/* the board's Overview keeps the chart and the beats together: the per-post
   roster is still in the DOM (beats and dots select through it) but the Spread
   and Crowd tabs carry the account lists, so it stays out of the eye path here */
.gvc-console[data-goal] .gvc-hero .gv-rail{ display:none; }
.gvc-console[data-goal] .gvc-hero .gv-hint{ display:none; }

/* tabs keep their width and the bar scrolls sideways on a phone, never squeezes */
.gvc-tab{ flex:none; }