/* S343 · becoolbepositive.com as a phone app, on the Studio mobile standard (cultureai.com B324 to B326, with every audit finding
   fixed from the start). This sheet is linked with the shell's media query, so laptops and desktops never apply it: phones in
   portrait (max-width:760px) and short touch screens in landscape (max-height:500px with a coarse pointer). <html> carries sh-on
   from the head, before the first paint, so the top bar never swaps (tools/shell343.py).
   The shell: a compact top bar (the SFG. mark, Search, Ask, Sign in) that tightens on scroll; a five tab bar (Home, Read, My why,
   Press, Contact); Ask as a bottom sheet with half and full heights; the letter's player as a mini player above the tabs; and
   screens that slide in through cross-document view transitions while the bars stay still. The living pills are never restyled.
   Motion: enter cubic-bezier(.05,.7,.1,1), exit cubic-bezier(.3,0,.8,.15), exits a third faster than entries. */
@media (max-width:760px), (max-height:500px) and (pointer:coarse){
  @view-transition{navigation:auto}
  :root{
    --sh-tab:58px;
    --sh-head:56px;
    --sh-sb:env(safe-area-inset-bottom,0px);
    --sh-st:env(safe-area-inset-top,0px);
    --sh-sl:env(safe-area-inset-left,0px);
    --sh-sr:env(safe-area-inset-right,0px);
    --sh-dock:0px;
    --sh-glass:#fff;
    --sh-hair:rgba(10,22,51,.12);
    --sh-ink:#0a1633;
    --sh-mute:#566074;
    --sh-blue:#1559f5;
    --sh-navy:#0b1530;
    --sh-in:cubic-bezier(.05,.7,.1,1);
    --sh-out:cubic-bezier(.3,0,.8,.15);
    /* what the end of a page has to clear: the tab bar, the home indicator, the mini player when it is up, and a breath */
    --sh-end:calc(var(--sh-tab) + var(--sh-sb) + var(--sh-dock) + 16px);
  }

  /* the rubber band: the footer's navy below the page, white above the top bar (iOS 26 tints its toolbars from the body) */
  html.sh-on{background:var(--sh-navy)}
  html.sh-on::before{content:"";position:fixed;left:0;right:0;top:0;height:50%;background:#fff;z-index:-1;pointer-events:none}
  html.sh-on body{background:#fff;min-height:100svh;padding-left:var(--sh-sl);padding-right:var(--sh-sr)}
  ::view-transition{background:#fff}

  /* nothing on the page moves behind an open sheet */
  html.sh-on.sh-lock{overflow:hidden;overscroll-behavior:none}
  html.sh-on.sh-lock body{overscroll-behavior:none}

  /* anchors land clear of the top bar and the tab bar */
  html.sh-on{scroll-padding-top:calc(var(--sh-st) + var(--sh-head) + 12px);scroll-padding-bottom:var(--sh-end)}

  /* the end of every page clears the bars and the player. The footer holds the room (the letter's own rule, body.lp-docked
     padding-bottom 96px, would leave white under the navy, and the footer's 92px was sized for the floating Ask button) */
  html.sh-on body.lp-docked{padding-bottom:0!important}
  html.sh-on footer.bf .f42-in{padding-bottom:calc(var(--sh-end) + 20px)!important}
  html.sh-on body:not(:has(>footer.bf)){padding-bottom:var(--sh-end)}

  /* ---------- the top bar: the SFG. mark, then Search, Ask and Sign in; it tightens once the page moves ---------- */
  html.sh-on .bh{position:sticky;top:0;z-index:120;padding-top:var(--sh-st);background:var(--sh-glass);border-bottom:.5px solid transparent;
    transition:border-color .25s;view-transition-name:sh-head;-webkit-user-select:none;user-select:none}
  html.sh-on.sh-scrolled .bh{border-bottom-color:var(--sh-hair)}
  /* edge to edge in landscape too: the bar runs under the notch gutters, its contents stay inside them */
  html.sh-on .bh{margin-left:calc(-1 * var(--sh-sl));margin-right:calc(-1 * var(--sh-sr))}
  html.sh-on .bh-in{min-height:var(--sh-head);padding:0 calc(8px + var(--sh-sr)) 0 calc(16px + var(--sh-sl))!important;gap:8px;justify-content:space-between;
    transition:min-height .3s var(--sh-in)}
  html.sh-on.sh-scrolled .bh-in{min-height:46px}
  html.sh-on .bh-brand{min-height:44px;min-width:44px;margin-left:-4px}
  html.sh-on .bh-brand img{height:50px!important;margin:-6px 0;transition:height .3s var(--sh-in)}
  html.sh-on.sh-scrolled .bh-brand img{height:42px!important}
  html.sh-on .bh-nav,html.sh-on .bh-cta,html.sh-on .bh-menu{display:none!important}
  html.sh-on .bh-acts{display:flex;align-items:center;gap:8px}
  html.sh-on .bh-acts>.bh-sbtn,html.sh-on .bh-acts>.bh-login,html.sh-on .sh-ibtn{display:grid!important;place-items:center;box-sizing:border-box;width:44px;height:44px;min-width:44px;
    padding:0!important;margin:0;border:0!important;border-radius:999px;background:transparent!important;box-shadow:none!important;color:var(--sh-ink)!important;cursor:pointer}
  /* the words stay for screen readers; the icons carry them on screen */
  html.sh-on .bh-sbtn kbd{display:none!important}
  html.sh-on .bh-sbtn b,html.sh-on .bh-login b{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  html.sh-on .bh-acts>.bh-sbtn svg,html.sh-on .bh-acts>.bh-login svg,html.sh-on .sh-ibtn svg{display:block!important;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  /* Ask is the one in the accent: it is what this site does that a page can't */
  html.sh-on .sh-ibtn{color:var(--sh-blue)!important}
  html.sh-on .sh-ibtn .sh-fill{fill:rgba(21,89,245,.12)}
  html.sh-on .bh-acts>:is(.bh-sbtn,.bh-login,.sh-ibtn):active{background:rgba(21,89,245,.1)!important;transform:scale(.92)}
  html.sh-on .bh-acts>:is(.bh-sbtn,.bh-login,.sh-ibtn){transition:transform .12s var(--sh-in),background .12s}
  html.sh-on .bh-acts>:is(.bh-sbtn,.bh-login,.sh-ibtn):focus-visible{outline:2px solid var(--sh-blue);outline-offset:-2px}

  /* the reading line on My why sits under the status bar's inset, not in it */
  html.sh-on #rprog{top:var(--sh-st)!important}

  /* the floating Navigator button gives way to Ask in the top bar (so it never sits on the tabs or the player) */
  html.sh-on .askfab-k,html.sh-on .askfab{display:none!important}

  /* ---------- the home hero as a card: inset, round corners, the drawn scene inside ---------- */
  html.sh-on main>.hero.hb:first-child{margin:8px 10px 0;border-radius:28px;overflow:clip;isolation:isolate;
    box-shadow:0 1px 0 rgba(10,22,51,.04),0 18px 40px -24px rgba(10,22,51,.4)}

  /* ---------- press states, like a native app (shell-s343.js listens for touchstart, which iOS needs before it applies :active) ---------- */
  html.sh-on :is(a,button,summary,label,select,input,textarea,[role=button]){touch-action:manipulation}
  html.sh-on :is(.sh-tab,.sh-ibtn,.bh-sbtn,.bh-login,.s4-paths a,.wr-nplay,.wr-nread,.f42-col a,.lp-dpp,.lp-dic,.lp-dx,.lp-dfol,#wvbtn,.askp-x,.askp-chips button){-webkit-tap-highlight-color:transparent}
  html.sh-on :is(.s4-paths a,.wr-nplay,.wr-nread,.lp-dpp,#wvbtn,.askp-chips button,.askp-next button,.askp-send,.f42-aloha,.bf-social a){transition:transform .12s var(--sh-in)}
  html.sh-on :is(.s4-paths a,.wr-nplay,.wr-nread,.lp-dpp,#wvbtn,.askp-chips button,.askp-next button,.askp-send,.f42-aloha,.bf-social a):active{transform:scale(.96)}

  /* forms: 16px or larger, or iOS zooms the page when a field is touched */
  html.sh-on :is(input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea){font-size:max(16px,1em)!important}

  /* touch targets: 44 by 44 on phones, at least 8px apart. The footer's link lists grow to 44px rows */
  html.sh-on .f42-col li a{min-height:44px}
  html.sh-on .f42-tel a{display:inline-flex;align-items:center;min-height:44px;padding:0}
  /* buttons and lone links on the pages: 44px tall (the skip link, the home's last link, the Writing page's newest note and
     its Listen and Read, Contact's direct lines, the press kit's Copy buttons and the bio length switch) */
  html.sh-on .s301-skip{min-height:44px;display:flex;align-items:center}
  html.sh-on :is(.hx-ft a,.wr-nt a){display:inline-flex;align-items:center;min-height:44px}
  html.sh-on :is(.wr-nplay,.wr-nread,.s4p-seg label){min-height:44px}
  html.sh-on :is(.pk-copy,a.big,.cmail2){display:flex;align-items:center;min-height:44px}
  html.sh-on .pk-copy{display:inline-flex}
  /* list links: the press kit's topics become 44px rows 8px apart; the Writing page's single-line titles and column links
     reach 44px with padding the layout gives back, so nothing on the page moves */
  html.sh-on .s4p-topics{row-gap:8px!important}
  html.sh-on .s4p-topics a{display:flex;align-items:center;min-height:44px}
  html.sh-on .wr-t{padding-block:11px;margin-block:-11px}
  html.sh-on .wr-ct{padding-block:10px;margin-block:-10px}
  /* and 8px apart: the footer's link lists, its phone line and Say aloha, the home's two My why buttons, the Writing filters */
  html.sh-on .f42-col ul{row-gap:8px!important}
  html.sh-on .f42-aloha{margin-top:20px!important}
  html.sh-on .s342h-acts{gap:8px!important}
  html.sh-on .wr-chips{gap:8px!important}

  /* ---------- the tab bar ---------- */
  /* (top:auto and border-bottom:0 answer the old header's bare nav{position:fixed;top:0} rule still in the pages) */
  .sh-tabs{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:140;display:grid;border-bottom:0;grid-template-columns:repeat(5,minmax(0,1fr));
    height:calc(var(--sh-tab) + var(--sh-sb));padding:0 max(4px,var(--sh-sr)) var(--sh-sb) max(4px,var(--sh-sl));margin:0;
    background:var(--sh-glass);border-top:.5px solid var(--sh-hair);view-transition-name:sh-tabs;transition:transform .28s var(--sh-in);
    -webkit-user-select:none;user-select:none;font-family:Rubik,system-ui,-apple-system,sans-serif}
  .sh-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:44px;height:var(--sh-tab);margin:0;padding:6px 0 4px;
    border:0;background:none;color:var(--sh-mute)!important;font:500 12px/1 Rubik,system-ui,-apple-system,sans-serif;letter-spacing:0;text-decoration:none!important;
    white-space:nowrap;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  /* the pages' own nav and link rules (mono, uppercase, tracked on My why) never reach the tab labels */
  .sh-tab,.sh-tab span{font:500 12px/1 Rubik,system-ui,-apple-system,sans-serif!important;text-transform:none!important;letter-spacing:0!important}
  .sh-tab svg{width:26px;height:26px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .14s var(--sh-in)}
  .sh-tab .sh-fill{fill:transparent;transition:fill .2s}
  .sh-tab[aria-current="page"]{color:var(--sh-blue)!important}
  .sh-tab[aria-current="page"] .sh-fill{fill:rgba(21,89,245,.16)}
  .sh-tab:active svg{transform:scale(.86)}
  .sh-tab:focus-visible{outline:2px solid var(--sh-blue);outline-offset:-4px;border-radius:14px}
  html.sh-kb .sh-tabs{transform:translateY(110%)}

  /* glass only where the browser can blur (20px at most, on the two small bars); a solid bar where it can't */
  @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    :root{--sh-glass:rgba(255,255,255,.96)}
    html.sh-on .bh,.sh-tabs{-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px)}
  }

  /* ---------- the letter's player as the mini player, above the tab bar ---------- */
  html.sh-on .lp-dock{bottom:calc(var(--sh-tab) + var(--sh-sb) + 8px)!important;width:calc(100vw - 16px - var(--sh-sl) - var(--sh-sr))!important;max-width:none;
    border-radius:18px!important;z-index:141;view-transition-name:sh-dock;-webkit-user-select:none;user-select:none;
    box-shadow:0 1px 0 rgba(10,22,51,.04),0 14px 34px -12px rgba(10,22,51,.45)!important}
  html.sh-on .lp-din{gap:8px;padding:6px 6px 6px 8px}
  html.sh-on .lp-dtxt{padding:0 2px}
  html.sh-kb .lp-dock{transform:translate(-50%,calc(var(--sh-tab) + var(--sh-sb)))}

  /* ---------- Ask, as a bottom sheet: grab handle, title, round close; half height first, then full ---------- */
  html.sh-on .askp{inset:auto 0 0 0!important;top:auto!important;width:auto!important;height:min(var(--sh-askh,56dvh),calc(100dvh - var(--sh-st) - 44px));
    max-height:calc(100dvh - var(--sh-st) - 44px);border-radius:26px 26px 0 0!important;overflow:hidden;box-shadow:0 -10px 40px rgba(10,22,51,.28);
    animation:sh-up .38s var(--sh-in) both;transition:height .32s var(--sh-in)}
  html.sh-on .askp.sh-full{--sh-askh:100dvh}
  html.sh-on .askp.sh-drag{animation:none;transition:none}
  html.sh-on .askp.sh-closing{animation:sh-down .25s var(--sh-out) both}
  html.sh-on .askp-in{padding-bottom:var(--sh-sb)}
  html.sh-on .askp-h{position:relative;display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 12px;
    padding:28px 12px 14px 18px!important;touch-action:none;-webkit-user-select:none;user-select:none}
  html.sh-on .askp-h .askp-face{width:44px;height:44px;border-radius:13px}
  html.sh-on .askp-h>div{min-width:0}
  html.sh-on .askp-t{margin:0;font:600 22px/1.15 Rubik,system-ui,sans-serif!important;letter-spacing:-.015em;color:#fff!important;outline:none}
  html.sh-on .askp-d{margin:3px 0 0;font:400 13.5px/1.4 Rubik,system-ui,sans-serif!important;color:#c9d3ea!important}
  html.sh-on .askp-h>.cai-pill{grid-column:1/-1;grid-row:2;justify-self:start;margin-top:6px}
  html.sh-on .askp-x{grid-column:3;grid-row:1;align-self:start;width:44px!important;height:44px!important;border-radius:999px!important;background:rgba(255,255,255,.12)!important}
  html.sh-on .askp-x svg{width:16px;height:16px}
  html.sh-on .askp-x:active{transform:scale(.9);background:rgba(255,255,255,.2)!important}
  html.sh-on .askp-chips button,html.sh-on .askp-next button{min-height:44px}
  html.sh-on .askp-hear,html.sh-on .askp-copy{min-height:44px}
  html.sh-on .askp-foot :is(button,a){min-height:44px;display:inline-flex;align-items:center}
  .sh-grab{position:absolute;top:0;left:0;right:0;height:26px;display:grid;place-items:center;cursor:grab;touch-action:none;z-index:3}
  .sh-grab::before{content:"";width:36px;height:5px;border-radius:3px;background:rgba(255,255,255,.34)}
  html.sh-on .askp-scrim{animation:sh-fade .3s var(--sh-in) both}

  @keyframes sh-up{from{transform:translateY(100%)}}
  @keyframes sh-down{to{transform:translateY(100%)}}
  @keyframes sh-fade{from{opacity:0}}

  /* the bars carry their own names and stay still while the page under them moves */
  ::view-transition-group(sh-tabs),::view-transition-group(sh-head),::view-transition-group(sh-dock){animation-duration:0s}
  ::view-transition-old(sh-tabs),::view-transition-new(sh-tabs),::view-transition-old(sh-head),::view-transition-new(sh-head),
  ::view-transition-old(sh-dock),::view-transition-new(sh-dock){animation:none}
}
/* landscape on a phone: shorter bars, the label beside the icon, as iOS does */
@media (max-height:500px) and (pointer:coarse){
  :root{--sh-tab:50px;--sh-head:48px}
  .sh-tab{flex-direction:row;gap:6px}
  .sh-tab svg{width:24px;height:24px}
  html.sh-on .askp{height:calc(100dvh - var(--sh-st) - 16px);max-height:none}
}
/* screens slide like an app: deeper pages push in from the right, back reverses, a tab crossfades */
@media (max-width:760px) and (prefers-reduced-motion:no-preference),(max-height:500px) and (pointer:coarse) and (prefers-reduced-motion:no-preference){
  html:active-view-transition-type(sh-push)::view-transition-old(root){animation:.25s var(--sh-out) both sh-push-out}
  html:active-view-transition-type(sh-push)::view-transition-new(root){animation:.375s var(--sh-in) both sh-push-in}
  html:active-view-transition-type(sh-back)::view-transition-old(root){animation:.25s var(--sh-out) both sh-back-out;z-index:2}
  html:active-view-transition-type(sh-back)::view-transition-new(root){animation:.375s var(--sh-in) both sh-back-in}
  html:active-view-transition-type(sh-tab)::view-transition-old(root){animation:.25s var(--sh-out) both sh-tab-out}
  html:active-view-transition-type(sh-tab)::view-transition-new(root){animation:.375s var(--sh-in) both sh-tab-in}
  @keyframes sh-push-in{from{transform:translateX(100%);box-shadow:-20px 0 40px rgba(10,22,51,.18)}to{box-shadow:-20px 0 40px rgba(10,22,51,0)}}
  @keyframes sh-push-out{to{transform:translateX(-28%);opacity:.7}}
  @keyframes sh-back-out{to{transform:translateX(100%)}}
  @keyframes sh-back-in{from{transform:translateX(-28%);opacity:.7}}
  @keyframes sh-tab-out{to{opacity:0}}
  @keyframes sh-tab-in{from{opacity:0}}
}
@media (max-width:760px) and (prefers-reduced-motion:reduce),(max-height:500px) and (pointer:coarse) and (prefers-reduced-motion:reduce){
  html.sh-on .bh,html.sh-on .bh-in,html.sh-on .bh-brand img,.sh-tabs,html.sh-on .askp,.sh-tab svg{transition:none!important}
  html.sh-on .askp,html.sh-on .askp.sh-closing,html.sh-on .askp-scrim{animation:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}
@media print{.sh-tabs,.sh-ibtn,.sh-grab{display:none!important}}