/* books.rs-method.com
   RS Method design system: deep midnight ground, cyan-to-purple gradients,
   ambient glow, staggered reveals.

   One addition to the house palette: a warm gold reserved EXCLUSIVELY for peak
   achievements. Cyan and purple carry the brand and do the ordinary work; gold
   appears only on a best-ever or a #1, so the eye finds the high-water marks
   without reading a single label. Using it anywhere else would spend it. */

:root {
  --bg:            #050714;
  --elevated:      #0a0e22;
  --panel:         #0d1224;
  --panel-2:       #0f1530;

  --text:          #E6E9F2;
  --soft:          #b8c3cf;
  --soft-dim:      #8a96a4;

  --primary:       #00BAE1;
  --accent:        #A78BFA;
  --gold:          #F5C97B;
  --gold-dim:      #C9A05C;
  /* Amazon's own badge orange. Used ONLY to mark a Best Sellers placement, so the
     two charts are told apart at a glance without reading a word. Gold stays the
     "this is a peak" signal and is never replaced by it - every card keeps its
     gold rank numeral; the orange says WHICH LIST the peak was on. */
  --amazon:        #FF9900;
  --amazon-line:   rgba(255, 153, 0, 0.34);

  --line:          rgba(0,186,225,0.12);
  --line-strong:   rgba(0,186,225,0.28);
  --line-soft:     rgba(167,139,250,0.10);
  --line-gold:     rgba(245,201,123,0.22);

  --gradient-primary: linear-gradient(115deg, var(--primary) 0%, var(--accent) 100%);
  --gradient-gold:    linear-gradient(115deg, #FFE3B0 0%, var(--gold) 55%, var(--gold-dim) 100%);

  --radius:        14px;
  --maxw:          1180px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  position: relative;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.bg-glow {
  position: fixed; inset: 0;
  pointer-events: none; z-index: -1;
  background:
    radial-gradient(ellipse 900px 600px at 50% -5%, rgba(0,186,225,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 700px 500px at 90% 100%, rgba(167,139,250,0.05) 0%, transparent 70%),
    radial-gradient(ellipse 600px 400px at 0% 80%, rgba(0,186,225,0.03) 0%, transparent 70%);
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.25rem; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--panel); color: var(--text); padding: 0.6rem 1rem; border-radius: 8px;
}
.skip-link:focus { left: 1rem; top: 1rem; z-index: 50; }

/* ------------------------------------------------------------------ type */

.grad-text, .site-title, .stat-num, .peak-rank, .book-title {
  background: var(--gradient-primary);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.site-title {
  background: linear-gradient(115deg, #ffffff 0%, #ffffff 22%, var(--primary) 68%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600; letter-spacing: -0.02em; margin: 0;
  animation: fadeInUp 800ms cubic-bezier(0.22,0.61,0.36,1) 50ms both;
}

.section-header {
  font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--primary);
  display: flex; align-items: center; gap: 0.6rem;
  margin: 0 0 1.1rem;
}
.section-header::before, .section-header::after { content: '·'; color: inherit; opacity: 0.7; }
.section-header--gold { color: var(--gold); }

.muted { color: var(--soft); }
.dim   { color: var(--soft-dim); font-size: 0.85rem; }

/* ---------------------------------------------------------------- header */

.site-head { padding: 3rem 0 2rem; }
.site-head .tagline {
  color: var(--soft); margin: 0.5rem 0 0; font-size: 1.02rem;
  animation: fadeInUp 600ms ease-out 200ms both;
}
.crumb { font-size: 0.9rem; color: var(--soft-dim); margin-bottom: 0.75rem; }

/* ------------------------------------------------------- the peak board */

.peaks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 0.9rem;
  margin-bottom: 3rem;
}

.peak {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, var(--panel-2) 0%, var(--panel) 100%);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  padding: 1.25rem 1.2rem 1.1rem;
  animation: fadeInUp 550ms ease-out both;
  display: flex; flex-direction: column; gap: 0.15rem;
}
.peak::before {
  content: ''; position: absolute; top: -70px; right: -70px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(245,201,123,0.10) 0%, transparent 70%);
  filter: blur(30px); pointer-events: none;
}
.peak > * { position: relative; }
.peak:nth-child(1) { animation-delay: 60ms; }
.peak:nth-child(2) { animation-delay: 120ms; }
.peak:nth-child(3) { animation-delay: 180ms; }
.peak:nth-child(4) { animation-delay: 240ms; }
.peak:nth-child(5) { animation-delay: 300ms; }
.peak:nth-child(6) { animation-delay: 360ms; }
.peak:nth-child(7) { animation-delay: 420ms; }
.peak:nth-child(8) { animation-delay: 480ms; }
.peak:nth-child(9) { animation-delay: 540ms; }
.peak:nth-child(n+10) { animation-delay: 600ms; }

