/* ============================================================
   VEGAS BUSTER — MEMBERS AREA
   ============================================================
   Only login.html, members.html and admin.html load this, on top
   of style.css. Kept in its own file so nothing here can change
   the public pages, and nothing there can quietly break these.
   Uses the colour tokens from the top of style.css.
   ============================================================ */

.mem{ padding:2.75rem 0 4rem; min-height:72vh; }
.mem__box{ max-width:760px; margin:0 auto; padding:0 1.25rem; }
.mem__box--narrow{ max-width:460px; }

.mem__eyebrow{ font-family:var(--display); letter-spacing:.14em; text-transform:uppercase;
  color:var(--green); font-size:.95rem; margin:0 0 .4rem; }
.mem__h{ font-family:var(--display); font-size:clamp(2rem,7vw,3rem); line-height:1.02;
  margin:0 0 .75rem; color:var(--text); text-transform:uppercase; }
.mem__lede{ color:var(--muted); font-size:1.02rem; margin:0 0 1.75rem; }

.mem__panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.4rem 1.45rem; margin:0 0 1rem; }
.mem__panel h2{ font-family:var(--display); font-size:1.15rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text); margin:0 0 .6rem; }
.mem__panel p{ color:var(--muted); line-height:1.65; margin:0 0 .75rem; }
.mem__panel p:last-child{ margin-bottom:0; }
.mem__panel--notice{ border-color:var(--gold-dim); }
.mem__panel--notice h2{ color:var(--gold); }
.mem__panel code{ font-size:.9em; color:var(--text); background:var(--bg);
  padding:.1em .35em; border-radius:5px; overflow-wrap:anywhere; }

/* ---- Forms ---- */
.mem__tabs{ display:flex; gap:.4rem; margin:0 0 1.2rem; background:var(--bg);
  border:1px solid var(--line); border-radius:999px; padding:4px; }
.mem__tab{ flex:1; border:0; background:none; color:var(--muted); font:600 .95rem var(--body);
  padding:.6rem .8rem; border-radius:999px; cursor:pointer; }
.mem__tab[aria-selected="true"]{ background:var(--green); color:#04120B; }

.mem__field{ display:block; margin:0 0 1rem; }
.mem__field > span{ display:block; color:var(--muted); font-size:.88rem; font-weight:600;
  margin:0 0 .35rem; }
.mem__field input, .mem__field select, .mem__field textarea{
  width:100%; box-sizing:border-box; background:var(--bg); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-sm); padding:.8rem .9rem;
  font:16px/1.4 var(--body); /* 16px stops iPhone zooming into the field */ }
.mem__field textarea{ min-height:9rem; resize:vertical; }
.mem__field input:focus, .mem__field select:focus, .mem__field textarea:focus{
  outline:none; border-color:var(--green); }
.mem__hint{ color:var(--dim); font-size:.84rem; margin:.35rem 0 0; }

.mem__row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:0 .9rem; }

.mem__msg{ border-radius:var(--r-sm); padding:.75rem .9rem; margin:0 0 1rem; font-size:.95rem;
  line-height:1.5; }
.mem__msg--err{ background:rgba(244,82,95,.1); border:1px solid rgba(244,82,95,.45); color:#FFC9CE; }
.mem__msg--ok{ background:rgba(47,217,128,.08); border:1px solid var(--green-dim); color:var(--green); }

.mem__small{ color:var(--dim); font-size:.9rem; text-align:center; margin:1.1rem 0 0; line-height:1.6; }
.mem__small a, .mem__linkbtn{ color:var(--muted); text-decoration:underline; }
.mem__linkbtn{ background:none; border:0; padding:0; font:inherit; cursor:pointer; }

/* ---- Status bar on members/admin ---- */
.mem__bar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.75rem 1rem; margin:0 0 1.5rem; padding:.85rem 1.1rem; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r); }
.mem__who{ color:var(--muted); font-size:.92rem; overflow-wrap:anywhere; }
.mem__who strong{ color:var(--text); }
.mem__status{ display:inline-block; font:700 .74rem var(--body); letter-spacing:.08em;
  text-transform:uppercase; padding:.25rem .55rem; border-radius:999px; margin-left:.35rem; }
