/* Member account pages — login, registration, password, profile.
   Loaded through $headExtra on those pages only. */

/* Everything in this area is centred in the page: the auth cards are narrow,
   the account pages a little wider, but both sit in the middle rather than
   hugging the left gutter. */
.mb-page .sheet{max-width:1100px}
.mb-wrap{max-width:720px;margin-inline:auto}
.mb-wrap--narrow{max-width:560px}

.mb-card{
  background:var(--card);border:1px solid var(--edge);border-radius:16px;
  padding:clamp(24px,3.2vw,40px);max-width:560px;margin-inline:auto}
.mb-card--narrow{max-width:520px}
.mb-card h1{font-family:var(--display);font-size:clamp(28px,3.6vw,40px);font-weight:600;
  line-height:1.1;margin:6px 0 0;color:var(--tx)}
.mb-card h2{font-family:var(--display);font-size:clamp(20px,2.2vw,24px);font-weight:600;
  margin:0 0 4px;color:var(--tx)}
.mb-lead{color:var(--tx-dim);font-size:16.5px;line-height:1.6;margin:10px 0 0}

/* ---- the landing page after signing in ---- */
.mb-hero{text-align:center;margin:0 0 clamp(26px,3.4vw,40px)}
.mb-avatar{
  width:74px;height:74px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  box-sizing:border-box;padding-top:3px;font-family:var(--ui);font-size:31px;font-weight:600;color:var(--gold-lt);
  border:1px solid var(--gold-dk);margin-bottom:18px;
  background:radial-gradient(120% 120% at 50% 35%,rgba(232,184,75,.20),rgba(201,146,42,.05));
  box-shadow:0 8px 26px rgba(0,0,0,.4)}
.mb-hero h1{font-family:var(--display);font-size:clamp(30px,4vw,44px);font-weight:600;
  line-height:1.1;margin:0;color:var(--tx)}
.mb-hero-lead{color:var(--tx-dim);font-size:16.5px;line-height:1.6;margin:12px auto 0;max-width:44ch}
.mb-hero-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;
  font-family:var(--ui);font-size:13.5px;letter-spacing:.04em;color:var(--tx-mut);margin:16px 0 0}
.mb-hero-meta i{font-style:normal;opacity:.6}

.mb-tiles{display:flex;flex-direction:column;gap:12px}
.mb-tile{
  display:flex;align-items:center;gap:18px;padding:20px 22px;
  background:var(--card);border:1px solid var(--edge);border-radius:14px;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.mb-tile:hover,.mb-tile:focus-visible{
  transform:translateY(-2px);border-color:var(--gold-dk);
  box-shadow:0 14px 30px rgba(0,0,0,.4);outline:none}
.mb-tile-ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(201,146,42,.10);border:1px solid var(--edge);color:var(--gold)}
.mb-tile-ic svg{width:22px;height:22px}
.mb-tile-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.mb-tile-txt strong{font-family:var(--display);font-size:19px;font-weight:600;color:var(--tx)}
.mb-tile-txt em{font-style:normal;font-size:15px;color:var(--tx-mut)}
.mb-tile-go{flex:0 0 auto;color:var(--tx-mut);font-size:19px;transition:color .18s,transform .18s}
.mb-tile:hover .mb-tile-go{color:var(--gold-lt);transform:translateX(3px)}
.mb-tile--quiet .mb-tile-ic{background:transparent;color:var(--tx-mut)}
.mb-tile--quiet:hover .mb-tile-ic{color:var(--gold)}

/* ---- sub-pages ---- */
.mb-back{display:inline-block;font-family:var(--ui);font-size:13px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tx-mut)}
.mb-back:hover{color:var(--gold-lt)}
.mb-h1{font-family:var(--display);font-size:clamp(28px,3.6vw,40px);font-weight:600;
  line-height:1.1;margin:14px 0 22px;color:var(--tx)}

