/* obl-modal.css — styles the rendered OBL (System Obligations) document shown inside the
   Systems Register Note/Obligations modal.

   The corpus theme CSS (themes/base.css + themes/wi.css) gives a real /view page its document
   typography, but it CAN'T be loaded on this app page: base.css uses broad, unscoped element
   selectors (body, h1-h6, table, th, a, ...) that would restyle the register chrome. So this
   file ports the document typography — scoped under .obl-fragment so it only touches the
   injected OBL body — and gives OBL its own distinct accent: a muted royal violet, deliberately
   separate from Policy gold (#D4A017), AP green (#3D7A1C), WI teal (#15616E), and Forms burgundy.
   The Calibri stack matches the corpus reader so the modal reads like the rest of the corpus. */

.note-modal {
  /* OBL accent palette — scoped to the modal so the Cloud free-text note keeps the --sys color. */
  --obl-accent: #6A4C93;
  --obl-accent-bright: #8260B0;
  --obl-accent-light: #EEE8F6;
  --obl-accent-dark: #4F3870;
}

/* When an OBL document is showing (the .note-modal--wide variant the JS toggles), tint the modal
   chrome with the OBL accent so the whole dialog reads as the OBL tier. */
.note-modal--wide .modal-head {
  border-top: 3px solid var(--obl-accent);
  border-radius: 12px 12px 0 0;
}
.note-modal--wide .modal-eyebrow { color: var(--obl-accent); }
.note-modal .obl-region .acl-note a { color: var(--obl-accent); font-weight: 600; }

/* ───────── Rendered OBL document body ───────── */
.obl-fragment {
  font-family: Calibri, "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: #1F1F1F;
  max-width: none;
  margin: 0;
  padding: 0;
}
.obl-fragment > :first-child { margin-top: 0; }

.obl-fragment h1, .obl-fragment h2, .obl-fragment h3,
.obl-fragment h4, .obl-fragment h5, .obl-fragment h6 {
  font-family: inherit;
  font-weight: 600;
  line-height: 1.25;
  color: var(--obl-accent);
  page-break-after: avoid;
}
.obl-fragment h1 { font-size: 19px;   margin: 22px 0 10px; }
.obl-fragment h2 { font-size: 16.5px; margin: 20px 0 9px; }
.obl-fragment h3 { font-size: 14.5px; margin: 16px 0 7px; }
.obl-fragment h4 { font-size: 13.5px; margin: 13px 0 5px; font-style: italic; color: #1F1F1F; }
.obl-fragment h5, .obl-fragment h6 { font-size: 13px; margin: 11px 0 4px; color: #1F1F1F; }

.obl-fragment p { margin: 0 0 10px; }
.obl-fragment ul, .obl-fragment ol { margin: 0 0 12px; padding-left: 1.6em; }
.obl-fragment li { margin-bottom: 4px; }
.obl-fragment li > ul, .obl-fragment li > ol { margin-top: 4px; margin-bottom: 0; }
/* Governance clause numbering (RomanAlphaListExtension output). */
.obl-fragment ol.roman-list { list-style-type: lower-roman; }
.obl-fragment ol.alpha-list { list-style-type: lower-alpha; }
.obl-fragment em { font-style: italic; }
.obl-fragment strong { font-weight: 700; }

/* Cross-reference links (resolver output: a.gov-xref; external ↗ and broken variants). */
.obl-fragment a { color: var(--obl-accent); }
.obl-fragment a.gov-xref {
  color: var(--obl-accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--obl-accent);
  font-weight: 500;
}
.obl-fragment a.gov-xref:hover { background: var(--obl-accent-light); border-bottom-style: solid; }
.obl-fragment a.gov-xref-external::after { content: "\00A0\2197"; font-size: .85em; }
.obl-fragment a.ref-broken,
.obl-fragment a.gov-xref-broken { color: #B22222; border-bottom: 1px dotted #B22222; }

/* Tables — OBL-accent header, subtle violet zebra, horizontal scroll when wider than the modal. */
.obl-fragment table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 12.5px;
}
.obl-fragment th, .obl-fragment td {
  border: 0.5px solid #DDDDDD;
  padding: 6px 10px;
  text-align: left;
  vertical-align: top;
}
.obl-fragment th { background: var(--obl-accent); color: #FFFFFF; font-weight: 500; }
.obl-fragment tbody tr:nth-child(even) { background: var(--obl-accent-light); }

/* Blockquotes / callouts, rules, media, inline code. */
.obl-fragment blockquote {
  margin: 12px 0;
  padding: 10px 16px;
  background: var(--obl-accent-light);
  border-left: 3px solid var(--obl-accent);
  color: #1F1F1F;
}
.obl-fragment blockquote p:last-child { margin-bottom: 0; }
.obl-fragment hr { border: 0; border-top: 1px solid #DDDDDD; margin: 18px 0; }
.obl-fragment img, .obl-fragment svg { max-width: 100%; height: auto; }
.obl-fragment code {
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  background: #F5F5F5;
  padding: 1px 4px;
  border-radius: 2px;
}