/* ==========================================================================
   Dr. Sara Cheikh · Moodboard v2 · act-comparator.css
   Act IV — The Comparator.
   Pill bar, 3-column desktop stage, swipeable carousel mobile,
   sample switching via [data-current-sample], zoom dialog.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Act IV outer — paper ground
   -------------------------------------------------------------------------- */

:where([data-act="IV"] .act-comparator) {
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-agency);
  padding-block: var(--space-9);
  padding-inline: var(--space-5);
}

/* --------------------------------------------------------------------------
   Heading block — centered, max 42rem
   -------------------------------------------------------------------------- */

:where(.act-comparator__heading) {
  max-inline-size: 42rem;
  margin-inline: auto;
  margin-block-end: var(--space-7);
  text-align: center;
}

:where(.act-comparator__eyebrow) {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--ink-quiet);
  margin-block-end: var(--space-3);
}

/* The h2 inside heading — italic Inter Tight h1-chapter */
:where(.act-comparator__heading h2) {
  display: none; /* The visible title is .act-comparator__title below */
}

:where(.act-comparator__title) {
  font-family: var(--font-agency);
  font-size: var(--fs-h1);
  font-style: italic;
  font-weight: 500;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-h1);
  color: var(--ink);
  margin-block-end: var(--space-4);
}

:where(.act-comparator__orientation) {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-normal);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Sample caption — shown/hidden per active pill
   -------------------------------------------------------------------------- */

:where(.act-comparator__sample-caption) {
  max-inline-size: 42rem;
  margin-inline: auto;
  margin-block-end: var(--space-5);
  font-size: var(--fs-body);
  color: var(--ink-muted);
  line-height: var(--lh-normal);
  text-align: center;
  transition: opacity var(--dur-fast) var(--ease-standard);
}

:where(.act-comparator__sample-caption[hidden]) {
  display: none;
}

/* --------------------------------------------------------------------------
   Pill bar — horizontal scroll on mobile, centered on desktop
   -------------------------------------------------------------------------- */

:where(.act-comparator__pills) {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-block-end: var(--space-5);
  max-inline-size: 60rem;
  margin-inline: auto;
}

:where(.act-comparator__pill) {
  padding-block: var(--space-2);
  padding-inline: var(--space-4);
  border: 1px solid var(--hairline);
  font-family: var(--font-agency);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  cursor: pointer;
  min-block-size: 2.75rem;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

:where(.act-comparator__pill:hover,
       .act-comparator__pill:focus-visible) {
  border-color: var(--ink);
  color: var(--ink);
}

:where(.act-comparator__pill[aria-pressed="true"]) {
  background-color: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* --------------------------------------------------------------------------
   Comparator stage — 3 columns desktop
   -------------------------------------------------------------------------- */

:where(.act-comparator__stage) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  max-inline-size: 84rem;
  margin-inline: auto;
  margin-block-end: var(--space-5);
  align-items: start;
}

/* Each column — card with route background */
:where(.act-comparator__column) {
  border: 1px solid var(--hairline);
  overflow: hidden;
  max-block-size: 72vh;
  overflow-y: auto;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard);
  /* 0.88× rendering size inside column */
  font-size: 0.88em;
}

:where(.act-comparator__column:hover,
       .act-comparator__column:focus-visible) {
  border-color: var(--ink);
}

:where(.act-comparator__column--ledger) {
  background-color: hsl(35, 30%, 92%); /* --route-bg ledger */
  color: hsl(20, 8%, 15%);             /* --route-ink ledger */
}

:where(.act-comparator__column--threshold) {
  background-color: hsl(240, 30%, 14%); /* --route-bg threshold */
  color: hsl(48, 20%, 95%);             /* --route-ink threshold */
}

:where(.act-comparator__column--cartographer) {
  background-color: hsl(38, 24%, 90%); /* --route-bg cartographer */
  color: hsl(30, 7%, 11%);             /* --route-ink cartographer */
}

:where(.act-comparator__column-label) {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  padding: var(--space-4);
  border-block-end: 1px solid currentColor;
  opacity: 0.6;
}

/* --------------------------------------------------------------------------
   Sample content switching — CSS-driven via [data-current-sample]
   -------------------------------------------------------------------------- */

