/* =====================================================================
   DailyWin v2 - Premium Minimal design layer
   Loaded after premium.css. Overrides look & feel only; all behavior
   from index.html and premium.js stays intact.
   ===================================================================== */

/* ---------- Typography: one family, two scripts ----------
   Latin letters + digits render in Inter, Hebrew renders in Heebo.
   Both are self-hosted, so they work offline inside the PWA. */
@font-face{
  font-family:'DW Sans';
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url('../fonts/heebo-hebrew-wght-normal.woff2') format('woff2-variations'), url('../fonts/heebo-hebrew-wght-normal.woff2') format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;
}
@font-face{
  font-family:'DW Sans';
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url('../fonts/inter-latin-wght-normal.woff2') format('woff2-variations'), url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-200B,U+2011-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

body,button,input,textarea,select,h1,h2,.num-display,.hero-number,.entry-date-badge .d,.stat-card .value{
  font-family:'DW Sans',system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
body{font-feature-settings:"tnum" 1, "cv11" 1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}

/* ---------- Tokens ---------- */
:root{
  --bg:#F4F6F4;
  --bg-card:#FFFFFF;
  --bg-card-solid:#FFFFFF;
  --bg-alt:#EDF0EC;
  --sage-deep:#3D523C;
  --sage:#6B8466;
  --sage-light:#CFD9CB;
  --sage-tint:#E6ECE4;
  --clay:#9A5537;
  --clay-light:#F3E4DC;
  --gold:#C8A96A;
  --gold-text:#8A6B30;
  --gold-tint:rgba(200,169,106,.14);
  --ink:#1D211C;
  --ink-soft:#5C635A;
  --ink-faint:#7E857B;
  --line:rgba(29,33,28,.08);
  --input-bg:#EDF0EC;
  --input-border:rgba(29,33,28,.06);
  --input-text:#1D211C;
  --input-placeholder:#7E857B;
  --accent-btn:#3D523C;
  --accent-btn-text:#FFFFFF;
  --olive-950:#141B14;
  --olive-900:#1F2A1E;
  --radius-xl:28px;
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:16px;
  --shadow:0 1px 2px rgba(20,27,20,.04), 0 8px 24px rgba(20,27,20,.05);
  --shadow-hover:0 2px 6px rgba(20,27,20,.06), 0 18px 40px rgba(20,27,20,.08);
  --ease-premium:cubic-bezier(.22,1,.36,1);
}
[data-theme="dark"]{
  --bg:#121412;
  --bg-card:#1C201C;
  --bg-card-solid:#1C201C;
  --bg-alt:#262B26;
  --sage-deep:#C9D8C3;
  --sage:#9AB58C;
  --sage-light:#33402F;
  --sage-tint:#25302A;
  --clay:#E0A587;
  --clay-light:rgba(181,112,79,.16);
  --gold:#D9BE86;
  --gold-text:#E3CC9C;
  --gold-tint:rgba(200,169,106,.14);
  --ink:#F2F4F1;
  --ink-soft:#B0B5B0;
  --ink-faint:#848A82;
  --line:rgba(255,255,255,.08);
  --input-bg:#262B26;
  --input-border:rgba(255,255,255,.08);
  --input-text:#F2F4F1;
  --input-placeholder:#848A82;
  --accent-btn:#3D523C;
  --accent-btn-text:#FFFFFF;
  --shadow:0 1px 2px rgba(0,0,0,.25), 0 10px 28px rgba(0,0,0,.3);
  --shadow-hover:0 2px 6px rgba(0,0,0,.3), 0 18px 44px rgba(0,0,0,.36);
}

/* ---------- Canvas: clean, no warm blobs ---------- */
html{background:var(--bg);}
body{background:var(--bg);}
/* Linen texture stays (very subtle, set in premium.css); the warm color blobs go */
body::after{display:none;}

/* Onboarding: the soft waves fill the whole screen behind the cards */
#onboarding{
  background:
    linear-gradient(180deg, rgba(244,246,244,.35) 0%, rgba(244,246,244,0) 45%),
    image-set(url('../backgrounds/hero-bg.webp') type('image/webp'), url('../backgrounds/hero-bg.jpg') type('image/jpeg'))
    center bottom / cover no-repeat;
}
[data-theme="dark"] #onboarding{
  background:
    linear-gradient(180deg, rgba(18,20,18,.9) 0%, rgba(18,20,18,.82) 100%),
    image-set(url('../backgrounds/hero-bg.webp') type('image/webp'), url('../backgrounds/hero-bg.jpg') type('image/jpeg'))
    center bottom / cover no-repeat;
}
#splash{background:var(--bg);}

