/*
 * The public side: the landing page (/, body.page-home) and the member area
 * (/carnet, body.page-member). The hero and the contact pills are the pieces
 * the two pages share; everything page-specific is scoped on the body class.
 * Brand tokens come from common.css.
 */

body{
  font-family: 'Work Sans', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---- The hero (the maroon card top, shared by both pages) ---------------- */
header.hero{
  background: linear-gradient(160deg, var(--maroon) 0%, var(--maroon-dark) 100%);
  color:#fff;
  position:relative;
  overflow:hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
  /* The status bar (and the Dynamic Island) sit on top of the page in an
     installed app: without this the crest is cut in half by them. */
  padding-top: env(safe-area-inset-top);
}
header.hero::after{
  content:"";
  position:absolute; inset:0;
  background: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 26px);
  pointer-events:none;
}
.hero-inner{
  max-width: 640px;
  margin: 0 auto;
  padding: 18px 16px;
  display:flex;
  align-items:center;
  justify-content:center;   /* with nobody logged in, only the crest is here */
  gap:14px;
  position:relative;
  z-index:1;
}
/* The crest is taller than it is wide; the QR is a square on a white plate.
   Matching their heights, not their widths, is what makes them weigh the same. */
.crest{ width:56px; height:auto; flex:none; display:block; }

/* ---- The contact pills (Instagram + mail, both footers) ------------------ */
.social{ display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }
.social a{
  display:flex; align-items:center; gap:8px; color: var(--maroon); text-decoration:none; font-weight:600; font-size:14px;
  background:#fff; padding:11px 18px; border-radius:999px; box-shadow: 0 4px 12px rgba(42,18,16,.12);
  transition: transform .15s ease;
}
.social a:hover{ transform: translateY(-2px); }
.social svg{ width:18px; height:18px; }

/* ==== The landing page ==================================================== */

.page-home main{ max-width: 640px; margin: 0 auto; padding: 44px 16px 30px; text-align:center; }

.page-home .join-title{
  font-family:'Anton',sans-serif;
  font-size: clamp(34px, 9vw, 52px);
  line-height:1.05;
  color: var(--maroon);
  margin:0;
  letter-spacing:.01em;
}
.page-home .join-text{
  color: var(--ink-soft);
  font-size:15px;
  max-width: 30em;
  margin: 14px auto 28px;
}

/* ==== The member area ===================================================== */

body.page-member{
  --gold: #8a8a8a;
  --gold-light: #c9c9c9;
}

/* ---- The carnet ----------------------------------------------------------
   It is a membership card, so it is built like one: the club on one side, the
   credential on the other, the member in the middle, and a band along the
   bottom saying what it is good for. Everything the card needs is on the card,
   which is why the cream strip that used to sit underneath is gone. */
.page-member .crest{ cursor:pointer; }

/* The member sits between the crest and the QR: the eye lands on the name,
   which is the one thing anybody at the door is looking for. */
.page-member .hero-member{ flex:1; min-width:0; text-align:center; }
.page-member .hero-name{
  font-family:'Anton',sans-serif;
  font-size: clamp(19px, 5.6vw, 27px);
  line-height:1.1;
  overflow-wrap:break-word;
}
.page-member .hero-num{
  margin-top:5px;
  font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color: rgba(255,255,255,.72);
}

.page-member .hero-qr{
  flex:none;
  width:66px; height:66px; padding:4px;
  background:#fff; border-radius:9px;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
  cursor:zoom-in;
  border:0;
}
.page-member .hero-qr svg{ display:block; width:100%; height:100%; }

/* The band along the bottom of the card: which season it is good for, and how
   long this person has been around. On a card, that is the small print. */
.page-member .hero-band{
  position:relative; z-index:1;
  border-top: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.14);
}
.page-member .hero-band-inner{
  max-width: 640px;
  margin: 0 auto;
  padding: 9px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color: rgba(255,255,255,.85);
}
.page-member .hero-band-since{ color: rgba(255,255,255,.6); font-weight:600; }
/* No 'since' line: the season stands alone, so it stands in the middle. */
.page-member .hero-band-inner_single{ justify-content:center; }

