/* ===========================================================
   THE STORY CHALLENGE — participant app
   Built from the approved mobile design (2026-10-20).
   -----------------------------------------------------------
   Editorial print look: cream stock, black ink, one hot red. Everything
   sits very slightly off-square — tags, stamps, cards and the timer each
   carry a small rotation, the way something pressed by hand does. Keep
   that. A version of this screen with every angle set to zero is a
   different, much duller product.

   The mockups are drawn at a fixed 390x844. This file is NOT fixed: the
   frame is fluid up to --frame and the vertical rhythm uses svh, because
   the real thing opens on whatever phone a visitor is holding at a booth.
   Proportions follow the design; the pixel grid does not.

   Palette note: --red is #CD2E07, which is Scene One's own brand red from
   css/styles.css on the main site. The two products share it deliberately.
   =========================================================== */

:root {
  --bg: #F6F3EE;
  --ink: #151515;
  --red: #CD2E07;
  --red-lt: #FF6A45;      /* numerals on dark; never body text — too light */
  --red-dk: #B42805;      /* error text: the hot red fails contrast at 14px */
  --paper: #FFFFFF;
  --muted: #3A352F;
  --muted-2: #5A544C;
  --rule: #DDD5CA;
  --rule-2: #DFD7CB;
  --rule-3: #CDC4B7;
  --keyline: #E6DFD4;

  --font: 'IBM Plex Sans Arabic', sans-serif;
  /* Latin and numerals only. Arabic never renders in this — the serif has
     no Arabic coverage and would silently fall back to something else. */
  --serif: 'IBM Plex Serif', Georgia, serif;

  --frame: 430px;
  --pad: 24px;
  --line-h: 38px;         /* the ruled-paper pitch; the textarea depends on it */
  --shadow: 5px 5px 0;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--bg); -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  min-height: 100svh;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; color: inherit; background: none; border: none; cursor: pointer; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Frame ----
   100svh, not vh: mobile Safari's dynamic toolbar makes vh taller than what
   you can see, which would push the primary button under the browser chrome
   on every screen here. */
