/* Overnight round 14 (Oct 14, 2026 ~5:55 AM CT): book, login, sessions tabs + prize counter, contact form, games tip boxes,
   home "Who is this for?", Text/email hint lines, footer. Loaded last (end of footer partial, after r13.css).
   Revert all = remove the r14.css link in src/partials/footer.html and rebuild. Each block is tagged with its SITE-CHANGES.md number. */

/* #382 Sessions: pricing tabs no longer giant boxes on phones (r12 stacked them in a column, which turned the 220px flex basis into height) */
@media (max-width:420px){.ka-tabs .ka-tab{flex:0 0 auto;height:auto}}

/* #383 Sessions: "tokens" / "dollars" sub-label sits on its own line under the tab name (was glued: "Home & familytokens") */
.ka-tabs .ka-tab{flex-direction:column;justify-content:center;text-align:center;gap:.15rem}
.ka-tabs .ka-tab small{display:block;margin-top:0}

/* #384 Book: "1. Pick your tokens" box gets inner padding (text was touching the border) */
.checkout-grid .px-box.checkout{padding:1.5rem 1.6rem}
@media (max-width:420px){.checkout-grid .px-box.checkout{padding:1.1rem 1rem}}

/* #385 Book: "Member sign in" box padding */
.checkout-grid #login.px-box{padding:1.4rem 1.5rem}

