/* Chapel Pointe · Sunday Scorecard — reset, typography and layout primitives. */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"], .list-reset { list-style: none; padding: 0; }

img, picture, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
textarea { resize: vertical; }
table { border-collapse: collapse; border-spacing: 0; }
hr { border: 0; border-top: 1px solid var(--hairline); margin: 0; }
[hidden] { display: none !important; }

/* ---- Document --------------------------------------------------------------------- */
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
  transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

::selection { background: var(--selection); color: inherit; }

/* ---- Type roles ------------------------------------------------------------------------
   Newsreader (serif) is for titles only, always upright: page titles, section / card titles,
   the big Sunday date. Jost is for everything people read as text — ledes, help, descriptions,
   notes, quotes, tooltips, tables. No italic in UI copy; the one exception is the three-word
   tagline (.t-tagline). Full rules: docs/FRONTEND.md §3. */
h1, h2, h3, h4, .serif,
.t-display, .t-title, .t-section, .t-section--sm {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-style: normal;
  font-weight: 450;
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-tight);
  color: var(--ink);
  text-wrap: balance;
}
h1, .display { font-size: var(--fs-title); font-weight: 400; }
h2 { font-size: var(--fs-32); font-weight: 400; }
h3 { font-size: var(--fs-section); }
h4 { font-size: var(--fs-card-title); line-height: var(--lh-snug); }
h5, h6 { font-size: var(--fs-14); font-weight: 600; }

.t-display, .display-xl { font-family: var(--font-serif); font-style: normal; font-size: var(--fs-display); font-weight: 400; line-height: 1.05; letter-spacing: -0.018em; }
.t-title { font-size: var(--fs-title); font-weight: 400; line-height: 1.08; letter-spacing: -0.015em; }
.t-section { font-size: var(--fs-section); font-weight: 450; line-height: 1.2; letter-spacing: -0.01em; }
.t-section--sm { font-size: var(--fs-card-title); font-weight: 500; line-height: var(--lh-snug); letter-spacing: -0.005em; }
.title-lg { font-family: var(--font-serif); font-size: var(--fs-32); font-weight: 400; line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
.title { font-family: var(--font-serif); font-size: var(--fs-section); font-weight: 450; line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
.title-sm { font-family: var(--font-serif); font-size: var(--fs-card-title); font-weight: 500; line-height: var(--lh-snug); letter-spacing: -0.005em; }

/* Reading text — all Jost, all upright. */
.t-lede, .lede {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--fs-lede);
  font-weight: 400;
  line-height: var(--lh-lede);
  color: var(--ink-2);
  max-width: var(--measure);
  text-wrap: pretty;
}
.t-body { font-family: var(--font-sans); font-style: normal; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink); }
.t-comment { font-family: var(--font-sans); font-style: normal; font-size: var(--fs-comment); line-height: var(--lh-comment); color: var(--ink); }
.t-help { font-family: var(--font-sans); font-style: normal; font-size: var(--fs-help); font-weight: 400; line-height: var(--lh-help); color: var(--muted); }
.t-meta { font-family: var(--font-sans); font-style: normal; font-size: var(--fs-meta); line-height: 1.4; color: var(--muted); }
/* The single italic exception: "Clarity · Presence · Movement" (landing, survey welcome). */
.t-tagline { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: var(--fs-20); line-height: 1.3; color: var(--ink-2); }
/* Deprecated: .serif-italic now renders upright Jost (no italic in UI copy). Use .t-help / .t-body. */
.serif-italic { font-family: var(--font-sans); font-style: normal; }

p { text-wrap: pretty; }
small, .text-sm { font-size: var(--fs-13); }
.text-xs { font-size: var(--fs-12); }
.text-lg { font-size: var(--fs-16); }
.text-2 { color: var(--ink-2); }
.text-muted { color: var(--muted); }
.text-bronze { color: var(--bronze-ink); }
.text-clay { color: var(--clay-ink); }
.text-slate { color: var(--slate); }
.num, .tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.weight-500 { font-weight: 500; }
.weight-600 { font-weight: 600; }

/* Brand caps — eyebrows and kickers ("WORSHIP · TEACHING · PLATFORM"). .t-kicker = .kicker. */
.eyebrow, .kicker, .t-kicker {
  font-family: var(--font-brand);
  font-size: var(--fs-11);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-2);
}
.kicker, .t-kicker, .eyebrow--bronze { color: var(--bronze-ink); }
.eyebrow--muted { color: var(--muted); }

/* ---- Links -------------------------------------------------------------------------- */
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: currentColor; }
a.link-quiet { text-decoration: none; color: var(--ink-2); }
a.link-quiet:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); }

/* ---- Focus -------------------------------------------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.skip-link {
  position: fixed;
  left: var(--space-4);
  top: var(--space-3);
  z-index: calc(var(--z-header) + 1);
  padding: var(--space-2) var(--space-4);
  background: var(--brand);
  color: var(--on-brand);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }
/* The skip link's target takes focus without a ring around the whole page; the next Tab lands on a
   real control, which shows one. */
