/* pa-home.css - the Home page, copied from the RaXa ERP (rx-home.css). Desktop: bar, hero and panda, areas along the bottom. Phones: one column. */
:root { --status-top: 92px; --status-right: 24px; }
.hm {
  min-height: max(100dvh, 640px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; gap: 14px;
  padding: calc(18px + env(safe-area-inset-top)) 24px calc(6px + env(safe-area-inset-bottom));
}

/* bar */
.hm-bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 999px; }
.hm-logo { display: flex; align-items: center; gap: 10px; margin-right: auto; font-size: 18px; font-weight: 500; }
.hm-logo i { width: 46px; height: 46px; padding: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(46,46,50,.1); display: grid; place-items: center; overflow: hidden; }
.hm-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hm-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap; text-decoration: none;
  background: var(--ctl); box-shadow: inset 0 0 0 1px var(--ctl-line); color: var(--ink); font: 400 14px var(--font);
  transition: box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.hm-pill[hidden] { display: none; }
.hm-pill:hover { box-shadow: inset 0 0 0 1px var(--line-hover); }
.hm-pill:focus-visible, .hm-cta:focus-visible, .hm-mod:focus-visible { outline: 2px solid var(--ac-text); outline-offset: 2px; }
.hm-pill--me { background: var(--tint-2); font-weight: 500; }
.hm-pill svg { width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* hero and panda */
.hm-stage { min-height: 0; display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 24px; align-items: center; }
.hm-hero { align-self: start; padding: clamp(26px, 5vh, 42px); border-radius: 38px; }
.hm-hero h1 { margin: 0; font-size: clamp(46px, 8.8vh, 72px); font-weight: 300; letter-spacing: -.03em; line-height: 1.04; }
.hm-hero p { margin: 20px 0; font-size: 16px; line-height: 1.5; }
.hm-cta {
  display: inline-flex; align-items: center; height: 48px; padding: 0 24px; border-radius: 999px;
  background: var(--ac); color: #fff; font-size: 15px; font-weight: 500; text-decoration: none; box-shadow: 0 6px 16px rgba(30,30,32,.22);
  transition: background .15s;
}
.hm-cta:hover { background: var(--ac-hover); }
.hm-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hm-cta--2 { background: var(--ctl); color: var(--ink); font-weight: 400; box-shadow: inset 0 0 0 1px var(--ctl-line); }
.hm-cta--2:hover { background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--line-hover); }
.hm-art { position: relative; justify-self: center; width: min(100%, calc(100dvh - 250px), 500px); aspect-ratio: 1; display: grid; place-items: center; }
.hm-art > * { grid-area: 1 / 1; }
.hm-art__ring { width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1.25px rgba(30,32,40,.25); }
.hm-art__arc {
  width: 96%; height: 96%; border-radius: 50%;
  background: conic-gradient(from 30deg, var(--ac) 0 125deg, transparent 125deg);
  -webkit-mask: radial-gradient(closest-side, transparent 83%, #000 84%); mask: radial-gradient(closest-side, transparent 83%, #000 84%);
}
.hm-art__disc { width: 76%; height: 76%; border-radius: 50%; background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter); box-shadow: var(--glass-shadow); }
.hm-art img { position: relative; width: 86%; height: auto; }

/* modules */
.hm-mods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.hm-mod {
  display: flex; align-items: center; gap: 11px; min-width: 0; min-height: 64px; padding: 11px 13px; border-radius: 20px; text-decoration: none;
  background: rgba(16,18,24,calc(var(--glass-a) + .02)); color: var(--ink);
  -webkit-backdrop-filter: var(--glass-filter); backdrop-filter: var(--glass-filter);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.3);
  transition: box-shadow .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.hm-mod:hover { background: rgba(16,18,24,calc(var(--glass-a) + .16)); box-shadow: inset 0 0 0 1px var(--line-hover), 0 10px 24px rgba(0,0,0,.34); }
