/* Kept — the website is the thread.
   System font, system colors, nothing custom, no JavaScript.

   Values copied from the app:
     ThreadView      welcome block (title2), asks (title2 semibold, secondary), replies (body),
                     20 pt horizontal padding, 18 pt between turns
     Glass.swift     capsules, 48 pt circle buttons, SiriCard (radius 26, 48 pt icon disc)
     Motion.swift    smoothOut = cubic-bezier(0.22, 1, 0.36, 1), panel 400 ms, word 350 ms,
                     shimmer 2 s, base #7c7c7c / highlight #0d0d0d light, #9a9a9a / #f5f5f5 dark
   Appearance follows prefers-color-scheme. There is no toggle, because the phone doesn't
   have one either. */

:root {
  color-scheme: light dark;

  /* iOS system colors, light. Three of them are pulled a shade darker than the app's:
     systemBlue, systemGreen and secondaryLabel at 0.6 all sit under 4.5:1 on a white page,
     and a website has to clear WCAG AA where a phone screen gets to rely on the HIG.
     --accent stays true systemBlue; it is only ever a fill or a focus ring, never text. */
  --bg: #ffffff;
  --text: #000000;
  --secondary: rgba(60, 60, 67, 0.78);   /* 5.6:1 on white, 5.2:1 on a card */
  --tertiary: rgba(60, 60, 67, 0.3);     /* decoration only — never a sentence */
  --accent: #007aff;
  --link: #0066cc;                       /* 5.6:1 on white */
  --good: #1d7a35;                       /* 5.0:1 on a card */
  --glass-fill: rgba(0, 0, 0, 0.04);
  --glass-line: rgba(0, 0, 0, 0.10);
  --hairline: rgba(0, 0, 0, 0.08);
  --shimmer-base: #6a6a6a;
  --shimmer-high: #0d0d0d;

  --gutter: 20px;
  --measure: 680px;
  --smooth-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --text: #ffffff;
    /* Dark mode clears AA on the app's own values, so these are Apple's, untouched. */
    --secondary: rgba(235, 235, 245, 0.6);
    --tertiary: rgba(235, 235, 245, 0.3);
    --accent: #0a84ff;
    --link: #0a84ff;
    --good: #30d158;
    --glass-fill: rgba(255, 255, 255, 0.08);
    --glass-line: rgba(255, 255, 255, 0.14);
    --hairline: rgba(255, 255, 255, 0.12);
    --shimmer-base: #9a9a9a;
    --shimmer-high: #f5f5f5;
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.thread {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 44px var(--gutter) 64px;
}

/* Keyboard focus is visible everywhere, on every appearance. */
a:focus-visible,
.chip:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* — the welcome block: "hi. i'm kept." in title2, then the line in secondary — */

.welcome { margin: 0 0 8px; }

.welcome h1 {
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.2px;
  margin: 0 0 10px;
}

.lede {
  color: var(--secondary);
  margin: 0 0 10px;
  max-width: 36em;
}

.lede:last-child { margin-bottom: 0; }

/* — turns: your ask is the heading, the reply is the page — */

.turn { margin: 30px 0 0; }

.ask {
  font-size: 22px;
  font-weight: 600;
  color: var(--secondary);
  margin: 0 0 12px;
  letter-spacing: -0.2px;
}

.reply { margin: 0 0 12px; }
.reply:last-child { margin-bottom: 0; }

.reply strong { font-weight: 600; }

/* — glass, from Glass.swift: a capsule, a hairline, a soft fill — */

.capsule {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

.download { margin: 26px 0 8px; display: inline-flex; max-width: 100%; }

/* Apple requires the badge unmodified, with clear space around it. Size only. */
.download img {
  display: block;
  height: 44px;
  width: auto;
  margin: 2px 4px;
}

.requirements {
  color: var(--secondary);
  font-size: 15px;
}

/* — a card, from SiriCard: glass rounded rectangle, icon disc, title, detail lines, status — */

.card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  margin: 16px 0 0;
  border-radius: 26px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}

.card-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  /* the app's disc gradient, Glass.swift */
  background: linear-gradient(180deg, rgb(140, 166, 217), rgb(89, 115, 179));
  color: #ffffff;
  display: grid;
  place-items: center;
}

.card-icon svg { display: block; }

.card-body { flex: 1 1 auto; min-width: 0; }

.card-title {
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 4px;
}

.card-line {
  font-size: 15px;
  margin: 0 0 4px;
}

.card-line:last-child { margin-bottom: 0; }

.card-line.quiet { color: var(--secondary); }

.card-line .num {
  font-variant-numeric: tabular-nums;
}

.card-status {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 500;
  color: var(--secondary);
  padding-top: 2px;
}

.card-status.good { color: var(--good); }

