/* CDT Labs — shared styles for every top-level page.
 *
 * One file because the site is now four pages (home, extensions, apps,
 * operating systems) that must look like one site. Inlining this into each
 * page meant four copies drifting apart the first time anyone tweaked a
 * colour.
 *
 * Product pages (/dogear, /unspoken) keep their own styles on purpose: each
 * product carries its own brand.
 */

/* Brand colours sampled from the supplied logo files rather than matched by
   eye: purple #7C3AED, dark #191526, grey #6B6480. The neutrals are tinted
   toward the same violet so the palette reads as one family instead of
   purple dropped onto cold grey. */
:root {
  /* 5.70:1 on white, 5.34:1 on the page ground — the brand purple is usable
     as text as-is, so there is no darkened text-only variant. */
  --purple: #7c3aed;
  --purple-deep: #6d28d9;
  --purple-wash: #f1ebfd;

  --ground: #f8f7fb;
  --surface: #ffffff;
  --surface-sunk: #f2f0f7;
  --ink: #191526;
  --body-text: #46405c;
  /* #6B6480 is the grey from the wordmark's "Labs". */
  --muted: #6b6480;
  --line: #e8e5f0;
  --line-firm: #d5d0e2;

  --live-bg: #e4f3ec;
  --live-fg: #1f6b52;
  --test-bg: #fbf0dc;
  --test-fg: #83591a;
  --soon-bg: #efedf6;
  --soon-fg: #5c5674;
  --wip-bg: #e5edfb;
  --wip-fg: #24508f;

  --shadow-card: 0 1px 2px rgba(25,21,38,.04), 0 6px 16px -8px rgba(25,21,38,.12);
  --shadow-lift: 0 2px 4px rgba(25,21,38,.06), 0 14px 30px -12px rgba(124,58,237,.24);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* The brand purple only reaches 3.28:1 on the dark ground, so dark mode
       uses a lighter tint of it. The logo mark keeps #7C3AED. */
    --purple: #a175f5;
    --purple-deep: #b08cf7;
    --purple-wash: #2a2147;

    --ground: #131020;
    --surface: #1d1830;
    --surface-sunk: #241e3a;
    --ink: #f5f3fa;
    --body-text: #c7c2d6;
    --muted: #968fac;
    --line: #2c2644;
    --line-firm: #3c3558;

    --live-bg: #16302a;
    --live-fg: #6fcbb4;
    --test-bg: #322715;
    --test-fg: #d5a44f;
    --soon-bg: #282242;
    --soon-fg: #a49cbe;
    --wip-bg: #1b2846;
    --wip-fg: #8fb5f2;

    --shadow-card: 0 1px 2px rgba(0,0,0,.35), 0 6px 16px -8px rgba(0,0,0,.50);
    --shadow-lift: 0 2px 4px rgba(0,0,0,.40), 0 14px 30px -12px rgba(0,0,0,.60);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--body-text);
  font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: Newsreader, Georgia, "Times New Roman", serif;
  color: var(--ink);
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

a { color: var(--purple); }
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap { max-width: 1060px; margin: 0 auto; padding-inline: 24px; }
@media (max-width: 480px) { .wrap { padding-inline: 16px; } }

/* ── Header ─────────────────────────────────────────────────────────── */
.site-head {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 20;
}
.site-head .wrap {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px;
  padding-block: 14px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink); font-weight: 600; font-size: 17px;
}
.brand svg { display: block; flex: none; }
.head-links { margin-left: auto; display: flex; gap: 6px; font-size: 14.5px; }
.head-links a {
  color: var(--muted); text-decoration: none;
  padding: 6px 11px; border-radius: 8px;
  white-space: nowrap;
}
.head-links a:hover { color: var(--ink); background: var(--surface-sunk); }
.head-links a[aria-current="page"] { color: var(--purple); background: var(--purple-wash); font-weight: 500; }
/* Three labels don't fit beside the wordmark on a phone. They drop to their
   own row rather than shrinking into something unreadable or a menu that
   hides the site's only navigation behind a tap. */
