/*
 * Styles for server-rendered public pages (/explore, /guides, /features).
 *
 * Deliberately standalone: these pages load no app JavaScript and no webfonts,
 * so they stay fast for a cold visitor arriving from search. Palette mirrors
 * src/index.css (forest / cream / brass) without importing app tokens.
 *
 * Site CSP keeps style-src at 'self' — this file is the only stylesheet these
 * pages get. Do not add inline <style> to the templates, and do not put `style`
 * attributes in the SVG illustrations either: `style-src 'self'` blocks both.
 * SVG presentation attributes are not styles and are the way that art is drawn.
 *
 * Every colour pair here is chosen against WCAG 2.2 AA. `a11y.smoke.spec.ts`
 * runs axe over a sample of these pages in the light scheme; the dark block at
 * the bottom is held to the same contrast bar by hand, since Chromium under
 * Playwright reports `prefers-color-scheme: light`.
 */

:root {
  --forest: #1f4d3a;
  --forest-deep: #16382a;
  --pine: #3d7a5c;
  --sand: #efe6d4;
  --sand-deep: #e2d5bc;
  --paper: #f7f1e6;
  --ink: #1c241c;
  --muted: #46523f;
  --brass: #b08a3c;
  --rule: #c9bea8;
  --wash: #fffdf8;
  /* Page background, split out so the dark scheme can swap the whole wash. */
  --page: linear-gradient(180deg, #f7f1e6 0%, #efe6d4 60%, #e2d5bc 100%);
  --chrome: #16382a;
  --chrome-ink: #e8e2d4;
  --chrome-fine: #c9c2b2;
  --font-display: Georgia, "Times New Roman", serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--page);
  background-attachment: fixed;
}

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

.skip:focus {
  left: 0.5rem;
  top: 0.5rem;
  z-index: 10;
  padding: 0.5rem 0.75rem;
  background: var(--forest-deep);
  color: var(--paper);
  border-radius: 4px;
}

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

a:hover {
  color: var(--forest-deep);
}

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

/* ------------------------------------------------------------- masthead */

.masthead {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem clamp(1rem, 4vw, 2.5rem);
  background: var(--chrome);
  color: var(--paper);
}

.masthead .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--paper);
  text-decoration: none;
}

.masthead nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  align-items: center;
}

.masthead nav a:not(.cta) {
  color: var(--paper);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}

.masthead nav a:not(.cta):hover {
  text-decoration: underline;
}

/* Dark ink on brass is 8.2:1. Cream on brass is 2.85:1 and fails WCAG AA, so
   the masthead's cream link colour must never cascade into the button. */
a.cta {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  border-radius: 6px;
  background: var(--brass);
  border-bottom: 3px solid #8d6c2a;
  color: #1a1405;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
}

a.cta:hover {
  background: #c39a45;
  color: #1a1405;
}

/* ----------------------------------------------------------------- main */

main {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.25rem clamp(1rem, 4vw, 2.5rem) 3rem;
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4.5vw, 2.6rem);
  line-height: 1.15;
  margin: 0.4rem 0 1rem;
  color: var(--forest-deep);
}

h2 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 3vw, 1.65rem);
  margin: 2.25rem 0 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--rule);
  color: var(--forest-deep);
}

h3 {
  font-size: 1.08rem;
  margin: 1.35rem 0 0.35rem;
  color: var(--forest-deep);
}

p {
  margin: 0 0 0.9rem;
  max-width: 44rem;
}

/* ---------------------------------------------------------- breadcrumbs */

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--muted);
}

.crumbs li + li::before {
  content: "›";
  margin-right: 0.5rem;
  color: var(--rule);
}

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

/* ---------------------------------------------------------------- hero */

figure.hero {
  margin: 0 0 1rem;
}

figure.hero img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 24rem;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--rule);
}

.photo-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.7rem;
  margin: 1rem 0 1.5rem;
  padding: 0;
  list-style: none;
}

.photo-strip a {
  display: block;
  text-decoration: none;
  color: var(--ink);
}

.photo-strip img {
  display: block;
  width: 100%;
  height: 7rem;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--rule);
}

.photo-strip span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  font-weight: 600;
}

/* ---------------------------------------------------------------- tiles */

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.85rem;
  margin: 0.5rem 0 1rem;
  padding: 0;
  list-style: none;
}

.tile {
  padding: 0.85rem 1rem;
  background: var(--wash);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--pine);
  border-radius: 8px;
}

.tile a {
  text-decoration: none;
}

.tile-title {
  display: block;
  font-weight: 700;
  font-size: 1.02rem;
}

.tile-meta {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.85rem;
  color: var(--muted);
}

.tile p {
  margin: 0.45rem 0 0;
  font-size: 0.92rem;
  color: var(--muted);
}

/* --------------------------------------------------------- link columns */

.link-columns {
  columns: 3 12rem;
  column-gap: 1.5rem;
  margin: 0.5rem 0 1rem;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
}

.link-columns li {
  break-inside: avoid;
  margin-bottom: 0.28rem;
}

/* --------------------------------------------------------------- tables */

.table-wrap {
  overflow-x: auto;
  margin: 0.5rem 0 1rem;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  background: var(--wash);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: 0.95rem;
}

caption {
  text-align: left;
  padding: 0 0 0.4rem;
  font-size: 0.85rem;
  color: var(--muted);
}

