/* src/components/jr/library/library.css — SJ2 Library.
   Every value is measured off art-source/design-sj2-2026-09-12/screens/SJ2 Library.dc.html.
   Her screen carries its geometry inline; the transcription moves each declaration into a
   class of the same shape and the pixels stay identical. */

/* ---------------------------------------------------------------- the page under the chrome */
.jr-lib-stage {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--sj-chrome-h);
  bottom: var(--sj-nav-h);
  overflow-x: hidden;
  overflow-y: auto;
  background-color: var(--sj-stage);
  background-image:
    radial-gradient(circle at 6% 0%, rgba(251, 215, 194, .55), transparent 420px),
    radial-gradient(circle at 96% 12%, rgba(66, 169, 200, .16), transparent 460px),
    radial-gradient(rgba(19, 37, 31, .035) 0.8px, transparent 1.4px);
  background-size: auto, auto, 9px 9px;
}

/* Her four loose shapes on the plate. */
.jr-lib-orb { position: absolute; border-radius: 50%; pointer-events: none; display: block; }
.jr-lib-orb-a { left: -90px; top: 520px; width: 260px; height: 260px; background: #b7cfa4; opacity: .28; }
.jr-lib-orb-b { right: -120px; top: 1080px; width: 340px; height: 340px; background: #fbd7c2; opacity: .55; }
.jr-lib-dot { position: absolute; border-radius: 50%; pointer-events: none; display: block; }
.jr-lib-dot-a { right: 180px; top: 60px; width: 14px; height: 14px; background: var(--sj-sun); }
.jr-lib-dot-b { right: 130px; top: 110px; width: 8px; height: 8px; background: var(--sj-teal); }
.jr-lib-dot-c { left: 560px; top: 26px; width: 10px; height: 10px; background: #e78b82; }

.jr-lib-inner {
  position: relative;
  box-sizing: border-box;
  padding: 24px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ---------------------------------------------------------------- the header */
.jr-lib-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.jr-lib-head-text { min-width: 0; }

.jr-lib-eyebrow,
.jr-lib-eyebrow-plain {
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--sj-teal-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.jr-lib-eyebrow-plain { margin: 0 0 6px; }

.jr-lib-title {
  margin: 0 0 6px;
  font-size: 46px;
  line-height: 1.03;
  letter-spacing: -.04em;
  font-weight: 700;
  color: var(--sj-ink);
}

.jr-lib-sub { margin: 0; font-size: 19px; font-weight: 600; color: var(--sj-ink-soft); text-wrap: pretty; }

.jr-lib-weekchip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid #cce9d6;
  border-radius: var(--sj-r-cta);
  color: var(--sj-green-ink);
  background: var(--sj-green-tint);
  box-shadow: 0 4px 12px rgba(67, 155, 77, .16);
  white-space: nowrap;
}
.jr-lib-weekchip-text { font-size: 16px; font-weight: 700; }

/* ---------------------------------------------------------------- the feature */
.jr-lib-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  min-height: 300px;
  overflow: hidden;
  border: 1px solid #dbc9a8;
  border-radius: var(--sj-r-panel);
  background: var(--sj-sun-tint);
  box-shadow: 0 18px 44px rgba(246, 189, 47, .28), 0 2px 0 rgba(255, 255, 255, .6) inset;
}

.jr-lib-feature-art {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  background: #d8edf5;
}

/* Her <img> at object-fit:cover, object-position:center 40%, as a background so nothing is
   requested until the card has resolved. */
.jr-lib-feature-img {
  position: absolute;
  inset: 0;
  display: block;
  background-color: #d8edf5;
  background-size: cover;
  background-position: center 40%;
}

.jr-lib-feature-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 72%, var(--sj-sun-tint) 100%);
}

.jr-lib-feature-chips {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.jr-lib-feature-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 11px;
  color: var(--sj-ink);
  background: rgba(255, 253, 246, .94);
  box-shadow: 0 4px 12px rgba(35, 50, 44, .1);
  font-size: 15px;
  font-weight: 700;
}

.jr-lib-feature-body-pane {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 40px;
  overflow: hidden;
}

.jr-lib-blob { position: absolute; border-radius: 50%; pointer-events: none; display: block; }
.jr-lib-blob-a { right: -110px; top: -130px; width: 320px; height: 320px; background: var(--sj-sun); opacity: .55; }
.jr-lib-blob-b { right: 60px; bottom: -150px; width: 260px; height: 260px; background: #fbd7c2; opacity: .7; }

.jr-lib-feature-inner { position: relative; }

.jr-lib-feature-eyebrow {
  margin: 0 0 10px;
  color: var(--sj-teal-ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.jr-lib-feature-title {
  margin: 0 0 12px;
  font-size: 42px;
  line-height: 1.04;
  letter-spacing: -.04em;
  font-weight: 700;
  color: var(--sj-ink);
  text-wrap: pretty;
}

.jr-lib-feature-body {
  margin: 0 0 22px;
  max-width: 480px;
  color: var(--sj-ink-body);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 600;
  text-wrap: pretty;
}
.jr-lib-feature-bookname { color: var(--sj-ink); }

.jr-lib-progress-row { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }

.jr-lib-progress {
  width: 240px;
  max-width: 100%;
  height: 12px;
  overflow: hidden;
  border-radius: var(--sj-r-pill);
  background: rgba(19, 37, 31, .14);
}
.jr-lib-progress-fill { display: block; height: 100%; border-radius: inherit; background: var(--sj-green); }
.jr-lib-progress-label { font-size: 16px; white-space: nowrap; color: var(--sj-ink); }

.jr-lib-feature-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  align-self: flex-start;
  min-height: 54px;
  padding: 0 24px;
  border: 1px solid var(--sj-orange-deep);
  border-radius: var(--sj-r-cta);
  color: #ffffff;
  background: var(--sj-orange);
  box-shadow: 0 5px 0 var(--sj-orange-deep);
  font-size: 19px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.jr-lib-feature-cta:hover { background: #ef7149; transform: translateY(-1px); box-shadow: 0 7px 0 var(--sj-orange-deep); color: #ffffff; }
.jr-lib-feature-cta:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--sj-orange-deep); }

/* ---------------------------------------------------------------- the shelf */
.jr-lib-pick { display: flex; flex-direction: column; gap: 18px; padding-top: 10px; }
.jr-lib-pick-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; }
.jr-lib-pick-head-text { min-width: 0; }

.jr-lib-pick-title {
  margin: 0 0 4px;
  font-size: 32px;
  letter-spacing: -.03em;
  font-weight: 700;
  color: var(--sj-ink);
}
.jr-lib-count { margin: 0; font-size: 17px; font-weight: 600; color: var(--sj-ink-soft); }

/* HER FOUR CHIPS. They are the whole filter now: her 360px search field is not built, because
   a text input a child can reach is banned (DECISIONS #63). 44px is her height, under the 64px
   child floor and named in tools/audit/rules_audit.mjs like the rest of the SJ2 chip family. */
.jr-lib-chips { display: flex; gap: 10px; flex-wrap: wrap; }

.jr-lib-chip {
  appearance: none;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 13px;
  font-family: var(--sj-font);
  font-weight: 700;
  font-size: 17px;
  background: var(--sj-card);
  color: var(--sj-ink-soft);
  border: 1px solid #dbc9a8;
  box-shadow: 0 3px 0 #e7ded2;
  transition: transform 120ms ease, background 120ms ease;
}
.jr-lib-chip-on {
  background: var(--sj-orange);
  color: #ffffff;
  border: 1px solid var(--sj-orange-deep);
  box-shadow: 0 3px 0 var(--sj-orange-deep);
}

.jr-lib-grid { display: grid; gap: 20px; }

/* ---------------------------------------------------------------- one book */
.jr-lib-card {
  position: relative;
  min-width: 0;
  display: flex;
  overflow: hidden;
  border: 1px solid var(--sj-line);
  border-radius: var(--sj-r-card);
  background: var(--sj-card);
  box-shadow: 0 6px 16px rgba(35, 50, 44, .08);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.jr-lib-card:hover {
  border-color: #d5c4b0;
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(35, 50, 44, .14);
}

.jr-lib-card-link {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  color: var(--sj-ink);
  text-decoration: none;
}

.jr-lib-card-art { position: relative; display: block; height: 200px; overflow: hidden; }

/* Her typographic cover, for a book whose picture does not exist yet. */
.jr-lib-card-nocover {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  padding: 18px;
  overflow: hidden;
}
.jr-lib-card-nocover-a {
  position: absolute; right: -40px; top: -50px; width: 170px; height: 170px;
  border-radius: 50%; background: rgba(255, 253, 246, .45);
}
.jr-lib-card-nocover-b {
  position: absolute; left: -30px; bottom: -70px; width: 150px; height: 150px;
  border-radius: 50%; background: rgba(19, 37, 31, .08);
}
.jr-lib-card-nocover-kicker {
  position: relative;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.jr-lib-card-nocover-title {
  position: relative;
  font-size: 22px;
  line-height: 1.15;
  font-weight: 700;
  color: var(--sj-ink);
  text-wrap: pretty;
}

.jr-lib-card-shade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(transparent, rgba(13, 37, 31, .3));
  pointer-events: none;
}

.jr-lib-card-mins {
  position: absolute;
  z-index: 2;
  left: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  color: #ffffff;
  background: rgba(19, 37, 31, .78);
  font-size: 14px;
  font-weight: 700;
}

.jr-lib-card-text { display: flex; flex-direction: column; flex: 1 1 auto; padding: 18px 18px 16px; gap: 8px; }
.jr-lib-card-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.jr-lib-card-title { font-size: 21px; line-height: 1.22; letter-spacing: -.02em; font-weight: 700; color: var(--sj-ink); text-wrap: pretty; }
.jr-lib-card-titlerow svg { flex: none; margin-top: 3px; color: var(--sj-ink-soft); }

.jr-lib-card-blurb {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 2.8em;
  color: var(--sj-ink-soft);
  font-size: 16px;
  line-height: 1.45;
  font-weight: 600;
}

.jr-lib-card-credit {
  display: block;
  margin-top: 6px;
  color: var(--sj-ink-soft);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
  opacity: .78;
}

.jr-lib-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; }

.jr-lib-card-kind,
.jr-lib-card-history {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
}

/* Her 44px heart. Same named exception as the rest of the SJ2 chip family. */
.jr-lib-fav {
  position: absolute;
  z-index: 3;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(35, 50, 44, .14);
  color: var(--sj-orange-deep);
  background: rgba(255, 253, 246, .94);
}
.jr-lib-fav-on { color: #ffffff; background: var(--sj-orange); }

/* ---------------------------------------------------------------- nothing matched */
.jr-lib-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: 40px;
  border: 1px dashed #d6c6b4;
  border-radius: var(--sj-r-card);
  background: rgba(255, 253, 246, .8);
  text-align: center;
}
.jr-lib-empty-badge {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin: 0 auto 14px;
  border-radius: var(--sj-r-card);
  color: var(--sj-sky-ink);
  background: var(--sj-teal-tint);
}
.jr-lib-empty-title { margin: 0 0 6px; font-size: 24px; font-weight: 700; color: var(--sj-ink); }
.jr-lib-empty-line { margin: 0 auto 18px; max-width: 380px; font-size: 17px; font-weight: 600; color: var(--sj-ink-soft); text-wrap: pretty; }

.jr-lib-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid #dbc9a8;
  border-radius: 13px;
  background: var(--sj-card);
  color: var(--sj-ink);
  box-shadow: 0 3px 0 #e7ded2;
  font-family: var(--sj-font);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
}
.jr-lib-clear:hover { border-color: #c9b9a8; background: #ffffff; transform: translateY(-1px); }