@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --navy-deep:#0C2C7A;
  --navy-dark:#081D4D;
  --turquoise:#24BDC7;
  --turquoise-sky:#62D3DA;
  --turquoise-light:#D9F5F7;
  --white:#FFFFFF;
  --gray-light:#EEF2F7;
  --gold:#F1B501;
  --ink:#1B2430;
  --muted:#5B6B82;
  --line:#DCE4EE;
  --danger:#B3261E;
  --danger-bg:#FDECEC;
  --ok-bg:#EAF7EE;
  --ok-ink:#1E7B3B;
}

*{box-sizing:border-box;}

html,body{
  margin:0;
  padding:0;
  font-family:'Inter',Arial,Helvetica,sans-serif;
  color:var(--ink);
  font-size:10.3pt;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:'Montserrat',Arial,Helvetica,sans-serif;
  color:var(--navy-dark);
  line-height:1.2;
  margin:0 0 0.5em;
}

.chapter{ page-break-before: always; padding-top: 2pt; }
.chapter:first-child{ page-break-before: avoid; }

.kicker{
  display:inline-block;
  font-family:'Montserrat',Arial,sans-serif;
  font-weight:700;
  font-size:8.2pt;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--turquoise);
  background:var(--turquoise-light);
  padding:3px 10px;
  border-radius:20px;
  margin-bottom:10px;
}

h1.chapter-title{
  font-size:20pt;
  font-weight:800;
  border-bottom:3px solid var(--turquoise);
  padding-bottom:10px;
  margin-bottom:16px;
}
h1.chapter-title .num{ color: var(--turquoise); margin-right:8px; }

h2{
  font-size:13.5pt;
  font-weight:700;
  color:var(--navy-deep);
  margin-top:22px;
  margin-bottom:8px;
  padding-bottom:4px;
  border-bottom:1px solid var(--line);
}

h3{
  font-size:11.3pt;
  font-weight:700;
  color:var(--navy-deep);
  margin-top:14px;
  margin-bottom:6px;
}

p{ margin:0 0 9px; }
ul,ol{ margin:0 0 10px; padding-left:20px; }
li{ margin-bottom:4px; }
strong{ color:var(--navy-dark); }
a{ color:var(--navy-deep); }