.mem__status--on{ background:rgba(47,217,128,.12); color:var(--green); }
.mem__status--off{ background:rgba(244,82,95,.12); color:var(--red); }
.mem__baractions{ display:flex; gap:.5rem; flex-wrap:wrap; }

/* ---- A pick ---- */
.mpick{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1.3rem 1.4rem; margin:0 0 1rem; }
.mpick__top{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .75rem;
  color:var(--muted); font-size:.85rem; margin:0 0 .6rem; }
.mpick__league{ font:700 .74rem var(--body); letter-spacing:.1em; color:var(--gold);
  border:1px solid var(--gold-dim); border-radius:6px; padding:.15rem .45rem; }
.mpick__matchup{ color:var(--muted); margin:0 0 .15rem; }
.mpick__pick{ font-family:var(--display); font-size:clamp(1.6rem,6vw,2.1rem); line-height:1.05;
  color:var(--text); margin:0 0 .5rem; overflow-wrap:anywhere; }
.mpick__pick span{ color:var(--green); font-size:.62em; margin-left:.35rem; }
.mpick__why{ border-top:1px solid var(--line-soft); margin-top:.9rem; padding-top:.9rem; }
.mpick__why p{ color:var(--muted); line-height:1.7; margin:0 0 .8rem; }
.mpick__why p:last-child{ margin:0; }
.mpick__posted{ color:var(--dim); font-size:.82rem; margin:.9rem 0 0; }
.mpick__actions{ margin:.9rem 0 0; display:flex; gap:.5rem; flex-wrap:wrap; }

/* ---- Push alerts panel ---- */
.mem__push{ border-color:var(--green-dim); }
.mem__push h2{ color:var(--green); }
.adm__alert{ display:flex; align-items:center; gap:.55rem; color:var(--muted); font-size:.95rem;
  margin:0 0 1rem; cursor:pointer; }
.adm__alert input{ width:1.1rem; height:1.1rem; accent-color:var(--green); }

/* ---- Stripe buy buttons (no active membership) ---- */
.mem__plans{ display:grid; gap:.6rem; margin:1rem 0 .5rem; }
.mem__plan{ display:flex; justify-content:space-between; align-items:center; gap:.75rem;
  padding:.9rem 1rem; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--bg); color:var(--text); text-decoration:none; }
.mem__plan:hover{ border-color:var(--green-dim); }
.mem__plan strong{ font-family:var(--display); letter-spacing:.04em; white-space:nowrap; }
.mem__plan span{ color:var(--green); font-weight:600; font-size:.92rem; text-align:right; }
.mem__plans + .mem__hint{ margin:0 0 1rem; }

.mem__empty{ text-align:center; color:var(--muted); padding:2.2rem 1rem;
  border:1px dashed var(--line); border-radius:var(--r); }

/* ---- Admin: members list ---- */
.adm__search{ margin:0 0 1rem; }
.adm__member{ border-top:1px solid var(--line-soft); padding:1rem 0; }
.adm__member:first-of-type{ border-top:0; padding-top:.25rem; }
.adm__email{ color:var(--text); font-weight:600; overflow-wrap:anywhere; }
.adm__meta{ color:var(--dim); font-size:.85rem; margin:.2rem 0 .75rem; }
.adm__quick{ display:flex; flex-wrap:wrap; gap:.45rem; margin:0 0 .75rem; }
/* Wider minimum than the post-a-play form: a date box needs the room,
   and on a phone this drops to one field per line instead of clipping. */