/* ---------- Top bar ---------- */
.brand{color:var(--ink); font-weight:650; letter-spacing:-.01em;}
.brand svg{filter:none; width:28px; height:28px;}
.icon-btn{color:var(--ink-soft);}
.icon-btn:hover{background:var(--bg-card); color:var(--ink);}
.pill-btn{background:var(--sage-tint); color:var(--sage-deep); border-color:transparent; font-weight:600;}
[data-theme="dark"] .pill-btn{color:var(--sage-deep);}

/* ---------- Hero: one deep card, no photo, no nested box ---------- */
.hero{
  min-height:0;
  margin-top:6px;
  padding:28px 26px 24px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-xl);
  background-color:#1F2A1E;
  background-image:
    radial-gradient(380px circle at 92% -10%, rgba(200,169,106,.16), transparent 62%),
    linear-gradient(160deg, rgba(44,58,43,.9) 0%, rgba(31,42,30,.88) 48%, rgba(20,27,20,.94) 100%),
    image-set(url('../backgrounds/hero-bg.webp') type('image/webp'), url('../backgrounds/hero-bg.jpg') type('image/jpeg'));
  background-size:auto, auto, cover;
  background-position:center, center, center 62%;
  background-repeat:no-repeat;
  box-shadow:0 2px 6px rgba(20,27,20,.08), 0 22px 48px rgba(20,27,20,.18);
  align-items:stretch;
}
.hero::before{
  content:"";
  position:absolute; z-index:0;
  inset:auto;
  top:0; inset-inline:28px; height:1px;
  border-radius:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}
.hero-glass{
  padding:0;
  background:none;
  border:none;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  color:#F2F4F1;
}
.hero-glass::before{display:none;}
.hero-label{font-size:.86rem; font-weight:500; opacity:.72; letter-spacing:0;}
.hero-label .dot{background:var(--gold); box-shadow:0 0 0 4px rgba(200,169,106,.18);}
.hero-number{
  font-size:clamp(3.6rem,18vw,5rem);
  font-weight:250;
  letter-spacing:-.045em;
  line-height:1;
  margin-top:10px;
}
.hero-number small{font-size:.95rem; font-weight:500; opacity:.7; letter-spacing:0;}
.hero-sub{font-size:.84rem; opacity:.64; margin-top:8px;}
.hero-meta{margin-top:22px; padding-top:16px; border-top:1px solid rgba(255,255,255,.1); gap:16px;}
.hero-meta-item span{font-size:.72rem; opacity:.58; margin-bottom:4px;}
.hero-meta-item strong{font-size:.98rem; font-weight:600; letter-spacing:-.01em;}
.hero-particles span{background:var(--gold) !important; opacity:0; filter:none; animation-name:heroFloatSoft;}
@keyframes heroFloatSoft{
  0%{transform:translateY(0); opacity:0;}
  20%{opacity:.35;}
  80%{opacity:.35;}
  100%{transform:translateY(-240px) translateX(var(--drift,10px)); opacity:0;}
}

