/* ============================================================
   INTELLEHEALTH MOBILE COMPARISON COMPONENT
   Additive stylesheet, scoped to intelle-mobile-compare-
   classes plus its root block. Loads after the approved
   intellehealth.css and redefines no approved selector.

   The component replaces the horizontal comparison table below
   760 pixels. At 760 pixels and above the component hides and
   the approved desktop table shows. Test Grade and My Fit stay
   visually distinct everywhere: grades use the approved badge,
   My Fit uses a dashed outlined pill that never adopts grade
   styling.

   Sections
   01 Visibility swap with the desktop table
   02 Root and shared text
   03 Sticky comparison context
   04 Manage tests panel
   05 Overview: grade and fit, kept apart
   06 Key differences summary
   07 Factor navigation
   08 Metric cards
   09 Strongest marking: shape, text, and color together
   10 Value states: missing, not confirmed, pending
   11 Empty and single-test states
   12 Reduced motion
   13 Print
   ============================================================ */

/* ------------------------------------------------------------
   01 VISIBILITY SWAP WITH THE DESKTOP TABLE
   ------------------------------------------------------------ */
.intelle-mobile-compare { display: block; }
.intelle-mobile-compare-desktop { display: none; }
@media (max-width: 759px) {
  .intelle-compare-sticky { display: none !important; }
}
@media (min-width: 760px) {
  .intelle-mobile-compare { display: none; }
  .intelle-mobile-compare-desktop { display: block; }
  .intelle-mobile-compare.is-runtime { display: block; }
  .intelle-mobile-compare.is-runtime ~ .intelle-mobile-compare-desktop,
  .intelle-mobile-compare-desktop:has(+ .intelle-mobile-compare.is-runtime) { display: none; }
}
.intelle-compare-runtime .intelle-compare-sticky,
.intelle-compare-runtime .intelle-mobile-compare-desktop,
.intelle-compare-runtime .intelle-static-compare-verdicts { display: none !important; }
.intelle-compare-runtime .intelle-mobile-compare { display: block; }

/* ------------------------------------------------------------
   02 ROOT AND SHARED TEXT
   ------------------------------------------------------------ */
