/* AxioraX cards in soft mint (his ask, 21 Oct 2026; js/axcards.js): the pages a title of the left panel opens, their
   cards, and the soft mint card that leads each page. Everything here is scoped to .axm, .axm-v (the pages that use the
   style), .axm-t and .axm-q (the panel's titles and its Search results), so no approved screen changes.
   Light mode only. Phone first; a computer gets a wider grid. Logical sides, so Arabic reads right to left. */

/* the page: a soft grey green ground, white cards on it */
.view.axm-v{--bg:#F5F6F4}
.view.axm-v .topfade{background:linear-gradient(#F5F6F4 58%,rgba(245,246,244,0))}
.view.axm-v .tb .rb{background:#fff;box-shadow:0 1px 2px rgba(12,12,12,.05),0 4px 14px -4px rgba(12,12,12,.10)}
.axm{padding-bottom:calc(var(--sab) + 110px)}

/* the head: the group's name, the title, its line */
.axm-head{padding:0 1px}
.axm-eb{display:flex;align-items:center;gap:8px;color:var(--green);font-weight:600;font-size:14.5px;line-height:20px;margin-top:4px}
.axm-eb .d{margin-inline-start:auto;color:var(--ph);font-weight:500;font-size:13.5px;white-space:nowrap}
.axm-h1{font-size:28px;line-height:34px;font-weight:700;letter-spacing:-.02em;margin-top:4px;color:var(--ink)}
.axm-lead{color:var(--sub);font-size:14.5px;line-height:21px;margin-top:6px}
.axm-body{margin-top:16px}
.axm-sec{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:20px 2px 11px}
.axm-sec b{font-size:16.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.axm-sec span{font-size:13px;color:var(--ph);font-weight:500;white-space:nowrap}
.axm-gap{height:12px}

/* the grid of cards */
.axm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.axm-card{position:relative;display:flex;flex-direction:column;align-items:stretch;text-align:start;background:#fff;border:1px solid #ECEEEA;border-radius:22px;
  box-shadow:0 1px 2px rgba(12,12,12,.04),0 12px 30px -14px rgba(19,83,51,.16);padding:15px;min-height:148px;min-width:0;color:var(--ink);cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .15s var(--ease),box-shadow .15s}
.axm-card:active{transform:scale(.98)}
.axm-card:focus-visible,.axm-hero:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.axm-ch{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.axm-ct{font-size:15px;font-weight:600;color:#2A2A2A;line-height:1.3;min-width:0;overflow-wrap:normal;padding-top:2px}
.axm-it{font-size:16px;font-weight:700;color:var(--ink);line-height:1.3;margin-top:13px;overflow-wrap:normal}
.axm-card.s .axm-it{font-size:15px;font-weight:600;color:#2A2A2A;margin-top:12px}
.axm-chip{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--green-soft);color:var(--green)}
.axm-chip.gold{background:var(--gold-soft);color:var(--gold-ink)}
.axm-chip.grey{background:#F1F2F1;color:var(--ink)}
.axm-chip.w{background:#fff;color:var(--green);border:1px solid rgba(19,83,51,.12)}
.axm-fill{flex:1 1 auto;min-height:6px}
.axm-big{display:inline-flex;align-self:flex-start;align-items:baseline;gap:6px;font-size:28px;font-weight:700;letter-spacing:-.03em;line-height:1;margin-top:10px;color:var(--ink)}
.axm-big small{font-size:13px;font-weight:500;color:var(--sub);letter-spacing:0}
.axm-cn{font-size:14px;font-weight:600;line-height:1.35;margin-top:10px;color:var(--ink)}
.axm-cs{font-size:12.5px;color:var(--sub);line-height:1.42;margin-top:7px}
.axm-cs.g{color:var(--green);font-weight:600}
.axm-vis{display:block;margin-top:10px}
.axm-bar{display:block;height:8px;border-radius:5px;background:#EEF1EE;overflow:hidden}
.axm-bar i{display:block;height:100%;border-radius:5px;background:var(--green)}
.axm-spark{display:block;width:100%;max-width:180px;height:30px;overflow:visible}
.axm-vb{display:flex;align-items:flex-end;gap:5px;height:24px}
.axm-vb i{display:block;width:5px;border-radius:3px;background:#1A7A4A}
.axm-types{display:flex;gap:6px;margin-top:12px}
.axm-types>span{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 7px;border-radius:14px;background:#F6F7F5;border:1px solid #EEF0ED;color:var(--green)}
.axm-types b{font-size:14px;font-weight:700;color:var(--ink);line-height:1}
.axm-types small{font-size:10px;color:var(--sub);line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.axm-foot{display:flex;justify-content:flex-end;margin-top:12px}
.axm-go{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;background:#F3F4F2;color:var(--ink)}
.axm-go svg{display:block}
[dir=rtl] .axm-go svg{transform:scaleX(-1)}
.axm-card.i{min-height:156px}
.axm-card.i .axm-cs{margin-top:5px}

/* a wide card: the last of an odd number */
.axm-card.w{grid-column:1/-1;min-height:0;padding:15px}
.axm-wh{display:flex;align-items:center;gap:12px;min-width:0}
.axm-wt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.axm-wt b{font-size:15.5px;font-weight:700;line-height:1.3;color:var(--ink)}
.axm-wt small{font-size:12.5px;color:var(--sub);line-height:1.4;margin-top:2px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.axm-wn{flex:none;display:flex;flex-direction:column;align-items:flex-end;text-align:end}
.axm-wn b{font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.axm-wn small{font-size:11.5px;color:var(--sub);margin-top:3px;white-space:nowrap}
.axm-wb{display:flex;align-items:center;gap:10px;margin-top:14px}
.axm-wb .axm-bar{flex:1 1 auto}
.axm-wb b{font-size:12.5px;font-weight:700;color:var(--ink)}
.axm-btn{flex:none;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 15px;border-radius:17px;background:var(--green);color:#fff;font-size:13px;font-weight:600;white-space:nowrap}
[dir=rtl] .axm-btn svg{transform:scaleX(-1)}

/* the soft mint card that leads a page */
.axm-hero{position:relative;display:block;overflow:hidden;border-radius:26px;padding:16px 16px 14px;text-align:start;color:#0C2418;cursor:pointer;
  background:linear-gradient(150deg,#EDF6F0 0%,#DFEFE5 55%,#D0E7D9 100%);border:1px solid #CDE3D5;
  box-shadow:0 1px 2px rgba(19,83,51,.05),0 16px 32px -20px rgba(19,83,51,.32);-webkit-tap-highlight-color:transparent;transition:transform .15s var(--ease)}
.axm-hero:active{transform:scale(.99)}
.axm-hero::before,.axm-hero::after{content:"";position:absolute;border-radius:50%;border:1.5px solid rgba(19,83,51,.07);pointer-events:none}
.axm-hero::before{width:280px;height:280px;inset-inline-end:-110px;top:-120px}
.axm-hero::after{width:420px;height:420px;inset-inline-end:-180px;top:-190px}
.axm-hero>*{position:relative}
.axm-hh{display:flex;align-items:center;gap:12px}
.axm-ht{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.axm-ht b{font-size:18px;font-weight:700;color:var(--green);line-height:1.25;letter-spacing:-.01em}
.axm-ht small{font-size:12.5px;color:#4E6A5A;margin-top:2px;line-height:1.35}
.axm-go.w{width:34px;height:34px;background:#fff;color:var(--green);border:1px solid rgba(19,83,51,.12)}
.axm-hb{display:flex;align-items:center;gap:18px;margin-top:14px}
.axm-ring{position:relative;width:100px;height:100px;flex:none}
.axm-ring svg{display:block;width:100%;height:100%}
.axm-ring.sm{width:82px;height:82px}
.axm-rc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.axm-rc b{font-size:27px;font-weight:700;letter-spacing:-.03em;line-height:1;color:#0C2418}
.axm-rc b i{font-style:normal;font-size:14px;color:#4E6A5A;font-weight:600}
.axm-ring.sm .axm-rc b{font-size:23px}
.axm-rc small{font-size:11px;color:#4E6A5A;margin-top:4px;line-height:1.2}
.axm-hst{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.axm-hst>span{display:flex;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px solid rgba(19,83,51,.11)}
.axm-hst>span:nth-last-child(2){border-bottom:0}
.axm-hst>span.dk{display:none}
.axm-hst b{font-size:20px;font-weight:700;letter-spacing:-.02em;min-width:34px;color:#0C2418;line-height:1.2}
.axm-hst small{font-size:12.5px;color:#4E6A5A;line-height:1.3}
.axm-week{display:none}
.axm-hp{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.axm-hp.dk{display:none}
.axm-pw{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:15px;background:#fff;border:1px solid rgba(19,83,51,.12);color:var(--green);font-size:12.5px;font-weight:600;white-space:nowrap;min-width:0}
.axm-pw i.o{display:block;width:13px;height:13px;border-radius:50%;border:1.6px solid rgba(19,83,51,.32);flex:none}
.axm-kits{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.axm-kits .axm-pw{justify-content:flex-start;overflow:hidden;text-overflow:ellipsis}
/* the toolkits as a short list, one pill under the other, each its own tap (his ask, 21 Oct 2026, 13:52); four (AX
   Education, with SDACT) a little closer, so every name shows in full */
.axm-kits.n1,.axm-kits.n2,.axm-kits.n3,.axm-kits.n4{grid-template-columns:minmax(0,1fr);gap:7px}
.axm-kits.n4{gap:6px}
.axm-kits.n4 .axm-kit{height:29px}
.axm-kits .axm-kit{width:100%;height:32px;padding:0 10px 0 11px;gap:8px;cursor:pointer;transition:transform .15s var(--ease),background .15s}
.axm-kits .axm-kit:active{transform:scale(.97)}
.axm-kit .axm-kn{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start}
.axm-kit > svg{flex:none;display:block}
.axm-kit > svg.kc{opacity:.45}
[dir=rtl] .axm-kit > svg.kc{transform:scaleX(-1)}
.axm-gb{display:flex;align-items:center;gap:14px;margin-top:12px}
.axm-gt{flex:1 1 auto;min-width:0;font-size:13.5px;line-height:1.45;color:#2F4A3B}
.axm-hn{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}
.axm-hn b{font-size:26px;font-weight:700;letter-spacing:-.03em;color:#0C2418;line-height:1.1}
.axm-hn small{font-size:12.5px;color:#4E6A5A}
.axm-mark{flex:none;padding-inline-end:4px}
.axm-mark svg{display:block}
.axm-tag{display:block;margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--gold-ink);text-transform:uppercase}
.axm-bigic{flex:none;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:#fff;color:var(--green);border:1px solid rgba(19,83,51,.12)}
.axm-logo{flex:none;width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:#fff;border:1px solid rgba(19,83,51,.12);overflow:hidden}
.axm-logo img{width:100%;height:100%;object-fit:contain}
.axm-logo i{font-style:normal;font-weight:700;color:var(--green);font-size:18px}

/* the left panel: titles only, and what Search finds inside them */
.drawer .drow.axm-t{font-weight:500}
.axm-q:empty{display:none}
.axm-q{padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid #ECEDEC}
.drawer .drow.axm-qr{height:auto;min-height:52px;padding-top:6px;padding-bottom:6px}
.axm-qt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.axm-qt b{font-weight:500;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.axm-qt small{font-size:12.5px;color:var(--ph);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* a small phone: a little tighter */
@media (max-width:359px){
  .axm-grid{gap:10px}
  .axm-card{padding:13px}
  .axm-h1{font-size:25px;line-height:31px}
  .axm-ring{width:88px;height:88px}
  .axm-hb{gap:14px}
}

/* a computer (js/desk.js): a wider page, three cards a row, the leading card in full */
html.ax-desk .view.axm-v{--read:1040px}
@media (min-width:900px){
  .axm-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .axm-hero{padding:24px 26px}
  .axm-hb{gap:40px;margin-top:22px}
  .axm-ring{width:150px;height:150px}
  .axm-ring.sm{width:120px;height:120px}
  .axm-rc b{font-size:38px}
  .axm-ring.sm .axm-rc b{font-size:30px}
  .axm-rc small{font-size:12.5px}
  .axm-hst{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px}
  .axm-hst>span{border-bottom:0}
  .axm-hst>span:nth-child(-n+2){border-bottom:1px solid rgba(19,83,51,.11)}
  .axm-hst>span.dk{display:flex}
  .axm-week{display:block;width:220px;flex:none}
  .axm-hp.dk{display:flex;margin-top:20px}
  .axm-kits{grid-template-columns:repeat(4,minmax(0,190px))}
  .axm-kits.n1,.axm-kits.n2,.axm-kits.n3{grid-template-columns:repeat(3,minmax(0,200px));gap:10px}
  .axm-kits.n4{grid-template-columns:repeat(4,minmax(0,190px));gap:10px}
  .axm-kits .axm-kit,.axm-kits.n4 .axm-kit{height:36px;padding:0 12px 0 13px}
  html.ax-desk .axm-kits .axm-kit:hover{background:#FAFBFA}
  .axm-sec{margin-top:26px}
}
.axm-week .axm-wk-t{font-size:12px;color:#4E6A5A;text-align:end;margin-bottom:10px}
.axm-week .axm-wk-b{display:flex;justify-content:space-between;align-items:flex-end;height:96px}
.axm-week .axm-wk-b span{width:18px;height:100%;display:flex;align-items:flex-end;justify-content:center}
.axm-week .axm-wk-b b{display:block;width:18px;border-radius:6px;background:rgba(19,83,51,.20)}
.axm-week .axm-wk-b b.now{background:linear-gradient(#E4BE3F,#C9A227)}
.axm-week .axm-wk-b b.dot{width:6px;height:6px;border-radius:50%;background:rgba(19,83,51,.26)}
.axm-week .axm-wk-l{display:flex;justify-content:space-between;margin-top:8px;font-size:11.5px;color:#4E6A5A}
.axm-week .axm-wk-l span{width:18px;text-align:center}

/* My Insights, the Dashboard's own page (js/insights.js), in soft mint: white cards on the soft ground */
.axm-v .ins .ins-kick{font-size:14.5px;line-height:20px;margin-top:4px}
.axm-v .ins .h1{font-size:28px;line-height:34px;letter-spacing:-.02em;margin-top:4px}
.axm-v .ins .ins-lead{font-size:14.5px;line-height:21px;margin:6px 0 16px}
.axm-v .ins .ins-me{background:#fff;border:1px solid #ECEEEA;border-radius:22px;box-shadow:0 1px 2px rgba(12,12,12,.04),0 12px 30px -14px rgba(19,83,51,.16);padding:16px}
.axm-v .ins .ins-me .chip{background:#F2F3F1}
.axm-v .ins .ins-me .chip.g{background:var(--green-soft);color:var(--green)}
.axm-v .ins .ins-me .chip.y{background:var(--gold-soft);color:var(--gold-ink)}
.axm-v .ins .ins-seg{background:#ECEEEB;margin:2px 0 14px}
.axm-v .ins .ins-seg button.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(12,12,12,.10)}
.axm-v .ins .axm-days{margin-bottom:14px}
.axm-v .ins .ins-kpis{gap:12px}
.axm-v .ins .ins-kpi{background:#fff;border:1px solid #ECEEEA;border-radius:22px;box-shadow:0 1px 2px rgba(12,12,12,.04),0 12px 30px -14px rgba(19,83,51,.16);padding:15px;min-height:120px}
.axm-v .ins .ins-kpi .l{font-size:14px;color:#2A2A2A;padding-inline-end:44px}
.axm-v .ins .ins-kpi .v{font-size:28px;margin-top:10px;letter-spacing:-.03em}
.axm-v .ins .ins-kpi .ki{width:36px;height:36px;border-radius:12px;background:var(--green-soft);inset-inline-end:14px;top:14px}
.axm-v .ins .ins-grid{gap:14px;margin-top:2px}
.axm-v .ins .ins-card{background:#fff;border:1px solid #ECEEEA;border-radius:22px;box-shadow:0 1px 2px rgba(12,12,12,.04),0 12px 30px -14px rgba(19,83,51,.16);padding:16px}
.axm-v .ins .ins-card h3{font-size:16px;font-weight:700;letter-spacing:-.01em}
.axm-v .ins .ins-row,.axm-v .ins .ins-next,.axm-v .ins .ins-tile,.axm-v .ins .ins-empty{background:#F6F7F5;border:1px solid #EEF0ED}
.axm-v .ins .ins-next .ni{background:var(--green-soft)}
.axm-v .ins .ins-bar{background:#E7EBE7}
.axm-v .ins .ins-heat i{background:#EEF1EE}
.axm-v .ins .ins-foot{margin-top:20px}
.axm-v .ins .ins-foot .bs{background:#fff;border:1px solid #E3E7E3}

/* the active days, in soft mint; this week's bars show on a phone here */
.axm-days .axm-hh{align-items:flex-start}
.axm-days .axm-hb{justify-content:space-between;align-items:flex-end}
.axm-week.on{display:block;flex:1 1 auto;max-width:210px}
.axm-days .axm-week .axm-wk-b{height:66px}
.axm-days .axm-week .axm-wk-b span,.axm-days .axm-week .axm-wk-b b{width:14px}
.axm-days .axm-week .axm-wk-b b.dot{width:6px}
.axm-days .axm-week .axm-wk-l span{width:14px}

/* the Dashboard's other cards, small, under the insights */
.axm-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.axm-mini{display:flex;flex-direction:column;align-items:flex-start;min-width:0;background:#fff;border:1px solid #ECEEEA;border-radius:20px;padding:13px;cursor:pointer;
  box-shadow:0 1px 2px rgba(12,12,12,.04),0 12px 30px -14px rgba(19,83,51,.16);-webkit-tap-highlight-color:transparent;transition:transform .15s var(--ease)}
.axm-mini:active{transform:scale(.97)}
.axm-mini .axm-chip{width:34px;height:34px;border-radius:11px}
.axm-mini .axm-mt{font-size:13px;font-weight:600;color:#2A2A2A;line-height:1.25;margin-top:12px;min-height:32px;overflow-wrap:normal}
.axm-mini .axm-big{font-size:22px;margin-top:6px}
.axm-mini .axm-big small{font-size:11.5px}
.axm-mini .axm-cs{font-size:11.5px;margin-top:4px}
@media (min-width:900px){
  .axm-strip{gap:18px}
  .axm-mini{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;padding:16px}
  .axm-mini .axm-chip{grid-row:span 2;width:44px;height:44px;border-radius:14px}
  .axm-mini .axm-mt{margin-top:0;min-height:0;font-size:14px}
  .axm-mini .axm-big,.axm-mini .axm-cs{margin-top:4px}
  .axm-days .axm-week .axm-wk-b{height:96px}
  .axm-days .axm-week .axm-wk-b span,.axm-days .axm-week .axm-wk-b b,.axm-days .axm-week .axm-wk-l span{width:18px}
  .axm-week.on{max-width:240px}
  .axm-days .axm-hb{justify-content:flex-start;gap:64px}
}

/* the AX Enterprise and AX Family Home (js/edition.js), in soft mint: the leading card soft, the tiles and rows white */
.axm-v .eh-who{background:#fff;border:1px solid #E3E9E4}
.axm-v .eh-hero,.axm-v .eh-hero.gold{color:#0C2418;background:linear-gradient(150deg,#EDF6F0 0%,#DFEFE5 55%,#D0E7D9 100%);border:1px solid #CDE3D5;
  box-shadow:0 1px 2px rgba(19,83,51,.05),0 16px 32px -20px rgba(19,83,51,.32)}
.axm-v .eh-hero::after,.axm-v .eh-hero.gold::after{background:none;border:1.5px solid rgba(19,83,51,.07);width:280px;height:280px;inset-inline-end:-110px;top:-120px}
.axm-v .eh-hero::before{content:"";position:absolute;width:420px;height:420px;inset-inline-end:-180px;top:-190px;border-radius:50%;border:1.5px solid rgba(19,83,51,.07);pointer-events:none}
.axm-v .eh-hk{color:var(--green);opacity:1}
.axm-v .eh-ht{color:var(--green)}
.axm-v .eh-hs{color:#2F4A3B;opacity:1}
.axm-v .eh-hb,.axm-v .eh-hero.gold .eh-hb{background:var(--green);color:#fff;box-shadow:0 6px 14px -6px rgba(19,83,51,.5)}
.axm-v .eh-sec{margin-inline-start:2px;margin-top:22px;margin-bottom:10px}
.axm-v .eh-sec span{color:var(--ink);font-weight:700;font-size:16.5px}
.axm-v .eh-grid{gap:12px}
.axm-v .eh-tile,.axm-v .eh-tile:hover{background:#fff;border:1px solid #ECEEEA;border-radius:22px;box-shadow:0 1px 2px rgba(12,12,12,.04),0 12px 30px -14px rgba(19,83,51,.16)}
.axm-v .eh-ti{width:36px;height:36px;border-radius:12px}
.axm-v .eh .grp{gap:0;background:#fff;border:1px solid #ECEEEA;border-radius:22px;overflow:hidden;box-shadow:0 1px 2px rgba(12,12,12,.04),0 12px 30px -14px rgba(19,83,51,.16)}
.axm-v .eh .grp .row{background:#fff;margin-top:0;border-radius:0}
.axm-v .eh .grp .row+.row{border-top:1px solid #F0F1EF}

/* the school's and the company's dashboards in soft mint (views/axm-dash.css): the phone's status area above them too */
#app:has(> #wsDeck.on.bare > .ws-frame.on[src*="view-school.html"]) > .view,
#app:has(> #wsDeck.on.bare > .ws-frame.on[src*="view-enterprise.html"]) > .view{--bg:#F5F6F4}
#app:has(> #wsDeck.on.bare > .ws-frame.on[src*="view-school.html"]) > .view .topfade,
#app:has(> #wsDeck.on.bare > .ws-frame.on[src*="view-enterprise.html"]) > .view .topfade{background:linear-gradient(#F5F6F4 58%,rgba(245,246,244,0))}

/* Advanced in soft gold, Lite in soft mint (his ask, 21 Oct 2026, 13:12: "If I select advanced dashboard, the green
   mint should be the same tone of gold. If I change to light, then you show the mint color"). js/axcards.js puts the
   class axm-gold on the page while Advanced is chosen. The leading card turns soft gold with its title in deep gold;
   the ring, this week's bar for today and the small icons turn the app's green, as the gold ring does on soft mint.
   Lite keeps every soft mint rule above exactly as it is. */
html.axm-gold{--axg-bg:linear-gradient(150deg,#FBF8EC 0%,#F6EED5 55%,#F0E4BE 100%);--axg-bd:#E9DDB3;--axg-sh:0 1px 2px rgba(140,122,20,.06),0 16px 32px -20px rgba(140,122,20,.40);
  --axg-dc:rgba(140,122,20,.10);--axg-t:#7A6A10;--axg-n:#2B2508;--axg-s:#6B6031;--axg-x:#4A4220;--axg-l:rgba(140,122,20,.16);--axg-p:rgba(140,122,20,.22)}
html.axm-gold .axm-hero{color:var(--axg-n);background:var(--axg-bg);border-color:var(--axg-bd);box-shadow:var(--axg-sh)}
html.axm-gold .axm-hero::before,html.axm-gold .axm-hero::after{border-color:var(--axg-dc)}
html.axm-gold .axm-hero .axm-ht b{color:var(--axg-t)}
html.axm-gold .axm-hero .axm-ht small,html.axm-gold .axm-hero .axm-rc b i,html.axm-gold .axm-hero .axm-rc small,html.axm-gold .axm-hero .axm-hst small,
html.axm-gold .axm-hero .axm-hn small,html.axm-gold .axm-hero .axm-wk-t,html.axm-gold .axm-hero .axm-wk-l{color:var(--axg-s)}
html.axm-gold .axm-hero .axm-rc b,html.axm-gold .axm-hero .axm-hst b,html.axm-gold .axm-hero .axm-hn b{color:var(--axg-n)}
html.axm-gold .axm-hero .axm-gt{color:var(--axg-x)}
html.axm-gold .axm-hero .axm-hst>span{border-bottom-color:var(--axg-l)}
html.axm-gold .axm-hero .axm-chip.w,html.axm-gold .axm-hero .axm-go.w,html.axm-gold .axm-hero .axm-bigic{color:var(--axg-t);border-color:var(--axg-p)}
html.axm-gold .axm-hero .axm-logo{border-color:var(--axg-p)}
html.axm-gold .axm-hero .axm-logo i{color:var(--axg-t)}
html.axm-gold .axm-hero .axm-pw{color:var(--axg-t);border-color:var(--axg-p)}
html.axm-gold .axm-hero .axm-pw>svg:not(.kc){stroke:var(--green)}
html.axm-gold .axm-hero .axm-pw i.o{border-color:rgba(140,122,20,.42)}
html.axm-gold .axm-hero .axm-tag{color:var(--green)}
html.axm-gold .axm-hero .axm-ring stop:nth-child(1){stop-color:#4FAE80}
html.axm-gold .axm-hero .axm-ring stop:nth-child(2){stop-color:#23804F}
html.axm-gold .axm-hero .axm-ring stop:nth-child(3){stop-color:#135333}
html.axm-gold .axm-hero .axm-ring svg>circle:first-of-type{stroke:var(--axg-l)}
html.axm-gold .axm-hero .axm-week .axm-wk-b b{background:rgba(140,122,20,.24)}
html.axm-gold .axm-hero .axm-week .axm-wk-b b.now{background:linear-gradient(#2F9566,#135333)}
html.axm-gold .axm-hero .axm-week .axm-wk-b b.dot{background:rgba(140,122,20,.34)}
/* the Home of AX Enterprise and AX Family, should Advanced be chosen there */
html.axm-gold .axm-v .eh-hero,html.axm-gold .axm-v .eh-hero.gold{color:var(--axg-n);background:var(--axg-bg);border-color:var(--axg-bd);box-shadow:var(--axg-sh)}
html.axm-gold .axm-v .eh-hero::before,html.axm-gold .axm-v .eh-hero::after{border-color:var(--axg-dc)}
html.axm-gold .axm-v .eh-hk,html.axm-gold .axm-v .eh-ht{color:var(--axg-t)}
html.axm-gold .axm-v .eh-hs{color:var(--axg-x)}

/* Test Bank in the card style (his ask, 21 Oct 2026, 13:53; js/testhub.js): the search as a white bar under the head,
   the cards, then Your Papers as one white card */
.view.v-testhub.axm-v .th-search{width:100%;margin:16px 0 14px;height:50px;border-radius:25px;background:#fff;border:1px solid #ECEEEA;
  box-shadow:0 1px 2px rgba(12,12,12,.04),0 10px 24px -16px rgba(19,83,51,.20);color:#5C5C5C;font-size:15px;gap:10px}
.view.v-testhub.axm-v .th-search span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.view.v-testhub.axm-v .axm-sec{margin-top:24px}
.view.v-testhub.axm-v .th-cards > .grp{gap:0;background:#fff;border:1px solid #ECEEEA;border-radius:22px;overflow:hidden;box-shadow:0 1px 2px rgba(12,12,12,.04),0 12px 30px -14px rgba(19,83,51,.16)}
.view.v-testhub.axm-v .th-cards > .grp .row{background:#fff;margin-top:0;border-radius:0}
.view.v-testhub.axm-v .th-cards > .grp .row+.row{border-top:1px solid #F0F1EF}
@media (min-width:900px){ .view.v-testhub.axm-v .th-search{max-width:560px;height:52px} }

/* AxioCHAT and AxioHUB, Back and Forward (Update 3 and Update 4, 21 Oct 2026, js/axswitch.js) */
/* one small pill in the middle of the top bar, a toggle: AxioCHAT (the brand green) and AxioHUB (its gold); the side on
   screen sits on the white thumb, which slides across when the side changes */
.tb.axb-tb > .sp,.tb.axb-tb > .tb-title{display:none}
.tb .axb-mid{flex:1 1 auto;min-width:0;display:flex;justify-content:center;pointer-events:none}
.tb .axb-sw{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;align-items:center;height:32px;padding:2px;border-radius:16px;background:#E9ECE9;
  box-shadow:inset 0 0 0 1px rgba(12,12,12,.06);pointer-events:auto;max-width:100%;flex:none;-webkit-tap-highlight-color:transparent;isolation:isolate}
.tb .axb-sw::after{content:"";position:absolute;left:0;right:0;top:50%;height:46px;transform:translateY(-50%)}
.tb .axb-th{position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(12,12,12,.10),0 2px 8px rgba(12,12,12,.06);z-index:0;
  transition:transform .26s cubic-bezier(.3,.7,.2,1)}
.tb .axb-sw.b .axb-th{transform:translateX(100%)}
[dir="rtl"] .tb .axb-sw.b .axb-th{transform:translateX(-100%)}
[dir="rtl"] .tb .axb-th{left:auto;right:2px}
.tb .axb-sw.moved.b .axb-th{animation:axbIn .3s cubic-bezier(.3,.7,.2,1)}
.tb .axb-sw.moved.c .axb-th{animation:axbOut .3s cubic-bezier(.3,.7,.2,1)}
@keyframes axbIn{from{transform:translateX(0)}to{transform:translateX(100%)}}
@keyframes axbOut{from{transform:translateX(100%)}to{transform:translateX(0)}}
[dir="rtl"] .tb .axb-sw.moved.b .axb-th{animation-name:axbInR}
[dir="rtl"] .tb .axb-sw.moved.c .axb-th{animation-name:axbOutR}
@keyframes axbInR{from{transform:translateX(0)}to{transform:translateX(-100%)}}
@keyframes axbOutR{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.tb .axb-k{position:relative;z-index:1;display:block;padding:0 11px;height:28px;line-height:28px;font-size:13px;font-weight:600;white-space:nowrap;text-align:center;color:#6B6B6B;transition:color .2s}
.tb .axb-sw.c .kc{color:var(--green)}
.tb .axb-sw.b .kb{color:var(--gold-ink)}
.tb .axb-sw:active{transform:scale(.97)}
/* nothing slides under the top bar: while a page scrolls, the band behind the bar is solid to just below it */
.view:has(> .tb.axb-tb) > .topfade{height:calc(var(--sat) + 86px);background:linear-gradient(#fff calc(var(--sat) + 68px),rgba(255,255,255,0))}
.view.axm-v:has(> .tb.axb-tb) > .topfade{background:linear-gradient(#F5F6F4 calc(var(--sat) + 68px),rgba(245,246,244,0))}
html.ax-desk .view:has(> .tb.axb-tb) > .topfade{height:90px;background:linear-gradient(#fff 72px,rgba(255,255,255,0))}
html.ax-desk .view.axm-v:has(> .tb.axb-tb) > .topfade{background:linear-gradient(#F5F6F4 72px,rgba(245,246,244,0))}
/* Back and Forward in one white key; Forward fades while there is no page to go forward to */
.tb .axnav{flex:none;display:inline-flex;align-items:center;height:47.667px;border-radius:24px;background:#fff;box-shadow:var(--float);pointer-events:auto}
.tb .axnav.gone{display:none}
.tb .axnav.solo.gone.keep{display:inline-flex;visibility:hidden}
.tb .axnav > button{width:42px;height:47.667px;display:grid;place-items:center;border-radius:24px;transition:transform .12s,opacity .15s}
.tb .axnav > button:active{transform:scale(.92)}
.tb .axnav > button svg{display:block}
.tb .axnav .axsep{width:1px;height:22px;background:#ECEEEA;flex:none}
.tb .axnav .axf.off{opacity:.28;pointer-events:none}
.tb .axnav.solo > button{width:47.667px}
/* the chat page's own keys for a member: the six dots only (the picture is at the foot of the panel, About is a card of the Board) */
html.axb-on .tb .hb-keys .hb-priv,html.axb-on .tb .hb-keys .hb-about,html.axb-on .tb .hb-keys .hb-me{display:none}
@media (max-width:380px){
  .tb.axb-tb{gap:6px}
  .tb .axb-k{padding:0 9px;font-size:12.5px}
  .tb .axnav > button{width:38px}
}
@media (max-width:340px){.tb .axb-k{padding:0 7px;font-size:12px}}
/* on a computer, AxioHUB keeps its side panel (it has its left panel again, 22 Oct 2026) */

/* Every card its own character (Update 6, 21 Oct 2026, js/axcards.js): a calm tone per feature, a larger icon in it, a
   short bar of the tone under the name, and the icon once more, large and faint, in the corner. Not flashy. */
.axm-card[data-tone="green"]{--tn:19,83,51;--td:19,83,51}
.axm-card[data-tone="teal"]{--tn:16,122,112;--td:12,96,88}
.axm-card[data-tone="olive"]{--tn:104,128,40;--td:76,98,24}
.axm-card[data-tone="slate"]{--tn:70,92,110;--td:52,70,86}
.axm-card[data-tone="clay"]{--tn:176,104,64;--td:146,80,44}
.axm-card[data-tone="gold"]{--tn:167,148,33;--td:128,110,14}
.axm-card[data-tone]{overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 70% at 100% 0%,rgba(var(--tn),.085),rgba(var(--tn),0) 62%),#fff;border-color:rgba(var(--tn),.12)}
.axm-card[data-tone] > .axm-wm{position:absolute;z-index:-1;inset-inline-start:-18px;bottom:-24px;width:104px;height:104px;color:rgb(var(--tn));opacity:.065;transform:rotate(-12deg);pointer-events:none}
.axm-card[data-tone] > .axm-wm svg{display:block;width:104px;height:104px}
[dir="rtl"] .axm-card[data-tone] > .axm-wm{transform:rotate(12deg)}
/* the icon: larger, in its tone, on a soft wash of it */
.axm-card[data-tone] .axm-chip{width:42px;height:42px;border-radius:14px;color:rgb(var(--td));
  background:linear-gradient(150deg,rgba(var(--tn),.17),rgba(var(--tn),.07));box-shadow:inset 0 0 0 1px rgba(var(--tn),.14)}
.axm-card[data-tone] .axm-chip svg{width:21px;height:21px}
/* the name: darker and firmer, with a short bar of the tone under it */
.axm-card[data-tone] .axm-it,.axm-card[data-tone] .axm-ct{color:#0C0C0C;font-weight:700;letter-spacing:-.01em}
.axm-card[data-tone] .axm-it::after,.axm-card[data-tone] .axm-ct::after{content:"";display:block;width:22px;height:3px;border-radius:2px;margin-top:7px;background:rgb(var(--tn));opacity:.85}
.axm-card[data-tone].w .axm-wt b{color:#0C0C0C}
/* the way in, in its tone */
.axm-card[data-tone] .axm-go{background:rgba(var(--tn),.10);color:rgb(var(--td))}
/* the gold of the Board: the cards keep their tones, the page keeps its gold lead card */
html.axm-gold .axm-card[data-tone] .axm-chip{color:rgb(var(--td))}
/* a card with a number keeps its name on one line beside the icon: the icon there stays at its own size */
.axm-card[data-tone] .axm-ch .axm-chip{width:36px;height:36px;border-radius:12px}
.axm-card[data-tone] .axm-ch .axm-chip svg{width:19px;height:19px}
/* AxioHUB: the member's picture in the bell's place, centred in the round key (22 Oct 2026) */
.tb .rb.axb-me{padding:0}
.tb .rb.axb-me .me-av{flex:none;width:40px;height:40px}
.tb .rb.axb-me .dot{right:2px;top:2px;width:11px;height:11px;background:var(--gold)}
/* a page's Select key beside its title (AX.selHead, js/core.js), 22 Oct 2026 */
.selhd{display:flex;align-items:center;justify-content:space-between;gap:12px}
.selhd>.h1{flex:1;min-width:0}
.selhd-k{flex:none;height:38px;padding:0 16px;border-radius:19px;background:var(--green-soft);color:var(--green);font:inherit;font-size:15.5px;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.selhd-k:active{transform:scale(.95)}
/* AxioCHAT and AxioHUB never shrink: each half keeps room for its whole word */
.tb.axb-tb .axb-mid{min-width:max-content}
.tb.axb-tb .axb-sw{flex:none;min-width:max-content}
.tb.axb-tb .axb-sw>span{white-space:nowrap}
/* the switch on the screen's centre line when it fits (js/axswitch.js centre) */
.tb.axb-tb > .axb-mid.axb-abs{position:absolute;left:var(--axb-x,0);top:0;bottom:0;display:flex;align-items:center;justify-content:flex-start;flex:none;min-width:0}
.tb.axb-tb > .axb-end{margin-inline-start:auto}
/* Tailored for You in the dashboards' card style (22 Oct 2026): the soft mint card first, white cards under section titles */
.view.axm-v .ot-tl .ot-hero{margin-top:18px;cursor:default}
.view.axm-v .ot-tl .ot-hero:active{transform:none}
.view.axm-v .ot-tl .ot-hav{flex:none;display:grid;place-items:center;width:44px;height:44px}
.view.axm-v .ot-tl .ot-hav .me-av{width:40px;height:40px}
.view.axm-v .ot-tl .ot-hero .axm-hp{margin-top:14px}
.view.axm-v .ot-tl .ot-hdesign{font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;background:#fff}
.view.axm-v .ot-tl .ot-hsk{color:#4E6A5A;font-weight:500;max-width:100%}
.view.axm-v .ot-tl .ot-hsk span,.view.axm-v .ot-tl .ot-hdesign span{overflow:hidden;text-overflow:ellipsis}
.view.axm-v .ot-tl .lab,.view.axm-v .ot-tl .tut-lab{margin:24px 2px 11px;padding:0;font-size:16.5px;line-height:22px;font-weight:700;letter-spacing:-.01em;color:var(--ink);text-transform:none;display:flex;align-items:center;gap:8px}
.view.axm-v .ot-tl .ot-tlform .lab{margin:18px 2px 8px;font-size:14px;line-height:19px;font-weight:600;color:var(--sub)}
.view.axm-v .ot-tl .ot-tlform > .lab:first-child{margin:0 0 12px;font-size:16.5px;line-height:22px;font-weight:700;color:var(--ink)}
.view.axm-v .ot-tl .tut-mine,.view.axm-v .ot-tl .tut-sug,.view.axm-v .ot-tl .tut-allow,.view.axm-v .ot-tl .ot-tlform,.view.axm-v .ot-tl .ot-res,.view.axm-v .ot-tl .ot-job{
  background:#fff;border:1px solid #ECEEEA;border-radius:22px;box-shadow:0 1px 2px rgba(12,12,12,.04),0 12px 30px -14px rgba(19,83,51,.16)}
.view.axm-v .ot-tl .tut-mines,.view.axm-v .ot-tl .tut-sugs{display:flex;flex-direction:column;gap:12px}
.view.axm-v .ot-tl .tut-mine,.view.axm-v .ot-tl .tut-sug{margin:0}
.view.axm-v .ot-tl .tut-allow{margin-top:12px}
.view.axm-v .ot-tl .ot-tlform{margin-top:24px;padding:18px 16px 16px}
.view.axm-v .ot-tl .ot-tlform .grp .row{background:#F5F6F4}
.view.axm-v .ot-tl .ot-tlform .seg{background:#F2F3F1}
.view.axm-v .ot-tl .ot-tlform .input{background:#F5F6F4}
.view.axm-v .ot-tl .ot-tlrow{background:#fff}
.view.axm-v .ot-tl > .grp{border:1px solid #ECEEEA;box-shadow:0 1px 2px rgba(12,12,12,.04),0 12px 30px -14px rgba(19,83,51,.16)}
.view.axm-v .ot-tl .ot-lvnote{margin:8px 4px 0;font-size:13px;line-height:18px;color:var(--sub)}
.view.axm-v .ot-tl .ot-tlform .ot-flb{margin-inline-start:2px}
/* CV Builder: Replace and Delete under the saved CV (22 Oct 2026) */
.cv-acts{margin-top:12px}
.cv-acts .bs{height:48px;border-radius:24px;font-size:16px;gap:8px}
.cv-acts .cv-del{color:var(--red)}

/* AxioHUB's left panel (his approved picture, 22 Oct 2026, 10:21 to 10:23, js/axcards.js C.nav): each main title with
   the features inside it on one grey line and a drop down arrow; a tap opens its features as rows, each going straight
   to its window. The page on screen: its title in soft gold, and its row in soft gold when the title is open. */
.drawer.axn-dr .dlist.axn-list{padding:10px 0 10px}
.drawer.axn-dr .axn-co{display:flex;align-items:center;gap:12px;flex:none;margin:calc(var(--sat) + 10px) 12px 0;padding:8px 10px 14px;min-height:60px;text-align:start;color:var(--ink);border-bottom:1px solid #ECEEEA;border-radius:0}
.drawer.axn-dr .axn-co .axn-mk{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#fff;border:1px solid #ECEEEA;box-shadow:0 1px 2px rgba(12,12,12,.05)}
.drawer.axn-dr .axn-co .axn-mk svg,.drawer.axn-dr .axn-co .axn-mk img{display:block;max-width:30px;max-height:30px}
.drawer.axn-dr .axn-co .axn-cot{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.drawer.axn-dr .axn-co b{font-size:17px;line-height:22px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer.axn-dr .axn-co small{font-size:13px;line-height:18px;font-weight:500;color:var(--ph);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawer.axn-dr .eds-co,.drawer.axn-dr .ent-co{border-bottom:1px solid #ECEEEA;border-radius:0;padding-bottom:14px}
.axn{display:flex;flex-direction:column;gap:2px;padding:0 10px}
.axn-g{display:flex;flex-direction:column}
.axn-h{display:flex;align-items:flex-start;gap:14px;width:100%;padding-block:10px;padding-inline:12px 10px;border-radius:14px;text-align:start;color:#2A342F;-webkit-tap-highlight-color:transparent;transition:background .15s}
.axn-h:active{background:#F4F5F3}
.axn-i{flex:none;display:grid;place-items:center;width:22px;height:22px;color:#5E6963}
.axn-i svg,.axn-cv svg{display:block}
.axn-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.axn-tx b{display:block;font-size:15.5px;line-height:22px;font-weight:500;color:#2A342F}
.axn-tx small{display:block;margin-top:2px;font-size:12.5px;line-height:17px;font-weight:400;color:#7A837E}
.axn-cv{flex:none;display:grid;place-items:center;width:22px;height:22px;color:#9AA29D;transition:transform .22s cubic-bezier(.3,.7,.2,1),color .15s}
.axn-g.on > .axn-h{background:#F7F0DC;box-shadow:inset 0 0 0 1px #EBDDB3}
.axn-g.on > .axn-h .axn-i,.axn-g.on > .axn-h b{color:#7E6418}
.axn-g.on > .axn-h small{color:#9A8650}
.axn-g.on > .axn-h .axn-cv{color:#B59A55}
.axn-g.open > .axn-h small{display:none}
.axn-g.open > .axn-h b{font-weight:600;color:var(--ink)}
.axn-g.open.on > .axn-h b{color:#7E6418}
.axn-g.open > .axn-h .axn-cv{transform:rotate(180deg);color:#7E6418}
.axn-s{display:none;flex-direction:column;margin-block:2px 6px;margin-inline-start:22px;padding-inline-start:12.5px;border-inline-start:1.5px solid #E6E2D2}
.axn-g.open > .axn-s{display:flex;animation:axnIn .22s cubic-bezier(.3,.7,.2,1)}
@keyframes axnIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.axn-r{display:flex;align-items:center;gap:8px;width:100%;min-height:40px;padding-block:9px;padding-inline:12px 10px;border-radius:10px;text-align:start;font-size:14.5px;line-height:20px;font-weight:400;color:#4A554F;-webkit-tap-highlight-color:transparent;transition:background .15s}
.axn-r > span{flex:1 1 auto;min-width:0}
.axn-r .axn-x{flex:none;color:#9AA29D}
[dir=rtl] .axn-r .axn-x{transform:scaleX(-1)}
.axn-r:active{background:#F4F5F3}
.axn-r.on{background:#F7F0DC;box-shadow:inset 0 0 0 1px #EBDDB3;color:#7E6418;font-weight:500}
@media (prefers-reduced-motion:reduce){.axn-g.open > .axn-s{animation:none}.axn-cv{transition:none}}
/* The top bar of every page for a member (his asks, 22 Oct 2026, 12:49 to 13:29: "reduce the sizes so that it is
   synchronized", "the profile icon and the nine dots icon should be almost ... similar size of the AxioCHAT and
   AxioHUB", "the back button between the left panel window ... and the AxioCHAT ... everything stays inside that same
   line"): the menu key, Back, the dots and the picture all 34 px (32 px on a small phone), close to the switch's own
   32 px, the dots and the picture as two keys a little apart, and the switch on the screen's centre line */
.tb.axb-tb.axb-hub{gap:6px}
.tb.axb-hub > .rb{width:34px;height:34px}
.tb.axb-hub > .rb .menu-ic{width:34px;height:34px}
.tb.axb-hub > .rb.axbk1 svg{width:19px;height:19px}
.tb.axb-hub > .rb > svg:not(.menu-ic){max-width:19px;max-height:19px}
.tb.axb-hub > .rb .dot{right:2px;top:2px;width:8px;height:8px}
.tb.axb-hub > .rb.axb-me{background:transparent;box-shadow:none}
.tb.axb-hub > .rb.axb-me .me-av{width:26px!important;height:26px!important;font-size:10px!important;--rw:2.5px!important;--rg:1.5px!important}
.tb.axb-hub > .rb.axb-me .dot{top:0;right:0}
.tb.axb-hub > .hb-keys .hb-dots{width:34px;height:34px}
.tb.axb-hub > .hb-keys .hb-dots svg{width:16px;height:16px}
.tb .axb-rk{flex:none;display:inline-flex;align-items:center;gap:6px;pointer-events:auto}
.tb .axb-rk > button{position:relative;flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.tb .axb-rk > button:active{transform:scale(.92)}
.tb .axb-rk .axb-dots{background:#fff;box-shadow:var(--float)}
.view.axm-v .tb .axb-rk .axb-dots{box-shadow:0 1px 2px rgba(12,12,12,.05),0 4px 14px -4px rgba(12,12,12,.10)}
.tb .axb-rk .axb-dots svg{display:block;width:16px;height:16px}
.tb .axb-rk .axb-dots.on{color:var(--gold-ink)}
.tb .axb-rk .axb-pic .me-av{flex:none;width:26px;height:26px}
.tb .axb-rk .axb-pic .dot{position:absolute;top:0;inset-inline-end:0;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px #fff}
@media (max-width:380px){
  .tb.axb-tb.axb-hub{gap:5px}
  .tb.axb-hub > .rb,.tb.axb-hub > .rb .menu-ic{width:32px;height:32px}
  .tb.axb-hub > .rb.axb-me .me-av{width:24px!important;height:24px!important;font-size:9px!important}
  .tb.axb-hub > .hb-keys .hb-dots{width:32px;height:32px}
  .tb .axb-rk{gap:5px}
  .tb .axb-rk > button{width:32px;height:32px}
  .tb .axb-rk .axb-dots svg{width:15px;height:15px}
  .tb .axb-rk .axb-pic .me-av{width:24px;height:24px}
}
/* Every card the same shape (his ask and approved picture, 22 Oct 2026, js/axcards.js card()): the icon at the top left,
   the name on one line with its short bar, the same space for what is inside, and the foot (a short word and the way in) */
.axm-card.u{padding:16px;min-height:0}
.axm-card.u > .axm-chip{align-self:flex-start}
.axm-card.u .axm-it{display:block;margin-top:12px;font-size:16.5px;line-height:22px;white-space:nowrap;overflow:hidden;min-width:0}
.axm-card.u .axm-ub{display:flex;flex-direction:column;align-items:flex-start;height:72px;margin-top:12px;overflow:hidden;min-width:0}
.axm-card.u .axm-big{margin-top:0;font-size:28px;line-height:30px;height:30px}
.axm-card.u .axm-big small{font-size:13.5px}
.axm-card.u .axm-types{width:100%;margin-top:10px;gap:6px}
.axm-card.u .axm-types>span{flex-direction:row;justify-content:center;gap:4px;height:30px;padding:0 4px;border-radius:10px}
.axm-card.u .axm-types>span>*{flex:none}
.axm-card.u .axm-types b{font-size:13px;line-height:1}
.axm-card.u .axm-types small{font-size:11.5px;line-height:1;max-width:none;overflow:visible}
.axm-card.u .axm-vis{width:100%;margin-top:8px}
.axm-card.u .axm-vis .axm-spark{max-width:none}
.axm-card.u .axm-big + .axm-vis .axm-bar{margin-top:6px}
.axm-card.u .axm-cs{margin-top:0;font-size:13px;line-height:18px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.axm-card.u .axm-big + .axm-cs{margin-top:8px;-webkit-line-clamp:2}
.axm-card.u .axm-cn{margin-top:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.axm-card.u .axm-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;height:30px;margin-top:12px}
.axm-card.u .axm-fn{flex:1 1 auto;min-width:0;font-size:12.5px;line-height:16px;font-weight:500;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:359px){.axm-card.u{padding:14px}.axm-card.u .axm-it{font-size:15.5px}}
.axm-grid.two .axm-card.u .axm-it{display:flex;flex-direction:column;justify-content:flex-end;height:54px}
/* one top line on every screen (22 Oct 2026): the chat home's own keys give way to AxioHUB's pair; a page's own keys
   sit beside its title */
.tb.axb-hub > .hb-keys.axb-off,.tb.axb-hub > .hb-lang.axb-off{display:none!important}
.axb-hd{align-items:flex-start}
.axb-hd > .axb-pa{margin-top:7px}
.axb-hd > .axm-h1{flex:1;min-width:0}
.axb-hd > .axm-h1 + .axb-pa{margin-top:2px}
.axb-pa{flex:none;display:inline-flex;align-items:center;gap:8px}
.axb-pa > .rb{width:38px;height:38px}
.axb-pa > .rb > svg{width:20px;height:20px}
.axb-pa > .rb .dot{right:3px;top:3px;width:8px;height:8px}
.axb-pa > .pillb{height:38px;padding:0 14px;border-radius:19px;gap:6px;font-size:15px;font-weight:600}
.axb-pa > .pillb svg{width:18px;height:18px;flex:none}
.axb-pa > .hb-lang{height:38px;line-height:38px;padding:0 14px;font-size:14.5px}
.axb-par{display:flex;justify-content:flex-end;margin:0 0 10px}
/* the keys' rings (his ask, 22 Oct 2026, 14:51): the dots in a green circle so everyone sees them; the menu and Back keys
   with a soft ring */
.tb .axb-rk .axb-dots{box-shadow:inset 0 0 0 1.5px var(--green),var(--float)}
.tb.axb-hub > .rb[data-act="menu"],.tb.axb-hub > .rb.axbk1{box-shadow:inset 0 0 0 1px rgba(12,12,12,.14),var(--float)}
.view.axm-v .tb.axb-tb .axb-rk .axb-dots{box-shadow:inset 0 0 0 1.5px var(--green),0 1px 2px rgba(12,12,12,.05),0 4px 14px -4px rgba(12,12,12,.10)}
.view.axm-v .tb.axb-hub > .rb[data-act="menu"],.view.axm-v .tb.axb-hub > .rb.axbk1{box-shadow:inset 0 0 0 1px rgba(12,12,12,.14),0 1px 2px rgba(12,12,12,.05),0 4px 14px -4px rgba(12,12,12,.10)}
/* AxioCHAT and AxioHUB are names in Latin letters: in Arabic too they keep the app's Latin font, so they sit in the middle
   of the switch (the Arabic font drew them high, his screenshot, 22 Oct 2026, 14:57) */
.tb .axb-sw .axb-k,[dir="rtl"] .tb .axb-sw .axb-k{font-family:"PJS",system-ui,-apple-system,sans-serif}
.drawer.axn-dr .axn-co .axn-lat{font-family:"PJS",system-ui,-apple-system,sans-serif}

/* Bento cards (22 Oct 2026, pictures approved): only the cards; every page around them keeps its own theme.
   Each card: its soft tone, an icon in a tinted box, the icon again large and faint as its picture, a floating count.
   No :has() and no :is() (older Android WebViews drop a whole rule that uses them). Right to left mirrors by itself. */
.bx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(132px,auto);gap:12px;margin-top:4px}
.bx-grid.alt{grid-auto-rows:auto}
.bx{--bx-tint:#E8FBF3;--bx-ib:#D1FAE5;--bx-st:#047857;--bx-dot:#10B981;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:12px;min-width:0;padding:18px;border-radius:26px;text-align:start;color:var(--ink,#0B1220);font:inherit;background:linear-gradient(150deg,#FFFFFF 42%,var(--bx-tint) 100%);border:1px solid rgba(15,23,42,.06);box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 28px rgba(15,23,42,.07);-webkit-tap-highlight-color:transparent;transition:transform .14s ease,box-shadow .14s ease}
html[dir=rtl] .bx{background:linear-gradient(210deg,#FFFFFF 42%,var(--bx-tint) 100%)}
button.bx{cursor:pointer;width:100%}
button.bx:active{transform:scale(.982)}
button.bx:focus-visible{outline:3px solid var(--bx-dot);outline-offset:2px}
.bx.t-emerald{--bx-tint:#E8FBF3;--bx-ib:#D1FAE5;--bx-st:#047857;--bx-dot:#10B981}
.bx.t-indigo{--bx-tint:#EEF0FF;--bx-ib:#E0E7FF;--bx-st:#4338CA;--bx-dot:#6366F1}
.bx.t-rose{--bx-tint:#FFEFF3;--bx-ib:#FFE4E6;--bx-st:#BE123C;--bx-dot:#F43F5E}
.bx.t-amber{--bx-tint:#FFF6E5;--bx-ib:#FEF3C7;--bx-st:#B45309;--bx-dot:#F59E0B}
.bx.t-sky{--bx-tint:#E6F4FF;--bx-ib:#E0F2FE;--bx-st:#0369A1;--bx-dot:#0EA5E9}
.bx.t-violet{--bx-tint:#F3EEFF;--bx-ib:#EDE9FE;--bx-st:#6D28D9;--bx-dot:#8B5CF6}
.bx.t-teal{--bx-tint:#E4FAF8;--bx-ib:#CCFBF1;--bx-st:#0F766E;--bx-dot:#14B8A6}
.bx.t-orange{--bx-tint:#FFF0E6;--bx-ib:#FFEDD5;--bx-st:#C2410C;--bx-dot:#F97316}
.bx-ic{position:relative;z-index:2;flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--bx-ib);color:var(--bx-st)}
.bx-n{position:absolute;z-index:3;top:16px;inset-inline-end:16px;display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px 0 9px;border-radius:14px;background:rgba(255,255,255,.94);border:1px solid rgba(15,23,42,.06);box-shadow:0 6px 16px rgba(15,23,42,.10);font-size:12px;line-height:1;font-weight:700;color:var(--ink,#0B1220);white-space:nowrap}
.bx-n i{display:block;width:7px;height:7px;border-radius:50%;background:var(--bx-dot);flex:none}
.bx-n.soon{color:var(--sub,#5B6475);box-shadow:none}
.bx-n.soon i{background:#A3AAB8}
.bx-art{position:absolute;z-index:1;pointer-events:none;color:var(--bx-st);opacity:.32;line-height:0}
.bx-art svg{position:relative;display:block}
.bx-blob{position:absolute;border-radius:50%;background:var(--bx-dot);opacity:.22}
.bx-tx{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0;max-width:100%}
.bx-eye{font-size:11px;line-height:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bx-st)}
.bx-code{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:7px;background:var(--bx-ib);color:var(--bx-st);font-size:11.5px;font-weight:700;letter-spacing:.03em;white-space:nowrap;direction:ltr}
.bx-t{display:block;font-size:18.5px;line-height:1.16;font-weight:700;letter-spacing:-.01em;color:var(--ink,#0B1220);overflow-wrap:anywhere}
.bx-s{display:block;font-size:12.5px;line-height:17px;font-weight:500;color:var(--sub,#5B6475)}
.bx.soon .bx-t,.bx.soon .bx-s{opacity:.62}
.bx.soon .bx-art{opacity:.14}
/* the five shapes */
.bx.k-hero{grid-column:span 2;min-height:200px}
.bx.k-hero .bx-tx{max-width:62%}
.bx.k-hero .bx-t{font-size:24px;letter-spacing:-.02em}
.bx.k-hero .bx-art{inset-inline-end:-14px;top:34px}
.bx.k-hero .bx-blob{width:160px;height:160px;inset-inline-start:-6px;top:-4px}
.bx.k-tall{grid-row:span 2}
.bx.k-tall .bx-art{inset-inline-start:22px;top:62px}
.bx.k-tall .bx-blob{width:110px;height:110px;inset-inline-start:-3px;top:-3px}
.bx.k-small{padding:16px;gap:8px}
.bx.k-small .bx-ic{width:38px;height:38px;border-radius:12px}
.bx.k-small .bx-n{top:14px;inset-inline-end:14px;height:26px;font-size:11.5px}
.bx.k-small .bx-art{inset-inline-end:-26px;bottom:-30px;opacity:.18}
.bx.k-small .bx-t{font-size:15.5px;line-height:1.18}
.bx.k-small .bx-s{font-size:11.5px;line-height:15px;max-width:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.bx.k-small .bx-tx{width:100%}
.bx.k-pair{min-height:200px}
.bx.k-pair .bx-art{inset-inline-end:-20px;top:30px}
.bx.k-strip{grid-column:span 2;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;min-height:132px;padding-inline-end:60px}
.bx.k-strip .bx-ic{width:52px;height:52px;border-radius:17px}
.bx.k-strip .bx-n{top:14px;inset-inline-end:14px}
.bx.k-strip .bx-art{inset-inline-end:-64px;top:-58px;opacity:.2}
.bx.k-strip .bx-s{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx.k-strip .bx-tx{flex:1;min-width:0}
.bx-go{position:absolute;z-index:3;bottom:14px;inset-inline-end:14px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--green,#135333);color:#fff}
html[dir=rtl] .bx-go svg{transform:scaleX(-1)}
/* the 'alt' layout: a wide card, then a pair, for cards that carry more words (the assessments) */
.bx.k-wide{grid-column:span 2;min-height:210px;justify-content:flex-start}
.bx.k-wide .bx-tx{max-width:68%;margin-top:auto}
.bx.k-wide .bx-t{font-size:22px;letter-spacing:-.02em}
.bx.k-wide .bx-art{inset-inline-end:-18px;top:30px}
.bx.k-wide .bx-blob{width:146px;height:146px;inset-inline-start:-5px;top:-4px}
.bx.k-alt{min-height:250px;justify-content:flex-start}
.bx.k-alt .bx-tx{margin-top:auto;width:100%}
.bx.k-alt .bx-t{font-size:17px}
.bx.k-alt .bx-art{inset-inline-end:-16px;top:52px;opacity:.22}
/* a section title over a grid */
.bx-sec{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:26px 2px 12px}
.bx-sec b{font-size:18px;line-height:24px;font-weight:700;color:var(--ink,#0B1220)}
.bx-sec span{flex:none;font-size:13px;font-weight:600;color:var(--sub,#5B6475)}
/* a card's own foot (the assessments: done, the score, the way in) */
.bx-foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;width:100%;margin-top:10px}
.bx-done{display:inline-flex;align-items:center;gap:6px;font-size:13px;line-height:18px;font-weight:600;color:var(--bx-st)}
.bx-done svg{flex:none}
.bx-foot .chip{height:30px}
.bx-line{display:block;font-size:12.5px;line-height:17px;color:var(--sub,#5B6475)}
@media (max-width:359px){.bx-grid{gap:10px}.bx{padding:15px}.bx.k-hero .bx-t{font-size:21px}.bx-t{font-size:17px}.bx.k-small .bx-t{font-size:14.5px}}
@media (prefers-reduced-motion:reduce){.bx{transition:none}}
/* Test Generator's three steps on its wide card (Your Growth, 22 Oct 2026) */
.axm-card.w .axm-steps{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.axm-card.w .axm-steps span{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 6px;border-radius:15px;background:rgba(255,255,255,.75);border:1px solid rgba(0,0,0,.05);font-size:12.5px;font-weight:600;color:var(--ink,#141414)}
.axm-card.w .axm-steps b{display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:rgba(var(--tn,70,92,110),.12);color:rgb(var(--td,52,70,86));font-size:11px;font-weight:700}
/* the count under a card's title and line, "41 exams" (22 Oct 2026, 18:26) */
.bx-c{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:13px;line-height:18px;font-weight:700;color:var(--bx-st)}
.bx-c i{display:block;width:7px;height:7px;border-radius:50%;background:var(--bx-dot);flex:none}
.bx.k-small .bx-c{font-size:12px;margin-top:2px}
.bx.k-hero .bx-c,.bx.k-wide .bx-c{font-size:14px}
/* every card the same size (22 Oct 2026, 18:29): two to a row, one height, the same places for the icon, the name,
   its line and the count, so every row lines up */
.bx-grid.even{grid-auto-rows:206px}
.bx.k-even{height:206px;padding:16px;gap:8px;justify-content:flex-start}
.bx.k-even .bx-ic{width:40px;height:40px;border-radius:13px}
.bx.k-even .bx-art{inset-inline-end:-18px;top:22px;opacity:.22}
.bx.k-even .bx-tx{margin-top:auto;width:100%}
.bx.k-even .bx-t{font-size:16px;line-height:20px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:normal}
.bx.k-even .bx-s{font-size:12px;line-height:16px;height:32px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.bx.k-even .bx-c{font-size:12.5px;margin-top:6px}
.bx.k-even .bx-n.soon{top:14px;inset-inline-end:14px;height:26px;font-size:11.5px}
@media (min-width:900px){.bx-grid.even{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Design A, 3D Pictures (22 Oct 2026, 18:43): equal cards, a 3D picture, a white label with the name, the count and
   the green way in */
.bx-grid.pic{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:216px;gap:12px}
@media (min-width:900px){.bx-grid.pic{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bx.k-pic{height:216px;padding:10px;gap:0;justify-content:flex-start;align-items:stretch;background:linear-gradient(180deg,#FFFFFF 0%,#EEF3F7 100%);border:1px solid #E3E8EE;box-shadow:0 6px 18px rgba(15,23,42,.06)}
html[dir=rtl] .bx.k-pic{background:linear-gradient(180deg,#FFFFFF 0%,#EEF3F7 100%)}
.bx-pic{flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.bx-pic img{display:block;width:84px;height:84px;object-fit:contain;filter:drop-shadow(0 10px 14px rgba(15,23,42,.18))}
.bx.flagpic .bx-pic img{width:72px;height:72px;border-radius:50%;filter:drop-shadow(0 8px 12px rgba(15,23,42,.16))}
.bx-lab{flex:none;display:flex;align-items:center;gap:8px;min-height:72px;padding:9px 10px 9px 12px;border-radius:17px;background:#fff;box-shadow:0 2px 8px rgba(15,23,42,.06)}
.bx-lt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;text-align:start}
.bx-lt b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:13.5px;line-height:16.5px;font-weight:700;color:var(--ink,#141414)}
.bx-lt span{font-size:12px;line-height:15px;font-weight:600;color:var(--sub,#6B7385)}
.bx-ar{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--green,#135333);color:#fff}
html[dir=rtl] .bx-ar svg{transform:scaleX(-1)}
.bx.k-pic.soon .bx-pic img{opacity:.45;filter:grayscale(.5)}
.bx.k-pic.soon .bx-lt b{opacity:.65}
@media (max-width:359px){.bx-grid.pic{gap:10px}.bx-pic img{width:72px;height:72px}.bx-lt b{font-size:13px}}
.bx.k-pic.lw .bx-lt b{font-size:12px;line-height:15px}
.bx.k-pic.lw2 .bx-lt b{font-size:11px;line-height:14px}
@media (max-width:379px){.bx.k-pic .bx-lab{padding:8px 8px 8px 10px;gap:6px}.bx.k-pic .bx-ar{width:28px;height:28px}.bx.k-pic.lw .bx-lt b{font-size:11px;line-height:14px}.bx.k-pic.lw2 .bx-lt b{font-size:10.5px;line-height:13.5px}}