/* 3 Questions — visual design.
 *
 * Intent: warm paper and ink. A private journal should feel like good stationery,
 * not a SaaS dashboard. Newsreader (self-hosted, OFL) carries the questions and
 * headings; the system sans handles interface chrome, where it is genuinely the best
 * choice on a phone.
 *
 * Mobile-first at 390px. No inline styles anywhere — the CSP forbids them.
 */

@font-face {
  font-family: 'Newsreader';
  src: url('/fonts/newsreader.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
  /* Latin only; the file is subset accordingly. */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Paper */
  --bg: #f7f4ee;
  --bg-tint: #efeae1;
  --surface: #fffdfa;
  --line: #e0d9cd;
  --line-soft: #ebe5da;
  --ink: #211e1a;
  --ink-soft: #4b453d;
  --muted: #857d72;
  --faint: #a89f92;

  /* Ink is the primary action; amber is the accent, used sparingly. */
  --accent: #a8601f;
  --accent-soft: #f0e4d5;
  --on-ink: #faf7f2;
  --good: #3f6b45;
  --danger: #9c3327;

  --r-lg: 18px;
  --r-md: 12px;
  --r-sm: 8px;

  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --tabbar-h: 3.6rem;

  --serif: 'Newsreader', ui-serif, Georgia, 'Times New Roman', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Warm black, not blue-black — the paper metaphor holds at night. */
    --bg: #15130f;
    --bg-tint: #1b1814;
    --surface: #1e1b16;
    --line: #322d26;
    --line-soft: #282420;
    --ink: #efe9df;
    --ink-soft: #cfc7ba;
    --muted: #968d80;
    --faint: #6f675c;

    --accent: #d99a4e;
    --accent-soft: #2a231a;
    --on-ink: #15130f;
    --good: #7fbf8a;
    --danger: #e58a7c;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* MUST come before any `display` rule below.
   `[hidden] { display: none }` lives in the browser's own stylesheet, and ANY author
   rule setting display overrides it, because author styles beat UA styles regardless
   of specificity. Without this, hidden panes render stacked on top of each other and
   the app looks catastrophically broken. Load-bearing. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

::selection { background: var(--accent-soft); color: var(--ink); }

/* --- shell ---------------------------------------------------------------- */

.page {
  width: 100%;
  max-width: 33rem;
  margin: 0 auto;
  padding: calc(var(--safe-top) + 1.75rem) 1.5rem calc(var(--tabbar-h) + var(--safe-bottom) + 2rem);
  animation: rise .3s cubic-bezier(.2, .7, .3, 1) both;
}

.page--center {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.75rem;
  padding-bottom: calc(var(--safe-bottom) + 2.5rem);
}

.pane {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  animation: rise .3s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* --- type ----------------------------------------------------------------- */

.center { text-align: center; }
.pad { padding: 3rem 0; }
.small { font-size: .8125rem; }
.muted { color: var(--muted); font-size: .9rem; line-height: 1.6; }
.error { color: var(--danger); font-size: .875rem; margin: 0; line-height: 1.5; }

.status {
  color: var(--muted);
  font-size: .8125rem;
  margin: 1rem 0 0;
  min-height: 1.2em;
  letter-spacing: .01em;
}
.status--saved { color: var(--good); }
/* Sits under the writing area as a field state, not a floating announcement. */
.status--right { text-align: right; margin: .5rem .25rem 0; }

.eyebrow {
  margin: 0;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}

.page__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -.015em;
}

.page__lede {
  margin: 0;
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.65;
  max-width: 30rem;
}

.textlink {
  color: var(--muted);
  font-size: .875rem;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
}
.textlink:hover { color: var(--accent); text-decoration-color: currentColor; }

/* --- landing / gate ------------------------------------------------------- */

.hero { text-align: center; }
.hero__mark {
  border-radius: 14px;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 2px rgb(33 30 26 / .12), 0 8px 24px -12px rgb(33 30 26 / .3);
}
.hero__title {
  margin: 0 0 1rem;
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.02em;
}
.hero__tag {
  margin: 0 auto;
  max-width: 24rem;
  color: var(--muted);
  font-size: .9375rem;
  line-height: 1.65;
}

.choices { display: flex; flex-direction: column; gap: .625rem; }

.choice {
  display: block;
  padding: 1.05rem 1.25rem;
  border-radius: var(--r-lg);
  background: var(--ink);
  color: var(--on-ink);
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .15s cubic-bezier(.2,.7,.3,1), box-shadow .15s ease;
  box-shadow: 0 1px 2px rgb(33 30 26 / .16), 0 10px 20px -14px rgb(33 30 26 / .5);
}
.choice:active { transform: scale(.99); }
.choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.choice__title { display: block; font-size: 1rem; font-weight: 600; letter-spacing: -.005em; }
.choice__sub { display: block; font-size: .8125rem; line-height: 1.5; opacity: .72; margin-top: .15rem; }

.choice--alt {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: none;
}
.choice--alt .choice__sub { color: var(--muted); opacity: 1; }

.gate-links {
  display: flex; align-items: center; justify-content: center; gap: .75rem;
}
.gate-links__dot { color: var(--faint); }

/* --- controls ------------------------------------------------------------- */

.stack { display: flex; flex-direction: column; gap: .75rem; }

.btn {
  /* 48px: comfortably above the 44px minimum for a reliable tap target. */
  min-height: 48px;
  padding: .8rem 1.25rem;
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .005em;
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  cursor: pointer;
  width: 100%;
  text-align: center;
  text-decoration: none;
  transition: transform .15s cubic-bezier(.2,.7,.3,1), opacity .15s ease;
}
.btn:active { transform: scale(.99); }
.btn:disabled, .btn--disabled { opacity: .4; cursor: not-allowed; transform: none; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.btn--primary {
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 600;
  box-shadow: 0 1px 2px rgb(33 30 26 / .16), 0 10px 20px -14px rgb(33 30 26 / .5);
}
.btn--quiet { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn--danger { background: none; color: var(--danger); border-color: var(--line); }
.btn--link {
  background: none; border: none; color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
  min-height: 40px; font-size: .875rem;
}
.btn--compact { width: auto; flex: 1; }

a.btn { display: block; line-height: 1.5; }

.field { display: flex; flex-direction: column; gap: .4rem; }
.field__label { font-size: .8125rem; font-weight: 600; letter-spacing: .01em; }
.field__hint { font-size: .78125rem; color: var(--muted); margin: 0; line-height: 1.5; }

.field__input {
  /* 16px minimum, or iOS Safari zooms the viewport on focus. */
  font-size: 16px;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: .85rem .9rem;
  min-height: 48px;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field__input::placeholder { color: var(--faint); }
.field__input:focus {
  outline: none;
  border-color: var(--ink-soft);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field__input--code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em; resize: vertical; line-height: 1.7;
}

.check {
  display: flex; gap: .7rem; align-items: flex-start;
  font-size: .875rem; line-height: 1.5; padding: .35rem 0;
  color: var(--ink-soft);
}
.check input { width: 21px; height: 21px; margin: 0; flex: none; accent-color: var(--accent); }

.code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1rem; line-height: 2.1; letter-spacing: .12em;
  text-align: center; word-break: break-all;
  background: var(--bg-tint);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  padding: 1.15rem .85rem;
  color: var(--ink);
  user-select: all;
}

/* --- passphrase dialog ---------------------------------------------------- */

.modal {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--bg);
  color: var(--ink);
  padding: 1.5rem;
  width: min(23rem, calc(100vw - 2.5rem));
  box-shadow: 0 24px 60px -20px rgb(33 30 26 / .45);
}
.modal::backdrop { background: rgb(21 19 15 / .55); backdrop-filter: blur(2px); }
.modal__title { margin: 0; font-family: var(--serif); font-size: 1.35rem; font-weight: 400; }
.modal__tag { margin: 0; color: var(--muted); font-size: .875rem; line-height: 1.6; }

/* --- today ---------------------------------------------------------------- */

/* Fills the viewport so the writing area grows into the space instead of leaving a
   dead gap beneath a short textarea. */
#screen-today {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.dayhead { margin-bottom: 1.5rem; }
.dayhead__date {
  margin: .35rem 0 0;
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -.015em;
  line-height: 1.15;
}

.dots { display: flex; gap: .4rem; margin-bottom: 1.75rem; }

.dot {
  flex: 1; height: 3px; padding: 0; border: none; border-radius: 2px;
  background: var(--line); cursor: pointer; position: relative;
  transition: background .25s ease, transform .25s ease;
}
/* The bar is 3px, but the tappable area needs to be finger-sized. */
.dot::after { content: ''; position: absolute; inset: -15px 0; }
.dot[data-state="answered"] { background: var(--faint); }
.dot[aria-selected="true"] { background: var(--accent); transform: scaleY(1.6); }
.dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }

.step { display: flex; flex-direction: column; flex: 1; animation: rise .25s ease both; }

.step__number {
  margin: 0 0 .6rem;
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent);
}

.step__question {
  display: block;
  margin-bottom: 1.25rem;
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}

.step__answer {
  /* Fills the remaining height so writing gets the whole screen. */
  flex: 1;
  font-size: 16px;
  font-family: var(--sans);
  line-height: 1.75;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-lg);
  padding: 1.1rem 1.15rem;
  width: 100%;
  min-height: 8rem;
  resize: none;
  overflow: auto;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.step__answer::placeholder { color: var(--faint); }
.step__answer:focus {
  outline: none;
  border-color: var(--ink-soft);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.stepnav { display: flex; gap: .625rem; margin-top: 1.25rem; }

/* --- review --------------------------------------------------------------- */

.review { animation: rise .3s ease both; }
.review__done { text-align: center; margin-bottom: 1.75rem; }
.review__tick {
  margin: 0 auto .75rem;
  width: 44px; height: 44px; line-height: 44px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.25rem;
}
.review__title {
  margin: 0 0 .35rem;
  font-family: var(--serif); font-size: 1.4rem; font-weight: 400;
}
.review__list { display: flex; flex-direction: column; gap: .625rem; margin-bottom: 1.5rem; }

.review__item {
  display: flex; flex-direction: column; gap: .4rem;
  width: 100%; text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1rem 1.1rem;
  font: inherit; color: inherit; cursor: pointer;
  transition: border-color .15s ease;
}
.review__item:hover { border-color: var(--faint); }
.review__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.review__q { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.3; color: var(--muted); }
.review__a { white-space: pre-wrap; font-size: .9375rem; line-height: 1.6; }
.review__a--empty { color: var(--faint); font-style: italic; }

/* --- history -------------------------------------------------------------- */

.history { display: flex; flex-direction: column; gap: .625rem; }

.entry {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.entry__toggle {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  background: none; border: none; color: var(--ink);
  font-family: var(--sans); font-size: .9375rem; font-weight: 600;
  text-align: left; padding: 1rem 1.1rem; min-height: 56px; cursor: pointer;
}
.entry__chev {
  color: var(--faint); font-size: 1.1rem; flex: none;
  transition: transform .2s cubic-bezier(.2,.7,.3,1);
}
.entry__toggle[aria-expanded="true"] .entry__chev { transform: rotate(90deg); }
.entry__preview {
  display: block; font-weight: 400; font-size: .8125rem;
  color: var(--muted); margin-top: .2rem; line-height: 1.5;
}
.entry__body { padding: .25rem 1.1rem 1.15rem; }
.entry__q {
  margin: 1rem 0 .25rem;
  font-family: var(--serif); font-size: 1.0625rem; line-height: 1.3; color: var(--muted);
}
.entry__a { margin: 0; white-space: pre-wrap; font-size: .9375rem; line-height: 1.65; }
.entry__a--empty { color: var(--faint); font-style: italic; }

/* --- settings ------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.25rem;
}
.card__title {
  margin: 0 0 .9rem;
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--faint);
}
.card__value { margin: 0 0 .5rem; font-family: var(--serif); font-size: 1.2rem; }

.devices { display: flex; flex-direction: column; margin-bottom: 1rem; }
.device {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line-soft);
}
.device:first-child { padding-top: 0; }
.device:last-child { border-bottom: none; }
.device__name { font-size: .9375rem; font-weight: 500; }
.device__meta { font-size: .78125rem; color: var(--muted); margin-top: .1rem; }
.device__remove {
  background: none; border: none; color: var(--danger);
  font-family: var(--sans); font-size: .8125rem; cursor: pointer;
  padding: .6rem; min-height: 44px;
}

/* --- invites (admin) ----------------------------------------------------- */

.invite-new { display: flex; flex-direction: column; gap: .6rem; margin: .9rem 0; }

.fresh {
  background: var(--accent-soft);
  border: 1px dashed var(--accent);
  border-radius: var(--r-md);
  padding: .9rem;
  margin-bottom: 1rem;
  display: flex; flex-direction: column; gap: .7rem;
}
.fresh__label {
  margin: 0;
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
}
.code--sm {
  font-size: .8125rem; line-height: 1.7; letter-spacing: .04em;
  padding: .7rem .6rem; border-style: solid;
}

.invites { display: flex; flex-direction: column; }
.invite {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .7rem 0; border-bottom: 1px solid var(--line-soft);
}
.invite:last-child { border-bottom: none; }
.invite__title { font-size: .9375rem; font-weight: 500; }
.invite__meta { font-size: .78125rem; color: var(--muted); margin-top: .1rem; }
.invite__right { display: flex; align-items: center; gap: .25rem; flex: none; }

.badge {
  font-size: .625rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .2rem .45rem; border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.badge--open { color: var(--good); border-color: var(--good); }
.badge--used { color: var(--faint); }
.badge--revoked, .badge--expired { color: var(--faint); text-decoration: line-through; }

.facts { list-style: none; margin: 0 0 .85rem; padding: 0; }
.facts__item {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: .55rem 0; border-bottom: 1px solid var(--line-soft); font-size: .9375rem;
}
.facts__item:last-child { border-bottom: none; }
.facts__item span {
  font-size: .6875rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
}
.facts__item--no span { color: var(--good); }
.facts__item--yes span { color: var(--faint); }

/* --- tab bar -------------------------------------------------------------- */

.tabbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  /* Plain colour first: a browser without color-mix would fall through to
     transparent and leave the bar unreadable over scrolling content. */
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  backdrop-filter: saturate(1.4) blur(16px);
  border-top: 1px solid var(--line-soft);
  padding-bottom: var(--safe-bottom);
  z-index: 10;
}
.tab {
  flex: 1;
  min-height: var(--tabbar-h);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2rem;
  background: none; border: none; color: var(--faint);
  font-family: var(--sans); font-size: .625rem;
  letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
  transition: color .15s ease;
}
.tab__icon {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.tab[aria-current="page"] { color: var(--ink); }
.tab[aria-current="page"] .tab__label { font-weight: 600; }
.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

/* --- wider screens -------------------------------------------------------- */

@media (min-width: 40rem) {
  .page { padding-top: calc(var(--safe-top) + 3.5rem); }
  .hero__title { font-size: 3rem; }
  .step__question { font-size: 2rem; }
  .dayhead__date { font-size: 2rem; }
  .page__title { font-size: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, .page, .pane, .step, .review { animation: none !important; transition: none !important; }
}