:root{
  /* Brand: forest green primary, white-forward, lime as a highlight only */
  --green:#006738; --green-dark:#00512c;
  --lime:#B3F063;
  --ink:#1a1a1a; --muted:#6b6b6b;
  --bg:#ffffff; --card:#ffffff; --line:#e6e6e2; --err:#b00020;
  --miss-fat:#c4894a; --miss-thin:#6e8299;
  --shadow:0 1px 3px rgba(0,0,0,.05);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.4;
}
#app{max-width:480px;margin:0 auto;min-height:100vh;}

/* --- layout --- */
.screen{padding:28px 22px 40px;display:flex;flex-direction:column;gap:20px;min-height:100vh;}
.screen.center{justify-content:center;align-items:center;text-align:center;gap:14px;}

/* --- text helpers --- */
.muted{color:var(--muted);font-size:.95rem;}
.err{color:var(--err);font-weight:600;}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;color:var(--muted);word-break:break-all;}
.center-t{text-align:center;}

/* --- dashboard header --- */
.dash-head{margin-top:8px;}
.hello{font-size:1.6rem;font-weight:700;letter-spacing:-.02em;}
.tagline{color:var(--muted);font-size:1.05rem;margin-top:2px;}

/* --- cards --- */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:20px;box-shadow:var(--shadow);}
.card-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px;}
.goal-big{font-size:1.35rem;font-weight:650;}

/* --- streak / stats --- */
.streak-row{display:flex;gap:16px;}
.stat{flex:1;display:flex;flex-direction:column;}
.stat-num{font-size:2rem;font-weight:750;line-height:1;color:var(--green);}
.stat-lbl{font-size:.82rem;color:var(--muted);margin-top:4px;}
.pips{display:flex;gap:8px;margin-top:16px;}
.pip{flex:1;height:8px;border-radius:99px;background:var(--line);transition:background .2s ease;}
.pip.on{background:var(--green);}

/* --- buttons --- */
.btn{border:none;border-radius:14px;font-size:1.05rem;font-weight:650;padding:16px;
  cursor:pointer;font-family:inherit;transition:transform .04s ease,background .15s ease;}
