/* v3-help: header Help link, Share buttons row, How to use the app tutorial */

/* Header: Help sits left of Share */
header .help-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 .help-open+.share-open{margin-left:0}
header:has(.help-open){justify-content:flex-start}

/* Share: one row of big buttons under the QR code */
.share-ways{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 auto;max-width:440px}
.share-way{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:64px;padding:8px 6px;border-radius:16px;font-size:16px;line-height:1.2;width:100%;margin:0}
.share-way span{font-size:22px;line-height:1}
.share-way b{font-weight:inherit}
.share-way[hidden]{display:none}
.share-sms{background:#3fa34d;color:#fff}
.share-wa{background:#25d366;color:#08250f}
.share-ways:has(.share-native:not([hidden])){grid-template-columns:repeat(4,1fr)}
@media (max-width:380px){.share-ways:has(.share-native:not([hidden])){grid-template-columns:repeat(2,1fr)}}
.share-box .share-qr{width:min(60vw,240px)}
.share-box .share-link{margin:10px 0}

/* Phones: Help and Share are round icons, Log in stays one line */
@media (max-width:560px){
  header .help-open{width:44px;min-width:44px;max-width:44px;height:44px;min-height:44px;padding:0;font-size:0;gap:0}
  header .help-open span{font-size:20px}
  header:has(.share-open){gap:8px;padding-inline:16px}
  header:has(.share-open) .help-open{margin-left:auto}
}
/* Phones: XP and streak stay (Jonathan wants them top right); brand drops "Academy" when logged in to keep one row. */
@media (max-width:430px){
  header:has(.share-open) .stats{font-size:13px;gap:6px}
  header:has(.share-open):has(.stats) .brand span{display:none}
}
@media (max-width:379px){
  header:has(.share-open) .brand span{display:none}
  header:has(.share-open) .button:not(.help-open){padding:8px 12px;font-size:16px}
}

/* Me page: How to use the app */
.tutorial-cta{display:flex;width:100%;gap:8px;margin:4px 0 18px}

/* Tutorial */
.tut{max-width:480px;margin:0 auto;text-align:center}
.tut-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.tut-top .eyebrow{margin:0}
.tut-skip{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;font-weight:700}
.tut-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:0;border-radius:24px;outline-offset:4px}
.tut-track::-webkit-scrollbar{display:none}
.tut-card{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;padding:0 4px;box-sizing:border-box}
.tut-pic{background:#0d0a09;border:1px solid var(--line);border-radius:24px;overflow:hidden;height:min(44vh,480px);display:flex;align-items:center;justify-content:center}
.tut-pic img{display:block;height:100%;width:auto;max-width:100%;aspect-ratio:390/600;object-fit:contain}
.tut-num{margin:12px 0 0;font-size:14px;font-weight:700;color:var(--gold)}
.tut-card h1{font-size:clamp(26px,7vw,34px);margin:2px 0 6px;letter-spacing:-.5px}
.tut-line{margin:0 auto 12px;font-size:19px;max-width:30ch;color:#f3e2d6}
.tut-start{width:100%;min-height:58px;font-size:20px;margin-top:4px}
.tut-dots{display:flex;justify-content:center;gap:4px;margin:10px 0}
.tut-dot{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px}
.tut-dot::after{content:'';width:10px;height:10px;border-radius:50%;background:#5a4036;transition:width .2s}
.tut-dot.is-on::after{width:24px;border-radius:6px;background:var(--gold)}
.tut-nav{display:none;gap:12px}
.tut-js .tut-nav{display:flex}
.tut-nav button{flex:1;min-height:56px;font-size:19px}
.tut-nav button[hidden]{display:none}
.tut-nav button:disabled{visibility:hidden}
body[data-page="help.tutorial"] main{padding-top:8px;padding-bottom:110px}
body[data-page="help.tutorial"] footer{display:none}