.adm__member .mem__row{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.adm__quick .btn--sm{ padding:7px 13px; }
.adm__save{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; }
.adm__saved{ color:var(--green); font-size:.88rem; }
.btn--danger{ background:none; border:1px solid rgba(244,82,95,.5); color:var(--red); }
.btn--danger:hover{ border-color:var(--red); }

/* ---- Post a play (post-play.html) ---- */

/* A hint sitting INSIDE a label is a direct child of .mem__field,
   so it picks up the field-label styling above. Beat it on
   specificity instead of renaming every existing hint. */
.mem__field > .mem__hint{ display:block; color:var(--dim); font-weight:400;
  font-size:.84rem; margin:.35rem 0 0; }

/* The form shows and hides fields by setting hidden on them. That
   works on its own ONLY while nothing has given the element a
   display — and .mem__field above sets display:block, which outranks
   the browser's own rule for hidden. Without these two lines the
   teaser and parlay fields sit there on every bet type. */
.mem__field[hidden], .mem__field > .mem__hint[hidden]{ display:none; }

/* `hidden` means hidden, on anything.
   Every rule in this file that sets `display` on a class outranks the
   browser's own rule for [hidden], so a panel JavaScript switches off
   stays on screen anyway. That is what was happening to the gold
   "Editing a posted play" banner on post-play.html: it carried the
   hidden attribute from the moment the page loaded and was visible
   the whole time regardless. Chasing it one selector at a time just
   means the next new component hits it too. */
[hidden]{ display:none !important; }


/* Only on screen while you're fixing a play you already posted —
   gold, so it can't be mistaken for the normal new-play form. */
.pp__editbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:.5rem .9rem; border:1px solid var(--gold-dim); border-radius:var(--r-sm);
  background:var(--bg); color:var(--gold); font-size:.9rem; line-height:1.5;
  padding:.7rem .9rem; margin:0 0 1rem; }
.pp__editbar strong{ color:var(--gold); }

/* The four kickoff dropdowns, grouped so it reads as one question.
   Narrower minimum than a normal row — these are short values, and
   four across beats two lines of two. */
.pp__when{ border:1px solid var(--line-soft); border-radius:var(--r-sm);
  padding:.9rem 1rem .35rem; margin:0 0 1rem; }
.pp__when legend{ color:var(--muted); font-size:.88rem; font-weight:600; padding:0 .4rem; }
.pp__whenrow{ grid-template-columns:repeat(auto-fit,minmax(88px,1fr)); }
.pp__preview{ color:var(--dim); font-size:.86rem; margin:0 0 .6rem; }
.pp__preview strong{ color:var(--text); font-weight:600; }

/* Short by default — a straight bet is one line — but it's a
   textarea so a parlay's legs can go one per line. Has to out-rank
   .mem__field textarea above, which is 9rem tall for the write-up. */
.mem__field > .pp__pick{ min-height:3.4rem; }

/* Clearing out old plays. Sits above the list, deliberately plain —
   it's a delete button, it shouldn't look inviting. */
.pp__clear{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .8rem;
  border-top:1px solid var(--line-soft); padding:.9rem 0 1rem; margin:0 0 .5rem; }
.pp__clearlabel{ color:var(--muted); font-size:.9rem; display:flex; align-items:center; gap:.5rem; }
.pp__clearlabel select{ background:var(--bg); color:var(--text); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:.45rem .55rem; font:15px/1.2 var(--body); }
.pp__clearmsg{ color:var(--dim); font-size:.88rem; }

/* The generated results.js entry. Always drawn, never only copied to
   the clipboard — an invisible success and a silent failure look the
   same, and that reads as "nothing happened". */
.pp__copyout{ margin:.7rem 0 0; }
.pp__copyhead{ color:var(--green); font-size:.86rem; margin:0 0 .4rem; }
.pp__copyout textarea{ width:100%; box-sizing:border-box; resize:vertical;
  background:var(--bg); color:var(--text); border:1px solid var(--green-dim);
  border-radius:var(--r-sm); padding:.7rem .8rem;
  font:12px/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; white-space:pre; }
.pp__copyout textarea:focus{ outline:none; border-color:var(--green); }

/* Grading a finished play, opened inside its own card. */
.pp__grade{ border-top:1px solid var(--line-soft); margin:.9rem 0 0; padding:1rem 0 0; }
.pp__grade .mem__row{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }

/* Your record. Deliberately a tight list, not a stack of cards — it
   only has to be scannable, and it gets long. */
.pp__rescount{ color:var(--dim); font-size:.86rem; margin:0 0 .6rem; }
.pp__res{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem;
  border-top:1px solid var(--line-soft); padding:.7rem 0; }
.pp__res:first-of-type{ border-top:0; }
.pp__resmark{ flex:none; width:1.6rem; height:1.6rem; display:grid; place-items:center;
  border-radius:6px; font:700 .78rem var(--body); }
