/* 慧灯: 慈诚罗珠堪布的慧灯之光、慧灯问道 (online_articles/huideng.py).

   Kept visibly apart from the site's own teaching, which is 索达吉堪布's: a cool
   slate-teal where the rest of the site is ochre, and a book's contents page
   rather than a 公众号 feed. The article page borrows the 公众号 reader's bar,
   body and prev/next cards from wechat.css and only adds what is its own. */

:root {
  --hd-ink: #23343a;
  --hd-muted: #5d6f75;
  --hd-accent: #2f6f73;
  --hd-accent-soft: #e6f0ef;
  --hd-line: #cfdcdb;
  --hd-paper: #fbfdfc;
  /* The text's own sheet: a soft grey-green rather than white, so a long
     chapter does not glare. */
  --hd-sheet: #f6f8f3;
  --hd-read-width: 1280px;
}

.hd-page {
  color: var(--hd-ink);
  margin: 0 auto;
  max-width: 1080px;
  padding: 16px 16px 40px;
}

.hd-crumbs {
  color: var(--hd-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  gap: 6px;
}

.hd-crumbs a {
  color: var(--hd-accent);
}

.hd-head {
  border-bottom: 2px solid var(--hd-accent);
  margin: 12px 0 18px;
  padding-bottom: 12px;
}

.hd-head__title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0;
}

.hd-head__author {
  color: var(--hd-accent);
  font-size: 16px;
  margin: 4px 0 0;
}

.hd-head__lead {
  color: var(--hd-muted);
  font-size: 15px;
  line-height: 1.7;
  margin: 8px 0 0;
}

