/* O-11 isolated preview: FAQ hub #find — static icon tab bar from existing topic links.
   Not sticky. No invented topics. Not deployed. */

/* Explicitly static — never pin under header */
html body.g5 #find.o11-on,
html body.g5 #find.o11-on .o11-tabs,
html body.g5 #find.o11-on .fx-grid.o11-tabs {
  position: static !important;
  top: auto !important;
  bottom: auto !important;
  z-index: auto !important;
}

/* Hide legacy card chrome; restyle as calm tab rail */
html body.g5 #find.o11-on .fx-grid.o11-tabs {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 0 !important;
  margin-top: 22px !important;
  padding: 6px !important;
  border-radius: 16px !important;
  background: #fff !important;
  border: 1px solid rgba(0, 5, 62, 0.10) !important;
  box-shadow: 0 10px 28px rgba(0, 5, 62, 0.06) !important;
  overflow: hidden !important;
}

html body.g5 #find.o11-on .fx-grid.o11-tabs .fx-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  text-decoration: none !important;
  color: inherit !important;
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 14px 8px 12px !important;
  border-radius: 12px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}

html body.g5 #find.o11-on .fx-grid.o11-tabs .fx-card:hover {
  background: #f4f6fa !important;
  transform: none !important;
  box-shadow: none !important;
}

html body.g5 #find.o11-on .fx-grid.o11-tabs .fx-card:focus-visible {
  outline: 3px solid #0075BD !important;
  outline-offset: 2px !important;
  z-index: 1 !important;
}

html body.g5 #find.o11-on .fx-grid.o11-tabs .fx-ico {
  grid-column: auto !important;
  grid-row: auto !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: linear-gradient(160deg, #00053E, #002D5C) !important;
  color: #FED14D !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 auto !important;
}

html body.g5 #find.o11-on .fx-grid.o11-tabs .fx-ico svg {
  width: 18px !important;
  height: 18px !important;
}

html body.g5 #find.o11-on .fx-grid.o11-tabs .fx-card strong {
  grid-column: auto !important;
  grid-row: auto !important;
  display: block !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: var(--ink, #00053E) !important;
  max-width: 100% !important;
  text-wrap: balance !important;
}

html body.g5 #find.o11-on .fx-grid.o11-tabs .fx-card > span:not(.fx-ico) {
  grid-column: auto !important;
  grid-row: auto !important;
  display: block !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  color: #5a6478 !important;
  font-weight: 600 !important;
}

/* Active hash match (optional class from inject JS) */
html body.g5 #find.o11-on .fx-grid.o11-tabs .fx-card.is-current {
  background: #eef3fa !important;
}
html body.g5 #find.o11-on .fx-grid.o11-tabs .fx-card.is-current strong {
  color: #00468C !important;
}

/* Search stays calm above tabs */
html body.g5 #find.o11-on .fx-search {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}

/* ---- Tablet: 3×2 ---- */
@media (max-width: 1179px) and (min-width: 700px) {
  html body.g5 #find.o11-on .fx-grid.o11-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }
  html body.g5 #find.o11-on .fx-grid.o11-tabs .fx-card {
    padding: 14px 10px !important;
  }
  html body.g5 #find.o11-on .fx-grid.o11-tabs .fx-card strong {
    font-size: 13px !important;
  }
}

/* ---- Phone: 2×3, no sideways scroll ---- */
@media (max-width: 699px) {
  html body.g5 #find.o11-on .fx-grid.o11-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px !important;
    padding: 6px !important;
  }
  html body.g5 #find.o11-on .fx-grid.o11-tabs .fx-card {
    padding: 12px 8px 10px !important;
    gap: 6px !important;
  }
  html body.g5 #find.o11-on .fx-grid.o11-tabs .fx-ico {
    width: 36px !important;
    height: 36px !important;
  }
  html body.g5 #find.o11-on .fx-grid.o11-tabs .fx-card strong {
    font-size: 12px !important;
  }
  html body.g5 #find.o11-on .fx-grid.o11-tabs .fx-card > span:not(.fx-ico) {
    font-size: 12px !important;
  }
}