/* =============================================================================
   zooDo — product site
   One stylesheet for every page. No build step, no CDN, no web fonts.

   Built to vibe/DESIGN-apple.md: the tile rhythm, the spacing scale, the
   typographic ladder (17px body, weight 300/400/600/700 with 500 absent,
   negative tracking at display sizes), the pill CTA grammar, and the rule that
   there is exactly ONE drop-shadow in the system and it belongs to product
   imagery.

   ONE DELIBERATE DEPARTURE. The spec's single accent is Apple's Action Blue
   (#0066cc). zooDo's brand is a pencil-sketched lion on cream paper, and Apple
   blue on that palette reads as a mistake rather than as a decision. So the
   accent role is bound to the app's own green (AppColors.check, #5C7A3D) and
   the surfaces to the app's paper and night tones. The *rule* is kept exactly
   as written — there is still precisely one accent, used for every interactive
   element and nothing else. To go back to Apple blue, change --accent and
   --accent-on-dark below and nothing else.
   ============================================================================= */

:root {
  /* --- accent: the single interactive colour ------------------------------ */
  --accent: #5C7A3D;            /* AppColors.check — every link, every pill   */
  --accent-focus: #6B8C48;      /* focus ring only                            */
  --accent-on-dark: #A8C97A;    /* the dark-tile variant; never on light      */
  --on-accent: #ffffff;

  /* --- surfaces ------------------------------------------------------------ */
  --canvas: #ffffff;
  --parchment: #F6F1E7;         /* AppColors.cream                            */
  --pearl: #FDFBF6;             /* AppColors.paper — ghost-button fill        */
  --tile-1: #241C16;            /* AppColors.nightSurface                     */
  --tile-2: #2F251D;            /* AppColors.nightCard — micro-step lighter   */
  --tile-3: #1E1712;            /* micro-step darker, bottom of the stack     */
  --black: #000000;             /* global nav only                            */

  /* --- ink ----------------------------------------------------------------- */
  --ink: #3A2C21;               /* AppColors.ink                              */
  --ink-muted-80: #5C4A3B;
  --ink-muted-48: #7A6857;      /* AppColors.inkSoft — fine print             */
  --on-dark: #F1E7D9;           /* AppColors.nightInk                         */
  --on-dark-muted: #BCAE9C;
  --pencil: #B9A992;            /* AppColors.pencil — the unchecked checkbox  */

  /* --- hairlines ----------------------------------------------------------- */
  --divider-soft: #EFE9DD;
  --hairline: #E3DACA;

  /* --- radii --------------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 18px;
  --r-pill: 9999px;

  /* --- spacing ------------------------------------------------------------- */
  --s-xxs: 4px;
  --s-xs: 8px;
  --s-sm: 12px;
  --s-md: 17px;
  --s-lg: 24px;
  --s-xl: 32px;
  --s-xxl: 48px;
  --s-section: 80px;

  /* --- type ---------------------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui,
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display",
          system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* The one shadow in the system. Product imagery only — never a card, never
     a button, never text. */
  --product-shadow: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;
}

/* ============================================================ base ========= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;          /* 17, not 16 — the brand's reading pace */
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: -0.374px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

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

