/* agreement.css - /beta-agreement in the editor's clothes, /download's twin.
   The base is a COPY of download.css's (pixel grid, 4px borders, hard offset shadows, the 8-bit wordmark top-right),
   not a link to it, so a download-page edit cannot break the agreement page. Every color is a token from themes.css,
   so the page wears whatever editor theme theme.js picked.
   Reid (2026-10-15): "make sure the webpage is jeriathan themed". The page itself is GENERATED by
   make_beta_agreement.py; only this file is written by hand. */
:root{
  --px:4px;          /* the border width every block shares */
  --shadow:10px;     /* the hard offset shadow every block casts */
}
*{ box-sizing:border-box; margin:0; padding:0 }
[hidden]{ display:none !important }

body{
  background:var(--bg);
  color:var(--text);
  font-family:"Libre Franklin","Franklin Gothic Book",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-weight:600;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  /* the pixel grid: two hairline sets, deliberately faint */
  background-image:
    linear-gradient(to right, var(--grid-ink) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-ink) 1px, transparent 1px);
  background-size:32px 32px;
}
a{ color:var(--accent) }
h1,h2{ font-family:var(--display); font-weight:var(--display-weight); letter-spacing:var(--display-spacing) }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--bg); padding:10px 16px; font-weight:800;
}
.skip-link:focus{ left:12px; top:12px }
main:focus{ outline:none }

.wrap{ width:100%; max-width:1000px; margin:0 auto; padding:0 24px }

/* ---------- top: "Beta Agreement", small, top-left; the wordmark top-right ---------- */
.top{ padding:26px 0 10px }
.top .wrap{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px }
.label{
  flex:1 1 auto; min-width:0; padding-top:4px;
  font-size:12px; font-weight:600; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted); line-height:1.2;
}
.home{ display:block; flex:0 0 auto; width:208px; line-height:0; text-decoration:none }
.home:focus-visible{ outline:3px solid var(--accent); outline-offset:6px }
canvas{ display:block; image-rendering:pixelated; image-rendering:crisp-edges }

/* ---------- main: the whole text in one blocky panel ---------- */
main{ flex:1; width:100%; padding:6px 0 56px }

.block{
  background:var(--panel);
  border:var(--px) solid var(--accent);
  box-shadow:var(--shadow) var(--shadow) 0 0 var(--shadow-ink);
  padding:34px 40px 40px;
}

.legal .title{
  font-size:clamp(26px,3.6vw,38px); line-height:1.15; color:var(--text);
  max-width:760px; text-wrap:balance;
}
.legal .body{ margin-top:10px; max-width:760px; font-size:16px; font-weight:500; line-height:1.7 }
.legal .body p{ margin:0 0 16px }
.legal .body p:last-child{ margin-bottom:0 }
.legal .body strong{ font-weight:800; color:var(--text) }
.legal .body .muted{
  margin:0 0 24px; padding-bottom:20px; border-bottom:2px solid var(--line);
  font-size:12px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}
.legal .body h2{
  margin:34px 0 12px; font-size:clamp(18px,2.2vw,22px); line-height:1.25; color:var(--accent);
}
.legal .body .muted + h2{ margin-top:0 }
.legal .body ul.items{ list-style:none; margin:0 0 16px; padding-left:22px }
.legal .body li{ margin:0 0 8px }
.legal .body a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px }
.legal .body a:focus-visible{ outline:3px solid var(--accent); outline-offset:2px }

/* ---------- footer ---------- */
.site-footer{ margin-top:auto; padding:28px 0 26px; border-top:var(--px) solid var(--accent); background:var(--panel) }
.footer-nav{ display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:0 }
.footer-nav a{
  color:var(--accent); text-decoration:none; font-weight:800; font-size:13px;
  padding:4px 14px; border-right:2px solid var(--line);
}
.footer-nav a:last-child{ border-right:0 }
.footer-nav a:hover,.footer-nav a[aria-current="page"]{ text-decoration:underline; text-underline-offset:5px }
.footer-nav a:focus-visible{ outline:3px solid var(--accent); outline-offset:2px }
.copyright{ text-align:center; font-size:12px; font-weight:600; color:var(--muted); margin-top:10px }

/* ---------- phones ---------- */
@media (max-width:600px){
  :root{ --shadow:6px }
  .wrap{ padding:0 16px }
  .top{ padding-top:20px }
  .home{ width:156px }
  .block{ padding:24px 18px 28px }
  .legal .body{ font-size:15px }
  .legal .body ul.items{ padding-left:12px }
  .footer-nav a{ padding:4px 10px; border-right:0 }
}