/* Tokens in one place. When the design package's Kit panel arrives, these values
   change and nothing else does. The names are the brand system's: sand for the
   pebble, sage/mauve/sky for the three sources, sun and blush for the fire eyes,
   ink-3 for quiet text. Flat fills only — the system has no gradients. */
:root {
  --sand: #e3d7c3;
  --sage: #a8bca0;
  --mauve: #c2adc9;
  --sky: #a6c4d8;
  --sun: #e5ad4a;
  --blush: #d4867f;
  --ink: #2b2825;
  --ink-2: #5b554e;
  --ink-3: #8b8279;
  --paper: #fbf8f3;
  --card: #ffffff;
  --hairline: #e6e0d6;
  --radius: 10px;
  --serif: ui-serif, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 16px/1.5 var(--sans);
  -webkit-tap-highlight-color: rgba(212,134,127,.18);
  overscroll-behavior-y: contain;
}
h1, h2, h3 { font-family: var(--serif); font-weight: 600; text-wrap: balance; margin: 0 0 .5rem; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 .75rem; }
a { color: var(--ink); }

/* 390px is the reference width the design was checked at. Nothing may overflow it. */
.wrap { max-width: 430px; margin: 0 auto; padding: 1rem 1rem 5.5rem; }

.preview-bar {
  background: var(--sun); color: #3a2c08; font-size: .8rem; font-weight: 600;
  padding: .5rem 1rem; text-align: center; letter-spacing: .01em;
}

/* The pet */
.pet { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.pet .core { fill: var(--sand); }
.pet .src--sage { fill: var(--sage); }
.pet .src--mauve { fill: var(--mauve); }
.pet .src--sky { fill: var(--sky); }
.pet .eye { fill: var(--ink); }
.pet .eye-closed { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.pet .mouth { fill: var(--ink); }
.pet .mouth-line { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.pet .flame-outer { fill: var(--sun); }
.pet .flame-core { fill: var(--blush); }
.pet--tired { transform: translateY(6px); }

.signal-line { text-align: center; color: var(--ink-2); font-size: .95rem; margin: .25rem 0 0; }
.streak { text-align: center; color: var(--ink-3); font-size: .85rem; margin: .1rem 0 1rem; }

/* A card is one moment. 16px between moments; hairlines only inside one. */
.moment { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1rem; margin-bottom: 16px; }
.moment + .moment { margin-top: 0; }
.moment-header { font-size: .8rem; color: var(--ink-3); letter-spacing: .02em; margin-bottom: .6rem; }
.observation { padding: .75rem 0; }
.observation + .observation { border-top: 1px solid var(--hairline); }
.claim { margin: 0 0 .35rem; }
/* Rule 1: provenance sits next to the claim, not in a footnote. */
.provenance { font-size: .82rem; color: var(--ink-3); margin: 0 0 .5rem; }

/* Every control is at least 44x44. This one is 40px visible with an invisible
   2px extension, which is how the design reaches the target without a fat pill. */
.wrong {
  appearance: none; background: transparent; cursor: pointer;
  color: var(--ink-3); border: 1px solid var(--hairline); border-radius: var(--radius);
  font: inherit; font-size: .85rem; padding: 0 .75rem;
  height: 40px; position: relative; display: inline-flex; align-items: center;
}
.wrong::after { content: ""; position: absolute; inset: -2px; }
.wrong:hover, .wrong:focus-visible { color: var(--blush); border-color: var(--blush); background: rgba(212,134,127,.08); outline: none; }
.wrong:active { background: var(--blush); border-color: var(--blush); color: #fff; }

.state { display: inline-block; font-size: .78rem; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--hairline); color: var(--ink-3); }
.state--stale { border-color: var(--sun); color: #8a6414; }
.state--revoked { border-color: var(--blush); color: #8f4a45; }
.maturity { font-size: .75rem; color: var(--ink-3); border: 1px solid var(--hairline); border-radius: 999px; padding: .1rem .45rem; }

.notice { background: #fff8e8; border: 1px solid var(--sun); border-radius: var(--radius); padding: .75rem; font-size: .9rem; margin-bottom: 16px; }

.source-row { display: flex; align-items: center; gap: .75rem; padding: .85rem 0; border-bottom: 1px solid var(--hairline); min-height: 44px; }
.source-mark { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px; }
.source-mark--sage { background: var(--sage); } .source-mark--mauve { background: var(--mauve); } .source-mark--sky { background: var(--sky); }
.source-name { font-weight: 600; }
.source-meta { font-size: .8rem; color: var(--ink-3); }
.grow { flex: 1; }

.btn { appearance: none; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 0 1.1rem; font: inherit; cursor: pointer;
  border-radius: var(--radius); border: 1px solid var(--ink); background: var(--ink); color: var(--paper); text-decoration: none; }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--hairline); }
.btn--danger { background: transparent; color: var(--blush); border-color: var(--blush); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.tabs { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--card); border-top: 1px solid var(--hairline); }
.tabs a, .tabs span { flex: 1; text-align: center; padding: .75rem .25rem env(safe-area-inset-bottom); min-height: 44px;
  font-size: .8rem; color: var(--ink-3); text-decoration: none; display: flex; align-items: center; justify-content: center; }
.tabs a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.tabs span { opacity: .4; }

.domains li { margin-bottom: 1rem; }
.domains strong { font-family: var(--serif); }