/* two short lists side by side inside a card */
.card-split {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  margin: 8px 0 0;
}

.card-split > div { flex: 1 1 190px; min-width: 0; }

.card-split h3 {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--secondary);
  margin: 0 0 4px;
}

.card-split ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.card-split li {
  margin: 0 0 3px;
  padding-left: 15px;
  position: relative;
}

.card-split li::before {
  content: "·";
  position: absolute;
  left: 4px;
  color: var(--tertiary);
}

/* — the shimmer line, from ShimmerText: a band sweeps the glyphs once every two seconds — */

/* The band has to start and end on the base colour, not on transparent: the glyphs are filled
   with the gradient itself, so a transparent stop would punch a hole in the text. */
.shimmer {
  color: var(--shimmer-base);
  background-image: linear-gradient(
    90deg,
    var(--shimmer-base) 40%,
    var(--shimmer-high) 50%,
    var(--shimmer-base) 60%
  );
  background-size: 400% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 2s linear infinite;
}

@keyframes shimmer {
  to { background-position: -300% 0; }
}

/* — chips: what you might say next. Here they are links to the rest of the site. — */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.chip {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  color: var(--link);
  text-decoration: none;
  background: var(--glass-fill);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  transition: background 0.2s var(--smooth-out);
}

.chip:hover { background: var(--glass-line); }

/* — the bottom bar, as decoration only: menu dot, "Keep going…", send — */

.composer {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 44px 0 0;
  user-select: none;
}

.composer .dot,
.composer .send {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  display: grid;
  place-items: center;
  color: var(--text);
}

.composer .send {
  background: var(--accent);
  border-color: transparent;
  color: #ffffff;
}

.composer .field {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 18px;
  border-radius: 999px;
  color: var(--secondary);
  background: var(--glass-fill);
  border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.composer svg { display: block; }

/* — pages: privacy, terms, support — */

.page h1 {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 6px;
}

.page h2 {
  font-size: 17px;
  font-weight: 600;
  margin: 32px 0 8px;
}

.page h3 {
  font-size: 17px;
  font-weight: 600;
  color: var(--secondary);
  margin: 22px 0 6px;
}

.page p, .page li { margin: 0 0 12px; }
.page ul { margin: 0 0 12px; padding-left: 20px; }
.page li { padding-left: 2px; }

.dateline {
  color: var(--secondary);
  font-size: 15px;
  margin: 0 0 4px;
}

.todo {
  color: var(--link);
  font-weight: 600;
  letter-spacing: 0.4px;
}

/* the contact capsule on the support page */
.contact {
  margin: 18px 0 8px;
  display: inline-flex;
  max-width: 100%;
  font-size: 17px;
}

a { color: var(--link); }
a:hover { text-decoration: none; }

.back {
  display: inline-block;
  margin: 0 0 28px;
  color: var(--secondary);
  text-decoration: none;
  font-size: 15px;
}
.back:hover { color: var(--text); }

footer {
  margin: 56px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--hairline);
  color: var(--secondary);
  font-size: 15px;
}

footer a { color: var(--secondary); text-decoration: none; }
footer a:hover { color: var(--text); text-decoration: underline; }

footer .note {
  margin: 10px 0 0;
  color: var(--secondary);
}

/* — panel reveal: rises, fades in, sharpens. 400 ms, smooth-out, 60 ms apart. — */

@keyframes panelReveal {
  from { opacity: 0; filter: blur(4px); transform: translateY(14px); }
  to   { opacity: 1; filter: blur(0);   transform: translateY(0); }
}

.home .thread > * {
  animation: panelReveal 0.4s var(--smooth-out) both;
}

.home .thread > *:nth-child(1)  { animation-delay: 0s; }
.home .thread > *:nth-child(2)  { animation-delay: 0.06s; }
.home .thread > *:nth-child(3)  { animation-delay: 0.12s; }
.home .thread > *:nth-child(4)  { animation-delay: 0.18s; }
.home .thread > *:nth-child(5)  { animation-delay: 0.24s; }
.home .thread > *:nth-child(n+6) { animation-delay: 0.30s; }

.doc .thread {
  animation: panelReveal 0.4s var(--smooth-out) both;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .home .thread > *,
  .doc .thread { animation: none; }
  .shimmer {
    animation: none;
    background-image: none;
    -webkit-text-fill-color: currentColor;
    color: var(--secondary);
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* — narrow phones: the app's own 20 pt gutter, cards stay readable — */

@media (max-width: 420px) {
  .welcome h1, .ask { font-size: 21px; }
  .card { padding: 14px; gap: 12px; border-radius: 22px; }
  .card-icon { width: 42px; height: 42px; }
  .download { padding: 12px 14px; }
}

@media (min-width: 700px) {
  .thread { padding-top: 72px; }
}