/* RACE CREATOR 2.0: shared iOS Safari / Android Chrome / installed PWA shell. */
:root { --rc-safe-top:env(safe-area-inset-top,0px); --rc-safe-bottom:env(safe-area-inset-bottom,0px); --rc-safe-left:env(safe-area-inset-left,0px); --rc-safe-right:env(safe-area-inset-right,0px); }
html { min-width:0; -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:calc(76px + var(--rc-safe-top)); }
body { min-width:0; min-height:100svh; min-height:100dvh; -webkit-font-smoothing:antialiased; }
.shell,.app,#app,.pad,.card,.racecard,.rank-card,.rankings-content,.admin-content,.home-layout,.race-grid { min-width:0; }
img,svg,video,canvas { max-width:100%; }
pre,code { overflow-wrap:anywhere; }
/* Do not rely only on :has, which older embedded iOS browsers may lack. */
@media (max-width:849px) {
  .app { min-height:100svh;min-height:100dvh; padding-bottom:calc(90px + var(--rc-safe-bottom)); }
  .topbar { min-height:calc(62px + var(--rc-safe-top)); height:auto; padding-top:var(--rc-safe-top); padding-left:max(13px,var(--rc-safe-left)); padding-right:max(13px,var(--rc-safe-right)); }
  .bottom { bottom:0; padding-left:max(5px,var(--rc-safe-left));padding-right:max(5px,var(--rc-safe-right)); padding-bottom:calc(9px + var(--rc-safe-bottom)); height:calc(73px + var(--rc-safe-bottom)); }
  .bottom .nav { min-height:45px; padding:7px 2px; gap:3px; }
  .bottom .nav .glyph { font-size:22px;line-height:23px; }
  .toast { bottom:calc(85px + var(--rc-safe-bottom)); max-width:calc(100vw - 30px); }
  input:not([type=checkbox]):not([type=radio]),textarea,select { font-size:16px!important; max-width:100%; }
  input[type=file] { font-size:16px!important; }
  button,.btn,.tinybtn,.control-shortcut,.filter-chip,.chip,.tabrow button,.tabs button,.flatbtn,.drawerlink,.admin-pager button { min-height:44px; }
  .btnrow,.review-actions,.grid2,.stats,.badgegrid { min-width:0; }
  .btnrow > *, .review-actions > * { min-width:0; }
  .racehero h1,.detail-hero h1,.hero-mini h1,.racecard .name,.sectionhead h2 { overflow-wrap:anywhere; }
  .install-card { margin:16px 0 0; }
  .install-card .btn { width:100%;margin-top:10px; }
  .install-help { margin-top:12px; }
  .is-standalone .install-card { display:none!important; }
  body.is-editing .bottom,body.keyboard-open .bottom { display:none!important; }
  body.is-editing .app,body.keyboard-open .app { padding-bottom:calc(22px + var(--rc-safe-bottom)); }
  body.is-editing .toast,body.keyboard-open .toast { bottom:calc(12px + var(--rc-safe-bottom)); }
}
@media (min-width:850px) { .install-card { display:none; } }
/* Interactive regions shouldn't hijack vertical scrolling. Horizontal swipe may pan the map. */
.mapWrap { touch-action:pan-y pinch-zoom; }
.mapWrap .mapButtons button { min-width:44px;min-height:44px;touch-action:manipulation; }
/* All standalone pages account for the dynamic island, notch and gesture home area. */
@media(max-width:900px) {
  .workspace .head,.phone .top { padding-top:calc(12px + var(--rc-safe-top)); padding-left:max(16px,var(--rc-safe-left)); padding-right:max(16px,var(--rc-safe-right)); min-height:calc(62px + var(--rc-safe-top)); }
  .workspace .content,.phone .section,.phone .hero { padding-left:max(17px,var(--rc-safe-left));padding-right:max(17px,var(--rc-safe-right)); }
  .phone { padding-bottom:calc(84px + var(--rc-safe-bottom));min-height:100svh;min-height:100dvh; }
  .phone .nav { padding-left:max(8px,var(--rc-safe-left));padding-right:max(8px,var(--rc-safe-right));padding-bottom:calc(9px + var(--rc-safe-bottom));height:calc(73px + var(--rc-safe-bottom)); }
  .phone .nav button { min-height:44px; }
  .phone .mapWrap { touch-action:pan-y pinch-zoom; }
  .phone .mapButtons button { min-height:44px; min-width:44px; }
  .phone .field input,.phone .field select,.phone .field textarea, .phone .content>select { font-size:16px; }
  .shell > header { padding-top:calc(12px + var(--rc-safe-top)); }
  body:has(.shell > header) .shell { padding-bottom:calc(18px + var(--rc-safe-bottom)); }
  #view,.phone .main { min-width:0; }
}
/* Landscape phone has little usable height; give the content room without hiding navigation. */
@media(max-width:849px) and (orientation:landscape) and (max-height:520px) {
  .app { padding-bottom:calc(57px + var(--rc-safe-bottom)); }
  .topbar { min-height:calc(46px + var(--rc-safe-top)); }
  .bottom { height:calc(53px + var(--rc-safe-bottom));padding-top:2px;padding-bottom:calc(2px + var(--rc-safe-bottom)); }
  .bottom .nav { flex-direction:row;gap:5px;font-size:10px;min-height:44px; }
  .bottom .nav .glyph { font-size:18px; }
  .hero-mini h1 { margin-top:12px; }
  .hero-mini,.detail-hero { min-height:0; }
}
@media(max-width:420px) { .headtitle{max-width:90px;} .topbar .brand{letter-spacing:-.75px;} }
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}