/* Base tokens for the Woken Beasts marketing pages (mint, whitelist). These pages are `.book` pages: they load this
   plus /bb/book.css and reuse Beastbook's components (bar, stripes, cols, box, card, nav, mini, av, rarity rings), so
   they look like the social site. Dark mode is owned by book.css's `.book.dark` (toggled on <body>, shared via the
   "bb.theme" localStorage key); this file only sets the light base tokens book.css consumes, plus the few mint-only
   widgets (progress meter, sealed cards, the big mint button). */
:root {
  --navy: #14284b; --navy-2: #22396a; --page: #e4edf4; --card: #ffffff; --soft: #eef3f8; --line: #d5dde6;
  --ink: #102a3a; --muted: #51637a; --frame: #c4202e; --accent: #ff5a64; --focus: #ffb000;
  --panel: var(--card); --olive: var(--navy);
  --sign-font: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --ui-font: "Archivo", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--page); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* hero banner, full width above the columns */
.banner { margin: 0; }
.banner img { display: block; width: 100%; height: clamp(10rem, 34vw, 20rem); object-fit: cover; object-position: 50% 42%; }

/* a page-wide single column under the bar (the .cols grid from book.css handles 3-col) */
.wrap { max-width: 80rem; margin: 0 auto; }

/* left-column nav as links (book.css styles .nav button; our items are <a> to other pages) */
.nav a { display: flex; gap: .55rem; align-items: center; padding: .45rem .55rem; border-radius: 7px;
  font: 650 .98rem var(--ui-font); color: var(--ink); text-decoration: none; }
