/* ==========================================================================
   Funny BMI / Sleep tools — Shared Site Styles
   Path: /assets/site.css
   ========================================================================== */

/* ---------- CSS Reset (minimal) ---------- */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; }

/* ---------- Design Tokens ---------- */
:root {
  color-scheme: dark;
  --bg: #0f0e12;
  --bg-2: #0b0f18;

  --panel: rgba(14, 18, 28, .72);          /* glassy card */
  --panel-solid: #101525;

  --line: rgba(255, 255, 255, .14);        /* subtle borders */

  --ink: #E9EAEE;                          /* main text */
  --ink-dim: #9AA3B2;                      /* muted text */

  --accent: #8b5cf6;                       /* purple accent */
  --accent-ink: #1b1533;

  --radius: 14px;
  --shadow-1: 0 10px 30px rgba(0,0,0,.45);
  --shadow-2: inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Optional light theme support */
[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f8fb;
  --bg-2: #ffffff;
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --line: rgba(9, 12, 18, .12);
  --ink: #0b0d12;
  --ink-dim: #4a5366;
  --shadow-1: 0 10px 26px rgba(0,0,0,.08);
}

/* ---------- Base ---------- */
body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  accent-color: var(--accent);
}

a { color: #c2c8ff; text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { width: min(1200px, 92vw); margin: 0 auto; }

.muted { color: var(--ink-dim); }
.note  { color: var(--ink-dim); font-size: .92rem; margin-top: 8px; }

h1, h2, h3, strong { color: var(--ink); }
h1 { font-weight: 900; font-size: clamp(28px, 4.6vw, 48px); margin: 0 0 6px; }
h2 { font-weight: 900; font-size: clamp(22px, 3vw, 28px); margin: 0 0 8px; }
h3 { font-weight: 800; font-size: clamp(18px, 2.2vw, 20px); margin: 0 0 6px; }

.section { padding: 26px 0; }
.below { background: linear-gradient(180deg, rgba(0,0,0,0) 0, rgba(0,0,0,.24) 100%); }

/* ---------- Header ---------- */
header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(10, 12, 18, .82);
  backdrop-filter: saturate(120%) blur(6px);
  border-bottom: 1px solid var(--line);
}
header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 6px;
}
.brand {
  color: #e9e8ff; font-weight: 900; letter-spacing: .3px;
}
.brand:hover { text-decoration: none; opacity: .92; }

nav.primary a {
  margin-left: 18px; color: var(--ink-dim);
  font-weight: 700; padding: 8px 10px; border-radius: 10px;
}
nav.primary a:hover { color: var(--ink); background: rgba(255,255,255,.06); text-decoration: none; }

/* ---------- Layout helpers ---------- */
.row { display: flex; gap: 10px; align-items: center; }
.filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .tools { grid-template-columns: 1fr; } }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
@media (max-width: 1100px){ .grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .grid { grid-template-columns: 1fr; } }

/* ---------- Cards / Tools ---------- */
.tool, .card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow-2);
}
.card strong { display: block; margin-bottom: 6px; }

/* ---------- Forms ---------- */
label { display: grid; gap: 6px; font-weight: 700; color: var(--ink); }

input, select, textarea {
  background: #0d1422;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 40px;
  outline: none;
  width: 100%;
}
textarea { resize: vertical; }
textarea.code {
  width: 100%; min-height: 120px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

input::placeholder, textarea::placeholder { color: #707a8d; }

input:focus, select:focus, textarea:focus {
  border-color: #a08bff;
  box-shadow: 0 0 0 3px rgba(160,139,255,.18);
}

/* ---------- Buttons ---------- */
.btn {
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  background: #101625;
  color: var(--ink);
  border: 1px solid var(--line);
  height: 40px; padding: 0 12px;
  border-radius: 12px; font-weight: 800;
  transition: filter .15s ease, background .15s ease, transform .05s ease;
}
.btn:hover { background: #141b2c; }
.btn:active { transform: translateY(1px); }

.btn.primary {
  background: linear-gradient(180deg, #7b97ff 0%, #7b5cff 100%);
  color: #fff; border: none;
  box-shadow: 0 10px 26px rgba(123,97,255,.35);
}
.btn.primary:hover { filter: brightness(1.06); }

/* ---------- FAQ ---------- */
.faq details {
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
}
.faq details + details { margin-top: 8px; }
.faq summary { cursor: pointer; font-weight: 800; }
.faq details[open] { background: rgba(255,255,255,.04); }

/* ---------- Checklist ---------- */
.checkcard {
  background: rgba(255,255,255,.02);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
}
.checkcard strong { font-size: 14px; }
.checkcard .list { display: grid; gap: 8px; margin-top: 8px; }

.checkitem {
  display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center;
  padding: 8px; border-radius: 10px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.06);
}
.checkitem input[type="checkbox"] { inline-size: 16px; block-size: 16px; }
.checkitem .x { cursor: pointer; opacity: .64; padding: 0 6px; }
.checkitem .x:hover { opacity: 1; }

/* ---------- Poster ---------- */
.poster-opts { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.posterPreview {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #05070e;
  display: none;
}

/* ---------- Utility ---------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ---------- Footer ---------- */
footer .btn { background: transparent; border-color: var(--line); }
footer .btn:hover { background: rgba(255,255,255,.06); }

/* ---------- Embed mode ---------- */
.embed header { display: none; }
.embed .section:first-of-type { padding-top: 8px; }