/* Lightspark reference: neutral reading UI; colour belongs to a purposeful
   visual, link or status — not to an entire documentation category. */
:root {
  --paper: #f8f8f7;
  --shell: #f0f0ee;
  --ink: #171717;
  --muted: #707070;
  --line: #e1e1de;
  --blue: #1678a4;
}
body { background: var(--paper); color: #3f3f3f; }
::selection { background: #c9e8f5; color: #171717; }
.site-header { background: var(--shell); border-color: #dededb; }
.header-row { border-bottom: 1px solid #e3e3e0; }
.brand { color: #171717; }
.brand-dot { color: #171717; }
.brand-label { color: #777; }
.search-trigger {
  background: #ffffff80;
  border-color: #e1e1de;
  color: #747474;
  box-shadow: none;
}
.search-trigger:hover { background: #fff; border-color: #c9c9c5; }
.app-link { background: #171717; color: #fff; border-radius: 6px; }
.app-link:hover { background: #333; }
.header-actions a span { color: inherit; }
.product-nav a { color: #747474; }
.product-nav a:hover, .product-nav a[aria-current="true"] { color: #171717; }
.product-nav a[aria-current="true"]::after { background: #171717; height: 2px; }
.sidebar { background: var(--shell); scrollbar-color: #d3d3cf transparent; }
.nav-group { margin: 0 0 22px; }
.nav-group + .nav-group { padding-top: 22px; border-top: 1px solid #dededb; }
.nav-group-label { color: #7b7b78; text-transform: none; font-size: 12px; letter-spacing: 0; margin-bottom: 9px; }
.nav-item { color: #71716e; font-size: 14px; border: 0; border-radius: 4px; }
.nav-item:hover { background: #e8e8e5; color: #171717; }
.nav-item[aria-current="page"] { background: transparent; color: #171717; font-weight: 500; box-shadow: none; }
.nav-item .nav-icon { opacity: .9; }
.nav-item[aria-current="page"] .nav-icon { opacity: 1; color: #171717; }
.sidebar-help { padding-top: 20px; border-top: 1px solid #dededb; }
.sidebar-help > span { color: #7b7b78; }
.sidebar-help > a { color: #4a4a48; }
.breadcrumb { display: none; }
.article-header { padding: 0; background: none; border: 0; border-radius: 0; }
.article-eyebrow { color: #303030; font-size: 13px; margin: 0 0 10px; }
.article-heading-row { align-items: center; gap: 24px; }
h1 { color: #171717; font-size: 36px; font-weight: 400; line-height: 1.13; letter-spacing: -.8px; }
.article-deck { color: #454545; font-size: 16px; margin: 14px 0 0; line-height: 1.65; }
.article-meta { color: #777; font-size: 11px; border: 0; padding: 0; margin: 16px 0 0; }
.meta-dot { background: #a3a3a0; }
.article-status.is-unreleased { color: #835f25; background: #fff7e7; border: 1px solid #eadabb; border-radius: 4px; padding: 1px 7px; }
.copy-link { background: #ffffff60; border-color: #e1e1de; color: #3d3d3b; border-radius: 5px; margin: 0; }
.copy-link:hover { background: #fff; border-color: #c9c9c5; }
.article-section { margin-top: 34px; margin-bottom: 34px; }
h2 { font-size: 24px; font-weight: 400; color: #202020; letter-spacing: -.25px; }
h3 { color: #242424; font-weight: 500; }
strong { color: #242424; }
.article-section > p, .article-section > ul, .article-section > ol { color: #404040; }
.article-section a:not(.guide-card) { color: #156e96; text-decoration-color: #bad7e4; }
.inline-code { background: #eeeeeb; color: #363633; border: 1px solid #e3e3de; }
.page-index { font-size: 13px; }
.toc-title { color: #333; font-size: 13px; }
.page-index nav { border: 0; }
.page-index nav a { color: #626260; border: 0; padding-left: 0; margin-left: 0; }
.page-index nav a.is-active { color: #171717; font-weight: 500; }
.toc-help { color: #777; }
.toc-help a { color: #484846; }

/* Keep content panels neutral. Semantic notices are the exception. */
.callout { background: #eff6fb; border: 1px solid #d4e4ef; color: #444; border-radius: 8px; padding: 17px 19px; }
.callout strong { color: #263e4a; }
.callout-symbol { color: #348cb1; }
.callout.warning { background: #fcf8ee; border-color: #e9dec6; color: #534c3f; }
.callout.warning strong, .callout.warning .callout-symbol { color: #825f22; }
.table-wrap { background: #fff; border-color: #deded9; border-radius: 7px; }
th { background: #f1f1ee; color: #333; font-size: 13px; }
td { color: #555; border-color: #e6e6e2; }
td:first-child { color: #2b2b2a; }
.steps > li { border-left-color: #deded9; }
.steps > li::before { background: #eee; color: #333; border-color: #ddd; }
.steps p { color: #555; }
.flow { background: #fff; border-color: #e1e1dc; border-radius: 7px; }
.flow-step + .flow-step { border-color: #e1e1dc; }
.flow-step + .flow-step::before { background: #fff; color: #82827d; }
.flow-step small { color: #1678a4; }
.flow-step strong { color: #2a2a2a; }
.flow-step span { color: #6a6a68; }
.guide-grid { gap: 15px; }
.guide-card { background: #fff; border-color: #e4e4e0; border-radius: 8px; padding: 23px; }
.guide-card:hover { background: #fff; border-color: #bdbdb7; }
.guide-card svg { width: 22px; height: 22px; color: #2086b2; margin-bottom: 27px; }
.guide-card[data-topic="start"] svg, .guide-card[data-page="shared-expenses"] svg { color: #ce772d; }
.guide-card strong { color: #242424; font-weight: 500; font-size: 16px; }
.guide-card p { color: #757570; font-size: 13px; }
.guide-card .card-arrow { color: #777772; }
.quick-links a { color: #454542 !important; }
.quick-links a:hover { color: #171717 !important; background: #f0f0ec; }
.quick-links span { color: #777772; }
.video-slot { background: #f1f1ee; border: 1px solid #dfdfda; border-radius: 8px; }
.video-icon { color: #686864; background: #fff; border-color: #deded8; }
.video-slot small { color: #71716b; }
.video-slot strong { color: #33332f; }
.video-slot p { color: #6a6a64; }
.video-pending { color: #6d6d65; background: #fafaf8; border-color: #ddddd6; }
.related-links a, .pager a { background: #ffffff80; color: #454541; border-color: #e1e1dc; border-radius: 5px; }
.related-links a:hover, .pager a:hover { background: #fff; color: #171717; border-color: #bbb; }
.pager a small { color: #777771; }
.article-footer { color: #777771; }
dialog { background: #fafaf9; border-color: #ddddd8; box-shadow: 0 24px 80px #11111130; }
dialog::backdrop { background: #16161645; }
.search-box { background: #f3f3f0; color: #777; border-color: #e0e0da; }
.search-result[aria-selected="true"], .search-result:hover { background: #eeeeea; }
.search-result small { color: #70706b; }
.search-result p { color: #6d6d67; }
.search-result mark { background: #d6eaf2; color: #1f657e; }
.search-footer, #search-status { color: #777771; }

/* One focused colour field on the index, rather than a coloured page title. */
.welcome-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 28px 0 32px;
  padding: 23px 25px;
  overflow: hidden;
  isolation: isolate;
  border-radius: 7px;
  background: #0875a5;
  color: #fff;
}
.welcome-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(#00000018 .7px, transparent .8px);
  background-size: 13px 13px;
  pointer-events: none;
}
.welcome-banner strong { display: block; color: #fff; font-size: 16px; font-weight: 500; }
.welcome-banner p { margin: 5px 0 0; font-size: 12px; line-height: 1.6; color: #fff; }
.welcome-banner > span { flex-shrink: 0; margin-left: auto; background: #fff; color: #171717; padding: 8px 13px; border-radius: 4px; font-size: 12px; }
.welcome-banner:hover { background-color: #086b98; }

/* This is a product explanation, not a screenshot or a simulated feature demo. */
.model-visual { margin: 27px 0 35px; }
.model-map {
  position: relative;
  height: 244px;
  background-color: #f0f0ed;
  background-image: radial-gradient(#d9d9d4 .75px, transparent .85px);
  background-size: 16px 16px;
  border: 1px solid #e7e7e2;
  border-radius: 8px;
  overflow: hidden;
}
.model-wires { position: absolute; inset: 0; width: 100%; height: 100%; color: #459ec2; pointer-events: none; }
.model-provider, .model-outcome {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffffeb;
  border: 1px solid #e3e3df;
  border-radius: 7px;
  box-shadow: 0 4px 16px #30303004;
}
.model-provider { position: absolute; left: 6%; top: 50%; transform: translateY(-50%); width: 34%; padding: 18px 16px; }
.model-provider > svg { flex: 0 0 24px; width: 24px; height: 24px; color: #171717; }
.model-provider strong { display: block; font-size: 15px; line-height: 1.4; font-weight: 500; }
.model-provider small { display: block; font-size: 11px; color: #797972; margin-top: 2px; }
.model-outcomes { position: absolute; right: 6%; top: 9%; bottom: 9%; width: 34%; display: flex; flex-direction: column; justify-content: space-between; }
.model-outcome { min-height: 49px; padding: 11px 13px; color: #343432; font-size: 13px; line-height: 1.4; }
.model-outcome > svg { flex: 0 0 17px; width: 17px; height: 17px; color: #268bb6; }
.model-outcome > span { margin-left: auto; color: #95958d; font-size: 11px; }
.model-outcome:hover { border-color: #a3c6d6; background: #fff; }
.model-visual figcaption { display: flex; justify-content: space-between; gap: 14px; margin-top: 10px; color: #73736d; font-size: 11px; }
.model-visual figcaption > span:first-child { color: #474743; }

@media (max-width: 1200px) {
  .article-heading-row { gap: 18px; }
}
@media (max-width: 1020px) {
  .article-heading-row h1 { font-size: 35px; }
}
@media (max-width: 760px) {
  .mobile-tools, .sidebar { background: var(--shell); }
  .mobile-tools { color: #696964; border-color: #ddddd8; }
  .mobile-tools button { color: #4b4b47; }
  .search-trigger { background: transparent; }
  .article-heading-row h1 { font-size: 31px; }
  .article-deck { font-size: 15px; }
  .article-eyebrow { font-size: 12px; }
  .nav-group-label { font-size: 12px; }
  .guide-card { padding: 20px; }
  .model-map { height: auto; padding: 23px; }
  .model-wires { display: none; }
  .model-provider { position: relative; inset: auto; transform: none; width: 100%; padding: 17px; }
  .model-provider::after { content: ""; position: absolute; left: 15px; top: 100%; height: 21px; width: 1px; background: #78b2cc; }
  .model-outcomes { position: relative; inset: auto; width: auto; margin: 20px 0 0 15px; padding-left: 18px; gap: 11px; }
  .model-outcomes::before { content: ""; position: absolute; left: 0; top: 0; bottom: 24px; width: 1px; background: #78b2cc; }
  .model-outcome { position: relative; min-height: 48px; }
  .model-outcome::before { content: ""; position: absolute; left: -19px; top: 50%; height: 1px; width: 18px; background: #78b2cc; }
  .model-visual figcaption { flex-direction: column; gap: 0; }
  .welcome-banner { padding: 20px; gap: 14px; }
}
@media (max-width: 420px) {
  .article-heading-row h1 { font-size: 30px; }
  .guide-card { padding: 19px 18px 19px 53px; }
  .guide-card svg { top: 23px; left: 18px; width: 19px; height: 19px; }
  .welcome-banner { align-items: flex-start; flex-direction: column; }
  .welcome-banner > span { margin: 0; }
  .model-map { padding: 20px 17px; }
}