:root {
  --theme-control: #191714;
  --theme-hover: #2c241b;
  --theme-border: #fff4e126;
}

.header-actions { justify-self:end; display:flex; align-items:center; gap:8px }
.mobile-header-actions { display:none }
.theme-toggle {
  display:inline-grid;
  place-items:center;
  flex:none;
  width:46px;
  min-height:46px;
  padding:0;
  border:1px solid var(--theme-border);
  border-radius:50%;
  background:var(--theme-control);
  color:inherit;
  cursor:pointer;
}
.theme-toggle:hover { background:var(--theme-hover) }
.theme-toggle svg {
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
}
.theme-toggle .theme-moon, [data-theme="light"] .theme-toggle .theme-sun { display:none }
[data-theme="light"] .theme-toggle .theme-moon { display:block }

@media (max-width:900px) {
  .header-actions { display:none }
  .mobile-header-actions { display:flex; align-items:center; gap:8px; padding:4px 4px 0 }
  .mobile-header-actions .mobile-google { margin-top:0 }
}
@media (max-width:360px) {
  .mobile-header-actions .mobile-google { padding-inline:10px; white-space:normal }
}

:root[data-theme="light"] {
  color-scheme:light;
  --base:#fff9ef;
  --text:#251b12;
  --muted:#584736;
  --accent:#8d4900;
  --line:#d4bfa5;
  --theme-control:#fff;
  --theme-hover:#f8eddd;
  --theme-border:var(--line);
  background:var(--base);
  color:var(--text);
}

[data-theme="light"] .brand img { content:url("/assets/socialx-logo-light.png") }
[data-theme="light"] .public-page .nav,
[data-theme="light"] .public-page .google,
[data-theme="light"] .public-page .menu,
[data-theme="light"] .public-page .secondary,
[data-theme="light"] .public-page .slide-arrow {
  color:var(--text);
  background:#fff;
  border-color:var(--line);
}
[data-theme="light"] .public-page .nav a { color:var(--text) }
[data-theme="light"] .public-page .nav a:hover,
[data-theme="light"] .public-page .google:hover,
[data-theme="light"] .public-page .secondary:hover,
[data-theme="light"] .public-page .slide-arrow:hover,
[data-theme="light"] .public-page .slide-dot:hover { background:var(--theme-hover) }
[data-theme="light"] .public-page .nav a[aria-current="page"] {
  color:var(--accent);
  background:#ffebc4;
  box-shadow:inset 0 0 0 1px #d5a451;
}
[data-theme="light"] .home-page .atmosphere {
  background:radial-gradient(ellipse 65% 62% at 50% -8%,#f5d6a7,transparent);
}
[data-theme="light"] .home-page .atmosphere::before {
  background-image:linear-gradient(#8d490016 1px,transparent 1px),linear-gradient(90deg,#8d490016 1px,transparent 1px);
}
[data-theme="light"] .home-page .slide-dot:not([aria-pressed="true"])::after { background:#89715a }
[data-theme="light"] .public-page dialog { background:#fff; color:var(--text) }
[data-theme="light"] .mission-page .shell {
  background:radial-gradient(ellipse 490px 145px at 50% -28px,#f5d6a7,transparent);
}
[data-theme="light"] .mission-page .mission h1 { color:var(--text) }
[data-theme="light"] .mission-page .mission p { color:var(--muted) }
[data-theme="light"] .mission-page .mission-photo-frame { border-color:var(--line) }

[data-theme="light"] .admin-page a { color:var(--accent) }
[data-theme="light"] .admin-page header,
[data-theme="light"] .admin-page section,
[data-theme="light"] .admin-page .slide-form,
[data-theme="light"] .admin-page #admin-navigation a { border-color:var(--line) }
[data-theme="light"] .admin-page section,
[data-theme="light"] .admin-page input,
[data-theme="light"] .admin-page textarea { background:#fff; border-color:var(--line) }
[data-theme="light"] .admin-page .hint { color:var(--muted) }
[data-theme="light"] .admin-page :focus-visible { outline-color:var(--accent) }

.google.profile-trigger {
  display:grid;
  place-items:center;
  min-width:46px;
  width:46px;
  min-height:46px;
  padding:0;
  border-radius:50%;
}
.profile-avatar {
  position:relative;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  overflow:hidden;
  border-radius:50%;
  background:var(--brand-gradient);
  color:#201206;
  font-weight:700;
}
.profile-avatar img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.google[data-auth-pending] { visibility:hidden; width:46px; flex:none; padding:0; overflow:hidden }
[data-google-sign-in][hidden], .profile-trigger[hidden] { display:none }
