/* ============================================================
   Polymath shared site header — single source of truth for the
   masthead (logo, nav, auth button) and the sign-in modal that
   opens from it. Loaded identically by every page on the site.

   Relies on the same CSS custom properties (--ink, --ink-2,
   --paper, --line, --line-strong, --seal, --verdigris-bright)
   already defined in each page's own :root — those stay
   page-local since the rest of each page's design also depends
   on them (same pattern as polymath-dock.css).

   .cta-sell is intentionally NOT here: it's market.html's own
   "+ Sell" button, not part of the header itself.

   .btn-primary IS here, as a default: every page's #authSubmit
   button references class="btn-primary", but the class itself
   was only ever actually defined on index.html and
   delete-account.html — everywhere else the Sign In button in
   the auth modal was silently rendering as an unstyled native
   <button>. Pages that also use .btn-primary elsewhere for a
   bigger CTA (index.html's hero) keep their own page-local
   .btn-primary rule declared after this stylesheet, which wins
   the cascade and overrides this default just for that page.
   ============================================================ */

/* ---------- LIGHT / DARK THEME SYSTEM ----------
   Every page defines the LIGHT values for --ink, --ink-2, --paper,
   --line, --line-strong, --card, --paper-rgb, --ink-rgb in its own
   :root (unchanged). This block is the single dark override: as
   soon as <html data-theme="dark"> is set (by polymath-theme.js,
   applied pre-paint by an inline snippet in <head>), every one of
   those custom properties flips, and because the rest of the site's
   CSS reads colors exclusively through them (including hard-coded
   rgba(var(--paper-rgb),x) tints, which were swapped site-wide to
   rgba(var(--paper-rgb),x)), the whole page re-themes with no
   per-page dark CSS required. The attribute selector below always
   outranks a page's plain `:root{...}` rule, so it wins regardless
   of stylesheet order. */
html{color-scheme:light;}
html[data-theme="dark"]{
  color-scheme:dark;
  --ink:#141414;
  --ink-2:#1E1E1E;
  --paper:#F0EFEC;
  --card:#242424;
  --line: rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.22);
  --paper-rgb:240,239,236;
  --ink-rgb:20,20,20;
}
html[data-theme="dark"] #authForm input,
html[data-theme="dark"] .auth-google-btn{
  background:#2A2A2A; border-color:rgba(255,255,255,0.25);
}
html[data-theme="dark"] .auth-overlay,
html[data-theme="dark"] .checkout-overlay{ background:rgba(0,0,0,0.55); }
html[data-theme="dark"] .auth-panel{ box-shadow:0 20px 50px rgba(0,0,0,0.6); }

