/* =====================================================================
   RIVET device frames: black iPhone 18 Pro, pure CSS (no images).
   Owner, 28 Oct 2026: phones always show a real RIVET Labs screen, in a
   black frame (thin even bezel, large radius, Dynamic Island, soft shadow).
   Owner, 31 Oct 2026: "full iPhone mockups, not half". Every phone shows the
   whole body, top to bottom: no composition crops it any more. The panels
   grow to fit the phone (card, trio, rising), the screen content is scaled
   to the screen, never cut.

   Usage
     <div class="iphone" style="--iphone-w:250px;--iphone-fit:.6">
       <div class="iphone__screen">
         <img src="..." alt="...">                      (a screenshot), or
         <div class="iphone__fit"> 390px-wide HTML screen </div>
       </div>
     </div>
   --iphone-w   frame width (default min(280px, 72vw))
   --iphone-fit scale for a 390px-wide HTML screen = (--iphone-w x .936) / 390

   Loads AFTER visuals.css: it resets the older .iphone rules there.
   No magenta in the frame (brand law 1).
   ===================================================================== */

.iphone{
  --_w: var(--iphone-w, min(280px, 72vw));
  --_bz: calc(var(--_w) * .032);              /* bezel: 3.2% of width */
  --_r: calc(var(--_w) * .15);                /* outer radius: 15% of width */
  --_btn: max(2px, calc(var(--_w) * .011));   /* side-button depth */
  position:relative; flex:none; box-sizing:border-box;
  width:var(--_w); height:auto; aspect-ratio:auto; margin:0;
  padding:var(--_bz);
  border:0; border-radius:var(--_r);
  background:#0B0B0D;
  box-shadow:
    inset 0 0 0 1px #34343B,                  /* titanium rim */
    inset 0 0 0 2px #0B0B0D,
    inset 0 0 0 3px #1C1C21,                  /* inner bezel line */
    0 1px 2px rgba(0,0,0,.22),
    0 14px 28px -10px rgba(0,0,0,.30),
    0 42px 70px -30px rgba(0,0,0,.45);        /* soft drop shadow, under the whole body */
}
/* side buttons, drawn as one strip per side:
   left = action button, volume up, volume down; right = side (power) button, camera control */
