/* Phone Home (pages/home.py _mobile_home, assets/home_mobile.js). Fits the first screen, down to 390x667.
   New visitors: streak chip, headline, a one-tap first question, what you collect, the journey, pinned Get started.
   Returning learners: Welcome back, Continue card, plan map, stars / streak / certificates. Desktop: hidden. */
.mh { display: none; }

@media (max-width: 768px) {
  .nh1 .nh1-hero { display: none !important; }
  .nh1 { padding-bottom: 0 !important; }
  .mh { display: block; padding: 12px 16px calc(80px + env(safe-area-inset-bottom)); color: var(--b-text, #e6edf6); font-family: var(--b-font, system-ui, sans-serif); }
  .mh [hidden] { display: none !important; }
  .mh-new, .mh-ret { display: flex; flex-direction: column; gap: 10px; }

  .mi { display: inline-block; width: 18px; height: 18px; flex: none; vertical-align: -3px; background: var(--c, currentColor); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
  .mi-flame { --c: #f08a3c; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2c1 4 5 5.5 5 11a5 5 0 0 1-10 0c0-2.5 1.2-4 2.5-5 .2 2 1 3 2 3.5C11 9 10.5 5 12 2z'/%3E%3C/svg%3E"); }
  .mi-heart { --c: #ff5a5a; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.5-9.3C1 8 3.4 4.5 7 4.5c2 0 3.6 1.1 5 3 1.4-1.9 3-3 5-3 3.6 0 6 3.5 4.5 7.2C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E"); }
  .mi-bolt { --c: #6AA59C; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); }
  .mi-star { --c: #d9b56f; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6L2.5 9.4l6.6-.8z'/%3E%3C/svg%3E"); }
  .mi-badge { --c: #8fc4bb; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
  .mi-cert { --c: #d9b56f; --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='9' r='6'/%3E%3Cpath d='M8.5 14 7 22l5-3 5 3-1.5-8'/%3E%3C/svg%3E"); }

  .mh-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(240,138,60,.12); border: 1px solid rgba(240,138,60,.35); color: #f3b98a; font-size: 12px; font-weight: 700; }
  .mh-chip .mi { width: 14px; height: 14px; }
  .mh-h1 { margin: 0; font: 800 24px/1.15 var(--b-font, system-ui, sans-serif); letter-spacing: -.01em; text-wrap: balance; }
  .mh-h1 .hl { color: var(--b-teal, #6AA59C); }

  .mh-game { background: var(--b-surface, #0f1b2d); border: 1px solid #4d8077; border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 7px; box-shadow: 0 0 0 4px rgba(106,165,156,.07); }
  .mh-gtop { display: flex; justify-content: space-between; align-items: center; }
  .mh-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--b-teal, #6AA59C); }
  .mh-hud { display: flex; gap: 10px; font-size: 13px; }
  .mh-hud > span { display: inline-flex; align-items: center; gap: 3px; }
  .mh-hud .mi { width: 15px; height: 15px; }
  .mh-hud .mh-stars { color: #6AA59C; font-size: 15px; letter-spacing: 1px; line-height: 1; }
  .mh-hud .mh-stars .off { opacity: .3; }
  .mh-q { font-size: 16px; font-weight: 800; }
  .mh-rows { display: flex; flex-direction: column; gap: 4px; }
  .mh-row { display: grid; grid-template-columns: minmax(0, 1fr) 76px; gap: 5px; }
  .mh-name { padding: 6px 10px; border-radius: 8px; background: #16263c; font: 13px ui-monospace, Consolas, monospace; }
  .mh-cell { height: 32px; border-radius: 8px; border: 1px solid #203047; background: #0b1220; color: var(--b-text, #e6edf6); font: 700 13px ui-monospace, Consolas, monospace; text-align: right; padding: 0 10px; cursor: pointer; }
  .mh-cell.right { border: 2px solid var(--b-teal, #6AA59C); background: rgba(106,165,156,.18); }
  .mh-cell.wrong { border-color: #e8964a; animation: mhshake .3s; }
  @keyframes mhshake { 25% { transform: translateX(-3px) } 75% { transform: translateX(3px) } }
  .mh-fb { min-height: 30px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 10px; box-sizing: border-box; border-radius: 9px; background: #16263c; color: var(--b-text-2, #9fb2c8); font-size: 13px; }
  .mh-fb.ok { background: #12302d; color: #8fd8cb; font-weight: 800; }
  .mh-fb.ok b { color: #d9b56f; }
  .mh-fb.bad { background: #33240f; color: #f8c88c; }

  .mh-collect { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .mh-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 7px 2px; border-radius: 12px; background: var(--b-surface, #0f1b2d); border: 1px solid var(--b-line, #203047); font-size: 11px; font-weight: 700; }
  .mh-tile .mi { width: 20px; height: 20px; }
  .mh-tile.gold { background: rgba(217,181,111,.08); border-color: #7a6235; color: #d9b56f; }

  .mh-journey, .mh-plan { display: flex; flex-direction: column; gap: 5px; }
  .mh-jline { display: flex; align-items: center; background: linear-gradient(#203047, #203047) center / calc(100% - 20px) 3px no-repeat; }
  .mh-jline .d { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 3px solid #203047; box-sizing: border-box; background: #0b1220; }
  .mh-jline .d + .d { margin-left: auto; }
  .mh-jline .d.done { background: var(--b-teal, #6AA59C); border-color: var(--b-teal, #6AA59C); }
  .mh-jline .d.now { border-color: var(--b-teal, #6AA59C); box-shadow: 0 0 0 4px rgba(106,165,156,.2); }
  .mh-jline .d.seal { width: 24px; height: 24px; border: 2px dashed #c39a55; }
  .mh-jlab { display: flex; justify-content: space-between; font-size: 11px; color: var(--b-text-2, #9fb2c8); }
  .mh-jlab .gold { color: #d9b56f; }
  .mh-jlab .cur { color: var(--b-text, #e6edf6); font-weight: 800; }

  .mh-pin { position: fixed; left: 0; right: 0; bottom: calc(62px + env(safe-area-inset-bottom)); z-index: 1100; display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--b-bg, #0b1220); box-shadow: 0 -10px 16px rgba(11,18,32,.9); }
  .mh-cta { display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 18px; border-radius: 14px; background: var(--b-teal, #6AA59C); color: #0b1220 !important; font-weight: 800; font-size: 16px; text-decoration: none !important; box-shadow: 0 4px 0 #4d8077; }
  .mh-pin .mh-cta { flex: 1; }
  .mh-sub { flex: none; font-size: 13px; font-weight: 600; color: var(--b-text-2, #9fb2c8) !important; }

  /* returning learner */
  .mh-welcome { display: flex; align-items: center; gap: 12px; }
  .mh-welcome h1 { margin: 0; font: 700 19px/1.25 var(--b-font, system-ui, sans-serif); }
  .mh-welcome p { margin: 2px 0 0; font-size: 13px; color: var(--b-text-2, #9fb2c8); }
  .mh-ring { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 5px solid #16263c; box-sizing: border-box; display: grid; place-items: center; font-weight: 900; color: var(--b-teal, #6AA59C); font-size: 18px; }
  .mh-ring.on { border-color: var(--b-teal, #6AA59C); }
  .mh-cont { background: var(--b-surface, #0f1b2d); border: 1px solid #4d8077; border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; }
  .mh-ct { display: flex; align-items: center; gap: 12px; }
  .mh-icon { width: 46px; height: 46px; border-radius: 12px; background: #16263c; display: grid; place-items: center; font-size: 22px; flex: none; }
  .mh-ct b { display: block; font-size: 17px; }
  .mh-ct span { font-size: 13px; color: var(--b-text-2, #9fb2c8); }
  .mh-bar { height: 8px; border-radius: 999px; background: #16263c; overflow: hidden; }
  .mh-bar i { display: block; height: 100%; background: var(--b-teal, #6AA59C); border-radius: 999px; }
  .mh-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--b-text-2, #9fb2c8); }
  .mh-plan-h { display: flex; justify-content: space-between; align-items: baseline; }
  .mh-plan-h b { font-size: 15px; }
  .mh-plan-h a { font-size: 13px; font-weight: 700; }
  .mh-week { display: flex; flex-direction: column; gap: 8px; }
  .mh-streak { font-size: 13px; font-weight: 800; color: var(--b-text, #e6edf6); }
  .mh-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .mh-day { display: flex; flex-direction: column; align-items: center; gap: 4px; }
  .mh-day small { font-size: 11px; font-weight: 700; color: var(--b-text-2, #9fb2c8); }
  .mh-day i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 14px; font-weight: 800;
    border: 2px solid var(--b-line, #203047); color: var(--b-bg, #0b1220); box-sizing: border-box; }
  .mh-day.done i { background: #e8893b; border-color: #e8893b; }
  .mh-day.today i { box-shadow: 0 0 0 3px var(--b-bg, #0b1220), 0 0 0 5px var(--b-brand, #6AA59C); }
  .mh-day.today small { color: var(--b-text, #e6edf6); }
  .mh-day.future i { opacity: .5; }
  .mh-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .mh-stats > div { background: var(--b-surface, #0f1b2d); border: 1px solid var(--b-line, #203047); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; gap: 1px; }
  .mh-stats b { font-size: 17px; }
  .mh-stats small { font-size: 11px; color: var(--b-text-2, #9fb2c8); }
}

/* Phones: neither Home shows until we know whether this is a returning learner (home_mobile.js sets data-filled),
   so a learner on a plan never sees the new-visitor Home flash first. Shown anyway after 1.5s, just in case. */
@media (max-width: 768px) {
  .mh:not([data-filled]) .mh-new, .mh:not([data-filled]) .mh-ret { visibility: hidden; animation: mh-reveal 0s 1.5s forwards; }
}
@keyframes mh-reveal { to { visibility: visible; } }
/* Shorter phone screens (iPhone Safari leaves about 640px): the new-visitor Home tightens a little so the tool
   names under the map clear the pinned Get started bar */
@media (max-width: 768px) and (max-height: 700px) {
  .mh-new { gap: 9px !important; }
  .mh-new .mh-h1 { font-size: 22px !important; }
  .mh-game { gap: 6px; }
  .mh-rows { gap: 4px; }
  .mh-cell { height: 30px; }
  .mh-name { padding: 5px 10px; }
}
@media (max-width: 768px) and (max-height: 660px) {   /* the very shortest (iPhone Safari with its bars, ~641px): a touch tighter */
  .mh-new { gap: 7px !important; }
  .mh-cell { height: 28px; }
  .mh-name { padding: 4px 10px; }
}
/* Phones: Home after a plan is chosen fills the height between the top bar and the tab bar. Every gap and size
   grows with the extra height (x = --avail - 437px), starting from the sizes above on the shortest phones, so
   there's no empty band at the bottom on taller ones */
@media (max-width: 768px) {
  .mh-ret { --avail: calc(100svh - 126px - env(safe-area-inset-bottom)); --x: calc(var(--avail) - 437px);
    gap: clamp(10px, calc(10px + var(--x) * .12), 40px) !important; }
  .mh-ret .mh-ring { width: clamp(52px, calc(52px + var(--x) * .05), 68px); height: clamp(52px, calc(52px + var(--x) * .05), 68px); }
  .mh-ret .mh-cont { padding: clamp(12px, calc(12px + var(--x) * .05), 26px) 14px; gap: clamp(9px, calc(9px + var(--x) * .03), 18px); }
  .mh-ret .mh-icon { width: clamp(46px, calc(46px + var(--x) * .04), 60px); height: clamp(46px, calc(46px + var(--x) * .04), 60px); }
  .mh-ret .mh-cta { height: clamp(48px, calc(48px + var(--x) * .06), 64px); }
  .mh-ret .mh-week { gap: clamp(8px, calc(8px + var(--x) * .03), 16px); }
  .mh-ret .mh-day { gap: clamp(4px, calc(4px + var(--x) * .02), 10px); }
  .mh-ret .mh-day i { width: clamp(30px, calc(30px + var(--x) * .08), 46px); height: clamp(30px, calc(30px + var(--x) * .08), 46px); }
  .mh-ret .mh-plan { gap: clamp(5px, calc(5px + var(--x) * .03), 14px); }
  .mh-ret .mh-jline .d { width: clamp(18px, calc(18px + var(--x) * .02), 24px); height: clamp(18px, calc(18px + var(--x) * .02), 24px); }
}
@media (max-width: 768px) { .mh:has(> .mh-ret:not([hidden])) { padding-bottom: 12px !important; } }   /* no pinned Get started bar here, so no room kept for it */
/* Home greeting: first name only; a very long one stays on one line, cut with … */
.mh-welcome > div { min-width: 0; }
.mh-welcome h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 768px) { html.standalone .mh-ret { --avail: calc(100svh - 126px - env(safe-area-inset-bottom) - env(safe-area-inset-top)); } }   /* app: status bar too */

/* Home-screen app only: the new-visitor Home grows into the taller screen (x = --avail - 586px), so the tool names
   sit just above Get started instead of leaving an empty band. Mobile web is unchanged. */
@media (max-width: 768px) {
  html.standalone .mh-new { --avail: calc(100svh - 126px - env(safe-area-inset-bottom) - env(safe-area-inset-top)); --x: calc(var(--avail) - 586px);
    gap: clamp(10px, calc(10px + var(--x) * .10), 22px) !important; }
  html.standalone .mh-cell { height: clamp(32px, calc(32px + var(--x) * .08), 40px); }
  html.standalone .mh-game { padding: clamp(10px, calc(10px + var(--x) * .06), 16px) 12px; }
  html.standalone .mh-tile { padding: clamp(7px, calc(7px + var(--x) * .04), 12px) 2px; }
}
/* Home-screen app only, new-visitor Home: the room kept for the pinned Get started bar counted the home-bar strip a
   second time (the tab bar's space already includes it), leaving an empty band above Get started */
@media (max-width: 768px) { html.standalone .mh { padding-bottom: 80px; } }
/* Home-screen app only: Home stays hidden until it has been fitted to the screen (home_mobile.js sets data-fit), so it
   never visibly stretches into place. Shown anyway after 1.5s, just in case. */
@media (max-width: 768px) {
  html.standalone .mh-ret:not([data-fit]), html.standalone .mh-new:not([data-fit]) { visibility: hidden; animation: mh-reveal 0s 1.5s forwards; }
}

/* This week's level finishes (home_social.js): soft blue, only when there's room */
@media (max-width: 760px) {
  .mh .mh-proof { margin: 0; font: 600 13px/1.35 var(--b-font, system-ui, sans-serif); color: var(--b-blue, #7CB8FF); }
  .mh .mh-new .mh-proof { text-align: center; margin-top: 14px; }
}