/* Guides.
 *
 * Loaded after kv_country_bw.css and adds only what a long read needs that a
 * landing page did not: prose measure, a first-paragraph answer, numbered
 * steps outside a section wrapper, and the limits box.
 *
 * Same variables, same fallbacks, no JavaScript.
 */

.kvg { padding: 22px 0 8px; }

.kvg h1 {
  margin: 0 0 16px;
  font-size: clamp(1.6rem, 5vw, 2.25rem);
  line-height: 1.15; letter-spacing: -.02em; font-weight: 700;
  text-wrap: balance;
}

/* The answer. Set larger than the body so the eye lands on it first: somebody
   who reads only this paragraph should be able to leave satisfied. */
.kvg-answer {
  font-size: 1.08rem;
  line-height: 1.6;
  margin: 0 0 30px;
  padding-left: 15px;
  border-left: 3px solid var(--fg, #0a0a0a);
  max-width: 64ch;
}

.kvg h2 {
  margin: 34px 0 10px;
  font-size: 1.22rem; letter-spacing: -.01em; font-weight: 700;
  text-wrap: balance;
}
.kvg p { margin: 0 0 14px; max-width: 64ch; }

.kvg-list { margin: 0 0 16px; padding-left: 20px; max-width: 64ch; }
.kvg-list li { margin-bottom: 7px; }
.kvg-list li::marker { color: var(--muted-fg, #6b6b6b); }

/* Numbered steps, matching the country pages but usable on their own. */
.kvc-steps-ol { margin: 6px 0 18px; padding: 0; list-style: none; counter-reset: kvg; }
.kvc-steps-ol li {
  counter-increment: kvg;
  display: grid; grid-template-columns: 30px 1fr; gap: 3px 12px;
  padding: 13px 0; border-top: 1px solid var(--border, #e6e6e6);
}
.kvc-steps-ol li:last-child { border-bottom: 1px solid var(--border, #e6e6e6); }
.kvc-steps-ol li::before {
  content: counter(kvg);
  grid-row: span 2;
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--border, #e6e6e6);
  font-size: .78rem; font-weight: 700;
  color: var(--muted-fg, #6b6b6b);
}
.kvc-steps-ol li b { font-size: .97rem; }
.kvc-steps-ol li span { color: var(--muted-fg, #6b6b6b); font-size: .9rem; }

/* The limits. Deliberately quiet rather than a red alarm - it is information
   the reader needs, not a scolding, and an alarm gets skipped. */
.kvg-warn {
  margin: 30px 0 8px;
  padding: 17px 19px;
  border: 1px solid var(--border, #e6e6e6);
  border-left: 3px solid var(--muted-fg, #6b6b6b);
  border-radius: 0 12px 12px 0;
  background: var(--card, #fafafa);
}
.kvg-warn b { display: block; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 7px; }
.kvg-warn p { margin: 0; font-size: .93rem; color: var(--muted-fg, #6b6b6b); max-width: 64ch; }

.kvg h2#faq { margin-top: 36px; }

/* The index cards carry a full sentence, so they need room to breathe. */
.kvc-others.wide li a span { line-height: 1.4; }