table{
  width:100%;
  border-collapse:collapse;
  margin:10px 0 16px;
  font-size:9.3pt;
}
th{
  background:var(--navy-deep);
  color:var(--white);
  font-family:'Montserrat',Arial,sans-serif;
  font-weight:700;
  font-size:8.6pt;
  letter-spacing:0.03em;
  text-transform:uppercase;
  text-align:left;
  padding:7px 10px;
}
td{
  padding:6px 10px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
tr:nth-child(even) td{ background:#F8FAFD; }

code, .code-inline{
  font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  font-size:9pt;
  background:var(--gray-light);
  border-radius:3px;
  padding:1px 5px;
  color:var(--navy-dark);
}

pre.code-block{
  background:var(--navy-dark);
  color:#E7F6F7;
  font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
  font-size:9pt;
  line-height:1.6;
  border-radius:8px;
  padding:14px 16px;
  margin:10px 0 16px;
  white-space:pre-wrap;
  word-break:break-word;
}
pre.code-block .comment{ color:#7FA8B8; }

.callout{
  border-radius:8px;
  padding:12px 14px;
  margin:12px 0 16px;
  font-size:9.6pt;
  border-left:4px solid var(--turquoise);
  background:var(--turquoise-light);
}
.callout .callout-title{
  font-family:'Montserrat',Arial,sans-serif;
  font-weight:700;
  font-size:8.6pt;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:var(--navy-deep);
  margin-bottom:4px;
  display:block;
}
.callout.warning{
  border-left-color:var(--danger);
  background:var(--danger-bg);
}
.callout.warning .callout-title{ color:var(--danger); }
.callout.success{
  border-left-color:var(--ok-ink);
  background:var(--ok-bg);
}
.callout.success .callout-title{ color:var(--ok-ink); }
.callout.gold{
  border-left-color:var(--gold);
  background:#FFF8E1;
}
.callout.gold .callout-title{ color:#9A7300; }

.badge{
  display:inline-block;
  font-family:'Montserrat',Arial,sans-serif;
  font-weight:700;
  font-size:7.6pt;
  letter-spacing:0.05em;
  text-transform:uppercase;
  padding:2px 8px;
  border-radius:10px;
  color:var(--white);
}
.badge.current{ background:var(--navy-deep); }
.badge.local{ background:var(--turquoise); color:var(--navy-dark); }
.badge.legacy{ background:var(--muted); }
.badge.owner{ background:var(--gold); color:var(--navy-dark); }

/* Diagrams built from boxes, not images */
.flow{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
  margin:14px 0 18px;
}
.flow-box{
  background:var(--white);
  border:1.6px solid var(--navy-deep);
  border-radius:8px;
  padding:9px 16px;
  text-align:center;
  font-size:9.4pt;
  font-weight:600;
  color:var(--navy-dark);
  min-width:230px;
}
.flow-box.accent{ border-color:var(--turquoise); background:var(--turquoise-light); }
.flow-box.gold{ border-color:var(--gold); background:#FFF8E1; }
.flow-arrow{
  font-size:13pt;
  color:var(--turquoise);
  line-height:1;
  padding:2px 0;
}
.flow-row{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.diagram-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
  margin:14px 0 18px;
  break-inside: avoid;
  page-break-inside: avoid;
}
.flow{ break-inside: avoid; page-break-inside: avoid; }
.two-col{ break-inside: avoid; page-break-inside: avoid; }
.callout{ break-inside: avoid; page-break-inside: avoid; }
.screenshot-figure{ break-inside: avoid; page-break-inside: avoid; }
table{ break-inside: auto; }
tr{ break-inside: avoid; page-break-inside: avoid; }
h1,h2,h3{ break-after: avoid; page-break-after: avoid; }
.diagram-card{
  border:1px solid var(--line);
  border-radius:8px;
  padding:10px 12px;
  background:#F8FAFD;
}
.diagram-card h4{
  font-family:'Montserrat',Arial,sans-serif;
  font-size:9.4pt;
  color:var(--navy-deep);
  margin:0 0 4px;
}
.diagram-card p{ font-size:8.9pt; margin:0; color:var(--muted); }

.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }

.checklist{ list-style:none; padding-left:0; margin:8px 0 16px; }
.checklist li{
  padding-left:22px;
  position:relative;
  margin-bottom:6px;
  font-size:9.6pt;
}
.checklist li::before{
  content:"";
  position:absolute;
  left:0; top:2px;
  width:13px; height:13px;
  border:1.6px solid var(--navy-deep);
  border-radius:3px;
}

.screenshot-figure{
  margin:14px 0 8px;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 3px 10px rgba(12,44,122,0.08);
}
.screenshot-figure img{ width:100%; display:block; }
.screenshot-caption{
  font-size:8.4pt;
  color:var(--muted);
  text-align:center;
  margin:4px 0 16px;
  font-style:italic;
}

.route-table td.route{ font-family:'SFMono-Regular',Consolas,monospace; font-size:8.8pt; color:var(--navy-deep); }

.toc-list{ list-style:none; padding:0; margin:0; }
.toc-list li{
  display:flex;
  align-items:baseline;
  font-size:9.5pt;
  padding:2.6px 0;
  border-bottom:1px dotted var(--line);
}
.toc-list li .toc-name{ flex:1; }
.toc-list li .toc-num{ color:var(--turquoise); font-weight:700; margin-right:8px; }
.toc-list li .toc-page{ color:var(--muted); font-weight:600; margin-left:8px; }
.toc-section-title{
  font-family:'Montserrat',Arial,sans-serif;
  font-size:9pt;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--turquoise);
  margin:7px 0 2px;
  break-after: avoid-page;
  page-break-after: avoid;
}
.toc-list li{ break-inside: avoid; page-break-inside: avoid; }
.toc-group{ break-inside: avoid; page-break-inside: avoid; }

.glossary dt{ font-weight:700; color:var(--navy-dark); font-family:'Montserrat',Arial,sans-serif; font-size:10pt; margin-top:10px; }
.glossary dd{ margin:2px 0 0; font-size:9.6pt; }

.small{ font-size:8.8pt; color:var(--muted); }
.center{ text-align:center; }
.mt-0{ margin-top:0; }