/* ===========================================================================
   Choice One Rx — Interaction components
   Tabs, segmented controls, editorial lists, credential band, split panels.

   These exist because the first build dumped long content into card grids and
   endless lists. Nine IV therapies as nine identical cards is not a design —
   it is a database printout. Content of that shape needs a container that lets
   someone choose what to look at.
   =========================================================================== */

/* ---- Tabs --------------------------------------------------------------
   Real ARIA tablist: roving focus, arrow-key navigation, one tab stop.       */
.tabs { display: grid; gap: 0; }

.tablist {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  border-bottom: 1px solid var(--c1-border);
  margin-bottom: var(--sp-6);
}
.tablist::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  flex: none;
  padding: 14px 20px;
  border: 0;
  background: none;
  color: var(--c1-text-muted);
  font-family: var(--c1-font-body);
  font-size: var(--c1-fs-sm);
  font-weight: 550;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--c1-dur-2) var(--c1-ease);
}
.tab:first-child { padding-left: 0; }
.tab:hover { color: var(--c1-text); }
.tab::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--c1-ink-900);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--c1-dur-3) var(--c1-ease-out);
}
.tab:first-child::after { left: 0; }
.tab[aria-selected="true"] { color: var(--c1-text); font-weight: 600; }
.tab[aria-selected="true"]::after { transform: scaleX(1); }

.tab .tab-count {
  margin-left: 7px;
  font-size: var(--c1-fs-xs);
  color: var(--c1-text-subtle);
  font-variant-numeric: tabular-nums;
}

.tabpanel[hidden] { display: none; }
.tabpanel {
  animation: c1-panel-in var(--c1-dur-3) var(--c1-ease-out) both;
}
@keyframes c1-panel-in {
  from { opacity: 0; transform: translateY(6px); }
}

/* Vertical tabs — for long taxonomies (the formulary rail). */
.tabs-vertical { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-7); align-items: start; }
@media (max-width: 900px) { .tabs-vertical { grid-template-columns: 1fr; gap: var(--sp-5); } }

.tablist-vertical {
  display: grid;
  gap: 1px;
  border-bottom: 0;
  border-right: 1px solid var(--c1-border);
  margin-bottom: 0;
  max-height: 60vh;
  overflow-y: auto;
  position: sticky;
  top: 100px;
}
@media (max-width: 900px) {
  .tablist-vertical {
    position: static; max-height: none;
    grid-auto-flow: column; grid-auto-columns: max-content;
    overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--c1-border);
  }
}
.tablist-vertical .tab {
  text-align: left;
  padding: 9px 16px 9px 0;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
}
.tablist-vertical .tab::after {
  left: auto; right: -1px; bottom: 0; top: 0;
  width: 2px; height: auto;
  transform: scaleY(0); transform-origin: top;
}
.tablist-vertical .tab[aria-selected="true"]::after { transform: scaleY(1); }
@media (max-width: 900px) {
  .tablist-vertical .tab { padding: 12px 18px 12px 0; }
  .tablist-vertical .tab::after { inset: auto 0 -1px 0; width: auto; height: 2px; transform: scaleX(0); }
  .tablist-vertical .tab[aria-selected="true"]::after { transform: scaleX(1); }
}

/* ---- Segmented control ------------------------------------------------- */
.segmented {
  display: inline-flex;
  padding: 3px;
  background: var(--c1-bg-sunken);
  border: 1px solid var(--c1-border);
  border-radius: var(--c1-r);
}
.segmented button {
  padding: 8px 16px;
  border: 0; border-radius: 2px;
  background: none;
  color: var(--c1-text-muted);
  font-size: var(--c1-fs-sm); font-weight: 550;
  cursor: pointer; white-space: nowrap;
  transition: background var(--c1-dur-2) var(--c1-ease), color var(--c1-dur-2) var(--c1-ease);
}
.segmented button[aria-pressed="true"] {
  background: var(--c1-surface);
  color: var(--c1-text);
  box-shadow: var(--c1-shadow-2);
}

/* ---- Editorial numbered list ------------------------------------------
   Replaces "six cards in a grid" wherever the content is a sequence.        */
.ed-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--c1-ink-900); }
.ed-list > li {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: var(--sp-5);
  align-items: baseline;
  padding: var(--sp-5) 0;
  margin: 0;
  border-bottom: 1px solid var(--c1-border);
  transition: background var(--c1-dur-2) var(--c1-ease);
}
.ed-list > li:hover { background: var(--c1-bg-subtle); }
.ed-list .ed-num {
  font-family: var(--c1-font-body);
  font-size: var(--c1-fs-xs);
  font-weight: 600;
  letter-spacing: var(--c1-tracking-wide);
  color: var(--c1-teal-700);
  font-variant-numeric: tabular-nums;
}
.ed-list .ed-title {
  font-family: var(--c1-font-display);
  font-size: var(--c1-fs-lg);
  line-height: 1.2;
  letter-spacing: var(--c1-tracking-display);
}
.ed-list .ed-body { color: var(--c1-text-muted); font-size: var(--c1-fs-sm); line-height: 1.6; }
.ed-list .ed-meta {
  display: block; margin-top: var(--sp-2);
  font-size: var(--c1-fs-xs); color: var(--c1-text-subtle);
}
@media (max-width: 820px) {
  .ed-list > li { grid-template-columns: 3rem 1fr; gap: var(--sp-3) var(--sp-4); }
  .ed-list .ed-body { grid-column: 2; }
}

