/* ═══════════════════════════════════════════════════
   O₂ RHYTHM — TAB PANEL APP
   Brand: Deep navy #0d1b3e | Blue #1a6fd8 | Teal #00bfae
   Fonts: Switzer (display) · General Sans (body)
═══════════════════════════════════════════════════ */

/* ── TOKENS ── */
:root {
  --navy:        #0d1b3e;
  --navy-mid:    #1c3462;
  --blue:        #1a6fd8;
  --blue-light:  #e8f0fb;
  --teal:        #00bfae;
  --teal-light:  #e0f7f5;
  --grad:        linear-gradient(135deg, #1a6fd8 0%, #00bfae 100%);
  --grad-soft:   linear-gradient(135deg, #e8f0fb 0%, #e0f7f5 100%);

  --bg:          #f8fafc;
  --surface:     #ffffff;
  --surface-2:   #f2f6fa;
  --divider:     #e0e8f0;
  --border:      #d1dce8;

  --text:        #0d1b3e;
  --text-muted:  #5a6e8a;
  --text-faint:  #9eb0c4;

  --shadow-sm:   0 1px 4px rgba(13,27,62,.06);
  --shadow-md:   0 4px 20px rgba(13,27,62,.09);
  --shadow-lg:   0 16px 48px rgba(13,27,62,.13);
  --shadow-card: 0 2px 16px rgba(26,111,216,.09);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  --text-xs:   clamp(.75rem, .7rem + .25vw, .875rem);
  --text-sm:   clamp(.875rem, .82rem + .3vw, 1rem);
  --text-base: clamp(1rem, .95rem + .25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem + .6vw, 1.4rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  --text-2xl:  clamp(2rem, 1.4rem + 2.2vw, 3rem);

  --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem;
  --sp-12: 3rem; --sp-16: 4rem;

  --ease: 200ms cubic-bezier(.16,1,.3,1);
  --ease-panel: 280ms cubic-bezier(.16,1,.3,1);

  --font-display: 'Switzer', 'General Sans', system-ui, sans-serif;
  --font-body:    'General Sans', system-ui, sans-serif;

  --w-narrow:  580px;
  --w-default: 860px;
}

/* ── DARK MODE ── */
[data-theme="dark"] {
  --bg:#08111f; --surface:#0f1e33; --surface-2:#132540;
  --divider:#1e3050; --border:#253b5e;
  --text:#dde8f4; --text-muted:#7a9abf; --text-faint:#3a5470;
  --shadow-sm:0 1px 4px rgba(0,0,0,.22); --shadow-md:0 4px 20px rgba(0,0,0,.32);
  --shadow-lg:0 16px 48px rgba(0,0,0,.5); --shadow-card:0 2px 16px rgba(0,0,0,.28);
  --blue-light:#0e2040; --teal-light:#082820;
  --grad-soft:linear-gradient(135deg,#0e2040 0%,#082820 100%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#08111f;--surface:#0f1e33;--surface-2:#132540;
    --divider:#1e3050;--border:#253b5e;
    --text:#dde8f4;--text-muted:#7a9abf;--text-faint:#3a5470;
    --shadow-sm:0 1px 4px rgba(0,0,0,.22);--shadow-md:0 4px 20px rgba(0,0,0,.32);
    --shadow-lg:0 16px 48px rgba(0,0,0,.5);--shadow-card:0 2px 16px rgba(0,0,0,.28);
    --blue-light:#0e2040;--teal-light:#082820;
    --grad-soft:linear-gradient(135deg,#0e2040 0%,#082820 100%);
  }
}

/* ── BASE ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing:antialiased;scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.65;
  color:var(--text);
  background:var(--bg);
}
img,svg{display:block;max-width:100%;}
button{cursor:pointer;background:none;border:none;}
input,button,textarea,select{font:inherit;color:inherit;}
h1,h2,h3,h4{text-wrap:balance;line-height:1.15;font-family:var(--font-display);}
p,li{text-wrap:pretty;max-width:68ch;}
:focus-visible{outline:2.5px solid var(--teal);outline-offset:3px;border-radius:var(--radius-sm);}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}
}
::selection{background:rgba(0,191,174,.2);}

/* ══════════════════════════════════════════
   APP HEADER — always visible, compact
══════════════════════════════════════════ */
.app-header {
  background: var(--surface);
  border-bottom: 1px solid var(--divider);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 0;
  z-index: 40;
}
.header-inner {
  max-width: var(--w-default);
  margin-inline: auto;
  padding: var(--sp-6) var(--sp-6) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

/* Logo */
.logo-lockup { display: flex; justify-content: center; cursor: pointer; background: none; border: none; padding: 0; }
.logo-svg { width: clamp(180px, 45vw, 280px); height: auto; }
.logo-rhythm-text { fill: #0d1b3e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .logo-rhythm-text { fill: #dde8f4; }
}
[data-theme="dark"] .logo-rhythm-text { fill: #dde8f4; }

/* Tagline */
.tagline {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .18em;
  flex-wrap: wrap;
  justify-content: center;
}
.tag-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .18em;
  padding: var(--sp-1) 0;
  position: relative;
  transition: opacity var(--ease);
}
.tag-btn::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--ease);
}
.tag-btn:hover { opacity: .75; }
.tag-btn.active::after { opacity: 1; }
.tag-regulate { color: var(--teal); }
.tag-reflect  { color: var(--blue); }
.tag-connect  { color: var(--navy); }
[data-theme="dark"] .tag-connect { color: #7ab0e8; }
.tag-dot { color: var(--text-faint); }

/* Hero copy — visible on home, fades out when panel open */
.hero-copy {
  text-align: center;
  transition: all var(--ease-panel);
  overflow: hidden;
}


.hero-headline {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--sp-2);
}
[data-theme="dark"] .hero-headline { color: var(--text); }
.hero-sub { font-size: var(--text-sm); color: var(--text-muted); max-width: 46ch; margin-inline: auto; }

/* Not-alone pill */
.not-alone {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  background: var(--grad-soft);
  border: 1px solid var(--divider);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  color: var(--blue);
  font-weight: 500;
  transition: all var(--ease-panel);
  overflow: hidden;
}
[data-theme="dark"] .not-alone { color: #7ab0e8; }


/* ── TAB NAV ── */
/* ── Home nav: stacked CTA buttons ── */
.home-nav {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  margin-top: var(--sp-4);
  padding: 0 var(--sp-1);
}
.home-nav__question {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--navy);
  text-align: center;
  margin-bottom: var(--sp-1);
  letter-spacing: .01em;
}
.home-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  padding: var(--sp-5) var(--sp-5);
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  color: #fff;
  text-align: left;
  transition: filter var(--ease), transform var(--ease);
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.home-btn:hover  { filter: brightness(1.08); transform: translateY(-1px); }
.home-btn:active { filter: brightness(0.95); transform: translateY(0); }
.home-btn--regulate { background: #00bfae; }
.home-btn--reflect  { background: #1a6fd8; }
.home-btn--connect  { background: #0d1b3e; }
.home-btn__icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.18);
  border-radius: var(--radius-md);
}
.home-btn__icon svg { width: 22px; height: 22px; stroke: #fff; }
.home-btn__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.home-btn__label {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
}
.home-btn__sub {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 500;
  opacity: .85;
  letter-spacing: .01em;
}
.home-btn__arrow {
  font-size: 1.5rem;
  font-weight: 300;
  opacity: .7;
  line-height: 1;
  flex-shrink: 0;
}
/* Hide home nav when a panel is open */


/* Stats widget wrapper in header */
.home-stats-wrap {
  width: 100%;
  padding-bottom: var(--sp-5);
  transition: opacity .2s ease;
}


/* ══════════════════════════════════════════
   PANEL CONTAINER
══════════════════════════════════════════ */
.panel-container {
  flex: 0 0 auto;
}

/* Panels: hidden by HTML [hidden] attr; shown by removing it.
   .panel-visible drives the fade-in animation. */
.panel { display: block; }
.panel[hidden] { display: none !important; }
.panel--home {
  display: block;
}


.panel-visible {
  animation: panelIn var(--ease-panel) both;
}

@keyframes panelIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.panel-inner {
  max-width: var(--w-default);
  margin-inline: auto;
  padding: var(--sp-10) var(--sp-6) var(--sp-16);
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.panel-inner--narrow { max-width: var(--w-narrow); }

.panel-header { display: flex; flex-direction: column; gap: var(--sp-3); }
.section-tag {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.tag--teal { color: var(--teal); }
.tag--blue { color: var(--blue); }
.tag--navy { color: var(--navy); }
[data-theme="dark"] .tag--navy { color: #7ab0e8; }
.panel-title { font-size: var(--text-xl); font-weight: 700; color: var(--navy); }
[data-theme="dark"] .panel-title { color: var(--text); }
.panel-sub { font-size: var(--text-base); color: var(--text-muted); max-width: 54ch; }

/* ── TOOL CARDS ── */
.tool-card {
  background: var(--surface);
  border: 1.5px solid var(--divider);
  border-radius: var(--radius-xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
@media(max-width:480px){.tool-card{padding:var(--sp-6) var(--sp-5);}}
.tool-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.tool-card__title { font-size: var(--text-lg); font-weight: 700; color: var(--navy); }
[data-theme="dark"] .tool-card__title { color: var(--text); }
.tool-card__desc { font-size: var(--text-sm); color: var(--text-muted); }

/* ── BREATHING ── */
.breath-tabs{display:flex;gap:var(--sp-2);flex-wrap:wrap;}
.breath-tab{
  padding:var(--sp-2) var(--sp-4);
  border-radius:var(--radius-full);
  border:1.5px solid var(--divider);
  font-size:var(--text-xs);font-weight:600;
  color:var(--text-muted);background:var(--surface-2);
  transition:all var(--ease);
}
.breath-tab.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.breath-tab:hover:not(.active){border-color:var(--blue);color:var(--blue);}

.breath-viz{display:flex;justify-content:center;align-items:center;padding-block:var(--sp-6);}
.breath-ring-wrap{position:relative;width:180px;height:180px;display:flex;align-items:center;justify-content:center;}
.breath-ring{
  position:absolute;inset:0;border-radius:50%;
  background:var(--grad-soft);
  box-shadow:0 0 0 3px var(--teal),var(--shadow-md);
  transition:transform 4s ease-in-out,box-shadow .5s ease;
  transform:scale(1);
}
.breath-ring.expanding{transform:scale(1.28);box-shadow:0 0 0 4px var(--blue),0 0 30px rgba(26,111,216,.25);}
.breath-ring.holding  {transform:scale(1.28);box-shadow:0 0 0 4px var(--teal),0 0 30px rgba(0,191,174,.25);}
.breath-ring.shrinking{transform:scale(1);box-shadow:0 0 0 3px var(--teal),var(--shadow-md);}
.breath-ring.holding-empty{transform:scale(1);}
.breath-inner-ring{position:absolute;width:80px;height:80px;border-radius:50%;background:var(--surface);box-shadow:var(--shadow-sm);z-index:1;}
.breath-center-text{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;gap:2px;}
.breath-phase{font-family:var(--font-display);font-size:var(--text-xs);font-weight:700;color:var(--navy);letter-spacing:.06em;text-transform:uppercase;}
[data-theme="dark"] .breath-phase{color:var(--text);}
.breath-count{font-size:var(--text-lg);font-weight:700;color:var(--blue);line-height:1;}
.breath-controls{display:flex;gap:var(--sp-3);align-items:center;}
.tool-hint{font-size:var(--text-xs);color:var(--text-faint);font-style:italic;line-height:1.5;}

/* ── GROUNDING ── */
.grounding-steps{display:flex;flex-direction:column;gap:var(--sp-3);}
.ground-step{
  display:flex;align-items:flex-start;gap:var(--sp-4);
  padding:var(--sp-5);border-radius:var(--radius-md);
  border:1.5px solid var(--divider);background:var(--surface-2);
  opacity:.3;
  transition:opacity var(--ease),background var(--ease),border-color var(--ease);
}
.ground-step.active{opacity:1;background:var(--surface);border-color:var(--teal);box-shadow:var(--shadow-sm);}
.ground-step__num{
  font-family:var(--font-display);font-size:var(--text-xl);font-weight:800;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;line-height:1;min-width:32px;flex-shrink:0;
}
.ground-step__sense{display:block;font-family:var(--font-display);font-size:var(--text-xs);font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--teal);margin-bottom:var(--sp-2);}
.ground-step p{font-size:var(--text-sm);color:var(--text-muted);}
.ground-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);}
.ground-progress{font-size:var(--text-xs);color:var(--text-faint);font-weight:500;}

/* ── SOUND ── */
.sound-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-3);}
@media(min-width:480px){.sound-grid{grid-template-columns:repeat(4,1fr);}}
.sound-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-2);padding:var(--sp-5) var(--sp-4);
  border-radius:var(--radius-md);border:1.5px solid var(--divider);
  background:var(--surface-2);font-size:var(--text-sm);font-weight:500;
  color:var(--text-muted);min-height:88px;
  transition:all var(--ease);
}
.sound-btn:hover{border-color:var(--teal);background:var(--teal-light);color:var(--teal);}
.sound-btn.playing{border-color:var(--blue);background:var(--blue-light);color:var(--blue);}
.sound-btn__icon{font-size:1.5rem;}
.sound-note{font-size:var(--text-xs);color:var(--text-faint);}
.sound-note code{font-family:monospace;background:var(--surface-2);padding:1px 4px;border-radius:3px;}

/* ── REFLECT CARD ── */
.reflect-card{
  background:var(--surface);border:1.5px solid var(--divider);
  border-radius:var(--radius-xl);padding:var(--sp-8);box-shadow:var(--shadow-md);
}
@media(max-width:480px){.reflect-card{padding:var(--sp-6) var(--sp-5);}}
.reflect-intro{
  padding:var(--sp-4) var(--sp-5);background:var(--grad-soft);
  border-radius:var(--radius-md);border-left:3px solid var(--teal);
  font-size:var(--text-sm);color:var(--text-muted);line-height:1.6;
  margin-bottom:var(--sp-5);
}
.reflect-form{display:flex;flex-direction:column;gap:var(--sp-5);}
.form-row{display:grid;gap:var(--sp-4);}
.form-row--2{grid-template-columns:1fr 1fr;}
@media(max-width:500px){.form-row--2{grid-template-columns:1fr;}}
.form-group{display:flex;flex-direction:column;gap:var(--sp-2);}
.form-label{font-size:var(--text-sm);font-weight:600;color:var(--navy);letter-spacing:.01em;}
[data-theme="dark"] .form-label{color:var(--text);}
.form-label__opt{font-weight:400;color:var(--text-faint);}
.select-wrap{position:relative;}
.form-select,.form-input,.form-textarea{
  width:100%;padding:var(--sp-4) var(--sp-5);
  background:var(--surface-2);border:1.5px solid var(--border);
  border-radius:var(--radius-md);font-size:var(--text-base);
  color:var(--text);appearance:none;
  transition:border-color var(--ease),box-shadow var(--ease);line-height:1.5;
}
.form-select:focus,.form-input:focus,.form-textarea:focus{
  outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,111,216,.12);
}
.form-select{padding-right:var(--sp-10);cursor:pointer;}
.select-arrow{position:absolute;right:var(--sp-4);top:50%;transform:translateY(-50%);pointer-events:none;color:var(--text-muted);font-size:.85rem;}
.form-textarea{resize:vertical;min-height:150px;}
.char-count{font-size:var(--text-xs);color:var(--text-faint);align-self:flex-end;}
.form-check{display:flex;align-items:flex-start;gap:var(--sp-3);cursor:pointer;}
.form-check input[type="checkbox"]{position:absolute;opacity:0;width:0;height:0;}
.form-check__box{
  width:22px;height:22px;flex-shrink:0;
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface-2);display:flex;align-items:center;justify-content:center;
  margin-top:1px;transition:border-color var(--ease),background var(--ease);
}
.form-check input:checked+.form-check__box{background:var(--blue);border-color:var(--blue);}
.form-check input:checked+.form-check__box::after{
  content:'';display:block;width:5px;height:9px;
  border:2px solid #fff;border-top:none;border-left:none;
  transform:rotate(45deg) translate(-1px,-1px);
}
.form-check__label{font-size:var(--text-sm);color:var(--text-muted);line-height:1.5;}
.form-actions{display:flex;justify-content:center;margin-top:var(--sp-2);}
.reflect-thanks{
  text-align:center;padding:var(--sp-10) var(--sp-8);
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-5);
}
.reflect-thanks h3{font-size:var(--text-lg);font-weight:700;color:var(--navy);}
[data-theme="dark"] .reflect-thanks h3{color:var(--text);}
.reflect-thanks p{font-size:var(--text-base);color:var(--text-muted);max-width:42ch;}
.config-notice{
  font-size:var(--text-xs);color:var(--text-faint);
  padding:var(--sp-3) var(--sp-4);background:var(--surface-2);
  border-radius:var(--radius-sm);border:1px dashed var(--divider);margin-top:var(--sp-4);
}
.config-notice code{font-family:monospace;color:var(--blue);}