.peak-rank {
  background: var(--gradient-gold);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-size: 2.9rem; font-weight: 600; line-height: 1; letter-spacing: -0.03em;
}
/* Two lines are RESERVED for the category name whether or not it needs them.
   "Mysticism & Spirituality" wraps and "Inner Child" does not, which pushed every
   element below it out of step with its neighbours - the eye reads a row of cards
   as a row, and a badge sitting 20px lower than the one beside it looks like a
   mistake rather than like a long title. Reserving the space costs a little air on
   the short names and buys a clean line across the whole board. */
.peak-name {
  font-size: 1rem; font-weight: 500; margin-top: 0.35rem;
  line-height: 1.3; min-height: 2.6em;
}
.peak-meta { font-size: 0.82rem; color: var(--soft-dim); margin-top: 0.35rem; }
.peak-foot {
  /* and the footer is pinned to the bottom, so the band pill and the date line up
     across a row even when a card is taller than its neighbours for another
     reason. Grid rows already stretch the cards themselves to equal height. */
  margin-top: auto; padding-top: 0.7rem;
  border-top: 1px solid rgba(245,201,123,0.12);
  font-size: 0.8rem; color: var(--soft);
  display: flex; justify-content: space-between; gap: 0.5rem;
}

.pill {
  display: inline-block; font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--primary);
  background: rgba(0,186,225,0.06);
  white-space: nowrap;
}
.pill--gold { border-color: var(--line-gold); color: var(--gold); background: rgba(245,201,123,0.07); }
.pill--edition { border-color: var(--line-soft); color: var(--accent); background: rgba(167,139,250,0.06); }

/* -------------------------------------------------------------- book card */

.book {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.4rem;
  margin-bottom: 1.1rem;
  position: relative; overflow: hidden;
}
.book::before {
  content: ''; position: absolute; top: -60px; right: -60px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(0,186,225,0.05) 0%, transparent 70%);
  filter: blur(30px); pointer-events: none;
}
.book > * { position: relative; }

.book-title { font-size: 1.5rem; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
.book-sub { color: var(--soft); margin: 0.3rem 0 0; font-size: 0.95rem; }

.editions { display: grid; gap: 1rem; margin-top: 1.4rem; }
@media (min-width: 860px) { .editions { grid-template-columns: 1fr 1fr; } }

.edition {
  background: var(--elevated);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 1.1rem 1.1rem 0.9rem;
}
.edition-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 0.9rem;
}
.edition-overall { font-size: 1.55rem; font-weight: 600; letter-spacing: -0.02em; }
.edition-overall .hash { color: var(--soft-dim); font-weight: 400; font-size: 1rem; }

/* --------------------------------------------------------------- sparkline */

.spark { display: block; overflow: visible; }
.spark path.area { fill: url(#sparkfill); opacity: 0.5; }
.spark path.line { fill: none; stroke: url(#sparkline); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.spark circle { fill: var(--primary); }
.spark--gold path.line { stroke: var(--gold); }
.spark--gold circle { fill: var(--gold); }

/* ------------------------------------------------------------ rank table */

.ranks { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.ranks th {
  text-align: left; font-weight: 500;
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--primary); padding: 0.5rem 0.4rem;
  border-bottom: 1px solid var(--line);
}
.ranks td { padding: 0.55rem 0.4rem; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle; }
.ranks tr:last-child td { border-bottom: none; }
.ranks .num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ranks .best { color: var(--gold); font-weight: 500; }
.ranks .cat { font-weight: 500; }
.ranks .spark-cell { width: 130px; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ranks--wide { min-width: 640px; }

/* delta bar: how far off the all-time best the current rank sits */
.gap-bar { height: 4px; border-radius: 999px; background: rgba(255,255,255,0.06); position: relative; min-width: 54px; }
.gap-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--gradient-primary); }
.gap-fill--at-best { background: var(--gradient-gold); }

/* --------------------------------------------------------------- timeline */

.timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px;
  width: 1px; background: linear-gradient(var(--line-strong), transparent);
}
.tl-item { position: relative; padding: 0 0 1.05rem 1.9rem; }
.tl-item::before {
  content: ''; position: absolute; left: 3px; top: 0.45rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--primary); box-shadow: 0 0 0 3px rgba(0,186,225,0.14);
}
.tl-item--record::before { background: var(--gold); box-shadow: 0 0 0 3px rgba(245,201,123,0.16); }
.tl-head { font-size: 0.95rem; }
.tl-head .what { font-weight: 500; }
.tl-meta { font-size: 0.8rem; color: var(--soft-dim); margin-top: 0.1rem; }

.empty {
  color: var(--soft-dim); font-size: 0.92rem;
  border: 1px dashed var(--line); border-radius: 12px;
  padding: 1.4rem; text-align: center;
}

/* ----------------------------------------------------------------- stats */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 0.75rem; margin-bottom: 2.5rem; }
@media (max-width: 520px) { .stats { grid-template-columns: 1fr 1fr; } }
.stat {
  background: var(--panel); border: 1px solid var(--line);
  padding: 0.95rem 0.9rem; border-radius: 12px;
  position: relative; overflow: hidden;
  animation: fadeInUp 500ms ease-out both;
}
.stat::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, rgba(0,186,225,0.05), transparent 60%);
  pointer-events: none;
}
.stat:nth-child(1){animation-delay:30ms} .stat:nth-child(2){animation-delay:80ms}
.stat:nth-child(3){animation-delay:130ms} .stat:nth-child(4){animation-delay:180ms}
.stat-num { font-size: 1.5rem; font-weight: 600; line-height: 1.2; position: relative; }
.stat-label { font-size: 0.78rem; color: var(--soft); position: relative; }

