/* ================================================================
   Med Log v2 - Ease Health design system, adapted for a phone app.
   Tokens and deviations are recorded in ../../DESIGN.md (appendix).
   Serif for headings and prose only; every numeral that is data is sans,
   lining, tabular.
   ================================================================ */

:root {
  --forest-ink: #0f3e17;
  --forest-shadow: #0c2f10;
  --sage-mist: #b1dbb8;
  --keylime-wash: #e1f4df;
  --mint-veil: #cfe7d3;
  --slate-hush: #b6ced5;
  --cream-paper: #fffefc;
  --charcoal: #222222;
  --border-mist: #efeeeb;

  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans: 'Suisse Intl', Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

  --text-caption: 10px;
  --text-eyebrow: 11px;
  --text-body: 14px;
  --text-subheading: 18px;
  --text-heading-sm: 23px;

  --sp-4: 4px; --sp-7: 7px; --sp-9: 9px; --sp-11: 11px; --sp-14: 14px;
  --sp-18: 18px; --sp-21: 21px; --sp-28: 28px; --sp-35: 35px; --sp-42: 42px;

  --radius-nav: 7px;
  --radius-card: 14px;
  --radius-pill: 999px;

  --card-pad: var(--sp-18);
  --tap: 44px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --tabbar: 64px;
}
@media (min-width: 600px) { :root { --card-pad: var(--sp-21); } }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; background: var(--cream-paper); color: var(--charcoal);
  font-family: var(--font-sans); font-size: var(--text-body); line-height: 1.5;
  -webkit-text-size-adjust: 100%; overscroll-behavior-y: none;
}
body { padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + var(--sp-21)); }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--forest-ink); outline-offset: 2px; }
[hidden] { display: none !important; }
.num { font-family: var(--font-sans); font-variant-numeric: lining-nums tabular-nums; }
.wrap { max-width: 640px; margin: 0 auto; padding: 0 var(--sp-18); }
svg.i { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.7;
        stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

/* ---------- header ---------- */
header.top {
  position: sticky; top: 0; z-index: 20; background: rgba(255, 254, 252, .94);
  -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--border-mist);
  padding-top: env(safe-area-inset-top);
}
.hd { display: flex; align-items: center; gap: var(--sp-9); min-height: 64px; }
.hd .title { flex: 1; min-width: 0; }
.hd .d1 {
  font-family: var(--font-display); font-weight: 300; font-variant-numeric: lining-nums;
  font-size: 27px; line-height: 1.1; letter-spacing: -0.01em; color: var(--forest-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hd .d2 {
  font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--forest-ink); opacity: .6; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.iconbtn {
  width: 40px; height: 40px; flex: 0 0 40px; border: 0; border-radius: var(--radius-nav);
  background: var(--keylime-wash); color: var(--forest-ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.iconbtn:active { background: var(--mint-veil); }
.iconbtn:disabled { opacity: .3; }
.pill {
  border: 0; border-radius: var(--radius-pill); background: var(--forest-ink); color: var(--cream-paper);
  font-size: var(--text-caption); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  height: 30px; padding: 0 var(--sp-11);
}

/* sync status - quiet when all is well */
.sync {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--sp-9);
  border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--forest-ink);
  font-size: var(--text-caption); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.sync .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage-mist); box-shadow: 0 0 0 2px var(--keylime-wash); }
.sync[data-s="ok"] .lbl { display: none; }
.sync[data-s="ok"] .dot { background: #5fae6c; }
.sync[data-s="syncing"] .dot { background: var(--forest-ink); animation: pulse 1s ease-in-out infinite; }
.sync[data-s="syncing"] .lbl { display: none; }
.sync[data-s="pending"] { background: var(--keylime-wash); }
.sync[data-s="pending"] .dot { background: #d9a441; }
.sync[data-s="offline"] { background: var(--border-mist); color: var(--charcoal); }
.sync[data-s="offline"] .dot { background: #9aa39b; }
.sync[data-s="error"] { background: #f6e0dc; color: #7a2419; }
.sync[data-s="error"] .dot { background: #c0503f; }
@keyframes pulse { 50% { opacity: .35; } }

/* ---------- sections ---------- */
h2 {
  font-family: var(--font-display); font-weight: 300; font-size: var(--text-heading-sm);
  line-height: 1.25; letter-spacing: -0.01em; color: var(--forest-ink);
  margin: var(--sp-28) 0 var(--sp-11); display: flex; align-items: baseline;
  justify-content: space-between; gap: var(--sp-14);
}
h2 .r {
  font-family: var(--font-sans); font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--forest-ink); opacity: .55; white-space: nowrap;
}
.eyebrow {
  font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--forest-ink);
}
.hint { color: var(--charcoal); opacity: .64; font-size: 12.5px; line-height: 1.55; }
.card {
  background: var(--keylime-wash); border-radius: var(--radius-card); padding: var(--card-pad);
  margin-bottom: var(--sp-9);
}
.card .eyebrow { display: block; margin-bottom: var(--sp-7); }
.card.alert { background: var(--sage-mist); }
.card.slate { background: var(--slate-hush); }
.empty {
  text-align: center; padding: var(--sp-35) var(--sp-21); color: var(--forest-ink);
}
.empty .big { font-family: var(--font-display); font-weight: 300; font-size: 22px; margin-bottom: var(--sp-7); }

/* ---------- progress ---------- */
.progress { display: flex; align-items: center; gap: var(--sp-14); margin: var(--sp-21) 0 var(--sp-14); }
.progress .bar { flex: 1; height: 8px; border-radius: var(--radius-pill); background: var(--keylime-wash); overflow: hidden; }
.progress .bar i { display: block; height: 100%; background: var(--forest-ink); border-radius: inherit; transition: width .35s var(--ease); }
.progress .txt { font-size: 12px; font-weight: 600; color: var(--forest-ink); white-space: nowrap; }

/* ---------- dose rows ---------- */
.dose {
  display: flex; align-items: center; gap: var(--sp-11);
  background: var(--keylime-wash); border-radius: var(--radius-card);
  padding: var(--sp-11) var(--sp-11) var(--sp-11) var(--sp-18); margin-bottom: var(--sp-9);
  min-height: 76px; transition: background-color .25s var(--ease);
}
.dose.optional { background: var(--cream-paper); box-shadow: inset 0 0 0 1px var(--border-mist); }
.dose.optional .btn.soft, .dose.optional .tag:not(.ink):not(.warn) { background: var(--keylime-wash); }
.dose.done { background: var(--sage-mist); box-shadow: none; }
.dose.skipped { background: var(--border-mist); box-shadow: none; }
.dose .when { flex: 0 0 58px; }
.dose .when .t { font-size: 17px; font-weight: 600; color: var(--forest-ink); line-height: 1.1; }
.dose .when .ap { font-size: var(--text-caption); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--forest-ink); opacity: .55; }
.dose .info { flex: 1; min-width: 0; }
.dose .drug { font-size: 16.5px; color: var(--forest-ink); line-height: 1.3; }
.dose .drug b { font-weight: 600; }
.dose .meta { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin-top: 4px; font-size: 12px; color: var(--charcoal); }
.dose .meta .m { opacity: .7; }
.tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--sp-7);
  border-radius: var(--radius-pill); background: var(--cream-paper); color: var(--forest-ink);
  font-size: var(--text-caption); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.tag.ink { background: var(--forest-ink); color: var(--cream-paper); }
.tag.warn { background: #f3e3c3; color: #6b4a0e; }
.dose .status { font-size: 12.5px; color: var(--forest-ink); margin-top: 3px; font-weight: 600; }
.dose .status.late { color: #6b4a0e; }
.dose .act { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }

.btn {
  height: var(--tap); min-width: 44px; padding: 0 var(--sp-14); border: 0; border-radius: 12px;
  background: var(--forest-ink); color: var(--cream-paper);
  font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform .12s var(--ease), background-color .15s;
}
.btn:active { transform: scale(.97); background: var(--forest-shadow); }
.btn.soft { background: var(--cream-paper); color: var(--forest-ink); }
.btn.soft:active { background: var(--mint-veil); }
.btn.ghost { background: var(--keylime-wash); color: var(--forest-ink); }
.btn.line { background: transparent; color: var(--forest-ink); box-shadow: inset 0 0 0 1px var(--sage-mist); }
.btn.danger { background: transparent; color: #8a2d20; box-shadow: inset 0 0 0 1px #ecc9c2; }
.btn.wide { width: 100%; height: 52px; font-size: 12.5px; }
.btn.sm { height: 34px; padding: 0 var(--sp-11); font-size: 11px; border-radius: 10px; }
.stamp {
  height: var(--tap); padding: 0 var(--sp-11); border: 0; border-radius: 12px;
  background: var(--cream-paper); color: var(--forest-ink); font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px;
}
.stamp svg.i { width: 16px; height: 16px; }

/* ---------- lists ---------- */
.entry {
  display: flex; gap: var(--sp-14); align-items: flex-start; width: 100%; text-align: left;
  background: var(--keylime-wash); border: 0; border-radius: var(--radius-card);
  padding: var(--sp-14) var(--sp-18); margin-bottom: var(--sp-7);
}
.entry:active { background: var(--mint-veil); }
.entry .t { flex: 0 0 62px; font-weight: 600; color: var(--forest-ink); font-size: 13px; line-height: 1.6; }
.entry .x { flex: 1; min-width: 0; white-space: pre-wrap; word-break: break-word; line-height: 1.55; }

/* ---------- composer ---------- */
.composer {
  position: fixed; left: 0; right: 0; z-index: 25;
  bottom: calc(var(--tabbar) + env(safe-area-inset-bottom));
  background: rgba(255, 254, 252, .96); border-top: 1px solid var(--border-mist);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.composer .row { display: flex; gap: var(--sp-9); align-items: flex-end; padding: var(--sp-9) 0; }
.composer textarea {
  flex: 1; resize: none; min-height: var(--tap); max-height: 132px; border: 0; border-radius: 12px;
  background: var(--keylime-wash); padding: 11px 14px; font-size: 16px; line-height: 22px; height: var(--tap);
  overflow-y: auto; scrollbar-width: none;
}
.composer textarea::-webkit-scrollbar { display: none; }
.composer textarea:focus { outline: 2px solid var(--forest-ink); outline-offset: -2px; }
.composer .whenbtn { height: var(--tap); }
.composer .tagrow { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 0; scrollbar-width: none; }
.composer .tagrow::-webkit-scrollbar { display: none; }
.composer .tagrow .chip { flex: 0 0 auto; }
.chip.sm { min-height: 32px; padding: 0 12px; font-size: 12.5px; }
.composer [data-mic].rec { background: #f6e0dc; color: #7a2419; animation: pulse 1s ease-in-out infinite; }
.pad-composer { height: 124px; }
.entry .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.entry .tags .tag { background: var(--cream-paper); }

/* ---------- forms ---------- */
.fieldset { background: var(--keylime-wash); border-radius: var(--radius-card); padding: var(--card-pad); margin-bottom: var(--sp-9); }
.fieldset > .cap { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: var(--sp-11); }
label.f, .f {
  display: block; font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--forest-ink); opacity: .7; margin-bottom: 6px;
}
input[type=text], input[type=number], input[type=date], textarea.field, select {
  width: 100%; min-height: var(--tap); border: 1px solid var(--border-mist); border-radius: 12px;
  background: var(--cream-paper); padding: 10px 12px; font-size: 16px; min-width: 0;
  -webkit-appearance: none; appearance: none;
}
input[type=date] { display: block; }
textarea.field { min-height: 96px; resize: vertical; line-height: 1.5; }
input:focus, textarea.field:focus, select:focus { outline: 2px solid var(--forest-ink); outline-offset: -2px; }
::placeholder { color: var(--charcoal); opacity: .4; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-9); }
.grid3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .7fr); gap: var(--sp-9); }
.frow { margin-bottom: var(--sp-11); }
.timefield {
  width: 100%; height: var(--tap); border: 1px solid var(--border-mist); border-radius: 12px;
  background: var(--cream-paper); color: var(--charcoal); font-size: 16px; text-align: left;
  padding: 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 4px;
  white-space: nowrap; overflow: hidden;
}
@media (max-width: 400px) { .grid3 .timefield { font-size: 15px; } .grid3 .timefield svg.i { display: none; } }
.timefield .ph { opacity: .4; }
.timefield svg.i { width: 16px; height: 16px; opacity: .45; }
.readout {
  height: var(--tap); border-radius: 12px; background: var(--cream-paper); display: flex; align-items: center;
  padding: 0 12px; font-size: 16px; color: var(--forest-ink); font-weight: 600;
}
.check { display: flex; align-items: center; gap: 10px; min-height: var(--tap); font-size: 14.5px; }
.check input { width: 20px; height: 20px; accent-color: var(--forest-ink); }
.saved-note { font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--forest-ink); opacity: .55; }

/* ---------- ratings and chips ---------- */
.rate { margin-bottom: var(--sp-18); }
.rate:last-child { margin-bottom: 0; }
.rate .lab { font-family: var(--font-display); font-weight: 300; font-size: var(--text-subheading); color: var(--forest-ink); line-height: 1.2; }
.rate .sc { font-size: 11.5px; opacity: .62; margin: 2px 0 var(--sp-9); line-height: 1.45; }
.rate .btns { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.seg {
  height: var(--tap); border: 0; border-radius: 12px; background: var(--cream-paper); color: var(--forest-ink);
  font-size: 17px; transition: background-color .15s, transform .12s var(--ease);
}
.seg:active { transform: scale(.96); }
.seg[aria-pressed="true"] { background: var(--forest-ink); color: var(--cream-paper); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-7); }
.chip {
  min-height: 40px; padding: 0 var(--sp-14); border: 0; border-radius: var(--radius-pill);
  background: var(--cream-paper); color: var(--forest-ink); font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip[aria-pressed="true"] { background: var(--forest-ink); color: var(--cream-paper); font-weight: 600; }
.chip[aria-pressed="false"].muted { opacity: .55; text-decoration: line-through; }
.chip svg.i { width: 15px; height: 15px; }

/* ---------- week ---------- */
.weekpick { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 var(--sp-7); scrollbar-width: none; scroll-snap-type: x proximity; }
.weekpick::-webkit-scrollbar { display: none; }
.weekpick .chip { flex: 0 0 auto; background: var(--keylime-wash); scroll-snap-align: center; }
.weekpick .chip[aria-pressed="true"] { background: var(--forest-ink); color: var(--cream-paper); font-weight: 600; }
.panel { background: var(--slate-hush); border-radius: var(--radius-card); padding: var(--sp-9); margin-bottom: var(--sp-14); }
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--cream-paper); border-radius: var(--radius-nav); }
table.grid { border-collapse: collapse; font-size: 12px; min-width: 100%; }
table.grid th, table.grid td { border: 1px solid var(--border-mist); padding: 6px 8px; text-align: center; white-space: nowrap; }
table.grid thead th {
  background: var(--keylime-wash); font-size: var(--text-caption); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--forest-ink); line-height: 1.3; vertical-align: bottom;
}
table.grid thead th .sub { display: block; font-weight: 400; opacity: .62; font-size: 9px; letter-spacing: .02em; text-transform: none; }
table.grid .dt { text-align: left; position: sticky; left: 0; z-index: 2; background: var(--keylime-wash); }
table.grid thead th.dt { z-index: 3; }
table.grid td.dt b { font-size: 13px; color: var(--forest-ink); }
table.grid td.dt span { display: block; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--forest-ink); opacity: .55; }
table.grid td.v { font-variant-numeric: tabular-nums; font-size: 12.5px; }
table.grid td.late { color: #6b4a0e; font-weight: 600; }
table.grid td.miss { color: #b3412f; font-weight: 600; }
table.grid td.opt { opacity: .35; }
table.grid td.off { background: repeating-linear-gradient(-45deg, transparent, transparent 3px, var(--border-mist) 3px, var(--border-mist) 5px); }
table.grid tr.today td { background: var(--mint-veil); }
table.grid tr.today td.dt { background: var(--sage-mist); }
table.grid tr.future td { opacity: .45; }
table.grid tr.click { cursor: pointer; }
table.grid td.sym { text-align: left; white-space: normal; min-width: 110px; max-width: 150px; font-size: 10.5px; line-height: 1.35; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; opacity: .7; margin: -4px 0 var(--sp-14); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-7); }
.stats div { background: var(--keylime-wash); border-radius: var(--radius-card); padding: var(--sp-14) var(--sp-9); text-align: center; }
.stats b { display: block; font-size: var(--text-caption); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--forest-ink); opacity: .62; margin-bottom: 6px; }
.stats .n { font-weight: 300; font-size: 28px; line-height: 1; color: var(--forest-ink); }
.stats .n small { font-size: 12px; opacity: .55; }

