/* components/styles/library.css */
:root {
  --backlight-height: 27vh;
  --shelf-bar-height: calc(var(--backlight-height) * 0.18);
  --spine-title-scale: 1;
  --bookend-brightness: 0.60; /* 1 = original, lower = darker, higher = lighter */
  --spine-line-top: 30%;   /* position of the upper decorative line for notebooks */
  --spine-line-bottom: 8%; /* position of the lower decorative line for notebooks */
  --spine-text-shadow:
    0 1px 1px rgba(255,255,255,0.25),
    0 -1px 1px rgba(0,0,0,0.35);
/* For scroll drag handle focus on these 
--shelf-scroll-thumb-height: 14px;
--shelf-scroll-thumb-min-width: 28px;
--shelf-scroll-thumb-radius: 4px;
--shelf-scroll-grip-inset-y: 3px;
--shelf-scroll-grip-inset-x: 7px;
 */
    --shelf-scroll-left: 300px;
  --shelf-scroll-right: 60px;
  --shelf-scroll-bottom: -18px;
  --shelf-scroll-height: 20px;

  --shelf-scroll-track-height: 6px;
  --shelf-scroll-track-radius: 6px;
  --shelf-scroll-track-color-top: rgba(128, 82, 40, 0.55);
  --shelf-scroll-track-color-mid: rgba(171, 117, 64, 0.78);
  --shelf-scroll-track-color-bottom: rgba(110, 71, 38, 0.55);
  --shelf-scroll-track-shadow:
    inset 0 1px 1px rgba(255, 227, 180, 0.18),
    inset 0 -1px 1px rgba(0, 0, 0, 0.18);

  --shelf-scroll-thumb-height: 35px;
  --shelf-scroll-thumb-min-width: 32px;
  --shelf-scroll-thumb-radius: 4px;
  --shelf-scroll-thumb-border: 1px solid rgba(118, 82, 43, 0.55);
  --shelf-scroll-thumb-color-top: #d8c38a;
  --shelf-scroll-thumb-color-mid: #b28a49;
  --shelf-scroll-thumb-color-bottom: #8c6734;
  --shelf-scroll-thumb-shadow:
    0 1px 3px rgba(0, 0, 0, 0.22),
    inset 0 1px 1px rgba(255, 244, 214, 0.4);

  --shelf-scroll-grip-inset-y: 3px;
  --shelf-scroll-grip-inset-x: 7px;
  --shelf-scroll-grip-color: rgba(94, 63, 28, 0.22);

  --shelf-scroll-focus-outline: 2px solid rgba(255, 246, 214, 0.9);
  --shelf-scroll-focus-offset: 2px;

  --spine-width: 32px;

--journal-spine-height: 19.3vh;
--book-spine-height: 18.5vh;
--shelf-divider-height: 15.5vh;

--spine-top-padding: 2rem;
}

.backlight {
  position: fixed;       /* anchor to top of viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: var(--backlight-height);
  display: flex;
  flex-direction: column;
  background: linear-gradient(to bottom, #1c1469, #8485a5, #7b7a91);
  z-index: 50;           /* keep above page content */
  perspective: 800px;
  overflow: visible;
}

/* Shelf bar across the screen */
/* Shelf bar across the screen */
.shelf-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--shelf-bar-height);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0 32px 29px rgba(0,0,0,0.2);
  transform: translateY(calc(100% - 8px));
  background: linear-gradient(
    to bottom,
    #6e4a2f,
    #905c37,
    #c0804e,
    #a66a3f,
    #8b5e3c
  );
}

.layout-wrapper {
  position: relative;        /* NOT fixed */
  margin-top: calc(var(--backlight-height)); /* push content below the backlight */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  width: 100%;
  padding-bottom: 4rem;
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;
  z-index: 100;
}

.book-inner {
  position: relative;
  width: 300px;   /* match journal cover width */
  height: 455px;  /* match journal cover height */
  margin: 0 auto;
}

.book {
  position: relative;
  height: 455px;
  width: 300px;
  /* top: 0;     */
  left: auto;
  transform: none;
  margin: 0 auto 10px;
  perspective: 1000px;
  transform-origin: top center; /* Ensures it scales from the top down */
  transform: scale(1.25);        /* Change 0.8 to whatever size you want (1 = 100%) */
}