.hm-mod i { flex: none; width: 42px; height: 42px; border-radius: 13px; background: var(--ac); color: #fff; display: grid; place-items: center; }
.hm-mod svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hm-mod span { min-width: 0; font-size: 13px; font-weight: 500; line-height: 1.25; }

/* the Tutorial page: bar, then every module as a card on one glass panel */
.hm--tut { grid-template-rows: auto auto minmax(0, 1fr); }
.hm--tut .hm-foot { align-self: end; }
.hm-logo--link { color: inherit; text-decoration: none; }
.hm-logo--link:focus-visible { outline: 2px solid var(--ac-text); outline-offset: 2px; border-radius: 999px; }
.hm-tut { padding: clamp(26px, 5vh, 42px); border-radius: 38px; }
.hm-tut h1 { margin: 0; font-size: clamp(40px, 7vh, 56px); font-weight: 300; letter-spacing: -.03em; line-height: 1.05; }
.hm-tut p { margin: 10px 0 24px; font-size: 16px; line-height: 1.5; }
.hm-tut__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hm-tut__cards .hm-mod { flex-direction: column; align-items: flex-start; gap: 14px; min-height: 196px; padding: 20px; }
.hm-tut__cards .hm-mod i { width: 48px; height: 48px; border-radius: 15px; }
.hm-tut__cards .hm-mod svg { width: 22px; height: 22px; }
.hm-tut__cards b { display: block; font-size: 16px; font-weight: 500; line-height: 1.25; }
.hm-tut__cards small { display: block; margin-top: 6px; font-size: 13.5px; font-weight: 400; line-height: 1.45; color: var(--ink2); }

/* footer */
.hm-foot { text-align: center; font-size: 11px; line-height: 14px; color: #24262c; text-shadow: 0 1px 2px rgba(255,255,255,.55); }   /* dark words on the light paper */
.hm-foot b { font-weight: 500; }

/* portrait screens and phones: one column, with modules close to the top */
@media (orientation: portrait), (max-width: 760px) {
  :root { --status-top: 78px; --status-right: 12px; }
  .hm { min-height: 100dvh; grid-template-rows: none; align-content: start; gap: 12px; padding-left: 12px; padding-right: 12px; }
  .hm-bar { padding: 6px 8px; }
  .hm-logo i { width: 42px; height: 42px; }
  .hm-stage { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
  .hm-art { order: -1; width: min(58vw, 240px); margin: 2px auto 0; }
  .hm-hero { padding: 22px; border-radius: 28px; }
  .hm-hero h1 { font-size: clamp(38px, 11vw, 56px); }
  .hm-hero p { margin: 12px 0 16px; font-size: 15px; }
  .hm-cta { justify-content: center; width: 100%; }
  .hm-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hm-mod { padding: 9px 10px; gap: 9px; }
  .hm-mod:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* an odd card out takes the full row */
  .hm-foot { padding: 6px 0 2px; }
  .hm--tut { grid-template-rows: auto auto minmax(0, 1fr); align-content: stretch; }
  .hm-tut { padding: 22px; border-radius: 28px; }
  .hm-tut p { margin: 8px 0 16px; font-size: 15px; }
  .hm-tut__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}
/* phones: one card per row, icon beside the text */
@media (max-width: 560px) {
  .hm-tut__cards { grid-template-columns: minmax(0, 1fr); }
  .hm-tut__cards .hm-mod { flex-direction: row; align-items: center; min-height: 0; padding: 14px; }
  .hm-tut__cards small { margin-top: 3px; }
  .hm-tut { padding: 18px; }
}
/* phones: Get in touch and System Management become round icons, so the bar fits */
@media (max-width: 560px) {
  .hm-pill--ic { width: 44px; padding: 0; }
  .hm-pill--ic span { display: none; }
  .hm { grid-template-columns: minmax(0, 1fr); }
  .hm-bar { gap: 6px; }
  /* Ultra has the most buttons: the logo stays, its name goes, and a long greeting is cut short */
  .hm-bar.is-full .hm-logo { flex: none; font-size: 0; gap: 0; }
  .hm-bar.is-full .hm-pill--ic { flex: none; width: 40px; }
  .hm-bar.is-full .hm-pill--me { display: block; flex: 0 1 auto; min-width: 0; padding: 0 12px; overflow: hidden; text-overflow: ellipsis; line-height: 44px; }
}
/* an icon-only button, such as the bell */
.hm-pill--only { width: 44px; padding: 0; }
@media (max-width: 360px) { .hm-logo { font-size: 0; } }
/* Upgrade stands out with a teal edge */
.hm-pill--up { box-shadow: inset 0 0 0 1.5px var(--ac-text); }

/* ---------- the four category tiles and their pop-ups ---------- */
.hm-mods.hm-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hm-cats .hm-mod { width: 100%; border: 0; cursor: pointer; font: inherit; text-align: left; min-height: 72px; }
.hm-cats .hm-mod span { font-size: 15px; }
.pa-cat { align-items: center; }
.pa-cat .hm-tut { position: relative; width: min(100%, 920px); max-height: calc(100dvh - 32px); overflow-y: auto; }
.pa-cat .hm-tut { background: var(--solid); box-shadow: var(--pop-shadow); }   /* a pop-up is solid, as in the ERP, so nothing shows through its text */
.pa-cat .hm-tut__cards { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.pa-cat .hm-tut__cards .hm-mod { min-height: 180px; }
.pa-cat__x {
  position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; cursor: pointer; background: var(--ctl); box-shadow: inset 0 0 0 1px var(--ctl-line); color: var(--ink);
}
.pa-cat__x:hover { box-shadow: inset 0 0 0 1px var(--line-hover); }
.pa-cat__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.pa-cat__x:focus-visible { outline: 2px solid var(--ac-text); outline-offset: 2px; }
@media (orientation: portrait), (max-width: 760px) {
  .hm-mods.hm-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-cat .hm-tut__cards { grid-template-columns: minmax(0, 1fr); }
  .pa-cat .hm-tut__cards .hm-mod { flex-direction: row; align-items: center; min-height: 0; padding: 14px; }
  .pa-cat .hm-tut h1 { padding-right: 50px; }
}


/* copied from UI_Designs/Theme (css/rx-home.css), 2026-11-11 */
/* ---------- Home motion (2026-11-11): the living hero. pa-home-motion.js builds the layers and turns it on (html.hm-live) ----------
   The headline words come in out of a blur, the panels rise, the panda circle is a stack of layers in real 3D
   (ring at the back, teal arc, glass disc, the panda in front) that turns toward the mouse, zooms when pointed at,
   breathes, and sways slowly on its own when the mouse is still or on a phone. Off for people who ask for less motion. */
@property --hm-sweep { syntax: "<angle>"; inherits: false; initial-value: 125deg; }
html.hm-in .hm-bar { animation: hm-drop .7s cubic-bezier(.2,.75,.2,1) both; }
html.hm-in .hm-hero { animation: hm-rise .8s cubic-bezier(.2,.75,.2,1) .1s both; }
html.hm-in .hm-hero .hm-w { display: inline-block; animation: hm-word .9s cubic-bezier(.2,.75,.2,1) both; animation-delay: calc(.25s + var(--i) * 90ms); }
html.hm-in .hm-hero p { animation: hm-fade .8s ease .7s both; }
html.hm-in .hm-actions > * { animation: hm-rise .6s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(.85s + var(--i, 0) * 90ms); }
html.hm-in .hm-mod { animation: hm-rise .6s cubic-bezier(.2,.75,.2,1) both; animation-delay: calc(.9s + var(--i, 0) * 70ms); }
html.hm-in .hm-foot { animation: hm-fade 1s ease 1.4s both; }
html.hm-in .hm-art__ring { animation: hm-ring-in 1.1s cubic-bezier(.2,.75,.2,1) .2s both; }
html.hm-in .hm-art__disc { animation: hm-disc-in .9s cubic-bezier(.34,1.56,.64,1) .35s both; }
html.hm-in .hm-breathe img { animation: hm-panda-in .9s cubic-bezier(.34,1.56,.64,1) .5s both, hm-breathe 5.5s ease-in-out 1.6s infinite; }
html.hm-live .hm-art__arc { background: conic-gradient(from 30deg, var(--ac) 0 var(--hm-sweep), transparent var(--hm-sweep)); }
html.hm-in .hm-art__arc { animation: hm-sweep 1.4s cubic-bezier(.2,.75,.2,1) .55s both, hm-spin 48s linear 2s infinite; }
html.hm-live:not(.hm-in) .hm-art__arc { animation: hm-spin 48s linear infinite; }
@keyframes hm-drop { from { opacity: 0; transform: translateY(-16px); } }
@keyframes hm-rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes hm-fade { from { opacity: 0; } }
@keyframes hm-word { from { opacity: 0; transform: translateY(.45em); } }
@keyframes hm-ring-in { from { opacity: 0; transform: translateZ(-50px) scale(.82); } }
@keyframes hm-disc-in { from { opacity: 0; transform: scale(.6); } }
@keyframes hm-panda-in { from { opacity: 0; transform: translateY(26px) scale(.86); } }
@keyframes hm-sweep { from { --hm-sweep: 0deg; opacity: .2; } }
@keyframes hm-spin { to { rotate: 360deg; } }
@keyframes hm-breathe { 0%, 100% { scale: 1 1; } 45% { scale: 1.012 1.03; } }
html.hm-live .hm-art { perspective: 700px; --zoom: 0; }
.hm-tilt { display: grid; place-items: center; width: 100%; height: 100%; grid-area: 1 / 1; transform-style: preserve-3d;
  transform: rotateY(calc(var(--mx, 0) * 18deg)) rotateX(calc(var(--my, 0) * -15deg)) scale(calc(1 + var(--zoom) * .05)); }
.hm-tilt > * { grid-area: 1 / 1; }
.hm-tilt .hm-art__ring { transform: translateZ(-50px); }
.hm-tilt .hm-art__arc { transform: translateZ(-24px); }
.hm-tilt .hm-art__disc { transform: translateZ(0); }
.hm-art__glow { width: 70%; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--ac-rgb), calc(.28 + var(--zoom) * .22)), rgba(var(--ac-rgb), .08) 55%, transparent);
  transform: translateZ(-80px) translate(calc(var(--mx, 0) * -26px), calc(var(--my, 0) * -20px)); pointer-events: none; }
.hm-shadow { width: 62%; height: 14%; align-self: end; margin-bottom: 21%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.5), rgba(0,0,0,.2) 55%, transparent); pointer-events: none;
  transform: translateZ(6px) translate(calc(var(--mx, 0) * -22px), calc(var(--my, 0) * -6px)) scale(calc(1 - var(--zoom) * .18)); opacity: calc(.6 - var(--zoom) * .2); }