/* Connect filter styles moved to cn- block below */

/* ── LETTERS GRID ── */
.letters-grid{display:grid;grid-template-columns:1fr;gap:var(--sp-5);}
@media(min-width:480px){.letters-grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-5);}}

/* letter-card styles moved to cn- block below */

/* Skeletons */
.letters-loading{display:contents;}
.skeleton-card{
  background:var(--surface);border:1.5px solid var(--divider);
  border-radius:var(--radius-lg);padding:var(--sp-6);min-height:180px;
  position:relative;overflow:hidden;
}
.skeleton-card::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);
  animation:shimmer 1.4s infinite;
}
[data-theme="dark"] .skeleton-card::after{
  background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.07) 50%,transparent 100%);
}
@keyframes shimmer{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}
/* letters-empty/error replaced by cn-empty in cn- block below */

/* ── MODAL ── */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(13,27,62,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  z-index:100;display:flex;align-items:center;justify-content:center;
  padding:var(--sp-5);animation:fadeIn .2s ease;
}
.modal-backdrop[hidden]{display:none;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal{
  background:var(--surface);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);
  max-width:600px;width:100%;max-height:88vh;overflow-y:auto;
  position:relative;animation:slideUp .25s cubic-bezier(.16,1,.3,1);
}
@keyframes slideUp{from{opacity:0;transform:translateY(20px) scale(.97);}to{opacity:1;transform:translateY(0) scale(1);}}
.modal-close{
  position:sticky;top:var(--sp-4);float:right;
  margin:var(--sp-4) var(--sp-4) calc(-1 * var(--sp-4)) auto;
  width:40px;height:40px;border-radius:var(--radius-full);
  border:1.5px solid var(--divider);background:var(--surface);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);box-shadow:var(--shadow-sm);
  transition:all var(--ease);z-index:2;
}
.modal-close:hover{background:var(--surface-2);color:var(--text);}
.modal-content{padding:var(--sp-8) var(--sp-8) var(--sp-10);}
@media(max-width:480px){.modal-content{padding:var(--sp-6) var(--sp-5) var(--sp-8);}}
.modal-category{display:block;font-family:var(--font-display);font-size:var(--text-xs);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:var(--sp-3);}
.modal-title{font-size:var(--text-xl);font-weight:700;color:var(--navy);line-height:1.2;margin-bottom:var(--sp-3);}
[data-theme="dark"] .modal-title{color:var(--text);}
.modal-meta{font-size:var(--text-xs);color:var(--text-faint);display:flex;gap:var(--sp-3);flex-wrap:wrap;}
.modal-meta span{padding:2px var(--sp-3);background:var(--blue-light);color:var(--blue);border-radius:var(--radius-full);font-weight:600;}
.modal-divider{height:1.5px;background:linear-gradient(90deg,var(--blue) 0%,var(--teal) 100%);border-radius:var(--radius-full);margin-block:var(--sp-5);opacity:.35;}
.modal-letter{font-size:var(--text-base);color:var(--text);line-height:1.9;white-space:pre-wrap;}

