/* =========================================================
   GOLDEN HOUSE — BOOK READER
   FULL CSS
========================================================= */

:root {
  --gh-reader-white: #ffffff;
  --gh-reader-cream: #fbf9f5;
  --gh-reader-black: #111111;
  --gh-reader-text: #383838;
  --gh-reader-muted: #737373;
  --gh-reader-faint: #a8a8a8;
  --gh-reader-gold: #bd8a34;
  --gh-reader-gold-dark: #93671f;
  --gh-reader-gold-soft: rgba(189, 138, 52, 0.12);
  --gh-reader-border: #e8e3dc;
}

.gh-reader-page {
  width: 100%;
  min-height: calc(100vh - var(--gh-navbar-height, 104px) - var(--gh-announcement-height, 40px));

  background: var(--gh-reader-cream);
  color: var(--gh-reader-text);

  font-family: var(--gh-body-font);
}

.gh-reader-page *,
.gh-reader-page *::before,
.gh-reader-page *::after {
  box-sizing: border-box;
}

.gh-reader-page a {
  color: inherit;
}

.gh-reader-page button {
  font: inherit;
  cursor: pointer;
}


/* =========================================================
   STATE SCREENS (loading / signed-out / locked)
========================================================= */

.gh-reader-state {
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 90px 30px;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;

  text-align: center;
}

.gh-reader-state[hidden] {
  display: none;
}

.gh-reader-state-icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;

  display: grid;
  place-items: center;

  background: var(--gh-reader-white);
  border: 1px solid var(--gh-reader-border);
  color: var(--gh-reader-gold);

  font-size: 1.4rem;
}

.gh-reader-state h2 {
  margin: 0;

  color: var(--gh-reader-black);

  font-family: var(--gh-heading-font);
  font-size: 1.6rem;
  font-weight: 600;
}

.gh-reader-state p {
  max-width: 420px;
  margin: 0;

  color: var(--gh-reader-muted);

  font-size: 0.92rem;
  line-height: 1.7;
}

.gh-reader-state-spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--gh-reader-border);
  border-top-color: var(--gh-reader-gold);
  border-radius: 50%;

  animation: ghReaderSpin 0.8s linear infinite;
}

@keyframes ghReaderSpin {
  to {
    transform: rotate(360deg);
  }
}

.gh-reader-state-button {
  margin-top: 6px;
  padding: 14px 30px;
  border: 0;

  background: var(--gh-reader-black);

  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  transition: background-color 0.25s ease;
}

/* Higher specificity than `.gh-reader-page a { color: inherit; }`,
   otherwise this anchor button inherits the page's dark body
   text instead of white. */
a.gh-reader-state-button {
  color: var(--gh-reader-white);
}

.gh-reader-state-button:hover {
  background: var(--gh-reader-gold-dark);
}


/* =========================================================
   READER LAYOUT
========================================================= */

.gh-reader {
  width: 100%;
  min-height: calc(100vh - var(--gh-navbar-height, 104px) - var(--gh-announcement-height, 40px));

  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
}

.gh-reader[hidden] {
  display: none;
}


/* =========================================================
   SIDEBAR
========================================================= */

.gh-reader-sidebar {
  padding: 34px 26px;
  border-right: 1px solid var(--gh-reader-border);

  display: flex;
  flex-direction: column;
  gap: 20px;

  background: var(--gh-reader-white);
}

.gh-reader-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: var(--gh-reader-muted);
  text-decoration: none;

  font-size: 0.78rem;
  font-weight: 600;

  transition: color 0.2s ease;
}

.gh-reader-back-link:hover {
  color: var(--gh-reader-gold-dark);
}

