/* shared/montura-home-header.css
   The Home gamification header (GAMIFICATION_SPEC §14 "On the Screen, No Card"):
   leaf row on top, big left-aligned daily-goal Σ ring, balance / streak / level
   beside it, league as a separate outlined chip. No cards, fills or shadows:
   grouping comes from spacing and alignment only. Every target is >= 44 px. */
:root {
  --mh-text: #111827;
  --mh-muted: #6b7280;
  --mh-faint: #9ca3af;
  --mh-hairline: rgba(60, 60, 67, 0.29); /* BUILD_SPEC Shared look */
  --mh-track: #e5e7eb;
  --mh-empty: #868c96; /* used leaf outline: 3:1 against white for graphics */
  --mh-accent: #1D7FE2;
  --mh-accent-tint: rgba(29, 127, 226, 0.08);
  --mh-leaf: #2E9E5B;
  --mh-flame: #F08A24;
  --mh-surface: #ffffff;
  --mh-scrim: rgba(17, 24, 39, 0.35);
  --mh-radius: 8px; /* controls 8, cards 10 (BUILD_SPEC Shared look) */
}

.mh { margin: 0 0 2.5rem; color: var(--mh-text); font-family: 'Inter', sans-serif; }
.mh-greeting { font-size: 0.9375rem; color: var(--mh-muted); margin: 0 0 0.75rem; }
.mh-greeting strong { color: var(--mh-text); font-weight: 600; }
.mh button { font-family: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.mh button:focus-visible, .mh-tray button:focus-visible, .mh a:focus-visible { outline: 2px solid var(--mh-accent); outline-offset: 3px; border-radius: 8px; }

/* Leaf row: full width, along the very top, no border. */
.mh-leaves { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin-bottom: 0.75rem; }
.mh-leaf { width: 26px; height: 26px; flex: 0 0 auto; }
.mh-leaf path { fill: var(--mh-leaf); stroke: var(--mh-leaf); stroke-width: 1.5; }
.mh-leaf.is-empty path { fill: none; stroke: var(--mh-empty); }
.mh-leaf .mh-vein, .mh-leaf.is-empty .mh-vein { fill: none; stroke: #ffffff; stroke-width: 1.25; stroke-linecap: round; }
.mh-leaf.is-empty .mh-vein { stroke: var(--mh-empty); }

.mh-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.mh-cluster { display: flex; align-items: center; gap: 1.25rem; }

/* Enigma ring: the largest element, top-left. */
.mh-ring { position: relative; width: 132px; height: 132px; flex: 0 0 auto; border-radius: 50%; }
.mh-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mh-ring .mh-ring-track { fill: none; stroke: var(--mh-track); stroke-width: 10; }
.mh-ring .mh-ring-fill { fill: none; stroke: var(--mh-accent); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 0.6s cubic-bezier(.2,.8,.2,1); }
.mh-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.mh-ring-today { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.02em; }
.mh-ring-goal { font-size: 0.8125rem; color: var(--mh-muted); margin-top: 2px; }

.mh-side { display: flex; flex-direction: column; gap: 4px; }
.mh-balance { font-size: 1rem; font-weight: 600; color: var(--mh-muted); min-height: 32px; display: flex; align-items: center; }
.mh-streak, .mh-level { min-height: 44px; min-width: 44px; display: flex; align-items: center; gap: 8px; font-size: 1.125rem; font-weight: 700; }
.mh-streak svg { width: 24px; height: 24px; }
.mh-streak svg path { fill: var(--mh-flame); }
.mh-streak.is-pending svg path { fill: var(--mh-faint); }
.mh-week { display: flex; gap: 6px; align-items: center; }
.mh-day { width: 18px; height: 18px; border-radius: 5px; background: var(--mh-track); }
.mh-day.is-done { background: var(--mh-flame); }
.mh-day.is-today { box-shadow: inset 0 0 0 2px var(--mh-text); }
.mh-day.is-today.is-done { box-shadow: inset 0 0 0 2px var(--mh-text); }
.mh-streak-note { font-size: 0.8125rem; color: var(--mh-muted); margin-top: 2px; }

/* Level badge: code-drawn numbered ring (real level art swaps in when it arrives). */
.mh-level-badge { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--mh-accent); color: var(--mh-accent); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 700; }
.mh-level-name { font-size: 1rem; font-weight: 600; }

/* League: a separate, small, outlined chip. */
.mh-league { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 1rem; border: 1px solid var(--mh-hairline); border-radius: 999px; font-size: 0.875rem; font-weight: 600; color: var(--mh-text); text-decoration: none; white-space: nowrap; }
.mh-league:hover { border-color: var(--mh-accent); }

.mh-error { font-size: 0.9375rem; color: var(--mh-muted); display: flex; align-items: center; gap: 0.75rem; min-height: 44px; }
.mh-error button { color: var(--mh-accent); font-weight: 600; min-height: 44px; }

/* Trays: solid, centred bottom sheet; 3 explainer slides, dots, Continue. */
.mh-scrim { position: fixed; inset: 0; background: var(--mh-scrim); z-index: 2000; display: flex; align-items: flex-end; justify-content: center; }
.mh-scrim[hidden] { display: none; }
.mh-tray { background: var(--mh-surface); width: 100%; max-width: 460px; border-radius: 16px 16px 0 0; padding: 24px 24px 24px; color: var(--mh-text); font-family: 'Inter', sans-serif; animation: mh-up 0.28s cubic-bezier(.2,.8,.2,1); max-height: 92vh; overflow-y: auto; }
@media (min-width: 640px) { .mh-scrim { align-items: center; } .mh-tray { border-radius: 16px; } }
@keyframes mh-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.mh-visual { min-height: 96px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.mh-big { font-size: 2.75rem; font-weight: 700; letter-spacing: -0.03em; }
.mh-tray h2 { font-size: 1.25rem; font-weight: 700; margin: 0 0 8px; letter-spacing: -0.01em; }
.mh-tray p { font-size: 0.9375rem; line-height: 1.5; color: var(--mh-muted); margin: 0 0 8px; }
.mh-tray p strong { color: var(--mh-text); }
.mh-bar { width: 100%; height: 10px; border-radius: 5px; background: var(--mh-track); overflow: hidden; }
.mh-bar > span { display: block; height: 100%; background: var(--mh-accent); border-radius: 5px; }
.mh-bar-caption { display: flex; justify-content: space-between; font-size: 0.8125rem; color: var(--mh-muted); margin-top: 6px; }
.mh-visual-col { width: 100%; }
.mh-dots { display: flex; justify-content: center; gap: 8px; margin: 20px 0 16px; }
.mh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mh-track); }
.mh-dot.is-on { background: var(--mh-text); }
/* Tray buttons use the shared look (shared/montura-look.css: .m-btn-primary / .m-btn-outlined). */
.mh-secondary { margin-top: 10px; }
.mh-msg { font-size: 0.875rem; color: var(--mh-muted); margin-top: 8px; min-height: 1.25em; }
.mh-badges { display: flex; gap: 12px; justify-content: center; }
.mh-badge { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--mh-track); color: var(--mh-faint); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9375rem; }
.mh-badge.is-earned { border-color: var(--mh-flame); color: var(--mh-flame); }
.mh-goal-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 16px; }
.mh-goal { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 16px; border: 1px solid var(--mh-hairline); border-radius: var(--mh-radius); background: none; font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--mh-text); cursor: pointer; }
.mh-goal.is-on { border-color: var(--mh-accent); background: var(--mh-accent-tint); }
.mh-goal span:last-child { color: var(--mh-muted); font-weight: 500; }
.mh-levels { list-style: none; margin: 0 0 8px; padding: 0; }
.mh-levels li { display: flex; align-items: center; gap: 12px; min-height: 44px; border-bottom: 1px solid var(--mh-hairline); font-size: 0.9375rem; }
.mh-levels li:last-child { border-bottom: 0; }
.mh-levels li .mh-level-badge { width: 28px; height: 28px; font-size: 0.75rem; border-color: var(--mh-track); color: var(--mh-faint); }
.mh-levels li.is-reached .mh-level-badge { border-color: var(--mh-accent); color: var(--mh-accent); }
.mh-levels li.is-current { font-weight: 700; }
.mh-levels li span:last-child { margin-left: auto; color: var(--mh-muted); font-weight: 500; }
.mh-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Desktop sizing (CLAUDE.md: the iPhone's screen size never dictates desktop
   size). Same layout, colours and style as the app; sized for a desktop
   screen so the header fills the page between its margins. */