@media (min-width: 1100px) {
  .layout-wrapper {
    flex-direction: row;        /* calendar left, book right */
    align-items: flex-start;
    justify-content: center;
  }

  .calendar-stack {
    height: auto;
    /* IMPORTANT: The fixed positioning for .calendar-container is REMOVED 
       so it stays inside the draggable stack. */
    margin-right: 2rem;         
  }

  .book { 
    margin-left: 30rem; /* keep book slightly right of center */ 
  }
}

.newJournal {
  position: absolute;
  top: 5%;
  right: 8%;
  margin-left: 10px;
  color: #fffbe7;
  font-family: 'Georgia', serif;
  font-size: 1rem;
  letter-spacing: 2px;
  text-shadow: 1px 1px 2px #42210b;
  cursor: pointer;
}

.upright {
  position: absolute;
  top: 0;
  right: 0;
  width: 2%;       /* proportional thickness */
  height: 100%;    /* full height of backlight */
  background: linear-gradient(
    to right,
    #6e4a2f,
    #905c37,
    #c0804e,
    #a66a3f,
    #8b5e3c
  );
  transform: rotate3d(0, 1, 0, -40deg);
}

/* SPINE STUFF */
.journal-spine {
  position: relative;
  width: var(--spine-width);
  height: var(--journal-spine-height);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  writing-mode: vertical-rl;
  font-family: 'Libre Baskerville', serif;
  color: #c2eaed;
  padding-top: var(--spine-top-padding);
  cursor: pointer;
  background-image:
    linear-gradient(
      to right,
      rgba(0,0,0,0.6) 0%,
      rgba(255,255,255,0.35) 35%,
      rgba(255,255,255,0.25) 55%,
      rgba(0,0,0,0.5) 100%
    ),
    var(--spine-bg);
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
}
/* Top horizontal line */
.journal-spine::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;          /* slightly wider for a fuller look */
  height: 2px;

  /* Extended lighting gradient so the line stays strong to the edges */
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.45) 45%,
    rgba(0,0,0,0.55) 90%,
    rgba(0,0,0,0.65) 95%
  );

  /* Embossed bevel */
  box-shadow:
    0 1px 1px rgba(255,255,255,0.35),
    0 -1px 1px rgba(0,0,0,0.45);
}

/* Bottom horizontal line */
.journal-spine::after {
  content: "";
  position: absolute;
  top: 35%;
  left: 10%;
  width: 80%;
  height: 2px;

  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.72) 0%,
    rgba(255,255,255,0.50) 45%,
    rgba(0, 0, 0, 0.55) 90%,
    rgba(0, 0, 0, 0.845) 95%

  );

  box-shadow:
    0 1px 1px rgba(255,255,255,0.35),
    0 -1px 1px rgba(0,0,0,0.45);
}


.journal-spine-label {
  position: absolute;
  top: 17.5%;
  left: 50%;
  width: 70%;
  transform: translateX(-50%);
  padding: 0 0.3rem;
  font-size: 0.5rem;
  color:#e1c192;
  font-style: italic;
  font-weight: bold;
  text-align: center;
  pointer-events: none;
  writing-mode:horizontal-tb;
  z-index: 2;
  /* background: linear-gradient(to right,  hsl(39, 67%, 35%),#a9967d, #91887a); */
}

.journal-spine-year{
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  top: 60%;
  transform: translateY(-50%);
  color:#e1c192;
  font-size: 1.5rem;
}

.journal-spine-title {
  display: block;
  font-size: var(--spine-title-size, 16px);
  line-height: 1;
  text-align: center;

  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  color: gold;
  margin: 0 auto;
}




.book-spine {
  position: relative;
  width: var(--spine-width);
  height: var(--book-spine-height);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: flex-end;
  writing-mode: vertical-rl;
  font-family: 'Libre Baskerville', serif;
  color: #c2eaed;
  padding-top: var(--spine-top-padding);
  cursor: pointer;
  background-image:
    linear-gradient(
      to right,
      rgba(0,0,0,0.6) 0%,
      rgba(255,255,255,0.35) 35%,
      rgba(255,255,255,0.25) 55%,
      rgba(0,0,0,0.5) 100%
    ),
    var(--spine-bg);
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
}


.shelf-divider + .book-spine {
  left: 0;
  right: 0;
  margin-left: 0;
}
/* Top horizontal line */



.book-spine .title {
  position: absolute;
  top: 15%;
  left:75%;
  transform: translateX(-75%);

  width: 65%;          /* narrower for uppercase titles */
  max-height: 45%;

  display: flex;
  justify-content: center;
  align-items: center;

  writing-mode: vertical-rl;
  text-orientation: mixed;

  overflow: hidden;
  white-space: normal;
}

