/*
  Fjell long-form pages: privacy, terms, support, press and the 4x4 guide.
  Loaded after site.css. Every rule is scoped to .prose or a page component class, and uses only the
  tokens site.css defines on :root. Base type, links, focus rings, header, footer, .wrap, .card, .button,
  .eyebrow, .lede, .fineprint, details/summary, .faq and .store-cta come from site.css and are not restyled here.
  site.css also owns .finding (landing science cards), so the guide's research cards are .evidence.
*/

/* Reading column. No bottom padding: the footer's top margin makes the gap. */
.prose {
  max-width: var(--measure);
  margin-inline: auto;
  padding-top: 32px;
  line-height: 1.6;
}

@media (min-width: 768px) {
  .prose { padding-top: 56px; }
}

.prose p,
.prose ul,
.prose ol,
.prose dl,
.prose figure { margin: 0 0 16px; }

.prose h1 {
  font-size: clamp(2rem, 1.55rem + 2.2vw, 2.875rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.prose h2 {
  margin: 48px 0 12px;
  font-size: clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  line-height: 1.2;
  scroll-margin-top: 24px;
}

.prose h3 {
  margin: 28px 0 8px;
  font-size: 1.125rem;
  line-height: 1.3;
  scroll-margin-top: 24px;
}

.prose h2 + h3 { margin-top: 16px; }

.prose ul,
.prose ol { padding-left: 1.25em; }

.prose li + li { margin-top: 6px; }

.prose li::marker { color: var(--ink-2); }

.prose strong { font-weight: 600; }

/* Email addresses and DOIs are long single words: let them break anywhere on a phone. */
.prose a[href^="mailto:"],
.prose .cite a { overflow-wrap: anywhere; }

/* Page head: eyebrow, title, lede, effective date */
.page-head { margin: 0 0 32px; }
.page-head .lede { margin: 16px 0 0; }
.page-head .fineprint { margin: 12px 0 0; }

/* On this page */
.toc {
  margin: 0 0 40px;
  padding: 16px 20px;
  background: var(--card);
  border-radius: var(--radius-sm);
}

.prose .toc__title {
  margin: 0 0 8px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
}

.toc ol {
  margin: 0;
  padding-left: 1.25em;
  columns: 220px 2;
  column-gap: 32px;
}

.toc li { break-inside: avoid; }

/* White panels: summary, safety note */
.callout {
  margin: 24px 0;
  padding: 18px 20px;
  background: var(--card);
  border-radius: var(--radius-sm);
}

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

.prose .callout__title {
  margin: 0 0 6px;
  font-weight: 600;
}

.callout--summary { font-size: 1.0625rem; }

/* Tables scroll inside their own panel, never the page. */
.table-scroll {
  margin: 20px 0 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--card);
  border-radius: var(--radius-sm);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.prose caption {
  caption-side: bottom;
  padding: 10px 16px 14px;
  font-size: 0.8125rem;
  color: var(--ink-2);
  text-align: left;
}

.prose th,
.prose td {
  padding: 10px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--hairline);
}

.prose thead th {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
}

.prose tbody th { font-weight: 600; }

.prose tbody tr:last-child > * { border-bottom: 0; }

.prose .nowrap { white-space: nowrap; }

/* Narrow phones: tighter cells so the session and zone tables fit at 375 px; below that the panel scrolls. */
@media (max-width: 479px) {
  .prose table { font-size: 0.875rem; }

  .prose th,
  .prose td { padding: 8px 10px; }
}

/* Stage dots in the session table, in the app's stage colours */
.stage {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.stage::before {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink-3);
}

.stage--work::before { background: var(--work); }
.stage--recovery::before { background: var(--rec-fill); }
.stage--easy::before { background: var(--easy-fill); }

/* Research cards in the guide */
.evidence {
  margin: 16px 0;
  padding: 20px;
  background: var(--card);
  border-radius: var(--radius-sm);
}

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

.prose .evidence h3 { margin-top: 0; }

.evidence__caveat {
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.evidence__caveat strong { color: var(--ink); }

.cite {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.prose p.cite { margin-bottom: 4px; }

/* FAQ answers: the disclosure look comes from site.css */
.prose .faq { margin: 16px 0 0; }

.prose .faq p:last-child,
.prose .faq ul:last-child { margin-bottom: 0; }

/* Press: short descriptions, key facts, downloads, screens, brand */
.blurb {
  margin: 12px 0 24px;
  padding: 18px 20px;
  background: var(--card);
  border-radius: var(--radius-sm);
}

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

.facts {
  padding: 4px 20px;
  background: var(--card);
  border-radius: var(--radius-sm);
}

.facts > div {
  display: grid;
  gap: 2px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}

.facts > div:last-child { border-bottom: 0; }

.facts dt {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-2);
}

.facts dd { margin: 0; }

@media (min-width: 560px) {
  .facts > div {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 16px;
  }
}

.prose .downloads {
  display: grid;
  gap: 12px;
  padding: 0;
  list-style: none;
}

.prose .downloads li { margin: 0; }

.download {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 88px;
  padding: 12px 16px;
  background: var(--card);
  border-radius: var(--radius-sm);
}

.download__icon {
  flex: none;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: var(--sunken);
}

.download__meta {
  display: block;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.shots {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(160px, 62%);
  gap: 16px;
  margin: 20px 0 24px;
  padding-bottom: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.shots figure {
  margin: 0;
  scroll-snap-align: start;
}

.shots img {
  display: block;
  width: 100%;
  border-radius: var(--radius-sm);
  background: var(--sunken);
}

.shots figcaption {
  margin-top: 8px;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ink-2);
}

@media (min-width: 640px) {
  .shots {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow-x: visible;
  }
}

.prose .swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  padding: 0;
  list-style: none;
}

.prose .swatches li { margin: 0; }

.swatches li {
  padding: 12px;
  background: var(--card);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  line-height: 1.4;
}

.swatch {
  display: block;
  height: 56px;
  margin-bottom: 10px;
  border-radius: 8px;
}

/* The paper swatch sits on a white panel; a hairline keeps its edge visible. */
.swatch--paper {
  background: var(--paper);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.swatch--ink { background: var(--ink); }
.swatch--ember { background: var(--ember); }

.swatch__hex {
  display: block;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.mark-sample {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0;
  padding: 16px 20px;
  background: var(--card);
  border-radius: var(--radius-sm);
}

.mark-sample img {
  flex: none;
  width: 72px;
  height: 72px;
}

.prose .mark-sample p { margin: 0; }

/* Call to action at the end of a page */
.cta-panel {
  margin: 48px 0 0;
  padding: 24px 20px;
  background: var(--card);
  border-radius: var(--radius);
}

.prose .cta-panel h2 { margin-top: 0; }

.prose .cta-panel > :last-child { margin-bottom: 0; }

.prose .cta-panel .store-cta { margin: 4px 0 16px; }

@media (min-width: 768px) {
  .cta-panel { padding: 32px; }
}