/* Good Steward Money help center. Copied to dist/assets/kb.css by scripts/kb.mjs.
   Brand tokens match the marketing site (website-v3/app/globals.css). */

:root {
  color-scheme: light dark;
  --bg: hsl(43 30% 96%);
  --surface: hsl(0 0% 100%);
  --line: hsl(42 22% 87%);
  --ink: hsl(147 13% 17%);
  --muted: hsl(152 6% 43%);
  --primary: hsl(121 21% 38%);
  --primary-strong: hsl(121 23% 30%);
  --primary-soft: hsl(104 42% 93%);
  --accent: hsl(37 85% 62%);
  --accent-strong: hsl(33 95% 32%);
  --accent-soft: hsl(40 78% 93%);
  --ember: hsl(17 59% 41%);
  --ember-soft: hsl(20 60% 94%);
  --shadow-card: 0 1px 2px hsl(147 13% 17% / 0.04), 0 4px 16px hsl(147 13% 17% / 0.05);
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: 16px;
}

/* Theme: the app's choice (gs_theme cookie: light | dark | system), set on <html data-theme> by the
   inline script in each page head. "system", or no choice, follows the device setting. */
:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: hsl(156 14% 9%);
  --surface: hsl(156 11% 12%);
  --line: hsl(150 7% 24%);
  --ink: hsl(44 30% 92%);
  --muted: hsl(150 8% 60%);
  --primary: hsl(121 34% 48%);
  --primary-strong: hsl(121 40% 60%);
  --primary-soft: hsl(124 24% 17%);
  --accent: hsl(40 88% 62%);
  --accent-strong: hsl(42 90% 64%);
  --accent-soft: hsl(38 44% 17%);
  --ember: hsl(17 60% 58%);
  --ember-soft: hsl(18 35% 16%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: hsl(156 14% 9%);
    --surface: hsl(156 11% 12%);
    --line: hsl(150 7% 24%);
    --ink: hsl(44 30% 92%);
    --muted: hsl(150 8% 60%);
    --primary: hsl(121 34% 48%);
    --primary-strong: hsl(121 40% 60%);
    --primary-soft: hsl(124 24% 17%);
    --accent: hsl(40 88% 62%);
    --accent-strong: hsl(42 90% 64%);
    --accent-soft: hsl(38 44% 17%);
    --ember: hsl(17 60% 58%);
    --ember-soft: hsl(18 35% 16%);
  }
}

/* Footer theme switch */
.kb-theme { margin: 0 0 8px; color: var(--muted); font-size: 0.875rem; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kb-theme button { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; cursor: pointer; }
.kb-theme button[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-strong); font-weight: 600; }
.kb-theme button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
@media print { .kb-theme { display: none !important; } }

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

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

@media (min-width: 640px) {
  html { font-size: 17px; --gutter: 24px; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-wrap: break-word;
}

.kb-main { flex: 1 0 auto; padding-bottom: 3rem; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.kb-wrap {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.kb-skip {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 100;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
}
.kb-skip:focus { top: 8px; }

a { color: var(--primary-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

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

img { max-width: 100%; height: auto; }

/* ------------------------------------------------------------- header */

.kb-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.kb-header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "brand app" "search search";
  align-items: center;
  gap: 8px 16px;
}

.kb-brand { grid-area: brand; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; font-size: 1.0625rem; white-space: nowrap; }
.kb-brand-mark { flex: none; display: block; }
/* Phones under 400px: the mark stands for the name, so the header fits beside "Open the app". */
@media (max-width: 399px) { .kb-brand-name { display: none; } }
.kb-brand:hover { text-decoration: none; }
.kb-brand-sub { color: var(--muted); font-weight: 500; }
.kb-app-link { grid-area: app; font-weight: 500; font-size: 0.9375rem; white-space: nowrap; }
.kb-header .kb-search { grid-area: search; }

@media (min-width: 720px) {
  .kb-header-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "brand search app";
    gap: 16px 24px;
  }
  .kb-header .kb-search { max-width: 460px; justify-self: center; width: 100%; }
}

@media (max-width: 719px) {
  .kb-home .kb-header .kb-search { display: none; }
}

/* ------------------------------------------------------------- search */

.kb-search { position: relative; }

.kb-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}

.kb-search-input {
  width: 100%;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px 8px 38px;
  -webkit-appearance: none;
  appearance: none;
}
.kb-search-input::placeholder { color: var(--muted); }
.kb-search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }

.kb-search-large .kb-search-icon { left: 18px; width: 22px; height: 22px; }
.kb-search-large .kb-search-input {
  font-size: 1.125rem;
  padding: 14px 20px 14px 52px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.kb-results {
  position: absolute;
  z-index: 50;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 4px 8px hsl(147 13% 17% / 0.08), 0 12px 32px hsl(147 13% 17% / 0.12);
  max-height: min(70vh, 560px);
  overflow-y: auto;
  text-align: left;
}
.kb-results[hidden] { display: none; }

.kb-results li { margin: 0; }
.kb-results a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--ink);
}
.kb-results a:hover { text-decoration: none; }
.kb-results li[aria-selected="true"] a,
.kb-results a:hover { background: var(--primary-soft); }
.kb-r-title { display: block; font-weight: 600; font-size: 0.9375rem; }
.kb-r-summary { display: block; color: var(--muted); font-size: 0.875rem; line-height: 1.4; }
.kb-r-cat { display: block; color: var(--primary-strong); font-size: 0.75rem; font-weight: 500; margin-top: 2px; }
.kb-r-empty { padding: 10px; color: var(--muted); font-size: 0.9375rem; }

