/* ═══════════════════════════════════════════════════════════════════════════
   «صورك — واجهة بلادك» · منصة عودة الحياة

   ONE SCREEN. NO SCROLLING. The design is a 1080×1920 canvas, so this is one
   too: the sheet is min(100vw, 56.25svh) wide and 16/9 of that tall. 16/9 of
   56.25svh is exactly 100svh, so it can touch the bottom of the screen and
   never pass it, on any phone. Everything on it is placed at the percentage
   the artwork puts it at.

   MEASURED, NOT MATCHED BY EYE. The design was rasterised at 200dpi and
   scanned. x is a percentage of the width, y of the height:

     orange #E77517   green #46AA7D   navy #16203A
     marks    x 9.13%      y 5.85%     w 21.8%
     lockup   right 8.53%  y 4.84%     w 34.6%
     text     right 9.47%  y 12.79%
     fields   x 14.1%      w 72.2%     h 5.38%   tops 31.48 / 37.91 / 44.26%
     button   y 50.51%     h 7.99%     radius 1.9%
     artwork  x 0–99.9%    y 58.12–99.96%, full width
     bands    18.3→28.8% and 68.4→78.9%

   Sizes inside the sheet are in cqw — percent of the sheet's own width — so
   the composition holds at every screen size rather than at one.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Expo Arabic"; src: url("fonts/ExpoArabic-Light.woff2")    format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Expo Arabic"; src: url("fonts/ExpoArabic-Book.woff2")     format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Expo Arabic"; src: url("fonts/ExpoArabic-Medium.woff2")   format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Expo Arabic"; src: url("fonts/ExpoArabic-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Expo Arabic"; src: url("fonts/ExpoArabic-Bold.woff2")     format("woff2"); font-weight: 700 900; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }

html, body { overflow-x: hidden; }

body {
  --or: #E77517;
  --gr: #46AA7D;
  --nv: #16203A;
  --ink: #1B2340;
  --cw: min(100vw, 56.25svh);

  margin: 0;
  padding: 0;
  min-height: 100svh;
  display: grid;
  place-content: center;
  background: #fff;
  color: var(--ink);
  font-family: "Expo Arabic", "Segoe UI", Tahoma, sans-serif;
  -webkit-text-size-adjust: 100%;
}

/* ── the canvas ───────────────────────────────────────────────────────────── */
.sheet {
  position: relative;
  width: var(--cw);
  height: calc(var(--cw) * 16 / 9);
  overflow: hidden;
  background: #fff;
  container-type: inline-size;
}

/* ── the two bands ─────────────────────────────────────────────────────────
 * An inline SVG rather than two skewed boxes. The four measured points are
 * named directly on a 9×16 grid — 18.3% of 16 is 2.928, 28.8% is 4.608, 68.4%
 * is 10.944, 78.9% is 12.624 — and the two shapes SHARE the lower edge, so
 * the bands meet on one line instead of two that nearly do. There is no angle
 * to convert and no pivot to reason about.
 */
.sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('data:image/svg+xml;utf8,\
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 16" preserveAspectRatio="none">\
<polygon points="0,2.928 9,4.608 9,12.624 0,10.944" fill="%23E77517"/>\
<polygon points="0,10.944 9,12.624 9,16 0,16" fill="%2346AA7D"/>\
</svg>');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* ── the artwork ───────────────────────────────────────────────────────────
 * It runs off the bottom on purpose. Scanned out of the design it sits at
 * y 58.12–99.96%, full width; the picture is square, so at full width it is
 * 56.25% of the height and 58.12 + 56.25 overshoots the page by 14% — that
 * overshoot IS the crop the designer used. Anchoring it to the bottom instead
 * puts its top at 43.75% and drives the planes through the form.
 */
.sheet::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 58.12%;
  left: 0; right: 0;
  height: 56.25%;
  background: url("img/camera.webp") center top / 100% auto no-repeat;
  pointer-events: none;
}

/* ── the marks and the lockup ─────────────────────────────────────────────── */
.marks {
  position: absolute; z-index: 2;
  left: 9.13%; top: 5.85%; width: 21.8%;
  height: auto; display: block;
}
.lockup {
  position: absolute; z-index: 2;
  right: 8.53%; top: 4.84%; width: 34.6%;
  height: auto; display: block;
}

/* ── the invitation ────────────────────────────────────────────────────────
 * Bigger than the artwork's, deliberately. The design sets this at 2% of the
 * canvas width, which is 8.6px on a phone: a poster is looked at, a form is
 * read and filled in. At 2.7% the block still lands in the space the design
 * left for it, above the first diagonal.
 */
.intro {
  position: absolute; z-index: 2;
  right: 9.47%; left: 9.47%; top: 12.79%;
  margin: 0;
  text-align: start;
  font-size: 2.7cqw;
  line-height: 1.6;
  color: var(--ink);
}

/* ── the form ─────────────────────────────────────────────────────────────── */
form {
  position: absolute; z-index: 2;
  left: 14.1%; width: 72.2%; top: 31.48%;
  margin: 0; padding: 0;
}
.hp { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
      clip-path: inset(50%); }

