/* ============================================================
   LIFEMAX CLUB — the account pages' family (authui.css): sign up and log in.

   20 Oct 2026, Reo, showing Resend's sign-up page: "can you make lifemax
   club sign up page look like this". Its shape in the club's own skin:
   • the page's ground, with soft folds of light (the silk, authui.js)
     bleeding in from the top-right and bottom-left corners; the middle
     stays dark and calm. A pale page with pale silver folds in Light.
   • "‹ Home" top left, the appearance switch top right, nothing else.
   • ONE centred column, no card: the mark in a small tile, a big title,
     the way to the other page under it, Google when it is on (full width:
     it is the only other way in), a thin "or", labelled fields with their
     labels above them, the button, the terms line.
   • the next step ("Check your email") is the same column, centred.
   Loaded after ds.css and pages.css, on signup.html, login.html and (since
   23 Oct 2026) reset.html.
   Composition only, as pages.css: every colour is a ds.css token (the
   silk's are --silk-*), and no rule here tests the theme.
   ============================================================ */

/* ───────────────────────── the page ───────────────────────── */
/* html carries the ground (ds.css), so the body is see-through and the silk
   can sit between them */
body.af{background:none;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}

/* ───────────────────────── the silk ─────────────────────────
   Two canvases, sized by the width alone (a phone's toolbar coming and going
   moves nothing) and pushed a little past their corner, so the slow drift
   below never shows an edge. */
.af-silk{--silk-w:clamp(330px, 72vw, 1120px);position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--bg);isolation:isolate}
/* before the cloth is drawn (or with no script): a soft light in the corners */
.af-silk::before{content:"";position:absolute;inset:0;
  background:radial-gradient(46% 40% at 100% 0%, rgba(var(--glow-rgb),.16), transparent 72%), radial-gradient(42% 38% at 0% 100%, rgba(var(--glow-rgb),.12), transparent 72%);
  transition:opacity 900ms var(--ease)}
.af-silk.is-on::before{opacity:0}
.af-silk canvas{position:absolute;display:block;opacity:0;transition:opacity 900ms var(--ease)}
.af-silk.is-on canvas{opacity:1}
.af-silk [data-corner="tr"]{top:calc(var(--silk-w) * -.06);right:calc(var(--silk-w) * -.06);width:var(--silk-w);height:calc(var(--silk-w) * .78);transform-origin:100% 0}
.af-silk [data-corner="bl"]{bottom:calc(var(--silk-w) * -.06);left:calc(var(--silk-w) * -.06);width:calc(var(--silk-w) * .94);height:calc(var(--silk-w) * .73);transform-origin:0 100%}
/* film grain over the cloth; "overlay" leaves the black (and most of the
   pale page) as it is, so it only shows where there is light */
.af-silk::after{content:"";position:absolute;inset:0;opacity:var(--silk-grain);mix-blend-mode:overlay;background-size:200px 200px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)'/%3E%3C/svg%3E")}
/* the drift: very slow, transform only, and not at all under reduced motion */
@media (prefers-reduced-motion: no-preference){
  html:not(.rm) .af-silk.is-on [data-corner="tr"]{animation:af-drift-tr 56s var(--ease-io) -14s infinite alternate}
  html:not(.rm) .af-silk.is-on [data-corner="bl"]{animation:af-drift-bl 68s var(--ease-io) -31s infinite alternate}
}
@keyframes af-drift-tr{from{transform:none}to{transform:translate3d(-1.4%,1.1%,0) rotate(-1.5deg) scale(1.05)}}
@keyframes af-drift-bl{from{transform:none}to{transform:translate3d(1.3%,-1.2%,0) rotate(1.3deg) scale(1.05)}}

/* ───────────────────────── the bar: ‹ Home, and the switch ───────────────────────── */
.af-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left))}
.af-home{display:inline-flex;align-items:center;gap:3px;min-height:40px;padding:0 14px 0 8px;border-radius:var(--r-pill);color:var(--text-2);text-decoration:none;
  font-size:14.5px;font-weight:500;letter-spacing:-.01em;transition:color var(--d-1) var(--ease),background-color var(--d-1) var(--ease)}
