/* Chargewise — colours: a palette (data-palette A Sea glass / B Morning sky / C Warm sand) sets the accent colours; appearance
   (data-theme light / dark) sets the surfaces. 1.5.10 added dark and text size (data-text large); 1.5.11 brought the three palettes
   back (Gary, 2 Oct) as a second row under Look. Sizes are rem so the phone's text setting applies. */
:root { --bg:#f3f6fb; --card:#fff; --ink:#1c2433; --muted:#5f6b7d; --ghost:#e7ecfb; --top:#f3f6fb; --topink:#1c2433; --chipbg:#dff5e6; --chipink:#1e6b3c; --ok:#2b8a3e; --warn:#c77700; --danger:#c92a2a; --shadow:0 1px 2px rgba(20,30,60,.08); --border:1px solid #e3e8f2; --line:#e3e8f2; --warnbg:#fde8c8; --warnink:#8a4b00; --dangerbg:#fdecec; --sw:#c9cfd8; --toastink:#fff;
  --accent:#3b5bdb; --accent2:#5c7cfa; --cta:#3b5bdb; --ctaink:#fff; --accent-dark:#8da2ff; --accent2-dark:#7c93f5; --cta-dark:#5c7cfa; }
:root[data-palette="A"] { --accent:#2b7a78; --accent2:#3aafa9; --cta:#e9772e; --ctaink:#fff; --ghost:#e3efee; --bg:#f5f9f8; --top:#2b7a78; --topink:#fff; --chipbg:#e3f5ea; --chipink:#1f6b3a; --shadow:0 1px 3px rgba(0,0,0,.06); --border:0; --line:#e6eeec; --accent-dark:#5fd0c9; --accent2-dark:#3aafa9; --cta-dark:#e9772e; }
:root[data-palette="C"] { --accent:#2f6f4e; --accent2:#8fbf9f; --cta:#d0702f; --ctaink:#fff; --ghost:#eaf2ec; --bg:#faf6f0; --card:#fffdf9; --ink:#2b2622; --muted:#6d655c; --top:#faf6f0; --topink:#2b2622; --chipbg:#e4efe6; --chipink:#2f6f4e; --ok:#2f6f4e; --warn:#b8641f; --danger:#b23a3a; --shadow:none; --border:1px solid #e9e1d6; --line:#e9e1d6; --accent-dark:#8fd3a8; --accent2-dark:#8fbf9f; --cta-dark:#d0702f; }
:root[data-theme="dark"] { --bg:#121722; --card:#1b2230; --ink:#e6eaf2; --muted:#a3adbe; --ghost:#273150; --top:#121722; --topink:#e6eaf2; --chipbg:#1f3a2b; --chipink:#9fe0b3; --ok:#5fbf74; --warn:#e8a84a; --danger:#f07878; --shadow:none; --border:1px solid #2a3447; --line:#2a3447; --warnbg:#3a2a12; --warnink:#f3c98a; --dangerbg:#3a1d1d; --sw:#3a4560; --toastink:#121722; --accent:var(--accent-dark); --accent2:var(--accent2-dark); --cta:var(--cta-dark); --ctaink:#fff; }
html { font-size: 16px; }
html[data-text="large"] { font-size: 18px; }
* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }   /* 1.5.17: nothing may widen the page past the screen */
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--ink); font: 1rem/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; min-height:100vh; }
button, input, select, textarea { font: inherit; }
main { max-width: 560px; margin: 0 auto; padding: 0 14px 90px; }
section[hidden] { display:none; }
.top { background: var(--top); color: var(--topink); padding: 14px 14px 10px; margin: 0 -14px 12px; }
.top .name { font-weight: 700; font-size: 1.1875rem; }
.top .date { font-size: 0.875rem; opacity: .85; }
.chip { display:inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 999px; background: var(--chipbg); color: var(--chipink); font-weight:600; font-size: 0.875rem; }
.chip.muted { background: var(--ghost); color: var(--muted); }
.chip.warn { background: var(--warnbg); color: var(--warnink); }
.update { position: fixed; left: 0; right: 0; top: 0; z-index: 60; background: var(--danger); color: #fff; padding: 10px 16px; font-size: 0.9375rem; display:flex; align-items:center; justify-content:center; gap: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.2); }
.update button { background: #fff; color: var(--danger); border: 0; border-radius: 8px; padding: 6px 12px; font-weight: 700; font-size: 0.875rem; }
h2 { font-size: 1.125rem; margin: 14px 0 8px; }
.card { background: var(--card); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; box-shadow: var(--shadow); border: var(--border); }
.card.due { border-left: 4px solid var(--accent); }
.card.active { border-left: 4px solid var(--ok); }
.card.faded { opacity: .6; }
.row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.row > div[style*="flex:1"] { min-width: 0; }   /* 1.5.17: side-by-side fields (times, pause) shrink instead of pushing off the screen */
.row > div[style*="flex:1"] > input, .row > div[style*="flex:1"] > select { min-width: 0; }
.row > input[type=time], .row > input[type=date], .row > input[type=datetime-local] { min-width: 0; }
.btns .btn, .row .btn.small { white-space: normal; }   /* 1.5.17: a long button label wraps rather than leaving the screen */
.row.wrap { flex-wrap: wrap; }
.title { font-weight:600; }
.sub { font-size: 0.875rem; color: var(--muted); }
.btn { font-weight: 600; padding: 10px 14px; border-radius: 10px; border:0; background: var(--accent); color:#fff; white-space:nowrap; cursor:pointer; }
.btn.ghost { background: var(--ghost); color: var(--accent); }
.btn.danger { background: var(--dangerbg); color: var(--danger); }
.btn.big { width:100%; padding: 15px; border-radius: 12px; font-size: 1.0625rem; margin-top: 6px; background: var(--cta); color: var(--ctaink); }
.btn.small { padding: 7px 10px; font-size: 0.875rem; }
.btn:disabled { opacity: .5; cursor: default; }
.btns { display:flex; gap:8px; flex-wrap: wrap; justify-content:flex-end; }
.done { color: var(--ok); font-weight:600; font-size: 0.875rem; }
.missed { color: var(--warn); font-weight:600; font-size: 0.875rem; }
.counts { display:grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap:8px; margin: 10px 0; }
.count { background: var(--card); border-radius: 12px; padding: 10px 8px; text-align:center; box-shadow: var(--shadow); border: var(--border); }
.count .n { font-size: 1.375rem; font-weight:700; color: var(--accent); }
.count .l { font-size: 0.8125rem; color: var(--muted); }
.bar { height: 6px; border-radius: 3px; background: var(--ghost); margin-top:6px; overflow:hidden; }
.bar i { display:block; height:100%; background: var(--accent2); }
.nav { position: fixed; left:0; right:0; bottom:0; background: var(--card); border-top: 1px solid var(--line); display:flex; justify-content:space-around; padding: 8px 0 max(10px, env(safe-area-inset-bottom)); }
/* 1.5.17 (Gary, 2 Oct): with the phone's own text scaling on top of Large, the three words could not shrink and pushed the whole page wider than the screen */
.nav button { background:none; border:0; color: var(--muted); font-size: 0.875rem; padding: 4px 4px; flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.nav button.on { color: var(--accent); font-weight: 700; }
.toggle { display:inline-flex; align-items:center; gap:8px; color: var(--muted); font-size: 0.875rem; background:none; border:0; padding:0; }
.sw { width: 40px; height: 22px; border-radius: 11px; background: var(--sw); position:relative; transition: background .15s; }
.sw::after { content:""; position:absolute; left:2px; top:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition: left .15s; }
.toggle.on .sw { background: var(--accent2); } .toggle.on .sw::after { left: 20px; }
label.f { display:block; margin: 10px 0 4px; font-size: 0.875rem; color: var(--muted); }
input[type=text], input[type=number], input[type=time], input[type=datetime-local], input[type=date], input[type=email], input[type=password], select, textarea {   /* 1.6.1: email and date were missing — the sign-in email box came out browser-sized */ width:100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
textarea { min-height: 70px; }
.seg { display:flex; gap:6px; flex-wrap: wrap; }
.seg button { flex:1; padding: 10px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.seg button.on { background: var(--accent); color:#fff; border-color: var(--accent); }
.seg.sev button.on[data-v="Low"] { background: var(--ok); border-color: var(--ok); }
.seg.sev button.on[data-v="Medium"] { background: var(--warn); border-color: var(--warn); }
.seg.sev button.on[data-v="High"] { background: var(--danger); border-color: var(--danger); }
.anchor { font-size: 0.875rem; color: var(--muted); margin-top: 4px; }
.times { display:flex; flex-wrap: wrap; gap: 8px; }
.times .t { display:flex; align-items:center; gap:6px; background: var(--ghost); border-radius: 10px; padding: 6px 8px; }
.times .t button { border:0; background:none; color: var(--danger); font-weight:700; }
.status { color: var(--muted); font-size: 0.875rem; min-height: 1.3em; margin-top: 6px; }
.err { color: var(--danger); }
.login { margin-top: 20vh; text-align:center; }
.login input { text-align:center; font-size: 1.625rem; letter-spacing: 8px; }
.login input[type=email] { width: 100%; font-size: 1.0625rem; letter-spacing: normal; padding: 15px; border-radius: 12px; margin-bottom: 8px; }   /* 1.6.1 (Gary): same width, height and text size as the button below it */
.login #loginInfo { color: var(--ok); font-weight: 600; margin-top: 10px; }
.list-empty { color: var(--muted); font-size: 0.875rem; padding: 8px 2px; }
table { width:100%; border-collapse: collapse; font-size: 0.875rem; }
td, th { padding: 6px 4px; border-bottom: 1px solid var(--line); text-align:left; vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: 0.8125rem; }
.pill { display:inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.8125rem; background: var(--ghost); color: var(--accent); margin-right: 4px; }
.toast { position: fixed; left: 50%; bottom: 76px; transform: translateX(-50%); background: var(--ink); color: var(--toastink); padding: 10px 16px; border-radius: 10px; font-size: 0.875rem; opacity: 0; transition: opacity .2s; pointer-events: none; }
.toast.show { opacity: .95; pointer-events: auto; }
.toast.err { background: var(--danger); color: #fff; }
/* 1.5.11: Settings groups and the Today action row */
details.group { margin: 14px 0 10px; }
details.group > summary { cursor: pointer; font-weight: 600; padding: 10px 4px; color: var(--ink); list-style: none; display:flex; align-items:center; gap:8px; }
details.group > summary::before { content: "▸"; color: var(--muted); font-size: 0.875rem; }
details.group[open] > summary::before { content: "▾"; }
details.group > summary::-webkit-details-marker { display:none; }
.bigrow { display:flex; gap:10px; }
.bigrow .btn.big { flex:1 1 0; min-width:0; white-space:normal; }   /* 1.5.17: shrinkable at big text */
.bigrow #btnRestNow { background: var(--ok); }
.build { text-align:center; color: var(--muted); font-size: 0.8125rem; margin-top: 20px; }

.chips { display:flex; flex-wrap: wrap; gap: 6px; }
.chips button { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 0.875rem; }
.chips button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.hint { font-weight: 400; font-size: 0.8125rem; color: var(--muted); }
.card.checkin { border-left: 4px solid var(--accent2); }

[hidden] { display: none !important; }

.h-sub { font-size: 0.9375rem; color: var(--muted); margin: 14px 2px 6px; font-weight: 600; }
.occ { display:flex; align-items:center; gap:10px; padding: 8px 14px; color: var(--muted); font-size: 0.875rem; }
.occ .t { font-variant-numeric: tabular-nums; min-width: 46px; color: var(--ink); }
.more { text-align:center; font-size: 0.875rem; color: var(--accent); padding: 6px; }
select { font: inherit; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); width: 100%; }

.sheet { position: fixed; inset: 0; background: rgba(20,30,60,.35); display:flex; align-items:flex-end; justify-content:center; z-index: 50; }
.sheet-card { background: var(--card); color: var(--ink); width: 100%; max-width: 520px; border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 20px rgba(0,0,0,.15); }
.sheet-msg { font-size: 1rem; margin-bottom: 14px; }
.sheet .btns { justify-content: flex-end; gap: 10px; }

.review { overflow-x: auto; }
.review table { min-width: 520px; }
/* 1.5.0: day type and heart-rate questions */
.card.day-green { border-left: 4px solid var(--ok); }
.card.day-amber { border-left: 4px solid var(--warn); }
.card.day-red { border-left: 4px solid var(--danger); }
.chip.day-green { background: var(--chipbg); color: var(--chipink); }
.chip.day-amber { background: var(--warnbg); color: var(--warnink); }
.chip.day-red { background: var(--dangerbg); color: var(--danger); }
.dt-list { margin: 6px 0 0; padding-left: 18px; font-size: 0.875rem; color: var(--muted); }
.dt-list li { margin: 2px 0; }
.dt-alert { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--dangerbg); color: var(--danger); font-size: 0.875rem; }
.dt-own { margin-top: 8px; }
/* 1.5.14 (review I11): the "?" help button and its paragraph; (I8) the quiet events line */
.qmark { display:inline-flex; align-items:center; justify-content:center; width: 1.375rem; height: 1.375rem; margin-left: 6px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--muted); font: inherit; font-size: 0.8125rem; font-weight: 600; line-height: 1; vertical-align: middle; cursor: pointer; }
.helpbox { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: var(--bg); color: var(--muted); font-size: 0.875rem; font-weight: 400; line-height: 1.4; }
.quietline { margin: 0 2px 10px; }
/* 1.5.16 (review I15): Simple view — a Red day (or by hand) shows the day line, the due prompts, Rest now and Log event; the rest behind More */
#s-today.simple #tomorrowLine, #s-today.simple #healthNeeds, #s-today.simple #breachCards, #s-today.simple #upNextTitle, #s-today.simple #upNext, #s-today.simple #counts, #s-today.simple #todayEvents, #s-today.simple #pushStatus { display: none; }
#s-today.simple #needs > :not(.due):not(.active) { display: none; }
#moreBar { margin: 0 0 12px; }
.linkish { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; font-size: 0.875rem; text-decoration: underline; cursor: pointer; }
.brow { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.brow .t { font-weight: 600; min-width: 96px; }
.brow .btns { margin-left: auto; }
/* 1.5.1: day chip on the title line; tap it to show or hide the day card */
.titlerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.titlerow .chip { margin-top: 0; border: 0; font: inherit; font-weight: 600; font-size: 0.875rem; cursor: pointer; }
.hchip { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 0.8125rem; font-weight: 600; vertical-align: middle; }
/* 1.6.4: consent screen, first set-up, and the Terms / Privacy Notice read in the app or as pages */
#s-consent .card p { margin: 6px 0 0; font-size: 0.9375rem; line-height: 1.45; }
.check { display: flex; gap: 12px; align-items: flex-start; margin-top: 12px; font-size: 0.9375rem; line-height: 1.45; cursor: pointer; }
.check input[type=checkbox] { width: 1.5rem; height: 1.5rem; min-width: 1.5rem; margin: 2px 0 0; accent-color: var(--accent); }
.btn.big:disabled { opacity: .45; }
.legal { padding-bottom: 20px; }
.legal h1 { font-size: 1.375rem; margin: 12px 0 4px; color: var(--accent); }
.legal h2 { font-size: 1.0625rem; margin: 18px 0 6px; }
.legal p { margin: 8px 0; line-height: 1.5; }
.legal a, #aboutCard a, #s-consent a, .login a { color: var(--accent); }