/* Whendoo marketing site.
   Every color and token below is copied from the app: src/constants/theme.ts
   (RADIUS, SPACING, FONT, ELEVATION), src/constants/palettes.ts (the default
   iOS system palette) and src/constants/androidColors.js (the opaque hex form
   of the iOS system colors, light and dark). No color originates here. */

:root {
  /* RADIUS */
  --radius-pill: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  /* Site-only: the corner of a phone screenshot, which the app has no token for */
  --radius-shot: 28px;

  /* SPACING */
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;
  /* Site-only: the vertical rhythm between page sections */
  --section-gap: clamp(40px, 7vw, 72px);
  /* Site-only: air above a heading that follows body copy instead of opening
     a section, which has the section padding above it already */
  --heading-gap: 40px;

  /* FONT: the app's type scale, for anything that imitates app chrome */
  --font-footnote: 12px;
  --font-subhead: 13px;
  --font-body: 15px;
  --font-callout: 16px;
  --font-headline: 17px;
  --font-title: 18px;
  /* Page-level display sizes; the app has no headline this large */
  --font-h3: 20px;
  --font-lede: clamp(18px, 2.4vw, 21px);
  --font-h2: clamp(22px, 3vw, 27px);
  --font-h1: clamp(30px, 5.5vw, 44px);

  /* ELEVATION.card */
  --elevation-card: 0 1px 4px rgba(0, 0, 0, 0.06);

  /* Measures */
  --measure-text: 720px;
  --measure-wide: 1080px;

  /* System colors, light */
  --bg: #f2f2f7;
  --card: #ffffff;
  --label: #000000;
  --label-secondary: #6b7280;
  --separator: #e5e7eb;
  --track: #c8c8cc;

  /* Accent: blueText for text and for fills too. White on the palette blue
     #007AFF is only 4.02:1, where white on blueText is 7.12:1, so the buttons
     and the callout circles take the darker tone. Dark mode's blue is light
     enough to fill with directly, which is why the two modes differ here. */
  --accent: #007aff;
  --accent-text: #0055b3;
  --accent-fill: #0055b3;
  --accent-on-fill: #ffffff;

  /* Status colors: base for rings and pill tints, *Text for labels.
     --due is the palette yellow the Due ring uses; --orange is the palette
     orange the Due pill uses. --due-text is the palette's yellowText rather
     than its orangeText: orangeText #A86200 is only 4.38:1 on the pill's own
     tint, where yellowText is 4.69:1. */
  --done: #34c759;
  --done-text: #1a7a33;
  --due-soon: #69cc34;
  --due-soon-text: #3d7a1e;
  --due: #e09b00;
  --orange: #ff9500;
  --due-text: #946500;
  --overdue: #ff3b30;
  --overdue-text: #c02420;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --card: #1c1c1e;
    --label: #ffffff;
    --label-secondary: #98989f;
    --separator: #323235;
    --track: #48484a;

    --accent: #409cff;
    --accent-text: #409cff;
    --accent-fill: #409cff;
    --accent-on-fill: #000000;

    --done: #30d158;
    --done-text: #50e878;
    --due-soon: #66d930;
    --due-soon-text: #80ee50;
    --due: #ffb820;
    --orange: #ff9f0a;
    /* Dark keeps the palette's own orangeText: 8.26:1 on the pill tint */
    --due-text: #ffb840;
    --overdue: #ff453a;
    --overdue-text: #ff706a;

    --elevation-card: 0 1px 4px rgba(0, 0, 0, 0.4);
  }
}

/* ── Base ───────────────────────────────────────────────── */

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

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

:root {
  color-scheme: light dark;
}

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--label);
  font: var(--font-headline) / 1.65 -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

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

h1,
h2,
h3 {
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--spacing-lg);
}

h1 {
  font-size: var(--font-h1);
  letter-spacing: -0.02em;
}

h2 {
  font-size: var(--font-h2);
}

h3 {
  font-size: var(--font-h3);
  margin-bottom: var(--spacing-sm);
}

/* A heading that opens a <section> has the section's padding above it. One
   that follows body copy has nothing, which on the support and privacy pages
   left every question the same distance from the previous answer as that
   answer's own paragraphs. */
* + h2 {
  margin-top: var(--heading-gap);
}

