/* =============================================================================
   Handbook reader — design-system component #13.
   Geometry and colour follow the approved mockup's .hb-* rules; tokens come from
   the plugin's --mers-md-* custom properties so the settings page can retint it.
   ============================================================================= */

.mers-hb {
  --hb-navy: var(--mers-md-navy, #172368);
  --hb-navy-dark: var(--mers-md-navy-dark, #0d2945);
  --hb-border: var(--mers-md-border, #d7ddea);
  --hb-tint: #eef2f8;
  --hb-offwhite: #f8fafc;
  --hb-mid: #6a7181;
  --hb-ink: #27314a;
  --hb-serif: Georgia, "Times New Roman", serif;
  --hb-sans: system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* ---------- document tabs ---------- */
.mers-hb__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.mers-hb__tab {
  border: 1px solid var(--hb-border);
  background: #fff;
  color: var(--hb-navy);
  font-family: var(--hb-sans);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.25;
  text-align: left;
  padding: 15px 14px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.mers-hb__tab:hover { background: var(--hb-tint); }
.mers-hb__tab.is-active {
  background: var(--hb-navy);
  border-color: var(--hb-navy);
  color: #fff;
}

/* ---------- provenance note ---------- */
.mers-hb__note {
  font-size: .85rem;
  line-height: 1.55;
  color: var(--hb-mid);
  background: var(--hb-offwhite);
  border: 1px solid var(--hb-border);
  border-left: 4px solid var(--mers-md-gold, #ebc319);
  border-radius: 4px;
  padding: 12px 14px;
  margin: 0 0 16px;
}

/* ---------- search ---------- */
.mers-hb__searchrow {
  border: 1px solid var(--hb-border);
  background: #fff;
  border-radius: 4px;
  padding: 14px;
}
.mers-hb__search {
  width: 100%;
  border: 1px solid #b7c5cc;
  border-radius: 4px;
  padding: 12px 13px;
  font-family: var(--hb-sans);
  font-size: 1rem;
  color: var(--hb-ink);
  background: #fff;
}
.mers-hb__search:focus {
  border-color: var(--hb-navy);
  outline: 2px solid var(--hb-tint);
}
.mers-hb__count {
  font-size: .84rem;
  color: var(--hb-mid);
  margin: 7px 0 0;
}

/* ---------- shell ---------- */
.mers-hb__shell {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin-top: 18px;
}

/* ---------- table of contents ---------- */
.mers-hb__toc {
  border: 1px solid var(--hb-border);
  background: #fff;
  border-radius: 4px;
  max-height: 720px;
  overflow: auto;
  min-width: 0;
}
.mers-hb__toch {
  margin: 0;
  padding: 15px 14px;
  background: var(--hb-offwhite);
  color: var(--hb-navy);
  font-family: var(--hb-sans);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.35;
  border-bottom: 1px solid var(--hb-border);
}
.mers-hb__tocitem {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid #e7eaf0;
  background: #fff;
  padding: 11px 12px;
  color: var(--hb-ink);
  font-family: var(--hb-sans);
  font-size: .87rem;
  line-height: 1.35;
  height: auto;
  white-space: normal;
  cursor: pointer;
}
.mers-hb__tocitem strong { color: var(--hb-navy); }
.mers-hb__tocitem:hover,
.mers-hb__tocitem.is-active { background: var(--hb-tint); color: var(--hb-navy); }
.mers-hb__tocitem[hidden] { display: none; }

/* ---------- reader ---------- */
.mers-hb__reader {
  border: 1px solid var(--hb-border);
  background: #fff;
  border-radius: 4px;
  padding: 24px;
  min-height: 520px;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: break-word;
}
.mers-hb__kicker {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-family: var(--hb-sans);
  font-size: .76rem;
  font-weight: 800;
  color: var(--hb-mid);
  margin: 0;
}
.mers-hb__title {
  color: var(--hb-navy);
  font-family: var(--hb-serif);
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 7px 0 18px;
  padding: 0;
}
/* Verbatim statutory text: newlines are meaningful, so pre-wrap. */
.mers-hb__text {
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: break-word;
  font-family: Arial, Helvetica, sans-serif;
  font-size: .94rem;
  line-height: 1.62;
  color: #252a34;
}
.mers-hb__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  border-top: 1px solid #e1e5ec;
  padding-top: 18px;
  margin-top: 22px;
}
.mers-hb__prevnext {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}
.mers-hb__prevnext .mers-btn[disabled] { opacity: .45; cursor: default; }
.mers-hb__empty { color: var(--hb-mid); font-size: .95rem; margin: 18px 0 0; }

/* ---------- progressive enhancement ----------
   Without JS every section stays in the flow, so the page reads as a complete
   document. `is-enhanced` (added by handbook.js) is what turns it into a reader. */
.mers-hb.is-enhanced .mers-hb__section { display: none; }
.mers-hb.is-enhanced .mers-hb__section.is-active { display: block; }
.mers-hb.is-enhanced .mers-hb__tocdoc { display: none; }
.mers-hb.is-enhanced .mers-hb__tocdoc.is-active { display: block; }
.mers-hb:not(.is-enhanced) .mers-hb__prevnext,
.mers-hb:not(.is-enhanced) .mers-hb__searchrow { display: none; }
.mers-hb:not(.is-enhanced) .mers-hb__section + .mers-hb__section { border-top: 1px solid var(--hb-border); margin-top: 26px; padding-top: 26px; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .mers-hb__shell { grid-template-columns: 1fr; }
  .mers-hb__toc { max-height: 360px; }
  .mers-hb__tabs { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .mers-hb__reader { padding: 18px 16px; }
  .mers-hb__title { font-size: 1.35rem; }
  .mers-hb__actions .mers-btn,
  .mers-hb__prevnext .mers-btn { flex: 1 1 auto; text-align: center; }
}

/* ---------- print: the reader panel only ---------- */
@media print {
  .mers-hb__tabs, .mers-hb__searchrow, .mers-hb__toc, .mers-hb__actions,
  .mers-hb__prevnext, .mers-hb__note { display: none !important; }
  .mers-hb__shell { display: block; }
  .mers-hb__reader { border: 0; padding: 0; }
}

/* ---------- imported sections: paragraphs and rebuilt tables ----------
   Sections imported from a PDF/.docx (1.1.0+) arrive as HTML rather than
   pre-wrapped text, so this variant restores normal whitespace handling. */
.mers-hb__text--html { white-space: normal; }
.mers-hb__text--html p { margin: 0 0 1em; }
.mers-hb__text--html p:last-child { margin-bottom: 0; }
.mers-hb__table {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
  font-size: .9rem;
  line-height: 1.45;
}
.mers-hb__table th,
.mers-hb__table td {
  border: 1px solid var(--hb-border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: top;
}
.mers-hb__table th {
  background: var(--hb-tint);
  color: var(--hb-navy);
  font-weight: 700;
}
.mers-hb__table tr:nth-child(even) td { background: var(--hb-offwhite); }
@media (max-width: 640px) {
  .mers-hb__text--html { overflow-x: auto; }
  .mers-hb__table { min-width: 480px; }
}

/* ---------- admin preview ---------- */
.mers-hb--preview .mers-hb__tabs--single { grid-template-columns: minmax(0, 1fr); }
.mers-hb--preview .mers-hb__tab { cursor: default; }

/* ---------- sub-section titles and provenance lines ----------
   Mirrors Laws, Rules & Guidelines (review request 2026-09-15): sub-section
   titles bold + underlined so the break between them is visible; "Revised on"
   lines italic; the index of titles that opens a Municode section as a list. */
.mers-hb__subtitle,
p.mers-hb__subtitle {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  color: var(--hb-navy);
}
span.mers-hb__subtitle { display: inline-block; margin-top: .35em; }
.mers-hb__revised,
p.mers-hb__revised {
  font-style: italic;
  color: var(--hb-mid);
}
.mers-hb__subindex {
  display: inline-block;
  color: var(--hb-navy);
  font-size: .9em;
  padding-left: 1.1em;
  position: relative;
}
.mers-hb__subindex::before { content: "•"; position: absolute; left: .2em; color: var(--hb-mid); }