/* ==========================================================================
   SIGMA SCANNER — mobile-app.css
   §12 Mobile App · floating device mockups + a real notify form.

   ---------------------------------------------------------------------------
   WHY THE PHONES SHOW A DIAGRAM, NOT A SCREENSHOT
   ---------------------------------------------------------------------------
   There is no app store listing yet, so there is no real screenshot to
   crop into a device frame. Each phone instead shows a schematic of a real
   screen (stock scoring, the portfolio curve) in the same diagram language
   as §4 Overview's laptop mockup — recognisably the product, honestly not
   a photograph of a release that does not exist.

   ---------------------------------------------------------------------------
   WHY THE SECTION STAYS LIGHT
   ---------------------------------------------------------------------------
   06-DESIGN-SYSTEM.md reserves dark surfaces for exactly two sections
   (§7 Proof, §14 Footer) so that choice keeps its meaning. "Premium
   lighting" here comes from soft drifting radial-gradient blobs and glass
   floating over a still-light section, not from a third dark surface. The
   phone bezels are near-black, same as any real device mockup would be —
   that is chrome on a small element, not a section-level surface.

   ---------------------------------------------------------------------------
   LAYER DISCIPLINE
   ---------------------------------------------------------------------------
   Base rules and every responsive override live together in
   @layer components — an override left in @layer layout has silently lost
   to a components-layer base rule twice already in this project, regardless
   of specificity or matching media query.
   ========================================================================== */