@media (max-width: 560px) {
  .head-links { margin-left: 0; width: 100%; justify-content: space-between; }
  .head-links a { padding-inline: 8px; }
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { padding-block: 76px 48px; }
.hero h1 {
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.08;
  max-width: 18ch;
  margin-bottom: 20px;
}
.hero p {
  font-size: clamp(16.5px, 2.2vw, 19px);
  color: var(--muted);
  max-width: 56ch;
  margin: 0;
}
.hero .eyebrow {
  font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--purple); font-weight: 600; margin-bottom: 14px;
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 10px 22px;
  margin-top: 28px; font-size: 14px; color: var(--muted);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta svg { flex: none; color: var(--purple); }

/* A smaller hero for the three category pages. */
.hero.page { padding-block: 56px 28px; }
.hero.page h1 { font-size: clamp(30px, 5vw, 42px); }

/* ── Section scaffolding ────────────────────────────────────────────── */
.section { padding-block: 44px; border-top: 1px solid var(--line); }
.section-head { margin-bottom: 24px; }
.section-head h2 { font-size: 27px; margin-bottom: 4px; }
.section-head p { margin: 0; color: var(--muted); font-size: 15px; max-width: 62ch; }

/* ── Category tiles (home) ──────────────────────────────────────────── */
.tiles { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 800px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  text-decoration: none; color: inherit;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--line-firm); }
.tile-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--purple-wash); color: var(--purple);
}
.tile h3 { font-size: 23px; }
.tile p { margin: 0; font-size: 15px; color: var(--body-text); }
.tile .count { margin-top: auto; padding-top: 8px; font-size: 13.5px; color: var(--muted); }
.tile .go { color: var(--purple); font-weight: 500; font-size: 14.5px; }

/* ── Product cards ──────────────────────────────────────────────────── */
.cat { padding-block: 36px; border-top: 1px solid var(--line); }
.cat:first-of-type { border-top: 0; padding-top: 8px; }
.cat-head { margin-bottom: 22px; }
.cat-head h2 { font-size: 24px; margin-bottom: 4px; }
.cat-head p { margin: 0; color: var(--muted); font-size: 15px; max-width: 62ch; }

.grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.card { cursor: pointer; }
a.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--line-firm); }
.card.soon { background: var(--surface-sunk); box-shadow: none; }
/* Built but still being tested: not linked anywhere until it's ready for people. */
.card.wip { background: var(--surface-sunk); box-shadow: none; }

.card-top { display: flex; align-items: center; gap: 11px; }
.card-top svg { display: block; flex: none; }
.card h3 { font-family: inherit; font-size: 16px; font-weight: 600; letter-spacing: 0; }

.tag {
  margin-left: auto; flex: none;
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.tag.live { background: var(--live-bg); color: var(--live-fg); }
.tag.test { background: var(--test-bg); color: var(--test-fg); }
.tag.soon { background: var(--soon-bg); color: var(--soon-fg); }
.tag.wip { background: var(--wip-bg); color: var(--wip-fg); }

/* Jump links to the sections of a long category page. */
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.jump a {
  font-size: 13.5px; text-decoration: none; color: var(--body-text);
  padding: 5px 12px; border: 1px solid var(--line-firm); border-radius: 999px; background: var(--surface);
}
.jump a:hover { border-color: var(--purple); color: var(--ink); }
.cat { scroll-margin-top: 16px; }

.card p { margin: 0; font-size: 14.5px; color: var(--body-text); }
.card .meta { margin-top: auto; padding-top: 6px; font-size: 13px; color: var(--muted); }

/* Featured cards on the home page get room for a line more of copy. */
.grid.featured .card { padding: 24px; }
.grid.featured .card p { font-size: 15px; }

/* ── Empty state (operating systems) ────────────────────────────────── */
.empty {
  border: 1px dashed var(--line-firm);
  border-radius: 16px;
  padding: 56px 24px;
  text-align: center;
  background: var(--surface);
}
.empty .tile-icon { margin: 0 auto 16px; }
.empty h2 { font-size: 22px; margin-bottom: 6px; }
.empty p { margin: 0 auto; color: var(--muted); max-width: 44ch; font-size: 15px; }

/* ── About / principles ─────────────────────────────────────────────── */
.about { display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .about { grid-template-columns: 1.1fr 1fr; gap: 48px; } }
.about p { margin: 0 0 14px; font-size: 16px; }
.about p:last-child { margin-bottom: 0; }

.why-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
.why-item h3 { font-family: inherit; font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--purple); letter-spacing: 0; }
.why-item p { margin: 0; font-size: 14.5px; color: var(--muted); }

.more { margin-top: 22px; font-size: 15px; }
.more a { font-weight: 500; text-decoration: none; }
.more a:hover { text-decoration: underline; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.site-foot {
  margin-top: 56px; border-top: 1px solid var(--line);
  padding-block: 28px 56px;
  font-size: 14px; color: var(--muted);
}
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
.site-foot a { color: var(--muted); text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }
.site-foot .spacer { flex: 1 1 auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  a.card:hover, .tile:hover { transform: none; }
}