/* Tikrar — the Statistics screen, copied from the approved later sheet (T-243 / D-T26 · D-T27).
 *
 * The spec is evidence/design-bevel-home-2026-10-23/bevel-stats-account.html (13:52) — the LATER of the
 * two Statistics sheets, the one that carries his measured numbers. The rules below are that sheet's own
 * block: the class names in web/app.js's viewStats are its class names, and what it already settled for
 * the parts Home shares (the header, the three boxes, the fortnight) comes from
 * home-mock.css, which is loaded before this file. Nothing here re-draws a part; it sizes and places them.
 *
 * Loaded after styles.css, bevel.css, home-mock.css and deck-mock.css (web/index.html), so a rule here
 * wins on equal specificity. Everything is scoped to `.d2.stats` — the screen's own root.
 */

/* the screen owns the top edge: its own header carries the title and the face, as Home's does */
body.is-stats > #appbar { display: none; }
body.is-stats .view {
  max-width: none;
  padding: 0 0 calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}
body.is-stats .view { scrollbar-width: none; }
body.is-stats .view::-webkit-scrollbar { width: 0; height: 0; }

.d2.stats { background: #0A0C0B; min-height: 100%; }
.d2.stats main { padding-top: 6px; }

/* the tab row the screen keeps (Overview · Insights): a quiet capsule under the header */
.d2.stats .subtabs { margin: 10px 0 4px; align-self: flex-start; }
.d2.stats .subtab { font-size: 12.5px; padding: 6px 14px; }

/* the fortnight is taller here than on Home: the sheet draws 150 px */
.d2.stats .chart { height: 150px; margin-top: 10px; }
.d2.stats .dayax span { font-size: 8.5px; color: #5F6A65; text-align: center; }
.d2.stats .note { font-size: 10.5px; color: #7E8C86; margin-top: 8px; line-height: 1.4; }
.d2.stats .spend { padding: 16px 0 96px; font-size: 10.5px; color: #8D9A94; }

/* ── where the cards sit: one bar, four segments, four names ────────────── */
.d2.stats .seg { display: flex; height: 12px; border-radius: 6px; overflow: hidden;
  margin-top: 10px; background: #1B211E; }
.d2.stats .seg i { display: block; height: 12px; min-width: 0; }
.d2.stats .leg { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 10px; }
.d2.stats .leg span { font-size: 10.5px; color: #8D9A94; display: flex; align-items: center; gap: 6px; }
.d2.stats .leg em { width: 8px; height: 8px; border-radius: 99px; display: inline-block; }

/* ── worth a look: two counts under a hairline ────────────────────────── */
.d2.stats .qrow { display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; border-top: 1px solid #242B28; }
.d2.stats .qrow b { font-size: 12.5px; font-weight: 600; }
.d2.stats .qrow span { font-size: 12.5px; color: #8D9A94; font-variant-numeric: tabular-nums; }

/* ── T-406 — each row opens, per deck, its five most-counted topics ───── */
/* The row that opens is a real button: full width, the sheet's own row look, a 44 px target. */
.d2.stats button.qrow { width: 100%; box-sizing: border-box; margin: 0; background: none;
  color: inherit; font: inherit; text-align: start; cursor: pointer; min-height: 44px;
  border-inline: 0; border-bottom: 0; }
.d2.stats .qrow__side { display: flex; align-items: center; gap: 10px; }
/* the chevron carries only a direction (open/closed): it turns, never mirrors — up and down
 * are the same in RTL. 160 ms, and it does not move at all when motion is reduced. */
.d2.stats .qrow__chev { flex: 0 0 auto; width: 7px; height: 7px;
  border-right: 1.5px solid #8D9A94; border-bottom: 1.5px solid #8D9A94;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 160ms ease; }
.d2.stats .qwrap--open .qrow__chev { transform: rotate(-135deg) translate(-2px, -2px); }
/* the list: collapsed to zero height and revealed by the row's own grid, so the sheet beneath
 * moves with it and nothing jumps. */
.d2.stats .qpanel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 160ms ease; }
.d2.stats .qwrap--open .qpanel { grid-template-rows: 1fr; }
.d2.stats .qpanel__inner { overflow: hidden; min-height: 0; }
.d2.stats .qpanel__list { padding: 2px 0 12px; display: grid; gap: 5px; }
.d2.stats .qpanel__deck { font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  color: #8D9A94; margin-top: 3px; line-height: 16px; text-align: left; }
.d2.stats .qpanel__line { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 2px 0; }
.d2.stats .qpanel__name { font-size: 12.5px; color: #F2F5F3; line-height: 1.45;
  overflow-wrap: anywhere; }
.d2.stats .qpanel__n { font-size: 12.5px; color: #8D9A94; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) {
  .d2.stats .qrow__chev, .d2.stats .qpanel { transition: none; }
}

/* wider screens: the sheet's own 600 px column, centred (its @container 600 rule, at page level) */
@media (min-width: 600px) {
  /* T-254 — the same frame as every other screen: it takes the window, it is not capped at a phone */
  .d2.stats main { padding: 8px var(--gutter) 0; max-width: none; margin: 0 auto; width: 100%; }
  .d2.stats header { padding: 20px var(--gutter) 4px; max-width: none; margin: 0 auto; width: 100%; }
  .d2.stats .chart { height: 150px; }
}

/* the report word joins the face at the inline end instead of floating between the title and it */
.d2.stats header .report-mark { margin-inline-start: auto; margin-inline-end: 12px; }

/* ── T-408 — the truth mirror, wrapped ────────────────────────────────────
 * Every Overview section is one .ssec wrapper (the coach above them all, full width), so the
 * desktop can flow whole sections — a chart never separates from its axis — into two columns.
 * On the phone it is plain block flow, one column, and the Deeper tab folds the same way. */
.d2.stats .ssec { display: block; min-width: 0; }
@media (min-width: 1024px) {
  .d2.stats .stats-cols {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 8px 48px;
    align-items: start;
  }
  .d2.stats .insights {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px 32px;
    align-items: start;
  }
  .d2.stats .insights > p { grid-column: 1 / -1; }
}