/* THE PHONE LAYER (crank W50, 4 Oct 2026; Kat lead, Theo, Felix). Victor: "Build mobile version less feature heavy that also
   explains that some sections are better viewed on desktop, to make it look and feel as if it was a mobile native site,
   built from the ground up on mobile, while keeping the desktop version intact."
   Loaded with media="(max-width: 760px)", so a desktop browser never applies a single rule here, and loaded last, so it
   overrides without editing any other file. Its partner, site/mobile.js, adds the few things CSS cannot (the tools row
   in the menu, the "better on a bigger screen" notes, the lighter sky, swipe on the hero). Decisions and sources:
   crank-rooms-2026-10-04/builds/W50/MOBILE.md. */

/* :: native feel :: */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;--gut:16px;--sub-h:52px;--m-tab:64px}
:root{--sub-h:52px}
a,button,summary,label,[role="button"],.tile{touch-action:manipulation}
/* iOS zooms into any field under 16px; none of ours are allowed to be */
input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),textarea,select{font-size:16px!important}
/* inner scrollers keep their scroll to themselves */
.menu,.garden-dlg,.qa-sheet,.fcard,dialog{overscroll-behavior:contain}

/* :: the top bar: logo, XP, avatar, menu :: */
html body .cm-toggle{display:none!important}               /* card view is a desktop experiment */
html body .sv-chip{display:none!important}                 /* the survey chip moves into the menu (mobile.js) */
html body .bar-r{gap:8px}
html body .burger{width:44px;height:44px}
html body #fil-me{min-width:44px;min-height:44px;display:inline-grid;place-items:center}
html body .garden-btn{min-width:44px}

/* :: the tab bar: five doors with labels; the logo is the way home :: */
html body .side{height:calc(var(--m-tab) + env(safe-area-inset-bottom,0px))!important;padding:0 4px env(safe-area-inset-bottom,0px)!important;
  background:rgba(6,7,30,.94);border-top:1px solid rgba(255,255,255,.08)}
html body .side .r3-field,html body .side .side-more{display:none!important}
html body .side li.home-door,html body .side li.home-sep,html body .side li.qa-pbtn,html body .side li.qa-li{display:none!important}
html body .side ol{display:flex!important;gap:0!important;height:100%;overflow:visible!important;transform:none!important}
html body .side li.door5{flex:1 1 0;min-width:0;display:flex}
html body .side li.door5[hidden]{display:none}
html body .side li.door5 .tile{width:100%!important;height:var(--m-tab)!important;min-height:44px;flex-direction:column!important;gap:3px!important;
  border-radius:0!important;color:rgba(222,226,236,.78)}
html body .side li.door5 .tile > svg{width:22px!important;height:22px!important;padding:4px 18px!important;border-radius:999px!important;
  color:rgba(222,226,236,.78)!important;transition:background .2s,color .2s!important}
html body .side li.door5 .dl{display:block!important;max-width:100%;overflow:hidden;text-overflow:ellipsis;
  font:600 10.5px/1.1 var(--jost,"Jost"),system-ui,sans-serif!important;letter-spacing:0!important}
