/* The participant entrance (IE-001, 17 August 2026).
 *
 * WHAT THE DEVICE MUST NOT DO
 * This exercise measures the gap between what people BELIEVE a distribution is,
 * what they think it SHOULD be, and what it actually is. So the entrance must
 * not put any distribution in front of them first. The obvious trap is showing
 * the real one; the subtler one, which the briefing's own five-equal-containers
 * idea walks into, is showing an EQUAL split — a perfectly plausible answer to
 * the "ideal" question. Anchoring the ideal is the same class of error as
 * naming Norton & Ariely before anyone answers, which FL-018 removed for that
 * reason.
 *
 * Hence columns that are cut off at both ends, never labelled, never equal, and
 * never still. See static/js/distribution.js for the invariants and the test.
 *
 * In a stylesheet rather than a <style> block or style= attributes: these five
 * start pages are the wrong place to add to FL-020's pile.
 */

:root {
  --ie-ground: #F8F4EC;
  --ie-ink: #23211C;
  --ie-muted: #6B655C;
  --ie-line: #E2D9C9;
  --ie-accent: #D4A017;
  /* The tool's main colour, and the one the shared join sheet now paints its
     header with (static/css/brand.css -> --ph-brand). The brand gold itself
     manages only 2.3:1 against white text, so it is darkened to this; the
     entrance uses the same value for its primary action and eyebrow, which is
     what makes the start page and the join sheet read as one tool. */
  --ie-brand: #5C4410;
  --ie-accent-dk: #5C4410;
}

/* home.css is linked ONLY from this page, so bare element selectors are safe
   here and no marker class on <body> is needed. */
body {
  background: var(--ie-ground);
  color: var(--ie-ink);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.ie-stage {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 2.4rem 2rem;
}

/* The columns live here, behind everything, injected by distribution.js.
   Absolutely positioned so nothing the motion does can move the Start button. */
.ie-device { position: absolute; inset: 0; z-index: 0; }

/* Clears the right-hand side, where the card sits, and softens the middle so the
   headline never has to compete with a segment edge. Radial and centred: the
   composition has no left or right in its meaning, so it mirrors under
   dir="rtl" unchanged (FL-030, Decision 2). */
.ie-veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 62% at 76% 50%,
      rgba(248,244,236,.98) 0%, rgba(248,244,236,.93) 46%,
      rgba(248,244,236,.4) 80%, rgba(248,244,236,0) 100%),
    radial-gradient(ellipse 40% 42% at 22% 46%,
      rgba(248,244,236,.92) 0%, rgba(248,244,236,.72) 52%,
      rgba(248,244,236,0) 100%);
}

.ie-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  gap: 3rem; align-items: center;
}

.ie-mark { display: block; width: 64px; height: auto; margin-bottom: .8rem; border-radius: 12px; }

.ie-eyebrow {
  font-size: .74rem; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ie-accent-dk); margin: 0 0 .9rem;
}

.ie-proposition {
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.12; letter-spacing: -.02em; font-weight: 800;
  max-width: 15ch; text-wrap: balance; margin: 0;
}

.ie-lede {
  margin: 1rem 0 0; color: var(--ie-muted);
  font-size: 1rem; line-height: 1.6; max-width: 34rem;
}

.ie-card {
  background: #fff; border: 1px solid var(--ie-line); border-radius: 14px;
  padding: 1.5rem 1.4rem; box-shadow: 0 10px 30px rgba(35,33,28,.07);
}
.ie-card label {
  display: block; font-size: .74rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ie-muted); margin-bottom: .4rem;
}
.ie-code {
  width: 100%; height: 54px;
  border: 2px solid var(--ie-line); border-radius: 9px; background: #fff;
  text-align: center; font-weight: 700; font-size: 1.4rem;
  letter-spacing: .3em; text-indent: .3em; color: var(--ie-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.ie-code::placeholder { color: #C9BFA9; }
.ie-code:focus {
  outline: none; border-color: var(--ie-accent);
  box-shadow: 0 0 0 4px rgba(212,160,23,.22);
}
.ie-hint { font-size: .8rem; color: var(--ie-muted); margin: .35rem 0 0; }
.ie-error { font-size: .85rem; color: #B3261E; margin: .5rem 0 0; }

.ie-go {
  margin-top: 1.1rem; width: 100%; height: 50px;
  border: 0; border-radius: 9px; background: var(--ie-brand); color: #fff;
  font-size: 1rem; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
.ie-go:hover { background: #43310B; }
/* The entrance's Start is a link, not a submit: there is nothing to post. */
.ie-go--link { text-decoration: none; width: auto; min-width: 13rem; padding: 0 2rem; }
/* The code page has one column, not the entrance's two. */
.ie-inner--single { grid-template-columns: minmax(0, 460px); justify-content: center; }
/* The entrance lost its card when the code moved to its own page, so it is one
   column now: the claim, then the button under it. */
.ie-inner--entrance { grid-template-columns: minmax(0, 40rem); }
.ie-inner--entrance .ie-go--link { margin-top: 1.6rem; }
/* Left-aligned with the copy here; the code page centres it in its card. */
.ie-inner--entrance .ie-edu { text-align: left; margin-top: .9rem; }
.ie-proposition--sm { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
.ie-go:disabled { opacity: .75; cursor: default; }

.ie-edu { margin: .7rem 0 0; text-align: center; font-size: .83rem; }
.ie-edu a { color: var(--ie-muted); text-decoration: none; }
.ie-edu a:hover { color: var(--ie-ink); text-decoration: underline; }

.ie-code:focus-visible, .ie-go:focus-visible, .ie-edu a:focus-visible {
  outline: 3px solid var(--ie-accent); outline-offset: 3px; border-radius: 6px;
}

@media (max-width: 860px) {
  .ie-stage { align-items: flex-start; padding: 1.5rem 1.15rem 2rem; }
  .ie-inner { grid-template-columns: 1fr; gap: 1.4rem; }
  .ie-proposition { max-width: none; font-size: 1.65rem; }
  .ie-lede { font-size: .93rem; }
  /* On a phone the copy runs the full width, so the clear area is a band across
     the middle rather than a disc beside the text. */
  .ie-veil {
    background: radial-gradient(ellipse 92% 52% at 50% 44%,
      rgba(248,244,236,.98) 0%, rgba(248,244,236,.93) 50%,
      rgba(248,244,236,.5) 80%, rgba(248,244,236,0) 100%);
  }
}
