/* Shared Radiant app phone (shared/radiant-app.html + radiant-app.js).
 * The bezel is drawn here; the app inside (assets/radiant-app/) is screen-only and scales to fit.
 * Themes tune it with variables on .ra or any ancestor:
 *   --ra-w        phone width on wide screens (default clamp(280px, 24vw, 330px); 340px max on phones)
 *   --ra-bezel    bezel colour            --ra-pad     bezel thickness
 *   --ra-radius   outer corner radius     --ra-shadow  drop shadow
 *   --ra-accent   focus ring colour       --ra-cap     caption colour
 * The screen keeps the app's design ratio (356 x 776), so the app is never cropped. */
.ra {
  --ra-w: 376px; /* 356px screen + 2x10px bezel: the app runs at exactly 1:1, so text is crisp */
  --ra-bezel: #0b0b10;
  --ra-pad: 10px;
  --ra-radius: 46px;
  --ra-shadow: 0 40px 70px -28px rgba(0, 0, 0, .55);
  --ra-accent: #0EA5E9;
  margin: 0;
  width: min(100%, var(--ra-w));
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.ra-phone {
  box-sizing: border-box; width: 100%;
  padding: var(--ra-pad); border-radius: var(--ra-radius);
  background: var(--ra-bezel);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .12) inset, var(--ra-shadow);
}
.ra-screen {
  position: relative; width: 100%; aspect-ratio: 356 / 776;
  border-radius: calc(var(--ra-radius) - var(--ra-pad)); overflow: hidden;
  background: #F1F5FB; isolation: isolate;
}
.ra-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; margin: 0; border-radius: 0; }
.ra-start {
  position: absolute; inset: 0; z-index: 2; display: block; cursor: pointer; text-decoration: none;
  background: linear-gradient(180deg, rgba(15, 23, 42, .28) 0%, rgba(15, 23, 42, .1) 35%, rgba(15, 23, 42, .5) 100%);
  -webkit-tap-highlight-color: transparent;
}
.ra-pill {
  position: absolute; left: 50%; bottom: 10.5%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  min-height: 44px; padding: 0 20px 0 16px; border-radius: 999px;
  background: #0F172A; color: #fff;
  font: 600 15px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: 0;
  box-shadow: 0 10px 26px rgba(15, 23, 42, .35);
  transition: transform .2s ease, background-color .2s ease;
}
.ra-pill svg { width: 16px; height: 16px; fill: currentColor; stroke: none; flex: none; }
.ra-start:hover .ra-pill { background: #1E293B; transform: translateX(-50%) translateY(-2px); }
.ra-start:focus { outline: none; }
.ra-start:focus-visible .ra-pill { outline: 3px solid var(--ra-accent); outline-offset: 3px; }
.ra-busy .ra-start { cursor: progress; }
.ra-frame {
  position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; border: 0; display: block;
  color-scheme: light; background: transparent; opacity: 0; transition: opacity .3s ease;
}
.ra-live .ra-frame { opacity: 1; z-index: 3; }
.ra-live .ra-start { display: none; }
.ra-cap { margin: 0; max-width: 30ch; text-align: center; font-size: .82rem; line-height: 1.4; color: var(--ra-cap, inherit); }
@media (max-width: 600px) {
  .ra { --ra-w: 372px; --ra-pad: 8px; --ra-radius: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ra-pill, .ra-frame { transition: none; }
  .ra-start:hover .ra-pill { transform: translateX(-50%); }
}

/* make the start overlay unmistakable: a badge at the top, a bigger pill with a pulsing ring */
.ra-badge {
  position: absolute; left: 50%; top: 7%; transform: translateX(-50%);
  padding: 7px 14px; border-radius: 999px; white-space: nowrap;
  background: rgba(255, 255, 255, .96); color: #0F172A;
  font: 700 11px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .25);
}
.ra-pill { min-height: 52px; padding: 0 24px 0 20px; font-size: 17px; background: #0EA5E9; }
.ra-start:hover .ra-pill { background: #0284C7; }
.ra-pill::after {
  content: ""; position: absolute; inset: -6px; border-radius: 999px; border: 2px solid rgba(14, 165, 233, .75);
  animation: ra-ring 1.8s ease-out infinite; pointer-events: none;
}
@keyframes ra-ring { from { transform: scale(.94); opacity: .9; } to { transform: scale(1.18); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ra-pill::after { animation: none; opacity: .6; } }