/* v4.1.20 (K-a). THE PHONE (600 px and under), for the dashboard and the Studio: the pages as a bar
   of tabs at the foot, the top bar with the logo and the pod, the Menu sheet, and every dialog
   and menu as a sheet from the foot that slides away and can be pulled down. Moved here from the
   dashboard's own stylesheet (v4.1.17 B1 to B12, v4.1.18 G2 and its review), word for word; each
   host links it AFTER its own <style>, where these rules were, so nothing in either app is decided
   differently. It reads the host's tokens and defines none. Above 600 px nothing here applies
   but the first rule: what exists only on a phone is not drawn. The JS half is phone-ui.js. */

.nav-menu,.bar-back,.bar-pod{display:none}
@media (max-width:600px){
  :root{--tabbar:64px;--tabbar-all:calc(var(--tabbar) + env(safe-area-inset-bottom, 0px))}
  /* B12. The tutorial's sheet sits on the bar, not over it (tour-ui.css reads this). */
  :root{--tour-foot:var(--tabbar-all)}
  /* The page ends above the bar, never under it. On the app, not the body: the body is the
     window's height (html,body{height:100%}), so its own padding would sit under the page. */
  .app{padding-bottom:var(--tabbar-all)}
  /* The bar of tabs: Material 3's navigation bar (icon and label, the page on screen in a pill,
     fixed), five equal columns. Each host hides what is not a tab of its bar. */
  .rail .nav{position:fixed;left:0;right:0;bottom:0;z-index:16;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
             gap:0;height:var(--tabbar-all);padding:0 4px env(safe-area-inset-bottom, 0px);overflow:visible;
             background:var(--surface);box-shadow:0 -1px 0 var(--line)}
  .nav a,.nav .nav-menu{position:relative;flex:none;width:auto;height:var(--tabbar);display:flex;flex-direction:column;
                        align-items:center;justify-content:center;gap:4px;padding:0;border:0;border-radius:0;
                        background:none;color:var(--ink-2);font:inherit;font-size:var(--t-12);font-weight:500;cursor:pointer}
  .nav a:hover,.nav .nav-menu:hover{background:none;color:var(--ink)}
  .nav a.on{background:none;color:var(--ink);font-weight:700}
  /* The icon in its pill: 22 px inside 56 by 30 (a clear border, not padding: the pill is the
     box, the icon its middle); the page on screen has its pill filled. */
  .nav a svg,.nav .nav-menu svg{width:56px;height:30px;box-sizing:border-box;border:solid transparent;border-width:4px 17px;
                                border-radius:15px;background-clip:border-box;color:var(--ink-2);
                                transition:background var(--dur) var(--ease)}
  .nav a.on svg{background:var(--blue-wash);color:var(--blue-text)}
  .nav .nav-menu[aria-expanded="true"] svg{background:var(--blue-wash);color:var(--blue-text)}
  .nav .lab{display:block;line-height:1}
  .nav .count{display:none}
  /* Something is running behind a tab (the dashboard's Pods, the Studio's Video): a small dot on
     its icon. */
  .nav a.live::after{content:"";position:absolute;top:10px;left:calc(50% + 9px);width:8px;height:8px;
                     border-radius:50%;background:var(--good);box-shadow:0 0 0 2px var(--surface)}
  /* B2. The top bar: 56 high, the logo on the left (or "‹ Menu" on a page that lives in the
     Menu), the running pod on the right. The account's button is not here: the Menu has it. */
  /* (v4.1.17 review F4: at the very top, with the notch's inset inside it on the bar's own ground;
     sticky at the inset left an unpainted strip above it. The side insets too, for a phone that
     has them.) */
  .rail{position:sticky;top:0;height:calc(56px + env(safe-area-inset-top, 0px));gap:8px;background:var(--surface);
        padding:env(safe-area-inset-top, 0px) calc(16px + env(safe-area-inset-right, 0px)) 0 calc(16px + env(safe-area-inset-left, 0px))}
  .rail .mark{height:56px;padding:0}
  .who{display:none}
  .rail:has(.bar-back:not([hidden])) .mark{display:none}
  .bar-back:not([hidden]){display:inline-flex;align-items:center;gap:4px;height:44px;padding:0 8px 0 0;border:0;
                          background:none;color:var(--blue-text);font:inherit;font-size:var(--t-14);font-weight:600;cursor:pointer}
  .bar-pod:not([hidden]){display:inline-flex;align-items:center;min-width:0;max-width:220px;height:44px;padding:0;border:0;
                         background:none;font:inherit;cursor:pointer}
  .bar-pod-pill{display:inline-flex;align-items:center;gap:8px;min-width:0;height:32px;padding:0 12px;border-radius:var(--r-pill);
                background:var(--good-wash);color:var(--good);font-size:var(--t-13);font-weight:600}
  .bar-pod .dot{flex:none;width:8px;height:8px;border-radius:50%;background:currentColor}
  #barPodText{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* B11. A dialog is a sheet from the foot: the whole width, a rounded top, at most 90% of the
     screen high and scrolling inside (a long one scrolls in the sheet, never the page). A menu
     (library-ui.css: already along the foot) has the same top and the same limit. Their logic is
     library-ui.js's, unchanged. */
  .lib-dialog,.lib-dialog:has(.lib-dialog-wide){place-items:end stretch;padding:0}
  .lib-dialog-box,.lib-dialog-box.lib-dialog-wide{max-width:none;max-height:90vh;overflow-y:auto;border-width:1px 0 0;
                  border-radius:24px 24px 0 0;padding:24px 16px calc(16px + env(safe-area-inset-bottom, 0px))}
  .lib-menu{max-height:90vh;overflow-y:auto;border-radius:24px 24px 0 0}
  /* B3. The Menu, a sheet from the foot: rounded top, a grab handle, rows a thumb can take. */
  .msheet{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;justify-content:flex-end}
  /* (v4.1.17 review F6b: the page under an open sheet does not scroll.) */
  html.msheet-open,html.msheet-open body{overflow:hidden}
  .msheet-scrim{position:absolute;inset:0;background:rgba(0,0,0,.42)}
  .msheet-box{position:relative;max-height:90vh;overflow:auto;padding:8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
              background:var(--raised);border-radius:24px 24px 0 0;box-shadow:var(--shadow-lift);outline:none}
  .msheet-grab{display:block;width:40px;height:4px;margin:0 auto 8px;border-radius:2px;background:var(--line-2)}
  .msheet-who{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 0;border-bottom:1px solid var(--line)}
  .msheet-who .av{width:40px;height:40px;flex-basis:40px;border-radius:12px;font-size:var(--t-14)}
  .msheet-row{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 0;border:0;
              background:none;color:var(--ink);font:inherit;font-size:var(--t-14);text-align:left;text-decoration:none;cursor:pointer}
  .msheet-row svg{flex:none;color:var(--ink-3)}
  .msheet-text{display:grid;min-width:0;flex:1}
  .msheet-text b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .msheet-text span{font-size:var(--t-12);color:var(--ink-2)}
  .msheet-look{flex-wrap:wrap;cursor:default}
  .msheet-look .seg{display:flex;width:100%}
  .msheet-look .seg button{flex:1}
  .msheet-look .menu-note,.msheet-look .menu-row{width:100%}
  .msheet-legal{margin:8px 0 0;font-size:var(--t-12);color:var(--ink-3)}
  .msheet-legal a{color:inherit}
  @media (prefers-reduced-motion:no-preference){
    .msheet-box,.lib-dialog-box{animation:msheet-up var(--dur) var(--ease)}
    @keyframes msheet-up{from{transform:translateY(100%)}}
    /* v4.1.18 (G2a, G2c). Closing slides the sheet down and fades what is behind it; the Menu
       sheet is hidden, and a dialog or menu removed, once that has run (phone-ui.js,
       library-ui.js removeLeaving). From where a pull left it, too. */
    .msheet.closing .msheet-box{animation:msheet-leave-down var(--dur) ease-in forwards}
    .msheet.closing .msheet-scrim{animation:msheet-leave-fade var(--dur) ease-in forwards}
    @keyframes msheet-leave-down{to{transform:translateY(100%)}}
    @keyframes msheet-leave-fade{to{opacity:0}}
    .lib-dialog.lib-leaving{animation:lib-leave-fade var(--dur) ease-in forwards}
    .lib-dialog.lib-leaving .lib-dialog-box,.lib-menu.lib-leaving{animation:lib-leave-down var(--dur) ease-in forwards}
    @keyframes lib-leave-down{to{transform:translateY(100%)}}
    @keyframes lib-leave-fade{to{background-color:transparent}}
    /* (G2b) A sheet pulled short springs back. */
    .msheet-box,.lib-dialog-box,.lib-menu{transition:transform var(--dur) var(--ease)}
  }
  /* (G2) What is leaving takes no press; a handle a thumb can take (its hit area 24 high), the
     same on every sheet, and the page does not scroll from it. */
  .lib-leaving{pointer-events:none}
  /* (v4.1.18 review H4a: nor does the Menu sheet that is sliding away, nor its scrim.) */
  .msheet.closing{pointer-events:none}
  /* (v4.1.18 review H2) The handle IS the sheet's top edge: the band across the top (the bar drawn
     at its middle where it was), so a pull from the edge is the handle's and the page never takes
     the gesture (touch-action none: iOS cancelled a pull from the edge before). The box's own top
     padding is the band now, and what is under it starts where it did. */
  .msheet-grab{position:relative;width:auto;height:20px;margin:0;border-radius:0;touch-action:none;
               background:linear-gradient(var(--line-2),var(--line-2)) center / 40px 4px no-repeat}
  .msheet-box{padding-top:0}
  .lib-dialog-box,.lib-dialog-box.lib-dialog-wide{padding-top:0}
  .lib-dialog-box>.msheet-grab{height:24px;margin-bottom:8px}
  .lib-menu{padding-top:0}
  .lib-menu>.msheet-grab{height:16px}
  /* What sits at the foot of the screen sits above the bar. */
  .toast{bottom:calc(var(--tabbar-all) + 16px)}
  body:has(.page.on .lib-selbar-slot:not([hidden])) .toast{bottom:calc(var(--tabbar-all) + 96px)}
  .lib-selbar-slot{bottom:calc(var(--tabbar-all) + 12px)}
}