/* ── FOOTER ── */
/* ── Persistent bottom nav ── */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: flex;
  background: #fff;
  border-top: 1px solid var(--divider);
  box-shadow: 0 -4px 20px rgba(13,27,62,.08);
  z-index: 200;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-nav[hidden] { display: none !important; }
.bottom-nav__btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: var(--sp-3) var(--sp-2) var(--sp-2);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-faint);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: color var(--ease), background var(--ease);
}
.bottom-nav__btn:hover { color: var(--blue); }
.bottom-nav__btn.active { color: var(--blue); }
.bottom-nav__btn--home.active { color: var(--navy); }
/* Color-coded active states per section */
.bottom-nav__btn[data-tab="regulate"].active { color: var(--teal); }
.bottom-nav__btn[data-tab="reflect"].active  { color: var(--blue); }
.bottom-nav__btn[data-tab="connect"].active  { color: var(--navy); }
.bottom-nav__icon {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
}
.bottom-nav__icon svg { width: 22px; height: 22px; }
.bottom-nav__label { line-height: 1; }
/* Push panel container up so content isn’t hidden behind nav */


.site-footer{
  background:var(--navy);
  padding:var(--sp-6) var(--sp-6);
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
}
.footer-legal{
  font-size:var(--text-xs);
  color:rgba(255,255,255,.45);
  margin-inline:auto;
  line-height:1.5;
  white-space:nowrap;
}
.footer-crisis{
  font-size:var(--text-xs);
  color:rgba(255,255,255,.45);
  margin-inline:auto;
  line-height:1.5;
  white-space:nowrap;
}
@media(max-width:420px){
  .footer-legal, .footer-crisis{ white-space:normal; }
}
.footer-legal strong, .footer-crisis strong{color:rgba(255,255,255,.7);}
.footer-copy{
  font-size:var(--text-xs);
  color:rgba(255,255,255,.25);
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--sp-2);
  align-items:center;
}
.footer-site-link{color:rgba(255,255,255,.4);text-decoration:none;transition:color .18s;}
.footer-site-link:hover{color:rgba(255,255,255,.75);}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  padding:var(--sp-4) var(--sp-6);border-radius:var(--radius-full);
  font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;
  letter-spacing:.03em;text-decoration:none;border:none;
  transition:all var(--ease);min-height:48px;white-space:nowrap;
}
.btn--primary{background:var(--blue);color:#fff;box-shadow:0 2px 12px rgba(26,111,216,.3);}
.btn--primary:hover{background:#1560be;box-shadow:0 4px 20px rgba(26,111,216,.4);transform:translateY(-1px);}
.btn--gradient{background:var(--grad);box-shadow:0 4px 20px rgba(26,111,216,.3);}
.btn--gradient:hover{box-shadow:0 6px 28px rgba(26,111,216,.45);transform:translateY(-2px);}
.btn--ghost{background:transparent;color:var(--text-muted);border:1.5px solid var(--divider);}
.btn--ghost:hover{border-color:var(--blue);color:var(--blue);}
.btn--lg{padding:var(--sp-5) var(--sp-8);font-size:var(--text-base);min-height:56px;}
.btn--sm{padding:var(--sp-2) var(--sp-4);font-size:var(--text-xs);min-height:36px;}
.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ── THEME TOGGLE ── */
.theme-toggle{
  position:fixed;bottom:var(--sp-6);right:var(--sp-6);
  width:44px;height:44px;border-radius:var(--radius-full);
  background:var(--surface);border:1.5px solid var(--divider);
  box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);z-index:50;transition:all var(--ease);
}
.theme-toggle:hover{border-color:var(--blue);color:var(--blue);}

/* ── UTILITY ── */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ══════════════════════════════════════════
   REFLECT — MULTI-STEP FORM
══════════════════════════════════════════ */

/* Progress bar */
.rf-progress {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface);
  border: 1.5px solid var(--divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.rf-progress__bar {
  height: 4px;
  background: var(--divider);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.rf-progress__fill {
  height: 100%;
  background: var(--grad);
  border-radius: var(--radius-full);
  transition: width 400ms cubic-bezier(.16,1,.3,1);
}
.rf-progress__steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.rf-step-dot {
  width: 28px; height: 28px;
  border-radius: var(--radius-full);
  border: 2px solid var(--divider);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-xs); font-weight: 700;
  color: var(--text-faint);
  transition: all var(--ease);
}
.rf-step-dot--active {
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: 0 0 0 3px rgba(26,111,216,.2);
}
.rf-step-dot--done {
  background: var(--teal); border-color: var(--teal); color: #fff;
}
.rf-progress__label {
  font-size: var(--text-xs); font-weight: 600;
  color: var(--text-muted); letter-spacing: .04em;
  text-align: center;
}

/* Step panels */
.rf-step-panel { display: flex; flex-direction: column; gap: var(--sp-6); }
.rf-step-panel[hidden] { display: none; }

/* Environment cards grid */
.env-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}
@media (max-width: 420px) { .env-grid { grid-template-columns: 1fr; } }

.env-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-5);
  background: var(--surface);
  border: 2px solid var(--divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: left;
  cursor: pointer;
  transition: all var(--ease);
  min-height: 110px;
}
.env-card:hover { border-color: var(--blue); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.env-card.selected { border-color: var(--blue); background: var(--blue-light); box-shadow: 0 0 0 3px rgba(26,111,216,.15); }
.env-card__icon { font-size: 1.6rem; line-height: 1; }
.env-card__label {
  font-family: var(--font-display); font-size: var(--text-sm);
  font-weight: 700; color: var(--navy); line-height: 1.25;
}
[data-theme="dark"] .env-card__label { color: var(--text); }
.env-card.selected .env-card__label { color: var(--blue); }
.env-card__sub { font-size: var(--text-xs); color: var(--text-faint); line-height: 1.4; }

/* General topic grid */
.topic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-2);
}
@media (min-width: 540px) { .topic-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 380px) { .topic-grid { grid-template-columns: 1fr 1fr; } }

