/*
 * Veb tətbiqinin dizayn sistemi.
 *
 * Rənglər iki yerdən gəlir və ikisi də uydurma deyil:
 *   · işıqlı — saytın öz kətanı (README → «Dizayn sistemi»)
 *   · qaranlıq — telefon tətbiqinin v34 paleti (v2_details §16.7)
 * Beləcə brauzerdə açılan Billi telefondakı Billi kimi görünür.
 *
 * Landing-ə TOXUNMUR: bu fayl yalnız /app/ altında yüklənir. Kətan qorunur.
 */

:root {
  --paper: #fdf3e0;
  --card: #fffdf7;
  --sand: #f1e7d4;
  --bar: #fffdf7;
  --accent: #ffc93c;
  --accent-shadow: #e0a81e;
  /*
   * BƏRK sarı fonun üstündəki yazı: əsas düymə, seçilmiş çip, «RƏSMİ» nişanı.
   *
   * Aksentin özü hər iki temada eynidir (§16.7 — «dəyişmir»), deməli onun
   * üstündəki yazı da hər iki temada tünd qalmalıdır. Qaranlıq paletdə ikinci
   * mətn rənglərini köçürəndə buranı da sarı yazmışdım: seçilmiş çip sarı
   * fonda sarı yazı oldu və ümumiyyətlə oxunmurdu.
   */
  --on-accent: #8a6a10;
  --ink: #2e2c57;
  --body: #3b3960;
  --muted: #6c6890;
  --line: #efe3cc;
  --green: #3bb54a;
  --green-bg: #eff8ea;
  --red: #ef3e52;
  --red-bg: #fdecee;
  --shadow: 0 2px 0 rgba(46, 44, 87, 0.06), 0 10px 26px rgba(46, 44, 87, 0.07);

  color-scheme: light;
}

/*
 * Qaranlıq rejim. `[data-theme]` kökdədir və seçim hesabda saxlanılır —
 * `prefers-color-scheme` yalnız «Sistem» seçiləndə işə düşür, ona görə
 * media query `:root:not([data-theme])` ilə qorunur: istifadəçi açıq rejimi
 * seçibsə, telefonun gecə rejimi onu ləğv etməməlidir.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #191833;
    --card: #262445;
    --sand: #2f2c52;
    --bar: #221f40;
    --on-accent: #4a3a06;
    --ink: #f3f0fa;
    --body: #f3f0fa;
    --muted: rgba(243, 240, 250, 0.4);
    --line: rgba(255, 255, 255, 0.07);
    --green: #6edb80;
    --green-bg: rgba(59, 181, 74, 0.16);
    --red: #ff8093;
    --red-bg: rgba(239, 62, 82, 0.16);
    --shadow: 0 2px 0 rgba(0, 0, 0, 0.18), 0 10px 26px rgba(0, 0, 0, 0.28);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --paper: #191833;
  --card: #262445;
  --sand: #2f2c52;
  --bar: #221f40;
  --on-accent: #4a3a06;
  --ink: #f3f0fa;
  --body: #f3f0fa;
  --muted: rgba(243, 240, 250, 0.4);
  --line: rgba(255, 255, 255, 0.07);
  --green: #6edb80;
  --green-bg: rgba(59, 181, 74, 0.16);
  --red: #ff8093;
  --red-bg: rgba(239, 62, 82, 0.16);
  --shadow: 0 2px 0 rgba(0, 0, 0, 0.18), 0 10px 26px rgba(0, 0, 0, 0.28);

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font: 600 15px/1.55 Nunito, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: "Baloo 2", Nunito, system-ui, sans-serif;
  font-weight: 800;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
h1 {
  font-size: 26px;
}
h2 {
  font-size: 20px;
}
h3 {
  font-size: 16.5px;
}
h1:focus,
h2:focus {
  outline: none;
}

a {
  color: inherit;
}

/* ── skelet ──────────────────────────────────────────────────────────── */

.shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.wrap {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 16px;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bar);
  border-bottom: 1px solid var(--line);
}

