/* ═══════════════════════════════════════════════════════════════
   VITAL COMPASS — Design System
   Palette: Warm Slate & Sage — professional, soothing, trustworthy
   Warm ivory/cream base · muted blue-grey primary · dusty sage accent
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Lato:ital,wght@0,300;0,400;0,700;1,300&display=swap');

:root {
  /* ── Warm base (Furry Mortals) */
  --cream:          #faf8f5;
  --warm-white:     #fdfcfa;
  --parchment:      #f2ede6;
  --border:         #e4ddd5;
  --border-light:   #ede8e2;

  /* ── Slate (primary — muted blue-grey) */
  --slate-50:  #f6f7f9;
  --slate-100: #eceef2;
  --slate-200: #d4d9e2;
  --slate-300: #b0bac8;
  --slate-400: #8895a8;
  --slate-500: #64748b;
  --slate-600: #4e5d6f;
  --slate-700: #3a4654;
  --slate-800: #28333f;
  --slate-900: #1a2230;

  /* ── Sage (accent — dusty green) */
  --sage-50:   #f4f7f4;
  --sage-100:  #e4ede4;
  --sage-200:  #c5d9c5;
  --sage-300:  #9dbf9d;
  --sage-400:  #72a072;
  --sage-500:  #4e8050;
  --sage-600:  #3d6640;
  --sage-700:  #2e4d30;
  --sage-800:  #1f3521;

  /* ── Gold (Furry Mortals warmth — kept for key accents) */
  --gold:        #b8864a;
  --gold-light:  #d4a870;
  --gold-soft:   #f0e0c8;
  --gold-glow:   rgba(184,134,74,0.14);

  /* ── Semantic */
  --danger:         #b06070;
  --danger-bg:      #fbf0f2;
  --danger-border:  #e8c0c8;
  --warn:           #b8864a;
  --warn-bg:        #faf4ec;
  --warn-border:    #d4a870;
  --safe:           var(--sage-500);
  --safe-bg:        var(--sage-50);
  --safe-border:    var(--sage-200);

  /* ── Text */
  --text-dark:  #252525;
  --text-mid:   #404040;
  --text-soft:  #606060;
  --text-dim:   #909090;

  /* ── Accent aliases → Slate */
  --accent:         var(--slate-600);
  --accent-bright:  var(--slate-500);
  --accent-dark:    var(--slate-800);
  --accent-bg:      var(--slate-50);
  --accent-border:  rgba(100,116,139,0.22);
  --accent-glow:    rgba(100,116,139,0.10);

  /* ── Sage aliases */
  --sage-accent:        var(--sage-500);
  --sage-accent-bg:     var(--sage-50);
  --sage-accent-border: rgba(78,128,80,0.22);
  --sage-accent-glow:   rgba(78,128,80,0.10);

  /* ── Layout */
  --max-width: 960px;
  --nav-h:     64px;
  --radius:    12px;
  --radius-sm: 8px;
  --radius-xs: 5px;
  --shadow:    0 2px 16px rgba(40,51,63,0.10);
  --shadow-md: 0 4px 24px rgba(40,51,63,0.14);
  --shadow-lg: 0 8px 32px rgba(40,51,63,0.18);
  --transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{font-family:'Lato',sans-serif;font-weight:300;background:var(--cream);color:var(--text-dark);line-height:1.75;min-height:100%}

/* ══ TOP NAV ══════════════════════════════════════════════════════ */
.top-nav{background:#2c3440;border-bottom:1px solid rgba(255,255,255,0.06);position:sticky;top:0;z-index:200;box-shadow:0 2px 12px rgba(0,0,0,0.22)}
.top-nav-inner{max-width:var(--max-width);margin:0 auto;padding:0 28px;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:12px}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
.nav-logo-icon{width:36px;height:36px;background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.12);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0}
.nav-logo-text{font-family:'Playfair Display',serif;font-size:1.15rem;font-weight:600;color:rgba(240,238,234,0.92);letter-spacing:.01em}
.nav-logo-sub{display:block;font-size:.6rem;font-weight:400;color:rgba(200,198,194,0.5);letter-spacing:.09em;text-transform:uppercase;margin-top:-2px}
.nav-links{display:flex;align-items:center;gap:2px}
.nav-link{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:7px;text-decoration:none;font-size:.82rem;font-weight:400;color:rgba(200,198,194,0.65);border:none;background:none;cursor:pointer;transition:var(--transition);letter-spacing:.02em;white-space:nowrap;font-family:'Lato',sans-serif}
.nav-link:hover{background:rgba(255,255,255,0.08);color:rgba(240,238,234,0.92)}
.nav-link.active{background:rgba(255,255,255,0.10);color:rgba(240,238,234,0.95);font-weight:700;border:1px solid rgba(255,255,255,0.14)}
.nav-sync{font-size:.68rem;color:rgba(180,200,180,0.7);white-space:nowrap;display:none}

