/* Base font for standalone conc pages */
body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

/* Make concordance tables use the same font and line-height even when lmgg.css is present */
table.outer,
table.outer th,
table.outer td {
  font-family: Helvetica, Arial, sans-serif;
  line-height: normal;
}

/* Core concordance table layout */
table.outer {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

table.outer th,
table.outer td {
  border: 2px solid #444;
  padding: 10px;
}

table.outer th {
  font-weight: bold;
  vertical-align: bottom;
  text-align: left;
}

/* Column widths */
table.outer col.col-twkm  {  width: 450px; }
table.outer col.col-mhd   {  width: 540px; }
table.outer col.col-thomp   {  width: 360px; }
/* table.outer col.col-thomp { min-width: 360px; max-width: 360px;} - col still narrows to nothing */
table.outer col.col-cmgg  { width: 130px; }

table.outer td {
  vertical-align: top;
}

/* Ensure header row is NOT sticky, even though lmgg.css sets th as sticky */
table.outer thead th {
  position: static;
  top: auto;
  z-index: auto;
  background: #ffffff;  /* or 'transparent' if you prefer */
}
  .stack { display: flex; flex-direction: column; gap: 0; }
  .split-row { display: flex; align-items: stretch; gap: 0; }
  .fixed-info { flex: 0 0 auto; margin-top: -10px; margin-left: -10px; display: flex; }
  .fixed-info table { border-collapse: collapse; height: 100%; }
  .fixed-info table td { border-right: 0 !important; height: 100%; padding-top: 10px; padding-bottom: 10px; }
  .fixed-info .bonninfo, .fixed-info .mhdinfo { height: 100%; overflow-y: auto; }

  .table-scroll { overflow-x: auto; overflow-y: hidden; max-width: 100%; margin-top: -10px; display: flex; }
  .table-scroll table { border-collapse: collapse; min-width: max-content; }

  table.inner { border-collapse: collapse; margin: 0; width: max-content; }
  table.inner td, table.inner tr:first-child td {
    border: 1px solid #AAA; border-top: 0;
    padding: 10px; text-align: center; vertical-align: top;
    position: relative; width: 100px; height: 110px;
  }
  table.inner.has-top td, table.inner.has-top tr:first-child td { border-top: 1px solid #AAA !important; }
  table.inner.bonn td { border-color: #AAA !important; }
  table.inner.mhd  td { border-color: #AAA; }
  table.inner.mhd td.mhdinfo, table.inner.bonn td.bonninfo {
    width: 100px; text-align: left; border-left-width: 0 !important; padding-left: 6px;
  }
  table.inner.bonn tr.mhd-under td {
    border-color: #AAA !important; border-top-width: 0; padding: 2px 4px; height: 1.4em; vertical-align: top;
  }
  table.inner.bonn tr.t-under   td,
  table.inner.mhd  tr.t-under   td {
    border-color: #AAA !important; border-top-width: 0; padding: 2px 4px; height: 1.4em; vertical-align: middle;
  /* prevent doubled divider under the graphics row */
  table.inner.bonn tr.t-under td { border-top-width: 0; }
  }

  .media { height: 80px; display: flex; align-items: center; justify-content: center; text-align: center; }
  img.thumb { max-width: 80px; max-height: 80px; display: block; }
  .cap { font-size: 10pt; text-align: center; }
  .cap.bottom { position: static; margin-top: 6px; }
  .cap2, .tcap2 { font-size: 10pt; text-align: center; }

  .trow { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0; }
  .tcard { position: relative; width: 120px; min-height: 140px; padding: 0 10px; }
  .tcard + .tcard { border-left: 1px solid #000; }
  .tmedia { height: 100px; display: flex; align-items: center; justify-content: center; text-align: center; }
  img.tthumb { max-width: 99px; max-height: 99px; display: block; cursor: zoom-in; transition: transform 0.15s ease-out; }
  img.tthumb.thomp-main { margin-top: 4px; max-width: 80px; max-height: 80px; }
  img.tthumb.thomp-zoomed { transform: scale(2); cursor: zoom-out; z-index: 1000; position: relative; }
  .tcap { font-size: 10pt; text-align: center; }
  .tcap.bottom { position: absolute; left: 0; right: 0; bottom: 6px; }

  .pron, .mhd-read { font-size: 10pt; margin-top: 4px; line-height: 1.25; white-space: pre-line; text-align: left; }
  .tran { font-size: 10pt; margin-top: 0.75em; white-space: pre-line; text-align: left; }

  /* CMGG column styles */
  .cmgg { font-size: 0; }
  .cmgg-words { font-size: 12pt; line-height: 1.25; white-space: normal; }
  .cmgg-tran  { font-size: 10pt; margin-top: 0.75em; white-space: pre-line; }

  .stack > .split-row:first-child .fixed-info,
  .stack > .split-row:first-child .table-scroll { margin-top: -10px; }
  .stack > .split-row:first-child table.inner.mhd { border-top: 0 !important; }

  /* Prevent overlap between stacked MHD mini-tables */
  .stack > .split-row { margin-top: 0; }
  .stack > .split-row + .split-row { margin-top: 12px; }  /* small vertical gap */

  /* Only the very first split-row nudges up to kiss the outer cell border */
  .stack > .split-row:first-child .fixed-info,
  .stack > .split-row:first-child .table-scroll { margin-top: -10px; }
  .stack > .split-row:not(:first-child) .fixed-info,
  .stack > .split-row:not(:first-child) .table-scroll { margin-top: 0; }

  /* Keep left info block and right scroll block aligned to the top, never stretched */
  .split-row { align-items: flex-start; }
  .fixed-info { align-self: flex-start; }
  .table-scroll { align-self: flex-start; }

  /* Ensure non-info grid cells never grow taller than the set cell height */
  table.inner td { overflow: hidden; }

  /* Make sure follow-on MHD inner tables draw their own top border cleanly */
  table.inner.mhd.has-top td,
  table.inner.mhd.has-top tr:first-child td {
    border-top: 1px solid #AAA !important;
  }


  .page-title { text-align:center; font-size: 1.5rem; font-weight: 700; margin: 0.5rem 0 1rem; }
  .thomp-scroll { overflow: visible; width: 100%; }

  /* Vertical gap between Thompson rows (same as stacked mini-tables) */
  .thomp-scroll .trow + .trow { margin-top: 24px; }


  table.outer thead th.supra { text-align: center; font-weight: 700; font-size: 14pt; }


/* === Added for new mini-table design (info-row + multi-row variants) === */

/* Thin top info row spanning all graphics columns */
table.inner tr.info-row td {
  border-color: #AAA !important;
  border-top: 1px solid #AAA !important;
  padding: 2px 4px;
  height: 1.4em;
  vertical-align: middle;
  text-align: left;
  white-space: normal;
  font-size: 10pt;
  /* background-color: #f7f7f7; */
  background-color: #eeeeee;
}

/* In info rows, keep pron/read/trans compact and allow natural wrapping */
table.inner tr.info-row .pron,
table.inner tr.info-row .mhd-read,
table.inner tr.info-row .tran {
  margin-top: 0;
  white-space: normal;
}

/* Darker + slightly thicker separator between stacked graphics rows */
table.inner.bonn tr.t-under.multi-bottom td,
table.inner.bonn tr.mhd-under.multi-bottom td,
table.inner.mhd  tr.t-under.multi-bottom td {
  border-bottom-color: #999 !important;
  border-bottom-width: 1.5px;
}


/* Make code/number in top info rows slightly larger */
table.inner tr.info-row .bonn-info strong,
table.inner tr.info-row .mhd-info strong {
  font-size: 12pt;
}

/* Thompson column header note styling */
table.outer th.thomp-header-cell {
  text-align: left;
  vertical-align: middle;
}

/* Left label stays normal, note floats to the right; nudge it down a bit */
.thomp-header-main {
  /* inherits bold & font size from th */
  display: inline-block;
  margin-top: 0.6em;
}

.thomp-header-note {
  float: right;
  font-weight: normal;
  font-size: 8pt;
  line-height: 1.1;
  text-align: right;
}