.author-wrapper {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  /* bottom aligns with lower line */
  bottom: var(--spine-line-bottom);

  /* height is the difference between the two lines */
  height: calc(var(--spine-line-top) - var(--spine-line-bottom));

  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;

  overflow: visible;
  pointer-events: none;
}


.book-spine-author {
  display: block;
  font-size: var(--spine-author-size, 12px);
  line-height: 1;
  writing-mode: horizontal-tb;
  text-orientation: mixed;

  text-align: center;

  white-space: nowrap;      /* no mid-word breaks */
  overflow: hidden;
  text-overflow: ellipsis;

  color: #f5e238;
  font-style: italic;

  pointer-events: none;
  z-index: 2;
}


/* Safety: hide/remove legacy injected label if it appears */
.book-spine > .book-spine-label {
  display: none !important;
}

/* Ensure book spine title sits below the bottom horizontal line */
.book-spine { position: relative; }
.book-spine::after { z-index: 1; }


.spine-fade {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.spine-fade.spine-visible {
  opacity: 1;
}

.journal-spine-title,
.book-spine-author {
  text-shadow: var(--spine-text-shadow);
}


.journal-spine::before,
.journal-spine::after {
  background-color: gold;
  box-shadow: 0 1px 1px rgba(255,255,255,0.2);
}


/* Caption styling */
.caption {
  position: relative;
  top: 20%;
  left: 2%;
  margin-left: 10px;
  color: rgb(10, 3, 3);
  font-family: 'Georgia', serif;
  font-size: 0.8rem;
  letter-spacing: 2px;
  text-shadow: 1px 1px 2px #42210b;
  cursor: pointer;
  background-color: transparent;
}

.shelf{
  position:absolute;
  width: 100%;
  height:20px;
  top: 16.2vh;
  left:0;
  background-color: #155bc3;
  color: rgb(204, 31, 31);
  padding-left: 10px;
  font-family:"Times New Roman";
  z-index: 0;
}

/* BOOKSHELF RULES - SCROLLABLE */
.backlight > .bookshelf {
  position: relative;
  z-index: 5000;

  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0 10px 0;
  box-sizing: border-box;

  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 2px;

  overflow-x: auto;
  overflow-y: hidden;

  scrollbar-gutter: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.backlight > .bookshelf::-webkit-scrollbar {
  display: none;
}

.backlight > .bookshelf::after {
  display: none;
}

.backlight > .bookshelf > *,
.backlight > .bookshelf .journal-spine,
.backlight > .bookshelf .book-spine,
.backlight > .bookshelf .shelf-divider {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
}

.backlight > .bookshelf > div {
  display: flex;
  align-items: flex-end;
  flex: 0 0 auto;
}

/* Custom shelf scroller */
.backlight > .shelf-scroll-control {
  position: absolute;
  left: var(--shelf-scroll-left);
  right: var(--shelf-scroll-right);
  bottom: var(--shelf-scroll-bottom);
  height: var(--shelf-scroll-height);
  display: flex;
  align-items: center;
  z-index: 5400;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.18s ease;
}

.backlight > .shelf-scroll-control.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.backlight > .shelf-scroll-control .shelf-scroll-control__track {
  position: relative;
  width: 100%;
  height: var(--shelf-scroll-track-height);
  border-radius: var(--shelf-scroll-track-radius);
  background: linear-gradient(
    to bottom,
    var(--shelf-scroll-track-color-top),
    var(--shelf-scroll-track-color-mid),
    var(--shelf-scroll-track-color-bottom)
  );
  box-shadow: var(--shelf-scroll-track-shadow);
  pointer-events: auto;
}

.backlight > .shelf-scroll-control .shelf-scroll-control__thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--shelf-scroll-thumb-min-width);
  height: var(--shelf-scroll-thumb-height);
  transform: translate(0, -50%);
  border: var(--shelf-scroll-thumb-border);
  border-radius: var(--shelf-scroll-thumb-radius);
  background: linear-gradient(
    to bottom,
    var(--shelf-scroll-thumb-color-top),
    var(--shelf-scroll-thumb-color-mid) 52%,
    var(--shelf-scroll-thumb-color-bottom)
  );
  box-shadow: var(--shelf-scroll-thumb-shadow);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}

.backlight > .shelf-scroll-control.is-dragging .shelf-scroll-control__thumb {
  cursor: grabbing;
}