/* ---------- THEME TOGGLE BUTTON ---------- */
.theme-toggle{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  border:1px solid var(--line-strong); background:none; color:var(--paper);
  font-size:15px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.theme-toggle:hover{ background:var(--ink-2); }

/* ---------- MASTHEAD ---------- */
.masthead{border-bottom:1px solid var(--line); padding:20px 0;}
.masthead .wrap{max-width:1320px; padding:0 20px; display:flex; align-items:center; gap:36px;}
.brand{display:flex; align-items:center; gap:10px; margin-left:-40px; text-decoration:none; color:inherit;}
.brand-mark{
  width:47px; height:47px; border-radius:50%; overflow:hidden; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  margin-left:-38px;
}
.brand-mark img{width:100%; height:100%; object-fit:cover; display:block;}
.brand-name{font-family:'Fraunces',serif; font-size:18px; letter-spacing:0.02em;}
.cta-small{border:1px solid var(--line-strong); padding:9px 18px; border-radius:2px; font-size:13px; color:var(--paper); text-decoration:none; background:none; font-family:'IBM Plex Sans',sans-serif; cursor:pointer;}

/* Header search bar — sits right after the brand, in the space nav used
   to occupy. Pushes .masthead-right to the far edge via its own
   margin-left:auto. */
.header-search{
  flex:0 1 520px; min-width:0; margin:0 auto;
  background:transparent; color:var(--paper);
  border:1px solid var(--line-strong); border-radius:20px;
  padding:9px 14px; font-family:'IBM Plex Sans',sans-serif; font-size:13px; outline:none;
}
.header-search::placeholder{color:rgba(var(--paper-rgb),0.35);}
.header-search:focus{border-color:var(--verdigris-bright);}

@media (max-width:760px){
  .header-search{display:none;}
}

.masthead-right{display:flex; align-items:center; gap:14px; margin-left:auto;}

/* Google Play badge — official image, shown unmodified beside Sign In */
.play-badge{display:inline-flex; align-items:center; line-height:0;}
.play-badge img{height:38px; width:auto; display:block;}
@media (max-width:520px){
  .play-badge img{height:32px;}
}

/* ---------- AUTH ---------- */
.auth-area{display:flex; align-items:center; gap:10px;}
.auth-user{font-size:12.5px; color:var(--paper); display:flex; align-items:center; gap:8px;}
.auth-signout{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.03em;
  color:var(--paper); background:none; text-decoration:none;
  border:1px solid var(--line-strong); border-radius:2px; padding:8px 14px; cursor:pointer;
  transition:border-color 0.15s ease, background 0.15s ease;
}
.auth-signout:hover{ border-color:var(--paper); background:var(--ink-2); }
.auth-overlay{
  position:fixed; inset:0; background:rgba(var(--paper-rgb),0.35);
  display:none; align-items:center; justify-content:center; z-index:60; padding:24px;
}
.auth-overlay.open{display:flex;}
.auth-panel{
  background:var(--ink); border-radius:10px; max-width:360px; width:100%;
  padding:28px; box-shadow:0 20px 50px rgba(0,0,0,0.25);
}
.auth-close{
  float:right; border:none; background:none; font-size:11px;
  color:rgba(var(--paper-rgb),0.5); cursor:pointer; font-family:'IBM Plex Mono',monospace;
}
.auth-tabs{
  display:flex; border:1px solid var(--line-strong); border-radius:20px;
  overflow:hidden; margin:22px 0 18px; clear:both;
}
.auth-tab{
  flex:1; padding:9px 0; text-align:center; font-size:12px;
  font-family:'IBM Plex Mono',monospace; background:none; border:none;
  cursor:pointer; color:rgba(var(--paper-rgb),0.55);
}
.auth-tab.active{background:var(--paper); color:var(--ink);}
#authForm{display:flex; flex-direction:column; gap:10px;}
.auth-avatar-row{display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:2px;}
.auth-avatar-picker{
  position:relative; width:64px; height:64px; padding:0; border:none; background:none; cursor:pointer;
}
.auth-avatar-circle{
  display:flex; align-items:center; justify-content:center; width:64px; height:64px; border-radius:50%;
  border:1.5px solid rgba(var(--paper-rgb),0.3); background:#ECEBE7; color:rgba(var(--ink-rgb,0,0,0),0.35);
  overflow:hidden;
}
.auth-avatar-circle svg{width:56%; height:56%; fill:currentColor;}
.auth-avatar-circle img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
.auth-avatar-badge{
  position:absolute; right:-2px; bottom:-2px; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--verdigris-bright);
  color:#fff; font-size:14px; line-height:1; border:2px solid var(--ink);
}
.auth-avatar-hint{color:rgba(var(--paper-rgb),0.5); font-size:10.5px;}
#authForm input{
  border:1.5px solid rgba(var(--paper-rgb),0.3); border-radius:8px; padding:10px 12px;
  font-size:13px; font-family:'IBM Plex Sans',sans-serif;
  background:#ECEBE7; color:var(--paper);
}
#authForm input:focus{outline:none; border-color:var(--paper);}
.auth-error{color:var(--seal); font-size:11px; min-height:14px;}
.auth-note{color:var(--verdigris-bright); font-size:11px; min-height:14px;}
#authSubmit{margin-top:2px; width:100%; text-align:center; border:none; cursor:pointer;}
.auth-divider{display:flex; align-items:center; gap:10px; margin:16px 0 14px; color:rgba(236,235,231,0.4); font-size:11px; font-family:'IBM Plex Mono',monospace;}
.auth-divider::before,.auth-divider::after{content:''; flex:1; height:1px; background:rgba(236,235,231,0.2);}
.auth-google-btn{
  display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  padding:10px 0; border-radius:8px; border:1.5px solid rgba(var(--paper-rgb),0.3);
  background:#ECEBE7; color:var(--paper); font-size:13px; font-family:'IBM Plex Sans',sans-serif;
  cursor:pointer;
}
.auth-google-btn:hover{border-color:var(--paper);}
.auth-link{background:none;border:none;cursor:pointer;padding:0;color:rgba(var(--paper-rgb),0.6);font-size:11px;font-family:'IBM Plex Mono',monospace;text-decoration:underline;}
.auth-link:hover{color:var(--paper);}
.auth-recover-title{font-size:13px;color:var(--paper);margin:2px 0 16px;text-align:center;font-family:'IBM Plex Mono',monospace;}
#authRecoverStep1Form,#authRecoverStep2Form{display:flex; flex-direction:column; gap:10px;}
#authRecoverStep1Form input,#authRecoverStep2Form input{
  border:1.5px solid rgba(var(--paper-rgb),0.3); border-radius:8px; padding:10px 12px;
  font-size:13px; font-family:'IBM Plex Sans',sans-serif;
  background:#ECEBE7; color:var(--paper);
}
#authRecoverStep1Form input:focus,#authRecoverStep2Form input:focus{outline:none; border-color:var(--paper);}
#recoverSendBtn,#recoverResetBtn{margin-top:2px; width:100%; text-align:center; border:none; cursor:pointer;}
.btn-primary{background:var(--paper); color:var(--ink); text-decoration:none; padding:12px 22px; border-radius:2px; font-size:13.5px; font-weight:600; border:none; cursor:pointer;}

/* Sign in / name / sign out now live in the action dock's Account cell
   (polymath-dock.js). The header's authArea stays in the DOM because each
   page's renderAuthUI() still writes into it and it also hosts "+ Sell"
   (market) and "Get the App" (projects, qasra) — only the account bits hide. */
#authArea #authTrigger,
#authArea .auth-user,
#authArea .auth-signout{display:none !important;}