/* ---------- setup ---------- */
.med { background: var(--keylime-wash); border-radius: var(--radius-card); margin-bottom: var(--sp-9); overflow: hidden; }
.med.off { background: var(--border-mist); }
.med .head { display: flex; align-items: center; gap: var(--sp-11); padding: var(--sp-14) var(--sp-14) var(--sp-14) var(--sp-18); }
.med .head .nm { flex: 1; min-width: 0; }
.med .head .nm .n1 { font-size: 16px; color: var(--forest-ink); }
.med .head .nm .n2 { font-size: 12.5px; opacity: .72; margin-top: 2px; }
.timeline { list-style: none; margin: 0; padding: 0 var(--sp-18) var(--sp-11); }
.timeline li { position: relative; padding: 6px 0 6px 20px; font-size: 13px; line-height: 1.4; }
.timeline li::before { content: ''; position: absolute; left: 4px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--forest-ink); }
.timeline li::after { content: ''; position: absolute; left: 7px; top: 22px; bottom: -8px; width: 1px; background: var(--sage-mist); }
.timeline li:last-child::after { display: none; }
.timeline li.future::before { background: var(--cream-paper); box-shadow: inset 0 0 0 1.5px var(--forest-ink); }
.timeline li.stop::before { background: #9aa39b; }
.timeline li .d { font-weight: 600; color: var(--forest-ink); }
.timeline li .now { margin-left: 6px; }
.med .tools { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--sp-14) var(--sp-14) var(--sp-18); }
.rowlist { background: var(--keylime-wash); border-radius: var(--radius-card); overflow: hidden; margin-bottom: var(--sp-9); }
.rowlist .r {
  display: flex; align-items: center; gap: var(--sp-11); width: 100%; min-height: 52px; border: 0; background: none;
  padding: var(--sp-9) var(--sp-18); text-align: left; border-bottom: 1px solid rgba(15, 62, 23, .07);
}
.rowlist .r:last-child { border-bottom: 0; }
.rowlist .r .grow { flex: 1; min-width: 0; }
.rowlist .r .sub { font-size: 12px; opacity: .65; }
.rowlist button.r:active { background: var(--mint-veil); }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13.5px; }
.kv span:first-child { opacity: .7; }