/* All samples hidden by default */
:where(.act-comparator__sample) {
  padding: var(--space-4);
  display: none;
  font-size: 1em; /* inherits 0.88× from column */
  line-height: var(--lh-normal);
}

/* Show sample that matches current active pill */
:where([data-current-sample="substack-masthead"] .act-comparator__sample[data-sample="substack-masthead"]),
:where([data-current-sample="bio-paragraph"]    .act-comparator__sample[data-sample="bio-paragraph"]),
:where([data-current-sample="report-cover"]     .act-comparator__sample[data-sample="report-cover"]),
:where([data-current-sample="article-opening"]  .act-comparator__sample[data-sample="article-opening"]) {
  display: block;
}

/* Sample text styles */
:where(.act-comparator__sample-issue) {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  opacity: 0.6;
  margin-block-end: var(--space-3);
}

:where(.act-comparator__sample-name) {
  font-size: var(--fs-h2);
  font-weight: 500;
  line-height: var(--lh-heading);
  margin-block-end: var(--space-2);
}

:where(.act-comparator__sample-name-ar) {
  font-family: var(--font-agency-ar);
  font-size: calc(var(--fs-h2) * 1.06);
  font-weight: 500;
  line-height: calc(var(--lh-heading) + 0.08);
  margin-block-end: var(--space-3);
  direction: rtl;
}

:where(.act-comparator__sample-tagline) {
  font-size: var(--fs-body);
  font-style: italic;
  line-height: var(--lh-normal);
  margin-block-end: var(--space-4);
}

:where(.act-comparator__sample-about) {
  font-size: var(--fs-body);
  line-height: var(--lh-reading);
  opacity: 0.85;
}

:where(.act-comparator__sample-cta) {
  display: inline-block;
  margin-block-start: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  border: 1px solid currentColor;
  padding: var(--space-2) var(--space-4);
}

:where(.act-comparator__sample-coords) {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  opacity: 0.5;
  margin-block-end: var(--space-3);
}

:where(.act-comparator__sample-eyebrow) {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  opacity: 0.6;
  margin-block-end: var(--space-3);
}

:where(.act-comparator__sample-title) {
  font-size: var(--fs-h2);
  font-style: italic;
  font-weight: 500;
  line-height: var(--lh-section);
  margin-block-end: var(--space-4);
}

:where(.act-comparator__sample-deck) {
  font-size: var(--fs-body);
  font-style: italic;
  line-height: var(--lh-normal);
  opacity: 0.85;
  margin-block-end: var(--space-3);
}

:where(.act-comparator__sample-byline,
       .act-comparator__sample-date) {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-block-end: var(--space-2);
}

:where(.act-comparator__sample-stamp) {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  margin-block-start: var(--space-5);
  opacity: 0.5;
  border-block-start: 1px solid currentColor;
  padding-block-start: var(--space-3);
}

/* Column entry animation — staggered by JS adding .is-revealed */
:where(.act-comparator__column) {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-medium) var(--ease-reveal),
              transform var(--dur-medium) var(--ease-reveal),
              border-color var(--dur-fast) var(--ease-standard);
}

