:root{
  /* Change this to control when horizontal scroll is needed (the table's min width) */
  --hoa-mtg-min-width: 704px;
  --hoa-mtg-sticky-bg: #fff;
  --hoa-mtg-accent: #b0006f;
  --hoa-mtg-border: #e2d3e0;
  --hoa-mtg-head-bg: #faf5f9;
  --hoa-mtg-text-muted: #666;
  --hoa-mtg-shadow: rgba(0,0,0,.08);
}

.hoa-mtg-table{margin:0 0 1rem;}
.hoa-mtg-heading{color:var(--hoa-mtg-accent);font-weight:700;margin:0 0 .5rem}

/* Scroll wrapper */
.hoa-mtg-scroll{
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  position: relative;

  /* keep layout stable without adding a left indent */

  contain: layout paint;
  overscroll-behavior: contain;

  /* ensure no extra inset */
  border-left: 0;
  padding-inline-start: 0;
  margin-inline-start: 0;
}



/* Base table */
.hoa-mtg{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-top: 1px solid var(--hoa-mtg-border);
  font-family: inherit;
  min-width: var(--hoa-mtg-min-width);
}


.hoa-mtg th,
.hoa-mtg td{
  border-right: 1px solid var(--hoa-mtg-border);
  border-bottom: 1px solid var(--hoa-mtg-border);
  padding:.25rem .5rem;
  vertical-align:middle;
  height: 32px;
  background: #fff; /* default; sticky col overrides below */
  font-size: .875rem;
}
.hoa-mtg th {
  height: 48px;
}

.hoa-mtg thead th{
  background:var(--hoa-mtg-head-bg);
  font-weight:600;
  text-align:left;
  padding-right: 24px;
}

/* Sticky first column (correct stacking, no overlap) */
.hoa-mtg--sticky-first th:first-child,
.hoa-mtg--sticky-first td:first-child{
  position: sticky;
  left: 0;
  background: var(--hoa-mtg-sticky-bg);
  z-index: 6;           /* higher than other headers/cells */
  isolation: isolate;   /* own stacking context (WebKit sanity) */
  border-left: 1px solid var(--hoa-mtg-border);
}

/* All headers above body, but first header cell above them all */
.hoa-mtg--sticky-first thead th{
  position: relative;
  z-index: 4;
}
.hoa-mtg--sticky-first thead th:first-child{
  z-index: 7;
  background:var(--hoa-mtg-head-bg);
}


/* A subtle divider shadow on the right of the sticky col for depth */
.hoa-mtg--sticky-first th:first-child::after,
.hoa-mtg--sticky-first td:first-child::after{
  content:"";
  position:absolute;
  top:0; right:-1px; bottom:0;
  width: 8px;
  pointer-events:none;
  background: linear-gradient(to right, rgba(0,0,0,0.06), rgba(0,0,0,0));
  opacity:.25;
  z-index: 8; 
}

/* Helpful min-widths to encourage horizontal scroll when needed */
.hoa-mtg thead th:first-child,
.hoa-mtg tbody td:first-child{
  min-width: 119px; /* Lender column width */
}

/* Footnote + misc */
.hoa-mtg-sublabel{color:var(--hoa-mtg-text-muted);font-size:.9em}
.hoa-mtg-footnote{margin-top:4px;font-size:.875rem;color:var(--hoa-mtg-text-muted)}
.hoa-mtg-error{color:#a00}


/* === Info icon + tooltip (CSS-only, mobile-friendly) === */
/* === Info icon + tooltip (CSS-only, mobile-friendly, no cropping) === */
.hoa-mtg-info{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  margin-left:6px;
  width:16px; height:16px;
  line-height:16px;
  border-radius:50%;
  font-size:11px; font-weight:700;
  color:var(--hoa-mtg-accent);
  border:1px solid var(--hoa-mtg-accent);
  background:#fff;
  cursor:pointer;                /* hand cursor */
  position:relative;
  padding:0;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
  z-index: 6;                    /* above header content */
}

.hoa-mtg--sticky-first thead th{
  position:relative;
  z-index:5; /* header above body cells */
}

/* Tiny circle “?” icon */
.has-info-icon {
  position: relative; /* makes the th the positioning container */
  text-align: left;   /* optional, adjust as needed */
  padding-right: 1.5rem; /* add some breathing room */
}

.info-icon {
  position: absolute;
  top: 16px;
  right: 4px;    /* distance from right */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border: 1px solid #D80080;
  border-radius: 50%;
  font-size: .65rem;
  color: #D80080;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
  line-height: 1;
}


/* Tooltip */
.info-box {
  position: absolute;
  z-index: 3000;
  max-width: 320px;
  background: #4F145B;
  color: #fff;
  border-radius: 6px;
  padding: 10px 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  font-size: 14px;
  line-height: 1.35;
  pointer-events: none;
  transform: translateY(0);
  font-family: -apple-system,BlinkMacSystemFont,Segoe,"Segoe UI","Droid Sans",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",Helvetica,Arial,sans-serif;

  /* new: arrow position fed by JS */
  --arrow-left: 16px; /* default fallback */
  --arrow-half: 6px;
}

/* Arrow */
.info-box::after {
  content: "";
  position: absolute;
  width: 0; height: 0;
  border: 6px solid transparent;
}

/* Bottom placement: arrow on top edge, horizontally at --arrow-left */
.info-box[data-placement="bottom"]::after{
  top:-12px;
  left: calc(var(--arrow-left) - var(--arrow-half));
  border-bottom-color:#4F145B;
}
.info-box[data-placement="top"]::after{
  bottom:-12px;
  left: calc(var(--arrow-left) - var(--arrow-half));
  border-top-color:#4F145B;
}

/* Mobile: widen box a bit, arrow still tracks via --arrow-left */
@media (max-width: 480px) {
  .info-box { max-width: min(90vw, 360px); }
}