/* Brutalist (high-contrast) theme since 2026-07-28 — same class names as before (this file is
   loaded by 7 account/*.php pages + both checkout-merchandiser pages), just Brutalist tokens and
   hard-border/offset-shadow components instead of the old dark theme. See public/assets/
   brutalist.css for the sitewide design system this mirrors (kept as its own file rather than
   merged into brutalist.css since this one stays a real external <link>, not inlined — these are
   logged-in/repeat-visit pages where a cached external stylesheet is the better trade-off, unlike
   the cold-landing marketing pages brutalist.css is inlined into). */
:root{
  --ink:#0a0a0a; --paper:#ffffff; --paper-2:#efe9d8;
  --amber:#f59e0b; --muted:#3a3a34; --dim:#6b6b61; --warn:#b91c1c;
}
*{box-sizing:border-box}
html,body{height:100%}
/* html (not just body) needs overflow-x:hidden — the document's horizontal scrollbox is the root
   (html) element; body{overflow-x:hidden} alone does NOT stop page-level horizontal scroll caused
   by an oversized/off-canvas child like .account-glow, it only clips within body's own box. */
html{overflow-x:hidden}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;overflow-x:hidden;display:flex;flex-direction:column;min-height:100vh;-webkit-font-smoothing:antialiased}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* nav + footer (shared partials — must define every class partials/nav.php and
   partials/footer.php reference, since both partials are shared verbatim with the pages that
   inline brutalist.css instead of linking this file) */
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;width:100%}
.lucide{width:20px;height:20px}
.mono{font-family:'JetBrains Mono',monospace}
.dim{color:var(--dim)}
#nav{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:3px solid var(--ink)}
#nav.scrolled{background:var(--paper-2)}
.nav-link{font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ink);text-decoration:none;padding-bottom:3px;border-bottom:2px solid transparent}
.nav-link:hover{border-bottom-color:var(--amber)}
.btn,.btn-brut{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:14px;letter-spacing:.03em;text-transform:uppercase;padding:17px 28px;border:3px solid var(--ink);background:var(--paper);color:var(--ink);box-shadow:6px 6px 0 var(--ink);text-decoration:none;cursor:pointer}
.btn-primary,.btn-amber{background:var(--amber)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn:hover,.btn-brut:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink)}
#mobile-menu{display:none}
footer{border-top:4px solid var(--ink);padding:56px 0 40px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:36px}
.footer-input{border:2px solid var(--ink);padding:10px 12px;font-family:'Inter',sans-serif;font-size:13px;background:var(--paper);color:var(--ink)}
.footer-btn{border:2px solid var(--ink);background:var(--ink);color:var(--paper);font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12px;text-transform:uppercase;padding:10px 14px;cursor:pointer}
@media(max-width:900px){
  .desktop-nav{display:none!important}
  #hamburger{display:inline-flex!important}
  #mobile-menu.open{display:flex}
}
@media(min-width:901px){#hamburger{display:none}}
@media(max-width:700px){.footer-grid{grid-template-columns:1fr 1fr!important}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr!important}}

/* form shell */
/* overflow-x (not overflow:hidden) on purpose: clips .account-glow horizontally without also
   setting the flex item's automatic minimum size to 0 (a flex item with any overflow other than
   "visible" loses its content-based min-height protection per the flexbox spec) — that quirk let
   a tall stacked mobile footer squeeze this card down to a sliver. body{overflow-x:hidden} is a
   second safety net against the glow's horizontal bleed. min-height is a floor so a very tall
   footer still can't win at the login card's expense. */
.account-wrap{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 24px;position:relative;overflow-x:hidden;min-height:60vh}
/* decorative blurred glow has no place in a flat, hard-edged design — hidden rather than
   restyled so account pages don't need their markup touched, same call as brutalist.css's .glow */
.account-glow{display:none}
.card{position:relative;z-index:1;background:var(--paper);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink);padding:32px;width:100%;max-width:340px;display:flex;flex-direction:column;gap:12px}
h1{color:var(--ink);font-size:18px;font-family:'Space Grotesk',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:-.01em;margin:0 0 8px}
input{padding:10px 12px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif}
.error{color:var(--warn);font-size:13px;margin:0}
.notice{color:#0a7a2f;font-size:13px;margin:0}
button{padding:10px 12px;border:2px solid var(--ink);background:var(--amber);color:var(--ink);font-weight:700;font-family:'JetBrains Mono',monospace;text-transform:uppercase;font-size:13px;cursor:pointer}
a{color:var(--ink);font-size:13px;text-decoration:underline;text-decoration-color:var(--amber)}
a:hover{text-decoration:underline}
.links{display:flex;justify-content:space-between;margin-top:4px}

.dashboard{display:block;padding:32px 24px}
.dashboard .container{max-width:960px;margin:0 auto}
.dashboard .header-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.dashboard h1{font-size:22px}
.logout-btn{padding:8px 14px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;font-size:13px;font-family:'JetBrains Mono',monospace;text-transform:uppercase}
.license-card{background:var(--paper);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);padding:20px;margin-bottom:16px;color:var(--ink)}
.license-key{font-family:'JetBrains Mono',monospace;font-size:16px;background:var(--paper-2);border:2px solid var(--ink);padding:8px 12px;display:inline-block;max-width:100%;word-break:break-all;margin:8px 0}
.badge{padding:3px 10px;border:2px solid var(--ink);font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;text-transform:uppercase}
.domain-row{color:var(--muted);font-size:13px;display:flex;gap:8px;align-items:center;margin-top:4px}
.link-btn{background:none;border:none;color:var(--ink);cursor:pointer;font-size:12px;text-decoration:underline;text-decoration-color:var(--amber);padding:0}
.small-btn{padding:6px 10px;border:2px solid var(--ink);background:var(--amber);color:var(--ink);cursor:pointer;font-size:12px;font-weight:700;font-family:'JetBrains Mono',monospace;text-transform:uppercase}
.empty{color:var(--dim)}

/* scroll-to-top — same component as public/assets/brutalist.css; footer.php (shared with the
   content pages that inline brutalist.css) renders this button's markup too, so it needs to be
   styled here as well. Show/hide + click logic is in each page's own inline script since these
   pages don't load brutalist.js. */
.scroll-top{position:fixed;right:20px;bottom:20%;z-index:40;width:48px;height:48px;border:3px solid var(--ink);background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:6px 6px 0 var(--ink);opacity:0;visibility:hidden;transform:translateY(10px)}
.scroll-top.visible{opacity:1;visibility:visible;transform:none}
@media(prefers-reduced-motion:no-preference){.scroll-top{transition:opacity .25s ease,transform .25s ease,box-shadow .15s ease}}
.scroll-top:hover{background:var(--amber);box-shadow:9px 9px 0 var(--ink);transform:translate(-2px,-2px)}
.scroll-top:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
@media(max-width:640px){.scroll-top{width:44px;height:44px}}