/* A module's sections as an iOS 26 bottom tab bar (2026-10-08).

   James: "think of the task module. It has ... boards, routines, reminders
   ... we should follow the iOS approach and move these ... to a reachable
   position, preferably at the thumb section, at the bottom of the screen like
   we have in the actual settings page ... with this glass look with this
   hover pill."

   Any row of view buttons that switches a page's sections gets the class
   `jm-tabbar` (and its buttons keep their own handlers). On a phone it floats
   at the bottom as a glass capsule on the SAME row as Julie's face (the dock
   pill, julie-dock.css: 58px, 14px from the right), which is the iOS 26
   layout of a tab bar beside one round accessory button. Pressing and
   gliding moves the lens (julie-tabglide.js, which only acts on a fixed bar).
   On a computer it stays where it was, a row at the top.

   It steps aside while typing (the keyboard owns the bottom of the screen)
   and while her conversation is open (the sheet covers it anyway, and a bar
   showing through would be two layers fighting for the same strip). */
/* A long press on a tab must not start a text selection. On iPhone it did
   (2026-10-08, James's screenshots): holding a finger on "Board" to glide the
   lens selected the label instead, and iOS showed its selection magnifier
   over the bar. No selection, no callout, so the press stays with the bar.
   Settings' own tab bar (.jst-tabs) had the same gap. */
.jm-tabbar, .jm-tabbar *, .jst-tabs, .jst-tabs *{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
}

