:root {
  --navy: #1b2a4a;
  --gold: #c9a227;
  --cream: #f7f3e8;
  --ink: #22262b;
  --muted: #6b7280;
  --green: #2e7d32;
  --amber: #b98500;
  --red: #c92a2a;
  --grey: #868e96;
  --card: #ffffff;
  --bg: #f4f5f7;
  --border: #e3e5e8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 3rem;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

header, section, .hero {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 1rem;
}

header {
  background: var(--navy);
  color: var(--cream);
  max-width: none;
  padding: max(env(safe-area-inset-top), 0.75rem) 1rem 0.75rem;
}
header h1 { margin: 0; font-size: 1.25rem; }
.header-meta { font-size: 0.85rem; opacity: 0.85; }

.hero { text-align: center; padding-top: 20vh; }

h2 { font-size: 1rem; margin: 1.5rem 0 0.5rem; }
h3 { font-size: 0.9rem; margin: 0.75rem 0 0.25rem; }

button.primary {
  background: var(--navy);
  color: var(--cream);
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.4rem;
  font-size: 1rem;
  cursor: pointer;
}
button.primary:disabled { opacity: 0.6; }
button.linklike {
  background: none; border: none; color: inherit;
  text-decoration: underline; cursor: pointer; font-size: 0.85rem;
  opacity: 0.85; padding: 0 0 0 0.5rem;
}

textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem;
  font: inherit;
  resize: vertical;
}
.journal-actions { margin-top: 0.5rem; }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
}
.tile {
  background: var(--card);
  border-radius: 10px;
  border-left: 6px solid var(--grey);
  padding: 0.6rem 0.75rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.tile-green { border-left-color: var(--green); }
.tile-amber { border-left-color: var(--amber); }
.tile-red   { border-left-color: var(--red); }
.tile-grey  { border-left-color: var(--grey); }
.tile-head { display: flex; justify-content: space-between; font-weight: 600; }
.tile-green .tile-state { color: var(--green); }
.tile-amber .tile-state { color: var(--amber); }
.tile-red   .tile-state { color: var(--red); }
.tile-grey  .tile-state { color: var(--grey); }
.tile-due { font-size: 0.75rem; color: var(--muted); }
.tile-detail { font-size: 0.8rem; margin-top: 0.25rem; overflow-wrap: anywhere; }

.digest {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
}
.digest summary { cursor: pointer; font-weight: 600; }
.digest-link { font-weight: 400; font-size: 0.8rem; margin-left: 0.5rem; }
.followup { font-size: 0.8rem; margin: -0.25rem 0 0.5rem 0.75rem; }

.md { font-size: 0.9rem; overflow-wrap: anywhere; }
.md pre { overflow-x: auto; background: #f0f1f3; padding: 0.5rem; border-radius: 6px; }
.md blockquote { border-left: 3px solid var(--gold); margin-left: 0; padding-left: 0.75rem; color: var(--muted); }
.md a { color: var(--navy); }

#attention .md, #recent-log .md {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.25rem 0.75rem;
}

.banner {
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  margin: 0.5rem auto;
  max-width: 640px;
  font-size: 0.9rem;
}
.banner-ok   { background: #e6f4ea; color: var(--green); }
.banner-warn { background: #fdf3d7; color: #7a5b00; }
.banner-err  { background: #fdecec; color: var(--red); }

.section-error {
  background: #fdecec; color: var(--red);
  border-radius: 8px; padding: 0.5rem 0.75rem; font-size: 0.85rem;
}
.muted { color: var(--muted); font-size: 0.9rem; }