/*
 * VERISafe — Industry Reports picker designs (review build).
 *
 * Loads after verisafe-industry-report-beta.css and reuses its card styles
 * (.vs-industry-*) untouched — only the pickers around the card are new.
 * Once a design is chosen, keep that option's block and delete the other two.
 */

/* Cards live in one of two places, and they size differently in each — scope by
   container rather than by specificity, or one rule silently eats the other.
   In a slot (options 2 and 3) the card fills the width. In the carousel
   (option 1) the script sets an explicit px width, so the card must not shrink. */
.vsir-slot .vs-numbers-card.vs-industry-card.vsir-card {
  width: 100%;
  flex-shrink: 1;
}

.vs-numbers-track .vs-numbers-card.vs-industry-card.vsir-card {
  flex-shrink: 0;
}

/* Which business natures rolled into this industry card. */
.vsir-members {
  margin: 0;
  padding: 0 34px 18px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.vsir-members span {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 12px;
}

.vsir-empty {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  font-style: italic;
}

/* ── review scaffolding (comes out with the two rejected options) ── */
/* minmax(0, 1fr) — not 1fr — or the wide chip rail in option 2 sets the track's
   min-content width and pushes the whole section past .vs-numbers-section's
   5vw padding, where its overflow:hidden crops it. Same reason for the
   min-width:0 further down: they let the inner scrollers actually scroll. */
.vsir-review {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 34px;
}

/* The comparison panel is only chrome for the review page: with one design on
   screen and no label on it, a grey box explains nothing. Put the border,
   background and padding back here if the other options are switched on. */
.vsir-demo {
  min-width: 0;
}

.vsir-demo-body,
.vsir-slot {
  min-width: 0;
}

.vsir-demo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(18, 39, 71, 0.1);
}

