/* Support page in the website v3 night look: navy surfaces, lamp-yellow accent, pill buttons.
   Loaded after pages.css, only by support.html. */

:root {
  color-scheme: dark;
  --night-sky: oklch(0.105 0.028 266);
  --bg: oklch(0.135 0.03 265);
  --surface: oklch(0.175 0.03 265);
  --surface-2: oklch(0.23 0.03 265);
  --line: oklch(1 0 0 / 0.13);
  --ink: oklch(0.96 0.006 262);
  --muted: oklch(0.79 0.016 262);
  --blue: oklch(0.72 0.12 258);
  --blue-tint: oklch(0.26 0.07 258);
  --lamp: oklch(0.87 0.11 74);
  --lamp-soft: oklch(0.82 0.12 68 / 0.2);
}

body { background: var(--bg); }
a { color: var(--lamp); }

.nav { background: var(--night-sky); }
.lang-switch button.active { background: var(--ink); color: var(--night-sky); box-shadow: none; }

main { position: relative; }
main::before {
  content: '';
  position: absolute;
  inset: 0 calc(50% - 50vw) auto;
  height: 22rem;
  background: radial-gradient(60% 100% at 50% 0, var(--lamp-soft), transparent 70%);
  pointer-events: none;
}
main > * { position: relative; }

h1 { color: var(--ink); }
h1::after { content: ''; display: block; width: 4.5rem; height: 6px; margin-top: 0.9rem; border-radius: 3px; background: var(--lamp); }
#sp-lead { color: var(--muted); font-size: 1.15rem; }

.sp-search {
  border-color: var(--line);
  border-radius: 999px;
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9a85a' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}
.sp-search::placeholder { color: var(--muted); opacity: 0.8; }
.sp-search:focus { border-color: var(--lamp); box-shadow: 0 0 0 4px var(--lamp-soft); }

.sp-group h2 { color: var(--lamp); font-size: 1.05rem; letter-spacing: 0.04em; text-transform: uppercase; }

.sp-issue { background: var(--surface); border-color: var(--line); }
.sp-issue[open] { border-color: var(--lamp); box-shadow: 0 0 24px var(--lamp-soft); }
.sp-issue summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; }
.sp-issue summary::-webkit-details-marker { display: none; }
.sp-issue summary::after {
  content: '';
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.2rem;
  border-right: 2.5px solid var(--lamp);
  border-bottom: 2.5px solid var(--lamp);
  transform: rotate(45deg);
}
.sp-issue[open] summary::after { transform: rotate(-135deg); }
.sp-body li::marker { color: var(--lamp); }
.sp-note { background: var(--blue-tint); }
.sp-video { background: var(--surface-2); }

.sp-still { background: var(--surface); border: 1px solid var(--line); }
.sp-btn { background: var(--lamp); color: var(--night-sky); border-radius: 999px; }
.sp-btn:hover { background: oklch(0.93 0.09 80); }

footer { background: var(--night-sky); }
.socials a { background: var(--surface-2); }

.sp-empty { margin: 1.5rem 0; padding: 1.2rem 1.3rem; border: 1px dashed var(--line); border-radius: 14px; text-align: center; }
.sp-empty p { margin: 0 0 1rem; color: var(--muted); }