/* BAB-0061: the public pages on a phone (the front page and the pages to read: bots, parts, fit-checked, about, get it, privacy, credits). Loaded after phone.css by site/build.mjs.
   shared/ui/places.js adds html.phone (a phone is in front of us), html.phone-site (this is a public page) and html.phone-home (the front page). Every rule is under html.phone, so
   a desktop and a tablet are untouched. The reading pages are documents, so they scroll (the shell's one-screen lock is turned off here); what they share with the app is the slim
   header with the same place button right after the logo, the same "Go to" sheet, Back closing it, the light cookie sheet above everything, 44 px targets and 14 px text. */
html.phone.phone-site { --hue: #04D9C4; --hue-ink: #087F75; --hue-rgb: 4, 217, 196; --night: #141A21; --hair: rgba(20, 26, 33, .10); --ease: cubic-bezier(.2, .8, .2, 1); --ph-bar: 0px; --ph-rail: 0px;
  height: auto; overflow: visible; overscroll-behavior: auto; }
html.phone.phone-site.phone-home { --ph-bar: calc(76px + env(safe-area-inset-bottom, 0px)); }          /* the front page's dock is the bar: the cookie choice sits above it */
html.phone.phone-site body { position: static; height: auto; overflow: visible; overscroll-behavior: auto; background: var(--page, #F5F6F8); padding-bottom: var(--bots-cc-h, 0px); }
html.phone.phone-site.phone-home body { height: 100dvh; overflow: hidden; overscroll-behavior: none; background: #fff; padding-bottom: 0; }
html.phone.phone-site .ico { width: 24px; height: 24px; flex: none; fill: currentColor; }

/* the slim header: logo, the place button, the account chip. The old Menu dropdown and the link row give way to the place button. */
html.phone.phone-site header.site nav, html.phone.phone-site header.site .navm { display: none; }
html.phone.phone-site:not(.phone-home) header.site { position: sticky; top: 0; z-index: 30; box-shadow: 0 6px 14px -12px rgba(20, 26, 33, .55); }
html.phone.phone-site header.site .wrap { flex-wrap: nowrap; justify-content: flex-start; gap: 6px; }
html.phone.phone-site:not(.phone-home) header.site .wrap { min-height: 48px; padding-top: 2px; padding-bottom: 2px; }
html.phone.phone-site:not(.phone-home) header.site .wrap { padding: env(safe-area-inset-top, 0px) calc(8px + env(safe-area-inset-right, 0px)) 0 calc(8px + env(safe-area-inset-left, 0px)); }
html.phone.phone-site header.site .brand { flex: none; min-width: 44px; margin: 0; }
html.phone.phone-site:not(.phone-home) header.site .brand span { display: none; }
html.phone.phone-site header.site .bots-me { margin-left: auto; min-height: 44px; }
html.phone.phone-site header.site .ph-page { flex: 0 1 auto; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 0 8px 0 14px; border: 0; border-radius: 14px;
  background: var(--night); color: #fff; font: 700 16px/1 system-ui, sans-serif; cursor: pointer; box-shadow: 0 0 0 1px rgba(var(--hue-rgb), .7), 0 4px 12px -6px rgba(var(--hue-rgb), .9); }
html.phone.phone-site header.site .ph-page .ico { width: 22px; height: 22px; color: var(--hue); }
html.phone.phone-site header.site .ph-page[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--hue), 0 4px 12px -6px rgba(var(--hue-rgb), .9); }

/* reading: type a thumb can read, nothing wider than the screen, every stand-alone link a 44 px target */
html.phone.phone-site:not(.phone-home) main { padding: 16px 0 40px; }
html.phone.phone-site:not(.phone-home) .wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
html.phone.phone-site:not(.phone-home) header.site .wrap { padding-left: calc(8px + env(safe-area-inset-left, 0px)); padding-right: calc(8px + env(safe-area-inset-right, 0px)); }
html.phone.phone-site:not(.phone-home) h1 { font-size: clamp(28px, 8vw, 36px); overflow-wrap: anywhere; }
html.phone.phone-site:not(.phone-home) h2 { font-size: 22px; margin: 28px 0 10px; }
html.phone.phone-site:not(.phone-home) .lede { font-size: 18px; }
html.phone.phone-site:not(.phone-home) main, html.phone.phone-site:not(.phone-home) .card, html.phone.phone-site:not(.phone-home) li { overflow-wrap: anywhere; }
html.phone.phone-site:not(.phone-home) td a, html.phone.phone-site:not(.phone-home) .crumbs a, html.phone.phone-site:not(.phone-home) .dl a, html.phone.phone-site:not(.phone-home) .small a { min-height: 44px; display: inline-flex; align-items: center; }
html.phone.phone-site:not(.phone-home) .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }
html.phone.phone-site:not(.phone-home) .btn { min-height: 52px; }
html.phone.phone-site:not(.phone-home) .btn:only-child, html.phone.phone-site:not(.phone-home) p > .btn:only-child { display: flex; width: 100%; }
html.phone.phone-site:not(.phone-home) .tablewrap { overflow: visible; }
html.phone.phone-site:not(.phone-home) pre, html.phone.phone-site:not(.phone-home) code { overflow-wrap: anywhere; white-space: pre-wrap; }
html.phone.phone-site:not(.phone-home) summary { min-height: 48px; }
html.phone.phone-site:not(.phone-home) footer.site a { display: inline-flex; align-items: center; min-height: 44px; }
html.phone.phone-site:not(.phone-home) footer.site { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }
html.phone.phone-site .ph-page span { max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (prefers-reduced-motion: reduce) { html.phone.phone-site .ph-page { transition: none; } }