/* Safe, responsive container */
.learn-container-info{
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  box-sizing: border-box;
}

/* Ensure Tabs and their content stretch to full width */
.qvii-tabs, .qvii-tabs-inner { width: 100%; }
.qvii-tabs-inner .tab-content { width: 100%; display: block; }

/* >>> Force the tab bar to be a single horizontal row with horizontal scroll on small screens <<< */
/* Cover common Dash classnames across versions */
.qvii-tabs-inner .dash-tabs,
.qvii-tabs-inner .tab-container,
.qvii-tabs-inner .tabs {
  display: flex;
  flex-wrap: nowrap;           /* never wrap to a second row */
  overflow-x: auto;            /* enable horizontal scrolling */
  -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
  gap: 6px;                    /* optional spacing between tabs */
  scrollbar-width: thin;       /* Firefox thin scrollbar */
}

/* Each tab behaves like an inline pill that doesn't shrink or wrap */
.qvii-tabs-inner .tab,
.qvii-tabs-inner .Tab {        /* some Dash themes capitalize this */
  flex: 0 0 auto;              /* don't shrink; stay in-row */
  white-space: nowrap;         /* keep label on a single line */
  display: inline-block;
}

/* Optional: minimal scrollbar styling for WebKit */
.qvii-tabs-inner .dash-tabs::-webkit-scrollbar,
.qvii-tabs-inner .tab-container::-webkit-scrollbar,
.qvii-tabs-inner .tabs::-webkit-scrollbar {
  height: 6px;
}
.qvii-tabs-inner .dash-tabs::-webkit-scrollbar-thumb,
.qvii-tabs-inner .tab-container::-webkit-scrollbar-thumb,
.qvii-tabs-inner .tabs::-webkit-scrollbar-thumb {
  border-radius: 8px;
}

/* The info boxes (bronze/silver/gold) should fill width and use a clamped, mobile-friendly height */
.info-box{
  width: 100%;
  /* Fallback first, then dvh (mobile URL-bar aware). Newer browsers will use the second line */
  height: clamp(240px, 36vh, 520px);
  height: clamp(240px, 36dvh, 520px);
  overflow-y: auto;
  margin: 5px 0;
  padding: 10px 14px;
  box-sizing: border-box;
  font-size: 14px;
  border-radius: 12px;
}

/* Contact link styling */
.info-contact{
  font-size: 20px;
  display: block;
  text-align: center;
  margin-top: 0;
  color: #6d838e;
  text-decoration: none;
  font-weight: 600;
}

/* (Removed previous "wrap gracefully" rule) */

/* Slightly smaller fonts on narrow viewports */
@media (max-width: 420px){
  .info-box { font-size: 13px; }
}