/* ---- COMPLICIT site refresh (2026-10) -- shared layer for the Case File form pages
   (login.html, register.html, newchar.html). Linked AFTER each page's own <style>, so
   it only ADDS graphics and polish on top of the July Case File tokens those pages
   already define (--bg/--ink/--muted/--hair/--accent/...); no page logic, ids or
   markup depend on it, and deleting the <link> restores the previous look exactly.

   - paper grain on the page background
   - Corwin City's real street grid (/img/corwin-streets.svg, generated from the
     game's map_layout.json by build_site_graphics.py) as a faint fixed backdrop
   - the form card becomes a case-file sheet: a folder tab above it + a deeper shadow
   - a dark footer band matching the landing page */

body {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .1 0 0 0 0 .11 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
}
body::before {
  content: ""; position: fixed; z-index: 0; pointer-events: none;
  left: -6vw; bottom: -10vh; width: min(1240px, 130vw); aspect-ratio: 884 / 486;
  background: url("/img/corwin-streets.svg") no-repeat center / contain;
  opacity: 0.055;
}
::selection { background: rgba(51,88,126,0.2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* the form card as a case-file sheet */
main .card {
  position: relative; margin-top: 30px;
  background: #fbfcfb;
  border-color: rgba(23,25,27,0.16);
  box-shadow: 0 1px 0 rgba(23,25,27,0.04), 0 28px 70px -22px rgba(23,25,27,0.28);
}
main .card::before {             /* the folder tab, same stock as the sheet */
  content: "File 0001-CC \00B7  Corwin City";
  position: absolute; z-index: 1; left: 22px; top: -28px; height: 29px; padding: 8px 14px 0;
  background: #fbfcfb; border: 1px solid rgba(23,25,27,0.16); border-bottom: 0;
  border-top: 2px solid var(--accent);
  font-family: 'IBM Plex Mono', Consolas, monospace; font-size: 10px; line-height: 1;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); white-space: nowrap;
}

/* inputs: a touch more presence on focus */
main .card input:focus, main .card select:focus, main .card textarea:focus {
  box-shadow: 0 0 0 3px rgba(51,88,126,0.12);
}

/* dark footer band, as on the landing page */
footer {
  max-width: none !important; width: 100%; background: #17191b; color: #899096;
  border-top: 0 !important; margin-top: 24px; position: relative; z-index: 2;
  padding-left: max(32px, calc((100% - 1080px) / 2 + 32px)) !important;
  padding-right: max(32px, calc((100% - 1080px) / 2 + 32px)) !important;
}
footer, footer .left, footer span { color: #899096; }
footer a { color: #c3c9cd; }
footer a:hover { color: #fff; }

@media (max-width: 640px) {
  main .card { margin-top: 34px; }
  main .card::before { left: 14px; font-size: 9.5px; letter-spacing: 0.16em; }
  body::before { width: 220vw; left: -60vw; opacity: 0.06; }
  footer { padding-left: 16px !important; padding-right: 16px !important; }
}