.af-home .ic{--ic:17px}
.af-home:hover{color:var(--text);background:var(--fill-1)}
.af-home:active{background:var(--press);transition:none}
/* a Type 2 (22 Oct 2026, the two cards; it was glass over the brightest fold) */
.af-top .icon-btn{width:38px;height:38px;color:var(--text-2);background:var(--card-2);box-shadow:inset 0 0 0 1px var(--card-line)}
.af-top .icon-btn:hover{color:var(--text)}
.af-top .icon-btn .ic{--ic:17px}

/* ───────────────────────── the column ───────────────────────── */
.af-main{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(28px,6vh,64px) max(16px, env(safe-area-inset-right)) clamp(40px,7vh,80px) max(16px, env(safe-area-inset-left))}
.af-col{width:100%;max-width:420px}
/* beside a centred column the bar takes no height of its own: it rides the
   top edge, and the column gets the room (a 1280 × 800 laptop sees the
   button without scrolling) */
@media (min-width:641px){
  .af-top{position:absolute;top:0;left:0;right:0;z-index:2}
  .af-main{padding-top:clamp(56px, 7.5vh, 96px)}
}
.af-tile{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;color:var(--text);
  background:var(--card-2);
  box-shadow:inset 0 0 0 1px var(--card-line),0 18px 40px -16px var(--glow)}
.af-tile .mark{width:29px;height:29px}
.af-tile .ic{--ic:24px}
.af-title{margin-top:20px;font-size:clamp(28px,3.2vw,34px);line-height:1.1;letter-spacing:-.035em;font-weight:700;text-wrap:balance}
.af-sub{margin-top:10px;font-size:15.5px;line-height:1.45;color:var(--text-2);text-wrap:pretty}
.af-alt{margin-top:4px;font-size:15.5px;line-height:1.45;color:var(--text-2)}
.af-sub b{color:var(--text);font-weight:600}
/* links in running text: the line's own ink a step up, bold, a faint rule */
.af-alt a,.af-legal a,.af-note a,.af-forgot{color:var(--text);font-weight:600;text-decoration:underline;text-decoration-color:var(--hair-2);text-decoration-thickness:1px;text-underline-offset:3px;
  transition:text-decoration-color var(--d-1) var(--ease),color var(--d-1) var(--ease)}
.af-alt a:hover,.af-legal a:hover,.af-note a:hover,.af-forgot:hover{text-decoration-color:currentColor}
.af-c{text-align:center}
.af-col.af-c .af-tile{margin-inline:auto}
.af-col.af-c .af-sub{margin-inline:auto;max-width:36ch}

/* testing mode: plainly marked, a dashed edge and its own label */
.af-test{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:22px;padding:13px 15px 14px;border-radius:var(--r-tile);
  background:var(--warn-bg);border:1px dashed var(--warn-line);font-size:13.5px;line-height:1.45;color:var(--text-2)}
.af-test b{color:var(--text);font-weight:600}
.af-test > *{--card-2:var(--card-2-hi)}
.af-chip{display:inline-flex;align-items:center;gap:7px;height:22px;padding:0 10px 0 9px;border-radius:var(--r-pill);background:var(--card-2);box-shadow:inset 0 0 0 1px var(--card-line);color:var(--text);
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.af-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--text-2)}
.af-chip-c{display:flex;width:max-content;margin:18px auto 0}
.af-chip-c + .af-title{margin-top:12px}

/* Google: the one other way in, so the column's width */
.af-providers{margin-top:24px}
.gbtn.af-pbtn{height:48px;border-radius:var(--r-pill);font-size:15.5px;letter-spacing:-.012em;background:var(--card-1);box-shadow:inset 0 0 0 1px var(--card-line);
  transition:background-color var(--d-1) var(--ease),box-shadow var(--d-1) var(--ease),transform var(--d-3) var(--spring)}
.gbtn.af-pbtn:active{transform:scale(.98);transition-duration:var(--d-1),var(--d-1),var(--d-press)}
.gbtn.af-pbtn .gl{width:20px;height:20px;font-size:13px}
.or.af-or{margin:20px 0 0;font-size:12.5px}

