/* Shell styles only. A feature's own CSS is injected by its module, so adding
   a feature edits no existing file — see public/features/<id>/<id>.js.

   The palette is indigo rather than MyHealthApp's emerald, on purpose: both
   apps sit on the same home screen and open to the same layout, and the colour
   is the fastest way to know which one you're in. */
:root {
  --bg: #0f172a;
  --surface: #1e293b;
  --surface-2: #334155;
  --text: #f1f5f9;
  --muted: #94a3b8;
  --accent: #818cf8;
  --accent-2: #6366f1;
  --on-accent: #131739;
  --danger: #ef4444;
  --radius: 16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overscroll-behavior-y: none;
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.tiny { font-size: 12px; }
.error { color: var(--danger); font-size: 14px; margin-top: 8px; min-height: 18px; }

input, button, textarea, select { font: inherit; }
input, textarea, select {
  background: var(--surface-2);
  border: 1px solid transparent;
  color: var(--text);
  border-radius: 12px;
  padding: 14px;
  width: 100%;
  outline: none;
}
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
textarea { resize: vertical; }
select {
  cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2394a3b8' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
  padding-right: 40px;
}
button {
  cursor: pointer;
  border: none;
  border-radius: 12px;
  padding: 14px 18px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
}
button.secondary { background: var(--surface-2); color: var(--text); }
button.danger { background: transparent; color: var(--danger); }

/* Login */
.login {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px;
}
.login-card { width: 100%; max-width: 360px; text-align: center; }
.login-card .logo {
  width: 72px; height: 72px; margin: 0 auto 12px; border-radius: 20px;
  background: linear-gradient(160deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center; font-size: 34px; color: #fff;
}
.login-card h1 { font-size: 22px; margin: 8px 0 2px; }
#login-form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }

/* Vault (unlock / first-time setup) — see public/vault.js. Reuses the login
   card, since it is the same kind of moment: a door before the app. */
.vault-alt { width: 100%; margin-top: 12px; font-size: 14px; padding: 12px; }
#vault-recovery { margin-top: 8px; }
#vault-recovery button { width: 100%; margin-top: 16px; }
#vault-recovery button:disabled { opacity: .4; cursor: default; }
/* The recovery code is read off a screen and written onto paper, so it is
   spaced out and monospaced — a misread character here costs the notes. */
.vault-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 19px; font-weight: 700; letter-spacing: 1px; line-height: 1.7;
  background: var(--surface); border-radius: 12px; padding: 16px 10px;
  margin: 16px 0; word-break: break-all; user-select: all; -webkit-user-select: all;
}
.vault-confirm {
  display: flex; align-items: center; gap: 10px; text-align: left;
  color: var(--muted); font-size: 14px;
}
.vault-confirm input { width: auto; flex: none; }

/* App shell */
#app { padding-top: var(--safe-top); padding-bottom: calc(72px + var(--safe-bottom)); max-width: 560px; margin: 0 auto; min-height: 100dvh; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; position: sticky; top: 0; background: var(--bg); z-index: 5;
}
.date-label { font-size: 18px; font-weight: 700; }
.nav-btn { background: var(--surface); color: var(--text); width: 40px; height: 40px; padding: 0; font-size: 22px; line-height: 1; }
.sub { font-size: 12px; color: var(--muted); }
.section-title { font-weight: 700; font-size: 15px; color: var(--text); }
.empty { text-align: center; color: var(--muted); padding: 40px 16px; }
.bar { height: 8px; background: var(--surface-2); border-radius: 99px; margin: 12px 0 6px; overflow: hidden; }
.bar-fill { height: 100%; width: 0%; background: var(--accent); border-radius: 99px; transition: width .3s ease; }
.bar-fill.over { background: var(--danger); }

/* Settings */
.settings { padding: 16px; display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
.settings label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 14px; }
.settings hr { border: none; border-top: 1px solid var(--surface-2); margin: 8px 0; width: 100%; }