/* #386 Book: "Not ready to buy?" box padding */
.checkout-grid #login + .px-box{padding:1.4rem 1.5rem}
@media (max-width:420px){.checkout-grid #login.px-box,.checkout-grid #login + .px-box{padding:1.1rem 1rem}}

/* #387 Login: 1P / 2P player cards get inner padding */
.ps-card.px-box{padding:1.4rem 1.5rem}
@media (max-width:420px){.ps-card.px-box{padding:1.15rem 1rem}}

/* #388 Games: Tip, How to play and win boxes get inner padding */
.tip-box.px-box{padding:1.1rem 1.25rem}

/* #389 Home: "Who is this for?" cards on phones: icon on the left of both lines, title + description stacked beside it */
@media (max-width:700px){
  .who-grid .who>svg.qicon{grid-row:span 2;align-self:center}
  .who-grid .who>span,.who-grid .who>small{grid-column:2;justify-self:start;text-align:left}
}

/* #390 / #391 Text + email hint lines: on phones the email drops to its own line and the stray " · " is hidden.
   Book + Consult side boxes are narrow at every width, so there it applies on desktop too. */
.book-text-hint .sep,.consult-text-hint .sep{display:none}
.book-text-hint a[href^="mailto:"],.consult-text-hint a[href^="mailto:"]{display:table;margin-top:.35rem}
@media (max-width:480px){
  .book-text-hint .sep,.consult-text-hint .sep,.about-text-hint .sep,.game-text-hint .sep,.city-contact .sep{display:none}
  .book-text-hint a[href^="mailto:"],.consult-text-hint a[href^="mailto:"],.about-text-hint a[href^="mailto:"],.game-text-hint a[href^="mailto:"],.city-contact a[href^="mailto:"]{display:table;margin-top:.35rem}
}

/* #392 Footer "Serving:" town links: no stray dots when the row wraps on phones; even gaps instead */
@media (max-width:600px){
  .serving-links .sep{display:none}
  .serving-links a{display:inline-flex;align-items:center;min-height:44px;margin-right:1rem}
}

/* #393 Home hero: no lonely " · " after "Retro Help" when the South St. Paul pill wraps on phones */
@media (max-width:480px){.hero-loc .sep{display:none}.hero-loc .loc-pill{margin-top:.35rem}}

/* #394 Sessions prize counter: descriptions no longer underlined (easier to read); the item name keeps its underline.
   (r12's "main li a" underline rule was underlining every word on the card.) */
.tm-card,main li a.tm-card{text-decoration:none}
.tm-card .tm-name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.tm-card .tm-desc{text-decoration:none}

/* #395 Sessions prize counter: item name underline turns gold on hover / keyboard focus */
.tm-card:hover .tm-name,.tm-card:focus-visible .tm-name{text-decoration-color:#ffd23f}

/* #396 Login: help line under the cards keeps a comfortable line length on desktop */
.ps-foot.login-text-hint{max-width:40em;margin-left:auto;margin-right:auto}

/* #397 Service area: St. Paul row keeps a comfortable line length on desktop */
.sa-stp-row{max-width:44em}

/* #398 Login: card buttons full width on phones */
@media (max-width:420px){.ps-card .btn{display:flex;width:100%;justify-content:center}}

/* #399 Book: Sign in / Create free account buttons stack full width on phones */
@media (max-width:420px){#login .btn{display:flex;width:100%;justify-content:center;margin:.5rem 0}}

/* #400 Book: steps "2. Pay securely" and "3. Pick a time" get breathing room above */
.checkout>p:not(.soon-tag)+h2,.checkout>p:not(.soon-tag)+h2+.v5-stage{margin-top:1.75rem}

/* #401 Book: "What a token buys" list items spaced out */
.tok-list li{margin-bottom:.35rem}

/* #402 Book: "Popular" / "Best value" become small outlined chips */
.co-pack em{display:inline-block;justify-self:start;align-self:start;width:fit-content;border:2px solid currentColor;padding:.1rem .5rem;margin-top:.3rem;font-weight:700;line-height:1.3}

/* #403 Book: perk checks ("Mix and match", "Tokens never expire", "Share or gift") one per line on phones */
@media (max-width:480px){.co-perks{flex-direction:column;gap:.45rem}}

/* #404 Book: pack use lists ("1 token gets you…") line spacing */
.co-uses li{margin-bottom:.2rem}

/* #405 Contact: "Send my info" full width on phones */
@media (max-width:480px){#contact-form button[type=submit]{display:flex;width:100%;justify-content:center}}

/* #406 Contact: Text me / Email me radio buttons bigger (24px) */
.reach-fs input[type=radio]{width:24px;height:24px;flex:0 0 24px}

/* #407 Contact: message box only resizes up/down (no dragging it off the side of the screen) */
#contact-form textarea{resize:vertical;max-width:100%}

/* #408 Contact: "Required" hint next to Your name in gold */
#contact-form label[for="f-name"] .hint{color:#ffd23f;font-weight:700}

/* #409 Contact: a required name left empty after typing shows a pink border */
#contact-form input:user-invalid{border-color:#ff3fb4;box-shadow:0 0 0 2px rgba(255,63,180,.35)}

/* #410 Footer: Text button has proper side padding (text was touching its border) */
footer .footer-call .btn{padding:.7rem 1.25rem;min-height:48px}

/* #411 Desktop: retro gold-on-navy scrollbar */
html{scrollbar-color:#ffd23f #0b1030}

/* #412 Windows high-contrast (forced colors): buttons, cards and tabs keep visible borders and a focus outline */
@media (forced-colors:active){
  .btn,.ka-tab,.tm-card,.px-box,.quest-btn,.who{border:2px solid CanvasText}
  a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid Highlight}
}

/* #413 Login: space under the "1P · I have an account" / "2P · New here" tags */
.ps-card .ps-tag{margin:0 0 .6rem}

/* #414 Book: "COMING SOON" tag spacing inside the padded box */
.checkout .soon-tag{margin-bottom:.75rem}

/* #417 Home world map: level tiles ("Choose your quest", "Sessions", …) no longer underline the whole tile */
main li a.level,main a.level{text-decoration:none}

/* #418 Motion OFF: pricing tabs switch colors instantly (no fade) */
html.calm .ka-tab{transition:none}

/* #419 Login: the "New here" card gets a soft, slow gold glow to invite a free account (off with Motion OFF / reduce motion) */
@media (prefers-reduced-motion:no-preference){
  html:not(.calm) .ps-card.ps-new{animation:kaPixIn .5s var(--ease-out,ease-out) .1s both,r14Invite 3.2s ease-in-out 1.2s infinite}
}
@keyframes r14Invite{0%,100%{box-shadow:5px 5px 0 var(--shadow,#0b1030)}50%{box-shadow:5px 5px 0 var(--shadow,#0b1030),0 0 18px rgba(255,210,63,.45)}}

/* #420 Sessions + Home: waitlist form buttons (VIP waitlist, class waitlist) full width on phones */
@media (max-width:480px){.ka-waitlist .btn,.ka-waitlist button[type=submit]{display:flex;width:100%;justify-content:center}}

/* #421 Sessions: token planner "Buy tokens" button full width on phones */
@media (max-width:480px){.planner .btn-primary{display:flex;width:100%;justify-content:center}}

/* #422 ZIP checker: "Check" button full width on phones */
@media (max-width:480px){.area-check .ac-go{display:flex;width:100%;justify-content:center}}

/* #423 Games: "How to play" steps spaced out */
.tip-box.keys li{margin-bottom:.4rem}

/* #424 High contrast: "Popular" / "Best value" chips outlined in white */
html.hc .co-pack em{color:#fff!important;border-color:#fff!important}

/* #425 Book: pack names (Single, Bundle, Big Pack) a touch larger */
.co-pack>strong{font-size:1.3rem}

/* #426 Login: more room between the player cards and the help line */
.ps-foot.login-text-hint{margin-top:1.75rem}