/* Memory Companion — styles.
 *
 * DESIGN RULES, AND WHY
 * ---------------------
 * Built for someone reading it in a hurry, possibly stressed, possibly one-handed on
 * a phone. So:
 *   - Base font is 17px minimum and medication names are larger again. Nothing
 *     important is small.
 *   - Touch targets are at least 44px tall, the iOS minimum for reliable tapping.
 *   - Light and dark both supported via CSS custom properties, because an app opened
 *     at 3am should not be a white rectangle.
 *   - Colour is never the only signal: "OVERDUE" is a word, not just a red tint,
 *     so it still reads correctly with any form of colour blindness.
 *   - Safe-area insets respected so content is not under the notch or home bar when
 *     installed to the home screen.
 * No framework, no CSS build step. One file.
 */

:root {
  --bg: #f4f6f8;
  --card: #ffffff;
  --ink: #16212b;
  --ink-muted: #5b6b7a;
  --line: #d7dee5;
  --accent: #1b3a5c;
  --accent-ink: #ffffff;
  --urgent: #8c2f1a;
  --urgent-bg: #fdeeea;
  --ok: #1d5e3f;
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #11161b;
    --card: #1a222a;
    --ink: #e8edf2;
    --ink-muted: #9aa8b6;
    --line: #2c3842;
    --accent: #7fb0e0;
    --accent-ink: #0d1318;
    --urgent: #ff9d85;
    --urgent-bg: #3a1f18;
    --ok: #7fd1a5;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
main { max-width: 680px; margin: 0 auto; padding: 0 16px 48px; }

/* Navigation — horizontally scrollable on narrow screens rather than wrapping or
   shrinking, so targets stay full size. */
.nav {
  display: flex; gap: 4px; align-items: center;
  overflow-x: auto; padding: 8px 12px;
  background: var(--accent);
  position: sticky; top: 0; z-index: 10;
}
.nav a, .nav button {
  color: var(--accent-ink); background: transparent; border: 0;
  text-decoration: none; font-size: 16px; font-weight: 600;
  padding: 12px 14px; border-radius: 8px; min-height: 44px;
  white-space: nowrap; cursor: pointer;
}
.nav a[aria-current="page"] { background: rgba(255,255,255,0.18); }
.lock-form { margin: 0 0 0 auto; }

.screen-title {
  font-size: 1.5rem; margin: 20px 0 12px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
}
.clock { font-variant-numeric: tabular-nums; color: var(--ink-muted); font-size: 1.1rem; }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin: 0 0 16px;
}
.card h2 { margin: 0 0 12px; font-size: 1.05rem; text-transform: uppercase;
           letter-spacing: 0.04em; color: var(--ink-muted); }
.card.urgent { border-color: var(--urgent); background: var(--urgent-bg); }
.card.urgent h2 { color: var(--urgent); }
.card.allergy { border-left: 5px solid var(--urgent); }

.gate { max-width: 420px; margin: 48px auto; }
.gate h1 { margin-top: 0; }

ul.list, ul.big-list { list-style: none; margin: 0; padding: 0; }
ul.list > li, ul.big-list > li {
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
ul.list > li:last-child, ul.big-list > li:last-child { border-bottom: 0; }

/* Medication names get the largest type on the screen: this is the thing most
   likely to be read at a glance. */
ul.big-list > li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
                   font-size: 1.15rem; }
.slot-name { font-weight: 700; }
.slot-dose { color: var(--ink-muted); }
.slot-time { font-variant-numeric: tabular-nums; font-weight: 600;
             color: var(--ink-muted); min-width: 4.6em; display: inline-block; }

.tag {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
  padding: 3px 8px; border-radius: 999px; text-transform: uppercase;
  border: 1px solid currentColor;
}
.tag.overdue, .tag.due_now { color: var(--urgent); }
.tag.upcoming { color: var(--ink-muted); }
.tag.ok { color: var(--ok); }
.tag.off { color: var(--ink-muted); }

