/* ============================================================
   STILLWARE v3 — Editorial · Apothecary · Quiet
   ============================================================ */

:root {
  /* Paper + ink */
  --paper: #F5F1EA;
  --paper-warm: #EDE6DA;
  --paper-deep: #E5DCCC;
  --ink: #1A1A1A;
  --ink-soft: #2F2C28;         /* darker for better contrast */
  --ink-muted: #5A5450;        /* darker muted for WCAG AA */
  --ink-ghost: #8B857D;        /* still lighter but readable */

  /* Cards */
  --card: #FFFFFF;
  --card-warm: #FCFAF6;
  --border: #DDD5C8;
  --border-soft: #EBE4D6;

  /* Structural — retuned */
  --cobalt: #3B5BFF;
  --cobalt-deep: #1E3FE0;
  --cobalt-wash: #E0E7FF;

  /* Rust — warmer, less brick */
  --rust: #C55A3B;
  --rust-deep: #A44328;
  --rust-warm: #D87152;
  --rust-wash: #F5E2DC;

  /* Green — deeper, more forest, less sage tea */
  --forest: #5E7F5A;
  --forest-deep: #425F40;
  --forest-warm: #7A9873;
  --forest-wash: #DEE8DA;

  /* Signature moments */
  --blush: #F7D8D0;
  --blush-deep: #EEB5A7;
  --sky: #C9D4F8;
  --sky-deep: #8EA0E8;
  --honey: #F1D592;
  --plum: #B09CC9;

  /* Cycle phases */
  --phase-menstrual: #B54D43;
  --phase-menstrual-wash: #F2DCD7;
  --phase-follicular: #5E7F5A;
  --phase-follicular-wash: #DEE8DA;
  --phase-ovulatory: #D89B3A;
  --phase-ovulatory-wash: #F5E5C2;
  --phase-luteal: #8E7BB5;
  --phase-luteal-wash: #E5DEEE;

  /* Energy scale */
  --e1: #C98B8B;
  --e2: #C9A889;
  --e3: #B5B595;
  --e4: #9DB584;
  --e5: #5E7F5A;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(58, 42, 26, 0.05);
  --shadow: 0 1px 2px rgba(58, 42, 26, 0.04), 0 8px 24px rgba(58, 42, 26, 0.05);
  --shadow-lg: 0 2px 4px rgba(58, 42, 26, 0.06), 0 20px 50px rgba(58, 42, 26, 0.08);

  /* Typography */
  --font-display: 'Literata', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-italic: 'EB Garamond', Georgia, serif;

  /* Geometry */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --mobile-max: 480px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 20%, rgba(197, 90, 59, 0.025) 0%, transparent 50%),
    radial-gradient(circle at 85% 80%, rgba(59, 91, 255, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(229, 220, 204, 0.3) 0%, transparent 70%);
  z-index: -1;
}

input, textarea, select, button { font-family: inherit; font-size: 16px; }
input, textarea, select { -webkit-appearance: none; appearance: none; }
button { cursor: pointer; border: none; background: transparent; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.005em;
}

h1 { font-size: 2.1rem; font-weight: 500; }
h2 { font-size: 1.75rem; font-weight: 500; }
h3 { font-size: 1.2rem; font-weight: 500; }
h4 {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-weight: 600;
}

p { color: var(--ink-soft); }
.muted { color: var(--ink-muted); }
.small { font-size: 0.82rem; line-height: 1.5; }

a { color: var(--cobalt-deep); text-underline-offset: 2px; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 6px;
}

em, .italic {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
}

.card-label {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 10px;
}

/* ============================================================
   AUTH
   ============================================================ */
.auth-screen {
  display: none;
  position: fixed; inset: 0;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-warm) 100%);
  z-index: 100;
  overflow-y: auto;
}
.auth-screen.active { display: flex; }

.auth-container {
  margin: auto;
  padding: 48px 28px 32px;
  width: 100%;
  max-width: var(--mobile-max);
}

.auth-brand { text-align: center; margin-bottom: 48px; padding-top: 20px; }
.auth-wordmark {
  height: 32px;
  width: auto;
  display: block;
  margin: 0 auto 14px;
  max-width: 80%;
}
.auth-tag {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--ink-muted);
}

.auth-tabs {
  display: flex;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  padding: 4px;
  margin-bottom: 24px;
}
.auth-tab {
  flex: 1;
  padding: 10px;
  border-radius: 100px;
  font-size: 0.92rem;
  color: var(--ink-muted);
  transition: all .2s;
  font-weight: 500;
}
.auth-tab.active {
  background: var(--ink);
  color: var(--paper);
}

.auth-form { display: none; }
.auth-form.active { display: block; }

.auth-form input {
  display: block;
  width: 100%;
  padding: 15px 18px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  color: var(--ink);
  transition: border-color .2s;
}
.auth-form input:focus { outline: none; border-color: var(--cobalt); }

.auth-btn {
  width: 100%;
  padding: 15px;
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-sm);
  font-weight: 500;
  margin-top: 8px;
  transition: background .2s;
  letter-spacing: 0.01em;
}
.auth-btn:hover { background: #000; }
.auth-btn:active { transform: translateY(1px); }

.auth-note {
  font-size: 0.82rem;
  color: var(--ink-muted);
  margin-top: 18px;
  line-height: 1.55;
  text-align: center;
}

.auth-skip {
  display: block;
  width: 100%;
  margin-top: 32px;
  padding: 12px;
  color: var(--ink-muted);
  font-size: 0.9rem;
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: 4px;
}

/* ============================================================
   PASSCODE
   ============================================================ */
.passcode-screen {
  display: none;
  position: fixed; inset: 0;
  background: var(--paper);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.passcode-screen.active { display: flex; }

.passcode-container {
  width: 100%;
  max-width: 320px;
  padding: 24px;
  text-align: center;
}
.passcode-title { margin-bottom: 4px; font-size: 1.6rem; }
.passcode-sub { color: var(--ink-muted); margin-bottom: 32px; font-size: 0.92rem; }

.passcode-dots {
  display: flex;
  gap: 18px;
  justify-content: center;
  margin-bottom: 44px;
}
.pd {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  transition: all .15s;
}
.pd.filled {
  background: var(--ink);
  transform: scale(1.1);
}

.passcode-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.passcode-keypad button {
  aspect-ratio: 1.4;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ink);
  background: var(--card);
  border-radius: 50%;
  box-shadow: var(--shadow);
  transition: transform .1s, box-shadow .1s;
  font-family: var(--font-display);
}
.passcode-keypad button:active {
  transform: scale(.94);
  box-shadow: var(--shadow-sm);
}
.passcode-ghost {
  background: transparent !important;
  box-shadow: none !important;
  font-size: 1rem !important;
  color: var(--ink-muted) !important;
  font-family: var(--font-body) !important;
}

.passcode-error {
  color: var(--rust);
  margin-top: 18px;
  font-size: 0.9rem;
  min-height: 20px;
  font-style: italic;
}

/* ============================================================
   ONBOARDING
   ============================================================ */
.onboarding-screen {
  display: none;
  position: fixed; inset: 0;
  background: var(--paper);
  z-index: 90;
  flex-direction: column;
}
.onboarding-screen.active { display: flex; }

.onb-progress {
  height: 2px;
  background: var(--border);
  margin: 24px 28px 0;
  border-radius: 2px;
  overflow: hidden;
}
.onb-bar {
  display: block;
  height: 100%;
  background: var(--cobalt);
  width: 0;
  transition: width .5s cubic-bezier(.2,.9,.3,1);
}

.onb-step {
  display: none;
  flex: 1;
  flex-direction: column;
  padding: 48px 32px 32px;
  max-width: var(--mobile-max);
  margin: 0 auto;
  width: 100%;
}
.onb-step.active { display: flex; }

.onb-eyebrow {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cobalt);
  font-weight: 600;
  margin-bottom: 16px;
}

.onb-content { flex: 1; }
.onb-content h2 {
  margin-bottom: 24px;
  font-size: 2rem;
  line-height: 1.18;
}
.onb-content p {
  margin-bottom: 16px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.onb-content em {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink);
  font-weight: 500;
}
.onb-small {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1rem !important;
  color: var(--ink-muted) !important;
  margin-top: 24px;
}

.onb-nav {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 24px;
}
.onb-next, .onb-back {
  padding: 13px 26px;
  border-radius: 100px;
  font-size: 0.92rem;
  font-weight: 500;
}
.onb-next {
  background: var(--ink);
  color: var(--paper);
}
.onb-back { color: var(--ink-muted); }

.onb-choice {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
}
.onb-choice-btn {
  padding: 15px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
}
.onb-choice-btn.secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
}

.onb-form-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
}
.onb-form-row:last-child { border-bottom: none; }
.onb-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  cursor: pointer;
}
.onb-toggle input { width: 20px; height: 20px; accent-color: var(--cobalt); }
.onb-toggle span { font-size: 0.95rem; }
.onb-time {
  padding: 8px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--ink);
}

/* ============================================================
   ONBOARDING V3 — extended styles
   ============================================================ */
.onb-step {
  overflow-y: auto;
}

.onb-brand {
  text-align: center;
  margin-bottom: 32px;
  margin-top: 8px;
}
.onb-the {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.32em;
  color: var(--ink-muted);
  display: block;
  margin-bottom: 6px;
}
.onb-wordmark {
  font-family: var(--font-display);
  font-size: 2.3rem;
  font-weight: 500;
  margin: 0;
  line-height: 1;
  letter-spacing: -0.01em;
}
.onb-tagline {
  text-align: center;
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.02rem !important;
  margin-bottom: 36px !important;
  line-height: 1.5;
}

.onb-welcome-block,
.onb-privacy-block,
.onb-legal-block {
  margin-bottom: 24px;
}
.onb-welcome-block p,
.onb-privacy-block p,
.onb-legal-block p {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--ink);
}

.onb-three-things {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.onb-thing {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px 18px;
  background: var(--paper-warm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-soft);
}
.onb-thing-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--ink);
  margin: 0 !important;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.5;
  min-width: 28px;
}
.onb-thing-body {
  font-size: 0.96rem !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  color: var(--ink) !important;
}

.onb-privacy-label {
  font-family: var(--font-body);
  font-size: 0.7rem !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted) !important;
  font-weight: 600;
  margin-top: 24px !important;
  margin-bottom: 8px !important;
}
.onb-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}
.onb-list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 10px;
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--ink);
}
.onb-list li::before {
  content: '·';
  position: absolute;
  left: 4px;
  top: -2px;
  font-size: 1.4rem;
  color: var(--ink-muted);
}

.onb-crisis-line {
  font-size: 0.94rem !important;
  font-family: var(--font-body);
  color: var(--ink) !important;
  background: var(--paper-warm);
  padding: 12px 16px;
  border-left: 3px solid var(--cobalt);
  border-radius: 4px;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}

.onb-sub {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.96rem !important;
  margin-bottom: 24px !important;
  line-height: 1.5;
}

/* Length picker */
.onb-length-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 12px;
}
.onb-length-card {
  text-align: left;
  padding: 22px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .15s;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.onb-length-card:hover {
  transform: translateY(-1px);
  border-color: var(--ink);
  box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.onb-length-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  margin: 0 !important;
  color: var(--ink) !important;
}
.onb-length-time {
  font-family: var(--font-body);
  font-size: 0.78rem !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted) !important;
  margin: 0 !important;
}
.onb-length-desc {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink-soft) !important;
  font-size: 0.92rem !important;
  margin: 4px 0 0 0 !important;
  line-height: 1.4;
}

/* Inputs */
.onb-input,
.onb-textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  color: var(--ink);
  font-family: var(--font-body);
  transition: border-color .15s;
}
.onb-input:focus,
.onb-textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.onb-textarea {
  font-family: var(--font-italic);
  font-style: italic;
  resize: vertical;
  line-height: 1.55;
  min-height: 100px;
}

.onb-form-row label {
  display: block;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.onb-small-inline {
  font-size: 0.78rem;
  color: var(--ink-ghost);
  font-style: italic;
  margin-left: 6px;
}

/* Radio + checkbox lists */
.onb-radio-list,
.onb-checkbox-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.onb-radio,
.onb-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.onb-radio:hover,
.onb-checkbox:hover { border-color: var(--ink-muted); }

/* V3 6D — clear visual highlight when checkbox is checked. Multi-select friendly. */
.onb-checkbox:has(input:checked),
.onb-radio:has(input:checked) {
  background: var(--paper-warm);
  border-color: var(--cobalt, #2D4A87);
  border-width: 2px;
  padding: 13px 15px;  /* compensate for thicker border */
}
.onb-checkbox:has(input:checked) span,
.onb-radio:has(input:checked) span {
  color: var(--ink);
  font-weight: 500;
}

.onb-radio input,
.onb-checkbox input {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--cobalt);
  flex-shrink: 0;
}
.onb-radio span,
.onb-checkbox span {
  font-size: 0.96rem;
  line-height: 1.45;
  color: var(--ink);
}

/* Skip button */
.onb-skip {
  background: transparent;
  color: var(--ink-muted);
  padding: 13px 18px;
  font-size: 0.88rem;
  font-style: italic;
  font-family: var(--font-italic);
  border-radius: 100px;
}
.onb-skip:hover { color: var(--ink); }

/* ============================================================
   MAIN APP SHELL
   ============================================================ */
.main-app {
  display: none;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
  min-height: 100vh;
  min-height: 100dvh;
}
.main-app.active { display: block; }

.app-header {
  position: sticky;
  top: 0;
  background: rgba(245, 241, 234, 0.88);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--border-soft);
  z-index: 50;
}
.header-inner {
  max-width: var(--mobile-max);
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header-left {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.app-title {
  height: 22px;
  width: auto;
  display: block;
  color: var(--ink, #1A1A1A);
}
.header-right { display: flex; gap: 12px; align-items: center; }
.moon-badge { font-size: 1.5rem; line-height: 1; }
.icon-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.68rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
}

.user-menu {
  display: none;
  position: absolute;
  top: 58px;
  right: 20px;
  background: var(--card);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  z-index: 60;
  min-width: 180px;
}
.user-menu.active { display: flex; flex-direction: column; }
.user-menu button {
  padding: 13px 20px;
  text-align: left;
  font-size: 0.95rem;
  color: var(--ink);
  border-bottom: 1px solid var(--border-soft);
}
.user-menu button:last-child { border-bottom: none; }
.user-menu button:hover { background: var(--paper-warm); }

.app-content {
  max-width: var(--mobile-max);
  margin: 0 auto;
  padding: 24px 20px 24px;
}

.screen { display: none; animation: fadeUp .35s ease; }
.screen.active { display: block; }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.screen-head { margin-bottom: 24px; }
.screen-head .eyebrow { color: var(--cobalt); }

/* ============================================================
   CARDS (generic) + COLLAPSIBLE
   ============================================================ */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border-soft);
}
.card h3 { margin-bottom: 10px; }

/* Collapsible card wrapper */
.collapsible {
  position: relative;
  margin-bottom: 14px;
  border-radius: var(--radius);
  overflow: hidden;
}

/* Standard collapsible with visible header */
.collapsible-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}

.collapsible-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  cursor: pointer;
  user-select: none;
  gap: 12px;
}
.collapsible-header .eyebrow {
  margin-bottom: 0;
  flex: 1;
}

.collapsible-chev {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-warm);
  border-radius: 50%;
  font-size: 0.85rem;
  color: var(--ink);
  transition: transform .25s;
  flex-shrink: 0;
}
.collapsible.collapsed .collapsible-chev { transform: rotate(-180deg); }

.collapsible-body {
  max-height: 2000px;
  transition: max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s, padding .25s;
  opacity: 1;
  overflow: hidden;
}
.collapsible.collapsed .collapsible-body {
  max-height: 0;
  opacity: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Collapsible-card variants hide borders on inner bits */
.collapsible-card .collapsible-body > .cycle-band,
.collapsible-card .collapsible-body > .lookahead,
.collapsible-card .collapsible-body > .astro-weather {
  border: none;
  border-top: 1px solid var(--border-soft);
  border-radius: 0;
  background: transparent;
}

/* ============================================================
   VOICE NOTES — recording UI
   ============================================================ */
.voice-recorder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 28px 0;
}
.voice-status {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink-muted);
  font-size: 0.95rem;
  min-height: 22px;
  text-align: center;
}
.voice-record-btn {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  border: none;
  font-size: 2rem;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 4px 16px rgba(26,26,26,0.2);
}
.voice-record-btn:hover { transform: scale(1.04); }
.voice-record-btn.recording {
  background: var(--phase-menstrual);
  animation: voicePulse 1.6s ease-in-out infinite;
}
@keyframes voicePulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(181, 77, 67, 0.3); }
  50% { box-shadow: 0 4px 32px rgba(181, 77, 67, 0.6); }
}
.voice-time {
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   DRAWING — canvas + toolbar
   ============================================================ */
.drawing-modal-card {
  max-width: 92vw;
  width: 600px;
}
.drawing-canvas {
  width: 100%;
  max-width: 540px;
  height: auto;
  aspect-ratio: 6 / 5;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: crosshair;
  touch-action: none;
  display: block;
  margin: 0 auto;
}
.drawing-toolbar {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  justify-content: center;
}
.drawing-tool {
  padding: 9px 18px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s;
}
.drawing-tool.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.drawing-tool:hover:not(.active) { border-color: var(--ink-ghost); color: var(--ink); }

/* Entry kinds for new types */
.entry-kind-voice { background: rgba(94, 127, 90, 0.18); color: #4A6447; }
.entry-kind-drawing { background: rgba(176, 156, 201, 0.22); color: var(--plum); }

.entry-voice-player audio {
  width: 100%;
  margin-top: 8px;
}
.entry-drawing-thumb {
  margin-top: 8px;
  display: block;
  max-width: 240px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
}

/* ============================================================
   SELF TAB — field guide to you
   ============================================================ */
.self-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 22px;
}

/* Field guide profile card */
.field-guide-card {
  margin-bottom: 22px;
  background:
    radial-gradient(circle at 85% 15%, rgba(176, 156, 201, 0.18) 0%, transparent 55%),
    var(--card);
  border: 1px solid var(--border-soft);
}
.field-guide-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}
.field-guide-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.field-guide-row:last-child { border-bottom: none; }
.field-guide-row-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  width: 110px;
  flex-shrink: 0;
}
.field-guide-row-count {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.field-guide-row-snippet {
  flex: 1;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* V3 — Field Guide keyword cloud */
.field-guide-keywords {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--border-soft);
}
.field-guide-keywords:empty {
  margin: 0;
  padding: 0;
  border: 0;
}
.field-guide-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
  line-height: 1.4;
}
.field-guide-kw {
  font-family: var(--font-display);
  color: var(--ink);
  cursor: default;
  letter-spacing: -0.01em;
}
.field-guide-kw.kw-sm { font-size: 0.85rem; color: var(--ink-muted); font-weight: 400; }
.field-guide-kw.kw-md { font-size: 1rem; color: var(--ink-soft); font-weight: 400; }
.field-guide-kw.kw-lg { font-size: 1.25rem; color: var(--ink); font-weight: 500; }
.field-guide-kw.kw-xl { font-size: 1.55rem; color: var(--ink); font-weight: 500; }
.self-nav-btn {
  padding: 12px 8px;
  border: 1px solid var(--border-soft);
  background: var(--card);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all .15s;
  text-align: center;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.self-nav-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.self-nav-btn:hover:not(.active) {
  color: var(--ink);
  border-color: var(--ink-ghost);
}

.self-pane { display: none; }
.self-pane.active { display: block; }

.self-prompt-card {
  padding: 26px 24px;
  margin-bottom: 22px;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,255,255,0.55) 0%, transparent 55%),
    linear-gradient(135deg, #FCFAF6 0%, var(--paper-warm) 100%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
}
.self-prompt-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 10px;
}
.self-prompt-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 20px;
}
.self-prompt-actions {
  display: flex;
  gap: 14px;
  align-items: center;
}

.self-list-section h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 14px;
}
.self-list .self-entry {
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
  cursor: pointer;
  transition: transform .1s;
}
.self-list .self-entry:hover { transform: translateY(-1px); }
.self-entry-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 0.7rem;
  color: var(--ink-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.self-entry-prompt {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink-muted);
  font-size: 0.86rem;
  margin-bottom: 6px;
  line-height: 1.4;
}
.self-entry-answer {
  color: var(--ink);
  line-height: 1.5;
  font-size: 0.96rem;
}
.self-entry-delete {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--ink-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  letter-spacing: 0.04em;
}
.self-entry-delete:hover { color: var(--phase-menstrual); }

/* ============================================================
   ANNIVERSARIES — dates that matter
   ============================================================ */
.anniversaries-list .anniversary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  background: var(--paper-warm);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  gap: 12px;
}
.anniversary-info { flex: 1; min-width: 0; }
.anniversary-label {
  font-family: var(--font-display);
  font-size: 0.96rem;
  color: var(--ink);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.anniversary-meta {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink-muted);
  font-size: 0.82rem;
}
.anniversary-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.anniversary-actions button {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.78rem;
  cursor: pointer;
  color: var(--ink-soft);
}
.anniversary-actions button:hover { border-color: var(--ink-ghost); }

.anniversary-add {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.anniversary-add input[type="text"],
.anniversary-add input[type="date"],
.anniversary-add select {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  background: var(--card);
  color: var(--ink);
}

/* ============================================================
   REMINDERS — calendar invite blocks
   ============================================================ */
.reminder-block {
  padding: 14px 16px;
  background: var(--paper-warm);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
.reminder-block-title {
  font-family: var(--font-display);
  margin-bottom: 4px;
  color: var(--ink);
}
.reminder-time-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.reminder-time-row input[type="time"] {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  background: var(--card);
}

/* ============================================================
   CUSTOMIZE HOME — Settings card with drag/reorder + on/off
   ============================================================ */
.customize-home-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.customize-home-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: grab;
  transition: background .15s;
  user-select: none;
}
.customize-home-row:hover {
  background: var(--paper-warm);
  border-color: var(--ink-ghost);
}
.customize-home-row.dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.customize-home-row.drag-over {
  border-color: var(--ink);
  border-style: dashed;
}
.customize-home-handle {
  font-size: 1rem;
  line-height: 1;
  color: var(--ink-ghost);
  cursor: grab;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}
.customize-home-label {
  flex: 1;
  font-family: var(--font-body);
  font-size: 0.96rem;
  color: var(--ink);
}
.customize-home-toggle {
  flex-shrink: 0;
}
.customize-home-toggle input {
  width: 44px;
  height: 24px;
  appearance: none;
  background: var(--border);
  border-radius: 100px;
  position: relative;
  cursor: pointer;
  transition: background .2s;
}
.customize-home-toggle input::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: var(--paper);
  border-radius: 50%;
  transition: transform .2s;
}
.customize-home-toggle input:checked {
  background: var(--ink);
}
.customize-home-toggle input:checked::before {
  transform: translateX(20px);
}

/* ============================================================
   CHINESE ZODIAC — astro card extension
   ============================================================ */
.chinese-zodiac-card {
  margin-top: 16px;
  padding: 22px 22px 20px;
  background:
    radial-gradient(circle at 85% 15%, rgba(197, 90, 59, 0.12) 0%, transparent 55%),
    var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.chinese-zodiac-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.chinese-zodiac-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.chinese-zodiac-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.chinese-zodiac-element {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-muted);
}
.chinese-zodiac-body {
  font-size: 0.94rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.chinese-zodiac-body p { margin-bottom: 10px; }
.chinese-zodiac-body p:last-child { margin-bottom: 0; }

/* ============================================================
   ASTRO DEPTH — longer Sun/Moon/Rising write-ups
   ============================================================ */
.big-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.big-three-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  background: var(--paper-warm);
  border-radius: var(--radius-sm);
}
.big-three-item-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.big-three-item-sign {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
  text-align: center;
}

.big-three-deep {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 14px;
}
.big-three-section {
  padding: 16px 18px;
  background: var(--paper-warm);
  border-radius: var(--radius-sm);
}
.big-three-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.big-three-section-label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.big-three-sign {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
}
.big-three-text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink);
}
.mercury-retro-banner {
  margin-top: 14px;
  padding: 14px 16px;
  background: rgba(197, 90, 59, 0.1);
  border: 1px solid rgba(197, 90, 59, 0.3);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
}
.mercury-retro-banner strong { color: var(--rust-deep); }

/* ============================================================
   HOW MYSTICAL — Settings card
   ============================================================ */
.mystical-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mystical-option {
  display: flex;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .15s;
  align-items: flex-start;
}
.mystical-option:hover {
  border-color: var(--ink-ghost);
  background: var(--paper-warm);
}
.mystical-option input[type="radio"] {
  margin-top: 4px;
  flex-shrink: 0;
  accent-color: var(--ink);
}
.mystical-option:has(input:checked) {
  border-color: var(--ink);
  background: var(--paper-warm);
}
.mystical-option-body { flex: 1; }
.mystical-option-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.mystical-default {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--ink-muted);
  padding: 2px 8px;
  background: var(--paper);
  border-radius: 100px;
}
.mystical-option-desc {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* ============================================================
   "HOW MYSTICAL?" — 3-level setting
   ============================================================ */
.mystical-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.mystical-option {
  text-align: left;
  padding: 16px 18px;
  background: var(--card);
  border: 1.5px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .15s;
}
.mystical-option:hover {
  border-color: var(--ink-ghost);
  background: var(--card-warm);
}
.mystical-option.active {
  border-color: var(--ink);
  background: var(--card-warm);
}
.mystical-option.active::before {
  content: '✓';
  float: right;
  font-weight: 600;
  color: var(--ink);
  margin-left: 8px;
}
.mystical-option-label {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 4px;
}
.mystical-option-desc {
  color: var(--ink-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* ============================================================
   CYCLE TAB — sub-toggle (Astro/Menstrual) + menstrual UI
   ============================================================ */
/* ============================================================
   REFLECT — sub-toggle (Write / Look back / Patterns)
   ============================================================ */
.reflect-subtoggle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  background: var(--paper-warm);
  padding: 4px;
  border-radius: 100px;
  margin-bottom: 22px;
}
.reflect-sub-btn {
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all .15s;
}
.reflect-sub-btn.active {
  background: var(--ink);
  color: var(--paper);
}
.reflect-sub-btn:hover:not(.active) { color: var(--ink); }

.reflect-pane { display: none; }
.reflect-pane.active { display: block; }

/* ============================================================
   SETTINGS — sub-toggle (Tracking / Look & feel / Reminders / Account)
   ============================================================ */
.settings-subtoggle {
  display: flex;
  gap: 4px;
  background: var(--paper-warm);
  padding: 4px;
  border-radius: 100px;
  margin-bottom: 24px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* V3 6B — fade-out edges signal more content to the side */
  mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
  position: relative;
}
.settings-subtoggle::-webkit-scrollbar { display: none; }
.settings-sub-btn {
  flex: 1 0 auto;
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.settings-sub-btn.active {
  background: var(--ink);
  color: var(--paper);
}
.settings-sub-btn:hover:not(.active) { color: var(--ink); }

@media (max-width: 380px) {
  .settings-sub-btn { font-size: 0.78rem; padding: 9px 10px; }
}

/* CONNECTION CARD — top of Patterns tab */
.connection-card {
  margin-bottom: 22px;
  padding: 22px 22px 20px;
  background:
    radial-gradient(circle at 85% 15%, rgba(176, 156, 201, 0.2) 0%, transparent 55%),
    linear-gradient(135deg, var(--card) 0%, var(--paper-warm) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.connection-card .eyebrow {
  color: var(--plum);
  margin-bottom: 8px;
}
.connection-text {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.connection-text strong {
  font-weight: 500;
}
.connection-empty {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
}

/* QUICK STATS in patterns */
.quick-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 8px;
}
.quick-stats .stat-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--paper-warm);
  border-radius: var(--radius-sm);
}
.quick-stats .stat-key {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.quick-stats .stat-value {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   CELEBRATION CARDS — quiet milestone moments
   ============================================================ */
.celebration-card {
  margin-bottom: 18px;
  padding: 18px 20px;
  background:
    linear-gradient(135deg, rgba(241, 213, 146, 0.18) 0%, var(--paper-warm) 100%);
  border: 1px solid rgba(241, 213, 146, 0.5);
  border-radius: var(--radius);
  position: relative;
}
.celebration-card .eyebrow {
  color: #8B6914;
  margin-bottom: 6px;
}
.celebration-text {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 12px;
}
.celebration-dismiss {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 4px 0;
}
.celebration-dismiss:hover { color: var(--ink); }

/* ============================================================
   CHECK-IN — collapsed summary state after save
   ============================================================ */
/* When collapsed, hide the body content + the mode buttons,
   but keep the head's title and chev visible so user has a tap target. */
.checkin.checkin-collapsed > .log-body,
.checkin.checkin-collapsed > .checkin-prompts,
.checkin.checkin-collapsed > .primary-btn,
.checkin.checkin-collapsed > .saved-msg {
  display: none !important;
}
.checkin.checkin-collapsed .checkin-modes {
  display: none !important;
}
.checkin.checkin-collapsed > .checkin-head {
  margin-bottom: 0;
}
.checkin.checkin-collapsed {
  padding-bottom: 18px;
}
.checkin-summary {
  cursor: pointer;
  padding: 4px 0;
  margin-top: 12px;
}
.ci-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.ci-summary-label {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.ci-summary-add {
  background: none;
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  padding: 6px 14px;
  color: var(--ink);
  cursor: pointer;
  transition: all .15s;
}
.ci-summary-add:hover {
  border-color: var(--ink);
  background: var(--paper-warm);
}
.ci-summary-periods {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.ci-summary-period {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
  color: var(--ink);
}
.ci-summary-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.ci-summary-dot.e1 { background: var(--e1); }
.ci-summary-dot.e2 { background: var(--e2); }
.ci-summary-dot.e3 { background: var(--e3); }
.ci-summary-dot.e4 { background: var(--e4); }
.ci-summary-dot.e5 { background: var(--e5); }

/* ============================================================
   HOME — pair rows + collapsible modules
   ============================================================ */
.home-pair-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.home-pair-row > .home-module {
  margin-bottom: 0 !important;
  min-width: 0; /* allow card content to shrink */
}
@media (max-width: 380px) {
  .home-pair-row {
    grid-template-columns: 1fr;
  }
}

/* Collapsible modules */
.module-collapse-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
  transition: background .15s;
  border-radius: var(--radius-sm);
}
.module-collapse-header:hover {
  background: var(--paper-warm);
}
.module-collapse-label {
  font-family: var(--font-body);
  font-size: 0.96rem;
  color: var(--ink);
  font-weight: 500;
}
.home-module.module-collapsed > *:not(.module-collapse-header) {
  display: none !important;
}
.home-module.module-collapsed .module-collapse-chev {
  transform: rotate(-90deg);
}
.home-module:not(.module-collapsed) .module-collapse-header {
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 12px;
}

/* ============================================================
   DAILY SELF QUESTION — Me tab landing
   ============================================================ */
.daily-self-question {
  background:
    radial-gradient(circle at 85% 15%, rgba(176, 156, 201, 0.18) 0%, transparent 55%),
    var(--card);
  margin-top: 16px;
}
.daily-self-question .eyebrow {
  color: var(--plum);
}

/* Cycle subtoggle (existing) */
.cycle-subtoggle {
  display: flex;
  gap: 6px;
  background: var(--paper-warm);
  padding: 4px;
  border-radius: 100px;
  margin-bottom: 20px;
  width: fit-content;
}
.cycle-sub-btn {
  padding: 9px 22px;
  border: none;
  background: transparent;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all .15s;
}
.cycle-sub-btn.active {
  background: var(--ink);
  color: var(--paper);
}
.cycle-sub-btn:hover:not(.active) { color: var(--ink); }

.cycle-pane { display: none; }
.cycle-pane.active { display: block; }

/* Cycle phase card on Menstrual tab */
.cycle-phase-card {
  padding: 28px 24px 26px;
  margin-bottom: 18px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  position: relative;
}
.cycle-phase-card.menstrual {
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,0.5) 0%, transparent 55%),
    linear-gradient(135deg, var(--phase-menstrual-wash) 0%, var(--paper-warm) 100%);
}
.cycle-phase-card.follicular {
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,0.5) 0%, transparent 55%),
    linear-gradient(135deg, var(--phase-follicular-wash) 0%, var(--paper-warm) 100%);
}
.cycle-phase-card.ovulation {
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,0.5) 0%, transparent 55%),
    linear-gradient(135deg, var(--phase-ovulatory-wash) 0%, var(--paper-warm) 100%);
}
.cycle-phase-card.early-luteal,
.cycle-phase-card.late-luteal {
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,0.5) 0%, transparent 55%),
    linear-gradient(135deg, var(--phase-luteal-wash) 0%, var(--paper-warm) 100%);
}
.cycle-phase-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.cycle-phase-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
  line-height: 1.15;
  color: var(--ink);
}
.cycle-phase-day {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-muted);
  margin-bottom: 18px;
}
.cycle-phase-section {
  margin-bottom: 16px;
}
.cycle-phase-section:last-child { margin-bottom: 0; }
.cycle-phase-section-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.cycle-phase-section p {
  color: var(--ink);
  line-height: 1.55;
  font-size: 0.96rem;
}
.cycle-phase-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
}
.cycle-phase-bullets li {
  position: relative;
  padding-left: 18px;
  font-size: 0.94rem;
  line-height: 1.5;
  margin-bottom: 6px;
  color: var(--ink);
}
.cycle-phase-bullets li::before {
  content: '·';
  position: absolute;
  left: 4px;
  font-weight: 700;
  color: var(--ink-muted);
}
.cycle-phase-nudge {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(26,26,26,0.1);
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--ink);
}

.cycle-action-row {
  margin-bottom: 18px;
}

.cycle-history-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.92rem;
}
.cycle-history-item:last-child { border-bottom: none; }
.cycle-history-item-date {
  color: var(--ink);
}
.cycle-history-item-meta {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink-muted);
}

/* Period day card (when ON period) */
.period-day-card {
  padding: 28px 24px;
  margin-bottom: 16px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,0.5) 0%, transparent 55%),
    linear-gradient(135deg, var(--phase-menstrual-wash) 0%, var(--paper-warm) 100%);
  border: 1px solid var(--border-soft);
}
.period-day-card .eyebrow {
  color: var(--phase-menstrual);
  margin-bottom: 6px;
}
.period-day-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.55rem;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.period-day-card .muted {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.45;
  color: var(--ink);
}

/* Flow picker */
.flow-picker {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 6px;
}
.flow-btn {
  padding: 12px 8px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s;
}
.flow-btn:hover { border-color: var(--ink-ghost); }
.flow-btn.active {
  background: var(--phase-menstrual);
  color: var(--paper);
  border-color: var(--phase-menstrual);
}
@media (max-width: 380px) {
  .flow-picker { grid-template-columns: 1fr 1fr; }
}

/* Symptom multi-select */
.symptom-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.symptom-chip {
  padding: 8px 14px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s;
}
.symptom-chip:hover { border-color: var(--ink-ghost); color: var(--ink); }
.symptom-chip.active {
  background: var(--phase-menstrual-wash);
  border-color: var(--phase-menstrual);
  color: var(--phase-menstrual);
  font-weight: 500;
}

.end-period-btn {
  display: block;
  margin: 24px auto 0;
  padding: 14px 28px;
}

/* ============================================================
   MOON STORY — condensed header only (tap i for info)
   ============================================================ */
/* ============================================================
   WEATHER REPORT — top of home, daily synthesis
   ============================================================ */
.weather-report {
  margin-bottom: 20px;
  padding: 26px 24px 22px;
  background:
    radial-gradient(circle at 88% 12%, rgba(255,250,242,0.50) 0%, transparent 55%),
    radial-gradient(circle at 12% 88%, rgba(200,210,235,0.45) 0%, transparent 50%),
    linear-gradient(165deg, #F5DDD8 0%, #DDC8E0 45%, #C8D2E8 100%);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04), 0 8px 24px rgba(26, 26, 26, 0.06);
  position: relative;
  overflow: hidden;
}

/* Tappable header for collapse */
.weather-collapse-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  margin-bottom: 16px;
  user-select: none;
}
.weather-head-content { flex: 1; min-width: 0; }
.weather-chev,
.onething-chev,
.yearago-chev,
.module-collapse-chev {
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ink);
  opacity: 0.55;
  flex-shrink: 0;
  padding: 4px 10px;
  transition: opacity .15s, transform .2s;
  font-weight: 400;
}
.weather-collapse-header:hover .weather-chev,
.onething-collapse-header:hover .onething-chev,
.yearago-collapse-header:hover .yearago-chev,
.module-collapse-header:hover .module-collapse-chev { opacity: 1; }
.weather-collapsed-summary {
  display: none;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink);
  opacity: 0.75;
  margin-top: 6px;
  line-height: 1.4;
}
.weather-report.weather-collapsed { padding-bottom: 22px; }
.weather-report.weather-collapsed .weather-collapse-header { margin-bottom: 0; }

/* Friend-voice italic styling for cycle/moon sub-text */
.weather-line-sub .friend-voice {
  display: block;
  margin-top: 4px;
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink);
  opacity: 0.78;
  font-size: 0.94em;
}

.weather-head { margin-bottom: 16px; }
.weather-head .eyebrow {
  color: var(--ink);
  opacity: 0.55;
  margin-bottom: 4px;
}
.weather-greeting {
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink);
  line-height: 1.15;
}
.weather-greeting em {
  font-family: var(--font-italic);
  font-style: italic;
}
.weather-lines {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.weather-line {
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink);
}
.weather-line-icon {
  font-size: 1.2rem;
  flex-shrink: 0;
  line-height: 1;
  width: 24px;
  text-align: center;
}
.weather-line-text { flex: 1; }
.weather-line-text strong {
  font-weight: 500;
  color: var(--ink);
}
.weather-line-sub {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink-soft);
  opacity: 0.8;
  font-size: 0.96rem;
}
.weather-prompt-box {
  margin-bottom: 14px;
}
.weather-prompt-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.weather-prompt {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.08rem;
  line-height: 1.45;
  color: var(--ink);
}
.moon-info-link {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink);
  opacity: 0.6;
  cursor: pointer;
  padding: 0;
  letter-spacing: 0.02em;
  transition: opacity .15s;
}
.moon-info-link:hover { opacity: 1; }

/* ============================================================
   MOON STORY (legacy — kept for modal content compatibility)
   ============================================================ */
.moon-story-condensed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 20px;
  margin-bottom: 14px;
  background:
    radial-gradient(circle at 85% 25%, rgba(255,255,255,0.45) 0%, transparent 50%),
    linear-gradient(135deg, #F7D8D0 0%, #E5DCFB 45%, #C9D4F8 100%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.moon-story-header-text {
  flex: 1;
  min-width: 0;
}
.moon-story-condensed .eyebrow {
  color: var(--ink);
  opacity: 0.55;
  margin-bottom: 4px;
}
.moon-story-header-name {
  font-family: var(--font-display);
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.moon-story-header-name span:first-child { font-size: 1.3rem; }
.almanac-name {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--ink);
  opacity: 0.7;
}
.almanac-name:empty { display: none; }
.almanac-name:not(:empty)::before {
  content: '·';
  margin-right: 8px;
  opacity: 0.4;
}
.moon-info-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  color: var(--ink);
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.98rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
  cursor: pointer;
}
.moon-info-btn:hover { background: rgba(255,255,255,0.95); }

/* ============================================================
   ASTRO WEATHER CARD
   ============================================================ */
.astro-weather {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.astro-weather p:not(.eyebrow) {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.55;
}

/* ============================================================
   CYCLE BAND
   ============================================================ */
.cycle-band {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px 18px;
  cursor: pointer;
  transition: transform .15s;
}
.cycle-band:hover { transform: translateY(-1px); }

.cycle-band-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--paper-warm);
}
.cycle-band.menstrual .cycle-band-dot { background: var(--phase-menstrual); }
.cycle-band.follicular .cycle-band-dot { background: var(--phase-follicular); }
.cycle-band.ovulatory .cycle-band-dot { background: var(--phase-ovulatory); }
.cycle-band.luteal .cycle-band-dot { background: var(--phase-luteal); }

.cycle-band-meta { flex: 1; }
.cycle-band-meta .eyebrow { margin-bottom: 2px; font-size: 0.68rem; }
.cycle-band-meta p { color: var(--ink); font-size: 0.95rem; }
.cycle-band-arrow { color: var(--ink-ghost); font-size: 1.3rem; }

/* ============================================================
   LOOK-AHEAD
   ============================================================ */
.lookahead {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.lookahead p:not(.eyebrow) { color: var(--ink); font-size: 0.95rem; }

/* ============================================================
   LAST-TIME CARD — editorial heavy (ink on cream, sidebar style)
   ============================================================ */
.lasttime-card {
  background:
    radial-gradient(circle at 90% 20%, rgba(176, 156, 201, 0.15) 0%, transparent 60%),
    var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.lasttime-card:hover {
  transform: translateY(-1px);
  border-color: var(--ink-ghost);
}
.lasttime-card .eyebrow {
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.lasttime-card p {
  color: var(--ink);
  font-size: 0.96rem;
  line-height: 1.5;
  font-family: var(--font-italic);
  font-style: italic;
}
.lasttime-card em {
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}
.lasttime-card .ll-cta {
  color: var(--ink);
  opacity: 0.7;
  font-weight: 500;
  font-size: 0.82rem;
  margin-top: 12px;
  display: inline-block;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  padding-bottom: 2px;
}

/* ============================================================
   YEAR-AGO CARD
   ============================================================ */
.yearago-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 14px;
  cursor: pointer;
  transition: transform .15s;
}
.yearago-card:hover { transform: translateY(-1px); }
.yearago-card .eyebrow {
  color: var(--ink-muted);
}
.yearago-card .yearago-text {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink);
  font-size: 1.02rem;
  line-height: 1.5;
  margin-top: 6px;
}
.yearago-card .yearago-meta {
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin-top: 10px;
  letter-spacing: 0.04em;
}

/* ============================================================
   CALENDAR — home hero
   ============================================================ */
.calendar-hero {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 18px 18px 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}

/* WEEK STRIP — default calendar view */
.cal-week-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 12px;
}
.cal-week-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}
.cal-expand-btn {
  background: none;
  border: none;
  padding: 4px 8px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--ink-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s;
}
.cal-expand-btn:hover { color: var(--ink); }

.cal-week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 12px;
}
.cal-week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 2px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--paper-warm);
  border: 1px solid transparent;
  transition: all .15s;
  min-height: 64px;
  justify-content: space-between;
  position: relative;
}
.cal-week-day:hover {
  border-color: var(--ink-ghost);
}
.cal-week-day:active { transform: scale(0.95); }
.cal-week-day.today {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.cal-week-day.today .cal-week-label,
.cal-week-day.today .cal-week-num { color: var(--paper); }
.cal-week-day.future { opacity: 0.4; cursor: default; }
.cal-week-day.future:hover { border-color: transparent; }
.cal-week-label {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.cal-week-num {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cal-week-moon {
  font-size: 0.85rem;
  line-height: 1;
}

/* V3 — 4-corner status indicators (calendar dots) */
.cal-corner {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
}
.cal-corner.on { background: var(--ink); }
/* V3 6D — 4 distinct corner colors so users can read what's logged at a glance */
.cal-corner-tl.on { background: var(--cobalt, #2D4A87); }     /* tracked = cobalt blue */
.cal-corner-tr.on.period { background: var(--phase-menstrual, #B05F3F); } /* period = rust/blush */
.cal-corner-bl.on { background: var(--phase-follicular, #5E7F5A); }       /* wrote = sage */
.cal-corner-br.on { background: var(--phase-ovulation, #D4A05A); }        /* learned = honey */
.cal-corner.on.period { background: var(--phase-menstrual, #B05F3F); }
.cal-corner-tl { top: 4px; left: 4px; }
.cal-corner-tr { top: 4px; right: 4px; }
.cal-corner-bl { bottom: 4px; left: 4px; }
.cal-corner-br { bottom: 4px; right: 4px; }

/* On the dark "today" cell, corners need a contrasting color */
.cal-week-day.today .cal-corner.on,
.cal-day.today .cal-corner.on { background: var(--paper); }
.cal-week-day.today .cal-corner.on.period,
.cal-day.today .cal-corner.on.period { background: var(--rust); }

.cal-collapse-btn {
  display: block;
  margin: 12px auto 6px;
  background: none;
  border: 1px solid var(--border-soft);
  padding: 8px 16px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all .15s;
}
.cal-collapse-btn:hover {
  color: var(--ink);
  border-color: var(--ink-ghost);
}

.cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.cal-title-block { text-align: center; }
.cal-title {
  font-size: 1.3rem;
  margin-bottom: 2px;
}
.cal-sub {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-ghost);
}
.cal-nav {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--paper-warm);
  color: var(--ink);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.cal-nav:hover { background: var(--paper-deep); }

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 6px;
}
.cal-weekdays span {
  text-align: center;
  font-size: 0.68rem;
  color: var(--ink-ghost);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 600;
  padding: 6px 0;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-day {
  aspect-ratio: 1;
  background: var(--paper-warm);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--ink);
  padding: 2px;
  position: relative;
  cursor: pointer;
  border: 1px solid transparent;
  overflow: hidden;
  transition: transform .1s;
}
.cal-day:active { transform: scale(0.95); }
.cal-day.other-month {
  color: var(--border);
  background: transparent;
  cursor: default;
}
.cal-day.today {
  border-color: var(--ink);
  font-weight: 600;
}

.cal-moon {
  font-size: 0.95rem;
  line-height: 1;
  margin-bottom: 1px;
}
.cal-num {
  font-size: 0.72rem;
  font-weight: 500;
}

.cal-day.e1,
.cal-day.e2,
.cal-day.e3,
.cal-day.e4,
.cal-day.e5 {
  /* legacy energy classes — corner system replaces */
}

.cal-day.logged .cal-num {
  /* legacy logged underline — corner system replaces */
}

.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  font-size: 0.72rem;
  color: var(--ink-muted);
  justify-content: center;
}
.legend-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
  background: var(--ink);
}
.legend-dot.tracked { background: var(--cobalt, #2D4A87); }
.legend-dot.period { background: var(--phase-menstrual, #B05F3F); }
.legend-dot.wrote { background: var(--phase-follicular, #5E7F5A); }
.legend-dot.learned { background: var(--phase-ovulation, #D4A05A); }

/* ============================================================
   STREAK STRIP
   ============================================================ */
.streak-section { margin-bottom: 16px; }
.streak-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.streak-count {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
}

.streak-strip {
  display: flex;
  gap: 4px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  overflow-x: auto;
  scrollbar-width: none;
}
.streak-strip::-webkit-scrollbar { display: none; }

.streak-day {
  flex: 1;
  height: 32px;
  min-width: 14px;
  border-radius: 5px;
  background: var(--border);
  position: relative;
  transition: transform .1s;
}
.streak-day.today {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.streak-day.honest { background: var(--cobalt); }
.streak-day.e1 { background: var(--e1); }
.streak-day.e2 { background: var(--e2); }
.streak-day.e3 { background: var(--e3); }
.streak-day.e4 { background: var(--e4); }
.streak-day.e5 { background: var(--e5); }
.streak-day.untracked {
  background: transparent;
  border: 1.5px dashed var(--border);
}
.streak-day.idk {
  background: var(--plum);
}

/* ============================================================
   CHECK-IN
   ============================================================ */
.checkin {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 24px 20px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}

.checkin-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
  cursor: pointer;
  user-select: none;
}
.checkin-head:hover { opacity: 0.92; }
.checkin-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.checkin-head-text { flex: 1; min-width: 0; }
.checkin-head h2 {
  font-size: 1.5rem;
  line-height: 1.15;
}
.checkin-head .eyebrow {
  color: var(--ink-ghost);
  margin-bottom: 2px;
}
.checkin-chev {
  font-size: 1.7rem;
  line-height: 1;
  color: var(--ink);
  opacity: 0.55;
  padding: 4px 10px;
  transition: opacity .15s, transform .2s;
  flex-shrink: 0;
  font-weight: 400;
}
.checkin-head:hover .checkin-chev { opacity: 1; }
.checkin.checkin-collapsed .checkin-head { margin-bottom: 0; }

.checkin-modes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  padding: 3px;
  width: 100%;
}
.mode-btn {
  padding: 7px 6px;
  border-radius: 100px;
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-weight: 500;
  transition: all .15s;
  white-space: nowrap;
  text-align: center;
  border: none;
  background: transparent;
  cursor: pointer;
}
.mode-btn.active {
  background: var(--ink);
  color: var(--paper);
}

.log-body { animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.slider-row {
  margin-bottom: 18px;
}
.slider-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
}
.slider-val {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ink-muted);
  font-weight: 500;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #F7D8D0 0%, #E5DCFB 50%, #C9D4F8 100%);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform .1s;
}
.slider::-webkit-slider-thumb:active { transform: scale(1.1); }
.slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.log-section {
  padding: 18px 0;
  border-top: 1px solid var(--border-soft);
}
.log-section:first-of-type { border-top: none; padding-top: 0; }
.log-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 10px;
}

/* Tags */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.tag {
  padding: 8px 14px;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  transition: all .15s;
  font-family: var(--font-body);
  cursor: pointer;
}
.tag:hover { border-color: var(--border); }
.tag.selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Custom tag = wrapped (button + ×) */
.tag.custom-wrap {
  display: inline-flex;
  align-items: stretch;
  padding: 0;
  background: var(--cobalt-wash);
  border-color: var(--cobalt-wash);
  color: var(--cobalt-deep);
  overflow: hidden;
}
.tag.custom-wrap .tag-body {
  padding: 8px 4px 8px 14px;
  background: transparent;
  color: var(--cobalt-deep);
  font-size: 0.9rem;
  font-family: var(--font-body);
  cursor: pointer;
}
.tag.custom-wrap .tag-x {
  padding: 0 10px 0 4px;
  background: transparent;
  color: var(--cobalt-deep);
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.55;
  cursor: pointer;
  transition: opacity .15s;
}
.tag.custom-wrap .tag-x:hover {
  opacity: 1;
}
.tag.custom-wrap.selected {
  background: var(--cobalt);
  color: white;
  border-color: var(--cobalt);
}
.tag.custom-wrap.selected .tag-body,
.tag.custom-wrap.selected .tag-x {
  color: white;
}

.add-tag-btn {
  font-size: 0.85rem;
  color: var(--cobalt-deep);
  font-weight: 500;
  padding: 4px 0;
  margin-top: 4px;
}
.custom-tag-form {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
  flex-wrap: wrap;
}
.custom-tag-form input {
  flex: 1;
  min-width: 160px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.88rem;
  background: var(--card);
}

/* Body check-in */
.body-checkin { background: var(--paper-warm); margin: 18px -20px; padding: 16px 20px; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); }
.body-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.body-opt {
  padding: 8px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
  transition: all .15s;
}
.body-opt.selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Heavy flag */
.heavy-flag-row {
  background: var(--paper-warm);
  margin: 18px -20px;
  padding: 14px 20px;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.heavy-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin-bottom: 4px;
}
.heavy-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--phase-menstrual);
}
.heavy-toggle span {
  font-weight: 500;
  color: var(--ink);
}

/* Meds */
.meds-list { display: flex; flex-direction: column; gap: 8px; }
.med-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--paper-warm);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.med-check input {
  width: 18px; height: 18px;
  accent-color: var(--cobalt);
}
.med-check span {
  font-size: 0.92rem;
  color: var(--ink);
}

/* Photo */
.photo-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.photo-add-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 84px;
  height: 84px;
  background: var(--paper-warm);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  transition: all .15s;
}
.photo-add-btn:hover {
  border-color: var(--cobalt);
  color: var(--cobalt-deep);
}
.plus-glyph {
  font-size: 1.5rem;
  line-height: 1;
}
.photo-add-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.photo-previews {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.photo-preview {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--paper-warm);
}
.photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--ink);
  resize: vertical;
  min-height: 84px;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  transition: border-color .15s;
}
textarea:focus { outline: none; border-color: var(--cobalt); background: var(--card); }

.qword-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  margin-top: 14px;
  font-size: 1rem;
}
.qword-input:focus { outline: none; border-color: var(--cobalt); background: var(--card); }

/* I don't know */
.idk-card {
  text-align: center;
  padding: 32px 16px;
  background: var(--paper-warm);
  border-radius: var(--radius);
}
.idk-big {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 14px;
}
.idk-card .muted { margin-bottom: 8px; }

/* Pride log */
.pride-card {
  background:
    radial-gradient(circle at 85% 15%, rgba(241, 213, 146, 0.3) 0%, transparent 60%),
    linear-gradient(135deg, var(--card) 0%, var(--paper-warm) 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 24px 20px;
}
.pride-card .pride-big {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  margin-bottom: 6px;
  line-height: 1.2;
}
.pride-card .muted {
  margin-bottom: 18px;
  font-family: var(--font-italic);
  font-style: italic;
}
.pride-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-size: 0.98rem;
  line-height: 1.5;
  min-height: 72px;
  resize: vertical;
  font-family: inherit;
}
.pride-input:focus { outline: none; border-color: var(--honey); }

/* ============================================================
   ONE THING TODAY — standalone card on home, collapsible
   ============================================================ */
.one-thing-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  margin-bottom: 16px;
}

.onething-collapse-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.onething-head-text { flex: 1; min-width: 0; }
.onething-collapse-header h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.onething-collapsed-summary {
  display: none;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.4;
  margin-top: 2px;
}
.one-thing-card.onething-collapsed { padding-bottom: 22px; }
.onething-body { margin-top: 14px; }

.one-thing-input {
  width: 100%;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-size: 0.98rem;
  line-height: 1.5;
  min-height: 72px;
  resize: vertical;
  font-family: inherit;
  color: var(--ink);
  margin-bottom: 14px;
}
.one-thing-input:focus { outline: none; border-color: var(--honey); }
.one-thing-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.one-thing-btn {
  flex: 1;
  min-width: 140px;
}
.one-thing-recent {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.one-thing-recent:empty { display: none; }
.one-thing-recent-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.one-thing-recent-item {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.5;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-sm);
}
.one-thing-recent-item-date {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink-muted);
  font-size: 0.82rem;
  margin-top: 4px;
}

/* ============================================================
   PAIN — home card + log modal
   ============================================================ */
.pain-card {
  background:
    radial-gradient(circle at 85% 15%, rgba(247, 216, 208, 0.4) 0%, transparent 55%),
    linear-gradient(135deg, var(--card) 0%, var(--paper-warm) 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 22px 22px 20px;
  margin-bottom: 16px;
}
.pain-head { margin-bottom: 14px; }
.pain-head h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.pain-quick-btn {
  width: 100%;
  padding: 12px;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  cursor: pointer;
  transition: all .2s;
}
.pain-quick-btn:hover {
  border-color: var(--ink);
  background: var(--paper-warm);
}
.pain-recent {
  margin-top: 14px;
}
.pain-recent:empty { display: none; }
.pain-recent-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.88rem;
}
.pain-recent-item:last-child { border-bottom: none; }
.pain-recent-where {
  font-weight: 500;
  text-transform: capitalize;
  color: var(--ink);
}
.pain-recent-meta {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink-muted);
  font-size: 0.84rem;
}

/* Pain log modal */
.pain-section {
  margin-bottom: 18px;
}
.pain-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.pain-locations,
.pain-kinds,
.pain-context {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.pain-chip {
  padding: 7px 13px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s;
}
.pain-chip:hover { border-color: var(--ink-ghost); color: var(--ink); }
.pain-chip.active {
  background: var(--rust-wash);
  border-color: var(--rust);
  color: var(--rust-deep);
  font-weight: 500;
}
.pain-strength-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pain-slider { flex: 1; }
.pain-strength-val {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink);
  min-width: 30px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pain-edu {
  margin: 16px 0;
  padding: 14px 16px;
  background: var(--paper-warm);
  border-radius: var(--radius-sm);
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ink-soft);
  font-family: var(--font-italic);
  font-style: italic;
}

/* Entry kinds */
.entry-kind-pain { background: rgba(197, 90, 59, 0.15); color: var(--rust-deep); }
.entry-kind-marker { background: rgba(176, 156, 201, 0.22); color: var(--plum); }

/* ============================================================
   LIFE EVENT MARKERS — modal
   ============================================================ */
.event-section {
  margin-bottom: 16px;
}
.event-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.event-kinds {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.event-kind {
  padding: 7px 13px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s;
}
.event-kind:hover { border-color: var(--ink-ghost); color: var(--ink); }
.event-kind.active {
  background: rgba(176, 156, 201, 0.22);
  border-color: var(--plum);
  color: var(--plum);
  font-weight: 500;
}
.event-anniversary-toggle {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  padding: 10px 0;
}
.event-anniversary-toggle input {
  margin-top: 4px;
  flex-shrink: 0;
  accent-color: var(--ink);
}
.event-anniversary-toggle span {
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.event-date-input {
  width: 100%;
  padding: 11px 14px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.96rem;
  color: var(--ink);
}

/* ============================================================
   LOW STRETCH NOTICE — gentle interrupt card
   ============================================================ */
.low-stretch-card {
  margin-bottom: 18px;
  padding: 18px 20px;
  background:
    linear-gradient(135deg, var(--paper-warm) 0%, var(--paper) 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  position: relative;
}
.low-stretch-card .eyebrow {
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.low-stretch-card-text {
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 10px;
}
.low-stretch-card-text em {
  font-family: var(--font-italic);
  font-style: italic;
}
.low-stretch-card-actions {
  display: flex;
  gap: 14px;
  margin-top: 8px;
}
.low-stretch-dismiss {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--ink-muted);
  cursor: pointer;
  padding: 4px 0;
}
.low-stretch-dismiss:hover { color: var(--ink); }

/* Primary button - editorial black */
.primary-btn {
  width: 100%;
  padding: 15px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 100px;
  font-weight: 500;
  margin-top: 20px;
  transition: all .2s;
  font-family: var(--font-body);
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  box-shadow:
    0 1px 2px rgba(26, 26, 26, 0.15),
    0 4px 12px rgba(26, 26, 26, 0.08);
}
.primary-btn:hover { background: #000; }
.primary-btn:active { transform: translateY(1px); box-shadow: 0 1px 2px rgba(26, 26, 26, 0.15); }

.saved-msg {
  text-align: center;
  color: var(--ink-muted);
  font-style: italic;
  font-family: var(--font-italic);
  margin-top: 16px;
  font-size: 1.05rem;
}

/* Shift suggestion - retuned green with depth */
.shift-suggest {
  background:
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.4) 0%, transparent 50%),
    linear-gradient(135deg, var(--forest-warm) 0%, var(--forest-wash) 60%, var(--card) 100%);
  padding: 22px 20px;
  border-radius: var(--radius);
  margin-bottom: 14px;
  border: 1px solid var(--border-soft);
  position: relative;
  overflow: hidden;
}
.shift-suggest h3 { margin-bottom: 8px; position: relative; }
.shift-suggest p { margin-bottom: 16px; color: var(--ink); position: relative; }
.shift-suggest .eyebrow { color: var(--forest-deep); position: relative; }
.shift-actions {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  position: relative;
}

.text-btn {
  color: var(--ink-muted);
  font-size: 0.88rem;
  font-weight: 500;
  padding: 4px 0;
  transition: color .15s;
}
.text-btn.emphasis {
  color: var(--cobalt-deep);
}
.text-btn.subtle {
  color: var(--ink-ghost);
}
.text-btn:hover { color: var(--ink); }

/* Body Log inline button (inside Full check-in) */
.bodylog-inline {
  padding: 0;
}
.bodylog-inline-btn {
  width: 100%;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  transition: all .15s;
  text-align: left;
  font-family: inherit;
}
.bodylog-inline-btn:hover {
  border-color: var(--ink);
}
.bodylog-inline-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bodylog-inline-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.bodylog-inline-sub {
  color: var(--ink);
  font-size: 0.92rem;
}
.bodylog-inline-arrow {
  color: var(--ink-ghost);
  font-size: 1.3rem;
  flex-shrink: 0;
}

/* ============================================================
   V3 — checkin-prompts (Body Log + Pain prompts as questions)
   Shared across full/quick/idk modes, sits above Save button.
   Designed to look clearly tappable, friendly, not buried.
   ============================================================ */
.checkin-prompts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 18px 0 14px 0;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}
.checkin-prompt-btn {
  width: 100%;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  cursor: pointer;
  transition: all .15s;
  text-align: left;
  font-family: inherit;
  position: relative;
}
.checkin-prompt-btn::after {
  content: '+';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
  color: var(--ink-muted);
  font-weight: 300;
  line-height: 1;
  transition: all .15s;
}
.checkin-prompt-btn:hover {
  border-color: var(--ink);
  background: var(--card);
}
.checkin-prompt-btn:hover::after {
  color: var(--ink);
}
.checkin-prompt-btn:active {
  transform: scale(0.99);
}
.checkin-prompt-q {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  padding-right: 28px;
  letter-spacing: -0.005em;
}
.checkin-prompt-sub {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.86rem;
  color: var(--ink-soft);
  padding-right: 28px;
  line-height: 1.4;
}

/* ============================================================
   BODY LOG MODAL
   ============================================================ */
.bodylog-content { padding: 4px 0 8px; }
.bodylog-content h3 { margin-bottom: 4px; }
.bodylog-content > .muted { margin-bottom: 20px; font-size: 0.92rem; }

.bodylog-section {
  margin-bottom: 24px;
}
.bodylog-section-label {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 12px;
}

/* Body Log hero */
.bodylog-hero {
  background: var(--paper-warm);
  margin: -28px -24px 20px;
  padding: 26px 24px 22px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  position: relative;
  border-bottom: 1px solid var(--border-soft);
}
.bodylog-hero .eyebrow { color: var(--ink-muted); margin-bottom: 6px; }
.bodylog-hero h3 { font-size: 1.6rem; margin-bottom: 6px; padding-right: 36px; }
.bodylog-sub {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink);
  opacity: 0.8;
}
.bodylog-zone-label {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-top: 14px;
  margin-bottom: 8px;
}
.bodylog-zone-label:first-child { margin-top: 0; }

/* Body location chips */
.body-locations {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.body-loc {
  padding: 9px 16px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  font-size: 0.9rem;
  color: var(--ink);
  transition: all .15s;
  cursor: pointer;
}
.body-loc:hover {
  border-color: var(--ink);
}
.body-loc.selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Sensation words */
.sensation-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sensation-chip {
  padding: 9px 16px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  font-size: 0.9rem;
  color: var(--ink-soft);
  font-family: var(--font-italic);
  font-style: italic;
  transition: all .15s;
}
.sensation-chip.selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
}

/* V3 — custom add input row in body log */
.bodylog-custom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
}
.bodylog-custom-row input[type="text"] {
  flex: 1;
  min-width: 140px;
  padding: 9px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  background: var(--paper-warm);
  color: var(--ink);
}
.bodylog-custom-row input[type="text"]:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--card);
}
.bodylog-custom-row .text-btn {
  padding: 8px 14px;
  font-size: 0.86rem;
}
.body-loc-custom,
.sensation-chip-custom {
  /* Inherit body-loc / sensation-chip styling — no extra rules needed */
}

