:root {
  --moth-navy: #17233f;
  --moth-indigo: #24345f;
  --moth-navy-soft: #334262;
  --moth-cream: #f8f3e8;
  --moth-cream-2: #fffaf0;
  --moth-gold: #c8a35a;
  --moth-tan: #e0c995;
  --ink: #20283a;
  --muted: #69707d;
  --line: #ddd5c6;
  --card: #fffdf8;
}
* { box-sizing: border-box; }
html { overflow-x: hidden; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--ink); background: var(--moth-cream); overflow-x: hidden; }
.topbar { display: flex; gap: 1rem; align-items: center; padding: .85rem 1.5rem; background: linear-gradient(135deg, var(--moth-navy), var(--moth-indigo)); color: white; border-bottom: 5px solid var(--moth-gold); }
.brand-copy { min-width: 0; }
.brand-logo,
.site-logo,
header img { display: block; max-height: 72px; max-width: 120px; width: auto; height: auto; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 3px 8px rgba(0,0,0,.16)); }
h1 { margin: 0; font-size: clamp(1.25rem, 3vw, 2.2rem); line-height: 1.12; }
.topbar p { margin: .25rem 0 0; color: #f5ead5; max-width: 900px; }
.layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: calc(100vh - 98px); }
.sidebar { border-right: 1px solid var(--line); padding: 1rem; background: #fbf7ed; position: sticky; top: 0; height: calc(100vh - 98px); overflow: auto; }
#search { width: 100%; padding: .75rem .85rem; border: 1px solid var(--line); border-radius: .65rem; font-size: 1rem; background: white; color: var(--ink); }
#search:focus { outline: 3px solid rgba(200, 163, 90, .35); border-color: var(--moth-gold); }
.tree { margin-top: 1rem; }
.root-links { margin-bottom: .85rem; }
.root-links .doc-link { padding-left: .55rem; font-weight: 750; color: var(--moth-navy); }
.nav-section { margin: .85rem 0; border-top: 1px solid var(--line); padding-top: .35rem; }
.nav-section:first-child { border-top: 0; padding-top: 0; }
.section-title { display: flex; align-items: center; gap: .45rem; width: 100%; margin: 0 0 .35rem; padding: .6rem .4rem; border: 0; border-radius: .45rem; background: transparent; color: var(--moth-navy); font-size: 1.05rem; font-weight: 850; letter-spacing: .06em; line-height: 1.2; text-align: left; text-transform: uppercase; cursor: pointer; }
.section-title:hover { background: #f0e6d1; }
.section-title:focus-visible { outline: 3px solid rgba(200, 163, 90, .45); }
.section-indicator { color: var(--moth-gold); font-size: 1rem; line-height: 1; width: 1em; flex: 0 0 1em; }
.section-links { display: grid; gap: .08rem; }
.nav-section.collapsed .section-links { display: none; }
.doc-link { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: .45rem .55rem .45rem 1.85rem; border-radius: .45rem; cursor: pointer; color: var(--ink); font-size: .95rem; }
.doc-link:hover, .doc-link.active { background: #efe3c3; color: var(--moth-navy); }
.doc-link.active { box-shadow: inset 3px 0 0 var(--moth-gold); font-weight: 650; }
.content { min-width: 0; padding: 1.5rem; }
.doc { max-width: 980px; margin: 0 auto; background: var(--card); border: 1px solid var(--line); border-radius: 1rem; padding: 1.5rem 1.75rem; box-shadow: 0 10px 30px rgba(23,35,63,.08); overflow-wrap: anywhere; }
.doc h1, .doc h2, .doc h3 { color: var(--moth-navy); }
.doc table { width: 100%; border-collapse: collapse; margin: 1rem 0; display: block; overflow-x: auto; }
.doc th, .doc td { border: 1px solid var(--line); padding: .55rem; vertical-align: top; }
.doc th, .doc tr:first-child td { background: #f0e6d1; text-align: left; color: var(--moth-navy); font-weight: 700; }
.doc code { background: #f0ead8; padding: .1rem .25rem; border-radius: .25rem; }
@media (max-width: 820px) {
  .topbar { padding: .75rem 1rem; gap: .75rem; align-items: center; }
  .topbar p { font-size: .9rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .layout { grid-template-columns: 1fr; min-height: auto; }
  .sidebar { position: relative; height: auto; max-height: 55vh; border-right: 0; border-bottom: 1px solid var(--line); }
  .content { padding: 1rem; }
  .doc { padding: 1.1rem; border-radius: .75rem; }
  .section-title { font-size: 1rem; padding: .6rem .35rem; }
}
@media (max-width: 700px) {
  .brand-logo,
  .site-logo,
  header img { max-height: 52px; max-width: 90px; }
}
@media (max-width: 480px) {
  .topbar { flex-wrap: nowrap; }
  h1 { font-size: 1.12rem; }
  .topbar p { font-size: .82rem; }
}
.tree-toggle { width: 100%; margin: 0 0 .75rem; padding: .65rem .8rem; border: 1px solid var(--moth-gold); border-radius: .65rem; background: var(--moth-navy); color: white; font-weight: 750; cursor: pointer; }
.tree-toggle:hover, .tree-toggle:focus-visible { background: var(--moth-indigo); outline: 3px solid rgba(200, 163, 90, .35); }
.layout.nav-collapsed { grid-template-columns: 48px minmax(0, 1fr); }
.layout.nav-collapsed .sidebar { height: auto; overflow: visible; padding: .5rem .35rem; }
.layout.nav-collapsed .tree-toggle { width: 36px; min-width: 36px; height: 42px; min-height: 42px; margin: .5rem auto; padding: 0; display: flex; align-items: center; justify-content: center; }
.layout.nav-collapsed .nav-tree-panel { display: none; }
.layout.nav-collapsed .doc { max-width: 1180px; }
.section-row, .doc-row { display: flex; align-items: stretch; gap: .2rem; }
.section-row .section-title, .doc-row .doc-link { min-width: 0; flex: 1 1 auto; }
.menu-button { flex: 0 0 2.1rem; align-self: center; min-height: 2rem; border: 0; border-radius: .45rem; background: transparent; color: var(--moth-navy-soft); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.menu-button:hover, .menu-button:focus-visible { background: #efe3c3; color: var(--moth-navy); outline: 3px solid rgba(200, 163, 90, .35); }
.active-section > .section-row .section-title { background: #f6edda; box-shadow: inset 3px 0 0 var(--moth-gold); }
.context-menu { position: absolute; z-index: 50; min-width: 190px; padding: .35rem; border: 1px solid var(--line); border-radius: .65rem; background: #fffdf8; box-shadow: 0 16px 35px rgba(23,35,63,.18); }
.context-menu button { display: block; width: 100%; padding: .6rem .75rem; border: 0; border-radius: .45rem; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.context-menu button:hover:not(:disabled), .context-menu button:focus-visible { background: #efe3c3; outline: none; }
.context-menu button:disabled { color: var(--muted); cursor: not-allowed; opacity: .65; }
.toast { position: fixed; right: 1rem; bottom: 1rem; z-index: 60; padding: .75rem 1rem; border-radius: .7rem; background: var(--moth-navy); color: white; box-shadow: 0 12px 30px rgba(23,35,63,.25); }
.print-root { display: none; }

@media (max-width: 820px) {
  .layout.nav-collapsed { grid-template-columns: 48px minmax(0, 1fr); align-items: start; }
  .layout.nav-collapsed .sidebar { max-height: none; border-right: 1px solid var(--line); border-bottom: 0; }
}

@media print {
  @page { size: letter; margin: 0.5in; }
  html, body { width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: #fff !important; color: #111 !important; overflow: visible !important; }
  .topbar, .layout, .sidebar, .content, .doc, #search, .tree, .tree-toggle, .nav-tree-panel, .menu-button, .context-menu, .toast, .screen-only { display: none !important; }
  .print-root { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 0 .35in !important; background: #fff !important; color: #111 !important; font-family: Georgia, 'Times New Roman', serif !important; font-size: 11pt !important; line-height: 1.38 !important; }
  .print-site-header { display: flex !important; align-items: center; gap: .18in; margin: 0 0 .25in; padding: 0 0 .18in; border-bottom: 2pt solid #17233f; color: #17233f; break-after: avoid; }
  .print-site-header img { width: .9in !important; height: auto !important; max-width: .9in !important; max-height: .9in !important; filter: none !important; }
  .print-site-header h1 { margin: 0 !important; font-size: 20pt !important; line-height: 1.1 !important; color: #17233f !important; }
  .print-site-header p { margin: .06in 0 0 !important; color: #333 !important; font-size: 10pt !important; }
  .print-document, .print-section { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: #fff !important; color: #111 !important; box-shadow: none !important; border: 0 !important; overflow: visible !important; }
  .print-document + .print-document, .print-section { break-before: page; page-break-before: always; }
  .print-site-header + .print-document { break-before: auto !important; page-break-before: auto !important; }
  .print-section-label { margin: 0 0 .12in !important; padding: .06in .08in !important; border-left: 4pt solid #c8a35a !important; background: #f4f4f4 !important; color: #17233f !important; font: 700 13pt system-ui, sans-serif !important; break-after: avoid; }
  .print-root h1, .print-root h2, .print-root h3 { color: #17233f !important; break-after: avoid; page-break-after: avoid; }
  .print-root h1 { font-size: 18pt !important; margin: .08in 0 .12in !important; }
  .print-root h2 { font-size: 14pt !important; margin: .16in 0 .08in !important; }
  .print-root h3 { font-size: 12pt !important; margin: .12in 0 .06in !important; }
  .print-root p, .print-root li { orphans: 3; widows: 3; }
  .print-root table { width: 100% !important; max-width: none !important; border-collapse: collapse !important; display: table !important; overflow: visible !important; font-size: 9.5pt !important; break-inside: avoid; page-break-inside: avoid; }
  .print-root th, .print-root td { border: 1pt solid #888 !important; padding: 4pt !important; vertical-align: top !important; }
  .print-root th, .print-root tr:first-child td { background: #eee !important; color: #111 !important; font-weight: 700 !important; }
  .print-root pre, .print-root blockquote, .print-root ul, .print-root ol { break-inside: avoid; page-break-inside: avoid; }
  .print-footer { position: fixed; left: 0; right: 0; bottom: 0; padding-top: .06in; border-top: 1pt solid #999; background: #fff; color: #333; font: 8.5pt system-ui, sans-serif; }
  .print-footer::after { content: ' • Page ' counter(page); }
}