/* cookieZ website. One stylesheet for every page, with nothing loaded from
   another server.

   Colours match the icon and promo tile. Light or dark follows the system,
   unless the visitor uses the button in the header (theme.js). */

:root {
  color-scheme: light dark;

  --ink: #1f2633;
  --ink-soft: #4a5568;
  --muted: #6b7486;
  --bg: #ffffff;
  --bg-alt: #f4f6fb;
  --line: #dde2ec;
  --key-top: #ffffff;
  --key-bottom: #eaeef5;
  --key-edge: #c2cad8;
  --link: #1f4fbf;
  --button-bg: #1f2633;
  --button-fg: #ffffff;
  --shot-shadow: 0 1px 2px rgba(20, 30, 60, 0.06), 0 8px 24px rgba(20, 30, 60, 0.10);
}

/* The dark colours are here twice. The first block follows the system and
   works without JavaScript. The second is for visitors who pressed the
   light/dark button. Keep the two lists the same. */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --ink: #e8ebf1;
    --ink-soft: #b7bfcc;
    --muted: #8d96a6;
    --bg: #15181e;
    --bg-alt: #1c2029;
    --line: #2e3440;
    --key-top: #343b49;
    --key-bottom: #2a303c;
    --key-edge: #4a5366;
    --link: #8fb0ff;
    --button-bg: #e8ebf1;
    --button-fg: #15181e;
    --shot-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

:root.dark {
  color-scheme: dark;
  --ink: #e8ebf1;
  --ink-soft: #b7bfcc;
  --muted: #8d96a6;
  --bg: #15181e;
  --bg-alt: #1c2029;
  --line: #2e3440;
  --key-top: #343b49;
  --key-bottom: #2a303c;
  --key-edge: #4a5366;
  --link: #8fb0ff;
  --button-bg: #e8ebf1;
  --button-fg: #15181e;
  --shot-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
}

:root.light {
  color-scheme: light;
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

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

a {
  color: var(--link);
  text-underline-offset: 2px;
}

code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.9em;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.05em 0.35em;
}

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

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Lets keyboard users skip past the header. */
.skip {
  position: absolute;
  left: 16px;
  top: -48px;
  padding: 8px 12px;
  background: var(--button-bg);
  color: var(--button-fg);
  border-radius: 6px;
  z-index: 10;
}

.skip:focus {
  top: 12px;
}

/* --- header ------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* "cookie" plus a keycap Z, as on the promo tile. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--ink);
  text-decoration: none;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
}

.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--key-top) 0%, var(--key-bottom) 100%);
  border: 1px solid var(--key-edge);
  box-shadow: 0 2px 0 var(--key-edge);
  font-size: 15px;
  letter-spacing: 0;
  position: relative;
  top: 3px;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 15px;
}

.site-nav a {
  color: var(--ink-soft);
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
}

.header-end {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* Shows the theme you'd switch to: a moon on the light page, a sun on the
   dark one. Hidden until theme.js sets it up. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-soft);
  cursor: pointer;
}

.theme-toggle[hidden] {
  display: none;
}

.theme-toggle:hover {
  color: var(--ink);
  border-color: var(--muted);
}

.theme-toggle svg {
  width: 16px;
  height: 16px;
}

.theme-toggle .icon-sun,
.theme-toggle[data-showing="dark"] .icon-moon {
  display: none;
}

.theme-toggle[data-showing="dark"] .icon-sun {
  display: block;
}

/* On phones, the logo and button share the top row and the links go on the
   row below. display: contents lets the button and nav be placed as if the
   wrapper div wasn't there. */
@media (max-width: 600px) {
  .header-end {
    display: contents;
  }

  .theme-toggle {
    margin-left: auto;
  }

  .site-nav {
    order: 1;
    flex-basis: 100%;
  }
}

/* --- home: hero --------------------------------------------------------- */

.hero {
  padding: 72px 0 40px;
  text-align: center;
}

.hero h1 {
  margin: 0 auto;
  max-width: 16em;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.hero .lede {
  margin: 20px auto 0;
  max-width: 34em;
  font-size: 19px;
  color: var(--ink-soft);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.actions.start {
  justify-content: flex-start;
}

.button {
  display: inline-block;
  padding: 11px 20px;
  border-radius: 8px;
  border: 1px solid var(--button-bg);
  background: var(--button-bg);
  color: var(--button-fg);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
}

.button.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}

.button.secondary:hover {
  border-color: var(--muted);
}

/* Used until the store listing is live. It isn't a link, so it can't lead
   anywhere broken. */
.button.pending {
  background: transparent;
  color: var(--muted);
  border: 1px dashed var(--key-edge);
  cursor: default;
}

.note {
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
}

/* --- home: screenshot carousel -------------------------------------------

   A strip of screenshots that scrolls sideways and stops on one at a time.
   That works with CSS alone. carousel.js adds the arrows and dots.

   820px is the popup's width (780px) plus room for the shadow, so the
   screenshots are never stretched. */

.showcase {
  margin: 40px auto 0;
  max-width: 820px;
}

.slides {
  /* carousel.js measures slide positions from here. */
  position: relative;
  display: flex;
  align-items: center;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  border-radius: 12px;
}

.slides:focus-visible {
  outline-offset: 4px;
}

.slide {
  flex: 0 0 100%;
  margin: 0;
  /* Room for the screenshot's shadow. */
  padding: 8px 20px 12px;
  scroll-snap-align: center;
}

.slide figure {
  margin: 0;
}

.slide .shot {
  margin: 0 auto;
}

.slide figcaption {
  margin-top: 14px;
  font-size: 15px;
  color: var(--muted);
}

/* Hide the scrollbar once the arrows and dots are there. Without them, the
   scrollbar is the only sign that the strip scrolls. */
.has-controls .slides {
  scrollbar-width: none;
}

.has-controls .slides::-webkit-scrollbar {
  display: none;
}

.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
}

