/* The admin's Metrics, Studio and Goals pages (docs/METRICS.md). Charts are
   inline SVG drawn by MetricsHelper: the CSP allows no style attributes, so
   their colours are classes here. */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; }
.page-head h1 { margin-bottom: 6px; }
.page-head .tabs { margin: 0; }
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pills a { padding: 4px 10px 2px; background: var(--empty); color: var(--silver); text-decoration: none; font-family: var(--pixel); font-size: 16px; text-transform: uppercase; }
.pills a.active { background: var(--yellow); color: var(--ink); }
.pills a:hover { color: var(--yellow); } .pills a.active:hover { color: var(--ink); }
.legend { display: flex; gap: 8px 20px; flex-wrap: wrap; align-items: center; margin: 14px 0 0; }
.legend span { display: inline-flex; gap: 6px; align-items: center; }
svg.swatch { height: 14px; width: auto; }
.counting { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 18px 0; }
.foot { margin-top: 40px; padding-top: 16px; border-top: 3px solid var(--empty); }
.scroll { overflow-x: auto; }

/* KPI tiles */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.kpi { background: var(--panel); padding: 16px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--px-border); }
.kpi-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.kpi-label { color: var(--silver); font-size: 0.9rem; }
.kpi-value { font-family: var(--pixel); font-size: 32px; font-weight: 400; color: var(--yellow); line-height: 1.1; text-shadow: 3px 3px 0 var(--ink); }
.kpi-change { font-family: var(--pixel); font-size: 16px; color: var(--muted); }
.is-good { color: var(--green) !important; } .is-bad { color: var(--red) !important; } .is-new { color: var(--blue) !important; }
.kpi-foot { display: flex; justify-content: space-between; gap: 4px 8px; flex-wrap: wrap; color: var(--muted); font-size: 0.8rem; }
.goal-text { color: var(--pink); }
.kpi .tag, .tag.new-tracking { align-self: flex-start; flex: none; }
.tag.new-tracking { background: var(--blue); color: var(--ink); }
.tag.goal-on-pace, .tag.goal-met, .tag.goal-hit { background: var(--green); color: var(--ink); }
.tag.goal-behind, .tag.goal-below, .tag.goal-missed { background: var(--orange); color: var(--ink); }
.tag.goal-hit { background: var(--yellow); }

/* SVG pieces */
svg.meter { display: block; width: 100%; height: 12px; margin-top: 6px; }
svg .track { fill: var(--empty); }
svg .band { fill: #5be37d66; }
svg .goal { fill: var(--pink); }
svg .mark { fill: var(--text); }
svg.hbar { display: block; width: 100%; height: 18px; }
svg.hbar .fill { fill: var(--blue); }
svg.hbar .fill.green { fill: var(--green); } svg.hbar .fill.teal { fill: var(--teal); } svg.hbar .fill.yellow { fill: var(--yellow); }
svg.hbar .fill.red { fill: var(--red); } svg.hbar .fill.dim { fill: var(--dim); }
svg.hbar .tick { fill: var(--text); }
svg.stacked { display: block; width: 100%; height: 28px; }
.s-yellow { fill: var(--yellow); } .s-orange { fill: var(--orange); } .s-blue { fill: var(--blue); } .s-dim { fill: var(--dim); }
svg.chart { display: block; width: 100%; height: 220px; }
svg.chart.short { height: 150px; }
svg.chart .bar { fill: var(--blue); }
svg.chart .bar.recent { fill: var(--yellow); }
svg.chart .future { fill: #ffffff08; }
svg.chart line.mark { stroke: var(--pink); stroke-width: 2; stroke-dasharray: 5 4; }
svg.chart line.pace { stroke: var(--pink); stroke-width: 3; stroke-dasharray: 8 5; }
.chart-labels { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 16px; margin-top: 8px; }
.chart-stats { display: flex; gap: 8px 28px; flex-wrap: wrap; margin: 14px 0 0; color: var(--silver); font-size: 0.9rem; }
.chart-stats strong { font-family: var(--pixel); font-weight: 400; color: var(--yellow); font-size: 16px; }

/* Panels */
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 14px; }
.panel-head .pixel { font-size: 16px; }
.panel-head p.note { margin: 6px 0 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.panel-head.spaced { margin-top: 28px; }
.chart-panel { margin-top: 24px; }
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px 18px; margin-top: 18px; }
.panels.wide-first { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 860px) { .panels.wide-first { grid-template-columns: minmax(0, 1fr); } }
.barrow { display: grid; grid-template-columns: 130px minmax(0, 1fr) 72px; gap: 12px; align-items: center; margin: 12px 0; font-size: 0.9rem; color: var(--silver); }
.barrow strong { text-align: right; font-weight: 400; }
.barrow.funnel { grid-template-columns: 140px minmax(0, 1fr) 110px; }
ul.slices, ul.next { list-style: none; padding: 0; margin: 14px 0; }
ul.slices li, ul.next li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 0.9rem; color: var(--silver); border-bottom: 3px solid var(--empty); }
ul.slices li span, ul.next li a, ul.next li span { flex: 1; }
ul.slices li strong, ul.next li strong { font-weight: 400; color: var(--text); }