.intelle-mobile-compare {
  font-family: var(--intelle-font-ui);
  color: var(--intelle-ink);
}
.intelle-mobile-compare * { min-width: 0; }
.intelle-mobile-compare-kicker {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(8, 11, 18, 0.55);
}
.intelle-mobile-compare-note {
  margin: 10px 0 0;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.55;
  color: rgba(8, 11, 18, 0.62);
}
.intelle-mobile-compare-live {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------------
   03 STICKY COMPARISON CONTEXT
   A compact bar that keeps the selected tests and the current
   factor group in view during long comparisons. Height stays
   small so it never obscures content.
   ------------------------------------------------------------ */
.intelle-mobile-compare-context {
  position: sticky;
  top: 72px;
  z-index: 30;
  background: var(--intelle-ink);
  color: var(--intelle-canvas);
  border-radius: 0 0 var(--intelle-radius-sm) var(--intelle-radius-sm);
  padding: 10px 14px 12px;
  display: grid;
  gap: 8px;
  box-shadow: 0 10px 24px rgba(8, 11, 18, 0.28);
}
.intelle-mobile-compare-context__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.intelle-mobile-compare-context__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.intelle-mobile-compare-context__group {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(247, 244, 237, 0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.intelle-mobile-compare-context__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.intelle-mobile-compare-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgba(247, 244, 237, 0.22);
  border-radius: 999px;
  padding: 4px 11px 4px 6px;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  max-width: 100%;
}
.intelle-mobile-compare-chip__grade {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  min-height: 26px;
  border-radius: 9px;
  background: var(--intelle-canvas);
  color: var(--intelle-ink);
  font-size: 0.72rem;
  font-weight: 800;
}
.intelle-mobile-compare-chip__grade--pending {
  background: transparent;
  color: rgba(247, 244, 237, 0.72);
  border: 1.5px dashed rgba(247, 244, 237, 0.45);
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  padding: 0 5px;
}
.intelle-mobile-compare-chip__dot {
  width: 8px; height: 8px;
  border-radius: 3px;
  flex: none;
  background: var(--imc-test-color, var(--intelle-blue));
}
.intelle-mobile-compare-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 29vw;
}
.intelle-mobile-compare-manage-btn {
  border: 1.5px solid rgba(247, 244, 237, 0.3);
  background: transparent;
  color: var(--intelle-canvas);
  border-radius: 999px;
  min-height: 44px;
  padding: 0 16px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
  flex: none;
}
.intelle-mobile-compare-manage-btn[aria-expanded="true"] {
  background: var(--intelle-canvas);
  color: var(--intelle-ink);
}

/* ------------------------------------------------------------
   04 MANAGE TESTS PANEL
   ------------------------------------------------------------ */
.intelle-mobile-compare-manage {
  border: 1.5px solid rgba(8, 11, 18, 0.14);
  border-radius: var(--intelle-radius-md);
  background: var(--intelle-paper);
  padding: 16px;
  margin-top: 14px;
  display: grid;
  gap: 12px;
}
.intelle-mobile-compare-manage[hidden] { display: none !important; }
.intelle-mobile-compare-manage h3 { margin: 0; font-size: 1rem; font-weight: 800; }
.intelle-mobile-compare-manage__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}
.intelle-mobile-compare-manage__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid rgba(8, 11, 18, 0.12);
  border-radius: var(--intelle-radius-sm);
  padding: 10px 12px;
  min-height: 44px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
}
.intelle-mobile-compare-manage__item input {
  width: 20px; height: 20px;
  margin-top: 1px;
  flex: none;
  accent-color: var(--intelle-ink);
}
.intelle-mobile-compare-manage__item small {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(8, 11, 18, 0.6);
}
.intelle-mobile-compare-manage__hint {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(8, 11, 18, 0.6);
}

/* ------------------------------------------------------------
   05 OVERVIEW: GRADE AND FIT, KEPT APART
   Test Grade uses the approved badge on a labeled slot. My Fit
   uses a dashed pill with its own label. The two never share a
   container, a shape, or a color treatment.
   ------------------------------------------------------------ */
.intelle-mobile-compare-overview {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}
.intelle-mobile-compare-overview__card {
  border: 1.5px solid rgba(8, 11, 18, 0.12);
  border-left: 5px solid var(--imc-test-color, var(--intelle-blue));
  border-radius: var(--intelle-radius-md);
  background: var(--intelle-paper);
  padding: 14px 16px;
  display: grid;
  gap: 10px;
}
.intelle-mobile-compare-overview__name {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.intelle-mobile-compare-overview__provider {
  margin: 2px 0 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(8, 11, 18, 0.58);
  overflow-wrap: anywhere;
}
.intelle-mobile-compare-overview__scores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: flex-start;
}
.intelle-mobile-compare-overview__scorelabel {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(8, 11, 18, 0.55);
  display: block;
  margin-bottom: 4px;
}
.intelle-mobile-compare-overview__gradeval {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 800;
}
.intelle-mobile-compare-fit {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  border: 1.5px dashed rgba(8, 11, 18, 0.35);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 800;
}
.intelle-mobile-compare-fit small {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(8, 11, 18, 0.58);
}
.intelle-mobile-compare-overview__fitnote {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.5;
  color: rgba(8, 11, 18, 0.65);
}
.intelle-mobile-compare-pending {
  display: inline-grid;
  place-items: center;
  min-height: 38px;
  padding: 4px 12px;
  border: 2px dashed rgba(8, 11, 18, 0.3);
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(8, 11, 18, 0.6);
}

/* ------------------------------------------------------------
   06 KEY DIFFERENCES SUMMARY
   ------------------------------------------------------------ */
