/* =========================================================
   You, Improved — Core Styles (Trends-first clean up)
   ========================================================= */

/* ---------- Theme ----------- */
:root{
  --bg: #0b1220;
  --panel: #0f172a;
  --panel-2: #0c1324;
  --text: #e5e7eb;
  --muted: #9aa3b2;
  --ring: #1f2a44;
  --ring-soft: #182138;
  --accent: #2563eb;
  --good: #22c55e;
  --cyan: #06b6d4;
  --grad-1: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.05));
  --bar-bg: #0d1629;
  --bar-fill: linear-gradient(90deg, #22c55e 0%, #60a5fa 100%);
  --badge-grad: radial-gradient(120% 140% at 0% 0%, rgba(99,102,241,.25) 0%, rgba(99,102,241,0) 55%), radial-gradient(120% 140% at 100% 100%, rgba(34,197,94,.22) 0%, rgba(34,197,94,0) 55%), linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  --shadow: 0 6px 18px rgba(2,6,23,.35);
}

*{ box-sizing:border-box }
html,body{ height:100% }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.wrap{
  width:min(1160px, 92vw);
  margin: 28px auto 80px;
}

/* ---------- Utilities ---------- */
.sub{ color: var(--muted); font-size: .92rem }
.badge{
  background: #0c1426;
  border: 1px solid var(--ring);
  padding: 6px 10px;
  border-radius: 999px;
  font-size:.88rem;
}

/* ---------- Buttons & Tabs ---------- */
button, .btn-ghost, .btn-primary, .btn-pill{
  font: inherit; color: inherit; background: transparent; border: 0; cursor: pointer
}
.btn-ghost{ color: var(--muted) }
.btn-primary{
  background: var(--accent);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
}
.btn-pill{
  background:#0d172c;
  border:1px solid var(--ring);
  padding:8px 12px;
  border-radius:999px;
}

.tabs{ display:flex; gap:8px; flex-wrap:wrap }
.tab{
  background:#0d172c;
  border:1px solid var(--ring);
  color:var(--muted);
  padding:8px 12px;
  border-radius:12px;
}
.tab.active{ color:#fff; border-color:#24324f; background:#12203a }

/* ---------- Cards ---------- */
.card{
  background: var(--panel);
  border: 1px solid var(--ring);
  border-radius: 16px;
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card .card-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  gap:12px;
  border-bottom:1px dashed var(--ring);
}
.card .card-c{
  padding:16px 18px;
  background: var(--grad-1);
}

/* Brand/nav card (top bar) */
.card.brand{
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(6px);
  background: color-mix(in oklab, var(--panel) 86%, transparent);
}

/* ---------- Page sections (compact weekly strip) ---------- */
.hero{ margin: 16px 0 6px }

/* Make the weekly header a small, right-aligned status strip */
.this-week{
  display:flex;
  align-items:center;
  justify-content:flex-end;   /* everything on the right */
  gap:8px;
  margin: 6px 0 4px;
}

/* Smaller, muted label so it doesn't compete with the page title */
.this-week__title{
  margin:0;
  font-size:.92rem;
  color: var(--muted);
  font-weight:600;
}

/* KPI pills sit to the left of the label, on the same line */
.this-week__stats{
  display:flex;
  gap:6px;
  flex-wrap:nowrap;
}

/* Lightweight KPI pills */
.stat-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  background:#0d172c;
  border:1px solid var(--ring);
  box-shadow:none;
  font-size:.86rem;          /* smaller than body */
  line-height:1;
  color: var(--muted);
}
.stat-pill__label{ font-weight:600; letter-spacing:.01em; }
.stat-pill__value{ color: var(--text); font-weight:700; }

/* On narrow screens, allow wrapping but keep right alignment */
@media (max-width: 560px){
  .this-week{ flex-wrap:wrap; row-gap:6px }
  .this-week__title{ width:100%; text-align:right; }
}
/* --- Slim "This week" inline summary (replaces stat pills) --- */
.this-week { margin-top: 8px; }
.this-week__row{
  display:flex;
  align-items:baseline;
  gap:12px;
  flex-wrap:wrap;
}
.this-week__label{
  color:var(--muted);
  font-weight:600;
}
.this-week__item strong{
  font-weight:800;
}
.this-week__sep{ opacity:.6; }
.this-week__dates{ margin-left:auto; }

