@layer components {
  .guide-viewer {
    padding-block: 50px 70px;
    background: #ffffff;
  }
  .guide-viewer__inner {
    display: grid;
    grid-template-columns: 320px 1fr;
    align-items: start;
  }
  .guide-viewer__sidebar {
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e5e5;
    background: #F6F6F6;
  }
  .guide-viewer__nav-item {
    padding: 14px 18px;
    font-family: var(--font-outfit, "Outfit", sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #343434;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid #f0f0f0;
    transition: background 0.2s, color 0.2s;
  }
  .guide-viewer__nav-item:last-child {
    border-bottom: none;
  }

  .guide-viewer__nav-item:hover {
    background: var(--green-light-bg, #e3f4e3);
  }

  /* The content card just holds the single shared iframe (its src is kept
     in sync with whichever sidebar item is selected — see the script at
     the bottom of the page). Height matches the sidebar's natural height
     via the other script on the page; the PDF's own native viewer handles
     scrolling internally. */
  .guide-viewer__content {
    display: flex;
    border: 1px solid #e5e5e5;
    overflow: hidden;
  }
  .guide-viewer__frame {
    flex: 1 1 auto;
    width: 100%;
    border: none;
  }

  /* Active sidebar item — driven purely by the checked radio, no JS
     involved (the iframe's src swap is the only thing JS still does). */
  #guide-fundamentals:checked ~ .guide-viewer__sidebar label[for="guide-fundamentals"],
  #guide-virtual-tech:checked ~ .guide-viewer__sidebar label[for="guide-virtual-tech"],
  #guide-l2-switching:checked ~ .guide-viewer__sidebar label[for="guide-l2-switching"],
  #guide-l3-services:checked ~ .guide-viewer__sidebar label[for="guide-l3-services"],
  #guide-l3-routing:checked ~ .guide-viewer__sidebar label[for="guide-l3-routing"],
  #guide-ip-multicast:checked ~ .guide-viewer__sidebar label[for="guide-ip-multicast"],
  #guide-mpls:checked ~ .guide-viewer__sidebar label[for="guide-mpls"],
  #guide-acl-qos:checked ~ .guide-viewer__sidebar label[for="guide-acl-qos"],
  #guide-security:checked ~ .guide-viewer__sidebar label[for="guide-security"],
  #guide-ha:checked ~ .guide-viewer__sidebar label[for="guide-ha"],
  #guide-nm-monitoring:checked ~ .guide-viewer__sidebar label[for="guide-nm-monitoring"],
  #guide-oaa:checked ~ .guide-viewer__sidebar label[for="guide-oaa"],
  #guide-fc-fcoe:checked ~ .guide-viewer__sidebar label[for="guide-fc-fcoe"],
  #guide-openflow:checked ~ .guide-viewer__sidebar label[for="guide-openflow"],
  #guide-vxlan:checked ~ .guide-viewer__sidebar label[for="guide-vxlan"] {
    background: var(--green-primary, #4fa349);
    color: #ffffff;
  }
}