/* Mobile layout. shell.js sets data-viewport="mobile" on <html> for phones;
   desktop and tablet never match these rules and keep the 1280x720 artboard.

   The page becomes a column: header (title + Badges), a body that is the only
   scrolling region, then the Back/Next row and the Home/Help/Glossary bar.
   Body content drops its artboard coordinates and stacks in source order. */

/* ---------- Shell ---------- */

html[data-viewport="mobile"] .arena {
  background: var(--white);
}

html[data-viewport="mobile"] .stage {
  inset: 0;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  transform: none;
}

html[data-viewport="mobile"] .page {
  display: flex;
  flex-direction: column;
}

html[data-viewport="mobile"] .page-head {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  min-height: 64px;
  padding: 12px 72px 12px var(--m-gutter);
  border-bottom: 1px solid #e3edf0;
}

html[data-viewport="mobile"] .page-title {
  font-size: 20px;
  line-height: 1.2;
}

html[data-viewport="mobile"] .page-sub {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.3;
}

html[data-viewport="mobile"] .page-sub.is-center {
  margin-top: 14px;
  margin-right: 0;
  text-align: left;
}

html[data-viewport="mobile"] .page-body {
  position: relative;
  inset: auto;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--m-gap);
  padding: var(--m-gutter) var(--m-gutter) 24px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

html[data-viewport="mobile"] .page.is-bare .page-body {
  padding: 0;
}

/* Every screen's top-level blocks drop their artboard placement. Later rules
   at the same specificity restore the boxes a screen needs. */
html[data-viewport="mobile"] .page-body > * {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  flex: none;
  width: auto;
  max-width: 100%;
  height: auto;
  transform: none;
}

html[data-viewport="mobile"] .page-teaser {
  display: block;
  margin: 0;
  color: var(--navy);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

html[data-viewport="mobile"] .badges-btn {
  top: 6px;
  right: 10px;
}

html[data-viewport="mobile"] .badges-btn img {
  width: 44px;
  height: 55px;
}

/* Back / Skip / Next row, pinned under the scrolling body. */
html[data-viewport="mobile"] .page-nav {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: auto;
  padding: 10px var(--m-gutter);
  border-top: 1px solid #e3edf0;
  background: var(--white);
}

html[data-viewport="mobile"] .nav-left,
html[data-viewport="mobile"] .nav-right,
html[data-viewport="mobile"] .nav-center-btns {
  position: static;
  gap: 8px;
  transform: none;
}

/* Empty .nav-right still exists in the markup; skip it so a centre CTA
   (How to Use "Let's begin") can sit flush right like Next. */
html[data-viewport="mobile"] .nav-right:not(:empty),
html[data-viewport="mobile"] .nav-center-btns {
  margin-left: auto;
  min-width: 0;
}

html[data-viewport="mobile"] .nav-center {
  display: none;
}

html[data-viewport="mobile"] .page-nav .pill {
  flex: 0 1 auto;
  gap: 6px;
  min-width: 0;
  height: auto;
  min-height: 44px;
  padding: 6px 14px;
  font-size: 16px;
  line-height: 1.15;
  text-align: center;
}

/* Home / Help / Glossary bar; the AKF lockup only shows on the cover. */
html[data-viewport="mobile"] .page-foot {
  position: relative;
  top: auto;
  flex: none;
  justify-content: space-around;
  gap: 0;
  height: auto;
  padding: 6px var(--m-gutter) calc(6px + env(safe-area-inset-bottom));
}

html[data-viewport="mobile"] .page-foot .foot-btn {
  flex: 1;
  font-size: 12px;
}

html[data-viewport="mobile"] .page-foot .foot-disc {
  width: 36px;
  height: 36px;
}

html[data-viewport="mobile"] .foot-lockup {
  display: none;
}

/* Landscape phones: give the scrolling body as much height as possible. */
@media (max-height: 499px) {
  html[data-viewport="mobile"] .page-head {
    min-height: 0;
    padding-top: 8px;
    padding-bottom: 6px;
  }

  html[data-viewport="mobile"] .page-title {
    font-size: 18px;
  }

  html[data-viewport="mobile"] .page-sub {
    margin-top: 2px;
    font-size: 13px;
  }

  html[data-viewport="mobile"] .badges-btn img {
    width: 34px;
    height: 42px;
  }

  html[data-viewport="mobile"] .page-nav {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  html[data-viewport="mobile"] .page-nav .pill {
    min-height: 38px;
  }

  html[data-viewport="mobile"] .page-foot {
    padding-top: 4px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom));
  }

  html[data-viewport="mobile"] .page-foot .foot-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  html[data-viewport="mobile"] .page-foot .foot-disc {
    width: 28px;
    height: 28px;
  }
}