.gh-reader-cover {
  aspect-ratio: 4 / 5;
  padding: 20px;
  border-radius: 10px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;

  background: linear-gradient(160deg, #1a1a1a 0%, #0a0a0a 100%);
}

.gh-reader-cover-title {
  color: var(--gh-reader-gold);

  font-family: var(--gh-heading-font);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-transform: uppercase;
}

.gh-reader-cover-brand {
  color: rgba(255, 255, 255, 0.6);

  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gh-reader-book-title {
  margin: 0;

  color: var(--gh-reader-black);

  font-family: var(--gh-heading-font);
  font-size: 1.2rem;
  font-weight: 600;
}

.gh-reader-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gh-reader-progress-bar {
  width: 100%;
  height: 5px;
  border-radius: 999px;

  background: var(--gh-reader-border);

  overflow: hidden;
}

.gh-reader-progress-fill {
  height: 100%;

  background: var(--gh-reader-gold);

  transition: width 0.3s ease;
}

.gh-reader-progress span {
  color: var(--gh-reader-muted);

  font-size: 0.72rem;
}

.gh-reader-toc-label {
  margin: 6px 0 -8px;

  color: var(--gh-reader-faint);

  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.gh-reader-toc {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gh-reader-toc-item {
  padding: 10px 12px;
  border: 0;
  border-radius: 6px;
  border-left: 2px solid transparent;

  display: flex;
  align-items: center;
  gap: 10px;

  background: transparent;
  color: var(--gh-reader-text);
  text-align: left;

  font-size: 0.84rem;
  font-weight: 500;

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.gh-reader-toc-item:hover {
  background: var(--gh-reader-cream);
}

.gh-reader-toc-item.is-active {
  border-left-color: var(--gh-reader-gold);
  background: var(--gh-reader-gold-soft);
  color: var(--gh-reader-gold-dark);

  font-weight: 700;
}

.gh-reader-download-button {
  margin-top: auto;
  padding: 13px 18px;
  border: 1px solid var(--gh-reader-border);
  border-radius: 8px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  background: var(--gh-reader-white);
  color: var(--gh-reader-black);

  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.gh-reader-download-button:hover {
  border-color: var(--gh-reader-gold);
  background: var(--gh-reader-gold-soft);
}

.gh-reader-download-message {
  margin: 0;

  color: var(--gh-reader-muted);

  font-size: 0.74rem;
  line-height: 1.5;
}

.gh-reader-download-message:empty {
  display: none;
}


/* =========================================================
   CONTENT PANE
========================================================= */

.gh-reader-pane {
  min-width: 0;
  padding: 0 0 60px;

  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.gh-reader-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;

  padding: 22px 5vw;
  border-bottom: 1px solid var(--gh-reader-border);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  background: var(--gh-reader-cream);
}

.gh-reader-chapter-title {
  color: var(--gh-reader-black);

  font-family: var(--gh-heading-font);
  font-size: 1.05rem;
  font-weight: 600;
}

.gh-reader-toolbar-right {
  display: flex;
  align-items: center;
  gap: 10px;

  color: var(--gh-reader-muted);

  font-size: 0.82rem;
}

.gh-reader-nav-arrow,
.gh-reader-text-size-button,
.gh-reader-dark-mode-button,
.gh-reader-fullscreen-button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--gh-reader-border);
  border-radius: 6px;

  display: grid;
  place-items: center;

  background: var(--gh-reader-white);
  color: var(--gh-reader-black);

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.gh-reader-nav-arrow:hover,
.gh-reader-text-size-button:hover,
.gh-reader-dark-mode-button:hover,
.gh-reader-fullscreen-button:hover {
  border-color: var(--gh-reader-gold);
}

.gh-reader-nav-arrow:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.gh-reader-text-size-button span {
  font-size: 0.72rem;
  font-weight: 700;
}

.gh-reader-toolbar-divider {
  width: 1px;
  height: 22px;

  background: var(--gh-reader-border);
}

.gh-reader-dark-mode-button.is-active {
  background: var(--gh-reader-black);
  border-color: var(--gh-reader-black);
  color: var(--gh-reader-white);
}

.gh-reader-fullscreen-button.is-active {
  background: var(--gh-reader-black);
  border-color: var(--gh-reader-black);
  color: var(--gh-reader-white);
}


/* =========================================================
   FULL SCREEN
========================================================= */

.gh-reader:fullscreen,
.gh-reader:-webkit-full-screen {
  min-height: 100vh;

  background: var(--gh-reader-white);
}

.gh-reader-pane.is-dark:fullscreen,
.gh-reader:has(.gh-reader-pane.is-dark):fullscreen {
  background: #17181a;
}


/* =========================================================
   ARTICLE
========================================================= */

.gh-reader-article {
  width: min(100%, 720px);
  margin: 0 auto;
  padding: 50px 5vw 20px;
}

.gh-reader-article-eyebrow {
  display: block;
  margin-bottom: 10px;

  color: var(--gh-reader-gold-dark);

  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.gh-reader-article h2 {
  margin: 0 0 26px;

  color: var(--gh-reader-black);

  font-family: var(--gh-heading-font);
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  font-weight: 600;
}

.gh-reader-article p {
  margin: 0 0 20px;

  color: var(--gh-reader-text);

  font-size: 1rem;
  line-height: 1.85;
}

.gh-reader-callout {
  margin: 30px 0;
  padding: 20px 22px;
  border-left: 3px solid var(--gh-reader-gold);

  display: flex;
  align-items: flex-start;
  gap: 14px;

  background: var(--gh-reader-gold-soft);
}

.gh-reader-callout i {
  margin-top: 4px;

  color: var(--gh-reader-gold-dark);
}

.gh-reader-callout p {
  margin: 0;

  color: var(--gh-reader-black);

  font-weight: 600;
}

/* Text size variants (toggled by readerTextSizeButton) */

.gh-reader-article.gh-text-size-md p,
.gh-reader-article.gh-text-size-md .gh-reader-callout p {
  font-size: 1.12rem;
}

.gh-reader-article.gh-text-size-lg p,
.gh-reader-article.gh-text-size-lg .gh-reader-callout p {
  font-size: 1.26rem;
}


/* =========================================================
   BOTTOM NAV
========================================================= */

.gh-reader-bottom-nav {
  width: min(100%, 720px);
  margin: 10px auto 0;
  padding: 24px 5vw 0;
  border-top: 1px solid var(--gh-reader-border);

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.gh-reader-bottom-nav-button {
  padding: 13px 22px;
  border: 1px solid var(--gh-reader-border);
  border-radius: 7px;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  background: var(--gh-reader-white);
  color: var(--gh-reader-black);

  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

.gh-reader-bottom-nav-button:hover {
  border-color: var(--gh-reader-gold);
}

.gh-reader-bottom-nav-button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.gh-reader-bottom-nav-button.is-primary {
  border-color: var(--gh-reader-gold);
  background: var(--gh-reader-gold);
  color: var(--gh-reader-white);
}

.gh-reader-bottom-nav-button.is-primary:hover {
  background: var(--gh-reader-gold-dark);
  border-color: var(--gh-reader-gold-dark);
}


/* =========================================================
   DARK MODE (scoped to the reading pane only)
========================================================= */

.gh-reader-pane.is-dark {
  background: #17181a;
}

.gh-reader-pane.is-dark .gh-reader-toolbar {
  background: #1c1d20;
  border-bottom-color: #2c2d31;
}

.gh-reader-pane.is-dark .gh-reader-chapter-title,
.gh-reader-pane.is-dark .gh-reader-article h2,
.gh-reader-pane.is-dark .gh-reader-callout p {
  color: #f5f1ea;
}

.gh-reader-pane.is-dark .gh-reader-article p {
  color: #c7c4bd;
}

.gh-reader-pane.is-dark .gh-reader-nav-arrow,
.gh-reader-pane.is-dark .gh-reader-text-size-button,
.gh-reader-pane.is-dark .gh-reader-dark-mode-button {
  background: #1c1d20;
  border-color: #2c2d31;
  color: #f5f1ea;
}

.gh-reader-pane.is-dark .gh-reader-bottom-nav {
  border-top-color: #2c2d31;
}

.gh-reader-pane.is-dark .gh-reader-bottom-nav-button:not(.is-primary) {
  background: #1c1d20;
  border-color: #2c2d31;
  color: #f5f1ea;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 980px) {
  .gh-reader {
    grid-template-columns: 1fr;
  }

  .gh-reader-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--gh-reader-border);
  }

  .gh-reader-cover {
    display: none;
  }

  .gh-reader-toc {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .gh-reader-toolbar {
    padding: 16px 5vw;
  }

  .gh-reader-toolbar-right span {
    display: none;
  }

  .gh-reader-article {
    padding: 34px 5vw 10px;
  }

  .gh-reader-bottom-nav-button span {
    display: none;
  }
}