/* ---- Definition rows (dense spec lists) -------------------------------- */
.spec-rows { display: grid; border-top: 1px solid var(--c1-border); }
.spec-rows > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--sp-5);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c1-border);
  font-size: var(--c1-fs-sm);
  align-items: baseline;
}
.spec-rows dt { font-weight: 600; color: var(--c1-text); }
.spec-rows dd { margin: 0; color: var(--c1-text-muted); line-height: 1.6; }
@media (max-width: 620px) { .spec-rows > div { grid-template-columns: 1fr; gap: var(--sp-1); } }

/* ---- Credential band ---------------------------------------------------
   Replaces the cramped seal-plus-four-icons strip. Full-bleed, hairline top
   and bottom, seal at a size that reads as a credential rather than a
   favicon, then standards set as typography with vertical rules between.    */
.cred-band {
  border-top: 1px solid var(--c1-border);
  border-bottom: 1px solid var(--c1-border);
  background: var(--c1-bg-subtle);
}
.cred-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-8);
  align-items: center;
  padding-block: var(--sp-6);
}
@media (max-width: 900px) {
  .cred-inner { grid-template-columns: 1fr; gap: var(--sp-5); }
}

.cred-seal { display: flex; align-items: center; gap: var(--sp-5); }
.cred-seal img { width: 92px; height: 92px; }
.cred-seal .cred-seal-txt { display: grid; gap: 3px; max-width: 22ch; }
.cred-seal b {
  font-family: var(--c1-font-display);
  font-size: var(--c1-fs-lg);
  font-weight: 500;
  line-height: 1.1;
}
.cred-seal span { font-size: var(--c1-fs-xs); color: var(--c1-text-muted); line-height: 1.45; }

.cred-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--sp-5);
  border-left: 1px solid var(--c1-border);
  padding-left: var(--sp-8);
}
@media (max-width: 900px) { .cred-specs { border-left: 0; padding-left: 0; border-top: 1px solid var(--c1-border); padding-top: var(--sp-5); } }
.cred-specs > div { display: grid; gap: 5px; }
.cred-specs dt {
  font-size: 0.6875rem; font-weight: 600;
  letter-spacing: var(--c1-tracking-wide); text-transform: uppercase;
  color: var(--c1-text-subtle);
}
.cred-specs dd {
  margin: 0;
  font-family: var(--c1-font-display);
  font-size: var(--c1-fs-lg);
  font-weight: 500;
  line-height: 1.1;
  color: var(--c1-text);
}
.cred-specs dd small {
  display: block;
  font-family: var(--c1-font-body);
  font-size: var(--c1-fs-xs);
  font-weight: 400;
  color: var(--c1-text-muted);
  margin-top: 3px;
  letter-spacing: 0;
}

/* ---- Split — asymmetric two-column editorial block --------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-8);
  align-items: start;
}
.split-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split-wide-left { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
@media (max-width: 900px) {
  .split, .split-even, .split-wide-left { grid-template-columns: 1fr; gap: var(--sp-6); }
}
.split-sticky { position: sticky; top: 108px; }
@media (max-width: 900px) { .split-sticky { position: static; } }

/* ---- Index list — dense, scannable, evidence-shaped -------------------- */
.index-list {
  list-style: none; padding: 0; margin: 0;
  columns: 2; column-gap: var(--sp-7);
}
@media (max-width: 640px) { .index-list { columns: 1; } }
.index-list li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4);
  padding: 9px 0;
  margin: 0;
  border-bottom: 1px solid var(--c1-border);
  break-inside: avoid;
  font-size: var(--c1-fs-sm);
}
.index-list .n { color: var(--c1-text-subtle); font-variant-numeric: tabular-nums; font-size: var(--c1-fs-xs); }

/* ---- Quiet link with rule underline ------------------------------------ */
.link-rule {
  display: inline-block;
  font-size: var(--c1-fs-sm);
  font-weight: 600;
  color: var(--c1-text);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--c1-ink-900);
  transition: color var(--c1-dur-2) var(--c1-ease), border-color var(--c1-dur-2) var(--c1-ease);
}
.link-rule:hover { color: var(--c1-teal-800); border-bottom-color: var(--c1-teal-600); }
.on-dark .link-rule { color: #fff; border-bottom-color: rgba(255,255,255,.5); }
.on-dark .link-rule:hover { color: var(--c1-teal-300); border-bottom-color: var(--c1-teal-300); }

/* ---- Marquee stat — a single large figure used as evidence ------------- */
.figure {
  display: grid; gap: var(--sp-2);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c1-ink-900);
}
.figure b {
  font-family: var(--c1-font-display);
  font-size: var(--c1-fs-2xl);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.figure span { font-size: var(--c1-fs-xs); color: var(--c1-text-muted); line-height: 1.45; max-width: 26ch; }
.on-dark .figure { border-top-color: rgba(255,255,255,.35); }
.on-dark .figure span { color: rgba(255,255,255,.62); }

/* ---- Reduced motion ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tabpanel { animation: none; }
}