/* ---------- tab bar ---------- */
nav.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: rgba(255, 254, 252, .97); border-top: 1px solid var(--border-mist);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
}
nav.tabs .in { display: flex; max-width: 640px; margin: 0 auto; }
nav.tabs button {
  flex: 1; height: 52px; border: 0; background: none; color: var(--forest-ink); opacity: .5;
  font-size: var(--text-caption); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 12px; transition: opacity .15s, background-color .15s;
}
nav.tabs button svg.i { width: 22px; height: 22px; }
nav.tabs button[aria-selected="true"] { opacity: 1; background: var(--keylime-wash); }

/* ---------- sheets ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 50; background: rgba(12, 47, 16, .28);
  opacity: 0; transition: opacity .22s var(--ease);
}
.scrim.on { opacity: 1; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; margin: 0 auto; max-width: 560px;
  background: var(--cream-paper); border-radius: 20px 20px 0 0;
  padding: 8px var(--sp-18) calc(var(--sp-18) + env(safe-area-inset-bottom));
  transform: translateY(105%); transition: transform .28s var(--ease);
  max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
}
.sheet.on { transform: none; }
@media (min-width: 700px) {
  .sheet { bottom: auto; top: 50%; border-radius: 20px; transform: translateY(-40%) scale(.98); opacity: 0;
           transition: transform .22s var(--ease), opacity .22s; width: calc(100% - 40px); }
  .sheet.on { transform: translateY(-50%); opacity: 1; }
}
.sheet .grab { width: 38px; height: 5px; border-radius: 3px; background: var(--border-mist); margin: 2px auto 10px; }
.sheet h3 {
  font-family: var(--font-display); font-weight: 300; font-size: 24px; color: var(--forest-ink);
  margin: 0 0 2px; line-height: 1.2;
}
.sheet .sub { font-size: 13px; opacity: .7; margin-bottom: var(--sp-14); }
.sheet .actions { display: flex; gap: var(--sp-9); margin-top: var(--sp-18); }
.sheet .actions .btn { flex: 1; height: 50px; }
.sheet .quick { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--sp-11) 0 0; justify-content: center; }
.sheet .divider { height: 1px; background: var(--border-mist); margin: var(--sp-14) 0; }
@media (prefers-reduced-motion: reduce) {
  .sheet, .scrim, .dose, .progress .bar i { transition: none; }
}

/* ---------- time wheel ---------- */
.wheel {
  position: relative; display: flex; justify-content: center; gap: 4px; height: 220px;
  margin: var(--sp-7) 0 0; user-select: none; -webkit-user-select: none;
}
.wheel::before {  /* selection band */
  content: ''; position: absolute; left: 0; right: 0; top: 90px; height: 40px;
  background: var(--keylime-wash); border-radius: 12px; pointer-events: none;
}
.wheel::after {   /* fade top and bottom */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(var(--cream-paper), rgba(255, 254, 252, 0) 38%, rgba(255, 254, 252, 0) 62%, var(--cream-paper));
}
.wheel .col {
  position: relative; width: 76px; height: 220px; overflow-y: scroll; scroll-snap-type: y mandatory;
  scrollbar-width: none; overscroll-behavior: contain; outline: none; border-radius: 12px;
}
.wheel .col.ap { width: 64px; }
.wheel .col::-webkit-scrollbar { display: none; }
.wheel .col:focus-visible { box-shadow: inset 0 0 0 2px var(--forest-ink); }
.wheel .col .pad { height: 90px; }
.wheel .col .it {
  height: 40px; line-height: 40px; text-align: center; scroll-snap-align: center;
  font-size: 22px; color: var(--forest-ink); font-variant-numeric: lining-nums tabular-nums; cursor: pointer;
}
.wheel .col.ap .it { font-size: 15px; font-weight: 600; letter-spacing: .06em; }
.wheel .colon { align-self: center; font-size: 22px; color: var(--forest-ink); z-index: 1; margin-top: -2px; }
.wheel-read { text-align: center; font-size: 13px; opacity: .7; margin-top: 4px; min-height: 20px; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; z-index: 60; transform: translate(-50%, 16px);
  bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 16px);
  display: flex; align-items: center; gap: 14px; max-width: calc(100vw - 32px);
  background: var(--forest-ink); color: var(--cream-paper); border-radius: 14px;
  padding: 10px 10px 10px 16px; font-size: 13.5px; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .25s var(--ease); box-shadow: 0 8px 24px rgba(12, 47, 16, .18);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast.above-composer { bottom: calc(var(--tabbar) + env(safe-area-inset-bottom) + 80px); }
