/* ==========================================================================
   THARVIK UI REDESIGN - 2026-09-25  (PREVIEW - not deployed)

   VISUAL LAYER ONLY. This file changes colors, type, shape and spacing and
   nothing else: no selector here changes what an element does, no id/class
   the JS depends on is renamed, and no display/visibility state that app.js
   toggles is overridden. Loaded after styles.css, so equal-specificity rules
   here win by order. To revert the whole redesign, remove the <link> to this
   file from index.html (backup of the old files: backup-pre-redesign-2026-09-25/).

   What the reference AI apps (ChatGPT, Claude, CREME, Arc) all do, and what
   this file copies from them:
   1. ONE accent, used sparingly - not a gradient, not several hues.
   2. Depth from tone + hairlines, not from glows, inset shadows or shine.
   3. One consistent corner language (soft radii + pills) - no cut corners.
   4. Calm typography: a refined serif for headlines/brand moments, one clean
      sans for UI, sentence case - not all-caps condensed shouting.
   5. Chat: assistant text sits plainly on the canvas; only the user's message
      is a soft bubble; the composer is a floating pill.
   ========================================================================== */

/* ---------- tokens -------------------------------------------------------- */
:root{
  --bg:#0E0E0F;
  --panel:#161617;
  --panel-2:#1E1E20;
  --line:#2B2B2E;
  --line-strong:#3C3C40;
  --text:#F3F1EC;
  --text-dim:#9C9A95;
  --steel:#8C8A85;

  --gold:#F4B04A;          /* the one accent */
  --gold-dim:#C4913F;
  --ember:#F0573F;         /* semantic only: danger / missed / protein */
  --ember-dim:#C24630;
  --ink:#16110A;           /* text on the accent */
  --blue:#6FA8FF;
  --blue-dim:#3F7BD6;

  --accent-tint:rgba(244,176,74,0.09);
  --accent-line:rgba(244,176,74,0.42);
  --focus-ring:rgba(255,255,255,0.07);

  --shadow-card:0 1px 2px rgba(0,0,0,0.30);
  --shadow-lift:0 10px 28px -10px rgba(0,0,0,0.60);
  --shadow-cta:none;
  --shadow-cta-hover:none;

  --bubble-text:#E7E4DE;
  --hero-end:#0E0E0F;
  --inset-shade:transparent;

  --r-sm:10px;
  --r-md:14px;
  --r-lg:18px;
  --r-pill:999px;
  --font-display:'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-ui:'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html[data-theme="light"]{
  --bg:#F7F5F0;
  --panel:#FFFFFF;
  --panel-2:#EFECE5;
  --line:#E4E0D6;
  --line-strong:#CFC9BB;
  --text:#1D1B18;
  --text-dim:#6C685F;
  --steel:#8A857B;

  --gold:#B45F06;
  --gold-dim:#9A5205;
  --ember:#D24322;
  --ember-dim:#B0371B;
  --ink:#FFFFFF;
  --blue:#2E6FCC;
  --blue-dim:#2E6FCC;

  --accent-tint:rgba(180,95,6,0.07);
  --accent-line:rgba(180,95,6,0.38);
  --focus-ring:rgba(29,27,24,0.06);

  --shadow-card:0 1px 2px rgba(40,30,10,0.06);
  --shadow-lift:0 10px 26px -10px rgba(40,30,10,0.18);

  --bubble-text:#1D1B18;
  --hero-end:#F7F5F0;
}

/* ---------- base ---------------------------------------------------------- */
html, body{
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
::selection{ background:rgba(244,176,74,0.30); }
*{ scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; }
button:focus-visible, a:focus-visible, [role="button"]:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px;
}
#app{ border-left-color:var(--line); border-right-color:var(--line); }

/* ---------- header -------------------------------------------------------- */
header{ padding:18px 20px 14px; gap:12px; }
.emblem{ width:32px; height:32px; animation:none; }
.wordmark{
  font-size:22px; letter-spacing:0.16em;
  background:none; -webkit-background-clip:initial; background-clip:initial;
  color:var(--text);
}
.tagline{ font-size:11.5px; color:var(--text-dim); margin-top:3px; letter-spacing:0.02em; }
.ai-badge{
  border:1px solid var(--line-strong); color:var(--text-dim);
  font-size:9.5px; padding:2px 6px; letter-spacing:0.08em; margin-top:-3px;
}
.streak-badge{
  clip-path:none; border-radius:var(--r-pill); box-shadow:none;
  background:var(--panel); border:1px solid var(--line); color:var(--gold); padding:6px 12px;
}
html[data-theme="light"] .streak-badge{ box-shadow:none; }
#themeBtn{ border-color:var(--line); color:var(--text-dim); width:36px; height:36px; }
#themeBtn:hover{ color:var(--text); border-color:var(--line-strong); }
#menuBtn{ border-radius:var(--r-sm); }
#menuBtn:hover{ background:var(--panel-2); color:var(--text); }

/* ---------- buttons: one primary style ------------------------------------ */
.cta-blade, .q-continue, #qAccountContinue, #goalCustomContinue, #beginBtn, #authSubmit,
#saveSettings, .pdf-btn, .calorie-upload-btn, .pricing-cta, .ask-demo-cta,
#resetPanel .cta-blade, .team-form-actions .cta-blade, .install-go{
  clip-path:none;
  background:var(--gold); color:var(--ink);
  border:none; border-radius:var(--r-md); box-shadow:none;
  font-family:var(--font-ui); font-weight:700; font-size:15.5px;
  letter-spacing:0; text-transform:none; line-height:1.2;
  min-height:52px; padding:14px 18px;
  transition:filter 0.15s ease, opacity 0.15s ease;
}
.cta-blade::before, .q-continue::before, #qAccountContinue::before, #goalCustomContinue::before,
#beginBtn::before, #authSubmit::before, .side-new::before, #saveSettings::before, .pdf-btn::before{
  display:none; content:none;
}
.cta-blade:hover, .q-continue:hover, #qAccountContinue:hover, #goalCustomContinue:hover,
#beginBtn:hover, #authSubmit:hover, #saveSettings:hover, .pdf-btn:hover,
.calorie-upload-btn:hover, .pricing-cta:hover, .ask-demo-cta:hover,
#resetPanel .cta-blade:hover, .team-form-actions .cta-blade:hover, .install-go:hover{
  transform:none; box-shadow:none; filter:brightness(1.07);
}
.cta-blade:active, .q-continue:active, #qAccountContinue:active, #goalCustomContinue:active,
#beginBtn:active, #authSubmit:active, #saveSettings:active, .pdf-btn:active,
.calorie-upload-btn:active, .pricing-cta:active, .ask-demo-cta:active{
  transform:none; filter:brightness(0.93);
}
.pdf-btn{ font-size:14px; min-height:46px; }
.ask-demo-cta{ font-size:15px; }
.team-form-actions .cta-blade{ font-size:14px; min-height:46px; padding:11px; }
.install-go{ font-size:15.5px; }

