/* ===== Hippo — the dashboard ==============================================
   Same contract as quiz.css: every rule is scoped under body[data-ui="v2"], which
   only quiz.js sets and only when localStorage.hippo_ui === "v2". Delete the
   <script src="home.js"> tag and nothing here can apply. Do not add a rule
   without that prefix.

   quiz.js owns body.dataset.view. This file only reacts to it. ============ */

/* The dashboard section is inert until its view is on. It is a new node appended
   to <main>, so nothing existing moved. */
body[data-ui="v2"] .pane-home { display: none; }
body[data-ui="v2"][data-view="dashboard"] .pane-home { display: block; grid-column: 1 / -1; }
body[data-ui="v2"][data-view="dashboard"] .pane-home[hidden] { display: none !important; }

body[data-ui="v2"][data-view="dashboard"] .pane-left,
body[data-ui="v2"][data-view="dashboard"] .pane-right,
body[data-ui="v2"][data-view="dashboard"] .pane-lib { display: none; }

body[data-ui="v2"][data-view="dashboard"] .split { grid-template-columns: 1fr; }

/* The way back. Hidden on the dashboard itself, because it is already here. */
body[data-ui="v2"] #nav-home { display: inline-flex; }
body[data-ui="v2"] #nav-home[hidden] { display: none !important; }
body[data-ui="v2"][data-view="dashboard"] #nav-home { display: none; }

body[data-ui="v2"] .home-hd { margin: 0 0 4px; font-size: 22px; font-weight: 700; }
body[data-ui="v2"] .home-sub { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; }

/* One column of stacked cards, two once there is room. The continue card always
   spans, because it is the one thing she came back for. */
body[data-ui="v2"] .home-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
body[data-ui="v2"] .home-grid[hidden] { display: none !important; }
body[data-ui="v2"] .home-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 18px; min-width: 0;
}
body[data-ui="v2"] .home-card[hidden] { display: none !important; }
body[data-ui="v2"] .home-card.wide { grid-column: 1 / -1; }
body[data-ui="v2"] .home-card h3 {
  margin: 0 0 10px; font-size: 14px; font-weight: 700; letter-spacing: .01em;
}

/* The primary card. This is where the 2026-09-04 call's #6 finally gets fixed:
   she asked for a feature that already existed and was free, and never found it. */
body[data-ui="v2"] .home-continue {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  border: 1px solid var(--purple); background: var(--panel);
}
body[data-ui="v2"] .home-continue[hidden] { display: none !important; }
body[data-ui="v2"] .home-cont-txt { flex: 1 1 220px; min-width: 0; }
body[data-ui="v2"] .home-cont-name {
  display: block; font-size: 17px; font-weight: 700; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body[data-ui="v2"] .home-cont-meta { font-size: 13px; color: var(--muted); }
body[data-ui="v2"] .home-cont-free { font-size: 12px; font-weight: 600; color: #06603d; }
body[data-ui="v2"] .home-cont-btn { flex: 0 0 auto; min-height: 48px; padding: 0 20px; }

/* Progress. Numbers first, then the two or three topics worth revisiting. */
body[data-ui="v2"] .home-stats { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 14px; }
body[data-ui="v2"] .home-stat b { display: block; font-size: 24px; font-weight: 700; line-height: 1.1; }
body[data-ui="v2"] .home-stat span { font-size: 12px; color: var(--muted); }
body[data-ui="v2"] .home-topic {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
  padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px;
}
body[data-ui="v2"] .home-topic:first-of-type { border-top: 0; }
body[data-ui="v2"] .home-topic-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-ui="v2"] .home-topic-rate { font-weight: 700; white-space: nowrap; }
body[data-ui="v2"] .home-topic-rate.low { color: var(--bad); }
body[data-ui="v2"] .home-topic-bar {
  grid-column: 1 / -1; height: 5px; border-radius: 999px; background: var(--line); overflow: hidden;
}
body[data-ui="v2"] .home-topic-fill { height: 100%; background: var(--ok); }
body[data-ui="v2"] .home-topic-fill.low { background: var(--bad); }
body[data-ui="v2"] .home-empty { font-size: 13px; color: var(--muted); margin: 0; }

/* The dashboard's own copy of the quota meter. Same markup refreshUsage writes into
   #usage-track, so it inherits .track/.track-* from styles.css untouched. */
body[data-ui="v2"] #home-usage { margin: 0; }
body[data-ui="v2"] #home-usage[hidden] { display: none !important; }

body[data-ui="v2"] .home-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
body[data-ui="v2"] .home-actions[hidden] { display: none !important; }
body[data-ui="v2"] .home-actions .btn { min-height: 48px; }


/* ===== RESPONSIVE — every width-based breakpoint lives here, and only here =====
   Widest first, one block per breakpoint. A rule that must hold at ALL widths
   belongs above this line. Same convention as styles.css and quiz.css, for the
   same reason: a base rule written later in a file beats an earlier @media. */

@media (max-width: 820px) {
  body[data-ui="v2"] .home-grid { grid-template-columns: 1fr; gap: 12px; }
  body[data-ui="v2"] .home-hd { font-size: 19px; }
  body[data-ui="v2"] .home-card { padding: 15px; border-radius: 14px; }
  body[data-ui="v2"] .home-cont-btn { flex: 1 1 100%; }   /* full-width thumb target */
}

@media (max-width: 430px) {
  body[data-ui="v2"] .home-hd { font-size: 18px; }
  body[data-ui="v2"] .home-card { padding: 13px; }
  body[data-ui="v2"] .home-stats { gap: 14px; }
  body[data-ui="v2"] .home-stat b { font-size: 21px; }
  body[data-ui="v2"] .home-cont-name { font-size: 16px; }
  body[data-ui="v2"] .home-actions .btn { flex: 1 1 100%; }
}