.intelle-mobile-compare-keydiffs {
  margin-top: 16px;
  border: 1.5px solid rgba(8, 11, 18, 0.12);
  border-radius: var(--intelle-radius-md);
  background:
    linear-gradient(90deg, #8D7CFF, #61B4FF, #51E3CE, #F4D6A2, #FF829F) top / 100% 4px no-repeat,
    var(--intelle-paper);
  padding: 18px 16px 16px;
}
.intelle-mobile-compare-keydiffs h3 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 800; }
.intelle-mobile-compare-keydiffs > p { margin: 0 0 12px; font-size: 0.82rem; font-weight: 600; color: rgba(8, 11, 18, 0.62); }
.intelle-mobile-compare-keydiffs ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.intelle-mobile-compare-keydiffs li {
  display: grid;
  gap: 2px;
  font-size: 0.88rem;
  line-height: 1.45;
  padding-left: 12px;
  border-left: 3px solid var(--imc-test-color, rgba(8, 11, 18, 0.4));
}
.intelle-mobile-compare-keydiffs li b { font-weight: 800; }
.intelle-mobile-compare-keydiffs li span { font-weight: 600; color: rgba(8, 11, 18, 0.68); }

/* ------------------------------------------------------------
   07 FACTOR NAVIGATION
   A native select jumps between factors; no sideways swiping.
   ------------------------------------------------------------ */
.intelle-mobile-compare-nav {
  margin-top: 18px;
  display: grid;
  gap: 8px;
}
.intelle-mobile-compare-nav label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(8, 11, 18, 0.55);
}
.intelle-mobile-compare-nav select {
  width: 100%;
  min-height: 48px;
  border: 1.5px solid rgba(8, 11, 18, 0.2);
  border-radius: var(--intelle-radius-sm);
  background: var(--intelle-paper);
  color: var(--intelle-ink);
  font: inherit;
  font-weight: 700;
  padding: 0 14px;
}
.intelle-mobile-compare-nav select:focus-visible,
.intelle-mobile-compare button:focus-visible,
.intelle-mobile-compare summary:focus-visible,
.intelle-mobile-compare input:focus-visible {
  outline: 3px solid var(--intelle-blue);
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   08 METRIC CARDS
   One factor equals one comparison unit: the factor name, a
   sameness or strongest tag, one row per selected test, and
   expandable evidence detail that never moves the reader.
   ------------------------------------------------------------ */
.intelle-mobile-compare-grouptitle {
  margin: 26px 0 10px;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(8, 11, 18, 0.55);
  scroll-margin-top: 88px;
}
.intelle-mobile-compare-card {
  border: 1.5px solid rgba(8, 11, 18, 0.12);
  border-radius: var(--intelle-radius-md);
  background: var(--intelle-paper);
  padding: 14px 14px 10px;
  margin-bottom: 10px;
  scroll-margin-top: 88px;
}
.intelle-mobile-compare-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.intelle-mobile-compare-card__title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  line-height: 1.3;
}
.intelle-mobile-compare-card__tag {
  flex: none;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1.5px solid rgba(8, 11, 18, 0.22);
  border-radius: 999px;
  padding: 3px 10px;
  color: rgba(8, 11, 18, 0.62);
}
.intelle-mobile-compare-card__rows {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.intelle-mobile-compare-row {
  display: grid;
  gap: 5px;
  border: 1px solid rgba(8, 11, 18, 0.1);
  border-radius: var(--intelle-radius-sm);
  padding: 10px 12px;
}
.intelle-mobile-compare-row__who {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.74rem;
  font-weight: 800;
  color: rgba(8, 11, 18, 0.62);
}
.intelle-mobile-compare-row__who span:first-of-type {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.intelle-mobile-compare-row__dot {
  width: 9px; height: 9px;
  border-radius: 3px;
  flex: none;
  background: var(--imc-test-color, var(--intelle-blue));
}
.intelle-mobile-compare-row__value {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.intelle-mobile-compare-row__value strong { font-weight: 800; }

/* ------------------------------------------------------------
   09 STRONGEST MARKING
   Shape (thick left edge plus a check glyph), text (the word
   Strongest), and color (mint) always travel together, so the
   marking survives monochrome and colorblind viewing.
   ------------------------------------------------------------ */
.intelle-mobile-compare-row--best {
  border-color: rgba(81, 227, 206, 0.7);
  border-left: 5px solid var(--intelle-mint);
  background: rgba(81, 227, 206, 0.09);
}
.intelle-mobile-compare-row__best {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--intelle-ink);
  white-space: nowrap;
  flex: none;
}
.intelle-mobile-compare-row__best::before {
  content: "\2713";
  display: inline-grid;
  place-items: center;
  width: 16px; height: 16px;
  border-radius: 6px;
  background: var(--intelle-mint);
  color: var(--intelle-ink);
  font-size: 0.68rem;
  font-weight: 800;
}

/* Expandable evidence detail keeps the reader's place */
.intelle-mobile-compare-card__detail { margin-top: 6px; }
.intelle-mobile-compare-card__detail summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--intelle-ink);
}
.intelle-mobile-compare-card__detail summary::-webkit-details-marker { display: none; }
.intelle-mobile-compare-card__detail summary::after {
  content: "";
  width: 8px; height: 8px;
  border-right: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.18s ease;
}
.intelle-mobile-compare-card__detail[open] summary::after { transform: rotate(225deg); }
.intelle-mobile-compare-card__detail > div {
  padding: 2px 4px 10px;
  display: grid;
  gap: 8px;
}
.intelle-mobile-compare-card__detail p {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.55;
  color: rgba(8, 11, 18, 0.72);
}
.intelle-mobile-compare-card__detail p b { font-weight: 800; color: var(--intelle-ink); }