.backlight > .shelf-scroll-control .shelf-scroll-control__thumb::after {
  content: "";
  position: absolute;
  inset: var(--shelf-scroll-grip-inset-y) var(--shelf-scroll-grip-inset-x);
  border-radius: 4px;
  background: repeating-linear-gradient(
    to right,
    rgba(95, 64, 30, 0.28) 0 3px,
    rgba(255, 240, 205, 0.08) 3px 6px
  );
}

.backlight > .shelf-scroll-control .shelf-scroll-control__thumb:focus {
  outline: var(--shelf-scroll-focus-outline);
  outline-offset: var(--shelf-scroll-focus-offset);
}
/* additional draggable object */
.backlight > .shelf-scroll-control {
  position: absolute;
  left: var(--shelf-scroll-left);
  right: var(--shelf-scroll-right);
  bottom: var(--shelf-scroll-bottom);
  height: var(--shelf-scroll-height);
  display: flex;
  align-items: center;
  z-index: 5400;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.18s ease;
}

.backlight > .shelf-scroll-control.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.backlight > .shelf-scroll-control .shelf-scroll-control__track {
  position: relative;
  width: 100%;
  height: var(--shelf-scroll-track-height);
  border-radius: var(--shelf-scroll-track-radius);
  background: linear-gradient(
    to bottom,
    var(--shelf-scroll-track-color-top),
    var(--shelf-scroll-track-color-mid),
    var(--shelf-scroll-track-color-bottom)
  );
  box-shadow: var(--shelf-scroll-track-shadow);
  pointer-events: auto;
}

.backlight > .shelf-scroll-control .shelf-scroll-control__thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--shelf-scroll-thumb-min-width);
  height: var(--shelf-scroll-thumb-height);
  transform: translate(0, -50%);
  border: var(--shelf-scroll-thumb-border);
  border-radius: var(--shelf-scroll-thumb-radius);
  background: linear-gradient(
    to bottom,
    var(--shelf-scroll-thumb-color-top),
    var(--shelf-scroll-thumb-color-mid) 52%,
    var(--shelf-scroll-thumb-color-bottom)
  );
  box-shadow: var(--shelf-scroll-thumb-shadow);
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
}

.backlight > .shelf-scroll-control .shelf-scroll-control__thumb::after {
  content: "";
  position: absolute;
  inset: var(--shelf-scroll-grip-inset-y) var(--shelf-scroll-grip-inset-x);
  border-radius: 4px;
  background:
    repeating-linear-gradient(
      to right,
      rgba(95, 64, 30, 0.28) 0 3px,
      rgba(255, 240, 205, 0.08) 3px 6px
    );
}

.backlight > .shelf-scroll-control .shelf-scroll-control__thumb:focus {
  outline: var(--shelf-scroll-focus-outline);
  outline-offset: var(--shelf-scroll-focus-offset);
}

.journal-spine,
.book-spine,
.shelf-divider {
  flex: 0 0 auto;
}


.shelf-divider {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  height: var(--shelf-divider-height);
  margin: 0 6px 0 4px;
  pointer-events: none;
  align-self: flex-end;
  position: relative;
  z-index: 2;
}
/* Journal palette */
.shelf-bookend {
  border-radius: 4px 4px 2px 2px;
  background-color: #a9967d;
  background-image: linear-gradient(
    to right,
    hsl(39, 67%, 35%) 0%,
    #a9967d 38%,
    #c8b89c 58%,
    #91887a 100%
  );
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.22),
    inset -2px 0 0 rgba(0, 0, 0, 0.12),
    2px 0 6px rgba(0, 0, 0, 0.12);
    filter: brightness(var(--bookend-brightness));
}

.shelf-bookend::before {
  content: "";
  position: absolute;
  left: -5px;
  bottom: 0;
  width: 28px;
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    hsl(39, 67%, 35%) 0%,
    #b29f84 50%,
    #91887a 100%
  );
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
  filter: brightness(var(--bookend-brightness));
}

.shelf-bookend::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 12px;
  left: 4px;
  width: 2px;
  background: rgba(255, 248, 230, 0.30);
  border-radius: 999px;
}


/* Light Pine */
/* .shelf-bookend {
  border-radius: 4px 4px 2px 2px;
  background-color: #e8d2a8;
  background-image: linear-gradient(
    to right,
    #dec08f 0%,
    #ecd4a8 35%,
    #f6e4bb 55%,
    #cfad73 100%
  );
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.30),
    inset -2px 0 0 rgba(0, 0, 0, 0.10),
    2px 0 6px rgba(0, 0, 0, 0.10);
}

.shelf-bookend::before {
  content: "";
  position: absolute;
  left: -5px;
  bottom: 0;
  width: 28px;
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    #d1ae75 0%,
    #e8c790 50%,
    #bd945f 100%
  );
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.10);
} */

