/* polish.css — 1.5 polish pass, loaded last (after liquid-glass.css).
   Objective fixes from docs/content/visual/checks.md: every control reaches Apple's 44 pt touch
   target, no user-facing text under 12 px, and every caption clears WCAG AA contrast on the dark
   material. Visual weight is kept: where a control looked small on purpose (ambience dots, the
   chat close button) the hit area grows with a pseudo-element, not the artwork.
   Rules use !important only where liquid-glass.css or art.css already do. */

:root {
  --tap: 44px;
  --text-soft: rgba(255, 255, 255, 0.74);      /* ≥ 9:1 on the darkest palette background */
  --text-caption: 12px;                        /* floor for labels, eyebrows, captions */
}

/* ---------- Touch targets ---------- */
/* Small round controls: keep the artwork, grow the hit area to 44 pt. */
.ambience-dot,
.ai-chat-close,
.ai-chat-send,
.ai-chat-mic { position: relative; }
.ambience-dot::after,
.ai-chat-close::after,
.ai-chat-send::after,
.ai-chat-mic::after { content: ""; position: absolute; inset: 50%; width: var(--tap); height: var(--tap); transform: translate(-50%, -50%); border-radius: 50%; }
.ambience-dot { width: 30px; height: 30px; }
.ambience-row { gap: 14px; }
.ai-chat-close { width: 40px !important; height: 40px !important; }
.ai-chat-send { width: 42px; height: 42px; }

/* Pill controls and chips: 44 pt tall, same visual language. */
.calm-toggle,
.petal-btn,
.hero-audio-btn,
.menu-toggle,
.calm-chip,
.btn-secondary,
.reminder-btn,
.reset-cta,
.affirmation-btn { min-height: var(--tap); }
.calm-toggle { padding: 9px 14px; }
.petal-btn { padding: 9px 16px; }
.hero-audio-btn { padding: 6px 14px; }
.menu-toggle { padding: 8px; min-width: var(--tap); justify-content: center; }
.calm-chip { padding: 9px 4px; max-width: 80px; }

/* Text links: a 44 pt row without moving the text (negative margins cancel the added padding). */
.nav-links a,
.footer-col a,
.footer-link-sub,
.ai-chat-disclaimer a,
.sos-note a { min-height: var(--tap); display: inline-flex; align-items: center; }
.footer-link-sub { padding: 10px 6px; margin: -10px -2px; }
.ai-chat-disclaimer a,
.sos-note a { padding: 12px 4px; margin: -12px 0; }
.footer-col a { padding: 6px 0; }

