/* ==========================================================================
   BirdWatchAI — User Manual styles
   Shared by every page under /docs/manual/. Theme matches the legacy
   docs/manual.html (forest green / cream) but with a fixed sidebar TOC.
   ========================================================================== */

:root{
  --green:#2d5a3d;
  --green-dark:#1f4029;
  --green-light:#e8f0ea;
  --cream:#faf8f5;
  --ink:#23282a;
  --muted:#5d6b62;
  --line:#dfe5e0;
  --amber:#b3811b;
  --amber-bg:#fdf6e3;
  --red:#a8392f;
  --red-bg:#fbecea;
  --blue:#2b5b78;
  --blue-bg:#e9f2f7;
  --code-bg:#f1f4f1;
  --sidebar-w:280px;
  --maxw:820px;
}

/* Dark theme — picks up the same opt-in that other site pages use */
[data-theme="dark"]{
  --green:#5aab72;
  --green-dark:#7ec79a;
  --green-light:#243528;
  --cream:#1a1a18;
  --ink:#f0ede8;
  --muted:#9a9590;
  --line:#3a3a34;
  --amber:#d4a352;
  --amber-bg:#3a3424;
  --red:#e07a6d;
  --red-bg:#3a2824;
  --blue:#7fb4d4;
  --blue-bg:#1f3340;
  --code-bg:#2a2a26;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --green:#5aab72;
    --green-dark:#7ec79a;
    --green-light:#243528;
    --cream:#1a1a18;
    --ink:#f0ede8;
    --muted:#9a9590;
    --line:#3a3a34;
    --amber:#d4a352;
    --amber-bg:#3a3424;
    --red:#e07a6d;
    --red-bg:#3a2824;
    --blue:#7fb4d4;
    --blue-bg:#1f3340;
    --code-bg:#2a2a26;
  }
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16.5px;
  line-height:1.65;
}

a{color:var(--blue);}
h1,h2,h3,h4{
  font-family:"Segoe UI Semibold","Segoe UI",sans-serif;
  color:var(--green-dark);
  line-height:1.25;
}
h1{font-size:2.2rem;margin:.2rem 0 1.2rem;}
h2{
  font-size:1.7rem;
  margin:2.6rem 0 .4rem;
  padding-top:.4rem;
  border-bottom:3px solid var(--green);
  padding-bottom:.35rem;
}
h3{font-size:1.25rem;margin:1.8rem 0 .3rem;color:var(--green);}
h4{font-size:1.05rem;margin:1.4rem 0 .25rem;color:var(--green-dark);}
p{margin:.6rem 0;}
ul,ol{margin:.5rem 0 .8rem;padding-left:1.5rem;}
li{margin:.28rem 0;}
code{
  background:var(--code-bg);
  padding:.12em .4em;
  border-radius:4px;
  font-family:"Cascadia Code",Consolas,monospace;
  font-size:.88em;
}
pre{
  background:var(--code-bg);
  padding:14px 16px;
  border-radius:8px;
  border-left:4px solid var(--green);
  overflow-x:auto;
  font-family:"Cascadia Code",Consolas,monospace;
  font-size:.88em;
  line-height:1.5;
}
pre code{background:transparent;padding:0;}
kbd{
  background:#fff;border:1px solid #bbb;border-bottom-width:2px;
  border-radius:5px;padding:.06em .45em;
  font-family:Consolas,monospace;font-size:.82em;
  box-shadow:0 1px 0 #ddd;color:#222;
}
hr{border:none;border-top:1px solid var(--line);margin:2.4rem 0;}

/* ==========================================================================
   Layout: top bar + sidebar TOC + content
   ========================================================================== */

.topbar{
  background:var(--green-dark);
  color:#fff;
  padding:14px 22px;
  display:flex;
  align-items:center;
  gap:14px;
  position:sticky;top:0;z-index:50;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}