/* -------------------------------------------------------------- home */

.kb-hero { padding: 2.5rem 0 1.5rem; max-width: 720px; }
.kb-hero h1 { margin: 0 0 0.5rem; }
.kb-tagline { margin: 0 0 1.25rem; color: var(--muted); font-size: 1.0625rem; }

h1 { font-size: 2rem; font-weight: 600; line-height: 1.2; margin: 0 0 0.75rem; }
h2 { font-size: 1.375rem; font-weight: 600; line-height: 1.3; margin: 2.25rem 0 0.75rem; }
h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.35; margin: 1.75rem 0 0.5rem; }
h4 { font-size: 1rem; font-weight: 600; margin: 1.5rem 0 0.5rem; }
h2[id], h3[id], h4[id] { scroll-margin-top: 1rem; }

.kb-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0.5rem 0 0;
}
@media (min-width: 640px) { .kb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.kb-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.kb-card-title { font-size: 1.1875rem; margin: 0 0 0.25rem; }
.kb-card-desc { margin: 0 0 0.5rem; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.kb-card-count { margin: 0 0 0.25rem; font-size: 0.8125rem; color: var(--muted); font-weight: 500; }
.kb-card-list { margin: 0 0 0.75rem; padding: 0; list-style: none; font-size: 0.9375rem; }
.kb-card-list li { padding: 3px 0; }
.kb-card-all { margin: auto 0 0; font-size: 0.9375rem; font-weight: 500; }
.kb-card-empty { margin: 0; color: var(--muted); font-size: 0.9375rem; }

.kb-common { margin-top: 2.5rem; }
.kb-common h2, .kb-query-results h2 { margin-top: 0; }
.kb-query-results { margin-top: 0.5rem; }

/* Lists of articles: category pages, common questions, related, search results. */
.kb-list { list-style: none; margin: 0; padding: 0; }
.kb-list li { padding: 0.75rem 0; border-top: 1px solid var(--line); }
.kb-list li:first-child { border-top: 0; }
.kb-list > li > a:first-child { font-weight: 600; }
.kb-item-summary { display: block; color: var(--muted); font-size: 0.9375rem; line-height: 1.45; }
.kb-type {
  display: inline-block;
  margin-left: 6px;
  padding: 0 8px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--primary-strong);
  background: var(--primary-soft);
  border-radius: 999px;
  vertical-align: 1px;
}
.kb-empty { color: var(--muted); }
.kb-result-cat { display: block; color: var(--primary-strong); font-size: 0.75rem; font-weight: 500; }

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

.kb-crumbs { margin: 1.25rem 0 1rem; font-size: 0.875rem; color: var(--muted); }
.kb-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.kb-crumbs li:not(:last-child)::after { content: "\203A"; margin: 0 8px; color: var(--muted); }
.kb-crumbs [aria-current] { color: var(--ink); }

.kb-lead { font-size: 1.125rem; color: var(--muted); margin: 0 0 0.5rem; }
.kb-updated { font-size: 0.875rem; color: var(--muted); margin: 0 0 1.5rem; }

/* ------------------------------------------------------------ article */

.kb-article-layout { display: block; }
.kb-article-col { min-width: 0; max-width: 720px; }

.kb-toc a { color: var(--primary-strong); }
.kb-toc ul { list-style: none; margin: 0; padding: 0; }
.kb-toc li { margin: 0; padding: 3px 0; font-size: 0.9375rem; line-height: 1.4; }
.kb-toc-inline {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 16px;
  margin: 0 0 1.25rem;
}
.kb-toc-inline summary { cursor: pointer; font-weight: 600; font-size: 0.9375rem; }
.kb-toc-inline ul { margin-top: 6px; }
.kb-toc-side { display: none; }
.kb-toc-title { margin: 0 0 6px; font-weight: 600; font-size: 0.875rem; color: var(--muted); }

@media (min-width: 1100px) {
  .kb-article-layout.has-toc {
    display: grid;
    grid-template-columns: minmax(0, 720px) 240px;
    gap: 56px;
    align-items: start;
  }
  .kb-toc-inline { display: none; }
  .kb-toc-side {
    display: block;
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    padding-left: 16px;
    border-left: 1px solid var(--line);
  }
}

.kb-body > :first-child { margin-top: 0; }
.kb-body p { margin: 0 0 1rem; }
.kb-body a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }

.kb-body ul, .kb-body ol { margin: 0 0 1rem; padding-left: 1.5rem; }
.kb-body li { margin: 0.25rem 0; }
.kb-body li > p { margin: 0 0 0.5rem; }
.kb-body li > p:last-child { margin-bottom: 0; }
.kb-body li > ul, .kb-body li > ol { margin: 0.5rem 0 0.25rem; }
.kb-body li > figure { margin: 0.75rem 0 0.5rem; }

/* Numbered steps: a small circle holds each number. */
.kb-body ol { list-style: none; padding-left: 0; }
.kb-body ol > li {
  position: relative;
  padding-left: 2.5rem;
  margin: 0.75rem 0;
  min-height: 1.75rem;
}
.kb-body ol > li::before {
  content: counter(list-item);
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-strong);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
}
.kb-body ol ul, .kb-body ul ul { padding-left: 1.25rem; }

.kb-body hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

.kb-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.875em;
  background: var(--primary-soft);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}
.kb-body pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 16px;
  overflow-x: auto;
  margin: 0 0 1rem;
  line-height: 1.5;
}
.kb-body pre code { background: none; padding: 0; font-size: 0.875rem; }

kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 0.85em;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0.05em 0.4em;
  white-space: nowrap;
}

.kb-body blockquote {
  margin: 0 0 1rem;
  padding: 0.25rem 1rem;
  border-left: 4px solid var(--line);
  color: var(--muted);
}
.kb-body blockquote > :last-child { margin-bottom: 0; }

/* Tables */
.table-wrap { overflow-x: auto; margin: 0 0 1rem; -webkit-overflow-scrolling: touch; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.table-wrap th, .table-wrap td {
  border: 1px solid var(--line);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.table-wrap th { background: var(--primary-soft); font-weight: 600; }
.table-wrap td { background: var(--surface); }

/* Callouts */
.callout {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--primary);
  border-radius: 0 8px 8px 0;
  background: var(--primary-soft);
}
.callout > :last-child { margin-bottom: 0; }
.callout-title { margin: 0 0 0.25rem; font-weight: 700; font-size: 0.875rem; }
.callout p { margin-bottom: 0.5rem; }
.callout-tip { background: var(--accent-soft); border-left-color: var(--accent); }
.callout-warning, .callout-caution { background: var(--ember-soft); border-left-color: var(--ember); }
.callout-important { background: var(--primary-soft); border-left-color: var(--primary-strong); }

/* Figures */
.kb-body figure { margin: 1.25rem 0; }
.kb-body figure img, .kb-body img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
}
.kb-body p img { display: inline-block; vertical-align: middle; }
.kb-body img.shot-phone, .shot-phone { max-width: min(320px, 100%); }
figcaption { margin-top: 6px; color: var(--muted); font-size: 0.875rem; }

/* Related, prev/next, support */
.kb-related { margin-top: 2.5rem; }
.kb-prevnext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 2.5rem 0 1.5rem;
}
.kb-prevnext a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--ink);
}
.kb-prevnext a:hover { text-decoration: none; border-color: var(--primary); }
.kb-next { text-align: right; grid-column: 2; }
.kb-prev { grid-column: 1; }
.kb-prevnext-label { display: block; font-size: 0.8125rem; color: var(--muted); }
.kb-prevnext-title { display: block; font-weight: 600; color: var(--primary-strong); }
.kb-support { color: var(--muted); font-size: 0.9375rem; margin: 1.5rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); }

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

.kb-footer { border-top: 1px solid var(--line); background: var(--surface); padding: 1.5rem 0; font-size: 0.9375rem; }
.kb-footer p { margin: 0; }
.kb-footer-title { color: var(--muted); font-size: 0.875rem; margin-top: 4px; }

/* -------------------------------------------------------------- print */

@media print {
  html { font-size: 12pt; }
  body { background: #fff; color: #000; display: block; min-height: 0; }
  .kb-header .kb-search, .kb-header .kb-app-link, .kb-footer, .kb-toc, .kb-prevnext, .kb-skip, .kb-support { display: none !important; }
  .kb-header { border: 0; background: none; }
  .kb-brand { color: #000; }
  a { color: #000; text-decoration: underline; }
  .kb-lead, .kb-updated, .kb-item-summary, figcaption, .kb-crumbs { color: #000; }
  .table-wrap th, .table-wrap td, .callout { background: #fff !important; }
  .callout { border: 1px solid #000; border-left-width: 4px; }
  .kb-body img { box-shadow: none; }
  .kb-body ol > li::before { background: #fff; border: 1px solid #000; color: #000; }
}