/* AxioraX New: Know Yourself in three spaces, and the assessments taken in the app (js/assess.js).
   Every rule starts with .asx so no other page can change. No :has() and no :is(): older Android WebViews drop
   a whole rule that uses them. */
.asx .asx-div{display:flex;align-items:center;gap:10px;margin:26px 2px 10px;font-size:14px;line-height:19px;font-weight:600;color:var(--sub)}
.asx .asx-tag{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:13px;font-size:13px;font-weight:700;letter-spacing:.02em;white-space:nowrap;direction:ltr;unicode-bidi:isolate;flex:none}
.asx .asx-tag.main{background:var(--green-soft);color:var(--green)}
.asx .asx-tag.edu{background:#E6EFF7;color:#1F5F8B}
.asx .asx-tag.family{background:var(--gold-soft);color:var(--gold-ink)}
.asx .asx-list{display:flex;flex-direction:column;gap:10px}
.asx .asx-card{display:flex;align-items:flex-start;gap:14px;width:100%;padding:16px 16px 16px 14px;border-radius:24px;background:var(--row);color:var(--ink);text-align:start;transition:transform .12s}
.asx .asx-card:active{transform:scale(.985)}
.asx .asx-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:#fff;color:var(--green)}
.asx .asx-ic.edu{color:#1F5F8B}
.asx .asx-ic.family{color:var(--gold-ink)}
.asx .asx-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.asx .asx-tx b{font-size:16.5px;line-height:22px;font-weight:700}
.asx .asx-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-size:13px;line-height:18px;color:var(--sub);font-weight:600}
.asx .asx-code{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:11px;background:#fff;color:var(--sub);font-size:12px;font-style:normal;font-weight:700;letter-spacing:.02em;white-space:nowrap;direction:ltr;unicode-bidi:isolate}
.asx .asx-desc{font-size:13.5px;line-height:19px;color:var(--sub)}
.asx .asx-done{display:flex;align-items:center;gap:6px;font-size:13.5px;line-height:19px;color:var(--green);font-weight:600}
.asx .asx-done svg{flex:none}
.asx .asx-rt{flex:none;align-self:center}
.asx .asx-rt .chip{height:28px}
html[dir=rtl] .asx .asx-card{padding:16px 14px 16px 16px}

/* the opening page */
.asx .asx-hint{display:block;margin-top:10px;font-size:13.5px;line-height:19px;color:var(--sub)}
.asx .asx-about{display:flex;flex-direction:column;gap:14px;padding:16px}
.asx .asx-about .kf{display:flex;flex-direction:column;gap:7px}
.asx .asx-about .kfl{font-size:14px;line-height:19px;font-weight:600;color:var(--sub);margin:0 2px}
.asx .asx-about .pqsel{background:#fff}
.asx .asx-about.asx-want{animation:asxWant .9s var(--ease)}
@keyframes asxWant{0%,100%{box-shadow:0 0 0 0 rgba(19,83,51,0)}30%{box-shadow:0 0 0 3px rgba(19,83,51,.35)}}
.asx .asx-pw{margin-top:22px}
.asx .asx-wait{display:flex;justify-content:center;padding:80px 0}

/* one statement */
.asx .asx-part{margin-top:14px;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ph)}
.asx .asx-part + .pqsec{margin-top:6px}
.asx .asx-pair{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.asx .asx-st{display:flex;flex-direction:column;gap:6px;padding:14px 16px;border-radius:18px;background:var(--green-soft)}
.asx .asx-st.b{background:#E6EFF7}
.asx .asx-st small{font-size:12px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--green)}
.asx .asx-st.b small{color:#1F5F8B}
.asx .asx-st span{font-size:17px;line-height:24px;font-weight:600;color:var(--ink)}
.asx .asx-pair + .kxans{margin-top:16px}
.asx .asx-skip{display:block;margin:14px auto 0;padding:8px 16px;border-radius:12px;font-size:14px;line-height:19px;font-weight:600;color:var(--ph)}
.asx .asx-skip.on{color:var(--green)}

/* the result */
.asx .asx-two{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px;padding:18px 10px}
.asx .asx-ring{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;min-width:0}
.asx .asx-ring .psn{font-size:28px;line-height:30px;font-weight:700;direction:ltr}
.asx .asx-ring .psn small{font-size:15px;font-weight:700;margin-inline-start:1px}
.asx .asx-ring b{margin-top:8px;font-size:15px;line-height:20px;font-weight:700}
.asx .asx-ring span{font-size:13px;line-height:18px;color:var(--sub);font-weight:600}
.asx .asx-sum{background:var(--green-soft)}
.asx .asx-act{background:var(--gold-soft)}
.asx .asx-bar{position:relative}
.asx .asx-bar .pqbl span{min-width:0}
.asx .asx-bar .pqbl small{display:block;margin-top:2px;font-size:12px;line-height:16px;color:var(--ph);font-weight:600}
.asx .asx-band{display:inline-flex;align-items:center;height:22px;margin-top:7px;padding:0 9px;border-radius:11px;font-size:12px;font-weight:700}
.asx .asx-dom{margin-top:10px;padding:16px 18px 18px;display:flex;flex-direction:column;gap:14px}
.asx .asx-domh{display:flex;align-items:center;justify-content:space-between;gap:10px}
.asx .asx-domh b{font-size:16px;line-height:21px;font-weight:700}
.asx .asx-domh span{display:flex;align-items:center;gap:8px;flex:none;font-size:16px;font-weight:700}
.asx .asx-domh i{font-style:normal;font-size:12px;font-weight:700;height:22px;line-height:22px;padding:0 9px;border-radius:11px}
.asx .asx-subs{display:flex;flex-direction:column;gap:8px;margin-top:-4px;padding:12px 14px;border-radius:16px;background:#fff}
.asx .asx-subs div{display:grid;grid-template-columns:minmax(0,1fr) 64px 40px;align-items:center;gap:10px;font-size:13.5px;line-height:18px;color:var(--sub)}
.asx .asx-subs i{display:block;height:6px;border-radius:3px;background:#E2E4E0;overflow:hidden}
.asx .asx-subs i b{display:block;height:100%;border-radius:3px;background:var(--gold)}
.asx .asx-subs em{font-style:normal;font-weight:700;color:var(--ink);text-align:end;font-variant-numeric:tabular-nums}
.asx .asx-idx{display:grid;grid-template-columns:1fr;gap:10px}
.asx .asx-idx .tile{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"v c" "v n" "v p";column-gap:14px;row-gap:3px;align-items:center;padding:16px 18px}
.asx .asx-idx .tile > b{grid-area:v;font-size:26px;line-height:30px;font-weight:700;min-width:62px}
.asx .asx-idx .asx-code{grid-area:c;justify-self:start}
.asx .asx-idx strong{grid-area:n;font-size:15px;line-height:20px;font-weight:700}
.asx .asx-idx p{grid-area:p;margin:0;font-size:13.5px;line-height:19px;color:var(--sub)}
.asx .asx-alert{display:flex;align-items:flex-start;gap:10px;margin-top:14px;padding:14px 16px;border-radius:20px;font-size:14.5px;line-height:21px}
.asx .asx-alert svg{flex:none;margin-top:1px}
.asx .asx-alert b{display:block;margin-bottom:2px}
.asx .asx-alert.red{background:#FBE3DF;color:#7A1C15}
.asx .asx-alert.amber{background:#FDEBD5;color:#6B3D00}
.asx .asx-ls{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:20px 18px}
.asx .asx-ls > b{font-size:21px;line-height:27px;font-weight:700;color:var(--green)}
.asx .asx-type{font-size:14px;font-weight:700;letter-spacing:.08em;color:var(--gold-ink)}
.asx .asx-ls em{font-style:normal;font-size:13.5px;line-height:19px;font-weight:600;color:var(--sub)}
.asx .asx-ls p{margin:4px 0 0;font-size:14.5px;line-height:21px;color:var(--ink)}
.asx .asx-dims{margin-top:10px;padding:16px 18px;display:flex;flex-direction:column;gap:16px}
.asx .asx-dimh{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:14px;line-height:19px;font-weight:600}
.asx .asx-dimh i{flex:none;font-style:normal;font-size:12.5px;font-weight:700;color:var(--green)}
.asx .asx-bip{display:flex;align-items:center;gap:10px;margin-top:8px}
.asx .asx-bip > span{flex:none;width:16px;text-align:center;font-size:13px;font-weight:700;color:#B9B9B9}
.asx .asx-bip > span.on{color:var(--green)}
.asx .asx-bip i{position:relative;flex:1;height:8px;border-radius:4px;background:#E2E4E0}
.asx .asx-bip u{position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;margin-left:-1px;background:#C9CCC7;border-radius:1px}
.asx .asx-bip b{position:absolute;top:0;bottom:0;border-radius:4px;background:var(--green)}
.asx .asx-bip em{position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--green)}
.asx .asx-guide{padding:14px 18px;display:flex;flex-direction:column;gap:10px}
.asx .asx-guide div{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:21px}
.asx .asx-guide .asx-code{flex:none;background:var(--green-soft);color:var(--green)}
.asx .asx-dgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.asx .asx-dtile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:14px 10px;color:var(--green)}
.asx .asx-dtile b{font-size:13.5px;line-height:18px;font-weight:700;color:var(--ink)}
.asx .asx-dtile span{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:12px;background:var(--green-soft);font-size:12.5px;font-weight:700}
.asx .asx-dtile.some{color:#A35A00}
.asx .asx-dtile.some span{background:#FDEBD5}
.asx .asx-dtile.yes{color:#A3261E}
.asx .asx-dtile.yes span{background:#FBE3DF}
.asx .asx-flags,.asx .asx-ill{padding:8px;display:flex;flex-direction:column;gap:6px}
.asx .asx-flags div,.asx .asx-ill div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 12px;border-radius:16px;background:#fff;font-size:14px;line-height:19px}
.asx .asx-flags i,.asx .asx-ill i{flex:none;font-style:normal;font-size:12px;font-weight:700;padding:3px 9px;border-radius:11px;white-space:nowrap}
.asx .asx-flags .yes i,.asx .asx-ill .still i{background:#FBE3DF;color:#A3261E}
.asx .asx-flags .some i,.asx .asx-ill .had i{background:#FDEBD5;color:#A35A00}
.asx .asx-ill .no i{background:var(--green-soft);color:var(--green)}
.asx .asx-ill .na i{background:#EDEDED;color:var(--ph)}
@media (min-width:600px){.asx .asx-idx{grid-template-columns:1fr 1fr 1fr}.asx .asx-idx .tile{grid-template-columns:1fr;grid-template-areas:"v" "c" "n" "p";text-align:start}.asx .asx-dgrid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:359px){.asx .asx-subs div{grid-template-columns:minmax(0,1fr) 44px 38px}.asx .asx-ring .psn{font-size:24px}}
@media (prefers-reduced-motion:reduce){.asx .asx-about.asx-want{animation:none}}
.asx .asx-ul{margin:4px 0 0;padding:0 0 0 18px}
html[dir=rtl] .asx .asx-ul{padding:0 18px 0 0}
.asx .asx-ul li{margin-top:4px}
/* the space switch at the top of the hub (15 Oct 2026): one space shown at a time */
.asx .asx-sw{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:18px;padding:4px;border-radius:22px;background:#EEF1EE}
.asx .asx-sw button{height:40px;border-radius:19px;font-size:14.5px;font-weight:700;color:var(--sub);white-space:nowrap;direction:ltr;unicode-bidi:isolate;transition:background-color .18s,color .18s,box-shadow .18s}
.asx .asx-sw button[aria-selected="true"]{background:#fff;box-shadow:0 2px 8px rgba(12,12,12,.08)}
.asx .asx-sw button.main[aria-selected="true"]{color:var(--green)}
.asx .asx-sw button.edu[aria-selected="true"]{color:#1F5F8B}
.asx .asx-sw button.family[aria-selected="true"]{color:var(--gold-ink)}
.asx .asx-sw + .asx-div{margin-top:18px}
/* Know Yourself as bento cards (22 Oct 2026): the cards come from css/axcards.css (.bx); here only their place on the page */
.asx .asx-bx{margin-top:2px}
.asx .asx-bx .bx.k-alt .bx-line{display:none}
.asx .asx-bx .bx.k-wide .bx-foot .bx-line{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;flex:1 1 160px;min-width:0}
.asx .asx-bx .bx-foot .asx-rt{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;margin-inline-start:auto}
.asx .asx-bx .bx.k-alt .bx-foot{flex-direction:column;align-items:flex-start}
.asx .asx-bx .bx.k-alt .bx-foot .asx-rt{margin-inline-start:0}
.asx .asx-bx .bx .asx-acline{margin-top:8px}
.asx .asx-bx .bx-tx > .bx-s{margin-top:2px}
.asx .asx-bx .bx.k-wide .bx-tx{max-width:100%}
.asx .asx-bx .bx.k-wide .bx-t,.asx .asx-bx .bx.k-wide .bx-tx > .bx-s{max-width:66%}
.asx .asx-bx .bx.k-wide .bx-line{max-width:58%}
.asx .asx-bx .bx-foot .asx-rt{align-self:auto}
.asx .asx-bx .bx.k-alt .bx-foot .asx-rt{align-self:flex-start}
.eo-bx{margin-top:16px}
.eo-bx .bx .eo-priv{margin-top:10px}
.eo-bx .bx-foot{margin-top:12px}