/* ------------------------------------------------------------
   10 VALUE STATES
   Missing, not confirmed, and grade pending read as labeled
   states, never as silent blanks or fake values.
   ------------------------------------------------------------ */
.intelle-mobile-compare-row--state .intelle-mobile-compare-row__value {
  color: rgba(8, 11, 18, 0.58);
}
.intelle-mobile-compare-state {
  display: inline-block;
  border: 1.5px dashed rgba(8, 11, 18, 0.3);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(8, 11, 18, 0.6);
  margin-right: 6px;
}

/* ------------------------------------------------------------
   11 EMPTY AND SINGLE-TEST STATES
   ------------------------------------------------------------ */
.intelle-mobile-compare-notice {
  margin-top: 16px;
  border: 1.5px dashed rgba(8, 11, 18, 0.25);
  border-radius: var(--intelle-radius-md);
  background: var(--intelle-paper);
  padding: 20px 16px;
  display: grid;
  gap: 10px;
  justify-items: start;
}
.intelle-mobile-compare-notice h3 { margin: 0; font-size: 1rem; font-weight: 800; }
.intelle-mobile-compare-notice p { margin: 0; font-size: 0.88rem; font-weight: 600; line-height: 1.55; color: rgba(8, 11, 18, 0.66); }

/* ------------------------------------------------------------
   12 REDUCED MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .intelle-mobile-compare-card__detail summary::after { transition: none; }
}

/* ------------------------------------------------------------
   13 PRINT
   ------------------------------------------------------------ */
@media print {
  .intelle-mobile-compare { display: block !important; }
  .intelle-mobile-compare-desktop { display: none !important; }
  .intelle-mobile-compare-context,
  .intelle-compare-sticky,
  .intelle-mobile-compare-manage,
  .intelle-mobile-compare-manage-btn,
  .intelle-mobile-compare-nav { display: none !important; }
  .intelle-mobile-compare-card,
  .intelle-mobile-compare-overview__card,
  .intelle-mobile-compare-keydiffs { break-inside: avoid; border-color: #000; background: #fff; }
  .intelle-mobile-compare-card__detail > div { display: grid !important; }
  .intelle-mobile-compare-card__detail summary { display: none; }
  .intelle-mobile-compare-row--best { background: #fff; }
}