/* Hero phone: tab bar buttons, the Restaurant / Units / Currency mockups, and the autoplay touch indicator.
   Loaded after styles.css and css/looks.css. Screens are sized in app points: the screen is 17.9em wide = 440pt. */

/* ---------- Tab bar (hero and looks phones share the markup) ---------- */
.phone .tabbar button {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .32em;
  height: 4.9em; padding: 0; border: 0; border-radius: 2.45em; background: transparent; color: inherit; font: inherit; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .2s ease;
}
.phone .tabbar button i { font-style: normal; }
.phone .tabbar button svg { width: 2.4em; height: 2.4em; overflow: visible; }
.phone .tabbar button:focus-visible { outline: 2px solid var(--sky); outline-offset: -2px; }
.tab-pill { display: none; }

#hero .phone-screen { --pt: calc(var(--phone-font, 16px) * .040682); }
#hero .status, #hero .tabbar { position: relative; z-index: 4; }
#hero .tabbar { -webkit-backdrop-filter: blur(12px) saturate(1.8); backdrop-filter: blur(12px) saturate(1.8); }
#hero .tabbar .on { background: transparent; }
#hero .tabbar button:not(.on):hover { color: #000; }
#hero .tab-pill {
  display: block; position: absolute; left: .3em; top: 50%; width: calc((100% - .6em) / 4); height: 4.9em; margin-top: -2.45em;
  border-radius: 2.45em; background: color-mix(in srgb, var(--tab-accent) 13%, transparent);
  transform: translateX(calc(var(--tab, 0) * 100%)); transition: transform .34s cubic-bezier(.3, .9, .3, 1);
}