.nav-user-name{font-size:.72rem;color:rgba(200,198,194,0.5);padding:0 8px;white-space:nowrap;align-self:center;display:none}
@media(min-width:700px){.nav-user-name{display:block}}
.nav-signout{color:rgba(200,198,194,0.5)!important;font-size:.75rem!important}
.nav-signout:hover{color:rgba(240,238,234,0.9)!important;background:rgba(255,255,255,0.08)!important}

.identity-strip{background:linear-gradient(135deg,var(--parchment) 0%,var(--warm-white) 100%);border-bottom:1px solid var(--border);padding:18px 28px}
.identity-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px}
.identity-left{display:flex;flex-direction:column;gap:4px}
.identity-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.identity-name{font-family:'Playfair Display',serif;font-size:1.4rem;font-weight:600;color:var(--text-dark)}
.identity-name-input{font-family:'Playfair Display',serif;font-size:1.2rem;border:1px solid var(--gold-light);border-radius:var(--radius-xs);padding:4px 12px;background:var(--warm-white);color:var(--text-dark);outline:none;display:none;width:200px}
.identity-date{font-size:.78rem;color:var(--text-soft);font-weight:300;letter-spacing:.04em}
.weather-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border-light)}
.w-pill{display:flex;align-items:center;gap:4px;font-size:.72rem;color:var(--text-mid);background:var(--warm-white);border:1px solid var(--border);border-radius:20px;padding:3px 10px}
.w-pill.trigger{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger);font-weight:700}

/* ══ CHIPS ════════════════════════════════════════════════════════ */
.chip{font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:20px;cursor:pointer;transition:var(--transition);border:none}
.chip-teal{background:var(--sage-accent-bg);border:1px solid var(--sage-accent-border);color:var(--sage-600)}
.chip-teal:hover{background:var(--sage-500);color:white}

/* ══ DATE ROW (inside identity strip) ══════════════════════════ */
.date-row{display:flex;align-items:center;gap:5px;margin-top:5px;flex-wrap:wrap}
#journalDate{font-family:'Lato',sans-serif;font-size:.75rem;font-weight:600;color:var(--text-dark);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--cream);padding:3px 8px;outline:none;cursor:pointer;transition:var(--transition)}
#journalDate:focus{border-color:var(--slate-400)}
.date-nav-btn-sm{width:22px;height:22px;border-radius:50%;border:1px solid var(--border);background:var(--cream);color:var(--text-mid);font-size:1rem;line-height:1;cursor:pointer;transition:var(--transition);display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0}
.date-nav-btn-sm:hover:not(:disabled){background:var(--slate-100);border-color:var(--slate-300);color:var(--slate-700)}
.date-nav-btn-sm:disabled{opacity:.25;cursor:default}
.date-today-btn-sm{background:var(--slate-600);color:white;border:none;border-radius:20px;padding:3px 10px;font-size:.65rem;font-weight:700;letter-spacing:.04em;cursor:pointer;transition:var(--transition);white-space:nowrap;font-family:'Lato',sans-serif}
.date-today-btn-sm:hover{background:var(--slate-700)}
.entry-status-icon{font-size:.95rem;cursor:default;display:none;line-height:1}
@media(max-width:600px){
  .date-row{gap:4px}
  #journalDate{font-size:.7rem;padding:2px 6px}
}
/* Weather row inline with name */
.identity-name-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ══ PAGE WRAP ════════════════════════════════════════════════════ */
.page-wrap{max-width:var(--max-width);margin:0 auto;padding:32px 28px 80px}
.page-title{font-family:'Playfair Display',serif;font-size:1.6rem;font-weight:600;color:var(--text-dark);margin-bottom:4px}
.page-subtitle{font-size:.82rem;color:var(--text-soft);font-weight:300;margin-bottom:24px}

/* ══ GRIDS ════════════════════════════════════════════════════════ */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}
.col-span-2{grid-column:span 2}
.col-span-3{grid-column:span 3}
.grid-single{display:flex;flex-direction:column;gap:28px}
.grid-2-cards{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}

/* ══ CARDS ════════════════════════════════════════════════════════ */
.card{background:var(--warm-white);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);transition:box-shadow .2s;animation:fadeUp .32s ease both}
.card:hover{box-shadow:var(--shadow-md)}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.card:nth-child(1){animation-delay:.04s}.card:nth-child(2){animation-delay:.08s}.card:nth-child(3){animation-delay:.12s}
.card:nth-child(4){animation-delay:.16s}.card:nth-child(5){animation-delay:.20s}.card:nth-child(6){animation-delay:.24s}
.card:nth-child(7){animation-delay:.28s}.card:nth-child(8){animation-delay:.32s}.card:nth-child(9){animation-delay:.36s}
.card-header{display:flex;align-items:flex-start;gap:12px;padding:18px 24px 14px;border-bottom:1px solid var(--border-light)}
.card-icon{width:34px;height:34px;border-radius:var(--radius-sm);background:var(--slate-100);border:1px solid var(--slate-200);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0}
.card-icon-gold{background:var(--gold-soft);border-color:var(--gold-light)}
.card-icon-rose{background:var(--danger-bg);border-color:var(--danger-border)}
.card-icon-sage{background:var(--sage-50);border-color:var(--sage-200)}
.card-title{font-family:'Playfair Display',serif;font-size:1rem;font-weight:600;color:var(--text-dark);line-height:1.25}
.card-subtitle{font-size:.71rem;color:var(--text-soft);font-weight:300;margin-top:2px}
.card-body{padding:20px 24px}
.card-footer{padding:12px 24px 16px;border-top:1px solid var(--border-light);background:var(--cream)}
.divider{border:none;border-top:1px solid var(--border-light);margin:16px 0}

