/* Rank card sharing dialog + the small share buttons next to each student's photo */
.rbs{width:min(560px,calc(100vw - 1rem));max-height:calc(100dvh - 1rem);padding:0;border:3px solid #fff;border-radius:26px;background:#fffdf4;color:#17394b;overflow:auto;font-family:'Cairo',system-ui,sans-serif;box-shadow:0 26px 70px rgba(0,0,0,.45)}
/* The global CSS reset removes the dialog's default auto margins, so center it explicitly. */
.rbs[open]{position:fixed;inset:0;margin:auto;height:fit-content;z-index:100000}
.rbs::backdrop{background:rgba(7,30,50,.82);backdrop-filter:blur(3px)}
.rbs *{box-sizing:border-box}
.rbs__head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.9rem 1.1rem;background:linear-gradient(120deg,#29585e,#39777b 55%,#c41672);color:#fff}
.rbs__head h3{margin:0;font-size:1.05rem;font-weight:900;color:#fff}
.rbs__close{display:grid;place-items:center;width:40px;height:40px;border:2px solid rgba(255,255,255,.7);border-radius:50%;background:rgba(0,0,0,.2);color:#fff;font-size:1.1rem;cursor:pointer}
.rbs__body{display:grid;gap:.8rem;padding:1rem 1.1rem 1.2rem}
.rbs__preview{display:block;width:100%;max-width:min(100%,480px);margin:0 auto;aspect-ratio:1/1;border:3px solid #ffe28b;border-radius:18px;background:#10283e;box-shadow:0 8px 22px rgba(0,0,0,.25);object-fit:contain}
.rbs__preview[hidden]{display:none}
.rbs__label{font-size:.8rem;font-weight:800;color:#4b6a74}
.rbs textarea{width:100%;min-height:190px;padding:.7rem .8rem;border:2px solid #cfe8e5;border-radius:14px;background:#fff;font:inherit;font-size:.88rem;line-height:1.9;color:#17394b;resize:vertical}
.rbs textarea:focus-visible{outline:3px solid #c41672;outline-offset:2px}
.rbs__url{margin:0;padding:.45rem .7rem;border-radius:10px;background:#edf6f5;color:#35575d;font-size:.78rem;font-weight:700;direction:ltr;text-align:center;overflow-wrap:anywhere}
.rbs__actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.rbs__btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:46px;padding:.5rem .6rem;border:0;border-radius:14px;color:#fff!important;font:inherit;font-size:.85rem;font-weight:800;text-decoration:none;cursor:pointer}
.rbs__btn--native{grid-column:1/-1;background:linear-gradient(135deg,#c41672,#7c3aed);font-size:.95rem}
.rbs__btn--wa{background:#16a34a}.rbs__btn--fb{background:#1877f2}.rbs__btn--x{background:#111827}.rbs__btn--tg{background:#229ed9}.rbs__btn--copy{background:#64748b}.rbs__btn--dl{background:#0f766e}
.rbs__status{min-height:1.3em;margin:0;text-align:center;color:#166534;font-size:.82rem;font-weight:800}
.rbs[data-busy] .rbs__actions{opacity:.45;pointer-events:none}
.rbs__btn:focus-visible,.rbs__close:focus-visible{outline:3px solid #17394b;outline-offset:2px}

/* Home page: a small share button next to every student's photo */
.rank-item-wrap{position:relative;min-width:0}
/* A hovered (or auto-spotlighted) card is raised and its photo zooms over it, so the wrapper keeps its own stacking level
   and the share button (z-index 90) always stays above the zoomed photo. */
.rank-item-wrap>.home-course-rankings__item,.rank-item-wrap>.home-course-rankings__bottom-item{width:100%}
.rank-share-mini{position:absolute;top:6px;left:6px;z-index:90;display:grid;place-items:center;width:34px;height:34px;padding:0;border:2px solid #fff;border-radius:50%;background:linear-gradient(180deg,#ffe26a,#ffb800);color:#5b3b00;line-height:1;cursor:pointer;box-shadow:0 3px 0 #c98700,0 6px 12px rgba(0,0,0,.25);transition:transform .12s}
.rank-share-mini:hover{transform:translateY(-2px) scale(1.06)}
.rank-share-mini:focus-visible{outline:3px solid #17394b;outline-offset:2px}
/* The photo sits on the right of each card, so the share button always stays on the physical left. */
/* Top-5 cards: the button sits right beside the points pill, and the footer leaves room for it */
.rank-share-mini--score{top:auto;bottom:11px;left:12px;width:30px;height:30px}
.rank-item-wrap:has(.rank-share-mini--score) .home-course-rankings__student-footer{padding-left:38px}
.rank-share-mini svg{display:block}
/* Share button inside the student details popup, next to the points badge */
.rank-share-modal{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;margin:0;padding:.45rem 1rem;border:2px solid #fff;border-radius:999px;background:linear-gradient(180deg,#ffe26a,#ffb800);color:#5b3b00;font:inherit;font-size:.9rem;font-weight:900;line-height:1.3;cursor:pointer;box-shadow:0 3px 0 #c98700,0 6px 12px rgba(0,0,0,.25);white-space:nowrap}
.rank-share-modal:hover{transform:translateY(-1px)}
.rank-share-modal:focus-visible{outline:3px solid #fff;outline-offset:2px}
.rank-share-modal svg{display:block;flex:none}
@media(max-width:640px){.rank-share-mini--score{bottom:7px;left:9px;width:28px;height:28px}.rank-item-wrap:has(.rank-share-mini--score) .home-course-rankings__student-footer{padding-left:34px}}