/* Emergency links deserve a real button: the 988 Lifeline on the chat disclaimer and in the footer. */
.ai-chat-disclaimer a { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- Legibility floors ---------- */
.section-label { font-size: var(--text-caption) !important; letter-spacing: 2.5px !important; }
.hero-badge,
.ambience-row .ambience-label,
.petal-row .petal-label,
.body-title,
.hero-video-label,
.ai-chat-status,
.ai-chat-disclaimer { font-size: var(--text-caption) !important; }
.game-tab-label { font-size: 12.5px !important; }
.pattern-desc { font-size: 13px !important; letter-spacing: 0.06em; }
.calm-chip small { font-size: 11.5px; color: var(--text-soft); }
.calm-chip span { font-size: 1.35rem; }

/* ---------- Contrast ---------- */
.sos-note { color: var(--text-soft); font-size: 0.86rem; }
.sos-phase-label { color: rgba(255, 255, 255, 0.78); font-size: 0.82rem; font-weight: 600; }
.sos-cycle-count { color: var(--text-soft); font-size: 0.86rem; }
.zen-subtitle { color: rgba(221, 212, 255, 0.82); font-weight: 400; }
.ai-chat-disclaimer { color: var(--text-soft) !important; }
/* The onboarding "Skip", the progress card's "Last 7 days", "Create Pattern", "Siri Shortcuts", "View Mood
   Analytics" and "Read the Research" are rendered from app.js with inline styles; their sizes and colours
   were raised there in the same change. */

/* Footer legal paragraphs: links sit inside running text, so a padded inline box instead of a block. */
.footer p a { padding: 10px 2px; margin: -10px 0; min-height: var(--tap); display: inline-flex; align-items: center; }
.logo { min-height: var(--tap); }
.calm-toggle { font-size: 12.5px; }
.calm-chip small { font-size: var(--text-caption); }
.pattern-btn .pattern-lock { font-size: 0.8rem; opacity: 0.9; }

/* ---------- Focus ring everywhere (keyboard, Switch Control, external keyboards on iPad) ---------- */
:where(button, a, [role="button"], input, select, textarea):focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- iPad: the wide navigation links are 32 pt tall; give them a 44 pt row ---------- */
@media (min-width: 769px) {
  .nav-links a { padding-top: 10px; padding-bottom: 10px; }
}

/* ---------- Dynamic Type / large text: let labels wrap instead of clipping ---------- */
.hero-badge, .section-label, .game-tab-label, .sos-phase-label { white-space: normal; }

/* =====================================================================================
   Pass 2 — from the Opus design and accessibility review (docs/content/visual/REPORT.md)
   ===================================================================================== */

/* ---------- One floating action ---------- */
/* The Calm chat opener now lives in the nav bar (polish.js); the old floating pill goes. */
.ai-chat-btn { display: none !important; }
.nav-calm-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 14px; margin-right: 8px;
  border-radius: 999px; background: var(--lg-fill, rgba(255, 255, 255, 0.08)); border: 1px solid var(--lg-stroke, rgba(255, 255, 255, 0.16));
  box-shadow: var(--lg-edge, inset 0 1px 0 rgba(255, 255, 255, 0.2)); color: #fff; font: 600 14px/1 var(--font-body); cursor: pointer;
}
.nav-calm-btn .nav-calm-icon { font-size: 16px; }
/* The SOS pill: one 52 pt capsule, dark enough for 4.5:1 with white text, 16 pt from the safe edges. */
.sos-calm-btn {
  bottom: calc(16px + env(safe-area-inset-bottom)) !important; right: 16px !important;
  min-height: 52px; padding: 0 20px !important; border-radius: 26px !important;
  background: linear-gradient(135deg, #C2185B, #AD1457) !important; color: #fff !important;
  font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0.01em;
  box-shadow: 0 10px 30px rgba(173, 20, 87, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}
html.bf-hero-visible .sos-calm-btn,
html.bf-session .sos-calm-btn,
html.bf-overlay .sos-calm-btn { opacity: 0; pointer-events: none; transform: translateY(16px); }
/* Content never scrolls under the pill. */
body { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

/* ---------- Header material: nothing shows through ---------- */
.navbar { background: linear-gradient(180deg, rgba(10, 18, 32, 0.92), rgba(8, 14, 28, 0.88)) !important; }
@media (max-width: 768px) {
  .nav-links { background: linear-gradient(160deg, rgba(18, 28, 52, 0.94), rgba(6, 12, 26, 0.96)) !important; }
}

/* ---------- A running session shows only the breath ---------- */
html.bf-session #breathingModeToggle,
html.bf-session #petalRow,
html.bf-session .reminder-btn,
html.bf-session .breathing-extras { visibility: hidden; opacity: 0; height: 0; overflow: hidden; margin: 0 !important; padding: 0 !important; pointer-events: none; }

/* ---------- Breath label: readable on the brightest part of the lotus ---------- */
.breathing-circle-inner {
  background: rgba(6, 14, 24, 0.58); border-radius: 999px; padding: 10px 18px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font-family: var(--font-body) !important; font-weight: 700 !important; font-size: clamp(1.05rem, 2.2vw, 1.3rem) !important;
  letter-spacing: 0.01em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* ---------- Primary labels never white on a light gradient ---------- */
.btn-primary, .btn-primary *, .nav-cta, .share-preview-btn.primary { color: #06201C !important; -webkit-text-fill-color: currentColor !important; }
.btn-primary, .nav-cta { font-weight: 700 !important; }

/* ---------- Visual mode: one segmented control instead of two rows of pills ---------- */
.breathing-mode-toggle {
  display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; max-width: 360px; margin: 0 auto 12px;
  border-radius: 22px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.b-mode-btn {
  min-height: 38px !important; padding: 0 10px !important; border-radius: 19px !important; white-space: nowrap; font-size: 13.5px !important;
  background: transparent !important; border: 1px solid transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.b-mode-btn.active { background: rgba(255, 255, 255, 0.16) !important; border-color: rgba(255, 255, 255, 0.22) !important; color: #fff !important; }
.petal-row { margin-top: 6px; }

/* ---------- Hero actions: a grid with no orphan ---------- */
.hero-actions { display: grid !important; grid-template-columns: 1fr 1fr; gap: 12px; }
.hero-actions > .btn-primary, .hero-actions > :nth-child(4) { grid-column: 1 / -1; }
.hero-actions > * { justify-content: center; min-height: 48px; }

/* ---------- Find Your Calm tabs: an even grid on phones ---------- */
@media (max-width: 600px) {
  .games-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 0 4px; }
  .game-tab { min-width: 0; min-height: 64px; padding: 10px 12px; justify-content: center; }
}

/* ---------- Topics: icon and title in a row, description clamped, the whole card is the link ---------- */
.topic-card { display: grid !important; grid-template-columns: 48px 1fr; column-gap: 14px; align-items: center; }
.topic-card .topic-icon { width: 48px; height: 48px; font-size: 24px; display: grid; place-items: center; margin: 0; }
.topic-card h3 { margin: 0; }
.topic-card p { grid-column: 1 / -1; margin: 10px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.topic-card .arrow { grid-column: 1 / -1; }

/* ---------- Footer: the crisis line is its own row; link columns are rows ---------- */
.crisis-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 56px; margin: 28px 0 10px; padding: 12px 18px;
  border-radius: 16px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); color: #fff; text-decoration: none; font-weight: 600;
}
.crisis-row-action { color: var(--mint); font-weight: 700; white-space: nowrap; }
.footer-col a { display: flex; align-items: center; min-height: var(--tap); padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.footer-col a:last-child { border-bottom: 0; }

/* ---------- Calm chat ---------- */
html body .ai-chat-panel .ai-chat-input::placeholder { color: #B4BFD2 !important; }
.ai-chat-close { width: var(--tap) !important; height: var(--tap) !important; }
.ai-chat-mic, .ai-chat-send { width: var(--tap) !important; height: var(--tap) !important; }

/* ---------- Typography: one family for controls, serif for section titles ---------- */
button, input, select, textarea { font-family: inherit; }
.games-title { font-family: var(--font-display) !important; }

/* ---------- iPad portrait (769–1199 px): the wide nav overflows, so use the drawer ---------- */
@media (min-width: 769px) and (max-width: 1199px) {
  .menu-toggle { display: flex !important; }
  .nav-links {
    position: fixed; top: 0; right: -100%; width: 60%; max-width: 360px; height: 100vh; height: 100dvh;
    padding: calc(env(safe-area-inset-top) + 32px) 24px calc(env(safe-area-inset-bottom) + 24px);
    flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px;
    background: linear-gradient(160deg, rgba(20, 32, 58, 0.78), rgba(6, 12, 26, 0.86)); -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
    border-left: 1px solid rgba(255, 255, 255, 0.14); z-index: 1001; overflow-y: auto; transition: right 0.35s ease;
  }
  .nav-links.open { right: 0; }
  .ambience-row { flex-wrap: wrap; width: 100%; }
}

/* Canvas instruction in the body sans, not the wordmark serif. */
.zen-invite { font-family: var(--font-body) !important; font-size: 17px !important; font-weight: 600 !important; letter-spacing: 0 !important; color: rgba(255, 255, 255, 0.88) !important; text-wrap: balance; }

/* =====================================================================================
   Pass 3 — round-two review (docs/content/visual/REPORT.md, batch 01Rknn…)
   ===================================================================================== */

/* ---------- Drawer: opaque enough without relying on blur; one inset; a real scrim ---------- */
@media (max-width: 768px) {
  .nav-links { background: linear-gradient(160deg, rgba(16, 24, 46, 0.985), rgba(6, 12, 26, 0.99)) !important; padding-left: 24px !important; padding-right: 24px !important; }
  .nav-links a { padding-left: 0 !important; margin-left: 0 !important; }
}
.nav-overlay { background: rgba(2, 6, 14, 0.6) !important; }
html body .navbar .nav-links .nav-cta, .nav-cta {
  color: #06201C !important; -webkit-text-fill-color: #06201C !important; justify-content: center !important; text-align: center !important;
  border-radius: 999px !important; font-weight: 700 !important;
}
/* Full-width, 52 pt only inside the drawer; on the wide nav bar it stays an inline pill. */
@media (max-width: 1199px) { html body .navbar .nav-links .nav-cta { min-height: 52px; font-size: 17px !important; width: 100%; } }
@media (min-width: 1200px) { html body .navbar .nav-links .nav-cta { width: auto !important; min-height: var(--tap); padding: 0 20px !important; font-size: 15px !important; flex: 0 0 auto; } }

/* ---------- Header follows the palette ---------- */
/* Flat colours, not gradients: a gradient image under a backdrop filter rendered see-through in some engines. */
.navbar, .navbar.scrolled, html[data-ambience] .navbar, html[data-ambience] .navbar.scrolled { background: rgba(9, 16, 30, 0.95) !important; background-image: none !important; -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%); }
.crisis-banner { background: rgba(8, 14, 26, 0.96) !important; background-image: none !important; }
/* (palette-tinted header via color-mix was tried and dropped: an unresolved token makes the whole background invalid, i.e. transparent) */

/* ---------- Hero: shorter path to the primary action, one filled button, clear tiers ---------- */
.hero-badge { display: none !important; }
.hero-text { font-size: 17px !important; line-height: 1.45 !important; max-width: 34ch; margin-left: auto; margin-right: auto; }
.hero-actions > .btn-primary { min-height: 56px; font-size: 17px !important; }
.hero-actions .btn-secondary { color: #F2F4F7 !important; background: rgba(255, 255, 255, 0.08) !important; border: 1.5px solid rgba(255, 255, 255, 0.45) !important; min-height: 44px; font-size: 15px !important; font-weight: 600 !important; }
.hero-actions > :nth-child(4) { background: none !important; border: none !important; box-shadow: none !important; color: rgba(255, 255, 255, 0.78) !important; font-weight: 500 !important; min-height: 44px; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 4px; }

/* ---------- Breath label: a status, not a button; soft scrim; live count ---------- */
.breathing-circle-inner {
  background: radial-gradient(circle, rgba(6, 14, 24, 0.62) 0%, rgba(6, 14, 24, 0.45) 55%, rgba(6, 14, 24, 0) 100%) !important;
  border-radius: 50% !important; padding: 22px 28px !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  pointer-events: none; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55); font-size: clamp(1.1rem, 2.4vw, 1.45rem) !important; display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
}
.bf-count { display: block; font: 700 clamp(1.6rem, 4vw, 2.2rem)/1 var(--font-body); color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); font-variant-numeric: tabular-nums; margin-top: 2px; }
.bf-count:empty { display: none; }

/* ---------- Pattern description: rhythm line and tagline ---------- */
#patternDesc { letter-spacing: 0 !important; line-height: 1.4; }
#patternDesc .pd-rhythm { display: block; font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.86); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
#patternDesc .pd-note { display: block; font-size: 13px; color: rgba(255, 255, 255, 0.6); margin-top: 2px; }

/* ---------- Display options below the session controls; one selected style ---------- */
.bf-display-options { margin: 22px auto 0; max-width: 360px; display: grid; gap: 10px; justify-items: center; }
.bf-display-label { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); font-weight: 600; }
.bf-display-options .breathing-mode-toggle { margin: 0; width: 100%; }
.bf-display-options .petal-row { margin: 0; }
.petal-btn { border: 1px solid rgba(255, 255, 255, 0.3) !important; }
.petal-btn[aria-pressed="true"], .b-mode-btn.active { background: rgba(94, 234, 212, 0.2) !important; border: 2px solid #5EEAD4 !important; color: #fff !important; box-shadow: none !important; }
html.bf-session .bf-display-options, html.bf-session .calm-check { visibility: hidden; opacity: 0; height: 0; overflow: hidden; margin: 0 !important; padding: 0 !important; pointer-events: none; }

/* ---------- Session complete: a real scrim, Done is primary, Share is secondary ---------- */
#sessionCompleteOverlay { background: rgba(5, 8, 20, 0.8) !important; -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%); }
#sessionCompleteOverlay button:nth-of-type(1) { background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; border: 1.5px solid rgba(255, 255, 255, 0.4) !important; min-height: 48px; }
#sessionCompleteOverlay button:nth-of-type(2) { background: linear-gradient(135deg, var(--mint), var(--mint-dark)) !important; color: #06201C !important; font-weight: 700 !important; min-height: 52px; }
html.bf-overlay .navbar, html.bf-overlay .nav-calm-btn { visibility: hidden; }

/* ---------- Reset and SOS: no boxes behind the glow; readable count ---------- */
.sos-overlay .sos-content, .reset-overlay .sos-content { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; border: none !important; }
.sos-breath-count { font-weight: 600 !important; font-size: 2.75rem !important; color: #fff !important; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); font-variant-numeric: tabular-nums; }
.sos-breath-text, #sosBreathText, .sos-instruction, #sosInstruction { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55); }

/* ---------- Calm chat composer ---------- */
.ai-chat-close, .ai-chat-mic, .ai-chat-send { width: 48px !important; height: 48px !important; }
.ai-chat-mic { font-size: 22px !important; color: #E6EEF7 !important; border: 1.5px solid rgba(255, 255, 255, 0.4) !important; margin-right: 12px; }
html body .ai-chat-panel .ai-chat-input::placeholder { color: #A9B6CC !important; opacity: 1 !important; }
html body .ai-chat-panel .ai-chat-input { border: 1px solid rgba(255, 255, 255, 0.3) !important; }
.ai-chat-panel > :last-child { padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important; }

/* ---------- Mood tiles: a visible edge ---------- */
.mood-btn { border: 1.5px solid rgba(255, 255, 255, 0.42) !important; background: rgba(255, 255, 255, 0.1) !important; }

/* ---------- Topics: full descriptions, one page gutter ---------- */
.topic-card p { -webkit-line-clamp: unset; display: block; }
@media (max-width: 600px) {
  .topics .container { padding-left: 20px; padding-right: 20px; }
  .topics-grid { gap: 12px; }
  #games-hub { padding-top: 24px; }
}

/* ---------- Footer: legal copy as footnotes; links readable; two crisis buttons ---------- */
.affiliate-disclosure, .footer-disclaimer { border-left: 0 !important; font-size: 13px !important; line-height: 1.45 !important; color: rgba(235, 235, 245, 0.62) !important; }
.affiliate-disclosure p, .footer-disclaimer p { font-size: 13px !important; }
.footer-link-sub, .footer p a { color: #B4BCCB !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.crisis-row-actions { display: flex; gap: 8px; }
.crisis-row-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px; border-radius: 999px; background: var(--mint); color: #06201C !important; font-weight: 700; text-decoration: none; white-space: nowrap; }
.crisis-row-actions a:last-child { background: rgba(255, 255, 255, 0.1); color: #fff !important; border: 1.5px solid rgba(255, 255, 255, 0.4); }
@media (max-width: 420px) { .crisis-row { flex-wrap: wrap; } .crisis-row-actions { width: 100%; } .crisis-row-actions a { flex: 1; } }

/* ---------- Affirmation: the words are the headline ---------- */
.affirmation .section-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.affirmation-quote { font-size: clamp(1.4rem, 5vw, 1.9rem) !important; line-height: 1.35 !important; }
/* Label above, count below, both centred in the ring. */
.breathing-circle { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; }
/* Crisis banner text at the caption floor. */
.crisis-banner, .crisis-banner p, .crisis-banner a { font-size: 13px !important; }

/* =====================================================================================
   Pass 4 — round-three review (batch 01XAnx…): the cheap structural leftovers
   ===================================================================================== */

/* ---------- Crisis banner: real targets, and above the drawer and its scrim ---------- */
.crisis-banner { z-index: 1300 !important; }
.crisis-banner-inner { gap: 8px; align-items: center; }
.crisis-banner a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 8px; margin: -12px -2px; }
.crisis-close { min-width: var(--tap) !important; min-height: var(--tap) !important; display: grid !important; place-items: center; font-size: 16px !important; margin-left: 4px; }

/* ---------- Breath label stack: one scrim disc for label and count; plain at rest ---------- */
.bf-label-stack { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 150px; height: 150px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(6, 14, 24, 0.66) 0%, rgba(6, 14, 24, 0.5) 55%, rgba(6, 14, 24, 0) 100%); }
html:not(.bf-session) .bf-label-stack { background: none; }
.breathing-circle-inner { background: none !important; padding: 0 !important; font-size: clamp(1.05rem, 2.4vw, 1.35rem) !important; }
html:not(.bf-session) .breathing-circle-inner { font-weight: 500 !important; color: rgba(255, 255, 255, 0.82) !important; font-size: 1rem !important; }
.breathing-circle { cursor: pointer; }
.breathing-circle:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
#patternDesc .pd-rhythm { text-wrap: balance; }
#patternDesc .pd-pair { white-space: nowrap; }

/* ---------- Mood chips: 48 pt, labelled ends ---------- */
.calm-chips { gap: 10px !important; }
.calm-chip { min-width: 48px; min-height: 48px; }
.calm-chip small { display: block; }
.calm-scale-ends { display: flex; justify-content: space-between; font-size: 12px; color: rgba(255, 255, 255, 0.6); margin: 6px 4px 0; }

/* ---------- Calm mode as a switch ---------- */
.calm-toggle { position: relative; padding-left: 52px !important; }
.calm-toggle::before { content: "" !important; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 34px; height: 20px; border-radius: 10px; background: rgba(255, 255, 255, 0.22); transition: background 0.2s ease; }
.calm-toggle::after { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transition: left 0.2s ease; }
.calm-toggle[aria-pressed="true"]::before { content: "" !important; background: var(--mint); }
.calm-toggle[aria-pressed="true"]::after { left: 26px; }

/* ---------- Floating pill in the palette accent, not an off-palette magenta ---------- */
.sos-calm-btn { background: linear-gradient(135deg, var(--mint), var(--mint-dark)) !important; color: #06201C !important; box-shadow: 0 10px 30px var(--mint-glow, rgba(95, 243, 239, 0.32)), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important; }

/* ---------- Chat: send quiet while empty; header in the body typeface ---------- */
.ai-chat-send.is-empty { opacity: 0.4; box-shadow: none !important; }
.ai-chat-header, .ai-chat-header * { font-family: var(--font-body) !important; }
.ai-chat-header strong { font-size: 17px; font-weight: 600; }

/* ---------- SOS and reset: text on a scrim disc, the lotus still visible around it ---------- */
.sos-breath-circle { background: radial-gradient(circle, rgba(8, 14, 28, 0.74) 0%, rgba(8, 14, 28, 0.55) 55%, rgba(8, 14, 28, 0.1) 100%) !important; }
.sos-breath-count { font-size: 3.2rem !important; }

/* ---------- One 20 px gutter on phones; iPad hero no taller than it needs ---------- */
@media (max-width: 600px) {
  .container { padding-left: 20px !important; padding-right: 20px !important; }
  .affirmation-card, .topic-card { margin-left: 0 !important; margin-right: 0 !important; }
}
@media (min-width: 769px) { .hero { min-height: min(100vh, 760px) !important; } }

/* ---------- Typography: balanced headings, no orphans ---------- */
h1, h2, .section-title, .games-title { text-wrap: balance; }
.affirmation-card .affirmation-quote { background: none !important; border: none !important; box-shadow: none !important; }
.footer-bottom p { line-height: 1.8; }
/* Crisis banner stays on one line where it can: compact 40 pt link rows, wrapping only between links. */
.crisis-banner p { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0; }
.crisis-banner a { min-height: 40px; margin: -8px 0; padding: 0 4px; white-space: nowrap; }

/* =====================================================================================
   Smooth header (polish.js §7): banner folds into a 988 button once scrolled; the header hides
   on scroll down and returns on scroll up. Transforms only, one easing, no reflow.
   ===================================================================================== */
html .navbar, html .crisis-banner { transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.2s ease, opacity 0.2s ease !important; will-change: transform; }
/* Same look in both scroll states: no background or hairline pop at 50 px. */
html .navbar, html .navbar.scrolled { border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important; }
html.bf-compact .crisis-banner { transform: translateY(-100%); box-shadow: none !important; pointer-events: none; }
html.bf-compact .navbar { transform: translateY(calc(-1 * var(--bf-banner-h, 0px))); }
html.bf-compact.bf-header-hidden .navbar { transform: translateY(calc(-1 * var(--bf-banner-h, 0px) - 100% - 2px)); box-shadow: none !important; }
/* Compact header: icon instead of the full wordmark, room for the 988 button. */
.logo .logo-word { transition: opacity 0.2s ease; }
html.bf-compact .logo .logo-word { opacity: 0; width: 0; overflow: hidden; display: inline-block; white-space: nowrap; }
/* The header was 85 px for 44 px of controls: a stray 16 px bottom padding plus 12 px container padding. */
html .navbar { padding-bottom: 0 !important; }
html.bf-compact .navbar .container { padding-top: 8px !important; padding-bottom: 8px !important; gap: 8px !important; }
.nav-988 { display: none; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); min-width: 64px; padding: 0 14px; margin-left: auto; margin-right: 2px; border-radius: 999px;
  font: 700 15px/1 var(--font-body); color: var(--mint) !important; background: rgba(95, 243, 239, 0.12); border: 1.5px solid rgba(95, 243, 239, 0.55);
  text-decoration: none; letter-spacing: 0.02em; pointer-events: auto; }
.nav-988::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .57 3.6 1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1 11.4 11.4 0 0 0 .57 3.6 1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat; }
html.bf-compact .nav-calm-btn { margin-left: 0; }
html.bf-compact .nav-988 { display: inline-flex; }
/* Status bar area stays solid when the header slides away (iOS safe area; zero height on the web). */
.bf-statusbar-scrim { position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: rgba(9, 16, 30, 0.97); z-index: 1250; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { html .navbar, html .crisis-banner { transition: none !important; } }
html[data-calm="on"] .navbar, html[data-calm="on"] .crisis-banner { transition-duration: 0.2s !important; }
/* Crisis banner: the "·" between the two links is hidden when they wrap onto two lines. */
.crisis-banner .crisis-sep { margin: 0 2px; }
@media (max-width: 480px) { .crisis-banner .crisis-sep { display: none; } }
.nav-988, .nav-calm-btn, .menu-toggle { flex-shrink: 0; }

/* ---------- 1.5 Full-screen panels (meditations, worksheets…) ----------
   The 97%-alpha fill let the breathing controls show through as ghost text over the session list. Solid fill. */
.pro-modal-overlay { background: #0A0F1A !important; }