/* ==========================================================================
   GenSight.AI dashboard: overrides on top of the site kit (assets/gs-site.css).
   Loaded after dashboard.html's own <style>. The Tailwind Play config in
   dashboard.html already maps utilities onto the kit (fonts, neutral scale,
   brand blue, calmed weights/radii/shadows); this file holds the few rules
   that utilities cannot express. Dashboard components added by later steps
   (verdict band, ledger, dot chart, sidebar tree) live here too.
   ========================================================================== */

body { font-family: var(--gs-font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
html.dark body { background-color: var(--gs-bg); }

/* Eyebrow labels (uppercase + tracked) are never heavier than 600: the
   900-weight micro-labels were the loudest "template" tell on the page. */
.uppercase.tracking-widest, .uppercase.tracking-wider { font-weight: 600; }
.dash-label.uppercase { font-weight: 500 !important; }

/* Numbers: tabular everywhere they are set in mono. */
.font-mono, .dash-label, [class*="font-mono"] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

/* Hairline surfaces: cards carry border + no shadow; the token line colour
   replaces Tailwind's slate-200 / white-5 pair in both themes. */
main .border-slate-200 { border-color: var(--gs-line); }
html.dark main .dark\:border-white\/5, html.dark main .dark\:border-white\/10 { border-color: var(--gs-line); }

/* Tooltips and modals on the kit's ink/inverse pair. */
.info-tip .tip-content { background: var(--gs-ink); color: var(--gs-inverse); border-radius: 8px; box-shadow: 0 12px 32px -8px rgba(15,17,21,.24); }
.info-tip .tip-content::after { border-top-color: var(--gs-ink); }
html.dark .info-tip .tip-content { background: var(--gs-surface-2); color: var(--gs-ink); border: 1px solid var(--gs-line-strong); }
html.dark .info-tip .tip-content::after { border-top-color: var(--gs-surface-2); }

/* Focus ring in the accent, not Tailwind blue. */
:focus-visible { outline: 2px solid var(--gs-accent); outline-offset: 2px; }

/* Primary action, same recipe as the site's .gs-btn-primary: ink on light,
   inverse on dark. Applied to the header Refresh and Run Gap Analysis. */
.gs-primary { background: var(--gs-ink); color: var(--gs-inverse); transition: background .15s ease, opacity .15s ease; }
.gs-primary:hover { background: #262a33; }
html.dark .gs-primary:hover { background: #ffffff; }
.gs-primary:disabled { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------- step 2: hierarchy
   Section titles: one eyebrow style for every panel heading (the uppercase
   font-black h3/h4s), ink not muted because it is the only heading a panel
   has; subtitles beneath stay muted body text. */
main :is(h2, h3, h4).uppercase { font-family: var(--gs-mono); font-weight: 500; font-size: 11px; letter-spacing: .1em; color: var(--gs-ink); }
main :is(h2, h3, h4).uppercase .info-tip { vertical-align: middle; }
.gs-panel-title { font-family: var(--gs-mono); font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gs-ink); }

/* Verdict band */
.gs-verdict-num { font-family: var(--gs-mono); font-weight: 400; font-size: 72px; line-height: .9; letter-spacing: -.04em; color: var(--gs-ink); font-variant-numeric: tabular-nums; }
.gs-verdict-denom { font-family: var(--gs-mono); font-size: 14px; color: var(--gs-faint); }
.gs-verdict-meta { font-family: var(--gs-mono); font-size: 11px; line-height: 1.7; color: var(--gs-muted); text-align: right; white-space: nowrap; }
.gs-verdict-track { position: relative; height: 4px; margin-top: 18px; border-radius: 2px; background: var(--gs-surface-2); overflow: hidden; }
html.dark .gs-verdict-track { background: rgba(255,255,255,.06); }
.gs-verdict-zone { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--score-band-color); opacity: .22; transition: left 1.5s cubic-bezier(.4,0,.2,1), width 1.5s cubic-bezier(.4,0,.2,1); }
.gs-verdict-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; background: var(--score-band-color); border-radius: 2px; transition: width 1.5s cubic-bezier(.4,0,.2,1), background .5s ease; }
.gs-verdict-summary { margin-top: 20px; font-size: 14px; line-height: 1.6; color: var(--gs-text); }
html.dark .gs-verdict-summary { color: var(--gs-text); }

/* Pillar ledger */
.gs-pillar + .gs-pillar { margin-top: 14px; }
.gs-pillar-name { font-family: var(--gs-mono); font-weight: 500; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gs-text); }
.gs-pillar-name .info-tip { vertical-align: middle; }
.gs-pillar-val { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--gs-mono); font-variant-numeric: tabular-nums; }
.gs-pillar-val > span:first-child { font-size: 14px; font-weight: 500; }
.gs-pillar-pts { font-size: 11px; color: var(--gs-faint); }
.gs-pillar-track { height: 2px; margin-top: 8px; background: var(--gs-surface-2); border-radius: 1px; overflow: hidden; }
html.dark .gs-pillar-track { background: rgba(255,255,255,.06); }
.gs-pillar-fill { height: 100%; border-radius: 1px; transition: width .7s ease, background .7s ease; }