/* the sidebar "new chat" is a quiet secondary action, not a second CTA */
.side-new{
  clip-path:none; border-radius:var(--r-md); box-shadow:none;
  background:var(--panel-2); color:var(--text); border:1px solid var(--line);
  font-family:var(--font-ui); font-weight:600; font-size:14px;
  letter-spacing:0; text-transform:none; min-height:46px; padding:11px;
}
.side-new:hover{ transform:none; box-shadow:none; background:var(--panel-2); border-color:var(--line-strong); filter:none; }
.side-new:active{ transform:none; filter:brightness(0.96); }

.secondary-btn{
  border-radius:var(--r-md); border:1px solid var(--line); color:var(--text);
  font-weight:600; font-size:14px; letter-spacing:0; padding:12px;
}
.secondary-btn:hover{ border-color:var(--line-strong); background:var(--panel-2); }
.danger-btn{ border-radius:var(--r-md); }

/* ---------- forms --------------------------------------------------------- */
.field label{
  text-transform:none; letter-spacing:0; font-size:13px; font-weight:600; color:var(--text-dim);
}
.field input, .field select, .field textarea, #injuries, .settings-select, .checkin-input-row textarea{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:12px 14px; font-size:16px; color:var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus, #injuries:focus,
.settings-select:focus, .checkin-input-row textarea:focus{
  outline:none; border-color:var(--line-strong); box-shadow:0 0 0 3px var(--focus-ring);
}
.unit-toggle{
  border-radius:var(--r-pill); border:1px solid var(--line); background:var(--panel);
  box-shadow:none; padding:4px;
}
.unit-opt{ border-radius:var(--r-pill); font-size:13px; font-weight:600; letter-spacing:0; padding:9px; }
.unit-opt.selected{ background:var(--panel-2); color:var(--text); box-shadow:0 0 0 1px var(--line-strong); }
.consent-row input[type="checkbox"]{ accent-color:var(--gold); }
.consent-row a, .legal-links a:hover, .founder-link:hover{ color:var(--text); }
.consent-card a, .consent-row a{ color:var(--text); text-decoration:underline; }

/* ---------- auth screen (first impression) -------------------------------- */
.hero{
  height:330px; background:var(--panel);
  mask-image:none; -webkit-mask-image:none;
}
html[data-theme="light"] .hero{ background:var(--panel); }
.hero img{
  object-position:50% 12%; transform:none;
  filter:grayscale(1) contrast(1.1) brightness(0.9);
}
.hero-tint{
  background:linear-gradient(170deg, rgba(244,176,74,0.36) 0%, rgba(150,120,80,0.26) 100%);
  mix-blend-mode:color;
}
/* Fades on BOTH ends: the top dissolves into the header/page (no hard photo
   edge under the logo) and the bottom dissolves into the page below. */