html[data-viewport="mobile"] .tooltip,
html[data-viewport="mobile"] #tooltip {
  max-width: 240px;
}

/* ---------- Cover ---------- */

html[data-viewport="mobile"] .cover,
html[data-viewport="mobile"] .login {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 28px var(--m-gutter) 24px;
  text-align: center;
}

html[data-viewport="mobile"] .cover > :not(.cover-wave),
html[data-viewport="mobile"] .login > :not(.cover-wave) {
  position: relative;
  z-index: 1;
  top: auto;
  left: auto;
}

html[data-viewport="mobile"] .cover-title {
  order: 1;
  font-size: 28px;
  line-height: 1.2;
}

html[data-viewport="mobile"] .cover-art {
  order: 2;
  inset: auto;
  width: 280px;
  height: auto;
  flex: none;
}

html[data-viewport="mobile"] .cover-hero {
  position: static;
  top: auto;
  left: auto;
  width: 100%;
  height: auto;
}

html[data-viewport="mobile"] .cover-begin {
  order: 3;
  width: 220px;
  height: 54px;
  font-size: 22px;
}

html[data-viewport="mobile"] .cover-privacy {
  order: 4;
  width: auto;
  max-width: 420px;
}

html[data-viewport="mobile"] .cover-foot {
  order: 5;
  width: auto;
}

html[data-viewport="mobile"] .cover-browsers {
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

html[data-viewport="mobile"] .cover-credit img {
  width: 260px;
  height: auto;
  margin: 0 auto;
}

html[data-viewport="mobile"] .cover-lockup {
  order: 6;
  width: 280px;
  height: auto;
}

/* ---------- Login ---------- */

html[data-viewport="mobile"] .login {
  justify-content: center;
}

html[data-viewport="mobile"] .login-card {
  width: 100%;
  max-width: 480px;
  padding: 24px 18px 26px;
}

html[data-viewport="mobile"] .login-card h1 {
  font-size: 24px;
}

html[data-viewport="mobile"] .login-lead,
html[data-viewport="mobile"] .login-label,
html[data-viewport="mobile"] .login-input,
html[data-viewport="mobile"] .login-fine,
html[data-viewport="mobile"] .login-rule {
  width: 100%;
}

html[data-viewport="mobile"] .login-lead {
  font-size: 15px;
}

html[data-viewport="mobile"] .login-input {
  height: 50px;
  font-size: 16px;
}

html[data-viewport="mobile"] .login-go {
  width: 100%;
  height: 54px;
  font-size: 20px;
}

html[data-viewport="mobile"] .login-fine {
  font-size: 13px;
  line-height: 1.35;
}

html[data-viewport="mobile"] .login-rule {
  margin-top: 22px;
}

html[data-viewport="mobile"] .login-skip {
  font-size: 17px;
}

/* ---------- How to Use (standalone page and Help overlay) ---------- */

html[data-viewport="mobile"] .htu,
html[data-viewport="mobile"] .htu-row2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Desktop letterbox tip � not relevant once the phone layout is active. */
html[data-viewport="mobile"] .htu-card:has(.htu-smallest) {
  display: none;
}

html[data-viewport="mobile"] .htu-tip-hover {
  display: none;
}

html[data-viewport="mobile"] .htu-tip-tap {
  display: block;
  margin: 0;
}

html[data-viewport="mobile"] .htu-card {
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px;
  font-size: 15px;
  text-align: center;
}

html[data-viewport="mobile"] .htu-card p {
  text-align: center;
}

html[data-viewport="mobile"] .htu-smallest {
  width: 100%;
  max-width: 320px;
  height: auto;
  min-height: 110px;
  padding: 22px 14px;
}

html[data-viewport="mobile"] .htu-stack {
  width: 100%;
  justify-items: center;
}

html[data-viewport="mobile"] .htu-stack .htu-line {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}

html[data-viewport="mobile"] .htu-toolbar {
  justify-content: center;
}

/* ---------- Conversation Topics ---------- */

html[data-viewport="mobile"] .topics-lead {
  font-size: 17px;
}

/* Two cards per row on half-width tracks, so the odd last card can sit
   centred. 1fr rows size every row to the tallest card (3-line labels). */
html[data-viewport="mobile"] .topic-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 93px));
  grid-auto-rows: 1fr;
  justify-content: center;
  gap: 14px;
  padding: 6px;
}

