/* The support page for the App Store (US-43, SCR-41), in the platform's look:
   the Graphite design system, as the dashboard and its sign-in page use it
   (internal/dash/static/insightkit.css, graphite-design-system/).

   Graphite in short: greys only, one typeface (Geist) at weight 500, anything
   you can press is a pill, cards are a fill step above the page, no shadows.
   The page runs no script, so the theme follows the system setting, and the
   arcade animation after a send is CSS only: stepped keyframes on an inline
   SVG drawn in pixels (templates/page_art.html). Motion stops for anyone who
   asks their system for reduced motion.

   The web version (/w/, web.css) keeps its own iOS look on purpose: it opens
   inside customers' apps. This page stands on its own. */

@font-face {
  font-family: "Geist Sans";
  src: url("fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ---- tokens: the same values as the dashboard's theme ---------------------- */

:root {
  color-scheme: light dark;
  --font-sans: "Geist Sans", ui-sans-serif, system-ui, sans-serif;
  --radius-full: 9999px;
  --background: #efefef;
  --foreground: #232323;
  --foreground-strong: #000000;
  --card: #ffffff;
  --muted-foreground: #707070;
  --border: #e5e5e5;
  --ring: #a1a1a1;
  --destructive: #e40014;
  --focus-ring: 0 0 0 2px var(--card), 0 0 0 4px var(--foreground);
  --ease: cubic-bezier(.76, 0, .24, 1);

  /* The arcade screen: greys, like the reference picture. Darkest first. */
  --px-bg: #d6d6d6;
  --px-k: #1c1c1c;
  --px-d: #3e3e3e;
  --px-d2: #2c2c2c;
  --px-m: #5f5f5f;
  --px-m2: #4b4b4b;
  --px-s: #8a8a8a;
  --px-s2: #9c9c9c;
  --px-l: #b9b9b9;
  --px-w: #ffffff;
  --px-bub: #f4f4f4;
  --px-line: rgba(0, 0, 0, .05);
  --px-cap: #1c1c1c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #232323;
    --foreground: #efefef;
    --foreground-strong: #ffffff;
    --card: #313131;
    --muted-foreground: #9d9d9d;
    --border: #3a3a3a;
    --ring: #707070;
    --destructive: #ff7176;

    --px-bg: #262626;
    --px-k: #0b0b0b;
    --px-d: #575757;
    --px-d2: #464646;
    --px-m: #7a7a7a;
    --px-m2: #686868;
    --px-s: #9a9a9a;
    --px-s2: #acacac;
    --px-l: #cfcfcf;
    --px-w: #ffffff;
    --px-bub: #efefef;
    --px-line: rgba(255, 255, 255, .03);
    --px-cap: #cfcfcf;
  }
}

/* ---- page ------------------------------------------------------------------ */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; padding: 24px;
  display: flex; align-items: center; justify-content: center;
  background: var(--background); color: var(--foreground);
  font: 500 16px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
.dim { color: var(--muted-foreground); }

/* One card, like the sign-in page: no border, no shadow, a large soft corner. */
.card {
  width: 100%; max-width: 1080px; padding: 10px;
  background: var(--card); border-radius: 36px;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 10px;
}
.card.narrow { max-width: 620px; grid-template-columns: minmax(0, 1fr); }
.side { padding: 28px 36px 26px; display: flex; flex-direction: column; }

/* The developer's app, at the top: its icon and name. */
.app { display: flex; align-items: center; gap: 12px; margin: 0 0 30px; }
.app img { width: 40px; height: 40px; border-radius: 22%; }
.app .mark {
  width: 40px; height: 40px; border-radius: 22%; flex: none;
  display: grid; place-items: center; background: var(--background);
  font-weight: 700; font-size: 17px;
}
.app p { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -.32px; }

h1 { font-size: 36px; line-height: 1.16; font-weight: 700; letter-spacing: -1.08px; margin: 0 0 10px; }
.lead { color: var(--muted-foreground); font-size: 15px; margin: 0 0 26px; max-width: 460px; }

/* ---- form ------------------------------------------------------------------ */

.form { display: flex; flex-direction: column; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.field label { font-size: 13px; font-weight: 600; }
.field label .dim { font-weight: 500; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

/* Fields are the page grey inside the card: one fill step, no border. */
.input {
  width: 100%; height: 48px; padding: 0 14px;
  font: inherit; font-size: 15px; color: var(--foreground);
  background: var(--background); border: 0; border-radius: 10px;
  transition: box-shadow .3s var(--ease);
}
textarea.input { height: auto; min-height: 132px; padding: 12px 14px; resize: vertical; line-height: 1.45; }
.input::placeholder { color: var(--muted-foreground); }
.input:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }

/* A chevron drawn in CSS: the page loads no image it did not make itself. */
.select { position: relative; }
.select .input { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.select::after {
  content: ""; position: absolute; right: 17px; top: 50%; width: 7px; height: 7px;
  border-right: 2px solid var(--muted-foreground); border-bottom: 2px solid var(--muted-foreground);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}

.input[type="file"] { height: auto; padding: 8px; font-size: 14px; color: var(--muted-foreground); cursor: pointer; }
.input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 8px 16px; border: 0; border-radius: var(--radius-full);
  background: var(--card); color: var(--foreground); font: inherit; font-weight: 600; cursor: pointer;
}
.hint { color: var(--muted-foreground); font-size: 12px; line-height: 1.5; margin: 2px 0 0; }

/* Anything you can press is a pill. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border: 0; border-radius: var(--radius-full);
  background: var(--foreground); color: var(--card);
  font: inherit; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn:focus-visible { outline: 2px solid transparent; box-shadow: var(--focus-ring); }
.btn.wide { width: 100%; margin-top: 6px; }
.btn.secondary { background: var(--background); color: var(--foreground); }

.disclosure { color: var(--muted-foreground); font-size: 12px; line-height: 1.5; margin: 6px 0 14px; }

.alert {
  margin: 0 0 18px; padding: 12px 16px; border-radius: 14px;
  background: var(--background); font-size: 14px; font-weight: 600;
}
.alert.error { color: var(--destructive); }

/* For bots only: people never see it, screen readers skip it, and Tab never
   reaches it. A filled one is not a person. */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- the arcade screen ----------------------------------------------------- */

.art {
  position: relative; overflow: hidden; border-radius: 28px; min-height: 420px;
  background: var(--px-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 32px;
}
/* Scan lines, as on an old screen. Drawn by the stylesheet, so nothing loads. */
.art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--px-line) 0 1px, transparent 1px 4px);
}
.px { width: 100%; max-width: 440px; height: auto; display: block; }

