/* arguta-mobile.css (v1, 11 Nov 2026). Phones and iPads ONLY. Every page links this file with media="(max-width:860px)",
   so a computer screen wider than 860px never applies a single rule here. The desktop stays exactly as it is.
   Shared by the App, Studio, Academy, Academy Admin, core admin, agent console, landing, sign-in and country pages. */

/* 1. No scrollbar gutter on phones. A styled desktop scrollbar was taking 11px on the right of App and Studio pages,
      so the right margin was 27px against 16px on the left, and the top bar looked short of the right edge. */
html,body,*{scrollbar-width:none!important}
:is(*,#_){scrollbar-gutter:auto!important}
*::-webkit-scrollbar{width:0!important;height:0!important;display:none!important;background:transparent!important}

/* 2. Top bar: the same distance from the menu button to the logo mark on every platform (17px) */
html body header.top{gap:8px!important}

/* 3. Nothing wider than the screen */
html,body{overflow-x:hidden}
img,video,canvas,iframe{max-width:100%}

/* 4. Arguta portraits show her face: square on phones, centred near the top */
:is(.crewhero,.hero) img:is([src*="arguta"],[src*="avatar"],[src*="brand"],[src*="portrait"]){aspect-ratio:1/1;height:auto!important;object-fit:cover;object-position:50% 18%}
.crewhero img.arg{aspect-ratio:1/1!important;width:100%!important;height:auto!important;object-fit:cover!important;object-position:50% 15%!important}
.crewhero{display:block!important}
/* 5. Rows of buttons wrap instead of running off the screen; long words break */
:is(div,p,nav,section):has(> :is(button,a[class*=btn],a[class*=cta],a.sec,a.pri) + :is(button,a[class*=btn],a[class*=cta],a.sec,a.pri)){flex-wrap:wrap!important}
:is(h1,h2,h3,h4,p,li){overflow-wrap:anywhere}
/* 6. Wrapped rows of buttons and chips keep 8px between lines */
:is(div,p,section,span,nav):has(> :is(button,a) + :is(button,a)){row-gap:8px!important}
/* 7. Core admin and agent console: the same 16px side gutter as the App, Studio and Academy (it was 14px + 12px = 26px) */
html.pf-core #adm .main{padding-left:0!important;padding-right:0!important}
html.pf-core #adm .a-main{padding-left:16px!important;padding-right:16px!important;box-sizing:border-box!important;max-width:100%!important}
html.pf-core #adm .a-main > *{max-width:100%!important;box-sizing:border-box}
html.pf-core body #adm main.a-main,html.pf-core body #adm .a-main.nlmain{padding-left:16px!important;padding-right:16px!important}
/* 8. App and Studio crew profile on phones: the full screen width, the portrait across the width (square, face in view) */
html:is(.pf-app,.pf-studio) .prof{width:100vw!important;max-width:100vw!important;left:0!important;right:auto!important}
html:is(.pf-app,.pf-studio) .prof .aprof{padding-left:16px!important;padding-right:16px!important;box-sizing:border-box}
html:is(.pf-app,.pf-studio) .prof .aprof img.pbig{width:100%!important;height:auto!important;aspect-ratio:1/1;object-fit:cover;object-position:50% 18%}
/* 9. iPad: wrapped rows of buttons and chips keep the larger iPad gap */
@media (min-width:700px){:is(div,p,section,span,nav):has(> :is(button,a) + :is(button,a)){row-gap:10px!important}}
/* 10. Academy Admin: the same 16px side gutter */
html.pf-adm:not(.pf-core) main.main{padding-left:16px!important;padding-right:16px!important}
/* 11. App and Studio: the ask box sits on the same 16px line as the cards (it was 12px) */
html:is(.pf-app,.pf-studio) form.cmp{width:auto!important;margin-left:4px!important;margin-right:4px!important;box-sizing:border-box}
/* 12. App: the page tool bar (Intro, Plans and the other page chips) sits straight under the top bar. Its sticky offset
       was counted twice (the page already starts below the top bar), so it sat 56px low, left a see-through band under the
       top bar and covered the top of each page's heading. */
html.pf-app .in .doc>.dtool{top:0!important}
/* 13. App and Studio page chips (Home, Arguta OS ... Questions): 8px between wrapped lines, as every other chip row (10px on iPad) */
html:is(.pf-app,.pf-studio) :is(.dtool,.snbar) nav.apnav{row-gap:8px!important}
@media (min-width:700px){html:is(.pf-app,.pf-studio) :is(.dtool,.snbar) nav.apnav{row-gap:10px!important}}
/* 14. App: when the top bar slides away on scroll down, the page tool bar moves up with it (the old rule never matched,
       so the tool bar stayed 56px down with the page showing above it) */
html.pf-app body.hdhide .doc>.dtool{transform:translate3d(0,calc(-1 * (var(--mtop) + env(safe-area-inset-top))),0)!important}
/* 15. App and Studio crew profile: the first section heading (Voice) keeps the 32px new-section space, as the others do
       (it sometimes kept the desktop 18px) */
html:is(.pf-app,.pf-studio) .prof .aprof>h4{margin-top:32px!important}
@media (min-width:700px){html:is(.pf-app,.pf-studio) .prof .aprof>h4{margin-top:37px!important}}
/* 16. Account: the plan card with the "Your plan" tag on its border gets 1px more room under the tag (13px to 14px) */
.acpc:has(>.tag){padding-top:25px!important}
/* 17. Studio editor tool bar on phones and iPads: the Desktop / Tablet / Phone switch sits on one row and the tool buttons
       (Templates, Preview, Versions, Save, Confirm, Download) wrap onto the screen. They ran 46px off the right edge, and the
       switch was cut off on the left. Same buttons and order as the desktop. */
html.pf-studio .stool.snwork{display:flex!important;flex-wrap:wrap!important;align-items:center;gap:8px!important;padding:10px 16px!important;box-sizing:border-box}
html.pf-studio .stool.snwork>.sdevs{width:100%;justify-content:center!important;justify-self:auto!important}
html.pf-studio .stool.snwork>.sdevs nav{flex-wrap:nowrap!important;gap:6px!important;justify-content:center!important;margin-left:auto!important;margin-right:auto!important}
html.pf-studio .stool.snwork>.stb{width:100%;flex-wrap:wrap!important;justify-content:center!important;row-gap:8px!important;justify-self:auto!important}
/* 18. Studio panels (Going live and the other pinned panels): the header and the body on the 16px side line
       (the header was 18px left and 12px right, the body 20px and 18px) */
html.pf-studio .sover .sohd{padding-left:16px!important;padding-right:16px!important}
html.pf-studio .sover .sobody{padding-left:16px!important;padding-right:16px!important}
/* 19. Scaled previews fill their cards again: Studio Templates, App artifact cards and website engine previews. Rule 3 capped
       each scaled preview frame to the card width, so it showed a third (or a quarter) of the card and white space.
       The Templates window keeps the 16px side line. */
:is(.tthumb,.artthumb,.eng-pv) iframe{max-width:none!important}
html.pf-studio .modal .mbox{max-width:calc(100vw - 32px)!important;box-sizing:border-box}
/* 20. Academy Admin page tabs (Money, Marketing and the rest) wrap onto the screen like every other button row,
       instead of a sideways strip with the last tab cut off at the right edge */
html nav.ptabs{flex-wrap:wrap!important;overflow-x:visible!important;row-gap:8px!important}
@media (min-width:700px){html nav.ptabs{row-gap:10px!important}}
/* 21. Academy Admin Members: each tile group label (By plan and the rest) starts a new section, 32px below the tiles above
       (it was 12px) */
html nav.fcs+p.fch{margin-top:32px!important}
@media (min-width:700px){html nav.fcs+p.fch{margin-top:37px!important}}
/* 22. Analytics activity grid (Website, App, Academy, Studio, Demo rows): 4px between rows so each line reads on its own
       (it was 2px); the columns are unchanged */
html .hm{row-gap:6px!important;grid-template-columns:56px repeat(24,minmax(0,1fr))!important}
@media (min-width:600px){html body .hm{row-gap:8px!important}}
/* 23. Core admin Home, Arguta agents today: the Open Agent desk button sits 14px under the chips (16px on iPad); it was 10px */
html #ag-head>#ag-open{margin-top:4px!important}
@media (min-width:700px){html #ag-head>#ag-open{margin-top:6px!important}}
/* 24. Studio: no 18px dark band between the top bar and the page tool bar (the tool bar's desktop top margin) */
html.pf-studio .spanel>.stool:is(.stool,#_){margin-top:0!important}
/* 25. Studio pages on phones and iPads use the App's 16px side line (they kept the desktop 32px). This rule has no html
       prefix because Studio pages sit inside a shadow root, where arguta-mobile.js now adds this file too. */
.snd .din{padding-left:16px!important;padding-right:16px!important}
/* 26. Studio on phones: pages with no page chips (Business Brain, Build my website and the like) no longer show an empty
       58px tool bar under the top bar (its only content, the page name, is hidden on phones). iPads keep the page name. */
@media (max-width:699px){html.pf-studio .spanel>.stool:not(.snwork):not(:has(nav.apnav)){display:none!important}}
/* 27. Studio set-up windows (New project steps, Build my website): heading to text 14px, step label to heading 12px
       (14 on iPad), and the heading keeps clear of the close button */
.stwz-p h2{margin-bottom:14px!important;margin-right:44px!important}
.stwz-p .stwz-d{margin-bottom:12px!important}
.stwz-p .stwz-d+h2{margin-top:0!important}
@media (min-width:700px){.stwz-p h2{margin-bottom:16px!important}.stwz-p .stwz-d{margin-bottom:14px!important}}
/* 28. Studio Versions: each version card has 12px inside (it was 8px) */
ol.vlist>li{padding:12px!important}
/* 29. Account (App, Studio, Academy): 16px between "Your plan on the ..." and the tag on the plan card (18px on iPad) */
.acone{margin-top:25px!important}
@media (min-width:700px){.acone{margin-top:27px!important}}
/* 30. App and Studio ask box on phones: a smaller fixed panel above the bottom dock (it was about 183px tall), and while
       you type (keyboard open) the dock steps aside and the ask box sits on the keyboard, so the two never stack */
html:is(.pf-app,.pf-studio) body.in #page.ws .wsc{padding:8px 0 10px!important}
html:is(.pf-app,.pf-studio) .wsc .cmp textarea{min-height:44px!important}
html:is(.pf-app,.pf-studio) .wsc .cmp textarea:placeholder-shown{height:50px!important}
html:is(.pf-app,.pf-studio) body:has(.wsc textarea:focus) .dock{display:none!important}
html:is(.pf-app,.pf-studio) body.in:has(.wsc textarea:focus) #page.ws .wsc{bottom:0!important;padding-bottom:calc(10px + env(safe-area-inset-bottom))!important}
/* 31. Academy pages on the older page frame (Meet the crew and the like): the 16px side line (cards ran to the screen edge) */
html.pf-acad main.main>.cols>.col{padding-left:16px!important;padding-right:16px!important;box-sizing:border-box}
html.pf-acad main.main>.cols>.col>.stban{margin-left:0!important;margin-right:0!important}
/* 32. Academy Your agents: each agent card has 12px inside (it was 8px) */
.alist>.arow2{padding:12px!important}
/* 33. Small labels (plan pills, Soon pills) are at least 11px on phones and iPads */
:is(.plan,.lockpill){font-size:11px!important}
/* 34. Academy Account: on the 16px side line like the App (it sat at 18px) */
html.nl #center>.acmount:is(.acmount,#_){margin-left:-16px!important;margin-right:-16px!important}
/* 35. Academy Admin email previews fill the card width on phones and iPads (they stopped at 660px, so some looked thin) */
iframe[srcdoc][style*="max-width:660px"]{max-width:100%!important;width:100%!important}
/* 36. Analytics activity grid labels at least 11px */
.hm{font-size:11px!important}
/* 37. Agent screen and core admin footer: on phones and iPads it sits at the end of the page instead of sticking to the
       bottom of the screen, where its 330px panel covered the page */
footer.aft{position:static!important}
/* 38. Core admin customer lists: 22px between the filter bar and the first customer (25px on iPad) */
.cu-bar+.cu-list{margin-top:22px!important}
@media (min-width:700px){.cu-bar+.cu-list{margin-top:25px!important}}
/* 39. Studio tool bar: the page name bar on the 16px side line; wrapped tool buttons 10px apart on iPad */
html.pf-studio .stool .snbar{padding-left:16px!important;padding-right:16px!important}
@media (min-width:700px){html.pf-studio .stool.snwork>.stb{row-gap:10px!important}}
/* 40. Arguta Desk picture on the Apps page: the lines in its window keep 6px apart (7 on iPad) */
.ap-nb .in>*+*{margin-top:6px!important}
@media (min-width:700px){.ap-nb .in>*+*{margin-top:7px!important}}
/* 41. Course pages shown inside the Academy (programme pages): no extra 8px edge (the Academy already gives the 16px
       side line), and small labels at least 11px on phones and iPads */
html.embed body{margin-left:0!important;margin-right:0!important}
/* 42. My licence, Downloads per file: the opened list uses the full card width (on iPad it was squeezed into 32px) */
.acrow>.acrb{flex:1 1 100%!important;width:100%!important;min-width:0}
/* 43. Phones and iPads stay dark: no Light button on course pages and the Academy Admin */
button#skin.skin,#skin[aria-label*="light"]{display:none!important}
/* 44. Small gaps to the standard: server status rows 6px (7 iPad); form labels 6px above their field; iPad: Studio tool
       bar rows 10px, core admin agent chips 7px under their label, footer text 16px under Back to top */
.stile{row-gap:6px!important}
form label.l{margin-bottom:6px!important}
@media (min-width:700px){
.stile{row-gap:7px!important}
form label.l{margin-bottom:7px!important}
html.pf-studio .stool.snwork{row-gap:10px!important}
footer.aft .aft-b{gap:16px!important}
#ag-head>div:first-child{gap:7px!important}
}
/* 45. Form button rows 14px under the last field; Links page cards 12px apart on iPad */
form .btnrow{margin-top:14px!important}
@media (min-width:700px){main.lk a.lk-b{margin-bottom:12px!important}}
/* 46. Core admin and Academy Admin phone menus: the App, Studio, Academy, Website row (and My agent screen, Demo) at the top,
       A A A and Sign out above the small print, as on the App, Studio and Academy; the old Arguta block is hidden */
html.pf-adm #side>.mset{display:none!important}
html.pf-adm #side>:is(.mx-links,.mx-set){display:flex!important}
html.pf-adm #side>.mx-links2{margin-top:12px!important}
html.pf-adm #side .mx-ts button.on{background:#1b1229!important;color:#f3eaff!important;border-color:#F7931A!important}
/* 47. Text size A A A on phones and iPads: the Academy Admin page (and Academy pages on the older frame) now follow small,
       standard and large like every other platform (its page area was missing from the list, so it always showed standard) */
html main.main:not(:is(#page,#center,.a-main,.spanel,#agMain,.stage>.doc,main.stage) *){zoom:1}
html[data-ts=s] main.main:not(:is(#page,#center,.a-main,.spanel,#agMain,.stage>.doc,main.stage) *){zoom:.9}
html[data-ts=l] main.main:not(:is(#page,#center,.a-main,.spanel,#agMain,.stage>.doc,main.stage) *){zoom:1.1}
html[data-ts] main.main #center{zoom:1!important}
/* 48. Core admin: the page area follows A A A on phones and iPads too (a desktop rule held it at standard) */
html[data-ts=s].pf-core #adm .a-main:is(.a-main,#_){zoom:.9!important}
html[data-ts=l].pf-core #adm .a-main:is(.a-main,#_){zoom:1.1!important}
/* 49. Studio page chips centred on iPads and phones, as on the App and Academy (the page name pushed them off centre) */
html.pf-studio .snbar:has(nav.apnav)>.by{display:none!important}
html.pf-studio .snbar:has(nav.apnav)>nav.apnav{grid-column:1/-1!important;justify-self:center!important;margin-left:auto!important;margin-right:auto!important}
/* 50. Admin phone menus match the Academy menu exactly: same panel width, same link buttons, a Back button in its own section with a divider under it, same A A A row gap, no extra space above the footer; App and Studio footer keep the gap between the two divider lines */
html.pf-adm #adm #side:is(.a-nav,#_),html.pf-adm body #side:is(#side,#_){width:min(90vw,348px)!important;max-width:none!important}
html.pf-adm header.top{z-index:90!important}
html.pf-adm #side>.mx-set{gap:8px 6px!important}
html.pf-adm #side>.mx-set .mx-ts button{padding:0!important}
html.pf-adm #side>.mx-set+.lfoot:is(.lfoot,#_){margin-top:0!important}
html.pf-adm:not(.pf-core) #side>.feedbtn:is(.feedbtn,#_){margin:12px 0 0!important}
html.pf-adm:not(.pf-core) #side>.feedbtn+.mset+.grp:is(.grp,#_),html.pf-adm:not(.pf-core) #side>.feedbtn+.grp:is(.grp,#_){margin-top:12px!important;padding-top:12px!important;border-top:1px solid #2a1f3d!important}
html.pf-core #side>.nlpnl.nlfirst:is(.nlpnl,#_){display:block!important;height:auto!important;min-height:0!important;padding:0!important;margin:0!important}
html.pf-core #side>.nlpnl.nlfirst .feedbtn:is(.feedbtn,#_){margin:12px 0 0!important;width:100%!important}
html.pf-core #side>.nlpnl.nlfirst~.nlpnl>.grp.nltools:is(.grp,#_){margin-top:12px!important}
html:is(.pf-app,.pf-studio) body .mnav .mn-in>.mleft-foot:is(.mleft-foot,#_){padding-top:10px!important}
/* 51. Admin menus: the menu button turns into a cross while the menu is open, as on the Academy, App and Studio; core A A A letters stepped 11/13/15 like the Academy; core second link row keeps natural button widths */
html.pf-adm body:has(#side.open) header.top .burger{position:relative!important}
html.pf-adm body:has(#side.open) header.top .burger>svg{visibility:hidden!important}
html.pf-adm body:has(#side.open) header.top .burger::before,html.pf-adm body:has(#side.open) header.top .burger::after{content:""!important;position:absolute!important;left:50%!important;top:50%!important;width:20px!important;height:2px!important;margin:-1px 0 0 -10px!important;border-radius:2px!important;background:#f3eaff!important}
html.pf-adm body:has(#side.open) header.top .burger::before{transform:rotate(45deg)!important}
html.pf-adm body:has(#side.open) header.top .burger::after{transform:rotate(-45deg)!important}
html.pf-adm #side>.mx-set .mx-ts button:is(button,#_){font-weight:500!important}
html.pf-adm #side>.mx-set .mx-ts button[data-mts=s]:is(button,#_){font-size:11px!important}
html.pf-adm #side>.mx-set .mx-ts button[data-mts=m]:is(button,#_){font-size:13px!important}
html.pf-adm #side>.mx-set .mx-ts button[data-mts=l]:is(button,#_){font-size:15px!important}
html.pf-adm #side>.mx-links2 .mx-b:is(.mx-b,#_){flex:0 0 auto!important}
html:is(.pf-app,.pf-studio) body .mnav .mn-in>.mleft-foot:is(.mleft-foot,#_){margin-top:-2px!important}
/* 52. Academy Admin menu items and group titles match the Academy menu: 31px rows, 13px text, same colour, titles flush left */
html.pf-adm:not(.pf-core) #side>a.sp:is(.sp,#_){height:31px!important;min-height:31px!important;font-size:13px!important;color:#f3eaff!important}
html.pf-adm:not(.pf-core) #side>.grp:is(.grp,#_){padding-left:0!important;padding-right:0!important;font-size:13px!important;font-weight:700!important;margin-bottom:6px!important}
html.pf-adm:not(.pf-core) #side>.sp+.grp:is(.grp,#_){margin-top:14px!important;padding-top:12px!important;border-top:1px solid #2a1f3d!important}
@media (min-width:600px){html.pf-adm #side>.mx-set:is(.mx-set,#_){gap:10px 6px!important}}
/* 53. Studio editor tool rows centred (were left-aligned with a wide right gap); a page name shown alone in the Studio bar is centred too */
html.pf-studio .snbar:not(:has(nav.apnav))>*{grid-row:1!important;grid-column:1/-1!important}
html.pf-studio .snbar:not(:has(nav.apnav))>.by{justify-self:center!important;text-align:center!important;position:relative!important;z-index:1!important}
/* 54. Boxed tool rows in every phone menu sit 8px apart (Academy, App and Studio had 12, core had 4); the Academy Admin active row gets the same violet outline as every other menu */
:is(#side .mtools,.mnav .mleft-g.boxed)>:is(.sp,.mleft-i):is([class],#_){margin-bottom:0!important}
html.pf-core #adm #side.open .nlpnl>.sp.nltool:is(.sp,#_){margin:0 0 8px!important}
html.pf-adm:not(.pf-core) #side>a.sp.on:is(.sp,#_){border:1px solid #8b5cf6!important;background:#24183a!important;font-weight:400!important;box-sizing:border-box!important}
html.pf-adm:not(.pf-core) #side>a.sp:not(.on):is(.sp,#_){border:1px solid transparent!important;box-sizing:border-box!important}
html.nl body #side.open #sidenav .mtools>.sp:is(.sp,#_){margin-bottom:0!important}
/* 55. Academy Feed, Intro, My workspace and Plans cards run to the same 16px side line as Business Brain and the other pages (the inner .din added a second 16px) */
:host(.nlpx) .doc.nlacp>.din,:host(.nlhost) .doc.nlapp>.din{padding-left:0!important;padding-right:0!important}
/* 56. Remaining audit gaps: My licence label and button rows, course lesson rows and crew table, Academy Admin chips and form buttons on iPad */
.acc>.k+.acv:is(.acv,#_){display:block!important;margin-top:10px!important}
.acc .acb:is(.acb,#_){margin-top:16px!important;margin-bottom:16px!important}
details.acrow:is(.acrow,#_){display:block!important}
.les .row:is(.row,#_){row-gap:8px!important}
th.rowh:is(.rowh,#_){padding-top:4px!important;padding-bottom:4px!important}
@media (min-width:600px){header>.chips:is(.chips,#_){row-gap:10px!important}
.mainin form.f:is(.f,#_){row-gap:10px!important}}
/* 57. The Arguta chat panel under the page (App, Studio, Academy) keeps the 16px side line like the page above it (was 14px) */
aside.right>.tab:is(.tab,#_){padding-left:16px!important;padding-right:16px!important}
/* 58. Phone and iPad menu: Your jobs and Your artifacts are one tidy line each (long titles end in ...); Your crew shows faces and roles in its groups, one group open at a time */
.mnav .mleft-one>.mleft-i:is(.mleft-i,#_){display:block!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;min-height:31px!important;line-height:29px!important;padding:0 8px!important}
.mnav .mcrewg>.mleft-h em{font-style:normal;font-weight:400;color:#a99cc8;margin-left:6px}
.mnav .mcg{border-top:1px solid #2a1f3d}
.mnav .mcg:last-child{border-bottom:1px solid #2a1f3d}
.mnav .mcg-h:is(button,#_){all:unset;box-sizing:border-box;display:flex!important;align-items:center;gap:8px;width:100%;min-height:40px;padding:0 8px!important;cursor:pointer;font:500 11px/1 "Geist Mono",ui-monospace,Menlo,monospace!important;letter-spacing:.12em;text-transform:uppercase;color:#F7931A!important}
.mnav .mcg-h em{font-style:normal;color:#a99cc8;letter-spacing:0;font-family:Geist,system-ui,sans-serif}
.mnav .mcg-h i{margin-left:auto;width:8px;height:8px;border-right:1.5px solid #a99cc8;border-bottom:1.5px solid #a99cc8;transform:rotate(45deg);transition:transform .2s}
.mnav .mcg.open .mcg-h i{transform:rotate(-135deg)}
.mnav .mcg:not(.open)>.mcg-b{display:none!important}
.mnav .mcg-b{display:grid;gap:4px;padding:0 0 10px}
.mnav .mcrew:is(.mleft-i,#_){display:flex!important;align-items:center;justify-content:flex-start!important;gap:10px;min-height:46px!important;padding:6px 8px!important;white-space:normal!important}
.mnav .mcrew img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:0 0 32px;border:1px solid #3d2f57}
.mnav .mcrew span{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left}
.mnav .mcrew b{font:600 13px/1.25 Geist,system-ui,sans-serif;color:#f3eaff}
.mnav .mcrew small{font:400 11px/1.3 Geist,system-ui,sans-serif;color:#a99cc8}
/* 59. iPad view (touch screens 861 to 1400 wide): the phone layout with the menu, plus App, Studio, Academy, Website, Sign out and Admin kept in the top bar, as on the desktop */
@media (min-width:861px){
html.pf-app header.top>.acts:is(.acts,#_){display:flex!important;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto}
html.pf-app header.top>.acts>:is(.pick,.state,.curs,.tsz):is(*,#_){display:none!important}
html.pf-app header.top>.acts:is(.acts,#_){grid-column:-2/-1!important;justify-self:end!important;margin-right:0!important}
html.pf-app header.top>.acts:is(.acts,#_) a:not(#adm) button::after{display:inline-block!important}
html.pf-app header.top>.mtopb:is(.mtopb,#_){display:none!important}
}
/* 60. Currency (£ GBP / $ USD) on its own line at the top of the A A A section, in the same button style */
:is(.mnav,#side) .mx-set:has(>.mx-cur):is(.mx-set,#_){flex-wrap:wrap!important;row-gap:12px!important}
:is(.mnav,#side) .mx-set>.mx-cur{display:flex;gap:6px;flex:1 1 100%}
:is(.mnav,#side) .mx-set>.mx-cur button{all:unset;box-sizing:border-box;height:30px;padding:0 12px;border:1px solid #3d2f57;border-radius:10px;background:#1b1229;color:#f3eaff;font:600 12.5px Geist,system-ui,sans-serif;cursor:pointer;display:inline-flex;align-items:center}
:is(.mnav,#side) .mx-set>.mx-cur button.on{background:#7c3aed;border-color:#7c3aed;color:#fff}
/* 61. Your artifacts and Your jobs links: lighter grey, normal weight, one line ending in ..., so they read as links under the white headings; Bin is quieter, with a bin icon */
.mnav .mleft-one>.mleft-i:is(.mleft-i,#_){color:#c4b8e0!important;font-weight:400!important;font-size:12.5px!important}
.mnav .mleft-one>.mleft-i.mleft-bin:is(.mleft-i,#_){display:flex!important;align-items:center;justify-content:flex-start!important;gap:8px;color:#8f84ab!important;font-size:12.5px!important;margin-top:4px}
.mnav .mleft-one>.mleft-i.mleft-bin::before{content:"";width:17px;height:17px;flex:0 0 17px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14'/%3E%3C/svg%3E") center/contain no-repeat}
/* 62. Menu section titles carry the desktop's small guide words on the right (pages you keep, saved like chats, tap to choose) */
.mnav .mleft-h:has(>.mleft-hint):is(.mleft-h,#_){display:flex!important;align-items:baseline;justify-content:space-between;gap:12px}
.mnav .mleft-hint{font:400 11px/1.3 Geist,system-ui,sans-serif;color:#a99cc8;white-space:nowrap}
/* 63. Bottom dock (phone and iPad, every product): the Arguta orb sits half over the dock's top line with clear space above its name; her mark is larger; the other icons are white, lighter and a touch smaller; labels lighter weight */
:is(nav.dock,nav.gdock) .dorb i:is(i,#_){top:-27px!important;width:54px!important;height:54px!important;margin-left:-27px!important}
:is(nav.dock,nav.gdock) .dorb i svg:is(svg,#_){width:28px!important;height:28px!important}
:is(nav.dock,nav.gdock)>button:not(.dorb) svg:is(svg,#_){width:18px!important;height:18px!important;stroke-width:1.5!important;color:#fff!important;stroke:#fff!important}
:is(nav.dock,nav.gdock)>button:is(button,#_){font-weight:400!important;color:#efe9fb!important}
:is(nav.dock,nav.gdock)>button.on:is(button,#_){color:#fff!important}
/* 64. iPad top bar: a little taller, with slightly shorter buttons so Admin has clear space above and below */
@media (min-width:861px){
html.pf-app header.top:is(.top,#_){height:58px!important;min-height:58px!important}
html.pf-app header.top>.acts:is(.acts,#_) :is(a>button,#out,#adm,#adm>button){height:34px!important;min-height:34px!important;padding-top:0!important;padding-bottom:0!important;display:inline-flex!important;align-items:center}
}
/* 65. Job and artifact titles stop at about three quarters of the menu width, with a clear ... after a small space */
.mnav .mleft-one>.mleft-i:not(.mleft-bin)>.mlt{display:inline-block;max-width:75%;overflow:hidden;white-space:nowrap;vertical-align:top}
.mnav .mleft-one>.mleft-i:not(.mleft-bin)>.mld{display:inline-block;margin-left:3px;font-size:15px;letter-spacing:1px;color:#c4b8e0;vertical-align:top}
/* 66. iPad: the App's six task cards sit in a three-column grid (as on the desktop) with the larger faces; phones keep the single column and small faces */
@media (min-width:861px){
html.pf-app .ex:is(.ex,#_){grid-template-columns:repeat(3,minmax(0,1fr))!important}
html.pf-app .exc:is(.exc,#_){grid-template-columns:80px 1fr!important;column-gap:14px!important;padding:14px!important}
html.pf-app .exc img:is(img,#_){width:80px!important;height:80px!important;border-width:1px!important}
}
/* 67. App Intro pages (Home, Arguta OS, Meet Arguta, Plans...): the last card clears the bottom dock, so the page scrolls right to the end */
html.pf-app .doc:not(.ws):is(.doc,#_){padding-bottom:calc(96px + env(safe-area-inset-bottom))!important}
/* 68. iPad view, Academy and Academy Admin: one full-width column (the hidden right panel no longer keeps a 300px gap) */
@media (min-width:861px){html:is(.pf-acad,.pf-adm) main.main>.cols:is(.cols,#_){grid-template-columns:minmax(0,1fr)!important;max-width:none!important}}
/* 69. Bottom dock (every product): no bar over the active item */
:is(nav.dock,nav.gdock) button.on:is(button,#_)::before{display:none!important}
/* 70. iPad top bar: the six buttons are one width (104px) and 38px tall, text centred */
@media (min-width:861px){
html.pf-app header.top>.acts:is(.acts,#_) :is(a>button,#out,#adm>button,a#adm){height:38px!important;min-height:38px!important;min-width:104px!important;justify-content:center!important;box-sizing:border-box}
}
/* 71. Ask boxes on phone and iPad (App and Studio workspace, and Arguta): one compact line with the microphone and send buttons inside on the right; it grows as you type (up to 5 lines); 16px text so the iPhone does not zoom in; the hint line shows only while listening */
html:is(.pf-app,.pf-studio) :is(form#cform.cmp,form.ag-ask):is(form,#_){display:grid!important;grid-template-columns:minmax(0,1fr) auto auto!important;align-items:end!important;column-gap:8px!important;row-gap:4px!important;padding:6px 6px 6px 14px!important;min-height:0!important;height:auto!important}
html:is(.pf-app,.pf-studio) :is(form#cform .cbar,form.ag-ask .askb):is(div,#_){display:contents!important}
html:is(.pf-app,.pf-studio) :is(form#cform,form.ag-ask) textarea:is(textarea,#_):is(textarea,#_){grid-column:1!important;grid-row:1!important;font-size:16px!important;line-height:20px!important;min-height:40px!important;height:40px;max-height:120px!important;padding:10px 0!important;margin:0!important;resize:none!important;overflow-y:auto}
html:is(.pf-app,.pf-studio) :is(form#cform,form.ag-ask) textarea:placeholder-shown:is(textarea,#_):is(textarea,#_){height:40px!important}
html:is(.pf-app,.pf-studio) :is(form#cform,form.ag-ask) :is(.cmic,.csend,.ag-speak,.ag-go):is(button,#_){grid-row:1!important;width:40px!important;height:40px!important;min-width:40px!important;padding:0!important;margin:0!important;align-self:end;display:inline-flex!important;align-items:center;justify-content:center}
html:is(.pf-app,.pf-studio) form#cform .cmic:is(button,#_){grid-column:2!important}
html:is(.pf-app,.pf-studio) form#cform .csend:is(button,#_){grid-column:3!important}
html:is(.pf-app,.pf-studio) form.ag-ask .ag-speak:is(button,#_){grid-column:2!important;font-size:0!important;color:#fff}
html:is(.pf-app,.pf-studio) form.ag-ask .ag-speak:is(button,#_)::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center/contain no-repeat}
html:is(.pf-app,.pf-studio) form.ag-ask .ag-go:is(button,#_){grid-column:3!important;font-size:0!important;color:#fff}
html:is(.pf-app,.pf-studio) form.ag-ask .ag-go:is(button,#_)::before{content:"";width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center/contain no-repeat}
html:is(.pf-app,.pf-studio) :is(form#cform,form.ag-ask) small.hint:is(small,#_){display:none!important}
html:is(.pf-app,.pf-studio) :is(form#cform,form.ag-ask) :is(.cbar,.askb):is(div,#_):is(div,#_)::before{display:none!important}
html:is(.pf-app,.pf-studio) :is(form#cform.talking,form.ag-ask.talking) small.hint:is(small,#_){display:block!important;grid-column:1 / -1!important;grid-row:2!important;font-size:12px!important;margin:0 0 2px!important}
html:is(.pf-app,.pf-studio) body.in #page.ws .wsc:is(.wsc,#_){padding:6px 0 8px!important}
@media (min-width:861px){html:is(.pf-app,.pf-studio) .wsc>.wsi:is(.wsi,#_){max-width:760px!important;margin-left:auto!important;margin-right:auto!important}}
/* 72. Arguta on phone and iPad (App and Studio): one clean full screen. No grab handle or Arguta tab bar; one top row (Arguta, settings, Clear chat, Done); a smaller orb; the chat fills the middle; the shortcuts sit on one line you can swipe; the ask box sits at the bottom. On iPad the content keeps to a 760px column */
html:is(.pf-app,.pf-studio) aside.right.open:is(aside,#_)>:is(.mhandle,.tabs){display:none!important}
html:is(.pf-app,.pf-studio) aside.right.open:is(aside,#_){top:0!important;bottom:0!important;height:auto!important;max-height:none!important;border-radius:0!important;z-index:95!important}
html:is(.pf-app,.pf-studio) aside.right.open>.tab:is(.tab,#_){position:absolute!important;inset:0!important;height:auto!important;display:flex!important;flex-direction:column!important;gap:10px!important;padding:calc(10px + env(safe-area-inset-top)) 16px calc(10px + env(safe-area-inset-bottom))!important;overflow:hidden!important;box-sizing:border-box}
html:is(.pf-app,.pf-studio) aside.right.open>.tab>*{flex:0 0 auto;width:100%;max-width:760px;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}
html:is(.pf-app,.pf-studio) aside.right.open>.tab>.ag-head:is(div,#_){max-width:none;min-height:40px;margin:0!important}
html:is(.pf-app,.pf-studio) aside.right.open>.tab>.aorb:is(div,#_){padding:4px 0 0!important;margin-top:0!important;height:auto!important;min-height:0!important}
html:is(.pf-app,.pf-studio) aside.right.open>.tab>.aorb canvas:is(canvas,#_){width:150px!important;height:150px!important;margin:0 auto!important}
html:is(.pf-app,.pf-studio) aside.right.open>.tab>:is(#msgs,.chat):is(div,#_){flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch}
html:is(.pf-app,.pf-studio) aside.right.open>.tab>:is(#qs,.sugs):is(div,#_){display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:8px!important;padding:0 0 2px!important;scrollbar-width:none}
html:is(.pf-app,.pf-studio) aside.right.open>.tab>.sugs::-webkit-scrollbar{display:none}
html:is(.pf-app,.pf-studio) aside.right.open>.tab>.sugs>button{flex:0 0 auto!important;white-space:nowrap!important;margin:0!important}
@media (min-width:861px){html:is(.pf-app,.pf-studio) aside.right.open>.tab>.aorb canvas:is(canvas,#_){width:190px!important;height:190px!important}}
/* 73. While you type on a phone or iPad, the bottom dock steps aside and the ask box (or Arguta's full screen) sits right on the keyboard, with the top bar still in view */
html.kbtype:is(.pf-app,.pf-studio) :is(nav.dock,nav.gdock):is(nav,#_){display:none!important}
html.kbtype:is(.pf-app,.pf-studio) body.in #page.ws .wsc:is(.wsc,#_){bottom:var(--kbo,0px)!important;padding-bottom:8px!important}
html.kbtype:is(.pf-app,.pf-studio) aside.right.open:is(aside,#_){top:var(--vvt,0px)!important;bottom:auto!important;height:var(--vvh,100%)!important}
html.kbtype:is(.pf-app,.pf-studio) aside.right.open>.tab>.aorb:is(div,#_){display:none!important}
html.kbtype:is(.pf-app,.pf-studio) header.top:is(header,#_){transform:translateY(var(--vvt,0px))}
html:is(.pf-app,.pf-studio) aside.right.open>.tab>:is(form.ag-ask,.chat,.sugs,.aorb):is(*,#_):is(*,#_){max-width:760px!important;margin-left:auto!important;margin-right:auto!important;width:100%!important}
/* v18o (Richard, 12 Nov 2026 21:20): rules 74 to 79 are phone only. On the iPad view (861 to 1400 touch) they changed the App and Studio pages; the iPad goes back to how it was in v18m. */
@media (max-width:860px){
/* 74. App Intro pages (Home, Arguta OS, Meet Arguta, Meet the crew, Plans, About us, Questions) on phone and iPad, following the Meet the crew page:
   the page menu sits flush under the top bar (no gap showing the page behind), on a solid bar; on phones it is one line you can swipe, not three rows;
   it moves up with the top bar when that slides away; 20px more space before the first heading; portraits centred at one width (298px) on phones;
   button pairs stacked full width on phones (side by side on iPad); a clear 48px between the last content and Arguta's orb */
html.pf-app #page.doc:not(.ws):is(.doc,#_){padding-top:calc(48px + var(--subh,59px))!important;padding-bottom:calc(130px + env(safe-area-inset-bottom))!important}
html.pf-app header.top:is(header,#_){background:#140d1f!important}
html.pf-app .doc:not(.ws)>.dtool.hs:is(.dtool,#_){position:fixed!important;top:48px!important;left:0!important;right:0!important;z-index:65!important;background:#140d1f!important;margin:0!important;border-bottom:1px solid rgba(255,255,255,.06)!important;box-sizing:border-box;transition:top .4s cubic-bezier(.22,.61,.36,1)}
html.pf-app.hdup .doc:not(.ws)>.dtool.hs:is(.dtool,#_){top:0!important}
html.pf-app .doc:not(.ws)>.dtool.hs+*{margin-top:20px!important}
html.pf-app .doc:not(.ws)>.dtool.hs:is(.dtool,#_){padding:8px 0!important}
html.pf-app .doc:not(.ws)>.dtool.hs>.by{display:none!important}
html.pf-app .doc:not(.ws)>.dtool.hs nav.apnav:is(nav,#_){flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto!important;scrollbar-width:none;padding:0 16px!important;gap:6px!important;width:100%!important;max-width:none!important;box-sizing:border-box;scroll-padding:0 16px;margin:0!important}
html.pf-app .doc:not(.ws)>.dtool.hs nav.apnav::-webkit-scrollbar{display:none}
html.pf-app .doc:not(.ws)>.dtool.hs nav.apnav>button{flex:0 0 auto!important;white-space:nowrap!important}
html.pf-app .doc:not(.ws) :is(.hx-card,img.arghero,.crh):is(*,#_){width:min(100%,298px)!important;max-width:298px!important;margin-left:auto!important;margin-right:auto!important}
html.pf-app .doc:not(.ws) .row:has(>:is(a,button)):not(:has(>:not(a,button))):is(.row,#_){flex-direction:column!important;align-items:stretch!important;gap:10px!important}
html.pf-app .doc:not(.ws) .row:has(>:is(a,button)):not(:has(>:not(a,button)))>*{width:100%!important;max-width:none!important;justify-content:center!important;text-align:center!important;margin:0!important;box-sizing:border-box}
/* 75. "Jobs people start with" (App Home): faces the same size as the workspace task cards, framed so the head shows */
html.pf-app .doc .ej:is(.ej,#_){grid-template-columns:56px 1fr!important;column-gap:14px!important}
html.pf-app .doc .ej img:is(img,#_){width:56px!important;height:56px!important;border-width:1px!important;grid-row:1}
html.pf-app .doc .ej>span:is(span,#_){grid-column:1 / -1!important}
/* 76. Crew profile on iPad: the big portrait keeps to 360px (it filled the whole width) */
/* 77. Workspace ask box (phone and iPad): the bottom toolbar grows to hold it. The box sits 12px above the top of Arguta's orb, on the toolbar's own colour, so nothing overlaps */
html.pf-app body.in #page.ws .wsc:is(.wsc,#_){bottom:calc(58px + env(safe-area-inset-bottom))!important;padding:8px 0 39px!important;background:#140d1f!important;border-top:1px solid rgba(255,255,255,.06)!important;box-shadow:none!important}
html.pf-app :is(nav.dock):is(nav,#_){border-top:0!important}
html.pf-app body.in #page.ws .wsl:is(.wsl,#_){padding-bottom:calc(170px + env(safe-area-inset-bottom))!important}
/* 78. App Intro pages on phones: one format, centred. The opening block of every page (label, heading, lines under it, chips) is centred like the sections below it */
html.pf-app .doc:not(.ws) :is(.hx-l,.argtxt,.crh>div:not([class]),.about2>div:not([class])):is(div,#_){text-align:center!important;align-items:center!important}
html.pf-app .doc:not(.ws) :is(.hx-l,.argtxt,.crh>div:not([class]),.about2>div:not([class])) :is(.k,.kick,h1,h2,p){text-align:center!important;margin-left:auto!important;margin-right:auto!important}
html.pf-app .doc:not(.ws) :is(.hx-l,.argtxt,.crh>div:not([class]),.about2>div:not([class])) :is(.chips,.pills,.tags,div:has(>span+span)):not(.row){justify-content:center!important}
/* 79. Numbered steps (How the crew works, Proof of work and the like), phone and iPad: the number on the left, the title on the same line beside it, the text indented under the title */
html.pf-app .doc :is(.pow .pwc,.crflow>div):is(div,#_){display:grid!important;grid-template-columns:28px minmax(0,1fr)!important;column-gap:12px!important;row-gap:6px!important;align-items:center!important}
html.pf-app .doc :is(.pow .pwc,.crflow>div)>i:is(i,#_){grid-column:1!important;grid-row:1!important;margin:0!important;align-self:center!important}
html.pf-app .doc :is(.pow .pwc,.crflow>div)>b:is(b,#_){grid-column:2!important;grid-row:1!important;margin:0!important;align-self:center!important}
html.pf-app .doc :is(.pow .pwc,.crflow>div)>span:is(span,#_){grid-column:2!important;grid-row:2!important;margin:0!important;align-self:start!important}
}
/* 80. v18x phone rebuild (Richard, 12 Nov 2026, agreed on the "Arguta Phone Chat Options" page). Phones only (up to 860px wide); the iPad view and the computer are untouched.
   The bottom dock goes on every product except the agent console (its Audit recorder lives there). In its place one slim ask bar: a 50px rounded box,
   mic and send as 36px rounded squares, 16px text so the iPhone does not zoom. Tapping it opens Arguta full screen. On the App workspace the crew box
   ("Ask your crew anything") is the bar and keeps sending jobs to the crew, with Arguta one tap away in the top bar. */
@media (max-width:860px){
html:not(.pf-agt) :is(nav.dock,.gdock):is(nav,#_):is(nav,#_){display:none!important}
.argbar{position:fixed;left:0;right:0;bottom:0;z-index:66;padding:8px 12px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(rgba(11,7,17,0),#0b0711 26%);box-sizing:border-box}
.argbar[hidden]{display:none!important}
.argbar .ab-f{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:6px;width:100%;min-height:50px;padding:0 7px 0 16px;border-radius:14px;border:1px solid #33264f;background:#1a1228;color:#a99cc8;font:400 16px/1.2 Geist,system-ui,-apple-system,sans-serif;cursor:text;-webkit-tap-highlight-color:transparent;box-shadow:0 4px 18px rgba(0,0,0,.35)}
.argbar .ab-t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.argbar :is(.ab-mic,.ab-snd){flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
.argbar .ab-mic{border:1px solid #3a2c58;color:#d8cdef}
.argbar .ab-snd{background:#3a2c58;color:#a99cc8}
.argbar svg{width:18px;height:18px}
.hdarg{all:unset;box-sizing:border-box;width:34px;height:34px;border-radius:10px;display:inline-grid;place-items:center;border:1px solid #3a2c58;background:#1a1228;margin-left:8px;cursor:pointer;flex:none}
.hdarg svg{width:20px;height:20px}
.hdarg[hidden]{display:none!important}
html.pf-app body.in #page.ws .wsc:is(.wsc,#_):is(.wsc,#_){bottom:0!important;padding:8px 12px calc(10px + env(safe-area-inset-bottom))!important;background:linear-gradient(rgba(11,7,17,0),#0b0711 26%)!important;border-top:0!important}
html.pf-app body.in #page.ws .wsc form#cform:is(form,#_){min-height:50px!important;border-radius:14px!important;padding:0 7px 0 16px!important;align-items:center!important}
html.pf-app body.in #page.ws .wsc form#cform textarea:is(textarea,#_){font-size:16px!important;min-height:24px!important;padding:13px 0!important}
html.pf-app body.in #page.ws .wsc form#cform :is(button):is(button,#_){width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;border-radius:10px!important;padding:0!important}
html.pf-app body.in #page.ws .wsl:is(.wsl,#_):is(.wsl,#_){padding-bottom:calc(96px + env(safe-area-inset-bottom))!important}
}
/* 81. v18x Arguta full screen on the Academy and both admins (phones only), the same as the App: solid page, top row with the Arguta mark and name,
   cog, Clear chat and Exit chat; her orb at the App size with the greeting under it and the shortcuts under that; messages build up from the bottom;
   once you have said something the greeting and shortcuts give way and the orb stays at the top; the ask box is the slim bar (mic and send 36px). */
@media (max-width:860px){
html:not(.pf-agt) aside#agPanel.ag-panel.open:is(aside,#_):is(aside,#_){position:fixed!important;inset:0!important;width:auto!important;height:auto!important;max-height:none!important;border-radius:0!important;border:0!important;margin:0!important;transform:none!important;z-index:95!important;display:flex!important;flex-direction:column!important;background:#0b0711 radial-gradient(circle at 50% 0%,rgba(124,58,237,.22),transparent 55%)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding:env(safe-area-inset-top) 0 0!important;box-shadow:none!important;overflow:hidden!important}
html:not(.pf-agt) #agPanel.open>.ag-head:is(div,#_){flex:none!important;order:0;height:50px!important;min-height:50px!important;display:flex!important;align-items:center!important;gap:8px!important;padding:0 14px 0 16px!important;margin:0!important;border-bottom:1px solid #2a1f3d!important;box-sizing:border-box}
html:not(.pf-agt) #agPanel.open>.ag-head>.ag-wm:is(img,#_){display:none!important}
html:not(.pf-agt) #agPanel.open>.ag-head::before{content:"";flex:none;width:24px;height:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='60 60 240 240'%3E%3Cg fill='none' stroke='%23f3eaff' stroke-width='16' stroke-linecap='round'%3E%3Cpath d='M72 128V72h56M232 72h56v56M72 232v56h56M232 288h56v-56'/%3E%3C/g%3E%3Cpath d='M130 236 180 116l50 120' fill='none' stroke='%23a35bff' stroke-width='22' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
html:not(.pf-agt) #agPanel.open>.ag-head::after{content:"Arguta";order:1;flex:1;font:500 16px/1 Geist,system-ui,sans-serif;color:#f3eaff}
html:not(.pf-agt) #agPanel.open>.ag-head>.ag-ctl:is(div,#_){order:2;display:flex!important;gap:6px!important;margin:0!important;flex:none}
html:not(.pf-agt) #agPanel.open>.ag-head>.ag-ctl>.ag-tb:is(button,#_){height:32px!important;min-height:32px!important;padding:0 11px!important;border-radius:9px!important;font:500 13px/1 Geist,system-ui,sans-serif!important;border:1px solid #3a2c58!important;background:transparent!important;color:#e6dcf7!important;width:auto!important;white-space:nowrap!important}
html:not(.pf-agt) #agPanel.open>.ag-head>.ag-ctl>.ag-gear:is(button,#_){width:32px!important;padding:0!important;display:grid!important;place-items:center!important}
html:not(.pf-agt) #agPanel.open>.ag-head>.ag-ctl>.ag-gear svg{width:17px!important;height:17px!important}
html:not(.pf-agt) #agPanel.open>.ag-orbwrap:is(div,#_){order:1;flex:none!important;display:flex!important;flex-direction:column!important;align-items:center!important;padding:22px 16px 0!important;margin:0!important;height:auto!important;min-height:0!important;gap:0!important}
html:not(.pf-agt) #agPanel.open>.ag-orbwrap>canvas:is(canvas,#_){width:150px!important;height:150px!important;margin:0 auto -10px!important;position:static!important}
html:not(.pf-agt) #agPanel.open>.ag-orbwrap>.ahi:is(b,#_){display:block!important;font:600 19px/1.3 Poppins,Geist,sans-serif!important;color:#f3eaff!important;margin:6px 0 0!important;text-align:center}
html:not(.pf-agt) #agPanel.open>.ag-orbwrap>.ag-state:is(div,#_){font-size:13px!important;color:#a99cc8!important;margin:2px 0 0!important;text-align:center}
html:not(.pf-agt) #agPanel.open>.ag-orbwrap>.ag-gauge:is(div,#_){font-size:11px!important;color:#7d7199!important;margin:2px 0 0!important}
html:not(.pf-agt) #agPanel.open>.ag-chips:is(div,#_){order:2;flex:none!important;display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:7px!important;padding:16px 16px 0!important;margin:0!important;max-height:none!important;overflow:visible!important}
html:not(.pf-agt) #agPanel.open>.ag-chips>.ag-chip:is(button,#_){height:auto!important;min-height:0!important;padding:6px 11px!important;font:500 12.5px/1.3 Geist,system-ui,sans-serif!important;border-radius:15px!important;border:1px solid #33264f!important;background:rgba(26,18,40,.6)!important;color:#d8cdef!important}
html:not(.pf-agt) #agPanel.open>.ag-log:is(div,#_){order:3;flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch;display:flex!important;flex-direction:column!important;justify-content:flex-end!important;gap:12px!important;padding:12px 16px!important;margin:0!important}
html:not(.pf-agt) #agPanel.open>.ag-log>.ag-msg:is(div,#_){font-size:15px!important;line-height:1.5!important;max-width:88%!important;margin:0!important}
html:not(.pf-agt) #agPanel.open>.ag-log>.ag-msg.note:is(div,#_){font-size:12.5px!important;color:#7d7199!important;max-width:100%!important;text-align:center;align-self:center}
html:not(.pf-agt) #agPanel.open:has(.ag-log>.ag-msg.u)>.ag-chips,html:not(.pf-agt) #agPanel.open:has(.ag-log>.ag-msg.u)>.ag-orbwrap>:not(canvas),html:not(.pf-agt) #agPanel.open:has(.ag-log>.ag-msg.u)>.ag-log>.ag-msg.note{display:none!important}
html:not(.pf-agt) #agPanel.open:has(.ag-log>.ag-msg.u)>.ag-orbwrap{padding-top:12px!important}
html:not(.pf-agt) #agPanel.open>form.ag-foot:is(form,#_){order:4;flex:none!important;position:relative!important;display:flex!important;align-items:center!important;gap:6px!important;margin:8px 12px calc(10px + env(safe-area-inset-bottom))!important;min-height:50px!important;padding:0 7px 0 16px!important;border-radius:14px!important;border:1px solid #33264f!important;background:#1a1228!important;box-sizing:border-box;width:auto!important}
html:not(.pf-agt) #agPanel.open>form.ag-foot textarea:is(textarea,#_){order:1;flex:1 1 auto!important;min-width:0!important;font:400 16px/1.3 Geist,system-ui,sans-serif!important;background:transparent!important;border:0!important;outline:0!important;padding:13px 0!important;min-height:24px!important;height:auto!important;max-height:120px!important;resize:none!important;color:#f3eaff!important;box-shadow:none!important}
html:not(.pf-agt) #agPanel.open>form.ag-foot .nlaskb:is(div,#_){display:contents!important}
html:not(.pf-agt) #agPanel.open>form.ag-foot .nlmeta{display:none!important}
html:not(.pf-agt) #agPanel.open>form.ag-foot .ag-mic:is(button,#_){order:2;flex:none!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;border-radius:10px!important;border:1px solid #3a2c58!important;background:transparent!important;color:#d8cdef!important;display:grid!important;place-items:center!important;font-size:0!important;box-shadow:none!important}
html:not(.pf-agt) #agPanel.open>form.ag-foot .ag-mic>span{display:none!important}
html:not(.pf-agt) #agPanel.open>form.ag-foot .ag-mic svg{width:18px!important;height:18px!important}
html:not(.pf-agt) #agPanel.open>form.ag-foot .ag-send:is(button,#_){order:3;flex:none!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;padding:0!important;border-radius:10px!important;border:0!important;background:#8b5cf6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5 12l7-7 7 7'/%3E%3C/svg%3E") center/18px no-repeat!important;font-size:0!important;color:transparent!important;box-shadow:none!important}
}
/* 82. v18x App and Studio Arguta full screen on phones, matched to rule 81: shortcuts sit under the greeting (wrapping, centred), messages build up
   from the bottom, and once you have said something the greeting and shortcuts give way and the orb stays pinned at the top. Same header sizes. */
@media (max-width:860px){
html:is(.pf-app,.pf-studio) aside.right.open>.tab>.ag-head:is(div,#_):is(div,#_){order:0;min-height:50px!important;height:50px!important;margin:-10px -16px 0!important;padding:0 14px 0 16px!important;border-bottom:1px solid #2a1f3d!important;width:auto!important;max-width:none!important}
html:is(.pf-app,.pf-studio) aside.right.open>.tab>.aorb:is(div,#_):is(div,#_){order:1;padding-top:12px!important}
html:is(.pf-app,.pf-studio) aside.right.open>.tab>.aorb .ahi:is(b,#_){font:600 19px/1.3 Poppins,Geist,sans-serif!important;margin-top:6px!important}
html:is(.pf-app,.pf-studio) aside.right.open>.tab>.aorb .aost:is(small,#_){font-size:13px!important;color:#a99cc8!important}
html:is(.pf-app,.pf-studio) aside.right.open>.tab>:is(#qs,.sugs):is(div,#_):is(div,#_){order:2;flex-wrap:wrap!important;justify-content:center!important;overflow:visible!important;gap:7px!important;padding:6px 0 0!important}
html:is(.pf-app,.pf-studio) aside.right.open>.tab>:is(#qs,.sugs)>button:is(button,#_){white-space:normal!important;padding:6px 11px!important;font-size:12.5px!important;border-radius:15px!important}
html:is(.pf-app,.pf-studio) aside.right.open>.tab>:is(#msgs,.chat):is(div,#_):is(div,#_){order:3;display:flex!important;flex-direction:column!important;justify-content:flex-end!important}
html:is(.pf-app,.pf-studio) aside.right.open>.tab>form.ag-ask:is(form,#_){order:4}
html:is(.pf-app,.pf-studio) aside.right.open:has(:is(#msgs,.chat) .me)>.tab>:is(#qs,.sugs),html:is(.pf-app,.pf-studio) aside.right.open:has(:is(#msgs,.chat) .me)>.tab>.aorb>:not(canvas){display:none!important}
}
@media (max-width:860px){
html:not(.pf-agt) #agPanel.open .ag-chips:is(div,#_):is(div,#_){display:flex!important;flex-wrap:wrap!important;justify-content:center!important;gap:7px!important;padding:16px 0 0!important;margin:0!important;max-height:none!important;overflow:visible!important}
html:not(.pf-agt) #agPanel.open .ag-chips>.ag-chip:is(button,#_):is(button,#_){height:auto!important;min-height:0!important;padding:6px 11px!important;font:500 12.5px/1.3 Geist,system-ui,sans-serif!important;border-radius:15px!important;border:1px solid #33264f!important;background:rgba(26,18,40,.6)!important;color:#d8cdef!important}
html:not(.pf-agt) #agPanel.open .ag-wide:is(span,#_){display:inline!important}
html:is(.pf-app,.pf-studio) aside.right.open>.tab>.ag-head :is(svg,img):first-child{width:24px!important;height:24px!important}
html:is(.pf-app,.pf-studio) aside.right.open>.tab>.ag-head>span:first-child{font:500 16px/1 Geist,system-ui,sans-serif!important;gap:8px!important}
}
@media (max-width:860px){
html:is(.pf-app,.pf-studio) aside.right.open>.tab>.ag-head .ag-ctl>button:is(button,#_):is(button,#_){height:32px!important;min-height:32px!important;padding:0 11px!important;border-radius:9px!important;font:500 13px/1 Geist,system-ui,sans-serif!important}
html:is(.pf-app,.pf-studio) aside.right.open>.tab>.ag-head .ag-ctl>button:first-child:has(svg):is(button,#_){width:32px!important;padding:0!important}
html:is(.pf-app,.pf-studio) aside.right.open>.tab>.ag-head .ag-ctl>button svg{width:17px!important;height:17px!important}
}
@media (max-width:860px){
html:not(.pf-agt) #agPanel.open:has(.ag-log>.ag-msg.u) .ag-chips:is(div,#_):is(div,#_):is(div,#_),html:not(.pf-agt) #agPanel.open:has(.ag-log>.ag-msg.u)>.ag-orbwrap>:not(canvas):is(*,#_):is(*,#_),html:not(.pf-agt) #agPanel.open:has(.ag-log>.ag-msg.u)>.ag-log>.ag-msg:is(.note,#_):is(*,#_){display:none!important}
html:is(.pf-app,.pf-studio) aside.right.open>.tab>.ag-head .ag-ctl>button:is(button,#_):is(button,#_):is(button,#_){display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important}
html:is(.pf-app,.pf-studio) aside.right.open>.tab>.ag-head .ag-ctl>button>svg:is(svg,#_):is(svg,#_){width:17px!important;height:17px!important;min-width:17px!important}
}

/* v18x (12 Nov 2026): no jump on load on phones. arguta-mobile.js adds html.amob-ok once the page's spacing and text sizes are
   final; until then the page is out of sight. The animation shows it anyway after 1.4s if the script never runs. */
@media (max-width:860px){html:not(.amob-ok) body{opacity:0;animation:amobOk 0s 1.4s forwards}html.amob-ok body{opacity:1;transition:opacity .14s ease-out}}
@keyframes amobOk{to{opacity:1}}
/* v18x (12 Nov 2026): phones. body{overflow-x:hidden} made the body its own scroll box, so the sticky top bar scrolled away
   with the page and never came back. clip keeps the side cut-off without that, and the bar now stays (and hides on scroll down). */
@media (max-width:860px){body{overflow-x:clip!important}}
/* v18x (Richard, 12 Nov 2026): portrait rings are 1px on phones. Face stacks that use a card-coloured edge to separate the
   faces (.hx-faces, .dvf, .dvf2) are not rings and keep theirs. */
@media (max-width:860px){html :is(.ej img,.avahead img,.dtool .by img,.exc img,.card header img,.herofaces img,.cm img,.crpface,.lp-ctaface){border-width:1px!important}
html .crpface{box-shadow:0 0 28px rgba(163,91,255,.35)!important}}
/* v18x (Richard, 12 Nov 2026): phones get smaller type. Page headings 26px, section headings over 20px come down to 20px (arguta-mobile.js, before the page shows), lead text 15px
   (at the middle A; the small and large A still scale them). Menus, the top bar and Arguta keep their own sizes. */
@media (max-width:860px){
h1:not(:is(header,#side,.mnav,#agPanel,aside,[role=dialog],.ag-panel) *){font-size:26px!important;line-height:1.15!important;letter-spacing:-.01em}
:is(p.lede,p.lead,p.lp-lead,p.snlead,.lede,.lead):not(:is(header,#side,.mnav,#agPanel,aside,[role=dialog]) *){font-size:15px!important;line-height:1.5!important}}
/* v18x (12 Nov 2026): phone spacing faults found by the measured audit (393 and 375 wide), fixed by type.
   To-do rows: text to its buttons 14 to 16. Skill Bank: guide button to its file fingerprint 0 to 12.
   Programme top bar: title to the back button 12 to 16. Licence: accept button to the terms box 5 to 12. */
@media (max-width:860px){.tdr{row-gap:16px!important}.mustdo .fp{margin-top:12px!important}.brandbar{row-gap:16px!important}form.acag>.acb{margin-bottom:7px!important}}
/* v18x (12 Nov 2026): the App's crew profile panel (#prof) is fixed full width inside the zoomed page, so at the large A it ran
   35px off the right edge and at the small A it stopped 40px short (live fault, measured). Its width now divides by the zoom. */
@media (max-width:860px){html[data-ts=l] main.stage #prof{right:auto!important;max-width:none!important;width:calc(100vw / 1.1)!important}html[data-ts=s] main.stage #prof{right:auto!important;max-width:none!important;width:calc(100vw / .9)!important}}
/* v18x visual check (13 Nov 2026): Studio and Academy Intro pages on phones match the App. The page menu is one line you swipe
   (it wrapped to two rows), and the opening block is centred like the sections below it (it sat left). Written for every product,
   and it reaches inside the Studio and Academy panels because this sheet is loaded into them. */
@media (max-width:860px){
nav.sub.apnav:is(nav,#_):is(nav,#_){flex-wrap:nowrap!important;justify-content:flex-start!important;overflow-x:auto!important;scrollbar-width:none;gap:6px!important;max-width:100%!important;box-sizing:border-box}
nav.sub.apnav::-webkit-scrollbar{display:none}
nav.sub.apnav>:is(button,a){flex:0 0 auto!important;white-space:nowrap!important}
.doc:not(.ws) :is(.hx-l,.argtxt,.crh>div:not([class]),.about2>div:not([class])):is(div,#_){text-align:center!important;align-items:center!important}
.doc:not(.ws) :is(.hx-l,.argtxt,.crh>div:not([class]),.about2>div:not([class])) :is(.k,.kick,h1,h2,p){text-align:center!important;margin-left:auto!important;margin-right:auto!important}
.doc:not(.ws) :is(.hx-l,.argtxt,.crh>div:not([class]),.about2>div:not([class])) :is(.chips,.pills,.tags,div:has(>span+span)):not(.row){justify-content:center!important}}
/* v18x visual check: the same Intro button pairs (stacked, full width) and portraits (centred, 298px) as the App, for every product */
@media (max-width:860px){
.doc:not(.ws) :is(.hx-card,img.arghero,.crh):is(*,#_){width:min(100%,298px)!important;max-width:298px!important;margin-left:auto!important;margin-right:auto!important}
.doc:not(.ws) :is(.hx-l,.argtxt) .row:has(>:is(a,button)):not(:has(>:not(a,button))):is(.row,#_){flex-direction:column!important;align-items:stretch!important;gap:10px!important}
.doc:not(.ws) :is(.hx-l,.argtxt) .row:has(>:is(a,button)):not(:has(>:not(a,button)))>*{width:100%!important;max-width:none!important;justify-content:center!important;text-align:center!important;margin:0!important;box-sizing:border-box}}
/* v18x visual check: country pages. Log in and Start free sat on two rows on phones where the country name is long (Australia, Canada,
   Ireland and others), making the top bar twice the height. They stay on one row; where there are two buttons the country name in the bar is left out (the page opening already says the country, for example Now open in Australia). The Studio
   landing label was cut off with dots; it now wraps. */
@media (max-width:860px){header.sa-top nav.sa-acts:is(nav,#_){flex-wrap:nowrap!important;flex-shrink:0}
header.sa-top:has(nav.sa-acts>:nth-child(2)) .sa-sec:is(span,#_){display:none!important}
header.sa-top:has(nav.sa-acts>:nth-child(2)) .sa-dv:is(span,#_){display:none!important}
.kick:is(span,#_){white-space:normal!important;text-overflow:clip!important}}
/* v18x (Richard: "inside, the core admin copies the Academy Admin"). Phones only, the computer view is unchanged.
   Page openings: no round icon and no small label above; the page title 26px bold on the left, the date line small under it,
   the page starting just under the top bar; summary tiles three across, as in the Academy Admin Overview. */
@media (max-width:860px){
html.pf-core .a-main:is(main,div,#_):is(main,div,#_):is(main,div,#_){padding-top:0!important}
html.pf-core .a-main :is(.cc-hero,.hx-std):is(div,#_){margin-top:0!important;padding-top:0!important}
html.pf-core .a-main :is(.hx-sav,.cc-av.big):is(span,div,#_){display:none!important}
html.pf-core .a-main .cc-top:is(div,#_){gap:0!important}
html.pf-core .a-main .hx-std .hx-l:is(div,#_),html.pf-core .a-main .cc-hero .hx-l:is(div,#_){display:none!important}
html.pf-core .a-main :is(.hx-std,.cc-hero) .hx-s:is(div,#_){font:700 26px/1.15 Poppins,Geist,system-ui,sans-serif!important;letter-spacing:-.01em;margin-top:0!important;color:#fff}
html.pf-core .a-main :is(.hx-std,.cc-hero) .hx-sub:is(div,#_){font-size:12px!important;color:#a99dbb!important}
html.pf-core .a-main .cu-tiles:is(div,#_){grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}}
/* v18x: the core admin's calendar and inbox pages (drawn in their own frame) open the same way: no framed hero card, no round icon
   or small label, the title 26px bold on the left. The controls under it stay as they are. */
@media (max-width:860px){
html.pf-core .wrap>.hero:is(div,#_):is(div,#_){background:none!important;border:0!important;box-shadow:none!important;padding:0!important;border-radius:0!important}
html.pf-core .wrap>.hero .adm-top .adm-av:is(span,#_),html.pf-core .wrap>.hero .adm-top small:is(small,#_){display:none!important}
html.pf-core .wrap>.hero .adm-top:is(div,#_){gap:0!important}
html.pf-core .wrap>.hero .adm-top h1:is(h1,#_):is(h1,#_){font:700 26px/1.15 Poppins,Geist,system-ui,sans-serif!important;margin:0 0 12px!important;letter-spacing:-.01em}}