/* ───────────────────────────────────────────────────────────────
   Xovah — the project request in the home page extras section

   One device element holding one working form (index.html #extras,
   behaviour in assets/extras.js). On a wide screen it is drawn as an
   iPhone beside the text; below 1024px the same element becomes a
   laptop screen, full width, sized to its content so the form is
   comfortable to fill in with a thumb.

   Nothing here moves on its own: the device stays put and the only
   transitions are on the controls a visitor touches.

   edge.css puts the site's small radius on every element with !important;
   the rules below that need real device curves are scoped under #extras,
   which outranks it.
   ─────────────────────────────────────────────────────────────── */

/* ── "or build your package" ───────────────────────────────────── */
.or-build--side { display: none; }
.or-build--below { display: inline-flex; }
.or-build {
  align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; margin-top: 1.75rem; padding: 0 1.35rem;
  border: 1px solid rgb(var(--c-line-firm));
  color: rgb(var(--c-ink)); font-size: 0.9375rem; font-weight: 600;
  background: transparent;
  transition: border-color 180ms ease, color 180ms ease;
}
.or-build:hover { border-color: rgb(var(--c-accent)); color: rgb(var(--c-accent-text)); }
.or-build span { transition: transform 180ms ease; }
.or-build:hover span { transform: translateX(3px); }
.or-build--below { width: 100%; }

/* ── The form: the same on both devices ──────────────────────────
   Black and white on purpose. The screen is the one place on the page
   where a second colour would read as decoration rather than as the
   product, so the palette is set here in one block: dark on the phone,
   a white screen on the laptop. */
#extras .dv-screen {
  --rq-bg: #0e0f11;
  --rq-text: #ececee;
  --rq-muted: #8d9097;
  --rq-card: #151619;
  --rq-card-2: #1b1c20;
  --rq-line: #26272b;
  --rq-line-firm: #3a3b41;
  --rq-field: #0f1012;
  --rq-sel-bg: rgb(255 255 255 / 0.1);
  --rq-sel-text: #fff;
  --rq-ink: #f2f2f4;
  --rq-on-ink: #0d0e10;
}
#extras .rq {
  position: relative; flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  font-family: Inter, system-ui, sans-serif; color: var(--rq-text);
  font-size: 14px; line-height: 1.35;
  text-align: left;
}
#extras .rq-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 0.9em; margin-bottom: 1.1em;
  border-bottom: 1px solid var(--rq-line);
}
#extras .rq-brand { font-size: 0.86em; font-weight: 700; letter-spacing: -0.01em; }
#extras .rq-step { font-size: 0.8em; color: var(--rq-muted); font-variant-numeric: tabular-nums; }

#extras .rq-page { display: flex; flex-direction: column; gap: 0.7em; flex: 1; min-height: 0; }
#extras .rq-page[hidden] { display: none; }
#extras .rq-intro { margin-bottom: 0.35em; }
#extras .rq-title { font-size: 1.45em; font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; color: var(--rq-ink); }
#extras .rq-sub { margin-top: 0.3em; font-size: 0.9em; color: var(--rq-muted); }

#extras .rq-card {
  margin: 0; min-width: 0;
  padding: 0.8em 0.85em 0.85em;
  background: var(--rq-card);
  border: 1px solid var(--rq-line);
  border-radius: 12px !important;
}
#extras .rq-card.is-missing { border-color: var(--rq-line-firm); box-shadow: inset 0 0 0 1px var(--rq-line-firm); }
#extras .rq-q { float: left; width: 100%; padding: 0; font-size: 0.86em; font-weight: 500; color: var(--rq-text); }

#extras .rq-opts { clear: both; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4em; padding-top: 0.6em; }
#extras [data-q="type"] .rq-opts { grid-template-columns: repeat(2, 1fr); }
#extras .rq-opt { position: relative; display: flex; min-width: 0; }
#extras .rq-opt input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer;
}
#extras .rq-opt span {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-height: 2.5em; padding: 0 0.3em;
  font-size: 0.86em; font-weight: 500; white-space: nowrap; color: var(--rq-muted);
  background: var(--rq-card-2);
  border: 1px solid var(--rq-line);
  border-radius: 8px !important;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
#extras .rq-opt:hover span { color: var(--rq-text); border-color: var(--rq-line-firm); }
#extras .rq-opt input:checked + span {
  color: var(--rq-sel-text);
  background: var(--rq-sel-bg);
  border-color: var(--rq-ink);
  box-shadow: inset 0 0 0 1px var(--rq-ink);
}
#extras .rq-opt input:focus-visible + span { outline: 2px solid var(--rq-ink); outline-offset: 2px; }

