/* Bookshelf layout. Utility classes remain owned by Tailwind. */
:root {
  color-scheme: light;
  --shelf-header: url("img/silver-1.png");
  --shelf-row: url("img/silver-2-lg.png");
  --shelf-background: url("img/silver-5.png");
  --shelf-left: url("img/silver-lg-lft-end.png");
  --shelf-right: url("img/silver-lg-rt-end.png");
  --shelf-left-position: 0 0;
  --shelf-right-position: 0 0;
}
html,
body {
  margin: 0;
  min-height: 100%;
}
body {
  overflow-x: hidden;
}
button,
select {
  touch-action: manipulation;
}
button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
:focus-visible {
  outline: 3px solid #f97316;
  outline-offset: 3px;
}
.notice {
  position: fixed;
  z-index: 100;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: 0.8rem 1rem;
  border-radius: 0.5rem;
  background: #065f46;
  color: white;
  box-shadow: 0 4px 16px #0004;
}
.notice-error {
  background: #991b1b;
}
[role="dialog"] {
  overflow-y: auto;
  overscroll-behavior: contain;
}
[role="dialog"] > div {
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
}
[data-close-modal] {
  min-width: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Public shelf: scoped rules do not alter management forms. */
#public-view-screen {
  min-height: 12rem;
}
#public-header-bar,
#public-footer-bar {
  background-image: var(--shelf-header);
  background-position: top center;
  background-repeat: repeat;
  box-shadow: 0 4px 6px #0005;
  flex-shrink: 0;
}
#public-header-bar {
  gap: 0.75rem;
  flex-wrap: wrap;
}
#public-header-bar > div:first-child {
  flex: 1 1 15rem;
  min-width: 0;
}
#public-header-bar > div:nth-child(2) {
  flex: 1 1 12rem;
}
#public-header-bar > div:last-child {
  flex: 1 1 18rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
#public-header-bar #public-logo-container {
  flex-shrink: 0;
}
#public-logo-container img {
  max-width: 150px;
}
#public-body-wrapper {
  min-height: 0;
  background-image: var(--shelf-background);
  background-color: var(--shelf-base-color, #525a63);
  background-repeat: repeat;
  background-position: top center;
}
#public-body-wrapper > main {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
#public-shelf-wrapper {
  flex-shrink: 0;
  min-width: 152px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
}
#public-shelves-container {
  position: relative;
  width: 100%;
}
#public-shelves-container > * + * {
  margin-top: 0;
}
.shelf-row {
  position: relative;
  width: 100%;
  height: 172px;
  background: var(--shelf-row) center top repeat-x;
  background-size: auto 172px;
}
.case-left,
.case-right {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--shelf-end-width, 165px);
  max-width: 50%;
  z-index: 1;
  pointer-events: none;
  background-repeat: no-repeat;
}
.case-left {
  left: 0;
  background-image: var(--shelf-left);
  background-position: var(--shelf-left-position);
}
.case-right {
  right: 0;
  background-image: var(--shelf-right);
  background-position: var(--shelf-right-position);
}
.case-middle {
  position: relative;
  z-index: 2;
  display: flex;
  height: 172px;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  align-items: flex-end;
}
.shelf-books-flex {
  display: flex;
  flex-wrap: nowrap;
  gap: 60px;
  align-items: flex-end;
  padding-bottom: 12px;
}
.book-card {
  position: relative;
  flex: 0 0 112px;
  transition:
    transform 0.15s ease,
    filter 0.15s ease;
}
.book-card:hover,
.book-card:focus-within {
  transform: translateY(-4px);
  filter: drop-shadow(0 6px 8px #0007);
}
.book-cover {
  position: relative;
  display: flex;
  width: 112px;
  height: 148px;
  align-items: center;
  justify-content: center;
  border: 1px solid #334155;
  border-radius: 4px;
  background: #1e293b;
  box-shadow: 0 8px 18px #0006;
  color: white;
  text-decoration: none;
}
.book-cover > img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 4px;
}
.book-cover-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #312e81, #0f172a);
  color: white;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
}
.book-page-edge {
  position: absolute;
  top: 0;
  right: -5px;
  width: 4px;
  height: 100%;
  pointer-events: none;
  z-index: 30;

  background:
    linear-gradient(#ccc, #ccc) 0 0 / 1px 100% no-repeat,
    linear-gradient(#fff, #fff) 1px center / 1px 96% no-repeat,
    linear-gradient(#ccc, #ccc) 2px center / 1px 92% no-repeat,
    linear-gradient(#fff, #fff) 3px center / 1px 88% no-repeat;
}
.book-tooltip {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 4px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  background: #0f172aeb;
  color: white;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}
.book-card:hover .book-tooltip,
.book-card:focus-within .book-tooltip {
  opacity: 1;
  visibility: visible;
}
.shelf-empty {
  padding: 5rem 1rem;
  text-align: center;
  color: white;
  background: #0f172a99;
}

/* Settings swatches. */
.skin-option {
  cursor: pointer;
  border: 3px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
.skin-option.selected {
  border-color: #9b9b9b;
  box-shadow: 0 0 10px #f9731680;
}

@media (max-width: 640px) {
  #public-header-bar {
    padding: 0.75rem;
  }
  #public-header-bar > div {
    width: 100%;
    flex-basis: 100%;
  }
  #public-header-bar > div:last-child {
    justify-content: center;
    margin: 0;
  }
  #public-header-bar > div:last-child > * {
    margin-left: 0;
  }
  #app-wrapper > header {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  #app-wrapper > div {
    flex-direction: column;
  }
  #app-wrapper aside {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  #app-wrapper aside > div:first-child {
    display: none;
  }
  #app-wrapper main {
    padding: 1rem;
    min-width: 0;
    overflow-x: auto;
  }
  #bookcases-grid > div {
    padding: 1rem;
  }
  #bookcase-modal > div {
    padding: 1.25rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .book-card,
  .book-tooltip,
  .skin-option {
    transition: none;
  }
  .book-card:hover,
  .book-card:focus-within {
    transform: none;
    filter: drop-shadow(0 6px 8px #0007);
  }
}