th,
td {
  padding: 0.5rem 0.7rem;
  text-align: left;
  border-bottom: 1px solid var(--rule);
}

thead th {
  background: var(--sand);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--forest-deep);
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

th[scope="row"] {
  font-weight: 600;
}

.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ topic nav */

.topic-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1rem 0 1.5rem;
  padding: 0;
  list-style: none;
}

.topic-nav li {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--wash);
  font-size: 0.9rem;
}

.topic-nav li[aria-current="page"] {
  background: var(--forest-deep);
  border-color: var(--forest-deep);
  color: var(--paper);
  font-weight: 600;
}

.topic-nav a {
  text-decoration: none;
}

.pillar-link {
  margin-top: 1.5rem;
  font-size: 0.95rem;
  color: var(--muted);
}

/* ------------------------------------------------------------ faq/points */

.faq-item {
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
}

.faq-item h3 {
  margin: 0 0 0.25rem;
}

.faq-item p {
  margin: 0;
}

ul.points {
  margin: 0.4rem 0 1rem;
  padding-left: 1.2rem;
  max-width: 44rem;
}

ul.points li {
  margin-bottom: 0.3rem;
}

/* --------------------------------------------------------------- signup */

.signup {
  margin: 2.5rem 0 0;
  padding: 1.25rem 1.4rem;
  background: var(--chrome);
  color: var(--paper);
  border-radius: 10px;
  border-bottom: 4px solid var(--brass);
}

.signup h2 {
  margin-top: 0;
  border: 0;
  color: var(--paper);
}

.signup p {
  color: var(--chrome-ink);
}

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

.site-footer {
  padding: 1.75rem clamp(1rem, 4vw, 2.5rem) 2.5rem;
  background: var(--chrome);
  color: var(--chrome-ink);
}

.site-footer .footer-lead {
  max-width: 52rem;
  margin: 0 auto 1rem;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  max-width: 52rem;
  margin: 0 auto 1rem;
  font-size: 0.95rem;
}

.site-footer a {
  color: #f2e9d4;
}

.site-footer .fine {
  max-width: 52rem;
  margin: 0 auto;
  font-size: 0.82rem;
  color: var(--chrome-fine);
}

/* ------------------------------------------------------- feature banners */

/*
 * Inline SVG, not an image: nine extra requests on pages whose whole argument
 * is being fast is a bad trade for art that is a few hundred bytes of markup.
 * Fixed aspect ratio so the banner cannot reflow after first paint — these
 * pages are held to a Lighthouse CLS budget.
 */
.feature-art {
  margin: 0.25rem 0 1.25rem;
  border-radius: 12px;
  border: 1px solid var(--rule);
  overflow: hidden;
  line-height: 0;
  box-shadow: 0 1px 2px rgba(28, 36, 28, 0.08);
}

.feature-art svg {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 1;
}

/* ---------------------------------------------------------------- glance */

/*
 * The numbers strip under the lede. A list rather than a definition list
 * because the content lint drops lists before measuring sentence length, and a
 * `<dl>` of eight unpunctuated fragments reads to it as one 40-word sentence.
 */
.glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 0.7rem;
  margin: 1.25rem 0 1.75rem;
  padding: 0;
  list-style: none;
}

.glance li {
  padding: 0.7rem 0.85rem;
  background: var(--wash);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--brass);
  border-radius: 8px;
}

.glance-value {
  display: block;
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--forest-deep);
  font-variant-numeric: tabular-nums;
}

.glance-label {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--muted);
}

@media (prefers-reduced-motion: no-preference) {
  a,
  .tile {
    transition: background-color 120ms ease, color 120ms ease;
  }
}

/* ------------------------------------------------------------- dark mode */

/*
 * Forest-night, never grey (`.cursor/rules/ui-theme.mdc`). Only the tokens and
 * the few places that hardcode a colour are overridden, so a new component
 * gets dark mode for free by using the variables.
 */
@media (prefers-color-scheme: dark) {
  :root {
    --forest: #a8d8b9;
    --forest-deep: #d8e8d8;
    --pine: #5c9c78;
    --sand: #1b4232;
    --sand-deep: #143528;
    --paper: #f2efe4;
    --ink: #e9e7db;
    --muted: #b3c2b1;
    --brass: #c9a24d;
    --rule: #2f5a45;
    --wash: #163425;
    --page: linear-gradient(180deg, #0d2018 0%, #102a1f 60%, #0d2018 100%);
    --chrome: #081611;
    --chrome-ink: #e2ddcf;
    --chrome-fine: #aeb8a8;
  }

  /*
   * Cream on brass is 2.85:1 and fails AA, so anything on a brass fill keeps
   * dark ink in both schemes. The lighter brass above is for the surrounding
   * dark surface, not for the label.
   */
  a.cta:hover {
    background: #d8b25e;
    color: #171103;
  }

  /*
   * `--forest-deep` is a near-white heading colour in this scheme, which is
   * correct as text on the page wash and wrong as a *fill*. These two rules
   * use it as a background in light mode, so both need a real dark-mode fill
   * rather than inheriting the remap.
   */
  .skip:focus {
    background: var(--brass);
    color: #171103;
  }

  .topic-nav li[aria-current="page"] {
    background: var(--brass);
    border-color: var(--brass);
    color: #171103;
  }

  .signup h2 {
    color: #eef3e9;
  }

  .feature-art {
    box-shadow: none;
  }
}