/* ───────────────────────── the fields ───────────────────────── */
.af-form{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.af-providers + .af-form{margin-top:20px}
.af-field{display:flex;flex-direction:column;gap:7px;min-width:0}
.af-label{font-size:14px;font-weight:600;line-height:1.3;letter-spacing:-.01em;color:var(--text)}
.af-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.af-forgot{font-size:13.5px;font-weight:500;color:var(--text-2)}
/* his screenshot exactly (22 Oct (2)): on the page a field is the card's own
   grey (#151618) with the line; focus adds the halo (ds.css §25) */
.input.af-input{min-height:50px;border-radius:14px;font-size:16.5px;background:var(--card-1)}
/* the eye in the password field */
.af-pw{position:relative}
.af-pw .af-input{width:100%;padding-right:54px}
.af-eye{position:absolute;top:50%;right:5px;width:40px;height:40px;margin-top:-20px;display:grid;place-items:center;border:0;padding:0;border-radius:12px;background:none;color:var(--text-3);cursor:pointer;
  transition:color var(--d-1) var(--ease),background-color var(--d-1) var(--ease)}
.af-eye:hover{color:var(--text);background:var(--fill-1)}
.af-eye:active{background:var(--press);transition:none}
.af-eye:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.af-eye .ic{--ic:19px}
.af-eye[aria-pressed="false"] .af-eye-hide,.af-eye[aria-pressed="true"] .af-eye-show{display:none}
/* the password's rule: a ring, then a green tick once it is met (green =
   confirmed); never red while he is typing */
.af-rules{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.af-rules li{display:flex;align-items:center;gap:8px;font-size:13.5px;line-height:1.35;color:var(--text-2);transition:color var(--d-2) var(--ease)}
.af-tick{flex:none;display:grid;place-items:center;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--hair-2);color:var(--on-ok);
  transition:background-color var(--d-2) var(--ease),box-shadow var(--d-2) var(--ease)}
.af-tick .ic{--ic:10px;stroke-width:3.2;opacity:0;transform:scale(.4);transition:opacity var(--d-1) var(--ease),transform var(--d-3) var(--spring)}
.af-rules li[data-ok="1"]{color:var(--text)}
.af-rules li[data-ok="1"] .af-tick{background:var(--ok);box-shadow:none}
.af-rules li[data-ok="1"] .af-tick .ic{opacity:1;transform:none}
/* the weekly email, under the email field: one box, "Send me the weekly
   email", TICKED as it ships (22 Oct 2026, Reo: "ticked by default, user may
   untick"). The whole label is the target; the line stays quiet and the box
   takes the club's tick colour. */
.check.af-mail{display:flex;align-items:flex-start;gap:10px;margin-top:2px;font-size:13.5px;line-height:1.4;color:var(--text-2)}
.check.af-mail input{width:20px;height:20px;border-radius:6px;margin-top:-1px}
.check.af-mail input:not(:checked){background:var(--cell)}
.check.af-mail input:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.af-mail-t{flex:1;min-width:0}
@media (pointer:coarse){ .check.af-mail{padding-block:6px;margin-block:-4px -6px} }
.af-hint{font-size:13.5px;line-height:1.45;color:var(--text-2)}
.af-go{margin-top:6px}
.af-col > .af-hint{margin-top:14px}
.af-col > .notice.af-err{margin-top:16px;font-size:14.5px}
/* the terms, small and centred at the foot of the column */
.af-legal{margin-top:24px;text-align:center;font-size:13px;line-height:1.5;color:var(--text-3)}
/* on a phone the column scrolls over the fixed bottom-left fold, and this
   small line can land on its brightest crest (23 Oct 2026): a soft pool of
   the page's own ground behind it. It sits above the silk and under the
   words (z-index -1 in the root context, after the silk in the page). */
@media (max-width:640px){
  .af-legal{position:relative}
  .af-legal::before{content:"";position:absolute;inset:-16px -12px;z-index:-1;pointer-events:none;
    background:radial-gradient(closest-side, var(--bg) 62%, transparent)}
}
.af-legal a{color:var(--text-2);font-weight:500}
/* what a free account holds, folded away */
.af-more{margin-top:20px;border-top:1px solid var(--sep);padding-top:8px}
.af-more summary{list-style:none;display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border-radius:12px;font-size:13.5px;color:var(--text-2);cursor:pointer;
  transition:color var(--d-1) var(--ease)}
.af-more summary::-webkit-details-marker{display:none}
.af-more summary:hover{color:var(--text)}
.af-more summary:focus-visible{outline-offset:-2px}
.af-more summary .ic{--ic:14px;transition:transform var(--d-3) var(--spring-soft)}
.af-more[open] summary .ic{transform:rotate(180deg)}
.af-more .cells{margin-top:8px}

/* ───────────────────────── the next steps (centred) ───────────────────────── */
.af-code{margin-top:28px}
.af-code .input.code{font-size:30px}
.af-c .af-go{margin-top:16px}
.af-c > .notice.af-err{text-align:left}
.a-resend.af-resend{margin-top:18px}
.af-note{margin-top:14px;font-size:14px;line-height:1.55;color:var(--text-2)}
.af-note .link-btn{font-size:inherit;padding:0 2px;font-weight:600;color:var(--text)}
ul.af-login{margin-top:24px;text-align:left}
.af-col:not(.af-c) > .af-note{margin-top:22px;font-size:13.5px}

/* ───────────────────────── the foot ───────────────────────── */
.af-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 28px;
  padding:18px max(16px, env(safe-area-inset-right)) calc(22px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left))}