.vsir-demo-num {
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.vsir-demo-name {
  color: var(--navy);
  font-size: 19px;
  font-weight: 700;
}

.vsir-demo-desc {
  flex: 1 1 220px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

/* ── shared focus state ── */
.vsir-demo button:focus-visible,
.vsir-demo select:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* ── OPTION 1 — tabs + card carousel ── */
.vsir-o1-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 20px;
  border-bottom: 2px solid rgba(18, 39, 71, 0.14);
}

.vsir-o1-tab {
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  margin-bottom: -2px;
  padding: 9px 16px;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.vsir-o1-tab:hover {
  color: var(--navy);
}

.vsir-o1-tab[aria-selected="true"] {
  color: var(--navy);
  border-bottom-color: var(--green);
}

/* The carousel reuses the page's own .vs-numbers-* arrow and dot styles so it
   matches the rest of VERISafe. Card sizing is handled by the scoped rules
   at the top of this file. */

/* ── OPTION 2 — segmented toggle + chip rail ── */
.vsir-o2-seg {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 16px;
  padding: 4px;
  border: 1px solid rgba(18, 39, 71, 0.14);
  border-radius: 999px;
  background: #fff;
}

.vsir-o2-seg-btn {
  appearance: none;
  border: none;
  cursor: pointer;
  background: none;
  padding: 9px 20px;
  border-radius: 999px;
  color: var(--muted);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.15s ease, color 0.15s ease;
}

.vsir-o2-seg-btn[aria-selected="true"] {
  background: var(--navy);
  color: #fff;
}

.vsir-o2-rail {
  display: flex;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  margin-bottom: 18px;
  padding-bottom: 12px;
  scrollbar-width: thin;
}

.vsir-chip {
  appearance: none;
  cursor: pointer;
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  border: 1px solid rgba(18, 39, 71, 0.16);
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.vsir-chip:hover {
  border-color: var(--muted);
}

.vsir-chip[aria-selected="true"] {
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green);
}

.vsir-chip-count {
  color: #d94747;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── OPTION 3 — toggle + A–Z rail + detail ── */
/*
 * The toggle and the list sit in the same narrow column, so without help they
 * read as the same kind of thing and the toggle vanishes into the stack. Three
 * things separate them: the toggle sits on a tinted green track (the only green
 * in this column), a caption between them names what the toggle just produced,
 * and the list items are quiet text until selected.
 */
.vsir-o3-sidebar {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* flex-wrap matters: the buttons can't shrink below their text (min-width is
   max-content), so without it a longer label overflows the track and the pill
   sits on top of the rounded border. Wrapping drops it to a second row instead. */
.vsir-o3-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(68, 214, 44, 0.6);
  border-radius: 999px;
  background: none;
}

/* flex-basis auto + min-width:max-content, NOT flex:1 1 0 — the two labels are
   different lengths, and forcing equal halves clipped "By Business Nature".
   The buttons size to their text first, then share whatever width is left. */
.vsir-o3-seg-btn {
  appearance: none;
  border: none;
  cursor: pointer;
  background: none;
  flex: 1 1 auto;
  min-width: max-content;
  padding: 9px 12px;
  border-radius: 999px;
  color: var(--navy);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-align: center;
  transition: background 0.15s ease, color 0.15s ease;
}

.vsir-o3-seg-btn:hover {
  background: rgba(68, 214, 44, 0.14);
}

.vsir-o3-seg-btn[aria-selected="true"],
.vsir-o3-seg-btn[aria-selected="true"]:hover {
  background: var(--green);
  color: #fff;
}

/* The gap here is doing as much work as the colour — it breaks the column into
   "control" and "list" instead of one undifferentiated stack. */
.vsir-o3-caption {
  margin: 22px 0 8px;
  padding: 0 14px 10px;
  border-bottom: 1px solid rgba(18, 39, 71, 0.1);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.vsir-o3-split {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 26px;
  align-items: start;
}

.vsir-o3-rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
  max-height: min(420px, 60vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding-right: 6px;
}

.vsir-o3-rail::-webkit-scrollbar {
  width: 8px;
}

.vsir-o3-rail::-webkit-scrollbar-track {
  background: transparent;
}

.vsir-o3-rail::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(18, 39, 71, 0.25);
  background-clip: padding-box;
}

.vsir-o3-rail::-webkit-scrollbar-thumb:hover {
  background: rgba(18, 39, 71, 0.42);
  background-clip: padding-box;
}

.vsir-o3-item {
  appearance: none;
  border: none;
  cursor: pointer;
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}

.vsir-o3-item:hover {
  background: #fff;
  color: var(--navy);
}

.vsir-o3-item[aria-selected="true"] {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 14px 22px -20px rgba(18, 39, 71, 0.45);
}

.vsir-o3-select {
  display: none;
  width: 100%;
  appearance: none;
  cursor: pointer;
  margin-bottom: 16px;
  padding: 12px 38px 12px 14px;
  border: 1px solid rgba(18, 39, 71, 0.2);
  border-radius: 10px;
  background-color: #fff;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--navy) 50%),
    linear-gradient(135deg, var(--navy) 50%, transparent 50%);
  background-position: right 18px center, right 13px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--navy);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  .vsir-demo * {
    transition: none !important;
  }
}

@media (max-width: 992px) {
  .vsir-o3-split {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* Keep the sidebar (it holds the toggle); swap only the rail for the dropdown. */
  .vsir-o3-caption,
  .vsir-o3-rail {
    display: none;
  }

  .vsir-o3-select {
    display: block;
    margin-top: 12px;
  }
}

@media (max-width: 768px) {

  .vsir-o1-tab {
    padding: 9px 12px;
    font-size: 15px;
  }

  /* Reclaim the carousel's 28px side gutters for the card itself — at 390px
     the chrome was eating a third of the screen. The arrows go with them;
     swipe and the dots are the controls on touch. */
  .vsir-carousel {
    width: 100%;
    margin-inline: 0;
    padding: 0;
  }

  .vsir-carousel .vs-numbers-btn-left,
  .vsir-carousel .vs-numbers-btn-right {
    display: none;
  }

  .vsir-card .vs-industry-card-name {
    padding: 18px 20px;
  }

  .vsir-card .vs-industry-period {
    padding: 18px 20px 22px;
  }
}

/* Once a card is this narrow, a label and its value can no longer share a line:
   the value is nowrap, so it was overflowing the card and getting clipped.
   Stack them instead. Container query, because option 3's card is narrower
   than option 1's at the same viewport. */
@container (max-width: 380px) {
  .vsir-card .vs-industry-period-stats > div {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .vsir-card .vs-industry-period-stats dd {
    text-align: left;
  }
}