.toast .undo {
  border: 0; background: rgba(255, 254, 252, .14); color: var(--cream-paper); border-radius: 9px;
  height: 32px; padding: 0 12px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
}
.toast .msg { padding: 6px 0; }

/* ---------- connect screen ---------- */
.connect { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: var(--sp-35) 0; }
.connect .logo { width: 64px; height: 64px; border-radius: 16px; margin-bottom: var(--sp-18); }
.connect h1 { font-family: var(--font-display); font-weight: 300; font-size: 38px; line-height: 1.1; color: var(--forest-ink); margin: 0 0 var(--sp-9); }
.connect p { margin: 0 0 var(--sp-21); opacity: .75; }
.qr { background: #fff; border-radius: 12px; padding: 12px; display: inline-block; }
.qr svg { display: block; width: 200px; height: 200px; }
.boot { min-height: 60vh; display: flex; align-items: center; justify-content: center; color: var(--forest-ink); opacity: .5;
        font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* ---------- segmented switch ---------- */
.segment { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; margin-top: 14px;
           background: var(--keylime-wash); border-radius: 12px; }
.segment button { height: 36px; border: 0; border-radius: 9px; background: transparent; color: var(--forest-ink);
                  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.segment button[aria-selected="true"] { background: var(--cream-paper); box-shadow: 0 1px 2px rgba(15, 62, 23, .08); }

/* ---------- badges ---------- */
nav.tabs button { position: relative; }
nav.tabs .badge {
  position: absolute; top: 4px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 5px;
  border-radius: 9px; background: #c0503f; color: #fff; font-size: 10px; font-style: normal; font-weight: 700;
  line-height: 17px; letter-spacing: 0; text-align: center;
}

/* ================================================================
   Dark theme - an extension of the palette for the 10 pm dose, chosen by
   the user (2026-09-17). Same roles, night values: surfaces step up in
   lightness instead of down, and Forest Ink becomes a pale mint so every
   "ink" use (headings, filled buttons, selected states) stays the accent.
   ================================================================ */
html[data-theme="dark"] {
  color-scheme: dark;
  --forest-ink: #cfe7d3;
  --forest-shadow: #b1dbb8;
  --sage-mist: #2f5b36;
  --keylime-wash: #16301b;
  --mint-veil: #1f3f25;
  --slate-hush: #1f3238;
  --cream-paper: #0d1f10;
  --charcoal: #e4ebe5;
  --border-mist: #24392a;
}
html[data-theme="dark"] header.top,
html[data-theme="dark"] nav.tabs,
html[data-theme="dark"] .composer { background: rgba(13, 31, 16, .94); }
html[data-theme="dark"] .btn, html[data-theme="dark"] .pill, html[data-theme="dark"] .seg[aria-pressed="true"],
html[data-theme="dark"] .chip[aria-pressed="true"], html[data-theme="dark"] .tag.ink { color: #0d1f10; }
html[data-theme="dark"] .btn.soft, html[data-theme="dark"] .btn.ghost, html[data-theme="dark"] .btn.line { color: var(--forest-ink); }
html[data-theme="dark"] .btn.danger { color: #f2a99d; box-shadow: inset 0 0 0 1px #6b3028; }
html[data-theme="dark"] .tag.warn { background: #4a3a14; color: #f1d58f; }
html[data-theme="dark"] .dose .status.late, html[data-theme="dark"] table.grid td.late { color: #f1d58f; }
html[data-theme="dark"] table.grid td.miss { color: #f2a99d; }
html[data-theme="dark"] .dose.skipped { background: #1a261c; }
html[data-theme="dark"] .toast { background: #cfe7d3; color: #0d1f10; box-shadow: 0 8px 24px rgba(0, 0, 0, .4); }
html[data-theme="dark"] .toast .undo { background: rgba(13, 31, 16, .12); color: #0d1f10; }
html[data-theme="dark"] .scrim { background: rgba(0, 0, 0, .5); }
html[data-theme="dark"] .wheel::after { background: linear-gradient(var(--cream-paper), rgba(13, 31, 16, 0) 38%, rgba(13, 31, 16, 0) 62%, var(--cream-paper)); }
html[data-theme="dark"] .sync[data-s="error"] { background: #4a1f19; color: #f2a99d; }
html[data-theme="dark"] .qr { background: #fff; }
html[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator { filter: invert(1); }

/* ---------- hubs ---------- */
.rowlist.hub .r { min-height: 64px; }
.hubicon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; background: var(--cream-paper);
           display: inline-flex; align-items: center; justify-content: center; color: var(--forest-ink); }
.rowlist.hub .r > svg.i:last-child { opacity: .4; width: 18px; height: 18px; }

/* ---------- refills ---------- */
.refill { background: var(--keylime-wash); border-radius: var(--radius-card); padding: 14px 14px 14px 18px; margin-bottom: 9px; }
.refill.low { background: #f3e3c3; }
.refill.out { background: #f6e0dc; }
.refill.idle { background: var(--border-mist); }
.rf-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rf-name { font-size: 16.5px; color: var(--forest-ink); font-weight: 600; }
.rf-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 10px; }
.rf-nums b { display: block; font-size: 30px; font-weight: 300; line-height: 1; color: var(--forest-ink); }
.rf-nums span { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.rf-bar { height: 6px; border-radius: 3px; background: rgba(15, 62, 23, .1); overflow: hidden; }
.rf-bar i { display: block; height: 100%; background: var(--forest-ink); border-radius: 3px; }
.refill.low .rf-bar i { background: #b7861f; }
.refill.out .rf-bar i { background: #b3412f; }
.rf-sub { font-size: 13px; margin-top: 8px; }
.rf-sub.dim { opacity: .65; margin-top: 3px; font-size: 12px; }
.rf-tools { margin-top: 10px; }
html[data-theme="dark"] .refill.low { background: #3b3113; }
html[data-theme="dark"] .refill.out { background: #3d1c17; }

/* ---------- diary tags and voice ---------- */
.composer .tagline { padding-top: 8px; }
.composer .chosen { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.composer .chosen::-webkit-scrollbar { display: none; }
.tagchip { flex: 0 0 auto; background: var(--forest-ink) !important; color: var(--cream-paper) !important; gap: 6px; }
.tagchip.med { background: var(--slate-hush) !important; color: var(--charcoal) !important; }
.tagchip span { opacity: .7; font-size: 15px; line-height: 1; }
.composer [data-tags].has { background: var(--forest-ink); color: var(--cream-paper); }
.taggroup { margin-bottom: 14px; }
.taggroup .chips { gap: 6px; }
.chip.medchip[aria-pressed="false"] { background: var(--keylime-wash); }
.entry .tag.medtag { background: var(--slate-hush); }
.entry .tx { display: block; }
.voice { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 10px; margin: 2px 0 6px;
         border-radius: 17px; background: var(--forest-ink); color: var(--cream-paper); font-size: 13px; font-weight: 600; cursor: pointer; }
.voice svg.i { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.voice.playing { background: var(--sage-mist); color: var(--forest-ink); }
.voice.loading { opacity: .6; }
.rec { text-align: center; padding: 6px 0 4px; }
.rec-time { font-size: 40px; font-weight: 300; color: var(--forest-ink); }
.rec-bar { height: 4px; background: var(--border-mist); border-radius: 2px; overflow: hidden; margin: 6px 20px 18px; }
.rec-bar i { display: block; height: 100%; width: 0; background: #c0503f; }
.rec-btn { width: 76px; height: 76px; border-radius: 50%; border: 3px solid var(--forest-ink); background: var(--cream-paper);
           display: inline-flex; align-items: center; justify-content: center; }
.rec-btn span { width: 52px; height: 52px; border-radius: 50%; background: #c0503f; transition: all .2s var(--ease); }
.rec-btn.on span { width: 28px; height: 28px; border-radius: 6px; }
.rec audio { width: 100%; margin-top: 14px; }
.rec-hint { margin-top: 10px; }
.pad-composer { height: 110px; }
.sheet .chip[aria-pressed="false"] { background: var(--keylime-wash); }
.btn:disabled { opacity: .4; }