/* Remembrall: the real app's styles. Cottagecore tokens from the prototype (docs/blueprint.md §9).
   Fonts are the iPhone's own: Iowan Old Style (display), SF Rounded (body), Bradley Hand (notes). */
:root {
  --paper: #F6F2E6;
  --card: #FCFAF3;
  --ink: #3A3327;
  --muted: #776E5C;
  --line: rgba(58, 51, 39, .13);
  --line-strong: rgba(58, 51, 39, .28);
  --moss: #56693F;
  --moss-ink: #4A5C35;
  --on-moss: #F6F2E6;
  --sage: #A9B797;
  --chip: #ECE7D6;
  --rosehip: #B3402F;
  --honey: #B9862A;
  --honey-wash: #F2E5C4;
  --mist: #C3D2BD;
  --mist2: #EEF2EA;
  --glass-in: rgba(255, 255, 255, .6);
  --glass-out: rgba(178, 196, 176, .65);
  --shadow: rgba(40, 32, 20, .45);
  --sky: rgba(255, 240, 205, .45);
  --display: 'Iowan Old Style', 'Palatino', Georgia, serif;
  --body: ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, sans-serif;
  --hand: 'Bradley Hand', 'Segoe Print', cursive;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #151A28; --card: #1F2537; --ink: #ECE6D4; --muted: #A9A6BA;
    --line: rgba(236, 230, 212, .12); --line-strong: rgba(236, 230, 212, .27);
    --moss: #A6C28A; --moss-ink: #BDD3A4; --on-moss: #151A28; --sage: #61745C; --chip: #2A3146;
    --rosehip: #EC8670; --honey: #E8C16A; --honey-wash: rgba(232, 193, 106, .16);
    --mist: #8DA3BF; --mist2: #3F4B68; --glass-in: rgba(255, 255, 255, .14); --glass-out: rgba(120, 140, 200, .3);
    --shadow: rgba(0, 0, 0, .6); --sky: rgba(70, 92, 168, .5);
    color-scheme: dark;
  }
}
@property --smoke { syntax: '<color>'; inherits: true; initial-value: #C3D2BD; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--paper) linear-gradient(to bottom, var(--sky), transparent 420px) no-repeat;
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2.5px solid var(--moss); outline-offset: 2px; }
.noscript { padding: 24px; }

.app {
  max-width: 560px; margin: 0 auto;
  padding-inline: max(20px, env(safe-area-inset-left)) max(20px, env(safe-area-inset-right));
  padding-block: calc(env(safe-area-inset-top) + 28px) calc(env(safe-area-inset-bottom) + 32px);
  display: flex; flex-direction: column; gap: 22px;
}

/* Hero */
.hero { display: grid; justify-items: center; gap: 12px; text-align: center; padding-top: 12px; }
.wordmark { font-family: var(--display); font-style: italic; font-weight: 400; font-size: 44px; line-height: 1.05; letter-spacing: -.01em; }
.lede { color: var(--muted); max-width: 30ch; text-wrap: balance; }
.badge { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--honey); border: 1px solid color-mix(in srgb, var(--honey) 45%, transparent); border-radius: 999px; padding: 3px 10px; }

/* The orb (CSS fallback underneath the WebGL canvas) */
.orb {
  --s: 44px; --smoke: var(--mist);
  position: relative; display: inline-block; flex: none;
  width: var(--s); height: var(--s); border-radius: 50%; border: 0; padding: 0;
  background: radial-gradient(circle at 50% 58%, var(--glass-in) 0, var(--glass-out) 100%);
  box-shadow: inset 0 calc(var(--s) * -.12) calc(var(--s) * .25) rgba(0, 0, 0, .16), 0 calc(var(--s) * .1) calc(var(--s) * .4) color-mix(in srgb, var(--smoke) 55%, transparent);
  transition: --smoke 1.4s ease;
}
.orb--gold { --smoke: var(--honey); }
.orb--red { --smoke: var(--rosehip); }
.orb--xl { --s: 132px; }
.orb.has-gl { background: transparent; box-shadow: 0 calc(var(--s) * .12) calc(var(--s) * .5) color-mix(in srgb, var(--smoke) 48%, transparent); }
.orb .orb-gl { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; display: block; touch-action: none; }
.orb.css-flare { animation: cssflare .8s ease; }
@keyframes cssflare { 30% { filter: brightness(1.5); transform: scale(1.05); } }

/* Install guide */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--moss); color: var(--on-moss); font-weight: 800; }
.steps b { font-weight: 800; }
.steps .sub { display: block; color: var(--muted); font-size: 14px; margin-top: 2px; }
.share-glyph { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; color: var(--moss-ink); }
.notes { display: grid; gap: 6px; color: var(--muted); font-size: 14px; text-align: center; }
.address { font-family: var(--display); font-size: 20px; text-align: center; word-break: break-all; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 14px; background: var(--card); }

/* Cards and buttons */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 16px 16px 14px; display: grid; gap: 10px; box-shadow: 0 10px 22px -18px var(--shadow); }
.card h2 { font-family: var(--display); font-weight: 400; font-style: italic; font-size: 22px; }
.btn { border: 0; border-radius: 16px; padding: 13px 18px; font-weight: 800; font-size: 16px; background: var(--moss); color: var(--on-moss); }
.btn--quiet { background: transparent; color: var(--moss-ink); border: 1px solid var(--line-strong); }
.btn:active { transform: translateY(1px); }

/* Notifications (M2) */
.form { display: grid; gap: 10px; }
.field { display: grid; gap: 5px; }
.field > span { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 800; }
.field input { width: 100%; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); border-radius: 14px; padding: 12px 14px; font: inherit; font-size: 17px; }
#setup-code { font-family: var(--display); letter-spacing: .08em; text-transform: uppercase; }
.btn--big { width: 100%; padding: 16px 18px; font-size: 18px; }
.btn[disabled] { opacity: .55; }
.row { display: flex; flex-wrap: wrap; gap: 8px; }
.row .btn { flex: 1 1 140px; }
.ok-line { font-weight: 800; color: var(--moss-ink); }
.status { font-size: 14px; color: var(--muted); min-height: 1em; }
.status.ok { color: var(--moss-ink); }
.status.warn { color: var(--honey); }
.status.bad { color: var(--rosehip); }
.log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.log li { display: grid; gap: 1px; padding: 9px 12px; border-radius: 12px; background: color-mix(in srgb, var(--chip) 70%, transparent); }
.log small { color: var(--muted); font-variant-numeric: tabular-nums; }
.log .log-sent span { color: var(--moss-ink); }
.log .log-dead span, .log .log-failed span { color: var(--rosehip); }
.log .log-retry span, .log .log-pending span { color: var(--honey); }

/* Diagnostics */
.diag { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 12px; margin: 0; font-size: 14px; }
.diag dt { color: var(--muted); }
.diag dd { margin: 0; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.diag .ok { color: var(--moss-ink); }
.diag .warn { color: var(--honey); }
.diag .bad { color: var(--rosehip); }
.hint { color: var(--muted); font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}