/* Analytics screen (/analytics, web/js/screens/analytics.js). Tokens from tokens.css only. Phone: one column, tiles two
   across; tablet: tiles three across, cards two across; desktop: five tiles in a row, cards in two columns.
   The chart itself is styled by the shared .lc rules in more.css (ui/line-chart.js). */
.more-analytics { --an-gap: clamp(var(--s3), 2.2vw, var(--s5)); }

/* Headline tiles: the chunky 3D Technicolor faces of the Profile tiles. */
.an-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--an-gap); }
@media (max-width: 639px) { .an-tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
.an-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; min-height: 100px;
  padding: var(--s3) var(--s2); border-radius: var(--radius); text-align: center; background: var(--face); color: var(--text-inverse);
  box-shadow: 0 var(--edge) 0 var(--edgec); }
.an-tile.gold { --face: var(--gold); --edgec: var(--gold-edge); }
.an-tile.cyan { --face: var(--cyan); --edgec: var(--cyan-edge); }
.an-tile.red { --face: var(--red); --edgec: var(--red-edge); color: var(--cream); }
.an-tile.green { --face: var(--green); --edgec: var(--green-edge); }
.an-tile.ink { --face: var(--bg-card); --edgec: #0a1020; color: var(--text); border: 1px solid var(--line-strong); }
.an-tile .k { font: 800 var(--fs-xs)/1.2 var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.an-tile b { font: 700 clamp(1.5rem, 6.5vw, 2rem)/1.1 var(--font-display); font-variant-numeric: tabular-nums; max-width: 100%; overflow-wrap: anywhere; }
.an-tile .s { font-size: var(--fs-sm); font-weight: 800; }

/* Cards */
.an-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--an-gap); margin-top: calc(var(--an-gap) + var(--edge)); }
.an-card { min-width: 0; padding: var(--s4); background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 4px 0 #0a1020; }
.an-h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s2); margin: 0 0 var(--s3); font: 700 var(--fs-lg)/1.25 var(--font-display); }
.an-sub { color: var(--text-2); font: 700 var(--fs-sm) var(--font-body); }
.an-h3 { margin: 0 0 var(--s2); color: var(--text-2); font: 800 var(--fs-xs)/1.3 var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.an-empty { margin: 0; padding: var(--s4) 0; color: var(--text-2); font-size: var(--fs-sm); }

/* Label + value rows under a card */
.an-facts { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: var(--s2); }
.an-facts li { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--s2) var(--s3); border-radius: var(--radius-sm); background: var(--bg-inset); }
.an-facts span { color: var(--text-2); font-size: var(--fs-xs); font-weight: 800; }
.an-facts b { font: 700 var(--fs-md)/1.25 var(--font-display); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.an-facts-big { margin-top: 0; grid-template-columns: minmax(0, 1fr); }
.an-facts-big b { font-size: var(--fs-lg); }

/* Link tiers: shape + name, a bar, the count (colour never carries the meaning alone). */
.an-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.an-bar { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr) 3.5ch; align-items: center; gap: var(--s3); min-height: 32px; }
.an-bar-k { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 800; white-space: nowrap; color: var(--tc); }
.an-shape { width: 12px; height: 12px; flex: none; }
.an-bar-track { height: 10px; border-radius: var(--radius-pill); background: var(--tb); overflow: hidden; }
.an-bar-track i { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: var(--tc); }
.an-bar b { text-align: right; font: 700 var(--fs-md) var(--font-display); font-variant-numeric: tabular-nums; }
.an-bar.blockbuster { --tc: var(--tier-blockbuster); --tb: var(--tier-blockbuster-bg); }
.an-bar.cult { --tc: var(--tier-cult); --tb: var(--tier-cult-bg); }
.an-bar.deep_cut { --tc: var(--tier-deep); --tb: var(--tier-deep-bg); }
.an-bar.lost_reel { --tc: var(--tier-lost); --tb: var(--tier-lost-bg); }

/* Favourites */
.an-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
.an-fav { list-style: none; margin: 0; padding: 0; }
.an-fav li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--s2); min-height: var(--tap); border-top: 1px solid var(--line); }
.an-fav li:first-child { border-top: 0; }
.an-fav-n { color: var(--gold); font: 700 var(--fs-md) var(--font-display); text-align: center; }
.an-fav-name { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-fav-name small { color: var(--text-2); font-weight: 700; }
.an-fav-c { color: var(--text-2); font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }

/* Tablet and up: three tiles across, cards side by side; the trend and favourites span both columns. */
@media (min-width: 640px) {
  .an-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .an-tile { grid-column: span 2; }
  .an-tiles > :nth-child(4), .an-tiles > :nth-child(5) { grid-column: span 3; }
  .an-two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
}
@media (min-width: 900px) {
  .an-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-wide { grid-column: 1 / -1; }
  .an-facts-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* half-width card: 2 x 2, no lone tile */
}
/* Desktop: all five tiles in one row. */
@media (min-width: 1100px) {
  .an-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .an-tiles > .an-tile, .an-tiles > :nth-child(4), .an-tiles > :nth-child(5) { grid-column: auto; }
}