.topic-grid--sm { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 540px) { .topic-grid--sm { grid-template-columns: repeat(3, 1fr); } }

.topic-chip {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--divider);
  background: var(--surface);
  font-size: var(--text-sm); font-weight: 500;
  color: var(--text-muted); text-align: center;
  cursor: pointer;
  transition: all var(--ease);
  line-height: 1.3;
}
.topic-chip:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.topic-chip.selected {
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: 0 2px 8px rgba(26,111,216,.25);
}

/* Optional badge */
.optional-badge {
  font-size: var(--text-xs); font-weight: 600;
  color: var(--text-faint); letter-spacing: .06em;
  text-transform: uppercase; vertical-align: middle;
  padding: 2px 8px; background: var(--surface-2);
  border: 1px solid var(--divider); border-radius: var(--radius-full);
  margin-left: var(--sp-2);
}

/* Skip / back rows */
.rf-skip-row {
  display: flex; justify-content: center;
  padding-top: var(--sp-2);
}
.rf-back-row {
  display: flex; align-items: center;
  padding-top: var(--sp-2);
}

/* Prompt box */
.rf-prompt-box {
  padding: var(--sp-5) var(--sp-6);
  background: var(--grad-soft);
  border: 1.5px solid var(--blue);
  border-left-width: 4px;
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.rf-prompt-label {
  font-family: var(--font-display); font-size: var(--text-xs);
  font-weight: 700; letter-spacing: .16em;
  color: var(--blue);
}
.rf-prompt-text {
  font-size: var(--text-base); color: var(--navy);
  font-weight: 500; line-height: 1.6;
  max-width: none;
}
[data-theme="dark"] .rf-prompt-text { color: var(--text); }

/* Tags preview (step 5) */
.rf-tags-preview {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--divider);
  margin-bottom: var(--sp-4);
}
.rf-tag-pill {
  padding: 3px var(--sp-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 600;
  background: var(--blue-light); color: var(--blue);
  border: 1px solid rgba(26,111,216,.2);
}
.rf-tag-pill--env  { background: var(--teal-light); color: var(--teal); border-color: rgba(0,191,174,.2); }
.rf-tag-pill--spec { background: var(--surface-2); color: var(--text-muted); border-color: var(--divider); }

/* Thank you state */
.reflect-thanks {
  text-align: center; padding: var(--sp-12) var(--sp-6);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-5);
}
.reflect-thanks h3 { font-size: var(--text-lg); font-weight: 700; color: var(--navy); }
[data-theme="dark"] .reflect-thanks h3 { color: var(--text); }
.reflect-thanks p { font-size: var(--text-base); color: var(--text-muted); max-width: 42ch; }

/* ══════════════════════════════════════════════════
   CONNECT PANEL — matches Reflect card aesthetic
══════════════════════════════════════════════════ */

/* Filter card — mirrors rf-progress container */
.cn-filter-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface);
  border: 1.5px solid var(--divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.cn-filter-section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.cn-filter-heading {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cn-filter-heading svg {
  flex-shrink: 0;
  opacity: .55;
}

.cn-filter-divider {
  height: 1px;
  background: var(--divider);
  margin: 0 calc(-1 * var(--sp-2));
}

/* cn-env-tabs — scrollable environment tab strip */
.cn-env-tabs {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-4);
  border-bottom: 1.5px solid var(--divider);
}
.cn-env-tabs::-webkit-scrollbar { display: none; }
.cn-env-tab {
  flex-shrink: 0;
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--ease);
}
.cn-env-tab:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.cn-env-tab--active,
.cn-env-tab[aria-selected="true"] {
  background: var(--grad);
  border-color: transparent;
  color: #fff;
  font-weight: 600;
}

/* cn-chip — same feel as topic-chip but slightly smaller */
.cn-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.cn-chip-row[hidden] { display: none; }

.cn-chip {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--divider);
  background: var(--surface-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--ease);
  white-space: nowrap;
  line-height: 1.3;
}
.cn-chip:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-light);
}
.cn-chip--active,
.cn-chip[aria-checked="true"] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  box-shadow: 0 2px 8px rgba(26,111,216,.22);
}

/* Results row */
.cn-results-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 0 var(--sp-1);
}
.cn-results-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--text-faint);
  text-transform: uppercase;
}

/* Letter cards — elevated to match env-card quality */
.letter-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: 2rem 2rem 1.75rem;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.04);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
  position: relative;
  overflow: hidden;
  /* Subtle ruled paper lines */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 27px,
    rgba(26,111,216,.05) 27px,
    rgba(26,111,216,.05) 28px
  );
  background-size: 100% 28px;
  background-position: 0 72px;
  min-height: 200px;
}
[data-theme="dark"] .letter-card {
  background-color: #1a2235;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 27px,
    rgba(255,255,255,.04) 27px,
    rgba(255,255,255,.04) 28px
  );
  border-color: rgba(255,255,255,.08);
}
.letter-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad);
  opacity: 0;
  transition: opacity var(--ease);
  border-radius: 12px 12px 0 0;
}
.letter-card:hover,
.letter-card:focus-visible {
  border-color: rgba(26,111,216,.25);
  box-shadow: 0 6px 24px rgba(26,111,216,.1), 0 2px 6px rgba(0,0,0,.06);
  transform: translateY(-3px);
}
.letter-card:hover::before,
.letter-card:focus-visible::before {
  opacity: 1;
}

.letter-card__cat {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
}

.letter-card__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  flex: 1;
}
[data-theme="dark"] .letter-card__title { color: var(--text); }

.letter-card__preview { display: none; }

.letter-card__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  font-size: var(--text-xs);
  color: var(--text-faint);
}
.letter-card__role-tag {
  padding: 3px var(--sp-3);
  background: var(--blue-light);
  color: var(--blue);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.letter-card__read {
  margin-left: auto;
  font-weight: 700;
  color: var(--blue);
  font-size: var(--text-xs);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}
.letter-card__read::after {
  content: '→';
}

/* Empty / error state */
.cn-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-12) var(--sp-6);
  text-align: center;
}
.cn-empty__icon {
  font-size: 2rem;
  opacity: .4;
}
.cn-empty__text {
  font-size: var(--text-base);
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 36ch;
}

/* ══════════════════════════════════════════════════
   CONNECT — LETTER DISPLAY VIEW
══════════════════════════════════════════════════ */

/* View containers */
.cn-view { display: flex; flex-direction: column; gap: var(--sp-7); }
.cn-view[hidden] { display: none; }

