/* -----------------------------------------------------------------------
   Fonts
   ----------------------------------------------------------------------- */

@font-face {
  font-family: "BE Cause";
  src: url("fonts/BECauseVF.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------------------------------------------------
   Proportional scaling

   Figma frame is 1920 x 1217. We set 1rem = 10px at a 1920px viewport,
   so every px value in Figma is (n / 10)rem. The whole layout then
   scales proportionally with the viewport width. Below ~1344px the
   scale stops at 7px so the UI stays readable.
   ----------------------------------------------------------------------- */

html {
  /* Chrome (top bar, control bar, app padding) renders at 75% of Figma.
     1rem = 7.5px at a 1920px viewport. */
  font-size: clamp(5.25px, calc(100vw / 256), 7.5px);
}

:root {
  --dark-green: #004c2b;
  --green: #1ca84a;
  --mint: #e5edea;
  --bg: #f1f3f2;
  --white: #ffffff;
  --pill-bg: #f5f5f5;

  --radius: 4.8rem;          /* 48 */
  --body-size: 2.4rem;       /* 24 */
  --body-track: 0.02em;      /* 0.48 / 24 */

  --ui: "BE Cause", -apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif;
  --cm: "CM", system-ui, sans-serif;
}

/* -----------------------------------------------------------------------
   Base
   ----------------------------------------------------------------------- */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* svh = small viewport height — the stable "URL bar visible"
     measurement. Using vh on iOS Safari varies with URL bar state. */
  min-height: 100svh;
  background: var(--bg);
  font-family: var(--ui);
  font-feature-settings: "dlig" 1;
  color: var(--dark-green);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* prevent any element from forcing horizontal overflow, which makes iOS Safari zoom out and skip the mobile media query */
}

/* While the page is booting (fonts loading, first fit pass running)
   hide the entire app so there's no fallback-font flash. Use opacity
   (not visibility) so iOS Safari still computes layout correctly —
   visibility: hidden can cause scrollWidth / clientWidth reads to
   return stale values on iOS. */
html.loading .app { opacity: 0; }
.app { transition: opacity 0.15s ease; }

.app {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;               /* 24 */
  padding: 3.8rem;           /* 38 */
  min-height: 100svh;
}

/* -----------------------------------------------------------------------
   Panels
   ----------------------------------------------------------------------- */

.panel {
  background: var(--white);
  border-radius: var(--radius);
  width: 100%;
}

.panel--topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 8.9rem;            /* 89 */
  padding: 0 4.8rem;         /* 48 */
  gap: 1.2rem;
}

.panel--controls {
  display: flex;
  flex-wrap: wrap;           /* wrap when sliders get squeezed */
  align-items: center;
  min-height: 8.9rem;        /* 89 — base row height */
  padding: 2.4rem 4.8rem;    /* 24 / 48, so wrapped rows breathe */
  row-gap: 2.4rem;
  column-gap: 6rem;          /* 60 — Figma gap between groups */
}

/* On desktop the controls-main wrapper is invisible — its children
   (Random String pill + sliders) behave as direct children of the
   control bar so the Figma layout is unchanged. On mobile the media
   query promotes it to a flex box and gives it its own white panel. */
.controls-main { display: contents; }

.panel--stage {
  /* Stage renders its interior at the FULL Figma scale (100%), even
     though the surrounding chrome is at 75%. Setting font-size here to
     1.3333rem establishes a local em base of 10px at 1920 (same as the
     original Figma scale). All values inside the stage are then in em
     so they follow this base instead of the 75% rem. */
  font-size: calc(1rem * 4 / 3);

  display: flex;
  flex-direction: column;
  gap: 12em;                 /* 120 between headline + footer */
  padding: 7.2em;            /* 72 all sides */
  border-radius: 4.8em;      /* 48 — override the rem-based chrome radius */
  margin: auto 0;            /* float vertically centered in the app column */
}

/* -----------------------------------------------------------------------
   Pills (shared)

   Figma pills are 41 tall with px-24. That's tighter than a naive
   padding+line-height gives, so we fix the height and flex-center.
   ----------------------------------------------------------------------- */