.book-card {
  justify-content: flex-end;
  filter: none;
}

.book-cover {
  justify-content: flex-end;
  background: transparent;
  box-shadow: none;
  border: 0;
}

.book-cover > img {
  margin-left: auto;
  object-position: right bottom;
}

/* Download controls overlay the cover without changing shelf or cover dimensions. */
.book-download {
  position: absolute;
  right: 5px;
  bottom: 6px;
  z-index: 35;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 28px;
  padding: 4px 7px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #fffffff2;
  color: #1e293b;
  font:
    600 11px/1.2 Arial,
    sans-serif;
  text-decoration: none;
}
.book-download:hover,
.book-download:focus-visible {
  background: #1d4ed8;
  border-color: #1d4ed8;
  color: white;
}


/* The book editor is a page, with normal full-height scrolling. */
.book-editor { position:fixed; inset:0; z-index:60; overflow-y:auto; background:#f1f5f9; display:flex; flex-direction:column; }
.book-editor.hidden { display:none; }
.book-editor-content { width:100%; max-width:960px; margin:0 auto; padding:24px 28px 48px; background:white; min-height:100%; }
#book-form { display:grid; grid-template-columns:1fr 1fr; gap:20px 24px; }
#book-form > * { margin-top:0; min-width:0; }
#book-form > fieldset, #book-form > div:has(#book-description), #book-form > div:has(button[type=submit]), #book-save-error { grid-column:1/-1; }
.book-about { position:absolute; left:5px; bottom:6px; z-index:35; padding:5px 6px; min-height:28px; background:#fffffff2; color:#1e293b; border:1px solid #cbd5e1; border-radius:4px; font:600 11px/1.2 Arial,sans-serif; cursor:pointer; }
.book-about:hover,.book-about:focus-visible { background:#1d4ed8; border-color:#1d4ed8; color:white; }
@media(max-width:640px) { .book-editor-content { padding:20px 16px 40px; } #book-form { display:block; } #book-form > * + * { margin-top:18px; } }