@media (max-width: 720px) {
  .jm-tabbar{
    position:fixed; z-index:40; margin:0 !important;
    left:14px; right:86px; bottom:calc(18px + env(safe-area-inset-bottom, 0px));
    height:58px; padding:5px; box-sizing:border-box;
    display:flex !important; gap:2px; overflow:visible !important;
    /* !important: a page's own stylesheet still styles this row for the
       computer layout (Email's .views is a grey segmented control), and the
       bar must look the same on every page. */
    border-radius:999px !important;
    background:var(--glass-sheen, linear-gradient(transparent, transparent)), rgba(16,23,40,.62) !important;
    -webkit-backdrop-filter:blur(18px) saturate(170%);
    backdrop-filter:blur(18px) saturate(170%);
    border:1px solid rgba(255,255,255,.14) !important;
    box-shadow:inset 0 1.5px 0 rgba(255,255,255,.34), inset 0 -1px 0 rgba(255,255,255,.06),
               0 10px 30px rgba(2,6,23,.45) !important;
    transition:opacity .2s ease, transform .24s cubic-bezier(.22,1,.36,1);
  }
  .jm-tabbar > button{
    flex:1 1 0 !important; min-width:0; height:100% !important; min-height:0 !important;
    margin:0 !important; padding:2px 4px !important; border-radius:999px !important;
    display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    font-size:10.5px !important; font-weight:600; letter-spacing:.01em; line-height:1.1;
    color:var(--muted, #94A3B8); background:transparent !important; border:0 !important;
    -webkit-tap-highlight-color:transparent;
  }
  .jm-tabbar > button svg{ width:21px; height:21px; flex:none; }
  .jm-tabbar > button{ position:relative; }
  .jm-tabbar > button span:not(.n){ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  /* A count a page adds to its tab (Email's "Needs reply 3") becomes a badge
     on the icon, the way iOS shows one, instead of a third line. */
  .jm-tabbar .n{ position:absolute; top:3px; left:calc(50% + 5px); margin:0 !important;
    min-width:16px; height:16px; padding:0 4px; box-sizing:border-box; border-radius:8px;
    background:#EF4444; color:#fff !important; font-size:10px; line-height:16px; font-weight:700;
    text-align:center; opacity:1 !important; }
  .jm-tabbar .n:empty{ display:none; }
  .jm-tabbar > .active, .jm-tabbar > [aria-selected="true"]{
    background:rgba(10,132,255,.20) !important; color:#8FC2FF !important;
  }
  /* Room under the page so its last rows clear the bar. */
  /* On the BODY, not a wrapper: pages wrap their content differently
     (What Julie knows has no .wrap), and its last button sat under the bar. */
  body:has(.jm-tabbar){ padding-bottom:calc(104px + env(safe-area-inset-bottom, 0px)) !important; }
  /* Typing, or her conversation open: the bar steps aside. */
  body:has(input:focus, textarea:focus, select:focus) .jm-tabbar,
  body:has(.jd:not(.collapsed)) .jm-tabbar{
    opacity:0; transform:translateY(24px); pointer-events:none;
  }
  :root[data-theme="light"] .jm-tabbar{
    background:var(--glass-sheen, linear-gradient(transparent, transparent)), rgba(255,255,255,.72) !important;
    border-color:rgba(15,23,42,.10) !important;
    box-shadow:inset 0 1.5px 0 rgba(255,255,255,.9), 0 10px 26px rgba(15,23,42,.16) !important;
  }
  :root[data-theme="light"] .jm-tabbar > button{ color:#475569; }
  :root[data-theme="light"] .jm-tabbar > .active,
  :root[data-theme="light"] .jm-tabbar > [aria-selected="true"]{ background:rgba(10,132,255,.14) !important; color:#0A84FF !important; }
}
/* On a computer the icons sit beside the label in the top row. */
@media (min-width: 721px) {
  .jm-tabbar > button svg{ width:16px; height:16px; vertical-align:-3px; margin-right:6px; }
}
@media (prefers-reduced-motion: reduce){ .jm-tabbar{ transition:none; } }

/* Only tabs go on the bar; a page's group headings and labels stay in the
   computer row. Tabs marked jm-overflow go behind More (julie-modtabs.js). */
@media (max-width: 720px) {
  /* NOT the glide lens (julie-tabglide.js appends it to the bar): this rule,
     and every item rule above when they were written `> *`, hid it and
     stripped its glass, so a press-and-slide lit the tabs blue with no lens
     (James, 2026-10-08). Item rules now name `> button`. */
  .jm-tabbar > :not(button):not(.jtg-lens):not(.jrf){ display:none !important; }
  .jm-tabbar > .jm-overflow{ display:none !important; }
  /* A page with no conversation (no Julie face on the right) gets the full row. */
  body:not(:has(.jd-pill)) .jm-tabbar{ right:14px; }
  .jm-more-btn svg{ width:21px; height:21px; }
  .jm-tabbar > .jm-more-btn{ color:var(--muted, #94A3B8); font-weight:600; }
  .jm-more-menu{
    position:fixed; z-index:41; right:14px; min-width:210px; max-width:calc(100vw - 28px);
    bottom:calc(86px + env(safe-area-inset-bottom, 0px));
    display:flex; flex-direction:column; padding:6px; gap:2px; border-radius:18px;
    background:var(--glass-sheen, linear-gradient(transparent, transparent)), rgba(16,23,40,.86);
    -webkit-backdrop-filter:blur(20px) saturate(170%); backdrop-filter:blur(20px) saturate(170%);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:inset 0 1.5px 0 rgba(255,255,255,.3), 0 14px 36px rgba(2,6,23,.5);
  }
  .jm-more-menu[hidden]{ display:none; }
  .jm-more-menu button{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:0;
    border-radius:12px; background:none; color:var(--ink, #F1F5F9); font:inherit; font-size:15px;
    text-align:left; cursor:pointer; }
  .jm-more-menu button:active{ background:rgba(255,255,255,.08); }
  .jm-more-menu svg{ width:20px; height:20px; color:var(--muted, #94A3B8); flex:none; }
  :root[data-theme="light"] .jm-more-menu{
    background:var(--glass-sheen, linear-gradient(transparent, transparent)), rgba(255,255,255,.92);
    border-color:rgba(15,23,42,.10); box-shadow:0 14px 34px rgba(15,23,42,.18); }
}
@media (min-width: 721px) {
  .jm-more-btn, .jm-more-menu{ display:none !important; }
}

/* Scrolled down into content: the bar folds to its icons (julie-modtabs.js
   adds .jm-mini), the iOS 26 tab bar's own behaviour. A tap still works on
   every tab; scrolling up brings the labels back. */
@media (max-width: 720px) {
  .jm-tabbar{ transition:opacity .2s ease, transform .24s cubic-bezier(.22,1,.36,1),
              height .24s cubic-bezier(.22,1,.36,1), left .24s cubic-bezier(.22,1,.36,1),
              right .24s cubic-bezier(.22,1,.36,1); }
  .jm-tabbar.jm-mini{ height:46px; left:40px; }
  body:has(.jd-pill) .jm-tabbar.jm-mini{ right:100px; }
  body:not(:has(.jd-pill)) .jm-tabbar.jm-mini{ right:40px; }
  .jm-tabbar.jm-mini > * span:not(.n){ display:none; }
  .jm-tabbar.jm-mini .n{ top:1px; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce){ .jm-tabbar{ transition:none; } }

/* LIQUID GLASS (James, 2026-10-08, holding up iOS's own text loupe: "We need
   our glass to look like that"). What makes that read as glass rather than a
   tinted panel, and what this copies:
     - it is nearly CLEAR: what is behind it stays visible and sharp, so the
       blur is light and the tint thin (the old bar was 62% navy over an 18px
       blur, which hides everything and reads as a plastic plate);
     - a bright RIM, strongest along the top-left edge where the light falls,
       fading round the sides, with a faint answer at the bottom-right;
     - a light LIP along the inside of the bottom edge, the glass's thickness
       catching the light;
     - a soft shadow underneath, so it floats.
   What a web page cannot do on iPhone: Safari will not bend (refract) what
   is behind an element, so the edge distortion iOS draws is left out rather
   than faked. Labels get a faint shadow so they stay readable over a busy
   page now that the glass no longer hides it. */
@media (max-width: 720px) {
  .jm-tabbar{
    /* clear in the middle, a touch darker toward the rim: the glass's
       thickness, which is what the loupe's edge shows */
    background:radial-gradient(120% 140% at 50% 45%, rgba(14,20,36,.22) 55%, rgba(6,10,22,.46) 100%) !important;
    -webkit-backdrop-filter:blur(7px) saturate(165%) brightness(1.06);
    backdrop-filter:blur(7px) saturate(165%) brightness(1.06);
    border:1px solid rgba(255,255,255,.08) !important;
    box-shadow:
      inset 0 -9px 12px -10px rgba(255,255,255,.30),
      inset 14px -6px 14px -14px rgba(255,255,255,.22),
      inset 0 10px 14px -12px rgba(255,255,255,.14),
      0 12px 30px rgba(2,6,23,.42), 0 2px 6px rgba(2,6,23,.25) !important;
  }
  .jm-tabbar::before{
    content:''; position:absolute; inset:-1px; border-radius:inherit; padding:1.5px;
    pointer-events:none; z-index:0;
    background:linear-gradient(135deg, rgba(255,255,255,.85) 0%, rgba(255,255,255,.40) 14%,
               rgba(255,255,255,.18) 40%, rgba(255,255,255,.16) 62%, rgba(255,255,255,.34) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  }
  .jm-tabbar > button{ z-index:1; text-shadow:0 1px 2px rgba(2,6,23,.55); }
  .jm-tabbar > button svg{ filter:drop-shadow(0 1px 1.5px rgba(2,6,23,.5)); }
  .jm-tabbar > .active, .jm-tabbar > [aria-selected="true"]{
    background:rgba(10,132,255,.24) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(255,255,255,.08);
  }
  :root[data-theme="light"] .jm-tabbar{
    background:rgba(255,255,255,.40) !important;
    box-shadow:inset 0 -9px 12px -10px rgba(255,255,255,.9), 0 12px 26px rgba(15,23,42,.16) !important;
  }
  :root[data-theme="light"] .jm-tabbar > button{ text-shadow:none; }
  :root[data-theme="light"] .jm-tabbar > button svg{ filter:none; }
}

/* THE LARGE TITLE (julie-modtabs.js bigTitle). Phones only; the row's own
   small title hides until the big one has scrolled under the header. */
.jm-bigtitle{ display:none; }
@media (max-width: 720px) {
  body.jm-big-on .jm-bigtitle{
    display:block; margin:2px 0 6px; text-align:center;
    font-family:'Sora', var(--font-display, system-ui), system-ui, sans-serif;
    font-weight:700; font-size:2.25rem; line-height:1.1; letter-spacing:-.025em;
    color:var(--ink, #F1F5F9);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  body.jm-big-on .jm-bigtitle-btn{ cursor:pointer; }
  body.jm-big-on .top > h1{ opacity:0; transition:opacity .2s ease; }
  body.jm-big-on.jm-big-scrolled .top > h1{ opacity:1; }
  body.jm-big-on .jm-sub{ text-align:center; margin-left:auto; margin-right:auto; }
  body.jm-big-on .top:has(+ .jm-bigtitle){ margin-bottom:0; }
}
@media (max-width: 720px) and (prefers-reduced-motion: reduce){
  body.jm-big-on .top > h1{ transition:none; }
}

/* SECTIONS (julie-modtabs.js sections()). Phones split a long page; a
   computer shows all of it and no bar. */
@media (max-width: 720px) {
  .jm-sec-off{ display:none !important; }
  /* A tab with nothing to show (Labs before any results) is [hidden]; the
     bar's own `display:flex !important` on its buttons would otherwise win. */
  .jm-tabbar > button[hidden]{ display:none !important; }
}
@media (min-width: 721px) {
  .jm-tabbar.jm-sections{ display:none !important; }
}