:where(.act-comparator__column.is-revealed) {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Zoom hint caption
   -------------------------------------------------------------------------- */

:where(.act-comparator__zoom-hint) {
  font-family: var(--font-agency);
  font-size: var(--fs-caption);
  color: var(--ink-quiet);
  text-align: center;
  margin-block-end: var(--space-7);
}

:where(.act-comparator__zoom-hint--mobile) {
  display: none;
}

/* --------------------------------------------------------------------------
   Zoom dialog
   -------------------------------------------------------------------------- */

:where(.act-comparator__zoom) {
  position: fixed;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  max-inline-size: none;
  max-block-size: none;
  padding: var(--space-6);
  border: none;
  background-color: var(--paper);
  overflow-y: auto;
  z-index: 500;
  transition: opacity var(--dur-medium) var(--ease-settle);
}

/* Non-zero specificity override so UA dialog[open] sizing doesn't win */
.act-comparator__zoom[open] {
  position: fixed;
  inset: 0;
  width: min(90vw, 1100px);
  height: auto;
  max-height: 90vh;
  margin: auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--hairline, rgba(28,28,26,0.12));
  background: var(--paper, #FAFAF8);
  color: var(--ink, #1C1C1A);
  overflow: auto;
  z-index: 1000;
}

.act-comparator__zoom[open]::backdrop {
  background: rgba(28,28,26,0.68);
  backdrop-filter: blur(8px);
}

.act-comparator__zoom-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: 1px solid currentColor;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

:where(.act-comparator__zoom::backdrop) {
  background-color: color-mix(in srgb, var(--ink) 80%, transparent);
}

:where(.act-comparator__zoom-close) {
  position: sticky;
  inset-block-start: 0;
  inset-inline-end: 0;
  display: block;
  margin-inline-start: auto;
  font-size: var(--fs-h2);
  font-weight: 400;
  color: var(--ink);
  cursor: pointer;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  line-height: 1;
  z-index: 10;
}

:where(.act-comparator__zoom-content) {
  max-inline-size: 60rem;
  margin-inline: auto;
  /* Content renders at 1.0× inside zoom dialog */
  font-size: revert;
}

/* Desktop: constrain zoom dialog to large modal */
@media (min-width: 1024px) {
  :where(.act-comparator__zoom) {
    inset: var(--space-9);
    inline-size: auto;
    block-size: auto;
    border: 1px solid var(--hairline);
  }
}

/* --------------------------------------------------------------------------
   Transition line
   -------------------------------------------------------------------------- */

:where(.act-comparator__transition) {
  font-family: var(--font-agency);
  font-size: var(--fs-h2);
  font-style: italic;
  font-weight: 400;
  line-height: var(--lh-section);
  color: var(--ink);
  text-align: center;
  max-inline-size: 32rem;
  margin-inline: auto;
  padding-block-start: var(--space-8);
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-reveal);
}

:where(.act-comparator__transition.is-revealed) {
  opacity: 1;
}

:where(.act-comparator__transition-glyph) {
  font-size: var(--fs-h3);
  font-weight: 500;
  text-align: center;
  padding-block: var(--space-5);
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Responsive — tablet
   -------------------------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 1023px) {
  :where(.act-comparator__stage) {
    gap: var(--space-4);
    /* Slightly reduced font at 0.78× for tablet */
    font-size: 0.78em;
  }
}

/* --------------------------------------------------------------------------
   Responsive — mobile: swipeable carousel
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  :where(.act-comparator) {
    padding-inline: 0;
  }

  :where(.act-comparator__heading,
         .act-comparator__pills,
         .act-comparator__sample-caption,
         .act-comparator__zoom-hint,
         .act-comparator__transition) {
    padding-inline: var(--space-4);
  }

  :where(.act-comparator__pills) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    justify-content: unset;
  }

  :where(.act-comparator__pill) {
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
  }

  :where(.act-comparator__zoom-hint--desktop) {
    display: none;
  }

  :where(.act-comparator__zoom-hint--mobile) {
    display: block;
  }

  :where(.act-comparator__stage) {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    padding-inline: var(--space-4);
    scroll-padding-inline: var(--space-4);
    /* Hide scrollbar */
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  :where(.act-comparator__stage::-webkit-scrollbar) {
    display: none;
  }

  :where(.act-comparator__column) {
    flex: 0 0 calc(100vw - var(--space-8));
    scroll-snap-align: start;
    max-block-size: 70vh;
    font-size: 1em; /* full size on mobile */
    /* Columns that aren't the visible one are hidden via scroll position, not CSS */
  }
}

/* --------------------------------------------------------------------------
   Mobile: single-column grid with JS-driven active column switching
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  :where(.act-comparator__stage[data-active-column]) {
    display: grid;
    grid-template-columns: 1fr;
    overflow-x: visible;
  }

  :where(.act-comparator__stage[data-active-column] .act-comparator__column) {
    display: none;
    flex: none;
  }

  :where(.act-comparator__stage[data-active-column="ledger"] .act-comparator__column--ledger),
  :where(.act-comparator__stage[data-active-column="threshold"] .act-comparator__column--threshold),
  :where(.act-comparator__stage[data-active-column="cartographer"] .act-comparator__column--cartographer) {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :where(.act-comparator__column) {
    opacity: 1 !important;
    transform: none !important;
    transition: border-color var(--dur-fast) var(--ease-standard) !important;
  }

  :where(.act-comparator__transition) {
    opacity: 1 !important;
    transition: none !important;
  }
}