/* ── Above-card area ── */
.cn-letter-above {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* Meta pills row */
.cn-letter-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.cn-meta-pill {
  padding: 3px var(--sp-4);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  background: var(--blue-light);
  color: var(--blue);
  border: 1px solid rgba(26,111,216,.18);
}
.cn-meta-pill:first-child {
  background: var(--teal-light);
  color: var(--teal);
  border-color: rgba(0,191,174,.18);
}

/* ── Paper card ── */
.cn-paper {
  position: relative;
  background: #fffef9;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 4px 4px 6px 6px;
  box-shadow:
    0 2px 6px rgba(0,0,0,.06),
    0 8px 32px rgba(0,0,0,.08),
    0 1px 0 rgba(255,255,255,.9) inset;
  padding: var(--sp-8) var(--sp-8) var(--sp-10);
  margin-bottom: var(--sp-6);
  /* Subtle ruled-line background */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 27px,
    rgba(26,111,216,.06) 27px,
    rgba(26,111,216,.06) 28px
  );
  background-size: 100% 28px;
  background-position: 0 52px;
}
[data-theme="dark"] .cn-paper {
  background-color: #1a2235;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 27px,
    rgba(255,255,255,.04) 27px,
    rgba(255,255,255,.04) 28px
  );
  border-color: rgba(255,255,255,.08);
}

/* Envelope flap at top — folded triangle */
.cn-paper__flap {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 0;
  border-left: 50vw solid transparent;
  border-right: 50vw solid transparent;
  border-top: 18px solid rgba(26,111,216,.10);
  border-radius: 4px 4px 0 0;
  pointer-events: none;
}

/* Postmark stamp — top right corner */
.cn-paper__stamp {
  position: absolute;
  top: var(--sp-4);
  right: var(--sp-5);
  width: 48px;
  height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.cn-stamp-ring {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  border: 1.5px solid transparent;
  background:
    linear-gradient(#fffef9, #fffef9) padding-box,
    linear-gradient(135deg, #1a6fd8, #00bfae) border-box;
  opacity: .55;
}
[data-theme="dark"] .cn-stamp-ring {
  background:
    linear-gradient(#1a2235, #1a2235) padding-box,
    linear-gradient(135deg, #1a6fd8, #00bfae) border-box;
}
.cn-stamp-text {
  position: relative;
  font-family: var(--font-display);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: center;
  line-height: 1.3;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Dear Reader greeting */
.cn-paper__greeting {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: var(--text-base);
  font-style: italic;
  color: var(--navy);
  margin-bottom: var(--sp-5);
  margin-top: var(--sp-2);
  padding-right: 56px; /* clear stamp */
}
[data-theme="dark"] .cn-paper__greeting { color: var(--text); }

/* Letter body */
.cn-paper__body {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 1.02rem;
  line-height: 1.95;
  color: #1a1a2e;
  white-space: pre-wrap;
  margin-bottom: var(--sp-7);
}
[data-theme="dark"] .cn-paper__body { color: var(--text); }

/* Closing */
.cn-paper__closing {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.7;
}
.cn-paper__sig {
  display: block;
  font-size: var(--text-base);
  font-style: italic;
  color: var(--navy);
  margin-top: 2px;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Resonate section */
.cn-resonate {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-6);
  background: var(--surface);
  border: 1.5px solid var(--divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.cn-resonate__label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .06em;
  text-align: center;
}
.cn-resonate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}

/* Find card (step 4 — before reveal) */
.cn-find-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-8) var(--sp-6);
  background: var(--grad-soft);
  border: 1.5px solid var(--blue);
  border-radius: var(--radius-lg);
  text-align: center;
}
.cn-find-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
}

/* Loading ring */
.cn-loading-ring {
  width: 48px; height: 48px;
  border: 3px solid var(--divider);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: cnSpin .8s linear infinite;
}
@keyframes cnSpin { to { transform: rotate(360deg); } }

/* btn--outline variant (used for primary actions after reading) */
.btn--outline {
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-full);
  border: 2px solid var(--blue);
  background: transparent;
  color: var(--blue);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
  transition: all var(--ease);
}
.btn--outline:hover {
  background: var(--blue);
  color: #fff;
}

/* ══════════════════════════════════════════════════
   REGULATE PANEL
══════════════════════════════════════════════════ */

/* View containers */
.rg-view { display: flex; flex-direction: column; gap: var(--sp-6); }
.rg-view[hidden] { display: none; }

/* ── Disclaimer ── */
.rg-disclaimer-card {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-6);
  background: var(--surface);
  border: 1.5px solid var(--divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.rg-disclaimer-title {
  font-family: var(--font-display); font-size: var(--text-sm);
  font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--teal);
}
.rg-disclaimer-text {
  font-size: var(--text-sm); color: var(--text-muted);
  line-height: 1.7;
}
.rg-disclaimer-sub {
  font-size: var(--text-xs); color: var(--text-faint);
  font-style: italic; line-height: 1.6;
  border-top: 1px solid var(--divider); padding-top: var(--sp-4);
}

/* ── Home: categories ── */
.rg-category { display: flex; flex-direction: column; gap: var(--sp-4); }
.rg-category__label {
  display: flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-size: var(--text-xs);
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted);
}
.rg-category__label svg { opacity: .5; flex-shrink: 0; }

.rg-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
@media (min-width: 480px) { .rg-tool-grid { grid-template-columns: repeat(3, 1fr); } }

.rg-tool-card {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-2); padding: var(--sp-5) var(--sp-3);
  background: var(--surface); border: 1.5px solid var(--divider);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  text-align: center; cursor: pointer;
  transition: all var(--ease);
}
.rg-tool-card:hover { border-color: var(--teal); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.rg-tool-card__icon {
  font-size: 1.8rem; line-height: 1;
  color: var(--teal); display: block;
}
.rg-tool-card__name {
  font-family: var(--font-display); font-size: var(--text-sm);
  font-weight: 700; color: var(--navy); line-height: 1.2;
}
[data-theme="dark"] .rg-tool-card__name { color: var(--text); }
.rg-tool-card__time {
  font-size: var(--text-xs); color: var(--text-faint); font-weight: 500;
}
.rg-tool-card__why {
  font-size: var(--text-xs);
  color: var(--teal);
  font-weight: 500;
  line-height: 1.3;
  margin-top: var(--sp-1);
}

/* ── Setup screen ── */
.rg-setup-body { display: flex; flex-direction: column; gap: var(--sp-5); }

/* Sound toggle row */
.rg-sound-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--divider);
}
.rg-sound-row__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--navy);
}
.rg-sound-row__toggle {
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 700;
  border: 2px solid var(--divider);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  transition: all .15s;
}
.rg-sound-row__toggle.on {
  background: var(--teal);
  border-color: var(--teal);
  color: #fff;
}

/* Option selected state */
.rg-option-btn.selected {
  border-color: var(--teal);
  background: rgba(0,191,174,.08);
}

/* Begin button */
.rg-begin-btn {
  width: 100%;
  margin-top: var(--sp-2);
}

.rg-setup-header { display: flex; flex-direction: column; gap: var(--sp-3); }
.rg-setup-header h2 { font-size: var(--text-xl); font-weight: 700; color: var(--navy); }
[data-theme="dark"] .rg-setup-header h2 { color: var(--text); }
.rg-setup-header p { font-size: var(--text-sm); color: var(--text-muted); }

.rg-option-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
}
.rg-option-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-2); padding: var(--sp-6) var(--sp-3);
  background: var(--surface); border: 2px solid var(--divider);
  border-radius: var(--radius-lg); font-family: var(--font-display);
  cursor: pointer; transition: all var(--ease);
}
.rg-option-btn:hover { border-color: var(--teal); box-shadow: var(--shadow-md); }
.rg-option-btn__val {
  font-size: var(--text-2xl); font-weight: 800; color: var(--navy);
}
[data-theme="dark"] .rg-option-btn__val { color: var(--text); }
.rg-option-btn__unit {
  font-size: var(--text-xs); font-weight: 600;
  color: var(--text-faint); letter-spacing: .06em; text-transform: uppercase;
}

/* ── Active tool: top bar ── */
.rg-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--divider);
}
.rg-exit-btn {
  font-size: var(--text-xs); font-weight: 700; color: var(--text-faint);
  background: none; border: none; cursor: pointer;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-md);
  transition: all var(--ease);
}
.rg-exit-btn:hover { color: var(--navy); background: var(--surface-2); }
.rg-tool-label {
  font-family: var(--font-display); font-size: var(--text-xs);
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--teal);
}
.rg-sound-btn {
  background: none; border: none; cursor: pointer;
  color: var(--text-muted); padding: var(--sp-2);
  border-radius: var(--radius-md); transition: color var(--ease);
  display: flex; align-items: center;
}
.rg-sound-btn:hover { color: var(--blue); }