* + h3 {
  margin-top: var(--spacing-xxl);
}

p {
  margin: 0 0 var(--spacing-lg);
}

ul {
  margin: 0 0 var(--spacing-lg);
  padding-left: var(--spacing-xl);
}

li {
  margin-bottom: var(--spacing-sm);
}

/* Sits on the page background, where the secondary label is only 4.33:1, and
   carries the sentence that says what the app is. The size carries the
   hierarchy instead of the color, as .fine does. */
.lede {
  font-size: var(--font-lede);
  color: var(--label);
}

.muted {
  color: var(--label-secondary);
}

/* Sits directly on the page background in places, where the secondary label
   is only 4.33:1; the 13px size carries the hierarchy instead of the color. */
.fine {
  font-size: var(--font-subhead);
  color: var(--label);
}

/* ── Layout ─────────────────────────────────────────────── */

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: var(--spacing-xl);
  top: var(--spacing-sm);
  z-index: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--label);
}

.wrap {
  max-width: var(--measure-text);
  margin: 0 auto;
  padding-inline: var(--spacing-xl);
}

.wrap-wide {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding-inline: var(--spacing-xl);
}

section {
  padding-block: var(--section-gap);
}

.site-head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  align-items: center;
  justify-content: space-between;
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: var(--spacing-lg) var(--spacing-xl);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-title);
  font-weight: 600;
  color: var(--label);
  text-decoration: none;
}

.brand img {
  border-radius: var(--radius-sm);
}

.site-head nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  font-size: var(--font-body);
}

/* Inline anchors are only as tall as their glyphs, which leaves the nav rows
   and the footer address under the 24px minimum target size. */
.site-head nav a,
.site-foot nav a,
.site-foot .fine a {
  display: inline-block;
  padding-block: var(--spacing-md);
}

.site-head nav [aria-current="page"] {
  color: var(--label);
  font-weight: 600;
  text-decoration: none;
}

.site-foot {
  border-top: 1px solid var(--separator);
  padding-block: var(--spacing-xxl) 40px;
  text-align: center;
}

.site-foot nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--spacing-lg);
  margin-block: var(--spacing-xl) var(--spacing-lg);
  font-size: var(--font-body);
}

/* ── Buttons ────────────────────────────────────────────── */

.btn {
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-xxl);
  border-radius: var(--radius-md);
  background: var(--accent-fill);
  color: var(--accent-on-fill);
  font-size: var(--font-headline);
  font-weight: 600;
  text-decoration: none;
}

/* ── Section card (SECTION_CARD_STYLE) ──────────────────── */

.card {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-card);
  padding: var(--spacing-xl);
}

.card h3 {
  margin-top: 0;
}

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

/* A list of rows separated by hairlines, as the app's cards are. Works on a
   <div> of <div>s or a <ul> of <li>s; the row padding is the only spacing. */
.card-rows {
  list-style: none;
  padding-left: 0;
}

.card-rows > * {
  padding-block: var(--spacing-md);
  margin-bottom: 0;
  border-top: 1px solid var(--separator);
}

.card-rows > :first-child {
  border-top: 0;
  padding-top: 0;
}

.card-rows > :last-child {
  padding-bottom: 0;
}

/* ── Status pill (RADIUS.pill) ──────────────────────────── */

/* The tint is mixed into --card rather than left translucent, so the pill is
   opaque and its text contrast does not depend on what sits behind it. 10% is
   the app's own row-pill alpha (TaskRow.tsx uses `${pillColor}1A`). */
.pill {
  display: inline-block;
  padding: 3px var(--spacing-sm);
  border-radius: var(--radius-pill);
  font-size: var(--font-subhead);
  font-weight: 600;
  white-space: nowrap;
  background: color-mix(in srgb, var(--pill-base) 10%, var(--card));
  color: var(--pill-text);
}

.pill-done {
  --pill-base: var(--done);
  --pill-text: var(--done-text);
}

.pill-due-soon {
  --pill-base: var(--due-soon);
  --pill-text: var(--due-soon-text);
}

.pill-due {
  --pill-base: var(--orange);
  --pill-text: var(--due-text);
}

.pill-overdue {
  --pill-base: var(--overdue);
  --pill-text: var(--overdue-text);
}

