/* =========================================================================
   NIYAM — Design System
   "Quiet Luxury" editorial aesthetic: warm alabaster / deep obsidian,
   sage-green + champagne-gold accents, generous whitespace, Playfair
   Display headlines over Plus Jakarta Sans UI. Mobile-first responsive.
   ========================================================================= */

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

:root{
  /* ---- Palette (light — warm alabaster) ---- */
  --bg: #F7F3EC;
  --bg-soft: #EFE8DB;
  --surface: rgba(255,253,249,0.66);
  --surface-solid: #FFFDF9;
  --surface-border: rgba(37, 31, 22, 0.08);
  --text: #241F19;
  --text-dim: #6E6455;
  --text-faint: #75664F;

  --accent: #7C8B6F;         /* muted sage green */
  --accent-2: #C6A664;       /* champagne gold */
  --accent-soft: rgba(124,139,111,0.12);
  --warn: #C17F5C;           /* soft terracotta */
  --danger: #B25A4C;
  --success: #7C8B6F;

  /* WCAG-safe companions to the tokens above. --accent/--accent-2/--warn read
     beautifully as soft fills, but are too light to use as small standalone
     text (2-3.6:1 on this background) — --accent-ink is the same sage family
     darkened until it clears 4.5:1, for labels/kickers/numbers set directly
     on the page or card background. --ink/--ink-on-dark are what sits on top
     of a solid accent/accent-2/warn fill (a button, an active pill, a
     completed checkmark): white fails badly against these light, warm fills
     (as low as 1.95:1), so buttons use a dark ink instead — which, as a
     bonus, is more "quiet luxury" than white-on-gold anyway. --danger-fill
     is a fill-safe shade for the one solid danger background (see dark
     theme below, where plain --danger is too light for white text). */
  --accent-ink: #4F5C46;
  --ink: #241F19;
  --danger-fill: var(--danger);

  --ring-track: rgba(124,139,111,0.14);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(37, 31, 22, 0.045);
  --shadow-md: 0 6px 20px rgba(37, 31, 22, 0.06);
  --shadow-lg: 0 18px 48px rgba(37, 31, 22, 0.10);
  --shadow-glow: 0 0 0 1px rgba(124,139,111,0.12), 0 8px 24px rgba(124,139,111,0.16);

  --blur: blur(20px);
  --font-body: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;

  /* Neumorphic "pillowy" dual-shadow tokens, warmed to match the alabaster
     surface — used sparingly on small, directly-pressable controls
     (checkboxes, steppers, icon buttons) so they read as physically
     tappable, layered on top of the glass cards that carry the rest of
     the UI. */
  --neu-light: rgba(255,255,255,0.8);
  --neu-dark: rgba(178,164,138,0.38);
  --neu-out: 6px 6px 14px var(--neu-dark), -6px -6px 14px var(--neu-light);
  --neu-out-sm: 3px 3px 8px var(--neu-dark), -3px -3px 8px var(--neu-light);
  --neu-in: inset 3px 3px 8px var(--neu-dark), inset -3px -3px 8px var(--neu-light);

  color-scheme: light;
}

[data-theme="dark"]{
  /* ---- Palette (dark — deep obsidian) ---- */
  --bg: #14120E;
  --bg-soft: #1C1913;
  --surface: rgba(28, 25, 19, 0.6);
  --surface-solid: #1E1B15;
  --surface-border: rgba(247,242,233,0.08);
  --text: #F3EEE4;
  --text-dim: #B5AA97;
  --text-faint: #968974;

  --accent: #9DAE8F;
  --accent-2: #D4B677;
  --accent-soft: rgba(157,174,143,0.14);
  --warn: #D19571;
  --danger: #C56F60;
  --success: #9DAE8F;

  /* See the light-theme comment above — dark mode's accent/accent-2/warn
     already read fine as standalone text, so --accent-ink just points back
     at --accent. --ink flips to a near-black obsidian for text on top of a
     solid fill, and --danger-fill is a deepened danger red used only where
     danger is a solid background (white text on the base --danger is only
     3.6:1 here, --danger itself stays as-is since it's also used as plain
     text — e.g. the auth error message — where it already passes at 5.2:1). */
  --accent-ink: var(--accent);
  --ink: #14120E;
  --danger-fill: #A8483C;

  --ring-track: rgba(157,174,143,0.18);

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.28);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.34);
  --shadow-lg: 0 22px 56px rgba(0,0,0,0.48);
  --shadow-glow: 0 0 0 1px rgba(212,182,119,0.14), 0 8px 26px rgba(212,182,119,0.16);
  --neu-light: rgba(255,255,255,0.04);
  --neu-dark: rgba(0,0,0,0.6);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg: #14120E;
    --bg-soft: #1C1913;
    --surface: rgba(28, 25, 19, 0.6);
    --surface-solid: #1E1B15;
    --surface-border: rgba(247,242,233,0.08);
    --text: #F3EEE4;
    --text-dim: #B5AA97;
    --text-faint: #968974;
    --accent: #9DAE8F;
    --accent-2: #D4B677;
    --accent-soft: rgba(157,174,143,0.14);
    --warn: #D19571;
    --danger: #C56F60;
    --success: #9DAE8F;
    --accent-ink: var(--accent);
    --ink: #14120E;
    --danger-fill: #A8483C;
    --ring-track: rgba(157,174,143,0.18);
    --shadow-sm: 0 1px 4px rgba(0,0,0,0.28);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.34);
    --shadow-lg: 0 22px 56px rgba(0,0,0,0.48);
    --shadow-glow: 0 0 0 1px rgba(212,182,119,0.14), 0 8px 26px rgba(212,182,119,0.16);
    --neu-light: rgba(255,255,255,0.04);
    --neu-dark: rgba(0,0,0,0.6);
    color-scheme: dark;
  }
}