.topbar-in {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  font: 800 17px "Baloo 2", Nunito, sans-serif;
  color: var(--ink);
  /* Barmaq üçün 44px — nişan 30px olsa da, toxunma sahəsi kifayət etməlidir. */
  min-height: 44px;
}
.brand img {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.spacer {
  flex: 1;
}

main {
  flex: 1;
  padding: 18px 0 96px;
}

/*
 * Alt naviqasiya — telefondakı kimi. `env(safe-area-inset-bottom)` iPhone-un
 * jest zolağı üçündür: onsuz sonuncu düymə zolağın altında qalır.
 */
.nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--bar);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.nav-in {
  display: flex;
  max-width: 680px;
  margin: 0 auto;
}

.nav a {
  flex: 1;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  font: 700 10.5px Nunito, sans-serif;
  color: var(--muted);
}

.nav a[aria-current] {
  color: var(--ink);
}

.nav .glyph {
  font-size: 19px;
  line-height: 1;
}

.nav .create .glyph {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--accent);
  color: #4a3a06;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 0 var(--accent-shadow);
  margin-top: -14px;
}

/* ── kart və mətn ────────────────────────────────────────────────────── */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 16px;
  box-shadow: var(--shadow);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.stack.tight {
  gap: 9px;
}

.row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.muted {
  color: var(--muted);
  font-size: 13.5px;
}

.caption {
  font: 700 12px Nunito, sans-serif;
  color: var(--muted);
}

.numeral {
  font-family: "Baloo 2", Nunito, sans-serif;
  font-weight: 700;
}

/* İstifadəçi mətni: uzun söz və yapışdırılmış link kartı yarmasın. */
.body-text {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0;
}

/* ── düymələr ────────────────────────────────────────────────────────── */

.btn {
  appearance: none;
  border: 0;
  border-radius: 999px;
  min-height: 46px;
  padding: 0 22px;
  font: 800 14.5px Nunito, sans-serif;
  cursor: pointer;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 3px 0 var(--accent-shadow);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  transition: transform 0.06s;
}
.btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--accent-shadow);
}
.btn:disabled {
  opacity: 0.5;
  cursor: default;
  transform: none;
}
.btn.block {
  width: 100%;
}

.btn.ghost {
  background: transparent;
  color: var(--body);
  box-shadow: none;
  border: 1.5px solid var(--line);
}
.btn.danger {
  background: var(--red);
  color: #fff;
  box-shadow: none;
}
.btn.quiet {
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  min-height: 44px;
  padding: 0 14px;
  font-size: 13.5px;
}

.linkish {
  background: none;
  border: 0;
  padding: 0;
  font: 700 13.5px Nunito, sans-serif;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}

/* ── sahələr ─────────────────────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field label {
  font: 700 12.5px Nunito, sans-serif;
  color: var(--muted);
}

.input,
.textarea {
  width: 100%;
  background: var(--sand);
  border: 1.5px solid transparent;
  border-radius: 14px;
  padding: 13px 15px;
  font: 600 15.5px Nunito, sans-serif;
  color: var(--ink);
  min-height: 48px;
}
.textarea {
  border-radius: 18px;
  resize: vertical;
  min-height: 130px;
  line-height: 1.55;
}
.input:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.input::placeholder,
.textarea::placeholder {
  color: var(--muted);
}

/* Kod sahəsi: 6 rəqəm, aralıqlı və böyük — telefondan köçürülərkən oxunsun. */
.code-input {
  letter-spacing: 0.42em;
  text-align: center;
  font: 800 24px "Baloo 2", Nunito, sans-serif;
  padding-right: 0;
  text-indent: 0.42em;
}

.error {
  background: var(--red-bg);
  color: var(--red);
  border-radius: 14px;
  padding: 11px 14px;
  font: 700 13.5px Nunito, sans-serif;
}

.notice {
  background: var(--sand);
  border-radius: 14px;
  padding: 11px 14px;
  font: 600 13.5px Nunito, sans-serif;
  color: var(--muted);
}

/* ── çiplər ──────────────────────────────────────────────────────────── */

/*
 * Filtr zolağı yatay sürüşür. `scrollbar-width:none` sürüşdürücünü gizlədir —
 * toxunma cihazında görünmür, masaüstündə isə zolaq özü çiplərin altında
 * qalıb dizaynı pozurdu.
 */
.chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 6px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar {
  display: none;
}

.chip {
  flex: 0 0 auto;
  appearance: none;
  border: 1.5px solid var(--line);
  background: var(--card);
  color: var(--muted);
  border-radius: 999px;
  min-height: 38px;
  padding: 0 15px;
  font: 800 13px Nunito, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

/* ── post kartı ──────────────────────────────────────────────────────── */

.post {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--sand);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 13px Nunito, sans-serif;
  flex: 0 0 auto;
}