.somatic-hint {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--paper-warm);
  border-radius: var(--radius-sm);
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.5;
  min-height: 0;
  transition: all .25s;
}
.somatic-hint:empty {
  padding: 0;
  margin: 0;
}

/* Body log followup (48hr check back) */
.followup-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 14px;
}
.followup-card .eyebrow { color: var(--ink-muted); }
.followup-card .followup-quote {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 10px 0 14px;
  padding-left: 14px;
  border-left: 2px solid var(--ink);
  line-height: 1.5;
}
.followup-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.followup-btn {
  flex: 1;
  padding: 10px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.86rem;
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
  transition: all .15s;
  min-width: 80px;
}
.followup-btn:hover {
  border-color: var(--ink);
  background: var(--paper-warm);
}

/* ============================================================
   PATTERNS SCREEN
   ============================================================ */
.stage-card {
  background: linear-gradient(135deg, var(--card) 0%, var(--paper-warm) 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 16px;
}
.stage-card p { margin-bottom: 14px; color: var(--ink); }
.stage-track {
  display: flex;
  gap: 4px;
  margin: 4px 0 6px;
}
.stage-dot {
  flex: 1;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  transition: background .4s;
}
.stage-dot.reached { background: var(--cobalt); }
.stage-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.62rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.stage-labels span { flex: 1; text-align: center; }

.weekly-report {
  background:
    radial-gradient(circle at 90% 10%, rgba(255,255,255,0.4) 0%, transparent 50%),
    linear-gradient(135deg, var(--sky) 0%, var(--blush) 100%);
  border-radius: var(--radius);
  padding: 24px 22px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.weekly-report .eyebrow { color: var(--ink); opacity: 0.55; margin-bottom: 8px; }
.weekly-report h3 { position: relative; font-size: 1.3rem; margin-bottom: 12px; }
.weekly-report p {
  position: relative;
  color: var(--ink);
  opacity: 0.85;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 10px;
}
.weekly-report em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 500;
}

.weekly-pride {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(26,26,26,0.15);
}
.weekly-pride-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.weekly-pride-list li {
  padding: 6px 0 6px 20px;
  position: relative;
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.45;
}
.weekly-pride-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--ink);
  font-weight: 600;
}

.correlation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.correlation-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 16px 14px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.correlation-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.18;
  pointer-events: none;
}
.correlation-card.sleep::before {
  background: linear-gradient(135deg, var(--sky) 0%, var(--plum) 100%);
}
.correlation-card.moon::before {
  background: linear-gradient(135deg, var(--blush) 0%, var(--sky) 100%);
}
.correlation-card.cycle::before {
  background: linear-gradient(135deg, var(--honey) 0%, var(--blush) 100%);
}
.correlation-card.photo::before {
  background: linear-gradient(135deg, var(--forest-wash) 0%, var(--sky) 100%);
}
.correlation-card.body::before {
  background: linear-gradient(135deg, var(--phase-luteal-wash) 0%, var(--honey) 100%);
}
.correlation-card > * { position: relative; z-index: 1; }
.correlation-title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 500;
  margin-bottom: 8px;
  letter-spacing: -0.005em;
}
.correlation-body {
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.45;
  flex: 1;
}
.correlation-confidence {
  margin-top: 10px;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}
.confidence-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.confidence-strong { background: var(--forest); }
.confidence-medium { background: var(--honey); }
.confidence-early { background: var(--border); }

.pattern-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-soft);
}
.pattern-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.6;
}
.pattern-card.dip::before {
  background: linear-gradient(135deg, transparent 40%, var(--phase-menstrual-wash) 100%);
}
.pattern-card.peak::before {
  background: linear-gradient(135deg, transparent 40%, var(--forest-wash) 100%);
}
.pattern-card.moon::before {
  background: linear-gradient(135deg, transparent 40%, var(--sky) 100%);
  opacity: 0.4;
}
.pattern-card.cycle::before {
  background: linear-gradient(135deg, transparent 40%, var(--phase-ovulatory-wash) 100%);
}
.pattern-card.steady::before {
  background: linear-gradient(135deg, transparent 40%, var(--paper-warm) 100%);
}
.pattern-card > * { position: relative; z-index: 1; }
.pattern-card h3 {
  margin-bottom: 8px;
  font-size: 1.15rem;
  font-family: var(--font-display);
  font-weight: 500;
}
.pattern-card p {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.pattern-source {
  font-size: 0.75rem;
  color: var(--ink-muted);
  margin-top: 10px;
}

.quick-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
  margin-top: 18px;
  position: relative;
}
.quick-stats .stat {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 16px 10px 14px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, transform .1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.quick-stats .stat:hover {
  border-color: var(--ink-ghost);
}
.quick-stats .stat:active {
  transform: scale(0.98);
}
.stat-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  display: block;
  color: var(--ink);
  line-height: 1.1;
  text-transform: capitalize;
}
.stat-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-muted);
  font-weight: 600;
  line-height: 1.3;
}
.stat-sub {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.72rem;
  color: var(--ink-soft);
  line-height: 1.3;
  margin-top: 2px;
}

/* The "+ pin more" / "edit" affordance — full-width in its own grid cell */
.stat-edit-btn {
  grid-column: 1 / -1;
  margin-top: 4px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 10px;
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all .15s;
}
.stat-edit-btn:hover {
  color: var(--ink);
  border-color: var(--ink);
}

/* ---------- Stat picker modal ---------- */
.stat-picker-content {
  padding: 4px 0 8px;
}
.stat-picker-list {
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 4px;
}
.stat-picker-cat-label {
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin: 16px 0 6px;
}
.stat-picker-cat-label:first-child {
  margin-top: 4px;
}
.stat-picker-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat-picker-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 4px;
  border-top: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background .15s;
}
.stat-picker-item:first-of-type {
  border-top: none;
}
.stat-picker-item:hover:not(.disabled) {
  background: var(--paper-warm);
}
.stat-picker-item input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--cobalt);
  cursor: pointer;
}
.stat-picker-item.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.stat-picker-item.disabled input { cursor: not-allowed; }
.stat-picker-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.stat-picker-label {
  font-size: 0.94rem;
  color: var(--ink);
  font-weight: 500;
}
.stat-picker-sub {
  font-size: 0.78rem;
  color: var(--ink-muted);
  line-height: 1.4;
}
.stat-picker-item.pinned .stat-picker-label {
  color: var(--cobalt);
}

/* ============================================================
   ASTRO SCREEN
   ============================================================ */
.moon-hero {
  background:
    radial-gradient(circle at 80% 18%, rgba(255,255,255,0.45) 0%, transparent 50%),
    linear-gradient(135deg, #F7D8D0 0%, #D9DFFB 50%, #C9D4F8 100%);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  margin-bottom: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.moon-hero-row {
  position: relative;
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-bottom: 12px;
}
.moon-visual-xl {
  font-size: 4.5rem;
  line-height: 1;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.12));
}
.moon-hero h3 { font-size: 1.5rem; margin-bottom: 4px; }
.moon-hero p { color: var(--ink-soft); position: relative; font-size: 1rem; line-height: 1.5; }
.moon-notes {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink);
  opacity: 0.7;
  margin-top: 10px;
  position: relative;
  font-size: 0.95rem;
}

/* About this phase card */
.moon-about-meta {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.moon-about-section {
  padding: 14px 16px;
  background: var(--paper-warm);
  border-radius: var(--radius-sm);
}
.moon-about-section .moon-about-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.moon-about-section p:last-child {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
}

/* Coming up moon events */
.moon-upcoming-card { }
.moon-upcoming-list {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}

/* Cycle upcoming — same styling as moon upcoming */
.cycle-upcoming-list {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}
.cycle-upcoming-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
  align-items: center;
}
.cycle-upcoming-item:last-child { border-bottom: none; }
.cycle-upcoming-icon {
  font-size: 1.2rem;
  line-height: 1;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}
.cycle-upcoming-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cycle-upcoming-meta strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--ink);
}
.cycle-upcoming-meta span {
  font-size: 0.86rem;
  color: var(--ink-muted);
  font-family: var(--font-italic);
  font-style: italic;
}
.moon-upcoming-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
  align-items: center;
}
.moon-upcoming-item:last-child { border-bottom: none; }
.moon-upcoming-icon {
  font-size: 1.4rem;
  line-height: 1;
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}
.moon-upcoming-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.moon-upcoming-meta strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--ink);
}
.moon-upcoming-meta span {
  font-size: 0.86rem;
  color: var(--ink-muted);
  font-family: var(--font-italic);
  font-style: italic;
}

/* Moon returns card */
.moon-returns-card .moon-return-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.moon-returns-card .moon-return-item:last-child { border-bottom: none; }
.moon-returns-card .return-date {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.moon-returns-card .return-text {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
}

.moon-upcoming .upcoming-item {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
  align-items: center;
}
.moon-upcoming .upcoming-item:last-child { border-bottom: none; }
.upcoming-icon { font-size: 1.4rem; line-height: 1; }
.upcoming-meta { flex: 1; }
.upcoming-meta strong {
  display: block;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  margin-bottom: 2px;
}
.upcoming-meta span {
  font-size: 0.82rem;
  color: var(--ink-muted);
}

.moon-returns { background: linear-gradient(135deg, var(--card) 0%, var(--sky) 100%); border: 1px solid var(--border-soft); }
.moon-returns::before { background: none !important; }
.moon-return-item {
  padding: 12px 0;
  border-bottom: 1px solid rgba(26,26,26,0.08);
}
.moon-return-item:last-child { border-bottom: none; }
.moon-return-item .return-date {
  font-size: 0.78rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.moon-return-item .return-text {
  color: var(--ink);
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.45;
}

/* Birth chart */
.birthchart-card .form-row { margin-bottom: 14px; }
.birthchart-card label {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 6px;
  font-weight: 500;
}
.birthchart-card input,
.birthchart-card select,
.form-row input,
.form-row select {
  width: 100%;
  padding: 12px 14px;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.95rem;
  font-family: inherit;
}
.birthchart-card input:focus,
.birthchart-card select:focus,
.form-row input:focus,
.form-row select:focus { outline: none; border-color: var(--cobalt); background: var(--card); }

.birth-display {
  margin-top: 20px;
  padding: 20px;
  background: linear-gradient(135deg, var(--sky) 0%, var(--blush) 100%);
  border-radius: var(--radius);
}
.birth-display h4 {
  color: var(--ink);
  margin-bottom: 12px;
}
.birth-display .placement {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(26,26,26,0.1);
}
.birth-display .placement:last-of-type { border-bottom: none; }
.placement-label {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
  font-weight: 500;
}
.placement-val {
  font-weight: 600;
  color: var(--ink);
  font-size: 1.1rem;
  font-family: var(--font-display);
}
.placement-blurb {
  margin: 6px 0 12px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  font-family: var(--font-italic);
  font-style: italic;
  line-height: 1.45;
}

/* Today's reading card */
.reading-body {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--ink);
  margin-top: 8px;
}
.reading-ask {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.reading-ask:empty {
  padding: 0;
  border: none;
  margin: 0;
}

/* Week astro notes */
.week-astro-notes {
  margin-top: 10px;
}
.week-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
}
.week-note:last-child { border-bottom: none; }
.week-note-icon {
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}
.week-note-meta { flex: 1; }
.week-note-meta strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 2px;
}
.week-note-meta span {
  font-size: 0.86rem;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* Birth chart summary */
#birthChartSummaryBody {
  margin-top: 10px;
}
.chart-placement {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.chart-placement:last-of-type { border-bottom: none; }
.chart-place-label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.chart-place-val {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
}
.chart-place-blurb {
  width: 100%;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin-top: 4px;
  line-height: 1.45;
}

/* Coming soon card - magazine-style full block */
.coming-soon-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 14px;
}
.coming-soon-card .eyebrow {
  color: var(--ink-muted);
}
.coming-soon-card h3 {
  margin-bottom: 10px;
  font-size: 1.3rem;
}
.coming-soon-card p {
  color: var(--ink-soft);
  line-height: 1.6;
  font-size: 0.95rem;
}

.coming-soon-inline {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--paper-warm);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
}
.coming-soon-inline p {
  font-size: 0.85rem;
  color: var(--ink-muted);
}

/* ============================================================
   REFLECT
   ============================================================ */
.prompt-card {
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,0.4) 0%, transparent 50%),
    linear-gradient(135deg, var(--blush) 0%, var(--card) 70%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 16px;
}
.prompt-card .eyebrow { color: var(--rust); }
.prompt-text {
  font-family: var(--font-italic);
  font-size: 1.18rem;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink);
  margin: 10px 0 16px;
  font-weight: 500;
}
.prompt-actions {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
}

.reflect-actions-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 28px;
}
.reflect-btn {
  padding: 16px 8px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink);
  transition: transform .1s;
  min-height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.2;
}
.reflect-btn:hover { transform: translateY(-1px); }

.entries-section h3 { margin-bottom: 14px; }

/* Filter chips */
.entries-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-soft);
}
.entries-filter-chip {
  padding: 8px 14px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.entries-filter-chip:hover {
  border-color: var(--ink-ghost);
  color: var(--ink);
}
.entries-filter-chip.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Entry kind badges */
.entry-kind-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  margin-right: 6px;
}
.entry-kind-writing { background: rgba(176, 156, 201, 0.18); color: var(--plum); }
.entry-kind-prompt { background: rgba(241, 213, 146, 0.25); color: #8B6914; }
.entry-kind-dream { background: rgba(201, 212, 248, 0.4); color: #4A5BA8; }
.entry-kind-idea { background: rgba(247, 216, 208, 0.5); color: #B85450; }
.entry-kind-body { background: rgba(176, 156, 201, 0.18); color: var(--plum); }
.entry-kind-onething { background: rgba(241, 213, 146, 0.35); color: #8B6914; }
.entry-kind-photos { background: rgba(201, 212, 248, 0.4); color: #4A5BA8; }

.entry-photos-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.entry-photos-grid img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 10px;
}

.entries-list .entry-item {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: transform .1s;
}
.entries-list .entry-item:hover { transform: translateY(-1px); }
.entries-list .entry-item-body {
  background: var(--card);
}
.entry-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--ink-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.entry-preview {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.entry-item.expanded .entry-preview { -webkit-line-clamp: unset; }
.empty {
  text-align: center;
  padding: 32px 0;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1rem;
}

.return-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 0;
  cursor: pointer;
}
.return-toggle input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--cobalt);
  flex-shrink: 0;
}
.return-toggle span {
  font-size: 0.9rem;
  color: var(--ink);
  line-height: 1.4;
}

/* ============================================================
   TOOLS
   ============================================================ */
.tool-nav {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}
.tool-nav-btn {
  padding: 12px 12px;
  border: 1px solid var(--border-soft);
  background: var(--card);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--ink-muted);
  font-weight: 500;
  transition: all .15s;
  white-space: nowrap;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tool-nav-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.tool-nav-btn:hover:not(.active) {
  border-color: var(--ink-ghost);
  color: var(--ink);
}

/* ============================================================
   WHY MIGHT I FEEL THIS WAY — data synthesis tool
   ============================================================ */
.why-intro {
  margin-bottom: 22px;
}
.why-intro h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
  line-height: 1.2;
}
.why-results {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
}
.why-card {
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.why-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.why-card-icon {
  font-size: 1.05rem;
  line-height: 1;
  opacity: 0.7;
}
.why-card-title {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.why-card-body {
  font-size: 0.96rem;
  line-height: 1.5;
  color: var(--ink);
}
.why-card-body strong {
  font-weight: 500;
}
.why-empty {
  padding: 30px 24px;
  text-align: center;
  background: var(--paper-warm);
  border-radius: var(--radius-sm);
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink-muted);
  line-height: 1.5;
}
.why-footer {
  margin-top: 20px;
  padding: 18px 20px;
  background: var(--paper-warm);
  border-radius: var(--radius-sm);
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--ink-soft);
  font-family: var(--font-italic);
  font-style: italic;
}
.why-footer p { margin-bottom: 6px; }
.why-footer p:last-child { margin-bottom: 0; }

/* ============================================================
   REFRAME TAB
   ============================================================ */
.reframe-intro {
  margin-bottom: 22px;
}
.reframe-intro h3 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
  line-height: 1.2;
}
.reframe-state-picker h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  margin-bottom: 14px;
  color: var(--ink);
}
.reframe-states {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}
.reframe-state {
  padding: 10px 16px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s;
  text-align: left;
}
.reframe-state:hover {
  border-color: var(--ink-ghost);
  color: var(--ink);
}
.reframe-state.active {
  background: var(--plum);
  border-color: var(--plum);
  color: var(--paper);
  font-weight: 500;
}

.reframe-result {
  margin-bottom: 26px;
  padding: 24px 22px;
  background:
    radial-gradient(circle at 85% 15%, rgba(176, 156, 201, 0.18) 0%, transparent 55%),
    var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}
.reframe-result-head {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.reframe-result-body {
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--ink);
}
.reframe-result-body p {
  margin-bottom: 14px;
}
.reframe-result-body p:last-child { margin-bottom: 0; }
.reframe-result-body em {
  font-family: var(--font-italic);
  font-style: italic;
}
.reframe-result-practice {
  margin-top: 18px;
  padding: 16px 18px;
  background: var(--paper-warm);
  border-radius: var(--radius-sm);
}
.reframe-result-practice-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 8px;
}
.reframe-result-practice ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.reframe-result-practice li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  font-size: 0.94rem;
  line-height: 1.5;
}
.reframe-result-practice li::before {
  content: '·';
  position: absolute;
  left: 4px;
  font-weight: 700;
  color: var(--ink-muted);
}
.reframe-result-practice li:last-child { margin-bottom: 0; }