/* ---------- Grid helpers ---------- */
.row.two{ display:grid; grid-template-columns: 1fr 1fr; gap:12px }
@media (max-width: 800px){
  .row.two{ grid-template-columns: 1fr }
}

/* ---------- Weekly / Trends Layout ---------- */
.weekly-grid{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:14px;
}
.weekly-grid .stack{ display:grid; gap:14px }
@media (max-width: 980px){
  .weekly-grid{ grid-template-columns: 1fr }
}

/* ---------- CSS bar charts ---------- */
.chart{ width:100% }
.bar-grid{
  display:grid;
  grid-template-columns: 28px 1fr 36px;    /* lbl • bar • value */
  align-items: center;
  row-gap: 10px;
  column-gap:10px;
}
.bar-grid.sm{ grid-template-columns: 56px 1fr 40px; row-gap: 8px }

/* labels & values inside charts */
.bar-grid .lbl{ color: var(--muted); font-weight:600; letter-spacing:.02em }
.bar-grid .val{ color: var(--muted); text-align:right }

/* the bar “track” */
.bar-grid .bar{
  position:relative;
  height: 10px;
  border-radius: 999px;
  background: var(--bar-bg);
  border: 1px solid var(--ring-soft);
  overflow:hidden;
}
/* the bar “fill” – width provided by JS via --w */
.bar-grid .bar::before{
  content:"";
  position:absolute; inset:0 auto 0 0;
  width: var(--w, 0%);
  background: var(--bar-fill);
  border-radius: inherit;
}

/* Make sure the weekly summary doesn’t balloon in height */
#chart.bar-grid .bar{ height: 10px }        /* normal */
#trendChart.bar-grid .bar{ height: 10px }   /* trends */

/* ---------- Achievements (badge cards) ---------- */
.achv-list{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width:740px){ .achv-list{ grid-template-columns:1fr } }

.achv{
  background: var(--badge-grad);
  border: 1px solid #273553;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 8px 20px rgba(3,7,18,.35) inset, 0 2px 0 rgba(255,255,255,.06);
}
.achv .achv-h{ display:flex; gap:8px; align-items:center; font-weight:700 }
.achv .achv-sub{ color:var(--muted); margin-top:6px; line-height:1.35 }

/* Optionally tint the two default tiles differently */
.achv--a{ background:
    radial-gradient(120% 140% at 0% 0%, rgba(59,130,246,.18), rgba(59,130,246,0) 50%),
    radial-gradient(120% 140% at 100% 100%, rgba(234,88,12,.16), rgba(234,88,12,0) 50%),
    var(--grad-1); }
.achv--b{ background:
    radial-gradient(120% 140% at 0% 0%, rgba(99,102,241,.16), rgba(99,102,241,0) 50%),
    radial-gradient(120% 140% at 100% 100%, rgba(34,197,94,.18), rgba(34,197,94,0) 50%),
    var(--grad-1); }

/* ---------- Leaderboard ---------- */
#lbList{ list-style:none; padding-left:0 }
#lbList li{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 10px;
  border:1px solid var(--ring-soft);
  border-radius:10px;
  background:#0d172c;
}

/* ---------- Track bits (small fixes that also help layout) ---------- */
.progress{
  width:100%; height:10px; border-radius:999px;
  background: var(--bar-bg);
  border:1px solid var(--ring-soft);
  overflow:hidden;
}
.progress > div{
  height:100%; background: var(--bar-fill);
  border-radius:inherit;
}

.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  background:#0d172c; border:1px solid var(--ring);
  border-radius:999px; padding:8px 12px;
}

/* Water glasses row */
.glass-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px }
.glass{ width:26px; height:26px }

/* Switch rows */
.switch{ display:flex; gap:8px; align-items:center }