.app {
  width: 100%;
  max-width: var(--frame);
  margin: 0 auto;
  min-height: 100svh;
  padding: 28px var(--pad) calc(30px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.screen { display: none; flex: 1; flex-direction: column; position: relative; }
.screen.is-on { display: flex; }

/* ---- Head: logo + step counter ---- */
.head {
  display: flex; justify-content: space-between; align-items: center;
  position: relative; z-index: 3;
}
.head__logo { height: 26px; display: block; }
.head__logo--lg { height: 30px; }
.head__step { font-size: 14px; font-weight: 600; color: var(--muted-2); }
.head__back {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-inline-end: -10px;
}

/* Latin numerals inside Arabic sentences, set in the serif. */
.num { font-family: var(--serif); }

/* ---- Step bar ---- */
.steps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px;
  margin-top: 16px; position: relative; z-index: 3;
}
.steps span { height: 4px; background: var(--rule); }
.steps span.is-done { background: var(--ink); }
.steps span.is-now { background: var(--red); }

/* ---- Type ---- */
.h1 { font-size: 36px; line-height: 1.15; font-weight: 700; }
.h2 { font-size: 27px; font-weight: 700; line-height: 1.25; }
.lede { font-size: 16px; line-height: 1.6; color: var(--muted); }
.fine { font-size: 13px; line-height: 1.6; color: var(--muted-2); }

/* A word or phrase knocked out on a black or red block, rotated slightly.
   The design's main emphasis device — used on headings, not on body text. */
.knock {
  display: inline-block; background: var(--ink); color: var(--bg);
  padding: 0 10px 4px; transform: rotate(-2deg);
}
/* align-self is load-bearing on every one of these. They sit directly inside
   .screen, which is a flex column, so a flex item stretches to the full cross
   axis and `display: inline-block` is ignored — the block would run the whole
   width instead of hugging its words, which is the entire point of the
   device. flex-start is the inline start, i.e. the right edge in RTL. */
.stamp {
  display: inline-block; align-self: flex-start;
  background: var(--red); color: #fff;
  font-weight: 700; line-height: 1.1; padding: 6px 16px 12px;
  transform: rotate(-3deg);
}
.tag {
  display: inline-block; background: var(--red); color: #fff;
  font-size: 14px; font-weight: 700; padding: 4px 10px; transform: rotate(-3deg);
}

/* ---- Buttons ----
   The hard offset shadow is the whole character of these. `.press` moves the
   button into its own shadow on tap, so a touch reads as a physical press —
   which on a phone, with no hover state to lean on, is the only affordance
   a visitor gets. */
.btn {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; height: 64px; padding: 0 24px;
  background: var(--ink); color: var(--bg);
  font-size: 20px; font-weight: 700; border-radius: 4px;
  box-shadow: var(--shadow) var(--red);
  margin-inline-start: 5px; /* room for the shadow, so it can't clip */
  width: calc(100% - 5px);
  transition: transform .12s, box-shadow .12s, opacity .2s;
}
.btn--red { background: var(--red); color: #fff; box-shadow: var(--shadow) var(--ink); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 transparent; }
.btn[disabled] { opacity: .55; pointer-events: none; }
.btn svg { flex: 0 0 auto; }

.btn-text {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 52px; font-size: 18px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 6px;
}

.actions { margin-top: auto; padding-top: 20px; }

/* ---- Decorative art ----
   Every illustration is aria-hidden and pointer-events:none. They overlap the
   content deliberately; nothing may ever sit on top of a control. */
.art { position: absolute; pointer-events: none; user-select: none; z-index: 1; }

@keyframes bob { 0%,100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(1deg) translateY(-3px); } }
@keyframes twk { 0%,100% { transform: scale(1) rotate(0); } 50% { transform: scale(.7) rotate(20deg); } }
@keyframes flt { 0%,100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-8px) rotate(var(--r)); } }
@keyframes slap {
  0% { opacity: 0; transform: rotate(var(--r)) scale(1.3); }
  60% { opacity: 1; transform: rotate(var(--r)) scale(.97); }
  100% { opacity: 1; transform: rotate(var(--r)) scale(1); }
}
@keyframes pop { 0% { transform: rotate(-3deg) scale(.7); opacity: 0; } 100% { transform: rotate(-3deg) scale(1); opacity: 1; } }

.bob { animation: bob 3s ease-in-out infinite; transform-origin: 50% 60%; }
.twk { animation: twk 1.8s ease-in-out infinite; }
.flt { animation: flt 3.4s ease-in-out infinite; }
.pop { animation: pop .42s cubic-bezier(.2,1.4,.4,1) both; }

/* The three element cards land one after another, like dealt cards. The
   delays are what make the reveal feel like a draw rather than a page load. */
.slap { animation: slap .5s cubic-bezier(.2,1.5,.4,1) both; }

@media (prefers-reduced-motion: reduce) {
  .bob, .twk, .flt, .pop, .slap { animation: none; opacity: 1; }
}

/* ===========================================================
   1. Welcome
   =========================================================== */
.wordmark { position: relative; z-index: 2; margin-top: 56px; text-align: left; }
.wordmark div {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(56px, 18vw, 72px); line-height: .9; letter-spacing: -.03em;
}
.wordmark .w1 { padding-left: 64px; }
.wordmark .w2 { padding-left: 8px; }
.wordmark .w3 {
  display: inline-block; margin-top: 10px; background: var(--red); color: #fff;
  font-size: clamp(38px, 12.8vw, 50px); line-height: 1; padding: 8px 14px 10px;
  letter-spacing: -.01em; transform: rotate(-4deg); transform-origin: 0 50%;
}

