/* Standalone pages: About, Data sources, Terms, Privacy, Refunds, the vegetation guide. */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: var(--fs-m)/var(--lh) var(--font-sans); }
.page-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s2) var(--s4); border-bottom: var(--line); }
.page-top a { color: var(--ink); font-weight: 600; text-decoration: none; }
.page-top a:focus-visible, main a:focus-visible, .page-foot a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
main { max-width: 46rem; margin: 0 auto; padding: var(--s4) var(--s4) var(--s6); }
main h1 { font-size: var(--fs-xl); margin: var(--s3) 0; }
main h2 { font-size: var(--fs-l); margin: var(--s5) 0 var(--s2); }
main a { color: var(--focus); }
.placeholder { border: var(--line); border-left: 4px solid var(--ink); background: var(--paper-2); padding: var(--s2) var(--s3); margin: var(--s3) 0; }
.assumption { font-size: var(--fs-s); color: var(--ink-3); }
table.reg { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
table.reg th, table.reg td { text-align: left; vertical-align: top; border-bottom: var(--hair); padding: var(--s1) var(--s2) var(--s1) 0; }
.page-foot { max-width: 46rem; margin: 0 auto; padding: var(--s3) var(--s4) var(--s5); border-top: var(--hair); display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); font-size: var(--fs-s); }
.page-foot a { color: var(--ink-2); }
.skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: var(--s2) var(--s3); }
.skip:focus { left: var(--s2); top: var(--s2); }

/* R48: summary bullets first, then collapsible sections. */
.summary { background: var(--paper-2); border: var(--hair); border-radius: 6px; padding: var(--s2) var(--s3) var(--s2) calc(var(--s3) + 16px); margin: var(--s3) 0 var(--s4); }
.summary li { margin: 4px 0; }
main details { border-top: var(--hair); padding: 2px 0; }
main details:last-of-type { border-bottom: var(--hair); }
main summary { cursor: pointer; font-weight: 600; font-size: var(--fs-l); padding: var(--s2) 0; min-height: 44px; }
main summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.skeleton-lines span { display: block; height: 12px; margin: 10px 0; border-radius: 4px; background: var(--paper-3); }
.skeleton-lines span:nth-child(2) { width: 80%; } .skeleton-lines span:nth-child(3) { width: 60%; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* R59: the Beta badge beside the name, and the beta note on About. */
.beta-badge { display: inline-block; padding: 0 6px; border: 1px solid var(--rule-strong); border-radius: 999px; font: 600 10px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.page-top .beta-badge { margin-right: auto; margin-left: calc(-1 * var(--s2)); }
.beta-note { border-left: 3px solid var(--rule-strong); padding: 0 var(--s3); margin: var(--s4) 0; }
.beta-note h2 { margin-top: 0; }

/* R68: the notice in the middle of the top bar, as in the app. Not dismissible. */
.page-top .top-notice { flex: 1 1 auto; min-width: 0; margin: 0; text-align: center; font: 650 15px/1.2 var(--font-sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-top:has(.top-notice) .beta-badge { margin-right: 0; }
.top-notice-short { display: none; }
@media (max-width: 480px) {
  .page-top { gap: var(--s2); padding: var(--s2) var(--s3); }
  .page-top .top-notice { font-size: 13px; }
  .top-notice-short { display: inline; }
  .top-notice-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* R91: the current page in a footer, shown as the active item rather than a link to itself. */
.page-foot .current { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* R92: the floating "Try BAL Buddy" (About; the server pages have their own). Fixed to the bottom
   right; a slim full-width bar on phones. The body's bottom padding means it never covers the end
   of the content or the footer's Feedback button. */
.float-cta { position: fixed; right: 20px; bottom: 20px; z-index: 20; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--action); color: var(--action-text); font: 600 var(--fs-m) var(--font-sans); text-decoration: none; box-shadow: 0 2px 10px rgba(29, 28, 26, .22); }
.float-cta:hover { background: var(--action-hover); }
.float-cta:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
body.has-float { padding-bottom: 76px; }
@media (max-width: 600px) { .float-cta { left: 12px; right: 12px; bottom: 12px; } }

/* R125: the Beta badge only once the server says it's on (SHOW_BETA_BADGE). */
html:not([data-beta="on"]) .beta-badge { display: none; }
/* R127: MAINTENANCE_BANNER across the top of the page. */
.maintenance-banner { padding: 6px 16px; background: #F6E7B8; border-bottom: 1px solid #C9A227; color: var(--ink); font-weight: 600; font-size: 14px; line-height: 1.35; text-align: center; }