/* ---------- Stat cards: below the hero, no overlap ---------- */
.cards-row{margin-top:12px; padding-inline:0; gap:12px;}
.stat-card{
  padding:18px 18px 16px;
  border:1px solid var(--line);
  border-top:1px solid var(--line);
  border-radius:20px;
  background:var(--bg-card);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.stat-card::after{display:none;}
.stat-card:hover{transform:none;}
.stat-head{display:flex; align-items:center; gap:8px;}
.stat-chip{
  width:28px; height:28px; border-radius:9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--sage-tint); color:var(--sage-deep);
}
.stat-card.alt .stat-chip{background:var(--gold-tint); color:var(--gold-text);}
.stat-chip svg{width:15px; height:15px;}
.stat-card .label{font-size:.78rem; font-weight:500; color:var(--ink-soft);}
.stat-card .value{font-size:clamp(1.35rem,6vw,1.7rem); font-weight:600; letter-spacing:-.03em; margin-top:12px; color:var(--ink);}
.stat-card .value .dir{display:inline-flex;}
.stat-card .value .dir svg{width:18px; height:18px;}
.stat-card .note{font-size:.76rem; color:var(--ink-soft); min-height:0; margin-top:4px;}
.dir.down{color:var(--sage-deep);}
.dir.up{color:var(--clay);}
.cta-weigh{background:var(--accent-btn); color:var(--accent-btn-text); border-radius:12px; font-weight:600;}

/* ---------- Achievement chip (was the yellow banner) ---------- */
.milestone-banner{
  align-items:center;
  gap:10px;
  margin-top:12px;
  padding:12px 14px;
  border:1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  border-radius:14px;
  background:var(--gold-tint);
  color:var(--ink);
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  font-size:.84rem;
  font-weight:500;
}
.milestone-banner .icon{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--gold) 22%, transparent);
  color:var(--gold-text);
  font-size:0;
}
.milestone-banner .icon svg{width:16px; height:16px;}

/* ---------- Sections ---------- */
.section-head h2{font-size:1.06rem; font-weight:650; color:var(--ink); letter-spacing:-.01em;}
.section-head .sub{font-size:.76rem; color:var(--ink-faint);}

