/* ============================================================
   🎬 SKIN 8 — FLIPBOOK  (html[data-skin="flipbook"])
   Haath se bani notebook: kagaz ki texture (graph-paper),
   ink ke 2.5px borders, hard offset shadow (koi blur nahi),
   hand-drawn font, aur spring-overshoot motion (= kagaz ka pop).
   🎨 accent palette ke saath rang badalte hain.
   Koi blue nahi · mobile-first · AMOLED base ko override karta hai.
   ============================================================ */

html[data-skin="flipbook"] {
  color-scheme: light !important;

  /* ---- palette: paper + ink ---- */
  --fb-paper:   #f5efe3 !important;
  --fb-paper-2: #fbf6ec !important;
  --fb-paper-3: #ece2d1 !important;
  --fb-ink:     #241a12 !important;
  --fb-ink-2:   #6b5a48 !important;
  --fb-ink-3:   #8d7b66 !important;
  --fb-line:    #2a1e14 !important;
  --fb-sh:      4px 5px 0 var(--fb-line) !important;
  --fb-sh-sm:   3px 4px 0 var(--fb-line) !important;
  --fb-sh-lg:   8px 10px 0 rgba(42, 30, 20, .28) !important;
  --fb-r:       14px !important;
  --fb-ease:    cubic-bezier(.34, 1.56, .64, 1) !important;
  --fb-font:    "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Sans MS",
                ui-rounded, "Nirmala UI", "Noto Sans Devanagari", system-ui, sans-serif !important;
  --fb-hatch:   repeating-linear-gradient(135deg, transparent 0 9px, rgba(42, 30, 20, .035) 9px 10px) !important;
  /* accent text ko kagaz pe padhne layak banana */
  --fb-acc-text: color-mix(in srgb, var(--acc-o) 62%, #241a12) !important;

  /* ---- styles.css variables → paper ---- */
  --bg: var(--fb-paper) !important;
  --surface: var(--fb-paper-2) !important;
  --surface-2: var(--fb-paper-3) !important;
  --border: rgba(42, 30, 20, .30) !important;
  --border-strong: var(--fb-line) !important;
  --text: var(--fb-ink) !important;
  --text-2: var(--fb-ink-2) !important;
  --text-3: var(--fb-ink-3) !important;
  --track: var(--fb-paper-3) !important;
  --shadow-sm: 2px 3px 0 rgba(42, 30, 20, .30) !important;
  --shadow: var(--fb-sh) !important;
  --shadow-lg: var(--fb-sh-lg) !important;
  --r-xs: 8px !important;
  --r-sm: 10px !important;
  --r: var(--fb-r) !important;
  --r-lg: 18px !important;
  --font: var(--fb-font) !important;

  /* garam signal colours (blue kahin nahi) */
  --brand: #c0392b !important;
  --brand-strong: #e05a4a !important;
  --brand-soft: #fbe4e2 !important;
  --accent: var(--acc-o) !important;
  --ok: #2f7a3f !important;      --ok-soft: #e4f2e6 !important;
  --warn: #b45309 !important;    --warn-soft: #fbedd6 !important;
  --danger: #c0392b !important;  --danger-soft: #fbe4e2 !important;
  --info: #b45309 !important;    --info-soft: #fbedd6 !important;

  /* ---- os.css variables → paper ---- */
  --os-bg: var(--fb-paper) !important;
  --os-surface: var(--fb-paper-2) !important;
  --os-surface-2: var(--fb-paper-3) !important;
  --os-surface-3: #e3d8c4 !important;
  --os-line: rgba(42, 30, 20, .28) !important;
  --os-line-2: rgba(42, 30, 20, .45) !important;
  --os-text: var(--fb-ink) !important;
  --os-text-2: var(--fb-ink-2) !important;
  --os-text-3: var(--fb-ink-3) !important;
  --os-accent: var(--acc-o) !important;
  --os-accent-2: var(--acc-a) !important;
  --os-accent-soft: color-mix(in srgb, var(--acc-y) 40%, transparent) !important;
  --os-accent-line: color-mix(in srgb, var(--acc-a) 60%, transparent) !important;
  --os-ok: #2f7a3f !important;     --os-ok-soft: rgba(47, 122, 63, .12) !important;
  --os-warn: #b45309 !important;   --os-warn-soft: rgba(180, 83, 9, .12) !important;
  --os-danger: #c0392b !important; --os-danger-soft: rgba(192, 57, 43, .10) !important;
  --os-info: #b45309 !important;   --os-info-soft: rgba(180, 83, 9, .12) !important;
  --os-sh-1: 2px 3px 0 rgba(42, 30, 20, .30) !important;
  --os-sh-2: var(--fb-sh) !important;
  --os-sh-3: var(--fb-sh-lg) !important;
  --os-font: var(--fb-font) !important;
  --os-r-xs: 8px !important;
  --os-r-sm: 11px !important;
  --os-r: var(--fb-r) !important;
  --os-r-lg: 18px !important;
  --os-r-xl: 24px !important;
}

/* ---------------- page = ruled graph paper ---------------- */
html[data-skin="flipbook"] body {
  color: var(--fb-ink) !important;
  font-family: var(--fb-font) !important;
  background-color: var(--fb-paper) !important;
  background-image:
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(42, 30, 20, .055) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(42, 30, 20, .028) 27px 28px) !important;
}
html[data-skin="flipbook"] body::before,
html[data-skin="flipbook"] body::after { display: none !important; }