:focus-visible {
  outline: 2px solid var(--accent-focus);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 16px; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

/* ============================================================ nav ========== */

.global-nav {
  background: var(--black);
  color: #ffffff;
  height: 44px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.12px;
}
.global-nav .row {
  max-width: 1024px; margin: 0 auto; height: 44px;
  display: flex; align-items: center; gap: 20px;
  padding: 0 var(--s-lg);
}
.global-nav a { color: #ffffff; opacity: .85; }
.global-nav a:hover { opacity: 1; text-decoration: none; }
.global-nav .brand { font-weight: 600; opacity: 1; letter-spacing: -0.2px; }
.global-nav .spacer { flex: 1; }

/* The one "utility rect" grammar — 8px radius, never a pill. */
.btn-utility {
  background: var(--ink); color: #ffffff;
  font-size: 14px; line-height: 1.29; letter-spacing: -0.224px;
  padding: 8px 15px; border-radius: var(--r-sm);
  display: inline-block; border: 0; cursor: pointer;
}
.btn-utility:active { transform: scale(0.95); }
.global-nav .btn-utility { background: #2b2b2b; padding: 6px 12px; }

.sub-nav {
  position: sticky; top: 0; z-index: 40;
  /* Opaque first: color-mix is recent enough that an older browser should get a
     solid bar rather than a transparent one with text scrolling under it. */
  background: var(--parchment);
  background: color-mix(in srgb, var(--parchment) 80%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}
.sub-nav .row {
  max-width: 1024px; margin: 0 auto; min-height: 52px;
  display: flex; align-items: center; gap: var(--s-lg);
  padding: 0 var(--s-lg);
}
.sub-nav .name {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 600; line-height: 1.19; letter-spacing: 0.231px;
  color: var(--ink);
}
.sub-nav .name a { color: inherit; }
.sub-nav .links {
  display: flex; gap: var(--s-md); margin-left: auto;
  font-size: 14px; line-height: 1.29; letter-spacing: -0.224px;
}
.sub-nav .links a { color: var(--ink-muted-80); }
.sub-nav .links a[aria-current="page"] { color: var(--accent); }

/* ============================================================ buttons ====== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--on-accent);
  font-size: 17px; font-weight: 400; letter-spacing: -0.374px; line-height: 1.2;
  padding: 11px 22px; border-radius: var(--r-pill);
  border: 1px solid var(--accent); cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.95); }

.btn-ghost {
  background: transparent; color: var(--accent); border: 1px solid var(--accent);
}
.tile-dark .btn-ghost { color: var(--accent-on-dark); border-color: var(--accent-on-dark); }

/* ============================================================ tiles ======== */

/* Full-bleed, edge to edge, zero radius. The colour change IS the divider —
   there are no borders and no gaps between tiles. */
.tile { padding: var(--s-section) var(--s-lg); }
.tile-light      { background: var(--canvas);    color: var(--ink); }
.tile-parchment  { background: var(--parchment); color: var(--ink); }
.tile-dark       { background: var(--tile-1);    color: var(--on-dark); }
.tile-dark-2     { background: var(--tile-2);    color: var(--on-dark); }
.tile-dark-3     { background: var(--tile-3);    color: var(--on-dark); }
.tile-dark a, .tile-dark-2 a, .tile-dark-3 a { color: var(--accent-on-dark); }

.inner { max-width: 1024px; margin: 0 auto; }
.inner-narrow { max-width: 740px; margin: 0 auto; }
.center { text-align: center; }

/* ============================================================ type ========= */

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; }

.hero-display {
  font-size: 56px; line-height: 1.07; letter-spacing: -0.28px;
}
.display-lg { font-size: 40px; line-height: 1.1; letter-spacing: 0; }
.display-md {
  font-family: var(--font);
  font-size: 34px; line-height: 1.25; letter-spacing: -0.374px; font-weight: 600;
}
.lead {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 400; line-height: 1.14; letter-spacing: 0.196px;
  margin: var(--s-md) 0 0;
}
.lead-airy {
  font-size: 24px; font-weight: 300; line-height: 1.5; letter-spacing: 0;
  margin: var(--s-lg) 0 0;
}
.tagline {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 600; line-height: 1.19; letter-spacing: 0.231px;
}
.caption { font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; }
.caption-strong { font-size: 14px; font-weight: 600; line-height: 1.29; letter-spacing: -0.224px; }
.fine-print { font-size: 12px; line-height: 1.4; letter-spacing: -0.12px; color: var(--ink-muted-48); }
.muted { color: var(--ink-muted-48); }
.tile-dark .muted, .tile-dark-2 .muted, .tile-dark-3 .muted { color: var(--on-dark-muted); }

p { margin: var(--s-md) 0 0; }
.tile > .inner > :first-child, .tile > .inner-narrow > :first-child { margin-top: 0; }

/* ============================================================ layout ======= */

.cta-row {
  display: flex; flex-wrap: wrap; gap: var(--s-sm) var(--s-md);
  margin-top: var(--s-lg);
}
.center .cta-row { justify-content: center; }

.store-badges { display: flex; flex-wrap: wrap; gap: var(--s-sm); margin-top: var(--s-lg); }
.center .store-badges { justify-content: center; }
.store-badges a { display: block; }
.store-badges img { height: 52px; width: auto; }
.store-badges a:active { transform: scale(0.95); }

.two-up {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-xxl); align-items: center;
}
.two-up.reverse > :first-child { order: 2; }

.card-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg);
  margin-top: var(--s-xl);
}

