/* AxioraX New on a computer (js/desk.js, 15 Oct 2026). Everything here is scoped to html.ax-desk, which is set only on a
   wide screen outside the phone app, so phones and the phone app never see a line of it. */
html.ax-desk{--side:288px;--read:820px;--wide:1080px}

/* ---------- the side panel: the app's own menu, always open at the left ---------- */
html.ax-desk .drawer.desk-side{transform:none!important;transition:none!important;width:var(--side);z-index:20;background:#F8F9F8;
  box-shadow:none;border-inline-end:1px solid #E9EBE9}
html.ax-desk .drawer.desk-side .desk-brand{display:flex;align-items:center;gap:10px;height:64px;padding:0 22px;flex:none;font-size:21px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
html.ax-desk .drawer.desk-side .desk-brand svg{width:30px;height:auto}
html.ax-desk .drawer.desk-side .dsearch{margin-top:2px;height:44px;font-size:15.5px}
html.ax-desk .drawer.desk-side .dsearch input{font-size:15.5px}
html.ax-desk .drawer.desk-side .dlist{scrollbar-width:thin;scrollbar-color:#D5D9D5 transparent}
html.ax-desk .drawer.desk-side .drow,html.ax-desk .drawer.desk-side .dchat{cursor:pointer}
html.ax-desk .drawer.desk-side .drow:hover:not(.on),html.ax-desk .drawer.desk-side .dchat:hover:not(.on){background:#EEF1EE}
html.ax-desk .drawer.desk-side .dme{padding-bottom:16px}
html.ax-desk .drawer.desk-side .dme:hover{background:#EEF1EE}
/* the menu key in each page's top bar has nothing to open: the panel is already there */
html.ax-desk .tb [data-act="menu"]{display:none}

/* ---------- every page sits beside the panel ---------- */
html.ax-desk .view,html.ax-desk .ws-deck{left:var(--side)}
html.ax-desk[dir=rtl] .view,html.ax-desk[dir=rtl] .ws-deck{left:0;right:var(--side)}
html.ax-desk .ws-deck{top:70px}
html.ax-desk .ws-deck.bare{top:0}
/* a page's own content keeps a comfortable reading width, centred in the space beside the panel */
html.ax-desk .scroll{padding-left:max(32px,calc((100% - var(--read)) / 2));padding-right:max(32px,calc((100% - var(--read)) / 2));padding-top:84px;padding-bottom:56px}
html.ax-desk .scroll.has-dock{padding-bottom:132px}
html.ax-desk .tb{left:24px;right:24px;top:16px}
html.ax-desk .topfade{height:84px}
/* buttons pinned at the bottom of a page stay inside the reading column */
html.ax-desk .dock{left:max(32px,calc((100% - var(--read)) / 2));right:max(32px,calc((100% - var(--read)) / 2));bottom:24px}

/* ---------- AxioCHAT: the conversation and the message box in one centred column ---------- */
html.ax-desk .conv{padding-left:max(24px,calc((100% - 800px) / 2));padding-right:max(24px,calc((100% - 800px) / 2));padding-top:88px}
html.ax-desk .comp{left:max(24px,calc((100% - 800px) / 2));right:max(24px,calc((100% - 800px) / 2));bottom:46px}
html.ax-desk .comp textarea{font-size:16px}
/* a new chat: the greeting and the message box meet in the middle of the screen, as on the big chat sites */
html.ax-desk .v-home .home-hero{top:0;bottom:auto;height:calc(50% - 20px);padding-top:84px}
html.ax-desk .v-home .comp{bottom:auto;top:calc(50% - 52px)}
html.ax-desk .v-home .engfade,html.ax-desk .v-door .engfade{display:none}
html.ax-desk .v-door .door-mid{top:0;bottom:auto;height:calc(50% - 20px);padding-top:72px}
html.ax-desk .v-door .comp{bottom:auto;top:calc(50% - 52px)}

/* ---------- bottom sheets open as centred windows ---------- */
html.ax-desk .sheet{left:50%;right:auto;bottom:auto;top:50%;width:min(560px,calc(100vw - 64px));max-height:min(80vh,760px);border-radius:24px;
  padding:14px 24px 24px;opacity:0;transform:translate3d(-50%,-46%,0) scale(.98);transition:transform .26s var(--ease),opacity .2s ease;box-shadow:0 30px 80px rgba(12,12,12,.18)}
html.ax-desk .sheet.on{opacity:1;transform:translate3d(-50%,-50%,0)}
html.ax-desk .sheet .grab{display:none}

/* ---------- wider screens, wider grids: a grid of five or more tiles takes three across ---------- */
html.ax-desk .scroll .grid2:has(> :nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr))}

/* ---------- My AX Card on a computer: the designs at a sensible size, Update inside the column ---------- */
html.ax-desk .axc-pickp .axc-pick{max-width:620px;margin-left:auto;margin-right:auto}
html.ax-desk .axe-dock{left:max(32px,calc((100% - var(--read)) / 2));right:max(32px,calc((100% - var(--read)) / 2));padding-bottom:22px}

/* ---------- small things ---------- */
html.ax-desk .toast{bottom:40px;margin-inline-start:calc(var(--side) / 2)}
html.ax-desk .axfab{inset-inline-end:28px;bottom:28px}
/* pointers: things that can be clicked show it */
html.ax-desk .row[data-go],html.ax-desk .row[data-act],html.ax-desk [data-go],html.ax-desk [data-act]{cursor:pointer}
html.ax-desk .grp .row:hover{background:#ECEFEC}
html.ax-desk .scroll{scrollbar-width:thin;scrollbar-color:#D5D9D5 transparent}
html.ax-desk .tbsecs{grid-template-columns:repeat(3,minmax(0,1fr))!important}
/* the greeting on one line on a computer, a little larger */
html.ax-desk .home-hero.hello .hi{max-width:640px;font-size:30px;line-height:38px}

/* a dashboard on a laptop narrower than 1200 px (16 Oct 2026): the panel becomes a slim column of icons, so the
   dashboard beside it keeps its computer layout instead of the phone one (a hover shows each name) */
@media (max-width:1199px){
  html.ax-desk.ax-desk-dash{--side:76px}
  html.ax-desk.ax-desk-dash .drawer.desk-side .desk-brand{justify-content:center;padding:0}
  html.ax-desk.ax-desk-dash .drawer.desk-side .desk-brand > span:not(.edu-lock),
  html.ax-desk.ax-desk-dash .drawer.desk-side .dsearch,
  html.ax-desk.ax-desk-dash .drawer.desk-side .dsec,
  html.ax-desk.ax-desk-dash .drawer.desk-side .drow span,
  html.ax-desk.ax-desk-dash .drawer.desk-side .dme .n,
  html.ax-desk.ax-desk-dash .drawer.desk-side .dme .p{display:none!important}
  /* AX Education: in the slim column only the mark shows (the word is clipped away) */
  html.ax-desk.ax-desk-dash .drawer.desk-side .desk-brand .edu-lock{width:28px!important;overflow:hidden!important;justify-content:flex-start!important}
  html.ax-desk.ax-desk-dash .drawer.desk-side .desk-brand .edu-lock svg{height:24px!important;width:auto!important;max-width:none!important}
  html.ax-desk.ax-desk-dash .drawer.desk-side .drow{display:flex!important;justify-content:center!important;align-items:center!important;padding:0!important;gap:0!important;width:calc(100% - 20px)!important;height:46px!important;margin:2px 10px!important;border-radius:14px!important;box-sizing:border-box!important}
  html.ax-desk.ax-desk-dash .drawer.desk-side .drow svg{margin:0!important}
  html.ax-desk.ax-desk-dash .drawer.desk-side .dgrp{border-top:1px solid #E6E6E6;margin-top:6px;padding-top:6px}
  html.ax-desk.ax-desk-dash .drawer.desk-side .dme{justify-content:center;padding-inline:0}
}