.hero-fade{
  background:
    linear-gradient(to bottom, var(--hero-end) 0%, rgba(14,14,15,0) 26%),
    linear-gradient(to bottom, rgba(14,14,15,0) 0%, rgba(14,14,15,0.10) 45%, rgba(14,14,15,0.62) 78%, var(--hero-end) 100%);
}
html[data-theme="light"] .hero-fade{
  background:
    linear-gradient(to bottom, var(--hero-end) 0%, rgba(247,245,240,0) 26%),
    linear-gradient(to bottom, rgba(20,18,14,0) 0%, rgba(20,18,14,0.12) 45%, rgba(20,18,14,0.55) 76%, var(--hero-end) 100%);
}
.hero-text{ left:22px; right:22px; bottom:54px; }
.hero-eyebrow{
  font-size:11px; letter-spacing:0.16em; margin-bottom:12px; gap:0;
}
.hero-eyebrow::before{ display:none; }
.hero .hero-eyebrow{ color:rgba(246,243,236,0.78); }
.hero-title{
  font-family:var(--font-display); font-weight:400; font-size:46px; line-height:1.0;
  text-transform:none; letter-spacing:-0.015em; margin:0;
}
.hero .hero-title{ color:#F6F3EC; }
.hero-accent{
  font-family:var(--font-display); font-style:italic; font-weight:400;
  text-shadow:none; letter-spacing:-0.01em;
}
.hero .hero-accent{ color:#F4B04A; }
.auth-body{ padding:6px 22px 34px; }
.trial-hook{
  background:var(--accent-tint); border:1px solid var(--accent-line); box-shadow:none;
  border-radius:var(--r-md); padding:10px 14px; margin:0 0 18px; gap:0;
  color:var(--text); font-weight:600; font-size:13px; line-height:1.4;
}
.trial-hook-icon{ display:none; }
.lang-toggle{ margin-bottom:16px; }
.lang-opt.selected{ text-decoration-color:var(--text-dim); }
.auth-tabs{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-pill);
  box-shadow:none; padding:4px; margin-bottom:18px;
}
.auth-tab{
  border-radius:var(--r-pill); text-transform:none; letter-spacing:0;
  font-size:14px; font-weight:600; padding:10px;
}
.auth-tab.selected{
  background:var(--panel-2); color:var(--text); box-shadow:0 0 0 1px var(--line-strong);
}
.unit-toggle, .auth-tabs{ box-shadow:none; }
.auth-tab.selected{ box-shadow:0 0 0 1px var(--line-strong); }
.tutorial-link-group{ margin-top:22px; padding-top:12px; border-top:1px solid var(--line); }
.tutorial-link{ font-family:var(--font-ui); font-weight:600; font-size:13px; color:var(--text-dim); }
.tutorial-link svg{ color:var(--text-dim); opacity:0.9; }
.tutorial-link:hover, .tutorial-link:hover svg{ color:var(--text); }
.pricing-promo-hint a:hover{ color:var(--text); }

/* demo sections below the fold */
.ask-demo, .feature-showcase{ margin-top:36px; padding-top:32px; border-top:1px solid var(--line); }
.ask-demo-eyebrow{
  color:var(--text-dim); letter-spacing:0.14em; font-size:11px; gap:0; margin-bottom:10px;
}
.ask-demo-eyebrow::before{ display:none; }
.ask-demo-title{
  font-family:var(--font-display); font-weight:400; font-size:32px; line-height:1.08;
  letter-spacing:-0.012em; margin:0 0 18px;
}
.ask-demo-title .hero-accent{ text-shadow:none; }
.ask-console{
  clip-path:none; border-radius:var(--r-lg); box-shadow:none; background:var(--panel); padding:18px;
}
.ask-console-dot{ box-shadow:none; animation:none; }
.ask-console-badge{ border-color:var(--line-strong); color:var(--text-dim); }
.ask-chip{
  border-radius:var(--r-md); background:var(--panel-2); border:1px solid var(--line);
  font-weight:600; padding:12px 14px;
}
.ask-chip:hover:not(:disabled){ border-color:var(--line-strong); transform:none; box-shadow:none; }
.ask-chip.selected{ border-color:var(--accent-line); color:var(--text); background:var(--accent-tint); }
.ask-reply-bubble{ clip-path:none; border-radius:var(--r-md); box-shadow:none; background:var(--panel-2); }
.streak-demo, .team-showcase-demo{
  clip-path:none; border-radius:var(--r-lg); box-shadow:none; background:var(--panel);
}
.streak-demo-days .cal-day{ border-radius:7px; }
.streak-demo-counter svg{ filter:none; }
.feature-chip{ border-radius:var(--r-md); }
.feature-flourish{ font-size:20px; }

/* ---------- onboarding wizard --------------------------------------------- */
#setup{ padding:26px 22px; }
.q-progress{ height:3px; border-radius:2px; background:var(--line); }
.q-progress-fill{ background:var(--gold); border-radius:2px; }
.q-eyebrow{
  color:var(--text-dim); letter-spacing:0.12em; font-size:11.5px; gap:0; margin-bottom:12px;
}
.q-eyebrow::before{ display:none; }
.q-step h2, #setup h2{
  font-family:var(--font-display); font-weight:400; font-size:34px; line-height:1.08;
  text-transform:none; letter-spacing:-0.012em;
}
.q-step h2{ margin:0 0 22px; }
.q-opt{
  border-radius:var(--r-md); box-shadow:none; padding:16px 16px;
  transition:border-color 0.15s, background 0.15s;
}
.q-opt:hover{ border-color:var(--line-strong); transform:none; box-shadow:none; }
.q-opt.selected{
  border-color:var(--gold); background:var(--accent-tint); box-shadow:none;
}
html[data-theme="light"] .q-opt.selected{ box-shadow:none; }
.q-options.compact .q-opt{ border-radius:var(--r-md); }
.tone-opt{ border-radius:var(--r-md); }
.tone-opt:hover{ border-color:var(--line-strong); }
.tone-opt.selected{ border-color:var(--gold); background:var(--accent-tint); }
.q-back:hover{ color:var(--text); }