.icon{ display:inline-flex; align-items:center; justify-content:center; line-height:0; flex:none; }
.icon svg{ display:block; }

*,*::before,*::after{ box-sizing: border-box; }
/* 1rem = 18px at the browser's default 16px setting, expressed as a
   percentage (not a fixed px) so a person who has bumped their browser's
   default text size for legibility gets that preference scaled up too,
   instead of overridden. Because the rest of the stylesheet is written in
   rem, this one line raises body copy, every heading, and every label in
   proportion — the "scale everything off the root" approach. */
html{ font-size: 112.5%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(1200px 600px at 10% -10%, var(--accent-soft), transparent 60%),
    radial-gradient(1000px 500px at 110% 10%, rgba(198,166,100,0.10), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;      /* 18px */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family: var(--font-display); font-weight:500; margin:0 0 .4em; letter-spacing:-0.01em; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
[hidden]{ display:none !important; }

/* ---- Focus ----
   A single on-brand focus ring for keyboard/switch-device navigation,
   scoped to :focus-visible so it only appears for keyboard and assistive
   input, not on every mouse click or touch tap. Uses outline (not
   box-shadow) so it never shifts layout, with a small offset so it reads
   as a ring around the control rather than a hard browser-default box. */
:focus{ outline:none; }
:focus-visible{
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.task-check:focus-visible, .btn-icon:focus-visible, .icon-btn:focus-visible,
.zen-check:focus-visible, .cal-day:focus-visible, .tab-item:focus-visible{
  outline-offset: 2px;
}
.input:focus-visible, select.input:focus-visible, textarea.input:focus-visible{
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

/* ---- Layout helpers ---- */
.container{ width:100%; max-width:1180px; margin:0 auto; padding:0 20px; }
@media (max-width:379px){ .container{ padding:0 14px; } }
.visually-hidden{ position:absolute; width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap; }

/* ---- Glass surface ---- */
.glass{
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
.card{
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 20px;
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 13px 24px; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor:pointer;
  font-size: 0.92rem; font-weight:500; letter-spacing:.01em; line-height:1;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease, background .15s ease;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
}
.btn:active{ transform: scale(0.97); }
.btn-primary{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: var(--ink); box-shadow: var(--shadow-glow);
}
.btn-primary:hover{ opacity:.95; }
.btn-ghost{
  background: var(--surface); color: var(--text);
  border-color: var(--surface-border);
}
.btn-ghost:hover{ background: var(--accent-soft); }
.btn-sm{ padding: 9px 18px; font-size: .85rem; min-height:40px; }
.btn-icon{
  width:44px; height:44px; padding:0; border-radius:50%;
  background: var(--bg-soft); border:none; color:var(--text);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow: var(--neu-out-sm);
  transition: box-shadow .12s ease, transform .12s ease;
}
@media (hover:hover){
  .btn-icon:hover{ box-shadow: var(--neu-out); }
}
.btn-icon:active{ box-shadow: var(--neu-in); transform: scale(0.96); }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.5; cursor:not-allowed; }

/* ---- Forms ---- */
.field{ margin-bottom: 16px; text-align:left; }
.field label{ display:block; font-size:.85rem; font-weight:600; color:var(--text-dim); margin-bottom:6px; }
.input, select.input, textarea.input{
  width:100%; padding: 13px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--surface-border); background: var(--surface-solid);
  color: var(--text); font-size: 1rem; font-family: inherit;
  min-height: 44px;
}
.input:focus, select.input:focus, textarea.input:focus{
  outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.hint{ font-size: .8rem; color: var(--text-faint); margin-top:6px; }
.stack-cue{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-family: var(--font-display); font-size:1.05rem; color: var(--text-dim);
}
.stack-cue .input{ display:inline-block; width:auto; min-width:160px; flex:1 1 160px; }

/* =========================================================================
   NAV
   ========================================================================= */
.topnav{
  position: sticky; top:0; z-index: 40;
  background: var(--surface); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--surface-border);
}
.topnav .container{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{
  display:flex; align-items:center; gap:11px; min-height:44px; padding:4px 2px;
  font-weight:600; font-size:1.15rem; letter-spacing:.02em; font-family: var(--font-display);
}
.brand-mark{
  width:34px; height:34px; border-radius:9px; flex:none;
  background: #14120E; border:1px solid rgba(212,182,119,0.35);
  display:flex; align-items:center; justify-content:center; color:#D4B677; font-weight:600;
  font-family: var(--font-display); font-size:1rem;
  box-shadow: var(--shadow-sm);
}
.nav-links{ display:none; gap:6px; align-items:center; }
.nav-links a, .nav-links button.navlink{
  display:inline-flex; align-items:center; min-height:44px;
  padding:9px 15px; border-radius: var(--radius-pill); font-weight:500; font-size:.9rem;
  color: var(--text-dim); background:transparent; border:none; cursor:pointer;
  transition: background .15s ease, color .15s ease;
}
@media (hover:hover){
  .nav-links a:hover, .nav-links button.navlink:hover{ background: var(--bg-soft); color:var(--text); }
}
.nav-links a.active, .nav-links button.navlink.active{ color: var(--text); background: var(--accent-soft); }
.nav-actions{ display:flex; align-items:center; gap:10px; }

.bottom-tabbar{
  position: fixed; bottom:0; left:0; right:0; z-index:40;
  display:flex; justify-content:space-around; align-items:center;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  background: var(--surface); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-top:1px solid var(--surface-border);
  overflow-x:auto;
}
.tab-item{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  background:none; border:none; color: var(--text-faint); font-size:.68rem; font-weight:600;
  padding:6px 10px; min-height:48px; border-radius:12px; min-width:56px; cursor:pointer;
  transition: color .15s ease, background .15s ease;
}
.tab-item svg{ width:22px; height:22px; }
@media (hover:hover){
  .tab-item:not(.active):hover{ color: var(--text-dim); }
}
.tab-item:active{ background: var(--bg-soft); }
.tab-item.active{ color: var(--accent-ink); }

body{ padding-bottom: 78px; }
body:not(.has-app-shell){ padding-bottom: 0; }

@media (min-width: 860px){
  .nav-links{ display:flex; }
  .bottom-tabbar{ display:none; }
  body{ padding-bottom:0; }
}

/* =========================================================================
   LANDING PAGE
   ========================================================================= */
.hero{ padding: 88px 0 48px; text-align:center; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 18px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-ink); font-weight:500; font-size:.74rem;
  letter-spacing:.12em; text-transform:uppercase; margin-bottom:26px;
}
.hero h1{
  font-weight:500;
  font-size: clamp(2.1rem, 5.5vw, 3.6rem); line-height:1.12; margin-bottom:22px;
  max-width: 780px; margin-left:auto; margin-right:auto;
}
.hero .lede{
  font-size: clamp(1.02rem, 2vw, 1.2rem); color: var(--text-dim); font-weight:300;
  max-width: 620px; margin: 0 auto 36px;
}
.hero-cta{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:56px; }
.hero-visual{ max-width: 920px; margin: 0 auto; padding: 8px; }

.section{ padding: 80px 0; }
.section-head{ text-align:center; max-width:640px; margin:0 auto 48px; }
.section-head .kicker{ color:var(--accent-ink); font-weight:500; font-size:.74rem; text-transform:uppercase; letter-spacing:.14em; margin-bottom:14px; display:block; }
.section-head h2{ font-weight:500; font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
.section-head p{ color: var(--text-dim); font-size:1.02rem; font-weight:300; }

.grid{ display:grid; gap:20px; }
.grid > *{ min-width:0; } /* prevents a long unbroken string (e.g. an invite link) from stretching a grid track and causing horizontal page scroll */
.grid-3{ grid-template-columns: repeat(1, 1fr); }
.grid-4{ grid-template-columns: repeat(1, 1fr); }
@media (min-width:640px){ .grid-3{ grid-template-columns: repeat(2,1fr);} .grid-4{grid-template-columns: repeat(2,1fr);} }
@media (min-width:960px){ .grid-3{ grid-template-columns: repeat(3,1fr);} .grid-4{grid-template-columns: repeat(4,1fr);} }

.feature-card{ padding:30px 26px; text-align:left; transition: transform .2s ease, box-shadow .2s ease; }
@media (hover:hover){
  .feature-card:hover, .step-card:hover, .testimonial-card:hover, .challenge-card:hover{
    transform: translateY(-3px); box-shadow: var(--shadow-md);
  }
}
.feature-icon{
  width:46px; height:46px; border-radius:13px; margin-bottom:18px;
  background: var(--accent-soft);
  display:flex; align-items:center; justify-content:center; color: var(--accent);
}
.feature-card h3{ font-weight:600; font-size:1.05rem; margin-bottom:8px; }
.feature-card p{ color: var(--text-dim); font-size:.92rem; font-weight:300; margin:0; }

.steps{ counter-reset: step; display:grid; gap:24px; grid-template-columns:1fr; list-style:none; margin:0; padding:0; }
@media (min-width:860px){ .steps{ grid-template-columns:repeat(3,1fr); } }
.step-card{ padding:30px 26px; position:relative; transition: transform .2s ease, box-shadow .2s ease; }
.step-num{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display);
  background: var(--bg-soft); color: var(--accent-ink); font-weight:600; border:1px solid var(--surface-border);
  margin-bottom:18px;
}
.step-card h3{ font-weight:600; font-size:1.03rem; margin-bottom:8px; }
.step-card p{ color:var(--text-dim); font-size:.92rem; font-weight:300; margin:0; }

.testimonial-card{ padding:26px; display:flex; flex-direction:column; gap:14px; transition: transform .2s ease, box-shadow .2s ease; }
.testimonial-stars{ color: var(--accent-2); font-size:.9rem; letter-spacing:2px; }
.testimonial-quote{ color: var(--text-dim); font-size:.95rem; font-weight:300; line-height:1.65; }
.testimonial-person{ display:flex; align-items:center; gap:10px; margin-top:auto; }
.avatar{
  width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:700; color:#fff; font-size:.85rem; flex:none;
}
.person-meta strong{ display:block; font-size:.88rem; }
.person-meta span{ font-size:.78rem; color:var(--text-faint); }

.final-cta{ text-align:center; padding: 70px 0 100px; }
.final-cta h2{ font-weight:500; font-size:clamp(1.7rem,3vw,2.2rem); margin-bottom:12px; }
.final-cta p{ color:var(--text-dim); font-weight:300; margin-bottom:30px; }

.site-footer{ padding: 34px 0 44px; text-align:center; color: var(--text-faint); font-size:.83rem; font-weight:300; letter-spacing:.02em; }

/* =========================================================================
   AUTH VIEW
   ========================================================================= */
.auth-wrap{
  min-height: calc(100vh - 68px); display:flex; align-items:center; justify-content:center; padding: 40px 16px;
}
.auth-card{ width:100%; max-width: 420px; padding: 38px 30px; text-align:center; }
.auth-card h1{ font-weight:500; font-size:1.55rem; margin-bottom:8px; }
.auth-card .sub{ color:var(--text-dim); font-size:.92rem; font-weight:300; margin-bottom:28px; }
.auth-toggle{ display:flex; gap:6px; background: var(--bg-soft); padding:4px; border-radius: var(--radius-pill); margin-bottom:24px; }
.auth-toggle button{
  flex:1; min-height:44px; border:none; background:none; padding:9px; border-radius: var(--radius-pill);
  font-weight:600; font-size:.88rem; color: var(--text-dim); cursor:pointer;
}
.auth-toggle button.active{ background: var(--surface-solid); color:var(--text); box-shadow: var(--shadow-sm); }
.auth-error{ color: var(--danger); font-size:.85rem; margin: -6px 0 14px; text-align:left; }
.auth-foot{ margin-top:18px; font-size:.85rem; color: var(--text-faint); }
.auth-foot button{
  background:none; border:none; color:var(--accent); font-weight:700; cursor:pointer; font-size:inherit;
  padding:10px 4px; min-height:44px;
}

/* =========================================================================
   APP SHELL / DASHBOARD
   ========================================================================= */
.app-main{ padding: 28px 0 40px; }
.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:26px; flex-wrap:wrap; }
.page-head h1{ font-weight:500; font-size:1.6rem; margin-bottom:4px; }
.page-head .sub{ color:var(--text-dim); font-size:.9rem; font-weight:300; }

.dash-grid{ display:grid; gap:20px; grid-template-columns: 1fr; }
.dash-grid > *{ min-width:0; } /* grid items default to min-width:auto and won't shrink below their content's natural width otherwise */
/* The sidebar column (ring, timer, tips) is a fixed-width, self-contained
   block — on any viewport still narrower than the 2-column breakpoint it
   would otherwise stretch edge-to-edge and strand the ring/timer digits in
   a sea of empty card, which reads as unfinished rather than premium. Cap
   it to a comfortable reading width and center it until there's room for a
   real second column. */
.dash-side{ max-width:460px; margin:0 auto; width:100%; }
@media (min-width:640px){ .dash-side{ max-width:520px; } }
/* Switch to a 2-column layout at the same breakpoint the top nav switches
   to its desktop layout, so "desktop chrome" and "desktop content layout"
   change together instead of leaving a stretched single-column dashboard
   under a desktop nav bar for a few hundred pixels of tablet/small-laptop
   width. */
@media (min-width: 860px){
  .dash-grid{ grid-template-columns: 300px 1fr; align-items:start; }
  .dash-side{ max-width:none; margin:0; }
}
@media (min-width: 1100px){
  .dash-grid{ grid-template-columns: 340px 1fr; }
}

/* Hero widget */
.hero-widget{ padding:30px 26px; text-align:center; }
.ring-wrap{ position:relative; width:180px; height:180px; margin: 4px auto 20px; }
.ring-wrap svg{ transform: rotate(-90deg); width:100%; height:100%; }
.ring-track{ fill:none; stroke: var(--ring-track); stroke-width:10; }
.ring-progress{ fill:none; stroke-width:10; stroke-linecap:round; stroke: url(#ringGradient); transition: stroke-dashoffset .6s cubic-bezier(.4,0,.2,1); }
.ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring-center .pct{ font-size:2rem; font-weight:600; font-family: var(--font-body); }
.ring-center .lbl{ font-size:.7rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.1em; }
.hero-widget .today-label{ font-weight:600; margin-bottom:4px; }
.hero-widget .today-sub{ color:var(--text-dim); font-size:.85rem; font-weight:300; margin-bottom:20px; }

.countdown-box{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:15px 16px; border-radius: var(--radius-sm); background: var(--bg-soft); margin-top:6px; text-align:left;
}
.countdown-box .num{ font-size:1.5rem; font-weight:600; font-family: var(--font-body); color:var(--accent-ink); }
.countdown-box .lbl{ font-size:.76rem; color:var(--text-faint); letter-spacing:.03em; }

/* Task groups */
.time-group{ margin-bottom: 30px; }
.time-group-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.time-group-head .dot{ width:7px;height:7px;border-radius:50%; }
.time-group-head h2{ font-weight:500; font-family: var(--font-display); font-size:1.1rem; margin:0; letter-spacing:.01em; }
.time-group-head .count{ margin-left:auto; font-size:.78rem; color:var(--text-faint); letter-spacing:.03em; }

.task-list{ display:flex; flex-direction:column; gap:10px; }
.task-card{
  display:flex; align-items:center; gap:14px; padding:14px 16px;
}
.task-check{
  flex:none; width:44px; height:44px; border-radius:50%; border:none;
  display:flex; align-items:center; justify-content:center; cursor:pointer; background:var(--bg-soft);
  box-shadow: var(--neu-out-sm);
  transition: box-shadow .15s ease, transform .15s ease, background .2s ease;
}
@media (hover:hover){
  .task-check:not(.done):hover{ box-shadow: var(--neu-out); }
}
.task-check:active{ box-shadow: var(--neu-in); transform: scale(0.94); }
.task-check.done{
  background: linear-gradient(135deg,var(--accent),var(--accent-2)); border-color:transparent;
  box-shadow: 0 0 0 4px var(--accent-soft), 0 6px 16px rgba(124,139,111,0.3);
}
.task-check svg{ width:17px; height:17px; color: var(--ink); opacity:0; transform:scale(.5); transition: all .15s ease; }
.task-check.done svg{ opacity:1; transform:scale(1); }

/* Micro-interaction: a satisfying pop + glow the instant a habit is completed */
@keyframes pop-complete{
  0%{ transform:scale(1); }
  35%{ transform:scale(1.35); box-shadow: 0 0 0 10px var(--accent-soft), 0 8px 22px rgba(124,139,111,0.4); }
  65%{ transform:scale(0.94); }
  100%{ transform:scale(1); }
}
.task-check.just-completed{ animation: pop-complete .55s cubic-bezier(.34,1.56,.64,1); }

.sparkle-layer{ position:fixed; inset:0; pointer-events:none; z-index:300; }
.sparkle-dot{
  position:fixed; width:6px; height:6px; border-radius:50%;
  background: linear-gradient(135deg,var(--accent),var(--accent-2));
  transform: translate(-50%,-50%);
  animation: sparkle-fly .6s ease-out forwards;
}
@keyframes sparkle-fly{
  0%{ opacity:1; transform: translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3); }
}
.task-body{ flex:1; min-width:0; }
.task-title{ font-weight:600; font-size:.95rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.task-title .done-strike{ text-decoration: line-through; color: var(--text-faint); }
.task-cue{ font-size:.78rem; color: var(--text-faint); font-family: var(--font-display); font-style:italic; margin-top:3px; }
.task-meta{ display:flex; align-items:center; gap:6px; margin-top:7px; }
.streak-chip{
  display:inline-flex; align-items:center; gap:4px; font-size:.72rem; font-weight:600;
  padding:3px 10px; border-radius: var(--radius-pill); background: rgba(193,127,92,0.14); color:#A2653F;
}
[data-theme="dark"] .streak-chip{ color:#D19571; }
.task-actions{ display:flex; align-items:center; gap:8px; flex:none; }
/* Below ~520px the stepper + edit-icon column eats enough width that even
   short habit names ("Push Ups", "Plank") wrap to two or three lines — a
   cramped, unfinished look at the larger type scale. Give the actions their
   own row instead, indented to sit under the habit name rather than under
   the checkbox, so the title gets the card's full width to breathe. */
@media (max-width:520px){
  .task-card{ flex-wrap:wrap; }
  .task-actions{ flex-basis:100%; justify-content:flex-end; padding-left:58px; margin-top:2px; }
}
.stepper{ display:flex; align-items:center; gap:8px; position:relative; }
.stepper button{
  width:38px;height:38px;border-radius:50%;border:none; background:var(--bg-soft);
  color:var(--text); font-size:1rem; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--neu-out-sm); transition: box-shadow .12s ease, transform .12s ease;
  position:relative;
}
/* Invisible hit-slop: keeps the visual chip compact (38px, sits comfortably
   next to its neighbor in a dense stepper row) while the real tappable area
   meets the 44px minimum — the same technique iOS uses for compact toolbar
   controls. */
.stepper button::before{
  content:""; position:absolute; inset:50% auto auto 50%;
  width:44px; height:44px; transform:translate(-50%,-50%);
}
@media (hover:hover){
  .stepper button:hover{ box-shadow: var(--neu-out); }
}
.stepper button:active{ box-shadow: var(--neu-in); transform: scale(0.92); }
.stepper .val{ min-width:44px; text-align:center; font-weight:700; font-size:.85rem; }
.stepper .float-plus{
  position:absolute; top:-6px; right:-4px; font-size:.72rem; font-weight:800; color: var(--accent);
  pointer-events:none; animation: float-up .6s ease-out forwards;
}
@keyframes float-up{
  0%{ opacity:1; transform: translateY(0); }
  100%{ opacity:0; transform: translateY(-22px); }
}
.yn-toggle{ display:flex; gap:8px; }
.yn-toggle button{
  min-width:44px; min-height:44px; padding:8px 16px; border-radius: var(--radius-pill); border:none; background:var(--bg-soft);
  font-weight:700; font-size:.8rem; cursor:pointer; color:var(--text-dim);
  box-shadow: var(--neu-out-sm); transition: box-shadow .12s ease, transform .12s ease;
}
@media (hover:hover){
  .yn-toggle button:not(.active):hover{ box-shadow: var(--neu-out); color:var(--text); }
}
.yn-toggle button:active{ box-shadow: var(--neu-in); transform: scale(0.96); }
.yn-toggle button.active.yes{ background: var(--success); color: var(--ink); box-shadow: 0 6px 16px rgba(124,139,111,0.35); }
.yn-toggle button.active.no{ background: var(--danger-fill); color:#fff; box-shadow: 0 6px 16px rgba(178,90,76,0.3); }

.empty-state{ text-align:center; padding:30px 16px; color:var(--text-faint); }

/* Focus timer */
.timer-card{ padding:28px 24px; text-align:center; }
.timer-display{ font-family: var(--font-body); font-size:3rem; font-weight:300; margin: 12px 0 20px; font-variant-numeric: tabular-nums; letter-spacing:.01em; }
.timer-input-row{ display:flex; gap:10px; justify-content:center; margin-bottom:16px; flex-wrap:wrap; }
.timer-input-row .field{ margin:0; width:90px; }
.timer-controls{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.timer-controls .btn-ghost{ box-shadow: var(--neu-out-sm); border:none; }
.timer-controls .btn-ghost:active{ box-shadow: var(--neu-in); }
.timer-presets{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:16px; }
.timer-presets button{
  min-height:40px; padding:8px 16px; border-radius: var(--radius-pill); border:none;
  background: var(--bg-soft); font-size:.78rem; font-weight:600; color:var(--text-dim); cursor:pointer;
  box-shadow: var(--neu-out-sm); transition: box-shadow .12s ease;
  position:relative;
}
.timer-presets button::before{
  content:""; position:absolute; inset:50% auto auto 50%; width:44px; height:44px; transform:translate(-50%,-50%);
}
@media (hover:hover){
  .timer-presets button:hover{ box-shadow: var(--neu-out); color:var(--text); }
}
.timer-presets button:active{ box-shadow: var(--neu-in); }

/* Tips accordion / tabs */
.tips-tabs{ display:flex; gap:8px; margin-bottom:14px; overflow-x:auto; padding-bottom:2px; }
.tips-tabs button{
  flex:none; min-height:40px; padding:9px 16px; border-radius: var(--radius-pill); border:1px solid var(--surface-border);
  background: var(--surface-solid); font-size:.82rem; font-weight:600; color:var(--text-dim); cursor:pointer;
}
@media (hover:hover){
  .tips-tabs button:not(.active):hover{ background: var(--bg-soft); color:var(--text); }
}
.tips-tabs button.active{ background: var(--accent-soft); color: var(--accent-ink); border-color:transparent; }
.accordion-item{ border-bottom:1px solid var(--surface-border); }
.accordion-item:last-child{ border-bottom:none; }
.accordion-head{
  width:100%; min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 2px; background:none; border:none; cursor:pointer; text-align:left; color:var(--text); font-weight:600; font-size:.92rem;
}
@media (hover:hover){
  .accordion-head:hover{ color: var(--accent-ink); }
}
.accordion-head .chev{ transition: transform .2s ease; color:var(--text-faint); flex:none; }
.accordion-item.open .accordion-head .chev{ transform: rotate(180deg); }
.accordion-body{ max-height:0; overflow:hidden; transition: max-height .25s ease; }
.accordion-item.open .accordion-body{ max-height:200px; }
.accordion-body p{ padding: 0 2px 16px; color:var(--text-dim); font-size:.88rem; margin:0; }

/* =========================================================================
   ANALYTICS
   ========================================================================= */
.stat-row{ display:grid; grid-template-columns: repeat(2,1fr); gap:14px; margin-bottom:24px; }
@media (min-width:720px){ .stat-row{ grid-template-columns: repeat(4,1fr); } }
.stat-card{ padding:20px; }
.stat-card .stat-label{ font-size:.72rem; color:var(--text-faint); text-transform:uppercase; letter-spacing:.1em; margin-bottom:10px; }
.stat-card .stat-value{ font-size:1.7rem; font-weight:600; font-family: var(--font-body); }
.stat-card .stat-sub{ font-size:.78rem; color:var(--text-dim); font-weight:300; margin-top:4px; }
.stat-trend-up{ color: var(--success); }
.stat-trend-down{ color: var(--danger); }

.strength-list{ display:flex; flex-direction:column; gap:14px; }
.strength-row{ display:flex; align-items:center; gap:14px; }
.strength-row .name{ width:150px; flex:none; font-weight:600; font-size:.88rem; }
.bar-track{ flex:1; height:10px; border-radius: var(--radius-pill); background: var(--bg-soft); overflow:hidden; }
.bar-fill{ height:100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.strength-row .pct{ width:44px; text-align:right; font-weight:700; font-size:.85rem; flex:none; }

.heatmap-scroll{ overflow-x:auto; padding-bottom:8px; }
.heatmap-grid{ display:grid; grid-auto-flow:column; grid-template-rows: repeat(7, 13px); gap:3px; width:max-content; }
.heatmap-cell{ width:13px; height:13px; border-radius:3px; background: var(--ring-track); }
.heatmap-legend{ display:flex; align-items:center; gap:6px; font-size:.72rem; color:var(--text-faint); margin-top:10px; }
.heatmap-legend .heatmap-cell{ width:11px; height:11px; }

.insight-card{ display:flex; gap:12px; padding:16px; align-items:flex-start; }
.insight-card .ic-icon{ flex:none; width:34px;height:34px;border-radius:10px; background: rgba(235,87,87,0.12); color:var(--danger); display:flex;align-items:center;justify-content:center; }
.insight-card p{ margin:0; font-size:.88rem; color:var(--text-dim); }
.insight-card strong{ color:var(--text); }

/* =========================================================================
   GOALS
   ========================================================================= */
.goal-card{ padding:20px; display:flex; flex-direction:column; gap:12px; }
.goal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.goal-head h3{ font-size:1rem; margin:0; }
.goal-target-edit{ display:flex; align-items:center; gap:8px; }
.goal-target-edit input{ width:90px; }
.goal-progress-label{ display:flex; justify-content:space-between; font-size:.8rem; color:var(--text-dim); }

/* =========================================================================
   CALENDAR
   ========================================================================= */
.cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.cal-head h2{ font-size:1.15rem; margin:0; }
.cal-nav{ display:flex; gap:8px; }
.cal-grid{ display:grid; grid-template-columns: repeat(7,1fr); gap:6px; }
.cal-grid > *{ min-width:0; } /* let cells shrink to their 1fr track instead of being pushed wide by dot-row content */
.cal-card{ padding:20px; }
.cal-dow{ text-align:center; font-size:.68rem; font-weight:600; color:var(--text-faint); letter-spacing:.08em; padding-bottom:6px; text-transform:uppercase; }
.cal-day{
  aspect-ratio:1; min-width:0; border-radius:12px; border:1px solid var(--surface-border); background:var(--surface-solid);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; cursor:pointer;
  font-size:.82rem; font-weight:600; position:relative;
  transition: border-color .15s ease, background .15s ease;
}
.cal-day.muted{ opacity:.35; cursor:default; }
.cal-day.today{ border-color: var(--accent); }
.cal-day .dot-row{ display:flex; gap:2px; max-width:100%; overflow:hidden; flex-wrap:wrap; justify-content:center; }
.cal-day .dot-row span{ width:4px;height:4px;border-radius:50%; background: var(--ring-track); flex:none; }
.cal-day .dot-row span.filled{ background: var(--accent); }
.cal-day.future{ opacity:.4; }
@media (hover:hover){
  .cal-day:not(.future):not(.muted):hover{ border-color: var(--accent); background: var(--accent-soft); }
}

/* Small phones (iPhone SE / narrow Android — 320-479px): the 7-column calendar
   grid is a fixed-count layout, so cells can't reach a full 44px touch target
   without losing all breathing room around them. We tighten the card padding
   and gap here to get cells as close to that minimum as the width allows, while
   keeping enough gap between cells that a mistap lands on empty space, not a
   neighbor (the WCAG 2.5.8 "essential" exception for fixed grid layouts). */
@media (max-width:479px){
  .cal-card{ padding:14px 10px; }
  .cal-grid{ gap:4px; }
  .cal-day{ border-radius:9px; font-size:.76rem; }
}

.modal-overlay{
  position:fixed; inset:0; background: rgba(10,12,24,0.5); backdrop-filter: blur(4px);
  display:flex; align-items:flex-end; justify-content:center; z-index:100; padding:0;
}
@media (min-width:640px){ .modal-overlay{ align-items:center; padding:20px; } }
.modal{
  width:100%; max-width:480px; max-height:88vh; overflow-y:auto;
  background: var(--surface-solid); border-radius: 24px 24px 0 0; padding:24px; box-shadow: var(--shadow-lg);
}
@media (min-width:640px){ .modal{ border-radius:24px; } }
.modal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.modal-head h3{ margin:0; font-size:1.1rem; }
.modal-close{ background:none; border:none; color:var(--text-faint); cursor:pointer; padding:6px; }

/* =========================================================================
   SETTINGS / TRACKER MANAGER
   ========================================================================= */
.tracker-row{ display:flex; align-items:center; gap:14px; padding:14px 16px; }
.tracker-row .swatch{ width:10px; height:36px; border-radius: 6px; flex:none; }
.tracker-row .info{ flex:1; min-width:0; }
.tracker-row .info .n{ font-weight:600; font-size:.92rem; }
.tracker-row .info .m{ font-size:.78rem; color:var(--text-faint); }
.tracker-row .row-actions{ display:flex; gap:6px; }
.icon-btn{
  background:none; border:none; color:var(--text-faint); cursor:pointer; border-radius:10px;
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; flex:none;
}
@media (hover:hover){
  .icon-btn:hover{ background: var(--bg-soft); color:var(--text); }
}
.icon-btn:active{ background: var(--bg-soft); }

.segmented{ display:flex; gap:6px; background: var(--bg-soft); padding:4px; border-radius: var(--radius-pill); }
.segmented button{ flex:1; border:none; background:none; padding:9px 6px; border-radius: var(--radius-pill); font-size:.8rem; font-weight:600; color:var(--text-dim); cursor:pointer; }
.segmented button.active{ background:var(--surface-solid); color:var(--text); box-shadow:var(--shadow-sm); }

/* =========================================================================
   RADIO BUTTONS — single-choice fields (habit type, time of day)
   Real <input type="radio"> for native keyboard/screen-reader semantics,
   restyled with appearance:none. Sized well past the 24x24 minimum (the
   dot itself is 26px; the clickable card around it is a full 44px+ touch
   target), with a heavy 2.5px border so the control unmistakably reads as
   "a thing you choose" rather than a soft dot,  and a bold, fully-opaque
   inner circle on check — no washed-out tints — so the selected state is
   obvious at a glance.
   ========================================================================= */
.radio-group{ border:none; margin:0; padding:0; }
.radio-group legend{ padding:0; margin-bottom:8px; font-size:.85rem; font-weight:600; color:var(--text-dim); }
.radio-options{ display:flex; flex-wrap:wrap; gap:10px; }
/* Specificity note: ".field label{display:block;margin-bottom:6px}" (0,1,1) elsewhere in this
   file would otherwise beat a plain ".radio-option{display:flex}" (0,1,0) and silently stack the
   dot above the text. Scoping to ".radio-options .radio-option" (0,2,0) wins deterministically and
   the explicit margin:0 below strips the inherited label spacing. */
.radio-options .radio-option{
  display:flex; align-items:center; gap:10px; flex:1 1 auto;
  min-height:44px; margin:0; padding:10px 18px 10px 14px;
  border:1.5px solid var(--surface-border); border-radius: var(--radius-pill);
  background: var(--surface-solid); cursor:pointer;
  transition: border-color .15s ease, background .15s ease;
}
@media (hover:hover){
  .radio-options .radio-option:hover{ border-color: var(--accent-ink); }
}
.radio-options .radio-option:has(input:checked){
  border-color: var(--accent-ink); background: var(--accent-soft);
}
.radio-option span{ display:inline; font-size:.92rem; font-weight:600; color:var(--text); white-space:nowrap; }

.radio-option input[type="radio"]{
  appearance:none; -webkit-appearance:none; margin:0; flex:none;
  width:26px; height:26px; border-radius:50%;
  border: 2.5px solid var(--text-faint);
  background: var(--surface-solid);
  display:grid; place-content:center;
  cursor:pointer;
  transition: border-color .15s ease, transform .1s ease;
}
.radio-option input[type="radio"]::before{
  content:""; width:13px; height:13px; border-radius:50%;
  transform: scale(0);
  transition: transform .15s cubic-bezier(.4,0,.2,1);
  box-shadow: inset 1em 1em var(--accent-ink);
}
.radio-option input[type="radio"]:checked{
  border-color: var(--accent-ink);
  transform: scale(1.04);
}
.radio-option input[type="radio"]:checked::before{ transform: scale(1); }
.radio-option input[type="radio"]:active{ transform: scale(0.94); }

/* Toast */
.toast-wrap{ position:fixed; bottom: 90px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center; }
@media (min-width:860px){ .toast-wrap{ bottom:24px; } }
.toast{
  padding:12px 18px; border-radius: var(--radius-pill); background: var(--text); color: var(--bg);
  font-size:.85rem; font-weight:600; box-shadow: var(--shadow-lg); display:flex; align-items:center; gap:8px;
  animation: toast-in .2s ease;
}
@keyframes toast-in{ from{ opacity:0; transform: translateY(8px);} to{opacity:1; transform:translateY(0);} }

.offline-banner{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background: var(--warn); color: var(--ink); font-size:.8rem; font-weight:500; letter-spacing:.02em; padding:9px; text-align:center;
}

.section-title-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.section-title-row h2{ font-size:1.05rem; margin:0; }

/* =========================================================================
   ZEN MODE — one task at a time, everything else stripped away
   ========================================================================= */
body.zen-active .topnav .nav-links,
body.zen-active .topnav .nav-actions,
body.zen-active .bottom-tabbar{ display:none !important; }
body.zen-active .topnav .container{ justify-content:center; }

.zen-screen{
  min-height: calc(100vh - 68px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 32px 20px; text-align:center;
}
.zen-progress-dots{ display:flex; gap:6px; margin-bottom:34px; }
.zen-progress-dots span{ width:7px; height:7px; border-radius:50%; background: var(--ring-track); transition: background .2s ease, transform .2s ease; }
.zen-progress-dots span.done{ background: var(--accent); }
.zen-progress-dots span.current{ transform: scale(1.5); background: var(--accent-2); }

.zen-card{
  width:100%; max-width:420px; padding: 48px 32px; text-align:center;
}
.zen-kicker{ font-size:.76rem; font-weight:500; text-transform:uppercase; letter-spacing:.14em; color:var(--text-faint); margin-bottom:16px; }
.zen-name{ font-weight:500; font-size: clamp(1.7rem, 5vw, 2.2rem); margin-bottom:12px; }
.zen-cue{ color:var(--text-dim); font-weight:300; font-style:italic; font-family: var(--font-display); font-size:1.02rem; margin-bottom:36px; }
.zen-check{
  width:96px; height:96px; border-radius:50%; margin:0 auto 28px; border:none; cursor:pointer;
  background: var(--bg-soft); box-shadow: var(--neu-out); display:flex; align-items:center; justify-content:center;
  transition: box-shadow .15s ease, transform .15s ease, background .2s ease;
}
.zen-check:active{ box-shadow: var(--neu-in); transform: scale(0.96); }
.zen-check svg{ width:38px; height:38px; color: var(--ink); opacity:0; transform:scale(.5); transition: all .2s ease; }
.zen-check.done{ background: linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow: 0 0 0 7px var(--accent-soft), 0 8px 22px rgba(124,139,111,0.3); }
.zen-check.done svg{ opacity:1; transform:scale(1); }
.zen-stepper{ display:flex; align-items:center; justify-content:center; gap:22px; margin-bottom:10px; }
.zen-stepper button{
  width:56px; height:56px; border-radius:50%; border:none; background:var(--bg-soft); font-size:1.4rem;
  box-shadow: var(--neu-out); cursor:pointer; color:var(--text);
}
.zen-stepper button:active{ box-shadow: var(--neu-in); }
.zen-stepper .zen-val{ font-size:2.2rem; font-weight:500; font-family: var(--font-body); min-width:100px; }
.zen-exit{ margin-top:36px; }
.zen-done-screen{ padding: 60px 20px; text-align:center; }
.zen-done-screen .big-emoji{ font-size:3.5rem; margin-bottom:12px; }

/* =========================================================================
   STREAK FREEZES
   ========================================================================= */
.freeze-banner{
  display:flex; align-items:center; gap:14px; padding:18px 20px; margin-bottom:20px;
  background: linear-gradient(120deg, rgba(198,166,100,0.14), rgba(124,139,111,0.08));
}
.freeze-banner .fb-icon{
  flex:none; width:42px; height:42px; border-radius:12px; background: rgba(198,166,100,0.2); color:#9C7C3E;
  display:flex; align-items:center; justify-content:center;
}
[data-theme="dark"] .freeze-banner .fb-icon{ color:#D4B677; }
.freeze-banner .fb-body{ flex:1; font-size:.86rem; font-weight:300; color:var(--text-dim); }
.freeze-banner .fb-body strong{ color:var(--text); font-weight:600; }
.freeze-chip{
  display:inline-flex; align-items:center; gap:6px; font-size:.76rem; font-weight:600;
  padding:6px 13px; border-radius: var(--radius-pill); background: rgba(198,166,100,0.16); color:#9C7C3E;
}
[data-theme="dark"] .freeze-chip{ color:#D4B677; }

/* =========================================================================
   MILESTONE SHARE CARD
   ========================================================================= */
.milestone-modal{ text-align:center; }
.milestone-preview{
  border-radius: var(--radius-md); overflow:hidden; margin-bottom:18px; box-shadow: var(--shadow-md);
  background: var(--bg-soft);
}
.milestone-preview img{ width:100%; display:block; }
.milestone-actions{ display:flex; flex-direction:column; gap:10px; }
.share-btn{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; background:none; border:none; color:var(--accent-ink);
  font-weight:700; font-size:.82rem; cursor:pointer; padding:6px 8px;
}
@media (hover:hover){
  .share-btn:hover{ opacity:.75; }
}

/* =========================================================================
   CHALLENGES
   ========================================================================= */
.challenge-card{ padding:22px; display:flex; flex-direction:column; gap:12px; min-width:0; transition: transform .2s ease, box-shadow .2s ease; }
.challenge-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.challenge-head h3{ font-size:1.05rem; margin:0; }
.challenge-badge{
  font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  padding:5px 11px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-ink); flex:none;
}
.challenge-meta{ display:flex; flex-wrap:wrap; gap:8px; font-size:.78rem; color:var(--text-faint); }
.challenge-link-row{
  display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius: var(--radius-sm);
  background: var(--bg-soft); font-size:.78rem; color:var(--text-dim); overflow:hidden;
}
.challenge-link-row span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
.join-preview{ text-align:center; padding: 8px 4px 4px; }
.join-preview .jp-icon{
  width:64px; height:64px; border-radius:50%; margin:0 auto 16px; background: var(--accent-soft); color:var(--accent);
  display:flex; align-items:center; justify-content:center;
}

/* Utility */
.mt-24{ margin-top:24px; } .mb-0{ margin-bottom:0; }
.flex{ display:flex; } .items-center{ align-items:center; } .gap-8{ gap:8px; } .gap-12{ gap:12px; }
.text-dim{ color: var(--text-dim); } .text-faint{ color: var(--text-faint); }
.w-full{ width:100%; }