/* Maui Snorkeling TOC – scoped styles (.mstoc only) with built-in skins */
/* Base reset: no bullets, clean spacing */
.mstoc .ms-toc__title { font-weight: 700; margin: 0 0 .5rem; font-size: 1rem; }
.mstoc .ms-toc__list,
.mstoc .ms-toc__list ul,
.mstoc .ms-toc__list ol,
.mstoc .ms-toc__list li { list-style: none !important; margin: 0; padding: 0; }
.mstoc .ms-toc__list li::marker { content: "" !important; }
.mstoc .ms-toc__list li::before { content: none; }
.mstoc .ms-toc__item { line-height: 1.5; margin: .4rem 0; }
.mstoc a { text-decoration: none; }
.mstoc a:hover, .mstoc a:focus { text-decoration: underline; }

/* Indent only for level-3 (no vertical lines) */
.mstoc .ms-toc__list.level-3 { margin-top: .25rem; padding-left: 1.25rem; border-left: 0 !important; }

/* Skin: Card (soft background, subtle shadow) */
.mstoc.mstoc--card {
  background: #f8fafc;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.06);
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}

/* Skin: Outline (NUMBERED, light blue box) */
.mstoc.mstoc--outline {
  background: #eef6ff;           /* soft blue panel similar to screenshot */
  border: 1px solid #cfe0f5;     /* thin blue-gray outline */
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}

/* Numbering using CSS counters to produce 1., 1.1., etc. */
.mstoc.mstoc--outline .ms-toc__list.level-2 { counter-reset: mstoc-section; }
.mstoc.mstoc--outline .ms-toc__item.level-2 { counter-increment: mstoc-section; counter-reset: mstoc-subsection; }
.mstoc.mstoc--outline .ms-toc__item.level-2 > a::before {
  content: counter(mstoc-section) ". ";
  font-weight: 700;
  margin-right: .25rem;
}
.mstoc.mstoc--outline .ms-toc__item.level-2 > .ms-toc__list.level-3 { counter-reset: mstoc-subsection; }
.mstoc.mstoc--outline .ms-toc__item.level-3 { counter-increment: mstoc-subsection; }
.mstoc.mstoc--outline .ms-toc__item.level-3 > a::before {
  content: counter(mstoc-section) "." counter(mstoc-subsection) ". ";
  font-weight: 600;
  margin-right: .25rem;
}

/* Skin: Accent stripe (kept as option) */
.mstoc.mstoc--accent {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  padding: 1rem 1.25rem 1rem 1.25rem;
  margin: 1.25rem 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.mstoc.mstoc--accent::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #10b981, #06b6d4);
  border-radius: 12px 0 0 12px;
}