.topbar a.brand{
  color:#fff;text-decoration:none;font-weight:600;
  display:flex;align-items:center;gap:8px;font-size:1.05rem;
}
.topbar .crumb{
  color:rgba(255,255,255,.75);
  font-size:.92rem;
}
.topbar .crumb::before{content:" / ";margin:0 .25em;color:rgba(255,255,255,.4);}
.topbar .spacer{flex:1;}
.topbar a.site-link{
  color:rgba(255,255,255,.92);
  text-decoration:none;
  font-size:.9rem;
  padding:4px 10px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:6px;
}
.topbar a.site-link:hover{background:rgba(255,255,255,.1);}
.topbar .menu-toggle{
  display:none;
  background:none;border:1px solid rgba(255,255,255,.3);
  color:#fff;font-size:1rem;padding:4px 10px;border-radius:6px;cursor:pointer;
}

.layout{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  gap:0;
  min-height:calc(100vh - 60px);
}

/* Sidebar (TOC) */
.toc{
  background:var(--green-light);
  border-right:1px solid var(--line);
  padding:24px 18px 60px;
  position:sticky;top:60px;height:calc(100vh - 60px);
  overflow-y:auto;
  font-size:.94rem;
}
.toc h2{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--muted);
  border:none;
  margin:0 0 .6rem;
  padding:0;
}
.toc ol{
  list-style:none;padding-left:0;margin:0;counter-reset:part;
}
.toc > ol > li{
  counter-increment:part;
  margin:.6rem 0 .2rem;
}
.toc > ol > li > a{
  display:block;
  font-weight:600;
  color:var(--green-dark);
  text-decoration:none;
  padding:.25rem .4rem;
  border-radius:4px;
}
.toc > ol > li > a::before{
  content:"Part " counter(part) " · ";
  color:var(--muted);
  font-weight:500;
  margin-right:2px;
}
.toc > ol > li > a:hover{background:rgba(255,255,255,.5);}
.toc > ol > li.current > a{
  background:var(--green);
  color:#fff;
}
.toc > ol > li.current > a::before{color:rgba(255,255,255,.85);}
.toc ul{
  list-style:none;padding-left:.6rem;
  margin:.15rem 0 .3rem;
  border-left:1px solid var(--line);
}
.toc ul li{margin:.15rem 0;}
.toc ul li a{
  color:var(--ink);
  text-decoration:none;
  display:block;
  padding:.1rem .4rem;
  border-radius:4px;
  font-size:.9rem;
}
.toc ul li a:hover{background:rgba(255,255,255,.7);color:var(--green-dark);}

/* Content */
main.content{
  max-width:var(--maxw);
  margin:0 auto;
  padding:36px 36px 120px;
  width:100%;
}
.content .lead{
  font-size:1.1rem;color:var(--muted);margin-bottom:1.6rem;
}
.content .part-tag{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);font-weight:700;margin-bottom:.4rem;
  display:block;
}

/* Pager (prev / next) at the bottom of every Part */
.pager{
  display:flex;justify-content:space-between;gap:12px;
  margin:3rem 0 0;
  padding-top:1.4rem;
  border-top:1px solid var(--line);
}
.pager a{
  flex:1 1 0;
  text-decoration:none;
  color:var(--ink);
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 18px;
  display:block;
  transition:border-color .15s ease, background .15s ease;
}
[data-theme="dark"] .pager a,
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .pager a{background:rgba(255,255,255,.04);}
}
.pager a:hover{border-color:var(--green);}
.pager .nav-label{
  display:block;font-size:.78rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:.2rem;
}
.pager .nav-title{font-weight:600;color:var(--green-dark);}
.pager .next{text-align:right;}
.pager .next .nav-label::after{content:" →";}
.pager .prev .nav-label::before{content:"← ";}
.pager .spacer{visibility:hidden;}

/* Callouts (lifted from legacy manual) */
.box{
  border-radius:10px;
  padding:14px 18px;
  margin:1.1rem 0;
  border-left:5px solid;
}
.box p:first-child{margin-top:0;}
.box p:last-child{margin-bottom:0;}
.box .lbl{
  font-weight:700;display:block;margin-bottom:.15rem;
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
}
.tip{background:var(--green-light);border-color:var(--green);}
.tip .lbl{color:var(--green-dark);}
.warn{background:var(--amber-bg);border-color:var(--amber);}
.warn .lbl{color:var(--amber);}
.danger{background:var(--red-bg);border-color:var(--red);}
.danger .lbl{color:var(--red);}
.note{background:var(--blue-bg);border-color:var(--blue);}
.note .lbl{color:var(--blue);}
.stub{
  background:var(--amber-bg);border-color:var(--amber);
  font-style:italic;
}

