/* Player Insights screen. Shared pieces come from kit/; this file holds the stacked
 * day chart, the cohort table, the week heatmap and the retention summary. Every
 * color is a kit token: New uses --data-out, Returning and every other magnitude --data-in. */

.card-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.card-head h2 { margin: 0; font-size: var(--fs-md); font-weight: 650; }
.note-text { margin: var(--sp-3) 0 0; color: var(--muted); font-size: var(--fs-sm); max-width: 60rem; }

/* Count on the At risk tab */
.tabs .count {
    display: inline-block;
    margin-left: var(--sp-2);
    padding: 0 .45em;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--on-accent);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}

/* Legend and heatmap scale */
.legend { display: flex; gap: var(--sp-4); color: var(--ink-2); font-size: var(--fs-sm); }
.legend span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.sw { display: inline-block; width: .8571rem; height: .8571rem; border-radius: 2px; }
.sw.new { background: var(--data-out); }
.sw.returning { background: var(--data-in); }
.scale { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-2); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.scale .ramp { display: inline-block; width: 8rem; height: .5714rem; border-radius: var(--radius);
               background: linear-gradient(90deg, var(--data-track), var(--data-in)); }

/* Stacked columns: one per day, returning at the base, new on top, 2px apart */
.chart-wrap { position: relative; }
.col-chart.stacked { height: 12rem; gap: 3px; }
.col-chart.stacked .col { cursor: default; }
.stack { display: flex; flex-direction: column; gap: 2px; min-height: 2px; transform-origin: bottom; animation: grow-y var(--dur-slow) var(--ease-out); }
.seg { min-height: 2px; }
.seg.new { background: var(--data-out); border-radius: var(--radius) var(--radius) 0 0; }
.seg.returning { background: var(--data-in); }
.seg.returning:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.col-chart.stacked .col:hover .stack { filter: brightness(1.15); }
.axis-row { display: flex; gap: 3px; margin-top: var(--sp-1); }
.axis-row span { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--muted); text-align: center; white-space: nowrap; overflow: visible; }

/* Retention summary on the overview */
.ret-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
               border: var(--border) solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.ret { padding: var(--sp-3) var(--sp-4); min-width: 0; }
.ret + .ret { border-left: var(--border) solid var(--line); }
.ret label { display: block; color: var(--muted); font-size: var(--fs-sm); }
.ret strong { display: block; font-size: var(--fs-xl); font-weight: 650; font-stretch: var(--stretch-display); line-height: 1.15; font-variant-numeric: tabular-nums; }
.ret small { color: var(--ink-2); font-size: var(--fs-sm); }

/* Cohort table: shaded cells, darker teal is better retention. The shade is a layer
 * under the text at up to 46% strength, so text keeps over 6:1 contrast in both themes. */
.table-scroll { overflow-x: auto; }
.cohorts td.cell { position: relative; isolation: isolate; font-variant-numeric: tabular-nums; }
.cohorts td.cell::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--data-in);
    opacity: var(--heat, 0);
}
.cohorts td.cell.pending::before { display: none; }
.cohorts td, .cohorts th { padding-left: var(--sp-3); padding-right: var(--sp-3); }
.cohorts td.cell + td.cell { border-left: 2px solid var(--surface-1); }
.part { margin-left: .15em; color: var(--ink); }
td:first-child { font-weight: 600; white-space: nowrap; }

/* Week heatmap: 7 rows of 24 hours */
.heat {
    display: grid;
    grid-template-columns: 2.6rem repeat(24, minmax(0, 1fr));
    gap: 2px;
    align-items: center;
}
.heat .hour { font-size: var(--fs-sm); color: var(--muted); text-align: left; font-variant-numeric: tabular-nums; }
.heat .dayname { font-size: var(--fs-sm); color: var(--ink-2); }
.heat .hc {
    display: block;
    height: 1.9rem;
    border-radius: 2px;
    background: color-mix(in srgb, var(--data-in) var(--heat, 0%), var(--data-track));
}
.heat .hc:hover { outline: 2px solid var(--ink); outline-offset: -1px; }

/* Session facts */
.meta { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-5); margin: var(--sp-2) 0; align-items: baseline; }
.meta > span { color: var(--muted); font-size: var(--fs-sm); }
.meta > strong { font-size: var(--fs-lg); font-weight: 650; font-variant-numeric: tabular-nums; }

.bar-list .bar-row { grid-template-columns: minmax(8rem, 10rem) 1fr minmax(6rem, auto); }
.view > .card h2 { margin-bottom: var(--sp-3); }

@media (max-width: 1200px) {
    .ret + .ret { border-left: 0; }
}