/* Whitewashed driftwood */
/* .shelf-bookend {
  border-radius: 4px 4px 2px 2px;
  background-color: #ddd6c8;
  background-image: linear-gradient(
    to right,
    #d3ccbf 0%,
    #e7e1d6 35%,
    #f3eee5 55%,
    #c7beaf 100%
  );
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.34),
    inset -2px 0 0 rgba(0, 0, 0, 0.08),
    2px 0 6px rgba(0, 0, 0, 0.08);
}

.shelf-bookend::before {
  content: "";
  position: absolute;
  left: -5px;
  bottom: 0;
  width: 28px;
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    #c8beaf 0%,
    #dfd6c8 50%,
    #b4aa9a 100%
  );
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
} */

/* Pale Oak */
/* .shelf-bookend {
  border-radius: 4px 4px 2px 2px;
  background-color: #e2cfae;
  background-image: linear-gradient(
    to right,
    #d8c3a5 0%,
    #e6d2b5 35%,
    #f2dfc2 55%,
    #c9ae88 100%
  );
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.28),
    inset -2px 0 0 rgba(0, 0, 0, 0.10),
    2px 0 6px rgba(0, 0, 0, 0.10);
}

.shelf-bookend::before {
  content: "";
  position: absolute;
  left: -5px;
  bottom: 0;
  width: 28px;
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    #ccb08a 0%,
    #e2c49f 50%,
    #b99870 100%
  );
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.10);
} */
/* Pale coloured book end */
/* .shelf-bookend {
  border-radius: 4px 4px 2px 2px;
  background-color: #e2cfae;
  background-image: linear-gradient(
    to right,
    #d8c3a5 0%,
    #e6d2b5 35%,
    #f2dfc2 55%,
    #c9ae88 100%
  );
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.28),
    inset -2px 0 0 rgba(0, 0, 0, 0.10),
    2px 0 6px rgba(0, 0, 0, 0.10);
}

.shelf-bookend::before {
  content: "";
  position: absolute;
  left: -5px;
  bottom: 0;
  width: 28px;
  height: 8px;
  border-radius: 3px;
  background: linear-gradient(
    to right,
    #ccb08a 0%,
    #e2c49f 50%,
    #b99870 100%
  );
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.10);
} */
.shelf-bookend::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 12px;
  left: 4px;
  width: 2px;
  background: rgba(255, 240, 200, 0.32);
  border-radius: 999px;
}




/* ===== NOTEBOOK SPINE TOOLTIP ON HOVER/TAP ===== */
.book-spine[data-full-title]::after {
  content: attr(data-full-title) "\A by\A " attr(data-author);
  white-space: pre-wrap;
  text-align: center;
  writing-mode: horizontal-tb;
  text-orientation: mixed;
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%);
  display: block;
  background: rgba(234, 230, 230, 0.9);
  color: #5e1313;
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8rem;
  width: max-content;
  max-width: 250px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 200;
}
.book-spine[data-full-title]:hover,
.book-spine[data-full-title]:focus,
.book-spine[data-full-title]:focus-within {
  z-index: 300;
}

.book-spine[data-full-title]:hover::after,
.book-spine[data-full-title]:focus::after {
  opacity: 1;
}

/* Decorative top line */
.book-spine::before {
  content: "";
  position: absolute;
  bottom: var(--spine-line-top);
  left: 10%;
  width: 80%;
  height: 2px;
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.45) 45%,
    rgba(0,0,0,0.55) 90%,
    rgba(0,0,0,0.65) 100%
  );
  /* background-color: gold; */

  box-shadow:
    0 1px 1px rgba(255,255,255,0.35),
    0 -1px 1px rgba(0,0,0,0.45);

  z-index: 1;
}


/* Decorative bottom line */
.spine-inner::after {
  content: "";
  position: absolute;
  bottom: var(--spine-line-bottom);
  left: 10%;
  width: 80%;
  height: 2px;
  /* background-color: gold; */
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.55) 0%,
    rgba(255,255,255,0.45) 45%,
    rgba(0,0,0,0.55) 90%,
    rgba(0,0,0,0.65) 100%
  );
  /* background-color: gold; */

  box-shadow:
    0 1px 1px rgba(255,255,255,0.35),
    0 -1px 1px rgba(0,0,0,0.45);

  z-index: 1;
}