@media (min-width: 1024px) {
  .mh { margin-bottom: 2.75rem; }
  .mh-greeting { font-size: 1rem; margin-bottom: 0.875rem; }
  .mh-leaves { gap: 10px; min-height: 44px; margin-bottom: 1rem; }
  .mh-leaf { width: 30px; height: 30px; }
  .mh-main { align-items: center; gap: 2rem; }
  .mh-cluster { gap: 1.75rem; }
  .mh-ring { width: 168px; height: 168px; }
  .mh-ring-today { font-size: 2rem; }
  .mh-ring-goal { font-size: 0.875rem; margin-top: 4px; }
  .mh-side { gap: 6px; }
  .mh-balance { font-size: 1.125rem; min-height: 36px; }
  .mh-streak, .mh-level { font-size: 1.3125rem; gap: 10px; min-height: 48px; }
  .mh-streak svg { width: 28px; height: 28px; }
  .mh-week { gap: 7px; }
  .mh-day { width: 21px; height: 21px; border-radius: 6px; }
  .mh-streak-note { font-size: 0.875rem; }
  .mh-level-badge { width: 38px; height: 38px; font-size: 0.9375rem; }
  .mh-level-name { font-size: 1.125rem; }
  .mh-league { min-height: 48px; padding: 0 1.25rem; font-size: 0.9375rem; }

  /* Info boxes: a desktop dialog, not a phone sheet. */
  .mh-tray { max-width: 520px; padding: 32px 36px 28px; border-radius: 10px; }
  .mh-visual { min-height: 120px; margin-bottom: 20px; }
  .mh-big { font-size: 3.25rem; }
  .mh-tray h2 { font-size: 1.4375rem; margin-bottom: 10px; }
  .mh-tray p { font-size: 1rem; }
  .mh-bar { height: 12px; border-radius: 6px; }
  .mh-bar-caption { font-size: 0.875rem; }
  .mh-dot { width: 9px; height: 9px; }
  .mh-badge { width: 60px; height: 60px; font-size: 1rem; }
  .mh-goal { min-height: 60px; font-size: 1.0625rem; padding: 0 18px; }
  .mh-levels li { min-height: 48px; font-size: 1rem; }
  .mh-levels li .mh-level-badge { width: 32px; height: 32px; font-size: 0.8125rem; }
}

@media (max-width: 560px) {
  .mh-ring { width: 112px; height: 112px; }
  .mh-ring-today { font-size: 1.375rem; }
  .mh-cluster { gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .mh-ring .mh-ring-fill { transition: none; }
  .mh-tray { animation: none; }
}