/* CG160 · the Culture Group as an app on the phone, ported from cultureai.com's shell (B324, shipped in B326) to the Studio
   mobile standard. Everything here sits inside the shell's media query: phones in portrait (max-width:760px) and short touch
   screens in landscape (max-height:500px with a coarse pointer). Laptops and desktops render exactly as before. <html>
   carries sh-on from the head, before the first paint (tools/shell160.py), so the top bar never swaps.
   Colours come from the site's own tokens (paper, paper2, ink, line, card and the brand blue), so the bars, sheets and tabs
   are the Culture Group's paper look, and follow it if the palette ever changes. The living pills are never restyled here.
   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){
  :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:76px;
    --sh-bar:var(--px-paper,#ffffff);
    --sh-glass:var(--sh-bar);
    --sh-sheet:var(--px-paper2,#f5f7fc);
    --sh-card:var(--px-card,#fff);
    --sh-ink:var(--px-ink,#0a1633);
    --sh-mute:var(--px-char,#425170);
    --sh-hair:var(--px-line,#e3e8f2);
    --sh-blue:var(--tb,#1559f5);
    --sh-in:cubic-bezier(.05,.7,.1,1);
    --sh-out:cubic-bezier(.3,0,.8,.15);
    --sh-foot:var(--px-paper2,#f5f7fc);
    /* what the end of a page has to clear: the tab bar, the home indicator and a breath; plus the mini player when it is up */
    --sh-end:calc(var(--sh-tab) + var(--sh-sb) + 16px);
  }
  html.sh-on.px-docked{--sh-end:calc(var(--sh-tab) + var(--sh-sb) + var(--sh-dock) + 8px + 16px)}

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

  /* 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, citations and scrollIntoView land clear of the top bar and the tab bar */
  html.sh-on{scroll-padding-top:calc(var(--sh-st) + var(--sh-head) + 8px);scroll-padding-bottom:var(--sh-end)}
  /* the end of every page clears the bars and the player: the footer carries the room itself, so no footer rule can beat it */
  html.sh-on body>footer{padding-bottom:var(--sh-end)!important}
  html.sh-on body:not(:has(>footer)){padding-bottom:var(--sh-end)!important}

  /* the notch: the page starts under the status bar's inset; landscape gets its side insets */
  html.sh-on body{padding-top:var(--sh-st);padding-left:var(--sh-sl);padding-right:var(--sh-sr)}

  /* the top bar: the logo master and Ask; it tightens once the page moves */
  html.sh-on .px-ledger{display:none!important}
  /* (the site's own header rules run up to five classes deep, in dark too; the repeated class outranks them all) */
  :root.sh-on.sh-on.sh-on.sh-on.sh-on body .px-head{
    position:fixed!important;top:0!important;left:0!important;right:0!important;transform:none!important;width:auto!important;margin:0!important;
    padding:var(--sh-st) var(--sh-sr) 0 var(--sh-sl)!important;border:0!important;border-bottom:.5px solid transparent!important;border-radius:0!important;
    box-shadow:none!important;background:var(--sh-glass)!important;z-index:120!important;transition:border-color .25s}
  html.sh-on.sh-scrolled body .px-head{border-bottom-color:var(--sh-hair)!important}
  html.sh-on body .px-head .px-in{min-height:var(--sh-head)!important;max-width:none;padding:0 6px 0 20px!important;display:flex;align-items:center;justify-content:space-between;gap:8px;
    transition:min-height .3s var(--sh-in)}
  html.sh-on.sh-scrolled body .px-head .px-in{min-height:46px!important}
  html.sh-on body .px-head .px-brand{display:flex;align-items:center;min-height:44px}
  html.sh-on body .px-head .px-brand img{height:26px!important;width:auto!important;transition:height .3s var(--sh-in)}
  html.sh-on.sh-scrolled body .px-head .px-brand img{height:21px!important}
  /* (the phone rules that show Say aloha are three classes deep; the shell's Ask and More replace it) */
  :root.sh-on.sh-on body .px-head .px-nav,:root.sh-on.sh-on body .px-head .px-acts>:is(.px-signin,.px-cta,.px-menu){display:none!important}
  html.sh-on body .px-head .px-acts{display:flex;align-items:center;gap:8px;margin:0;-webkit-user-select:none;user-select:none}
  html.sh-on .sh-ask{display:grid!important;place-items:center;min-width:44px;height:44px;padding:0 6px;margin:0;border:0;background:none;cursor:pointer;color:#fff;text-decoration:none!important}
  html.sh-on .sh-askp{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px 0 11px;border-radius:999px;background:var(--sh-blue);color:#fff;
    font:500 15px/1 var(--px-sans,"Rubik",system-ui,sans-serif);letter-spacing:0;box-shadow:0 6px 16px -8px rgba(21,89,245,.7);transition:transform .12s var(--sh-in),height .3s var(--sh-in)}
  html.sh-on.sh-scrolled .sh-askp{height:32px}
  html.sh-on .sh-askp svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  html.sh-on .sh-ask:active .sh-askp{transform:scale(.94)}
  html.sh-on .sh-ask:focus-visible{outline:none}
  html.sh-on .sh-ask:focus-visible .sh-askp{outline:2px solid var(--sh-ink);outline-offset:2px}

  /* the letter's reading bar sits where the top bar is, under the status bar */
  html.sh-on .px-rbar{padding-top:var(--sh-st);background:var(--sh-glass)!important;z-index:125}

  /* press states, like a native app: they show on the touch (shell-cg160.js listens for touchstart, which iOS needs before it
     applies :active); the grey tap flash is turned off only where a press state replaces it */
  html.sh-on :is(a,button,summary,label,select,input,textarea,[role=button]){touch-action:manipulation}
  html.sh-on :is(.px-btn,.tg-btn,.px-fbtn,.px-dk-pp,.px-dk-b,.px-lis-pp,.px-lis-b,.cg-qnext,.cg-qback){transition:transform .12s var(--sh-in)}
  html.sh-on :is(.px-btn,.tg-btn,.px-fbtn,.px-dk-pp,.px-dk-b,.px-lis-pp,.px-lis-b,.cg-qnext,.cg-qback):active{transform:scale(.97)}
  html.sh-on :is(.sh-tab,.sh-row,.sh-ask,.sh-x,.px-btn,.tg-btn,.px-fbtn,.px-dk-pp,.px-dk-b,.px-lis-pp,.px-lis-b){-webkit-tap-highlight-color:transparent}

  /* the floating Ask the firm button gives way to the top bar's Ask (and so never sits on the player or the tabs) */
  html.sh-on .px-askfab{display:none!important}

  /* 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; footer lists grow to 44px rows */
  html.sh-on body>footer .px-links a{display:flex!important;align-items:center;min-height:44px;padding-top:0!important;padding-bottom:0!important;margin-top:0!important;margin-bottom:0!important}
  html.sh-on body>footer .px-addr a,html.sh-on body>footer .tg-fm .px-link{display:inline-flex;align-items:center;min-height:44px}
  /* the letter's player: its seek is 44px tall to touch and stays a thin line to see */
  html.sh-on .px-lis .px-lis-bar{position:relative}

  /* the tab bar */
  .sh-tabs{position:fixed;left:0;right:0;bottom:0;z-index:140;display:grid;grid-template-columns:repeat(5,1fr);
    height:calc(var(--sh-tab) + var(--sh-sb));padding:0 max(6px,var(--sh-sr)) var(--sh-sb) max(6px,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}
  .sh-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:44px;height:var(--sh-tab);margin:0;padding:6px 0 4px;
    border:0;background:none;color:var(--sh-mute);font:500 12px/1 var(--px-sans,"Rubik",system-ui,sans-serif);letter-spacing:0;text-transform:none;text-decoration:none!important;
    cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}
  .sh-tab svg{width:26px;height:26px;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 .sh-det{transition:stroke .2s}
  .sh-tab .sh-dot{fill:currentColor;stroke:none}
  .sh-tab[aria-current="page"],.sh-tab.is-on{color:var(--sh-blue)}
  /* the active tab's icon is filled, as iOS draws it; its inner lines turn to the bar's colour */
  .sh-tab[aria-current="page"] .sh-fill,.sh-tab.is-on .sh-fill{fill:currentColor}
  .sh-tab[aria-current="page"] .sh-det,.sh-tab.is-on .sh-det{stroke:var(--sh-bar)}
  .sh-tab[aria-current="page"] .sh-dot,.sh-tab.is-on .sh-dot{fill:var(--sh-bar)}
  .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%)}
  html.sh-kb.px-docked .px-dock{transform:translateX(-50%) translateY(calc(var(--sh-tab) + var(--sh-sb)))}

    /* the bars are solid paper: a translucent bar let the serif headlines show through it (B324 audit) */
  html.sh-on body .px-head,.sh-tabs,html.sh-on .px-rbar{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

  /* the docked player as the mini player, above the tab bar */
  html.sh-on .px-dock{left:50%!important;right:auto!important;bottom:calc(var(--sh-tab) + var(--sh-sb) + 8px)!important;transform:translateX(-50%);
    width:calc(100vw - 16px - var(--sh-sl) - var(--sh-sr))!important;max-width:none!important;border-radius:18px!important;
    box-shadow:0 14px 34px -12px rgba(10,22,51,.55),0 0 0 .5px rgba(255,255,255,.08) inset;z-index:141;-webkit-user-select:none;user-select:none;margin:0!important}
  /* its seek: 44px tall to touch, still a thin line to see, in the same place */
  html.sh-on .px-dock .px-dk-seek{position:relative;z-index:2;height:44px!important;margin:-8px 18px -20px!important}

  /* sheets */
  .sh-grab{position:absolute;top:0;left:0;right:0;height:26px;display:grid;place-items:center;cursor:grab;touch-action:none;z-index:2}
  .sh-grab::before{content:"";width:36px;height:5px;border-radius:3px;background:var(--px-line2,#d5dcea)}
  dialog.sh-sheet{position:fixed;inset:auto 0 0 0;top:auto;margin:0;width:100%;max-width:100%;max-height:calc(100dvh - var(--sh-st) - 44px);
    padding:0 var(--sh-sr) 0 var(--sh-sl);border:0;border-radius:26px 26px 0 0;background:var(--sh-sheet);color:var(--sh-ink);font-family:var(--px-sans,"Rubik",system-ui,sans-serif);
    box-shadow:0 -10px 40px rgba(10,22,51,.2);overflow:hidden;display:flex;flex-direction:column;overscroll-behavior:contain;
    transition:height .32s var(--sh-in)}
  dialog.sh-sheet:not([open]){display:none}
  dialog.sh-sheet[open]{animation:sh-up .38s var(--sh-in) both}
  dialog.sh-sheet.sh-closing{animation:sh-down .25s var(--sh-out) both}
  dialog.sh-sheet.sh-drag{animation:none;transition:none}
  dialog.sh-sheet::backdrop{background:rgba(10,22,51,.38);animation:sh-fade .3s var(--sh-in) both}
  dialog.sh-sheet.sh-closing::backdrop{animation:sh-fade .25s var(--sh-out) reverse both}
  .sh-shead{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:26px 12px 10px 20px;touch-action:none;flex:none;-webkit-user-select:none;user-select:none}
  .sh-shead h2{margin:0;font:600 24px/1.15 var(--px-sans,"Rubik",sans-serif);letter-spacing:-.015em;color:var(--sh-ink);outline:none}
  .sh-shead p{margin:4px 0 0;font:400 14px/1.4 var(--px-sans,"Rubik",sans-serif);color:var(--sh-mute)}
  .sh-x{width:44px;height:44px;flex:none;display:grid;place-items:center;border:0;border-radius:999px;background:rgba(10,22,51,.07);background:color-mix(in srgb,var(--sh-ink) 8%,transparent);color:var(--sh-ink);cursor:pointer;align-self:flex-start}
  .sh-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
  .sh-x:active{transform:scale(.9);background:rgba(10,22,51,.13);background:color-mix(in srgb,var(--sh-ink) 14%,transparent)}
  .sh-x:focus-visible{outline:2px solid var(--sh-blue);outline-offset:2px}
  .sh-sbody{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 16px calc(20px + var(--sh-sb));-webkit-overflow-scrolling:touch}
  .sh-gl{margin:16px 4px 8px;font:500 13px/1.3 var(--px-sans,"Rubik",sans-serif);color:var(--sh-mute)}
  .sh-gl:first-child{margin-top:4px}
  .sh-grp{margin:0;padding:0;list-style:none;background:var(--sh-card);border-radius:18px;box-shadow:0 0 0 .5px var(--sh-hair);overflow:hidden}
  .sh-grp li{margin:0;padding:0}
  .sh-grp li+li .sh-row::before{content:"";position:absolute;top:0;left:60px;right:0;border-top:.5px solid var(--sh-hair)}
  .sh-row{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:56px;padding:10px 14px 10px 16px;border:0;background:none;
    color:var(--sh-ink)!important;text-decoration:none!important;text-align:left;font:500 16px/1.25 var(--px-sans,"Rubik",sans-serif);cursor:pointer}
  .sh-row:active{background:rgba(21,89,245,.07)}
  .sh-row:focus-visible{outline:2px solid var(--sh-blue);outline-offset:-3px;border-radius:14px}
  /* the page you are on */
  .sh-row[aria-current="page"]{background:rgba(21,89,245,.08);color:var(--px-blue-ink,#0f46c9)!important}
  .sh-here{width:20px;height:20px;flex:none;fill:none;stroke:var(--sh-blue);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
  .sh-ic{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:9px;background:var(--sh-blue);color:#fff}
  .sh-ic:not(.mark) svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .sh-ic.ink{background:var(--sh-ink);color:var(--sh-bar)}
  .sh-ic.soft{background:rgba(21,89,245,.12);color:var(--sh-blue)}
  .sh-ic.img,.sh-ic.mark{background:none;overflow:hidden}
  .sh-ic.img img{width:30px;height:30px;display:block}
  .sh-ic.mark svg{width:24px;height:24px;display:block}
  .sh-rt{flex:1;min-width:0}
  .sh-rt small{display:block;margin-top:3px;font:400 13px/1.3 var(--px-sans,"Rubik",sans-serif);color:var(--sh-mute)}
  .sh-chev{width:9px;height:15px;flex:none;fill:none;stroke:var(--px-mute,#566074);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .sh-chev.sh-out{width:14px;height:14px}

  /* Ask the firm: the site's Ask panel inside a sheet with the same header as More; its thread scrolls, the question box
     stays at the foot of the sheet at half and full height */
  dialog.sh-askdg{height:calc(100dvh - var(--sh-st) - 44px)}
  .sh-askbody{display:flex;flex-direction:column;padding:0!important;overflow:hidden}
  .sh-askbody{background:var(--sh-card)}
  .sh-askbody>#px-askpage{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;min-width:0}
  .sh-askbody .px-askp,.sh-askbody .px-askp.inline{position:static!important;inset:auto!important;flex:1 1 auto;min-height:0;width:auto!important;height:auto!important;
    margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;animation:none!important;background:transparent!important;display:flex;flex-direction:column;min-width:0;max-width:100%}
  .sh-askbody .px-askp .px-askp-in{flex:1 1 auto;min-height:0;height:auto;background:var(--sh-card)!important;border:0!important;border-top:.5px solid var(--sh-hair)!important;
    border-radius:0!important;box-shadow:none!important}
  .sh-askbody .px-askp .px-askp-h{display:none!important}
  .sh-askbody .px-askp .px-askp-f{background:var(--sh-card)}
  .sh-askbody .px-askp .px-askp-foot{padding-bottom:max(14px,var(--sh-sb))}
  .sh-askbody .px-askp-chips button{min-height:44px}
  .sh-askbody .px-askp-foot button{min-height:44px}
  dialog.sh-sheet .px-asksum{z-index:5}
  /* at half height the whole panel scrolls as one, the starters first; a push up takes the sheet to full, where the question
     box is pinned to the foot */
  dialog.sh-askdg.sh-half .sh-askbody{overflow-y:auto;overscroll-behavior:contain}
  dialog.sh-askdg.sh-half .sh-askbody>#px-askpage,dialog.sh-askdg.sh-half .sh-askbody .px-askp,dialog.sh-askdg.sh-half .sh-askbody .px-askp-in,
  dialog.sh-askdg.sh-half .sh-askbody .px-askp-thread{flex:none!important;height:auto!important;min-height:0;overflow:visible!important}
  /* one row: the question, Talk and send */
  .sh-askbody .px-askp-f{flex-wrap:nowrap!important}
  .sh-askbody .px-askp-f textarea{flex:1 1 auto!important;width:auto!important;min-width:0}
  /* Talk keeps its name for screen readers and shows its microphone, so the question box keeps its one line at 320 */
  .sh-askbody .px-askp-mic{width:46px;padding:0!important}
  .sh-askbody .px-askp-mic span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

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

  /* screens slide in like an app; the bars carry their own names (px-head and px-dock in the press stylesheet, sh-tabs here)
     and stay still while the page under them moves */
  ::view-transition-group(sh-tabs){animation-duration:0s}
  ::view-transition-old(sh-tabs),::view-transition-new(sh-tabs){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:50px}
  .sh-tab{flex-direction:row;gap:6px}
  .sh-tab svg{width:24px;height:24px}
}
@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 body .px-head,html.sh-on body .px-head .px-in,html.sh-on body .px-head .px-brand img,.sh-askp,.sh-tabs,dialog.sh-sheet{transition:none!important}
  dialog.sh-sheet[open],dialog.sh-sheet.sh-closing,dialog.sh-sheet::backdrop{animation:none!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none!important}
}
/* outside the shell: none of it (the class comes off when a screen is turned or resized past the query) */
html:not(.sh-on) :is(.sh-tabs,.sh-ask,dialog.sh-sheet,.sh-grab){display:none!important}
@media print{.sh-tabs,.sh-ask,dialog.sh-sheet{display:none!important}}