/* Held up to a reader, a QR the size of a stamp is a QR nobody can scan. Tap it
   and it takes the screen — which is also when the phone should be at its
   brightest, but that is not ours to decide. */
.page-member .qr-zoom{
  position:fixed; inset:0; z-index:50;
  display:none; align-items:center; justify-content:center;
  background: rgba(20,4,10,.92);
  padding:24px;
}
.page-member .qr-zoom_open{ display:flex; }
.page-member .qr-zoom-card{
  background:#fff; border-radius:18px; padding:18px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  width:min(78vw, 78vh, 420px);
}
.page-member .qr-zoom-card svg{ display:block; width:100%; height:auto; }
.page-member .qr-zoom-name{
  margin-top:14px; text-align:center; color:#fff;
  font-family:'Anton',sans-serif; font-size:20px;
}
.page-member .qr-zoom-hint{
  margin-top:6px; text-align:center;
  color: rgba(255,255,255,.6); font-size:12px;
}

@media (max-width: 380px){
  .page-member .crest{ width:48px; }
  .page-member .hero-qr{ width:58px; height:58px; }
  .page-member .hero-band-inner{ font-size:9.5px; letter-spacing:.1em; }
}

.page-member main{ max-width: 640px; margin: 0 auto; padding: 20px 16px; position:relative; z-index:2; }

/* ---- Notices (what the club announced from the panel) ---- */
.page-member .notice{
  background:#fff; border-left:4px solid var(--maroon); border-radius:12px;
  padding:12px 14px; margin-bottom:12px;
  box-shadow: 0 6px 18px rgba(42,18,16,.10);
}
.page-member .notice-title{ font-size:14.5px; font-weight:700; color: var(--maroon); }
.page-member .notice-body{ font-size:13.5px; margin-top:3px; }
.page-member .notice-when{
  font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
  color: var(--ink-soft); margin-top:7px;
}
.page-member .notice_team{ border-left-color: var(--gold); }
.page-member .notice_team .notice-title{ color: var(--ink); }

/* ---- Team sections ---- */
.page-member .team-block{ margin-bottom: 30px; }
.page-member .team-block:last-of-type{ margin-bottom: 0; }
.page-member .team-block-title{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin: 0 0 12px 2px;
}
.page-member .team-block-title h2{ font-family:'Anton',sans-serif; font-size:20px; color:var(--ink); margin:0; letter-spacing:.02em; }
.page-member .team-block-links{ display:flex; align-items:center; gap:8px; margin-left:auto; }
.page-member .team-block-links a{
  display:flex; align-items:center; gap:5px;
  font-size:11.5px; font-weight:600; color:var(--maroon); text-decoration:none;
  background:#fff; padding:6px 11px; border-radius:999px;
  box-shadow: 0 3px 10px rgba(0,0,0,.10);
  transition: transform .15s ease;
}
.page-member .team-block-links a:hover{ transform: translateY(-1px); }
.page-member .team-block-links svg{ width:13px; height:13px; flex:none; }