html[data-viewport="mobile"] .topic-card {
  grid-column: span 2;
  width: auto;
  max-width: none;
  height: auto;
  padding: 7px;
}

html[data-viewport="mobile"] .topic-card:last-child:nth-child(odd) {
  grid-column: 2 / span 2;
}

/* Rows share the tallest card's height, so shorter labels centre in the spare room. */
html[data-viewport="mobile"] .topic-inner {
  align-content: center;
  gap: 10px;
  padding: 15px 6px;
}

html[data-viewport="mobile"] .topic-icon {
  width: 80px;
  height: 80px;
}

html[data-viewport="mobile"] .topic-label {
  font-size: 15px;
}

html[data-viewport="mobile"] .topics-done {
  width: auto;
  margin: 10px 6px 16px;
  transform: none;
  font-size: 15px;
}

html[data-viewport="mobile"] .topic-check svg {
  width: 28px;
  height: 28px;
}

/* ---------- Overview ---------- */

html[data-viewport="mobile"] .overview {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

html[data-viewport="mobile"] .overview-photo {
  position: static;
  width: 100%;
  height: 180px;
  border-radius: 10px;
}

html[data-viewport="mobile"] .info-stack {
  position: static;
  width: auto;
  gap: 12px;
}

html[data-viewport="mobile"] .info-row {
  grid-template-columns: 48px 1fr;
  gap: 12px;
  min-height: 0;
  padding: 12px 14px;
  font-size: 15px;
  line-height: 1.35;
}

html[data-viewport="mobile"] .info-row.has-grid {
  grid-template-columns: 1fr;
  height: auto;
  padding: 14px;
}

html[data-viewport="mobile"] .info-row.has-grid .info-icon {
  justify-self: center;
}

html[data-viewport="mobile"] .info-icon {
  width: 48px;
  height: 48px;
}

html[data-viewport="mobile"] .info-heading {
  font-size: 16px;
}

html[data-viewport="mobile"] .info-grid.is-2up,
html[data-viewport="mobile"] .info-grid.is-3up {
  column-gap: 12px;
  row-gap: 12px;
  margin-top: 12px;
  padding-left: 0;
}

html[data-viewport="mobile"] .info-grid.is-2up {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-viewport="mobile"] .info-grid.is-3up {
  grid-template-columns: 1fr;
}

@media (max-width: 379px) {
  html[data-viewport="mobile"] .info-grid.is-2up {
    grid-template-columns: 1fr;
  }
}

html[data-viewport="mobile"] .info-cell {
  gap: 10px;
  font-size: 14px;
}

html[data-viewport="mobile"] .info-cell img,
html[data-viewport="mobile"] .info-grid.is-2up .info-cell img {
  width: 44px;
  height: 44px;
}

/* ---------- Conversation Cards: the deck ---------- */

/* Auto margins centre the lead and fan in the body, and fall back to the top
   when the screen is too short. */
html[data-viewport="mobile"] .deck-lead {
  margin-top: auto;
  font-size: 17px;
}

/* The fan spreads across the column; --pitch resolves against the deck width
   inside each card's `left`. */
html[data-viewport="mobile"] .deck {
  --card-w: 150px;
  --pitch: calc((100% - var(--card-w)) / max(var(--n) - 1, 1));

  width: 100%;
  max-width: calc(var(--card-w) + (var(--n) - 1) * 56px);
  height: 212px;
  margin: 10px auto auto;
}

html[data-viewport="mobile"] .deck-card {
  height: 212px;
  padding: 8px;
}

html[data-viewport="mobile"] .deck-face {
  gap: 8px;
  padding-top: 18px;
}

html[data-viewport="mobile"] .deck-face img {
  width: 88px;
  height: 88px;
}

html[data-viewport="mobile"] .deck-label {
  font-size: 15px;
}

/* ---------- Conversation Cards: a question ---------- */

/* Room on the left for three peeking backs; deeper backs are hidden. */
html[data-viewport="mobile"] .qstack {
  margin-left: 54px;
}

html[data-viewport="mobile"] .qcard-back:nth-last-child(n + 5) {
  display: none;
}

html[data-viewport="mobile"] .qcard {
  position: relative;
  inset: auto;
  min-height: 200px;
}

/* Equal padding centres the text midway between the two 38px number tabs. */
html[data-viewport="mobile"] .qcard-face {
  height: auto;
  min-height: 168px;
  padding: 59px 14px;
}

/* The sliding back card is as tall as the locked front card; filling it keeps
   the incoming question at the spot it lands on. */
html[data-viewport="mobile"] .qcard-back.is-front .qcard-face {
  height: 100%;
  min-height: 0;
}

html[data-viewport="mobile"] .qcard-face > p:not(.qcard-followup) {
  font-size: 17px;
  line-height: 1.4;
}

html[data-viewport="mobile"] .qcard-followup {
  font-size: 17px;
  line-height: 1.4;
}

/* The question's bottom margin would count toward the centred block and
   leave more white below the text than above it. */
html[data-viewport="mobile"] .qcard-face > p:last-child {
  margin-bottom: 0;
}

html[data-viewport="mobile"] .qcard-n {
  width: 38px;
  height: 38px;
  font-size: 26px;
}

html[data-viewport="mobile"] .qpanel-stack {
  display: flex;
}

html[data-viewport="mobile"] .qpanel {
  min-height: 0;
  padding: 14px;
}

html[data-viewport="mobile"] .qpanel-count,
html[data-viewport="mobile"] .qpanel-lead {
  font-size: 15px;
}

html[data-viewport="mobile"] .opt-list {
  margin: 12px 0 0;
  gap: 10px;
}

html[data-viewport="mobile"] .opt {
  height: auto;
  min-height: 48px;
  padding: 10px 16px;
}

html[data-viewport="mobile"] .opt-other {
  flex-wrap: wrap;
  padding: 10px 16px;
}

html[data-viewport="mobile"] .opt-field {
  flex-basis: 140px;
}

html[data-viewport="mobile"] .privacy-note {
  font-size: 13px;
}

html[data-viewport="mobile"] .privacy-note-earn {
  position: static;
  width: auto;
  margin: 2px 0 0;
}

/* ---------- Myth vs Fact ---------- */

/* Myth vs Fact and Earn A Badge share one box height, centred on the page,
   with their content centred inside it. */
html[data-viewport="mobile"] .mintcard-myth,
html[data-viewport="mobile"] .mintcard-earn {
  min-height: min(500px, 100%);
  margin-top: auto;
  margin-bottom: auto;
  justify-content: center;
  align-content: center;
}

html[data-viewport="mobile"] .mintcard-myth {
  display: flex;
  flex-direction: column;
  padding: 18px 14px 20px;
}

html[data-viewport="mobile"] .myth-lead[aria-hidden="true"] {
  display: none;
}

html[data-viewport="mobile"] .myth-lead[aria-hidden="true"] + .myth-statement {
  margin-top: 0;
}

html[data-viewport="mobile"] .myth-lead {
  font-size: 16px;
}

html[data-viewport="mobile"] .myth-statement {
  width: auto;
  padding: 14px 20px;
  border-radius: 24px;
  font-size: 16px;
}

html[data-viewport="mobile"] .paddles {
  gap: 20px;
  margin-top: 30px;
}

html[data-viewport="mobile"] .paddle-art {
  width: 118px;
}

html[data-viewport="mobile"] .myth-submit {
  position: static;
  display: block;
  margin: 22px auto 0;
  width: 170px;
}

html[data-viewport="mobile"] .myth-result {
  margin-top: 30px;
  padding-left: 0;
}

html[data-viewport="mobile"] .myth-result h2 {
  font-size: clamp(18px, calc((var(--vw, 390) - 143) * 0.089px), 22px);
}

/* Keeps the flanking icons (26px art plus a 4px / 3px gap) inside the card. */
html[data-viewport="mobile"] .myth-puzzled {
  display: inline-block;
  max-width: calc(100% - 59px);
  margin-left: 30px;
}

html[data-viewport="mobile"] .qmarks-l,
html[data-viewport="mobile"] .fact-burst-l {
  right: calc(100% + 4px);
}

html[data-viewport="mobile"] .qmarks {
  top: -14px;
  width: 26px;
  height: 42px;
}

html[data-viewport="mobile"] .fact-burst {
  top: -14px;
  width: 26px;
  height: 42px;
}

html[data-viewport="mobile"] .myth-result p {
  width: auto;
  font-size: 16px;
  line-height: 1.4;
}

/* ---------- Earn A Badge ---------- */

html[data-viewport="mobile"] .mintcard-earn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 18px 14px;
}

