/* Jagruti Care — "Simple" design: white, flat, Manrope-only, one moss accent */
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-var-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --bg: #FFFFFF;
  --ink: #26241C;
  --soft: #6C685A;
  --hair: #ECE9E0;
  --field: #F4F1E8;
  --moss: #4A6B3D;
  --moss-s: #E9EEDD;
  --amber: #A97B1E;
  --amber-s: #F4EACE;
  --clay: #A84B32;
  --clay-s: #F3E0D8;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
.app { max-width: 430px; margin: 0 auto; min-height: 100dvh; padding-bottom: 88px; }

/* ---------- header ---------- */
.view { display: none; padding: 26px 20px 8px; }
.view.active { display: block; }
.brand-row { display: flex; align-items: center; justify-content: space-between; }
.brand { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; color: var(--moss); }
.sos {
  border: none; background: var(--clay-s); color: var(--clay); cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
  padding: 6px 12px; border-radius: 999px;
}
h1 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; margin-top: 4px; }
.sub { font-size: 14px; font-weight: 500; color: var(--soft); }

/* ---------- shared bits ---------- */
.eyebrow { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; color: var(--soft); margin: 20px 0 6px; }
.eyebrow .accent { color: var(--moss); font-size: 11px; letter-spacing: 0; }
.viz-box { border: 1px solid var(--hair); border-radius: 14px; padding: 14px 0 6px; margin-top: 14px; }
.viz-box .viz-title { display: flex; align-items: center; justify-content: space-between; padding: 0 16px 4px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; color: var(--soft); }
.viz-box svg { width: 100%; height: auto; display: block; }
.pill { padding: 4px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 800; white-space: nowrap; }
.pill.moss { background: var(--moss-s); color: var(--moss); }
.pill.amber { background: var(--amber-s); color: var(--amber); }
.pill.clay { background: var(--clay-s); color: var(--clay); }
.pill.dim { background: var(--field); color: var(--soft); }
.note-strip { margin-top: 14px; padding: 12px 16px; background: var(--field); border-radius: 12px; font-size: 12.5px; font-weight: 600; line-height: 1.5; }
.note-strip.amber { background: var(--amber-s); }
.note-strip.moss { background: var(--moss-s); }
.note-strip.clay { background: var(--clay-s); }

/* search + filter chips */
.search {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  padding: 12px 14px; background: var(--field); border-radius: 12px;
}
.search input {
  flex: 1; border: none; background: transparent; font-family: inherit;
  font-size: 15px; font-weight: 600; color: var(--ink); outline: none;
}
.search input::placeholder { color: var(--soft); font-weight: 500; }
.chips { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0; border: none; cursor: pointer; font-family: inherit;
  padding: 8px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  background: var(--field); color: var(--soft); white-space: nowrap;
}
.chip.active { background: var(--moss); color: #fff; font-weight: 800; }
.chip.good.active { background: var(--moss); }
.chip.bad { background: var(--clay-s); color: var(--clay); }
.chip.bad.active { background: var(--clay); color: #fff; }

/* table rows */
.t-head { display: flex; gap: 10px; padding: 12px 0 8px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.1em; color: var(--soft); }
.t-row { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--hair); }
.t-row .grow { flex: 1; min-width: 0; }
.t-row .nm { display: block; font-size: 14.5px; font-weight: 700; }
.t-row .cap { display: block; font-size: 12px; font-weight: 500; color: var(--soft); }
.t-time { width: 46px; flex-shrink: 0; font-size: 12.5px; font-weight: 800; color: var(--soft); }
.t-tag { flex-shrink: 0; text-align: right; font-size: 11.5px; font-weight: 800; }
.t-when { width: 66px; flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--soft); }
.t-status { width: 64px; flex-shrink: 0; text-align: center; padding: 4px 0; border-radius: 999px; font-size: 10.5px; font-weight: 800; }
.empty { padding: 22px 0; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--soft); }

