/* Capsule Reader shell — v0. Matches the engine's v2 feel: multi-accent
   gradients, RTL logical properties, motion on entry. Book palettes arrive
   per-card as --a / --a2 / --a3 inline vars. */

/* The [hidden] attribute must always win. Elements like #reader force an
   explicit display (flex), which otherwise overrides the browser's built-in
   [hidden] rule and leaves them permanently on screen. */
[hidden] { display: none !important; }

@font-face { font-family: 'Abar'; font-weight: 400; font-display: swap;
  src: url('fonts/AbarMid-Regular.woff2') format('woff2'), url('../engine/fonts/AbarMid-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Abar'; font-weight: 600; font-display: swap;
  src: url('fonts/AbarMid-SemiBold.woff2') format('woff2'), url('../engine/fonts/AbarMid-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Abar'; font-weight: 800; font-display: swap;
  src: url('fonts/AbarMid-ExtraBold.woff2') format('woff2'), url('../engine/fonts/AbarMid-ExtraBold.woff2') format('woff2'); }

/* One fixed shell palette — light/dark is a tool INSIDE each handbook, not
   here. The shell stays calm so every book's palette does the talking. */
:root {
  --font: 'Abar', system-ui, sans-serif;
  --w-reg: 400; --w-semi: 600; --w-bold: 800;
  --fs-body: clamp(1.02rem, 3.4vw, 1.18rem);
  --lh-body: 1.95;

  --bg: #f8f7f4;
  --surface: #ffffff;
  --surface2: #f2efe9;
  --text: #1c1e22;
  --muted: #67707c;
  --accent: #7c3aed;
  --accent2: #06b6d4;
  --accent3: #e8a13c;
  --accent-contrast: #ffffff;
  --grad: linear-gradient(90deg, var(--accent2), var(--accent));
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font); font-weight: var(--w-reg);
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--text);
  background:
    radial-gradient(120% 85% at 82% -8%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 55%),
    radial-gradient(120% 80% at -12% 108%, color-mix(in srgb, var(--accent2) 13%, transparent) 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  min-height: 100svh;
}

/* ── header ─────────────────────────────────────────────────────────── */
#top { display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(16px, 5vw, 40px) 6px; }
.brand { display: flex; align-items: center; gap: 12px; }
.dot { width: 16px; height: 16px; border-radius: 999px; background: var(--grad);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent);
  animation: pulse 3.2s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent); }
  50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 8%, transparent); } }
.brand-copy { display: flex; flex-direction: column; line-height: 1.3; }
.brand-name { font-weight: var(--w-bold); font-size: 1.25rem; letter-spacing: -.01em; }
.brand-sub { font-size: .78rem; color: var(--muted); }

/* ── category chips ─────────────────────────────────────────────────── */
#cats { display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px clamp(16px, 5vw, 40px) 4px; }
.chip { font: inherit; font-size: .86rem; font-weight: var(--w-semi); cursor: pointer;
  padding: .34em 1em; border-radius: 999px; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  transition: border-color .2s, background .2s, color .2s; }
.chip:hover { border-color: var(--accent); }
.chip.on { border: 0; color: var(--accent-contrast); background: var(--grad); }

/* ── sections ───────────────────────────────────────────────────────── */
#home { padding: 8px clamp(16px, 5vw, 40px) 72px; }
.sec-title { font-size: 1.05rem; font-weight: var(--w-bold); margin: 26px 0 12px; }
.sec-desc { font-size: .84rem; color: var(--muted); margin: -8px 0 12px; }
.empty { color: var(--muted); margin-block-start: 30px; }

/* ── grid + rows ────────────────────────────────────────────────────── */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 280px);
  gap: 16px; overflow-x: auto; padding-block-end: 8px; scroll-snap-type: x proximity; }
.row .card { scroll-snap-align: start; }

/* ── cover card ─────────────────────────────────────────────────────── */
.card { position: relative; cursor: pointer; border-radius: 18px; overflow: hidden;
  background: linear-gradient(160deg, var(--surface) 0%, var(--surface2) 120%);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .25s;
  opacity: 0; transform: translateY(14px); }
.card.in { animation: rise .5s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }
.card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--a) 45%, transparent); }

/* The card cover is a miniature of the book's own cover: its palette in the
   engine's cover gradients, the «کپسول نقطه» eyebrow, big title, motif zone
   up and to the side — echoing the real cover's layout. */
.card .cover { position: relative; min-height: 152px; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 14px 16px 12px;
  background:
    radial-gradient(130% 110% at 85% -10%, color-mix(in srgb, var(--a) 58%, transparent) 0%, transparent 60%),
    radial-gradient(120% 120% at -10% 115%, color-mix(in srgb, var(--a2) 52%, transparent) 0%, transparent 58%),
    linear-gradient(150deg, color-mix(in srgb, var(--a) 24%, var(--surface)) 0%, color-mix(in srgb, var(--a2) 26%, var(--surface)) 100%); }
.card .cover .motif { position: absolute; inset-inline-start: 14px; inset-block-start: 12px;
  width: 26px; height: 26px; pointer-events: none; }
.card .cover .motif::before { content: ""; position: absolute; inset: 0; border-radius: 8px;
  background: linear-gradient(135deg, var(--a2), var(--a));
  animation: motifTilt 5s ease-in-out infinite; }