.reframe-rewrite-card {
  padding: 22px 22px 20px;
  background:
    radial-gradient(circle at 85% 15%, rgba(241, 213, 146, 0.18) 0%, transparent 55%),
    var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  margin-bottom: 18px;
}
.reframe-rewrite-card h4 {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 4px;
  line-height: 1.4;
  color: var(--ink);
}
.reframe-rewrite-card textarea {
  width: 100%;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--ink);
  resize: vertical;
  min-height: 120px;
}
.reframe-rewrite-actions {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.reframe-rewrite-actions .primary-btn { width: auto; min-width: 140px; }

.reframe-recent {
  margin-top: 20px;
}
.reframe-recent:empty { display: none; }
.reframe-recent-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.reframe-recent-item {
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.reframe-recent-item-date {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.reframe-recent-item-text {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--ink);
}

.tool-pane { display: none; animation: fadeIn .3s ease; }
.tool-pane.active { display: block; }

/* Shifts - contextual only, simple list */
.shift-group { margin-bottom: 26px; }
.shift-group h3 { margin-bottom: 8px; font-size: 1.1rem; }
.shift-group .shift-desc {
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin-bottom: 12px;
  font-family: var(--font-italic);
  font-style: italic;
}
.shift-list { display: flex; flex-direction: column; gap: 8px; }
.shift-item {
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--ink);
  transition: all .15s;
}
.shift-item:hover {
  transform: translateY(-1px);
  border-color: var(--border);
}

/* Plants - with botanical illustrations */
.plant-preamble {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin-bottom: 20px;
}
.plant-preamble p:not(.muted) {
  color: var(--ink);
  font-size: 0.98rem;
  margin-bottom: 6px;
  font-family: var(--font-italic);
  font-style: italic;
}

.plant-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.plant-card {
  background: var(--card-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 8px 8px 16px;
  cursor: pointer;
  transition: transform .15s;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.plant-card:hover { transform: translateY(-1px); }
.plant-illus {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: transparent;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  mix-blend-mode: multiply;
}
.plant-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.plant-common {
  font-size: 0.72rem;
  color: var(--ink-muted);
  font-family: var(--font-italic);
  font-style: italic;
  margin-bottom: 8px;
  padding: 0 4px;
}
.plant-tag {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--forest-deep);
  font-weight: 600;
}

.plant-detail .plant-header {
  margin-bottom: 20px;
  text-align: center;
}
.plant-detail .plant-illus-lg {
  display: block;
  width: 160px;
  height: 160px;
  margin: 0 auto 14px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.plant-detail .plant-name-lg {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 500;
  margin-bottom: 2px;
}
.plant-detail .plant-common-lg {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink-muted);
  margin-bottom: 18px;
}
.plant-detail .plant-section { margin-bottom: 18px; }
.plant-detail h4 { margin-bottom: 6px; }
.plant-detail p { font-size: 0.95rem; line-height: 1.55; color: var(--ink-soft); }
.plant-warn {
  background: transparent;
  border: none;
  border-top: 1px solid var(--ink);
  border-radius: 0;
  padding: 14px 0 0;
  margin-top: 22px;
}
.plant-warn h4 {
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 10px;
}
.plant-warn p {
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.55;
  margin-bottom: 4px;
}

.plant-hint {
  margin-top: 18px;
  padding: 14px 16px;
  background: var(--paper-warm);
  border-radius: var(--radius-sm);
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

/* Yearly Review */
.review-locked {
  text-align: center;
  padding: 40px 20px;
  background: var(--card);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.review-locked h3 { margin-bottom: 8px; font-family: var(--font-italic); font-style: italic; }
.review-full {
  background: linear-gradient(180deg, var(--card) 0%, var(--paper-warm) 100%);
  border-radius: var(--radius);
  padding: 28px 24px;
  border: 1px solid var(--border-soft);
}
.review-full h2 {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 4px;
}
.review-full .review-sub {
  text-align: center;
  margin-bottom: 24px;
  color: var(--ink-muted);
  font-family: var(--font-italic);
  font-style: italic;
}
.review-stat {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
}
.review-stat:last-child { border-bottom: none; }
.review-stat .stat-key {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.review-stat .stat-value {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--ink);
  font-weight: 500;
}

/* ============================================================
   SETTINGS — incl. Donate, Magazine, Legal
   ============================================================ */
.button-row { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; }

.pref-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--border-soft);
}
.pref-row:first-of-type { border-top: none; padding-top: 6px; }
.pref-row > div { flex: 1; }
.pref-row p { margin: 0; }

.pref-toggle {
  display: inline-block;
  width: 44px; height: 26px;
  position: relative;
  flex-shrink: 0;
}
.pref-toggle input { opacity: 0; width: 0; height: 0; }
.pref-slider {
  position: absolute;
  inset: 0;
  background: var(--border);
  border-radius: 26px;
  transition: background .2s;
  cursor: pointer;
}
.pref-slider::before {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: var(--card);
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.pref-toggle input:checked + .pref-slider { background: var(--cobalt); }
.pref-toggle input:checked + .pref-slider::before { transform: translateX(18px); }

/* ============================================================
   V3 — pref-row-text (label + sub label inside pref-row)
   ============================================================ */
.pref-row-text { flex: 1; min-width: 0; }
.pref-row-label {
  font-size: 0.96rem;
  color: var(--ink);
  font-weight: 500;
}
.pref-row-sub {
  font-size: 0.8rem;
  color: var(--ink-muted);
  margin-top: 2px !important;
}

/* ============================================================
   V3 — pref-select-row (label + select side by side)
   ============================================================ */
.pref-select-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
}
.pref-select-row label {
  font-size: 0.96rem;
  color: var(--ink);
  font-weight: 500;
}
.pref-select-row select {
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--ink);
  cursor: pointer;
}

/* ============================================================
   V3 — Body Modes grid
   ============================================================ */
.body-modes-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.body-mode-toggle {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 4px;
  border-top: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background .15s;
}
.body-mode-toggle:first-of-type { border-top: none; }
.body-mode-toggle:hover {
  background: var(--paper-warm);
}
/* V3 6D — visual selected state for body modes (multi-select) */
.body-mode-toggle:has(input:checked) {
  background: var(--paper-warm);
}
.body-mode-toggle:has(input:checked) .body-mode-text strong {
  color: var(--cobalt, #2D4A87);
}
.body-mode-toggle input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--cobalt);
  cursor: pointer;
}
.body-mode-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.body-mode-name {
  font-size: 0.96rem;
  color: var(--ink);
  font-weight: 500;
}
.body-mode-desc {
  font-size: 0.82rem;
  color: var(--ink-muted);
  line-height: 1.45;
}

/* ============================================================
   V3 — Privacy deep (the honest disclaimers)
   ============================================================ */
.privacy-deep p {
  font-size: 0.94rem;
  line-height: 1.6;
  margin-bottom: 12px;
  color: var(--ink);
}
.privacy-deep p strong {
  font-weight: 600;
  color: var(--ink);
}
.privacy-risks {
  list-style: none;
  margin: 8px 0 14px 0;
  padding: 0;
}
.privacy-risks li {
  position: relative;
  padding-left: 18px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.privacy-risks li::before {
  content: '·';
  position: absolute;
  left: 4px;
  top: -2px;
  font-size: 1.2rem;
  color: var(--ink-muted);
}

/* ============================================================
   V3 — Low-stim mode (when sensitivity.lowStim is on)
   ============================================================ */
body.low-stim {
  --radius: 8px;
  --radius-sm: 6px;
}
body.low-stim *,
body.low-stim *::before,
body.low-stim *::after {
  animation-duration: 0s !important;
  transition-duration: 0s !important;
}
body.low-stim .card,
body.low-stim .checkin,
body.low-stim .one-thing-card,
body.low-stim .weather-report {
  border-radius: var(--radius-sm) !important;
}
body.low-stim button,
body.low-stim .text-btn,
body.low-stim .primary-btn {
  min-height: 44px;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}
body.low-stim .moon-hero,
body.low-stim .celebration-card,
body.low-stim .connection-card {
  background: var(--card) !important;
  border: 1px solid var(--border-soft) !important;
}

.pref-time {
  padding-left: 58px;
  display: none;
}
.pref-time.visible { display: flex; }
.pref-time label { font-size: 0.85rem; color: var(--ink-muted); }
.pref-time input {
  padding: 6px 12px;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-family: inherit;
}

.form-row { margin-bottom: 14px; }
.form-row label {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-bottom: 6px;
  font-weight: 500;
}

/* Donate card */
.donate-card {
  background:
    radial-gradient(circle at 85% 15%, rgba(255,255,255,0.4) 0%, transparent 50%),
    linear-gradient(135deg, var(--blush) 0%, var(--sky) 100%);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 24px 22px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.donate-card h3 { position: relative; margin-bottom: 10px; font-size: 1.3rem; }
.donate-card .eyebrow { color: var(--rust); position: relative; }
.donate-card p {
  position: relative;
  color: var(--ink);
  font-size: 0.94rem;
  line-height: 1.55;
  margin-bottom: 12px;
}
.donate-card em {
  font-family: var(--font-italic);
  font-style: italic;
}
.donate-row {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  position: relative;
}
.donate-btn {
  flex: 1;
  padding: 13px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 100px;
  font-weight: 500;
  font-size: 0.94rem;
  text-align: center;
  text-decoration: none;
  transition: all .15s;
  display: block;
  letter-spacing: 0.01em;
}
.donate-btn:hover { filter: brightness(1.15); }
.donate-btn.secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

/* Magazine link */
.magazine-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  margin-bottom: 14px;
  cursor: pointer;
  transition: transform .15s;
  text-decoration: none;
  color: inherit;
}
.magazine-link:hover { transform: translateY(-1px); }
.magazine-link-meta { flex: 1; }
.magazine-link-meta h3 {
  margin-bottom: 4px;
  font-size: 1.1rem;
}
.magazine-link-meta p {
  font-size: 0.88rem;
  color: var(--ink-muted);
  margin: 0;
}
.magazine-link-arrow {
  color: var(--ink-ghost);
  font-size: 1.2rem;
  margin-left: 8px;
}

/* Legal menu rows */
.legal-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
  cursor: pointer;
  transition: color .15s;
}
.legal-row:last-of-type { border-bottom: none; }
.legal-row:hover { color: var(--cobalt-deep); }
.legal-row span { font-size: 0.94rem; color: var(--ink); }
.legal-row .arrow { color: var(--ink-ghost); font-size: 1.1rem; }

/* Cycle phase education */
.phase-edu-preview {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}
.phase-edu-preview h4 { margin-bottom: 10px; }

.phase-item {
  border-top: 1px solid var(--border-soft);
  padding: 14px 0;
}
.phase-item:first-child { border-top: none; padding-top: 4px; }
.phase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.phase-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  text-transform: capitalize;
  color: var(--ink);
}
.phase-days {
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin-top: 2px;
}
.phase-chev {
  color: var(--ink-ghost);
  font-size: 1.1rem;
  transition: transform .2s;
}
.phase-item.open .phase-chev { transform: rotate(90deg); }
.phase-body {
  display: none;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-soft);
}
.phase-item.open .phase-body { display: block; }
.phase-body h5 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 12px 0 4px;
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-weight: 600;
}
.phase-body h5:first-child { margin-top: 0; }
.phase-body p {
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 4px;
  color: var(--ink-soft);
}

/* Meds edit */
.meds-edit-list { margin: 12px 0; }
.med-edit-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.med-edit-row:last-child { border-bottom: none; }
.med-name { color: var(--ink); font-size: 0.95rem; }
.med-remove { color: var(--ink-muted); font-size: 0.85rem; font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.med-remove:hover { color: var(--ink); }

.add-med-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.add-med-row input {
  flex: 1;
  padding: 10px 14px;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  font-size: 0.9rem;
}

/* Danger */
.danger-inline {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}
.danger-inline h4 { color: var(--ink); margin-bottom: 4px; font-family: var(--font-display); font-size: 1rem; text-transform: none; letter-spacing: 0; }

.danger-card {
  background: var(--ink);
  color: var(--paper);
  border: none;
}
.danger-card h3 { color: var(--paper); }
.danger-card p { color: var(--paper); opacity: 0.8; }
.danger-btn {
  background: var(--paper);
  color: var(--ink);
  border: none;
  padding: 12px 22px;
  border-radius: 100px;
  font-weight: 600;
  margin-top: 12px;
  font-size: 0.9rem;
  transition: background .15s;
  letter-spacing: 0.02em;
}
.danger-btn:hover {
  background: #fff;
}
.danger-inline .danger-btn {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.danger-inline .danger-btn:hover {
  background: var(--ink);
  color: var(--paper);
}

/* EII card */
.eii-card {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.eii-card .eyebrow { color: var(--ink-muted); }
.eii-card > p { font-size: 0.9rem; margin-bottom: 14px; }

.eii-list {
  list-style: none;
  margin: 16px 0;
}
.eii-list li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(26,26,26,0.08);
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.eii-list li:last-child { border-bottom: none; }
.eii-list li strong { color: var(--ink); font-weight: 600; }

.eii-footer {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.45;
  margin: 18px 0 20px;
  padding: 18px 0 0;
  border-top: 1px solid rgba(26, 26, 26, 0.12);
  color: var(--ink);
  text-align: left;
  font-weight: 500;
}

.eii-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--ink);
  color: #C6F55C;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.eii-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #C6F55C;
  box-shadow: 0 0 10px #C6F55C;
}

/* ============================================================
   V3 — MODE-SPECIFIC LOG MODALS
   (Mask Tax, Sensory Load, Fog Day)
   ============================================================ */
.mode-log-content { padding: 4px 0 8px; }
.mode-log-content h3 { margin: 0 0 6px; padding-right: 36px; }
.mode-log-section { margin-top: 18px; }
.mode-log-section .log-label {
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 10px;
}
.mode-log-content textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper-warm);
  resize: vertical;
  box-sizing: border-box;
}
.mode-log-content textarea:focus {
  outline: none;
  border-color: var(--ink);
  background: var(--card);
}
.mode-log-scale {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.scale-chip {
  flex: 1;
  min-width: 70px;
  padding: 10px 10px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s;
  text-align: center;
}
.scale-chip:hover { border-color: var(--ink-ghost); }
.scale-chip.selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 500;
}
.mode-log-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ctx-chip {
  padding: 8px 14px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.86rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all .15s;
}
.ctx-chip:hover { border-color: var(--ink-ghost); }
.ctx-chip.selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 500;
}

/* Mode-specific check-in prompts — once logged today, dim with checkmark */
.checkin-prompt-btn.logged-today {
  background: var(--card);
  border-color: var(--cobalt);
  opacity: 0.85;
}
.checkin-prompt-btn.logged-today::after {
  content: '✓';
  color: var(--cobalt);
  font-size: 1.2rem;
}
.checkin-prompt-btn.logged-today .checkin-prompt-q {
  color: var(--ink-muted);
}

/* ============================================================
   V3 — SIT WITH THIS modal (universal save pattern)
   ============================================================ */
.sit-content {
  padding: 4px 0 8px;
}
.sit-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 8px;
}
.sit-title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 14px 0;
  padding-right: 40px;
  letter-spacing: -0.01em;
}
.sit-prompt {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  padding: 14px 16px;
  background: var(--paper-warm);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--ink-ghost);
  margin-bottom: 16px;
}
.sit-textarea {
  width: 100%;
  min-height: 140px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--card);
  resize: vertical;
  box-sizing: border-box;
}
.sit-textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.sit-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}
.sit-stays {
  margin-top: 12px;
  text-align: center;
  font-size: 0.78rem;
}

/* Sit prompt list — used inside tarot card modal (and others) to
   present multiple prompts as discrete tappable items */
.sit-prompt-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sit-prompt-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  width: 100%;
  padding: 14px 16px;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.sit-prompt-item:hover {
  border-color: var(--ink);
  background: var(--card);
}
.sit-prompt-item:active {
  transform: scale(0.99);
}
.sit-prompt-text {
  flex: 1;
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.5;
}
.sit-prompt-arrow {
  color: var(--ink-muted);
  font-size: 1.3rem;
  flex-shrink: 0;
  line-height: 1;
}

/* ============================================================
   V3 — CITATION superscript + popover
   ============================================================ */
sup.cite {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.62em;
  font-weight: 600;
  color: var(--cobalt);
  cursor: pointer;
  padding: 0 2px;
  vertical-align: super;
  line-height: 1;
  user-select: none;
}
sup.cite:hover {
  color: var(--ink);
  text-decoration: underline;
}

.cite-popover {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 18, 0.4);
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.cite-popover.active {
  display: flex;
}
.cite-popover-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 22px 24px;
  max-width: 420px;
  width: 100%;
  position: relative;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}
.cite-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: none;
  font-size: 1.4rem;
  color: var(--ink-muted);
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
}
.cite-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 8px;
  margin-top: 0;
}
.cite-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.35;
  margin: 0 0 10px 0;
  padding-right: 24px;
}
.cite-detail {
  font-family: var(--font-body);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 14px 0;
}
.cite-link {
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--cobalt);
  text-decoration: none;
  font-weight: 500;
}
.cite-link:hover {
  text-decoration: underline;
}

/* ============================================================
   LEGAL PAGES (full-screen modal content)
   ============================================================ */
.legal-content {
  max-width: 100%;
}
.legal-content h3 {
  margin-bottom: 8px;
  font-size: 1.5rem;
}
.legal-content .legal-updated {
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.legal-content h4 {
  margin: 20px 0 8px;
  font-size: 0.8rem;
  color: var(--ink);
}
.legal-content p {
  font-size: 0.94rem;
  line-height: 1.6;
  margin-bottom: 12px;
  color: var(--ink-soft);
}
.legal-content ul {
  margin: 10px 0 14px 20px;
}
.legal-content li {
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 8px;
  color: var(--ink-soft);
}
.legal-content strong { color: var(--ink); }
.legal-content em {
  font-family: var(--font-italic);
  font-style: italic;
}
.legal-content a {
  color: var(--cobalt-deep);
}

/* ============================================================
   BOTTOM NAV
   ============================================================ */
.bottom-nav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(245, 241, 234, 0.95);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--border-soft);
  display: flex;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  z-index: 40;
  max-width: var(--mobile-max);
  margin: 0 auto;
}
.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px;
  font-size: 0.62rem;
  color: var(--ink-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--font-body);
  transition: color .15s;
}
.nav-btn.active { color: var(--ink); }
.nav-icon { font-size: 1.3rem; line-height: 1; color: var(--ink); }
.nav-btn:not(.active) .nav-icon { color: var(--ink-muted); }

/* ============================================================
   MODALS
   ============================================================ */
.modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(26, 26, 26, 0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 300;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.modal.active { display: flex; animation: modalFade .2s ease; }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   INSTALL PROMPT MODAL
   ============================================================ */
.install-card {
  padding-top: 32px;
}
.install-hero {
  background:
    radial-gradient(circle at 85% 20%, rgba(255,255,255,0.5) 0%, transparent 55%),
    linear-gradient(135deg, #F7D8D0 0%, #E5DCFB 45%, #C9D4F8 100%);
  margin: -32px -24px 22px;
  padding: 28px 24px 24px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  text-align: center;
}
.install-hero .install-mark {
  font-size: 2.8rem;
  line-height: 1;
  margin-bottom: 14px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.08));
}
.install-hero h3 {
  font-size: 1.5rem;
  margin-bottom: 6px;
  padding-right: 0;
}
.install-hero .install-sub {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink);
  opacity: 0.7;
  font-size: 0.98rem;
}

.install-why {
  margin-bottom: 22px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--border-soft);
}
.install-why p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 10px;
}
.install-why p:last-child { margin-bottom: 0; }