.book-spine::before,
.spine-inner::after {
  background-color: gold;
  box-shadow: 0 1px 1px rgba(255,255,255,0.2);
}


.book-spine:focus {
  outline: 2px solid rgba(255, 255, 255, 0.4);
  outline-offset: 2px;
}

/* Inside Front Cover Styling */
.journal-year-display {
  text-align: center;
  padding: 1rem 0;
}

.journal-year-display .year-label {
  display: block;
  font-size: 1.2em;
  font-style: italic;
  color: #5a4a3a;
  margin-bottom: 0.5rem;
}

.journal-year-display .year-number {
  display: block;
  font-size: 3em;
  font-weight: bold;
  color: #2c1810;
  font-family: 'Libre Baskerville', serif;
  letter-spacing: 0.1em;
}

.back-cover-year {
  font-size: 2em;
  font-style: italic;
  color: #4a3a2a;
}

/* Notebook Inside Front Cover Styling */
.notebook-cover-display {
  text-align: center;
  padding: 2rem 1rem;
  background-color: #e1d0ad;
  border-radius: 5px;
}

.notebook-title-display {
  display: block;
  font-size: 0.8em;
  font-weight: normal;
  color: #2c1810;
  font-family: 'Libre Baskerville', serif;
  margin-bottom: 0.5rem;
}

.notebook-by {
  display: block;
  font-size: 0.6em;
  font-style: italic;
  color: #5a4a3a;
  margin: 0.3rem 0;
}

.notebook-author-display {
  display: block;
  font-size: 0.8em;
  color: #4a3a2a;
  font-family: 'Libre Baskerville', serif;
}



.notebook-back-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 20px;
    text-align: center;
}

.notebook-back-content {
    font-size: 0.5rem;
    color: #333;
}
.credit{
  font-size: 0.5rem;
  color: #5a4a3a;
}

/* Notebook Controls label (inside front cover, bottom-left) */
.backCover .notebook-controls {
  position: absolute;
  left: 30px;
  bottom: 58px;
  width: 240px;
  max-width: calc(100% - 100px);
  text-align: left;
  font-size: 0.50rem;
  line-height: 1.2;
  z-index: 5;
}

.backCover .notebook-controls__rule {
  border-top: 1px solid rgba(0, 0, 0, 0.35);
  margin: 3px 0;
}