.pp__w{ background:rgba(47,217,128,.14); color:var(--green); }
.pp__l{ background:rgba(244,82,95,.14); color:var(--red); }
.pp__p{ background:var(--surface-3); color:var(--muted); }
.pp__resmain{ flex:1 1 14rem; min-width:0; color:var(--text); font-size:.95rem; }
.pp__resmain strong{ display:block; overflow-wrap:anywhere; }
.pp__resmatch, .pp__resnote{ display:block; color:var(--muted); font-size:.85rem; }
.pp__resdate{ color:var(--dim); font-size:.82rem; white-space:nowrap; }

/* ---- A pick: bet type, legs, parlay payout ---- */
.mpick__type{ font:700 .74rem var(--body); letter-spacing:.08em; text-transform:uppercase;
  color:var(--green); border:1px solid var(--green-dim); border-radius:6px; padding:.15rem .45rem; }
.mpick__pays{ color:var(--green); }
.mpick__legs{ list-style:none; margin:0 0 .5rem; padding:0; }
.mpick__legs li{ font-family:var(--display); font-size:clamp(1.15rem,4.2vw,1.45rem);
  line-height:1.25; color:var(--text); overflow-wrap:anywhere;
  padding:.3rem 0 .3rem .95rem; position:relative; }
.mpick__legs li::before{ content:""; position:absolute; left:0; top:.78em;
  width:5px; height:5px; border-radius:50%; background:var(--green); }
.mpick__odds{ color:var(--muted); font-size:.9rem; margin:0 0 .5rem; }
.mpick__odds span{ color:var(--green); font-weight:600; }

/* ---- Our Take ----
   A take is our read on a game we aren't staking, so it can't look
   like a play. It reads quieter: gold instead of green, a softer
   border, no filled surface behind it. Green on this site means a
   number is on the line. */
.mpick__type--take,
.mpick--take .mpick__type{ color:var(--gold); border-color:var(--gold-dim); }
.mpick--take{ background:transparent; border-color:var(--line-soft); }
/* The words are the whole card, so they read at body size in the
   normal text colour -- not the muted grey a write-up sitting under
   a pick is set in. */
.mpick__take p{ color:var(--text); line-height:1.7; margin:0 0 .85rem; }
.mpick__take p:last-child{ margin:0; }

/* The heading that separates them from the plays above. The plays
   list has no heading of its own, so this one needs a rule over it
   to read as a break rather than a label on the last card. */
.mtakes{ border-top:1px solid var(--line); margin:2.4rem 0 0; padding:1.8rem 0 0; }
.mtakes__h{ font-family:var(--display); font-size:clamp(1.5rem,5vw,2rem);
  line-height:1.05; color:var(--gold); margin:0 0 .4rem; }
.mtakes__lede{ color:var(--muted); line-height:1.6; margin:0 0 1.3rem; max-width:52ch; }

/* ---- Posting: play, or take ----
   Two big targets rather than a dropdown. Which one is picked changes
   what the whole form below means, so it shouldn't be one line of
   small print you can skim past. */
.pp__kind{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:.6rem; margin:0 0 1.1rem; }
.pp__kindopt{ cursor:pointer; }
.pp__kindopt input{ position:absolute; opacity:0; width:0; height:0; }
.pp__kindbox{ display:block; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:.7rem .85rem; background:var(--bg); transition:border-color .15s, background .15s; }
.pp__kindbox strong{ display:block; color:var(--text); font-size:1rem; }
.pp__kindbox small{ display:block; color:var(--dim); font-size:.82rem; margin-top:.15rem; }
.pp__kindopt:hover .pp__kindbox{ border-color:var(--line-soft); }
.pp__kindopt input:focus-visible + .pp__kindbox{ outline:2px solid var(--green); outline-offset:2px; }
/* Same colour split as the cards: green is a play, gold is a take. */
.pp__kindopt input[value="play"]:checked + .pp__kindbox{
  border-color:var(--green-dim); background:rgba(14,122,75,.1); }
.pp__kindopt input[value="play"]:checked + .pp__kindbox strong{ color:var(--green); }
.pp__kindopt input[value="take"]:checked + .pp__kindbox{
  border-color:var(--gold-dim); background:rgba(158,124,36,.12); }
.pp__kindopt input[value="take"]:checked + .pp__kindbox strong{ color:var(--gold); }