main[tabindex="-1"]:focus-visible { outline: none; }

/* ---- Scrollbars (quiet) -------------------------------------------------------------- */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: var(--muted); }

/* ---- Accessibility helpers ---------------------------------------------------------- */
.visually-hidden, .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Layout primitives ---------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--content-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(760px + 2 * var(--gutter)); }
.container--reading { max-width: calc(960px + 2 * var(--gutter)); }

.page { padding-block: var(--space-6) var(--space-8); }

.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }
.stack > * { min-width: 0; }
.stack-xs { --stack-gap: var(--space-1); }
.stack-sm { --stack-gap: var(--space-2); }
.stack-md { --stack-gap: var(--space-3); }
.stack-lg { --stack-gap: var(--space-5); }
.stack-xl { --stack-gap: var(--space-6); }
.stack-2xl { --stack-gap: var(--space-7); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-2));
}
.cluster-sm { --cluster-gap: var(--space-1); }
.cluster-md { --cluster-gap: var(--space-3); }
.cluster-lg { --cluster-gap: var(--space-4); }
.cluster-xl { --cluster-gap: var(--space-5); }
.cluster--nowrap { flex-wrap: nowrap; }
.cluster--between { justify-content: space-between; }
.cluster--end { justify-content: flex-end; }
.cluster--start { align-items: flex-start; }
.cluster--baseline { align-items: baseline; }

.spacer { flex: 1 1 auto; }

.grid { display: grid; gap: var(--grid-gap, var(--space-5)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 220px), 1fr)); }
.grid-gap-sm { --grid-gap: var(--space-3); }
.grid-gap-md { --grid-gap: var(--space-4); }
.grid-gap-lg { --grid-gap: var(--space-6); }

/* A two-column page with a sticky left rail (survey, manage). */
.with-rail {
  display: grid;
  grid-template-columns: var(--rail-w, 280px) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}
.with-rail > .rail {
  position: sticky;
  top: calc(var(--header-h) + var(--space-5));
}
/* A sticky grid item can't leave its grid area: the content column's bottom padding is the room the
   rail has to settle at the end of the page (otherwise a tall rail slides up under the header).
   Raise --rail-tail for a taller rail. */
.with-rail > :not(.rail) { padding-bottom: var(--rail-tail, var(--space-7)); }
@media (max-width: 1180px) {
  .with-rail { --rail-w: 240px; gap: var(--space-6); }
}

/* ---- Phones and tablets (ROUND5-CONTRACT §1) -------------------------------------------------
   phone ≤ 600px · tablet 601–1023px · desktop ≥ 1024px (unchanged). There is no page-wide width floor:
   the 16px phone gutter comes from --gutter (tokens.css). Wide content (heatmaps, big tables) scrolls
   inside its own card (.scroll-x, .table-wrap), never the page. */
@media (max-width: 1023px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .page { padding-block: var(--space-5) var(--space-7); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .grid-auto { grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min, 220px), 100%), 1fr)); }
  /* The rail stacks on top and stops sticking; pages restyle it (survey: a progress strip). */
  .with-rail { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .with-rail > .rail { position: static; }
  .with-rail > :not(.rail) { padding-bottom: 0; }
  /* iOS zooms into any focused field under 16px. Classed fields are set in components.css; this
     catches bare ones. */
  :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), select, textarea) {
    font-size: max(16px, var(--fs-16));
  }
}

/* ---- Breakpoint helpers ---------------------------------------------------------------------- */
@media (max-width: 600px) {
  .hide-phone { display: none !important; }
}
@media (min-width: 601px) {
  .only-phone { display: none !important; }
}
@media (max-width: 1023px) {
  .hide-below-desktop { display: none !important; }
}
@media (min-width: 1024px) {
  .only-below-desktop { display: none !important; }
}

/* ---- Sideways scrolling (shared, any width) --------------------------------------------------
   .scroll-x — wide content that scrolls inside its own card: <div class="scroll-x"><table …></div>.
     Give the inner element a floor with --scroll-min (e.g. style="--scroll-min: 640px") when it
     would otherwise squash instead of scrolling.
   .scroll-row — a single row of tabs / chips / pills that scrolls sideways instead of wrapping
     (no visible scrollbar; children keep their width). Add .scroll-row--bleed to run it to the
     screen edges through the page gutter (the first and last items still line up with the gutter). */
.scroll-x {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
.scroll-x > * { min-width: var(--scroll-min, 0); }
.scroll-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--scroll-row-gap, var(--space-2));
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-padding-inline: var(--gutter);
}
.scroll-row::-webkit-scrollbar { display: none; }
.scroll-row > * { flex: none; }
.scroll-row--bleed {
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  max-width: none;
}