.backCover .notebook-controls__title {
  margin: 3px 0 5px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.backCover .notebook-controls__row {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 6px;
  margin: 8px 0;
}

.backCover .notebook-controls__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.backCover .notebook-controls__btn {
  justify-self: end;
  white-space: nowrap;
  font: inherit;
  padding: 0 6px;
  border: 1px solid rgba(0, 0, 0, 0.35);
  background: transparent;
  border-radius: 3px;
  cursor: pointer;
}

.backCover .notebook-controls__btn:focus {
  outline: 2px solid rgba(0, 0, 0, 0.35);
  outline-offset: 2px;
}

.backCover .notebook-controls .notebook-controls__btn.edit-tab {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  display: inline-block !important;
  margin: 0 !important;
  font-weight: 600 !important;
}
/* When a notebook is open, hide the FRONT cover text */
.notebook-open .FCtxt {
  visibility: hidden !important;
  pointer-events: none;
}
/*   Found these controls  (in styles.css) overriding all the above 

.notebook-controls {
  position: relative;
  bottom: 40px;
  right: 40px;
  width: 260px;
  padding: 16px 20px;
  background: rgba(255, 248, 230, 0.85);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  font-family: "Georgia", serif;
  font-size: 0.8rem;
  color: #333;
  backdrop-filter: blur(2px);
}
*/

/* gutter css for the scrollable area in notebook editing mode */

.page-gutter {
  position: fixed;
  left: calc(50% - 180px); /* aligns with scroll editor left edge */
  top: 20%;
  width: 40px;
  height: 340px;
  pointer-events: none;
  z-index: 99999;
}

.page-marker-tab {
  position: absolute;
  left: 0;
  width: 100%;
  padding: 4px 6px;
  font-size: 0.8rem !important;
  font-weight: bold;
  color: #fff !important;
  background: rgba(0, 0, 0, 0.6) !important;
  border-radius: 4px;
  text-align: right;
  opacity: 1 !important;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
}

.page-indicator {
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}


.page-bg {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 0;
}

.notebook-scroll-editor * {
  position: relative;
  z-index: 1;
}
.inline-page-label {
  margin-top: 8px;
  margin-bottom: 16px;
  padding: 4px 8px;
  border-radius: 4px;
  background: #222;
  color: #fff;
  font-size: 0.8rem;
  font-weight: bold;
  text-align: right;
  opacity: 0.9;
  user-select: none;
}
.inline-page-label {
  pointer-events: none;
  user-select: none;
}
.editable-chunk {
  min-height: 2rem;
  outline: none;
  white-space: pre-wrap;
}
.notebook-link {
  color: #3A7BD5;
  text-decoration: underline;
  cursor: pointer;
}

.atomic-link {
  white-space: nowrap;
}

.link-label-prompt {
  position: absolute;
  z-index: 99999;
  background: #f7f3e8; /* parchment */
  border: 1px solid #b8a88a;
  padding: 10px 12px;
  border-radius: 6px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  width: 220px;
  font-family: inherit;
  color: #4a3f2a;
}

.link-label-prompt .prompt-text {
  font-size: 0.85rem;
  margin-bottom: 6px;
}

.link-label-prompt .prompt-input {
  width: 100%;
  padding: 6px;
  margin-bottom: 8px;
  border: 1px solid #b8a88a;
  border-radius: 4px;
  background: #faf7ef;
  color: #4a3f2a;
}

.link-label-prompt .prompt-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.link-label-prompt button {
  padding: 4px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.8rem;
  background: #c2a98a; /* textured brown base */
  color: white;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2NkYGD4DwABAwEAffNkWQAAAABJRU5ErkJggg=="); /* subtle grain */
}

.link-label-prompt button.prompt-cancel {
  background: #d8c7ad;
  color: #4a3f2a;
}
/* 
.edit-cover-note {
  font-size: 8px;
  margin-top: 8px;
  opacity: 0.55;
  letter-spacing: 0.5px;
  cursor: pointer;
  user-select: none;
  font-style: italic;
  text-shadow: 0 1px 0 rgba(182, 23, 23, 0.908);
  transition: opacity 0.2s ease;
}

.edit-cover-note:hover {
  opacity: 0.9;
}

 */
 .edit-cover-note {
  font-size: 0.65rem;
  margin-top: 8px;
  opacity: 0.95;
  color: chocolate;
  letter-spacing: 0.5px;
  user-select: none;
  font-style: italic;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
  transition: opacity 0.2s ease;
}

.edit-cover-note:hover {
  opacity: 0.9;
}

.notebook-title-display.editing,
.notebook-author-display.editing {
  outline: none;
  border-bottom: 1px dashed rgba(0,0,0,0.35);
  padding-bottom: 2px;
}

.spine-visible {
  opacity: 1;
  transition: opacity 0.4s ease;
}

.journal-spine-title {
  opacity: 1;
  transition: opacity 0.4s ease;
}
.journal-spine-title {
  max-height: 100%;
  overflow: hidden;
}


.journal-spine {
  color: gold;
  
}

/* SYSTEM BOOKS STYLING */


/* .system-page-content {
    white-space: pre-wrap;   
    font-family: var(--page-font, 'Georgia', serif);
    font-size: 0.7rem;
    line-height: 1.55;
    padding: 1.2rem 1.5rem;
    color: var(--page-text-color, #333);
}
*/
.system-page-content {
  font-family: Georgia, serif;
  font-size: 0.60rem;
  line-height: 1.28;
  padding: 1.2rem 1.5rem;
  color: var(--page-text-color, #333);
}


.system-page-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.5em auto;
}

.system-page-content h1,
.system-page-content h2,
.system-page-content h3,
.system-page-content h4,
.system-page-content h5,
.system-page-content h6 {
  margin: 0.25em 0 0.18em;
  line-height: 1.12;
  font-weight: 700;
}

.system-page-content h1 {
  font-size: 1.28em;
}

.system-page-content h2 {
  font-size: 1.1em;
}

.system-page-content h3 {
  font-size: 0.98em;
}

.system-page-content p {
  margin: 0.18em 0 0.32em;
}

.system-page-content ul,
.system-page-content ol {
  margin: 0.14em 0 0.22em;
  padding-left: 0.95em;
}

.system-page-content li {
  margin: 0.02em 0;
  line-height: 1.06;
}

.system-page-content li p {
  margin: 0;
}
.system-page-content a {
  color: #4a3aa8;
  text-decoration: underline;
}


.system-page-content table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0.28em 0;
  font-size: 0.82em;
  line-height: 1.08;
}