.pill,
.explorations button,
.case-toggle button,
.features button {
  font-family: var(--ui);
  font-weight: 700;
  font-variation-settings: "wght" 700, "wdth" 60;
  font-size: var(--body-size);
  line-height: 1;
  letter-spacing: var(--body-track);
  color: var(--dark-green);
  background: var(--pill-bg);
  border: 0;
  height: 4.1rem;            /* 41 */
  padding: 0 2.4rem;         /* 24 horizontal */
  border-radius: 9.3rem;     /* 93 */
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
  font-feature-settings: "dlig" 1;
}
.pill:hover,
.explorations button:hover,
.case-toggle button:hover,
.features button:hover {
  background: #eceeed;
}

.explorations button.is-active,
.case-toggle button.is-active,
.features button.is-on,
.pill.is-active {
  background: var(--green);
  color: var(--white);
}

.explorations,
.case-toggle,
.features {
  display: flex;
  gap: 1.2rem;               /* 12 */
}

/* Native select for the exploration switcher — mobile only. */
.explorations-select { display: none; }

/* -----------------------------------------------------------------------
   Stage
   ----------------------------------------------------------------------- */

.stage-text {
  font-family: var(--cm);
  font-weight: 700;
  color: var(--dark-green);
  /* font-size set inline via JS from the size slider (em). */
  font-size: 14.4em;         /* default 144 */
  line-height: 0.87;
  letter-spacing: -0.01em;
  width: 100%;
  max-width: 100%;
  outline: none;
  overflow-wrap: anywhere;   /* prevent any unbreakable word from overflowing */
  word-break: break-word;
  white-space: pre-line;
  font-feature-settings: normal;
}
.stage-text:focus { caret-color: var(--green); }

.stage-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.4em;
  width: 100%;
}

.stage-caption {
  margin: 0;
  font-weight: 400;
  font-variation-settings: "wght" 400, "wdth" 60;
  font-size: 2.4em;          /* 24 */
  line-height: 1.2;
  letter-spacing: var(--body-track);
  color: var(--dark-green);
  white-space: normal;
}

.stage-brand {
  display: flex;
  align-items: center;
  gap: 2.4em;                /* 24 */
  height: 6.3em;             /* 63 — matches logo */
}
.stage-mark {
  font-family: var(--cm);
  font-weight: 700;
  font-size: 4.8em;          /* 48 */
  line-height: 1;
  color: var(--dark-green);
  text-transform: uppercase;
  white-space: nowrap;
  font-feature-settings: normal;
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.stage-logo {
  width: 6.3em;              /* 63 */
  height: 6.3em;
  flex: 0 0 auto;
  display: block;
  filter: drop-shadow(1em 1em 3em rgba(0, 0, 0, 0.1));
}

/* -----------------------------------------------------------------------
   Sliders

   Figma: slider group 799 wide, each (label 24 Medium 1.2) + (track 4 tall),
   label and track share a row via align-items:center.
   ----------------------------------------------------------------------- */

.sliders {
  display: flex;
  flex: 1 1 48rem;           /* grab at least 480px before letting features wrap */
  gap: 4.8rem;               /* 48 between the two sliders */
  align-items: center;
  min-width: 32rem;          /* hard floor so each slider track stays usable */
}

.slider {
  display: flex;
  align-items: center;
  gap: 2.4rem;               /* 24 between label and track */
  flex: 1 1 0;
  min-width: 0;
}

/* Layout inside the control bar:
   Row 1: Random String + Leading + Tracking sliders
   Row 2: feature toggles (always wraps to its own row so sliders keep room)
   At very wide viewports (≥1700px) it all fits on one row. */
.panel--controls > .pill { flex: 0 0 auto; }
.panel--controls > .features {
  flex: 0 0 100%;            /* wrap to its own row */
  justify-content: flex-start;
  flex-wrap: wrap;           /* and let the pills themselves wrap if needed */
}

@media (min-width: 1700px) {
  .panel--controls > .features {
    flex: 0 0 auto;          /* room for single-row layout */
  }
}

.slider > span {
  font-weight: 400;
  font-variation-settings: "wght" 400, "wdth" 60;
  font-size: var(--body-size);
  line-height: 1.2;
  letter-spacing: var(--body-track);
  color: var(--dark-green);
  white-space: nowrap;
  font-feature-settings: "dlig" 1;
}

.slider input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 0;
  height: 0.4rem;            /* 4 */
  background: var(--mint);
  border-radius: 13.8rem;    /* 138 */
  outline: none;
  cursor: pointer;
}
.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 3.6rem;             /* 36 */
  height: 1.8rem;            /* 18 */
  background: var(--green);
  border-radius: 7.9rem;     /* 79 */
  border: none;
  cursor: pointer;
}
.slider input[type="range"]::-moz-range-thumb {
  width: 3.6rem;
  height: 1.8rem;
  background: var(--green);
  border-radius: 7.9rem;
  border: none;
  cursor: pointer;
}