@layer components {

  /* ========================================================================
     SECTION SHELL
     ======================================================================== */
  .app { position: relative; isolation: isolate; overflow: clip; }

  .app__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(55% 50% at 90% 90%, rgb(16 160 80 / .08) 0%, rgb(16 160 80 / 0) 70%),
      radial-gradient(50% 45% at 6% 4%,   rgb(34 197 94 / .06) 0%, rgb(34 197 94 / 0) 70%);
  }

  .app .ss-container { position: relative; z-index: 1; }

  .app__board {
    display: flex;
    flex-direction: column;
    gap: var(--sp-11);
    align-items: center;
  }

  /* ========================================================================
     STAGE — blobs + two floating phones + glass chips
     ======================================================================== */
  .app__stage {
    position: relative;
    inline-size: 100%;
    max-inline-size: 420px;
    block-size: clamp(380px, 80vw, 520px);
  }

  .app__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(56px);
    pointer-events: none;
  }
  .app__blob--a {
    inline-size: 60%; block-size: 60%;
    inset-block-start: -8%; inset-inline-start: -12%;
    background: radial-gradient(circle, rgb(16 160 80 / .32), rgb(16 160 80 / 0) 70%);
  }
  .app__blob--b {
    inline-size: 55%; block-size: 55%;
    inset-block-end: -10%; inset-inline-end: -10%;
    background: radial-gradient(circle, rgb(74 222 128 / .28), rgb(74 222 128 / 0) 70%);
  }
  [data-motion="full"] .app__blob--a { animation: app-blob-drift-a 16s ease-in-out infinite; }
  [data-motion="full"] .app__blob--b { animation: app-blob-drift-b 19s ease-in-out infinite; }

  /* ---------- PHONES -------------------------------------------------------- */
  .device-phone {
    position: absolute;
    inline-size: 208px;
    padding: 10px;
    border-radius: 36px;
    background: var(--ink-900);
    box-shadow: var(--shadow-hero);
  }

  .device-phone--front {
    inset-block-start: 14%;
    inset-inline-start: 50%;
    transform: translateX(-50%) rotate(-5deg);
    z-index: 2;
  }
  .device-phone--back {
    inline-size: 188px;
    inset-block-start: 0;
    inset-inline-end: 2%;
    transform: rotate(9deg);
    z-index: 1;
    filter: brightness(.98);
    opacity: .92;
  }

  [data-motion="full"] .device-phone--front { animation: app-phone-float-front 6s ease-in-out infinite; }
  [data-motion="full"] .device-phone--back  { animation: app-phone-float-back 7.5s ease-in-out infinite; }

  .device-phone__notch {
    position: absolute;
    inset-block-start: 10px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inline-size: 64px; block-size: 16px;
    border-radius: var(--r-full);
    background: var(--ink-900);
    z-index: 2;
  }

  .device-phone__screen {
    position: relative;
    inline-size: 100%;
    aspect-ratio: 9 / 19.5;
    border-radius: 26px;
    background: var(--paper);
    overflow: hidden;
    padding: 30px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
  }

  .device-phone__appbar {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--ink-900);
  }

  /* Portfolio screen (back phone) */
  .device-phone__curve { display: block; inline-size: 100%; block-size: 72px; }
  .device-phone__curve path {
    fill: none;
    stroke: var(--signal-600);
    stroke-width: 2.5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
  }
  .device-phone__metric { display: flex; flex-direction: column; gap: 2px; margin-block-start: auto; }
  .device-phone__metric-value { font-family: var(--font-mono); font-weight: 700; font-size: 20px; color: var(--ink-900); }
  .device-phone__metric-label { font-size: 10px; color: var(--ink-400); }

  /* Stock scoring screen (front phone) */
  .device-phone__rows { display: flex; flex-direction: column; gap: var(--sp-2); }
  .device-phone__row {
    display: grid;
    grid-template-columns: 44px 1fr 22px;
    align-items: center;
    gap: var(--sp-2);
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-600);
  }
  .device-phone__row i {
    display: block;
    block-size: 5px;
    border-radius: var(--r-full);
    background: var(--ink-100);
    position: relative;
    overflow: hidden;
  }
  .device-phone__row i::before {
    content: "";
    position: absolute; inset-block: 0; inset-inline-start: 0;
    inline-size: calc(var(--v, 0) * 100%);
    border-radius: inherit;
    background: linear-gradient(90deg, var(--signal-500), var(--signal-600));
  }
  .device-phone__row b { font-family: var(--font-mono); color: var(--ink-900); text-align: end; }

  /* ---------- GLASS CHIPS ----------------------------------------------------- */
  .app__chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-full);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid rgb(255 255 255 / .7);
    box-shadow: var(--inset-top), var(--shadow-md);
    font-size: var(--fs-xs);
    font-weight: 600;
    color: var(--ink-700);
    z-index: 3;
  }
  .app__chip .ss-icon { inline-size: 14px; block-size: 14px; color: var(--signal-600); }
  .app__chip--a { inset-block-start: 6%; inset-inline-start: -4%; }
  .app__chip--b { inset-block-end: 10%; inset-inline-start: -6%; display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
  .app__chip-value { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-body); color: var(--signal-700); }
  .app__chip-label { font-size: 10px; color: var(--ink-400); font-weight: 500; }

  /* ========================================================================
     PANEL — glassmorphism, real form
     ======================================================================== */
  .app__panel {
    inline-size: 100%;
    max-inline-size: 480px;
    padding: var(--sp-8);
    border-radius: var(--r-2xl);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid rgb(255 255 255 / .7);
    box-shadow: var(--inset-top), var(--shadow-lg);
    text-align: center;
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .app__panel { background: rgb(255 255 255 / .96); }
  }

  .app__title {
    font-size: var(--fs-h2);
    line-height: var(--lh-h2);
    letter-spacing: var(--ls-h2);
    color: var(--ink-900);
    margin-block: var(--sp-3) var(--sp-3);
  }
  .app__intro { font-size: var(--fs-body); color: var(--ink-500); margin-block-end: var(--sp-7); }

  .app__form-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-5);
    border-radius: var(--r-full);
    background: var(--paper);
    border: 1px solid var(--ink-200);
  }
  .app__form-row .ss-icon { color: var(--ink-400); flex: none; }
  .app__form-input {
    flex: 1 1 auto;
    min-inline-size: 0;
    border: 0;
    background: none;
    font-size: var(--fs-sm);
    color: var(--ink-900);
  }
  .app__form-input::placeholder { color: var(--ink-300); }
  .app__form-input:focus-visible { outline: none; }
  .app__form-submit { flex: none; white-space: nowrap; }

  .app__form-note { margin-block-start: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-400); }

  .app__form-success {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--r-full);
    background: var(--signal-050);
    color: var(--signal-700);
    font-size: var(--fs-sm);
    font-weight: 600;
  }
  .app__form-success .ss-icon { inline-size: 18px; block-size: 18px; }

  .app__form.is-sent .app__form-row,
  .app__form.is-sent .app__form-note { display: none; }
  .app__form.is-sent .app__form-success { display: flex; }

  .app__form-input:invalid:not(:placeholder-shown) { color: var(--error); }

  /* ---------- OS PILLS -------------------------------------------------------- */
  .app__os-row { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-6); }
  .app__os-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-full);
    background: var(--ink-050);
    color: var(--ink-500);
    font-size: var(--fs-xs);
    font-weight: 600;
  }
  .app__os-pill .ss-icon { inline-size: 14px; block-size: 14px; }

  /* ========================================================================
     MOTION
     ======================================================================== */
  @keyframes app-phone-float-front {
    0%, 100% { transform: translateX(-50%) rotate(-5deg) translateY(0); }
    50%      { transform: translateX(-50%) rotate(-5deg) translateY(-14px); }
  }
  @keyframes app-phone-float-back {
    0%, 100% { transform: rotate(9deg) translateY(0); }
    50%      { transform: rotate(9deg) translateY(-10px); }
  }
  @keyframes app-blob-drift-a {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(6%, 8%) scale(1.12); }
  }
  @keyframes app-blob-drift-b {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-8%, -6%) scale(1.1); }
  }

  /* ========================================================================
     RESPONSIVE — all in @layer components, see file header
     ======================================================================== */
  @media (min-width: 1024px) {
    .app__board { flex-direction: row; align-items: center; justify-content: center; gap: var(--sp-13); text-align: start; }
    .app__stage { flex: 1 1 420px; }
    .app__panel { flex: 1 1 460px; text-align: start; }
    .app__os-row { justify-content: flex-start; }
  }
}
.app__os-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.app__os-btn {
  flex: 1;
  min-width: 0;
  height: 56px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 5px 5px;
  box-sizing: border-box;

  border: 1px solid #cfe5d8;
  border-radius: 14px;

  background: #f7fcf9;
  color: #0b3d2e;

  font-family: inherit;
  font-size: 12px;
  font-weight: 700;

  text-decoration: none;
  cursor: pointer;

  transition: all 0.2s ease;
}

.app__os-btn .ss-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.app__os-btn:hover {
  background: #eef9f2;
  border-color: #12a24a;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(11, 61, 36, 0.10);
}