/* Mabnak demo entry — sits on top of mabnak.css, uses the same tokens */
.demo-role-inline{position:static!important;inset:auto!important;display:block!important;padding:0!important;background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;z-index:auto}
.demo-role-inline .demo-role-modal{padding:0;background:none;border:0;box-shadow:none;max-width:none;width:100%}
.demo-role-modal{display:flex;flex-direction:column;gap:12px}
.modalbg:not(.demo-role-inline) .demo-role-modal{width:100%;max-width:520px;max-height:88dvh;overflow:auto;padding:22px 18px calc(18px + env(safe-area-inset-bottom,0px));background:var(--panel);border-radius:24px 24px 0 0;border-top:1px solid var(--mk-line)}
.demo-role-head{display:flex;flex-direction:column;gap:4px}
.demo-role-kicker{align-self:flex-start;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--mk-teal-ink);background:var(--mk-teal-soft);border-radius:999px;padding:3px 10px}
.demo-role-head h3{font-size:19px!important;font-weight:700;line-height:1.35;margin:4px 0 0!important;color:var(--text)}
.demo-role-head p{font-size:13px;color:var(--muted);line-height:1.6;margin:0!important}
.demo-role-grid{display:grid;grid-template-columns:1fr;gap:8px}
.demo-role-card{display:grid;grid-template-columns:44px minmax(0,1fr) 18px;align-items:center;gap:12px;width:100%;min-height:68px;padding:11px 14px;border-radius:var(--r-s,14px);border:1px solid var(--mk-line);background:var(--panel2);color:var(--text);text-align:start;font:inherit;transition:border-color .15s,background .15s,transform .1s}
.demo-role-card:hover{border-color:var(--mk-teal)}
.demo-role-card:active{transform:scale(.99)}
.demo-role-card:focus-visible{outline:2px solid var(--mk-teal);outline-offset:2px}
.demo-role-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--mk-teal-soft);color:var(--mk-teal)}
.demo-role-icon .role-hub-icon{display:grid;place-items:center;width:22px;height:22px;background:none!important;border:0!important;padding:0!important;margin:0!important}
.demo-role-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.demo-role-card[data-demo-role="owner"] .demo-role-icon{background:var(--mk-gold-soft);color:var(--gold)}
.demo-role-copy{display:flex;flex-direction:column;gap:2px;min-width:0}
.demo-role-copy b{font-size:14.5px;font-weight:700;line-height:1.35}
.demo-role-copy>span{font-size:12.5px;color:var(--muted);line-height:1.5}
.demo-role-go{justify-self:center;color:var(--muted);font-size:20px;line-height:1}
.demo-role-go::before{content:"\2039"}
[dir="ltr"] .demo-role-go::before{content:"\203A"}
.demo-role-modal.demo-loading .demo-role-card:not(.is-picked),.demo-loading .demo-role-card:not(.is-picked){opacity:.45}
.demo-role-card.is-picked{border-color:var(--mk-teal);background:var(--mk-teal-soft)}
.demo-login-error{font-size:12.5px;color:var(--danger);line-height:1.5}
.demo-login-error:empty{display:none}
.demo-preparing{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-s,14px);background:var(--mk-teal-soft);color:var(--mk-teal-ink)}
.demo-preparing>div:last-child{display:flex;flex-direction:column;gap:1px}
.demo-preparing b{font-size:13.5px}
.demo-preparing span{font-size:12px;opacity:.85}
.demo-preparing-spinner{flex:none;width:22px;height:22px;border-radius:50%;border:2.5px solid currentColor;border-top-color:transparent;animation:demoSpin .8s linear infinite}
@keyframes demoSpin{to{transform:rotate(360deg)}}
#demoRoleClose{min-height:46px;border-radius:var(--r-s,14px);border:1px solid var(--mk-line);background:var(--panel2);font-weight:700}
.demo-entry-footer{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:auto;padding-top:4px;font-size:13px;color:var(--muted)}
.demo-entry-footer a{color:var(--mk-teal);font-weight:600;text-decoration:none}
/* More tab tiles */
a.rz-tile{text-decoration:none}
.rz-tile-demo .role-hub-icon,.rz-tile-demo-link .role-hub-icon{color:var(--mk-teal)}
@media (min-width:760px){.demo-role-grid{grid-template-columns:1fr 1fr}.demo-role-card{min-height:76px}}
@media (prefers-reduced-motion:reduce){.demo-preparing-spinner{animation-duration:2.4s}}