/* Phone shell (public/js/phone-shell.js): the frame every page sits in below 900 px. Desktop never matches these
   rules; the few phone-only elements are hidden there. */
.ph-more,.ph-switch,.ph-cbar,.ph-ai,.ph-ai-back,.ph-nav{display:none}

@media (max-width:899px){
  /* Nothing pans sideways. clip (not hidden) keeps position:sticky working. */
  html,body{overflow-x:clip;overscroll-behavior-x:none}
  body{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .scene{contain:strict;clip-path:inset(0)}

  /* Fields under 16 px make iOS zoom in; inputs inside larger text keep their size. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),select,textarea{font-size:max(16px,1em)!important}

  /* Top bar: brand (or, once scrolled, the page title and its primary action), search, Indigo AI, avatar.
     Settings and light/dark live in the avatar menu. */
  .topbar{grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .topbar>.brand,.topbar>.ph-cbar{grid-area:1/1;min-width:0}
  .topbar>.actions{grid-column:2}
  .brand{max-width:100%;transition:opacity .2s,transform .3s var(--ease)}
  .actions{gap:2px;padding:0 4px 0 6px}
  .actions [data-act="settings"],.actions [data-act="theme"]{display:none}
  .actions .search{min-width:44px;height:44px;justify-content:center;border-radius:999px;cursor:pointer}
  .actions .icon-btn,.actions .av-btn{width:44px;height:44px}
  .actions .av-btn .av{width:36px;height:36px}
  .ph-ai{display:inline-grid}
  .ph-ai-slash{width:12px;height:18px;fill:var(--orange);filter:drop-shadow(0 0 6px rgba(240,86,31,.7))}
  .ai-fab{display:none!important}
  .topbar:has(.search input:focus) .brand-word{display:none}

  .ph-cbar{display:flex;align-items:center;gap:6px;justify-self:start;max-width:100%;height:48px;padding:0 4px 0 6px;border-radius:999px;opacity:0;visibility:hidden;transform:translateY(-6px);
    background:var(--g-strong);-webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);box-shadow:var(--inner),var(--drop);transition:opacity .2s,transform .3s var(--ease),visibility 0s linear .3s}
  .ph-ctitle{min-width:0;height:44px;padding:0 10px;border-radius:999px;font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:-.02em}
  .ph-ctitle span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ph-cact{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--on-orange);background:radial-gradient(130% 160% at 28% -10%,#FF9A5E 0%,#E8521A 38%,#C93C0C 72%,#9E2E06 100%);box-shadow:0 6px 16px -6px rgba(233,79,27,.8)}
  .ph-cact[hidden]{display:none}
  .ph-cact .ic{width:20px;height:20px}
  body.ph-collapsed .ph-cbar{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .3s var(--ease)}
  body.ph-collapsed .topbar>.brand{opacity:0;visibility:hidden;transform:translateY(6px)}

  /* Page header: large title with its eyebrow, ⋯ beside it, then the one primary action. */
  .page-head{position:relative;flex-direction:column;align-items:stretch;gap:14px;margin-bottom:22px}
  .page-head .page-title{font-size:34px;overflow-wrap:anywhere}
  .page-head.ph-has-more .page-title{padding-right:56px}
  .page-head .toolbar{gap:8px}
  .page-head .toolbar:not(:has(>:not(.ph-sec):not(.ph-more))){display:contents}
  .page-head .toolbar>.ph-sec{display:none}
  .page-head .toolbar>.btn{height:44px}
  .page-head .ph-more:not([hidden]){display:grid;position:absolute;right:0;top:20px;width:44px;height:44px;background:var(--g1);box-shadow:var(--inner),0 4px 14px -6px rgba(0,0,0,.35)}
  .page-head .ph-more[aria-expanded="true"]{background:var(--track)}

  /* Page tabs: the segmented control when it fits, otherwise one switcher. Never a sideways strip. */
  .subnav,.adm-tabs{overflow:hidden}
  .subnav.ph-over,.adm-tabs.ph-over{display:none}
  .ph-switch:not([hidden]){display:inline-flex;justify-content:space-between;width:100%;margin-top:16px}
  /* One look for every picker: the page switcher and phone-pages' filter, stage and role pickers. */
  :root :is(.ph-switch,.pp-seg-chip,.pp-chip,.pp-stage-pick){height:auto;min-height:48px;gap:8px;padding:0 16px 0 20px;border-radius:999px;font-size:15px;font-weight:600}
  :root :is(.ph-switch,.pp-seg-chip,.pp-chip,.pp-stage-pick)>.ic{flex:none;width:16px;height:16px;color:var(--ink-2)}
  :root :is(.pp-chip b,.ph-switch span){font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ph-switch:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
  .toolbar .ph-switch:not([hidden]){margin-top:0}
  .ph-switch span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ph-switch .ic{color:var(--ink-2)}

  /* Tab bar: fixed, clear of the home indicator; hides while the keyboard is open. */
  .dept-bar{transition:transform .3s var(--ease),opacity .2s}
  .dept-bar a,.dept-bar button{min-height:44px}
  .dept-bar [aria-current="page"]{color:var(--orange-ink)}
  body.ph-kb .dept-bar{transform:translateY(calc(100% + 40px));opacity:0;pointer-events:none}
  .main{padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}

  /* Toasts sit above the tab bar, or at the top while the keyboard is open. */
  .toast{top:auto;bottom:calc(90px + env(safe-area-inset-bottom,0px));transform:translate(-50%,14px) scale(.96);max-width:calc(100vw - 32px);border-radius:26px}
  .toast.show{transform:translate(-50%,0) scale(1)}
  body.ph-kb .toast{top:calc(12px + env(safe-area-inset-top,0px));bottom:auto;transform:translate(-50%,-14px) scale(.96)}
  body.ph-kb .toast.show{transform:translate(-50%,0) scale(1)}

  /* Menus and pickers: bottom sheets with a grabber, a dimmed layer behind. */
  body.ph-menu-on::after{content:"";position:fixed;inset:0;z-index:68;background:var(--scrim);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  .ph-asheet,.account-menu.ph-asheet,.dept-more.ph-asheet{position:fixed;z-index:70;top:auto;left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));bottom:calc(8px + env(safe-area-inset-bottom,0px));
    width:auto;min-width:0;max-height:calc(100dvh - 72px - env(safe-area-inset-top,0px));overflow:auto;overscroll-behavior:contain;padding:22px 8px 8px;border-radius:30px;display:flex;flex-direction:column;gap:2px;
    animation:ph-up .32s var(--ease);transition:transform .3s var(--ease)}
  .ph-grab{position:absolute;top:8px;left:50%;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:var(--hair-2)}
  .account-menu.ph-asheet button,.dept-more.ph-asheet a{min-height:52px;font-size:16px}
  .ph-sh-title{font-size:13px;font-weight:600;color:var(--ink-2);text-align:center;padding:2px 12px 8px}
  .ph-sh-body{display:flex;flex-direction:column;gap:8px}
  .ph-sec-label{font-size:13px;font-weight:600;color:var(--ink-2);padding:8px 12px 2px}
  .ph-list{display:flex;flex-direction:column;gap:2px}
  .ph-item{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0 14px;border-radius:18px;font-size:16px;font-weight:600;text-align:left;color:var(--ink)}
  .ph-item:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
  .ph-item-ic{display:grid;place-items:center;width:24px;flex:none;color:var(--orange)}
  .ph-item-ic svg{width:20px;height:20px}
  .ph-item-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ph-item-t small{display:block;font-size:13px;font-weight:500;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis}
  .ph-item:disabled{opacity:1;color:var(--ink-2);cursor:default}
  .ph-item[aria-pressed="true"]{background:var(--track)}
  .ph-check{color:var(--orange);flex:none}
  .ph-cancel{justify-content:center;margin-top:8px;background:var(--track)}

  /* Sheets: bottom sheets that swipe down to close; forms are full height with Cancel · title · Save at the top. */
  .sheet{top:calc(10px + env(safe-area-inset-top,0px));right:0;left:0;bottom:0;width:auto;border-radius:30px 30px 0 0;transform:translateY(104%)}
  .sheet .sheet-head{position:relative;padding-top:26px}
  .sheet:not(.ph-form) .sheet-head::before{content:"";position:absolute;top:9px;left:50%;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:var(--hair-2)}
  .sheet-head .sheet-close{width:44px;height:44px}
  .sheet-body{padding-left:20px;padding-right:20px;padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
  .sheet-foot{flex-wrap:wrap;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))}
  .sheet-foot .btn{height:44px}
  .sheet.ph-form{top:0;border-radius:0;padding-top:env(safe-area-inset-top,0px)}
  .sheet.ph-form .ph-nav{display:grid;grid-template-columns:minmax(64px,auto) minmax(0,1fr) minmax(64px,auto);align-items:center;gap:8px;min-height:56px;padding:6px 10px;box-shadow:inset 0 -1px 0 var(--hair);position:relative;z-index:2}
  .ph-nav>.btn{height:44px;padding:0 14px;margin:0}
  .sheet.ph-form .ph-nav>.btn[data-act="close"]{justify-self:start;padding:0 8px;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;color:var(--orange-ink);font-size:16px;font-weight:500}
  .ph-nav>[data-act="close"]::before,.ph-nav>[data-act="close"]::after{display:none}
  .ph-nav>.btn-primary{justify-self:end;height:38px;padding:0 16px;max-width:42vw}
  .ph-nav>.btn .ic{display:none}
  .ph-nav-t{text-align:center;font-weight:700;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sheet.ph-form .sheet-head{padding-top:14px}
  .sheet.ph-form .sheet-close{display:none}
  .sheet.ph-form .sh-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .sheet.ph-form .sheet-head:not(:has(.crumb)):not(:has(>:not(.sh-main):not(.sheet-close))){display:none}
  .sheet.ph-form .sheet-foot.ph-foot-empty{display:none}
  .sheet.ph-form .sheet-foot .foot-gap{display:none}

  /* Indigo AI: full screen with Back. */
  .ai-panel{inset:0;width:100%;height:100%;border-radius:0;padding-top:env(safe-area-inset-top,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px);padding-bottom:env(safe-area-inset-bottom,0px);transform:translateY(24px)}
  body.ai-on{overflow:hidden}
  .ph-ai-back{display:inline-flex;align-items:center;gap:2px;height:44px;margin-left:-10px;padding:0 8px 0 2px;border-radius:999px;color:var(--orange-ink);font-size:16px;font-weight:500}
  .ph-ai-back .ic{width:22px;height:22px}
  .ai-head .ai-slash{display:none}
  .ai-head [data-act="ai-close"]:not(.ph-ai-back){display:none}
  .ai-tools .icon-btn{width:44px;height:44px}

  /* Touch: pressed state on everything tappable; edit icons don't wait for a hover. */
  :is(button,a,label.btn,[role="button"],[data-act]):active{opacity:.62;transition:opacity 0s}
  .pt-edit,.person-edit,.avp-cam,.bud-pen{opacity:1}
}
@media (max-width:374px){
  .brand-word{font-size:15px}
  .brand{padding:0 14px 0 13px}
}
@media (max-width:340px){.brand-word{display:none}}
@keyframes ph-up{from{transform:translateY(40px);opacity:0}}
@media (prefers-reduced-motion:reduce){.ph-asheet{animation:none}}