/* ---------------- motion: kagaz ka pop ---------------- */
@keyframes fb-in {
  from { opacity: 0; transform: translateY(12px) scale(.955) rotate(-1.1deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes fb-pop {
  0%   { transform: scale(.86) rotate(-2deg); }
  60%  { transform: scale(1.05) rotate(.8deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ---------------- cards ---------------- */
html[data-skin="flipbook"] .card,
html[data-skin="flipbook"] .os-card {
  background-color: var(--fb-paper-2) !important;
  background-image: var(--fb-hatch);
  border: 2.5px solid var(--fb-line) !important;
  border-radius: var(--fb-r) !important;
  box-shadow: var(--fb-sh) !important;
  color: var(--fb-ink) !important;
  backdrop-filter: none !important;
  animation: fb-in .55s var(--fb-ease) backwards;
  transition: transform .4s var(--fb-ease), box-shadow .3s, border-color .3s !important;
}
html[data-skin="flipbook"] .card:nth-child(1), html[data-skin="flipbook"] .os-card:nth-child(1) { animation-delay: .03s; }
html[data-skin="flipbook"] .card:nth-child(2), html[data-skin="flipbook"] .os-card:nth-child(2) { animation-delay: .10s; }
html[data-skin="flipbook"] .card:nth-child(3), html[data-skin="flipbook"] .os-card:nth-child(3) { animation-delay: .17s; }
html[data-skin="flipbook"] .card:nth-child(4), html[data-skin="flipbook"] .os-card:nth-child(4) { animation-delay: .24s; }
html[data-skin="flipbook"] .card:nth-child(5), html[data-skin="flipbook"] .os-card:nth-child(5) { animation-delay: .31s; }
html[data-skin="flipbook"] .card:nth-child(n+6),
html[data-skin="flipbook"] .os-card:nth-child(n+6) { animation-delay: .37s; }

html[data-skin="flipbook"] .card .card,
html[data-skin="flipbook"] .os-card .os-card,
html[data-skin="flipbook"] .card .os-card,
html[data-skin="flipbook"] .os-card .card {
  background-color: var(--fb-paper-3) !important;
  box-shadow: 2px 3px 0 rgba(42, 30, 20, .45) !important;
  animation: none !important;
}
html[data-skin="flipbook"] .card:hover,
html[data-skin="flipbook"] .os-card:hover {
  transform: translate(-2px, -3px) rotate(-.45deg) !important;
  box-shadow: 7px 9px 0 var(--fb-line) !important;
  border-color: var(--fb-acc-text) !important;
}
html[data-skin="flipbook"] .card:active,
html[data-skin="flipbook"] .os-card:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1px 2px 0 var(--fb-line) !important;
}

/* ---------------- hero ---------------- */
html[data-skin="flipbook"] .hero,
html[data-skin="flipbook"] .os-hero,
html[data-skin="flipbook"] .mcc-hero {
  background-color: var(--fb-paper-2) !important;
  background-image: var(--fb-hatch);
  border: 2.5px solid var(--fb-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--fb-sh) !important;
  color: var(--fb-ink) !important;
  animation: fb-in .5s var(--fb-ease) backwards;
}
html[data-skin="flipbook"] .mcc-hero h2,
html[data-skin="flipbook"] .hero h2 { color: var(--fb-ink) !important; }
html[data-skin="flipbook"] .mcc-ring-t { color: var(--fb-ink) !important; }

/* ---------------- buttons ---------------- */
html[data-skin="flipbook"] .os-btn,
html[data-skin="flipbook"] .btn,
html[data-skin="flipbook"] .btn-sm {
  font-family: var(--fb-font) !important;
  font-weight: 700 !important;
  color: var(--fb-ink) !important;
  background-color: var(--fb-paper-2) !important;
  border: 2.5px solid var(--fb-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--fb-sh-sm) !important;
  text-shadow: none !important;
  transition: transform .32s var(--fb-ease), box-shadow .25s, background-color .25s !important;
}
html[data-skin="flipbook"] .btn.btn-primary,
html[data-skin="flipbook"] .os-btn--primary,
html[data-skin="flipbook"] .os-btn.is-primary {
  background-image: linear-gradient(135deg, var(--acc-o), var(--acc-y)) !important;
  background-color: var(--acc-o) !important;
  color: var(--fb-ink) !important;
}
html[data-skin="flipbook"] .os-btn:hover,
html[data-skin="flipbook"] .btn:hover {
  transform: translate(-1px, -2px) rotate(-.5deg) !important;
  box-shadow: 5px 6px 0 var(--fb-line) !important;
}
html[data-skin="flipbook"] .os-btn:active,
html[data-skin="flipbook"] .btn:active {
  transform: translate(3px, 3px) !important;
  box-shadow: 0 0 0 var(--fb-line) !important;
}
html[data-skin="flipbook"] .os-btn--primary:active,
html[data-skin="flipbook"] .btn.btn-primary:active {
  transform: translate(3px, 3px) scale(.97) !important;
  box-shadow: 0 0 0 var(--fb-line) !important;
}
html[data-skin="flipbook"] .os-hero .os-btn,
html[data-skin="flipbook"] .hero .btn { box-shadow: var(--fb-sh) !important; }

/* ---------------- chips ---------------- */
html[data-skin="flipbook"] .nb-chip,
html[data-skin="flipbook"] .os-chip,
html[data-skin="flipbook"] .chip {
  background: var(--fb-paper-2) !important;
  color: var(--fb-ink) !important;
  border: 2px solid var(--fb-line) !important;
  border-radius: 12px !important;
  box-shadow: 2px 3px 0 rgba(42, 30, 20, .45) !important;
  font-family: var(--fb-font) !important;
  transition: transform .3s var(--fb-ease), box-shadow .25s !important;
}
html[data-skin="flipbook"] .os-chip:hover { transform: translateY(-2px) rotate(-.6deg) !important; }
html[data-skin="flipbook"] .os-chip.is-active,
html[data-skin="flipbook"] .nb-chip.is-active,
html[data-skin="flipbook"] .chip.is-active {
  background-image: linear-gradient(135deg, var(--acc-o), var(--acc-y)) !important;
  background-color: var(--acc-o) !important;
  color: var(--fb-ink) !important;
  box-shadow: 2px 3px 0 var(--fb-line) !important;
}

/* ---------------- topbar + nav ---------------- */
html[data-skin="flipbook"] .os-topbar {
  background: var(--fb-paper-2) !important;
  border-bottom: 2.5px solid var(--fb-line) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
html[data-skin="flipbook"] .os-nav {
  background: var(--fb-paper-2) !important;
  border-top: 2.5px solid var(--fb-line) !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
html[data-skin="flipbook"] .nav-item {
  color: var(--fb-ink-2) !important;
  border-radius: 12px !important;
  border: 2px solid transparent !important;
  transition: transform .3s var(--fb-ease) !important;
}
html[data-skin="flipbook"] .nav-item:hover { transform: translateY(-2px) !important; color: var(--fb-ink) !important; }
html[data-skin="flipbook"] .nav-item[aria-current="page"] {
  background-image: linear-gradient(135deg, var(--acc-o), var(--acc-y)) !important;
  background-color: var(--acc-o) !important;
  border-color: var(--fb-line) !important;
  box-shadow: 2px 3px 0 var(--fb-line) !important;
}
html[data-skin="flipbook"] .nav-item[aria-current="page"] * { color: var(--fb-ink) !important; }

/* ---------------- headings (haath se likhe hue) ---------------- */
html[data-skin="flipbook"] .page-title,
html[data-skin="flipbook"] .section-title {
  color: var(--fb-ink) !important;
  font-family: var(--fb-font) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  filter: url(#fb-rough);
}
html[data-skin="flipbook"] .page-sub { color: var(--fb-ink-2) !important; }
html[data-skin="flipbook"] .os-metric-v { color: var(--fb-ink) !important; }
html[data-skin="flipbook"] .ex-clock,
html[data-skin="flipbook"] .ex-clock * { color: var(--fb-ink) !important; }

/* ---------------- progress ---------------- */
html[data-skin="flipbook"] .progress,
html[data-skin="flipbook"] .progress-bar {
  background: var(--fb-paper-3) !important;
  border: 2px solid var(--fb-line) !important;
  border-radius: 99px !important;
  overflow: hidden !important;
}
html[data-skin="flipbook"] .progress > i,
html[data-skin="flipbook"] .progress-bar > i,
html[data-skin="flipbook"] .progress-bar > span {
  background-image: linear-gradient(90deg, var(--acc-o), var(--acc-y)) !important;
  background-color: var(--acc-o) !important;
  border-radius: 99px !important;
}

/* ---------------- inputs ---------------- */
html[data-skin="flipbook"] .search-input,
html[data-skin="flipbook"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
html[data-skin="flipbook"] select,
html[data-skin="flipbook"] textarea {
  background: var(--fb-paper-2) !important;
  color: var(--fb-ink) !important;
  border: 2.5px solid var(--fb-line) !important;
  border-radius: 12px !important;
  font-family: var(--fb-font) !important;
  box-shadow: 2px 3px 0 rgba(42, 30, 20, .28) !important;
}
html[data-skin="flipbook"] .search-input::placeholder,
html[data-skin="flipbook"] input::placeholder,
html[data-skin="flipbook"] textarea::placeholder { color: var(--fb-ink-3) !important; }
html[data-skin="flipbook"] .search-input:focus,
html[data-skin="flipbook"] input:not([type="checkbox"]):not([type="radio"]):focus,
html[data-skin="flipbook"] select:focus,
html[data-skin="flipbook"] textarea:focus {
  box-shadow: 4px 5px 0 var(--fb-line) !important;
  outline: none !important;
  border-color: var(--fb-acc-text) !important;
}

/* ---------------- mock test (exam console) ---------------- */
html[data-skin="flipbook"] .ex-qcard {
  background-color: var(--fb-paper-2) !important;
  background-image: var(--fb-hatch);
  border: 2.5px solid var(--fb-line) !important;
  border-radius: var(--fb-r) !important;
  box-shadow: var(--fb-sh) !important;
  color: var(--fb-ink) !important;
}
html[data-skin="flipbook"] [class*="ex-opt"] {
  background: var(--fb-paper-2) !important;
  color: var(--fb-ink) !important;
  border: 2px solid var(--fb-line) !important;
  border-radius: 12px !important;
  box-shadow: 2px 3px 0 rgba(42, 30, 20, .45) !important;
  transition: transform .3s var(--fb-ease), box-shadow .25s !important;
}
html[data-skin="flipbook"] [class*="ex-opt"]:hover { transform: translate(-1px, -2px) !important; box-shadow: 4px 5px 0 var(--fb-line) !important; }
html[data-skin="flipbook"] [class*="ex-opt"][aria-checked="true"],
html[data-skin="flipbook"] [class*="ex-opt"].sel,
html[data-skin="flipbook"] [class*="ex-opt"].is-sel {
  background-image: linear-gradient(135deg, var(--acc-o), var(--acc-y)) !important;
  background-color: var(--acc-o) !important;
  color: var(--fb-ink) !important;
}
html[data-skin="flipbook"] [class*="ex-opt"][aria-checked="true"] *,
html[data-skin="flipbook"] [class*="ex-opt"].sel * { color: var(--fb-ink) !important; }
html[data-skin="flipbook"] .ex-lg-box {
  background: var(--fb-paper-3) !important;
  border: 2.5px solid var(--fb-line) !important;
  color: var(--fb-ink) !important;
}
html[data-skin="flipbook"] .ex-radio-dot { border-color: var(--fb-line) !important; }
html[data-skin="flipbook"] .ex-pal button,
html[data-skin="flipbook"] .ex-pal [role="button"] {
  background: var(--fb-paper-2) !important;
  color: var(--fb-ink) !important;
  border: 2px solid var(--fb-line) !important;
}
html[data-skin="flipbook"] .ex-pal button[aria-current="true"],
html[data-skin="flipbook"] .ex-pal button.answered {
  background-image: linear-gradient(135deg, var(--acc-o), var(--acc-y)) !important;
  color: var(--fb-ink) !important;
}
html[data-skin="flipbook"] .ex-body { color: var(--fb-ink) !important; }

/* ---------------- toast ---------------- */
html[data-skin="flipbook"] .os-toast {
  background: var(--fb-paper-2) !important;
  color: var(--fb-ink) !important;
  border: 2.5px solid var(--fb-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--fb-sh) !important;
  animation: fb-pop .5s var(--fb-ease) !important;
}

/* ---------------- settings swatches ---------------- */
html[data-skin="flipbook"] .acc-sw { border-color: rgba(42, 30, 20, .35) !important; }
html[data-skin="flipbook"] .acc-sw[aria-pressed="true"] { border-color: var(--fb-line) !important; }
html[data-skin="flipbook"] .acc-name { color: var(--fb-acc-text) !important; }

/* ---------------- misc text ---------------- */
html[data-skin="flipbook"] .content,
html[data-skin="flipbook"] .os-grid-main,
html[data-skin="flipbook"] .os-grid-3,
html[data-skin="flipbook"] .two-col { color: var(--fb-ink) !important; }
html[data-skin="flipbook"] small,
html[data-skin="flipbook"] .muted,
html[data-skin="flipbook"] .os-text-3 { color: var(--fb-ink-2) !important; }
html[data-skin="flipbook"] a { color: var(--fb-acc-text) !important; }

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
  html[data-skin="flipbook"] * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .06s !important;
  }
}