/* Finance › PMA › AI Cost (#aicost, admins only; public/ai-cost.js). Tiles, tables, the range switch and the empty
   state reuse styles.css and pma-finance.css (.kpi, .tbl, .pf-tbl, .fc-seg, .hub-empty); this file only adds the bar
   chart (plain divs) and the model split. The two features' colours differ in lightness, not just hue, in both themes. */
[data-page="aicost"] {
  --ac-f0: #0f5a8f; --ac-f1: #8cc4e8; --ac-fx: var(--muted);
  --ac-haiku: var(--pma-blue); --ac-sonnet: var(--orange); --ac-other: var(--muted);
}
@media (prefers-color-scheme: dark) {
  [data-page="aicost"] { --ac-f0: #8cc4e8; --ac-f1: #2f6f9e; }
}
#ac-body { min-width: 0; }
[data-page="aicost"] .panel, [data-page="aicost"] .kpis { margin-top: 18px; }
.ac-foot { margin-top: 18px; }

/* Header: the range switch and Export are real buttons with 44px touch targets and a visible focus ring. */
.ac-actions { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.ac-seg button { min-height: 44px; padding: 0 14px; font-size: 13px; }
.ac-seg button:focus-visible { outline: 2px solid var(--pma-blue); outline-offset: -3px; }
.ac-btn { min-height: 44px; }
.ac-tag { padding: 1px 8px; border-radius: 99px; background: var(--grey-soft); color: var(--ink-2); font-weight: 600; font-size: 11px; }
@media (max-width: 860px) {
  [data-page="aicost"] .page-head { flex-direction: column; align-items: flex-start; }
  .ac-actions { justify-content: flex-start; }
}

/* Tiles: four, two a row on narrower screens (pf-kpis4); a long value wraps rather than pushing the page sideways. */
.ac-tiles .kpi b { overflow-wrap: anywhere; }

/* Chart and model split side by side, stacked on narrow screens. */
.ac-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; }
.ac-row > .panel { margin-top: 0; }
@media (max-width: 1100px) { .ac-row { grid-template-columns: minmax(0, 1fr); } }

.ac-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--ink-2); }
.ac-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; background: var(--c); }
.ac-c0 { --c: var(--ac-f0); } .ac-c1 { --c: var(--ac-f1); } .ac-cx { --c: var(--ac-fx); }
.ac-haiku { --c: var(--ac-haiku); } .ac-sonnet { --c: var(--ac-sonnet); } .ac-other { --c: var(--ac-other); }

/* Bars: one column per month; the plot scrolls inside its panel when twelve or thirteen months don't fit. */
.ac-scroll { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.ac-bars { display: flex; align-items: stretch; gap: 10px; height: 220px; min-width: calc(var(--n) * 44px); border-bottom: 1px solid var(--line); }
.ac-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.ac-tot { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
.ac-col.na .ac-tot { color: var(--muted); font-weight: 400; }
.ac-stack { width: 100%; max-width: 56px; display: flex; flex-direction: column-reverse; border-radius: 3px 3px 0 0; overflow: hidden; }
.ac-stack i { display: block; background: var(--c); }
.ac-months { display: flex; gap: 10px; min-width: calc(var(--n) * 44px); padding-top: 6px; }
.ac-months span { flex: 1 1 0; min-width: 0; text-align: center; font-size: 12px; color: var(--muted); white-space: nowrap; }
.ac-note { margin: 10px 0 0; }

/* Model split: one bar in two (or three) parts, then a line per family. */
.ac-split .bar { height: 14px; margin: 4px 0 12px; }
.ac-split .bar i { background: var(--c); }
.ac-fams { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.ac-fams li { display: flex; justify-content: space-between; gap: 12px; }
.ac-fams .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ac-why { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line-2); }

/* Tables: £ to 2 dp, a share bar, the total row (pf-tbl's tfoot). */
.ac-tbl td, .ac-tbl th { font-variant-numeric: tabular-nums; }
.ac-tbl th.num { text-align: right; }
.ac-tbl .na { color: var(--muted); }
.ac-share { min-width: 110px; }
.ac-share .bar i { background: var(--ac-f0); }
.ac-tbl tbody th { padding: 11px 12px; text-align: left; font-size: 13px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink); position: static; background: none; border-bottom: 1px solid var(--line-2); }
.ac-tbl tbody tr:last-child th { border-bottom: 0; }