/* ---------- chat ---------------------------------------------------------- */
#chat{ padding:20px 20px 8px; gap:20px; }
.msg-row{ align-items:flex-start; gap:10px; }
.mini-avatar{ background:var(--panel); border:1px solid var(--line); }
/* the user side only ever had an empty placeholder ring - decoration, no data */
.msg-row.user .mini-avatar{ display:none; }
.msg{ padding:13px 16px; border-radius:var(--r-lg); font-size:15.5px; line-height:1.6; }
/* assistant: plain text on the canvas, no bubble (ChatGPT / Claude pattern) */
.msg.coach{
  background:transparent; clip-path:none; box-shadow:none; padding:3px 0 3px;
  max-width:calc(100% - 38px); color:var(--bubble-text);
}
/* user: one soft neutral bubble */
.msg.user{
  background:var(--panel-2); color:var(--text); clip-path:none; box-shadow:none; font-weight:500;
  border-radius:20px 20px 6px 20px;
}
.msg.coach .msg-h{
  font-family:var(--font-ui); font-weight:700; font-size:15.5px; color:var(--text);
  letter-spacing:0; text-transform:none; margin:18px 0 6px; gap:0;
}
.msg.coach .msg-h::before{ display:none; }
.msg.coach li{ padding-left:20px; }
.msg.coach li::before{
  width:5px; height:5px; border-radius:50%; transform:none; background:var(--text-dim);
  left:5px; top:11px;
}
.video-label{
  font-family:var(--font-ui); font-weight:600; font-size:12px; color:var(--text-dim);
  letter-spacing:0; text-transform:none; gap:0;
}
.video-label::before{ display:none; }
.video-cta{ border-radius:var(--r-md); }
.video-cta:hover{ border-color:var(--line-strong); transform:none; }
.video-cta:hover .video-cta-arrow{ color:var(--text); }
.meal-block{ border-radius:var(--r-md); }
.ex-card{
  clip-path:none; border-radius:var(--r-md); box-shadow:none; border:1px solid var(--line);
}
.ex-card:hover{ box-shadow:none; border-color:var(--line-strong); transform:none; }
.ex-card.readonly:hover{ box-shadow:none; border-color:var(--line); transform:none; }
.ex-card.done{ background:var(--accent-tint); border-color:var(--accent-line); box-shadow:none; }
html[data-theme="light"] .ex-card.done{ box-shadow:none; }
.ex-check.checked{ background:var(--gold); border-color:var(--gold); color:var(--ink); transform:none; }
.ex-video-btn.active{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.ex-card.done .ex-name{ text-decoration-color:var(--text-dim); }
.ex-complete-banner{
  background:var(--accent-tint); border:1px solid var(--accent-line); color:var(--text);
  border-radius:var(--r-md);
}
.typing-dots{ border-radius:var(--r-pill); }
.status-note.ok{ color:var(--text-dim); }

/* thumbs up / down under each Tharvik reply (2026-10-02): quiet until used */
.msg-feedback{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px;
  margin:-14px 0 0 38px;
}
.fb-btn{
  width:28px; height:28px; border:0; border-radius:var(--r-sm); background:transparent;
  color:var(--text-dim); opacity:0.55; cursor:pointer;
  display:grid; place-items:center; transition:opacity .15s, color .15s, background-color .15s;
}
.fb-btn svg{ width:15px; height:15px; }
.fb-down svg{ transform:rotate(180deg); }
.fb-btn:hover{ opacity:1; background:var(--panel-2); }
.fb-btn.on{ opacity:1; color:var(--gold); }
.fb-btn:focus-visible{ opacity:1; }
.fb-extra{ display:flex; flex-wrap:wrap; gap:6px; margin-left:4px; }
.fb-chip{
  padding:5px 10px; border-radius:var(--r-pill); border:1px solid var(--line);
  background:transparent; color:var(--text-dim); font:600 12px var(--font-ui); cursor:pointer;
  transition:border-color .15s, color .15s;
}
.fb-chip:hover{ border-color:var(--line-strong); color:var(--text); }
.fb-thanks{ font-size:12px; color:var(--text-dim); }
@media (prefers-reduced-motion: reduce){ .fb-btn, .fb-chip{ transition:none; } }
.msg-video-badge svg{ color:var(--text); }

#inputRow{
  margin:0 16px 16px; padding:6px 6px 6px 18px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-pill);
}
#inputRow:focus-within{ border-color:var(--line-strong); box-shadow:0 0 0 3px var(--focus-ring); }
#msgInput{ font-size:16px; font-weight:500; }
#sendBtn{ background:var(--gold); color:var(--ink); }
#sendBtn:hover{ filter:brightness(1.08); }
#photoBtn.open{ color:var(--text); }
.attach-menu{ border-radius:var(--r-md); box-shadow:0 14px 34px -8px rgba(0,0,0,0.55); }
.attach-menu-item{ border-radius:var(--r-sm); }
#attachPreview{ margin:0 16px 10px; }
#attachPreview img, #attachPreview .ap-file-icon{ border-radius:var(--r-sm); }
.msg-img{ border-radius:var(--r-md); }