.install-steps {
  margin-bottom: 22px;
}
.install-step-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 14px;
}
.install-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}
.install-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.88rem;
  font-family: var(--font-body);
}
.install-step-body {
  flex: 1;
}
.install-step-body strong {
  display: block;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.98rem;
  margin-bottom: 2px;
}
.install-step-body strong .install-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--paper-warm);
  border-radius: 6px;
  vertical-align: middle;
  margin: 0 2px;
}
.install-step-body span {
  color: var(--ink-muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.install-browser-warning {
  padding: 14px 16px;
  background: var(--paper-warm);
  border-radius: var(--radius-sm);
  margin-bottom: 18px;
}
.install-browser-warning p {
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.5;
}
.install-browser-warning strong {
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

.install-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}
.install-dismiss {
  background: transparent;
  color: var(--ink-muted);
  padding: 10px;
  font-size: 0.88rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.install-dismiss:hover { color: var(--ink); }

/* Settings install card: hides when already installed */
.install-settings-card.installed .install-settings-card-body {
  display: none;
}

.modal-card {
  background: var(--paper);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 28px 24px 36px;
  width: 100%;
  max-width: var(--mobile-max);
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: modalSlide .3s cubic-bezier(.2,.9,.3,1);
}
@keyframes modalSlide { from { transform: translateY(24px); } to { transform: none; } }

@media (min-width: 600px) {
  .modal { align-items: center; padding: 20px; }
  .modal-card { border-radius: var(--radius-lg); }
}

.modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  border-radius: 50%;
  font-size: 1.4rem;
  color: var(--ink-muted);
  background: var(--paper-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  z-index: 5;
}
.modal-close:hover { background: var(--paper-deep); }

.modal-card h3 {
  margin-bottom: 14px;
  padding-right: 40px;
  font-size: 1.35rem;
}

.modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}
.modal-primary {
  flex: 1;
  padding: 14px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 100px;
  font-weight: 500;
}
.modal-primary:hover { background: #000; }
.modal-ghost {
  flex: 1;
  padding: 14px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 100px;
  font-weight: 500;
}

.disclaimer-body p {
  margin-bottom: 14px;
  line-height: 1.6;
  font-size: 0.95rem;
}
.disclaimer-body ul {
  margin: 0 0 14px 18px;
}
.disclaimer-body li {
  margin-bottom: 10px;
  font-size: 0.92rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.disclaimer-body em {
  font-family: var(--font-italic);
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
}

/* ============================================================
   ACCESSIBILITY — text size, high contrast, bold text
   ============================================================ */

/* Guided mode (one question at a time) */
.guided-progress {
  height: 2px;
  background: var(--border-soft);
  margin-bottom: 24px;
  border-radius: 2px;
  overflow: hidden;
}
.guided-bar {
  display: block;
  height: 100%;
  background: var(--ink);
  width: 0;
  transition: width .4s cubic-bezier(.2,.9,.3,1);
}
.guided-step {
  min-height: 140px;
  padding: 8px 0 12px;
}
.guided-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 10px;
}
.guided-question {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.25;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 18px;
}
.guided-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid var(--border-soft);
}
.guided-nav .text-btn {
  padding: 10px 0;
}
#guidedBack[disabled],
#guidedNext[disabled] {
  opacity: 0.35;
  pointer-events: none;
}

/* Pref row variant with column label */
.pref-row-col {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}
.pref-label {
  font-weight: 500;
  color: var(--ink);
  margin: 0;
}

/* Text size buttons */
.text-size-group {
  display: flex;
  gap: 6px;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  padding: 4px;
}
.text-size-btn {
  flex: 1;
  padding: 10px 4px;
  border-radius: 100px;
  font-weight: 600;
  color: var(--ink-muted);
  font-family: var(--font-body);
  transition: all .15s;
  font-size: 0.92rem;
}
.text-size-btn[data-size="s"] { font-size: 0.82rem; }
.text-size-btn[data-size="m"] { font-size: 0.95rem; }
.text-size-btn[data-size="l"] { font-size: 1.08rem; }
.text-size-btn[data-size="xl"] { font-size: 1.2rem; }
.text-size-btn.active {
  background: var(--ink);
  color: var(--paper);
}

/* Text size scale applied to root */
html.size-s { font-size: 14px; }
html.size-m { font-size: 16px; }
html.size-l { font-size: 18px; }
html.size-xl { font-size: 20px; }

/* High contrast mode */
body.high-contrast {
  --ink-soft: #000000;
  --ink-muted: #2A2622;
  --ink-ghost: #4A4641;
  --border: #8B857D;
  --border-soft: #A49E96;
}
body.high-contrast .muted,
body.high-contrast p.muted {
  color: #2A2622 !important;
}
body.high-contrast .eyebrow {
  color: #1A1A1A !important;
}

/* Bold text mode */
body.bold-text {
  font-weight: 500;
}
body.bold-text .muted,
body.bold-text p.muted,
body.bold-text .muted.small {
  font-weight: 500;
}
body.bold-text h1,
body.bold-text h2,
body.bold-text h3,
body.bold-text h4 {
  font-weight: 600;
}
body.bold-text strong {
  font-weight: 700;
}

/* ============================================================
   STATE PICKER — Plants + Shifts question-first UX
   ============================================================ */
.state-picker {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 22px;
  margin-bottom: 16px;
}
.state-picker .eyebrow {
  color: var(--ink-muted);
  margin-bottom: 6px;
}
.state-picker h3 {
  margin-bottom: 16px;
  font-size: 1.3rem;
  line-height: 1.25;
}
.state-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.state-chip {
  padding: 10px 16px;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  font-size: 0.92rem;
  color: var(--ink);
  font-weight: 500;
  transition: all .15s;
  cursor: pointer;
}
.state-chip:hover {
  border-color: var(--ink);
}
.state-chip.selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Filtered results */
.filtered-results {
  margin-bottom: 16px;
  animation: fadeUp .3s ease;
}
.filtered-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  padding-top: 6px;
}
.filtered-header .eyebrow {
  margin-bottom: 0;
}
.filtered-clear {
  font-size: 0.82rem;
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.filtered-clear:hover { color: var(--ink); }

.filtered-section {
  margin-bottom: 22px;
}
.filtered-section-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 10px;
}
.filtered-note {
  padding: 14px 16px;
  background: var(--paper-warm);
  border-radius: var(--radius-sm);
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.55;
  margin-bottom: 14px;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   V3 — LEARN tab
   ============================================================ */
#learn .screen-head { margin-bottom: 24px; }

.learn-thisweek-card {
  background: linear-gradient(135deg, var(--paper-warm) 0%, var(--card) 100%);
  border: 1px solid var(--border-soft);
}
.learn-thisweek-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.learn-feed-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 14px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .15s;
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.learn-feed-item:hover {
  border-color: var(--ink);
}
.learn-feed-item:active {
  transform: scale(0.99);
}
.learn-feed-item.is-read {
  opacity: 0.7;
}
.learn-feed-glyph {
  font-size: 1.4rem;
  color: var(--ink-soft);
  line-height: 1;
  margin-top: 2px;
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}
.learn-feed-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.learn-feed-eyebrow {
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.learn-feed-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.learn-feed-dek {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.4;
}
.learn-feed-arrow {
  color: var(--ink-muted);
  font-size: 1.3rem;
  flex-shrink: 0;
  line-height: 1;
}
.learn-feed-item.is-read .learn-feed-arrow {
  color: var(--cobalt);
}

/* Topic grid */
.learn-topic-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.learn-topic-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 14px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .15s;
  text-align: left;
  font-family: inherit;
  min-height: 120px;
}
.learn-topic-card:hover {
  border-color: var(--ink);
  background: var(--paper-warm);
}
.learn-topic-glyph {
  font-size: 1.4rem;
  color: var(--ink-soft);
  line-height: 1;
}
.learn-topic-name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
}
.learn-topic-summary {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.4;
  flex: 1;
}
.learn-topic-count {
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-top: 6px;
}

/* Library card */
.learn-library-card {
  border: 1px dashed var(--border);
  background: transparent;
}

/* Topic browser modal — list of articles */
.learn-topic-articles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.learn-topic-article {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 12px;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .15s;
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.learn-topic-article:hover { border-color: var(--ink); background: var(--card); }
.learn-topic-article.is-read { opacity: 0.7; }
.learn-topic-article-text {
  display: flex; flex-direction: column; gap: 3px; flex: 1;
}
.learn-topic-article-eyebrow {
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.learn-topic-article-title {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}
.learn-topic-article-dek {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.82rem;
  color: var(--ink-soft);
  line-height: 1.35;
}

/* Article reader — full-screen */
.learn-article-modal .modal-card {
  max-width: 680px;
  max-height: 92vh;
  overflow-y: auto;
}
.learn-article-card {
  padding: 28px 22px 22px;
}
.learn-article-head {
  margin-bottom: 22px;
  padding-right: 36px;
}
.learn-article-head h2 {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.2;
  color: var(--ink);
  margin: 6px 0 10px;
}
.learn-article-dek {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.learn-article-body-prose {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}

/* V3 — Plant illustration at top of plant articles */
.learn-plant-illo {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 22px;
  padding: 18px 0;
}
.learn-plant-illo img {
  max-width: 240px;
  width: 70%;
  height: auto;
  display: block;
}
.learn-article-body-prose p {
  margin: 0 0 16px;
}
.learn-article-body-prose h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 22px 0 10px;
  letter-spacing: -0.005em;
}
.learn-article-body-prose ul {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.learn-article-body-prose li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  line-height: 1.55;
}
.learn-article-body-prose li::before {
  content: '·';
  position: absolute;
  left: 4px;
  top: -3px;
  font-size: 1.3rem;
  color: var(--ink-muted);
}
.learn-article-body-prose strong { font-weight: 600; color: var(--ink); }
.learn-article-body-prose em { font-style: italic; }
.learn-article-body-prose .learn-source {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.86rem;
  color: var(--ink-soft);
  border-top: 1px solid var(--border-soft);
  padding-top: 14px;
  margin-top: 24px;
}
.learn-article-footer {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}

@media (max-width: 380px) {
  .learn-topic-grid { grid-template-columns: 1fr; }
  .learn-article-head h2 { font-size: 1.45rem; }
}

/* ============================================================
   V3 — LEARN library links + dynamic content
   ============================================================ */
.learn-library-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.library-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .15s;
  text-align: left;
  font-family: inherit;
  width: 100%;
}
.library-link:hover {
  border-color: var(--ink);
}
.library-link-name {
  font-family: var(--font-display);
  font-size: 0.96rem;
  font-weight: 500;
  color: var(--ink);
}
.library-link-arrow {
  color: var(--ink-muted);
  font-size: 1.3rem;
  flex-shrink: 0;
  line-height: 1;
}

/* Library article — index list */
.lib-article-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 18px;
}
.lib-article-list li {
  padding: 0;
  margin: 0;
}
.lib-article-list li::before { content: none; }
.lib-article-link {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.94rem;
  text-decoration: none;
  cursor: pointer;
  transition: color .15s;
}
.lib-article-link:hover {
  color: var(--cobalt);
}
.lib-article-link.is-read {
  color: var(--ink-soft);
}
.lib-read {
  color: var(--cobalt);
  margin-left: 6px;
  font-size: 0.85rem;
}

/* Library article — citations list */
.lib-citations-list {
  list-style: decimal;
  padding-left: 24px;
  margin: 12px 0;
}
.lib-citations-list li {
  margin-bottom: 18px;
  padding-left: 6px;
}
.lib-citations-list li::before { content: none; }
.lib-cite-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--ink);
  margin: 0 0 4px;
}
.lib-cite-detail {
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 4px;
}
.lib-cite-link {
  font-family: var(--font-body);
  font-size: 0.78rem;
  margin: 0;
  word-break: break-all;
}
.lib-cite-link a {
  color: var(--cobalt);
  text-decoration: none;
}
.lib-cite-link a:hover {
  text-decoration: underline;
}

/* ============================================================
   V3 — Tarot card illustration in modal
   Sage-green herbarium engraving on dark backing for contrast
   ============================================================ */
.tarot-illo-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 -22px 18px;
  padding: 18px 14px 8px;
  background: linear-gradient(180deg, rgba(20, 20, 18, 0.04) 0%, transparent 100%);
}
.tarot-illo {
  max-width: 320px;
  width: 75%;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 14px rgba(94, 127, 90, 0.15));
}
.tarot-glyph-fallback {
  font-size: 2.4rem;
  line-height: 1;
  color: var(--ink-soft);
  text-align: center;
}

@media (max-width: 380px) {
  .tarot-illo { width: 85%; max-width: 260px; }
}

/* ============================================================
   V3 — REPORTS (Phase 4B)
   Year Book + Therapist/Doctor Report. Print-styled view.
   ============================================================ */

/* Settings card row layout */
.report-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--border-soft);
}
.report-row:first-of-type { border-top: none; padding-top: 4px; }
.report-row-text { flex: 1; }
.report-row-label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 4px;
}
.report-row-sub {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.4;
  margin: 0;
}

/* Picker modal content */
.report-picker-content { padding: 4px 0 8px; }
.report-picker-section { margin-top: 18px; }
.report-picker-section .log-label {
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 10px;
}
.report-year-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.report-year-btn {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-family: inherit;
  cursor: pointer;
  transition: all .15s;
  width: 100%;
  text-align: left;
}
.report-year-btn:hover { border-color: var(--ink); background: var(--card); }
.report-year-num {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink);
}
.report-year-count {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.report-window-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.report-window-btn {
  padding: 14px 12px;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--ink);
  cursor: pointer;
  transition: all .15s;
}
.report-window-btn:hover { border-color: var(--ink); background: var(--card); }

/* Report preview screen — full-screen layer above app */
.report-preview {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: var(--paper);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.report-preview-bar {
  position: sticky;
  top: 0;
  background: var(--card);
  border-bottom: 1px solid var(--border-soft);
  padding: 12px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  z-index: 10;
}
.report-preview-body {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 80px;
}

/* Hide app chrome when report is showing */
body.report-mode .main-app,
body.report-mode .bottom-nav,
body.report-mode #onboarding,
body.report-mode #passcodeScreen { display: none !important; }

/* ============================================================
   YEAR BOOK styles
   ============================================================ */
.rep-book {
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.6;
}
.rep-page {
  margin-bottom: 60px;
  padding: 28px 0;
}
.rep-eyebrow {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin: 0 0 10px;
}
.rep-h2 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 22px;
}
.rep-h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 10px;
}
.rep-prose {
  font-size: 1.02rem;
  line-height: 1.7;
  margin: 0 0 16px;
  color: var(--ink);
}
.rep-prose-italic {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-soft);
  margin: 0 0 16px;
}

/* Cover */
.rep-cover {
  text-align: center;
  padding: 80px 0 60px;
  border-bottom: 1px solid var(--border-soft);
}
.rep-cover-mark {
  font-size: 0.72rem;
  letter-spacing: 0.4em;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 8px;
}
.rep-cover-title {
  font-family: var(--font-display);
  font-size: 4rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 14px;
  color: var(--ink);
}
.rep-cover-sub {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.4rem;
  color: var(--ink-soft);
  margin: 0;
}
.rep-cover-divider {
  font-size: 1.5rem;
  color: var(--ink-muted);
  margin: 36px 0;
}
.rep-cover-year {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ink);
}
.rep-cover-name {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink-soft);
  margin: 24px 0 0;
}

/* Stats grid */
.rep-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-top: 8px;
}
.rep-stat {
  text-align: center;
  padding: 22px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.rep-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.05;
  text-transform: capitalize;
  margin-bottom: 6px;
}
.rep-stat-label {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}

/* Tag cloud */
.rep-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  line-height: 1.5;
}
.rep-tag {
  font-family: var(--font-display);
  color: var(--ink);
}
.rep-tag-count {
  font-size: 0.7em;
  color: var(--ink-muted);
  font-family: var(--font-body);
  font-weight: 600;
  margin-left: 4px;
}
.rep-tag-md { font-size: 1rem; color: var(--ink-soft); }
.rep-tag-lg { font-size: 1.3rem; }
.rep-tag-xl { font-size: 1.6rem; font-weight: 500; }

/* Month rows */
.rep-month-row {
  display: grid;
  grid-template-columns: 90px 1fr 180px;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
}
.rep-month-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
}
.rep-month-bar {
  height: 8px;
  background: var(--paper-warm);
  border-radius: 8px;
  overflow: hidden;
}
.rep-month-bar-fill {
  height: 100%;
  background: var(--ink);
  border-radius: 8px;
}
.rep-month-meta {
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-family: var(--font-italic);
  font-style: italic;
  text-align: right;
}

/* One things */
.rep-onethings-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rep-onething {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 14px;
  align-items: baseline;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border-soft);
}
.rep-onething-date {
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.rep-onething-text {
  font-size: 0.96rem;
  line-height: 1.5;
}

/* Journal entries */
.rep-journal-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.rep-journal-entry {
  border-left: 2px solid var(--border-soft);
  padding-left: 18px;
}
.rep-journal-date {
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin: 0 0 8px;
}
.rep-journal-prompt {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.94rem;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.rep-journal-content {
  font-size: 1rem;
  line-height: 1.7;
  margin: 0;
  white-space: pre-wrap;
  color: var(--ink);
}

/* Closing */
.rep-closing {
  text-align: center;
  padding: 80px 0;
  border-top: 1px solid var(--border-soft);
}
.rep-closing-mark {
  font-size: 1.6rem;
  color: var(--ink-muted);
  margin-bottom: 18px;
}
.rep-closing-line {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--ink);
  margin: 0 0 22px;
}
.rep-closing-meta {
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}

/* ============================================================
   DOCTOR REPORT styles — clinical, factual, no flourish
   ============================================================ */
.rep-doc {
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.6;
}
.rep-doc-head {
  margin-bottom: 36px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--ink);
}
.rep-doc-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin: 0 0 6px;
}
.rep-doc-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.018em;
  margin: 0 0 14px;
  color: var(--ink);
}
.rep-doc-window {
  font-size: 0.9rem;
  margin: 0 0 4px;
  color: var(--ink);
}
.rep-doc-disclaimer {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--paper-warm);
  border-left: 3px solid var(--ink-ghost);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft);
}
.rep-doc-section {
  margin-bottom: 36px;
}
.rep-doc-h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
}
.rep-doc-h3 {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 10px;
  color: var(--ink);
}
.rep-doc-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  font-size: 0.92rem;
}
.rep-doc-table th,
.rep-doc-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft);
  text-align: left;
}
.rep-doc-table th {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  background: var(--paper-warm);
}
.rep-doc-table td:not(:first-child) {
  font-variant-numeric: tabular-nums;
}
.rep-doc-note {
  font-size: 0.84rem;
  color: var(--ink-soft);
  margin: 10px 0 0;
}
.rep-doc-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 2px solid var(--ink);
  font-size: 0.86rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.rep-doc-footer p { margin: 0; }

/* ============================================================
   PRINT REPORT VIEW (V3) — full-window overlay for Year Book + Doctor report
   Shows on screen first, user taps "Print / Save as PDF"
   ============================================================ */
.print-report-view {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--paper);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.print-report-toolbar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--card);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.print-toolbar-right {
  display: flex;
  gap: 8px;
}
.print-report-body {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 22px 80px;
  background: var(--card);
  font-family: var(--font-body);
  color: var(--ink);
  line-height: 1.65;
}
.print-report-body h1 {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 8px;
  color: var(--ink);
}
.print-report-body h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 32px 0 12px;
  color: var(--ink);
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 8px;
}
.print-report-body h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 500;
  margin: 22px 0 8px;
  color: var(--ink);
}
.print-report-body h4 {
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin: 18px 0 8px;
}
.print-report-body p { margin: 0 0 12px; }
.print-report-body em { font-style: italic; color: var(--ink-soft); }
.print-report-body strong { font-weight: 600; }
.print-report-body ul, .print-report-body ol {
  margin: 0 0 14px;
  padding-left: 22px;
}
.print-report-body li { margin-bottom: 4px; }
.print-report-body table {
  border-collapse: collapse;
  width: 100%;
  margin: 14px 0;
  font-size: 0.88rem;
}
.print-report-body th, .print-report-body td {
  border-bottom: 1px solid var(--border-soft);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.print-report-body th {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.print-report-body .rep-cover {
  text-align: center;
  padding: 60px 0 40px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 32px;
}
.print-report-body .rep-cover-eyebrow {
  font-family: var(--font-body);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 14px;
}
.print-report-body .rep-cover-year {
  font-family: var(--font-display);
  font-size: 4.2rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 14px;
}
.print-report-body .rep-cover-name {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink-soft);
  margin-bottom: 0;
}
.print-report-body .rep-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
  margin: 18px 0;
}
.print-report-body .rep-stat {
  text-align: center;
  padding: 16px 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.print-report-body .rep-stat-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  display: block;
  color: var(--ink);
  margin-bottom: 4px;
}
.print-report-body .rep-stat-label {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.print-report-body .rep-callout {
  border-left: 3px solid var(--ink);
  padding: 10px 0 10px 16px;
  margin: 18px 0;
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink-soft);
}
.print-report-body .rep-disclaimer {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
  font-family: var(--font-italic);
  border-top: 1px solid var(--border-soft);
  padding-top: 18px;
  margin-top: 36px;
}
.print-report-body .rep-page-break { page-break-before: always; }