/* Cohorts */
table.cohorts { border-collapse: separate; border-spacing: 3px; width: 100%; white-space: nowrap; }
table.cohorts th { color: var(--muted); font-family: var(--pixel); font-size: 16px; font-weight: 400; text-transform: uppercase; padding: 6px; }
table.cohorts td { padding: 8px 6px 6px; text-align: center; font-size: 16px; min-width: 52px; }
table.cohorts td.week { text-align: left; color: var(--silver); font-size: 0.9rem; }
.heat-0 { background: #3ee0c80f; } .heat-1 { background: #3ee0c81f; } .heat-2 { background: #3ee0c833; } .heat-3 { background: #3ee0c84d; }
.heat-4 { background: #3ee0c866; } .heat-5 { background: #3ee0c880; } .heat-6 { background: #3ee0c899; } .heat-7 { background: #3ee0c8b3; color: var(--ink); }
.heat-8 { background: #3ee0c8cc; color: var(--ink); } .heat-9 { background: #3ee0c8e6; color: var(--ink); } .heat-10 { background: var(--teal); color: var(--ink); }

/* Studio */
.studio-filters { align-items: flex-end; margin: 18px 0 8px; }
.studio-filters { gap: 12px 16px; }
.studio-filters label { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.studio-filters select { margin: 0; font-size: 14px; padding: 8px 10px; font-family: var(--sans); text-transform: none; }
.panel.rows { padding: 0; }
.panel.rows .row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 3px solid var(--bg); color: var(--text); text-decoration: none; flex-wrap: wrap; }
.panel.rows .row:last-child { border-bottom: 0; }
a.row:hover { background: var(--panel-hi); color: var(--text); }
.insight .tag { min-width: 84px; text-align: center; color: var(--ink); }
.insight .text { flex: 1 1 360px; }
.insight .go { color: var(--pink); font-size: 16px; }
.tag.insight-hook { background: var(--green); } .tag.insight-bounce { background: var(--red); }
.tag.insight-rising { background: var(--yellow); } .tag.insight-fading { background: var(--orange); }
.board-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin: 40px 0 10px; }
.board-head h2 { margin: 0; }
.panel.rows .game-row { display: grid; grid-template-columns: 32px 44px minmax(140px, 1.1fr) minmax(160px, 2fr) 96px; flex-wrap: nowrap; }
@media (max-width: 760px) { .panel.rows .game-row { grid-template-columns: 24px 44px minmax(0, 1fr); } .game-row .bar, .game-row .delta { grid-column: 3; } }
.game-row .rank { color: var(--muted); text-align: right; font-size: 16px; }
.game-row .who { display: flex; flex-direction: column; min-width: 0; }
.game-row .who strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-row .bar { display: flex; align-items: center; gap: 10px; min-width: 0; }
.game-row .bar svg { flex: 1; }
.game-row .bar strong { font-weight: 400; min-width: 64px; text-align: right; font-size: 16px; }
.game-row .delta { text-align: right; font-size: 16px; color: var(--muted); }
.icon.letter { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; font-size: 24px; color: var(--ink); clip-path: var(--notch); }
.letter-0 { background: var(--yellow); } .letter-1 { background: var(--orange); } .letter-2 { background: var(--teal); }
.letter-3 { background: var(--blue); } .letter-4 { background: var(--pink); } .letter-5 { background: var(--green); }
img.icon { width: 44px; height: 44px; }
.game-head { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.game-head > div { flex: 1 1 320px; }
.game-head h1 { margin-bottom: 4px; }
.game-head .icon, .game-head .icon.letter { width: 96px; height: 96px; font-size: 56px; }
.game-head .tabs { margin: 0; }
.card .pixel { font-size: 16px; }
.first-rounds { display: flex; gap: 10px; height: 160px; }
.first-rounds > div { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.first-rounds svg.column { flex: 1; width: 100%; }
.first-rounds span { text-align: center; color: var(--muted); font-size: 16px; white-space: nowrap; }
svg .quit { fill: var(--red); } svg .over { fill: var(--green); }
.legend .key::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; }
.legend .key.quit::before { background: var(--red); } .legend .key.over::before { background: var(--green); }
.hook { margin-bottom: 18px; }
.hook-head { display: flex; justify-content: space-between; gap: 8px; color: var(--silver); font-size: 0.9rem; }
.hook-head strong { font-weight: 400; font-size: 16px; }
.hook .barrow { grid-template-columns: 90px minmax(0, 1fr) 56px; margin: 6px 0; }
table.segments td.pixel { font-size: 16px; }

/* Goals */
table.goals-table input[type=text], table.goals-table input[type=date] { margin: 0; width: 100%; min-width: 90px; padding: 8px 10px; font-size: 14px; }
table.goals-table input[type=date] { background: var(--ink); color: var(--text); border: 0; color-scheme: dark;
  box-shadow: 0 -3px 0 0 var(--empty), 0 3px 0 0 var(--empty), -3px 0 0 0 var(--empty), 3px 0 0 0 var(--empty); font: inherit; }
table.goals-table td { vertical-align: middle; }
form.goals .actions { display: flex; justify-content: flex-end; }