/* ---------- Chart ---------- */
.chart-card{
  min-height:0;
  padding:20px 18px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:var(--bg-card);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.chart-card:hover{box-shadow:var(--shadow);}
.chart-card svg{min-height:170px;}
.chart-legend{gap:18px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line);}
.chart-legend .item{font-size:.74rem; color:var(--ink-soft);}
.chart-legend .swatch,
.chart-legend .swatch.solid,
.chart-legend .swatch.dashed,
.chart-legend .swatch.dot{width:8px; height:8px; border-radius:50%; background:var(--sage);}
.chart-legend .swatch.dashed{background:var(--ink-faint);}
.chart-legend .swatch.dot{background:var(--gold);}
.chart-axis-label{font-size:10px; fill:var(--ink-faint); font-family:'DW Sans',system-ui,sans-serif;}
.chart-line-draw{stroke-dasharray:var(--len); stroke-dashoffset:var(--len); animation:chartDraw .9s var(--ease-premium) forwards;}
@keyframes chartDraw{to{stroke-dashoffset:0;}}
.chart-tooltip{background:#1F2A1E; border-radius:10px; font-weight:500; font-size:.76rem;}

/* ---------- Journal ---------- */
.journal-list{gap:10px;}
.entry-row{
  flex-wrap:wrap;
  min-height:0;
  padding:14px 16px;
  gap:12px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--bg-card);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.entry-row:hover{transform:none; box-shadow:var(--shadow); border-color:var(--line);}
.entry-date-badge{
  width:48px; padding:8px 4px;
  border:none; border-radius:12px;
  background:var(--bg-alt); color:var(--ink);
}
.entry-date-badge .d{font-size:1.1rem; font-weight:600; letter-spacing:-.02em;}
.entry-date-badge .m{font-size:.66rem; font-weight:500; color:var(--ink-soft);}
.entry-weight{font-size:1.02rem; font-weight:600; letter-spacing:-.01em; gap:8px;}
.entry-note{font-size:.78rem; color:var(--ink-soft);}
.entry-delta{
  font-size:.8rem; font-weight:600;
  padding:5px 10px; border-radius:999px;
  background:var(--bg-alt); color:var(--ink-soft);
}
.entry-delta.down{background:var(--sage-tint); color:var(--sage-deep);}
.entry-delta.up{background:var(--clay-light); color:var(--clay);}
[data-theme="dark"] .entry-delta.down{color:var(--sage-deep);}

/* Tags: low-opacity fill + crisp 1px border + solid text */
.entry-weight .milestone-tag,
.dw-tag{
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 8px 3px 9px;
  border-radius:999px;
  font-size:.68rem; font-weight:600; letter-spacing:0;
  background:var(--gold-tint);
  color:var(--gold-text);
  border:1px solid color-mix(in srgb, var(--gold) 34%, transparent);
}
.dw-tag svg{width:11px; height:11px; flex-shrink:0;}
.dw-tag.is-start{background:var(--sage-tint); color:var(--sage-deep); border-color:color-mix(in srgb, var(--sage) 28%, transparent);}

/* Progress photo: spacious, private by default */
.entry-photo-wrap{
  position:relative;
  flex-basis:100%;
  height:132px;
  border-radius:14px;
  overflow:hidden;
  background:var(--bg-alt);
}
.entry-photo-wrap .entry-photo-thumb{
  width:100%; height:100%;
  border-radius:0;
  object-fit:cover;
  box-shadow:none;
  filter:blur(22px) saturate(.9);
  transform:scale(1.25);
  transition:filter .35s var(--ease-premium), transform .35s var(--ease-premium);
}
.entry-photo-lock{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(20,27,20,.55);
  color:#fff;
  font-size:.74rem; font-weight:600;
  pointer-events:none;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.entry-photo-lock svg{width:13px; height:13px;}
.entry-photo-wrap:hover .entry-photo-thumb{filter:blur(16px) saturate(.9);}

/* ---------- Floating action: shrinks to a circle while scrolling down ---------- */
.fab{
  min-height:54px;
  padding:0 24px;
  gap:8px;
  border:1px solid rgba(255,255,255,.1);
  font-weight:600;
  box-shadow:0 4px 12px rgba(20,27,20,.14), 0 16px 36px rgba(20,27,20,.2);
  transition:padding .3s var(--ease-premium), gap .3s var(--ease-premium), transform .25s var(--ease-premium), box-shadow .25s ease;
}
.fab .fab-label{display:inline-block; max-width:140px; overflow:hidden; white-space:nowrap; transition:max-width .3s var(--ease-premium), opacity .2s ease;}
.fab.is-compact{padding:0 17px; gap:0;}
.fab.is-compact .fab-label{max-width:0; opacity:0;}

/* ---------- Bottom sheets ---------- */
.modal{border-radius:28px 28px 0 0; border:1px solid var(--line); background:var(--bg-card-solid); max-height:92dvh;}
@media (min-width:560px){ .modal{border-radius:28px;} }
.modal-head h2{font-size:1.2rem; font-weight:650; color:var(--ink);}
.modal-close{color:var(--ink-soft);}
.modal-close:hover{background:var(--bg-alt);}

.field label{font-size:.8rem; font-weight:500; color:var(--ink-soft); letter-spacing:0; margin-bottom:8px;}
.field input,.field textarea,.field select{
  min-height:52px;
  border-radius:14px;
  border:1.5px solid var(--input-border);
  background:var(--input-bg);
  color:var(--input-text);
  box-shadow:none;
  font-size:1rem;
}
.field input:hover,.field textarea:hover,.field select:hover{border-color:color-mix(in srgb, var(--sage) 22%, var(--input-border));}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible,
.field input:focus,.field textarea:focus{
  outline:none;
  border-color:var(--sage-deep);
  background:var(--bg-card-solid);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--sage) 14%, transparent);
}
[data-theme="dark"] .field input:focus,[data-theme="dark"] .field textarea:focus{border-color:var(--sage); background:var(--input-bg);}
.field:focus-within > label{color:var(--sage-deep);}
.field-hero input{font-size:1.5rem; font-weight:600; letter-spacing:-.02em; min-height:64px; text-align:start;}

