/* Copyright 2026 Sonic Light
*/

:root{
  --text: #111;
  --muted: #555;
  --rule: #e6e6e6;
  --bg: #fff;
  --link: #1a5fd0;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
          "Liberation Mono", monospace;

  /* comfortable line length on large screens */
  --leading: 1.55;
}

#ftoc-root {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

#ftoc-fab {
  /* ... existing styles ... */
  -webkit-transform: translateZ(0);  /* or translate3d(0,0,0) */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;  /* optional but helps in some cases */
  backface-visibility: hidden;
}

/* Prevent horizontal drift / phantom right-side space (common on iOS + large tables) */
html, body{
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: var(--leading);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip; /* modern */
}

@supports not (overflow-x: clip){
  html, body{ overflow-x: hidden; }
}

/* Keep iOS from shrinking text unexpectedly */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
}

/* Default page padding (left-biased) */
body{
  padding: 3rem 1.25rem 3rem 3rem; /* top right bottom left */
}

/* Make common wide elements obey the viewport */
img, svg, video, canvas{
  max-width: 100%;
  height: auto;
}

/* Tables: allow them to scroll inside themselves rather than forcing page width */
 /* Tables: horizontal scroll when needed (mobile-friendly) */
table{
  display: block;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;

  /* IMPORTANT: allow overflow instead of forcing wrap */
  table-layout: auto;
  width: max-content;   /* lets table be wider than viewport */
  min-width: 100%;      /* but never smaller than container */
  margin-bottom: 1rem;
}

/* Keep table structure sane when table is display:block */
thead, tbody, tfoot{
  display: table;
  width: 100%;
  table-layout: auto;
}
tr{
  display: table-row;
}
th, td{
  display: table-cell;
  vertical-align: top;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--rule);

  /* Prevent “forced wrapping” that eliminates horizontal overflow */
  white-space: nowrap;
}

/* If you WANT wrapping inside cells on desktop, you can relax it there */
@media (min-width: 768px){
  th, td{
    white-space: normal;
  }
}

th{ background: #fafafa; }
td p, th p{ margin: 0; }

/* Base elements */
p{ margin: 0 0 1rem 0; }

a{
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

/* Horizontal rules */
hr{
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2rem 0;
}

/* Headings */
h1, h2, h3, h4, h5, h6{
  font-family: var(--sans);
  line-height: 1.2;
  margin: 2rem 0 0.75rem 0;
}
h1{ font-size: 2rem; margin-top: 0; }
h2{ font-size: 1.5rem; }
h3{ font-size: 1.25rem; }
h4{ font-size: 1.1rem; }
h5{ font-size: 1rem; }
h6{ font-size: 1rem; color: var(--muted); }

h2{
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 2px solid var(--rule);
  text-align: center;
}
h3{ margin-top: 2.25rem; 
  text-transform: uppercase; }
  
h4, h5, h6{ margin-top: 1.75rem; }

/* Centered title block (Mammoth output selectors) */
p.title-1,
h1,
p.title-3,
p.title-4{
  text-align: center;
}

p.title-1,
p.title-3,
p.title-4{
  margin-left: auto;
  margin-right: auto;
}

p.title-1{
  font-size: 1.6rem;
  font-weight: 700;
  margin-top: 2rem;
}
h1{ margin: 0.25rem 0; }

p.title-3{
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--muted);
  margin-top: 0.25rem;
  margin-bottom: 1.7rem;
}
p.title-4{
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--muted);
  margin-top: 0.25rem;
  margin-bottom: 1rem;
}

p.outline-2{
  margin-left: 1.5rem;
  margin-bottom: 0.5rem;
}

p.outline-3{
  margin-left:3rem;
  margin-bottom: 0.5rem;
}

p.outline-123{
  margin-left: 3rem;
  margin-bottom: 0.5rem;
}

p.outline-abc{
  margin-left: 1.5rem;
  margin-bottom: 0.5rem;
}

p.chiasm-a{
  margin-left: 0rem;
}

p.chiasm-b{
  margin-left: 1.5rem;
}

p.chiasm-c{
  margin-left: 3rem;
}

p.chiasm-d{
  margin-left: 4.5rem;
}

p.chiasm-e{
  margin-left: 6rem;
}

p.chiasm-f{
  margin-left: 7.5rem;
}

p.chiasm-g{
  margin-left: 9.0rem;
}

p.chiasm-h{
  margin-left: 10.5rem;
}

p.chiasm-i{
  margin-left: 12rem;
}

p.chiasm-j{
  margin-left: 13.5rem;
}

p.chiasm-k{
  margin-left: 15.0rem;
}

p.view-2{
  margin-left: 1.5rem;
}

p.view-3{
  margin-left: 3rem;
}

p.caption{
  text-align: center;
}

p.appendix-title{
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
}

p.img-wrap > img.centered-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  max-width: 600px;
  max-height: 750px;
  height: auto;
  object-fit: contain;
}

p.bib-entry{
 margin-bottom: 0.9rem;
 line-height: 1.3;
}

/* Copyright in Footer */
.site-footer {
  padding: 1rem;
  text-align: center;
}

.site-footer a {
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

/* Quotes */
p.quote,
p.quote-in-norm,
p.quote-in-bib-entry,
p.quote-com,
p.quote-in-view-1,
p.quote-in-view-2{
  margin: 1.5rem 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid #ccc;
  background: #fafafa;
  color: var(--muted);
  font-style: italic;
}


/* Footnotes: keep refs aligned with text, blue and hyperlinky */
sup{
  font-size: 0.75em;
  vertical-align: baseline;
}
sup a{
  color: var(--link);
  text-decoration: none;
  font-weight: 500;
}
sup a:hover{ text-decoration: underline; }

/* --- Mobile adjustments (iPhone) --- */
@media (max-width: 550px){
  body{
    padding: 1.25rem 1rem 2rem 1.25rem; /* reduce left bias on phones */
    font-size: 19px;                   /* avoid "tiny text" */
    line-height: 1.6;
  }

  table{
    font-size: 1rem;
  }
}

/* Print */
@media print{
  body{ padding: 0; }
  a{ text-decoration: none; }

  p.quote-in-norm,
  p.quote-in-bib-entry,
  p.quote-com,
  p.quote-in-view-1,
  p.quote-in-view-2{
    background: transparent;
  }

  table{
    display: table;
    overflow: visible;
  }
}