/* Collapsible section — see collapsible() in ui.js */
.sec { background: var(--surface); border-radius: var(--radius); overflow: hidden; }
.sec-head {
  width: 100%; background: transparent; color: var(--text); border-radius: 0;
  display: flex; align-items: center; gap: 10px; padding: 16px; text-align: left;
}
.sec-head:active { background: var(--surface-2); }
.sec-title { flex: 1; font-weight: 700; font-size: 15px; }
.sec-chevron { color: var(--muted); font-size: 20px; line-height: 1; flex: none; transition: transform .2s ease; }
.sec.open .sec-chevron { transform: rotate(90deg); }
.sec-body { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.sec-body > .muted.tiny:first-child { margin-top: -4px; }

/* Home screen tiles */
.home-bar { align-items: flex-start; }
/* The home header is one line — the day and date. Its own class, not
   .date-label: that one also titles every feature screen and both shared
   tabs, so sizing it up here would size those up too. */
.home-date { font-size: 24px; font-weight: 800; letter-spacing: -0.3px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px 16px; }
.tile {
  background: var(--surface); border-radius: var(--radius); padding: 14px;
  color: var(--text); text-align: left; font: inherit; display: block; width: 100%;
}
.tile:active { background: var(--surface-2); }
.tile.wide { grid-column: span 2; }
.tile-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tile-head .name { font-size: 13px; color: var(--muted); }
.tile-head svg {
  width: 18px; height: 18px; flex: none;
  stroke: var(--muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.tile-head .chev { margin-left: auto; width: 16px; height: 16px; }
.tile .big { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.1; }
/* The optional word after a big number ("42 notes"). Small enough that it
   stays on the number's line — at 26px it wraps and the tile grows taller
   than the one beside it. */
.tile .big .suffix { font-size: 14px; font-weight: 700; letter-spacing: 0; color: var(--muted); margin-left: 5px; }
.tile .row { display: flex; align-items: baseline; gap: 10px; }
.tile .row .unit { font-size: 13px; color: var(--muted); }
.tile .row .right { margin-left: auto; font-size: 13px; }
.tile .sub { margin-top: 3px; }
/* Opted into by a tile whose detail is a long fixed string — pinned to one
   line so it cannot wrap and make the tile taller than its neighbour. */
.tile .sub.small {
  font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile .bar { margin: 12px 0 0; height: 5px; }
.tile.failed {
  display: flex; align-items: center; justify-content: center; min-height: 92px; text-align: center;
}

/* Feature screens + shared tab sections */
.day-bar { position: static; padding-top: 4px; }
/* History stacks flat lists, so features there need a divider between them.
   Settings stacks collapsible cards, which separate themselves — a rule for
   both would draw a stray line between two cards. */
#history-body .feature-section + .feature-section { border-top: 1px solid var(--surface-2); margin-top: 8px; }
#settings-body .feature-section + .feature-section .settings { padding-top: 0; }

/* Bottom nav */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 10;
  display: flex; background: var(--surface); border-top: 1px solid var(--surface-2);
  padding-bottom: var(--safe-bottom); max-width: 560px; margin: 0 auto;
}
.nav-item {
  flex: 1; background: transparent; color: var(--muted); border-radius: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 600; padding: 10px 0;
}
.nav-item svg {
  width: 22px; height: 22px;
  stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.nav-item.active { color: var(--accent); }

/* Sheet */
.sheet { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.sheet-card {
  position: relative; width: 100%; max-width: 560px; background: var(--surface);
  border-radius: 22px 22px 0 0; padding: 10px 18px calc(24px + var(--safe-bottom));
  animation: slideup .22s ease;
  /* A sheet is anchored to the bottom, so a form taller than the screen would
     grow off the top edge with its first field unreachable. Cap it and let it
     scroll instead. dvh keeps the cap honest while mobile browser chrome
     moves; the vh line above is the fallback for iOS before 16.4. */
  max-height: 88vh;
  max-height: 88dvh;
  /* Vertical only. `overflow-y: auto` alone makes the other axis `auto` too
     (CSS won't pair `visible` with anything else), which lets the sheet be
     dragged sideways. Pin it. */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
@keyframes slideup { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-handle { width: 40px; height: 4px; background: var(--surface-2); border-radius: 99px; margin: 6px auto 12px; }
.sheet-card h2 { margin: 4px 0 14px; font-size: 18px; }
.sheet-actions { display: flex; gap: 12px; margin-top: 4px; }
.sheet-actions button { flex: 1; }

/* Home screen tile manager in settings (order + show/hide) */
.tile-mgr-row {
  display: flex; align-items: center; gap: 10px; background: var(--surface);
  border-radius: 12px; padding: 10px 14px; margin-bottom: 8px;
}
.tile-mgr-row label { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.tile-mgr-row input { width: auto; }
.tile-mgr-name { font-weight: 600; color: var(--text); }
.tile-mgr-name.muted { color: var(--muted); font-weight: 400; }
.tile-mgr-row button {
  background: var(--surface-2); color: var(--text); padding: 6px 12px; font-size: 14px; flex: none;
}
.tile-mgr-row button:disabled { opacity: 0.35; }