/* ── Progress bar (active tool) ── */
.rg-progress-wrap {
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.rg-progress-bar {
  height: 6px; background: var(--divider);
  border-radius: var(--radius-full); overflow: hidden;
}
.rg-progress-fill {
  height: 100%; background: var(--grad);
  border-radius: var(--radius-full);
  transition: width 600ms linear;
  width: 0%;
}
.rg-progress-label {
  font-size: var(--text-xs); font-weight: 600;
  color: var(--text-faint); text-align: right;
  letter-spacing: .04em;
}

/* ── Stages ── */
.rg-stage { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); }
.rg-stage[hidden] { display: none; }
.rg-round-label {
  font-size: var(--text-sm); font-weight: 600;
  color: var(--text-muted); text-align: center; letter-spacing: .04em;
}

/* ── Breathing circle ── */
.rg-breath-wrap {
  display: flex; justify-content: center; align-items: center;
  padding: var(--sp-6) 0;
}
.rg-breath-ring {
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,111,216,.10) 0%, rgba(0,191,174,.06) 100%);
  border: 4px solid var(--teal);
  display: flex; align-items: center; justify-content: center;
  transition: transform 1s linear, border-color 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  box-shadow: 0 0 0 0 rgba(26,111,216,0);
}
.rg-breath-ring.inhale  {
  border-color: var(--blue);
  box-shadow: 0 0 0 12px rgba(26,111,216,.08), 0 0 0 24px rgba(26,111,216,.04);
}
.rg-breath-ring.exhale  {
  border-color: var(--teal);
  box-shadow: 0 0 0 4px rgba(0,191,174,.06);
}
.rg-breath-ring.hold    { border-color: var(--text-faint); }
.rg-breath-text { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.rg-breath-phase {
  font-family: var(--font-display); font-size: var(--text-sm);
  font-weight: 700; color: var(--navy); letter-spacing: .10em;
  text-transform: uppercase;
}
[data-theme="dark"] .rg-breath-phase { color: var(--text); }
.rg-breath-count {
  font-family: var(--font-display); font-size: 3rem;
  font-weight: 800; color: var(--blue); line-height: 1;
}
/* Cue text below the ring */
.rg-breath-cue {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-style: italic;
  min-height: 1.5em;
  margin-top: var(--sp-2);
  transition: opacity 0.3s;
}

/* ── Sigh stage ── */
.rg-sigh-card {
  width: 100%; display: flex; flex-direction: column;
  gap: var(--sp-5); padding: var(--sp-7) var(--sp-6);
  background: var(--surface); border: 1.5px solid var(--divider);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.rg-sigh-steps { display: flex; flex-direction: column; gap: var(--sp-3); }
.rg-sigh-step {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--divider);
  background: var(--surface);
  transition: all 0.3s ease;
  opacity: 0.45;
}
.rg-sigh-step.active {
  border-color: var(--blue); background: var(--blue-light);
  opacity: 1;
}
.rg-sigh-step.done {
  border-color: var(--teal); background: var(--teal-light);
  opacity: 0.7;
}
.rg-sigh-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--grad); color: #fff;
  font-size: var(--text-xs); font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.rg-sigh-step.done .rg-sigh-num::after { content: '✓'; }
.rg-sigh-step.done .rg-sigh-num { font-size: 0; }
.rg-sigh-label {
  font-size: var(--text-base); font-weight: 600;
  color: var(--navy); line-height: 1.3;
  display: flex; flex-direction: column; gap: 2px;
}
[data-theme="dark"] .rg-sigh-label { color: var(--text); }
.rg-sigh-sub {
  font-size: var(--text-xs); font-weight: 400;
  color: var(--text-muted); font-style: italic; display: block;
}
.rg-sigh-timer {
  font-family: var(--font-display); font-size: var(--text-3xl);
  font-weight: 800; color: var(--blue); text-align: center;
  min-height: 48px; line-height: 1;
}

/* ── 5 Senses stage ── */
.rg-senses-card {
  width: 100%; display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-5); padding: var(--sp-8) var(--sp-6);
  background: var(--surface); border: 1.5px solid var(--divider);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  text-align: center;
}
/* Header row: icon + sense name + counter */
.rg-senses-header {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-3); width: 100%;
}
.rg-senses-icon {
  font-size: 2rem; line-height: 1; flex-shrink: 0;
}
.rg-senses-sense {
  font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: 800; color: var(--navy); letter-spacing: .04em;
}
[data-theme="dark"] .rg-senses-sense { color: var(--text); }
.rg-senses-counter {
  font-family: var(--font-display); font-size: var(--text-sm);
  font-weight: 700; color: var(--text-faint);
  letter-spacing: .08em; margin-left: auto;
}
/* Intro / context line */
.rg-senses-intro {
  font-size: var(--text-base); color: var(--text-muted);
  line-height: 1.6; max-width: 36ch; font-style: italic;
}
/* Single item box */
.rg-senses-item-box {
  width: 100%;
  background: linear-gradient(135deg, rgba(26,111,216,.06) 0%, rgba(0,191,174,.06) 100%);
  border: 1.5px solid rgba(26,111,216,.18);
  border-radius: var(--radius-md);
  padding: var(--sp-6) var(--sp-5);
  min-height: 72px;
  display: flex; align-items: center; justify-content: center;
}
.rg-senses-item {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 600; color: var(--navy); line-height: 1.5;
  margin: 0;
}
[data-theme="dark"] .rg-senses-item { color: var(--text); }
/* Progress dots */
.rg-senses-dots {
  display: flex; gap: var(--sp-2); justify-content: center;
}
.rg-senses-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--divider); transition: all var(--ease);
}
.rg-senses-dot.active { background: var(--blue); transform: scale(1.3); }
.rg-senses-dot.done   { background: var(--teal); }

/* ── Tapping stage ── */
.rg-tapping-card {
  width: 100%; display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-5); padding: var(--sp-8) var(--sp-6);
  background: var(--surface); border: 1.5px solid var(--divider);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  text-align: center;
}
.rg-tap-area {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  width: 100%;
}
.rg-tap-cue {
  font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700;
  color: var(--teal); letter-spacing: .12em; text-transform: uppercase;
}
.rg-tap-point {
  font-family: var(--font-display); font-size: var(--text-3xl);
  font-weight: 900; color: var(--navy);
  padding: var(--sp-4) var(--sp-8);
  border: 2px solid var(--blue);
  background: var(--blue-light);
  border-radius: var(--radius-lg); width: 100%; text-align: center;
}
[data-theme="dark"] .rg-tap-point { color: var(--blue); }
.rg-tap-dots {
  display: flex; gap: var(--sp-2); flex-wrap: wrap; justify-content: center;
}
.rg-tap-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--divider); transition: all 200ms var(--ease);
}
.rg-tap-dot.active { background: var(--blue); transform: scale(1.4); }
.rg-tap-dot.done   { background: var(--teal); }
.rg-tap-count {
  font-family: var(--font-display); font-size: var(--text-sm);
  font-weight: 700; color: var(--text-faint); letter-spacing: .06em;
}

/* ── Sound stage ── */
.rg-sound-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3);
  width: 100%;
}
.rg-sound-card {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-2); padding: var(--sp-5) var(--sp-3);
  background: var(--surface); border: 1.5px solid var(--divider);
  border-radius: var(--radius-lg); font-size: var(--text-xs);
  font-weight: 600; color: var(--text-muted);
  cursor: pointer; transition: all var(--ease);
  font-family: var(--font-display);
}
.rg-sound-card:first-child { font-size: 1.5rem; }
.rg-sound-card > :first-child { font-size: 1.6rem; line-height: 1; display: block; }
.rg-sound-card:hover { border-color: var(--teal); box-shadow: var(--shadow-md); }
.rg-sound-card.active { border-color: var(--teal); background: var(--teal-light); color: var(--teal); }