.p-k { fill: var(--px-k); }   .p-d { fill: var(--px-d); }   .p-d2 { fill: var(--px-d2); }
.p-m { fill: var(--px-m); }   .p-m2 { fill: var(--px-m2); } .p-s { fill: var(--px-s); }
.p-s2 { fill: var(--px-s2); } .p-l { fill: var(--px-l); }   .p-w { fill: var(--px-w); }
.p-bub { fill: var(--px-bub); }

/* The caption under the picture, in arcade capitals. */
.arcade {
  margin: 0; font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .18em; text-transform: uppercase; color: var(--px-cap);
}
.arcade .caret { display: inline-block; margin-right: .6em; }

/* Every move is in whole pixels and whole frames: steps(), never easing.
   Transforms on SVG parts are in the picture's own units, so 1px is one cell. */
.px-head  { animation: px-nod 2.4s steps(1, end) infinite; }
.px-foot  { animation: px-tap .5s steps(1, end) infinite; }
.px-led   { animation: px-blink 1.2s steps(1, end) infinite; }
.arcade .caret { animation: px-blink 1s steps(1, end) infinite; }

@keyframes px-nod   { 0%, 70% { transform: translateY(0); } 71%, 100% { transform: translateY(1px); } }
@keyframes px-tap   { 0%, 49% { transform: translateY(0); } 50%, 100% { transform: translateY(-1px); } }
@keyframes px-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* After a send: the developer flickers in like an arcade sprite, the bubble
   pops, "GOT IT" types itself, and sparkles twinkle. */
.sent .px-figure { animation: px-spawn .6s steps(1, end) both; }
.px-bubble {
  transform-box: fill-box; transform-origin: 38% 100%;
  animation: px-pop .45s steps(3, end) .75s both;
}
.px-letter { animation: px-show .01s steps(1, end) both; }
.px-l0 { animation-delay: 1.15s; }
.px-l1 { animation-delay: 1.27s; }
.px-l2 { animation-delay: 1.39s; }
.px-l4 { animation-delay: 1.57s; }
.px-l5 { animation-delay: 1.69s; }
.px-spark { transform-box: fill-box; transform-origin: center; animation: px-twinkle 1.6s steps(1, end) infinite both; }
.px-s0 { animation-delay: 1.9s; }
.px-s1 { animation-delay: 2.3s; }
.px-s2 { animation-delay: 2.7s; }
.sent .arcade { animation: px-show .01s steps(1, end) 1.9s both; }

@keyframes px-spawn {
  0% { opacity: 0; } 15% { opacity: 1; } 30% { opacity: 0; }
  45% { opacity: 1; } 60% { opacity: .35; } 75%, 100% { opacity: 1; }
}
@keyframes px-pop {
  0% { transform: scale(0); } 34% { transform: scale(1.18); } 67% { transform: scale(.94); } 100% { transform: scale(1); }
}
@keyframes px-show { from { opacity: 0; } to { opacity: 1; } }
@keyframes px-twinkle {
  0% { opacity: 0; } 20% { opacity: 1; transform: scale(1); }
  40% { opacity: 1; transform: scale(.6); } 60%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .px *, .px, .arcade, .arcade .caret { animation: none !important; }
}

/* ---- after sending --------------------------------------------------------- */

.card.sent { max-width: 760px; grid-template-columns: minmax(0, 1fr); }
.card.sent .art { min-height: 0; padding: 40px 32px 30px; }
.card.sent .side { align-items: center; text-align: center; padding: 22px 36px 30px; }
.card.sent .lead { margin: 0 auto 6px; }
.card.sent .note { margin: 0 0 22px; font-size: 14px; }

@media (max-width: 860px) {
  body { padding: 12px; align-items: flex-start; }
  .card { grid-template-columns: minmax(0, 1fr); border-radius: 28px; padding: 0; }
  .card.sent { padding: 8px; }
  .side { padding: 26px 20px 22px; }
  h1 { font-size: 30px; letter-spacing: -.9px; }
  .pair { grid-template-columns: 1fr; }
  /* On a phone the form comes first; the picture is for after the send. */
  .card:not(.sent) .art { display: none; }
  .card.sent .art { border-radius: 22px; padding: 28px 16px 22px; }
}