/* Collapsible "more details" */
.more-details{margin-bottom:18px; border-top:1px solid var(--line);}
.more-details > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 2px;
  font-size:.88rem; font-weight:600; color:var(--ink-soft);
}
.more-details > summary::-webkit-details-marker{display:none;}
.more-details > summary svg{width:18px; height:18px; transition:transform .25s var(--ease-premium);}
.more-details[open] > summary svg{transform:rotate(180deg);}
.more-details[open] > summary{color:var(--ink);}

/* Goal selection: whole-card state change, no checkmark badge */
.goal-card{
  border:1.5px solid var(--line);
  border-radius:16px;
  background:var(--bg-card-solid);
  color:var(--ink-soft);
  font-weight:500;
  box-shadow:none;
  transition:background .2s var(--ease-premium), color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .15s ease;
}
.goal-card svg{color:var(--ink-faint);}
.goal-card:hover{transform:none; border-color:color-mix(in srgb, var(--sage) 30%, var(--line)); box-shadow:none;}
.goal-card:active{transform:scale(.97);}
.goal-card.active::after{display:none;}
.goal-card.active,
[data-theme="dark"] .goal-card.active{
  background:var(--accent-btn);
  border-color:var(--accent-btn);
  color:#FFFFFF;
  font-weight:600;
  box-shadow:0 8px 22px rgba(61,82,60,.28);
}
.goal-card.active svg{color:#FFFFFF;}
[data-theme="dark"] .goal-card.active{box-shadow:0 0 0 3px rgba(154,181,140,.18), 0 8px 22px rgba(0,0,0,.35);}

.file-upload{border-radius:14px; border:1.5px dashed color-mix(in srgb, var(--sage) 28%, var(--line)); background:transparent; color:var(--ink-soft); font-weight:500;}
.file-upload:hover{background:var(--sage-tint); color:var(--sage-deep);}

.modal-submit{border-radius:14px; font-weight:600; min-height:54px; box-shadow:0 8px 20px rgba(61,82,60,.2);}
.modal-secondary{border-radius:14px; border:1px solid var(--line); color:var(--ink); font-weight:500; background:var(--bg-card-solid);}
.danger-btn{border-radius:14px; border:1px solid color-mix(in srgb, var(--clay) 30%, transparent); color:var(--clay); font-weight:600; margin-top:0;}

/* Settings groups */
.settings-group{padding:4px 0 18px; border-bottom:1px solid var(--line); margin-bottom:18px;}
.settings-group:last-of-type{border-bottom:none;}
.settings-group-title{font-size:.72rem; font-weight:600; color:var(--ink-faint); margin-bottom:12px;}
.settings-group .toggle-row{border-bottom:1px solid var(--line);}
.settings-group .toggle-row:last-child{border-bottom:none;}
.settings-group .field:last-child{margin-bottom:0;}
.toggle-row span{font-weight:500;}
.switch{background:var(--bg-alt);}
.switch.on{background:var(--sage-deep);}
[data-theme="dark"] .switch.on{background:var(--sage);}
.danger-zone{padding-top:2px;}

/* ---------- Celebration: the logo ring closes ---------- */
.celebrate-icon{font-size:0; margin:0 auto 14px; width:84px; height:84px;}
.celebrate-ring{width:84px; height:84px; overflow:visible;}
.celebrate-ring .ring-track{stroke:var(--sage-tint);}
.celebrate-ring .ring-arc{
  stroke:var(--sage-deep);
  stroke-dasharray:126;
  stroke-dashoffset:22;
  transform:rotate(-90deg);
  transform-origin:32px 32px;
}
#celebrate-modal-backdrop.show .celebrate-ring .ring-arc{animation:ringClose 1s .25s var(--ease-premium) forwards;}
.celebrate-ring .ring-spark{fill:var(--gold); transform-origin:50px 22px;}
#celebrate-modal-backdrop.show .celebrate-ring .ring-spark{animation:sparkPulse 1.4s .9s var(--ease-premium) both;}
@keyframes ringClose{to{stroke-dashoffset:0;}}
@keyframes sparkPulse{0%{transform:scale(1);} 35%{transform:scale(1.7); opacity:.6;} 100%{transform:scale(1); opacity:1;}}
.celebrate-modal h2{color:var(--ink); font-weight:650;}

/* ---------- Onboarding ---------- */
.ob-hero{border:1px solid rgba(255,255,255,.6); background:color-mix(in srgb, var(--bg-card-solid) 80%, transparent); backdrop-filter:blur(18px) saturate(120%); -webkit-backdrop-filter:blur(18px) saturate(120%);}
.ob-brand-mark{color:var(--ink); font-weight:650;}
.ob-kicker{letter-spacing:0; text-transform:none; font-weight:600; color:var(--sage); font-size:.8rem;}
.ob-hero h1{font-weight:700; letter-spacing:-.035em; color:var(--ink);}
.ob-hero .lead{color:var(--ink-soft);}
.ob-benefit{border:1px solid var(--line); background:color-mix(in srgb, var(--bg) 70%, transparent);}
.ob-benefit .icon-circle{background:var(--sage-tint); color:var(--sage-deep);}
.ob-benefit span{font-weight:500;}
.onboard-card{border:1px solid rgba(255,255,255,.6); background:color-mix(in srgb, var(--bg-card-solid) 88%, transparent); backdrop-filter:blur(18px) saturate(120%); -webkit-backdrop-filter:blur(18px) saturate(120%);}
[data-theme="dark"] .ob-hero,[data-theme="dark"] .onboard-card{border-color:var(--line);}
.onboard-card h1{font-weight:650; letter-spacing:-.02em;}
.onboard-logo span{color:var(--ink); font-weight:650;}
.ob-theme-toggle,.ob-back-btn{color:var(--ink-soft); background:var(--bg-card-solid); border-color:var(--line);}

/* ---------- Dark-mode headings stay white (keeps the original contrast fix) ---------- */
[data-theme="dark"] .section-head h2,
[data-theme="dark"] .modal-head h2,
[data-theme="dark"] .celebrate-modal h2,
[data-theme="dark"] .onboard-card h1,
[data-theme="dark"] .ob-hero h1{color:#FFFFFF;}
[data-theme="dark"] .hero{border-color:rgba(255,255,255,.07); background-image:radial-gradient(380px circle at 92% -10%, rgba(200,169,106,.12), transparent 62%), linear-gradient(160deg, rgba(34,45,33,.93) 0%, rgba(24,32,23,.93) 55%, rgba(16,21,16,.96) 100%), image-set(url('../backgrounds/hero-bg.webp') type('image/webp'), url('../backgrounds/hero-bg.jpg') type('image/jpeg'));}

/* ---------- Desktop ---------- */
@media (min-width:900px){
  .hero{min-height:0; padding:36px 38px 30px;}
  .hero-number{font-size:5.6rem;}
  .cards-row{margin:0;}
  .stat-card{border-radius:20px; border-top-width:1px; padding:22px 22px;}
  .milestone-banner{margin:0;}
  .fab.is-compact{padding:0 24px; gap:8px;}
  .fab.is-compact .fab-label{max-width:140px; opacity:1;}
}
@media (max-width:430px){
  .hero{padding:24px 22px 20px; border-radius:26px;}
  .stat-card{padding:16px 14px 14px;}
}

/* ---------- RTL & polish fixes ---------- */
/* Numbers with a sign stay readable in RTL: "-0.6" instead of "0.6-" */
.entry-delta,.chart-axis-label{direction:ltr; unicode-bidi:isolate;}

/* No browser spin arrows on number fields */
input[type="number"]{-moz-appearance:textfield; appearance:textfield;}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}

/* While a sheet is open, toasts appear at the top so they never cover it */
body.modal-open .app-toast{bottom:auto; top:calc(16px + env(safe-area-inset-top)); transform:translate(-50%,-18px);}
body.modal-open .app-toast.show{transform:translate(-50%,0);}

/* Focus ring on goal cards only for keyboard users, not after a tap */
.goal-card:focus-within{outline:none;}
.goal-card:has(input:focus-visible){outline:2.5px solid var(--sage); outline-offset:3px;}

/* Toggle: off = knob on the right, on = knob slides left (RTL convention) */
.switch::after{left:auto; inset-inline-start:3px; transition:transform .25s var(--ease-premium);}
.switch.on::after{transform:translateX(-20px);}

/* ---------- Onboarding: exactly one screen, no page scroll ---------- */
#onboarding{
  height:100vh; height:100dvh; min-height:0;
  overflow:hidden;
  padding:calc(76px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
}
.ob-step{height:100%; align-items:center;}
.ob-hero,.onboard-card{max-height:100%; overflow-y:auto; scrollbar-width:none;}
.ob-hero::-webkit-scrollbar,.onboard-card::-webkit-scrollbar{display:none;}

@media (max-width:600px){
  .ob-hero{padding:26px 20px 22px;}
  .ob-brand-mark{margin-bottom:14px;}
  .ob-benefits{flex-wrap:nowrap; gap:8px; margin-top:20px;}
  .ob-benefit{flex:1; width:auto; min-width:0; padding:12px 4px;}
  .ob-cta{margin-top:20px;}

  /* step 2: the brand is already on screen 1, so the card starts with the task */
  .onboard-card{padding:22px 20px 20px;}
  .onboard-card .onboard-logo{display:none;}
  .onboard-progress{margin-bottom:12px;}
  .onboard-card h1{font-size:1.25rem; margin-bottom:6px;}
  .onboard-card p.desc{font-size:.84rem; line-height:1.55; margin-bottom:18px;}
  .onboard-card .field{margin-bottom:14px;}
  .onboard-card .goal-card{flex-direction:row; justify-content:center; min-height:52px; padding:10px 6px; gap:6px; font-size:.8rem;}
  .onboard-card .goal-card svg{width:18px; height:18px;}
  .onboard-card .field-row{flex-direction:row; gap:10px;}
  .onboard-card .field-row .field{min-width:0;}
  .onboard-card .file-upload{min-height:48px; padding:10px 14px;}
  .onboard-card .modal-submit{min-height:52px;}
}
@media (max-width:600px) and (max-height:780px){
  .ob-hero h1{font-size:1.65rem;}
  .ob-hero .lead{font-size:.86rem; line-height:1.6;}
  .ob-kicker{margin-bottom:6px;}
  .ob-benefit .icon-circle{width:36px; height:36px;}
  .ob-privacy{margin-top:10px;}
  .onboard-card p.desc{display:none;}
}
@media (max-width:400px){
  .onboard-card .field-row input{padding-inline:10px; font-size:.95rem;}
}

/* Journal rows keep their natural height inside the scrollable desktop list */
.journal-list .entry-row{flex-shrink:0;}
/* The chart scales up on wide screens; keep its axis text at a readable size */
@media (min-width:900px){
  .chart-axis-label{font-size:6px;}
}
.stat-card.alt{border-top-color:var(--line);}

/* Install option on the welcome screen: quiet secondary action under the CTA */
.ob-install-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:44px; margin-top:10px; padding:0 16px;
  border-radius:999px;
  color:var(--sage-deep); font-size:.84rem; font-weight:600;
  transition:background .2s ease;
}
.ob-install-btn:hover{background:var(--sage-tint);}
.ob-install-btn svg{width:18px; height:18px;}
.ob-install-btn[hidden]{display:none;}

/* Toggles: same look, 44px finger-friendly hit area */
.switch::before{content:""; position:absolute; inset:-9px -4px;}