.btn:active{transform:scale(.99);}
.btn.primary{background:var(--green);color:#fff;}
.btn.primary:active{background:var(--green-dark);}
.btn.big{width:100%;padding:18px;font-size:1.15rem;margin-top:4px;}
.btn.ghost{background:transparent;color:var(--green);border:1px solid var(--line);}
.btn.small{font-size:.9rem;padding:8px 12px;}
.btn:disabled{opacity:.6;cursor:default;}

/* --- quiet secondary affordance (freestyle link) --- */
.subtle-link{background:none;border:none;color:var(--muted);font-family:inherit;
  font-size:.95rem;font-weight:600;cursor:pointer;padding:8px;text-align:center;
  text-decoration:underline;text-underline-offset:3px;}
.subtle-link:active{color:var(--ink);}

/* --- mode picker (freestyle choices / free-user tiles) --- */
.mode-list{display:flex;flex-direction:column;gap:10px;}
.mode-tile{display:flex;flex-direction:column;align-items:flex-start;text-align:left;
  gap:2px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;
  background:var(--card);cursor:pointer;font-family:inherit;width:100%;box-shadow:var(--shadow);}
.mode-tile .mode-name{font-size:1.1rem;font-weight:700;color:var(--ink);}
.mode-tile .mode-sub{font-size:.85rem;color:var(--muted);}
.mode-tile.primary{background:var(--green);border-color:var(--green);}
.mode-tile.primary .mode-name,.mode-tile.primary .mode-sub{color:#fff;}
.mode-tile.locked{opacity:.75;border-style:dashed;box-shadow:none;}
.mode-tile:disabled{opacity:.6;}

/* --- logging screen --- */
.log-head{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.mode-pill{font-size:.8rem;font-weight:650;color:var(--green);
  border:1px solid var(--line);border-radius:99px;padding:4px 12px;}
.disc{font-size:.85rem;}
.club-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.club-btn{padding:12px 4px;border:1px solid var(--line);border-radius:12px;background:var(--card);
  font-family:inherit;font-size:.9rem;font-weight:600;cursor:pointer;color:var(--ink);}
.club-btn.active{background:var(--green);color:#fff;border-color:var(--green);}
.club-btn.greyed{opacity:.35;cursor:default;}
.log-card{gap:16px;display:flex;flex-direction:column;}
.live-row{display:flex;gap:12px;}
.contact-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.contact-row.disabled{opacity:.5;}
.contact-btn{padding:20px 4px;border:none;border-radius:14px;font-family:inherit;
  font-size:1.1rem;font-weight:700;color:#fff;cursor:pointer;transition:transform .04s ease;}
.contact-btn:active{transform:scale(.98);}
.contact-btn.fat{background:var(--miss-fat);}
.contact-btn.crispy{background:var(--green);}
.contact-btn.thin{background:var(--miss-thin);}
.contact-btn:disabled{opacity:.5;cursor:default;}

/* --- toast (pre-staged for Stage 2 undo) --- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--ink);color:#fff;border-radius:12px;padding:12px 16px;
  display:flex;align-items:center;gap:16px;font-size:.9rem;
  box-shadow:0 4px 16px rgba(0,0,0,.2);z-index:50;max-width:calc(100% - 44px);}
.toast button{background:none;border:none;color:var(--lime);font-weight:700;
  font-family:inherit;font-size:.9rem;cursor:pointer;}

/* --- footer --- */
.foot{text-align:center;margin-top:auto;padding-top:12px;}

/* ===== end-of-session review + in-session strip (Stage 2 additions) ===== */

/* readout heading block — keeps the verdict centered, table left-aligned below */
.center-block{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;}

/* in-session recent strip — horizontal scroll, newest-first text row */
.strip-label{margin-top:4px;}
.strip{display:flex;gap:8px;overflow-x:auto;padding:4px 0 2px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;}
.strip::-webkit-scrollbar{display:none;}
.strip-item{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;
  font-size:.82rem;font-weight:600;color:var(--ink);
  background:var(--bg);border:1px solid var(--line);
  border-radius:99px;padding:5px 11px;white-space:nowrap;}

/* the contact dot — green filled = crispy, hollow grey = miss */
.strip-dot{font-size:.7rem;line-height:1;}
.strip-dot.crispy{color:var(--green);}
.strip-dot.miss{color:var(--muted);}

/* session review table — scrollable, premium, glanceable */
.review-wrap{max-height:320px;overflow-y:auto;border:1px solid var(--line);
  border-radius:14px;background:var(--card);-webkit-overflow-scrolling:touch;}
.review{width:100%;border-collapse:collapse;font-size:.92rem;}
.review thead th{position:sticky;top:0;background:var(--card);
  text-align:left;font-size:.72rem;font-weight:650;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);padding:12px 16px 8px;
  border-bottom:1px solid var(--line);}
.review td{padding:11px 16px;border-bottom:1px solid var(--line);vertical-align:middle;}
.review tbody tr:last-child td{border-bottom:none;}
.review td:first-child{font-weight:600;}
.review td .strip-dot{margin-right:7px;}

/* ===== brand header (sticky wordmark anchor) ===== */
.app-header{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center;
  height:80px;                         /* was 52 — more room so a larger logo breathes */
  padding:0 22px;
  background:rgba(255,255,255,0.92);
  backdrop-filter:saturate(180%) blur(8px);
  -webkit-backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.app-header .wrap{
  width:100%; max-width:480px; margin:0 auto;
  display:flex; align-items:center;
}
.app-header img{
  height:40px; width:auto; display:block;   /* was 24 — a confident anchor, not a footnote */
  opacity:0; transition:opacity .25s ease;
}
.app-header img.loaded{ opacity:1; }

/* header is fixed-height chrome; screens scroll beneath it naturally */
body.has-header #app{ min-height:calc(100vh - 60px); }

/* ===== brand splash (initial load only) ===== */
#splash{
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:26px;
  background:var(--bg);
  opacity:1; transition:opacity .35s ease;
}
#splash.hide{ opacity:0; pointer-events:none; }
#splash img{
  width:200px; max-width:60%; height:auto;
  opacity:0; transform:translateY(6px);
  transition:opacity .4s ease, transform .4s ease;
}
#splash img.in{ opacity:1; transform:translateY(0); }

/* the loading bar */
#splash .bar-track{
  width:200px; max-width:60%; height:4px;
  background:var(--line); border-radius:99px; overflow:hidden;
  opacity:0; transition:opacity .3s ease;
}
#splash .bar-track.in{ opacity:1; }
#splash .bar-fill{
  height:100%; width:0%;
  background:var(--green); border-radius:99px;
  transition:width 1.15s cubic-bezier(.4,0,.2,1);   /* one smooth fill, eased */
}
#splash .bar-fill.go{ width:100%; }

/* ===== session-in-progress card (dashboard) ===== */
.session-live{ display:flex; flex-direction:column; gap:12px; }
.live-head{ display:flex; align-items:center; gap:9px; }
.live-dot{
  width:9px; height:9px; border-radius:99px; background:var(--green);
  box-shadow:0 0 0 0 rgba(0,103,56,.5); animation:livePulse 2s infinite;
}
@keyframes livePulse{
  0%{ box-shadow:0 0 0 0 rgba(0,103,56,.45); }
  70%{ box-shadow:0 0 0 7px rgba(0,103,56,0); }
  100%{ box-shadow:0 0 0 0 rgba(0,103,56,0); }
}
.live-title{ font-weight:700; font-size:1.05rem; }
.live-meta{ color:var(--muted); font-size:.95rem; margin-top:-4px; }
.live-meta #live-timer{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--ink); }
.live-sep{ margin:0 6px; }

/* timer pill in the logging header */
.pill-group{ display:flex; align-items:center; gap:8px; }
.timer-pill{ font-variant-numeric:tabular-nums; color:var(--ink); }

/* ===== reflection: notes entry, satisfaction, notes log ===== */

/* in-session notes overlay */
.notes-overlay{ position:fixed; inset:0; z-index:60; display:flex; align-items:flex-end;
  justify-content:center; background:rgba(26,26,26,.35); }
.notes-sheet{ width:100%; max-width:480px; background:var(--card);
  border-radius:16px 16px 0 0; padding:22px; box-shadow:0 -4px 24px rgba(0,0,0,.12); }
.note-input{ width:100%; border:1px solid var(--line); border-radius:12px; padding:12px;
  font-family:inherit; font-size:1rem; color:var(--ink); resize:none; }
.note-input:focus{ outline:none; border-color:var(--green); }
.notes-actions{ display:flex; gap:10px; margin-top:12px; }
.notes-actions .btn{ flex:1; }

/* the in-session notes trigger */
#range-notes-btn{ text-align:center; }

/* satisfaction buttons */
.sat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.sat-btn{ padding:14px 4px; border:1px solid var(--line); border-radius:14px;
  font-family:inherit; font-size:.95rem; font-weight:650; cursor:pointer; background:var(--card); color:var(--ink);
  transition:transform .04s ease; }
.sat-btn:active{ transform:scale(.98); }
.sat-btn.sat-crispy.chosen{ background:var(--green); color:#fff; border-color:var(--green); }
.sat-btn.sat-okay.chosen{   background:#dbeafe; color:#1e3a5f; border-color:#bcd6f5; }
.sat-btn.sat-rough.chosen{  background:#fde2e2; color:#7a1f1f; border-color:#f5c2c2; }

/* notes log */
.note-session{ margin-bottom:4px; }
.note-session-head{ display:flex; justify-content:space-between; align-items:baseline;
  margin-bottom:8px; }
.note-date{ font-weight:700; font-size:1rem; }
.note-mode{ font-size:.78rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
.note-line{ font-size:.95rem; color:var(--ink); padding:4px 0; border-top:1px solid var(--line); }
.note-line:first-of-type{ border-top:none; }

/* ===== dashboard: locked-CCS teaser + mini secondary buttons ===== */
.btn.locked{ background:var(--line); color:var(--muted); }
.btn.locked:active{ transform:scale(.99); background:#e0e0dc; }

.dash-secondary-row{ display:flex; gap:10px; }
.dash-mini{ flex:1; background:transparent; border:1px solid var(--line); border-radius:12px;
  padding:11px 8px; font-family:inherit; font-size:.9rem; font-weight:600; color:var(--muted);
  cursor:pointer; transition:transform .04s ease; }
.dash-mini:active{ transform:scale(.99); }

/* ===== satisfaction: framed by two brand-green lines ===== */
.sat-divider{ border:none; height:2px; background:var(--green); border-radius:99px;
  margin:18px 0; opacity:.85; }

/* ===== notes view (in-session read overlay) ===== */
.notes-view{ max-height:52vh; overflow-y:auto; margin:4px 0 6px; -webkit-overflow-scrolling:touch; }
.nv-session{ padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid var(--line); }
.nv-session:last-child{ border-bottom:none; margin-bottom:0; }

/* ===== free-user lifetime crispy mirror ===== */
.mirror-sub{ font-size:.9rem; font-weight:600; color:var(--muted); }
.goal-big.mirror-empty{ color:var(--muted); }