html[data-viewport="mobile"] .earn-badge {
  position: relative;
  top: auto;
  left: auto;
  width: 88px;
  height: 107.2px;
}

html[data-viewport="mobile"] .earn-main {
  position: static;
  width: auto;
}

/* Matches .earn-q below. */
html[data-viewport="mobile"] .earn-main h2 {
  font-size: 17px;
}

html[data-viewport="mobile"] .earn-q {
  width: auto;
  font-size: 17px;
}

html[data-viewport="mobile"] .earn-controls:has(#earn-note) {
  width: 100%;
}

html[data-viewport="mobile"] .earn-choice {
  width: 100%;
  max-width: 340px;
}

html[data-viewport="mobile"] .earn-foot {
  position: static;
  font-size: 15px;
  line-height: 1.4;
}

/* ---------- Resource ---------- */

/* Auto margins centre the leads and the box as one group in the body. */
html[data-viewport="mobile"] .res-lead {
  margin-top: auto;
  font-size: 18px;
}

html[data-viewport="mobile"] .res-lead2 {
  font-size: 15px;
}

html[data-viewport="mobile"] .mintcard-res {
  margin-bottom: auto;
  padding: 16px 12px;
}

html[data-viewport="mobile"] .res-row {
  grid-template-columns: 44px 1fr;
  gap: 12px;
  padding: 8px;
  font-size: 15px;
}