/* ---------- side sheet ---------------------------------------------------- */
#sidePanel.show{ background-color:rgba(0,0,0,0.55); }
.side-sheet{ padding:18px 14px; border-right-color:var(--line); }
.side-chat-row{ border-radius:var(--r-sm); }
.side-chat-row.active{ background:var(--panel-2); border-color:transparent; }
.side-label{ color:var(--text-dim); letter-spacing:0.08em; }
.side-footer-btn:hover{ color:var(--text); }
/* menu features in the brand amber (Jorge, 2026-10-02); Log out stays neutral */
.side-footer-btn:not(#logoutBtn){ color:var(--gold); }
.side-footer-btn:not(#logoutBtn):hover{ color:var(--text); }
.side-footer-btn:disabled{ color:var(--text-dim); opacity:0.7; }
.side-busy-hint{ border-radius:var(--r-sm); border-color:var(--line); color:var(--text-dim); }

/* ---------- settings / legal / founder ------------------------------------ */
.settings-head{ padding:18px 22px 14px; }
.settings-head h2{
  font-family:var(--font-display); font-weight:400; font-size:28px;
  text-transform:none; letter-spacing:-0.01em;
}
.settings-body{ padding:20px 22px; }
.settings-close:hover{ color:var(--text); }
.legal-doc h3{
  font-family:var(--font-ui); font-weight:700; font-size:15px; color:var(--text);
  text-transform:none; letter-spacing:0;
}
.legal-doc b, .legal-doc a{ color:var(--text); }
.legal-doc a:hover{ color:var(--gold); }
.founder-row{ border-radius:var(--r-md); }
.founder-row:hover{ border-color:var(--line-strong); }
#resetPanel h2{
  font-family:var(--font-display); font-weight:400; font-size:30px; text-transform:none; letter-spacing:-0.01em;
}

/* ---------- calendar ------------------------------------------------------ */
.cal-month-label{
  font-family:var(--font-display); font-weight:400; font-size:24px;
  text-transform:none; letter-spacing:-0.01em;
}
.cal-nav-btn{ border-color:var(--line); }
.cal-nav-btn:hover{ border-color:var(--line-strong); }
.cal-day{ border-radius:var(--r-sm); }
.cal-day:hover{ border-color:var(--line-strong); }
.cal-day.today{ border-color:var(--gold); }
.cal-day .cal-ring{
  background:conic-gradient(var(--gold) calc(var(--pct,0) * 1%), var(--line) 0);
}
.cal-day.complete .cal-ring{ background:var(--gold); }
.cal-day.complete{ background:var(--accent-tint); }
.cal-day.recovery{ border-color:var(--blue-dim); background:rgba(111,168,255,0.07); }
.cal-day.recovery .cal-ring{
  background:conic-gradient(var(--blue) calc(var(--pct,0) * 1%), var(--line) 0);
}
.cal-day.recovery.complete{ background:rgba(111,168,255,0.14); }
.cal-day.recovery.complete .cal-ring{ background:var(--blue); }
.cal-day-title{
  font-family:var(--font-display); font-weight:400; font-size:30px;
  text-transform:none; letter-spacing:-0.012em; line-height:1.1;
}
.checkin-prompt{ border-radius:var(--r-md); border-color:var(--line); }
.checkin-prompt-title{
  font-family:var(--font-ui); font-weight:700; font-size:15px; letter-spacing:0;
  text-transform:none; color:var(--text);
}
.checkin-msg{ border-radius:var(--r-lg); }
.checkin-msg.coach{ background:transparent; box-shadow:none; padding-left:0; padding-right:0; }
.checkin-msg.user{ background:var(--panel-2); color:var(--text); border-radius:18px 18px 6px 18px; }
.checkin-input-row textarea{ border-radius:var(--r-md); }
.checkin-input-row button{
  background:var(--gold); color:var(--ink); border-radius:var(--r-sm); padding:11px 16px;
}
.tmcal-viewonly-note{ border-radius:var(--r-sm); }
.tmcal-subtitle{ color:var(--text-dim); }

/* ---------- pricing ------------------------------------------------------- */
.pricing-card{
  border-radius:var(--r-lg); box-shadow:none; padding:26px 22px 22px; border:1px solid var(--line);
}
.pricing-card.featured{
  background:var(--panel); border:1.5px solid var(--gold); box-shadow:none;
}
.pricing-card-badge, .pricing-card-badge.gold{
  background:var(--gold); color:var(--ink); font-family:var(--font-ui); font-weight:700;
  font-size:11px; letter-spacing:0.05em; text-transform:uppercase;
  border-radius:var(--r-pill); padding:5px 11px; box-shadow:none; top:-13px;
}
.pricing-card-eyebrow{
  color:var(--text-dim); text-transform:none; letter-spacing:0; font-size:14px; font-weight:600;
}
.pricing-card-price{
  font-family:var(--font-display); font-weight:400; font-size:54px; letter-spacing:-0.02em;
}
.pricing-card-price span{ font-family:var(--font-ui); font-size:15px; font-weight:600; }
.pricing-card-sub{ font-family:var(--font-ui); font-size:13px; }
.pricing-cta, .pricing-card.featured .pricing-cta{
  min-height:54px; padding:14px 18px; margin-top:18px; font-size:16px; letter-spacing:0;
  text-transform:none; box-shadow:none; animation:none; gap:10px;
}
.pricing-cta::after{ width:18px; height:18px; }
.pricing-cta:hover, .pricing-card.featured .pricing-cta:hover{ transform:none; box-shadow:none; }
.pricing-cta:disabled{ opacity:0.6; }
.pricing-promo-hint a:hover{ color:var(--text); }

/* ---------- tutorial / calorie / team ------------------------------------- */
.tutorial-card{ border-radius:var(--r-lg); box-shadow:none; padding:18px; }
.tutorial-card-icon{ background:var(--panel-2); color:var(--text); border-radius:var(--r-sm); }
.tutorial-card-title{
  font-family:var(--font-ui); font-weight:700; font-size:16px; text-transform:none; letter-spacing:0;
}
/* "How Tharvik works" (2026-10-01): serif hero, the real coaching loop as four
   numbered steps (it is an actual sequence), then a 2-column grid of extras */
.tut-hero{ padding:4px 0 26px; }
.tut-hero-title{
  font-family:var(--font-display); font-weight:400; font-size:40px; line-height:1.04;
  letter-spacing:-0.015em; color:var(--text); margin:0; text-wrap:balance;
}
.tut-hero-title em{ font-style:italic; color:var(--gold); }
.tut-hero-sub{ font-size:14.5px; line-height:1.55; color:var(--text-dim); margin:12px 0 0; max-width:34em; }
.tut-label{
  font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-dim); margin:0 0 14px;
}
.tut-steps{ list-style:none; margin:0 0 26px; padding:0; }
.tut-step{ display:grid; grid-template-columns:36px 1fr; gap:14px; position:relative; padding-bottom:20px; }
.tut-step:last-child{ padding-bottom:0; }
.tut-step:not(:last-child)::before{
  content:''; position:absolute; left:17.5px; top:40px; bottom:4px; width:1px; background:var(--line-strong);
}
.tut-step-n{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--gold-dim); color:var(--gold);
  font-family:var(--font-display); font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