.hd-search {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.hd-search__box {
  border: 1px solid var(--hd-line);
  border-radius: 8px;
  flex: 1 1 200px;
  font-size: 15px;
  min-width: 0;
  padding: 7px 10px;
}

.hd-search__go {
  background-color: var(--hd-accent);
  border: 0;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  padding: 7px 16px;
}

.hd-search__clear,
.hd-found {
  align-self: center;
  color: var(--hd-muted);
  font-size: 14px;
}

.hd-section {
  margin-top: 22px;
}

.hd-section__title {
  background-color: var(--hd-accent-soft);
  border-left: 4px solid var(--hd-accent);
  border-radius: 4px;
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
  padding: 6px 12px;
}

.hd-toc {
  counter-reset: hd-toc;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hd-toc__item {
  border-bottom: 1px dashed var(--hd-line);
  counter-increment: hd-toc;
  display: flex;
  gap: 10px;
  padding: 7px 4px;
  position: relative;
  transition: background-color 0.15s ease;
}

/* The whole row opens the article, number and blank to its right included:
   the link stretches over the row. */
.hd-toc__item:hover,
.hd-toc__item:focus-within {
  background-color: var(--hd-accent-soft);
}

.hd-toc__item::before {
  color: var(--hd-muted);
  content: counter(hd-toc);
  flex: 0 0 2em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.hd-toc__item a {
  color: var(--hd-ink);
  line-height: 1.6;
}

.hd-toc__item a::after {
  content: "";
  inset: 0;
  position: absolute;
}

.hd-toc__item a:hover,
.hd-toc__item:hover a {
  color: var(--hd-accent);
  text-decoration: none;
}

.hd-toc__item a:focus-visible {
  outline: none;
}

.hd-toc__item a:focus-visible::after {
  outline: 2px solid var(--hd-accent);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .hd-toc__item {
    transition: none;
  }
}

.hd-series {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The whole card is the way in: the name's link is stretched over it. */
.hd-series__item {
  background-color: var(--hd-paper);
  border: 1px solid var(--hd-line);
  border-radius: 12px;
  border-top: 4px solid var(--hd-accent);
  padding: 14px 16px;
  position: relative;
  transition:
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.hd-series__item:hover,
.hd-series__item:focus-within {
  box-shadow: 0 6px 18px rgb(35 52 58 / 12%);
  transform: translateY(-2px);
}

.hd-series__name {
  color: var(--hd-accent);
  font-size: 20px;
  font-weight: 700;
}

.hd-series__name::after {
  border-radius: 12px;
  content: "";
  inset: 0;
  position: absolute;
}

.hd-series__name:hover,
.hd-series__name:focus {
  text-decoration: none;
}

.hd-series__name:focus-visible {
  outline: none;
}

.hd-series__name:focus-visible::after {
  outline: 2px solid var(--hd-accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .hd-series__item {
    transition: none;
  }

  .hd-series__item:hover,
  .hd-series__item:focus-within {
    transform: none;
  }
}

.hd-series__lead {
  color: var(--hd-muted);
  font-size: 14px;
  line-height: 1.7;
  margin: 6px 0 0;
}

.hd-series__count {
  color: var(--hd-muted);
  font-size: 13px;
  margin: 8px 0 0;
}

.hd-recent {
  background-color: var(--hd-accent-soft);
  border-radius: 12px;
  margin-bottom: 18px;
  padding: 12px 16px;
}

.hd-recent__head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}

.hd-recent__title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 6px 0 0;
}

.hd-mine {
  background-color: var(--hd-paper);
  border: 1px solid var(--hd-line);
  border-radius: 999px;
  color: var(--hd-accent);
  font-size: 14px;
  padding: 3px 12px;
}

.hd-mine:hover,
.hd-mine:focus {
  border-color: var(--hd-accent);
  text-decoration: none;
}

.hd-recent__sub {
  color: var(--hd-muted);
  font-size: 14px;
  font-weight: 600;
  margin: 12px 0 2px;
}

/* 我的慧灯收藏 and 高亮笔记 are the 公众号 lists' pages on 慧灯's shelf: the
   same cards, in 慧灯's slate-teal. */
.hd-shelf .hd-crumbs {
  margin-bottom: 8px;
}

.hd-shelf .wx-head__title,
.hd-shelf .fbm-head__title {
  color: var(--hd-ink);
}

.hd-shelf .wx-card__title,
.hd-shelf .fbm-card__title,
.hd-shelf .fbm-card__open,
.hd-shelf .fbm-link,
.hd-shelf .wx-mine-btn,
.hd-shelf .wx-card__portal {
  color: var(--hd-accent);
}

.hd-recent__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hd-recent__item {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  padding: 4px 0;
}

.hd-recent__name {
  color: var(--hd-accent);
}

.hd-recent__where {
  color: var(--hd-muted);
  font-size: 13px;
}

.hd-empty,
.hd-note {
  color: var(--hd-muted);
  font-size: 14px;
  margin-top: 24px;
}

.hd-note a {
  color: var(--hd-accent);
}

.hd-ext {
  font-size: 0.75em;
  margin-left: 2px;
}

/* The article page. Wider than a 公众号 article's 800px (站长 10-18): these
   are long chapters read at a desk as often as on a phone. As wide as a
   学习页 lesson that is text alone, the one the 站长 pointed to. */

.wx-article.hd-article {
  max-width: var(--hd-read-width);
}

.hd-article__head {
  border-bottom: 2px solid var(--hd-accent);
  margin: 14px 0 4px;
  padding-bottom: 10px;
  text-align: center;
}

.hd-article__series {
  color: var(--hd-muted);
  font-size: 14px;
  margin: 0;
}

.hd-article__title {
  color: var(--hd-ink);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  margin: 6px 0 0;
}

.hd-article__author {
  color: var(--hd-accent);
  font-size: 15px;
  margin: 6px 0 0;
}

.hd-article__body {
  background-color: var(--hd-sheet);
  border: 1px solid var(--hd-line);
  border-radius: 12px;
  color: var(--hd-ink);
  /* 阅读设置's one size for the site, as on a 法本 and the 学习页: A-/A+ in the
     bar change it, and a reader who set it there finds it here. */
  font-size: var(--reading-font-size, 1.15em);
  line-height: 2.2;
  margin-top: 12px;
  padding: 22px 26px;
}

.hd-article__body p {
  margin: 0 0 0.9em;
  text-indent: 2em;
}

.hd-article__body h2,
.hd-article__body h3,
.hd-article__body h4 {
  font-weight: 700;
  line-height: 1.6;
  margin: 1.2em 0 0.6em;
  text-indent: 0;
}

.hd-article__body h2 {
  font-size: 1.15em;
}

.hd-article__body h3,
.hd-article__body h4 {
  font-size: 1.05em;
}

/* 慧灯问道: who is speaking (the import script in
   .claude/workspace/imports/huideng-wendao-20261018). A turn opens with its
   speaker's name; the paragraphs that go on with it carry the same kind
   without the name. K is h 主持人, q 观众 (whoever asks), g a guest, a 堪布.
   堪布's words read as the text; the host's are quieter, and a question is set
   off by a bar so the eye finds where each answer starts. */
.hd-article__body p.hd-turn {
  margin-top: 1.1em;
  text-indent: 0;
}

.hd-who {
  background-color: var(--hd-accent-soft);
  border-radius: 4px;
  color: var(--hd-accent);
  display: inline-block;
  font-size: 0.78em;
  font-weight: 700;
  line-height: 1.7;
  margin-right: 8px;
  padding: 0 7px;
  text-indent: 0;
  vertical-align: 0.1em;
}

.hd-turn--a .hd-who {
  background-color: var(--hd-accent);
  color: #fff;
}

.hd-turn--q .hd-who,
.hd-turn--g .hd-who {
  background-color: #efe9dc;
  color: #7a5a2a;
}

.hd-article__body p.hd-turn--h {
  color: var(--hd-muted);
}

.hd-article__body p.hd-turn--q {
  border-left: 3px solid #e3d6bb;
  padding-left: 0.8em;
}

/* The numbers the book puts between rounds of questions. */
.hd-article__body p.hd-round {
  align-items: center;
  color: var(--hd-muted);
  display: flex;
  font-size: 0.85em;
  gap: 12px;
  justify-content: center;
  margin: 1.6em 0 0.6em;
  text-indent: 0;
}

.hd-article__body p.hd-round::before,
.hd-article__body p.hd-round::after {
  border-top: 1px solid var(--hd-line);
  content: "";
  width: 48px;
}

.hd-article__body p.hd-sign {
  text-align: right;
  text-indent: 0;
}

.hd-article__body .jisong {
  margin: 0.6em 0 0.9em;
  text-align: center;
  text-indent: 0;
}

/* What the books print besides plain paragraphs (see the extract script in
   .claude/workspace/imports/huideng-zhiguang-20261018). */
.hd-article__body p.hd-quote {
  border-left: 3px solid var(--hd-line);
  color: var(--hd-muted);
  padding-left: 12px;
  text-indent: 0;
}

.hd-article__body p.hd-sub,
.hd-article__body p.hd-center,
.hd-article__body p.hd-caption {
  text-align: center;
  text-indent: 0;
}

.hd-article__body p.hd-sub {
  color: var(--hd-muted);
}

.hd-article__body p.hd-caption {
  color: var(--hd-muted);
  font-size: 0.85em;
}

.hd-article__body p.hd-li {
  text-indent: 0;
}

/* 藏文 · 音译 · 汉译: a liturgy's three lines, kept as a group. */
.hd-article__body p.hd-tib,
.hd-article__body p.hd-yin,
.hd-article__body p.hd-yi {
  margin: 0;
  text-indent: 0;
}

.hd-article__body p.hd-tib {
  font-size: 1.15em;
  margin-top: 0.7em;
}

.hd-article__body p.hd-yin {
  color: var(--hd-accent);
}

.hd-article__body p.hd-yi {
  color: var(--hd-muted);
  margin-bottom: 0.4em;
}

.hd-article__body p.hd-pic {
  text-align: center;
  text-indent: 0;
}

.hd-img {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

.hd-glyph {
  display: inline;
  height: 1em;
  vertical-align: -0.12em;
  width: auto;
}

.hd-fnref a {
  color: var(--hd-accent);
  font-size: 0.8em;
  padding: 0 1px;
}

.hd-article__body p.hd-fn {
  border-top: 1px dashed var(--hd-line);
  color: var(--hd-muted);
  font-size: 0.85em;
  margin: 0;
  padding-top: 6px;
  text-indent: 0;
}

.hd-article__body p.hd-fn + p.hd-fn {
  border-top: 0;
}

.hd-source {
  border-top: 1px solid var(--hd-line);
  color: var(--hd-muted);
  font-size: 14px;
  line-height: 1.8;
  margin-top: 18px;
  padding-top: 12px;
}

.hd-source a {
  color: var(--hd-accent);
}

.hd-source__video {
  background-color: var(--hd-accent);
  border-radius: 8px;
  color: #fff !important;
  display: inline-block;
  font-size: 15px;
  margin-bottom: 8px;
  padding: 7px 14px;
}

.hd-source__line {
  margin: 0;
}

@media (max-width: 640px) {
  .hd-article__body {
    padding: 16px 14px;
  }

  .hd-article__title {
    font-size: 21px;
  }
}

/* 目录 drawer (huideng-toc.js). It comes in the way the 学习页's 本专业课程
   drawer does (major_drawer.css): the scrim fades, the panel slides, 0.2s -
   from the right here, the side its handles are on. Closed it stays hidden
   until the slide out has finished, and out of the tab order. */
.hd-drawer {
  inset: 0;
  position: fixed;
  transition: visibility 0s linear 0.2s;
  visibility: hidden;
  z-index: 90;
}

.hd-drawer.is-open {
  transition-delay: 0s;
  visibility: visible;
}

.hd-drawer__scrim {
  background-color: rgb(20 30 34 / 35%);
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity 0.2s ease;
}

.hd-drawer.is-open .hd-drawer__scrim {
  opacity: 1;
}

.hd-drawer__panel {
  background-color: var(--hd-paper);
  box-shadow: -4px 0 18px rgb(0 0 0 / 15%);
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 92vw;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: transform 0.2s ease;
  width: 380px;
}

.hd-drawer.is-open .hd-drawer__panel {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .hd-drawer,
  .hd-drawer__scrim,
  .hd-drawer__panel {
    transition: none;
  }
}

.hd-drawer__head {
  align-items: center;
  border-bottom: 1px solid var(--hd-line);
  display: flex;
  justify-content: space-between;
  padding: 12px 16px;
}

.hd-drawer__title {
  color: var(--hd-ink);
  font-size: 17px;
  font-weight: 700;
}

.hd-drawer__close {
  background: none;
  border: 0;
  color: var(--hd-muted);
  font-size: 18px;
}

.hd-drawer__tabs {
  display: flex;
  gap: 6px;
  padding: 10px 16px 0;
}

.hd-drawer__tab {
  background: none;
  border: 1px solid var(--hd-line);
  border-radius: 999px;
  color: var(--hd-muted);
  font-size: 14px;
  padding: 3px 14px;
}

.hd-drawer__tab[aria-selected="true"] {
  background-color: var(--hd-accent);
  border-color: var(--hd-accent);
  color: #fff;
}

.hd-drawer__tab[hidden] {
  display: none;
}

.hd-drawer__here,
.hd-drawer__book {
  flex: 1;
  list-style: none;
  margin: 0;
  overflow-y: auto;
  padding: 10px 16px 24px;
}

.hd-drawer__here[hidden],
.hd-drawer__book[hidden] {
  display: none;
}

.hd-drawer__h a,
.hd-drawer__list a,
.hd-drawer__here-item {
  color: var(--hd-ink);
  display: block;
  font-size: 15px;
  line-height: 1.5;
  padding: 5px 0;
}

.hd-drawer__h--h3 {
  padding-left: 1em;
}

.hd-drawer__h--h4 {
  padding-left: 2em;
}

.hd-drawer__h--h4 a {
  color: var(--hd-muted);
  font-size: 14px;
}

.hd-drawer__section {
  color: var(--hd-accent);
  font-size: 14px;
  font-weight: 700;
  margin: 12px 0 2px;
}

.hd-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hd-drawer__here-item {
  background-color: var(--hd-accent-soft);
  border-radius: 6px;
  color: var(--hd-accent);
  font-weight: 700;
  padding-left: 6px;
}

.hd-drawer-open {
  overflow: hidden;
}

/* Where the 🖍 handle sits (faben_read.css .fb-marks-fab), or under it when
   that one is showing. */
.hd-toc-fab {
  --fab-edge: 18px;
  align-items: center;
  background-color: var(--hd-paper);
  border: 1px solid var(--hd-line);
  border-radius: 999px;
  box-shadow: 0 3px 14px rgb(35 52 58 / 18%);
  color: var(--hd-accent);
  cursor: pointer;
  display: inline-flex;
  font-size: 18px;
  height: 44px;
  justify-content: center;
  position: fixed;
  right: var(--fab-edge);
  top: 68px;
  width: 44px;
  z-index: 80;
}

body:has(.fb-marks-fab:not([hidden])) .hd-toc-fab {
  top: 122px;
}

.hd-toc-fab[hidden] {
  display: none;
}

/* On a wide window both handles sit just outside the reading column rather
   than at the window's edge, a long way from the text they belong to. */
@media screen and (min-width: 1480px) {
  .hd-toc-fab,
  .hd-article .fb-marks-fab {
    --fab-edge: max(18px, calc((100vw - var(--hd-read-width)) / 2 - 62px));
  }
}

.hd-drawer-open .hd-toc-fab {
  display: none;
}