/* ---------- rep-* classes used by Year Book + Doctor Report generators ---------- */
.print-report-body .rep-cover { text-align: center; padding: 60px 0 40px; border-bottom: 1px solid var(--border-soft); margin-bottom: 32px; page-break-after: always; }
.print-report-body .rep-cover-eyebrow { font-family: var(--font-body); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; margin-bottom: 14px; }
.print-report-body .rep-cover-year { font-family: var(--font-display); font-size: 4.2rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1; color: var(--ink); margin-bottom: 14px; }
.print-report-body .rep-cover-name { font-family: var(--font-italic); font-style: italic; font-size: 1.2rem; color: var(--ink-soft); }

.print-report-body .rep-page { page-break-after: always; padding-bottom: 12px; }
.print-report-body .rep-page:last-child { page-break-after: auto; }
.print-report-body .rep-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin-bottom: 8px;
}
.print-report-body .rep-h2 {
  font-family: var(--font-display);
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.2;
  margin: 0 0 18px;
  color: var(--ink);
}
.print-report-body .rep-h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  margin: 22px 0 8px;
  color: var(--ink);
}

.print-report-body .rep-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 12px;
  margin: 20px 0 8px;
}
.print-report-body .rep-stat {
  text-align: center;
  padding: 14px 8px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  background: var(--paper-warm);
  page-break-inside: avoid;
}
.print-report-body .rep-stat-num {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 500;
  display: block;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 4px;
}
.print-report-body .rep-stat-label {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  line-height: 1.3;
}

.print-report-body .rep-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  margin: 12px 0;
}
.print-report-body .rep-tag {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.005em;
}
.print-report-body .rep-tag-count {
  font-family: var(--font-body);
  font-size: 0.65em;
  color: var(--ink-muted);
  margin-left: 2px;
}
.print-report-body .rep-tag.rep-tag-md { font-size: 1rem; color: var(--ink-soft); }
.print-report-body .rep-tag.rep-tag-lg { font-size: 1.25rem; color: var(--ink); font-weight: 500; }
.print-report-body .rep-tag.rep-tag-xl { font-size: 1.55rem; color: var(--ink); font-weight: 500; }

.print-report-body .rep-month-row {
  display: grid;
  grid-template-columns: 80px 1fr 110px;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--border-soft);
  page-break-inside: avoid;
}
.print-report-body .rep-month-row:first-of-type { border-top: none; }
.print-report-body .rep-month-name {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
}
.print-report-body .rep-month-bar {
  height: 8px;
  background: var(--paper-warm);
  border-radius: 100px;
  overflow: hidden;
}
.print-report-body .rep-month-bar-fill {
  height: 100%;
  background: var(--ink);
}
.print-report-body .rep-month-meta {
  font-size: 0.78rem;
  color: var(--ink-muted);
  text-align: right;
}

.print-report-body .rep-doc-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 0.86rem; }
.print-report-body .rep-doc-table th, .print-report-body .rep-doc-table td {
  border-bottom: 1px solid var(--border-soft);
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
}
.print-report-body .rep-doc-table th {
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.print-report-body .rep-doc-section { margin-top: 24px; page-break-inside: avoid; }
.print-report-body .rep-closing { page-break-before: always; padding-top: 40px; text-align: center; }
.print-report-body .rep-closing-quote {
  font-family: var(--font-italic);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.1rem;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 30px;
}

/* ---------- Report picker modal styles ---------- */
.report-picker-content { padding: 4px 0 8px; }
.report-picker-section { margin-top: 14px; }
.report-year-list { display: flex; flex-direction: column; gap: 8px; }
.report-window-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.report-window-btn {
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: var(--ink);
  cursor: pointer;
  transition: all .15s;
  text-align: left;
}
.report-window-btn:hover { border-color: var(--ink); background: var(--paper-warm); }

/* ============================================================
   PRINT STYLES — when user does Print → Save as PDF
   ============================================================ */
@media print {
  /* Hide app chrome and the report toolbar */
  .main-app, .bottom-nav, #onboarding, #passcodeScreen,
  .print-report-toolbar, .no-print { display: none !important; }
  .print-report-view {
    position: static !important;
    overflow: visible !important;
    background: white !important;
  }
  .print-report-body {
    max-width: 100% !important;
    padding: 0 !important;
    background: white !important;
  }
  body { background: white !important; }
  .rep-page-break { page-break-before: always; }
  .rep-cover { page-break-after: always; }
  .rep-doc-section { page-break-inside: avoid; }
  /* Smaller margins for print */
  @page { margin: 18mm 16mm; }
  /* Make sure table headers repeat across pages */
  .print-report-body table thead { display: table-header-group; }
}

/* ============================================================
   V3 PHASE 5A — PMDD log + Appointment + Body letter
   ============================================================ */

/* ---------- PMDD symptom rows ---------- */
.pmdd-symptom-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--border-soft);
}
.pmdd-symptom-row:last-child { border-bottom: none; }
.pmdd-symptom-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.pmdd-symptom-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper-warm);
  border: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ink-muted);
  letter-spacing: 0;
}
.pmdd-symptom-code.core {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.pmdd-symptom-short {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  flex: 1;
}
.pmdd-core-badge {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.pmdd-severity-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.pmdd-sev {
  padding: 7px 12px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.12s;
}
.pmdd-sev:hover { border-color: var(--ink-soft); }
.pmdd-sev.selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.pmdd-symptom-full {
  font-style: italic;
  font-family: var(--font-italic);
  font-size: 0.78rem;
  margin: 0;
  line-height: 1.4;
  color: var(--ink-muted);
}

/* ---------- Appointment picker / editor ---------- */
.appt-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 12px;
  border: 1px solid var(--border-soft);
  background: var(--card);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  margin-bottom: 8px;
  transition: all 0.12s;
}
.appt-list-item:hover { border-color: var(--ink); }
.appt-list-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.appt-list-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--ink);
}
.appt-list-meta {
  font-size: 0.78rem;
  color: var(--ink-muted);
}
.appt-list-arrow { color: var(--ink-muted); font-size: 1.2rem; }

.appt-section { margin-bottom: 16px; }
.appt-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper-warm);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  box-sizing: border-box;
}
.appt-input:focus {
  border-color: var(--ink);
  outline: none;
  background: var(--card);
}
.appt-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--paper-warm);
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  box-sizing: border-box;
  resize: vertical;
  line-height: 1.5;
}
.appt-textarea:focus {
  border-color: var(--ink);
  outline: none;
  background: var(--card);
}

.appt-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.appt-item-num {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-muted);
  width: 22px;
  text-align: right;
  flex-shrink: 0;
}
.appt-item-row .appt-input { flex: 1; }
.appt-item-del {
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  color: var(--ink-muted);
  cursor: pointer;
  flex-shrink: 0;
}
.appt-item-del:hover {
  background: var(--paper-warm);
  color: var(--ink);
}

/* ---------- Body letter list / sealed / open ---------- */
.letter-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 12px;
  border: 1px solid var(--border-soft);
  background: var(--card);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  margin-bottom: 8px;
  transition: all 0.12s;
}
.letter-list-item:hover { border-color: var(--ink); }
.letter-list-item.is-sealed {
  background: linear-gradient(135deg, var(--paper-warm) 0%, var(--card) 100%);
}
.letter-list-item.is-open {
  border-style: solid;
  border-color: var(--cobalt-deep);
}
.letter-list-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.letter-list-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--ink);
}
.letter-list-meta {
  font-size: 0.78rem;
  color: var(--ink-muted);
}
.letter-list-status {
  font-size: 1.4rem;
  color: var(--ink-soft);
  flex-shrink: 0;
}
.letter-list-item.is-open .letter-list-status { color: var(--cobalt-deep); }

.letter-sealed-card {
  text-align: center;
  padding: 28px 14px;
  background: linear-gradient(135deg, var(--paper-warm) 0%, var(--card) 100%);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.letter-sealed-glyph {
  font-size: 2.6rem;
  color: var(--ink-soft);
  line-height: 1;
  margin-bottom: 10px;
}
.letter-sealed-line {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
  margin: 0;
}

.letter-open-content {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  padding: 18px 0;
  white-space: pre-wrap;
}

/* ---------- Report sheet additions for PMDD + appt ---------- */
.rep-doc-numbered {
  list-style: decimal;
  padding-left: 28px;
  margin: 0 0 16px;
}
.rep-doc-numbered li {
  margin-bottom: 8px;
  line-height: 1.5;
}
.rep-doc-disclaimer {
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  padding: 18px 20px;
  border-radius: var(--radius);
}
.rep-doc-disclaimer h2 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}
.rep-doc-note {
  font-style: italic;
  font-family: var(--font-italic);
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin-top: 10px;
}

/* ---------- ME tab — Reports + Differentiator entry cards ---------- */
.report-card-self,
.differentiator-card {
  background: linear-gradient(135deg, var(--paper-warm) 0%, var(--card) 100%);
  border: 1px solid var(--border-soft);
}

@media (max-width: 380px) {
  .pmdd-sev { padding: 6px 10px; font-size: 0.74rem; }
}

/* ============================================================
   V3 PHASE 5B — Moon Mirror + Knowledge Score + End-of-Cycle
   ============================================================ */

/* ---------- Moon Mirror ---------- */
.mirror-occurrence {
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
}
.mirror-occurrence.mirror-most-recent {
  background: var(--card);
  border-color: var(--ink-soft);
}
.mirror-occ-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-soft);
}
.mirror-occ-date {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.96rem;
  color: var(--ink);
}
.mirror-occ-ago {
  font-size: 0.74rem;
  color: var(--ink-muted);
  font-style: italic;
  font-family: var(--font-italic);
}
.mirror-line {
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 4px 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.mirror-glyph {
  color: var(--ink-muted);
  font-size: 0.9rem;
  width: 14px;
  flex-shrink: 0;
  text-align: center;
}
.mirror-line em {
  color: var(--ink-soft);
  font-style: italic;
  font-family: var(--font-italic);
}
.mirror-pattern {
  margin-top: 18px;
  padding: 14px 16px;
  background: linear-gradient(135deg, var(--paper-warm) 0%, var(--card) 100%);
  border-left: 2px solid var(--ink-soft);
  border-radius: var(--radius-sm);
}

/* ---------- Knowledge Score ---------- */
.ks-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}
.ks-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-body);
  font-size: 0.96rem;
  color: var(--ink);
  line-height: 1.4;
}
.ks-list li:last-child { border-bottom: none; }
.ks-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-right: 4px;
}
.ks-closing {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-soft);
  text-align: center;
  padding: 14px 0;
  border-top: 1px solid var(--border-soft);
  margin-top: 14px;
}

/* ---------- End-of-Cycle Reflection ---------- */
.eoc-summary {
  padding: 16px 18px;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  margin-bottom: 16px;
}
.eoc-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 6px 0;
}
.eoc-glyph {
  color: var(--ink-muted);
  font-size: 0.95rem;
  width: 16px;
  flex-shrink: 0;
  text-align: center;
  margin-top: 1px;
}
.eoc-text { flex: 1; }
.eoc-closing {
  padding: 14px 18px;
  background: var(--card);
  border-left: 2px solid var(--ink-soft);
  border-radius: var(--radius-sm);
}

/* ============================================================
   V3 PHASE 5C — Companion mode + Pregnancy + Body time
   ============================================================ */

/* ---------- Companion mode share rows ---------- */
.companion-share-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  padding: 14px 12px;
  border: 1px solid var(--border-soft);
  background: var(--card);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  margin-bottom: 8px;
  transition: all 0.12s;
}
.companion-share-row:hover { border-color: var(--ink); }
.companion-share-text { flex: 1; }
.companion-share-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.companion-share-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  flex: 1;
}
.companion-share-privacy {
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.companion-share-summary {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.84rem;
  color: var(--ink-soft);
  line-height: 1.4;
  margin: 0;
}
.companion-share-arrow {
  color: var(--ink-muted);
  font-size: 1.2rem;
  margin-top: 4px;
}

.companion-preview-card {
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.companion-preview-content { margin-top: 8px; }
.companion-preview-line {
  font-size: 0.92rem;
  color: var(--ink);
  line-height: 1.55;
  margin: 0 0 6px 0;
}
.companion-preview-line:last-child { margin-bottom: 0; }
.companion-glyph {
  display: inline-block;
  width: 18px;
  text-align: center;
  color: var(--ink-soft);
  margin-right: 4px;
}

/* ---------- Pregnancy stats ---------- */
.pregnancy-stats-row {
  display: flex;
  gap: 14px;
  margin-top: 10px;
}
.pregnancy-stat {
  flex: 1;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 12px 8px;
  text-align: center;
}
.pregnancy-stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.pregnancy-stat-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 6px;
}

/* ---------- Pregnancy loss ---------- */
.loss-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.loss-resource-section {
  margin-bottom: 18px;
}
.loss-resource-section h4 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin: 0 0 8px;
}
.loss-resource-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.loss-resource-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);
}
.loss-resource-list li:last-child { border-bottom: none; }

/* ---------- Body time view ---------- */
.bodytime-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bodytime-row {
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 14px 14px 12px;
}
.bodytime-row.is-empty {
  background: transparent;
  border-style: dashed;
}
.bodytime-row-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 8px;
}
.bodytime-glyph {
  font-size: 1.4rem;
  color: var(--ink-soft);
  line-height: 1;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
}
.bodytime-text { flex: 1; }
.bodytime-label {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  margin: 0 0 2px;
}
.bodytime-value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}
.bodytime-progress {
  height: 4px;
  background: var(--paper-warm);
  border-radius: 999px;
  overflow: hidden;
  margin: 8px 0;
}
.bodytime-progress-fill {
  height: 100%;
  background: var(--ink-soft);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.bodytime-sub {
  margin: 0;
  line-height: 1.4;
}
.bodytime-closing {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border-soft);
}

/* ============================================================
   V3 PHASE 6A — Legal scaffolding
   ============================================================ */

/* ---------- First-launch acknowledgment ---------- */
.ack-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 12px;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.12s;
}
.ack-row:hover { border-color: var(--ink); }
.ack-row input[type="checkbox"] {
  margin-top: 4px;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--cobalt-deep);
}
.ack-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.ack-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--ink);
  line-height: 1.3;
}
.ack-sub {
  font-size: 0.84rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

#firstLaunchAckButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Persistent legal footer ---------- */
.legal-footer-anchor {
  margin-top: 80px;
  padding-bottom: 32px;
}
.legal-footer {
  text-align: center;
  padding: 22px 14px 16px;
  border-top: 1px solid var(--border-soft);
  opacity: 0.85;
}
.legal-footer-line {
  margin: 0 0 6px;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.legal-footer-link {
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
  transition: color 0.12s;
}
.legal-footer-link:hover {
  color: var(--ink);
}
.legal-footer-sep {
  margin: 0 8px;
  color: var(--ink-muted);
}
.legal-footer-meta {
  margin: 0;
  font-size: 0.7rem;
  color: var(--ink-muted);
  letter-spacing: 0.02em;
}

/* ---------- Legal modal content tightening ---------- */
.legal-content h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.96rem;
  color: var(--ink);
  margin: 22px 0 8px;
  letter-spacing: -0.005em;
}
.legal-content p {
  margin: 0 0 12px;
  line-height: 1.6;
  color: var(--ink);
  font-size: 0.95rem;
}
.legal-content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.legal-content li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
  line-height: 1.5;
  font-size: 0.92rem;
  color: var(--ink);
}
.legal-content li::before {
  content: '·';
  position: absolute;
  left: 4px;
  top: -3px;
  font-size: 1.2rem;
  color: var(--ink-muted);
}
.legal-updated {
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-style: italic;
  font-family: var(--font-italic);
  margin-bottom: 18px;
}
.legal-content a {
  color: var(--cobalt-deep);
  text-decoration: underline;
}

/* ============================================================
   V3 6B fixes — modal stacking, first-launch ack
   ============================================================ */

/* First-launch ack must sit above everything else, including other modals */
#firstLaunchAckModal {
  z-index: 600;
}
#firstLaunchAckModal .modal-card {
  /* No close button — must accept to continue. Make this clear with extra padding. */
  max-height: 88vh;
}
/* Section warnings sit above regular modals but below first-launch ack */
#sectionWarningModal {
  z-index: 500;
}

/* Make the ack-row checkboxes more obviously interactive on touch */
.ack-row {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.ack-row:active {
  background: var(--paper-deep, #E5DCCC);
}

/* ============================================================
   V3 6B — Tools & Reports tray
   ============================================================ */
.tools-tray {
  margin-top: 32px;
  border-top: 1px solid var(--border-soft);
  padding-top: 20px;
}
.tools-tray-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  border-bottom: 1px solid var(--border-soft);
  transition: background 0.15s;
}
.tools-tray-toggle:hover { background: var(--paper-warm); }
.tools-tray-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.tools-tray-icon {
  font-size: 1.1rem;
  color: var(--ink-soft);
}
.tools-tray-meta {
  flex: 1;
  font-size: 0.78rem;
  color: var(--ink-muted);
  font-family: var(--font-italic);
  font-style: italic;
  letter-spacing: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tools-tray-chevron {
  font-size: 1.2rem;
  color: var(--ink-muted);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.tools-tray-toggle.is-open .tools-tray-chevron {
  transform: rotate(90deg);
}
.tools-tray-content {
  padding-top: 18px;
}
@media (max-width: 480px) {
  .tools-tray-meta { display: none; }
}

/* ============================================================
   V3 6B — Coming Soon card
   ============================================================ */
.coming-soon-card {
  background: var(--paper-warm);
  border: 1px dashed var(--ink-muted);
  position: relative;
}
.coming-soon-card::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px;
  height: 3px;
  background: linear-gradient(90deg, var(--cobalt) 0%, transparent 100%);
}

/* ============================================================
   V3 6B — Period status in daily check-in
   ============================================================ */
.period-status-section {
  border-top: 1px solid var(--border-soft);
  padding-top: 18px;
  margin-top: 12px;
}
.period-status-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.period-status-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  text-align: center;
}
.period-status-btn:hover {
  border-color: var(--ink);
  background: var(--paper-warm);
}
.period-status-btn.selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.period-status-btn.suggested {
  border-color: var(--cobalt);
  border-width: 2px;
}
.period-status-glyph {
  font-size: 1.2rem;
  line-height: 1;
}
.period-status-label {
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.2;
}

.period-followup {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--border-soft);
}
.period-flow-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.period-flow-btn {
  flex: 1;
  min-width: 70px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88rem;
  transition: all 0.15s;
}
.period-flow-btn:hover { border-color: var(--ink); }
.period-flow-btn.selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.period-symptom-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.period-symptom-chip {
  padding: 8px 14px;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.84rem;
  transition: all 0.15s;
}
.period-symptom-chip:hover { border-color: var(--ink); }
.period-symptom-chip.selected {
  background: var(--blush, #F7D8D0);
  border-color: var(--rust, #B05F3F);
  color: var(--ink);
}

/* ============================================================
   V3 6B — Settings scroll arrows
   ============================================================ */
.settings-subtoggle-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 24px;
}
.settings-subtoggle-wrap .settings-subtoggle {
  margin-bottom: 0;
  flex: 1;
  min-width: 0;
}
.settings-scroll-arrow {
  flex-shrink: 0;
  width: 28px;
  height: 36px;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
}
.settings-scroll-arrow:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.settings-scroll-arrow:active { transform: scale(0.95); }

/* ============================================================
   V3 6C — Cycle / Menstrual sub-tab rebuild
   Today / This Week / The Arc / Your Cycles
   ============================================================ */

/* Phase color palette — V3 6H jewel tones */
:root {
  --phase-menstrual: #8C3F2D;         /* deep brick */
  --phase-menstrual-bg: #F4DDD3;
  --phase-follicular: #4A6440;        /* deep moss */
  --phase-follicular-bg: #DCE5D7;
  --phase-ovulation: #C18C42;         /* warm amber */
  --phase-ovulation-bg: #F1E2C5;
  --phase-early-luteal: #6E5FA0;      /* dusty plum */
  --phase-early-luteal-bg: #E5DCFB;
  --phase-late-luteal: #8E4F66;       /* dusty rose */
  --phase-late-luteal-bg: #F7D8D0;
}

/* ---------- ON-PERIOD STRIP ---------- */
.cycle-period-strip {
  background: var(--phase-menstrual-bg);
  border: 1px solid var(--phase-menstrual);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.cycle-period-strip-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cycle-period-strip-glyph {
  font-size: 1.1rem;
  color: var(--phase-menstrual);
  flex-shrink: 0;
}
.cycle-period-strip-text {
  flex: 1;
  min-width: 0;
}
.cycle-period-strip-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.cycle-period-strip-sub {
  font-size: 0.78rem;
  color: var(--ink-soft);
  margin: 2px 0 0;
  font-style: italic;
  font-family: var(--font-italic);
}
.cycle-period-strip-end {
  background: var(--ink);
  color: var(--paper);
  border: none;
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.cycle-period-strip-end:hover { opacity: 0.85; }

/* ---------- TODAY card ---------- */
.cycle-today-card {
  background: var(--card);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.cycle-today-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 4px;
  background: var(--ink-muted);
}
.cycle-today-card.phase-menstrual::before { background: var(--phase-menstrual); }
.cycle-today-card.phase-follicular::before { background: var(--phase-follicular); }
.cycle-today-card.phase-ovulation::before { background: var(--phase-ovulation); }
.cycle-today-card.phase-early-luteal::before { background: var(--phase-early-luteal); }
.cycle-today-card.phase-late-luteal::before { background: var(--phase-late-luteal); }

.cycle-today-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 14px;
}
.cycle-today-eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.72rem;
  color: var(--ink-muted);
  margin: 0;
}
.cycle-today-day {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  line-height: 1.1;
}
.cycle-today-voice {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 14px;
}
.cycle-today-link {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink);
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}
.cycle-today-link:hover { color: var(--cobalt); }