/* -----------------------------------------------------------------------
   Mobile layout (≤900px)

   - Stage shows only the centered headline (no caption, no brand)
   - Exploration switcher collapses to a native <select>
   - Controls split into two stacked white panels: [main][features]
   - Sliders stack vertically full-width
   ----------------------------------------------------------------------- */

@media (max-width: 900px) {
  html { font-size: 8px; }

  .app {
    padding: 1.6rem;
    gap: 1.6rem;
  }

  .panel { border-radius: 3rem; }

  /* --- Top bar ------------------------------------------------------- */

  .panel--topbar {
    height: auto;
    min-height: 0;
    padding: 1.6rem 2rem;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.2rem;
  }

  /* Swap the pill cluster for a native <select> */
  .explorations { display: none; }
  .explorations-select {
    display: inline-flex;
    font-family: var(--ui);
    font-weight: 700;
    font-variation-settings: "wght" 700, "wdth" 60;
    font-feature-settings: "dlig" 1;
    font-size: 2.4rem;
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--dark-green);
    background: var(--pill-bg);
    border: 0;
    height: 4.4rem;
    padding: 0 3.2rem 0 2.4rem;
    border-radius: 9.3rem;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--dark-green) 50%),
                      linear-gradient(-45deg, transparent 50%, var(--dark-green) 50%);
    background-position: right 1.4rem center, right 0.9rem center;
    background-size: 0.5rem 0.5rem, 0.5rem 0.5rem;
    background-repeat: no-repeat;
  }

  .case-toggle {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 1.2rem;
  }

  /* --- Stage: headline only, fills space, text centered ------------ */

  .panel--stage {
    /* Reset the stage's local em base. */
    font-size: 1rem;
    padding: 1.5rem;
    gap: 0;
    border-radius: 3rem;
    text-align: center;
    /* Do NOT set align-items: center here. In a flex column, that
       collapses children to their content width, which makes
       stage-text.clientWidth report ~150px instead of the real panel
       inner width — so fit computes a tiny font. Keep the default
       `stretch` so stage-text fills the full panel width, and center
       the text via text-align above. */
    justify-content: center;
    margin: 0;
    flex: 1 1 auto;           /* grow to fill vertical space */
    min-height: 0;
  }
  .stage-text {
    text-align: center;
    max-width: 100%;
    /* Respect explicit \n AND soft-wrap only at word boundaries. Never
       break inside a word. If a single word is wider than the container
       at the current size, it overflows horizontally — JS detects that
       via scrollWidth > clientWidth and shrinks. */
    white-space: pre-line;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
    overflow: visible;
    line-height: 0.95;    /* slightly looser than 0.87 so descenders don't clip */
    padding-bottom: 0.12em;
  }
  .stage-footer { display: none; }

  /* --- Controls: two stacked white panels --------------------------- */

  /* Outer container is transparent — just a flex column of its children. */
  .panel--controls {
    background: transparent;
    border-radius: 0;
    min-height: 0;
    padding: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    row-gap: 1.6rem;
    column-gap: 0;
  }

  /* Controls-main becomes its own white panel — holds just the Random
     String button on mobile. Sliders are hidden; the headline runs at
     its preferred size (largest that fits) with default leading and
     tracking. */
  .panel--controls > .controls-main {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--white);
    border-radius: 3rem;
    padding: 2rem 2.4rem;
    width: 100%;
  }
  .panel--controls > .controls-main > .pill {
    align-self: stretch;
    text-align: center;
  }
  .sliders { display: none; }

  /* Features in its own white panel below */
  .panel--controls > .features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
    background: var(--white);
    border-radius: 3rem;
    padding: 2rem 2.4rem;
    width: 100%;
    flex: 0 0 auto;
  }
}