.pitch {
  position: relative; z-index: 2; margin-top: 34px;
  display: inline-block; align-self: flex-start;
  background: var(--ink); color: var(--bg);
  font-size: 22px; font-weight: 700; line-height: 1;
  padding: 12px 16px 14px; transform: rotate(2deg);
}
.pitch .num { color: var(--red-lt); }

.ask { position: relative; z-index: 2; margin-top: 26px; font-size: 21px; line-height: 1.55; font-weight: 700; }
.ask em { font-style: normal; color: var(--red); }

.aside {
  position: relative; z-index: 2; width: 170px; margin-top: 22px;
  font-size: 14px; line-height: 1.6; color: var(--muted);
}

.confex {
  font-family: var(--serif); font-size: 12px; font-weight: 600;
  letter-spacing: .1em; color: var(--muted-2);
}

/* ===========================================================
   2. The three elements
   =========================================================== */
.els { display: flex; flex-direction: column; gap: 22px; margin-top: 30px; }

/* The angle lives here, not only in the @keyframes: with reduced motion the
   animation is switched off entirely, and the cards would otherwise snap
   square — losing the one thing that stops three stacked boxes reading as a
   form. */
.el { padding: 14px 18px 16px; transform: rotate(var(--r)); }
.el__top { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; }
.el__val { font-size: 30px; font-weight: 700; line-height: 1.25; margin-top: 2px; }

/* Each card is a different stock, and each is cocked a different way — that
   is what stops three stacked boxes reading as a form. */