.carousel-controls[hidden] {
  display: none;
}

.carousel-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink);
  cursor: pointer;
}

/* SVG arrows, because arrow characters look different in every font. */
.carousel-arrow svg {
  width: 16px;
  height: 16px;
}

.carousel-arrow:hover:not(:disabled) {
  border-color: var(--muted);
}

.carousel-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.carousel-dots {
  display: flex;
  gap: 4px;
}

/* 24px buttons, easy to hit, with a 10px dot inside. */
.carousel-dot {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.carousel-dot::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  margin: auto;
  border-radius: 50%;
  border: 1.5px solid var(--muted);
}

.carousel-dot[aria-current="true"]::before {
  background: var(--ink);
  border-color: var(--ink);
}

@media (prefers-reduced-motion: no-preference) {
  .slides {
    scroll-behavior: smooth;
  }
}

.shot {
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: var(--shot-shadow);
}

/* On phones the whole popup would shrink until its text is about 4px, so
   show a crop of its left side instead, big enough to read. */
@media (max-width: 600px) {
  .shot {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    object-position: left center;
  }
}

/* --- home: sections ------------------------------------------------------ */

.section {
  padding: 64px 0;
  border-top: 1px solid var(--line);
}

.section.alt {
  background: var(--bg-alt);
}

.section h2 {
  margin: 0 0 16px;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.section p {
  margin: 0 0 16px;
  max-width: 38em;
  color: var(--ink-soft);
}

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

/* Text beside a screenshot. They stack on narrow screens. */
.split {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 48px;
  align-items: center;
}

.split.flip > :first-child {
  order: 2;
}

@media (max-width: 820px) {
  .split {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .split.flip > :first-child {
    order: 0;
  }
}

.section h3 {
  margin: 0 0 10px;
  font-size: 21px;
  line-height: 1.3;
}

/* The "A closer look" rows. */
.tour {
  margin-top: 36px;
}

.tour + .tour {
  margin-top: 56px;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px 40px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.features li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-soft);
}

.features strong {
  display: block;
  color: var(--ink);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 28px;
}

.facts {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.facts li {
  position: relative;
  padding: 6px 0 6px 26px;
  color: var(--ink-soft);
}

/* The list above has no bottom margin, so the paragraph adds the space. */
.section p.after-list {
  margin-top: 20px;
}

.facts li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.95em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--ink);
}

/* --- text pages (privacy, support) --------------------------------------- */

.page {
  padding: 56px 0 72px;
}

.prose {
  max-width: 44em;
}

.prose h1 {
  margin: 0 0 8px;
  font-size: 38px;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.prose h2 {
  margin: 40px 0 10px;
  font-size: 24px;
  line-height: 1.25;
}

.prose h3 {
  margin: 28px 0 8px;
  font-size: 19px;
}

.prose p,
.prose li {
  color: var(--ink-soft);
}

.prose ul {
  padding-left: 1.3em;
}

.prose .updated {
  margin: 0 0 32px;
  color: var(--muted);
  font-size: 15px;
}

.prose .intro {
  font-size: 19px;
  color: var(--ink);
}

.prose .aside {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-alt);
}

/* Questions and answers use <details>, so no script is needed. */
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 14px 0;
}

.faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
}

.faq details p {
  margin: 10px 0 0;
}

/* --- footer -------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 28px 0 40px;
  font-size: 14px;
  color: var(--muted);
}

.site-footer .wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 32px;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a {
  color: var(--muted);
}

.site-footer a:hover {
  color: var(--ink);
}

/* --- touch screens ------------------------------------------------------- */

/* Fingers need about 44px to hit something. On touch screens the header
   and footer links get extra padding, and the lists' negative margins
   cancel it out, so the page looks the same but is easier to tap. */
@media (pointer: coarse) {
  .site-nav a,
  .site-footer a {
    display: inline-block;
    padding-block: 12px;
  }

  .site-nav ul,
  .site-footer ul {
    row-gap: 0;
    margin-block: -12px;
  }

  /* The round buttons stay the same size but get a bigger tap area. The dots
     are only 4px apart, so theirs only grows up and down. */
  .theme-toggle,
  .carousel-arrow,
  .carousel-dot {
    position: relative;
  }

  .theme-toggle::after,
  .carousel-arrow::after {
    content: "";
    position: absolute;
    inset: -5px;
  }

  .carousel-dot::after {
    content: "";
    position: absolute;
    inset: -10px 0;
  }
}