/* The legal pages and the signup form. Linked AFTER ../style.css, whose tokens
   and fonts they use; everything here is scoped to `body.legal` so the app's
   own body rules (a fixed, unscrolled layout) do not reach them. */
/* Only these pages load this sheet, so the root may take the ground too -
   without it the page shows white below a short body. */
html{background:var(--bg-deep)}
body.legal{
  display:block; height:auto; min-height:100%; overflow-y:auto;
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-deep) 100%);
  background-attachment:fixed;
  color:var(--text); font:15px/1.65 var(--sans);
  padding:24px 18px calc(48px + env(safe-area-inset-bottom, 0px));
}
body.legal main{max-width:720px; margin:0 auto}
body.legal h1{font-size:22px; font-weight:600; margin:8px 0 4px; color:var(--gold-hi)}
body.legal h2{font-size:17px; font-weight:600; margin:28px 0 8px}
body.legal h3{font-size:15px; font-weight:600; margin:20px 0 6px}
body.legal p, body.legal li{color:var(--text)}
body.legal ul, body.legal ol{padding-inline-start:22px}
body.legal a{color:var(--agent-hi)}
body.legal a:focus-visible, body.legal button:focus-visible,
body.legal input:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
body.legal blockquote{margin:12px 0; padding:8px 14px; border-inline-start:3px solid var(--line2);
  background:var(--panel)}
body.legal hr{border:0; border-top:1px solid var(--line2); margin:24px 0}
body.legal .meta{color:var(--muted); font-size:13px}

/* ⚠ THE DRAFT BANNER IS NOT DECORATION. Until a lawyer has read these, every
   page says so at the top, in the same colour as a warning on the chart. */
body.legal .draft{border:1px solid var(--warn-line); background:var(--warn-soft);
  color:var(--warn); padding:10px 14px; border-radius:8px; font-size:14px; margin:0 0 16px}

/* AN OPEN DECISION, MARKED WHERE IT STANDS: a vendor not yet signed, or a
   bracket Dor has not filled. Underlined and tinted so nobody reads it as
   settled text; the title says what is open. */
body.legal .var{background:var(--gold-soft); border-bottom:1px dashed var(--gold-line);
  padding:0 3px; border-radius:3px}

body.legal nav.legal-links{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px;
  margin-top:32px; padding-top:12px; border-top:1px solid var(--line)}

/* the signup form */
body.legal form{display:flex; flex-direction:column; gap:12px; margin-top:16px}
body.legal .box{display:flex; gap:10px; align-items:flex-start; padding:12px 14px;
  border:1px solid var(--line2); border-radius:8px; background:var(--panel); cursor:pointer}