html[data-viewport="mobile"] .res-row + .res-row {
  margin-top: 16px;
}

html[data-viewport="mobile"] .res-row img {
  width: 40px;
  height: 52px;
}

html[data-viewport="mobile"] .res-row.has-qr {
  grid-template-columns: 64px 1fr;
}

html[data-viewport="mobile"] .res-row img.is-qr {
  width: 56px;
  height: 56px;
}

/* ---------- End ---------- */

html[data-viewport="mobile"] .mintcard-finish {
  max-height: none;
  margin-bottom: auto;
  padding: 16px 12px;
  overflow: visible;
}

html[data-viewport="mobile"] .finish-top {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

html[data-viewport="mobile"] .finish-share {
  justify-content: center;
  width: 100%;
  min-height: 44px;
  font-size: 16px;
}

html[data-viewport="mobile"] .finish-h {
  margin-top: 14px;
  padding: 12px 8px 0;
  font-size: 16px;
}

html[data-viewport="mobile"] .finish-links {
  grid-template-columns: 1fr;
  gap: 4px;
}

html[data-viewport="mobile"] .finish-link {
  grid-template-columns: 30px 1fr;
  padding: 8px;
  font-size: 15px;
}

html[data-viewport="mobile"] .finish-link img {
  width: 30px;
  height: 38px;
}

/* ---------- Welcome ---------- */

html[data-viewport="mobile"] .mintcard-welcome {
  margin: auto 0;
  padding: 24px 18px;
}

html[data-viewport="mobile"] .welcome-text {
  font-size: 18px;
}

/* ---------- All topics complete ---------- */

html[data-viewport="mobile"] .modal-complete {
  position: fixed;
  top: 50%;
  left: 50%;
  width: calc(100% - 2 * var(--m-gutter));
  max-width: 560px;
  max-height: calc(100% - 32px);
  padding: 30px 20px 22px;
  overflow-y: auto;
  transform: translate(-50%, -50%);
}

html[data-viewport="mobile"] .modal-complete.is-enter {
  animation: complete-in-m 0.3s ease-out;
}

@keyframes complete-in-m {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.92);
  }
}