/* tracker slots */
.slot { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--hair); cursor: pointer; user-select: none; }
.slot .txt { flex: 1; font-size: 14px; font-weight: 700; min-width: 0; }
.slot.taken .txt { color: var(--soft); }
.slot .check {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 999px;
  border: 2px solid var(--hair); background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: #fff;
}
.slot.taken .check { background: var(--moss); border-color: var(--moss); }
.slot.due { background: var(--amber-s); border-radius: 12px; border-top-color: transparent; padding: 10px 12px; }
.slot.due .txt { font-weight: 800; }
.slot.due .check { border-color: var(--amber); }
.slot.missed .txt em { color: var(--clay); font-style: normal; }
.streak { display: block; padding-top: 8px; font-size: 12px; font-weight: 700; color: var(--moss); }

/* tiles */
.tiles { display: flex; gap: 10px; margin-top: 14px; }
.tile { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 12px; border-radius: 14px; }
.tile b { font-size: 22px; font-weight: 800; }
.tile span { font-size: 11.5px; font-weight: 700; }
.tile.moss { background: var(--moss-s); color: var(--moss); }
.tile.amber { background: var(--amber-s); color: var(--amber); }
.tile.clay { background: var(--clay-s); color: var(--clay); }

/* measurement cards */
.meas { display: flex; gap: 10px; margin-top: 8px; }
.mcard { flex: 1; border: 1px solid var(--hair); border-radius: 14px; padding: 12px 14px; cursor: pointer; background: #fff; font-family: inherit; text-align: left; }
.mcard .m-label { display: block; font-size: 11px; font-weight: 800; color: var(--soft); }
.mcard .m-val { display: block; font-size: 20px; font-weight: 800; color: var(--ink); }
.mcard .m-val small { font-size: 11px; font-weight: 600; color: var(--soft); }
.mcard .m-add { display: block; font-size: 12px; font-weight: 800; color: var(--moss); }

/* routine timeline */
.tl-row { display: flex; gap: 12px; }
.tl-row .t { width: 44px; flex-shrink: 0; padding-top: 2px; font-size: 12.5px; font-weight: 800; color: var(--soft); text-align: right; }
.tl-rail { display: flex; flex-direction: column; align-items: center; width: 14px; flex-shrink: 0; }
.tl-dot { width: 13px; height: 13px; flex-shrink: 0; border-radius: 999px; }
.tl-dot.med { background: var(--moss); }
.tl-dot.food { background: var(--amber); }
.tl-dot.act { border: 2.5px solid var(--soft); background: #fff; }
.tl-line { width: 2px; flex: 1; background: var(--hair); }
.tl-body { padding-bottom: 22px; min-width: 0; }
.tl-body .a { display: block; font-size: 15px; font-weight: 700; }
.tl-body .n { display: block; font-size: 12.5px; font-weight: 500; color: var(--soft); }
.legend { display: flex; gap: 14px; margin-top: 14px; font-size: 12px; font-weight: 700; color: var(--soft); }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }

/* walk buttons */
.walk-row { display: flex; gap: 10px; margin-top: 8px; }
.walk-btn {
  flex: 1; display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  border: 1px solid var(--hair); border-radius: 14px; padding: 12px 14px;
  background: #fff; cursor: pointer; font-family: inherit; text-align: left;
}
.walk-btn .w-t { font-size: 11px; font-weight: 800; color: var(--soft); }
.walk-btn .w-n { font-size: 14px; font-weight: 800; color: var(--ink); }
.walk-btn .w-s { font-size: 12px; font-weight: 800; color: var(--moss); }
.walk-btn.done { background: var(--moss-s); border-color: var(--moss); }

/* two-col info tiles */
.duo { display: flex; gap: 10px; margin-top: 14px; }
.duo > div { flex: 1; border-radius: 14px; padding: 13px 14px; }
.duo .d-h { display: block; font-size: 11px; font-weight: 800; margin-bottom: 3px; }
.duo .d-b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.5; color: var(--ink); }