#extras .rq-label { display: block; margin-top: 0.75em; font-size: 0.86em; font-weight: 500; color: var(--rq-text); }
#extras .rq-label:first-child { margin-top: 0; }
#extras .rq-label em { font-style: normal; font-weight: 400; color: var(--rq-muted); margin-left: 0.25em; }
#extras .rq-input {
  display: block; width: 100%; margin-top: 0.4em;
  padding: 0.6em 0.7em;
  font: inherit; font-size: 0.93em; color: var(--rq-text);
  background: var(--rq-field);
  border: 1px solid var(--rq-line);
  border-radius: 8px !important;
  transition: border-color 150ms ease;
}
#extras .rq-input:focus { outline: none; border-color: var(--rq-ink); }
#extras .rq-input.is-missing { border-color: var(--rq-line-firm); }
#extras .rq-area { resize: none; min-height: 4.6em; }
#extras .rq-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

#extras .rq-error { font-size: 0.82em; color: var(--rq-text); text-decoration: underline; text-underline-offset: 3px; }
#extras .rq-error:empty { display: none; }

#extras .rq-go, #extras .rq-back {
  display: flex; align-items: center; justify-content: center; gap: 0.4em;
  min-height: 2.9em; padding: 0 1.1em;
  font: inherit; font-size: 0.95em; font-weight: 600;
  border-radius: 10px !important;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, opacity 150ms ease;
}
#extras .rq-go { margin-top: auto; width: 100%; color: var(--rq-on-ink); background: var(--rq-ink); border: 0; }
#extras .rq-go:hover { opacity: 0.88; }
#extras .rq-go[disabled] { opacity: 0.6; cursor: progress; }
#extras .rq-back { color: var(--rq-text); background: transparent; border: 1px solid var(--rq-line-firm); }
#extras .rq-back:hover { border-color: var(--rq-ink); }
#extras .rq-go:focus-visible, #extras .rq-back:focus-visible { outline: 2px solid var(--rq-ink); outline-offset: 2px; }
#extras .rq-actions { margin-top: auto; display: grid; grid-template-columns: auto 1fr; gap: 0.5em; }
#extras .rq-actions .rq-go { margin-top: 0; }
#extras .rq-done .rq-back { margin-top: 0.4em; align-self: flex-start; }

/* ── Laptop screen (below 1024px) ──────────────────────────────── */
#extras .dv-key, #extras .dv-island, #extras .dv-status { display: none; }
#extras .dv-device {
  position: relative; width: 100%; max-width: 640px; margin: 0 auto;
  padding: 10px 10px 14px;
  background: #0a0a0b;
  border-radius: 18px !important;
  box-shadow:
    0 0 0 1px #34363b,
    0 24px 50px -30px rgb(0 0 0 / 0.8);
}
#extras .dv-glass { border-radius: 8px !important; overflow: hidden; }
#extras .dv-screen {
  /* the laptop runs the light interface: a white screen reads as a
     browser window, and the black frame around it does the contrast */
  --rq-bg: #ffffff;
  --rq-text: #16181b;
  --rq-muted: #6b6e75;
  --rq-card: #f6f6f7;
  --rq-card-2: #ffffff;
  --rq-line: #e3e4e7;
  --rq-line-firm: #b9bbc0;
  --rq-field: #ffffff;
  --rq-sel-bg: #16181b;
  --rq-sel-text: #ffffff;
  --rq-ink: #16181b;
  --rq-on-ink: #ffffff;
  position: relative; display: flex; flex-direction: column;
  background: var(--rq-bg);
  border-radius: 8px !important;
}
#extras .dv-bar {
  display: flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px;
  background: #ededee; border-bottom: 1px solid #dcdde0;
  font: 500 11.5px/1 Inter, system-ui, sans-serif; color: #6b6e75;
}
#extras .dv-bar i { width: 9px; height: 9px; flex: none; background: #c6c7cb; border-radius: 50% !important; }
#extras .dv-bar span {
  flex: 1; min-width: 0; margin-left: 8px; padding: 6px 10px;
  background: #fff; border-radius: 6px !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#extras .dv-screen .rq { padding: 16px 16px 18px; }
/* a thumb-sized form on a phone; 16px inputs so iOS does not zoom */
#extras .dv-screen .rq-input { font-size: 16px; }
@media (max-width: 400px) {
  #extras .dv-device { padding: 7px 7px 10px; }
  #extras .dv-screen .rq { padding: 14px 12px 16px; }
  #extras .rq-card { padding: 0.75em 0.65em 0.7em; }
  #extras .rq-opt span { font-size: 0.8em; }
}