.tut-step-title{ font-weight:700; font-size:16px; color:var(--text); margin:7px 0 4px; }
.tut-step-desc{ font-size:13.5px; line-height:1.5; color:var(--text-dim); }
.tut-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.tut-tile{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md);
  padding:14px; display:flex; flex-direction:column; gap:5px;
}
.tut-tile svg{ width:20px; height:20px; color:var(--gold); margin-bottom:5px; flex-shrink:0; }
.tut-tile-title{ font-weight:700; font-size:14px; line-height:1.25; color:var(--text); }
.tut-tile-desc{ font-size:12.5px; line-height:1.45; color:var(--text-dim); }
.tut-cta{
  display:block; width:100%; margin:26px 0 6px; padding:14px 18px; border:0; cursor:pointer;
  border-radius:var(--r-pill); background:var(--gold); color:var(--ink);
  font-family:var(--font-ui); font-weight:700; font-size:15px;
}
.tut-cta:active{ filter:brightness(0.95); }
@media (prefers-reduced-motion:no-preference){
  #tutorialPanel.show .tut-hero,
  #tutorialPanel.show .tut-step,
  #tutorialPanel.show .tut-tile{ animation:tutRise 0.45s cubic-bezier(.2,.7,.2,1) both; }
  #tutorialPanel.show .tut-step:nth-child(1){ animation-delay:0.08s; }
  #tutorialPanel.show .tut-step:nth-child(2){ animation-delay:0.14s; }
  #tutorialPanel.show .tut-step:nth-child(3){ animation-delay:0.20s; }
  #tutorialPanel.show .tut-step:nth-child(4){ animation-delay:0.26s; }
  #tutorialPanel.show .tut-tile{ animation-delay:0.32s; }
}
@keyframes tutRise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
/* Logged out, these two open from the landing page, whose sticky #lpNav
   (z-index 40) otherwise sits over the panel header and swallows Close. */