/* ══ WELLBEING SELECTOR (How Are You card) ═══════════════════════ */
.wellbeing-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.wellbeing-btn{
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--cream);
  cursor:pointer;
  padding:16px 10px 14px;
  display:flex;flex-direction:column;
  align-items:center;
  gap:6px;
  transition:var(--transition);
  text-align:center;
}
.wellbeing-btn:hover{border-color:var(--slate-400);background:var(--slate-50);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.wellbeing-btn.active{border-color:var(--slate-600);background:var(--slate-100);box-shadow:0 0 0 2px rgba(100,116,139,0.18)}
.wb-stage{font-size:.58rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);margin-bottom:2px}
.wb-title{font-family:'Playfair Display',serif;font-size:.88rem;font-weight:600;color:var(--text-dark);line-height:1.2;margin-bottom:4px}
.wb-role{font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim)}
.wb-desc{font-size:.67rem;color:var(--text-soft);line-height:1.45;font-weight:300;margin-top:4px}
.wellbeing-btn[data-val="1"] .wb-title{color:#b06070}
.wellbeing-btn[data-val="2"] .wb-title{color:#b8864a}
.wellbeing-btn[data-val="3"] .wb-title{color:#64748b}
.wellbeing-btn[data-val="4"] .wb-title{color:var(--sage-500)}
.wellbeing-btn[data-val="5"] .wb-title{color:var(--sage-600)}
.wellbeing-btn.active .wb-title{font-weight:700}

/* ══ DARK SLATE CARD (How Are You) ═══════════════════════════════ */
.card-dark-slate{
  background:linear-gradient(145deg,var(--slate-800) 0%,var(--slate-700) 100%);
  border-color:var(--slate-600);
  box-shadow:0 4px 22px rgba(28,40,52,0.28);
}
.card-dark-slate:hover{box-shadow:0 6px 30px rgba(28,40,52,0.38)}
.card-dark-slate .card-header{border-bottom-color:rgba(255,255,255,0.08)}
.card-dark-slate .card-title{color:#f0f2f5}
.card-dark-slate .card-subtitle{color:rgba(210,218,228,0.65)}
.card-dark-slate .wb-stage{color:rgba(210,218,228,0.45)}
.card-dark-slate .wb-role{color:rgba(210,218,228,0.45)}
.card-dark-slate .wb-desc{color:rgba(210,218,228,0.55)}
.card-dark-slate .wb-title{color:#d2dae4}
.card-dark-slate .wellbeing-btn[data-val="1"] .wb-title{color:#e09098}
.card-dark-slate .wellbeing-btn[data-val="2"] .wb-title{color:#d4aa78}
.card-dark-slate .wellbeing-btn[data-val="3"] .wb-title{color:#a8b8cc}
.card-dark-slate .wellbeing-btn[data-val="4"] .wb-title{color:#90c090}
.card-dark-slate .wellbeing-btn[data-val="5"] .wb-title{color:#6ec48a}
.card-dark-slate .wellbeing-btn{background:rgba(255,255,255,0.06);border-color:rgba(255,255,255,0.12)}
.card-dark-slate .wellbeing-btn:hover{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.28);transform:translateY(-2px)}
.card-dark-slate .wellbeing-btn.active{background:rgba(255,255,255,0.16);border-color:rgba(255,255,255,0.4);box-shadow:0 0 0 2px rgba(255,255,255,0.12)}
.card-dark-slate .divider{border-color:rgba(255,255,255,0.08)}

/* ══ LIGHT SAGE CARD (stress & quotes) ═══════════════════════════ */
.card-light-sage{
  background:linear-gradient(135deg,var(--sage-50) 0%,#eef4ee 100%);
  border-color:var(--sage-200);
  box-shadow:0 2px 14px rgba(78,128,80,0.08);
}
.card-light-sage:hover{box-shadow:0 4px 20px rgba(78,128,80,0.14)}
.card-light-sage .card-header{border-bottom-color:var(--sage-200)}
.card-light-sage .card-title{color:var(--sage-800)}
.card-light-sage .card-subtitle{color:var(--sage-600)}
.card-light-sage .divider{border-color:var(--sage-200)}
.card-light-sage .stress-labels .low{color:var(--sage-600)}
.card-light-sage .stress-labels .high{color:var(--danger)}
.card-light-sage .stress-num{color:var(--sage-700)}
.card-light-sage .stress-word{color:var(--sage-600)}
.card-light-sage input[type=range]::-webkit-slider-thumb{border-color:var(--sage-500);background:var(--warm-white)}

/* ══ RATING BUTTONS (kept for fallback) ═════════════════════════ */
.rating-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.rating-btn{aspect-ratio:1;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--cream);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;transition:var(--transition)}
.rating-btn .r-num{font-family:'Playfair Display',serif;font-size:1.5rem;line-height:1;color:var(--text-dark)}
.rating-btn .r-lbl{font-size:.6rem;font-weight:400;color:var(--text-soft);text-align:center;line-height:1.2}
.rating-btn:hover{border-color:var(--slate-400);background:var(--slate-50);transform:translateY(-2px);box-shadow:var(--shadow)}
.rating-btn.active{border-color:var(--slate-600);background:var(--slate-100);box-shadow:0 0 0 2px var(--accent-glow)}

/* ══ TEXTAREA / INPUT ════════════════════════════════════════════ */
.app-textarea{width:100%;background:var(--cream);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-dark);font-family:'Lato',sans-serif;font-size:.875rem;font-weight:300;line-height:1.75;padding:12px 16px;resize:vertical;min-height:90px;outline:none;transition:var(--transition)}
.app-textarea:focus{border-color:var(--slate-400);box-shadow:0 0 0 3px var(--accent-glow)}
.app-textarea::placeholder{color:#b8b0a8;font-style:italic}
.app-textarea-sage{background:var(--sage-50);border-color:var(--sage-200)}
.app-textarea-sage:focus{border-color:var(--sage-400);box-shadow:0 0 0 3px var(--sage-accent-glow)}
.app-input{width:100%;background:var(--cream);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-dark);font-family:'Lato',sans-serif;font-size:.875rem;padding:10px 14px;outline:none;transition:var(--transition)}
.app-input:focus{border-color:var(--slate-400);box-shadow:0 0 0 3px var(--accent-glow)}
label.field-label{display:block;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-soft);margin-bottom:6px}

/* ══ BUTTONS ═════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;gap:6px;font-family:'Lato',sans-serif;font-weight:700;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;border:none;border-radius:22px;padding:9px 22px;cursor:pointer;transition:var(--transition);text-decoration:none}
.btn-primary{background:linear-gradient(135deg,var(--slate-600),var(--slate-800));color:white;box-shadow:0 2px 10px rgba(40,51,63,0.22)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(40,51,63,0.34)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-sage{background:linear-gradient(135deg,var(--sage-500),var(--sage-700));color:white;box-shadow:0 2px 10px rgba(78,128,80,0.22)}
.btn-sage:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(78,128,80,0.34)}
.btn-gold{background:linear-gradient(135deg,var(--gold),#8a5e28);color:white;box-shadow:0 2px 10px rgba(184,134,74,0.22)}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(184,134,74,0.34)}
.btn-ghost{background:var(--cream);border:1px solid var(--border);color:var(--text-soft)}
.btn-ghost:hover{border-color:var(--slate-400);color:var(--slate-700);background:var(--slate-50)}
.btn-light{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.14);border:1px solid rgba(255,255,255,0.22);color:rgba(255,255,255,0.9);font-family:'Lato',sans-serif;font-weight:700;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;border-radius:22px;padding:9px 22px;cursor:pointer;transition:var(--transition)}
.btn-light:hover{background:rgba(255,255,255,0.24);color:white}
.btn-danger-ghost{background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger)}
.btn-danger-ghost:hover{background:#f5e0e4}
.btn-save{width:100%;justify-content:center;background:linear-gradient(135deg,var(--slate-600),var(--slate-800));color:white;font-size:.84rem;padding:13px 20px;border-radius:var(--radius-sm);box-shadow:0 3px 14px rgba(40,51,63,0.22);border:none}
.btn-save:hover{box-shadow:0 5px 22px rgba(40,51,63,0.34);transform:translateY(-1px)}
.btn-save:disabled{opacity:.6;cursor:not-allowed;transform:none}

/* ══ SLIDERS ═════════════════════════════════════════════════════ */
.stress-labels{display:flex;justify-content:space-between;font-size:.72rem;font-weight:700;margin-bottom:8px}
.stress-labels .low{color:var(--safe)}.stress-labels .high{color:var(--danger)}
input[type=range]{-webkit-appearance:none;width:100%;height:7px;border-radius:4px;outline:none;cursor:pointer}
input[type=range].stress-range{background:linear-gradient(to right,var(--sage-400),var(--gold),var(--danger))}
input[type=range].inflammation-range{background:linear-gradient(to right,var(--sage-300),#d4a870,#c07070,var(--danger))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--warm-white);border:2px solid var(--slate-500);box-shadow:0 1px 6px rgba(0,0,0,0.14);cursor:pointer;transition:var(--transition)}
input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.18);border-color:var(--slate-700)}
.stress-readout{text-align:center;margin-top:12px}
.stress-num{font-family:'Playfair Display',serif;font-size:2.4rem;line-height:1;transition:color .3s;color:var(--text-dark)}
.stress-word{font-size:.75rem;color:var(--text-soft);margin-top:3px;font-style:italic}

/* ══ STRESS CARD GRID ════════════════════════════════════════════ */
.stress-card-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}

/* ══ EXTRACTED PANEL ═════════════════════════════════════════════ */
.extracted{margin-top:12px;background:var(--parchment);border:1px solid var(--border);border-left:3px solid var(--slate-500);border-radius:var(--radius-sm);padding:14px 16px;display:none;animation:fadeUp .22s ease;font-size:.84rem;color:var(--text-mid)}
.extracted.show{display:block}
.extracted-title{font-family:'Playfair Display',serif;font-size:.88rem;color:var(--slate-700);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.tag{display:inline-block;font-size:.7rem;font-weight:700;padding:2px 10px;border-radius:20px;margin:2px 3px 2px 0;letter-spacing:.03em}
.tag-danger{background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger)}
.tag-safe{background:var(--safe-bg);border:1px solid var(--safe-border);color:var(--sage-600)}
.tag-neutral{background:var(--slate-100);border:1px solid var(--slate-200);color:var(--slate-600)}
.tag-warn{background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn)}
.alert-box{margin-top:10px;background:var(--danger-bg);border:1px solid var(--danger-border);border-radius:var(--radius-xs);padding:8px 12px;font-size:.76rem;color:var(--danger);font-weight:700}

/* ══ CHECKBOX ════════════════════════════════════════════════════ */
.check-row{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.check-box-wrap{position:relative;width:20px;height:20px;flex-shrink:0}
.check-box-wrap input[type=checkbox]{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;margin:0}
.check-box-face{width:20px;height:20px;border-radius:5px;border:1.5px solid var(--border);background:var(--cream);display:flex;align-items:center;justify-content:center;transition:var(--transition);pointer-events:none}
.check-box-face .check-mark{color:var(--sage-600);font-size:.75rem;display:none}

/* ══ QUICK PICKS ═════════════════════════════════════════════════ */
.quick-picks{margin-top:10px}
.quick-picks-label{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:7px}
.quick-picks-row{display:flex;flex-wrap:wrap;gap:6px}
.qp-chip{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:400;padding:4px 12px;border-radius:20px;border:1px solid var(--border);background:var(--cream);color:var(--text-mid);cursor:pointer;transition:var(--transition);user-select:none;font-family:'Lato',sans-serif}
.qp-chip:hover{border-color:var(--slate-400);background:var(--slate-50);color:var(--slate-700);transform:translateY(-1px)}
.qp-chip.selected{border-color:var(--slate-500);background:var(--slate-100);color:var(--slate-700);box-shadow:0 0 0 2px var(--accent-glow)}
.qp-chip.selected::before{content:'✓ ';font-size:.65rem}
.qp-chip-danger:hover,.qp-chip-danger.selected{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger)}
.qp-chip-warn:hover,.qp-chip-warn.selected{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn)}

/* ══ PATTERN BARS ════════════════════════════════════════════════ */
.pattern-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.pattern-label{font-size:.78rem;color:var(--text-mid);width:130px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pattern-bar-bg{flex:1;height:9px;background:var(--parchment);border-radius:5px;overflow:hidden}
.pattern-bar-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,var(--slate-600),var(--slate-400));transition:width .75s cubic-bezier(0.4,0,0.2,1)}
.bar-danger{background:linear-gradient(90deg,#b06070,#c0737a)}
.bar-safe{background:linear-gradient(90deg,#4e8050,#7a9e50)}
.bar-sage{background:linear-gradient(90deg,var(--sage-600),var(--sage-500))}
.bar-gold{background:linear-gradient(90deg,#a06030,#b8864a)}
.bar-slate{background:linear-gradient(90deg,var(--slate-700),var(--slate-500))}
.analytics-section-title{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--text-dim);margin-bottom:8px}
.analytics-avg-badge{display:flex;align-items:baseline;padding:10px 14px;background:var(--parchment);border:1px solid var(--border);border-radius:var(--radius-sm)}
.card-icon-slate{background:var(--slate-100);border-color:var(--slate-200)}
.pattern-count{font-size:.72rem;font-weight:700;color:var(--slate-600);width:34px;text-align:right;flex-shrink:0}
.pattern-pct{font-size:.65rem;color:var(--text-dim);width:32px;text-align:right;flex-shrink:0}
.pattern-section-title{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin:16px 0 8px;padding-bottom:4px;border-bottom:1px solid var(--border-light)}
.pattern-empty{text-align:center;padding:28px 0;color:var(--text-dim);font-size:.82rem;font-style:italic}
.flare-count-badge{font-size:.68rem;font-weight:700;background:var(--danger-bg);border:1px solid var(--danger-border);color:var(--danger);padding:3px 10px;border-radius:20px}

/* ══ CANVAS GRAPH ════════════════════════════════════════════════ */
.graph-wrap{position:relative}
canvas{width:100%!important;display:block;border-radius:var(--radius-xs)}
.graph-empty{text-align:center;color:var(--text-dim);font-size:.78rem;font-style:italic;padding:24px 0}
.avg-badge{display:inline-flex;align-items:center;gap:5px;border-radius:20px;padding:3px 12px;font-size:.72rem;font-weight:700;letter-spacing:.04em}

/* ══ SAVE CONFIRM ════════════════════════════════════════════════ */
.save-confirm{text-align:right;color:var(--sage-600);font-size:.82rem;font-weight:700;margin-top:8px;display:none;animation:fadeUp .2s ease}

/* ══ STAT BOXES ══════════════════════════════════════════════════ */
.stat-box{background:var(--warm-white);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;text-align:center;box-shadow:var(--shadow)}
.stat-num{font-family:'Playfair Display',serif;font-size:2.6rem;font-weight:600;color:var(--slate-700);line-height:1}
.stat-label{font-size:.7rem;color:var(--text-soft);margin-top:5px;letter-spacing:.04em;text-transform:uppercase;font-weight:700}

/* ══ QUOTE STRIP ═════════════════════════════════════════════════ */
.quote-strip{background:linear-gradient(135deg,var(--parchment),var(--warm-white));border:1px solid var(--border);border-left:4px solid var(--sage-400);border-radius:var(--radius);padding:20px 26px;font-family:'Playfair Display',serif;font-style:italic;font-size:.95rem;color:var(--text-mid);line-height:1.8}
.quote-strip cite{display:block;font-size:.7rem;font-style:normal;color:var(--text-dim);margin-top:8px;letter-spacing:.08em;text-transform:uppercase}

/* ══ RESILIENCE QUOTES CARD ══════════════════════════════════════ */
.resilience-quote{font-family:'Playfair Display',serif;font-style:italic;font-size:1.05rem;color:var(--sage-800);line-height:1.85;margin-bottom:10px;border:none;padding:0}
.resilience-attr{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sage-600)}
.btn-quote-refresh{margin-top:14px;background:none;border:1px solid var(--sage-300);color:var(--sage-600);border-radius:20px;padding:5px 14px;font-family:'Lato',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.06em;cursor:pointer;transition:var(--transition);display:inline-block}
.btn-quote-refresh:hover{background:var(--sage-100);border-color:var(--sage-400);color:var(--sage-700)}

/* ══ HISTORY ═════════════════════════════════════════════════════ */
.history-list{display:flex;flex-direction:column;gap:12px}
.history-entry{background:var(--warm-white);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:var(--transition);display:flex;align-items:stretch;color:var(--text-dark)}
.history-entry:hover{box-shadow:var(--shadow-md);border-color:var(--slate-300)}
.history-entry-main{flex:1;padding:16px 20px;cursor:pointer;transition:background .15s}
.history-entry-main:hover{background:var(--parchment)}
.history-entry-actions{display:flex;align-items:center;padding:10px 14px;border-left:1px solid var(--border-light);background:var(--cream)}
.btn-history-edit{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--slate-600);background:var(--warm-white);border:1px solid var(--slate-200);border-radius:20px;padding:7px 13px;text-decoration:none;white-space:nowrap;transition:var(--transition);font-family:'Lato',sans-serif}
.btn-history-edit:hover{background:var(--slate-600);border-color:var(--slate-600);color:white}
.btn-modal-edit{display:inline-flex;align-items:center;gap:4px;font-size:.72rem;font-weight:700;letter-spacing:.04em;color:var(--slate-600);background:var(--slate-50);border:1px solid var(--slate-200);border-radius:20px;padding:5px 12px;text-decoration:none;margin-left:12px;vertical-align:middle;transition:var(--transition);font-family:'Lato',sans-serif}
.btn-modal-edit:hover{background:var(--slate-600);border-color:var(--slate-600);color:white}
.history-entry-date{font-family:'Playfair Display',serif;font-size:1rem;font-weight:600;color:var(--text-dark);margin-bottom:10px}
.history-metrics{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.h-metric{display:flex;align-items:center;gap:5px;font-size:.75rem;color:var(--text-soft)}
.h-metric strong{font-weight:700;color:var(--text-dark)}
.history-tags{display:flex;flex-wrap:wrap;gap:5px}
.history-empty{text-align:center;padding:60px 20px;color:var(--text-dim);font-style:italic}
.history-empty .he-icon{font-size:2.5rem;display:block;margin-bottom:12px}

/* ══ MODAL ═══════════════════════════════════════════════════════ */
.modal-overlay{position:fixed;inset:0;background:rgba(28,36,46,.42);z-index:300;display:flex;align-items:flex-start;justify-content:center;padding:24px 16px;overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--warm-white);border-radius:var(--radius);box-shadow:0 14px 50px rgba(0,0,0,.18);width:100%;max-width:700px;padding:28px 30px;position:relative;transform:translateY(18px);transition:transform .22s;margin:auto}
.modal-overlay.open .modal{transform:translateY(0)}
.modal-close{position:absolute;top:16px;right:16px;background:var(--parchment);border:1px solid var(--border);border-radius:7px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.95rem;color:var(--text-soft);transition:var(--transition)}
.modal-close:hover{background:var(--danger-bg);color:var(--danger)}
.modal-title{font-family:'Playfair Display',serif;font-size:1.2rem;font-weight:600;color:var(--text-dark);margin-bottom:18px;padding-right:36px}
.modal-section-title{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin:16px 0 6px;padding-bottom:4px;border-bottom:1px solid var(--border-light)}
.modal-text{font-size:.85rem;color:var(--text-mid);line-height:1.7;white-space:pre-wrap}

/* ══ CALENDAR ════════════════════════════════════════════════════ */
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.cal-month{font-family:'Playfair Display',serif;font-size:1rem;font-weight:600;color:var(--text-dark)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-header{text-align:center;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-dim);padding:6px 0}
.cal-day{aspect-ratio:1;border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.78rem;cursor:pointer;transition:var(--transition);border:1px solid transparent}
.cal-day:hover:not(.empty){background:var(--slate-100);border-color:var(--slate-200)}
.cal-day.has-log{background:var(--slate-100);border-color:var(--slate-200);font-weight:700;color:var(--slate-700)}
.cal-day.has-flare{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger);font-weight:700}
.cal-day.today{border-color:var(--gold);background:var(--gold-soft);font-weight:700;color:var(--gold)}
.cal-day.empty{cursor:default;opacity:.3}

/* ══ SETTINGS ════════════════════════════════════════════════════ */
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--border-light);gap:16px}
.settings-row:last-child{border-bottom:none}
.settings-label{font-size:.88rem;color:var(--text-dark)}
.settings-hint{font-size:.72rem;color:var(--text-dim);margin-top:2px}
.settings-section-title{font-family:'Playfair Display',serif;font-size:1rem;font-weight:600;color:var(--text-dark);margin:24px 0 2px;padding-bottom:8px;border-bottom:1px solid var(--border)}

/* ══ FOOTER ══════════════════════════════════════════════════════ */
.site-footer{background:var(--slate-900);color:rgba(210,218,228,0.6);padding:32px 28px;margin-top:0}
.site-footer-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.footer-logo{font-family:'Playfair Display',serif;font-size:.9rem;color:rgba(210,218,228,0.85);font-weight:600;letter-spacing:.02em}
.footer-logo span{display:block;font-family:'Lato',sans-serif;font-size:.65rem;font-weight:300;letter-spacing:.1em;text-transform:uppercase;color:rgba(210,218,228,0.4);margin-top:2px}
.footer-note{font-size:.7rem;font-weight:300;color:rgba(210,218,228,0.4);line-height:1.6;text-align:right;max-width:420px}
.footer-divider{width:100%;height:1px;background:rgba(255,255,255,0.06);margin-bottom:6px}

/* ══ SPINNER ═════════════════════════════════════════════════════ */
.spinner{width:13px;height:13px;border:2px solid rgba(255,255,255,.3);border-top-color:white;border-radius:50%;animation:spin .7s linear infinite;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

/* ══ LEVEL BUTTONS (stress + inflammation 1-5) ═══════════════ */
.level-row{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.level-btn{
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--cream);
  cursor:pointer;
  padding:14px 8px 12px;
  display:flex;flex-direction:column;
  align-items:center;gap:8px;
  transition:var(--transition);
  text-align:center;
  font-family:'Lato',sans-serif;
}
.level-btn:hover{border-color:var(--slate-300);background:var(--slate-50);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.level-btn.active{border-color:var(--slate-500);background:var(--slate-100);box-shadow:0 0 0 2px rgba(100,116,139,0.18)}

/* Circle number */
.lb-circle{
  width:44px;height:44px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,0.18);
  transition:var(--transition);
}
.level-btn:hover .lb-circle{transform:scale(1.08);box-shadow:0 4px 14px rgba(0,0,0,0.22)}
.level-btn.active .lb-circle{transform:scale(1.12);box-shadow:0 4px 16px rgba(0,0,0,0.26)}
.lb-num{font-family:'Playfair Display',serif;font-size:1.3rem;font-weight:600;line-height:1;color:white}
.lb-title{font-size:.68rem;font-weight:700;color:var(--text-dark);line-height:1.2}
.lb-desc{font-size:.62rem;font-weight:300;color:var(--text-soft);line-height:1.4}

/* Tips panel */
.stress-tips-panel{
  margin-top:14px;
  background:var(--sage-50);
  border:1px solid var(--sage-200);
  border-left:3px solid var(--sage-400);
  border-radius:var(--radius-sm);
  padding:14px 16px;
  min-height:60px;
  transition:var(--transition);
}
.stress-tips-list{
  margin:0;padding:0;
  list-style:none;
  display:flex;flex-direction:column;gap:5px;
}
.stress-tips-list li{
  font-size:.75rem;
  color:var(--text-mid);
  line-height:1.55;
  padding-left:14px;
  position:relative;
}
.stress-tips-list li::before{
  content:'·';
  position:absolute;left:2px;
  color:var(--sage-500);
  font-size:1.1rem;line-height:1.3;
}
/* Wellbeing tips on dark card */
.wb-tips-list li{color:rgba(210,218,228,0.65)}
.wb-tips-list li::before{color:rgba(210,218,228,0.3)}

/* light sage card context */
.card-light-sage .level-btn{background:rgba(255,255,255,0.55);border-color:var(--sage-200)}
.card-light-sage .level-btn:hover{background:rgba(255,255,255,0.85);border-color:var(--sage-300)}
.card-light-sage .level-btn.active{border-color:var(--sage-600);background:rgba(255,255,255,0.9);box-shadow:0 0 0 2px rgba(78,128,80,0.18)}

/* ══ SLEEP & ENERGY ══════════════════════════════════════════ */
/* Hide number input arrows */
#sleepHours::-webkit-outer-spin-button,
#sleepHours::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#sleepHours[type=number]{-moz-appearance:textfield}
#sleepHours:focus{border-color:var(--slate-400)!important;box-shadow:0 0 0 3px var(--accent-glow)!important}

.energy-labels-h{display:flex;justify-content:space-between;font-size:.72rem;font-weight:700;margin-bottom:8px}
.energy-range-h{-webkit-appearance:none;width:100%;height:7px;border-radius:4px;outline:none;cursor:pointer;
  background:linear-gradient(to right,#903050,#c0737a,#b8864a,#7a9e50,#4e8050)}
.energy-range-h::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--warm-white);border:2px solid var(--slate-500);box-shadow:0 1px 6px rgba(0,0,0,0.14);cursor:pointer;transition:var(--transition)}
.energy-range-h::-webkit-slider-thumb:hover{transform:scale(1.18);border-color:var(--slate-700)}
.energy-readout-h{display:flex;align-items:baseline;gap:10px;margin-top:12px}
.energy-num{font-family:'Playfair Display',serif;font-size:2.2rem;font-weight:600;line-height:1;transition:color .2s}
.energy-word{font-size:.78rem;font-style:italic;transition:color .2s;color:var(--text-soft)}

/* ══ NAV FLARE BADGE ═════════════════════════════════════════ */
.nav-flare-badge{
  display:inline-flex;align-items:center;
  margin-left:6px;
  background:var(--danger-bg);
  border:1px solid var(--danger-border);
  color:var(--danger);
  font-size:.6rem;font-weight:700;letter-spacing:.05em;
  padding:2px 7px;border-radius:20px;white-space:nowrap;
}
.nav-link.active .nav-flare-badge{
  background:rgba(176,96,112,0.18);
  border-color:rgba(176,96,112,0.4);
}

/* ══ CARD HEADER LINK BUTTON ══════════════════════════════════ */
.btn-card-link{display:inline-flex;align-items:flex-start;font-size:.6rem;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--slate-600);background:var(--slate-50);border:1px solid var(--slate-200);border-radius:20px;padding:4px 10px;text-decoration:none;white-space:nowrap;transition:var(--transition);margin-left:auto;flex-shrink:0;align-self:flex-start;cursor:pointer;font-family:'Lato',sans-serif;line-height:1.4;box-sizing:border-box;-webkit-appearance:none;appearance:none}
.btn-card-link:hover{background:var(--slate-600);color:white;border-color:var(--slate-600)}
.save-confirm-top{font-size:.65rem;font-weight:700;color:rgba(150,210,170,0.9);letter-spacing:.04em;margin-top:4px;text-align:right}
.btn-card-link-light{color:rgba(210,218,228,0.85);background:rgba(255,255,255,0.08);border-color:rgba(210,218,228,0.25)}
.btn-card-link-light:hover{background:rgba(255,255,255,0.18);color:white;border-color:rgba(210,218,228,0.5)}

/* ══ SCROLLBAR ═══════════════════════════════════════════════════ */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

/* ══ RESPONSIVE ══════════════════════════════════════════════════ */
@media(max-width:820px){
  .grid-2,.grid-3,.grid-2-cards,.stress-card-grid{grid-template-columns:1fr}  .stress-card-grid > div:last-child{border-left:none!important;padding-left:0!important;border-top:1px solid var(--sage-200);padding-top:18px;margin-top:4px}
  .col-span-2,.col-span-3{grid-column:span 1}
  .page-wrap{padding:18px 16px 50px}
  .top-nav-inner{padding:0 16px}
  .identity-strip{padding:14px 16px}
  .nav-link .nl-label{display:none}
  .site-footer-inner{flex-direction:column;align-items:flex-start}
  .footer-note{text-align:left;max-width:100%}
  .wellbeing-row{grid-template-columns:repeat(5,1fr);gap:6px}
  .wb-desc{display:none}
  .level-row{gap:6px}
  .lb-circle{width:36px;height:36px}
  .lb-num{font-size:1.1rem}
  .lb-desc{display:none}
}
@media(max-width:540px){
  .top-nav-inner{flex-wrap:wrap;height:auto;padding:10px 14px;gap:8px}
  .nav-links{width:100%;justify-content:space-around;padding-bottom:4px}
  .pattern-label{width:90px}
  .wellbeing-row{gap:4px}
  .wb-role{display:none}
}