html[data-viewport="mobile"] .modal-complete h2 {
  margin-top: 14px;
  font-size: 22px;
}

html[data-size="phone"] .complete-burst {
  display: none;
}

html[data-viewport="mobile"] .modal-complete p {
  font-size: 16px;
}

/* ---------- Warm-ups ---------- */

html[data-viewport="mobile"] .wu-done {
  font-size: 22px;
}

/* Family tree: the art and its hit areas share artboard units, so the whole
   block is zoomed to the column width rather than reflowed. */
html[data-viewport="mobile"] .mintcard-tree {
  padding: 14px;
}

html[data-viewport="mobile"] .tree-instruction {
  font-size: 15px;
}

/* Inside the mint card: 84 = two 16px gutters plus the card's border and
   padding, and 12 more so the outer labels (Granddaughter) clear its edge. */
html[data-viewport="mobile"] .tree {
  position: relative;
  top: auto;
  left: auto;
  width: 524px;
  max-width: none;
  height: 354.9px;
  margin: 24px auto 4px;
  zoom: min(1, calc((var(--vw, 390) - 96) / 524));
}

html[data-viewport="mobile"] .tree-side {
  min-height: 0;
  padding: 14px;
}

html[data-viewport="mobile"] .tree-count {
  margin: 0;
}

html[data-viewport="mobile"] .stars {
  gap: 20px;
  margin-top: 12px;
}

html[data-viewport="mobile"] .star {
  width: 44px;
  height: 43px;
}

html[data-viewport="mobile"] .tree-note {
  margin-top: 14px;
  font-size: 15px;
}

/* Care board: board, then the tray of notes under it (tap a note, tap the board). */
html[data-viewport="mobile"] .board {
  padding-bottom: 16px;
  border-width: 8px;
}

html[data-viewport="mobile"] .board-tab {
  top: 12px;
  width: 150px;
  height: 32px;
  font-size: 16px;
}

