/* public/shared/shell.css
   Tutor App — shared shell primitives (T11): reusable overlay/dialog, certificate
   card (Autumn "Superstar" + Annabel "achievement" skins), button + a11y helpers.
   Both rooms + the landing may consume these. Room-specific theming stays in each
   room's own file; this is the shared, theme-neutral layer. */

/* ---- a11y helpers ---- */
.ts-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.ts-skip{position:absolute;left:8px;top:-60px;z-index:99;background:#5b46cf;color:#fff;padding:12px 18px;border-radius:14px;
  font-weight:700;text-decoration:none;transition:top .2s;min-height:44px;display:inline-flex;align-items:center;}
.ts-skip:focus{top:8px;}
.ts-focusable:focus-visible,*:focus-visible{outline:4px solid #8b6cff;outline-offset:3px;}

/* ---- buttons (min 44px touch target) ---- */
.ts-btn{min-height:56px;border:none;border-radius:18px;cursor:pointer;font-weight:800;font-size:19px;
  display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 20px;transition:transform .1s;font-family:inherit;}
.ts-btn:active{transform:scale(.96);}
.ts-btn-go{background:linear-gradient(180deg,#4ED182,#36C26B);color:#fff;}
.ts-btn-ghost{background:#eee;color:#333;}

/* ---- overlay + dialog ---- */
.ts-overlay{position:fixed;inset:0;z-index:8000;background:rgba(30,24,46,.5);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:20px;animation:ts-fade .25s ease;}
@keyframes ts-fade{from{opacity:0;}to{opacity:1;}}
.ts-dialog{background:#fff;border-radius:28px;max-width:460px;width:100%;padding:26px 24px;text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.3);animation:ts-rise .35s cubic-bezier(.2,.9,.3,1);max-height:92vh;overflow-y:auto;}
@keyframes ts-rise{from{transform:translateY(28px) scale(.96);opacity:0;}to{transform:translateY(0) scale(1);opacity:1;}}

/* ---- certificate / achievement card ---- */
.ts-cert{max-width:480px;width:100%;border-radius:28px;padding:28px 24px;text-align:center;outline:none;
  box-shadow:0 24px 60px rgba(0,0,0,.32);animation:ts-rise .4s cubic-bezier(.2,.9,.3,1);max-height:92vh;overflow-y:auto;}
.ts-cert-ribbon{font-size:60px;line-height:1;}
.ts-cert h2{margin:6px 0 2px;font-size:32px;}
.ts-cert-awarded{margin:2px 0;font-size:15px;opacity:.8;}
.ts-cert-name{font-weight:800;font-size:30px;margin:4px 0;}
.ts-cert-line{border:none;border-top:3px dotted rgba(0,0,0,.15);margin:14px 0;}
.ts-cert-headline{font-weight:600;font-size:17px;line-height:1.4;margin:0 0 6px;}
.ts-cert-stats{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:8px;}
.ts-cert-stat{border-radius:16px;padding:10px 16px;min-width:84px;}
.ts-cert-stat b{font-size:24px;display:block;}
.ts-cert-stat small{font-size:12.5px;opacity:.8;}
.ts-cert-strat{display:inline-block;margin-top:12px;border-radius:16px;padding:10px 16px;font-weight:700;font-size:15px;}
.ts-cert-actions{display:flex;flex-direction:column;gap:10px;margin-top:20px;}

/* Autumn "Superstar" skin — warm, cute */
.ts-cert-autumn{background:linear-gradient(160deg,#FFFDF6,#FFF2D0);border:6px double #FFC93C;color:#5A4632;font-family:'Baloo 2','Fredoka',system-ui,sans-serif;}
.ts-cert-autumn h2{color:#FF8C61;}
.ts-cert-autumn .ts-cert-name{color:#B79CED;}
.ts-cert-autumn .ts-cert-stat{background:#fff;box-shadow:0 6px 14px rgba(150,110,60,.14);}
.ts-cert-autumn .ts-cert-strat{background:#FFF1C2;color:#9A6B12;}

/* Annabel "achievement" skin — sleek, gaming, NOT babyish */
.ts-cert-annabel{background:linear-gradient(160deg,#1b1733,#241d4a);border:1px solid rgba(140,108,255,.5);color:#e9e6ff;
  font-family:'Space Grotesk','Segoe UI',system-ui,sans-serif;box-shadow:0 24px 70px rgba(80,40,160,.45),inset 0 0 40px rgba(120,80,255,.12);}
.ts-cert-annabel h2{color:#a98bff;letter-spacing:.5px;}
.ts-cert-annabel .ts-cert-name{color:#36E2C2;}
.ts-cert-annabel .ts-cert-stat{background:rgba(255,255,255,.06);border:1px solid rgba(140,108,255,.3);}
.ts-cert-annabel .ts-cert-strat{background:rgba(54,226,194,.12);color:#36E2C2;border:1px solid rgba(54,226,194,.3);}
.ts-cert-annabel .ts-btn-ghost{background:rgba(255,255,255,.1);color:#e9e6ff;}

@media (prefers-reduced-motion:reduce){
  .ts-overlay,.ts-dialog,.ts-cert{animation:none !important;}
}