/* Warm surfaces, green accents and typography from the main app's design. */
:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #24352b; background: #f3efe7; line-height: 1.65; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #41684e; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid #537962; outline-offset: 4px; }
[hidden] { display: none !important; }
.skip { position: fixed; left: 1rem; top: -5rem; padding: .6rem 1rem; background: #fbf8f1; z-index: 3; }
.skip:focus { top: 1rem; }
.header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem max(1.25rem, calc((100% - 76rem) / 2)); background: #e7e6d9; border-bottom: 1px solid #d7dbc9; }
.brand { color: #24352b; font-size: 1.5rem; font-weight: 750; text-decoration: none; letter-spacing: -.04em; }
.brand span { font: 400 .85rem -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: 0; margin-left: .6rem; }
.app-link { padding: .4rem .8rem; border: 1px solid #d7dbc9; border-radius: .5rem; color: #24352b; font-size: .9rem; text-decoration: none; }
.layout { max-width: 76rem; margin: 2rem auto; padding: 0 1.25rem; display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 2rem; align-items: start; }
.sidebar { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; padding: .3rem .4rem .5rem; font-size: .9rem; }
summary { cursor: pointer; font-weight: 650; padding: .45rem 0; }
.chapters ol, #search-results { list-style: none; margin: .5rem 0; padding: 0; }
.chapters a { display: block; padding: .65rem .8rem; border-radius: .5rem; color: #24352b; text-decoration: none; line-height: 1.5; }
.chapters a:hover, .chapters a[aria-current] { background: #d3dbcd; }
.chapters a[aria-current] { font-weight: 650; }
.search { border-top: 1px solid #d7dbc9; margin-top: 1.5rem; padding-top: 1rem; }
.search label { display: block; font-weight: 650; }
input { width: 100%; margin: .5rem 0; padding: .7rem; border: 1px solid #a4aca0; background: #fbf8f1; border-radius: .5rem; font: inherit; color: inherit; }
small, #search-status { color: #657367; font-size: .8rem; }
#search-results a { display: block; padding: .65rem .2rem; }
#search-results small { display: block; }
main { min-width: 0; background: #fbf8f1; border: 1px solid #e7e6d9; border-radius: .8rem; padding: 2.5rem 3rem; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; color: #537962; font-size: .7rem; font-weight: 750; }
h1, h2, h3, h4 { font-family: Cambria, Georgia, serif; line-height: 1.25; letter-spacing: -.025em; scroll-margin-top: 1rem; }
h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 1rem 0 1.5rem; }
h2 { font-size: 1.7rem; border-top: 1px solid #e7e6d9; padding-top: 1.5rem; margin-top: 2rem; }
h3 { font-size: 1.3rem; margin-top: 1.7rem; }
p, li { overflow-wrap: anywhere; }
article li { margin-block: .5rem; }
article li::marker { color: #537962; }
.sections { margin: 1rem 0 1.5rem; border-bottom: 1px solid #e7e6d9; padding-bottom: .75rem; font-size: .875rem; }
.toc ul { padding-left: 1.3rem; }
.toc > ul { padding-left: 0; list-style: none; }
.toc > ul > li > a { display: none; }
.toc a { display: inline-block; padding: .15rem 0; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; border-bottom: 1px solid #d7dbc9; padding: .75rem; vertical-align: top; overflow-wrap: anywhere; }
th { background: #eeece3; }
pre { overflow-x: auto; padding: 1rem; }
code { background: #eeece3; border-radius: .2rem; }
img { max-width: 100%; }
.pagination { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid #d7dbc9; margin-top: 2.5rem; padding-top: 1.5rem; }
.pagination a { flex: 1; text-decoration: none; }
.pagination small { display: block; }
footer { max-width: 76rem; margin: 2rem auto; padding: 0 1.25rem; display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; color: #657367; }
footer nav { display: flex; gap: 1rem; }
@media (max-width: 760px) {
  .layout { display: block; margin: 1rem auto; padding: 0 .75rem; }
  .sidebar { position: static; max-height: none; margin-bottom: 1rem; }
  main { padding: 1.5rem 1rem; }
  th, td { padding: .5rem; }
  footer { flex-direction: column; }
}
@media print {
  .header, .sidebar, .sections, .pagination, footer, .skip { display: none; }
  .layout { display: block; padding: 0; margin: 0; }
  main { border: 0; padding: 0; }
  :root, main { background: white; }
}