.system-page-content th,
.system-page-content td {
  border: 1px solid rgba(0, 0, 0, 0.22);
  padding: 0.1em 0.16em;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.system-page-content th {
  font-weight: 700;
}

.system-page-content td p,
.system-page-content th p,
.system-page-content td ul,
.system-page-content th ul,
.system-page-content td ol,
.system-page-content th ol {
  margin: 0;
}

.system-page-content td ul,
.system-page-content th ul,
.system-page-content td ol,
.system-page-content th ol {
  padding-left: 0.8em;
}

.system-table-continued {
  margin: 0.18em 0 0.12em;
  font-size: 0.72em;
  font-style: italic;
  color: rgba(0, 0, 0, 0.62);
}
.TOC {
  margin: 1.5em 0;
  line-height: 1.8;
  font-size: 0.6rem;  
}

.entry-area[data-empty="true"] {
  position: relative;
}

.entry-area[data-empty="true"]::before {
  content: "Click Edit and start writing.";
  position: absolute;
  inset: 18px 14px auto 14px;
  color: rgba(60, 60, 60, 0.45);
  font-style: italic;
  letter-spacing: 0.01em;
  pointer-events: none;
  user-select: none;
  text-align: center;
  white-space: normal;
}
.system-page-content .poetry-book-title,
.entry-area .poetry-book-title {
  margin: 0.24em 0 0.08em;
  text-align: center;
  font-weight: 600;
  line-height: 1.08;
  white-space: pre-wrap;
  font-size: 1.0rem;
}

.system-page-content .poetry-book-author,
.entry-area .poetry-book-author {
  margin: 0 0 0.18em;
  text-align: center;
  line-height: 1.08;
  white-space: pre-wrap;
  font-size: 0.85rem;
}

.system-page-content .poetry-front-gap,
.entry-area .poetry-front-gap {
  margin: 0;
  height: 0.5em;
}

.system-page-content .poetry-section-marker,
.entry-area .poetry-section-marker {
  margin: 0.3em 0 0.18em;
  text-align: center;
  font-weight: 600;
  line-height: 1.08;
  white-space: pre-wrap;
}

.system-page-content .poetry-line,
.entry-area .poetry-line {
  margin: 0;
  text-align: center;
  line-height: 1.12;
  white-space: pre-wrap;
  font-size: 0.75rem;
}

.system-page-content .poetry-stanza-break,
.entry-area .poetry-stanza-break {
  margin: 0;
  height: 0.72em;
}
.system-page-content{
  font-size: 0.65rem;
}
/* tablet ToolTip */
.shelf-spine-info {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 6000;
  pointer-events: none;

  padding: 10px 14px;
  max-width: 180px;

  border: 1px solid rgba(120, 78, 34, 0.35);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255, 244, 232, 0.96), rgba(238, 222, 198, 0.96));
  color: #2f2016;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}

.shelf-spine-info__type {
  font-family: "Libre Baskerville", serif;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 4px 0;
}

.shelf-spine-info__title {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #7a5331;
  line-height: 1.08;
  margin: 0 0 6px 0;
}

.shelf-spine-info__by {
  font-size: 0.7rem;
  color: #6a4a32;
  line-height: 1;
  margin: 0 0 2px 0;
  opacity: 0.85;
}

.shelf-spine-info__author {
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.08;
  color: #5a4030;
  margin: 0;
}

.shelf-spine-info__message {
  margin-top: 8px;
  font-size: 0.72rem;
  font-style: italic;
  line-height: 1.08;
  color: #7a5331;
  opacity: 0.9;
  min-height: 0;
}

#shelfSpineInfo {
  display: none;
}

#shelfSpineInfo.show-on-selection {
  display: block;
}

body.shelf-selection-active .book-spine[data-full-title]::after {
  display: none !important;
}

@media (hover: none), (pointer: coarse) {
  .book-spine[data-full-title]::after {
    display: none !important;
  }
}

/* .system-page-content h1 {
  margin: 0 0 10.28em;
  font-size: 0.22em;
  line-height: 1.05;
}

.system-page-content h2 {
  margin: 0.32em 0 0.2em;
  font-size: 1.04em;
  line-height: 1.1;
}

.system-page-content h3 {
  margin: 0.28em 0 0.16em;
  font-size: 0.94em;
  line-height: 1.12;
} */