:root {
  --paper: #efe7d8;
  --card: #fbf7ef;
  --card-muted: #f3ebdc;
  --ink: #2a241c;
  --muted: #7a7266;
  --faint: #a0978a;
  --rule: #c9bfae;
  --dash: #b8ab95;
  --shadow: 0 1px 0 rgba(42, 36, 28, 0.08), 0 8px 24px rgba(42, 36, 28, 0.07);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font-family: "Manrope", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #7a5a2e; }
a:hover { color: #4e3a1e; }
button { font: inherit; color: inherit; }

.page { max-width: 640px; margin: 0 auto; padding: 36px 36px 64px; display: flex; flex-direction: column; gap: 22px; }
@media (max-width: 520px) { .page { padding: 24px 18px 48px; } }

.title { font-family: "Newsreader", Georgia, "Times New Roman", serif; font-size: 34px; font-weight: 400; letter-spacing: -0.01em; line-height: 1.1; margin: 0; }
.muted { font-size: 13px; color: var(--muted); margin: 4px 0 0; }
.center { text-align: center; }
.error { color: #9b3d1f; font-size: 13px; margin: 0; }

.header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.link { background: none; border: 0; padding: 8px 0; font-size: 13px; color: var(--muted); cursor: pointer; }
.link:hover { color: var(--ink); }

.search { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border-radius: 999px; background: var(--card); box-shadow: var(--shadow); color: var(--muted); }
.search input { flex: 1; border: 0; background: none; font: inherit; font-size: 14px; color: var(--ink); outline: none; min-width: 0; }
.search input::placeholder { color: var(--faint); }

.actions { display: flex; align-items: center; gap: 16px; }

/* Archive control, quiet until you reach for it. Always visible, because
   there is no hover on a phone. */
.archive {
  width: 32px; height: 32px; flex: none; padding: 0;
  border: 0; background: none; border-radius: 999px; cursor: pointer;
  color: var(--faint);
  display: flex; align-items: center; justify-content: center;
}
.archive:hover { color: var(--ink); background: rgba(42, 36, 28, 0.06); }
.archive:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.card.leaving { opacity: 0; transform: translateY(-4px); transition: opacity .18s ease, transform .18s ease; }

.notes { display: flex; flex-direction: column; gap: 14px; }
.day { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.day:first-child { margin-top: 0; }

.card { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); }
.card.no-transcript { background: var(--card-muted); box-shadow: none; border: 1px dashed var(--dash); }
.transcript { font-family: "Newsreader", Georgia, "Times New Roman", serif; font-size: 21px; line-height: 1.35; margin: 0; overflow-wrap: anywhere; }
.no-transcript .transcript { font-style: italic; color: var(--muted); }

.player { display: flex; align-items: center; gap: 12px; }
.play { width: 44px; height: 44px; flex: none; border-radius: 999px; border: 0; background: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.play svg { display: block; }
.play .pause-icon { display: none; }
.card.playing .play .play-icon { display: none; }
.card.playing .play .pause-icon { display: block; }
.bars { flex: 1; height: 28px; display: flex; align-items: center; gap: 3px; cursor: pointer; }
.bars span { width: 3px; flex: none; border-radius: 2px; background: var(--rule); }
.bars span.done { background: var(--ink); }
.card.no-audio .bars { visibility: hidden; }
.card.no-audio .play { visibility: hidden; }
.meta { font-size: 12px; color: var(--muted); white-space: nowrap; }

.login { display: flex; flex-direction: column; gap: 8px; padding-top: 10vh; }
.login-form { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--muted); }
.field input { height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--rule); background: var(--card); font: inherit; font-size: 15px; color: var(--ink); }
.field input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.button { height: 46px; border-radius: 999px; border: 0; background: var(--ink); color: var(--card); font-weight: 600; cursor: pointer; }
.button.secondary { background: var(--card); color: var(--ink); box-shadow: var(--shadow); align-self: center; padding: 0 28px; }
.button.google { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.details { margin-top: 6px; }
.details summary { font-size: 13px; color: var(--muted); cursor: pointer; list-style: none; }
.details summary::-webkit-details-marker { display: none; }
.details summary:hover { color: var(--ink); }
.details form { margin-top: 14px; }