/* the open door: its innovator colour, as the indicator pill behind the icon and on the label */
html body .side li.door5 .tile.on{color:#fff}
html body .side li.door5 .tile.on > svg{color:rgb(var(--dc))!important;background:rgba(var(--dc),.2)!important;box-shadow:none!important}
html body .side li.door5 .tile.on .dl{color:rgb(var(--dc))}
html body .side li.door5 .tile:hover > svg{transform:none!important}
html body .side li.door5 .tile:focus-visible{outline:2px solid rgb(var(--dc));outline-offset:-3px;border-radius:12px!important}
html body .side li.door5.has-new .tile::before{display:block!important;left:calc(50% + 12px)!important;right:auto!important;top:7px!important;width:7px;height:7px}
html body{padding-bottom:calc(var(--m-tab) + env(safe-area-inset-bottom,0px))}
html body .frame-view{bottom:calc(var(--m-tab) + env(safe-area-inset-bottom,0px))}
html body .lock-note{bottom:calc(var(--m-tab) + 12px + env(safe-area-inset-bottom,0px))}

/* :: the rooms: one row of chips under the bar, scrolling sideways :: */
html body .subbar{height:var(--sub-h);border-bottom:1px solid rgba(255,255,255,.06)}
html body .subbar .sb-k{display:none}
html body .sb-list{padding:0 12px!important;gap:8px;align-items:center;scroll-padding:0 16px;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg,#000,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000,#000 calc(100% - 28px),transparent)}
html body .sb-list li{flex:none!important;min-width:0!important;animation:none!important}
html body .subbar .tile{isolation:isolate;flex-direction:row!important;gap:6px!important;height:44px!important;width:auto!important;padding:0 14px!important;
  background:none!important;font:600 14px/1 var(--jost,"Jost"),system-ui,sans-serif!important;letter-spacing:.01em!important;color:rgba(226,230,240,.86)!important;white-space:nowrap}
html body .subbar .tile > svg:first-child{display:none!important}
html body .subbar .tile::after{content:""!important;position:absolute;inset:4px 0!important;height:auto!important;z-index:-1;transform:none!important;border-radius:999px!important;
  background:rgba(255,255,255,.06)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)!important;transition:background .2s,box-shadow .2s}
html body .subbar .tile.on{color:#fff!important}
html body .subbar .tile.on::after{background:rgba(var(--dc),.24)!important;box-shadow:inset 0 0 0 1px rgba(var(--dc),.75)!important}
html body .subbar li.teaser .tile{color:rgba(201,211,226,.6)!important}
html body .subbar li.teaser .tile::after{background:transparent!important;box-shadow:inset 0 0 0 1px rgba(227,200,120,.4)!important;outline:1px dashed rgba(227,200,120,.0)}
html body .subbar li.teaser[data-hint]:hover::before{display:none}
html body .subbar .tile .lk{position:static!important;width:12px!important;height:12px!important}
html body .sb-prem{position:static!important;font-size:9px!important;padding:3px 5px 2px!important}
html body .subbar li.is-new .tile::before{content:"";position:absolute;top:8px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--gold,#E3C878)}
html body .subbar .tile:focus-visible{outline-offset:-2px;border-radius:999px}
html body .sb-out{width:44px;padding:0!important;justify-content:center}

/* :: content: one column, 16px gutters, readable type :: */
html body main{overflow-x:clip}
html body main p,html body main li{line-height:1.6}
html body .hero .wrap > *,html body main .wrap > *{max-width:100%}
img,video,iframe{max-width:100%}
html body .hero{padding-bottom:96px;min-height:100svh}   /* the doors start below the first screen, so late hero content never pushes visible things (CLS) */

/* :: Leo: smaller, standing on the tab bar :: */
html body .leo{right:12px;bottom:calc(var(--m-tab) + 12px + env(safe-area-inset-bottom,0px))}
html body .leo-fab{width:48px;height:48px}
html body .leo-fab img{width:48px;height:48px}
html.framed body .leo{bottom:calc(var(--m-tab) + 12px + env(safe-area-inset-bottom,0px))}

/* :: sheets rise from the bottom :: */
html body .garden-dlg{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:88svh;border-radius:22px 22px 0 0;
  padding:30px 18px calc(22px + env(safe-area-inset-bottom,0px));animation:m-up .32s cubic-bezier(.2,.8,.2,1)}
html body .garden-dlg::before{content:"";position:absolute;top:9px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:rgba(80,64,40,.28)}
html body .garden-dlg .x{width:44px;height:44px;top:10px;right:10px}
html body .fcard:not(.rk-wide){position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto!important;max-width:none!important;
  max-height:88svh;overflow:auto;border-radius:22px 22px 0 0!important;padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))!important;animation:m-up .32s cubic-bezier(.2,.8,.2,1)}
@keyframes m-up{from{transform:translateY(40px);opacity:0}}

/* :: the menu: tools row (weather, radio, search, pinned) added by mobile.js :: */
.m-tools{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px;padding:0 0 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.m-tool{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);color:#eef0f6;font:500 15px/1 var(--jost,"Jost"),system-ui,sans-serif;text-decoration:none;cursor:pointer}
.m-tool svg{width:18px;height:18px;flex:none}
.m-tool[aria-pressed="true"]{border-color:rgba(227,200,120,.6);background:rgba(227,200,120,.12);color:#f4dfa3}
.m-tool.m-wx{cursor:default;background:none;border-style:dashed}
.m-tool.m-wx b{font-weight:600}
.m-tool.m-sv{border-color:rgba(227,200,120,.4);color:#f4dfa3}
html body .menu{max-height:calc(100svh - 64px - var(--m-tab) - env(safe-area-inset-bottom,0px));overflow-y:auto}
html body .menu-l a{min-height:44px;align-items:center}

/* :: better on a bigger screen :: */
.m-big{display:flex;align-items:flex-start;gap:12px;margin:0;padding:12px 14px 12px 16px;background:#14163f;border-bottom:1px solid rgba(227,200,120,.25);
  color:#eef0f6;font:400 14px/1.45 var(--sans,system-ui),sans-serif;flex:none}
.m-big svg{flex:none;width:22px;height:22px;margin-top:1px;color:#e3c878}
.m-big b{display:block;font-weight:600;font-size:15px;color:#fff;margin-bottom:2px}
.m-big span{color:rgba(225,230,240,.82)}
.m-big button{flex:none;min-width:44px;min-height:44px;margin:-8px -6px -8px auto;border:0;border-radius:999px;background:none;color:#e3c878;font:600 14px var(--jost,"Jost"),system-ui,sans-serif;cursor:pointer}
main .m-big{margin:0 0 18px;border:1px solid rgba(227,200,120,.3);border-radius:14px}

/* :: lighter: the phone sky, and calmer motion :: */
#sky-m{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block;opacity:.9}
.m-meteor{position:fixed;z-index:0;top:0;left:0;width:120px;height:2px;border-radius:2px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,rgba(255,240,210,0),rgba(255,240,210,.9));transform-origin:100% 50%;will-change:transform,opacity;
  animation:m-fall 1.3s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes m-fall{0%{opacity:0;transform:translate(var(--x0),var(--y0)) rotate(var(--a))}15%{opacity:1}100%{opacity:0;transform:translate(var(--x1),var(--y1)) rotate(var(--a))}}
html body .holo{animation:none}
@media (prefers-reduced-motion:reduce){.garden-dlg,.fcard{animation:none!important}.m-meteor{display:none}}
/* the horizon line is bottom-anchored to a hero that grows as the moment card and sign-in arrive; on a phone it sat behind
   the tab bar on the first screen and was the main source of layout shift, so it rests here (the Earth strip stays) */
html body .hero::before{display:none}
/* Leo steps aside while the menu or a sheet is open */
html:has(#menu:not([hidden])) .leo,html:has(dialog[open]) .leo,html:has(.fcard:not([hidden])) .leo{display:none!important}