/* report analysis */
.sec-h { display: flex; align-items: center; gap: 8px; margin: 22px 0 4px; }
.sec-h i {
  width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; font-size: 11px; font-weight: 800; font-style: normal;
}
.sec-h span { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; }
.lab-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--hair); }
.lab-row .dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 999px; }
.dot.red { background: var(--clay); } .dot.amb { background: var(--amber); } .dot.grn { background: var(--moss); }
.lab-row .lname { flex: 1; font-size: 13.5px; font-weight: 700; }
.lab-row .lval { text-align: right; flex-shrink: 0; }
.lab-row .lval b { display: block; font-size: 13.5px; font-weight: 800; }
.lab-row .lval span { display: block; font-size: 10.5px; font-weight: 600; color: var(--soft); }
.takeaway { margin-top: 8px; padding: 11px 14px; border-radius: 12px; font-size: 12.5px; font-weight: 600; line-height: 1.5; }
.report-card { border: 1.5px solid var(--moss); border-radius: 14px; padding: 16px; margin-top: 16px; }
.rc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rc-title { font-size: 16px; font-weight: 800; }
.rc-sub { font-size: 12.5px; font-weight: 500; color: var(--soft); }
.rc-body { font-size: 13px; font-weight: 500; line-height: 1.55; margin-top: 8px; }
.date-card { display: flex; align-items: center; gap: 14px; margin: 18px 0; padding: 16px; background: var(--amber-s); border-radius: 14px; }
.date-card .d { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; color: var(--amber); }
.date-card .d b { font-size: 24px; font-weight: 800; line-height: 1.1; }
.date-card .d span { font-size: 11px; font-weight: 800; letter-spacing: 0.06em; }
.date-card .t b { display: block; font-size: 14.5px; font-weight: 800; }
.date-card .t span { display: block; font-size: 12.5px; font-weight: 500; line-height: 1.45; }
.btn {
  display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 48px; border: none; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 800;
}
.btn.moss { background: var(--moss); color: #fff; }
.btn.clay { background: var(--clay); color: #fff; }
.btn.outline-clay { background: #fff; border: 1.5px solid var(--clay); color: var(--clay); }
.btn:active { transform: scale(0.985); }

/* ---------- tab bar ---------- */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 430px; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 12px calc(16px + env(safe-area-inset-bottom));
  background: #fff; border-top: 1px solid var(--hair);
}
.tab { display: flex; flex-direction: column; align-items: center; gap: 5px; border: none; background: none; cursor: pointer; font-family: inherit; }
.tab span { font-size: 11px; font-weight: 600; color: var(--soft); white-space: nowrap; }
.tab i { width: 16px; height: 3px; border-radius: 999px; }
.tab.active span { color: var(--moss); font-weight: 800; }
.tab.active i { background: var(--moss); }

/* ---------- sheets & overlay ---------- */
.sheet-back { display: none; position: fixed; inset: 0; background: rgba(38,36,28,0.45); z-index: 100; }
.sheet-back.open { display: flex; align-items: flex-end; justify-content: center; }
.sheet {
  width: 100%; max-width: 430px; background: #fff;
  border-radius: 20px 20px 0 0; padding: 14px 20px calc(28px + env(safe-area-inset-bottom));
  max-height: 88dvh; overflow-y: auto;
}
.sheet .handle { width: 44px; height: 5px; background: var(--hair); border-radius: 999px; margin: 0 auto 12px; }
.sheet h3 { font-size: 21px; font-weight: 800; }
.sheet .sheet-sub { font-size: 13px; color: var(--soft); font-weight: 500; margin-bottom: 12px; }
.sheet .fields { display: flex; gap: 10px; margin-bottom: 12px; }
.sheet label { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.06em; color: var(--soft); margin-bottom: 5px; }
.sheet input, .sheet select {
  width: 100%; padding: 13px; border: 1.5px solid var(--hair); border-radius: 12px;
  font-family: inherit; font-size: 19px; font-weight: 700; color: var(--ink); background: var(--field);
}
.sheet input:focus, .sheet select:focus { outline: none; border-color: var(--moss); }
.sheet .f { flex: 1; }
.sheet .cancel { margin-top: 8px; min-height: 42px; background: none; color: var(--soft); font-weight: 700; border: none; width: 100%; font-family: inherit; font-size: 14px; cursor: pointer; }
.em-title { font-size: 20px; font-weight: 800; color: var(--clay); white-space: nowrap; margin-bottom: 12px; }
.em-btns { display: flex; gap: 10px; margin-bottom: 12px; }
.em-block { border-radius: 14px; padding: 13px 14px; margin-bottom: 10px; }
.em-block .e-h { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; margin-bottom: 3px; }
.em-block .e-b { display: block; font-size: 13.5px; font-weight: 600; line-height: 1.55; color: var(--ink); }
.footnote { display: block; font-size: 12px; font-weight: 500; color: var(--soft); padding: 10px 0 16px; }
a { color: var(--moss); font-weight: 700; }