/* page.css - the plain pages in the editor's clothes: /privacy, /terms, /support, /data-deletion, /requirements,
   /connected and /link. Reid (2026-10-16): "make sure none of the jeriathan pages are reidolsonmedia themed" -
   these seven wore the old app.css look until then.
   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- or account-page edit cannot break these pages. Every color is a token from
   themes.css, so a page wears whatever editor theme theme.js picked. */
: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,h3{ 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: the page's name, 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:800; 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 page 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;
}

.title{
  font-size:clamp(26px,3.6vw,38px); line-height:1.15; color:var(--text);
  max-width:760px; text-wrap:balance;
}
.body{ margin-top:12px; max-width:760px; font-size:16px; font-weight:500; line-height:1.7 }
.body p{ margin:0 0 16px }
.body p:last-child{ margin-bottom:0 }
.body strong{ font-weight:800; color:var(--text) }
.body em{ font-style:italic }
.body h2{
  margin:34px 0 12px; font-size:clamp(18px,2.2vw,22px); line-height:1.25; color:var(--accent);
  scroll-margin-top:16px;
}
.body h3{ margin:24px 0 8px; font-size:17px; line-height:1.3; color:var(--text) }
.body ul,.body ol{ margin:0 0 16px; padding-left:24px }
.body ul{ list-style:square }
.body li{ margin:0 0 8px; padding-left:4px }
.body li::marker{ color:var(--accent) }
.body li > ul,.body li > ol{ margin:8px 0 0 }
.body a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px }
.body a:focus-visible{ outline:3px solid var(--accent); outline-offset:2px }
.body code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.86em; font-weight:500;
  background:var(--field); border:1px solid var(--line); padding:1px 5px; overflow-wrap:anywhere;
}

/* small, quiet lines: a status, a "last updated", a note */
.muted{ font-size:14px; font-weight:600; color:var(--muted) }
.muted:empty{ display:none }
.form-note{ font-size:13px; font-weight:600; color:var(--muted) }
.form-note a{ color:var(--accent) }
/* a long page's first line ("Last updated", a one-line summary) sits above a rule */
.legal .body > .muted:first-child{
  margin:0 0 26px; padding-bottom:18px; border-bottom:2px solid var(--line); font-size:13px;
}
.legal .body > .muted:first-child + h2{ margin-top:0 }

/* ---------- facts (/requirements): a small label beside each value ---------- */
.body dl{ display:grid; grid-template-columns:max-content 1fr; gap:10px 24px; align-items:baseline; margin:22px 0 8px }
.body dt{
  font-size:10.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); line-height:1.3;
}
.body dd{ margin:0; font-size:17px; font-weight:800; color:var(--text); line-height:1.35 }
.body table{ width:100%; border-collapse:collapse; margin:4px 0 10px; font-size:14px; line-height:1.4 }
.body th,.body td{ border:2px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top }
.body th{
  font-size:10.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); background:var(--panel-2);
}
.body td{ font-weight:700; color:var(--text) }

/* ---------- buttons and the one field (/link) ---------- */
.btn{
  display:inline-block;
  background:var(--accent); color:var(--bg);
  border:var(--px) solid var(--accent);
  padding:11px 22px; font:inherit; font-weight:800; font-size:15px; line-height:1.4; letter-spacing:.02em;
  text-decoration:none; cursor:pointer;
  box-shadow:6px 6px 0 0 var(--shadow-ink);
  transition:transform .12s ease, box-shadow .12s ease;
}
.body a.btn{ color:var(--bg); text-decoration:none }
.btn:hover,.body a.btn:hover{ background:var(--bg); color:var(--accent) }
.btn:active{ transform:translate(2px,2px); box-shadow:4px 4px 0 0 var(--shadow-ink) }
.btn:disabled{ opacity:.55; cursor:default; transform:none }
.btn:focus-visible{ outline:3px solid var(--accent); outline-offset:4px }
input[type="text"]{
  background:var(--field); color:var(--text);
  border:var(--px) solid var(--line-strong);
  padding:10px 12px; font:inherit; font-weight:700; font-size:15px; min-width:0; max-width:100%;
}
input::placeholder{ color:var(--muted); opacity:1 }
input:focus-visible{ outline:3px solid var(--accent); outline-offset:2px }
#link-code{
  width:16ch; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:22px; letter-spacing:.12em; text-transform:uppercase; text-align:center;
}

/* ---------- 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 }
  .body{ font-size:15px }
  .body ul,.body ol{ padding-left:18px }
  .body dl{ gap:10px 18px }
  .body table{ font-size:13px }
  .body th,.body td{ padding:8px 8px }
  .footer-nav a{ padding:4px 10px; border-right:0 }
}