.name {
  font: 800 14px Nunito, sans-serif;
  color: var(--ink);
}

.tag {
  font: 800 9.5px Nunito, sans-serif;
  letter-spacing: 0.05em;
  border-radius: 999px;
  padding: 3px 7px;
  background: var(--sand);
  color: var(--muted);
}
.tag.official {
  background: var(--accent);
  color: var(--on-accent);
}

.vote-row {
  display: flex;
  gap: 10px;
}

.vote {
  flex: 1;
  appearance: none;
  border: 2px solid transparent;
  border-radius: 16px;
  min-height: 52px;
  font: 800 15px Nunito, sans-serif;
  cursor: pointer;
}
.vote.reason {
  background: var(--green-bg);
  color: var(--green);
}
.vote.excuse {
  background: var(--red-bg);
  color: var(--red);
}
.vote[aria-pressed="true"] {
  border-color: currentColor;
}
.vote:disabled {
  cursor: default;
}

/* Nəticə zolağı: iki hissə, eni faizdir. */
.bar {
  display: flex;
  height: 34px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--sand);
}
.bar span {
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 12.5px Nunito, sans-serif;
  color: #fff;
  min-width: 0;
}
.bar .r {
  background: var(--green);
}
.bar .e {
  background: var(--red);
}

/* ── məsləhət ────────────────────────────────────────────────────────── */

.advice {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px;
}
.advice.best {
  border-color: var(--accent);
  border-width: 2px;
}

.star {
  appearance: none;
  border: 1.5px solid var(--line);
  background: transparent;
  border-radius: 999px;
  min-height: 34px;
  padding: 0 12px;
  font: 800 12.5px Nunito, sans-serif;
  color: var(--muted);
  cursor: pointer;
}
.star[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.star:disabled {
  cursor: default;
  opacity: 0.55;
}

/* Öz postunda kompozer yerinə çıxan kilidli izah (tətbiqdəki v32). */
.locked {
  display: flex;
  gap: 11px;
  align-items: center;
  background: var(--sand);
  border-radius: 16px;
  padding: 13px 15px;
  font: 600 13.5px Nunito, sans-serif;
  color: var(--muted);
}

/* ── skelet yüklənmə ─────────────────────────────────────────────────── */

.skeleton {
  background: var(--sand);
  border-radius: 14px;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  50% {
    opacity: 0.5;
  }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
  }
}

.empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--muted);
}
.empty img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  margin-bottom: 10px;
}

/* ── giriş ekranı ────────────────────────────────────────────────────── */

.auth {
  max-width: 420px;
  margin: 0 auto;
  padding: 28px 16px 60px;
}
.auth-logo {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  display: block;
  margin: 0 auto 18px;
}

/* ── vərəq (bottom sheet) ────────────────────────────────────────────── */

.sheet-back {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(20, 18, 40, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.sheet {
  width: 100%;
  max-width: 480px;
  background: var(--card);
  border-radius: 26px 26px 0 0;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0));
  display: flex;
  flex-direction: column;
  gap: 11px;
  max-height: 86dvh;
  overflow-y: auto;
}
@media (min-width: 560px) {
  .sheet-back {
    align-items: center;
  }
  .sheet {
    border-radius: 26px;
  }
}

/* ── toxunma hədəfləri ───────────────────────────────────────────────── */

/*
 * Barmaq üçün min 44px (CLAUDE.md → qayda 6). Çiplər masaüstündə 38px qalır:
 * orada göstərici siçandır və 44px sıra çipi lazımsız yekə edir.
 */
@media (max-width: 880px) {
  .chip,
  .star {
    min-height: 44px;
  }
}

/* ── fokus görünürlüyü ───────────────────────────────────────────────── */

:focus-visible {
  outline: 3px solid var(--accent-shadow);
  outline-offset: 2px;
}

/* JavaScript söndürülübsə görünən yeganə blok.
   Sinifdir, `style="…"` deyil: səhifənin CSP-si `style-src`-də
   `unsafe-inline` daşımır (bax tools/build.mjs). */
.noscript {
  padding: 40px 20px;
  text-align: center;
  font: 600 15px Nunito, sans-serif;
}