body:not(.in-app) #tutorialPanel, body:not(.in-app) #pricingPanel{ z-index:50; }

.calorie-ring{ box-shadow:none; }
.calorie-ring.over-target{ box-shadow:0 0 0 3px var(--ember); }
.calorie-ring-consumed{
  font-family:var(--font-ui); font-weight:700; font-size:34px; letter-spacing:-0.01em;
}
.calorie-meal-row{ border-radius:var(--r-md); }
.calorie-meal-stats{ color:var(--text-dim); }
.macro-chip{ border-radius:var(--r-pill); }

.team-card{ border-radius:var(--r-lg); }
.team-card-name{
  font-family:var(--font-ui); font-weight:700; font-size:17px; text-transform:none; letter-spacing:0;
}
.team-section-label{ color:var(--text-dim); letter-spacing:0.1em; }
.team-invite-row{ border-radius:var(--r-sm); background:var(--panel-2); }
.team-invite-code, .team-leader-invite-code{ color:var(--text); }
.team-invite-copy{ border-radius:var(--r-sm); }
.team-invite-copy:hover{ border-color:var(--line-strong); color:var(--text); }
.team-day-dot{ border-radius:3px; }
.team-day-dot[data-status="missed"]{ box-shadow:none; }
.team-roster-view-btn{ color:var(--text-dim); }
.team-roster-view-btn:hover{ color:var(--text); text-decoration-color:var(--line-strong); }
.team-text-link:hover{ color:var(--text); text-decoration-color:var(--line-strong); }
.team-invite-leader-btn{
  border:1px dashed var(--line-strong); border-radius:var(--r-sm); color:var(--text);
}
.team-invite-leader-btn:hover{ background:var(--panel-2); }
.team-leader-invite-result{ border-color:var(--line); border-radius:var(--r-sm); background:var(--panel-2); }
.team-form{ border-color:var(--line); border-radius:var(--r-lg); }

/* ---------- sheets & gates ------------------------------------------------ */
.install-card{ border-color:var(--line); border-radius:22px 22px 0 0; }
.install-card h2{ font-family:var(--font-display); font-weight:400; font-size:26px; letter-spacing:-0.01em; }
.install-step-n{ background:var(--panel-2); color:var(--text); border:1px solid var(--line); }
.install-close{ border-color:var(--line); color:var(--text); border-radius:var(--r-md); }
@media (min-width:600px){
  .install-card{ border-bottom:1px solid var(--line); border-radius:22px; }
}
.consent-card{ border-color:var(--line); border-radius:20px; }
.consent-card h2{ font-family:var(--font-display); font-weight:400; font-size:26px; letter-spacing:-0.01em; }

/* ---------- motion: keep only what carries meaning ------------------------ */
@media (prefers-reduced-motion:no-preference){
  .cta-blade, .q-continue, #qAccountContinue, #goalCustomContinue, #beginBtn, #authSubmit{
    transition:filter 0.15s ease;
  }
}

/* ==========================================================================
   CALORIE TRACKER - modelled on Cal AI's home screen (2026-09-25)
   Cal AI's structure: one big card with a large bold calorie number + ring,
   three equal macro tiles underneath, then a "recently logged" list of
   rounded cards. Same structure here, done purely in CSS: the ring maths
   (computeCalorieRing), target saving, photo logging and delete all stay
   exactly as they are - only how the existing elements are drawn changes.
   ========================================================================== */