.el--1 { --r: -2deg; background: var(--ink); color: var(--bg); margin-inline-end: 18px; animation-delay: .15s; }
.el--1 .el__top { color: #BDB4A8; }
.el--1 .num { color: var(--red-lt); }

.el--2 { --r: 1.5deg; background: var(--paper); color: var(--ink); margin-inline-start: 14px; box-shadow: 4px 4px 0 var(--ink); animation-delay: .6s; }
.el--2 .el__top { color: var(--muted-2); }
.el--2 .num { color: var(--red); }
.el--2 .el__val { font-size: 27px; line-height: 1.3; }

.el--3 { --r: -1deg; background: var(--red); color: #fff; margin-inline-end: 40px; animation-delay: 1.05s; }
.el--3 .el__top { color: #FFD9CF; }

.note-timer { font-size: 14px; line-height: 1.5; color: var(--muted); margin-top: 18px; }
.note-timer .num { font-weight: 700; color: var(--ink); }

/* ===========================================================
   3. Writing
   =========================================================== */
/* This screen owns the viewport: the ruled sheet grows, everything else is
   fixed furniture above and below it. */
.write { padding: 0; }
.write__top { padding-top: 4px; }

.write__row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 18px; gap: 12px; }
.write__h { font-size: 28px; font-weight: 700; line-height: 1.2; flex: 1 1 auto; min-width: 0; }
.write__h em { font-style: normal; color: var(--red); }

.clock {
  font-family: var(--serif); font-size: 36px; font-weight: 700; line-height: 1;
  letter-spacing: -.01em; direction: ltr;
  background: var(--ink); color: var(--bg);
  padding: 8px 12px 9px; transform: rotate(-3deg);
  box-shadow: 4px 4px 0 var(--red);
  font-variant-numeric: tabular-nums;
}
/* Last minute: the clock itself flips to red and the label beside it says so
   in words. Colour alone is not the warning — it is unreadable to anyone who
   cannot distinguish it, and easy to miss while looking at a textarea. */
.clock.is-warning { background: var(--red); color: #fff; box-shadow: 3px 3px 0 var(--ink); transform: rotate(3deg); }
.clock.is-done { background: none; color: #9A9187; box-shadow: none; transform: none; }

/* The warning label stacks ABOVE the clock rather than beside it. Sitting
   alongside, it widened this row enough to wrap the heading onto two lines —
   the layout lurching at exactly the moment a visitor has least attention to
   spare. Stacked, the row's width is just the clock, warning or not. */
.clock-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; flex: 0 0 auto; }
.warn-label { font-size: 14px; font-weight: 700; color: var(--red); display: none; }
.warn-label.is-on { display: block; }

.bar { height: 4px; background: var(--rule); margin-top: 14px; }
.bar span { display: block; height: 4px; background: var(--red); transition: width 1s linear; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.chip { font-size: 14px; font-weight: 700; padding: 6px 10px; }
.chip--1 { background: var(--ink); color: var(--bg); transform: rotate(-1.5deg); }
.chip--1 .num { color: var(--red-lt); font-family: var(--serif); }
.chip--2 { background: var(--paper); transform: rotate(1deg); box-shadow: 2px 2px 0 var(--ink); }
.chip--2 .num { color: var(--red); font-family: var(--serif); }
.chip--3 { background: var(--red); color: #fff; transform: rotate(-1deg); }
.chip--3 .num { color: #FFD9CF; font-family: var(--serif); }

.brief { margin-top: 14px; font-size: 15px; line-height: 1.65; color: var(--muted); }

/* The ruled sheet. `background-attachment: local` is what makes the lines
   scroll WITH the text instead of staying painted on the box — without it the
   writing drifts off its own rules the moment the textarea scrolls.
   line-height must stay exactly --line-h or the text floats between rules. */
.sheet {
  flex: 1; width: 100%; min-height: 180px;
  margin-top: 10px; padding: 4px 0 0;
  border: none; resize: none;
  background-color: transparent;
  background-image: repeating-linear-gradient(to bottom,
    transparent 0, transparent calc(var(--line-h) - 1px),
    var(--rule-2) calc(var(--line-h) - 1px), var(--rule-2) var(--line-h));
  background-attachment: local;
  font-family: var(--font);
  /* 19px, comfortably over the 16px floor below which iOS Safari zooms the
     page on focus — which here would scroll the timer out of view the moment
     a visitor starts typing. */
  font-size: 19px;
  line-height: var(--line-h);
  color: var(--ink);
  direction: rtl;
}
.sheet:focus { outline: none; }
.sheet::placeholder { color: #A89F93; }

.write__foot {
  padding-top: 12px; margin-top: 10px;
  display: flex; flex-direction: column; gap: 12px;
  border-top: 1px solid var(--rule-2);
}
.meta { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted-2); }
.meta__saved { display: flex; align-items: center; gap: 6px; }

/* Time-up banner, above the sheet. */
.timeup {
  display: none; margin-top: 22px; padding: 18px 0;
  border-top: 2px solid var(--red); border-bottom: 1px solid var(--rule-2);
  gap: 14px; align-items: flex-start;
}
.timeup.is-on { display: flex; }
.timeup svg { flex: 0 0 auto; }
.timeup__h {
  display: inline-block; background: var(--red); color: #fff;
  font-size: 24px; font-weight: 700; line-height: 1.2;
  padding: 3px 10px 6px; transform: rotate(-2deg);
}
.timeup p { margin-top: 4px; font-size: 15px; line-height: 1.6; color: var(--muted); }

/* ===========================================================
   4. Submitted → competition ask
   =========================================================== */
/* The sheet slides up over the illustration, so the question sits on solid
   stock rather than on top of artwork. */
.tray {
  position: relative; z-index: 2; margin: auto calc(var(--pad) * -1) 0;
  background: var(--bg); border-top: 3px solid var(--ink);
  padding: 22px var(--pad) 6px;
}

/* ===========================================================
   5. Register
   =========================================================== */
.field { display: flex; flex-direction: column; gap: 4px; }
.field + .field { margin-top: 26px; }
.field label { font-size: 15px; font-weight: 600; color: var(--muted); }
.field input {
  height: 48px; border: none; border-bottom: 2px solid var(--rule-3);
  background: transparent; font-family: var(--font); font-size: 20px;
  color: var(--ink); padding: 0; border-radius: 0;
}
.field input:focus { outline: none; border-bottom-color: var(--ink); }
.field input[type="email"] { font-family: var(--serif); font-size: 19px; direction: ltr; text-align: right; }
.field input::placeholder { color: #A89F93; }
.field.is-bad input { border-bottom-color: var(--red); }

.err {
  display: none; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--red-dk); margin-top: 4px;
}
.err.is-on { display: flex; }

.checks { display: flex; flex-direction: column; gap: 18px; margin-top: 34px; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.6; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--red); }
.check a { font-weight: 600; text-decoration: underline; }
.check span.opt { color: var(--muted-2); }
.check.is-bad input { outline: 2px solid var(--red); outline-offset: 1px; }

/* ===========================================================
   6. Pass it on
   =========================================================== */
.pass-art { position: relative; height: 120px; margin-top: 8px; }
.pass-badge {
  position: absolute; left: 16px; top: 4px;
  background: var(--red); color: #fff; font-family: var(--serif);
  font-size: 13px; font-weight: 700; letter-spacing: .08em;
  padding: 5px 10px; transform: rotate(-6deg);
}

.example {
  margin: 22px 0 0 16px; background: var(--paper);
  padding: 14px 16px 16px; transform: rotate(1.5deg);
  box-shadow: 4px 4px 0 var(--ink);
}
.example figcaption { font-size: 13px; font-weight: 700; color: var(--red); }
.example blockquote { margin-top: 4px; font-size: 18px; line-height: 1.6; font-weight: 600; }

/* Two ruled lines, same device as the story sheet at a smaller scale. */
.sheet--sm {
  flex: 0 0 auto; height: calc(var(--line-h) * 2); min-height: 0;
  margin-top: 4px; font-size: 18px;
  background-image: repeating-linear-gradient(to bottom,
    transparent 0, transparent calc(var(--line-h) - 1px),
    var(--ink) calc(var(--line-h) - 1px), var(--ink) var(--line-h));
}

/* ===========================================================
   7. Done
   =========================================================== */
.done-h {
  margin-top: 34px; font-size: clamp(54px, 17vw, 70px);
  line-height: 1; padding: 8px 18px 18px; transform: rotate(-4deg);
}
.receipt { margin-top: 22px; border-top: 3px solid var(--ink); }
.receipt__row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--rule-3); gap: 12px;
}
.receipt__k { font-size: 15px; font-weight: 600; color: var(--muted); }
.entry-no {
  font-family: var(--serif); font-size: 26px; font-weight: 700; direction: ltr;
  background: var(--ink); color: var(--bg); padding: 2px 10px 4px; transform: rotate(2deg);
}
.status { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 700; }
.status i { width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.status.is-out i { background: var(--muted-2); }
.receipt p { margin-top: 12px; font-size: 15px; line-height: 1.65; }

.watch { margin-top: 20px; width: 190px; font-size: 14px; line-height: 1.6; }

/* Decoration must never land on a word. These two sit in the gap the stamp
   leaves at the inline end; anything lower collides with the quote beneath it. */
.spark-a { top: 120px; left: 34px; }
.spark-b { top: 170px; left: 92px; }
.watch b { color: var(--red); }

/* ===========================================================
   Errors / loading
   =========================================================== */
.alert {
  display: none; margin-top: 16px; padding: 12px 14px;
  border: 2px solid var(--red); background: #FBE9E4;
  font-size: 14.5px; line-height: 1.65; color: var(--red-dk);
}
.alert.is-on { display: block; }

.booting { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--muted-2); }

/* Short phones: the welcome screen is the tallest thing here. Let it scroll
   rather than squeezing the wordmark into something illegible. */
@media (max-height: 700px) {
  .wordmark { margin-top: 28px; }
  .wordmark div { font-size: clamp(44px, 15vw, 58px); }
  .pitch { font-size: 19px; margin-top: 24px; }
  .ask { font-size: 18px; margin-top: 18px; }
}