/* BPHS Course v2 -- Learning Experience Redesign styles.
   Generated-output companion to generate_site.py; edit here, not in docs/assets/. */

/* ---- Original BPHS source text: visually distinct "parchment" callout ---- */
.md-typeset .admonition.quote,
.md-typeset details.quote {
  border-color: #b08d57;
  background-color: #faf3e4;
  border-width: 1px;
  border-left-width: 6px;
}
.md-typeset .admonition.quote > .admonition-title,
.md-typeset details.quote > summary.admonition-title {
  background-color: #f0e2c4;
  border-color: #b08d57;
}
.md-typeset .admonition.quote > .admonition-title::before,
.md-typeset details.quote > summary::before {
  background-color: #8a6d3b;
}
[data-md-color-scheme="slate"] .md-typeset .admonition.quote,
[data-md-color-scheme="slate"] .md-typeset details.quote {
  background-color: #2b2416;
  border-color: #8a6d3b;
}
[data-md-color-scheme="slate"] .md-typeset .admonition.quote > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset details.quote > summary.admonition-title {
  background-color: #3a2f1c;
}

/* Devanagari + long verse lines must wrap, never force horizontal page scroll */
.md-typeset .admonition.quote p,
.md-typeset details.quote p {
  overflow-wrap: break-word;
  word-break: normal;
}

/* ---- Chapter completion checklist card ---- */
.chapter-checklist {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.4rem;
  padding: 0.8rem 1rem;
  margin: 1rem 0;
  background-color: var(--md-code-bg-color);
}
.chapter-checklist .task-list-item {
  margin: 0.4rem 0;
  font-size: 0.95rem;
}
.chapter-checklist input[type="checkbox"] {
  width: 1.2rem;
  height: 1.2rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* ---- Continue Studying card / Progress page widgets ---- */
#continue-studying-card {
  border: 1px solid var(--md-accent-fg-color);
  border-radius: 0.4rem;
  padding: 0.8rem 1rem;
  background-color: var(--md-code-bg-color);
}
#continue-studying-card a.continue-btn,
.continue-btn {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: var(--md-accent-fg-color);
  color: var(--md-accent-bg-color, #fff);
  border-radius: 0.3rem;
  text-decoration: none;
  font-weight: 600;
}
#progress-table table,
#progress-summary table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
}
#progress-export-import button {
  padding: 0.4rem 0.8rem;
  margin-right: 0.5rem;
  border-radius: 0.3rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  background-color: var(--md-code-bg-color);
  cursor: pointer;
}

/* ---- General overflow safety for wide tables anywhere on a chapter page ---- */
.md-typeset table:not([class]) {
  display: block;
  overflow-x: auto;
}

/* ---- Future-semester ("Coming Soon") nav entries ----
   The "(Coming Soon)" wording lives in the nav label itself, not in a CSS
   ::after badge -- Material rewrites the active page's own nav href to
   "./", so an href-matched pseudo-element would disappear on exactly the
   page whose status matters most. This rule only adds the *secondary*
   visual treatment on top of text that is already there, so when it
   doesn't match (the active entry) the label still reads correctly.
   --md-default-fg-color--light is palette-aware and therefore legible
   against both the default and slate schemes, unlike a hardcoded grey. */
.md-nav__link[href$="semester-2/"],
.md-nav__link[href$="semester-3/"],
.md-nav__link[href$="semester-2.html"],
.md-nav__link[href$="semester-3.html"] {
  color: var(--md-default-fg-color--light);
  font-weight: 400;
}

/* ---- Concept Map "future" (not-yet-taught) placeholder nodes ----
   Mermaid's own classDef sets color:#fff on these nodes, but that value is
   only ever *inherited* by the label text -- and Material's own mermaid
   label-color rule targets the label element directly, so it wins over the
   inherited value regardless of the site's light/dark palette (an inherited
   value always loses to any rule that targets the element itself). Setting
   the foreground and background explicitly here, rather than leaving the
   text color to inheritance, is what actually makes it stick in both
   themes. */
.mermaid .node.future .nodeLabel,
.mermaid .node.future foreignObject div,
.mermaid .node.future foreignObject span,
.mermaid .node.future tspan,
.mermaid .node.future text {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.mermaid .node.future rect,
.mermaid .node.future circle,
.mermaid .node.future ellipse,
.mermaid .node.future polygon,
.mermaid .node.future path {
  fill: #3a3a3a !important;
  stroke: #888888 !important;
}