/* ---- Notification switch (one per team) ---- */
.page-member .bell{
  display:flex; align-items:center; gap:5px; border:0; cursor:pointer;
  font-family:'Work Sans',sans-serif; font-size:11.5px; font-weight:600;
  color: var(--ink-soft); background:#fff; padding:6px 11px; border-radius:999px;
  box-shadow: 0 3px 10px rgba(0,0,0,.10);
  transition: transform .15s ease;
}
.page-member .bell:hover{ transform: translateY(-1px); }
.page-member .bell svg{ width:13px; height:13px; flex:none; }
.page-member .bell_on{ background: var(--maroon); color:#fff; }
.page-member .bell_busy{ opacity:.55; pointer-events:none; }
.page-member .bell_unavailable{ display:none; }

.page-member .push-note{
  font-size:12px; color: var(--ink-soft); background:#fff;
  border-radius:12px; padding:10px 13px; margin: 0 0 16px;
  box-shadow: 0 6px 18px rgba(42,18,16,.08);
}

.page-member .tickets{ display:flex; flex-direction:column; gap:14px; }

.page-member .ticket{
  position:relative;
  background:#fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(42,18,16,.12);
  display:flex;
  min-height:104px;
  isolation:isolate;
}
.page-member .ticket::before, .page-member .ticket::after{
  content:""; position:absolute; width:20px; height:20px;
  background: var(--page-bg); border-radius:50%; top:50%; transform:translateY(-50%); z-index:1;
}
.page-member .ticket::before{ left:-10px; }
.page-member .ticket::after{ right:-10px; }
.page-member .ticket-stub{
  flex: 0 0 78px;
  background: var(--gold);
  color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius: 12px 0 0 12px;
  padding: 10px 4px;
  text-align:center;
}
.page-member .ticket_next .ticket-stub{ background: var(--maroon); }
.page-member .ticket-stub-weekday{ font-size:10px; font-weight:400; letter-spacing:.08em; text-transform:uppercase; opacity:.9; }
.page-member .ticket-stub-day{ font-family:'Anton',sans-serif; font-size:22px; line-height:1; margin-top:4px; }
.page-member .ticket-stub-month{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; opacity:.85; }
.page-member .ticket-stub-hour{ font-size:13px; font-weight:700; margin-top:4px; }
.page-member .ticket-content{
  flex:1; padding: 12px 50px 12px 30px; display:flex; flex-direction:column; justify-content:center; gap:5px; min-width:0;
}
.page-member .ticket_next .ticket-content{ padding: 12px 30px; }
.page-member .ticket-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color: var(--ink-soft); }
.page-member .ticket-teams{ display:flex; flex-direction:column; gap:2px; }
.page-member .ticket-team{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  font-size:16px; font-weight:600;
}
.page-member .ticket-team-name{ flex:1; min-width:0; overflow-wrap:break-word; }
.page-member .ticket-team-score{
  font-weight:700; font-size:17px; color: var(--maroon);
  flex:none; font-variant-numeric: tabular-nums;
}
.page-member .ticket-team-score_pending{ font-weight:400; font-style:italic; font-size:12px; color: var(--ink); }
.page-member .ticket-comp{ font-size:11px; color: var(--ink-soft); margin-top:2px; text-transform:uppercase; letter-spacing:.06em; font-weight:600; }

.page-member .empty-note{
  font-size:13px; color:var(--ink-soft); background:#fff; border-radius:12px; padding:14px 16px; box-shadow: 0 6px 18px rgba(42,18,16,.08);
}

.page-member footer{
  max-width:640px; margin: 4px auto 0; padding: 0 16px 30px; text-align:center;
}
.page-member .social{ gap:18px; margin-top:4px; }
.page-member .social a{ padding:9px 16px; }

.page-member .state-msg{
  text-align:center; color: var(--ink-soft); padding: 40px 16px; font-size:14px;
}

