/* v3-share: Simple Share QR + 30-day access */

/* Header Share button: small, sits next to the stats or Log in */
header .share-open{margin-left:auto;flex:0 0 auto;min-height:44px;padding:6px 14px;border-radius:999px;font-size:15px;gap:6px;white-space:nowrap}
header .share-open+.stats,header .share-open+.button{margin-left:0}
header:has(.share-open){gap:10px}
header:has(.share-open) .brand{white-space:nowrap}
header:has(.share-open) .button{white-space:nowrap;flex:0 0 auto}
/* Phones: the Share button turns into a round icon so the header stays on one line */
@media (max-width:560px){
  header .share-open{width:44px;min-width:44px;min-height:44px;height:44px;padding:0;font-size:0;gap:0}
  header .share-open span{font-size:20px}
  header:has(.share-open) .brand{font-size:18px;gap:4px}
  header:has(.share-open) .stats{gap:10px;font-size:14px}
  header:has(.share-open) .button{min-height:44px;padding:8px 14px;width:auto;margin:0}
}

/* The sheet */
.share-sheet{border:0;padding:0;background:transparent;color:inherit;max-width:none;max-height:none;width:100%;height:100%;margin:0;inset:0}
.share-sheet[open]{display:flex;align-items:flex-end;justify-content:center}
.share-sheet::backdrop{background:rgba(10,7,6,.78)}
.share-box{position:relative;width:100%;max-width:440px;background:var(--card);border:1px solid var(--line);border-radius:28px 28px 0 0;padding:24px 20px calc(22px + env(safe-area-inset-bottom));text-align:center;box-shadow:0 -10px 40px rgba(0,0,0,.4);animation:share-up .22s ease-out}
.share-box h2{margin:4px 0 2px;font-size:24px}
.share-close{position:absolute;top:12px;right:12px;flex:0 0 auto;min-height:44px;min-width:44px;width:44px;padding:0;border-radius:50%;font-size:18px}
.share-hint{margin:0 0 14px;color:var(--muted)}
.share-qr{background:#fff;border-radius:20px;padding:12px;margin:0 auto;width:min(72vw,280px);aspect-ratio:1;box-sizing:border-box}
.share-qr svg{display:block;width:100%;height:100%}
.share-link{margin:14px 0 12px;font-size:18px;font-weight:750;color:#fff5e9;overflow-wrap:anywhere}
.share-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.share-actions button{flex:1 1 140px;min-height:52px}
.share-actions button[hidden]{display:none}
.share-done{min-height:1.4em;margin:10px 0 0;color:var(--gold);font-size:15px}
.share-big{display:inline-block;margin-top:6px;color:var(--muted)}
@keyframes share-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:700px){
  .share-sheet[open]{align-items:center}
  .share-box{border-radius:28px;padding-bottom:26px}
}
@media (prefers-reduced-motion:reduce){.share-box{animation:none}}

/* /share full screen, good on a TV in class */
.share-page{max-width:720px;margin:0 auto 24px;padding:0 16px;text-align:center}
.share-page h1{font-size:clamp(28px,5vw,48px);margin:0 0 4px}
.share-page .share-hint{font-size:clamp(16px,2.4vw,22px)}
.share-page .share-qr{width:min(84vw,50vh,520px);padding:clamp(12px,2vw,24px);border-radius:28px}
.share-page .share-link{font-size:clamp(20px,4vw,36px)}
.share-page .share-actions{max-width:440px;margin:0 auto}
body[data-page="share.share"] footer{display:none}

/* Me page: access card */
.access-card{margin:0 0 18px;display:flex;flex-direction:column;gap:6px;border-color:#3d5a3a;background:#1d2419}
.access-card .access-line{font-size:20px}
.access-card p{margin:0}
.access-card.low{border-color:var(--gold);background:#2c2214}
.access-card.ended{border-color:var(--hot);background:#2c1714}

/* Roster and student page: days left + button */
.rows>.student-row{gap:10px}
.student-link{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:4px;color:inherit;text-decoration:none}
.days-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 12px}
.rows .days-left{margin:0}
.days-left form{margin:0}
.rows .days-left form{margin-top:0}
.days-pill{display:inline-flex;align-items:center;min-height:30px;padding:3px 12px;border-radius:999px;background:#1d2419;border:1px solid #3d5a3a;color:#dff3d6;font-size:14px;font-weight:700}
.rows .days-pill{color:#dff3d6}
.days-pill.low{background:#2c2214;border-color:var(--gold);color:var(--gold)}
.days-pill.ended{background:#2c1714;border-color:var(--hot);color:#ffd0c6}
.days-pill.open{background:#30231f;border-color:var(--line);color:var(--muted)}
.add-days{flex:0 0 auto;min-height:44px;padding:6px 16px;border-radius:999px;font-size:15px}