/* Navigation and phone overflow fixes. Desktop and print layouts stay intact. */
@font-face {
  font-family: 'Outfit';
  src: url('assets/outfit-600.ttf') format('truetype');
  font-weight: 600;
  font-display: swap;
}
.cs-document-header {
  position: sticky;
  top: 12px;
  z-index: 100;
  width: min(calc(100% - 24px), 960px);
  margin: 12px auto 0;
  font-family: 'Work Sans', Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4;
}
.cs-document-nav {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 54px;
  padding: 6px 8px 6px 20px;
  border: 1px solid #C6E4F7;
  border-radius: 999px;
  background: rgba(245, 250, 254, .95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 6px 20px rgba(45, 45, 45, .06);
}
.cs-document-nav a { text-decoration: none; color: #2D2D2D; }
.cs-document-nav a:focus-visible { outline: 3px solid #1C6FA3; outline-offset: 4px; }
.cs-document-brand { display: inline-flex; gap: 10px; align-items: center; min-height: 38px; }
.cs-document-brand img { display: block; width: 18px; height: 26px; object-fit: contain; }
.cs-document-wordmark { display: flex; flex-direction: column; gap: 2px; font-family: 'Outfit', sans-serif; font-weight: 600; line-height: 1; }
.cs-document-wordmark small { font-size: 9px; font-weight: 600; }
.cs-document-back { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-left: auto; }
.cs-document-back:hover { color: #1C6FA3; text-decoration: underline; text-underline-offset: 4px; }
.cs-document-portfolio { display: inline-flex; align-items: center; min-height: 40px; white-space: nowrap; }
.cs-document-portfolio:hover { color: #1C6FA3; text-decoration: underline; text-underline-offset: 4px; }
.cs-document-nav .cs-document-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 20px;
  border: 2px solid #1C6FA3;
  border-radius: 999px;
  background: #1C6FA3;
  color: #FFFFFF;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 #ffffff66, 0 3px 0 #155A85;
}
.cs-document-nav .cs-document-book:hover { background: #155A85; border-color: #155A85; }
@media screen and (max-width: 760px) {
  .cs-document-nav { flex-wrap: wrap; gap: 2px 12px; padding-left: 12px; border-radius: 24px; }
  .cs-document-brand { order: 0; }
  .cs-document-wordmark { display: none; }
  .cs-document-back { order: 2; flex: 1 0 calc(50% - 6px); margin-left: 0; font-size: 13px; white-space: nowrap; min-height: 36px; }
  .cs-document-portfolio { order: 3; flex: 1 0 calc(50% - 6px); justify-content: flex-end; font-size: 13px; min-height: 36px; }
  .cs-document-nav .cs-document-book { order: 1; margin-left: auto; padding-inline: 12px; font-size: 13px; }
}
@media screen and (max-width: 820px) {
  /* Two inherited diagrams use desktop widths in inline styles. Let them wrap. */
  .cs-document-header + .doc .body > [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .cs-document-header + .doc .big { flex-wrap: wrap; }
  .cs-document-header + .doc .big strong { max-width: 100%; white-space: normal !important; }
  .cs-document-header + .doc .body > table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }
}
@media print {
  .cs-document-header { display: none !important; }
}