/* Appsinity documentation, policy and marketing pages - pixel skin.
   The store family has its own sheets (pixel-store.css / pixel-listing.css / pixel-retro.css); this one
   covers the prose template those pages share. Prose stays readable: Pixelify Sans for body copy, and the
   blocky Press Start 2P face is reserved for page titles. Delete the <link> to undo a page. */

:root,
:root[data-theme="light"] {
  --bg: #05060b;
  --panel: #0d1020;
  --panel2: #151a2e;
  --line: #2a3150;
  --line2: #454f7c;
  --text: #eef1fb;
  --muted: #a3adc9;
  --purple: #8b42ff;
  --px-shadow: 5px 5px 0 #000;
}

html, body {
  font-family: "Pixelify Sans", ui-monospace, "Cascadia Mono", Consolas, monospace !important;
  background: var(--bg) !important;
  color: var(--text);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
}
body {
  background: radial-gradient(circle at 12% 0, rgba(109, 61, 255, .16), transparent 30rem), var(--bg) !important;
  font-size: 16px;
  line-height: 1.8;
}
:root[data-theme="light"] body { color: var(--text) !important; }

/* ---------- corners: square surfaces, curved controls ---------- */
* { border-radius: 0 !important; text-shadow: none; }
.studioBtn, .primary, .navBtn, .panelClose, button, input, select, textarea,
.top nav a, .sidebar a, .sidebar summary, .toc a, .related a, .panelLink, .quickLinks a, .crumb { border-radius: 14px !important; }

/* ---------- hard plates ---------- */
.callout, .toc, .related, .faq, .card, .panel, .box, table, pre, .contactCards > *, .quickLinks a {
  border: 3px solid var(--line) !important;
  background: var(--panel) !important;
  box-shadow: var(--px-shadow);
}
.callout { border-color: rgba(139, 66, 255, .55) !important; background: #170f2c !important; }
code, pre { background: #0b0e1c !important; color: #d9c4ff; }

/* ---------- header ---------- */
.top {
  border-bottom: 3px solid var(--line) !important;
  background: #080a14 !important;
  backdrop-filter: none !important;
}
.brand { font-family: "Pixelify Sans", monospace; font-weight: 700 !important; letter-spacing: .06em; }
.brand img, .brandimg { image-rendering: pixelated; }
.top nav a { color: #cfd6ee !important; font-weight: 700; letter-spacing: .03em; }
.top nav a:hover, .top nav a.active { background: #1b2140 !important; color: #fff !important; box-shadow: inset 0 -4px 0 var(--purple) !important; }
.studioBtn { background: var(--purple) !important; border: 3px solid #000 !important; box-shadow: 4px 4px 0 #000; font-weight: 700; letter-spacing: .04em; }
.studioBtn:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 #000; }
.menuBtn { border: 3px solid var(--line) !important; background: #0d1020 !important; }

/* ---------- side navigation ---------- */
.sidebar { border-right: 3px solid var(--line); }
.sidebar details { border-bottom: 3px solid var(--line) !important; }
.sidebar summary { color: #fff; font-weight: 700; letter-spacing: .04em; }
.sidebar details a { color: var(--muted) !important; font-size: 14px; }
.sidebar a:hover, .sidebar a.active { background: #241a45 !important; color: #fff !important; }
.navPanel, .navPanelOverlay { background: #0b0e1c !important; border: 3px solid var(--line2) !important; box-shadow: 8px 8px 0 rgba(0, 0, 0, .8) !important; backdrop-filter: none !important; }
.panelHead, .panelLinks { border-color: var(--line) !important; border-width: 3px !important; }
.panelLink:hover { background: #241a45 !important; color: #fff !important; }

/* ---------- titles ---------- */
h1, .hero h1 {
  font-family: "Press Start 2P", ui-monospace, monospace !important;
  font-size: clamp(1.05rem, 2vw, 1.85rem) !important;
  line-height: 1.75 !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  margin: 18px 0 22px !important;
}
h2 { font-size: 1.45rem !important; font-weight: 700 !important; letter-spacing: .03em; border-left: 6px solid var(--purple); padding-left: 12px; }
h3 { font-size: 1.1rem !important; font-weight: 700 !important; letter-spacing: .03em; }
.eyebrow, .panelKicker, .crumb { font-size: 11px !important; letter-spacing: .18em; text-transform: uppercase; font-weight: 700; color: #cbb6ff !important; }
.lead, .hero p { font-size: 17px; line-height: 1.85; color: #c3cbe6; }
.hero { border: 3px solid var(--line) !important; background: var(--panel) !important; }
.heroOverlay { background: linear-gradient(90deg, #05060b 0%, rgba(5, 6, 11, .94) 40%, rgba(5, 6, 11, .55) 72%, rgba(5, 6, 11, .1) 100%) !important; }
.heroimg, .hero img { image-rendering: pixelated; }
.divider { background: var(--line) !important; height: 3px !important; }
.footerLine { border-top: 3px solid var(--line) !important; }
.storeFooter, footer { border-top: 3px solid var(--line) !important; }
.topStrip { border-bottom: 3px solid var(--line) !important; background: #080a14 !important; }

/* ---------- imagery ---------- */
img { image-rendering: pixelated; }
svg { shape-rendering: geometricPrecision; }

/* ---------- motion + screen ---------- */
* { transition-duration: .26s !important; }
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
  opacity: .5;
  mix-blend-mode: multiply;
}
@media (prefers-reduced-motion: reduce) { body::after { display: none; } }
@media (max-width: 760px) {
  body::after { display: none; }
  h1, .hero h1 { font-size: 1rem !important; }
  .sidebar { border-right: 0; }
}

/* ---------- legal fine print: never pixel ---------- */
/* Consent sentences, footer copyright and policy links are legal text. Pixelify Sans is a bitmap face and
   small legal copy in it is hard to read and looks unserious, so these lines keep the system font even on
   pages that wear the pixel skin. */
.auth-note, .legalText, .legalText div, .legalLinks, .legalLinks a,
.check span, .finish-check span, .noteBox, .wp-disclaimer, .privacy-note,
.disclaimer, .finePrint, .fine-print, .footnote, small {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
  letter-spacing: normal !important;
}
.auth-note a, .legalLinks a { text-decoration: underline; text-underline-offset: 3px; }