.iphone::before, .iphone::after{
  content:""; position:absolute; z-index:0;
  width:var(--_btn); box-shadow:none; transform:none;
}
.iphone::before{
  left:calc(var(--_btn) * -1); right:auto; top:17%; height:24%;
  border-radius:2px 0 0 2px;
  background:linear-gradient(to bottom, #26262C 0 13%, transparent 13% 25%, #26262C 25% 58%, transparent 58% 67%, #26262C 67% 100%);
}
.iphone::after{
  right:calc(var(--_btn) * -1); left:auto; top:25%; height:37%;
  border-radius:0 2px 2px 0;
  background:linear-gradient(to bottom, #26262C 0 30%, transparent 30% 76%, #1E1E23 76% 100%);
}
.iphone__screen{
  position:relative; z-index:1; display:block; box-sizing:border-box;
  width:100%; height:auto; aspect-ratio:402 / 874;
  overflow:hidden; isolation:isolate;
  border-radius:calc(var(--_r) - var(--_bz));
  background:#fff;
}
/* Dynamic Island: iPhone 18 Pro, about 21% of the width, a black pill near the top */
.iphone__screen::after{
  content:""; position:absolute; z-index:5; left:50%; top:calc(var(--_w) * .026);
  width:calc(var(--_w) * .21); height:calc(var(--_w) * .076);
  transform:translateX(-50%); border-radius:999px; background:#000;
  pointer-events:none;
}
.iphone__screen > img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top center; }
/* an HTML screen drawn at 390px wide, scaled to the screen */
.iphone__fit{
  position:absolute; top:0; left:0; width:390px;
  transform:scale(var(--iphone-fit, .672)); transform-origin:top left;
}
/* the site's HTML screens carry their own outline, shadow and island: the frame provides those now */
.iphone__fit > div:first-child{ border:0 !important; border-radius:0 !important; box-shadow:none !important; }
.iphone__fit > div:first-child > div:first-child[style*="border-radius:999px"]{ display:none; }

/* ---------- 1. Card: the whole phone on a card, caption under ---------- */
.dev-card{
  position:relative; overflow:hidden; box-sizing:border-box;
  display:flex; justify-content:center; align-items:flex-start;
  height:auto; padding:var(--dev-card-pt, 28px) 16px var(--dev-card-pb, 34px);
  border-radius:24px;
  background:var(--dev-surface, var(--elev-2, #12121A));
}
.dev-card > .iphone{ transition:transform .32s cubic-bezier(.16,1,.3,1); }
.dev-cap{ margin:14px 0 0; font-size:.88rem; line-height:1.5; }

/* ---------- 2. Trio: one phone in front, two set back behind it, all three whole, on a soft panel ---------- */
.dev-trio{
  --iphone-w:var(--dev-trio-w, 240px);
  position:relative; overflow:hidden; box-sizing:border-box;
  display:grid; justify-items:center; align-items:start;
  padding:clamp(28px, 4vw, 48px) 16px clamp(32px, 4.4vw, 52px);
  height:auto;
  border-radius:24px;
}
.dev-trio > .iphone{ grid-area:1 / 1; }
.dev-trio > .iphone:nth-child(2){ z-index:2; }
.dev-trio > .iphone:nth-child(1),
.dev-trio > .iphone:nth-child(3){
  z-index:1; transform-origin:50% 0;
  box-shadow:inset 0 0 0 1px #2A2A30, 0 24px 48px -30px rgba(0,0,0,.4);
}
.dev-trio > .iphone:nth-child(1){ transform:translate(-66%, 7%) scale(.86); }
.dev-trio > .iphone:nth-child(3){ transform:translate(66%, 7%) scale(.86); }
/* phones: the set-back pair tucks in so all three stay whole inside the panel */
@media (max-width:599px){
  .dev-trio > .iphone:nth-child(1){ transform:translate(-44%, 7%) scale(.86); }
  .dev-trio > .iphone:nth-child(3){ transform:translate(44%, 7%) scale(.86); }
}

/* ---------- 3. Standing: one whole phone centred in a rounded panel ---------- */
.dev-rise{
  position:relative; overflow:hidden; box-sizing:border-box;
  display:flex; justify-content:center; align-items:flex-start;
  height:auto; padding:var(--dev-rise-pt, 40px) 16px var(--dev-rise-pb, 44px);
  border-radius:24px;
}

/* ---------- Panels: one registered duo per bounded card, never full-bleed ---------- */
/* Haze (ghost -> purple), light pages. The ghost anchor sits top-left, inside the card, and the card
   carries a shadow so its edge never dissolves into a ghost ground. */
.dev-panel--haze{ background:linear-gradient(135deg, #F8F8FA 0%, #3B06D4 100%); box-shadow:0 1px 2px rgba(0,0,0,.06), 0 18px 40px -24px rgba(17,12,46,.35); }
/* Command (black -> cyan), dark pages. The anchor is held at the top, inset from the black page by the rim. */
.dev-panel--command{ background:linear-gradient(135deg, #000000 0%, #4CF3FE 100%); box-shadow:inset 0 0 0 1px #1E1E2A; }
/* flat surface */
.dev-panel--surface{ background:var(--elev-2, #12121A); }
.dev-panel--light{ background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.06), 0 18px 40px -24px rgba(17,12,46,.25); }

@media (prefers-reduced-motion:reduce){ .dev-card > .iphone{ transition:none; } }

/* ---------- Placements ---------- */
/* members.html "Inside the Labs": the app mock as the phone's screen, standing in a Haze panel */
.labsphone{ --iphone-w:min(268px, 70vw); width:100%; }
.iphone__screen > .appmock{
  width:100%; height:100%; margin:0; box-sizing:border-box;
  border:0; border-radius:0; box-shadow:none;
  padding:calc(var(--_w) * .17) 14px 14px;
}
.iphone__screen > .appmock .appmock__bar{ display:none; }
.iphone__screen > .appmock .appmock__head{ gap:9px; flex-wrap:wrap; row-gap:8px; }
.iphone__screen > .appmock .appmock__id{ min-width:0; line-height:1.3; }
.iphone__screen > .appmock .appmock__id small{ display:block; line-height:1.35; }
.iphone__screen > .appmock .appmock__streak{ white-space:nowrap; padding:4px 7px; margin-left:47px; }
/* the whole screen shows now: the tab dots sit at the foot of the screen, like a tab bar */
.iphone__screen > .appmock .appmock__nav{ margin-top:auto; padding:0 0 calc(var(--_w) * .05); }
/* screen art's magenta corner block would sit on the frame's corner: no magenta on the frame (brand rule) */
.iphone__fit [style*="background:#FF00D4"][style*="left:0;top:0"]{ display:none; }
@media (max-width:820px){ .labsphone{ max-width:420px; margin-inline:auto; } }
/* membership.html "Your platform": three whole app screens as a trio on the Haze panel */
.plattrio{ --dev-trio-w:240px; --iphone-fit:.576; margin:0 0 clamp(20px, 3vw, 32px); }
@media (max-width:599px){ .plattrio{ --dev-trio-w:180px; --iphone-fit:.432; } }