/* ── analytics.css — Analytics · Frictions / FY report · Correlation (owner D) ──
   Cut verbatim from styles.css (UI 7.0 step 0). Loaded after styles.css and
   before the signals-*.css / boards.css sheets (see the <link> order in index.html). */

/* ── Analytics ─────────────────────────────────────────────────────── */
.an-facts { grid-template-columns: 1fr; }
.an-facts .hint { font-weight: 400; }
.cal-nav { display: flex; align-items: center; gap: 7px; }
.cal-nav h3 { min-width: 142px; text-align: center; }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 5px; }
.cal-head span { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); text-align: center; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-cell { min-height: 62px; border: 1px solid var(--border); border-radius: var(--r-sm); padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; position: relative; transition: border-color var(--dur), transform var(--dur) var(--spring), box-shadow var(--dur); }
.cal-cell.pad { border: none; }
.cal-cell.wk { border-style: dashed; opacity: .55; }
.cal-cell.today { box-shadow: inset 0 0 0 1.5px var(--text-2); }
.cal-cell[data-day] { cursor: pointer; }
.cal-cell[data-day]:hover { border-color: var(--text-2); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.cal-cell .d { font-size: 10.5px; color: var(--muted); font-weight: 500; }
.cal-cell .v { font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cal-cell .n { font-size: 10.5px; color: var(--muted); }
.cal-cell.pos { background: var(--pos-bg); border-color: transparent; } .cal-cell.pos .v { color: var(--pos); }
.cal-cell.neg { background: var(--neg-bg); border-color: transparent; } .cal-cell.neg .v { color: var(--neg); }
.cal-cell.pos.l3, .cal-cell.pos.l4 { background: color-mix(in srgb, var(--pos) 26%, var(--surface)); }
.cal-cell.neg.l3, .cal-cell.neg.l4 { background: color-mix(in srgb, var(--neg) 26%, var(--surface)); }
.cal-cell.pos.l4 .v, .cal-cell.neg.l4 .v { font-size: 13px; }
.cal-weeks { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 12px; font-size: 11.5px; }
.cal-week { display: inline-flex; gap: 5px; align-items: center; } .cal-week span:first-child { color: var(--muted); font-weight: 500; }

/* ── Frictions and the FY report ─────────────────────────────────────
   Both read as a statement rather than a dashboard, so the bars are wide
   and quiet and every number that is a cost carries its own minus. */
.fr-wf { display: flex; flex-direction: column; gap: 14px; }
.fr-bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.fr-bar-head b { font-size: 14px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.fr-bar-head b.pos { color: var(--pos); } .fr-bar-head b.neg { color: var(--neg); }
.fr-bar .bar { height: 8px; }
.fr-bar-note { font-size: 11px; color: var(--faint); margin-top: 4px; }
.fr-wf .fr-bar:last-child { padding-top: 12px; border-top: 1px solid var(--border); }

.tx-bar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: var(--gap); }
.tx-bar .f > span { white-space: nowrap; }
.tx-bar select { min-width: 150px; }
.tx-bar .hint { padding-bottom: 7px; }
.tx-bar .end { margin-left: auto; display: flex; align-items: center; gap: 7px; padding-bottom: 1px; }
.kv-list span.pos { color: var(--pos); } .kv-list span.warn { color: var(--warn); }

/* ── Correlation ─────────────────────────────────────────────────────
   Deliberately NOT the money palette: a coefficient is not a P&L, and
   a green 0.9 would read as good when it is the most dangerous cell on
   the page. Warm as a pair converges, accent when a pair offsets. */
.cr-matrix td.num { font-variant-numeric: tabular-nums; }
.cr-matrix td.cr-self { color: var(--faint); background: var(--surface-2); }
.cr-matrix td.cr-high { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); color: var(--warn); font-weight: 600; }
.cr-matrix td.cr-vhigh { background: color-mix(in srgb, var(--neg) 18%, var(--surface)); color: var(--neg); font-weight: 700; }
.cr-matrix td.cr-neg { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--accent-d); font-weight: 600; }
.cr-matrix thead th.num { text-align: right; }

@media (max-width: 640px) {
  .cal-cell { min-height: 48px; padding: 4px 5px; } .cal-cell .v { font-size: 11px; } .cal-cell .n { display: none; }
}

/* Phone: the calendar's month navigator goes on its own line; beside the
   subtitle it squeezed the text into a column wider than the screen. */
@media (max-width: 899px) {
  .card-head:has(.cal-nav) { flex-wrap: wrap; row-gap: 8px; }
  .card-head:has(.cal-nav) > div:first-child { min-width: 0; flex: 1 1 100%; }
}

/* ── Returns (pages/analytics/returns.js) ── */
.rt-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.rt-rf { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.rt-rf input { width: 70px; height: 30px; }
.rt-chart { width: 100%; height: auto; display: block; }
.rt-chart .rt-line { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.rt-chart .rt-line.acct { stroke: var(--s1); }
.rt-chart .rt-line.bench { stroke: var(--muted); stroke-dasharray: 4 3; }
.rt-chart .rt-dd { fill: var(--neg); opacity: .22; }
.rt-chart rect:hover { fill: color-mix(in srgb, var(--text) 5%, transparent); }
.rt-legend { display: flex; gap: 16px; font-size: 11.5px; color: var(--muted); margin-top: 6px; }
.rt-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.rt-legend i.acct { background: var(--s1); }
.rt-legend i.bench { background: var(--muted); }
.rt-legend i.dd { background: var(--neg); opacity: .4; height: 8px; }
.rt-grid th, .rt-grid td { text-align: right; }
.rt-grid tbody th { text-align: left; font-weight: 600; }
.rt-cell { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-cell b { display: block; font-weight: 600; }
.rt-cell span { display: block; font-size: 10.5px; color: var(--faint); }
.rt-cell.pos { background: color-mix(in srgb, var(--pos) 10%, transparent); color: var(--pos); }
.rt-cell.neg { background: color-mix(in srgb, var(--neg) 10%, transparent); color: var(--neg); }
.rt-cell.beat b::after { content: " ▲"; font-size: 8px; vertical-align: 2px; color: var(--pos); }
.rt-cell.year { border-left: 1px solid var(--border); }
.rt-flow-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rt-flow-form input[type="number"] { width: 130px; }
.rt-flow-form input[type="text"] { flex: 1; min-width: 160px; }
.rt-notes { margin: 14px 0 0; padding-left: 18px; font-size: 12px; color: var(--muted); }