/* Utility card: hairline, 18px radius, no shadow. Shadow is for product
   imagery only. */
.card {
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--r-lg); padding: var(--s-lg);
}
.card h3 { font-family: var(--font); font-size: 17px; font-weight: 600; letter-spacing: -0.374px; }
.card p { font-size: 14px; line-height: 1.43; letter-spacing: -0.224px; color: var(--ink-muted-80); margin-top: var(--s-xs); }

.eyebrow {
  font-size: 14px; font-weight: 600; letter-spacing: -0.224px;
  color: var(--accent); margin: 0 0 var(--s-sm);
}
.tile-dark .eyebrow, .tile-dark-2 .eyebrow, .tile-dark-3 .eyebrow { color: var(--accent-on-dark); }

/* ============================================================ product ====== */

/* The app icon and the brand lockup are product imagery: they carry the one
   shadow in the system, and nothing else does.

   The radii are measured off the artwork, not chosen: both files are drawn as a
   rounded square with white outside it, so the CSS corner has to follow the
   drawn one or a white sliver shows. The icon's arc starts at 16% of its width;
   the lockup (cropped to its own edge) at 22%. */
.product-art {
  border-radius: 16%;
  box-shadow: var(--product-shadow);
  margin: 0 auto;
}
.lockup {
  width: min(420px, 78vw); border-radius: 22%;
  box-shadow: var(--product-shadow); margin: 0 auto;
}

/* --- the phone render ------------------------------------------------------
   A rendering of the app drawn in CSS rather than a screenshot: it stays sharp
   at every size, weighs nothing, and is built from the app's own palette. */
.device {
  width: 300px; margin: 0 auto;
  background: #1a1a1a; border-radius: 44px; padding: 10px;
  box-shadow: var(--product-shadow);
}
.device .screen {
  background: var(--parchment); border-radius: 35px; overflow: hidden;
  color: var(--ink); font-size: 12px; line-height: 1.35; letter-spacing: -0.1px;
  min-height: 560px; display: flex; flex-direction: column;
}
.device .status {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px 4px; font-size: 11px; font-weight: 600;
}
.device .appbar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 16px 12px;
}
.device .appbar .title { font-size: 17px; font-weight: 600; letter-spacing: -0.3px; }
.device .appbar .icons { margin-left: auto; display: flex; gap: 12px; opacity: .55; }
.device .body { padding: 0 12px 12px; flex: 1; }
.device .tabbar {
  display: flex; border-top: 1px solid var(--divider-soft);
  padding: 8px 4px 14px; background: var(--pearl);
}
.device .tabbar div {
  flex: 1; text-align: center; font-size: 10px; color: var(--ink-muted-48);
}
.device .tabbar div.on { color: var(--accent); font-weight: 600; }

.mock-list {
  background: var(--pearl); border: 1px solid var(--divider-soft);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 10px;
}
.mock-list > header { display: flex; align-items: center; gap: 8px; }
.mock-list > header .emoji { font-size: 15px; }
.mock-list > header .name { font-weight: 600; letter-spacing: -0.2px; }
.mock-list > header .tally { margin-left: auto; font-size: 10px; color: var(--ink-muted-48); }

.mock-task { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; }
.mock-task .box {
  width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid var(--pencil); flex: none; margin-top: 1px;
}
.mock-task.done .box { background: var(--accent); border-color: var(--accent); }
.mock-task.done .label { color: var(--ink-muted-48); text-decoration: line-through; }
.mock-task .label { flex: 1; }
.mock-task .sub { display: block; font-size: 10px; color: var(--ink-muted-48); }
.mock-indent { padding-left: 22px; border-left: 1px solid var(--divider-soft); margin-left: 7px; }

.chip {
  display: inline-block; font-size: 10px; padding: 1px 7px; border-radius: var(--r-pill);
  background: var(--parchment); color: var(--ink-muted-80); border: 1px solid var(--divider-soft);
}
/* The overdue chip is the app's own warning colour (AppColors.flag) shown
   inside the rendering of the app. It is depicted, not site chrome — the site
   still has exactly one accent, and this is not it. */
