/* Long-form reading defaults layered on top of Material for MkDocs. */

.md-content__inner.md-typeset {
  max-width: 70ch;
  font-size: 0.9rem;
  line-height: 1.72;
}

.md-typeset p {
  margin-block: 0.9em 1.1em;
}

.md-typeset :is(h1, h2, h3, h4, h5, h6) {
  scroll-margin-top: 4rem;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  color: var(--md-default-fg-color);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Links in prose must be identifiable without relying on color alone. */
.md-typeset a:not(.headerlink):not(.md-button) {
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

:where(a, button, input, summary, [tabindex]):focus-visible {
  border-radius: 0.1rem;
  outline: 0.15rem solid var(--md-default-fg-color);
  outline-offset: 0.15rem;
}

.md-header :where(a, button, input, label, [tabindex]):focus-visible {
  outline-color: var(--md-primary-bg-color);
}

/* Reader-facing orientation and metadata blocks generated for sutta pages. */
.reader-guide {
  margin-block: 1.2rem;
  padding: 0.8rem 1rem;
  border-inline-start: 0.2rem solid var(--md-typeset-a-color);
  border-radius: 0.15rem;
  background: var(--md-default-fg-color--lightest);
}

.reader-guide > :first-child,
.reader-terms > :first-child {
  margin-top: 0;
}

.reader-guide > :last-child,
.reader-terms > :last-child {
  margin-bottom: 0;
}

.reading-meta {
  margin-block: 0.5rem 1.2rem;
  color: var(--md-default-fg-color--light);
  font-size: 0.95em;
}

.first-twelve-nav {
  margin-block: 0.8rem 1rem;
  padding: 0.7rem 0.8rem;
  border-inline-start: 0.2rem solid var(--md-typeset-a-color);
  background: var(--md-default-fg-color--lightest);
}

.first-twelve-nav p {
  margin-block: 0.25rem;
}

.reader-terms {
  margin-block: 1.2rem;
  border: 0.05rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.2rem;
  background: var(--md-default-bg-color);
}

.reader-source-status {
  margin-block: 1.2rem;
  border-block: 0.05rem solid var(--md-default-fg-color--lighter);
}

.reader-source-status summary {
  display: block;
  position: relative;
  min-height: 44px;
  padding: 0.55rem 2rem 0.55rem 1.6rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}

.reader-source-status summary::before {
  content: "▸";
  position: absolute;
  top: 50%;
  inset-inline-start: 0.2rem;
  background: none;
  -webkit-mask: none;
  mask: none;
  transform: translateY(-50%);
}

.reader-source-status[open] summary::before {
  content: "▾";
}

.reader-source-status summary::after {
  display: none;
}

.reader-source-status > :not(summary) {
  margin-inline: 0.2rem;
}

.reader-section-progress {
  margin: -0.5rem 0 0.7rem;
  color: var(--md-default-fg-color--light);
  font-size: 0.82em;
}

.reader-repeat-toggle {
  min-height: 44px;
  margin: 0 0 0.8rem;
  padding: 0.45rem 0.7rem;
  border: 0.05rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.2rem;
  background: var(--md-default-bg-color);
  color: var(--md-typeset-a-color);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

.reader-repeat-toggle::before {
  content: "▾ ";
}

.reader-repeat-toggle[aria-expanded="false"]::before {
  content: "▸ ";
}

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

.reader-terms summary {
  display: block;
  position: relative;
  min-height: 44px;
  padding: 0.55rem 2.2rem 0.55rem 2.4rem;
  cursor: pointer;
  color: var(--md-default-fg-color);
  font-weight: 600;
  list-style: none;
}

.reader-terms summary::-webkit-details-marker {
  display: none;
}

.reader-terms summary::before {
  content: "▸";
  position: absolute;
  top: 50%;
  inset-inline-start: 0.8rem;
  width: 1em;
  height: 1em;
  background: none;
  -webkit-mask: none;
  mask: none;
  line-height: 1;
  transform: translateY(-50%);
}

/* Material adds its own right-hand marker; keep one clear indicator only. */
.reader-terms summary::after {
  display: none;
}

.reader-terms[open] summary::before {
  content: "▾";
}

.reader-terms[open] summary {
  border-bottom: 0.05rem solid var(--md-default-fg-color--lighter);
  background: var(--md-default-fg-color--lightest);
}

.reader-terms dl {
  margin: 0;
  padding: 0.8rem;
}

.reader-terms dt {
  color: var(--md-default-fg-color);
  font-weight: 600;
}

.reader-terms dd {
  margin: 0.2rem 0 0.8rem 1rem;
}

.reader-terms dd:last-child {
  margin-bottom: 0;
}

.reader-guide__terms,
.glossary-list {
  margin-block: 0.8rem;
}

.reader-guide__terms-intro {
  margin-bottom: 0.7rem;
  color: var(--md-default-fg-color);
  font-size: 0.92em;
}

.newcomer-pathways {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-block: 1.2rem;
}

.newcomer-pathway {
  padding: 0.9rem 1rem;
  border: 0.05rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.2rem;
  background: var(--md-default-fg-color--lightest);
}

.newcomer-pathway h3 {
  margin-top: 0;
}

.reader-guide__terms dt,
.glossary-list dt {
  margin-top: 0.8rem;
  color: var(--md-default-fg-color);
  font-weight: 600;
}

.reader-guide__terms dd,
.glossary-list dd {
  margin: 0.2rem 0 0.8rem 1rem;
}

.glossary-pali {
  color: var(--md-default-fg-color--light);
  font-weight: 400;
}

/* Progressive discovery: all cards are useful without JavaScript; controls
   only narrow the already-readable list when scripting is available. */
.sutta-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 0.8rem;
  margin-block: 1.2rem;
  padding: 1rem;
  border: 0.05rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.2rem;
  background: var(--md-default-fg-color--lightest);
}

.sutta-filters label {
  align-self: end;
  font-weight: 600;
}

.sutta-filters :is(input, select, button) {
  width: 100%;
  min-height: 44px;
  padding: 0.45rem 0.55rem;
  border: 0.05rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.15rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  font: inherit;
}

.sutta-filters button {
  grid-column: 1 / -1;
  cursor: pointer;
  font-weight: 600;
}

.filter-count {
  font-weight: 600;
}

.sutta-grid {
  display: grid;
  gap: 0.8rem;
}

.sutta-card {
  padding: 0.9rem 1rem;
  border: 0.05rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.2rem;
}

.sutta-card[hidden] {
  display: none;
}

.sutta-card h2 {
  margin-top: 0;
  font-size: 1.15rem;
}

.sutta-card__reference,
.sutta-card__meta,
.sutta-card__topics {
  color: var(--md-default-fg-color--light);
  font-size: 0.9em;
}

/* Previous, collection, and next links remain usable at high zoom and on touch. */
.reading-order ul,
.reader-pagination ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  margin-block: 1.2rem;
  padding: 0;
  list-style: none;
}

.reading-order li,
.reader-pagination li {
  margin: 0;
}

.reading-order a,
.reader-pagination a {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.6rem;
  border: 0.05rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.2rem;
  text-align: center;
}

.reading-order a:hover,
.reader-pagination a:hover {
  background: var(--md-default-fg-color--lightest);
}

/* Material's default footer gray misses AA for its small copyright text by a
   fraction on the dark footer. Keep the footer subtle without failing 4.5:1. */
.md-footer-meta .md-copyright,
.md-footer-meta .md-copyright a {
  color: #a6a6a6;
}

/* Keep wide reference material usable without shrinking all text to fit. */
.md-typeset table:not([class]) {
  font-size: 0.75rem;
  overscroll-behavior-inline: contain;
}

@media screen and (max-width: 44.984375em) {
  .md-main__inner {
    margin-top: 0.75rem;
  }

  .md-content__inner.md-typeset {
    max-width: 100%;
  }

  .reader-guide,
  .reader-terms,
  .reader-source-status {
    margin-block: 1rem;
  }

  .newcomer-pathways {
    grid-template-columns: 1fr;
  }

  .reader-terms dd {
    margin-left: 0;
  }

  .reader-guide__terms dd,
  .glossary-list dd {
    margin-left: 0;
  }

  .reading-order ul,
  .reader-pagination ul {
    grid-template-columns: 1fr;
  }

  .sutta-filters {
    grid-template-columns: 1fr;
  }

  .md-typeset table:not([class]) {
    width: 100%;
    font-size: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Reader feedback. Controls are appended beside the governed text by
   reader-feedback.js, only once the submission service answers. They stay
   visually quiet until focused or hovered, but are always visible so touch
   and keyboard users find them. */
.reader-feedback__button {
  margin-inline-start: 0.35em;
  padding: 0.15em 0.4em;
  min-height: 24px;
  border: 0.05rem solid transparent;
  border-radius: 0.2rem;
  background: transparent;
  color: var(--md-default-fg-color);
  font: inherit;
  font-size: 0.72em;
  line-height: 1.4;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
  cursor: pointer;
  vertical-align: baseline;
}

.reader-feedback__button:hover,
.reader-feedback__button:focus-visible,
.reader-feedback__button[aria-expanded="true"] {
  border-color: var(--md-default-fg-color--lighter);
  background: var(--md-default-fg-color--lightest);
  text-decoration-style: solid;
}

/* Where a hover pointer exists, keep passage controls out of the way until
   the passage is hovered, the control is focused, or its form is open. They
   stay in the document at full size, so keyboard and screen-reader users and
   touch screens (which have no hover) are unaffected. */
@media (hover: hover) and (pointer: fine) {
  [data-passage-id] > .reader-feedback__button {
    opacity: 0;
    transition: opacity 120ms ease-in;
  }

  [data-passage-id]:hover > .reader-feedback__button,
  [data-passage-id] > .reader-feedback__button:focus-visible,
  [data-passage-id] > .reader-feedback__button[aria-expanded="true"] {
    opacity: 1;
  }
}

.reader-feedback__done {
  margin-inline-start: 0.4em;
  font-size: 0.78em;
  color: var(--md-default-fg-color);
}

.reader-feedback__control {
  margin-block: 0.4rem 1rem;
}

.reader-feedback__form,
.reader-feedback,
.reader-feedback__gloss {
  margin-block: 0.8rem 1.4rem;
  padding: 0.8rem 1rem;
  border: 0.05rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.2rem;
  background: var(--md-default-bg-color);
  font-size: 0.85rem;
}

.reader-feedback > :first-child,
.reader-feedback__form > :first-child {
  margin-top: 0;
}

.reader-feedback__gloss {
  margin-block: 0.5rem 0.2rem;
  padding: 0.5rem 0.7rem;
  font-size: 0.8em;
}

.reader-feedback__passage {
  margin: 0 0 0.8rem;
  padding-inline-start: 0.8rem;
  border-inline-start: 0.2rem solid var(--md-default-fg-color--lighter);
  color: var(--md-default-fg-color);
  font-style: italic;
}

.reader-feedback__choices {
  margin: 0 0 0.8rem;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.reader-feedback__choices legend {
  padding: 0;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

.reader-feedback__choices label {
  display: block;
  min-height: 44px;
  padding-block: 0.3rem;
  cursor: pointer;
}

.reader-feedback__choices--inline label {
  display: inline-block;
  margin-inline-end: 1rem;
}

.reader-feedback__choices input {
  margin-inline-end: 0.4em;
}

.reader-feedback__field {
  margin-block: 0.6rem;
}

.reader-feedback__field label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.reader-feedback__field textarea,
.reader-feedback__field input[type="email"] {
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  padding: 0.45rem 0.55rem;
  border: 0.05rem solid var(--md-default-fg-color--light);
  border-radius: 0.2rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  font: inherit;
  resize: vertical;
}

.reader-feedback__actions {
  margin-block: 0.6rem;
}

.reader-feedback__submit,
.reader-feedback__cancel {
  min-height: 44px;
  padding: 0.4rem 1rem;
  border: 0.05rem solid var(--md-default-fg-color--light);
  border-radius: 0.2rem;
  background: var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.reader-feedback__submit {
  background: var(--md-typeset-a-color);
  border-color: var(--md-typeset-a-color);
  color: var(--md-primary-bg-color);
}

.reader-feedback__submit--small {
  min-height: 36px;
  padding: 0.25rem 0.7rem;
  font-size: 0.9em;
}

.reader-feedback__submit[disabled],
.reader-feedback__cancel[disabled] {
  opacity: 0.6;
  cursor: default;
}

.reader-feedback__note,
.reader-feedback__session {
  color: var(--md-default-fg-color);
  font-size: 0.85em;
}

.reader-feedback__status:empty {
  display: none;
}

.reader-feedback__status {
  margin-block: 0.4rem 0;
  font-weight: 600;
}

.reader-feedback__status--error {
  padding: 0.4rem 0.6rem;
  border-inline-start: 0.2rem solid var(--md-default-fg-color);
}

.reader-review textarea {
  min-block-size: 4.5rem;
}

@media print {
  @page {
    margin: 18mm;
  }

  .md-content__inner.md-typeset {
    max-width: none;
    font-size: 11pt;
    line-height: 1.55;
  }

  .md-typeset :is(h1, h2, h3, h4, h5, h6) {
    break-after: avoid-page;
    color: var(--md-default-fg-color);
  }

  .md-typeset :is(p, li, dd) {
    orphans: 3;
    widows: 3;
  }

  .reader-guide,
  .reader-terms {
    background: transparent;
    break-inside: avoid-page;
  }

  .reader-terms:not([open]) > :not(summary) {
    display: block !important;
  }

  .reader-terms::details-content {
    height: auto !important;
    content-visibility: visible !important;
  }

  .reader-terms summary {
    min-height: 0;
  }

  .reading-order,
  .reader-pagination,
  .reader-feedback,
  .reader-feedback__button,
  .reader-feedback__form,
  .reader-feedback__gloss,
  .reader-feedback__control {
    display: none;
  }

  .md-typeset abbr {
    border-bottom: 0;
  }
}

/* Verse. A stanza is one paragraph and each verse line its own span, set as
   a block with a hanging indent so a line that wraps on a narrow screen is
   distinguishable from the next line. A verse number, where the text has
   one, sits in the left margin. */
.md-typeset p.verse {
  position: relative;
  padding-inline-start: 2.5rem;
}

.md-typeset .verse-line {
  display: block;
  padding-inline-start: 1.5em;
  text-indent: -1.5em;
}

/* The last line is an inline block so anything the page appends to the
   stanza, such as a reader-feedback button, follows it on the same line
   instead of opening an empty line of its own. */
.md-typeset .verse-line--last {
  display: inline-block;
}

.md-typeset .verse-number {
  position: absolute;
  inset-inline-start: 0;
  min-width: 2rem;
  font-size: 0.8em;
  color: var(--md-default-fg-color--light);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 30em) {
  .md-typeset p.verse {
    padding-inline-start: 1.75rem;
  }

  .md-typeset .verse-number {
    min-width: 1.5rem;
  }
}