/* ---------- THIS WEEK card ---------- */
.cycle-week-card {
  background: var(--card);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  margin-bottom: 14px;
}
.cycle-week-card .eyebrow {
  margin: 0 0 4px;
}
.cycle-week-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 14px;
}
.cycle-week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 14px;
}
.cycle-week-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 0 8px;
  border-radius: 6px;
  position: relative;
  background: var(--paper-warm);
  transition: background 0.15s;
  min-height: 64px;
}
.cycle-week-day.is-today {
  background: var(--ink);
  color: var(--paper);
}
.cycle-week-day.is-today .cwd-dow,
.cycle-week-day.is-today .cwd-date,
.cycle-week-day.is-today .cwd-day-num { color: var(--paper); }
.cwd-dow {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 500;
}
.cwd-date {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1;
}
.cwd-day-num {
  font-size: 0.6rem;
  color: var(--ink-muted);
  font-style: italic;
  font-family: var(--font-italic);
}
.cwd-band {
  width: 70%;
  height: 3px;
  border-radius: 2px;
  margin-top: 4px;
  background: transparent;
}
.cycle-week-day.phase-menstrual .cwd-band { background: var(--phase-menstrual); }
.cycle-week-day.phase-follicular .cwd-band { background: var(--phase-follicular); }
.cycle-week-day.phase-ovulation .cwd-band { background: var(--phase-ovulation); }
.cycle-week-day.phase-early-luteal .cwd-band { background: var(--phase-early-luteal); }
.cycle-week-day.phase-late-luteal .cwd-band { background: var(--phase-late-luteal); }
.cwd-dots {
  display: flex;
  gap: 2px;
  margin-top: 4px;
  min-height: 5px;
}
.cwd-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  display: inline-block;
}
.dot-period { background: var(--phase-menstrual); }
.dot-tracked { background: var(--ink-soft); }
.dot-wrote { background: var(--cobalt); }
.cycle-week-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  font-size: 0.72rem;
  color: var(--ink-muted);
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
}
.cycle-week-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.cycle-week-key {
  width: 10px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}
.cwk-menstrual { background: var(--phase-menstrual); }
.cwk-follicular { background: var(--phase-follicular); }
.cwk-ovulation { background: var(--phase-ovulation); }
.cwk-early-luteal { background: var(--phase-early-luteal); }
.cwk-late-luteal { background: var(--phase-late-luteal); }

/* ---------- THE ARC card ---------- */
.cycle-arc-card {
  background: var(--card);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  margin-bottom: 14px;
}
.cycle-arc-row {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 4px;
}
.cycle-arc-ring {
  flex-shrink: 0;
  width: 160px;
  height: 160px;
}
.cycle-ring-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.arc-phase.arc-menstrual { stroke: var(--phase-menstrual); }
.arc-phase.arc-follicular { stroke: var(--phase-follicular); }
.arc-phase.arc-ovulation { stroke: var(--phase-ovulation); }
.arc-phase.arc-early-luteal { stroke: var(--phase-early-luteal); }
.arc-phase.arc-late-luteal { stroke: var(--phase-late-luteal); }
.arc-today-dot { fill: var(--ink); }
.arc-today-dot-inner { fill: var(--paper); }
.arc-day-label {
  font-family: var(--font-body);
  font-size: 9px;
  letter-spacing: 0.2em;
  fill: var(--ink-muted);
}
.arc-day-num {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  fill: var(--ink);
}
.arc-day-of {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 11px;
  fill: var(--ink-muted);
}
.cycle-arc-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.cycle-arc-event {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.cycle-arc-event-glyph {
  font-size: 0.95rem;
  color: var(--ink-soft);
  width: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
.cycle-arc-event-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.cycle-arc-event-label {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.2;
}
.cycle-arc-event-detail {
  font-size: 0.76rem;
  color: var(--ink-muted);
  line-height: 1.3;
}

/* On narrow phones: stack ring above events */
@media (max-width: 380px) {
  .cycle-arc-row {
    flex-direction: column;
    align-items: stretch;
  }
  .cycle-arc-ring {
    width: 180px;
    height: 180px;
    margin: 0 auto 10px;
  }
}

/* ---------- YOUR CYCLES card ---------- */
.cycle-history-card {
  background: var(--card);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  margin-bottom: 14px;
}
.cycle-history-card .eyebrow { margin: 0 0 4px; }
.cycle-history-card h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 12px;
}
.cycle-history-rows {
  display: flex;
  flex-direction: column;
}
.cycle-history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-soft);
  gap: 12px;
}
.cycle-history-row:last-child { border-bottom: none; }
.cycle-history-row-date {
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--ink);
  font-weight: 500;
}
.cycle-history-row-stats {
  display: flex;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--ink-muted);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cycle-history-summary {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border-soft);
  font-style: italic;
  font-family: var(--font-italic);
}

/* ---------- BACKDATE row in daily check-in ---------- */
.period-backdate-row {
  background: var(--paper-warm);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
}
.period-backdate-label {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--ink);
  margin-bottom: 8px;
}
.period-backdate-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.92rem;
  background: var(--card);
  color: var(--ink);
}

/* V3 6D — onboarding wordmark SVG */
.onb-wordmark-svg {
  display: block;
  margin: 0 auto;
  width: clamp(160px, 50vw, 260px);
  height: auto;
  color: var(--ink);
}

/* V3 6D — log past period button */
.cycle-history-add {
  display: block;
  margin: 14px auto 0;
  padding: 8px 14px;
  background: var(--paper-warm);
  border: 1px dashed var(--ink-muted);
  border-radius: 100px;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s;
}
.cycle-history-add:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  border-style: solid;
}

/* ============================================================
   V3 6C — ME tab sub-toggle (Field guide / Tools)
   ============================================================ */
.me-subtoggle {
  display: flex;
  gap: 4px;
  background: var(--paper-warm);
  padding: 4px;
  border-radius: 100px;
  margin-bottom: 24px;
}
.me-sub-btn {
  flex: 1;
  padding: 9px 14px;
  border: none;
  background: transparent;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.me-sub-btn.active {
  background: var(--ink);
  color: var(--paper);
}
.me-sub-btn:hover:not(.active) { color: var(--ink); }

.me-pane {
  /* nothing structural; just a logical grouping */
}

/* ============================================================
   V3 6D — Period add/edit affordances on cycle history rows
   ============================================================ */
.cycle-history-row {
  cursor: pointer;
  transition: background 0.12s;
}
.cycle-history-row:hover {
  background: var(--paper-warm);
}
.cycle-history-row-edit {
  color: var(--ink-muted);
  font-size: 0.74rem;
  font-style: italic;
  font-family: var(--font-italic);
  opacity: 0.6;
}
.cycle-history-row:hover .cycle-history-row-edit {
  opacity: 1;
  color: var(--cobalt);
}
.cycle-history-add-btn,
.cycle-history-add {
  margin-top: 16px;
  padding: 10px 14px;
  background: var(--paper-warm);
  border: 1px dashed var(--border-soft);
  border-radius: 8px;
  width: 100%;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s;
}
.cycle-history-add-btn:hover,
.cycle-history-add:hover {
  border-color: var(--ink);
  border-style: solid;
  color: var(--ink);
  background: var(--card);
}

/* ============================================================
   V3 6D — Today's Rhythms strip in home weather report
   ============================================================ */
.weather-rhythms {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 0 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}
.wr-row { display: flex; flex-direction: column; gap: 6px; }
.wr-row-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  font-family: var(--font-display);
  color: var(--paper, #F5F1EA);
}
.wr-row-glyph {
  font-size: 0.95rem;
  width: 16px;
  flex-shrink: 0;
  opacity: 0.85;
}
.wr-row-label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper, #F5F1EA);
  opacity: 0.7;
  flex-shrink: 0;
  width: 60px;
}
.wr-row-value {
  font-size: 0.92rem;
  color: var(--paper, #F5F1EA);
  font-weight: 400;
  flex: 1;
  min-width: 0;
}
.wr-row-track {
  height: 3px;
  background: rgba(245, 241, 234, 0.2);
  border-radius: 2px;
  overflow: hidden;
  margin-left: 24px;
}
.wr-row-fill {
  height: 100%;
  background: rgba(245, 241, 234, 0.85);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.wr-row.phase-menstrual .wr-row-fill { background: var(--phase-menstrual); }
.wr-row.phase-follicular .wr-row-fill { background: var(--phase-follicular); }
.wr-row.phase-ovulation .wr-row-fill { background: var(--phase-ovulation); }
.wr-row.phase-early-luteal .wr-row-fill { background: var(--phase-early-luteal); }
.wr-row.phase-late-luteal .wr-row-fill { background: var(--phase-late-luteal); }

@media (max-width: 380px) {
  .wr-row-label { width: 50px; font-size: 0.68rem; }
  .wr-row-value { font-size: 0.86rem; }
}

/* ============================================================
   V3 6E — Tools tile grid
   White cards, icon + name + status. No paragraphs. Tap whole tile.
   ============================================================ */

/* Hero tile — full-width, slightly larger */
.tools-tile-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--card, #FFFFFF);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.tools-tile-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: var(--ink);
}
.tools-tile-hero:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.tools-tile-hero .tools-tile-glyph {
  font-size: 1.6rem;
  color: var(--ink);
  width: 32px;
  text-align: center;
  flex-shrink: 0;
}
.tools-tile-hero .tools-tile-text {
  flex: 1;
  min-width: 0;
}
.tools-tile-hero .tools-tile-name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.tools-tile-hero .tools-tile-status {
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 3px 0 0;
  line-height: 1.3;
}
.tools-tile-arrow {
  color: var(--ink-muted);
  font-size: 1.2rem;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.tools-tile-hero:hover .tools-tile-arrow {
  transform: translateX(3px);
  color: var(--ink);
}

/* 2-column tile grid */
.tools-tile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.tools-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 14px;
  background: var(--card, #FFFFFF);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  color: inherit;
  min-height: 92px;
}
.tools-tile:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}
.tools-tile:active { transform: translateY(0); }
.tools-tile .tools-tile-glyph {
  font-size: 1.3rem;
  color: var(--ink);
  line-height: 1;
}
.tools-tile .tools-tile-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.tools-tile .tools-tile-status {
  font-size: 0.74rem;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.3;
  margin-top: auto;
}

/* Footer pointer to Reports in Settings */
.tools-reports-footer {
  text-align: center;
  font-size: 0.78rem;
  color: var(--ink-muted);
  margin: 22px 0 8px;
  font-style: italic;
  font-family: var(--font-italic);
}
.tools-reports-footer a {
  color: var(--ink);
  cursor: pointer;
  text-decoration: underline;
}
.tools-reports-footer a:hover { color: var(--cobalt); }

/* On wider screens, allow up to 3 columns */
@media (min-width: 600px) {
  .tools-tile-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* ============================================================
   V3 6F — GUIDES pane (in ME → Guides)
   ============================================================ */
.guides-intro {
  margin-bottom: 18px;
}
.guides-state-picker {
  background: var(--card, #FFFFFF);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 18px 16px;
  margin-bottom: 16px;
}
.guides-state-picker .eyebrow { margin: 0 0 4px; }
.guides-state-picker h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 14px;
}
.guides-state-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.guides-state-chips .state-chip {
  padding: 8px 14px;
  background: var(--paper-warm);
  border: 1px solid var(--border-soft);
  border-radius: 100px;
  font-family: inherit;
  font-size: 0.84rem;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s;
}
.guides-state-chips .state-chip:hover {
  border-color: var(--ink);
  background: var(--card);
}
.guides-state-chips .state-chip.selected {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Filtered results (after a chip is tapped) */
.guides-filtered {
  background: var(--paper-warm);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 18px;
  border: 1px solid var(--border-soft);
}
.guides-filtered .eyebrow {
  font-style: italic;
  font-family: var(--font-italic);
  color: var(--ink-soft);
  margin: 0 0 10px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.84rem;
}
.guides-filtered-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.guides-filtered-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--card, #FFFFFF);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.15s;
}
.guides-filtered-item:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}
.guides-filtered-glyph {
  color: var(--ink-muted);
  flex-shrink: 0;
}
.guides-filtered-title {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--ink);
}
.guides-filtered-clear {
  margin-top: 6px;
  align-self: flex-start;
  font-size: 0.78rem;
  font-style: italic;
  font-family: var(--font-italic);
}

/* Browse all + inner sub-toggle */
.guides-browse {
  margin-top: 8px;
}
.guides-inner-toggle {
  display: flex;
  gap: 4px;
  background: var(--paper-warm);
  padding: 4px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.guides-inner-btn {
  flex: 1;
  padding: 9px 14px;
  border: none;
  background: transparent;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.guides-inner-btn.active {
  background: var(--ink);
  color: var(--paper);
}
.guides-inner-btn:hover:not(.active) { color: var(--ink); }

/* ============================================================
   V3 6G — Unified weather body — body-time-style rows
   Replaces the old .weather-line + .weather-rhythms split.
   ============================================================ */

/* ============================================================
   V3 6H — UNIFIED WEATHER STACK · LUXE PASS
   Warm cream tracks, jewel phase fills, position dots,
   hairline dividers, intro line, pattern note, breathing room
   ============================================================ */

.weather-body {
  /* Soft warm gradient background for the rhythm card */
  /* Card itself sits on this — keeps things readable under the rows */
}

/* Hide the old rhythms strip if it's still in DOM */
.weather-rhythms { display: none !important; }

/* Intro line — frames the stack */
.wb-intro {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink, #1A1A1A);
  opacity: 0.7;
  margin: 6px 0 22px 0;
  padding: 0 2px;
  letter-spacing: 0;
}

.weather-lines {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 2px 0 2px;
}

.wb-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 8px 13px;
  border-top: 1px solid rgba(26, 26, 26, 0.07);
  transition: background 0.18s ease, opacity 0.15s ease;
  border-radius: 4px;
  margin: 0 -4px;
}
.wb-row:first-child { border-top: none; padding-top: 2px; }

.wb-row[onclick] { cursor: pointer; }
.wb-row[onclick]:hover {
  background: rgba(216, 184, 130, 0.08);
}

.wb-row-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wb-row-glyph {
  font-size: 1rem;
  width: 18px;
  flex-shrink: 0;
  color: var(--ink, #1A1A1A);
  opacity: 0.78;
  text-align: center;
  line-height: 1;
}
.wb-row-label {
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink, #1A1A1A);
  opacity: 0.55;
  font-weight: 500;
}

.wb-row-value {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink, #1A1A1A);
  margin: 2px 0 0 30px;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

/* Track: warm cream, not gray */
.wb-row-track {
  position: relative;
  height: 3px;
  background: rgba(216, 184, 130, 0.28);
  border-radius: 2px;
  overflow: visible;
  margin: 8px 4px 2px 30px;
}
.wb-row-fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(26,26,26,0.4) 0%, rgba(26,26,26,0.55) 100%);
  border-radius: 2px;
  transition: width 0.4s ease;
}
/* Position dot — marks exact spot */
.wb-row-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink, #1A1A1A);
  box-shadow: 0 0 0 2.5px rgba(244, 232, 216, 0.92), 0 1px 2px rgba(26, 26, 26, 0.18);
  pointer-events: none;
  transition: left 0.4s ease;
}

.wb-row-sub {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ink, #1A1A1A);
  opacity: 0.72;
  margin: 5px 4px 0 30px;
}

/* Pattern recognition note — italic line at the bottom of the stack */
.wb-pattern {
  margin: 14px 4px 4px;
  padding: 10px 14px;
  background: rgba(216, 184, 130, 0.14);
  border-left: 2px solid rgba(26, 26, 26, 0.28);
  border-radius: 3px;
}
.wb-pattern-label {
  font-family: var(--font-body);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink, #1A1A1A);
  opacity: 0.55;
  margin: 0 0 3px;
  font-weight: 500;
}
.wb-pattern-text {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink, #1A1A1A);
  opacity: 0.82;
  margin: 0;
}

@media (max-width: 380px) {
  .wb-intro { font-size: 0.84rem; margin-bottom: 12px; }
  .wb-row-value { font-size: 1rem; margin-left: 26px; }
  .wb-row-track { margin-left: 26px; }
  .wb-row-sub { font-size: 0.82rem; margin-left: 26px; }
  .wb-pattern-text { font-size: 0.85rem; }
}

/* Phase color tinting — cycle row gets jewel-toned fill + matching dot */
.wb-row.phase-menstrual .wb-row-fill {
  background: linear-gradient(90deg, var(--phase-menstrual) 0%, var(--phase-menstrual) 100%);
}
.wb-row.phase-menstrual .wb-row-dot { background: var(--phase-menstrual); }

.wb-row.phase-follicular .wb-row-fill {
  background: linear-gradient(90deg, var(--phase-follicular) 0%, var(--phase-follicular) 100%);
}
.wb-row.phase-follicular .wb-row-dot { background: var(--phase-follicular); }

.wb-row.phase-ovulation .wb-row-fill {
  background: linear-gradient(90deg, var(--phase-ovulation) 0%, var(--phase-ovulation) 100%);
}
.wb-row.phase-ovulation .wb-row-dot { background: var(--phase-ovulation); }

.wb-row.phase-early-luteal .wb-row-fill {
  background: linear-gradient(90deg, var(--phase-early-luteal) 0%, var(--phase-early-luteal) 100%);
}
.wb-row.phase-early-luteal .wb-row-dot { background: var(--phase-early-luteal); }

.wb-row.phase-late-luteal .wb-row-fill {
  background: linear-gradient(90deg, var(--phase-late-luteal) 0%, var(--phase-late-luteal) 100%);
}
.wb-row.phase-late-luteal .wb-row-dot { background: var(--phase-late-luteal); }

.wb-row-sub {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink, #1A1A1A);
  opacity: 0.72;
  margin: 8px 4px 0 30px;
}

/* Pattern recognition note — italic line at the bottom of the stack */
.wb-pattern {
  margin: 22px 4px 6px;
  padding: 16px 18px;
  background: rgba(216, 184, 130, 0.14);
  border-left: 2px solid rgba(26, 26, 26, 0.28);
  border-radius: 3px;
}
.wb-pattern-label {
  font-family: var(--font-body);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink, #1A1A1A);
  opacity: 0.55;
  margin: 0 0 6px;
  font-weight: 500;
}
.wb-pattern-text {
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink, #1A1A1A);
  opacity: 0.82;
  margin: 0;
}

@media (max-width: 380px) {
  .wb-intro { font-size: 0.88rem; margin-bottom: 18px; }
  .wb-row-value { font-size: 1.08rem; margin-left: 26px; }
  .wb-row-track { margin-left: 26px; }
  .wb-row-sub { font-size: 0.84rem; margin-left: 26px; }
  .wb-pattern-text { font-size: 0.88rem; }
}