/* Tables */
table{
  border-collapse:collapse;width:100%;
  margin:1.1rem 0;font-size:.95rem;
  background:#fff;border-radius:8px;overflow:hidden;
  box-shadow:0 1px 6px rgba(0,0,0,.04);
}
[data-theme="dark"] table,
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) table{background:rgba(255,255,255,.04);}
}
th,td{
  text-align:left;padding:9px 13px;
  border-bottom:1px solid var(--line);vertical-align:top;
}
th{background:var(--green);color:#fff;font-weight:600;}
tr:nth-child(even) td{background:rgba(0,0,0,.02);}
td code{white-space:nowrap;}

/* Step list */
.steps{counter-reset:step;list-style:none;padding-left:0;}
.steps>li{
  counter-increment:step;position:relative;
  padding:.2rem 0 .2rem 2.6rem;margin:.6rem 0;
}
.steps>li::before{
  content:counter(step);
  position:absolute;left:0;top:.05rem;
  background:var(--green);color:#fff;
  width:1.85rem;height:1.85rem;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.95rem;
}

/* UI label chip (button names, menu items) */
.ui{
  display:inline-block;
  background:#fff;border:1px solid var(--green);
  color:var(--green-dark);
  border-radius:6px;padding:.02em .5em;font-size:.9em;font-weight:600;
  white-space:nowrap;
}
[data-theme="dark"] .ui,
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ui{background:rgba(255,255,255,.06);}
}

/* Tile grid for the TOC landing page */
.parts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;
  margin:1.4rem 0 2rem;
}
.part-card{
  background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:20px 22px;
  text-decoration:none;color:inherit;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  box-shadow:0 1px 4px rgba(0,0,0,.04);
}
.part-card:hover{
  transform:translateY(-2px);
  border-color:var(--green);
  box-shadow:0 6px 18px rgba(45,90,61,.12);
}
.part-card .badge{
  display:inline-block;background:var(--green);color:#fff;
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  border-radius:4px;padding:2px 7px;margin-bottom:.6rem;
}
.part-card h3{margin:0 0 .3rem;color:var(--green-dark);font-size:1.15rem;}
.part-card p{margin:0;color:var(--muted);font-size:.93rem;line-height:1.45;}
[data-theme="dark"] .part-card,
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .part-card{background:rgba(255,255,255,.04);}
}

/* Hero cover for the landing page */
.cover{
  background:linear-gradient(150deg,var(--green) 0%,var(--green-dark) 100%);
  color:#fff;text-align:center;padding:60px 28px 50px;
}
.cover .bird{font-size:54px;line-height:1;}
.cover h1{color:#fff;font-size:2.6rem;margin:.4rem 0 .2rem;letter-spacing:-.5px;}
.cover .sub{font-size:1.15rem;opacity:.95;margin-top:.3rem;font-weight:300;}
.cover .pill{
  display:inline-block;background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.3);
  border-radius:30px;padding:.25em 1em;margin:.4em .25em 0;font-size:.85rem;
}

/* Responsive — collapse the sidebar on phones / tablets */
@media (max-width:900px){
  :root{--sidebar-w:0px;}
  .layout{grid-template-columns:1fr;}
  .toc{
    position:fixed;top:0;left:0;bottom:0;
    width:80%;max-width:320px;
    z-index:60;height:100vh;
    transform:translateX(-100%);
    transition:transform .2s ease;
    box-shadow:4px 0 24px rgba(0,0,0,.2);
  }
  body.toc-open .toc{transform:translateX(0);}
  body.toc-open::after{
    content:"";position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:55;
  }
  .topbar .menu-toggle{display:inline-block;}
  main.content{padding:24px 18px 80px;}
}

/* Print — drop the chrome, render flat */
@media print{
  .topbar,.toc,.pager{display:none !important;}
  .layout{display:block;}
  main.content{max-width:none;padding:0;}
  body{background:#fff;font-size:11pt;}
  h2{page-break-after:avoid;}
  .box,table,h2,h3{page-break-inside:avoid;}
  a{color:var(--ink);text-decoration:none;}
}