/* ── iPhone (1024px and up) ────────────────────────────────────── */
@media (min-width: 1024px) {
  #extras .dv-copy, #extras .dv-col { align-self: center; }
  .or-build--side { display: inline-flex; }
  .or-build--below { display: none; }

  #extras .dv-device {
    width: min(372px, 100%); max-width: none; aspect-ratio: 776 / 1634;
    padding: 11px;
    border-radius: 60px !important;
    background: linear-gradient(90deg, #17181b 0%, #4f5258 1.5%, #25272b 4%, #1c1d20 50%, #25272b 96%, #4f5258 98.5%, #17181b 100%);
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / 0.07),
      0 0 0 1.5px #09090a,
      0 40px 70px -40px rgb(0 0 0 / 0.8);
  }
  #extras .dv-glass {
    height: 100%; padding: 4px; background: #000;
    border-radius: 50px !important;
  }
  #extras .dv-screen {
    --rq-bg: #0e0f11;
    --rq-text: #ececee;
    --rq-muted: #8d9097;
    --rq-card: #151619;
    --rq-card-2: #1b1c20;
    --rq-line: #26272b;
    --rq-line-firm: #3a3b41;
    --rq-field: #0f1012;
    --rq-sel-bg: rgb(255 255 255 / 0.1);
    --rq-sel-text: #fff;
    --rq-ink: #f2f2f4;
    --rq-on-ink: #0d0e10;
    height: 100%; overflow: hidden;
    border-radius: 46px !important;
    container-type: inline-size;
  }
  #extras .dv-bar { display: none; }

  #extras .dv-island {
    display: block; position: absolute; left: 50%; top: 3.1cqw; transform: translateX(-50%); z-index: 2;
    width: 30%; height: 8.6cqw; background: #000;
    border-radius: 999px !important;
  }
  #extras .dv-status {
    display: flex; align-items: center; justify-content: space-between; flex: none;
    padding: 4.6cqw 8.5cqw 0 10cqw; height: 15.5cqw;
    font: 600 4.1cqw/1 Inter, system-ui, sans-serif; color: #f4f5f7;
  }
  #extras .dv-status i { display: inline-flex; gap: 1cqw; align-items: flex-end; }
  #extras .dv-status i b { display: block; width: 1.1cqw; background: #f4f5f7; border-radius: 0.4cqw !important; }
  #extras .dv-status i b:nth-child(1) { height: 1.6cqw; }
  #extras .dv-status i b:nth-child(2) { height: 2.3cqw; }
  #extras .dv-status i b:nth-child(3) { height: 3cqw; }
  #extras .dv-status i em {
    display: block; width: 6cqw; height: 2.9cqw; margin-left: 1.3cqw;
    border: 1px solid rgb(244 245 247 / 0.55); border-radius: 0.9cqw !important;
    background: linear-gradient(90deg, #f4f5f7 78%, transparent 78%) content-box; padding: 0.45cqw;
  }
  #extras .dv-key {
    display: block; position: absolute; width: 3px;
    background: linear-gradient(90deg, #26282c, #4a4d53);
    border-radius: 2px !important;
  }
  #extras .dv-key--action { left: -3px; top: 17%; height: 4.5%; }
  #extras .dv-key--up     { left: -3px; top: 24.5%; height: 8%; }
  #extras .dv-key--down   { left: -3px; top: 34.5%; height: 8%; }
  #extras .dv-key--power  { right: -3px; top: 27%; height: 12%; }
  #extras .dv-key--cam    { right: -2px; top: 53%; height: 6.5%; width: 2px; }

  /* the form scales with the phone, and scrolls inside it if it must */
  #extras .dv-screen .rq {
    font-size: 3.85cqw;
    padding: 2cqw 5.6cqw 7cqw;
    overflow-y: auto; scrollbar-width: none;
  }
  #extras .dv-screen .rq::-webkit-scrollbar { display: none; }
  #extras .dv-screen .rq-input { font-size: 0.93em; }
  #extras .rq-card { border-radius: 3.4cqw !important; }
  #extras .rq-opt span, #extras .rq-input { border-radius: 2.3cqw !important; }
  #extras .rq-go, #extras .rq-back { border-radius: 2.8cqw !important; }
}

@media (prefers-reduced-motion: reduce) {
  #extras .rq *, .or-build, .or-build span { transition: none; }
}