.chip.due { background: #FBEDE4; color: #A9531F; border-color: #F1D8C7; }

.mock-drawer {
  background: var(--pearl); border: 1px solid var(--divider-soft);
  border-radius: 12px 12px 0 0; padding: 10px 12px; margin: 0 -12px -12px;
}
.mock-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.mock-row .count { margin-left: auto; font-size: 10px; color: var(--ink-muted-48); }

/* ============================================================ article ====== */

.doc { padding: var(--s-xxl) var(--s-lg) var(--s-section); }
.doc h2 {
  font-family: var(--font);
  font-size: 28px; font-weight: 600; letter-spacing: -0.4px; line-height: 1.25;
  margin: var(--s-xxl) 0 0; scroll-margin-top: 110px;
}
.doc h3 {
  font-family: var(--font);
  font-size: 19px; font-weight: 600; letter-spacing: -0.3px;
  margin: var(--s-lg) 0 0; scroll-margin-top: 110px;
}
.doc h2 + p, .doc h3 + p { margin-top: var(--s-xs); }
.doc ul, .doc ol { margin: var(--s-sm) 0 0; padding-left: 22px; }
.doc li { margin-bottom: var(--s-xs); }
.doc li:last-child { margin-bottom: 0; }
.doc hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--s-xxl) 0 0; }

.doc-hero { padding: var(--s-xxl) var(--s-lg) var(--s-xl); background: var(--parchment); }

/* A definition row — used for the Settings reference and the data table. */
.defs { margin-top: var(--s-lg); border-top: 1px solid var(--hairline); }
.defs > div {
  display: grid; grid-template-columns: 240px 1fr; gap: var(--s-lg);
  padding: var(--s-md) 0; border-bottom: 1px solid var(--hairline);
}
.defs dt, .defs .term { font-weight: 600; letter-spacing: -0.374px; margin: 0; }
.defs dd, .defs .desc { margin: 0; color: var(--ink-muted-80); }

/* Contents rail on the help page. */
.toc { margin-top: var(--s-lg); }
.toc ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: var(--s-xl); }
.toc li { margin-bottom: var(--s-xs); break-inside: avoid; }

.callout {
  margin-top: var(--s-lg); padding: var(--s-md) var(--s-lg);
  background: var(--parchment); border-radius: var(--r-lg);
}
.callout p:first-child { margin-top: 0; }

/* ============================================================ footer ======= */

.footer { background: var(--parchment); color: var(--ink-muted-80); padding: 64px var(--s-lg); }
.footer .cols {
  max-width: 1024px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-lg);
}
.footer h4 { font-family: var(--font); font-size: 14px; font-weight: 600; letter-spacing: -0.224px; }
.footer ul { list-style: none; margin: var(--s-xs) 0 0; padding: 0; }
/* The relaxed 2.41 leading is what makes a dense link column scannable. */
.footer li { font-size: 14px; line-height: 2.41; }
.footer a { color: var(--ink-muted-80); }
.footer a:hover { color: var(--accent); }
.footer .legal {
  max-width: 1024px; margin: var(--s-xl) auto 0;
  padding-top: var(--s-md); border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: var(--s-xs) var(--s-md);
}

/* ============================================================ responsive === */

@media (max-width: 1068px) {
  .hero-display { font-size: 40px; }
  .display-lg { font-size: 34px; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 833px) {
  .tile { padding: 64px var(--s-lg); }
  .two-up { grid-template-columns: 1fr; gap: var(--s-xl); text-align: center; }
  .two-up.reverse > :first-child { order: 0; }
  .two-up .cta-row, .two-up .store-badges { justify-content: center; }
  .global-nav .row { gap: var(--s-sm); overflow-x: auto; }
  .sub-nav .row { flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
  .sub-nav .links { margin-left: 0; width: 100%; gap: var(--s-sm); }
  .defs > div { grid-template-columns: 1fr; gap: var(--s-xxs); }
  .footer .cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .hero-display { font-size: 34px; }
  .display-lg { font-size: 28px; }
  .display-md { font-size: 24px; }
  .lead { font-size: 21px; }
  .lead-airy { font-size: 19px; }
  .doc h2 { font-size: 24px; }
  .tile { padding: 56px var(--s-md); }
  .card-grid { grid-template-columns: 1fr; }
  .toc ul { columns: 1; }
  .device { width: 265px; }
  .store-badges img { height: 46px; }
}

@media (max-width: 419px) {
  .hero-display { font-size: 28px; }
  .tile { padding: 48px var(--s-md); }
}