body.legal .box input{width:20px; height:20px; margin:2px 0 0; flex:none; accent-color:var(--gold)}
body.legal .box .req{color:var(--muted); font-size:12px; margin-inline-start:4px}
body.legal .why{color:var(--warn); min-height:20px; font-size:14px}
body.legal .actions{display:flex; gap:10px; flex-wrap:wrap}
body.legal button{font:inherit; font-size:15px; padding:11px 18px; border-radius:8px;
  border:1px solid var(--gold-line); background:var(--gold); color:#14110a; cursor:pointer; min-height:44px}
body.legal button:disabled{opacity:.45; cursor:not-allowed}
body.legal button.alt{background:none; color:var(--muted); border-color:var(--line2)}
body.legal .notice{font-size:13.5px; color:var(--muted)}
body.legal .notice p{color:var(--muted)}

/* ---- the signup screen: one card, the boxes first ------------------------
   Same card as the sign-in panel in index.html (panel2, a hairline border, a
   soft shadow), so the step after Google reads as the same door. The legal
   wording is untouched; only its weight moved - the disclosure is a quiet box,
   the three boxes are the body, the §11 notice sits under the button in small
   type, still visible. */
body.legal.signup{display:flex; justify-content:center; align-items:flex-start;
  padding-top:max(32px, 6vh)}
body.legal.signup main.card{width:min(540px, 100%); background:var(--panel2);
  border:1px solid var(--line2); border-radius:14px; padding:28px 28px 20px;
  box-shadow:0 24px 60px rgba(0,0,0,.45)}
body.legal.signup .draft{display:inline-block; font-size:12px; padding:4px 10px;
  border-radius:999px; margin:0 0 14px}
body.legal.signup h1{margin:0 0 6px; font-size:24px}
body.legal.signup .who{display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  color:var(--muted); font-size:13.5px; margin:0 0 18px}
body.legal.signup .who .addr{color:var(--text); direction:ltr}
body.legal.signup .disclose{background:var(--panel); border:1px solid var(--line);
  border-inline-start:3px solid var(--gold-line); border-radius:10px;
  padding:12px 14px; font-size:13.5px; line-height:1.6}
body.legal.signup .disclose p{margin:0; color:var(--muted)}
body.legal.signup .disclose p + p{margin-top:6px}
body.legal.signup .disclose .lead{color:var(--text); font-weight:500}
body.legal.signup .disclose strong{color:var(--text); font-weight:500}
body.legal.signup form{gap:10px; margin-top:18px}
body.legal.signup .box{align-items:flex-start; gap:12px; padding:13px 14px;
  background:var(--panel); transition:border-color .12s, background .12s}
body.legal.signup .box:hover{border-color:var(--gold-line)}
body.legal.signup .box:has(input:checked){border-color:var(--gold-line); background:var(--gold-soft)}
body.legal.signup .box .txt{flex:1; font-size:14.5px; line-height:1.55}
body.legal.signup .box .sub{display:block; color:var(--muted); font-size:12.5px; margin-top:3px}
body.legal.signup .tag{flex:none; font-size:11px; color:var(--dim); border:1px solid var(--line2);
  border-radius:999px; padding:1px 8px; margin-top:2px}
body.legal.signup .tag.req{color:var(--gold); border-color:var(--gold-line)}
body.legal.signup .why{min-height:18px; font-size:13px; margin:2px 0 0}
body.legal.signup button.primary{width:100%; font-weight:600}
body.legal.signup button.link{background:none; border:0; color:var(--muted); font-size:13px;
  min-height:36px; padding:4px; text-decoration:underline; text-underline-offset:3px;
  text-decoration-color:var(--line2)}
body.legal.signup button.link:hover{color:var(--text)}
body.legal.signup .notice{margin-top:22px; padding-top:16px; border-top:1px solid var(--line)}
body.legal.signup .notice h2{font-size:13px; font-weight:600; margin:0 0 6px; color:var(--text)}
body.legal.signup .notice p{font-size:12.5px; line-height:1.6; margin:0 0 8px}
body.legal.signup nav.legal-links{margin-top:12px; justify-content:center}
/* The email-and-password way: the address proven first, in the same card,
   with the same field and button as the sign-in panel - then the boxes. */
body.legal.signup .step{margin-top:18px}
body.legal.signup .step .says{margin:0 0 10px; font-size:14.5px; line-height:1.55}
body.legal.signup .step .addr{color:var(--text); direction:ltr; font-weight:500}
body.legal.signup .step form{margin-top:0}
body.legal.signup .field{font:inherit; font-size:16px; padding:11px 12px; border-radius:8px;
  color:var(--text); background:var(--well, #07090c); border:1px solid var(--line2);
  min-width:0; width:100%; box-sizing:border-box}
body.legal.signup .field:focus{outline:none; border-color:var(--gold-line);
  box-shadow:var(--ring, 0 0 0 3px rgba(228,199,120,.13))}
body.legal.signup .field.code{font-size:22px; letter-spacing:.32em; text-align:center;
  font-variant-numeric:tabular-nums}
body.legal.signup .mailstate{color:var(--muted); font-size:13px; margin:10px 0 0; min-height:18px}
body.legal.signup .links{display:flex; flex-wrap:wrap; justify-content:center; gap:4px 16px}
body.legal.signup .pw{display:flex; flex-direction:column; gap:8px; padding:13px 14px;
  border:1px solid var(--gold-line); border-radius:8px; background:var(--panel)}
body.legal.signup .pw .txt{font-size:14.5px; line-height:1.55}
body.legal.signup .pw .sub{display:block; color:var(--muted); font-size:12.5px; margin-top:3px}
body.legal.signup [hidden]{display:none !important}
@media (max-width:480px){
  body.legal.signup{padding:12px 10px 32px}
  body.legal.signup main.card{padding:20px 16px 14px; border-radius:12px}
}