/* ---------------------------------------------------------------- footer */

.site-footer {
  margin: 3.5rem 0 2.5rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  color: var(--soft-dim); font-size: 0.85rem;
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; justify-content: space-between;
}

/* ------------------------------------------------------------ animation */

@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pre-fade { opacity: 0; transform: translateY(12px); will-change: opacity, transform; }
.in-view  { animation: fadeInUp 700ms cubic-bezier(0.22,0.61,0.36,1) forwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .pre-fade { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ login */

.login-page {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 2.2rem 1.9rem 2rem;
  position: relative; overflow: hidden;
  animation: fadeInUp 600ms cubic-bezier(0.22,0.61,0.36,1) both;
}
.login-card::before {
  content: ''; position: absolute; top: -90px; right: -90px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(0,186,225,0.10) 0%, transparent 70%);
  filter: blur(34px); pointer-events: none;
}
.login-card > * { position: relative; }

.login-label {
  display: block;
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 0.5rem;
}
.login-input {
  width: 100%;
  padding: 0.7rem 0.85rem;
  font-size: 1rem; font-family: inherit;
  background: var(--elevated); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 9px;
}
.login-input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(0,186,225,0.25);
}
.login-input:-webkit-autofill,
.login-input:-webkit-autofill:hover,
.login-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--elevated) inset;
  -webkit-text-fill-color: var(--text);
  caret-color: var(--text);
}

.login-btn {
  width: 100%; margin-top: 1.1rem;
  padding: 0.72rem 1rem;
  font-size: 0.95rem; font-weight: 500; font-family: inherit;
  color: #04121a; cursor: pointer;
  background: var(--gradient-primary);
  border: none; border-radius: 9px;
  transition: filter 160ms ease, transform 160ms ease;
}
.login-btn:hover { filter: brightness(1.08); }
.login-btn:active { transform: translateY(1px); }

.login-error {
  margin: 0.85rem 0 0;
  font-size: 0.88rem;
  color: #FF9B9B;
}

.logout-link {
  font-size: 0.85rem; color: var(--soft-dim);
}

/* Peak board provenance. A recorded achievement is real but was not observed by
   the tracker, so it is marked rather than blended in with the hourly record. */
.board-scope {
  margin: -0.5rem 0 1.1rem;
  font-size: 0.85rem; color: var(--soft-dim);
}
.peak--recorded { border-style: dashed; }
.peak-note {
  margin-top: 0.6rem;
  font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--gold-dim);
  cursor: help;
}

/* Which chart the position was on. Shown always, because "#1 New Release" and
   "#1 Best Seller" are different achievements and the board carries both. */
/* The chart badge. Amazon marks its bestsellers with a solid orange tag, so this
   borrows the same shape and colour: on a board of accolades, "which list" is the
   first thing worth knowing and the last thing anyone should have to read for. */
.peak-chart {
  align-self: flex-start;
  margin-top: 0.55rem;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: 4px;
  border: 1px solid transparent;
}
.peak--bestseller .peak-chart {
  background: var(--amazon); border-color: var(--amazon);
  color: #1B1200;                       /* dark on orange, not white: 10:1 either way,
                                           but dark is what Amazon's own badge does */
}
.peak--newrelease .peak-chart {
  color: var(--primary); border-color: var(--line-strong);
  background: rgba(0, 186, 225, 0.07);
}

/* A bestseller card carries the orange through its frame as well, so the card reads
   at arm's length. The rank numeral stays gold on both. */
.peak--bestseller { border-color: var(--amazon-line); }
.peak--bestseller::before {
  background: radial-gradient(circle, rgba(255,153,0,0.13) 0%, transparent 70%);
}
.peak--bestseller .peak-foot { border-top-color: rgba(255,153,0,0.16); }

/* Stale feed warning. Amber rather than red: the data below is still true, it is
   just old, and the page is doing the right thing by saying so. Gold is reserved
   for peaks, so this borrows the hue at low saturation and never the peak token. */
.stale-banner {
  margin: 0 0 28px;
  padding: 14px 18px;
  border: 1px solid rgba(245, 201, 123, 0.32);
  border-left: 3px solid var(--gold);
  border-radius: 10px;
  background: rgba(245, 201, 123, 0.06);
  color: #E8D9BC;
  font-size: 0.94rem;
  line-height: 1.5;
}
.stale-banner strong { color: var(--gold); font-weight: 600; }