/* Our page shell around the design's 390 x 844 screen (.scr). Design values are untouched; this only
   decides how the screen sits on a PC and on a phone. */
html { background: #EEE6CC; -webkit-tap-highlight-color: transparent; } /* no square flash when a round button is tapped (Android) */
body { margin: 0; }
button { font-family: inherit; cursor: pointer; }
input, textarea { font-family: inherit; }
.scr { margin: 0 auto; }

/* PC: the phone screen centred and fitted to the window height (fit.js sets --fit), like a phone preview. */
@media (hover: hover) and (pointer: fine) and (min-width: 700px) {
  .scr { zoom: var(--fit, 1); }
}

/* Phone: the screen fills the phone. Same sizes and look; the screen grows with its content instead of
   being cut at 844 px, tall boxes take a share of the screen, and the main button stays reachable. */
@media (pointer: coarse), (max-width: 699px) {
  /* 85% on phones (user + client, 7 Nov 2026, D33): the whole page is shrunk with CSS zoom, so every phone
     looks like the 85% pictures (docs/reports/2026-11-07-phone-size-compare.html). Heights that must fill the
     screen are divided by 0.85 so they still reach the bottom. */
  html { background: transparent; zoom: 0.85; }
  .scr { width: 100% !important; height: auto !important; min-height: calc(100vh / 0.85); min-height: calc(100dvh / 0.85); overflow-x: clip !important; overflow-y: visible !important; }
  .scr .cta { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 20; }
  .m-carousel { height: min(385px, 50svh) !important; }
  .m-hero { height: clamp(150px, 30svh, 320px) !important; }
  .m-hero img { height: 100% !important; }
  .m-box { min-height: max(240px, 34svh); }
  .m-view { height: clamp(240px, 46svh, 430px) !important; }
}

/* No browser autofill colour (user, 7 Nov): Chrome paints filled-in / pasted fields light blue. Keep the design's
   own field colour (the background change is delayed for ever) and its dark purple text. Register + OTP boxes. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active,
textarea:-webkit-autofill {
  -webkit-text-fill-color: #2B0F45 !important;
  caret-color: #2B0F45;
  transition: background-color 600000s 0s, color 600000s 0s;
}
/* Safety net: paint the field's own colour over the autofill colour (OTP boxes are white; the Register fields
   are the design's cream rgba(255,255,255,.55) on #FFF6D6 = about #FFFAEA). */
[data-page="otp"] input:-webkit-autofill { box-shadow: 0 0 0 1000px #FFFFFF inset !important; }
[data-page="register"] input:-webkit-autofill { box-shadow: 0 0 0 1000px #FFFAEA inset !important; }

/* Story voice note (user, 7 Nov; mock docs/reports/2026-11-07-my-moments-mock.html, issues 4-6).
   Our own player (Android recordings carry no length, so the browser's bar jumped): play/pause, a bar that
   fills left to right, played / total. Colours from the design. */
.vplayer { display: flex; align-items: center; gap: 10px; background: #FFFFFF; border: 2px solid #EBD98F; border-radius: 28px; padding: 7px 12px 7px 8px; box-sizing: border-box; }
.vplayer[hidden] { display: none; }
.vplay { width: 36px; height: 36px; flex: none; border: 0; border-radius: 50%; background: #4B1E7A; position: relative; padding: 0; }
.vplay::before { content: ""; position: absolute; left: 14px; top: 11px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #FFD21F; }
.vplay.on::before { left: 12px; top: 11px; width: 4px; height: 14px; border: 0; background: #FFD21F; box-shadow: 8px 0 0 #FFD21F; }
.vtrack { flex: 1; height: 6px; border-radius: 3px; background: #EBD98F; position: relative; cursor: pointer; }
.vtrack b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 3px; background: #C4123F; }
.vtrack b::after { content: ""; position: absolute; right: -7px; top: -4px; width: 14px; height: 14px; border-radius: 50%; background: #C4123F; }
.vtime { font-size: 12px; color: #6B5580; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* While recording: the client's mic becomes a stop square with a stronger pulsing ring. */
[data-mic].rec { font-size: 0 !important; animation: recpulse 1.2s infinite !important; }
[data-mic].rec::before { content: ""; width: 20px; height: 20px; border-radius: 4px; background: #FFFFFF; display: block; }
@keyframes recpulse { 0% { box-shadow: 0 0 0 0 rgba(196,18,63,.6); } 100% { box-shadow: 0 0 0 20px rgba(196,18,63,0); } }
[data-voice-hint].rec { color: #C4123F !important; font-weight: 700; }
/* Camera / mic permission panels (parts.html allow_panels): hidden wins over the inline display:flex. */
[data-allow][hidden], [data-allow] [hidden] { display: none !important; }

/* Home carousel with 3 cards (client feedback 1, 8 Nov: no 4th picture). Same feel as the design's 4-card slide. */
@keyframes slide3 { 0%,28% { transform: translateX(0); } 33%,61% { transform: translateX(-33.3333%); } 66%,94% { transform: translateX(-66.6667%); } 100% { transform: translateX(0); } }
@keyframes dot3_1 { 0%,28% { width: 22px; background: #C4123F; } 33%,94% { width: 8px; background: #D9C58A; } 100% { width: 22px; background: #C4123F; } }
@keyframes dot3_2 { 0%,28% { width: 8px; background: #D9C58A; } 33%,61% { width: 22px; background: #C4123F; } 66%,100% { width: 8px; background: #D9C58A; } }
@keyframes dot3_3 { 0%,61% { width: 8px; background: #D9C58A; } 66%,94% { width: 22px; background: #C4123F; } 100% { width: 8px; background: #D9C58A; } }