.rg-sound-player {
  width: 100%; display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-4);
  padding: var(--sp-6); background: var(--surface);
  border: 1.5px solid var(--teal); border-radius: var(--radius-lg);
}
.rg-sound-playing {
  font-family: var(--font-display); font-size: var(--text-lg);
  font-weight: 700; color: var(--navy);
}
[data-theme="dark"] .rg-sound-playing { color: var(--text); }
.rg-sound-timer {
  font-family: var(--font-display); font-size: var(--text-3xl);
  font-weight: 800; color: var(--teal); letter-spacing: .04em;
}
.rg-volume-row {
  display: flex; align-items: center; gap: var(--sp-3);
  width: 100%; color: var(--text-faint);
}
.rg-volume-slider {
  flex: 1; accent-color: var(--teal);
  height: 4px; cursor: pointer;
}
.rg-sound-stop-btn {
  padding: var(--sp-3) var(--sp-6);
  border: 1.5px solid var(--divider); border-radius: var(--radius-full);
  background: var(--surface-2); font-family: var(--font-display);
  font-size: var(--text-sm); font-weight: 600; color: var(--text-muted);
  cursor: pointer; transition: all var(--ease);
}
.rg-sound-stop-btn:hover { border-color: var(--teal); color: var(--teal); }

/* ── Bottom controls ── */
.rg-controls {
  display: flex; gap: var(--sp-3); justify-content: center;
  padding-top: var(--sp-2);
}

/* ── Completion ── */
.rg-complete-card {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-5); padding: var(--sp-10) var(--sp-6);
  text-align: center;
}
.rg-complete-icon { line-height: 1; }
.rg-complete-title {
  font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: 800; color: var(--navy);
}
[data-theme="dark"] .rg-complete-title { color: var(--text); }
.rg-complete-sub {
  font-size: var(--text-base); color: var(--text-muted);
  line-height: 1.7; max-width: 34ch;
}
.rg-complete-actions {
  display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center;
}
.rg-complete-links {
  display: flex; gap: var(--sp-3); flex-wrap: wrap; justify-content: center;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--divider); width: 100%;
}
.rg-complete-legal {
  font-size: var(--text-xs); color: var(--text-faint);
  line-height: 1.6; max-width: 42ch; font-style: italic;
}

/* ═══════════════════════════════════════════════════
   REFLECT — NEW TOPIC-FIRST STYLES
═══════════════════════════════════════════════════ */

/* Other free-text wrapper */
/* ── Reflect category cards ── */
.rf-category-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.rf-cat-card {
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .12s;
  font-family: var(--font-sans);
}

.rf-cat-card:hover {
  border-color: var(--blue);
  background: rgba(26,111,216,.04);
  transform: translateY(-1px);
}

.rf-cat-card.selected {
  border-color: var(--blue);
  background: rgba(26,111,216,.07);
}

.rf-cat-label {
  display: block;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
}

/* ── */
.rf-other-wrap {
  display: flex; flex-direction: column; gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--surface-2); border-radius: var(--radius-md);
  border: 1px solid var(--divider);
}
.rf-other-wrap .form-input {
  margin: 0;
}
.rf-other-wrap .btn {
  align-self: flex-end;
}

/* Optional environment section inside write step */
.rf-env-opt {
  margin-bottom: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface-2); border-radius: var(--radius-md);
  border: 1px solid var(--divider);
}
.rf-env-opt__label {
  font-family: var(--font-display); font-size: var(--text-sm);
  font-weight: 700; color: var(--navy); letter-spacing: .04em;
  text-transform: uppercase; margin-bottom: var(--sp-1);
}
[data-theme="dark"] .rf-env-opt__label { color: var(--text); }
.rf-env-opt__hint {
  font-size: var(--text-xs); font-weight: 400; color: var(--text-faint);
  text-transform: none; letter-spacing: 0;
}
.rf-env-opt__sub {
  font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--sp-3);
}

/* Compact chip grid for env inside write step */
.topic-grid--compact {
  gap: var(--sp-2);
}
.topic-grid--compact .topic-chip {
  font-size: var(--text-xs); padding: var(--sp-1) var(--sp-3);
}

/* ═══════════════════════════════════════════════════
   CONNECT — NEW HOME + STATS + IDENTITY GRID
═══════════════════════════════════════════════════ */

/* Stats card */
.cn-stats-card {
  background: var(--surface); border-radius: var(--radius-lg);
  border: 1px solid var(--divider); box-shadow: var(--shadow-sm);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-6);
}
.cn-stat-total-row {
  display: flex; align-items: baseline; gap: var(--sp-2);
  margin-bottom: var(--sp-4); padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--divider);
}
.cn-stat-number {
  font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: 800; background: var(--grad); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1;
}
.cn-stat-desc {
  font-size: var(--text-sm); color: var(--text-muted);
}
.cn-stats-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
}
.cn-stats-col__label {
  font-family: var(--font-display); font-size: var(--text-xs);
  font-weight: 700; color: var(--text-faint); text-transform: uppercase;
  letter-spacing: .06em; margin-bottom: var(--sp-2);
}
.cn-stats-list {
  list-style: none; display: flex; flex-direction: column; gap: var(--sp-1);
}
.cn-stats-list li {
  display: flex; align-items: center; gap: var(--sp-2);
}
.cn-stat-label {
  font-size: var(--text-sm); color: var(--text);
}
.cn-stat-count {
  font-size: var(--text-xs); color: var(--text-faint);
}

/* Connect home CTAs */
.cn-home-actions {
  display: flex; flex-direction: column; gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.cn-home-cta {
  display: flex; align-items: center; gap: var(--sp-4);
  width: 100%; padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-lg); text-align: left;
  transition: all var(--ease);
}
.cn-home-cta--outline {
  background: var(--surface); border: 1.5px solid var(--divider);
  color: var(--navy);
}
[data-theme="dark"] .cn-home-cta--outline { color: var(--text); border-color: var(--border); }
.cn-home-cta--outline:hover {
  border-color: var(--blue); box-shadow: var(--shadow-sm);
}
.cn-home-cta__icon {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.18);
}
.cn-home-cta--outline .cn-home-cta__icon {
  background: var(--surface-2);
  color: var(--blue);
}
.cn-home-cta__text {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
}
.cn-home-cta__label {
  font-family: var(--font-display); font-size: var(--text-base);
  font-weight: 700; letter-spacing: .01em;
}
.cn-home-cta__sub {
  font-size: var(--text-xs); opacity: .8;
}
.cn-home-cta--outline .cn-home-cta__sub { color: var(--text-muted); opacity: 1; }
.cn-home-cta__arrow {
  font-size: 1.4rem; font-weight: 300; flex-shrink: 0; opacity: .7;
}

/* Identity grid for Receive flow */
.cn-identity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.cn-identity-btn {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--sp-2); padding: var(--sp-4) var(--sp-2);
  background: var(--surface); border: 1.5px solid var(--divider);
  border-radius: var(--radius-lg); cursor: pointer;
  transition: all var(--ease);
}
.cn-identity-btn:hover {
  border-color: var(--blue); box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.cn-identity-btn.selected {
  border-color: var(--teal); background: var(--teal-light);
  box-shadow: 0 0 0 3px rgba(0,191,174,.15);
}
[data-theme="dark"] .cn-identity-btn.selected { background: var(--teal-light); }
.cn-id-icon {
  font-size: 1.75rem; line-height: 1;
}
.cn-id-label {
  font-family: var(--font-display); font-size: var(--text-xs);
  font-weight: 600; color: var(--text); text-align: center;
  line-height: 1.2;
}

/* Library filter rows (2 rows: Topic + Written by) */
.cn-filter-row {
  margin-bottom: var(--sp-4);
}

/* ══════════════════════════════════════════════════
   CONNECT — NEW GUIDED FLOW CSS
══════════════════════════════════════════════════ */

/* Live counter widget on Connect home */
.cn-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-6);
  background: var(--surface);
  border: 1.5px solid var(--divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.cn-counter__number {
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 5rem);
  font-weight: 800;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.cn-counter__label {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Primary CTA button on home */
.cn-find-btn {
  width: 100%;
  font-size: var(--text-base);
  padding: var(--sp-4) var(--sp-6);
}

/* Ghost browse link under primary CTA */
.cn-browse-link {
  text-align: center;
  margin: 0;
}

/* "Anyone" skip-role button */
.cn-anyone-btn {
  width: 100%;
  padding: var(--sp-4) var(--sp-5);
  background: transparent;
  border: 1.5px dashed var(--divider);
  border-radius: var(--radius-lg);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--ease);
  text-align: center;
}
.cn-anyone-btn:hover {
  border-color: var(--blue);
  color: var(--blue);
  background: var(--blue-light);
}

/* Attribution line above paper ("From a firefighter in...") */
.cn-letter-from {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}

/* Letter title inside paper */
.cn-paper__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 var(--sp-4);
  padding-right: 56px; /* clear stamp */
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.3;
}
[data-theme="dark"] .cn-paper__title {
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* After-reading action strip */
.cn-after-reading {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.cn-after-reading__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
@media (min-width: 480px) {
  .cn-after-reading__actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--sp-3);
  }
  .cn-after-reading__actions .btn {
    flex: 1 1 auto;
  }
}

