/* Guest-facing recording page — also used for the live preview in the portal.
   Sizes are in em, so the whole page scales from one font-size on .g-page. */
.g-page{
  --g-primary:#3f4b3b; --g-accent:#b5532f; --g-bg:#f7f2ea; --g-on-accent:#fff; --g-on-primary:#fff;
  --g-head:'Patua One'; --g-body:'Open Sans';
  font-size:18px;
  background:var(--g-bg); color:var(--g-primary);
  font-family:var(--g-body),system-ui,sans-serif; line-height:1.5;
  min-height:100%; display:flex; flex-direction:column; align-items:center; text-align:center;
  -webkit-text-size-adjust:100%;
}
.g-page *{box-sizing:border-box}
.g-page [hidden]{display:none !important}

.g-inner{flex:1;width:100%;max-width:26em;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.6em 1.3em 1.2em}
.g-kicker{font-size:.78em;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--g-accent);margin:0 0 .6em}
.g-title{font-family:var(--g-head),Georgia,serif;font-weight:600;font-size:2.4em;line-height:1.08;color:var(--g-primary);margin:0 0 .25em;overflow-wrap:anywhere}
.g-sub{font-size:1em;opacity:.8;margin:0 0 1.6em;min-height:1.5em}

/* Every step stacks and centres */
.g-step{display:flex;flex-direction:column;align-items:center;width:100%}

/* Selfie */
.g-photo{width:11em;height:11em;margin:0 auto 1.4em;position:relative;overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4em;
  background:color-mix(in srgb,var(--g-primary) 9%,#fff);color:var(--g-primary);
  border:5px solid #fff;box-shadow:0 10px 26px rgba(0,0,0,.13);transition:border-radius .3s,width .3s,height .3s,transform .3s}
.g-photo svg{width:2.2em;height:2.2em}
.g-photo small{font-size:.85em;font-weight:700}
.g-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.g-retake{display:none;position:absolute;bottom:.6em;left:50%;transform:translateX(-50%);z-index:1;background:rgba(0,0,0,.6);color:#fff;font-size:.78em;font-weight:700;padding:.25em .9em;border-radius:99px}
.g-photo.has-photo .g-retake{display:block}
.shape-circle .g-photo{border-radius:50%}
.shape-arch .g-photo{width:10em;height:13em;border-radius:999px 999px 14px 14px}
.shape-rounded .g-photo{border-radius:1.6em}
.shape-polaroid .g-photo{border-radius:4px;border-width:12px 12px 44px;transform:rotate(-2.5deg)}

/* Prompt + record button */
.g-beep{font-size:1.15em;line-height:1.45;max-width:20em;margin:0 auto 1.3em;overflow-wrap:anywhere}
.g-rec{font-size:inherit;width:5.4em;height:5.4em;margin:0 auto;border-radius:50%;cursor:pointer;display:grid;place-items:center;padding:0;
  background:var(--g-accent);color:var(--g-on-accent);
  border:7px solid color-mix(in srgb,var(--g-accent) 28%,#fff);
  box-shadow:0 8px 22px color-mix(in srgb,var(--g-accent) 40%,transparent);
  transition:box-shadow .1s,transform .15s;-webkit-tap-highlight-color:transparent}
.g-rec span{width:1.6em;height:1.6em;border-radius:50%;background:currentColor;transition:border-radius .2s}
.g-rec:active{transform:scale(.95)}
.g-rec:disabled{opacity:.7}
.g-rec.is-recording{box-shadow:0 0 0 calc(5px + var(--lvl,0) * 26px) color-mix(in srgb,var(--g-accent) 30%,transparent)}
.g-rec.is-recording span{border-radius:6px;width:1.4em;height:1.4em}
.g-timer{font-variant-numeric:tabular-nums;font-weight:700;font-size:1.2em;margin:.8em 0 0}
.g-hint{font-size:.9em;opacity:.75;margin:.8em 0 0}
.g-note{max-width:20em;font-size:1.05em;line-height:1.55;margin:0 auto}

/* Details form: one field under another, large and easy to tap */
.g-form{width:100%;text-align:left;gap:0}
.g-form h2{font-family:var(--g-head),Georgia,serif;font-weight:600;font-size:1.7em;text-align:center;margin:0 0 .8em;color:var(--g-primary)}
.g-review{width:100%;background:#fff;border-radius:1em;padding:.7em;box-shadow:0 4px 14px rgba(0,0,0,.06)}
.g-review audio{display:block;width:100%;height:3em}
.g-link{display:block;background:none;border:0;padding:.6em;margin:.3em auto 1em;cursor:pointer;font:inherit;font-weight:700;font-size:.95em;color:var(--g-primary);text-decoration:underline;text-underline-offset:3px}
.g-field{display:block;width:100%;margin:0 0 1.1em}
.g-field > span{display:block;font-weight:700;font-size:1em;margin:0 0 .4em}
.g-field > span small{font-weight:400;font-size:.85em;opacity:.7}
.g-field input,.g-field textarea{display:block;width:100%;padding:.85em 1em;font:inherit;font-size:max(16px,1em);line-height:1.4;color:#1d2321;background:#fff;
  border:2px solid color-mix(in srgb,var(--g-primary) 22%,transparent);border-radius:.8em;-webkit-appearance:none;appearance:none}
.g-field textarea{min-height:6.5em;resize:vertical}
.g-field input:focus,.g-field textarea:focus{outline:none;border-color:var(--g-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--g-accent) 20%,transparent)}
.g-btn{display:block;width:100%;margin-top:.4em;padding:1em;border:0;border-radius:999px;cursor:pointer;
  font:inherit;font-weight:700;font-size:1.1em;background:var(--g-primary);color:var(--g-on-primary);
  box-shadow:0 8px 20px color-mix(in srgb,var(--g-primary) 30%,transparent);-webkit-appearance:none;appearance:none}
.g-btn:active{transform:scale(.98)}

/* Sending / done */
.g-big{font-family:var(--g-head),Georgia,serif;font-weight:600;font-size:1.8em;color:var(--g-primary);margin:0 0 .4em}
.g-progress{width:13em;height:.55em;border-radius:99px;overflow:hidden;margin:.9em auto;background:color-mix(in srgb,var(--g-primary) 15%,transparent)}
.g-progress i{display:block;height:100%;width:0;background:var(--g-accent);transition:width .2s}
.g-tick{width:4em;height:4em;border-radius:50%;display:grid;place-items:center;font-size:1.8em;margin:0 auto .5em;background:var(--g-accent);color:var(--g-on-accent)}
.g-status{max-width:20em;margin:1em auto 0;font-size:.95em;font-weight:700}
.g-status:empty{display:none}
.g-foot{margin:0;padding:1em;font-size:.7em;letter-spacing:.14em;text-transform:uppercase;opacity:.55}

/* Standalone guest page */
body.guest{margin:0;min-height:100vh;min-height:100dvh;display:flex}
body.guest .g-page{flex:1;min-height:100vh;min-height:100dvh}
.g-preview-bar{position:fixed;top:0;left:0;right:0;z-index:5;background:#1d2321;color:#fff;font:600 .8rem/1.3 'Open Sans',sans-serif;padding:9px 12px;text-align:center}
.g-preview-bar a{color:#f0b49d}
@media (max-width:360px){.g-page{font-size:16px}}

/* Smaller scale inside the portal's phone preview */
.phone-screen .g-page{font-size:14px}