/* hero card: the ring sits on a real surface, not floating on the page */
.calorie-ring-wrap{
  --card-bg:var(--panel);
  background:var(--card-bg); border:1px solid var(--line); border-radius:24px;
  padding:26px 20px 24px; margin-bottom:12px;
}
/* the ring's empty track is drawn with var(--panel) inline (JS); re-point it
   just for the ring so it stays visible on the card */
.calorie-ring{ --panel:var(--line); width:184px; height:184px; box-shadow:none; }
.calorie-ring::before{ inset:11px; background:var(--card-bg); }
.calorie-ring.over-target{ box-shadow:0 0 0 3px var(--ember); }
.calorie-ring-inner{ gap:1px; }
.calorie-ring-inner::before{
  content:''; width:20px; height:20px; margin-bottom:4px; background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c1 2.5-.5 3.8-1.6 5C9 9.5 8 11 8 13a4 4 0 0 0 8 0c0-1-.3-1.8-.8-2.5.6 1.6-.2 2.7-1 3-1 .4-1.7-.3-1.4-1.2.5-1.6-.4-2.7-1.3-3.6C10.6 7.8 11.4 5 12 3Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3c1 2.5-.5 3.8-1.6 5C9 9.5 8 11 8 13a4 4 0 0 0 8 0c0-1-.3-1.8-.8-2.5.6 1.6-.2 2.7-1 3-1 .4-1.7-.3-1.4-1.2.5-1.6-.4-2.7-1.3-3.6C10.6 7.8 11.4 5 12 3Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.calorie-ring-consumed{
  font-family:var(--font-ui); font-weight:800; font-size:46px; letter-spacing:-0.03em; line-height:1;
}
.calorie-ring-target-caption{
  font-family:var(--font-ui); font-size:12.5px; font-weight:600; text-transform:none;
  letter-spacing:0; color:var(--text-dim);
}
.calorie-ring-over{ font-family:var(--font-ui); font-size:12px; font-weight:700; }

/* macros: three equal tiles (label on top, big value below) */
.macro-legend{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-bottom:22px;
}
.macro-chip{
  display:grid; grid-template-columns:auto 1fr; grid-template-areas:"dot label" "val val";
  align-items:center; column-gap:7px; row-gap:8px;
  padding:14px 14px 13px; border-radius:18px; background:var(--panel); border:1px solid var(--line);
}
.macro-chip .macro-dot{ grid-area:dot; width:8px; height:8px; }
.macro-chip .macro-label{
  grid-area:label; font-family:var(--font-ui); font-weight:600; font-size:12.5px;
  text-transform:none; letter-spacing:0; color:var(--text-dim);
}
.macro-chip .macro-value{
  grid-area:val; font-family:var(--font-ui); font-weight:800; font-size:24px;
  letter-spacing:-0.02em; line-height:1;
}

/* target + upload */
#caloriePanel .field{ margin-bottom:10px; }
.calorie-photo-count{ font-family:var(--font-ui); font-size:12px; }

/* "recently logged": rounded cards with a leading tile, name, macros below */
.calorie-today-label{
  font-size:16px; font-weight:800; letter-spacing:-0.01em; text-transform:none;
  color:var(--text); margin:30px 0 14px;
}
.calorie-meal-row{
  display:grid; grid-template-columns:auto 1fr auto;
  grid-template-areas:"icon desc del" "icon stats stats";
  column-gap:14px; row-gap:4px; align-items:center;
  padding:14px; margin-bottom:10px; border-radius:20px;
  background:var(--panel); border:1px solid var(--line);
}
.calorie-meal-row::before{
  content:''; grid-area:icon; width:54px; height:54px; border-radius:16px;
  background-color:var(--panel-2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239C9A95' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='4.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:26px;
}
.calorie-meal-desc{ grid-area:desc; font-size:15px; font-weight:700; line-height:1.3; }
.calorie-meal-stats{
  grid-area:stats; font-family:var(--font-ui); font-size:12.5px; font-weight:600;
  color:var(--text-dim); white-space:normal; line-height:1.4;
}
.calorie-meal-delete{ grid-area:del; align-self:start; }
.calorie-meal-delete:hover{ color:var(--ember); }

/* SEVERAL SESSIONS IN ONE DAY */
.cal-session-title{
  font-family:var(--font-display); font-weight:400; font-size:24px;
  text-transform:none; letter-spacing:-0.01em; line-height:1.15;
}
.cal-day .cal-multi{ font-family:var(--font-ui); font-size:9.5px; }
/* ---- Tharvik wordmark (2026-10-05): wide modern Unbounded, name only ---- */
.wordmark{ font-family:'Unbounded', 'Anton', sans-serif; font-weight:700; font-size:18px; letter-spacing:.06em; }