.analytics-page { padding-bottom: 0; --radar-muted: #b4ada3; }
.analytics-page .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.analytics-page .bar { position: relative; max-width: none; padding-inline: clamp(1.25rem, 4vw, 4rem); }
.brand-divider { color: #625b51; font-weight: 400; padding-inline: .35rem; }
.brand-module { font: 500 .85rem var(--sc-font-text); color: var(--radar-muted); letter-spacing: 0; }
.analytics-page nav a[aria-current] { color: var(--sc-accent); }
.radar-shell { max-width: 1480px; margin: auto; padding: 3.5rem clamp(1.25rem, 4vw, 4rem) 2rem; }
.radar-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; margin-bottom: 2rem; }
.radar-overline { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; color: var(--radar-muted); font-size: .72rem; margin-bottom: 1rem; }
.preview-badge { color: #71d6bb; border: 1px solid #36594b; border-radius: 4px; padding: .2rem .5rem; letter-spacing: .08em; font-size: .62rem; font-weight: 600; }
.radar-heading h1 { font-size: clamp(2.5rem, 4.5vw, 4.5rem); font-weight: 700; letter-spacing: -.045em; }
.radar-heading h1 > span { color: var(--sc-accent); }
.radar-heading p { margin: .75rem 0 0; color: var(--radar-muted); font-size: .95rem; }
.method-link { font-size: .75rem; color: var(--radar-muted); white-space: nowrap; text-underline-offset: 5px; }
.scope-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; padding: 1rem 0; border-block: 1px solid var(--sc-hairline); }
.scope-bar label { display: flex; align-items: center; gap: .8rem; color: var(--radar-muted); font-size: .75rem; }
.analytics-page select { font: 500 .78rem var(--sc-font-text); color: var(--sc-ink); background: #201c17; border: 1px solid #40382e; border-radius: 6px; padding: .7rem 2rem .7rem .75rem; min-height: 42px; max-width: 100%; cursor: pointer; }
.scope-dates { margin-left: auto; color: var(--radar-muted); font-size: .74rem; }
.analytics-page button { font-family: var(--sc-font-text); cursor: pointer; }
.quiet-button { padding: .6rem .75rem; min-height: 42px; border: 0; border-radius: 5px; background: transparent; color: var(--radar-muted); font-size: .75rem; }
.quiet-button:hover { background: #29231b; color: var(--sc-ink); }
.quiet-button:disabled { opacity: .35; cursor: default; }
.load-status { color: var(--radar-muted); padding: 3rem 0; }
.radar-stats { display: grid; grid-template-columns: repeat(4, 1fr); padding: 2rem 0 2.25rem; }
.radar-stats > div { padding: 0 1.5rem; border-left: 1px solid var(--sc-hairline); }
.radar-stats > div:first-child { padding-left: 0; border: 0; }
.radar-stats span, .radar-stats small { display: block; color: var(--radar-muted); font-size: .72rem; }
.radar-stats strong { display: block; font-family: var(--sc-font-display); font-size: 2.7rem; font-weight: 500; line-height: 1.3; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.radar-stats small { font-size: .65rem; margin-top: .3rem; }
.radar-main { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 1rem; }
.chart-panel { background: #15120f; border: 1px solid #302920; border-radius: 12px; padding: 1.5rem; min-width: 0; }
.panel-heading { display: flex; gap: 1rem; justify-content: space-between; align-items: start; }
.panel-heading h2 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.025em; }
.panel-heading p { margin: .4rem 0 0; color: var(--radar-muted); font-size: .73rem; line-height: 1.5; }
.compact-control { flex: 0 0 auto; }
.compact-control select { font-size: .7rem; padding: .5rem 1.5rem .5rem .6rem; }
.chart-legend, .show-legend { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center; margin: 1.1rem 0 .2rem; font-size: .65rem; color: var(--radar-muted); }
.legend-key { display: inline-flex; align-items: center; gap: .4rem; }
.legend-key i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--key); }
.show-legend .legend-key i { width: 17px; height: 0; border-radius: 0; border-top: 2px solid var(--key); background: none; }
.show-legend .legend-key[data-show="daily-ai-drop"] i { border-top-style: dashed; }
.bubble-chart { min-height: 370px; }
.bubble-chart svg, .trend-chart svg, .themes-chart svg { display: block; width: 100%; overflow: visible; }
.chart-grid { stroke: #302920; stroke-dasharray: 2 6; }
.chart-zero { stroke: #665742; stroke-dasharray: 4 5; }
.chart-axis { fill: #aaa093; font: 10px var(--sc-font-text); }
.chart-axis-title { fill: #b4ada3; font: 10px var(--sc-font-text); }
.chart-label { fill: #f5efe6; font: 500 11px var(--sc-font-text); paint-order: stroke; stroke: #15120f; stroke-width: 4px; stroke-linejoin: round; pointer-events: none; }
.chart-label-line { stroke: #84796a; opacity: .6; pointer-events: none; }
.bubble { cursor: pointer; outline: none; }
.bubble .bubble-dot { fill-opacity: .16; stroke-width: 1.3; transition: fill-opacity .2s, stroke-width .2s; transform-box: fill-box; transform-origin: center; animation: bubble-arrive .5s cubic-bezier(.2,.7,.2,1) both; }
.bubble.is-selected .bubble-dot, .bubble:hover .bubble-dot, .bubble:focus .bubble-dot { fill-opacity: .5; stroke-width: 2; }
.bubble:focus .focus-ring { stroke: #fff; }
.focus-ring { fill: none; stroke: transparent; stroke-width: 1; stroke-dasharray: 3 3; }
@keyframes bubble-arrive { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
.chart-caption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4rem; color: var(--radar-muted); font-size: .62rem; padding-top: .4rem; }
.definition { color: #a89f93; font-size: .65rem; line-height: 1.6; margin: .8rem 0 0; }
.focus-panel { background: #211a11; border: 1px solid #554026; border-radius: 12px; padding: 1.5rem; display: flex; flex-direction: column; min-width: 0; }
.focus-label { text-transform: uppercase; letter-spacing: .12em; font-size: .62rem; font-weight: 600; color: var(--sc-accent); margin-bottom: .8rem; }
.focus-panel select { width: 100%; font-size: 1.05rem; background: #2a2116; border-color: #5c472d; }
.focus-total { font: 500 4rem/1.1 var(--sc-font-display); letter-spacing: -.05em; margin: 1.5rem 0 .25rem; }
.focus-total small { font: 400 1.1rem var(--sc-font-text); color: #c8b9a5; letter-spacing: 0; margin-left: .35rem; }
.focus-description { font-size: .75rem; color: #c8b9a5; margin: 0 0 1.5rem; }
.focus-change { display: inline-block; padding: .35rem .65rem; border: 1px solid #5d513c; border-radius: 5px; font-size: .86rem; font-weight: 600; color: #f2dfbb; }
.focus-change.positive { color: #9aebcc; border-color: #365f4e; background: #1e3024; }
.focus-change.negative { color: #d4ceff; border-color: #51496a; background: #292334; }
.focus-comparison { margin: 1.4rem 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; border-top: 1px solid #493a28; padding-top: 1rem; }
.focus-comparison small { display: block; color: #c8b9a5; font-size: .6rem; }
.focus-comparison strong { display: block; font: 500 1.25rem var(--sc-font-display); margin: .3rem 0; }
.focus-link { margin-top: auto; padding-top: 1.5rem; font-size: .75rem; color: var(--sc-accent); text-underline-offset: 5px; }
.chart-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.trend-chart, .themes-chart { min-height: 270px; margin-top: .6rem; }
.chart-point { cursor: help; }
.theme-row { cursor: pointer; }
.theme-row:hover .chart-label, .theme-row:focus .chart-label { fill: var(--sc-accent); }
.evidence-panel { margin-top: 1rem; scroll-margin-top: 1rem; }
.outline-button { border: 1px solid #5b4932; border-radius: 5px; background: #241d14; padding: .7rem .9rem; color: #f5d7a7; font-size: .7rem; min-height: 42px; }
.outline-button:hover { background: #382916; }
.outline-button:disabled { opacity: .4; cursor: default; }
.evidence-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; margin-top: 1.5rem; }
.evidence-search { flex: 1; min-width: 180px; }
.evidence-search input { width: 100%; background: #0f0d0b; border: 1px solid #40382e; border-radius: 6px; padding: .8rem; font: 400 .8rem var(--sc-font-text); color: var(--sc-ink); }
.all-stories-toggle { font-size: .75rem; color: var(--radar-muted); display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.all-stories-toggle input { accent-color: var(--sc-accent); width: 16px; height: 16px; }
.story-row { display: grid; grid-template-columns: 128px minmax(0, 1fr) 20px; gap: 1.25rem; padding: 1.25rem 0; border-bottom: 1px solid #302920; text-decoration: none; }
.story-row:last-child { border: 0; }
.story-meta { color: var(--radar-muted); font-size: .66rem; }
.story-meta span { display: block; color: var(--show); margin-top: .3rem; }
.story-row h3 { font: 500 .88rem/1.5 var(--sc-font-text); letter-spacing: -.01em; }
.story-row p { font-size: .73rem; color: var(--radar-muted); line-height: 1.65; margin: .35rem 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.story-row:hover h3 { color: var(--sc-accent); }
.story-arrow { color: var(--sc-accent); font-size: .8rem; }
.story-tags { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; }
.story-tags span { font-size: .58rem; color: #b9afa1; border: 1px solid #3b3226; padding: .1rem .35rem; border-radius: 3px; }
.pagination { display: flex; justify-content: space-between; gap: 1rem; align-items: center; border-top: 1px solid #302920; padding-top: .75rem; font-size: .7rem; color: var(--radar-muted); }
.no-stories { padding: 2rem 0; color: var(--radar-muted); font-size: .85rem; }
.methodology { margin-top: 1.5rem; border-block: 1px solid #302920; font-size: .78rem; scroll-margin-top: 1rem; }
.methodology summary { padding: 1.1rem 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.methodology summary::-webkit-details-marker { display: none; }
.methodology[open] summary > span { transform: rotate(45deg); }
#method-content { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 3rem; padding-bottom: 1.25rem; color: var(--radar-muted); font-size: .74rem; }
#method-content strong { color: var(--sc-ink); font-weight: 500; }
#method-content p { margin: .4rem 0; }
.scope-note { max-width: 90ch; font-size: .69rem; color: #a89f93; margin: 1rem 0; }
.radar-footer { border-top: 1px solid #302920; padding: 1.5rem clamp(1.25rem, 4vw, 4rem); display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: .7rem; color: var(--radar-muted); }
.radar-footer .brand { font-size: 1.3rem; color: var(--sc-ink); }
.radar-footer > a:last-child { text-underline-offset: 4px; }
.chart-tooltip { position: fixed; z-index: 50; max-width: 260px; padding: .8rem 1rem; background: #f1e8d9; color: #251d13; border: 1px solid #fff4de; border-radius: 8px; font-size: .7rem; line-height: 1.65; box-shadow: 0 8px 30px #0007; pointer-events: none; }
.chart-tooltip strong { display: block; font-size: .8rem; }
.chart-tooltip small { display: block; color: #5c4b36; font-size: .65rem; }
@media (min-width: 1500px) { .radar-main { grid-template-columns: minmax(0, 1fr) 300px; } }
@media (max-width: 1050px) { .radar-main { grid-template-columns: minmax(0, 1fr) 245px; } .chart-panel, .focus-panel { padding: 1.1rem; } .scope-dates { margin-left: 0; } .radar-heading { align-items: start; } }
@media (max-width: 800px) { .radar-heading { display: block; } .method-link { display: inline-block; margin-top: 1rem; } .radar-main, .chart-pair { grid-template-columns: 1fr; } .focus-panel { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } .focus-label { grid-column: 1; margin-bottom: .5rem; } .focus-panel select { grid-column: 1; align-self: start; } #focus-detail { grid-column: 2; grid-row: 1 / 5; } .focus-total { margin-top: 0; font-size: 3rem; } .focus-link { grid-column: 1; align-self: end; padding-top: 1rem; } .focus-description { margin-bottom: .75rem; } .focus-comparison { margin: 1rem 0 0; } .radar-stats > div { padding-inline: 1rem; } .radar-stats strong { font-size: 2.3rem; } .radar-stats small { max-width: 18ch; } }
@media (max-width: 540px) { .analytics-page .bar { padding-block: 1rem; } .brand-module { font-size: .7rem; } .brand-divider { padding-inline: .1rem; } .analytics-page .bar .brand { font-size: 1.3rem; gap: .35rem; } .analytics-page .bar nav { gap: 1rem; } .radar-shell { padding-top: 2rem; } .radar-heading h1 { font-size: 2.7rem; } .radar-heading p { font-size: .85rem; } .scope-bar { gap: .75rem; } .scope-bar label { display: block; flex: 1; font-size: .65rem; } .scope-bar select { display: block; width: 100%; margin-top: .4rem; font-size: .72rem; padding-right: 1rem; } .scope-dates { font-size: .65rem; flex: 1; } .radar-stats { grid-template-columns: 1fr 1fr; gap: 1.5rem 0; padding-block: 1.5rem; } .radar-stats > div { padding-inline: 1rem; } .radar-stats > div:nth-child(3) { padding-left: 0; border-left: 0; } .radar-stats span { font-size: .65rem; } .radar-stats small { max-width: none; font-size: .6rem; } .radar-stats strong { font-size: 2.4rem; } .chart-panel, .focus-panel { padding: 1rem; } .bubble-panel .panel-heading { flex-wrap: wrap; gap: .6rem; } .panel-heading h2 { font-size: 1.1rem; } .chart-legend { gap: .65rem; font-size: .59rem; } .chart-caption { font-size: .58rem; } .focus-panel { column-gap: 1rem; } .focus-panel select { font-size: .8rem; } .focus-link { font-size: .68rem; } .focus-description { font-size: .68rem; } .focus-change { font-size: .72rem; padding-inline: .4rem; } .focus-comparison { gap: .5rem; } .focus-comparison strong { font-size: 1.1rem; } .evidence-panel .panel-heading { flex-wrap: wrap; } .story-row { grid-template-columns: minmax(0, 1fr) 16px; gap: .5rem; } .story-meta { grid-column: 1 / -1; display: flex; gap: .65rem; font-size: .62rem; } .story-meta span { margin: 0; } .story-row h3 { font-size: .82rem; } .story-row p { font-size: .7rem; } .story-tags { display: none; } #method-content { grid-template-columns: 1fr; } .radar-footer { flex-wrap: wrap; } .radar-footer > span { display: none; } .pagination { font-size: .62rem; } .pagination .quiet-button { font-size: .65rem; padding-inline: .5rem; } }
@media (prefers-reduced-motion: reduce) { .analytics-page *, .analytics-page *::before, .analytics-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }