/* ==========================================================================
   SRD Browser
   Two-panel document reader: sticky sidebar navigation + markdown article.
   ========================================================================== */

/* --- Layout Frame --- */

.srd-browser-section {
  overflow: visible;
}

.srd-browser-frame {
  --srd-sidebar-width: 17.5rem;
  width: min(
    100% - (var(--space-lg) * 2),
    calc(var(--container) + var(--srd-sidebar-width) + var(--grid-gap-lg))
  );
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(14.5rem, var(--srd-sidebar-width)) minmax(0, 1fr);
  gap: var(--grid-gap-lg);
  align-items: start;
}

.srd-main {
  min-width: 0;
}

/* --- SRD Hero --- */

.srd-hero {
  padding-block: clamp(3.5rem, 6vw, 5rem);
}

.srd-hero .tools-hero-copy {
  --flow-space: 0.55rem;
}

.srd-hero .tools-hero-copy h1 {
  max-width: none;
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
}

.srd-hero .tools-hero-copy p {
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  max-width: 66ch;
}

/* --- Sidebar Navigation --- */

.srd-sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-md));
  display: grid;
  gap: var(--space-md);
  padding: var(--space-lg);
  border: 1px solid rgba(247, 243, 234, 0.2);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(13, 16, 11, 0.34), rgba(13, 16, 11, 0.18)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  box-shadow: var(--shadow-sm);
}

.srd-sidebar::-webkit-scrollbar {
  width: 0.65rem;
}

.srd-sidebar::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: rgba(226, 200, 126, 0.34);
  background-clip: padding-box;
}

.srd-sidebar__intro {
  display: grid;
  gap: var(--space-xs);
}

.srd-sidebar__eyebrow {
  margin: 0;
  color: var(--color-accent);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.srd-sidebar__toggle {
  display: none;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(236, 212, 154, 0.36);
  border-radius: var(--radius-sm);
  background: rgba(236, 212, 154, 0.08);
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.srd-sidebar__nav {
  display: grid;
  gap: var(--space-sm);
}

.srd-nav-group {
  border: 1px solid rgba(247, 243, 234, 0.12);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.12);
  overflow: clip;
}

.srd-nav-group__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.9rem 1rem;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.srd-nav-group__trigger span:last-child {
  color: var(--color-accent);
  font-size: 1.15rem;
  line-height: 1;
}

.srd-nav-group__trigger:hover,
.srd-nav-group__trigger:focus-visible {
  background: rgba(255, 255, 255, 0.05);
}

.srd-nav-group__panel {
  display: grid;
  gap: 0.15rem;
  padding: 0 0.45rem 0.45rem;
}

.srd-nav-group[data-open="false"] .srd-nav-group__panel {
  display: none;
}

.srd-nav-link {
  display: grid;
  gap: 0.18rem;
  padding: 0.7rem 0.75rem;
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}

.srd-nav-link:hover,
.srd-nav-link:focus-visible {
  background: rgba(255, 255, 255, 0.06);
}

.srd-nav-link[aria-current="page"] {
  background: rgba(236, 212, 154, 0.14);
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.srd-nav-link__title {
  font-weight: 700;
}

/* --- Article Reader --- */

.srd-reader {
  display: grid;
  gap: var(--space-md);
  min-width: 0;
}

.srd-article-shell {
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border: 1px solid rgba(247, 243, 234, 0.2);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.08)),
    linear-gradient(165deg, rgba(247, 243, 234, 0.06), rgba(247, 243, 234, 0.02));
  box-shadow: var(--shadow-sm);
}

.srd-article-shell[data-volume]::before {
  content: attr(data-volume);
  display: block;
  margin-bottom: 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid rgba(236, 212, 154, 0.16);
  color: var(--color-accent);
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.srd-article {
  min-height: 32rem;
}

.srd-article > * + * {
  margin-top: 1.3rem;
}

.srd-article h1,
.srd-article h2,
.srd-article h3 {
  scroll-margin-top: calc(var(--header-height) + var(--space-md));
}

.srd-article h1 {
  font-size: clamp(2rem, 3.3vw, 2.65rem);
}

.srd-article h2 {
  margin-top: 2.2rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid rgba(236, 212, 154, 0.16);
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);
}

.srd-article h3 {
  margin-top: 1.35rem;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  color: var(--color-accent);
}

.srd-article p,
.srd-article li,
.srd-article blockquote {
  max-width: 74ch;
}

.srd-article p,
.srd-article li {
  color: var(--color-text);
  line-height: 1.74;
}

.srd-article strong {
  color: #fff7e0;
}

.srd-article em {
  color: #f2e8c8;
}

.srd-article ul,
.srd-article ol {
  padding-left: 1.35rem;
}

.srd-article li + li {
  margin-top: 0.35rem;
}

.srd-article hr {
  height: 1px;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(236, 212, 154, 0.18) 15%,
    rgba(236, 212, 154, 0.65) 50%,
    rgba(236, 212, 154, 0.18) 85%,
    transparent 100%
  );
}

.srd-article a {
  color: var(--color-accent);
}

/* --- Rendered Markdown Elements --- */

.md-callout {
  padding: 1rem 1.15rem;
  border: 1px solid rgba(236, 212, 154, 0.18);
  border-left: 3px solid rgba(236, 212, 154, 0.62);
  border-radius: var(--radius-md);
  background: rgba(236, 212, 154, 0.06);
}

.md-callout > * + * {
  margin-top: 0.65rem;
}

.md-blockquote {
  padding: 0.2rem 0 0.2rem 1rem;
  border-left: 3px solid rgba(236, 212, 154, 0.68);
  color: var(--color-text-muted);
}

.md-table-wrap {
  overflow-x: auto;
}

.md-table {
  min-width: min(100%, 34rem);
  border-collapse: collapse;
  border: 1px solid rgba(247, 243, 234, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.14);
  overflow: clip;
}

.md-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.03);
}

.md-table th,
.md-table td {
  padding: 0.7rem 0.8rem;
  border: 1px solid rgba(247, 243, 234, 0.12);
  text-align: left;
  vertical-align: top;
}

.md-table th {
  color: var(--color-accent);
  font-weight: 700;
}

.md-image {
  display: grid;
  gap: 0.45rem;
  margin-inline: 0;
}

.md-image__frame {
  display: grid;
  place-items: center;
  min-height: 12rem;
  padding: var(--space-lg);
  border: 1px dashed rgba(236, 212, 154, 0.35);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.14);
  color: var(--color-text-muted);
  text-align: center;
}

.md-image__media {
  width: 100%;
  max-width: min(100%, 46rem);
  border: 1px solid rgba(247, 243, 234, 0.14);
  border-radius: var(--radius-md);
  background: rgba(0, 0, 0, 0.16);
  overflow: clip;
}

.md-image__media img {
  display: block;
  width: 100%;
  height: auto;
}

.md-image__caption {
  color: var(--color-text-muted);
  font-size: 0.92rem;
}

/* --- Chapter Search Filter --- */

.srd-search {
  display: grid;
}

.srd-search__input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1px solid rgba(247, 243, 234, 0.18);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.2);
  color: var(--color-text);
  font: inherit;
  font-size: 0.9rem;
  transition: border-color 160ms ease, background 160ms ease;
}

.srd-search__input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}

.srd-search__input:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
  border-color: rgba(236, 212, 154, 0.5);
  background: rgba(0, 0, 0, 0.28);
}

/* Remove default ring for pointer focus but keep visible border shift. */
.srd-search__input:focus:not(:focus-visible) {
  outline: none;
  border-color: rgba(236, 212, 154, 0.5);
  background: rgba(0, 0, 0, 0.28);
}

.srd-nav-link[hidden] {
  display: none;
}

.srd-nav-group[data-filtered="empty"] {
  display: none;
}

/* --- Loading & Error States --- */

.srd-loading,
.srd-error {
  color: var(--color-text-muted);
}

.srd-skeleton {
  display: grid;
  gap: 0.85rem;
}

.srd-skeleton__line {
  height: 0.9rem;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, rgba(247, 243, 234, 0.06) 25%, rgba(247, 243, 234, 0.1) 50%, rgba(247, 243, 234, 0.06) 75%);
  background-size: 200% 100%;
  animation: srd-shimmer 1.6s ease-in-out infinite;
}

.srd-skeleton__line--title {
  height: 1.6rem;
  width: 60%;
  margin-bottom: 0.5rem;
}

.srd-skeleton__line--short {
  width: 45%;
}

.srd-skeleton__line--medium {
  width: 80%;
}

@keyframes srd-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Pagination --- */

.srd-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

.srd-pagination__counter {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.srd-pagination__link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid rgba(236, 212, 154, 0.26);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.16);
  color: var(--color-accent);
  font-weight: 600;
  text-decoration: none;
  transition: background 160ms ease, border-color 160ms ease;
}

.srd-pagination__link[data-doc-prev]::before {
  content: "←";
  font-size: 1.05em;
}

.srd-pagination__link[data-doc-next]::after {
  content: "→";
  font-size: 1.05em;
}

.srd-pagination__link:hover,
.srd-pagination__link:focus-visible {
  background: rgba(236, 212, 154, 0.08);
  border-color: rgba(236, 212, 154, 0.46);
}

/* --- Responsive --- */

@media (min-width: 1240px) {
  .srd-browser-frame {
    width: min(
      100% - (var(--space-lg) * 2),
      calc(var(--container) + var(--srd-sidebar-width) + var(--grid-gap-lg))
    );
    grid-template-columns: var(--srd-sidebar-width) minmax(0, var(--container));
    justify-content: center;
  }

  .srd-sidebar {
    position: sticky;
    top: calc(var(--header-height) + var(--space-md));
    width: var(--srd-sidebar-width);
    max-height: calc(100vh - var(--header-height) - (var(--space-md) * 2));
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(-0.75rem);
  }
}

@media (max-width: 980px) {
  .srd-browser-frame {
    width: min(100% - (var(--space-md) * 2), var(--container));
    grid-template-columns: 1fr;
  }

  .srd-sidebar {
    position: static;
    width: auto;
    max-height: none;
    overflow: visible;
  }

  .srd-sidebar__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .srd-sidebar__nav[data-open="false"] {
    display: none;
  }
}

@media (max-width: 720px) {
  .srd-pagination {
    flex-direction: column;
  }
}