/* The design prints the label inside the box. A <label> cannot become a
   placeholder without script, so it is given no height and pushed down into
   padding reserved at the top of the input below it — the same place, and
   unlike a placeholder it is still there once somebody has typed. */
form label {
  position: relative; top: 3.9cqw; z-index: 2;
  display: block; height: 0; margin: 0;
  padding-inline-start: 3.6cqw;
  font-size: 2.4cqw; font-weight: 700; color: #99A0AD;
  pointer-events: none;
}
form input[type=text], form input[type=tel], form input[type=email], form input:not([type]) {
  width: 100%;
  height: 9.57cqw;
  background: #fff;
  border: 0;
  border-radius: 1.9cqw;
  padding: 4.4cqw 3.6cqw 0;
  margin: 0 0 1.78cqw;
  font: inherit;
  font-size: 3.3cqw;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 0 .3cqw 1.2cqw rgba(0, 0, 0, .1);
}
form input:focus { outline: .5cqw solid var(--nv); outline-offset: .3cqw; }

/* ── the one dark button ───────────────────────────────────────────────────
 * THE LABEL IS THE BUTTON. The words inside a file input's own button belong
 * to the browser — «Choose file» in whatever language the phone is set to —
 * and no stylesheet can replace them. The design's button says «اضغط لرفع
 * صورة», so the input is clipped away and its label is dressed instead.
 * Clipped rather than display:none, because an undisplayed file input cannot
 * be focused and a keyboard would find nothing behind the button.
 *
 * The design has one button and no way to send, so that button does both: the
 * picker first, and once a photograph is attached the send button takes its
 * place — same position, same size, one button on screen at every moment.
 */
form input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0;
                        clip-path: inset(50%); }
.pick, .go {
  display: block;
  width: 100%;
  height: 14.2cqw;
  margin: 1.53cqw 0 0;
  padding: 0;
  border: 0;
  border-radius: 1.9cqw;
  background: var(--nv);
  color: #fff;
  font: inherit;
  font-size: 3.7cqw;
  font-weight: 800;
  line-height: 14.2cqw;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 .4cqw 1.4cqw rgba(0, 0, 0, .2);
}
/* .pick is a <label>; the rules above must beat the floating-label block */
.pick { position: static; top: auto; height: 14.2cqw; pointer-events: auto; color: #fff;
        padding-inline-start: 0; }
form.has-photo .pick { display: none; }
form:not(.has-photo) .go { display: none; }
.go { background: var(--gr); }
.go:disabled { opacity: .6; cursor: default; }

/* ── the legal notice ──────────────────────────────────────────────────────
 * It carries its own ground. The button ends at 58.5% of the height and the
 * artwork begins at 58.12% — the design leaves no empty orange after the
 * button, because the design has nothing to put there, and white text
 * straight onto the clouds could not be read.
 */
.consent {
  position: absolute;
  top: 50cqw; left: -6cqw; right: -6cqw;
  margin: 0;
  padding: .9cqw 2cqw;
  border-radius: 1.4cqw;
  background: rgba(22, 32, 58, .62);
  color: #fff;
  font-size: 2.1cqw;
  line-height: 1.5;
  text-align: center;
}
.err {
  position: absolute;
  top: 55cqw; left: -6cqw; right: -6cqw;
  margin: 0;
  color: #fff; font-weight: 700; font-size: 2.4cqw; line-height: 1.5;
  text-align: center;
}
/* only dressed when it says something, or an empty dark box sits under the
   button on every visit */
.err:not(:empty) { padding: .9cqw 2cqw; border-radius: 1.4cqw; background: rgba(150, 20, 20, .82); }

/* Absolutely placed so that attaching a photograph cannot push the button
   down — on a fixed sheet, anything that changes height moves everything
   under it. */
.prev {
  position: absolute;
  top: 60cqw; left: 0; right: 0;
  display: flex; justify-content: center; align-items: center; gap: 1.6cqw;
  color: #fff; font-size: 2.4cqw; font-weight: 700;
}
.prev[hidden] { display: none; }   /* an author display beats the hidden attribute */
.prev img { width: 7cqw; height: 7cqw; border-radius: 1.2cqw;
            border: .3cqw solid rgba(255, 255, 255, .7); object-fit: cover; }

/* ── after it is sent, and when the call is closed ────────────────────────── */
.done, .closed {
  position: absolute; z-index: 3;
  left: 9.47%; right: 9.47%; top: 34%;
  text-align: center; color: var(--ink);
}
.done .big { margin: 0 0 2cqw; font-size: 6cqw; font-weight: 800; color: var(--gr); }
.done .sub { margin: 0; font-size: 3.2cqw; line-height: 1.8; }
.closed { font-size: 3.4cqw; line-height: 1.9; }

/* The design is a light one and stays one: these are a campaign's colours, and
   a dark rendering of them is a different poster. */
@media (prefers-color-scheme: dark) {
  body, .sheet { background: #fff; color: var(--ink); }
  .intro, .done, .closed { color: var(--ink); }
  form input { background: #fff; color: var(--ink); }
}