/* ---------- Screens: absolutely placed over the calculator, so switching never resizes the phone ---------- */
.ps-screen {
  position: absolute; inset: 0; z-index: 1; background: #fff; color: #000; font-family: var(--font-ui);
  opacity: 0; visibility: hidden; outline: none; transition: opacity .2s ease, visibility 0s linear .2s;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
.ps-screen.is-under { opacity: 1; visibility: visible; transition: none; }
.ps-screen.is-on { z-index: 2; opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }
.ps-body { position: absolute; inset: 0; pointer-events: none; -webkit-user-select: none; user-select: none; }
/* Each view starts a little under the clock, not exactly where the status bar ends, so the shadows of the round
   buttons at the top have room instead of being clipped flat. Content still begins at 2.61em. */
.ps-view { position: absolute; inset: 2.15em 0 0; padding-top: .46em; overflow: hidden; display: flex; flex-direction: column; }
.ps-screen svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ps-large { font: 700 calc(33 * var(--pt))/1.2 var(--font-ui); letter-spacing: calc(.2 * var(--pt)); color: #000; white-space: nowrap; }
.ps-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ps-txt b, .ps-txt small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Restaurant */
.ps-scroll { padding: 0 calc(20 * var(--pt)) calc(140 * var(--pt)); will-change: transform; }
.ps-topbtns { display: flex; justify-content: space-between; height: calc(44 * var(--pt)); }
.ps-glass {
  display: grid; place-items: center; width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); border-radius: calc(22 * var(--pt));
  background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 calc(3 * var(--pt)) calc(10 * var(--pt)) rgba(0, 0, 0, .08);
}
.ps-glass-flag { width: calc(64 * var(--pt)); }
.ps-flagsvg { width: calc(26 * var(--pt)); height: calc(14 * var(--pt)); border-radius: calc(2 * var(--pt)); stroke: none !important; }
.ps-gear { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); color: #F08A00; }
.ps-rest .ps-large { margin-top: calc(12 * var(--pt)); }
.ps-sec { padding: calc(20 * var(--pt)) calc(20 * var(--pt)) calc(9 * var(--pt)); font: 600 calc(16.5 * var(--pt))/1.2 var(--font-ui); color: rgba(60, 60, 67, .6); }
.ps-card { background: #F2F2F7; border-radius: calc(26 * var(--pt)); }
.ps-row { position: relative; display: flex; align-items: center; gap: calc(14 * var(--pt)); height: calc(72 * var(--pt)); padding: 0 calc(12 * var(--pt)) 0 calc(20 * var(--pt)); }
.ps-row + .ps-row::before { content: ""; position: absolute; top: 0; left: calc(64 * var(--pt)); right: calc(20 * var(--pt)); height: max(1px, calc(.6 * var(--pt))); background: rgba(60, 60, 67, .16); }
.ps-tile { display: grid; place-items: center; flex: none; width: calc(30 * var(--pt)); height: calc(30 * var(--pt)); border-radius: calc(7 * var(--pt)); }
.ps-tile svg { width: calc(19 * var(--pt)); height: calc(19 * var(--pt)); color: #fff; stroke-width: 2.1; }
.ps-row b { font: 400 calc(17 * var(--pt))/1.3 var(--font-ui); color: #000; }
.ps-row small { font: 400 calc(13.5 * var(--pt))/1.35 var(--font-ui); color: rgba(60, 60, 67, .6); }
.ps-chev { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); color: rgba(60, 60, 67, .3); stroke-width: 2.6 !important; }

/* Units and Currency: list above, keypad on its tray below */
.ps-head { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--pt)); flex: none; height: calc(48 * var(--pt)); padding: 0 calc(18 * var(--pt)) 0 calc(21 * var(--pt)); }
.ps-caps { display: flex; gap: calc(8 * var(--pt)); }
.ps-cap {
  display: inline-flex; align-items: center; gap: calc(6 * var(--pt)); height: calc(31 * var(--pt)); padding: 0 calc(12 * var(--pt));
  border-radius: calc(16 * var(--pt)); background: #EBEBF0; font: 600 calc(14.5 * var(--pt))/1 var(--font-ui); color: #000; white-space: nowrap;
}
.ps-cap svg { width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); color: #F08A00; }
.ps-pair svg { width: calc(13 * var(--pt)); height: calc(13 * var(--pt)); color: rgba(60, 60, 67, .6); stroke-width: 3; }
.ps-chips { display: flex; gap: calc(8 * var(--pt)); flex: none; margin-top: calc(5 * var(--pt)); padding-left: calc(16 * var(--pt)); overflow: hidden; }
.ps-chips span {
  flex: none; display: inline-flex; align-items: center; height: calc(31 * var(--pt)); padding: 0 calc(14 * var(--pt));
  border-radius: calc(16 * var(--pt)); background: #EFEFF4; font: 600 calc(15 * var(--pt))/1 var(--font-ui); color: rgba(60, 60, 67, .62);
}
.ps-chips .on { background: #1C1C1E; color: #fff; }
.ps-note { flex: none; margin-top: calc(13 * var(--pt)); padding: 0 calc(20 * var(--pt)); font: 400 calc(13.4 * var(--pt))/1.3 var(--font-ui); color: rgba(60, 60, 67, .6); white-space: nowrap; }
.ps-list { flex: none; margin: calc(12 * var(--pt)) calc(16 * var(--pt)) 0; }
.ps-u { position: relative; display: flex; align-items: center; gap: calc(12 * var(--pt)); height: calc(62 * var(--pt)); padding: 0 calc(12 * var(--pt)); border-radius: calc(14 * var(--pt)); }
.ps-u:not(.on) + .ps-u:not(.on)::before { content: ""; position: absolute; top: 0; left: calc(12 * var(--pt)); right: calc(12 * var(--pt)); height: max(1px, calc(.6 * var(--pt))); background: rgba(60, 60, 67, .16); }
.ps-u.on { background: #F2F2F7; }
.ps-u b { font: 600 calc(17 * var(--pt))/1.25 var(--font-ui); color: #000; }
.ps-u small { font: 400 calc(13.3 * var(--pt))/1.3 var(--font-ui); color: rgba(60, 60, 67, .6); }
.ps-u.on b { color: #E67700; }
.ps-u em { font: 400 calc(23 * var(--pt))/1 var(--font-ui); color: #1C1C1E; white-space: nowrap; letter-spacing: calc(-.2 * var(--pt)); }
.ps-u.on em { font-size: calc(31 * var(--pt)); }
.ps-flag { flex: none; width: calc(30 * var(--pt)); font-size: calc(25 * var(--pt)); line-height: 1; text-align: center; }
.ps-curr .ps-u em { font-size: calc(22 * var(--pt)); }
.ps-curr .ps-u.on em { font-size: calc(30 * var(--pt)); }
.ps-u[hidden], .ps-more[hidden] { display: none; }
.ps-more { display: flex; justify-content: space-between; align-items: center; flex: none; height: calc(36 * var(--pt)); margin-top: calc(18 * var(--pt)); padding: 0 calc(26 * var(--pt)) 0 calc(28 * var(--pt)); font: 600 calc(13.5 * var(--pt))/1 var(--font-ui); color: rgba(60, 60, 67, .6); }
.ps-more span { display: inline-flex; align-items: center; gap: calc(4 * var(--pt)); }
.ps-more svg { width: calc(18 * var(--pt)); height: calc(18 * var(--pt)); color: rgba(60, 60, 67, .75); stroke-width: 2.6; }
.ps-favs { display: flex; justify-content: space-between; align-items: center; flex: none; height: calc(30 * var(--pt)); margin-top: calc(10 * var(--pt)); padding: 0 calc(28 * var(--pt)); font: 600 calc(13.5 * var(--pt))/1 var(--font-ui); color: rgba(60, 60, 67, .6); }
.ps-edit { color: #E67700; }
.ps-hint { flex: none; margin-top: auto; padding: calc(8 * var(--pt)) 0 calc(7 * var(--pt)); text-align: center; font: 400 calc(11.5 * var(--pt))/1.3 var(--font-ui); color: rgba(60, 60, 67, .45); }
.ps-curr .ps-list { margin-top: calc(6 * var(--pt)); }
.ps-curr .ps-u { height: calc(68 * var(--pt)); }
.ps-tray { flex: none; height: calc(290 * var(--pt)); padding: calc(11 * var(--pt)) calc(16 * var(--pt)) 0; background: #E4E4E9; }
.ps-pad { display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: calc(43 * var(--pt)); gap: calc(6.6 * var(--pt)); }
.ps-pad i {
  display: grid; place-items: center; border-radius: calc(22 * var(--pt)); background: #fff; color: #000; font: 400 calc(24 * var(--pt))/1 var(--font-ui); font-style: normal;
}
.ps-pad .op { background: #FF9F0A; color: #fff; font-size: calc(30 * var(--pt)); }
.ps-pad .fn { background: #CBCBD0; }
.ps-pad .ps-ac { font-size: calc(21 * var(--pt)); }
.ps-pad svg { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); }

/* ---------- Watch-only hero phone ---------- */
#hero .phone { pointer-events: none; -webkit-user-select: none; user-select: none; }
#hero .tabbar { transition: opacity .3s ease, transform .35s cubic-bezier(.32, .72, 0, 1); }
#hero .tabbar.is-away { opacity: 0; transform: translateY(1.2em); }
.ps-pad .is-down { filter: brightness(.86); }
.ps-row.is-down { background: rgba(0, 0, 0, .06); }
.ps-u.is-down:not(.on) { background: rgba(0, 0, 0, .04); }
.ps-chips span.is-down { filter: brightness(.9); }

/* Restaurant tool, pushed over the list like the app's navigation */
.ps-rest .ps-view, .ps-tool { transition: transform .4s cubic-bezier(.32, .72, 0, 1); }
.ps-rest.is-tool .ps-view { transform: translateX(-28%); }
/* Full height, like an iOS push: the panel slides in under the status bar, so its edge shadow never draws a line
   across the screen below the clock. */
.ps-tool { position: absolute; inset: 0; background: #fff; transform: translateX(100%); padding: 2.61em calc(16 * var(--pt)) 0; overflow: hidden; }
.ps-rest.is-tool .ps-tool { transform: none; box-shadow: 0 0 calc(20 * var(--pt)) rgba(0, 0, 0, .08); }
.ps-tbar { display: flex; align-items: center; gap: calc(12 * var(--pt)); height: calc(44 * var(--pt)); padding-left: calc(3 * var(--pt)); }
.ps-back svg { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); stroke-width: 2.4; }
.ps-ttl { flex: 1; font: 600 calc(17 * var(--pt))/1 var(--font-ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-tcaps { display: inline-flex; align-items: center; gap: calc(14 * var(--pt)); height: calc(44 * var(--pt)); padding: 0 calc(12 * var(--pt)) 0 calc(14 * var(--pt)); border-radius: calc(22 * var(--pt)); background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 calc(3 * var(--pt)) calc(10 * var(--pt)) rgba(0, 0, 0, .08); color: #E67700; font: 500 calc(16 * var(--pt))/1 var(--font-ui); }
.ps-tcaps span { display: inline-flex; align-items: center; gap: calc(6 * var(--pt)); }
.ps-tcaps svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); }
.ps-ans { display: flex; align-items: center; gap: calc(10 * var(--pt)); margin-top: calc(16 * var(--pt)); height: calc(62 * var(--pt)); padding: 0 calc(16 * var(--pt)); border-radius: calc(20 * var(--pt)); background: #F2F2F7; }
.ps-ans b { font: 400 calc(15 * var(--pt))/1.3 var(--font-ui); color: rgba(60, 60, 67, .7); white-space: nowrap; }
.ps-ans small { font: 400 calc(12 * var(--pt))/1.3 var(--font-ui); color: rgba(60, 60, 67, .5); }
.ps-ans em { font: 400 calc(31 * var(--pt))/1.1 var(--font-ui); color: #000; white-space: nowrap; letter-spacing: calc(-.3 * var(--pt)); }
.ps-acts { display: flex; gap: calc(9 * var(--pt)); margin-top: calc(14 * var(--pt)); }
.ps-acts span { display: inline-flex; align-items: center; gap: calc(7 * var(--pt)); height: calc(33 * var(--pt)); padding: 0 calc(14 * var(--pt)); border-radius: calc(17 * var(--pt)); background: #F2F2F7; color: #E67700; font: 600 calc(14.5 * var(--pt))/1 var(--font-ui); white-space: nowrap; }
.ps-acts svg { width: calc(16 * var(--pt)); height: calc(16 * var(--pt)); }
.ps-fields { margin-top: calc(10 * var(--pt)); }
.ps-f { display: flex; align-items: center; gap: calc(10 * var(--pt)); height: calc(58 * var(--pt)); padding: 0 calc(14 * var(--pt)); border-radius: calc(14 * var(--pt)); transition: background-color .2s; }
.ps-f b { font: 600 calc(15 * var(--pt))/1.3 var(--font-ui); color: #000; }
.ps-f small { font: 400 calc(12 * var(--pt))/1.3 var(--font-ui); color: rgba(60, 60, 67, .6); }
.ps-fv { display: inline-flex; align-items: baseline; gap: calc(5 * var(--pt)); white-space: nowrap; }
.ps-fv em { font: 300 calc(28 * var(--pt))/1 var(--font-ui); color: #000; }
.ps-fv i { font: 400 calc(14 * var(--pt))/1 var(--font-ui); font-style: normal; color: rgba(60, 60, 67, .6); }
.ps-f.is-focus { background: #F2F2F7; }
.ps-f.is-focus .ps-fv em { color: #E67700; }
.ps-f.is-focus .ps-fv em::after { content: ""; display: inline-block; width: calc(2 * var(--pt)); height: .85em; margin-left: calc(2 * var(--pt)); vertical-align: -.06em; background: #E67700; animation: ps-caret 1s steps(1) infinite; }
@keyframes ps-caret { 50% { opacity: 0; } }
.ps-tog { flex: none; position: relative; width: calc(52 * var(--pt)); height: calc(30 * var(--pt)); border-radius: calc(15 * var(--pt)); background: #E5E5EA; }
.ps-tog::after { content: ""; position: absolute; top: calc(2 * var(--pt)); left: calc(2 * var(--pt)); width: calc(26 * var(--pt)); height: calc(26 * var(--pt)); border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.ps-tog.on { background: #E67700; }
.ps-tog.on::after { left: auto; right: calc(2 * var(--pt)); }
.ps-break { margin-top: calc(12 * var(--pt)); border-radius: calc(20 * var(--pt)); }
.ps-bl { position: relative; display: flex; align-items: center; gap: calc(10 * var(--pt)); height: calc(52 * var(--pt)); padding: 0 calc(16 * var(--pt)); }
.ps-bl + .ps-bl::before { content: ""; position: absolute; top: 0; left: calc(16 * var(--pt)); right: calc(16 * var(--pt)); height: max(1px, calc(.6 * var(--pt))); background: rgba(60, 60, 67, .16); }
.ps-bl b { font: 400 calc(15 * var(--pt))/1.3 var(--font-ui); color: rgba(60, 60, 67, .85); }
.ps-bl small { font: 400 calc(11.5 * var(--pt))/1.3 var(--font-ui); color: rgba(60, 60, 67, .5); }
.ps-bl em { font: 400 calc(21 * var(--pt))/1.1 var(--font-ui); color: #000; white-space: nowrap; }
.ps-screen .odo-col, .ps-screen .odo-ch { line-height: 1.1; }

/* The tool's keypad slides up like a keyboard, over the tab bar */
.ps-kb {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; padding: 0 calc(16 * var(--pt)) calc(30 * var(--pt)); background: #E4E4E9;
  font-family: var(--font-ui); font-variant-numeric: tabular-nums; --pt: calc(var(--phone-font, 16px) * .040682);
  transform: translateY(101%); visibility: hidden; transition: transform .34s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .34s;
}
.ps-kb.is-up { transform: none; visibility: visible; transition: transform .34s cubic-bezier(.32, .72, 0, 1), visibility 0s; }
.ps-kbbar { display: flex; align-items: center; justify-content: space-between; height: calc(46 * var(--pt)); }
.ps-kbbar span { font: 400 calc(14 * var(--pt))/1 var(--font-ui); color: rgba(60, 60, 67, .7); white-space: nowrap; }
.ps-kbbar span b { font-weight: 600; color: #000; }
.ps-done { padding: calc(6 * var(--pt)) calc(4 * var(--pt)); font: 600 calc(17 * var(--pt))/1 var(--font-ui); color: #E67700; }

/* ---------- Fingertip for the demo: small, mostly hollow, never in the way ---------- */
.ps-touch {
  position: absolute; left: 50%; top: 60%; z-index: 6; width: 1.875em; height: 1.875em; margin: -.9375em 0 0 -.9375em;
  pointer-events: none; opacity: 0; transition: opacity .25s ease;
}
.ps-touch.is-on { opacity: 1; }
.ps-touch.is-on.is-rest { opacity: .4; }
.ps-touch-dot {
  position: absolute; inset: 0; border-radius: 50%;
  background: rgba(10, 132, 255, .12); box-shadow: inset 0 0 0 1.5px rgba(10, 132, 255, .45), 0 0 .35em rgba(10, 132, 255, .18);
}
.ps-ripple { position: absolute; z-index: 6; pointer-events: none; }
.ps-ripple-dot { width: 1.875em; height: 1.875em; margin: -.9375em 0 0 -.9375em; border-radius: 50%; border: 1.5px solid rgba(10, 132, 255, .45); }

@media (prefers-reduced-motion: reduce) {
  .ps-screen, .ps-screen.is-on, #hero .tab-pill, .phone .tabbar button, .ps-tool, .ps-rest .ps-view, .ps-kb { transition: none; }
  .ps-touch, .ps-ripple { display: none; }
}
.ps-flagemoji { font-size: 1.15em; line-height: 1; }
.ps-kb svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }