/* ==========================================================================
   Matchdaita — sign up and sign in
   
   Loaded after site.css, which supplies the palette, the buttons and the footer.
   These two pages carry no navigation and no advertising: someone who has got
   this far has already decided, and everything else on the screen is a way out.
   ========================================================================== */

.authpage { min-height:100dvh; display:flex; flex-direction:column; }
.auth-main { flex:1 0 auto; padding:36px 0 56px; }
@media (min-width: 760px){ .auth-main { padding:56px 0 72px; } }

.auth-grid { display:grid; gap:22px; align-items:start; max-width:960px; margin:0 auto; }
@media (min-width: 900px){ .auth-grid { grid-template-columns:1fr 320px; gap:32px; } }

.auth-card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 24px; box-shadow:var(--shadow-lg);
}
@media (min-width: 560px){ .auth-card { padding:30px 32px; } }
.auth-card h1 { font-size:27px; letter-spacing:-.032em; }
.auth-card .intro { margin-top:9px; font-size:14.5px; color:var(--mut); line-height:1.5; }

/* ---- fields ---- */
.field { margin-top:18px; }
.field label { display:block; font-size:13px; font-weight:700; margin-bottom:6px; }
.field input[type="email"], .field input[type="password"], .field input[type="text"], .field input[type="tel"] {
  width:100%; font-family:inherit; font-size:16px; /* 16px or iOS zooms on focus */
  padding:12px 13px; border-radius:8px; border:1px solid var(--line2);
  background:var(--bg); color:var(--txt);
}
.field input:focus-visible { border-color:var(--blue); }
.field .hint { margin-top:6px; font-size:12.5px; color:var(--mut2); }
.field .hint.ok { color:var(--win); font-weight:600; }
.field.bad input { border-color:var(--loss); }
.field .err { margin-top:6px; font-size:12.5px; color:var(--loss); font-weight:600; }

.pwwrap { position:relative; }
.pwwrap input { padding-right:64px; }
.pwwrap button {
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  font-family:inherit; font-size:12px; font-weight:700; color:var(--mut);
  background:transparent; border:0; padding:8px 8px; cursor:pointer; border-radius:6px;
}
.pwwrap button:hover { color:var(--txt); background:var(--card2); }

/* ---- checkboxes ----
   The age declaration is the one field on this page that is not about the
   product, so it is given the same weight as everything else rather than being
   set in small print at the bottom. */
.check { display:grid; grid-template-columns:20px 1fr; gap:11px; margin-top:16px; align-items:start; }
.check input { width:18px; height:18px; margin:2px 0 0; accent-color:var(--blue); }
.check label { font-size:13.5px; line-height:1.5; color:var(--mut); }
.check label b { color:var(--txt); font-weight:700; }
.check.bad label { color:var(--loss); }

.auth-card .btn { margin-top:22px; }
.auth-alt { margin-top:18px; padding-top:18px; border-top:1px solid var(--line); font-size:13.5px; color:var(--mut); }

/* ---- messages ---- */
.alert {
  margin-top:18px; padding:12px 14px; border-radius:8px; font-size:13.5px; line-height:1.5;
  border:1px solid var(--line);
}
.alert-bad { background:rgba(107,114,128,.08); border-color:rgba(107,114,128,.28); color:var(--txt); }
.alert-note { background:var(--card2); color:var(--mut); }
.alert b { font-weight:700; color:var(--txt); }
:root:not([data-theme="light"]) .alert-bad { background:rgba(107,114,128,.10); }

/* ---- the panel beside the form ---- */
.aside { display:grid; gap:16px; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow); }
.panel.chosen { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue), var(--shadow); }
.panel h2 { font-size:16px; }
.panel .plan-price { margin-top:10px; display:flex; align-items:baseline; gap:6px; }
.panel .plan-price .amt { font-size:28px; font-weight:800; letter-spacing:-.035em; }
.panel .plan-price .per { font-size:13px; color:var(--mut); font-weight:600; }
.panel .trial {
  margin-top:10px; padding:9px 11px; border-radius:7px; background:rgba(0,229,255,.10);
  color:var(--win); font-size:13px; font-weight:700; line-height:1.4;
}
:root:not([data-theme="light"]) .panel .trial { background:rgba(0,229,255,.12); }
.vat-note { margin-top:10px; font-size:12px; color:var(--mut); line-height:1.5; }
.vat-note b { color:var(--txt); font-weight:700; }
.panel ul { list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px; }
.panel li { display:grid; grid-template-columns:16px 1fr; gap:9px; font-size:13px; line-height:1.45; color:var(--mut); }
.panel li .ic { color:var(--win); margin-top:2px; }
.panel .swap { margin-top:14px; font-size:12.5px; }
.panel p { font-size:13px; color:var(--mut); line-height:1.55; }
.panel p + p { margin-top:9px; }

/* The reassurance panel is deliberately plain. It is a list of things we will not
   do, and dressing it up would undercut it. */
.panel.plain { background:transparent; border-style:dashed; box-shadow:none; }

/* The legal pages: one readable column. */
.legal-page { max-width:68ch; margin:0 auto; padding:10px 0 30px; }
.legal-page h1 { font-size:30px; margin-bottom:6px; }
.legal-page .meta { font-size:12.5px; color:var(--mut2); margin-bottom:26px; }
.legal-page h2 { font-size:17px; margin:26px 0 8px; }
.legal-page p { font-size:14.5px; line-height:1.65; color:var(--mut); }
.legal-page p b { color:var(--txt); }

/* ------------------------------------------------------------ connect step */
.field .opt { font-weight: 400; color: var(--mute, #8a94a6); font-size: .85em; margin-left: .4em; }
.connect h2 { margin: 0 0 .5rem; font-size: 1.35rem; letter-spacing: -.01em; }
.connect p { margin: 0 0 1rem; }
.connect .btn { margin: .25rem 0 .75rem; }
.connect-state { font-size: .95rem; color: var(--mute, #8a94a6); }
.connect-state.on { color: var(--good, #19c37d); font-weight: 600; }