/* Meds checklist (two columns in Track) */
.meds-list .meds-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px;
}
.meds-col{ border:1px dashed var(--ring); border-radius:12px; padding:10px }
.meds-chiplist{ display:flex; flex-wrap:wrap; gap:8px }
.med-chip{ display:inline-flex; gap:8px; align-items:center; background:#0d172c; border:1px solid var(--ring); padding:6px 10px; border-radius:999px }

.col-h{ font-weight:700 }
.col-tools .btn-ghost{ padding:4px 6px; border-radius:8px; background:#0d172c; border:1px solid var(--ring) }

/* Habitat list on Track */
.habitat-list .hab-row{ display:block }
.habitat-list .chip{ width:100% }

/* ---------- Forms & Inputs ---------- */
input, select{
  width:100%;
  background:#0b1324;
  color:var(--text);
  border:1px solid var(--ring);
  border-radius:10px;
  padding:10px 12px;
}
label{ font-weight:600; display:block; margin-bottom:6px }

/* ---------- Overlays ---------- */
.overlay{
  position:fixed; inset:0; display:none;
  place-items:center; padding:18px;
  background: rgba(2,6,23,.65);
  z-index:40;
}
.overlay .card{ width:min(640px, 96vw) }

/* ---------- Footer ---------- */
footer{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:20px; color:var(--muted);
}
.foot-links{ display:flex; gap:10px; flex-wrap:wrap }

/* ---------- Little polish ---------- */
.card .card-h strong{ font-size:1.05rem }
.card .card-h .sub{ margin-left:8px }
hr{ border:0; border-top:1px dashed var(--ring); margin:16px 0 }

/* === Column (vertical) charts for Trends === */
.col-chart{ --h:220px; }
.col-chart[data-range="30d"]{ --h:240px; }
.col-chart[data-range="12mo"]{ --h:220px; }

.col-grid{
  display:grid;
  grid-auto-flow: column;                  /* left → right */
  grid-auto-columns: minmax(12px, 1fr);    /* adapt to width; no vertical overflow */
  gap:8px;
  height: var(--h);
  align-items: end;
  overflow-x: auto;                        /* if too many bars, scroll horizontally */
  padding: 4px 2px 6px;
}

.col-wrap{ display:flex; flex-direction:column; align-items:center; min-width:16px; }

.col{
  position:relative;
  width:100%;
  height:100%;
  background: var(--bar-bg);
  border:1px solid var(--ring-soft);
  border-radius:8px;
  overflow:hidden;
}
.col::before{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height: var(--v, 0%);                    /* set by JS 0–100% */
  background: var(--bar-fill);
}

/* x-axis labels */
.col-wrap .xlbl{
  margin-top:6px;
  font-size:.78rem;
  line-height:1;
  color: var(--muted);
  white-space:nowrap;
}

/* optional: thin scrollbar on webkit */
.col-grid::-webkit-scrollbar{ height:8px }
.col-grid::-webkit-scrollbar-thumb{
  background:#0f1a31; border-radius:8px; border:1px solid #1c2a49;
}

/* --- Water controls sizing locks (prevent flex-stretch) --- */
.water-controls{
  display:flex;
  align-items:center;
  gap:8px;
}
.water-leading-icon{
  width:22px;
  height:22px;
  flex:0 0 22px;           /* never stretch */
  display:block;
}
.glass-row svg.glass{
  width:26px;
  height:26px;
  min-width:26px;          /* lock size inside flex */
  min-height:26px;
  flex:0 0 26px;
  display:block;
}

/* Chart label safety */
.bar-grid .lbl{ white-space:nowrap; }

/* --- FIX: scope form-field styling to text-like inputs, not checkboxes --- */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="time"],
select,
textarea{
  width:100%;
  background:#0b1324;
  color:var(--text);
  border:1px solid var(--ring);
  border-radius:10px;
  padding:10px 12px;
}

/* Reset checkboxes/radios so they don't expand or get padded */
input[type="checkbox"],
input[type="radio"]{
  width:auto;
  height:auto;
  padding:0;
  border:none;
  background:transparent;
  accent-color: var(--accent);
}

/* Keep switch rows tidy */
.switch{ display:flex; gap:8px; align-items:center; }
.switch input[type="checkbox"]{ flex:0 0 auto; margin:0; }
.switch > span{ flex:0 1 auto; text-align:left; }

/* If you use pill-style chips with checkboxes, keep them compact too */
.med-chip input[type="checkbox"]{ width:auto; height:auto; padding:0; }

/* =========================================================
   Inline-to-CSS migration (moved from index.html)
   ========================================================= */

/* keep app visible even if a fade-in JS step fails */
.wrap{ opacity:1!important; visibility:visible!important }

/* hero layout & KPIs */
.hero-inner{
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(260px,400px);
  gap:16px; align-items:stretch;
}
.kpis{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
.kpi{
  display:flex; flex-direction:column; gap:6px;
  padding:10px; border:1px solid var(--ring);
  border-radius:12px; background:#0b1220;
}
.kpi .label{ font-size:12px; color:var(--muted) }
.kpi .value{ font-size:18px }

/* overlay: wider + inner scroll */
.overlay{ background:rgba(0,0,0,.6); z-index:9990; overflow:auto }
.overlay .card{ margin:40px auto; max-width:820px; width:min(92%,820px) }
.overlay .card .card-c{ max-height:70vh; overflow:auto }

/* small hotfixes */
.chips{ overflow:visible }
.chip{ position:relative; z-index:0; margin:2px 0 }
.chip.on{ z-index:2; box-shadow:0 0 0 2px var(--accent); background:#0b1220 }
.card .card-c{ overflow:visible !important }
#rainbowChips{ padding-top:6px; padding-bottom:6px }
.btn-ghost.linkish{ text-decoration:underline; color:var(--muted) }

/* water card helpers */
.water-controls{ display:flex; align-items:center; gap:10px }
.water-leading-icon{ width:22px; height:22px; opacity:.9; flex:0 0 22px }
#card-water svg:not(.water-leading-icon):not(.glass){
  display:none !important; width:0 !important; height:0 !important;
}
#waterGlasses{ display:flex; gap:6px; margin-top:8px; flex-wrap:wrap }
#waterGlasses .glass{ width:24px; height:24px }

/* meds */
.meds-list{ display:flex; flex-wrap:wrap; gap:8px }

/* ===== Typography tune: hero vs week header ===== */
.hero .hero-copy h1{
  /* Make “You, Improved” clearly dominant */
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.1;
  margin: 6px 0 10px;
}

/* --- Meds checklist polish (AM / PM columns + divider) --- */
#medsChecklist .meds-grid.meds-grid--checklist{
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  position: relative;
  margin-top: 6px;
}

/* vertical divider */
#medsChecklist .meds-grid.meds-grid--checklist::before{
  content:"";
  position:absolute;
  left: calc(50% - 0.5px);
  top: 10px;
  bottom: 10px;
  width:1px;
  background: var(--ring);
  opacity:.6;
  pointer-events:none;
}

#medsChecklist .meds-col{
  border:1px dashed var(--ring);
  border-radius:12px;
  padding:12px;
  background:#0d172c;
}

#medsChecklist .col-h{
  font-weight:700;
  margin-bottom:8px;
}

#medsChecklist .meds-chiplist{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* generic meds grid (modal + checklist) */
.meds-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Draw a subtle vertical divider only for the checklist view */
.meds-grid--checklist::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--ring-soft);
}

.meds-col {
  background: #0b1324;
  border: 1px dashed var(--ring);
  border-radius: 12px;
  padding: 12px;
}

.meds-col .col-h {
  font-weight: 700;
  margin-bottom: 6px;
}

.meds-chiplist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.med-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0d172c;
  border: 1px solid var(--ring);
  border-radius: 999px;
  padding: 6px 10px;
}

/* Today Matters */
.tm-done { opacity: .85; }

/* ===== ACTIVE SEGMENT (deduped) ===== */
#segWeek.active, #segMonth.active, #segYear.active {
  background: rgba(255,255,255,.09);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset;
}

/* ===== Learn page (consolidated) ===== */
.learn {
  max-width: 820px; margin: 0 auto; padding: 8px 18px 48px;
  --accent-from:#60a5fa; --accent-to:#22d3ee; /* default accent */
}
.learn .eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; opacity: .75; margin-bottom: 6px; }
.learn .h2 { font-size: 22px; margin: 0 0 6px; }
.learn .h4 { font-size: 16px; margin: 16px 0 8px; }
.learn .bullets { margin: 8px 0 0 0; padding-left: 18px; }
.learn .coming-soon { margin-top: 10px; opacity: .8; }
.learn .buttons { display: flex; gap: 10px; }
.learn .btn { padding: 10px 14px; border-radius: 12px; background: linear-gradient(180deg,var(--trend-bar-to,#22d3ee),var(--trend-bar-from,#60a5fa)); color: #000; font-weight: 600; text-decoration: none; }
.learn .btn.ghost { background: transparent; color: inherit; box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset; }
.learn .release ul { margin: 6px 0 0 18px; }

/* Box each major section */
.learn section.card {
  background: rgba(255,255,255,.04);
  border-radius: 14px; padding: 14px 16px; margin: 12px 0 20px;
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}

/* Headings: soft card + accent stripe */
.learn h2, .learn .habit h3 {
  position: relative;
  margin: 14px 0 10px;
  padding: 8px 12px 9px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 0 0 1px rgba(255,255,255,.12) inset;
}
.learn h2::before, .learn .habit h3::before {
  content: "";
  position: absolute; top: 0; bottom: 0; left: 0; width: 4px;
  border-radius: 12px 0 0 12px;
  background: linear-gradient(180deg, var(--accent-to), var(--accent-from));
  opacity: .95;
}

/* Optional gradient text for select headings (add class="h-accent" in HTML) */
.learn .h-accent {
  background: linear-gradient(180deg, var(--accent-to), var(--accent-from));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Habits: spacing + per-habit accent colors */
.learn .habit { margin: 16px 0 18px; }
.learn .habit h3 { margin: 10px 0 6px; font-size: 18px; }
.learn .pitfall { opacity: .85; }

.learn .habit.water    { --accent-from:#60a5fa; --accent-to:#22d3ee; } /* sky→cyan */
.learn .habit.movement { --accent-from:#34d399; --accent-to:#10b981; } /* emerald */
.learn .habit.strength { --accent-from:#f59e0b; --accent-to:#f59e0b; } /* amber */
.learn .habit.walk     { --accent-from:#a78bfa; --accent-to:#818cf8; } /* violet→indigo */
.learn .habit.sleep    { --accent-from:#38bdf8; --accent-to:#0ea5e9; } /* blue */
.learn .habit.colors   { --accent-from:#fb7185; --accent-to:#f472b6; } /* rose→pink */
.learn .habit.mind     { --accent-from:#f97316; --accent-to:#ef4444; } /* orange→red */

@media (max-width: 420px){
  .learn { padding: 8px 12px 40px; }
  .learn section.card { padding: 12px 12px; }
  .learn h2, .learn .habit h3 { padding: 8px 10px; }
  .learn .buttons { flex-direction: column; }
}
/* Learn CTAs */
.learn .buttons {
  display: flex;
  gap: 12px;
  align-items: stretch;
  justify-content: flex-start;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--ring);
  border-radius: 12px;
  padding: 12px;
}

.learn .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  transition: transform .06s ease, box-shadow .12s ease, opacity .12s ease;
  background: linear-gradient(180deg, var(--trend-bar-to,#22d3ee), var(--trend-bar-from,#60a5fa));
  color: #000;
  box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 6px 18px rgba(2,6,23,.35);
}

.learn .btn:hover { transform: translateY(-1px); }
.learn .btn:active { transform: translateY(0); opacity: .95; }
.learn .btn:focus-visible { outline: 2px solid #a5f3fc; outline-offset: 2px; }

.learn .btn.ghost {
  background: transparent;
  color: var(--text);
  box-shadow: none;
  border: 1px solid var(--ring);
}

.learn .btn.ghost:hover {
  background: rgba(255,255,255,.06);
}

@media (max-width: 520px) {
  .learn .buttons { flex-direction: column; }
  .learn .btn { width: 100%; min-width: 0; }
}