html[data-viewport="mobile"] .board-slots {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 14px;
  margin-top: 64px;
  padding: 0 12px;
}

html[data-viewport="mobile"] .board-slot {
  height: 96px;
}

html[data-viewport="mobile"] .note-tray {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 12px;
  padding-top: 12px;
}

html[data-viewport="mobile"] .note {
  height: 96px;
  font-size: 16px;
  line-height: 20px;
}

/* Risk scan: one card per row. */
html[data-viewport="mobile"] .scan-grid {
  grid-template-columns: 1fr;
  gap: 12px;
}

html[data-viewport="mobile"] .scan-card {
  height: auto;
  padding: 9px 14px 14px;
}

html[data-viewport="mobile"] .scan-beam {
  width: calc(100% - 28.8px);
}

/* Habit meter: keep the gauge pinned; habits sit in a 3�2 grid under it. */
html[data-viewport="mobile"] .mintcard-meter {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 12px 10px 14px;
  background: var(--white);
}

html[data-viewport="mobile"] .meter-title {
  font-size: 16px;
}

html[data-viewport="mobile"] .gauge {
  width: 150px;
}

html[data-viewport="mobile"] .meter-pct {
  font-size: 22px;
  line-height: 1.2;
  min-width: 0;
  padding: 1px 12px;
}

html[data-viewport="mobile"] .meter-count {
  font-size: 14px;
}

html[data-viewport="mobile"] .habit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

html[data-viewport="mobile"] .habit,
html[data-viewport="mobile"] .habit:nth-child(n) {
  width: 100%;
  height: auto;
  min-height: 64px;
  padding: 6px 4px;
  font-size: 12px;
  line-height: 1.25;
  white-space: normal;
}

/* ---------- Overlays: full-screen sheets ---------- */

html[data-viewport="mobile"] .scrim {
  inset: 0;
  width: auto;
  height: auto;
  z-index: 25;
}

html[data-viewport="mobile"] .drawer,
html[data-viewport="mobile"] .popover {
  inset: 0;
  width: auto;
  height: auto;
  z-index: 30;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 16px var(--m-gutter) calc(20px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
}

html[data-viewport="mobile"] .overlay-x {
  width: 32px;
  height: 32px;
}

html[data-viewport="mobile"] .drawer h2,
html[data-viewport="mobile"] .popover h2 {
  padding-right: 40px;
  font-size: 21px;
}

html[data-viewport="mobile"] .popover-caret {
  display: none;
}

html[data-viewport="mobile"] .glossary-list {
  font-size: 16px;
  line-height: 1.5;
}

html[data-viewport="mobile"] .glossary-list dd::after {
  margin-bottom: 8px;
}

html[data-viewport="mobile"] .glossary-visit {
  overflow-wrap: anywhere;
}

html[data-viewport="mobile"] .badge-list {
  gap: 20px;
}

html[data-viewport="mobile"] .badge-list li {
  grid-template-columns: 60px 1fr;
}

html[data-viewport="mobile"] .badge-art {
  width: 60px;
}

html[data-viewport="mobile"] .claim-badge {
  margin: 6px 0 0;
}

html[data-viewport="mobile"] .top-panel,
html[data-viewport="mobile"] .panel-remind {
  left: 12px;
  right: 12px;
  top: 12px;
  width: auto;
  transform: none;
}

html[data-viewport="mobile"] .panel-remind {
  padding: 28px 18px;
  font-size: 16px;
}

html[data-viewport="mobile"] .top-panel h2 {
  padding: 0 32px;
  font-size: 20px;
}

html[data-viewport="mobile"] .panel-earn .top-panel-lead {
  width: auto;
  font-size: 16px;
}

html[data-viewport="mobile"] .panel-card {
  width: auto;
  padding: 12px 14px;
}

html[data-viewport="mobile"] .panel-card strong {
  font-size: 17px;
}