/* Library letter count badge */
.cn-lib-count {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin: 0;
}

/* Library filter section wrapper */
.cn-lib-filters {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

/* Mode toggle: By Topic / By Category */
.lib-mode-toggle {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-1);
}
.lib-mode-btn {
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .02em;
  border: 2px solid var(--navy);
  background: transparent;
  color: var(--navy);
  cursor: pointer;
  transition: background .18s, color .18s;
}
.lib-mode-btn--active {
  background: var(--navy);
  color: #fff;
}
.lib-mode-btn:not(.lib-mode-btn--active):hover {
  background: rgba(13,27,62,.08);
}

/* Category grid in library */
.lib-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--sp-3);
}
.lib-cat-grid[hidden] { display: none; }

/* ══════════════════════════════════════════════════
   GLOBAL DISCLAIMER OVERLAY
══════════════════════════════════════════════════ */
.global-disclaimer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(13, 27, 62, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  animation: fadeIn .25s ease;
}
.global-disclaimer[hidden] {
  display: none;
}
.global-disclaimer__card {
  background: var(--bg);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 80px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.12);
  padding: var(--sp-10) var(--sp-8);
  max-width: 500px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  border: 1px solid var(--divider);
  overflow: hidden;
}
@media (max-width: 420px) {
  .global-disclaimer__card { padding: var(--sp-8) var(--sp-6); }
}
.global-disclaimer__card .btn {
  margin-top: var(--sp-2);
  width: 100%;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
[data-theme="dark"] .global-disclaimer__card {
  background: #0f1a2e;
  border-color: rgba(255,255,255,.1);
}

/* ══════════════════════════════════════════════════
   HOME STATS WIDGET (inline, app landing)
══════════════════════════════════════════════════ */
.home-stats {
  width: 100%;
  padding: 0;
}
.home-stats__eyebrow {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: var(--sp-5);
}
.home-stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--divider);
  border-bottom: 2px solid var(--divider);
  padding: var(--sp-5) 0;
}
.home-stats__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  padding: 0 var(--sp-4);
  border-left: 1.5px solid var(--divider);
  text-align: center;
}
.home-stats__col:first-child {
  border-left: none;
}
.home-stats__framework {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--sp-1);
}
.home-stats__framework--teal { color: var(--teal); }
.home-stats__framework--blue { color: var(--blue); }
.home-stats__framework--navy { color: var(--navy); }
[data-theme="dark"] .home-stats__framework--navy { color: #a0b4cc; }

.home-stats__number {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 800;
  line-height: 1;
  display: block;
}
.home-stats__number--teal { color: var(--teal); }
.home-stats__number--blue { color: var(--blue); }
.home-stats__number--navy { color: var(--navy); }
[data-theme="dark"] .home-stats__number--navy { color: #a0b4cc; }

.home-stats__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.3;
}

@media (max-width: 400px) {
  .home-stats__number { font-size: 1.6rem; }
  .home-stats__col { padding: 0 var(--sp-2); }
}

/* ════════════════════════════════════════════════
   NEW COMPONENT STYLES — June 2026 update
   ════════════════════════════════════════════════ */

/* ── Home support note ── */
.home-support-note {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  max-width: 34ch;
  margin: var(--sp-4) auto 0;
  line-height: 1.6;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--divider);
}

/* ── Regulate "what do you need?" ── */
.rg-need-question {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: var(--sp-4);
  text-align: center;
}
.rg-need-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.rg-need-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-3);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
  text-align: center;
}
.rg-need-card:hover, .rg-need-card:focus-visible {
  border-color: var(--teal);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.rg-need-icon {
  font-size: 1.6rem;
  line-height: 1;
}
.rg-need-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

/* ── Regulate recommendation card ── */
.rg-recommend-card {
  background: var(--grad-soft);
  border: 1.5px solid var(--teal-light);
  border-radius: var(--radius-xl);
  padding: var(--sp-8) var(--sp-6);
  text-align: center;
  margin-bottom: var(--sp-6);
}
.rg-recommend-tool-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--sp-2);
}
.rg-recommend-desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--sp-6);
  line-height: 1.6;
}
.rg-view-all-link {
  display: block;
  margin-top: var(--sp-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* ── Regulate section note ── */
.rg-section-note {
  font-size: var(--text-sm);
  color: var(--text-muted);
  background: var(--surface-2);
  border-left: 3px solid var(--teal);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: var(--sp-6);
  line-height: 1.6;
}

/* ── Regulate complete next-step ── */
.rg-complete-next-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: var(--sp-6) 0 var(--sp-3);
}
.rg-complete-next-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
}

/* ── Section note banner (Reflect / Connect) ── */
.section-note-banner {
  font-size: var(--text-sm);
  color: var(--text-muted);
  background: var(--surface-2);
  border-left: 3px solid var(--blue);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: var(--sp-5);
  line-height: 1.6;
}
.cn-section-note { border-left-color: var(--navy); }

/* ── Reflect / Connect path cards ── */
.rf-path-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.rf-path-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.rf-path-card:hover, .rf-path-card:focus-visible {
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.rf-path-icon {
  font-size: 1.3rem;
  width: 2rem;
  text-align: center;
  flex-shrink: 0;
  color: var(--blue);
}
.rf-path-label {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

/* ── Other field wrapper ── */
.rf-other-wrap {
  background: var(--surface-2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.rf-other-label {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
}
.rf-other-sublabel {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: calc(-1 * var(--sp-1));
}
.rf-privacy-hint {
  font-size: var(--text-xs);
  color: var(--text-faint);
  font-style: italic;
}
.rf-privacy-hint--form {
  margin: var(--sp-2) 0;
}

/* ── Role helper examples ── */
.rf-role-helper {
  background: var(--blue-light);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.rf-role-helper__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--blue);
  margin-bottom: var(--sp-1);
}
.rf-role-helper__examples {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.7;
}

/* ── Open path optional chips ── */
.rf-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.rf-open-chip {
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.rf-open-chip.selected, .rf-open-chip:hover {
  border-color: var(--blue);
  background: var(--blue-light);
  color: var(--blue);
}

/* ── Before-you-share screen ── */
.rf-share-reminder {
  font-size: var(--text-sm);
  color: var(--text-muted);
  background: var(--surface-2);
  border-left: 3px solid var(--blue);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: var(--sp-5);
  line-height: 1.7;
}
.rf-share-choices {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.rf-share-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--ease), box-shadow var(--ease), transform var(--ease);
}
.rf-share-card:hover, .rf-share-card:focus-visible {
  border-color: var(--blue);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.rf-share-card__title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
}
.rf-share-card__desc {
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: 1.55;
}
.rf-crisis-note {
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: center;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--divider);
  margin-top: var(--sp-3);
}

/* ── Thanks / next-step block ── */
.rf-next-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: var(--sp-5) 0 var(--sp-3);
  text-align: center;
}
.rf-thanks-actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
}

/* ── Connect letter back row ── */
.cn-letter-back-row {
  margin-bottom: var(--sp-3);
}

/* ── Footer care note link ── */
.footer-care-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: inherit;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  transition: color var(--ease);
}
.footer-care-link:hover { color: var(--blue); }

/* ── Dark mode adjustments ── */
[data-theme="dark"] .rg-need-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .rf-path-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .rf-share-card { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .home-support-note { background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .section-note-banner { background: var(--surface-2); }
[data-theme="dark"] .rg-section-note { background: var(--surface-2); }
[data-theme="dark"] .rf-share-reminder { background: var(--surface-2); }
[data-theme="dark"] .rf-other-wrap { background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .rf-role-helper { background: var(--blue-light); }