/* ---------------------------------------------------------------- step 3: roadmap ledger
   One row per action; the same markup serves the brand roadmap, ProductSight
   and the legacy recommendations list. Columns: index · action · owner ·
   time/impact · tier · chevron. Below 900px the three meta columns fold into
   an inline line under the title. */
.gs-ledger { border-top: 1px solid var(--gs-line); }
.gs-ledger-head, .gs-ledger-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) 130px 120px 110px 16px; column-gap: 16px; align-items: center; }
.gs-ledger-head { padding: 8px 4px; font-family: var(--gs-mono); font-weight: 500; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--gs-faint); border-bottom: 1px solid var(--gs-line); }
.gs-ledger-item { border-bottom: 1px solid var(--gs-line); }
.gs-ledger-item.is-passing .gs-ledger-title { color: var(--gs-muted); }
.gs-ledger-row { width: 100%; padding: 13px 4px; background: none; border: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; }
.gs-ledger-row:hover .gs-ledger-title { color: var(--gs-accent-ink); }
.gs-ledger-idx { font-family: var(--gs-mono); font-size: 12px; color: var(--gs-faint); font-variant-numeric: tabular-nums; }
.gs-ledger-main { min-width: 0; }
.gs-ledger-title { display: block; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--gs-ink); transition: color .15s ease; }
.gs-ledger-sub { display: block; margin-top: 3px; font-family: var(--gs-mono); font-size: 11px; color: var(--gs-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-ledger-inline { display: none; margin-top: 4px; font-size: 12px; color: var(--gs-muted); }
.gs-ledger-owner { font-size: 12px; color: var(--gs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-ledger-time { font-family: var(--gs-mono); font-size: 11px; color: var(--gs-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.gs-ledger-tier { display: inline-flex; align-items: center; gap: 7px; font-family: var(--gs-mono); font-weight: 500; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--gs-muted); white-space: nowrap; }
.gs-ledger-tier::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gs-line-strong); flex: none; }
.gs-ledger-tier[data-tier="repair"]::before, .gs-ledger-tier[data-tier="critical"]::before, .gs-ledger-tier[data-tier="high"]::before { background: var(--gs-warn); }
.gs-ledger-tier[data-tier="maintenance"]::before, .gs-ledger-tier[data-tier="quick-win"]::before { background: var(--gs-accent); }
.gs-ledger-tier[data-tier="excellence"]::before, .gs-ledger-tier[data-tier="passing"]::before { background: var(--gs-ok); }
.gs-ledger-tier:empty { display: none; }
.gs-ledger-chevron { color: var(--gs-faint); }
.gs-ledger-body { padding: 2px 4px 20px 52px; }
.gs-ledger-sec { border-left: 1px solid var(--gs-line); padding: 2px 0 2px 18px; margin-top: 14px; }
.gs-ledger-sec:first-child { margin-top: 6px; }
.gs-ledger-label { font-family: var(--gs-mono); font-weight: 500; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--gs-muted); margin-bottom: 8px; }
.gs-ledger-foot { margin-top: 12px; padding-left: 19px; font-family: var(--gs-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--gs-faint); }
.gs-ledger-steps { list-style: decimal; margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.6; color: var(--gs-text); }
.gs-ledger-steps li + li { margin-top: 4px; }
@media (max-width: 900px) {
    .gs-ledger-head { display: none; }
    .gs-ledger-row { grid-template-columns: 28px minmax(0, 1fr) 16px; }
    .gs-ledger-owner, .gs-ledger-time, .gs-ledger-tier { display: none; }
    .gs-ledger-inline { display: block; }
    .gs-ledger-body { padding-left: 44px; }
}

/* ---------------------------------------------------------------- step 4: data displays
   Dot-on-axis leaderboard. Rows share one 0-100 axis so gaps read as distance.
   The audited brand's dot wears the mode accent (with its ±3 confidence zone
   behind it); rivals are ink; estimates are hollow. Text wears text tokens. */
.gs-dots { --gs-dot-accent: var(--gs-accent); }
.gs-dots-axis, .gs-dot-row { display: grid; grid-template-columns: 24px minmax(120px, 200px) minmax(0, 1fr) 44px; column-gap: 14px; align-items: center; }
.gs-dots-axis { padding: 0 10px 6px; }
.gs-dots-scale { position: relative; height: 12px; font-family: var(--gs-mono); font-size: 9px; color: var(--gs-faint); }
.gs-dots-scale i { position: absolute; top: 0; font-style: normal; transform: translateX(-50%); }
.gs-dots-scale i:nth-child(1) { left: 0; transform: none; }
.gs-dots-scale i:nth-child(2) { left: 50%; }
.gs-dots-scale i:nth-child(3) { left: 100%; transform: translateX(-100%); }
.gs-dot-row { padding: 9px 10px; border-top: 1px solid var(--gs-line); border-radius: 6px; transition: background .15s ease; }
.gs-dot-row.is-comparable { cursor: pointer; }
.gs-dot-row.is-comparable:hover { background: var(--gs-surface-2); }
html.dark .gs-dot-row.is-comparable:hover { background: rgba(255,255,255,.03); }
.gs-dot-row.is-selected { background: var(--gs-accent-soft); }
.gs-dot-row.is-user { background: transparent; }
.gs-dot-rank { font-family: var(--gs-mono); font-size: 11px; color: var(--gs-faint); font-variant-numeric: tabular-nums; }
.gs-dot-name { font-size: 13px; font-weight: 500; color: var(--gs-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-dot-row.is-user .gs-dot-name { color: var(--gs-ink); }
.gs-dot-you { display: inline-block; margin-left: 8px; font-family: var(--gs-mono); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--gs-accent-ink); }
.gs-dot-row.is-inf .gs-dot-you { color: #7c3aed; }
.gs-dot-track { position: relative; display: block; height: 16px; }
.gs-dot-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--gs-line); }
.gs-dot-zone { position: absolute; top: 3px; bottom: 3px; border-radius: 5px; background: var(--gs-dot-accent); opacity: .16; }
.gs-dot-row.is-inf .gs-dot-zone { background: #a855f7; }
.gs-dot { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--gs-ink); box-shadow: 0 0 0 2px var(--gs-surface); }
html.dark .gs-dot { box-shadow: 0 0 0 2px #12151c; }
.gs-dot-row:not(.is-user) .gs-dot { background: var(--gs-text); }
.gs-dot-row.is-user .gs-dot { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--gs-dot-accent); }
.gs-dot-row.is-inf.is-user .gs-dot { background: #a855f7; }
.gs-dot.is-estimate { background: var(--gs-surface) !important; border: 2px solid var(--gs-faint); box-sizing: border-box; }
html.dark .gs-dot.is-estimate { background: #12151c !important; }
.gs-dot-score { font-family: var(--gs-mono); font-size: 12px; text-align: right; color: var(--gs-text); font-variant-numeric: tabular-nums; }
.gs-dot-row.is-user .gs-dot-score { color: var(--gs-ink); font-weight: 500; }
.gs-dots-note { margin: 10px 10px 0; font-size: 11px; color: var(--gs-faint); }
@media (max-width: 640px) { .gs-dots-axis, .gs-dot-row { grid-template-columns: 20px minmax(90px, 130px) minmax(0, 1fr) 36px; column-gap: 8px; } }

/* Why the gap: dumbbells on the same axis grammar (user dot accent, rival ink). */
.gs-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 12px; font-size: 11px; color: var(--gs-muted); }
.gs-legend span { display: inline-flex; align-items: center; gap: 6px; }
.gs-legend-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gs-text); }
.gs-legend-dot.is-user { background: var(--gs-accent); }
.gs-legend-dot.is-user.is-inf { background: #a855f7; }
.gs-dumbbell { display: grid; grid-template-columns: minmax(110px, 150px) minmax(0, 1fr) 64px; column-gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--gs-line); }
.gs-dumbbell:last-child { border-bottom: 1px solid var(--gs-line); }
.gs-dumbbell-label { font-family: var(--gs-mono); font-weight: 500; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--gs-muted); }
.gs-dumbbell-track { position: relative; display: block; height: 16px; }
.gs-dumbbell-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--gs-line); }
.gs-dumbbell-gap { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--gs-line-strong); }
.gs-dumbbell .gs-dot.is-rival { background: var(--gs-text); }
.gs-dumbbell .gs-dot.is-user { background: var(--gs-accent); width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.gs-dumbbells.is-inf .gs-dot.is-user { background: #a855f7; }
.gs-dumbbell-vals { font-family: var(--gs-mono); font-size: 11px; color: var(--gs-muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gs-dumbbell-vals b { font-weight: 500; color: var(--gs-ink); }
.gs-dumbbell-vals span { margin: 0 4px; color: var(--gs-faint); }

/* Decorative glowing dots before panel headings: gone. */
main div.rounded-full:has(+ h3), main div.rounded-full:has(+ h4) { display: none; }

/* ---------------------------------------------------------------- step 5: sidebar tree + plan
   Entities as a compact tree: glyph · name · latest score (mono, right).
   Hover reveals reorder / add product / remove over the score. Products are
   leaves behind a thin rule. */
.gs-tree-list { display: flex; flex-direction: column; }
.gs-tree-item, .gs-tree-leaf { position: relative; border-radius: 6px; }
.gs-tree-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 8px; border-radius: 6px; cursor: pointer; color: var(--gs-text); transition: background .15s ease, color .15s ease; }
.gs-tree-item .gs-tree-row { padding-left: 8px; }
.gs-tree-row:hover { background: var(--gs-surface-2); }
html.dark .gs-tree-row:hover { background: rgba(255,255,255,.04); }
.gs-tree-item.is-active > .gs-tree-row { background: var(--gs-accent-soft); color: var(--gs-ink); }
.gs-tree-item.is-active.is-inf > .gs-tree-row { background: rgba(168,85,247,.12); }
.gs-tree-glyph { position: relative; flex: none; width: 18px; height: 18px; border-radius: 4px; overflow: hidden; background: var(--gs-surface-2); }
.gs-tree-glyph i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--gs-mono); font-style: normal; font-size: 10px; font-weight: 500; color: var(--gs-muted); }
.gs-tree-glyph.is-inf i { color: #7c3aed; background: rgba(168,85,247,.12); }
.gs-tree-glyph img { position: relative; width: 100%; height: 100%; object-fit: contain; background: var(--gs-surface); }
.gs-tree-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-tree-item.is-active > .gs-tree-row .gs-tree-name { font-weight: 600; }
.gs-tree-score { flex: none; min-width: 22px; text-align: right; font-family: var(--gs-mono); font-size: 12px; color: var(--gs-muted); font-variant-numeric: tabular-nums; transition: opacity .15s ease; }
.gs-tree-item.is-active > .gs-tree-row .gs-tree-score { color: var(--gs-ink); }
.gs-tree-actions { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 1px; padding: 2px; border-radius: 6px; background: var(--gs-surface); box-shadow: 0 0 0 1px var(--gs-line); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
html.dark .gs-tree-actions { background: #171b24; }
.gs-tree-item:hover > .gs-tree-actions, .gs-tree-item:focus-within > .gs-tree-actions, .gs-tree-leaf:hover > .gs-tree-actions, .gs-tree-leaf:focus-within > .gs-tree-actions { opacity: 1; pointer-events: auto; }
.gs-tree-item:hover > .gs-tree-row .gs-tree-score, .gs-tree-item:focus-within > .gs-tree-row .gs-tree-score { opacity: 0; }
.gs-tree-actions button { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: none; color: var(--gs-muted); cursor: pointer; }
.gs-tree-actions button svg { width: 12px; height: 12px; }
.gs-tree-actions button:hover { background: var(--gs-surface-2); color: var(--gs-ink); }
html.dark .gs-tree-actions button:hover { background: rgba(255,255,255,.08); }
.gs-tree-actions button:disabled { color: var(--gs-line-strong); cursor: not-allowed; background: none; }
.gs-tree-actions button.is-danger:hover { color: var(--gs-bad); }
.gs-tree-leaves { margin: 1px 0 4px 16px; padding-left: 10px; border-left: 1px solid var(--gs-line); }
.gs-tree-leaf .gs-tree-row { padding: 5px 8px; }
.gs-tree-leaf .gs-tree-name { font-size: 12px; font-weight: 400; color: var(--gs-muted); }
.gs-tree-leaf.is-active > .gs-tree-row { background: var(--gs-accent-soft); }
.gs-tree-leaf.is-active > .gs-tree-row .gs-tree-name { color: var(--gs-ink); font-weight: 500; }
.gs-tree-leaf.is-active.is-inf > .gs-tree-row { background: rgba(168,85,247,.12); }
.gs-tree-leaf-add, .gs-tree-add { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font-family: var(--gs-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--gs-faint); transition: color .15s ease; }
.gs-tree-leaf-add { padding: 5px 8px; }
.gs-tree-add { margin-top: 10px; padding: 8px 8px; border-top: 1px solid var(--gs-line); }
.gs-tree-leaf-add:hover, .gs-tree-add:hover { color: var(--gs-ink); }
.gs-tree-add.cursor-not-allowed { color: var(--gs-faint); }

/* Plan footer: eyebrow + hairline meters + compact buttons. */
.gs-plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.gs-plan-name { font-family: var(--gs-mono); font-weight: 500; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gs-ink); }
.gs-plan-reset { font-family: var(--gs-mono); font-size: 10px; color: var(--gs-faint); }
.gs-plan-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; }
.gs-plan-label { font-size: 12px; color: var(--gs-muted); }
.gs-plan-val { font-family: var(--gs-mono); font-size: 12px; color: var(--gs-ink); font-variant-numeric: tabular-nums; }
.gs-plan-val span { color: var(--gs-faint); }
.gs-plan-val.is-full { color: var(--gs-bad); }
.gs-plan-meter { height: 2px; margin-top: 5px; background: var(--gs-surface-2); border-radius: 1px; overflow: hidden; }
html.dark .gs-plan-meter { background: rgba(255,255,255,.06); }
.gs-plan-fill { height: 100%; background: var(--gs-accent); transition: width .5s ease; }
.gs-plan-fill.is-full { background: var(--gs-bad); }
.gs-plan-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.gs-plan-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 7px 10px; border: 1px solid var(--gs-line-strong); border-radius: 6px; background: none; font-size: 12px; font-weight: 500; color: var(--gs-text); cursor: pointer; text-decoration: none; transition: border-color .15s ease, color .15s ease; }
.gs-plan-btn svg { width: 13px; height: 13px; color: var(--gs-muted); }
.gs-plan-btn:hover { border-color: var(--gs-ink); color: var(--gs-ink); }
.gs-plan-link { background: none; border: 0; padding: 4px 0 0; font-size: 11px; color: var(--gs-faint); cursor: pointer; text-align: center; }
.gs-plan-link:hover { color: var(--gs-ink); }
.gs-plan-note { font-size: 12px; line-height: 1.5; color: var(--gs-muted); margin: 0 0 10px; }
.gs-plan-cta { width: 100%; padding: 8px 10px; border-radius: 6px; font-size: 12px; font-weight: 500; border: 0; cursor: pointer; }

/* Decorative accents retired with the section dots: the teaser's gradient
   bar becomes a plain accent hairline, its label dot goes. */
.ais-teaser::before { width: 2px; background: var(--gs-accent); border-radius: 12px 0 0 12px; }
.ais-teaser-label-dot { display: none; }
main :is(h3, h4) > div.rounded-full { display: none; }

/* ============================================================
   AI Perception (v2 of the LLM Bias card). Rendered by
   renderPerception() in dashboard.html from audit_data.perception.
   Engine cards are buttons: clicking one filters the topics, quotes
   and descriptors below to that engine; the active card is inked.
   ============================================================ */
.gs-perc-verdict { font-size: 14px; line-height: 1.55; color: var(--gs-ink); max-width: 760px; }
.gs-perc-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.gs-perc-tag { font-family: var(--gs-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--gs-line); border-radius: 4px; padding: 3px 7px; color: var(--gs-muted); }
.gs-perc-tag.is-established { color: var(--gs-ok); border-color: var(--gs-ok); }
.gs-perc-tag.is-thin { color: var(--gs-warn); border-color: var(--gs-warn); }
.gs-perc-tag.is-none, .gs-perc-tag.is-bad { color: var(--gs-bad); border-color: var(--gs-bad); }
.gs-perc-tag.is-warn { color: var(--gs-warn); border-color: var(--gs-warn); }
.gs-perc-overall { text-align: right; min-width: 220px; flex-shrink: 0; }
.gs-perc-lean { font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--gs-ink); line-height: 1.1; }
.gs-perc-lean.is-sm { font-size: 15px; }
.gs-perc-bar { display: flex; height: 4px; border-radius: 2px; overflow: hidden; background: var(--gs-line); margin: 8px 0 6px; }
.gs-perc-bar i { display: block; height: 100%; }
.gs-perc-bar .ok { background: var(--gs-ok); } .gs-perc-bar .warn { background: var(--gs-warn); } .gs-perc-bar .bad { background: var(--gs-bad); } .gs-perc-bar .neu { background: var(--gs-line-strong); }
.gs-perc-counts { font-size: 12px; color: var(--gs-muted); }
.gs-perc-eyebrow { font-family: var(--gs-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gs-ink); margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.gs-perc-eyebrow .n { color: var(--gs-faint); }
.gs-perc-eyebrow.ok { color: var(--gs-ok); } .gs-perc-eyebrow.bad { color: var(--gs-bad); } .gs-perc-eyebrow.warn { color: var(--gs-warn); }
.gs-perc-engines { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .gs-perc-engines { grid-template-columns: 1fr; } }
.gs-perc-engine { text-align: left; width: 100%; border: 1px solid var(--gs-line); border-radius: 10px; padding: 14px 16px; background: transparent; cursor: pointer; transition: border-color .15s, box-shadow .15s; font: inherit; color: inherit; }
.gs-perc-engine:hover { border-color: var(--gs-line-strong); }
.gs-perc-engine.is-active { border-color: var(--gs-ink); box-shadow: inset 0 0 0 1px var(--gs-ink); }
.gs-perc-engine.is-muted { opacity: .55; }
.gs-perc-engine.is-muted.is-active { opacity: .85; }
.gs-perc-engine-head { display: flex; align-items: center; gap: 8px; font-family: var(--gs-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--gs-muted); margin-bottom: 8px; }
.gs-perc-engine-head .ais-tab-logo { width: 14px; height: 14px; }
.gs-perc-engine-status { font-size: 12px; color: var(--gs-muted); margin-top: 6px; }
.gs-perc-engine-note { font-size: 12px; margin-top: 4px; }
.gs-perc-engine-note.bad { color: var(--gs-bad); } .gs-perc-engine-note.warn { color: var(--gs-warn); }
.gs-perc-filter { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12px; color: var(--gs-muted); min-height: 18px; }
.gs-perc-filter button { font: inherit; font-size: 12px; color: var(--gs-accent-ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.gs-perc-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 900px) { .gs-perc-cols { grid-template-columns: 1fr; } }
.gs-perc-topic { border-top: 1px solid var(--gs-line); }
.gs-perc-topic.is-muted { opacity: .55; }
.gs-perc-topic > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; }
.gs-perc-topic > summary::-webkit-details-marker { display: none; }
.gs-perc-topic > summary::before { content: ''; width: 6px; height: 6px; border-right: 1.5px solid var(--gs-faint); border-bottom: 1.5px solid var(--gs-faint); transform: rotate(-45deg); margin-right: 10px; flex-shrink: 0; transition: transform .15s; }
.gs-perc-topic[open] > summary::before { transform: rotate(45deg); }
.gs-perc-topic-name { font-size: 14px; font-weight: 500; color: var(--gs-ink); text-transform: capitalize; flex: 1; min-width: 0; }
.gs-perc-topic-meta { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.gs-perc-topic-meta .gs-perc-n { font-family: var(--gs-mono); font-size: 11px; color: var(--gs-faint); margin-left: 6px; white-space: nowrap; }
.gs-perc-chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--gs-mono); font-size: 10px; letter-spacing: .04em; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--gs-line); color: var(--gs-muted); vertical-align: middle; }
.gs-perc-chip .ais-tab-logo { width: 11px; height: 11px; }
.gs-perc-chip.is-caveat { color: var(--gs-warn); border-color: var(--gs-warn); }
.gs-perc-quote { padding: 8px 0 10px 16px; font-size: 13px; line-height: 1.55; border-top: 1px dashed var(--gs-line); color: var(--gs-text); }
.gs-perc-quote q { quotes: '\201C' '\201D'; }
.gs-perc-quote .gs-perc-chip { margin-right: 6px; }
.gs-perc-more > summary { list-style: none; cursor: pointer; font-size: 12px; color: var(--gs-accent-ink); padding: 8px 0; }
.gs-perc-more > summary::-webkit-details-marker { display: none; }
.gs-perc-descs { display: flex; flex-wrap: wrap; gap: 8px; }
.gs-perc-desc { margin: 0; border: 1px solid var(--gs-line); border-radius: 8px; padding: 6px 10px; font-size: 13px; }
.gs-perc-desc > summary { list-style: none; cursor: pointer; }
.gs-perc-desc > summary::-webkit-details-marker { display: none; }
.gs-perc-desc > summary b { font-weight: 500; color: var(--gs-ink); }
.gs-perc-desc > summary span { color: var(--gs-faint); }
.gs-perc-desc[open] { flex-basis: 100%; }
.gs-perc-desc .gs-perc-quote { padding-left: 0; border-top: 0; margin-top: 4px; }
.gs-perc-hint, .gs-perc-empty-sub { font-size: 12px; color: var(--gs-faint); margin-top: 8px; }
.gs-perc-sources > summary { list-style: none; cursor: pointer; font-size: 12px; color: var(--gs-faint); margin-top: 16px; }
.gs-perc-sources > summary::-webkit-details-marker { display: none; }
.gs-perc-srcline { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px 0; border-top: 1px solid var(--gs-line); font-size: 12px; }
.gs-perc-empty { padding: 28px 8px; text-align: center; }
.gs-perc-empty h4 { font-size: 15px; font-weight: 500; color: var(--gs-ink); margin: 0 0 6px; }
.gs-perc-empty p { font-size: 13px; color: var(--gs-muted); max-width: 520px; margin: 0 auto; line-height: 1.55; }
.gs-perc-drift > summary { list-style: none; cursor: pointer; }
.gs-perc-drift > summary::-webkit-details-marker { display: none; }
.gs-perc-drift > summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid var(--gs-warn); border-bottom: 1.5px solid var(--gs-warn); transform: rotate(-45deg); margin-left: 2px; transition: transform .15s; }
.gs-perc-drift[open] > summary::after { transform: rotate(45deg); }