/* ---- forms ---- */
.mb-form{display:flex;flex-direction:column;gap:16px;margin-top:22px}
.mb-card > .mb-form:first-child{margin-top:0}
.mb-form label{display:flex;flex-direction:column;gap:7px;
  font-family:var(--ui);font-size:12.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-mut)}
.mb-form input{
  font-family:var(--body);font-size:16.5px;color:var(--tx);background:var(--panel);
  border:1px solid var(--edge);border-radius:8px;padding:12px 14px;width:100%}
.mb-form input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,146,42,.14)}
.mb-form small{font-family:var(--body);font-size:14px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--tx-mut)}
.mb-form .btn{align-self:flex-start;margin-top:4px}
.mb-form--row{flex-direction:row;align-items:flex-end;flex-wrap:wrap;gap:14px}
.mb-form--row label{flex:1 1 240px}
.mb-inline-form{margin-top:16px}

/* the maths question sits apart from the real fields */
.mb-sum{border-top:1px solid var(--edge);padding-top:18px}
.mb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- messages ---- */
.mb-ok,.mb-err{font-family:var(--ui);font-size:15px;letter-spacing:.02em;border-radius:10px;
  padding:12px 16px;margin:0 auto 20px;max-width:560px;border:1px solid}
.mb-card .mb-ok,.mb-card .mb-err{margin:20px 0 0;max-width:none}
.mb-ok{color:#9fd39f;border-color:#2f4a2f;background:rgba(120,190,120,.08)}
.mb-err{color:#e8a99e;border-color:#5a2c26;background:rgba(224,112,95,.08)}

.mb-alt{font-size:15.5px;color:var(--tx-dim);margin:18px 0 0}
.mb-alt a{color:var(--gold-lt);border-bottom:1px solid rgba(201,146,42,.4)}
.mb-alt a:hover{color:var(--gold)}
.mb-fine{font-size:14px;color:var(--tx-mut);margin:2px 0 0}
.mb-fine a{color:var(--gold-lt)}
.mb-actions{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 0}

/* ---- deleting an account ---- */
.mb-danger{margin-top:22px;border-color:#472521}
.mb-danger h2{color:#e8a99e}
.mb-danger p{color:var(--tx-dim);margin:8px 0 0;max-width:60ch}
.btn--danger{background:#7a3229;color:#ffe9e4}
.btn--danger:hover{background:#943d31}

@media (max-width:700px){
  .mb-form--row{flex-direction:column;align-items:stretch}
  .mb-form--row .btn{align-self:stretch;text-align:center}
  .mb-tile{padding:16px 16px;gap:14px}
  .mb-tile-txt strong{font-size:17.5px}
}

/* The links under the form stood 18px tall. Padding gives the finger somewhere
   to land without changing how they read. */
@media (max-width:900px){
  .mb-alt a{display:inline-block;padding:6px 0}
}

/* ═══ the sign-in card ══════════════════════════════════════════════════════
   The form is the club card. Scoped to --pass so the register and
   forgot-password pages, which share .mb-card, keep the plain panel. */
.mb-card--pass{
  position:relative;overflow:hidden;
  background:linear-gradient(155deg,#1d1a15,#131211 55%);
  border-color:#3a3227;
  box-shadow:0 24px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
}
/* the foil edge — the one loud thing on the card */
.mb-card--pass::before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--gold-dk),var(--gold-lt) 45%,var(--gold-dk));
}
.mb-cardname{
  font-family:var(--display);font-size:19px;font-weight:600;line-height:1.15;
  margin:0 0 20px;color:var(--tx);
}
.mb-cardname em{display:block;font-style:normal;color:var(--gold-lt)}
.mb-card--pass h1{margin-top:0}

@media(max-width:520px){
    .mb-cardname{font-size:17px}
  }

/* ═══ the sign-in wall ══════════════════════════════════════════════════════
   The club room full-bleed, with the form standing on it — no panel, no border.

   The picture is on its own fixed element rather than a background layer on the
   body: a layer sized to part of the screen needs an explicit width AND height,
   which is a non-uniform scale and stretches the room. cover on a real element
   crops instead.

   Two washes over it. One from the left, heavy enough that the form always has
   dark under it whatever the photograph does. One across the top, because the
   site header is transparent and its muted items would otherwise vanish into a
   bright part of the picture.

   Swapping the photograph is one file — /img/login-bg.webp — with no code
   change and nothing else on the site pointing at it. */
body.mb-wall{background:#0b0b0a}
.mb-wallshot{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:#0b0b0a url("/img/login-bg.webp") center center/cover no-repeat;
}
.mb-wallshot::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(8,8,7,.80),transparent 20%),
    linear-gradient(96deg,rgba(9,9,8,.95) 26%,rgba(9,9,8,.72) 46%,rgba(9,9,8,.30) 72%);
}
body.mb-wall .mb-page,
body.mb-wall .top,
body.mb-wall footer{position:relative;z-index:1}

/* The picture is fixed to the viewport, so on a short page it kept going below
   the footer. Claim the full height and let the main area take up the slack,
   and the footer sits on the bottom edge instead of floating mid-photograph. */
body.mb-wall{min-height:100svh;display:flex;flex-direction:column}
body.mb-wall .mb-page{flex:1 0 auto}
body.mb-wall footer{flex:0 0 auto}

/* the form stands on the picture: no card chrome at all */
body.mb-wall .mb-card--wall{
  background:none;border:0;box-shadow:none;padding:0;
  max-width:400px;margin-left:0;margin-right:auto;
}
body.mb-wall .mb-card--wall::before{content:none}
body.mb-wall .mb-card--wall h1{margin-top:0}
/* the inputs need their own ground now that nothing sits behind them */
body.mb-wall .mb-form input{background:rgba(10,10,9,.72);backdrop-filter:blur(2px)}

/* Height so the form sits into the picture rather than clinging to the header.
   Padding, not a grid: making the section a grid turns .sheet into a grid item,
   and its margin-inline:auto then shrinks it to fit-content instead of holding
   the column width. */
@media(min-width:1000px){
  body.mb-wall .mb-page > .gp-section{padding-block:clamp(70px,11vh,150px)}
}

/* narrow: a left-to-right wash does nothing, so darken evenly */
@media(max-width:999px){
  /* a phone does not need the full-size hero to show it 390px wide */
  .mb-wallshot{background-image:url("/img/login-bg-sm.webp")}
  .mb-wallshot::after{
    background:linear-gradient(180deg,rgba(8,8,7,.88),rgba(9,9,8,.82) 30%,rgba(9,9,8,.92));
  }
  body.mb-wall .mb-card--wall{max-width:none}
}

/* the confirmation tick on the deletion request: a checkbox is not a field with
   a caption above it, so it does not get the column layout the others have */
.mb-form .mb-confirm{
  flex-direction:row;align-items:flex-start;gap:10px;
  text-transform:none;letter-spacing:.01em;font-size:15.5px;font-weight:400;
  font-family:var(--body);color:var(--tx-dim);line-height:1.5;
}
.mb-form .mb-confirm input[type=checkbox]{
  width:17px;height:17px;flex:0 0 auto;margin-top:3px;padding:0;accent-color:var(--gold);
}

/* what deletion removes — a plain list, because it is a disclosure and not a
   feature grid */
.del-what{margin:26px 0 4px;padding:18px 20px;border:1px solid var(--edge);
  border-radius:12px;background:rgba(255,255,255,.02)}
.del-what h2{font-family:var(--display);font-size:19px;font-weight:600;margin:0 0 12px;color:var(--tx)}
.del-what ul{margin:0;padding-left:20px;display:grid;gap:6px}
.del-what li{color:var(--tx-dim);line-height:1.5}
.del-final{margin:14px 0 0;color:#e8a99e;font-size:15.5px}