/* ---- Install prompt ---- */
.page-member .install{
  position: fixed; left:12px; right:12px; bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 20;
  display:none;
  align-items:center; gap:12px;
  background: var(--maroon); color:#fff;
  border-radius: 14px; padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  animation: rise .25s ease;
}
.page-member .install_visible{ display:flex; }
.page-member .install-icon{ width:36px; height:36px; flex:none; border-radius:9px; background:#fff; padding:3px; }
.page-member .install-text{ flex:1; min-width:0; font-size:13px; line-height:1.35; }
.page-member .install-text strong{ display:block; font-size:14px; font-weight:700; }
.page-member .install-btn{
  flex:none; border:0; cursor:pointer;
  background:#fff; color: var(--maroon);
  font-family:'Work Sans',sans-serif; font-weight:700; font-size:13px;
  padding:9px 14px; border-radius:999px;
}
.page-member .install-close{
  flex:none; border:0; cursor:pointer; background:transparent; color:#fff;
  font-size:20px; line-height:1; padding:4px 2px; opacity:.75;
}
@keyframes rise{ from{ transform: translateY(14px); opacity:0; } to{ transform:none; opacity:1; } }

/* ---- Carnet scanner (the way back in when nothing else has the token) ---- */
.page-member .scan{ text-align:center; padding: 24px 0 8px; }
.page-member .scan-text{ color: var(--ink-soft); font-size:14px; margin: 0 auto 18px; max-width: 30em; }
.page-member .scan-btn{
  position:relative; overflow:hidden; border:0; cursor:pointer;
  background: var(--maroon); color:#fff;
  font-family:'Work Sans',sans-serif; font-weight:700; font-size:15px;
  padding:12px 22px; border-radius:999px;
  box-shadow: 0 6px 18px rgba(42,18,16,.22);
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
/* The easter egg's only tell: a hidden long-press fills the button left to
   right over 6s. A short tap never lasts long enough to show it. */
.page-member .scan-btn::before{
  content:''; position:absolute; inset:0; transform-origin:left;
  transform:scaleX(0); background:rgba(255,255,255,.28); pointer-events:none;
  transition: transform 0s linear;
}
.page-member .scan-btn_holding::before{ transform:scaleX(1); transition-duration:6000ms; }
.page-member .scan-video{
  display:none; width:100%; max-width:340px; margin:18px auto 0;
  border-radius:14px; background:#000; aspect-ratio:1/1; object-fit:cover;
}
.page-member .scan-video_on{ display:block; }
.page-member .scan-hint{ font-size:12px; color:var(--ink-soft); margin-top:12px; }
/* States that a background sync can flip (just-paid member, just-added member):
   the page can't know it changed, so give a way to ask again without a manual reload. */
.page-member .refresh-btn{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px; text-decoration:none;
  border:0; cursor:pointer; background: var(--maroon); color:#fff;
  font-family:'Work Sans',sans-serif; font-weight:700; font-size:15px;
  padding:12px 22px; border-radius:999px; box-shadow: 0 6px 18px rgba(42,18,16,.22);
}
.page-member .refresh-btn svg{ width:16px; height:16px; flex:none; }
/* The click's answer can take a few seconds to arrive: the button says so at
   once instead of sitting there looking frozen. */
.page-member .refresh-btn_busy{ opacity:.75; pointer-events:none; }
.page-member .refresh-spinner{
  width:16px; height:16px; flex:none; border-radius:50%;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation: refresh-spin .8s linear infinite;
}
@keyframes refresh-spin{ to{ transform: rotate(360deg); } }
.page-member .refresh-note{ font-size:12px; color:var(--ink-soft); margin-top:14px; }
.page-member .scan-back{
  display:block; margin: 14px auto 0; border:0; background:none; cursor:pointer;
  font-family:'Work Sans',sans-serif; font-size:13px; color: var(--ink-soft); text-decoration:underline;
}

.page-member .rescan{ display:flex; justify-content:center; margin-bottom:14px; }
/* Under the "Refresca" button on the fee-pending / not-on-the-list pages: the
   way to point the app at a different carnet without touching the cookie. */
.page-member .rescan_below{ margin: 26px 0 0; }
.page-member .rescan-btn{
  display:flex; align-items:center; gap:7px; border:0; cursor:pointer;
  font-family:'Work Sans',sans-serif; font-size:12px; font-weight:600;
  color: var(--ink-soft); background:#fff; padding:8px 14px; border-radius:999px;
  box-shadow: 0 3px 10px rgba(0,0,0,.10);
}
.page-member .rescan-btn svg{ width:14px; height:14px; flex:none; }
.page-member .rescan-btn[hidden]{ display:none; }

@media (prefers-reduced-motion: reduce){
  .social a, .page-member .team-block-links a{ transition:none; }
  .page-member .install{ animation:none; }
}