/* Components: buttons, chips, badges, green panels, zellige texture, reveal system */

/* ---- Buttons: feedback on press, instantly ------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-block-size: 3rem; padding-inline: 1.375rem;
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: 1rem; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.btn:active { transform: scale(0.97); transition-duration: var(--t-press); }
.btn--primary { background: var(--red); color: var(--white); }
.btn--primary:hover { background: var(--red-deep); color: var(--white); }
.btn--saffron { background: var(--saffron); color: var(--ink); }
.btn--saffron:hover { background: #F6C25E; color: var(--ink); }

.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  block-size: 2.5rem; padding-inline: 1rem; border: 1px solid var(--line-strong); border-radius: var(--r-pill);
  background: var(--white); color: var(--ink); font-size: var(--fs-small); font-weight: 600;
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.chip:active { transform: scale(0.97); }
.chip__dot { inline-size: 0.625rem; block-size: 0.625rem; border-radius: 50%; border: 1.5px solid currentColor; transition: background-color var(--t-fast); }
.chip[aria-pressed="true"] { background: var(--red); border-color: var(--red); color: var(--white); }
.chip[aria-pressed="true"] .chip__dot { background: var(--saffron); border-color: var(--saffron); }

.badge { display: inline-block; padding: 0.125rem 0.625rem; border-radius: var(--r-pill); background: rgb(242 179 61 / 0.22); color: var(--ink); font-size: var(--fs-tiny); font-weight: 600; vertical-align: middle; white-space: nowrap; }

/* ---- Immersive panels: red (main) and green (kept in places) -------- */
.on-green { background: var(--fes); color: var(--on-green); }
/* On red, text tokens are re-tuned for contrast (checked: muted 4.7:1, accent 5:1) */
.on-red {
  background: var(--red); color: var(--on-green);
  --on-green-muted: rgb(234 241 236 / 0.84);
  --on-green-line: rgb(234 241 236 / 0.22);
  --saffron: #F7C873;
}
.on-red :focus-visible { outline-color: #F7C873; }
.zellige { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23EAF1EC' stroke-opacity='.085' stroke-width='1'%3E%3Crect x='18' y='18' width='36' height='36'/%3E%3Cpath d='M36 10.5 61.5 36 36 61.5 10.5 36Z'/%3E%3Cpath d='M0 0l18 18M72 0 54 18M0 72l18-18M72 72 54 54'/%3E%3C/g%3E%3C/svg%3E"); background-size: 72px 72px; }

/* ---- Chapter tag --------------------------------------------------- */
.tag { display: inline-flex; align-items: baseline; gap: var(--s-3); margin-block-end: var(--s-5); font-size: var(--fs-small); font-weight: 600; color: var(--ink-muted); }
.tag__no { color: var(--red); font-variant-numeric: tabular-nums; }
.tag__no::after { content: ""; display: inline-block; inline-size: 2rem; block-size: 1px; margin-inline-start: var(--s-3); vertical-align: middle; background: currentColor; opacity: 0.5; }
.tag--light { color: var(--on-green-muted); }
.tag--light .tag__no { color: var(--saffron); }

/* ---- Reveal system (JS adds .is-in when the element enters) -------- */
.js [data-reveal] {
  opacity: 0; transform: translateY(2rem);
  transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 1.3s var(--ease-out); transition-delay: calc(var(--d, 0) * 110ms); }
.js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: none; transition: none; }
}

/* ---- Cursor circle (app.js): inverts colours underneath ---------------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: opacity 0.3s var(--ease-out); }
.cursor.is-on { opacity: 1; }
.cursor::before {
  content: ""; position: absolute; left: 0; top: 0;
  inline-size: var(--cs, 14px); block-size: var(--cs, 14px); translate: -50% -50%;
  border-radius: 50%; background: #fff;
  transition: inline-size 0.5s var(--ease-out), block-size 0.5s var(--ease-out);
}
.cursor[data-state="link"] { --cs: 40px; }
.cursor[data-state="text"] { --cs: 96px; }
.cursor[data-state="img"]  { --cs: 168px; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
@media (prefers-reduced-motion: reduce) { .cursor::before { transition: none; } }