/* Shared styles for LaLaLand legal / policy pages.
   Used by the combined index.html (Terms · Privacy · Guidelines · DMCA) and the
   thin redirect stubs that keep the old per-document URLs alive. */

:root { color-scheme: dark; }
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #2a2a2a;
  color: #eef2ff;
  line-height: 1.7;
}

header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.53);
  backdrop-filter: blur(12px);
}
/* Matches the shared .btn-back in styles.css used by the other pages. */
.btn-back {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  color: #d0d0d0;
  border: none;
  cursor: pointer;
  transition: color 0.12s ease;
}
.btn-back:hover { color: #ffffff; }
.btn-back svg { display: block; width: 20px; height: 20px; }
header h1 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ── Tab bar ─────────────────────────────────────────────────────────────── */
.tabbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  overflow-x: auto;            /* safety: scroll rather than break if a row can't fit */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabbar::-webkit-scrollbar { display: none; }
.tabbar button {
  flex: 0 1 auto;
  white-space: nowrap;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #b8b8b8;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 7px 9px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.tabbar button:hover { color: #eef2ff; background: rgba(255, 255, 255, 0.06); }
.tabbar button.active { color: #fff; background: #3a3a3a; border-color: rgba(255, 255, 255, 0.14); }
@media (max-width: 480px) {
  .tabbar { gap: 2px; padding: 7px 8px; }
  .tabbar button { font-size: 10.5px; padding: 6px 5px; letter-spacing: 0; }
}

/* ── Content ─────────────────────────────────────────────────────────────── */
main {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 24px 40px;
}

.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-panel .doc-title {
  margin: 0.2rem 0 0;
  font-size: clamp(1.5rem, 2vw, 2rem);
  letter-spacing: -0.03em;
}
.tab-panel .updated { margin: 0.3rem 0 0; color: #909090; font-size: 0.92rem; }

section {
  margin-top: 1.6rem;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: #262626;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
h2 { margin-top: 0; color: #eef2ff; }
h3 { margin: 1.4rem 0 0.5rem; color: #d7e0ff; font-size: 1.1rem; }
p, li { color: #eef2ff; font-size: 1rem; }
ul { margin: 0.75rem 0 0 1.3rem; padding: 0; list-style: disc inside; }
a { color: #84b7ff; text-decoration: none; }
a:hover { text-decoration: underline; }
.small { color: #909090; font-size: 0.95rem; }
.section-title { margin-top: 0; font-size: 1.25rem; letter-spacing: -0.02em; }