/* Never done, which the app draws in blue */
.pill-new {
  --pill-base: var(--accent);
  --pill-text: var(--accent-text);
}

/* ── Progress ring (ProgressRing.tsx, as a CSS motif) ───── */

.ring {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: conic-gradient(
    var(--ring-arc, var(--ring-color)) calc(var(--ring-progress, 100) * 1%),
    var(--track) 0%
  );
}

/* The app's safe state is a thinner arc at 70% opacity over the gray track,
   rather than the solid ring the due and overdue states use. */
.ring-safe {
  --ring-arc: color-mix(in srgb, var(--ring-color) 70%, var(--track));
}

.ring::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--ring-hole, var(--card));
}

/* SAFE_STROKE is 2 where the solid states use 3. Two classes so the rule wins
   on specificity rather than on sitting below .ring::before. */
.ring.ring-safe::before {
  inset: 2px;
}

.ring b {
  position: relative;
  font-size: var(--font-footnote);
  font-weight: 700;
  color: var(--ring-text, var(--ring-color));
}

/* ── Home-list row (TaskRow.tsx) ────────────────────────── */

.row {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.row-name {
  flex: 1;
  font-size: var(--font-callout);
  font-weight: 500;
}

.row-sub {
  display: block;
  font-size: var(--font-footnote);
  font-weight: 400;
  color: var(--label-secondary);
}

/* ── Hero ───────────────────────────────────────────────── */

.hero {
  display: grid;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}

@media (min-width: 800px) {
  .hero {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.hero h1 {
  margin-bottom: var(--spacing-lg);
}

.shot {
  max-width: 300px;
  margin: 0 auto;
  border-radius: var(--radius-shot);
  box-shadow: var(--elevation-card);
  border: 1px solid var(--separator);
  overflow: hidden;
  display: block;
}

/* ── Grids ──────────────────────────────────────────────── */

.steps,
.uses {
  display: grid;
  gap: var(--spacing-lg);
}

@media (min-width: 700px) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
  .uses {
    grid-template-columns: repeat(2, 1fr);
  }
}

.step-num {
  font-size: var(--font-subhead);
  font-weight: 600;
  color: var(--label-secondary);
  margin-bottom: var(--spacing-sm);
}

.gap-above {
  margin-top: var(--heading-gap);
}

.key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md) var(--spacing-xl);
  padding: 0;
  margin: var(--spacing-lg) 0;
  list-style: none;
}

/* On the page background too, and it is the only place the four statuses are
   named in words, so it takes --label for the same reason .lede does. */
.key li {
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  margin: 0;
  font-size: var(--font-body);
  color: var(--label);
}

/* ── Q&A blocks ─────────────────────────────────────────── */

.qa h3 {
  margin-top: var(--spacing-xxl);
}

.qa h3:first-of-type {
  margin-top: 0;
}

.qa p:last-child {
  margin-bottom: 0;
}

/* ── Help page screenshots and callouts ─────────────────── */

/* The wrapper is the positioning context for the numbered circles, so a
   percentage coordinate on a circle survives the screenshot being replaced at
   a different pixel size. */
.shot-wrap {
  position: relative;
  max-width: 300px;
  margin: 0 auto var(--spacing-xxl);
}

/* One numbered circle, whether drawn over a screenshot or beside a list item */
.callout-dot,
.callouts > li::before {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-fill);
  color: var(--accent-on-fill);
  font-size: var(--font-footnote);
  font-weight: 700;
}

.callout-dot {
  position: absolute;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 2px var(--card);
}

.callouts {
  counter-reset: callout;
  list-style: none;
  padding-left: 0;
}

.callouts > li {
  position: relative;
  padding-left: 38px;
  margin-bottom: var(--spacing-md);
}

.callouts > li::before {
  counter-increment: callout;
  content: counter(callout);
  position: absolute;
  left: 0;
  top: 2px;
}

/* ── Press kit ──────────────────────────────────────────── */

.icon-sample {
  border-radius: var(--radius-lg);
}

/* ── Definition list (press fact sheet) ─────────────────── */

.dl {
  margin: 0;
}

.dl dt {
  font-weight: 600;
  margin-top: var(--spacing-md);
}

.dl dt:first-child {
  margin-top: 0;
}

.dl dd {
  margin: 0;
  color: var(--label-secondary);
}