.card .cover .motif::after { content: ""; position: absolute; inset-inline-end: -7px; inset-block-end: -7px;
  width: 11px; height: 11px; border-radius: 999px;
  background: color-mix(in srgb, var(--a) 70%, var(--text)); opacity: .85; }
@keyframes motifTilt { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg); } }
.card .kicker { font-size: .62rem; font-weight: var(--w-bold); letter-spacing: .14em; margin-block-end: 4px;
  background: linear-gradient(90deg, var(--a2), var(--a));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.card h3 { margin: 0; font-size: 1.3rem; font-weight: var(--w-bold); line-height: 1.35; letter-spacing: -.015em; }

.badge { position: absolute; inset-block-start: 12px; inset-inline-end: 12px;
  font-size: .68rem; font-weight: var(--w-bold); padding: .25em .75em; border-radius: 999px;
  color: var(--accent-contrast); background: var(--grad); }
.badge.new { background: linear-gradient(90deg, var(--a), var(--a2));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--a) 18%, transparent);
  animation: newPulse 2.6s ease-in-out infinite; }
@keyframes newPulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--a) 20%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--a) 10%, transparent); } }

.card .meta { padding: 12px 16px 14px; }
.card .who { display: flex; justify-content: space-between; gap: 8px;
  font-size: .8rem; color: var(--muted); }
.card .who b { font-weight: var(--w-semi); color: var(--text); }
.card .rail { position: relative; height: 4px; border-radius: 999px; margin: 10px 0 6px;
  background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.card .rail .fill { position: absolute; inset-block: 0; inset-inline-start: 0;
  border-radius: 999px; background: linear-gradient(90deg, var(--a2), var(--a));
  transition: width .5s cubic-bezier(.2,.7,.2,1); }
.card .state { font-size: .76rem; color: var(--muted); min-height: 1.4em; }
.card .state.done { color: var(--a); font-weight: var(--w-semi); }

/* ── collection cards — a stack of the books inside, NOT a book cover ── */
.col-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 236px);
  gap: 18px; overflow-x: auto; padding: 10px 4px 12px; scroll-snap-type: x proximity; }
.col-card { cursor: pointer; scroll-snap-align: start;
  opacity: 0; transform: translateY(14px); }
.col-card.in { animation: rise .5s cubic-bezier(.2,.7,.2,1) forwards; }
.col-stack { position: relative; }
.col-stack .sheet { position: absolute; inset: 0; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.col-stack .sheet.s1 { transform: translate(-5px, -6px) rotate(-2deg);
  background: color-mix(in srgb, var(--s1, var(--accent2)) 30%, var(--surface)); }
.col-stack .sheet.s2 { transform: translate(-10px, -12px) rotate(-4deg);
  background: color-mix(in srgb, var(--s2, var(--accent3)) 22%, var(--surface)); }
.col-card:hover .sheet.s1 { transform: translate(-7px, -9px) rotate(-3deg); }
.col-card:hover .sheet.s2 { transform: translate(-14px, -17px) rotate(-6deg); }
.col-front { position: relative; border-radius: 16px; min-height: 126px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 10px;
  padding: 16px;
  background: linear-gradient(150deg,
    color-mix(in srgb, var(--c1, var(--accent)) 88%, #14161a),
    color-mix(in srgb, var(--c2, var(--accent2)) 82%, #14161a));
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); }
.col-front .col-name { margin: 0; color: #fff; font-size: 1.18rem;
  font-weight: var(--w-bold); line-height: 1.45; letter-spacing: -.01em;
  text-shadow: 0 1px 8px rgba(0,0,0,.18); }
.col-front .col-count { align-self: flex-start; font-size: .7rem; font-weight: var(--w-bold);
  color: #fff; padding: .25em .8em; border-radius: 999px;
  background: rgba(255,255,255,.22); backdrop-filter: blur(4px); }
.col-card .col-desc { margin: 10px 2px 0; font-size: .8rem; color: var(--muted); line-height: 1.7; }

#col-back { font: inherit; font-size: .85rem; font-weight: var(--w-semi); cursor: pointer;
  margin-block-start: 22px; padding: .4em 1.1em; border-radius: 999px; color: var(--text);
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); background: var(--surface); }
#col-back:hover { border-color: var(--accent); }
#col-back + .sec-title { margin-block-start: 12px; }

/* ── reader view ────────────────────────────────────────────────────── */
#reader { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column;
  background: var(--bg); }
#reader-top { display: flex; align-items: center; gap: 14px;
  padding: 10px clamp(14px, 4vw, 22px);
  background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: blur(10px);
  border-block-end: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
#back { font: inherit; font-size: .88rem; font-weight: var(--w-semi); cursor: pointer;
  color: var(--text); padding: .45em 1.1em; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); background: var(--surface); }
#back:hover { border-color: var(--accent); }
#book { flex: 1; width: 100%; border: 0; background: var(--surface); }

/* ── load error ─────────────────────────────────────────────────────── */
.err { max-width: 30rem; margin: 60px auto; padding: 20px 24px; border-radius: 18px;
  background: linear-gradient(160deg, var(--surface), var(--surface2));
  border: 1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.err p { margin: 0 0 .6em; } .err p:last-child { margin: 0; color: var(--muted); font-size: .9em; }

@media (prefers-reduced-motion: reduce) {
  .card, .card.in { animation: none !important; opacity: 1; transform: none; }
  .dot, .badge.new, .card .cover .motif::before { animation: none; }
  .card:hover { transform: none; }
}