.hm-glare { width: 76%; height: 76%; border-radius: 50%; pointer-events: none; transform: translateZ(2px);
  background: radial-gradient(circle at calc(50% + var(--mx, 0) * 38%) calc(40% + var(--my, 0) * 38%), rgba(255,255,255,.2), transparent 42%); }
.hm-breathe { width: 86%; display: grid; place-items: center; pointer-events: none;
  transform: translateZ(calc(50px + var(--zoom) * 45px)) translate(calc(var(--mx, 0) * 12px), calc(var(--my, 0) * 8px)) scale(calc(.92 + var(--zoom) * .05)); }
.hm-breathe img { width: 100%; transform-origin: 50% 80%; }
html.hm-live:not(.hm-in) .hm-breathe img { animation: hm-breathe 5.5s ease-in-out infinite; }
html.hm-live .hm-art.is-live .hm-art__glow { animation: hm-glow 6s ease-in-out infinite; }
@keyframes hm-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }   /* opacity only: the GPU does it, nothing is repainted */
/* smooth motion: these layers move on the GPU and never repaint */
.hm-tilt, .hm-breathe, .hm-breathe img, .hm-art__arc, .hm-art__glow, .hm-shadow { will-change: transform; }
/* hover and press */
html.hm-live .hm-cta { position: relative; overflow: hidden; translate: var(--tx, 0) var(--ty, 0); transition: background .15s, translate .35s cubic-bezier(.2,.75,.2,1), transform .12s, box-shadow .25s; }
html.hm-live .hm-cta::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); translate: -120% 0; transition: translate .7s cubic-bezier(.2,.75,.2,1); pointer-events: none; }
html.hm-live .hm-cta:hover::after { translate: 120% 0; }
html.hm-live .hm-cta:not(.hm-cta--2):hover { box-shadow: 0 10px 28px rgba(var(--ac-rgb), .45); }
.hm-cta:active, .hm-pill:active, .hm-mod:active { transform: scale(.96); }
html.hm-live .hm-mod { transition: box-shadow .25s, background .25s, transform .3s cubic-bezier(.2,.75,.2,1); }
html.hm-live .hm-mod:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(var(--ac-rgb), .6), 0 16px 32px rgba(0,0,0,.35), 0 0 26px rgba(var(--ac-rgb), .2); }
html.hm-live .hm-mod i { transition: transform .45s cubic-bezier(.34,1.56,.64,1), box-shadow .3s; }
html.hm-live .hm-mod:hover i { transform: rotate(-8deg) scale(1.08); box-shadow: 0 6px 18px rgba(var(--ac-rgb), .5); }
@media (orientation: portrait), (max-width: 760px) { html.hm-live .hm-mod:hover { transform: none; } }