/*
 * The app's pages as built (26 September, after the top bar change), for the type tuner and the
 * top bar mockup. Measured from the code (Type.kt, Color.kt, the screens) and checked against
 * emulator screenshots. 1 CSS px = 1 dp; the phone is a Pixel 3a, 393 × 807 dp.
 *
 * Layout is inline in app-pages.js, taken number for number from the Compose code; this file only
 * holds the frame and the colour tokens.
 */
.phone { --ground: #E8EBEE; --surface: #FFFFFF; --raised: #F1F3F5; --tp: #0F1215; --ts: #56606B; --tt: #88919B;
  --acc: #0F1215; --onacc: #FFFFFF; --sig: #FFC21A; --today: #FFC21A; --div: #DDE1E5; --divs: #C3C9CF; --pos: #178A4D; --neg: #D93843; --race: #E0A800;
  --run: #E39B00; --ride: #12A876; --swim: #2F7FF0; --other: #7C5CFA; --neutral: #9AA3AD; --pace: #0A92C2; --hr: #E0364A; --fat: #2F7FF0;
  --elev: #A36B2E; --split: #FFC21A; --route: #FFC21A; --casing: rgba(15,18,21,.78);
  --z1: #A3ACB5; --z2: #2F7FF0; --z3: #1AA96E; --z4: #F2A516; --z5: #E0364A; --strength: #C93E8E;
  --map-land: #EFEBE3; --map-road: #FFFFFF; --map-road2: #F8F5EF; --map-park: #CDE6C0; --map-wood: #B9DBA8; --map-water: #AAD3DF; --map-a: #F7C9A8;
  --mtn: #C0C8D0; --snow: #FFFFFF; --wm-s: #E0A800;
  width: 393px; height: 807px; border-radius: 28px; overflow: hidden; position: relative; background: var(--ground);
  display: flex; flex-direction: column; box-shadow: 0 0 0 8px #0c0d0f, 0 18px 40px rgba(0,0,0,.45); color: var(--tp); flex: none;
  font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.4; }
.phone.dark { --ground: #0B0D10; --surface: #14171B; --raised: #1D2126; --tp: #ECEFF2; --ts: #9AA3AD; --tt: #616A74;
  --acc: #FFD23F; --onacc: #0B0D10; --sig: #FFD23F; --today: #0B0D10; --div: #22272D; --divs: #353B43; --pos: #3DDB8A; --neg: #FF5A64; --race: #FFD23F;
  --run: #FFD23F; --ride: #2BD49A; --swim: #3A8DFF; --other: #9B7BFF; --neutral: #6B747E; --pace: #38C6F4; --hr: #FF5A6A; --fat: #3A8DFF;
  --elev: #D39A5C; --split: #FFD23F; --route: #FFD23F; --casing: rgba(11,13,16,.78);
  --z1: #56606A; --z2: #3A8DFF; --z3: #26C281; --z4: #FFB020; --z5: #FF4D5E; --strength: #E86BB4;
  --map-land: #1E2124; --map-road: #3A3F45; --map-road2: #2C3035; --map-park: #243328; --map-wood: #203024; --map-water: #1B2A33; --map-a: #4A3A2E;
  --mtn: #3E4955; --snow: #7D8996; --wm-s: #FFD23F; }
.phone * { box-sizing: border-box; }
.phone .sb { height: 24px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 18px 0 22px;
  font: 500 13px 'Inter', sans-serif; color: var(--tp); background: var(--ground); }
.phone .sb-icons { display: flex; align-items: center; gap: 5px; color: var(--tp); }
.phone .sb-icons svg { display: block; }
.phone .scroll { flex: 1; overflow-y: auto; overflow-x: hidden; position: relative; scrollbar-width: none; }
.phone .scroll::-webkit-scrollbar { display: none; }
.phone .navwrap { flex: none; background: var(--surface); border-top: 1px solid var(--div); padding-bottom: 22px; }
.phone .nav { height: 58px; display: flex; }
.phone .nav > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--tt); position: relative; padding: 6px 0; }
.phone .nav > div.on { color: var(--tp); }
.phone .nav > div.on::before { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 3px; background: var(--sig); }
.phone .mi { font-family: 'Material Icons Round'; font-weight: normal; font-style: normal; line-height: 1; letter-spacing: normal; text-transform: none;
  display: inline-block; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; }
.phone .mi.o { font-family: 'Material Icons Outlined'; } .phone .mi.f { font-family: 'Material Icons'; }
.phone .hair { height: 1px; background: var(--div); flex: none; }
.phone .row { display: flex; align-items: center; }
.phone .grow { flex: 1; min-width: 0; }
.phone .ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The wordmark (W4): the S, the letters knocked out of one summit. */
.phone .wm { position: relative; display: inline-flex; align-items: flex-end; color: var(--tp); isolation: isolate; line-height: 1; white-space: nowrap; }
.phone .wm .s { width: .74em; height: 1.16em; margin-right: .06em; position: relative; top: .06em; flex: none; }
.phone .wm .s svg { width: 100%; height: 100%; display: block; overflow: visible; }
.phone .wm .txt { position: relative; -webkit-text-stroke: .14em var(--surface); paint-order: stroke fill; }
.phone .wm .mtn { position: absolute; z-index: -1; left: -.5em; right: -.45em; top: -1.05em; bottom: -.22em; pointer-events: none; }
.phone .wm .mtn svg { width: 100%; height: 100%; display: block; }

/* The goal race strip under the bar on Plan (G2). */
.phone .race-strip { position: absolute; left: 0; right: 0; top: 81px; z-index: 6; background: var(--surface);
  transform: translateY(-13px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.phone .race-strip.show { opacity: 1; transform: none; }

/* Tuner. */
.phone.tuning [data-r] { cursor: pointer; }
.phone [data-r].hl { outline: 1.5px dashed #FF4FA3; outline-offset: 1px; }
.phone [data-r].sel { outline: 2px solid #FF4FA3; outline-offset: 1px; }
.phone.dark .sig-strip { display: none; }
/* Text only ever sits in a styled span, so the frame has no line box of its own: without this the
   browser's default 21px line would add height the app does not have. */
.phone .scroll, .phone .navwrap, .phone .race-strip, .phone > div[style*="flex:none;background:var(--surface)"] { font-size: 0; line-height: 0; }