/* RoadKeeper design tokens — v6 "Clear day" (supersedes v5 frosted glass) */
:root{
  /* Stone base (cool gray, warm-leaning) — fixed for every association */
  --rk-chalk:#FAF9F6;      /* cards, one step lighter than page */
  --rk-gravel:#F1EFEA;     /* page background */
  --rk-dust:#E7E3DB;       /* sunken wells, table headers */
  --rk-hairline:#D8D4CA;   /* default borders */
  --rk-edge:#B8B2A5;       /* strong borders, dividers on dust */
  --rk-bark:#5F594F;       /* secondary text — 5.9:1 on gravel (AA) */
  --rk-loam:#2B2620;       /* primary text — 11.9:1 on gravel (AAA) */
  /* Dark surfaces — treasurer accent panels only (road fund card). Never a full-page shell. */
  --rk-loam-card:#35302A;  /* raised card on a loam panel */
  --rk-loam-edge:#4C453B;  /* borders on loam */
  --rk-ash:#B5AEA2;        /* secondary text on loam — 6.8:1 (AA, not AAA): meta text only */
  /* Brand jade — wordmark, buttons, active states, links. Nowhere else. */
  --rk-sage:#A9B491;       /* brand moments, progress, active dots — no longer the button fill */
  --rk-fern:#5C6B49;       /* THE primary: buttons (chalk text 6.1:1), wordmark tile, active borders */
  --rk-primary:var(--rk-fern); --rk-on-primary:var(--rk-chalk);
  --rk-primary-shadow:0 8px 20px rgba(92,107,73,.3);
  --rk-link:#46543A;       /* links — pine; 4.49:1 on dust made fern unsafe as the link default */
  --rk-sage-hover:#96A27D; /* primary button hover */
  --rk-pine:#46543A;       /* pressed / link hover */
  --rk-mist:#EAEDE3;       /* brand tint background */
  --rk-jade-ink:#3E4A33;   /* text on mist */
  /* Semantic status — separate from brand jade, never overridden */
  /* paid — one green across product and lattice. Soft-pill only: base is a fill, ink carries the text.
     Supersedes the retired forest triad (SUPERSEDED, values only in tokens/superseded/, do not reuse).
     ink on soft 7.4:1 · ink on gravel 7.5:1 · white on base 4.9:1 · word label always present */
  --rk-forest:#3F7D62; --rk-forest-soft:#E2EFE9; --rk-forest-ink:#26543F;
  --rk-brick:#872621;  --rk-brick-soft:#F3DFDB; --rk-brick-ink:#6B1E1A;   /* overdue */
  --rk-ochre:#8A6A1B;  --rk-ochre-soft:#F1E8CF; --rk-ochre-ink:#6B520F;   /* partial */
  --rk-slate:#55606B;  --rk-slate-soft:#E4E7EA; --rk-slate-ink:#424C56;   /* info / open */
  /* Association accent slots — set per association, derived at save time */
  --assn-accent:#5C6B49;        /* default = brand fern until treasurer picks */
  --assn-accent-strong:#46543A; /* darken 14% */
  --assn-accent-soft:#EAEDE3;   /* mix 12% into chalk */
  --assn-accent-ink:#3E4A33;    /* darken 26% */
  /* Type — Source Sans 3 for all UI; Bitter for wordmark + PDF headings ONLY */
  --rk-font-ui:'Source Sans 3',-apple-system,'Segoe UI',sans-serif;
  --rk-font-doc:'Bitter',Georgia,serif;
  /* weights: 400 regular, 500 medium, 600 semibold (buttons, page headlines only) */
  --rk-display:34px; --rk-display-lh:42px; /* medium */
  --rk-h1:28px; --rk-h1-lh:36px;           /* medium */
  --rk-h2:22px; --rk-h2-lh:30px;           /* medium */
  --rk-h3:18px; --rk-h3-lh:26px;           /* medium */
  --rk-body-lg:18px; --rk-body-lg-lh:28px;
  --rk-body:17px; --rk-body-lh:26px;       /* floor on treasurer screens */
  --rk-small:15px; --rk-small-lh:22px;     /* meta only, never primary copy */
  /* Spacing (4px base) */
  --rk-s1:4px; --rk-s2:8px; --rk-s3:12px; --rk-s4:16px;
  --rk-s5:24px; --rk-s6:32px; --rk-s7:48px; --rk-s8:64px;
  /* Radius — Clear day: buttons are pills, cards are 24 */
  --rk-r-input:12px; --rk-r-control:999px; --rk-r-well:16px; --rk-r-card:24px; --rk-r-card-lg:28px; --rk-r-tag:999px;
  /* Page: linear-gradient(180deg,#EAEDE3 0%,#F6F5F0 40%,#FAF9F6 100%) fixed. Cards are flat chalk, no border, ambient shadow; hover lifts 2–4px. Entrance: rkUp .5s, stagger 70ms. */
  --rk-page:linear-gradient(180deg,#EAEDE3 0%,#F6F5F0 40%,#FAF9F6 100%);
  --rk-card-shadow:0 2px 10px rgba(43,38,32,.06);
  --rk-card-hover:0 18px 40px rgba(43,38,32,.14);
  /* Glass surfaces — SUPERSEDED by v6, kept for reference */
  --rk-glass:rgba(250,249,246,.62);        /* frosted card bg */
  --rk-glass-strong:rgba(250,249,246,.78); /* menus, headers */
  --rk-glass-border:rgba(255,255,255,.6);
  --rk-blur:16px;                          /* backdrop-filter: blur(var(--rk-blur)) */
  /* Elevation — soft rounded shadows under frosted glass */
  --rk-e1:0 6px 18px rgba(43,38,32,.10);
  --rk-e2:0 10px 28px rgba(43,38,32,.12);
  --rk-e3:0 16px 48px rgba(43,38,32,.20);
  --rk-tap-min:44px;
  --rk-focus:0 0 0 3px #FAF9F6,0 0 0 6px var(--rk-fern);
}
/* Lattice stylesheet. Color values come from tokens/roadkeeper.css (imported first in
   the built asset); this file references the variables only — the jade/stone palette
   has exactly one home. Print rules per lattice/18: chrome strips, article prints. */

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--rk-chalk, #FAF9F6);
  color: var(--rk-loam, #2B2620);
  font: 400 17px/27px 'Source Sans 3', system-ui, sans-serif;
}
a { color: var(--rk-pine, #46543A); }
h1 { font: 500 34px/1.2 Bitter, Georgia, serif; margin: 18px 0 20px; }
h2 { font: 500 24px/1.3 Bitter, Georgia, serif; margin: 34px 0 12px; }

/* shared header — chalk bar mount (18's contract; hidden in print) */
.rk-header {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--rk-chalk, #FAF9F6);
  border-bottom: 1px solid var(--rk-hairline, #D8D4CA);
  padding: 12px clamp(16px, 4vw, 40px);
}
.rk-wordmark {
  display: inline-flex; align-items: center; gap: 8px;
  font: 500 19px/1 Bitter, Georgia, serif;
  color: var(--rk-loam, #2B2620); text-decoration: none;
}
.rk-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--rk-sage, #A9B491); display: inline-block; }
.rk-header-actions { display: flex; align-items: center; gap: 14px; }
.rk-pill {
  display: inline-block; border-radius: 999px; padding: 10px 18px;
  font: 600 14px/1 'Source Sans 3', sans-serif; text-decoration: none;
  min-height: 44px; display: inline-flex; align-items: center;
}
.rk-pill-outline { border: 1px solid var(--rk-edge, #B8B2A5); color: var(--rk-loam, #2B2620); }
.rk-pill-primary { background: var(--rk-fern, #5C6B49); color: var(--rk-chalk, #FAF9F6); }
.rk-pill-sage { background: var(--rk-sage, #A9B491); color: var(--rk-loam, #2B2620); }
.rk-login { font: 400 14px/1 'Source Sans 3', sans-serif; color: var(--rk-loam, #2B2620); }

/* layout: article + sibling-ring sidebar; ring reflows UNDER the FAQ on narrow
   screens, never behind a toggle (18 trap) */
.rk-page {
  display: grid; grid-template-columns: minmax(0, 66ch) minmax(220px, 300px);
  gap: 40px; padding: 28px clamp(16px, 4vw, 40px); max-width: 1140px; margin: 0 auto;
}
@media (max-width: 900px) { .rk-page { grid-template-columns: 1fr; } .rk-ring { order: 10; } }

.rk-crumb { font-size: 15px; color: var(--rk-bark, #5F594F); }
.rk-crumb a { color: inherit; }

.rk-answer {
  background: var(--rk-loam, #2B2620); color: var(--rk-chalk, #FAF9F6);
  border-radius: 20px; padding: 20px 24px; margin: 6px 0 10px;
}
.rk-answer-label {
  font: 500 12px/16px 'Source Sans 3', sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rk-sage, #A9B491);
}
.rk-answer p { font-size: 19px; line-height: 30px; font-weight: 300; margin: 8px 0 0; }

.rk-callout {
  border: 1px solid var(--rk-hairline, #D8D4CA); border-radius: 14px;
  padding: 14px 18px; margin: 14px 0; background: #FFFFFF;
}
.rk-callout-label {
  font: 500 12px/16px 'Source Sans 3', sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rk-bark, #5F594F);
}
.rk-callout p { margin: 6px 0 0; }

.rk-cta { border-radius: 20px; padding: 20px 24px; margin: 26px 0; }
.rk-cta-soft { background: var(--rk-gravel, #F1EFEA); }
.rk-cta-product { background: var(--rk-loam, #2B2620); color: var(--rk-chalk, #FAF9F6); }
.rk-cta p { margin: 0 0 12px; }

.rk-state-link {
  border: 1px solid var(--rk-hairline, #D8D4CA); border-radius: 14px;
  padding: 16px 20px; margin: 22px 0;
}
.rk-state-link-heading {
  font: 500 12px/16px 'Source Sans 3', sans-serif; letter-spacing: .1em;
  text-transform: uppercase; color: var(--rk-bark, #5F594F);
}

/* FAQ: nine pairs, always open, no accordion — answers stay in the DOM (18) */
.rk-faq-pair { border-top: 1px solid var(--rk-hairline, #D8D4CA); padding: 12px 0; }
.rk-faq-q { font-weight: 500; margin: 0 0 4px; }
.rk-faq-a { color: var(--rk-bark, #5F594F); margin: 0; }

.rk-byline { display: flex; gap: 12px; align-items: flex-start; border-top: 1px solid var(--rk-hairline, #D8D4CA); padding-top: 18px; margin-top: 30px; }
.rk-byline-team { font-weight: 500; }
.rk-byline p { margin: 2px 0 0; font-size: 15px; color: var(--rk-bark, #5F594F); }

.rk-ring { align-self: start; background: #FFFFFF; border: 1px solid var(--rk-hairline, #D8D4CA); border-radius: 20px; padding: 18px 20px; }
.rk-ring-heading { font: 500 12px/16px 'Source Sans 3', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--rk-bark, #5F594F); }
.rk-ring ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.rk-footer {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--rk-hairline, #D8D4CA);
  padding: 20px clamp(16px, 4vw, 40px); font-size: 15px; color: var(--rk-bark, #5F594F);
  max-width: 1140px; margin: 0 auto;
}
.rk-footer nav { display: flex; gap: 16px; }

@media print {
  .rk-header, .rk-ring, .rk-cta, .rk-footer, .rk-state-link { display: none !important; }
  .rk-page { display: block; padding: 0; }
  body { background: #FFFFFF; }
  .rk-answer { color: #000; background: #FFF; border: 1px solid #999; }
}

/* resource page (template L): the exchange form. Inputs use the token radius and the
   ring focus; the checkbox sentence is body copy, not a label in caps. */
.rk-resource { background: var(--rk-chalk, #FAF9F6); border-radius: var(--rk-r-card, 24px); box-shadow: var(--rk-card-shadow, 0 2px 10px rgba(43,38,32,.06)); padding: 24px; margin: 22px 0 30px; }
.rk-resource-form { display: flex; flex-direction: column; gap: 14px; }
.rk-resource-field { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
.rk-resource-field input { font: 400 17px/26px 'Source Sans 3', sans-serif; color: var(--rk-loam, #2B2620); background: #FFFFFF; border: 1px solid var(--rk-hairline, #D8D4CA); border-radius: var(--rk-r-input, 12px); padding: 10px 14px; min-height: var(--rk-tap-min, 44px); }
.rk-resource-field input:focus { outline: none; box-shadow: var(--rk-focus, 0 0 0 3px #FAF9F6, 0 0 0 6px #5C6B49); }
.rk-resource-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; }
.rk-resource-check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--rk-fern, #5C6B49); }
.rk-resource-form button { align-self: flex-start; border: 0; cursor: pointer; font: 500 16px/20px 'Source Sans 3', sans-serif; }
.rk-resource-note { margin: 0; font-size: 15px; color: var(--rk-bark, #5F594F); }