.muted { color: var(--ink-muted); }
.small { font-size: 0.85rem; }
.next { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
.error { color: var(--urgent); background: var(--urgent-bg); padding: 10px 12px;
         border-radius: 8px; }
.warn { margin: 0; padding: 10px 16px; background: var(--urgent-bg);
        color: var(--urgent); font-size: 0.85rem; }

label { display: block; margin: 12px 0 4px; font-weight: 600; font-size: 0.9rem; }
label.check { display: flex; align-items: center; gap: 8px; font-weight: 400; }
input, textarea, select {
  width: 100%; padding: 12px; min-height: 44px;
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 8px;
}
input[type="checkbox"] { width: auto; min-height: auto; }
textarea { resize: vertical; }

button, .btn-link {
  font: inherit; font-weight: 600; cursor: pointer;
  padding: 12px 16px; min-height: 44px;
  border-radius: 8px; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
                 width: 100%; margin-top: 16px; }
button.danger { color: var(--urgent); border-color: var(--urgent); background: transparent; }
button.small-btn { min-height: 32px; padding: 4px 10px; font-size: 0.8rem; margin-top: 6px; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

.inline-form { display: inline; }
.note-form textarea { font-size: 17px; }
.search-form { display: flex; gap: 8px; align-items: center; }
.search-form input { flex: 1; }
.search-form button, .search-form .btn-link { margin: 0; flex-shrink: 0; }

details { margin-top: 12px; }
summary { cursor: pointer; padding: 12px 0; font-weight: 600; color: var(--accent);
          min-height: 44px; display: flex; align-items: center; }

ul.notes li { white-space: pre-wrap; word-break: break-word; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
 * Checklist — the confirmation UI.
 *
 * The tick target is 48x48px, above the 44px iOS minimum, because this is the
 * control that gets used most and often one-handed in a hurry. It is a real
 * <button> inside its own <form>, so it works without JavaScript and is reachable
 * by keyboard and screen reader.
 *
 * A confirmed row is dimmed and struck through so the eye skips it: the point of
 * ticking something off is that it stops competing for attention.
 */
ul.checklist { list-style: none; margin: 0; padding: 0; }
ul.checklist > li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
ul.checklist > li:last-child { border-bottom: 0; }

.check-form { margin: 0; flex-shrink: 0; }
button.tick {
  width: 48px; height: 48px; min-height: 48px; padding: 0;
  border-radius: 50%; border: 2px solid var(--ink-muted);
  background: var(--card); color: var(--ok);
  font-size: 1.4rem; line-height: 1; font-weight: 700;
}
button.tick:active { transform: scale(0.94); }
button.tick.ticked { border-color: var(--ok); background: var(--ok); color: var(--card); }

.check-body { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; flex: 1; }
.check-body .slot-name { font-size: 1.1rem; }

li.state-taken .check-body .slot-name,
li.state-taken .check-body .slot-dose { text-decoration: line-through; opacity: 0.6; }
li.state-due_now .check-body .slot-name { font-weight: 800; }

.tag.taken { color: var(--ok); }
.tag.unconfirmed { color: var(--urgent); }

/* Confirmation screen.
 *
 * One question, big answers. The buttons are deliberately large and stacked rather
 * than a tidy row: this screen appears when someone has just opened the app, possibly
 * just woken up, and the cost of a mis-tap here is a false record of a medication
 * dose. Generous targets and clear separation are worth the vertical space.
 */
.confirm-headline { margin: 0 0 20px; display: flex; flex-direction: column; gap: 4px; }
.confirm-name { font-size: 1.6rem; line-height: 1.2; }
.confirm-dose { font-size: 1.2rem; color: var(--ink); }
.confirm-sched { color: var(--ink-muted); }
.confirm-form { margin: 0; }
button.big-answer {
  width: 100%; min-height: 60px; margin-top: 12px;
  font-size: 1.05rem; text-align: center;
}
/* "I don't remember" is a legitimate answer, so it is not styled as a destructive
   action -- just visually distinct from the affirmative ones. */
button.unsure-answer { border-style: dashed; color: var(--ink-muted); }
button.later { width: 100%; margin-top: 4px; color: var(--ink-muted); border: 0; background: transparent; }
.tag.unsure { color: var(--ink-muted); border-style: dashed; }
li.state-unsure .check-body .slot-name { opacity: 0.75; }

/* --- Tasks, captures and suggestions ------------------------------------- */
/* Kind tags are readable text, not colour alone: colour is never the only carrier
   of meaning here, which matters on a screen read in a hurry. */
.tag.todo { color: var(--ink-muted); }
.tag.call { color: var(--accent); }
.tag.commitment { color: var(--accent); border-style: dashed; }
.tag.date { color: var(--ink-muted); border-style: dashed; }
.tag.pending { color: var(--ink-muted); }
.tag.done { color: var(--ok); }
.tag.failed { color: var(--urgent); }

.stack { display: flex; flex-direction: column; gap: 0.6rem; }
.stack.tight { gap: 0.35rem; }
.stack label { font-weight: 600; font-size: 0.9rem; }
.stack label.small { font-weight: 400; font-size: 0.8rem; color: var(--ink-muted); }

.check-body .detail { display: block; }

/* Each suggestion is a visually separate decision, so two of them cannot be
   confused for one while tapping quickly. */
.suggestions { list-style: none; padding: 0; }
.suggestion { border: 1px solid var(--line); border-radius: 10px;
              padding: 0.75rem; margin-bottom: 0.75rem; }
.suggestion-head { margin: 0 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem;
                   align-items: center; }
.suggestion input[type="text"], .suggestion input:not([type]) { width: 100%; }

.context { white-space: pre-wrap; word-break: break-word; font-size: 0.8rem;
           background: var(--card-alt, rgba(0,0,0,0.04)); padding: 0.5rem;
           border-radius: 6px; max-height: 12rem; overflow: auto; }

/* A destructive control is a plain link, never a big button: it should take a
   deliberate aim to hit, not sit under the thumb next to "done". */
.danger-link { background: none; border: 0; padding: 0; font: inherit;
               color: var(--urgent); text-decoration: underline; cursor: pointer; }
.primary-link { font-weight: 600; }

/* Confirmation that something worked (e.g. a record restored). Green border plus
   words, so it does not rely on colour alone. Added 2026-10-05. */
.notice { color: var(--ok); border: 2px solid var(--ok); border-radius: var(--radius);
          padding: 10px 12px; font-weight: 600; }

/* Phone-width menu (added 2026-10-05). With 8 tabs, the sideways-scrolling bar hid
   Photos, Medical, Gaps and History off the right edge of an iPhone screen, with no
   sign they existed -- a menu item you can't see is one you forget is there. On
   narrow screens the tabs wrap onto extra rows so every one is always visible. The
   bar stops being pinned at that width, so three rows of menu do not cover a third
   of the screen while scrolling. Tap targets stay 44px tall. */
@media (max-width: 600px) {
  .nav { flex-wrap: wrap; overflow-x: visible; position: static; padding: 6px 8px; gap: 2px; }
  .nav a, .nav button { padding: 10px 11px; font-size: 15px; }
}

/* Compact checklist rows (added 2026-10-05).
   The owner asked for five rows in the space three used to take. Each row was
   ~113pt tall because time, name, dose and status each wrapped onto their own line
   beside a 48pt circle. Now two lines -- "08:00  Morning Tablet" / "500 mg  TAKEN
   08:00" -- beside a 36pt circle, ~56pt per row.
   What is deliberately NOT shrunk:
   - The tap area. The circle is drawn 36pt but the button stays 44pt (the iOS
     minimum) via transparent padding, so it is no harder to hit.
   - The medication name: still the boldest, largest text in the row.
   Applies to every ul.checklist (today's doses, "earlier, no record", to-dos), so
   all the tickable lists on the home screen look and behave the same. */
ul.checklist > li { padding: 6px 0; gap: 8px; align-items: center; }
button.tick {
  width: 44px; height: 44px; min-height: 44px;
  border: 4px solid transparent;            /* invisible part of the 44pt target */
  background-clip: padding-box;
  box-shadow: inset 0 0 0 2px var(--ink-muted);
  border-radius: 50%; font-size: 1.1rem;
}
button.tick.ticked { border-color: transparent; background: var(--ok);
                     background-clip: padding-box; /* the shorthand above resets it */
                     box-shadow: none; color: var(--card); }
.check-body.compact { display: block; line-height: 1.25; min-width: 0; }
.check-body.compact .line1 { display: block; }
.check-body.compact .slot-name { font-size: 1.05rem; }
.check-body.compact .line2 { display: flex; flex-wrap: wrap; align-items: baseline;
                             column-gap: 7px; row-gap: 2px;
                             font-size: 0.86rem; margin-top: 2px; }
.check-body.compact .line2 .slot-time { min-width: 0; color: var(--ink); }
.check-body.compact .line2 .tag { font-size: 0.64rem; padding: 1px 7px; }

/* Photos page, reader v2 (2026-10-06): two save buttons side by side, and a colour
   for "Good to know" that differs from the to-do kinds (plus its own words, so colour
   is never the only signal). */
.button-row { display: flex; gap: 8px; flex-wrap: wrap; }
.button-row button { flex: 1 1 140px; width: auto; margin-top: 8px; }
button.secondary { background: var(--card); color: var(--accent); border: 2px solid var(--accent); }
.tag.info { color: var(--ok); }
.suggestion textarea { width: 100%; font: inherit; }