.nav a:hover { background: var(--soft); }
.nav a[aria-current="page"] { background: var(--navy); color: #fff; }
.book.dark .nav a { color: var(--ink); }
.book.dark .nav a[aria-current="page"] { background: #2a4a7f; color: #fff; }
.book-tag.live { background: #1f7a4d; }

/* ---- mint widgets ---------------------------------------------------------------------------------------------- */
.mint-card .phase { margin: 0 0 .7rem; color: var(--muted); font-weight: 600; }
.count-big { font: 900 clamp(2rem, 7vw, 2.9rem)/1 var(--sign-font); color: var(--ink); letter-spacing: .01em; }
.book.dark .count-big { color: #eaf1fb; }
.count-sub { color: var(--muted); font-size: .85rem; margin: .1rem 0 .7rem; }
.meter { height: .7rem; background: var(--soft); border-radius: 999px; overflow: hidden; margin: 0 0 1rem; box-shadow: inset 0 0 0 1px var(--line); }
.meter > i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--rare, #2e7dd7), var(--navy)); transition: width .6s ease; }

.qty { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.qty button { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 2px solid var(--navy); background: transparent; font: 700 1.4rem/1 var(--ui-font); color: var(--navy); cursor: pointer; }
.book.dark .qty button { border-color: #40588a; color: #cdd9ec; }
.qty button:disabled { opacity: .35; cursor: default; }
.qty output { min-width: 2ch; text-align: center; font: 900 1.9rem/1 var(--sign-font); color: var(--ink); }
.book.dark .qty output { color: #eaf1fb; }
.qty .total { margin-left: auto; color: var(--muted); font-weight: 600; }

.mint-go { display: inline-block; width: auto; padding: .6rem 1.6rem; border: 0; border-radius: 999px; background: var(--navy);
  color: #fff; font: 800 1.02rem/1.2 var(--ui-font); cursor: pointer; }
.mint-go:hover { background: var(--navy-2); }
.mint-go:active { transform: translateY(1px); }
.mint-go:disabled { background: var(--muted); opacity: .75; cursor: default; }
.note { min-height: 1.4rem; margin: .7rem 0 0; font-size: .95rem; }
.note.bad { color: var(--frame); font-weight: 600; }
.note.good { color: #1f7a4d; font-weight: 600; }

.wallets { margin: .8rem 0 0; border: 1px solid var(--line); border-radius: 12px; padding: .6rem; }
.wallets p { margin: 0 0 .5rem; font-weight: 700; color: var(--navy); }
.book.dark .wallets p { color: #cdd9ec; }
.wallets ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.wallets button, .wallets a { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .55rem .7rem; border: 1px solid var(--line);
  border-radius: 10px; background: transparent; font: 600 1rem var(--ui-font); color: var(--ink); cursor: pointer; text-decoration: none; }
.wallets button:hover, .wallets a:hover { background: var(--soft); }
.wallets img { width: 1.4rem; height: 1.4rem; }
.reveal { margin: .9rem 0 0; display: block; width: 100%; padding: .7rem; border: 2px dashed var(--frame); border-radius: 10px;
  background: transparent; color: var(--frame); font: 800 1.02rem var(--ui-font); cursor: pointer; }

/* Jef Diesel profile header + his posts */
.jhead { display: flex; gap: 1rem; align-items: center; }
.av-xl { width: 5rem; height: 5rem; border-radius: 50%; object-fit: cover; flex: none; background: var(--soft);
  box-shadow: 0 0 0 3px var(--card), 0 0 0 5px var(--legend, #d4a017); }
.jhead .meta { min-width: 0; }
.jname { font: 900 1.9rem/1 var(--sign-font); color: var(--ink); margin: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.book.dark .jname { color: #eaf1fb; }
.jhandle { color: var(--muted); font-weight: 600; margin: .15rem 0 .5rem; }
.jbio { margin: .2rem 0 .7rem; max-width: 42rem; }
.badge { font: 800 .72rem var(--ui-font); padding: .12rem .5rem; border-radius: 999px; background: var(--soft); color: var(--navy); }
.badge.staff { background: #e7f0ff; color: #1f4d8f; }
.badge.one { background: #fff4d6; color: #7a5600; }
.book.dark .badge { background: #22324a; color: #cdd9ec; }
.book.dark .badge.one { background: #4a3a12; color: #ffe08a; }
.jbtns { display: flex; gap: .5rem; flex-wrap: wrap; }
.jbtns a { text-decoration: none; font: 700 .92rem var(--ui-font); padding: .45rem .9rem; border-radius: 999px; }
.jbtns a.x { background: #000; color: #fff; } .book.dark .jbtns a.x { background: #fff; color: #000; }
.jbtns a.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }

/* post byline + reactions footer (reuses book.css .card/.card-top/.av/.card-body) */
.post-meta { font-weight: 800; }
.post-meta .card-sub { font-weight: 600; }
.rxbar { display: flex; justify-content: space-between; align-items: center; margin-top: .6rem; padding-top: .45rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.rxbar .emo { letter-spacing: -.12em; margin-right: .35rem; }
.rxbar .acts { display: flex; gap: .2rem; }
.rxbar .acts span { padding: .2rem .55rem; border-radius: 6px; font-weight: 650; }

/* sneak-peek: real revealed Beasts (mini profile cards) */
.sneak-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin: .55rem 0 .1rem; }
.sneak { text-decoration: none; color: inherit; text-align: center; }
.sneak img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: var(--soft);
  box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--ring, var(--common, #b9c4ce)); }
.sneak b { display: block; font-size: .82rem; margin-top: .45rem; line-height: 1.15; color: var(--ink); }
.book.dark .sneak b { color: #eaf1fb; }
.sneak span { display: block; font-size: .72rem; color: var(--muted); line-height: 1.2; }
@media (max-width: 40rem) { .sneak-row { grid-template-columns: repeat(3, 1fr); } }

/* rarity tier + phase lists in the right column */
.tiers { list-style: none; margin: 0; padding: 0; }
.tiers li { display: flex; align-items: center; gap: .55rem; padding: .3rem 0; font-weight: 600; }
.tiers .dot { width: .85rem; height: .85rem; border-radius: 50%; flex: none; }
.tiers .n { margin-left: auto; color: var(--muted); font-weight: 700; }
.steps3 { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.steps3 li { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.steps3 .s-dot { width: .7rem; height: .7rem; border-radius: 50%; background: var(--line); flex: none; }
.steps3 li.on .s-dot { background: var(--frame); }
.steps3 li.on { color: var(--ink); }
.steps3 li.off { color: var(--muted); }

.faq details { border-top: 1px solid var(--line); padding: .55rem 0; }
.faq details:first-of-type { border-top: 0; }
.faq summary { font-weight: 700; cursor: pointer; color: var(--ink); }
.book.dark .faq summary { color: #eaf1fb; }
.faq p { margin: .4rem 0 0; color: var(--muted); }
.fine { margin: .7rem 0 0; color: var(--muted); font-size: .9rem; }
.fine a { color: var(--frame); font-weight: 700; }