.af-foot .f-links{justify-content:center;align-items:center;gap:4px 18px;font-size:13px}
/* the © and five links on a phone: balanced lines, never "Contact" alone on
   the last (23 Oct 2026). A flex row cannot balance, so they sit inline. */
.af-foot .f-links{display:block;text-align:center;text-wrap:balance}
.af-foot .f-links > *{display:inline-flex;align-items:center;vertical-align:middle;margin:2px 9px}
.af-foot .f-links a{color:var(--text-3)}
.af-foot .f-links a:hover{color:var(--text)}
.af-foot .mono{font-size:10.5px}
.af-foot .f-sound{font-size:13px;color:var(--text-3)}

/* ───────────────────────── touch: 44px targets ───────────────────────── */
@media (pointer:coarse){
  .af-home{min-height:44px}
  .af-top .icon-btn{width:44px;height:44px}
  .af-eye{width:44px;height:44px;margin-top:-22px;right:3px}
  .check.af-mail-no{min-height:44px;margin-block:-10px}
  .af-alt a,.af-legal a,.af-note a,.af-forgot{display:inline-block;padding:12px 0;margin:-12px 0}
  .af-note .link-btn{padding-block:11px;margin-block:-11px}
  .af-more summary{min-height:44px}
  .af-foot .seg-sm button{height:44px;padding:0 16px;font-size:14px}
}

/* ───────────────────────── a phone ─────────────────────────
   Most sign-ups arrive from a link in Instagram, TikTok or YouTube, whose
   browsers show ~670px of a 390px page (4 Oct 2026): less air, a size
   down, so the form starts high. */
@media (max-width:640px){
  .af-top{padding-top:calc(8px + env(safe-area-inset-top))}
  .af-main{justify-content:flex-start;padding-top:8px;padding-bottom:40px}
  .af-tile{width:40px;height:40px;border-radius:12px}
  .af-tile .mark{width:24px;height:24px}
  .af-tile .ic{--ic:20px}
  .af-title{margin-top:16px;font-size:26px}
  .af-sub,.af-alt{font-size:15px}
  .af-sub{margin-top:6px}
  .af-alt{margin-top:2px}
  .af-test{margin-top:16px;padding:11px 13px 12px;font-size:13px}
  .af-providers{margin-top:20px}
  .af-form{gap:14px;margin-top:20px}
  .af-field{gap:7px}
  .af-providers + .af-form{margin-top:16px}
  .or.af-or{margin-top:14px}
  .input.af-input{min-height:46px}
  .input.af-input.code{min-height:60px;height:60px}
  .af-mail-t{font-size:13px}
  .af-hint{font-size:13px}
  .af-legal{margin-top:22px}
  .af-foot{gap:6px 20px}
}

@media print{ .af-silk,.af-top,.af-foot{display:none!important} }