/* account.css - the account page in the editor's clothes.
   Blocky like the home page: hard square edges, solid offset shadows, a pixel grid under everything,
   the 8-bit wordmark. Every color is a token from themes.css, which is generated from the editor's own
   themes (make_themes.py), so the page wears whatever skin the editor is wearing. Body copy keeps one
   face; only headings take a theme's display face, the way the editor's costume themes work. */
: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 }
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto } }

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: "Account" and the email, 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 }
.who{ flex:1 1 auto; min-width:0; padding-top:4px }
.who-label{
  font-size:12px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted); line-height:1.2;
}
.who-email{ margin-top:7px; font-size:14px; font-weight:700; color:var(--text); overflow-wrap:anywhere }
.who-email:empty{ display:none }
.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 ---------- */
main{ flex:1; width:100%; padding:6px 0 56px }
.status{ min-height:22px; font-size:14px; font-weight:800; color:var(--accent); margin:0 0 14px }

/* every box on the page: accent border, hard offset shadow, never blurred */
.block{
  background:var(--panel);
  border:var(--px) solid var(--accent);
  box-shadow:var(--shadow) var(--shadow) 0 0 var(--shadow-ink);
  padding:26px 26px 28px;
  margin:0 0 40px;
}
.section-title{
  font-size:13px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--muted); margin:0 0 18px; line-height:1.3;
}
.note{ font-size:14px; font-weight:600; color:var(--muted); max-width:640px; text-wrap:pretty }
.note a,.form-note a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px }
.form-note{ font-size:13px; font-weight:600; color:var(--muted); margin-top:8px }
.signin p{ font-size:16px; font-weight:700; margin-bottom:18px; max-width:560px }

/* ---------- credits ---------- */
.balance{
  font-family:var(--display); font-weight:var(--display-weight); letter-spacing:var(--display-spacing);
  font-size:clamp(36px,5vw,52px); line-height:1; color:var(--text); margin:0 0 12px;
}
.balance strong{ font-weight:inherit }
.topup{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px; margin:20px 0 16px }
.topup label{ font-size:14px; font-weight:800; color:var(--text) }

/* ---------- fields and buttons ---------- */
input[type="number"],input[type="text"],input[type="email"]{
  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;
}
input[type="number"]{ width:110px }
input::placeholder{ color:var(--muted); opacity:1 }
input:focus-visible{ outline:3px solid var(--accent); outline-offset:2px }
.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; 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;
}
.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 }
.btn.ghost{ background:transparent; color:var(--accent) }
.btn.ghost:hover{ background:var(--accent); color:var(--bg) }
.actions{ margin-top:4px }

/* ---------- connect: one tile per platform ---------- */
.connect{ margin:0 0 44px }
.platforms{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:22px; align-items:start;
}
.platform{ min-width:0; display:flex; flex-direction:column }
.tile{
  flex:none; min-height:186px;   /* every tile the same height, whether or not a Disconnect line hangs under it */
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; gap:10px;
  padding:20px 10px 16px;
  background:var(--panel);
  border:var(--px) solid var(--line-strong);
  box-shadow:var(--shadow) var(--shadow) 0 0 var(--shadow-ink);
  color:var(--text); text-decoration:none;
  transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.tile[href]{ cursor:pointer }
.tile[href]:hover{
  border-color:var(--accent);
  transform:translate(-2px,-2px);
  box-shadow:calc(var(--shadow) + 2px) calc(var(--shadow) + 2px) 0 0 var(--shadow-ink);
}
.tile:focus-visible{ outline:3px solid var(--accent); outline-offset:4px }
.platform[data-state="on"] .tile{ border-color:var(--accent) }
.platform[data-state="unavailable"] .tile{ opacity:.6 }
/* Platform marks stay plain white: every one of these brands allows its mark in white, and none allows
   it recoloured. On a light panel the mark sits on an ink chip so it still reads. */
.mark{ display:flex; align-items:center; justify-content:center; width:48px; height:48px; background:var(--mark-chip) }
.mark svg,.mark img{ width:28px; height:28px; fill:#fff; display:block; object-fit:contain }
.pname{ font-size:15px; font-weight:800; color:var(--text) }
.pstate{
  display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap;
  min-height:20px; font-size:12.5px; font-weight:700; line-height:1.3; color:var(--muted);
}
.pstate svg{ width:18px; height:18px; flex:none; display:none }
.pstate .ok{ color:var(--accent) }
.platform[data-state="on"] .pstate{ color:var(--text) }
.platform[data-state="on"] .ok{ display:block }
.platform[data-state="off"] .sad,
.platform[data-state="reconnect"] .sad,
.platform[data-state="unavailable"] .sad{ display:block }
.punlink{
  display:block; flex:none; margin:calc(var(--shadow) + 8px) auto 0;
  background:none; border:0; padding:4px 6px; font:inherit; font-size:12.5px; font-weight:700;
  color:var(--muted); text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.punlink:hover{ color:var(--accent) }
.punlink:focus-visible{ outline:3px solid var(--accent); outline-offset:2px }
@media (max-width:860px){ .platforms{ grid-template-columns:repeat(3,minmax(0,1fr)) } }
@media (max-width:540px){ .platforms{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px } }

/* ---------- your stats ---------- */
.consent{ display:flex; align-items:flex-start; gap:10px; margin:18px 0 6px; font-size:15px; font-weight:800; cursor:pointer; max-width:640px }
.consent input[type="checkbox"]{ flex:none; width:18px; height:18px; margin-top:3px; accent-color:var(--accent); cursor:pointer }

/* ---------- Reid's testers (account.js renderTesters) ---------- */
.tester-row{ display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 4px }
.tester-row input{ flex:1 1 200px }
.tester-list{ list-style:none; margin:14px 0 0; padding:0 }
.tester-list li{ margin:0 0 18px; font-size:14px }
.tester-list li:last-child{ margin-bottom:0 }
.tester-list p{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }
.tester-list input[type="text"]{ flex:1 1 280px; max-width:520px; font-size:12px; padding:8px 10px }
.tester-list .btn{ padding:8px 14px; font-size:13px; box-shadow:none }
.tester-list select{
  background:var(--field); color:var(--text); border:var(--px) solid var(--line-strong);
  padding:8px 10px; font:inherit; font-weight:700; font-size:13px;
}
.tester-list select:focus-visible{ outline:3px solid var(--accent); outline-offset:2px }

/* ---------- footer ---------- */
.site-footer{ margin-top:auto; padding:36px 0 34px; 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:15px;
  padding:6px 18px; 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:6px }
.footer-nav a:focus-visible{ outline:3px solid var(--accent); outline-offset:2px }
.copyright{ text-align:center; font-size:13px; font-weight:600; color:var(--muted); margin-top:14px }

/* ---------- phones ---------- */
@media (max-width:600px){
  :root{ --shadow:6px }
  .wrap{ padding:0 16px }
  .top{ padding-top:20px }
  .home{ width:156px }
  .block{ padding:20px 16px 22px; margin-bottom:32px }
  .footer-nav a{ padding:6px 12px; border-right:0 }
}